polotno 2.22.2 → 2.23.1

package/canvas/apply-filters.js

@@ -1 +1 @@
-var t=this&&this.__importDefault||function(t){return t&&t.__esModule?t:{default:t}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.applyFilter=function(t,i){var r;const s={filters:[]},n={};i.brightnessEnabled&&(s.filters.push(e.default.Filters.Brighten),s.brightness=i.brightness),i.blurEnabled&&(s.filters.push(e.default.Filters.Blur),s.blurRadius=i.blurRadius,"text"===i.type&&i.lineHeight<1&&(n.offset=i.fontSize)),i.sepiaEnabled&&s.filters.push(e.default.Filters.Sepia),i.grayscaleEnabled&&s.filters.push(e.default.Filters.Grayscale),i.filters.forEach(((t,e)=>{const i=a[e];i&&s.filters.push(i(t.intensity))})),t.setAttrs(s),s.filters.length?t.cache(Object.assign(Object.assign({},n),{pixelRatio:i.store._elementsPixelRatio})):t.clearCache(),null===(r=t.getLayer())||void 0===r||r.batchDraw()};const e=t(require("konva")),a={warm:t=>e=>{const a=e.data;for(let i=0;i<a.length;i+=4){a[i]=Math.min(a[i]+30*t,255),a[i+1]=Math.min(a[i+1]+15*t,255)}return e},cold:t=>e=>{const a=e.data;for(let i=0;i<a.length;i+=4){a[i]=Math.min(a[i]-15*t,255),a[i+1]=Math.min(a[i+1]-10*t,255),a[i+2]=Math.min(a[i+2]+15*t,255)}return e},natural:t=>e=>{const a=e.data;t=Math.max(0,Math.min(t,1));for(let i=0;i<a.length;i+=4){a[i]=Math.min(a[i]*(1+.1*t),255),a[i+1]=Math.min(a[i+1]*(1+.1*t),255),a[i+2]=Math.min(a[i+2]*(1+.1*t),255);const e=(a[i]+a[i+1]+a[i+2])/3;a[i]=Math.min((a[i]-e)*(1+.2*t)+e,255),a[i+1]=Math.min((a[i+1]-e)*(1+.2*t)+e,255),a[i+2]=Math.min((a[i+2]-e)*(1+.2*t)+e,255)}return e}};
+var t=this&&this.__importDefault||function(t){return t&&t.__esModule?t:{default:t}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.applyFilter=function(t,e){var h;const i={filters:[]},r={};e.brightnessEnabled&&(i.filters.push(a.default.Filters.Brighten),i.brightness=e.brightness),e.blurEnabled&&(i.filters.push(a.default.Filters.Blur),i.blurRadius=e.blurRadius,"text"===e.type&&e.lineHeight<1&&(r.offset=e.fontSize)),e.sepiaEnabled&&i.filters.push(a.default.Filters.Sepia),e.grayscaleEnabled&&i.filters.push(a.default.Filters.Grayscale),e.filters.forEach(((t,a)=>{const e=n[a];e&&i.filters.push(e(t.intensity))})),t.setAttrs(i),i.filters.length?t.cache(Object.assign(Object.assign({},r),{pixelRatio:e.store._elementsPixelRatio})):t.clearCache(),null===(h=t.getLayer())||void 0===h||h.batchDraw()};const a=t(require("konva")),n={warm:t=>a=>{const n=a.data;for(let e=0;e<n.length;e+=4){n[e]=Math.min(n[e]+30*t,255),n[e+1]=Math.min(n[e+1]+15*t,255)}return a},cold:t=>a=>{const n=a.data;for(let e=0;e<n.length;e+=4){n[e]=Math.min(n[e]-15*t,255),n[e+1]=Math.min(n[e+1]-10*t,255),n[e+2]=Math.min(n[e+2]+15*t,255)}return a},natural:t=>a=>{const n=a.data;t=Math.max(0,Math.min(t,1));for(let e=0;e<n.length;e+=4){n[e]=Math.min(n[e]*(1+.1*t),255),n[e+1]=Math.min(n[e+1]*(1+.1*t),255),n[e+2]=Math.min(n[e+2]*(1+.1*t),255);const a=(n[e]+n[e+1]+n[e+2])/3;n[e]=Math.min((n[e]-a)*(1+.2*t)+a,255),n[e+1]=Math.min((n[e+1]-a)*(1+.2*t)+a,255),n[e+2]=Math.min((n[e+2]-a)*(1+.2*t)+a,255)}return a},temperature:t=>a=>{const n=a.data,e=(t=Math.max(-100,Math.min(100,t)))/100;for(let t=0;t<n.length;t+=4){const a=n[t],h=(n[t+1],n[t+2]);n[t]=Math.min(Math.max(a+15*e,0),255),n[t+2]=Math.min(Math.max(h-15*e,0),255)}return a},contrast:t=>a=>{const n=a.data,e=259*((t=Math.max(-100,Math.min(100,t)))+255)/(255*(259-t));for(let t=0;t<n.length;t+=4){n[t]=Math.min(Math.max(e*(n[t]-128)+128,0),255),n[t+1]=Math.min(Math.max(e*(n[t+1]-128)+128,0),255),n[t+2]=Math.min(Math.max(e*(n[t+2]-128)+128,0),255)}return a},shadows:t=>a=>{const n=a.data;t=Math.max(-100,Math.min(100,t))/100;for(let e=0;e<n.length;e+=4){const a=(n[e]+n[e+1]+n[e+2])/3;if(a<128){const h=1+t*(1-a/128)*2;n[e]=Math.min(Math.max(n[e]*h,0),255),n[e+1]=Math.min(Math.max(n[e+1]*h,0),255),n[e+2]=Math.min(Math.max(n[e+2]*h,0),255)}}return a},white:t=>a=>{const n=a.data;t=Math.max(-100,Math.min(100,t))/100;for(let e=0;e<n.length;e+=4){const a=n[e],h=n[e+1],i=n[e+2],r=(a+h+i)/3;if(r>128){const m=1+t*((r-128)/127);n[e]=Math.min(Math.max(a*m,0),255),n[e+1]=Math.min(Math.max(h*m,0),255),n[e+2]=Math.min(Math.max(i*m,0),255)}}return a},black:t=>a=>{const n=a.data;t=Math.max(-100,Math.min(100,t))/100;for(let e=0;e<n.length;e+=4){const a=n[e],h=n[e+1],i=n[e+2],r=(a+h+i)/3;if(r<128){const m=1+t*((128-r)/128);n[e]=Math.min(Math.max(a*m,0),255),n[e+1]=Math.min(Math.max(h*m,0),255),n[e+2]=Math.min(Math.max(i*m,0),255)}}return a},vibrance:t=>a=>{const n=a.data;t=Math.max(-100,Math.min(100,t))/100;for(let e=0;e<n.length;e+=4){const a=n[e],h=n[e+1],i=n[e+2],r=Math.max(a,h,i),m=t<0?(1-(0===r?0:(r-(a+h+i)/3)/r))*t*1.5:.5*t;n[e]=Math.min(Math.max(a-(r-a)*m,0),255),n[e+1]=Math.min(Math.max(h-(r-h)*m,0),255),n[e+2]=Math.min(Math.max(i-(r-i)*m,0),255)}return a},saturation:t=>a=>{const n=a.data;t=Math.max(-100,Math.min(100,t))/100;for(let e=0;e<n.length;e+=4){const a=n[e],h=n[e+1],i=n[e+2],r=.2126*a+.7152*h+.0722*i;n[e]=Math.min(Math.max(r+(a-r)*(1+t),0),255),n[e+1]=Math.min(Math.max(r+(h-r)*(1+t),0),255),n[e+2]=Math.min(Math.max(r+(i-r)*(1+t),0),255)}return a}};

package/canvas/html-element.js

@@ -12,4 +12,4 @@ var e,t=this&&this.__createBinding||(Object.create?function(e,t,n,i){void 0===i&
   .ql-direction-rtl {
     direction: rtl;
   }
-`;let z=["bold","color","font","italic","size","strike","underline","indent","list","direction"];exports.setQuillFormats=e=>{z=e},exports.createQuill=e=>new s.default(e,{toolbar:!1,keyboard:!1,clipboard:{matchVisual:!1},formats:z}),exports.setQuillContent=(e,t)=>{var n=e.clipboard.convert("<div class='ql-editor' style='outline: none;'>"+t+"<p><br></p></div>");e.setContents(n),e.history.clear()};const O=({html:e,onBlur:t,onChange:n,element:i})=>{const r=o.default.useRef(null);o.default.useEffect((()=>{if(!r.current){return}const e=(0,exports.createQuill)(r.current);return c.runInAction((()=>{exports.quillRef.editor.instance=e})),window.__polotnoQuill=e,e.on("text-change",(()=>{e.getSelection()&&c.runInAction((()=>{exports.quillRef.currentFormat=e.getFormat()})),setTimeout((()=>{var e;const t=null===(e=r.current)||void 0===e?void 0:e.childNodes[0];n(t.innerHTML)}),10)})),e.setSelection(0,0,"api"),e.on("selection-change",((t,n,i)=>{t&&c.runInAction((()=>{exports.quillRef.currentFormat=e.getFormat()}))})),r.current.childNodes[0].addEventListener("blur",(e=>{var n;if(null===(n=e.relatedTarget)||void 0===n?void 0:n.classList.contains("ql-clipboard")){return}const i=function(e){return!!e&&!!e.closest(".sketch-picker")}(e.relatedTarget);i||t()})),()=>{c.runInAction((()=>{exports.quillRef.editor.instance=null,exports.quillRef.currentFormat={}})),delete window.__polotnoQuill}}),[]),o.default.useEffect((()=>{var t;const n=exports.quillRef.editor.instance;if(!n){return}const o=n.getSelection();(null===(t=r.current)||void 0===t?void 0:t.childNodes[0].innerHTML)===i.text||((0,exports.setQuillContent)(n,e),o&&(n.setSelection(o.index,o.length),c.runInAction((()=>{exports.quillRef.currentFormat=n.getFormat()}))))}),[i.text]);const a={color:i.fill};return i.fill.indexOf("gradient")>=0&&(a.backgroundColor=i.fill,a.backgroundImage=i.fill,a.backgroundSize="100% 100%",a.backgroundRepeat="repeat",a.webkitBackgroundClip="text",a.MozBackgroundClip="text",a.WebkitTextFillColor="transparent",a.MozTextFillColor="transparent"),o.default.createElement(E,{ref:r,style:Object.assign(Object.assign({},a),{fontSize:i.fontSize,fontWeight:i.fontWeight,width:i.a.width,fontFamily:i.fontFamily,lineHeight:i.lineHeight,letterSpacing:i.letterSpacing*i.fontSize+"px",textAlign:i.align}),dir:(0,g.getDir)((0,w.removeTags)(i.text))})},q=(e,t=100,n=!1,i="")=>{const[r,a]=o.default.useState(e),l=o.default.useRef(null);return o.default.useEffect((()=>e===n?(l.current&&(clearTimeout(l.current),l.current=null),void a(n)):(l.current&&clearTimeout(l.current),l.current=setTimeout((()=>{a(e),l.current=null}),t),()=>{l.current&&clearTimeout(l.current)})),[e,t]),[r,a]};function F(e,{fontFamily:t="",color:n="black"}={}){let i=`color: ${n||e.fill}`;return e.fill.indexOf("gradient")>=0&&(i=`\n      background-color: ${n};\n      background-image: ${e.fill};\n      background-size: 100% 100%;\n      background-repeat: repeat;\n      -webkit-background-clip: text;\n      -moz-background-clip: text;\n      -webkit-text-fill-color: transparent;\n      -moz-text-fill-color: transparent;\n    `),`<div style="${["white-space: pre-wrap",`width: ${Math.round(e.width||100)}px`,i,`font-size: ${e.fontSize}px`,`font-family: '${t}'`,`text-align: ${e.align}`,e.textDecoration?`text-decoration: ${e.textDecoration}; text-decoration-color: ${n||e.fill}; text-decoration-layer: over`:"",e.lineHeight?`line-height: ${e.lineHeight}`:"",e.letterSpacing?`letter-spacing: ${e.letterSpacing*e.fontSize}px`:"",e.fontStyle?`font-style: ${e.fontStyle}`:"",e.fontWeight?`font-weight: ${e.fontWeight}`:"",e.strokeWidth?`-webkit-text-stroke: ${e.strokeWidth}px ${e.stroke}`:"",e.strokeWidth?"paint-order: stroke fill":""].filter(Boolean).join("; ")}" contentEditable dir="${(0,g.getDir)((0,w.removeTags)(e.text))}">${(0,w.sanitizeHtml)(e.text).replace(/\n/g,"</br>")}</div>`}const R=/^((?!chrome|android).)*safari/i.test(navigator.userAgent);exports.HTMLElement=(0,a.observer)((({element:e,store:t})=>{const n=o.default.useRef(null),[i,r]=o.default.useState(),[a,s]=o.default.useState(!1),[b,z]=o.default.useState(!0),[T,_]=o.default.useState(!1),C=o.default.useRef(e.height),M=t.selectedShapes.indexOf(e)>=0&&e.selectable,$=e.fontSize/3,{textVerticalResizeEnabled:A}=d.flags,H=(0,g.usePrevious)(e.fontFamily),[I]=(0,g.useFontLoader)(t,e.fontFamily),j=e._editModeEnabled;(0,p.useFadeIn)(n);const P=I?e.fontFamily:H!==e.fontFamily?H:"Arial",D=(0,h.useColor)(e).fill,L=F(e,{fontFamily:P,color:D}),{width:X,height:Y}=function(e,t,n){return o.default.useMemo((()=>(0,m.detectSize)(e)),[e,t.width,n])}(L,e,I);o.default.useEffect((()=>{if(!I){return}if(!e.height){return void e.set({height:Y})}const{textOverflow:n}=d.flags;if("change-font-size"!==n||a){"resize"===n&&(A&&e.height<Y&&t.history.ignore((()=>{e.set({height:Y})})),A||e.height===Y||t.history.ignore((()=>{e.set({height:Y})})))}else{const n=(e=>{let t=e.fontSize;for(let n=1;n<50;n++){const n=F(Object.assign(Object.assign({},e.toJSON()),{fontSize:t}),{fontFamily:e.fontFamily}),{height:i}=(0,m.detectSize)(n),r=e.height&&i>e.height,o=(0,m.isContentWrapping)({html:n});if(!r&&!o){break}t-=.5}return t})(e);n!==e.fontSize?t.history.ignore((()=>{e.set({fontSize:n})})):e.height!==Y&&(A&&e.height<Y?t.history.ignore((()=>{e.set({height:Y})})):A||t.history.ignore((()=>{e.set({height:Y})})))}}));const W=o.default.useRef(0),B=o.default.useMemo((()=>{const e={lastArgs:null,lastResult:null};return async function(t){return e.lastArgs&&e.lastResult&&(n=e.lastArgs,i=t,JSON.stringify(n)===JSON.stringify(i))||(e.lastResult=await(0,m.htmlToCanvas)(t),e.lastArgs=Object.assign({},t)),e.lastResult;var n,i}}),[]);o.default.useEffect((()=>{a||j||(async()=>{W.current++;const n=W.current,i=(0,y.incrementLoader)(`text ${e.id}`);z(!0);let o=null;const a=R?5:1;for(let r=0;r<a;r++){const a=r>0?B:m.htmlToCanvas;try{if(o=await a({skipCache:r>0,html:L,width:e.width||1,height:e.height||Y||1,fontFamily:P,padding:$,pixelRatio:t._elementsPixelRatio,font:t.fonts.find((e=>e.fontFamily===P))||v.globalFonts.find((e=>e.fontFamily===P))}),n!==W.current){return void i()}if(!function(e){const t=e.getContext("2d").getImageData(0,0,e.width,e.height).data;for(let n=0;n<t.length;n+=4){if(0!==t[n+3]){return!0}}return!1}(o)&&R){await new Promise((e=>setTimeout(e,50*(r+1))));continue}}catch(l){(0,y.triggerLoadError)(`Error rendering rich text with id ${e.id}`);break}}o?(r(o),z(!1),u.default.Util.requestAnimFrame(i)):i()})()}),[L,a,Y,j,P,e.height,t._elementsPixelRatio,I]);const[Q,N]=q(b),[J]=q(a,100,!0),V=J||Q;o.default.useEffect((()=>c.autorun((()=>{const t=n.current;(0,f.applyFilter)(t,e)}))),[i,V,e.shadowColor,e.shadowOffsetX,e.shadowOffsetY,e.shadowOpacity]);let G=0;"middle"===e.verticalAlign&&(G=(e.height-Y)/2),"bottom"===e.verticalAlign&&(G=e.height-Y);const U=(0,g.getLineHeight)({fontLoaded:I,fontFamily:e.fontFamily,fontSize:e.fontSize,lineHeight:e.lineHeight}),K=(0,S.isTouchDevice)();return o.default.createElement(o.default.Fragment,null,o.default.createElement(l.Rect,{x:e.a.x,y:e.a.y,offsetX:e.backgroundPadding*(e.fontSize*U*.5),offsetY:e.backgroundPadding*(e.fontSize*U*.5),rotation:e.a.rotation,hideInExport:!e.showInExport,listening:!1,visible:e.backgroundEnabled,opacity:e.backgroundOpacity*e.a.opacity,fill:e.backgroundColor,width:e.a.width+e.backgroundPadding*(e.fontSize*U),height:e.a.height+e.backgroundPadding*(e.fontSize*U),cornerRadius:e.backgroundCornerRadius*(e.fontSize*U*.5)}),o.default.createElement(l.Rect,{ref:n,name:"element",x:e.a.x,y:e.a.y,listening:e.selectable,rotation:e.a.rotation,width:e.a.width,height:e.a.height,visible:!V,draggable:K?e.draggable&&M:e.draggable,preventDefault:!K||M,opacity:j?0:e.a.opacity,hideInExport:!e.showInExport,onDragMove:t=>{e.set({x:t.target.x(),y:t.target.y()})},onDragEnd:t=>{e.set({x:t.target.x(),y:t.target.y()})},id:e.id,onDblClick:()=>{e.contentEditable&&e.toggleEditMode(!0)},onDblTap:()=>{e.contentEditable&&e.toggleEditMode(!0)},onTransformStart:t=>{s(!0),C.current=e.height},onTransform:t=>{var n;const i=t.target,r=(null===(n=i.getStage())||void 0===n?void 0:n.findOne("Transformer")).getActiveAnchor(),o="middle-left"===r||"middle-right"===r,a="top-center"===r||"bottom-center"===r,l=i.scaleX();if(o){const t=i.scaleX(),n=Math.max(i.width()*t,e.fontSize);if(i.width(n),i.scaleX(1),d.flags.textVerticalResizeEnabled){const t=Math.max(Y,C.current);e.set({height:t})}e.set({width:n,x:i.x(),y:i.y()})}else if(a){let n="resize"===d.flags.textOverflow?Y:e.lineHeight*e.fontSize;const r=Math.max(n,t.target.height()*t.target.scaleY());i.scaleY(1),e.set({x:i.x(),y:i.y(),height:r,rotation:i.rotation()})}else{i.scaleX(1),i.scaleY(1),e.set({fontSize:e.fontSize*l,letterSpacing:e.letterSpacing,width:i.width()*l,x:i.x(),y:i.y(),rotation:i.rotation(),height:i.height()*l})}},onTransformEnd:t=>{s(!1),z(!0);const n=t.target.scaleX();t.target.scaleX(1),t.target.scaleY(1),e.set({fontSize:e.fontSize*n,width:t.target.width()*n,x:t.target.x(),y:t.target.y(),rotation:t.target.rotation(),shadowBlur:e.shadowBlur*n,shadowOffsetX:e.shadowOffsetX*n,shadowOffsetY:e.shadowOffsetY*n,strokeWidth:e.strokeWidth*n})}}),o.default.createElement(l.Image,{ref:n,image:i,x:e.a.x,y:e.a.y,offsetX:$,offsetY:$-G,listening:!1,rotation:e.rotation,width:e.a.width+2*$,height:e.a.height+2*$,visible:!V,opacity:j?0:e.a.opacity,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,hideInExport:!e.showInExport}),V&&o.default.createElement(l.Group,{x:e.a.x,y:e.a.y,rotation:e.rotation,offsetY:-G},o.default.createElement(x.Html,{divProps:{style:{pointerEvents:"none"}}},o.default.createElement(E,{dangerouslySetInnerHTML:{__html:L},style:{pointerEvents:"none"}}))),j&&o.default.createElement(l.Group,{x:e.a.x,y:e.a.y,rotation:e.rotation,offsetY:-G},o.default.createElement(x.Html,null,o.default.createElement(O,{html:L,element:e,onChange:t=>{const n=(0,k.getLimitedFontSize)({oldText:(0,w.removeTags)(e.text),newText:(0,w.removeTags)(t),element:e});e.set({text:t,fontSize:n})},onBlur:t=>{e.toggleEditMode(!1),N(!0)}}))))}));
+`;let z=["bold","color","font","italic","size","strike","underline","indent","list","direction"];exports.setQuillFormats=e=>{z=e},exports.createQuill=e=>new s.default(e,{toolbar:!1,keyboard:!1,clipboard:{matchVisual:!1},formats:z}),exports.setQuillContent=(e,t)=>{var n=e.clipboard.convert("<div class='ql-editor' style='outline: none;'>"+t+"<p><br></p></div>");e.setContents(n),e.history.clear()};const O=({html:e,onBlur:t,onChange:n,element:i})=>{const r=o.default.useRef(null);o.default.useEffect((()=>{if(!r.current){return}const e=(0,exports.createQuill)(r.current);return c.runInAction((()=>{exports.quillRef.editor.instance=e})),window.__polotnoQuill=e,e.on("text-change",(()=>{e.getSelection()&&c.runInAction((()=>{exports.quillRef.currentFormat=e.getFormat()})),setTimeout((()=>{var e;const t=null===(e=r.current)||void 0===e?void 0:e.childNodes[0];n(t.innerHTML)}),10)})),e.setSelection(0,0,"api"),e.on("selection-change",((t,n,i)=>{t&&c.runInAction((()=>{exports.quillRef.currentFormat=e.getFormat()}))})),r.current.childNodes[0].addEventListener("blur",(e=>{var n;if(null===(n=e.relatedTarget)||void 0===n?void 0:n.classList.contains("ql-clipboard")){return}const i=function(e){return!!e&&!!e.closest(".sketch-picker")}(e.relatedTarget);i||t()})),()=>{c.runInAction((()=>{exports.quillRef.editor.instance=null,exports.quillRef.currentFormat={}})),delete window.__polotnoQuill}}),[]),o.default.useEffect((()=>{var t;const n=exports.quillRef.editor.instance;if(!n){return}const o=n.getSelection();(null===(t=r.current)||void 0===t?void 0:t.childNodes[0].innerHTML)===i.text||((0,exports.setQuillContent)(n,e),o&&(n.setSelection(o.index,o.length),c.runInAction((()=>{exports.quillRef.currentFormat=n.getFormat()}))))}),[i.text]);const a={color:i.fill};return i.fill.indexOf("gradient")>=0&&(a.backgroundColor=i.fill,a.backgroundImage=i.fill,a.backgroundSize="100% 100%",a.backgroundRepeat="repeat",a.webkitBackgroundClip="text",a.MozBackgroundClip="text",a.WebkitTextFillColor="transparent",a.MozTextFillColor="transparent"),o.default.createElement(E,{ref:r,style:Object.assign(Object.assign({},a),{fontSize:i.fontSize,fontWeight:i.fontWeight,width:i.a.width,fontFamily:'"'+i.fontFamily+'"',lineHeight:i.lineHeight,letterSpacing:i.letterSpacing*i.fontSize+"px",textAlign:i.align}),dir:(0,g.getDir)((0,w.removeTags)(i.text))})},q=(e,t=100,n=!1,i="")=>{const[r,a]=o.default.useState(e),l=o.default.useRef(null);return o.default.useEffect((()=>e===n?(l.current&&(clearTimeout(l.current),l.current=null),void a(n)):(l.current&&clearTimeout(l.current),l.current=setTimeout((()=>{a(e),l.current=null}),t),()=>{l.current&&clearTimeout(l.current)})),[e,t]),[r,a]};function F(e,{fontFamily:t="",color:n="black"}={}){let i=`color: ${n||e.fill}`;return e.fill.indexOf("gradient")>=0&&(i=`\n      background-color: ${n};\n      background-image: ${e.fill};\n      background-size: 100% 100%;\n      background-repeat: repeat;\n      -webkit-background-clip: text;\n      -moz-background-clip: text;\n      -webkit-text-fill-color: transparent;\n      -moz-text-fill-color: transparent;\n    `),`<div style="${["white-space: pre-wrap",`width: ${Math.round(e.width||100)}px`,i,`font-size: ${e.fontSize}px`,`font-family: '${t}'`,`text-align: ${e.align}`,e.textDecoration?`text-decoration: ${e.textDecoration}; text-decoration-color: ${n||e.fill}; text-decoration-layer: over`:"",e.lineHeight?`line-height: ${e.lineHeight}`:"",e.letterSpacing?`letter-spacing: ${e.letterSpacing*e.fontSize}px`:"",e.fontStyle?`font-style: ${e.fontStyle}`:"",e.fontWeight?`font-weight: ${e.fontWeight}`:"",e.strokeWidth?`-webkit-text-stroke: ${e.strokeWidth}px ${e.stroke}`:"",e.strokeWidth?"paint-order: stroke fill":""].filter(Boolean).join("; ")}" contentEditable dir="${(0,g.getDir)((0,w.removeTags)(e.text))}">${(0,w.sanitizeHtml)(e.text).replace(/\n/g,"</br>")}</div>`}const R=/^((?!chrome|android).)*safari/i.test(navigator.userAgent);exports.HTMLElement=(0,a.observer)((({element:e,store:t})=>{const n=o.default.useRef(null),[i,r]=o.default.useState(),[a,s]=o.default.useState(!1),[b,z]=o.default.useState(!0),[T,_]=o.default.useState(!1),C=o.default.useRef(e.height),M=t.selectedShapes.indexOf(e)>=0&&e.selectable,$=e.fontSize/3,{textVerticalResizeEnabled:A}=d.flags,H=(0,g.usePrevious)(e.fontFamily),[I]=(0,g.useFontLoader)(t,e.fontFamily),j=e._editModeEnabled;(0,p.useFadeIn)(n);const P=I?e.fontFamily:H!==e.fontFamily?H:"Arial",D=(0,h.useColor)(e).fill,L=F(e,{fontFamily:P,color:D}),{width:X,height:Y}=function(e,t,n){return o.default.useMemo((()=>(0,m.detectSize)(e)),[e,t.width,n])}(L,e,I);o.default.useEffect((()=>{if(!I){return}if(!e.height){return void e.set({height:Y})}const{textOverflow:n}=d.flags;if("change-font-size"!==n||a){"resize"===n&&(A&&e.height<Y&&t.history.ignore((()=>{e.set({height:Y})})),A||e.height===Y||t.history.ignore((()=>{e.set({height:Y})})))}else{const n=(e=>{let t=e.fontSize;for(let n=1;n<50;n++){const n=F(Object.assign(Object.assign({},e.toJSON()),{fontSize:t}),{fontFamily:e.fontFamily}),{height:i}=(0,m.detectSize)(n),r=e.height&&i>e.height,o=(0,m.isContentWrapping)({html:n});if(!r&&!o){break}t-=.5}return t})(e);n!==e.fontSize?t.history.ignore((()=>{e.set({fontSize:n})})):e.height!==Y&&(A&&e.height<Y?t.history.ignore((()=>{e.set({height:Y})})):A||t.history.ignore((()=>{e.set({height:Y})})))}}));const W=o.default.useRef(0),B=o.default.useMemo((()=>{const e={lastArgs:null,lastResult:null};return async function(t){return e.lastArgs&&e.lastResult&&(n=e.lastArgs,i=t,JSON.stringify(n)===JSON.stringify(i))||(e.lastResult=await(0,m.htmlToCanvas)(t),e.lastArgs=Object.assign({},t)),e.lastResult;var n,i}}),[]);o.default.useEffect((()=>{a||j||(async()=>{W.current++;const n=W.current,i=(0,y.incrementLoader)(`text ${e.id}`);z(!0);let o=null;const a=R?5:1;for(let r=0;r<a;r++){const a=r>0?B:m.htmlToCanvas;try{if(o=await a({skipCache:r>0,html:L,width:e.width||1,height:e.height||Y||1,fontFamily:P,padding:$,pixelRatio:t._elementsPixelRatio,font:t.fonts.find((e=>e.fontFamily===P))||v.globalFonts.find((e=>e.fontFamily===P))}),n!==W.current){return void i()}if(!function(e){const t=e.getContext("2d").getImageData(0,0,e.width,e.height).data;for(let n=0;n<t.length;n+=4){if(0!==t[n+3]){return!0}}return!1}(o)&&R){await new Promise((e=>setTimeout(e,50*(r+1))));continue}}catch(l){(0,y.triggerLoadError)(`Error rendering rich text with id ${e.id}`);break}}o?(r(o),z(!1),u.default.Util.requestAnimFrame(i)):i()})()}),[L,a,Y,j,P,e.height,t._elementsPixelRatio,I]);const[Q,N]=q(b),[J]=q(a,100,!0),V=J||Q;o.default.useEffect((()=>c.autorun((()=>{const t=n.current;(0,f.applyFilter)(t,e)}))),[i,V,e.shadowColor,e.shadowOffsetX,e.shadowOffsetY,e.shadowOpacity]);let G=0;"middle"===e.verticalAlign&&(G=(e.height-Y)/2),"bottom"===e.verticalAlign&&(G=e.height-Y);const U=(0,g.getLineHeight)({fontLoaded:I,fontFamily:e.fontFamily,fontSize:e.fontSize,lineHeight:e.lineHeight}),K=(0,S.isTouchDevice)();return o.default.createElement(o.default.Fragment,null,o.default.createElement(l.Rect,{x:e.a.x,y:e.a.y,offsetX:e.backgroundPadding*(e.fontSize*U*.5),offsetY:e.backgroundPadding*(e.fontSize*U*.5),rotation:e.a.rotation,hideInExport:!e.showInExport,listening:!1,visible:e.backgroundEnabled,opacity:e.backgroundOpacity*e.a.opacity,fill:e.backgroundColor,width:e.a.width+e.backgroundPadding*(e.fontSize*U),height:e.a.height+e.backgroundPadding*(e.fontSize*U),cornerRadius:e.backgroundCornerRadius*(e.fontSize*U*.5)}),o.default.createElement(l.Rect,{ref:n,name:"element",x:e.a.x,y:e.a.y,listening:e.selectable,rotation:e.a.rotation,width:e.a.width,height:e.a.height,visible:!V,draggable:K?e.draggable&&M:e.draggable,preventDefault:!K||M,opacity:j?0:e.a.opacity,hideInExport:!e.showInExport,onDragMove:t=>{e.set({x:t.target.x(),y:t.target.y()})},onDragEnd:t=>{e.set({x:t.target.x(),y:t.target.y()})},id:e.id,onDblClick:()=>{e.contentEditable&&e.toggleEditMode(!0)},onDblTap:()=>{e.contentEditable&&e.toggleEditMode(!0)},onTransformStart:t=>{s(!0),C.current=e.height},onTransform:t=>{var n;const i=t.target,r=(null===(n=i.getStage())||void 0===n?void 0:n.findOne("Transformer")).getActiveAnchor(),o="middle-left"===r||"middle-right"===r,a="top-center"===r||"bottom-center"===r,l=i.scaleX();if(o){const t=i.scaleX(),n=Math.max(i.width()*t,e.fontSize);if(i.width(n),i.scaleX(1),d.flags.textVerticalResizeEnabled){const t=Math.max(Y,C.current);e.set({height:t})}e.set({width:n,x:i.x(),y:i.y()})}else if(a){let n="resize"===d.flags.textOverflow?Y:e.lineHeight*e.fontSize;const r=Math.max(n,t.target.height()*t.target.scaleY());i.scaleY(1),e.set({x:i.x(),y:i.y(),height:r,rotation:i.rotation()})}else{i.scaleX(1),i.scaleY(1),e.set({fontSize:e.fontSize*l,letterSpacing:e.letterSpacing,width:i.width()*l,x:i.x(),y:i.y(),rotation:i.rotation(),height:i.height()*l})}},onTransformEnd:t=>{s(!1),z(!0);const n=t.target.scaleX();t.target.scaleX(1),t.target.scaleY(1),e.set({fontSize:e.fontSize*n,width:t.target.width()*n,x:t.target.x(),y:t.target.y(),rotation:t.target.rotation(),shadowBlur:e.shadowBlur*n,shadowOffsetX:e.shadowOffsetX*n,shadowOffsetY:e.shadowOffsetY*n,strokeWidth:e.strokeWidth*n})}}),o.default.createElement(l.Image,{ref:n,image:i,x:e.a.x,y:e.a.y,offsetX:$,offsetY:$-G,listening:!1,rotation:e.rotation,width:e.a.width+2*$,height:e.a.height+2*$,visible:!V,opacity:j?0:e.a.opacity,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,hideInExport:!e.showInExport}),V&&o.default.createElement(l.Group,{x:e.a.x,y:e.a.y,rotation:e.rotation,offsetY:-G},o.default.createElement(x.Html,{divProps:{style:{pointerEvents:"none"}}},o.default.createElement(E,{dangerouslySetInnerHTML:{__html:L},style:{pointerEvents:"none"}}))),j&&o.default.createElement(l.Group,{x:e.a.x,y:e.a.y,rotation:e.rotation,offsetY:-G},o.default.createElement(x.Html,null,o.default.createElement(O,{html:L,element:e,onChange:t=>{const n=(0,k.getLimitedFontSize)({oldText:(0,w.removeTags)(e.text),newText:(0,w.removeTags)(t),element:e});e.set({text:t,fontSize:n})},onBlur:t=>{e.toggleEditMode(!1),N(!0)}}))))}));

package/canvas/page.js

@@ -1 +1 @@
-var e=this&&this.__rest||function(e,t){var n={};for(var i in e){Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i])}if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var l=0;for(i=Object.getOwnPropertySymbols(e);l<i.length;l++){t.indexOf(i[l])<0&&Object.prototype.propertyIsEnumerable.call(e,i[l])&&(n[i[l]]=e[i[l]])}}return n},t=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.registerNextDomDrop=exports.useContextMenu=exports.setTransformerStyle=void 0,exports.registerTransformerAttrs=function(e,t){X[e]=X[e]||t,Object.assign(X[e],t)};const n=t(require("react")),i=require("mobx-react-lite"),l=require("mobx"),r=require("react-konva"),o=t(require("use-image")),a=t(require("konva")),s=t(require("./element")),d=require("./use-transformer-snap"),c=require("./image-element"),u=require("../utils/crop"),m=require("../utils/validate-key"),g=require("../utils/math"),h=require("../utils/unit"),f=require("../utils/flags"),p=require("../utils/screen"),x=require("./use-color"),b=require("../utils/gradient"),v=require("react-konva-utils"),E=a.default.DD._drag;window.removeEventListener("mousemove",E),a.default.DD._drag=function(e){(0,l.runInAction)((()=>{E.call(this,e)}))},window.addEventListener("mousemove",a.default.DD._drag);const y=new a.default.Group,w=20;y.add(new a.default.Rect({width:w,height:w,fill:"white"})),y.add(new a.default.Path({scaleX:w/24,scaleY:w/24,data:"M4.98313549,11.0001422 C5.49589839,10.9914935 5.92501998,11.3703506 5.99116425,11.8666444 L5.99985778,11.9831355 L6.00348884,12.2068855 C6.11245031,15.4321748 8.76323537,17.9999971 11.9999971,17.9999971 C12.1869612,17.9999971 12.3726725,17.9914753 12.5567465,17.9745765 L12.2928932,17.7071068 C11.9023689,17.3165825 11.9023689,16.6834175 12.2928932,16.2928932 C12.6834175,15.9023689 13.3165825,15.9023689 13.7071068,16.2928932 L15.7071068,18.2928932 C16.0976311,18.6834175 16.0976311,19.3165825 15.7071068,19.7071068 L13.7071068,21.7071068 C13.3165825,22.0976311 12.6834175,22.0976311 12.2928932,21.7071068 C11.9023689,21.3165825 11.9023689,20.6834175 12.2928932,20.2928932 L12.6111505,19.9769552 C12.4086045,19.9922816 12.2047796,19.9999971 11.9999971,19.9999971 C7.7687005,19.9999971 4.28886152,16.7094374 4.01666425,12.5105203 L4.00420123,12.2575143 L4.00014222,12.0168645 C3.9908282,11.4646583 4.43092928,11.0094562 4.98313549,11.0001422 Z M11.7071068,2.29289322 C12.0675907,2.65337718 12.0953203,3.22060824 11.7902954,3.61289944 L11.7071068,3.70710678 L11.3891629,4.0230186 C11.5916051,4.00770767 11.7953244,4 12,4 C16.418278,4 20,7.581722 20,12 C20,12.5522847 19.5522847,13 19,13 C18.4477153,13 18,12.5522847 18,12 C18,8.6862915 15.3137085,6 12,6 C11.8129339,6 11.6271216,6.00853145 11.4429483,6.02544919 L11.7071068,6.29289322 C12.0976311,6.68341751 12.0976311,7.31658249 11.7071068,7.70710678 C11.3466228,8.06759074 10.7793918,8.09532028 10.3871006,7.79029539 L10.2928932,7.70710678 L8.29289322,5.70710678 C7.93240926,5.34662282 7.90467972,4.77939176 8.20970461,4.38710056 L8.29289322,4.29289322 L10.2928932,2.29289322 C10.6834175,1.90236893 11.3165825,1.90236893 11.7071068,2.29289322 Z",fill:"black"}));const C=y.toCanvas({pixelRatio:2,width:w,height:w}),Y={enabledAnchors:["top-left","top-center","top-right","middle-left","bottom-left","bottom-right","bottom-center","middle-right"],borderEnabled:!0,rotateEnabled:!0,rotationSnaps:[0,45,90,135,180,225,270,315],ignoreStroke:!0,flipEnabled:!1,anchorStrokeWidth:2,borderStrokeWidth:2,rotateAnchorOffset:30,anchorStyleFunc:e=>{if(e.hasName("rotater")){const t=20;e.setAttrs({width:t,height:t,cornerRadius:t/2,offsetX:t/2,offsetY:t/2,fillPatternImage:C,fillPatternScaleX:t/w/2,fillPatternScaleY:t/w/2,fillPriority:"pattern",fillPatternRepeat:"no-repeat"})}}};exports.setTransformerStyle=e=>{Object.assign(Y,e)};const X={text:{enabledAnchors:["top-left","top-right","middle-left","bottom-left","bottom-right","middle-right"]},svg:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]},gif:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]},line:{enabledAnchors:[],borderEnabled:!1,rotateEnabled:!1},image:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]},many:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]},group:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]}},S=e=>n.default.createElement(r.Rect,Object.assign({},e,{preventDefault:!1})),k=t=>{var{url:i}=t,l=e(t,["url"]);const[a,s]=(0,o.default)(i,"anonymous"),d=a?(0,u.getCrop)(a,{width:l.width,height:l.height},"center-middle"):{};return(0,c.useImageLoader)(s,i,"page background"),n.default.createElement(r.Image,Object.assign({image:a},l,d))},R=e=>{const t=(0,x.useColor)({fill:e.fill,a:{width:e.width,height:e.height}});return n.default.createElement(r.Rect,Object.assign({},e,t))},A=t=>{const{background:i,scale:l,borderColor:o}=t,s=e(t,["background","scale","borderColor"]),d=n.default.useMemo((()=>!!a.default.Util.colorToRGBA(i)||(0,b.isGradient)(i)),[i]),c=n.default.useMemo((()=>{const e=document.createElement("canvas"),t=30;e.width=60,e.height=60;const n=e.getContext("2d");return n&&(n.fillStyle="black",n.fillRect(t,0,t,t),n.fillRect(0,t,t,t)),e}),[]);return n.default.createElement(n.default.Fragment,null,n.default.createElement(r.Rect,Object.assign({fillPatternImage:c},s,{opacity:.1,hideInExport:!0})),d?n.default.createElement(R,Object.assign({fill:i},s)):n.default.createElement(k,Object.assign({url:i},s)))},L=(0,i.observer)((({selection:e})=>e.visible?n.default.createElement(r.Rect,{name:"selection",x:Math.min(e.x1,e.x2),y:Math.min(e.y1,e.y2),width:Math.abs(e.x1-e.x2),height:Math.abs(e.y1-e.y2),fill:"rgba(0, 161, 255, 0.3)"}):null)),O=(0,i.observer)((({x:e,y:t,width:i,height:l,rotation:o,anchor:s,store:d})=>{const c=(0,g.getClientRect)({x:e,y:t,width:i,height:l,rotation:a.default.Util.radToDeg(o)});if(void 0===s){return null}const u=(l/2+70)*Math.cos(o-Math.PI/2),m=(l/2+70)*Math.sin(o-Math.PI/2),f=(0,h.pxToUnitRounded)({unit:d.unit,dpi:d.dpi,px:i/d.scale,precious:"px"===d.unit?0:1})+" x "+(0,h.pxToUnitRounded)({unit:d.unit,dpi:d.dpi,px:l/d.scale,precious:"px"===d.unit?0:1})+("px"===d.unit?"":" "+d.unit);return n.default.createElement(n.default.Fragment,null,n.default.createElement(r.Label,{x:(c.minX+c.maxX)/2+u,y:(c.minY+c.maxY)/2+m,offsetX:14,offsetY:14,visible:"rotater"===s},n.default.createElement(r.Tag,{cornerRadius:5,fill:"rgb(0, 161, 255)"}),n.default.createElement(r.Text,{align:"center",verticalAlign:"middle",fill:"white",padding:8,text:Math.round(a.default.Util.radToDeg(o)).toString()+"°"})),n.default.createElement(r.Label,{x:(c.minX+c.maxX)/2,y:c.maxY+20,visible:"rotater"!==s},n.default.createElement(r.Tag,{cornerRadius:5,fill:"rgb(0, 161, 255)",pointerDirection:"up",pointerHeight:0,pointerWidth:0}),n.default.createElement(r.Text,{align:"center",verticalAlign:"middle",fill:"white",padding:8,text:f})))})),T=(0,i.observer)((({elements:e,store:t})=>{const i=e.filter((e=>e.alwaysOnTop)),l=e.filter((e=>!e.alwaysOnTop)).concat(i);return n.default.createElement(n.default.Fragment,null,l.map((e=>n.default.createElement(s.default,{key:e.id,store:t,element:e,onClick:()=>{console.warn("Polotno warning: onClick callback is deprecated. Just stop using it. Polotno will do selection automatically.")}}))))}));exports.useContextMenu=({store:e})=>{const[t,i]=n.default.useState(!1),[l,r]=n.default.useState({x:0,y:0}),o=n.default.useCallback((e=>{i(!0),r(e)}),[]);return{open:o,close:n.default.useCallback((()=>{i(!1)}),[]),props:{isOpen:t,offset:l,setIsOpen:i}}};let P=null;exports.registerNextDomDrop=e=>{P=e};const M=atob("UG9sb3RubyBmcmVlIGxpY2Vuc2UgbGltaXRhdGlvbiBleGNlZWRlZCAtIFBsZWFzZSB1cGdyYWRlIHlvdXIgYWNjb3VudC4="),D=atob("cmVk"),I=atob("djAuOS4y"),j=e=>n.default.createElement(n.default.Fragment,null,n.default.createElement(r.Label,{fill:D,height:200},n.default.createElement(r.Tag,{fill:D}),n.default.createElement(r.Text,Object.assign({},e,{fill:"white",text:M,height:void 0,padding:10,fontSize:20}))));exports.default=(0,i.observer)((({store:e,page:t,width:o,height:s,pageControlsEnabled:c,backColor:u,pageBorderColor:x,activePageBorderColor:b,components:E,bleedColor:y,altCloneEnabled:w,viewportSize:C})=>{const k=e.bleedVisible?t.bleed:0,R=t.computedWidth+2*k,M=t.computedHeight+2*k,D=(o-R*e.scale)/2,B=(s-M*e.scale)/2,_=n.default.useRef(null),q=n.default.useRef(null),G=n.default.useRef(null),W=null==c||c,[z,N]=n.default.useState(null),[U,F]=n.default.useState({}),H=(0,exports.useContextMenu)({store:e}),V=e.selectedElements.find((e=>e._cropModeEnabled)),Z=e.selectedShapes.filter((e=>!e.resizable)).length>0,K=e.selectedShapes.filter((e=>!e.draggable)).length>0,J=e.selectedElements.filter((e=>!e.visible)).length>0;n.default.useLayoutEffect((()=>{var t,n,i;if(!_.current){return}const l=_.current.getStage(),r=e.selectedShapes.map((e=>e._cropModeEnabled?null:l.findOne("#"+e.id))).filter((e=>e)),o=1===e.selectedElements.length&&(null===(t=e.selectedElements[0])||void 0===t?void 0:t.type)||"many";X[o]?(_.current.setAttrs(Object.assign(Object.assign({},Y),X[o])),"svg"!==o&&"image"!==o&&"gif"!==o||e.selectedElements[0].keepRatio||_.current.setAttrs({enabledAnchors:Y.enabledAnchors}),"text"===o&&f.flags.textVerticalResizeEnabled&&_.current.setAttrs({enabledAnchors:null===(n=X.text.enabledAnchors)||void 0===n?void 0:n.concat(["bottom-center"])})):_.current.setAttrs(Y),Z&&_.current.enabledAnchors([]),K&&_.current.rotateEnabled(!1),r.find((e=>null==e?void 0:e.isDragging()))&&r.forEach((e=>{e.isDragging()||null==e||e.startDrag()})),_.current.nodes(r),null===(i=_.current.getLayer())||void 0===i||i.batchDraw()}),[e.selectedShapes,V,Z,J,K]);const $=(0,i.useLocalObservable)((()=>({visible:!1,x1:0,y1:0,x2:0,y2:0}))),Q=n.default.useRef(!1),ee=(0,p.isTouchDevice)(),te=(0,l.action)((e=>{var t,n,i,l;if(ee){return}Q.current=!1;const r=e.target.findAncestor(".elements-container"),o=e.target.findAncestor("Transformer"),a=e.target.findAncestor(".page-abs-container");if(r||o||a){return}const s=null===(t=e.target.getStage())||void 0===t?void 0:t.getPointerPosition();s.x-=null===(n=e.target.getStage())||void 0===n?void 0:n.x(),s.y-=null===(i=e.target.getStage())||void 0===i?void 0:i.y(),s&&($.visible=!0,$.x1=s.x,$.y1=s.y,$.x2=s.x,$.y2=s.y,(null===(l=e.target.getStage())||void 0===l?void 0:l.getPointersPositions().length)>=2&&($.visible=!1))}));(({stageRef:e,containerRef:t,viewportSize:i})=>{n.default.useEffect((()=>{var n;const i=null===(n=t.current)||void 0===n?void 0:n.closest(".polotno-workspace-inner");function l(){var n;if(!e.current){return}const l=null===(n=t.current)||void 0===n?void 0:n.getBoundingClientRect(),r=null==i?void 0:i.getBoundingClientRect(),o=Math.max(0,r.left-l.left-100),a=Math.max(0,r.top-l.top-100);e.current.position({x:-o,y:-a}),e.current.container().style.transform=`translate(${o}px, ${a}px)`}return l(),i.addEventListener("scroll",l),()=>{i.removeEventListener("scroll",l)}}),[i.width,i.height])})({stageRef:q,containerRef:G,viewportSize:C}),n.default.useEffect((()=>{const t=(0,l.action)((e=>{var t,n,i,l;if(!$.visible){return}null===(t=q.current)||void 0===t||t.setPointersPositions(e);let r=null===(n=q.current)||void 0===n?void 0:n.getPointerPosition();r?(r.x-=null===(i=q.current)||void 0===i?void 0:i.x(),r.y-=null===(l=q.current)||void 0===l?void 0:l.y()):r={x:$.x2,y:$.y2},$.x2=r.x,$.y2=r.y})),n=(0,l.action)((()=>{if(!$.visible){return}if(!q.current){return}const t=q.current.findOne(".selection"),n=t?t.getClientRect():{width:0,height:0,x:0,y:0};if(n.width&&n.height){const t=[];q.current.find(".element").forEach((i=>{const l=i.getClientRect(),r=e.getElementById(i.id()),o=null==r?void 0:r.draggable,s=null==r?void 0:r.selectable;a.default.Util.haveIntersection(n,l)&&o&&s&&t.push(r.top.id)}));const i=[...new Set(t)];e.selectElements(i)}$.visible=!1,Q.current=!0}));return window.addEventListener("mousemove",t),window.addEventListener("touchmove",t),window.addEventListener("mouseup",n),window.addEventListener("touchend",n),()=>{window.removeEventListener("mousemove",t),window.removeEventListener("touchmove",t),window.removeEventListener("mouseup",n),window.removeEventListener("touchend",n)}}),[]);const ne=n.default.useRef(!1);n.default.useEffect((()=>{var e;let t;const n=null===(e=G.current)||void 0===e?void 0:e.closest(".polotno-workspace-inner"),i=()=>{ne.current=!0,clearTimeout(t),t=setTimeout((()=>{ne.current=!1}),300)};return n.addEventListener("scroll",i),()=>{clearTimeout(t),n.removeEventListener("scroll",i)}}),[]);const ie=n=>{if(e.activePage!==t&&t.select(),ne.current){return}if(Q.current){return}const i=n.evt.ctrlKey||n.evt.metaKey||n.evt.shiftKey,l=n.target.findAncestor(".elements-container"),r=n.target.findAncestor(".page-abs-container"),o=n.target.findAncestor("Transformer");if(!(i||l||o||r)){return void e.selectElements([])}const a=n.target.findAncestor(".element",!0),s=e.getElementById(null==a?void 0:a.id()),d=null==s?void 0:s.top,c=null==d?void 0:d.id,u=e.selectedElementsIds.indexOf(c)>=0;c&&i&&!u?e.selectElements(e.selectedElementsIds.concat([c])):c&&i&&u?e.selectElements(e.selectedElementsIds.filter((e=>e!==c))):!c||i||u||e.selectElements([c])};(0,d.useSnap)(_,e);const le=e.activePage===t,re=null==E?void 0:E.PageControls,oe=null==E?void 0:E.Tooltip,ae=null==E?void 0:E.ContextMenu,se=1/e.scale,de=0/e.scale;return n.default.createElement("div",{ref:G,onDragOver:e=>e.preventDefault(),onDrop:n=>{if(n.preventDefault(),!q.current){return}q.current.setPointersPositions(n);const i=q.current.findOne(".elements-container").getRelativePointerPosition(),l=q.current.getPointerPosition(),r=q.current.getAllIntersections(l).map((e=>e.findAncestor(".element",!0))).filter(Boolean),o=[...new Set(r.reverse())].map((t=>e.getElementById(t.id()))),a=o[0];P&&(P(i,a,{elements:o,page:t}),P=null)},style:{position:"relative",width:o+"px",height:s+"px",overflow:"hidden"},className:"polotno-page-container"+(le?" active-page":"")},n.default.createElement(r.Stage,{ref:q,width:Math.min(o,C.width+200),height:Math.min(C.height+200,s),onClick:ie,onTap:ie,onContextMenu:t=>{t.evt.preventDefault();const n=t.target.findAncestor(".element",!0),i=e.getElementById(null==n?void 0:n.id()),l=null==i?void 0:i.top,r=null==l?void 0:l.id;r?e.selectedElementsIds.indexOf(r)>=0||e.selectElements([r]):e.selectElements([]),H.open({x:t.evt.clientX,y:t.evt.clientY})},onMouseDown:te,onMouseMove:n=>{if(!n.evt.altKey&&z){return void N(null)}if(!n.evt.altKey){return}const i=n.target.findAncestor(".element",!0),l=null==i?void 0:i.id();if(!e.selectedElements[0]){return}if(e.selectedElementsIds.includes(l)){return}const r=(0,g.getTotalClientRect)(e.selectedShapes),o=l?e.getElementById(l):{x:0,y:0,width:t.computedWidth,height:t.computedHeight,rotation:0},a=(0,g.getClientRect)(o),s=[];r.minX>a.maxX&&s.push({distance:r.minX-a.maxX,box1:r,box2:a,points:[{x:r.minX,y:r.minY+r.height/2},{x:a.maxX,y:r.minY+r.height/2},{x:a.maxX,y:a.minY+a.height/2}]}),r.maxX<a.minX&&s.push({distance:a.minX-r.maxX,box1:r,box2:a,points:[{x:r.maxX,y:r.minY+r.height/2},{x:a.minX,y:r.minY+r.height/2},{x:a.minX,y:a.minY+a.height/2}]}),r.minY>a.maxY&&s.push({box1:r,box2:a,distance:r.minY-a.maxY,points:[{x:r.minX+r.width/2,y:r.minY},{x:r.minX+r.width/2,y:a.maxY},{x:a.minX+a.width/2,y:a.maxY}]}),r.maxY<a.minY&&s.push({box1:r,box2:a,distance:a.minY-r.maxY,points:[{x:r.minX+r.width/2,y:r.maxY},{x:r.minX+r.width/2,y:a.minY},{x:a.minX+a.width/2,y:a.minY}]}),r.minX>=a.minX&&r.maxX<=a.maxX&&r.minY>=a.minY&&r.maxY<=a.maxY&&(s.push({distance:r.minX-a.minX,box1:r,box2:a,points:[{x:r.minX,y:r.minY+r.height/2},{x:a.minX,y:r.minY+r.height/2},{x:a.minX,y:a.minY+a.height/2}]}),s.push({distance:a.maxX-r.maxX,box1:r,box2:a,points:[{x:r.maxX,y:r.minY+r.height/2},{x:a.maxX,y:r.minY+r.height/2},{x:a.maxX,y:a.minY+a.height/2}]}),s.push({box1:r,box2:a,distance:r.minY-a.minY,points:[{x:r.minX+r.width/2,y:r.minY},{x:r.minX+r.width/2,y:a.minY},{x:a.minX+a.width/2,y:a.minY}]}),s.push({box1:r,box2:a,distance:a.maxY-r.maxY,points:[{x:r.minX+r.width/2,y:r.maxY},{x:r.minX+r.width/2,y:a.maxY},{x:a.minX+a.width/2,y:a.maxY}]})),JSON.stringify(z)!==JSON.stringify(s)&&N(s)},onDragStart:t=>{var n;const i=t.target.findAncestor(".element",!0);if(i){const l=e.getElementById(null==i?void 0:i.id()),r=null==l?void 0:l.top,o=null==r?void 0:r.id;!(e.selectedElementsIds.indexOf(o)>=0)&&o&&(e.selectElements([o]),t.target.stopDrag(),t.target.startDrag(t),null===(n=_.current)||void 0===n||n.startDrag(t))}z&&N(null)},pageId:t.id,style:{position:"absolute",overflow:"hidden",top:0,left:0}},n.default.createElement(r.Layer,null,n.default.createElement(S,{width:o,height:s,fill:u}),n.default.createElement(r.Group,{x:D,y:B,scaleX:e.scale,scaleY:e.scale,name:"page-container"},n.default.createElement(r.Group,{name:"page-container-2"},n.default.createElement(r.Group,{name:"page-background-group",x:k,y:k},n.default.createElement(A,{x:-t.bleed,y:-t.bleed,width:t.computedWidth+2*t.bleed,height:t.computedHeight+2*t.bleed,background:t.background,name:"page-background",preventDefault:!1,scale:e.scale})),n.default.createElement(r.Group,{x:k,y:k,name:"elements-container",listening:!e.isPlaying},n.default.createElement(r.Rect,{name:"elements-area",width:t.computedWidth,height:t.computedHeight,listening:!1}),n.default.createElement(T,{elements:t.children,store:e})),n.default.createElement(r.Rect,{stroke:y,name:"bleed",strokeWidth:t.bleed,x:t.bleed/2,y:t.bleed/2,width:t.computedWidth+t.bleed,height:t.computedHeight+t.bleed,listening:!1,visible:t.bleed>0&&e.bleedVisible,hideInExport:!0}),(0,m.___)()===I&&n.default.createElement(j,{name:"hit-detection",x:-se/2-de,y:-se/2-de,width:R+se+2*de,height:M+se+2*de}))),n.default.createElement(r.Line,{name:"workspace-background",points:[0,0,o,0,o,s,0,s,0,0,D,B,D,s-B,o-D,s-B,o-D,B,D,B],listening:!1,closed:!0,fill:u}),n.default.createElement(r.Group,{x:D,y:B,scaleX:e.scale,scaleY:e.scale},n.default.createElement(r.Rect,{name:"page-highlight",hideInExport:!0,x:-se/2-de,y:-se/2-de,width:R+se+2*de,height:M+se+2*de,stroke:le&&e.pages.length>1?b:x,strokeWidth:2,listening:!1,strokeScaleEnabled:!1})),n.default.createElement(r.Group,{x:D+k*e.scale,y:B+k*e.scale,scaleX:e.scale,scaleY:e.scale,name:"page-abs-container"},n.default.createElement(r.Transformer,{ref:_,onDragStart:n=>{var i;(null===(i=n.evt)||void 0===i?void 0:i.altKey)&&w&&e.selectedElements.forEach((e=>{const n=e.clone({},{skipSelect:!0}),i=t.children.indexOf(e);t.setElementZIndex(n.id,i)})),e.history.startTransaction()},onDragEnd:()=>{e.history.endTransaction()},onTransformStart:()=>{e.history.startTransaction()},boundBoxFunc:(e,t)=>{const n=Math.abs(t.width)<1||Math.abs(t.height)<1,i=Math.abs(e.width)<1||Math.abs(e.height)<1;return n&&!i?e:t},onTransform:e=>{var t,n;const i=_.current.nodes(),l=i[i.length-1];if(e.target!==l){return}const r=null===(t=_.current)||void 0===t?void 0:t.__getNodeRect(),o=null===(n=_.current)||void 0===n?void 0:n.getActiveAnchor();F({anchor:o,x:r.x,y:r.y,rotation:r.rotation,width:r.width,height:r.height})},onTransformEnd:t=>{F({}),e.history.endTransaction()},visible:!e.isPlaying}),z&&z.map((({points:t,distance:i,box1:l,box2:o},a)=>n.default.createElement(r.Group,{name:"distances-container",hideInExport:!0,key:a,listening:!1},n.default.createElement(r.Rect,Object.assign({},l,{stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1})),n.default.createElement(r.Rect,Object.assign({},o,{stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1})),n.default.createElement(r.Line,{points:[t[0].x,t[0].y,t[1].x,t[1].y],stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1}),n.default.createElement(r.Line,{points:[t[1].x,t[1].y,t[2].x,t[2].y],stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1}),n.default.createElement(r.Label,{x:(t[0].x+t[1].x)/2,y:(t[0].y+t[1].y)/2,offsetY:-10,scaleX:1/e.scale,scaleY:1/e.scale},n.default.createElement(r.Tag,{cornerRadius:5,fill:"rgb(0, 161, 255)",pointerDirection:"down"}),n.default.createElement(r.Text,{align:"center",verticalAlign:"middle",fill:"white",padding:5,text:(0,h.pxToUnitString)({unit:e.unit,dpi:e.dpi,px:i})}))))),t._rendering&&n.default.createElement(r.Group,null,n.default.createElement(r.Rect,{width:R,height:M,fill:"rgba(255,255,255,0.9)"}),n.default.createElement(r.Text,{text:"Rendering...",fontSize:60,width:R,height:M,align:"center",verticalAlign:"middle"})),oe&&n.default.createElement(oe,{components:E,store:e,page:t,stageRef:q}),ae&&n.default.createElement(v.Html,null,n.default.createElement(ae,Object.assign({components:E,store:e},H.props)))),n.default.createElement(O,Object.assign({},U,{store:e})),n.default.createElement(L,{selection:$}),(0,m.isCreditVisible)()&&n.default.createElement(r.Text,{text:"Powered by polotno.com",fontSize:14,fill:"rgba(0,0,0,0.6)",x:o-170,y:s-18,onMouseEnter:e=>{e.target.getStage().container().style.cursor="pointer"},onMouseLeave:e=>{e.target.getStage().container().style.cursor=""},onTouchStart:e=>{e.cancelBubble=!0},onMouseDown:e=>{e.cancelBubble=!0},onClick:()=>{window.open("https://polotno.com")},onTap:()=>{window.open("https://polotno.com")}}),n.default.createElement(r.Group,{name:"line-guides"}))),W&&re&&n.default.createElement(re,{store:e,page:t,xPadding:D,yPadding:B}))}));
+var e=this&&this.__rest||function(e,t){var n={};for(var i in e){Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i])}if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var l=0;for(i=Object.getOwnPropertySymbols(e);l<i.length;l++){t.indexOf(i[l])<0&&Object.prototype.propertyIsEnumerable.call(e,i[l])&&(n[i[l]]=e[i[l]])}}return n},t=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.registerNextDomDrop=exports.useContextMenu=exports.setTransformerStyle=void 0,exports.registerTransformerAttrs=function(e,t){X[e]=X[e]||t,Object.assign(X[e],t)};const n=t(require("react")),i=require("mobx-react-lite"),l=require("mobx"),r=require("react-konva"),o=t(require("use-image")),a=t(require("konva")),s=t(require("./element")),d=require("./use-transformer-snap"),c=require("./image-element"),u=require("../utils/crop"),m=require("../utils/validate-key"),g=require("../utils/math"),h=require("../utils/unit"),f=require("../utils/flags"),p=require("../utils/screen"),x=require("./use-color"),b=require("../utils/gradient"),v=require("react-konva-utils"),E=a.default.DD._drag;window.removeEventListener("mousemove",E),a.default.DD._drag=function(e){(0,l.runInAction)((()=>{E.call(this,e)}))},window.addEventListener("mousemove",a.default.DD._drag);const y=new a.default.Group,w=20;y.add(new a.default.Rect({width:w,height:w,fill:"white"})),y.add(new a.default.Path({scaleX:w/24,scaleY:w/24,data:"M4.98313549,11.0001422 C5.49589839,10.9914935 5.92501998,11.3703506 5.99116425,11.8666444 L5.99985778,11.9831355 L6.00348884,12.2068855 C6.11245031,15.4321748 8.76323537,17.9999971 11.9999971,17.9999971 C12.1869612,17.9999971 12.3726725,17.9914753 12.5567465,17.9745765 L12.2928932,17.7071068 C11.9023689,17.3165825 11.9023689,16.6834175 12.2928932,16.2928932 C12.6834175,15.9023689 13.3165825,15.9023689 13.7071068,16.2928932 L15.7071068,18.2928932 C16.0976311,18.6834175 16.0976311,19.3165825 15.7071068,19.7071068 L13.7071068,21.7071068 C13.3165825,22.0976311 12.6834175,22.0976311 12.2928932,21.7071068 C11.9023689,21.3165825 11.9023689,20.6834175 12.2928932,20.2928932 L12.6111505,19.9769552 C12.4086045,19.9922816 12.2047796,19.9999971 11.9999971,19.9999971 C7.7687005,19.9999971 4.28886152,16.7094374 4.01666425,12.5105203 L4.00420123,12.2575143 L4.00014222,12.0168645 C3.9908282,11.4646583 4.43092928,11.0094562 4.98313549,11.0001422 Z M11.7071068,2.29289322 C12.0675907,2.65337718 12.0953203,3.22060824 11.7902954,3.61289944 L11.7071068,3.70710678 L11.3891629,4.0230186 C11.5916051,4.00770767 11.7953244,4 12,4 C16.418278,4 20,7.581722 20,12 C20,12.5522847 19.5522847,13 19,13 C18.4477153,13 18,12.5522847 18,12 C18,8.6862915 15.3137085,6 12,6 C11.8129339,6 11.6271216,6.00853145 11.4429483,6.02544919 L11.7071068,6.29289322 C12.0976311,6.68341751 12.0976311,7.31658249 11.7071068,7.70710678 C11.3466228,8.06759074 10.7793918,8.09532028 10.3871006,7.79029539 L10.2928932,7.70710678 L8.29289322,5.70710678 C7.93240926,5.34662282 7.90467972,4.77939176 8.20970461,4.38710056 L8.29289322,4.29289322 L10.2928932,2.29289322 C10.6834175,1.90236893 11.3165825,1.90236893 11.7071068,2.29289322 Z",fill:"black"}));const C=y.toCanvas({pixelRatio:2,width:w,height:w}),Y={enabledAnchors:["top-left","top-center","top-right","middle-left","bottom-left","bottom-right","bottom-center","middle-right"],borderEnabled:!0,rotateEnabled:!0,rotationSnaps:[0,45,90,135,180,225,270,315],ignoreStroke:!0,flipEnabled:!1,anchorStrokeWidth:2,borderStrokeWidth:2,rotateAnchorOffset:30,anchorStyleFunc:e=>{if(e.hasName("rotater")){const t=20;e.setAttrs({width:t,height:t,cornerRadius:t/2,offsetX:t/2,offsetY:t/2,fillPatternImage:C,fillPatternScaleX:t/w/2,fillPatternScaleY:t/w/2,fillPriority:"pattern",fillPatternRepeat:"no-repeat"})}}};exports.setTransformerStyle=e=>{Object.assign(Y,e)};const X={text:{enabledAnchors:["top-left","top-right","middle-left","bottom-left","bottom-right","middle-right"]},svg:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]},gif:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]},line:{enabledAnchors:[],borderEnabled:!1,rotateEnabled:!1},image:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]},many:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]},group:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]}},S=e=>n.default.createElement(r.Rect,Object.assign({},e,{preventDefault:!1})),k=t=>{var{url:i}=t,l=e(t,["url"]);const[a,s]=(0,o.default)(i,"anonymous"),d=a?(0,u.getCrop)(a,{width:l.width,height:l.height},"center-middle"):{};return(0,c.useImageLoader)(s,i,"page background"),n.default.createElement(r.Image,Object.assign({image:a},l,d))},R=e=>{const t=(0,x.useColor)({fill:e.fill,a:{width:e.width,height:e.height}});return n.default.createElement(r.Rect,Object.assign({},e,t))},A=t=>{const{background:i,scale:l,borderColor:o}=t,s=e(t,["background","scale","borderColor"]),d=n.default.useMemo((()=>!!a.default.Util.colorToRGBA(i)||(0,b.isGradient)(i)),[i]),c=n.default.useMemo((()=>{const e=document.createElement("canvas"),t=30;e.width=60,e.height=60;const n=e.getContext("2d");return n&&(n.fillStyle="black",n.fillRect(t,0,t,t),n.fillRect(0,t,t,t)),e}),[]);return n.default.createElement(n.default.Fragment,null,n.default.createElement(r.Rect,Object.assign({fillPatternImage:c},s,{opacity:.1,hideInExport:!0})),d?n.default.createElement(R,Object.assign({fill:i},s)):n.default.createElement(k,Object.assign({url:i},s)))},L=(0,i.observer)((({selection:e})=>e.visible?n.default.createElement(r.Rect,{name:"selection",x:Math.min(e.x1,e.x2),y:Math.min(e.y1,e.y2),width:Math.abs(e.x1-e.x2),height:Math.abs(e.y1-e.y2),fill:"rgba(0, 161, 255, 0.3)"}):null)),O=(0,i.observer)((({x:e,y:t,width:i,height:l,rotation:o,anchor:s,store:d})=>{const c=(0,g.getClientRect)({x:e,y:t,width:i,height:l,rotation:a.default.Util.radToDeg(o)});if(void 0===s){return null}const u=(l/2+70)*Math.cos(o-Math.PI/2),m=(l/2+70)*Math.sin(o-Math.PI/2),f=(0,h.pxToUnitRounded)({unit:d.unit,dpi:d.dpi,px:i/d.scale,precious:"px"===d.unit?0:1})+" x "+(0,h.pxToUnitRounded)({unit:d.unit,dpi:d.dpi,px:l/d.scale,precious:"px"===d.unit?0:1})+("px"===d.unit?"":" "+d.unit);return n.default.createElement(n.default.Fragment,null,n.default.createElement(r.Label,{x:(c.minX+c.maxX)/2+u,y:(c.minY+c.maxY)/2+m,offsetX:14,offsetY:14,visible:"rotater"===s},n.default.createElement(r.Tag,{cornerRadius:5,fill:"rgb(0, 161, 255)"}),n.default.createElement(r.Text,{align:"center",verticalAlign:"middle",fill:"white",padding:8,text:Math.round(a.default.Util.radToDeg(o)).toString()+"°"})),n.default.createElement(r.Label,{x:(c.minX+c.maxX)/2,y:c.maxY+20,visible:"rotater"!==s},n.default.createElement(r.Tag,{cornerRadius:5,fill:"rgb(0, 161, 255)",pointerDirection:"up",pointerHeight:0,pointerWidth:0}),n.default.createElement(r.Text,{align:"center",verticalAlign:"middle",fill:"white",padding:8,text:f})))})),T=(0,i.observer)((({elements:e,store:t})=>{const i=e.filter((e=>e.alwaysOnTop)),l=e.filter((e=>!e.alwaysOnTop)).concat(i);return n.default.createElement(n.default.Fragment,null,l.map((e=>n.default.createElement(s.default,{key:e.id,store:t,element:e,onClick:()=>{console.warn("Polotno warning: onClick callback is deprecated. Just stop using it. Polotno will do selection automatically.")}}))))}));exports.useContextMenu=({store:e})=>{const[t,i]=n.default.useState(!1),[l,r]=n.default.useState({x:0,y:0}),o=n.default.useCallback((e=>{i(!0),r(e)}),[]);return{open:o,close:n.default.useCallback((()=>{i(!1)}),[]),props:{isOpen:t,offset:l,setIsOpen:i}}};let P=null;exports.registerNextDomDrop=e=>{P=e};const M=atob("UG9sb3RubyBmcmVlIGxpY2Vuc2UgbGltaXRhdGlvbiBleGNlZWRlZCAtIFBsZWFzZSB1cGdyYWRlIHlvdXIgYWNjb3VudC4="),D=atob("cmVk"),I=atob("djAuOS4y"),j=e=>n.default.createElement(n.default.Fragment,null,n.default.createElement(r.Label,{fill:D,height:200},n.default.createElement(r.Tag,{fill:D}),n.default.createElement(r.Text,Object.assign({},e,{fill:"white",text:M,height:void 0,padding:10,fontSize:20}))));exports.default=(0,i.observer)((({store:e,page:t,width:o,height:s,pageControlsEnabled:c,backColor:u,pageBorderColor:x,activePageBorderColor:b,components:E,bleedColor:y,altCloneEnabled:w,viewportSize:C})=>{const k=e.bleedVisible?t.bleed:0,R=t.computedWidth+2*k,M=t.computedHeight+2*k,D=(o-R*e.scale)/2,B=(s-M*e.scale)/2,_=n.default.useRef(null),q=n.default.useRef(null),G=n.default.useRef(null),W=null==c||c,[z,N]=n.default.useState(null),[U,F]=n.default.useState({}),H=(0,exports.useContextMenu)({store:e}),V=e.selectedElements.find((e=>e._cropModeEnabled)),Z=e.selectedShapes.filter((e=>!e.resizable)).length>0,K=e.selectedShapes.filter((e=>!e.draggable)).length>0,J=e.selectedElements.filter((e=>!e.visible)).length>0;n.default.useLayoutEffect((()=>{var t,n,i;if(!_.current){return}const l=_.current.getStage(),r=e.selectedShapes.map((e=>e._cropModeEnabled?null:l.findOne("#"+e.id))).filter((e=>e)),o=1===e.selectedElements.length&&(null===(t=e.selectedElements[0])||void 0===t?void 0:t.type)||"many";X[o]?(_.current.setAttrs(Object.assign(Object.assign({},Y),X[o])),"svg"!==o&&"image"!==o&&"gif"!==o||e.selectedElements[0].keepRatio||_.current.setAttrs({enabledAnchors:Y.enabledAnchors}),"text"===o&&f.flags.textVerticalResizeEnabled&&_.current.setAttrs({enabledAnchors:null===(n=X.text.enabledAnchors)||void 0===n?void 0:n.concat(["bottom-center"])})):_.current.setAttrs(Y),Z&&_.current.enabledAnchors([]),K&&_.current.rotateEnabled(!1),r.find((e=>null==e?void 0:e.isDragging()))&&r.forEach((e=>{e.isDragging()||null==e||e.startDrag()})),_.current.nodes(r),null===(i=_.current.getLayer())||void 0===i||i.batchDraw()}),[e.selectedShapes,V,Z,J,K]);const $=(0,i.useLocalObservable)((()=>({visible:!1,x1:0,y1:0,x2:0,y2:0}))),Q=n.default.useRef(!1),ee=(0,p.isTouchDevice)(),te=(0,l.action)((e=>{var t,n,i,l;if(ee){return}Q.current=!1;const r=e.target.findAncestor(".elements-container"),o=e.target.findAncestor("Transformer"),a=e.target.findAncestor(".page-abs-container");if(r||o||a){return}const s=null===(t=e.target.getStage())||void 0===t?void 0:t.getPointerPosition();s.x-=null===(n=e.target.getStage())||void 0===n?void 0:n.x(),s.y-=null===(i=e.target.getStage())||void 0===i?void 0:i.y(),s&&($.visible=!0,$.x1=s.x,$.y1=s.y,$.x2=s.x,$.y2=s.y,(null===(l=e.target.getStage())||void 0===l?void 0:l.getPointersPositions().length)>=2&&($.visible=!1))}));(({stageRef:e,containerRef:t,viewportSize:i})=>{n.default.useEffect((()=>{var n;const i=null===(n=t.current)||void 0===n?void 0:n.closest(".polotno-workspace-inner");function l(){var n;if(!e.current){return}const l=null===(n=t.current)||void 0===n?void 0:n.getBoundingClientRect(),r=null==i?void 0:i.getBoundingClientRect(),o=Math.max(0,r.left-l.left-100),a=Math.max(0,r.top-l.top-100);e.current.position({x:-o,y:-a}),e.current.container().style.transform=`translate(${o}px, ${a}px)`}return l(),i.addEventListener("scroll",l),()=>{i.removeEventListener("scroll",l)}}),[i.width,i.height])})({stageRef:q,containerRef:G,viewportSize:C}),n.default.useEffect((()=>{const t=(0,l.action)((e=>{var t,n,i,l;if(!$.visible){return}null===(t=q.current)||void 0===t||t.setPointersPositions(e);let r=null===(n=q.current)||void 0===n?void 0:n.getPointerPosition();r?(r.x-=null===(i=q.current)||void 0===i?void 0:i.x(),r.y-=null===(l=q.current)||void 0===l?void 0:l.y()):r={x:$.x2,y:$.y2},$.x2=r.x,$.y2=r.y})),n=(0,l.action)((()=>{if(!$.visible){return}if(!q.current){return}const t=q.current.findOne(".selection"),n=t?t.getClientRect():{width:0,height:0,x:0,y:0};if(n.width&&n.height){const t=[];q.current.find(".element").forEach((i=>{const l=i.getClientRect(),r=e.getElementById(i.id()),o=null==r?void 0:r.draggable,s=null==r?void 0:r.selectable;a.default.Util.haveIntersection(n,l)&&o&&s&&t.push(r.top.id)}));const i=[...new Set(t)];e.selectElements(i)}$.visible=!1,Q.current=!0}));return window.addEventListener("mousemove",t),window.addEventListener("touchmove",t),window.addEventListener("mouseup",n),window.addEventListener("touchend",n),()=>{window.removeEventListener("mousemove",t),window.removeEventListener("touchmove",t),window.removeEventListener("mouseup",n),window.removeEventListener("touchend",n)}}),[]);const ne=n.default.useRef(!1);n.default.useEffect((()=>{var e;let t;const n=null===(e=G.current)||void 0===e?void 0:e.closest(".polotno-workspace-inner"),i=()=>{ne.current=!0,clearTimeout(t),t=setTimeout((()=>{ne.current=!1}),300)};return n.addEventListener("scroll",i),()=>{clearTimeout(t),n.removeEventListener("scroll",i)}}),[]);const ie=n=>{if(e.activePage!==t&&t.select(),ne.current){return}if(Q.current){return}const i=n.evt.ctrlKey||n.evt.metaKey||n.evt.shiftKey,l=n.target.findAncestor(".elements-container"),r=n.target.findAncestor(".page-abs-container"),o=n.target.findAncestor("Transformer");if(!(i||l||o||r)){return void e.selectElements([])}const a=n.target.findAncestor(".element",!0),s=e.getElementById(null==a?void 0:a.id()),d=null==s?void 0:s.top,c=null==d?void 0:d.id,u=e.selectedElementsIds.indexOf(c)>=0;c&&i&&!u?e.selectElements(e.selectedElementsIds.concat([c])):c&&i&&u?e.selectElements(e.selectedElementsIds.filter((e=>e!==c))):!c||i||u||e.selectElements([c])};(0,d.useSnap)(_,e);const le=e.activePage===t,re=null==E?void 0:E.PageControls,oe=null==E?void 0:E.Tooltip,ae=null==E?void 0:E.ContextMenu,se=1/e.scale,de=0/e.scale;return n.default.createElement("div",{ref:G,onDragOver:e=>e.preventDefault(),onDrop:n=>{if(n.preventDefault(),!q.current){return}q.current.setPointersPositions(n);const i=q.current.findOne(".elements-container").getRelativePointerPosition(),l=q.current.getPointerPosition(),r=q.current.getAllIntersections(l).map((e=>e.findAncestor(".element",!0))).filter(Boolean),o=[...new Set(r.reverse())].map((t=>e.getElementById(t.id()))),a=o[0];P&&(P(i,a,{elements:o,page:t}),P=null)},style:{position:"relative",width:o+"px",height:s+"px",overflow:"hidden"},className:"polotno-page-container"+(le?" active-page":"")},n.default.createElement(r.Stage,{ref:q,width:Math.min(o,C.width+200),height:Math.min(C.height+200,s),onClick:ie,onTap:ie,onContextMenu:t=>{t.evt.preventDefault();const n=t.target.findAncestor(".element",!0),i=e.getElementById(null==n?void 0:n.id()),l=null==i?void 0:i.top,r=null==l?void 0:l.id;r?e.selectedElementsIds.indexOf(r)>=0||e.selectElements([r]):e.selectElements([]),H.open({x:t.evt.clientX,y:t.evt.clientY})},onMouseDown:te,onMouseMove:n=>{if(!n.evt.altKey&&z){return void N(null)}if(!n.evt.altKey){return}const i=n.target.findAncestor(".element",!0),l=null==i?void 0:i.id();if(!e.selectedElements[0]){return}if(e.selectedElementsIds.includes(l)){return}const r=(0,g.getTotalClientRect)(e.selectedShapes),o=l?e.getElementById(l):{x:0,y:0,width:t.computedWidth,height:t.computedHeight,rotation:0},a=(0,g.getClientRect)(o),s=[];r.minX>a.maxX&&s.push({distance:r.minX-a.maxX,box1:r,box2:a,points:[{x:r.minX,y:r.minY+r.height/2},{x:a.maxX,y:r.minY+r.height/2},{x:a.maxX,y:a.minY+a.height/2}]}),r.maxX<a.minX&&s.push({distance:a.minX-r.maxX,box1:r,box2:a,points:[{x:r.maxX,y:r.minY+r.height/2},{x:a.minX,y:r.minY+r.height/2},{x:a.minX,y:a.minY+a.height/2}]}),r.minY>a.maxY&&s.push({box1:r,box2:a,distance:r.minY-a.maxY,points:[{x:r.minX+r.width/2,y:r.minY},{x:r.minX+r.width/2,y:a.maxY},{x:a.minX+a.width/2,y:a.maxY}]}),r.maxY<a.minY&&s.push({box1:r,box2:a,distance:a.minY-r.maxY,points:[{x:r.minX+r.width/2,y:r.maxY},{x:r.minX+r.width/2,y:a.minY},{x:a.minX+a.width/2,y:a.minY}]}),r.minX>=a.minX&&r.maxX<=a.maxX&&r.minY>=a.minY&&r.maxY<=a.maxY&&(s.push({distance:r.minX-a.minX,box1:r,box2:a,points:[{x:r.minX,y:r.minY+r.height/2},{x:a.minX,y:r.minY+r.height/2},{x:a.minX,y:a.minY+a.height/2}]}),s.push({distance:a.maxX-r.maxX,box1:r,box2:a,points:[{x:r.maxX,y:r.minY+r.height/2},{x:a.maxX,y:r.minY+r.height/2},{x:a.maxX,y:a.minY+a.height/2}]}),s.push({box1:r,box2:a,distance:r.minY-a.minY,points:[{x:r.minX+r.width/2,y:r.minY},{x:r.minX+r.width/2,y:a.minY},{x:a.minX+a.width/2,y:a.minY}]}),s.push({box1:r,box2:a,distance:a.maxY-r.maxY,points:[{x:r.minX+r.width/2,y:r.maxY},{x:r.minX+r.width/2,y:a.maxY},{x:a.minX+a.width/2,y:a.maxY}]})),JSON.stringify(z)!==JSON.stringify(s)&&N(s)},onDragStart:t=>{var n;const i=t.target.findAncestor(".element",!0);if(i){const l=e.getElementById(null==i?void 0:i.id()),r=null==l?void 0:l.top,o=null==r?void 0:r.id;!(e.selectedElementsIds.indexOf(o)>=0)&&o&&(e.selectElements([o]),t.target.stopDrag(),t.target.startDrag(t),null===(n=_.current)||void 0===n||n.startDrag(t))}z&&N(null)},pageId:t.id,style:{position:"absolute",overflow:"hidden",top:0,left:0}},n.default.createElement(r.Layer,null,n.default.createElement(S,{width:o,height:s,fill:u}),n.default.createElement(r.Group,{x:D,y:B,scaleX:e.scale,scaleY:e.scale,name:"page-container"},n.default.createElement(r.Group,{name:"page-container-2"},n.default.createElement(r.Group,{name:"page-background-group",x:k,y:k},n.default.createElement(A,{x:-t.bleed,y:-t.bleed,width:t.computedWidth+2*t.bleed,height:t.computedHeight+2*t.bleed,background:t.background,name:"page-background",preventDefault:!1,scale:e.scale})),n.default.createElement(r.Group,{x:k,y:k,name:"elements-container",listening:!e.isPlaying},n.default.createElement(r.Rect,{name:"elements-area",width:t.computedWidth,height:t.computedHeight,listening:!1}),n.default.createElement(T,{elements:t.children,store:e})),n.default.createElement(r.Rect,{stroke:y,name:"bleed",strokeWidth:t.bleed,x:t.bleed/2,y:t.bleed/2,width:t.computedWidth+t.bleed,height:t.computedHeight+t.bleed,listening:!1,visible:t.bleed>0&&e.bleedVisible,hideInExport:!0}),(0,m.___)()===I&&n.default.createElement(j,{name:"hit-detection",x:-se/2-de,y:-se/2-de,width:R+se+2*de,height:M+se+2*de}))),n.default.createElement(r.Line,{name:"workspace-background",points:[0,0,o,0,o,s,0,s,0,0,D,B,D,s-B,o-D,s-B,o-D,B,D,B],listening:!1,closed:!0,fill:u}),n.default.createElement(r.Group,{x:D,y:B,scaleX:e.scale,scaleY:e.scale},n.default.createElement(r.Rect,{name:"page-highlight",hideInExport:!0,x:-se/2-de,y:-se/2-de,width:R+se+2*de,height:M+se+2*de,stroke:le&&e.pages.length>1?b:x,strokeWidth:2,listening:!1,strokeScaleEnabled:!1})),n.default.createElement(r.Group,{x:D+k*e.scale,y:B+k*e.scale,scaleX:e.scale,scaleY:e.scale,name:"page-abs-container"},n.default.createElement(r.Transformer,{ref:_,onDragStart:n=>{var i;(null===(i=n.evt)||void 0===i?void 0:i.altKey)&&w&&e.selectedElements.forEach((e=>{const n=e.clone({},{skipSelect:!0}),i=t.children.indexOf(e);t.setElementZIndex(n.id,i)})),e.history.startTransaction()},onDragEnd:()=>{e.history.endTransaction()},onTransformStart:()=>{e.history.startTransaction(),N(null)},boundBoxFunc:(e,t)=>{const n=Math.abs(t.width)<1||Math.abs(t.height)<1,i=Math.abs(e.width)<1||Math.abs(e.height)<1;return n&&!i?e:t},onTransform:e=>{var t,n;const i=_.current.nodes(),l=i[i.length-1];if(e.target!==l){return}const r=null===(t=_.current)||void 0===t?void 0:t.__getNodeRect(),o=null===(n=_.current)||void 0===n?void 0:n.getActiveAnchor();F({anchor:o,x:r.x,y:r.y,rotation:r.rotation,width:r.width,height:r.height})},onTransformEnd:t=>{F({}),e.history.endTransaction()},visible:!e.isPlaying}),z&&z.map((({points:t,distance:i,box1:l,box2:o},a)=>n.default.createElement(r.Group,{name:"distances-container",hideInExport:!0,key:a,listening:!1},n.default.createElement(r.Rect,Object.assign({},l,{stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1})),n.default.createElement(r.Rect,Object.assign({},o,{stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1})),n.default.createElement(r.Line,{points:[t[0].x,t[0].y,t[1].x,t[1].y],stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1}),n.default.createElement(r.Line,{points:[t[1].x,t[1].y,t[2].x,t[2].y],stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1}),n.default.createElement(r.Label,{x:(t[0].x+t[1].x)/2,y:(t[0].y+t[1].y)/2,offsetY:-10,scaleX:1/e.scale,scaleY:1/e.scale},n.default.createElement(r.Tag,{cornerRadius:5,fill:"rgb(0, 161, 255)",pointerDirection:"down"}),n.default.createElement(r.Text,{align:"center",verticalAlign:"middle",fill:"white",padding:5,text:(0,h.pxToUnitString)({unit:e.unit,dpi:e.dpi,px:i})}))))),t._rendering&&n.default.createElement(r.Group,null,n.default.createElement(r.Rect,{width:R,height:M,fill:"rgba(255,255,255,0.9)"}),n.default.createElement(r.Text,{text:"Rendering...",fontSize:60,width:R,height:M,align:"center",verticalAlign:"middle"})),oe&&n.default.createElement(oe,{components:E,store:e,page:t,stageRef:q}),ae&&n.default.createElement(v.Html,null,n.default.createElement(ae,Object.assign({components:E,store:e},H.props)))),n.default.createElement(O,Object.assign({},U,{store:e})),n.default.createElement(L,{selection:$}),(0,m.isCreditVisible)()&&n.default.createElement(r.Text,{text:"Powered by polotno.com",fontSize:14,fill:"rgba(0,0,0,0.6)",x:o-170,y:s-18,onMouseEnter:e=>{e.target.getStage().container().style.cursor="pointer"},onMouseLeave:e=>{e.target.getStage().container().style.cursor=""},onTouchStart:e=>{e.cancelBubble=!0},onMouseDown:e=>{e.cancelBubble=!0},onClick:()=>{window.open("https://polotno.com")},onTap:()=>{window.open("https://polotno.com")}}),n.default.createElement(r.Group,{name:"line-guides"}))),W&&re&&n.default.createElement(re,{store:e,page:t,xPadding:D,yPadding:B}))}));

