npm - polotno - Versions diffs - 2.9.11 → 2.9.13 - Mend

polotno 2.9.11 → 2.9.13

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 (8) hide show

package/canvas/figure-element.js CHANGED Viewed

	@@ -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.FigureElement=void 0;const react_1=__importDefault(require("react")),mobx_react_lite_1=require("mobx-react-lite"),react_konva_1=require("react-konva"),figure_to_svg_1=require("../utils/figure-to-svg"),highlighter_1=require("./highlighter"),screen_1=require("../utils/screen"),use_color_1=require("./use-color"),createComponent=e=>(0,mobx_react_lite_1.observer)((({element:t,fillProps:a,strokeProps:r})=>{let s=e({width:t.a.width,height:t.a.height,cornerRadius:t.cornerRadius}),c=1,o=1;"string"!=typeof s&&(c=s.scaleX,o=s.scaleY,s=s.path);const l=react_1.default.useRef(null);return react_1.default.createElement(react_1.default.Fragment,null,react_1.default.createElement(react_konva_1.Rect,{width:t.width,height:t.height,fill:"transparent"}),react_1.default.createElement(react_konva_1.Path,Object.assign({},a,{ref:l,data:s,scaleX:c,scaleY:o})),react_1.default.createElement(react_konva_1.Group,{clipFunc:e=>{const t=l.current;if(t){var a=t.dataArray;e.beginPath();for(var r=0;r<a.length;r++){var s=a[r].command,c=a[r].points;switch(s){case"L":e.lineTo(c[0],c[1]);break;case"M":e.moveTo(c[0],c[1]);break;case"C":e.bezierCurveTo(c[0],c[1],c[2],c[3],c[4],c[5]);break;case"Q":e.quadraticCurveTo(c[0],c[1],c[2],c[3]);break;case"A":var o=c[0],i=c[1],n=c[2],h=c[3],d=c[4],u=c[5],_=c[6],g=c[7],f=n>h?n:h,m=n>h?1:n/h,p=n>h?h/n:1;e.translate(o,i),e.rotate(_),e.scale(m,p),e.arc(0,0,f,d,d+u,1-g),e.scale(1/m,1/p),e.rotate(-_),e.translate(-o,-i);break;case"z":!0,e.closePath()}}}},scaleX:c,scaleY:o},react_1.default.createElement(react_konva_1.Path,Object.assign({},r,{x:0,y:0,data:s,strokeWidth:2r.strokeWidth,dash:r.dash.map((e=>e))}))))})),COMPONENTS_CACHE={},getComponent=e=>{var f;return COMPONENTS_CACHE[e]\|\|(COMPONENTS_CACHE[e]=(t=(0,figure_to_svg_1.subTypeToPathDataFunc)(e),(0,mobx_react_lite_1.observer)((({element:e,fillProps:a,strokeProps:r})=>{let s=t({width:e.a.width,height:e.a.height,cornerRadius:e.cornerRadius}),c=1,o=1;"string"!=typeof s&&(c=s.scaleX,o=s.scaleY,s=s.path);const l=react_1.default.useRef(null);return react_1.default.createElement(react_1.default.Fragment,null,react_1.default.createElement(react_konva_1.Rect,{width:e.width,height:e.height,fill:"transparent"}),react_1.default.createElement(react_konva_1.Path,Object.assign({},a,{ref:l,data:s,scaleX:c,scaleY:o})),react_1.default.createElement(react_konva_1.Group,{clipFunc:e=>{const t=l.current;if(t){var a=t.dataArray;e.beginPath();for(var r=0;r<a.length;r++){var s=a[r].command,c=a[r].points;switch(s){case"L":e.lineTo(c[0],c[1]);break;case"M":e.moveTo(c[0],c[1]);break;case"C":e.bezierCurveTo(c[0],c[1],c[2],c[3],c[4],c[5]);break;case"Q":e.quadraticCurveTo(c[0],c[1],c[2],c[3]);break;case"A":var o=c[0],i=c[1],n=c[2],h=c[3],d=c[4],u=c[5],_=c[6],g=c[7],f=n>h?n:h,m=n>h?1:n/h,p=n>h?h/n:1;e.translate(o,i),e.rotate(_),e.scale(m,p),e.arc(0,0,f,d,d+u,1-g),e.scale(1/m,1/p),e.rotate(-_),e.translate(-o,-i);break;case"z":e.closePath()}}}},scaleX:c,scaleY:o},react_1.default.createElement(react_konva_1.Path,Object.assign({},r,{x:0,y:0,data:s,strokeWidth:2r.strokeWidth,dash:r.dash.map((e=>e))}))))})))),COMPONENTS_CACHE[e]};exports.FigureElement=(0,mobx_react_lite_1.observer)((({element:e,store:t})=>{const a=e.selectable\|\|"admin"===t.role,r=(0,screen_1.isTouchDevice)(),[s,c]=react_1.default.useState(!1),o=t.selectedElements.indexOf(e)>=0&&1===t.selectedElements.length,l=Math.min(e.strokeWidth,e.width/2,e.height/2),i=Math.max(0,Math.min(e.width/2,e.height/2,e.cornerRadius)),n=(0,use_color_1.useColor)(e,e.a.fill,"fill"),h=Object.assign(Object.assign({width:e.a.width,height:e.a.height},n),{cornerRadius:i,opacity:e.animated("opacity"),shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,~~listening:a,~~preventDefault:!r\|\|o,hideInExport:!e.showInExport}),d=(0,use_color_1.useColor)(e,e.stroke,"stroke"),u=Object.assign(Object.assign({visible:l>0,x:l/2,y:l/2,width:e.a.width-l,height:e.a.height-l},d),{strokeWidth:l,cornerRadius:Math.max(0,i-l),dash:e.dash.map((e=>el)),opacity:e.animated("opacity"),hideInExport:!e.showInExport,listening:!1}),_=(g=e.subType,COMPONENTS_CACHE[g]\|\|(COMPONENTS_CACHE[g]=(f=(0,figure_to_svg_1.subTypeToPathDataFunc)(g),(0,mobx_react_lite_1.observer)((({element:e,fillProps:t,strokeProps:a})=>{let r=f({width:e.a.width,height:e.a.height,cornerRadius:e.cornerRadius}),s=1,c=1;"string"!=typeof r&&(s=r.scaleX,c=r.scaleY,r=r.path);const o=react_1.default.useRef(null);return react_1.default.createElement(react_1.default.Fragment,null,react_1.default.createElement(react_konva_1.Rect,{width:e.width,height:e.height,fill:"transparent"}),react_1.default.createElement(react_konva_1.Path,Object.assign({},t,{ref:o,data:r,scaleX:s,scaleY:c})),react_1.default.createElement(react_konva_1.Group,{clipFunc:e=>{const t=o.current;if(t){var a=t.dataArray;e.beginPath();for(var r=0;r<a.length;r++){var s=a[r].command,c=a[r].points;switch(s){case"L":e.lineTo(c[0],c[1]);break;case"M":e.moveTo(c[0],c[1]);break;case"C":e.bezierCurveTo(c[0],c[1],c[2],c[3],c[4],c[5]);break;case"Q":e.quadraticCurveTo(c[0],c[1],c[2],c[3]);break;case"A":var l=c[0],i=c[1],n=c[2],h=c[3],d=c[4],u=c[5],_=c[6],g=c[7],f=n>h?n:h,m=n>h?1:n/h,p=n>h?h/n:1;e.translate(l,i),e.rotate(_),e.scale(m,p),e.arc(0,0,f,d,d+u,1-g),e.scale(1/m,1/p),e.rotate(-_),e.translate(-l,-i);break;case"z":e.closePath()}}}},scaleX:s,scaleY:c},react_1.default.createElement(react_konva_1.Path,Object.assign({},a,{x:0,y:0,data:r,strokeWidth:2a.strokeWidth,dash:a.dash.map((e=>e))}))))})))),COMPONENTS_CACHE[g]\|\|react_konva_1.Group);var g,f;return react_1.default.createElement(react_1.default.Fragment,null,react_1.default.createElement(react_konva_1.Group,{id:e.id,x:e.a.x,y:e.a.y,rotation:e.a.rotation,opacity:e.a.opacity,draggable:r?e.draggable&&o:e.draggable,name:"element",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()})},onTransform:t=>{const a=t.target.scale();t.target.scaleX(1),t.target.scaleY(1),e.set({width:e.widtha.x,height:e.heighta.y,x:t.target.x(),y:t.target.y(),rotation:t.target.rotation()})}},react_1.default.createElement(_,{element:e,fillProps:h,strokeProps:u})),s&&!o&&react_1.default.createElement(highlighter_1.Highlighter,{element:e}))}));
1	+ "use strict";var __importDefault=this&&this.__importDefault\|\|function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.FigureElement=void 0;const react_1=__importDefault(require("react")),mobx_react_lite_1=require("mobx-react-lite"),react_konva_1=require("react-konva"),figure_to_svg_1=require("../utils/figure-to-svg"),highlighter_1=require("./highlighter"),screen_1=require("../utils/screen"),use_color_1=require("./use-color"),createComponent=e=>(0,mobx_react_lite_1.observer)((({element:t,fillProps:a,strokeProps:r})=>{let s=e({width:t.a.width,height:t.a.height,cornerRadius:t.cornerRadius}),c=1,o=1;"string"!=typeof s&&(c=s.scaleX,o=s.scaleY,s=s.path);const l=react_1.default.useRef(null);return react_1.default.createElement(react_1.default.Fragment,null,react_1.default.createElement(react_konva_1.Rect,{width:t.width,height:t.height,fill:"transparent"}),react_1.default.createElement(react_konva_1.Path,Object.assign({},a,{ref:l,data:s,scaleX:c,scaleY:o})),react_1.default.createElement(react_konva_1.Group,{clipFunc:e=>{const t=l.current;if(t){var a=t.dataArray;e.beginPath();for(var r=0;r<a.length;r++){var s=a[r].command,c=a[r].points;switch(s){case"L":e.lineTo(c[0],c[1]);break;case"M":e.moveTo(c[0],c[1]);break;case"C":e.bezierCurveTo(c[0],c[1],c[2],c[3],c[4],c[5]);break;case"Q":e.quadraticCurveTo(c[0],c[1],c[2],c[3]);break;case"A":var o=c[0],i=c[1],n=c[2],h=c[3],d=c[4],u=c[5],_=c[6],g=c[7],f=n>h?n:h,m=n>h?1:n/h,p=n>h?h/n:1;e.translate(o,i),e.rotate(_),e.scale(m,p),e.arc(0,0,f,d,d+u,1-g),e.scale(1/m,1/p),e.rotate(-_),e.translate(-o,-i);break;case"z":!0,e.closePath()}}}},scaleX:c,scaleY:o},react_1.default.createElement(react_konva_1.Path,Object.assign({},r,{x:0,y:0,data:s,strokeWidth:2r.strokeWidth,dash:r.dash.map((e=>e))}))))})),COMPONENTS_CACHE={},getComponent=e=>{var f;return COMPONENTS_CACHE[e]\|\|(COMPONENTS_CACHE[e]=(t=(0,figure_to_svg_1.subTypeToPathDataFunc)(e),(0,mobx_react_lite_1.observer)((({element:e,fillProps:a,strokeProps:r})=>{let s=t({width:e.a.width,height:e.a.height,cornerRadius:e.cornerRadius}),c=1,o=1;"string"!=typeof s&&(c=s.scaleX,o=s.scaleY,s=s.path);const l=react_1.default.useRef(null);return react_1.default.createElement(react_1.default.Fragment,null,react_1.default.createElement(react_konva_1.Rect,{width:e.width,height:e.height,fill:"transparent"}),react_1.default.createElement(react_konva_1.Path,Object.assign({},a,{ref:l,data:s,scaleX:c,scaleY:o})),react_1.default.createElement(react_konva_1.Group,{clipFunc:e=>{const t=l.current;if(t){var a=t.dataArray;e.beginPath();for(var r=0;r<a.length;r++){var s=a[r].command,c=a[r].points;switch(s){case"L":e.lineTo(c[0],c[1]);break;case"M":e.moveTo(c[0],c[1]);break;case"C":e.bezierCurveTo(c[0],c[1],c[2],c[3],c[4],c[5]);break;case"Q":e.quadraticCurveTo(c[0],c[1],c[2],c[3]);break;case"A":var o=c[0],i=c[1],n=c[2],h=c[3],d=c[4],u=c[5],_=c[6],g=c[7],f=n>h?n:h,m=n>h?1:n/h,p=n>h?h/n:1;e.translate(o,i),e.rotate(_),e.scale(m,p),e.arc(0,0,f,d,d+u,1-g),e.scale(1/m,1/p),e.rotate(-_),e.translate(-o,-i);break;case"z":e.closePath()}}}},scaleX:c,scaleY:o},react_1.default.createElement(react_konva_1.Path,Object.assign({},r,{x:0,y:0,data:s,strokeWidth:2r.strokeWidth,dash:r.dash.map((e=>e))}))))})))),COMPONENTS_CACHE[e]};exports.FigureElement=(0,mobx_react_lite_1.observer)((({element:e,store:t})=>{const a=e.selectable\|\|"admin"===t.role,r=(0,screen_1.isTouchDevice)(),[s,c]=react_1.default.useState(!1),o=t.selectedElements.indexOf(e)>=0&&1===t.selectedElements.length,l=Math.min(e.strokeWidth,e.width/2,e.height/2),i=Math.max(0,Math.min(e.width/2,e.height/2,e.cornerRadius)),n=(0,use_color_1.useColor)(e,e.a.fill,"fill"),h=Object.assign(Object.assign({width:e.a.width,height:e.a.height},n),{cornerRadius:i,opacity:e.animated("opacity"),shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,preventDefault:!r\|\|o,hideInExport:!e.showInExport}),d=(0,use_color_1.useColor)(e,e.stroke,"stroke"),u=Object.assign(Object.assign({visible:l>0,x:l/2,y:l/2,width:e.a.width-l,height:e.a.height-l},d),{strokeWidth:l,cornerRadius:Math.max(0,i-l),dash:e.dash.map((e=>el)),opacity:e.animated("opacity"),hideInExport:!e.showInExport,listening:!1}),_=(g=e.subType,COMPONENTS_CACHE[g]\|\|(COMPONENTS_CACHE[g]=(f=(0,figure_to_svg_1.subTypeToPathDataFunc)(g),(0,mobx_react_lite_1.observer)((({element:e,fillProps:t,strokeProps:a})=>{let r=f({width:e.a.width,height:e.a.height,cornerRadius:e.cornerRadius}),s=1,c=1;"string"!=typeof r&&(s=r.scaleX,c=r.scaleY,r=r.path);const o=react_1.default.useRef(null);return react_1.default.createElement(react_1.default.Fragment,null,react_1.default.createElement(react_konva_1.Rect,{width:e.width,height:e.height,fill:"transparent"}),react_1.default.createElement(react_konva_1.Path,Object.assign({},t,{ref:o,data:r,scaleX:s,scaleY:c})),react_1.default.createElement(react_konva_1.Group,{clipFunc:e=>{const t=o.current;if(t){var a=t.dataArray;e.beginPath();for(var r=0;r<a.length;r++){var s=a[r].command,c=a[r].points;switch(s){case"L":e.lineTo(c[0],c[1]);break;case"M":e.moveTo(c[0],c[1]);break;case"C":e.bezierCurveTo(c[0],c[1],c[2],c[3],c[4],c[5]);break;case"Q":e.quadraticCurveTo(c[0],c[1],c[2],c[3]);break;case"A":var l=c[0],i=c[1],n=c[2],h=c[3],d=c[4],u=c[5],_=c[6],g=c[7],f=n>h?n:h,m=n>h?1:n/h,p=n>h?h/n:1;e.translate(l,i),e.rotate(_),e.scale(m,p),e.arc(0,0,f,d,d+u,1-g),e.scale(1/m,1/p),e.rotate(-_),e.translate(-l,-i);break;case"z":e.closePath()}}}},scaleX:s,scaleY:c},react_1.default.createElement(react_konva_1.Path,Object.assign({},a,{x:0,y:0,data:r,strokeWidth:2a.strokeWidth,dash:a.dash.map((e=>e))}))))})))),COMPONENTS_CACHE[g]\|\|react_konva_1.Group);var g,f;return react_1.default.createElement(react_1.default.Fragment,null,react_1.default.createElement(react_konva_1.Group,{id:e.id,x:e.a.x,y:e.a.y,rotation:e.a.rotation,opacity:e.a.opacity,listening:a,draggable:r?e.draggable&&o:e.draggable,name:"element",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()})},onTransform:t=>{const a=t.target.scale();t.target.scaleX(1),t.target.scaleY(1),e.set({width:e.widtha.x,height:e.heighta.y,x:t.target.x(),y:t.target.y(),rotation:t.target.rotation()})}},react_1.default.createElement(_,{element:e,fillProps:h,strokeProps:u})),s&&!o&&react_1.default.createElement(highlighter_1.Highlighter,{element:e}))}));

package/canvas/html-element.js CHANGED Viewed

@@ -9,4 +9,4 @@
   .ql-direction-rtl {
     direction: rtl;
   }
-`,createQuill=e=>new quill_1.default(e,{toolbar:!1,keyboard:!1,clipboard:{matchVisual:!1},formats:["bold","color","font","italic","size","strike","underline","indent","list","direction"]});exports.createQuill=createQuill;const 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=(0,exports.createQuill)(n.current);return mobx.runInAction((()=>{exports.quillRef.editor.instance=e})),window.__polotnoQuill=e,e.on("text-change",(()=>{e.getSelection()&&mobx.runInAction((()=>{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&&mobx.runInAction((()=>{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()})),()=>{mobx.runInAction((()=>{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),mobx.runInAction((()=>{exports.quillRef.currentFormat=i.getFormat()})))}}),[r.text]);const a={color:r.fill};return r.fill.indexOf("gradient")>=0&&(a["background-color"]=r.fill,a["background-image"]=r.fill,a["background-size"]="100% 100%",a["background-repeat"]="repeat",a["-webkit-background-clip"]="text",a["-moz-background-clip"]="text",a["-webkit-text-fill-color"]="transparent",a["-moz-text-fill-color"]="transparent"),react_1.default.createElement(RichTextContainer,{ref:n,style:Object.assign(Object.assign({},a),{fontSize:r.fontSize,width:r.a.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 e.fill.indexOf("gradient")>=0&&(r=`\n      background-color: ${i};\n      background-image: ${e.fill};\n      background-size: 100% 100%;\n      background-repeat: repeat;\n      -webkit-background-clip: text;\n      -moz-background-clip: text;\n      -webkit-text-fill-color: transparent;\n      -moz-text-fill-color: transparent;\n    `),`<div style="white-space: 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.replaceAll("\n","</br>")}</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=react_1.default.useRef(e.height),f=t.selectedElements.indexOf(e)>=0,h=e.fontSize/3,{textVerticalResizeEnabled:g}=flags_1.flags,_=(0,text_element_1.usePrevious)(e.fontFamily),[m]=(0,text_element_1.useFontLoader)(t,e.fontFamily),x=e._editModeEnabled;(0,use_fadein_1.useFadeIn)(i);const p=m?e.fontFamily:_!==e.fontFamily?_:"Arial",b=(0,use_color_1.useColor)(e).fill,y=getHtml(e,{fontFamily:p,color:b}),{width:v,height:w}=useHtmlSize(y,e,m);react_1.default.useEffect((()=>{if(!m)return;if(!e.height)return void e.set({height:w});const{textOverflow:i}=flags_1.flags;if("change-font-size"!==i||a)"resize"===i&&(g&&e.height<w&&t.history.ignore((()=>{e.set({height:w})})),g||e.height===w||t.history.ignore((()=>{e.set({height:w})})));else{const i=findFitFontSize(e);i!==e.fontSize?t.history.ignore((()=>{e.set({fontSize:i})})):e.height!==w&&(g&&e.height<w?t.history.ignore((()=>{e.set({height:w})})):g||t.history.ignore((()=>{e.set({height:w})})))}}));const S=react_1.default.useRef(0);react_1.default.useEffect((()=>{a||x||(async()=>{S.current++;const i=S.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:y,width:e.width||1,height:e.height||w||1,fontFamily:p,padding:h,pixelRatio:t._elementsPixelRatio,font:t.fonts.find((e=>e.fontFamily===p))||fonts.globalFonts.find((e=>e.fontFamily===p))}),i!==S.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()})()}),[y,a,w,x,p,e.height,t._elementsPixelRatio]);const k=a||l;react_1.default.useEffect((()=>mobx.autorun((()=>{const t=i.current;(0,apply_filters_1.applyFilter)(t,e)}))),[r,k,e.shadowColor,e.shadowOffsetX,e.shadowOffsetY,e.shadowOpacity]);let E=0;"middle"===e.verticalAlign&&(E=(e.height-w)/2),"bottom"===e.verticalAlign&&(E=e.height-w);const z=(0,text_element_1.getLineHeight)({fontLoaded:m,fontFamily:e.fontFamily,fontSize:e.fontSize,lineHeight:e.lineHeight}),q=(0,screen_1.isTouchDevice)();return react_1.default.createElement(react_1.default.Fragment,null,react_1.default.createElement(react_konva_1.Rect,{x:e.a.x,y:e.a.y,offsetX:e.backgroundPadding*(e.fontSize*z*.5),offsetY:e.backgroundPadding*(e.fontSize*z*.5),rotation:e.a.rotation,hideInExport:!e.showInExport,listening:!1,visible:e.backgroundEnabled,opacity:e.backgroundOpacity*e.a.opacity,fill:e.backgroundColor,width:e.a.width+e.backgroundPadding*(e.fontSize*z),height:e.a.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.a.x,y:e.a.y,listening:e.selectable,rotation:e.a.rotation,width:e.a.width,height:e.a.height,visible:!k,draggable:q?e.draggable&&f:e.draggable,preventDefault:!q||f,opacity:x?0:e.a.opacity,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()})},id:e.id,onDblClick:()=>{e.contentEditable&&e.toggleEditMode(!0)},onDblTap:()=>{e.contentEditable&&e.toggleEditMode(!0)},onTransformStart:t=>{o(!0),u.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(w,u.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?w: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(),shadowBlur:e.shadowBlur*i,shadowOffsetX:e.shadowOffsetX*i,shadowOffsetY:e.shadowOffsetY*i,strokeWidth:e.strokeWidth*i})}}),react_1.default.createElement(react_konva_1.Image,{ref:i,image:r,x:e.a.x,y:e.a.y,offsetX:h,offsetY:h-E,listening:!1,rotation:e.rotation,width:e.a.width+2*h,height:e.a.height+2*h,visible:!k,opacity:x?0:e.a.opacity,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,hideInExport:!e.showInExport}),k&&react_1.default.createElement(react_konva_1.Group,{x:e.a.x,y:e.a.y,rotation:e.rotation,offsetY:-E},react_1.default.createElement(react_konva_utils_1.Html,{divProps:{style:{pointerEvents:"none"}}},react_1.default.createElement(RichTextContainer,{dangerouslySetInnerHTML:{__html:y},style:{pointerEvents:"none",display:"inline-block"}}))),x&&react_1.default.createElement(react_konva_1.Group,{x:e.a.x,y:e.a.y,rotation:e.rotation,offsetY:-E},react_1.default.createElement(react_konva_utils_1.Html,null,react_1.default.createElement(RichEditor,{html:y,element:e,onChange:t=>{const i=(0,max_font_size_1.getLimitedFontSize)({oldText:(0,text_1.removeTags)(e.text),newText:(0,text_1.removeTags)(t),element:e});e.set({text:t,fontSize:i})},onBlur:t=>{e.toggleEditMode(!1)}}))),(f||c)&&react_1.default.createElement(highlighter_1.Highlighter,{element:e}))}));
+`,createQuill=e=>new quill_1.default(e,{toolbar:!1,keyboard:!1,clipboard:{matchVisual:!1},formats:["bold","color","font","italic","size","strike","underline","indent","list","direction"]});exports.createQuill=createQuill;const 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=(0,exports.createQuill)(n.current);return mobx.runInAction((()=>{exports.quillRef.editor.instance=e})),window.__polotnoQuill=e,e.on("text-change",(()=>{e.getSelection()&&mobx.runInAction((()=>{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&&mobx.runInAction((()=>{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()})),()=>{mobx.runInAction((()=>{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),mobx.runInAction((()=>{exports.quillRef.currentFormat=i.getFormat()})))}}),[r.text]);const a={color:r.fill};return r.fill.indexOf("gradient")>=0&&(a["background-color"]=r.fill,a["background-image"]=r.fill,a["background-size"]="100% 100%",a["background-repeat"]="repeat",a["-webkit-background-clip"]="text",a["-moz-background-clip"]="text",a["-webkit-text-fill-color"]="transparent",a["-moz-text-fill-color"]="transparent"),react_1.default.createElement(RichTextContainer,{ref:n,style:Object.assign(Object.assign({},a),{fontSize:r.fontSize,width:r.a.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 e.fill.indexOf("gradient")>=0&&(r=`\n      background-color: ${i};\n      background-image: ${e.fill};\n      background-size: 100% 100%;\n      background-repeat: repeat;\n      -webkit-background-clip: text;\n      -moz-background-clip: text;\n      -webkit-text-fill-color: transparent;\n      -moz-text-fill-color: transparent;\n    `),`<div style="white-space: 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}; paint-order: stroke fill;"  contentEditable dir="${(0,text_element_1.getDir)((0,text_1.removeTags)(e.text))}">${e.text.replaceAll("\n","</br>")}</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),n=e.height&&r>e.height,a=(0,html2canvas_1.isContentWrapping)({html:i});if(!(n||a))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),f=react_1.default.useRef(e.height),u=t.selectedElements.indexOf(e)>=0,h=e.fontSize/3,{textVerticalResizeEnabled:g}=flags_1.flags,_=(0,text_element_1.usePrevious)(e.fontFamily),[m]=(0,text_element_1.useFontLoader)(t,e.fontFamily),x=e._editModeEnabled;(0,use_fadein_1.useFadeIn)(i);const p=m?e.fontFamily:_!==e.fontFamily?_:"Arial",b=(0,use_color_1.useColor)(e).fill,v=getHtml(e,{fontFamily:p,color:b}),{width:y,height:w}=useHtmlSize(v,e,m);react_1.default.useEffect((()=>{if(!m)return;if(!e.height)return void e.set({height:w});const{textOverflow:i}=flags_1.flags;if("change-font-size"!==i||a)"resize"===i&&(g&&e.height<w&&t.history.ignore((()=>{e.set({height:w})})),g||e.height===w||t.history.ignore((()=>{e.set({height:w})})));else{const i=findFitFontSize(e);i!==e.fontSize?t.history.ignore((()=>{e.set({fontSize:i})})):e.height!==w&&(g&&e.height<w?t.history.ignore((()=>{e.set({height:w})})):g||t.history.ignore((()=>{e.set({height:w})})))}}));const k=react_1.default.useRef(0);react_1.default.useEffect((()=>{a||x||(async()=>{k.current++;const i=k.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:v,width:e.width||1,height:e.height||w||1,fontFamily:p,padding:h,pixelRatio:t._elementsPixelRatio,font:t.fonts.find((e=>e.fontFamily===p))||fonts.globalFonts.find((e=>e.fontFamily===p))}),i!==k.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()})()}),[v,a,w,x,p,e.height,t._elementsPixelRatio]);const S=a||l;react_1.default.useEffect((()=>mobx.autorun((()=>{const t=i.current;(0,apply_filters_1.applyFilter)(t,e)}))),[r,S,e.shadowColor,e.shadowOffsetX,e.shadowOffsetY,e.shadowOpacity]);let E=0;"middle"===e.verticalAlign&&(E=(e.height-w)/2),"bottom"===e.verticalAlign&&(E=e.height-w);const z=(0,text_element_1.getLineHeight)({fontLoaded:m,fontFamily:e.fontFamily,fontSize:e.fontSize,lineHeight:e.lineHeight}),q=(0,screen_1.isTouchDevice)();return react_1.default.createElement(react_1.default.Fragment,null,react_1.default.createElement(react_konva_1.Rect,{x:e.a.x,y:e.a.y,offsetX:e.backgroundPadding*(e.fontSize*z*.5),offsetY:e.backgroundPadding*(e.fontSize*z*.5),rotation:e.a.rotation,hideInExport:!e.showInExport,listening:!1,visible:e.backgroundEnabled,opacity:e.backgroundOpacity*e.a.opacity,fill:e.backgroundColor,width:e.a.width+e.backgroundPadding*(e.fontSize*z),height:e.a.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.a.x,y:e.a.y,listening:e.selectable,rotation:e.a.rotation,width:e.a.width,height:e.a.height,visible:!S,draggable:q?e.draggable&&u:e.draggable,preventDefault:!q||u,opacity:x?0:e.a.opacity,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()})},id:e.id,onDblClick:()=>{e.contentEditable&&e.toggleEditMode(!0)},onDblTap:()=>{e.contentEditable&&e.toggleEditMode(!0)},onTransformStart:t=>{o(!0),f.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(w,f.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?w: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(),shadowBlur:e.shadowBlur*i,shadowOffsetX:e.shadowOffsetX*i,shadowOffsetY:e.shadowOffsetY*i,strokeWidth:e.strokeWidth*i})}}),react_1.default.createElement(react_konva_1.Image,{ref:i,image:r,x:e.a.x,y:e.a.y,offsetX:h,offsetY:h-E,listening:!1,rotation:e.rotation,width:e.a.width+2*h,height:e.a.height+2*h,visible:!S,opacity:x?0:e.a.opacity,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,hideInExport:!e.showInExport}),S&&react_1.default.createElement(react_konva_1.Group,{x:e.a.x,y:e.a.y,rotation:e.rotation,offsetY:-E},react_1.default.createElement(react_konva_utils_1.Html,{divProps:{style:{pointerEvents:"none"}}},react_1.default.createElement(RichTextContainer,{dangerouslySetInnerHTML:{__html:v},style:{pointerEvents:"none",display:"inline-block"}}))),x&&react_1.default.createElement(react_konva_1.Group,{x:e.a.x,y:e.a.y,rotation:e.rotation,offsetY:-E},react_1.default.createElement(react_konva_utils_1.Html,null,react_1.default.createElement(RichEditor,{html:v,element:e,onChange:t=>{const i=(0,max_font_size_1.getLimitedFontSize)({oldText:(0,text_1.removeTags)(e.text),newText:(0,text_1.removeTags)(t),element:e});e.set({text:t,fontSize:i})},onBlur:t=>{e.toggleEditMode(!1)}}))),(u||c)&&react_1.default.createElement(highlighter_1.Highlighter,{element:e}))}));

package/model/shape-model.js CHANGED Viewed

	@@ -1 +1 @@
1	- "use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.Shape=exports.Animation=void 0;const mobx_state_tree_1=require("mobx-state-tree"),animations_1=require("../utils/animations"),mobx_1=require("mobx"),node_model_1=require("./node-model");exports.Animation=mobx_state_tree_1.types.model("Animation",{delay:0,duration:500,enabled:!0,type:mobx_state_tree_1.types.enumeration("Type",["enter","exit","loop"]),name:"none",data:mobx_state_tree_1.types.frozen({})}),exports.Shape=node_model_1.Node.named("Shape").props({x:0,y:0,width:100,height:100,rotation:0,opacity:1,animations:mobx_state_tree_1.types.array(exports.Animation),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=>{const t=Object.assign(Object.assign({},e),{x:e.x\|\|0,y:e.y\|\|0});return"width"in e&&(t.width=t.width\|\|1),"height"in e&&(t.height=t.height\|\|1),e.locked&&(t.draggable=!1,t.contentEditable=!1,t.styleEditable=!1,t.resizable=!1,t.removable=!1),t})).views((e=>{const t=(0,mobx_1.observable)({x:e.x,y:e.y,width:e.width,height:e.height,rotation:e.rotation,opacity:e.opacity,color:e.color,fontSize:e.fontSize}),a=(0,mobx_1.action)((e=>{Object.assign(t,e)}));return{get a(){const{currentTime:i}=e.store;if(a({x:e.x,y:e.y,width:e.width,height:e.height,rotation:e.rotation,opacity:e.opacity,color:e.color,fontSize:e.fontSize}),0===i)return t;const n=i-e.page.startTime;if(n>e.page.duration)return t;if(n<0)return t;const o=e.store.animatedElementsIds;if(o.length&&!o.includes(e.id))return t;const s=e.animations.find((e=>"enter"===e.type));(null==s?void 0:s.enabled)&&n<s.delay&&a({opacity:0});if((null==s?void 0:s.enabled)&&n>=s.delay&&n<=s.delay+s.duration){const t=n-s.delay,i=(0,animations_1.animate)({element:e,animation:s,dTime:t});a(i)}const r=e.animations.find((e=>"exit"===e.type));if((null==r?void 0:r.enabled)&&n>=e.page.duration-r.duration-r.delay&&n<=e.page.duration-r.delay){const t=n-(e.page.duration-r.duration),i=(0,animations_1.animate)({element:e,animation:r,dTime:t});a(i)}const d=e.animations.find((e=>"loop"===e.type));if(null==d?void 0:d.enabled){const t=n,i=(0,animations_1.animate)({element:e,animation:d,dTime:t});a(i)}return t},animated:t=>e.a[t]}})).actions((e=>({setAnimation(t,a){const i=e.animations.find((e=>e.type===t));i?Object.assign(i,a):e.animations.push(Object.assign({type:t},a))}})));
1	+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.Shape=exports.Animation=void 0;const mobx_state_tree_1=require("mobx-state-tree"),animations_1=require("../utils/animations"),mobx_1=require("mobx"),node_model_1=require("./node-model");exports.Animation=mobx_state_tree_1.types.model("Animation",{delay:0,duration:500,enabled:!0,type:mobx_state_tree_1.types.enumeration("Type",["enter","exit","loop"]),name:"none",data:mobx_state_tree_1.types.frozen({})}),exports.Shape=node_model_1.Node.named("Shape").props({x:0,y:0,width:100,height:100,rotation:0,opacity:1,animations:mobx_state_tree_1.types.array(exports.Animation),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=>{const t=Object.assign(Object.assign({},e),{x:e.x\|\|0,y:e.y\|\|0});return"width"in e&&(t.width=t.width\|\|1),"height"in e&&(t.height=t.height\|\|1),e.locked&&(t.draggable=!1,t.contentEditable=!1,t.styleEditable=!1,t.resizable=!1,t.removable=!1),t})).views((e=>{const t=(0,mobx_1.observable)({x:e.x,y:e.y,width:e.width,height:e.height,rotation:e.rotation,opacity:e.opacity,color:e.color,fontSize:e.fontSize}),a=(0,mobx_1.action)((e=>{Object.assign(t,e)}));return{get a(){const{currentTime:i}=e.store;if(a({x:e.x,y:e.y,width:e.width,height:e.height,rotation:e.rotation,opacity:e.opacity,color:e.color,fontSize:e.fontSize}),0===i)return t;const n=i-e.page.startTime;if(n>e.page.duration)return t;if(n<0)return t;const o=e.store.animatedElementsIds;if(o.length&&!o.includes(e.id))return t;const s=e.animations.find((e=>"enter"===e.type));(null==s?void 0:s.enabled)&&n<s.delay&&a({opacity:0});if((null==s?void 0:s.enabled)&&n>=s.delay&&n<=s.delay+s.duration){const t=n-s.delay,i=(0,animations_1.animate)({element:e,animation:s,dTime:t});a(i)}const r=e.animations.find((e=>"exit"===e.type));if((null==r?void 0:r.enabled)&&n>=e.page.duration-r.duration-r.delay&&n<=e.page.duration-r.delay){const t=n-(e.page.duration-r.duration-r.delay),i=(0,animations_1.animate)({element:e,animation:r,dTime:t});a(i)}(null==r?void 0:r.enabled)&&n>=e.page.duration-r.delay&&a({opacity:0});const d=e.animations.find((e=>"loop"===e.type));if(null==d?void 0:d.enabled){const t=n,i=(0,animations_1.animate)({element:e,animation:d,dTime:t});a(i)}return t},animated:t=>e.a[t]}})).actions((e=>({setAnimation(t,a){const i=e.animations.find((e=>e.type===t));i?Object.assign(i,a):e.animations.push(Object.assign({type:t},a))}})));

package/package.json CHANGED Viewed

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

package/polotno.bundle.js CHANGED Viewed

@@ -86,7 +86,7 @@ For more info see: https://github.com/konvajs/react-konva/issues/194
       -moz-background-clip: text;
       -webkit-text-fill-color: transparent;
       -moz-text-fill-color: transparent;
