polotno 2.0.7 → 2.0.8

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 (10) hide show
  1. package/canvas/html-element.js +1 -1
  2. package/canvas/image-element.js +1 -1
  3. package/canvas/line-element.js +1 -1
  4. package/canvas/page.js +1 -1
  5. package/canvas/text-element.js +1 -1
  6. package/canvas/video-element.js +1 -1
  7. package/model/image-model.js +1 -1
  8. package/model/node-model.js +1 -1
  9. package/package.json +1 -1
  10. package/polotno.bundle.js +10 -9
package/canvas/html-element.js CHANGED
@@ -16,4 +16,4 @@
16
16
  .ql-direction-rtl {
17
17
  direction: rtl;
18
18
  }
19
- `,RichEditor=({html:e,onBlur:t,onChange:i,element:r})=>{const n=react_1.default.useRef(null);react_1.default.useEffect((()=>{if(!n.current)return;const e=new quill_1.default(n.current,{toolbar:!1,keyboard:!1,clipboard:{matchVisual:!1},formats:["background","bold","color","font","italic","size","strike","underline","indent","align","direction"]});return exports.quillRef.editor.instance=e,window.__polotnoQuill=e,e.on("text-change",(()=>{e.getSelection()&&(exports.quillRef.currentFormat=e.getFormat()),setTimeout((()=>{var e;i(null===(e=n.current)||void 0===e?void 0:e.childNodes[0].innerHTML)}),10)})),e.setSelection(0,0,"api"),e.on("selection-change",(i=>{i||t(),i&&(exports.quillRef.currentFormat=e.getFormat())})),n.current.childNodes[0].addEventListener("blur",(e=>{var i;(null===(i=e.relatedTarget)||void 0===i?void 0:i.classList.contains("ql-clipboard"))||t()})),()=>{exports.quillRef.editor.instance=null,exports.quillRef.currentFormat={},delete window.__polotnoQuill}}),[]),react_1.default.useEffect((()=>{var t;const i=exports.quillRef.editor.instance;if(!i)return;const a=i.getSelection();if(!((null===(t=n.current)||void 0===t?void 0:t.childNodes[0].innerHTML)===r.text)){var o=i.clipboard.convert("<div class='ql-editor' style='outline: none;'>"+e+"<p><br></p></div>");i.setContents(o),i.history.clear(),a&&(i.setSelection(a.index,a.length),exports.quillRef.currentFormat=i.getFormat())}}),[r.text]);const a=(0,text_element_1.useTextColor)(r).fill;return react_1.default.createElement(RichTextContainer,{ref:n,style:{fontSize:r.fontSize,color:a,width:r.width,fontFamily:r.fontFamily,lineHeight:r.lineHeight,letterSpacing:r.letterSpacing+"rem",textAlign:r.align},dir:(0,text_element_1.getDir)((0,text_1.removeTags)(r.text))})};function useHtmlSize(e,t,i){return react_1.default.useMemo((()=>(0,html2canvas_1.detectSize)(e)),[e,t.width,i])}function hasNonTransparentPixel(e){const t=e.getContext("2d").getImageData(0,0,e.width,e.height).data;for(let e=0;e<t.length;e+=4)if(0!==t[e+3])return!0;return!1}function isCanvasBlank(e){return!hasNonTransparentPixel(e)}function getHtml(e,{fontFamily:t="",color:i="black"}={}){let r=`color: ${i||e.fill}`;return`<div style="white-space: unset; width: ${Math.round(e.width||100)}px; ${r}; font-size: ${e.fontSize}px; font-family: '${t}'; text-decoration: ${e.textDecoration}; text-align: ${e.align}; line-height: ${e.lineHeight}; letter-spacing: ${e.letterSpacing}rem; font-style: ${e.fontStyle}; font-weight: ${e.fontWeight}; -webkit-text-stroke: ${e.strokeWidth}px ${e.stroke};" contentEditable dir="${(0,text_element_1.getDir)((0,text_1.removeTags)(e.text))}">${e.text}</div>`}const findFitFontSize=e=>{let t=e.fontSize;for(let i=1;i<50;i++){const i=getHtml(Object.assign(Object.assign({},e.toJSON()),{fontSize:t}),{fontFamily:e.fontFamily}),{height:r}=(0,html2canvas_1.detectSize)(i);if(!(e.height&&r>e.height))break;t-=.5}return t},isSafari=/^((?!chrome|android).)*safari/i.test(navigator.userAgent);exports.HTMLElement=(0,mobx_react_lite_1.observer)((({element:e,store:t})=>{const i=react_1.default.useRef(null),[r,n]=react_1.default.useState(),[a,o]=react_1.default.useState(!1),[l,s]=react_1.default.useState(!0),[c,d]=react_1.default.useState(!1),[u,f]=react_1.default.useState(!1),h=react_1.default.useRef(e.height),g=t.selectedElements.indexOf(e)>=0,_=e.fontSize/3,{textVerticalResizeEnabled:m}=flags_1.flags,x=(0,text_element_1.usePrevious)(e.fontFamily),[p]=(0,text_element_1.useFontLoader)(t,e.fontFamily);(0,use_fadein_1.useFadeIn)(i);const y=p?e.fontFamily:x!==e.fontFamily?x:"Arial",v=(0,text_element_1.useTextColor)(e).fill,b=getHtml(e,{fontFamily:y,color:v}),{width:w,height:S}=useHtmlSize(b,e,p);react_1.default.useEffect((()=>{if(!p)return;if(!e.height)return void e.set({height:S});const{textOverflow:i}=flags_1.flags;if("change-font-size"!==i||a)"resize"===i&&(m&&e.height<S&&t.history.ignore((()=>{e.set({height:S})})),m||e.height===S||t.history.ignore((()=>{e.set({height:S})})));else{const i=findFitFontSize(e);i!==e.fontSize?t.history.ignore((()=>{e.set({fontSize:i})})):e.height!==S&&(m&&e.height<S?t.history.ignore((()=>{e.set({height:S})})):m||t.history.ignore((()=>{e.set({height:S})})))}}));const E=react_1.default.useRef(0);react_1.default.useEffect((()=>{a||c||(async()=>{E.current++;const i=E.current,r=(0,loader_1.incrementLoader)(`text ${e.id}`);s(!0);let a=null;const o=isSafari?5:1;for(let n=0;n<o;n++){if(a=await(0,html2canvas_1.htmlToCanvas)({html:b,width:e.width||1,height:e.height||S||1,fontFamily:y,padding:_,pixelRatio:t._elementsPixelRatio,font:t.fonts.find((e=>e.fontFamily===y))||fonts.globalFonts.find((e=>e.fontFamily===y))}),i!==E.current)return void r();isCanvasBlank(a)&&isSafari&&await new Promise((e=>setTimeout(e,50*(n+1))))}a?(n(a),s(!1),konva_1.default.Util.requestAnimFrame(r)):r()})()}),[b,a,S,c,y,e.height,t._elementsPixelRatio]);const q=a||l;react_1.default.useEffect((()=>mobx.autorun((()=>{const t=i.current;(0,apply_filters_1.applyFilter)(t,e)}))),[r,q,e.shadowColor,e.shadowOffsetX,e.shadowOffsetY,e.shadowOpacity]);let k=0;"middle"===e.verticalAlign&&(k=(e.height-S)/2),"bottom"===e.verticalAlign&&(k=e.height-S);const z=(0,text_element_1.getLineHeight)({fontLoaded:p,fontFamily:e.fontFamily,fontSize:e.fontSize,lineHeight:e.lineHeight}),F=(0,screen_1.useMobile)();return react_1.default.createElement(react_1.default.Fragment,null,react_1.default.createElement(react_konva_1.Rect,{x:e.x,y:e.y,offsetX:e.backgroundPadding*(e.fontSize*z*.5),offsetY:e.backgroundPadding*(e.fontSize*z*.5),rotation:e.rotation,hideInExport:!e.showInExport||!e.text,listening:!1,visible:e.backgroundEnabled,opacity:e.backgroundOpacity,fill:e.backgroundColor,width:e.width+e.backgroundPadding*(e.fontSize*z),height:e.height+e.backgroundPadding*(e.fontSize*z),cornerRadius:e.backgroundCornerRadius*(e.fontSize*z*.5)}),react_1.default.createElement(react_konva_1.Rect,{ref:i,name:"element",x:e.x,y:e.y,listening:e.selectable,rotation:e.rotation,width:e.width,height:e.height,visible:!q,draggable:F?e.draggable&&g:e.draggable,preventDefault:!F||g,opacity:c?0:e.opacity,hideInExport:!e.showInExport,onMouseEnter:()=>{f(!0)},onMouseLeave:()=>{f(!1)},onDragStart:()=>{t.history.startTransaction()},onDragMove:t=>{e.set({x:t.target.x(),y:t.target.y()})},onDragEnd:i=>{e.set({x:i.target.x(),y:i.target.y()}),t.history.endTransaction()},id:e.id,onDblClick:()=>{e.contentEditable&&d(!0)},onDblTap:()=>{e.contentEditable&&d(!0)},onTransformStart:t=>{o(!0),h.current=e.height},onTransform:t=>{var i;const r=t.target,n=(null===(i=r.getStage())||void 0===i?void 0:i.findOne("Transformer")).getActiveAnchor(),a="middle-left"===n||"middle-right"===n,o="top-center"===n||"bottom-center"===n,l=r.scaleX();if(a){const t=r.scaleX(),i=Math.max(r.width()*t,e.fontSize);if(r.width(i),r.scaleX(1),flags_1.flags.textVerticalResizeEnabled){const t=Math.max(S,h.current);e.set({height:t})}e.set({width:i,x:r.x(),y:r.y()})}else if(o){let i="resize"===flags_1.flags.textOverflow?S:e.lineHeight*e.fontSize;const n=Math.max(i,t.target.height()*t.target.scaleY());r.scaleY(1),e.set({x:r.x(),y:r.y(),height:n,rotation:r.rotation()})}else r.scaleX(1),r.scaleY(1),e.set({fontSize:e.fontSize*l,width:r.width()*l,x:r.x(),y:r.y(),rotation:r.rotation(),height:r.height()*l})},onTransformEnd:t=>{o(!1),s(!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()})}}),react_1.default.createElement(react_konva_1.Image,{ref:i,image:r,x:e.x,y:e.y,offsetX:_,offsetY:_-k,listening:!1,rotation:e.rotation,width:e.width+2*_,height:e.height+2*_,visible:!q,opacity:c?0:e.opacity,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,hideInExport:!e.showInExport}),q&&react_1.default.createElement(react_konva_1.Group,{x:e.x,y:e.y,rotation:e.rotation,offsetY:-k},react_1.default.createElement(react_konva_utils_1.Html,{divProps:{style:{pointerEvents:"none"}}},react_1.default.createElement(RichTextContainer,{dangerouslySetInnerHTML:{__html:b},style:{pointerEvents:"none",display:"inline-block"}}))),c&&react_1.default.createElement(react_konva_1.Group,{x:e.x,y:e.y,rotation:e.rotation,offsetY:-k},react_1.default.createElement(react_konva_utils_1.Html,null,react_1.default.createElement(RichEditor,{html:b,element:e,onChange:t=>{e.set({text:t})},onBlur:e=>{d(!1)}}))),(g||u)&&react_1.default.createElement(highlighter_1.Highlighter,{element:e}))}));
19
+ `,RichEditor=({html:e,onBlur:t,onChange:i,element:r})=>{const n=react_1.default.useRef(null);react_1.default.useEffect((()=>{if(!n.current)return;const e=new quill_1.default(n.current,{toolbar:!1,keyboard:!1,clipboard:{matchVisual:!1},formats:["background","bold","color","font","italic","size","strike","underline","indent","align","direction"]});return exports.quillRef.editor.instance=e,window.__polotnoQuill=e,e.on("text-change",(()=>{e.getSelection()&&(exports.quillRef.currentFormat=e.getFormat()),setTimeout((()=>{var e;i(null===(e=n.current)||void 0===e?void 0:e.childNodes[0].innerHTML)}),10)})),e.setSelection(0,0,"api"),e.on("selection-change",(i=>{i||t(),i&&(exports.quillRef.currentFormat=e.getFormat())})),n.current.childNodes[0].addEventListener("blur",(e=>{var i;(null===(i=e.relatedTarget)||void 0===i?void 0:i.classList.contains("ql-clipboard"))||t()})),()=>{exports.quillRef.editor.instance=null,exports.quillRef.currentFormat={},delete window.__polotnoQuill}}),[]),react_1.default.useEffect((()=>{var t;const i=exports.quillRef.editor.instance;if(!i)return;const a=i.getSelection();if(!((null===(t=n.current)||void 0===t?void 0:t.childNodes[0].innerHTML)===r.text)){var o=i.clipboard.convert("<div class='ql-editor' style='outline: none;'>"+e+"<p><br></p></div>");i.setContents(o),i.history.clear(),a&&(i.setSelection(a.index,a.length),exports.quillRef.currentFormat=i.getFormat())}}),[r.text]);const a=(0,text_element_1.useTextColor)(r).fill;return react_1.default.createElement(RichTextContainer,{ref:n,style:{fontSize:r.fontSize,color:a,width:r.width,fontFamily:r.fontFamily,lineHeight:r.lineHeight,letterSpacing:r.letterSpacing+"rem",textAlign:r.align},dir:(0,text_element_1.getDir)((0,text_1.removeTags)(r.text))})};function useHtmlSize(e,t,i){return react_1.default.useMemo((()=>(0,html2canvas_1.detectSize)(e)),[e,t.width,i])}function hasNonTransparentPixel(e){const t=e.getContext("2d").getImageData(0,0,e.width,e.height).data;for(let e=0;e<t.length;e+=4)if(0!==t[e+3])return!0;return!1}function isCanvasBlank(e){return!hasNonTransparentPixel(e)}function getHtml(e,{fontFamily:t="",color:i="black"}={}){let r=`color: ${i||e.fill}`;return`<div style="white-space: unset; width: ${Math.round(e.width||100)}px; ${r}; font-size: ${e.fontSize}px; font-family: '${t}'; text-decoration: ${e.textDecoration}; text-align: ${e.align}; line-height: ${e.lineHeight}; letter-spacing: ${e.letterSpacing}rem; font-style: ${e.fontStyle}; font-weight: ${e.fontWeight}; -webkit-text-stroke: ${e.strokeWidth}px ${e.stroke};" contentEditable dir="${(0,text_element_1.getDir)((0,text_1.removeTags)(e.text))}">${e.text}</div>`}const findFitFontSize=e=>{let t=e.fontSize;for(let i=1;i<50;i++){const i=getHtml(Object.assign(Object.assign({},e.toJSON()),{fontSize:t}),{fontFamily:e.fontFamily}),{height:r}=(0,html2canvas_1.detectSize)(i);if(!(e.height&&r>e.height))break;t-=.5}return t},isSafari=/^((?!chrome|android).)*safari/i.test(navigator.userAgent);exports.HTMLElement=(0,mobx_react_lite_1.observer)((({element:e,store:t})=>{const i=react_1.default.useRef(null),[r,n]=react_1.default.useState(),[a,o]=react_1.default.useState(!1),[l,s]=react_1.default.useState(!0),[c,d]=react_1.default.useState(!1),[u,f]=react_1.default.useState(!1),h=react_1.default.useRef(e.height),g=t.selectedElements.indexOf(e)>=0,_=e.fontSize/3,{textVerticalResizeEnabled:m}=flags_1.flags,x=(0,text_element_1.usePrevious)(e.fontFamily),[p]=(0,text_element_1.useFontLoader)(t,e.fontFamily);(0,use_fadein_1.useFadeIn)(i);const y=p?e.fontFamily:x!==e.fontFamily?x:"Arial",v=(0,text_element_1.useTextColor)(e).fill,b=getHtml(e,{fontFamily:y,color:v}),{width:w,height:S}=useHtmlSize(b,e,p);react_1.default.useEffect((()=>{if(!p)return;if(!e.height)return void e.set({height:S});const{textOverflow:i}=flags_1.flags;if("change-font-size"!==i||a)"resize"===i&&(m&&e.height<S&&t.history.ignore((()=>{e.set({height:S})})),m||e.height===S||t.history.ignore((()=>{e.set({height:S})})));else{const i=findFitFontSize(e);i!==e.fontSize?t.history.ignore((()=>{e.set({fontSize:i})})):e.height!==S&&(m&&e.height<S?t.history.ignore((()=>{e.set({height:S})})):m||t.history.ignore((()=>{e.set({height:S})})))}}));const E=react_1.default.useRef(0);react_1.default.useEffect((()=>{a||c||(async()=>{E.current++;const i=E.current,r=(0,loader_1.incrementLoader)(`text ${e.id}`);s(!0);let a=null;const o=isSafari?5:1;for(let n=0;n<o;n++){if(a=await(0,html2canvas_1.htmlToCanvas)({html:b,width:e.width||1,height:e.height||S||1,fontFamily:y,padding:_,pixelRatio:t._elementsPixelRatio,font:t.fonts.find((e=>e.fontFamily===y))||fonts.globalFonts.find((e=>e.fontFamily===y))}),i!==E.current)return void r();isCanvasBlank(a)&&isSafari&&await new Promise((e=>setTimeout(e,50*(n+1))))}a?(n(a),s(!1),konva_1.default.Util.requestAnimFrame(r)):r()})()}),[b,a,S,c,y,e.height,t._elementsPixelRatio]);const q=a||l;react_1.default.useEffect((()=>mobx.autorun((()=>{const t=i.current;(0,apply_filters_1.applyFilter)(t,e)}))),[r,q,e.shadowColor,e.shadowOffsetX,e.shadowOffsetY,e.shadowOpacity]);let k=0;"middle"===e.verticalAlign&&(k=(e.height-S)/2),"bottom"===e.verticalAlign&&(k=e.height-S);const z=(0,text_element_1.getLineHeight)({fontLoaded:p,fontFamily:e.fontFamily,fontSize:e.fontSize,lineHeight:e.lineHeight}),F=(0,screen_1.useMobile)();return react_1.default.createElement(react_1.default.Fragment,null,react_1.default.createElement(react_konva_1.Rect,{x:e.x,y:e.y,offsetX:e.backgroundPadding*(e.fontSize*z*.5),offsetY:e.backgroundPadding*(e.fontSize*z*.5),rotation:e.rotation,hideInExport:!e.showInExport||!e.text,listening:!1,visible:e.backgroundEnabled,opacity:e.backgroundOpacity,fill:e.backgroundColor,width:e.width+e.backgroundPadding*(e.fontSize*z),height:e.height+e.backgroundPadding*(e.fontSize*z),cornerRadius:e.backgroundCornerRadius*(e.fontSize*z*.5)}),react_1.default.createElement(react_konva_1.Rect,{ref:i,name:"element",x:e.x,y:e.y,listening:e.selectable,rotation:e.rotation,width:e.width,height:e.height,visible:!q,draggable:F?e.draggable&&g:e.draggable,preventDefault:!F||g,opacity:c?0:e.opacity,hideInExport:!e.showInExport,onMouseEnter:()=>{f(!0)},onMouseLeave:()=>{f(!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&&d(!0)},onDblTap:()=>{e.contentEditable&&d(!0)},onTransformStart:t=>{o(!0),h.current=e.height},onTransform:t=>{var i;const r=t.target,n=(null===(i=r.getStage())||void 0===i?void 0:i.findOne("Transformer")).getActiveAnchor(),a="middle-left"===n||"middle-right"===n,o="top-center"===n||"bottom-center"===n,l=r.scaleX();if(a){const t=r.scaleX(),i=Math.max(r.width()*t,e.fontSize);if(r.width(i),r.scaleX(1),flags_1.flags.textVerticalResizeEnabled){const t=Math.max(S,h.current);e.set({height:t})}e.set({width:i,x:r.x(),y:r.y()})}else if(o){let i="resize"===flags_1.flags.textOverflow?S:e.lineHeight*e.fontSize;const n=Math.max(i,t.target.height()*t.target.scaleY());r.scaleY(1),e.set({x:r.x(),y:r.y(),height:n,rotation:r.rotation()})}else r.scaleX(1),r.scaleY(1),e.set({fontSize:e.fontSize*l,width:r.width()*l,x:r.x(),y:r.y(),rotation:r.rotation(),height:r.height()*l})},onTransformEnd:t=>{o(!1),s(!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()})}}),react_1.default.createElement(react_konva_1.Image,{ref:i,image:r,x:e.x,y:e.y,offsetX:_,offsetY:_-k,listening:!1,rotation:e.rotation,width:e.width+2*_,height:e.height+2*_,visible:!q,opacity:c?0:e.opacity,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,hideInExport:!e.showInExport}),q&&react_1.default.createElement(react_konva_1.Group,{x:e.x,y:e.y,rotation:e.rotation,offsetY:-k},react_1.default.createElement(react_konva_utils_1.Html,{divProps:{style:{pointerEvents:"none"}}},react_1.default.createElement(RichTextContainer,{dangerouslySetInnerHTML:{__html:b},style:{pointerEvents:"none",display:"inline-block"}}))),c&&react_1.default.createElement(react_konva_1.Group,{x:e.x,y:e.y,rotation:e.rotation,offsetY:-k},react_1.default.createElement(react_konva_utils_1.Html,null,react_1.default.createElement(RichEditor,{html:b,element:e,onChange:t=>{e.set({text:t})},onBlur:e=>{d(!1)}}))),(g||u)&&react_1.default.createElement(highlighter_1.Highlighter,{element:e}))}));
package/canvas/image-element.js CHANGED
@@ -1 +1 @@
1
- "use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,t,a,r){void 0===r&&(r=a);var o=Object.getOwnPropertyDescriptor(t,a);o&&!("get"in o?!t.__esModule:o.writable||o.configurable)||(o={enumerable:!0,get:function(){return t[a]}}),Object.defineProperty(e,r,o)}:function(e,t,a,r){void 0===r&&(r=a),e[r]=t[a]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),__importStar=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var a in e)"default"!==a&&Object.prototype.hasOwnProperty.call(e,a)&&__createBinding(t,e,a);return __setModuleDefault(t,e),t},__importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.ImageElement=exports.useImageLoader=exports.setImageLoaderHook=void 0;const react_1=__importDefault(require("react")),mobx_react_lite_1=require("mobx-react-lite"),mobx_1=require("mobx"),react_konva_1=require("react-konva"),use_image_1=__importDefault(require("use-image")),konva_1=__importDefault(require("konva")),react_konva_utils_1=require("react-konva-utils"),highlighter_1=require("./highlighter"),loader_1=require("../utils/loader"),svg=__importStar(require("../utils/svg")),flags_1=require("../utils/flags"),apply_filters_1=require("./apply-filters"),use_fadein_1=require("./use-fadein"),screen_1=require("../utils/screen");function createCanvas(){return document.createElement("canvas")}async function getFixedUrl(e){if(!(e.indexOf("data:image/svg+xml")>=0||e.indexOf(".svg")>=0))return e;const t=await svg.urlToString(e),a=svg.fixSize(t);return svg.svgToURL(a)}const useSizeFixer=e=>{const[t,a]=react_1.default.useState(e);return react_1.default.useEffect((()=>{(async()=>{const r=await getFixedUrl(e);r!==t&&a(r)})()}),[e]),t},useFlip=(e,t,a)=>{const r=react_1.default.useMemo((()=>{var r,o;const{flipX:i,flipY:n}=e,h="svg"===e.type||e.src.indexOf("data:image/svg+xml")>=0||e.src.indexOf(".svg")>=0,d=navigator.userAgent.toLowerCase().indexOf("firefox")>-1&&h||e.maskSrc;if(!i&&!n&&!d)return t;if(!t||!t.width||!t.height)return null;const c=createCanvas();let l=1;"svg"===e.type&&(l=Math.max(e.a.width/t.width*a,e.a.height/t.height*a)),c.width=Math.max(t.width*l,1),c.height=Math.max(t.height*l,1);let s=i?-c.width:0,u=n?-c.height:0;return null===(r=c.getContext("2d"))||void 0===r||r.scale(i?-1:1,n?-1:1),null===(o=c.getContext("2d"))||void 0===o||o.drawImage(t,s,u,c.width,c.height),c}),[e.maskSrc,e.flipX,e.flipY,t,e.a.width,e.a.height,a]);return react_1.default.useEffect((()=>()=>{r&&"CANVAS"===r.nodeName&&konva_1.default.Util.releaseCanvas(r)}),[r]),r};function getCrop(e,t){const a=t.width/t.height;let r,o;a>=e.width/e.height?(r=e.width,o=e.width/a):(r=e.height*a,o=e.height);return{x:(e.width-r)/2,y:(e.height-o)/2,width:r,height:o}}function downsample(e,t,a,r,o,i,n){for(var h=new ImageData(t,a),d=new Int32Array(e.data.buffer),c=e.width,l=new Int32Array(h.data.buffer),s=h.width,u=t/i,g=a/n,f=Math.round(1/u),_=Math.round(1/g),m=f*_,p=0;p<h.height;p++)for(var w=0;w<s;w++){for(var x=r+Math.round(w/u)+(o+Math.round(p/g))*c,v=0,y=0,M=0,b=0,E=0;E<_;E++)for(var k=0;k<f;k++){var C=d[x+k+E*c];v+=C<<24>>>24,y+=C<<16>>>24,M+=C<<8>>>24,b+=C>>>24}v=Math.round(v/m),y=Math.round(y/m),M=Math.round(M/m),b=Math.round(b/m),l[w+p*s]=b<<24|M<<16|y<<8|v}return h}function downScaleCanvas(e,t){var a,r;const o=createCanvas();o.width=e.width,o.height=e.height,null===(a=o.getContext("2d"))||void 0===a||a.drawImage(e,0,0,o.width,o.height);const i=downsample(o.getContext("2d").getImageData(0,0,o.width,o.height),Math.floor(o.width*t),Math.floor(o.height*t),0,0,o.width,o.height);return o.width=Math.floor(o.width*t),o.height=Math.floor(o.height*t),null===(r=o.getContext("2d"))||void 0===r||r.putImageData(i,0,0),o}const useMask=(e,t)=>{const[a,r]=useImageHook(e.maskSrc,"anonymous"),o=e.maskSrc?r:"loaded";return(0,exports.useImageLoader)(o,e.id+"-mask"),react_1.default.useMemo((()=>{if(!a)return t;if(!t||!t.width||!t.height)return t;const r=createCanvas();r.width=Math.max(t.width,1),r.height=Math.max(t.height,1);const o=r.getContext("2d");if(!o)return t;o.drawImage(t,0,0),o.globalCompositeOperation="source-in";const i=getCrop(a,e);return o.drawImage(a,i.x,i.y,i.width,i.height,0,0,t.width,t.height),r}),[t,a,e.a.width,e.a.height])},useCornerRadiusAndCrop=(e,t,a,r,o=0,i=!1)=>{const n=Math.floor(Math.max(e.a.width*r,1)),h=Math.floor(Math.max(e.a.height*r,1)),d=Math.min(o*r,n/2,h/2),c=Math.max(e.a.width/a.width,e.a.height/a.height)*r,l=e.page._exporting&&flags_1.flags.imageDownScalingEnabled&&c<1&&!i,s=0===a.x&&0===a.y&&a.width===(null==t?void 0:t.width)&&a.height===(null==t?void 0:t.height),u=react_1.default.useMemo((()=>{if(!t||!t.width||!t.height)return;return s&&0===d&&!l?void 0:createCanvas()}),[t,d,l,s]);return react_1.default.useLayoutEffect((()=>{if(!u||!t)return;u.width=n,u.height=h;const e=u.getContext("2d");if(!e)return;d&&(e.beginPath(),e.moveTo(d,0),e.lineTo(n-d,0),e.arc(n-d,d,d,3*Math.PI/2,0,!1),e.lineTo(n,h-d),e.arc(n-d,h-d,d,0,Math.PI/2,!1),e.lineTo(d,h),e.arc(d,h-d,d,Math.PI/2,Math.PI,!1),e.lineTo(0,d),e.arc(d,d,d,Math.PI,3*Math.PI/2,!1),e.clip());const r=l?downScaleCanvas(t,c):t,o=l?{x:Math.floor(a.x*c),y:Math.floor(a.y*c),width:Math.floor(a.width*c),height:Math.floor(a.height*c)}:a;e.drawImage(r,o.x,o.y,o.width,o.height,0,0,u.width,u.height)}),[u,e.a.width,e.a.height,a.x,a.y,a.width,a.height,o,r,i,e.page._exporting,l]),react_1.default.useEffect((()=>()=>{u&&"CANVAS"===u.nodeName&&konva_1.default.Util.releaseCanvas(u)}),[u]),u||t},useClip=(e,t,a,r)=>{const o=useSizeFixer(e.clipSrc||""),[i,n]=useImageHook(o,"anonymous"),h=e.clipSrc?n:"loaded";(0,exports.useImageLoader)(h,e.id+"-clip");const d=react_1.default.useMemo((()=>{if(t&&i)return createCanvas()}),[t,i]);react_1.default.useLayoutEffect((()=>{var r;if(!i)return;if(!t||!t.width||!t.height)return;if(!i||!i.width||!i.height)return;if(!d)return;const o=createCanvas(),n=Math.max(e.a.width/i.width*a,e.a.height/i.height*a);o.width=i.width*n,o.height=i.height*n,null===(r=o.getContext("2d"))||void 0===r||r.drawImage(i,0,0,o.width,o.height),d.width=Math.max(t.width,1),d.height=Math.max(t.height,1);const h=d.getContext("2d");h&&(h.save(),h.drawImage(o,0,0,t.width,t.height),konva_1.default.Util.releaseCanvas(o),h.globalCompositeOperation="source-in",h.drawImage(t,0,0,d.width,d.height),h.restore())}),[d,t,i,e.a.width,e.a.height,a,...r]);return e.clipSrc&&i?d:t},PLACEHOLDER_CANVAS=createCanvas(),LoadingPlaceholder=(0,mobx_react_lite_1.observer)((({element:e})=>{const t=Math.min(30,e.a.width/4,e.a.height/4),a=react_1.default.useRef(null);return react_1.default.useEffect((()=>{const e=a.current;if(!e)return;const t=new konva_1.default.Animation((t=>{e.rotate(((null==t?void 0:t.timeDiff)||0)/2)}),e.getLayer());return t.start(),()=>{t.stop()}})),react_1.default.createElement(react_konva_1.Group,{x:e.x,y:e.y,rotation:e.rotation,listening:!1,opacity:e.a.opacity,hideInExport:!e.showInExport},react_1.default.createElement(react_konva_1.Rect,{width:e.a.width,height:e.a.height,fill:"rgba(124, 173, 212, 0.8)"}),react_1.default.createElement(react_konva_1.Arc,{ref:a,x:e.a.width/2,y:e.a.height/2,fill:"white",outerRadius:Math.abs(t),innerRadius:Math.max(1,t-5),angle:270}))})),ErrorPlaceholder=(0,mobx_react_lite_1.observer)((({element:e})=>{const t="Can not load the image...",a=Math.max(10,Math.min(30,e.a.width/25));return react_1.default.createElement(react_konva_1.Group,{x:e.x,y:e.y,rotation:e.rotation,listening:!1,opacity:e.a.opacity,hideInExport:!e.showInExport},react_1.default.createElement(react_konva_1.Rect,{width:e.a.width,height:e.a.height,fill:"rgba(223, 102, 102, 0.8)"}),react_1.default.createElement(react_konva_1.Text,{text:t,fontSize:a,width:e.a.width,height:e.a.height,align:"center",fill:"white",verticalAlign:"middle",padding:5}))}));let useImageHook=use_image_1.default;const setImageLoaderHook=e=>{useImageHook=e};exports.setImageLoaderHook=setImageLoaderHook;const useImageLoader=(e,t)=>{const a=react_1.default.useRef(),r=()=>{var e;null===(e=a.current)||void 0===e||e.call(a),a.current=void 0};react_1.default.useEffect((()=>r),[]),react_1.default.useLayoutEffect((()=>{"loading"!==e||a.current||(a.current=(0,loader_1.incrementLoader)(`image ${t}`)),"loading"!==e&&r(),"failed"===e&&(0,loader_1.triggerLoadError)(`image ${t}`)}),[e])};exports.useImageLoader=useImageLoader;const usePreviousImage=({image:e,status:t,type:a})=>{const r=react_1.default.useRef();react_1.default.useEffect((()=>{r.current=e||r.current}),[e]);return"failed"!==t||"failed"!==t&&"svg"===a?r.current:void 0},useImageSource=e=>{const[t,a]=react_1.default.useReducer((e=>e+1),0),r=react_1.default.useRef("loading"),o=react_1.default.useRef(e.src),i=react_1.default.useRef(e.src);return i.current!==e.src&&(i.current=e.src,r.current="loading"),react_1.default.useEffect((()=>{if("image"===e.type)return;if(!e.src)return;let t=!1;return(async()=>{r.current="loading",a();const i=await svg.urlToString(e.src),n=svg.fixSize(i),h=svg.replaceColors(n,e.colorsReplace);t||(o.current=h,r.current="loaded",a())})(),()=>{t=!0}}),[e.src,JSON.stringify(e.colorsReplace)]),"image"===e.type?[e.src,"loaded"]:[o.current,r.current]};exports.ImageElement=(0,mobx_react_lite_1.observer)((({element:e,store:t})=>{var a;const[r,o]=react_1.default.useState(!1),i=react_1.default.useRef(null),n=react_1.default.useRef(null),[h,d]=react_1.default.useState(!1),c=t.selectedElements.indexOf(e)>=0,[l,s]=useImageSource(e),[u,g]=useImageHook(l,"anonymous"),f="svg"!==e.type||"loaded"===s?g:"loading";(0,exports.useImageLoader)(f,e.id);const _=usePreviousImage({image:u,status:g,type:e.type}),m=useMask(e,useFlip(e,u||_,t._elementsPixelRatio))||PLACEHOLDER_CANVAS;let{cropX:p,cropY:w,cropWidth:x,cropHeight:v}=e;"loaded"!==g&&(p=w=0,x=v=1);const y=m.width*x,M=m.height*v,b=e.a.width/e.a.height;let E,k;const C=y/M,I="svg"===e.type;I?(E=y,k=M):b>=C?(E=y,k=y/b):(E=M*b,k=M);const S={x:m.width*p,y:m.height*w,width:E,height:k},R=null!==(a=e.cornerRadius)&&void 0!==a?a:0;let L=useClip(e,useCornerRadiusAndCrop(e,m,S,t._elementsPixelRatio,R,r||e._cropModeEnabled||"svg"===e.type),t._elementsPixelRatio,[S,R,t._elementsPixelRatio]);const O=Math.max(e.a.width/E,e.a.height/k);react_1.default.useEffect((()=>{var t;if(!e._cropModeEnabled)return;const a=null===(t=i.current)||void 0===t?void 0:t.getStage();function r(t){e._cropModeEnabled&&t.target!==n.current&&e.toggleCropMode(!1)}function o(t){e._cropModeEnabled&&"CANVAS"!==t.target.nodeName&&e.toggleCropMode(!1)}return document.body.addEventListener("click",o),null==a||a.on("click",r),null==a||a.on("tap",r),()=>{document.body.removeEventListener("click",o),document.body.removeEventListener("touchstart",o),null==a||a.off("click",r),null==a||a.off("click",r)}}),[e._cropModeEnabled]),react_1.default.useLayoutEffect((()=>{if(r||e._cropModeEnabled)return;(0,apply_filters_1.applyFilter)(i.current,e);return(0,mobx_1.autorun)((()=>{(0,apply_filters_1.applyFilter)(i.current,e)}),{delay:100})}),[m,r,x,v,e._cropModeEnabled]),react_1.default.useLayoutEffect((()=>{var t;r||e._cropModeEnabled?null===(t=i.current)||void 0===t||t.clearCache():(0,apply_filters_1.applyFilter)(i.current,e)}),[r,e.a.width,e.a.height,e._cropModeEnabled]),react_1.default.useEffect((()=>{(0,apply_filters_1.applyFilter)(i.current,e)}),[e.shadowEnabled,e.shadowBlur,e.cornerRadius,e.shadowColor,e.shadowOffsetX,e.shadowOffsetY,e.shadowOpacity]);const P=react_1.default.useRef(null),X=react_1.default.useRef(null),Y=react_1.default.useRef(null);react_1.default.useLayoutEffect((()=>{e._cropModeEnabled&&(X.current.nodes([P.current]),Y.current.nodes([n.current]))}),[e._cropModeEnabled]);const A=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 a=t.target.width()*t.target.scaleX(),r=t.target.height()*t.target.scaleY(),o=Math.min(1,E/a),i=Math.min(1,k/r),n=1-o,h=Math.min(n,Math.max(0,Math.round(-t.target.x())/a)),d=1-i,c=Math.min(d,Math.max(0,Math.round(-t.target.y())/r));t.target.setAttrs({x:-h*m.width,y:-c*m.height,scaleX:1,scaleY:1}),e.set({cropX:h,cropY:c,cropWidth:o,cropHeight:i})},H=()=>{"svg"!==e.type&&e.contentEditable&&setTimeout((()=>{e.toggleCropMode(!0)}))},T="svg"===e.type&&_,D="loading"===g&&!T,W="failed"===g,F=!D&&!W,q=react_1.default.useRef({cropX:0,cropY:0,cropWidth:0,cropHeight:0}),z=F?e.a.opacity:0;(0,use_fadein_1.useFadeIn)(i,z);const B=e.selectable||"admin"===t.role,N=(0,screen_1.useMobile)();return react_1.default.createElement(react_1.default.Fragment,null,D&&react_1.default.createElement(LoadingPlaceholder,{element:e}),W&&react_1.default.createElement(ErrorPlaceholder,{element:e}),react_1.default.createElement(react_konva_1.Image,{ref:i,name:"element",id:e.id,image:L,x:e.a.x,y:e.a.y,width:e.a.width||1,height:e.a.height||1,rotation:e.rotation,opacity:z,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,customCrop:S,listening:B,draggable:N?e.draggable&&c:e.draggable,preventDefault:!N||c,hideInExport:!e.showInExport,onMouseEnter:()=>{d(!0)},onMouseLeave:()=>{d(!1)},onDragStart:()=>{t.history.startTransaction()},onDragMove:t=>{e.set({x:t.target.x(),y:t.target.y()})},onDragEnd:a=>{e.set({x:a.target.x(),y:a.target.y()}),t.history.endTransaction()},onDblClick:H,onDblTap:H,onTransformStart:()=>{o(!0),t.history.startTransaction(),q.current={cropX:e.cropX,cropY:e.cropY,cropWidth:e.cropWidth,cropHeight:e.cropHeight}},onTransform:t=>{var a;const r=t.currentTarget,o=Math.abs(r.scaleX()-1)<1e-7?1:r.scaleX(),i=Math.abs(r.scaleY()-1)<1e-7?1:r.scaleY();r.scaleX(1),r.scaleY(1);const n=null===(a=t.target.getStage())||void 0===a?void 0:a.findOne("Transformer"),h=1-E/m.width,d=Math.min(h,Math.max(0,e.cropX)),c=1-k/m.height,l=Math.min(c,Math.max(0,e.cropY)),s=n.getActiveAnchor(),u=!(s.indexOf("middle")>=0||s.indexOf("center")>=0),g=!u&&o<1&&q.current.cropHeight>k/m.height;let f=u?e.cropWidth:e.cropWidth*o;g&&(f=e.cropWidth);const _=!u&&i<1&&q.current.cropWidth>E/m.width;let p=u?e.cropHeight:e.cropHeight*i;_&&(p=e.cropHeight),I&&(f=e.cropWidth,p=e.cropHeight),e.set({cropX:d,cropY:l,x:r.x(),y:r.y(),width:r.width()*o,height:r.height()*i,rotation:t.target.rotation(),cropWidth:Math.min(f,1-d),cropHeight:Math.min(p,1-l)})},onTransformEnd:a=>{const r=a.currentTarget;e.set({width:r.width(),height:r.height(),x:r.x(),y:r.y(),rotation:a.target.rotation(),cropWidth:E/m.width,cropHeight:k/m.height}),o(!1),t.history.endTransaction()}}),react_1.default.createElement(react_konva_1.Rect,{x:e.x,y:e.y,width:Math.max(e.a.width-e.borderSize,0),height:Math.max(e.a.height-e.borderSize,0),opacity:z,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,R-e.borderSize),hideInExport:!e.showInExport}),e._cropModeEnabled&&react_1.default.createElement(react_konva_utils_1.Portal,{selector:".page-abs-container",enabled:!0},react_1.default.createElement(react_konva_1.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)"}),react_1.default.createElement(react_konva_1.Image,{listening:!1,image:L,x:e.x,y:e.y,width:e.a.width,height:e.a.height,rotation:e.rotation,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur}),react_1.default.createElement(react_konva_1.Group,{x:e.x,y:e.y,rotation:e.rotation,scaleX:O,scaleY:O},react_1.default.createElement(react_konva_1.Image,{image:m,ref:n,opacity:.4,draggable:!0,x:-e.cropX*m.width,y:-e.cropY*m.height,onDragMove:A,onTransform:A}),react_1.default.createElement(react_konva_1.Transformer,{ref:Y,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}),react_1.default.createElement(react_konva_1.Rect,{width:E,height:k,ref:P,listening:!1,onTransform:t=>{t.target.x()<-e.cropX*m.width-1e-9&&(t.target.x(-e.cropX*m.width),t.target.scaleX(1)),t.target.y()<-e.cropY*m.height-1e-9&&(t.target.y(-e.cropY*m.height),t.target.scaleY(1));const a=Math.min(1,Math.max(0,e.cropX+t.target.x()/m.width)),r=Math.min(1,Math.max(0,t.target.y()/m.height+e.cropY)),o=t.target.width()*t.target.scaleX(),i=t.target.height()*t.target.scaleY(),n=Math.min(1-a,o/m.width),h=Math.min(1-r,i/m.height),d=t.target.getAbsolutePosition(t.target.getParent().getParent());t.target.scale({x:1,y:1}),t.target.position({x:0,y:0}),e.set({x:d.x,y:d.y,cropX:a,cropY:r,cropWidth:n,cropHeight:h,width:Math.min(o*O,m.width*(1-a)*O),height:Math.min(i*O,m.height*(1-r)*O)})}}),react_1.default.createElement(react_konva_1.Transformer,{ref:X,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}))),(h||c)&&react_1.default.createElement(highlighter_1.Highlighter,{element:e}))}));
1
+ "use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,t,a,r){void 0===r&&(r=a);var o=Object.getOwnPropertyDescriptor(t,a);o&&!("get"in o?!t.__esModule:o.writable||o.configurable)||(o={enumerable:!0,get:function(){return t[a]}}),Object.defineProperty(e,r,o)}:function(e,t,a,r){void 0===r&&(r=a),e[r]=t[a]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),__importStar=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var a in e)"default"!==a&&Object.prototype.hasOwnProperty.call(e,a)&&__createBinding(t,e,a);return __setModuleDefault(t,e),t},__importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.ImageElement=exports.useImageLoader=exports.setImageLoaderHook=void 0;const react_1=__importDefault(require("react")),mobx_react_lite_1=require("mobx-react-lite"),mobx_1=require("mobx"),react_konva_1=require("react-konva"),use_image_1=__importDefault(require("use-image")),konva_1=__importDefault(require("konva")),react_konva_utils_1=require("react-konva-utils"),highlighter_1=require("./highlighter"),loader_1=require("../utils/loader"),svg=__importStar(require("../utils/svg")),flags_1=require("../utils/flags"),apply_filters_1=require("./apply-filters"),use_fadein_1=require("./use-fadein"),screen_1=require("../utils/screen");function createCanvas(){return document.createElement("canvas")}async function getFixedUrl(e){if(!(e.indexOf("data:image/svg+xml")>=0||e.indexOf(".svg")>=0))return e;const t=await svg.urlToString(e),a=svg.fixSize(t);return svg.svgToURL(a)}const useSizeFixer=e=>{const[t,a]=react_1.default.useState(e);return react_1.default.useEffect((()=>{(async()=>{const r=await getFixedUrl(e);r!==t&&a(r)})()}),[e]),t},useFlip=(e,t,a)=>{const r=react_1.default.useMemo((()=>{var r,o;const{flipX:i,flipY:n}=e,h="svg"===e.type||e.src.indexOf("data:image/svg+xml")>=0||e.src.indexOf(".svg")>=0,d=navigator.userAgent.toLowerCase().indexOf("firefox")>-1&&h||e.maskSrc;if(!i&&!n&&!d)return t;if(!t||!t.width||!t.height)return null;const c=createCanvas();let l=1;"svg"===e.type&&(l=Math.max(e.a.width/t.width*a,e.a.height/t.height*a)),c.width=Math.max(t.width*l,1),c.height=Math.max(t.height*l,1);let s=i?-c.width:0,u=n?-c.height:0;return null===(r=c.getContext("2d"))||void 0===r||r.scale(i?-1:1,n?-1:1),null===(o=c.getContext("2d"))||void 0===o||o.drawImage(t,s,u,c.width,c.height),c}),[e.maskSrc,e.flipX,e.flipY,t,e.a.width,e.a.height,a]);return react_1.default.useEffect((()=>()=>{r&&"CANVAS"===r.nodeName&&konva_1.default.Util.releaseCanvas(r)}),[r]),r};function getCrop(e,t){const a=t.width/t.height;let r,o;a>=e.width/e.height?(r=e.width,o=e.width/a):(r=e.height*a,o=e.height);return{x:(e.width-r)/2,y:(e.height-o)/2,width:r,height:o}}function downsample(e,t,a,r,o,i,n){for(var h=new ImageData(t,a),d=new Int32Array(e.data.buffer),c=e.width,l=new Int32Array(h.data.buffer),s=h.width,u=t/i,g=a/n,f=Math.round(1/u),_=Math.round(1/g),m=f*_,p=0;p<h.height;p++)for(var w=0;w<s;w++){for(var x=r+Math.round(w/u)+(o+Math.round(p/g))*c,v=0,M=0,y=0,b=0,E=0;E<_;E++)for(var k=0;k<f;k++){var C=d[x+k+E*c];v+=C<<24>>>24,M+=C<<16>>>24,y+=C<<8>>>24,b+=C>>>24}v=Math.round(v/m),M=Math.round(M/m),y=Math.round(y/m),b=Math.round(b/m),l[w+p*s]=b<<24|y<<16|M<<8|v}return h}function downScaleCanvas(e,t){var a,r;const o=createCanvas();o.width=e.width,o.height=e.height,null===(a=o.getContext("2d"))||void 0===a||a.drawImage(e,0,0,o.width,o.height);const i=downsample(o.getContext("2d").getImageData(0,0,o.width,o.height),Math.floor(o.width*t),Math.floor(o.height*t),0,0,o.width,o.height);return o.width=Math.floor(o.width*t),o.height=Math.floor(o.height*t),null===(r=o.getContext("2d"))||void 0===r||r.putImageData(i,0,0),o}const useMask=(e,t)=>{const[a,r]=useImageHook(e.maskSrc,"anonymous"),o=e.maskSrc?r:"loaded";return(0,exports.useImageLoader)(o,e.id+"-mask"),react_1.default.useMemo((()=>{if(!a)return t;if(!t||!t.width||!t.height)return t;const r=createCanvas();r.width=Math.max(t.width,1),r.height=Math.max(t.height,1);const o=r.getContext("2d");if(!o)return t;o.drawImage(t,0,0),o.globalCompositeOperation="source-in";const i=getCrop(a,e);return o.drawImage(a,i.x,i.y,i.width,i.height,0,0,t.width,t.height),r}),[t,a,e.a.width,e.a.height])},useCornerRadiusAndCrop=(e,t,a,r,o=0,i=!1)=>{const n=Math.floor(Math.max(e.a.width*r,1)),h=Math.floor(Math.max(e.a.height*r,1)),d=Math.min(o*r,n/2,h/2),c=Math.max(e.a.width/a.width,e.a.height/a.height)*r,l=e.page._exporting&&flags_1.flags.imageDownScalingEnabled&&c<1&&!i,s=0===a.x&&0===a.y&&a.width===(null==t?void 0:t.width)&&a.height===(null==t?void 0:t.height),u=react_1.default.useMemo((()=>{if(!t||!t.width||!t.height)return;return s&&0===d&&!l?void 0:createCanvas()}),[t,d,l,s]);return react_1.default.useLayoutEffect((()=>{if(!u||!t)return;u.width=n,u.height=h;const e=u.getContext("2d");if(!e)return;d&&(e.beginPath(),e.moveTo(d,0),e.lineTo(n-d,0),e.arc(n-d,d,d,3*Math.PI/2,0,!1),e.lineTo(n,h-d),e.arc(n-d,h-d,d,0,Math.PI/2,!1),e.lineTo(d,h),e.arc(d,h-d,d,Math.PI/2,Math.PI,!1),e.lineTo(0,d),e.arc(d,d,d,Math.PI,3*Math.PI/2,!1),e.clip());const r=l?downScaleCanvas(t,c):t,o=l?{x:Math.floor(a.x*c),y:Math.floor(a.y*c),width:Math.floor(a.width*c),height:Math.floor(a.height*c)}:a;e.drawImage(r,o.x,o.y,o.width,o.height,0,0,u.width,u.height)}),[u,e.a.width,e.a.height,a.x,a.y,a.width,a.height,o,r,i,e.page._exporting,l]),react_1.default.useEffect((()=>()=>{u&&"CANVAS"===u.nodeName&&konva_1.default.Util.releaseCanvas(u)}),[u]),u||t},useClip=(e,t,a,r)=>{const o=useSizeFixer(e.clipSrc||""),[i,n]=useImageHook(o,"anonymous"),h=e.clipSrc?n:"loaded";(0,exports.useImageLoader)(h,e.id+"-clip");const d=react_1.default.useMemo((()=>{if(t&&i)return createCanvas()}),[t,i]);react_1.default.useLayoutEffect((()=>{var r;if(!i)return;if(!t||!t.width||!t.height)return;if(!i||!i.width||!i.height)return;if(!d)return;const o=createCanvas(),n=Math.max(e.a.width/i.width*a,e.a.height/i.height*a);o.width=i.width*n,o.height=i.height*n,null===(r=o.getContext("2d"))||void 0===r||r.drawImage(i,0,0,o.width,o.height),d.width=Math.max(t.width,1),d.height=Math.max(t.height,1);const h=d.getContext("2d");h&&(h.save(),h.drawImage(o,0,0,t.width,t.height),konva_1.default.Util.releaseCanvas(o),h.globalCompositeOperation="source-in",h.drawImage(t,0,0,d.width,d.height),h.restore())}),[d,t,i,e.a.width,e.a.height,a,...r]);return e.clipSrc&&i?d:t},PLACEHOLDER_CANVAS=createCanvas(),LoadingPlaceholder=(0,mobx_react_lite_1.observer)((({element:e})=>{const t=Math.min(30,e.a.width/4,e.a.height/4),a=react_1.default.useRef(null);return react_1.default.useEffect((()=>{const e=a.current;if(!e)return;const t=new konva_1.default.Animation((t=>{e.rotate(((null==t?void 0:t.timeDiff)||0)/2)}),e.getLayer());return t.start(),()=>{t.stop()}})),react_1.default.createElement(react_konva_1.Group,{x:e.x,y:e.y,rotation:e.rotation,listening:!1,opacity:e.a.opacity,hideInExport:!e.showInExport},react_1.default.createElement(react_konva_1.Rect,{width:e.a.width,height:e.a.height,fill:"rgba(124, 173, 212, 0.8)"}),react_1.default.createElement(react_konva_1.Arc,{ref:a,x:e.a.width/2,y:e.a.height/2,fill:"white",outerRadius:Math.abs(t),innerRadius:Math.max(1,t-5),angle:270}))})),ErrorPlaceholder=(0,mobx_react_lite_1.observer)((({element:e})=>{const t="Can not load the image...",a=Math.max(10,Math.min(30,e.a.width/25));return react_1.default.createElement(react_konva_1.Group,{x:e.x,y:e.y,rotation:e.rotation,listening:!1,opacity:e.a.opacity,hideInExport:!e.showInExport},react_1.default.createElement(react_konva_1.Rect,{width:e.a.width,height:e.a.height,fill:"rgba(223, 102, 102, 0.8)"}),react_1.default.createElement(react_konva_1.Text,{text:t,fontSize:a,width:e.a.width,height:e.a.height,align:"center",fill:"white",verticalAlign:"middle",padding:5}))}));let useImageHook=use_image_1.default;const setImageLoaderHook=e=>{useImageHook=e};exports.setImageLoaderHook=setImageLoaderHook;const useImageLoader=(e,t)=>{const a=react_1.default.useRef(),r=()=>{var e;null===(e=a.current)||void 0===e||e.call(a),a.current=void 0};react_1.default.useEffect((()=>r),[]),react_1.default.useLayoutEffect((()=>{"loading"!==e||a.current||(a.current=(0,loader_1.incrementLoader)(`image ${t}`)),"loading"!==e&&r(),"failed"===e&&(0,loader_1.triggerLoadError)(`image ${t}`)}),[e])};exports.useImageLoader=useImageLoader;const usePreviousImage=({image:e,status:t,type:a})=>{const r=react_1.default.useRef();react_1.default.useEffect((()=>{r.current=e||r.current}),[e]);return"failed"!==t||"failed"!==t&&"svg"===a?r.current:void 0},useImageSource=e=>{const[t,a]=react_1.default.useReducer((e=>e+1),0),r=react_1.default.useRef("loading"),o=react_1.default.useRef(e.src),i=react_1.default.useRef(e.src);return i.current!==e.src&&(i.current=e.src,r.current="loading"),react_1.default.useEffect((()=>{if("image"===e.type)return;if(!e.src)return;let t=!1;return(async()=>{r.current="loading",a();const i=await svg.urlToString(e.src),n=svg.fixSize(i),h=svg.replaceColors(n,e.colorsReplace);t||(o.current=h,r.current="loaded",a())})(),()=>{t=!0}}),[e.src,JSON.stringify(e.colorsReplace)]),"image"===e.type?[e.src,"loaded"]:[o.current,r.current]};exports.ImageElement=(0,mobx_react_lite_1.observer)((({element:e,store:t})=>{var a;const[r,o]=react_1.default.useState(!1),i=react_1.default.useRef(null),n=react_1.default.useRef(null),[h,d]=react_1.default.useState(!1),c=t.selectedElements.indexOf(e)>=0,[l,s]=useImageSource(e),[u,g]=useImageHook(l,"anonymous"),f="svg"!==e.type||"loaded"===s?g:"loading";(0,exports.useImageLoader)(f,e.id);const _=usePreviousImage({image:u,status:g,type:e.type}),m=useMask(e,useFlip(e,u||_,t._elementsPixelRatio))||PLACEHOLDER_CANVAS;let{cropX:p,cropY:w,cropWidth:x,cropHeight:v}=e;"loaded"!==g&&(p=w=0,x=v=1);const M=m.width*x,y=m.height*v,b=e.a.width/e.a.height;let E,k;const C=M/y,I="svg"===e.type;I?(E=M,k=y):b>=C?(E=M,k=M/b):(E=y*b,k=y);const S={x:m.width*p,y:m.height*w,width:E,height:k},R=null!==(a=e.cornerRadius)&&void 0!==a?a:0;let L=useClip(e,useCornerRadiusAndCrop(e,m,S,t._elementsPixelRatio,R,r||e._cropModeEnabled||"svg"===e.type),t._elementsPixelRatio,[S,R,t._elementsPixelRatio]);const O=Math.max(e.a.width/E,e.a.height/k);react_1.default.useEffect((()=>{var t;if(!e._cropModeEnabled)return;const a=null===(t=i.current)||void 0===t?void 0:t.getStage();function r(t){e._cropModeEnabled&&t.target!==n.current&&e.toggleCropMode(!1)}function o(t){e._cropModeEnabled&&"CANVAS"!==t.target.nodeName&&e.toggleCropMode(!1)}return document.body.addEventListener("click",o),null==a||a.on("click",r),null==a||a.on("tap",r),()=>{document.body.removeEventListener("click",o),document.body.removeEventListener("touchstart",o),null==a||a.off("click",r),null==a||a.off("click",r)}}),[e._cropModeEnabled]),react_1.default.useLayoutEffect((()=>{if(r||e._cropModeEnabled)return;(0,apply_filters_1.applyFilter)(i.current,e);return(0,mobx_1.autorun)((()=>{(0,apply_filters_1.applyFilter)(i.current,e)}),{delay:100})}),[m,r,x,v,e._cropModeEnabled]),react_1.default.useLayoutEffect((()=>{var t;r||e._cropModeEnabled?null===(t=i.current)||void 0===t||t.clearCache():(0,apply_filters_1.applyFilter)(i.current,e)}),[r,e.a.width,e.a.height,e._cropModeEnabled]),react_1.default.useEffect((()=>{(0,apply_filters_1.applyFilter)(i.current,e)}),[e.shadowEnabled,e.shadowBlur,e.cornerRadius,e.shadowColor,e.shadowOffsetX,e.shadowOffsetY,e.shadowOpacity]);const P=react_1.default.useRef(null),X=react_1.default.useRef(null),Y=react_1.default.useRef(null);react_1.default.useLayoutEffect((()=>{e._cropModeEnabled&&(X.current.nodes([P.current]),Y.current.nodes([n.current]))}),[e._cropModeEnabled]);const A=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 a=t.target.width()*t.target.scaleX(),r=t.target.height()*t.target.scaleY(),o=Math.min(1,E/a),i=Math.min(1,k/r),n=1-o,h=Math.min(n,Math.max(0,Math.round(-t.target.x())/a)),d=1-i,c=Math.min(d,Math.max(0,Math.round(-t.target.y())/r));t.target.setAttrs({x:-h*m.width,y:-c*m.height,scaleX:1,scaleY:1}),e.set({cropX:h,cropY:c,cropWidth:o,cropHeight:i})},H=()=>{"svg"!==e.type&&e.contentEditable&&setTimeout((()=>{e.toggleCropMode(!0)}))},D="svg"===e.type&&_,W="loading"===g&&!D,T="failed"===g,F=!W&&!T,q=react_1.default.useRef({cropX:0,cropY:0,cropWidth:0,cropHeight:0}),z=F?e.a.opacity:0;(0,use_fadein_1.useFadeIn)(i,z);const B=e.selectable||"admin"===t.role,N=(0,screen_1.useMobile)();return react_1.default.createElement(react_1.default.Fragment,null,W&&react_1.default.createElement(LoadingPlaceholder,{element:e}),T&&react_1.default.createElement(ErrorPlaceholder,{element:e}),react_1.default.createElement(react_konva_1.Image,{ref:i,name:"element",id:e.id,image:L,x:e.a.x,y:e.a.y,width:e.a.width||1,height:e.a.height||1,rotation:e.rotation,opacity:z,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,customCrop:S,listening:B,draggable:N?e.draggable&&c:e.draggable,preventDefault:!N||c,hideInExport:!e.showInExport,onMouseEnter:()=>{d(!0)},onMouseLeave:()=>{d(!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:H,onDblTap:H,onTransformStart:()=>{o(!0),q.current={cropX:e.cropX,cropY:e.cropY,cropWidth:e.cropWidth,cropHeight:e.cropHeight}},onTransform:t=>{var a;const r=t.currentTarget,o=Math.abs(r.scaleX()-1)<1e-7?1:r.scaleX(),i=Math.abs(r.scaleY()-1)<1e-7?1:r.scaleY();r.scaleX(1),r.scaleY(1);const n=null===(a=t.target.getStage())||void 0===a?void 0:a.findOne("Transformer"),h=1-E/m.width,d=Math.min(h,Math.max(0,e.cropX)),c=1-k/m.height,l=Math.min(c,Math.max(0,e.cropY)),s=n.getActiveAnchor(),u=!(s.indexOf("middle")>=0||s.indexOf("center")>=0),g=!u&&o<1&&q.current.cropHeight>k/m.height;let f=u?e.cropWidth:e.cropWidth*o;g&&(f=e.cropWidth);const _=!u&&i<1&&q.current.cropWidth>E/m.width;let p=u?e.cropHeight:e.cropHeight*i;_&&(p=e.cropHeight),I&&(f=e.cropWidth,p=e.cropHeight),e.set({cropX:d,cropY:l,x:r.x(),y:r.y(),width:r.width()*o,height:r.height()*i,rotation:t.target.rotation(),cropWidth:Math.min(f,1-d),cropHeight:Math.min(p,1-l)})},onTransformEnd:t=>{const a=t.currentTarget;e.set({width:a.width(),height:a.height(),x:a.x(),y:a.y(),rotation:t.target.rotation(),cropWidth:E/m.width,cropHeight:k/m.height}),o(!1)}}),react_1.default.createElement(react_konva_1.Rect,{x:e.x,y:e.y,width:Math.max(e.a.width-e.borderSize,0),height:Math.max(e.a.height-e.borderSize,0),opacity:z,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,R-e.borderSize),hideInExport:!e.showInExport}),e._cropModeEnabled&&react_1.default.createElement(react_konva_utils_1.Portal,{selector:".page-abs-container",enabled:!0},react_1.default.createElement(react_konva_1.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)"}),react_1.default.createElement(react_konva_1.Image,{listening:!1,image:L,x:e.x,y:e.y,width:e.a.width,height:e.a.height,rotation:e.rotation,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur}),react_1.default.createElement(react_konva_1.Group,{x:e.x,y:e.y,rotation:e.rotation,scaleX:O,scaleY:O},react_1.default.createElement(react_konva_1.Image,{image:m,ref:n,opacity:.4,draggable:!0,x:-e.cropX*m.width,y:-e.cropY*m.height,onDragMove:A,onTransform:A}),react_1.default.createElement(react_konva_1.Transformer,{ref:Y,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}),react_1.default.createElement(react_konva_1.Rect,{width:E,height:k,ref:P,listening:!1,onTransform:t=>{t.target.x()<-e.cropX*m.width-1e-9&&(t.target.x(-e.cropX*m.width),t.target.scaleX(1)),t.target.y()<-e.cropY*m.height-1e-9&&(t.target.y(-e.cropY*m.height),t.target.scaleY(1));const a=Math.min(1,Math.max(0,e.cropX+t.target.x()/m.width)),r=Math.min(1,Math.max(0,t.target.y()/m.height+e.cropY)),o=t.target.width()*t.target.scaleX(),i=t.target.height()*t.target.scaleY(),n=Math.min(1-a,o/m.width),h=Math.min(1-r,i/m.height),d=t.target.getAbsolutePosition(t.target.getParent().getParent());t.target.scale({x:1,y:1}),t.target.position({x:0,y:0}),e.set({x:d.x,y:d.y,cropX:a,cropY:r,cropWidth:n,cropHeight:h,width:Math.min(o*O,m.width*(1-a)*O),height:Math.min(i*O,m.height*(1-r)*O)})}}),react_1.default.createElement(react_konva_1.Transformer,{ref:X,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}))),(h||c)&&react_1.default.createElement(highlighter_1.Highlighter,{element:e}))}));
package/canvas/line-element.js CHANGED
@@ -1 +1 @@
1
- "use strict";var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.LineElement=exports.getLinePositionFromMiddlePoints=exports.getMiddlePoints=void 0;const react_1=__importDefault(require("react")),mobx_react_lite_1=require("mobx-react-lite"),react_konva_1=require("react-konva"),react_konva_utils_1=require("react-konva-utils"),highlighter_1=require("./highlighter"),use_transformer_snap_1=require("./use-transformer-snap"),screen_1=require("../utils/screen");function getMiddlePoints(e){const{x:t,y:a,width:r,height:o,rotation:n}=e.a,i=n*Math.PI/180,s={x:t+o/2*Math.cos(i+Math.PI/2),y:a+o/2*Math.sin(i+Math.PI/2)};return{middleLeft:s,middleRight:{x:s.x+r*Math.cos(i),y:s.y+r*Math.sin(i)}}}function getLinePositionFromMiddlePoints(e,t,a){const r=Math.sqrt(Math.pow(t.x-e.x,2)+Math.pow(t.y-e.y,2)),o=Math.atan2(t.y-e.y,t.x-e.x),n=180*o/Math.PI;return{x:e.x+Math.cos(o-Math.PI/2)*a/2,y:e.y+Math.sin(o-Math.PI/2)*a/2,width:r,height:a,rotation:n}}exports.getMiddlePoints=getMiddlePoints,exports.getLinePositionFromMiddlePoints=getLinePositionFromMiddlePoints;const getAnchorAttrs=(e,t)=>({offsetX:5/e,offsetY:5/e,width:10/e,height:10/e,fill:"white",stroke:"rgb(0, 161, 255)",strokeWidth:2,strokeScaleEnabled:!1,draggable:!0,dragDistance:0,onMouseEnter:e=>{e.target.getStage().container().style.cursor="crosshair"},onMouseLeave:e=>{e.target.getStage().container().style.cursor=""},onDragStart:e=>{t.history.startTransaction()},onDragEnd:e=>{t.history.endTransaction()}}),Head=(0,mobx_react_lite_1.observer)((({element:e,type:t})=>{const a={strokeWidth:e.height,stroke:e.a.color,lineCap:"round",lineJoin:"round",fill:e.a.color,opacity:e.a.opacity};return react_1.default.createElement(react_1.default.Fragment,null,"arrow"===t&&react_1.default.createElement(react_konva_1.Line,Object.assign({points:[3*e.height,2*-e.height,0,0,3*e.height,2*e.height]},a)),"triangle"===t&&react_1.default.createElement(react_konva_1.Line,Object.assign({points:[3*e.height,2*-e.height,0,0,3*e.height,2*e.height],closed:!0},a)),"bar"===t&&react_1.default.createElement(react_konva_1.Line,Object.assign({points:[0,2*-e.height,0,2*e.height],closed:!0},a)),"square"===t&&react_1.default.createElement(react_konva_1.Line,Object.assign({points:[0,2*-e.height,4*e.height,2*-e.height,4*e.height,2*e.height,0,2*e.height],closed:!0},a)),"circle"===t&&react_1.default.createElement(react_konva_1.Circle,Object.assign({x:2*e.height,y:0,radius:2*e.height},a)))}));exports.LineElement=(0,mobx_react_lite_1.observer)((({element:e,store:t})=>{const a=react_1.default.useRef(null),r=react_1.default.useRef(null),o=react_1.default.useRef(null),n=e.selectable||"admin"===t.role,i=(0,screen_1.useMobile)(),[s,l]=react_1.default.useState(!1),h=t.selectedElements.indexOf(e)>=0&&1===t.selectedElements.length,{middleLeft:c,middleRight:d}=getMiddlePoints(e);return(0,use_transformer_snap_1.useAnchorSnap)(r,[a],[h]),(0,use_transformer_snap_1.useAnchorSnap)(o,[a],[h]),react_1.default.createElement(react_1.default.Fragment,null,react_1.default.createElement(react_konva_1.Line,{ref:a,name:"element",id:e.id,x:e.a.x,y:e.a.y,points:[0,0,e.a.width,0],offsetY:-e.a.height/2,strokeWidth:e.a.height,hitStrokeWidth:Math.max(e.a.height,20),dash:e.dash.map((t=>t*e.a.height)),stroke:e.a.color,rotation:e.a.rotation,opacity:e.animated("opacity"),shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,listening:n,draggable:i?e.draggable&&h:e.draggable,preventDefault:!i||h,hideInExport:!e.showInExport,onMouseEnter:()=>{l(!0)},onMouseLeave:()=>{l(!1)},onDragStart:()=>{t.history.startTransaction()},onDragMove:t=>{e.set({x:t.target.x(),y:t.target.y()})},onDragEnd:a=>{e.set({x:a.target.x(),y:a.target.y()}),t.history.endTransaction()},onTransformStart:()=>{t.history.startTransaction()},onTransform:t=>{const a=t.target.scaleX();t.target.scaleX(1),t.target.scaleY(1),e.set({height:e.height*a,width:e.width*a,x:t.target.x(),y:t.target.y(),rotation:t.target.rotation()})},onTransformEnd:e=>{t.history.endTransaction()}}),react_1.default.createElement(react_konva_1.Group,{x:c.x,y:c.y,rotation:e.rotation},react_1.default.createElement(Head,{element:e,type:e.startHead})),react_1.default.createElement(react_konva_1.Group,{x:d.x,y:d.y,rotation:e.rotation+180},react_1.default.createElement(Head,{element:e,type:e.endHead})),s&&!h&&react_1.default.createElement(highlighter_1.Highlighter,{element:e}),h&&e.resizable&&react_1.default.createElement(react_konva_utils_1.Portal,{selector:".page-abs-container",enabled:!0},react_1.default.createElement(react_konva_1.Group,{visible:h},react_1.default.createElement(react_konva_1.Rect,Object.assign({x:c.x,y:c.y,ref:r,name:"line-anchor"},getAnchorAttrs(t.scale,t),{onDragMove:t=>{const a=getLinePositionFromMiddlePoints(t.target.position(),d,e.height);e.set({x:a.x,y:a.y,width:a.width,rotation:a.rotation})}})),react_1.default.createElement(react_konva_1.Rect,Object.assign({x:d.x,y:d.y,ref:o,name:"line-anchor"},getAnchorAttrs(t.scale,t),{onDragMove:t=>{const a=getLinePositionFromMiddlePoints(c,t.target.position(),e.height);e.set({x:a.x,y:a.y,width:a.width,rotation:a.rotation})}})))))}));
1
+ "use strict";var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.LineElement=exports.getLinePositionFromMiddlePoints=exports.getMiddlePoints=void 0;const react_1=__importDefault(require("react")),mobx_react_lite_1=require("mobx-react-lite"),react_konva_1=require("react-konva"),react_konva_utils_1=require("react-konva-utils"),highlighter_1=require("./highlighter"),use_transformer_snap_1=require("./use-transformer-snap"),screen_1=require("../utils/screen");function getMiddlePoints(e){const{x:t,y:a,width:r,height:o,rotation:n}=e.a,i=n*Math.PI/180,s={x:t+o/2*Math.cos(i+Math.PI/2),y:a+o/2*Math.sin(i+Math.PI/2)};return{middleLeft:s,middleRight:{x:s.x+r*Math.cos(i),y:s.y+r*Math.sin(i)}}}function getLinePositionFromMiddlePoints(e,t,a){const r=Math.sqrt(Math.pow(t.x-e.x,2)+Math.pow(t.y-e.y,2)),o=Math.atan2(t.y-e.y,t.x-e.x),n=180*o/Math.PI;return{x:e.x+Math.cos(o-Math.PI/2)*a/2,y:e.y+Math.sin(o-Math.PI/2)*a/2,width:r,height:a,rotation:n}}exports.getMiddlePoints=getMiddlePoints,exports.getLinePositionFromMiddlePoints=getLinePositionFromMiddlePoints;const getAnchorAttrs=(e,t)=>({offsetX:5/e,offsetY:5/e,width:10/e,height:10/e,fill:"white",stroke:"rgb(0, 161, 255)",strokeWidth:2,strokeScaleEnabled:!1,draggable:!0,dragDistance:0,onMouseEnter:e=>{e.target.getStage().container().style.cursor="crosshair"},onMouseLeave:e=>{e.target.getStage().container().style.cursor=""},onDragStart:e=>{t.history.startTransaction()},onDragEnd:e=>{t.history.endTransaction()}}),Head=(0,mobx_react_lite_1.observer)((({element:e,type:t})=>{const a={strokeWidth:e.height,stroke:e.a.color,lineCap:"round",lineJoin:"round",fill:e.a.color,opacity:e.a.opacity};return react_1.default.createElement(react_1.default.Fragment,null,"arrow"===t&&react_1.default.createElement(react_konva_1.Line,Object.assign({points:[3*e.height,2*-e.height,0,0,3*e.height,2*e.height]},a)),"triangle"===t&&react_1.default.createElement(react_konva_1.Line,Object.assign({points:[3*e.height,2*-e.height,0,0,3*e.height,2*e.height],closed:!0},a)),"bar"===t&&react_1.default.createElement(react_konva_1.Line,Object.assign({points:[0,2*-e.height,0,2*e.height],closed:!0},a)),"square"===t&&react_1.default.createElement(react_konva_1.Line,Object.assign({points:[0,2*-e.height,4*e.height,2*-e.height,4*e.height,2*e.height,0,2*e.height],closed:!0},a)),"circle"===t&&react_1.default.createElement(react_konva_1.Circle,Object.assign({x:2*e.height,y:0,radius:2*e.height},a)))}));exports.LineElement=(0,mobx_react_lite_1.observer)((({element:e,store:t})=>{const a=react_1.default.useRef(null),r=react_1.default.useRef(null),o=react_1.default.useRef(null),n=e.selectable||"admin"===t.role,i=(0,screen_1.useMobile)(),[s,l]=react_1.default.useState(!1),h=t.selectedElements.indexOf(e)>=0&&1===t.selectedElements.length,{middleLeft:c,middleRight:d}=getMiddlePoints(e);return(0,use_transformer_snap_1.useAnchorSnap)(r,[a],[h]),(0,use_transformer_snap_1.useAnchorSnap)(o,[a],[h]),react_1.default.createElement(react_1.default.Fragment,null,react_1.default.createElement(react_konva_1.Line,{ref:a,name:"element",id:e.id,x:e.a.x,y:e.a.y,points:[0,0,e.a.width,0],offsetY:-e.a.height/2,strokeWidth:e.a.height,hitStrokeWidth:Math.max(e.a.height,20),dash:e.dash.map((t=>t*e.a.height)),stroke:e.a.color,rotation:e.a.rotation,opacity:e.animated("opacity"),shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,listening:n,draggable:i?e.draggable&&h:e.draggable,preventDefault:!i||h,hideInExport:!e.showInExport,onMouseEnter:()=>{l(!0)},onMouseLeave:()=>{l(!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()})},onTransform:t=>{const a=t.target.scaleX();t.target.scaleX(1),t.target.scaleY(1),e.set({height:e.height*a,width:e.width*a,x:t.target.x(),y:t.target.y(),rotation:t.target.rotation()})}}),react_1.default.createElement(react_konva_1.Group,{x:c.x,y:c.y,rotation:e.rotation},react_1.default.createElement(Head,{element:e,type:e.startHead})),react_1.default.createElement(react_konva_1.Group,{x:d.x,y:d.y,rotation:e.rotation+180},react_1.default.createElement(Head,{element:e,type:e.endHead})),s&&!h&&react_1.default.createElement(highlighter_1.Highlighter,{element:e}),h&&e.resizable&&react_1.default.createElement(react_konva_utils_1.Portal,{selector:".page-abs-container",enabled:!0},react_1.default.createElement(react_konva_1.Group,{visible:h},react_1.default.createElement(react_konva_1.Rect,Object.assign({x:c.x,y:c.y,ref:r,name:"line-anchor"},getAnchorAttrs(t.scale,t),{onDragMove:t=>{const a=getLinePositionFromMiddlePoints(t.target.position(),d,e.height);e.set({x:a.x,y:a.y,width:a.width,rotation:a.rotation})}})),react_1.default.createElement(react_konva_1.Rect,Object.assign({x:d.x,y:d.y,ref:o,name:"line-anchor"},getAnchorAttrs(t.scale,t),{onDragMove:t=>{const a=getLinePositionFromMiddlePoints(c,t.target.position(),e.height);e.set({x:a.x,y:a.y,width:a.width,rotation:a.rotation})}})))))}));
package/canvas/page.js CHANGED
@@ -1 +1 @@
1
- "use strict";var __rest=this&&this.__rest||function(e,t){var r={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(r[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(n=Object.getOwnPropertySymbols(e);a<n.length;a++)t.indexOf(n[a])<0&&Object.prototype.propertyIsEnumerable.call(e,n[a])&&(r[n[a]]=e[n[a]])}return r},__importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.registerNextDomDrop=exports.registerTransformerAttrs=exports.setTransformerStyle=void 0;const react_1=__importDefault(require("react")),mobx_react_lite_1=require("mobx-react-lite"),mobx_1=require("mobx"),react_konva_1=require("react-konva"),use_image_1=__importDefault(require("use-image")),konva_1=__importDefault(require("konva")),element_1=__importDefault(require("./element")),use_transformer_snap_1=require("./use-transformer-snap"),image_element_1=require("./image-element"),crop_1=require("../utils/crop"),validate_key_1=require("../utils/validate-key"),math_1=require("../utils/math"),unit_1=require("../utils/unit"),flags_1=require("../utils/flags"),screen_1=require("../utils/screen"),rotateFillGroup=new konva_1.default.Group,rotateFillSize=20;rotateFillGroup.add(new konva_1.default.Rect({width:20,height:20,fill:"white"})),rotateFillGroup.add(new konva_1.default.Path({scaleX:20/24,scaleY:20/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 rotaterFill=rotateFillGroup.toCanvas({pixelRatio:2,width:20,height:20}),TRANSFORMER_STYLE={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:rotaterFill,fillPatternScaleX:t/20/2,fillPatternScaleY:t/20/2,fillPriority:"pattern",fillPatternRepeat:"no-repeat"})}}},setTransformerStyle=e=>{Object.assign(TRANSFORMER_STYLE,e)};exports.setTransformerStyle=setTransformerStyle;const transformerAttributes={text:{enabledAnchors:["top-left","top-right","middle-left","bottom-left","bottom-right","middle-right"]},svg:{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"]}};function registerTransformerAttrs(e,t){transformerAttributes[e]=transformerAttributes[e]||t,Object.assign(transformerAttributes[e],t)}exports.registerTransformerAttrs=registerTransformerAttrs;const Background=e=>react_1.default.createElement(react_konva_1.Rect,Object.assign({},e,{preventDefault:!1})),ImageBackground=e=>{var{url:t}=e,r=__rest(e,["url"]);const[n,a]=(0,use_image_1.default)(t,"anonymous"),o=n?(0,crop_1.getCrop)(n,{width:r.width,height:r.height},"center-middle"):{};return(0,image_element_1.useImageLoader)(a,"background"),react_1.default.createElement(react_konva_1.Image,Object.assign({image:n},r,o))},ColorBackground=e=>react_1.default.createElement(react_konva_1.Rect,Object.assign({},e)),PageBackground=e=>{const{background:t,scale:r,borderColor:n}=e,a=__rest(e,["background","scale","borderColor"]),o=react_1.default.useMemo((()=>!!konva_1.default.Util.colorToRGBA(t)),[t]),i=react_1.default.useMemo((()=>{const e=document.createElement("canvas"),t=30;e.width=60,e.height=60;const r=e.getContext("2d");return r&&(r.fillStyle="black",r.fillRect(t,0,t,t),r.fillRect(0,t,t,t)),e}),[]);return react_1.default.createElement(react_1.default.Fragment,null,react_1.default.createElement(react_konva_1.Rect,Object.assign({fillPatternImage:i},a,{opacity:.1,hideInExport:!0})),o?react_1.default.createElement(ColorBackground,Object.assign({fill:t},a)):react_1.default.createElement(ImageBackground,Object.assign({url:t},a)))},Selection=(0,mobx_react_lite_1.observer)((({selection:e})=>e.visible?react_1.default.createElement(react_konva_1.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)),TransformLabels=(0,mobx_react_lite_1.observer)((({x:e,y:t,width:r,height:n,rotation:a,anchor:o,store:i})=>{const l=(0,math_1.getClientRect)({x:e,y:t,width:r,height:n,rotation:konva_1.default.Util.radToDeg(a)});if(void 0===o)return null;const c=(n/2+70)*Math.cos(a-Math.PI/2),s=(n/2+70)*Math.sin(a-Math.PI/2),d=(0,unit_1.pxToUnitRounded)({unit:i.unit,dpi:i.dpi,px:r/i.scale,precious:"px"===i.unit?0:1})+" x "+(0,unit_1.pxToUnitRounded)({unit:i.unit,dpi:i.dpi,px:n/i.scale,precious:"px"===i.unit?0:1})+("px"===i.unit?"":" "+i.unit);return react_1.default.createElement(react_1.default.Fragment,null,react_1.default.createElement(react_konva_1.Label,{x:(l.minX+l.maxX)/2+c,y:(l.minY+l.maxY)/2+s,offsetX:14,offsetY:14,visible:"rotater"===o},react_1.default.createElement(react_konva_1.Tag,{cornerRadius:5,fill:"rgb(0, 161, 255)"}),react_1.default.createElement(react_konva_1.Text,{align:"center",verticalAlign:"middle",fill:"white",padding:8,text:Math.round(konva_1.default.Util.radToDeg(a)).toString()+"°"})),react_1.default.createElement(react_konva_1.Label,{x:(l.minX+l.maxX)/2,y:l.maxY+20,visible:"rotater"!==o},react_1.default.createElement(react_konva_1.Tag,{cornerRadius:5,fill:"rgb(0, 161, 255)",pointerDirection:"up",pointerHeight:0,pointerWidth:0}),react_1.default.createElement(react_konva_1.Text,{align:"center",verticalAlign:"middle",fill:"white",padding:8,text:d})))})),Elements=(0,mobx_react_lite_1.observer)((({elements:e,store:t})=>{const r=e.filter((e=>e.alwaysOnTop)),n=e.filter((e=>!e.alwaysOnTop)).concat(r);return react_1.default.createElement(react_1.default.Fragment,null,n.map((e=>react_1.default.createElement(element_1.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.")}}))))}));let onDomDrop=null;const registerNextDomDrop=e=>{onDomDrop=e};exports.registerNextDomDrop=registerNextDomDrop,exports.default=(0,mobx_react_lite_1.observer)((({store:e,page:t,width:r,height:n,pageControlsEnabled:a,backColor:o,pageBorderColor:i,activePageBorderColor:l,components:c,bleedColor:s})=>{const d=e.bleedVisible?t.bleed:0,u=t.computedWidth+2*d,m=t.computedHeight+2*d,g=(r-u*e.scale)/2,h=(n-m*e.scale)/2,f=react_1.default.useRef(null),_=react_1.default.useRef(null),p=react_1.default.useRef(null),b=null==a||a,[x,v]=react_1.default.useState(null),[E,y]=react_1.default.useState({}),k=e.selectedElements.find((e=>e._cropModeEnabled)),w=e.selectedShapes.filter((e=>!e.resizable)).length>0,Y=e.selectedShapes.filter((e=>!e.draggable)).length>0,S=e.selectedElements.filter((e=>!e.visible)).length>0;react_1.default.useLayoutEffect((()=>{var t,r,n;if(!f.current)return;const a=f.current.getStage(),o=e.selectedShapes.map((e=>e._cropModeEnabled?null:a.findOne("#"+e.id))).filter((e=>e)),i=1===e.selectedElements.length&&(null===(t=e.selectedElements[0])||void 0===t?void 0:t.type)||"many";transformerAttributes[i]?(f.current.setAttrs(Object.assign(Object.assign({},TRANSFORMER_STYLE),transformerAttributes[i])),"svg"!==i&&"image"!==i||e.selectedElements[0].keepRatio||f.current.setAttrs({enabledAnchors:TRANSFORMER_STYLE.enabledAnchors}),"text"===i&&flags_1.flags.textVerticalResizeEnabled&&f.current.setAttrs({enabledAnchors:null===(r=transformerAttributes.text.enabledAnchors)||void 0===r?void 0:r.concat(["bottom-center"])})):f.current.setAttrs(TRANSFORMER_STYLE),w&&f.current.enabledAnchors([]),Y&&f.current.rotateEnabled(!1);o.find((e=>null==e?void 0:e.isDragging()))&&o.forEach((e=>{null==e||e.startDrag()})),f.current.nodes(o),null===(n=f.current.getLayer())||void 0===n||n.batchDraw()}),[e.selectedElements,k,w,S,Y]);const A=(0,mobx_react_lite_1.useLocalObservable)((()=>({visible:!1,x1:0,y1:0,x2:0,y2:0}))),R=react_1.default.useRef(!1),X=(0,screen_1.useMobile)(),T=(0,mobx_1.action)((e=>{var t,r;if(X)return;R.current=!1;const n=e.target.findAncestor(".elements-container"),a=e.target.findAncestor("Transformer"),o=e.target.findAncestor(".page-abs-container");if(n||a||o)return;const i=null===(t=e.target.getStage())||void 0===t?void 0:t.getPointerPosition();i&&(A.visible=!0,A.x1=i.x,A.y1=i.y,A.x2=i.x,A.y2=i.y,(null===(r=e.target.getStage())||void 0===r?void 0:r.getPointersPositions().length)>=2&&(A.visible=!1))}));react_1.default.useEffect((()=>{const t=(0,mobx_1.action)((e=>{var t,r;if(!A.visible)return;null===(t=_.current)||void 0===t||t.setPointersPositions(e);let n=(null===(r=_.current)||void 0===r?void 0:r.getPointerPosition())||{x:A.x2,y:A.y2};A.x2=n.x,A.y2=n.y})),r=(0,mobx_1.action)((()=>{if(!A.visible)return;if(!_.current)return;const t=_.current.findOne(".selection"),r=t?t.getClientRect():{width:0,height:0,x:0,y:0};if(r.width&&r.height){const t=[];_.current.find(".element").forEach((n=>{const a=n.getClientRect(),o=e.getElementById(n.id()),i=null==o?void 0:o.draggable,l=null==o?void 0:o.selectable;konva_1.default.Util.haveIntersection(r,a)&&i&&l&&t.push(n.id())})),e.selectElements(t)}A.visible=!1,R.current=!0}));return window.addEventListener("mousemove",t),window.addEventListener("touchmove",t),window.addEventListener("mouseup",r),window.addEventListener("touchend",r),()=>{window.removeEventListener("mousemove",t),window.removeEventListener("touchmove",t),window.removeEventListener("mouseup",r),window.removeEventListener("touchend",r)}}),[]);const C=r=>{if(e.activePage!==t&&t.select(),R.current)return;const n=r.evt.ctrlKey||r.evt.metaKey||r.evt.shiftKey,a=r.target.findAncestor(".elements-container"),o=r.target.findAncestor(".page-abs-container"),i=r.target.findAncestor("Transformer");if(!(n||a||i||o))return void e.selectElements([]);const l=r.target.findAncestor(".element",!0),c=e.getElementById(null==l?void 0:l.id()),s=null==c?void 0:c.top,d=null==s?void 0:s.id,u=e.selectedElementsIds.indexOf(d)>=0;d&&n&&!u?e.selectElements(e.selectedElementsIds.concat([d])):d&&n&&u?e.selectElements(e.selectedElementsIds.filter((e=>e!==d))):!d||n||u||e.selectElements([d])};(0,use_transformer_snap_1.useSnap)(f);const D=e.activePage===t,L=null==c?void 0:c.PageControls,O=null==c?void 0:c.Tooltip,P=1/e.scale,M=0/e.scale;return react_1.default.createElement("div",{ref:p,onDragOver:e=>e.preventDefault(),onDrop:r=>{if(r.preventDefault(),!_.current)return;_.current.setPointersPositions(r);const n=_.current.findOne(".elements-container").getRelativePointerPosition(),a=_.current.getPointerPosition(),o=_.current.getAllIntersections(a).map((e=>e.findAncestor(".element",!0))).filter(Boolean),i=[...new Set(o.reverse())].map((t=>e.getElementById(t.id()))),l=i[0];onDomDrop&&(onDomDrop(n,l,{elements:i,page:t}),onDomDrop=null)},style:{position:"relative",width:r+"px"},className:"polotno-page-container"+(D?" active-page":"")},react_1.default.createElement(react_konva_1.Stage,{ref:_,width:r,height:n,onClick:C,onTap:C,onMouseDown:T,onMouseMove:r=>{if(!r.evt.altKey&&x)return void v(null);if(!r.evt.altKey)return;const n=r.target.findAncestor(".element",!0),a=null==n?void 0:n.id();if(!e.selectedElements[0])return;if(e.selectedElementsIds.includes(a))return;const o=(0,math_1.getTotalClientRect)(e.selectedElements),i=a?e.getElementById(a):{x:0,y:0,width:t.computedWidth,height:t.computedHeight,rotation:0},l=(0,math_1.getClientRect)(i),c=[];o.minX>l.maxX&&c.push({distance:o.minX-l.maxX,box1:o,box2:l,points:[{x:o.minX,y:o.minY+o.height/2},{x:l.maxX,y:o.minY+o.height/2},{x:l.maxX,y:l.minY+l.height/2}]}),o.maxX<l.minX&&c.push({distance:l.minX-o.maxX,box1:o,box2:l,points:[{x:o.maxX,y:o.minY+o.height/2},{x:l.minX,y:o.minY+o.height/2},{x:l.minX,y:l.minY+l.height/2}]}),o.minY>l.maxY&&c.push({box1:o,box2:l,distance:o.minY-l.maxY,points:[{x:o.minX+o.width/2,y:o.minY},{x:o.minX+o.width/2,y:l.maxY},{x:l.minX+l.width/2,y:l.maxY}]}),o.maxY<l.minY&&c.push({box1:o,box2:l,distance:l.minY-o.maxY,points:[{x:o.minX+o.width/2,y:o.maxY},{x:o.minX+o.width/2,y:l.minY},{x:l.minX+l.width/2,y:l.minY}]});o.minX>=l.minX&&o.maxX<=l.maxX&&o.minY>=l.minY&&o.maxY<=l.maxY&&(c.push({distance:o.minX-l.minX,box1:o,box2:l,points:[{x:o.minX,y:o.minY+o.height/2},{x:l.minX,y:o.minY+o.height/2},{x:l.minX,y:l.minY+l.height/2}]}),c.push({distance:l.maxX-o.maxX,box1:o,box2:l,points:[{x:o.maxX,y:o.minY+o.height/2},{x:l.maxX,y:o.minY+o.height/2},{x:l.maxX,y:l.minY+l.height/2}]}),c.push({box1:o,box2:l,distance:o.minY-l.minY,points:[{x:o.minX+o.width/2,y:o.minY},{x:o.minX+o.width/2,y:l.minY},{x:l.minX+l.width/2,y:l.minY}]}),c.push({box1:o,box2:l,distance:l.maxY-o.maxY,points:[{x:o.minX+o.width/2,y:o.maxY},{x:o.minX+o.width/2,y:l.maxY},{x:l.minX+l.width/2,y:l.maxY}]})),JSON.stringify(x)!==JSON.stringify(c)&&v(c)},onTouchStart:T,onDragStart:t=>{var r;const n=t.target.findAncestor(".element",!0);if(n){const a=e.getElementById(null==n?void 0:n.id()),o=null==a?void 0:a.top,i=null==o?void 0:o.id;!(e.selectedElementsIds.indexOf(i)>=0)&&i&&(e.selectElements([i]),t.target.stopDrag(),t.target.startDrag(),null===(r=f.current)||void 0===r||r.startDrag(t))}x&&v(null)},pageId:t.id,style:{position:"relative"}},react_1.default.createElement(react_konva_1.Layer,null,react_1.default.createElement(Background,{width:r,height:n,fill:o}),react_1.default.createElement(react_konva_1.Group,{x:g,y:h,scaleX:e.scale,scaleY:e.scale,name:"page-container"},react_1.default.createElement(react_konva_1.Group,{name:"page-background-group",x:d,y:d},react_1.default.createElement(PageBackground,{x:-t.bleed,y:-t.bleed,width:t.computedWidth+2*t.bleed,height:t.computedHeight+2*t.bleed,background:t.background,shadowBlur:10,shadowColor:"lightgrey",name:"page-background",preventDefault:!1,scale:e.scale})),react_1.default.createElement(react_konva_1.Group,{x:d,y:d,name:"elements-container",listening:!e.isPlaying},react_1.default.createElement(react_konva_1.Rect,{name:"elements-area",width:t.computedWidth,height:t.computedHeight,listening:!1}),react_1.default.createElement(Elements,{elements:t.children,store:e})),react_1.default.createElement(react_konva_1.Rect,{stroke:s,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})),react_1.default.createElement(react_konva_1.Line,{name:"workspace-background",points:[0,0,r,0,r,n,0,n,0,0,g,h,g,n-h,r-g,n-h,r-g,h,g,h],listening:!1,closed:!0,fill:o}),react_1.default.createElement(react_konva_1.Group,{x:g,y:h,scaleX:e.scale,scaleY:e.scale,name:"page-container"},react_1.default.createElement(react_konva_1.Rect,{name:"page-highlight",hideInExport:!0,x:-P/2-M,y:-P/2-M,width:u+P+2*M,height:m+P+2*M,stroke:D&&e.pages.length>1?l:i,strokeWidth:2,listening:!1,strokeScaleEnabled:!1})),react_1.default.createElement(react_konva_1.Group,{x:g+d*e.scale,y:h+d*e.scale,scaleX:e.scale,scaleY:e.scale,name:"page-abs-container"},react_1.default.createElement(react_konva_1.Transformer,{ref:f,boundBoxFunc:(e,t)=>{const r=Math.abs(t.width)<1||Math.abs(t.height)<1,n=Math.abs(e.width)<1||Math.abs(e.height)<1;return r&&!n?e:t},onTransform:e=>{var t,r;const n=null===(t=f.current)||void 0===t?void 0:t.__getNodeRect(),a=null===(r=f.current)||void 0===r?void 0:r.getActiveAnchor();y({anchor:a,x:n.x,y:n.y,rotation:n.rotation,width:n.width,height:n.height})},onTransformEnd:e=>{y({})},visible:!e.isPlaying}),x&&x.map((({points:t,distance:r,box1:n,box2:a},o)=>react_1.default.createElement(react_konva_1.Group,{name:"distances-container",hideInExport:!0,key:o,listening:!1},react_1.default.createElement(react_konva_1.Rect,Object.assign({},n,{stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1})),react_1.default.createElement(react_konva_1.Rect,Object.assign({},a,{stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1})),react_1.default.createElement(react_konva_1.Line,{points:[t[0].x,t[0].y,t[1].x,t[1].y],stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1}),react_1.default.createElement(react_konva_1.Line,{points:[t[1].x,t[1].y,t[2].x,t[2].y],stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1}),react_1.default.createElement(react_konva_1.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},react_1.default.createElement(react_konva_1.Tag,{cornerRadius:5,fill:"rgb(0, 161, 255)",pointerDirection:"down"}),react_1.default.createElement(react_konva_1.Text,{align:"center",verticalAlign:"middle",fill:"white",padding:5,text:(0,unit_1.pxToUnitString)({unit:e.unit,dpi:e.dpi,px:r})}))))),t._rendering&&react_1.default.createElement(react_konva_1.Group,null,react_1.default.createElement(react_konva_1.Rect,{width:u,height:m,fill:"rgba(255,255,255,0.9)"}),react_1.default.createElement(react_konva_1.Text,{text:"Rendering...",fontSize:60,width:u,height:m,align:"center",verticalAlign:"middle"})),O&&react_1.default.createElement(O,{components:c,store:e,page:t,stageRef:_})),react_1.default.createElement(TransformLabels,Object.assign({},E,{store:e})),react_1.default.createElement(Selection,{selection:A}),validate_key_1.shouldShowCredit.value&&react_1.default.createElement(react_konva_1.Text,{text:"Powered by polotno.com",fontSize:14,fill:"rgba(0,0,0,0.6)",x:r-170,y:n-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")}}),react_1.default.createElement(react_konva_1.Group,{name:"line-guides"}))),b&&D&&L&&react_1.default.createElement(L,{store:e,page:t,xPadding:g,yPadding:h}))}));
1
+ "use strict";var __rest=this&&this.__rest||function(e,t){var r={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(r[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(n=Object.getOwnPropertySymbols(e);a<n.length;a++)t.indexOf(n[a])<0&&Object.prototype.propertyIsEnumerable.call(e,n[a])&&(r[n[a]]=e[n[a]])}return r},__importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.registerNextDomDrop=exports.registerTransformerAttrs=exports.setTransformerStyle=void 0;const react_1=__importDefault(require("react")),mobx_react_lite_1=require("mobx-react-lite"),mobx_1=require("mobx"),react_konva_1=require("react-konva"),use_image_1=__importDefault(require("use-image")),konva_1=__importDefault(require("konva")),element_1=__importDefault(require("./element")),use_transformer_snap_1=require("./use-transformer-snap"),image_element_1=require("./image-element"),crop_1=require("../utils/crop"),validate_key_1=require("../utils/validate-key"),math_1=require("../utils/math"),unit_1=require("../utils/unit"),flags_1=require("../utils/flags"),screen_1=require("../utils/screen"),rotateFillGroup=new konva_1.default.Group,rotateFillSize=20;rotateFillGroup.add(new konva_1.default.Rect({width:20,height:20,fill:"white"})),rotateFillGroup.add(new konva_1.default.Path({scaleX:20/24,scaleY:20/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 rotaterFill=rotateFillGroup.toCanvas({pixelRatio:2,width:20,height:20}),TRANSFORMER_STYLE={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:rotaterFill,fillPatternScaleX:t/20/2,fillPatternScaleY:t/20/2,fillPriority:"pattern",fillPatternRepeat:"no-repeat"})}}},setTransformerStyle=e=>{Object.assign(TRANSFORMER_STYLE,e)};exports.setTransformerStyle=setTransformerStyle;const transformerAttributes={text:{enabledAnchors:["top-left","top-right","middle-left","bottom-left","bottom-right","middle-right"]},svg:{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"]}};function registerTransformerAttrs(e,t){transformerAttributes[e]=transformerAttributes[e]||t,Object.assign(transformerAttributes[e],t)}exports.registerTransformerAttrs=registerTransformerAttrs;const Background=e=>react_1.default.createElement(react_konva_1.Rect,Object.assign({},e,{preventDefault:!1})),ImageBackground=e=>{var{url:t}=e,r=__rest(e,["url"]);const[n,a]=(0,use_image_1.default)(t,"anonymous"),o=n?(0,crop_1.getCrop)(n,{width:r.width,height:r.height},"center-middle"):{};return(0,image_element_1.useImageLoader)(a,"background"),react_1.default.createElement(react_konva_1.Image,Object.assign({image:n},r,o))},ColorBackground=e=>react_1.default.createElement(react_konva_1.Rect,Object.assign({},e)),PageBackground=e=>{const{background:t,scale:r,borderColor:n}=e,a=__rest(e,["background","scale","borderColor"]),o=react_1.default.useMemo((()=>!!konva_1.default.Util.colorToRGBA(t)),[t]),i=react_1.default.useMemo((()=>{const e=document.createElement("canvas"),t=30;e.width=60,e.height=60;const r=e.getContext("2d");return r&&(r.fillStyle="black",r.fillRect(t,0,t,t),r.fillRect(0,t,t,t)),e}),[]);return react_1.default.createElement(react_1.default.Fragment,null,react_1.default.createElement(react_konva_1.Rect,Object.assign({fillPatternImage:i},a,{opacity:.1,hideInExport:!0})),o?react_1.default.createElement(ColorBackground,Object.assign({fill:t},a)):react_1.default.createElement(ImageBackground,Object.assign({url:t},a)))},Selection=(0,mobx_react_lite_1.observer)((({selection:e})=>e.visible?react_1.default.createElement(react_konva_1.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)),TransformLabels=(0,mobx_react_lite_1.observer)((({x:e,y:t,width:r,height:n,rotation:a,anchor:o,store:i})=>{const l=(0,math_1.getClientRect)({x:e,y:t,width:r,height:n,rotation:konva_1.default.Util.radToDeg(a)});if(void 0===o)return null;const c=(n/2+70)*Math.cos(a-Math.PI/2),s=(n/2+70)*Math.sin(a-Math.PI/2),d=(0,unit_1.pxToUnitRounded)({unit:i.unit,dpi:i.dpi,px:r/i.scale,precious:"px"===i.unit?0:1})+" x "+(0,unit_1.pxToUnitRounded)({unit:i.unit,dpi:i.dpi,px:n/i.scale,precious:"px"===i.unit?0:1})+("px"===i.unit?"":" "+i.unit);return react_1.default.createElement(react_1.default.Fragment,null,react_1.default.createElement(react_konva_1.Label,{x:(l.minX+l.maxX)/2+c,y:(l.minY+l.maxY)/2+s,offsetX:14,offsetY:14,visible:"rotater"===o},react_1.default.createElement(react_konva_1.Tag,{cornerRadius:5,fill:"rgb(0, 161, 255)"}),react_1.default.createElement(react_konva_1.Text,{align:"center",verticalAlign:"middle",fill:"white",padding:8,text:Math.round(konva_1.default.Util.radToDeg(a)).toString()+"°"})),react_1.default.createElement(react_konva_1.Label,{x:(l.minX+l.maxX)/2,y:l.maxY+20,visible:"rotater"!==o},react_1.default.createElement(react_konva_1.Tag,{cornerRadius:5,fill:"rgb(0, 161, 255)",pointerDirection:"up",pointerHeight:0,pointerWidth:0}),react_1.default.createElement(react_konva_1.Text,{align:"center",verticalAlign:"middle",fill:"white",padding:8,text:d})))})),Elements=(0,mobx_react_lite_1.observer)((({elements:e,store:t})=>{const r=e.filter((e=>e.alwaysOnTop)),n=e.filter((e=>!e.alwaysOnTop)).concat(r);return react_1.default.createElement(react_1.default.Fragment,null,n.map((e=>react_1.default.createElement(element_1.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.")}}))))}));let onDomDrop=null;const registerNextDomDrop=e=>{onDomDrop=e};exports.registerNextDomDrop=registerNextDomDrop,exports.default=(0,mobx_react_lite_1.observer)((({store:e,page:t,width:r,height:n,pageControlsEnabled:a,backColor:o,pageBorderColor:i,activePageBorderColor:l,components:c,bleedColor:s})=>{const d=e.bleedVisible?t.bleed:0,u=t.computedWidth+2*d,m=t.computedHeight+2*d,g=(r-u*e.scale)/2,h=(n-m*e.scale)/2,f=react_1.default.useRef(null),_=react_1.default.useRef(null),p=react_1.default.useRef(null),b=null==a||a,[x,v]=react_1.default.useState(null),[E,y]=react_1.default.useState({}),k=e.selectedElements.find((e=>e._cropModeEnabled)),w=e.selectedShapes.filter((e=>!e.resizable)).length>0,S=e.selectedShapes.filter((e=>!e.draggable)).length>0,Y=e.selectedElements.filter((e=>!e.visible)).length>0;react_1.default.useLayoutEffect((()=>{var t,r,n;if(!f.current)return;const a=f.current.getStage(),o=e.selectedShapes.map((e=>e._cropModeEnabled?null:a.findOne("#"+e.id))).filter((e=>e)),i=1===e.selectedElements.length&&(null===(t=e.selectedElements[0])||void 0===t?void 0:t.type)||"many";transformerAttributes[i]?(f.current.setAttrs(Object.assign(Object.assign({},TRANSFORMER_STYLE),transformerAttributes[i])),"svg"!==i&&"image"!==i||e.selectedElements[0].keepRatio||f.current.setAttrs({enabledAnchors:TRANSFORMER_STYLE.enabledAnchors}),"text"===i&&flags_1.flags.textVerticalResizeEnabled&&f.current.setAttrs({enabledAnchors:null===(r=transformerAttributes.text.enabledAnchors)||void 0===r?void 0:r.concat(["bottom-center"])})):f.current.setAttrs(TRANSFORMER_STYLE),w&&f.current.enabledAnchors([]),S&&f.current.rotateEnabled(!1);o.find((e=>null==e?void 0:e.isDragging()))&&o.forEach((e=>{null==e||e.startDrag()})),f.current.nodes(o),null===(n=f.current.getLayer())||void 0===n||n.batchDraw()}),[e.selectedElements,k,w,Y,S]);const A=(0,mobx_react_lite_1.useLocalObservable)((()=>({visible:!1,x1:0,y1:0,x2:0,y2:0}))),R=react_1.default.useRef(!1),T=(0,screen_1.useMobile)(),X=(0,mobx_1.action)((e=>{var t,r;if(T)return;R.current=!1;const n=e.target.findAncestor(".elements-container"),a=e.target.findAncestor("Transformer"),o=e.target.findAncestor(".page-abs-container");if(n||a||o)return;const i=null===(t=e.target.getStage())||void 0===t?void 0:t.getPointerPosition();i&&(A.visible=!0,A.x1=i.x,A.y1=i.y,A.x2=i.x,A.y2=i.y,(null===(r=e.target.getStage())||void 0===r?void 0:r.getPointersPositions().length)>=2&&(A.visible=!1))}));react_1.default.useEffect((()=>{const t=(0,mobx_1.action)((e=>{var t,r;if(!A.visible)return;null===(t=_.current)||void 0===t||t.setPointersPositions(e);let n=(null===(r=_.current)||void 0===r?void 0:r.getPointerPosition())||{x:A.x2,y:A.y2};A.x2=n.x,A.y2=n.y})),r=(0,mobx_1.action)((()=>{if(!A.visible)return;if(!_.current)return;const t=_.current.findOne(".selection"),r=t?t.getClientRect():{width:0,height:0,x:0,y:0};if(r.width&&r.height){const t=[];_.current.find(".element").forEach((n=>{const a=n.getClientRect(),o=e.getElementById(n.id()),i=null==o?void 0:o.draggable,l=null==o?void 0:o.selectable;konva_1.default.Util.haveIntersection(r,a)&&i&&l&&t.push(n.id())})),e.selectElements(t)}A.visible=!1,R.current=!0}));return window.addEventListener("mousemove",t),window.addEventListener("touchmove",t),window.addEventListener("mouseup",r),window.addEventListener("touchend",r),()=>{window.removeEventListener("mousemove",t),window.removeEventListener("touchmove",t),window.removeEventListener("mouseup",r),window.removeEventListener("touchend",r)}}),[]);const C=r=>{if(e.activePage!==t&&t.select(),R.current)return;const n=r.evt.ctrlKey||r.evt.metaKey||r.evt.shiftKey,a=r.target.findAncestor(".elements-container"),o=r.target.findAncestor(".page-abs-container"),i=r.target.findAncestor("Transformer");if(!(n||a||i||o))return void e.selectElements([]);const l=r.target.findAncestor(".element",!0),c=e.getElementById(null==l?void 0:l.id()),s=null==c?void 0:c.top,d=null==s?void 0:s.id,u=e.selectedElementsIds.indexOf(d)>=0;d&&n&&!u?e.selectElements(e.selectedElementsIds.concat([d])):d&&n&&u?e.selectElements(e.selectedElementsIds.filter((e=>e!==d))):!d||n||u||e.selectElements([d])};(0,use_transformer_snap_1.useSnap)(f);const D=e.activePage===t,L=null==c?void 0:c.PageControls,O=null==c?void 0:c.Tooltip,P=1/e.scale,M=0/e.scale;return react_1.default.createElement("div",{ref:p,onDragOver:e=>e.preventDefault(),onDrop:r=>{if(r.preventDefault(),!_.current)return;_.current.setPointersPositions(r);const n=_.current.findOne(".elements-container").getRelativePointerPosition(),a=_.current.getPointerPosition(),o=_.current.getAllIntersections(a).map((e=>e.findAncestor(".element",!0))).filter(Boolean),i=[...new Set(o.reverse())].map((t=>e.getElementById(t.id()))),l=i[0];onDomDrop&&(onDomDrop(n,l,{elements:i,page:t}),onDomDrop=null)},style:{position:"relative",width:r+"px"},className:"polotno-page-container"+(D?" active-page":"")},react_1.default.createElement(react_konva_1.Stage,{ref:_,width:r,height:n,onClick:C,onTap:C,onMouseDown:X,onMouseMove:r=>{if(!r.evt.altKey&&x)return void v(null);if(!r.evt.altKey)return;const n=r.target.findAncestor(".element",!0),a=null==n?void 0:n.id();if(!e.selectedElements[0])return;if(e.selectedElementsIds.includes(a))return;const o=(0,math_1.getTotalClientRect)(e.selectedElements),i=a?e.getElementById(a):{x:0,y:0,width:t.computedWidth,height:t.computedHeight,rotation:0},l=(0,math_1.getClientRect)(i),c=[];o.minX>l.maxX&&c.push({distance:o.minX-l.maxX,box1:o,box2:l,points:[{x:o.minX,y:o.minY+o.height/2},{x:l.maxX,y:o.minY+o.height/2},{x:l.maxX,y:l.minY+l.height/2}]}),o.maxX<l.minX&&c.push({distance:l.minX-o.maxX,box1:o,box2:l,points:[{x:o.maxX,y:o.minY+o.height/2},{x:l.minX,y:o.minY+o.height/2},{x:l.minX,y:l.minY+l.height/2}]}),o.minY>l.maxY&&c.push({box1:o,box2:l,distance:o.minY-l.maxY,points:[{x:o.minX+o.width/2,y:o.minY},{x:o.minX+o.width/2,y:l.maxY},{x:l.minX+l.width/2,y:l.maxY}]}),o.maxY<l.minY&&c.push({box1:o,box2:l,distance:l.minY-o.maxY,points:[{x:o.minX+o.width/2,y:o.maxY},{x:o.minX+o.width/2,y:l.minY},{x:l.minX+l.width/2,y:l.minY}]});o.minX>=l.minX&&o.maxX<=l.maxX&&o.minY>=l.minY&&o.maxY<=l.maxY&&(c.push({distance:o.minX-l.minX,box1:o,box2:l,points:[{x:o.minX,y:o.minY+o.height/2},{x:l.minX,y:o.minY+o.height/2},{x:l.minX,y:l.minY+l.height/2}]}),c.push({distance:l.maxX-o.maxX,box1:o,box2:l,points:[{x:o.maxX,y:o.minY+o.height/2},{x:l.maxX,y:o.minY+o.height/2},{x:l.maxX,y:l.minY+l.height/2}]}),c.push({box1:o,box2:l,distance:o.minY-l.minY,points:[{x:o.minX+o.width/2,y:o.minY},{x:o.minX+o.width/2,y:l.minY},{x:l.minX+l.width/2,y:l.minY}]}),c.push({box1:o,box2:l,distance:l.maxY-o.maxY,points:[{x:o.minX+o.width/2,y:o.maxY},{x:o.minX+o.width/2,y:l.maxY},{x:l.minX+l.width/2,y:l.maxY}]})),JSON.stringify(x)!==JSON.stringify(c)&&v(c)},onTouchStart:X,onDragStart:t=>{var r;const n=t.target.findAncestor(".element",!0);if(n){const a=e.getElementById(null==n?void 0:n.id()),o=null==a?void 0:a.top,i=null==o?void 0:o.id;!(e.selectedElementsIds.indexOf(i)>=0)&&i&&(e.selectElements([i]),t.target.stopDrag(),t.target.startDrag(),null===(r=f.current)||void 0===r||r.startDrag(t))}x&&v(null)},pageId:t.id,style:{position:"relative"}},react_1.default.createElement(react_konva_1.Layer,null,react_1.default.createElement(Background,{width:r,height:n,fill:o}),react_1.default.createElement(react_konva_1.Group,{x:g,y:h,scaleX:e.scale,scaleY:e.scale,name:"page-container"},react_1.default.createElement(react_konva_1.Group,{name:"page-background-group",x:d,y:d},react_1.default.createElement(PageBackground,{x:-t.bleed,y:-t.bleed,width:t.computedWidth+2*t.bleed,height:t.computedHeight+2*t.bleed,background:t.background,shadowBlur:10,shadowColor:"lightgrey",name:"page-background",preventDefault:!1,scale:e.scale})),react_1.default.createElement(react_konva_1.Group,{x:d,y:d,name:"elements-container",listening:!e.isPlaying},react_1.default.createElement(react_konva_1.Rect,{name:"elements-area",width:t.computedWidth,height:t.computedHeight,listening:!1}),react_1.default.createElement(Elements,{elements:t.children,store:e})),react_1.default.createElement(react_konva_1.Rect,{stroke:s,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})),react_1.default.createElement(react_konva_1.Line,{name:"workspace-background",points:[0,0,r,0,r,n,0,n,0,0,g,h,g,n-h,r-g,n-h,r-g,h,g,h],listening:!1,closed:!0,fill:o}),react_1.default.createElement(react_konva_1.Group,{x:g,y:h,scaleX:e.scale,scaleY:e.scale,name:"page-container"},react_1.default.createElement(react_konva_1.Rect,{name:"page-highlight",hideInExport:!0,x:-P/2-M,y:-P/2-M,width:u+P+2*M,height:m+P+2*M,stroke:D&&e.pages.length>1?l:i,strokeWidth:2,listening:!1,strokeScaleEnabled:!1})),react_1.default.createElement(react_konva_1.Group,{x:g+d*e.scale,y:h+d*e.scale,scaleX:e.scale,scaleY:e.scale,name:"page-abs-container"},react_1.default.createElement(react_konva_1.Transformer,{ref:f,onDragStart:()=>{e.history.startTransaction()},onDragEnd:()=>{e.history.endTransaction()},onTransformStart:()=>{e.history.startTransaction()},boundBoxFunc:(e,t)=>{const r=Math.abs(t.width)<1||Math.abs(t.height)<1,n=Math.abs(e.width)<1||Math.abs(e.height)<1;return r&&!n?e:t},onTransform:e=>{var t,r;const n=null===(t=f.current)||void 0===t?void 0:t.__getNodeRect(),a=null===(r=f.current)||void 0===r?void 0:r.getActiveAnchor();y({anchor:a,x:n.x,y:n.y,rotation:n.rotation,width:n.width,height:n.height})},onTransformEnd:t=>{y({}),e.history.endTransaction()},visible:!e.isPlaying}),x&&x.map((({points:t,distance:r,box1:n,box2:a},o)=>react_1.default.createElement(react_konva_1.Group,{name:"distances-container",hideInExport:!0,key:o,listening:!1},react_1.default.createElement(react_konva_1.Rect,Object.assign({},n,{stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1})),react_1.default.createElement(react_konva_1.Rect,Object.assign({},a,{stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1})),react_1.default.createElement(react_konva_1.Line,{points:[t[0].x,t[0].y,t[1].x,t[1].y],stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1}),react_1.default.createElement(react_konva_1.Line,{points:[t[1].x,t[1].y,t[2].x,t[2].y],stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1}),react_1.default.createElement(react_konva_1.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},react_1.default.createElement(react_konva_1.Tag,{cornerRadius:5,fill:"rgb(0, 161, 255)",pointerDirection:"down"}),react_1.default.createElement(react_konva_1.Text,{align:"center",verticalAlign:"middle",fill:"white",padding:5,text:(0,unit_1.pxToUnitString)({unit:e.unit,dpi:e.dpi,px:r})}))))),t._rendering&&react_1.default.createElement(react_konva_1.Group,null,react_1.default.createElement(react_konva_1.Rect,{width:u,height:m,fill:"rgba(255,255,255,0.9)"}),react_1.default.createElement(react_konva_1.Text,{text:"Rendering...",fontSize:60,width:u,height:m,align:"center",verticalAlign:"middle"})),O&&react_1.default.createElement(O,{components:c,store:e,page:t,stageRef:_})),react_1.default.createElement(TransformLabels,Object.assign({},E,{store:e})),react_1.default.createElement(Selection,{selection:A}),validate_key_1.shouldShowCredit.value&&react_1.default.createElement(react_konva_1.Text,{text:"Powered by polotno.com",fontSize:14,fill:"rgba(0,0,0,0.6)",x:r-170,y:n-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")}}),react_1.default.createElement(react_konva_1.Group,{name:"line-guides"}))),b&&D&&L&&react_1.default.createElement(L,{store:e,page:t,xPadding:g,yPadding:h}))}));
package/canvas/text-element.js CHANGED
@@ -1 +1 @@
1
- "use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,t,r,i){void 0===i&&(i=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,i,n)}:function(e,t,r,i){void 0===i&&(i=r),e[i]=t[r]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),__importStar=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)"default"!==r&&Object.prototype.hasOwnProperty.call(e,r)&&__createBinding(t,e,r);return __setModuleDefault(t,e),t},__importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.TextElement=exports.useTextColor=exports.usePrevious=exports.getLineHeight=exports.useFontLoader=exports.getDir=exports.isRTLText=void 0;const react_1=__importDefault(require("react")),mobx_react_lite_1=require("mobx-react-lite"),react_konva_1=require("react-konva"),react_konva_utils_1=require("react-konva-utils"),mobx_1=require("mobx"),konva_1=__importDefault(require("konva")),svg_round_corners_1=require("svg-round-corners"),loader_1=require("../utils/loader"),fonts_1=require("../utils/fonts"),flags_1=require("../utils/flags"),text_1=require("../utils/text"),gradient=__importStar(require("../utils/gradient")),apply_filters_1=require("./apply-filters"),use_fadein_1=require("./use-fadein"),highlighter_1=require("./highlighter"),screen_1=require("../utils/screen"),styleNode=document.createElement("style");styleNode.type="text/css",document.head.appendChild(styleNode);const initialStyles={border:"none",padding:"0px",overflow:"hidden",background:"none",outline:"none",resize:"none",overflowWrap:"break-word",whiteSpace:"pre-wrap",userSelect:"text",wordBreak:"normal"};function isRTL(e){var t="֑-߿‏‫‮יִ-﷽ﹰ-ﻼ";return new RegExp("^[^"+t+"]*?["+t+"]").test(e)}function isRTLText(e){e=e.replace(/\s/g,"");let t=0;for(var r=0;r<e.length;r++){isRTL(e[r])&&(t+=1)}return t>e.length/2}function getDir(e){return isRTLText(e)?"rtl":"ltr"}exports.isRTLText=isRTLText,exports.getDir=getDir;const TextInput=(0,mobx_react_lite_1.observer)((({textNodeRef:e,element:t,onBlur:r,selectAll:i,cursorPosition:n})=>{const[o,a]=react_1.default.useState(initialStyles),l=e.current;react_1.default.useLayoutEffect((()=>{const e={};e.width=l.width()-2*l.padding()+"px",e.height=l.height()-2*l.padding()+10+"px",e.fontSize=l.fontSize()+"px",e.lineHeight=l.lineHeight()+.01,e.fontFamily=l.fontFamily(),e.textAlign=l.align(),e.color=l.fill(),e.fontWeight=t.fontWeight,e.fontStyle=t.fontStyle,e.letterSpacing=t.letterSpacing+"em";const r=`\n .polotno-input::placeholder {\n color: ${o.color};\n opacity: 0.6;\n }\n `;styleNode.innerHTML="",styleNode.appendChild(document.createTextNode(r)),JSON.stringify(e)!==JSON.stringify(o)&&a(e)}));const s=react_1.default.useRef(null);react_1.default.useEffect((()=>{const e=setTimeout((()=>{var e;const t=s.current;if(!t)return;null===(e=s.current)||void 0===e||e.focus();const r=n||t.value.length;t.selectionStart=t.selectionEnd=r,i&&(null==t||t.select(),document.execCommand("selectAll",!1,null))}));return()=>{clearTimeout(e)}}),[]);let d=0;const c=l.textArr.length*l.lineHeight()*l.fontSize();"middle"===t.verticalAlign&&(d=(t.a.height-c)/2),"bottom"===t.verticalAlign&&(d=t.a.height-c);const u=(0,text_1.removeTags)(t.text);return react_1.default.createElement(react_konva_utils_1.Html,null,react_1.default.createElement("textarea",{className:"polotno-input",ref:s,dir:getDir(u),style:Object.assign(Object.assign(Object.assign({},initialStyles),o),{paddingTop:d+"px"}),value:u,onChange:e=>{t.set({text:e.target.value})},placeholder:t.placeholder,onBlur:r}))})),useEditor=e=>{const[t,r]=react_1.default.useState(!1),i=react_1.default.useRef(!1);return react_1.default.useEffect((()=>{var t=!0;return setTimeout((()=>{t&&(e._editModeEnabled&&(i.current=!0),r(!0),setTimeout((()=>{i.current=!1}),50))}),50),()=>{t=!1}}),[]),{editorEnabled:t&&e._editModeEnabled,selectAll:i.current}},useFontLoader=(e,t)=>{const[r,i]=react_1.default.useReducer((e=>e+1),0),n=react_1.default.useRef((0,fonts_1.isFontLoaded)(t));return react_1.default.useLayoutEffect((()=>{if(n.current=(0,fonts_1.isFontLoaded)(t),n.current)return;let r=!0;return(async()=>{n.current=!1,i();const o=(0,loader_1.incrementLoader)(`text ${t}`);await e.loadFont(t),konva_1.default.Util.requestAnimFrame(o),r&&(n.current=!0,i())})(),()=>{r=!1}}),[t]),[n.current]};exports.useFontLoader=useFontLoader;const getLineHeight=({fontLoaded:e,fontFamily:t,fontSize:r,lineHeight:i})=>react_1.default.useMemo((()=>{if("number"==typeof i)return i;const e=document.createElement("div");e.style.fontFamily=t,e.style.fontSize=r+"px",e.style.lineHeight=i,e.innerText="Test text",document.body.appendChild(e);const n=e.offsetHeight;return document.body.removeChild(e),n/r}),[e,t,r,i]);function getRelativePointerPosition(e){var t=e.getAbsoluteTransform().copy();t.invert();var r=e.getStage().getPointerPosition();return t.point(r)}function getCursorPosition(e){var t;const r=e.target,i=getRelativePointerPosition(r),n=r.textArr,o=Math.floor(i.y/(r.fontSize()*r.lineHeight())),a=n.slice(0,o).reduce(((e,t)=>e+t.text.length),o),l=null!==(t=n[o])&&void 0!==t?t:n[0];let s=0;"right"===r.align()?s=r.width()-l.width:"center"===r.align()&&(s=r.width()/2-l.width/2);return a+Math.round((i.x-s)/l.width*l.text.length)}function usePrevious(e){const t=react_1.default.useRef(e),r=react_1.default.useRef(e);return react_1.default.useMemo((()=>{r.current=t.current,t.current=e}),[e]),r.current}function findFitFontSize(e,t){const r=e.fontSize(),i=e.height(),n=(0,text_1.removeTags)(t.text);let o=t.a.fontSize;e.height(void 0);const a=Math.round(2*t.a.fontSize)-1;for(let r=1;r<a;r++){const r=t.a.height&&e.height()>t.a.height,i=n.split("\n").join(" ").split(/[\s-]+/);let a=e.textArr.map((e=>e.text)).join(";");const l=i.find((e=>!a.includes(e)||(a=a.replace(e,""),!1)));if(!(r||l))break;o-=.5,e.fontSize(o)}return e.fontSize(r),e.height(i),o}function generateBackgroundShape({lines:e,lineHeight:t,width:r,align:i="left",padding:n=0,cornerRadius:o=0}){var a;e.forEach(((e,t)=>{e.cx=r/2,"right"===i?e.cx=r-e.width/2:"left"===i&&(e.cx=e.width/2),"justify"!==i||e.lastInParagraph||(e.width=r),"justify"===i&&(e.cx=e.width/2)}));let l=`M ${null===(a=e[0])||void 0===a?void 0:a.cx} ${-n}`;e.forEach(((r,i)=>{const{cx:o}=r,a=e[i-1];a&&a.width>r.width?l+=` L ${o+r.width/2+n} ${i*t+n}`:l+=` L ${o+r.width/2+n} ${i*t-n}`;const s=e[i+1];s&&s.width>r.width?l+=` L ${o+r.width/2+n} ${(i+1)*t-n}`:l+=` L ${o+r.width/2+n} ${(i+1)*t+n}`}));for(var s=e.length-1;s>=0;s--){const r=e[s],{cx:i}=r,o=e[s+1];o&&o.width>r.width?l+=` L ${i-r.width/2-n} ${(s+1)*t-n}`:l+=` L ${i-r.width/2-n} ${(s+1)*t+n}`;const a=e[s-1];a&&a.width>r.width?l+=` L ${i-r.width/2-n} ${s*t+n}`:l+=` L ${i-r.width/2-n} ${s*t-n}`}l+=" Z";const d=(0,svg_round_corners_1.parsePath)(l);return(0,svg_round_corners_1.roundCommands)(d,o).path}exports.getLineHeight=getLineHeight,exports.usePrevious=usePrevious;const useTextColor=e=>react_1.default.useMemo((()=>{if(!gradient.isGradient(e.fill))return{fill:e.fill};const{stops:t,rotation:r}=gradient.parseColor(e.fill),i={x:e.a.width/2,y:e.a.height/2},n=Math.sqrt(Math.pow(i.x,2)+Math.pow(i.y,2)),o=konva_1.default.Util.degToRad(r)-Math.PI/2,a=[];return t.forEach((({offset:e,color:t})=>{a.push(e,t)})),{fillLinearGradientStartPointX:i.x-n*Math.cos(o),fillLinearGradientStartPointY:i.y-n*Math.sin(o),fillLinearGradientColorStops:a,fillLinearGradientEndPointX:i.x+n*Math.cos(o),fillLinearGradientEndPointY:i.y+n*Math.sin(o),fill:t[1].color,fillPriority:"linear-gradient"}}),[e.fill]);exports.useTextColor=useTextColor,exports.TextElement=(0,mobx_react_lite_1.observer)((({element:e,store:t})=>{const r=react_1.default.useRef(null),i=react_1.default.useRef(null),{editorEnabled:n,selectAll:o}=useEditor(e),[a,l]=react_1.default.useState(!1),[s,d]=react_1.default.useState(!1),c=react_1.default.useRef(e.a.height),u=t.selectedElements.indexOf(e)>=0,{textVerticalResizeEnabled:f}=flags_1.flags,h=usePrevious(e.fontFamily),[g,_]=react_1.default.useState([]);react_1.default.useEffect((()=>{var e,t;const i=null!==(t=null===(e=r.current)||void 0===e?void 0:e.textArr)&&void 0!==t?t:[];JSON.stringify(i)!==JSON.stringify(g)&&_(i)})),react_1.default.useEffect((()=>{if(e.a.width)return;const t=r.current;t.width(600),e.set({width:1.4*t.getTextWidth()})}),[]),react_1.default.useLayoutEffect((()=>(0,mobx_1.autorun)((()=>{const t=r.current;(0,apply_filters_1.applyFilter)(t,e)}))));const[p]=(0,exports.useFontLoader)(t,e.fontFamily),x=(0,text_1.removeTags)(e.text),y=()=>{const e=r.current.clone({height:void 0}),t=Math.ceil(e.fontSize()*e.lineHeight()*e.textArr.length+1);return e.destroy(),t};react_1.default.useLayoutEffect((()=>{if(!p)return;const{textOverflow:i}=flags_1.flags;if(e.a.height)if("change-font-size"!==i||s||t.isPlaying){if("resize"===i){const i=y();f&&e.a.height<i&&t.history.ignore((()=>{e.set({height:i}),r.current.height(i)}),!1,!0),f||e.a.height===i||t.history.ignore((()=>{e.set({height:i}),r.current.height(i)}),!1,!0)}}else{const i=findFitFontSize(r.current,e);if(i!==e.a.fontSize)return void t.history.ignore((()=>{e.set({fontSize:i})}),!1,!0);const n=y();e.a.height===n||f||t.history.ignore((()=>{e.set({height:n})}),!1,!0)}else{const r=y();t.history.ignore((()=>{e.set({height:r})}),!1,!0)}})),react_1.default.useLayoutEffect((()=>{const t=r.current;t&&(t.width(t.width()+1e-8),t._setTextData(),(0,apply_filters_1.applyFilter)(t,e))}),[p]);const m=react_1.default.useRef(null),v=react_1.default.useRef(0),w=r=>{r.evt.preventDefault();const i=t.selectedShapes.find((t=>t===e));i&&e.contentEditable&&(v.current=getCursorPosition(r),e.toggleEditMode())},S=!x&&e.placeholder?.6:e.a.opacity;(0,use_fadein_1.useFadeIn)(r,S);const b=(0,exports.getLineHeight)({fontLoaded:p,fontFamily:e.fontFamily,fontSize:e.a.fontSize,lineHeight:e.lineHeight}),E=e.selectable||"admin"===t.role,T=(0,exports.useTextColor)(e),L=react_1.default.useMemo((()=>e.backgroundEnabled?generateBackgroundShape({lines:JSON.parse(JSON.stringify(g)),cornerRadius:e.backgroundCornerRadius*(e.a.fontSize*b*.5),lineHeight:b*e.a.fontSize,padding:e.backgroundPadding*(e.a.fontSize*b*.5),width:e.a.width,align:e.align}):""),[e.backgroundEnabled,e.backgroundCornerRadius,e.a.fontSize,b,e.backgroundPadding,e.a.width,e.align,g]),M=(0,screen_1.useMobile)();let k=0;return"middle"===e.verticalAlign?k=(e.a.height-g.length*b*e.a.fontSize)/2:"bottom"===e.verticalAlign&&(k=e.a.height-g.length*b*e.a.fontSize),react_1.default.createElement(react_1.default.Fragment,null,react_1.default.createElement(react_konva_1.Path,{ref:i,x:e.a.x,y:e.a.y,rotation:e.a.rotation,hideInExport:!e.showInExport||!x,listening:!1,visible:e.backgroundEnabled,opacity:e.backgroundOpacity,data:L,fill:e.backgroundColor,offsetY:-k}),react_1.default.createElement(react_konva_1.Text,Object.assign({ref:r,id:e.id,name:"element",hideInExport:!e.showInExport||!x,editModeEnabled:e._editModeEnabled,x:e.a.x,y:e.a.y,rotation:e.a.rotation,width:e.a.width,height:e.a.height,text:x||e.placeholder},T,{stroke:e.stroke,lineJoin:"round",strokeWidth:e.strokeWidth,fillAfterStrokeEnabled:!0,fontSize:e.a.fontSize,fontFamily:`"${e.fontFamily}", "${h}"`,fontStyle:e.fontStyle+" "+e.fontWeight,textDecoration:e.textDecoration,align:e.align,verticalAlign:e.verticalAlign,draggable:M?e.draggable&&u:e.draggable,preventDefault:!M||u,opacity:S,visible:!e._editModeEnabled,ellipsis:"ellipsis"===flags_1.flags.textOverflow,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,lineHeight:b,letterSpacing:e.letterSpacing*e.a.fontSize,listening:E,onDragStart:()=>{t.history.startTransaction()},onDragMove:t=>{e.set({x:t.target.x(),y:t.target.y()})},onDragEnd:r=>{e.set({x:r.target.x(),y:r.target.y()}),t.history.endTransaction()},onMouseEnter:()=>{l(!0)},onMouseLeave:()=>{l(!1)},onClick:w,onTap:w,onTransformStart:()=>{d(!0),t.history.startTransaction(),c.current=r.current.height()},onTransform:t=>{var r,n;const o=t.target;null===(r=i.current)||void 0===r||r.setAttrs({x:o.x(),y:o.y(),rotation:o.rotation(),scale:o.scale()});const a=(null===(n=o.getStage())||void 0===n?void 0:n.findOne("Transformer")).getActiveAnchor();if("middle-left"===a||"middle-right"===a){const t=o.scaleX(),r=o.width()*t,i=e.a.fontSize;let n=r;r<i&&(n=i,m.current&&o.position(m.current)),o.width(n),o.scaleX(1),o.scaleY(1);const a=y();if("ellipsis"!==flags_1.flags.textOverflow){const t=Math.max(a,c.current);o.height(t),e.set({height:o.height()})}e.set({x:o.x(),y:o.y(),width:o.width(),rotation:o.rotation()}),(0,apply_filters_1.applyFilter)(o,e)}if("top-center"===a||"bottom-center"===a){let r="resize"===flags_1.flags.textOverflow?y():b*e.a.fontSize;t.target.height(Math.max(r,t.target.height()*t.target.scaleY())),t.target.scaleY(1)}t.target.strokeWidth(e.strokeWidth/t.target.scaleX()),m.current=t.target.position()},onTransformEnd:r=>{var n;const o=r.target.scaleX();r.target.scaleX(1),r.target.scaleY(1),r.target.strokeWidth(e.strokeWidth),e.set({fontSize:Math.round(e.a.fontSize*o),width:Math.ceil(r.target.width()*o),x:r.target.x(),y:r.target.y(),rotation:r.target.rotation(),height:r.target.height()*o}),null===(n=i.current)||void 0===n||n.setAttrs({scaleX:1,scaleY:1}),t.history.endTransaction(),d(!1)}})),n&&react_1.default.createElement(react_konva_1.Group,{x:e.a.x,y:e.a.y,rotation:e.a.rotation},react_1.default.createElement(TextInput,{textNodeRef:r,element:e,selectAll:o,cursorPosition:v.current,onBlur:()=>{e.toggleEditMode(!1)}})),!s&&(a||u)&&react_1.default.createElement(highlighter_1.Highlighter,{element:e}))}));
1
+ "use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,t,r,i){void 0===i&&(i=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,i,n)}:function(e,t,r,i){void 0===i&&(i=r),e[i]=t[r]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),__importStar=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)"default"!==r&&Object.prototype.hasOwnProperty.call(e,r)&&__createBinding(t,e,r);return __setModuleDefault(t,e),t},__importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.TextElement=exports.useTextColor=exports.usePrevious=exports.getLineHeight=exports.useFontLoader=exports.getDir=exports.isRTLText=void 0;const react_1=__importDefault(require("react")),mobx_react_lite_1=require("mobx-react-lite"),react_konva_1=require("react-konva"),react_konva_utils_1=require("react-konva-utils"),mobx_1=require("mobx"),konva_1=__importDefault(require("konva")),svg_round_corners_1=require("svg-round-corners"),loader_1=require("../utils/loader"),fonts_1=require("../utils/fonts"),flags_1=require("../utils/flags"),text_1=require("../utils/text"),gradient=__importStar(require("../utils/gradient")),apply_filters_1=require("./apply-filters"),use_fadein_1=require("./use-fadein"),highlighter_1=require("./highlighter"),screen_1=require("../utils/screen"),styleNode=document.createElement("style");styleNode.type="text/css",document.head.appendChild(styleNode);const initialStyles={border:"none",padding:"0px",overflow:"hidden",background:"none",outline:"none",resize:"none",overflowWrap:"break-word",whiteSpace:"pre-wrap",userSelect:"text",wordBreak:"normal"};function isRTL(e){var t="֑-߿‏‫‮יִ-﷽ﹰ-ﻼ";return new RegExp("^[^"+t+"]*?["+t+"]").test(e)}function isRTLText(e){e=e.replace(/\s/g,"");let t=0;for(var r=0;r<e.length;r++){isRTL(e[r])&&(t+=1)}return t>e.length/2}function getDir(e){return isRTLText(e)?"rtl":"ltr"}exports.isRTLText=isRTLText,exports.getDir=getDir;const TextInput=(0,mobx_react_lite_1.observer)((({textNodeRef:e,element:t,onBlur:r,selectAll:i,cursorPosition:n})=>{const[o,a]=react_1.default.useState(initialStyles),l=e.current;react_1.default.useLayoutEffect((()=>{const e={};e.width=l.width()-2*l.padding()+"px",e.height=l.height()-2*l.padding()+10+"px",e.fontSize=l.fontSize()+"px",e.lineHeight=l.lineHeight()+.01,e.fontFamily=l.fontFamily(),e.textAlign=l.align(),e.color=l.fill(),e.fontWeight=t.fontWeight,e.fontStyle=t.fontStyle,e.letterSpacing=t.letterSpacing+"em";const r=`\n .polotno-input::placeholder {\n color: ${o.color};\n opacity: 0.6;\n }\n `;styleNode.innerHTML="",styleNode.appendChild(document.createTextNode(r)),JSON.stringify(e)!==JSON.stringify(o)&&a(e)}));const s=react_1.default.useRef(null);react_1.default.useEffect((()=>{const e=setTimeout((()=>{var e;const t=s.current;if(!t)return;null===(e=s.current)||void 0===e||e.focus();const r=n||t.value.length;t.selectionStart=t.selectionEnd=r,i&&(null==t||t.select(),document.execCommand("selectAll",!1,null))}));return()=>{clearTimeout(e)}}),[]);let d=0;const c=l.textArr.length*l.lineHeight()*l.fontSize();"middle"===t.verticalAlign&&(d=(t.a.height-c)/2),"bottom"===t.verticalAlign&&(d=t.a.height-c);const u=(0,text_1.removeTags)(t.text);return react_1.default.createElement(react_konva_utils_1.Html,null,react_1.default.createElement("textarea",{className:"polotno-input",ref:s,dir:getDir(u),style:Object.assign(Object.assign(Object.assign({},initialStyles),o),{paddingTop:d+"px"}),value:u,onChange:e=>{t.set({text:e.target.value})},placeholder:t.placeholder,onBlur:r}))})),useEditor=e=>{const[t,r]=react_1.default.useState(!1),i=react_1.default.useRef(!1);return react_1.default.useEffect((()=>{var t=!0;return setTimeout((()=>{t&&(e._editModeEnabled&&(i.current=!0),r(!0),setTimeout((()=>{i.current=!1}),50))}),50),()=>{t=!1}}),[]),{editorEnabled:t&&e._editModeEnabled,selectAll:i.current}},useFontLoader=(e,t)=>{const[r,i]=react_1.default.useReducer((e=>e+1),0),n=react_1.default.useRef((0,fonts_1.isFontLoaded)(t));return react_1.default.useLayoutEffect((()=>{if(n.current=(0,fonts_1.isFontLoaded)(t),n.current)return;let r=!0;return(async()=>{n.current=!1,i();const o=(0,loader_1.incrementLoader)(`text ${t}`);await e.loadFont(t),konva_1.default.Util.requestAnimFrame(o),r&&(n.current=!0,i())})(),()=>{r=!1}}),[t]),[n.current]};exports.useFontLoader=useFontLoader;const getLineHeight=({fontLoaded:e,fontFamily:t,fontSize:r,lineHeight:i})=>react_1.default.useMemo((()=>{if("number"==typeof i)return i;const e=document.createElement("div");e.style.fontFamily=t,e.style.fontSize=r+"px",e.style.lineHeight=i,e.innerText="Test text",document.body.appendChild(e);const n=e.offsetHeight;return document.body.removeChild(e),n/r}),[e,t,r,i]);function getRelativePointerPosition(e){var t=e.getAbsoluteTransform().copy();t.invert();var r=e.getStage().getPointerPosition();return t.point(r)}function getCursorPosition(e){var t;const r=e.target,i=getRelativePointerPosition(r),n=r.textArr,o=Math.floor(i.y/(r.fontSize()*r.lineHeight())),a=n.slice(0,o).reduce(((e,t)=>e+t.text.length),o),l=null!==(t=n[o])&&void 0!==t?t:n[0];let s=0;"right"===r.align()?s=r.width()-l.width:"center"===r.align()&&(s=r.width()/2-l.width/2);return a+Math.round((i.x-s)/l.width*l.text.length)}function usePrevious(e){const t=react_1.default.useRef(e),r=react_1.default.useRef(e);return react_1.default.useMemo((()=>{r.current=t.current,t.current=e}),[e]),r.current}function findFitFontSize(e,t){const r=e.fontSize(),i=e.height(),n=(0,text_1.removeTags)(t.text);let o=t.a.fontSize;e.height(void 0);const a=Math.round(2*t.a.fontSize)-1;for(let r=1;r<a;r++){const r=t.a.height&&e.height()>t.a.height,i=n.split("\n").join(" ").split(/[\s-]+/);let a=e.textArr.map((e=>e.text)).join(";");const l=i.find((e=>!a.includes(e)||(a=a.replace(e,""),!1)));if(!(r||l))break;o-=.5,e.fontSize(o)}return e.fontSize(r),e.height(i),o}function generateBackgroundShape({lines:e,lineHeight:t,width:r,align:i="left",padding:n=0,cornerRadius:o=0}){var a;e.forEach(((e,t)=>{e.cx=r/2,"right"===i?e.cx=r-e.width/2:"left"===i&&(e.cx=e.width/2),"justify"!==i||e.lastInParagraph||(e.width=r),"justify"===i&&(e.cx=e.width/2)}));let l=`M ${null===(a=e[0])||void 0===a?void 0:a.cx} ${-n}`;e.forEach(((r,i)=>{const{cx:o}=r,a=e[i-1];a&&a.width>r.width?l+=` L ${o+r.width/2+n} ${i*t+n}`:l+=` L ${o+r.width/2+n} ${i*t-n}`;const s=e[i+1];s&&s.width>r.width?l+=` L ${o+r.width/2+n} ${(i+1)*t-n}`:l+=` L ${o+r.width/2+n} ${(i+1)*t+n}`}));for(var s=e.length-1;s>=0;s--){const r=e[s],{cx:i}=r,o=e[s+1];o&&o.width>r.width?l+=` L ${i-r.width/2-n} ${(s+1)*t-n}`:l+=` L ${i-r.width/2-n} ${(s+1)*t+n}`;const a=e[s-1];a&&a.width>r.width?l+=` L ${i-r.width/2-n} ${s*t+n}`:l+=` L ${i-r.width/2-n} ${s*t-n}`}l+=" Z";const d=(0,svg_round_corners_1.parsePath)(l);return(0,svg_round_corners_1.roundCommands)(d,o).path}exports.getLineHeight=getLineHeight,exports.usePrevious=usePrevious;const useTextColor=e=>react_1.default.useMemo((()=>{if(!gradient.isGradient(e.fill))return{fill:e.fill};const{stops:t,rotation:r}=gradient.parseColor(e.fill),i={x:e.a.width/2,y:e.a.height/2},n=Math.sqrt(Math.pow(i.x,2)+Math.pow(i.y,2)),o=konva_1.default.Util.degToRad(r)-Math.PI/2,a=[];return t.forEach((({offset:e,color:t})=>{a.push(e,t)})),{fillLinearGradientStartPointX:i.x-n*Math.cos(o),fillLinearGradientStartPointY:i.y-n*Math.sin(o),fillLinearGradientColorStops:a,fillLinearGradientEndPointX:i.x+n*Math.cos(o),fillLinearGradientEndPointY:i.y+n*Math.sin(o),fill:t[1].color,fillPriority:"linear-gradient"}}),[e.fill]);exports.useTextColor=useTextColor,exports.TextElement=(0,mobx_react_lite_1.observer)((({element:e,store:t})=>{const r=react_1.default.useRef(null),i=react_1.default.useRef(null),{editorEnabled:n,selectAll:o}=useEditor(e),[a,l]=react_1.default.useState(!1),[s,d]=react_1.default.useState(!1),c=react_1.default.useRef(e.a.height),u=t.selectedElements.indexOf(e)>=0,{textVerticalResizeEnabled:f}=flags_1.flags,h=usePrevious(e.fontFamily),[g,_]=react_1.default.useState([]);react_1.default.useEffect((()=>{var e,t;const i=null!==(t=null===(e=r.current)||void 0===e?void 0:e.textArr)&&void 0!==t?t:[];JSON.stringify(i)!==JSON.stringify(g)&&_(i)})),react_1.default.useEffect((()=>{if(e.a.width)return;const t=r.current;t.width(600),e.set({width:1.4*t.getTextWidth()})}),[]),react_1.default.useLayoutEffect((()=>(0,mobx_1.autorun)((()=>{const t=r.current;(0,apply_filters_1.applyFilter)(t,e)}))));const[p]=(0,exports.useFontLoader)(t,e.fontFamily),x=(0,text_1.removeTags)(e.text),y=()=>{const e=r.current.clone({height:void 0}),t=Math.ceil(e.fontSize()*e.lineHeight()*e.textArr.length+1);return e.destroy(),t};react_1.default.useLayoutEffect((()=>{if(!p)return;const{textOverflow:i}=flags_1.flags;if(e.a.height)if("change-font-size"!==i||s||t.isPlaying){if("resize"===i){const i=y();f&&e.a.height<i&&t.history.ignore((()=>{e.set({height:i}),r.current.height(i)}),!1,!0),f||e.a.height===i||t.history.ignore((()=>{e.set({height:i}),r.current.height(i)}),!1,!0)}}else{const i=findFitFontSize(r.current,e);if(i!==e.a.fontSize)return void t.history.ignore((()=>{e.set({fontSize:i})}),!1,!0);const n=y();e.a.height===n||f||t.history.ignore((()=>{e.set({height:n})}),!1,!0)}else{const r=y();t.history.ignore((()=>{e.set({height:r})}),!1,!0)}})),react_1.default.useLayoutEffect((()=>{const t=r.current;t&&(t.width(t.width()+1e-8),t._setTextData(),(0,apply_filters_1.applyFilter)(t,e))}),[p]);const m=react_1.default.useRef(null),v=react_1.default.useRef(0),w=r=>{r.evt.preventDefault();const i=t.selectedShapes.find((t=>t===e));i&&e.contentEditable&&(v.current=getCursorPosition(r),e.toggleEditMode())},S=!x&&e.placeholder?.6:e.a.opacity;(0,use_fadein_1.useFadeIn)(r,S);const b=(0,exports.getLineHeight)({fontLoaded:p,fontFamily:e.fontFamily,fontSize:e.a.fontSize,lineHeight:e.lineHeight}),E=e.selectable||"admin"===t.role,T=(0,exports.useTextColor)(e),L=react_1.default.useMemo((()=>e.backgroundEnabled?generateBackgroundShape({lines:JSON.parse(JSON.stringify(g)),cornerRadius:e.backgroundCornerRadius*(e.a.fontSize*b*.5),lineHeight:b*e.a.fontSize,padding:e.backgroundPadding*(e.a.fontSize*b*.5),width:e.a.width,align:e.align}):""),[e.backgroundEnabled,e.backgroundCornerRadius,e.a.fontSize,b,e.backgroundPadding,e.a.width,e.align,g]),M=(0,screen_1.useMobile)();let k=0;return"middle"===e.verticalAlign?k=(e.a.height-g.length*b*e.a.fontSize)/2:"bottom"===e.verticalAlign&&(k=e.a.height-g.length*b*e.a.fontSize),react_1.default.createElement(react_1.default.Fragment,null,react_1.default.createElement(react_konva_1.Path,{ref:i,x:e.a.x,y:e.a.y,rotation:e.a.rotation,hideInExport:!e.showInExport||!x,listening:!1,visible:e.backgroundEnabled,opacity:e.backgroundOpacity,data:L,fill:e.backgroundColor,offsetY:-k}),react_1.default.createElement(react_konva_1.Text,Object.assign({ref:r,id:e.id,name:"element",hideInExport:!e.showInExport||!x,editModeEnabled:e._editModeEnabled,x:e.a.x,y:e.a.y,rotation:e.a.rotation,width:e.a.width,height:e.a.height,text:x||e.placeholder},T,{stroke:e.stroke,lineJoin:"round",strokeWidth:e.strokeWidth,fillAfterStrokeEnabled:!0,fontSize:e.a.fontSize,fontFamily:`"${e.fontFamily}", "${h}"`,fontStyle:e.fontStyle+" "+e.fontWeight,textDecoration:e.textDecoration,align:e.align,verticalAlign:e.verticalAlign,draggable:M?e.draggable&&u:e.draggable,preventDefault:!M||u,opacity:S,visible:!e._editModeEnabled,ellipsis:"ellipsis"===flags_1.flags.textOverflow,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,lineHeight:b,letterSpacing:e.letterSpacing*e.a.fontSize,listening:E,onDragMove:t=>{e.set({x:t.target.x(),y:t.target.y()})},onDragEnd:t=>{e.set({x:t.target.x(),y:t.target.y()})},onMouseEnter:()=>{l(!0)},onMouseLeave:()=>{l(!1)},onClick:w,onTap:w,onTransformStart:()=>{d(!0),c.current=r.current.height()},onTransform:t=>{var r,n;const o=t.target;null===(r=i.current)||void 0===r||r.setAttrs({x:o.x(),y:o.y(),rotation:o.rotation(),scale:o.scale()});const a=(null===(n=o.getStage())||void 0===n?void 0:n.findOne("Transformer")).getActiveAnchor();if("middle-left"===a||"middle-right"===a){const t=o.scaleX(),r=o.width()*t,i=e.a.fontSize;let n=r;r<i&&(n=i,m.current&&o.position(m.current)),o.width(n),o.scaleX(1),o.scaleY(1);const a=y();if("ellipsis"!==flags_1.flags.textOverflow){const t=Math.max(a,c.current);o.height(t),e.set({height:o.height()})}e.set({x:o.x(),y:o.y(),width:o.width(),rotation:o.rotation()}),(0,apply_filters_1.applyFilter)(o,e)}if("top-center"===a||"bottom-center"===a){let r="resize"===flags_1.flags.textOverflow?y():b*e.a.fontSize;t.target.height(Math.max(r,t.target.height()*t.target.scaleY())),t.target.scaleY(1)}t.target.strokeWidth(e.strokeWidth/t.target.scaleX()),m.current=t.target.position()},onTransformEnd:t=>{var r;const n=t.target.scaleX();t.target.scaleX(1),t.target.scaleY(1),t.target.strokeWidth(e.strokeWidth),e.set({fontSize:Math.round(e.a.fontSize*n),width:Math.ceil(t.target.width()*n),x:t.target.x(),y:t.target.y(),rotation:t.target.rotation(),height:t.target.height()*n}),null===(r=i.current)||void 0===r||r.setAttrs({scaleX:1,scaleY:1}),d(!1)}})),n&&react_1.default.createElement(react_konva_1.Group,{x:e.a.x,y:e.a.y,rotation:e.a.rotation},react_1.default.createElement(TextInput,{textNodeRef:r,element:e,selectAll:o,cursorPosition:v.current,onBlur:()=>{e.toggleEditMode(!1)}})),!s&&(a||u)&&react_1.default.createElement(highlighter_1.Highlighter,{element:e}))}));
package/canvas/video-element.js CHANGED
@@ -1 +1 @@
1
- "use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,t,r,a){void 0===a&&(a=r);var o=Object.getOwnPropertyDescriptor(t,r);o&&!("get"in o?!t.__esModule:o.writable||o.configurable)||(o={enumerable:!0,get:function(){return t[r]}}),Object.defineProperty(e,a,o)}:function(e,t,r,a){void 0===a&&(a=r),e[a]=t[r]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),__importStar=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)"default"!==r&&Object.prototype.hasOwnProperty.call(e,r)&&__createBinding(t,e,r);return __setModuleDefault(t,e),t},__importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.VideoElement=exports.useImageLoader=exports.setImageLoaderHook=void 0;const react_1=__importDefault(require("react")),mobx_react_lite_1=require("mobx-react-lite"),mobx_1=require("mobx"),react_konva_1=require("react-konva"),use_image_1=__importDefault(require("use-image")),konva_1=__importDefault(require("konva")),react_konva_utils_1=require("react-konva-utils"),highlighter_1=require("./highlighter"),loader_1=require("../utils/loader"),svg=__importStar(require("../utils/svg")),flags_1=require("../utils/flags"),apply_filters_1=require("./apply-filters"),use_fadein_1=require("./use-fadein"),screen_1=require("../utils/screen");function createCanvas(){return document.createElement("canvas")}async function getFixedUrl(e){if(!(e.indexOf("data:image/svg+xml")>=0||e.indexOf(".svg")>=0))return e;const t=await svg.urlToString(e),r=svg.fixSize(t);return svg.svgToURL(r)}const useSizeFixer=e=>{const[t,r]=react_1.default.useState(e);return react_1.default.useEffect((()=>{(async()=>{const a=await getFixedUrl(e);a!==t&&r(a)})()}),[e]),t},playIcon=new window.Image;playIcon.src=svg.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 pauseIcon=new window.Image;pauseIcon.src=svg.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');const useFlip=(e,t,r)=>{const a=react_1.default.useMemo((()=>{var a,o;const{flipX:i,flipY:n}=e,d="svg"===e.type||e.src.indexOf("data:image/svg+xml")>=0||e.src.indexOf(".svg")>=0,c=navigator.userAgent.toLowerCase().indexOf("firefox")>-1&&d||e.maskSrc;if(!i&&!n&&!c)return t;if(!t||!t.width||!t.height)return null;const h=createCanvas();let l=1;"svg"===e.type&&(l=Math.max(e.width/t.width*r,e.height/t.height*r)),h.width=Math.max(t.width*l,1),h.height=Math.max(t.height*l,1);let s=i?-h.width:0,u=n?-h.height:0;return null===(a=h.getContext("2d"))||void 0===a||a.scale(i?-1:1,n?-1:1),null===(o=h.getContext("2d"))||void 0===o||o.drawImage(t,s,u,h.width,h.height),h}),[e.maskSrc,e.flipX,e.flipY,t,e.width,e.height,r]);return react_1.default.useEffect((()=>()=>{a&&"CANVAS"===a.nodeName&&konva_1.default.Util.releaseCanvas(a)}),[a]),a};function getCrop(e,t){const r=t.width/t.height;let a,o;r>=e.width/e.height?(a=e.width,o=e.width/r):(a=e.height*r,o=e.height);return{x:(e.width-a)/2,y:(e.height-o)/2,width:a,height:o}}function downsample(e,t,r,a,o,i,n){for(var d=new ImageData(t,r),c=new Int32Array(e.data.buffer),h=e.width,l=new Int32Array(d.data.buffer),s=d.width,u=t/i,g=r/n,f=Math.round(1/u),p=Math.round(1/g),_=f*p,m=0;m<d.height;m++)for(var w=0;w<s;w++){for(var v=a+Math.round(w/u)+(o+Math.round(m/g))*h,x=0,y=0,M=0,E=0,b=0;b<p;b++)for(var C=0;C<f;C++){var L=c[v+C+b*h];x+=L<<24>>>24,y+=L<<16>>>24,M+=L<<8>>>24,E+=L>>>24}x=Math.round(x/_),y=Math.round(y/_),M=Math.round(M/_),E=Math.round(E/_),l[w+m*s]=E<<24|M<<16|y<<8|x}return d}function downScaleCanvas(e,t){var r,a;const o=createCanvas();o.width=e.width,o.height=e.height,null===(r=o.getContext("2d"))||void 0===r||r.drawImage(e,0,0,o.width,o.height);const i=downsample(o.getContext("2d").getImageData(0,0,o.width,o.height),Math.floor(o.width*t),Math.floor(o.height*t),0,0,o.width,o.height);return o.width=Math.floor(o.width*t),o.height=Math.floor(o.height*t),null===(a=o.getContext("2d"))||void 0===a||a.putImageData(i,0,0),o}const useCornerRadiusAndCrop=(e,t,r,a,o=0,i=!1)=>{const n=Math.floor(Math.max(e.width*a,1)),d=Math.floor(Math.max(e.height*a,1)),c=Math.min(o*a,n/2,d/2),h=Math.max(e.width/r.width,e.height/r.height)*a,l=e.page._exporting&&flags_1.flags.imageDownScalingEnabled&&h<1&&!i,s=0===r.x&&0===r.y&&r.width===(null==t?void 0:t.width)&&r.height===(null==t?void 0:t.height),u=react_1.default.useMemo((()=>{if(!t||!t.width||!t.height)return;return s&&0===c&&!l?void 0:createCanvas()}),[t,c,l,s]);return react_1.default.useLayoutEffect((()=>{if(!u||!t)return;u.width=n,u.height=d;const e=u.getContext("2d");if(!e)return;c&&(e.beginPath(),e.moveTo(c,0),e.lineTo(n-c,0),e.arc(n-c,c,c,3*Math.PI/2,0,!1),e.lineTo(n,d-c),e.arc(n-c,d-c,c,0,Math.PI/2,!1),e.lineTo(c,d),e.arc(c,d-c,c,Math.PI/2,Math.PI,!1),e.lineTo(0,c),e.arc(c,c,c,Math.PI,3*Math.PI/2,!1),e.clip());const a=l?downScaleCanvas(t,h):t,o=l?{x:Math.floor(r.x*h),y:Math.floor(r.y*h),width:Math.floor(r.width*h),height:Math.floor(r.height*h)}:r;e.drawImage(a,o.x,o.y,o.width,o.height,0,0,u.width,u.height)}),[u,e.width,e.height,r.x,r.y,r.width,r.height,o,a,i,e.page._exporting,l]),react_1.default.useEffect((()=>()=>{u&&"CANVAS"===u.nodeName&&konva_1.default.Util.releaseCanvas(u)}),[u]),u||t},useClip=(e,t,r,a)=>{const o=useSizeFixer(e.clipSrc||""),[i,n]=useImageHook(o,"anonymous"),d=e.clipSrc?n:"loaded";(0,exports.useImageLoader)(d,e.id+"-clip");const c=react_1.default.useMemo((()=>{if(t&&i)return createCanvas()}),[t,i]);react_1.default.useLayoutEffect((()=>{var a;if(!i)return;if(!t||!t.width||!t.height)return;if(!i||!i.width||!i.height)return;if(!c)return;const o=createCanvas(),n=Math.max(e.width/i.width*r,e.height/i.height*r);o.width=i.width*n,o.height=i.height*n,null===(a=o.getContext("2d"))||void 0===a||a.drawImage(i,0,0,o.width,o.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(o,0,0,t.width,t.height),konva_1.default.Util.releaseCanvas(o),d.globalCompositeOperation="source-in",d.drawImage(t,0,0,c.width,c.height),d.restore())}),[c,t,i,e.width,e.height,r,...a]);return e.clipSrc&&i?c:t},PLACEHOLDER_CANVAS=createCanvas(),LoadingPlaceholder=(0,mobx_react_lite_1.observer)((({element:e})=>{const t=Math.min(30,e.width/4,e.height/4),r=react_1.default.useRef(null);return react_1.default.useEffect((()=>{const e=r.current;if(!e)return;const t=new konva_1.default.Animation((t=>{e.rotate(((null==t?void 0:t.timeDiff)||0)/2)}),e.getLayer());return t.start(),()=>{t.stop()}})),react_1.default.createElement(react_konva_1.Group,{x:e.x,y:e.y,rotation:e.rotation,listening:!1,opacity:e.a.opacity,hideInExport:!e.showInExport},react_1.default.createElement(react_konva_1.Rect,{width:e.width,height:e.height,fill:"rgba(124, 173, 212, 0.8)"}),react_1.default.createElement(react_konva_1.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}))})),ErrorPlaceholder=(0,mobx_react_lite_1.observer)((({element:e})=>{const t="Can not load the video...",r=Math.max(10,Math.min(30,e.width/25));return react_1.default.createElement(react_konva_1.Group,{x:e.x,y:e.y,rotation:e.rotation,listening:!1,opacity:e.a.opacity,hideInExport:!e.showInExport},react_1.default.createElement(react_konva_1.Rect,{width:e.width,height:e.height,fill:"rgba(223, 102, 102, 0.8)"}),react_1.default.createElement(react_konva_1.Text,{text:t,fontSize:r,width:e.width,height:e.height,align:"center",fill:"white",verticalAlign:"middle",padding:5}))}));let useImageHook=use_image_1.default;const setImageLoaderHook=e=>{useImageHook=e};exports.setImageLoaderHook=setImageLoaderHook;const useImageLoader=(e,t)=>{const r=react_1.default.useRef(),a=()=>{var e;null===(e=r.current)||void 0===e||e.call(r),r.current=void 0};react_1.default.useEffect((()=>a),[]),react_1.default.useLayoutEffect((()=>{"loading"!==e||r.current||(r.current=(0,loader_1.incrementLoader)(`video ${t}`)),"loading"!==e&&a(),"failed"===e&&(0,loader_1.triggerLoadError)(`video ${t}`)}),[e])};exports.useImageLoader=useImageLoader;const usePreviousImage=({image:e,status:t,type:r})=>{const a=react_1.default.useRef();react_1.default.useEffect((()=>{a.current=e||a.current}),[e]);return"failed"!==t||"failed"!==t&&"svg"===r?a.current:void 0};function isBuffered(e,t){for(var r=e.buffered,a=0;a<r.length;a++)if(t>=r.start(a)&&t<=r.end(a))return!0;return!1}const useImageSource=e=>{const[t,r]=react_1.default.useReducer((e=>e+1),0),a=react_1.default.useRef("loading"),o=react_1.default.useRef(e.src),i=react_1.default.useRef(e.src);return i.current!==e.src&&(i.current=e.src,a.current="loading"),react_1.default.useEffect((()=>{if("image"===e.type)return;if(!e.src)return;let t=!1;return(async()=>{a.current="loading",r();const i=await svg.urlToString(e.src),n=svg.fixSize(i),d=svg.replaceColors(n,e.colorsReplace);t||(o.current=d,a.current="loaded",r())})(),()=>{t=!0}}),[e.src,JSON.stringify(e.colorsReplace)]),"image"===e.type?[e.src,"loaded"]:[o.current,a.current]};function useVideo(e,t,r){const a=react_1.default.useRef("loading"),o=react_1.default.useRef(),[i,n]=react_1.default.useState(0),d=react_1.default.useRef(),c=react_1.default.useRef(),h=react_1.default.useRef();return d.current===e&&c.current===t&&h.current===r||(a.current="loading",o.current=void 0,d.current=e,c.current=t,h.current=r),react_1.default.useLayoutEffect((function(){if(e){var i=document.createElement("video");return i.addEventListener("canplay",d),i.addEventListener("error",c),t&&(i.crossOrigin=t),r&&(i.referrerpolicy=r),i.src=e,function(){i.removeEventListener("canplay",d),i.removeEventListener("error",c)}}function d(){a.current="loaded",o.current=i,n(Math.random())}function c(e){a.current="failed",o.current=void 0,n(Math.random())}}),[e,t,r]),[o.current,a.current]}exports.VideoElement=(0,mobx_react_lite_1.observer)((({element:e,store:t})=>{var r;const[a,o]=react_1.default.useState(!1),i=react_1.default.useRef(null),n=react_1.default.useRef(null),[d,c]=react_1.default.useState(!1),h=t.selectedElements.indexOf(e)>=0,[l,s]=react_1.default.useState(!1),[u,g]=useVideo(e.src,"anonymous");(0,exports.useImageLoader)(g,e.id+"-video"),u&&(u.muted=!0,u.width=u.videoWidth,u.height=u.videoHeight);const f=u||PLACEHOLDER_CANVAS;react_1.default.useEffect((()=>{u&&t.history.ignore((()=>{e.set({duration:1e3*u.duration})}))}),[u]),react_1.default.useEffect((()=>{var e;if(!u)return;const r=t.isPlaying||l;if(!r)return void u.pause();r&&u.play();const a=new konva_1.default.Animation((()=>{}),null===(e=i.current)||void 0===e?void 0:e.getLayer());a.start();const o=()=>{s(!1),u.currentTime=0};return u.addEventListener("ended",o),()=>{a.stop(),u.removeEventListener("ended",o)}}),[u,l,t.isPlaying]),react_1.default.useEffect((()=>(0,mobx_1.autorun)((()=>{var r,a;if(u){const o=t.currentTime%e.duration;u.currentTime=o/1e3,null===(a=null===(r=i.current)||void 0===r?void 0:r.getLayer())||void 0===a||a.batchDraw()}}))),[t,u]),react_1.default.useEffect((()=>{if(!u)return;let t=null;const r=()=>{isBuffered(u,u.currentTime)||(t&&console.error("finish already exists"),t=(0,loader_1.incrementLoader)(`video ${e.id}`))},a=()=>{t&&(t(),t=null)};return u.addEventListener("timeupdate",r),u.addEventListener("canplay",a),()=>{u.removeEventListener("timeupdate",r),u.removeEventListener("canplay",a)}}),[u,e.id,loader_1.incrementLoader]);let{cropX:p,cropY:_,cropWidth:m,cropHeight:w}=e;"loaded"!==g&&(p=_=0,m=w=1);const v=f.width*m,x=f.height*w,y=e.width/e.height;let M,E;const b=v/x,C="svg"===e.type;C?(M=v,E=x):y>=b?(M=v,E=v/y):(M=x*y,E=x);const L={x:f.width*p,y:f.height*_,width:M,height:E},k=null!==(r=e.cornerRadius)&&void 0!==r?r:0;let I=useClip(e,useCornerRadiusAndCrop(e,f,L,t._elementsPixelRatio,k,a||e._cropModeEnabled||"svg"===e.type),t._elementsPixelRatio,[L,k,t._elementsPixelRatio]);const S=Math.max(e.width/M,e.height/E);react_1.default.useEffect((()=>{var t;if(!e._cropModeEnabled)return;const r=null===(t=i.current)||void 0===t?void 0:t.getStage();function a(t){e._cropModeEnabled&&t.target!==n.current&&e.toggleCropMode(!1)}function o(t){e._cropModeEnabled&&"CANVAS"!==t.target.nodeName&&e.toggleCropMode(!1)}return document.body.addEventListener("click",o),null==r||r.on("click",a),null==r||r.on("tap",a),()=>{document.body.removeEventListener("click",o),document.body.removeEventListener("touchstart",o),null==r||r.off("click",a),null==r||r.off("click",a)}}),[e._cropModeEnabled]),react_1.default.useLayoutEffect((()=>{if(a||e._cropModeEnabled)return;(0,apply_filters_1.applyFilter)(i.current,e);return(0,mobx_1.autorun)((()=>{(0,apply_filters_1.applyFilter)(i.current,e)}),{delay:100})}),[f,a,m,w,e._cropModeEnabled]),react_1.default.useLayoutEffect((()=>{var t;a||e._cropModeEnabled?null===(t=i.current)||void 0===t||t.clearCache():(0,apply_filters_1.applyFilter)(i.current,e)}),[a,e.width,e.height,e._cropModeEnabled]),react_1.default.useEffect((()=>{(0,apply_filters_1.applyFilter)(i.current,e)}),[e.shadowEnabled,e.shadowBlur,e.cornerRadius,e.shadowColor,e.shadowOffsetX,e.shadowOffsetY,e.shadowOpacity]);const R=react_1.default.useRef(null),O=react_1.default.useRef(null),T=react_1.default.useRef(null);react_1.default.useLayoutEffect((()=>{e._cropModeEnabled&&(O.current.nodes([R.current]),T.current.nodes([n.current]))}),[e._cropModeEnabled]);const P=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(),o=Math.min(1,M/r),i=Math.min(1,E/a),n=1-o,d=Math.min(n,Math.max(0,Math.round(-t.target.x())/r)),c=1-i,h=Math.min(c,Math.max(0,Math.round(-t.target.y())/a));t.target.setAttrs({x:-d*f.width,y:-h*f.height,scaleX:1,scaleY:1}),e.set({cropX:d,cropY:h,cropWidth:o,cropHeight:i})},X=()=>{"svg"!==e.type&&e.contentEditable&&setTimeout((()=>{e.toggleCropMode(!0)}))},Y="loading"===g,A="failed"===g,H=!Y&&!A,D=react_1.default.useRef({cropX:0,cropY:0,cropWidth:0,cropHeight:0}),W=H?e.a.opacity:0;(0,use_fadein_1.useFadeIn)(i,W);const q=e.selectable||"admin"===t.role,B=(0,screen_1.useMobile)();return react_1.default.createElement(react_1.default.Fragment,null,Y&&react_1.default.createElement(LoadingPlaceholder,{element:e}),A&&react_1.default.createElement(ErrorPlaceholder,{element:e}),react_1.default.createElement(react_konva_1.Image,{ref:i,name:"element",id:e.id,image:f,x:e.x,y:e.y,width:e.width||1,height:e.height||1,rotation:e.rotation,opacity:W,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,customCrop:L,listening:q,cropX:L.x,cropY:L.y,cropWidth:L.width,cropHeight:L.height,draggable:B?e.draggable&&h:e.draggable,preventDefault:!B||h,hideInExport:!e.showInExport,onMouseEnter:()=>{c(!0)},onMouseLeave:()=>{c(!1)},onDragStart:()=>{t.history.startTransaction()},onDragMove:t=>{e.set({x:t.target.x(),y:t.target.y()})},onDragEnd:r=>{e.set({x:r.target.x(),y:r.target.y()}),t.history.endTransaction()},onDblClick:X,onDblTap:X,onTransformStart:()=>{o(!0),t.history.startTransaction(),D.current={cropX:e.cropX,cropY:e.cropY,cropWidth:e.cropWidth,cropHeight:e.cropHeight}},onTransform:t=>{var r;const a=t.currentTarget,o=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 n=null===(r=t.target.getStage())||void 0===r?void 0:r.findOne("Transformer"),d=1-M/f.width,c=Math.min(d,Math.max(0,e.cropX)),h=1-E/f.height,l=Math.min(h,Math.max(0,e.cropY)),s=n.getActiveAnchor(),u=!(s.indexOf("middle")>=0||s.indexOf("center")>=0),g=!u&&o<1&&D.current.cropHeight>E/f.height;let p=u?e.cropWidth:e.cropWidth*o;g&&(p=e.cropWidth);const _=!u&&i<1&&D.current.cropWidth>M/f.width;let m=u?e.cropHeight:e.cropHeight*i;_&&(m=e.cropHeight),C&&(p=e.cropWidth,m=e.cropHeight),e.set({cropX:c,cropY:l,x:a.x(),y:a.y(),width:a.width()*o,height:a.height()*i,rotation:t.target.rotation(),cropWidth:Math.min(p,1-c),cropHeight:Math.min(m,1-l)})},onTransformEnd:r=>{const a=r.currentTarget;e.set({width:a.width(),height:a.height(),x:a.x(),y:a.y(),rotation:r.target.rotation(),cropWidth:M/f.width,cropHeight:E/f.height}),o(!1),t.history.endTransaction()}}),react_1.default.createElement(react_konva_1.Rect,{x:e.x,y:e.y,width:Math.max(e.width-e.borderSize,0),height:Math.max(e.height-e.borderSize,0),opacity:W,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,k-e.borderSize),hideInExport:!e.showInExport}),!l&&react_1.default.createElement(react_konva_1.Image,{image:playIcon,x:e.x+e.width/2-20,y:e.y+e.height/2-20,width:40,height:40,hideInExport:!0,onClick:()=>{s(!0)}}),l&&react_1.default.createElement(react_konva_1.Image,{image:pauseIcon,x:e.x+e.width/2-20,y:e.y+e.height/2-20,width:40,height:40,hideInExport:!0,onClick:()=>{s(!1)}}),e._cropModeEnabled&&react_1.default.createElement(react_konva_utils_1.Portal,{selector:".page-abs-container",enabled:!0},react_1.default.createElement(react_konva_1.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)"}),react_1.default.createElement(react_konva_1.Image,{listening:!1,image:I,x:e.x,y:e.y,width:e.width,height:e.height,rotation:e.rotation,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur}),react_1.default.createElement(react_konva_1.Group,{x:e.x,y:e.y,rotation:e.rotation,scaleX:S,scaleY:S},react_1.default.createElement(react_konva_1.Image,{image:f,ref:n,opacity:.4,draggable:!0,x:-e.cropX*f.width,y:-e.cropY*f.height,onDragMove:P,onTransform:P}),react_1.default.createElement(react_konva_1.Transformer,{ref:T,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}),react_1.default.createElement(react_konva_1.Rect,{width:M,height:E,ref:R,listening:!1,onTransform:t=>{t.target.x()<-e.cropX*f.width-1e-9&&(t.target.x(-e.cropX*f.width),t.target.scaleX(1)),t.target.y()<-e.cropY*f.height-1e-9&&(t.target.y(-e.cropY*f.height),t.target.scaleY(1));const r=Math.min(1,Math.max(0,e.cropX+t.target.x()/f.width)),a=Math.min(1,Math.max(0,t.target.y()/f.height+e.cropY)),o=t.target.width()*t.target.scaleX(),i=t.target.height()*t.target.scaleY(),n=Math.min(1-r,o/f.width),d=Math.min(1-a,i/f.height),c=t.target.getAbsolutePosition(t.target.getParent().getParent());t.target.scale({x:1,y:1}),t.target.position({x:0,y:0}),e.set({x:c.x,y:c.y,cropX:r,cropY:a,cropWidth:n,cropHeight:d,width:Math.min(o*S,f.width*(1-r)*S),height:Math.min(i*S,f.height*(1-a)*S)})}}),react_1.default.createElement(react_konva_1.Transformer,{ref:O,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}))),(d||h)&&react_1.default.createElement(highlighter_1.Highlighter,{element:e}))}));
1
+ "use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,t,r,a){void 0===a&&(a=r);var o=Object.getOwnPropertyDescriptor(t,r);o&&!("get"in o?!t.__esModule:o.writable||o.configurable)||(o={enumerable:!0,get:function(){return t[r]}}),Object.defineProperty(e,a,o)}:function(e,t,r,a){void 0===a&&(a=r),e[a]=t[r]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),__importStar=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)"default"!==r&&Object.prototype.hasOwnProperty.call(e,r)&&__createBinding(t,e,r);return __setModuleDefault(t,e),t},__importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.VideoElement=exports.useImageLoader=exports.setImageLoaderHook=void 0;const react_1=__importDefault(require("react")),mobx_react_lite_1=require("mobx-react-lite"),mobx_1=require("mobx"),react_konva_1=require("react-konva"),use_image_1=__importDefault(require("use-image")),konva_1=__importDefault(require("konva")),react_konva_utils_1=require("react-konva-utils"),highlighter_1=require("./highlighter"),loader_1=require("../utils/loader"),svg=__importStar(require("../utils/svg")),flags_1=require("../utils/flags"),apply_filters_1=require("./apply-filters"),use_fadein_1=require("./use-fadein"),screen_1=require("../utils/screen");function createCanvas(){return document.createElement("canvas")}async function getFixedUrl(e){if(!(e.indexOf("data:image/svg+xml")>=0||e.indexOf(".svg")>=0))return e;const t=await svg.urlToString(e),r=svg.fixSize(t);return svg.svgToURL(r)}const useSizeFixer=e=>{const[t,r]=react_1.default.useState(e);return react_1.default.useEffect((()=>{(async()=>{const a=await getFixedUrl(e);a!==t&&r(a)})()}),[e]),t},playIcon=new window.Image;playIcon.src=svg.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 pauseIcon=new window.Image;pauseIcon.src=svg.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');const useFlip=(e,t,r)=>{const a=react_1.default.useMemo((()=>{var a,o;const{flipX:i,flipY:n}=e,d="svg"===e.type||e.src.indexOf("data:image/svg+xml")>=0||e.src.indexOf(".svg")>=0,c=navigator.userAgent.toLowerCase().indexOf("firefox")>-1&&d||e.maskSrc;if(!i&&!n&&!c)return t;if(!t||!t.width||!t.height)return null;const h=createCanvas();let l=1;"svg"===e.type&&(l=Math.max(e.width/t.width*r,e.height/t.height*r)),h.width=Math.max(t.width*l,1),h.height=Math.max(t.height*l,1);let u=i?-h.width:0,s=n?-h.height:0;return null===(a=h.getContext("2d"))||void 0===a||a.scale(i?-1:1,n?-1:1),null===(o=h.getContext("2d"))||void 0===o||o.drawImage(t,u,s,h.width,h.height),h}),[e.maskSrc,e.flipX,e.flipY,t,e.width,e.height,r]);return react_1.default.useEffect((()=>()=>{a&&"CANVAS"===a.nodeName&&konva_1.default.Util.releaseCanvas(a)}),[a]),a};function getCrop(e,t){const r=t.width/t.height;let a,o;r>=e.width/e.height?(a=e.width,o=e.width/r):(a=e.height*r,o=e.height);return{x:(e.width-a)/2,y:(e.height-o)/2,width:a,height:o}}function downsample(e,t,r,a,o,i,n){for(var d=new ImageData(t,r),c=new Int32Array(e.data.buffer),h=e.width,l=new Int32Array(d.data.buffer),u=d.width,s=t/i,g=r/n,f=Math.round(1/s),p=Math.round(1/g),_=f*p,m=0;m<d.height;m++)for(var w=0;w<u;w++){for(var v=a+Math.round(w/s)+(o+Math.round(m/g))*h,x=0,y=0,M=0,E=0,b=0;b<p;b++)for(var C=0;C<f;C++){var L=c[v+C+b*h];x+=L<<24>>>24,y+=L<<16>>>24,M+=L<<8>>>24,E+=L>>>24}x=Math.round(x/_),y=Math.round(y/_),M=Math.round(M/_),E=Math.round(E/_),l[w+m*u]=E<<24|M<<16|y<<8|x}return d}function downScaleCanvas(e,t){var r,a;const o=createCanvas();o.width=e.width,o.height=e.height,null===(r=o.getContext("2d"))||void 0===r||r.drawImage(e,0,0,o.width,o.height);const i=downsample(o.getContext("2d").getImageData(0,0,o.width,o.height),Math.floor(o.width*t),Math.floor(o.height*t),0,0,o.width,o.height);return o.width=Math.floor(o.width*t),o.height=Math.floor(o.height*t),null===(a=o.getContext("2d"))||void 0===a||a.putImageData(i,0,0),o}const useCornerRadiusAndCrop=(e,t,r,a,o=0,i=!1)=>{const n=Math.floor(Math.max(e.width*a,1)),d=Math.floor(Math.max(e.height*a,1)),c=Math.min(o*a,n/2,d/2),h=Math.max(e.width/r.width,e.height/r.height)*a,l=e.page._exporting&&flags_1.flags.imageDownScalingEnabled&&h<1&&!i,u=0===r.x&&0===r.y&&r.width===(null==t?void 0:t.width)&&r.height===(null==t?void 0:t.height),s=react_1.default.useMemo((()=>{if(!t||!t.width||!t.height)return;return u&&0===c&&!l?void 0:createCanvas()}),[t,c,l,u]);return react_1.default.useLayoutEffect((()=>{if(!s||!t)return;s.width=n,s.height=d;const e=s.getContext("2d");if(!e)return;c&&(e.beginPath(),e.moveTo(c,0),e.lineTo(n-c,0),e.arc(n-c,c,c,3*Math.PI/2,0,!1),e.lineTo(n,d-c),e.arc(n-c,d-c,c,0,Math.PI/2,!1),e.lineTo(c,d),e.arc(c,d-c,c,Math.PI/2,Math.PI,!1),e.lineTo(0,c),e.arc(c,c,c,Math.PI,3*Math.PI/2,!1),e.clip());const a=l?downScaleCanvas(t,h):t,o=l?{x:Math.floor(r.x*h),y:Math.floor(r.y*h),width:Math.floor(r.width*h),height:Math.floor(r.height*h)}:r;e.drawImage(a,o.x,o.y,o.width,o.height,0,0,s.width,s.height)}),[s,e.width,e.height,r.x,r.y,r.width,r.height,o,a,i,e.page._exporting,l]),react_1.default.useEffect((()=>()=>{s&&"CANVAS"===s.nodeName&&konva_1.default.Util.releaseCanvas(s)}),[s]),s||t},useClip=(e,t,r,a)=>{const o=useSizeFixer(e.clipSrc||""),[i,n]=useImageHook(o,"anonymous"),d=e.clipSrc?n:"loaded";(0,exports.useImageLoader)(d,e.id+"-clip");const c=react_1.default.useMemo((()=>{if(t&&i)return createCanvas()}),[t,i]);react_1.default.useLayoutEffect((()=>{var a;if(!i)return;if(!t||!t.width||!t.height)return;if(!i||!i.width||!i.height)return;if(!c)return;const o=createCanvas(),n=Math.max(e.width/i.width*r,e.height/i.height*r);o.width=i.width*n,o.height=i.height*n,null===(a=o.getContext("2d"))||void 0===a||a.drawImage(i,0,0,o.width,o.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(o,0,0,t.width,t.height),konva_1.default.Util.releaseCanvas(o),d.globalCompositeOperation="source-in",d.drawImage(t,0,0,c.width,c.height),d.restore())}),[c,t,i,e.width,e.height,r,...a]);return e.clipSrc&&i?c:t},PLACEHOLDER_CANVAS=createCanvas(),LoadingPlaceholder=(0,mobx_react_lite_1.observer)((({element:e})=>{const t=Math.min(30,e.width/4,e.height/4),r=react_1.default.useRef(null);return react_1.default.useEffect((()=>{const e=r.current;if(!e)return;const t=new konva_1.default.Animation((t=>{e.rotate(((null==t?void 0:t.timeDiff)||0)/2)}),e.getLayer());return t.start(),()=>{t.stop()}})),react_1.default.createElement(react_konva_1.Group,{x:e.x,y:e.y,rotation:e.rotation,listening:!1,opacity:e.a.opacity,hideInExport:!e.showInExport},react_1.default.createElement(react_konva_1.Rect,{width:e.width,height:e.height,fill:"rgba(124, 173, 212, 0.8)"}),react_1.default.createElement(react_konva_1.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}))})),ErrorPlaceholder=(0,mobx_react_lite_1.observer)((({element:e})=>{const t="Can not load the video...",r=Math.max(10,Math.min(30,e.width/25));return react_1.default.createElement(react_konva_1.Group,{x:e.x,y:e.y,rotation:e.rotation,listening:!1,opacity:e.a.opacity,hideInExport:!e.showInExport},react_1.default.createElement(react_konva_1.Rect,{width:e.width,height:e.height,fill:"rgba(223, 102, 102, 0.8)"}),react_1.default.createElement(react_konva_1.Text,{text:t,fontSize:r,width:e.width,height:e.height,align:"center",fill:"white",verticalAlign:"middle",padding:5}))}));let useImageHook=use_image_1.default;const setImageLoaderHook=e=>{useImageHook=e};exports.setImageLoaderHook=setImageLoaderHook;const useImageLoader=(e,t)=>{const r=react_1.default.useRef(),a=()=>{var e;null===(e=r.current)||void 0===e||e.call(r),r.current=void 0};react_1.default.useEffect((()=>a),[]),react_1.default.useLayoutEffect((()=>{"loading"!==e||r.current||(r.current=(0,loader_1.incrementLoader)(`video ${t}`)),"loading"!==e&&a(),"failed"===e&&(0,loader_1.triggerLoadError)(`video ${t}`)}),[e])};exports.useImageLoader=useImageLoader;const usePreviousImage=({image:e,status:t,type:r})=>{const a=react_1.default.useRef();react_1.default.useEffect((()=>{a.current=e||a.current}),[e]);return"failed"!==t||"failed"!==t&&"svg"===r?a.current:void 0};function isBuffered(e,t){for(var r=e.buffered,a=0;a<r.length;a++)if(t>=r.start(a)&&t<=r.end(a))return!0;return!1}const useImageSource=e=>{const[t,r]=react_1.default.useReducer((e=>e+1),0),a=react_1.default.useRef("loading"),o=react_1.default.useRef(e.src),i=react_1.default.useRef(e.src);return i.current!==e.src&&(i.current=e.src,a.current="loading"),react_1.default.useEffect((()=>{if("image"===e.type)return;if(!e.src)return;let t=!1;return(async()=>{a.current="loading",r();const i=await svg.urlToString(e.src),n=svg.fixSize(i),d=svg.replaceColors(n,e.colorsReplace);t||(o.current=d,a.current="loaded",r())})(),()=>{t=!0}}),[e.src,JSON.stringify(e.colorsReplace)]),"image"===e.type?[e.src,"loaded"]:[o.current,a.current]};function useVideo(e,t,r){const a=react_1.default.useRef("loading"),o=react_1.default.useRef(),[i,n]=react_1.default.useState(0),d=react_1.default.useRef(),c=react_1.default.useRef(),h=react_1.default.useRef();return d.current===e&&c.current===t&&h.current===r||(a.current="loading",o.current=void 0,d.current=e,c.current=t,h.current=r),react_1.default.useLayoutEffect((function(){if(e){var i=document.createElement("video");return i.addEventListener("canplay",d),i.addEventListener("error",c),t&&(i.crossOrigin=t),r&&(i.referrerpolicy=r),i.src=e,function(){i.removeEventListener("canplay",d),i.removeEventListener("error",c)}}function d(){a.current="loaded",o.current=i,n(Math.random())}function c(e){a.current="failed",o.current=void 0,n(Math.random())}}),[e,t,r]),[o.current,a.current]}exports.VideoElement=(0,mobx_react_lite_1.observer)((({element:e,store:t})=>{var r;const[a,o]=react_1.default.useState(!1),i=react_1.default.useRef(null),n=react_1.default.useRef(null),[d,c]=react_1.default.useState(!1),h=t.selectedElements.indexOf(e)>=0,[l,u]=react_1.default.useState(!1),[s,g]=useVideo(e.src,"anonymous");(0,exports.useImageLoader)(g,e.id+"-video"),s&&(s.muted=!0,s.width=s.videoWidth,s.height=s.videoHeight);const f=s||PLACEHOLDER_CANVAS;react_1.default.useEffect((()=>{s&&t.history.ignore((()=>{e.set({duration:1e3*s.duration})}))}),[s]),react_1.default.useEffect((()=>{var e;if(!s)return;const r=t.isPlaying||l;if(!r)return void s.pause();r&&s.play();const a=new konva_1.default.Animation((()=>{}),null===(e=i.current)||void 0===e?void 0:e.getLayer());a.start();const o=()=>{u(!1),s.currentTime=0};return s.addEventListener("ended",o),()=>{a.stop(),s.removeEventListener("ended",o)}}),[s,l,t.isPlaying]),react_1.default.useEffect((()=>(0,mobx_1.autorun)((()=>{var r,a;if(s){const o=t.currentTime%e.duration;s.currentTime=o/1e3,null===(a=null===(r=i.current)||void 0===r?void 0:r.getLayer())||void 0===a||a.batchDraw()}}))),[t,s]),react_1.default.useEffect((()=>{if(!s)return;let t=null;const r=()=>{isBuffered(s,s.currentTime)||(t&&console.error("finish already exists"),t=(0,loader_1.incrementLoader)(`video ${e.id}`))},a=()=>{t&&(t(),t=null)};return s.addEventListener("timeupdate",r),s.addEventListener("canplay",a),()=>{s.removeEventListener("timeupdate",r),s.removeEventListener("canplay",a)}}),[s,e.id,loader_1.incrementLoader]);let{cropX:p,cropY:_,cropWidth:m,cropHeight:w}=e;"loaded"!==g&&(p=_=0,m=w=1);const v=f.width*m,x=f.height*w,y=e.width/e.height;let M,E;const b=v/x,C="svg"===e.type;C?(M=v,E=x):y>=b?(M=v,E=v/y):(M=x*y,E=x);const L={x:f.width*p,y:f.height*_,width:M,height:E},k=null!==(r=e.cornerRadius)&&void 0!==r?r:0;let I=useClip(e,useCornerRadiusAndCrop(e,f,L,t._elementsPixelRatio,k,a||e._cropModeEnabled||"svg"===e.type),t._elementsPixelRatio,[L,k,t._elementsPixelRatio]);const S=Math.max(e.width/M,e.height/E);react_1.default.useEffect((()=>{var t;if(!e._cropModeEnabled)return;const r=null===(t=i.current)||void 0===t?void 0:t.getStage();function a(t){e._cropModeEnabled&&t.target!==n.current&&e.toggleCropMode(!1)}function o(t){e._cropModeEnabled&&"CANVAS"!==t.target.nodeName&&e.toggleCropMode(!1)}return document.body.addEventListener("click",o),null==r||r.on("click",a),null==r||r.on("tap",a),()=>{document.body.removeEventListener("click",o),document.body.removeEventListener("touchstart",o),null==r||r.off("click",a),null==r||r.off("click",a)}}),[e._cropModeEnabled]),react_1.default.useLayoutEffect((()=>{if(a||e._cropModeEnabled)return;(0,apply_filters_1.applyFilter)(i.current,e);return(0,mobx_1.autorun)((()=>{(0,apply_filters_1.applyFilter)(i.current,e)}),{delay:100})}),[f,a,m,w,e._cropModeEnabled]),react_1.default.useLayoutEffect((()=>{var t;a||e._cropModeEnabled?null===(t=i.current)||void 0===t||t.clearCache():(0,apply_filters_1.applyFilter)(i.current,e)}),[a,e.width,e.height,e._cropModeEnabled]),react_1.default.useEffect((()=>{(0,apply_filters_1.applyFilter)(i.current,e)}),[e.shadowEnabled,e.shadowBlur,e.cornerRadius,e.shadowColor,e.shadowOffsetX,e.shadowOffsetY,e.shadowOpacity]);const R=react_1.default.useRef(null),O=react_1.default.useRef(null),P=react_1.default.useRef(null);react_1.default.useLayoutEffect((()=>{e._cropModeEnabled&&(O.current.nodes([R.current]),P.current.nodes([n.current]))}),[e._cropModeEnabled]);const X=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(),o=Math.min(1,M/r),i=Math.min(1,E/a),n=1-o,d=Math.min(n,Math.max(0,Math.round(-t.target.x())/r)),c=1-i,h=Math.min(c,Math.max(0,Math.round(-t.target.y())/a));t.target.setAttrs({x:-d*f.width,y:-h*f.height,scaleX:1,scaleY:1}),e.set({cropX:d,cropY:h,cropWidth:o,cropHeight:i})},Y=()=>{"svg"!==e.type&&e.contentEditable&&setTimeout((()=>{e.toggleCropMode(!0)}))},A="loading"===g,T="failed"===g,H=!A&&!T,W=react_1.default.useRef({cropX:0,cropY:0,cropWidth:0,cropHeight:0}),D=H?e.a.opacity:0;(0,use_fadein_1.useFadeIn)(i,D);const q=e.selectable||"admin"===t.role,B=(0,screen_1.useMobile)();return react_1.default.createElement(react_1.default.Fragment,null,A&&react_1.default.createElement(LoadingPlaceholder,{element:e}),T&&react_1.default.createElement(ErrorPlaceholder,{element:e}),react_1.default.createElement(react_konva_1.Image,{ref:i,name:"element",id:e.id,image:f,x:e.x,y:e.y,width:e.width||1,height:e.height||1,rotation:e.rotation,opacity:D,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,customCrop:L,listening:q,cropX:L.x,cropY:L.y,cropWidth:L.width,cropHeight:L.height,draggable:B?e.draggable&&h:e.draggable,preventDefault:!B||h,hideInExport:!e.showInExport,onMouseEnter:()=>{c(!0)},onMouseLeave:()=>{c(!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:Y,onDblTap:Y,onTransformStart:()=>{o(!0),W.current={cropX:e.cropX,cropY:e.cropY,cropWidth:e.cropWidth,cropHeight:e.cropHeight}},onTransform:t=>{var r;const a=t.currentTarget,o=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 n=null===(r=t.target.getStage())||void 0===r?void 0:r.findOne("Transformer"),d=1-M/f.width,c=Math.min(d,Math.max(0,e.cropX)),h=1-E/f.height,l=Math.min(h,Math.max(0,e.cropY)),u=n.getActiveAnchor(),s=!(u.indexOf("middle")>=0||u.indexOf("center")>=0),g=!s&&o<1&&W.current.cropHeight>E/f.height;let p=s?e.cropWidth:e.cropWidth*o;g&&(p=e.cropWidth);const _=!s&&i<1&&W.current.cropWidth>M/f.width;let m=s?e.cropHeight:e.cropHeight*i;_&&(m=e.cropHeight),C&&(p=e.cropWidth,m=e.cropHeight),e.set({cropX:c,cropY:l,x:a.x(),y:a.y(),width:a.width()*o,height:a.height()*i,rotation:t.target.rotation(),cropWidth:Math.min(p,1-c),cropHeight:Math.min(m,1-l)})},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:M/f.width,cropHeight:E/f.height}),o(!1)}}),react_1.default.createElement(react_konva_1.Rect,{x:e.x,y:e.y,width:Math.max(e.width-e.borderSize,0),height:Math.max(e.height-e.borderSize,0),opacity:D,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,k-e.borderSize),hideInExport:!e.showInExport}),!l&&react_1.default.createElement(react_konva_1.Image,{image:playIcon,x:e.x+e.width/2-20,y:e.y+e.height/2-20,width:40,height:40,hideInExport:!0,onClick:()=>{u(!0)}}),l&&react_1.default.createElement(react_konva_1.Image,{image:pauseIcon,x:e.x+e.width/2-20,y:e.y+e.height/2-20,width:40,height:40,hideInExport:!0,onClick:()=>{u(!1)}}),e._cropModeEnabled&&react_1.default.createElement(react_konva_utils_1.Portal,{selector:".page-abs-container",enabled:!0},react_1.default.createElement(react_konva_1.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)"}),react_1.default.createElement(react_konva_1.Image,{listening:!1,image:I,x:e.x,y:e.y,width:e.width,height:e.height,rotation:e.rotation,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur}),react_1.default.createElement(react_konva_1.Group,{x:e.x,y:e.y,rotation:e.rotation,scaleX:S,scaleY:S},react_1.default.createElement(react_konva_1.Image,{image:f,ref:n,opacity:.4,draggable:!0,x:-e.cropX*f.width,y:-e.cropY*f.height,onDragMove:X,onTransform:X}),react_1.default.createElement(react_konva_1.Transformer,{ref:P,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}),react_1.default.createElement(react_konva_1.Rect,{width:M,height:E,ref:R,listening:!1,onTransform:t=>{t.target.x()<-e.cropX*f.width-1e-9&&(t.target.x(-e.cropX*f.width),t.target.scaleX(1)),t.target.y()<-e.cropY*f.height-1e-9&&(t.target.y(-e.cropY*f.height),t.target.scaleY(1));const r=Math.min(1,Math.max(0,e.cropX+t.target.x()/f.width)),a=Math.min(1,Math.max(0,t.target.y()/f.height+e.cropY)),o=t.target.width()*t.target.scaleX(),i=t.target.height()*t.target.scaleY(),n=Math.min(1-r,o/f.width),d=Math.min(1-a,i/f.height),c=t.target.getAbsolutePosition(t.target.getParent().getParent());t.target.scale({x:1,y:1}),t.target.position({x:0,y:0}),e.set({x:c.x,y:c.y,cropX:r,cropY:a,cropWidth:n,cropHeight:d,width:Math.min(o*S,f.width*(1-r)*S),height:Math.min(i*S,f.height*(1-a)*S)})}}),react_1.default.createElement(react_konva_1.Transformer,{ref:O,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}))),(d||h)&&react_1.default.createElement(highlighter_1.Highlighter,{element:e}))}));
package/model/image-model.js CHANGED
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.ImageElement=void 0;const shape_model_1=require("./shape-model");exports.ImageElement=shape_model_1.Shape.named("Image").props({type:"image",width:100,height:100,src:"",cropX:0,cropY:0,cropWidth:1,cropHeight:1,cornerRadius:0,flipX:!1,flipY:!1,clipSrc:"",borderColor:"black",borderSize:0,keepRatio:!1,_cropModeEnabled:!1}).actions((e=>({toggleCropMode(o){e._cropModeEnabled=null!=o?o:!e._cropModeEnabled,e._cropModeEnabled?e.store.history.startTransaction():e.store.history.endTransaction()}})));
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.ImageElement=void 0;const shape_model_1=require("./shape-model");exports.ImageElement=shape_model_1.Shape.named("Image").props({type:"image",width:100,height:100,src:"",cropX:0,cropY:0,cropWidth:1,cropHeight:1,cornerRadius:0,flipX:!1,flipY:!1,clipSrc:"",borderColor:"black",borderSize:0,keepRatio:!1,_cropModeEnabled:!1}).actions((e=>({toggleCropMode(o){e._cropModeEnabled=null!=o?o:!e._cropModeEnabled,e._cropModeEnabled?e.store.history.startTransaction():e.store.history.endTransaction()},beforeDestroy(){e._cropModeEnabled&&e.store.history.endTransaction()}})));
package/model/node-model.js CHANGED
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.Node=void 0;const mobx_state_tree_1=require("mobx-state-tree"),nanoid_1=require("nanoid"),store_1=require("./store"),page_model_1=require("./page-model"),group_model_1=require("./group-model");exports.Node=mobx_state_tree_1.types.model("Node",{id:mobx_state_tree_1.types.identifier,type:"none",name:"",opacity:1,custom:mobx_state_tree_1.types.frozen(),visible:!0,selectable:!0,removable:!0,alwaysOnTop:!1,showInExport:!0}).postProcessSnapshot((e=>{const t=Object.assign({},e),o={};for(var r in t)"_"!==r[0]&&(o[r]=e[r]);return o})).views((e=>({get locked(){return!(e.draggable||e.contentEditable||e.styleEditable||e.resizable)},get page(){return(0,mobx_state_tree_1.getParentOfType)(e,page_model_1.Page)},get store(){return(0,mobx_state_tree_1.getParentOfType)(e,store_1.Store)},get top(){let t=e;for(;;){if(!(0,mobx_state_tree_1.hasParentOfType)(t,group_model_1.GroupElement))return t;t=(0,mobx_state_tree_1.getParentOfType)(t,group_model_1.GroupElement)}},get parent(){return(0,mobx_state_tree_1.hasParentOfType)(e,group_model_1.GroupElement)?(0,mobx_state_tree_1.getParentOfType)(e,group_model_1.GroupElement):(0,mobx_state_tree_1.hasParentOfType)(e,page_model_1.Page)?(0,mobx_state_tree_1.getParentOfType)(e,page_model_1.Page):(0,mobx_state_tree_1.hasParentOfType)(e,store_1.Store)?(0,mobx_state_tree_1.getParentOfType)(e,store_1.Store):null}}))).actions((e=>({toJSON:()=>Object.assign({},(0,mobx_state_tree_1.getSnapshot)(e))}))).actions((e=>({clone(t={}){const o=e.toJSON();return t.id=t.id||(0,nanoid_1.nanoid)(10),(0,group_model_1.forEveryChild)(o,(e=>{e.id=(0,nanoid_1.nanoid)(10)})),Object.assign(o,t),e.page.addElement(o)},set(t){Object.assign(e,t)},moveUp(){e.page.moveElementsUp([e.id])},moveTop(){e.page.moveElementsTop([e.id])},moveDown(){e.page.moveElementsDown([e.id])},moveBottom(){e.page.moveElementsBottom([e.id])},beforeDestroy(){e.store.history.endTransaction()}})));
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.Node=void 0;const mobx_state_tree_1=require("mobx-state-tree"),nanoid_1=require("nanoid"),store_1=require("./store"),page_model_1=require("./page-model"),group_model_1=require("./group-model");exports.Node=mobx_state_tree_1.types.model("Node",{id:mobx_state_tree_1.types.identifier,type:"none",name:"",opacity:1,custom:mobx_state_tree_1.types.frozen(),visible:!0,selectable:!0,removable:!0,alwaysOnTop:!1,showInExport:!0}).postProcessSnapshot((e=>{const t=Object.assign({},e),o={};for(var r in t)"_"!==r[0]&&(o[r]=e[r]);return o})).views((e=>({get locked(){return!(e.draggable||e.contentEditable||e.styleEditable||e.resizable)},get page(){return(0,mobx_state_tree_1.getParentOfType)(e,page_model_1.Page)},get store(){return(0,mobx_state_tree_1.getParentOfType)(e,store_1.Store)},get top(){let t=e;for(;;){if(!(0,mobx_state_tree_1.hasParentOfType)(t,group_model_1.GroupElement))return t;t=(0,mobx_state_tree_1.getParentOfType)(t,group_model_1.GroupElement)}},get parent(){return(0,mobx_state_tree_1.hasParentOfType)(e,group_model_1.GroupElement)?(0,mobx_state_tree_1.getParentOfType)(e,group_model_1.GroupElement):(0,mobx_state_tree_1.hasParentOfType)(e,page_model_1.Page)?(0,mobx_state_tree_1.getParentOfType)(e,page_model_1.Page):(0,mobx_state_tree_1.hasParentOfType)(e,store_1.Store)?(0,mobx_state_tree_1.getParentOfType)(e,store_1.Store):null}}))).actions((e=>({toJSON:()=>Object.assign({},(0,mobx_state_tree_1.getSnapshot)(e))}))).actions((e=>({clone(t={}){const o=e.toJSON();return t.id=t.id||(0,nanoid_1.nanoid)(10),(0,group_model_1.forEveryChild)(o,(e=>{e.id=(0,nanoid_1.nanoid)(10)})),Object.assign(o,t),e.page.addElement(o)},set(t){Object.assign(e,t)},moveUp(){e.page.moveElementsUp([e.id])},moveTop(){e.page.moveElementsTop([e.id])},moveDown(){e.page.moveElementsDown([e.id])},moveBottom(){e.page.moveElementsBottom([e.id])},beforeDestroy(){}})));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "polotno",
3
- "version": "2.0.7",
3
+ "version": "2.0.8",
4
4
  "description": "Design Editor Framework",