package/canvas/text-element.js

@@ -1 +1 @@
-var e=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.TextElement=exports.getLineHeight=exports.useFontLoader=void 0,exports.isRTLText=y,exports.getDir=S,exports.usePrevious=z;const t=e(require("react")),n=require("mobx-react-lite"),i=require("react-konva"),r=require("react-konva-utils"),o=require("mobx"),a=e(require("konva")),l=require("svg-round-corners"),s=require("./use-color"),d=require("../utils/loader"),u=require("../utils/fonts"),c=require("../utils/flags"),f=require("../utils/text"),h=require("./apply-filters"),g=require("./use-fadein"),x=require("../utils/screen"),p=require("mobx-state-tree"),w=require("./text-element/max-font-size");a.default._fixTextRendering=!0;const v=document.createElement("style");v.type="text/css",document.head.appendChild(v);const m={border:"none",padding:"0px",overflow:"hidden",background:"none",outline:"none",resize:"none",overflowWrap:"break-word",whiteSpace:"pre-wrap",userSelect:"text",wordBreak:"normal"};function y(e){e=e.replace(/\s/g,"");let t=0;for(var n=0;n<e.length;n++){i=e[n],void 0,r="֑-߿‏‫‮יִ-﷽ﹰ-ﻼ",new RegExp("^[^"+r+"]*?["+r+"]").test(i)&&(t+=1)}var i,r;return t>e.length/2}function S(e){return y(e)?"rtl":"ltr"}const b=(0,n.observer)((({textNodeRef:e,element:n,onBlur:i,selectAll:r,cursorPosition:o})=>{const[a,l]=t.default.useState(m),s=e.current;t.default.useLayoutEffect((()=>{const e={};e.width=s.width()-2*s.padding()+"px",e.height=s.height()-2*s.padding()+s.fontSize()*s.lineHeight()+"px",e.fontSize=s.fontSize()+"px",e.lineHeight=s.lineHeight()+.01,e.fontFamily=s.fontFamily(),e.textAlign=s.align(),e.color=s.fill(),e.fontWeight=n.fontWeight,e.fontStyle=n.fontStyle,e.letterSpacing=n.letterSpacing+"em";const t=`\n        .polotno-input::placeholder {\n          color: ${a.color};\n          opacity: 0.6;\n        }\n      `;v.innerHTML="",v.appendChild(document.createTextNode(t)),JSON.stringify(e)!==JSON.stringify(a)&&l(e)}));const d=t.default.useRef(null);t.default.useLayoutEffect((()=>{var e;const t=d.current;if(!t){return}null===(e=d.current)||void 0===e||e.focus();const n=o||t.value.length;t.selectionStart=t.selectionEnd=n,r&&(null==t||t.select(),document.execCommand("selectAll",!1,null))}),[]),t.default.useEffect((()=>{window.addEventListener("blur",i);const e=e=>{var t;(null===(t=d.current)||void 0===t?void 0:t.contains(e.target))||i()};return window.addEventListener("touchstart",e),()=>{window.removeEventListener("blur",i),window.removeEventListener("touchstart",e)}}),[]);let u=0;const c=s.textArr.length*s.lineHeight()*s.fontSize();"middle"===n.verticalAlign&&(u=(n.a.height-c)/2),"bottom"===n.verticalAlign&&(u=n.a.height-c);const h=(0,f.removeTags)(n.text);return t.default.createElement("textarea",{className:"polotno-input",ref:d,dir:S(h),style:Object.assign(Object.assign(Object.assign({},m),a),{paddingTop:u+"px"}),value:h,onChange:e=>{const t=(0,w.getLimitedFontSize)({oldText:n.text,newText:e.target.value,element:n});n.set({text:e.target.value,fontSize:t})},placeholder:n.placeholder,onBlur:i})})),E=e=>t.default.createElement(r.Html,null,t.default.createElement(b,Object.assign({},e)));function z(e){const n=t.default.useRef(e),i=t.default.useRef(e);return t.default.useMemo((()=>{i.current=n.current,n.current=e}),[e]),i.current}exports.useFontLoader=(e,n)=>{const[i,r]=t.default.useReducer((e=>e+1),0),o=t.default.useRef((0,u.isFontLoaded)(n));return t.default.useLayoutEffect((()=>{if(o.current=(0,u.isFontLoaded)(n),o.current){return}let t=!0;return(async()=>{o.current=!1,r();const i=(0,d.incrementLoader)(`text ${n}`);await e.loadFont(n),setTimeout(i,100),t&&(o.current=!0,r())})(),()=>{t=!1}}),[n]),[o.current]},exports.getLineHeight=({fontLoaded:e,fontFamily:n,fontSize:i,lineHeight:r})=>t.default.useMemo((()=>{if("number"==typeof r){return r}const e=document.createElement("div");e.style.fontFamily=n,e.style.fontSize=i+"px",e.style.lineHeight=r,e.innerText="Test text",document.body.appendChild(e);const t=e.offsetHeight;return document.body.removeChild(e),t/i}),[e,n,i,r]),exports.TextElement=(0,n.observer)((({element:e,store:n})=>{const r=t.default.useRef(null),a=t.default.useRef(null),{editorEnabled:d,selectAll:u}=(e=>{const[n,i]=t.default.useState(!1),r=t.default.useRef(!1);return t.default.useEffect((()=>{var t=!0;return setTimeout((()=>{t&&(e._editModeEnabled&&(r.current=!0),i(!0),setTimeout((()=>{r.current=!1}),50))}),50),()=>{t=!1}}),[]),{editorEnabled:n&&e._editModeEnabled,selectAll:r.current}})(e),[w,v]=t.default.useState(!1),m=t.default.useRef(e.a.height),y=n.selectedShapes.indexOf(e)>=0&&e.selectable,{textVerticalResizeEnabled:b}=c.flags,F=z(e.fontFamily),[L,A]=t.default.useState([]);t.default.useEffect((()=>{var e,t;const n=null!==(t=null===(e=r.current)||void 0===e?void 0:e.textArr)&&void 0!==t?t:[];JSON.stringify(n)!==JSON.stringify(L)&&A(n)})),t.default.useEffect((()=>{if(e.a.width){return}const t=r.current;t.width(600),e.set({width:1.4*t.getTextWidth()})}),[]),t.default.useLayoutEffect((()=>(0,o.autorun)((()=>{const t=r.current;(0,h.applyFilter)(t,e)}))));const[O]=(0,exports.useFontLoader)(n,e.fontFamily),T=(0,f.removeTags)(e.text),k=()=>{const e=r.current.clone({height:void 0}),t=Math.ceil(e.fontSize()*e.lineHeight()*e.textArr.length+1);return e.destroy(),t};t.default.useLayoutEffect((()=>{if(!O){return}const{textOverflow:t,textSplitAllowed:i}=c.flags;if(e.a.height){if(!n.isPlaying){if("change-font-size"!==t||w){if("resize"===t){const t=k();b&&e.a.height<t&&n.history.ignore((()=>{var n;(0,p.isAlive)(e)&&e.set({height:t}),null===(n=r.current)||void 0===n||n.height(t)}),!1,!0),b||e.a.height===t||n.history.ignore((()=>{var n;(0,p.isAlive)(e)&&e.set({height:t}),null===(n=r.current)||void 0===n||n.height(t)}),!1,!0)}}else{const t=function(e,t,n=!1){const i=e.fontSize(),r=e.height(),o=(0,f.removeTags)(t.text);let a=t.a.fontSize;e.height(void 0);const l=Math.round(2*t.a.fontSize)-1;for(let s=1;s<l;s++){const i=t.a.height&&e.height()>t.a.height;let r=o.split("\n").join(" ").split(/[\s-]+/).reduce(((e,t)=>/[\u3000-\u303F\u3040-\u309F\u30A0-\u30FF\uFF00-\uFFEF\u4E00-\u9FAF\uAC00-\uD7AF]/.test(t)?e.concat(t.split("")):e.concat(t)),[]),l=e.textArr.map((e=>e.text)).join(";");const s=r.find((e=>!l.includes(e)||(l=l.replace(e,""),!1)));if(!(i||s&&!n)){break}a-=.5,e.fontSize(a)}return e.fontSize(i),e.height(r),a}(r.current,e,i);if(t!==e.a.fontSize){return void n.history.ignore((()=>{e.set({fontSize:t})}),!1,!0)}const o=k();e.a.height===o||b||n.history.ignore((()=>{e.set({height:o})}),!1,!0)}}}else{const t=k();n.history.ignore((()=>{e.set({height:t})}),!1,!0)}})),t.default.useLayoutEffect((()=>{const t=r.current;t&&(t.width(t.width()+1e-8),t._setTextData(),(0,h.applyFilter)(t,e))}),[O]);const M=t.default.useRef(null),$=t.default.useRef(0),R=t=>{t.evt.preventDefault();const i=n.selectedShapes.find((t=>t===e));i&&e.contentEditable&&($.current=function(e){var t;const n=e.target,i=function(e){var t=e.getAbsoluteTransform().copy();t.invert();var n=e.getStage().getPointerPosition();return t.point(n)}(n),r=n.textArr,o=Math.floor(i.y/(n.fontSize()*n.lineHeight())),a=r.slice(0,o).reduce(((e,t)=>e+t.text.length),o),l=null!==(t=r[o])&&void 0!==t?t:r[0];let s=0;return"right"===n.align()?s=n.width()-l.width:"center"===n.align()&&(s=n.width()/2-l.width/2),a+Math.round((i.x-s)/l.width*l.text.length)}(t),e.toggleEditMode())},H=!T&&e.placeholder?.6:e.a.opacity;(0,g.useFadeIn)(r,H);const q=(0,exports.getLineHeight)({fontLoaded:O,fontFamily:e.fontFamily,fontSize:e.a.fontSize,lineHeight:e.lineHeight}),C=e.selectable||"admin"===n.role,P=(0,s.useColor)(e),_=t.default.useMemo((()=>e.backgroundEnabled?function({lines:e,lineHeight:t,width:n,align:i="left",padding:r=0,cornerRadius:o=0}){var a;e.forEach(((e,t)=>{e.cx=n/2,"right"===i?e.cx=n-e.width/2:"left"===i&&(e.cx=e.width/2),"justify"!==i||e.lastInParagraph||(e.width=n),"justify"===i&&(e.cx=e.width/2)}));let s=`M ${null===(a=e[0])||void 0===a?void 0:a.cx} ${-r}`;e.forEach(((n,i)=>{const{cx:o}=n,a=e[i-1];a&&a.width>n.width?s+=` L ${o+n.width/2+r} ${i*t+r}`:s+=` L ${o+n.width/2+r} ${i*t-r}`;const l=e[i+1];l&&l.width>n.width?s+=` L ${o+n.width/2+r} ${(i+1)*t-r}`:s+=` L ${o+n.width/2+r} ${(i+1)*t+r}`}));for(var d=e.length-1;d>=0;d--){const n=e[d],{cx:i}=n,o=e[d+1];o&&o.width>n.width?s+=` L ${i-n.width/2-r} ${(d+1)*t-r}`:s+=` L ${i-n.width/2-r} ${(d+1)*t+r}`;const a=e[d-1];a&&a.width>n.width?s+=` L ${i-n.width/2-r} ${d*t+r}`:s+=` L ${i-n.width/2-r} ${d*t-r}`}s+=" Z";const u=(0,l.parsePath)(s);return(0,l.roundCommands)(u,o).path}({lines:JSON.parse(JSON.stringify(L)),cornerRadius:e.backgroundCornerRadius*(e.a.fontSize*q*.5),lineHeight:q*e.a.fontSize,padding:e.backgroundPadding*(e.a.fontSize*q*.5),width:e.a.width,align:e.align}):""),[e.backgroundEnabled,e.backgroundCornerRadius,e.a.fontSize,q,e.backgroundPadding,e.a.width,e.align,L]),D=(0,x.isTouchDevice)();let j=0;return"middle"===e.verticalAlign?j=(e.a.height-L.length*q*e.a.fontSize)/2:"bottom"===e.verticalAlign&&(j=e.a.height-L.length*q*e.a.fontSize),t.default.createElement(t.default.Fragment,null,t.default.createElement(i.Path,{ref:a,x:e.a.x,y:e.a.y,rotation:e.a.rotation,hideInExport:!e.showInExport,listening:!1,visible:e.backgroundEnabled,opacity:e.backgroundOpacity*H,data:_,fill:e.backgroundColor,offsetY:-j}),t.default.createElement(i.Text,Object.assign({ref:r,id:e.id,name:"element",hideInExport:!e.showInExport,editModeEnabled:e._editModeEnabled,x:e.a.x,y:e.a.y,rotation:e.a.rotation,width:e.a.width,height:e.a.height,text:T||e.placeholder,direction:S(T)},P,{stroke:e.stroke,lineJoin:"round",strokeWidth:e.strokeWidth,fillAfterStrokeEnabled:!0,fontSize:e.a.fontSize,fontFamily:`"${e.fontFamily}", "${F}"`,fontStyle:e.fontStyle+" "+e.fontWeight,textDecoration:e.textDecoration,align:e.align,verticalAlign:e.verticalAlign,draggable:D?e.draggable&&y:e.draggable,preventDefault:!D||y,opacity:H,visible:!e._editModeEnabled,ellipsis:"ellipsis"===c.flags.textOverflow,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,lineHeight:q,letterSpacing:e.letterSpacing*e.a.fontSize,listening:C,onDragMove:t=>{e.set({x:t.target.x(),y:t.target.y()})},onDragEnd:t=>{e.set({x:t.target.x(),y:t.target.y()})},onClick:R,onTap:R,onTransformStart:()=>{v(!0),m.current=r.current.height()},onTransform:t=>{var n,i;const r=t.target;null===(n=a.current)||void 0===n||n.setAttrs({x:r.x(),y:r.y(),rotation:r.rotation(),scale:r.scale()});const o=(null===(i=r.getStage())||void 0===i?void 0:i.findOne("Transformer")).getActiveAnchor();if("middle-left"===o||"middle-right"===o){const t=r.scaleX(),n=r.width()*t,i=e.a.fontSize;let o=n;n<i&&(o=i,M.current&&r.position(M.current)),r.width(o),r.scaleX(1),r.scaleY(1);const a=k();if("ellipsis"!==c.flags.textOverflow){const t=Math.max(a,m.current);r.height(t),e.set({height:r.height()})}e.set({x:r.x(),y:r.y(),width:r.width(),rotation:r.rotation()}),(0,h.applyFilter)(r,e)}if("top-center"===o||"bottom-center"===o){let n="resize"===c.flags.textOverflow?k():q*e.a.fontSize;t.target.height(Math.max(n,t.target.height()*t.target.scaleY())),t.target.scaleY(1)}M.current=t.target.position()},onTransformEnd:t=>{var n;const i=t.target.scaleX();t.target.scaleX(1),t.target.scaleY(1),e.set({fontSize:Math.round(e.a.fontSize*i),width:Math.ceil(t.target.width()*i),x:t.target.x(),y:t.target.y(),rotation:t.target.rotation(),height:t.target.height()*i,shadowBlur:e.shadowBlur*i,shadowOffsetX:e.shadowOffsetX*i,shadowOffsetY:e.shadowOffsetY*i,strokeWidth:e.strokeWidth*i}),null===(n=a.current)||void 0===n||n.setAttrs({scaleX:1,scaleY:1}),v(!1)}})),d&&t.default.createElement(i.Group,{x:e.a.x,y:e.a.y,rotation:e.a.rotation},t.default.createElement(E,{textNodeRef:r,element:e,selectAll:u,cursorPosition:$.current,onBlur:()=>{e.toggleEditMode(!1)}})))}));
+var e=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.TextElement=exports.getLineHeight=exports.useFontLoader=void 0,exports.isRTLText=y,exports.getDir=S,exports.usePrevious=z;const t=e(require("react")),n=require("mobx-react-lite"),i=require("react-konva"),r=require("react-konva-utils"),o=require("mobx"),a=e(require("konva")),l=require("svg-round-corners"),s=require("./use-color"),d=require("../utils/loader"),u=require("../utils/fonts"),c=require("../utils/flags"),f=require("../utils/text"),h=require("./apply-filters"),g=require("./use-fadein"),x=require("../utils/screen"),p=require("mobx-state-tree"),w=require("./text-element/max-font-size");a.default._fixTextRendering=!0;const m=document.createElement("style");m.type="text/css",document.head.appendChild(m);const v={border:"none",padding:"0px",overflow:"hidden",background:"none",outline:"none",resize:"none",overflowWrap:"break-word",whiteSpace:"pre-wrap",userSelect:"text",wordBreak:"normal"};function y(e){e=e.replace(/\s/g,"");let t=0;for(var n=0;n<e.length;n++){i=e[n],void 0,r="֑-߿‏‫‮יִ-﷽ﹰ-ﻼ",new RegExp("^[^"+r+"]*?["+r+"]").test(i)&&(t+=1)}var i,r;return t>e.length/2}function S(e){return y(e)?"rtl":"ltr"}const b=(0,n.observer)((({textNodeRef:e,element:n,onBlur:i,selectAll:r,cursorPosition:o})=>{const[a,l]=t.default.useState(v),s=e.current;t.default.useLayoutEffect((()=>{const e={};e.width=s.width()-2*s.padding()+"px",e.height=s.height()-2*s.padding()+s.fontSize()*s.lineHeight()+"px",e.fontSize=s.fontSize()+"px",e.lineHeight=s.lineHeight()+.01,e.fontFamily=s.fontFamily(),e.textAlign=s.align(),e.color=s.fill(),e.fontWeight=n.fontWeight,e.fontStyle=n.fontStyle,e.letterSpacing=n.letterSpacing+"em";const t=`\n        .polotno-input::placeholder {\n          color: ${a.color};\n          opacity: 0.6;\n        }\n      `;m.innerHTML="",m.appendChild(document.createTextNode(t)),JSON.stringify(e)!==JSON.stringify(a)&&l(e)}));const d=t.default.useRef(null);t.default.useLayoutEffect((()=>{var e;const t=d.current;if(!t){return}null===(e=d.current)||void 0===e||e.focus();const n=o||t.value.length;t.selectionStart=t.selectionEnd=n,r&&(null==t||t.select(),document.execCommand("selectAll",!1,null))}),[]),t.default.useEffect((()=>{window.addEventListener("blur",i);const e=e=>{var t;(null===(t=d.current)||void 0===t?void 0:t.contains(e.target))||i()};return window.addEventListener("touchstart",e),()=>{window.removeEventListener("blur",i),window.removeEventListener("touchstart",e)}}),[]);let u=0;const c=s.textArr.length*s.lineHeight()*s.fontSize();"middle"===n.verticalAlign&&(u=(n.a.height-c)/2),"bottom"===n.verticalAlign&&(u=n.a.height-c);const h=(0,f.removeTags)(n.text);return t.default.createElement("textarea",{className:"polotno-input",ref:d,dir:S(h),style:Object.assign(Object.assign(Object.assign({},v),a),{paddingTop:u+"px"}),value:h,onChange:e=>{const t=(0,w.getLimitedFontSize)({oldText:n.text,newText:e.target.value,element:n});n.set({text:e.target.value,fontSize:t})},placeholder:n.placeholder,onBlur:i})})),E=e=>t.default.createElement(r.Html,null,t.default.createElement(b,Object.assign({},e)));function z(e){const n=t.default.useRef(e),i=t.default.useRef(e);return t.default.useMemo((()=>{i.current=n.current,n.current=e}),[e]),i.current}exports.useFontLoader=(e,n)=>{const[i,r]=t.default.useReducer((e=>e+1),0),o=t.default.useRef((0,u.isFontLoaded)(n));return t.default.useLayoutEffect((()=>{if(o.current=(0,u.isFontLoaded)(n),o.current){return}let t=!0;return(async()=>{o.current=!1,r();const i=(0,d.incrementLoader)(`text ${n}`);await e.loadFont(n),setTimeout(i,100),t&&(o.current=!0,r())})(),()=>{t=!1}}),[n]),[o.current]},exports.getLineHeight=({fontLoaded:e,fontFamily:n,fontSize:i,lineHeight:r})=>t.default.useMemo((()=>{if("number"==typeof r){return r}const e=document.createElement("div");e.style.fontFamily=n,e.style.fontSize=i+"px",e.style.lineHeight=r,e.innerText="Test text",document.body.appendChild(e);const t=e.offsetHeight;return document.body.removeChild(e),t/i}),[e,n,i,r]),exports.TextElement=(0,n.observer)((({element:e,store:n})=>{const r=t.default.useRef(null),a=t.default.useRef(null),{editorEnabled:d,selectAll:u}=(e=>{const[n,i]=t.default.useState(!1),r=t.default.useRef(!1);return t.default.useEffect((()=>{var t=!0;return setTimeout((()=>{t&&(e._editModeEnabled&&(r.current=!0),i(!0),setTimeout((()=>{r.current=!1}),50))}),50),()=>{t=!1}}),[]),{editorEnabled:n&&e._editModeEnabled,selectAll:r.current}})(e),[w,m]=t.default.useState(!1),v=t.default.useRef(e.a.height),y=n.selectedShapes.indexOf(e)>=0&&e.selectable,{textVerticalResizeEnabled:b}=c.flags,F=z(e.fontFamily),[L,A]=t.default.useState([]);t.default.useEffect((()=>{var e,t;const n=null!==(t=null===(e=r.current)||void 0===e?void 0:e.textArr)&&void 0!==t?t:[];JSON.stringify(n)!==JSON.stringify(L)&&A(n)})),t.default.useEffect((()=>{if(e.a.width){return}const t=r.current;t.width(600),e.set({width:1.4*t.getTextWidth()})}),[]),t.default.useLayoutEffect((()=>(0,o.autorun)((()=>{const t=r.current;(0,h.applyFilter)(t,e)}))));const[O]=(0,exports.useFontLoader)(n,e.fontFamily),T=(0,f.removeTags)(e.text),k=()=>{const e=r.current.clone({height:void 0}),t=Math.ceil(e.fontSize()*e.lineHeight()*e.textArr.length+1);return e.destroy(),t};t.default.useLayoutEffect((()=>{if(!O){return}const{textOverflow:t,textSplitAllowed:i}=c.flags;if(e.a.height){if(!n.isPlaying){if("change-font-size"!==t||w){if("resize"===t){const t=k();b&&e.a.height<t&&n.history.ignore((()=>{var n;(0,p.isAlive)(e)&&e.set({height:t}),null===(n=r.current)||void 0===n||n.height(t)}),!1,!0),b||e.a.height===t||w||n.history.ignore((()=>{var n;(0,p.isAlive)(e)&&e.set({height:t}),null===(n=r.current)||void 0===n||n.height(t)}),!1,!0)}}else{const t=function(e,t,n=!1){const i=e.fontSize(),r=e.height(),o=(0,f.removeTags)(t.text);let a=t.a.fontSize;e.height(void 0);const l=Math.round(2*t.a.fontSize)-1;for(let s=1;s<l;s++){const i=t.a.height&&e.height()>t.a.height;let r=o.split("\n").join(" ").split(/[\s-]+/).reduce(((e,t)=>/[\u3000-\u303F\u3040-\u309F\u30A0-\u30FF\uFF00-\uFFEF\u4E00-\u9FAF\uAC00-\uD7AF]/.test(t)?e.concat(t.split("")):e.concat(t)),[]),l=e.textArr.map((e=>e.text)).join(";");const s=r.find((e=>!l.includes(e)||(l=l.replace(e,""),!1)));if(!(i||s&&!n)){break}a-=.5,e.fontSize(a)}return e.fontSize(i),e.height(r),a}(r.current,e,i);if(t!==e.a.fontSize){return void n.history.ignore((()=>{e.set({fontSize:t})}),!1,!0)}const o=k();e.a.height===o||b||n.history.ignore((()=>{e.set({height:o})}),!1,!0)}}}else{const t=k();n.history.ignore((()=>{e.set({height:t})}),!1,!0)}})),t.default.useLayoutEffect((()=>{const t=r.current;t&&(t.width(t.width()+1e-8),t._setTextData(),(0,h.applyFilter)(t,e))}),[O]);const M=t.default.useRef(null),R=t.default.useRef(0),$=t=>{t.evt.preventDefault();const i=n.selectedShapes.find((t=>t===e));i&&e.contentEditable&&(R.current=function(e){var t;const n=e.target,i=function(e){var t=e.getAbsoluteTransform().copy();t.invert();var n=e.getStage().getPointerPosition();return t.point(n)}(n),r=n.textArr,o=Math.floor(i.y/(n.fontSize()*n.lineHeight())),a=r.slice(0,o).reduce(((e,t)=>e+t.text.length),o),l=null!==(t=r[o])&&void 0!==t?t:r[0];let s=0;return"right"===n.align()?s=n.width()-l.width:"center"===n.align()&&(s=n.width()/2-l.width/2),a+Math.round((i.x-s)/l.width*l.text.length)}(t),e.toggleEditMode())},H=!T&&e.placeholder?.6:e.a.opacity;(0,g.useFadeIn)(r,H);const q=(0,exports.getLineHeight)({fontLoaded:O,fontFamily:e.fontFamily,fontSize:e.a.fontSize,lineHeight:e.lineHeight}),C=e.selectable||"admin"===n.role,P=(0,s.useColor)(e),_=t.default.useMemo((()=>e.backgroundEnabled?function({lines:e,lineHeight:t,width:n,align:i="left",padding:r=0,cornerRadius:o=0}){var a;e.forEach(((e,t)=>{e.cx=n/2,"right"===i?e.cx=n-e.width/2:"left"===i&&(e.cx=e.width/2),"justify"!==i||e.lastInParagraph||(e.width=n),"justify"===i&&(e.cx=e.width/2)}));let s=`M ${null===(a=e[0])||void 0===a?void 0:a.cx} ${-r}`;e.forEach(((n,i)=>{const{cx:o}=n,a=e[i-1];a&&a.width>n.width?s+=` L ${o+n.width/2+r} ${i*t+r}`:s+=` L ${o+n.width/2+r} ${i*t-r}`;const l=e[i+1];l&&l.width>n.width?s+=` L ${o+n.width/2+r} ${(i+1)*t-r}`:s+=` L ${o+n.width/2+r} ${(i+1)*t+r}`}));for(var d=e.length-1;d>=0;d--){const n=e[d],{cx:i}=n,o=e[d+1];o&&o.width>n.width?s+=` L ${i-n.width/2-r} ${(d+1)*t-r}`:s+=` L ${i-n.width/2-r} ${(d+1)*t+r}`;const a=e[d-1];a&&a.width>n.width?s+=` L ${i-n.width/2-r} ${d*t+r}`:s+=` L ${i-n.width/2-r} ${d*t-r}`}s+=" Z";const u=(0,l.parsePath)(s);return(0,l.roundCommands)(u,o).path}({lines:JSON.parse(JSON.stringify(L)),cornerRadius:e.backgroundCornerRadius*(e.a.fontSize*q*.5),lineHeight:q*e.a.fontSize,padding:e.backgroundPadding*(e.a.fontSize*q*.5),width:e.a.width,align:e.align}):""),[e.backgroundEnabled,e.backgroundCornerRadius,e.a.fontSize,q,e.backgroundPadding,e.a.width,e.align,L]),D=(0,x.isTouchDevice)();let j=0;return"middle"===e.verticalAlign?j=(e.a.height-L.length*q*e.a.fontSize)/2:"bottom"===e.verticalAlign&&(j=e.a.height-L.length*q*e.a.fontSize),t.default.createElement(t.default.Fragment,null,t.default.createElement(i.Path,{ref:a,x:e.a.x,y:e.a.y,rotation:e.a.rotation,hideInExport:!e.showInExport,listening:!1,visible:e.backgroundEnabled,opacity:e.backgroundOpacity*H,data:_,fill:e.backgroundColor,offsetY:-j}),t.default.createElement(i.Text,Object.assign({ref:r,id:e.id,name:"element",hideInExport:!e.showInExport,editModeEnabled:e._editModeEnabled,x:e.a.x,y:e.a.y,rotation:e.a.rotation,width:e.a.width,height:e.a.height,text:T||e.placeholder,direction:S(T)},P,{stroke:e.stroke,lineJoin:"round",strokeWidth:e.strokeWidth,fillAfterStrokeEnabled:!0,fontSize:e.a.fontSize,fontFamily:`"${e.fontFamily}", "${F}"`,fontStyle:e.fontStyle+" "+e.fontWeight,textDecoration:e.textDecoration,align:e.align,verticalAlign:e.verticalAlign,draggable:D?e.draggable&&y:e.draggable,preventDefault:!D||y,opacity:H,visible:!e._editModeEnabled,ellipsis:"ellipsis"===c.flags.textOverflow,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,lineHeight:q,letterSpacing:e.letterSpacing*e.a.fontSize,listening:C,onDragMove:t=>{e.set({x:t.target.x(),y:t.target.y()})},onDragEnd:t=>{e.set({x:t.target.x(),y:t.target.y()})},onClick:$,onTap:$,onTransformStart:()=>{m(!0),v.current=r.current.height()},onTransform:t=>{var n,i;const r=t.target;null===(n=a.current)||void 0===n||n.setAttrs({x:r.x(),y:r.y(),rotation:r.rotation(),scale:r.scale()});const o=(null===(i=r.getStage())||void 0===i?void 0:i.findOne("Transformer")).getActiveAnchor();if("middle-left"===o||"middle-right"===o){const t=r.scaleX(),n=r.width()*t,i=e.a.fontSize;let o=n;n<i&&(o=i,M.current&&r.position(M.current)),r.width(o),r.scaleX(1),r.scaleY(1);const a=k();if("ellipsis"!==c.flags.textOverflow){const t=Math.max(a,v.current);r.height(t),e.set({height:r.height()})}const l=c.flags.textVerticalResizeEnabled?Math.max(a,v.current):k();e.set({x:r.x(),width:r.width(),rotation:r.rotation(),height:l}),(0,h.applyFilter)(r,e)}if("top-center"===o||"bottom-center"===o){let n="resize"===c.flags.textOverflow?k():q*e.a.fontSize;t.target.height(Math.max(n,t.target.height()*t.target.scaleY())),t.target.scaleY(1)}M.current=t.target.position()},onTransformEnd:t=>{var n;const i=t.target.scaleX();t.target.scaleX(1),t.target.scaleY(1),e.set({fontSize:Math.round(e.a.fontSize*i),width:Math.ceil(t.target.width()*i),x:t.target.x(),y:t.target.y(),rotation:t.target.rotation(),height:t.target.height()*i,shadowBlur:e.shadowBlur*i,shadowOffsetX:e.shadowOffsetX*i,shadowOffsetY:e.shadowOffsetY*i,strokeWidth:e.strokeWidth*i}),null===(n=a.current)||void 0===n||n.setAttrs({scaleX:1,scaleY:1}),m(!1)}})),d&&t.default.createElement(i.Group,{x:e.a.x,y:e.a.y,rotation:e.a.rotation},t.default.createElement(E,{textNodeRef:r,element:e,selectAll:u,cursorPosition:R.current,onBlur:()=>{e.toggleEditMode(!1)}})))}));