-    `),`<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="${iK(iM(e.text))}">${e.text.replaceAll("\n","</br>")}</div>`}let aw=e=>{let t=e.fontSize;for(let n=1;n<50;n++){let{height:n}=an(ab({...e.toJSON(),fontSize:t},{fontFamily:e.fontFamily}));if(!(e.height&&n>e.height))break;t-=.5}return t},ax=/^((?!chrome|android).)*safari/i.test(navigator.userAgent),a_=j(({element:e,store:t})=>{let n=c(w).useRef(null),[r,i]=c(w).useState(),[o,a]=c(w).useState(!1),[l,s]=c(w).useState(!0),[u,d]=c(w).useState(!1),h=c(w).useRef(e.height),f=t.selectedElements.indexOf(e)>=0,p=e.fontSize/3,{textVerticalResizeEnabled:g}=iR,m=i0(e.fontFamily),[y]=iQ(t,e.fontFamily),b=e._editModeEnabled;ih(n);let _=y?e.fontFamily:m!==e.fontFamily?m:"Arial",E=ic(e).fill,S=ab(e,{fontFamily:_,color:E}),{width:C,height:O}=c(w).useMemo(()=>an(S),[S,e.width,y]);c(w).useEffect(()=>{if(!y)return;if(!e.height){e.set({height:O});return}let{textOverflow:n}=iR;if("change-font-size"!==n||o)"resize"!==n||(g&&e.height<O&&t.history.ignore(()=>{e.set({height:O})}),g||e.height===O||t.history.ignore(()=>{e.set({height:O})}));else{let n=aw(e);n!==e.fontSize?t.history.ignore(()=>{e.set({fontSize:n})}):e.height===O||(g&&e.height<O?t.history.ignore(()=>{e.set({height:O})}):g||t.history.ignore(()=>{e.set({height:O})}))}});let k=c(w).useRef(0),P=async()=>{k.current++;let n=k.current,r=iv(`text ${e.id}`);s(!0);let o=null,a=ax?5:1;for(let i=0;i<a;i++){if(o=await ar({html:S,width:e.width||1,height:e.height||O||1,fontFamily:_,padding:p,pixelRatio:t._elementsPixelRatio,font:t.fonts.find(e=>e.fontFamily===_)||iS.find(e=>e.fontFamily===_)}),n!==k.current){r();return}if(!function(e){let 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}(o)&&ax){await new Promise(e=>setTimeout(e,50*(i+1)));continue}}if(!o){r();return}i(o),s(!1),c(R).Util.requestAnimFrame(r)};c(w).useEffect(()=>{o||b||P()},[S,o,O,b,_,e.height,t._elementsPixelRatio]);let T=o||l;c(w).useEffect(()=>x.autorun(()=>{iD(n.current,e)}),[r,T,e.shadowColor,e.shadowOffsetX,e.shadowOffsetY,e.shadowOpacity]);let A=0;"middle"===e.verticalAlign&&(A=(e.height-O)/2),"bottom"===e.verticalAlign&&(A=e.height-O);let j=iJ({fontLoaded:y,fontFamily:e.fontFamily,fontSize:e.fontSize,lineHeight:e.lineHeight}),N=iH();return(0,v.jsxs)(c(w).Fragment,{children:[(0,v.jsx)(rX,{x:e.a.x,y:e.a.y,offsetX:e.backgroundPadding*(e.fontSize*j*.5),offsetY:e.backgroundPadding*(e.fontSize*j*.5),rotation:e.a.rotation,hideInExport:!e.showInExport,listening:!1,visible:e.backgroundEnabled,opacity:e.backgroundOpacity*e.a.opacity,fill:e.backgroundColor,width:e.a.width+e.backgroundPadding*(e.fontSize*j),height:e.a.height+e.backgroundPadding*(e.fontSize*j),cornerRadius:e.backgroundCornerRadius*(e.fontSize*j*.5)}),(0,v.jsx)(rX,{ref:n,name:"element",x:e.a.x,y:e.a.y,listening:e.selectable,rotation:e.a.rotation,width:e.a.width,height:e.a.height,visible:!T,draggable:N?e.draggable&&f:e.draggable,preventDefault:!N||f,opacity:b?0:e.a.opacity,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()})},id:e.id,onDblClick:()=>{e.contentEditable&&e.toggleEditMode(!0)},onDblTap:()=>{e.contentEditable&&e.toggleEditMode(!0)},onTransformStart:t=>{a(!0),h.current=e.height},onTransform:t=>{let n=t.target,r=(n.getStage()?.findOne("Transformer")).getActiveAnchor(),i=n.scaleX();if("middle-left"===r||"middle-right"===r){let t=n.scaleX(),r=Math.max(n.width()*t,e.fontSize);if(n.width(r),n.scaleX(1),iR.textVerticalResizeEnabled){let t=Math.max(O,h.current);e.set({height:t})}e.set({width:r,x:n.x(),y:n.y()})}else if("top-center"===r||"bottom-center"===r){let r=Math.max("resize"===iR.textOverflow?O:e.lineHeight*e.fontSize,t.target.height()*t.target.scaleY());n.scaleY(1),e.set({x:n.x(),y:n.y(),height:r,rotation:n.rotation()})}else n.scaleX(1),n.scaleY(1),e.set({fontSize:e.fontSize*i,width:n.width()*i,x:n.x(),y:n.y(),rotation:n.rotation(),height:n.height()*i})},onTransformEnd:t=>{a(!1),s(!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(),shadowBlur:e.shadowBlur*n,shadowOffsetX:e.shadowOffsetX*n,shadowOffsetY:e.shadowOffsetY*n,strokeWidth:e.strokeWidth*n})}}),(0,v.jsx)(rQ,{ref:n,image:r,x:e.a.x,y:e.a.y,offsetX:p,offsetY:p-A,listening:!1,rotation:e.rotation,width:e.a.width+2*p,height:e.a.height+2*p,visible:!T,opacity:b?0:e.a.opacity,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,hideInExport:!e.showInExport}),T&&(0,v.jsx)(rK,{x:e.a.x,y:e.a.y,rotation:e.rotation,offsetY:-A,children:(0,v.jsx)(r8,{divProps:{style:{pointerEvents:"none"}},children:(0,v.jsx)(am,{dangerouslySetInnerHTML:{__html:S},style:{pointerEvents:"none",display:"inline-block"}})})}),b&&(0,v.jsx)(rK,{x:e.a.x,y:e.a.y,rotation:e.rotation,offsetY:-A,children:(0,v.jsx)(r8,{children:(0,v.jsx)(ay,{html:S,element:e,onChange:t=>{let n=iG({oldText:iM(e.text),newText:iM(t),element:e});e.set({text:t,fontSize:n})},onBlur:t=>{e.toggleEditMode(!1)}})})}),(f||u)&&(0,v.jsx)(iz,{element:e})]})});var w=(g("8NFma"),g("8NFma"));function aE(e){return e/180*Math.PI}function aS(e,t,n,r,i){let o=Math.sqrt(n*n+r*r);return{x:e+o*Math.cos(i+=Math.atan2(r,n)),y:t+o*Math.sin(i)}}function aC(e){let{x:t,y:n,width:r,height:i}=e,o=aE(e.rotation),a=aS(t,n,0,0,o),l=aS(t,n,r,0,o),s=aS(t,n,r,i,o),u=aS(t,n,0,i,o),c=Math.min(a.x,l.x,s.x,u.x),d=Math.min(a.y,l.y,s.y,u.y),h=Math.max(a.x,l.x,s.x,u.x),f=Math.max(a.y,l.y,s.y,u.y);return{x:c,y:d,width:h-c,height:f-d,minX:c,minY:d,maxX:h,maxY:f}}function aO(e){let t=e.map(e=>aC(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}}function ak(e,t){var n=[],r=[];e.vertical.forEach(e=>{t.vertical.forEach(t=>{var r=Math.abs(e-t.guide);r<5&&n.push({lineGuide:e,diff:r,snap:t.snap,offset:t.offset})})}),e.horizontal.forEach(e=>{t.horizontal.forEach(t=>{var n=Math.abs(e-t.guide);n<5&&r.push({lineGuide:e,diff:n,snap:t.snap,offset:t.offset})})});var i=[];let o=n.sort((e,t)=>e.diff-t.diff),a=r.sort((e,t)=>e.diff-t.diff);var l=o[0],s=a[0];return l&&o.filter(e=>.1>Math.abs(e.diff-l.diff)).forEach(e=>{i.push({orientation:"V",...e})}),s&&a.filter(e=>.1>Math.abs(e.diff-s.diff)).forEach(e=>{i.push({orientation:"H",...e})}),i}function aP(e,t,n){let r=e=>e.hasName("element")||e.hasName("line-anchor")||e.hasName("page-background")||e.hasName("elements-area"),i=n=>{n.target.getLayer().children.find(e=>"line-guides"===e.name()).destroyChildren();var i,o=ak(function(t){let n=e.current?.getStage();var i=[],o=[];return n.find(r).forEach(e=>{if(!(t.indexOf(e)>=0)){var n=e.getClientRect({skipShadow:!0,skipStroke:!0});e.hasName("line-anchor")&&(n={x:e.absolutePosition().x,y:e.absolutePosition().y,width:0,height:0}),i.push(n.x,n.x+n.width,n.x+n.width/2),o.push(n.y,n.y+n.height,n.y+n.height/2)}}),{vertical:i,horizontal:o}}([n.target,...t.map(e=>e.current)]),{vertical:[{guide:(i=n.target).absolutePosition().x,offset:0,snap:"center"}],horizontal:[{guide:i.absolutePosition().y,offset:0,snap:"center"}]});if(!o.length)return;!function(t){let n=e.current?.getLayer(),r=n?.children.find(e=>"line-guides"===e.name());t.forEach(e=>{if("H"===e.orientation){var t=new(c(R)).Line({points:[-6e3,e.lineGuide,6e3,e.lineGuide],stroke:"rgb(0, 161, 255)",strokeWidth:1,name:"guid-line",dash:[4,6]});r?.add(t),n.batchDraw()}else if("V"===e.orientation){var t=new(c(R)).Line({points:[e.lineGuide,-6e3,e.lineGuide,6e3],stroke:"rgb(0, 161, 255)",strokeWidth:1,name:"guid-line",dash:[4,6]});r?.add(t)}})}(o);let a=n.target.getAbsolutePosition(),l={...a};o.forEach(e=>{switch(e.snap){case"start":case"center":case"end":switch(e.orientation){case"V":l.x=e.lineGuide+e.offset;break;case"H":l.y=e.lineGuide+e.offset}}});let s=l.x-a.x,u=l.y-a.y;if(!(n.evt.ctrlKey||n.evt.metaKey)){let e=n.target.getAbsolutePosition();n.target.absolutePosition({x:e.x+s,y:e.y+u})}},o=e=>{if(!e.target)return;let t=e.target.getLayer();t.children.find(e=>"line-guides"===e.name()).destroyChildren(),t.batchDraw()};c(w).useEffect(()=>{e.current&&(e.current.on("dragmove",i),e.current.on("dragend",o))},n)}function aT(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 aA(e,t,n){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;return{x:e.x+Math.cos(i-Math.PI/2)*n/2,y:e.y+Math.sin(i-Math.PI/2)*n/2,width:r,height:n,rotation:o}}let aj=(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()}}),aN=j(({element:e,type:t})=>{let n=ic(e,e.a.color,"fill"),r=ic(e,e.a.color,"stroke"),i={strokeWidth:e.height,lineCap:"round",lineJoin:"round",...r,...n,opacity:e.a.opacity,hideInExport:!e.showInExport};return(0,v.jsxs)(v.Fragment,{children:["arrow"===t&&(0,v.jsx)(rZ,{points:[3*e.height,-(2*e.height),0,0,3*e.height,2*e.height],...i}),"triangle"===t&&(0,v.jsx)(rZ,{points:[3*e.height,-(2*e.height),0,0,3*e.height,2*e.height],closed:!0,...i}),"bar"===t&&(0,v.jsx)(rZ,{points:[0,-(2*e.height),0,2*e.height],closed:!0,...i}),"square"===t&&(0,v.jsx)(rZ,{points:[0,-(2*e.height),4*e.height,-(2*e.height),4*e.height,2*e.height,0,2*e.height],closed:!0,...i}),"circle"===t&&(0,v.jsx)("Circle",{x:2*e.height,y:0,radius:2*e.height,...i})]})}),aR=j(({element:e,store:t})=>{let n=c(w).useRef(null),r=c(w).useRef(null),i=c(w).useRef(null),o=e.selectable||"admin"===t.role,a=iH(),[l,s]=c(w).useState(!1),u=t.selectedElements.indexOf(e)>=0&&1===t.selectedElements.length,{middleLeft:d,middleRight:h}=aT(e);aP(r,[n],[u]),aP(i,[n],[u]);let f=ic(e,e.a.color,"stroke");return(0,v.jsxs)(c(w).Fragment,{children:[(0,v.jsx)(rZ,{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),...f,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&&u:e.draggable,preventDefault:!a||u,hideInExport:!e.showInExport,onMouseEnter:()=>{s(!0)},onMouseLeave:()=>{s(!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()})}}),(0,v.jsx)(rK,{x:d.x,y:d.y,rotation:e.rotation,hideInExport:!e.showInExport,children:(0,v.jsx)(aN,{element:e,type:e.startHead})}),(0,v.jsx)(rK,{x:h.x,y:h.y,rotation:e.rotation+180,children:(0,v.jsx)(aN,{element:e,type:e.endHead})}),l&&!u&&(0,v.jsx)(iz,{element:e}),u&&e.resizable&&(0,v.jsx)(r9,{selector:".page-abs-container",enabled:!0,children:(0,v.jsxs)(rK,{visible:u,children:[(0,v.jsx)(rX,{x:d.x,y:d.y,ref:r,name:"line-anchor",...aj(t.scale,t),onDragMove:t=>{let n=aA(t.target.position(),h,e.height);e.set({x:n.x,y:n.y,width:n.width,rotation:n.rotation})}}),(0,v.jsx)(rX,{x:h.x,y:h.y,ref:i,name:"line-anchor",...aj(t.scale,t),onDragMove:t=>{let n=aA(d,t.target.position(),e.height);e.set({x:n.x,y:n.y,width:n.width,rotation:n.rotation})}})]})})]})});var w=g("8NFma"),x=g("2SBKn");function aL(){return document.createElement("canvas")}async function aI(e){return e.indexOf("data:image/svg+xml")>=0||e.indexOf(".svg")>=0?i8(i7(await i6(e))):e}let aM=e=>{let[t,n]=c(w).useState(e);return c(w).useEffect(()=>{(async()=>{let r=await aI(e);r!==t&&n(r)})()},[e]),t},aD=new window.Image;aD.src=i8(`
+    `),`<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}; paint-order: stroke fill;"  contentEditable dir="${iK(iM(e.text))}">${e.text.replaceAll("\n","</br>")}</div>`}let aw=e=>{let t=e.fontSize;for(let n=1;n<50;n++){let n=ab({...e.toJSON(),fontSize:t},{fontFamily:e.fontFamily}),{height:r}=an(n),i=e.height&&r>e.height,o=function({html:e}){let t=document.createElement("div");t.innerHTML=e,t.style.display="inline-block",t.style.position="fixed",t.style.top="0px",t.style.left="0px",t.style.zIndex="1000";let n=at();n.appendChild(t);let r=t.cloneNode(!0);r.style.visibility="hidden",r.style.whiteSpace="nowrap",n.appendChild(r);let i=r.scrollWidth>t.clientWidth;return n.removeChild(r),n.removeChild(t),i}({html:n});if(!(i||o))break;t-=.5}return t},ax=/^((?!chrome|android).)*safari/i.test(navigator.userAgent),a_=j(({element:e,store:t})=>{let n=c(w).useRef(null),[r,i]=c(w).useState(),[o,a]=c(w).useState(!1),[l,s]=c(w).useState(!0),[u,d]=c(w).useState(!1),h=c(w).useRef(e.height),f=t.selectedElements.indexOf(e)>=0,p=e.fontSize/3,{textVerticalResizeEnabled:g}=iR,m=i0(e.fontFamily),[y]=iQ(t,e.fontFamily),b=e._editModeEnabled;ih(n);let _=y?e.fontFamily:m!==e.fontFamily?m:"Arial",E=ic(e).fill,S=ab(e,{fontFamily:_,color:E}),{width:C,height:O}=c(w).useMemo(()=>an(S),[S,e.width,y]);c(w).useEffect(()=>{if(!y)return;if(!e.height){e.set({height:O});return}let{textOverflow:n}=iR;if("change-font-size"!==n||o)"resize"!==n||(g&&e.height<O&&t.history.ignore(()=>{e.set({height:O})}),g||e.height===O||t.history.ignore(()=>{e.set({height:O})}));else{let n=aw(e);n!==e.fontSize?t.history.ignore(()=>{e.set({fontSize:n})}):e.height===O||(g&&e.height<O?t.history.ignore(()=>{e.set({height:O})}):g||t.history.ignore(()=>{e.set({height:O})}))}});let k=c(w).useRef(0),P=async()=>{k.current++;let n=k.current,r=iv(`text ${e.id}`);s(!0);let o=null,a=ax?5:1;for(let i=0;i<a;i++){if(o=await ar({html:S,width:e.width||1,height:e.height||O||1,fontFamily:_,padding:p,pixelRatio:t._elementsPixelRatio,font:t.fonts.find(e=>e.fontFamily===_)||iS.find(e=>e.fontFamily===_)}),n!==k.current){r();return}if(!function(e){let 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}(o)&&ax){await new Promise(e=>setTimeout(e,50*(i+1)));continue}}if(!o){r();return}i(o),s(!1),c(R).Util.requestAnimFrame(r)};c(w).useEffect(()=>{o||b||P()},[S,o,O,b,_,e.height,t._elementsPixelRatio]);let T=o||l;c(w).useEffect(()=>x.autorun(()=>{iD(n.current,e)}),[r,T,e.shadowColor,e.shadowOffsetX,e.shadowOffsetY,e.shadowOpacity]);let A=0;"middle"===e.verticalAlign&&(A=(e.height-O)/2),"bottom"===e.verticalAlign&&(A=e.height-O);let j=iJ({fontLoaded:y,fontFamily:e.fontFamily,fontSize:e.fontSize,lineHeight:e.lineHeight}),N=iH();return(0,v.jsxs)(c(w).Fragment,{children:[(0,v.jsx)(rX,{x:e.a.x,y:e.a.y,offsetX:e.backgroundPadding*(e.fontSize*j*.5),offsetY:e.backgroundPadding*(e.fontSize*j*.5),rotation:e.a.rotation,hideInExport:!e.showInExport,listening:!1,visible:e.backgroundEnabled,opacity:e.backgroundOpacity*e.a.opacity,fill:e.backgroundColor,width:e.a.width+e.backgroundPadding*(e.fontSize*j),height:e.a.height+e.backgroundPadding*(e.fontSize*j),cornerRadius:e.backgroundCornerRadius*(e.fontSize*j*.5)}),(0,v.jsx)(rX,{ref:n,name:"element",x:e.a.x,y:e.a.y,listening:e.selectable,rotation:e.a.rotation,width:e.a.width,height:e.a.height,visible:!T,draggable:N?e.draggable&&f:e.draggable,preventDefault:!N||f,opacity:b?0:e.a.opacity,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()})},id:e.id,onDblClick:()=>{e.contentEditable&&e.toggleEditMode(!0)},onDblTap:()=>{e.contentEditable&&e.toggleEditMode(!0)},onTransformStart:t=>{a(!0),h.current=e.height},onTransform:t=>{let n=t.target,r=(n.getStage()?.findOne("Transformer")).getActiveAnchor(),i=n.scaleX();if("middle-left"===r||"middle-right"===r){let t=n.scaleX(),r=Math.max(n.width()*t,e.fontSize);if(n.width(r),n.scaleX(1),iR.textVerticalResizeEnabled){let t=Math.max(O,h.current);e.set({height:t})}e.set({width:r,x:n.x(),y:n.y()})}else if("top-center"===r||"bottom-center"===r){let r=Math.max("resize"===iR.textOverflow?O:e.lineHeight*e.fontSize,t.target.height()*t.target.scaleY());n.scaleY(1),e.set({x:n.x(),y:n.y(),height:r,rotation:n.rotation()})}else n.scaleX(1),n.scaleY(1),e.set({fontSize:e.fontSize*i,width:n.width()*i,x:n.x(),y:n.y(),rotation:n.rotation(),height:n.height()*i})},onTransformEnd:t=>{a(!1),s(!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(),shadowBlur:e.shadowBlur*n,shadowOffsetX:e.shadowOffsetX*n,shadowOffsetY:e.shadowOffsetY*n,strokeWidth:e.strokeWidth*n})}}),(0,v.jsx)(rQ,{ref:n,image:r,x:e.a.x,y:e.a.y,offsetX:p,offsetY:p-A,listening:!1,rotation:e.rotation,width:e.a.width+2*p,height:e.a.height+2*p,visible:!T,opacity:b?0:e.a.opacity,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,hideInExport:!e.showInExport}),T&&(0,v.jsx)(rK,{x:e.a.x,y:e.a.y,rotation:e.rotation,offsetY:-A,children:(0,v.jsx)(r8,{divProps:{style:{pointerEvents:"none"}},children:(0,v.jsx)(am,{dangerouslySetInnerHTML:{__html:S},style:{pointerEvents:"none",display:"inline-block"}})})}),b&&(0,v.jsx)(rK,{x:e.a.x,y:e.a.y,rotation:e.rotation,offsetY:-A,children:(0,v.jsx)(r8,{children:(0,v.jsx)(ay,{html:S,element:e,onChange:t=>{let n=iG({oldText:iM(e.text),newText:iM(t),element:e});e.set({text:t,fontSize:n})},onBlur:t=>{e.toggleEditMode(!1)}})})}),(f||u)&&(0,v.jsx)(iz,{element:e})]})});var w=(g("8NFma"),g("8NFma"));function aE(e){return e/180*Math.PI}function aS(e,t,n,r,i){let o=Math.sqrt(n*n+r*r);return{x:e+o*Math.cos(i+=Math.atan2(r,n)),y:t+o*Math.sin(i)}}function aC(e){let{x:t,y:n,width:r,height:i}=e,o=aE(e.rotation),a=aS(t,n,0,0,o),l=aS(t,n,r,0,o),s=aS(t,n,r,i,o),u=aS(t,n,0,i,o),c=Math.min(a.x,l.x,s.x,u.x),d=Math.min(a.y,l.y,s.y,u.y),h=Math.max(a.x,l.x,s.x,u.x),f=Math.max(a.y,l.y,s.y,u.y);return{x:c,y:d,width:h-c,height:f-d,minX:c,minY:d,maxX:h,maxY:f}}function aO(e){let t=e.map(e=>aC(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}}function ak(e,t){var n=[],r=[];e.vertical.forEach(e=>{t.vertical.forEach(t=>{var r=Math.abs(e-t.guide);r<5&&n.push({lineGuide:e,diff:r,snap:t.snap,offset:t.offset})})}),e.horizontal.forEach(e=>{t.horizontal.forEach(t=>{var n=Math.abs(e-t.guide);n<5&&r.push({lineGuide:e,diff:n,snap:t.snap,offset:t.offset})})});var i=[];let o=n.sort((e,t)=>e.diff-t.diff),a=r.sort((e,t)=>e.diff-t.diff);var l=o[0],s=a[0];return l&&o.filter(e=>.1>Math.abs(e.diff-l.diff)).forEach(e=>{i.push({orientation:"V",...e})}),s&&a.filter(e=>.1>Math.abs(e.diff-s.diff)).forEach(e=>{i.push({orientation:"H",...e})}),i}function aP(e,t,n){let r=e=>e.hasName("element")||e.hasName("line-anchor")||e.hasName("page-background")||e.hasName("elements-area"),i=n=>{n.target.getLayer().children.find(e=>"line-guides"===e.name()).destroyChildren();var i,o=ak(function(t){let n=e.current?.getStage();var i=[],o=[];return n.find(r).forEach(e=>{if(!(t.indexOf(e)>=0)){var n=e.getClientRect({skipShadow:!0,skipStroke:!0});e.hasName("line-anchor")&&(n={x:e.absolutePosition().x,y:e.absolutePosition().y,width:0,height:0}),i.push(n.x,n.x+n.width,n.x+n.width/2),o.push(n.y,n.y+n.height,n.y+n.height/2)}}),{vertical:i,horizontal:o}}([n.target,...t.map(e=>e.current)]),{vertical:[{guide:(i=n.target).absolutePosition().x,offset:0,snap:"center"}],horizontal:[{guide:i.absolutePosition().y,offset:0,snap:"center"}]});if(!o.length)return;!function(t){let n=e.current?.getLayer(),r=n?.children.find(e=>"line-guides"===e.name());t.forEach(e=>{if("H"===e.orientation){var t=new(c(R)).Line({points:[-6e3,e.lineGuide,6e3,e.lineGuide],stroke:"rgb(0, 161, 255)",strokeWidth:1,name:"guid-line",dash:[4,6]});r?.add(t),n.batchDraw()}else if("V"===e.orientation){var t=new(c(R)).Line({points:[e.lineGuide,-6e3,e.lineGuide,6e3],stroke:"rgb(0, 161, 255)",strokeWidth:1,name:"guid-line",dash:[4,6]});r?.add(t)}})}(o);let a=n.target.getAbsolutePosition(),l={...a};o.forEach(e=>{switch(e.snap){case"start":case"center":case"end":switch(e.orientation){case"V":l.x=e.lineGuide+e.offset;break;case"H":l.y=e.lineGuide+e.offset}}});let s=l.x-a.x,u=l.y-a.y;if(!(n.evt.ctrlKey||n.evt.metaKey)){let e=n.target.getAbsolutePosition();n.target.absolutePosition({x:e.x+s,y:e.y+u})}},o=e=>{if(!e.target)return;let t=e.target.getLayer();t.children.find(e=>"line-guides"===e.name()).destroyChildren(),t.batchDraw()};c(w).useEffect(()=>{e.current&&(e.current.on("dragmove",i),e.current.on("dragend",o))},n)}function aT(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 aA(e,t,n){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;return{x:e.x+Math.cos(i-Math.PI/2)*n/2,y:e.y+Math.sin(i-Math.PI/2)*n/2,width:r,height:n,rotation:o}}let aj=(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()}}),aN=j(({element:e,type:t})=>{let n=ic(e,e.a.color,"fill"),r=ic(e,e.a.color,"stroke"),i={strokeWidth:e.height,lineCap:"round",lineJoin:"round",...r,...n,opacity:e.a.opacity,hideInExport:!e.showInExport};return(0,v.jsxs)(v.Fragment,{children:["arrow"===t&&(0,v.jsx)(rZ,{points:[3*e.height,-(2*e.height),0,0,3*e.height,2*e.height],...i}),"triangle"===t&&(0,v.jsx)(rZ,{points:[3*e.height,-(2*e.height),0,0,3*e.height,2*e.height],closed:!0,...i}),"bar"===t&&(0,v.jsx)(rZ,{points:[0,-(2*e.height),0,2*e.height],closed:!0,...i}),"square"===t&&(0,v.jsx)(rZ,{points:[0,-(2*e.height),4*e.height,-(2*e.height),4*e.height,2*e.height,0,2*e.height],closed:!0,...i}),"circle"===t&&(0,v.jsx)("Circle",{x:2*e.height,y:0,radius:2*e.height,...i})]})}),aR=j(({element:e,store:t})=>{let n=c(w).useRef(null),r=c(w).useRef(null),i=c(w).useRef(null),o=e.selectable||"admin"===t.role,a=iH(),[l,s]=c(w).useState(!1),u=t.selectedElements.indexOf(e)>=0&&1===t.selectedElements.length,{middleLeft:d,middleRight:h}=aT(e);aP(r,[n],[u]),aP(i,[n],[u]);let f=ic(e,e.a.color,"stroke");return(0,v.jsxs)(c(w).Fragment,{children:[(0,v.jsx)(rZ,{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),...f,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&&u:e.draggable,preventDefault:!a||u,hideInExport:!e.showInExport,onMouseEnter:()=>{s(!0)},onMouseLeave:()=>{s(!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()})}}),(0,v.jsx)(rK,{x:d.x,y:d.y,rotation:e.rotation,hideInExport:!e.showInExport,children:(0,v.jsx)(aN,{element:e,type:e.startHead})}),(0,v.jsx)(rK,{x:h.x,y:h.y,rotation:e.rotation+180,children:(0,v.jsx)(aN,{element:e,type:e.endHead})}),l&&!u&&(0,v.jsx)(iz,{element:e}),u&&e.resizable&&(0,v.jsx)(r9,{selector:".page-abs-container",enabled:!0,children:(0,v.jsxs)(rK,{visible:u,children:[(0,v.jsx)(rX,{x:d.x,y:d.y,ref:r,name:"line-anchor",...aj(t.scale,t),onDragMove:t=>{let n=aA(t.target.position(),h,e.height);e.set({x:n.x,y:n.y,width:n.width,rotation:n.rotation})}}),(0,v.jsx)(rX,{x:h.x,y:h.y,ref:i,name:"line-anchor",...aj(t.scale,t),onDragMove:t=>{let n=aA(d,t.target.position(),e.height);e.set({x:n.x,y:n.y,width:n.width,rotation:n.rotation})}})]})})]})});var w=g("8NFma"),x=g("2SBKn");function aL(){return document.createElement("canvas")}async function aI(e){return e.indexOf("data:image/svg+xml")>=0||e.indexOf(".svg")>=0?i8(i7(await i6(e))):e}let aM=e=>{let[t,n]=c(w).useState(e);return c(w).useEffect(()=>{(async()=>{let r=await aI(e);r!==t&&n(r)})()},[e]),t},aD=new window.Image;aD.src=i8(`
   <svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
   <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"/>
   <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"/>
@@ -112,7 +112,7 @@ For more info see: https://github.com/konvajs/react-konva/issues/194
   <!-- Path for the stroke, clipped by the star path -->
   <path d="${u}" fill="none" stroke="${o}" stroke-width="${2*a}" clip-path="url(#${h})" transform="scale(${c}, ${d})" stroke-dasharray="${s.join(" ")}"/>
     </svg>
