polotno 2.23.2 → 2.23.4

package/canvas/html-element.js

@@ -1,15 +1,15 @@
-var e,t=this&&this.__createBinding||(Object.create?function(e,t,n,i){void 0===i&&(i=n);var r=Object.getOwnPropertyDescriptor(t,n);r&&!("get"in r?!t.__esModule:r.writable||r.configurable)||(r={enumerable:!0,get:function(){return t[n]}}),Object.defineProperty(e,i,r)}:function(e,t,n,i){void 0===i&&(i=n),e[i]=t[n]}),n=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),i=this&&this.__importStar||(e=function(t){return e=Object.getOwnPropertyNames||function(e){var t=[];for(var n in e){Object.prototype.hasOwnProperty.call(e,n)&&(t[t.length]=n)}return t},e(t)},function(i){if(i&&i.__esModule){return i}var r={};if(null!=i){for(var o=e(i),a=0;a<o.length;a++){"default"!==o[a]&&t(r,i,o[a])}}return n(r,i),r}),r=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.HTMLElement=exports.setQuillContent=exports.createQuill=exports.setQuillFormats=exports.quillRef=void 0;const o=r(require("react")),a=require("mobx-react-lite"),l=require("react-konva"),s=r(require("quill")),u=r(require("konva")),c=i(require("mobx")),d=require("../utils/flags"),f=require("./apply-filters"),g=require("./text-element"),h=require("./use-color"),m=require("../utils/html2canvas"),p=require("./use-fadein"),x=require("react-konva-utils"),b=r(require("../utils/styled")),y=require("../utils/loader"),w=require("../utils/text"),v=i(require("../utils/fonts")),S=require("../utils/screen"),k=require("./text-element/max-font-size");exports.quillRef=c.observable({enabled:!1,currentFormat:{},editor:c.observable.object({instance:null},{},{deep:!1})});const E=(0,b.default)("div",o.default.forwardRef)`
+var e,t=this&&this.__createBinding||(Object.create?function(e,t,n,r){void 0===r&&(r=n);var i=Object.getOwnPropertyDescriptor(t,n);i&&!("get"in i?!t.__esModule:i.writable||i.configurable)||(i={enumerable:!0,get:function(){return t[n]}}),Object.defineProperty(e,r,i)}:function(e,t,n,r){void 0===r&&(r=n),e[r]=t[n]}),n=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),r=this&&this.__importStar||(e=function(t){return e=Object.getOwnPropertyNames||function(e){var t=[];for(var n in e){Object.prototype.hasOwnProperty.call(e,n)&&(t[t.length]=n)}return t},e(t)},function(r){if(r&&r.__esModule){return r}var i={};if(null!=r){for(var o=e(r),l=0;l<o.length;l++){"default"!==o[l]&&t(i,r,o[l])}}return n(i,r),i}),i=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.HTMLElement=exports.setQuillContent=exports.createQuill=exports.setQuillFormats=exports.quillRef=void 0;const o=i(require("react")),l=require("mobx-react-lite"),a=require("react-konva"),s=i(require("quill")),u=r(require("mobx")),c=require("../utils/flags"),d=require("./apply-filters"),f=require("./text-element"),g=require("./use-color"),h=require("../utils/html2canvas"),m=require("./use-fadein"),p=require("react-konva-utils"),x=i(require("../utils/styled")),b=require("../utils/loader"),y=require("../utils/text"),w=r(require("../utils/fonts")),v=require("../utils/screen"),S=require("./text-element/max-font-size");exports.quillRef=u.observable({enabled:!1,currentFormat:{},editor:u.observable.object({instance:null},{},{deep:!1})});const E=(0,x.default)("div",o.default.forwardRef)`
   .ql-editor {
     outline: none;
   }
   .ql-clipboard {
     pointer-events: none;
   }