package/canvas/video-element.js

@@ -1 +1 @@
-var e,t=this&&this.__createBinding||(Object.create?function(e,t,r,a){void 0===a&&(a=r);var n=Object.getOwnPropertyDescriptor(t,r);n&&!("get"in n?!t.__esModule:n.writable||n.configurable)||(n={enumerable:!0,get:function(){return t[r]}}),Object.defineProperty(e,a,n)}:function(e,t,r,a){void 0===a&&(a=r),e[a]=t[r]}),r=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),a=this&&this.__importStar||(e=function(t){return e=Object.getOwnPropertyNames||function(e){var t=[];for(var r in e){Object.prototype.hasOwnProperty.call(e,r)&&(t[t.length]=r)}return t},e(t)},function(a){if(a&&a.__esModule){return a}var n={};if(null!=a){for(var i=e(a),o=0;o<i.length;o++){"default"!==i[o]&&t(n,a,i[o])}}return r(n,a),n}),n=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.VideoElement=exports.useLoader=exports.setVideoLoaderHook=exports.useCornerRadiusAndCrop=void 0;const i=n(require("react")),o=require("mobx-react-lite"),d=require("mobx"),h=require("react-konva"),l=n(require("use-image")),u=n(require("konva")),c=require("react-konva-utils"),s=require("../utils/loader"),g=a(require("../utils/svg")),f=require("../utils/flags"),p=require("./apply-filters"),m=require("./use-fadein"),w=require("../utils/screen");function v(){return document.createElement("canvas")}const x=new window.Image;x.src=g.svgToURL('\n  <svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n  <path opacity="0.6" d="M4 5.49683V18.5032C4 20.05 5.68077 21.0113 7.01404 20.227L18.0694 13.7239C19.384 12.9506 19.384 11.0494 18.0694 10.2761L7.01404 3.77296C5.68077 2.98869 4 3.95 4 5.49683Z" fill="white"/>\n  <path d="M4 5.49683V18.5032C4 20.05 5.68077 21.0113 7.01404 20.227L18.0694 13.7239C19.384 12.9506 19.384 11.0494 18.0694 10.2761L7.01404 3.77296C5.68077 2.98869 4 3.95 4 5.49683Z" stroke="#323232" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>\n  </svg>\n');const y=new window.Image;y.src=g.svgToURL('\n  <svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n  <path opacity="0.6" d="M14 19L14 5C14 3.89543 14.8954 3 16 3L17 3C18.1046 3 19 3.89543 19 5L19 19C19 20.1046 18.1046 21 17 21L16 21C14.8954 21 14 20.1046 14 19Z" fill="white"/>\n  <path opacity="0.6" d="M10 19L10 5C10 3.89543 9.10457 3 8 3L7 3C5.89543 3 5 3.89543 5 5L5 19C5 20.1046 5.89543 21 7 21L8 21C9.10457 21 10 20.1046 10 19Z" fill="white"/>\n  <path d="M14 19L14 5C14 3.89543 14.8954 3 16 3L17 3C18.1046 3 19 3.89543 19 5L19 19C19 20.1046 18.1046 21 17 21L16 21C14.8954 21 14 20.1046 14 19Z" stroke="#323232" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>\n  <path d="M10 19L10 5C10 3.89543 9.10457 3 8 3L7 3C5.89543 3 5 3.89543 5 5L5 19C5 20.1046 5.89543 21 7 21L8 21C9.10457 21 10 20.1046 10 19Z" stroke="#323232" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>\n  </svg>\n'),exports.useCornerRadiusAndCrop=(e,t,r,a,n=0,o=!1)=>{const d=Math.floor(Math.max(e.width*a,1)),h=Math.floor(Math.max(e.height*a,1)),l=Math.min(n*a,d/2,h/2),c=Math.max(e.width/r.width,e.height/r.height)*a,s=e.page._exportingOrRendering&&f.flags.imageDownScalingEnabled&&c<1&&!o,g=0===r.x&&0===r.y&&r.width===(null==t?void 0:t.width)&&r.height===(null==t?void 0:t.height),p=i.default.useMemo((()=>{if(t&&t.width&&t.height){return g&&0===l&&!s?void 0:v()}}),[t,l,s,g]),m=()=>{if(!p||!t){return}p.width=d,p.height=h;const e=p.getContext("2d");if(!e){return}l&&(e.beginPath(),e.moveTo(l,0),e.lineTo(d-l,0),e.arc(d-l,l,l,3*Math.PI/2,0,!1),e.lineTo(d,h-l),e.arc(d-l,h-l,l,0,Math.PI/2,!1),e.lineTo(l,h),e.arc(l,h-l,l,Math.PI/2,Math.PI,!1),e.lineTo(0,l),e.arc(l,l,l,Math.PI,3*Math.PI/2,!1),e.clip());const a=s?function(e,t){var r,a;const n=v();n.width=e.width,n.height=e.height,null===(r=n.getContext("2d"))||void 0===r||r.drawImage(e,0,0,n.width,n.height);const i=function(e,t,r,a,n,i,o){for(var d=new ImageData(t,r),h=new Int32Array(e.data.buffer),l=e.width,u=new Int32Array(d.data.buffer),c=d.width,s=t/i,g=r/o,f=Math.round(1/s),p=Math.round(1/g),m=f*p,w=0;w<d.height;w++){for(var v=0;v<c;v++){for(var x=0+Math.round(v/s)+(0+Math.round(w/g))*l,y=0,M=0,E=0,b=0,L=0;L<p;L++){for(var C=0;C<f;C++){var R=h[x+C+L*l];y+=R<<24>>>24,M+=R<<16>>>24,E+=R<<8>>>24,b+=R>>>24}}y=Math.round(y/m),M=Math.round(M/m),E=Math.round(E/m),b=Math.round(b/m),u[v+w*c]=b<<24|E<<16|M<<8|y}}return d}(n.getContext("2d").getImageData(0,0,n.width,n.height),Math.floor(n.width*t),Math.floor(n.height*t),0,0,n.width,n.height);return n.width=Math.floor(n.width*t),n.height=Math.floor(n.height*t),null===(a=n.getContext("2d"))||void 0===a||a.putImageData(i,0,0),n}(t,c):t,n=s?{x:Math.floor(r.x*c),y:Math.floor(r.y*c),width:Math.floor(r.width*c),height:Math.floor(r.height*c)}:r;e.drawImage(a,n.x,n.y,n.width,n.height,0,0,p.width,p.height)};return i.default.useLayoutEffect((()=>{m()}),[p,e.width,e.height,r.x,r.y,r.width,r.height,n,a,o,e.page._exportingOrRendering,s]),i.default.useEffect((()=>()=>{p&&"CANVAS"===p.nodeName&&u.default.Util.releaseCanvas(p)}),[p]),[p||t,m]};const M=v(),E=(0,o.observer)((({element:e})=>{const t=Math.min(30,e.width/4,e.height/4),r=i.default.useRef(null);return i.default.useEffect((()=>{const e=r.current;if(!e){return}const t=new u.default.Animation((t=>{e.rotate(((null==t?void 0:t.timeDiff)||0)/2)}),e.getLayer());return t.start(),()=>{t.stop()}})),i.default.createElement(h.Group,{x:e.a.x,y:e.a.y,rotation:e.a.rotation,listening:!1,opacity:e.a.opacity,hideInExport:!e.showInExport},i.default.createElement(h.Rect,{width:e.width,height:e.height,fill:"rgba(124, 173, 212, 0.8)"}),i.default.createElement(h.Arc,{ref:r,x:e.width/2,y:e.height/2,fill:"white",outerRadius:Math.abs(t),innerRadius:Math.max(1,t-5),angle:270}))})),b=(0,o.observer)((({element:e})=>{const t=Math.max(10,Math.min(30,e.width/25));return i.default.createElement(h.Group,{x:e.a.x,y:e.a.y,rotation:e.a.rotation,listening:!1,opacity:e.a.opacity,hideInExport:!e.showInExport},i.default.createElement(h.Rect,{width:e.width,height:e.height,fill:"rgba(223, 102, 102, 0.8)"}),i.default.createElement(h.Text,{text:"Can not load the video...",fontSize:t,width:e.width,height:e.height,align:"center",fill:"white",verticalAlign:"middle",padding:5}))}));let L=function(e,t,r){const a=i.default.useRef("loading"),n=i.default.useRef(null),[o,d]=i.default.useState(0),h=i.default.useRef(),l=i.default.useRef(),u=i.default.useRef();return h.current===e&&l.current===t&&u.current===r||(a.current="loading",n.current=void 0,h.current=e,l.current=t,u.current=r),i.default.useLayoutEffect((function(){if(e){var i=document.createElement("video");return i.addEventListener("canplay",o),i.addEventListener("error",h),t&&(i.crossOrigin=t),r&&(i.referrerpolicy=r),i.src=e,i.load(),function(){i.removeEventListener("canplay",o),i.removeEventListener("error",h)}}function o(){a.current="loaded",n.current=i,n.current.currentTime=0,d(Math.random()),n.current.removeEventListener("canplay",o)}function h(e){const t=4===i.readyState,r=i.buffered&&i.buffered.length>0&&i.buffered.end(i.buffered.length-1)/i.duration*100>=100;t&&r||(a.current="failed",n.current=void 0,d(Math.random()))}}),[e,t,r]),[n.current,a.current]};exports.setVideoLoaderHook=e=>{L=e},exports.useLoader=(e,t,r)=>{const a=i.default.useRef(),n=()=>{var e;null===(e=a.current)||void 0===e||e.call(a),a.current=void 0};i.default.useEffect((()=>n),[]),i.default.useLayoutEffect((()=>{const i=t.slice(0,200),o=`video with id ${r} url: ${i}`;"loading"!==e||a.current||(a.current=(0,s.incrementLoader)(o)),"loading"!==e&&n(),"failed"===e&&(0,s.triggerLoadError)(o)}),[e])},exports.VideoElement=(0,o.observer)((({element:e,store:t})=>{var r;const[a,n]=i.default.useState(!1),o=i.default.useRef(null),f=i.default.useRef(null),C=t.selectedShapes.indexOf(e)>=0&&e.selectable,[R,T]=i.default.useState(!1),[I,_]=L(e.src,"anonymous"),O=t.activePage===e.page;(0,exports.useLoader)(_,e.src,e.id),I&&(I.width=I.videoWidth,I.height=I.videoHeight,I.playsInline=!0);const S=I||M;i.default.useEffect((()=>{I&&t.history.ignore((()=>{e.set({duration:1e3*I.duration})}))}),[I]),i.default.useEffect((()=>{var r;if(!I){return}const a=t.animatedElementsIds,n=(!a.length||a.includes(e.id))&&t.isPlaying,i=O&&(n||R);if(!i){return void I.pause()}i&&(I.currentTime=e.startTime*I.duration,I.play());const d=new u.default.Animation((()=>{$()}),null===(r=o.current)||void 0===r?void 0:r.getLayer());d.start();const h=()=>{T(!1),I.currentTime=e.startTime*I.duration},l=()=>{I.currentTime>=e.endTime*I.duration&&(I.pause(),I.currentTime=e.startTime*I.duration,T(!1))};return I.addEventListener("ended",h),I.addEventListener("timeupdate",l),()=>{I.pause(),d.stop(),I.removeEventListener("ended",h),I.removeEventListener("timeupdate",l)}}),[I,R,t.isPlaying,O]),i.default.useEffect((()=>{I&&(I.volume=e.volume)}),[I,e.volume]);const k=i.default.useRef();i.default.useEffect((()=>{const r=(0,d.autorun)((()=>{var r,a;if(I){const n=t.animatedElementsIds;if(n.length&&!n.includes(e.id)){return}const i=(t.currentTime-e.page.startTime)%e.duration;if(Math.abs(1e3*I.currentTime-i)>500||!t.isPlaying){const r=i/1e3;r!==I.currentTime&&(I.currentTime=r),4!==I.readyState&&!t.isPlaying&&!k.current&&(k.current=(0,s.incrementLoader)(`video ${e.id}`))}$(),null===(a=null===(r=o.current)||void 0===r?void 0:r.getLayer())||void 0===a||a.batchDraw()}}));return()=>{r(),k.current&&(k.current(),k.current=null)}}),[t,I]),i.default.useEffect((()=>{if(!I){return}const t=()=>{var t,r;4!==I.readyState&&e.page._exportingOrRendering||k.current&&($(),null===(r=null===(t=o.current)||void 0===t?void 0:t.getLayer())||void 0===r||r.batchDraw(),k.current(),k.current=null)};let r;return e.page._exportingOrRendering&&(r=setInterval(t,50)),I.addEventListener("timeupdate",t),I.addEventListener("canplay",t),()=>{clearInterval(r),I.removeEventListener("timeupdate",t),I.removeEventListener("canplay",t)}}),[e.page._exportingOrRendering,I,e.id,s.incrementLoader]);let{cropX:P,cropY:X,cropWidth:Y,cropHeight:W}=e;"loaded"!==_&&(P=X=0,Y=W=1);const A=S.width*Y,D=S.height*W,H=e.width/e.height;let q,j;const z=A/D,B="svg"===e.type;B?(q=A,j=D):H>=z?(q=A,j=A/H):(q=D*H,j=D);const F={x:S.width*P,y:S.height*X,width:q,height:j},V=null!==(r=e.cornerRadius)&&void 0!==r?r:0,[Z,U]=(0,exports.useCornerRadiusAndCrop)(e,S,F,t._elementsPixelRatio,V,a||e._cropModeEnabled||"svg"===e.type);let[N,G]=((e,t,r,a)=>{const n=(e=>{const[t,r]=i.default.useState(e);return i.default.useEffect((()=>{(async()=>{const a=await async function(e){if(!(e.indexOf("data:image/svg+xml")>=0||e.indexOf(".svg")>=0)){return e}const t=await g.urlToString(e),r=g.fixSize(t);return g.svgToURL(r)}(e);a!==t&&r(a)})()}),[e]),t})(e.clipSrc||""),[o,d]=(0,l.default)(n,"anonymous"),h=e.clipSrc?d:"loaded";(0,exports.useLoader)(h,e.clipSrc,e.id);const c=i.default.useMemo((()=>{if(t&&o){return v()}}),[t,o]);function s(){var a;if(!o){return}if(!t||!t.width||!t.height){return}if(!o||!o.width||!o.height){return}if(!c){return}const n=v(),i=Math.max(e.width/o.width*r,e.height/o.height*r);n.width=o.width*i,n.height=o.height*i,null===(a=n.getContext("2d"))||void 0===a||a.drawImage(o,0,0,n.width,n.height),c.width=Math.max(t.width,1),c.height=Math.max(t.height,1);const d=c.getContext("2d");d&&(d.save(),d.drawImage(n,0,0,t.width,t.height),u.default.Util.releaseCanvas(n),d.globalCompositeOperation="source-in",d.drawImage(t,0,0,c.width,c.height),d.restore())}return i.default.useLayoutEffect((()=>{s()}),[c,t,o,e.width,e.height,r,...a]),[e.clipSrc&&o?c:t,s]})(e,Z,t._elementsPixelRatio,[F,V,t._elementsPixelRatio]);function $(){U(),G()}const J=Math.max(e.width/q,e.height/j);i.default.useEffect((()=>{var t;if(!e._cropModeEnabled){return}const r=null===(t=o.current)||void 0===t?void 0:t.getStage();function a(t){e._cropModeEnabled&&t.target!==f.current&&e.toggleCropMode(!1)}function n(t){e._cropModeEnabled&&t.target.parentNode!==r.content&&e.toggleCropMode(!1)}return document.body.addEventListener("click",n),null==r||r.on("click",a),null==r||r.on("tap",a),()=>{document.body.removeEventListener("click",n),document.body.removeEventListener("touchstart",n),null==r||r.off("click",a),null==r||r.off("click",a)}}),[e._cropModeEnabled]),i.default.useLayoutEffect((()=>{if(!a&&!e._cropModeEnabled){return(0,p.applyFilter)(o.current,e),(0,d.autorun)((()=>{(0,p.applyFilter)(o.current,e)}),{delay:100})}}),[S,a,Y,W,e._cropModeEnabled]),i.default.useLayoutEffect((()=>{var t;a||e._cropModeEnabled?null===(t=o.current)||void 0===t||t.clearCache():(0,p.applyFilter)(o.current,e)}),[a,e.width,e.height,e._cropModeEnabled]),i.default.useEffect((()=>{(0,p.applyFilter)(o.current,e)}),[e.shadowEnabled,e.shadowBlur,e.cornerRadius,e.shadowColor,e.shadowOffsetX,e.shadowOffsetY,e.shadowOpacity]);const K=i.default.useRef(null),Q=i.default.useRef(null),ee=i.default.useRef(null);i.default.useLayoutEffect((()=>{e._cropModeEnabled&&(Q.current.nodes([K.current]),ee.current.nodes([f.current]))}),[e._cropModeEnabled]);const te=t=>{Math.round(t.target.x())>0&&(t.target.x(0),t.target.scaleX(1)),Math.round(t.target.y())>0&&(t.target.y(0),t.target.scaleY(1));const r=t.target.width()*t.target.scaleX(),a=t.target.height()*t.target.scaleY(),n=Math.min(1,q/r),i=Math.min(1,j/a),o=1-n,d=Math.min(o,Math.max(0,Math.round(-t.target.x())/r)),h=1-i,l=Math.min(h,Math.max(0,Math.round(-t.target.y())/a));t.target.setAttrs({x:-d*S.width,y:-l*S.height,scaleX:1,scaleY:1}),e.set({cropX:d,cropY:l,cropWidth:n,cropHeight:i})},re=()=>{"svg"!==e.type&&e.contentEditable&&setTimeout((()=>{e.toggleCropMode(!0)}))},ae="loading"===_,ne="failed"===_,ie=!ae&&!ne,oe=i.default.useRef({cropX:0,cropY:0,cropWidth:0,cropHeight:0}),de=ie?e.a.opacity:0;(0,m.useFadeIn)(o,de);const he=e.selectable||"admin"===t.role,le=(0,w.isTouchDevice)();return i.default.createElement(i.default.Fragment,null,ae&&i.default.createElement(E,{element:e}),ne&&i.default.createElement(b,{element:e}),i.default.createElement(h.Image,{ref:o,name:"element",id:e.id,image:N,x:e.a.x,y:e.a.y,width:e.a.width||1,height:e.a.height||1,rotation:e.a.rotation,opacity:de,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,customCrop:F,listening:he,draggable:le?e.draggable&&C:e.draggable,preventDefault:!le||C,hideInExport:!e.showInExport,onDragMove:t=>{e.set({x:t.target.x(),y:t.target.y()})},onDragEnd:t=>{e.set({x:t.target.x(),y:t.target.y()})},onDblClick:re,onDblTap:re,onTransformStart:()=>{n(!0),oe.current={cropX:e.cropX,cropY:e.cropY,cropWidth:e.cropWidth,cropHeight:e.cropHeight}},onTransform:t=>{var r;const a=t.currentTarget,n=Math.abs(a.scaleX()-1)<1e-7?1:a.scaleX(),i=Math.abs(a.scaleY()-1)<1e-7?1:a.scaleY();a.scaleX(1),a.scaleY(1);const o=null===(r=t.target.getStage())||void 0===r?void 0:r.findOne("Transformer"),d=1-q/S.width,h=Math.min(d,Math.max(0,e.cropX)),l=1-j/S.height,u=Math.min(l,Math.max(0,e.cropY)),c=o.getActiveAnchor(),s=!(c.indexOf("middle")>=0||c.indexOf("center")>=0),g=!s&&n<1&&oe.current.cropHeight>j/S.height;let f=s?e.cropWidth:e.cropWidth*n;g&&(f=e.cropWidth);const p=!s&&i<1&&oe.current.cropWidth>q/S.width;let m=s?e.cropHeight:e.cropHeight*i;p&&(m=e.cropHeight),B&&(f=e.cropWidth,m=e.cropHeight),e.set({cropX:h,cropY:u,x:a.x(),y:a.y(),width:a.width()*n,height:a.height()*i,rotation:t.target.rotation(),cropWidth:Math.min(f,1-h),cropHeight:Math.min(m,1-u)})},onTransformEnd:t=>{const r=t.currentTarget;e.set({width:r.width(),height:r.height(),x:r.x(),y:r.y(),rotation:t.target.rotation(),cropWidth:q/S.width,cropHeight:j/S.height}),n(!1)}}),i.default.createElement(h.Rect,{x:e.a.x,y:e.a.y,width:Math.max(e.a.width-e.borderSize,0),height:Math.max(e.a.height-e.borderSize,0),opacity:de,offsetX:-e.borderSize/2,offsetY:-e.borderSize/2,stroke:e.borderColor,strokeWidth:e.borderSize,listening:!1,visible:!!e.borderSize,rotation:e.rotation,cornerRadius:Math.max(0,V-e.borderSize),hideInExport:!e.showInExport}),!t.isPlaying&&i.default.createElement(h.Image,{image:R?y:x,x:e.a.x,y:e.a.y,offsetX:-e.a.width/2+15/t.scale,offsetY:-e.a.height/2+15/t.scale,rotation:e.a.rotation,width:30/t.scale,height:30/t.scale,hideInExport:!0,onClick:()=>T(!R),onTap:()=>T(!R)}),e._cropModeEnabled&&i.default.createElement(c.Portal,{selector:".page-abs-container",enabled:!0},i.default.createElement(h.Rect,{x:-window.innerWidth/t.scale,y:-window.innerWidth/t.scale,width:window.innerWidth/t.scale*3,height:window.innerWidth/t.scale*3,fill:"rgba(0,0,0,0.3)"}),i.default.createElement(h.Image,{listening:!1,image:N,x:e.a.x,y:e.a.y,width:e.a.width,height:e.a.height,rotation:e.a.rotation,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur}),i.default.createElement(h.Group,{x:e.a.x,y:e.a.y,rotation:e.a.rotation,scaleX:J,scaleY:J},i.default.createElement(h.Image,{image:S,ref:f,opacity:.4,draggable:!0,x:-e.cropX*S.width,y:-e.cropY*S.height,onDragMove:te,onTransform:te}),i.default.createElement(h.Transformer,{ref:ee,anchorSize:20,enabledAnchors:["top-left","top-right","bottom-left","bottom-right"],boundBoxFunc:(e,t)=>t.width<5||t.height<5?e:t,rotateEnabled:!1,borderEnabled:!1,anchorCornerRadius:10,anchorStrokeWidth:2,borderStrokeWidth:2}),i.default.createElement(h.Rect,{width:q,height:j,ref:K,listening:!1,onTransform:t=>{t.target.x()<-e.cropX*S.width-1e-9&&(t.target.x(-e.cropX*S.width),t.target.scaleX(1)),t.target.y()<-e.cropY*S.height-1e-9&&(t.target.y(-e.cropY*S.height),t.target.scaleY(1));const r=Math.min(1,Math.max(0,e.cropX+t.target.x()/S.width)),a=Math.min(1,Math.max(0,t.target.y()/S.height+e.cropY)),n=t.target.width()*t.target.scaleX(),i=t.target.height()*t.target.scaleY(),o=Math.min(1-r,n/S.width),d=Math.min(1-a,i/S.height),h=t.target.getAbsolutePosition(t.target.getParent().getParent());t.target.scale({x:1,y:1}),t.target.position({x:0,y:0}),e.set({x:h.x,y:h.y,cropX:r,cropY:a,cropWidth:o,cropHeight:d,width:Math.min(n*J,S.width*(1-r)*J),height:Math.min(i*J,S.height*(1-a)*J)})}}),i.default.createElement(h.Transformer,{ref:Q,enabledAnchors:["top-left","top-right","bottom-left","bottom-right"],boundBoxFunc:(e,t)=>t.width<5||t.height<5?e:t,keepRatio:!1,rotateEnabled:!1,anchorFill:"rgb(240, 240, 240)",anchorStrokeWidth:2,borderStrokeWidth:2,visible:e.resizable}))))}));
+var e,t=this&&this.__createBinding||(Object.create?function(e,t,r,a){void 0===a&&(a=r);var n=Object.getOwnPropertyDescriptor(t,r);n&&!("get"in n?!t.__esModule:n.writable||n.configurable)||(n={enumerable:!0,get:function(){return t[r]}}),Object.defineProperty(e,a,n)}:function(e,t,r,a){void 0===a&&(a=r),e[a]=t[r]}),r=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),a=this&&this.__importStar||(e=function(t){return e=Object.getOwnPropertyNames||function(e){var t=[];for(var r in e){Object.prototype.hasOwnProperty.call(e,r)&&(t[t.length]=r)}return t},e(t)},function(a){if(a&&a.__esModule){return a}var n={};if(null!=a){for(var i=e(a),o=0;o<i.length;o++){"default"!==i[o]&&t(n,a,i[o])}}return r(n,a),n}),n=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.VideoElement=exports.useLoader=exports.setVideoLoaderHook=exports.useCornerRadiusAndCrop=void 0;const i=n(require("react")),o=require("mobx-react-lite"),d=require("mobx"),h=require("react-konva"),l=n(require("use-image")),u=n(require("konva")),c=require("react-konva-utils"),s=require("../utils/loader"),g=a(require("../utils/svg")),f=require("../utils/flags"),p=require("./apply-filters"),m=require("./use-fadein"),w=require("../utils/screen");function v(){return document.createElement("canvas")}const x=new window.Image;x.src=g.svgToURL('\n  <svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n  <path opacity="0.6" d="M4 5.49683V18.5032C4 20.05 5.68077 21.0113 7.01404 20.227L18.0694 13.7239C19.384 12.9506 19.384 11.0494 18.0694 10.2761L7.01404 3.77296C5.68077 2.98869 4 3.95 4 5.49683Z" fill="white"/>\n  <path d="M4 5.49683V18.5032C4 20.05 5.68077 21.0113 7.01404 20.227L18.0694 13.7239C19.384 12.9506 19.384 11.0494 18.0694 10.2761L7.01404 3.77296C5.68077 2.98869 4 3.95 4 5.49683Z" stroke="#323232" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>\n  </svg>\n');const y=new window.Image;y.src=g.svgToURL('\n  <svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n  <path opacity="0.6" d="M14 19L14 5C14 3.89543 14.8954 3 16 3L17 3C18.1046 3 19 3.89543 19 5L19 19C19 20.1046 18.1046 21 17 21L16 21C14.8954 21 14 20.1046 14 19Z" fill="white"/>\n  <path opacity="0.6" d="M10 19L10 5C10 3.89543 9.10457 3 8 3L7 3C5.89543 3 5 3.89543 5 5L5 19C5 20.1046 5.89543 21 7 21L8 21C9.10457 21 10 20.1046 10 19Z" fill="white"/>\n  <path d="M14 19L14 5C14 3.89543 14.8954 3 16 3L17 3C18.1046 3 19 3.89543 19 5L19 19C19 20.1046 18.1046 21 17 21L16 21C14.8954 21 14 20.1046 14 19Z" stroke="#323232" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>\n  <path d="M10 19L10 5C10 3.89543 9.10457 3 8 3L7 3C5.89543 3 5 3.89543 5 5L5 19C5 20.1046 5.89543 21 7 21L8 21C9.10457 21 10 20.1046 10 19Z" stroke="#323232" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>\n  </svg>\n'),exports.useCornerRadiusAndCrop=(e,t,r,a,n=0,o=!1)=>{const d=Math.floor(Math.max(e.width*a,1)),h=Math.floor(Math.max(e.height*a,1)),l=Math.min(n*a,d/2,h/2),c=Math.max(e.width/r.width,e.height/r.height)*a,s=e.page._exportingOrRendering&&f.flags.imageDownScalingEnabled&&c<1&&!o,g=0===r.x&&0===r.y&&r.width===(null==t?void 0:t.width)&&r.height===(null==t?void 0:t.height),p=i.default.useMemo((()=>{if(t&&t.width&&t.height){return g&&0===l&&!s?void 0:v()}}),[t,l,s,g]),m=()=>{if(!p||!t){return}p.width=d,p.height=h;const e=p.getContext("2d");if(!e){return}l&&(e.beginPath(),e.moveTo(l,0),e.lineTo(d-l,0),e.arc(d-l,l,l,3*Math.PI/2,0,!1),e.lineTo(d,h-l),e.arc(d-l,h-l,l,0,Math.PI/2,!1),e.lineTo(l,h),e.arc(l,h-l,l,Math.PI/2,Math.PI,!1),e.lineTo(0,l),e.arc(l,l,l,Math.PI,3*Math.PI/2,!1),e.clip());const a=s?function(e,t){var r,a;const n=v();n.width=e.width,n.height=e.height,null===(r=n.getContext("2d"))||void 0===r||r.drawImage(e,0,0,n.width,n.height);const i=function(e,t,r,a,n,i,o){for(var d=new ImageData(t,r),h=new Int32Array(e.data.buffer),l=e.width,u=new Int32Array(d.data.buffer),c=d.width,s=t/i,g=r/o,f=Math.round(1/s),p=Math.round(1/g),m=f*p,w=0;w<d.height;w++){for(var v=0;v<c;v++){for(var x=0+Math.round(v/s)+(0+Math.round(w/g))*l,y=0,M=0,E=0,b=0,L=0;L<p;L++){for(var C=0;C<f;C++){var T=h[x+C+L*l];y+=T<<24>>>24,M+=T<<16>>>24,E+=T<<8>>>24,b+=T>>>24}}y=Math.round(y/m),M=Math.round(M/m),E=Math.round(E/m),b=Math.round(b/m),u[v+w*c]=b<<24|E<<16|M<<8|y}}return d}(n.getContext("2d").getImageData(0,0,n.width,n.height),Math.floor(n.width*t),Math.floor(n.height*t),0,0,n.width,n.height);return n.width=Math.floor(n.width*t),n.height=Math.floor(n.height*t),null===(a=n.getContext("2d"))||void 0===a||a.putImageData(i,0,0),n}(t,c):t,n=s?{x:Math.floor(r.x*c),y:Math.floor(r.y*c),width:Math.floor(r.width*c),height:Math.floor(r.height*c)}:r;e.drawImage(a,n.x,n.y,n.width,n.height,0,0,p.width,p.height)};return i.default.useLayoutEffect((()=>{m()}),[p,e.width,e.height,r.x,r.y,r.width,r.height,n,a,o,e.page._exportingOrRendering,s]),i.default.useEffect((()=>()=>{p&&"CANVAS"===p.nodeName&&u.default.Util.releaseCanvas(p)}),[p]),[p||t,m]};const M=v(),E=(0,o.observer)((({element:e})=>{const t=Math.min(30,e.width/4,e.height/4),r=i.default.useRef(null);return i.default.useEffect((()=>{const e=r.current;if(!e){return}const t=new u.default.Animation((t=>{e.rotate(((null==t?void 0:t.timeDiff)||0)/2)}),e.getLayer());return t.start(),()=>{t.stop()}})),i.default.createElement(h.Group,{x:e.a.x,y:e.a.y,rotation:e.a.rotation,listening:!1,opacity:e.a.opacity,hideInExport:!e.showInExport},i.default.createElement(h.Rect,{width:e.width,height:e.height,fill:"rgba(124, 173, 212, 0.8)"}),i.default.createElement(h.Arc,{ref:r,x:e.width/2,y:e.height/2,fill:"white",outerRadius:Math.abs(t),innerRadius:Math.max(1,t-5),angle:270}))})),b=(0,o.observer)((({element:e})=>{const t=Math.max(10,Math.min(30,e.width/25));return i.default.createElement(h.Group,{x:e.a.x,y:e.a.y,rotation:e.a.rotation,listening:!1,opacity:e.a.opacity,hideInExport:!e.showInExport},i.default.createElement(h.Rect,{width:e.width,height:e.height,fill:"rgba(223, 102, 102, 0.8)"}),i.default.createElement(h.Text,{text:"Can not load the video...",fontSize:t,width:e.width,height:e.height,align:"center",fill:"white",verticalAlign:"middle",padding:5}))}));let L=function(e,t,r){const a=i.default.useRef("loading"),n=i.default.useRef(null),[o,d]=i.default.useState(0),h=i.default.useRef(),l=i.default.useRef(),u=i.default.useRef();return h.current===e&&l.current===t&&u.current===r||(a.current="loading",n.current=void 0,h.current=e,l.current=t,u.current=r),i.default.useLayoutEffect((function(){if(e){var i=document.createElement("video");return i.addEventListener("canplay",o),i.addEventListener("error",h),t&&(i.crossOrigin=t),r&&(i.referrerpolicy=r),i.src=e,i.load(),function(){i.removeEventListener("canplay",o),i.removeEventListener("error",h)}}function o(){a.current="loaded",n.current=i,n.current.currentTime=0,d(Math.random()),n.current.removeEventListener("canplay",o)}function h(e){const t=4===i.readyState,r=i.buffered&&i.buffered.length>0&&i.buffered.end(i.buffered.length-1)/i.duration*100>=100;t&&r||(a.current="failed",n.current=void 0,d(Math.random()))}}),[e,t,r]),[n.current,a.current]};exports.setVideoLoaderHook=e=>{L=e},exports.useLoader=(e,t,r)=>{const a=i.default.useRef(),n=()=>{var e;null===(e=a.current)||void 0===e||e.call(a),a.current=void 0};i.default.useEffect((()=>n),[]),i.default.useLayoutEffect((()=>{const i=t.slice(0,200),o=`video with id ${r} url: ${i}`;"loading"!==e||a.current||(a.current=(0,s.incrementLoader)(o)),"loading"!==e&&n(),"failed"===e&&(0,s.triggerLoadError)(o)}),[e])},exports.VideoElement=(0,o.observer)((({element:e,store:t})=>{var r;const[a,n]=i.default.useState(!1),o=i.default.useRef(null),f=i.default.useRef(null),C=t.selectedShapes.indexOf(e)>=0&&e.selectable,[T,R]=i.default.useState(!1),[I,_]=L(e.src,"anonymous"),O=t.activePage===e.page;(0,exports.useLoader)(_,e.src,e.id),I&&(I.width=I.videoWidth,I.height=I.videoHeight,I.playsInline=!0);const S=I||M;i.default.useEffect((()=>{I&&t.history.ignore((()=>{e.set({duration:1e3*I.duration})}))}),[I]),i.default.useEffect((()=>{var r;if(!I){return}const a=t.animatedElementsIds,n=(!a.length||a.includes(e.id))&&t.isPlaying,i=O&&(n||T);if(!i){return void I.pause()}i&&(I.currentTime=e.startTime*I.duration,I.play());const d=new u.default.Animation((()=>{$()}),null===(r=o.current)||void 0===r?void 0:r.getLayer());d.start();const h=()=>{R(!1),I.currentTime=e.startTime*I.duration},l=()=>{I.currentTime>=e.endTime*I.duration&&(I.pause(),I.currentTime=e.startTime*I.duration,R(!1))};return I.addEventListener("ended",h),I.addEventListener("timeupdate",l),()=>{I.pause(),d.stop(),I.removeEventListener("ended",h),I.removeEventListener("timeupdate",l)}}),[I,T,t.isPlaying,O]),i.default.useEffect((()=>{I&&(I.volume=e.volume)}),[I,e.volume]);const k=i.default.useRef();i.default.useEffect((()=>{const r=(0,d.autorun)((()=>{var r,a;if(I){const n=t.animatedElementsIds;if(n.length&&!n.includes(e.id)){return}const i=e.startTime*I.duration*1e3,d=I.duration*(e.endTime-e.startTime)*1e3,h=((t.currentTime||e.page.startTime)-e.page.startTime)%d+i;if(Math.abs(1e3*I.currentTime-h)>500||!t.isPlaying){const r=h/1e3;r!==I.currentTime&&(I.currentTime=r),4!==I.readyState&&!t.isPlaying&&!k.current&&(k.current=(0,s.incrementLoader)(`video ${e.id}`))}$(),null===(a=null===(r=o.current)||void 0===r?void 0:r.getLayer())||void 0===a||a.batchDraw()}}));return()=>{r(),k.current&&(k.current(),k.current=null)}}),[t,I]),i.default.useEffect((()=>{if(!I){return}const t=()=>{var t,r;4!==I.readyState&&e.page._exportingOrRendering||k.current&&($(),null===(r=null===(t=o.current)||void 0===t?void 0:t.getLayer())||void 0===r||r.batchDraw(),k.current(),k.current=null)};let r;return e.page._exportingOrRendering&&(r=setInterval(t,50)),I.addEventListener("timeupdate",t),I.addEventListener("canplay",t),()=>{clearInterval(r),I.removeEventListener("timeupdate",t),I.removeEventListener("canplay",t)}}),[e.page._exportingOrRendering,I,e.id,s.incrementLoader]);let{cropX:P,cropY:X,cropWidth:Y,cropHeight:W}=e;"loaded"!==_&&(P=X=0,Y=W=1);const A=S.width*Y,D=S.height*W,H=e.width/e.height;let q,j;const z=A/D,B="svg"===e.type;B?(q=A,j=D):H>=z?(q=A,j=A/H):(q=D*H,j=D);const F={x:S.width*P,y:S.height*X,width:q,height:j},V=null!==(r=e.cornerRadius)&&void 0!==r?r:0,[Z,U]=(0,exports.useCornerRadiusAndCrop)(e,S,F,t._elementsPixelRatio,V,a||e._cropModeEnabled||"svg"===e.type);let[N,G]=((e,t,r,a)=>{const n=(e=>{const[t,r]=i.default.useState(e);return i.default.useEffect((()=>{(async()=>{const a=await async function(e){if(!(e.indexOf("data:image/svg+xml")>=0||e.indexOf(".svg")>=0)){return e}const t=await g.urlToString(e),r=g.fixSize(t);return g.svgToURL(r)}(e);a!==t&&r(a)})()}),[e]),t})(e.clipSrc||""),[o,d]=(0,l.default)(n,"anonymous"),h=e.clipSrc?d:"loaded";(0,exports.useLoader)(h,e.clipSrc,e.id);const c=i.default.useMemo((()=>{if(t&&o){return v()}}),[t,o]);function s(){var a;if(!o){return}if(!t||!t.width||!t.height){return}if(!o||!o.width||!o.height){return}if(!c){return}const n=v(),i=Math.max(e.width/o.width*r,e.height/o.height*r);n.width=o.width*i,n.height=o.height*i,null===(a=n.getContext("2d"))||void 0===a||a.drawImage(o,0,0,n.width,n.height),c.width=Math.max(t.width,1),c.height=Math.max(t.height,1);const d=c.getContext("2d");d&&(d.save(),d.drawImage(n,0,0,t.width,t.height),u.default.Util.releaseCanvas(n),d.globalCompositeOperation="source-in",d.drawImage(t,0,0,c.width,c.height),d.restore())}return i.default.useLayoutEffect((()=>{s()}),[c,t,o,e.width,e.height,r,...a]),[e.clipSrc&&o?c:t,s]})(e,Z,t._elementsPixelRatio,[F,V,t._elementsPixelRatio]);function $(){U(),G()}const J=Math.max(e.width/q,e.height/j);i.default.useEffect((()=>{var t;if(!e._cropModeEnabled){return}const r=null===(t=o.current)||void 0===t?void 0:t.getStage();function a(t){e._cropModeEnabled&&t.target!==f.current&&e.toggleCropMode(!1)}function n(t){e._cropModeEnabled&&t.target.parentNode!==r.content&&e.toggleCropMode(!1)}return document.body.addEventListener("click",n),null==r||r.on("click",a),null==r||r.on("tap",a),()=>{document.body.removeEventListener("click",n),document.body.removeEventListener("touchstart",n),null==r||r.off("click",a),null==r||r.off("click",a)}}),[e._cropModeEnabled]),i.default.useLayoutEffect((()=>{if(!a&&!e._cropModeEnabled){return(0,p.applyFilter)(o.current,e),(0,d.autorun)((()=>{(0,p.applyFilter)(o.current,e)}),{delay:100})}}),[S,a,Y,W,e._cropModeEnabled]),i.default.useLayoutEffect((()=>{var t;a||e._cropModeEnabled?null===(t=o.current)||void 0===t||t.clearCache():(0,p.applyFilter)(o.current,e)}),[a,e.width,e.height,e._cropModeEnabled]),i.default.useEffect((()=>{(0,p.applyFilter)(o.current,e)}),[e.shadowEnabled,e.shadowBlur,e.cornerRadius,e.shadowColor,e.shadowOffsetX,e.shadowOffsetY,e.shadowOpacity]);const K=i.default.useRef(null),Q=i.default.useRef(null),ee=i.default.useRef(null);i.default.useLayoutEffect((()=>{e._cropModeEnabled&&(Q.current.nodes([K.current]),ee.current.nodes([f.current]))}),[e._cropModeEnabled]);const te=t=>{Math.round(t.target.x())>0&&(t.target.x(0),t.target.scaleX(1)),Math.round(t.target.y())>0&&(t.target.y(0),t.target.scaleY(1));const r=t.target.width()*t.target.scaleX(),a=t.target.height()*t.target.scaleY(),n=Math.min(1,q/r),i=Math.min(1,j/a),o=1-n,d=Math.min(o,Math.max(0,Math.round(-t.target.x())/r)),h=1-i,l=Math.min(h,Math.max(0,Math.round(-t.target.y())/a));t.target.setAttrs({x:-d*S.width,y:-l*S.height,scaleX:1,scaleY:1}),e.set({cropX:d,cropY:l,cropWidth:n,cropHeight:i})},re=()=>{"svg"!==e.type&&e.contentEditable&&setTimeout((()=>{e.toggleCropMode(!0)}))},ae="loading"===_,ne="failed"===_,ie=!ae&&!ne,oe=i.default.useRef({cropX:0,cropY:0,cropWidth:0,cropHeight:0}),de=ie?e.a.opacity:0;(0,m.useFadeIn)(o,de);const he=e.selectable||"admin"===t.role,le=(0,w.isTouchDevice)();return i.default.createElement(i.default.Fragment,null,ae&&i.default.createElement(E,{element:e}),ne&&i.default.createElement(b,{element:e}),i.default.createElement(h.Image,{ref:o,name:"element",id:e.id,image:N,x:e.a.x,y:e.a.y,width:e.a.width||1,height:e.a.height||1,rotation:e.a.rotation,opacity:de,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,customCrop:F,listening:he,draggable:le?e.draggable&&C:e.draggable,preventDefault:!le||C,hideInExport:!e.showInExport,onDragMove:t=>{e.set({x:t.target.x(),y:t.target.y()})},onDragEnd:t=>{e.set({x:t.target.x(),y:t.target.y()})},onDblClick:re,onDblTap:re,onTransformStart:()=>{n(!0),oe.current={cropX:e.cropX,cropY:e.cropY,cropWidth:e.cropWidth,cropHeight:e.cropHeight}},onTransform:t=>{var r;const a=t.currentTarget,n=Math.abs(a.scaleX()-1)<1e-7?1:a.scaleX(),i=Math.abs(a.scaleY()-1)<1e-7?1:a.scaleY();a.scaleX(1),a.scaleY(1);const o=null===(r=t.target.getStage())||void 0===r?void 0:r.findOne("Transformer"),d=1-q/S.width,h=Math.min(d,Math.max(0,e.cropX)),l=1-j/S.height,u=Math.min(l,Math.max(0,e.cropY)),c=o.getActiveAnchor(),s=!(c.indexOf("middle")>=0||c.indexOf("center")>=0),g=!s&&n<1&&oe.current.cropHeight>j/S.height;let f=s?e.cropWidth:e.cropWidth*n;g&&(f=e.cropWidth);const p=!s&&i<1&&oe.current.cropWidth>q/S.width;let m=s?e.cropHeight:e.cropHeight*i;p&&(m=e.cropHeight),B&&(f=e.cropWidth,m=e.cropHeight),e.set({cropX:h,cropY:u,x:a.x(),y:a.y(),width:a.width()*n,height:a.height()*i,rotation:t.target.rotation(),cropWidth:Math.min(f,1-h),cropHeight:Math.min(m,1-u)})},onTransformEnd:t=>{const r=t.currentTarget;e.set({width:r.width(),height:r.height(),x:r.x(),y:r.y(),rotation:t.target.rotation(),cropWidth:q/S.width,cropHeight:j/S.height}),n(!1)}}),i.default.createElement(h.Rect,{x:e.a.x,y:e.a.y,width:Math.max(e.a.width-e.borderSize,0),height:Math.max(e.a.height-e.borderSize,0),opacity:de,offsetX:-e.borderSize/2,offsetY:-e.borderSize/2,stroke:e.borderColor,strokeWidth:e.borderSize,listening:!1,visible:!!e.borderSize,rotation:e.rotation,cornerRadius:Math.max(0,V-e.borderSize),hideInExport:!e.showInExport}),!t.isPlaying&&i.default.createElement(h.Image,{image:T?y:x,x:e.a.x,y:e.a.y,offsetX:-e.a.width/2+15/t.scale,offsetY:-e.a.height/2+15/t.scale,rotation:e.a.rotation,width:30/t.scale,height:30/t.scale,hideInExport:!0,onClick:()=>R(!T),onTap:()=>R(!T)}),e._cropModeEnabled&&i.default.createElement(c.Portal,{selector:".page-abs-container",enabled:!0},i.default.createElement(h.Rect,{x:-window.innerWidth/t.scale,y:-window.innerWidth/t.scale,width:window.innerWidth/t.scale*3,height:window.innerWidth/t.scale*3,fill:"rgba(0,0,0,0.3)"}),i.default.createElement(h.Image,{listening:!1,image:N,x:e.a.x,y:e.a.y,width:e.a.width,height:e.a.height,rotation:e.a.rotation,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur}),i.default.createElement(h.Group,{x:e.a.x,y:e.a.y,rotation:e.a.rotation,scaleX:J,scaleY:J},i.default.createElement(h.Image,{image:S,ref:f,opacity:.4,draggable:!0,x:-e.cropX*S.width,y:-e.cropY*S.height,onDragMove:te,onTransform:te}),i.default.createElement(h.Transformer,{ref:ee,anchorSize:20,enabledAnchors:["top-left","top-right","bottom-left","bottom-right"],boundBoxFunc:(e,t)=>t.width<5||t.height<5?e:t,rotateEnabled:!1,borderEnabled:!1,anchorCornerRadius:10,anchorStrokeWidth:2,borderStrokeWidth:2}),i.default.createElement(h.Rect,{width:q,height:j,ref:K,listening:!1,onTransform:t=>{t.target.x()<-e.cropX*S.width-1e-9&&(t.target.x(-e.cropX*S.width),t.target.scaleX(1)),t.target.y()<-e.cropY*S.height-1e-9&&(t.target.y(-e.cropY*S.height),t.target.scaleY(1));const r=Math.min(1,Math.max(0,e.cropX+t.target.x()/S.width)),a=Math.min(1,Math.max(0,t.target.y()/S.height+e.cropY)),n=t.target.width()*t.target.scaleX(),i=t.target.height()*t.target.scaleY(),o=Math.min(1-r,n/S.width),d=Math.min(1-a,i/S.height),h=t.target.getAbsolutePosition(t.target.getParent().getParent());t.target.scale({x:1,y:1}),t.target.position({x:0,y:0}),e.set({x:h.x,y:h.y,cropX:r,cropY:a,cropWidth:o,cropHeight:d,width:Math.min(n*J,S.width*(1-r)*J),height:Math.min(i*J,S.height*(1-a)*J)})}}),i.default.createElement(h.Transformer,{ref:Q,enabledAnchors:["top-left","top-right","bottom-left","bottom-right"],boundBoxFunc:(e,t)=>t.width<5||t.height<5?e:t,keepRatio:!1,rotateEnabled:!1,anchorFill:"rgb(240, 240, 240)",anchorStrokeWidth:2,borderStrokeWidth:2,visible:e.resizable}))))}));

