polotno 2.10.6 → 2.10.7

package/canvas/html-element.js

@@ -1,4 +1,4 @@
-"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,t,i,n){void 0===n&&(n=i);var r=Object.getOwnPropertyDescriptor(t,i);r&&!("get"in r?!t.__esModule:r.writable||r.configurable)||(r={enumerable:!0,get:function(){return t[i]}}),Object.defineProperty(e,n,r)}:function(e,t,i,n){void 0===n&&(n=i),e[n]=t[i]}),__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 i in e)"default"!==i&&Object.prototype.hasOwnProperty.call(e,i)&&__createBinding(t,e,i);return __setModuleDefault(t,e),t},__importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.HTMLElement=exports.createQuill=exports.quillRef=void 0;const react_1=__importDefault(require("react")),mobx_react_lite_1=require("mobx-react-lite"),react_konva_1=require("react-konva"),quill_1=__importDefault(require("quill")),konva_1=__importDefault(require("konva")),mobx=__importStar(require("mobx")),flags_1=require("../utils/flags"),apply_filters_1=require("./apply-filters"),text_element_1=require("./text-element"),use_color_1=require("./use-color"),html2canvas_1=require("../utils/html2canvas"),use_fadein_1=require("./use-fadein"),highlighter_1=require("./highlighter"),react_konva_utils_1=require("react-konva-utils"),styled_1=__importDefault(require("../utils/styled")),loader_1=require("../utils/loader"),text_1=require("../utils/text"),fonts=__importStar(require("../utils/fonts")),screen_1=require("../utils/screen"),max_font_size_1=require("./text-element/max-font-size");exports.quillRef=mobx.observable({enabled:!1,currentFormat:{},editor:mobx.observable.object({instance:null},{},{deep:!1})});const RichTextContainer=(0,styled_1.default)("div",react_1.default.forwardRef)`
+"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,t,i,r){void 0===r&&(r=i);var n=Object.getOwnPropertyDescriptor(t,i);n&&!("get"in n?!t.__esModule:n.writable||n.configurable)||(n={enumerable:!0,get:function(){return t[i]}}),Object.defineProperty(e,r,n)}:function(e,t,i,r){void 0===r&&(r=i),e[r]=t[i]}),__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 i in e)"default"!==i&&Object.prototype.hasOwnProperty.call(e,i)&&__createBinding(t,e,i);return __setModuleDefault(t,e),t},__importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.HTMLElement=exports.createQuill=exports.quillRef=void 0;const react_1=__importDefault(require("react")),mobx_react_lite_1=require("mobx-react-lite"),react_konva_1=require("react-konva"),quill_1=__importDefault(require("quill")),konva_1=__importDefault(require("konva")),mobx=__importStar(require("mobx")),flags_1=require("../utils/flags"),apply_filters_1=require("./apply-filters"),text_element_1=require("./text-element"),use_color_1=require("./use-color"),html2canvas_1=require("../utils/html2canvas"),use_fadein_1=require("./use-fadein"),highlighter_1=require("./highlighter"),react_konva_utils_1=require("react-konva-utils"),styled_1=__importDefault(require("../utils/styled")),loader_1=require("../utils/loader"),text_1=require("../utils/text"),fonts=__importStar(require("../utils/fonts")),screen_1=require("../utils/screen"),max_font_size_1=require("./text-element/max-font-size");exports.quillRef=mobx.observable({enabled:!1,currentFormat:{},editor:mobx.observable.object({instance:null},{},{deep:!1})});const RichTextContainer=(0,styled_1.default)("div",react_1.default.forwardRef)`
   .ql-editor {
     outline: none;
   }
