https://www.pxcode.io/static/js/3763.745fb37c.chunk.js

1"use strict";(self.webpackChunkpxCodeClient=self.webpackChunkpxCodeClient||[]).push([[3763],{44584:(e,t,o)=>{o.d(t,{A:()=>n});o(26809);const n=o.p+"static/media/iconCutBlackBold.500af4db39dccd59a0961707b357166f.svg"},7825:(e,t,o)=>{o.d(t,{A:()=>n});o(26809);const n=o.p+"static/media/iconFocusGray.0bde834afa704784ecb5593b6af20621.svg"},3763:(e,t,o)=>{o.r(t),o.d(t,{default:()=>v});var n,l=o(26809),i=o(91645),s=o(98986),a=o(8733),r=o(79178),c=o(43755),d=o(30770),p=o(73884),h=o(81875),x=o(47039),m=o(12973);const g=-1!==navigator.userAgent.indexOf("Mac OS X");let u=(0,i.PA)(n=class extends l.Component{constructor(e){super(e),this.onCancel=()=>{(0,x.$)("editor_splitToSection_cancel_btn");const{layoutContext:e}=this.props;e.handleClose()},this.onRest=()=>{(0,x.$)("editor_splitToSection_splitRest_btn");const{layoutContext:e}=this.props;e.onRest()},this.onFocus=e=>{e.currentTarget.blur()}}render(){const{layoutContext:e}=this.props;return(0,m.jsxs)(m.Fragment,{children:[e.resolveMode&&(0,m.jsx)("div",{className:(0,a.AH)(f.banner),style:{backgroundColor:e.overlap.length?"#ffc473":"#e2f6ff"},children:(0,m.jsxs)("div",{className:(0,a.AH)(f.action),children:[(0,m.jsxs)("div",{className:(0,a.AH)(f.title),children:["Please resolve the ",e.overlap.length," cropped item",e.overlap.length>1?"s":"","."]}),(0,m.jsx)("div",{style:{flex:1}}),(0,m.jsx)(c.default,{autoFocus:!0,disabled:0===e.overlap.length,type:0!=e.overlap.length?"primary":"default",style:{alignSelf:"flex-end",marginLeft:5,backgroundColor:0===e.overlap.length?void 0:"#d78000"},onClick:()=>{e.selectNextOverlap(),e.context.zoomTo(e.context.focusItem),d.Ay.success("Selected.")},children:"Select Next Cropped Item"}),(0,m.jsx)(c.default,{autoFocus:!0,style:{alignSelf:"flex-end",marginLeft:5},onClick:()=>{e.resolveMode=!1,e.context.unselectAll(),e.checkSelect()},type:0==e.overlap.length?"primary":"default",children:"Done"})]})}),e.resolveMode?(0,m.jsx)("div",{className:(0,a.AH)(f.panelResolve),children:(0,m.jsxs)("div",{className:(0,a.AH)(f.panelGap),children:[0!==e.overlap.length&&(0,m.jsxs)("div",{children:[(0,m.jsx)("b",{className:(0,a.AH)(f.panelResolveTitle),children:"Item that need to be resolved"}),(0,m.jsx)("div",{className:(0,a.AH)(f.panelResolveSubtitle),children:"You can resolve items in various ways, such as cutting color item, moving items to an Absolute Temp, cropping the image, or removing the item from the dividing line, among other methods."})]}),e.overlap.map(((t,n)=>{var l,i;return(0,m.jsxs)("div",{style:null!==(l=e.context)&&void 0!==l&&l.focusItem&&e.context.focusItem.id===t.id?{backgroundColor:"#BBE0FB"}:null!==(i=e.context)&&void 0!==i&&i.hovered&&e.context.hovered.id===t.id?{backgroundColor:"#FFEACA"}:{},className:(0,a.AH)(f.resolveRow),onClick:()=>{e.context.selectOne(t),e.context.zoomTo(t)},onMouseOver:()=>{e.context.hovered=t},onMouseOut:()=>{e.context.hovered=null},children:[(0,m.jsx)("span",{style:{color:e.context.focusItem&&e.context.focusItem===t?"#000000":"#666666"},className:(0,a.AH)(f.resolveRowTitle),children:`${t.tagName} .${t.title}`}),(0,m.jsxs)(c.default,{style:{gap:4,display:"flex",alignItems:"center",paddingLeft:12,paddingRight:4,borderRadius:4,borderColor:"#ADADAD",color:e.context.focusItem&&e.context.focusItem===t?"#7C7C7C":"#575757",height:24},onClick:()=>{e.context.selectOne(t),e.context.zoomTo(t)},disabled:e.context.focusItem&&e.context.focusItem===t,type:e.context.focusItem&&e.context.focusItem===t?"dashed":"default",onMouseOver:()=>{e.context.previewItem=t},onMouseOut:()=>{e.context.previewItem=null},children:["Select",(0,m.jsx)(p.A,{svg:!0,style:{marginRight:3},size:17,children:o(7825).A})]})]},t.id)}))]})}):(0,m.jsxs)("div",{className:(0,a.AH)(f.panel),children:[(0,m.jsxs)("b",{children:[(0,m.jsx)(p.A,{svg:!0,style:{marginRight:3},size:17,children:o(44584).A}),"Create Sections"]}),(0,m.jsx)("dotlottie-player",{autoplay:!0,loop:!0,mode:"normal",src:"/image/makeSections.lottie",style:{marginTop:20,width:270,height:310}}),(0,m.jsx)("div",{style:{display:"flex",marginTop:20},children:(0,m.jsxs)("div",{className:(0,a.AH)(f.title),children:["Please drag the dividing line and press the ",(0,m.jsx)("b",{children:"Create Section"})," button. ",(0,m.jsx)("br",{}),(0,m.jsx)("br",{}),!g&&(0,m.jsxs)("span",{children:[(0,m.jsx)("b",{children:"SPACE + Drag"})," can pan the canvas."]}),"Divide the sections code look like this:",(0,m.jsx)("div",{style:{marginTop:5},children:(0,m.jsx)(r.NG,{theme:h.A,text:'<main>\n  <section class="header">...</section>\n  <section class="hero">...</section>\n  <section class="info">...</section>\n  <section class="footer">...</section>\n</main>',showLineNumbers:!1,language:"html"})})]})})]})]})}})||n;const f=a.vv.create({radioGroup:{margin:10},title:{fontSize:14},banner:{position:"absolute",display:"flex",flexDirection:"column",padding:20,borderRadius:5,borderStyle:"solid",borderWidth:1,width:700,height:"fit-content",top:70,left:"50%",transform:"translate(-50%, 0)",zIndex:200},panel:{position:"absolute",display:"flex",flexDirection:"column",backgroundColor:"#e2f6ff",borderStyle:"solid",borderWidth:1,padding:20,width:315,height:"calc(100vh - 34px)",transformOrigin:"bottom right",right:0,bottom:0,zIndex:200},panelResolve:{position:"absolute",display:"flex",flexDirection:"column",backgroundColor:"#e2f6ff",borderStyle:"solid",borderWidth:1,padding:"20px 0px",width:315,height:"calc(100vh - 34px)",transformOrigin:"bottom right",right:0,bottom:0,zIndex:200},selection:{minWidth:300,display:"inline-block",paddingTop:4,fontSize:15,verticalAlign:"middle"},action:{flex:1,display:"flex",alignItems:"center"},hit:{marginTop:10,marginLeft:20,fontSize:12},player2:{marginTop:10,width:320,height:320},resolveRow:{display:"flex",justifyContent:"space-between",alignItems:"center",cursor:"pointer",height:32,padding:"0px 20px"},resolveRowTitle:{fontSize:12},panelGap:{gap:12,display:"flex",flexDirection:"column"},selectedRow:{backgroundColor:"#BBE0FB"},panelResolveTitle:{height:28,padding:"0px 20px"},panelResolveSubtitle:{fontSize:12,padding:"10px 20px"}}),v=(0,s.withRouter)(u)}}]);