https://www.elephantstock.com/cdn/shop/t/499/assets/js_CustomCanvasForm.A5E77X8m.min.js

1import{j as t}from"./js_useDebouncedState.CvWkdXSU.min.js";import{r}from"./js_index.Crf7B3Ob.min.js";import{S as Z,C as G}from"./js_Option.item.D9UfmoVK.min.js";import{u as P,I as F,P as J,M as Q}from"./js_ImageWithPreload.Dhn1UeE_.min.js";import{O as ee}from"./js_Options.BFW11WV4.min.js";import{k as te}from"./js_Product.blank.Providers.DDFJNMun.min.js";import{u as C,S as M,p as j,a as ie,b as oe,c as ae}from"./js_useProductStore.BgyZOOo8.min.js";import{u as Y,g as re}from"./js_useAsyncEffect.BiGeDMTB.min.js";import{g as O,b as N,I as K,P as L}from"./js_getFileSizes.F4NSgd0t.min.js";import{g as R}from"./js_getUploadcareCrop.CuiJX7BM.min.js";import{C as se}from"./js_CanvasWrapper.DkSFZFLM.min.js";import{l as ce}from"./js_linkToFilesCDN.mIeNtzj_.min.js";import{D as ne}from"./js_DiscountBlock.Dnfz22SE.min.js";import"./js_debounce.7OWXLXDu.min.js";import"./js_roundToDecimalPlaces.DYZ9sj9M.min.js";import"./js_MEDIA_BREAKPOINTS.3DqUDRnz.min.js";import"./js_Ssvg.ODD2re-o.min.js";import"./js_createBusEvent.DRNUdpN3.min.js";import"./js_DiscountBlockDataQuery.BasHEt7g.min.js";import"./js_promiseCacheService.Bft3JrpZ.min.js";import"./js_STOREFRONT.BNzxXAcI.min.js";import"./js_iDBCache.D4Gnuppr.min.js";import"./js_dl.dispatchAmplEvent.Q5-scYrg.min.js";import"./js_global-bus.Bi4RJYdA.min.js";import"./js_UPLOADCARE_PUBLIC_KEY.BJ5WKmjL.min.js";import"./js_handleize.C-mOEGc_.min.js";import"./js_preload-helper.BDv_8qch.min.js";import"./js_getLazyLinkToImage.B9lzkV3d.min.js";import"./js_ResponsiveImage.DT-6zAZu.min.js";import"./js_middleware.BdavVEk9.min.js";import"./js_react.1cqRQx-A.min.js";import"./js_component.BonMbcRm.min.js";import"./js_requestIdleCallback.BvP3C5_f.min.js";import"./js_useModal.CCYUdKqj.min.js";import"./js_toggleBodyScroll.3vxbwwF1.min.js";import"./js_Overlay.CMXNSdvF.min.js";import"./js_ErrorElement.C69F35tW.min.js";import"./js_customer-analytics.MmkKGwyA.min.js";import"./js_headlessLayerDomain.DiG14q3e.min.js";import"./js_useFileUpload.CoW1810Z.min.js";import"./js_documentDragAndDrop.DlzC-CPT.min.js";import"./js_loadAsset.BTDwvHLn.min.js";import"./js_component.image-cropper.4GbR_FEn.min.js";import"./js_linkToAssets.QIF-vbJ4.min.js";import"./js_getImageSizesAttr.C8MRf7me.min.js";const pe={"horizontal-1-horizontal":{handledName:"1_horizontal",type:"canvas-horizontal",left:5,top:19.7,width:88.7,height:59.25,crop:"3:2"},"horizontal-3-horizontal":{handledName:"3_horizontal",type:"canvas-horizontal",left:5,top:21.2,width:89.2,height:56.82,crop:"655:412"},"horizontal-4-pop":{handledName:"4_pop",type:"canvas-horizontal",left:5,top:19.15,width:89.55,height:61.15,crop:"1405:862",buttonsStyle:{top:"16%"}},"horizontal-4-horizontal":{handledName:"4_horizontal",type:"canvas-horizontal",left:4.9,top:17.3,width:89.4,height:64.72,crop:"896:615"},"horizontal-5-horizontal":{handledName:"5_horizontal",type:"canvas-horizontal",left:5,top:24.55,width:89.3,height:50.25,crop:"227:120"},"wide-3-wide":{handledName:"3_wide",type:"canvas-wide",left:4.9,top:28,width:89.45,height:43.3,crop:"1069:512"},"wide-5-star":{handledName:"5_star",type:"canvas-wide",left:5,top:29,width:89.65,height:41.6,crop:"1289:564",buttonsStyle:{top:"27%"}},"wide-5-pop":{handledName:"5_pop",type:"canvas-wide",left:5,top:26.9,width:89.5,height:45.6,crop:"293:144",buttonsStyle:{top:"18%"}},"vertical-1-vertical":{handledName:"1_vertical",type:"canvas-vertical",left:27.1,top:5,width:44.7,height:88.9,crop:"1:2"},"vertical-3-vertical":{handledName:"3_vertical",type:"canvas-vertical",left:28,top:5,width:43.35,height:89.35,crop:"977:2079"},"square-1-square":{handledName:"1_square",type:"canvas-square",left:5,top:5,width:88.45,height:88.45,crop:"1:1"},"square-4-square":{handledName:"4_square",type:"canvas-square",left:5,top:5.1,width:89,height:88.8,crop:"1:1"},"panoramic-1-panoramic":{handledName:"1_panoramic",type:"canvas-panoramic",left:5,top:34.55,width:89,height:29.8,crop:"3:1"},"panoramic-3-panoramic":{handledName:"3_panoramic",type:"canvas-panoramic",left:5,top:35.25,width:89.5,height:29.1,crop:"1991:630"}},he=({setLayoutItemsAll:m})=>{const[o]=P("custom_product","personalization",{lifetime:20160}),[e,n]=r.useState(void 0),l=C(d=>d.optimisticSelectedOptions[M])??"",g=ce(`cpa-mask.${l.substring(l.indexOf("-")+1)}.webp`),i=pe[l],s=`${j.id}-${l}`,w=r.useRef(!0);Y(async d=>{if(o===null)return;const p=await o.getValue(s);if(!d){if(p!==null&&(w.current||e!==void 0&&e.src===p.src))n(p);else if(e!==void 0){const{cropX:c,cropY:f,cropHeight:h,cropWidth:z}=N({fileWidth:e.width,fileHeight:e.height,fieldAspect:i.width/i.height}),y={...e,crop:{x:c,y:f,width:z,height:h}};n(y),o.setValue(s,y)}w.current=!1}},[o,s]),r.useEffect(()=>{if(e===void 0){m([]);return}m([{_userImageLink:e.src+R({imageWidth:e.width,imageHeight:e.height,cropX:e.crop.x,cropY:e.crop.y,cropWidth:e.crop.width,cropHeight:e.crop.height}),_userImageMask:g,_userImageMaskAR:1,_userImageSize:`${i.width}% ${i.height}%`,_userImagePosition:`${i.left}% ${i.top}%`}])},[e,i.height,i.left,i.top,i.width,g,m]);const x=r.useCallback(d=>{(async()=>{const{width:p,height:c}=await O(d);if(p<1||c<1)return;const{cropX:f,cropY:h,cropHeight:z,cropWidth:y}=N({fileWidth:p,fileHeight:c,fieldAspect:i.width/i.height}),W={src:d.cdnUrl,width:p,height:c,crop:{x:f,y:h,width:y,height:z}};n(W),o?.setValue(s,W)})()},[o,s,i.height,i.width]),b=r.useCallback(()=>{n(void 0),o?.deleteValue(s)},[o,s]),_=r.useCallback(d=>{n(p=>{if(p===void 0)return;const c={...p,crop:d};return o?.setValue(s,c),c})},[o,s]);

1return t.jsx("div",{className:"fx:1 bg:#f7f7f7 ov:hidden h:100p w:100p d:flex fxd:column ai:center jc:center gap:20 gap:12:lg-up py:20 px:14 px:56:xl-up",children:t.jsx(r.Suspense,{fallback:t.jsx("div",{className:"fz:14",children:"Loading..."}),children:t.jsxs(se,{aspectRatio:1,children:[t.jsxs(r.Suspense,{fallback:t.jsx("div",{className:"pos:a z:1 lh:0 bg:black/40",style:{left:`${i.left}%`,top:`${i.top}%`,width:`${i.width}%`,height:`${i.height}%`},children:t.jsx(L,{})}),children:[t.jsx("div",{className:"pos:a z:1 lh:0",style:{left:`${i.left}%`,top:`${i.top}%`,width:`${i.width}%`,height:`${i.height}%`},children:e!==void 0&&t.jsx(F,{src:e.src+R({imageWidth:e.width,imageHeight:e.height,cropX:e.crop.x,cropY:e.crop.y,cropWidth:e.crop.width,cropHeight:e.crop.height})})}),t.jsx(K,{image:e,panelKey:j.id,panelWidth:i.width,panelHeight:i.height,onCrop:_,onFileUploaded:x,onFileRemoved:b,position:{left:`${i.left}%`,top:`${i.top}%`,width:`${i.width}%`,height:`${i.height}%`}})]}),g!==null&&t.jsx(F,{src:g,className:"d:block w:100p pev:none pos:r z:3"})]})})})},le={"framed-canvas":{floating:{thickness:.375,gap:.125},"modern-deep":{thickness:.5,gap:0}},"framed-print":{modern:{thickness:.75,gap:2.25},"modern-deep":{thickness:1,gap:2},classic:{thickness:1.25,gap:1.75}}},de=({setLayoutItemsAll:m})=>{const[o]=P("custom_product","personalization",{lifetime:20160}),[e,n]=r.useState(void 0),l=r.useRef(null),g=r.useRef(null),i=r.useRef(null),s=C(a=>a.optimisticSelectedOptions[M])??"",w=C(a=>a.optimisticSelectedOptions[ie])??"",x=C(a=>a.optimisticSelectedOptions[oe])??"",b=C(a=>a.optimisticSelectedOptions[ae])??"",_=re(s),[d,p]=w.split("x").map(a=>Number(a)),[c,f]=s.includes("vertical")?[2,3]:s.includes("panoramic")?[3,1]:[3,2],h=`${j.id}-${c}x${f}`,z=r.useRef(!0);Y(async a=>{if(o===null)return;const u=await o.getValue(h);if(!a){if(u!==null&&(z.current||e!==void 0&&e.src===u.src))n(u);else if(e!==void 0){const{cropX:v,cropY:k,cropHeight:H,cropWidth:I}=N({fileWidth:e.width,fileHeight:e.height,fieldAspect:c/f}),S={...e,crop:{x:v,y:k,width:I,height:H}};n(S),o.setValue(h,S)}z.current=!1}},[o,h]),r.useEffect(()=>{if(e===void 0){m([]);return}const a=e.src+R({imageWidth:e.width,imageHeight:e.height,cropX:e.crop.x,cropY:e.crop.y,cropWidth:e.crop.width,cropHeight:e.crop.height});m([{_userImageLink:a}]),i.current!==null&&(i.current.data={room:null,inches:null,panels:[a],x:50,y:50,layout:_,size:w,style:x,color:b,borderSize:null,borderColor:null,bleedMethod:null,borders:"white-border",config:{gapBetweenPanels:1,panelMatrix:[[{}]]}})},[w,b,x,e,_,m]);const y=d/p,{thickness:W,gap:V}=le[_]?.[x]??{},A=(W??0)+(V??0),$=100/d*A,U=100/p*A,q=100-$*2,X=100-U*2;r.useEffect(()=>{if(l.current===null||g.current===null)return;const a=Math.round(l.current.offsetWidth*$/100);g.current.style.borderWidth=g.current.style.borderImageWidth=`${a+2}px`},[s,x,w,$]);const D=r.useCallback(a=>{(async()=>{const{width:u,height:v}=await O(a);if(u<1||v<1)return;const{cropX:k,cropY:H,cropHeight:I,cropWidth:S}=N({fileWidth:u,fileHeight:v,fieldAspect:c/f}),E={src:a.cdnUrl,width:u,height:v,crop:{x:k,y:H,width:S,height:I}};n(E),o?.setValue(h,E)})()},[f,c,o,h]),B=r.useCallback(()=>{n(void 0),o?.deleteValue(h)},[o,h]),T=r.useCallback(a=>{n(u=>{if(u===void 0)return;const v={...u,crop:a};return o?.setValue(h,v),v})},[o,h]);return t.jsxs("div",{className:"fx:1 bg:#f7f7f7 ov:hidden h:100p w:100p d:flex fxd:column ai:center jc:center gap:20 gap:12:lg-up py:20 px:14 px:56:xl-up",children:[t.jsx("div",{className:"pos:r h:100p w:100p ov:hidden",children:t.jsxs("div",{className:"pos:a mah:100p maw:100p inset:0 m:auto ov:hidden us:none fp-assets__preload",style:{aspectRatio:y,"--container-ar":y},ref:l,children:[t.jsx("div",{className:"pos:a l:50p t:50p trf:t_-50p z:1 bxsh:in_4",style:{width:`${q}%`,height:`${X}%`},children:t.jsxs(r.Suspense,{fallback:t.jsx("div",{className:"pos:a z:1 lh:0 bg:black/40 inset:0",children:t.jsx(L,{})}),children:[t.jsx("div",{className:"pos:a z:1 lh:0 inset:0",children:e!==void 0&&t.jsx(F,{src:e.src+R({imageWidth:e.width,imageHeight:e.height,cropX:e.crop.x,cropY:e.crop.y,cropWidth:e.crop.width,cropHeight:e.crop.height})})}),t.jsx(K,{image:e,panelKey:j.id,panelWidth:c,panelHeight:f,onCrop:T,onFileUploaded:D,onFileRemoved:B,position:{left:0,top:0,width:"100%",height:"100%"}})]})}),t.jsx("div",{ref:g,className:`pos:a z:2 inset:0 bd bxsh:6 trf:tz_1px pev:none fp-assets__${_}-${x??""}-${b??""}`})]})}),t.jsx("flat-preview-canvas",{id:"flat-preview-for-save",class:"pos:a z:-1",ref:i,"data-height":600,"data-width":600,hidden:!0})]})},at=()=>{const{opened:m,openFn:o,closeFn:e}=te(),[n,l]=r.useState([]);return t.jsxs(t.Fragment,{children:[t.jsxs("div",{className:"d:inline",children:[t.jsx(ee,{}),t.jsx(ne,{}),t.jsx(Z,{children:t.jsx(J,{opened:m,openFn:o})}),t.jsx(G,{})]}),m&&t.jsxs(Q,{layoutItemsAll:n,closeHandler:e,children:[j.isCustomCanvas&&t.jsx(he,{setLayoutItemsAll:l}),j.isCustomFramedCanvas&&t.jsx(de,{setLayoutItemsAll:l})]})]})};export{at as default};