-  `}(e,n):(console.error(`Polotno error: Can not convert ${e.subType} figure to svg.`),a$(e))}let aZ=e=>j(({element:t,fillProps:n,strokeProps:r})=>{let i=e({width:t.a.width,height:t.a.height,cornerRadius:t.cornerRadius}),o=1,a=1;"string"!=typeof i&&(o=i.scaleX,a=i.scaleY,i=i.path);let l=c(w).useRef(null);return(0,v.jsxs)(v.Fragment,{children:[(0,v.jsx)(rX,{width:t.width,height:t.height,fill:"transparent"}),(0,v.jsx)(r0,{...n,ref:l,data:i,scaleX:o,scaleY:a}),(0,v.jsx)(rK,{clipFunc:e=>{let t=l.current;if(t){var n=t.dataArray;e.beginPath();for(var r=0;r<n.length;r++){var i=n[r].command,o=n[r].points;switch(i){case"L":e.lineTo(o[0],o[1]);break;case"M":e.moveTo(o[0],o[1]);break;case"C":e.bezierCurveTo(o[0],o[1],o[2],o[3],o[4],o[5]);break;case"Q":e.quadraticCurveTo(o[0],o[1],o[2],o[3]);break;case"A":var a=o[0],s=o[1],u=o[2],c=o[3],d=o[4],h=o[5],f=o[6],p=o[7],g=u>c?u:c,m=u>c?1:u/c,v=u>c?c/u:1;e.translate(a,s),e.rotate(f),e.scale(m,v),e.arc(0,0,g,d,d+h,1-p),e.scale(1/m,1/v),e.rotate(-f),e.translate(-a,-s);break;case"z":e.closePath()}}}},scaleX:o,scaleY:a,children:(0,v.jsx)(r0,{...r,x:0,y:0,data:i,strokeWidth:2*r.strokeWidth,dash:r.dash.map(e=>e)})})]})}),aQ={},aJ=e=>(aQ[e]||(aQ[e]=aZ(aY[e]||a$)),aQ[e]),a0={text:i1,image:oy,svg:oy,line:aR,video:aW,figure:j(({element:e,store:t})=>{let n=e.selectable||"admin"===t.role,r=iH(),[i,o]=c(w).useState(!1),a=t.selectedElements.indexOf(e)>=0&&1===t.selectedElements.length,l=Math.min(e.strokeWidth,e.width/2,e.height/2),s=Math.max(0,Math.min(e.width/2,e.height/2,e.cornerRadius)),u=ic(e,e.a.fill,"fill"),d={width:e.a.width,height:e.a.height,...u,cornerRadius:s,opacity:e.animated("opacity"),shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,listening:n,preventDefault:!r||a,hideInExport:!e.showInExport},h=ic(e,e.stroke,"stroke"),f={visible:l>0,x:l/2,y:l/2,width:e.a.width-l,height:e.a.height-l,...h,strokeWidth:l,cornerRadius:Math.max(0,s-l),dash:e.dash.map(e=>e*l),opacity:e.animated("opacity"),hideInExport:!e.showInExport,listening:!1},p=aJ(e.subType)||rK;return(0,v.jsxs)(c(w).Fragment,{children:[(0,v.jsx)(rK,{id:e.id,x:e.a.x,y:e.a.y,rotation:e.a.rotation,opacity:e.a.opacity,draggable:r?e.draggable&&a:e.draggable,name:"element",onMouseEnter:()=>{o(!0)},onMouseLeave:()=>{o(!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.scale();t.target.scaleX(1),t.target.scaleY(1),e.set({width:e.width*n.x,height:e.height*n.y,x:t.target.x(),y:t.target.y(),rotation:t.target.rotation()})},children:(0,v.jsx)(p,{element:e,fillProps:d,strokeProps:f})}),i&&!a&&(0,v.jsx)(iz,{element:e})]})}),group:j(e=>{let{element:t,store:n}=e,{children:r}=t,i=t.selectable||"admin"===n.role;return(0,v.jsx)(rK,{opacity:t.opacity,listening:i,hideInExport:!t.showInExport,children:r.map(t=>(0,w.createElement)(a1,{...e,key:t.id,store:n,element:t}))})})},a1=j(e=>{let t=a0[e.element.type];return("text"===e.element.type&&iR.htmlRenderEnabled&&(t=a_),e.element.visible)?t?(0,v.jsx)(t,{...e}):(console.error("Can not find component for "+e.element.type),null):null});var x=g("2SBKn");let a2="https://api.polotno.com",a3=()=>a2+"/api",a5={},a4=(e,t,n)=>e.replace(RegExp(t,"g"),n),a6=({query:e,page:t=1})=>`${a3()}/get-unsplash?query=${e}&per_page=20&page=${t}&KEY=${ld()}`,a8=e=>`${a3()}/download-unsplash?id=${e}&KEY=${ld()}`,a9=({query:e,page:t=1})=>`${a3()}/get-nounproject?query=${e}&page=${t}&KEY=${ld()}`,a7=e=>`${a3()}/download-nounproject?id=${e}&KEY=${ld()}`,le=({query:e,page:t=1,sizeQuery:n})=>`${a3()}/get-templates?${n}&query=${e}&per_page=30&page=${t}&KEY=${ld()}`,lt=()=>`${a3()}/get-google-fonts?KEY=${ld()}`,ln=e=>`${a2}/google-fonts-previews/black/${a4(e," ","-")}.png`,lr=()=>`${a3()}/remove-image-background?KEY=${ld()}`,li=e=>le(e),lo=()=>`${a3()}/get-text-templates?KEY=${ld()}`,la=e=>a6(e),ll=e=>a8(e),ls=x.observable({value:!1}),lu=x.action(()=>{ls.value=!0}),lc="",ld=()=>lc||"",lh=window.location.origin,lf=navigator.userAgent.indexOf("Headless")>-1,lp=navigator.userAgent.indexOf("Electron")>-1;"file://"===lh&&lf&&(lh="headless"),"file://"===lh&&lp&&(lh="electron");let lg=`%cPolotno error! Current domain is not allowed. It may lead to unexpected behavior and stop working. Please add "${lh}" here: https://polotno.com/cabinet`;async function lm(e){for(let t=0;t<5;t++)try{let t=await fetch(a3()+"/validate-key",{method:"POST",body:JSON.stringify({key:e,site:location.host})});if(!e)return console.warn("Polotno API is initialized without API key. It may lead to unexpected behavior and stop working. Please create API key here: https://polotno.com/cabinet"),!1;if(200!==t.status){await new Promise(e=>setTimeout(e,3e3));continue}let n=await t.json();return n.is_valid||console.warn("Polotno API key is not valid. Please get new API key here: https://polotno.com/cabinet"),n.is_paid||console.log("%cPolotno Free Version. Development or non-commercial usage only. https://polotno.com/","background: rgb(0, 161, 255); color: white; padding: 5px; margin: 5px;"),n.is_domain_valid||console.log(lg,"background: rgba(247, 101, 68, 1); color: white; padding: 5px; margin: 5px;"),iL(n.remove_background_enabled),n.is_paid||!1}catch(e){await new Promise(e=>setTimeout(e,3e3))}return console.error("Can not validate Polotno API key. Please report to anton@polotno.com immediately."),!0}async function lv(e,t){lc=e,(!await lm(e)||t)&&lu()}let ly=({px:e,unit:t="px",dpi:n})=>{switch(t){case"pt":default:return e;case"mm":return e/(n/25.4);case"cm":return e/(n/2.54);case"in":return e/n}},lb=({px:e,precious:t=2,dpi:n=72,unit:r="px"})=>parseFloat(ly({px:e,dpi:n,unit:r}).toFixed(t)),lw=({unitVal:e,dpi:t,unit:n})=>e/ly({px:1,unit:n,dpi:t}),lx=e=>{let t=parseFloat(ly(e).toFixed(1));switch(e.unit){case"pt":return`${Math.round(t)}pt`;case"mm":return`${t}mm`;case"cm":return`${t}cm`;case"in":return`${t}in`;default:return`${Math.round(t)}px`}},l_=c(R).DD._drag;window.removeEventListener("mousemove",l_),c(R).DD._drag=function(e){(0,x.runInAction)(()=>{l_.call(this,e)})},window.addEventListener("mousemove",c(R).DD._drag);let lE=new(c(R)).Group;lE.add(new(c(R)).Rect({width:20,height:20,fill:"white"})),lE.add(new(c(R)).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"}));let lS=lE.toCanvas({pixelRatio:2,width:20,height:20}),lC={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=>{e.hasName("rotater")&&e.setAttrs({width:20,height:20,cornerRadius:10,offsetX:10,offsetY:10,fillPatternImage:lS,fillPatternScaleX:.5,fillPatternScaleY:.5,fillPriority:"pattern",fillPatternRepeat:"no-repeat"})}},lO={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"]}},lk=e=>(0,v.jsx)(rX,{...e,preventDefault:!1}),lP=({url:e,...t})=>{let[n,r]=c(r5)(e,"anonymous"),i=n?function(e,t,n="scale"){let r,i;let o=t.width/t.height;o>=e.width/e.height?(r=e.width,i=e.width/o):(r=e.height*o,i=e.height);let a=0,l=0;return"left-top"===n?(a=0,l=0):"left-middle"===n?(a=0,l=(e.height-i)/2):"left-bottom"===n?(a=0,l=e.height-i):"center-top"===n?(a=(e.width-r)/2,l=0):"center-middle"===n?(a=(e.width-r)/2,l=(e.height-i)/2):"center-bottom"===n?(a=(e.width-r)/2,l=e.height-i):"right-top"===n?(a=e.width-r,l=0):"right-middle"===n?(a=e.width-r,l=(e.height-i)/2):"right-bottom"===n?(a=e.width-r,l=e.height-i):"scale"===n?(a=0,l=0,r=e.width,i=e.height):console.error(Error("Unknown clip position property - "+n)),{cropX:a,cropY:l,cropWidth:r,cropHeight:i}}(n,{width:t.width,height:t.height},"center-middle"):{};return og(r,"background"),(0,v.jsx)(rQ,{image:n,...t,...i})},lT=e=>(0,v.jsx)(rX,{...e}),lA=e=>{let{background:t,scale:n,borderColor:r,...i}=e,o=c(w).useMemo(()=>!!c(R).Util.colorToRGBA(t),[t]),a=c(w).useMemo(()=>{let e=document.createElement("canvas");e.width=60,e.height=60;let t=e.getContext("2d");return t&&(t.fillStyle="black",t.fillRect(30,0,30,30),t.fillRect(0,30,30,30)),e},[]);return(0,v.jsxs)(c(w).Fragment,{children:[(0,v.jsx)(rX,{fillPatternImage:a,...i,opacity:.1,hideInExport:!0}),o?(0,v.jsx)(lT,{fill:t,...i}):(0,v.jsx)(lP,{url:t,...i})]})},lj=j(({selection:e})=>e.visible?(0,v.jsx)(rX,{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),lN=j(({x:e,y:t,width:n,height:r,rotation:i,anchor:o,store:a})=>{let l=aC({x:e,y:t,width:n,height:r,rotation:c(R).Util.radToDeg(i)});if(void 0===o)return null;let s=(r/2+70)*Math.cos(i-Math.PI/2),u=(r/2+70)*Math.sin(i-Math.PI/2),d=lb({unit:a.unit,dpi:a.dpi,px:n/a.scale,precious:"px"===a.unit?0:1})+" x "+lb({unit:a.unit,dpi:a.dpi,px:r/a.scale,precious:"px"===a.unit?0:1})+("px"===a.unit?"":" "+a.unit);return(0,v.jsxs)(v.Fragment,{children:[(0,v.jsxs)(rY,{x:(l.minX+l.maxX)/2+s,y:(l.minY+l.maxY)/2+u,offsetX:14,offsetY:14,visible:"rotater"===o,children:[(0,v.jsx)("Tag",{cornerRadius:5,fill:"rgb(0, 161, 255)"}),(0,v.jsx)(rJ,{align:"center",verticalAlign:"middle",fill:"white",padding:8,text:Math.round(c(R).Util.radToDeg(i)).toString()+"°"})]}),(0,v.jsxs)(rY,{x:(l.minX+l.maxX)/2,y:l.maxY+20,visible:"rotater"!==o,children:[(0,v.jsx)("Tag",{cornerRadius:5,fill:"rgb(0, 161, 255)",pointerDirection:"up",pointerHeight:0,pointerWidth:0}),(0,v.jsx)(rJ,{align:"center",verticalAlign:"middle",fill:"white",padding:8,text:d})]})]})}),lR=j(({elements:e,store:t})=>{let n=e.filter(e=>e.alwaysOnTop),r=e.filter(e=>!e.alwaysOnTop).concat(n);return(0,v.jsx)(c(w).Fragment,{children:r.map(e=>(0,v.jsx)(a1,{store:t,element:e,onClick:()=>{console.warn("Polotno warning: onClick callback is deprecated. Just stop using it. Polotno will do selection automatically.")}},e.id))})}),lL=null,lI=e=>{lL=e};var lM=j(({store:e,page:t,width:n,height:r,pageControlsEnabled:i,backColor:o,pageBorderColor:a,activePageBorderColor:l,components:s,bleedColor:u,altCloneEnabled:d})=>{var h;let f=e.bleedVisible?t.bleed:0,p=t.computedWidth+2*f,g=t.computedHeight+2*f,m=(n-p*e.scale)/2,y=(r-g*e.scale)/2,b=c(w).useRef(null),_=c(w).useRef(null),E=c(w).useRef(null),[S,C]=c(w).useState(null),[O,k]=c(w).useState({}),P=e.selectedElements.find(e=>e._cropModeEnabled),T=e.selectedShapes.filter(e=>!e.resizable).length>0,A=e.selectedShapes.filter(e=>!e.draggable).length>0,j=e.selectedElements.filter(e=>!e.visible).length>0;c(w).useLayoutEffect(()=>{if(!b.current)return;let t=b.current.getStage(),n=e.selectedShapes.map(e=>e._cropModeEnabled?null:t.findOne("#"+e.id)).filter(e=>e),r=1===e.selectedElements.length&&e.selectedElements[0]?.type||"many";lO[r]?(b.current.setAttrs({...lC,...lO[r]}),"svg"!==r&&"image"!==r||e.selectedElements[0].keepRatio||b.current.setAttrs({enabledAnchors:lC.enabledAnchors}),"text"===r&&iR.textVerticalResizeEnabled&&b.current.setAttrs({enabledAnchors:lO.text.enabledAnchors?.concat(["bottom-center"])})):b.current.setAttrs(lC),T&&b.current.enabledAnchors([]),A&&b.current.rotateEnabled(!1),n.find(e=>e?.isDragging())&&n.forEach(e=>{e.isDragging()||e?.startDrag()}),b.current.nodes(n),b.current.getLayer()?.batchDraw()},[e.selectedElements,P,T,j,A]);let N=(h=()=>({visible:!1,x1:0,y1:0,x2:0,y2:0}),(0,w.useState)(function(){return(0,x.observable)(h(),void 0,{autoBind:!0})})[0]),L=c(w).useRef(!1),I=iH(),M=(0,x.action)(e=>{if(I)return;L.current=!1;let t=e.target.findAncestor(".elements-container"),n=e.target.findAncestor("Transformer"),r=e.target.findAncestor(".page-abs-container");if(t||n||r)return;let i=e.target.getStage()?.getPointerPosition();i&&(N.visible=!0,N.x1=i.x,N.y1=i.y,N.x2=i.x,N.y2=i.y,e.target.getStage()?.getPointersPositions().length>=2&&(N.visible=!1))});c(w).useEffect(()=>{let t=(0,x.action)(e=>{if(!N.visible)return;_.current?.setPointersPositions(e);let t=_.current?.getPointerPosition()||{x:N.x2,y:N.y2};N.x2=t.x,N.y2=t.y}),n=(0,x.action)(()=>{if(!N.visible||!_.current)return;let t=_.current.findOne(".selection"),n=t?t.getClientRect():{width:0,height:0,x:0,y:0};if(n.width&&n.height){let t=[];_.current.find(".element").forEach(r=>{let i=r.getClientRect(),o=e.getElementById(r.id()),a=o?.draggable,l=o?.selectable;c(R).Util.haveIntersection(n,i)&&a&&l&&t.push(o.top.id)});let r=[...new Set(t)];e.selectElements(r)}N.visible=!1,L.current=!0});return window.addEventListener("mousemove",t),window.addEventListener("touchmove",t),window.addEventListener("mouseup",n),window.addEventListener("touchend",n),()=>{window.removeEventListener("mousemove",t),window.removeEventListener("touchmove",t),window.removeEventListener("mouseup",n),window.removeEventListener("touchend",n)}},[]);let D=n=>{if(e.activePage!==t&&t.select(),L.current)return;let r=n.evt.ctrlKey||n.evt.metaKey||n.evt.shiftKey,i=n.target.findAncestor(".elements-container"),o=n.target.findAncestor(".page-abs-container"),a=n.target.findAncestor("Transformer");if(!r&&!i&&!a&&!o){e.selectElements([]);return}let l=n.target.findAncestor(".element",!0),s=e.getElementById(l?.id()),u=s?.top,c=u?.id,d=e.selectedElementsIds.indexOf(c)>=0;c&&r&&!d?e.selectElements(e.selectedElementsIds.concat([c])):c&&r&&d?e.selectElements(e.selectedElementsIds.filter(e=>e!==c)):!c||r||d||e.selectElements([c])};!function(e,t){let n=c(w).useRef(),r=e=>e.hasName("element")||e.hasName("page-background")||!n.current&&e.hasName("elements-area");function i(t){let n=e.current?.getStage();var i=[],o=[];return n.find(r).forEach(e=>{if(!(t.indexOf(e)>=0)){var n=e.getClientRect({skipShadow:!0,skipStroke:!0});i.push(n.x,n.x+n.width,n.x+n.width/2),o.push(n.y,n.y+n.height,n.y+n.height/2)}}),{vertical:i,horizontal:o}}function o(t){let n=e.current?.getLayer(),r=n?.children.find(e=>"line-guides"===e.name());t.forEach(e=>{if("H"===e.orientation){var t=new(c(R)).Line({points:[-6e3,e.lineGuide,6e3,e.lineGuide],stroke:"rgb(0, 161, 255)",strokeWidth:1,name:"guid-line",dash:[4,6]});r?.add(t),n.batchDraw()}else if("V"===e.orientation){var t=new(c(R)).Line({points:[e.lineGuide,-6e3,e.lineGuide,6e3],stroke:"rgb(0, 161, 255)",strokeWidth:1,name:"guid-line",dash:[4,6]});r?.add(t)}})}let a=e=>{e.target.getLayer().children.find(e=>"line-guides"===e.name()).destroyChildren();var t=ak(i(e.target.nodes()),function(e){let t=e.__getNodeRect(),n=aC({...t,rotation:c(R).Util.radToDeg(t.rotation)}),r=e.getAbsolutePosition();return{vertical:[{guide:n.x,offset:r.x-n.x,snap:"start"},{guide:n.x+n.width/2,offset:r.x-n.x-n.width/2,snap:"center"},{guide:n.x+n.width,offset:r.x-n.x-n.width,snap:"end"}],horizontal:[{guide:n.y,offset:r.y-n.y,snap:"start"},{guide:n.y+n.height/2,offset:r.y-n.y-n.height/2,snap:"center"},{guide:n.y+n.height,offset:r.y-n.y-n.height,snap:"end"}]}}(e.target));if(!t.length)return;o(t);let n=e.target.getAbsolutePosition(),r={...n};t.forEach(e=>{switch(e.snap){case"start":case"center":case"end":switch(e.orientation){case"V":r.x=e.lineGuide+e.offset;break;case"H":r.y=e.lineGuide+e.offset}}});let a=r.x-n.x,l=r.y-n.y;e.evt.ctrlKey||e.evt.metaKey||e.target.nodes().forEach(e=>{let t=e.getAbsolutePosition();e.setAbsolutePosition({x:t.x+a,y:t.y+l})})},l=(t,n,r)=>{let a=e.current,l=a.getLayer();if(l.children.find(e=>"line-guides"===e.name()).destroyChildren(),"rotater"===a.getActiveAnchor()||Math.sqrt(Math.pow(n.x-t.x,2)+Math.pow(n.y-t.y,2))>50||!l)return n;var s=ak(i(a.nodes()),{vertical:[{guide:n.x,offset:0,snap:"start"}],horizontal:[{guide:n.y,offset:0,snap:"start"}]});if(!s.length||(o(s),r.ctrlKey||r.metaKey))return n;let u=n.x,c=n.x;s.forEach(e=>{switch(e.orientation){case"V":u=e.lineGuide;break;case"H":c=e.lineGuide}});let d=Math.abs(n.x-u),h=Math.abs(n.y-c),f=d<10,p=h<10;return f&&!p?{x:u,y:t.y}:p&&!f?{x:t.x,y:c}:f&&p?{x:u,y:c}:n},s=e=>{if(n.current=!1,!e.target)return;let t=e.target.getLayer();t.children.find(e=>"line-guides"===e.name()).destroyChildren(),t.batchDraw()},u=()=>{let r=e.current.nodes().map(e=>e.id()),i=t.getElementById(r[0]);n.current=i?.type==="image"};c(w).useEffect(()=>{e.current&&(e.current.anchorDragBoundFunc(l),e.current.on("dragstart",()=>{setTimeout(()=>{let e=[...c(R).DD._dragElements.entries()];e.reverse(),c(R).DD._dragElements.clear(),e.forEach(([e,t])=>{c(R).DD._dragElements.set(e,t)})}),u()}),e.current.on("dragmove",a),e.current.on("dragend",s),e.current.on("transformstart",()=>{u()}),e.current.on("transformend",s),e.current.on("transform",t=>{t.evt.ctrlKey||t.evt.metaKey?e.current?.rotationSnapTolerance(0):e.current?.rotationSnapTolerance(5)}))},[])}(b,e);let F=e.activePage===t,z=s?.PageControls,B=s?.Tooltip,U=1/e.scale,H=0/e.scale;return(0,v.jsxs)("div",{ref:E,onDragOver:e=>e.preventDefault(),onDrop:n=>{if(n.preventDefault(),!_.current)return;_.current.setPointersPositions(n);let r=_.current.findOne(".elements-container").getRelativePointerPosition(),i=_.current.getPointerPosition(),o=[...new Set(_.current.getAllIntersections(i).map(e=>e.findAncestor(".element",!0)).filter(Boolean).reverse())].map(t=>e.getElementById(t.id())),a=o[0];lL&&(lL(r,a,{elements:o,page:t}),lL=null)},style:{position:"relative",width:n+"px"},className:"polotno-page-container"+(F?" active-page":""),children:[(0,v.jsx)(r3,{ref:_,width:Math.min(n,4*window.innerWidth),height:Math.min(r,4*window.innerHeight),onClick:D,onTap:D,onMouseDown:M,onMouseMove:n=>{if(!n.evt.altKey&&S){C(null);return}if(!n.evt.altKey)return;let r=n.target.findAncestor(".element",!0),i=r?.id();if(!e.selectedElements[0]||e.selectedElementsIds.includes(i))return;let o=aO(e.selectedShapes),a=aC(i?e.getElementById(i):{x:0,y:0,width:t.computedWidth,height:t.computedHeight,rotation:0}),l=[];o.minX>a.maxX&&l.push({distance:o.minX-a.maxX,box1:o,box2:a,points:[{x:o.minX,y:o.minY+o.height/2},{x:a.maxX,y:o.minY+o.height/2},{x:a.maxX,y:a.minY+a.height/2}]}),o.maxX<a.minX&&l.push({distance:a.minX-o.maxX,box1:o,box2:a,points:[{x:o.maxX,y:o.minY+o.height/2},{x:a.minX,y:o.minY+o.height/2},{x:a.minX,y:a.minY+a.height/2}]}),o.minY>a.maxY&&l.push({box1:o,box2:a,distance:o.minY-a.maxY,points:[{x:o.minX+o.width/2,y:o.minY},{x:o.minX+o.width/2,y:a.maxY},{x:a.minX+a.width/2,y:a.maxY}]}),o.maxY<a.minY&&l.push({box1:o,box2:a,distance:a.minY-o.maxY,points:[{x:o.minX+o.width/2,y:o.maxY},{x:o.minX+o.width/2,y:a.minY},{x:a.minX+a.width/2,y:a.minY}]}),o.minX>=a.minX&&o.maxX<=a.maxX&&o.minY>=a.minY&&o.maxY<=a.maxY&&(l.push({distance:o.minX-a.minX,box1:o,box2:a,points:[{x:o.minX,y:o.minY+o.height/2},{x:a.minX,y:o.minY+o.height/2},{x:a.minX,y:a.minY+a.height/2}]}),l.push({distance:a.maxX-o.maxX,box1:o,box2:a,points:[{x:o.maxX,y:o.minY+o.height/2},{x:a.maxX,y:o.minY+o.height/2},{x:a.maxX,y:a.minY+a.height/2}]}),l.push({box1:o,box2:a,distance:o.minY-a.minY,points:[{x:o.minX+o.width/2,y:o.minY},{x:o.minX+o.width/2,y:a.minY},{x:a.minX+a.width/2,y:a.minY}]}),l.push({box1:o,box2:a,distance:a.maxY-o.maxY,points:[{x:o.minX+o.width/2,y:o.maxY},{x:o.minX+o.width/2,y:a.maxY},{x:a.minX+a.width/2,y:a.maxY}]})),JSON.stringify(S)!==JSON.stringify(l)&&C(l)},onDragStart:t=>{let n=t.target.findAncestor(".element",!0);if(n){let r=e.getElementById(n?.id()),i=r?.top,o=i?.id;!(e.selectedElementsIds.indexOf(o)>=0)&&o&&(e.selectElements([o]),t.target.stopDrag(),t.target.startDrag(t),b.current?.startDrag(t))}S&&C(null)},pageId:t.id,style:{position:"relative"},children:(0,v.jsxs)("Layer",{children:[(0,v.jsx)(lk,{width:n,height:r,fill:o}),(0,v.jsx)(rK,{x:m,y:y,scaleX:e.scale,scaleY:e.scale,name:"page-container",children:(0,v.jsxs)(rK,{name:"page-container-2",children:[(0,v.jsx)(rK,{name:"page-background-group",x:f,y:f,children:(0,v.jsx)(lA,{x:-t.bleed,y:-t.bleed,width:t.computedWidth+2*t.bleed,height:t.computedHeight+2*t.bleed,background:t.background,name:"page-background",preventDefault:!1,scale:e.scale})}),(0,v.jsxs)(rK,{x:f,y:f,name:"elements-container",listening:!e.isPlaying,children:[(0,v.jsx)(rX,{name:"elements-area",width:t.computedWidth,height:t.computedHeight,listening:!1}),(0,v.jsx)(lR,{elements:t.children,store:e})]}),(0,v.jsx)(rX,{stroke:u,name:"bleed",strokeWidth:t.bleed,x:t.bleed/2,y:t.bleed/2,width:t.computedWidth+t.bleed,height:t.computedHeight+t.bleed,listening:!1,visible:t.bleed>0&&e.bleedVisible,hideInExport:!0})]})}),(0,v.jsx)(rZ,{name:"workspace-background",points:[0,0,n,0,n,r,0,r,0,0,m,y,m,r-y,n-m,r-y,n-m,y,m,y],listening:!1,closed:!0,fill:o}),(0,v.jsx)(rK,{x:m,y:y,scaleX:e.scale,scaleY:e.scale,children:(0,v.jsx)(rX,{name:"page-highlight",hideInExport:!0,x:-U/2-H,y:-U/2-H,width:p+U+2*H,height:g+U+2*H,stroke:F&&e.pages.length>1?l:a,strokeWidth:2,listening:!1,strokeScaleEnabled:!1})}),(0,v.jsxs)(rK,{x:m+f*e.scale,y:y+f*e.scale,scaleX:e.scale,scaleY:e.scale,name:"page-abs-container",children:[(0,v.jsx)(r1,{ref:b,onDragStart:n=>{n.evt?.altKey&&d&&e.selectedElements.forEach(e=>{let n=e.clone({},{skipSelect:!0}),r=t.children.indexOf(e);t.setElementZIndex(n.id,r)}),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=b.current.nodes(),n=t[t.length-1];if(e.target!==n)return;let r=b.current?.__getNodeRect();k({anchor:b.current?.getActiveAnchor(),x:r.x,y:r.y,rotation:r.rotation,width:r.width,height:r.height})},onTransformEnd:t=>{k({}),e.history.endTransaction()},visible:!e.isPlaying}),S&&S.map(({points:t,distance:n,box1:r,box2:i},o)=>(0,v.jsxs)(rK,{name:"distances-container",hideInExport:!0,listening:!1,children:[(0,v.jsx)(rX,{...r,stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1}),(0,v.jsx)(rX,{...i,stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1}),(0,v.jsx)(rZ,{points:[t[0].x,t[0].y,t[1].x,t[1].y],stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1}),(0,v.jsx)(rZ,{points:[t[1].x,t[1].y,t[2].x,t[2].y],stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1}),(0,v.jsxs)(rY,{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:[(0,v.jsx)("Tag",{cornerRadius:5,fill:"rgb(0, 161, 255)",pointerDirection:"down"}),(0,v.jsx)(rJ,{align:"center",verticalAlign:"middle",fill:"white",padding:5,text:lx({unit:e.unit,dpi:e.dpi,px:n})})]})]},o)),t._rendering&&(0,v.jsxs)(rK,{children:[(0,v.jsx)(rX,{width:p,height:g,fill:"rgba(255,255,255,0.9)"}),(0,v.jsx)(rJ,{text:"Rendering...",fontSize:60,width:p,height:g,align:"center",verticalAlign:"middle"})]}),B&&(0,v.jsx)(B,{components:s,store:e,page:t,stageRef:_})]}),(0,v.jsx)(lN,{...O,store:e}),(0,v.jsx)(lj,{selection:N}),ls.value&&(0,v.jsx)(rJ,{text:"Powered by polotno.com",fontSize:14,fill:"rgba(0,0,0,0.6)",x:n-170,y:r-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")}}),(0,v.jsx)(rK,{name:"line-guides"})]})}),(i??!0)&&F&&z&&(0,v.jsx)(z,{store:e,page:t,xPadding:m,yPadding:y})]})}),w=g("8NFma");let lD=ap("div",c(w).forwardRef)`
+  `}(e,n):(console.error(`Polotno error: Can not convert ${e.subType} figure to svg.`),a$(e))}let aZ=e=>j(({element:t,fillProps:n,strokeProps:r})=>{let i=e({width:t.a.width,height:t.a.height,cornerRadius:t.cornerRadius}),o=1,a=1;"string"!=typeof i&&(o=i.scaleX,a=i.scaleY,i=i.path);let l=c(w).useRef(null);return(0,v.jsxs)(v.Fragment,{children:[(0,v.jsx)(rX,{width:t.width,height:t.height,fill:"transparent"}),(0,v.jsx)(r0,{...n,ref:l,data:i,scaleX:o,scaleY:a}),(0,v.jsx)(rK,{clipFunc:e=>{let t=l.current;if(t){var n=t.dataArray;e.beginPath();for(var r=0;r<n.length;r++){var i=n[r].command,o=n[r].points;switch(i){case"L":e.lineTo(o[0],o[1]);break;case"M":e.moveTo(o[0],o[1]);break;case"C":e.bezierCurveTo(o[0],o[1],o[2],o[3],o[4],o[5]);break;case"Q":e.quadraticCurveTo(o[0],o[1],o[2],o[3]);break;case"A":var a=o[0],s=o[1],u=o[2],c=o[3],d=o[4],h=o[5],f=o[6],p=o[7],g=u>c?u:c,m=u>c?1:u/c,v=u>c?c/u:1;e.translate(a,s),e.rotate(f),e.scale(m,v),e.arc(0,0,g,d,d+h,1-p),e.scale(1/m,1/v),e.rotate(-f),e.translate(-a,-s);break;case"z":e.closePath()}}}},scaleX:o,scaleY:a,children:(0,v.jsx)(r0,{...r,x:0,y:0,data:i,strokeWidth:2*r.strokeWidth,dash:r.dash.map(e=>e)})})]})}),aQ={},aJ=e=>(aQ[e]||(aQ[e]=aZ(aY[e]||a$)),aQ[e]),a0={text:i1,image:oy,svg:oy,line:aR,video:aW,figure:j(({element:e,store:t})=>{let n=e.selectable||"admin"===t.role,r=iH(),[i,o]=c(w).useState(!1),a=t.selectedElements.indexOf(e)>=0&&1===t.selectedElements.length,l=Math.min(e.strokeWidth,e.width/2,e.height/2),s=Math.max(0,Math.min(e.width/2,e.height/2,e.cornerRadius)),u=ic(e,e.a.fill,"fill"),d={width:e.a.width,height:e.a.height,...u,cornerRadius:s,opacity:e.animated("opacity"),shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,preventDefault:!r||a,hideInExport:!e.showInExport},h=ic(e,e.stroke,"stroke"),f={visible:l>0,x:l/2,y:l/2,width:e.a.width-l,height:e.a.height-l,...h,strokeWidth:l,cornerRadius:Math.max(0,s-l),dash:e.dash.map(e=>e*l),opacity:e.animated("opacity"),hideInExport:!e.showInExport,listening:!1},p=aJ(e.subType)||rK;return(0,v.jsxs)(c(w).Fragment,{children:[(0,v.jsx)(rK,{id:e.id,x:e.a.x,y:e.a.y,rotation:e.a.rotation,opacity:e.a.opacity,listening:n,draggable:r?e.draggable&&a:e.draggable,name:"element",onMouseEnter:()=>{o(!0)},onMouseLeave:()=>{o(!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.scale();t.target.scaleX(1),t.target.scaleY(1),e.set({width:e.width*n.x,height:e.height*n.y,x:t.target.x(),y:t.target.y(),rotation:t.target.rotation()})},children:(0,v.jsx)(p,{element:e,fillProps:d,strokeProps:f})}),i&&!a&&(0,v.jsx)(iz,{element:e})]})}),group:j(e=>{let{element:t,store:n}=e,{children:r}=t,i=t.selectable||"admin"===n.role;return(0,v.jsx)(rK,{opacity:t.opacity,listening:i,hideInExport:!t.showInExport,children:r.map(t=>(0,w.createElement)(a1,{...e,key:t.id,store:n,element:t}))})})},a1=j(e=>{let t=a0[e.element.type];return("text"===e.element.type&&iR.htmlRenderEnabled&&(t=a_),e.element.visible)?t?(0,v.jsx)(t,{...e}):(console.error("Can not find component for "+e.element.type),null):null});var x=g("2SBKn");let a2="https://api.polotno.com",a3=()=>a2+"/api",a5={},a4=(e,t,n)=>e.replace(RegExp(t,"g"),n),a6=({query:e,page:t=1})=>`${a3()}/get-unsplash?query=${e}&per_page=20&page=${t}&KEY=${ld()}`,a8=e=>`${a3()}/download-unsplash?id=${e}&KEY=${ld()}`,a9=({query:e,page:t=1})=>`${a3()}/get-nounproject?query=${e}&page=${t}&KEY=${ld()}`,a7=e=>`${a3()}/download-nounproject?id=${e}&KEY=${ld()}`,le=({query:e,page:t=1,sizeQuery:n})=>`${a3()}/get-templates?${n}&query=${e}&per_page=30&page=${t}&KEY=${ld()}`,lt=()=>`${a3()}/get-google-fonts?KEY=${ld()}`,ln=e=>`${a2}/google-fonts-previews/black/${a4(e," ","-")}.png`,lr=()=>`${a3()}/remove-image-background?KEY=${ld()}`,li=e=>le(e),lo=()=>`${a3()}/get-text-templates?KEY=${ld()}`,la=e=>a6(e),ll=e=>a8(e),ls=x.observable({value:!1}),lu=x.action(()=>{ls.value=!0}),lc="",ld=()=>lc||"",lh=window.location.origin,lf=navigator.userAgent.indexOf("Headless")>-1,lp=navigator.userAgent.indexOf("Electron")>-1;"file://"===lh&&lf&&(lh="headless"),"file://"===lh&&lp&&(lh="electron");let lg=`%cPolotno error! Current domain is not allowed. It may lead to unexpected behavior and stop working. Please add "${lh}" here: https://polotno.com/cabinet`;async function lm(e){for(let t=0;t<5;t++)try{let t=await fetch(a3()+"/validate-key",{method:"POST",body:JSON.stringify({key:e,site:location.host})});if(!e)return console.warn("Polotno API is initialized without API key. It may lead to unexpected behavior and stop working. Please create API key here: https://polotno.com/cabinet"),!1;if(200!==t.status){await new Promise(e=>setTimeout(e,3e3));continue}let n=await t.json();return n.is_valid||console.warn("Polotno API key is not valid. Please get new API key here: https://polotno.com/cabinet"),n.is_paid||console.log("%cPolotno Free Version. Development or non-commercial usage only. https://polotno.com/","background: rgb(0, 161, 255); color: white; padding: 5px; margin: 5px;"),n.is_domain_valid||console.log(lg,"background: rgba(247, 101, 68, 1); color: white; padding: 5px; margin: 5px;"),iL(n.remove_background_enabled),n.is_paid||!1}catch(e){await new Promise(e=>setTimeout(e,3e3))}return console.error("Can not validate Polotno API key. Please report to anton@polotno.com immediately."),!0}async function lv(e,t){lc=e,(!await lm(e)||t)&&lu()}let ly=({px:e,unit:t="px",dpi:n})=>{switch(t){case"pt":default:return e;case"mm":return e/(n/25.4);case"cm":return e/(n/2.54);case"in":return e/n}},lb=({px:e,precious:t=2,dpi:n=72,unit:r="px"})=>parseFloat(ly({px:e,dpi:n,unit:r}).toFixed(t)),lw=({unitVal:e,dpi:t,unit:n})=>e/ly({px:1,unit:n,dpi:t}),lx=e=>{let t=parseFloat(ly(e).toFixed(1));switch(e.unit){case"pt":return`${Math.round(t)}pt`;case"mm":return`${t}mm`;case"cm":return`${t}cm`;case"in":return`${t}in`;default:return`${Math.round(t)}px`}},l_=c(R).DD._drag;window.removeEventListener("mousemove",l_),c(R).DD._drag=function(e){(0,x.runInAction)(()=>{l_.call(this,e)})},window.addEventListener("mousemove",c(R).DD._drag);let lE=new(c(R)).Group;lE.add(new(c(R)).Rect({width:20,height:20,fill:"white"})),lE.add(new(c(R)).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"}));let lS=lE.toCanvas({pixelRatio:2,width:20,height:20}),lC={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=>{e.hasName("rotater")&&e.setAttrs({width:20,height:20,cornerRadius:10,offsetX:10,offsetY:10,fillPatternImage:lS,fillPatternScaleX:.5,fillPatternScaleY:.5,fillPriority:"pattern",fillPatternRepeat:"no-repeat"})}},lO={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"]}},lk=e=>(0,v.jsx)(rX,{...e,preventDefault:!1}),lP=({url:e,...t})=>{let[n,r]=c(r5)(e,"anonymous"),i=n?function(e,t,n="scale"){let r,i;let o=t.width/t.height;o>=e.width/e.height?(r=e.width,i=e.width/o):(r=e.height*o,i=e.height);let a=0,l=0;return"left-top"===n?(a=0,l=0):"left-middle"===n?(a=0,l=(e.height-i)/2):"left-bottom"===n?(a=0,l=e.height-i):"center-top"===n?(a=(e.width-r)/2,l=0):"center-middle"===n?(a=(e.width-r)/2,l=(e.height-i)/2):"center-bottom"===n?(a=(e.width-r)/2,l=e.height-i):"right-top"===n?(a=e.width-r,l=0):"right-middle"===n?(a=e.width-r,l=(e.height-i)/2):"right-bottom"===n?(a=e.width-r,l=e.height-i):"scale"===n?(a=0,l=0,r=e.width,i=e.height):console.error(Error("Unknown clip position property - "+n)),{cropX:a,cropY:l,cropWidth:r,cropHeight:i}}(n,{width:t.width,height:t.height},"center-middle"):{};return og(r,"background"),(0,v.jsx)(rQ,{image:n,...t,...i})},lT=e=>(0,v.jsx)(rX,{...e}),lA=e=>{let{background:t,scale:n,borderColor:r,...i}=e,o=c(w).useMemo(()=>!!c(R).Util.colorToRGBA(t),[t]),a=c(w).useMemo(()=>{let e=document.createElement("canvas");e.width=60,e.height=60;let t=e.getContext("2d");return t&&(t.fillStyle="black",t.fillRect(30,0,30,30),t.fillRect(0,30,30,30)),e},[]);return(0,v.jsxs)(c(w).Fragment,{children:[(0,v.jsx)(rX,{fillPatternImage:a,...i,opacity:.1,hideInExport:!0}),o?(0,v.jsx)(lT,{fill:t,...i}):(0,v.jsx)(lP,{url:t,...i})]})},lj=j(({selection:e})=>e.visible?(0,v.jsx)(rX,{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),lN=j(({x:e,y:t,width:n,height:r,rotation:i,anchor:o,store:a})=>{let l=aC({x:e,y:t,width:n,height:r,rotation:c(R).Util.radToDeg(i)});if(void 0===o)return null;let s=(r/2+70)*Math.cos(i-Math.PI/2),u=(r/2+70)*Math.sin(i-Math.PI/2),d=lb({unit:a.unit,dpi:a.dpi,px:n/a.scale,precious:"px"===a.unit?0:1})+" x "+lb({unit:a.unit,dpi:a.dpi,px:r/a.scale,precious:"px"===a.unit?0:1})+("px"===a.unit?"":" "+a.unit);return(0,v.jsxs)(v.Fragment,{children:[(0,v.jsxs)(rY,{x:(l.minX+l.maxX)/2+s,y:(l.minY+l.maxY)/2+u,offsetX:14,offsetY:14,visible:"rotater"===o,children:[(0,v.jsx)("Tag",{cornerRadius:5,fill:"rgb(0, 161, 255)"}),(0,v.jsx)(rJ,{align:"center",verticalAlign:"middle",fill:"white",padding:8,text:Math.round(c(R).Util.radToDeg(i)).toString()+"°"})]}),(0,v.jsxs)(rY,{x:(l.minX+l.maxX)/2,y:l.maxY+20,visible:"rotater"!==o,children:[(0,v.jsx)("Tag",{cornerRadius:5,fill:"rgb(0, 161, 255)",pointerDirection:"up",pointerHeight:0,pointerWidth:0}),(0,v.jsx)(rJ,{align:"center",verticalAlign:"middle",fill:"white",padding:8,text:d})]})]})}),lR=j(({elements:e,store:t})=>{let n=e.filter(e=>e.alwaysOnTop),r=e.filter(e=>!e.alwaysOnTop).concat(n);return(0,v.jsx)(c(w).Fragment,{children:r.map(e=>(0,v.jsx)(a1,{store:t,element:e,onClick:()=>{console.warn("Polotno warning: onClick callback is deprecated. Just stop using it. Polotno will do selection automatically.")}},e.id))})}),lL=null,lI=e=>{lL=e};var lM=j(({store:e,page:t,width:n,height:r,pageControlsEnabled:i,backColor:o,pageBorderColor:a,activePageBorderColor:l,components:s,bleedColor:u,altCloneEnabled:d})=>{var h;let f=e.bleedVisible?t.bleed:0,p=t.computedWidth+2*f,g=t.computedHeight+2*f,m=(n-p*e.scale)/2,y=(r-g*e.scale)/2,b=c(w).useRef(null),_=c(w).useRef(null),E=c(w).useRef(null),[S,C]=c(w).useState(null),[O,k]=c(w).useState({}),P=e.selectedElements.find(e=>e._cropModeEnabled),T=e.selectedShapes.filter(e=>!e.resizable).length>0,A=e.selectedShapes.filter(e=>!e.draggable).length>0,j=e.selectedElements.filter(e=>!e.visible).length>0;c(w).useLayoutEffect(()=>{if(!b.current)return;let t=b.current.getStage(),n=e.selectedShapes.map(e=>e._cropModeEnabled?null:t.findOne("#"+e.id)).filter(e=>e),r=1===e.selectedElements.length&&e.selectedElements[0]?.type||"many";lO[r]?(b.current.setAttrs({...lC,...lO[r]}),"svg"!==r&&"image"!==r||e.selectedElements[0].keepRatio||b.current.setAttrs({enabledAnchors:lC.enabledAnchors}),"text"===r&&iR.textVerticalResizeEnabled&&b.current.setAttrs({enabledAnchors:lO.text.enabledAnchors?.concat(["bottom-center"])})):b.current.setAttrs(lC),T&&b.current.enabledAnchors([]),A&&b.current.rotateEnabled(!1),n.find(e=>e?.isDragging())&&n.forEach(e=>{e.isDragging()||e?.startDrag()}),b.current.nodes(n),b.current.getLayer()?.batchDraw()},[e.selectedElements,P,T,j,A]);let N=(h=()=>({visible:!1,x1:0,y1:0,x2:0,y2:0}),(0,w.useState)(function(){return(0,x.observable)(h(),void 0,{autoBind:!0})})[0]),L=c(w).useRef(!1),I=iH(),M=(0,x.action)(e=>{if(I)return;L.current=!1;let t=e.target.findAncestor(".elements-container"),n=e.target.findAncestor("Transformer"),r=e.target.findAncestor(".page-abs-container");if(t||n||r)return;let i=e.target.getStage()?.getPointerPosition();i&&(N.visible=!0,N.x1=i.x,N.y1=i.y,N.x2=i.x,N.y2=i.y,e.target.getStage()?.getPointersPositions().length>=2&&(N.visible=!1))});c(w).useEffect(()=>{let t=(0,x.action)(e=>{if(!N.visible)return;_.current?.setPointersPositions(e);let t=_.current?.getPointerPosition()||{x:N.x2,y:N.y2};N.x2=t.x,N.y2=t.y}),n=(0,x.action)(()=>{if(!N.visible||!_.current)return;let t=_.current.findOne(".selection"),n=t?t.getClientRect():{width:0,height:0,x:0,y:0};if(n.width&&n.height){let t=[];_.current.find(".element").forEach(r=>{let i=r.getClientRect(),o=e.getElementById(r.id()),a=o?.draggable,l=o?.selectable;c(R).Util.haveIntersection(n,i)&&a&&l&&t.push(o.top.id)});let r=[...new Set(t)];e.selectElements(r)}N.visible=!1,L.current=!0});return window.addEventListener("mousemove",t),window.addEventListener("touchmove",t),window.addEventListener("mouseup",n),window.addEventListener("touchend",n),()=>{window.removeEventListener("mousemove",t),window.removeEventListener("touchmove",t),window.removeEventListener("mouseup",n),window.removeEventListener("touchend",n)}},[]);let D=n=>{if(e.activePage!==t&&t.select(),L.current)return;let r=n.evt.ctrlKey||n.evt.metaKey||n.evt.shiftKey,i=n.target.findAncestor(".elements-container"),o=n.target.findAncestor(".page-abs-container"),a=n.target.findAncestor("Transformer");if(!r&&!i&&!a&&!o){e.selectElements([]);return}let l=n.target.findAncestor(".element",!0),s=e.getElementById(l?.id()),u=s?.top,c=u?.id,d=e.selectedElementsIds.indexOf(c)>=0;c&&r&&!d?e.selectElements(e.selectedElementsIds.concat([c])):c&&r&&d?e.selectElements(e.selectedElementsIds.filter(e=>e!==c)):!c||r||d||e.selectElements([c])};!function(e,t){let n=c(w).useRef(),r=e=>e.hasName("element")||e.hasName("page-background")||!n.current&&e.hasName("elements-area");function i(t){let n=e.current?.getStage();var i=[],o=[];return n.find(r).forEach(e=>{if(!(t.indexOf(e)>=0)){var n=e.getClientRect({skipShadow:!0,skipStroke:!0});i.push(n.x,n.x+n.width,n.x+n.width/2),o.push(n.y,n.y+n.height,n.y+n.height/2)}}),{vertical:i,horizontal:o}}function o(t){let n=e.current?.getLayer(),r=n?.children.find(e=>"line-guides"===e.name());t.forEach(e=>{if("H"===e.orientation){var t=new(c(R)).Line({points:[-6e3,e.lineGuide,6e3,e.lineGuide],stroke:"rgb(0, 161, 255)",strokeWidth:1,name:"guid-line",dash:[4,6]});r?.add(t),n.batchDraw()}else if("V"===e.orientation){var t=new(c(R)).Line({points:[e.lineGuide,-6e3,e.lineGuide,6e3],stroke:"rgb(0, 161, 255)",strokeWidth:1,name:"guid-line",dash:[4,6]});r?.add(t)}})}let a=e=>{e.target.getLayer().children.find(e=>"line-guides"===e.name()).destroyChildren();var t=ak(i(e.target.nodes()),function(e){let t=e.__getNodeRect(),n=aC({...t,rotation:c(R).Util.radToDeg(t.rotation)}),r=e.getAbsolutePosition();return{vertical:[{guide:n.x,offset:r.x-n.x,snap:"start"},{guide:n.x+n.width/2,offset:r.x-n.x-n.width/2,snap:"center"},{guide:n.x+n.width,offset:r.x-n.x-n.width,snap:"end"}],horizontal:[{guide:n.y,offset:r.y-n.y,snap:"start"},{guide:n.y+n.height/2,offset:r.y-n.y-n.height/2,snap:"center"},{guide:n.y+n.height,offset:r.y-n.y-n.height,snap:"end"}]}}(e.target));if(!t.length)return;o(t);let n=e.target.getAbsolutePosition(),r={...n};t.forEach(e=>{switch(e.snap){case"start":case"center":case"end":switch(e.orientation){case"V":r.x=e.lineGuide+e.offset;break;case"H":r.y=e.lineGuide+e.offset}}});let a=r.x-n.x,l=r.y-n.y;e.evt.ctrlKey||e.evt.metaKey||e.target.nodes().forEach(e=>{let t=e.getAbsolutePosition();e.setAbsolutePosition({x:t.x+a,y:t.y+l})})},l=(t,n,r)=>{let a=e.current,l=a.getLayer();if(l.children.find(e=>"line-guides"===e.name()).destroyChildren(),"rotater"===a.getActiveAnchor()||Math.sqrt(Math.pow(n.x-t.x,2)+Math.pow(n.y-t.y,2))>50||!l)return n;var s=ak(i(a.nodes()),{vertical:[{guide:n.x,offset:0,snap:"start"}],horizontal:[{guide:n.y,offset:0,snap:"start"}]});if(!s.length||(o(s),r.ctrlKey||r.metaKey))return n;let u=n.x,c=n.x;s.forEach(e=>{switch(e.orientation){case"V":u=e.lineGuide;break;case"H":c=e.lineGuide}});let d=Math.abs(n.x-u),h=Math.abs(n.y-c),f=d<10,p=h<10;return f&&!p?{x:u,y:t.y}:p&&!f?{x:t.x,y:c}:f&&p?{x:u,y:c}:n},s=e=>{if(n.current=!1,!e.target)return;let t=e.target.getLayer();t.children.find(e=>"line-guides"===e.name()).destroyChildren(),t.batchDraw()},u=()=>{let r=e.current.nodes().map(e=>e.id()),i=t.getElementById(r[0]);n.current=i?.type==="image"};c(w).useEffect(()=>{e.current&&(e.current.anchorDragBoundFunc(l),e.current.on("dragstart",()=>{setTimeout(()=>{let e=[...c(R).DD._dragElements.entries()];e.reverse(),c(R).DD._dragElements.clear(),e.forEach(([e,t])=>{c(R).DD._dragElements.set(e,t)})}),u()}),e.current.on("dragmove",a),e.current.on("dragend",s),e.current.on("transformstart",()=>{u()}),e.current.on("transformend",s),e.current.on("transform",t=>{t.evt.ctrlKey||t.evt.metaKey?e.current?.rotationSnapTolerance(0):e.current?.rotationSnapTolerance(5)}))},[])}(b,e);let F=e.activePage===t,z=s?.PageControls,B=s?.Tooltip,U=1/e.scale,H=0/e.scale;return(0,v.jsxs)("div",{ref:E,onDragOver:e=>e.preventDefault(),onDrop:n=>{if(n.preventDefault(),!_.current)return;_.current.setPointersPositions(n);let r=_.current.findOne(".elements-container").getRelativePointerPosition(),i=_.current.getPointerPosition(),o=[...new Set(_.current.getAllIntersections(i).map(e=>e.findAncestor(".element",!0)).filter(Boolean).reverse())].map(t=>e.getElementById(t.id())),a=o[0];lL&&(lL(r,a,{elements:o,page:t}),lL=null)},style:{position:"relative",width:n+"px"},className:"polotno-page-container"+(F?" active-page":""),children:[(0,v.jsx)(r3,{ref:_,width:Math.min(n,4*window.innerWidth),height:Math.min(r,4*window.innerHeight),onClick:D,onTap:D,onMouseDown:M,onMouseMove:n=>{if(!n.evt.altKey&&S){C(null);return}if(!n.evt.altKey)return;let r=n.target.findAncestor(".element",!0),i=r?.id();if(!e.selectedElements[0]||e.selectedElementsIds.includes(i))return;let o=aO(e.selectedShapes),a=aC(i?e.getElementById(i):{x:0,y:0,width:t.computedWidth,height:t.computedHeight,rotation:0}),l=[];o.minX>a.maxX&&l.push({distance:o.minX-a.maxX,box1:o,box2:a,points:[{x:o.minX,y:o.minY+o.height/2},{x:a.maxX,y:o.minY+o.height/2},{x:a.maxX,y:a.minY+a.height/2}]}),o.maxX<a.minX&&l.push({distance:a.minX-o.maxX,box1:o,box2:a,points:[{x:o.maxX,y:o.minY+o.height/2},{x:a.minX,y:o.minY+o.height/2},{x:a.minX,y:a.minY+a.height/2}]}),o.minY>a.maxY&&l.push({box1:o,box2:a,distance:o.minY-a.maxY,points:[{x:o.minX+o.width/2,y:o.minY},{x:o.minX+o.width/2,y:a.maxY},{x:a.minX+a.width/2,y:a.maxY}]}),o.maxY<a.minY&&l.push({box1:o,box2:a,distance:a.minY-o.maxY,points:[{x:o.minX+o.width/2,y:o.maxY},{x:o.minX+o.width/2,y:a.minY},{x:a.minX+a.width/2,y:a.minY}]}),o.minX>=a.minX&&o.maxX<=a.maxX&&o.minY>=a.minY&&o.maxY<=a.maxY&&(l.push({distance:o.minX-a.minX,box1:o,box2:a,points:[{x:o.minX,y:o.minY+o.height/2},{x:a.minX,y:o.minY+o.height/2},{x:a.minX,y:a.minY+a.height/2}]}),l.push({distance:a.maxX-o.maxX,box1:o,box2:a,points:[{x:o.maxX,y:o.minY+o.height/2},{x:a.maxX,y:o.minY+o.height/2},{x:a.maxX,y:a.minY+a.height/2}]}),l.push({box1:o,box2:a,distance:o.minY-a.minY,points:[{x:o.minX+o.width/2,y:o.minY},{x:o.minX+o.width/2,y:a.minY},{x:a.minX+a.width/2,y:a.minY}]}),l.push({box1:o,box2:a,distance:a.maxY-o.maxY,points:[{x:o.minX+o.width/2,y:o.maxY},{x:o.minX+o.width/2,y:a.maxY},{x:a.minX+a.width/2,y:a.maxY}]})),JSON.stringify(S)!==JSON.stringify(l)&&C(l)},onDragStart:t=>{let n=t.target.findAncestor(".element",!0);if(n){let r=e.getElementById(n?.id()),i=r?.top,o=i?.id;!(e.selectedElementsIds.indexOf(o)>=0)&&o&&(e.selectElements([o]),t.target.stopDrag(),t.target.startDrag(t),b.current?.startDrag(t))}S&&C(null)},pageId:t.id,style:{position:"relative"},children:(0,v.jsxs)("Layer",{children:[(0,v.jsx)(lk,{width:n,height:r,fill:o}),(0,v.jsx)(rK,{x:m,y:y,scaleX:e.scale,scaleY:e.scale,name:"page-container",children:(0,v.jsxs)(rK,{name:"page-container-2",children:[(0,v.jsx)(rK,{name:"page-background-group",x:f,y:f,children:(0,v.jsx)(lA,{x:-t.bleed,y:-t.bleed,width:t.computedWidth+2*t.bleed,height:t.computedHeight+2*t.bleed,background:t.background,name:"page-background",preventDefault:!1,scale:e.scale})}),(0,v.jsxs)(rK,{x:f,y:f,name:"elements-container",listening:!e.isPlaying,children:[(0,v.jsx)(rX,{name:"elements-area",width:t.computedWidth,height:t.computedHeight,listening:!1}),(0,v.jsx)(lR,{elements:t.children,store:e})]}),(0,v.jsx)(rX,{stroke:u,name:"bleed",strokeWidth:t.bleed,x:t.bleed/2,y:t.bleed/2,width:t.computedWidth+t.bleed,height:t.computedHeight+t.bleed,listening:!1,visible:t.bleed>0&&e.bleedVisible,hideInExport:!0})]})}),(0,v.jsx)(rZ,{name:"workspace-background",points:[0,0,n,0,n,r,0,r,0,0,m,y,m,r-y,n-m,r-y,n-m,y,m,y],listening:!1,closed:!0,fill:o}),(0,v.jsx)(rK,{x:m,y:y,scaleX:e.scale,scaleY:e.scale,children:(0,v.jsx)(rX,{name:"page-highlight",hideInExport:!0,x:-U/2-H,y:-U/2-H,width:p+U+2*H,height:g+U+2*H,stroke:F&&e.pages.length>1?l:a,strokeWidth:2,listening:!1,strokeScaleEnabled:!1})}),(0,v.jsxs)(rK,{x:m+f*e.scale,y:y+f*e.scale,scaleX:e.scale,scaleY:e.scale,name:"page-abs-container",children:[(0,v.jsx)(r1,{ref:b,onDragStart:n=>{n.evt?.altKey&&d&&e.selectedElements.forEach(e=>{let n=e.clone({},{skipSelect:!0}),r=t.children.indexOf(e);t.setElementZIndex(n.id,r)}),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=b.current.nodes(),n=t[t.length-1];if(e.target!==n)return;let r=b.current?.__getNodeRect();k({anchor:b.current?.getActiveAnchor(),x:r.x,y:r.y,rotation:r.rotation,width:r.width,height:r.height})},onTransformEnd:t=>{k({}),e.history.endTransaction()},visible:!e.isPlaying}),S&&S.map(({points:t,distance:n,box1:r,box2:i},o)=>(0,v.jsxs)(rK,{name:"distances-container",hideInExport:!0,listening:!1,children:[(0,v.jsx)(rX,{...r,stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1}),(0,v.jsx)(rX,{...i,stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1}),(0,v.jsx)(rZ,{points:[t[0].x,t[0].y,t[1].x,t[1].y],stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1}),(0,v.jsx)(rZ,{points:[t[1].x,t[1].y,t[2].x,t[2].y],stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1}),(0,v.jsxs)(rY,{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:[(0,v.jsx)("Tag",{cornerRadius:5,fill:"rgb(0, 161, 255)",pointerDirection:"down"}),(0,v.jsx)(rJ,{align:"center",verticalAlign:"middle",fill:"white",padding:5,text:lx({unit:e.unit,dpi:e.dpi,px:n})})]})]},o)),t._rendering&&(0,v.jsxs)(rK,{children:[(0,v.jsx)(rX,{width:p,height:g,fill:"rgba(255,255,255,0.9)"}),(0,v.jsx)(rJ,{text:"Rendering...",fontSize:60,width:p,height:g,align:"center",verticalAlign:"middle"})]}),B&&(0,v.jsx)(B,{components:s,store:e,page:t,stageRef:_})]}),(0,v.jsx)(lN,{...O,store:e}),(0,v.jsx)(lj,{selection:N}),ls.value&&(0,v.jsx)(rJ,{text:"Powered by polotno.com",fontSize:14,fill:"rgba(0,0,0,0.6)",x:n-170,y:r-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")}}),(0,v.jsx)(rK,{name:"line-guides"})]})}),(i??!0)&&F&&z&&(0,v.jsx)(z,{store:e,page:t,xPadding:m,yPadding:y})]})}),w=g("8NFma");let lD=ap("div",c(w).forwardRef)`
   position: absolute;
   top: 0;
   left: 0;