@@ -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:n})=>{const r=react_1.default.useRef(null);react_1.default.useEffect((()=>{if(!r.current)return;const e=(0,exports.createQuill)(r.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=r.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()}))})),r.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=r.current)||void 0===t?void 0:t.childNodes[0].innerHTML)===n.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()})))}}),[n.text]);const a={color:n.fill};return n.fill.indexOf("gradient")>=0&&(a["background-color"]=n.fill,a["background-image"]=n.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:r,style:Object.assign(Object.assign({},a),{fontSize:n.fontSize,width:n.a.width,fontFamily:n.fontFamily,lineHeight:n.lineHeight,letterSpacing:n.letterSpacing+"rem",textAlign:n.align}),dir:(0,text_element_1.getDir)((0,text_1.removeTags)(n.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 n=`color: ${i||e.fill}`;e.fill.indexOf("gradient")>=0&&(n=`\n      background-color: ${i};\n      background-image: ${e.fill};\n      background-size: 100% 100%;\n      background-repeat: repeat;\n      -webkit-background-clip: text;\n      -moz-background-clip: text;\n      -webkit-text-fill-color: transparent;\n      -moz-text-fill-color: transparent;\n    `);return`<div style="${["white-space: unset",`width: ${Math.round(e.width||100)}px`,n,`font-size: ${e.fontSize}px`,`font-family: '${t}'`,`text-align: ${e.align}`,e.textDecoration?`text-decoration: ${e.textDecoration}`:"",e.lineHeight?`line-height: ${e.lineHeight}`:"",e.letterSpacing?`letter-spacing: ${e.letterSpacing}rem`:"",e.fontStyle?`font-style: ${e.fontStyle}`:"",e.fontWeight?`font-weight: ${e.fontWeight}`:"",e.strokeWidth?`-webkit-text-stroke: ${e.strokeWidth}px ${e.stroke}`:"",e.strokeWidth?"paint-order: stroke fill":""].filter(Boolean).join("; ")}" contentEditable dir="${(0,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:n}=(0,html2canvas_1.detectSize)(i),r=e.height&&n>e.height,a=(0,html2canvas_1.isContentWrapping)({html:i});if(!(r||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),[n,r]=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),k=react_1.default.useMemo((()=>{const e={lastArgs:null,lastResult:null};return async function(t){return e.lastArgs&&e.lastResult&&(i=e.lastArgs,n=t,JSON.stringify(i)===JSON.stringify(n))||(e.lastResult=await(0,html2canvas_1.htmlToCanvas)(t),e.lastArgs=Object.assign({},t)),e.lastResult;var i,n}}),[]);react_1.default.useEffect((()=>{a||x||(async()=>{S.current++;const i=S.current,n=(0,loader_1.incrementLoader)(`text ${e.id}`);s(!0);let a=null;const o=isSafari?5:1;for(let r=0;r<o;r++){const o=r>0?k:html2canvas_1.htmlToCanvas;if(a=await o({skipCache:r>0,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 n();isCanvasBlank(a)&&isSafari&&await new Promise((e=>setTimeout(e,50*(r+1))))}a?(r(a),s(!1),konva_1.default.Util.requestAnimFrame(n)):n()})()}),[y,a,w,x,p,e.height,t._elementsPixelRatio]);const E=a||l;react_1.default.useEffect((()=>mobx.autorun((()=>{const t=i.current;(0,apply_filters_1.applyFilter)(t,e)}))),[n,E,e.shadowColor,e.shadowOffsetX,e.shadowOffsetY,e.shadowOpacity]);let z=0;"middle"===e.verticalAlign&&(z=(e.height-w)/2),"bottom"===e.verticalAlign&&(z=e.height-w);const q=(0,text_element_1.getLineHeight)({fontLoaded:m,fontFamily:e.fontFamily,fontSize:e.fontSize,lineHeight:e.lineHeight}),O=(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*q*.5),offsetY:e.backgroundPadding*(e.fontSize*q*.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*q),height:e.a.height+e.backgroundPadding*(e.fontSize*q),cornerRadius:e.backgroundCornerRadius*(e.fontSize*q*.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:!E,draggable:O?e.draggable&&f:e.draggable,preventDefault:!O||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 n=t.target,r=(null===(i=n.getStage())||void 0===i?void 0:i.findOne("Transformer")).getActiveAnchor(),a="middle-left"===r||"middle-right"===r,o="top-center"===r||"bottom-center"===r,l=n.scaleX();if(a){const t=n.scaleX(),i=Math.max(n.width()*t,e.fontSize);if(n.width(i),n.scaleX(1),flags_1.flags.textVerticalResizeEnabled){const t=Math.max(w,u.current);e.set({height:t})}e.set({width:i,x:n.x(),y:n.y()})}else if(o){let i="resize"===flags_1.flags.textOverflow?w:e.lineHeight*e.fontSize;const r=Math.max(i,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*l,width:n.width()*l,x:n.x(),y:n.y(),rotation:n.rotation(),height:n.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:n,x:e.a.x,y:e.a.y,offsetX:h,offsetY:h-z,listening:!1,rotation:e.rotation,width:e.a.width+2*h,height:e.a.height+2*h,visible:!E,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}),E&&react_1.default.createElement(react_konva_1.Group,{x:e.a.x,y:e.a.y,rotation:e.rotation,offsetY:-z},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:-z},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}`;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    `);return`<div style="${["white-space: pre-wrap",`width: ${Math.round(e.width||100)}px`,r,`font-size: ${e.fontSize}px`,`font-family: '${t}'`,`text-align: ${e.align}`,e.textDecoration?`text-decoration: ${e.textDecoration}`:"",e.lineHeight?`line-height: ${e.lineHeight}`:"",e.letterSpacing?`letter-spacing: ${e.letterSpacing}rem`:"",e.fontStyle?`font-style: ${e.fontStyle}`:"",e.fontWeight?`font-weight: ${e.fontWeight}`:"",e.strokeWidth?`-webkit-text-stroke: ${e.strokeWidth}px ${e.stroke}`:"",e.strokeWidth?"paint-order: stroke fill":""].filter(Boolean).join("; ")}" contentEditable dir="${(0,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),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),k=react_1.default.useMemo((()=>{const e={lastArgs:null,lastResult:null};return async function(t){return e.lastArgs&&e.lastResult&&(i=e.lastArgs,r=t,JSON.stringify(i)===JSON.stringify(r))||(e.lastResult=await(0,html2canvas_1.htmlToCanvas)(t),e.lastArgs=Object.assign({},t)),e.lastResult;var i,r}}),[]);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++){const o=n>0?k:html2canvas_1.htmlToCanvas;if(a=await o({skipCache:n>0,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 E=a||l;react_1.default.useEffect((()=>mobx.autorun((()=>{const t=i.current;(0,apply_filters_1.applyFilter)(t,e)}))),[r,E,e.shadowColor,e.shadowOffsetX,e.shadowOffsetY,e.shadowOpacity]);let z=0;"middle"===e.verticalAlign&&(z=(e.height-w)/2),"bottom"===e.verticalAlign&&(z=e.height-w);const q=(0,text_element_1.getLineHeight)({fontLoaded:m,fontFamily:e.fontFamily,fontSize:e.fontSize,lineHeight:e.lineHeight}),O=(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*q*.5),offsetY:e.backgroundPadding*(e.fontSize*q*.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*q),height:e.a.height+e.backgroundPadding*(e.fontSize*q),cornerRadius:e.backgroundCornerRadius*(e.fontSize*q*.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:!E,draggable:O?e.draggable&&f:e.draggable,preventDefault:!O||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-z,listening:!1,rotation:e.rotation,width:e.a.width+2*h,height:e.a.height+2*h,visible:!E,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}),E&&react_1.default.createElement(react_konva_1.Group,{x:e.a.x,y:e.a.y,rotation:e.rotation,offsetY:-z},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:-z},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}))}));

package/package.json

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

package/polotno.bundle.js

@@ -13,7 +13,7 @@ For more info see: https://github.com/konvajs/react-konva/issues/256
 `,n1=`ReactKonva: You are using "zIndex" attribute for a Konva node.
 react-konva may get confused with ordering. Just define correct order of elements in your render function of a component.
 For more info see: https://github.com/konvajs/react-konva/issues/194
-`,n2={};function n3(e,t,n=n2){if(!nZ&&"zIndex"in t&&(console.warn(n1),nZ=!0),!nQ&&t.draggable){var r=void 0!==t.x||void 0!==t.y,i=t.onDragEnd||t.onDragMove;r&&!i&&(console.warn(n0),nQ=!0)}for(var o in n)if(!nX[o]){var a="on"===o.slice(0,2),l=n[o]!==t[o];if(a&&l){var s=o.substr(2).toLowerCase();"content"===s.substr(0,7)&&(s="content"+s.substr(7,1).toUpperCase()+s.substr(8)),e.off(s,n[o])}t.hasOwnProperty(o)||e.setAttr(o,void 0)}var u=t._useStrictMode,c={},d=!1;let h={};for(var o in t)if(!nX[o]){var a="on"===o.slice(0,2),f=n[o]!==t[o];if(a&&f){var s=o.substr(2).toLowerCase();"content"===s.substr(0,7)&&(s="content"+s.substr(7,1).toUpperCase()+s.substr(8)),t[o]&&(h[s]=t[o])}!a&&(t[o]!==n[o]||u&&t[o]!==e.getAttr(o))&&(d=!0,c[o]=t[o])}for(var s in d&&(e.setAttrs(c),n5(e)),h)e.on(s+nJ,h[s])}function n5(e){if(!M.Konva.autoDrawEnabled){var t=e.getLayer()||e.getStage();t&&t.batchDraw()}}g("clk2u");let n4={},n6={};function n8(e,t){if("string"==typeof t){console.error(`Do not use plain text as child of Konva.Node. You are using text: ${t}`);return}e.add(t),n5(e)}function n9(e,t,n){let r=c(nW)[e];r||(console.error(`Konva has no node with the type ${e}. Group will be used instead. If you use minimal version of react-konva, just import required nodes into Konva: "import "konva/lib/shapes/${e}"  If you want to render DOM elements as part of canvas tree take a look into this demo: https://konvajs.github.io/docs/react/DOM_Portal.html`),r=c(nW).Group);let i={},o={};for(var a in t)"on"===a.slice(0,2)?o[a]=t[a]:i[a]=t[a];let l=new r(i);return n3(l,o),l}function n7(e,t,n){console.error(`Text components are not supported for now in ReactKonva. Your text is: "${e}"`)}function re(e,t,n){return!1}function rt(e){return e}function rn(){return null}function rr(){return null}function ri(e,t,n,r){return n6}function ro(){}function ra(e){}function rl(e,t){return!1}function rs(){return n4}function ru(){return n4}c(nW).Node.prototype._applyProps=n3;let rc=setTimeout,rd=clearTimeout,rh=-1;function rf(e,t){return!1}let rp=!1,rg=!0,rm=!0;function rv(e,t){t.parent===e?t.moveToTop():e.add(t),n5(e)}function ry(e,t){t.parent===e?t.moveToTop():e.add(t),n5(e)}function rb(e,t,n){t._remove(),e.add(t),t.setZIndex(n.getZIndex()),n5(e)}function rx(e,t,n){rb(e,t,n)}function rw(e,t){t.destroy(),t.off(nJ),n5(e)}function r_(e,t){t.destroy(),t.off(nJ),n5(e)}function rS(e,t,n){console.error(`Text components are not yet supported in ReactKonva. You text is: "${n}"`)}function rE(e,t,n){}function rC(e,t,n,r,i){n3(e,i,r)}function rO(e){e.hide(),n5(e)}function rk(e){}function rP(e,t){(null==t.visible||t.visible)&&e.show()}function rT(e,t){}function rA(e){}function rR(){}let rj=()=>nK.DefaultEventPriority;var x=g("8NFma"),rN=Object.defineProperty,rL=Object.defineProperties,rI=Object.getOwnPropertyDescriptors,rM=Object.getOwnPropertySymbols,rD=Object.prototype.hasOwnProperty,rF=Object.prototype.propertyIsEnumerable,rz=(e,t,n)=>t in e?rN(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,rB=(e,t)=>{for(var n in t||(t={}))rD.call(t,n)&&rz(e,n,t[n]);if(rM)for(var n of rM(t))rF.call(t,n)&&rz(e,n,t[n]);return e},rU=(e,t)=>rL(e,rI(t));function rH(e){try{return Object.defineProperties(e,{_currentRenderer:{get:()=>null,set(){}},_currentRenderer2:{get:()=>null,set(){}}})}catch(t){return e}}"undefined"!=typeof window&&((null==(TU=window.document)?void 0:TU.createElement)||(null==(TH=window.navigator)?void 0:TH.product)==="ReactNative")?x.useLayoutEffect:x.useEffect;let rV=console.error;console.error=function(){let e=[...arguments].join("");if((null==e?void 0:e.startsWith("Warning:"))&&e.includes("useContext")){console.error=rV;return}return rV.apply(this,arguments)};let rq=rH(x.createContext(null));class rG extends x.Component{render(){return x.createElement(rq.Provider,{value:this._reactInternals},this.props.children)}}function rW(){let e=function(){let e=function(){let e=x.useContext(rq);if(null===e)throw Error("its-fine: useFiber must be called within a <FiberProvider />!");let t=x.useId();return x.useMemo(()=>{for(let n of[e,null==e?void 0:e.alternate]){if(!n)continue;let e=function e(t,n,r){if(!t)return;if(!0===r(t))return t;let i=n?t.return:t.child;for(;i;){let t=e(i,n,r);if(t)return t;i=n?null:i.sibling}}(n,!1,e=>{let n=e.memoizedState;for(;n;){if(n.memoizedState===t)return!0;n=n.next}});if(e)return e}},[e,t])}(),[t]=x.useState(()=>new Map);t.clear();let n=e;for(;n;){if(n.type&&"object"==typeof n.type){let e=void 0===n.type._context&&n.type.Provider===n.type?n.type:n.type._context;e&&e!==rq&&!t.has(e)&&t.set(e,x.useContext(rH(e)))}n=n.return}return t}();return x.useMemo(()=>Array.from(e.keys()).reduce((t,n)=>r=>x.createElement(t,null,x.createElement(n.Provider,rU(rB({},r),{value:e.get(n)}))),e=>x.createElement(rG,rB({},e))),[e])}let r$=e=>{let t=c(x).useRef(),n=c(x).useRef(),r=c(x).useRef(),i=function(e){let t=c(x).useRef({});return c(x).useLayoutEffect(()=>{t.current=e}),c(x).useLayoutEffect(()=>()=>{t.current={}},[]),t.current}(e),o=rW(),a=t=>{let{forwardedRef:n}=e;n&&("function"==typeof n?n(t):n.current=t)};return c(x).useLayoutEffect(()=>(n.current=new(c(nW)).Stage({width:e.width,height:e.height,container:t.current}),a(n.current),r.current=r2.createContainer(n.current,nK.LegacyRoot,!1,null),r2.updateContainer(c(x).createElement(o,{},e.children),r.current),()=>{c(nW).isBrowser&&(a(null),r2.updateContainer(null,r.current,null),n.current.destroy())}),[]),c(x).useLayoutEffect(()=>{a(n.current),n3(n.current,e,i),r2.updateContainer(c(x).createElement(o,{},e.children),r.current,null)}),c(x).createElement("div",{ref:t,id:e.id,accessKey:e.accessKey,className:e.className,role:e.role,style:e.style,tabIndex:e.tabIndex,title:e.title})},rK="Group",rY="Label",rX="Rect",rZ="Line",rQ="Image",rJ="Text",r0="Path",r1="Transformer",r2=c(n$)(nY);r2.injectIntoDevTools({findHostInstanceByFiber:()=>null,bundleType:0,version:c(x).version,rendererPackageName:"react-konva"});let r3=c(x).forwardRef((e,t)=>c(x).createElement(rG,{},c(x).createElement(r$,{...e,forwardedRef:t})));var r5={},x=g("8NFma");r5=function(e,t,n){let r=x.useRef("loading"),i=x.useRef(),[o,a]=x.useState(0),l=x.useRef(),s=x.useRef(),u=x.useRef();return(l.current!==e||s.current!==t||u.current!==n)&&(r.current="loading",i.current=void 0,l.current=e,s.current=t,u.current=n),x.useLayoutEffect(function(){if(e){var o=document.createElement("img");return o.addEventListener("load",l),o.addEventListener("error",s),t&&(o.crossOrigin=t),n&&(o.referrerPolicy=n),o.src=e,function(){o.removeEventListener("load",l),o.removeEventListener("error",s)}}function l(){r.current="loaded",i.current=o,a(Math.random())}function s(){r.current="failed",i.current=void 0,a(Math.random())}},[e,t,n]),[i.current,r.current]};var x=(g("8NFma"),g("8NFma"),g("8NFma")),r4=function(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&0>t.indexOf(r)&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols)for(var i=0,r=Object.getOwnPropertySymbols(e);i<r.length;i++)0>t.indexOf(r[i])&&Object.prototype.propertyIsEnumerable.call(e,r[i])&&(n[r[i]]=e[r[i]]);return n};let r6=e=>{let t=window.getComputedStyle(e).position;return!("absolute"===t||"relative"===t)},r8=({children:e,groupProps:t,divProps:n,transform:r,transformFunc:i})=>{let o=rW(),a=c(x).useRef(null);c(x).useRef();let[l]=c(x).useState(()=>document.createElement("div")),s=c(x).useMemo(()=>c(y).createRoot(l),[l]),u=null==r||r,d=function(e=()=>{}){let t=c(x).useRef(e);return t.current=e,c(x).useCallback((...e)=>t.current.apply(null,e),[])}(()=>{if(u&&a.current){let e=a.current.getAbsoluteTransform().decompose();i&&(e=i(e)),l.style.position="absolute",l.style.zIndex="10",l.style.top="0px",l.style.left="0px",l.style.transform=`translate(${e.x}px, ${e.y}px) rotate(${e.rotation}deg) scaleX(${e.scaleX}) scaleY(${e.scaleY})`,l.style.transformOrigin="top left"}else l.style.position="",l.style.zIndex="",l.style.top="",l.style.left="",l.style.transform="",l.style.transformOrigin="";let e=n||{},{style:t}=e,r=r4(e,["style"]);Object.assign(l.style,t),Object.assign(l,r)});return c(x).useLayoutEffect(()=>{var e;let t=a.current;if(!t)return;let n=null===(e=t.getStage())||void 0===e?void 0:e.container();if(n)return n.appendChild(l),u&&r6(n)&&(n.style.position="relative"),t.on("absoluteTransformChange",d),d(),()=>{var e;t.off("absoluteTransformChange",d),null===(e=l.parentNode)||void 0===e||e.removeChild(l)}},[u]),c(x).useLayoutEffect(()=>{d()},[n,i]),c(x).useLayoutEffect(()=>{s.render(c(x).createElement(o,null,e))}),c(x).useLayoutEffect(()=>()=>{setTimeout(()=>{s.unmount()})},[]),c(x).createElement(rK,Object.assign({ref:a},t))};var x=g("8NFma");let r9=({selector:e,enabled:t,children:n})=>{let r=c(x).useRef(null),i=c(x).useRef(null),o=c(x).useRef(),a=null==t||t;return c(x).useLayoutEffect(()=>{if(!r.current||!i.current)return;o.current=i.current;let t=r.current.getStage().findOne(e);a&&t?i.current.moveTo(t):i.current.moveTo(r.current);let n=r.current.getLayer();if(n&&(n.batchDraw(),t)){let e=t.getLayer();if(!e)return;e.batchDraw()}},[e,a]),c(x).useEffect(()=>()=>{var e;null===(e=o.current)||void 0===e||e.destroy()},[]),c(x).createElement(rK,{name:"_outer_portal",ref:r},c(x).createElement(rK,{name:"_inner_portal",ref:i},n))};var w=g("2SBKn");function r7(e,t,n){let r=n[t-1]||{values:{x:0,y:0}};if(e.marker===e.marker.toLowerCase())switch(e.marker=e.marker.toUpperCase(),e.marker){case"M":case"L":case"A":case"T":e.values.x+=r.values.x,e.values.y+=r.values.y;break;case"H":e.marker="L",e.values.x+=r.values.x,e.values.y=r.values.y;break;case"V":e.marker="L",e.values.x=r.values.x,e.values.y+=r.values.y;break;case"C":e.values.x+=r.values.x,e.values.y+=r.values.y,e.values.x1+=r.values.x,e.values.y1+=r.values.y,e.values.x2+=r.values.x,e.values.y2+=r.values.y;break;case"S":e.values.x+=r.values.x,e.values.y+=r.values.y,e.values.x2+=r.values.x,e.values.y2+=r.values.y;break;case"Q":e.values.x+=r.values.x,e.values.y+=r.values.y,e.values.x1+=r.values.x,e.values.y1+=r.values.y}else if(e.marker===e.marker.toUpperCase())switch(e.marker){case"H":e.marker="L",e.values.y=r.values.y;break;case"V":e.marker="L",e.values.x=r.values.x}if("Z"===e.marker){let r=function e(t,n){return"M"===t[n].marker?t[n]:e(t,n-1)}(n,t);e.values.x=r.values.x,e.values.y=r.values.y}return e}function ie(e,t,n){if(0!==t&&"L"===e.marker){let r=n[t-1];["x","y"].every(t=>0===Math.round(Math.abs(r.values[t]-e.values[t])))&&(e.overlap=!0)}return e}function it(e,t){return Math.atan2(t.x-e.x,t.y-e.y)}function ir(e,t){return Math.sqrt(Math.pow(e.x-t.x,2)+Math.pow(e.y-t.y,2))}function ii(e,t){let n=t/Math.tan(e);return n===1/0||n===-1/0||isNaN(n)?t:n}var x=g("8NFma"),io={};l(io,"parse",()=>TV,e=>TV=e),l(io,"stringify",()=>Tq,e=>Tq=e);var ia=ia||{};ia.stringify=(Tc={"visit_linear-gradient":function(e){return Tc.visit_gradient(e)},"visit_repeating-linear-gradient":function(e){return Tc.visit_gradient(e)},"visit_radial-gradient":function(e){return Tc.visit_gradient(e)},"visit_repeating-radial-gradient":function(e){return Tc.visit_gradient(e)},visit_gradient:function(e){var t=Tc.visit(e.orientation);return t&&(t+=", "),e.type+"("+t+Tc.visit(e.colorStops)+")"},visit_shape:function(e){var t=e.value,n=Tc.visit(e.at),r=Tc.visit(e.style);return r&&(t+=" "+r),n&&(t+=" at "+n),t},"visit_default-radial":function(e){var t="",n=Tc.visit(e.at);return n&&(t+=n),t},"visit_extent-keyword":function(e){var t=e.value,n=Tc.visit(e.at);return n&&(t+=" at "+n),t},"visit_position-keyword":function(e){return e.value},visit_position:function(e){return Tc.visit(e.value.x)+" "+Tc.visit(e.value.y)},"visit_%":function(e){return e.value+"%"},visit_em:function(e){return e.value+"em"},visit_px:function(e){return e.value+"px"},visit_literal:function(e){return Tc.visit_color(e.value,e)},visit_hex:function(e){return Tc.visit_color("#"+e.value,e)},visit_rgb:function(e){return Tc.visit_color("rgb("+e.value.join(", ")+")",e)},visit_rgba:function(e){return Tc.visit_color("rgba("+e.value.join(", ")+")",e)},visit_color:function(e,t){var n=e,r=Tc.visit(t.length);return r&&(n+=" "+r),n},visit_angular:function(e){return e.value+"deg"},visit_directional:function(e){return"to "+e.value},visit_array:function(e){var t="",n=e.length;return e.forEach(function(e,r){t+=Tc.visit(e),r<n-1&&(t+=", ")}),t},visit:function(e){if(!e)return"";if(e instanceof Array)return Tc.visit_array(e,"");if(e.type){var t=Tc["visit_"+e.type];if(t)return t(e);throw Error("Missing visitor visit_"+e.type)}throw Error("Invalid node.")}},function(e){return Tc.visit(e)});var ia=ia||{};ia.parse=function(){var e={linearGradient:/^(\-(webkit|o|ms|moz)\-)?(linear\-gradient)/i,repeatingLinearGradient:/^(\-(webkit|o|ms|moz)\-)?(repeating\-linear\-gradient)/i,radialGradient:/^(\-(webkit|o|ms|moz)\-)?(radial\-gradient)/i,repeatingRadialGradient:/^(\-(webkit|o|ms|moz)\-)?(repeating\-radial\-gradient)/i,sideOrCorner:/^to (left (top|bottom)|right (top|bottom)|left|right|top|bottom)/i,extentKeywords:/^(closest\-side|closest\-corner|farthest\-side|farthest\-corner|contain|cover)/,positionKeywords:/^(left|center|right|top|bottom)/i,pixelValue:/^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))px/,percentageValue:/^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))\%/,emValue:/^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))em/,angleValue:/^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))deg/,startCall:/^\(/,endCall:/^\)/,comma:/^,/,hexColor:/^\#([0-9a-fA-F]+)/,literalColor:/^([a-zA-Z]+)/,rgbColor:/^rgb/i,rgbaColor:/^rgba/i,number:/^(([0-9]*\.[0-9]+)|([0-9]+\.?))/},t="";function n(e){var n=Error(t+": "+e);throw n.source=t,n}function r(){return i("linear-gradient",e.linearGradient,a)||i("repeating-linear-gradient",e.repeatingLinearGradient,a)||i("radial-gradient",e.radialGradient,l)||i("repeating-radial-gradient",e.repeatingRadialGradient,l)}function i(t,r,i){return o(r,function(r){var o=i();return o&&!y(e.comma)&&n("Missing comma before color stops"),{type:t,orientation:o,colorStops:h(f)}})}function o(t,r){var i=y(t);if(i){y(e.startCall)||n("Missing (");var o=r(i);return y(e.endCall)||n("Missing )"),o}}function a(){return v("directional",e.sideOrCorner,1)||v("angular",e.angleValue,1)}function l(){var n,r,i=s();return i&&((n=[]).push(i),r=t,y(e.comma)&&((i=s())?n.push(i):t=r)),n}function s(){var e,t,n=((e=v("shape",/^(circle)/i,0))&&(e.style=m()||u()),e||((t=v("shape",/^(ellipse)/i,0))&&(t.style=g()||u()),t));if(n)n.at=c();else{var r=u();if(r){n=r;var i=c();i&&(n.at=i)}else{var o=d();o&&(n={type:"default-radial",at:o})}}return n}function u(){return v("extent-keyword",e.extentKeywords,1)}function c(){if(v("position",/^at/,0)){var e=d();return e||n("Missing positioning value"),e}}function d(){var e={x:g(),y:g()};if(e.x||e.y)return{type:"position",value:e}}function h(t){var r=t(),i=[];if(r)for(i.push(r);y(e.comma);)(r=t())?i.push(r):n("One extra comma");return i}function f(){var t=v("hex",e.hexColor,1)||o(e.rgbaColor,function(){return{type:"rgba",value:h(p)}})||o(e.rgbColor,function(){return{type:"rgb",value:h(p)}})||v("literal",e.literalColor,0);return t||n("Expected color definition"),t.length=g(),t}function p(){return y(e.number)[1]}function g(){return v("%",e.percentageValue,1)||v("position-keyword",e.positionKeywords,1)||m()}function m(){return v("px",e.pixelValue,1)||v("em",e.emValue,1)}function v(e,t,n){var r=y(t);if(r)return{type:e,value:r[n]}}function y(e){var n,r;return(r=/^[\n\r\t\s]+/.exec(t))&&b(r[0].length),(n=e.exec(t))&&b(n[0].length),n}function b(e){t=t.substr(e)}return function(e){var i;return t=e.toString(),i=h(r),t.length>0&&n("Invalid input not EOF"),i}}(),TV=ia.parse,Tq=ia.stringify;let il=e=>e.indexOf("linear-gradient")>=0,is=e=>"hex"===e.type?"#"+e.value:"literal"===e.type?e.value:`${e.type}(${e.value.join(",")})`,iu=e=>{if(!il(e))return{rotation:0,stops:[{offset:0,color:e},{offset:1,color:e}]};let t=c(io).parse(e)[0];return{rotation:parseFloat(t.orientation.value),stops:t.colorStops.map((e,n)=>({color:is(e),offset:e.length?parseFloat(e.length.value)/100:n/(t.colorStops.length-1)}))}},ic=(e,t=e.fill,n="fill")=>c(x).useMemo(()=>{if(!il(t))return{[n]:t};let{stops:r,rotation:i}=iu(t),o={x:e.a.width/2,y:e.a.height/2},a=Math.sqrt(Math.pow(o.x,2)+Math.pow(o.y,2)),l=c(N).Util.degToRad(i)-Math.PI/2,s=[];return(r.forEach(({offset:e,color:t})=>{s.push(e,t)}),"fill"===n)?{fillLinearGradientStartPointX:o.x-a*Math.cos(l),fillLinearGradientStartPointY:o.y-a*Math.sin(l),fillLinearGradientColorStops:s,fillLinearGradientEndPointX:o.x+a*Math.cos(l),fillLinearGradientEndPointY:o.y+a*Math.sin(l),fill:r[1].color,fillPriority:"linear-gradient"}:{strokeLinearGradientStartPointX:o.x-a*Math.cos(l),strokeLinearGradientStartPointY:o.y-a*Math.sin(l),strokeLinearGradientColorStops:s,strokeLinearGradientEndPointX:o.x+a*Math.cos(l),strokeLinearGradientEndPointY:o.y+a*Math.sin(l)}},[t,e.width,e.height]);var x=g("8NFma");let id=()=>!1;function ih(e,t){let n=c(x).useRef();c(x).useLayoutEffect(()=>{n.current&&n.current.destroy()},[t]),c(x).useLayoutEffect(()=>{},[])}let ip=0,ig=[],im=()=>6e3;function iv(e){ip+=1;let t=!1,n=setTimeout(()=>{t||(ix(`Timeout loading asset ${e}`),console.error("Timeout triggered for loader. Some assets may not have loaded.",e),t=!0,iy())},3e4);return()=>{t||(clearTimeout(n),iy())}}function iy(){0==(ip-=1)&&(ig.forEach(e=>e()),ig=[])}let ib=[];function ix(e){ib.forEach(t=>t(e))}var w=g("2SBKn");let iw=w.observable(["Roboto","Amatic SC","Press Start 2P","Marck Script","Rubik Mono One"]),i_=w.observable({value:!1});function iS(){return i_.value}let iE=w.observable([]);var iC=document.createElement("canvas");function iO(e,t="Arial"){var n=iC.getContext("2d");return n.font=`normal 40px '${e}', ${t}`,n.measureText("Some test text;?#D-ПРИВЕТ!1230o9u8i7y6t5r4e3w2q1").width}let ik={Arial:!0},iP=e=>!!ik[e];async function iT(e){if(ik[e])return;let t=!!document.fonts?.load,n=iO("Arial");if(t)try{await document.fonts.load(`16px '${e}'`);let t=iO(e);if(n!==t){ik[e]=!0;return}}catch{}let r=iO("Times","Times"),i=iO(e),o=Math.min(6e3,im())/60;for(let t=0;t<o;t++){let t=iO(e,"Arial"),o=iO(e,"Times");if(t!==i||t!==n||o!==r){ik[e]=!0;return}await new Promise(e=>setTimeout(e,60))}console.warn(`Timeout for loading font "${e}". Looks like polotno can't load it. Is it a correct font family?`),ix(`Timeout for loading font "${e}"`)}let iA={},iR="400,400italic,700,700italic",ij={};var w=g("2SBKn");let iN=w.observable({imageDownScalingEnabled:!0,removeBackgroundEnabled:!0,htmlRenderEnabled:!1,forceTextFitEnabled:!1,textVerticalResizeEnabled:!1,textOverflow:"resize",animationsEnabled:!1});w.action(e=>{iN.textVerticalResizeEnabled=e});let iL=w.action(e=>{iN.removeBackgroundEnabled=e});w.action(e=>{iN.htmlRenderEnabled=e});let iI=w.action(e=>{iN.imageDownScalingEnabled=e});function iM(e=""){return(e=e.replace(/<\/p>/gi,"\n")).replace(/(<([^>]+)>)/gi,"")}function iD(e,t){let n={filters:[]};t.brightnessEnabled&&(n.filters.push(c(N).Filters.Brighten),n.brightness=t.brightness),t.blurEnabled&&(n.filters.push(c(N).Filters.Blur),n.blurRadius=t.blurRadius),t.sepiaEnabled&&n.filters.push(c(N).Filters.Sepia),t.grayscaleEnabled&&n.filters.push(c(N).Filters.Grayscale),e.setAttrs(n),n.filters.length?e.cache({pixelRatio:t.store._elementsPixelRatio}):e.clearCache(),e.getLayer()?.batchDraw()}w.action(e=>{console.warn("useDownScaling is deprecated. Use setDownScalingEnabled instead."),iI(e)}),w.action(e=>{console.warn("setForceTextFit is deprecated. Use setTextOverflow instead."),iN.textOverflow="change-font-size"}),w.action(e=>{iN.textOverflow=e}),w.action(e=>{iN.animationsEnabled=e}),g("8NFma");let iF={stroke:"rgb(0, 161, 255)",strokeWidth:2},iz=R(({element:e})=>(0,v.jsx)(rX,{name:"highlighter",x:e.a.x,y:e.a.y,rotation:e.a.rotation,width:e.a.width,height:e.a.height,listening:!1,strokeScaleEnabled:!1,...iF}));var x=g("8NFma");let iB=()=>window.innerWidth<=800,iU=e=>`
+`,n2={};function n3(e,t,n=n2){if(!nZ&&"zIndex"in t&&(console.warn(n1),nZ=!0),!nQ&&t.draggable){var r=void 0!==t.x||void 0!==t.y,i=t.onDragEnd||t.onDragMove;r&&!i&&(console.warn(n0),nQ=!0)}for(var o in n)if(!nX[o]){var a="on"===o.slice(0,2),l=n[o]!==t[o];if(a&&l){var s=o.substr(2).toLowerCase();"content"===s.substr(0,7)&&(s="content"+s.substr(7,1).toUpperCase()+s.substr(8)),e.off(s,n[o])}t.hasOwnProperty(o)||e.setAttr(o,void 0)}var u=t._useStrictMode,c={},d=!1;let h={};for(var o in t)if(!nX[o]){var a="on"===o.slice(0,2),f=n[o]!==t[o];if(a&&f){var s=o.substr(2).toLowerCase();"content"===s.substr(0,7)&&(s="content"+s.substr(7,1).toUpperCase()+s.substr(8)),t[o]&&(h[s]=t[o])}!a&&(t[o]!==n[o]||u&&t[o]!==e.getAttr(o))&&(d=!0,c[o]=t[o])}for(var s in d&&(e.setAttrs(c),n5(e)),h)e.on(s+nJ,h[s])}function n5(e){if(!M.Konva.autoDrawEnabled){var t=e.getLayer()||e.getStage();t&&t.batchDraw()}}g("clk2u");let n4={},n6={};function n8(e,t){if("string"==typeof t){console.error(`Do not use plain text as child of Konva.Node. You are using text: ${t}`);return}e.add(t),n5(e)}function n9(e,t,n){let r=c(nW)[e];r||(console.error(`Konva has no node with the type ${e}. Group will be used instead. If you use minimal version of react-konva, just import required nodes into Konva: "import "konva/lib/shapes/${e}"  If you want to render DOM elements as part of canvas tree take a look into this demo: https://konvajs.github.io/docs/react/DOM_Portal.html`),r=c(nW).Group);let i={},o={};for(var a in t)"on"===a.slice(0,2)?o[a]=t[a]:i[a]=t[a];let l=new r(i);return n3(l,o),l}function n7(e,t,n){console.error(`Text components are not supported for now in ReactKonva. Your text is: "${e}"`)}function re(e,t,n){return!1}function rt(e){return e}function rn(){return null}function rr(){return null}function ri(e,t,n,r){return n6}function ro(){}function ra(e){}function rl(e,t){return!1}function rs(){return n4}function ru(){return n4}c(nW).Node.prototype._applyProps=n3;let rc=setTimeout,rd=clearTimeout,rh=-1;function rf(e,t){return!1}let rp=!1,rg=!0,rm=!0;function rv(e,t){t.parent===e?t.moveToTop():e.add(t),n5(e)}function ry(e,t){t.parent===e?t.moveToTop():e.add(t),n5(e)}function rb(e,t,n){t._remove(),e.add(t),t.setZIndex(n.getZIndex()),n5(e)}function rx(e,t,n){rb(e,t,n)}function rw(e,t){t.destroy(),t.off(nJ),n5(e)}function r_(e,t){t.destroy(),t.off(nJ),n5(e)}function rS(e,t,n){console.error(`Text components are not yet supported in ReactKonva. You text is: "${n}"`)}function rE(e,t,n){}function rC(e,t,n,r,i){n3(e,i,r)}function rO(e){e.hide(),n5(e)}function rk(e){}function rP(e,t){(null==t.visible||t.visible)&&e.show()}function rT(e,t){}function rA(e){}function rR(){}let rj=()=>nK.DefaultEventPriority;var x=g("8NFma"),rN=Object.defineProperty,rL=Object.defineProperties,rI=Object.getOwnPropertyDescriptors,rM=Object.getOwnPropertySymbols,rD=Object.prototype.hasOwnProperty,rF=Object.prototype.propertyIsEnumerable,rz=(e,t,n)=>t in e?rN(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,rB=(e,t)=>{for(var n in t||(t={}))rD.call(t,n)&&rz(e,n,t[n]);if(rM)for(var n of rM(t))rF.call(t,n)&&rz(e,n,t[n]);return e},rU=(e,t)=>rL(e,rI(t));function rH(e){try{return Object.defineProperties(e,{_currentRenderer:{get:()=>null,set(){}},_currentRenderer2:{get:()=>null,set(){}}})}catch(t){return e}}"undefined"!=typeof window&&((null==(TU=window.document)?void 0:TU.createElement)||(null==(TH=window.navigator)?void 0:TH.product)==="ReactNative")?x.useLayoutEffect:x.useEffect;let rV=console.error;console.error=function(){let e=[...arguments].join("");if((null==e?void 0:e.startsWith("Warning:"))&&e.includes("useContext")){console.error=rV;return}return rV.apply(this,arguments)};let rq=rH(x.createContext(null));class rG extends x.Component{render(){return x.createElement(rq.Provider,{value:this._reactInternals},this.props.children)}}function rW(){let e=function(){let e=function(){let e=x.useContext(rq);if(null===e)throw Error("its-fine: useFiber must be called within a <FiberProvider />!");let t=x.useId();return x.useMemo(()=>{for(let n of[e,null==e?void 0:e.alternate]){if(!n)continue;let e=function e(t,n,r){if(!t)return;if(!0===r(t))return t;let i=n?t.return:t.child;for(;i;){let t=e(i,n,r);if(t)return t;i=n?null:i.sibling}}(n,!1,e=>{let n=e.memoizedState;for(;n;){if(n.memoizedState===t)return!0;n=n.next}});if(e)return e}},[e,t])}(),[t]=x.useState(()=>new Map);t.clear();let n=e;for(;n;){if(n.type&&"object"==typeof n.type){let e=void 0===n.type._context&&n.type.Provider===n.type?n.type:n.type._context;e&&e!==rq&&!t.has(e)&&t.set(e,x.useContext(rH(e)))}n=n.return}return t}();return x.useMemo(()=>Array.from(e.keys()).reduce((t,n)=>r=>x.createElement(t,null,x.createElement(n.Provider,rU(rB({},r),{value:e.get(n)}))),e=>x.createElement(rG,rB({},e))),[e])}let r$=e=>{let t=c(x).useRef(),n=c(x).useRef(),r=c(x).useRef(),i=function(e){let t=c(x).useRef({});return c(x).useLayoutEffect(()=>{t.current=e}),c(x).useLayoutEffect(()=>()=>{t.current={}},[]),t.current}(e),o=rW(),a=t=>{let{forwardedRef:n}=e;n&&("function"==typeof n?n(t):n.current=t)};return c(x).useLayoutEffect(()=>(n.current=new(c(nW)).Stage({width:e.width,height:e.height,container:t.current}),a(n.current),r.current=r2.createContainer(n.current,nK.LegacyRoot,!1,null),r2.updateContainer(c(x).createElement(o,{},e.children),r.current),()=>{c(nW).isBrowser&&(a(null),r2.updateContainer(null,r.current,null),n.current.destroy())}),[]),c(x).useLayoutEffect(()=>{a(n.current),n3(n.current,e,i),r2.updateContainer(c(x).createElement(o,{},e.children),r.current,null)}),c(x).createElement("div",{ref:t,id:e.id,accessKey:e.accessKey,className:e.className,role:e.role,style:e.style,tabIndex:e.tabIndex,title:e.title})},rK="Group",rY="Label",rX="Rect",rZ="Line",rQ="Image",rJ="Text",r0="Path",r1="Transformer",r2=c(n$)(nY);r2.injectIntoDevTools({findHostInstanceByFiber:()=>null,bundleType:0,version:c(x).version,rendererPackageName:"react-konva"});let r3=c(x).forwardRef((e,t)=>c(x).createElement(rG,{},c(x).createElement(r$,{...e,forwardedRef:t})));var r5={},x=g("8NFma");r5=function(e,t,n){let r=x.useRef("loading"),i=x.useRef(),[o,a]=x.useState(0),l=x.useRef(),s=x.useRef(),u=x.useRef();return(l.current!==e||s.current!==t||u.current!==n)&&(r.current="loading",i.current=void 0,l.current=e,s.current=t,u.current=n),x.useLayoutEffect(function(){if(e){var o=document.createElement("img");return o.addEventListener("load",l),o.addEventListener("error",s),t&&(o.crossOrigin=t),n&&(o.referrerPolicy=n),o.src=e,function(){o.removeEventListener("load",l),o.removeEventListener("error",s)}}function l(){r.current="loaded",i.current=o,a(Math.random())}function s(){r.current="failed",i.current=void 0,a(Math.random())}},[e,t,n]),[i.current,r.current]};var x=(g("8NFma"),g("8NFma"),g("8NFma")),r4=function(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&0>t.indexOf(r)&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols)for(var i=0,r=Object.getOwnPropertySymbols(e);i<r.length;i++)0>t.indexOf(r[i])&&Object.prototype.propertyIsEnumerable.call(e,r[i])&&(n[r[i]]=e[r[i]]);return n};let r6=e=>{let t=window.getComputedStyle(e).position;return!("absolute"===t||"relative"===t)},r8=({children:e,groupProps:t,divProps:n,transform:r,transformFunc:i})=>{let o=rW(),a=c(x).useRef(null);c(x).useRef();let[l]=c(x).useState(()=>document.createElement("div")),s=c(x).useMemo(()=>c(y).createRoot(l),[l]),u=null==r||r,d=function(e=()=>{}){let t=c(x).useRef(e);return t.current=e,c(x).useCallback((...e)=>t.current.apply(null,e),[])}(()=>{if(u&&a.current){let e=a.current.getAbsoluteTransform().decompose();i&&(e=i(e)),l.style.position="absolute",l.style.zIndex="10",l.style.top="0px",l.style.left="0px",l.style.transform=`translate(${e.x}px, ${e.y}px) rotate(${e.rotation}deg) scaleX(${e.scaleX}) scaleY(${e.scaleY})`,l.style.transformOrigin="top left"}else l.style.position="",l.style.zIndex="",l.style.top="",l.style.left="",l.style.transform="",l.style.transformOrigin="";let e=n||{},{style:t}=e,r=r4(e,["style"]);Object.assign(l.style,t),Object.assign(l,r)});return c(x).useLayoutEffect(()=>{var e;let t=a.current;if(!t)return;let n=null===(e=t.getStage())||void 0===e?void 0:e.container();if(n)return n.appendChild(l),u&&r6(n)&&(n.style.position="relative"),t.on("absoluteTransformChange",d),d(),()=>{var e;t.off("absoluteTransformChange",d),null===(e=l.parentNode)||void 0===e||e.removeChild(l)}},[u]),c(x).useLayoutEffect(()=>{d()},[n,i]),c(x).useLayoutEffect(()=>{s.render(c(x).createElement(o,null,e))}),c(x).useLayoutEffect(()=>()=>{setTimeout(()=>{s.unmount()})},[]),c(x).createElement(rK,Object.assign({ref:a},t))};var x=g("8NFma");let r9=({selector:e,enabled:t,children:n})=>{let r=c(x).useRef(null),i=c(x).useRef(null),o=c(x).useRef(),a=null==t||t;return c(x).useLayoutEffect(()=>{if(!r.current||!i.current)return;o.current=i.current;let t=r.current.getStage().findOne(e);a&&t?i.current.moveTo(t):i.current.moveTo(r.current);let n=r.current.getLayer();if(n&&(n.batchDraw(),t)){let e=t.getLayer();if(!e)return;e.batchDraw()}},[e,a]),c(x).useEffect(()=>()=>{var e;null===(e=o.current)||void 0===e||e.destroy()},[]),c(x).createElement(rK,{name:"_outer_portal",ref:r},c(x).createElement(rK,{name:"_inner_portal",ref:i},n))};var w=g("2SBKn");function r7(e,t,n){let r=n[t-1]||{values:{x:0,y:0}};if(e.marker===e.marker.toLowerCase())switch(e.marker=e.marker.toUpperCase(),e.marker){case"M":case"L":case"A":case"T":e.values.x+=r.values.x,e.values.y+=r.values.y;break;case"H":e.marker="L",e.values.x+=r.values.x,e.values.y=r.values.y;break;case"V":e.marker="L",e.values.x=r.values.x,e.values.y+=r.values.y;break;case"C":e.values.x+=r.values.x,e.values.y+=r.values.y,e.values.x1+=r.values.x,e.values.y1+=r.values.y,e.values.x2+=r.values.x,e.values.y2+=r.values.y;break;case"S":e.values.x+=r.values.x,e.values.y+=r.values.y,e.values.x2+=r.values.x,e.values.y2+=r.values.y;break;case"Q":e.values.x+=r.values.x,e.values.y+=r.values.y,e.values.x1+=r.values.x,e.values.y1+=r.values.y}else if(e.marker===e.marker.toUpperCase())switch(e.marker){case"H":e.marker="L",e.values.y=r.values.y;break;case"V":e.marker="L",e.values.x=r.values.x}if("Z"===e.marker){let r=function e(t,n){return"M"===t[n].marker?t[n]:e(t,n-1)}(n,t);e.values.x=r.values.x,e.values.y=r.values.y}return e}function ie(e,t,n){if(0!==t&&"L"===e.marker){let r=n[t-1];["x","y"].every(t=>0===Math.round(Math.abs(r.values[t]-e.values[t])))&&(e.overlap=!0)}return e}function it(e,t){return Math.atan2(t.x-e.x,t.y-e.y)}function ir(e,t){return Math.sqrt(Math.pow(e.x-t.x,2)+Math.pow(e.y-t.y,2))}function ii(e,t){let n=t/Math.tan(e);return n===1/0||n===-1/0||isNaN(n)?t:n}var x=g("8NFma"),io={};l(io,"parse",()=>TV,e=>TV=e),l(io,"stringify",()=>Tq,e=>Tq=e);var ia=ia||{};ia.stringify=(Tc={"visit_linear-gradient":function(e){return Tc.visit_gradient(e)},"visit_repeating-linear-gradient":function(e){return Tc.visit_gradient(e)},"visit_radial-gradient":function(e){return Tc.visit_gradient(e)},"visit_repeating-radial-gradient":function(e){return Tc.visit_gradient(e)},visit_gradient:function(e){var t=Tc.visit(e.orientation);return t&&(t+=", "),e.type+"("+t+Tc.visit(e.colorStops)+")"},visit_shape:function(e){var t=e.value,n=Tc.visit(e.at),r=Tc.visit(e.style);return r&&(t+=" "+r),n&&(t+=" at "+n),t},"visit_default-radial":function(e){var t="",n=Tc.visit(e.at);return n&&(t+=n),t},"visit_extent-keyword":function(e){var t=e.value,n=Tc.visit(e.at);return n&&(t+=" at "+n),t},"visit_position-keyword":function(e){return e.value},visit_position:function(e){return Tc.visit(e.value.x)+" "+Tc.visit(e.value.y)},"visit_%":function(e){return e.value+"%"},visit_em:function(e){return e.value+"em"},visit_px:function(e){return e.value+"px"},visit_literal:function(e){return Tc.visit_color(e.value,e)},visit_hex:function(e){return Tc.visit_color("#"+e.value,e)},visit_rgb:function(e){return Tc.visit_color("rgb("+e.value.join(", ")+")",e)},visit_rgba:function(e){return Tc.visit_color("rgba("+e.value.join(", ")+")",e)},visit_color:function(e,t){var n=e,r=Tc.visit(t.length);return r&&(n+=" "+r),n},visit_angular:function(e){return e.value+"deg"},visit_directional:function(e){return"to "+e.value},visit_array:function(e){var t="",n=e.length;return e.forEach(function(e,r){t+=Tc.visit(e),r<n-1&&(t+=", ")}),t},visit:function(e){if(!e)return"";if(e instanceof Array)return Tc.visit_array(e,"");if(e.type){var t=Tc["visit_"+e.type];if(t)return t(e);throw Error("Missing visitor visit_"+e.type)}throw Error("Invalid node.")}},function(e){return Tc.visit(e)});var ia=ia||{};ia.parse=function(){var e={linearGradient:/^(\-(webkit|o|ms|moz)\-)?(linear\-gradient)/i,repeatingLinearGradient:/^(\-(webkit|o|ms|moz)\-)?(repeating\-linear\-gradient)/i,radialGradient:/^(\-(webkit|o|ms|moz)\-)?(radial\-gradient)/i,repeatingRadialGradient:/^(\-(webkit|o|ms|moz)\-)?(repeating\-radial\-gradient)/i,sideOrCorner:/^to (left (top|bottom)|right (top|bottom)|left|right|top|bottom)/i,extentKeywords:/^(closest\-side|closest\-corner|farthest\-side|farthest\-corner|contain|cover)/,positionKeywords:/^(left|center|right|top|bottom)/i,pixelValue:/^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))px/,percentageValue:/^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))\%/,emValue:/^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))em/,angleValue:/^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))deg/,startCall:/^\(/,endCall:/^\)/,comma:/^,/,hexColor:/^\#([0-9a-fA-F]+)/,literalColor:/^([a-zA-Z]+)/,rgbColor:/^rgb/i,rgbaColor:/^rgba/i,number:/^(([0-9]*\.[0-9]+)|([0-9]+\.?))/},t="";function n(e){var n=Error(t+": "+e);throw n.source=t,n}function r(){return i("linear-gradient",e.linearGradient,a)||i("repeating-linear-gradient",e.repeatingLinearGradient,a)||i("radial-gradient",e.radialGradient,l)||i("repeating-radial-gradient",e.repeatingRadialGradient,l)}function i(t,r,i){return o(r,function(r){var o=i();return o&&!y(e.comma)&&n("Missing comma before color stops"),{type:t,orientation:o,colorStops:h(f)}})}function o(t,r){var i=y(t);if(i){y(e.startCall)||n("Missing (");var o=r(i);return y(e.endCall)||n("Missing )"),o}}function a(){return v("directional",e.sideOrCorner,1)||v("angular",e.angleValue,1)}function l(){var n,r,i=s();return i&&((n=[]).push(i),r=t,y(e.comma)&&((i=s())?n.push(i):t=r)),n}function s(){var e,t,n=((e=v("shape",/^(circle)/i,0))&&(e.style=m()||u()),e||((t=v("shape",/^(ellipse)/i,0))&&(t.style=g()||u()),t));if(n)n.at=c();else{var r=u();if(r){n=r;var i=c();i&&(n.at=i)}else{var o=d();o&&(n={type:"default-radial",at:o})}}return n}function u(){return v("extent-keyword",e.extentKeywords,1)}function c(){if(v("position",/^at/,0)){var e=d();return e||n("Missing positioning value"),e}}function d(){var e={x:g(),y:g()};if(e.x||e.y)return{type:"position",value:e}}function h(t){var r=t(),i=[];if(r)for(i.push(r);y(e.comma);)(r=t())?i.push(r):n("One extra comma");return i}function f(){var t=v("hex",e.hexColor,1)||o(e.rgbaColor,function(){return{type:"rgba",value:h(p)}})||o(e.rgbColor,function(){return{type:"rgb",value:h(p)}})||v("literal",e.literalColor,0);return t||n("Expected color definition"),t.length=g(),t}function p(){return y(e.number)[1]}function g(){return v("%",e.percentageValue,1)||v("position-keyword",e.positionKeywords,1)||m()}function m(){return v("px",e.pixelValue,1)||v("em",e.emValue,1)}function v(e,t,n){var r=y(t);if(r)return{type:e,value:r[n]}}function y(e){var n,r;return(r=/^[\n\r\t\s]+/.exec(t))&&b(r[0].length),(n=e.exec(t))&&b(n[0].length),n}function b(e){t=t.substr(e)}return function(e){var i;return t=e.toString(),i=h(r),t.length>0&&n("Invalid input not EOF"),i}}(),TV=ia.parse,Tq=ia.stringify;let il=e=>e.indexOf("linear-gradient")>=0,is=e=>"hex"===e.type?"#"+e.value:"literal"===e.type?e.value:`${e.type}(${e.value.join(",")})`,iu=e=>{if(!il(e))return{rotation:0,stops:[{offset:0,color:e},{offset:1,color:e}]};let t=c(io).parse(e)[0];return{rotation:parseFloat(t.orientation.value),stops:t.colorStops.map((e,n)=>({color:is(e),offset:e.length?parseFloat(e.length.value)/100:n/(t.colorStops.length-1)}))}},ic=(e,t=e.fill,n="fill")=>c(x).useMemo(()=>{if(!il(t))return{[n]:t};let{stops:r,rotation:i}=iu(t),o={x:e.a.width/2,y:e.a.height/2},a=Math.sqrt(Math.pow(o.x,2)+Math.pow(o.y,2)),l=c(N).Util.degToRad(i)-Math.PI/2,s=[];return(r.forEach(({offset:e,color:t})=>{s.push(e,t)}),"fill"===n)?{fillLinearGradientStartPointX:o.x-a*Math.cos(l),fillLinearGradientStartPointY:o.y-a*Math.sin(l),fillLinearGradientColorStops:s,fillLinearGradientEndPointX:o.x+a*Math.cos(l),fillLinearGradientEndPointY:o.y+a*Math.sin(l),fill:r[1].color,fillPriority:"linear-gradient"}:{strokeLinearGradientStartPointX:o.x-a*Math.cos(l),strokeLinearGradientStartPointY:o.y-a*Math.sin(l),strokeLinearGradientColorStops:s,strokeLinearGradientEndPointX:o.x+a*Math.cos(l),strokeLinearGradientEndPointY:o.y+a*Math.sin(l)}},[t,e.width,e.height]);var x=g("8NFma");let id=()=>!1;function ih(e,t){let n=c(x).useRef();c(x).useLayoutEffect(()=>{n.current&&n.current.destroy()},[t]),c(x).useLayoutEffect(()=>{},[])}let ip=0,ig=[],im=()=>6e3;function iv(e){ip+=1;let t=!1,n=setTimeout(()=>{t||(ix(`Timeout loading asset ${e}`),console.error("Timeout triggered for loader. Some assets may not have loaded.",e),t=!0,iy())},3e4);return()=>{t||(clearTimeout(n),iy())}}function iy(){0==(ip-=1)&&(ig.forEach(e=>e()),ig=[])}let ib=[];function ix(e){ib.forEach(t=>t(e))}var w=g("2SBKn");let iw=w.observable(["Roboto","Amatic SC","Press Start 2P","Marck Script","Rubik Mono One"]),i_=w.observable({value:!1});function iS(){return i_.value}let iE=w.observable([]);var iC=document.createElement("canvas");function iO(e,t="Arial"){var n=iC.getContext("2d");return n.font=`normal 40px '${e}', ${t}`,n.measureText("Some test text;?#D-ПРИВЕТ!1230o9u8i7y6t5r4e3w2q1").width}let ik={Arial:!0},iP=e=>!!ik[e];async function iT(e){if(ik[e])return;let t=!!document.fonts?.load,n=iO("Arial");if(t)try{await document.fonts.load(`16px '${e}'`);let t=iO(e);if(n!==t){ik[e]=!0;return}}catch{}let r=iO("Times","Times"),i=iO(e),o=Math.min(6e3,im())/60;for(let t=0;t<o;t++){let t=iO(e,"Arial"),o=iO(e,"Times");if(t!==i||t!==n||o!==r){ik[e]=!0;return}await new Promise(e=>setTimeout(e,60))}console.warn(`Timeout for loading font "${e}". Looks like polotno can't load it. Is it a correct font family?`),ix(`Timeout for loading font "${e}"`)}let iA={},iR="400,400italic,700,700italic",ij={};var w=g("2SBKn");let iN=w.observable({imageDownScalingEnabled:!0,removeBackgroundEnabled:!0,htmlRenderEnabled:!1,forceTextFitEnabled:!1,textVerticalResizeEnabled:!1,textOverflow:"resize",animationsEnabled:!1});w.action(e=>{iN.textVerticalResizeEnabled=e});let iL=w.action(e=>{iN.removeBackgroundEnabled=e});w.action(e=>{iN.htmlRenderEnabled=e});let iI=w.action(e=>{iN.imageDownScalingEnabled=e});function iM(e=""){return(e.match(/<\/p>/gi)||[]).length>1&&(e=e.replace(/<\/p>/gi,(e,t,n)=>(n.slice(t+e.length).match(/<\/p>/gi)||[]).length>0?"\n":e)),e.replace(/(<([^>]+)>)/gi,"")}function iD(e,t){let n={filters:[]};t.brightnessEnabled&&(n.filters.push(c(N).Filters.Brighten),n.brightness=t.brightness),t.blurEnabled&&(n.filters.push(c(N).Filters.Blur),n.blurRadius=t.blurRadius),t.sepiaEnabled&&n.filters.push(c(N).Filters.Sepia),t.grayscaleEnabled&&n.filters.push(c(N).Filters.Grayscale),e.setAttrs(n),n.filters.length?e.cache({pixelRatio:t.store._elementsPixelRatio}):e.clearCache(),e.getLayer()?.batchDraw()}w.action(e=>{console.warn("useDownScaling is deprecated. Use setDownScalingEnabled instead."),iI(e)}),w.action(e=>{console.warn("setForceTextFit is deprecated. Use setTextOverflow instead."),iN.textOverflow="change-font-size"}),w.action(e=>{iN.textOverflow=e}),w.action(e=>{iN.animationsEnabled=e}),g("8NFma");let iF={stroke:"rgb(0, 161, 255)",strokeWidth:2},iz=R(({element:e})=>(0,v.jsx)(rX,{name:"highlighter",x:e.a.x,y:e.a.y,rotation:e.a.rotation,width:e.a.width,height:e.a.height,listening:!1,strokeScaleEnabled:!1,...iF}));var x=g("8NFma");let iB=()=>window.innerWidth<=800,iU=e=>`
   @media (max-width: 800px) {
     ${e}
   }
@@ -31,6 +31,8 @@ For more info see: https://github.com/konvajs/react-konva/issues/194
     margin: 0;
     padding: 0;
     word-wrap: break-word; /* Required for Firefox */
+    /* a text may have several spaces, we need to preserve them */
+    white-space: pre-wrap;
   }
   ul, ol {
     list-style-position: outside;
@@ -87,7 +89,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;
-    `);let i=["white-space: unset",`width: ${Math.round(e.width||100)}px`,r,`font-size: ${e.fontSize}px`,`font-family: '${t}'`,`text-align: ${e.align}`,e.textDecoration?`text-decoration: ${e.textDecoration}`:"",e.lineHeight?`line-height: ${e.lineHeight}`:"",e.letterSpacing?`letter-spacing: ${e.letterSpacing}rem`:"",e.fontStyle?`font-style: ${e.fontStyle}`:"",e.fontWeight?`font-weight: ${e.fontWeight}`:"",e.strokeWidth?`-webkit-text-stroke: ${e.strokeWidth}px ${e.stroke}`:"",e.strokeWidth?"paint-order: stroke fill":""].filter(Boolean).join("; ");return`<div style="${i}" contentEditable dir="${iK(iM(e.text))}">${e.text.replaceAll("\n","</br>")}</div>`}let aC=e=>{let t=e.fontSize;for(let n=1;n<50;n++){let n=aE({...e.toJSON(),fontSize:t},{fontFamily:e.fontFamily}),{height:r}=ai(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",t.style.whiteSpace="nowrap",t.style.visibility="hidden";let n=ar();n.appendChild(t);let r=t.textContent,i=t.childNodes[0],o=r.split(/\s+/),a=!1;for(let e=0;e<o.length;e++){let n=o[e];if(i.textContent=n,a=i.scrollWidth>t.clientWidth)break}return n.removeChild(t),a}({html:n});if(!(i||o))break;t-=.5}return t},aO=/^((?!chrome|android).)*safari/i.test(navigator.userAgent),ak=R(({element:e,store:t})=>{let n=c(x).useRef(null),[r,i]=c(x).useState(),[o,a]=c(x).useState(!1),[l,s]=c(x).useState(!0),[u,d]=c(x).useState(!1),h=c(x).useRef(e.height),f=t.selectedElements.indexOf(e)>=0,p=e.fontSize/3,{textVerticalResizeEnabled:g}=iN,m=i0(e.fontFamily),[y]=iQ(t,e.fontFamily),b=e._editModeEnabled;ih(n);let _=y?e.fontFamily:m!==e.fontFamily?m:"Arial",S=ic(e).fill,E=aE(e,{fontFamily:_,color:S}),{width:C,height:O}=c(x).useMemo(()=>ai(E),[E,e.width,y]);c(x).useEffect(()=>{if(!y)return;if(!e.height){e.set({height:O});return}let{textOverflow:n}=iN;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=aC(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(x).useRef(0),P=c(x).useMemo(()=>{let e={lastArgs:null,lastResult:null};return async function(t){return e.lastArgs&&e.lastResult&&JSON.stringify(e.lastArgs)===JSON.stringify(t)||(e.lastResult=await as(t),e.lastArgs={...t}),e.lastResult}},[]),T=async()=>{k.current++;let n=k.current,r=iv(`text ${e.id}`);s(!0);let o=null,a=aO?5:1;for(let i=0;i<a;i++){let a=i>0?P:as;if(o=await a({skipCache:i>0,html:E,width:e.width||1,height:e.height||O||1,fontFamily:_,padding:p,pixelRatio:t._elementsPixelRatio,font:t.fonts.find(e=>e.fontFamily===_)||iE.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)&&aO){await new Promise(e=>setTimeout(e,50*(i+1)));continue}}if(!o){r();return}i(o),s(!1),c(N).Util.requestAnimFrame(r)};c(x).useEffect(()=>{o||b||T()},[E,o,O,b,_,e.height,t._elementsPixelRatio]);let A=o||l;c(x).useEffect(()=>w.autorun(()=>{iD(n.current,e)}),[r,A,e.shadowColor,e.shadowOffsetX,e.shadowOffsetY,e.shadowOpacity]);let R=0;"middle"===e.verticalAlign&&(R=(e.height-O)/2),"bottom"===e.verticalAlign&&(R=e.height-O);let j=iJ({fontLoaded:y,fontFamily:e.fontFamily,fontSize:e.fontSize,lineHeight:e.lineHeight}),L=iH();return(0,v.jsxs)(c(x).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:!A,draggable:L?e.draggable&&f:e.draggable,preventDefault:!L||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),iN.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"===iN.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-R,listening:!1,rotation:e.rotation,width:e.a.width+2*p,height:e.a.height+2*p,visible:!A,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}),A&&(0,v.jsx)(rK,{x:e.a.x,y:e.a.y,rotation:e.rotation,offsetY:-R,children:(0,v.jsx)(r8,{divProps:{style:{pointerEvents:"none"}},children:(0,v.jsx)(aw,{dangerouslySetInnerHTML:{__html:E},style:{pointerEvents:"none",display:"inline-block"}})})}),b&&(0,v.jsx)(rK,{x:e.a.x,y:e.a.y,rotation:e.rotation,offsetY:-R,children:(0,v.jsx)(r8,{children:(0,v.jsx)(aS,{html:E,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 x=(g("8NFma"),g("8NFma"));function aP(e){return e/180*Math.PI}function aT(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 aA(e){let{x:t,y:n,width:r,height:i}=e,o=aP(e.rotation),a=aT(t,n,0,0,o),l=aT(t,n,r,0,o),s=aT(t,n,r,i,o),u=aT(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 aR(e){let t=e.map(e=>aA(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 aj(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 aN(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=aj(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(N)).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(N)).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(x).useEffect(()=>{e.current&&(e.current.on("dragmove",i),e.current.on("dragend",o))},n)}function aL(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 aI(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 aM=(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()}}),aD=R(({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})]})}),aF=R(({element:e,store:t})=>{let n=c(x).useRef(null),r=c(x).useRef(null),i=c(x).useRef(null),o=e.selectable||"admin"===t.role,a=iH(),[l,s]=c(x).useState(!1),u=t.selectedElements.indexOf(e)>=0&&1===t.selectedElements.length,{middleLeft:d,middleRight:h}=aL(e);aN(r,[n],[u]),aN(i,[n],[u]);let f=ic(e,e.a.color,"stroke");return(0,v.jsxs)(c(x).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)(aD,{element:e,type:e.startHead})}),(0,v.jsx)(rK,{x:h.x,y:h.y,rotation:e.rotation+180,children:(0,v.jsx)(aD,{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",...aM(t.scale,t),onDragMove:t=>{let n=aI(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",...aM(t.scale,t),onDragMove:t=>{let n=aI(d,t.target.position(),e.height);e.set({x:n.x,y:n.y,width:n.width,rotation:n.rotation})}})]})})]})});var x=g("8NFma"),w=g("2SBKn");function az(){return document.createElement("canvas")}async function aB(e){return e.indexOf("data:image/svg+xml")>=0||e.indexOf(".svg")>=0?i7(ot(await i9(e))):e}let aU=e=>{let[t,n]=c(x).useState(e);return c(x).useEffect(()=>{(async()=>{let r=await aB(e);r!==t&&n(r)})()},[e]),t},aH=new window.Image;aH.src=i7(`
+    `);let i=["white-space: pre-wrap",`width: ${Math.round(e.width||100)}px`,r,`font-size: ${e.fontSize}px`,`font-family: '${t}'`,`text-align: ${e.align}`,e.textDecoration?`text-decoration: ${e.textDecoration}`:"",e.lineHeight?`line-height: ${e.lineHeight}`:"",e.letterSpacing?`letter-spacing: ${e.letterSpacing}rem`:"",e.fontStyle?`font-style: ${e.fontStyle}`:"",e.fontWeight?`font-weight: ${e.fontWeight}`:"",e.strokeWidth?`-webkit-text-stroke: ${e.strokeWidth}px ${e.stroke}`:"",e.strokeWidth?"paint-order: stroke fill":""].filter(Boolean).join("; ");return`<div style="${i}" contentEditable dir="${iK(iM(e.text))}">${e.text.replaceAll("\n","</br>")}</div>`}let aC=e=>{let t=e.fontSize;for(let n=1;n<50;n++){let n=aE({...e.toJSON(),fontSize:t},{fontFamily:e.fontFamily}),{height:r}=ai(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",t.style.whiteSpace="nowrap",t.style.visibility="hidden";let n=ar();n.appendChild(t);let r=t.textContent,i=t.childNodes[0],o=r.split(/\s+/),a=!1;for(let e=0;e<o.length;e++){let n=o[e];if(i.textContent=n,a=i.scrollWidth>t.clientWidth)break}return n.removeChild(t),a}({html:n});if(!(i||o))break;t-=.5}return t},aO=/^((?!chrome|android).)*safari/i.test(navigator.userAgent),ak=R(({element:e,store:t})=>{let n=c(x).useRef(null),[r,i]=c(x).useState(),[o,a]=c(x).useState(!1),[l,s]=c(x).useState(!0),[u,d]=c(x).useState(!1),h=c(x).useRef(e.height),f=t.selectedElements.indexOf(e)>=0,p=e.fontSize/3,{textVerticalResizeEnabled:g}=iN,m=i0(e.fontFamily),[y]=iQ(t,e.fontFamily),b=e._editModeEnabled;ih(n);let _=y?e.fontFamily:m!==e.fontFamily?m:"Arial",S=ic(e).fill,E=aE(e,{fontFamily:_,color:S}),{width:C,height:O}=c(x).useMemo(()=>ai(E),[E,e.width,y]);c(x).useEffect(()=>{if(!y)return;if(!e.height){e.set({height:O});return}let{textOverflow:n}=iN;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=aC(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(x).useRef(0),P=c(x).useMemo(()=>{let e={lastArgs:null,lastResult:null};return async function(t){return e.lastArgs&&e.lastResult&&JSON.stringify(e.lastArgs)===JSON.stringify(t)||(e.lastResult=await as(t),e.lastArgs={...t}),e.lastResult}},[]),T=async()=>{k.current++;let n=k.current,r=iv(`text ${e.id}`);s(!0);let o=null,a=aO?5:1;for(let i=0;i<a;i++){let a=i>0?P:as;if(o=await a({skipCache:i>0,html:E,width:e.width||1,height:e.height||O||1,fontFamily:_,padding:p,pixelRatio:t._elementsPixelRatio,font:t.fonts.find(e=>e.fontFamily===_)||iE.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)&&aO){await new Promise(e=>setTimeout(e,50*(i+1)));continue}}if(!o){r();return}i(o),s(!1),c(N).Util.requestAnimFrame(r)};c(x).useEffect(()=>{o||b||T()},[E,o,O,b,_,e.height,t._elementsPixelRatio]);let A=o||l;c(x).useEffect(()=>w.autorun(()=>{iD(n.current,e)}),[r,A,e.shadowColor,e.shadowOffsetX,e.shadowOffsetY,e.shadowOpacity]);let R=0;"middle"===e.verticalAlign&&(R=(e.height-O)/2),"bottom"===e.verticalAlign&&(R=e.height-O);let j=iJ({fontLoaded:y,fontFamily:e.fontFamily,fontSize:e.fontSize,lineHeight:e.lineHeight}),L=iH();return(0,v.jsxs)(c(x).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:!A,draggable:L?e.draggable&&f:e.draggable,preventDefault:!L||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),iN.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"===iN.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-R,listening:!1,rotation:e.rotation,width:e.a.width+2*p,height:e.a.height+2*p,visible:!A,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}),A&&(0,v.jsx)(rK,{x:e.a.x,y:e.a.y,rotation:e.rotation,offsetY:-R,children:(0,v.jsx)(r8,{divProps:{style:{pointerEvents:"none"}},children:(0,v.jsx)(aw,{dangerouslySetInnerHTML:{__html:E},style:{pointerEvents:"none",display:"inline-block"}})})}),b&&(0,v.jsx)(rK,{x:e.a.x,y:e.a.y,rotation:e.rotation,offsetY:-R,children:(0,v.jsx)(r8,{children:(0,v.jsx)(aS,{html:E,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 x=(g("8NFma"),g("8NFma"));function aP(e){return e/180*Math.PI}function aT(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 aA(e){let{x:t,y:n,width:r,height:i}=e,o=aP(e.rotation),a=aT(t,n,0,0,o),l=aT(t,n,r,0,o),s=aT(t,n,r,i,o),u=aT(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 aR(e){let t=e.map(e=>aA(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 aj(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 aN(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=aj(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(N)).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(N)).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(x).useEffect(()=>{e.current&&(e.current.on("dragmove",i),e.current.on("dragend",o))},n)}function aL(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 aI(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 aM=(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()}}),aD=R(({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})]})}),aF=R(({element:e,store:t})=>{let n=c(x).useRef(null),r=c(x).useRef(null),i=c(x).useRef(null),o=e.selectable||"admin"===t.role,a=iH(),[l,s]=c(x).useState(!1),u=t.selectedElements.indexOf(e)>=0&&1===t.selectedElements.length,{middleLeft:d,middleRight:h}=aL(e);aN(r,[n],[u]),aN(i,[n],[u]);let f=ic(e,e.a.color,"stroke");return(0,v.jsxs)(c(x).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)(aD,{element:e,type:e.startHead})}),(0,v.jsx)(rK,{x:h.x,y:h.y,rotation:e.rotation+180,children:(0,v.jsx)(aD,{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",...aM(t.scale,t),onDragMove:t=>{let n=aI(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",...aM(t.scale,t),onDragMove:t=>{let n=aI(d,t.target.position(),e.height);e.set({x:n.x,y:n.y,width:n.width,rotation:n.rotation})}})]})})]})});var x=g("8NFma"),w=g("2SBKn");function az(){return document.createElement("canvas")}async function aB(e){return e.indexOf("data:image/svg+xml")>=0||e.indexOf(".svg")>=0?i7(ot(await i9(e))):e}let aU=e=>{let[t,n]=c(x).useState(e);return c(x).useEffect(()=>{(async()=>{let r=await aB(e);r!==t&&n(r)})()},[e]),t},aH=new window.Image;aH.src=i7(`
   <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"/>

package/utils/html2canvas.d.ts

@@ -1,4 +1,4 @@
-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    width: 100%;\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 const resetStyleContent = "\n  p {\n    margin: 0;\n    padding: 0;\n    word-wrap: break-word; /* Required for Firefox */\n    /* a text may have several spaces, we need to preserve them */\n    white-space: pre-wrap;\n  }\n  ul, ol {\n    list-style-position: outside;\n    margin: 0;\n    padding: 0;\n    display: inline-block;\n    text-align: left;\n    width: 100%;\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;

package/utils/html2canvas.js

@@ -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.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    width: 100%;\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",t.style.whiteSpace="nowrap",t.style.visibility="hidden";const n=getHiddenElement();n.appendChild(t);const i=t.textContent,o=t.childNodes[0],s=i.split(/\s+/);let l=!1;for(let e=0;e<s.length;e++){const n=s[e];if(o.textContent=n,l=o.scrollWidth>t.clientWidth,l)break}return n.removeChild(t),l}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}}exports.isContentWrapping=isContentWrapping,exports.detectSize=detectSize;const cacheBucket={};function getFontFaceRules(e){const t=[];for(const n of document.styleSheets)try{for(const i of n.cssRules)i instanceof CSSFontFaceRule&&i.style.fontFamily.replace(/['"]/g,"")===e&&t.push(i)}catch(e){console.warn(`Could not access stylesheet: ${n.href}`,e)}return t}const stylesCache={},getStyles=e=>{if(stylesCache[e])return stylesCache[e];const t=getFontFaceRules(e).filter((t=>t.style.fontFamily.replace(/['"]/g,"")===e)).map((e=>({src:e.style.src,fontStyle:e.style.fontStyle||"normal",fontWeight:e.style.fontWeight||"normal"})));return stylesCache[e]=t,t};async function htmlToCanvas({html:e,width:t,height:n,fontFamily:i,padding:o,font:s,pixelRatio:l}){const r=document.createElement("canvas");if("Arial"!==i&&!s){const t=(0,fonts_1.getGoogleFontsVariants)();e+=`<link type="text/css" href="https://fonts.googleapis.com/css?family=${i}:${t}" rel="stylesheet">`}if(s){const t=s.styles||(s.url?[{src:`url("${s.url}")`}]:getStyles(i));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 d=await rasterizeHTML.drawHTML(`<div style="padding: ${o}px;">${e}</div>`,r,{width:t+2*o,height:n+2*o,cacheBucket:cacheBucket});r.width=(t+2*o)*l,r.height=(n+2*o)*l;const a=r.getContext("2d");return null==a||a.drawImage(d.image,0,0,d.image.width*l,d.image.height*l),r}exports.htmlToCanvas=htmlToCanvas;
+"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    /* a text may have several spaces, we need to preserve them */\n    white-space: pre-wrap;\n  }\n  ul, ol {\n    list-style-position: outside;\n    margin: 0;\n    padding: 0;\n    display: inline-block;\n    text-align: left;\n    width: 100%;\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",t.style.whiteSpace="nowrap",t.style.visibility="hidden";const n=getHiddenElement();n.appendChild(t);const i=t.textContent,o=t.childNodes[0],s=i.split(/\s+/);let l=!1;for(let e=0;e<s.length;e++){const n=s[e];if(o.textContent=n,l=o.scrollWidth>t.clientWidth,l)break}return n.removeChild(t),l}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}}exports.isContentWrapping=isContentWrapping,exports.detectSize=detectSize;const cacheBucket={};function getFontFaceRules(e){const t=[];for(const n of document.styleSheets)try{for(const i of n.cssRules)i instanceof CSSFontFaceRule&&i.style.fontFamily.replace(/['"]/g,"")===e&&t.push(i)}catch(e){console.warn(`Could not access stylesheet: ${n.href}`,e)}return t}const stylesCache={},getStyles=e=>{if(stylesCache[e])return stylesCache[e];const t=getFontFaceRules(e).filter((t=>t.style.fontFamily.replace(/['"]/g,"")===e)).map((e=>({src:e.style.src,fontStyle:e.style.fontStyle||"normal",fontWeight:e.style.fontWeight||"normal"})));return stylesCache[e]=t,t};async function htmlToCanvas({html:e,width:t,height:n,fontFamily:i,padding:o,font:s,pixelRatio:l}){const r=document.createElement("canvas");if("Arial"!==i&&!s){const t=(0,fonts_1.getGoogleFontsVariants)();e+=`<link type="text/css" href="https://fonts.googleapis.com/css?family=${i}:${t}" rel="stylesheet">`}if(s){const t=s.styles||(s.url?[{src:`url("${s.url}")`}]:getStyles(i));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 a=await rasterizeHTML.drawHTML(`<div style="padding: ${o}px;">${e}</div>`,r,{width:t+2*o,height:n+2*o,cacheBucket:cacheBucket});r.width=(t+2*o)*l,r.height=(n+2*o)*l;const d=r.getContext("2d");return null==d||d.drawImage(a.image,0,0,a.image.width*l,a.image.height*l),r}exports.htmlToCanvas=htmlToCanvas;

package/utils/text.js

@@ -1 +1 @@
-"use strict";function removeTags(e=""){return(e=e.replace(/<\/p>/gi,"\n")).replace(/(<([^>]+)>)/gi,"")}Object.defineProperty(exports,"__esModule",{value:!0}),exports.removeTags=void 0,exports.removeTags=removeTags;
+"use strict";function removeTags(e=""){return(e.match(/<\/p>/gi)||[]).length>1&&(e=e.replace(/<\/p>/gi,((e,r,t)=>(t.slice(r+e.length).match(/<\/p>/gi)||[]).length>0?"\n":e))),e.replace(/(<([^>]+)>)/gi,"")}Object.defineProperty(exports,"__esModule",{value:!0}),exports.removeTags=void 0,exports.removeTags=removeTags;