package/model/history.js

@@ -1 +1 @@
-Object.defineProperty(exports,"__esModule",{value:!0}),exports.UndoManager=void 0;const t=require("mobx-state-tree"),e=require("../utils/deep-equal");Object.assign(t.types),exports.UndoManager=t.types.model("UndoManager",{history:t.types.array(t.types.frozen()),undoIdx:-1,targetPath:""}).views((t=>({get canUndo(){return t.undoIdx>0},get canRedo(){return t.undoIdx<t.history.length-1}}))).actions((o=>{let a,n,r=!1,s=null,d=0,i=0;const c=()=>i>0;function h(){const e=(0,t.getSnapshot)(a);return{pages:e.pages,width:e.width,height:e.height,custom:e.custom}}function u(o){const n=a.pages.map((t=>t.id)),r=o.pages.map((t=>t.id)),s=!(0,e.deepEqual)(n,r),d=!(0,e.deepEqual)(a.custom,o.custom);s?(0,t.applySnapshot)(a.pages,o.pages):a.pages.forEach(((e,a)=>{(0,t.applySnapshot)(e,o.pages[a])})),d&&a.set({custom:o.custom}),a.setSize(o.width,o.height)}return{startTransaction(){i++},endTransaction(t){i--,t||this.requestAddState(h())},async ignore(t,e=!1,a=!1){a&&await new Promise((t=>setTimeout(t,10))),d&&o.addUndoState();let n=c();o.startTransaction();let r=i;try{await t()}catch(u){setTimeout((()=>{throw u}))}const s=r!==i,h=!s;o.endTransaction(h),e||n||o.replaceState(),s||(clearTimeout(d),d=0)},async transaction(t){await o.ignore(t,!0),this.addUndoState()},requestAddState(t){s=t,d||c()||(r?r=!1:d=setTimeout((()=>{d=0,clearTimeout(d),c()||this.addUndoState()}),100))},addUndoState(){if(r){return void(r=!1)}const t=o.history[o.undoIdx];!(0,e.deepEqual)(s,t)&&(clearTimeout(d),d=0,o.history.splice(o.undoIdx+1),o.history.push(s),o.undoIdx=o.history.length-1)},afterCreate(){if(a=(0,t.resolvePath)(o,".."),!a){throw new Error("Failed to find target store for UndoManager. Please provide `targetPath` property, or a `targetStore` in the environment")}n=(0,t.onSnapshot)(a,(()=>{this.requestAddState(h())})),0===o.history.length&&this.requestAddState(h())},clear(){clearTimeout(d),d=0,o.history.splice(0,o.history.length),o.undoIdx=-1,o.addUndoState(h())},beforeDestroy(){n()},undo(){d&&this.addUndoState(),o.canUndo?(o.undoIdx--,r=!0,u(o.history[o.undoIdx])):console.warn("No undo history. Please check `store.history.canUndo` before calling undo action.")},redo(){d&&this.addUndoState(),o.canRedo?(o.undoIdx++,r=!0,u(o.history[o.undoIdx])):console.warn("No redo history. Please check `store.history.canRedo` before calling redo action.")},replaceState(){o.history[o.undoIdx]=h()}}})),exports.default=exports.UndoManager;
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.UndoManager=void 0;const t=require("mobx-state-tree"),e=require("../utils/deep-equal");Object.assign(t.types),exports.UndoManager=t.types.model("UndoManager",{history:t.types.array(t.types.frozen()),undoIdx:-1,targetPath:""}).views((t=>({get canUndo(){return t.undoIdx>0},get canRedo(){return t.undoIdx<t.history.length-1}}))).actions((o=>{let a,n,r=!1,s=null,d=0,i=0;const u=()=>i>0;function c(){const e=(0,t.getSnapshot)(a);return{pages:e.pages,width:e.width,height:e.height,custom:e.custom,audios:e.audios}}function h(o){const n=a.pages.map((t=>t.id)),r=o.pages.map((t=>t.id)),s=!(0,e.deepEqual)(n,r),d=!(0,e.deepEqual)(a.custom,o.custom);s?(0,t.applySnapshot)(a.pages,o.pages):a.pages.forEach(((e,a)=>{(0,t.applySnapshot)(e,o.pages[a])})),d&&a.set({custom:o.custom}),a.setSize(o.width,o.height)}return{startTransaction(){i++},endTransaction(t){i--,t||this.requestAddState(c())},async ignore(t,e=!1,a=!1){a&&await new Promise((t=>setTimeout(t,10))),d&&o.addUndoState();let n=u();o.startTransaction();let r=i;try{await t()}catch(h){setTimeout((()=>{throw h}))}const s=r!==i,c=!s;o.endTransaction(c),e||n||o.replaceState(),s||(clearTimeout(d),d=0)},async transaction(t){await o.ignore(t,!0),this.addUndoState()},requestAddState(t){s=t,d||u()||(r?r=!1:d=setTimeout((()=>{d=0,clearTimeout(d),u()||this.addUndoState()}),100))},addUndoState(){if(r){return void(r=!1)}const t=o.history[o.undoIdx];!(0,e.deepEqual)(s,t)&&(clearTimeout(d),d=0,o.history.splice(o.undoIdx+1),o.history.push(s),o.undoIdx=o.history.length-1)},afterCreate(){if(a=(0,t.resolvePath)(o,".."),!a){throw new Error("Failed to find target store for UndoManager. Please provide `targetPath` property, or a `targetStore` in the environment")}n=(0,t.onSnapshot)(a,(()=>{this.requestAddState(c())})),0===o.history.length&&this.requestAddState(c())},clear(){clearTimeout(d),d=0,o.history.splice(0,o.history.length),o.undoIdx=-1,o.addUndoState(c())},beforeDestroy(){n()},undo(){d&&this.addUndoState(),o.canUndo?(o.undoIdx--,r=!0,h(o.history[o.undoIdx])):console.warn("No undo history. Please check `store.history.canUndo` before calling undo action.")},redo(){d&&this.addUndoState(),o.canRedo?(o.undoIdx++,r=!0,h(o.history[o.undoIdx])):console.warn("No redo history. Please check `store.history.canRedo` before calling redo action.")},replaceState(){o.history[o.undoIdx]=c()}}})),exports.default=exports.UndoManager;