@@ -160,7 +160,7 @@ For more info see: https://github.com/konvajs/react-konva/issues/194
         font-style: ${e.fontStyle||"normal"};
         font-weight: ${e.fontWeight||"normal"};
       }
-    `}),n.innerHTML=i,document.getElementsByTagName("head")[0].appendChild(n),iN[e.fontFamily]=!0}(n):function(e){if(iA[e])return;let t=e.replace(/ /g,"+"),n=`https://fonts.googleapis.com/css?family=${t}:${ij}`,r=document.createElement("link");r.type="text/css",r.href=n,r.rel="stylesheet",document.getElementsByTagName("head")[0].appendChild(r),iA[e]=!0}(t),await iT(t)},validate:e=>sf.validate(e,[{path:"",type:sf}]).map(e=>({path:"store"+e.context.map(e=>e.path).join("."),message:e.message}))})),sp=(0,iq.types).model("Node",{id:iq.types.identifier,type:"none",name:"",opacity:1,custom:(0,iq.types).frozen(),visible:!0,selectable:!0,removable:!0,alwaysOnTop:!1,showInExport:!0}).preProcessSnapshot(e=>{for(var t in e)null===e[t]&&(e[t]=void 0);return e}).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(){return(0,iq.getParentOfType)(e,sd)},get store(){return(0,iq.getParentOfType)(e,sf)},get top(){let t=e;for(;;){if(!(0,iq.hasParentOfType)(t,sT))return t;t=(0,iq.getParentOfType)(t,sT)}},get parent(){if((0,iq.hasParentOfType)(e,sT))return(0,iq.getParentOfType)(e,sT);if((0,iq.hasParentOfType)(e,sd))return(0,iq.getParentOfType)(e,sd);if((0,iq.hasParentOfType)(e,sf))return(0,iq.getParentOfType)(e,sf);return null},get zIndex(){return e.parent.children.indexOf(e)}})).actions(e=>({toJSON:()=>({...(0,iq.getSnapshot)(e)})})).actions(e=>({clone(t={},{skipSelect:n=!1}={}){let r=JSON.parse(JSON.stringify(e.toJSON()));return t.id=t.id||lG(10),sO(r,e=>{e.id=lG(10)}),Object.assign(r,t),e.page.addElement(r,{skipSelect: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])},setZIndex(t){e.parent.setElementZIndex(e.id,t)},beforeDestroy(){}}));var iq=g("58B0H");let sg={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}}},sm={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}},rotate:({dTime:e,element:t,animation:n})=>{let r=n.duration;return function(e,t){let n=function(e){let t=aE(e.rotation||0);return{x:e.x+e.width/2*Math.cos(t)+e.height/2*Math.sin(-t),y:e.y+e.height/2*Math.cos(t)+e.width/2*Math.sin(t)}}(e);return function(e,t,n){let r=aE(t),i=n.x+(e.x-n.x)*Math.cos(r)-(e.y-n.y)*Math.sin(r),o=n.y+(e.x-n.x)*Math.sin(r)+(e.y-n.y)*Math.cos(r);return{...e,rotation:e.rotation+t,x:i,y:o}}(e,t,n)}({x:t.x,y:t.y,width:t.width,height:t.height,rotation:t.rotation},e/r*360)},blink:({dTime:e,element:t,animation:n})=>{let r=n.duration,i=e%r/(r/2);return{opacity:t.opacity*(i<=1?i:2-i)}},bounce:({dTime:e,element:t,animation:n})=>{let r=n.duration,i={},o={x:t.x+t.width/3,y:t.y+t.height/3,width:t.width/3,height:t.height/3,fontSize:t.fontSize/3},a={x:t.x,y:t.y,width:t.width,height:t.height,fontSize:t.fontSize},l=e%r/(r/2),s=l<=1?l:2-l;for(let e in o){let t=o[e],n=a[e]-t;i[e]=t+s*n}return i},move:({dTime:e,element:t,animation:n})=>{let r=sg[n.data.direction]||sg.right,i={};for(var o in r.from){let a=r.from[o],l=r.to[o];"exit"===n.type&&(a=r.to[o],l=-r.from[o]);let s=t[o]+a,u=t[o]+l-s;i[o]=s+e/n.duration*u}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}},sv=({element:e,dTime:t,animation:n})=>{let r=sm[n.name];return r?r({element:e,dTime:t,animation:n}):(console.error("Can not find animation type: "+n.name),{})};var x=g("2SBKn");let sy=(0,iq.types).model("Animation",{delay:0,duration:500,enabled:!0,type:(0,iq.types).enumeration("Type",["enter","exit","loop"]),name:"none",data:(0,iq.types).frozen({})}),sb=sp.named("Shape").props({x:0,y:0,width:100,height:100,rotation:0,opacity:1,animations:(0,iq.types).array(sy),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=>{let t={...e,x:e.x||0,y:e.y||0};return"width"in e&&(t.width=t.width||1),"height"in e&&(t.height=t.height||1),e.locked&&(t.draggable=!1,t.contentEditable=!1,t.styleEditable=!1,t.resizable=!1,t.removable=!1),t}).views(e=>{let t=(0,x.observable)({x:e.x,y:e.y,width:e.width,height:e.height,rotation:e.rotation,opacity:e.opacity,color:e.color,fontSize:e.fontSize}),n=(0,x.action)(e=>{Object.assign(t,e)});return{get a(){let{currentTime:r}=e.store;if(n({x:e.x,y:e.y,width:e.width,height:e.height,rotation:e.rotation,opacity:e.opacity,color:e.color,fontSize:e.fontSize}),0===r)return t;let i=r-e.page.startTime;if(i>e.page.duration||i<0)return t;let o=e.store.animatedElementsIds;if(o.length&&!o.includes(e.id))return t;let a=e.animations.find(e=>"enter"===e.type);if(a?.enabled&&i<a.delay&&n({opacity:0}),a?.enabled&&i>=a.delay&&i<=a.delay+a.duration){let t=i-a.delay;n(sv({element:e,animation:a,dTime:t}))}let l=e.animations.find(e=>"exit"===e.type);if(l?.enabled&&i>=e.page.duration-l.duration-l.delay&&i<=e.page.duration-l.delay){let t=i-(e.page.duration-l.duration);n(sv({element:e,animation:l,dTime:t}))}let s=e.animations.find(e=>"loop"===e.type);return s?.enabled&&n(sv({element:e,animation:s,dTime:i})),t},animated:t=>e.a[t]}}).actions(e=>({setAnimation(t,n){let r=e.animations.find(e=>e.type===t);r?Object.assign(r,n):e.animations.push({type:t,...n})}}));var iq=g("58B0H");let sw=sb.named("Text").props({type:"text",text:"",placeholder:"",fontSize:14,fontFamily:"Roboto",fontStyle:"normal",fontWeight:"normal",textDecoration:"",fill:"black",align:"center",width:100,height:0,verticalAlign:"top",strokeWidth:0,stroke:"black",lineHeight:(0,iq.types).optional((0,iq.types).union(iq.types.number,iq.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()}})),sx=sb.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(t){e._cropModeEnabled=t??!e._cropModeEnabled,e._cropModeEnabled?e.store.history.startTransaction():e.store.history.endTransaction()},beforeDestroy(){e._cropModeEnabled&&e.store.history.endTransaction()}})),s_=sx.named("Video").props({type:"video",duration:0,startTime:0,endTime:1});var iq=g("58B0H");let sE=sb.named("Line").props({type:"line",width:400,height:10,color:"black",dash:(0,iq.types).array(iq.types.number),startHead:"",endHead:""}).actions(e=>({}));var iq=g("58B0H");let sS=sb.named("SVG").props({type:"svg",src:"",maskSrc:"",cropX:0,cropY:0,cropWidth:1,cropHeight:1,keepRatio:!0,flipX:!1,flipY:!1,width:100,height:100,borderColor:"black",borderSize:0,cornerRadius:0,colorsReplace:(0,iq.types).map(iq.types.string)}).preProcessSnapshot(e=>({...e,src:e.src||e.svgSource})).actions(e=>({replaceColor(t,n){e.colorsReplace.set(t,n)}}));var iq=g("58B0H");let sC=sb.named("Figure").props({type:"figure",subType:"rect",fill:"rgb(0, 161, 255)",dash:(0,iq.types).array(iq.types.number),strokeWidth:0,stroke:"rgba(98, 197, 255, 1)",cornerRadius:0}),sO=(e,t)=>{if(e.children)for(let n of e.children){if(!0===t(n))break;sO(n,t)}},sk=[...Array(20)].map((e,t)=>(0,iq.types).late(()=>sA[t])),sP=(0,iq.types).union({dispatcher:e=>{let t=sj[e.type];if(!t)throw Error(`Unknown element type: "${e.type}"`);return t}},sS,sw,sx,sE,s_,sC,(0,iq.types).late(()=>sT),...sk),sT=sp.named("Group").props({type:"group",children:(0,iq.types).array(sP)}).views(e=>({get draggable(){let t=!0;return sO(e,e=>{e.draggable||(t=!1)}),t},get resizable(){let t=!0;return sO(e,e=>{e.resizable||(t=!1)}),t},get contentEditable(){let t=!0;return sO(e,e=>{e.contentEditable||(t=!1)}),t},get styleEditable(){let t=!0;return sO(e,e=>{e.styleEditable||(t=!1)}),t},get locked(){let t=!0;return sO(e,e=>{e.locked||(t=!1)}),t}})).actions(e=>({set({draggable:t,contentEditable:n,styleEditable:r,resizable:i,...o}){void 0!==t&&sO(e,e=>{e.set({draggable:t})}),void 0!==n&&sO(e,e=>{e.set({contentEditable:n})}),void 0!==r&&sO(e,e=>{e.set({styleEditable:r})}),void 0!==i&&sO(e,e=>{e.set({resizable:i})}),Object.assign(e,o)},addElement(t,{skipSelect:n=!1}={}){let r=sj[t.type];if(!r){console.error("Can not find model with type "+t.type);return}t.children&&t.children.forEach(e=>{e.id=lG(10)});let i=r.create({id:lG(10),...t});return e.children.push(i),i.selectable&&!n&&e.store.selectElements([i.id]),i},setElementZIndex(t,n){let r=e.children.find(e=>e.id===t);r&&((0,iq.detach)(r),e.children.remove(r),e.children.splice(n,0,r))}})),sA=[],sj={svg:sS,text:sw,image:sx,group:sT,line:sE,video:s_,figure:sC},sN=[],sR="",sL="polotno_clipboard",sI=e=>{sN=JSON.parse(JSON.stringify(e));try{localStorage.setItem(sL,JSON.stringify(e))}catch(e){}},sM=()=>{try{let e=localStorage.getItem(sL);if(e)return JSON.parse(e)}catch(e){}return sN};var x=g("2SBKn");let sD=(0,x.observable)({toolbar:{duration:"Duration",opacity:"Opacity",effects:"Effects",blur:"Blur",textBackground:"Background",backgroundCornerRadius:"Corner radius",backgroundOpacity:"Opacity",backgroundPadding:"Padding",brightness:"Brightness",sepia:"Sepia",grayscale:"Grayscale",textStroke:"Text Stroke",shadow:"Shadow",border:"Border",cornerRadius:"Corner Radius",position:"Position",layering:"Layering",toForward:"To forward",up:"Up",down:"Down",toBottom:"To bottom",alignLeft:"Align left",alignCenter:"Align center",alignRight:"Align right",alignTop:"Align top",alignMiddle:"Align middle",alignBottom:"Align bottom",flip:"Flip",flipHorizontally:"Flip horizontally",flipVertically:"Flip vertically",fitToBackground:"Fit to page",removeBackground:"Remove background",removeBackgroundTitle:"Remove background from image",cancelRemoveBackground:"Cancel",confirmRemoveBackground:"Confirm",crop:"Crop",cropDone:"Done",cropCancel:"Cancel",clip:"Apply mask",removeClip:"Remove mask",removeMask:"Remove mask",transparency:"Transparency",lockedDescription:"Object is locked. Unlock it to allow changes from canvas.",unlockedDescription:"Object is unlocked. Lock it to prevent changes from canvas.",removeElements:"Remove elements",duplicateElements:"Duplicate elements",download:"Download",saveAsImage:"Save as image",saveAsPDF:"Save as PDF",lineHeight:"Line height",letterSpacing:"Letter spacing",offsetX:"Offset X",offsetY:"Offset Y",color:"Color",selectable:"Selectable",draggable:"Draggable",removable:"Removable",resizable:"Resizable",contentEditable:"Can change content",styleEditable:"Can change style",alwaysOnTop:"Always on top",showInExport:"Show in export",ungroupElements:"Ungroup",groupElements:"Group",lineSize:"Line size",fade:"Fade",move:"Move",zoom:"Zoom",animate:"Animate",rotate:"Rotate",none:"None",bounce:"Bounce",blink:"Blink",spaceEvenly:"Space evenly",horizontalDistribution:"Horizontally",verticalDistribution:"Vertically",strokeWidth:"Stroke Width",colorPicker:{solid:"Solid",linear:"Linear"}},workspace:{noPages:"There are no pages yet...",addPage:"Add page",removePage:"Remove page",duplicatePage:"Duplicate page",moveUp:"Move up",moveDown:"Move down"},scale:{reset:"Reset"},error:{removeBackground:"Ops! Something went wrong. Background can not be removed."},sidePanel:{templates:"Templates",searchTemplatesWithSameSize:"Show templates with the same size",searchPlaceholder:"Search...",otherFormats:"Other formats",noResults:"No results",error:"Loading is failed...",text:"Text",uploadFont:"Upload font",myFonts:"My fonts",photos:"Photos",videos:"Videos",animations:"Animations",effects:"Effects",elements:"Elements",shapes:"Shapes",lines:"Lines",upload:"Upload",uploadImage:"Upload Image",uploadTip:"Do you want to upload your own images?",background:"Background",resize:"Resize",layers:"Layers",layerTypes:{image:"Image",text:"Text",svg:"SVG",line:"Line",figure:"Figure",group:"Group"},layersTip:"Elements on your active page:",noLayers:"No elements on the page...",namePlaceholder:"Type element name...",useMagicResize:"Use magic resize",clipImage:"Mask image",width:"Width",height:"Height",magicResizeDescription:"Magic resize will automatically resize and move all elements on the canvas",headerText:"Header",createHeader:"Create header",subHeaderText:"Sub Header",createSubHeader:"Create sub header",bodyText:"Body text",createBody:"Create body text"}}),sF=e=>e&&"object"==typeof e;(0,x.action)((e,{validate:t=!1}={})=>{t&&function e(t,n,r=""){Object.keys(n).forEach(i=>{let o=n[i],a=r?`${r}.${i}`:i;sF(o)?sF(t[i])?e(t[i],o,a):console.warn(`Missing nested translation object at '${a}'`):void 0===t[i]&&console.warn(`Missing translation '${a}'`)})}(e,sD),function e(t,n){Object.keys(n).forEach(r=>{let i=t[r],o=n[r];sF(o)&&sF(i)?e(i,o):t[r]=o})}(sD,e)});let sz={},sB=e=>{let t=function(e,t){var n,r=t.split("."),i=e;for(n=0;n<r.length;++n){if(void 0==i[r[n]])return;i=i[r[n]]}return i}(sD,e);if(void 0!==t)return t;sz[e]||(sz[e]=!0,console.warn(`Missing translation '${e}'`));let n=e.split("."),r=n[n.length-1]||" ";return r.charAt(0).toUpperCase()+r.slice(1)},sU=(e,t,n)=>Math.max(t,Math.min(n,e)),sH=`Polotno warning: <Workspace /> component can not automatically detect its size.
+    `}),n.innerHTML=i,document.getElementsByTagName("head")[0].appendChild(n),iN[e.fontFamily]=!0}(n):function(e){if(iA[e])return;let t=e.replace(/ /g,"+"),n=`https://fonts.googleapis.com/css?family=${t}:${ij}`,r=document.createElement("link");r.type="text/css",r.href=n,r.rel="stylesheet",document.getElementsByTagName("head")[0].appendChild(r),iA[e]=!0}(t),await iT(t)},validate:e=>sf.validate(e,[{path:"",type:sf}]).map(e=>({path:"store"+e.context.map(e=>e.path).join("."),message:e.message}))})),sp=(0,iq.types).model("Node",{id:iq.types.identifier,type:"none",name:"",opacity:1,custom:(0,iq.types).frozen(),visible:!0,selectable:!0,removable:!0,alwaysOnTop:!1,showInExport:!0}).preProcessSnapshot(e=>{for(var t in e)null===e[t]&&(e[t]=void 0);return e}).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(){return(0,iq.getParentOfType)(e,sd)},get store(){return(0,iq.getParentOfType)(e,sf)},get top(){let t=e;for(;;){if(!(0,iq.hasParentOfType)(t,sT))return t;t=(0,iq.getParentOfType)(t,sT)}},get parent(){if((0,iq.hasParentOfType)(e,sT))return(0,iq.getParentOfType)(e,sT);if((0,iq.hasParentOfType)(e,sd))return(0,iq.getParentOfType)(e,sd);if((0,iq.hasParentOfType)(e,sf))return(0,iq.getParentOfType)(e,sf);return null},get zIndex(){return e.parent.children.indexOf(e)}})).actions(e=>({toJSON:()=>({...(0,iq.getSnapshot)(e)})})).actions(e=>({clone(t={},{skipSelect:n=!1}={}){let r=JSON.parse(JSON.stringify(e.toJSON()));return t.id=t.id||lG(10),sO(r,e=>{e.id=lG(10)}),Object.assign(r,t),e.page.addElement(r,{skipSelect: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])},setZIndex(t){e.parent.setElementZIndex(e.id,t)},beforeDestroy(){}}));var iq=g("58B0H");let sg={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}}},sm={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}},rotate:({dTime:e,element:t,animation:n})=>{let r=n.duration;return function(e,t){let n=function(e){let t=aE(e.rotation||0);return{x:e.x+e.width/2*Math.cos(t)+e.height/2*Math.sin(-t),y:e.y+e.height/2*Math.cos(t)+e.width/2*Math.sin(t)}}(e);return function(e,t,n){let r=aE(t),i=n.x+(e.x-n.x)*Math.cos(r)-(e.y-n.y)*Math.sin(r),o=n.y+(e.x-n.x)*Math.sin(r)+(e.y-n.y)*Math.cos(r);return{...e,rotation:e.rotation+t,x:i,y:o}}(e,t,n)}({x:t.x,y:t.y,width:t.width,height:t.height,rotation:t.rotation},e/r*360)},blink:({dTime:e,element:t,animation:n})=>{let r=n.duration,i=e%r/(r/2);return{opacity:t.opacity*(i<=1?i:2-i)}},bounce:({dTime:e,element:t,animation:n})=>{let r=n.duration,i={},o={x:t.x+t.width/3,y:t.y+t.height/3,width:t.width/3,height:t.height/3,fontSize:t.fontSize/3},a={x:t.x,y:t.y,width:t.width,height:t.height,fontSize:t.fontSize},l=e%r/(r/2),s=l<=1?l:2-l;for(let e in o){let t=o[e],n=a[e]-t;i[e]=t+s*n}return i},move:({dTime:e,element:t,animation:n})=>{let r=sg[n.data.direction]||sg.right,i={};for(var o in r.from){let a=r.from[o],l=r.to[o];"exit"===n.type&&(a=r.to[o],l=-r.from[o]);let s=t[o]+a,u=t[o]+l-s;i[o]=s+e/n.duration*u}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}},sv=({element:e,dTime:t,animation:n})=>{let r=sm[n.name];return r?r({element:e,dTime:t,animation:n}):(console.error("Can not find animation type: "+n.name),{})};var x=g("2SBKn");let sy=(0,iq.types).model("Animation",{delay:0,duration:500,enabled:!0,type:(0,iq.types).enumeration("Type",["enter","exit","loop"]),name:"none",data:(0,iq.types).frozen({})}),sb=sp.named("Shape").props({x:0,y:0,width:100,height:100,rotation:0,opacity:1,animations:(0,iq.types).array(sy),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=>{let t={...e,x:e.x||0,y:e.y||0};return"width"in e&&(t.width=t.width||1),"height"in e&&(t.height=t.height||1),e.locked&&(t.draggable=!1,t.contentEditable=!1,t.styleEditable=!1,t.resizable=!1,t.removable=!1),t}).views(e=>{let t=(0,x.observable)({x:e.x,y:e.y,width:e.width,height:e.height,rotation:e.rotation,opacity:e.opacity,color:e.color,fontSize:e.fontSize}),n=(0,x.action)(e=>{Object.assign(t,e)});return{get a(){let{currentTime:r}=e.store;if(n({x:e.x,y:e.y,width:e.width,height:e.height,rotation:e.rotation,opacity:e.opacity,color:e.color,fontSize:e.fontSize}),0===r)return t;let i=r-e.page.startTime;if(i>e.page.duration||i<0)return t;let o=e.store.animatedElementsIds;if(o.length&&!o.includes(e.id))return t;let a=e.animations.find(e=>"enter"===e.type);if(a?.enabled&&i<a.delay&&n({opacity:0}),a?.enabled&&i>=a.delay&&i<=a.delay+a.duration){let t=i-a.delay;n(sv({element:e,animation:a,dTime:t}))}let l=e.animations.find(e=>"exit"===e.type);if(l?.enabled&&i>=e.page.duration-l.duration-l.delay&&i<=e.page.duration-l.delay){let t=i-(e.page.duration-l.duration-l.delay);n(sv({element:e,animation:l,dTime:t}))}l?.enabled&&i>=e.page.duration-l.delay&&n({opacity:0});let s=e.animations.find(e=>"loop"===e.type);return s?.enabled&&n(sv({element:e,animation:s,dTime:i})),t},animated:t=>e.a[t]}}).actions(e=>({setAnimation(t,n){let r=e.animations.find(e=>e.type===t);r?Object.assign(r,n):e.animations.push({type:t,...n})}}));var iq=g("58B0H");let sw=sb.named("Text").props({type:"text",text:"",placeholder:"",fontSize:14,fontFamily:"Roboto",fontStyle:"normal",fontWeight:"normal",textDecoration:"",fill:"black",align:"center",width:100,height:0,verticalAlign:"top",strokeWidth:0,stroke:"black",lineHeight:(0,iq.types).optional((0,iq.types).union(iq.types.number,iq.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()}})),sx=sb.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(t){e._cropModeEnabled=t??!e._cropModeEnabled,e._cropModeEnabled?e.store.history.startTransaction():e.store.history.endTransaction()},beforeDestroy(){e._cropModeEnabled&&e.store.history.endTransaction()}})),s_=sx.named("Video").props({type:"video",duration:0,startTime:0,endTime:1});var iq=g("58B0H");let sE=sb.named("Line").props({type:"line",width:400,height:10,color:"black",dash:(0,iq.types).array(iq.types.number),startHead:"",endHead:""}).actions(e=>({}));var iq=g("58B0H");let sS=sb.named("SVG").props({type:"svg",src:"",maskSrc:"",cropX:0,cropY:0,cropWidth:1,cropHeight:1,keepRatio:!0,flipX:!1,flipY:!1,width:100,height:100,borderColor:"black",borderSize:0,cornerRadius:0,colorsReplace:(0,iq.types).map(iq.types.string)}).preProcessSnapshot(e=>({...e,src:e.src||e.svgSource})).actions(e=>({replaceColor(t,n){e.colorsReplace.set(t,n)}}));var iq=g("58B0H");let sC=sb.named("Figure").props({type:"figure",subType:"rect",fill:"rgb(0, 161, 255)",dash:(0,iq.types).array(iq.types.number),strokeWidth:0,stroke:"rgba(98, 197, 255, 1)",cornerRadius:0}),sO=(e,t)=>{if(e.children)for(let n of e.children){if(!0===t(n))break;sO(n,t)}},sk=[...Array(20)].map((e,t)=>(0,iq.types).late(()=>sA[t])),sP=(0,iq.types).union({dispatcher:e=>{let t=sj[e.type];if(!t)throw Error(`Unknown element type: "${e.type}"`);return t}},sS,sw,sx,sE,s_,sC,(0,iq.types).late(()=>sT),...sk),sT=sp.named("Group").props({type:"group",children:(0,iq.types).array(sP)}).views(e=>({get draggable(){let t=!0;return sO(e,e=>{e.draggable||(t=!1)}),t},get resizable(){let t=!0;return sO(e,e=>{e.resizable||(t=!1)}),t},get contentEditable(){let t=!0;return sO(e,e=>{e.contentEditable||(t=!1)}),t},get styleEditable(){let t=!0;return sO(e,e=>{e.styleEditable||(t=!1)}),t},get locked(){let t=!0;return sO(e,e=>{e.locked||(t=!1)}),t}})).actions(e=>({set({draggable:t,contentEditable:n,styleEditable:r,resizable:i,...o}){void 0!==t&&sO(e,e=>{e.set({draggable:t})}),void 0!==n&&sO(e,e=>{e.set({contentEditable:n})}),void 0!==r&&sO(e,e=>{e.set({styleEditable:r})}),void 0!==i&&sO(e,e=>{e.set({resizable:i})}),Object.assign(e,o)},addElement(t,{skipSelect:n=!1}={}){let r=sj[t.type];if(!r){console.error("Can not find model with type "+t.type);return}t.children&&t.children.forEach(e=>{e.id=lG(10)});let i=r.create({id:lG(10),...t});return e.children.push(i),i.selectable&&!n&&e.store.selectElements([i.id]),i},setElementZIndex(t,n){let r=e.children.find(e=>e.id===t);r&&((0,iq.detach)(r),e.children.remove(r),e.children.splice(n,0,r))}})),sA=[],sj={svg:sS,text:sw,image:sx,group:sT,line:sE,video:s_,figure:sC},sN=[],sR="",sL="polotno_clipboard",sI=e=>{sN=JSON.parse(JSON.stringify(e));try{localStorage.setItem(sL,JSON.stringify(e))}catch(e){}},sM=()=>{try{let e=localStorage.getItem(sL);if(e)return JSON.parse(e)}catch(e){}return sN};var x=g("2SBKn");let sD=(0,x.observable)({toolbar:{duration:"Duration",opacity:"Opacity",effects:"Effects",blur:"Blur",textBackground:"Background",backgroundCornerRadius:"Corner radius",backgroundOpacity:"Opacity",backgroundPadding:"Padding",brightness:"Brightness",sepia:"Sepia",grayscale:"Grayscale",textStroke:"Text Stroke",shadow:"Shadow",border:"Border",cornerRadius:"Corner Radius",position:"Position",layering:"Layering",toForward:"To forward",up:"Up",down:"Down",toBottom:"To bottom",alignLeft:"Align left",alignCenter:"Align center",alignRight:"Align right",alignTop:"Align top",alignMiddle:"Align middle",alignBottom:"Align bottom",flip:"Flip",flipHorizontally:"Flip horizontally",flipVertically:"Flip vertically",fitToBackground:"Fit to page",removeBackground:"Remove background",removeBackgroundTitle:"Remove background from image",cancelRemoveBackground:"Cancel",confirmRemoveBackground:"Confirm",crop:"Crop",cropDone:"Done",cropCancel:"Cancel",clip:"Apply mask",removeClip:"Remove mask",removeMask:"Remove mask",transparency:"Transparency",lockedDescription:"Object is locked. Unlock it to allow changes from canvas.",unlockedDescription:"Object is unlocked. Lock it to prevent changes from canvas.",removeElements:"Remove elements",duplicateElements:"Duplicate elements",download:"Download",saveAsImage:"Save as image",saveAsPDF:"Save as PDF",lineHeight:"Line height",letterSpacing:"Letter spacing",offsetX:"Offset X",offsetY:"Offset Y",color:"Color",selectable:"Selectable",draggable:"Draggable",removable:"Removable",resizable:"Resizable",contentEditable:"Can change content",styleEditable:"Can change style",alwaysOnTop:"Always on top",showInExport:"Show in export",ungroupElements:"Ungroup",groupElements:"Group",lineSize:"Line size",fade:"Fade",move:"Move",zoom:"Zoom",animate:"Animate",rotate:"Rotate",none:"None",bounce:"Bounce",blink:"Blink",spaceEvenly:"Space evenly",horizontalDistribution:"Horizontally",verticalDistribution:"Vertically",strokeWidth:"Stroke Width",colorPicker:{solid:"Solid",linear:"Linear"}},workspace:{noPages:"There are no pages yet...",addPage:"Add page",removePage:"Remove page",duplicatePage:"Duplicate page",moveUp:"Move up",moveDown:"Move down"},scale:{reset:"Reset"},error:{removeBackground:"Ops! Something went wrong. Background can not be removed."},sidePanel:{templates:"Templates",searchTemplatesWithSameSize:"Show templates with the same size",searchPlaceholder:"Search...",otherFormats:"Other formats",noResults:"No results",error:"Loading is failed...",text:"Text",uploadFont:"Upload font",myFonts:"My fonts",photos:"Photos",videos:"Videos",animations:"Animations",effects:"Effects",elements:"Elements",shapes:"Shapes",lines:"Lines",upload:"Upload",uploadImage:"Upload Image",uploadTip:"Do you want to upload your own images?",background:"Background",resize:"Resize",layers:"Layers",layerTypes:{image:"Image",text:"Text",svg:"SVG",line:"Line",figure:"Figure",group:"Group"},layersTip:"Elements on your active page:",noLayers:"No elements on the page...",namePlaceholder:"Type element name...",useMagicResize:"Use magic resize",clipImage:"Mask image",width:"Width",height:"Height",magicResizeDescription:"Magic resize will automatically resize and move all elements on the canvas",headerText:"Header",createHeader:"Create header",subHeaderText:"Sub Header",createSubHeader:"Create sub header",bodyText:"Body text",createBody:"Create body text"}}),sF=e=>e&&"object"==typeof e;(0,x.action)((e,{validate:t=!1}={})=>{t&&function e(t,n,r=""){Object.keys(n).forEach(i=>{let o=n[i],a=r?`${r}.${i}`:i;sF(o)?sF(t[i])?e(t[i],o,a):console.warn(`Missing nested translation object at '${a}'`):void 0===t[i]&&console.warn(`Missing translation '${a}'`)})}(e,sD),function e(t,n){Object.keys(n).forEach(r=>{let i=t[r],o=n[r];sF(o)&&sF(i)?e(i,o):t[r]=o})}(sD,e)});let sz={},sB=e=>{let t=function(e,t){var n,r=t.split("."),i=e;for(n=0;n<r.length;++n){if(void 0==i[r[n]])return;i=i[r[n]]}return i}(sD,e);if(void 0!==t)return t;sz[e]||(sz[e]=!0,console.warn(`Missing translation '${e}'`));let n=e.split("."),r=n[n.length-1]||" ";return r.charAt(0).toUpperCase()+r.slice(1)},sU=(e,t,n)=>Math.max(t,Math.min(n,e)),sH=`Polotno warning: <Workspace /> component can not automatically detect its size.
 Width or height of parent elements is equal 0.
 Please make sure it has non-zero size. You may need to adjust it with your styles. <Workspace /> will automatically fit into parent container.
 For simpler debugging here is the log of the parent element:`,sV=(e,t,n,r,i,o)=>{let a=c(w).useRef({width:t,height:n}),l=c(w).useRef({top:0,left:0}),s=c(w).useRef(!1),u=c(w).useRef(i.pages.length);s.current=u.current!==i.pages.length,u.current=i.pages.length,c(w).useEffect(()=>{let t=e.current,n=e=>{l.current={top:t.scrollTop,left:t.scrollLeft}};return t.addEventListener("scroll",n),()=>{t.removeEventListener("scroll",n)}},[]),c(w).useLayoutEffect(()=>{if(!e.current||s.current)return;let r=e.current,i=(l.current.left+r.offsetWidth/2)/a.current.width,u=(l.current.top+r.offsetHeight/2)/a.current.height;o.current=!0,r.scrollLeft=i*t-r.offsetWidth/2,r.scrollTop=u*n-r.offsetHeight/2,a.current={width:t,height:n}},[r,t,n])},sq=(e,t,n,r,i)=>{let o=c(w).useRef(!1),a=c(w).useRef(null);c(w).useEffect(()=>{let t=e.current,n=()=>{if(i.current)return};return t.addEventListener("scroll",n),()=>{t.removeEventListener("scroll",n)}},[]);let l=n.pages.indexOf(n.activePage);return c(w).useLayoutEffect(()=>{if(!n.activePage||!e.current||o.current)return;let r=e.current,a=n.pages.indexOf(n.activePage)*t;Math.abs(a-r.scrollTop)>.5*t&&(i.current=!0,r.scrollTop=a)},[n.activePage,l]),{handleScroll:e=>{if(i.current){i.current=!1;return}o.current=!0,clearTimeout(a.current),a.current=setTimeout(()=>{o.current=!1},300);let t=e.currentTarget.childNodes[0].offsetHeight,l=Math.floor((e.currentTarget.scrollTop+r.height/3)/t),s=n.pages[l];s&&s.select()}}},sG=({store:e})=>(0,v.jsxs)("div",{style:{position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",textAlign:"center"},children:[(0,v.jsx)("p",{children:sB("workspace.noPages")}),(0,v.jsx)("button",{onClick:()=>{e.addPage()},children:sB("workspace.addPage")})]}),sW=({width:e,height:t,xPadding:n,yPadding:r,backgroundColor:i})=>(0,v.jsx)("div",{style:{width:e+"px",height:t+"px",backgroundColor:i,paddingLeft:n+"px",paddingRight:n+"px",paddingTop:r+"px",paddingBottom:r+"px"},children:(0,v.jsx)("div",{style:{width:" 100%",height:"100%",backgroundColor:"white"}})}),s$=j(({store:e,pageControlsEnabled:t,backgroundColor:n,pageBorderColor:r,activePageBorderColor:i,bleedColor:o,components:a,onKeyDown:l,paddingX:s,paddingY:u,altCloneEnabled:d=!0,visiblePagesOffset:h})=>{let f=s??20,p=u??55,[g,m]=c(w).useState({width:100,height:100}),y=c(w).useRef(g),b=c(w).useRef(null),x=c(w).useRef(null),_=e.bleedVisible?Math.max(0,...e.pages.map(e=>e.bleed)):0,E=Math.max(...e.pages.map(e=>e.computedWidth)),S=Math.max(...e.pages.map(e=>e.computedHeight)),C=E+2*_,O=S+2*_,k=async({skipTimeout:t}={skipTimeout:!1})=>{if(t||await new Promise(e=>setTimeout(e,50)),null===b.current)return;let n=b.current.getBoundingClientRect();(0===n.width||0===n.height)&&(console.warn(sH),console.log(b.current));let r=x.current.clientWidth||n.width,i={width:r,height:n.height};(y.current.width!==i.width||y.current.height!==i.height)&&(m(i),y.current=i);let o=Math.max(Math.min((r-2*f)/C,(n.height-2*p)/O),.01);e.scaleToFit!==o&&(e.setScale(o),e._setScaleToFit(o))};c(w).useLayoutEffect(()=>{k({skipTimeout:!0})},[]),c(w).useEffect(()=>{k()},[C,O]),c(w).useEffect(()=>{let e=b.current;if(window.ResizeObserver){let t=new ResizeObserver(()=>{k({skipTimeout:!0})});return t.observe(e),()=>t.unobserve(e)}{let e=setInterval(()=>{k({skipTimeout:!0})},100);return()=>clearInterval(e)}},[C,O]);let P=Math.max(f,(g.width-C*e.scale)/2),T=O*e.scale*e.pages.length,A=Math.max(p,(g.height-T)/e.pages.length/2);c(w).useEffect(()=>{let t=t=>{(l||function(e,t){if(document.activeElement?.tagName==="INPUT"||document.activeElement?.tagName==="TEXTAREA"||document.activeElement?.contentEditable==="true")return;let n=t.selectedElements.filter(e=>e.removable),r=n.map(e=>e.id);(46===e.keyCode||8===e.keyCode)&&t.deleteElements(r);let i=e.ctrlKey||e.metaKey,o=e.shiftKey;if(i&&!o&&"KeyZ"===e.code&&(e.preventDefault(),t.history.undo()),i&&o&&"KeyZ"===e.code&&(e.preventDefault(),t.history.redo()),i&&"KeyA"===e.code){e.preventDefault();let n=t.activePage?.children.filter(e=>e.selectable),r=n?.map(e=>e.id)||[];t.selectElements(r)}if(i&&"KeyC"===e.code&&(e.preventDefault(),sR=t.activePage?.id,sI(t.selectedElements.map(e=>e.toJSON()))),i&&"KeyX"===e.code&&(e.preventDefault(),sR=t.activePage?.id,sI(t.selectedElements.map(e=>e.toJSON())),t.deleteElements(n)),i&&"KeyV"===e.code){e.preventDefault();let n=0;sR===t.activePage?.id&&(n=t.width/20),sR=t.activePage?.id,t.history.transaction(()=>{let e=[],r=sM();sO({children:r},e=>{delete e.id,"group"!==e.type&&(e.x+=n,e.y+=n)}),r.forEach(n=>{let r=t.activePage?.addElement(n);r&&e.push(r.id)}),sI(r),t.selectElements(e)})}"ArrowDown"===e.code&&(e.preventDefault(),t.selectedElements.forEach(e=>{e.set({y:e.y+1})})),"ArrowUp"===e.code&&(e.preventDefault(),t.selectedElements.forEach(e=>{e.set({y:e.y-1})})),"ArrowLeft"===e.code&&(e.preventDefault(),t.selectedElements.forEach(e=>{e.set({x:e.x-1})})),"ArrowRight"===e.code&&(e.preventDefault(),t.selectedElements.forEach(e=>{e.set({x:e.x+1})}))})(t,e)};return window.addEventListener("keydown",t),()=>window.removeEventListener("keydown",t)},[]),c(w).useEffect(()=>{let t=t=>{if(t.ctrlKey||t.metaKey){t.preventDefault();let n=Math.max(3,e.scaleToFit),r=Math.min(.1,e.scaleToFit),i=sU(t.deltaY<0?1.05*e.scale:e.scale/1.05,r,n);e.setScale(i);return}};return x.current?.addEventListener("wheel",t),()=>x.current?.removeEventListener("wheel",t)},[]);let j=c(w).useRef(!1);sV(x,C*e.scale+2*P,O*e.scale+2*A,e.scale,e,j);let{handleScroll:N}=sq(x,O*e.scale+2*A,e,g,j),R=g.width>=C*e.scale+2*P,L=n||"rgba(232, 232, 232, 0.9)",I=e.pages.indexOf(e.activePage),M=a?.NoPages||sG,D=h??Math.min(3,Math.max(1,Math.ceil(g.height/2/(O*e.scale))));return(0,v.jsx)("div",{ref:b,style:{width:"100%",height:"100%",position:"relative",outline:"none",flex:1,backgroundColor:L},tabIndex:0,className:"polotno-workspace-container",children:(0,v.jsxs)("div",{ref:x,onScroll:N,style:{position:"absolute",top:0,left:0,width:"100%",height:"100%",overflow:"auto",overflowX:R?"hidden":"auto"},className:"polotno-workspace-inner",children:[e.pages.map((n,l)=>Math.abs(l-I)<=D||n._exportingOrRendering?(0,v.jsx)(lM,{page:n,xPadding:P,yPadding:A,width:C*e.scale+2*P,height:O*e.scale+2*A,store:e,pageControlsEnabled:t,backColor:L,pageBorderColor:r||"lightgrey",activePageBorderColor:i||"rgb(0, 161, 255)",altCloneEnabled:d,bleedColor:o||"rgba(255, 0, 0, 0.1)",components:a},n.id):(0,v.jsx)(sW,{width:C*e.scale+2*P,height:O*e.scale+2*A,backgroundColor:L,xPadding:P,yPadding:A},n.id)),e.rulesVisible&&(0,v.jsx)(lq,{store:e,xPadding:P,yPadding:A,width:C*e.scale+2*P,height:O*e.scale+2*A}),0===e.pages.length&&(0,v.jsx)(M,{store:e})]})})});g("8NFma");var sK=g("gztBd"),sY={};!/*!
@@ -195,7 +195,7 @@ For simpler debugging here is the log of the parent element:`,sV=(e,t,n,r,i,o)=>
   .bp5-dark & {
     filter: invert(1);
   }
