polotno 2.21.3 → 2.21.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/canvas/html-element.js +4 -1
  2. package/canvas/page.js +1 -1
  3. package/canvas/video-element.js +1 -1
  4. package/model/store.d.ts +1 -1
  5. package/package.json +8 -8
  6. package/paths.5f2bd0cd.js +2 -0
  7. package/paths.5f2bd0cd.js.map +1 -0
  8. package/paths.a8c8168f.js +2 -0
  9. package/paths.a8c8168f.js.map +1 -0
  10. package/polotno-app.d.ts +2 -2
  11. package/polotno.bundle.js +105 -120
  12. package/utils/text.d.ts +1 -0
  13. package/utils/text.js +1 -1
  14. package/utils/validate-key.js +1 -1
  15. package/paths.4fc55a94.js +0 -2
  16. package/paths.4fc55a94.js.map +0 -1
  17. package/paths.aa677a01.js +0 -2
  18. package/paths.aa677a01.js.map +0 -1
package/canvas/html-element.js CHANGED
@@ -2,6 +2,9 @@ var e,t=this&&this.__createBinding||(Object.create?function(e,t,i,n){void 0===n&
2
2
  .ql-editor {
3
3
  outline: none;
4
4
  }
5
+ .ql-clipboard {
6
+ pointer-events: none;
7
+ }
5
8
  ${m.resetStyleContent}
6
9
  strong {
7
10
  font-weight: 700;
@@ -9,4 +12,4 @@ var e,t=this&&this.__createBinding||(Object.create?function(e,t,i,n){void 0===n&
9
12
  .ql-direction-rtl {
10
13
  direction: rtl;
11
14
  }
12
- `;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:n})=>{const o=r.default.useRef(null);r.default.useEffect((()=>{if(!o.current){return}const e=(0,exports.createQuill)(o.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=o.current)||void 0===e?void 0:e.childNodes[0];i(t.innerHTML)}),10)})),e.setSelection(0,0,"api"),e.on("selection-change",(t=>{t&&u.runInAction((()=>{exports.quillRef.currentFormat=e.getFormat()}))})),o.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 n=function(e){return!!e&&!!e.closest(".sketch-picker")}(e.relatedTarget);n||t()})),()=>{u.runInAction((()=>{exports.quillRef.editor.instance=null,exports.quillRef.currentFormat={}})),delete window.__polotnoQuill}}),[]),r.default.useEffect((()=>{var t;const i=exports.quillRef.editor.instance;if(!i){return}const r=i.getSelection();(null===(t=o.current)||void 0===t?void 0:t.childNodes[0].innerHTML)===n.text||((0,exports.setQuillContent)(i,e),r&&(i.setSelection(r.index,r.length),u.runInAction((()=>{exports.quillRef.currentFormat=i.getFormat()}))))}),[n.text]);const a={color:n.fill};return n.fill.indexOf("gradient")>=0&&(a.backgroundColor=n.fill,a.backgroundImage=n.fill,a.backgroundSize="100% 100%",a.backgroundRepeat="repeat",a.webkitBackgroundClip="text",a.MozBackgroundClip="text",a.WebkitTextFillColor="transparent",a.MozTextFillColor="transparent"),r.default.createElement(z,{ref:o,style:Object.assign(Object.assign({},a),{fontSize:n.fontSize,fontWeight:n.fontWeight,width:n.a.width,fontFamily:n.fontFamily,lineHeight:n.lineHeight,letterSpacing:n.letterSpacing+"rem",textAlign:n.align}),dir:(0,g.getDir)((0,v.removeTags)(n.text))})};function F(e,{fontFamily:t="",color:i="black"}={}){let n=`color: ${i||e.fill}`;return e.fill.indexOf("gradient")>=0&&(n=`\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`,n,`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}rem`:"",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,v.removeTags)(e.text))}">${e.text.replaceAll("\n","</br>")}</div>`}const R=/^((?!chrome|android).)*safari/i.test(navigator.userAgent);exports.HTMLElement=(0,a.observer)((({element:e,store:t})=>{const i=r.default.useRef(null),[n,o]=r.default.useState(),[a,s]=r.default.useState(!1),[y,O]=r.default.useState(!0),[M,T]=r.default.useState(!1),_=r.default.useRef(e.height),C=t.selectedShapes.indexOf(e)>=0,$=e.fontSize/3,{textVerticalResizeEnabled:A}=c.flags,H=(0,g.usePrevious)(e.fontFamily),[I]=(0,g.useFontLoader)(t,e.fontFamily),j=e._editModeEnabled;(0,p.useFadeIn)(i);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,i){return r.default.useMemo((()=>(0,m.detectSize)(e)),[e,t.width,i])}(L,e,I);r.default.useEffect((()=>{if(!I){return}if(!e.height){return void e.set({height:Y})}const{textOverflow:i}=c.flags;if("change-font-size"!==i||a){"resize"===i&&(A&&e.height<Y&&t.history.ignore((()=>{e.set({height:Y})})),A||e.height===Y||t.history.ignore((()=>{e.set({height:Y})})))}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:n}=(0,m.detectSize)(i),o=e.height&&n>e.height,r=(0,m.isContentWrapping)({html:i});if(!o&&!r){break}t-=.5}return t})(e);i!==e.fontSize?t.history.ignore((()=>{e.set({fontSize:i})})):e.height!==Y&&(A&&e.height<Y?t.history.ignore((()=>{e.set({height:Y})})):A||t.history.ignore((()=>{e.set({height:Y})})))}}));const W=r.default.useRef(0),B=r.default.useMemo((()=>{const e={lastArgs:null,lastResult:null};return async function(t){return e.lastArgs&&e.lastResult&&(i=e.lastArgs,n=t,JSON.stringify(i)===JSON.stringify(n))||(e.lastResult=await(0,m.htmlToCanvas)(t),e.lastArgs=Object.assign({},t)),e.lastResult;var i,n}}),[]);r.default.useEffect((()=>{a||j||(async()=>{W.current++;const i=W.current,n=(0,w.incrementLoader)(`text ${e.id}`);O(!0);let r=null;const a=R?5:1;for(let o=0;o<a;o++){const a=o>0?B:m.htmlToCanvas;if(r=await a({skipCache:o>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))||S.globalFonts.find((e=>e.fontFamily===P))}),i!==W.current){return void n()}(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})(r)||!R||await new Promise((e=>setTimeout(e,50*(o+1))))}r?(o(r),O(!1),d.default.Util.requestAnimFrame(n)):n()})()}),[L,a,Y,j,P,e.height,t._elementsPixelRatio,I]);const Q=a||y;r.default.useEffect((()=>u.autorun((()=>{const t=i.current;(0,f.applyFilter)(t,e)}))),[n,Q,e.shadowColor,e.shadowOffsetX,e.shadowOffsetY,e.shadowOpacity]);let N=0;"middle"===e.verticalAlign&&(N=(e.height-Y)/2),"bottom"===e.verticalAlign&&(N=e.height-Y);const J=(0,g.getLineHeight)({fontLoaded:I,fontFamily:e.fontFamily,fontSize:e.fontSize,lineHeight:e.lineHeight}),V=(0,k.isTouchDevice)();return r.default.createElement(r.default.Fragment,null,r.default.createElement(l.Rect,{x:e.a.x,y:e.a.y,offsetX:e.backgroundPadding*(e.fontSize*J*.5),offsetY:e.backgroundPadding*(e.fontSize*J*.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*J),height:e.a.height+e.backgroundPadding*(e.fontSize*J),cornerRadius:e.backgroundCornerRadius*(e.fontSize*J*.5)}),r.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:!Q,draggable:V?e.draggable&&C:e.draggable,preventDefault:!V||C,opacity:j?0:e.a.opacity,hideInExport:!e.showInExport,onMouseEnter:()=>{T(!0)},onMouseLeave:()=>{T(!1)},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 i;const n=t.target,o=(null===(i=n.getStage())||void 0===i?void 0:i.findOne("Transformer")).getActiveAnchor(),r="middle-left"===o||"middle-right"===o,a="top-center"===o||"bottom-center"===o,l=n.scaleX();if(r){const t=n.scaleX(),i=Math.max(n.width()*t,e.fontSize);if(n.width(i),n.scaleX(1),c.flags.textVerticalResizeEnabled){const t=Math.max(Y,_.current);e.set({height:t})}e.set({width:i,x:n.x(),y:n.y()})}else if(a){let i="resize"===c.flags.textOverflow?Y:e.lineHeight*e.fontSize;const o=Math.max(i,t.target.height()*t.target.scaleY());n.scaleY(1),e.set({x:n.x(),y:n.y(),height:o,rotation:n.rotation()})}else{n.scaleX(1),n.scaleY(1),e.set({fontSize:e.fontSize*l,width:n.width()*l,x:n.x(),y:n.y(),rotation:n.rotation(),height:n.height()*l})}},onTransformEnd:t=>{s(!1),O(!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})}}),r.default.createElement(l.Image,{ref:i,image:n,x:e.a.x,y:e.a.y,offsetX:$,offsetY:$-N,listening:!1,rotation:e.rotation,width:e.a.width+2*$,height:e.a.height+2*$,visible:!Q,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}),Q&&r.default.createElement(l.Group,{x:e.a.x,y:e.a.y,rotation:e.rotation,offsetY:-N},r.default.createElement(b.Html,{divProps:{style:{pointerEvents:"none"}}},r.default.createElement(z,{dangerouslySetInnerHTML:{__html:L},style:{pointerEvents:"none",display:"inline-block"}}))),j&&r.default.createElement(l.Group,{x:e.a.x,y:e.a.y,rotation:e.rotation,offsetY:-N},r.default.createElement(b.Html,null,r.default.createElement(q,{html:L,element:e,onChange:t=>{const i=(0,E.getLimitedFontSize)({oldText:(0,v.removeTags)(e.text),newText:(0,v.removeTags)(t),element:e});e.set({text:t,fontSize:i})},onBlur:t=>{e.toggleEditMode(!1)}}))),(C||M)&&r.default.createElement(x.Highlighter,{element:e}))}));
15
+ `;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:n})=>{const o=r.default.useRef(null);r.default.useEffect((()=>{if(!o.current){return}const e=(0,exports.createQuill)(o.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=o.current)||void 0===e?void 0:e.childNodes[0];i(t.innerHTML)}),10)})),e.setSelection(0,0,"api"),e.on("selection-change",((t,i,n)=>{t&&u.runInAction((()=>{exports.quillRef.currentFormat=e.getFormat()}))})),o.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 n=function(e){return!!e&&!!e.closest(".sketch-picker")}(e.relatedTarget);n||t()})),()=>{u.runInAction((()=>{exports.quillRef.editor.instance=null,exports.quillRef.currentFormat={}})),delete window.__polotnoQuill}}),[]),r.default.useEffect((()=>{var t;const i=exports.quillRef.editor.instance;if(!i){return}const r=i.getSelection();(null===(t=o.current)||void 0===t?void 0:t.childNodes[0].innerHTML)===n.text||((0,exports.setQuillContent)(i,e),r&&(i.setSelection(r.index,r.length),u.runInAction((()=>{exports.quillRef.currentFormat=i.getFormat()}))))}),[n.text]);const a={color:n.fill};return n.fill.indexOf("gradient")>=0&&(a.backgroundColor=n.fill,a.backgroundImage=n.fill,a.backgroundSize="100% 100%",a.backgroundRepeat="repeat",a.webkitBackgroundClip="text",a.MozBackgroundClip="text",a.WebkitTextFillColor="transparent",a.MozTextFillColor="transparent"),r.default.createElement(z,{ref:o,style:Object.assign(Object.assign({},a),{fontSize:n.fontSize,fontWeight:n.fontWeight,width:n.a.width,fontFamily:n.fontFamily,lineHeight:n.lineHeight,letterSpacing:n.letterSpacing+"rem",textAlign:n.align}),dir:(0,g.getDir)((0,v.removeTags)(n.text))})};function F(e,{fontFamily:t="",color:i="black"}={}){let n=`color: ${i||e.fill}`;return e.fill.indexOf("gradient")>=0&&(n=`\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`,n,`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}rem`:"",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,v.removeTags)(e.text))}">${(0,v.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=r.default.useRef(null),[n,o]=r.default.useState(),[a,s]=r.default.useState(!1),[y,O]=r.default.useState(!0),[M,T]=r.default.useState(!1),_=r.default.useRef(e.height),C=t.selectedShapes.indexOf(e)>=0,$=e.fontSize/3,{textVerticalResizeEnabled:A}=c.flags,H=(0,g.usePrevious)(e.fontFamily),[I]=(0,g.useFontLoader)(t,e.fontFamily),j=e._editModeEnabled;(0,p.useFadeIn)(i);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,i){return r.default.useMemo((()=>(0,m.detectSize)(e)),[e,t.width,i])}(L,e,I);r.default.useEffect((()=>{if(!I){return}if(!e.height){return void e.set({height:Y})}const{textOverflow:i}=c.flags;if("change-font-size"!==i||a){"resize"===i&&(A&&e.height<Y&&t.history.ignore((()=>{e.set({height:Y})})),A||e.height===Y||t.history.ignore((()=>{e.set({height:Y})})))}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:n}=(0,m.detectSize)(i),o=e.height&&n>e.height,r=(0,m.isContentWrapping)({html:i});if(!o&&!r){break}t-=.5}return t})(e);i!==e.fontSize?t.history.ignore((()=>{e.set({fontSize:i})})):e.height!==Y&&(A&&e.height<Y?t.history.ignore((()=>{e.set({height:Y})})):A||t.history.ignore((()=>{e.set({height:Y})})))}}));const W=r.default.useRef(0),B=r.default.useMemo((()=>{const e={lastArgs:null,lastResult:null};return async function(t){return e.lastArgs&&e.lastResult&&(i=e.lastArgs,n=t,JSON.stringify(i)===JSON.stringify(n))||(e.lastResult=await(0,m.htmlToCanvas)(t),e.lastArgs=Object.assign({},t)),e.lastResult;var i,n}}),[]);r.default.useEffect((()=>{a||j||(async()=>{W.current++;const i=W.current,n=(0,w.incrementLoader)(`text ${e.id}`);O(!0);let r=null;const a=R?5:1;for(let o=0;o<a;o++){const a=o>0?B:m.htmlToCanvas;try{if(r=await a({skipCache:o>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))||S.globalFonts.find((e=>e.fontFamily===P))}),i!==W.current){return void n()}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}(r)&&R){await new Promise((e=>setTimeout(e,50*(o+1))));continue}}catch(l){(0,w.triggerLoadError)(`Error rendering rich text with id ${e.id}`);break}}r?(o(r),O(!1),d.default.Util.requestAnimFrame(n)):n()})()}),[L,a,Y,j,P,e.height,t._elementsPixelRatio,I]);const Q=a||y;r.default.useEffect((()=>u.autorun((()=>{const t=i.current;(0,f.applyFilter)(t,e)}))),[n,Q,e.shadowColor,e.shadowOffsetX,e.shadowOffsetY,e.shadowOpacity]);let N=0;"middle"===e.verticalAlign&&(N=(e.height-Y)/2),"bottom"===e.verticalAlign&&(N=e.height-Y);const J=(0,g.getLineHeight)({fontLoaded:I,fontFamily:e.fontFamily,fontSize:e.fontSize,lineHeight:e.lineHeight}),V=(0,k.isTouchDevice)();return r.default.createElement(r.default.Fragment,null,r.default.createElement(l.Rect,{x:e.a.x,y:e.a.y,offsetX:e.backgroundPadding*(e.fontSize*J*.5),offsetY:e.backgroundPadding*(e.fontSize*J*.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*J),height:e.a.height+e.backgroundPadding*(e.fontSize*J),cornerRadius:e.backgroundCornerRadius*(e.fontSize*J*.5)}),r.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:!Q,draggable:V?e.draggable&&C:e.draggable,preventDefault:!V||C,opacity:j?0:e.a.opacity,hideInExport:!e.showInExport,onMouseEnter:()=>{T(!0)},onMouseLeave:()=>{T(!1)},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 i;const n=t.target,o=(null===(i=n.getStage())||void 0===i?void 0:i.findOne("Transformer")).getActiveAnchor(),r="middle-left"===o||"middle-right"===o,a="top-center"===o||"bottom-center"===o,l=n.scaleX();if(r){const t=n.scaleX(),i=Math.max(n.width()*t,e.fontSize);if(n.width(i),n.scaleX(1),c.flags.textVerticalResizeEnabled){const t=Math.max(Y,_.current);e.set({height:t})}e.set({width:i,x:n.x(),y:n.y()})}else if(a){let i="resize"===c.flags.textOverflow?Y:e.lineHeight*e.fontSize;const o=Math.max(i,t.target.height()*t.target.scaleY());n.scaleY(1),e.set({x:n.x(),y:n.y(),height:o,rotation:n.rotation()})}else{n.scaleX(1),n.scaleY(1),e.set({fontSize:e.fontSize*l,width:n.width()*l,x:n.x(),y:n.y(),rotation:n.rotation(),height:n.height()*l})}},onTransformEnd:t=>{s(!1),O(!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})}}),r.default.createElement(l.Image,{ref:i,image:n,x:e.a.x,y:e.a.y,offsetX:$,offsetY:$-N,listening:!1,rotation:e.rotation,width:e.a.width+2*$,height:e.a.height+2*$,visible:!Q,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}),Q&&r.default.createElement(l.Group,{x:e.a.x,y:e.a.y,rotation:e.rotation,offsetY:-N},r.default.createElement(b.Html,{divProps:{style:{pointerEvents:"none"}}},r.default.createElement(z,{dangerouslySetInnerHTML:{__html:L},style:{pointerEvents:"none",display:"inline-block"}}))),j&&r.default.createElement(l.Group,{x:e.a.x,y:e.a.y,rotation:e.rotation,offsetY:-N},r.default.createElement(b.Html,null,r.default.createElement(q,{html:L,element:e,onChange:t=>{const i=(0,E.getLimitedFontSize)({oldText:(0,v.removeTags)(e.text),newText:(0,v.removeTags)(t),element:e});e.set({text:t,fontSize:i})},onBlur:t=>{e.toggleEditMode(!1)}}))),(C||M)&&r.default.createElement(x.Highlighter,{element:e}))}));
package/canvas/page.js CHANGED
@@ -1 +1 @@
1
- var e=this&&this.__rest||function(e,t){var n={};for(var i in e){Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i])}if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var l=0;for(i=Object.getOwnPropertySymbols(e);l<i.length;l++){t.indexOf(i[l])<0&&Object.prototype.propertyIsEnumerable.call(e,i[l])&&(n[i[l]]=e[i[l]])}}return n},t=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.registerNextDomDrop=exports.useContextMenu=exports.setTransformerStyle=void 0,exports.registerTransformerAttrs=function(e,t){X[e]=X[e]||t,Object.assign(X[e],t)};const n=t(require("react")),i=require("mobx-react-lite"),l=require("mobx"),r=require("react-konva"),o=t(require("use-image")),a=t(require("konva")),s=t(require("./element")),d=require("./use-transformer-snap"),c=require("./image-element"),u=require("../utils/crop"),m=require("../utils/validate-key"),g=require("../utils/math"),h=require("../utils/unit"),f=require("../utils/flags"),p=require("../utils/screen"),x=require("./use-color"),b=require("../utils/gradient"),v=require("react-konva-utils"),E=a.default.DD._drag;window.removeEventListener("mousemove",E),a.default.DD._drag=function(e){(0,l.runInAction)((()=>{E.call(this,e)}))},window.addEventListener("mousemove",a.default.DD._drag);const y=new a.default.Group,w=20;y.add(new a.default.Rect({width:w,height:w,fill:"white"})),y.add(new a.default.Path({scaleX:w/24,scaleY:w/24,data:"M4.98313549,11.0001422 C5.49589839,10.9914935 5.92501998,11.3703506 5.99116425,11.8666444 L5.99985778,11.9831355 L6.00348884,12.2068855 C6.11245031,15.4321748 8.76323537,17.9999971 11.9999971,17.9999971 C12.1869612,17.9999971 12.3726725,17.9914753 12.5567465,17.9745765 L12.2928932,17.7071068 C11.9023689,17.3165825 11.9023689,16.6834175 12.2928932,16.2928932 C12.6834175,15.9023689 13.3165825,15.9023689 13.7071068,16.2928932 L15.7071068,18.2928932 C16.0976311,18.6834175 16.0976311,19.3165825 15.7071068,19.7071068 L13.7071068,21.7071068 C13.3165825,22.0976311 12.6834175,22.0976311 12.2928932,21.7071068 C11.9023689,21.3165825 11.9023689,20.6834175 12.2928932,20.2928932 L12.6111505,19.9769552 C12.4086045,19.9922816 12.2047796,19.9999971 11.9999971,19.9999971 C7.7687005,19.9999971 4.28886152,16.7094374 4.01666425,12.5105203 L4.00420123,12.2575143 L4.00014222,12.0168645 C3.9908282,11.4646583 4.43092928,11.0094562 4.98313549,11.0001422 Z M11.7071068,2.29289322 C12.0675907,2.65337718 12.0953203,3.22060824 11.7902954,3.61289944 L11.7071068,3.70710678 L11.3891629,4.0230186 C11.5916051,4.00770767 11.7953244,4 12,4 C16.418278,4 20,7.581722 20,12 C20,12.5522847 19.5522847,13 19,13 C18.4477153,13 18,12.5522847 18,12 C18,8.6862915 15.3137085,6 12,6 C11.8129339,6 11.6271216,6.00853145 11.4429483,6.02544919 L11.7071068,6.29289322 C12.0976311,6.68341751 12.0976311,7.31658249 11.7071068,7.70710678 C11.3466228,8.06759074 10.7793918,8.09532028 10.3871006,7.79029539 L10.2928932,7.70710678 L8.29289322,5.70710678 C7.93240926,5.34662282 7.90467972,4.77939176 8.20970461,4.38710056 L8.29289322,4.29289322 L10.2928932,2.29289322 C10.6834175,1.90236893 11.3165825,1.90236893 11.7071068,2.29289322 Z",fill:"black"}));const C=y.toCanvas({pixelRatio:2,width:w,height:w}),Y={enabledAnchors:["top-left","top-center","top-right","middle-left","bottom-left","bottom-right","bottom-center","middle-right"],borderEnabled:!0,rotateEnabled:!0,rotationSnaps:[0,45,90,135,180,225,270,315],ignoreStroke:!0,flipEnabled:!1,anchorStrokeWidth:2,borderStrokeWidth:2,rotateAnchorOffset:30,anchorStyleFunc:e=>{if(e.hasName("rotater")){const t=20;e.setAttrs({width:t,height:t,cornerRadius:t/2,offsetX:t/2,offsetY:t/2,fillPatternImage:C,fillPatternScaleX:t/w/2,fillPatternScaleY:t/w/2,fillPriority:"pattern",fillPatternRepeat:"no-repeat"})}}};exports.setTransformerStyle=e=>{Object.assign(Y,e)};const X={text:{enabledAnchors:["top-left","top-right","middle-left","bottom-left","bottom-right","middle-right"]},svg:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]},gif:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]},line:{enabledAnchors:[],borderEnabled:!1,rotateEnabled:!1},image:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]},many:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]},group:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]}},S=e=>n.default.createElement(r.Rect,Object.assign({},e,{preventDefault:!1})),k=t=>{var{url:i}=t,l=e(t,["url"]);const[a,s]=(0,o.default)(i,"anonymous"),d=a?(0,u.getCrop)(a,{width:l.width,height:l.height},"center-middle"):{};return(0,c.useImageLoader)(s,i,"page background"),n.default.createElement(r.Image,Object.assign({image:a},l,d))},R=e=>{const t=(0,x.useColor)({fill:e.fill,a:{width:e.width,height:e.height}});return n.default.createElement(r.Rect,Object.assign({},e,t))},A=t=>{const{background:i,scale:l,borderColor:o}=t,s=e(t,["background","scale","borderColor"]),d=n.default.useMemo((()=>!!a.default.Util.colorToRGBA(i)||(0,b.isGradient)(i)),[i]),c=n.default.useMemo((()=>{const e=document.createElement("canvas"),t=30;e.width=60,e.height=60;const n=e.getContext("2d");return n&&(n.fillStyle="black",n.fillRect(t,0,t,t),n.fillRect(0,t,t,t)),e}),[]);return n.default.createElement(n.default.Fragment,null,n.default.createElement(r.Rect,Object.assign({fillPatternImage:c},s,{opacity:.1,hideInExport:!0})),d?n.default.createElement(R,Object.assign({fill:i},s)):n.default.createElement(k,Object.assign({url:i},s)))},L=(0,i.observer)((({selection:e})=>e.visible?n.default.createElement(r.Rect,{name:"selection",x:Math.min(e.x1,e.x2),y:Math.min(e.y1,e.y2),width:Math.abs(e.x1-e.x2),height:Math.abs(e.y1-e.y2),fill:"rgba(0, 161, 255, 0.3)"}):null)),O=(0,i.observer)((({x:e,y:t,width:i,height:l,rotation:o,anchor:s,store:d})=>{const c=(0,g.getClientRect)({x:e,y:t,width:i,height:l,rotation:a.default.Util.radToDeg(o)});if(void 0===s){return null}const u=(l/2+70)*Math.cos(o-Math.PI/2),m=(l/2+70)*Math.sin(o-Math.PI/2),f=(0,h.pxToUnitRounded)({unit:d.unit,dpi:d.dpi,px:i/d.scale,precious:"px"===d.unit?0:1})+" x "+(0,h.pxToUnitRounded)({unit:d.unit,dpi:d.dpi,px:l/d.scale,precious:"px"===d.unit?0:1})+("px"===d.unit?"":" "+d.unit);return n.default.createElement(n.default.Fragment,null,n.default.createElement(r.Label,{x:(c.minX+c.maxX)/2+u,y:(c.minY+c.maxY)/2+m,offsetX:14,offsetY:14,visible:"rotater"===s},n.default.createElement(r.Tag,{cornerRadius:5,fill:"rgb(0, 161, 255)"}),n.default.createElement(r.Text,{align:"center",verticalAlign:"middle",fill:"white",padding:8,text:Math.round(a.default.Util.radToDeg(o)).toString()+"°"})),n.default.createElement(r.Label,{x:(c.minX+c.maxX)/2,y:c.maxY+20,visible:"rotater"!==s},n.default.createElement(r.Tag,{cornerRadius:5,fill:"rgb(0, 161, 255)",pointerDirection:"up",pointerHeight:0,pointerWidth:0}),n.default.createElement(r.Text,{align:"center",verticalAlign:"middle",fill:"white",padding:8,text:f})))})),T=(0,i.observer)((({elements:e,store:t})=>{const i=e.filter((e=>e.alwaysOnTop)),l=e.filter((e=>!e.alwaysOnTop)).concat(i);return n.default.createElement(n.default.Fragment,null,l.map((e=>n.default.createElement(s.default,{key:e.id,store:t,element:e,onClick:()=>{console.warn("Polotno warning: onClick callback is deprecated. Just stop using it. Polotno will do selection automatically.")}}))))}));exports.useContextMenu=({store:e})=>{const[t,i]=n.default.useState(!1),[l,r]=n.default.useState({x:0,y:0}),o=n.default.useCallback((e=>{i(!0),r(e)}),[]);return{open:o,close:n.default.useCallback((()=>{i(!1)}),[]),props:{isOpen:t,offset:l,setIsOpen:i}}};let P=null;exports.registerNextDomDrop=e=>{P=e};const M=atob("UG9sb3RubyBmcmVlIGxpY2Vuc2UgbGltaXRhdGlvbiBleGNlZWRlZCAtIFBsZWFzZSB1cGdyYWRlIHlvdXIgYWNjb3VudC4="),D=atob("cmVk"),I=atob("djAuOS4y"),j=e=>n.default.createElement(n.default.Fragment,null,n.default.createElement(r.Label,{fill:D,height:200},n.default.createElement(r.Tag,{fill:D}),n.default.createElement(r.Text,Object.assign({},e,{fill:"white",text:M,height:void 0,padding:10,fontSize:20}))));exports.default=(0,i.observer)((({store:e,page:t,width:o,height:s,pageControlsEnabled:c,backColor:u,pageBorderColor:x,activePageBorderColor:b,components:E,bleedColor:y,altCloneEnabled:w,viewportSize:C})=>{const k=e.bleedVisible?t.bleed:0,R=t.computedWidth+2*k,M=t.computedHeight+2*k,D=(o-R*e.scale)/2,B=(s-M*e.scale)/2,_=n.default.useRef(null),q=n.default.useRef(null),G=n.default.useRef(null),W=null==c||c,[z,N]=n.default.useState(null),[U,F]=n.default.useState({}),H=(0,exports.useContextMenu)({store:e}),V=e.selectedElements.find((e=>e._cropModeEnabled)),Z=e.selectedShapes.filter((e=>!e.resizable)).length>0,K=e.selectedShapes.filter((e=>!e.draggable)).length>0,J=e.selectedElements.filter((e=>!e.visible)).length>0;n.default.useLayoutEffect((()=>{var t,n,i;if(!_.current){return}const l=_.current.getStage(),r=e.selectedShapes.map((e=>e._cropModeEnabled?null:l.findOne("#"+e.id))).filter((e=>e)),o=1===e.selectedElements.length&&(null===(t=e.selectedElements[0])||void 0===t?void 0:t.type)||"many";X[o]?(_.current.setAttrs(Object.assign(Object.assign({},Y),X[o])),"svg"!==o&&"image"!==o&&"gif"!==o||e.selectedElements[0].keepRatio||_.current.setAttrs({enabledAnchors:Y.enabledAnchors}),"text"===o&&f.flags.textVerticalResizeEnabled&&_.current.setAttrs({enabledAnchors:null===(n=X.text.enabledAnchors)||void 0===n?void 0:n.concat(["bottom-center"])})):_.current.setAttrs(Y),Z&&_.current.enabledAnchors([]),K&&_.current.rotateEnabled(!1),r.find((e=>null==e?void 0:e.isDragging()))&&r.forEach((e=>{e.isDragging()||null==e||e.startDrag()})),_.current.nodes(r),null===(i=_.current.getLayer())||void 0===i||i.batchDraw()}),[e.selectedElements,V,Z,J,K]);const $=(0,i.useLocalObservable)((()=>({visible:!1,x1:0,y1:0,x2:0,y2:0}))),Q=n.default.useRef(!1),ee=(0,p.isTouchDevice)(),te=(0,l.action)((e=>{var t,n,i,l;if(ee){return}Q.current=!1;const r=e.target.findAncestor(".elements-container"),o=e.target.findAncestor("Transformer"),a=e.target.findAncestor(".page-abs-container");if(r||o||a){return}const s=null===(t=e.target.getStage())||void 0===t?void 0:t.getPointerPosition();s.x-=null===(n=e.target.getStage())||void 0===n?void 0:n.x(),s.y-=null===(i=e.target.getStage())||void 0===i?void 0:i.y(),s&&($.visible=!0,$.x1=s.x,$.y1=s.y,$.x2=s.x,$.y2=s.y,(null===(l=e.target.getStage())||void 0===l?void 0:l.getPointersPositions().length)>=2&&($.visible=!1))}));(({stageRef:e,containerRef:t,viewportSize:i})=>{n.default.useEffect((()=>{var n;const i=null===(n=t.current)||void 0===n?void 0:n.closest(".polotno-workspace-inner");function l(){var n;if(!e.current){return}const l=null===(n=t.current)||void 0===n?void 0:n.getBoundingClientRect(),r=null==i?void 0:i.getBoundingClientRect(),o=Math.max(0,r.left-l.left-100),a=Math.max(0,r.top-l.top-100);e.current.position({x:-o,y:-a}),e.current.container().style.transform=`translate(${o}px, ${a}px)`}return l(),i.addEventListener("scroll",l),()=>{i.removeEventListener("scroll",l)}}),[i.width,i.height])})({stageRef:q,containerRef:G,viewportSize:C}),n.default.useEffect((()=>{const t=(0,l.action)((e=>{var t,n,i,l;if(!$.visible){return}null===(t=q.current)||void 0===t||t.setPointersPositions(e);let r=null===(n=q.current)||void 0===n?void 0:n.getPointerPosition();r?(r.x-=null===(i=q.current)||void 0===i?void 0:i.x(),r.y-=null===(l=q.current)||void 0===l?void 0:l.y()):r={x:$.x2,y:$.y2},$.x2=r.x,$.y2=r.y})),n=(0,l.action)((()=>{if(!$.visible){return}if(!q.current){return}const t=q.current.findOne(".selection"),n=t?t.getClientRect():{width:0,height:0,x:0,y:0};if(n.width&&n.height){const t=[];q.current.find(".element").forEach((i=>{const l=i.getClientRect(),r=e.getElementById(i.id()),o=null==r?void 0:r.draggable,s=null==r?void 0:r.selectable;a.default.Util.haveIntersection(n,l)&&o&&s&&t.push(r.top.id)}));const i=[...new Set(t)];e.selectElements(i)}$.visible=!1,Q.current=!0}));return window.addEventListener("mousemove",t),window.addEventListener("touchmove",t),window.addEventListener("mouseup",n),window.addEventListener("touchend",n),()=>{window.removeEventListener("mousemove",t),window.removeEventListener("touchmove",t),window.removeEventListener("mouseup",n),window.removeEventListener("touchend",n)}}),[]);const ne=n.default.useRef(!1);n.default.useEffect((()=>{var e;let t;const n=null===(e=G.current)||void 0===e?void 0:e.closest(".polotno-workspace-inner"),i=()=>{ne.current=!0,clearTimeout(t),t=setTimeout((()=>{ne.current=!1}),300)};return n.addEventListener("scroll",i),()=>{clearTimeout(t),n.removeEventListener("scroll",i)}}),[]);const ie=n=>{if(e.activePage!==t&&t.select(),ne.current){return}if(Q.current){return}const i=n.evt.ctrlKey||n.evt.metaKey||n.evt.shiftKey,l=n.target.findAncestor(".elements-container"),r=n.target.findAncestor(".page-abs-container"),o=n.target.findAncestor("Transformer");if(!(i||l||o||r)){return void e.selectElements([])}const a=n.target.findAncestor(".element",!0),s=e.getElementById(null==a?void 0:a.id()),d=null==s?void 0:s.top,c=null==d?void 0:d.id,u=e.selectedElementsIds.indexOf(c)>=0;c&&i&&!u?e.selectElements(e.selectedElementsIds.concat([c])):c&&i&&u?e.selectElements(e.selectedElementsIds.filter((e=>e!==c))):!c||i||u||e.selectElements([c])};(0,d.useSnap)(_,e);const le=e.activePage===t,re=null==E?void 0:E.PageControls,oe=null==E?void 0:E.Tooltip,ae=null==E?void 0:E.ContextMenu,se=1/e.scale,de=0/e.scale;return n.default.createElement("div",{ref:G,onDragOver:e=>e.preventDefault(),onDrop:n=>{if(n.preventDefault(),!q.current){return}q.current.setPointersPositions(n);const i=q.current.findOne(".elements-container").getRelativePointerPosition(),l=q.current.getPointerPosition(),r=q.current.getAllIntersections(l).map((e=>e.findAncestor(".element",!0))).filter(Boolean),o=[...new Set(r.reverse())].map((t=>e.getElementById(t.id()))),a=o[0];P&&(P(i,a,{elements:o,page:t}),P=null)},style:{position:"relative",width:o+"px",height:s+"px",overflow:"hidden"},className:"polotno-page-container"+(le?" active-page":"")},n.default.createElement(r.Stage,{ref:q,width:Math.min(o,C.width+200),height:Math.min(C.height+200,s),onClick:ie,onTap:ie,onContextMenu:t=>{t.evt.preventDefault();const n=t.target.findAncestor(".element",!0),i=e.getElementById(null==n?void 0:n.id()),l=null==i?void 0:i.top,r=null==l?void 0:l.id;r?e.selectedElementsIds.indexOf(r)>=0||e.selectElements([r]):e.selectElements([]),H.open({x:t.evt.clientX,y:t.evt.clientY})},onMouseDown:te,onMouseMove:n=>{if(!n.evt.altKey&&z){return void N(null)}if(!n.evt.altKey){return}const i=n.target.findAncestor(".element",!0),l=null==i?void 0:i.id();if(!e.selectedElements[0]){return}if(e.selectedElementsIds.includes(l)){return}const r=(0,g.getTotalClientRect)(e.selectedShapes),o=l?e.getElementById(l):{x:0,y:0,width:t.computedWidth,height:t.computedHeight,rotation:0},a=(0,g.getClientRect)(o),s=[];r.minX>a.maxX&&s.push({distance:r.minX-a.maxX,box1:r,box2:a,points:[{x:r.minX,y:r.minY+r.height/2},{x:a.maxX,y:r.minY+r.height/2},{x:a.maxX,y:a.minY+a.height/2}]}),r.maxX<a.minX&&s.push({distance:a.minX-r.maxX,box1:r,box2:a,points:[{x:r.maxX,y:r.minY+r.height/2},{x:a.minX,y:r.minY+r.height/2},{x:a.minX,y:a.minY+a.height/2}]}),r.minY>a.maxY&&s.push({box1:r,box2:a,distance:r.minY-a.maxY,points:[{x:r.minX+r.width/2,y:r.minY},{x:r.minX+r.width/2,y:a.maxY},{x:a.minX+a.width/2,y:a.maxY}]}),r.maxY<a.minY&&s.push({box1:r,box2:a,distance:a.minY-r.maxY,points:[{x:r.minX+r.width/2,y:r.maxY},{x:r.minX+r.width/2,y:a.minY},{x:a.minX+a.width/2,y:a.minY}]}),r.minX>=a.minX&&r.maxX<=a.maxX&&r.minY>=a.minY&&r.maxY<=a.maxY&&(s.push({distance:r.minX-a.minX,box1:r,box2:a,points:[{x:r.minX,y:r.minY+r.height/2},{x:a.minX,y:r.minY+r.height/2},{x:a.minX,y:a.minY+a.height/2}]}),s.push({distance:a.maxX-r.maxX,box1:r,box2:a,points:[{x:r.maxX,y:r.minY+r.height/2},{x:a.maxX,y:r.minY+r.height/2},{x:a.maxX,y:a.minY+a.height/2}]}),s.push({box1:r,box2:a,distance:r.minY-a.minY,points:[{x:r.minX+r.width/2,y:r.minY},{x:r.minX+r.width/2,y:a.minY},{x:a.minX+a.width/2,y:a.minY}]}),s.push({box1:r,box2:a,distance:a.maxY-r.maxY,points:[{x:r.minX+r.width/2,y:r.maxY},{x:r.minX+r.width/2,y:a.maxY},{x:a.minX+a.width/2,y:a.maxY}]})),JSON.stringify(z)!==JSON.stringify(s)&&N(s)},onDragStart:t=>{var n;const i=t.target.findAncestor(".element",!0);if(i){const l=e.getElementById(null==i?void 0:i.id()),r=null==l?void 0:l.top,o=null==r?void 0:r.id;!(e.selectedElementsIds.indexOf(o)>=0)&&o&&(e.selectElements([o]),t.target.stopDrag(),t.target.startDrag(t),null===(n=_.current)||void 0===n||n.startDrag(t))}z&&N(null)},pageId:t.id,style:{position:"absolute",overflow:"hidden",top:0,left:0}},n.default.createElement(r.Layer,null,n.default.createElement(S,{width:o,height:s,fill:u}),n.default.createElement(r.Group,{x:D,y:B,scaleX:e.scale,scaleY:e.scale,name:"page-container"},n.default.createElement(r.Group,{name:"page-container-2"},n.default.createElement(r.Group,{name:"page-background-group",x:k,y:k},n.default.createElement(A,{x:-t.bleed,y:-t.bleed,width:t.computedWidth+2*t.bleed,height:t.computedHeight+2*t.bleed,background:t.background,name:"page-background",preventDefault:!1,scale:e.scale})),n.default.createElement(r.Group,{x:k,y:k,name:"elements-container",listening:!e.isPlaying},n.default.createElement(r.Rect,{name:"elements-area",width:t.computedWidth,height:t.computedHeight,listening:!1}),n.default.createElement(T,{elements:t.children,store:e})),n.default.createElement(r.Rect,{stroke:y,name:"bleed",strokeWidth:t.bleed,x:t.bleed/2,y:t.bleed/2,width:t.computedWidth+t.bleed,height:t.computedHeight+t.bleed,listening:!1,visible:t.bleed>0&&e.bleedVisible,hideInExport:!0}),(0,m.___)()===I&&n.default.createElement(j,{name:"hit-detection",x:-se/2-de,y:-se/2-de,width:R+se+2*de,height:M+se+2*de}))),n.default.createElement(r.Line,{name:"workspace-background",points:[0,0,o,0,o,s,0,s,0,0,D,B,D,s-B,o-D,s-B,o-D,B,D,B],listening:!1,closed:!0,fill:u}),n.default.createElement(r.Group,{x:D,y:B,scaleX:e.scale,scaleY:e.scale},n.default.createElement(r.Rect,{name:"page-highlight",hideInExport:!0,x:-se/2-de,y:-se/2-de,width:R+se+2*de,height:M+se+2*de,stroke:le&&e.pages.length>1?b:x,strokeWidth:2,listening:!1,strokeScaleEnabled:!1})),n.default.createElement(r.Group,{x:D+k*e.scale,y:B+k*e.scale,scaleX:e.scale,scaleY:e.scale,name:"page-abs-container"},n.default.createElement(r.Transformer,{ref:_,onDragStart:n=>{var i;(null===(i=n.evt)||void 0===i?void 0:i.altKey)&&w&&e.selectedElements.forEach((e=>{const n=e.clone({},{skipSelect:!0}),i=t.children.indexOf(e);t.setElementZIndex(n.id,i)})),e.history.startTransaction()},onDragEnd:()=>{e.history.endTransaction()},onTransformStart:()=>{e.history.startTransaction()},boundBoxFunc:(e,t)=>{const n=Math.abs(t.width)<1||Math.abs(t.height)<1,i=Math.abs(e.width)<1||Math.abs(e.height)<1;return n&&!i?e:t},onTransform:e=>{var t,n;const i=_.current.nodes(),l=i[i.length-1];if(e.target!==l){return}const r=null===(t=_.current)||void 0===t?void 0:t.__getNodeRect(),o=null===(n=_.current)||void 0===n?void 0:n.getActiveAnchor();F({anchor:o,x:r.x,y:r.y,rotation:r.rotation,width:r.width,height:r.height})},onTransformEnd:t=>{F({}),e.history.endTransaction()},visible:!e.isPlaying}),z&&z.map((({points:t,distance:i,box1:l,box2:o},a)=>n.default.createElement(r.Group,{name:"distances-container",hideInExport:!0,key:a,listening:!1},n.default.createElement(r.Rect,Object.assign({},l,{stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1})),n.default.createElement(r.Rect,Object.assign({},o,{stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1})),n.default.createElement(r.Line,{points:[t[0].x,t[0].y,t[1].x,t[1].y],stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1}),n.default.createElement(r.Line,{points:[t[1].x,t[1].y,t[2].x,t[2].y],stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1}),n.default.createElement(r.Label,{x:(t[0].x+t[1].x)/2,y:(t[0].y+t[1].y)/2,offsetY:-10,scaleX:1/e.scale,scaleY:1/e.scale},n.default.createElement(r.Tag,{cornerRadius:5,fill:"rgb(0, 161, 255)",pointerDirection:"down"}),n.default.createElement(r.Text,{align:"center",verticalAlign:"middle",fill:"white",padding:5,text:(0,h.pxToUnitString)({unit:e.unit,dpi:e.dpi,px:i})}))))),t._rendering&&n.default.createElement(r.Group,null,n.default.createElement(r.Rect,{width:R,height:M,fill:"rgba(255,255,255,0.9)"}),n.default.createElement(r.Text,{text:"Rendering...",fontSize:60,width:R,height:M,align:"center",verticalAlign:"middle"})),oe&&n.default.createElement(oe,{components:E,store:e,page:t,stageRef:q}),ae&&n.default.createElement(v.Html,null,n.default.createElement(ae,Object.assign({components:E,store:e},H.props)))),n.default.createElement(O,Object.assign({},U,{store:e})),n.default.createElement(L,{selection:$}),(0,m.isCreditVisible)()&&n.default.createElement(r.Text,{text:"Powered by polotno.com",fontSize:14,fill:"rgba(0,0,0,0.6)",x:o-170,y:s-18,onMouseEnter:e=>{e.target.getStage().container().style.cursor="pointer"},onMouseLeave:e=>{e.target.getStage().container().style.cursor=""},onTouchStart:e=>{e.cancelBubble=!0},onMouseDown:e=>{e.cancelBubble=!0},onClick:()=>{window.open("https://polotno.com")},onTap:()=>{window.open("https://polotno.com")}}),n.default.createElement(r.Group,{name:"line-guides"}))),W&&re&&n.default.createElement(re,{store:e,page:t,xPadding:D,yPadding:B}))}));
1
+ var e=this&&this.__rest||function(e,t){var n={};for(var i in e){Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i])}if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var l=0;for(i=Object.getOwnPropertySymbols(e);l<i.length;l++){t.indexOf(i[l])<0&&Object.prototype.propertyIsEnumerable.call(e,i[l])&&(n[i[l]]=e[i[l]])}}return n},t=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.registerNextDomDrop=exports.useContextMenu=exports.setTransformerStyle=void 0,exports.registerTransformerAttrs=function(e,t){X[e]=X[e]||t,Object.assign(X[e],t)};const n=t(require("react")),i=require("mobx-react-lite"),l=require("mobx"),r=require("react-konva"),o=t(require("use-image")),a=t(require("konva")),s=t(require("./element")),d=require("./use-transformer-snap"),c=require("./image-element"),u=require("../utils/crop"),m=require("../utils/validate-key"),g=require("../utils/math"),h=require("../utils/unit"),f=require("../utils/flags"),p=require("../utils/screen"),x=require("./use-color"),b=require("../utils/gradient"),v=require("react-konva-utils"),E=a.default.DD._drag;window.removeEventListener("mousemove",E),a.default.DD._drag=function(e){(0,l.runInAction)((()=>{E.call(this,e)}))},window.addEventListener("mousemove",a.default.DD._drag);const y=new a.default.Group,w=20;y.add(new a.default.Rect({width:w,height:w,fill:"white"})),y.add(new a.default.Path({scaleX:w/24,scaleY:w/24,data:"M4.98313549,11.0001422 C5.49589839,10.9914935 5.92501998,11.3703506 5.99116425,11.8666444 L5.99985778,11.9831355 L6.00348884,12.2068855 C6.11245031,15.4321748 8.76323537,17.9999971 11.9999971,17.9999971 C12.1869612,17.9999971 12.3726725,17.9914753 12.5567465,17.9745765 L12.2928932,17.7071068 C11.9023689,17.3165825 11.9023689,16.6834175 12.2928932,16.2928932 C12.6834175,15.9023689 13.3165825,15.9023689 13.7071068,16.2928932 L15.7071068,18.2928932 C16.0976311,18.6834175 16.0976311,19.3165825 15.7071068,19.7071068 L13.7071068,21.7071068 C13.3165825,22.0976311 12.6834175,22.0976311 12.2928932,21.7071068 C11.9023689,21.3165825 11.9023689,20.6834175 12.2928932,20.2928932 L12.6111505,19.9769552 C12.4086045,19.9922816 12.2047796,19.9999971 11.9999971,19.9999971 C7.7687005,19.9999971 4.28886152,16.7094374 4.01666425,12.5105203 L4.00420123,12.2575143 L4.00014222,12.0168645 C3.9908282,11.4646583 4.43092928,11.0094562 4.98313549,11.0001422 Z M11.7071068,2.29289322 C12.0675907,2.65337718 12.0953203,3.22060824 11.7902954,3.61289944 L11.7071068,3.70710678 L11.3891629,4.0230186 C11.5916051,4.00770767 11.7953244,4 12,4 C16.418278,4 20,7.581722 20,12 C20,12.5522847 19.5522847,13 19,13 C18.4477153,13 18,12.5522847 18,12 C18,8.6862915 15.3137085,6 12,6 C11.8129339,6 11.6271216,6.00853145 11.4429483,6.02544919 L11.7071068,6.29289322 C12.0976311,6.68341751 12.0976311,7.31658249 11.7071068,7.70710678 C11.3466228,8.06759074 10.7793918,8.09532028 10.3871006,7.79029539 L10.2928932,7.70710678 L8.29289322,5.70710678 C7.93240926,5.34662282 7.90467972,4.77939176 8.20970461,4.38710056 L8.29289322,4.29289322 L10.2928932,2.29289322 C10.6834175,1.90236893 11.3165825,1.90236893 11.7071068,2.29289322 Z",fill:"black"}));const C=y.toCanvas({pixelRatio:2,width:w,height:w}),Y={enabledAnchors:["top-left","top-center","top-right","middle-left","bottom-left","bottom-right","bottom-center","middle-right"],borderEnabled:!0,rotateEnabled:!0,rotationSnaps:[0,45,90,135,180,225,270,315],ignoreStroke:!0,flipEnabled:!1,anchorStrokeWidth:2,borderStrokeWidth:2,rotateAnchorOffset:30,anchorStyleFunc:e=>{if(e.hasName("rotater")){const t=20;e.setAttrs({width:t,height:t,cornerRadius:t/2,offsetX:t/2,offsetY:t/2,fillPatternImage:C,fillPatternScaleX:t/w/2,fillPatternScaleY:t/w/2,fillPriority:"pattern",fillPatternRepeat:"no-repeat"})}}};exports.setTransformerStyle=e=>{Object.assign(Y,e)};const X={text:{enabledAnchors:["top-left","top-right","middle-left","bottom-left","bottom-right","middle-right"]},svg:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]},gif:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]},line:{enabledAnchors:[],borderEnabled:!1,rotateEnabled:!1},image:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]},many:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]},group:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]}},S=e=>n.default.createElement(r.Rect,Object.assign({},e,{preventDefault:!1})),k=t=>{var{url:i}=t,l=e(t,["url"]);const[a,s]=(0,o.default)(i,"anonymous"),d=a?(0,u.getCrop)(a,{width:l.width,height:l.height},"center-middle"):{};return(0,c.useImageLoader)(s,i,"page background"),n.default.createElement(r.Image,Object.assign({image:a},l,d))},R=e=>{const t=(0,x.useColor)({fill:e.fill,a:{width:e.width,height:e.height}});return n.default.createElement(r.Rect,Object.assign({},e,t))},A=t=>{const{background:i,scale:l,borderColor:o}=t,s=e(t,["background","scale","borderColor"]),d=n.default.useMemo((()=>!!a.default.Util.colorToRGBA(i)||(0,b.isGradient)(i)),[i]),c=n.default.useMemo((()=>{const e=document.createElement("canvas"),t=30;e.width=60,e.height=60;const n=e.getContext("2d");return n&&(n.fillStyle="black",n.fillRect(t,0,t,t),n.fillRect(0,t,t,t)),e}),[]);return n.default.createElement(n.default.Fragment,null,n.default.createElement(r.Rect,Object.assign({fillPatternImage:c},s,{opacity:.1,hideInExport:!0})),d?n.default.createElement(R,Object.assign({fill:i},s)):n.default.createElement(k,Object.assign({url:i},s)))},L=(0,i.observer)((({selection:e})=>e.visible?n.default.createElement(r.Rect,{name:"selection",x:Math.min(e.x1,e.x2),y:Math.min(e.y1,e.y2),width:Math.abs(e.x1-e.x2),height:Math.abs(e.y1-e.y2),fill:"rgba(0, 161, 255, 0.3)"}):null)),O=(0,i.observer)((({x:e,y:t,width:i,height:l,rotation:o,anchor:s,store:d})=>{const c=(0,g.getClientRect)({x:e,y:t,width:i,height:l,rotation:a.default.Util.radToDeg(o)});if(void 0===s){return null}const u=(l/2+70)*Math.cos(o-Math.PI/2),m=(l/2+70)*Math.sin(o-Math.PI/2),f=(0,h.pxToUnitRounded)({unit:d.unit,dpi:d.dpi,px:i/d.scale,precious:"px"===d.unit?0:1})+" x "+(0,h.pxToUnitRounded)({unit:d.unit,dpi:d.dpi,px:l/d.scale,precious:"px"===d.unit?0:1})+("px"===d.unit?"":" "+d.unit);return n.default.createElement(n.default.Fragment,null,n.default.createElement(r.Label,{x:(c.minX+c.maxX)/2+u,y:(c.minY+c.maxY)/2+m,offsetX:14,offsetY:14,visible:"rotater"===s},n.default.createElement(r.Tag,{cornerRadius:5,fill:"rgb(0, 161, 255)"}),n.default.createElement(r.Text,{align:"center",verticalAlign:"middle",fill:"white",padding:8,text:Math.round(a.default.Util.radToDeg(o)).toString()+"°"})),n.default.createElement(r.Label,{x:(c.minX+c.maxX)/2,y:c.maxY+20,visible:"rotater"!==s},n.default.createElement(r.Tag,{cornerRadius:5,fill:"rgb(0, 161, 255)",pointerDirection:"up",pointerHeight:0,pointerWidth:0}),n.default.createElement(r.Text,{align:"center",verticalAlign:"middle",fill:"white",padding:8,text:f})))})),T=(0,i.observer)((({elements:e,store:t})=>{const i=e.filter((e=>e.alwaysOnTop)),l=e.filter((e=>!e.alwaysOnTop)).concat(i);return n.default.createElement(n.default.Fragment,null,l.map((e=>n.default.createElement(s.default,{key:e.id,store:t,element:e,onClick:()=>{console.warn("Polotno warning: onClick callback is deprecated. Just stop using it. Polotno will do selection automatically.")}}))))}));exports.useContextMenu=({store:e})=>{const[t,i]=n.default.useState(!1),[l,r]=n.default.useState({x:0,y:0}),o=n.default.useCallback((e=>{i(!0),r(e)}),[]);return{open:o,close:n.default.useCallback((()=>{i(!1)}),[]),props:{isOpen:t,offset:l,setIsOpen:i}}};let P=null;exports.registerNextDomDrop=e=>{P=e};const M=atob("UG9sb3RubyBmcmVlIGxpY2Vuc2UgbGltaXRhdGlvbiBleGNlZWRlZCAtIFBsZWFzZSB1cGdyYWRlIHlvdXIgYWNjb3VudC4="),D=atob("cmVk"),I=atob("djAuOS4y"),j=e=>n.default.createElement(n.default.Fragment,null,n.default.createElement(r.Label,{fill:D,height:200},n.default.createElement(r.Tag,{fill:D}),n.default.createElement(r.Text,Object.assign({},e,{fill:"white",text:M,height:void 0,padding:10,fontSize:20}))));exports.default=(0,i.observer)((({store:e,page:t,width:o,height:s,pageControlsEnabled:c,backColor:u,pageBorderColor:x,activePageBorderColor:b,components:E,bleedColor:y,altCloneEnabled:w,viewportSize:C})=>{const k=e.bleedVisible?t.bleed:0,R=t.computedWidth+2*k,M=t.computedHeight+2*k,D=(o-R*e.scale)/2,B=(s-M*e.scale)/2,_=n.default.useRef(null),q=n.default.useRef(null),G=n.default.useRef(null),W=null==c||c,[z,N]=n.default.useState(null),[U,F]=n.default.useState({}),H=(0,exports.useContextMenu)({store:e}),V=e.selectedElements.find((e=>e._cropModeEnabled)),Z=e.selectedShapes.filter((e=>!e.resizable)).length>0,K=e.selectedShapes.filter((e=>!e.draggable)).length>0,J=e.selectedElements.filter((e=>!e.visible)).length>0;n.default.useLayoutEffect((()=>{var t,n,i;if(!_.current){return}const l=_.current.getStage(),r=e.selectedShapes.map((e=>e._cropModeEnabled?null:l.findOne("#"+e.id))).filter((e=>e)),o=1===e.selectedElements.length&&(null===(t=e.selectedElements[0])||void 0===t?void 0:t.type)||"many";X[o]?(_.current.setAttrs(Object.assign(Object.assign({},Y),X[o])),"svg"!==o&&"image"!==o&&"gif"!==o||e.selectedElements[0].keepRatio||_.current.setAttrs({enabledAnchors:Y.enabledAnchors}),"text"===o&&f.flags.textVerticalResizeEnabled&&_.current.setAttrs({enabledAnchors:null===(n=X.text.enabledAnchors)||void 0===n?void 0:n.concat(["bottom-center"])})):_.current.setAttrs(Y),Z&&_.current.enabledAnchors([]),K&&_.current.rotateEnabled(!1),r.find((e=>null==e?void 0:e.isDragging()))&&r.forEach((e=>{e.isDragging()||null==e||e.startDrag()})),_.current.nodes(r),null===(i=_.current.getLayer())||void 0===i||i.batchDraw()}),[e.selectedShapes,V,Z,J,K]);const $=(0,i.useLocalObservable)((()=>({visible:!1,x1:0,y1:0,x2:0,y2:0}))),Q=n.default.useRef(!1),ee=(0,p.isTouchDevice)(),te=(0,l.action)((e=>{var t,n,i,l;if(ee){return}Q.current=!1;const r=e.target.findAncestor(".elements-container"),o=e.target.findAncestor("Transformer"),a=e.target.findAncestor(".page-abs-container");if(r||o||a){return}const s=null===(t=e.target.getStage())||void 0===t?void 0:t.getPointerPosition();s.x-=null===(n=e.target.getStage())||void 0===n?void 0:n.x(),s.y-=null===(i=e.target.getStage())||void 0===i?void 0:i.y(),s&&($.visible=!0,$.x1=s.x,$.y1=s.y,$.x2=s.x,$.y2=s.y,(null===(l=e.target.getStage())||void 0===l?void 0:l.getPointersPositions().length)>=2&&($.visible=!1))}));(({stageRef:e,containerRef:t,viewportSize:i})=>{n.default.useEffect((()=>{var n;const i=null===(n=t.current)||void 0===n?void 0:n.closest(".polotno-workspace-inner");function l(){var n;if(!e.current){return}const l=null===(n=t.current)||void 0===n?void 0:n.getBoundingClientRect(),r=null==i?void 0:i.getBoundingClientRect(),o=Math.max(0,r.left-l.left-100),a=Math.max(0,r.top-l.top-100);e.current.position({x:-o,y:-a}),e.current.container().style.transform=`translate(${o}px, ${a}px)`}return l(),i.addEventListener("scroll",l),()=>{i.removeEventListener("scroll",l)}}),[i.width,i.height])})({stageRef:q,containerRef:G,viewportSize:C}),n.default.useEffect((()=>{const t=(0,l.action)((e=>{var t,n,i,l;if(!$.visible){return}null===(t=q.current)||void 0===t||t.setPointersPositions(e);let r=null===(n=q.current)||void 0===n?void 0:n.getPointerPosition();r?(r.x-=null===(i=q.current)||void 0===i?void 0:i.x(),r.y-=null===(l=q.current)||void 0===l?void 0:l.y()):r={x:$.x2,y:$.y2},$.x2=r.x,$.y2=r.y})),n=(0,l.action)((()=>{if(!$.visible){return}if(!q.current){return}const t=q.current.findOne(".selection"),n=t?t.getClientRect():{width:0,height:0,x:0,y:0};if(n.width&&n.height){const t=[];q.current.find(".element").forEach((i=>{const l=i.getClientRect(),r=e.getElementById(i.id()),o=null==r?void 0:r.draggable,s=null==r?void 0:r.selectable;a.default.Util.haveIntersection(n,l)&&o&&s&&t.push(r.top.id)}));const i=[...new Set(t)];e.selectElements(i)}$.visible=!1,Q.current=!0}));return window.addEventListener("mousemove",t),window.addEventListener("touchmove",t),window.addEventListener("mouseup",n),window.addEventListener("touchend",n),()=>{window.removeEventListener("mousemove",t),window.removeEventListener("touchmove",t),window.removeEventListener("mouseup",n),window.removeEventListener("touchend",n)}}),[]);const ne=n.default.useRef(!1);n.default.useEffect((()=>{var e;let t;const n=null===(e=G.current)||void 0===e?void 0:e.closest(".polotno-workspace-inner"),i=()=>{ne.current=!0,clearTimeout(t),t=setTimeout((()=>{ne.current=!1}),300)};return n.addEventListener("scroll",i),()=>{clearTimeout(t),n.removeEventListener("scroll",i)}}),[]);const ie=n=>{if(e.activePage!==t&&t.select(),ne.current){return}if(Q.current){return}const i=n.evt.ctrlKey||n.evt.metaKey||n.evt.shiftKey,l=n.target.findAncestor(".elements-container"),r=n.target.findAncestor(".page-abs-container"),o=n.target.findAncestor("Transformer");if(!(i||l||o||r)){return void e.selectElements([])}const a=n.target.findAncestor(".element",!0),s=e.getElementById(null==a?void 0:a.id()),d=null==s?void 0:s.top,c=null==d?void 0:d.id,u=e.selectedElementsIds.indexOf(c)>=0;c&&i&&!u?e.selectElements(e.selectedElementsIds.concat([c])):c&&i&&u?e.selectElements(e.selectedElementsIds.filter((e=>e!==c))):!c||i||u||e.selectElements([c])};(0,d.useSnap)(_,e);const le=e.activePage===t,re=null==E?void 0:E.PageControls,oe=null==E?void 0:E.Tooltip,ae=null==E?void 0:E.ContextMenu,se=1/e.scale,de=0/e.scale;return n.default.createElement("div",{ref:G,onDragOver:e=>e.preventDefault(),onDrop:n=>{if(n.preventDefault(),!q.current){return}q.current.setPointersPositions(n);const i=q.current.findOne(".elements-container").getRelativePointerPosition(),l=q.current.getPointerPosition(),r=q.current.getAllIntersections(l).map((e=>e.findAncestor(".element",!0))).filter(Boolean),o=[...new Set(r.reverse())].map((t=>e.getElementById(t.id()))),a=o[0];P&&(P(i,a,{elements:o,page:t}),P=null)},style:{position:"relative",width:o+"px",height:s+"px",overflow:"hidden"},className:"polotno-page-container"+(le?" active-page":"")},n.default.createElement(r.Stage,{ref:q,width:Math.min(o,C.width+200),height:Math.min(C.height+200,s),onClick:ie,onTap:ie,onContextMenu:t=>{t.evt.preventDefault();const n=t.target.findAncestor(".element",!0),i=e.getElementById(null==n?void 0:n.id()),l=null==i?void 0:i.top,r=null==l?void 0:l.id;r?e.selectedElementsIds.indexOf(r)>=0||e.selectElements([r]):e.selectElements([]),H.open({x:t.evt.clientX,y:t.evt.clientY})},onMouseDown:te,onMouseMove:n=>{if(!n.evt.altKey&&z){return void N(null)}if(!n.evt.altKey){return}const i=n.target.findAncestor(".element",!0),l=null==i?void 0:i.id();if(!e.selectedElements[0]){return}if(e.selectedElementsIds.includes(l)){return}const r=(0,g.getTotalClientRect)(e.selectedShapes),o=l?e.getElementById(l):{x:0,y:0,width:t.computedWidth,height:t.computedHeight,rotation:0},a=(0,g.getClientRect)(o),s=[];r.minX>a.maxX&&s.push({distance:r.minX-a.maxX,box1:r,box2:a,points:[{x:r.minX,y:r.minY+r.height/2},{x:a.maxX,y:r.minY+r.height/2},{x:a.maxX,y:a.minY+a.height/2}]}),r.maxX<a.minX&&s.push({distance:a.minX-r.maxX,box1:r,box2:a,points:[{x:r.maxX,y:r.minY+r.height/2},{x:a.minX,y:r.minY+r.height/2},{x:a.minX,y:a.minY+a.height/2}]}),r.minY>a.maxY&&s.push({box1:r,box2:a,distance:r.minY-a.maxY,points:[{x:r.minX+r.width/2,y:r.minY},{x:r.minX+r.width/2,y:a.maxY},{x:a.minX+a.width/2,y:a.maxY}]}),r.maxY<a.minY&&s.push({box1:r,box2:a,distance:a.minY-r.maxY,points:[{x:r.minX+r.width/2,y:r.maxY},{x:r.minX+r.width/2,y:a.minY},{x:a.minX+a.width/2,y:a.minY}]}),r.minX>=a.minX&&r.maxX<=a.maxX&&r.minY>=a.minY&&r.maxY<=a.maxY&&(s.push({distance:r.minX-a.minX,box1:r,box2:a,points:[{x:r.minX,y:r.minY+r.height/2},{x:a.minX,y:r.minY+r.height/2},{x:a.minX,y:a.minY+a.height/2}]}),s.push({distance:a.maxX-r.maxX,box1:r,box2:a,points:[{x:r.maxX,y:r.minY+r.height/2},{x:a.maxX,y:r.minY+r.height/2},{x:a.maxX,y:a.minY+a.height/2}]}),s.push({box1:r,box2:a,distance:r.minY-a.minY,points:[{x:r.minX+r.width/2,y:r.minY},{x:r.minX+r.width/2,y:a.minY},{x:a.minX+a.width/2,y:a.minY}]}),s.push({box1:r,box2:a,distance:a.maxY-r.maxY,points:[{x:r.minX+r.width/2,y:r.maxY},{x:r.minX+r.width/2,y:a.maxY},{x:a.minX+a.width/2,y:a.maxY}]})),JSON.stringify(z)!==JSON.stringify(s)&&N(s)},onDragStart:t=>{var n;const i=t.target.findAncestor(".element",!0);if(i){const l=e.getElementById(null==i?void 0:i.id()),r=null==l?void 0:l.top,o=null==r?void 0:r.id;!(e.selectedElementsIds.indexOf(o)>=0)&&o&&(e.selectElements([o]),t.target.stopDrag(),t.target.startDrag(t),null===(n=_.current)||void 0===n||n.startDrag(t))}z&&N(null)},pageId:t.id,style:{position:"absolute",overflow:"hidden",top:0,left:0}},n.default.createElement(r.Layer,null,n.default.createElement(S,{width:o,height:s,fill:u}),n.default.createElement(r.Group,{x:D,y:B,scaleX:e.scale,scaleY:e.scale,name:"page-container"},n.default.createElement(r.Group,{name:"page-container-2"},n.default.createElement(r.Group,{name:"page-background-group",x:k,y:k},n.default.createElement(A,{x:-t.bleed,y:-t.bleed,width:t.computedWidth+2*t.bleed,height:t.computedHeight+2*t.bleed,background:t.background,name:"page-background",preventDefault:!1,scale:e.scale})),n.default.createElement(r.Group,{x:k,y:k,name:"elements-container",listening:!e.isPlaying},n.default.createElement(r.Rect,{name:"elements-area",width:t.computedWidth,height:t.computedHeight,listening:!1}),n.default.createElement(T,{elements:t.children,store:e})),n.default.createElement(r.Rect,{stroke:y,name:"bleed",strokeWidth:t.bleed,x:t.bleed/2,y:t.bleed/2,width:t.computedWidth+t.bleed,height:t.computedHeight+t.bleed,listening:!1,visible:t.bleed>0&&e.bleedVisible,hideInExport:!0}),(0,m.___)()===I&&n.default.createElement(j,{name:"hit-detection",x:-se/2-de,y:-se/2-de,width:R+se+2*de,height:M+se+2*de}))),n.default.createElement(r.Line,{name:"workspace-background",points:[0,0,o,0,o,s,0,s,0,0,D,B,D,s-B,o-D,s-B,o-D,B,D,B],listening:!1,closed:!0,fill:u}),n.default.createElement(r.Group,{x:D,y:B,scaleX:e.scale,scaleY:e.scale},n.default.createElement(r.Rect,{name:"page-highlight",hideInExport:!0,x:-se/2-de,y:-se/2-de,width:R+se+2*de,height:M+se+2*de,stroke:le&&e.pages.length>1?b:x,strokeWidth:2,listening:!1,strokeScaleEnabled:!1})),n.default.createElement(r.Group,{x:D+k*e.scale,y:B+k*e.scale,scaleX:e.scale,scaleY:e.scale,name:"page-abs-container"},n.default.createElement(r.Transformer,{ref:_,onDragStart:n=>{var i;(null===(i=n.evt)||void 0===i?void 0:i.altKey)&&w&&e.selectedElements.forEach((e=>{const n=e.clone({},{skipSelect:!0}),i=t.children.indexOf(e);t.setElementZIndex(n.id,i)})),e.history.startTransaction()},onDragEnd:()=>{e.history.endTransaction()},onTransformStart:()=>{e.history.startTransaction()},boundBoxFunc:(e,t)=>{const n=Math.abs(t.width)<1||Math.abs(t.height)<1,i=Math.abs(e.width)<1||Math.abs(e.height)<1;return n&&!i?e:t},onTransform:e=>{var t,n;const i=_.current.nodes(),l=i[i.length-1];if(e.target!==l){return}const r=null===(t=_.current)||void 0===t?void 0:t.__getNodeRect(),o=null===(n=_.current)||void 0===n?void 0:n.getActiveAnchor();F({anchor:o,x:r.x,y:r.y,rotation:r.rotation,width:r.width,height:r.height})},onTransformEnd:t=>{F({}),e.history.endTransaction()},visible:!e.isPlaying}),z&&z.map((({points:t,distance:i,box1:l,box2:o},a)=>n.default.createElement(r.Group,{name:"distances-container",hideInExport:!0,key:a,listening:!1},n.default.createElement(r.Rect,Object.assign({},l,{stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1})),n.default.createElement(r.Rect,Object.assign({},o,{stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1})),n.default.createElement(r.Line,{points:[t[0].x,t[0].y,t[1].x,t[1].y],stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1}),n.default.createElement(r.Line,{points:[t[1].x,t[1].y,t[2].x,t[2].y],stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1}),n.default.createElement(r.Label,{x:(t[0].x+t[1].x)/2,y:(t[0].y+t[1].y)/2,offsetY:-10,scaleX:1/e.scale,scaleY:1/e.scale},n.default.createElement(r.Tag,{cornerRadius:5,fill:"rgb(0, 161, 255)",pointerDirection:"down"}),n.default.createElement(r.Text,{align:"center",verticalAlign:"middle",fill:"white",padding:5,text:(0,h.pxToUnitString)({unit:e.unit,dpi:e.dpi,px:i})}))))),t._rendering&&n.default.createElement(r.Group,null,n.default.createElement(r.Rect,{width:R,height:M,fill:"rgba(255,255,255,0.9)"}),n.default.createElement(r.Text,{text:"Rendering...",fontSize:60,width:R,height:M,align:"center",verticalAlign:"middle"})),oe&&n.default.createElement(oe,{components:E,store:e,page:t,stageRef:q}),ae&&n.default.createElement(v.Html,null,n.default.createElement(ae,Object.assign({components:E,store:e},H.props)))),n.default.createElement(O,Object.assign({},U,{store:e})),n.default.createElement(L,{selection:$}),(0,m.isCreditVisible)()&&n.default.createElement(r.Text,{text:"Powered by polotno.com",fontSize:14,fill:"rgba(0,0,0,0.6)",x:o-170,y:s-18,onMouseEnter:e=>{e.target.getStage().container().style.cursor="pointer"},onMouseLeave:e=>{e.target.getStage().container().style.cursor=""},onTouchStart:e=>{e.cancelBubble=!0},onMouseDown:e=>{e.cancelBubble=!0},onClick:()=>{window.open("https://polotno.com")},onTap:()=>{window.open("https://polotno.com")}}),n.default.createElement(r.Group,{name:"line-guides"}))),W&&re&&n.default.createElement(re,{store:e,page:t,xPadding:D,yPadding:B}))}));
package/canvas/video-element.js CHANGED
@@ -1 +1 @@
1
- var e,t=this&&this.__createBinding||(Object.create?function(e,t,r,a){void 0===a&&(a=r);var n=Object.getOwnPropertyDescriptor(t,r);n&&!("get"in n?!t.__esModule:n.writable||n.configurable)||(n={enumerable:!0,get:function(){return t[r]}}),Object.defineProperty(e,a,n)}:function(e,t,r,a){void 0===a&&(a=r),e[a]=t[r]}),r=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),a=this&&this.__importStar||(e=function(t){return e=Object.getOwnPropertyNames||function(e){var t=[];for(var r in e){Object.prototype.hasOwnProperty.call(e,r)&&(t[t.length]=r)}return t},e(t)},function(a){if(a&&a.__esModule){return a}var n={};if(null!=a){for(var i=e(a),o=0;o<i.length;o++){"default"!==i[o]&&t(n,a,i[o])}}return r(n,a),n}),n=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.VideoElement=exports.useLoader=exports.setVideoLoaderHook=exports.useCornerRadiusAndCrop=void 0;const i=n(require("react")),o=require("mobx-react-lite"),d=require("mobx"),h=require("react-konva"),l=n(require("use-image")),u=n(require("konva")),c=require("react-konva-utils"),s=require("./highlighter"),g=require("../utils/loader"),f=a(require("../utils/svg")),p=require("../utils/flags"),m=require("./apply-filters"),w=require("./use-fadein"),v=require("../utils/screen");function x(){return document.createElement("canvas")}const y=new window.Image;y.src=f.svgToURL('\n <svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n <path opacity="0.6" d="M4 5.49683V18.5032C4 20.05 5.68077 21.0113 7.01404 20.227L18.0694 13.7239C19.384 12.9506 19.384 11.0494 18.0694 10.2761L7.01404 3.77296C5.68077 2.98869 4 3.95 4 5.49683Z" fill="white"/>\n <path d="M4 5.49683V18.5032C4 20.05 5.68077 21.0113 7.01404 20.227L18.0694 13.7239C19.384 12.9506 19.384 11.0494 18.0694 10.2761L7.01404 3.77296C5.68077 2.98869 4 3.95 4 5.49683Z" stroke="#323232" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>\n </svg>\n');const M=new window.Image;M.src=f.svgToURL('\n <svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n <path opacity="0.6" d="M14 19L14 5C14 3.89543 14.8954 3 16 3L17 3C18.1046 3 19 3.89543 19 5L19 19C19 20.1046 18.1046 21 17 21L16 21C14.8954 21 14 20.1046 14 19Z" fill="white"/>\n <path opacity="0.6" d="M10 19L10 5C10 3.89543 9.10457 3 8 3L7 3C5.89543 3 5 3.89543 5 5L5 19C5 20.1046 5.89543 21 7 21L8 21C9.10457 21 10 20.1046 10 19Z" fill="white"/>\n <path d="M14 19L14 5C14 3.89543 14.8954 3 16 3L17 3C18.1046 3 19 3.89543 19 5L19 19C19 20.1046 18.1046 21 17 21L16 21C14.8954 21 14 20.1046 14 19Z" stroke="#323232" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>\n <path d="M10 19L10 5C10 3.89543 9.10457 3 8 3L7 3C5.89543 3 5 3.89543 5 5L5 19C5 20.1046 5.89543 21 7 21L8 21C9.10457 21 10 20.1046 10 19Z" stroke="#323232" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>\n </svg>\n'),exports.useCornerRadiusAndCrop=(e,t,r,a,n=0,o=!1)=>{const d=Math.floor(Math.max(e.width*a,1)),h=Math.floor(Math.max(e.height*a,1)),l=Math.min(n*a,d/2,h/2),c=Math.max(e.width/r.width,e.height/r.height)*a,s=e.page._exportingOrRendering&&p.flags.imageDownScalingEnabled&&c<1&&!o,g=0===r.x&&0===r.y&&r.width===(null==t?void 0:t.width)&&r.height===(null==t?void 0:t.height),f=i.default.useMemo((()=>{if(t&&t.width&&t.height){return g&&0===l&&!s?void 0:x()}}),[t,l,s,g]),m=()=>{if(!f||!t){return}f.width=d,f.height=h;const e=f.getContext("2d");if(!e){return}l&&(e.beginPath(),e.moveTo(l,0),e.lineTo(d-l,0),e.arc(d-l,l,l,3*Math.PI/2,0,!1),e.lineTo(d,h-l),e.arc(d-l,h-l,l,0,Math.PI/2,!1),e.lineTo(l,h),e.arc(l,h-l,l,Math.PI/2,Math.PI,!1),e.lineTo(0,l),e.arc(l,l,l,Math.PI,3*Math.PI/2,!1),e.clip());const a=s?function(e,t){var r,a;const n=x();n.width=e.width,n.height=e.height,null===(r=n.getContext("2d"))||void 0===r||r.drawImage(e,0,0,n.width,n.height);const i=function(e,t,r,a,n,i,o){for(var d=new ImageData(t,r),h=new Int32Array(e.data.buffer),l=e.width,u=new Int32Array(d.data.buffer),c=d.width,s=t/i,g=r/o,f=Math.round(1/s),p=Math.round(1/g),m=f*p,w=0;w<d.height;w++){for(var v=0;v<c;v++){for(var x=0+Math.round(v/s)+(0+Math.round(w/g))*l,y=0,M=0,E=0,b=0,L=0;L<p;L++){for(var C=0;C<f;C++){var R=h[x+C+L*l];y+=R<<24>>>24,M+=R<<16>>>24,E+=R<<8>>>24,b+=R>>>24}}y=Math.round(y/m),M=Math.round(M/m),E=Math.round(E/m),b=Math.round(b/m),u[v+w*c]=b<<24|E<<16|M<<8|y}}return d}(n.getContext("2d").getImageData(0,0,n.width,n.height),Math.floor(n.width*t),Math.floor(n.height*t),0,0,n.width,n.height);return n.width=Math.floor(n.width*t),n.height=Math.floor(n.height*t),null===(a=n.getContext("2d"))||void 0===a||a.putImageData(i,0,0),n}(t,c):t,n=s?{x:Math.floor(r.x*c),y:Math.floor(r.y*c),width:Math.floor(r.width*c),height:Math.floor(r.height*c)}:r;e.drawImage(a,n.x,n.y,n.width,n.height,0,0,f.width,f.height)};return i.default.useLayoutEffect((()=>{m()}),[f,e.width,e.height,r.x,r.y,r.width,r.height,n,a,o,e.page._exportingOrRendering,s]),i.default.useEffect((()=>()=>{f&&"CANVAS"===f.nodeName&&u.default.Util.releaseCanvas(f)}),[f]),[f||t,m]};const E=x(),b=(0,o.observer)((({element:e})=>{const t=Math.min(30,e.width/4,e.height/4),r=i.default.useRef(null);return i.default.useEffect((()=>{const e=r.current;if(!e){return}const t=new u.default.Animation((t=>{e.rotate(((null==t?void 0:t.timeDiff)||0)/2)}),e.getLayer());return t.start(),()=>{t.stop()}})),i.default.createElement(h.Group,{x:e.a.x,y:e.a.y,rotation:e.a.rotation,listening:!1,opacity:e.a.opacity,hideInExport:!e.showInExport},i.default.createElement(h.Rect,{width:e.width,height:e.height,fill:"rgba(124, 173, 212, 0.8)"}),i.default.createElement(h.Arc,{ref:r,x:e.width/2,y:e.height/2,fill:"white",outerRadius:Math.abs(t),innerRadius:Math.max(1,t-5),angle:270}))})),L=(0,o.observer)((({element:e})=>{const t=Math.max(10,Math.min(30,e.width/25));return i.default.createElement(h.Group,{x:e.a.x,y:e.a.y,rotation:e.a.rotation,listening:!1,opacity:e.a.opacity,hideInExport:!e.showInExport},i.default.createElement(h.Rect,{width:e.width,height:e.height,fill:"rgba(223, 102, 102, 0.8)"}),i.default.createElement(h.Text,{text:"Can not load the video...",fontSize:t,width:e.width,height:e.height,align:"center",fill:"white",verticalAlign:"middle",padding:5}))}));let C=function(e,t,r){const a=i.default.useRef("loading"),n=i.default.useRef(null),[o,d]=i.default.useState(0),h=i.default.useRef(),l=i.default.useRef(),u=i.default.useRef();return h.current===e&&l.current===t&&u.current===r||(a.current="loading",n.current=void 0,h.current=e,l.current=t,u.current=r),i.default.useLayoutEffect((function(){if(e){var i=document.createElement("video");return i.addEventListener("canplay",o),i.addEventListener("error",h),t&&(i.crossOrigin=t),r&&(i.referrerpolicy=r),i.src=e,i.load(),function(){i.removeEventListener("canplay",o),i.removeEventListener("error",h)}}function o(){a.current="loaded",n.current=i,n.current.currentTime=0,d(Math.random()),n.current.removeEventListener("canplay",o)}function h(e){a.current="failed",n.current=void 0,d(Math.random())}}),[e,t,r]),[n.current,a.current]};exports.setVideoLoaderHook=e=>{C=e},exports.useLoader=(e,t,r)=>{const a=i.default.useRef(),n=()=>{var e;null===(e=a.current)||void 0===e||e.call(a),a.current=void 0};i.default.useEffect((()=>n),[]),i.default.useLayoutEffect((()=>{const i=t.slice(0,200),o=`video with id ${r} url: ${i}`;"loading"!==e||a.current||(a.current=(0,g.incrementLoader)(o)),"loading"!==e&&n(),"failed"===e&&(0,g.triggerLoadError)(o)}),[e])},exports.VideoElement=(0,o.observer)((({element:e,store:t})=>{var r;const[a,n]=i.default.useState(!1),o=i.default.useRef(null),p=i.default.useRef(null),[R,T]=i.default.useState(!1),I=t.selectedShapes.indexOf(e)>=0,[_,O]=i.default.useState(!1),[S,k]=C(e.src,"anonymous"),P=t.activePage===e.page;(0,exports.useLoader)(k,e.src,e.id),S&&(S.width=S.videoWidth,S.height=S.videoHeight,S.playsInline=!0);const X=S||E;i.default.useEffect((()=>{S&&t.history.ignore((()=>{e.set({duration:1e3*S.duration})}))}),[S]),i.default.useEffect((()=>{var r;if(!S){return}const a=t.animatedElementsIds,n=(!a.length||a.includes(e.id))&&t.isPlaying,i=P&&(n||_);if(!i){return void S.pause()}i&&(S.currentTime=e.startTime*S.duration,S.play());const d=new u.default.Animation((()=>{Q()}),null===(r=o.current)||void 0===r?void 0:r.getLayer());d.start();const h=()=>{O(!1),S.currentTime=e.startTime*S.duration},l=()=>{S.currentTime>=e.endTime*S.duration&&(S.pause(),S.currentTime=e.startTime*S.duration,O(!1))};return S.addEventListener("ended",h),S.addEventListener("timeupdate",l),()=>{S.pause(),d.stop(),S.removeEventListener("ended",h),S.removeEventListener("timeupdate",l)}}),[S,_,t.isPlaying,P]),i.default.useEffect((()=>{S&&(S.volume=e.volume)}),[S,e.volume]);const Y=i.default.useRef();i.default.useEffect((()=>{const r=(0,d.autorun)((()=>{var r,a;if(S){const n=t.animatedElementsIds;if(n.length&&!n.includes(e.id)){return}const i=(t.currentTime-e.page.startTime)%e.duration;if(Math.abs(1e3*S.currentTime-i)>500||!t.isPlaying){const r=i/1e3;r!==S.currentTime&&(S.currentTime=r),4!==S.readyState&&!t.isPlaying&&!Y.current&&(Y.current=(0,g.incrementLoader)(`video ${e.id}`))}Q(),null===(a=null===(r=o.current)||void 0===r?void 0:r.getLayer())||void 0===a||a.batchDraw()}}));return()=>{r(),Y.current&&(Y.current(),Y.current=null)}}),[t,S]),i.default.useEffect((()=>{if(!S){return}const t=()=>{var t,r;4!==S.readyState&&e.page._exportingOrRendering||Y.current&&(Q(),null===(r=null===(t=o.current)||void 0===t?void 0:t.getLayer())||void 0===r||r.batchDraw(),Y.current(),Y.current=null)};let r;return e.page._exportingOrRendering&&(r=setInterval(t,50)),S.addEventListener("timeupdate",t),S.addEventListener("canplay",t),()=>{clearInterval(r),S.removeEventListener("timeupdate",t),S.removeEventListener("canplay",t)}}),[e.page._exportingOrRendering,S,e.id,g.incrementLoader]);let{cropX:W,cropY:A,cropWidth:D,cropHeight:H}=e;"loaded"!==k&&(W=A=0,D=H=1);const q=X.width*D,j=X.height*H,z=e.width/e.height;let B,F;const V=q/j,Z="svg"===e.type;Z?(B=q,F=j):z>=V?(B=q,F=q/z):(B=j*z,F=j);const U={x:X.width*W,y:X.height*A,width:B,height:F},N=null!==(r=e.cornerRadius)&&void 0!==r?r:0,[G,$]=(0,exports.useCornerRadiusAndCrop)(e,X,U,t._elementsPixelRatio,N,a||e._cropModeEnabled||"svg"===e.type);let[J,K]=((e,t,r,a)=>{const n=(e=>{const[t,r]=i.default.useState(e);return i.default.useEffect((()=>{(async()=>{const a=await async function(e){if(!(e.indexOf("data:image/svg+xml")>=0||e.indexOf(".svg")>=0)){return e}const t=await f.urlToString(e),r=f.fixSize(t);return f.svgToURL(r)}(e);a!==t&&r(a)})()}),[e]),t})(e.clipSrc||""),[o,d]=(0,l.default)(n,"anonymous"),h=e.clipSrc?d:"loaded";(0,exports.useLoader)(h,e.clipSrc,e.id);const c=i.default.useMemo((()=>{if(t&&o){return x()}}),[t,o]);function s(){var a;if(!o){return}if(!t||!t.width||!t.height){return}if(!o||!o.width||!o.height){return}if(!c){return}const n=x(),i=Math.max(e.width/o.width*r,e.height/o.height*r);n.width=o.width*i,n.height=o.height*i,null===(a=n.getContext("2d"))||void 0===a||a.drawImage(o,0,0,n.width,n.height),c.width=Math.max(t.width,1),c.height=Math.max(t.height,1);const d=c.getContext("2d");d&&(d.save(),d.drawImage(n,0,0,t.width,t.height),u.default.Util.releaseCanvas(n),d.globalCompositeOperation="source-in",d.drawImage(t,0,0,c.width,c.height),d.restore())}return i.default.useLayoutEffect((()=>{s()}),[c,t,o,e.width,e.height,r,...a]),[e.clipSrc&&o?c:t,s]})(e,G,t._elementsPixelRatio,[U,N,t._elementsPixelRatio]);function Q(){$(),K()}const ee=Math.max(e.width/B,e.height/F);i.default.useEffect((()=>{var t;if(!e._cropModeEnabled){return}const r=null===(t=o.current)||void 0===t?void 0:t.getStage();function a(t){e._cropModeEnabled&&t.target!==p.current&&e.toggleCropMode(!1)}function n(t){e._cropModeEnabled&&t.target.parentNode!==r.content&&e.toggleCropMode(!1)}return document.body.addEventListener("click",n),null==r||r.on("click",a),null==r||r.on("tap",a),()=>{document.body.removeEventListener("click",n),document.body.removeEventListener("touchstart",n),null==r||r.off("click",a),null==r||r.off("click",a)}}),[e._cropModeEnabled]),i.default.useLayoutEffect((()=>{if(!a&&!e._cropModeEnabled){return(0,m.applyFilter)(o.current,e),(0,d.autorun)((()=>{(0,m.applyFilter)(o.current,e)}),{delay:100})}}),[X,a,D,H,e._cropModeEnabled]),i.default.useLayoutEffect((()=>{var t;a||e._cropModeEnabled?null===(t=o.current)||void 0===t||t.clearCache():(0,m.applyFilter)(o.current,e)}),[a,e.width,e.height,e._cropModeEnabled]),i.default.useEffect((()=>{(0,m.applyFilter)(o.current,e)}),[e.shadowEnabled,e.shadowBlur,e.cornerRadius,e.shadowColor,e.shadowOffsetX,e.shadowOffsetY,e.shadowOpacity]);const te=i.default.useRef(null),re=i.default.useRef(null),ae=i.default.useRef(null);i.default.useLayoutEffect((()=>{e._cropModeEnabled&&(re.current.nodes([te.current]),ae.current.nodes([p.current]))}),[e._cropModeEnabled]);const ne=t=>{Math.round(t.target.x())>0&&(t.target.x(0),t.target.scaleX(1)),Math.round(t.target.y())>0&&(t.target.y(0),t.target.scaleY(1));const r=t.target.width()*t.target.scaleX(),a=t.target.height()*t.target.scaleY(),n=Math.min(1,B/r),i=Math.min(1,F/a),o=1-n,d=Math.min(o,Math.max(0,Math.round(-t.target.x())/r)),h=1-i,l=Math.min(h,Math.max(0,Math.round(-t.target.y())/a));t.target.setAttrs({x:-d*X.width,y:-l*X.height,scaleX:1,scaleY:1}),e.set({cropX:d,cropY:l,cropWidth:n,cropHeight:i})},ie=()=>{"svg"!==e.type&&e.contentEditable&&setTimeout((()=>{e.toggleCropMode(!0)}))},oe="loading"===k,de="failed"===k,he=!oe&&!de,le=i.default.useRef({cropX:0,cropY:0,cropWidth:0,cropHeight:0}),ue=he?e.a.opacity:0;(0,w.useFadeIn)(o,ue);const ce=e.selectable||"admin"===t.role,se=(0,v.isTouchDevice)();return i.default.createElement(i.default.Fragment,null,oe&&i.default.createElement(b,{element:e}),de&&i.default.createElement(L,{element:e}),i.default.createElement(h.Image,{ref:o,name:"element",id:e.id,image:J,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:U,listening:ce,draggable:se?e.draggable&&I:e.draggable,preventDefault:!se||I,hideInExport:!e.showInExport,onMouseEnter:()=>{T(!0)},onMouseLeave:()=>{T(!1)},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:ie,onDblTap:ie,onTransformStart:()=>{n(!0),le.current={cropX:e.cropX,cropY:e.cropY,cropWidth:e.cropWidth,cropHeight:e.cropHeight}},onTransform:t=>{var r;const a=t.currentTarget,n=Math.abs(a.scaleX()-1)<1e-7?1:a.scaleX(),i=Math.abs(a.scaleY()-1)<1e-7?1:a.scaleY();a.scaleX(1),a.scaleY(1);const o=null===(r=t.target.getStage())||void 0===r?void 0:r.findOne("Transformer"),d=1-B/X.width,h=Math.min(d,Math.max(0,e.cropX)),l=1-F/X.height,u=Math.min(l,Math.max(0,e.cropY)),c=o.getActiveAnchor(),s=!(c.indexOf("middle")>=0||c.indexOf("center")>=0),g=!s&&n<1&&le.current.cropHeight>F/X.height;let f=s?e.cropWidth:e.cropWidth*n;g&&(f=e.cropWidth);const p=!s&&i<1&&le.current.cropWidth>B/X.width;let m=s?e.cropHeight:e.cropHeight*i;p&&(m=e.cropHeight),Z&&(f=e.cropWidth,m=e.cropHeight),e.set({cropX:h,cropY:u,x:a.x(),y:a.y(),width:a.width()*n,height:a.height()*i,rotation:t.target.rotation(),cropWidth:Math.min(f,1-h),cropHeight:Math.min(m,1-u)})},onTransformEnd:t=>{const r=t.currentTarget;e.set({width:r.width(),height:r.height(),x:r.x(),y:r.y(),rotation:t.target.rotation(),cropWidth:B/X.width,cropHeight:F/X.height}),n(!1)}}),i.default.createElement(h.Rect,{x:e.a.x,y:e.a.y,width:Math.max(e.a.width-e.borderSize,0),height:Math.max(e.a.height-e.borderSize,0),opacity: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,N-e.borderSize),hideInExport:!e.showInExport}),!t.isPlaying&&i.default.createElement(h.Image,{image:_?M:y,x:e.a.x,y:e.a.y,offsetX:-e.a.width/2+15/t.scale,offsetY:-e.a.height/2+15/t.scale,rotation:e.a.rotation,width:30/t.scale,height:30/t.scale,hideInExport:!0,onClick:()=>O(!_),onTap:()=>O(!_)}),e._cropModeEnabled&&i.default.createElement(c.Portal,{selector:".page-abs-container",enabled:!0},i.default.createElement(h.Rect,{x:-window.innerWidth/t.scale,y:-window.innerWidth/t.scale,width:window.innerWidth/t.scale*3,height:window.innerWidth/t.scale*3,fill:"rgba(0,0,0,0.3)"}),i.default.createElement(h.Image,{listening:!1,image:J,x:e.a.x,y:e.a.y,width:e.a.width,height:e.a.height,rotation:e.a.rotation,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur}),i.default.createElement(h.Group,{x:e.a.x,y:e.a.y,rotation:e.a.rotation,scaleX:ee,scaleY:ee},i.default.createElement(h.Image,{image:X,ref:p,opacity:.4,draggable:!0,x:-e.cropX*X.width,y:-e.cropY*X.height,onDragMove:ne,onTransform:ne}),i.default.createElement(h.Transformer,{ref:ae,anchorSize:20,enabledAnchors:["top-left","top-right","bottom-left","bottom-right"],boundBoxFunc:(e,t)=>t.width<5||t.height<5?e:t,rotateEnabled:!1,borderEnabled:!1,anchorCornerRadius:10,anchorStrokeWidth:2,borderStrokeWidth:2}),i.default.createElement(h.Rect,{width:B,height:F,ref:te,listening:!1,onTransform:t=>{t.target.x()<-e.cropX*X.width-1e-9&&(t.target.x(-e.cropX*X.width),t.target.scaleX(1)),t.target.y()<-e.cropY*X.height-1e-9&&(t.target.y(-e.cropY*X.height),t.target.scaleY(1));const r=Math.min(1,Math.max(0,e.cropX+t.target.x()/X.width)),a=Math.min(1,Math.max(0,t.target.y()/X.height+e.cropY)),n=t.target.width()*t.target.scaleX(),i=t.target.height()*t.target.scaleY(),o=Math.min(1-r,n/X.width),d=Math.min(1-a,i/X.height),h=t.target.getAbsolutePosition(t.target.getParent().getParent());t.target.scale({x:1,y:1}),t.target.position({x:0,y:0}),e.set({x:h.x,y:h.y,cropX:r,cropY:a,cropWidth:o,cropHeight:d,width:Math.min(n*ee,X.width*(1-r)*ee),height:Math.min(i*ee,X.height*(1-a)*ee)})}}),i.default.createElement(h.Transformer,{ref:re,enabledAnchors:["top-left","top-right","bottom-left","bottom-right"],boundBoxFunc:(e,t)=>t.width<5||t.height<5?e:t,keepRatio:!1,rotateEnabled:!1,anchorFill:"rgb(240, 240, 240)",anchorStrokeWidth:2,borderStrokeWidth:2,visible:e.resizable}))),(R||I)&&i.default.createElement(s.Highlighter,{element:e}))}));
1
+ var e,t=this&&this.__createBinding||(Object.create?function(e,t,r,a){void 0===a&&(a=r);var n=Object.getOwnPropertyDescriptor(t,r);n&&!("get"in n?!t.__esModule:n.writable||n.configurable)||(n={enumerable:!0,get:function(){return t[r]}}),Object.defineProperty(e,a,n)}:function(e,t,r,a){void 0===a&&(a=r),e[a]=t[r]}),r=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),a=this&&this.__importStar||(e=function(t){return e=Object.getOwnPropertyNames||function(e){var t=[];for(var r in e){Object.prototype.hasOwnProperty.call(e,r)&&(t[t.length]=r)}return t},e(t)},function(a){if(a&&a.__esModule){return a}var n={};if(null!=a){for(var i=e(a),o=0;o<i.length;o++){"default"!==i[o]&&t(n,a,i[o])}}return r(n,a),n}),n=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.VideoElement=exports.useLoader=exports.setVideoLoaderHook=exports.useCornerRadiusAndCrop=void 0;const i=n(require("react")),o=require("mobx-react-lite"),d=require("mobx"),h=require("react-konva"),l=n(require("use-image")),u=n(require("konva")),c=require("react-konva-utils"),s=require("./highlighter"),g=require("../utils/loader"),f=a(require("../utils/svg")),p=require("../utils/flags"),m=require("./apply-filters"),w=require("./use-fadein"),v=require("../utils/screen");function x(){return document.createElement("canvas")}const y=new window.Image;y.src=f.svgToURL('\n <svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n <path opacity="0.6" d="M4 5.49683V18.5032C4 20.05 5.68077 21.0113 7.01404 20.227L18.0694 13.7239C19.384 12.9506 19.384 11.0494 18.0694 10.2761L7.01404 3.77296C5.68077 2.98869 4 3.95 4 5.49683Z" fill="white"/>\n <path d="M4 5.49683V18.5032C4 20.05 5.68077 21.0113 7.01404 20.227L18.0694 13.7239C19.384 12.9506 19.384 11.0494 18.0694 10.2761L7.01404 3.77296C5.68077 2.98869 4 3.95 4 5.49683Z" stroke="#323232" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>\n </svg>\n');const M=new window.Image;M.src=f.svgToURL('\n <svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n <path opacity="0.6" d="M14 19L14 5C14 3.89543 14.8954 3 16 3L17 3C18.1046 3 19 3.89543 19 5L19 19C19 20.1046 18.1046 21 17 21L16 21C14.8954 21 14 20.1046 14 19Z" fill="white"/>\n <path opacity="0.6" d="M10 19L10 5C10 3.89543 9.10457 3 8 3L7 3C5.89543 3 5 3.89543 5 5L5 19C5 20.1046 5.89543 21 7 21L8 21C9.10457 21 10 20.1046 10 19Z" fill="white"/>\n <path d="M14 19L14 5C14 3.89543 14.8954 3 16 3L17 3C18.1046 3 19 3.89543 19 5L19 19C19 20.1046 18.1046 21 17 21L16 21C14.8954 21 14 20.1046 14 19Z" stroke="#323232" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>\n <path d="M10 19L10 5C10 3.89543 9.10457 3 8 3L7 3C5.89543 3 5 3.89543 5 5L5 19C5 20.1046 5.89543 21 7 21L8 21C9.10457 21 10 20.1046 10 19Z" stroke="#323232" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>\n </svg>\n'),exports.useCornerRadiusAndCrop=(e,t,r,a,n=0,o=!1)=>{const d=Math.floor(Math.max(e.width*a,1)),h=Math.floor(Math.max(e.height*a,1)),l=Math.min(n*a,d/2,h/2),c=Math.max(e.width/r.width,e.height/r.height)*a,s=e.page._exportingOrRendering&&p.flags.imageDownScalingEnabled&&c<1&&!o,g=0===r.x&&0===r.y&&r.width===(null==t?void 0:t.width)&&r.height===(null==t?void 0:t.height),f=i.default.useMemo((()=>{if(t&&t.width&&t.height){return g&&0===l&&!s?void 0:x()}}),[t,l,s,g]),m=()=>{if(!f||!t){return}f.width=d,f.height=h;const e=f.getContext("2d");if(!e){return}l&&(e.beginPath(),e.moveTo(l,0),e.lineTo(d-l,0),e.arc(d-l,l,l,3*Math.PI/2,0,!1),e.lineTo(d,h-l),e.arc(d-l,h-l,l,0,Math.PI/2,!1),e.lineTo(l,h),e.arc(l,h-l,l,Math.PI/2,Math.PI,!1),e.lineTo(0,l),e.arc(l,l,l,Math.PI,3*Math.PI/2,!1),e.clip());const a=s?function(e,t){var r,a;const n=x();n.width=e.width,n.height=e.height,null===(r=n.getContext("2d"))||void 0===r||r.drawImage(e,0,0,n.width,n.height);const i=function(e,t,r,a,n,i,o){for(var d=new ImageData(t,r),h=new Int32Array(e.data.buffer),l=e.width,u=new Int32Array(d.data.buffer),c=d.width,s=t/i,g=r/o,f=Math.round(1/s),p=Math.round(1/g),m=f*p,w=0;w<d.height;w++){for(var v=0;v<c;v++){for(var x=0+Math.round(v/s)+(0+Math.round(w/g))*l,y=0,M=0,E=0,b=0,L=0;L<p;L++){for(var C=0;C<f;C++){var R=h[x+C+L*l];y+=R<<24>>>24,M+=R<<16>>>24,E+=R<<8>>>24,b+=R>>>24}}y=Math.round(y/m),M=Math.round(M/m),E=Math.round(E/m),b=Math.round(b/m),u[v+w*c]=b<<24|E<<16|M<<8|y}}return d}(n.getContext("2d").getImageData(0,0,n.width,n.height),Math.floor(n.width*t),Math.floor(n.height*t),0,0,n.width,n.height);return n.width=Math.floor(n.width*t),n.height=Math.floor(n.height*t),null===(a=n.getContext("2d"))||void 0===a||a.putImageData(i,0,0),n}(t,c):t,n=s?{x:Math.floor(r.x*c),y:Math.floor(r.y*c),width:Math.floor(r.width*c),height:Math.floor(r.height*c)}:r;e.drawImage(a,n.x,n.y,n.width,n.height,0,0,f.width,f.height)};return i.default.useLayoutEffect((()=>{m()}),[f,e.width,e.height,r.x,r.y,r.width,r.height,n,a,o,e.page._exportingOrRendering,s]),i.default.useEffect((()=>()=>{f&&"CANVAS"===f.nodeName&&u.default.Util.releaseCanvas(f)}),[f]),[f||t,m]};const E=x(),b=(0,o.observer)((({element:e})=>{const t=Math.min(30,e.width/4,e.height/4),r=i.default.useRef(null);return i.default.useEffect((()=>{const e=r.current;if(!e){return}const t=new u.default.Animation((t=>{e.rotate(((null==t?void 0:t.timeDiff)||0)/2)}),e.getLayer());return t.start(),()=>{t.stop()}})),i.default.createElement(h.Group,{x:e.a.x,y:e.a.y,rotation:e.a.rotation,listening:!1,opacity:e.a.opacity,hideInExport:!e.showInExport},i.default.createElement(h.Rect,{width:e.width,height:e.height,fill:"rgba(124, 173, 212, 0.8)"}),i.default.createElement(h.Arc,{ref:r,x:e.width/2,y:e.height/2,fill:"white",outerRadius:Math.abs(t),innerRadius:Math.max(1,t-5),angle:270}))})),L=(0,o.observer)((({element:e})=>{const t=Math.max(10,Math.min(30,e.width/25));return i.default.createElement(h.Group,{x:e.a.x,y:e.a.y,rotation:e.a.rotation,listening:!1,opacity:e.a.opacity,hideInExport:!e.showInExport},i.default.createElement(h.Rect,{width:e.width,height:e.height,fill:"rgba(223, 102, 102, 0.8)"}),i.default.createElement(h.Text,{text:"Can not load the video...",fontSize:t,width:e.width,height:e.height,align:"center",fill:"white",verticalAlign:"middle",padding:5}))}));let C=function(e,t,r){const a=i.default.useRef("loading"),n=i.default.useRef(null),[o,d]=i.default.useState(0),h=i.default.useRef(),l=i.default.useRef(),u=i.default.useRef();return h.current===e&&l.current===t&&u.current===r||(a.current="loading",n.current=void 0,h.current=e,l.current=t,u.current=r),i.default.useLayoutEffect((function(){if(e){var i=document.createElement("video");return i.addEventListener("canplay",o),i.addEventListener("error",h),t&&(i.crossOrigin=t),r&&(i.referrerpolicy=r),i.src=e,i.load(),function(){i.removeEventListener("canplay",o),i.removeEventListener("error",h)}}function o(){a.current="loaded",n.current=i,n.current.currentTime=0,d(Math.random()),n.current.removeEventListener("canplay",o)}function h(e){const t=4===i.readyState,r=i.buffered&&i.buffered.length>0&&i.buffered.end(i.buffered.length-1)/i.duration*100>=100;t&&r||(a.current="failed",n.current=void 0,d(Math.random()))}}),[e,t,r]),[n.current,a.current]};exports.setVideoLoaderHook=e=>{C=e},exports.useLoader=(e,t,r)=>{const a=i.default.useRef(),n=()=>{var e;null===(e=a.current)||void 0===e||e.call(a),a.current=void 0};i.default.useEffect((()=>n),[]),i.default.useLayoutEffect((()=>{const i=t.slice(0,200),o=`video with id ${r} url: ${i}`;"loading"!==e||a.current||(a.current=(0,g.incrementLoader)(o)),"loading"!==e&&n(),"failed"===e&&(0,g.triggerLoadError)(o)}),[e])},exports.VideoElement=(0,o.observer)((({element:e,store:t})=>{var r;const[a,n]=i.default.useState(!1),o=i.default.useRef(null),p=i.default.useRef(null),[R,T]=i.default.useState(!1),I=t.selectedShapes.indexOf(e)>=0,[_,S]=i.default.useState(!1),[O,k]=C(e.src,"anonymous"),P=t.activePage===e.page;(0,exports.useLoader)(k,e.src,e.id),O&&(O.width=O.videoWidth,O.height=O.videoHeight,O.playsInline=!0);const X=O||E;i.default.useEffect((()=>{O&&t.history.ignore((()=>{e.set({duration:1e3*O.duration})}))}),[O]),i.default.useEffect((()=>{var r;if(!O){return}const a=t.animatedElementsIds,n=(!a.length||a.includes(e.id))&&t.isPlaying,i=P&&(n||_);if(!i){return void O.pause()}i&&(O.currentTime=e.startTime*O.duration,O.play());const d=new u.default.Animation((()=>{Q()}),null===(r=o.current)||void 0===r?void 0:r.getLayer());d.start();const h=()=>{S(!1),O.currentTime=e.startTime*O.duration},l=()=>{O.currentTime>=e.endTime*O.duration&&(O.pause(),O.currentTime=e.startTime*O.duration,S(!1))};return O.addEventListener("ended",h),O.addEventListener("timeupdate",l),()=>{O.pause(),d.stop(),O.removeEventListener("ended",h),O.removeEventListener("timeupdate",l)}}),[O,_,t.isPlaying,P]),i.default.useEffect((()=>{O&&(O.volume=e.volume)}),[O,e.volume]);const Y=i.default.useRef();i.default.useEffect((()=>{const r=(0,d.autorun)((()=>{var r,a;if(O){const n=t.animatedElementsIds;if(n.length&&!n.includes(e.id)){return}const i=(t.currentTime-e.page.startTime)%e.duration;if(Math.abs(1e3*O.currentTime-i)>500||!t.isPlaying){const r=i/1e3;r!==O.currentTime&&(O.currentTime=r),4!==O.readyState&&!t.isPlaying&&!Y.current&&(Y.current=(0,g.incrementLoader)(`video ${e.id}`))}Q(),null===(a=null===(r=o.current)||void 0===r?void 0:r.getLayer())||void 0===a||a.batchDraw()}}));return()=>{r(),Y.current&&(Y.current(),Y.current=null)}}),[t,O]),i.default.useEffect((()=>{if(!O){return}const t=()=>{var t,r;4!==O.readyState&&e.page._exportingOrRendering||Y.current&&(Q(),null===(r=null===(t=o.current)||void 0===t?void 0:t.getLayer())||void 0===r||r.batchDraw(),Y.current(),Y.current=null)};let r;return e.page._exportingOrRendering&&(r=setInterval(t,50)),O.addEventListener("timeupdate",t),O.addEventListener("canplay",t),()=>{clearInterval(r),O.removeEventListener("timeupdate",t),O.removeEventListener("canplay",t)}}),[e.page._exportingOrRendering,O,e.id,g.incrementLoader]);let{cropX:W,cropY:A,cropWidth:D,cropHeight:H}=e;"loaded"!==k&&(W=A=0,D=H=1);const q=X.width*D,j=X.height*H,z=e.width/e.height;let B,F;const V=q/j,Z="svg"===e.type;Z?(B=q,F=j):z>=V?(B=q,F=q/z):(B=j*z,F=j);const U={x:X.width*W,y:X.height*A,width:B,height:F},N=null!==(r=e.cornerRadius)&&void 0!==r?r:0,[G,$]=(0,exports.useCornerRadiusAndCrop)(e,X,U,t._elementsPixelRatio,N,a||e._cropModeEnabled||"svg"===e.type);let[J,K]=((e,t,r,a)=>{const n=(e=>{const[t,r]=i.default.useState(e);return i.default.useEffect((()=>{(async()=>{const a=await async function(e){if(!(e.indexOf("data:image/svg+xml")>=0||e.indexOf(".svg")>=0)){return e}const t=await f.urlToString(e),r=f.fixSize(t);return f.svgToURL(r)}(e);a!==t&&r(a)})()}),[e]),t})(e.clipSrc||""),[o,d]=(0,l.default)(n,"anonymous"),h=e.clipSrc?d:"loaded";(0,exports.useLoader)(h,e.clipSrc,e.id);const c=i.default.useMemo((()=>{if(t&&o){return x()}}),[t,o]);function s(){var a;if(!o){return}if(!t||!t.width||!t.height){return}if(!o||!o.width||!o.height){return}if(!c){return}const n=x(),i=Math.max(e.width/o.width*r,e.height/o.height*r);n.width=o.width*i,n.height=o.height*i,null===(a=n.getContext("2d"))||void 0===a||a.drawImage(o,0,0,n.width,n.height),c.width=Math.max(t.width,1),c.height=Math.max(t.height,1);const d=c.getContext("2d");d&&(d.save(),d.drawImage(n,0,0,t.width,t.height),u.default.Util.releaseCanvas(n),d.globalCompositeOperation="source-in",d.drawImage(t,0,0,c.width,c.height),d.restore())}return i.default.useLayoutEffect((()=>{s()}),[c,t,o,e.width,e.height,r,...a]),[e.clipSrc&&o?c:t,s]})(e,G,t._elementsPixelRatio,[U,N,t._elementsPixelRatio]);function Q(){$(),K()}const ee=Math.max(e.width/B,e.height/F);i.default.useEffect((()=>{var t;if(!e._cropModeEnabled){return}const r=null===(t=o.current)||void 0===t?void 0:t.getStage();function a(t){e._cropModeEnabled&&t.target!==p.current&&e.toggleCropMode(!1)}function n(t){e._cropModeEnabled&&t.target.parentNode!==r.content&&e.toggleCropMode(!1)}return document.body.addEventListener("click",n),null==r||r.on("click",a),null==r||r.on("tap",a),()=>{document.body.removeEventListener("click",n),document.body.removeEventListener("touchstart",n),null==r||r.off("click",a),null==r||r.off("click",a)}}),[e._cropModeEnabled]),i.default.useLayoutEffect((()=>{if(!a&&!e._cropModeEnabled){return(0,m.applyFilter)(o.current,e),(0,d.autorun)((()=>{(0,m.applyFilter)(o.current,e)}),{delay:100})}}),[X,a,D,H,e._cropModeEnabled]),i.default.useLayoutEffect((()=>{var t;a||e._cropModeEnabled?null===(t=o.current)||void 0===t||t.clearCache():(0,m.applyFilter)(o.current,e)}),[a,e.width,e.height,e._cropModeEnabled]),i.default.useEffect((()=>{(0,m.applyFilter)(o.current,e)}),[e.shadowEnabled,e.shadowBlur,e.cornerRadius,e.shadowColor,e.shadowOffsetX,e.shadowOffsetY,e.shadowOpacity]);const te=i.default.useRef(null),re=i.default.useRef(null),ae=i.default.useRef(null);i.default.useLayoutEffect((()=>{e._cropModeEnabled&&(re.current.nodes([te.current]),ae.current.nodes([p.current]))}),[e._cropModeEnabled]);const ne=t=>{Math.round(t.target.x())>0&&(t.target.x(0),t.target.scaleX(1)),Math.round(t.target.y())>0&&(t.target.y(0),t.target.scaleY(1));const r=t.target.width()*t.target.scaleX(),a=t.target.height()*t.target.scaleY(),n=Math.min(1,B/r),i=Math.min(1,F/a),o=1-n,d=Math.min(o,Math.max(0,Math.round(-t.target.x())/r)),h=1-i,l=Math.min(h,Math.max(0,Math.round(-t.target.y())/a));t.target.setAttrs({x:-d*X.width,y:-l*X.height,scaleX:1,scaleY:1}),e.set({cropX:d,cropY:l,cropWidth:n,cropHeight:i})},ie=()=>{"svg"!==e.type&&e.contentEditable&&setTimeout((()=>{e.toggleCropMode(!0)}))},oe="loading"===k,de="failed"===k,he=!oe&&!de,le=i.default.useRef({cropX:0,cropY:0,cropWidth:0,cropHeight:0}),ue=he?e.a.opacity:0;(0,w.useFadeIn)(o,ue);const ce=e.selectable||"admin"===t.role,se=(0,v.isTouchDevice)();return i.default.createElement(i.default.Fragment,null,oe&&i.default.createElement(b,{element:e}),de&&i.default.createElement(L,{element:e}),i.default.createElement(h.Image,{ref:o,name:"element",id:e.id,image:J,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:U,listening:ce,draggable:se?e.draggable&&I:e.draggable,preventDefault:!se||I,hideInExport:!e.showInExport,onMouseEnter:()=>{T(!0)},onMouseLeave:()=>{T(!1)},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:ie,onDblTap:ie,onTransformStart:()=>{n(!0),le.current={cropX:e.cropX,cropY:e.cropY,cropWidth:e.cropWidth,cropHeight:e.cropHeight}},onTransform:t=>{var r;const a=t.currentTarget,n=Math.abs(a.scaleX()-1)<1e-7?1:a.scaleX(),i=Math.abs(a.scaleY()-1)<1e-7?1:a.scaleY();a.scaleX(1),a.scaleY(1);const o=null===(r=t.target.getStage())||void 0===r?void 0:r.findOne("Transformer"),d=1-B/X.width,h=Math.min(d,Math.max(0,e.cropX)),l=1-F/X.height,u=Math.min(l,Math.max(0,e.cropY)),c=o.getActiveAnchor(),s=!(c.indexOf("middle")>=0||c.indexOf("center")>=0),g=!s&&n<1&&le.current.cropHeight>F/X.height;let f=s?e.cropWidth:e.cropWidth*n;g&&(f=e.cropWidth);const p=!s&&i<1&&le.current.cropWidth>B/X.width;let m=s?e.cropHeight:e.cropHeight*i;p&&(m=e.cropHeight),Z&&(f=e.cropWidth,m=e.cropHeight),e.set({cropX:h,cropY:u,x:a.x(),y:a.y(),width:a.width()*n,height:a.height()*i,rotation:t.target.rotation(),cropWidth:Math.min(f,1-h),cropHeight:Math.min(m,1-u)})},onTransformEnd:t=>{const r=t.currentTarget;e.set({width:r.width(),height:r.height(),x:r.x(),y:r.y(),rotation:t.target.rotation(),cropWidth:B/X.width,cropHeight:F/X.height}),n(!1)}}),i.default.createElement(h.Rect,{x:e.a.x,y:e.a.y,width:Math.max(e.a.width-e.borderSize,0),height:Math.max(e.a.height-e.borderSize,0),opacity: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,N-e.borderSize),hideInExport:!e.showInExport}),!t.isPlaying&&i.default.createElement(h.Image,{image:_?M:y,x:e.a.x,y:e.a.y,offsetX:-e.a.width/2+15/t.scale,offsetY:-e.a.height/2+15/t.scale,rotation:e.a.rotation,width:30/t.scale,height:30/t.scale,hideInExport:!0,onClick:()=>S(!_),onTap:()=>S(!_)}),e._cropModeEnabled&&i.default.createElement(c.Portal,{selector:".page-abs-container",enabled:!0},i.default.createElement(h.Rect,{x:-window.innerWidth/t.scale,y:-window.innerWidth/t.scale,width:window.innerWidth/t.scale*3,height:window.innerWidth/t.scale*3,fill:"rgba(0,0,0,0.3)"}),i.default.createElement(h.Image,{listening:!1,image:J,x:e.a.x,y:e.a.y,width:e.a.width,height:e.a.height,rotation:e.a.rotation,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur}),i.default.createElement(h.Group,{x:e.a.x,y:e.a.y,rotation:e.a.rotation,scaleX:ee,scaleY:ee},i.default.createElement(h.Image,{image:X,ref:p,opacity:.4,draggable:!0,x:-e.cropX*X.width,y:-e.cropY*X.height,onDragMove:ne,onTransform:ne}),i.default.createElement(h.Transformer,{ref:ae,anchorSize:20,enabledAnchors:["top-left","top-right","bottom-left","bottom-right"],boundBoxFunc:(e,t)=>t.width<5||t.height<5?e:t,rotateEnabled:!1,borderEnabled:!1,anchorCornerRadius:10,anchorStrokeWidth:2,borderStrokeWidth:2}),i.default.createElement(h.Rect,{width:B,height:F,ref:te,listening:!1,onTransform:t=>{t.target.x()<-e.cropX*X.width-1e-9&&(t.target.x(-e.cropX*X.width),t.target.scaleX(1)),t.target.y()<-e.cropY*X.height-1e-9&&(t.target.y(-e.cropY*X.height),t.target.scaleY(1));const r=Math.min(1,Math.max(0,e.cropX+t.target.x()/X.width)),a=Math.min(1,Math.max(0,t.target.y()/X.height+e.cropY)),n=t.target.width()*t.target.scaleX(),i=t.target.height()*t.target.scaleY(),o=Math.min(1-r,n/X.width),d=Math.min(1-a,i/X.height),h=t.target.getAbsolutePosition(t.target.getParent().getParent());t.target.scale({x:1,y:1}),t.target.position({x:0,y:0}),e.set({x:h.x,y:h.y,cropX:r,cropY:a,cropWidth:o,cropHeight:d,width:Math.min(n*ee,X.width*(1-r)*ee),height:Math.min(i*ee,X.height*(1-a)*ee)})}}),i.default.createElement(h.Transformer,{ref:re,enabledAnchors:["top-left","top-right","bottom-left","bottom-right"],boundBoxFunc:(e,t)=>t.width<5||t.height<5?e:t,keepRatio:!1,rotateEnabled:!1,anchorFill:"rgb(240, 240, 240)",anchorStrokeWidth:2,borderStrokeWidth:2,visible:e.resizable}))),(R||I)&&i.default.createElement(s.Highlighter,{element:e}))}));
package/model/store.d.ts CHANGED
@@ -810,7 +810,7 @@ export declare const Store: import("mobx-state-tree").IModelType<{
810
810
  deleteElements(ids: Array<string>): void;
811
811
  on(event: any, callback: any): import("mobx-state-tree").IDisposer;
812
812
  _toCanvas({ pixelRatio, ignoreBackground, pageId, mimeType, includeBleed, _skipTimeout, quickMode, }?: ExportOptions): Promise<HTMLCanvasElement>;
813
- toDataURL({ mimeType, quality, ...rest }?: ExportOptions): Promise<any>;
813
+ toDataURL({ mimeType, quality, ...rest }?: ExportOptions): Promise<string>;
814
814
  toBlob({ mimeType, quality, ...rest }?: ExportOptions): Promise<Blob>;
815
815
  saveAsImage({ fileName, ...exportProps }?: ExportOptions & {
816
816
  fileName?: string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "polotno",
3
- "version": "2.21.3",
3
+ "version": "2.21.4",
4
4
  "description": "Design Editor Framework",
5
5
  "author": "Anton Lavrenov",
6
6
  "keywords": [
@@ -10,17 +10,17 @@
10
10
  "design editor"
11
11
  ],
12
12
  "dependencies": {
13
- "@blueprintjs/core": "5.16.6",
14
- "@blueprintjs/select": "5.3.11",
13
+ "@blueprintjs/core": "5.17.6",
14
+ "@blueprintjs/select": "5.3.18",
15
15
  "@meronex/icons": "^4.0.0",
16
16
  "cssom": "^0.5.0",
17
17
  "fast-json-patch": "^3.1.1",
18
18
  "functions-have-names": "^1.2.3",
19
19
  "gifuct-js": "^2.1.2",
20
20
  "gradient-parser": "^1.0.2",
21
- "konva": "^9.3.18",
21
+ "konva": "^9.3.19",
22
22
  "mensch": "^0.3.4",
23
- "mobx": "6.13.6",
23
+ "mobx": "6.13.7",
24
24
  "mobx-react-lite": "^4.1.0",
25
25
  "mobx-state-tree": "6.0.1",
26
26
  "nanoid": "3.3.4",
@@ -33,7 +33,7 @@
33
33
  "react-window": "^1.8.11",
34
34
  "sortablejs": "^1.15.6",
35
35
  "svg-round-corners": "^0.4.3",
36
- "swr": "^2.3.2",
36
+ "swr": "^2.3.3",
37
37
  "use-image": "^1.1.1"
38
38
  },
39
39
  "targets": {
@@ -76,7 +76,7 @@
76
76
  "glob": "^11.0.1",
77
77
  "jest-file-snapshot": "^0.7.0",
78
78
  "jsdom": "^25.0.1",
79
- "parcel": "^2.13.3",
79
+ "parcel": "2.13.3",
80
80
  "path-browserify": "^1.0.1",
81
81
  "pptxgenjs": "^3.12.0",
82
82
  "process": "^0.11.10",
@@ -89,7 +89,7 @@
89
89
  "svg-path-bounds": "^1.0.2",
90
90
  "terser": "^5.39.0",
91
91
  "ts-jest": "^29",
92
- "typescript": "^5.7.3",
92
+ "typescript": "^5.8.2",
93
93
  "uglifyjs-folder": "^3.3.0",
94
94
  "vitest": "^1.6.0",
95
95
  "webdriverio": "^8.38.2"