polotno 2.23.9 → 2.23.10

package/canvas/html-element.js

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

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")),c=i(require("konva")),s=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"),y=require("./use-delayer");function M(){return document.createElement("canvas")}function v(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 b={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(b,e)};const E={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(E,e)};const S=(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(S(e.a.width*a,1,1e4)),l=Math.floor(S(e.a.height*a,1,1e4)),s=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===s&&!g?void 0:M()}}),[t,s,g,m]);return o.default.useLayoutEffect((()=>{if(!w||!t){return}(0,p.trySetCanvasSize)(w,d,l);const e=w.getContext("2d");if(!e){return}s&&(e.beginPath(),e.moveTo(s,0),e.lineTo(d-s,0),e.arc(d-s,s,s,3*Math.PI/2,0,!1),e.lineTo(d,l-s),e.arc(d-s,l-s,s,0,Math.PI/2,!1),e.lineTo(s,l),e.arc(s,l-s,s,Math.PI/2,Math.PI,!1),e.lineTo(0,s),e.arc(s,s,s,Math.PI,3*Math.PI/2,!1),e.clip());const a=g?function(e,t){var r,a;const i=M();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,c=new Int32Array(h.data.buffer),s=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<s;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),c[x+w*s]=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&&c.default.Util.releaseCanvas(w)}),[w]),w||t};const I=M(),O=(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 c.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}))})),C=(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 R=l.default;exports.setImageLoaderHook=e=>{R=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,S]=(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),[_,X]=R(f,"anonymous"),Y="svg"!==e.type||"loaded"===S?X:"loading";(0,exports.useImageLoader)(Y,e.src,e.id);const T=e.page._exportingOrRendering?1:Math.max(1,t.scale),D=t._elementsPixelRatio*T,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:_,status:X,type:e.type}),W=((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 c=M();let s=1;"svg"===e.type&&(s=Math.max(e.a.width/t.width*r,e.a.height/t.height*r)),(0,p.trySetCanvasSize)(c,Math.max(t.width*s,1),Math.max(t.height*s,1));let u=o?-c.width:0,g=n?-c.height:0;return null===(a=c.getContext("2d"))||void 0===a||a.scale(o?-1:1,n?-1:1),null===(i=c.getContext("2d"))||void 0===i||i.drawImage(t,u,g,c.width,c.height),c}),[e.maskSrc,e.flipX,e.flipY,t,e.a.width,e.a.height,r]);return o.default.useEffect((()=>()=>{a&&"CANVAS"===a.nodeName&&c.default.Util.releaseCanvas(a)}),[a]),a})(e,_||k,D),A=((e,t)=>{const[r,a]=R(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=M();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,W)||I;let{cropX:L,cropY:P,cropWidth:z,cropHeight:q}=e.a;"loaded"!==X&&(L=P=0,z=q=1);const H=A.width*z,j=A.height*q,F=e.a.width/e.a.height;let B,N;const U=H/j,G=e.stretchEnabled;G?(B=H,N=j):F>=U?(B=H,N=H/F):(B=j*F,N=j);const V={x:A.width*L,y:A.height*P,width:B,height:N},$=null!==(r=e.cornerRadius)&&void 0!==r?r:0,J=e.page._exportingOrRendering?1:Math.min(2,t.scale),K=t._elementsPixelRatio*J;let Q=((e,t,r,a)=>{const i=(0,exports.useSizeFixer)(e.clipSrc||""),[n,h]=R(i,"anonymous"),d=e.clipSrc?h:"loaded";(0,exports.useImageLoader)(d,e.clipSrc,e.id);const l=o.default.useMemo((()=>{if(t&&n){return M()}}),[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=M(),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),c.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,A,V,K,$,a||e._cropModeEnabled||"svg"===e.type,!0),K,[V,$,K]);const Z=Math.max(e.a.width/B,e.a.height/N);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})}}),[Q,e.page._exportingOrRendering,a,z,q,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 ee=o.default.useRef(null),te=o.default.useRef(null),re=o.default.useRef(null);o.default.useLayoutEffect((()=>{e._cropModeEnabled&&(te.current.nodes([ee.current]),re.current.nodes([l.current]))}),[e._cropModeEnabled]);var ae=o.default.useRef(null),ie=o.default.useRef(0),oe=o.default.useRef(!1);const ne=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,B/a),n=Math.min(1,N/i),h=1-o,d=Math.min(h,Math.max(0,Math.round(-t.target.x())/a)),l=1-n,c=Math.min(l,Math.max(0,Math.round(-t.target.y())/i));t.target.setAttrs({x:-d*A.width,y:-c*A.height,scaleX:1,scaleY:1}),e.set({cropX:d,cropY:c,cropWidth:o,cropHeight:n})},he=()=>{"svg"!==e.type&&e.contentEditable&&(e.stretchEnabled||setTimeout((()=>{e.toggleCropMode(!0)})))},de="svg"===e.type&&k,le="loading"===X&&!de,[ce]=(0,y.useDelayer)(le,100,!1,!1),se="failed"===X,ue=!ce&&!se,ge=o.default.useRef({cropX:0,cropY:0,cropWidth:0,cropHeight:0}),fe=ue?e.a.opacity:0;(0,w.useFadeIn)(n,fe);const pe=e.selectable||"admin"===t.role,me=(0,x.isTouchDevice)();return o.default.createElement(o.default.Fragment,null,ce&&o.default.createElement(O,{element:e}),se&&o.default.createElement(C,{element:e}),o.default.createElement(d.Image,{ref:n,name:"element",id:e.id,image:Q,x:e.a.x,y:e.a.y,width:e.a.width||1,height:e.a.height||1,rotation:e.a.rotation,opacity:fe,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,customCrop:V,listening:pe,draggable:me?e.draggable&&u:e.draggable,preventDefault:!me||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:he,onDblTap:he,onTransformStart:()=>{i(!0),ge.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-B/A.width,d=Math.min(h,Math.max(0,e.cropX)),l=1-N/A.height,c=Math.min(l,Math.max(0,e.cropY)),s=n.getActiveAnchor(),u=!(s.indexOf("middle")>=0||s.indexOf("center")>=0),g=!u&&i<1&&ge.current.cropHeight>N/A.height;let f=u?e.cropWidth:e.cropWidth*i;g&&(f=e.cropWidth);const p=!u&&o<1&&ge.current.cropWidth>B/A.width;let m=u?e.cropHeight:e.cropHeight*o;p&&(m=e.cropHeight),G&&(f=e.cropWidth,m=e.cropHeight),e.set({cropX:d,cropY:c,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-c)})},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:B/A.width,cropHeight:N/A.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:fe,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,$-e.borderSize),hideInExport:!e.showInExport}),e._cropModeEnabled&&o.default.createElement(s.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:Q,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:Z,scaleY:Z},o.default.createElement(d.Image,{image:A,ref:l,opacity:.4,draggable:!0,x:-e.cropX*A.width,y:-e.cropY*A.height,onDragMove:ne,onTransform:ne,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()&&oe.current&&(i.startDrag(),oe.current=!1),r&&a){c.default.hitOnDragEnabled=!0,i.isDragging()&&(oe.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(!ae.current){return void(ae.current=v(o,n))}var h=v(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);ie.current||(ie.current=d);const p=i.position();var l={x:h.x-p.x,y:h.y-p.y},s=d/ie.current;i.scaleX(s),i.scaleY(s);const m=t.point(h),w=t.point(ae.current);var u=m.x-w.x,g=m.y-w.y,f={x:Math.min(0,h.x-l.x*s+u),y:Math.min(0,h.y-l.y*s+g)};i.position(f),ie.current=d,ae.current=h,ne(e)}},onTouchEnd:e=>{ie.current=0,ae.current=null,c.default.hitOnDragEnabled=!1}}),o.default.createElement(d.Transformer,Object.assign({ref:re},E)),o.default.createElement(d.Rect,{width:B,height:N,ref:ee,listening:!1,onTransform:t=>{if(e.cropX<Math.abs(t.target.x()/A.width)&&t.target.x()<0&&e.cropX>0){const r=(e.cropWidth+e.cropX)*A.width;t.target.scaleX(1),t.target.width(r)}if(e.cropY<Math.abs(t.target.y()/A.height)&&t.target.y()<0&&e.cropY>0){const r=(e.cropHeight+e.cropY)*A.height;t.target.scaleY(1),t.target.height(r)}t.target.x()<-e.cropX*A.width-1e-9&&(t.target.x(-e.cropX*A.width),t.target.scaleX(1)),t.target.y()<-e.cropY*A.height-1e-9&&(t.target.y(-e.cropY*A.height),t.target.scaleY(1));const r=Math.min(1,Math.max(0,e.cropX+t.target.x()/A.width)),a=Math.min(1,Math.max(0,t.target.y()/A.height+e.cropY)),i=t.target.width()*t.target.scaleX(),o=t.target.height()*t.target.scaleY(),n=Math.min(1-r,i/A.width),h=Math.min(1-a,o/A.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*Z,A.width*(1-r)*Z),height:Math.min(o*Z,A.height*(1-a)*Z)})}}),o.default.createElement(d.Transformer,Object.assign({ref:te},b,{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")),c=i(require("konva")),s=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"),y=require("./use-delayer");function M(){return document.createElement("canvas")}function v(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 b={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(b,e)};const E={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(E,e)};const S=(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(S(e.a.width*a,1,1e4)),l=Math.floor(S(e.a.height*a,1,1e4)),s=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===s&&!g?void 0:M()}}),[t,s,g,m]);return o.default.useLayoutEffect((()=>{if(!w||!t){return}(0,p.trySetCanvasSize)(w,d,l);const e=w.getContext("2d");if(!e){return}s&&(e.beginPath(),e.moveTo(s,0),e.lineTo(d-s,0),e.arc(d-s,s,s,3*Math.PI/2,0,!1),e.lineTo(d,l-s),e.arc(d-s,l-s,s,0,Math.PI/2,!1),e.lineTo(s,l),e.arc(s,l-s,s,Math.PI/2,Math.PI,!1),e.lineTo(0,s),e.arc(s,s,s,Math.PI,3*Math.PI/2,!1),e.clip());const a=g?function(e,t){var r,a;const i=M();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,c=new Int32Array(h.data.buffer),s=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<s;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),c[x+w*s]=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&&c.default.Util.releaseCanvas(w)}),[w]),w||t};const I=M(),O=(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 c.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}))})),C=(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 R=l.default;exports.setImageLoaderHook=e=>{R=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,S]=(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),[_,X]=R(f,"anonymous"),Y="svg"!==e.type||"loaded"===S?X:"loading";(0,exports.useImageLoader)(Y,e.src,e.id);const T=e.page._exportingOrRendering?1:Math.max(1,t.scale),D=t._elementsPixelRatio*T,W=(({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:_,status:X,type:e.type}),k=((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 c=M();let s=1;"svg"===e.type&&(s=Math.max(e.a.width/t.width*r,e.a.height/t.height*r)),(0,p.trySetCanvasSize)(c,Math.max(t.width*s,1),Math.max(t.height*s,1));let u=o?-c.width:0,g=n?-c.height:0;return null===(a=c.getContext("2d"))||void 0===a||a.scale(o?-1:1,n?-1:1),null===(i=c.getContext("2d"))||void 0===i||i.drawImage(t,u,g,c.width,c.height),c}),[e.maskSrc,e.flipX,e.flipY,t,e.a.width,e.a.height,r]);return o.default.useEffect((()=>()=>{a&&"CANVAS"===a.nodeName&&c.default.Util.releaseCanvas(a)}),[a]),a})(e,_||W,D),A=((e,t)=>{const r=(0,exports.useSizeFixer)(e.maskSrc||""),[a,i]=R(r,"anonymous"),n=r?i:"loaded";return(0,exports.useImageLoader)(n,r||"",e.id),o.default.useMemo((()=>{if(!a){return t}if(!t||!t.width||!t.height){return t}const r=M();r.width=Math.max(t.width,1),r.height=Math.max(t.height,1);const i=r.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}}(a,e);return i.drawImage(a,o.x,o.y,o.width,o.height,0,0,t.width,t.height),r}),[t,a,e.a.width,e.a.height])})(e,k)||I;let{cropX:L,cropY:P,cropWidth:z,cropHeight:q}=e.a;"loaded"!==X&&(L=P=0,z=q=1);const H=A.width*z,F=A.height*q,j=e.a.width/e.a.height;let B,N;const U=H/F,G=e.stretchEnabled;G?(B=H,N=F):j>=U?(B=H,N=H/j):(B=F*j,N=F);const V={x:A.width*L,y:A.height*P,width:B,height:N},$=null!==(r=e.cornerRadius)&&void 0!==r?r:0,J=e.page._exportingOrRendering?1:Math.min(2,t.scale),K=t._elementsPixelRatio*J;let Q=((e,t,r,a)=>{const i=(0,exports.useSizeFixer)(e.clipSrc||""),[n,h]=R(i,"anonymous"),d=e.clipSrc?h:"loaded";(0,exports.useImageLoader)(d,e.clipSrc,e.id);const l=o.default.useMemo((()=>{if(t&&n){return M()}}),[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=M(),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),c.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,A,V,K,$,a||e._cropModeEnabled||"svg"===e.type,!0),K,[V,$,K]);const Z=Math.max(e.a.width/B,e.a.height/N);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})}}),[Q,e.page._exportingOrRendering,a,z,q,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 ee=o.default.useRef(null),te=o.default.useRef(null),re=o.default.useRef(null);o.default.useLayoutEffect((()=>{e._cropModeEnabled&&(te.current.nodes([ee.current]),re.current.nodes([l.current]))}),[e._cropModeEnabled]);var ae=o.default.useRef(null),ie=o.default.useRef(0),oe=o.default.useRef(!1);const ne=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,B/a),n=Math.min(1,N/i),h=1-o,d=Math.min(h,Math.max(0,Math.round(-t.target.x())/a)),l=1-n,c=Math.min(l,Math.max(0,Math.round(-t.target.y())/i));t.target.setAttrs({x:-d*A.width,y:-c*A.height,scaleX:1,scaleY:1}),e.set({cropX:d,cropY:c,cropWidth:o,cropHeight:n})},he=()=>{"svg"!==e.type&&e.contentEditable&&(e.stretchEnabled||setTimeout((()=>{e.toggleCropMode(!0)})))},de="svg"===e.type&&W,le="loading"===X&&!de,[ce]=(0,y.useDelayer)(le,100,!1,!1),se="failed"===X,ue=!ce&&!se,ge=o.default.useRef({cropX:0,cropY:0,cropWidth:0,cropHeight:0}),fe=ue?e.a.opacity:0;(0,w.useFadeIn)(n,fe);const pe=e.selectable||"admin"===t.role,me=(0,x.isTouchDevice)();return o.default.createElement(o.default.Fragment,null,ce&&o.default.createElement(O,{element:e}),se&&o.default.createElement(C,{element:e}),o.default.createElement(d.Image,{ref:n,name:"element",id:e.id,image:Q,x:e.a.x,y:e.a.y,width:e.a.width||1,height:e.a.height||1,rotation:e.a.rotation,opacity:fe,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,customCrop:V,listening:pe,draggable:me?e.draggable&&u:e.draggable,preventDefault:!me||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:he,onDblTap:he,onTransformStart:()=>{i(!0),ge.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-B/A.width,d=Math.min(h,Math.max(0,e.cropX)),l=1-N/A.height,c=Math.min(l,Math.max(0,e.cropY)),s=n.getActiveAnchor(),u=!(s.indexOf("middle")>=0||s.indexOf("center")>=0),g=!u&&i<1&&ge.current.cropHeight>N/A.height;let f=u?e.cropWidth:e.cropWidth*i;g&&(f=e.cropWidth);const p=!u&&o<1&&ge.current.cropWidth>B/A.width;let m=u?e.cropHeight:e.cropHeight*o;p&&(m=e.cropHeight),G&&(f=e.cropWidth,m=e.cropHeight),e.set({cropX:d,cropY:c,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-c)})},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:B/A.width,cropHeight:N/A.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:fe,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,$-e.borderSize),hideInExport:!e.showInExport}),e._cropModeEnabled&&o.default.createElement(s.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:Q,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:Z,scaleY:Z},o.default.createElement(d.Image,{image:A,ref:l,opacity:.4,draggable:!0,x:-e.cropX*A.width,y:-e.cropY*A.height,onDragMove:ne,onTransform:ne,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()&&oe.current&&(i.startDrag(),oe.current=!1),r&&a){c.default.hitOnDragEnabled=!0,i.isDragging()&&(oe.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(!ae.current){return void(ae.current=v(o,n))}var h=v(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);ie.current||(ie.current=d);const p=i.position();var l={x:h.x-p.x,y:h.y-p.y},s=d/ie.current;i.scaleX(s),i.scaleY(s);const m=t.point(h),w=t.point(ae.current);var u=m.x-w.x,g=m.y-w.y,f={x:Math.min(0,h.x-l.x*s+u),y:Math.min(0,h.y-l.y*s+g)};i.position(f),ie.current=d,ae.current=h,ne(e)}},onTouchEnd:e=>{ie.current=0,ae.current=null,c.default.hitOnDragEnabled=!1}}),o.default.createElement(d.Transformer,Object.assign({ref:re},E)),o.default.createElement(d.Rect,{width:B,height:N,ref:ee,listening:!1,onTransform:t=>{if(e.cropX<Math.abs(t.target.x()/A.width)&&t.target.x()<0&&e.cropX>0){const r=(e.cropWidth+e.cropX)*A.width;t.target.scaleX(1),t.target.width(r)}if(e.cropY<Math.abs(t.target.y()/A.height)&&t.target.y()<0&&e.cropY>0){const r=(e.cropHeight+e.cropY)*A.height;t.target.scaleY(1),t.target.height(r)}t.target.x()<-e.cropX*A.width-1e-9&&(t.target.x(-e.cropX*A.width),t.target.scaleX(1)),t.target.y()<-e.cropY*A.height-1e-9&&(t.target.y(-e.cropY*A.height),t.target.scaleY(1));const r=Math.min(1,Math.max(0,e.cropX+t.target.x()/A.width)),a=Math.min(1,Math.max(0,t.target.y()/A.height+e.cropY)),i=t.target.width()*t.target.scaleX(),o=t.target.height()*t.target.scaleY(),n=Math.min(1-r,i/A.width),h=Math.min(1-a,o/A.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*Z,A.width*(1-r)*Z),height:Math.min(o*Z,A.height*(1-a)*Z)})}}),o.default.createElement(d.Transformer,Object.assign({ref:te},b,{visible:e.resizable})))))}));

package/package.json

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