-`,C8=({fontFamily:e,handleClick:t,modifiers:n,store:r,isCustom:i})=>{let[o,a]=c(w).useState(!i);if(c(w).useEffect(()=>{o||r.loadFont(e)},[e,o]),"_divider"===e)return(0,v.jsx)("div",{style:{paddingTop:"10px"},children:(0,v.jsx)(vk,{})});let l=o?(0,v.jsx)(C6,{src:ln(e),alt:e,onError:()=>{a(!1)}}):e;return(0,v.jsx)(vA,{text:l,active:n.active,disabled:n.disabled,onClick:t,style:{fontFamily:'"'+e+'"'}})},C9=({onChange:e,defaultValue:t})=>{let n=c(w).useRef(null);return c(w).useEffect(()=>{n.current&&n.current.focus()},[]),(0,v.jsx)(vq,{leftIcon:"search",inputRef:n,defaultValue:t,onChange:t=>e(t.target.value)})},C7=({store:e,fonts:t,activeFont:n,activeFontLabel:r,onFontSelect:i})=>{let[o,a]=c(w).useState(""),l=t.filter(e=>e.toLowerCase().indexOf(o.toLowerCase())>=0);return(0,v.jsx)(vi,{content:(0,v.jsxs)("div",{children:[(0,v.jsx)(C9,{onChange:e=>a(e),defaultValue:o}),(0,v.jsx)("div",{style:{paddingTop:"5px"},children:(0,v.jsx)(yg,{innerElementType:c(w).forwardRef((e,t)=>(0,v.jsx)(vS,{ref:t,...e})),height:Math.min(400,30*l.length)+10,width:210,itemCount:l.length,itemSize:30,children:({index:t,style:r})=>{let o=l[t];return(0,v.jsx)("div",{style:r,children:(0,v.jsx)(C8,{fontFamily:o,modifiers:{active:n===o},handleClick:()=>i(o),store:e,isCustom:e.fonts.find(e=>e.fontFamily===o)||iS.find(e=>e.fontFamily===o)},o)})}})})]}),children:(0,v.jsx)(ge,{text:r,rightIcon:"caret-down",minimal:!0,style:{marginRight:"5px",fontFamily:'"'+n+'"',overflow:"hidden",whiteSpace:"nowrap",maxHeight:"30px"}})})},Oe=j(({elements:e,store:t})=>{let{data:n,mutate:r}=br(lt(),bc,{isPaused:()=>iE(),fallbackData:[]});c(w).useEffect(()=>{r()},[iE()]);let i=t.fonts.concat(iS).map(e=>e.fontFamily).concat(n?.length&&!iE()?n:ix),o=e[0].fontFamily;o.length>15&&(o=o.slice(0,15)+"...");let a=[];t.find(e=>("text"===e.type&&a.push(e.fontFamily),!1));let l=[...new Set(a.concat("_divider").concat(i))];return(0,v.jsx)(C7,{fonts:l,activeFont:e[0].fontFamily,activeFontLabel:o,store:t,onFontSelect:n=>{t.history.transaction(()=>{e.forEach(e=>{e.set({fontFamily:n})})})}})}),Ot=j(({elements:e,store:t})=>(0,v.jsx)(v0,{onValueChange:n=>{t.history.transaction(()=>{e.forEach(e=>{e.set({fontSize:n,width:Math.max(n,e.width)})})})},value:Math.round(e[0].fontSize),style:{width:"50px"},min:5,max:4*t.height})),On=["left","center","right","justify"],Or=["top","middle","bottom"],Oi={top:(0,v.jsx)("span",{className:"bp5-icon",children:(0,v.jsx)(c(C3),{})}),middle:(0,v.jsx)("span",{className:"bp5-icon",children:(0,v.jsx)(c(C5),{})}),bottom:(0,v.jsx)("span",{className:"bp5-icon",children:(0,v.jsx)(c(C4),{})})},Oo=j(({elements:e,store:t})=>{let n=e[0];return(0,v.jsxs)(vU,{children:[(0,v.jsx)(ge,{minimal:!0,icon:"align-"+n.align,onClick:()=>{let r=(On.indexOf(n.align)+1+On.length)%On.length,i=On[r];t.history.transaction(()=>{e.forEach(e=>{e.set({align:i})})})}}),iR.textVerticalResizeEnabled&&(0,v.jsx)(ge,{minimal:!0,icon:Oi[n.verticalAlign],onClick:()=>{let r=(Or.indexOf(n.verticalAlign)+1+Or.length)%Or.length,i=Or[r];t.history.transaction(()=>{e.forEach(e=>{e.set({verticalAlign:i})})})}}),(0,v.jsx)(ge,{minimal:!0,icon:"bold",active:"bold"===n.fontWeight||"700"===n.fontWeight,onClick:()=>{let r="bold"===n.fontWeight||"700"===n.fontWeight;t.history.transaction(()=>{e.forEach(e=>{r?e.set({fontWeight:"normal"}):e.set({fontWeight:"bold"})})})}}),(0,v.jsx)(ge,{minimal:!0,icon:"italic",active:"italic"===n.fontStyle,onClick:()=>{let r="italic"===n.fontStyle;t.history.transaction(()=>{e.forEach(e=>{r?e.set({fontStyle:"normal"}):e.set({fontStyle:"italic"})})})}}),(0,v.jsx)(ge,{minimal:!0,icon:"underline",active:n.textDecoration.indexOf("underline")>=0,onClick:()=>{let r=n.textDecoration.split(" ");r.indexOf("underline")>=0?r=r.filter(e=>"underline"!==e):r.push("underline"),t.history.transaction(()=>{e.forEach(e=>{e.set({textDecoration:r.join(" ")})})})}}),(0,v.jsx)(ge,{minimal:!0,icon:"strikethrough",active:n.textDecoration.indexOf("line-through")>=0,onClick:()=>{let r=n.textDecoration.split(" ");r.indexOf("line-through")>=0?r=r.filter(e=>"line-through"!==e):r.push("line-through"),t.history.transaction(()=>{e.forEach(e=>{e.set({textDecoration:r.join(" ")})})})}})]})}),Oa=j(({elements:e,store:t})=>(0,v.jsx)(Cb,{value:e[0].fill,style:{marginRight:"5px"},gradientEnabled:!0,onChange:n=>t.history.transaction(()=>{e.forEach(e=>{e.set({fill:n})})}),store:t})),Ol=({value:e,onValueChange:t,...n})=>{let[r,i]=c(w).useState(e.toString());return c(w).useEffect(()=>{i(e.toString())},[e]),(0,v.jsx)(v0,{value:r,onValueChange:(e,n)=>{i(n),Number.isNaN(e)||t(e)},...n})},Os=j(({elements:e,store:t})=>{let n=e[0],r=n=>{t.history.transaction(()=>{e.forEach(e=>{e.set(n)})})},i="number"==typeof n.lineHeight?100*n.lineHeight:120;return(0,v.jsx)(vi,{content:(0,v.jsxs)("div",{style:{padding:"15px",width:"230px"},children:[(0,v.jsxs)("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"},children:[(0,v.jsx)("div",{children:sB("toolbar.lineHeight")}),(0,v.jsx)("div",{children:(0,v.jsx)(Ol,{value:Math.round(i),onValueChange:e=>{r({lineHeight:e/100})},style:{width:"50px"},min:50,max:250,buttonPosition:"none"})})]}),(0,v.jsx)(yt,{value:Math.round(i),onChange:e=>{r({lineHeight:e/100})},min:50,max:250,stepSize:1,showTrackFill:!1,labelRenderer:!1}),(0,v.jsxs)("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"},children:[(0,v.jsx)("div",{children:sB("toolbar.letterSpacing")}),(0,v.jsx)("div",{children:(0,v.jsx)(Ol,{value:Math.round(100*n.letterSpacing),onValueChange:e=>{r({letterSpacing:e/100})},style:{width:"50px"},min:-50,max:250,buttonPosition:"none"})})]}),(0,v.jsx)(yt,{value:Math.round(100*n.letterSpacing),onChange:e=>{r({letterSpacing:e/100})},min:-50,max:250,stepSize:1,showTrackFill:!1,labelRenderer:!1})]}),position:sJ.BOTTOM,children:(0,v.jsx)(ge,{icon:(0,v.jsx)(c(C2),{className:"bp5-icon",style:{fontSize:"20px"}}),minimal:!0})})}),Ou={TextFontFamily:Oe,TextFontSize:Ot,TextFontVariant:Oo,TextFill:Oa,TextSpacing:Os,TextFilters:CO,TextAnimations:C1},Oc=j(({store:e,components:t})=>{let n=e.selectedElements,r=vw({type:"text",usedItems:["TextFill","TextFontFamily","TextFontSize","TextFontVariant","TextSpacing","TextFilters",iR.animationsEnabled&&"TextAnimations"],components:t});return(0,v.jsx)(vx,{items:r,itemRender:r=>{let i=t[r]||Ou[r];return(0,v.jsx)(i,{elements:n,element:n[0],store:e},r)}})});g("8NFma");var Od={};Od=function(e){return ET({tag:"svg",attr:{viewBox:"0 0 24 24",fill:"currentColor"},child:[{tag:"path",attr:{d:"M10 10v5h2V4h2v11h2V4h2V2h-8C7.79 2 6 3.79 6 6s1.79 4 4 4zm-2 7v-3l-4 4 4 4v-3h12v-2H8z"}}]})(e)};var Oh={};Oh=function(e){return ET({tag:"svg",attr:{viewBox:"0 0 24 24",fill:"currentColor"},child:[{tag:"path",attr:{d:"M9 10v5h2V4h2v11h2V4h2V2H9C6.79 2 5 3.79 5 6s1.79 4 4 4zm12 8l-4-4v3H5v2h12v3l4-4z"}}]})(e)};var Of={};Of=function(e){return ET({tag:"svg",attr:{version:"1.1",id:"mdi-format-list-bulleted",viewBox:"0 0 24 24",fill:"currentColor"},child:[{tag:"path",attr:{d:"M7,5H21V7H7V5M7,13V11H21V13H7M4,4.5A1.5,1.5 0 0,1 5.5,6A1.5,1.5 0 0,1 4,7.5A1.5,1.5 0 0,1 2.5,6A1.5,1.5 0 0,1 4,4.5M4,10.5A1.5,1.5 0 0,1 5.5,12A1.5,1.5 0 0,1 4,13.5A1.5,1.5 0 0,1 2.5,12A1.5,1.5 0 0,1 4,10.5M7,19V17H21V19H7M4,16.5A1.5,1.5 0 0,1 5.5,18A1.5,1.5 0 0,1 4,19.5A1.5,1.5 0 0,1 2.5,18A1.5,1.5 0 0,1 4,16.5Z"}}]})(e)};var Op={};Op=function(e){return ET({tag:"svg",attr:{version:"1.1",id:"mdi-format-list-numbered",viewBox:"0 0 24 24",fill:"currentColor"},child:[{tag:"path",attr:{d:"M7,13V11H21V13H7M7,19V17H21V19H7M7,7V5H21V7H7M3,8V5H2V4H4V8H3M2,17V16H5V20H2V19H4V18.5H3V17.5H4V17H2M4.25,10A0.75,0.75 0 0,1 5,10.75C5,10.95 4.92,11.14 4.79,11.27L3.12,13H5V14H2V13.08L4,11H2V10H4.25Z"}}]})(e)};let Og=({html:e})=>{let t=document.createElement("div");return document.body.appendChild(t),t.innerHTML=e,t.style.display="none",av(t)},Om=e=>{e.root.parentElement.remove()},Ov=j(({element:e})=>(0,v.jsx)(v0,{onValueChange:t=>{e.set({fontSize:t})},value:Math.round(e.fontSize),style:{width:"50px"},min:5})),Oy=["left","center","right","justify"],Ob=["top","middle","bottom"],Ow={top:(0,v.jsx)("span",{className:"bp5-icon",children:(0,v.jsx)(c(C3),{})}),middle:(0,v.jsx)("span",{className:"bp5-icon",children:(0,v.jsx)(c(C5),{})}),bottom:(0,v.jsx)("span",{className:"bp5-icon",children:(0,v.jsx)(c(C4),{})})},Ox=j(({active:e,globalActive:t,format:n,element:r,disableGlobal:i,enableGlobal:o,icon:a})=>(0,v.jsx)(ge,{minimal:!0,icon:a,active:e,onMouseDown:e=>{e.preventDefault()},onClick:e=>{let a=window.__polotnoQuill;if(a){let e=a.getSelection();a.formatText(e.index,e.length,n,!ag.currentFormat[n],"user"),t&&i();return}(a=Og({html:r.text})).setSelection(0,a.getLength(),"api"),a.format(n,!1);let l=a.root.innerHTML;Om(a),r.set({text:l}),t?i():o()}})),O_={TextFontFamily:Oe,TextFontSize:Ov,TextFontVariant:j(({element:e,store:t})=>(0,v.jsxs)(vU,{children:[(0,v.jsx)(Ox,{format:"bold",active:ag.currentFormat.bold||"bold"===e.fontWeight||"700"===e.fontWeight,globalActive:"bold"===e.fontWeight||"700"===e.fontWeight,element:e,disableGlobal:()=>e.set({fontWeight:"normal"}),enableGlobal:()=>e.set({fontWeight:"bold"}),icon:"bold"}),(0,v.jsx)(Ox,{format:"italic",active:ag.currentFormat.italic||"italic"===e.fontStyle,globalActive:"italic"===e.fontStyle,element:e,disableGlobal:()=>e.set({fontStyle:"normal"}),enableGlobal:()=>e.set({fontStyle:"italic"}),icon:"italic"}),(0,v.jsx)(Ox,{format:"underline",active:ag.currentFormat.underline||e.textDecoration.indexOf("underline")>=0,globalActive:e.textDecoration.indexOf("underline")>=0,element:e,disableGlobal:()=>{let t=e.textDecoration.split(" ");t=t.filter(e=>"underline"!==e),e.set({textDecoration:t.join(" ")})},enableGlobal:()=>{let t=e.textDecoration.split(" ");t.push("underline"),e.set({textDecoration:t.join(" ")})},icon:"underline"}),(0,v.jsx)(Ox,{format:"strike",active:ag.currentFormat.strike||e.textDecoration.indexOf("line-through")>=0,globalActive:e.textDecoration.indexOf("line-through")>=0,element:e,disableGlobal:()=>{let t=e.textDecoration.split(" ");t=t.filter(e=>"line-through"!==e),e.set({textDecoration:t.join(" ")})},enableGlobal:()=>{let t=e.textDecoration.split(" ");t.push("line-through"),e.set({textDecoration:t.join(" ")})},icon:"strikethrough"}),(0,v.jsx)(ge,{minimal:!0,icon:"align-"+e.align,onClick:()=>{let t=(Oy.indexOf(e.align)+1+Oy.length)%Oy.length,n=Oy[t];e.set({align:n})}}),iR.textVerticalResizeEnabled&&(0,v.jsx)(ge,{minimal:!0,icon:Ow[e.verticalAlign],onClick:()=>{let n=(Ob.indexOf(e.verticalAlign)+1+Ob.length)%Ob.length,r=Ob[n];t.history.transaction(()=>{e.set({verticalAlign:r})})}}),(0,v.jsx)(ge,{minimal:!0,icon:"bullet"===ag.currentFormat.list?(0,v.jsx)("span",{className:"bp5-icon",children:(0,v.jsx)(c(Op),{style:{width:"20px",height:"20px"}})}):(0,v.jsx)("span",{className:"bp5-icon",children:(0,v.jsx)(c(Of),{style:{width:"20px",height:"20px"}})}),onMouseDown:e=>{e.preventDefault()},onClick:()=>{let t=window.__polotnoQuill,n=!t;t=t||Og({html:e.text}),n&&t.setSelection(0,t.getLength(),"api");let r=t.getFormat();r.list?"bullet"===r.list?t.format("list","ordered"):t.format("list",!1):t.format("list","bullet"),n&&(e.set({text:t.root.innerHTML}),Om(t))}})]})),TextFilters:CO,TextFill:j(({element:e,store:t})=>(0,v.jsx)(Cb,{value:ag.currentFormat.color||e.fill,gradientEnabled:!0,onChange:t=>{let n=window.__polotnoQuill,r=n?.getSelection(),i=r?.length>=n?.getLength()-1;if(n&&!i&&r?.length)n.formatText(r.index,r.length,"color",t,"user");else{var o=e.text.replace(/style=".*?"/g,"");e.set({fill:t,text:o})}},store:t})),TextSpacing:Os,TextDirection:j(({element:e})=>{let t="rtl"===e.dir?c(Od):c(Oh);return(0,v.jsx)(ge,{icon:(0,v.jsx)(t,{className:"bp5-icon",style:{fontSize:"20px"}}),minimal:!0,onClick:()=>{e.set({dir:"rtl"===e.dir?"ltr":"rtl"})}})}),TextAnimations:C1},OE=j(({store:e,components:t})=>{let n=e.selectedElements,r=e.selectedElements[0],i=vw({type:"text",usedItems:["TextFill","TextFontFamily","TextFontSize","TextFontVariant","TextSpacing","TextFilters",iR.animationsEnabled&&"TextAnimations"],components:t});return(0,v.jsx)(vx,{items:i,itemRender:i=>{let o=t[i]||O_[i];return(0,v.jsx)(o,{element:r,elements:n,store:e},i)}})});var w=g("8NFma"),sK=g("gztBd"),w=g("8NFma"),pQ=g("leH9B"),OS=w.forwardRef(function(e,t){var n=e.size>=pQ.IconSize.LARGE,r=n?pQ.IconSize.LARGE:pQ.IconSize.STANDARD,i="".concat(-1*r/.05/2);return w.createElement(p3,(0,sK.__assign)({iconName:"crop",ref:t},e),w.createElement("path",{d:n?"M280 20C280 8.954 288.954 0 300 0C311.046 0 320 8.954 320 20L320 80L380 80C391.046 80 400 88.954 400 100C400 111.046 391.046 120 380 120L120 120L120 380.00002C120 391.04574 111.0458 400.0000252612 100 400.0000262268C88.9544 400.0000271924 80 391.04576 80 380.00002L80 320L20 320C8.95434 320 0.0000271924 311.0458 0.0000262268 300C0.0000252612 288.9544 8.95434 280 20 280L80 280L80 100C80 88.954 88.9544 80 100 80L280 80L280 20zM300 320L160 320L160 280L280 280L280 160L320 160L320 300.0002C320 311.0458 311.046 320 300 320zM0 400H400V0H0V400z":"M220 20C220 8.954 228.954 0 240 0C251.046 0 260 8.954 260 20V60H300C311.046 60 320 68.954 320 80C320 91.046 311.046 100 300 100H100.0002V300C100.0002 311.0457 91.0458 319.999999034354 80.0002 320C68.9544 320.000000965646 60.0002 311.04568 60.0002 300L60.0002 260L20.0002 260C8.95444 260 0.0001154066 251.0456 0.000152588 240C0.0001516224 228.9542 8.95444 220 20.0002 220L60.0002 220L60.0002 80C60.0002 68.954 68.9544 60 80.0002 60H220V20zM240 260.0002L120.0002 260.0002V220.0002L220 220.0002L220 120H260L260 240.0002C260 251.0458 251.046 260.0002 240 260.0002z",fillRule:"evenodd",transform:"scale(0.05, -0.05) translate(".concat(i,", ").concat(i,")"),style:{transformOrigin:"center"}}))});OS.defaultProps={size:pQ.IconSize.STANDARD},OS.displayName="Blueprint5.Icon.Crop",g("8NFma");var OC=({element:e})=>(0,v.jsx)(vi,{content:(0,v.jsxs)(vS,{children:[(0,v.jsx)(vA,{shouldDismissPopover:!1,icon:"arrows-horizontal",text:sB("toolbar.flipHorizontally"),onClick:()=>{e.set({flipX:!e.flipX})}}),(0,v.jsx)(vA,{shouldDismissPopover:!1,text:sB("toolbar.flipVertically"),icon:"arrows-vertical",onClick:()=>{e.set({flipY:!e.flipY})}})]}),position:sJ.BOTTOM,children:(0,v.jsx)(ge,{text:sB("toolbar.flip"),minimal:!0})}),w=g("8NFma"),sK=g("gztBd"),w=g("8NFma"),pQ=g("leH9B"),OO=function(e){function t(t){var n=e.call(this,t)||this;n.childRef=w.createRef();var r=pS("bp-dialog");return n.titleId="title-".concat(r),n}return(0,sK.__extends)(t,e),t.prototype.render=function(){var e,t,n=this.props,r=n.className,i=n.children,o=n.containerRef,a=n.style,l=n.title,s=n.role,u=(0,sK.__rest)(n,["className","children","containerRef","style","title","role"]);return w.createElement(m3,(0,sK.__assign)({},u,{className:sX.OVERLAY_SCROLL_CONTAINER,childRef:this.childRef,hasBackdrop:!0}),w.createElement("div",{className:sX.DIALOG_CONTAINER,ref:void 0===o?this.childRef:pD(o,this.childRef)},w.createElement("div",{className:c(sY)(sX.DIALOG,r),role:void 0===s?"dialog":s,"aria-modal":null!==(e=u.enforceFocus)&&void 0!==e?e:null===(t=m3.defaultProps)||void 0===t?void 0:t.enforceFocus,"aria-labelledby":this.props["aria-labelledby"]||(l?this.titleId:void 0),"aria-describedby":this.props["aria-describedby"],style:a},this.maybeRenderHeader(),i)))},t.prototype.validateProps=function(e){null==e.title&&(null!=e.icon&&console.warn(ph),null!=e.isCloseButtonShown&&console.warn(pf))},t.prototype.maybeRenderCloseButton=function(){return!1!==this.props.isCloseButtonShown?w.createElement(ge,{"aria-label":"Close",className:sX.DIALOG_CLOSE_BUTTON,icon:w.createElement(bf,{size:pQ.IconSize.STANDARD}),minimal:!0,onClick:this.props.onClose}):void 0},t.prototype.maybeRenderHeader=function(){var e=this.props,t=e.icon,n=e.title;if(null!=n)return w.createElement("div",{className:sX.DIALOG_HEADER},w.createElement(p5,{icon:t,size:pQ.IconSize.STANDARD,"aria-hidden":!0,tabIndex:-1}),w.createElement(vO,{id:this.titleId},n),this.maybeRenderCloseButton())},t.defaultProps={canOutsideClickClose:!0,isOpen:!1},t.displayName="".concat(pB,".Dialog"),t}(p4);let Ok=async e=>{let t=await fetch(lr(),{method:"POST",body:JSON.stringify({url:e})});return 200!==t.status?(alert(sB("error.removeBackground")),e):(await t.json()).url},OP=j(({isOpen:e,onClose:t,element:n})=>{let[r,i]=c(w).useState(n.src);c(w).useEffect(()=>{i(n.src)},[n.src]);let[o,a]=c(w).useState(!1),l=async()=>{a(!0);try{i(await Ok(n.src))}catch(e){console.error(e)}a(!1)},s=r!==n.src;return(0,v.jsxs)(OO,{onClose:t,title:sB("toolbar.removeBackgroundTitle"),isOpen:e,style:{width:"80%",maxWidth:"700px"},children:[(0,v.jsx)("div",{className:sX.DIALOG_BODY,children:(0,v.jsx)("img",{src:r,style:{width:"100%",maxHeight:"400px",objectFit:"contain"}})}),(0,v.jsxs)("div",{className:sX.DIALOG_FOOTER,style:{position:"relative"},children:[(0,v.jsxs)("div",{style:{position:"absolute",top:"5px"},children:["Powered by"," ",(0,v.jsx)("a",{href:"https://hotpot.ai/",target:"_blank",children:"hotpot.ai"})]}),(0,v.jsxs)("div",{className:sX.DIALOG_FOOTER_ACTIONS,children:[!s&&(0,v.jsx)(ge,{onClick:l,loading:o,children:sB("toolbar.removeBackground")}),s&&(0,v.jsxs)(v.Fragment,{children:[(0,v.jsx)(ge,{onClick:()=>{i(n.src),t()},loading:o,children:sB("toolbar.cancelRemoveBackground")}),(0,v.jsx)(ge,{onClick:()=>{n.set({src:r}),t()},loading:o,intent:"primary",children:sB("toolbar.confirmRemoveBackground")})]})]})]})]})}),OT=j(({element:e,store:t})=>e.contentEditable?e.clipSrc?(0,v.jsx)(ge,{text:sB("toolbar.removeClip"),minimal:!0,onClickCapture:t=>{e.set({clipSrc:""})}}):(0,v.jsx)(ge,{minimal:!0,text:sB("toolbar.clip"),onClickCapture:e=>{e.stopPropagation(),t.openSidePanel("image-clip")}}):null),OA=j(({element:e,store:t})=>e.contentEditable?(0,v.jsx)(vu,{content:sB("toolbar.crop"),position:"bottom",children:(0,v.jsx)(ge,{minimal:!0,icon:(0,v.jsx)(OS,{}),onClickCapture:t=>{t.stopPropagation(),e.toggleCropMode(!0)}})}):null);j(({element:e,store:t})=>e.clipSrc?(0,v.jsx)(ge,{text:sB("toolbar.removeClip"),minimal:!0,onClickCapture:t=>{e.set({clipSrc:""})}}):null);let Oj={ImageFlip:OC,ImageFilters:CO,ImageFitToBackground:({element:e})=>(0,v.jsx)(ge,{text:sB("toolbar.fitToBackground"),minimal:!0,onClick:()=>{let{page:t}=e;e.set({x:-t.bleed,y:-t.bleed,width:t.computedWidth+2*t.bleed,height:t.computedHeight+2*t.bleed,rotation:0,cropX:0,cropY:0,cropWidth:1,cropHeight:1})}}),ImageCrop:OA,ImageClip:OT,ImageRemoveBackground:({element:e})=>{let[t,n]=c(w).useState(!1);return(0,v.jsxs)(v.Fragment,{children:[(0,v.jsx)(ge,{text:sB("toolbar.removeBackground"),minimal:!0,onClick:e=>{n(!0)}}),(0,v.jsx)(OP,{isOpen:t,onClose:()=>{n(!1)},element:e})]})},ImageAnimations:C1},ON=j(({store:e,components:t})=>{let n=e.selectedElements[0],r=n._cropModeEnabled,i=c(w).useRef({});c(w).useEffect(()=>{r&&(i.current={x:n.x,y:n.y,width:n.width,height:n.height,cropX:n.cropX,cropY:n.cropY,cropWidth:n.cropWidth,cropHeight:n.cropHeight})},[r]);let o=vw({type:"image",usedItems:["ImageFlip","ImageFilters","ImageFitToBackground","ImageClip","ImageCrop",iR.animationsEnabled&&"ImageAnimations",iR.removeBackgroundEnabled&&"ImageRemoveBackground"],components:t});return(0,v.jsxs)(v.Fragment,{children:[!r&&(0,v.jsx)(vx,{items:o,itemRender:r=>{let i=t[r]||Oj[r];return(0,v.jsx)(i,{element:n,store:e},r)}}),r&&(0,v.jsxs)(vp.Group,{children:[(0,v.jsx)(ge,{text:sB("toolbar.cropDone"),minimal:!0,icon:"tick",onClickCapture:e=>{n.toggleCropMode(!1)}}),(0,v.jsx)(ge,{text:sB("toolbar.cropCancel"),minimal:!0,icon:"cross",onClickCapture:e=>{n.set({...i.current}),n.toggleCropMode(!1)}})]})]})});g("8NFma");let OR=(e,t)=>Array.from(e.keys()).find(e=>oe(e,t)),OL=(e,t)=>{let n=OR(e,t);return e.get(n||"")||t},OI={SvgFlip:OC,SvgFilters:CO,SvgColors:j(({element:e,elements:t,store:n})=>{let r=on(e.src);return(0,v.jsx)(v.Fragment,{children:!e.maskSrc&&r.slice(0,5).map(t=>(0,v.jsx)(Cb,{value:OL(e.colorsReplace,t),style:{marginLeft:"5px"},onChange:n=>{let r=OR(e.colorsReplace,t)||t;e.replaceColor(r,n)},store:n,gradientEnabled:!0},t))})}),SvgAnimations:C1},OM=j(({store:e,hideSvgEffects:t,components:n})=>{let r=e.selectedElements,i=vw({type:"svg",usedItems:["SvgFlip",!t&&"SvgFilters","SvgColors",iR.animationsEnabled&&"SvgAnimations"].filter(e=>!!e),components:n});return(0,v.jsx)(vx,{items:i,itemRender:t=>{let i=n[t]||OI[t];return(0,v.jsx)(i,{elements:r,element:r[0],store:e},t)}})});g("8NFma");let OD=j(({store:e,elements:t})=>{let n=n=>{e.history.transaction(()=>{t.forEach(e=>{e.set(n)})})},r=n=>{e.history.transaction(()=>{t.forEach(e=>{let{middleLeft:t,middleRight:r}=aT(e),{x:i,y:o,rotation:a}=aA(t,r,n);e.set({x:i,y:o,rotation:a,height:n})})})};return(0,v.jsx)(vi,{content:(0,v.jsxs)("div",{style:{padding:"15px",paddingTop:"15px",width:"230px"},children:[(0,v.jsxs)("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingBottom:"5px"},children:[(0,v.jsx)("div",{children:sB("toolbar.lineSize")}),(0,v.jsx)("div",{children:(0,v.jsx)(CE,{value:t[0].height,onValueChange:e=>{r(e)},style:{width:"50px"},min:1,max:100,buttonPosition:"none"})})]}),(0,v.jsx)(yt,{value:t[0].height,onChange:e=>{r(e)},min:1,max:100,labelRenderer:!1}),(0,v.jsxs)("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingBottom:"5px",paddingTop:"15px"},children:[(0,v.jsx)(ge,{onClick:()=>{n({dash:[]})},active:0===t[0].dash.length,children:(0,v.jsx)("svg",{width:"24",height:"24",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",children:(0,v.jsx)("line",{x2:"24",y1:"50%",y2:"50%",stroke:"currentColor",strokeWidth:"2"})})}),(0,v.jsx)(ge,{onClick:()=>{n({dash:[4,1]})},active:4===t[0].dash[0],children:(0,v.jsx)("svg",{width:"24",height:"24",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",children:(0,v.jsx)("line",{x1:"-1",x2:"25",y1:"50%",y2:"50%",stroke:"currentColor",strokeDasharray:"12 2",strokeWidth:"2"})})}),(0,v.jsx)(ge,{onClick:()=>{n({dash:[2,1]})},active:2===t[0].dash[0],children:(0,v.jsx)("svg",{width:"24",height:"24",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",children:(0,v.jsx)("line",{x1:"1",x2:"23",y1:"50%",y2:"50%",stroke:"currentColor",strokeDasharray:"6 2",strokeWidth:"2"})})}),(0,v.jsx)(ge,{onClick:()=>{n({dash:[1,1]})},active:1===t[0].dash[0],children:(0,v.jsx)("svg",{width:"24",height:"24",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",children:(0,v.jsx)("line",{x1:"1",x2:"23",y1:"50%",y2:"50%",stroke:"currentColor",strokeDasharray:"2 2",strokeWidth:"2"})})})]})]}),position:sJ.BOTTOM,children:(0,v.jsx)(ge,{icon:"settings",minimal:!0})})}),OF=j(({elements:e,store:t})=>(0,v.jsx)(Cb,{value:e[0].color,style:{marginRight:"5px"},gradientEnabled:!1,onChange:n=>t.history.transaction(()=>{e.forEach(e=>{e.set({color:n})})}),store:t})),Oz=(0,v.jsx)("span",{"aria-hidden":"true",className:"bp5-icon",children:(0,v.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",children:(0,v.jsx)("path",{stroke:"currentColor",strokeWidth:"2",d:"M 1 8 L 16 8"})})}),OB=(0,v.jsx)("span",{"aria-hidden":"true",className:"bp5-icon",children:(0,v.jsxs)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",children:[(0,v.jsx)("path",{stroke:"currentColor",strokeWidth:"2",d:"M 8 3 L 1 8 L 8 13",fill:"none",strokeLinejoin:"round",strokeLinecap:"round"}),(0,v.jsx)("path",{stroke:"currentColor",strokeWidth:"2",d:"M 1 8 L 15 8",strokeLinejoin:"round",strokeLinecap:"round"})]})}),OU=(0,v.jsx)("span",{"aria-hidden":"true",className:"bp5-icon",children:(0,v.jsxs)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",children:[(0,v.jsx)("path",{stroke:"currentColor",strokeWidth:"2",d:"M 8 3 L 1 8 L 8 13 Z",fill:"currentColor",strokeLinejoin:"round",strokeLinecap:"round"}),(0,v.jsx)("path",{stroke:"currentColor",strokeWidth:"2",d:"M 1 8 L 15 8",strokeLinejoin:"round",strokeLinecap:"round"})]})}),OH={"":Oz,arrow:OB,triangle:OU,bar:(0,v.jsx)("span",{"aria-hidden":"true",className:"bp5-icon",children:(0,v.jsxs)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",children:[(0,v.jsx)("path",{stroke:"currentColor",strokeWidth:"2",d:"M 1 3 L 1 13",strokeLinejoin:"round",strokeLinecap:"round"}),(0,v.jsx)("path",{stroke:"currentColor",strokeWidth:"2",d:"M 1 8 L 15 8",strokeLinejoin:"round",strokeLinecap:"round"})]})}),square:(0,v.jsx)("span",{"aria-hidden":"true",className:"bp5-icon",children:(0,v.jsxs)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",children:[(0,v.jsx)("path",{stroke:"currentColor",strokeWidth:"2",d:"M 1 4 L 9 4 L 9 12 L 1 12 Z",fill:"currentColor",strokeLinejoin:"round",strokeLinecap:"round"}),(0,v.jsx)("path",{stroke:"currentColor",strokeWidth:"2",d:"M 1 8 L 15 8",strokeLinejoin:"round",strokeLinecap:"round"})]})}),circle:(0,v.jsx)("span",{"aria-hidden":"true",className:"bp5-icon",children:(0,v.jsxs)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",children:[(0,v.jsx)("circle",{cx:"4",cy:"8",r:"4",fill:"currentColor"}),(0,v.jsx)("path",{stroke:"currentColor",strokeWidth:"2",d:"M 1 8 L 15 8",strokeLinejoin:"round",strokeLinecap:"round"})]})})},OV=({type:e,active:t,onClick:n,flipped:r})=>{let i=OH[e];return(0,v.jsx)(ge,{icon:r?(0,v.jsx)("span",{style:{transform:"scaleX(-1)"},children:i}):i,minimal:!0,onClick:n,active:t})},Oq=j(({elements:e,store:t,property:n})=>{let r="endHead"===n,i=OH[e[0][n]],o=r?(0,v.jsx)("span",{style:{transform:"scaleX(-1)"},children:i}):i,a=r=>{t.history.transaction(()=>{e.forEach(e=>{e.set({[n]:r})})})};return(0,v.jsx)(v.Fragment,{children:(0,v.jsx)(vi,{content:(0,v.jsxs)("div",{style:{width:"150px",padding:"10px"},children:[(0,v.jsx)("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between"},children:["","arrow","triangle"].map(t=>(0,v.jsx)(OV,{type:t,active:e[0][n]===t,onClick:()=>{a(t)},flipped:r},t))}),(0,v.jsx)("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between"},children:["bar","square","circle"].map(t=>(0,v.jsx)(OV,{type:t,active:e[0][n]===t,onClick:()=>{a(t)},flipped:r},t))})]}),position:sJ.BOTTOM,children:(0,v.jsx)(ge,{icon:o,minimal:!0})})})}),OG={LineSettings:OD,LineColor:OF,LineHeads:j(({elements:e,store:t})=>(0,v.jsxs)(v.Fragment,{children:[(0,v.jsx)(Oq,{elements:e,store:t,property:"startHead"}),(0,v.jsx)(Oq,{elements:e,store:t,property:"endHead"})]})),LineAnimations:C1},OW=j(({store:e,components:t})=>{let n=e.selectedElements[0],r=vw({type:"line",usedItems:["LineColor","LineSettings","LineHeads",iR.animationsEnabled&&"LineAnimations"].filter(e=>!!e),components:t});return(0,v.jsx)(vx,{items:r,itemRender:r=>{let i=t[r]||OG[r];return(0,v.jsx)(i,{element:n,store:e,elements:e.selectedElements},r)}})});var w=g("8NFma");async function O$(e){let t=document.createElement("video");t.crossOrigin="anonymous",t.src=e,await t.play(),t.pause();let{videoWidth:n,videoHeight:r}=t;return{width:n,height:r}}async function OK(e){let t=document.createElement("video");t.crossOrigin="anonymous",t.src=e,await t.play(),t.pause();let{duration:n}=t;return n}async function OY(e,t=5){return new Promise((n,r)=>{var i=document.createElement("video"),o=document.createElement("canvas");o.width=480,o.height=360;var a=o.getContext("2d");i.crossOrigin="anonymous",i.src=e,i.addEventListener("error",e=>{r(e)}),i.addEventListener("loadeddata",function(){let e=i.videoWidth/i.videoHeight;o.width=480,o.height=480/e,i.currentTime=t}),i.addEventListener("seeked",function(){a.drawImage(i,0,0,o.width,o.height);try{var e=o.toDataURL();n(e)}catch(e){r(e)}})})}async function OX(e,t,n){return new Promise((r,i)=>{let o=t.getContext("2d"),a=()=>{try{o.drawImage(e,0,0,t.width,t.height);let n=t.toDataURL();r(n),e.removeEventListener("seeked",a)}catch(t){i(t),e.removeEventListener("seeked",a)}};e.addEventListener("seeked",a),e.currentTime=n})}let OZ={VideoTrim:j(({store:e,components:t,element:n})=>{let r=c(w).useRef(null),[i,o]=c(w).useState([]);c(w).useEffect(()=>{o([])},[n.src]);let a=async()=>{if(!n.src||i.length)return;let{width:e,height:t}=await O$(n.src),{src:a}=n,l=r.current.offsetHeight,s=Math.ceil(r.current.offsetWidth/(e/t*l)),u=await OK(a),c=document.createElement("video");c.crossOrigin="anonymous",c.src=a;let d=document.createElement("canvas");d.width=480;try{await new Promise((e,t)=>{c.addEventListener("loadeddata",()=>{let t=c.videoWidth/c.videoHeight;d.height=480/t,e()}),c.addEventListener("error",t)}),o([]);for(let e=0;e<s;e++){let t=e*u/s,n=await OX(c,d,t);o(e=>e.concat(n))}}catch(e){console.error("Error generating previews:",e)}},l=(e,t)=>{e.preventDefault();let i=e=>{e.preventDefault();let{clientX:i}=e,{left:o,width:a}=r.current.getBoundingClientRect(),{src:l}=n,s=(i-o)/a;"start"===t?n.set({startTime:Math.min(n.endTime,Math.max(0,s))}):"end"===t&&n.set({endTime:Math.min(1,Math.max(n.startTime,s))})};window.addEventListener("mousemove",i),window.addEventListener("mouseup",()=>{window.removeEventListener("mousemove",i)})};return(0,v.jsx)(vi,{position:"bottom",onOpened:a,content:(0,v.jsx)(vp,{style:{boxShadow:"none",backgroundColor:"transparent",width:"calc(100vw - 300px)"},children:(0,v.jsxs)(vh,{children:[(0,v.jsx)(v0,{style:{width:"80px"},value:parseFloat((n.duration*(n.endTime-n.startTime)/1e3).toFixed(2)),minorStepSize:.01,stepSize:.1,buttonPosition:"none",readOnly:!0}),(0,v.jsxs)("div",{style:{width:"calc(100vw - 420px)",height:"30px",display:"flex",position:"relative",overflow:"hidden",marginLeft:"10px"},ref:r,children:[i.map((e,t)=>(0,v.jsx)("img",{src:e,style:{width:"auto",height:"100%",objectFit:"cover"}},t)),(0,v.jsx)("div",{style:{position:"absolute",top:"0",left:0,width:100*n.startTime+"%",height:"30px",backgroundColor:"rgb(0, 0, 0, 0.5)"}}),(0,v.jsx)("div",{style:{position:"absolute",top:"0",right:"0%",width:100-100*n.endTime+"%",height:"30px",backgroundColor:"rgb(0, 0, 0, 0.5)"}}),(0,v.jsx)("div",{style:{position:"absolute",top:"0",left:100*n.startTime+"%",width:"10px",height:"30px",borderRadius:"0px",backgroundColor:"rgb(0, 161, 255, 0.9)",cursor:"ew-resize"},onMouseDown:e=>{l(e,"start")}}),(0,v.jsx)("div",{style:{position:"absolute",top:"0",right:100-100*n.endTime+"%",width:"10px",height:"30px",borderRadius:"0px",backgroundColor:"rgb(0, 161, 255, 0.9)",cursor:"ew-resize"},onMouseDown:e=>{l(e,"end")}})]})]})}),children:(0,v.jsx)(ge,{icon:"cut",minimal:!0,children:"Trim"})})}),VideoAnimations:C1},OQ=j(({store:e,components:t})=>{let n=e.selectedElements,r=vw({type:"video",usedItems:["VideoTrim",iR.animationsEnabled&&"VideoAnimations"].filter(e=>!!e),components:t});return(0,v.jsx)(vx,{items:r,itemRender:r=>{let i=t[r]||OZ[r];return(0,v.jsx)(i,{elements:n,element:n[0],store:e},r)}})});g("8NFma");var sK=g("gztBd"),w=g("8NFma"),pQ=g("leH9B"),OJ=w.forwardRef(function(e,t){var n=e.size>=pQ.IconSize.LARGE,r=n?pQ.IconSize.LARGE:pQ.IconSize.STANDARD,i="".concat(-1*r/.05/2);return w.createElement(p3,(0,sK.__assign)({iconName:"disable",ref:t},e),w.createElement("path",{d:n?"M200 400C89.6 400 0 310.4 0 200C0 89.6 89.6 0 200 0S400 89.6 400 200C400 310.4 310.4 400 200 400zM40 200C40 288.4 111.6 360 200 360C237 360 271 347.4 298 326.2L73.8 102C52.6 129 40 163 40 200zM200 40C163 40 129 52.6 102 73.8L326.2 298C347.4000000000001 271 360 237 360 200C360 111.6 288.4 40 200 40z":"M159.8 320.2C71.4 320.2 -0.2 248.6 -0.2 160.2S71.4 0.2 159.8 0.2S319.8 71.8 319.8 160.2S248.2 320.2 159.8 320.2zM39.8 160.2C39.8 226.4 93.6 280.2 159.8 280.2C185.8 280.2 209.6 271.8 229.2 257.8L62.2 90.8C48.2 110.4 39.8 134.2 39.8 160.2zM159.8 40.2C133.8 40.2 110 48.6 90.4 62.6L257.4 229.6C271.4 210 279.8 186.2 279.8 160.2C279.8 93.8 226.2 40.2 159.8 40.2z",fillRule:"evenodd",transform:"scale(0.05, -0.05) translate(".concat(i,", ").concat(i,")"),style:{transformOrigin:"center"}}))});OJ.defaultProps={size:pQ.IconSize.STANDARD},OJ.displayName="Blueprint5.Icon.Disable";var O0={};O0=function(e){return ET({tag:"svg",attr:{viewBox:"0 0 20 20",fill:"currentColor"},child:[{tag:"path",attr:{d:"M0 0h20v5H0V0zm0 7h20v4H0V7zm0 6h20v3H0v-3zm0 5h20v2H0v-2z"}}]})(e)};let O1=j(({elements:e,store:t})=>(0,v.jsx)(Cb,{value:e[0].fill,style:{marginRight:"5px"},gradientEnabled:!0,onChange:n=>t.history.transaction(()=>{e.forEach(e=>{e.set({fill:n})})}),store:t})),O2=j(({store:e,elements:t,element:n})=>{let r=n=>{e.history.transaction(()=>{t.forEach(e=>{e.set(n)})})};return(0,v.jsx)(vi,{content:(0,v.jsxs)("div",{style:{padding:"15px",paddingTop:"15px",width:"270px"},children:[(0,v.jsxs)("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingBottom:"15px"},children:[(0,v.jsx)(ge,{onClick:()=>{r({strokeWidth:0})},active:0===t[0].strokeWidth,style:{width:"44px",height:"34px"},icon:(0,v.jsx)(OJ,{size:20})}),(0,v.jsx)(ge,{onClick:()=>{r({dash:[],strokeWidth:t[0].strokeWidth||10})},active:t[0].strokeWidth&&0===t[0].dash.length,children:(0,v.jsx)("svg",{width:"24",height:"24",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",children:(0,v.jsx)("line",{x2:"24",y1:"50%",y2:"50%",stroke:"currentColor",strokeWidth:"2"})})}),(0,v.jsx)(ge,{onClick:()=>{r({dash:[4,1],strokeWidth:t[0].strokeWidth||10})},active:t[0].strokeWidth&&4===t[0].dash[0],children:(0,v.jsx)("svg",{width:"24",height:"24",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",children:(0,v.jsx)("line",{x1:"-1",x2:"25",y1:"50%",y2:"50%",stroke:"currentColor",strokeDasharray:"12 2",strokeWidth:"2"})})}),(0,v.jsx)(ge,{onClick:()=>{r({dash:[2,1],strokeWidth:t[0].strokeWidth||10})},active:t[0].strokeWidth&&2===t[0].dash[0],children:(0,v.jsx)("svg",{width:"24",height:"24",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",children:(0,v.jsx)("line",{x1:"1",x2:"23",y1:"50%",y2:"50%",stroke:"currentColor",strokeDasharray:"6 2",strokeWidth:"2"})})}),(0,v.jsx)(ge,{onClick:()=>{r({dash:[1,1],strokeWidth:t[0].strokeWidth||10})},active:t[0].strokeWidth&&1===t[0].dash[0],children:(0,v.jsx)("svg",{width:"24",height:"24",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",children:(0,v.jsx)("line",{x1:"1",x2:"23",y1:"50%",y2:"50%",stroke:"currentColor",strokeDasharray:"2 2",strokeWidth:"2"})})})]}),(0,v.jsxs)("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingBottom:"5px"},children:[(0,v.jsx)("div",{children:sB("toolbar.strokeWidth")}),(0,v.jsx)("div",{children:(0,v.jsx)(CE,{value:t[0].strokeWidth,onValueChange:e=>{r({strokeWidth:e})},style:{width:"50px"},min:0,max:Math.round(Math.min(n.width,n.height)/2),buttonPosition:"none"})})]}),(0,v.jsx)(yt,{value:t[0].strokeWidth,onChange:e=>{r({strokeWidth:e})},min:0,max:Math.round(Math.min(n.width,n.height)/2),labelRenderer:!1}),"rect"===n.subType&&(0,v.jsxs)(v.Fragment,{children:[(0,v.jsxs)("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"15px",paddingBottom:"5px"},children:[(0,v.jsx)("div",{children:sB("toolbar.cornerRadius")}),(0,v.jsx)("div",{children:(0,v.jsx)(CE,{value:t[0].cornerRadius,onValueChange:e=>{r({cornerRadius:e})},style:{width:"50px"},min:0,max:Math.round(Math.max(n.width,n.height)/2),buttonPosition:"none"})})]}),(0,v.jsx)(yt,{value:t[0].cornerRadius,onChange:e=>{r({cornerRadius:e})},min:0,max:Math.round(Math.max(n.width,n.height)/2),labelRenderer:!1})]})]}),position:sJ.BOTTOM,children:(0,v.jsx)(ge,{icon:(0,v.jsx)(c(O0),{}),minimal:!0})})}),O3={FigureFill:O1,FigureStroke:j(({elements:e,store:t})=>e.find(e=>e.strokeWidth)?(0,v.jsx)(Cb,{value:e[0].stroke,style:{marginRight:"5px"},gradientEnabled:!1,onChange:n=>t.history.transaction(()=>{e.forEach(e=>{e.set({stroke:n})})}),store:t}):null),FigureSettings:O2,FigureAnimations:C1,FigureFilters:CC},O5=j(({store:e,components:t})=>{let n=e.selectedElements[0],r=vw({type:"figure",usedItems:["FigureFill","FigureStroke","FigureSettings","FigureFilters",iR.animationsEnabled&&"FigureAnimations"].filter(e=>!!e),components:t});return(0,v.jsx)(vx,{items:r,itemRender:r=>{let i=t[r]||O3[r];return(0,v.jsx)(i,{element:n,store:e,elements:e.selectedElements},r)}})});g("8NFma");let O4={ManyAnimations:C1},O6=j(({store:e,components:t})=>{let n=e.selectedElements,r=vw({type:"many",usedItems:[iR.animationsEnabled&&"ManyAnimations"],components:t});return(0,v.jsx)(vx,{items:r,itemRender:r=>{let i=t[r]||O4[r];return(0,v.jsx)(i,{elements:n,element:n[0],store:e},r)}})});var w=g("8NFma");let O8=({value:e,onValueChange:t,...n})=>{let[r,i]=c(w).useState(e.toString());return c(w).useEffect(()=>{i(e.toString())},[e]),(0,v.jsx)(v0,{value:r,onValueChange:(e,n)=>{i(n),Number.isNaN(e)||t(e)},...n})},O9={PageDuration:j(({store:e})=>{if(!e.activePage)return null;let{duration:t}=e.activePage;return(0,v.jsx)(vi,{position:"bottom",content:(0,v.jsxs)("div",{style:{padding:"15px",paddingTop:"15px",width:"230px"},children:[(0,v.jsxs)("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"},children:[(0,v.jsx)("div",{children:sB("toolbar.duration")}),(0,v.jsx)("div",{children:(0,v.jsx)(O8,{value:t/1e3,onValueChange:t=>{e.activePage.set({duration:1e3*t})},style:{width:"50px"},min:0,buttonPosition:"none"})})]}),(0,v.jsx)(yt,{value:Math.min(t/1e3,50),onChange:t=>{e.activePage.set({duration:1e3*t})},min:0,max:50,showTrackFill:!1,labelRenderer:!1})]}),children:(0,v.jsxs)(ge,{icon:"time",minimal:!0,children:[(e.activePage.duration/1e3).toFixed(1),"s"]})})})},O7=j(({store:e,components:t})=>{let n=vw({type:"page",usedItems:[iR.animationsEnabled&&"PageDuration"].filter(e=>!!e),components:t});return(0,v.jsx)(vx,{items:n,itemRender:n=>{let r=t[n]||O9[n];return(0,v.jsx)(r,{store:e},n)}})});var w=g("8NFma");let ke=({store:e})=>{let[t,n]=c(w).useState(!1);return(0,v.jsx)(vi,{content:(0,v.jsxs)(vS,{children:[(0,v.jsx)(vA,{icon:"media",text:sB("toolbar.saveAsImage"),onClick:async()=>{e.pages.forEach(t=>{e.saveAsImage({pageId:t.id})})}}),(0,v.jsx)(vA,{icon:"document",text:sB("toolbar.saveAsPDF"),onClick:async()=>{n(!0),await e.saveAsPDF(),n(!1)}})]}),position:sJ.BOTTOM,children:(0,v.jsx)(ge,{icon:"import",text:sB("toolbar.download"),minimal:!0,loading:t})})};g("8NFma");let kt=j(({store:e})=>{let t=e.selectedShapes.length>0,n=e.selectedShapes[0],r=n?.locked,i=r?"lock":"unlock",o=r?sB("toolbar.lockedDescription"):sB("toolbar.unlockedDescription");return(0,v.jsx)(vu,{content:o,disabled:!t,position:"bottom",children:(0,v.jsx)(ge,{minimal:!0,disabled:!t,icon:i,onClick:()=>{e.selectedShapes.forEach(e=>e.set({draggable:r,contentEditable:r,styleEditable:r,resizable:r,removable:r}))}})})});g("8NFma");var kn={};kn=function(e){return ET({tag:"svg",attr:{viewBox:"0 0 24 24",fill:"currentColor"},child:[{tag:"path",attr:{d:"M17.66 8L12 2.35 6.34 8C4.78 9.56 4 11.64 4 13.64s.78 4.11 2.34 5.67 3.61 2.35 5.66 2.35 4.1-.79 5.66-2.35S20 15.64 20 13.64 19.22 9.56 17.66 8zM6 14c.01-2 .62-3.27 1.76-4.4L12 5.27l4.24 4.38C17.38 10.77 17.99 12 18 14H6z"}}]})(e)};let kr=j(({store:e})=>{let t=e.selectedShapes.length>0,n=t=>{t=Math.max(0,Math.min(t,100)),e.selectedShapes.forEach(e=>{e.set({opacity:t/100})})},r=Math.round(e.selectedShapes[0]?.opacity*100);return(0,v.jsx)(vi,{disabled:!t,minimal:!1,content:(0,v.jsxs)("div",{style:{padding:"10px 20px"},children:[(0,v.jsx)("div",{style:{textAlign:"center"},children:sB("toolbar.transparency")}),(0,v.jsxs)("div",{style:{display:"flex"},children:[(0,v.jsx)("div",{style:{paddingTop:"8px",paddingRight:"20px"},children:(0,v.jsx)(yt,{value:r,labelRenderer:!1,onChange:n,min:0,max:100})}),(0,v.jsx)(v0,{value:r,onValueChange:n,min:0,max:100,buttonPosition:"none",style:{width:"50px"},selectAllOnFocus:!0})]})]}),position:sJ.BOTTOM,children:(0,v.jsx)(vu,{content:sB("toolbar.transparency"),disabled:!t,position:sJ.BOTTOM,children:(0,v.jsx)(ge,{minimal:!0,disabled:!t,children:(0,v.jsx)(c(kn),{className:"bp5-icon",style:{fontSize:"20px"}})})})})});g("8NFma");let ki=j(({store:e})=>{let t=e.selectedElements.length>0,n=e.selectedElements[0]||{},r=t=>{e.selectedElements.forEach(e=>{e.set(t)})};return(0,v.jsx)(vi,{disabled:!t,minimal:!1,content:(0,v.jsxs)("div",{style:{padding:"15px",paddingTop:"25px",width:"220px"},children:[(0,v.jsx)(Cx,{checked:n.selectable,label:sB("toolbar.selectable"),onChange:e=>{r({selectable:e.target.checked})},alignIndicator:sZ.RIGHT}),(0,v.jsx)(Cx,{checked:n.draggable,label:sB("toolbar.draggable"),onChange:e=>{r({draggable:e.target.checked})},alignIndicator:sZ.RIGHT}),(0,v.jsx)(Cx,{checked:n.removable,label:sB("toolbar.removable"),onChange:e=>{r({removable:e.target.checked})},alignIndicator:sZ.RIGHT}),(0,v.jsx)(Cx,{checked:n.resizable,label:sB("toolbar.resizable"),onChange:e=>{r({resizable:e.target.checked})},alignIndicator:sZ.RIGHT}),(0,v.jsx)(Cx,{checked:n.contentEditable,label:sB("toolbar.contentEditable"),onChange:e=>{r({contentEditable:e.target.checked})},alignIndicator:sZ.RIGHT}),(0,v.jsx)(Cx,{checked:n.styleEditable,label:sB("toolbar.styleEditable"),onChange:e=>{r({styleEditable:e.target.checked})},alignIndicator:sZ.RIGHT}),(0,v.jsx)(Cx,{checked:n.alwaysOnTop,label:sB("toolbar.alwaysOnTop"),onChange:e=>{r({alwaysOnTop:e.target.checked})},alignIndicator:sZ.RIGHT,style:{marginTop:"20px"}}),(0,v.jsx)(Cx,{checked:n.showInExport,label:sB("toolbar.showInExport"),onChange:e=>{r({showInExport:e.target.checked})},alignIndicator:sZ.RIGHT,style:{marginTop:"20px"}})]}),position:sJ.BOTTOM,children:(0,v.jsx)(ge,{icon:"cog",minimal:!0,disabled:!t})})});g("8NFma");let ko=j(({store:e})=>{let t=e.selectedElements.length>1,n=1===e.selectedElements.length&&"group"===e.selectedElements[0].type;return(0,v.jsxs)(v.Fragment,{children:[t&&(0,v.jsx)(ge,{minimal:!0,onClick:()=>{e.groupElements(e.selectedElements.map(e=>e.id))},style:{marginLeft:"auto"},children:sB("toolbar.groupElements")}),n&&(0,v.jsx)(ge,{minimal:!0,onClick:()=>{e.ungroupElements([e.selectedElements[0].id])},style:{marginLeft:"auto"},children:sB("toolbar.ungroupElements")})]})}),ka={text:Oc,image:ON,svg:OM,many:O6,line:OW,video:OQ,figure:O5,page:O7},kl=ap("div")`
+`,C8=({fontFamily:e,handleClick:t,modifiers:n,store:r,isCustom:i})=>{let[o,a]=c(w).useState(!i);if(c(w).useEffect(()=>{o||r.loadFont(e)},[e,o]),"_divider"===e)return(0,v.jsx)("div",{style:{paddingTop:"10px"},children:(0,v.jsx)(vk,{})});let l=o?(0,v.jsx)(C6,{src:ln(e),alt:e,onError:()=>{a(!1)}}):e;return(0,v.jsx)(vA,{text:l,active:n.active,disabled:n.disabled,onClick:t,style:{fontFamily:'"'+e+'"'}})},C9=({onChange:e,defaultValue:t})=>{let n=c(w).useRef(null);return c(w).useEffect(()=>{n.current&&n.current.focus()},[]),(0,v.jsx)(vq,{leftIcon:"search",inputRef:n,defaultValue:t,onChange:t=>e(t.target.value)})},C7=({store:e,fonts:t,activeFont:n,activeFontLabel:r,onFontSelect:i})=>{let[o,a]=c(w).useState(""),l=t.filter(e=>e.toLowerCase().indexOf(o.toLowerCase())>=0);return(0,v.jsx)(vi,{content:(0,v.jsxs)("div",{children:[(0,v.jsx)(C9,{onChange:e=>a(e),defaultValue:o}),(0,v.jsx)("div",{style:{paddingTop:"5px"},children:(0,v.jsx)(yg,{innerElementType:c(w).forwardRef((e,t)=>(0,v.jsx)(vS,{ref:t,...e})),height:Math.min(400,30*l.length)+10,width:210,itemCount:l.length,itemSize:30,children:({index:t,style:r})=>{let o=l[t];return(0,v.jsx)("div",{style:r,children:(0,v.jsx)(C8,{fontFamily:o,modifiers:{active:n===o},handleClick:()=>i(o),store:e,isCustom:e.fonts.find(e=>e.fontFamily===o)||iS.find(e=>e.fontFamily===o)},o)})}})})]}),children:(0,v.jsx)(ge,{text:r,rightIcon:"caret-down",minimal:!0,style:{marginRight:"5px",fontFamily:'"'+n+'"',overflow:"hidden",whiteSpace:"nowrap",maxHeight:"30px"}})})},Oe=j(({elements:e,store:t})=>{let{data:n,mutate:r}=br(lt(),bc,{isPaused:()=>iE(),fallbackData:[]});c(w).useEffect(()=>{r()},[iE()]);let i=t.fonts.concat(iS).map(e=>e.fontFamily).concat(n?.length&&!iE()?n:ix),o=e[0].fontFamily;o.length>15&&(o=o.slice(0,15)+"...");let a=[];t.find(e=>("text"===e.type&&a.push(e.fontFamily),!1));let l=[...new Set(a.concat("_divider").concat(i))];return(0,v.jsx)(C7,{fonts:l,activeFont:e[0].fontFamily,activeFontLabel:o,store:t,onFontSelect:n=>{t.history.transaction(()=>{e.forEach(e=>{e.set({fontFamily:n})})})}})}),Ot=j(({elements:e,store:t})=>(0,v.jsx)(v0,{onValueChange:n=>{t.history.transaction(()=>{e.forEach(e=>{e.set({fontSize:n,width:Math.max(n,e.width)})})})},value:Math.round(e[0].fontSize),style:{width:"50px"},min:5,max:4*t.height})),On=["left","center","right","justify"],Or=["top","middle","bottom"],Oi={top:(0,v.jsx)("span",{className:"bp5-icon",children:(0,v.jsx)(c(C3),{})}),middle:(0,v.jsx)("span",{className:"bp5-icon",children:(0,v.jsx)(c(C5),{})}),bottom:(0,v.jsx)("span",{className:"bp5-icon",children:(0,v.jsx)(c(C4),{})})},Oo=j(({elements:e,store:t})=>{let n=e[0];return(0,v.jsxs)(vU,{children:[(0,v.jsx)(ge,{minimal:!0,icon:"align-"+n.align,onClick:()=>{let r=(On.indexOf(n.align)+1+On.length)%On.length,i=On[r];t.history.transaction(()=>{e.forEach(e=>{e.set({align:i})})})}}),iR.textVerticalResizeEnabled&&(0,v.jsx)(ge,{minimal:!0,icon:Oi[n.verticalAlign],onClick:()=>{let r=(Or.indexOf(n.verticalAlign)+1+Or.length)%Or.length,i=Or[r];t.history.transaction(()=>{e.forEach(e=>{e.set({verticalAlign:i})})})}}),(0,v.jsx)(ge,{minimal:!0,icon:"bold",active:"bold"===n.fontWeight||"700"===n.fontWeight,onClick:()=>{let r="bold"===n.fontWeight||"700"===n.fontWeight;t.history.transaction(()=>{e.forEach(e=>{r?e.set({fontWeight:"normal"}):e.set({fontWeight:"bold"})})})}}),(0,v.jsx)(ge,{minimal:!0,icon:"italic",active:"italic"===n.fontStyle,onClick:()=>{let r="italic"===n.fontStyle;t.history.transaction(()=>{e.forEach(e=>{r?e.set({fontStyle:"normal"}):e.set({fontStyle:"italic"})})})}}),(0,v.jsx)(ge,{minimal:!0,icon:"underline",active:n.textDecoration.indexOf("underline")>=0,onClick:()=>{let r=n.textDecoration.split(" ");r.indexOf("underline")>=0?r=r.filter(e=>"underline"!==e):r.push("underline"),t.history.transaction(()=>{e.forEach(e=>{e.set({textDecoration:r.join(" ")})})})}}),(0,v.jsx)(ge,{minimal:!0,icon:"strikethrough",active:n.textDecoration.indexOf("line-through")>=0,onClick:()=>{let r=n.textDecoration.split(" ");r.indexOf("line-through")>=0?r=r.filter(e=>"line-through"!==e):r.push("line-through"),t.history.transaction(()=>{e.forEach(e=>{e.set({textDecoration:r.join(" ")})})})}})]})}),Oa=j(({elements:e,store:t})=>(0,v.jsx)(Cb,{value:e[0].fill,style:{marginRight:"5px"},gradientEnabled:!0,onChange:n=>t.history.transaction(()=>{e.forEach(e=>{e.set({fill:n})})}),store:t})),Ol=({value:e,onValueChange:t,...n})=>{let[r,i]=c(w).useState(e.toString());return c(w).useEffect(()=>{i(e.toString())},[e]),(0,v.jsx)(v0,{value:r,onValueChange:(e,n)=>{i(n),Number.isNaN(e)||t(e)},...n})},Os=j(({elements:e,store:t})=>{let n=e[0],r=n=>{t.history.transaction(()=>{e.forEach(e=>{e.set(n)})})},i="number"==typeof n.lineHeight?100*n.lineHeight:120;return(0,v.jsx)(vi,{content:(0,v.jsxs)("div",{style:{padding:"15px",width:"230px"},children:[(0,v.jsxs)("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"},children:[(0,v.jsx)("div",{children:sB("toolbar.lineHeight")}),(0,v.jsx)("div",{children:(0,v.jsx)(Ol,{value:Math.round(i),onValueChange:e=>{r({lineHeight:e/100})},style:{width:"50px"},min:50,max:250,buttonPosition:"none"})})]}),(0,v.jsx)(yt,{value:Math.round(i),onChange:e=>{r({lineHeight:e/100})},min:50,max:250,stepSize:1,showTrackFill:!1,labelRenderer:!1}),(0,v.jsxs)("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"},children:[(0,v.jsx)("div",{children:sB("toolbar.letterSpacing")}),(0,v.jsx)("div",{children:(0,v.jsx)(Ol,{value:Math.round(100*n.letterSpacing),onValueChange:e=>{r({letterSpacing:e/100})},style:{width:"50px"},min:-50,max:250,buttonPosition:"none"})})]}),(0,v.jsx)(yt,{value:Math.round(100*n.letterSpacing),onChange:e=>{r({letterSpacing:e/100})},min:-50,max:250,stepSize:1,showTrackFill:!1,labelRenderer:!1})]}),position:sJ.BOTTOM,children:(0,v.jsx)(ge,{icon:(0,v.jsx)(c(C2),{className:"bp5-icon",style:{fontSize:"20px"}}),minimal:!0})})}),Ou={TextFontFamily:Oe,TextFontSize:Ot,TextFontVariant:Oo,TextFill:Oa,TextSpacing:Os,TextFilters:CO,TextAnimations:C1},Oc=j(({store:e,components:t})=>{let n=e.selectedElements,r=vw({type:"text",usedItems:["TextFill","TextFontFamily","TextFontSize","TextFontVariant","TextSpacing","TextFilters",iR.animationsEnabled&&"TextAnimations"],components:t});return(0,v.jsx)(vx,{items:r,itemRender:r=>{let i=t[r]||Ou[r];return(0,v.jsx)(i,{elements:n,element:n[0],store:e},r)}})});g("8NFma");var Od={};Od=function(e){return ET({tag:"svg",attr:{viewBox:"0 0 24 24",fill:"currentColor"},child:[{tag:"path",attr:{d:"M10 10v5h2V4h2v11h2V4h2V2h-8C7.79 2 6 3.79 6 6s1.79 4 4 4zm-2 7v-3l-4 4 4 4v-3h12v-2H8z"}}]})(e)};var Oh={};Oh=function(e){return ET({tag:"svg",attr:{viewBox:"0 0 24 24",fill:"currentColor"},child:[{tag:"path",attr:{d:"M9 10v5h2V4h2v11h2V4h2V2H9C6.79 2 5 3.79 5 6s1.79 4 4 4zm12 8l-4-4v3H5v2h12v3l4-4z"}}]})(e)};var Of={};Of=function(e){return ET({tag:"svg",attr:{version:"1.1",id:"mdi-format-list-bulleted",viewBox:"0 0 24 24",fill:"currentColor"},child:[{tag:"path",attr:{d:"M7,5H21V7H7V5M7,13V11H21V13H7M4,4.5A1.5,1.5 0 0,1 5.5,6A1.5,1.5 0 0,1 4,7.5A1.5,1.5 0 0,1 2.5,6A1.5,1.5 0 0,1 4,4.5M4,10.5A1.5,1.5 0 0,1 5.5,12A1.5,1.5 0 0,1 4,13.5A1.5,1.5 0 0,1 2.5,12A1.5,1.5 0 0,1 4,10.5M7,19V17H21V19H7M4,16.5A1.5,1.5 0 0,1 5.5,18A1.5,1.5 0 0,1 4,19.5A1.5,1.5 0 0,1 2.5,18A1.5,1.5 0 0,1 4,16.5Z"}}]})(e)};var Op={};Op=function(e){return ET({tag:"svg",attr:{version:"1.1",id:"mdi-format-list-numbered",viewBox:"0 0 24 24",fill:"currentColor"},child:[{tag:"path",attr:{d:"M7,13V11H21V13H7M7,19V17H21V19H7M7,7V5H21V7H7M3,8V5H2V4H4V8H3M2,17V16H5V20H2V19H4V18.5H3V17.5H4V17H2M4.25,10A0.75,0.75 0 0,1 5,10.75C5,10.95 4.92,11.14 4.79,11.27L3.12,13H5V14H2V13.08L4,11H2V10H4.25Z"}}]})(e)};let Og=({html:e})=>{let t=document.createElement("div");return document.body.appendChild(t),t.innerHTML=e,t.style.display="none",av(t)},Om=e=>{e.root.parentElement.remove()},Ov=j(({element:e})=>(0,v.jsx)(v0,{onValueChange:t=>{e.set({fontSize:t})},value:Math.round(e.fontSize),style:{width:"50px"},min:5})),Oy=["left","center","right","justify"],Ob=["top","middle","bottom"],Ow={top:(0,v.jsx)("span",{className:"bp5-icon",children:(0,v.jsx)(c(C3),{})}),middle:(0,v.jsx)("span",{className:"bp5-icon",children:(0,v.jsx)(c(C5),{})}),bottom:(0,v.jsx)("span",{className:"bp5-icon",children:(0,v.jsx)(c(C4),{})})},Ox=j(({active:e,globalActive:t,format:n,element:r,disableGlobal:i,enableGlobal:o,icon:a})=>(0,v.jsx)(ge,{minimal:!0,icon:a,active:e,onMouseDown:e=>{e.preventDefault()},onClick:e=>{let a=window.__polotnoQuill;if(a){let e=a.getSelection();a.formatText(e.index,e.length,n,!ag.currentFormat[n],"user"),t&&i();return}(a=Og({html:r.text})).setSelection(0,a.getLength(),"api"),a.format(n,!1);let l=a.root.innerHTML;Om(a),r.set({text:l}),t?i():o()}})),O_={TextFontFamily:Oe,TextFontSize:Ov,TextFontVariant:j(({element:e,store:t})=>(0,v.jsxs)(vU,{children:[(0,v.jsx)(Ox,{format:"bold",active:ag.currentFormat.bold||"bold"===e.fontWeight||"700"===e.fontWeight,globalActive:"bold"===e.fontWeight||"700"===e.fontWeight,element:e,disableGlobal:()=>e.set({fontWeight:"normal"}),enableGlobal:()=>e.set({fontWeight:"bold"}),icon:"bold"}),(0,v.jsx)(Ox,{format:"italic",active:ag.currentFormat.italic||"italic"===e.fontStyle,globalActive:"italic"===e.fontStyle,element:e,disableGlobal:()=>e.set({fontStyle:"normal"}),enableGlobal:()=>e.set({fontStyle:"italic"}),icon:"italic"}),(0,v.jsx)(Ox,{format:"underline",active:ag.currentFormat.underline||e.textDecoration.indexOf("underline")>=0,globalActive:e.textDecoration.indexOf("underline")>=0,element:e,disableGlobal:()=>{let t=e.textDecoration.split(" ");t=t.filter(e=>"underline"!==e),e.set({textDecoration:t.join(" ")})},enableGlobal:()=>{let t=e.textDecoration.split(" ");t.push("underline"),e.set({textDecoration:t.join(" ")})},icon:"underline"}),(0,v.jsx)(Ox,{format:"strike",active:ag.currentFormat.strike||e.textDecoration.indexOf("line-through")>=0,globalActive:e.textDecoration.indexOf("line-through")>=0,element:e,disableGlobal:()=>{let t=e.textDecoration.split(" ");t=t.filter(e=>"line-through"!==e),e.set({textDecoration:t.join(" ")})},enableGlobal:()=>{let t=e.textDecoration.split(" ");t.push("line-through"),e.set({textDecoration:t.join(" ")})},icon:"strikethrough"}),(0,v.jsx)(ge,{minimal:!0,icon:"align-"+e.align,onClick:()=>{let t=(Oy.indexOf(e.align)+1+Oy.length)%Oy.length,n=Oy[t];e.set({align:n})}}),iR.textVerticalResizeEnabled&&(0,v.jsx)(ge,{minimal:!0,icon:Ow[e.verticalAlign],onClick:()=>{let n=(Ob.indexOf(e.verticalAlign)+1+Ob.length)%Ob.length,r=Ob[n];t.history.transaction(()=>{e.set({verticalAlign:r})})}}),(0,v.jsx)(ge,{minimal:!0,icon:"bullet"===ag.currentFormat.list?(0,v.jsx)("span",{className:"bp5-icon",children:(0,v.jsx)(c(Op),{style:{width:"20px",height:"20px"}})}):(0,v.jsx)("span",{className:"bp5-icon",children:(0,v.jsx)(c(Of),{style:{width:"20px",height:"20px"}})}),onMouseDown:e=>{e.preventDefault()},onClick:()=>{let t=window.__polotnoQuill,n=!t;t=t||Og({html:e.text}),n&&t.setSelection(0,t.getLength(),"api");let r=t.getFormat();r.list?"bullet"===r.list?t.format("list","ordered"):t.format("list",!1):t.format("list","bullet"),n&&(e.set({text:t.root.innerHTML}),Om(t))}})]})),TextFilters:CO,TextFill:j(({element:e,store:t})=>(0,v.jsx)(Cb,{value:ag.currentFormat.color||e.fill,gradientEnabled:!0,onChange:t=>{let n=window.__polotnoQuill,r=n?.getSelection(),i=r?.length>=n?.getLength()-1;if(n&&!i&&r?.length)n.formatText(r.index,r.length,"color",t,"user");else{var o=e.text.replace(/style=".*?"/g,"");e.set({fill:t,text:o})}},store:t})),TextSpacing:Os,TextDirection:j(({element:e})=>{let t="rtl"===e.dir?c(Od):c(Oh);return(0,v.jsx)(ge,{icon:(0,v.jsx)(t,{className:"bp5-icon",style:{fontSize:"20px"}}),minimal:!0,onClick:()=>{e.set({dir:"rtl"===e.dir?"ltr":"rtl"})}})}),TextAnimations:C1},OE=j(({store:e,components:t})=>{let n=e.selectedElements,r=e.selectedElements[0],i=vw({type:"text",usedItems:["TextFill","TextFontFamily","TextFontSize","TextFontVariant","TextSpacing","TextFilters",iR.animationsEnabled&&"TextAnimations"],components:t});return(0,v.jsx)(vx,{items:i,itemRender:i=>{let o=t[i]||O_[i];return(0,v.jsx)(o,{element:r,elements:n,store:e},i)}})});var w=g("8NFma"),sK=g("gztBd"),w=g("8NFma"),pQ=g("leH9B"),OS=w.forwardRef(function(e,t){var n=e.size>=pQ.IconSize.LARGE,r=n?pQ.IconSize.LARGE:pQ.IconSize.STANDARD,i="".concat(-1*r/.05/2);return w.createElement(p3,(0,sK.__assign)({iconName:"crop",ref:t},e),w.createElement("path",{d:n?"M280 20C280 8.954 288.954 0 300 0C311.046 0 320 8.954 320 20L320 80L380 80C391.046 80 400 88.954 400 100C400 111.046 391.046 120 380 120L120 120L120 380.00002C120 391.04574 111.0458 400.0000252612 100 400.0000262268C88.9544 400.0000271924 80 391.04576 80 380.00002L80 320L20 320C8.95434 320 0.0000271924 311.0458 0.0000262268 300C0.0000252612 288.9544 8.95434 280 20 280L80 280L80 100C80 88.954 88.9544 80 100 80L280 80L280 20zM300 320L160 320L160 280L280 280L280 160L320 160L320 300.0002C320 311.0458 311.046 320 300 320zM0 400H400V0H0V400z":"M220 20C220 8.954 228.954 0 240 0C251.046 0 260 8.954 260 20V60H300C311.046 60 320 68.954 320 80C320 91.046 311.046 100 300 100H100.0002V300C100.0002 311.0457 91.0458 319.999999034354 80.0002 320C68.9544 320.000000965646 60.0002 311.04568 60.0002 300L60.0002 260L20.0002 260C8.95444 260 0.0001154066 251.0456 0.000152588 240C0.0001516224 228.9542 8.95444 220 20.0002 220L60.0002 220L60.0002 80C60.0002 68.954 68.9544 60 80.0002 60H220V20zM240 260.0002L120.0002 260.0002V220.0002L220 220.0002L220 120H260L260 240.0002C260 251.0458 251.046 260.0002 240 260.0002z",fillRule:"evenodd",transform:"scale(0.05, -0.05) translate(".concat(i,", ").concat(i,")"),style:{transformOrigin:"center"}}))});OS.defaultProps={size:pQ.IconSize.STANDARD},OS.displayName="Blueprint5.Icon.Crop",g("8NFma");var OC=({element:e})=>(0,v.jsx)(vi,{content:(0,v.jsxs)(vS,{children:[(0,v.jsx)(vA,{shouldDismissPopover:!1,icon:"arrows-horizontal",text:sB("toolbar.flipHorizontally"),onClick:()=>{e.set({flipX:!e.flipX})}}),(0,v.jsx)(vA,{shouldDismissPopover:!1,text:sB("toolbar.flipVertically"),icon:"arrows-vertical",onClick:()=>{e.set({flipY:!e.flipY})}})]}),position:sJ.BOTTOM,children:(0,v.jsx)(ge,{text:sB("toolbar.flip"),minimal:!0})}),w=g("8NFma"),sK=g("gztBd"),w=g("8NFma"),pQ=g("leH9B"),OO=function(e){function t(t){var n=e.call(this,t)||this;n.childRef=w.createRef();var r=pS("bp-dialog");return n.titleId="title-".concat(r),n}return(0,sK.__extends)(t,e),t.prototype.render=function(){var e,t,n=this.props,r=n.className,i=n.children,o=n.containerRef,a=n.style,l=n.title,s=n.role,u=(0,sK.__rest)(n,["className","children","containerRef","style","title","role"]);return w.createElement(m3,(0,sK.__assign)({},u,{className:sX.OVERLAY_SCROLL_CONTAINER,childRef:this.childRef,hasBackdrop:!0}),w.createElement("div",{className:sX.DIALOG_CONTAINER,ref:void 0===o?this.childRef:pD(o,this.childRef)},w.createElement("div",{className:c(sY)(sX.DIALOG,r),role:void 0===s?"dialog":s,"aria-modal":null!==(e=u.enforceFocus)&&void 0!==e?e:null===(t=m3.defaultProps)||void 0===t?void 0:t.enforceFocus,"aria-labelledby":this.props["aria-labelledby"]||(l?this.titleId:void 0),"aria-describedby":this.props["aria-describedby"],style:a},this.maybeRenderHeader(),i)))},t.prototype.validateProps=function(e){null==e.title&&(null!=e.icon&&console.warn(ph),null!=e.isCloseButtonShown&&console.warn(pf))},t.prototype.maybeRenderCloseButton=function(){return!1!==this.props.isCloseButtonShown?w.createElement(ge,{"aria-label":"Close",className:sX.DIALOG_CLOSE_BUTTON,icon:w.createElement(bf,{size:pQ.IconSize.STANDARD}),minimal:!0,onClick:this.props.onClose}):void 0},t.prototype.maybeRenderHeader=function(){var e=this.props,t=e.icon,n=e.title;if(null!=n)return w.createElement("div",{className:sX.DIALOG_HEADER},w.createElement(p5,{icon:t,size:pQ.IconSize.STANDARD,"aria-hidden":!0,tabIndex:-1}),w.createElement(vO,{id:this.titleId},n),this.maybeRenderCloseButton())},t.defaultProps={canOutsideClickClose:!0,isOpen:!1},t.displayName="".concat(pB,".Dialog"),t}(p4);let Ok=async e=>{let t=await fetch(lr(),{method:"POST",body:JSON.stringify({url:e})});return 200!==t.status?(alert(sB("error.removeBackground")),e):(await t.json()).url},OP=j(({isOpen:e,onClose:t,element:n})=>{let[r,i]=c(w).useState(n.src);c(w).useEffect(()=>{i(n.src)},[n.src]);let[o,a]=c(w).useState(!1),l=async()=>{a(!0);try{i(await Ok(n.src))}catch(e){console.error(e)}a(!1)},s=r!==n.src;return(0,v.jsxs)(OO,{onClose:t,title:sB("toolbar.removeBackgroundTitle"),isOpen:e,style:{width:"80%",maxWidth:"700px"},children:[(0,v.jsx)("div",{className:sX.DIALOG_BODY,children:(0,v.jsx)("img",{src:r,style:{width:"100%",maxHeight:"400px",objectFit:"contain"}})}),(0,v.jsxs)("div",{className:sX.DIALOG_FOOTER,style:{position:"relative"},children:[(0,v.jsxs)("div",{style:{position:"absolute",top:"5px"},children:["Powered by"," ",(0,v.jsx)("a",{href:"https://hotpot.ai/",target:"_blank",children:"hotpot.ai"})]}),(0,v.jsxs)("div",{className:sX.DIALOG_FOOTER_ACTIONS,children:[!s&&(0,v.jsx)(ge,{onClick:l,loading:o,children:sB("toolbar.removeBackground")}),s&&(0,v.jsxs)(v.Fragment,{children:[(0,v.jsx)(ge,{onClick:()=>{i(n.src),t()},loading:o,children:sB("toolbar.cancelRemoveBackground")}),(0,v.jsx)(ge,{onClick:()=>{n.set({src:r}),t()},loading:o,intent:"primary",children:sB("toolbar.confirmRemoveBackground")})]})]})]})]})}),OT=j(({element:e,store:t})=>e.contentEditable?e.clipSrc?(0,v.jsx)(ge,{text:sB("toolbar.removeClip"),minimal:!0,onClickCapture:t=>{e.set({clipSrc:""})}}):(0,v.jsx)(ge,{minimal:!0,text:sB("toolbar.clip"),onClickCapture:e=>{e.stopPropagation(),t.openSidePanel("image-clip")}}):null),OA=j(({element:e,store:t})=>e.contentEditable?(0,v.jsx)(vu,{content:sB("toolbar.crop"),position:"bottom",children:(0,v.jsx)(ge,{minimal:!0,icon:(0,v.jsx)(OS,{}),onClickCapture:t=>{t.stopPropagation(),e.toggleCropMode(!0)}})}):null);j(({element:e,store:t})=>e.clipSrc?(0,v.jsx)(ge,{text:sB("toolbar.removeClip"),minimal:!0,onClickCapture:t=>{e.set({clipSrc:""})}}):null);let Oj={ImageFlip:OC,ImageFilters:CO,ImageFitToBackground:({element:e})=>(0,v.jsx)(ge,{text:sB("toolbar.fitToBackground"),minimal:!0,onClick:async()=>{let{page:t}=e,n=t.computedWidth+2*t.bleed,r=t.computedHeight+2*t.bleed,i=l0({width:n,height:r},await lZ(e.src));e.set({x:-t.bleed,y:-t.bleed,width:n,height:r,rotation:0,...i})}}),ImageCrop:OA,ImageClip:OT,ImageRemoveBackground:({element:e})=>{let[t,n]=c(w).useState(!1);return(0,v.jsxs)(v.Fragment,{children:[(0,v.jsx)(ge,{text:sB("toolbar.removeBackground"),minimal:!0,onClick:e=>{n(!0)}}),(0,v.jsx)(OP,{isOpen:t,onClose:()=>{n(!1)},element:e})]})},ImageAnimations:C1},ON=j(({store:e,components:t})=>{let n=e.selectedElements[0],r=n._cropModeEnabled,i=c(w).useRef({});c(w).useEffect(()=>{r&&(i.current={x:n.x,y:n.y,width:n.width,height:n.height,cropX:n.cropX,cropY:n.cropY,cropWidth:n.cropWidth,cropHeight:n.cropHeight})},[r]);let o=vw({type:"image",usedItems:["ImageFlip","ImageFilters","ImageFitToBackground","ImageClip","ImageCrop",iR.animationsEnabled&&"ImageAnimations",iR.removeBackgroundEnabled&&"ImageRemoveBackground"],components:t});return(0,v.jsxs)(v.Fragment,{children:[!r&&(0,v.jsx)(vx,{items:o,itemRender:r=>{let i=t[r]||Oj[r];return(0,v.jsx)(i,{element:n,store:e},r)}}),r&&(0,v.jsxs)(vp.Group,{children:[(0,v.jsx)(ge,{text:sB("toolbar.cropDone"),minimal:!0,icon:"tick",onClickCapture:e=>{n.toggleCropMode(!1)}}),(0,v.jsx)(ge,{text:sB("toolbar.cropCancel"),minimal:!0,icon:"cross",onClickCapture:e=>{n.set({...i.current}),n.toggleCropMode(!1)}})]})]})});g("8NFma");let OR=(e,t)=>Array.from(e.keys()).find(e=>oe(e,t)),OL=(e,t)=>{let n=OR(e,t);return e.get(n||"")||t},OI={SvgFlip:OC,SvgFilters:CO,SvgColors:j(({element:e,elements:t,store:n})=>{let r=on(e.src);return(0,v.jsx)(v.Fragment,{children:!e.maskSrc&&r.slice(0,5).map(t=>(0,v.jsx)(Cb,{value:OL(e.colorsReplace,t),style:{marginLeft:"5px"},onChange:n=>{let r=OR(e.colorsReplace,t)||t;e.replaceColor(r,n)},store:n,gradientEnabled:!0},t))})}),SvgAnimations:C1},OM=j(({store:e,hideSvgEffects:t,components:n})=>{let r=e.selectedElements,i=vw({type:"svg",usedItems:["SvgFlip",!t&&"SvgFilters","SvgColors",iR.animationsEnabled&&"SvgAnimations"].filter(e=>!!e),components:n});return(0,v.jsx)(vx,{items:i,itemRender:t=>{let i=n[t]||OI[t];return(0,v.jsx)(i,{elements:r,element:r[0],store:e},t)}})});g("8NFma");let OD=j(({store:e,elements:t})=>{let n=n=>{e.history.transaction(()=>{t.forEach(e=>{e.set(n)})})},r=n=>{e.history.transaction(()=>{t.forEach(e=>{let{middleLeft:t,middleRight:r}=aT(e),{x:i,y:o,rotation:a}=aA(t,r,n);e.set({x:i,y:o,rotation:a,height:n})})})};return(0,v.jsx)(vi,{content:(0,v.jsxs)("div",{style:{padding:"15px",paddingTop:"15px",width:"230px"},children:[(0,v.jsxs)("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingBottom:"5px"},children:[(0,v.jsx)("div",{children:sB("toolbar.lineSize")}),(0,v.jsx)("div",{children:(0,v.jsx)(CE,{value:t[0].height,onValueChange:e=>{r(e)},style:{width:"50px"},min:1,max:100,buttonPosition:"none"})})]}),(0,v.jsx)(yt,{value:t[0].height,onChange:e=>{r(e)},min:1,max:100,labelRenderer:!1}),(0,v.jsxs)("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingBottom:"5px",paddingTop:"15px"},children:[(0,v.jsx)(ge,{onClick:()=>{n({dash:[]})},active:0===t[0].dash.length,children:(0,v.jsx)("svg",{width:"24",height:"24",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",children:(0,v.jsx)("line",{x2:"24",y1:"50%",y2:"50%",stroke:"currentColor",strokeWidth:"2"})})}),(0,v.jsx)(ge,{onClick:()=>{n({dash:[4,1]})},active:4===t[0].dash[0],children:(0,v.jsx)("svg",{width:"24",height:"24",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",children:(0,v.jsx)("line",{x1:"-1",x2:"25",y1:"50%",y2:"50%",stroke:"currentColor",strokeDasharray:"12 2",strokeWidth:"2"})})}),(0,v.jsx)(ge,{onClick:()=>{n({dash:[2,1]})},active:2===t[0].dash[0],children:(0,v.jsx)("svg",{width:"24",height:"24",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",children:(0,v.jsx)("line",{x1:"1",x2:"23",y1:"50%",y2:"50%",stroke:"currentColor",strokeDasharray:"6 2",strokeWidth:"2"})})}),(0,v.jsx)(ge,{onClick:()=>{n({dash:[1,1]})},active:1===t[0].dash[0],children:(0,v.jsx)("svg",{width:"24",height:"24",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",children:(0,v.jsx)("line",{x1:"1",x2:"23",y1:"50%",y2:"50%",stroke:"currentColor",strokeDasharray:"2 2",strokeWidth:"2"})})})]})]}),position:sJ.BOTTOM,children:(0,v.jsx)(ge,{icon:"settings",minimal:!0})})}),OF=j(({elements:e,store:t})=>(0,v.jsx)(Cb,{value:e[0].color,style:{marginRight:"5px"},gradientEnabled:!1,onChange:n=>t.history.transaction(()=>{e.forEach(e=>{e.set({color:n})})}),store:t})),Oz=(0,v.jsx)("span",{"aria-hidden":"true",className:"bp5-icon",children:(0,v.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",children:(0,v.jsx)("path",{stroke:"currentColor",strokeWidth:"2",d:"M 1 8 L 16 8"})})}),OB=(0,v.jsx)("span",{"aria-hidden":"true",className:"bp5-icon",children:(0,v.jsxs)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",children:[(0,v.jsx)("path",{stroke:"currentColor",strokeWidth:"2",d:"M 8 3 L 1 8 L 8 13",fill:"none",strokeLinejoin:"round",strokeLinecap:"round"}),(0,v.jsx)("path",{stroke:"currentColor",strokeWidth:"2",d:"M 1 8 L 15 8",strokeLinejoin:"round",strokeLinecap:"round"})]})}),OU=(0,v.jsx)("span",{"aria-hidden":"true",className:"bp5-icon",children:(0,v.jsxs)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",children:[(0,v.jsx)("path",{stroke:"currentColor",strokeWidth:"2",d:"M 8 3 L 1 8 L 8 13 Z",fill:"currentColor",strokeLinejoin:"round",strokeLinecap:"round"}),(0,v.jsx)("path",{stroke:"currentColor",strokeWidth:"2",d:"M 1 8 L 15 8",strokeLinejoin:"round",strokeLinecap:"round"})]})}),OH={"":Oz,arrow:OB,triangle:OU,bar:(0,v.jsx)("span",{"aria-hidden":"true",className:"bp5-icon",children:(0,v.jsxs)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",children:[(0,v.jsx)("path",{stroke:"currentColor",strokeWidth:"2",d:"M 1 3 L 1 13",strokeLinejoin:"round",strokeLinecap:"round"}),(0,v.jsx)("path",{stroke:"currentColor",strokeWidth:"2",d:"M 1 8 L 15 8",strokeLinejoin:"round",strokeLinecap:"round"})]})}),square:(0,v.jsx)("span",{"aria-hidden":"true",className:"bp5-icon",children:(0,v.jsxs)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",children:[(0,v.jsx)("path",{stroke:"currentColor",strokeWidth:"2",d:"M 1 4 L 9 4 L 9 12 L 1 12 Z",fill:"currentColor",strokeLinejoin:"round",strokeLinecap:"round"}),(0,v.jsx)("path",{stroke:"currentColor",strokeWidth:"2",d:"M 1 8 L 15 8",strokeLinejoin:"round",strokeLinecap:"round"})]})}),circle:(0,v.jsx)("span",{"aria-hidden":"true",className:"bp5-icon",children:(0,v.jsxs)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",children:[(0,v.jsx)("circle",{cx:"4",cy:"8",r:"4",fill:"currentColor"}),(0,v.jsx)("path",{stroke:"currentColor",strokeWidth:"2",d:"M 1 8 L 15 8",strokeLinejoin:"round",strokeLinecap:"round"})]})})},OV=({type:e,active:t,onClick:n,flipped:r})=>{let i=OH[e];return(0,v.jsx)(ge,{icon:r?(0,v.jsx)("span",{style:{transform:"scaleX(-1)"},children:i}):i,minimal:!0,onClick:n,active:t})},Oq=j(({elements:e,store:t,property:n})=>{let r="endHead"===n,i=OH[e[0][n]],o=r?(0,v.jsx)("span",{style:{transform:"scaleX(-1)"},children:i}):i,a=r=>{t.history.transaction(()=>{e.forEach(e=>{e.set({[n]:r})})})};return(0,v.jsx)(v.Fragment,{children:(0,v.jsx)(vi,{content:(0,v.jsxs)("div",{style:{width:"150px",padding:"10px"},children:[(0,v.jsx)("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between"},children:["","arrow","triangle"].map(t=>(0,v.jsx)(OV,{type:t,active:e[0][n]===t,onClick:()=>{a(t)},flipped:r},t))}),(0,v.jsx)("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between"},children:["bar","square","circle"].map(t=>(0,v.jsx)(OV,{type:t,active:e[0][n]===t,onClick:()=>{a(t)},flipped:r},t))})]}),position:sJ.BOTTOM,children:(0,v.jsx)(ge,{icon:o,minimal:!0})})})}),OG={LineSettings:OD,LineColor:OF,LineHeads:j(({elements:e,store:t})=>(0,v.jsxs)(v.Fragment,{children:[(0,v.jsx)(Oq,{elements:e,store:t,property:"startHead"}),(0,v.jsx)(Oq,{elements:e,store:t,property:"endHead"})]})),LineAnimations:C1},OW=j(({store:e,components:t})=>{let n=e.selectedElements[0],r=vw({type:"line",usedItems:["LineColor","LineSettings","LineHeads",iR.animationsEnabled&&"LineAnimations"].filter(e=>!!e),components:t});return(0,v.jsx)(vx,{items:r,itemRender:r=>{let i=t[r]||OG[r];return(0,v.jsx)(i,{element:n,store:e,elements:e.selectedElements},r)}})});var w=g("8NFma");async function O$(e){let t=document.createElement("video");t.crossOrigin="anonymous",t.src=e,await t.play(),t.pause();let{videoWidth:n,videoHeight:r}=t;return{width:n,height:r}}async function OK(e){let t=document.createElement("video");t.crossOrigin="anonymous",t.src=e,await t.play(),t.pause();let{duration:n}=t;return n}async function OY(e,t=5){return new Promise((n,r)=>{var i=document.createElement("video"),o=document.createElement("canvas");o.width=480,o.height=360;var a=o.getContext("2d");i.crossOrigin="anonymous",i.src=e,i.addEventListener("error",e=>{r(e)}),i.addEventListener("loadeddata",function(){let e=i.videoWidth/i.videoHeight;o.width=480,o.height=480/e,i.currentTime=t}),i.addEventListener("seeked",function(){a.drawImage(i,0,0,o.width,o.height);try{var e=o.toDataURL();n(e)}catch(e){r(e)}})})}async function OX(e,t,n){return new Promise((r,i)=>{let o=t.getContext("2d"),a=()=>{try{o.drawImage(e,0,0,t.width,t.height);let n=t.toDataURL();r(n),e.removeEventListener("seeked",a)}catch(t){i(t),e.removeEventListener("seeked",a)}};e.addEventListener("seeked",a),e.currentTime=n})}let OZ={VideoTrim:j(({store:e,components:t,element:n})=>{let r=c(w).useRef(null),[i,o]=c(w).useState([]);c(w).useEffect(()=>{o([])},[n.src]);let a=async()=>{if(!n.src||i.length)return;let{width:e,height:t}=await O$(n.src),{src:a}=n,l=r.current.offsetHeight,s=Math.ceil(r.current.offsetWidth/(e/t*l)),u=await OK(a),c=document.createElement("video");c.crossOrigin="anonymous",c.src=a;let d=document.createElement("canvas");d.width=480;try{await new Promise((e,t)=>{c.addEventListener("loadeddata",()=>{let t=c.videoWidth/c.videoHeight;d.height=480/t,e()}),c.addEventListener("error",t)}),o([]);for(let e=0;e<s;e++){let t=e*u/s,n=await OX(c,d,t);o(e=>e.concat(n))}}catch(e){console.error("Error generating previews:",e)}},l=(e,t)=>{e.preventDefault();let i=e=>{e.preventDefault();let{clientX:i}=e,{left:o,width:a}=r.current.getBoundingClientRect(),{src:l}=n,s=(i-o)/a;"start"===t?n.set({startTime:Math.min(n.endTime,Math.max(0,s))}):"end"===t&&n.set({endTime:Math.min(1,Math.max(n.startTime,s))})};window.addEventListener("mousemove",i),window.addEventListener("mouseup",()=>{window.removeEventListener("mousemove",i)})};return(0,v.jsx)(vi,{position:"bottom",onOpened:a,content:(0,v.jsx)(vp,{style:{boxShadow:"none",backgroundColor:"transparent",width:"calc(100vw - 300px)"},children:(0,v.jsxs)(vh,{children:[(0,v.jsx)(v0,{style:{width:"80px"},value:parseFloat((n.duration*(n.endTime-n.startTime)/1e3).toFixed(2)),minorStepSize:.01,stepSize:.1,buttonPosition:"none",readOnly:!0}),(0,v.jsxs)("div",{style:{width:"calc(100vw - 420px)",height:"30px",display:"flex",position:"relative",overflow:"hidden",marginLeft:"10px"},ref:r,children:[i.map((e,t)=>(0,v.jsx)("img",{src:e,style:{width:"auto",height:"100%",objectFit:"cover"}},t)),(0,v.jsx)("div",{style:{position:"absolute",top:"0",left:0,width:100*n.startTime+"%",height:"30px",backgroundColor:"rgb(0, 0, 0, 0.5)"}}),(0,v.jsx)("div",{style:{position:"absolute",top:"0",right:"0%",width:100-100*n.endTime+"%",height:"30px",backgroundColor:"rgb(0, 0, 0, 0.5)"}}),(0,v.jsx)("div",{style:{position:"absolute",top:"0",left:100*n.startTime+"%",width:"10px",height:"30px",borderRadius:"0px",backgroundColor:"rgb(0, 161, 255, 0.9)",cursor:"ew-resize"},onMouseDown:e=>{l(e,"start")}}),(0,v.jsx)("div",{style:{position:"absolute",top:"0",right:100-100*n.endTime+"%",width:"10px",height:"30px",borderRadius:"0px",backgroundColor:"rgb(0, 161, 255, 0.9)",cursor:"ew-resize"},onMouseDown:e=>{l(e,"end")}})]})]})}),children:(0,v.jsx)(ge,{icon:"cut",minimal:!0,children:"Trim"})})}),VideoAnimations:C1},OQ=j(({store:e,components:t})=>{let n=e.selectedElements,r=vw({type:"video",usedItems:["VideoTrim",iR.animationsEnabled&&"VideoAnimations"].filter(e=>!!e),components:t});return(0,v.jsx)(vx,{items:r,itemRender:r=>{let i=t[r]||OZ[r];return(0,v.jsx)(i,{elements:n,element:n[0],store:e},r)}})});g("8NFma");var sK=g("gztBd"),w=g("8NFma"),pQ=g("leH9B"),OJ=w.forwardRef(function(e,t){var n=e.size>=pQ.IconSize.LARGE,r=n?pQ.IconSize.LARGE:pQ.IconSize.STANDARD,i="".concat(-1*r/.05/2);return w.createElement(p3,(0,sK.__assign)({iconName:"disable",ref:t},e),w.createElement("path",{d:n?"M200 400C89.6 400 0 310.4 0 200C0 89.6 89.6 0 200 0S400 89.6 400 200C400 310.4 310.4 400 200 400zM40 200C40 288.4 111.6 360 200 360C237 360 271 347.4 298 326.2L73.8 102C52.6 129 40 163 40 200zM200 40C163 40 129 52.6 102 73.8L326.2 298C347.4000000000001 271 360 237 360 200C360 111.6 288.4 40 200 40z":"M159.8 320.2C71.4 320.2 -0.2 248.6 -0.2 160.2S71.4 0.2 159.8 0.2S319.8 71.8 319.8 160.2S248.2 320.2 159.8 320.2zM39.8 160.2C39.8 226.4 93.6 280.2 159.8 280.2C185.8 280.2 209.6 271.8 229.2 257.8L62.2 90.8C48.2 110.4 39.8 134.2 39.8 160.2zM159.8 40.2C133.8 40.2 110 48.6 90.4 62.6L257.4 229.6C271.4 210 279.8 186.2 279.8 160.2C279.8 93.8 226.2 40.2 159.8 40.2z",fillRule:"evenodd",transform:"scale(0.05, -0.05) translate(".concat(i,", ").concat(i,")"),style:{transformOrigin:"center"}}))});OJ.defaultProps={size:pQ.IconSize.STANDARD},OJ.displayName="Blueprint5.Icon.Disable";var O0={};O0=function(e){return ET({tag:"svg",attr:{viewBox:"0 0 20 20",fill:"currentColor"},child:[{tag:"path",attr:{d:"M0 0h20v5H0V0zm0 7h20v4H0V7zm0 6h20v3H0v-3zm0 5h20v2H0v-2z"}}]})(e)};let O1=j(({elements:e,store:t})=>(0,v.jsx)(Cb,{value:e[0].fill,style:{marginRight:"5px"},gradientEnabled:!0,onChange:n=>t.history.transaction(()=>{e.forEach(e=>{e.set({fill:n})})}),store:t})),O2=j(({store:e,elements:t,element:n})=>{let r=n=>{e.history.transaction(()=>{t.forEach(e=>{e.set(n)})})};return(0,v.jsx)(vi,{content:(0,v.jsxs)("div",{style:{padding:"15px",paddingTop:"15px",width:"270px"},children:[(0,v.jsxs)("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingBottom:"15px"},children:[(0,v.jsx)(ge,{onClick:()=>{r({strokeWidth:0})},active:0===t[0].strokeWidth,style:{width:"44px",height:"34px"},icon:(0,v.jsx)(OJ,{size:20})}),(0,v.jsx)(ge,{onClick:()=>{r({dash:[],strokeWidth:t[0].strokeWidth||10})},active:t[0].strokeWidth&&0===t[0].dash.length,children:(0,v.jsx)("svg",{width:"24",height:"24",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",children:(0,v.jsx)("line",{x2:"24",y1:"50%",y2:"50%",stroke:"currentColor",strokeWidth:"2"})})}),(0,v.jsx)(ge,{onClick:()=>{r({dash:[4,1],strokeWidth:t[0].strokeWidth||10})},active:t[0].strokeWidth&&4===t[0].dash[0],children:(0,v.jsx)("svg",{width:"24",height:"24",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",children:(0,v.jsx)("line",{x1:"-1",x2:"25",y1:"50%",y2:"50%",stroke:"currentColor",strokeDasharray:"12 2",strokeWidth:"2"})})}),(0,v.jsx)(ge,{onClick:()=>{r({dash:[2,1],strokeWidth:t[0].strokeWidth||10})},active:t[0].strokeWidth&&2===t[0].dash[0],children:(0,v.jsx)("svg",{width:"24",height:"24",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",children:(0,v.jsx)("line",{x1:"1",x2:"23",y1:"50%",y2:"50%",stroke:"currentColor",strokeDasharray:"6 2",strokeWidth:"2"})})}),(0,v.jsx)(ge,{onClick:()=>{r({dash:[1,1],strokeWidth:t[0].strokeWidth||10})},active:t[0].strokeWidth&&1===t[0].dash[0],children:(0,v.jsx)("svg",{width:"24",height:"24",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",children:(0,v.jsx)("line",{x1:"1",x2:"23",y1:"50%",y2:"50%",stroke:"currentColor",strokeDasharray:"2 2",strokeWidth:"2"})})})]}),(0,v.jsxs)("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingBottom:"5px"},children:[(0,v.jsx)("div",{children:sB("toolbar.strokeWidth")}),(0,v.jsx)("div",{children:(0,v.jsx)(CE,{value:t[0].strokeWidth,onValueChange:e=>{r({strokeWidth:e})},style:{width:"50px"},min:0,max:Math.round(Math.min(n.width,n.height)/2),buttonPosition:"none"})})]}),(0,v.jsx)(yt,{value:t[0].strokeWidth,onChange:e=>{r({strokeWidth:e})},min:0,max:Math.round(Math.min(n.width,n.height)/2),labelRenderer:!1}),"rect"===n.subType&&(0,v.jsxs)(v.Fragment,{children:[(0,v.jsxs)("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"15px",paddingBottom:"5px"},children:[(0,v.jsx)("div",{children:sB("toolbar.cornerRadius")}),(0,v.jsx)("div",{children:(0,v.jsx)(CE,{value:t[0].cornerRadius,onValueChange:e=>{r({cornerRadius:e})},style:{width:"50px"},min:0,max:Math.round(Math.max(n.width,n.height)/2),buttonPosition:"none"})})]}),(0,v.jsx)(yt,{value:t[0].cornerRadius,onChange:e=>{r({cornerRadius:e})},min:0,max:Math.round(Math.max(n.width,n.height)/2),labelRenderer:!1})]})]}),position:sJ.BOTTOM,children:(0,v.jsx)(ge,{icon:(0,v.jsx)(c(O0),{}),minimal:!0})})}),O3={FigureFill:O1,FigureStroke:j(({elements:e,store:t})=>e.find(e=>e.strokeWidth)?(0,v.jsx)(Cb,{value:e[0].stroke,style:{marginRight:"5px"},gradientEnabled:!1,onChange:n=>t.history.transaction(()=>{e.forEach(e=>{e.set({stroke:n})})}),store:t}):null),FigureSettings:O2,FigureAnimations:C1,FigureFilters:CC},O5=j(({store:e,components:t})=>{let n=e.selectedElements[0],r=vw({type:"figure",usedItems:["FigureFill","FigureStroke","FigureSettings","FigureFilters",iR.animationsEnabled&&"FigureAnimations"].filter(e=>!!e),components:t});return(0,v.jsx)(vx,{items:r,itemRender:r=>{let i=t[r]||O3[r];return(0,v.jsx)(i,{element:n,store:e,elements:e.selectedElements},r)}})});g("8NFma");let O4={ManyAnimations:C1},O6=j(({store:e,components:t})=>{let n=e.selectedElements,r=vw({type:"many",usedItems:[iR.animationsEnabled&&"ManyAnimations"],components:t});return(0,v.jsx)(vx,{items:r,itemRender:r=>{let i=t[r]||O4[r];return(0,v.jsx)(i,{elements:n,element:n[0],store:e},r)}})});var w=g("8NFma");let O8=({value:e,onValueChange:t,...n})=>{let[r,i]=c(w).useState(e.toString());return c(w).useEffect(()=>{i(e.toString())},[e]),(0,v.jsx)(v0,{value:r,onValueChange:(e,n)=>{i(n),Number.isNaN(e)||t(e)},...n})},O9={PageDuration:j(({store:e})=>{if(!e.activePage)return null;let{duration:t}=e.activePage;return(0,v.jsx)(vi,{position:"bottom",content:(0,v.jsxs)("div",{style:{padding:"15px",paddingTop:"15px",width:"230px"},children:[(0,v.jsxs)("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"},children:[(0,v.jsx)("div",{children:sB("toolbar.duration")}),(0,v.jsx)("div",{children:(0,v.jsx)(O8,{value:t/1e3,onValueChange:t=>{e.activePage.set({duration:1e3*t})},style:{width:"50px"},min:0,buttonPosition:"none"})})]}),(0,v.jsx)(yt,{value:Math.min(t/1e3,50),onChange:t=>{e.activePage.set({duration:1e3*t})},min:0,max:50,showTrackFill:!1,labelRenderer:!1})]}),children:(0,v.jsxs)(ge,{icon:"time",minimal:!0,children:[(e.activePage.duration/1e3).toFixed(1),"s"]})})})},O7=j(({store:e,components:t})=>{let n=vw({type:"page",usedItems:[iR.animationsEnabled&&"PageDuration"].filter(e=>!!e),components:t});return(0,v.jsx)(vx,{items:n,itemRender:n=>{let r=t[n]||O9[n];return(0,v.jsx)(r,{store:e},n)}})});var w=g("8NFma");let ke=({store:e})=>{let[t,n]=c(w).useState(!1);return(0,v.jsx)(vi,{content:(0,v.jsxs)(vS,{children:[(0,v.jsx)(vA,{icon:"media",text:sB("toolbar.saveAsImage"),onClick:async()=>{e.pages.forEach(t=>{e.saveAsImage({pageId:t.id})})}}),(0,v.jsx)(vA,{icon:"document",text:sB("toolbar.saveAsPDF"),onClick:async()=>{n(!0),await e.saveAsPDF(),n(!1)}})]}),position:sJ.BOTTOM,children:(0,v.jsx)(ge,{icon:"import",text:sB("toolbar.download"),minimal:!0,loading:t})})};g("8NFma");let kt=j(({store:e})=>{let t=e.selectedShapes.length>0,n=e.selectedShapes[0],r=n?.locked,i=r?"lock":"unlock",o=r?sB("toolbar.lockedDescription"):sB("toolbar.unlockedDescription");return(0,v.jsx)(vu,{content:o,disabled:!t,position:"bottom",children:(0,v.jsx)(ge,{minimal:!0,disabled:!t,icon:i,onClick:()=>{e.selectedShapes.forEach(e=>e.set({draggable:r,contentEditable:r,styleEditable:r,resizable:r,removable:r}))}})})});g("8NFma");var kn={};kn=function(e){return ET({tag:"svg",attr:{viewBox:"0 0 24 24",fill:"currentColor"},child:[{tag:"path",attr:{d:"M17.66 8L12 2.35 6.34 8C4.78 9.56 4 11.64 4 13.64s.78 4.11 2.34 5.67 3.61 2.35 5.66 2.35 4.1-.79 5.66-2.35S20 15.64 20 13.64 19.22 9.56 17.66 8zM6 14c.01-2 .62-3.27 1.76-4.4L12 5.27l4.24 4.38C17.38 10.77 17.99 12 18 14H6z"}}]})(e)};let kr=j(({store:e})=>{let t=e.selectedShapes.length>0,n=t=>{t=Math.max(0,Math.min(t,100)),e.selectedShapes.forEach(e=>{e.set({opacity:t/100})})},r=Math.round(e.selectedShapes[0]?.opacity*100);return(0,v.jsx)(vi,{disabled:!t,minimal:!1,content:(0,v.jsxs)("div",{style:{padding:"10px 20px"},children:[(0,v.jsx)("div",{style:{textAlign:"center"},children:sB("toolbar.transparency")}),(0,v.jsxs)("div",{style:{display:"flex"},children:[(0,v.jsx)("div",{style:{paddingTop:"8px",paddingRight:"20px"},children:(0,v.jsx)(yt,{value:r,labelRenderer:!1,onChange:n,min:0,max:100})}),(0,v.jsx)(v0,{value:r,onValueChange:n,min:0,max:100,buttonPosition:"none",style:{width:"50px"},selectAllOnFocus:!0})]})]}),position:sJ.BOTTOM,children:(0,v.jsx)(vu,{content:sB("toolbar.transparency"),disabled:!t,position:sJ.BOTTOM,children:(0,v.jsx)(ge,{minimal:!0,disabled:!t,children:(0,v.jsx)(c(kn),{className:"bp5-icon",style:{fontSize:"20px"}})})})})});g("8NFma");let ki=j(({store:e})=>{let t=e.selectedElements.length>0,n=e.selectedElements[0]||{},r=t=>{e.selectedElements.forEach(e=>{e.set(t)})};return(0,v.jsx)(vi,{disabled:!t,minimal:!1,content:(0,v.jsxs)("div",{style:{padding:"15px",paddingTop:"25px",width:"220px"},children:[(0,v.jsx)(Cx,{checked:n.selectable,label:sB("toolbar.selectable"),onChange:e=>{r({selectable:e.target.checked})},alignIndicator:sZ.RIGHT}),(0,v.jsx)(Cx,{checked:n.draggable,label:sB("toolbar.draggable"),onChange:e=>{r({draggable:e.target.checked})},alignIndicator:sZ.RIGHT}),(0,v.jsx)(Cx,{checked:n.removable,label:sB("toolbar.removable"),onChange:e=>{r({removable:e.target.checked})},alignIndicator:sZ.RIGHT}),(0,v.jsx)(Cx,{checked:n.resizable,label:sB("toolbar.resizable"),onChange:e=>{r({resizable:e.target.checked})},alignIndicator:sZ.RIGHT}),(0,v.jsx)(Cx,{checked:n.contentEditable,label:sB("toolbar.contentEditable"),onChange:e=>{r({contentEditable:e.target.checked})},alignIndicator:sZ.RIGHT}),(0,v.jsx)(Cx,{checked:n.styleEditable,label:sB("toolbar.styleEditable"),onChange:e=>{r({styleEditable:e.target.checked})},alignIndicator:sZ.RIGHT}),(0,v.jsx)(Cx,{checked:n.alwaysOnTop,label:sB("toolbar.alwaysOnTop"),onChange:e=>{r({alwaysOnTop:e.target.checked})},alignIndicator:sZ.RIGHT,style:{marginTop:"20px"}}),(0,v.jsx)(Cx,{checked:n.showInExport,label:sB("toolbar.showInExport"),onChange:e=>{r({showInExport:e.target.checked})},alignIndicator:sZ.RIGHT,style:{marginTop:"20px"}})]}),position:sJ.BOTTOM,children:(0,v.jsx)(ge,{icon:"cog",minimal:!0,disabled:!t})})});g("8NFma");let ko=j(({store:e})=>{let t=e.selectedElements.length>1,n=1===e.selectedElements.length&&"group"===e.selectedElements[0].type;return(0,v.jsxs)(v.Fragment,{children:[t&&(0,v.jsx)(ge,{minimal:!0,onClick:()=>{e.groupElements(e.selectedElements.map(e=>e.id))},style:{marginLeft:"auto"},children:sB("toolbar.groupElements")}),n&&(0,v.jsx)(ge,{minimal:!0,onClick:()=>{e.ungroupElements([e.selectedElements[0].id])},style:{marginLeft:"auto"},children:sB("toolbar.ungroupElements")})]})}),ka={text:Oc,image:ON,svg:OM,many:O6,line:OW,video:OQ,figure:O5,page:O7},kl=ap("div")`
   white-space: nowrap;
   /* Add special style for a button with text inside, to make sure it has good with */