package/model/shape-model.d.ts

@@ -11,6 +11,7 @@ export declare const getDiff: (obj1: Record<string, any>, obj2: Record<string, a
 export declare const ShapeFilter: import("mobx-state-tree").IModelType<{
     intensity: import("mobx-state-tree").IType<number, number, number>;
 }, {}, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>;
+export declare const INDEPENDENT_FILTERS: string[];
 export declare const Shape: import("mobx-state-tree").IModelType<{
     id: import("mobx-state-tree").ISimpleType<string>;
     type: import("mobx-state-tree").IType<string, string, string>;

package/model/shape-model.js

@@ -1 +1 @@
-Object.defineProperty(exports,"__esModule",{value:!0}),exports.Shape=exports.ShapeFilter=exports.getDiff=exports.Animation=void 0;const e=require("mobx-state-tree"),t=require("../utils/animations"),i=require("mobx"),n=require("./node-model");exports.Animation=e.types.model("Animation",{delay:0,duration:500,enabled:!0,type:e.types.enumeration("Type",["enter","exit","loop"]),name:"none",data:e.types.frozen({})}),exports.getDiff=(e,t)=>{const i={};for(const n in t){if("number"==typeof e[n]&&"number"==typeof t[n]){const o=t[n]-e[n];0!==o&&(i[n]=o)}}return i},exports.ShapeFilter=e.types.model("ShapeFilter",{intensity:1}),exports.Shape=n.Node.named("Shape").props({x:0,y:0,width:100,height:100,rotation:0,opacity:1,animations:e.types.array(exports.Animation),blurEnabled:!1,blurRadius:10,brightnessEnabled:!1,brightness:0,sepiaEnabled:!1,grayscaleEnabled:!1,filters:e.types.map(exports.ShapeFilter),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((e=>{const t=Object.assign(Object.assign({},e),{x:e.x||0,y:e.y||0,filters:Array.isArray(e.filters)?{}:e.filters});return"width"in e&&(t.width=t.width||1),"height"in e&&(t.height=t.height||1),e.locked&&(t.draggable=!1,t.contentEditable=!1,t.styleEditable=!1,t.resizable=!1,t.removable=!1),t})).views((e=>{const n=(0,i.observable)({x:e.x,y:e.y,width:e.width,height:e.height,rotation:e.rotation,opacity:e.opacity,color:e.color,fontSize:e.fontSize}),o=(0,i.action)((e=>{Object.assign(n,e)})),a=(0,i.action)((e=>{for(const t in e){"number"==typeof n[t]&&(n[t]=n[t]+e[t])}}));return{get a(){const{currentTime:i}=e.store;if(o({x:e.x,y:e.y,width:e.width,height:e.height,rotation:e.rotation,opacity:e.opacity,color:e.color,fontSize:e.fontSize,cropX:e.cropX,cropY:e.cropY,cropWidth:e.cropWidth,cropHeight:e.cropHeight}),0===i){return n}const r=i-e.page.startTime;if(r>e.page.duration){return n}if(r<0){return n}const s=e.store.animatedElementsIds;if(s.length&&!s.includes(e.id)){return n}const l=e.animations.find((e=>"enter"===e.type)),d=(null==l?void 0:l.enabled)&&r<l.delay;d&&o({opacity:0});const p=(null==l?void 0:l.enabled)&&r>=l.delay&&r<=l.delay+l.duration;if(p){const i=r-l.delay,n=(0,t.animate)({element:e,animation:l,dTime:i}),o=(0,exports.getDiff)(e,n);a(o)}const c=e.animations.find((e=>"exit"===e.type));if(!d&&!p&&(null==c?void 0:c.enabled)&&r>=e.page.duration-c.duration-c.delay&&r<=e.page.duration-c.delay){const i=r-(e.page.duration-c.duration-c.delay),n=(0,t.animate)({element:e,animation:c,dTime:i}),o=(0,exports.getDiff)(e,n);a(o)}(null==c?void 0:c.enabled)&&r>=e.page.duration-c.delay&&o({opacity:0});const y=e.animations.find((e=>"loop"===e.type));if(null==y?void 0:y.enabled){const i=r,n=(0,t.animate)({element:e,animation:y,dTime:i}),o=(0,exports.getDiff)(e,n);a(o)}return n},animated:t=>e.a[t]}})).actions((e=>({setAnimation(t,i){const n=e.animations.find((e=>e.type===t));n?Object.assign(n,i):e.animations.push(Object.assign({type:t},i))},setFilter(t,i){e.filters.clear(),0!==i&&e.filters.set(t,{intensity:i})}})));
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.Shape=exports.INDEPENDENT_FILTERS=exports.ShapeFilter=exports.getDiff=exports.Animation=void 0;const e=require("mobx-state-tree"),t=require("../utils/animations"),i=require("mobx"),o=require("./node-model");exports.Animation=e.types.model("Animation",{delay:0,duration:500,enabled:!0,type:e.types.enumeration("Type",["enter","exit","loop"]),name:"none",data:e.types.frozen({})}),exports.getDiff=(e,t)=>{const i={};for(const o in t){if("number"==typeof e[o]&&"number"==typeof t[o]){const n=t[o]-e[o];0!==n&&(i[o]=n)}}return i},exports.ShapeFilter=e.types.model("ShapeFilter",{intensity:1}),exports.INDEPENDENT_FILTERS=["temperature","contrast","highlights","shadows","white","black","saturation","vibrance"],exports.Shape=o.Node.named("Shape").props({x:0,y:0,width:100,height:100,rotation:0,opacity:1,animations:e.types.array(exports.Animation),blurEnabled:!1,blurRadius:10,brightnessEnabled:!1,brightness:0,sepiaEnabled:!1,grayscaleEnabled:!1,filters:e.types.map(exports.ShapeFilter),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((e=>{const t=Object.assign(Object.assign({},e),{x:e.x||0,y:e.y||0,filters:Array.isArray(e.filters)?{}:e.filters});return"width"in e&&(t.width=t.width||1),"height"in e&&(t.height=t.height||1),e.locked&&(t.draggable=!1,t.contentEditable=!1,t.styleEditable=!1,t.resizable=!1,t.removable=!1),t})).views((e=>{const o=(0,i.observable)({x:e.x,y:e.y,width:e.width,height:e.height,rotation:e.rotation,opacity:e.opacity,color:e.color,fontSize:e.fontSize}),n=(0,i.action)((e=>{Object.assign(o,e)})),a=(0,i.action)((e=>{for(const t in e){"number"==typeof o[t]&&(o[t]=o[t]+e[t])}}));return{get a(){const{currentTime:i}=e.store;if(n({x:e.x,y:e.y,width:e.width,height:e.height,rotation:e.rotation,opacity:e.opacity,color:e.color,fontSize:e.fontSize,cropX:e.cropX,cropY:e.cropY,cropWidth:e.cropWidth,cropHeight:e.cropHeight}),0===i){return o}const r=i-e.page.startTime;if(r>e.page.duration){return o}if(r<0){return o}const s=e.store.animatedElementsIds;if(s.length&&!s.includes(e.id)){return o}const l=e.animations.find((e=>"enter"===e.type)),d=(null==l?void 0:l.enabled)&&r<l.delay;d&&n({opacity:0});const p=(null==l?void 0:l.enabled)&&r>=l.delay&&r<=l.delay+l.duration;if(p){const i=r-l.delay,o=(0,t.animate)({element:e,animation:l,dTime:i}),n=(0,exports.getDiff)(e,o);a(n)}const c=e.animations.find((e=>"exit"===e.type));if(!d&&!p&&(null==c?void 0:c.enabled)&&r>=e.page.duration-c.duration-c.delay&&r<=e.page.duration-c.delay){const i=r-(e.page.duration-c.duration-c.delay),o=(0,t.animate)({element:e,animation:c,dTime:i}),n=(0,exports.getDiff)(e,o);a(n)}(null==c?void 0:c.enabled)&&r>=e.page.duration-c.delay&&n({opacity:0});const h=e.animations.find((e=>"loop"===e.type));if(null==h?void 0:h.enabled){const i=r,o=(0,t.animate)({element:e,animation:h,dTime:i}),n=(0,exports.getDiff)(e,o);a(n)}return o},animated:t=>e.a[t]}})).actions((e=>({setAnimation(t,i){const o=e.animations.find((e=>e.type===t));o?Object.assign(o,i):e.animations.push(Object.assign({type:t},i))},setFilter(t,i){exports.INDEPENDENT_FILTERS.includes(t)||e.filters.forEach(((t,i)=>{exports.INDEPENDENT_FILTERS.includes(i.toString())||e.filters.delete(i.toString())})),null==i?e.filters.delete(t):e.filters.set(t,{intensity:i})}})));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "polotno",
-  "version": "2.22.2",
+  "version": "2.23.1",
   "description": "Design Editor Framework",
   "author": "Anton Lavrenov",
   "keywords": [

package/pages-timeline/pages-timeline.js

@@ -1,7 +1,7 @@
-var e=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.PagesTimeline=exports.Pages=void 0;const t=require("mobx-react-lite"),a=e(require("react")),o=require("mobx-state-tree"),n=require("@blueprintjs/core"),i=require("@blueprintjs/icons"),l=require("react-sortablejs"),r=require("../utils/flags"),s=e(require("../utils/styled")),d=require("../utils/l10n"),u=require("../utils/deep-equal"),p=(0,s.default)("div")`
+var e=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.PagesTimeline=exports.Pages=void 0;const t=require("mobx-react-lite"),a=e(require("react")),n=require("mobx-state-tree"),o=require("@blueprintjs/core"),l=require("@blueprintjs/icons"),i=require("react-sortablejs"),r=require("../utils/flags"),s=e(require("../utils/styled")),d=require("../utils/l10n"),u=require("../utils/deep-equal"),c=(0,s.default)("div")`
   position: relative;
   height: 0px;
-`,c=(0,s.default)("div")`
+`,p=(0,s.default)("div")`
   position: absolute;
   bottom: 5px;
   width: auto;
@@ -41,7 +41,7 @@ var e=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:
   &:hover {
     display: block;
   }
-`,x=(0,s.default)("div")`
+`,h=(0,s.default)("div")`
   border: 4px solid rgba(0, 0, 0, 0.1);
   border-left-color: #09f;
   border-radius: 50%;
@@ -54,7 +54,7 @@ var e=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:
       transform: rotate(360deg);
     }
   }
-`,v=(0,s.default)("div")`
+`,x=(0,s.default)("div")`
   position: absolute;
   z-index: 20;
   top: -5px;
@@ -65,7 +65,7 @@ var e=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:
   &:hover {
     display: block;
   }
-`;let h=[],b=!1;const E=async()=>{if(b||0===h.length){return}b=!0;const{page:e,setPreview:t}=h.shift();t(await e.store.toDataURL({pageId:e.id,pixelRatio:.1,quickMode:!0})),b=!1,E()},w=(0,t.observer)((({page:e,scale:t})=>{const[l,s]=a.default.useState(null),p=e.store.activePage===e,c=e.store,f=a.default.useRef(!1);a.default.useEffect((()=>{const t=()=>{h.push({page:e,setPreview:s}),E()};let a=null,n=null,i=Date.now();const l=()=>{a&&clearTimeout(a),f.current&&(n||(n=setTimeout((()=>{Date.now()-i>=6e3&&(t(),i=Date.now(),n=null)}),6e3)),a=setTimeout((()=>{t(),i=Date.now(),a=null,n&&(clearTimeout(n),n=null)}),300))};let r=null;const d=(0,o.onSnapshot)(e,(e=>{(0,u.deepEqual)(r,e)||(l(),r=e)})),p=new IntersectionObserver((e=>{e.forEach((e=>{e.isIntersecting?(f.current=!0,l()):(a&&clearTimeout(a),n&&clearTimeout(n),f.current=!1)}))}),{threshold:.1});return v.current&&p.observe(v.current),()=>{p.disconnect(),a&&clearTimeout(a),n&&clearTimeout(n),d(),h=h.filter((t=>t.page!==e))}}),[]);const v=a.default.useRef(null),b=60/e.computedHeight*e.computedWidth,w=r.flags.animationsEnabled?e.duration*t:b,y=c.pages.length>1;return a.default.createElement(m,{style:{width:w+"px",marginRight:r.flags.animationsEnabled?"0px":"10px",height:"60px"},ref:v,className:"polotno-page-container"},a.default.createElement("div",{style:{width:"100%",height:"100%",borderRadius:"15px",backgroundImage:l?`url("${l}")`:"none",backgroundRepeat:"repeat-x",backgroundSize:"auto 100%",backgroundColor:"white",display:"flex",justifyContent:"center",alignItems:"center"},onClick:()=>{e.store.selectPage(e.id)}},!l&&a.default.createElement(x,null)),a.default.createElement("div",{style:{position:"absolute",top:"0",left:"0px",bottom:"0px",right:"0px",borderRadius:"15px",border:p?"2px solid rgb(0, 161, 255, 0.9)":"2px solid lightgrey",zIndex:1,pointerEvents:"none"}}),r.flags.animationsEnabled&&a.default.createElement("div",{style:{position:"absolute",zIndex:1,bottom:"5px",left:"5px",backgroundColor:"rgba(0, 0, 0, 0.5)",color:"white",padding:"2px 7px",textAlign:"center",borderRadius:"4rem"}},(e.duration/1e3).toFixed(1),"s"),r.flags.animationsEnabled&&a.default.createElement("div",{style:{position:"absolute",zIndex:1,top:"50%",right:"0px",width:"8px",height:"50%",transform:"translateY(-50%) translateX(-3px)",borderRadius:"5px",border:"1px solid rgb(255, 255, 255, 0.6)",backgroundColor:"rgb(0, 0, 0, 0.6)",cursor:"ew-resize"},onMouseDown:t=>{(t=>{t.preventDefault();const a=t=>{t.preventDefault();const{clientX:a}=t,{left:o,width:n}=v.current.getBoundingClientRect(),i=(a-o- -7)/n;e.set({duration:Math.max(1e3,i*e.duration)})};window.addEventListener("mousemove",a),window.addEventListener("mouseup",(()=>{window.removeEventListener("mousemove",a)}))})(t)}}),a.default.createElement(g,{className:"polotno-page-menu",onClick:e=>{e.stopPropagation()}},a.default.createElement(n.Popover,{content:a.default.createElement(n.Menu,{style:{width:"100px"}},a.default.createElement(n.MenuItem,{icon:a.default.createElement(i.Duplicate,null),text:(0,d.t)("pagesTimeline.duplicatePage"),onClick:()=>{e.clone()}}),a.default.createElement(n.MenuItem,{icon:a.default.createElement(i.Insert,null),text:(0,d.t)("pagesTimeline.addPage"),onClick:()=>{var t,a,o;const n=c.addPage({bleed:(null===(t=c.activePage)||void 0===t?void 0:t.bleed)||0,width:(null===(a=c.activePage)||void 0===a?void 0:a.width)||"auto",height:(null===(o=c.activePage)||void 0===o?void 0:o.height)||"auto"}),i=c.pages.indexOf(e);n.setZIndex(i+1)}}),y&&a.default.createElement(n.MenuItem,{icon:a.default.createElement(i.Trash,null),text:(0,d.t)("pagesTimeline.removePage"),onClick:()=>{e.store.deletePages([e.id])}})),position:n.Position.TOP},a.default.createElement(n.Button,{icon:a.default.createElement(i.More,null),style:{minHeight:"20px",borderRadius:"10px"}}))))})),y=(0,t.observer)((({store:e,scale:t})=>{var o;const n=e.isPlaying?e.currentTime:(null===(o=e.activePage)||void 0===o?void 0:o.startTime)||0;return a.default.createElement("div",{style:{position:"absolute",left:n*t+"px",top:"-5px",width:"2px",height:"calc(100% + 10px)",backgroundColor:"rgb(0, 161, 255, 0.9)"}})}));exports.Pages=(0,t.observer)((({store:e,scale:t})=>{const o=e.pages.map((e=>({id:e.id})));return a.default.createElement(a.default.Fragment,null,a.default.createElement(l.ReactSortable,{list:o,setList:t=>{t.forEach((({id:t},a)=>{const o=e.pages.find((e=>e.id===t));e.pages.indexOf(o)!==a&&o.setZIndex(a)}))},direction:"horizontal",style:{display:"flex",flexDirection:"row"},delay:500,delayOnTouchOnly:!0,className:"polotno-pages-container"},o.map((({id:o})=>{const n=e.pages.find((e=>e.id===o));return a.default.createElement(w,{page:n,scale:t,key:o})}))))}));const P=(0,t.observer)((({audio:e,scale:t,store:o,index:l})=>{const r=o.duration*t-e.delay*t,s=Math.min((e.endTime-e.startTime)*e.duration*t,r),u=e.delay*t,p=(a,o)=>{a.stopPropagation(),a.preventDefault();const n=a.clientX,i=u,l=e.endTime,r=e.startTime,s=a=>{a.preventDefault();const s=(a.clientX-n)/t;if("start"===o){const a=Math.max(0,i/t+s),o=s/e.duration,n=Math.min(e.endTime-.1,Math.max(0,r+o));e.set({delay:a,startTime:n})}else{const t=s/e.duration,a=Math.min(1,Math.max(e.startTime+.1,l+t));e.set({endTime:a})}},d=()=>{window.removeEventListener("mousemove",s),window.removeEventListener("mouseup",d)};window.addEventListener("mousemove",s),window.addEventListener("mouseup",d)};return a.default.createElement(f,{style:{position:"absolute",left:`${u}px`,top:20*l+"px",width:`${s}px`,height:"20px",backgroundColor:"rgba(0, 161, 255, 0.5)",borderRadius:"8px",cursor:"move"},onMouseDown:a=>{const o=a.clientX,n=u,i=a=>{const i=(a.clientX-o)/t,l=Math.max(0,n/t+i);e.delay,e.set({delay:l})},l=()=>{window.removeEventListener("mousemove",i),window.removeEventListener("mouseup",l)};window.addEventListener("mousemove",i),window.addEventListener("mouseup",l)},className:"polotno-audio-container"},a.default.createElement("div",{style:{position:"absolute",left:"0",top:"0",width:"10px",height:"100%",cursor:"ew-resize"},onMouseDown:e=>p(e,"start")}),a.default.createElement("div",{style:{position:"absolute",right:"0",top:"0",width:"10px",height:"100%",cursor:"ew-resize"},onMouseDown:e=>p(e,"end")}),a.default.createElement(v,{className:"polotno-audio-menu",onClick:e=>{e.stopPropagation()}},a.default.createElement(n.Popover,{content:a.default.createElement(n.Menu,{style:{width:"100px"}},a.default.createElement(n.MenuItem,{icon:a.default.createElement(i.Trash,null),text:(0,d.t)("pagesTimeline.removeAudio"),onClick:()=>{o.removeAudio(e.id)}})),position:n.Position.TOP},a.default.createElement(n.Button,{icon:a.default.createElement(i.More,null),style:{minHeight:"20px",borderRadius:"10px",padding:"0px"}}))))})),T=(0,t.observer)((({store:e,scale:t})=>a.default.createElement("div",{style:{position:"absolute",bottom:"-15px",paddingTop:"5px"},className:"polotno-audios-container"},e.audios.map(((o,n)=>a.default.createElement(P,{key:o.id,audio:o,scale:t,store:e,index:n})))))),k=e=>{const t=Math.floor(e/6e4),a=Math.floor(e%6e4/1e3);return`${t.toString().padStart(2,"0")}:${a.toString().padStart(2,"0")}`},M=(0,s.default)("div")`
+`;let v=[],b=!1;const E=async()=>{if(b||0===v.length){return}b=!0;const{page:e,setPreview:t}=v.shift();t(await e.store.toDataURL({pageId:e.id,pixelRatio:.1,quickMode:!0})),b=!1,E()},w=(0,t.observer)((({page:e,scale:t})=>{const[i,s]=a.default.useState(null),c=e.store.activePage===e,p=e.store,f=a.default.useRef(!1);a.default.useEffect((()=>{const t=()=>{v.push({page:e,setPreview:s}),E()};let a=null,o=null,l=Date.now();const i=()=>{a&&clearTimeout(a),f.current&&(o||(o=setTimeout((()=>{Date.now()-l>=6e3&&(t(),l=Date.now(),o=null)}),6e3)),a=setTimeout((()=>{t(),l=Date.now(),a=null,o&&(clearTimeout(o),o=null)}),300))};let r=null;const d=(0,n.onSnapshot)(e,(e=>{(0,u.deepEqual)(r,e)||(i(),r=e)})),c=new IntersectionObserver((e=>{e.forEach((e=>{e.isIntersecting?(f.current=!0,i()):(a&&clearTimeout(a),o&&clearTimeout(o),f.current=!1)}))}),{threshold:.1});return x.current&&c.observe(x.current),()=>{c.disconnect(),a&&clearTimeout(a),o&&clearTimeout(o),d(),v=v.filter((t=>t.page!==e))}}),[]);const x=a.default.useRef(null),b=60/e.computedHeight*e.computedWidth,w=r.flags.animationsEnabled?e.duration*t:b,y=p.pages.length>1;return a.default.createElement(m,{style:{width:w+"px",marginRight:r.flags.animationsEnabled?"0px":"10px",height:"60px"},ref:x,className:"polotno-page-container"},a.default.createElement("div",{style:{width:"100%",height:"100%",borderRadius:"15px",backgroundImage:i?`url("${i}")`:"none",backgroundRepeat:"repeat-x",backgroundSize:"auto 100%",backgroundColor:"white",display:"flex",justifyContent:"center",alignItems:"center"},onClick:()=>{e.store.selectPage(e.id)}},!i&&a.default.createElement(h,null)),a.default.createElement("div",{style:{position:"absolute",top:"0",left:"0px",bottom:"0px",right:"0px",borderRadius:"15px",border:c?"2px solid rgb(0, 161, 255, 0.9)":"2px solid lightgrey",zIndex:1,pointerEvents:"none"}}),r.flags.animationsEnabled&&a.default.createElement("div",{style:{position:"absolute",zIndex:1,bottom:"5px",left:"5px",backgroundColor:"rgba(0, 0, 0, 0.5)",color:"white",padding:"2px 7px",textAlign:"center",borderRadius:"4rem"}},(e.duration/1e3).toFixed(1),"s"),r.flags.animationsEnabled&&a.default.createElement("div",{style:{position:"absolute",zIndex:1,top:"50%",right:"0px",width:"8px",height:"50%",transform:"translateY(-50%) translateX(-3px)",borderRadius:"5px",border:"1px solid rgb(255, 255, 255, 0.6)",backgroundColor:"rgb(0, 0, 0, 0.6)",cursor:"ew-resize"},onMouseDown:t=>{(t=>{t.preventDefault();const a=t=>{t.preventDefault();const{clientX:a}=t,{left:n,width:o}=x.current.getBoundingClientRect(),l=(a-n- -7)/o;e.set({duration:Math.max(1e3,l*e.duration)})};window.addEventListener("mousemove",a),window.addEventListener("mouseup",(()=>{window.removeEventListener("mousemove",a)}))})(t)}}),a.default.createElement(g,{className:"polotno-page-menu",onClick:e=>{e.stopPropagation()}},a.default.createElement(o.Popover,{content:a.default.createElement(o.Menu,{style:{width:"100px"}},a.default.createElement(o.MenuItem,{icon:a.default.createElement(l.Duplicate,null),text:(0,d.t)("pagesTimeline.duplicatePage"),onClick:()=>{e.clone()}}),a.default.createElement(o.MenuItem,{icon:a.default.createElement(l.Insert,null),text:(0,d.t)("pagesTimeline.addPage"),onClick:()=>{var t,a,n;const o=p.addPage({bleed:(null===(t=p.activePage)||void 0===t?void 0:t.bleed)||0,width:(null===(a=p.activePage)||void 0===a?void 0:a.width)||"auto",height:(null===(n=p.activePage)||void 0===n?void 0:n.height)||"auto"}),l=p.pages.indexOf(e);o.setZIndex(l+1)}}),y&&a.default.createElement(o.MenuItem,{icon:a.default.createElement(l.Trash,null),text:(0,d.t)("pagesTimeline.removePage"),onClick:()=>{e.store.deletePages([e.id])}})),position:o.Position.TOP},a.default.createElement(o.Button,{icon:a.default.createElement(l.More,null),style:{minHeight:"20px",borderRadius:"10px"}}))))})),y=(0,t.observer)((({store:e,scale:t})=>{var n;const o=e.isPlaying?e.currentTime:(null===(n=e.activePage)||void 0===n?void 0:n.startTime)||0;return a.default.createElement("div",{style:{position:"absolute",left:o*t+"px",top:"-5px",width:"2px",height:"calc(100% + 10px)",backgroundColor:"rgb(0, 161, 255, 0.9)"}})}));exports.Pages=(0,t.observer)((({store:e,scale:t})=>{const n=e.pages.map((e=>({id:e.id})));return a.default.createElement(a.default.Fragment,null,a.default.createElement(i.ReactSortable,{list:n,setList:t=>{t.forEach((({id:t},a)=>{const n=e.pages.find((e=>e.id===t));e.pages.indexOf(n)!==a&&n.setZIndex(a)}))},direction:"horizontal",style:{display:"flex",flexDirection:"row"},delay:500,delayOnTouchOnly:!0,className:"polotno-pages-container"},n.map((({id:n})=>{const o=e.pages.find((e=>e.id===n));return a.default.createElement(w,{page:o,scale:t,key:n})}))))}));const P=(0,t.observer)((({audio:e,scale:t,store:n,index:i})=>{const r=n.duration*t-e.delay*t,s=Math.min((e.endTime-e.startTime)*e.duration*t,r),u=e.delay*t,{data:c,isLoading:p}=function(e){const[t,n]=a.default.useState(null),[o,l]=a.default.useState(!1),[i,r]=a.default.useState(null);return a.default.useEffect((()=>{var t;e?(l(!0),(t=e,new Promise((e=>{const a=new AudioContext;fetch(t).then((e=>e.arrayBuffer())).then((e=>a.decodeAudioData(e))).then((t=>{const a=t.getChannelData(0),n=Math.max(1,Math.floor(a.length/100)),o=[];for(let e=0;e<a.length;e+=n){let t=0;for(let o=0;o<n&&e+o<a.length;o++){t=Math.max(t,Math.abs(a[e+o]))}o.push(t)}e(o)}))}))).then((e=>{n(e),l(!1)})).catch((e=>{console.error("Error generating waveform:",e),r(e),l(!1)}))):n(null)}),[e]),{data:t,isLoading:o,error:i}}(e.src),m=function(e,t,n,o,l=20){const[i,r]=a.default.useState("");return a.default.useEffect((()=>{r(e&&t>0?function(e,t,a,n,o){let l="";const i=t/2,r=Math.floor(e.length*n),s=Math.ceil(e.length*o),d=e.slice(r,s);if(0===d.length){return""}d.forEach(((e,t)=>{const n=t/(d.length-1)*a,o=i-e*i;l+=0===t?`M ${n},${o}`:` L ${n},${o}`}));for(let u=d.length-1;u>=0;u--){const e=u/(d.length-1)*a,t=i+d[u]*i;l+=` L ${e},${t}`}return l+=" Z",l}(e,l,t,n,o):"")}),[e,t,l,n,o]),i}(c,s,e.startTime,e.endTime,20),g=e=>{const a=n.pages;let o=e;for(const n of a){const a=n.startTime,l=n.startTime+n.duration;if(Math.abs(e-a)<10/t){return o=a,o}if(Math.abs(e-l)<10/t){return o=l,o}}return null},v=(a,n)=>{a.stopPropagation(),a.preventDefault();const o=a.clientX,l=u,i=s,r=e.endTime,d=e.startTime,c=a=>{a.preventDefault();const s=(a.clientX-o)/t;if("start"===n){let a=Math.max(0,l/t+s);a=g(a)||a;const n=s/e.duration,o=Math.min(e.endTime-.1,Math.max(0,d+n));e.set({delay:a,startTime:o})}else{const a=l/t+i/t;let n=a+s;n=g(n)||n;const o=(n-a)/e.duration,d=Math.min(1,Math.max(e.startTime+.1,r+o));e.set({endTime:d})}},p=()=>{window.removeEventListener("mousemove",c),window.removeEventListener("mouseup",p)};window.addEventListener("mousemove",c),window.addEventListener("mouseup",p)};return a.default.createElement(f,{style:{position:"absolute",left:`${u}px`,top:20*i+"px",width:`${s}px`,height:"20px",backgroundColor:"rgba(0, 161, 255, 0.5)",borderRadius:"8px",cursor:"move"},onMouseDown:a=>{const n=a.clientX,o=u;a.preventDefault();const l=a=>{a.preventDefault();const l=(a.clientX-n)/t;let i=o/t+l;const r=(e.endTime-e.startTime)*e.duration,s=i+r,d=g(i),u=g(s),c=Math.abs(i-d),p=Math.abs(s-u);let m;m=null!==d&&c<p?Math.max(0,d):null!==u?Math.max(0,u-r):Math.max(0,i),e.set({delay:m})},i=()=>{window.removeEventListener("mousemove",l),window.removeEventListener("mouseup",i)};window.addEventListener("mousemove",l),window.addEventListener("mouseup",i)},className:"polotno-audio-container"},m&&a.default.createElement("svg",{width:"100%",height:"100%",viewBox:`0 0 ${s} 20`,preserveAspectRatio:"none"},a.default.createElement("path",{d:m,fill:"rgba(255, 255, 255, 0.5)"})),p&&a.default.createElement("div",{style:{display:"flex",justifyContent:"center",alignItems:"center",height:"100%"}},a.default.createElement(h,null)),a.default.createElement("div",{style:{position:"absolute",left:"0",top:"0",width:"10px",height:"100%",cursor:"ew-resize"},onMouseDown:e=>v(e,"start")}),a.default.createElement("div",{style:{position:"absolute",right:"0",top:"0",width:"10px",height:"100%",cursor:"ew-resize"},onMouseDown:e=>v(e,"end")}),a.default.createElement(x,{className:"polotno-audio-menu",onClick:e=>{e.stopPropagation()}},a.default.createElement(o.Popover,{content:a.default.createElement(o.Menu,{style:{width:"100px"}},a.default.createElement(o.MenuItem,{icon:a.default.createElement(l.Trash,null),text:(0,d.t)("pagesTimeline.removeAudio"),onClick:()=>{n.removeAudio(e.id)}})),position:o.Position.TOP},a.default.createElement(o.Button,{icon:a.default.createElement(l.More,null),style:{minHeight:"20px",borderRadius:"10px",padding:"0px"}}))))})),T=(0,t.observer)((({store:e,scale:t})=>a.default.createElement("div",{style:{position:"absolute",bottom:"-15px",paddingTop:"5px"},className:"polotno-audios-container"},e.audios.map(((n,o)=>a.default.createElement(P,{key:n.id,audio:n,scale:t,store:e,index:o})))))),M=e=>{const t=Math.floor(e/6e4),a=Math.floor(e%6e4/1e3);return`${t.toString().padStart(2,"0")}:${a.toString().padStart(2,"0")}`},k=(0,s.default)("div")`
   position: absolute;
   top: 5px;
   left: 5px;
@@ -73,4 +73,4 @@ var e=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:
   z-index: 2;
   width: 100px;
   text-align: center;
-`,R=(0,t.observer)((({store:e})=>a.default.createElement(M,{className:"polotno-play-button-container"},a.default.createElement(n.Button,{icon:e.isPlaying?a.default.createElement(i.Pause,{size:25}):a.default.createElement(i.Play,{size:25}),onClick:()=>{var t;if(e.isPlaying){const t=e.activePage;e.stop(),t&&e.selectPage(t.id)}else{e.play({startTime:(null===(t=e.activePage)||void 0===t?void 0:t.startTime)||0})}},style:{width:"60px",height:"60px",borderRadius:"50px"}}),a.default.createElement("div",{style:{paddingTop:"5px"}},k(e.currentTime)," / ",k(e.duration)))));exports.PagesTimeline=(0,t.observer)((({store:e,defaultOpened:t=!1})=>{const o=.02,[l,s]=a.default.useState(t),u=r.flags.animationsEnabled?10*e.audios.length+90:90;return a.default.createElement(a.default.Fragment,null,a.default.createElement(p,null,a.default.createElement(c,null,a.default.createElement(n.Navbar,{style:{height:"35px",padding:"0 5px"}},a.default.createElement(n.Navbar.Group,{style:{height:"35px"}},a.default.createElement(n.Button,{minimal:!0,onClick:()=>{s(!l)},icon:r.flags.animationsEnabled&&!l?a.default.createElement(i.Play,null):null},(0,d.t)("pagesTimeline.pages")))))),a.default.createElement(n.Navbar,{style:{padding:"5px",height:"auto",zIndex:1,display:l?"block":"none"},className:"polotno-pages-timeline"},a.default.createElement("div",{style:{width:"100%",position:"relative",height:u}},a.default.createElement("div",{style:{position:"absolute",top:0,left:0,right:0,bottom:0,overflowX:"auto",padding:"5px",zIndex:1,display:"flex"}},a.default.createElement("div",{style:{height:"60px",display:"flex"}},r.flags.animationsEnabled&&a.default.createElement("div",{style:{width:"90px",paddingRight:"5px",paddingLeft:"60px"}}),a.default.createElement("div",{style:{position:"relative"}},a.default.createElement(exports.Pages,{store:e,scale:o}),r.flags.animationsEnabled&&a.default.createElement(y,{store:e,scale:o}),r.flags.animationsEnabled&&a.default.createElement(T,{store:e,scale:o})),a.default.createElement(n.Button,{icon:a.default.createElement(i.Plus,null),style:{width:"60px"},onClick:()=>{var t;e.addPage({bleed:(null===(t=e.activePage)||void 0===t?void 0:t.bleed)||0})},minimal:!0}))),r.flags.animationsEnabled&&a.default.createElement(R,{store:e}))))}));
+`,C=(0,t.observer)((({store:e})=>a.default.createElement(k,{className:"polotno-play-button-container"},a.default.createElement(o.Button,{icon:e.isPlaying?a.default.createElement(l.Pause,{size:25}):a.default.createElement(l.Play,{size:25}),onClick:()=>{var t;if(e.isPlaying){const t=e.activePage;e.stop(),t&&e.selectPage(t.id)}else{e.play({startTime:(null===(t=e.activePage)||void 0===t?void 0:t.startTime)||0})}},style:{width:"60px",height:"60px",borderRadius:"50px"}}),a.default.createElement("div",{style:{paddingTop:"5px"}},M(e.currentTime)," / ",M(e.duration)))));exports.PagesTimeline=(0,t.observer)((({store:e,defaultOpened:t=!1})=>{const n=.02,[i,s]=a.default.useState(t),u=r.flags.animationsEnabled?10*e.audios.length+90:90;return a.default.createElement(a.default.Fragment,null,a.default.createElement(c,null,a.default.createElement(p,null,a.default.createElement(o.Navbar,{style:{height:"35px",padding:"0 5px"}},a.default.createElement(o.Navbar.Group,{style:{height:"35px"}},a.default.createElement(o.Button,{minimal:!0,onClick:()=>{s(!i)},icon:r.flags.animationsEnabled&&!i?a.default.createElement(l.Play,null):null},(0,d.t)("pagesTimeline.pages")))))),a.default.createElement(o.Navbar,{style:{padding:"5px",height:"auto",zIndex:1,display:i?"block":"none"},className:"polotno-pages-timeline"},a.default.createElement("div",{style:{width:"100%",position:"relative",height:u}},a.default.createElement("div",{style:{position:"absolute",top:0,left:0,right:0,bottom:0,overflowX:"auto",padding:"5px",zIndex:1,display:"flex"}},a.default.createElement("div",{style:{height:"60px",display:"flex"}},r.flags.animationsEnabled&&a.default.createElement("div",{style:{width:"90px",paddingRight:"5px",paddingLeft:"60px"}}),a.default.createElement("div",{style:{position:"relative"}},a.default.createElement(exports.Pages,{store:e,scale:n}),r.flags.animationsEnabled&&a.default.createElement(y,{store:e,scale:n}),r.flags.animationsEnabled&&a.default.createElement(T,{store:e,scale:n})),a.default.createElement(o.Button,{icon:a.default.createElement(l.Plus,null),style:{width:"60px"},onClick:()=>{var t;e.addPage({bleed:(null===(t=e.activePage)||void 0===t?void 0:t.bleed)||0})},minimal:!0}))),r.flags.animationsEnabled&&a.default.createElement(C,{store:e}))))}));