polotno-node 2.9.4 → 2.9.6

package/dist/assets/{index-yVSO3dEu.js → index-30-BPj2-.js}

@@ -111,7 +111,7 @@ PERFORMANCE OF THIS SOFTWARE.
           opacity: 0.6;
         }
       `;h.innerHTML="",h.appendChild(document.createTextNode(Z)),JSON.stringify(X)!==JSON.stringify(I)&&B(X)});const $=r.default.useRef(null);r.default.useEffect(()=>{const X=setTimeout(()=>{var Z;const J=$.current;if(!J)return;(Z=$.current)===null||Z===void 0||Z.focus();const ee=L||J.value.length;J.selectionStart=J.selectionEnd=ee,q&&(J==null||J.select(),document.execCommand("selectAll",!1,null))});return()=>{clearTimeout(X)}},[]),r.default.useEffect(()=>{window.addEventListener("blur",z);const X=Z=>{var J;!((J=$.current)===null||J===void 0)&&J.contains(Z.target)||z()};return window.addEventListener("touchstart",X),()=>{window.removeEventListener("blur",z),window.removeEventListener("touchstart",X)}},[]);let K=0;const V=M.textArr.length*M.lineHeight()*M.fontSize();G.verticalAlign==="middle"&&(K=(G.a.height-V)/2),G.verticalAlign==="bottom"&&(K=G.a.height-V);const H=(0,w.removeTags)(G.text);return r.default.createElement(a.Html,null,r.default.createElement("textarea",{className:"polotno-input",ref:$,dir:x(H),style:Object.assign(Object.assign(Object.assign({},d),I),{paddingTop:K+"px"}),value:H,onChange:X=>{G.set({text:X.target.value})},placeholder:G.placeholder,onBlur:z}))}),_=j=>{const[G,z]=r.default.useState(!1),q=r.default.useRef(!1);return r.default.useEffect(()=>{var L=!0;return setTimeout(()=>{L&&(j._editModeEnabled&&(q.current=!0),z(!0),setTimeout(()=>{q.current=!1},50))},50),()=>{L=!1}},[]),{editorEnabled:G&&j._editModeEnabled,selectAll:q.current}},A=(j,G)=>{const[z,q]=r.default.useReducer(I=>I+1,0),L=r.default.useRef((0,p.isFontLoaded)(G));return r.default.useLayoutEffect(()=>{if(L.current=(0,p.isFontLoaded)(G),L.current)return;let I=!0;return(async()=>{L.current=!1,q();const B=(0,f.incrementLoader)(`text ${G}`);await j.loadFont(G),setTimeout(B,100),I&&(L.current=!0,q())})(),()=>{I=!1}},[G]),[L.current]};e.useFontLoader=A;const C=({fontLoaded:j,fontFamily:G,fontSize:z,lineHeight:q})=>r.default.useMemo(()=>{if(typeof q=="number")return q;const L=document.createElement("div");L.style.fontFamily=G,L.style.fontSize=z+"px",L.style.lineHeight=q,L.innerText="Test text",document.body.appendChild(L);const I=L.offsetHeight;return document.body.removeChild(L),I/z},[j,G,z,q]);function k(j){var G=j.getAbsoluteTransform().copy();G.invert();var z=j.getStage().getPointerPosition();return G.point(z)}function R(j){var G;const z=j.target,q=k(z),L=z.textArr,I=Math.floor(q.y/(z.fontSize()*z.lineHeight())),B=L.slice(0,I).reduce((K,V)=>K+V.text.length,I),M=(G=L[I])!==null&&G!==void 0?G:L[0];let $=0;return z.align()==="right"?$=z.width()-M.width:z.align()==="center"&&($=z.width()/2-M.width/2),B+Math.round((q.x-$)/M.width*M.text.length)}function D(j){const G=r.default.useRef(j),z=r.default.useRef(j);return r.default.useMemo(()=>{z.current=G.current,G.current=j},[j]),z.current}function U(j,G){const z=j.fontSize(),q=j.height(),L=(0,w.removeTags)(G.text);let I=G.a.fontSize;j.height(void 0);const B=Math.round(2*G.a.fontSize)-1;for(let M=1;M<B;M++){const $=G.a.height&&j.height()>G.a.height,K=L.split(`