package/toolbar/image-toolbar.js CHANGED Viewed

	@@ -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.ImageToolbar=exports.ImageRemoveClip=exports.ImageCrop=exports.ImageClip=exports.ImageFitToBackground=void 0;const react_1=__importDefault(require("react")),mobx_react_lite_1=require("mobx-react-lite"),core_1=require("@blueprintjs/core"),element_container_1=require("./element-container"),icons_1=require("@blueprintjs/icons"),filters_picker_1=__importDefault(require("./filters-picker")),animations_picker_1=require("./animations-picker"),flip_button_1=__importDefault(require("./flip-button")),flags_1=require("../utils/flags"),image_remove_background_button_1=require("./image-remove-background-button"),l10n_1=require("../utils/l10n"),ImageFitToBackground=({element:e})=>react_1.default.createElement(core_1.Button,{text:(0,l10n_1.t)("toolbar.fitToBackground"),minimal:!0,onClick:()=>{const{page:t}=e~~;e.set({x:-t.bleed~~,~~y:-~~t.~~bleed,width:t.~~computedWidth+2t.bleed,~~height:~~t.computedHeight+2t.bleed,~~rotation:~~0,~~cropX:~~0,~~cropY~~:0,~~cropWidth~~:1,~~cropHeight~~:1})}});exports.ImageFitToBackground=ImageFitToBackground,exports.ImageClip=(0,mobx_react_lite_1.observer)((({element:e,store:t})=>e.contentEditable?e.clipSrc?react_1.default.createElement(core_1.Button,{text:(0,l10n_1.t)("toolbar.removeClip"),minimal:!0,onClickCapture:t=>{e.set({clipSrc:""})}}):react_1.default.createElement(core_1.Button,{minimal:!0,text:(0,l10n_1.t)("toolbar.clip"),onClickCapture:e=>{e.stopPropagation(),t.openSidePanel("image-clip")}}):null)),exports.ImageCrop=(0,mobx_react_lite_1.observer)((({element:e,store:t})=>e.contentEditable?react_1.default.createElement(core_1.Tooltip,{content:(0,l10n_1.t)("toolbar.crop"),position:"bottom"},react_1.default.createElement(core_1.Button,{minimal:!0,icon:react_1.default.createElement(icons_1.Crop,null),onClickCapture:t=>{t.stopPropagation(),e.toggleCropMode(!0)}})):null)),exports.ImageRemoveClip=(0,mobx_react_lite_1.observer)((({element:e,store:t})=>e.clipSrc?react_1.default.createElement(core_1.Button,{text:(0,l10n_1.t)("toolbar.removeClip"),minimal:!0,onClickCapture:t=>{e.set({clipSrc:""})}}):null));const PROPS_MAP={ImageFlip:flip_button_1.default,ImageFilters:filters_picker_1.default,ImageFitToBackground:exports.ImageFitToBackground,ImageCrop:exports.ImageCrop,ImageClip:exports.ImageClip,ImageRemoveBackground:image_remove_background_button_1.ImageRemoveBackground,ImageAnimations:animations_picker_1.AnimationsPicker};exports.ImageToolbar=(0,mobx_react_lite_1.observer)((({store:e,components:t})=>{const r=e.selectedElements[0],o=r._cropModeEnabled,a=react_1.default.useRef({});react_1.default.useEffect((()=>{o&&(a.current={x:r.x,y:r.y,width:r.width,height:r.height,cropX:r.cropX,cropY:r.cropY,cropWidth:r.cropWidth,cropHeight:r.cropHeight})}),[o]);const l=["ImageFlip","ImageFilters","ImageFitToBackground","ImageClip","ImageCrop",flags_1.flags.animationsEnabled&&"ImageAnimations",flags_1.flags.removeBackgroundEnabled&&"ImageRemoveBackground"],n=(0,element_container_1.extendToolbar)({type:"image",usedItems:l,components:t});return react_1.default.createElement(react_1.default.Fragment,null,!o&&react_1.default.createElement(element_container_1.ElementContainer,{items:n,itemRender:o=>{const a=t[o]\|\|PROPS_MAP[o];return react_1.default.createElement(a,{element:r,store:e,key:o})}}),o&&react_1.default.createElement(core_1.Navbar.Group,null,react_1.default.createElement(core_1.Button,{text:(0,l10n_1.t)("toolbar.cropDone"),minimal:!0,icon:"tick",onClickCapture:e=>{r.toggleCropMode(!1)}}),react_1.default.createElement(core_1.Button,{text:(0,l10n_1.t)("toolbar.cropCancel"),minimal:!0,icon:"cross",onClickCapture:e=>{r.set(Object.assign({},a.current)),r.toggleCropMode(!1)}})))})),exports.default=exports.ImageToolbar;