-  ${m.resetStyleContent}
+  ${h.resetStyleContent}
   strong {
     font-weight: 700;
   }
   .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 k=["bold","color","font","italic","size","strike","underline","indent","list","direction"];exports.setQuillFormats=e=>{k=e},exports.createQuill=e=>new s.default(e,{toolbar:!1,keyboard:!1,clipboard:{matchVisual:!1},formats:k}),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 z=({html:e,onBlur:t,onChange:n,element:r})=>{const i=o.default.useRef(null);o.default.useEffect((()=>{if(!i.current){return}const e=(0,exports.createQuill)(i.current);return u.runInAction((()=>{exports.quillRef.editor.instance=e})),window.__polotnoQuill=e,e.on("text-change",(()=>{e.getSelection()&&u.runInAction((()=>{exports.quillRef.currentFormat=e.getFormat()})),setTimeout((()=>{var e;const t=null===(e=i.current)||void 0===e?void 0:e.childNodes[0];n(t.innerHTML)}),10)})),e.setSelection(0,0,"api"),e.on("selection-change",((t,n,r)=>{t&&u.runInAction((()=>{exports.quillRef.currentFormat=e.getFormat()}))})),i.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 r=function(e){return!!e&&!!e.closest(".sketch-picker")}(e.relatedTarget);r||t()})),()=>{u.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=i.current)||void 0===t?void 0:t.childNodes[0].innerHTML)===r.text||((0,exports.setQuillContent)(n,e),o&&(n.setSelection(o.index,o.length),u.runInAction((()=>{exports.quillRef.currentFormat=n.getFormat()}))))}),[r.text]);const l={color:r.fill};return r.fill.indexOf("gradient")>=0&&(l.backgroundColor=r.fill,l.backgroundImage=r.fill,l.backgroundSize="100% 100%",l.backgroundRepeat="repeat",l.webkitBackgroundClip="text",l.MozBackgroundClip="text",l.WebkitTextFillColor="transparent",l.MozTextFillColor="transparent"),o.default.createElement(E,{ref:i,style:Object.assign(Object.assign({},l),{fontSize:r.fontSize,fontWeight:r.fontWeight,width:r.a.width,fontFamily:'"'+r.fontFamily+'"',lineHeight:r.lineHeight,letterSpacing:r.letterSpacing*r.fontSize+"px",textAlign:r.align}),dir:(0,f.getDir)((0,y.removeTags)(r.text))})},O=(e,t=100,n=!1,r="")=>{const[i,l]=o.default.useState(e),a=o.default.useRef(null);return o.default.useEffect((()=>e===n?(a.current&&(clearTimeout(a.current),a.current=null),void l(n)):(a.current&&clearTimeout(a.current),a.current=setTimeout((()=>{l(e),a.current=null}),t),()=>{a.current&&clearTimeout(a.current)})),[e,t]),[i,l]};function q(e,{fontFamily:t="",color:n="black"}={}){let r=`color: ${n||e.fill}`;return e.fill.indexOf("gradient")>=0&&(r=`\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`,r,`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,f.getDir)((0,y.removeTags)(e.text))}">${(0,y.sanitizeHtml)(e.text).replace(/\n/g,"</br>")}</div>`}const F=/^((?!chrome|android).)*safari/i.test(navigator.userAgent);exports.HTMLElement=(0,l.observer)((({element:e,store:t})=>{const n=o.default.useRef(null),[r,i]=o.default.useState(),[l,s]=o.default.useState(!1),[x,k]=o.default.useState(!0),[R,T]=o.default.useState(!1),_=o.default.useRef(e.height),C=t.selectedShapes.indexOf(e)>=0&&e.selectable,M=e.fontSize/3,{textVerticalResizeEnabled:$}=c.flags,A=(0,f.usePrevious)(e.fontFamily),[H]=(0,f.useFontLoader)(t,e.fontFamily),I=e._editModeEnabled;(0,m.useFadeIn)(n);const j=H?e.fontFamily:A!==e.fontFamily?A:"Arial",P=(0,g.useColor)(e).fill,D=q(e,{fontFamily:j,color:P}),{width:L,height:X}=function(e,t,n){return o.default.useMemo((()=>(0,h.detectSize)(e)),[e,t.width,n])}(D,e,H);o.default.useEffect((()=>{if(!H){return}if(!e.height){return void e.set({height:X})}const{textOverflow:n}=c.flags;if("change-font-size"!==n||l){"resize"===n&&($&&e.height<X&&t.history.ignore((()=>{e.set({height:X})})),$||e.height===X||t.history.ignore((()=>{e.set({height:X})})))}else{const n=(e=>{let t=e.fontSize;for(let n=1;n<50;n++){const n=q(Object.assign(Object.assign({},e.toJSON()),{fontSize:t}),{fontFamily:e.fontFamily}),{height:r}=(0,h.detectSize)(n),i=e.height&&r>e.height,o=(0,h.isContentWrapping)({html:n});if(!i&&!o){break}t-=.5}return t})(e);n!==e.fontSize?t.history.ignore((()=>{e.set({fontSize:n})})):e.height!==X&&($&&e.height<X?t.history.ignore((()=>{e.set({height:X})})):$||t.history.ignore((()=>{e.set({height:X})})))}}));const Y=o.default.useRef(0),W=o.default.useMemo((()=>{const e={lastArgs:null,lastResult:null};return async function(t){return e.lastArgs&&e.lastResult&&(n=e.lastArgs,r=t,JSON.stringify(n)===JSON.stringify(r))||(e.lastResult=await(0,h.htmlToCanvas)(t),e.lastArgs=Object.assign({},t)),e.lastResult;var n,r}}),[]),B=o.default.useRef(null);o.default.useEffect((()=>{l||I||(async()=>{Y.current++;const n=Y.current,r=(0,b.incrementLoader)(`text ${e.id}`);B.current=r,k(!0);let o=null;const l=F?5:1;for(let i=0;i<l;i++){const l=i>0?W:h.htmlToCanvas;try{if(o=await l({skipCache:i>0,html:D,width:e.width||1,height:e.height||X||1,fontFamily:j,padding:M,pixelRatio:t._elementsPixelRatio,font:t.fonts.find((e=>e.fontFamily===j))||w.globalFonts.find((e=>e.fontFamily===j))}),n!==Y.current){return void r()}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)&&F){await new Promise((e=>setTimeout(e,50*(i+1))));continue}}catch(a){(0,b.triggerLoadError)(`Error rendering rich text with id ${e.id}`);break}}if(!o){return B.current=null,void r()}i(o),k(!1)})()}),[D,l,X,I,j,e.height,t._elementsPixelRatio,H]);const[Q,N]=O(x),[J]=O(l,100,!0),V=J||Q;o.default.useEffect((()=>u.autorun((()=>{const t=n.current;(0,d.applyFilter)(t,e)}))),[r,V,e.shadowColor,e.shadowOffsetX,e.shadowOffsetY,e.shadowOpacity]),o.default.useEffect((()=>{r&&!x&&B.current&&(B.current(),B.current=null)}),[r,x]);let G=0;"middle"===e.verticalAlign&&(G=(e.height-X)/2),"bottom"===e.verticalAlign&&(G=e.height-X);const K=(0,f.getLineHeight)({fontLoaded:H,fontFamily:e.fontFamily,fontSize:e.fontSize,lineHeight:e.lineHeight}),U=(0,v.isTouchDevice)();return o.default.createElement(o.default.Fragment,null,o.default.createElement(a.Rect,{x:e.a.x,y:e.a.y,offsetX:e.backgroundPadding*(e.fontSize*K*.5),offsetY:e.backgroundPadding*(e.fontSize*K*.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*K),height:e.a.height+e.backgroundPadding*(e.fontSize*K),cornerRadius:e.backgroundCornerRadius*(e.fontSize*K*.5)}),o.default.createElement(a.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:U?e.draggable&&C:e.draggable,preventDefault:!U||C,opacity:I?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),_.current=e.height},onTransform:t=>{var n;const r=t.target,i=(null===(n=r.getStage())||void 0===n?void 0:n.findOne("Transformer")).getActiveAnchor(),o="middle-left"===i||"middle-right"===i,l="top-center"===i||"bottom-center"===i,a=r.scaleX();if(o){const t=r.scaleX(),n=Math.max(r.width()*t,e.fontSize);if(r.width(n),r.scaleX(1),c.flags.textVerticalResizeEnabled){const t=Math.max(X,_.current);e.set({height:t})}e.set({width:n,x:r.x(),y:r.y()})}else if(l){let n="resize"===c.flags.textOverflow?X:e.lineHeight*e.fontSize;const i=Math.max(n,t.target.height()*t.target.scaleY());r.scaleY(1),e.set({x:r.x(),y:r.y(),height:i,rotation:r.rotation()})}else{r.scaleX(1),r.scaleY(1),e.set({fontSize:e.fontSize*a,letterSpacing:e.letterSpacing,width:r.width()*a,x:r.x(),y:r.y(),rotation:r.rotation(),height:r.height()*a})}},onTransformEnd:t=>{s(!1),k(!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(a.Image,{ref:n,image:r,x:e.a.x,y:e.a.y,offsetX:M,offsetY:M-G,listening:!1,rotation:e.rotation,width:e.a.width+2*M,height:e.a.height+2*M,visible:!V,opacity:I?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(a.Group,{x:e.a.x,y:e.a.y,rotation:e.rotation,offsetY:-G},o.default.createElement(p.Html,{divProps:{style:{pointerEvents:"none"}}},o.default.createElement(E,{dangerouslySetInnerHTML:{__html:D},style:{pointerEvents:"none"}}))),I&&o.default.createElement(a.Group,{x:e.a.x,y:e.a.y,rotation:e.rotation,offsetY:-G},o.default.createElement(p.Html,null,o.default.createElement(z,{html:D,element:e,onChange:t=>{const n=(0,S.getLimitedFontSize)({oldText:(0,y.removeTags)(e.text),newText:(0,y.removeTags)(t),element:e});e.set({text:t,fontSize:n})},onBlur:t=>{e.toggleEditMode(!1),N(!0)}}))))}));

package/canvas/image-element.js

@@ -1 +1 @@
-var e,t=this&&this.__createBinding||(Object.create?function(e,t,r,a){void 0===a&&(a=r);var i=Object.getOwnPropertyDescriptor(t,r);i&&!("get"in i?!t.__esModule:i.writable||i.configurable)||(i={enumerable:!0,get:function(){return t[r]}}),Object.defineProperty(e,a,i)}: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 i={};if(null!=a){for(var o=e(a),n=0;n<o.length;n++){"default"!==o[n]&&t(i,a,o[n])}}return r(i,a),i}),i=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.ImageElement=exports.useImageLoader=exports.setImageLoaderHook=exports.useCornerRadiusAndCrop=exports.setOuterImageCropTransformerStyle=exports.setInnerImageCropTransformerStyle=exports.useSizeFixer=void 0;const o=i(require("react")),n=require("mobx-react-lite"),h=require("mobx"),d=require("react-konva"),l=i(require("use-image")),s=i(require("konva")),c=require("react-konva-utils"),u=require("../utils/loader"),g=a(require("../utils/svg")),f=require("../utils/flags"),p=require("../utils/canvas"),m=require("./apply-filters"),w=require("./use-fadein"),x=require("../utils/screen");function y(){return document.createElement("canvas")}function M(e,t){return{x:(e.x+t.x)/2,y:(e.y+t.y)/2}}exports.useSizeFixer=e=>{const[t,r]=o.default.useState(e);return o.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};const v={boundBoxFunc:(e,t)=>t.width<5||t.height<5?e:t,enabledAnchors:["top-left","top-right","bottom-left","bottom-right"],keepRatio:!1,rotateEnabled:!1,anchorFill:"rgb(240, 240, 240)",anchorStrokeWidth:2,borderStrokeWidth:2};exports.setInnerImageCropTransformerStyle=e=>{Object.assign(v,e)};const b={boundBoxFunc:(e,t)=>t.width<5||t.height<5?e:t,anchorSize:20,enabledAnchors:["top-left","top-right","bottom-left","bottom-right"],rotateEnabled:!1,borderEnabled:!1,anchorCornerRadius:10,anchorStrokeWidth:2,borderStrokeWidth:2};exports.setOuterImageCropTransformerStyle=e=>{Object.assign(b,e)};const E=(e,t,r)=>Math.max(t,Math.min(r,e));exports.useCornerRadiusAndCrop=(e,t,r,a,i=0,n=!1,h=!0)=>{const d=Math.floor(E(e.a.width*a,1,1e4)),l=Math.floor(E(e.a.height*a,1,1e4)),c=Math.min(i*a,d/2,l/2),u=Math.max(e.a.width/r.width,e.a.height/r.height)*a,g=e.page._exportingOrRendering&&f.flags.imageDownScalingEnabled&&u<1&&!n,m=0===r.x&&0===r.y&&r.width===(null==t?void 0:t.width)&&r.height===(null==t?void 0:t.height),w=o.default.useMemo((()=>{if(t&&t.width&&t.height){return m&&0===c&&!g?void 0:y()}}),[t,c,g,m]);return o.default.useLayoutEffect((()=>{if(!w||!t){return}(0,p.trySetCanvasSize)(w,d,l);const e=w.getContext("2d");if(!e){return}c&&(e.beginPath(),e.moveTo(c,0),e.lineTo(d-c,0),e.arc(d-c,c,c,3*Math.PI/2,0,!1),e.lineTo(d,l-c),e.arc(d-c,l-c,c,0,Math.PI/2,!1),e.lineTo(c,l),e.arc(c,l-c,c,Math.PI/2,Math.PI,!1),e.lineTo(0,c),e.arc(c,c,c,Math.PI,3*Math.PI/2,!1),e.clip());const a=g?function(e,t){var r,a;const i=y();i.width=e.width,i.height=e.height;const o=Math.max(1,Math.floor(i.width*t)),n=Math.max(1,Math.floor(i.height*t));null===(r=i.getContext("2d"))||void 0===r||r.drawImage(e,0,0,i.width,i.height);const h=function(e,t,r,a,i,o,n){for(var h=new ImageData(t,r),d=new Int32Array(e.data.buffer),l=e.width,s=new Int32Array(h.data.buffer),c=h.width,u=t/o,g=r/n,f=Math.round(1/u),p=Math.round(1/g),m=f*p,w=0;w<h.height;w++){for(var x=0;x<c;x++){for(var y=0+Math.round(x/u)+(0+Math.round(w/g))*l,M=0,v=0,b=0,E=0,S=0;S<p;S++){for(var I=0;I<f;I++){var O=d[y+I+S*l];M+=O<<24>>>24,v+=O<<16>>>24,b+=O<<8>>>24,E+=O>>>24}}M=Math.round(M/m),v=Math.round(v/m),b=Math.round(b/m),E=Math.round(E/m),s[x+w*c]=E<<24|b<<16|v<<8|M}}return h}(i.getContext("2d").getImageData(0,0,i.width,i.height),o,n,0,0,i.width,i.height);return i.width=o,i.height=n,null===(a=i.getContext("2d"))||void 0===a||a.putImageData(h,0,0),i}(t,u):t,i=g?{x:Math.floor(r.x*u),y:Math.floor(r.y*u),width:Math.floor(r.width*u),height:Math.floor(r.height*u)}:r;e.drawImage(a,i.x,i.y,i.width,i.height,0,0,w.width,w.height)}),[w,e.a.width,e.a.height,r.x,r.y,r.width,r.height,i,a,n,e.page._exportingOrRendering,g]),o.default.useEffect((()=>()=>{w&&"CANVAS"===w.nodeName&&s.default.Util.releaseCanvas(w)}),[w]),w||t};const S=y(),I=(0,n.observer)((({element:e})=>{const t=Math.min(30,e.a.width/4,e.a.height/4),r=o.default.useRef(null);return o.default.useEffect((()=>{const e=r.current;if(!e){return}const t=new s.default.Animation((t=>{e.rotate(((null==t?void 0:t.timeDiff)||0)/2)}),e.getLayer());return t.start(),()=>{t.stop()}})),o.default.createElement(d.Group,{x:e.x,y:e.y,rotation:e.rotation,listening:!1,opacity:e.a.opacity,hideInExport:!e.showInExport},o.default.createElement(d.Rect,{width:e.a.width,height:e.a.height,fill:"rgba(124, 173, 212, 0.8)"}),o.default.createElement(d.Arc,{ref:r,x:e.a.width/2,y:e.a.height/2,fill:"white",outerRadius:Math.abs(t),innerRadius:Math.max(1,t-5),angle:270}))})),O=(0,n.observer)((({element:e})=>{const t=Math.max(10,Math.min(30,e.a.width/25));return o.default.createElement(d.Group,{x:e.x,y:e.y,rotation:e.rotation,listening:!1,opacity:e.a.opacity,hideInExport:!e.showInExport},o.default.createElement(d.Rect,{width:e.a.width,height:e.a.height,fill:"rgba(223, 102, 102, 0.8)"}),o.default.createElement(d.Text,{text:"Can not load the image...",fontSize:t,width:e.a.width,height:e.a.height,align:"center",fill:"white",verticalAlign:"middle",padding:5}))}));let C=l.default;exports.setImageLoaderHook=e=>{C=e},exports.useImageLoader=(e,t="",r="")=>{const a=o.default.useRef(),i=()=>{var e;null===(e=a.current)||void 0===e||e.call(a),a.current=void 0};o.default.useEffect((()=>i),[]),o.default.useLayoutEffect((()=>{const o=t.slice(0,200),n=`image with id ${r} url: ${o}`;"loading"!==e||a.current||(a.current=(0,u.incrementLoader)(n)),"loading"!==e&&i(),"failed"===e&&(0,u.triggerLoadError)(n)}),[e])},exports.ImageElement=(0,n.observer)((({element:e,store:t})=>{var r;const[a,i]=o.default.useState(!1),n=o.default.useRef(null),l=o.default.useRef(null),u=t.selectedShapes.indexOf(e)>=0&&e.selectable,[f,E]=(e=>{const[t,r]=o.default.useReducer((e=>e+1),0),a=o.default.useRef("loading"),i=o.default.useRef(e.src),n=o.default.useRef(e.src);return n.current!==e.src&&(n.current=e.src,a.current="loading"),o.default.useEffect((()=>{if("svg"!==e.type){return}if(!e.src){return}let t=!1;return(async()=>{a.current="loading",r();const o=await g.urlToString(e.src),n=g.fixSize(o),h=g.replaceColors(n,e.colorsReplace);t||(i.current=h,a.current="loaded",r())})(),()=>{t=!0}}),[e.src,JSON.stringify(e.colorsReplace)]),"svg"!==e.type?[e.src,"loaded"]:[i.current,a.current]})(e),[R,_]=C(f,"anonymous"),T="svg"!==e.type||"loaded"===E?_:"loading";(0,exports.useImageLoader)(T,e.src,e.id);const X=e.page._exportingOrRendering?1:Math.max(1,t.scale),Y=t._elementsPixelRatio*X,k=(({image:e,status:t,type:r})=>{const a=o.default.useRef();return o.default.useEffect((()=>{a.current=e||a.current}),[e]),"failed"!==t||"failed"!==t&&"svg"===r?a.current:void 0})({image:R,status:_,type:e.type}),D=((e,t,r)=>{const a=o.default.useMemo((()=>{var a,i;const{flipX:o,flipY:n}=e,h="svg"===e.type||e.src.indexOf("data:image/svg+xml")>=0||e.src.indexOf(".svg")>=0,d=navigator.userAgent.toLowerCase().indexOf("firefox")>-1,l=(/^((?!chrome|android).)*safari/i.test(navigator.userAgent)||d)&&h||e.maskSrc;if(!o&&!n&&!l){return t}if(!t||!t.width||!t.height){return null}const s=y();let c=1;"svg"===e.type&&(c=Math.max(e.a.width/t.width*r,e.a.height/t.height*r)),(0,p.trySetCanvasSize)(s,Math.max(t.width*c,1),Math.max(t.height*c,1));let u=o?-s.width:0,g=n?-s.height:0;return null===(a=s.getContext("2d"))||void 0===a||a.scale(o?-1:1,n?-1:1),null===(i=s.getContext("2d"))||void 0===i||i.drawImage(t,u,g,s.width,s.height),s}),[e.maskSrc,e.flipX,e.flipY,t,e.a.width,e.a.height,r]);return o.default.useEffect((()=>()=>{a&&"CANVAS"===a.nodeName&&s.default.Util.releaseCanvas(a)}),[a]),a})(e,R||k,Y),W=((e,t)=>{const[r,a]=C(e.maskSrc,"anonymous"),i=e.maskSrc?a:"loaded";return(0,exports.useImageLoader)(i,e.maskSrc||"",e.id),o.default.useMemo((()=>{if(!r){return t}if(!t||!t.width||!t.height){return t}const a=y();a.width=Math.max(t.width,1),a.height=Math.max(t.height,1);const i=a.getContext("2d");if(!i){return t}i.drawImage(t,0,0),i.globalCompositeOperation="source-in";const o=function(e,t){const r=t.width/t.height;let a,i;return r>=e.width/e.height?(a=e.width,i=e.width/r):(a=e.height*r,i=e.height),{x:(e.width-a)/2,y:(e.height-i)/2,width:a,height:i}}(r,e);return i.drawImage(r,o.x,o.y,o.width,o.height,0,0,t.width,t.height),a}),[t,r,e.a.width,e.a.height])})(e,D)||S;let{cropX:A,cropY:L,cropWidth:P,cropHeight:z}=e.a;"loaded"!==_&&(A=L=0,P=z=1);const q=W.width*P,H=W.height*z,j=e.a.width/e.a.height;let F,B;const N=q/H,U=e.stretchEnabled;U?(F=q,B=H):j>=N?(F=q,B=q/j):(F=H*j,B=H);const G={x:W.width*A,y:W.height*L,width:F,height:B},V=null!==(r=e.cornerRadius)&&void 0!==r?r:0,$=e.page._exportingOrRendering?1:Math.min(2,t.scale),J=t._elementsPixelRatio*$;let K=((e,t,r,a)=>{const i=(0,exports.useSizeFixer)(e.clipSrc||""),[n,h]=C(i,"anonymous"),d=e.clipSrc?h:"loaded";(0,exports.useImageLoader)(d,e.clipSrc,e.id);const l=o.default.useMemo((()=>{if(t&&n){return y()}}),[t,n]);return o.default.useLayoutEffect((()=>{var a;if(!n){return}if(!t||!t.width||!t.height){return}if(!n||!n.width||!n.height){return}if(!l){return}const i=y(),o=Math.max(e.a.width/n.width*r,e.a.height/n.height*r);i.width=n.width*o,i.height=n.height*o,null===(a=i.getContext("2d"))||void 0===a||a.drawImage(n,0,0,i.width,i.height),l.width=Math.max(t.width,1),l.height=Math.max(t.height,1);const h=l.getContext("2d");h&&(h.save(),h.drawImage(i,0,0,t.width,t.height),s.default.Util.releaseCanvas(i),h.globalCompositeOperation="source-in",h.drawImage(t,0,0,l.width,l.height),h.restore())}),[l,t,n,e.a.width,e.a.height,r,...a]),e.clipSrc&&n?l:t})(e,(0,exports.useCornerRadiusAndCrop)(e,W,G,J,V,a||e._cropModeEnabled||"svg"===e.type,!0),J,[G,V,J]);const Q=Math.max(e.a.width/F,e.a.height/B);o.default.useEffect((()=>{var t;if(!e._cropModeEnabled){return}const r=null===(t=n.current)||void 0===t?void 0:t.getStage();function a(t){e._cropModeEnabled&&t.target!==l.current&&e.toggleCropMode(!1)}function i(t){e._cropModeEnabled&&t.target.parentNode!==r.content&&e.toggleCropMode(!1)}return document.body.addEventListener("click",i),null==r||r.on("click",a),null==r||r.on("tap",a),()=>{document.body.removeEventListener("click",i),document.body.removeEventListener("touchstart",i),null==r||r.off("click",a),null==r||r.off("click",a)}}),[e._cropModeEnabled]),o.default.useLayoutEffect((()=>{if(!a&&!e._cropModeEnabled){return(0,m.applyFilter)(n.current,e),(0,h.autorun)((()=>{(0,m.applyFilter)(n.current,e)}),{delay:100})}}),[K,e.page._exportingOrRendering,a,P,z,e._cropModeEnabled]),o.default.useLayoutEffect((()=>{var t;a||e._cropModeEnabled?null===(t=n.current)||void 0===t||t.clearCache():(0,m.applyFilter)(n.current,e)}),[a,e.a.width,e.a.height,e._cropModeEnabled]),o.default.useEffect((()=>{(0,m.applyFilter)(n.current,e)}),[e.shadowEnabled,e.shadowBlur,e.cornerRadius,e.shadowColor,e.shadowOffsetX,e.shadowOffsetY,e.shadowOpacity]);const Z=o.default.useRef(null),ee=o.default.useRef(null),te=o.default.useRef(null);o.default.useLayoutEffect((()=>{e._cropModeEnabled&&(ee.current.nodes([Z.current]),te.current.nodes([l.current]))}),[e._cropModeEnabled]);var re=o.default.useRef(null),ae=o.default.useRef(0),ie=o.default.useRef(!1);const oe=t=>{var r;(null===(r=t.evt.touches)||void 0===r?void 0:r.length)>2&&t.target.stopDrag(),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 a=t.target.width()*t.target.scaleX(),i=t.target.height()*t.target.scaleY(),o=Math.min(1,F/a),n=Math.min(1,B/i),h=1-o,d=Math.min(h,Math.max(0,Math.round(-t.target.x())/a)),l=1-n,s=Math.min(l,Math.max(0,Math.round(-t.target.y())/i));t.target.setAttrs({x:-d*W.width,y:-s*W.height,scaleX:1,scaleY:1}),e.set({cropX:d,cropY:s,cropWidth:o,cropHeight:n})},ne=()=>{"svg"!==e.type&&e.contentEditable&&(e.stretchEnabled||setTimeout((()=>{e.toggleCropMode(!0)})))},he="svg"===e.type&&k,de="loading"===_&&!he,le="failed"===_,se=!de&&!le,ce=o.default.useRef({cropX:0,cropY:0,cropWidth:0,cropHeight:0}),ue=se?e.a.opacity:0;(0,w.useFadeIn)(n,ue);const ge=e.selectable||"admin"===t.role,fe=(0,x.isTouchDevice)();return o.default.createElement(o.default.Fragment,null,de&&o.default.createElement(I,{element:e}),le&&o.default.createElement(O,{element:e}),o.default.createElement(d.Image,{ref:n,name:"element",id:e.id,image:K,x:e.a.x,y:e.a.y,width:e.a.width||1,height:e.a.height||1,rotation:e.a.rotation,opacity:ue,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,customCrop:G,listening:ge,draggable:fe?e.draggable&&u:e.draggable,preventDefault:!fe||u,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:ne,onDblTap:ne,onTransformStart:()=>{i(!0),ce.current={cropX:e.cropX,cropY:e.cropY,cropWidth:e.cropWidth,cropHeight:e.cropHeight}},onTransform:t=>{var r;const a=t.currentTarget,i=Math.abs(a.scaleX()-1)<1e-7?1:a.scaleX(),o=Math.abs(a.scaleY()-1)<1e-7?1:a.scaleY();a.scaleX(1),a.scaleY(1);const n=null===(r=t.target.getStage())||void 0===r?void 0:r.findOne("Transformer"),h=1-F/W.width,d=Math.min(h,Math.max(0,e.cropX)),l=1-B/W.height,s=Math.min(l,Math.max(0,e.cropY)),c=n.getActiveAnchor(),u=!(c.indexOf("middle")>=0||c.indexOf("center")>=0),g=!u&&i<1&&ce.current.cropHeight>B/W.height;let f=u?e.cropWidth:e.cropWidth*i;g&&(f=e.cropWidth);const p=!u&&o<1&&ce.current.cropWidth>F/W.width;let m=u?e.cropHeight:e.cropHeight*o;p&&(m=e.cropHeight),U&&(f=e.cropWidth,m=e.cropHeight),e.set({cropX:d,cropY:s,x:a.x(),y:a.y(),width:a.width()*i,height:a.height()*o,rotation:t.target.rotation(),cropWidth:Math.min(f,1-d),cropHeight:Math.min(m,1-s)})},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:F/W.width,cropHeight:B/W.height}),i(!1)}}),o.default.createElement(d.Rect,{x:e.x,y:e.y,width:Math.max(e.a.width-e.borderSize,0),height:Math.max(e.a.height-e.borderSize,0),opacity:ue,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}),e._cropModeEnabled&&o.default.createElement(c.Portal,{selector:".page-abs-container",enabled:!0},o.default.createElement(d.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)"}),o.default.createElement(d.Image,{listening:!1,image:K,x:e.x,y:e.y,width:e.a.width,height:e.a.height,rotation:e.rotation,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur}),o.default.createElement(d.Group,{x:e.x,y:e.y,rotation:e.rotation,scaleX:Q,scaleY:Q},o.default.createElement(d.Image,{image:W,ref:l,opacity:.4,draggable:!0,x:-e.cropX*W.width,y:-e.cropY*W.height,onDragMove:oe,onTransform:oe,onTouchMove:e=>{e.evt.preventDefault();const t=e.target.getStage().getPointersPositions();var r=t[0],a=t[1];const i=e.target;if(r&&!a&&!i.isDragging()&&ie.current&&(i.startDrag(),ie.current=!1),r&&a){s.default.hitOnDragEnabled=!0,i.isDragging()&&(ie.current=!0,i.stopDrag());const t=e.target.getAbsoluteTransform().copy();t.invert();var o={x:r.x,y:r.y},n={x:a.x,y:a.y};if(!re.current){return void(re.current=M(o,n))}var h=M(o,n),d=function(e,t){return Math.sqrt(Math.pow(t.x-e.x,2)+Math.pow(t.y-e.y,2))}(o,n);ae.current||(ae.current=d);const p=i.position();var l={x:h.x-p.x,y:h.y-p.y},c=d/ae.current;i.scaleX(c),i.scaleY(c);const m=t.point(h),w=t.point(re.current);var u=m.x-w.x,g=m.y-w.y,f={x:Math.min(0,h.x-l.x*c+u),y:Math.min(0,h.y-l.y*c+g)};i.position(f),ae.current=d,re.current=h,oe(e)}},onTouchEnd:e=>{ae.current=0,re.current=null,s.default.hitOnDragEnabled=!1}}),o.default.createElement(d.Transformer,Object.assign({ref:te},b)),o.default.createElement(d.Rect,{width:F,height:B,ref:Z,listening:!1,onTransform:t=>{t.target.x()<-e.cropX*W.width-1e-9&&(t.target.x(-e.cropX*W.width),t.target.scaleX(1)),t.target.y()<-e.cropY*W.height-1e-9&&(t.target.y(-e.cropY*W.height),t.target.scaleY(1));const r=Math.min(1,Math.max(0,e.cropX+t.target.x()/W.width)),a=Math.min(1,Math.max(0,t.target.y()/W.height+e.cropY)),i=t.target.width()*t.target.scaleX(),o=t.target.height()*t.target.scaleY(),n=Math.min(1-r,i/W.width),h=Math.min(1-a,o/W.height),d=t.target.getAbsolutePosition(t.target.getParent().getParent());t.target.scale({x:1,y:1}),t.target.position({x:0,y:0}),e.set({x:d.x,y:d.y,cropX:r,cropY:a,cropWidth:n,cropHeight:h,width:Math.min(i*Q,W.width*(1-r)*Q),height:Math.min(o*Q,W.height*(1-a)*Q)})}}),o.default.createElement(d.Transformer,Object.assign({ref:ee},v,{visible:e.resizable})))))}));
+var e,t=this&&this.__createBinding||(Object.create?function(e,t,r,a){void 0===a&&(a=r);var i=Object.getOwnPropertyDescriptor(t,r);i&&!("get"in i?!t.__esModule:i.writable||i.configurable)||(i={enumerable:!0,get:function(){return t[r]}}),Object.defineProperty(e,a,i)}: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 i={};if(null!=a){for(var o=e(a),n=0;n<o.length;n++){"default"!==o[n]&&t(i,a,o[n])}}return r(i,a),i}),i=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.ImageElement=exports.useImageLoader=exports.setImageLoaderHook=exports.useCornerRadiusAndCrop=exports.setOuterImageCropTransformerStyle=exports.setInnerImageCropTransformerStyle=exports.useSizeFixer=void 0;const o=i(require("react")),n=require("mobx-react-lite"),h=require("mobx"),d=require("react-konva"),l=i(require("use-image")),s=i(require("konva")),c=require("react-konva-utils"),u=require("../utils/loader"),g=a(require("../utils/svg")),f=require("../utils/flags"),p=require("../utils/canvas"),m=require("./apply-filters"),w=require("./use-fadein"),x=require("../utils/screen");function y(){return document.createElement("canvas")}function M(e,t){return{x:(e.x+t.x)/2,y:(e.y+t.y)/2}}exports.useSizeFixer=e=>{const[t,r]=o.default.useState(e);return o.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};const v={boundBoxFunc:(e,t)=>t.width<5||t.height<5?e:t,enabledAnchors:["top-left","top-right","bottom-left","bottom-right"],keepRatio:!1,rotateEnabled:!1,anchorFill:"rgb(240, 240, 240)",anchorStrokeWidth:2,borderStrokeWidth:2};exports.setInnerImageCropTransformerStyle=e=>{Object.assign(v,e)};const b={boundBoxFunc:(e,t)=>t.width<5||t.height<5?e:t,anchorSize:20,enabledAnchors:["top-left","top-right","bottom-left","bottom-right"],rotateEnabled:!1,borderEnabled:!1,anchorCornerRadius:10,anchorStrokeWidth:2,borderStrokeWidth:2};exports.setOuterImageCropTransformerStyle=e=>{Object.assign(b,e)};const E=(e,t,r)=>Math.max(t,Math.min(r,e));exports.useCornerRadiusAndCrop=(e,t,r,a,i=0,n=!1,h=!0)=>{const d=Math.floor(E(e.a.width*a,1,1e4)),l=Math.floor(E(e.a.height*a,1,1e4)),c=Math.min(i*a,d/2,l/2),u=Math.max(e.a.width/r.width,e.a.height/r.height)*a,g=e.page._exportingOrRendering&&f.flags.imageDownScalingEnabled&&u<1&&!n,m=0===r.x&&0===r.y&&r.width===(null==t?void 0:t.width)&&r.height===(null==t?void 0:t.height),w=o.default.useMemo((()=>{if(t&&t.width&&t.height){return m&&0===c&&!g?void 0:y()}}),[t,c,g,m]);return o.default.useLayoutEffect((()=>{if(!w||!t){return}(0,p.trySetCanvasSize)(w,d,l);const e=w.getContext("2d");if(!e){return}c&&(e.beginPath(),e.moveTo(c,0),e.lineTo(d-c,0),e.arc(d-c,c,c,3*Math.PI/2,0,!1),e.lineTo(d,l-c),e.arc(d-c,l-c,c,0,Math.PI/2,!1),e.lineTo(c,l),e.arc(c,l-c,c,Math.PI/2,Math.PI,!1),e.lineTo(0,c),e.arc(c,c,c,Math.PI,3*Math.PI/2,!1),e.clip());const a=g?function(e,t){var r,a;const i=y();i.width=e.width,i.height=e.height;const o=Math.max(1,Math.floor(i.width*t)),n=Math.max(1,Math.floor(i.height*t));null===(r=i.getContext("2d"))||void 0===r||r.drawImage(e,0,0,i.width,i.height);const h=function(e,t,r,a,i,o,n){for(var h=new ImageData(t,r),d=new Int32Array(e.data.buffer),l=e.width,s=new Int32Array(h.data.buffer),c=h.width,u=t/o,g=r/n,f=Math.round(1/u),p=Math.round(1/g),m=f*p,w=0;w<h.height;w++){for(var x=0;x<c;x++){for(var y=0+Math.round(x/u)+(0+Math.round(w/g))*l,M=0,v=0,b=0,E=0,S=0;S<p;S++){for(var I=0;I<f;I++){var O=d[y+I+S*l];M+=O<<24>>>24,v+=O<<16>>>24,b+=O<<8>>>24,E+=O>>>24}}M=Math.round(M/m),v=Math.round(v/m),b=Math.round(b/m),E=Math.round(E/m),s[x+w*c]=E<<24|b<<16|v<<8|M}}return h}(i.getContext("2d").getImageData(0,0,i.width,i.height),o,n,0,0,i.width,i.height);return i.width=o,i.height=n,null===(a=i.getContext("2d"))||void 0===a||a.putImageData(h,0,0),i}(t,u):t,i=g?{x:Math.floor(r.x*u),y:Math.floor(r.y*u),width:Math.floor(r.width*u),height:Math.floor(r.height*u)}:r;e.drawImage(a,i.x,i.y,i.width,i.height,0,0,w.width,w.height)}),[w,e.a.width,e.a.height,r.x,r.y,r.width,r.height,i,a,n,e.page._exportingOrRendering,g]),o.default.useEffect((()=>()=>{w&&"CANVAS"===w.nodeName&&s.default.Util.releaseCanvas(w)}),[w]),w||t};const S=y(),I=(0,n.observer)((({element:e})=>{const t=Math.min(30,e.a.width/4,e.a.height/4),r=o.default.useRef(null);return o.default.useEffect((()=>{const e=r.current;if(!e){return}const t=new s.default.Animation((t=>{e.rotate(((null==t?void 0:t.timeDiff)||0)/2)}),e.getLayer());return t.start(),()=>{t.stop()}})),o.default.createElement(d.Group,{x:e.x,y:e.y,rotation:e.rotation,listening:!1,opacity:e.a.opacity,hideInExport:!e.showInExport},o.default.createElement(d.Rect,{width:e.a.width,height:e.a.height,fill:"rgba(124, 173, 212, 0.8)"}),o.default.createElement(d.Arc,{ref:r,x:e.a.width/2,y:e.a.height/2,fill:"white",outerRadius:Math.abs(t),innerRadius:Math.max(1,t-5),angle:270}))})),O=(0,n.observer)((({element:e})=>{const t=Math.max(10,Math.min(30,e.a.width/25));return o.default.createElement(d.Group,{x:e.x,y:e.y,rotation:e.rotation,listening:!1,opacity:e.a.opacity,hideInExport:!e.showInExport},o.default.createElement(d.Rect,{width:e.a.width,height:e.a.height,fill:"rgba(223, 102, 102, 0.8)"}),o.default.createElement(d.Text,{text:"Can not load the image...",fontSize:t,width:e.a.width,height:e.a.height,align:"center",fill:"white",verticalAlign:"middle",padding:5}))}));let C=l.default;exports.setImageLoaderHook=e=>{C=e},exports.useImageLoader=(e,t="",r="")=>{const a=o.default.useRef(),i=()=>{var e;null===(e=a.current)||void 0===e||e.call(a),a.current=void 0};o.default.useEffect((()=>i),[]),o.default.useLayoutEffect((()=>{const o=t.slice(0,200),n=`image with id ${r} url: ${o}`;"loading"!==e||a.current||(a.current=(0,u.incrementLoader)(n)),"loading"!==e&&i(),"failed"===e&&(0,u.triggerLoadError)(n)}),[e])},exports.ImageElement=(0,n.observer)((({element:e,store:t})=>{var r;const[a,i]=o.default.useState(!1),n=o.default.useRef(null),l=o.default.useRef(null),u=t.selectedShapes.indexOf(e)>=0&&e.selectable,[f,E]=(e=>{const[t,r]=o.default.useReducer((e=>e+1),0),a=o.default.useRef("loading"),i=o.default.useRef(e.src),n=o.default.useRef(e.src);return n.current!==e.src&&(n.current=e.src,a.current="loading"),o.default.useEffect((()=>{if("svg"!==e.type){return}if(!e.src){return}let t=!1;return(async()=>{a.current="loading",r();const o=await g.urlToString(e.src),n=g.fixSize(o),h=g.replaceColors(n,e.colorsReplace);t||(i.current=h,a.current="loaded",r())})(),()=>{t=!0}}),[e.src,JSON.stringify(e.colorsReplace)]),"svg"!==e.type?[e.src,"loaded"]:[i.current,a.current]})(e),[R,_]=C(f,"anonymous"),T="svg"!==e.type||"loaded"===E?_:"loading";(0,exports.useImageLoader)(T,e.src,e.id);const X=e.page._exportingOrRendering?1:Math.max(1,t.scale),Y=t._elementsPixelRatio*X,k=(({image:e,status:t,type:r})=>{const a=o.default.useRef();return o.default.useEffect((()=>{a.current=e||a.current}),[e]),"failed"!==t||"failed"!==t&&"svg"===r?a.current:void 0})({image:R,status:_,type:e.type}),D=((e,t,r)=>{const a=o.default.useMemo((()=>{var a,i;const{flipX:o,flipY:n}=e,h="svg"===e.type||e.src.indexOf("data:image/svg+xml")>=0||e.src.indexOf(".svg")>=0,d=navigator.userAgent.toLowerCase().indexOf("firefox")>-1,l=(/^((?!chrome|android).)*safari/i.test(navigator.userAgent)||d)&&h||e.maskSrc;if(!o&&!n&&!l){return t}if(!t||!t.width||!t.height){return null}const s=y();let c=1;"svg"===e.type&&(c=Math.max(e.a.width/t.width*r,e.a.height/t.height*r)),(0,p.trySetCanvasSize)(s,Math.max(t.width*c,1),Math.max(t.height*c,1));let u=o?-s.width:0,g=n?-s.height:0;return null===(a=s.getContext("2d"))||void 0===a||a.scale(o?-1:1,n?-1:1),null===(i=s.getContext("2d"))||void 0===i||i.drawImage(t,u,g,s.width,s.height),s}),[e.maskSrc,e.flipX,e.flipY,t,e.a.width,e.a.height,r]);return o.default.useEffect((()=>()=>{a&&"CANVAS"===a.nodeName&&s.default.Util.releaseCanvas(a)}),[a]),a})(e,R||k,Y),W=((e,t)=>{const[r,a]=C(e.maskSrc,"anonymous"),i=e.maskSrc?a:"loaded";return(0,exports.useImageLoader)(i,e.maskSrc||"",e.id),o.default.useMemo((()=>{if(!r){return t}if(!t||!t.width||!t.height){return t}const a=y();a.width=Math.max(t.width,1),a.height=Math.max(t.height,1);const i=a.getContext("2d");if(!i){return t}i.drawImage(t,0,0),i.globalCompositeOperation="source-in";const o=function(e,t){const r=t.width/t.height;let a,i;return r>=e.width/e.height?(a=e.width,i=e.width/r):(a=e.height*r,i=e.height),{x:(e.width-a)/2,y:(e.height-i)/2,width:a,height:i}}(r,e);return i.drawImage(r,o.x,o.y,o.width,o.height,0,0,t.width,t.height),a}),[t,r,e.a.width,e.a.height])})(e,D)||S;let{cropX:A,cropY:L,cropWidth:P,cropHeight:z}=e.a;"loaded"!==_&&(A=L=0,P=z=1);const q=W.width*P,H=W.height*z,j=e.a.width/e.a.height;let F,B;const N=q/H,U=e.stretchEnabled;U?(F=q,B=H):j>=N?(F=q,B=q/j):(F=H*j,B=H);const G={x:W.width*A,y:W.height*L,width:F,height:B},V=null!==(r=e.cornerRadius)&&void 0!==r?r:0,$=e.page._exportingOrRendering?1:Math.min(2,t.scale),J=t._elementsPixelRatio*$;let K=((e,t,r,a)=>{const i=(0,exports.useSizeFixer)(e.clipSrc||""),[n,h]=C(i,"anonymous"),d=e.clipSrc?h:"loaded";(0,exports.useImageLoader)(d,e.clipSrc,e.id);const l=o.default.useMemo((()=>{if(t&&n){return y()}}),[t,n]);return o.default.useLayoutEffect((()=>{var a;if(!n){return}if(!t||!t.width||!t.height){return}if(!n||!n.width||!n.height){return}if(!l){return}const i=y(),o=Math.max(e.a.width/n.width*r,e.a.height/n.height*r);i.width=Math.max(n.width*o,1),i.height=Math.max(n.height*o,1),null===(a=i.getContext("2d"))||void 0===a||a.drawImage(n,0,0,i.width,i.height),l.width=Math.max(t.width,1),l.height=Math.max(t.height,1);const h=l.getContext("2d");h&&(h.save(),h.drawImage(i,0,0,t.width,t.height),s.default.Util.releaseCanvas(i),h.globalCompositeOperation="source-in",h.drawImage(t,0,0,l.width,l.height),h.restore())}),[l,t,n,e.a.width,e.a.height,r,...a]),e.clipSrc&&n?l:t})(e,(0,exports.useCornerRadiusAndCrop)(e,W,G,J,V,a||e._cropModeEnabled||"svg"===e.type,!0),J,[G,V,J]);const Q=Math.max(e.a.width/F,e.a.height/B);o.default.useEffect((()=>{var t;if(!e._cropModeEnabled){return}const r=null===(t=n.current)||void 0===t?void 0:t.getStage();function a(t){e._cropModeEnabled&&t.target!==l.current&&e.toggleCropMode(!1)}function i(t){e._cropModeEnabled&&t.target.parentNode!==r.content&&e.toggleCropMode(!1)}return document.body.addEventListener("click",i),null==r||r.on("click",a),null==r||r.on("tap",a),()=>{document.body.removeEventListener("click",i),document.body.removeEventListener("touchstart",i),null==r||r.off("click",a),null==r||r.off("click",a)}}),[e._cropModeEnabled]),o.default.useLayoutEffect((()=>{if(!a&&!e._cropModeEnabled){return(0,m.applyFilter)(n.current,e),(0,h.autorun)((()=>{(0,m.applyFilter)(n.current,e)}),{delay:100})}}),[K,e.page._exportingOrRendering,a,P,z,e._cropModeEnabled]),o.default.useLayoutEffect((()=>{var t;a||e._cropModeEnabled?null===(t=n.current)||void 0===t||t.clearCache():(0,m.applyFilter)(n.current,e)}),[a,e.a.width,e.a.height,e._cropModeEnabled]),o.default.useEffect((()=>{(0,m.applyFilter)(n.current,e)}),[e.shadowEnabled,e.shadowBlur,e.cornerRadius,e.shadowColor,e.shadowOffsetX,e.shadowOffsetY,e.shadowOpacity]);const Z=o.default.useRef(null),ee=o.default.useRef(null),te=o.default.useRef(null);o.default.useLayoutEffect((()=>{e._cropModeEnabled&&(ee.current.nodes([Z.current]),te.current.nodes([l.current]))}),[e._cropModeEnabled]);var re=o.default.useRef(null),ae=o.default.useRef(0),ie=o.default.useRef(!1);const oe=t=>{var r;(null===(r=t.evt.touches)||void 0===r?void 0:r.length)>2&&t.target.stopDrag(),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 a=t.target.width()*t.target.scaleX(),i=t.target.height()*t.target.scaleY(),o=Math.min(1,F/a),n=Math.min(1,B/i),h=1-o,d=Math.min(h,Math.max(0,Math.round(-t.target.x())/a)),l=1-n,s=Math.min(l,Math.max(0,Math.round(-t.target.y())/i));t.target.setAttrs({x:-d*W.width,y:-s*W.height,scaleX:1,scaleY:1}),e.set({cropX:d,cropY:s,cropWidth:o,cropHeight:n})},ne=()=>{"svg"!==e.type&&e.contentEditable&&(e.stretchEnabled||setTimeout((()=>{e.toggleCropMode(!0)})))},he="svg"===e.type&&k,de="loading"===_&&!he,le="failed"===_,se=!de&&!le,ce=o.default.useRef({cropX:0,cropY:0,cropWidth:0,cropHeight:0}),ue=se?e.a.opacity:0;(0,w.useFadeIn)(n,ue);const ge=e.selectable||"admin"===t.role,fe=(0,x.isTouchDevice)();return o.default.createElement(o.default.Fragment,null,de&&o.default.createElement(I,{element:e}),le&&o.default.createElement(O,{element:e}),o.default.createElement(d.Image,{ref:n,name:"element",id:e.id,image:K,x:e.a.x,y:e.a.y,width:e.a.width||1,height:e.a.height||1,rotation:e.a.rotation,opacity:ue,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,customCrop:G,listening:ge,draggable:fe?e.draggable&&u:e.draggable,preventDefault:!fe||u,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:ne,onDblTap:ne,onTransformStart:()=>{i(!0),ce.current={cropX:e.cropX,cropY:e.cropY,cropWidth:e.cropWidth,cropHeight:e.cropHeight}},onTransform:t=>{var r;const a=t.currentTarget,i=Math.abs(a.scaleX()-1)<1e-7?1:a.scaleX(),o=Math.abs(a.scaleY()-1)<1e-7?1:a.scaleY();a.scaleX(1),a.scaleY(1);const n=null===(r=t.target.getStage())||void 0===r?void 0:r.findOne("Transformer"),h=1-F/W.width,d=Math.min(h,Math.max(0,e.cropX)),l=1-B/W.height,s=Math.min(l,Math.max(0,e.cropY)),c=n.getActiveAnchor(),u=!(c.indexOf("middle")>=0||c.indexOf("center")>=0),g=!u&&i<1&&ce.current.cropHeight>B/W.height;let f=u?e.cropWidth:e.cropWidth*i;g&&(f=e.cropWidth);const p=!u&&o<1&&ce.current.cropWidth>F/W.width;let m=u?e.cropHeight:e.cropHeight*o;p&&(m=e.cropHeight),U&&(f=e.cropWidth,m=e.cropHeight),e.set({cropX:d,cropY:s,x:a.x(),y:a.y(),width:a.width()*i,height:a.height()*o,rotation:t.target.rotation(),cropWidth:Math.min(f,1-d),cropHeight:Math.min(m,1-s)})},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:F/W.width,cropHeight:B/W.height}),i(!1)}}),o.default.createElement(d.Rect,{x:e.x,y:e.y,width:Math.max(e.a.width-e.borderSize,0),height:Math.max(e.a.height-e.borderSize,0),opacity:ue,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}),e._cropModeEnabled&&o.default.createElement(c.Portal,{selector:".page-abs-container",enabled:!0},o.default.createElement(d.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)"}),o.default.createElement(d.Image,{listening:!1,image:K,x:e.x,y:e.y,width:e.a.width,height:e.a.height,rotation:e.rotation,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur}),o.default.createElement(d.Group,{x:e.x,y:e.y,rotation:e.rotation,scaleX:Q,scaleY:Q},o.default.createElement(d.Image,{image:W,ref:l,opacity:.4,draggable:!0,x:-e.cropX*W.width,y:-e.cropY*W.height,onDragMove:oe,onTransform:oe,onTouchMove:e=>{e.evt.preventDefault();const t=e.target.getStage().getPointersPositions();var r=t[0],a=t[1];const i=e.target;if(r&&!a&&!i.isDragging()&&ie.current&&(i.startDrag(),ie.current=!1),r&&a){s.default.hitOnDragEnabled=!0,i.isDragging()&&(ie.current=!0,i.stopDrag());const t=e.target.getAbsoluteTransform().copy();t.invert();var o={x:r.x,y:r.y},n={x:a.x,y:a.y};if(!re.current){return void(re.current=M(o,n))}var h=M(o,n),d=function(e,t){return Math.sqrt(Math.pow(t.x-e.x,2)+Math.pow(t.y-e.y,2))}(o,n);ae.current||(ae.current=d);const p=i.position();var l={x:h.x-p.x,y:h.y-p.y},c=d/ae.current;i.scaleX(c),i.scaleY(c);const m=t.point(h),w=t.point(re.current);var u=m.x-w.x,g=m.y-w.y,f={x:Math.min(0,h.x-l.x*c+u),y:Math.min(0,h.y-l.y*c+g)};i.position(f),ae.current=d,re.current=h,oe(e)}},onTouchEnd:e=>{ae.current=0,re.current=null,s.default.hitOnDragEnabled=!1}}),o.default.createElement(d.Transformer,Object.assign({ref:te},b)),o.default.createElement(d.Rect,{width:F,height:B,ref:Z,listening:!1,onTransform:t=>{t.target.x()<-e.cropX*W.width-1e-9&&(t.target.x(-e.cropX*W.width),t.target.scaleX(1)),t.target.y()<-e.cropY*W.height-1e-9&&(t.target.y(-e.cropY*W.height),t.target.scaleY(1));const r=Math.min(1,Math.max(0,e.cropX+t.target.x()/W.width)),a=Math.min(1,Math.max(0,t.target.y()/W.height+e.cropY)),i=t.target.width()*t.target.scaleX(),o=t.target.height()*t.target.scaleY(),n=Math.min(1-r,i/W.width),h=Math.min(1-a,o/W.height),d=t.target.getAbsolutePosition(t.target.getParent().getParent());t.target.scale({x:1,y:1}),t.target.position({x:0,y:0}),e.set({x:d.x,y:d.y,cropX:r,cropY:a,cropWidth:n,cropHeight:h,width:Math.min(i*Q,W.width*(1-r)*Q),height:Math.min(o*Q,W.height*(1-a)*Q)})}}),o.default.createElement(d.Transformer,Object.assign({ref:ee},v,{visible:e.resizable})))))}));

package/canvas/workspace-canvas.js

@@ -1 +1 @@
-var e=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.WorkspaceCanvas=void 0;const t=e(require("react")),r=require("mobx-react-lite"),n=e(require("./page")),a=require("./rules"),o=require("./audio"),l=require("./hotkeys"),i=require("../utils/l10n"),s=({store:e})=>t.default.createElement("div",{style:{position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",textAlign:"center"}},t.default.createElement("p",null,(0,i.t)("workspace.noPages")),t.default.createElement("button",{onClick:()=>{e.addPage()}},(0,i.t)("workspace.addPage"))),u=({width:e,height:r,xPadding:n,yPadding:a,backgroundColor:o})=>t.default.createElement("div",{style:{width:e+"px",height:r+"px",backgroundColor:o,paddingLeft:n+"px",paddingRight:n+"px",paddingTop:a+"px",paddingBottom:a+"px"}},t.default.createElement("div",{style:{width:" 100%",height:"100%",backgroundColor:"white"}}));exports.WorkspaceCanvas=(0,r.observer)((({store:e,pageControlsEnabled:r,backgroundColor:i,pageBorderColor:c,activePageBorderColor:d,bleedColor:f,components:h,onKeyDown:g,paddingX:p,paddingY:m,altCloneEnabled:v=!0,visiblePagesOffset:w,renderOnlyActivePage:y})=>{var E;const b=null!=p?p:20,x=null!=m?m:55,[k,P]=t.default.useState({width:100,height:100}),T=t.default.useRef(k),C=t.default.useRef(null),M=t.default.useRef(null),R=e.bleedVisible?Math.max(0,...e.pages.map((e=>e.bleed))):0,_=Math.max(...e.pages.map((e=>e.computedWidth))),L=Math.max(...e.pages.map((e=>e.computedHeight))),O=(null===(E=e.activePage)||void 0===E?void 0:E.computedHeight)||0,W=_+2*R,q=(y?O:L)+2*R,S=async({skipTimeout:t}={skipTimeout:!1})=>{if(t||await new Promise((e=>setTimeout(e,50))),null===C.current){return}const r=C.current.getBoundingClientRect();0!==r.width&&0!==r.height||(console.warn("Polotno warning: <Workspace /> component can not automatically detect its size.\nWidth or height of parent elements is equal 0.\nPlease make sure it has non-zero size. You may need to adjust it with your styles. <Workspace /> will automatically fit into parent container.\nFor simpler debugging here is the log of the parent element:"),console.log(C.current));const n=M.current.clientWidth||r.width,a={width:n,height:r.height};(T.current.width!==a.width||T.current.height!==a.height)&&(P(a),T.current=a);const o=(n-2*b)/W,l=e.pages.length>1?3.1:2,i=(r.height-x*l)/q,s=Math.max(Math.min(o,i),.01);e.scaleToFit!==s&&(e.setScale(s),e._setScaleToFit(s))};t.default.useLayoutEffect((()=>{S({skipTimeout:!0})}),[]),t.default.useEffect((()=>{S()}),[W,q]),t.default.useEffect((()=>{e.__()}),[]),t.default.useEffect((()=>{const e=C.current;if(window.ResizeObserver){const t=new ResizeObserver((()=>{S({skipTimeout:!0})}));return t.observe(e),()=>t.unobserve(e)}{const e=setInterval((()=>{S({skipTimeout:!0})}),100);return()=>clearInterval(e)}}),[W,q]);const F=Math.max(b,(k.width-W*e.scale)/2),z=y?1:e.pages.length,B=q*e.scale*z,H=Math.max(x,(k.height-B)/z/2);t.default.useEffect((()=>{const t=t=>{(g||l.handleHotkey)(t,e)};return window.addEventListener("keydown",t),()=>window.removeEventListener("keydown",t)}),[]),t.default.useEffect((()=>{var t;const r=t=>{if(t.ctrlKey||t.metaKey){t.preventDefault();const o=Math.max(5,e.scaleToFit),l=Math.min(.1,e.scaleToFit),i=.03,s=(r=t.deltaY<0?e.scale*(1+i):e.scale/(1+i),n=l,a=o,Math.max(n,Math.min(a,r)));e.setScale(s)}else{var r,n,a}};return null===(t=M.current)||void 0===t||t.addEventListener("wheel",r),()=>{var e;return null===(e=M.current)||void 0===e?void 0:e.removeEventListener("wheel",r)}}),[]);const N=t.default.useRef(!1);((e,r,n,a,o,l)=>{const i=t.default.useRef({width:r,height:n}),s=t.default.useRef({top:0,left:0}),u=t.default.useRef(!1),c=t.default.useRef(o.pages.length);u.current=c.current!==o.pages.length,c.current=o.pages.length,t.default.useEffect((()=>{const t=e.current,r=e=>{s.current={top:t.scrollTop,left:t.scrollLeft}};return t.addEventListener("scroll",r),()=>{t.removeEventListener("scroll",r)}}),[]),t.default.useLayoutEffect((()=>{if(!e.current){return}if(u.current){return}const t=e.current,a=(s.current.left+t.offsetWidth/2)/i.current.width,o=(s.current.top+t.offsetHeight/2)/i.current.height;l.current=!0,t.scrollLeft=a*r-t.offsetWidth/2,t.scrollTop=o*n-t.offsetHeight/2,i.current={width:r,height:n}}),[a,r,n])})(M,W*e.scale+2*F,q*e.scale+2*H,e.scale,e,N);const{handleScroll:A}=((e,r,n,a,o,l)=>{const i=t.default.useRef(!1),s=t.default.useRef(null),u=t.default.useRef(!1);t.default.useEffect((()=>{const t=e.current,r=()=>{o.current};return t.addEventListener("scroll",r),()=>{t.removeEventListener("scroll",r)}}),[]);const c=n.pages.indexOf(n.activePage);return t.default.useLayoutEffect((()=>{if(l){return}if(!n.activePage){return}if(!e.current){return}if(i.current){return}const t=e.current,a=n.pages.indexOf(n.activePage)*r;let o=()=>{};return(Math.abs(a-t.scrollTop)>.5*r||u.current)&&(u.current=!0,o=(({element:e,scrollTop:t=0,duration:r=300,onFinish:n=()=>{}})=>{const a=e.scrollTop,o=t-a;let l=0,i=!1;if(0===r){return e.scrollTop=t,()=>{}}const s=()=>{if(i){return}l+=20;const t=u(l,a,o,r);e.scrollTop=t,l<r?setTimeout(s,20):n()},u=(e,t,r,n)=>(e/=n/2)<1?r/2*e*e+t:-r/2*(--e*(e-2)-1)+t;return s(),()=>{i=!0}})({element:t,scrollTop:a,onFinish:()=>{u.current=!1},duration:n.isPlaying?0:300})),o}),[n.activePage,c,n.isPlaying,l]),{handleScroll:e=>{if(l){return}if(u.current){return}i.current=!0,clearTimeout(s.current),s.current=setTimeout((()=>{i.current=!1}),300);const t=e.currentTarget.childNodes[0].offsetHeight,r=e.currentTarget.scrollTop,o=Math.floor((r+a.height/3)/t),c=n.pages[o];c&&n.activePage!==c&&c.select()}}})(M,q*e.scale+2*H,e,k,N,y),D=k.width>=W*e.scale+2*F,I=i||"rgba(232, 232, 232, 0.9)",K=e.pages.indexOf(e.activePage),Y=(null==h?void 0:h.NoPages)||s,j=null!=w?w:Math.min(3,Math.max(1,Math.ceil(k.height/2/(q*e.scale))));return t.default.createElement("div",{ref:C,style:{width:"100%",height:"100%",position:"relative",outline:"none",flex:1,backgroundColor:I,overflow:"hidden"},tabIndex:0,className:"polotno-workspace-container"},t.default.createElement("div",{ref:M,onScroll:A,style:{position:"absolute",top:0,left:0,width:"100%",height:"100%",overflow:"auto",overflowX:D?"hidden":"auto"},className:"polotno-workspace-inner"},e.pages.map(((a,o)=>{const l=a===e.activePage;if(y&&!l&&!a._exportingOrRendering&&!a._forceMount){return null}if(!(Math.abs(o-K)<=j||a._exportingOrRendering||a._forceMount)){return t.default.createElement(u,{key:a.id,width:W*e.scale+2*F,height:q*e.scale+2*H,backgroundColor:I,xPadding:F,yPadding:H})}const i=t.default.createElement(n.default,{key:a.id,page:a,xPadding:F,yPadding:H,width:W*e.scale+2*F,height:q*e.scale+2*H,store:e,pageControlsEnabled:r,backColor:I,pageBorderColor:c||"lightgrey",activePageBorderColor:d||"rgb(0, 161, 255)",altCloneEnabled:v,bleedColor:f||"rgba(255, 0, 0, 0.1)",components:h,viewportSize:k});return(a._exportingOrRendering||a._forceMount)&&!l&&y?t.default.createElement("div",{style:{display:"none"},key:a.id},i):i})),e.rulesVisible&&t.default.createElement(a.TopRules,{store:e,xPadding:F,yPadding:H,width:W*e.scale+2*F,height:q*e.scale+2*H}),0===e.pages.length&&t.default.createElement(Y,{store:e}),e.audios.map((r=>t.default.createElement(o.AudioElement,{key:r.id,audio:r,store:e})))))})),exports.default=exports.WorkspaceCanvas;
+var e=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.WorkspaceCanvas=void 0;const t=e(require("react")),r=require("mobx-react-lite"),n=e(require("./page")),a=require("./rules"),o=require("./audio"),l=require("./hotkeys"),i=require("../utils/l10n"),s=({store:e})=>t.default.createElement("div",{style:{position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",textAlign:"center"}},t.default.createElement("p",null,(0,i.t)("workspace.noPages")),t.default.createElement("button",{onClick:()=>{e.addPage()}},(0,i.t)("workspace.addPage"))),u=({width:e,height:r,xPadding:n,yPadding:a,backgroundColor:o})=>t.default.createElement("div",{style:{width:e+"px",height:r+"px",backgroundColor:o,paddingLeft:n+"px",paddingRight:n+"px",paddingTop:a+"px",paddingBottom:a+"px"}},t.default.createElement("div",{style:{width:" 100%",height:"100%",backgroundColor:"white"}}));exports.WorkspaceCanvas=(0,r.observer)((({store:e,pageControlsEnabled:r,backgroundColor:i,pageBorderColor:c,activePageBorderColor:d,bleedColor:f,components:h,onKeyDown:g,paddingX:p,paddingY:m,altCloneEnabled:v=!0,visiblePagesOffset:w,renderOnlyActivePage:y})=>{var E;const b=null!=p?p:20,x=null!=m?m:55,[k,P]=t.default.useState({width:100,height:100}),T=t.default.useRef(k),C=t.default.useRef(null),M=t.default.useRef(null),R=e.bleedVisible?Math.max(0,...e.pages.map((e=>e.bleed))):0,_=Math.max(...e.pages.map((e=>e.computedWidth))),L=Math.max(...e.pages.map((e=>e.computedHeight))),O=(null===(E=e.activePage)||void 0===E?void 0:E.computedHeight)||0,W=_+2*R,q=(y?O:L)+2*R,S=async({skipTimeout:t}={skipTimeout:!1})=>{if(t||await new Promise((e=>setTimeout(e,50))),null===C.current){return}const r=C.current.getBoundingClientRect();0!==r.width&&0!==r.height||(console.warn("Polotno warning: <Workspace /> component can not automatically detect its size.\nWidth or height of parent elements is equal 0.\nPlease make sure it has non-zero size. You may need to adjust it with your styles. <Workspace /> will automatically fit into parent container.\nFor simpler debugging here is the log of the parent element:"),console.log(C.current));const n=M.current.clientWidth||r.width,a={width:n,height:r.height};(T.current.width!==a.width||T.current.height!==a.height)&&(P(a),T.current=a);const o=(n-2*b)/W,l=e.pages.length>1?3.1:2,i=(r.height-x*l)/q,s=e.pages.length?Math.max(Math.min(o,i),.01):1;e.scaleToFit!==s&&(e.setScale(s),e._setScaleToFit(s))};t.default.useLayoutEffect((()=>{S({skipTimeout:!0})}),[]),t.default.useEffect((()=>{S()}),[W,q]),t.default.useEffect((()=>{e.__()}),[]),t.default.useEffect((()=>{const e=C.current;if(window.ResizeObserver){const t=new ResizeObserver((()=>{S({skipTimeout:!0})}));return t.observe(e),()=>t.unobserve(e)}{const e=setInterval((()=>{S({skipTimeout:!0})}),100);return()=>clearInterval(e)}}),[W,q]);const F=Math.max(b,(k.width-W*e.scale)/2),z=y?1:e.pages.length,B=q*e.scale*z,H=Math.max(x,(k.height-B)/z/2);t.default.useEffect((()=>{const t=t=>{(g||l.handleHotkey)(t,e)};return window.addEventListener("keydown",t),()=>window.removeEventListener("keydown",t)}),[]),t.default.useEffect((()=>{var t;const r=t=>{if(t.ctrlKey||t.metaKey){t.preventDefault();const o=Math.max(5,e.scaleToFit),l=Math.min(.1,e.scaleToFit),i=.03,s=(r=t.deltaY<0?e.scale*(1+i):e.scale/(1+i),n=l,a=o,Math.max(n,Math.min(a,r)));e.setScale(s)}else{var r,n,a}};return null===(t=M.current)||void 0===t||t.addEventListener("wheel",r),()=>{var e;return null===(e=M.current)||void 0===e?void 0:e.removeEventListener("wheel",r)}}),[]);const N=t.default.useRef(!1);((e,r,n,a,o,l)=>{const i=t.default.useRef({width:r,height:n}),s=t.default.useRef({top:0,left:0}),u=t.default.useRef(!1),c=t.default.useRef(o.pages.length);u.current=c.current!==o.pages.length,c.current=o.pages.length,t.default.useEffect((()=>{const t=e.current,r=e=>{s.current={top:t.scrollTop,left:t.scrollLeft}};return t.addEventListener("scroll",r),()=>{t.removeEventListener("scroll",r)}}),[]),t.default.useLayoutEffect((()=>{if(!e.current){return}if(u.current){return}const t=e.current,a=(s.current.left+t.offsetWidth/2)/i.current.width,o=(s.current.top+t.offsetHeight/2)/i.current.height;l.current=!0,t.scrollLeft=a*r-t.offsetWidth/2,t.scrollTop=o*n-t.offsetHeight/2,i.current={width:r,height:n}}),[a,r,n])})(M,W*e.scale+2*F,q*e.scale+2*H,e.scale,e,N);const{handleScroll:A}=((e,r,n,a,o,l)=>{const i=t.default.useRef(!1),s=t.default.useRef(null),u=t.default.useRef(!1);t.default.useEffect((()=>{const t=e.current,r=()=>{o.current};return t.addEventListener("scroll",r),()=>{t.removeEventListener("scroll",r)}}),[]);const c=n.pages.indexOf(n.activePage);return t.default.useLayoutEffect((()=>{if(l){return}if(!n.activePage){return}if(!e.current){return}if(i.current){return}const t=e.current,a=n.pages.indexOf(n.activePage)*r;let o=()=>{};return(Math.abs(a-t.scrollTop)>.5*r||u.current)&&(u.current=!0,o=(({element:e,scrollTop:t=0,duration:r=300,onFinish:n=()=>{}})=>{const a=e.scrollTop,o=t-a;let l=0,i=!1;if(0===r){return e.scrollTop=t,()=>{}}const s=()=>{if(i){return}l+=20;const t=u(l,a,o,r);e.scrollTop=t,l<r?setTimeout(s,20):n()},u=(e,t,r,n)=>(e/=n/2)<1?r/2*e*e+t:-r/2*(--e*(e-2)-1)+t;return s(),()=>{i=!0}})({element:t,scrollTop:a,onFinish:()=>{u.current=!1},duration:n.isPlaying?0:300})),o}),[n.activePage,c,n.isPlaying,l]),{handleScroll:e=>{if(l){return}if(u.current){return}i.current=!0,clearTimeout(s.current),s.current=setTimeout((()=>{i.current=!1}),300);const t=e.currentTarget.childNodes[0].offsetHeight,r=e.currentTarget.scrollTop,o=Math.floor((r+a.height/3)/t),c=n.pages[o];c&&n.activePage!==c&&c.select()}}})(M,q*e.scale+2*H,e,k,N,y),D=k.width>=W*e.scale+2*F,I=i||"rgba(232, 232, 232, 0.9)",K=e.pages.indexOf(e.activePage),Y=(null==h?void 0:h.NoPages)||s,j=null!=w?w:Math.min(3,Math.max(1,Math.ceil(k.height/2/(q*e.scale))));return t.default.createElement("div",{ref:C,style:{width:"100%",height:"100%",position:"relative",outline:"none",flex:1,backgroundColor:I,overflow:"hidden"},tabIndex:0,className:"polotno-workspace-container"},t.default.createElement("div",{ref:M,onScroll:A,style:{position:"absolute",top:0,left:0,width:"100%",height:"100%",overflow:"auto",overflowX:D?"hidden":"auto"},className:"polotno-workspace-inner"},e.pages.map(((a,o)=>{const l=a===e.activePage;if(y&&!l&&!a._exportingOrRendering&&!a._forceMount){return null}if(!(Math.abs(o-K)<=j||a._exportingOrRendering||a._forceMount)){return t.default.createElement(u,{key:a.id,width:W*e.scale+2*F,height:q*e.scale+2*H,backgroundColor:I,xPadding:F,yPadding:H})}const i=t.default.createElement(n.default,{key:a.id,page:a,xPadding:F,yPadding:H,width:W*e.scale+2*F,height:q*e.scale+2*H,store:e,pageControlsEnabled:r,backColor:I,pageBorderColor:c||"lightgrey",activePageBorderColor:d||"rgb(0, 161, 255)",altCloneEnabled:v,bleedColor:f||"rgba(255, 0, 0, 0.1)",components:h,viewportSize:k});return(a._exportingOrRendering||a._forceMount)&&!l&&y?t.default.createElement("div",{style:{display:"none"},key:a.id},i):i})),e.rulesVisible&&t.default.createElement(a.TopRules,{store:e,xPadding:F,yPadding:H,width:W*e.scale+2*F,height:q*e.scale+2*H}),0===e.pages.length&&t.default.createElement(Y,{store:e}),e.audios.map((r=>t.default.createElement(o.AudioElement,{key:r.id,audio:r,store:e})))))})),exports.default=exports.WorkspaceCanvas;

package/model/store.js

@@ -1 +1 @@
-var e,t=this&&this.__createBinding||(Object.create?function(e,t,i,n){void 0===n&&(n=i);var o=Object.getOwnPropertyDescriptor(t,i);o&&!("get"in o?!t.__esModule:o.writable||o.configurable)||(o={enumerable:!0,get:function(){return t[i]}}),Object.defineProperty(e,n,o)}:function(e,t,i,n){void 0===n&&(n=i),e[n]=t[i]}),i=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),n=this&&this.__importStar||(e=function(t){return e=Object.getOwnPropertyNames||function(e){var t=[];for(var i in e){Object.prototype.hasOwnProperty.call(e,i)&&(t[t.length]=i)}return t},e(t)},function(n){if(n&&n.__esModule){return n}var o={};if(null!=n){for(var a=e(n),s=0;s<a.length;s++){"default"!==a[s]&&t(o,n,a[s])}}return i(o,n),o}),o=this&&this.__rest||function(e,t){var i={};for(var n in e){Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(i[n]=e[n])}if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(n=Object.getOwnPropertySymbols(e);o<n.length;o++){t.indexOf(n[o])<0&&Object.prototype.propertyIsEnumerable.call(e,n[o])&&(i[n[o]]=e[n[o]])}}return i},a=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.Store=exports.Font=void 0,exports.createStore=O;const s=require("mobx-state-tree"),r=require("./history"),l=require("nanoid"),d=a(require("konva")),c=require("../utils/download"),p=require("../utils/pdf"),g=require("../utils/gif-lib"),u=require("../utils/validate-key"),h=n(require("../utils/fonts")),m=require("../utils/flags"),f=require("../utils/loader"),y=require("../utils/unit"),b=require("../utils/deep-equal"),v=require("../utils/wait"),w=require("../utils/to-html"),P=require("../utils/to-svg"),x=require("./page-model"),E=require("./group-model"),_=require("./audio-model");function O({key:e,showCredit:t}={key:"",showCredit:!1}){return exports.Store.create({_forceShowCredit:t,_key:e})}(0,s.setLivelinessChecking)("ignore"),exports.Font=s.types.model("Font",{fontFamily:s.types.string,url:s.types.optional(s.types.string,""),styles:s.types.frozen()}).preProcessSnapshot((e=>Object.assign(Object.assign({},e),{fontFamily:e.fontFamily||e.name}))),exports.Store=s.types.model("Store",{role:"",pages:s.types.array(x.Page),fonts:s.types.array(exports.Font),audios:s.types.array(_.Audio),width:1080,height:1080,currentTime:0,isPlaying:!1,scale:1,scaleToFit:1,unit:"px",dpi:72,schemaVersion:1,bleedVisible:!1,rulesVisible:!1,openedSidePanel:"",previousOpenedSidePanel:"",custom:s.types.frozen(),selectedElementsIds:s.types.array(s.types.string),animatedElementsIds:s.types.array(s.types.string),history:s.types.optional(r.UndoManager,{targetPath:"../pages"}),_elementsPixelRatio:Math.min(2,window.devicePixelRatio||1),_activePageId:"",_forceShowCredit:!1,_key:"",_validated:!1}).views((e=>({get _bleedVisible(){return console.warn("store._bleedVisible is deprecated. Please use store.bleedVisible instead."),e.bleedVisible},get selectedElements(){return e.selectedElementsIds.map((t=>{for(const i of e.pages){for(const e of i.children){if(e.id===t){return e}}}})).filter((e=>!!e))},get children(){return e.pages},get selectedShapes(){const t=[];return(0,E.forEveryChild)({children:e.selectedElements},(e=>{"group"!==e.type&&t.push(e)})),t},get activePage(){return e.pages.slice().find((t=>t.id===e._activePageId))||(e.pages.length?e.pages[0]:null)},get duration(){let t=0;return e.pages.forEach((e=>{t+=e.duration})),t},get _hasCroppedImages(){return e.find((e=>"image"===e.type&&e._cropModeEnabled))},find(t){let i;return(0,E.forEveryChild)({children:e.pages},(e=>{if(!i&&t(e)){return i=e,!0}})),i},getElementById:t=>e.find((e=>e.id===t))}))).actions((e=>{let t=0,i=null,n=!1;return{afterCreate(){e.history.canUndo},setCurrentTime(t){e.currentTime=t},_togglePlaying(t=!e.isPlaying){e.isPlaying=t},play({animatedElementsIds:o=[],startTime:a=0,currentTime:r=0,endTime:l=e.duration,repeat:d=!1}={}){r&&(console.warn("currentTime property of store.play() is deprecated. Please use startTime instead."),a=r),e.animatedElementsIds=(0,s.cast)(o),e.currentTime=a,e.isPlaying=!0,t=Date.now(),i=l,n=d,requestAnimationFrame(e.seek)},checkActivePage(){let t=0;for(const i of e.pages){if(e.currentTime>=i.startTime&&e.currentTime<i.startTime+i.duration){e.selectPage(i.id);break}t+=i.duration}},seek(){if(!e.isPlaying){return}const o=Date.now(),a=o-t;t=o,e.currentTime+=a,e.checkActivePage();const s=i||e.duration;e.isPlaying&&e.currentTime<s?requestAnimationFrame(e.seek):e.isPlaying&&n?(e.currentTime=0,requestAnimationFrame(e.seek)):e.stop()},stop(){e.isPlaying=!1,e.currentTime=0,e.animatedElementsIds=(0,s.cast)([]),e.checkActivePage()}}})).actions((e=>({__(){e._validated||((0,u.validateKey)(e._key,e._forceShowCredit),e._validated=!0)},set(t){Object.assign(e,t)},setUnit({unit:t,dpi:i}){e.unit=t||e.unit,e.dpi=i||e.dpi},setRole(t){e.role=t},addPage(t){const i=x.Page.create(Object.assign({id:(0,l.nanoid)(10)},t));return e.pages.push(i),e._activePageId=i.id,i},selectPage(t){e._activePageId=t},selectElements(t){const i=t.map((t=>e.getElementById(t))).sort(((e,t)=>e.page.children.indexOf(e)-e.page.children.indexOf(t))).filter((e=>!!e)).map((e=>e.id));e.selectedElementsIds=(0,s.cast)(i)},toggleBleed(t){e.bleedVisible=null!=t?t:!e.bleedVisible},toggleRulers(t){e.rulesVisible=null!=t?t:!e.rulesVisible},openSidePanel(t){e.openedSidePanel!==t&&(e.previousOpenedSidePanel=e.openedSidePanel,e.openedSidePanel=t)},setScale(t){e.scale=t},_setScaleToFit(t){e.scaleToFit=t},setElementsPixelRatio(t){e._elementsPixelRatio=t},setSize(t,i,n){e.pages.forEach((e=>{e.setSize({width:t,height:i,useMagic:n,softChange:!0})})),e.width=t,e.height=i},setPageZIndex(t,i){const n=e.pages.find((e=>e.id===t));n&&((0,s.detach)(n),e.pages.remove(n),e.pages.splice(i,0,n))},deletePages(t){const i=e.pages.indexOf(e.activePage);t.forEach((t=>{const i=e.pages.find((e=>e.id===t));(0,s.destroy)(i)}));const n=Math.min(e.pages.length-1,i),o=e.pages[n];o&&(e._activePageId=o.id),e.selectedElementsIds=(0,s.cast)(e.selectedElementsIds.filter((t=>e.getElementById(t))))},groupElements(t){const i=t.map((t=>e.getElementById(t)));i.forEach((e=>{e&&(0,s.detach)(e)}));const n=e.activePage,o={id:(0,l.nanoid)(10),children:i,type:"group"};return n.children.push(o),e.selectedElementsIds=(0,s.cast)([o.id]),n.children.find((e=>e.id===o.id))},ungroupElements(t){const i=t.map((t=>e.getElementById(t))),n=[];i.forEach((e=>{if(e&&"group"===e.type){const t=e.page,i=t.children.indexOf(e);e.children.forEach((e=>{n.push(e.id)})),e.children.forEach((e=>{(0,s.detach)(e),t.children.push(e)})),t.children.splice(i,1)}})),e.selectedElementsIds=(0,s.cast)(n)},deleteElements(t){const i=[];e.find((e=>(t.includes(e.id)&&i.push(e),!1))),i.forEach((e=>{(0,s.destroy)(e)})),e.selectedElementsIds=(0,s.cast)(e.selectedElementsIds.filter((t=>e.getElementById(t))))},on(t,i){if("change"===t){let t=e.toJSON();return(0,s.onSnapshot)(e,(n=>{const o=e.toJSON();!(0,b.deepEqual)(t,o)&&(t=o,i(o))}))}},async _toCanvas({pixelRatio:t,ignoreBackground:i,pageId:n,mimeType:o,includeBleed:a,_skipTimeout:s,quickMode:r=!1}={}){var l;const c=t||1;n=n||(null===(l=e.pages[0])||void 0===l?void 0:l.id);const p=e.pages.find((e=>e.id===n));if(!p){throw new Error(`No page for export with id ${n}`)}r?null==p||p.set({_forceMount:!0}):null==p||p.set({_exporting:!0});const g=await(0,v.waitTillAvailable)((()=>d.default.stages.find((e=>e.getAttr("pageId")===n))));if(!g){throw null==p||p.set({_forceMount:!1,_exporting:!1}),new Error(`Export is failed. Can not find stage for page ${n}. Looks like <Workspace /> component is not mounted, but it is required in order to process the export.`)}const u=!!g.findOne(".page-container"),h=e._elementsPixelRatio;c>e._elementsPixelRatio&&e.setElementsPixelRatio(c),await e.waitLoading({_skipTimeout:s});const m=g.findOne(".page-container");if(!m){throw e.setElementsPixelRatio(h),null==p||p.set({_forceMount:!1,_exporting:!1}),new Error(`Export is failed. Can't find page container. ${u}`)}const f=g.position();g.position({x:0,y:0}),g.find("Transformer").forEach((e=>{e.setAttr("oldVisible",e.visible()),e.visible(!1)})),m.find(".page-background").forEach((e=>e.shadowEnabled(!1))),m.find(".page-background").forEach((e=>e.strokeEnabled(!1))),m.find(".highlighter").forEach((e=>e.visible(!1)));const y=m.findOne(".page-background-group"),b=y.clip();y.clip({x:null,y:null,width:null,height:null});const w=m.findOne(".elements-container"),P=w.clip();w.clip({x:null,y:null,width:null,height:null});const x=m.find((e=>e.getAttr("hideInExport")));x.forEach((e=>{e.setAttr("oldVisible",e.visible()),e.hide()}));const E=m.find((e=>!e.visible()&&e.getAttr("editModeEnabled")));E.forEach((e=>{e.setAttr("oldVisible",e.visible()),e.show()})),i&&m.find(".page-background").forEach((e=>e.hide()));const _=a?p.bleed:0;let O=_;!e.bleedVisible&&a||(e.bleedVisible||a?e.bleedVisible&&a?O=0:e.bleedVisible&&!a&&(O=-p.bleed):O=0);const S=document.createElement("canvas");S.width=Math.round((p.computedWidth+2*_)*c),S.height=Math.round((p.computedHeight+2*_)*c);const k=S.getContext("2d");"image/jpeg"===o&&(k.fillStyle="white",k.fillRect(0,0,S.width,S.height));const I=m.scale();m.scale({x:1,y:1});const T=m.toCanvas({x:m.x()-O,y:m.y()-O,width:p.computedWidth+2*_,height:p.computedHeight+2*_,pixelRatio:c});return m.scale(I),k.drawImage(T,0,0,S.width,S.height),d.default.Util.releaseCanvas(T),i&&m.find(".page-background").forEach((e=>e.show())),x.forEach((e=>{e.visible(e.getAttr("oldVisible"))})),E.forEach((e=>{e.visible(e.getAttr("oldVisible"))})),m.find(".page-background").forEach((e=>e.shadowEnabled(!0))),m.find(".page-background").forEach((e=>e.strokeEnabled(!0))),g.find("Transformer").forEach((e=>{e.visible(e.getAttr("oldVisible"))})),m.find(".highlighter").forEach((e=>e.visible(!0))),y.clip(b),w.clip(P),g.position(f),e.setElementsPixelRatio(h),null==p||p.set({_exporting:!1,_forceMount:!1}),S},async toDataURL(t={}){var{mimeType:i,quality:n}=t,a=o(t,["mimeType","quality"]);const s=await e._toCanvas(Object.assign({mimeType:i},a)),r=s.toDataURL(i,n);return d.default.Util.releaseCanvas(s),r},async toBlob(t={}){var{mimeType:i,quality:n}=t,a=o(t,["mimeType","quality"]);const s=await e._toCanvas(Object.assign({mimeType:i},a)),r=await new Promise((e=>{s.toBlob(e,i,n)}));return d.default.Util.releaseCanvas(s),r},async saveAsImage(t={}){var{fileName:i}=t,n=o(t,["fileName"]);const a=n.mimeType||"image/png",s=a.split("/")[1];(0,c.downloadFile)(await e.toDataURL(n),i||"polotno."+s,a)},async _toPDF(t){const i=t.dpi||e.dpi,n=t.parallel||1,o=t.unit||("px"===e.unit?"mm":e.unit),a=t.pixelRatio||1,s=t.pageIds||e.pages.map((e=>e.id)),r=e.pages.filter((e=>s.includes(e.id))),l=await(0,p.getJsPDF)(),d=e=>(0,y.pxToUnit)({px:e,unit:o,dpi:i}),c=t.cropMarkSize||0,g=d(c),u=r[0]||{},h=t.includeBleed?u.bleed:0,m=d(u.computedWidth+2*h+2*g),f=d(u.computedHeight+2*h+2*g);var b=new l({unit:o,orientation:m>f?"landscape":"portrait",format:[m,f],compress:!0,putOnlyUsedFonts:!0});b.deletePage(1);const v=((e,t)=>{for(var i=[],n=0;n<e.length;n+=t){i.push(e.slice(n,n+t))}return i})(r,n);let w=0;for(const p of v){const i=p.map((async i=>{const n=t.includeBleed?i.bleed:0,o=i.computedWidth+2*n+2*c,r=i.computedHeight+2*n+2*c,l=d(o),p=d(r);let g=0,u=a;for(;g<10;){g+=1,2===g&&console.error("Polotno can not export PDF with current settings. Quality is automatically reduced.");const n=await e.toDataURL(Object.assign(Object.assign({},t),{pageId:i.id,pixelRatio:u}));if(n.length>20){return t.onProgress&&t.onProgress(++w/s.length*.9),{url:n,width:l,height:p,widthPx:o,heightPx:r}}u*=.8}}));(await Promise.all(i)).forEach((({url:e,width:t,height:i,widthPx:n,heightPx:a})=>{b.addPage([t,i],t>i?"landscape":"portrait");const s=b.getCurrentPageInfo();var r;switch(o){case"pt":r=1;break;case"mm":r=72/25.4;break;case"cm":r=72/2.54;break;case"in":r=72;break;case"px":r=.75;break;case"pc":case"em":r=12;break;case"ex":r=6;break;default:throw"Invalid unit: "+o}if(s.pageContext.cropBox={bottomLeftX:0,bottomLeftY:0,topRightX:t*r,topRightY:i*r},s.pageContext.artBox={bottomLeftX:d(c+h)*r,bottomLeftY:d(c+h)*r,topRightX:d(n-c-h)*r,topRightY:d(a-c-h)*r},s.pageContext.bleedBox={bottomLeftX:d(c+h)*r,bottomLeftY:d(c+h)*r,topRightX:d(n-c-h)*r,topRightY:d(a-c-h)*r},g){b.setLineWidth(d(1));const e=g+d(h);b.line(e,0,e,g),b.line(0,e,g,e),b.line(t-e,0,t-e,g),b.line(t,e,t-g,e),b.line(0,i-e,g,i-e),b.line(e,i,e,i-g),b.line(t,i-e,t-g,i-e),b.line(t-e,i,t-e,i-g)}b.addImage(e,g,g,t-2*g,i-2*g,void 0,"FAST")}))}return b},toPDFDataURL:async t=>(await e._toPDF(Object.assign({mimeType:"image/jpeg"},t))).output("datauristring"),async toGIFDataURL(t={}){const i=t.pixelRatio||1,n=await(0,g.createGIF)({width:e.width*i,height:e.height*i}),o=1e3/(t.fps||10),a=e.duration/o;for(let s=0;s<a-1;s++){const t=s*o||1;e.setCurrentTime(t);let a=0,r="";for(const i of e.pages){if(a+=i.duration,i.set({_rendering:a>t}),a>t){r=i.id;break}}const l=await e._toCanvas({pixelRatio:i,pageId:r,_skipTimeout:!0});n.addFrame(l.getContext("2d"),{delay:o,copy:!0})}for(const s of e.pages){s.set({_rendering:!1})}return e.stop(),n.render(),new Promise((e=>{n.on("finished",(function(t){!function(e,t){var i=new FileReader;i.onload=function(e){t(e.target.result)},i.readAsDataURL(e)}(t,e)}))}))},async saveAsGIF(t={}){var{fileName:i}=t,n=o(t,["fileName"]);const a=await e.toGIFDataURL(n);(0,c.downloadFile)(a,i||"polotno.gif")},async toHTML({elementHook:t}={elementHook:void 0}){const i=e.toJSON();return(0,w.jsonToHTML)({json:i,elementHook:t})},async saveAsHTML({fileName:t}={}){const i=await e.toHTML(),n="data:text/html;base64,"+window.btoa(unescape(encodeURIComponent(i)));(0,c.downloadFile)(n,t||"polotno.html")},async toSVG({elementHook:t,pageId:i}={elementHook:void 0,pageId:void 0}){var n;const o=e.toJSON();i=i||(null===(n=o.pages[0])||void 0===n?void 0:n.id);const a=o.pages.find((e=>e.id===i));return(0,P.jsonToSVG)({json:Object.assign(Object.assign({},o),{pages:a?[a]:[]}),elementHook:t})},async saveAsSVG({fileName:t,elementHook:i,pageId:n}={}){const o=await e.toSVG({elementHook:i,pageId:n}),a="data:text/svg;base64,"+window.btoa(unescape(encodeURIComponent(o)));(0,c.downloadFile)(a,t||"polotno.svg")},async saveAsPDF(t={}){var{fileName:i}=t,n=o(t,["fileName"]);(await e._toPDF(Object.assign({mimeType:"image/jpeg"},n))).save(i||"polotno.pdf")},async waitLoading({_skipTimeout:e=!1}={}){e||await new Promise((e=>setTimeout(e,50))),await(0,f.whenLoaded)()},toJSON:()=>({width:e.width,height:e.height,fonts:(0,s.getSnapshot)(e.fonts),pages:(0,s.getSnapshot)(e.pages),audios:(0,s.getSnapshot)(e.audios),unit:e.unit,dpi:e.dpi,custom:e.custom,schemaVersion:e.schemaVersion}),loadJSON(t,i=!1){var n;const o=Object.assign({},t);void 0===o.schemaVersion&&m.flags.htmlRenderEnabled&&(0,E.forEveryChild)({children:o.pages},(e=>{if("text"===e.type){const t=16,i=e.letterSpacing*t;e.letterSpacing=i/e.fontSize}}));const a=e.pages.indexOf(e.activePage);let r=null===(n=o.pages[a]||o.pages[0])||void 0===n?void 0:n.id;o._activePageId=r;const l=Object.assign({},(0,s.getSnapshot)(e));Object.assign(l,o),l.history=i?e.history.toJSON():{history:[],undoIdx:-1},(0,s.applySnapshot)(e,l)},clear({keepHistory:t=!1}={}){const i=e.pages.map((e=>e.id));e.deletePages(i),e.custom=null,t||e.history.clear()},addFont(t){e.removeFont(t.fontFamily),e.fonts.push(t),e.loadFont(t.fontFamily)},removeFont(t){e.fonts.filter((e=>e.fontFamily===t)).forEach((e=>(0,s.destroy)(e)))},addAudio(t){const i=_.Audio.create(Object.assign({id:(0,l.nanoid)(10)},t));e.audios.push(i)},removeAudio(t){const i=e.audios.find((e=>e.id===t));i&&e.audios.remove(i)},async loadFont(t){const i=e.fonts.find((e=>e.fontFamily===t))||h.globalFonts.find((e=>e.fontFamily===t));let n=[{fontStyle:"normal",fontWeight:"normal"}];return i?(i.styles&&(n=i.styles.map((e=>({fontStyle:e.fontStyle||"normal",fontWeight:e.fontWeight||"normal"})))),h.injectCustomFont(i)):h.injectGoogleFont(t),Promise.all(n.map((e=>h.loadFont(t,e.fontStyle,e.fontWeight))))},validate:e=>exports.Store.validate(e,[{path:"",type:exports.Store}]).map((e=>({path:"store"+e.context.map((e=>e.path)).join("."),message:e.message})))}))),exports.default=O;
+var e,t=this&&this.__createBinding||(Object.create?function(e,t,i,o){void 0===o&&(o=i);var n=Object.getOwnPropertyDescriptor(t,i);n&&!("get"in n?!t.__esModule:n.writable||n.configurable)||(n={enumerable:!0,get:function(){return t[i]}}),Object.defineProperty(e,o,n)}:function(e,t,i,o){void 0===o&&(o=i),e[o]=t[i]}),i=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),o=this&&this.__importStar||(e=function(t){return e=Object.getOwnPropertyNames||function(e){var t=[];for(var i in e){Object.prototype.hasOwnProperty.call(e,i)&&(t[t.length]=i)}return t},e(t)},function(o){if(o&&o.__esModule){return o}var n={};if(null!=o){for(var a=e(o),s=0;s<a.length;s++){"default"!==a[s]&&t(n,o,a[s])}}return i(n,o),n}),n=this&&this.__rest||function(e,t){var i={};for(var o in e){Object.prototype.hasOwnProperty.call(e,o)&&t.indexOf(o)<0&&(i[o]=e[o])}if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var n=0;for(o=Object.getOwnPropertySymbols(e);n<o.length;n++){t.indexOf(o[n])<0&&Object.prototype.propertyIsEnumerable.call(e,o[n])&&(i[o[n]]=e[o[n]])}}return i},a=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.Store=exports.Font=void 0,exports.createStore=O;const s=require("mobx-state-tree"),r=require("./history"),l=require("nanoid"),d=a(require("konva")),c=require("../utils/download"),p=require("../utils/pdf"),u=require("../utils/gif-lib"),g=require("../utils/validate-key"),h=o(require("../utils/fonts")),m=require("../utils/flags"),f=require("../utils/loader"),y=require("../utils/unit"),b=require("../utils/deep-equal"),v=require("../utils/wait"),w=require("../utils/to-html"),P=require("../utils/to-svg"),x=require("./page-model"),E=require("./group-model"),_=require("./audio-model");function O({key:e,showCredit:t}={key:"",showCredit:!1}){return exports.Store.create({_forceShowCredit:t,_key:e})}(0,s.setLivelinessChecking)("ignore"),exports.Font=s.types.model("Font",{fontFamily:s.types.string,url:s.types.optional(s.types.string,""),styles:s.types.frozen()}).preProcessSnapshot((e=>Object.assign(Object.assign({},e),{fontFamily:e.fontFamily||e.name}))),exports.Store=s.types.model("Store",{role:"",pages:s.types.array(x.Page),fonts:s.types.array(exports.Font),audios:s.types.array(_.Audio),width:1080,height:1080,currentTime:0,isPlaying:!1,scale:1,scaleToFit:1,unit:"px",dpi:72,schemaVersion:1,bleedVisible:!1,rulesVisible:!1,openedSidePanel:"",previousOpenedSidePanel:"",custom:s.types.frozen(),selectedElementsIds:s.types.array(s.types.string),animatedElementsIds:s.types.array(s.types.string),history:s.types.optional(r.UndoManager,{targetPath:"../pages"}),_elementsPixelRatio:Math.min(2,window.devicePixelRatio||1),_activePageId:"",_forceShowCredit:!1,_key:"",_validated:!1}).views((e=>({get _bleedVisible(){return console.warn("store._bleedVisible is deprecated. Please use store.bleedVisible instead."),e.bleedVisible},get selectedElements(){return e.selectedElementsIds.map((t=>{for(const i of e.pages){for(const e of i.children){if(e.id===t){return e}}}})).filter((e=>!!e))},get children(){return e.pages},get selectedShapes(){const t=[];return(0,E.forEveryChild)({children:e.selectedElements},(e=>{"group"!==e.type&&t.push(e)})),t},get activePage(){return e.pages.slice().find((t=>t.id===e._activePageId))||(e.pages.length?e.pages[0]:null)},get duration(){let t=0;return e.pages.forEach((e=>{t+=e.duration})),t},get _hasCroppedImages(){return e.find((e=>"image"===e.type&&e._cropModeEnabled))},find(t){let i;return(0,E.forEveryChild)({children:e.pages},(e=>{if(!i&&t(e)){return i=e,!0}})),i},getElementById:t=>e.find((e=>e.id===t))}))).actions((e=>{let t=0,i=null,o=!1;return{afterCreate(){e.history.canUndo},setCurrentTime(t){e.currentTime=t},_togglePlaying(t=!e.isPlaying){e.isPlaying=t},play({animatedElementsIds:n=[],startTime:a=0,currentTime:r=0,endTime:l=e.duration,repeat:d=!1}={}){r&&(console.warn("currentTime property of store.play() is deprecated. Please use startTime instead."),a=r),e.animatedElementsIds=(0,s.cast)(n),e.currentTime=a,e.isPlaying=!0,t=Date.now(),i=l,o=d,requestAnimationFrame(e.seek)},checkActivePage(){let t=0;for(const i of e.pages){if(e.currentTime>=i.startTime&&e.currentTime<i.startTime+i.duration){e.selectPage(i.id);break}t+=i.duration}},seek(){if(!e.isPlaying){return}const n=Date.now(),a=n-t;t=n,e.currentTime+=a,e.checkActivePage();const s=i||e.duration;e.isPlaying&&e.currentTime<s?requestAnimationFrame(e.seek):e.isPlaying&&o?(e.currentTime=0,requestAnimationFrame(e.seek)):e.stop()},stop(){e.isPlaying=!1,e.currentTime=0,e.animatedElementsIds=(0,s.cast)([]),e.checkActivePage()}}})).actions((e=>({__(){e._validated||((0,g.validateKey)(e._key,e._forceShowCredit),e._validated=!0)},set(t){Object.assign(e,t)},setUnit({unit:t,dpi:i}){e.unit=t||e.unit,e.dpi=i||e.dpi},setRole(t){e.role=t},addPage(t){const i=x.Page.create(Object.assign({id:(0,l.nanoid)(10)},t));return e.pages.push(i),e._activePageId=i.id,i},selectPage(t){e._activePageId=t},selectElements(t){const i=t.map((t=>e.getElementById(t))).sort(((e,t)=>e.page.children.indexOf(e)-e.page.children.indexOf(t))).filter((e=>!!e)).map((e=>e.id));e.selectedElementsIds=(0,s.cast)(i)},toggleBleed(t){e.bleedVisible=null!=t?t:!e.bleedVisible},toggleRulers(t){e.rulesVisible=null!=t?t:!e.rulesVisible},openSidePanel(t){e.openedSidePanel!==t&&(e.previousOpenedSidePanel=e.openedSidePanel,e.openedSidePanel=t)},setScale(t){e.scale=t},_setScaleToFit(t){e.scaleToFit=t},setElementsPixelRatio(t){e._elementsPixelRatio=t},setSize(t,i,o){e.pages.forEach((e=>{e.setSize({width:t,height:i,useMagic:o,softChange:!0})})),e.width=t,e.height=i},setPageZIndex(t,i){const o=e.pages.find((e=>e.id===t));o&&((0,s.detach)(o),e.pages.remove(o),e.pages.splice(i,0,o))},deletePages(t){const i=e.pages.indexOf(e.activePage);t.forEach((t=>{const i=e.pages.find((e=>e.id===t));(0,s.destroy)(i)}));const o=Math.min(e.pages.length-1,i),n=e.pages[o];n&&(e._activePageId=n.id),e.selectedElementsIds=(0,s.cast)(e.selectedElementsIds.filter((t=>e.getElementById(t))))},groupElements(t){const i=t.map((t=>e.getElementById(t))),o=i[0].page;if(i.forEach((e=>{e&&(0,s.detach)(e)})),!i.length){return}const n={id:(0,l.nanoid)(10),children:i,type:"group"};return o.children.push(n),e.selectedElementsIds=(0,s.cast)([n.id]),o.children.find((e=>e.id===n.id))},ungroupElements(t){const i=t.map((t=>e.getElementById(t))),o=[];i.forEach((e=>{if(e&&"group"===e.type){const t=e.page,i=t.children.indexOf(e);e.children.forEach((e=>{o.push(e.id)})),e.children.forEach((e=>{(0,s.detach)(e),t.children.push(e)})),t.children.splice(i,1)}})),e.selectedElementsIds=(0,s.cast)(o)},deleteElements(t){const i=[];e.find((e=>(t.includes(e.id)&&i.push(e),!1))),i.forEach((e=>{(0,s.destroy)(e)})),e.selectedElementsIds=(0,s.cast)(e.selectedElementsIds.filter((t=>e.getElementById(t))))},on(t,i){if("change"===t){let t=e.toJSON();return(0,s.onSnapshot)(e,(o=>{const n=e.toJSON();!(0,b.deepEqual)(t,n)&&(t=n,i(n))}))}},async _toCanvas({pixelRatio:t,ignoreBackground:i,pageId:o,mimeType:n,includeBleed:a,_skipTimeout:s,quickMode:r=!1}={}){var l;const c=t||1;o=o||(null===(l=e.pages[0])||void 0===l?void 0:l.id);const p=e.pages.find((e=>e.id===o));if(!p){throw new Error(`No page for export with id ${o}`)}r?null==p||p.set({_forceMount:!0}):null==p||p.set({_exporting:!0});const u=await(0,v.waitTillAvailable)((()=>d.default.stages.find((e=>e.getAttr("pageId")===o))));if(!u){throw null==p||p.set({_forceMount:!1,_exporting:!1}),new Error(`Export is failed. Can not find stage for page ${o}. Looks like <Workspace /> component is not mounted, but it is required in order to process the export.`)}const g=e._elementsPixelRatio;c>e._elementsPixelRatio&&e.setElementsPixelRatio(c),await e.waitLoading({_skipTimeout:s});const h=u.findOne(".page-container");if(!h){throw e.setElementsPixelRatio(g),null==p||p.set({_forceMount:!1,_exporting:!1}),new Error("Export is failed. Canvas was unmounted.")}const m=u.position();u.position({x:0,y:0}),u.find("Transformer").forEach((e=>{e.setAttr("oldVisible",e.visible()),e.visible(!1)})),h.find(".page-background").forEach((e=>e.shadowEnabled(!1))),h.find(".page-background").forEach((e=>e.strokeEnabled(!1))),h.find(".highlighter").forEach((e=>e.visible(!1)));const f=h.findOne(".page-background-group"),y=f.clip();f.clip({x:null,y:null,width:null,height:null});const b=h.findOne(".elements-container"),w=b.clip();b.clip({x:null,y:null,width:null,height:null});const P=h.find((e=>e.getAttr("hideInExport")));P.forEach((e=>{e.setAttr("oldVisible",e.visible()),e.hide()}));const x=h.find((e=>!e.visible()&&e.getAttr("editModeEnabled")));x.forEach((e=>{e.setAttr("oldVisible",e.visible()),e.show()})),i&&h.find(".page-background").forEach((e=>e.hide()));const E=a?p.bleed:0;let _=E;!e.bleedVisible&&a||(e.bleedVisible||a?e.bleedVisible&&a?_=0:e.bleedVisible&&!a&&(_=-p.bleed):_=0);const O=document.createElement("canvas");O.width=Math.round((p.computedWidth+2*E)*c),O.height=Math.round((p.computedHeight+2*E)*c);const S=O.getContext("2d");"image/jpeg"===n&&(S.fillStyle="white",S.fillRect(0,0,O.width,O.height));const k=h.scale();h.scale({x:1,y:1});const I=h.toCanvas({x:h.x()-_,y:h.y()-_,width:p.computedWidth+2*E,height:p.computedHeight+2*E,pixelRatio:c});return h.scale(k),S.drawImage(I,0,0,O.width,O.height),d.default.Util.releaseCanvas(I),i&&h.find(".page-background").forEach((e=>e.show())),P.forEach((e=>{e.visible(e.getAttr("oldVisible"))})),x.forEach((e=>{e.visible(e.getAttr("oldVisible"))})),h.find(".page-background").forEach((e=>e.shadowEnabled(!0))),h.find(".page-background").forEach((e=>e.strokeEnabled(!0))),u.find("Transformer").forEach((e=>{e.visible(e.getAttr("oldVisible"))})),h.find(".highlighter").forEach((e=>e.visible(!0))),f.clip(y),b.clip(w),u.position(m),e.setElementsPixelRatio(g),null==p||p.set({_exporting:!1,_forceMount:!1}),O},async toDataURL(t={}){var{mimeType:i,quality:o}=t,a=n(t,["mimeType","quality"]);const s=await e._toCanvas(Object.assign({mimeType:i},a)),r=s.toDataURL(i,o);return d.default.Util.releaseCanvas(s),r},async toBlob(t={}){var{mimeType:i,quality:o}=t,a=n(t,["mimeType","quality"]);const s=await e._toCanvas(Object.assign({mimeType:i},a)),r=await new Promise((e=>{s.toBlob(e,i,o)}));return d.default.Util.releaseCanvas(s),r},async saveAsImage(t={}){var{fileName:i}=t,o=n(t,["fileName"]);const a=o.mimeType||"image/png",s=a.split("/")[1];(0,c.downloadFile)(await e.toDataURL(o),i||"polotno."+s,a)},async _toPDF(t){const i=t.dpi||e.dpi,o=t.parallel||1,n=t.unit||("px"===e.unit?"mm":e.unit),a=t.pixelRatio||1,s=t.pageIds||e.pages.map((e=>e.id)),r=e.pages.filter((e=>s.includes(e.id))),l=await(0,p.getJsPDF)(),d=e=>(0,y.pxToUnit)({px:e,unit:n,dpi:i}),c=t.cropMarkSize||0,u=d(c),g=r[0]||{},h=t.includeBleed?g.bleed:0,m=d(g.computedWidth+2*h+2*u),f=d(g.computedHeight+2*h+2*u);var b=new l({unit:n,orientation:m>f?"landscape":"portrait",format:[m,f],compress:!0,putOnlyUsedFonts:!0});b.deletePage(1);const v=((e,t)=>{for(var i=[],o=0;o<e.length;o+=t){i.push(e.slice(o,o+t))}return i})(r,o);let w=0;for(const p of v){const i=p.map((async i=>{const o=t.includeBleed?i.bleed:0,n=i.computedWidth+2*o+2*c,r=i.computedHeight+2*o+2*c,l=d(n),p=d(r);let u=0,g=a;for(;u<10;){u+=1,2===u&&console.error("Polotno can not export PDF with current settings. Quality is automatically reduced.");const o=await e.toDataURL(Object.assign(Object.assign({},t),{pageId:i.id,pixelRatio:g}));if(o.length>20){return t.onProgress&&t.onProgress(++w/s.length*.9),{url:o,width:l,height:p,widthPx:n,heightPx:r}}g*=.8}}));(await Promise.all(i)).forEach((({url:e,width:t,height:i,widthPx:o,heightPx:a})=>{b.addPage([t,i],t>i?"landscape":"portrait");const s=b.getCurrentPageInfo();var r;switch(n){case"pt":r=1;break;case"mm":r=72/25.4;break;case"cm":r=72/2.54;break;case"in":r=72;break;case"px":r=.75;break;case"pc":case"em":r=12;break;case"ex":r=6;break;default:throw"Invalid unit: "+n}if(s.pageContext.cropBox={bottomLeftX:0,bottomLeftY:0,topRightX:t*r,topRightY:i*r},s.pageContext.artBox={bottomLeftX:d(c+h)*r,bottomLeftY:d(c+h)*r,topRightX:d(o-c-h)*r,topRightY:d(a-c-h)*r},s.pageContext.bleedBox={bottomLeftX:d(c+h)*r,bottomLeftY:d(c+h)*r,topRightX:d(o-c-h)*r,topRightY:d(a-c-h)*r},u){b.setLineWidth(d(1));const e=u+d(h);b.line(e,0,e,u),b.line(0,e,u,e),b.line(t-e,0,t-e,u),b.line(t,e,t-u,e),b.line(0,i-e,u,i-e),b.line(e,i,e,i-u),b.line(t,i-e,t-u,i-e),b.line(t-e,i,t-e,i-u)}b.addImage(e,u,u,t-2*u,i-2*u,void 0,"FAST")}))}return b},toPDFDataURL:async t=>(await e._toPDF(Object.assign({mimeType:"image/jpeg"},t))).output("datauristring"),async toGIFDataURL(t={}){const i=t.pixelRatio||1,o=await(0,u.createGIF)({width:e.width*i,height:e.height*i}),n=1e3/(t.fps||10),a=e.duration/n;for(let s=0;s<a-1;s++){const t=s*n||1;e.setCurrentTime(t);let a=0,r="";for(const i of e.pages){if(a+=i.duration,i.set({_rendering:a>t}),a>t){r=i.id;break}}const l=await e._toCanvas({pixelRatio:i,pageId:r,_skipTimeout:!0});o.addFrame(l.getContext("2d"),{delay:n,copy:!0})}for(const s of e.pages){s.set({_rendering:!1})}return e.stop(),o.render(),new Promise((e=>{o.on("finished",(function(t){!function(e,t){var i=new FileReader;i.onload=function(e){t(e.target.result)},i.readAsDataURL(e)}(t,e)}))}))},async saveAsGIF(t={}){var{fileName:i}=t,o=n(t,["fileName"]);const a=await e.toGIFDataURL(o);(0,c.downloadFile)(a,i||"polotno.gif")},async toHTML({elementHook:t}={elementHook:void 0}){const i=e.toJSON();return(0,w.jsonToHTML)({json:i,elementHook:t})},async saveAsHTML({fileName:t}={}){const i=await e.toHTML(),o="data:text/html;base64,"+window.btoa(unescape(encodeURIComponent(i)));(0,c.downloadFile)(o,t||"polotno.html")},async toSVG({elementHook:t,pageId:i}={elementHook:void 0,pageId:void 0}){var o;const n=e.toJSON();i=i||(null===(o=n.pages[0])||void 0===o?void 0:o.id);const a=n.pages.find((e=>e.id===i));return(0,P.jsonToSVG)({json:Object.assign(Object.assign({},n),{pages:a?[a]:[]}),elementHook:t})},async saveAsSVG({fileName:t,elementHook:i,pageId:o}={}){const n=await e.toSVG({elementHook:i,pageId:o}),a="data:text/svg;base64,"+window.btoa(unescape(encodeURIComponent(n)));(0,c.downloadFile)(a,t||"polotno.svg")},async saveAsPDF(t={}){var{fileName:i}=t,o=n(t,["fileName"]);(await e._toPDF(Object.assign({mimeType:"image/jpeg"},o))).save(i||"polotno.pdf")},async waitLoading({_skipTimeout:e=!1}={}){e||await new Promise((e=>setTimeout(e,50))),await(0,f.whenLoaded)()},toJSON:()=>({width:e.width,height:e.height,fonts:(0,s.getSnapshot)(e.fonts),pages:(0,s.getSnapshot)(e.pages),audios:(0,s.getSnapshot)(e.audios),unit:e.unit,dpi:e.dpi,custom:e.custom,schemaVersion:e.schemaVersion}),loadJSON(t,i=!1){var o;const n=Object.assign({},t);void 0===n.schemaVersion&&m.flags.htmlRenderEnabled&&(0,E.forEveryChild)({children:n.pages},(e=>{if("text"===e.type){const t=16,i=e.letterSpacing*t;e.letterSpacing=i/e.fontSize}}));const a=e.pages.indexOf(e.activePage);let r=null===(o=n.pages[a]||n.pages[0])||void 0===o?void 0:o.id;n._activePageId=r;const l=Object.assign({},(0,s.getSnapshot)(e));Object.assign(l,n),l.history=i?e.history.toJSON():{history:[],undoIdx:-1},(0,s.applySnapshot)(e,l)},clear({keepHistory:t=!1}={}){const i=e.pages.map((e=>e.id));e.deletePages(i),e.custom=null,t||e.history.clear()},addFont(t){e.removeFont(t.fontFamily),e.fonts.push(t),e.loadFont(t.fontFamily)},removeFont(t){e.fonts.filter((e=>e.fontFamily===t)).forEach((e=>(0,s.destroy)(e)))},addAudio(t){const i=_.Audio.create(Object.assign({id:(0,l.nanoid)(10)},t));e.audios.push(i)},removeAudio(t){const i=e.audios.find((e=>e.id===t));i&&e.audios.remove(i)},async loadFont(t){const i=e.fonts.find((e=>e.fontFamily===t))||h.globalFonts.find((e=>e.fontFamily===t));let o=[{fontStyle:"normal",fontWeight:"normal"}];return i?(i.styles&&(o=i.styles.map((e=>({fontStyle:e.fontStyle||"normal",fontWeight:e.fontWeight||"normal"})))),h.injectCustomFont(i)):h.injectGoogleFont(t),Promise.all(o.map((e=>h.loadFont(t,e.fontStyle,e.fontWeight))))},validate:e=>exports.Store.validate(e,[{path:"",type:exports.Store}]).map((e=>({path:"store"+e.context.map((e=>e.path)).join("."),message:e.message})))}))),exports.default=O;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "polotno",
-  "version": "2.23.2",
+  "version": "2.23.4",
   "description": "Design Editor Framework",
   "author": "Anton Lavrenov",
   "keywords": [
@@ -10,14 +10,14 @@
     "design editor"
   ],
   "dependencies": {
-    "@blueprintjs/core": "5.17.6",
-    "@blueprintjs/select": "5.3.18",
+    "@blueprintjs/core": "5.19.0",
+    "@blueprintjs/select": "5.3.20",
     "@meronex/icons": "^4.0.0",
     "cssom": "^0.5.0",
     "fast-json-patch": "^3.1.1",
     "functions-have-names": "^1.2.3",
     "gifuct-js": "^2.1.2",
-    "gradient-parser": "^1.0.2",
+    "gradient-parser": "^1.1.1",
     "konva": "^9.3.20",
     "mensch": "^0.3.4",
     "mobx": "6.13.7",
@@ -34,7 +34,7 @@
     "sortablejs": "^1.15.6",
     "svg-round-corners": "^0.4.3",
     "swr": "^2.3.3",
-    "use-image": "^1.1.1"
+    "use-image": "^1.1.2"
   },
   "targets": {
     "bundle": {
@@ -64,18 +64,18 @@
   ],
   "devDependencies": {
     "@canvas/image": "^2.0.0",
-    "@size-limit/preset-big-lib": "^11.1.6",
+    "@size-limit/preset-big-lib": "^11.2.0",
     "@types/jest": "^29",
     "@types/react": "^18.3.12",
-    "@types/sanitize-html": "^2.13.0",
+    "@types/sanitize-html": "^2.16.0",
     "@vitest/browser": "^1.6.0",
     "assert": "^2.1.0",
     "bippy": "^0.0.25",
     "buffer": "^6.0.3",
     "canvas": "^3.1.0",
-    "glob": "^11.0.1",
+    "glob": "^11.0.2",
     "jest-file-snapshot": "^0.7.0",
-    "jsdom": "^25.0.1",
+    "jsdom": "^26.1.0",
     "parcel": "2.13.3",
     "path-browserify": "^1.0.1",
     "pptxgenjs": "^3.12.0",
@@ -84,12 +84,12 @@
     "querystring-es3": "^0.2.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "size-limit": "^11.1.6",
+    "size-limit": "^11.2.0",
     "skia-canvas": "^1.0.2",
     "svg-path-bounds": "^1.0.2",
-    "terser": "^5.39.0",
+    "terser": "^5.39.2",
     "ts-jest": "^29",
-    "typescript": "^5.8.2",
+    "typescript": "^5.8.3",
     "uglifyjs-folder": "^3.3.0",
     "vitest": "^1.6.0",
     "webdriverio": "^8.38.2"

package/pages-timeline/pages-timeline.js

@@ -65,7 +65,7 @@ var e=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:
   &:hover {
     display: block;
   }
-`;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")`
+`;let v=[],b=!1;const E=async()=>{if(b||0===v.length){return}b=!0;const{page:e,setPreview:t}=v.shift();try{t(await e.store.toDataURL({pageId:e.id,pixelRatio:.1,quickMode:!0}))}catch(a){if(a.message.includes("Canvas was unmounted.")){return}throw a}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;