5
5
  "author": "Anton Lavrenov",
6
6
  "keywords": [
package/polotno.bundle.js CHANGED
@@ -2027,9 +2027,9 @@ t._setTextData(),ik(t,e))},[x]);let E=/*@__PURE__*/l(v).useRef(null),S=/*@__PURE
2027
2027
  .map(t=>e.values[t])// and stringify everything together with a comma inbetween values
2028
2028
  .join()}return`${e.marker}${n}`}).join("").trim()}(l),commands:l});return h.path}({lines:JSON.parse(JSON.stringify(m)),cornerRadius:e.backgroundCornerRadius*(e.a.fontSize*P*.5),lineHeight:P*e.a.fontSize,padding:e.backgroundPadding*(e.a.fontSize*P*.5),width:e.a.width,align:e.align}):"",[e.backgroundEnabled,e.backgroundCornerRadius,e.a.fontSize,P,e.backgroundPadding,e.a.width,e.align,m]),j=ij(),R=0;return"middle"===e.verticalAlign?R=(e.a.height-m.length*P*e.a.fontSize)/2:"bottom"===e.verticalAlign&&(R=e.a.height-m.length*P*e.a.fontSize),/*#__PURE__*/(0,p.jsxs)(/*@__PURE__*/l(v).Fragment,{children:[/*#__PURE__*/(0,p.jsx)("Path",{ref:r,x:e.a.x,y:e.a.y,rotation:e.a.rotation,hideInExport:!e.showInExport||!w,listening:!1,visible:e.backgroundEnabled,opacity:e.backgroundOpacity,data:N,fill:e.backgroundColor,offsetY:-R}),/*#__PURE__*/(0,p.jsx)(rY,{ref:n,id:e.id,name:"element",hideInExport:!e.showInExport||!w,editModeEnabled:e._editModeEnabled,x:e.a.x,y:e.a.y,rotation:e.a.rotation,width:e.a.width,height:e.a.height,text:w||e.placeholder,...A,stroke:e.stroke,lineJoin:"round",strokeWidth:e.strokeWidth,fillAfterStrokeEnabled:!0,fontSize:e.a.fontSize,// use old font family as fallback, until new font is loaded
2029
2029
  fontFamily:`"${e.fontFamily}", "${g}"`,fontStyle:e.fontStyle+" "+e.fontWeight,textDecoration:e.textDecoration,align:e.align,verticalAlign:e.verticalAlign,draggable:j?e.draggable&&h:e.draggable,// don't prevent default to enable scrolling on onselected
2030
- preventDefault:!j||h,opacity:k,visible:!e._editModeEnabled,ellipsis:"ellipsis"===ix.textOverflow,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,lineHeight:P,letterSpacing:e.letterSpacing*e.a.fontSize,listening:T,onDragStart:()=>{t.history.startTransaction()},onDragMove:t=>{e.set({x:t.target.x(),y:t.target.y()})},onDragEnd:n=>{e.set({x:n.target.x(),y:n.target.y()}),t.history.endTransaction()},onMouseEnter:()=>{s(!0)},onMouseLeave:()=>{s(!1)},onClick:O,onTap:O,onTransformStart:()=>{c(!0),t.history.startTransaction(),d.current=n.current.height()},onTransform:t=>{let n=t.target;// first map all changes to background
2030
+ preventDefault:!j||h,opacity:k,visible:!e._editModeEnabled,ellipsis:"ellipsis"===ix.textOverflow,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,lineHeight:P,letterSpacing:e.letterSpacing*e.a.fontSize,listening:T,onDragMove:t=>{e.set({x:t.target.x(),y:t.target.y()})},onDragEnd:t=>{e.set({x:t.target.x(),y:t.target.y()})},onMouseEnter:()=>{s(!0)},onMouseLeave:()=>{s(!1)},onClick:O,onTap:O,onTransformStart:()=>{c(!0),d.current=n.current.height()},onTransform:t=>{let n=t.target;// first map all changes to background
2031
2031
  // for performance reasons, instead of state update
2032
- r.current?.setAttrs({x:n.x(),y:n.y(),rotation:n.rotation(),scale:n.scale()});let i=n.getStage()?.findOne("Transformer"),o=i.getActiveAnchor();if("middle-left"===o||"middle-right"===o){let t=n.scaleX(),r=n.width()*t,i=e.a.fontSize,o=r;r<i&&(o=i,E.current&&n.position(E.current)),n.width(o),n.scaleX(1),n.scaleY(1);let a=_();if("ellipsis"!==ix.textOverflow){let t=Math.max(a,d.current);n.height(t),e.set({height:n.height()})}e.set({x:n.x(),y:n.y(),width:n.width(),rotation:n.rotation()}),ik(n,e)}if("top-center"===o||"bottom-center"===o){let n="resize"===ix.textOverflow,r=n?_():P*e.a.fontSize;t.target.height(Math.max(r,t.target.height()*t.target.scaleY())),t.target.scaleY(1)}t.target.strokeWidth(e.strokeWidth/t.target.scaleX()),E.current=t.target.position()},onTransformEnd:n=>{let i=n.target.scaleX();n.target.scaleX(1),n.target.scaleY(1),n.target.strokeWidth(e.strokeWidth),e.set({fontSize:Math.round(e.a.fontSize*i),width:Math.ceil(n.target.width()*i),x:n.target.x(),y:n.target.y(),rotation:n.target.rotation(),height:n.target.height()*i}),r.current?.setAttrs({scaleX:1,scaleY:1}),t.history.endTransaction(),c(!1)}}),i&&/*#__PURE__*/(0,p.jsx)(rq,{x:e.a.x,y:e.a.y,rotation:e.a.rotation,children:/*#__PURE__*/(0,p.jsx)(iM,{textNodeRef:n,element:e,selectAll:o,cursorPosition:S.current,onBlur:()=>{e.toggleEditMode(!1)}})}),!u&&(a||h)&&/*#__PURE__*/(0,p.jsx)(iT,{element:e})]})});var v=h("8NFma"),y=h("2SBKn"),v=h("8NFma");function iV(e){let t={fill:"",stroke:""};return e.getAttribute("fill")&&"none"!==e.getAttribute("fill")&&(t.fill=e.getAttribute("fill")),!t.fill&&e.style.fill&&"none"!==e.style.fill&&(t.fill=e.style.fill),e.getAttribute("stroke")&&(t.stroke=e.getAttribute("stroke")),!t.stroke&&e.style.stroke&&(t.stroke=e.style.stroke),t.stroke||t.fill||(t.fill="black"),t}let iq=["path","rect","circle"];function iG(e){for(var t=[],n=e.getElementsByTagName("*"),r=0,i=n.length;r<i;r++){let e=n[r];!function(e){for(;e.parentNode;){if("defs"===e.nodeName)return!0;e=e.parentNode}return!1}(e)&&(null!==e.getAttribute("fill")&&t.push(e),null!==e.getAttribute("stroke")?t.push(e):e.style&&e.style.fill?t.push(e):iq.indexOf(e.nodeName)>=0&&t.push(e))}return t}async function iW(e){let t=await fetch(e),n=await t.text();return i$(n)}async function iK(e){let t=await fetch(e,{mode:"cors"}),n=await t.text();return n}function i$(e){let t=window.btoa(unescape(encodeURIComponent(e)));return"data:image/svg+xml;base64,"+t}async function iY(e){let t=await iK(e);var n=new DOMParser().parseFromString(t,"image/svg+xml");let r=n.documentElement.getAttribute("viewBox"),[i,o,a,l]=r?.split(" ")||[];return{width:parseFloat(a),height:parseFloat(l)}}function iX(e){var t=new DOMParser().parseFromString(e,"image/svg+xml");let n=t.documentElement.getAttribute("viewBox"),[r,i,o,a]=n?.split(" ")||[],l=t.documentElement.getAttribute("width"),s=!l;s&&t.documentElement.setAttribute("width",o+"px");// if no height attribute, then set it from viewBox
2032
+ r.current?.setAttrs({x:n.x(),y:n.y(),rotation:n.rotation(),scale:n.scale()});let i=n.getStage()?.findOne("Transformer"),o=i.getActiveAnchor();if("middle-left"===o||"middle-right"===o){let t=n.scaleX(),r=n.width()*t,i=e.a.fontSize,o=r;r<i&&(o=i,E.current&&n.position(E.current)),n.width(o),n.scaleX(1),n.scaleY(1);let a=_();if("ellipsis"!==ix.textOverflow){let t=Math.max(a,d.current);n.height(t),e.set({height:n.height()})}e.set({x:n.x(),y:n.y(),width:n.width(),rotation:n.rotation()}),ik(n,e)}if("top-center"===o||"bottom-center"===o){let n="resize"===ix.textOverflow,r=n?_():P*e.a.fontSize;t.target.height(Math.max(r,t.target.height()*t.target.scaleY())),t.target.scaleY(1)}t.target.strokeWidth(e.strokeWidth/t.target.scaleX()),E.current=t.target.position()},onTransformEnd:t=>{let n=t.target.scaleX();t.target.scaleX(1),t.target.scaleY(1),t.target.strokeWidth(e.strokeWidth),e.set({fontSize:Math.round(e.a.fontSize*n),width:Math.ceil(t.target.width()*n),x:t.target.x(),y:t.target.y(),rotation:t.target.rotation(),height:t.target.height()*n}),r.current?.setAttrs({scaleX:1,scaleY:1}),c(!1)}}),i&&/*#__PURE__*/(0,p.jsx)(rq,{x:e.a.x,y:e.a.y,rotation:e.a.rotation,children:/*#__PURE__*/(0,p.jsx)(iM,{textNodeRef:n,element:e,selectAll:o,cursorPosition:S.current,onBlur:()=>{e.toggleEditMode(!1)}})}),!u&&(a||h)&&/*#__PURE__*/(0,p.jsx)(iT,{element:e})]})});var v=h("8NFma"),y=h("2SBKn"),v=h("8NFma");function iV(e){let t={fill:"",stroke:""};return e.getAttribute("fill")&&"none"!==e.getAttribute("fill")&&(t.fill=e.getAttribute("fill")),!t.fill&&e.style.fill&&"none"!==e.style.fill&&(t.fill=e.style.fill),e.getAttribute("stroke")&&(t.stroke=e.getAttribute("stroke")),!t.stroke&&e.style.stroke&&(t.stroke=e.style.stroke),t.stroke||t.fill||(t.fill="black"),t}let iq=["path","rect","circle"];function iG(e){for(var t=[],n=e.getElementsByTagName("*"),r=0,i=n.length;r<i;r++){let e=n[r];!function(e){for(;e.parentNode;){if("defs"===e.nodeName)return!0;e=e.parentNode}return!1}(e)&&(null!==e.getAttribute("fill")&&t.push(e),null!==e.getAttribute("stroke")?t.push(e):e.style&&e.style.fill?t.push(e):iq.indexOf(e.nodeName)>=0&&t.push(e))}return t}async function iW(e){let t=await fetch(e),n=await t.text();return i$(n)}async function iK(e){let t=await fetch(e,{mode:"cors"}),n=await t.text();return n}function i$(e){let t=window.btoa(unescape(encodeURIComponent(e)));return"data:image/svg+xml;base64,"+t}async function iY(e){let t=await iK(e);var n=new DOMParser().parseFromString(t,"image/svg+xml");let r=n.documentElement.getAttribute("viewBox"),[i,o,a,l]=r?.split(" ")||[];return{width:parseFloat(a),height:parseFloat(l)}}function iX(e){var t=new DOMParser().parseFromString(e,"image/svg+xml");let n=t.documentElement.getAttribute("viewBox"),[r,i,o,a]=n?.split(" ")||[],l=t.documentElement.getAttribute("width"),s=!l;s&&t.documentElement.setAttribute("width",o+"px");// if no height attribute, then set it from viewBox
2033
2033
  let u=t.documentElement.getAttribute("height"),c=!u||u.indexOf("%")>=0;// if attribute in %, we need to calculate it from height
2034
2034
  // TODO: use value from %, right now only 100% case is covered
2035
2035
  if(c&&t.documentElement.setAttribute("height",a+"px"),l&&l.indexOf("%")>=0&&u&&-1===u.indexOf("%")){let e=parseFloat(u)/parseFloat(a);t.documentElement.setAttribute("width",e*parseFloat(o)+"px")}if(u&&u.indexOf("%")>=0&&l&&-1===l.indexOf("%")){let e=parseFloat(l)/parseFloat(o);t.documentElement.setAttribute("height",e*parseFloat(a)+"px")}var d=new XMLSerializer;let h=d.serializeToString(t);return h}let iQ=(e,t)=>{if(!e||!t)return!1;let n=/*@__PURE__*/l(A).Util.colorToRGBA(e),r=/*@__PURE__*/l(A).Util.colorToRGBA(t);if(n&&r)return n.r===r.r&&n.g===r.g&&n.b===r.b&&n.a===r.a};function iZ(e,t){var n=new DOMParser().parseFromString(e,"image/svg+xml");let r=iG(n),i=Array.from(t.keys());r.forEach(e=>{let{fill:r,stroke:o}=iV(e);[{prop:"fill",color:r},{prop:"stroke",color:o}].forEach(({prop:r,color:o})=>{// find matched oldColor
@@ -2050,7 +2050,7 @@ e._cropModeEnabled&&"CANVAS"!==t.target.nodeName&&e.toggleCropMode(!1)}return(//
2050
2050
  document.body.addEventListener("click",r),t?.on("click",n),t?.on("tap",n),()=>{// document.body.removeEventListener('dblclick', handleDoubleClick);
2051
2051
  document.body.removeEventListener("click",r),document.body.removeEventListener("touchstart",r),t?.off("click",n),t?.off("click",n)})},[e._cropModeEnabled]),/*@__PURE__*/l(v).useLayoutEffect(()=>{if(i||e._cropModeEnabled)return;ik(a.current,e);let t=(0,y.autorun)(()=>{ik(a.current,e)},{delay:100});return t},[w,i,S,O,e._cropModeEnabled]),/*@__PURE__*/l(v).useLayoutEffect(()=>{i||e._cropModeEnabled?a.current?.clearCache():ik(a.current,e)},[i,e.a.width,e.a.height,e._cropModeEnabled]),/*@__PURE__*/l(v).useEffect(()=>{ik(a.current,e)},[e.shadowEnabled,e.shadowBlur,e.cornerRadius,e.shadowColor,e.shadowOffsetX,e.shadowOffsetY,e.shadowOpacity]);let I=/*@__PURE__*/l(v).useRef(null),L=/*@__PURE__*/l(v).useRef(null),M=/*@__PURE__*/l(v).useRef(null);/*@__PURE__*/l(v).useLayoutEffect(()=>{e._cropModeEnabled&&(L.current.nodes([I.current]),M.current.nodes([s.current]))},[e._cropModeEnabled]);let D=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));let i=t.target.width()*t.target.scaleX(),o=t.target.height()*t.target.scaleY(),a=Math.min(1,n/i),l=Math.min(1,r/o),s=Math.min(1-a,Math.max(0,Math.round(-t.target.x())/i)),u=Math.min(1-l,Math.max(0,Math.round(-t.target.y())/o));t.target.setAttrs({x:-s*w.width,y:-u*w.height,scaleX:1,scaleY:1}),e.set({cropX:s,cropY:u,cropWidth:a,cropHeight:l})},F=()=>{// no crop for svg
2052
2052
  "svg"!==e.type&&e.contentEditable&&// TODO: why timeout?
2053
- setTimeout(()=>{e.toggleCropMode(!0)})},B="svg"===e.type&&x,z="loading"===m&&!B,U="failed"===m,H=/*@__PURE__*/l(v).useRef({cropX:0,cropY:0,cropWidth:0,cropHeight:0}),V=z||U?0:e.a.opacity;ie(a,V);let q=e.selectable||"admin"===t.role,G=ij();return/*#__PURE__*/(0,p.jsxs)(/*@__PURE__*/l(v).Fragment,{children:[z&&/*#__PURE__*/(0,p.jsx)(i9,{element:e}),U&&/*#__PURE__*/(0,p.jsx)(i7,{element:e}),/*#__PURE__*/(0,p.jsx)(r$,{ref:a,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.rotation,opacity:V,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,customCrop:A,listening:q,draggable:G?e.draggable&&d:e.draggable,preventDefault:!G||d,hideInExport:!e.showInExport,onMouseEnter:()=>{c(!0)},onMouseLeave:()=>{c(!1)},onDragStart:()=>{t.history.startTransaction()},onDragMove:t=>{e.set({x:t.target.x(),y:t.target.y()})},onDragEnd:n=>{e.set({x:n.target.x(),y:n.target.y()}),t.history.endTransaction()},onDblClick:F,onDblTap:F,onTransformStart:()=>{o(!0),t.history.startTransaction(),H.current={cropX:e.cropX,cropY:e.cropY,cropWidth:e.cropWidth,cropHeight:e.cropHeight}},onTransform:t=>{let i=t.currentTarget,o=1e-7>Math.abs(i.scaleX()-1)?1:i.scaleX(),a=1e-7>Math.abs(i.scaleY()-1)?1:i.scaleY();i.scaleX(1),i.scaleY(1);let l=t.target.getStage()?.findOne("Transformer"),s=1-n/w.width,u=Math.min(s,Math.max(0,e.cropX)),c=1-r/w.height,d=Math.min(c,Math.max(0,e.cropY)),h=l.getActiveAnchor(),f=!(h.indexOf("middle")>=0||h.indexOf("center")>=0),p=!f&&o<1&&H.current.cropHeight>r/w.height,g=f?e.cropWidth:e.cropWidth*o;p&&(g=e.cropWidth);let m=!f&&a<1&&H.current.cropWidth>n/w.width,v=f?e.cropHeight:e.cropHeight*a;m&&(v=e.cropHeight),T&&(g=e.cropWidth,v=e.cropHeight),e.set({cropX:u,cropY:d,x:i.x(),y:i.y(),width:i.width()*o,height:i.height()*a,rotation:t.target.rotation(),cropWidth:Math.min(g,1-u),cropHeight:Math.min(v,1-d)})},onTransformEnd:i=>{let a=i.currentTarget;e.set({width:a.width(),height:a.height(),x:a.x(),y:a.y(),rotation:i.target.rotation(),cropWidth:n/w.width,cropHeight:r/w.height}),o(!1),t.history.endTransaction()}}),/*#__PURE__*/(0,p.jsx)(rW,{x:e.x,y:e.y,width:Math.max(e.a.width-e.borderSize,0),height:Math.max(e.a.height-e.borderSize,0),opacity:V,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}),e._cropModeEnabled&&/*#__PURE__*/(0,p.jsxs)(r3,{selector:".page-abs-container",enabled:!0,children:[/*#__PURE__*/(0,p.jsx)(rW,{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)"}),/*#__PURE__*/(0,p.jsx)(r$,{listening:!1,image:j,x:e.x,y:e.y,width:e.a.width,height:e.a.height,rotation:e.rotation,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur}),/*#__PURE__*/(0,p.jsxs)(rq,{x:e.x,y:e.y,rotation:e.rotation,scaleX:R,scaleY:R,children:[/*#__PURE__*/(0,p.jsx)(r$,{image:w,ref:s,// width={cropImageWidth}
2053
+ setTimeout(()=>{e.toggleCropMode(!0)})},B="svg"===e.type&&x,z="loading"===m&&!B,U="failed"===m,H=/*@__PURE__*/l(v).useRef({cropX:0,cropY:0,cropWidth:0,cropHeight:0}),V=z||U?0:e.a.opacity;ie(a,V);let q=e.selectable||"admin"===t.role,G=ij();return/*#__PURE__*/(0,p.jsxs)(/*@__PURE__*/l(v).Fragment,{children:[z&&/*#__PURE__*/(0,p.jsx)(i9,{element:e}),U&&/*#__PURE__*/(0,p.jsx)(i7,{element:e}),/*#__PURE__*/(0,p.jsx)(r$,{ref:a,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.rotation,opacity:V,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,customCrop:A,listening:q,draggable:G?e.draggable&&d:e.draggable,preventDefault:!G||d,hideInExport:!e.showInExport,onMouseEnter:()=>{c(!0)},onMouseLeave:()=>{c(!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:F,onDblTap:F,onTransformStart:()=>{o(!0),H.current={cropX:e.cropX,cropY:e.cropY,cropWidth:e.cropWidth,cropHeight:e.cropHeight}},onTransform:t=>{let i=t.currentTarget,o=1e-7>Math.abs(i.scaleX()-1)?1:i.scaleX(),a=1e-7>Math.abs(i.scaleY()-1)?1:i.scaleY();i.scaleX(1),i.scaleY(1);let l=t.target.getStage()?.findOne("Transformer"),s=1-n/w.width,u=Math.min(s,Math.max(0,e.cropX)),c=1-r/w.height,d=Math.min(c,Math.max(0,e.cropY)),h=l.getActiveAnchor(),f=!(h.indexOf("middle")>=0||h.indexOf("center")>=0),p=!f&&o<1&&H.current.cropHeight>r/w.height,g=f?e.cropWidth:e.cropWidth*o;p&&(g=e.cropWidth);let m=!f&&a<1&&H.current.cropWidth>n/w.width,v=f?e.cropHeight:e.cropHeight*a;m&&(v=e.cropHeight),T&&(g=e.cropWidth,v=e.cropHeight),e.set({cropX:u,cropY:d,x:i.x(),y:i.y(),width:i.width()*o,height:i.height()*a,rotation:t.target.rotation(),cropWidth:Math.min(g,1-u),cropHeight:Math.min(v,1-d)})},onTransformEnd:t=>{let i=t.currentTarget;e.set({width:i.width(),height:i.height(),x:i.x(),y:i.y(),rotation:t.target.rotation(),cropWidth:n/w.width,cropHeight:r/w.height}),o(!1)}}),/*#__PURE__*/(0,p.jsx)(rW,{x:e.x,y:e.y,width:Math.max(e.a.width-e.borderSize,0),height:Math.max(e.a.height-e.borderSize,0),opacity:V,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}),e._cropModeEnabled&&/*#__PURE__*/(0,p.jsxs)(r3,{selector:".page-abs-container",enabled:!0,children:[/*#__PURE__*/(0,p.jsx)(rW,{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)"}),/*#__PURE__*/(0,p.jsx)(r$,{listening:!1,image:j,x:e.x,y:e.y,width:e.a.width,height:e.a.height,rotation:e.rotation,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur}),/*#__PURE__*/(0,p.jsxs)(rq,{x:e.x,y:e.y,rotation:e.rotation,scaleX:R,scaleY:R,children:[/*#__PURE__*/(0,p.jsx)(r$,{image:w,ref:s,// width={cropImageWidth}
2054
2054
  // height={cropImageHeight}
2055
2055
  opacity:.4,draggable:!0,x:-e.cropX*w.width,y:-e.cropY*w.height,onDragMove:D,onTransform:D}),/*#__PURE__*/(0,p.jsx)(rX,{ref:M,anchorSize:20,// anchorFill=""
2056
2056
  enabledAnchors:["top-left","top-right","bottom-left","bottom-right"],boundBoxFunc:(e,t)=>t.width<5||t.height<5?e:t,// keepRatio={false}
@@ -2755,7 +2755,7 @@ if("change-font-size"!==n||o)"resize"!==n||(x&&e.height<k&&t.history.ignore(()=>
2755
2755
  // to avoid that, lets change font smaller
2756
2756
  // is text too big compared to info in element?
2757
2757
  let n=ai(e);n!==e.fontSize?t.history.ignore(()=>{e.set({fontSize:n})}):e.height===k||(x&&e.height<k?t.history.ignore(()=>{e.set({height:k})}):x||t.history.ignore(()=>{e.set({height:k})}))}});let P=/*@__PURE__*/l(v).useRef(0),T=async()=>{P.current++;let n=P.current,r=ii(`text ${e.id}`);u(!0);let o=null,a=ao?5:1;for(let i=0;i<a;i++){// skip result, if it was rendered in another render
2758
- if(o=await oZ({html:O,width:e.width||1,height:e.height||k||1,fontFamily:E,padding:b,pixelRatio:t._elementsPixelRatio,font:t.fonts.find(e=>e.fontFamily===E)||id.find(e=>e.fontFamily===E)}),n!==P.current){r();return}if(!function(e){let t=e.getContext("2d"),n=t.getImageData(0,0,e.width,e.height),r=n.data;for(let e=0;e<r.length;e+=4)if(0!==r[e+3])return!0;return!1}(o)&&ao){await new Promise(e=>setTimeout(e,50*(i+1)));continue}}if(!o){r();return}i(o),u(!1),/*@__PURE__*/l(A).Util.requestAnimFrame(r)};/*@__PURE__*/l(v).useEffect(()=>{o||c||T()},[O,o,k,c,E,e.height,t._elementsPixelRatio]);let N=o||s;/*@__PURE__*/l(v).useEffect(()=>{let t=y.autorun(()=>{let t=n.current;ik(t,e)});return t},[r,N,e.shadowColor,e.shadowOffsetX,e.shadowOffsetY,e.shadowOpacity]);let j=0;"middle"===e.verticalAlign&&(j=(e.height-k)/2),"bottom"===e.verticalAlign&&(j=e.height-k);let R=iB({fontLoaded:_,fontFamily:e.fontFamily,fontSize:e.fontSize,lineHeight:e.lineHeight}),I=ij();return/*#__PURE__*/(0,p.jsxs)(/*@__PURE__*/l(v).Fragment,{children:[/*#__PURE__*/(0,p.jsx)(rW,{x:e.x,y:e.y,offsetX:e.backgroundPadding*(e.fontSize*R*.5),offsetY:e.backgroundPadding*(e.fontSize*R*.5),rotation:e.rotation,hideInExport:!e.showInExport||!e.text,listening:!1,visible:e.backgroundEnabled,opacity:e.backgroundOpacity,fill:e.backgroundColor,width:e.width+e.backgroundPadding*(e.fontSize*R),height:e.height+e.backgroundPadding*(e.fontSize*R),cornerRadius:e.backgroundCornerRadius*(e.fontSize*R*.5)}),/*#__PURE__*/(0,p.jsx)(rW,{ref:n,name:"element",x:e.x,y:e.y,listening:e.selectable,rotation:e.rotation,width:e.width,height:e.height,visible:!N,draggable:I?e.draggable&&m:e.draggable,preventDefault:!I||m,opacity:c?0:e.opacity,hideInExport:!e.showInExport,onMouseEnter:()=>{f(!0)},onMouseLeave:()=>{f(!1)},onDragStart:()=>{t.history.startTransaction()},onDragMove:t=>{e.set({x:t.target.x(),y:t.target.y()})},onDragEnd:n=>{e.set({x:n.target.x(),y:n.target.y()}),t.history.endTransaction()},id:e.id,onDblClick:()=>{e.contentEditable&&d(!0)},onDblTap:()=>{e.contentEditable&&d(!0)},onTransformStart:t=>{a(!0),g.current=e.height},onTransform:t=>{let n=t.target,r=n.getStage()?.findOne("Transformer"),i=r.getActiveAnchor(),o=n.scaleX();if("middle-left"===i||"middle-right"===i){let t=n.scaleX(),r=Math.max(n.width()*t,e.fontSize);if(n.width(r),n.scaleX(1),ix.textVerticalResizeEnabled){let t=Math.max(k,g.current);e.set({height:t})}e.set({width:r,x:n.x(),y:n.y()})}else if("top-center"===i||"bottom-center"===i){let r="resize"===ix.textOverflow,i=r?k:e.lineHeight*e.fontSize,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*o,width:n.width()*o,x:n.x(),y:n.y(),rotation:n.rotation(),height:n.height()*o})},onTransformEnd:t=>{a(!1),u(!0);let n=t.target.scaleX();t.target.scaleX(1),t.target.scaleY(1),e.set({fontSize:e.fontSize*n,width:t.target.width()*n,x:t.target.x(),y:t.target.y(),rotation:t.target.rotation()})}}),/*#__PURE__*/(0,p.jsx)(r$,{ref:n,image:r,x:e.x,y:e.y,offsetX:b,offsetY:b-j,listening:!1,rotation:e.rotation,width:e.width+2*b,height:e.height+2*b,visible:!N,opacity:c?0:e.opacity,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,hideInExport:!e.showInExport}),N&&/*#__PURE__*/(0,p.jsx)(rq,{x:e.x,y:e.y,rotation:e.rotation,offsetY:-j,children:/*#__PURE__*/(0,p.jsx)(r2,{divProps:{style:{pointerEvents:"none"}},children:/*#__PURE__*/(0,p.jsx)(at,{dangerouslySetInnerHTML:{__html:O},style:{pointerEvents:"none",display:"inline-block"}})})}),c&&/*#__PURE__*/(0,p.jsx)(rq,{x:e.x,y:e.y,rotation:e.rotation,offsetY:-j,children:/*#__PURE__*/(0,p.jsx)(r2,{children:/*#__PURE__*/(0,p.jsx)(an,{html:O,element:e,onChange:t=>{e.set({text:t})},onBlur:e=>{d(!1)}})})}),(m||h)&&/*#__PURE__*/(0,p.jsx)(iT,{element:e})]})});var v=(h("8NFma"),h("8NFma"));function al(e,t,n,r,i){let o=Math.sqrt(n*n+r*r);/// find angle from pivot to corner
2758
+ if(o=await oZ({html:O,width:e.width||1,height:e.height||k||1,fontFamily:E,padding:b,pixelRatio:t._elementsPixelRatio,font:t.fonts.find(e=>e.fontFamily===E)||id.find(e=>e.fontFamily===E)}),n!==P.current){r();return}if(!function(e){let t=e.getContext("2d"),n=t.getImageData(0,0,e.width,e.height),r=n.data;for(let e=0;e<r.length;e+=4)if(0!==r[e+3])return!0;return!1}(o)&&ao){await new Promise(e=>setTimeout(e,50*(i+1)));continue}}if(!o){r();return}i(o),u(!1),/*@__PURE__*/l(A).Util.requestAnimFrame(r)};/*@__PURE__*/l(v).useEffect(()=>{o||c||T()},[O,o,k,c,E,e.height,t._elementsPixelRatio]);let N=o||s;/*@__PURE__*/l(v).useEffect(()=>{let t=y.autorun(()=>{let t=n.current;ik(t,e)});return t},[r,N,e.shadowColor,e.shadowOffsetX,e.shadowOffsetY,e.shadowOpacity]);let j=0;"middle"===e.verticalAlign&&(j=(e.height-k)/2),"bottom"===e.verticalAlign&&(j=e.height-k);let R=iB({fontLoaded:_,fontFamily:e.fontFamily,fontSize:e.fontSize,lineHeight:e.lineHeight}),I=ij();return/*#__PURE__*/(0,p.jsxs)(/*@__PURE__*/l(v).Fragment,{children:[/*#__PURE__*/(0,p.jsx)(rW,{x:e.x,y:e.y,offsetX:e.backgroundPadding*(e.fontSize*R*.5),offsetY:e.backgroundPadding*(e.fontSize*R*.5),rotation:e.rotation,hideInExport:!e.showInExport||!e.text,listening:!1,visible:e.backgroundEnabled,opacity:e.backgroundOpacity,fill:e.backgroundColor,width:e.width+e.backgroundPadding*(e.fontSize*R),height:e.height+e.backgroundPadding*(e.fontSize*R),cornerRadius:e.backgroundCornerRadius*(e.fontSize*R*.5)}),/*#__PURE__*/(0,p.jsx)(rW,{ref:n,name:"element",x:e.x,y:e.y,listening:e.selectable,rotation:e.rotation,width:e.width,height:e.height,visible:!N,draggable:I?e.draggable&&m:e.draggable,preventDefault:!I||m,opacity:c?0:e.opacity,hideInExport:!e.showInExport,onMouseEnter:()=>{f(!0)},onMouseLeave:()=>{f(!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&&d(!0)},onDblTap:()=>{e.contentEditable&&d(!0)},onTransformStart:t=>{a(!0),g.current=e.height},onTransform:t=>{let n=t.target,r=n.getStage()?.findOne("Transformer"),i=r.getActiveAnchor(),o=n.scaleX();if("middle-left"===i||"middle-right"===i){let t=n.scaleX(),r=Math.max(n.width()*t,e.fontSize);if(n.width(r),n.scaleX(1),ix.textVerticalResizeEnabled){let t=Math.max(k,g.current);e.set({height:t})}e.set({width:r,x:n.x(),y:n.y()})}else if("top-center"===i||"bottom-center"===i){let r="resize"===ix.textOverflow,i=r?k:e.lineHeight*e.fontSize,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*o,width:n.width()*o,x:n.x(),y:n.y(),rotation:n.rotation(),height:n.height()*o})},onTransformEnd:t=>{a(!1),u(!0);let n=t.target.scaleX();t.target.scaleX(1),t.target.scaleY(1),e.set({fontSize:e.fontSize*n,width:t.target.width()*n,x:t.target.x(),y:t.target.y(),rotation:t.target.rotation()})}}),/*#__PURE__*/(0,p.jsx)(r$,{ref:n,image:r,x:e.x,y:e.y,offsetX:b,offsetY:b-j,listening:!1,rotation:e.rotation,width:e.width+2*b,height:e.height+2*b,visible:!N,opacity:c?0:e.opacity,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,hideInExport:!e.showInExport}),N&&/*#__PURE__*/(0,p.jsx)(rq,{x:e.x,y:e.y,rotation:e.rotation,offsetY:-j,children:/*#__PURE__*/(0,p.jsx)(r2,{divProps:{style:{pointerEvents:"none"}},children:/*#__PURE__*/(0,p.jsx)(at,{dangerouslySetInnerHTML:{__html:O},style:{pointerEvents:"none",display:"inline-block"}})})}),c&&/*#__PURE__*/(0,p.jsx)(rq,{x:e.x,y:e.y,rotation:e.rotation,offsetY:-j,children:/*#__PURE__*/(0,p.jsx)(r2,{children:/*#__PURE__*/(0,p.jsx)(an,{html:O,element:e,onChange:t=>{e.set({text:t})},onBlur:e=>{d(!1)}})})}),(m||h)&&/*#__PURE__*/(0,p.jsx)(iT,{element:e})]})});var v=(h("8NFma"),h("8NFma"));function al(e,t,n,r,i){let o=Math.sqrt(n*n+r*r);/// find angle from pivot to corner
2759
2759
  i+=Math.atan2(r,n);/// get new x and y and round it off to integer
2760
2760
  let a=e+o*Math.cos(i),l=t+o*Math.sin(i);return{x:a,y:l}}function as(e){let{x:t,y:n,width:r,height:i}=e,o=/*@__PURE__*/l(A).Util.degToRad(e.rotation),a=al(t,n,0,0,o),s=al(t,n,r,0,o),u=al(t,n,r,i,o),c=al(t,n,0,i,o),d=Math.min(a.x,s.x,u.x,c.x),h=Math.min(a.y,s.y,u.y,c.y),f=Math.max(a.x,s.x,u.x,c.x),p=Math.max(a.y,s.y,u.y,c.y);return{x:d,y:h,width:f-d,height:p-h,minX:d,minY:h,maxX:f,maxY:p}}function au(e){let t=e.map(e=>as(e)),n=Math.min(...t.map(e=>e.minX)),r=Math.min(...t.map(e=>e.minY)),i=Math.max(...t.map(e=>e.maxX)),o=Math.max(...t.map(e=>e.maxY));return{x:n,y:r,width:i-n,height:o-r,minX:n,minY:r,maxX:i,maxY:o}}// find all snapping possibilities
2761
2761
  function ac(e,t){var n=[],r=[];e.vertical.forEach(e=>{t.vertical.forEach(t=>{var r=Math.abs(e-t.guide);// if the distance between guild line and object snap point is close we can consider this for snapping
@@ -2773,7 +2773,7 @@ a.forEach(e=>{switch(e.snap){case"start":case"center":case"end":switch(e.orienta
2773
2773
  if(!e.target)return;let t=e.target.getLayer();// clear all previous lines on the screen
2774
2774
  t.children.find(e=>"line-guides"===e.name()).destroyChildren(),t.batchDraw()};/*@__PURE__*/l(v).useEffect(()=>{e.current&&(e.current.on("dragmove",i),e.current.on("dragend",o))},n)}function ah(e){let{x:t,y:n,width:r,height:i,rotation:o}=e.a,a=o*Math.PI/180,l={x:t+i/2*Math.cos(a+Math.PI/2),y:n+i/2*Math.sin(a+Math.PI/2)},s={x:l.x+r*Math.cos(a),y:l.y+r*Math.sin(a)};return{middleLeft:l,middleRight:s}}function af(e,t,n){// calculate the width of the rectangle
2775
2775
  let r=Math.sqrt(Math.pow(t.x-e.x,2)+Math.pow(t.y-e.y,2)),i=Math.atan2(t.y-e.y,t.x-e.x),o=180*i/Math.PI,a=e.x+Math.cos(i-Math.PI/2)*n/2,l=e.y+Math.sin(i-Math.PI/2)*n/2;// return an object with the x, y, width, and rotation of the rectangle
2776
- return{x:a,y:l,width:r,height:n,rotation:o}}let ap=(e,t)=>({offsetX:5/e,offsetY:5/e,width:10/e,height:10/e,fill:"white",stroke:"rgb(0, 161, 255)",strokeWidth:2,strokeScaleEnabled:!1,draggable:!0,dragDistance:0,onMouseEnter:e=>{e.target.getStage().container().style.cursor="crosshair"},onMouseLeave:e=>{e.target.getStage().container().style.cursor=""},onDragStart:e=>{t.history.startTransaction()},onDragEnd:e=>{t.history.endTransaction()}}),ag=P(({element:e,type:t})=>{let n={strokeWidth:e.height,stroke:e.a.color,lineCap:"round",lineJoin:"round",fill:e.a.color,opacity:e.a.opacity};return/*#__PURE__*/(0,p.jsxs)(p.Fragment,{children:["arrow"===t&&/*#__PURE__*/(0,p.jsx)(rK,{points:[3*e.height,-(2*e.height),0,0,3*e.height,2*e.height],...n}),"triangle"===t&&/*#__PURE__*/(0,p.jsx)(rK,{points:[3*e.height,-(2*e.height),0,0,3*e.height,2*e.height],closed:!0,...n}),"bar"===t&&/*#__PURE__*/(0,p.jsx)(rK,{points:[0,-(2*e.height),0,2*e.height],closed:!0,...n}),"square"===t&&/*#__PURE__*/(0,p.jsx)(rK,{points:[0,-(2*e.height),4*e.height,-(2*e.height),4*e.height,2*e.height,0,2*e.height],closed:!0,...n}),"circle"===t&&/*#__PURE__*/(0,p.jsx)("Circle",{x:2*e.height,y:0,radius:2*e.height,...n})]})}),am=P(({element:e,store:t})=>{let n=/*@__PURE__*/l(v).useRef(null),r=/*@__PURE__*/l(v).useRef(null),i=/*@__PURE__*/l(v).useRef(null),o=e.selectable||"admin"===t.role,a=ij(),[s,u]=/*@__PURE__*/l(v).useState(!1),c=t.selectedElements.indexOf(e)>=0&&1===t.selectedElements.length,{middleLeft:d,middleRight:h}=ah(e);return ad(r,[n],[c]),ad(i,[n],[c]),/*#__PURE__*/(0,p.jsxs)(/*@__PURE__*/l(v).Fragment,{children:[/*#__PURE__*/(0,p.jsx)(rK,{ref:n,name:"element",id:e.id,x:e.a.x,y:e.a.y,points:[0,0,e.a.width,0],offsetY:-e.a.height/2,strokeWidth:e.a.height,hitStrokeWidth:Math.max(e.a.height,20),dash:e.dash.map(t=>t*e.a.height),stroke:e.a.color,rotation:e.a.rotation,opacity:e.animated("opacity"),shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,listening:o,draggable:a?e.draggable&&c:e.draggable,preventDefault:!a||c,hideInExport:!e.showInExport,onMouseEnter:()=>{u(!0)},onMouseLeave:()=>{u(!1)},onDragStart:()=>{t.history.startTransaction()},onDragMove:t=>{e.set({x:t.target.x(),y:t.target.y()})},onDragEnd:n=>{e.set({x:n.target.x(),y:n.target.y()}),t.history.endTransaction()},onTransformStart:()=>{t.history.startTransaction()},onTransform:t=>{let n=t.target.scaleX();t.target.scaleX(1),t.target.scaleY(1),e.set({height:e.height*n,width:e.width*n,x:t.target.x(),y:t.target.y(),rotation:t.target.rotation()})},onTransformEnd:e=>{t.history.endTransaction()}}),/*#__PURE__*/(0,p.jsx)(rq,{x:d.x,y:d.y,rotation:e.rotation,children:/*#__PURE__*/(0,p.jsx)(ag,{element:e,type:e.startHead})}),/*#__PURE__*/(0,p.jsx)(rq,{x:h.x,y:h.y,rotation:e.rotation+180,children:/*#__PURE__*/(0,p.jsx)(ag,{element:e,type:e.endHead})}),s&&!c&&/*#__PURE__*/(0,p.jsx)(iT,{element:e}),c&&e.resizable&&/*#__PURE__*/(0,p.jsx)(r3,{selector:".page-abs-container",enabled:!0,children:/*#__PURE__*/(0,p.jsxs)(rq,{visible:c,children:[/*#__PURE__*/(0,p.jsx)(rW,{x:d.x,y:d.y,ref:r,name:"line-anchor",...ap(t.scale,t),onDragMove:t=>{let n=af(t.target.position(),h,e.height);e.set({x:n.x,y:n.y,width:n.width,rotation:n.rotation})}}),/*#__PURE__*/(0,p.jsx)(rW,{x:h.x,y:h.y,ref:i,name:"line-anchor",...ap(t.scale,t),onDragMove:t=>{let n=af(d,t.target.position(),e.height);e.set({x:n.x,y:n.y,width:n.width,rotation:n.rotation})}})]})})]})});var v=h("8NFma"),y=h("2SBKn");function av(){return document.createElement("canvas")}async function ay(e){let t=e.indexOf("data:image/svg+xml")>=0||e.indexOf(".svg")>=0;if(!t)return e;let n=await iK(e),r=iX(n),i=i$(r);return i}// Firefox can't correctly load SVG with some size information missing
2776
+ return{x:a,y:l,width:r,height:n,rotation:o}}let ap=(e,t)=>({offsetX:5/e,offsetY:5/e,width:10/e,height:10/e,fill:"white",stroke:"rgb(0, 161, 255)",strokeWidth:2,strokeScaleEnabled:!1,draggable:!0,dragDistance:0,onMouseEnter:e=>{e.target.getStage().container().style.cursor="crosshair"},onMouseLeave:e=>{e.target.getStage().container().style.cursor=""},onDragStart:e=>{t.history.startTransaction()},onDragEnd:e=>{t.history.endTransaction()}}),ag=P(({element:e,type:t})=>{let n={strokeWidth:e.height,stroke:e.a.color,lineCap:"round",lineJoin:"round",fill:e.a.color,opacity:e.a.opacity};return/*#__PURE__*/(0,p.jsxs)(p.Fragment,{children:["arrow"===t&&/*#__PURE__*/(0,p.jsx)(rK,{points:[3*e.height,-(2*e.height),0,0,3*e.height,2*e.height],...n}),"triangle"===t&&/*#__PURE__*/(0,p.jsx)(rK,{points:[3*e.height,-(2*e.height),0,0,3*e.height,2*e.height],closed:!0,...n}),"bar"===t&&/*#__PURE__*/(0,p.jsx)(rK,{points:[0,-(2*e.height),0,2*e.height],closed:!0,...n}),"square"===t&&/*#__PURE__*/(0,p.jsx)(rK,{points:[0,-(2*e.height),4*e.height,-(2*e.height),4*e.height,2*e.height,0,2*e.height],closed:!0,...n}),"circle"===t&&/*#__PURE__*/(0,p.jsx)("Circle",{x:2*e.height,y:0,radius:2*e.height,...n})]})}),am=P(({element:e,store:t})=>{let n=/*@__PURE__*/l(v).useRef(null),r=/*@__PURE__*/l(v).useRef(null),i=/*@__PURE__*/l(v).useRef(null),o=e.selectable||"admin"===t.role,a=ij(),[s,u]=/*@__PURE__*/l(v).useState(!1),c=t.selectedElements.indexOf(e)>=0&&1===t.selectedElements.length,{middleLeft:d,middleRight:h}=ah(e);return ad(r,[n],[c]),ad(i,[n],[c]),/*#__PURE__*/(0,p.jsxs)(/*@__PURE__*/l(v).Fragment,{children:[/*#__PURE__*/(0,p.jsx)(rK,{ref:n,name:"element",id:e.id,x:e.a.x,y:e.a.y,points:[0,0,e.a.width,0],offsetY:-e.a.height/2,strokeWidth:e.a.height,hitStrokeWidth:Math.max(e.a.height,20),dash:e.dash.map(t=>t*e.a.height),stroke:e.a.color,rotation:e.a.rotation,opacity:e.animated("opacity"),shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,listening:o,draggable:a?e.draggable&&c:e.draggable,preventDefault:!a||c,hideInExport:!e.showInExport,onMouseEnter:()=>{u(!0)},onMouseLeave:()=>{u(!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()})},onTransform:t=>{let n=t.target.scaleX();t.target.scaleX(1),t.target.scaleY(1),e.set({height:e.height*n,width:e.width*n,x:t.target.x(),y:t.target.y(),rotation:t.target.rotation()})}}),/*#__PURE__*/(0,p.jsx)(rq,{x:d.x,y:d.y,rotation:e.rotation,children:/*#__PURE__*/(0,p.jsx)(ag,{element:e,type:e.startHead})}),/*#__PURE__*/(0,p.jsx)(rq,{x:h.x,y:h.y,rotation:e.rotation+180,children:/*#__PURE__*/(0,p.jsx)(ag,{element:e,type:e.endHead})}),s&&!c&&/*#__PURE__*/(0,p.jsx)(iT,{element:e}),c&&e.resizable&&/*#__PURE__*/(0,p.jsx)(r3,{selector:".page-abs-container",enabled:!0,children:/*#__PURE__*/(0,p.jsxs)(rq,{visible:c,children:[/*#__PURE__*/(0,p.jsx)(rW,{x:d.x,y:d.y,ref:r,name:"line-anchor",...ap(t.scale,t),onDragMove:t=>{let n=af(t.target.position(),h,e.height);e.set({x:n.x,y:n.y,width:n.width,rotation:n.rotation})}}),/*#__PURE__*/(0,p.jsx)(rW,{x:h.x,y:h.y,ref:i,name:"line-anchor",...ap(t.scale,t),onDragMove:t=>{let n=af(d,t.target.position(),e.height);e.set({x:n.x,y:n.y,width:n.width,rotation:n.rotation})}})]})})]})});var v=h("8NFma"),y=h("2SBKn");function av(){return document.createElement("canvas")}async function ay(e){let t=e.indexOf("data:image/svg+xml")>=0||e.indexOf(".svg")>=0;if(!t)return e;let n=await iK(e),r=iX(n),i=i$(r);return i}// Firefox can't correctly load SVG with some size information missing
2777
2777
  // that hook will fix such urls
2778
2778
  let ab=e=>{let[t,n]=/*@__PURE__*/l(v).useState(e);return /*@__PURE__*/l(v).useEffect(()=>{let r=async()=>{let r=await ay(e);r!==t&&n(r)};r()},[e]),t},ax=new window.Image;ax.src=i$(`
2779
2779
  <svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -2805,7 +2805,7 @@ e._cropModeEnabled&&"CANVAS"!==t.target.nodeName&&e.toggleCropMode(!1)}return(//
2805
2805
  document.body.addEventListener("click",r),t?.on("click",n),t?.on("tap",n),()=>{// document.body.removeEventListener('dblclick', handleDoubleClick);
2806
2806
  document.body.removeEventListener("click",r),document.body.removeEventListener("touchstart",r),t?.off("click",n),t?.off("click",n)})},[e._cropModeEnabled]),/*@__PURE__*/l(v).useLayoutEffect(()=>{if(i||e._cropModeEnabled)return;ik(a.current,e);let t=(0,y.autorun)(()=>{ik(a.current,e)},{delay:100});return t},[b,i,_,E,e._cropModeEnabled]),/*@__PURE__*/l(v).useLayoutEffect(()=>{i||e._cropModeEnabled?a.current?.clearCache():ik(a.current,e)},[i,e.width,e.height,e._cropModeEnabled]),/*@__PURE__*/l(v).useEffect(()=>{ik(a.current,e)},[e.shadowEnabled,e.shadowBlur,e.cornerRadius,e.shadowColor,e.shadowOffsetX,e.shadowOffsetY,e.shadowOpacity]);let R=/*@__PURE__*/l(v).useRef(null),I=/*@__PURE__*/l(v).useRef(null),L=/*@__PURE__*/l(v).useRef(null);/*@__PURE__*/l(v).useLayoutEffect(()=>{e._cropModeEnabled&&(I.current.nodes([R.current]),L.current.nodes([s.current]))},[e._cropModeEnabled]);let M=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));let i=t.target.width()*t.target.scaleX(),o=t.target.height()*t.target.scaleY(),a=Math.min(1,n/i),l=Math.min(1,r/o),s=Math.min(1-a,Math.max(0,Math.round(-t.target.x())/i)),u=Math.min(1-l,Math.max(0,Math.round(-t.target.y())/o));t.target.setAttrs({x:-s*b.width,y:-u*b.height,scaleX:1,scaleY:1}),e.set({cropX:s,cropY:u,cropWidth:a,cropHeight:l})},D=()=>{// no crop for svg
2807
2807
  "svg"!==e.type&&e.contentEditable&&// TODO: why timeout?
2808
- setTimeout(()=>{e.toggleCropMode(!0)})},F="loading"===m,B="failed"===m,z=/*@__PURE__*/l(v).useRef({cropX:0,cropY:0,cropWidth:0,cropHeight:0}),U=F||B?0:e.a.opacity;ie(a,U);let H=e.selectable||"admin"===t.role,V=ij();return/*#__PURE__*/(0,p.jsxs)(/*@__PURE__*/l(v).Fragment,{children:[F&&/*#__PURE__*/(0,p.jsx)(aO,{element:e}),B&&/*#__PURE__*/(0,p.jsx)(aC,{element:e}),/*#__PURE__*/(0,p.jsx)(r$,{ref:a,name:"element",id:e.id,image:b,x:e.x,y:e.y,width:e.width||1,height:e.height||1,rotation:e.rotation,opacity:U,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,customCrop:P,listening:H,cropX:P.x,cropY:P.y,cropWidth:P.width,cropHeight:P.height,draggable:V?e.draggable&&d:e.draggable,preventDefault:!V||d,hideInExport:!e.showInExport,onMouseEnter:()=>{c(!0)},onMouseLeave:()=>{c(!1)},onDragStart:()=>{t.history.startTransaction()},onDragMove:t=>{e.set({x:t.target.x(),y:t.target.y()})},onDragEnd:n=>{e.set({x:n.target.x(),y:n.target.y()}),t.history.endTransaction()},onDblClick:D,onDblTap:D,onTransformStart:()=>{o(!0),t.history.startTransaction(),z.current={cropX:e.cropX,cropY:e.cropY,cropWidth:e.cropWidth,cropHeight:e.cropHeight}},onTransform:t=>{let i=t.currentTarget,o=1e-7>Math.abs(i.scaleX()-1)?1:i.scaleX(),a=1e-7>Math.abs(i.scaleY()-1)?1:i.scaleY();i.scaleX(1),i.scaleY(1);let l=t.target.getStage()?.findOne("Transformer"),s=1-n/b.width,u=Math.min(s,Math.max(0,e.cropX)),c=1-r/b.height,d=Math.min(c,Math.max(0,e.cropY)),h=l.getActiveAnchor(),f=!(h.indexOf("middle")>=0||h.indexOf("center")>=0),p=!f&&o<1&&z.current.cropHeight>r/b.height,g=f?e.cropWidth:e.cropWidth*o;p&&(g=e.cropWidth);let m=!f&&a<1&&z.current.cropWidth>n/b.width,v=f?e.cropHeight:e.cropHeight*a;m&&(v=e.cropHeight),k&&(g=e.cropWidth,v=e.cropHeight),e.set({cropX:u,cropY:d,x:i.x(),y:i.y(),width:i.width()*o,height:i.height()*a,rotation:t.target.rotation(),cropWidth:Math.min(g,1-u),cropHeight:Math.min(v,1-d)})},onTransformEnd:i=>{let a=i.currentTarget;e.set({width:a.width(),height:a.height(),x:a.x(),y:a.y(),rotation:i.target.rotation(),cropWidth:n/b.width,cropHeight:r/b.height}),o(!1),t.history.endTransaction()}}),/*#__PURE__*/(0,p.jsx)(rW,{x:e.x,y:e.y,width:Math.max(e.width-e.borderSize,0),height:Math.max(e.height-e.borderSize,0),opacity:U,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,T-e.borderSize),hideInExport:!e.showInExport}),!h&&/*#__PURE__*/(0,p.jsx)(r$,{image:ax,x:e.x+e.width/2-20,y:e.y+e.height/2-20,width:40,height:40,hideInExport:!0,onClick:()=>{f(!0)}}),h&&/*#__PURE__*/(0,p.jsx)(r$,{image:aw,x:e.x+e.width/2-20,y:e.y+e.height/2-20,width:40,height:40,hideInExport:!0,onClick:()=>{f(!1)}}),e._cropModeEnabled&&/*#__PURE__*/(0,p.jsxs)(r3,{selector:".page-abs-container",enabled:!0,children:[/*#__PURE__*/(0,p.jsx)(rW,{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)"}),/*#__PURE__*/(0,p.jsx)(r$,{listening:!1,image:N,x:e.x,y:e.y,width:e.width,height:e.height,rotation:e.rotation,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur}),/*#__PURE__*/(0,p.jsxs)(rq,{x:e.x,y:e.y,rotation:e.rotation,scaleX:j,scaleY:j,children:[/*#__PURE__*/(0,p.jsx)(r$,{image:b,ref:s,// width={cropImageWidth}
2808
+ setTimeout(()=>{e.toggleCropMode(!0)})},F="loading"===m,B="failed"===m,z=/*@__PURE__*/l(v).useRef({cropX:0,cropY:0,cropWidth:0,cropHeight:0}),U=F||B?0:e.a.opacity;ie(a,U);let H=e.selectable||"admin"===t.role,V=ij();return/*#__PURE__*/(0,p.jsxs)(/*@__PURE__*/l(v).Fragment,{children:[F&&/*#__PURE__*/(0,p.jsx)(aO,{element:e}),B&&/*#__PURE__*/(0,p.jsx)(aC,{element:e}),/*#__PURE__*/(0,p.jsx)(r$,{ref:a,name:"element",id:e.id,image:b,x:e.x,y:e.y,width:e.width||1,height:e.height||1,rotation:e.rotation,opacity:U,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,customCrop:P,listening:H,cropX:P.x,cropY:P.y,cropWidth:P.width,cropHeight:P.height,draggable:V?e.draggable&&d:e.draggable,preventDefault:!V||d,hideInExport:!e.showInExport,onMouseEnter:()=>{c(!0)},onMouseLeave:()=>{c(!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:D,onDblTap:D,onTransformStart:()=>{o(!0),z.current={cropX:e.cropX,cropY:e.cropY,cropWidth:e.cropWidth,cropHeight:e.cropHeight}},onTransform:t=>{let i=t.currentTarget,o=1e-7>Math.abs(i.scaleX()-1)?1:i.scaleX(),a=1e-7>Math.abs(i.scaleY()-1)?1:i.scaleY();i.scaleX(1),i.scaleY(1);let l=t.target.getStage()?.findOne("Transformer"),s=1-n/b.width,u=Math.min(s,Math.max(0,e.cropX)),c=1-r/b.height,d=Math.min(c,Math.max(0,e.cropY)),h=l.getActiveAnchor(),f=!(h.indexOf("middle")>=0||h.indexOf("center")>=0),p=!f&&o<1&&z.current.cropHeight>r/b.height,g=f?e.cropWidth:e.cropWidth*o;p&&(g=e.cropWidth);let m=!f&&a<1&&z.current.cropWidth>n/b.width,v=f?e.cropHeight:e.cropHeight*a;m&&(v=e.cropHeight),k&&(g=e.cropWidth,v=e.cropHeight),e.set({cropX:u,cropY:d,x:i.x(),y:i.y(),width:i.width()*o,height:i.height()*a,rotation:t.target.rotation(),cropWidth:Math.min(g,1-u),cropHeight:Math.min(v,1-d)})},onTransformEnd:t=>{let i=t.currentTarget;e.set({width:i.width(),height:i.height(),x:i.x(),y:i.y(),rotation:t.target.rotation(),cropWidth:n/b.width,cropHeight:r/b.height}),o(!1)}}),/*#__PURE__*/(0,p.jsx)(rW,{x:e.x,y:e.y,width:Math.max(e.width-e.borderSize,0),height:Math.max(e.height-e.borderSize,0),opacity:U,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,T-e.borderSize),hideInExport:!e.showInExport}),!h&&/*#__PURE__*/(0,p.jsx)(r$,{image:ax,x:e.x+e.width/2-20,y:e.y+e.height/2-20,width:40,height:40,hideInExport:!0,onClick:()=>{f(!0)}}),h&&/*#__PURE__*/(0,p.jsx)(r$,{image:aw,x:e.x+e.width/2-20,y:e.y+e.height/2-20,width:40,height:40,hideInExport:!0,onClick:()=>{f(!1)}}),e._cropModeEnabled&&/*#__PURE__*/(0,p.jsxs)(r3,{selector:".page-abs-container",enabled:!0,children:[/*#__PURE__*/(0,p.jsx)(rW,{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)"}),/*#__PURE__*/(0,p.jsx)(r$,{listening:!1,image:N,x:e.x,y:e.y,width:e.width,height:e.height,rotation:e.rotation,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur}),/*#__PURE__*/(0,p.jsxs)(rq,{x:e.x,y:e.y,rotation:e.rotation,scaleX:j,scaleY:j,children:[/*#__PURE__*/(0,p.jsx)(r$,{image:b,ref:s,// width={cropImageWidth}
2809
2809
  // height={cropImageHeight}
2810
2810
  opacity:.4,draggable:!0,x:-e.cropX*b.width,y:-e.cropY*b.height,onDragMove:M,onTransform:M}),/*#__PURE__*/(0,p.jsx)(rX,{ref:L,anchorSize:20,// anchorFill=""
2811
2811
  enabledAnchors:["top-left","top-right","bottom-left","bottom-right"],boundBoxFunc:(e,t)=>t.width<5||t.height<5?e:t,// keepRatio={false}
@@ -2890,7 +2890,7 @@ t.target.stopDrag(),t.target.startDrag(),x.current?.startDrag(t))}E&&S(null)},pa
2890
2890
  // clipY={-bleed}
2891
2891
  // clipWidth={page.computedWidth + bleed * 2}
2892
2892
  // clipHeight={page.computedHeight + bleed * 2}
2893
- name:"elements-container",listening:!e.isPlaying,children:[/*#__PURE__*/(0,p.jsx)(rW,{name:"elements-area",width:t.computedWidth,height:t.computedHeight,listening:!1}),/*#__PURE__*/(0,p.jsx)(ll,{elements:t.children,store:e})]}),/*#__PURE__*/(0,p.jsx)(rW,{stroke:c,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})]}),/*#__PURE__*/(0,p.jsx)(rK,{name:"workspace-background",points:[0,0,n,0,n,r,0,r,0,0,m,b,m,r-b,n-m,r-b,n-m,b,m,b],listening:!1,closed:!0,fill:o}),/*#__PURE__*/(0,p.jsx)(rq,{x:m,y:b,scaleX:e.scale,scaleY:e.scale,name:"page-container",children:/*#__PURE__*/(0,p.jsx)(rW,{name:"page-highlight",hideInExport:!0,x:-z/2-U,y:-z/2-U,width:f+z+2*U,height:g+z+2*U,stroke:D&&e.pages.length>1?s:a,strokeWidth:2,listening:!1,strokeScaleEnabled:!1})}),/*#__PURE__*/(0,p.jsxs)(rq,{x:m+h*e.scale,y:b+h*e.scale,scaleX:e.scale,scaleY:e.scale,name:"page-abs-container",children:[/*#__PURE__*/(0,p.jsx)(rX,{ref:x,boundBoxFunc:(e,t)=>{let n=1>Math.abs(t.width)||1>Math.abs(t.height),r=1>Math.abs(e.width)||1>Math.abs(e.height);return n&&!r?e:t},onTransform:e=>{let t=x.current?.__getNodeRect(),n=x.current?.getActiveAnchor();C({anchor:n,x:t.x,y:t.y,rotation:t.rotation,width:t.width,height:t.height})},onTransformEnd:e=>{C({})},visible:!e.isPlaying}),E&&E.map(({points:t,distance:n,box1:r,box2:i},o)=>/*#__PURE__*/(0,p.jsxs)(rq,{name:"distances-container",hideInExport:!0,listening:!1,children:[/*#__PURE__*/(0,p.jsx)(rW,{...r,stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1}),/*#__PURE__*/(0,p.jsx)(rW,{...i,stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1}),/*#__PURE__*/(0,p.jsx)(rK,{points:[t[0].x,t[0].y,t[1].x,t[1].y],stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1}),/*#__PURE__*/(0,p.jsx)(rK,{points:[t[1].x,t[1].y,t[2].x,t[2].y],stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1}),/*#__PURE__*/(0,p.jsxs)(rG,{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,children:[/*#__PURE__*/(0,p.jsx)("Tag",{cornerRadius:5,fill:"rgb(0, 161, 255)",pointerDirection:"down"}),/*#__PURE__*/(0,p.jsx)(rY,{align:"center",verticalAlign:"middle",fill:"white",padding:5,text:a6({unit:e.unit,dpi:e.dpi,px:n})})]})]},o)),t._rendering&&/*#__PURE__*/(0,p.jsxs)(rq,{children:[/*#__PURE__*/(0,p.jsx)(rW,{width:f,height:g,fill:"rgba(255,255,255,0.9)"}),/*#__PURE__*/(0,p.jsx)(rY,{text:"Rendering...",fontSize:60,width:f,height:g,align:"center",verticalAlign:"middle"})]}),B&&/*#__PURE__*/(0,p.jsx)(B,{components:u,store:e,page:t,stageRef:w})]}),/*#__PURE__*/(0,p.jsx)(la,{...O,store:e}),/*#__PURE__*/(0,p.jsx)(lo,{selection:j}),aK.value&&/*#__PURE__*/(0,p.jsx)(rY,{text:"Powered by polotno.com",fontSize:14,fill:"rgba(0,0,0,0.6)",x:n-170,y:r-18,// height={height - 3}
2893
+ name:"elements-container",listening:!e.isPlaying,children:[/*#__PURE__*/(0,p.jsx)(rW,{name:"elements-area",width:t.computedWidth,height:t.computedHeight,listening:!1}),/*#__PURE__*/(0,p.jsx)(ll,{elements:t.children,store:e})]}),/*#__PURE__*/(0,p.jsx)(rW,{stroke:c,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})]}),/*#__PURE__*/(0,p.jsx)(rK,{name:"workspace-background",points:[0,0,n,0,n,r,0,r,0,0,m,b,m,r-b,n-m,r-b,n-m,b,m,b],listening:!1,closed:!0,fill:o}),/*#__PURE__*/(0,p.jsx)(rq,{x:m,y:b,scaleX:e.scale,scaleY:e.scale,name:"page-container",children:/*#__PURE__*/(0,p.jsx)(rW,{name:"page-highlight",hideInExport:!0,x:-z/2-U,y:-z/2-U,width:f+z+2*U,height:g+z+2*U,stroke:D&&e.pages.length>1?s:a,strokeWidth:2,listening:!1,strokeScaleEnabled:!1})}),/*#__PURE__*/(0,p.jsxs)(rq,{x:m+h*e.scale,y:b+h*e.scale,scaleX:e.scale,scaleY:e.scale,name:"page-abs-container",children:[/*#__PURE__*/(0,p.jsx)(rX,{ref:x,onDragStart:()=>{e.history.startTransaction()},onDragEnd:()=>{e.history.endTransaction()},onTransformStart:()=>{e.history.startTransaction()},boundBoxFunc:(e,t)=>{let n=1>Math.abs(t.width)||1>Math.abs(t.height),r=1>Math.abs(e.width)||1>Math.abs(e.height);return n&&!r?e:t},onTransform:e=>{let t=x.current?.__getNodeRect(),n=x.current?.getActiveAnchor();C({anchor:n,x:t.x,y:t.y,rotation:t.rotation,width:t.width,height:t.height})},onTransformEnd:t=>{C({}),e.history.endTransaction()},visible:!e.isPlaying}),E&&E.map(({points:t,distance:n,box1:r,box2:i},o)=>/*#__PURE__*/(0,p.jsxs)(rq,{name:"distances-container",hideInExport:!0,listening:!1,children:[/*#__PURE__*/(0,p.jsx)(rW,{...r,stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1}),/*#__PURE__*/(0,p.jsx)(rW,{...i,stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1}),/*#__PURE__*/(0,p.jsx)(rK,{points:[t[0].x,t[0].y,t[1].x,t[1].y],stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1}),/*#__PURE__*/(0,p.jsx)(rK,{points:[t[1].x,t[1].y,t[2].x,t[2].y],stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1}),/*#__PURE__*/(0,p.jsxs)(rG,{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,children:[/*#__PURE__*/(0,p.jsx)("Tag",{cornerRadius:5,fill:"rgb(0, 161, 255)",pointerDirection:"down"}),/*#__PURE__*/(0,p.jsx)(rY,{align:"center",verticalAlign:"middle",fill:"white",padding:5,text:a6({unit:e.unit,dpi:e.dpi,px:n})})]})]},o)),t._rendering&&/*#__PURE__*/(0,p.jsxs)(rq,{children:[/*#__PURE__*/(0,p.jsx)(rW,{width:f,height:g,fill:"rgba(255,255,255,0.9)"}),/*#__PURE__*/(0,p.jsx)(rY,{text:"Rendering...",fontSize:60,width:f,height:g,align:"center",verticalAlign:"middle"})]}),B&&/*#__PURE__*/(0,p.jsx)(B,{components:u,store:e,page:t,stageRef:w})]}),/*#__PURE__*/(0,p.jsx)(la,{...O,store:e}),/*#__PURE__*/(0,p.jsx)(lo,{selection:j}),aK.value&&/*#__PURE__*/(0,p.jsx)(rY,{text:"Powered by polotno.com",fontSize:14,fill:"rgba(0,0,0,0.6)",x:n-170,y:r-18,// height={height - 3}
2894
2894
  // width={width - 3}
2895
2895
  // align="right"
2896
2896
  // verticalAlign="bottom"
@@ -6279,7 +6279,8 @@ opacity:e.opacity};return"arrow"===t||"triangle"===t?TE("polyline",{points:`${3*
6279
6279
  opacity:e.opacity};return"arrow"===t||"triangle"===t?TM("polyline",{points:`${3*e.height},${-(2*e.height)} 0,0 ${3*e.height},${2*e.height}`,...n}):"bar"===t?TM("polyline",{points:`0,${-(2*e.height)} 0,${2*e.height}`,...n}):"circle"===t?TM("circle",{r:e.height,...n}):"square"===t?TM("polyline",{points:`${-e.height},${-e.height} ${-e.height},${e.height} ${e.height},${e.height} ${e.height},${-e.height}`,...n}):null},TU=async({element:e,page:t,store:n})=>TM("svg",{style:{width:"100%",height:"100%",contain:"layout style size",overflow:"visible"}},TM("rect",{x:0,y:0,width:e.width,height:e.height,fill:e.color}),TM("g",{transform:`translate(0 ${e.height/2})`},Tz({element:e,type:e.startHead})),TM("g",{transform:`translate(${e.width} ${e.height/2}) rotate(180)`},Tz({element:e,type:e.endHead}))),TH=async({element:e,page:t,store:n,elementHook:r})=>{let i=await Promise.all(e.children.map(e=>Tq({element:e,page:t,store:n,elementHook:r}))),o=TM("g",{opacity:e.opacity,style:{"transform-origin":"top left"}},...i);return r&&r({dom:o,element:e})||o},TV={image:TF,svg:TF,text:TB,line:TU,group:TH};async function Tq({element:e,page:t,store:n,elementHook:r}){let i=await TV[e.type];i||(i=()=>TM("div",{}),console.error(`HTML export does not support ${e.type} type...`));let o=await i({element:e,page:t,store:n}),a=[];e.blurEnabled&&a.push(`blur(${e.blurRadius/2}px)`),e.brightnessEnabled&&a.push(`brightness(${100*e.brightness+100}%)`),e.sepiaEnabled&&a.push("sepia()"),e.grayscaleEnabled&&a.push("grayscale()"),e.shadowEnabled&&a.push(`drop-shadow(${e.shadowOffsetX}px ${e.shadowOffsetY}px ${e.shadowBlur}px ${e.shadowColor})`);let l=TM("g",{transform:`translate(${e.x}, ${e.y}) rotate(${e.rotation})`,rotation:e.rotation,width:e.width,height:e.height,opacity:e.opacity,style:{"transform-origin":"top left",filter:a.join(" ")}},o);return r&&r({dom:l,element:e})||l}async function TG({page:e,store:t,elementHook:n}){let r=await Promise.all(e.children.map(r=>Tq({element:r,page:e,store:t,elementHook:n}))),i={},o=e.background.indexOf("url")>=0||e.background.indexOf("http")>=0||e.background.indexOf(".jpg")>=0||e.background.indexOf(".png")>=0||e.background.indexOf(".jpeg")>=0;if(o){let n=await OO(e.background),r=await OC(e.background,{width:t.width,height:t.height,x:0,y:0,...Ok({width:t.width,height:t.height},{width:n.width,height:n.height})});i={...i,"background-image":`url(${r})`}}return TM("g",{className:"page",style:{...i,background:e.background}},TM("rect",{x:0,y:0,width:t.width,height:t.height,fill:e.background}),...r)}async function TW({json:e,elementHook:t}){let n=await Promise.all(e.pages.map(n=>TG({page:n,store:e,elementHook:t}))),r=[];e.pages.forEach(e=>{e.children.forEach(e=>{"text"===e.type&&-1===r.indexOf(e.fontFamily)&&r.push(e.fontFamily)})});let i=r.map(t=>{let n=e.fonts.find(e=>e.fontFamily===t);return n?TM("style",{},""):TM("link",{href:`https://fonts.googleapis.com/css?family=${t}`,rel:"stylesheet"})});return TM("svg",{xmlns:"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink",viewBox:`0 0 ${e.width} ${e.height}`,preserveAspectRatio:"xMidYMin slice"},...i,...n)}let TK=(e,t)=>"object"==typeof t?`${e}="${Object.keys(t).map(e=>`${e}:${t[e]};`).join(" ")}"`:`${e}="${t}"`,T$=({dom:e})=>"string"==typeof e?e:e?`<${e.type} ${Object.keys(e.props).map(t=>TK(t,e.props[t])).join(" ")}>${e.children.map(e=>T$({dom:e})).join("")}</${e.type}>
6280
6280
  `:"";async function TY({json:e,elementHook:t}){let n=await TW({json:e,elementHook:t}),r=T$({dom:n});return r}var Oz=(h("58B0H"),h("58B0H"),h("58B0H"));let TX=(0,Oz.types).model("Node",{id:Oz.types.identifier,type:"none",name:"",opacity:1,custom:(0,Oz.types).frozen(),visible:!0,selectable:!0,removable:!0,alwaysOnTop:!1,showInExport:!0}).postProcessSnapshot(e=>{let t={...e},n={};for(var r in t)"_"!==r[0]&&(n[r]=e[r]);return n}).views(e=>({get locked(){return!e.draggable&&!e.contentEditable&&!e.styleEditable&&!e.resizable},get page(){let t=(0,Oz.getParentOfType)(e,Ar);return t},get store(){let t=(0,Oz.getParentOfType)(e,Ao);return t},get top(){let t=e;for(;;){if(!(0,Oz.hasParentOfType)(t,Ae))return t;t=(0,Oz.getParentOfType)(t,Ae)}},get parent(){if((0,Oz.hasParentOfType)(e,Ae))return(0,Oz.getParentOfType)(e,Ae);if((0,Oz.hasParentOfType)(e,Ar))return(0,Oz.getParentOfType)(e,Ar);if((0,Oz.hasParentOfType)(e,Ao))return(0,Oz.getParentOfType)(e,Ao);return null}})).actions(e=>({toJSON:()=>({...(0,Oz.getSnapshot)(e)})})).actions(e=>({clone(t={}){let n=e.toJSON();return t.id=t.id||OQ(10),T8(n,e=>{e.id=OQ(10)}),Object.assign(n,t),e.page.addElement(n)},set(t){Object.assign(e,t)},moveUp(){e.page.moveElementsUp([e.id])},moveTop(){e.page.moveElementsTop([e.id])},moveDown(){e.page.moveElementsDown([e.id])},moveBottom(){e.page.moveElementsBottom([e.id])},beforeDestroy(){// drag and drop, crop, text editing may start transaction
6281
6281
  // we need to force stop it on element remove
6282
- e.store.history.endTransaction()}}));var Oz=h("58B0H");let TQ={right:{from:{x:-200},to:{x:0}},left:{from:{x:200},to:{x:0}},up:{from:{y:200},to:{y:0}},down:{from:{y:-200},to:{y:0}},"bottom-right":{from:{x:-200,y:-200},to:{x:0,y:0}},"bottom-left":{from:{x:200,y:-200},to:{x:0,y:0}},"top-right":{from:{x:-200,y:200},to:{x:0,y:0}},"top-left":{from:{x:200,y:200},to:{x:0,y:0}}},TZ={fade:({dTime:e,element:t,animation:n})=>{let r=e/n.duration;return"enter"===n.type?{opacity:r*t.opacity}:{opacity:(1-r)*t.opacity}},move:({dTime:e,element:t,animation:n})=>{let r=TQ[n.data.direction]||TQ.right,i={};for(var o in r.from){let a=t[o]+r.from[o],l=t[o]+r.to[o];if("exit"===n.type){let e=a;a=l,l=-e}let s=l-a;i[o]=a+e/n.duration*s}return i},zoom:({dTime:e,element:t,animation:n})=>{let r={},i={x:t.x+t.width/3,y:t.y+t.height/3,width:t.width/3,height:t.height/3,fontSize:t.fontSize/3},o={x:t.x,y:t.y,width:t.width,height:t.height,fontSize:t.fontSize};for(var a in i){let t=i[a],l=o[a];if("exit"===n.type){let e=t;t=l,l=e}let s=l-t;r[a]=t+e/n.duration*s}return r}},TJ=({element:e,dTime:t,animation:n})=>{let r=TZ[n.name];return r?r({element:e,dTime:t,animation:n}):(console.error("Can not find animation type: "+n.name),{})},T0=(0,Oz.types).model("Animation",{delay:0,duration:500,enabled:!0,type:(0,Oz.types).enumeration("Type",["enter","exit"]),name:"none",data:(0,Oz.types).frozen({})}),T1=TX.named("Shape").props({x:0,y:0,width:100,height:100,rotation:0,opacity:1,animations:(0,Oz.types).array(T0),blurEnabled:!1,blurRadius:10,brightnessEnabled:!1,brightness:0,sepiaEnabled:!1,grayscaleEnabled:!1,shadowEnabled:!1,shadowBlur:5,shadowOffsetX:0,shadowOffsetY:0,shadowColor:"black",shadowOpacity:1,visible:!0,draggable:!0,resizable:!0,selectable:!0,contentEditable:!0,styleEditable:!0,alwaysOnTop:!1,showInExport:!0}).preProcessSnapshot(e=>{// try to validate some props
6282
+ // self.store.history.endTransaction();
6283
+ }}));var Oz=h("58B0H");let TQ={right:{from:{x:-200},to:{x:0}},left:{from:{x:200},to:{x:0}},up:{from:{y:200},to:{y:0}},down:{from:{y:-200},to:{y:0}},"bottom-right":{from:{x:-200,y:-200},to:{x:0,y:0}},"bottom-left":{from:{x:200,y:-200},to:{x:0,y:0}},"top-right":{from:{x:-200,y:200},to:{x:0,y:0}},"top-left":{from:{x:200,y:200},to:{x:0,y:0}}},TZ={fade:({dTime:e,element:t,animation:n})=>{let r=e/n.duration;return"enter"===n.type?{opacity:r*t.opacity}:{opacity:(1-r)*t.opacity}},move:({dTime:e,element:t,animation:n})=>{let r=TQ[n.data.direction]||TQ.right,i={};for(var o in r.from){let a=t[o]+r.from[o],l=t[o]+r.to[o];if("exit"===n.type){let e=a;a=l,l=-e}let s=l-a;i[o]=a+e/n.duration*s}return i},zoom:({dTime:e,element:t,animation:n})=>{let r={},i={x:t.x+t.width/3,y:t.y+t.height/3,width:t.width/3,height:t.height/3,fontSize:t.fontSize/3},o={x:t.x,y:t.y,width:t.width,height:t.height,fontSize:t.fontSize};for(var a in i){let t=i[a],l=o[a];if("exit"===n.type){let e=t;t=l,l=e}let s=l-t;r[a]=t+e/n.duration*s}return r}},TJ=({element:e,dTime:t,animation:n})=>{let r=TZ[n.name];return r?r({element:e,dTime:t,animation:n}):(console.error("Can not find animation type: "+n.name),{})},T0=(0,Oz.types).model("Animation",{delay:0,duration:500,enabled:!0,type:(0,Oz.types).enumeration("Type",["enter","exit"]),name:"none",data:(0,Oz.types).frozen({})}),T1=TX.named("Shape").props({x:0,y:0,width:100,height:100,rotation:0,opacity:1,animations:(0,Oz.types).array(T0),blurEnabled:!1,blurRadius:10,brightnessEnabled:!1,brightness:0,sepiaEnabled:!1,grayscaleEnabled:!1,shadowEnabled:!1,shadowBlur:5,shadowOffsetX:0,shadowOffsetY:0,shadowColor:"black",shadowOpacity:1,visible:!0,draggable:!0,resizable:!0,selectable:!0,contentEditable:!0,styleEditable:!0,alwaysOnTop:!1,showInExport:!0}).preProcessSnapshot(e=>{// try to validate some props
6283
6284
  let t={...e,x:e.x||0,y:e.y||0};// // fallback for old draggable behaviour when it was doing resize logic too
6284
6285
  // if (!snapshot.draggable && snapshot.resizable === undefined) {
6285
6286
  // result.resizable = false;
@@ -6291,7 +6292,7 @@ return"width"in e&&(t.width=t.width||1),"height"in e&&(t.height=t.height||1),e.l
6291
6292
  // useful for template canvas, where users will need to replace text elements
6292
6293
  placeholder:"",fontSize:14,fontFamily:"Roboto",fontStyle:"normal",fontWeight:"normal",textDecoration:"",fill:"black",align:"center",width:100,height:0,verticalAlign:"top",strokeWidth:0,stroke:"black",// dir: 'ltr', // can be ltr or rtl
6293
6294
  lineHeight:(0,Oz.types).optional((0,Oz.types).union(Oz.types.number,Oz.types.string),1.2),letterSpacing:0,_editModeEnabled:!1,backgroundEnabled:!1,backgroundColor:"#7ED321",backgroundOpacity:1,backgroundCornerRadius:.5,backgroundPadding:.5}).preProcessSnapshot(e=>({...e})).actions(e=>({toggleEditMode(t){e._editModeEnabled=t??!e._editModeEnabled,e._editModeEnabled?e.store.history.startTransaction():e.store.history.endTransaction()}})),T3=T1.named("Image").props({type:"image",width:100,height:100,src:"",cropX:0,cropY:0,cropWidth:1,cropHeight:1,cornerRadius:0,flipX:!1,flipY:!1,clipSrc:"",// use border instead of stroke for consistent naming
6294
- borderColor:"black",borderSize:0,keepRatio:!1,_cropModeEnabled:!1}).actions(e=>({toggleCropMode(t){e._cropModeEnabled=t??!e._cropModeEnabled,e._cropModeEnabled?e.store.history.startTransaction():e.store.history.endTransaction()}})),T5=T3.named("Video").props({type:"video",duration:0,startTime:0,endTime:1});var Oz=h("58B0H");let T4=T1.named("Line").props({type:"line",width:400,height:10,color:"black",dash:(0,Oz.types).array(Oz.types.number),startHead:"",endHead:""}).actions(e=>({}));var Oz=h("58B0H");let T6=T1.named("SVG").props({type:"svg",// that is what user will set
6295
+ borderColor:"black",borderSize:0,keepRatio:!1,_cropModeEnabled:!1}).actions(e=>({toggleCropMode(t){e._cropModeEnabled=t??!e._cropModeEnabled,e._cropModeEnabled?e.store.history.startTransaction():e.store.history.endTransaction()},beforeDestroy(){e._cropModeEnabled&&e.store.history.endTransaction()}})),T5=T3.named("Video").props({type:"video",duration:0,startTime:0,endTime:1});var Oz=h("58B0H");let T4=T1.named("Line").props({type:"line",width:400,height:10,color:"black",dash:(0,Oz.types).array(Oz.types.number),startHead:"",endHead:""}).actions(e=>({}));var Oz=h("58B0H");let T6=T1.named("SVG").props({type:"svg",// that is what user will set
6295
6296
  src:"",maskSrc:"",cropX:0,cropY:0,cropWidth:1,cropHeight:1,keepRatio:!0,flipX:!1,flipY:!1,width:100,height:100,// use border instead of stroke for consistent naming
6296
6297
  borderColor:"black",borderSize:0,cornerRadius:0,colorsReplace:(0,Oz.types).map(Oz.types.string)}).preProcessSnapshot(e=>({...e,src:e.src||e.svgSource})).actions(e=>({replaceColor(t,n){e.colorsReplace.set(t,n)}})),T8=(e,t)=>{e.children&&e.children.forEach(e=>{t(e),T8(e,t)})},T9=[...Array(20)].map((e,t)=>(0,Oz.types).late(()=>At[t])),T7=(0,Oz.types).union({dispatcher:e=>{let t=An[e.type];if(!t)throw Error(`Unknown element type: "${e.type}"`);return t}},T6,T2,T3,T4,T5,(0,Oz.types).late(()=>Ae),...T9),Ae=TX.named("Group").props({type:"group",children:(0,Oz.types).array(T7)}).views(e=>({get draggable(){let t=!0;return T8(e,e=>{e.draggable||(t=!1)}),t},get resizable(){let t=!0;return T8(e,e=>{e.resizable||(t=!1)}),t},get contentEditable(){let t=!0;return T8(e,e=>{e.contentEditable||(t=!1)}),t},get styleEditable(){let t=!0;return T8(e,e=>{e.styleEditable||(t=!1)}),t},get locked(){let t=!0;return T8(e,e=>{e.locked||(t=!1)}),t}})).actions(e=>({set({draggable:t,contentEditable:n,styleEditable:r,resizable:i,...o}){void 0!==t&&T8(e,e=>{e.set({draggable:t})}),void 0!==n&&T8(e,e=>{e.set({contentEditable:n})}),void 0!==r&&T8(e,e=>{e.set({styleEditable:r})}),void 0!==i&&T8(e,e=>{e.set({resizable:i})}),Object.assign(e,o)}})),At=[],An={svg:T6,text:T2,image:T3,group:Ae,line:T4,video:T5},Ar=(0,Oz.types).model("Page",{id:Oz.types.identifier,children:(0,Oz.types).array(T7),width:(0,Oz.types).optional((0,Oz.types).union(Oz.types.number,(0,Oz.types).literal("auto")),"auto"),height:(0,Oz.types).optional((0,Oz.types).union(Oz.types.number,(0,Oz.types).literal("auto")),"auto"),background:"white",bleed:0,custom:(0,Oz.types).frozen(),duration:5e3,_exporting:!1,_rendering:!1}).postProcessSnapshot(e=>{let t={...e},n={};for(var r in t)"_"!==r[0]&&(n[r]=e[r]);return n}).views(e=>({get store(){let t=(0,Oz.getParentOfType)(e,Ao);return t},get startTime(){let t=0;for(let n of e.store.pages){if(n.id===e.id)break;t+=n.duration}return t}})).views(e=>({get computedWidth(){if("auto"===e.width)return e.store.width;return e.width},get computedHeight(){if("auto"===e.height)return e.store.height;return e.height}})).actions(e=>({toJSON:()=>JSON.parse(JSON.stringify((0,Oz.getSnapshot)(e))),// iterate over all elements, that can be moved up
6297
6298
  _forEachElementUp(t,n){let r=t.map(t=>({id:t,index:e.children.findIndex(e=>e.id===t)}));for(let{index:i}of(r.sort((e,t)=>t.index-e.index),r)){if(-1==i)continue;let r=i<e.children.length-1&&e.children[i+1],o=t.indexOf(r?.id)>=0,a=i===e.children.length-1;a||o||n(i)}},// iterate over all elements, that can be moved down