1	+ "use strict";var __importDefault=this&&this.__importDefault\|\|function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.ImageToolbar=exports.ImageRemoveClip=exports.ImageCrop=exports.ImageClip=exports.ImageFitToBackground=void 0;const react_1=__importDefault(require("react")),mobx_react_lite_1=require("mobx-react-lite"),core_1=require("@blueprintjs/core"),element_container_1=require("./element-container"),icons_1=require("@blueprintjs/icons"),filters_picker_1=__importDefault(require("./filters-picker")),animations_picker_1=require("./animations-picker"),flip_button_1=__importDefault(require("./flip-button")),flags_1=require("../utils/flags"),image_remove_background_button_1=require("./image-remove-background-button"),image_1=require("../utils/image"),l10n_1=require("../utils/l10n"),ImageFitToBackground=({element:e})=>react_1.default.createElement(core_1.Button,{text:(0,l10n_1.t)("toolbar.fitToBackground"),minimal:!0,onClick:async()=>{const{page:t}=e,r=t.computedWidth+2t.bleed,o=t.computedHeight+2t.bleed,a=await(0,image_1.getImageSize)(e.src),i=(0,image_1.getCrop)({width:r,height:o},a);e.set(Object.assign({x:-t.bleed,y:-t.bleed,width:r,height:o,rotation:0},i))}});exports.ImageFitToBackground=ImageFitToBackground,exports.ImageClip=(0,mobx_react_lite_1.observer)((({element:e,store:t})=>e.contentEditable?e.clipSrc?react_1.default.createElement(core_1.Button,{text:(0,l10n_1.t)("toolbar.removeClip"),minimal:!0,onClickCapture:t=>{e.set({clipSrc:""})}}):react_1.default.createElement(core_1.Button,{minimal:!0,text:(0,l10n_1.t)("toolbar.clip"),onClickCapture:e=>{e.stopPropagation(),t.openSidePanel("image-clip")}}):null)),exports.ImageCrop=(0,mobx_react_lite_1.observer)((({element:e,store:t})=>e.contentEditable?react_1.default.createElement(core_1.Tooltip,{content:(0,l10n_1.t)("toolbar.crop"),position:"bottom"},react_1.default.createElement(core_1.Button,{minimal:!0,icon:react_1.default.createElement(icons_1.Crop,null),onClickCapture:t=>{t.stopPropagation(),e.toggleCropMode(!0)}})):null)),exports.ImageRemoveClip=(0,mobx_react_lite_1.observer)((({element:e,store:t})=>e.clipSrc?react_1.default.createElement(core_1.Button,{text:(0,l10n_1.t)("toolbar.removeClip"),minimal:!0,onClickCapture:t=>{e.set({clipSrc:""})}}):null));const PROPS_MAP={ImageFlip:flip_button_1.default,ImageFilters:filters_picker_1.default,ImageFitToBackground:exports.ImageFitToBackground,ImageCrop:exports.ImageCrop,ImageClip:exports.ImageClip,ImageRemoveBackground:image_remove_background_button_1.ImageRemoveBackground,ImageAnimations:animations_picker_1.AnimationsPicker};exports.ImageToolbar=(0,mobx_react_lite_1.observer)((({store:e,components:t})=>{const r=e.selectedElements[0],o=r._cropModeEnabled,a=react_1.default.useRef({});react_1.default.useEffect((()=>{o&&(a.current={x:r.x,y:r.y,width:r.width,height:r.height,cropX:r.cropX,cropY:r.cropY,cropWidth:r.cropWidth,cropHeight:r.cropHeight})}),[o]);const i=["ImageFlip","ImageFilters","ImageFitToBackground","ImageClip","ImageCrop",flags_1.flags.animationsEnabled&&"ImageAnimations",flags_1.flags.removeBackgroundEnabled&&"ImageRemoveBackground"],l=(0,element_container_1.extendToolbar)({type:"image",usedItems:i,components:t});return react_1.default.createElement(react_1.default.Fragment,null,!o&&react_1.default.createElement(element_container_1.ElementContainer,{items:l,itemRender:o=>{const a=t[o]\|\|PROPS_MAP[o];return react_1.default.createElement(a,{element:r,store:e,key:o})}}),o&&react_1.default.createElement(core_1.Navbar.Group,null,react_1.default.createElement(core_1.Button,{text:(0,l10n_1.t)("toolbar.cropDone"),minimal:!0,icon:"tick",onClickCapture:e=>{r.toggleCropMode(!1)}}),react_1.default.createElement(core_1.Button,{text:(0,l10n_1.t)("toolbar.cropCancel"),minimal:!0,icon:"cross",onClickCapture:e=>{r.set(Object.assign({},a.current)),r.toggleCropMode(!1)}})))})),exports.default=exports.ImageToolbar;