-`).join(" ").split(/[\s-]+/);let V=j.textArr.map(X=>X.text).join(";");const H=K.find(X=>!V.includes(X)||(V=V.replace(X,""),!1));if(!($||H))break;I-=.5,j.fontSize(I)}return j.fontSize(z),j.height(q),I}function Y({lines:j,lineHeight:G,width:z,align:q="left",padding:L=0,cornerRadius:I=0}){var B;j.forEach((V,H)=>{V.cx=z/2,q==="right"?V.cx=z-V.width/2:q==="left"&&(V.cx=V.width/2),q!=="justify"||V.lastInParagraph||(V.width=z),q==="justify"&&(V.cx=V.width/2)});let M=`M ${(B=j[0])===null||B===void 0?void 0:B.cx} ${-L}`;j.forEach((V,H)=>{const{cx:X}=V,Z=j[H-1];Z&&Z.width>V.width?M+=` L ${X+V.width/2+L} ${H*G+L}`:M+=` L ${X+V.width/2+L} ${H*G-L}`;const J=j[H+1];J&&J.width>V.width?M+=` L ${X+V.width/2+L} ${(H+1)*G-L}`:M+=` L ${X+V.width/2+L} ${(H+1)*G+L}`});for(var $=j.length-1;$>=0;$--){const V=j[$],{cx:H}=V,X=j[$+1];X&&X.width>V.width?M+=` L ${H-V.width/2-L} ${($+1)*G-L}`:M+=` L ${H-V.width/2-L} ${($+1)*G+L}`;const Z=j[$-1];Z&&Z.width>V.width?M+=` L ${H-V.width/2-L} ${$*G+L}`:M+=` L ${H-V.width/2-L} ${$*G-L}`}M+=" Z";const K=(0,l.parsePath)(M);return(0,l.roundCommands)(K,I).path}e.getLineHeight=C,e.usePrevious=D,e.TextElement=(0,n.observer)(({element:j,store:G})=>{const z=r.default.useRef(null),q=r.default.useRef(null),{editorEnabled:L,selectAll:I}=_(j),[B,M]=r.default.useState(!1),[$,K]=r.default.useState(!1),V=r.default.useRef(j.a.height),H=G.selectedElements.indexOf(j)>=0,{textVerticalResizeEnabled:X}=S.flags,Z=D(j.fontFamily),[J,ee]=r.default.useState([]);r.default.useEffect(()=>{var se,Pe;const xe=(Pe=(se=z.current)===null||se===void 0?void 0:se.textArr)!==null&&Pe!==void 0?Pe:[];JSON.stringify(xe)!==JSON.stringify(J)&&ee(xe)}),r.default.useEffect(()=>{if(j.a.width)return;const se=z.current;se.width(600),j.set({width:1.4*se.getTextWidth()})},[]),r.default.useLayoutEffect(()=>(0,o.autorun)(()=>{const se=z.current;(0,g.applyFilter)(se,j)}));const[re]=(0,e.useFontLoader)(G,j.fontFamily),ne=(0,w.removeTags)(j.text),de=()=>{const se=z.current.clone({height:void 0}),Pe=Math.ceil(se.fontSize()*se.lineHeight()*se.textArr.length+1);return se.destroy(),Pe};r.default.useLayoutEffect(()=>{if(!re)return;const{textOverflow:se}=S.flags;if(j.a.height)if(se!=="change-font-size"||$||G.isPlaying){if(se==="resize"){const Pe=de();X&&j.a.height<Pe&&G.history.ignore(()=>{var xe;(0,y.isAlive)(j)&&j.set({height:Pe}),(xe=z.current)===null||xe===void 0||xe.height(Pe)},!1,!0),X||j.a.height===Pe||G.history.ignore(()=>{var xe;(0,y.isAlive)(j)&&j.set({height:Pe}),(xe=z.current)===null||xe===void 0||xe.height(Pe)},!1,!0)}}else{const Pe=U(z.current,j);if(Pe!==j.a.fontSize)return void G.history.ignore(()=>{j.set({fontSize:Pe})},!1,!0);const xe=de();j.a.height===xe||X||G.history.ignore(()=>{j.set({height:xe})},!1,!0)}else{const Pe=de();G.history.ignore(()=>{j.set({height:Pe})},!1,!0)}}),r.default.useLayoutEffect(()=>{const se=z.current;se&&(se.width(se.width()+1e-8),se._setTextData(),(0,g.applyFilter)(se,j))},[re]);const pe=r.default.useRef(null),Me=r.default.useRef(0),Fe=se=>{se.evt.preventDefault(),G.selectedShapes.find(xe=>xe===j)&&j.contentEditable&&(Me.current=R(se),j.toggleEditMode())},fe=!ne&&j.placeholder?.6:j.a.opacity;(0,E.useFadeIn)(z,fe);const ie=(0,e.getLineHeight)({fontLoaded:re,fontFamily:j.fontFamily,fontSize:j.a.fontSize,lineHeight:j.lineHeight}),ve=j.selectable||G.role==="admin",ge=(0,u.useColor)(j),te=r.default.useMemo(()=>j.backgroundEnabled?Y({lines:JSON.parse(JSON.stringify(J)),cornerRadius:j.backgroundCornerRadius*(j.a.fontSize*ie*.5),lineHeight:ie*j.a.fontSize,padding:j.backgroundPadding*(j.a.fontSize*ie*.5),width:j.a.width,align:j.align}):"",[j.backgroundEnabled,j.backgroundCornerRadius,j.a.fontSize,ie,j.backgroundPadding,j.a.width,j.align,J]),ue=(0,v.useMobile)();let be=0;return j.verticalAlign==="middle"?be=(j.a.height-J.length*ie*j.a.fontSize)/2:j.verticalAlign==="bottom"&&(be=j.a.height-J.length*ie*j.a.fontSize),r.default.createElement(r.default.Fragment,null,r.default.createElement(i.Path,{ref:q,x:j.a.x,y:j.a.y,rotation:j.a.rotation,hideInExport:!j.showInExport||!ne,listening:!1,visible:j.backgroundEnabled,opacity:j.backgroundOpacity,data:te,fill:j.backgroundColor,offsetY:-be}),r.default.createElement(i.Text,Object.assign({ref:z,id:j.id,name:"element",hideInExport:!j.showInExport||!ne,editModeEnabled:j._editModeEnabled,x:j.a.x,y:j.a.y,rotation:j.a.rotation,width:j.a.width,height:j.a.height,text:ne||j.placeholder},ge,{stroke:j.stroke,lineJoin:"round",strokeWidth:j.strokeWidth,fillAfterStrokeEnabled:!0,fontSize:j.a.fontSize,fontFamily:`"${j.fontFamily}", "${Z}"`,fontStyle:j.fontStyle+" "+j.fontWeight,textDecoration:j.textDecoration,align:j.align,verticalAlign:j.verticalAlign,draggable:ue?j.draggable&&H:j.draggable,preventDefault:!ue||H,opacity:fe,visible:!j._editModeEnabled,ellipsis:S.flags.textOverflow==="ellipsis",shadowEnabled:j.shadowEnabled,shadowBlur:j.shadowBlur,shadowOffsetX:j.shadowOffsetX,shadowOffsetY:j.shadowOffsetY,shadowColor:j.shadowColor,shadowOpacity:j.shadowOpacity,lineHeight:ie,letterSpacing:j.letterSpacing*j.a.fontSize,listening:ve,onDragMove:se=>{j.set({x:se.target.x(),y:se.target.y()})},onDragEnd:se=>{j.set({x:se.target.x(),y:se.target.y()})},onMouseEnter:()=>{M(!0)},onMouseLeave:()=>{M(!1)},onClick:Fe,onTap:Fe,onTransformStart:()=>{K(!0),V.current=z.current.height()},onTransform:se=>{var Pe,xe;const Ie=se.target;(Pe=q.current)===null||Pe===void 0||Pe.setAttrs({x:Ie.x(),y:Ie.y(),rotation:Ie.rotation(),scale:Ie.scale()});const xt=((xe=Ie.getStage())===null||xe===void 0?void 0:xe.findOne("Transformer")).getActiveAnchor();if(xt==="middle-left"||xt==="middle-right"){const tt=Ie.scaleX(),St=Ie.width()*tt,Ht=j.a.fontSize;let le=St;St<Ht&&(le=Ht,pe.current&&Ie.position(pe.current)),Ie.width(le),Ie.scaleX(1),Ie.scaleY(1);const he=de();if(S.flags.textOverflow!=="ellipsis"){const nt=Math.max(he,V.current);Ie.height(nt),j.set({height:Ie.height()})}j.set({x:Ie.x(),y:Ie.y(),width:Ie.width(),rotation:Ie.rotation()}),(0,g.applyFilter)(Ie,j)}if(xt==="top-center"||xt==="bottom-center"){let tt=S.flags.textOverflow==="resize"?de():ie*j.a.fontSize;se.target.height(Math.max(tt,se.target.height()*se.target.scaleY())),se.target.scaleY(1)}pe.current=se.target.position()},onTransformEnd:se=>{var Pe;const xe=se.target.scaleX();se.target.scaleX(1),se.target.scaleY(1),j.set({fontSize:Math.round(j.a.fontSize*xe),width:Math.ceil(se.target.width()*xe),x:se.target.x(),y:se.target.y(),rotation:se.target.rotation(),height:se.target.height()*xe,shadowBlur:j.shadowBlur*xe,shadowOffsetX:j.shadowOffsetX*xe,shadowOffsetY:j.shadowOffsetY*xe,strokeWidth:j.strokeWidth*xe}),(Pe=q.current)===null||Pe===void 0||Pe.setAttrs({scaleX:1,scaleY:1}),K(!1)}})),L&&r.default.createElement(i.Group,{x:j.a.x,y:j.a.y,rotation:j.a.rotation},r.default.createElement(P,{textNodeRef:z,element:j,selectAll:I,cursorPosition:Me.current,onBlur:()=>{j.toggleEditMode(!1)}})),!$&&(B||H)&&r.default.createElement(m.Highlighter,{element:j}))})})(c2);var x2={},Eu={};(function(e){var t=Se&&Se.__importDefault||function(d){return d&&d.__esModule?d:{default:d}};Object.defineProperty(e,"__esModule",{value:!0}),e.useSvgColors=e.replaceColors=e.sameColors=e.fixSize=e.getSvgSize=e.svgToURL=e.getColors=e.urlToString=e.urlToBase64=void 0;const r=t(Ui),n=t(it),i=f2;function a(d){for(;d.parentNode;){if(d.nodeName==="defs")return!0;d=d.parentNode}return!1}function o(d){const b={fill:"",stroke:""};if(d.getAttribute("fill")&&d.getAttribute("fill")!=="none"&&(b.fill=d.getAttribute("fill")),!b.fill&&d.style.fill&&d.style.fill!=="none"&&(b.fill=d.style.fill),d.getAttribute("stroke")&&(b.stroke=d.getAttribute("stroke")),!b.stroke&&d.style.stroke&&(b.stroke=d.style.stroke),!b.stroke&&!b.fill){const O=d.ownerSVGElement,x=O&&O!==d&&o(O);(x==null?void 0:x.fill)==="currentColor"||(x==null?void 0:x.stroke)==="currentColor"||(b.fill="black")}return b}const l=["path","rect","circle"];function u(d){for(var b=[],O=d.getElementsByTagName("*"),x=0,P=O.length;x<P;x++){const _=O[x];a(_)||(_.getAttribute("fill")!==null&&b.push(_),(_.getAttribute("stroke")!==null||_.style&&_.style.fill||l.indexOf(_.nodeName)>=0)&&b.push(_))}return b}async function f(d){const b=await fetch(d);return w(await b.text())}async function p(d){return await(await fetch(d,{mode:"cors"})).text()}function S(d){const b=u(new DOMParser().parseFromString(d,"image/svg+xml")),O=[];return b.forEach(x=>{const{fill:P,stroke:_}=o(x);[P,_].forEach(A=>{A&&(A==="currentColor"&&(A="black"),r.default.Util.colorToRGBA(A)&&O.indexOf(A)===-1&&O.push(A))})}),O}function w(d){return"data:image/svg+xml;base64,"+window.btoa(unescape(encodeURIComponent(d)))}async function g(d){const b=await p(d),O=new DOMParser().parseFromString(b,"image/svg+xml").documentElement.getAttribute("viewBox"),[x,P,_,A]=(O==null?void 0:O.split(" "))||[];return{width:parseFloat(_),height:parseFloat(A)}}function E(d){var b=new DOMParser().parseFromString(d,"image/svg+xml");const O=b.documentElement.getAttribute("viewBox"),[x,P,_,A]=(O==null?void 0:O.split(" "))||[],C=b.documentElement.getAttribute("width");!C&&b.documentElement.setAttribute("width",_+"px");const k=b.documentElement.getAttribute("height");if((!k||k.indexOf("%")>=0)&&b.documentElement.setAttribute("height",A+"px"),C&&C.indexOf("%")>=0&&k&&k.indexOf("%")===-1){const R=parseFloat(k)/parseFloat(A);b.documentElement.setAttribute("width",R*parseFloat(_)+"px")}if(k&&k.indexOf("%")>=0&&C&&C.indexOf("%")===-1){const R=parseFloat(C)/parseFloat(_);b.documentElement.setAttribute("height",R*parseFloat(A)+"px")}return C==="100%"&&k==="100%"&&(b.documentElement.setAttribute("width",_+"px"),b.documentElement.setAttribute("height",A+"px")),new XMLSerializer().serializeToString(b)}e.urlToBase64=f,e.urlToString=p,e.getColors=S,e.svgToURL=w,e.getSvgSize=g,e.fixSize=E;const m=(d,b)=>{if(!d||!b)return!1;if(b==="currentColor"&&d==="black")return!0;const O=r.default.Util.colorToRGBA(d),x=r.default.Util.colorToRGBA(b);return O&&x?O.r===x.r&&O.g===x.g&&O.b===x.b&&O.a===x.a:void 0};function v(d,b,O,x){var P=d.namespaceURI,_=document.createElementNS(P,"linearGradient");const A=r.default.Util.degToRad(O+90),C=(Math.cos(A)+1)/2,k=(Math.sin(A)+1)/2,R=(Math.cos(A+Math.PI)+1)/2,D=(Math.sin(A+Math.PI)+1)/2;_.setAttribute("x1",100*C+"%"),_.setAttribute("y1",100*k+"%"),_.setAttribute("x2",100*R+"%"),_.setAttribute("y2",100*D+"%"),_.setAttribute("gradientUnits","userSpaceOnUse"),_.setAttribute("id",b);for(var U=0;U<x.length;U++){var Y=x[U],j=document.createElementNS(P,"stop");for(var G in Y)Y.hasOwnProperty(G)&&j.setAttribute(G,Y[G]);_.appendChild(j)}return(d.querySelector("defs")||d.insertBefore(document.createElementNS(P,"defs"),d.firstChild)).appendChild(_)}function y(d,b){var O=new DOMParser().parseFromString(d,"image/svg+xml");const x=u(O),P=Array.from(b.keys());return x.forEach(_=>{const{fill:A,stroke:C}=o(_);[{prop:"fill",color:A},{prop:"stroke",color:C}].forEach(({prop:k,color:R})=>{const D=P.find(U=>(0,e.sameColors)(U,R));if(D){const U=b.get(D);if((0,i.isGradient)(U)){const{rotation:Y,stops:j}=(0,i.parseColor)(U),G=j.map(q=>({offset:100*q.offset+"%","stop-color":q.color})),z="color"+Math.round(1e8*Math.random());v(O.children[0],z,Y,G),_.style[k]=null,_.setAttribute(k,`url('#${z}')`)}else _.style[k]=b.get(D)}})}),w(new XMLSerializer().serializeToString(O))}e.sameColors=m,e.replaceColors=y;const h=d=>{const[b,O]=n.default.useState([]);return n.default.useEffect(()=>{let x=!1;return(async()=>{O([]);const P=S(await p(d));x||O(P)})(),()=>{x=!0}},[d]),b};e.useSvgColors=h})(Eu);(function(e){var t=Se&&Se.__createBinding||(Object.create?function(M,$,K,V){V===void 0&&(V=K);var H=Object.getOwnPropertyDescriptor($,K);H&&!("get"in H?!$.__esModule:H.writable||H.configurable)||(H={enumerable:!0,get:function(){return $[K]}}),Object.defineProperty(M,V,H)}:function(M,$,K,V){V===void 0&&(V=K),M[V]=$[K]}),r=Se&&Se.__setModuleDefault||(Object.create?function(M,$){Object.defineProperty(M,"default",{enumerable:!0,value:$})}:function(M,$){M.default=$}),n=Se&&Se.__importStar||function(M){if(M&&M.__esModule)return M;var $={};if(M!=null)for(var K in M)K!=="default"&&Object.prototype.hasOwnProperty.call(M,K)&&t($,M,K);return r($,M),$},i=Se&&Se.__importDefault||function(M){return M&&M.__esModule?M:{default:M}};Object.defineProperty(e,"__esModule",{value:!0}),e.ImageElement=e.useImageLoader=e.setImageLoaderHook=void 0;const a=i(it),o=zi,l=ja,u=Ga,f=i(f0),p=i(Ui),S=yf,w=Vl,g=Ia,E=n(Eu),m=di,v=wf,y=$l,h=$o;function d(){return document.createElement("canvas")}async function b(M){if(!(M.indexOf("data:image/svg+xml")>=0||M.indexOf(".svg")>=0))return M;const $=await E.urlToString(M),K=E.fixSize($);return E.svgToURL(K)}const O=M=>{const[$,K]=a.default.useState(M);return a.default.useEffect(()=>{(async()=>{const V=await b(M);V!==$&&K(V)})()},[M]),$};function x(M,$){return Math.sqrt(Math.pow($.x-M.x,2)+Math.pow($.y-M.y,2))}function P(M,$){return{x:(M.x+$.x)/2,y:(M.y+$.y)/2}}const _=(M,$,K)=>{const V=a.default.useMemo(()=>{var H,X;const{flipX:Z,flipY:J}=M,ee=M.type==="svg"||M.src.indexOf("data:image/svg+xml")>=0||M.src.indexOf(".svg")>=0,re=navigator.userAgent.toLowerCase().indexOf("firefox")>-1&&ee||M.maskSrc;if(!Z&&!J&&!re)return $;if(!$||!$.width||!$.height)return null;const ne=d();let de=1;M.type==="svg"&&(de=Math.max(M.a.width/$.width*K,M.a.height/$.height*K)),ne.width=Math.max($.width*de,1),ne.height=Math.max($.height*de,1);let pe=Z?-ne.width:0,Me=J?-ne.height:0;return(H=ne.getContext("2d"))===null||H===void 0||H.scale(Z?-1:1,J?-1:1),(X=ne.getContext("2d"))===null||X===void 0||X.drawImage($,pe,Me,ne.width,ne.height),ne},[M.maskSrc,M.flipX,M.flipY,$,M.a.width,M.a.height,K]);return a.default.useEffect(()=>()=>{V&&V.nodeName==="CANVAS"&&p.default.Util.releaseCanvas(V)},[V]),V};function A(M,$){const K=$.width/$.height;let V,H;return K>=M.width/M.height?(V=M.width,H=M.width/K):(V=M.height*K,H=M.height),{x:(M.width-V)/2,y:(M.height-H)/2,width:V,height:H}}function C(M,$,K,V,H,X,Z){for(var J=new ImageData($,K),ee=new Int32Array(M.data.buffer),re=M.width,ne=new Int32Array(J.data.buffer),de=J.width,pe=$/X,Me=K/Z,Fe=Math.round(1/pe),fe=Math.round(1/Me),ie=Fe*fe,ve=0;ve<J.height;ve++)for(var ge=0;ge<de;ge++){for(var te=V+Math.round(ge/pe)+(H+Math.round(ve/Me))*re,ue=0,be=0,se=0,Pe=0,xe=0;xe<fe;xe++)for(var Ie=0;Ie<Fe;Ie++){var xt=ee[te+Ie+xe*re];ue+=xt<<24>>>24,be+=xt<<16>>>24,se+=xt<<8>>>24,Pe+=xt>>>24}ue=Math.round(ue/ie),be=Math.round(be/ie),se=Math.round(se/ie),Pe=Math.round(Pe/ie),ne[ge+ve*de]=Pe<<24|se<<16|be<<8|ue}return J}function k(M,$){var K,V;const H=d();H.width=M.width,H.height=M.height;const X=Math.max(1,Math.floor(H.width*$)),Z=Math.max(1,Math.floor(H.height*$));(K=H.getContext("2d"))===null||K===void 0||K.drawImage(M,0,0,H.width,H.height);const J=C(H.getContext("2d").getImageData(0,0,H.width,H.height),X,Z,0,0,H.width,H.height);return H.width=X,H.height=Z,(V=H.getContext("2d"))===null||V===void 0||V.putImageData(J,0,0),H}const R=(M,$)=>{const[K,V]=z(M.maskSrc,"anonymous"),H=M.maskSrc?V:"loaded";return(0,e.useImageLoader)(H,M.id+"-mask"),a.default.useMemo(()=>{if(!K||!$||!$.width||!$.height)return $;const X=d();X.width=Math.max($.width,1),X.height=Math.max($.height,1);const Z=X.getContext("2d");if(!Z)return $;Z.drawImage($,0,0),Z.globalCompositeOperation="source-in";const J=A(K,M);return Z.drawImage(K,J.x,J.y,J.width,J.height,0,0,$.width,$.height),X},[$,K,M.a.width,M.a.height])},D=(M,$,K,V,H=0,X=!1)=>{const Z=Math.floor(Math.max(M.a.width*V,1)),J=Math.floor(Math.max(M.a.height*V,1)),ee=Math.min(H*V,Z/2,J/2),re=Math.max(M.a.width/K.width,M.a.height/K.height)*V,ne=M.page._exporting&&m.flags.imageDownScalingEnabled&&re<1&&!X,de=K.x===0&&K.y===0&&K.width===($==null?void 0:$.width)&&K.height===($==null?void 0:$.height),pe=a.default.useMemo(()=>{if(!(!$||!$.width||!$.height))return de&&ee===0&&!ne?void 0:d()},[$,ee,ne,de]);return a.default.useLayoutEffect(()=>{if(!pe||!$)return;pe.width=Z,pe.height=J;const Me=pe.getContext("2d");if(!Me)return;ee&&(Me.beginPath(),Me.moveTo(ee,0),Me.lineTo(Z-ee,0),Me.arc(Z-ee,ee,ee,3*Math.PI/2,0,!1),Me.lineTo(Z,J-ee),Me.arc(Z-ee,J-ee,ee,0,Math.PI/2,!1),Me.lineTo(ee,J),Me.arc(ee,J-ee,ee,Math.PI/2,Math.PI,!1),Me.lineTo(0,ee),Me.arc(ee,ee,ee,Math.PI,3*Math.PI/2,!1),Me.clip());const Fe=ne?k($,re):$,fe=ne?{x:Math.floor(K.x*re),y:Math.floor(K.y*re),width:Math.floor(K.width*re),height:Math.floor(K.height*re)}:K;Me.drawImage(Fe,fe.x,fe.y,fe.width,fe.height,0,0,pe.width,pe.height)},[pe,M.a.width,M.a.height,K.x,K.y,K.width,K.height,H,V,X,M.page._exporting,ne]),a.default.useEffect(()=>()=>{pe&&pe.nodeName==="CANVAS"&&p.default.Util.releaseCanvas(pe)},[pe]),pe||$},U=(M,$,K,V)=>{const H=O(M.clipSrc||""),[X,Z]=z(H,"anonymous"),J=M.clipSrc?Z:"loaded";(0,e.useImageLoader)(J,M.id+"-clip");const ee=a.default.useMemo(()=>{if($&&X)return d()},[$,X]);return a.default.useLayoutEffect(()=>{var re;if(!X||!$||!$.width||!$.height||!X||!X.width||!X.height||!ee)return;const ne=d(),de=Math.max(M.a.width/X.width*K,M.a.height/X.height*K);ne.width=X.width*de,ne.height=X.height*de,(re=ne.getContext("2d"))===null||re===void 0||re.drawImage(X,0,0,ne.width,ne.height),ee.width=Math.max($.width,1),ee.height=Math.max($.height,1);const pe=ee.getContext("2d");pe&&(pe.save(),pe.drawImage(ne,0,0,$.width,$.height),p.default.Util.releaseCanvas(ne),pe.globalCompositeOperation="source-in",pe.drawImage($,0,0,ee.width,ee.height),pe.restore())},[ee,$,X,M.a.width,M.a.height,K,...V]),M.clipSrc&&X?ee:$},Y=d(),j=(0,o.observer)(({element:M})=>{const $=Math.min(30,M.a.width/4,M.a.height/4),K=a.default.useRef(null);return a.default.useEffect(()=>{const V=K.current;if(!V)return;const H=new p.default.Animation(X=>{V.rotate(((X==null?void 0:X.timeDiff)||0)/2)},V.getLayer());return H.start(),()=>{H.stop()}}),a.default.createElement(u.Group,{x:M.x,y:M.y,rotation:M.rotation,listening:!1,opacity:M.a.opacity,hideInExport:!M.showInExport},a.default.createElement(u.Rect,{width:M.a.width,height:M.a.height,fill:"rgba(124, 173, 212, 0.8)"}),a.default.createElement(u.Arc,{ref:K,x:M.a.width/2,y:M.a.height/2,fill:"white",outerRadius:Math.abs($),innerRadius:Math.max(1,$-5),angle:270}))}),G=(0,o.observer)(({element:M})=>{const $="Can not load the image...",K=Math.max(10,Math.min(30,M.a.width/25));return a.default.createElement(u.Group,{x:M.x,y:M.y,rotation:M.rotation,listening:!1,opacity:M.a.opacity,hideInExport:!M.showInExport},a.default.createElement(u.Rect,{width:M.a.width,height:M.a.height,fill:"rgba(223, 102, 102, 0.8)"}),a.default.createElement(u.Text,{text:$,fontSize:K,width:M.a.width,height:M.a.height,align:"center",fill:"white",verticalAlign:"middle",padding:5}))});let z=f.default;const q=M=>{z=M};e.setImageLoaderHook=q;const L=(M,$)=>{const K=a.default.useRef(),V=()=>{var H;(H=K.current)===null||H===void 0||H.call(K),K.current=void 0};a.default.useEffect(()=>V,[]),a.default.useLayoutEffect(()=>{M!=="loading"||K.current||(K.current=(0,g.incrementLoader)(`image ${$}`)),M!=="loading"&&V(),M==="failed"&&(0,g.triggerLoadError)(`image ${$}`)},[M])};e.useImageLoader=L;const I=({image:M,status:$,type:K})=>{const V=a.default.useRef();return a.default.useEffect(()=>{V.current=M||V.current},[M]),$!=="failed"||$!=="failed"&&K==="svg"?V.current:void 0},B=M=>{const[$,K]=a.default.useReducer(Z=>Z+1,0),V=a.default.useRef("loading"),H=a.default.useRef(M.src),X=a.default.useRef(M.src);return X.current!==M.src&&(X.current=M.src,V.current="loading"),a.default.useEffect(()=>{if(M.type!=="svg"||!M.src)return;let Z=!1;return(async()=>{V.current="loading",K();const J=await E.urlToString(M.src),ee=E.fixSize(J),re=E.replaceColors(ee,M.colorsReplace);Z||(H.current=re,V.current="loaded",K())})(),()=>{Z=!0}},[M.src,JSON.stringify(M.colorsReplace)]),M.type!=="svg"?[M.src,"loaded"]:[H.current,V.current]};e.ImageElement=(0,o.observer)(({element:M,store:$})=>{var K;const[V,H]=a.default.useState(!1),X=a.default.useRef(null),Z=a.default.useRef(null),[J,ee]=a.default.useState(!1),re=$.selectedElements.indexOf(M)>=0,[ne,de]=B(M),[pe,Me]=z(ne,"anonymous"),Fe=M.type!=="svg"||de==="loaded"?Me:"loading";(0,e.useImageLoader)(Fe,M.id);const fe=I({image:pe,status:Me,type:M.type}),ie=R(M,_(M,pe||fe,$._elementsPixelRatio))||Y;let{cropX:ve,cropY:ge,cropWidth:te,cropHeight:ue}=M;Me!=="loaded"&&(ve=ge=0,te=ue=1);const be=ie.width*te,se=ie.height*ue,Pe=M.a.width/M.a.height;let xe,Ie;const xt=be/se,tt=M.type==="svg";tt?(xe=be,Ie=se):Pe>=xt?(xe=be,Ie=be/Pe):(xe=se*Pe,Ie=se);const St={x:ie.width*ve,y:ie.height*ge,width:xe,height:Ie},Ht=(K=M.cornerRadius)!==null&&K!==void 0?K:0,le=M.page._exporting?1:Math.min(2,$.scale),he=$._elementsPixelRatio*le;let nt=U(M,D(M,ie,St,he,Ht,V||M._cropModeEnabled||M.type==="svg"),he,[St,Ht,he]);const Ee=Math.max(M.a.width/xe,M.a.height/Ie);a.default.useEffect(()=>{var De;if(!M._cropModeEnabled)return;const Je=(De=X.current)===null||De===void 0?void 0:De.getStage();function Qe(rt){M._cropModeEnabled&&rt.target!==Z.current&&M.toggleCropMode(!1)}function At(rt){M._cropModeEnabled&&rt.target.parentNode!==Je.content&&M.toggleCropMode(!1)}return document.body.addEventListener("click",At),Je==null||Je.on("click",Qe),Je==null||Je.on("tap",Qe),()=>{document.body.removeEventListener("click",At),document.body.removeEventListener("touchstart",At),Je==null||Je.off("click",Qe),Je==null||Je.off("click",Qe)}},[M._cropModeEnabled]),a.default.useLayoutEffect(()=>{if(!(V||M._cropModeEnabled))return(0,v.applyFilter)(X.current,M),(0,l.autorun)(()=>{(0,v.applyFilter)(X.current,M)},{delay:100})},[ie,V,te,ue,M._cropModeEnabled]),a.default.useLayoutEffect(()=>{var De;V||M._cropModeEnabled?(De=X.current)===null||De===void 0||De.clearCache():(0,v.applyFilter)(X.current,M)},[V,M.a.width,M.a.height,M._cropModeEnabled]),a.default.useEffect(()=>{(0,v.applyFilter)(X.current,M)},[M.shadowEnabled,M.shadowBlur,M.cornerRadius,M.shadowColor,M.shadowOffsetX,M.shadowOffsetY,M.shadowOpacity]);const je=a.default.useRef(null),Le=a.default.useRef(null),we=a.default.useRef(null);a.default.useLayoutEffect(()=>{M._cropModeEnabled&&(Le.current.nodes([je.current]),we.current.nodes([Z.current]))},[M._cropModeEnabled]);var Ze=a.default.useRef(null),Oe=a.default.useRef(0),We=a.default.useRef(!1);const ke=De=>{var Je;((Je=De.evt.touches)===null||Je===void 0?void 0:Je.length)>2&&De.target.stopDrag(),Math.round(De.target.x())>0&&(De.target.x(0),De.target.scaleX(1)),Math.round(De.target.y())>0&&(De.target.y(0),De.target.scaleY(1));const Qe=De.target.width()*De.target.scaleX(),At=De.target.height()*De.target.scaleY(),rt=Math.min(1,xe/Qe),er=Math.min(1,Ie/At),mt=1-rt,Gt=Math.min(mt,Math.max(0,Math.round(-De.target.x())/Qe)),zr=1-er,vr=Math.min(zr,Math.max(0,Math.round(-De.target.y())/At));De.target.setAttrs({x:-Gt*ie.width,y:-vr*ie.height,scaleX:1,scaleY:1}),M.set({cropX:Gt,cropY:vr,cropWidth:rt,cropHeight:er})},ze=()=>{M.type!=="svg"&&M.contentEditable&&setTimeout(()=>{M.toggleCropMode(!0)})},Xe=M.type==="svg"&&fe,ot=Me==="loading"&&!Xe,Et=Me==="failed",jr=!ot&&!Et,Jt=a.default.useRef({cropX:0,cropY:0,cropWidth:0,cropHeight:0}),Sr=jr?M.a.opacity:0;(0,y.useFadeIn)(X,Sr);const on=M.selectable||$.role==="admin",Ln=(0,h.useMobile)();return a.default.createElement(a.default.Fragment,null,ot&&a.default.createElement(j,{element:M}),Et&&a.default.createElement(G,{element:M}),a.default.createElement(u.Image,{ref:X,name:"element",id:M.id,image:nt,x:M.a.x,y:M.a.y,width:M.a.width||1,height:M.a.height||1,rotation:M.rotation,opacity:Sr,shadowEnabled:M.shadowEnabled,shadowBlur:M.shadowBlur,shadowOffsetX:M.shadowOffsetX,shadowOffsetY:M.shadowOffsetY,shadowColor:M.shadowColor,shadowOpacity:M.shadowOpacity,customCrop:St,listening:on,draggable:Ln?M.draggable&&re:M.draggable,preventDefault:!Ln||re,hideInExport:!M.showInExport,onMouseEnter:()=>{ee(!0)},onMouseLeave:()=>{ee(!1)},onDragMove:De=>{M.set({x:De.target.x(),y:De.target.y()})},onDragEnd:De=>{M.set({x:De.target.x(),y:De.target.y()})},onDblClick:ze,onDblTap:ze,onTransformStart:()=>{H(!0),Jt.current={cropX:M.cropX,cropY:M.cropY,cropWidth:M.cropWidth,cropHeight:M.cropHeight}},onTransform:De=>{var Je;const Qe=De.currentTarget,At=Math.abs(Qe.scaleX()-1)<1e-7?1:Qe.scaleX(),rt=Math.abs(Qe.scaleY()-1)<1e-7?1:Qe.scaleY();Qe.scaleX(1),Qe.scaleY(1);const er=(Je=De.target.getStage())===null||Je===void 0?void 0:Je.findOne("Transformer"),mt=1-xe/ie.width,Gt=Math.min(mt,Math.max(0,M.cropX)),zr=1-Ie/ie.height,vr=Math.min(zr,Math.max(0,M.cropY)),kr=er.getActiveAnchor(),Mn=!(kr.indexOf("middle")>=0||kr.indexOf("center")>=0),gi=!Mn&&At<1&&Jt.current.cropHeight>Ie/ie.height;let vn=Mn?M.cropWidth:M.cropWidth*At;gi&&(vn=M.cropWidth);const ln=!Mn&&rt<1&&Jt.current.cropWidth>xe/ie.width;let Yn=Mn?M.cropHeight:M.cropHeight*rt;ln&&(Yn=M.cropHeight),tt&&(vn=M.cropWidth,Yn=M.cropHeight),M.set({cropX:Gt,cropY:vr,x:Qe.x(),y:Qe.y(),width:Qe.width()*At,height:Qe.height()*rt,rotation:De.target.rotation(),cropWidth:Math.min(vn,1-Gt),cropHeight:Math.min(Yn,1-vr)})},onTransformEnd:De=>{const Je=De.currentTarget;M.set({width:Je.width(),height:Je.height(),x:Je.x(),y:Je.y(),rotation:De.target.rotation(),cropWidth:xe/ie.width,cropHeight:Ie/ie.height}),H(!1)}}),a.default.createElement(u.Rect,{x:M.x,y:M.y,width:Math.max(M.a.width-M.borderSize,0),height:Math.max(M.a.height-M.borderSize,0),opacity:Sr,offsetX:-M.borderSize/2,offsetY:-M.borderSize/2,stroke:M.borderColor,strokeWidth:M.borderSize,listening:!1,visible:!!M.borderSize,rotation:M.rotation,cornerRadius:Math.max(0,Ht-M.borderSize),hideInExport:!M.showInExport}),M._cropModeEnabled&&a.default.createElement(S.Portal,{selector:".page-abs-container",enabled:!0},a.default.createElement(u.Rect,{x:-window.innerWidth/$.scale,y:-window.innerWidth/$.scale,width:window.innerWidth/$.scale*3,height:window.innerWidth/$.scale*3,fill:"rgba(0,0,0,0.3)"}),a.default.createElement(u.Image,{listening:!1,image:nt,x:M.x,y:M.y,width:M.a.width,height:M.a.height,rotation:M.rotation,shadowEnabled:M.shadowEnabled,shadowBlur:M.shadowBlur}),a.default.createElement(u.Group,{x:M.x,y:M.y,rotation:M.rotation,scaleX:Ee,scaleY:Ee},a.default.createElement(u.Image,{image:ie,ref:Z,opacity:.4,draggable:!0,x:-M.cropX*ie.width,y:-M.cropY*ie.height,onDragMove:ke,onTransform:ke,onTouchMove:De=>{De.evt.preventDefault();const Je=De.target.getStage().getPointersPositions();var Qe=Je[0],At=Je[1];const rt=De.target;if(Qe&&!At&&!rt.isDragging()&&We.current&&(rt.startDrag(),We.current=!1),Qe&&At){p.default.hitOnDragEnabled=!0,rt.isDragging()&&(We.current=!0,rt.stopDrag());const ln=De.target.getAbsoluteTransform().copy();ln.invert();var er={x:Qe.x,y:Qe.y},mt={x:At.x,y:At.y};if(!Ze.current)return void(Ze.current=P(er,mt));var Gt=P(er,mt),zr=x(er,mt);Oe.current||(Oe.current=zr);const Yn=rt.position();var vr={x:Gt.x-Yn.x,y:Gt.y-Yn.y},kr=zr/Oe.current;rt.scaleX(kr),rt.scaleY(kr);const Va=ln.point(Gt),vi=ln.point(Ze.current);var Mn=Va.x-vi.x,gi=Va.y-vi.y,vn={x:Math.min(0,Gt.x-vr.x*kr+Mn),y:Math.min(0,Gt.y-vr.y*kr+gi)};rt.position(vn),Oe.current=zr,Ze.current=Gt,ke(De)}},onTouchEnd:De=>{Oe.current=0,Ze.current=null,p.default.hitOnDragEnabled=!1}}),a.default.createElement(u.Transformer,{ref:we,anchorSize:20,enabledAnchors:["top-left","top-right","bottom-left","bottom-right"],boundBoxFunc:(De,Je)=>Je.width<5||Je.height<5?De:Je,rotateEnabled:!1,borderEnabled:!1,anchorCornerRadius:10,anchorStrokeWidth:2,borderStrokeWidth:2}),a.default.createElement(u.Rect,{width:xe,height:Ie,ref:je,listening:!1,onTransform:De=>{De.target.x()<-M.cropX*ie.width-1e-9&&(De.target.x(-M.cropX*ie.width),De.target.scaleX(1)),De.target.y()<-M.cropY*ie.height-1e-9&&(De.target.y(-M.cropY*ie.height),De.target.scaleY(1));const Je=Math.min(1,Math.max(0,M.cropX+De.target.x()/ie.width)),Qe=Math.min(1,Math.max(0,De.target.y()/ie.height+M.cropY)),At=De.target.width()*De.target.scaleX(),rt=De.target.height()*De.target.scaleY(),er=Math.min(1-Je,At/ie.width),mt=Math.min(1-Qe,rt/ie.height),Gt=De.target.getAbsolutePosition(De.target.getParent().getParent());De.target.scale({x:1,y:1}),De.target.position({x:0,y:0}),M.set({x:Gt.x,y:Gt.y,cropX:Je,cropY:Qe,cropWidth:er,cropHeight:mt,width:Math.min(At*Ee,ie.width*(1-Je)*Ee),height:Math.min(rt*Ee,ie.height*(1-Qe)*Ee)})}}),a.default.createElement(u.Transformer,{ref:Le,enabledAnchors:["top-left","top-right","bottom-left","bottom-right"],boundBoxFunc:(De,Je)=>Je.width<5||Je.height<5?De:Je,visible:M.resizable,keepRatio:!1,rotateEnabled:!1,anchorFill:"rgb(240, 240, 240)",anchorStrokeWidth:2,borderStrokeWidth:2}))),(J||re)&&a.default.createElement(w.Highlighter,{element:M}))})})(x2);var dS={},hS={exports:{}};/*!
+`).join(" ").split(/[\s-]+/);let V=j.textArr.map(X=>X.text).join(";");const H=K.find(X=>!V.includes(X)||(V=V.replace(X,""),!1));if(!($||H))break;I-=.5,j.fontSize(I)}return j.fontSize(z),j.height(q),I}function Y({lines:j,lineHeight:G,width:z,align:q="left",padding:L=0,cornerRadius:I=0}){var B;j.forEach((V,H)=>{V.cx=z/2,q==="right"?V.cx=z-V.width/2:q==="left"&&(V.cx=V.width/2),q!=="justify"||V.lastInParagraph||(V.width=z),q==="justify"&&(V.cx=V.width/2)});let M=`M ${(B=j[0])===null||B===void 0?void 0:B.cx} ${-L}`;j.forEach((V,H)=>{const{cx:X}=V,Z=j[H-1];Z&&Z.width>V.width?M+=` L ${X+V.width/2+L} ${H*G+L}`:M+=` L ${X+V.width/2+L} ${H*G-L}`;const J=j[H+1];J&&J.width>V.width?M+=` L ${X+V.width/2+L} ${(H+1)*G-L}`:M+=` L ${X+V.width/2+L} ${(H+1)*G+L}`});for(var $=j.length-1;$>=0;$--){const V=j[$],{cx:H}=V,X=j[$+1];X&&X.width>V.width?M+=` L ${H-V.width/2-L} ${($+1)*G-L}`:M+=` L ${H-V.width/2-L} ${($+1)*G+L}`;const Z=j[$-1];Z&&Z.width>V.width?M+=` L ${H-V.width/2-L} ${$*G+L}`:M+=` L ${H-V.width/2-L} ${$*G-L}`}M+=" Z";const K=(0,l.parsePath)(M);return(0,l.roundCommands)(K,I).path}e.getLineHeight=C,e.usePrevious=D,e.TextElement=(0,n.observer)(({element:j,store:G})=>{const z=r.default.useRef(null),q=r.default.useRef(null),{editorEnabled:L,selectAll:I}=_(j),[B,M]=r.default.useState(!1),[$,K]=r.default.useState(!1),V=r.default.useRef(j.a.height),H=G.selectedElements.indexOf(j)>=0,{textVerticalResizeEnabled:X}=S.flags,Z=D(j.fontFamily),[J,ee]=r.default.useState([]);r.default.useEffect(()=>{var se,Pe;const xe=(Pe=(se=z.current)===null||se===void 0?void 0:se.textArr)!==null&&Pe!==void 0?Pe:[];JSON.stringify(xe)!==JSON.stringify(J)&&ee(xe)}),r.default.useEffect(()=>{if(j.a.width)return;const se=z.current;se.width(600),j.set({width:1.4*se.getTextWidth()})},[]),r.default.useLayoutEffect(()=>(0,o.autorun)(()=>{const se=z.current;(0,g.applyFilter)(se,j)}));const[re]=(0,e.useFontLoader)(G,j.fontFamily),ne=(0,w.removeTags)(j.text),de=()=>{const se=z.current.clone({height:void 0}),Pe=Math.ceil(se.fontSize()*se.lineHeight()*se.textArr.length+1);return se.destroy(),Pe};r.default.useLayoutEffect(()=>{if(!re)return;const{textOverflow:se}=S.flags;if(j.a.height)if(se!=="change-font-size"||$||G.isPlaying){if(se==="resize"){const Pe=de();X&&j.a.height<Pe&&G.history.ignore(()=>{var xe;(0,y.isAlive)(j)&&j.set({height:Pe}),(xe=z.current)===null||xe===void 0||xe.height(Pe)},!1,!0),X||j.a.height===Pe||G.history.ignore(()=>{var xe;(0,y.isAlive)(j)&&j.set({height:Pe}),(xe=z.current)===null||xe===void 0||xe.height(Pe)},!1,!0)}}else{const Pe=U(z.current,j);if(Pe!==j.a.fontSize)return void G.history.ignore(()=>{j.set({fontSize:Pe})},!1,!0);const xe=de();j.a.height===xe||X||G.history.ignore(()=>{j.set({height:xe})},!1,!0)}else{const Pe=de();G.history.ignore(()=>{j.set({height:Pe})},!1,!0)}}),r.default.useLayoutEffect(()=>{const se=z.current;se&&(se.width(se.width()+1e-8),se._setTextData(),(0,g.applyFilter)(se,j))},[re]);const pe=r.default.useRef(null),Me=r.default.useRef(0),Fe=se=>{se.evt.preventDefault(),G.selectedShapes.find(xe=>xe===j)&&j.contentEditable&&(Me.current=R(se),j.toggleEditMode())},fe=!ne&&j.placeholder?.6:j.a.opacity;(0,E.useFadeIn)(z,fe);const ie=(0,e.getLineHeight)({fontLoaded:re,fontFamily:j.fontFamily,fontSize:j.a.fontSize,lineHeight:j.lineHeight}),ve=j.selectable||G.role==="admin",ge=(0,u.useColor)(j),te=r.default.useMemo(()=>j.backgroundEnabled?Y({lines:JSON.parse(JSON.stringify(J)),cornerRadius:j.backgroundCornerRadius*(j.a.fontSize*ie*.5),lineHeight:ie*j.a.fontSize,padding:j.backgroundPadding*(j.a.fontSize*ie*.5),width:j.a.width,align:j.align}):"",[j.backgroundEnabled,j.backgroundCornerRadius,j.a.fontSize,ie,j.backgroundPadding,j.a.width,j.align,J]),ue=(0,v.useMobile)();let be=0;return j.verticalAlign==="middle"?be=(j.a.height-J.length*ie*j.a.fontSize)/2:j.verticalAlign==="bottom"&&(be=j.a.height-J.length*ie*j.a.fontSize),r.default.createElement(r.default.Fragment,null,r.default.createElement(i.Path,{ref:q,x:j.a.x,y:j.a.y,rotation:j.a.rotation,hideInExport:!j.showInExport||!ne,listening:!1,visible:j.backgroundEnabled,opacity:j.backgroundOpacity,data:te,fill:j.backgroundColor,offsetY:-be}),r.default.createElement(i.Text,Object.assign({ref:z,id:j.id,name:"element",hideInExport:!j.showInExport||!ne,editModeEnabled:j._editModeEnabled,x:j.a.x,y:j.a.y,rotation:j.a.rotation,width:j.a.width,height:j.a.height,text:ne||j.placeholder},ge,{stroke:j.stroke,lineJoin:"round",strokeWidth:j.strokeWidth,fillAfterStrokeEnabled:!0,fontSize:j.a.fontSize,fontFamily:`"${j.fontFamily}", "${Z}"`,fontStyle:j.fontStyle+" "+j.fontWeight,textDecoration:j.textDecoration,align:j.align,verticalAlign:j.verticalAlign,draggable:ue?j.draggable&&H:j.draggable,preventDefault:!ue||H,opacity:fe,visible:!j._editModeEnabled,ellipsis:S.flags.textOverflow==="ellipsis",shadowEnabled:j.shadowEnabled,shadowBlur:j.shadowBlur,shadowOffsetX:j.shadowOffsetX,shadowOffsetY:j.shadowOffsetY,shadowColor:j.shadowColor,shadowOpacity:j.shadowOpacity,lineHeight:ie,letterSpacing:j.letterSpacing*j.a.fontSize,listening:ve,onDragMove:se=>{j.set({x:se.target.x(),y:se.target.y()})},onDragEnd:se=>{j.set({x:se.target.x(),y:se.target.y()})},onMouseEnter:()=>{M(!0)},onMouseLeave:()=>{M(!1)},onClick:Fe,onTap:Fe,onTransformStart:()=>{K(!0),V.current=z.current.height()},onTransform:se=>{var Pe,xe;const Ie=se.target;(Pe=q.current)===null||Pe===void 0||Pe.setAttrs({x:Ie.x(),y:Ie.y(),rotation:Ie.rotation(),scale:Ie.scale()});const xt=((xe=Ie.getStage())===null||xe===void 0?void 0:xe.findOne("Transformer")).getActiveAnchor();if(xt==="middle-left"||xt==="middle-right"){const tt=Ie.scaleX(),St=Ie.width()*tt,Ht=j.a.fontSize;let le=St;St<Ht&&(le=Ht,pe.current&&Ie.position(pe.current)),Ie.width(le),Ie.scaleX(1),Ie.scaleY(1);const he=de();if(S.flags.textOverflow!=="ellipsis"){const nt=Math.max(he,V.current);Ie.height(nt),j.set({height:Ie.height()})}j.set({x:Ie.x(),y:Ie.y(),width:Ie.width(),rotation:Ie.rotation()}),(0,g.applyFilter)(Ie,j)}if(xt==="top-center"||xt==="bottom-center"){let tt=S.flags.textOverflow==="resize"?de():ie*j.a.fontSize;se.target.height(Math.max(tt,se.target.height()*se.target.scaleY())),se.target.scaleY(1)}pe.current=se.target.position()},onTransformEnd:se=>{var Pe;const xe=se.target.scaleX();se.target.scaleX(1),se.target.scaleY(1),j.set({fontSize:Math.round(j.a.fontSize*xe),width:Math.ceil(se.target.width()*xe),x:se.target.x(),y:se.target.y(),rotation:se.target.rotation(),height:se.target.height()*xe,shadowBlur:j.shadowBlur*xe,shadowOffsetX:j.shadowOffsetX*xe,shadowOffsetY:j.shadowOffsetY*xe,strokeWidth:j.strokeWidth*xe}),(Pe=q.current)===null||Pe===void 0||Pe.setAttrs({scaleX:1,scaleY:1}),K(!1)}})),L&&r.default.createElement(i.Group,{x:j.a.x,y:j.a.y,rotation:j.a.rotation},r.default.createElement(P,{textNodeRef:z,element:j,selectAll:I,cursorPosition:Me.current,onBlur:()=>{j.toggleEditMode(!1)}})),!$&&(B||H)&&r.default.createElement(m.Highlighter,{element:j}))})})(c2);var x2={},Eu={};(function(e){var t=Se&&Se.__importDefault||function(d){return d&&d.__esModule?d:{default:d}};Object.defineProperty(e,"__esModule",{value:!0}),e.useSvgColors=e.replaceColors=e.sameColors=e.fixSize=e.getSvgSize=e.svgToURL=e.getColors=e.urlToString=e.urlToBase64=void 0;const r=t(Ui),n=t(it),i=f2;function a(d){for(;d.parentNode;){if(d.nodeName==="defs")return!0;d=d.parentNode}return!1}function o(d){const b={fill:"",stroke:""};if(d.getAttribute("fill")&&d.getAttribute("fill")!=="none"&&(b.fill=d.getAttribute("fill")),!b.fill&&d.style.fill&&d.style.fill!=="none"&&(b.fill=d.style.fill),d.getAttribute("stroke")&&(b.stroke=d.getAttribute("stroke")),!b.stroke&&d.style.stroke&&(b.stroke=d.style.stroke),!b.stroke&&!b.fill){const O=d.ownerSVGElement,x=O&&O!==d&&o(O);(x==null?void 0:x.fill)==="currentColor"||(x==null?void 0:x.stroke)==="currentColor"||(b.fill="black")}return b}const l=["path","rect","circle"];function u(d){for(var b=[],O=d.getElementsByTagName("*"),x=0,P=O.length;x<P;x++){const _=O[x];a(_)||(_.getAttribute("fill")!==null&&b.push(_),(_.getAttribute("stroke")!==null||_.style&&_.style.fill||l.indexOf(_.nodeName)>=0)&&b.push(_))}return b}async function f(d){const b=await fetch(d);return w(await b.text())}async function p(d){return await(await fetch(d,{mode:"cors"})).text()}function S(d){const b=u(new DOMParser().parseFromString(d,"image/svg+xml")),O=[];return b.forEach(x=>{const{fill:P,stroke:_}=o(x);[P,_].forEach(A=>{A&&(A==="currentColor"&&(A="black"),r.default.Util.colorToRGBA(A)&&O.indexOf(A)===-1&&O.push(A))})}),O}function w(d){return"data:image/svg+xml;base64,"+window.btoa(unescape(encodeURIComponent(d)))}async function g(d){const b=await p(d),O=new DOMParser().parseFromString(b,"image/svg+xml").documentElement.getAttribute("viewBox"),[x,P,_,A]=(O==null?void 0:O.split(" "))||[];return{width:parseFloat(_),height:parseFloat(A)}}function E(d){var b=new DOMParser().parseFromString(d,"image/svg+xml");const O=b.documentElement.getAttribute("viewBox"),[x,P,_,A]=(O==null?void 0:O.split(" "))||[],C=b.documentElement.getAttribute("width");!C&&b.documentElement.setAttribute("width",_+"px");const k=b.documentElement.getAttribute("height");if((!k||k.indexOf("%")>=0)&&b.documentElement.setAttribute("height",A+"px"),C&&C.indexOf("%")>=0&&k&&k.indexOf("%")===-1){const R=parseFloat(k)/parseFloat(A);b.documentElement.setAttribute("width",R*parseFloat(_)+"px")}if(k&&k.indexOf("%")>=0&&C&&C.indexOf("%")===-1){const R=parseFloat(C)/parseFloat(_);b.documentElement.setAttribute("height",R*parseFloat(A)+"px")}return C==="100%"&&k==="100%"&&(b.documentElement.setAttribute("width",_+"px"),b.documentElement.setAttribute("height",A+"px")),new XMLSerializer().serializeToString(b)}e.urlToBase64=f,e.urlToString=p,e.getColors=S,e.svgToURL=w,e.getSvgSize=g,e.fixSize=E;const m=(d,b)=>{if(!d||!b)return!1;if(b==="currentColor"&&d==="black")return!0;const O=r.default.Util.colorToRGBA(d),x=r.default.Util.colorToRGBA(b);return O&&x?O.r===x.r&&O.g===x.g&&O.b===x.b&&O.a===x.a:void 0};function v(d,b,O,x){var P=d.namespaceURI,_=document.createElementNS(P,"linearGradient");const A=r.default.Util.degToRad(O+90),C=(Math.cos(A)+1)/2,k=(Math.sin(A)+1)/2,R=(Math.cos(A+Math.PI)+1)/2,D=(Math.sin(A+Math.PI)+1)/2;_.setAttribute("x1",100*C+"%"),_.setAttribute("y1",100*k+"%"),_.setAttribute("x2",100*R+"%"),_.setAttribute("y2",100*D+"%"),_.setAttribute("gradientUnits","userSpaceOnUse"),_.setAttribute("id",b);for(var U=0;U<x.length;U++){var Y=x[U],j=document.createElementNS(P,"stop");for(var G in Y)Y.hasOwnProperty(G)&&j.setAttribute(G,Y[G]);_.appendChild(j)}return(d.querySelector("defs")||d.insertBefore(document.createElementNS(P,"defs"),d.firstChild)).appendChild(_)}function y(d,b){var O=new DOMParser().parseFromString(d,"image/svg+xml");const x=u(O),P=Array.from(b.keys());return x.forEach(_=>{const{fill:A,stroke:C}=o(_);[{prop:"fill",color:A},{prop:"stroke",color:C}].forEach(({prop:k,color:R})=>{const D=P.find(U=>(0,e.sameColors)(U,R));if(D){const U=b.get(D);if((0,i.isGradient)(U)){const{rotation:Y,stops:j}=(0,i.parseColor)(U),G=j.map(q=>({offset:100*q.offset+"%","stop-color":q.color})),z="color"+Math.round(1e8*Math.random());v(O.children[0],z,Y,G),_.style[k]=null,_.setAttribute(k,`url('#${z}')`)}else _.style[k]=b.get(D)}})}),w(new XMLSerializer().serializeToString(O))}e.sameColors=m,e.replaceColors=y;const h=d=>{const[b,O]=n.default.useState([]);return n.default.useEffect(()=>{let x=!1;return(async()=>{O([]);const P=S(await p(d));x||O(P)})(),()=>{x=!0}},[d]),b};e.useSvgColors=h})(Eu);(function(e){var t=Se&&Se.__createBinding||(Object.create?function(M,$,K,V){V===void 0&&(V=K);var H=Object.getOwnPropertyDescriptor($,K);H&&!("get"in H?!$.__esModule:H.writable||H.configurable)||(H={enumerable:!0,get:function(){return $[K]}}),Object.defineProperty(M,V,H)}:function(M,$,K,V){V===void 0&&(V=K),M[V]=$[K]}),r=Se&&Se.__setModuleDefault||(Object.create?function(M,$){Object.defineProperty(M,"default",{enumerable:!0,value:$})}:function(M,$){M.default=$}),n=Se&&Se.__importStar||function(M){if(M&&M.__esModule)return M;var $={};if(M!=null)for(var K in M)K!=="default"&&Object.prototype.hasOwnProperty.call(M,K)&&t($,M,K);return r($,M),$},i=Se&&Se.__importDefault||function(M){return M&&M.__esModule?M:{default:M}};Object.defineProperty(e,"__esModule",{value:!0}),e.ImageElement=e.useImageLoader=e.setImageLoaderHook=void 0;const a=i(it),o=zi,l=ja,u=Ga,f=i(f0),p=i(Ui),S=yf,w=Vl,g=Ia,E=n(Eu),m=di,v=wf,y=$l,h=$o;function d(){return document.createElement("canvas")}async function b(M){if(!(M.indexOf("data:image/svg+xml")>=0||M.indexOf(".svg")>=0))return M;const $=await E.urlToString(M),K=E.fixSize($);return E.svgToURL(K)}const O=M=>{const[$,K]=a.default.useState(M);return a.default.useEffect(()=>{(async()=>{const V=await b(M);V!==$&&K(V)})()},[M]),$};function x(M,$){return Math.sqrt(Math.pow($.x-M.x,2)+Math.pow($.y-M.y,2))}function P(M,$){return{x:(M.x+$.x)/2,y:(M.y+$.y)/2}}const _=(M,$,K)=>{const V=a.default.useMemo(()=>{var H,X;const{flipX:Z,flipY:J}=M,ee=M.type==="svg"||M.src.indexOf("data:image/svg+xml")>=0||M.src.indexOf(".svg")>=0,re=navigator.userAgent.toLowerCase().indexOf("firefox")>-1&&ee||M.maskSrc;if(!Z&&!J&&!re)return $;if(!$||!$.width||!$.height)return null;const ne=d();let de=1;M.type==="svg"&&(de=Math.max(M.a.width/$.width*K,M.a.height/$.height*K)),ne.width=Math.max($.width*de,1),ne.height=Math.max($.height*de,1);let pe=Z?-ne.width:0,Me=J?-ne.height:0;return(H=ne.getContext("2d"))===null||H===void 0||H.scale(Z?-1:1,J?-1:1),(X=ne.getContext("2d"))===null||X===void 0||X.drawImage($,pe,Me,ne.width,ne.height),ne},[M.maskSrc,M.flipX,M.flipY,$,M.a.width,M.a.height,K]);return a.default.useEffect(()=>()=>{V&&V.nodeName==="CANVAS"&&p.default.Util.releaseCanvas(V)},[V]),V};function A(M,$){const K=$.width/$.height;let V,H;return K>=M.width/M.height?(V=M.width,H=M.width/K):(V=M.height*K,H=M.height),{x:(M.width-V)/2,y:(M.height-H)/2,width:V,height:H}}function C(M,$,K,V,H,X,Z){for(var J=new ImageData($,K),ee=new Int32Array(M.data.buffer),re=M.width,ne=new Int32Array(J.data.buffer),de=J.width,pe=$/X,Me=K/Z,Fe=Math.round(1/pe),fe=Math.round(1/Me),ie=Fe*fe,ve=0;ve<J.height;ve++)for(var ge=0;ge<de;ge++){for(var te=V+Math.round(ge/pe)+(H+Math.round(ve/Me))*re,ue=0,be=0,se=0,Pe=0,xe=0;xe<fe;xe++)for(var Ie=0;Ie<Fe;Ie++){var xt=ee[te+Ie+xe*re];ue+=xt<<24>>>24,be+=xt<<16>>>24,se+=xt<<8>>>24,Pe+=xt>>>24}ue=Math.round(ue/ie),be=Math.round(be/ie),se=Math.round(se/ie),Pe=Math.round(Pe/ie),ne[ge+ve*de]=Pe<<24|se<<16|be<<8|ue}return J}function k(M,$){var K,V;const H=d();H.width=M.width,H.height=M.height;const X=Math.max(1,Math.floor(H.width*$)),Z=Math.max(1,Math.floor(H.height*$));(K=H.getContext("2d"))===null||K===void 0||K.drawImage(M,0,0,H.width,H.height);const J=C(H.getContext("2d").getImageData(0,0,H.width,H.height),X,Z,0,0,H.width,H.height);return H.width=X,H.height=Z,(V=H.getContext("2d"))===null||V===void 0||V.putImageData(J,0,0),H}const R=(M,$)=>{const[K,V]=z(M.maskSrc,"anonymous"),H=M.maskSrc?V:"loaded";return(0,e.useImageLoader)(H,M.id+"-mask"),a.default.useMemo(()=>{if(!K||!$||!$.width||!$.height)return $;const X=d();X.width=Math.max($.width,1),X.height=Math.max($.height,1);const Z=X.getContext("2d");if(!Z)return $;Z.drawImage($,0,0),Z.globalCompositeOperation="source-in";const J=A(K,M);return Z.drawImage(K,J.x,J.y,J.width,J.height,0,0,$.width,$.height),X},[$,K,M.a.width,M.a.height])},D=(M,$,K,V,H=0,X=!1)=>{const Z=Math.floor(Math.max(M.a.width*V,1)),J=Math.floor(Math.max(M.a.height*V,1)),ee=Math.min(H*V,Z/2,J/2),re=Math.max(M.a.width/K.width,M.a.height/K.height)*V,ne=M.page._exporting&&m.flags.imageDownScalingEnabled&&re<1&&!X,de=K.x===0&&K.y===0&&K.width===($==null?void 0:$.width)&&K.height===($==null?void 0:$.height),pe=a.default.useMemo(()=>{if(!(!$||!$.width||!$.height))return de&&ee===0&&!ne?void 0:d()},[$,ee,ne,de]);return a.default.useLayoutEffect(()=>{if(!pe||!$)return;pe.width=Z,pe.height=J;const Me=pe.getContext("2d");if(!Me)return;ee&&(Me.beginPath(),Me.moveTo(ee,0),Me.lineTo(Z-ee,0),Me.arc(Z-ee,ee,ee,3*Math.PI/2,0,!1),Me.lineTo(Z,J-ee),Me.arc(Z-ee,J-ee,ee,0,Math.PI/2,!1),Me.lineTo(ee,J),Me.arc(ee,J-ee,ee,Math.PI/2,Math.PI,!1),Me.lineTo(0,ee),Me.arc(ee,ee,ee,Math.PI,3*Math.PI/2,!1),Me.clip());const Fe=ne?k($,re):$,fe=ne?{x:Math.floor(K.x*re),y:Math.floor(K.y*re),width:Math.floor(K.width*re),height:Math.floor(K.height*re)}:K;Me.drawImage(Fe,fe.x,fe.y,fe.width,fe.height,0,0,pe.width,pe.height)},[pe,M.a.width,M.a.height,K.x,K.y,K.width,K.height,H,V,X,M.page._exporting,ne]),a.default.useEffect(()=>()=>{pe&&pe.nodeName==="CANVAS"&&p.default.Util.releaseCanvas(pe)},[pe]),pe||$},U=(M,$,K,V)=>{const H=O(M.clipSrc||""),[X,Z]=z(H,"anonymous"),J=M.clipSrc?Z:"loaded";(0,e.useImageLoader)(J,M.id+"-clip");const ee=a.default.useMemo(()=>{if($&&X)return d()},[$,X]);return a.default.useLayoutEffect(()=>{var re;if(!X||!$||!$.width||!$.height||!X||!X.width||!X.height||!ee)return;const ne=d(),de=Math.max(M.a.width/X.width*K,M.a.height/X.height*K);ne.width=X.width*de,ne.height=X.height*de,(re=ne.getContext("2d"))===null||re===void 0||re.drawImage(X,0,0,ne.width,ne.height),ee.width=Math.max($.width,1),ee.height=Math.max($.height,1);const pe=ee.getContext("2d");pe&&(pe.save(),pe.drawImage(ne,0,0,$.width,$.height),p.default.Util.releaseCanvas(ne),pe.globalCompositeOperation="source-in",pe.drawImage($,0,0,ee.width,ee.height),pe.restore())},[ee,$,X,M.a.width,M.a.height,K,...V]),M.clipSrc&&X?ee:$},Y=d(),j=(0,o.observer)(({element:M})=>{const $=Math.min(30,M.a.width/4,M.a.height/4),K=a.default.useRef(null);return a.default.useEffect(()=>{const V=K.current;if(!V)return;const H=new p.default.Animation(X=>{V.rotate(((X==null?void 0:X.timeDiff)||0)/2)},V.getLayer());return H.start(),()=>{H.stop()}}),a.default.createElement(u.Group,{x:M.x,y:M.y,rotation:M.rotation,listening:!1,opacity:M.a.opacity,hideInExport:!M.showInExport},a.default.createElement(u.Rect,{width:M.a.width,height:M.a.height,fill:"rgba(124, 173, 212, 0.8)"}),a.default.createElement(u.Arc,{ref:K,x:M.a.width/2,y:M.a.height/2,fill:"white",outerRadius:Math.abs($),innerRadius:Math.max(1,$-5),angle:270}))}),G=(0,o.observer)(({element:M})=>{const $="Can not load the image...",K=Math.max(10,Math.min(30,M.a.width/25));return a.default.createElement(u.Group,{x:M.x,y:M.y,rotation:M.rotation,listening:!1,opacity:M.a.opacity,hideInExport:!M.showInExport},a.default.createElement(u.Rect,{width:M.a.width,height:M.a.height,fill:"rgba(223, 102, 102, 0.8)"}),a.default.createElement(u.Text,{text:$,fontSize:K,width:M.a.width,height:M.a.height,align:"center",fill:"white",verticalAlign:"middle",padding:5}))});let z=f.default;const q=M=>{z=M};e.setImageLoaderHook=q;const L=(M,$)=>{const K=a.default.useRef(),V=()=>{var H;(H=K.current)===null||H===void 0||H.call(K),K.current=void 0};a.default.useEffect(()=>V,[]),a.default.useLayoutEffect(()=>{M!=="loading"||K.current||(K.current=(0,g.incrementLoader)(`image ${$}`)),M!=="loading"&&V(),M==="failed"&&(0,g.triggerLoadError)(`image ${$}`)},[M])};e.useImageLoader=L;const I=({image:M,status:$,type:K})=>{const V=a.default.useRef();return a.default.useEffect(()=>{V.current=M||V.current},[M]),$!=="failed"||$!=="failed"&&K==="svg"?V.current:void 0},B=M=>{const[$,K]=a.default.useReducer(Z=>Z+1,0),V=a.default.useRef("loading"),H=a.default.useRef(M.src),X=a.default.useRef(M.src);return X.current!==M.src&&(X.current=M.src,V.current="loading"),a.default.useEffect(()=>{if(M.type!=="svg"||!M.src)return;let Z=!1;return(async()=>{V.current="loading",K();const J=await E.urlToString(M.src),ee=E.fixSize(J),re=E.replaceColors(ee,M.colorsReplace);Z||(H.current=re,V.current="loaded",K())})(),()=>{Z=!0}},[M.src,JSON.stringify(M.colorsReplace)]),M.type!=="svg"?[M.src,"loaded"]:[H.current,V.current]};e.ImageElement=(0,o.observer)(({element:M,store:$})=>{var K;const[V,H]=a.default.useState(!1),X=a.default.useRef(null),Z=a.default.useRef(null),[J,ee]=a.default.useState(!1),re=$.selectedElements.indexOf(M)>=0,[ne,de]=B(M),[pe,Me]=z(ne,"anonymous"),Fe=M.type!=="svg"||de==="loaded"?Me:"loading";(0,e.useImageLoader)(Fe,M.id);const fe=I({image:pe,status:Me,type:M.type}),ie=R(M,_(M,pe||fe,$._elementsPixelRatio))||Y;let{cropX:ve,cropY:ge,cropWidth:te,cropHeight:ue}=M;Me!=="loaded"&&(ve=ge=0,te=ue=1);const be=ie.width*te,se=ie.height*ue,Pe=M.a.width/M.a.height;let xe,Ie;const xt=be/se,tt=M.type==="svg";tt?(xe=be,Ie=se):Pe>=xt?(xe=be,Ie=be/Pe):(xe=se*Pe,Ie=se);const St={x:ie.width*ve,y:ie.height*ge,width:xe,height:Ie},Ht=(K=M.cornerRadius)!==null&&K!==void 0?K:0,le=M.page._exporting?1:Math.min(2,$.scale),he=$._elementsPixelRatio*le;let nt=U(M,D(M,ie,St,he,Ht,V||M._cropModeEnabled||M.type==="svg"),he,[St,Ht,he]);const Ee=Math.max(M.a.width/xe,M.a.height/Ie);a.default.useEffect(()=>{var De;if(!M._cropModeEnabled)return;const Je=(De=X.current)===null||De===void 0?void 0:De.getStage();function Qe(rt){M._cropModeEnabled&&rt.target!==Z.current&&M.toggleCropMode(!1)}function At(rt){M._cropModeEnabled&&rt.target.parentNode!==Je.content&&M.toggleCropMode(!1)}return document.body.addEventListener("click",At),Je==null||Je.on("click",Qe),Je==null||Je.on("tap",Qe),()=>{document.body.removeEventListener("click",At),document.body.removeEventListener("touchstart",At),Je==null||Je.off("click",Qe),Je==null||Je.off("click",Qe)}},[M._cropModeEnabled]),a.default.useLayoutEffect(()=>{if(!(V||M._cropModeEnabled))return(0,v.applyFilter)(X.current,M),(0,l.autorun)(()=>{(0,v.applyFilter)(X.current,M)},{delay:100})},[ie,M.page._exporting,V,te,ue,M._cropModeEnabled]),a.default.useLayoutEffect(()=>{var De;V||M._cropModeEnabled?(De=X.current)===null||De===void 0||De.clearCache():(0,v.applyFilter)(X.current,M)},[V,M.a.width,M.a.height,M._cropModeEnabled]),a.default.useEffect(()=>{(0,v.applyFilter)(X.current,M)},[M.shadowEnabled,M.shadowBlur,M.cornerRadius,M.shadowColor,M.shadowOffsetX,M.shadowOffsetY,M.shadowOpacity]);const je=a.default.useRef(null),Le=a.default.useRef(null),we=a.default.useRef(null);a.default.useLayoutEffect(()=>{M._cropModeEnabled&&(Le.current.nodes([je.current]),we.current.nodes([Z.current]))},[M._cropModeEnabled]);var Ze=a.default.useRef(null),Oe=a.default.useRef(0),We=a.default.useRef(!1);const ke=De=>{var Je;((Je=De.evt.touches)===null||Je===void 0?void 0:Je.length)>2&&De.target.stopDrag(),Math.round(De.target.x())>0&&(De.target.x(0),De.target.scaleX(1)),Math.round(De.target.y())>0&&(De.target.y(0),De.target.scaleY(1));const Qe=De.target.width()*De.target.scaleX(),At=De.target.height()*De.target.scaleY(),rt=Math.min(1,xe/Qe),er=Math.min(1,Ie/At),mt=1-rt,Gt=Math.min(mt,Math.max(0,Math.round(-De.target.x())/Qe)),zr=1-er,vr=Math.min(zr,Math.max(0,Math.round(-De.target.y())/At));De.target.setAttrs({x:-Gt*ie.width,y:-vr*ie.height,scaleX:1,scaleY:1}),M.set({cropX:Gt,cropY:vr,cropWidth:rt,cropHeight:er})},ze=()=>{M.type!=="svg"&&M.contentEditable&&setTimeout(()=>{M.toggleCropMode(!0)})},Xe=M.type==="svg"&&fe,ot=Me==="loading"&&!Xe,Et=Me==="failed",jr=!ot&&!Et,Jt=a.default.useRef({cropX:0,cropY:0,cropWidth:0,cropHeight:0}),Sr=jr?M.a.opacity:0;(0,y.useFadeIn)(X,Sr);const on=M.selectable||$.role==="admin",Ln=(0,h.useMobile)();return a.default.createElement(a.default.Fragment,null,ot&&a.default.createElement(j,{element:M}),Et&&a.default.createElement(G,{element:M}),a.default.createElement(u.Image,{ref:X,name:"element",id:M.id,image:nt,x:M.a.x,y:M.a.y,width:M.a.width||1,height:M.a.height||1,rotation:M.rotation,opacity:Sr,shadowEnabled:M.shadowEnabled,shadowBlur:M.shadowBlur,shadowOffsetX:M.shadowOffsetX,shadowOffsetY:M.shadowOffsetY,shadowColor:M.shadowColor,shadowOpacity:M.shadowOpacity,customCrop:St,listening:on,draggable:Ln?M.draggable&&re:M.draggable,preventDefault:!Ln||re,hideInExport:!M.showInExport,onMouseEnter:()=>{ee(!0)},onMouseLeave:()=>{ee(!1)},onDragMove:De=>{M.set({x:De.target.x(),y:De.target.y()})},onDragEnd:De=>{M.set({x:De.target.x(),y:De.target.y()})},onDblClick:ze,onDblTap:ze,onTransformStart:()=>{H(!0),Jt.current={cropX:M.cropX,cropY:M.cropY,cropWidth:M.cropWidth,cropHeight:M.cropHeight}},onTransform:De=>{var Je;const Qe=De.currentTarget,At=Math.abs(Qe.scaleX()-1)<1e-7?1:Qe.scaleX(),rt=Math.abs(Qe.scaleY()-1)<1e-7?1:Qe.scaleY();Qe.scaleX(1),Qe.scaleY(1);const er=(Je=De.target.getStage())===null||Je===void 0?void 0:Je.findOne("Transformer"),mt=1-xe/ie.width,Gt=Math.min(mt,Math.max(0,M.cropX)),zr=1-Ie/ie.height,vr=Math.min(zr,Math.max(0,M.cropY)),kr=er.getActiveAnchor(),Mn=!(kr.indexOf("middle")>=0||kr.indexOf("center")>=0),gi=!Mn&&At<1&&Jt.current.cropHeight>Ie/ie.height;let vn=Mn?M.cropWidth:M.cropWidth*At;gi&&(vn=M.cropWidth);const ln=!Mn&&rt<1&&Jt.current.cropWidth>xe/ie.width;let Yn=Mn?M.cropHeight:M.cropHeight*rt;ln&&(Yn=M.cropHeight),tt&&(vn=M.cropWidth,Yn=M.cropHeight),M.set({cropX:Gt,cropY:vr,x:Qe.x(),y:Qe.y(),width:Qe.width()*At,height:Qe.height()*rt,rotation:De.target.rotation(),cropWidth:Math.min(vn,1-Gt),cropHeight:Math.min(Yn,1-vr)})},onTransformEnd:De=>{const Je=De.currentTarget;M.set({width:Je.width(),height:Je.height(),x:Je.x(),y:Je.y(),rotation:De.target.rotation(),cropWidth:xe/ie.width,cropHeight:Ie/ie.height}),H(!1)}}),a.default.createElement(u.Rect,{x:M.x,y:M.y,width:Math.max(M.a.width-M.borderSize,0),height:Math.max(M.a.height-M.borderSize,0),opacity:Sr,offsetX:-M.borderSize/2,offsetY:-M.borderSize/2,stroke:M.borderColor,strokeWidth:M.borderSize,listening:!1,visible:!!M.borderSize,rotation:M.rotation,cornerRadius:Math.max(0,Ht-M.borderSize),hideInExport:!M.showInExport}),M._cropModeEnabled&&a.default.createElement(S.Portal,{selector:".page-abs-container",enabled:!0},a.default.createElement(u.Rect,{x:-window.innerWidth/$.scale,y:-window.innerWidth/$.scale,width:window.innerWidth/$.scale*3,height:window.innerWidth/$.scale*3,fill:"rgba(0,0,0,0.3)"}),a.default.createElement(u.Image,{listening:!1,image:nt,x:M.x,y:M.y,width:M.a.width,height:M.a.height,rotation:M.rotation,shadowEnabled:M.shadowEnabled,shadowBlur:M.shadowBlur}),a.default.createElement(u.Group,{x:M.x,y:M.y,rotation:M.rotation,scaleX:Ee,scaleY:Ee},a.default.createElement(u.Image,{image:ie,ref:Z,opacity:.4,draggable:!0,x:-M.cropX*ie.width,y:-M.cropY*ie.height,onDragMove:ke,onTransform:ke,onTouchMove:De=>{De.evt.preventDefault();const Je=De.target.getStage().getPointersPositions();var Qe=Je[0],At=Je[1];const rt=De.target;if(Qe&&!At&&!rt.isDragging()&&We.current&&(rt.startDrag(),We.current=!1),Qe&&At){p.default.hitOnDragEnabled=!0,rt.isDragging()&&(We.current=!0,rt.stopDrag());const ln=De.target.getAbsoluteTransform().copy();ln.invert();var er={x:Qe.x,y:Qe.y},mt={x:At.x,y:At.y};if(!Ze.current)return void(Ze.current=P(er,mt));var Gt=P(er,mt),zr=x(er,mt);Oe.current||(Oe.current=zr);const Yn=rt.position();var vr={x:Gt.x-Yn.x,y:Gt.y-Yn.y},kr=zr/Oe.current;rt.scaleX(kr),rt.scaleY(kr);const Va=ln.point(Gt),vi=ln.point(Ze.current);var Mn=Va.x-vi.x,gi=Va.y-vi.y,vn={x:Math.min(0,Gt.x-vr.x*kr+Mn),y:Math.min(0,Gt.y-vr.y*kr+gi)};rt.position(vn),Oe.current=zr,Ze.current=Gt,ke(De)}},onTouchEnd:De=>{Oe.current=0,Ze.current=null,p.default.hitOnDragEnabled=!1}}),a.default.createElement(u.Transformer,{ref:we,anchorSize:20,enabledAnchors:["top-left","top-right","bottom-left","bottom-right"],boundBoxFunc:(De,Je)=>Je.width<5||Je.height<5?De:Je,rotateEnabled:!1,borderEnabled:!1,anchorCornerRadius:10,anchorStrokeWidth:2,borderStrokeWidth:2}),a.default.createElement(u.Rect,{width:xe,height:Ie,ref:je,listening:!1,onTransform:De=>{De.target.x()<-M.cropX*ie.width-1e-9&&(De.target.x(-M.cropX*ie.width),De.target.scaleX(1)),De.target.y()<-M.cropY*ie.height-1e-9&&(De.target.y(-M.cropY*ie.height),De.target.scaleY(1));const Je=Math.min(1,Math.max(0,M.cropX+De.target.x()/ie.width)),Qe=Math.min(1,Math.max(0,De.target.y()/ie.height+M.cropY)),At=De.target.width()*De.target.scaleX(),rt=De.target.height()*De.target.scaleY(),er=Math.min(1-Je,At/ie.width),mt=Math.min(1-Qe,rt/ie.height),Gt=De.target.getAbsolutePosition(De.target.getParent().getParent());De.target.scale({x:1,y:1}),De.target.position({x:0,y:0}),M.set({x:Gt.x,y:Gt.y,cropX:Je,cropY:Qe,cropWidth:er,cropHeight:mt,width:Math.min(At*Ee,ie.width*(1-Je)*Ee),height:Math.min(rt*Ee,ie.height*(1-Qe)*Ee)})}}),a.default.createElement(u.Transformer,{ref:Le,enabledAnchors:["top-left","top-right","bottom-left","bottom-right"],boundBoxFunc:(De,Je)=>Je.width<5||Je.height<5?De:Je,visible:M.resizable,keepRatio:!1,rotateEnabled:!1,anchorFill:"rgb(240, 240, 240)",anchorStrokeWidth:2,borderStrokeWidth:2}))),(J||re)&&a.default.createElement(w.Highlighter,{element:M}))})})(x2);var dS={},hS={exports:{}};/*!
  * Quill Editor v1.3.7
  * https://quilljs.com/
  * Copyright (c) 2014, Jason Chen
@@ -238,7 +238,7 @@ https://polotno.com/docs/server-api`;e.URLS={unsplashList:({query:h,page:d=1})=>
 `],{type:"application/javascript"}))})}e.getGIF=r,e.createGIF=n})(MS);var NS={};(function(e){async function t(r){for(let n=0;n<30;n++){const i=await r();if(i)return i;await new Promise(a=>setTimeout(a,50))}}Object.defineProperty(e,"__esModule",{value:!0}),e.waitTillAvailable=void 0,e.waitTillAvailable=t})(NS);var IS={},Kc={};(function(e){Object.defineProperty(e,"__esModule",{value:!0}),e.getCrop=e.cropImage=e.loadImage=e.getImageSize=void 0;const t=Eu;function r(o){return new Promise(l=>{const u=document.createElement("img");u.onload=async()=>{u.width===0||u.height===0?l(await(0,t.getSvgSize)(o)):l({width:u.width,height:u.height})},u.crossOrigin="anonymous",u.src=o})}function n(o){return new Promise((l,u)=>{const f=document.createElement("img");f.onload=()=>{l(f)},f.onerror=p=>{u(p)},f.crossOrigin="anonymous",f.src=o})}async function i(o,l){const u=await n(o),f=document.createElement("canvas");f.width=2*u.width,f.height=2*u.height,f.getContext("2d").drawImage(u,0,0,f.width,f.height);const p=document.createElement("canvas");p.width=l.width,p.height=l.height;const S=p.getContext("2d");let{cropX:w,cropY:g}=l;const E=f.width*l.cropWidth,m=f.height*l.cropHeight,v=l.width/l.height;let y,h;const d=E/m;return l.type==="svg"?(y=E,h=m):v>=d?(y=E,h=E/v):(y=m*v,h=m),S.drawImage(f,w*f.width,g*f.height,y,h,0,0,p.width,p.height),p.toDataURL("image/png")}function a(o,l){const{width:u,height:f}=o,p=u/f;let S,w;p>=l.width/l.height?(S=l.width,w=l.width/p):(S=l.height*p,w=l.height);const g=(l.width-S)/2,E=(l.height-w)/2;return{cropX:g/l.width,cropY:E/l.height,cropWidth:S/l.width,cropHeight:w/l.height}}e.getImageSize=r,e.loadImage=n,e.cropImage=i,e.getCrop=a})(Kc);(function(e){var t=Se&&Se.__createBinding||(Object.create?function(_,A,C,k){k===void 0&&(k=C);var R=Object.getOwnPropertyDescriptor(A,C);R&&!("get"in R?!A.__esModule:R.writable||R.configurable)||(R={enumerable:!0,get:function(){return A[C]}}),Object.defineProperty(_,k,R)}:function(_,A,C,k){k===void 0&&(k=C),_[k]=A[C]}),r=Se&&Se.__setModuleDefault||(Object.create?function(_,A){Object.defineProperty(_,"default",{enumerable:!0,value:A})}:function(_,A){_.default=A}),n=Se&&Se.__importStar||function(_){if(_&&_.__esModule)return _;var A={};if(_!=null)for(var C in _)C!=="default"&&Object.prototype.hasOwnProperty.call(_,C)&&t(A,_,C);return r(A,_),A},i=Se&&Se.__rest||function(_,A){var C={};for(var k in _)Object.prototype.hasOwnProperty.call(_,k)&&A.indexOf(k)<0&&(C[k]=_[k]);if(_!=null&&typeof Object.getOwnPropertySymbols=="function"){var R=0;for(k=Object.getOwnPropertySymbols(_);R<k.length;R++)A.indexOf(k[R])<0&&Object.prototype.propertyIsEnumerable.call(_,k[R])&&(C[k[R]]=_[k[R]])}return C};Object.defineProperty(e,"__esModule",{value:!0}),e.jsonToHTML=e.jsonToDOM=e.fixRatio=void 0;const a=Kc,o=n(Eu),l=Kc,u=L2,f=(_,A,...C)=>({type:_,props:A,children:C||[]});function p(_){var A=new DOMParser().parseFromString(_,"image/svg+xml");return A.documentElement.setAttribute("preserveAspectRatio","none"),new XMLSerializer().serializeToString(A)}e.fixRatio=p;const S=async({element:_,page:A,store:C})=>{let{src:k}=_;if(_.type==="svg"&&Object.keys(_.colorsReplace).length){const X=await o.urlToString(k);k=o.replaceColors(X,new Map(Object.entries(_.colorsReplace)))}let R="";_.flipX&&(R+="scaleX(-1)"),_.flipY&&(R+="scaleY(-1)"),R||(R="none");const D={};if(_.clipSrc){const X=await o.urlToBase64(_.clipSrc);D["clip-path"]=`url(${X})`}const U=await(0,l.loadImage)(k),Y=U.width*_.cropWidth,j=U.height*_.cropHeight,G=_.width/_.height;let z,q;const L=Y/j;_.type==="svg"?(z=Y,q=j):G>=L?(z=Y,q=Y/G):(z=j*G,q=j);const I=z/U.width,B=q/U.height,M=z/q>_.width/_.height?_.height/q:_.width/z,$=z*M/I,K=q*M/B,V=_.cropX*M*U.width,H=_.cropY*M*U.height;return f("div",{style:Object.assign(Object.assign({},D),{width:"100%",height:"100%","border-radius":_.cornerRadius+"px",border:_.borderSize?`${_.borderSize}px solid ${_.borderColor}`:"none",background:`url(${k})`,transform:R,"background-size":`${Math.round($)}px ${Math.round(K)}px`,"background-position-x":-Math.round(V)+"px","background-position-y":-Math.round(H)+"px"})})},w=async({element:_,page:A,store:C})=>{let k={};_.fill.indexOf("gradient")>=0&&(k=Object.assign(Object.assign({},k),{"background-color":_.fill,"background-image":_.fill,"background-clip":"text","text-fill-color":"transparent","-webkit-background-clip":"text","-webkit-text-fill-color":"transparent"}));const R=_.backgroundPadding*(_.fontSize*_.lineHeight),D=f("div",{style:{position:"absolute",top:-R/2+"px",left:-R/2+"px",display:_.backgroundEnabled?"block":"none",width:_.width+R+"px",height:_.height+R+"px","background-color":_.backgroundColor,"border-radius":_.backgroundCornerRadius*(_.fontSize*_.lineHeight*.5)+"px"}}),U=f("div",{style:Object.assign(Object.assign({},k),{position:"absolute",top:0,left:0,width:_.width+"px",color:_.fill,"white-space":"pre-wrap","font-size":_.fontSize+"px","text-align":_.align,"font-family":_.fontFamily,"text-decoration":_.textDecoration||"none","line-height":_.lineHeight,"letter-spacing":_.letterSpacing+"em","font-style":_.fontStyle,"font-weight":_.fontWeight,"-webkit-text-stroke":`${_.strokeWidth}px ${_.stroke}`,"text-stroke":`${_.strokeWidth}px ${_.stroke}`})},_.text.split(`
 `).join("<br />"));return f("div",{style:{position:"relative"}},D,U)},g=({element:_,type:A})=>{const C={"stroke-width":_.height,stroke:_.color,"line-cap":"round","stroke-linejoin":"round",opacity:_.opacity};return A==="arrow"||A==="triangle"?f("polyline",Object.assign({points:`${3*_.height},${2*-_.height} 0,0 ${3*_.height},${2*_.height}`},C)):A==="bar"?f("polyline",Object.assign({points:`0,${2*-_.height} 0,${2*_.height}`},C)):A==="circle"?f("circle",Object.assign({r:_.height},C)):A==="square"?f("polyline",Object.assign({points:`${-_.height},${-_.height} ${-_.height},${_.height} ${_.height},${_.height} ${_.height},${-_.height}`},C)):null},E=async({element:_,page:A,store:C})=>f("svg",{style:{width:"100%",height:"100%",contain:"layout style size",overflow:"visible"}},f("rect",{x:0,y:0,width:_.width,height:_.height,fill:_.color}),f("g",{transform:`translate(0 ${_.height/2})`},g({element:_,type:_.startHead})),f("g",{transform:`translate(${_.width} ${_.height/2}) rotate(180)`},g({element:_,type:_.endHead}))),m=async({element:_,page:A,store:C,elementHook:k})=>{const R=await Promise.all(_.children.map(U=>h({element:U,page:A,store:C,elementHook:k}))),D=f("div",{style:{"transform-origin":"top left",opacity:_.opacity}},...R);return k&&k({dom:D,element:_})||D},v=async({element:_,page:A,store:C,elementHook:k})=>{const R=(0,u.figureToSvg)(_),D=f("div",{innerHTML:R});return k&&k({dom:D,element:_})||D},y={image:S,svg:S,text:w,line:E,figure:v,group:m};async function h({element:_,page:A,store:C,elementHook:k}){let R=await y[_.type];R||(R=()=>f("div",{}),console.error(`HTML export does not support ${_.type} type...`));const D=await R({element:_,page:A,store:C}),U=[];_.blurEnabled&&U.push(`blur(${_.blurRadius/2}px)`),_.brightnessEnabled&&U.push(`brightness(${100*_.brightness+100}%)`),_.sepiaEnabled&&U.push("sepia()"),_.grayscaleEnabled&&U.push("grayscale()"),_.shadowEnabled&&U.push(`drop-shadow(${_.shadowOffsetX}px ${_.shadowOffsetY}px ${_.shadowBlur}px ${_.shadowColor})`);const Y=f("div",{style:{position:"absolute",left:_.x+"px",top:_.y+"px",width:_.width+"px",height:_.height+"px",transform:`rotate(${_.rotation}deg)`,"transform-origin":"top left",opacity:_.opacity,filter:U.join(" ")||"none"}},D);return k&&k({dom:Y,element:_})||Y}async function d({page:_,store:A,elementHook:C}){const k=await Promise.all(_.children.map(Y=>h({element:Y,page:_,store:A,elementHook:C}))),R=_.width==="auto"?A.width:_.width,D=_.height==="auto"?A.height:_.height;let U={};if(_.background.indexOf("url")>=0||_.background.indexOf("http")>=0||_.background.indexOf(".jpg")>=0||_.background.indexOf(".png")>=0||_.background.indexOf(".jpeg")>=0){const{width:Y,height:j}=await(0,l.loadImage)(_.background),G=await S({element:Object.assign({x:0,y:0,width:Y,height:j,src:_.background,cornerRadius:0},(0,a.getCrop)({width:Y,height:j},{width:Y,height:j})),page:_,store:A});k.unshift(G)}else U=Object.assign(Object.assign({},U),{"background-color":_.background});return f("div",{className:"page",style:Object.assign(Object.assign({},U),{width:R+"px",height:D+"px",border:"1px solid grey",overflow:"hidden",position:"relative"})},...k)}async function b({json:_,elementHook:A}){const C=await Promise.all(_.pages.map(D=>d({page:D,store:_,elementHook:A}))),k=[];_.pages.forEach(D=>{D.children.forEach(U=>{U.type==="text"&&k.indexOf(U.fontFamily)===-1&&k.push(U.fontFamily)})});const R=k.map(D=>_.fonts.find(U=>U.fontFamily===D)?f("style",{},""):f("link",{href:`https://fonts.googleapis.com/css?family=${D}`,rel:"stylesheet"}));return f("div",{className:"design"},...R,...C)}e.jsonToDOM=b;const O=(_,A)=>typeof A=="object"?`${_}="${Object.keys(A).map(C=>`${C}:${A[C]};`).join(" ")}"`:`${_}="${A}"`,x=({dom:_})=>{if(typeof _=="string")return _;if(!_)return"";const A=_.props,{innerHTML:C}=A,k=i(A,["innerHTML"]);return`<${_.type} ${Object.keys(k).map(R=>O(R,_.props[R])).join(" ")}>${C||_.children.map(R=>x({dom:R})).join("")}</${_.type}>`};async function P({json:_,elementHook:A}){const C=await b({json:_,elementHook:A});return x({dom:C})}e.jsonToHTML=P})(IS);var DS={};(function(e){var t=Se&&Se.__createBinding||(Object.create?function(x,P,_,A){A===void 0&&(A=_);var C=Object.getOwnPropertyDescriptor(P,_);C&&!("get"in C?!P.__esModule:C.writable||C.configurable)||(C={enumerable:!0,get:function(){return P[_]}}),Object.defineProperty(x,A,C)}:function(x,P,_,A){A===void 0&&(A=_),x[A]=P[_]}),r=Se&&Se.__setModuleDefault||(Object.create?function(x,P){Object.defineProperty(x,"default",{enumerable:!0,value:P})}:function(x,P){x.default=P}),n=Se&&Se.__importStar||function(x){if(x&&x.__esModule)return x;var P={};if(x!=null)for(var _ in x)_!=="default"&&Object.prototype.hasOwnProperty.call(x,_)&&t(P,x,_);return r(P,x),P};Object.defineProperty(e,"__esModule",{value:!0}),e.jsonToSVG=e.jsonToDOM=e.fixRatio=void 0;const i=Kc,a=n(Eu),o=Kc,l=(x,P,..._)=>({type:x,props:P,children:_||[]});function u(x){var P=new DOMParser().parseFromString(x,"image/svg+xml");return P.documentElement.setAttribute("preserveAspectRatio","none"),new XMLSerializer().serializeToString(P)}e.fixRatio=u;const f=async x=>{const P=await(0,o.loadImage)(x),_=document.createElement("canvas");return _.width=P.width,_.height=P.height,_.getContext("2d").drawImage(P,0,0),_.toDataURL("image/png")},p=async({element:x,page:P,store:_})=>{let{src:A}=x;if(x.type==="svg"){const H=await a.urlToString(A);A=a.replaceColors(H,new Map(Object.entries(x.colorsReplace)))}let C="";x.flipX&&(C+="scaleX(-1)"),x.flipY&&(C+="scaleY(-1)");const k={};if(x.clipSrc){const H=await a.urlToBase64(x.clipSrc);k["clip-path"]=`url(${H})`}const R=await(0,o.loadImage)(A),D=R.width*x.cropWidth,U=R.height*x.cropHeight,Y=x.width/x.height;let j,G;const z=D/U;x.type==="svg"?(j=D,G=U):Y>=z?(j=D,G=D/Y):(j=U*Y,G=U);const q=j/R.width,L=G/R.height,I=j/G>x.width/x.height?x.height/G:x.width/j,B=j*I/q,M=G*I/L,$=x.cropX*I*R.width,K=x.cropY*I*R.height,V=`clip-${Math.random()}`;return l("g",{style:{"clip-path":k["clip-path"],transform:C}},l("defs",{},l("clipPath",{id:V},l("rect",{x:$,y:K,width:B,height:M}))),l("image",{"xlink:href":await f(A),width:x.width,height:x.height,preserveAspectRatio:"none","clip-path":`url(#${V})`}))},S=async({element:x,page:P,store:_})=>{let A={};x.fill.indexOf("gradient")>=0&&(A=Object.assign(Object.assign({},A),{"background-color":x.fill,"background-image":x.fill,"background-clip":"text","text-fill-color":"transparent","-webkit-background-clip":"text","-webkit-text-fill-color":"transparent"}));const C=x.backgroundPadding*(x.fontSize*x.lineHeight),k=l("div",{style:{position:"absolute",top:-C/2+"px",left:-C/2+"px",display:x.backgroundEnabled?"block":"none",width:x.width+C+"px",height:x.height+C+"px","background-color":x.backgroundColor,"border-radius":x.backgroundCornerRadius*(x.fontSize*x.lineHeight*.5)+"px"}}),R=l("div",{style:Object.assign(Object.assign({},A),{position:"absolute",top:0,left:0,width:x.width+"px",color:x.fill,"white-space":"pre-wrap","font-size":x.fontSize+"px","text-align":x.align,"font-family":x.fontFamily,"text-decoration":x.textDecoration||"none","line-height":x.lineHeight,"letter-spacing":x.letterSpacing+"em","font-style":x.fontStyle,"font-weight":x.fontWeight,"-webkit-text-stroke":`${x.strokeWidth}px ${x.stroke}`,"text-stroke":`${x.strokeWidth}px ${x.stroke}`})},x.text.split(`
 `).join("<br />"));return l("foreignObject",{width:x.width,height:x.height},l("div",{style:{position:"relative"},xmlns:"http://www.w3.org/1999/xhtml"},k,R))},w=({element:x,type:P})=>{const _={"stroke-width":x.height,stroke:x.color,"line-cap":"round","stroke-linejoin":"round",opacity:x.opacity};return P==="arrow"||P==="triangle"?l("polyline",Object.assign({points:`${3*x.height},${2*-x.height} 0,0 ${3*x.height},${2*x.height}`},_)):P==="bar"?l("polyline",Object.assign({points:`0,${2*-x.height} 0,${2*x.height}`},_)):P==="circle"?l("circle",Object.assign({r:x.height},_)):P==="square"?l("polyline",Object.assign({points:`${-x.height},${-x.height} ${-x.height},${x.height} ${x.height},${x.height} ${x.height},${-x.height}`},_)):null},g=async({element:x,page:P,store:_})=>l("svg",{style:{width:"100%",height:"100%",contain:"layout style size",overflow:"visible"}},l("rect",{x:0,y:0,width:x.width,height:x.height,fill:x.color}),l("g",{transform:`translate(0 ${x.height/2})`},w({element:x,type:x.startHead})),l("g",{transform:`translate(${x.width} ${x.height/2}) rotate(180)`},w({element:x,type:x.endHead}))),E=async({element:x,page:P,store:_,elementHook:A})=>{const C=await Promise.all(x.children.map(R=>v({element:R,page:P,store:_,elementHook:A}))),k=l("g",{opacity:x.opacity,style:{"transform-origin":"top left"}},...C);return A&&A({dom:k,element:x})||k},m={image:p,svg:p,text:S,line:g,group:E};async function v({element:x,page:P,store:_,elementHook:A}){let C=await m[x.type];C||(C=()=>l("div",{}),console.error(`HTML export does not support ${x.type} type...`));const k=await C({element:x,page:P,store:_}),R=[];x.blurEnabled&&R.push(`blur(${x.blurRadius/2}px)`),x.brightnessEnabled&&R.push(`brightness(${100*x.brightness+100}%)`),x.sepiaEnabled&&R.push("sepia()"),x.grayscaleEnabled&&R.push("grayscale()"),x.shadowEnabled&&R.push(`drop-shadow(${x.shadowOffsetX}px ${x.shadowOffsetY}px ${x.shadowBlur}px ${x.shadowColor})`);const D=l("g",{transform:`translate(${x.x}, ${x.y}) rotate(${x.rotation})`,rotation:x.rotation,width:x.width,height:x.height,opacity:x.opacity,style:{"transform-origin":"top left",filter:R.join(" ")}},k);return A&&A({dom:D,element:x})||D}async function y({page:x,store:P,elementHook:_}){const A=await Promise.all(x.children.map(k=>v({element:k,page:x,store:P,elementHook:_})));let C={};if(x.background.indexOf("url")>=0||x.background.indexOf("http")>=0||x.background.indexOf(".jpg")>=0||x.background.indexOf(".png")>=0||x.background.indexOf(".jpeg")>=0){const k=await(0,o.loadImage)(x.background),R=await(0,o.cropImage)(x.background,Object.assign({width:P.width,height:P.height,x:0,y:0},(0,i.getCrop)({width:P.width,height:P.height},{width:k.width,height:k.height})));C=Object.assign(Object.assign({},C),{"background-image":`url(${R})`})}return l("g",{className:"page",style:Object.assign(Object.assign({},C),{background:x.background})},l("rect",{x:0,y:0,width:P.width,height:P.height,fill:x.background}),...A)}async function h({json:x,elementHook:P}){const _=await Promise.all(x.pages.map(k=>y({page:k,store:x,elementHook:P}))),A=[];x.pages.forEach(k=>{k.children.forEach(R=>{R.type==="text"&&A.indexOf(R.fontFamily)===-1&&A.push(R.fontFamily)})});const C=A.map(k=>x.fonts.find(R=>R.fontFamily===k)?l("style",{},""):l("link",{href:`https://fonts.googleapis.com/css?family=${k}`,rel:"stylesheet"}));return l("svg",{xmlns:"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink",viewBox:`0 0 ${x.width} ${x.height}`,preserveAspectRatio:"xMidYMin slice"},...C,..._)}e.jsonToDOM=h;const d=(x,P)=>typeof P=="object"?`${x}="${Object.keys(P).map(_=>`${_}:${P[_]};`).join(" ")}"`:`${x}="${P}"`,b=({dom:x})=>typeof x=="string"?x:x?`<${x.type} ${Object.keys(x.props).map(P=>d(P,x.props[P])).join(" ")}>${x.children.map(P=>b({dom:P})).join("")}</${x.type}>
-`:"";async function O({json:x,elementHook:P}){const _=await h({json:x,elementHook:P});return b({dom:_})}e.jsonToSVG=O})(DS);var ov={},k_;function FS(){return k_||(k_=1,function(e){Object.defineProperty(e,"__esModule",{value:!0}),e.Page=void 0;const t=Hi,r=N2,n=Xc(),i=D2(),a=Xc();e.Page=t.types.model("Page",{id:t.types.identifier,children:t.types.array(t.types.late(()=>n.ElementTypes)),width:t.types.optional(t.types.union(t.types.number,t.types.literal("auto")),"auto"),height:t.types.optional(t.types.union(t.types.number,t.types.literal("auto")),"auto"),background:"white",bleed:0,custom:t.types.frozen(),duration:5e3,_exporting:!1,_rendering:!1}).postProcessSnapshot(o=>{const l=Object.assign({},o),u={};for(var f in l)f[0]!=="_"&&(u[f]=o[f]);return u}).views(o=>({get store(){return(0,t.getParentOfType)(o,i.Store)},get startTime(){let l=0;for(const u of o.store.pages){if(u.id===o.id)return l;l+=u.duration}return l}})).views(o=>({get computedWidth(){return o.width==="auto"?o.store.width:o.width},get computedHeight(){return o.height==="auto"?o.store.height:o.height}})).actions(o=>({toJSON:()=>JSON.parse(JSON.stringify((0,t.getSnapshot)(o))),_forEachElementUp(l,u){const f=l.map(p=>({id:p,index:o.children.findIndex(S=>S.id===p)}));f.sort((p,S)=>S.index-p.index);for(const{index:p}of f){if(p==-1)continue;const S=p<o.children.length-1&&o.children[p+1],w=l.indexOf(S==null?void 0:S.id)>=0;p===o.children.length-1||w||u(p)}},_forEachElementDown(l,u){const f=l.map(p=>({id:p,index:o.children.findIndex(S=>S.id===p)}));f.sort((p,S)=>p.index-S.index);for(const{index:p}of f){if(p==-1)continue;const S=p>0&&o.children[p-1],w=l.indexOf(S==null?void 0:S.id)>=0;p===0||w||u(p)}return!1}})).actions(o=>({clone(l={}){const u=o.toJSON();u.children.forEach(w=>{w.id=(0,r.nanoid)(10),(0,a.forEveryChild)(w,g=>{g.id=(0,r.nanoid)(10)})});const f=Object.assign(Object.assign(Object.assign({},u),{id:(0,r.nanoid)(10)}),l),p=o.store.addPage(f),S=o.store.pages.indexOf(o);p.setZIndex(S+1),p.select()},setZIndex(l){o.store.setPageZIndex(o.id,l)},set(l){Object.assign(o,l)},select(){o.store.selectPage(o.id)},addElement(l,{skipSelect:u=!1}={}){const f=a.TYPES_MAP[l.type];if(!f)return void console.error("Can not find model with type "+l.type);l.children&&l.children.forEach(S=>{S.id=(0,r.nanoid)(10)});const p=f.create(Object.assign({id:(0,r.nanoid)(10)},l));return o.children.push(p),p.selectable&&!u&&o.store.selectElements([p.id]),p},canMoveElementsUp(l){let u=!1;return o._forEachElementUp(l,()=>{u=u||!0}),u},moveElementsUp(l){o._forEachElementUp(l,u=>{const f=o.children[u];(0,t.detach)(f),o.children.splice(u+1,0,f)})},canMoveElementsTop(l){return this.canMoveElementsUp(l)},moveElementsTop(l){const u=[],f=[];o.children.forEach(p=>{l.indexOf(p.id)>=0?u.push(p):f.push(p)}),o.children.replace(f.concat(u))},canMoveElementsDown(l){let u=!1;return o._forEachElementDown(l,()=>{u=u||!0}),u},moveElementsDown(l){o._forEachElementDown(l,u=>{const f=o.children[u];(0,t.detach)(f),o.children.splice(u-1,0,f)})},canMoveElementsBottom(l){return this.canMoveElementsDown(l)},moveElementsBottom(l){const u=[],f=[];o.children.forEach(p=>{l.indexOf(p.id)>=0?u.push(p):f.push(p)}),o.children.replace(u.concat(f))},setElementZIndex(l,u){const f=o.children.find(p=>p.id===l);f&&((0,t.detach)(f),o.children.remove(f),o.children.splice(u,0,f))},setSize({width:l,height:u,useMagic:f,softChange:p}){if(f){const S=l/o.computedWidth,w=u/o.computedHeight,g=Math.min(S,w),E=Math.max(0,(l-o.computedWidth*g)/2),m=Math.max(0,(u-o.computedHeight*g)/2);(0,a.forEveryChild)(o,v=>{v.type!=="group"&&(v.type==="image"&&v.x<1&&v.y<1&&v.width>=o.computedWidth-2&&v.height>=o.computedHeight-2?v.set({x:v.x*g,y:v.y*g,width:v.width*S,height:v.height*w,cropX:0,cropY:0,cropWidth:1,cropHeight:1}):(v.set({x:E+v.x*g,y:m+v.y*g,width:v.width*g,height:v.height*g}),v.type==="text"?v.set({fontSize:v.fontSize*g}):v.type==="figure"&&v.set({strokeWidth:v.strokeWidth*g})))})}p||(o.width=l),p||(o.height=u)}})).actions(o=>({moveElementUp(l){console.warn("page.moveElementUp(id) is deprecated. Please use page.moveElementsUp([id1, id2]) instead."),o.moveElementsUp([l])},moveElementDown(l){console.warn("page.moveElementDown(id) is deprecated. Please use page.moveElementsDown([id1, id2]) instead."),o.moveElementsDown([l])},moveElementTop(l){console.warn("page.moveElementTop(id) is deprecated. Please use page.moveElementsTop([id1, id2]) instead."),o.moveElementsTop([l])},moveElementBottom(l){console.warn("page.moveElementBottom(id) is deprecated. Please use page.moveElementsBottom([id1, id2]) instead."),o.moveElementsBottom([l])},play(){o.store.play({startTime:o.startTime,endTime:o.startTime+o.duration})}}))}(ov)),ov}var R_;function D2(){return R_||(R_=1,function(e){var t=Se&&Se.__createBinding||(Object.create?function(_,A,C,k){k===void 0&&(k=C);var R=Object.getOwnPropertyDescriptor(A,C);R&&!("get"in R?!A.__esModule:R.writable||R.configurable)||(R={enumerable:!0,get:function(){return A[C]}}),Object.defineProperty(_,k,R)}:function(_,A,C,k){k===void 0&&(k=C),_[k]=A[C]}),r=Se&&Se.__setModuleDefault||(Object.create?function(_,A){Object.defineProperty(_,"default",{enumerable:!0,value:A})}:function(_,A){_.default=A}),n=Se&&Se.__importStar||function(_){if(_&&_.__esModule)return _;var A={};if(_!=null)for(var C in _)C!=="default"&&Object.prototype.hasOwnProperty.call(_,C)&&t(A,_,C);return r(A,_),A},i=Se&&Se.__rest||function(_,A){var C={};for(var k in _)Object.prototype.hasOwnProperty.call(_,k)&&A.indexOf(k)<0&&(C[k]=_[k]);if(_!=null&&typeof Object.getOwnPropertySymbols=="function"){var R=0;for(k=Object.getOwnPropertySymbols(_);R<k.length;R++)A.indexOf(k[R])<0&&Object.prototype.propertyIsEnumerable.call(_,k[R])&&(C[k[R]]=_[k[R]])}return C},a=Se&&Se.__importDefault||function(_){return _&&_.__esModule?_:{default:_}};Object.defineProperty(e,"__esModule",{value:!0}),e.createStore=e.Store=e.Font=void 0;const o=Hi,l=kS,u=N2,f=a(Ui),p=RS,S=LS,w=MS,g=M2(),E=n(_f),m=Ia,v=m0,y=I2,h=NS,d=IS,b=DS,O=FS(),x=Xc();function P({key:_,showCredit:A}={key:"",showCredit:!1}){const C=e.Store.create();return(0,g.validateKey)(_,A),C}(0,o.setLivelinessChecking)("ignore"),e.Font=o.types.model("Font",{fontFamily:o.types.string,url:o.types.optional(o.types.string,""),styles:o.types.frozen()}).preProcessSnapshot(_=>Object.assign(Object.assign({},_),{fontFamily:_.fontFamily||_.name})),e.Store=o.types.model("Store",{role:"",pages:o.types.array(O.Page),fonts:o.types.array(e.Font),width:1080,height:1080,currentTime:0,isPlaying:!1,scale:1,scaleToFit:1,unit:"px",dpi:72,bleedVisible:!1,rulesVisible:!1,openedSidePanel:"",custom:o.types.frozen(),selectedElementsIds:o.types.array(o.types.string),animatedElementsIds:o.types.array(o.types.string),history:o.types.optional(l.UndoManager,{targetPath:"../pages"}),_elementsPixelRatio:2,_activePageId:""}).views(_=>({get _bleedVisible(){return console.warn("store._bleedVisible is deprecated. Please use store.bleedVisible instead."),_.bleedVisible},get selectedElements(){return _.selectedElementsIds.map(A=>{for(const C of _.pages)for(const k of C.children)if(k.id===A)return k}).filter(A=>!!A)},get children(){return _.pages},get selectedShapes(){const A=[];return(0,x.forEveryChild)({children:_.selectedElements},C=>{C.type!=="group"&&A.push(C)}),A},get activePage(){return _.pages.slice().find(A=>A.id===_._activePageId)||(_.pages.length?_.pages[0]:null)},get duration(){let A=0;return _.pages.forEach(C=>{A+=C.duration}),A},get _hasCroppedImages(){return _.find(A=>A.type==="image"&&A._cropModeEnabled)},find(A){let C;return(0,x.forEveryChild)({children:_.pages},k=>{if(!C&&A(k))return C=k,!0}),C},getElementById:A=>_.find(C=>C.id===A)})).actions(_=>{let A=0,C=null;return{afterCreate(){_.history.canUndo},setCurrentTime(k){_.currentTime=k},play({animatedElementsIds:k=[],startTime:R=0,currentTime:D=0,endTime:U=_.duration}={}){D&&(console.warn("currentTime property of store.play() is deprecated. Please use startTime instead."),R=D),_.animatedElementsIds=(0,o.cast)(k),_.currentTime=R,_.isPlaying=!0,A=Date.now(),C=U,requestAnimationFrame(_.seek)},checkActivePage(){let k=0;for(const R of _.pages){if(_.currentTime>=R.startTime&&_.currentTime<R.startTime+R.duration){_.selectPage(R.id);break}k+=R.duration}},seek(){if(!_.isPlaying)return;const k=Date.now(),R=k-A;A=k,_.currentTime+=R,_.checkActivePage();const D=C||_.duration;_.isPlaying&&_.currentTime<D?requestAnimationFrame(_.seek):_.stop()},stop(){_.isPlaying=!1,_.currentTime=0,_.animatedElementsIds=(0,o.cast)([]),_.checkActivePage()}}}).actions(_=>({set(A){Object.assign(_,A)},setUnit({unit:A,dpi:C}){_.unit=A||_.unit,_.dpi=C||_.dpi},setRole(A){_.role=A},addPage(A){const C=O.Page.create(Object.assign({id:(0,u.nanoid)(10)},A));return _.pages.push(C),_._activePageId=C.id,C},selectPage(A){_._activePageId=A},selectElements(A){const C=A.map(k=>_.getElementById(k)).sort((k,R)=>k.page.children.indexOf(k)-k.page.children.indexOf(R)).filter(k=>!!k).map(k=>k.id);_.selectedElementsIds=(0,o.cast)(C)},toggleBleed(A){_.bleedVisible=A??!_.bleedVisible},toggleRulers(A){_.rulesVisible=A??!_.rulesVisible},openSidePanel(A){_.openedSidePanel=A},setScale(A){_.scale=A},_setScaleToFit(A){_.scaleToFit=A},setElementsPixelRatio(A){_._elementsPixelRatio=A},setSize(A,C,k){_.pages.forEach(R=>{R.setSize({width:A,height:C,useMagic:k,softChange:!0})}),_.width=A,_.height=C},setPageZIndex(A,C){const k=_.pages.find(R=>R.id===A);k&&((0,o.detach)(k),_.pages.remove(k),_.pages.splice(C,0,k))},deletePages(A){const C=_.pages.indexOf(_.activePage);A.forEach(D=>{const U=_.pages.find(Y=>Y.id===D);(0,o.destroy)(U)});const k=Math.min(_.pages.length-1,C),R=_.pages[k];R&&(_._activePageId=R.id),_.selectedElementsIds=(0,o.cast)(_.selectedElementsIds.filter(D=>_.getElementById(D)))},groupElements(A){const C=A.map(D=>_.getElementById(D));C.forEach(D=>{D&&(0,o.detach)(D)});const k=_.activePage,R={id:(0,u.nanoid)(10),children:C,type:"group"};return k.children.push(R),_.selectedElementsIds=(0,o.cast)([R.id]),R},ungroupElements(A){const C=A.map(R=>_.getElementById(R)),k=[];C.forEach(R=>{if(R&&R.type==="group"){const D=R.page,U=D.children.indexOf(R);R.children.forEach(Y=>{k.push(Y.id)}),R.children.forEach(Y=>{(0,o.detach)(Y),D.children.push(Y)}),D.children.splice(U,1)}}),_.selectedElementsIds=(0,o.cast)(k)},deleteElements(A){A.forEach(C=>{_.pages.forEach(k=>{const R=k.children.find(D=>D.id===C);R&&(0,o.destroy)(R)})}),_.selectedElementsIds=(0,o.cast)(_.selectedElementsIds.filter(C=>_.getElementById(C)))},on(A,C){if(A==="change"){let k=_.toJSON();return(0,o.onSnapshot)(_,R=>{const D=_.toJSON();!(0,y.deepEqual)(k,D)&&(k=D,C(D))})}},async _toCanvas({pixelRatio:A,ignoreBackground:C,pageId:k,mimeType:R,includeBleed:D}={}){var U;const Y=A||1;k=k||((U=_.pages[0])===null||U===void 0?void 0:U.id);const j=_.pages.find(ne=>ne.id===k);if(!j)throw new Error(`No page for export with id ${k}`);j==null||j.set({_exporting:!0});const G=await(0,h.waitTillAvailable)(()=>f.default.stages.find(ne=>ne.getAttr("pageId")===k));if(!G)throw new Error(`Export is failed. Can not find stage for page ${k}. Looks like <Workspace /> component is not mounted, but it is required in order to process the export.`);const z=!!G.findOne(".page-container"),q=_._elementsPixelRatio;Y>_._elementsPixelRatio&&_.setElementsPixelRatio(Y),await _.waitLoading();const L=G.findOne(".page-container");if(!L)throw new Error(`Export is failed. Can't find page container. ${z}`);G.find("Transformer").forEach(ne=>ne.visible(!1)),L.find(".page-background").forEach(ne=>ne.shadowEnabled(!1)),L.find(".page-background").forEach(ne=>ne.strokeEnabled(!1)),L.find(".highlighter").forEach(ne=>ne.visible(!1));const I=L.findOne(".page-background-group"),B=I.clip();I.clip({x:null,y:null,width:null,height:null});const M=L.findOne(".elements-container"),$=M.clip();M.clip({x:null,y:null,width:null,height:null});const K=L.find(ne=>ne.getAttr("hideInExport"));K.forEach(ne=>{ne.setAttr("oldVisible",ne.visible()),ne.hide()});const V=L.find(ne=>!ne.visible()&&ne.getAttr("editModeEnabled"));V.forEach(ne=>{ne.setAttr("oldVisible",ne.visible()),ne.show()}),C&&L.find(".page-background").forEach(ne=>ne.hide());const H=D?j.bleed:0;let X=H;!_.bleedVisible&&D||(_.bleedVisible||D?_.bleedVisible&&D?X=0:_.bleedVisible&&!D&&(X=-j.bleed):X=0);const Z=document.createElement("canvas");Z.width=Math.round((j.computedWidth+2*H)*Y),Z.height=Math.round((j.computedHeight+2*H)*Y);const J=Z.getContext("2d");R==="image/jpeg"&&(J.fillStyle="white",J.fillRect(0,0,Z.width,Z.height));const ee=L.scale();L.scale({x:1,y:1});const re=L.toCanvas({x:L.x()-X,y:L.y()-X,width:j.computedWidth+2*H,height:j.computedHeight+2*H,pixelRatio:Y});return L.scale(ee),J.drawImage(re,0,0,Z.width,Z.height),f.default.Util.releaseCanvas(re),C&&L.find(".page-background").forEach(ne=>ne.show()),K.forEach(ne=>{ne.visible(ne.getAttr("oldVisible"))}),V.forEach(ne=>{ne.visible(ne.getAttr("oldVisible"))}),L.find(".page-background").forEach(ne=>ne.shadowEnabled(!0)),L.find(".page-background").forEach(ne=>ne.strokeEnabled(!0)),G.find("Transformer").forEach(ne=>ne.visible(!0)),L.find(".highlighter").forEach(ne=>ne.visible(!0)),I.clip(B),M.clip($),_.setElementsPixelRatio(q),j==null||j.set({_exporting:!1}),Z},async toDataURL({pixelRatio:A,ignoreBackground:C,pageId:k,mimeType:R,includeBleed:D,quality:U}={}){const Y=await _._toCanvas({pixelRatio:A,ignoreBackground:C,pageId:k,mimeType:R,includeBleed:D}),j=Y.toDataURL(R,U);return f.default.Util.releaseCanvas(Y),j},async toBlob({pixelRatio:A,ignoreBackground:C,pageId:k,mimeType:R,includeBleed:D,quality:U}={}){const Y=await _._toCanvas({pixelRatio:A,ignoreBackground:C,pageId:k,mimeType:R,includeBleed:D}),j=new Promise(G=>{Y.toBlob(G,R,U)});return f.default.Util.releaseCanvas(Y),j},async saveAsImage(A={}){var{fileName:C}=A,k=i(A,["fileName"]);const R=k.mimeType||"image/png",D=R.split("/")[1];(0,p.downloadFile)(await _.toDataURL(k),C||"polotno."+D,R)},async _toPDF(A){const C=A.dpi||_.dpi,k=A.parallel||1,R=A.unit||(_.unit==="px"?"mm":_.unit),D=A.pixelRatio||1,U=A.pageIds||_.pages.map(K=>K.id),Y=_.pages.filter(K=>U.includes(K.id)),j=await(0,S.getJsPDF)(),G=K=>(0,v.pxToUnit)({px:K,unit:R,dpi:C}),z=G(A.cropMarkSize||0),q=Y[0]||{},L=A.includeBleed?q.bleed:0,I=G(q.computedWidth+2*L)+2*z,B=G(q.computedHeight+2*L)+2*z;var M=new j({unit:R,orientation:I>B?"landscape":"portrait",format:[I,B],compress:!0,putOnlyUsedFonts:!0});M.deletePage(1);const $=((K,V)=>{for(var H=[],X=0;X<K.length;X+=V)H.push(K.slice(X,X+V));return H})(Y,k);for(const K of $){const V=K.map(async H=>{const X=A.includeBleed?H.bleed:0,Z=G(H.computedWidth+2*X)+2*z,J=G(H.computedHeight+2*X)+2*z;let ee=0,re=D;for(;ee<10;){ee+=1,ee===2&&console.error("Polotno can not export PDF with current settings. Quality is automatically reduced.");const ne=await _.toDataURL(Object.assign(Object.assign({},A),{pageId:H.id,pixelRatio:re}));if(ne.length>20)return{url:ne,width:Z,height:J};re*=.8}});(await Promise.all(V)).forEach(({url:H,width:X,height:Z})=>{M.addPage([X,Z],X>Z?"landscape":"portrait"),z&&(M.setLineWidth(G(1)),M.line(2*z,0,2*z,z),M.line(0,2*z,z,2*z),M.line(X-2*z,0,X-2*z,z),M.line(X,2*z,X-z,2*z),M.line(0,Z-2*z,z,Z-2*z),M.line(2*z,Z,2*z,Z-z),M.line(X,Z-2*z,X-z,Z-2*z),M.line(X-2*z,Z,X-2*z,Z-z)),M.addImage(H,z,z,X-2*z,Z-2*z,void 0,"FAST")})}return M},toPDFDataURL:async A=>(await _._toPDF(Object.assign({mimeType:"image/jpeg"},A))).output("datauristring"),async toGIFDataURL(A={}){const C=A.pixelRatio||1,k=await(0,w.createGIF)({width:_.width*C,height:_.height*C}),R=1e3/(A.fps||10),D=_.duration/R;for(let U=0;U<D-1;U++){const Y=U*R||1;_.setCurrentTime(Y);let j=0,G="";for(const q of _.pages)if(j+=q.duration,q.set({_rendering:j>Y}),j>Y){G=q.id;break}const z=await _._toCanvas({pixelRatio:C,pageId:G});k.addFrame(z.getContext("2d"),{delay:R,copy:!0})}for(const U of _.pages)U.set({_rendering:!1});return _.stop(),k.render(),new Promise(U=>{k.on("finished",function(Y){(function(j,G){var z=new FileReader;z.onload=function(q){G(q.target.result)},z.readAsDataURL(j)})(Y,U)})})},async saveAsGIF(A={}){var{fileName:C}=A,k=i(A,["fileName"]);const R=await _.toGIFDataURL(k);(0,p.downloadFile)(R,C||"polotno.gif")},async toHTML({elementHook:A}={elementHook:void 0}){const C=_.toJSON();return(0,d.jsonToHTML)({json:C,elementHook:A})},async saveAsHTML({fileName:A}={}){const C=await _.toHTML(),k="data:text/html;base64,"+window.btoa(unescape(encodeURIComponent(C)));(0,p.downloadFile)(k,A||"polotno.html")},async toSVG(){const A=_.toJSON();return(0,b.jsonToSVG)({json:A})},async saveAsSVG({fileName:A}={}){const C=await _.toSVG(),k="data:text/svg;base64,"+window.btoa(unescape(encodeURIComponent(C)));(0,p.downloadFile)(k,A||"polotno.svg")},async saveAsPDF(A={}){var{fileName:C}=A,k=i(A,["fileName"]);(await _._toPDF(Object.assign({mimeType:"image/jpeg"},k))).save(C||"polotno.pdf")},async waitLoading(){await new Promise(A=>setTimeout(A,50)),await(0,m.whenLoaded)()},toJSON:()=>({width:_.width,height:_.height,fonts:(0,o.getSnapshot)(_.fonts),pages:(0,o.getSnapshot)(_.pages),unit:_.unit,dpi:_.dpi,custom:_.custom}),loadJSON(A,C=!1){var k;const R=Object.assign({},A),D=_.pages.indexOf(_.activePage);let U=(k=R.pages[D]||R.pages[0])===null||k===void 0?void 0:k.id;R._activePageId=U;const Y=Object.assign({},(0,o.getSnapshot)(_));Object.assign(Y,R),Y.history=C?_.history.toJSON():{history:[],undoIdx:-1},(0,o.applySnapshot)(_,Y)},clear({keepHistory:A=!1}={}){const C=_.pages.map(k=>k.id);_.deletePages(C),A||_.history.clear()},addFont(A){_.removeFont(A.fontFamily),_.fonts.push(A),_.loadFont(A.fontFamily)},removeFont(A){_.fonts.filter(C=>C.fontFamily===A).forEach(C=>(0,o.destroy)(C))},async loadFont(A){const C=_.fonts.find(k=>k.fontFamily===A)||E.globalFonts.find(k=>k.fontFamily===A);C?E.injectCustomFont(C):E.injectGoogleFont(A),await E.loadFont(A)},validate:A=>e.Store.validate(A,[{path:"",type:e.Store}]).map(C=>({path:"store"+C.context.map(k=>k.path).join("."),message:C.message}))})),e.createStore=P,e.default=P}(av)),av}var L_;function jS(){return L_||(L_=1,function(e){Object.defineProperty(e,"__esModule",{value:!0}),e.Node=void 0;const t=Hi,r=N2,n=D2(),i=FS(),a=Xc();e.Node=t.types.model("Node",{id:t.types.identifier,type:"none",name:"",opacity:1,custom:t.types.frozen(),visible:!0,selectable:!0,removable:!0,alwaysOnTop:!1,showInExport:!0}).preProcessSnapshot(o=>{for(var l in o)o[l]===null&&(o[l]=void 0);return o}).postProcessSnapshot(o=>{const l=Object.assign({},o),u={};for(var f in l)f[0]!=="_"&&(u[f]=o[f]);return u}).views(o=>({get locked(){return!(o.draggable||o.contentEditable||o.styleEditable||o.resizable)},get page(){return(0,t.getParentOfType)(o,i.Page)},get store(){return(0,t.getParentOfType)(o,n.Store)},get top(){let l=o;for(;;){if(!(0,t.hasParentOfType)(l,a.GroupElement))return l;l=(0,t.getParentOfType)(l,a.GroupElement)}},get parent(){return(0,t.hasParentOfType)(o,a.GroupElement)?(0,t.getParentOfType)(o,a.GroupElement):(0,t.hasParentOfType)(o,i.Page)?(0,t.getParentOfType)(o,i.Page):(0,t.hasParentOfType)(o,n.Store)?(0,t.getParentOfType)(o,n.Store):null}})).actions(o=>({toJSON:()=>Object.assign({},(0,t.getSnapshot)(o))})).actions(o=>({clone(l={},{skipSelect:u=!1}={}){const f=JSON.parse(JSON.stringify(o.toJSON()));return l.id=l.id||(0,r.nanoid)(10),(0,a.forEveryChild)(f,p=>{p.id=(0,r.nanoid)(10)}),Object.assign(f,l),o.page.addElement(f,{skipSelect:u})},set(l){Object.assign(o,l)},moveUp(){o.page.moveElementsUp([o.id])},moveTop(){o.page.moveElementsTop([o.id])},moveDown(){o.page.moveElementsDown([o.id])},moveBottom(){o.page.moveElementsBottom([o.id])},beforeDestroy(){}}))}(iv)),iv}var lv={},zS={};(function(e){Object.defineProperty(e,"__esModule",{value:!0}),e.registerAnimation=e.animate=e.animations=void 0;const t={right:{from:{x:-200},to:{x:0}},left:{from:{x:200},to:{x:0}},up:{from:{y:200},to:{y:0}},down:{from:{y:-200},to:{y:0}},"bottom-right":{from:{x:-200,y:-200},to:{x:0,y:0}},"bottom-left":{from:{x:200,y:-200},to:{x:0,y:0}},"top-right":{from:{x:-200,y:200},to:{x:0,y:0}},"top-left":{from:{x:200,y:200},to:{x:0,y:0}}};e.animations={fade:({dTime:i,element:a,animation:o})=>{const l=i/o.duration;return o.type==="enter"?{opacity:l*a.opacity}:{opacity:(1-l)*a.opacity}},move:({dTime:i,element:a,animation:o})=>{const l=t[o.data.direction]||t.right,u={};for(var f in l.from){let p=l.from[f],S=l.to[f];o.type==="exit"&&(p=l.to[f],S=-l.from[f]);const w=a[f]+p,g=a[f]+S-w;u[f]=w+i/o.duration*g}return u},zoom:({dTime:i,element:a,animation:o})=>{const l={},u={x:a.x+a.width/3,y:a.y+a.height/3,width:a.width/3,height:a.height/3,fontSize:a.fontSize/3},f={x:a.x,y:a.y,width:a.width,height:a.height,fontSize:a.fontSize};for(var p in u){let S=u[p],w=f[p];if(o.type==="exit"){const E=S;S=w,w=E}const g=w-S;l[p]=S+i/o.duration*g}return l}};const r=({element:i,dTime:a,animation:o})=>{const l=e.animations[o.name];return l?l({element:i,dTime:a,animation:o}):(console.error("Can not find animation type: "+o.name),{})};e.animate=r;const n=(i,a)=>{};e.registerAnimation=n})(zS);var M_;function xu(){return M_||(M_=1,function(e){Object.defineProperty(e,"__esModule",{value:!0}),e.Shape=e.Animation=void 0;const t=Hi,r=zS,n=jS();e.Animation=t.types.model("Animation",{delay:0,duration:500,enabled:!0,type:t.types.enumeration("Type",["enter","exit"]),name:"none",data:t.types.frozen({})}),e.Shape=n.Node.named("Shape").props({x:0,y:0,width:100,height:100,rotation:0,opacity:1,animations:t.types.array(e.Animation),blurEnabled:!1,blurRadius:10,brightnessEnabled:!1,brightness:0,sepiaEnabled:!1,grayscaleEnabled:!1,shadowEnabled:!1,shadowBlur:5,shadowOffsetX:0,shadowOffsetY:0,shadowColor:"black",shadowOpacity:1,visible:!0,draggable:!0,resizable:!0,selectable:!0,contentEditable:!0,styleEditable:!0,alwaysOnTop:!1,showInExport:!0}).preProcessSnapshot(i=>{const a=Object.assign(Object.assign({},i),{x:i.x||0,y:i.y||0});return"width"in i&&(a.width=a.width||1),"height"in i&&(a.height=a.height||1),i.locked&&(a.draggable=!1,a.contentEditable=!1,a.styleEditable=!1,a.resizable=!1),a}).views(i=>({get a(){const{currentTime:a}=i.store,o={x:i.x,y:i.y,width:i.width,height:i.height,rotation:i.rotation,opacity:i.opacity,color:i.color,fontSize:i.fontSize};if(a===0)return o;const l=a-i.page.startTime;if(l>i.page.duration||l<0)return o;const u=i.store.animatedElementsIds;if(u.length&&!u.includes(i.id))return o;const f=i.animations.find(S=>S.type==="enter");if(f!=null&&f.enabled&&l<f.delay&&(o.opacity=0),f!=null&&f.enabled&&l>=f.delay&&l<=f.delay+f.duration){const S=l-f.delay,w=(0,r.animate)({element:i,animation:f,dTime:S});Object.assign(o,w)}const p=i.animations.find(S=>S.type==="exit");if(p!=null&&p.enabled&&l>=i.page.duration-p.duration){const S=l-(i.page.duration-p.duration),w=(0,r.animate)({element:i,animation:p,dTime:S});Object.assign(o,w)}return o},animated:a=>i.a[a]})).actions(i=>({setAnimation(a,o){const l=i.animations.find(u=>u.type===a);l?Object.assign(l,o):i.animations.push(Object.assign({type:a},o))}}))}(lv)),lv}var sv={},N_;function aF(){return N_||(N_=1,function(e){Object.defineProperty(e,"__esModule",{value:!0}),e.TextElement=void 0;const t=Hi,r=xu();e.TextElement=r.Shape.named("Text").props({type:"text",text:"",placeholder:"",fontSize:14,fontFamily:"Roboto",fontStyle:"normal",fontWeight:"normal",textDecoration:"",fill:"black",align:"center",width:100,height:0,verticalAlign:"top",strokeWidth:0,stroke:"black",lineHeight:t.types.optional(t.types.union(t.types.number,t.types.string),1.2),letterSpacing:0,_editModeEnabled:!1,backgroundEnabled:!1,backgroundColor:"#7ED321",backgroundOpacity:1,backgroundCornerRadius:.5,backgroundPadding:.5}).preProcessSnapshot(n=>Object.assign({},n)).actions(n=>({toggleEditMode(i){n._editModeEnabled=i??!n._editModeEnabled,n._editModeEnabled?n.store.history.startTransaction():n.store.history.endTransaction()}}))}(sv)),sv}var uv={},I_;function BS(){return I_||(I_=1,function(e){Object.defineProperty(e,"__esModule",{value:!0}),e.ImageElement=void 0;const t=xu();e.ImageElement=t.Shape.named("Image").props({type:"image",width:100,height:100,src:"",cropX:0,cropY:0,cropWidth:1,cropHeight:1,cornerRadius:0,flipX:!1,flipY:!1,clipSrc:"",borderColor:"black",borderSize:0,keepRatio:!1,_cropModeEnabled:!1}).actions(r=>({toggleCropMode(n){r._cropModeEnabled=n??!r._cropModeEnabled,r._cropModeEnabled?r.store.history.startTransaction():r.store.history.endTransaction()},beforeDestroy(){r._cropModeEnabled&&r.store.history.endTransaction()}}))}(uv)),uv}var cv={},D_;function oF(){return D_||(D_=1,function(e){Object.defineProperty(e,"__esModule",{value:!0}),e.VideoElement=void 0;const t=BS();e.VideoElement=t.ImageElement.named("Video").props({type:"video",duration:0,startTime:0,endTime:1})}(cv)),cv}var fv={},F_;function lF(){return F_||(F_=1,function(e){Object.defineProperty(e,"__esModule",{value:!0}),e.LineElement=void 0;const t=Hi,r=xu();e.LineElement=r.Shape.named("Line").props({type:"line",width:400,height:10,color:"black",dash:t.types.array(t.types.number),startHead:"",endHead:""}).actions(n=>({}))}(fv)),fv}var dv={},j_;function sF(){return j_||(j_=1,function(e){Object.defineProperty(e,"__esModule",{value:!0}),e.SVGElement=void 0;const t=Hi,r=xu();e.SVGElement=r.Shape.named("SVG").props({type:"svg",src:"",maskSrc:"",cropX:0,cropY:0,cropWidth:1,cropHeight:1,keepRatio:!0,flipX:!1,flipY:!1,width:100,height:100,borderColor:"black",borderSize:0,cornerRadius:0,colorsReplace:t.types.map(t.types.string)}).preProcessSnapshot(n=>Object.assign(Object.assign({},n),{src:n.src||n.svgSource})).actions(n=>({replaceColor(i,a){n.colorsReplace.set(i,a)}}))}(dv)),dv}var hv={},z_;function uF(){return z_||(z_=1,function(e){Object.defineProperty(e,"__esModule",{value:!0}),e.FigureElement=void 0;const t=Hi,r=xu();e.FigureElement=r.Shape.named("Figure").props({type:"figure",subType:"rect",fill:"rgb(0, 161, 255)",dash:t.types.array(t.types.number),strokeWidth:0,stroke:"rgba(98, 197, 255, 1)",cornerRadius:0})}(hv)),hv}var B_;function Xc(){return B_||(B_=1,function(e){var t=Se&&Se.__rest||function(m,v){var y={};for(var h in m)Object.prototype.hasOwnProperty.call(m,h)&&v.indexOf(h)<0&&(y[h]=m[h]);if(m!=null&&typeof Object.getOwnPropertySymbols=="function"){var d=0;for(h=Object.getOwnPropertySymbols(m);d<h.length;d++)v.indexOf(h[d])<0&&Object.prototype.propertyIsEnumerable.call(m,h[d])&&(y[h[d]]=m[h[d]])}return y};Object.defineProperty(e,"__esModule",{value:!0}),e.registerShapeModel=e.TYPES_MAP=e.GroupElement=e.ElementTypes=e.forEveryChild=void 0;const r=Hi,n=jS(),i=xu(),a=aF(),o=BS(),l=oF(),u=lF(),f=sF(),p=uF(),S=(m,v)=>{if(m.children)for(const y of m.children){if(v(y)===!0)break;(0,e.forEveryChild)(y,v)}};e.forEveryChild=S;const w=[...new Array(20)].map((m,v)=>r.types.late(()=>g[v]));e.ElementTypes=r.types.union({dispatcher:m=>{const v=e.TYPES_MAP[m.type];if(!v)throw new Error(`Unknown element type: "${m.type}"`);return v}},f.SVGElement,a.TextElement,o.ImageElement,u.LineElement,l.VideoElement,p.FigureElement,r.types.late(()=>e.GroupElement),...w),e.GroupElement=n.Node.named("Group").props({type:"group",children:r.types.array(e.ElementTypes)}).views(m=>({get draggable(){let v=!0;return(0,e.forEveryChild)(m,y=>{y.draggable||(v=!1)}),v},get resizable(){let v=!0;return(0,e.forEveryChild)(m,y=>{y.resizable||(v=!1)}),v},get contentEditable(){let v=!0;return(0,e.forEveryChild)(m,y=>{y.contentEditable||(v=!1)}),v},get styleEditable(){let v=!0;return(0,e.forEveryChild)(m,y=>{y.styleEditable||(v=!1)}),v},get locked(){let v=!0;return(0,e.forEveryChild)(m,y=>{y.locked||(v=!1)}),v}})).actions(m=>({set(v){var{draggable:y,contentEditable:h,styleEditable:d,resizable:b}=v,O=t(v,["draggable","contentEditable","styleEditable","resizable"]);y!==void 0&&(0,e.forEveryChild)(m,x=>{x.set({draggable:y})}),h!==void 0&&(0,e.forEveryChild)(m,x=>{x.set({contentEditable:h})}),d!==void 0&&(0,e.forEveryChild)(m,x=>{x.set({styleEditable:d})}),b!==void 0&&(0,e.forEveryChild)(m,x=>{x.set({resizable:b})}),Object.assign(m,O)}}));const g=[];function E(m,v){const y=m.type;if(!y)throw new Error('You must pass "type" attribute to custom model.');let h=i.Shape.named(y).props(m);v&&(h=v(h)),e.TYPES_MAP[y]=h,g.push(h)}e.TYPES_MAP={svg:f.SVGElement,text:a.TextElement,image:o.ImageElement,group:e.GroupElement,line:u.LineElement,video:l.VideoElement,figure:p.FigureElement},e.registerShapeModel=E}(nv)),nv}(function(e){Object.defineProperty(e,"__esModule",{value:!0}),e.handleHotkey=void 0;const t=Xc();let r=[],n="";const i="polotno_clipboard",a=u=>{r=JSON.parse(JSON.stringify(u));try{localStorage.setItem(i,JSON.stringify(u))}catch{}},o=()=>{try{const u=localStorage.getItem(i);if(u)return JSON.parse(u)}catch{}return r};function l(u,f){var p,S,w,g,E,m,v,y;if(((p=document.activeElement)===null||p===void 0?void 0:p.tagName)==="INPUT"||((S=document.activeElement)===null||S===void 0?void 0:S.tagName)==="TEXTAREA"||((w=document.activeElement)===null||w===void 0?void 0:w.contentEditable)==="true")return;const h=f.selectedElements.filter(x=>x.removable),d=h.map(x=>x.id);u.keyCode!==46&&u.keyCode!==8||f.deleteElements(d);const b=u.ctrlKey||u.metaKey,O=u.shiftKey;if(b&&!O&&u.code==="KeyZ"&&(u.preventDefault(),f.history.undo()),b&&O&&u.code==="KeyZ"&&(u.preventDefault(),f.history.redo()),b&&u.code==="KeyA"){u.preventDefault();const x=(g=f.activePage)===null||g===void 0?void 0:g.children.filter(_=>_.selectable),P=(x==null?void 0:x.map(_=>_.id))||[];f.selectElements(P)}if(b&&u.code==="KeyC"&&(u.preventDefault(),n=(E=f.activePage)===null||E===void 0?void 0:E.id,a(f.selectedElements.map(x=>x.toJSON()))),b&&u.code==="KeyX"&&(u.preventDefault(),n=(m=f.activePage)===null||m===void 0?void 0:m.id,a(f.selectedElements.map(x=>x.toJSON())),f.deleteElements(h)),b&&u.code==="KeyV"){u.preventDefault();let x=0;n===((v=f.activePage)===null||v===void 0?void 0:v.id)&&(x=f.width/20),n=(y=f.activePage)===null||y===void 0?void 0:y.id,f.history.transaction(()=>{const P=[],_=o();(0,t.forEveryChild)({children:_},A=>{delete A.id,A.type!=="group"&&(A.x+=x,A.y+=x)}),console.log(_),_.forEach(A=>{var C;const k=(C=f.activePage)===null||C===void 0?void 0:C.addElement(A);k&&P.push(k.id)}),a(_),f.selectElements(P)})}u.code==="ArrowDown"&&(u.preventDefault(),f.selectedElements.forEach(x=>{x.set({y:x.y+1})})),u.code==="ArrowUp"&&(u.preventDefault(),f.selectedElements.forEach(x=>{x.set({y:x.y-1})})),u.code==="ArrowLeft"&&(u.preventDefault(),f.selectedElements.forEach(x=>{x.set({x:x.x-1})})),u.code==="ArrowRight"&&(u.preventDefault(),f.selectedElements.forEach(x=>{x.set({x:x.x+1})}))}e.handleHotkey=l})(CS);var US={};(function(e){Object.defineProperty(e,"__esModule",{value:!0}),e.t=e.getTranslations=e.setTranslations=void 0;const t=ja,r=(0,t.observable)({toolbar:{duration:"Duration",opacity:"Opacity",effects:"Effects",blur:"Blur",textBackground:"Background",backgroundCornerRadius:"Corner radius",backgroundOpacity:"Opacity",backgroundPadding:"Padding",brightness:"Brightness",sepia:"Sepia",grayscale:"Grayscale",textStroke:"Text Stroke",shadow:"Shadow",border:"Border",cornerRadius:"Corner Radius",position:"Position",layering:"Layering",toForward:"To forward",up:"Up",down:"Down",toBottom:"To bottom",alignLeft:"Align left",alignCenter:"Align center",alignRight:"Align right",alignTop:"Align top",alignMiddle:"Align middle",alignBottom:"Align bottom",flip:"Flip",flipHorizontally:"Flip horizontally",flipVertically:"Flip vertically",fitToBackground:"Fit to page",removeBackground:"Remove background",removeBackgroundTitle:"Remove background from image",cancelRemoveBackground:"Cancel",confirmRemoveBackground:"Confirm",crop:"Crop",cropDone:"Done",cropCancel:"Cancel",removeClip:"Remove clip",removeMask:"Remove mask",transparency:"Transparency",lockedDescription:"Object is locked. Unlock it to allow changes from canvas.",unlockedDescription:"Object is unlocked. Lock it to prevent changes from canvas.",removeElements:"Remove elements",duplicateElements:"Duplicate elements",download:"Download",saveAsImage:"Save as image",saveAsPDF:"Save as PDF",lineHeight:"Line height",letterSpacing:"Letter spacing",offsetX:"Offset X",offsetY:"Offset Y",color:"Color",selectable:"Selectable",draggable:"Draggable",removable:"Removable",resizable:"Resizable",contentEditable:"Can change content",styleEditable:"Can change style",alwaysOnTop:"Always on top",showInExport:"Show in export",ungroupElements:"Ungroup",groupElements:"Group",lineSize:"Line size",fade:"Fade",move:"Move",zoom:"Zoom",animate:"Animate",spaceEvenly:"Space evenly",horizontalDistribution:"Horizontally",verticalDistribution:"Vertically",strokeWidth:"Stroke Width",colorPicker:{solid:"Solid",linear:"Linear"}},workspace:{noPages:"There are no pages yet...",addPage:"Add page",removePage:"Remove page",duplicatePage:"Duplicate page",moveUp:"Move up",moveDown:"Move down"},scale:{reset:"Reset"},error:{removeBackground:"Ops! Something went wrong. Background can not be removed."},sidePanel:{templates:"Templates",searchTemplatesWithSameSize:"Show templates with the same size",searchPlaceholder:"Search...",otherFormats:"Other formats",noResults:"No results",error:"Loading is failed...",text:"Text",uploadFont:"Upload font",myFonts:"My fonts",photos:"Photos",elements:"Elements",shapes:"Shapes",lines:"Lines",upload:"Upload",uploadImage:"Upload Image",uploadTip:"Do you want to upload your own images?",background:"Background",resize:"Resize",layers:"Layers",layerTypes:{image:"Image",text:"Text",svg:"SVG",line:"Line",figure:"Figure",group:"Group"},layersTip:"Elements on your active page:",noLayers:"No elements on the page...",namePlaceholder:"Type element name...",useMagicResize:"Use magic resize",width:"Width",height:"Height",magicResizeDescription:"Magic resize will automatically resize and move all elements on the canvas",headerText:"Header",createHeader:"Create header",subHeaderText:"Sub Header",createSubHeader:"Create sub header",bodyText:"Body text",createBody:"Create body text"}});function n(f,p){var S,w=p.split("."),g=f;for(S=0;S<w.length;++S){if(g[w[S]]==null)return;g=g[w[S]]}return g}const i=f=>f&&typeof f=="object";function a(f,p){Object.keys(p).forEach(S=>{const w=f[S],g=p[S];i(g)&&i(w)?a(w,g):f[S]=g})}e.setTranslations=(0,t.action)(f=>{a(r,f)});const o=()=>(0,t.toJS)(r);e.getTranslations=o;const l={},u=f=>{const p=n(r,f);if(p!==void 0)return p;l[f]||(l[f]=!0,console.warn(`Missing translation '${f}'`));const S=f.split("."),w=S[S.length-1]||" ";return w.charAt(0).toUpperCase()+w.slice(1)};e.t=u})(US);(function(e){var t=Se&&Se.__importDefault||function(g){return g&&g.__esModule?g:{default:g}};Object.defineProperty(e,"__esModule",{value:!0}),e.WorkspaceCanvas=void 0;const r=t(it),n=zi,i=t(g9),a=PS,o=CS,l=US,u=`Polotno warning: <Workspace /> component can not automatically detect its size.
+`:"";async function O({json:x,elementHook:P}){const _=await h({json:x,elementHook:P});return b({dom:_})}e.jsonToSVG=O})(DS);var ov={},k_;function FS(){return k_||(k_=1,function(e){Object.defineProperty(e,"__esModule",{value:!0}),e.Page=void 0;const t=Hi,r=N2,n=Xc(),i=D2(),a=Xc();e.Page=t.types.model("Page",{id:t.types.identifier,children:t.types.array(t.types.late(()=>n.ElementTypes)),width:t.types.optional(t.types.union(t.types.number,t.types.literal("auto")),"auto"),height:t.types.optional(t.types.union(t.types.number,t.types.literal("auto")),"auto"),background:"white",bleed:0,custom:t.types.frozen(),duration:5e3,_exporting:!1,_rendering:!1}).postProcessSnapshot(o=>{const l=Object.assign({},o),u={};for(var f in l)f[0]!=="_"&&(u[f]=o[f]);return u}).views(o=>({get store(){return(0,t.getParentOfType)(o,i.Store)},get startTime(){let l=0;for(const u of o.store.pages){if(u.id===o.id)return l;l+=u.duration}return l}})).views(o=>({get computedWidth(){return o.width==="auto"?o.store.width:o.width},get computedHeight(){return o.height==="auto"?o.store.height:o.height}})).actions(o=>({toJSON:()=>JSON.parse(JSON.stringify((0,t.getSnapshot)(o))),_forEachElementUp(l,u){const f=l.map(p=>({id:p,index:o.children.findIndex(S=>S.id===p)}));f.sort((p,S)=>S.index-p.index);for(const{index:p}of f){if(p==-1)continue;const S=p<o.children.length-1&&o.children[p+1],w=l.indexOf(S==null?void 0:S.id)>=0;p===o.children.length-1||w||u(p)}},_forEachElementDown(l,u){const f=l.map(p=>({id:p,index:o.children.findIndex(S=>S.id===p)}));f.sort((p,S)=>p.index-S.index);for(const{index:p}of f){if(p==-1)continue;const S=p>0&&o.children[p-1],w=l.indexOf(S==null?void 0:S.id)>=0;p===0||w||u(p)}return!1}})).actions(o=>({clone(l={}){const u=o.toJSON();u.children.forEach(w=>{w.id=(0,r.nanoid)(10),(0,a.forEveryChild)(w,g=>{g.id=(0,r.nanoid)(10)})});const f=Object.assign(Object.assign(Object.assign({},u),{id:(0,r.nanoid)(10)}),l),p=o.store.addPage(f),S=o.store.pages.indexOf(o);p.setZIndex(S+1),p.select()},setZIndex(l){o.store.setPageZIndex(o.id,l)},set(l){Object.assign(o,l)},select(){o.store.selectPage(o.id)},addElement(l,{skipSelect:u=!1}={}){const f=a.TYPES_MAP[l.type];if(!f)return void console.error("Can not find model with type "+l.type);l.children&&l.children.forEach(S=>{S.id=(0,r.nanoid)(10)});const p=f.create(Object.assign({id:(0,r.nanoid)(10)},l));return o.children.push(p),p.selectable&&!u&&o.store.selectElements([p.id]),p},canMoveElementsUp(l){let u=!1;return o._forEachElementUp(l,()=>{u=u||!0}),u},moveElementsUp(l){o._forEachElementUp(l,u=>{const f=o.children[u];(0,t.detach)(f),o.children.splice(u+1,0,f)})},canMoveElementsTop(l){return this.canMoveElementsUp(l)},moveElementsTop(l){const u=[],f=[];o.children.forEach(p=>{l.indexOf(p.id)>=0?u.push(p):f.push(p)}),o.children.replace(f.concat(u))},canMoveElementsDown(l){let u=!1;return o._forEachElementDown(l,()=>{u=u||!0}),u},moveElementsDown(l){o._forEachElementDown(l,u=>{const f=o.children[u];(0,t.detach)(f),o.children.splice(u-1,0,f)})},canMoveElementsBottom(l){return this.canMoveElementsDown(l)},moveElementsBottom(l){const u=[],f=[];o.children.forEach(p=>{l.indexOf(p.id)>=0?u.push(p):f.push(p)}),o.children.replace(u.concat(f))},setElementZIndex(l,u){const f=o.children.find(p=>p.id===l);f&&((0,t.detach)(f),o.children.remove(f),o.children.splice(u,0,f))},setSize({width:l,height:u,useMagic:f,softChange:p}){if(f){const S=l/o.computedWidth,w=u/o.computedHeight,g=Math.min(S,w),E=Math.max(0,(l-o.computedWidth*g)/2),m=Math.max(0,(u-o.computedHeight*g)/2);(0,a.forEveryChild)(o,v=>{v.type!=="group"&&(v.type==="image"&&v.x<1&&v.y<1&&v.width>=o.computedWidth-2&&v.height>=o.computedHeight-2?v.set({x:v.x*g,y:v.y*g,width:v.width*S,height:v.height*w,cropX:0,cropY:0,cropWidth:1,cropHeight:1}):(v.set({x:E+v.x*g,y:m+v.y*g,width:v.width*g,height:v.height*g}),v.type==="text"?v.set({fontSize:v.fontSize*g}):v.type==="figure"&&v.set({strokeWidth:v.strokeWidth*g})))})}p||(o.width=l),p||(o.height=u)}})).actions(o=>({moveElementUp(l){console.warn("page.moveElementUp(id) is deprecated. Please use page.moveElementsUp([id1, id2]) instead."),o.moveElementsUp([l])},moveElementDown(l){console.warn("page.moveElementDown(id) is deprecated. Please use page.moveElementsDown([id1, id2]) instead."),o.moveElementsDown([l])},moveElementTop(l){console.warn("page.moveElementTop(id) is deprecated. Please use page.moveElementsTop([id1, id2]) instead."),o.moveElementsTop([l])},moveElementBottom(l){console.warn("page.moveElementBottom(id) is deprecated. Please use page.moveElementsBottom([id1, id2]) instead."),o.moveElementsBottom([l])},play(){o.store.play({startTime:o.startTime,endTime:o.startTime+o.duration})}}))}(ov)),ov}var R_;function D2(){return R_||(R_=1,function(e){var t=Se&&Se.__createBinding||(Object.create?function(_,A,C,k){k===void 0&&(k=C);var R=Object.getOwnPropertyDescriptor(A,C);R&&!("get"in R?!A.__esModule:R.writable||R.configurable)||(R={enumerable:!0,get:function(){return A[C]}}),Object.defineProperty(_,k,R)}:function(_,A,C,k){k===void 0&&(k=C),_[k]=A[C]}),r=Se&&Se.__setModuleDefault||(Object.create?function(_,A){Object.defineProperty(_,"default",{enumerable:!0,value:A})}:function(_,A){_.default=A}),n=Se&&Se.__importStar||function(_){if(_&&_.__esModule)return _;var A={};if(_!=null)for(var C in _)C!=="default"&&Object.prototype.hasOwnProperty.call(_,C)&&t(A,_,C);return r(A,_),A},i=Se&&Se.__rest||function(_,A){var C={};for(var k in _)Object.prototype.hasOwnProperty.call(_,k)&&A.indexOf(k)<0&&(C[k]=_[k]);if(_!=null&&typeof Object.getOwnPropertySymbols=="function"){var R=0;for(k=Object.getOwnPropertySymbols(_);R<k.length;R++)A.indexOf(k[R])<0&&Object.prototype.propertyIsEnumerable.call(_,k[R])&&(C[k[R]]=_[k[R]])}return C},a=Se&&Se.__importDefault||function(_){return _&&_.__esModule?_:{default:_}};Object.defineProperty(e,"__esModule",{value:!0}),e.createStore=e.Store=e.Font=void 0;const o=Hi,l=kS,u=N2,f=a(Ui),p=RS,S=LS,w=MS,g=M2(),E=n(_f),m=Ia,v=m0,y=I2,h=NS,d=IS,b=DS,O=FS(),x=Xc();function P({key:_,showCredit:A}={key:"",showCredit:!1}){const C=e.Store.create();return(0,g.validateKey)(_,A),C}(0,o.setLivelinessChecking)("ignore"),e.Font=o.types.model("Font",{fontFamily:o.types.string,url:o.types.optional(o.types.string,""),styles:o.types.frozen()}).preProcessSnapshot(_=>Object.assign(Object.assign({},_),{fontFamily:_.fontFamily||_.name})),e.Store=o.types.model("Store",{role:"",pages:o.types.array(O.Page),fonts:o.types.array(e.Font),width:1080,height:1080,currentTime:0,isPlaying:!1,scale:1,scaleToFit:1,unit:"px",dpi:72,bleedVisible:!1,rulesVisible:!1,openedSidePanel:"",custom:o.types.frozen(),selectedElementsIds:o.types.array(o.types.string),animatedElementsIds:o.types.array(o.types.string),history:o.types.optional(l.UndoManager,{targetPath:"../pages"}),_elementsPixelRatio:2,_activePageId:""}).views(_=>({get _bleedVisible(){return console.warn("store._bleedVisible is deprecated. Please use store.bleedVisible instead."),_.bleedVisible},get selectedElements(){return _.selectedElementsIds.map(A=>{for(const C of _.pages)for(const k of C.children)if(k.id===A)return k}).filter(A=>!!A)},get children(){return _.pages},get selectedShapes(){const A=[];return(0,x.forEveryChild)({children:_.selectedElements},C=>{C.type!=="group"&&A.push(C)}),A},get activePage(){return _.pages.slice().find(A=>A.id===_._activePageId)||(_.pages.length?_.pages[0]:null)},get duration(){let A=0;return _.pages.forEach(C=>{A+=C.duration}),A},get _hasCroppedImages(){return _.find(A=>A.type==="image"&&A._cropModeEnabled)},find(A){let C;return(0,x.forEveryChild)({children:_.pages},k=>{if(!C&&A(k))return C=k,!0}),C},getElementById:A=>_.find(C=>C.id===A)})).actions(_=>{let A=0,C=null;return{afterCreate(){_.history.canUndo},setCurrentTime(k){_.currentTime=k},play({animatedElementsIds:k=[],startTime:R=0,currentTime:D=0,endTime:U=_.duration}={}){D&&(console.warn("currentTime property of store.play() is deprecated. Please use startTime instead."),R=D),_.animatedElementsIds=(0,o.cast)(k),_.currentTime=R,_.isPlaying=!0,A=Date.now(),C=U,requestAnimationFrame(_.seek)},checkActivePage(){let k=0;for(const R of _.pages){if(_.currentTime>=R.startTime&&_.currentTime<R.startTime+R.duration){_.selectPage(R.id);break}k+=R.duration}},seek(){if(!_.isPlaying)return;const k=Date.now(),R=k-A;A=k,_.currentTime+=R,_.checkActivePage();const D=C||_.duration;_.isPlaying&&_.currentTime<D?requestAnimationFrame(_.seek):_.stop()},stop(){_.isPlaying=!1,_.currentTime=0,_.animatedElementsIds=(0,o.cast)([]),_.checkActivePage()}}}).actions(_=>({set(A){Object.assign(_,A)},setUnit({unit:A,dpi:C}){_.unit=A||_.unit,_.dpi=C||_.dpi},setRole(A){_.role=A},addPage(A){const C=O.Page.create(Object.assign({id:(0,u.nanoid)(10)},A));return _.pages.push(C),_._activePageId=C.id,C},selectPage(A){_._activePageId=A},selectElements(A){const C=A.map(k=>_.getElementById(k)).sort((k,R)=>k.page.children.indexOf(k)-k.page.children.indexOf(R)).filter(k=>!!k).map(k=>k.id);_.selectedElementsIds=(0,o.cast)(C)},toggleBleed(A){_.bleedVisible=A??!_.bleedVisible},toggleRulers(A){_.rulesVisible=A??!_.rulesVisible},openSidePanel(A){_.openedSidePanel=A},setScale(A){_.scale=A},_setScaleToFit(A){_.scaleToFit=A},setElementsPixelRatio(A){_._elementsPixelRatio=A},setSize(A,C,k){_.pages.forEach(R=>{R.setSize({width:A,height:C,useMagic:k,softChange:!0})}),_.width=A,_.height=C},setPageZIndex(A,C){const k=_.pages.find(R=>R.id===A);k&&((0,o.detach)(k),_.pages.remove(k),_.pages.splice(C,0,k))},deletePages(A){const C=_.pages.indexOf(_.activePage);A.forEach(D=>{const U=_.pages.find(Y=>Y.id===D);(0,o.destroy)(U)});const k=Math.min(_.pages.length-1,C),R=_.pages[k];R&&(_._activePageId=R.id),_.selectedElementsIds=(0,o.cast)(_.selectedElementsIds.filter(D=>_.getElementById(D)))},groupElements(A){const C=A.map(D=>_.getElementById(D));C.forEach(D=>{D&&(0,o.detach)(D)});const k=_.activePage,R={id:(0,u.nanoid)(10),children:C,type:"group"};return k.children.push(R),_.selectedElementsIds=(0,o.cast)([R.id]),R},ungroupElements(A){const C=A.map(R=>_.getElementById(R)),k=[];C.forEach(R=>{if(R&&R.type==="group"){const D=R.page,U=D.children.indexOf(R);R.children.forEach(Y=>{k.push(Y.id)}),R.children.forEach(Y=>{(0,o.detach)(Y),D.children.push(Y)}),D.children.splice(U,1)}}),_.selectedElementsIds=(0,o.cast)(k)},deleteElements(A){A.forEach(C=>{_.pages.forEach(k=>{const R=k.children.find(D=>D.id===C);R&&(0,o.destroy)(R)})}),_.selectedElementsIds=(0,o.cast)(_.selectedElementsIds.filter(C=>_.getElementById(C)))},on(A,C){if(A==="change"){let k=_.toJSON();return(0,o.onSnapshot)(_,R=>{const D=_.toJSON();!(0,y.deepEqual)(k,D)&&(k=D,C(D))})}},async _toCanvas({pixelRatio:A,ignoreBackground:C,pageId:k,mimeType:R,includeBleed:D}={}){var U;const Y=A||1;k=k||((U=_.pages[0])===null||U===void 0?void 0:U.id);const j=_.pages.find(ne=>ne.id===k);if(!j)throw new Error(`No page for export with id ${k}`);j==null||j.set({_exporting:!0});const G=await(0,h.waitTillAvailable)(()=>f.default.stages.find(ne=>ne.getAttr("pageId")===k));if(!G)throw new Error(`Export is failed. Can not find stage for page ${k}. Looks like <Workspace /> component is not mounted, but it is required in order to process the export.`);const z=!!G.findOne(".page-container"),q=_._elementsPixelRatio;Y>_._elementsPixelRatio&&_.setElementsPixelRatio(Y),await _.waitLoading();const L=G.findOne(".page-container");if(!L)throw _.setElementsPixelRatio(q),new Error(`Export is failed. Can't find page container. ${z}`);G.find("Transformer").forEach(ne=>ne.visible(!1)),L.find(".page-background").forEach(ne=>ne.shadowEnabled(!1)),L.find(".page-background").forEach(ne=>ne.strokeEnabled(!1)),L.find(".highlighter").forEach(ne=>ne.visible(!1));const I=L.findOne(".page-background-group"),B=I.clip();I.clip({x:null,y:null,width:null,height:null});const M=L.findOne(".elements-container"),$=M.clip();M.clip({x:null,y:null,width:null,height:null});const K=L.find(ne=>ne.getAttr("hideInExport"));K.forEach(ne=>{ne.setAttr("oldVisible",ne.visible()),ne.hide()});const V=L.find(ne=>!ne.visible()&&ne.getAttr("editModeEnabled"));V.forEach(ne=>{ne.setAttr("oldVisible",ne.visible()),ne.show()}),C&&L.find(".page-background").forEach(ne=>ne.hide());const H=D?j.bleed:0;let X=H;!_.bleedVisible&&D||(_.bleedVisible||D?_.bleedVisible&&D?X=0:_.bleedVisible&&!D&&(X=-j.bleed):X=0);const Z=document.createElement("canvas");Z.width=Math.round((j.computedWidth+2*H)*Y),Z.height=Math.round((j.computedHeight+2*H)*Y);const J=Z.getContext("2d");R==="image/jpeg"&&(J.fillStyle="white",J.fillRect(0,0,Z.width,Z.height));const ee=L.scale();L.scale({x:1,y:1});const re=L.toCanvas({x:L.x()-X,y:L.y()-X,width:j.computedWidth+2*H,height:j.computedHeight+2*H,pixelRatio:Y});return L.scale(ee),J.drawImage(re,0,0,Z.width,Z.height),f.default.Util.releaseCanvas(re),C&&L.find(".page-background").forEach(ne=>ne.show()),K.forEach(ne=>{ne.visible(ne.getAttr("oldVisible"))}),V.forEach(ne=>{ne.visible(ne.getAttr("oldVisible"))}),L.find(".page-background").forEach(ne=>ne.shadowEnabled(!0)),L.find(".page-background").forEach(ne=>ne.strokeEnabled(!0)),G.find("Transformer").forEach(ne=>ne.visible(!0)),L.find(".highlighter").forEach(ne=>ne.visible(!0)),I.clip(B),M.clip($),_.setElementsPixelRatio(q),j==null||j.set({_exporting:!1}),Z},async toDataURL({pixelRatio:A,ignoreBackground:C,pageId:k,mimeType:R,includeBleed:D,quality:U}={}){const Y=await _._toCanvas({pixelRatio:A,ignoreBackground:C,pageId:k,mimeType:R,includeBleed:D}),j=Y.toDataURL(R,U);return f.default.Util.releaseCanvas(Y),j},async toBlob({pixelRatio:A,ignoreBackground:C,pageId:k,mimeType:R,includeBleed:D,quality:U}={}){const Y=await _._toCanvas({pixelRatio:A,ignoreBackground:C,pageId:k,mimeType:R,includeBleed:D}),j=new Promise(G=>{Y.toBlob(G,R,U)});return f.default.Util.releaseCanvas(Y),j},async saveAsImage(A={}){var{fileName:C}=A,k=i(A,["fileName"]);const R=k.mimeType||"image/png",D=R.split("/")[1];(0,p.downloadFile)(await _.toDataURL(k),C||"polotno."+D,R)},async _toPDF(A){const C=A.dpi||_.dpi,k=A.parallel||1,R=A.unit||(_.unit==="px"?"mm":_.unit),D=A.pixelRatio||1,U=A.pageIds||_.pages.map(K=>K.id),Y=_.pages.filter(K=>U.includes(K.id)),j=await(0,S.getJsPDF)(),G=K=>(0,v.pxToUnit)({px:K,unit:R,dpi:C}),z=G(A.cropMarkSize||0),q=Y[0]||{},L=A.includeBleed?q.bleed:0,I=G(q.computedWidth+2*L)+2*z,B=G(q.computedHeight+2*L)+2*z;var M=new j({unit:R,orientation:I>B?"landscape":"portrait",format:[I,B],compress:!0,putOnlyUsedFonts:!0});M.deletePage(1);const $=((K,V)=>{for(var H=[],X=0;X<K.length;X+=V)H.push(K.slice(X,X+V));return H})(Y,k);for(const K of $){const V=K.map(async H=>{const X=A.includeBleed?H.bleed:0,Z=G(H.computedWidth+2*X)+2*z,J=G(H.computedHeight+2*X)+2*z;let ee=0,re=D;for(;ee<10;){ee+=1,ee===2&&console.error("Polotno can not export PDF with current settings. Quality is automatically reduced.");const ne=await _.toDataURL(Object.assign(Object.assign({},A),{pageId:H.id,pixelRatio:re}));if(ne.length>20)return{url:ne,width:Z,height:J};re*=.8}});(await Promise.all(V)).forEach(({url:H,width:X,height:Z})=>{M.addPage([X,Z],X>Z?"landscape":"portrait"),z&&(M.setLineWidth(G(1)),M.line(2*z,0,2*z,z),M.line(0,2*z,z,2*z),M.line(X-2*z,0,X-2*z,z),M.line(X,2*z,X-z,2*z),M.line(0,Z-2*z,z,Z-2*z),M.line(2*z,Z,2*z,Z-z),M.line(X,Z-2*z,X-z,Z-2*z),M.line(X-2*z,Z,X-2*z,Z-z)),M.addImage(H,z,z,X-2*z,Z-2*z,void 0,"FAST")})}return M},toPDFDataURL:async A=>(await _._toPDF(Object.assign({mimeType:"image/jpeg"},A))).output("datauristring"),async toGIFDataURL(A={}){const C=A.pixelRatio||1,k=await(0,w.createGIF)({width:_.width*C,height:_.height*C}),R=1e3/(A.fps||10),D=_.duration/R;for(let U=0;U<D-1;U++){const Y=U*R||1;_.setCurrentTime(Y);let j=0,G="";for(const q of _.pages)if(j+=q.duration,q.set({_rendering:j>Y}),j>Y){G=q.id;break}const z=await _._toCanvas({pixelRatio:C,pageId:G});k.addFrame(z.getContext("2d"),{delay:R,copy:!0})}for(const U of _.pages)U.set({_rendering:!1});return _.stop(),k.render(),new Promise(U=>{k.on("finished",function(Y){(function(j,G){var z=new FileReader;z.onload=function(q){G(q.target.result)},z.readAsDataURL(j)})(Y,U)})})},async saveAsGIF(A={}){var{fileName:C}=A,k=i(A,["fileName"]);const R=await _.toGIFDataURL(k);(0,p.downloadFile)(R,C||"polotno.gif")},async toHTML({elementHook:A}={elementHook:void 0}){const C=_.toJSON();return(0,d.jsonToHTML)({json:C,elementHook:A})},async saveAsHTML({fileName:A}={}){const C=await _.toHTML(),k="data:text/html;base64,"+window.btoa(unescape(encodeURIComponent(C)));(0,p.downloadFile)(k,A||"polotno.html")},async toSVG(){const A=_.toJSON();return(0,b.jsonToSVG)({json:A})},async saveAsSVG({fileName:A}={}){const C=await _.toSVG(),k="data:text/svg;base64,"+window.btoa(unescape(encodeURIComponent(C)));(0,p.downloadFile)(k,A||"polotno.svg")},async saveAsPDF(A={}){var{fileName:C}=A,k=i(A,["fileName"]);(await _._toPDF(Object.assign({mimeType:"image/jpeg"},k))).save(C||"polotno.pdf")},async waitLoading(){await new Promise(A=>setTimeout(A,50)),await(0,m.whenLoaded)()},toJSON:()=>({width:_.width,height:_.height,fonts:(0,o.getSnapshot)(_.fonts),pages:(0,o.getSnapshot)(_.pages),unit:_.unit,dpi:_.dpi,custom:_.custom}),loadJSON(A,C=!1){var k;const R=Object.assign({},A),D=_.pages.indexOf(_.activePage);let U=(k=R.pages[D]||R.pages[0])===null||k===void 0?void 0:k.id;R._activePageId=U;const Y=Object.assign({},(0,o.getSnapshot)(_));Object.assign(Y,R),Y.history=C?_.history.toJSON():{history:[],undoIdx:-1},(0,o.applySnapshot)(_,Y)},clear({keepHistory:A=!1}={}){const C=_.pages.map(k=>k.id);_.deletePages(C),A||_.history.clear()},addFont(A){_.removeFont(A.fontFamily),_.fonts.push(A),_.loadFont(A.fontFamily)},removeFont(A){_.fonts.filter(C=>C.fontFamily===A).forEach(C=>(0,o.destroy)(C))},async loadFont(A){const C=_.fonts.find(k=>k.fontFamily===A)||E.globalFonts.find(k=>k.fontFamily===A);C?E.injectCustomFont(C):E.injectGoogleFont(A),await E.loadFont(A)},validate:A=>e.Store.validate(A,[{path:"",type:e.Store}]).map(C=>({path:"store"+C.context.map(k=>k.path).join("."),message:C.message}))})),e.createStore=P,e.default=P}(av)),av}var L_;function jS(){return L_||(L_=1,function(e){Object.defineProperty(e,"__esModule",{value:!0}),e.Node=void 0;const t=Hi,r=N2,n=D2(),i=FS(),a=Xc();e.Node=t.types.model("Node",{id:t.types.identifier,type:"none",name:"",opacity:1,custom:t.types.frozen(),visible:!0,selectable:!0,removable:!0,alwaysOnTop:!1,showInExport:!0}).preProcessSnapshot(o=>{for(var l in o)o[l]===null&&(o[l]=void 0);return o}).postProcessSnapshot(o=>{const l=Object.assign({},o),u={};for(var f in l)f[0]!=="_"&&(u[f]=o[f]);return u}).views(o=>({get locked(){return!(o.draggable||o.contentEditable||o.styleEditable||o.resizable)},get page(){return(0,t.getParentOfType)(o,i.Page)},get store(){return(0,t.getParentOfType)(o,n.Store)},get top(){let l=o;for(;;){if(!(0,t.hasParentOfType)(l,a.GroupElement))return l;l=(0,t.getParentOfType)(l,a.GroupElement)}},get parent(){return(0,t.hasParentOfType)(o,a.GroupElement)?(0,t.getParentOfType)(o,a.GroupElement):(0,t.hasParentOfType)(o,i.Page)?(0,t.getParentOfType)(o,i.Page):(0,t.hasParentOfType)(o,n.Store)?(0,t.getParentOfType)(o,n.Store):null}})).actions(o=>({toJSON:()=>Object.assign({},(0,t.getSnapshot)(o))})).actions(o=>({clone(l={},{skipSelect:u=!1}={}){const f=JSON.parse(JSON.stringify(o.toJSON()));return l.id=l.id||(0,r.nanoid)(10),(0,a.forEveryChild)(f,p=>{p.id=(0,r.nanoid)(10)}),Object.assign(f,l),o.page.addElement(f,{skipSelect:u})},set(l){Object.assign(o,l)},moveUp(){o.page.moveElementsUp([o.id])},moveTop(){o.page.moveElementsTop([o.id])},moveDown(){o.page.moveElementsDown([o.id])},moveBottom(){o.page.moveElementsBottom([o.id])},beforeDestroy(){}}))}(iv)),iv}var lv={},zS={};(function(e){Object.defineProperty(e,"__esModule",{value:!0}),e.registerAnimation=e.animate=e.animations=void 0;const t={right:{from:{x:-200},to:{x:0}},left:{from:{x:200},to:{x:0}},up:{from:{y:200},to:{y:0}},down:{from:{y:-200},to:{y:0}},"bottom-right":{from:{x:-200,y:-200},to:{x:0,y:0}},"bottom-left":{from:{x:200,y:-200},to:{x:0,y:0}},"top-right":{from:{x:-200,y:200},to:{x:0,y:0}},"top-left":{from:{x:200,y:200},to:{x:0,y:0}}};e.animations={fade:({dTime:i,element:a,animation:o})=>{const l=i/o.duration;return o.type==="enter"?{opacity:l*a.opacity}:{opacity:(1-l)*a.opacity}},move:({dTime:i,element:a,animation:o})=>{const l=t[o.data.direction]||t.right,u={};for(var f in l.from){let p=l.from[f],S=l.to[f];o.type==="exit"&&(p=l.to[f],S=-l.from[f]);const w=a[f]+p,g=a[f]+S-w;u[f]=w+i/o.duration*g}return u},zoom:({dTime:i,element:a,animation:o})=>{const l={},u={x:a.x+a.width/3,y:a.y+a.height/3,width:a.width/3,height:a.height/3,fontSize:a.fontSize/3},f={x:a.x,y:a.y,width:a.width,height:a.height,fontSize:a.fontSize};for(var p in u){let S=u[p],w=f[p];if(o.type==="exit"){const E=S;S=w,w=E}const g=w-S;l[p]=S+i/o.duration*g}return l}};const r=({element:i,dTime:a,animation:o})=>{const l=e.animations[o.name];return l?l({element:i,dTime:a,animation:o}):(console.error("Can not find animation type: "+o.name),{})};e.animate=r;const n=(i,a)=>{};e.registerAnimation=n})(zS);var M_;function xu(){return M_||(M_=1,function(e){Object.defineProperty(e,"__esModule",{value:!0}),e.Shape=e.Animation=void 0;const t=Hi,r=zS,n=jS();e.Animation=t.types.model("Animation",{delay:0,duration:500,enabled:!0,type:t.types.enumeration("Type",["enter","exit"]),name:"none",data:t.types.frozen({})}),e.Shape=n.Node.named("Shape").props({x:0,y:0,width:100,height:100,rotation:0,opacity:1,animations:t.types.array(e.Animation),blurEnabled:!1,blurRadius:10,brightnessEnabled:!1,brightness:0,sepiaEnabled:!1,grayscaleEnabled:!1,shadowEnabled:!1,shadowBlur:5,shadowOffsetX:0,shadowOffsetY:0,shadowColor:"black",shadowOpacity:1,visible:!0,draggable:!0,resizable:!0,selectable:!0,contentEditable:!0,styleEditable:!0,alwaysOnTop:!1,showInExport:!0}).preProcessSnapshot(i=>{const a=Object.assign(Object.assign({},i),{x:i.x||0,y:i.y||0});return"width"in i&&(a.width=a.width||1),"height"in i&&(a.height=a.height||1),i.locked&&(a.draggable=!1,a.contentEditable=!1,a.styleEditable=!1,a.resizable=!1),a}).views(i=>({get a(){const{currentTime:a}=i.store,o={x:i.x,y:i.y,width:i.width,height:i.height,rotation:i.rotation,opacity:i.opacity,color:i.color,fontSize:i.fontSize};if(a===0)return o;const l=a-i.page.startTime;if(l>i.page.duration||l<0)return o;const u=i.store.animatedElementsIds;if(u.length&&!u.includes(i.id))return o;const f=i.animations.find(S=>S.type==="enter");if(f!=null&&f.enabled&&l<f.delay&&(o.opacity=0),f!=null&&f.enabled&&l>=f.delay&&l<=f.delay+f.duration){const S=l-f.delay,w=(0,r.animate)({element:i,animation:f,dTime:S});Object.assign(o,w)}const p=i.animations.find(S=>S.type==="exit");if(p!=null&&p.enabled&&l>=i.page.duration-p.duration){const S=l-(i.page.duration-p.duration),w=(0,r.animate)({element:i,animation:p,dTime:S});Object.assign(o,w)}return o},animated:a=>i.a[a]})).actions(i=>({setAnimation(a,o){const l=i.animations.find(u=>u.type===a);l?Object.assign(l,o):i.animations.push(Object.assign({type:a},o))}}))}(lv)),lv}var sv={},N_;function aF(){return N_||(N_=1,function(e){Object.defineProperty(e,"__esModule",{value:!0}),e.TextElement=void 0;const t=Hi,r=xu();e.TextElement=r.Shape.named("Text").props({type:"text",text:"",placeholder:"",fontSize:14,fontFamily:"Roboto",fontStyle:"normal",fontWeight:"normal",textDecoration:"",fill:"black",align:"center",width:100,height:0,verticalAlign:"top",strokeWidth:0,stroke:"black",lineHeight:t.types.optional(t.types.union(t.types.number,t.types.string),1.2),letterSpacing:0,_editModeEnabled:!1,backgroundEnabled:!1,backgroundColor:"#7ED321",backgroundOpacity:1,backgroundCornerRadius:.5,backgroundPadding:.5}).preProcessSnapshot(n=>Object.assign({},n)).actions(n=>({toggleEditMode(i){n._editModeEnabled=i??!n._editModeEnabled,n._editModeEnabled?n.store.history.startTransaction():n.store.history.endTransaction()}}))}(sv)),sv}var uv={},I_;function BS(){return I_||(I_=1,function(e){Object.defineProperty(e,"__esModule",{value:!0}),e.ImageElement=void 0;const t=xu();e.ImageElement=t.Shape.named("Image").props({type:"image",width:100,height:100,src:"",cropX:0,cropY:0,cropWidth:1,cropHeight:1,cornerRadius:0,flipX:!1,flipY:!1,clipSrc:"",borderColor:"black",borderSize:0,keepRatio:!1,_cropModeEnabled:!1}).actions(r=>({toggleCropMode(n){r._cropModeEnabled=n??!r._cropModeEnabled,r._cropModeEnabled?r.store.history.startTransaction():r.store.history.endTransaction()},beforeDestroy(){r._cropModeEnabled&&r.store.history.endTransaction()}}))}(uv)),uv}var cv={},D_;function oF(){return D_||(D_=1,function(e){Object.defineProperty(e,"__esModule",{value:!0}),e.VideoElement=void 0;const t=BS();e.VideoElement=t.ImageElement.named("Video").props({type:"video",duration:0,startTime:0,endTime:1})}(cv)),cv}var fv={},F_;function lF(){return F_||(F_=1,function(e){Object.defineProperty(e,"__esModule",{value:!0}),e.LineElement=void 0;const t=Hi,r=xu();e.LineElement=r.Shape.named("Line").props({type:"line",width:400,height:10,color:"black",dash:t.types.array(t.types.number),startHead:"",endHead:""}).actions(n=>({}))}(fv)),fv}var dv={},j_;function sF(){return j_||(j_=1,function(e){Object.defineProperty(e,"__esModule",{value:!0}),e.SVGElement=void 0;const t=Hi,r=xu();e.SVGElement=r.Shape.named("SVG").props({type:"svg",src:"",maskSrc:"",cropX:0,cropY:0,cropWidth:1,cropHeight:1,keepRatio:!0,flipX:!1,flipY:!1,width:100,height:100,borderColor:"black",borderSize:0,cornerRadius:0,colorsReplace:t.types.map(t.types.string)}).preProcessSnapshot(n=>Object.assign(Object.assign({},n),{src:n.src||n.svgSource})).actions(n=>({replaceColor(i,a){n.colorsReplace.set(i,a)}}))}(dv)),dv}var hv={},z_;function uF(){return z_||(z_=1,function(e){Object.defineProperty(e,"__esModule",{value:!0}),e.FigureElement=void 0;const t=Hi,r=xu();e.FigureElement=r.Shape.named("Figure").props({type:"figure",subType:"rect",fill:"rgb(0, 161, 255)",dash:t.types.array(t.types.number),strokeWidth:0,stroke:"rgba(98, 197, 255, 1)",cornerRadius:0})}(hv)),hv}var B_;function Xc(){return B_||(B_=1,function(e){var t=Se&&Se.__rest||function(m,v){var y={};for(var h in m)Object.prototype.hasOwnProperty.call(m,h)&&v.indexOf(h)<0&&(y[h]=m[h]);if(m!=null&&typeof Object.getOwnPropertySymbols=="function"){var d=0;for(h=Object.getOwnPropertySymbols(m);d<h.length;d++)v.indexOf(h[d])<0&&Object.prototype.propertyIsEnumerable.call(m,h[d])&&(y[h[d]]=m[h[d]])}return y};Object.defineProperty(e,"__esModule",{value:!0}),e.registerShapeModel=e.TYPES_MAP=e.GroupElement=e.ElementTypes=e.forEveryChild=void 0;const r=Hi,n=jS(),i=xu(),a=aF(),o=BS(),l=oF(),u=lF(),f=sF(),p=uF(),S=(m,v)=>{if(m.children)for(const y of m.children){if(v(y)===!0)break;(0,e.forEveryChild)(y,v)}};e.forEveryChild=S;const w=[...new Array(20)].map((m,v)=>r.types.late(()=>g[v]));e.ElementTypes=r.types.union({dispatcher:m=>{const v=e.TYPES_MAP[m.type];if(!v)throw new Error(`Unknown element type: "${m.type}"`);return v}},f.SVGElement,a.TextElement,o.ImageElement,u.LineElement,l.VideoElement,p.FigureElement,r.types.late(()=>e.GroupElement),...w),e.GroupElement=n.Node.named("Group").props({type:"group",children:r.types.array(e.ElementTypes)}).views(m=>({get draggable(){let v=!0;return(0,e.forEveryChild)(m,y=>{y.draggable||(v=!1)}),v},get resizable(){let v=!0;return(0,e.forEveryChild)(m,y=>{y.resizable||(v=!1)}),v},get contentEditable(){let v=!0;return(0,e.forEveryChild)(m,y=>{y.contentEditable||(v=!1)}),v},get styleEditable(){let v=!0;return(0,e.forEveryChild)(m,y=>{y.styleEditable||(v=!1)}),v},get locked(){let v=!0;return(0,e.forEveryChild)(m,y=>{y.locked||(v=!1)}),v}})).actions(m=>({set(v){var{draggable:y,contentEditable:h,styleEditable:d,resizable:b}=v,O=t(v,["draggable","contentEditable","styleEditable","resizable"]);y!==void 0&&(0,e.forEveryChild)(m,x=>{x.set({draggable:y})}),h!==void 0&&(0,e.forEveryChild)(m,x=>{x.set({contentEditable:h})}),d!==void 0&&(0,e.forEveryChild)(m,x=>{x.set({styleEditable:d})}),b!==void 0&&(0,e.forEveryChild)(m,x=>{x.set({resizable:b})}),Object.assign(m,O)}}));const g=[];function E(m,v){const y=m.type;if(!y)throw new Error('You must pass "type" attribute to custom model.');let h=i.Shape.named(y).props(m);v&&(h=v(h)),e.TYPES_MAP[y]=h,g.push(h)}e.TYPES_MAP={svg:f.SVGElement,text:a.TextElement,image:o.ImageElement,group:e.GroupElement,line:u.LineElement,video:l.VideoElement,figure:p.FigureElement},e.registerShapeModel=E}(nv)),nv}(function(e){Object.defineProperty(e,"__esModule",{value:!0}),e.handleHotkey=void 0;const t=Xc();let r=[],n="";const i="polotno_clipboard",a=u=>{r=JSON.parse(JSON.stringify(u));try{localStorage.setItem(i,JSON.stringify(u))}catch{}},o=()=>{try{const u=localStorage.getItem(i);if(u)return JSON.parse(u)}catch{}return r};function l(u,f){var p,S,w,g,E,m,v,y;if(((p=document.activeElement)===null||p===void 0?void 0:p.tagName)==="INPUT"||((S=document.activeElement)===null||S===void 0?void 0:S.tagName)==="TEXTAREA"||((w=document.activeElement)===null||w===void 0?void 0:w.contentEditable)==="true")return;const h=f.selectedElements.filter(x=>x.removable),d=h.map(x=>x.id);u.keyCode!==46&&u.keyCode!==8||f.deleteElements(d);const b=u.ctrlKey||u.metaKey,O=u.shiftKey;if(b&&!O&&u.code==="KeyZ"&&(u.preventDefault(),f.history.undo()),b&&O&&u.code==="KeyZ"&&(u.preventDefault(),f.history.redo()),b&&u.code==="KeyA"){u.preventDefault();const x=(g=f.activePage)===null||g===void 0?void 0:g.children.filter(_=>_.selectable),P=(x==null?void 0:x.map(_=>_.id))||[];f.selectElements(P)}if(b&&u.code==="KeyC"&&(u.preventDefault(),n=(E=f.activePage)===null||E===void 0?void 0:E.id,a(f.selectedElements.map(x=>x.toJSON()))),b&&u.code==="KeyX"&&(u.preventDefault(),n=(m=f.activePage)===null||m===void 0?void 0:m.id,a(f.selectedElements.map(x=>x.toJSON())),f.deleteElements(h)),b&&u.code==="KeyV"){u.preventDefault();let x=0;n===((v=f.activePage)===null||v===void 0?void 0:v.id)&&(x=f.width/20),n=(y=f.activePage)===null||y===void 0?void 0:y.id,f.history.transaction(()=>{const P=[],_=o();(0,t.forEveryChild)({children:_},A=>{delete A.id,A.type!=="group"&&(A.x+=x,A.y+=x)}),console.log(_),_.forEach(A=>{var C;const k=(C=f.activePage)===null||C===void 0?void 0:C.addElement(A);k&&P.push(k.id)}),a(_),f.selectElements(P)})}u.code==="ArrowDown"&&(u.preventDefault(),f.selectedElements.forEach(x=>{x.set({y:x.y+1})})),u.code==="ArrowUp"&&(u.preventDefault(),f.selectedElements.forEach(x=>{x.set({y:x.y-1})})),u.code==="ArrowLeft"&&(u.preventDefault(),f.selectedElements.forEach(x=>{x.set({x:x.x-1})})),u.code==="ArrowRight"&&(u.preventDefault(),f.selectedElements.forEach(x=>{x.set({x:x.x+1})}))}e.handleHotkey=l})(CS);var US={};(function(e){Object.defineProperty(e,"__esModule",{value:!0}),e.t=e.getTranslations=e.setTranslations=void 0;const t=ja,r=(0,t.observable)({toolbar:{duration:"Duration",opacity:"Opacity",effects:"Effects",blur:"Blur",textBackground:"Background",backgroundCornerRadius:"Corner radius",backgroundOpacity:"Opacity",backgroundPadding:"Padding",brightness:"Brightness",sepia:"Sepia",grayscale:"Grayscale",textStroke:"Text Stroke",shadow:"Shadow",border:"Border",cornerRadius:"Corner Radius",position:"Position",layering:"Layering",toForward:"To forward",up:"Up",down:"Down",toBottom:"To bottom",alignLeft:"Align left",alignCenter:"Align center",alignRight:"Align right",alignTop:"Align top",alignMiddle:"Align middle",alignBottom:"Align bottom",flip:"Flip",flipHorizontally:"Flip horizontally",flipVertically:"Flip vertically",fitToBackground:"Fit to page",removeBackground:"Remove background",removeBackgroundTitle:"Remove background from image",cancelRemoveBackground:"Cancel",confirmRemoveBackground:"Confirm",crop:"Crop",cropDone:"Done",cropCancel:"Cancel",removeClip:"Remove clip",removeMask:"Remove mask",transparency:"Transparency",lockedDescription:"Object is locked. Unlock it to allow changes from canvas.",unlockedDescription:"Object is unlocked. Lock it to prevent changes from canvas.",removeElements:"Remove elements",duplicateElements:"Duplicate elements",download:"Download",saveAsImage:"Save as image",saveAsPDF:"Save as PDF",lineHeight:"Line height",letterSpacing:"Letter spacing",offsetX:"Offset X",offsetY:"Offset Y",color:"Color",selectable:"Selectable",draggable:"Draggable",removable:"Removable",resizable:"Resizable",contentEditable:"Can change content",styleEditable:"Can change style",alwaysOnTop:"Always on top",showInExport:"Show in export",ungroupElements:"Ungroup",groupElements:"Group",lineSize:"Line size",fade:"Fade",move:"Move",zoom:"Zoom",animate:"Animate",spaceEvenly:"Space evenly",horizontalDistribution:"Horizontally",verticalDistribution:"Vertically",strokeWidth:"Stroke Width",colorPicker:{solid:"Solid",linear:"Linear"}},workspace:{noPages:"There are no pages yet...",addPage:"Add page",removePage:"Remove page",duplicatePage:"Duplicate page",moveUp:"Move up",moveDown:"Move down"},scale:{reset:"Reset"},error:{removeBackground:"Ops! Something went wrong. Background can not be removed."},sidePanel:{templates:"Templates",searchTemplatesWithSameSize:"Show templates with the same size",searchPlaceholder:"Search...",otherFormats:"Other formats",noResults:"No results",error:"Loading is failed...",text:"Text",uploadFont:"Upload font",myFonts:"My fonts",photos:"Photos",elements:"Elements",shapes:"Shapes",lines:"Lines",upload:"Upload",uploadImage:"Upload Image",uploadTip:"Do you want to upload your own images?",background:"Background",resize:"Resize",layers:"Layers",layerTypes:{image:"Image",text:"Text",svg:"SVG",line:"Line",figure:"Figure",group:"Group"},layersTip:"Elements on your active page:",noLayers:"No elements on the page...",namePlaceholder:"Type element name...",useMagicResize:"Use magic resize",width:"Width",height:"Height",magicResizeDescription:"Magic resize will automatically resize and move all elements on the canvas",headerText:"Header",createHeader:"Create header",subHeaderText:"Sub Header",createSubHeader:"Create sub header",bodyText:"Body text",createBody:"Create body text"}});function n(f,p){var S,w=p.split("."),g=f;for(S=0;S<w.length;++S){if(g[w[S]]==null)return;g=g[w[S]]}return g}const i=f=>f&&typeof f=="object";function a(f,p){Object.keys(p).forEach(S=>{const w=f[S],g=p[S];i(g)&&i(w)?a(w,g):f[S]=g})}e.setTranslations=(0,t.action)(f=>{a(r,f)});const o=()=>(0,t.toJS)(r);e.getTranslations=o;const l={},u=f=>{const p=n(r,f);if(p!==void 0)return p;l[f]||(l[f]=!0,console.warn(`Missing translation '${f}'`));const S=f.split("."),w=S[S.length-1]||" ";return w.charAt(0).toUpperCase()+w.slice(1)};e.t=u})(US);(function(e){var t=Se&&Se.__importDefault||function(g){return g&&g.__esModule?g:{default:g}};Object.defineProperty(e,"__esModule",{value:!0}),e.WorkspaceCanvas=void 0;const r=t(it),n=zi,i=t(g9),a=PS,o=CS,l=US,u=`Polotno warning: <Workspace /> component can not automatically detect its size.
 Width or height of parent elements is equal 0.
 Please make sure it has non-zero size. You may need to adjust it with your styles. <Workspace /> will automatically fit into parent container.
 For simpler debugging here is the log of the parent element:`,f=(g,E,m,v,y,h)=>{const d=r.default.useRef({width:E,height:m}),b=r.default.useRef({top:0,left:0}),O=r.default.useRef(!1),x=r.default.useRef(y.pages.length);O.current=x.current!==y.pages.length,x.current=y.pages.length,r.default.useEffect(()=>{const P=g.current,_=A=>{b.current={top:P.scrollTop,left:P.scrollLeft}};return P.addEventListener("scroll",_),()=>{P.removeEventListener("scroll",_)}},[]),r.default.useLayoutEffect(()=>{if(!g.current||O.current)return;const P=g.current,_=(b.current.left+P.offsetWidth/2)/d.current.width,A=(b.current.top+P.offsetHeight/2)/d.current.height;h.current=!0,P.scrollLeft=_*E-P.offsetWidth/2,P.scrollTop=A*m-P.offsetHeight/2,d.current={width:E,height:m}},[v,E,m])},p=(g,E,m,v,y)=>{const h=r.default.useRef(!1),d=r.default.useRef(null);r.default.useEffect(()=>{const O=g.current,x=()=>{y.current};return O.addEventListener("scroll",x),()=>{O.removeEventListener("scroll",x)}},[]);const b=m.pages.indexOf(m.activePage);return r.default.useLayoutEffect(()=>{if(!m.activePage||!g.current||h.current)return;const O=g.current,x=m.pages.indexOf(m.activePage)*E;Math.abs(x-O.scrollTop)>.5*E&&(y.current=!0,O.scrollTop=x)},[m.activePage,b]),{handleScroll:O=>{if(y.current)return void(y.current=!1);h.current=!0,clearTimeout(d.current),d.current=setTimeout(()=>{h.current=!1},300);const x=O.currentTarget.childNodes[0].offsetHeight,P=O.currentTarget.scrollTop,_=Math.floor((P+v.height/3)/x),A=m.pages[_];A&&A.select()}}},S=({store:g})=>r.default.createElement("div",{style:{position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",textAlign:"center"}},r.default.createElement("p",null,(0,l.t)("workspace.noPages")),r.default.createElement("button",{onClick:()=>{g.addPage()}},(0,l.t)("workspace.addPage"))),w=({width:g,height:E,xPadding:m,yPadding:v,backgroundColor:y})=>r.default.createElement("div",{style:{width:g+"px",height:E+"px",backgroundColor:y,paddingLeft:m+"px",paddingRight:m+"px",paddingTop:v+"px",paddingBottom:v+"px"}},r.default.createElement("div",{style:{width:" 100%",height:"100%",backgroundColor:"white"}}));e.WorkspaceCanvas=(0,n.observer)(({store:g,pageControlsEnabled:E,backgroundColor:m,pageBorderColor:v,activePageBorderColor:y,bleedColor:h,components:d,onKeyDown:b,paddingX:O,paddingY:x,altCloneEnabled:P=!0})=>{const _=O??20,A=x??55,[C,k]=r.default.useState({width:100,height:100}),R=r.default.useRef(C),D=r.default.useRef(null),U=r.default.useRef(null),Y=g.bleedVisible?Math.max(0,...g.pages.map(ee=>ee.bleed)):0,j=Math.max(...g.pages.map(ee=>ee.computedWidth)),G=Math.max(...g.pages.map(ee=>ee.computedHeight)),z=j+2*Y,q=G+2*Y,L=async({skipTimeout:ee}={skipTimeout:!1})=>{if(ee||await new Promise(fe=>setTimeout(fe,50)),D.current===null)return;const re=D.current.getBoundingClientRect();re.width!==0&&re.height!==0||(console.warn(u),console.log(D.current));const ne=U.current.clientWidth||re.width,de={width:ne,height:re.height};(R.current.width!==de.width||R.current.height!==de.height)&&(k(de),R.current=de);const pe=(ne-2*_)/z,Me=(re.height-2*A)/q,Fe=Math.max(Math.min(pe,Me),.01);g.scaleToFit!==Fe&&(g.setScale(Fe),g._setScaleToFit(Fe))};r.default.useLayoutEffect(()=>{L({skipTimeout:!0})},[]),r.default.useEffect(()=>{L()},[z,q]),r.default.useEffect(()=>{const ee=D.current;if(window.ResizeObserver){const re=new ResizeObserver(()=>{L({skipTimeout:!0})});return re.observe(ee),()=>re.unobserve(ee)}{const re=setInterval(()=>{L({skipTimeout:!0})},100);return()=>clearInterval(re)}},[z,q]);const I=Math.max(_,(C.width-z*g.scale)/2),B=q*g.scale*g.pages.length,M=Math.max(A,(C.height-B)/g.pages.length/2);r.default.useEffect(()=>{const ee=re=>{(b||o.handleHotkey)(re,g)};return window.addEventListener("keydown",ee),()=>window.removeEventListener("keydown",ee)},[]),r.default.useEffect(()=>{var ee;const re=ne=>{if(ne.ctrlKey||ne.metaKey){ne.preventDefault();const Fe=Math.max(3,g.scaleToFit),fe=Math.min(.1,g.scaleToFit),ie=(de=ne.deltaY<0?1.05*g.scale:g.scale/1.05,pe=fe,Me=Fe,Math.max(pe,Math.min(Me,de)));g.setScale(ie)}else var de,pe,Me};return(ee=U.current)===null||ee===void 0||ee.addEventListener("wheel",re),()=>{var ne;return(ne=U.current)===null||ne===void 0?void 0:ne.removeEventListener("wheel",re)}},[]);const $=r.default.useRef(!1);f(U,z*g.scale+2*I,q*g.scale+2*M,g.scale,g,$);const{handleScroll:K}=p(U,q*g.scale+2*M,g,C,$),V=C.width>=z*g.scale+2*I,H=m||"rgba(232, 232, 232, 0.9)",X=g.pages.indexOf(g.activePage),Z=(d==null?void 0:d.NoPages)||S,J=Math.min(3,Math.max(1,Math.ceil(C.height/2/(q*g.scale))));return r.default.createElement("div",{ref:D,style:{width:"100%",height:"100%",position:"relative",outline:"none",flex:1,backgroundColor:H},tabIndex:0,className:"polotno-workspace-container"},r.default.createElement("div",{ref:U,onScroll:K,style:{position:"absolute",top:0,left:0,width:"100%",height:"100%",overflow:"auto",overflowX:V?"hidden":"auto"},className:"polotno-workspace-inner"},g.pages.map((ee,re)=>Math.abs(re-X)<=J||ee._exporting?r.default.createElement(i.default,{key:ee.id,page:ee,xPadding:I,yPadding:M,width:z*g.scale+2*I,height:q*g.scale+2*M,store:g,pageControlsEnabled:E,backColor:H,pageBorderColor:v||"lightgrey",activePageBorderColor:y||"rgb(0, 161, 255)",altCloneEnabled:P,bleedColor:h||"rgba(255, 0, 0, 0.1)",components:d}):r.default.createElement(w,{key:ee.id,width:z*g.scale+2*I,height:q*g.scale+2*M,backgroundColor:H,xPadding:I,yPadding:M})),g.rulesVisible&&r.default.createElement(a.TopRules,{store:g,xPadding:I,yPadding:M,width:z*g.scale+2*I,height:q*g.scale+2*M}),g.pages.length===0&&r.default.createElement(Z,{store:g})))}),e.default=e.WorkspaceCanvas})(Jw);var cF=D2();$l.toggleFadeInAnimation(!1);di.setTextOverflow("change-font-size");const fF=new URLSearchParams(location.search).get("key"),HS=cF.createStore({key:fF});window.store=HS;window.config={addGlobalFont:_f.addGlobalFont,unstable_useHtmlTextRender:di.useHtmlTextRender,unstable_setTextVerticalResizeEnabled:di.setTextVerticalResizeEnabled,unstable_setTextOverflow:di.setTextOverflow,onLoadError:Ia.onLoadError,setAssetLoadTimeout:Ia.setAssetLoadTimeout};const dF=rh.createRoot(document.getElementById("root"));dF.render(vt.createElement(Jw.WorkspaceCanvas,{store:HS,components:{PageControls:()=>null,Tooltip:()=>null}}));

package/dist/index.html

@@ -8,7 +8,7 @@
       }
     </style>
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <script type="module" crossorigin src="./assets/index-yVSO3dEu.js"></script>
+    <script type="module" crossorigin src="./assets/index-30-BPj2-.js"></script>
   </head>
   <body>
     <div id="root"></div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "polotno-node",
-  "version": "2.9.4",
+  "version": "2.9.6",
   "description": "Polotno workflow from NodeJS",
   "main": "index.js",
   "scripts": {
@@ -26,7 +26,7 @@
     "gifencoder": "^2.0.1",
     "pixelmatch": "^5.3.0",
     "pngjs": "^7.0.0",
-    "polotno": "^2.4.25",
+    "polotno": "^2.4.26",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "vite": "^5.2.9"