package/utils/html2canvas.d.ts CHANGED Viewed

@@ -1,4 +1,7 @@
 export declare const resetStyleContent = "\n  p {\n    margin: 0;\n    padding: 0;\n    word-wrap: break-word; /* Required for Firefox */\n  }\n  ul, ol {\n    list-style-position: outside;\n    margin: 0;\n    padding: 0;\n    display: inline-block;\n    text-align: left;\n  }\n  li {\n    margin-left: 1.7em;\n    padding-left: 0.5em; /* This should match the margin-left value */\n  }\n  /* Add resets */\n  ul {\n    list-style-type: disc;\n  }\n  ol {\n    list-style-type: decimal;\n  }\n  \n";
+export declare function isContentWrapping({ html }: {
+    html: any;
+}): boolean;
 export declare function detectSize(html: any): {
     width: number;
     height: number;

package/utils/html2canvas.js CHANGED Viewed

	@@ -1 +1 @@
1	- "use strict";var __createBinding=this&&this.__createBinding\|\|(Object.create?function(e,t,n,i){void 0===i&&(i=n);var o=Object.getOwnPropertyDescriptor(t,n);o&&!("get"in o?!t.__esModule:o.writable\|\|o.configurable)\|\|(o={enumerable:!0,get:function(){return t[n]}}),Object.defineProperty(e,i,o)}:function(e,t,n,i){void 0===i&&(i=n),e[i]=t[n]}),__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 n in e)"default"!==n&&Object.prototype.hasOwnProperty.call(e,n)&&__createBinding(t,e,n);return __setModuleDefault(t,e),t};Object.defineProperty(exports,"__esModule",{value:!0}),exports.htmlToCanvas=exports.detectSize=exports.resetStyleContent=void 0;const rasterizeHTML=__importStar(require("rasterizehtml")),fonts_1=require("./fonts");exports.resetStyleContent="\n p {\n margin: 0;\n padding: 0;\n word-wrap: break-word; /* Required for Firefox /\n }\n ul, ol {\n list-style-position: outside;\n margin: 0;\n padding: 0;\n display: inline-block;\n text-align: left;\n }\n li {\n margin-left: 1.7em;\n padding-left: 0.5em; / This should match the margin-left value /\n }\n / Add resets /\n ul {\n list-style-type: disc;\n }\n ol {\n list-style-type: decimal;\n }\n \n";const resetStyle=`\n<style>\n html, body {\n padding: 0;\n margin: 0;\n }\n ${exports.resetStyleContent}\n</style>\n`;let hidden;const getHiddenElement=()=>(hidden\|\|(hidden=document.createElement("div"),hidden.id="polotno-hidden-do-not-touch",hidden.style.overflow="hidden",hidden.style.position="relative",document.body.appendChild(hidden),hidden.innerHTML=`<style>#polotno-hidden-do-not-touch {${exports.resetStyleContent}}</style>`),hidden);function detectSize(e){const t=document.createElement("div");t.innerHTML=e,t.style.display="inline-block",t.style.position="fixed",t.style.top="0px",t.style.left="0px",t.style.zIndex="1000";const n=getHiddenElement();n.appendChild(t);const i=t.getBoundingClientRect();return n.removeChild(t),{width:i.width,height:i.height}}async function htmlToCanvas({html:e,width:t,height:n,fontFamily:i,padding:o,font:l,pixelRatio:r}){const d=document.createElement("canvas");if("Arial"!==i&&!l){const t=(0,fonts_1.getGoogleFontsVariants)();e+=`<link type="text/css" href="https://fonts.googleapis.com/css?family=${i}:${t}" rel="stylesheet">`}if(l){const t=l.styles\|\|(l.url?[{src:`url("${l.url}")`}]:[]);e+="<style>",t.forEach((t=>{e+=`\n @font-face {\n font-family: '${i}';\n src: ${t.src};\n font-style: ${t.fontStyle\|\|"normal"};\n font-weight: ${t.fontWeight\|\|"normal"};\n }\n `})),e+="</style>"}e+=resetStyle;const s=await rasterizeHTML.drawHTML(`<div style="padding: ${o}px;">${e}</div>`,d,{width:t+2o,height:n+2o});d.width=(t+2o)r,d.height=(n+2o)r;const a=d.getContext("2d");return null==a\|\|a.drawImage(s.image,0,0,s.image.widthr,s.image.height*r),d}exports.detectSize=detectSize,exports.htmlToCanvas=htmlToCanvas;
1	+ "use strict";var __createBinding=this&&this.__createBinding\|\|(Object.create?function(e,t,n,i){void 0===i&&(i=n);var o=Object.getOwnPropertyDescriptor(t,n);o&&!("get"in o?!t.__esModule:o.writable\|\|o.configurable)\|\|(o={enumerable:!0,get:function(){return t[n]}}),Object.defineProperty(e,i,o)}:function(e,t,n,i){void 0===i&&(i=n),e[i]=t[n]}),__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 n in e)"default"!==n&&Object.prototype.hasOwnProperty.call(e,n)&&__createBinding(t,e,n);return __setModuleDefault(t,e),t};Object.defineProperty(exports,"__esModule",{value:!0}),exports.htmlToCanvas=exports.detectSize=exports.isContentWrapping=exports.resetStyleContent=void 0;const rasterizeHTML=__importStar(require("rasterizehtml")),fonts_1=require("./fonts");exports.resetStyleContent="\n p {\n margin: 0;\n padding: 0;\n word-wrap: break-word; /* Required for Firefox /\n }\n ul, ol {\n list-style-position: outside;\n margin: 0;\n padding: 0;\n display: inline-block;\n text-align: left;\n }\n li {\n margin-left: 1.7em;\n padding-left: 0.5em; / This should match the margin-left value /\n }\n / Add resets /\n ul {\n list-style-type: disc;\n }\n ol {\n list-style-type: decimal;\n }\n \n";const resetStyle=`\n<style>\n html, body {\n padding: 0;\n margin: 0;\n }\n ${exports.resetStyleContent}\n</style>\n`;let hidden;const getHiddenElement=()=>(hidden\|\|(hidden=document.createElement("div"),hidden.id="polotno-hidden-do-not-touch",hidden.style.overflow="hidden",hidden.style.position="relative",document.body.appendChild(hidden),hidden.innerHTML=`<style>#polotno-hidden-do-not-touch {${exports.resetStyleContent}}</style>`),hidden);function isContentWrapping({html:e}){const t=document.createElement("div");t.innerHTML=e,t.style.display="inline-block",t.style.position="fixed",t.style.top="0px",t.style.left="0px",t.style.zIndex="1000";const n=getHiddenElement();n.appendChild(t);const i=t.cloneNode(!0);i.style.visibility="hidden",i.style.whiteSpace="nowrap",n.appendChild(i);const o=i.scrollWidth>t.clientWidth;return n.removeChild(i),n.removeChild(t),o}function detectSize(e){const t=document.createElement("div");t.innerHTML=e,t.style.display="inline-block",t.style.position="fixed",t.style.top="0px",t.style.left="0px",t.style.zIndex="1000";const n=getHiddenElement();n.appendChild(t);const i=t.getBoundingClientRect();return n.removeChild(t),{width:i.width,height:i.height}}async function htmlToCanvas({html:e,width:t,height:n,fontFamily:i,padding:o,font:l,pixelRatio:s}){const d=document.createElement("canvas");if("Arial"!==i&&!l){const t=(0,fonts_1.getGoogleFontsVariants)();e+=`<link type="text/css" href="https://fonts.googleapis.com/css?family=${i}:${t}" rel="stylesheet">`}if(l){const t=l.styles\|\|(l.url?[{src:`url("${l.url}")`}]:[]);e+="<style>",t.forEach((t=>{e+=`\n @font-face {\n font-family: '${i}';\n src: ${t.src};\n font-style: ${t.fontStyle\|\|"normal"};\n font-weight: ${t.fontWeight\|\|"normal"};\n }\n `})),e+="</style>"}e+=resetStyle;const r=await rasterizeHTML.drawHTML(`<div style="padding: ${o}px;">${e}</div>`,d,{width:t+2o,height:n+2o});d.width=(t+2o)s,d.height=(n+2o)s;const a=d.getContext("2d");return null==a\|\|a.drawImage(r.image,0,0,r.image.widths,r.image.height*s),d}exports.isContentWrapping=isContentWrapping,exports.detectSize=detectSize,exports.htmlToCanvas=htmlToCanvas;