polotno 2.4.15 → 2.4.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/canvas/page.js +1 -1
  2. package/package.json +1 -1
  3. package/pages-timeline/pages-timeline.js +1 -1
  4. package/polotno.bundle.js +1 -1
package/canvas/page.js CHANGED
@@ -1 +1 @@
1
- "use strict";var __rest=this&&this.__rest||function(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(r=Object.getOwnPropertySymbols(e);a<r.length;a++)t.indexOf(r[a])<0&&Object.prototype.propertyIsEnumerable.call(e,r[a])&&(n[r[a]]=e[r[a]])}return n},__importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.registerNextDomDrop=exports.registerTransformerAttrs=exports.setTransformerStyle=void 0;const react_1=__importDefault(require("react")),mobx_react_lite_1=require("mobx-react-lite"),mobx_1=require("mobx"),react_konva_1=require("react-konva"),use_image_1=__importDefault(require("use-image")),konva_1=__importDefault(require("konva")),element_1=__importDefault(require("./element")),use_transformer_snap_1=require("./use-transformer-snap"),image_element_1=require("./image-element"),crop_1=require("../utils/crop"),validate_key_1=require("../utils/validate-key"),math_1=require("../utils/math"),unit_1=require("../utils/unit"),flags_1=require("../utils/flags"),screen_1=require("../utils/screen"),nativeDrag=konva_1.default.DD._drag;window.removeEventListener("mousemove",nativeDrag),konva_1.default.DD._drag=function(e){(0,mobx_1.runInAction)((()=>{nativeDrag.call(this,e)}))},window.addEventListener("mousemove",konva_1.default.DD._drag);const rotateFillGroup=new konva_1.default.Group,rotateFillSize=20;rotateFillGroup.add(new konva_1.default.Rect({width:20,height:20,fill:"white"})),rotateFillGroup.add(new konva_1.default.Path({scaleX:20/24,scaleY:20/24,data:"M4.98313549,11.0001422 C5.49589839,10.9914935 5.92501998,11.3703506 5.99116425,11.8666444 L5.99985778,11.9831355 L6.00348884,12.2068855 C6.11245031,15.4321748 8.76323537,17.9999971 11.9999971,17.9999971 C12.1869612,17.9999971 12.3726725,17.9914753 12.5567465,17.9745765 L12.2928932,17.7071068 C11.9023689,17.3165825 11.9023689,16.6834175 12.2928932,16.2928932 C12.6834175,15.9023689 13.3165825,15.9023689 13.7071068,16.2928932 L15.7071068,18.2928932 C16.0976311,18.6834175 16.0976311,19.3165825 15.7071068,19.7071068 L13.7071068,21.7071068 C13.3165825,22.0976311 12.6834175,22.0976311 12.2928932,21.7071068 C11.9023689,21.3165825 11.9023689,20.6834175 12.2928932,20.2928932 L12.6111505,19.9769552 C12.4086045,19.9922816 12.2047796,19.9999971 11.9999971,19.9999971 C7.7687005,19.9999971 4.28886152,16.7094374 4.01666425,12.5105203 L4.00420123,12.2575143 L4.00014222,12.0168645 C3.9908282,11.4646583 4.43092928,11.0094562 4.98313549,11.0001422 Z M11.7071068,2.29289322 C12.0675907,2.65337718 12.0953203,3.22060824 11.7902954,3.61289944 L11.7071068,3.70710678 L11.3891629,4.0230186 C11.5916051,4.00770767 11.7953244,4 12,4 C16.418278,4 20,7.581722 20,12 C20,12.5522847 19.5522847,13 19,13 C18.4477153,13 18,12.5522847 18,12 C18,8.6862915 15.3137085,6 12,6 C11.8129339,6 11.6271216,6.00853145 11.4429483,6.02544919 L11.7071068,6.29289322 C12.0976311,6.68341751 12.0976311,7.31658249 11.7071068,7.70710678 C11.3466228,8.06759074 10.7793918,8.09532028 10.3871006,7.79029539 L10.2928932,7.70710678 L8.29289322,5.70710678 C7.93240926,5.34662282 7.90467972,4.77939176 8.20970461,4.38710056 L8.29289322,4.29289322 L10.2928932,2.29289322 C10.6834175,1.90236893 11.3165825,1.90236893 11.7071068,2.29289322 Z",fill:"black"}));const rotaterFill=rotateFillGroup.toCanvas({pixelRatio:2,width:20,height:20}),TRANSFORMER_STYLE={enabledAnchors:["top-left","top-center","top-right","middle-left","bottom-left","bottom-right","bottom-center","middle-right"],borderEnabled:!0,rotateEnabled:!0,rotationSnaps:[0,45,90,135,180,225,270,315],ignoreStroke:!0,flipEnabled:!1,anchorStrokeWidth:2,borderStrokeWidth:2,rotateAnchorOffset:30,anchorStyleFunc:e=>{if(e.hasName("rotater")){const t=20;e.setAttrs({width:t,height:t,cornerRadius:t/2,offsetX:t/2,offsetY:t/2,fillPatternImage:rotaterFill,fillPatternScaleX:t/20/2,fillPatternScaleY:t/20/2,fillPriority:"pattern",fillPatternRepeat:"no-repeat"})}}},setTransformerStyle=e=>{Object.assign(TRANSFORMER_STYLE,e)};exports.setTransformerStyle=setTransformerStyle;const transformerAttributes={text:{enabledAnchors:["top-left","top-right","middle-left","bottom-left","bottom-right","middle-right"]},svg:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]},line:{enabledAnchors:[],borderEnabled:!1,rotateEnabled:!1},image:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]},many:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]},group:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]}};function registerTransformerAttrs(e,t){transformerAttributes[e]=transformerAttributes[e]||t,Object.assign(transformerAttributes[e],t)}exports.registerTransformerAttrs=registerTransformerAttrs;const Background=e=>react_1.default.createElement(react_konva_1.Rect,Object.assign({},e,{preventDefault:!1})),ImageBackground=e=>{var{url:t}=e,n=__rest(e,["url"]);const[r,a]=(0,use_image_1.default)(t,"anonymous"),o=r?(0,crop_1.getCrop)(r,{width:n.width,height:n.height},"center-middle"):{};return(0,image_element_1.useImageLoader)(a,"background"),react_1.default.createElement(react_konva_1.Image,Object.assign({image:r},n,o))},ColorBackground=e=>react_1.default.createElement(react_konva_1.Rect,Object.assign({},e)),PageBackground=e=>{const{background:t,scale:n,borderColor:r}=e,a=__rest(e,["background","scale","borderColor"]),o=react_1.default.useMemo((()=>!!konva_1.default.Util.colorToRGBA(t)),[t]),i=react_1.default.useMemo((()=>{const e=document.createElement("canvas"),t=30;e.width=60,e.height=60;const n=e.getContext("2d");return n&&(n.fillStyle="black",n.fillRect(t,0,t,t),n.fillRect(0,t,t,t)),e}),[]);return react_1.default.createElement(react_1.default.Fragment,null,react_1.default.createElement(react_konva_1.Rect,Object.assign({fillPatternImage:i},a,{opacity:.1,hideInExport:!0})),o?react_1.default.createElement(ColorBackground,Object.assign({fill:t},a)):react_1.default.createElement(ImageBackground,Object.assign({url:t},a)))},Selection=(0,mobx_react_lite_1.observer)((({selection:e})=>e.visible?react_1.default.createElement(react_konva_1.Rect,{name:"selection",x:Math.min(e.x1,e.x2),y:Math.min(e.y1,e.y2),width:Math.abs(e.x1-e.x2),height:Math.abs(e.y1-e.y2),fill:"rgba(0, 161, 255, 0.3)"}):null)),TransformLabels=(0,mobx_react_lite_1.observer)((({x:e,y:t,width:n,height:r,rotation:a,anchor:o,store:i})=>{const l=(0,math_1.getClientRect)({x:e,y:t,width:n,height:r,rotation:konva_1.default.Util.radToDeg(a)});if(void 0===o)return null;const c=(r/2+70)*Math.cos(a-Math.PI/2),s=(r/2+70)*Math.sin(a-Math.PI/2),d=(0,unit_1.pxToUnitRounded)({unit:i.unit,dpi:i.dpi,px:n/i.scale,precious:"px"===i.unit?0:1})+" x "+(0,unit_1.pxToUnitRounded)({unit:i.unit,dpi:i.dpi,px:r/i.scale,precious:"px"===i.unit?0:1})+("px"===i.unit?"":" "+i.unit);return react_1.default.createElement(react_1.default.Fragment,null,react_1.default.createElement(react_konva_1.Label,{x:(l.minX+l.maxX)/2+c,y:(l.minY+l.maxY)/2+s,offsetX:14,offsetY:14,visible:"rotater"===o},react_1.default.createElement(react_konva_1.Tag,{cornerRadius:5,fill:"rgb(0, 161, 255)"}),react_1.default.createElement(react_konva_1.Text,{align:"center",verticalAlign:"middle",fill:"white",padding:8,text:Math.round(konva_1.default.Util.radToDeg(a)).toString()+"°"})),react_1.default.createElement(react_konva_1.Label,{x:(l.minX+l.maxX)/2,y:l.maxY+20,visible:"rotater"!==o},react_1.default.createElement(react_konva_1.Tag,{cornerRadius:5,fill:"rgb(0, 161, 255)",pointerDirection:"up",pointerHeight:0,pointerWidth:0}),react_1.default.createElement(react_konva_1.Text,{align:"center",verticalAlign:"middle",fill:"white",padding:8,text:d})))})),Elements=(0,mobx_react_lite_1.observer)((({elements:e,store:t})=>{const n=e.filter((e=>e.alwaysOnTop)),r=e.filter((e=>!e.alwaysOnTop)).concat(n);return react_1.default.createElement(react_1.default.Fragment,null,r.map((e=>react_1.default.createElement(element_1.default,{key:e.id,store:t,element:e,onClick:()=>{console.warn("Polotno warning: onClick callback is deprecated. Just stop using it. Polotno will do selection automatically.")}}))))}));let onDomDrop=null;const registerNextDomDrop=e=>{onDomDrop=e};exports.registerNextDomDrop=registerNextDomDrop,exports.default=(0,mobx_react_lite_1.observer)((({store:e,page:t,width:n,height:r,pageControlsEnabled:a,backColor:o,pageBorderColor:i,activePageBorderColor:l,components:c,bleedColor:s,altCloneEnabled:d})=>{const u=e.bleedVisible?t.bleed:0,m=t.computedWidth+2*u,g=t.computedHeight+2*u,h=(n-m*e.scale)/2,_=(r-g*e.scale)/2,f=react_1.default.useRef(null),p=react_1.default.useRef(null),b=react_1.default.useRef(null),x=null==a||a,[v,E]=react_1.default.useState(null),[y,k]=react_1.default.useState({}),w=e.selectedElements.find((e=>e._cropModeEnabled)),S=e.selectedShapes.filter((e=>!e.resizable)).length>0,Y=e.selectedShapes.filter((e=>!e.draggable)).length>0,D=e.selectedElements.filter((e=>!e.visible)).length>0;react_1.default.useLayoutEffect((()=>{var t,n,r;if(!f.current)return;const a=f.current.getStage(),o=e.selectedShapes.map((e=>e._cropModeEnabled?null:a.findOne("#"+e.id))).filter((e=>e)),i=1===e.selectedElements.length&&(null===(t=e.selectedElements[0])||void 0===t?void 0:t.type)||"many";transformerAttributes[i]?(f.current.setAttrs(Object.assign(Object.assign({},TRANSFORMER_STYLE),transformerAttributes[i])),"svg"!==i&&"image"!==i||e.selectedElements[0].keepRatio||f.current.setAttrs({enabledAnchors:TRANSFORMER_STYLE.enabledAnchors}),"text"===i&&flags_1.flags.textVerticalResizeEnabled&&f.current.setAttrs({enabledAnchors:null===(n=transformerAttributes.text.enabledAnchors)||void 0===n?void 0:n.concat(["bottom-center"])})):f.current.setAttrs(TRANSFORMER_STYLE),S&&f.current.enabledAnchors([]),Y&&f.current.rotateEnabled(!1);o.find((e=>null==e?void 0:e.isDragging()))&&o.forEach((e=>{e.isDragging()||null==e||e.startDrag()})),f.current.nodes(o),null===(r=f.current.getLayer())||void 0===r||r.batchDraw()}),[e.selectedElements,w,S,D,Y]);const A=(0,mobx_react_lite_1.useLocalObservable)((()=>({visible:!1,x1:0,y1:0,x2:0,y2:0}))),R=react_1.default.useRef(!1),T=(0,screen_1.useMobile)(),X=(0,mobx_1.action)((e=>{var t,n;if(T)return;R.current=!1;const r=e.target.findAncestor(".elements-container"),a=e.target.findAncestor("Transformer"),o=e.target.findAncestor(".page-abs-container");if(r||a||o)return;const i=null===(t=e.target.getStage())||void 0===t?void 0:t.getPointerPosition();i&&(A.visible=!0,A.x1=i.x,A.y1=i.y,A.x2=i.x,A.y2=i.y,(null===(n=e.target.getStage())||void 0===n?void 0:n.getPointersPositions().length)>=2&&(A.visible=!1))}));react_1.default.useEffect((()=>{const t=(0,mobx_1.action)((e=>{var t,n;if(!A.visible)return;null===(t=p.current)||void 0===t||t.setPointersPositions(e);let r=(null===(n=p.current)||void 0===n?void 0:n.getPointerPosition())||{x:A.x2,y:A.y2};A.x2=r.x,A.y2=r.y})),n=(0,mobx_1.action)((()=>{if(!A.visible)return;if(!p.current)return;const t=p.current.findOne(".selection"),n=t?t.getClientRect():{width:0,height:0,x:0,y:0};if(n.width&&n.height){const t=[];p.current.find(".element").forEach((r=>{const a=r.getClientRect(),o=e.getElementById(r.id()),i=null==o?void 0:o.draggable,l=null==o?void 0:o.selectable;konva_1.default.Util.haveIntersection(n,a)&&i&&l&&t.push(o.top.id)}));const r=[...new Set(t)];e.selectElements(r)}A.visible=!1,R.current=!0}));return window.addEventListener("mousemove",t),window.addEventListener("touchmove",t),window.addEventListener("mouseup",n),window.addEventListener("touchend",n),()=>{window.removeEventListener("mousemove",t),window.removeEventListener("touchmove",t),window.removeEventListener("mouseup",n),window.removeEventListener("touchend",n)}}),[]);const C=n=>{if(e.activePage!==t&&t.select(),R.current)return;const r=n.evt.ctrlKey||n.evt.metaKey||n.evt.shiftKey,a=n.target.findAncestor(".elements-container"),o=n.target.findAncestor(".page-abs-container"),i=n.target.findAncestor("Transformer");if(!(r||a||i||o))return void e.selectElements([]);const l=n.target.findAncestor(".element",!0),c=e.getElementById(null==l?void 0:l.id()),s=null==c?void 0:c.top,d=null==s?void 0:s.id,u=e.selectedElementsIds.indexOf(d)>=0;d&&r&&!u?e.selectElements(e.selectedElementsIds.concat([d])):d&&r&&u?e.selectElements(e.selectedElementsIds.filter((e=>e!==d))):!d||r||u||e.selectElements([d])};(0,use_transformer_snap_1.useSnap)(f);const L=e.activePage===t,O=null==c?void 0:c.PageControls,P=null==c?void 0:c.Tooltip,M=1/e.scale,I=0/e.scale;return react_1.default.createElement("div",{ref:b,onDragOver:e=>e.preventDefault(),onDrop:n=>{if(n.preventDefault(),!p.current)return;p.current.setPointersPositions(n);const r=p.current.findOne(".elements-container").getRelativePointerPosition(),a=p.current.getPointerPosition(),o=p.current.getAllIntersections(a).map((e=>e.findAncestor(".element",!0))).filter(Boolean),i=[...new Set(o.reverse())].map((t=>e.getElementById(t.id()))),l=i[0];onDomDrop&&(onDomDrop(r,l,{elements:i,page:t}),onDomDrop=null)},style:{position:"relative",width:n+"px"},className:"polotno-page-container"+(L?" active-page":"")},react_1.default.createElement(react_konva_1.Stage,{ref:p,width:Math.min(n,4*window.innerWidth),height:Math.min(r,4*window.innerHeight),onClick:C,onTap:C,onMouseDown:X,onMouseMove:n=>{if(!n.evt.altKey&&v)return void E(null);if(!n.evt.altKey)return;const r=n.target.findAncestor(".element",!0),a=null==r?void 0:r.id();if(!e.selectedElements[0])return;if(e.selectedElementsIds.includes(a))return;const o=(0,math_1.getTotalClientRect)(e.selectedElements),i=a?e.getElementById(a):{x:0,y:0,width:t.computedWidth,height:t.computedHeight,rotation:0},l=(0,math_1.getClientRect)(i),c=[];o.minX>l.maxX&&c.push({distance:o.minX-l.maxX,box1:o,box2:l,points:[{x:o.minX,y:o.minY+o.height/2},{x:l.maxX,y:o.minY+o.height/2},{x:l.maxX,y:l.minY+l.height/2}]}),o.maxX<l.minX&&c.push({distance:l.minX-o.maxX,box1:o,box2:l,points:[{x:o.maxX,y:o.minY+o.height/2},{x:l.minX,y:o.minY+o.height/2},{x:l.minX,y:l.minY+l.height/2}]}),o.minY>l.maxY&&c.push({box1:o,box2:l,distance:o.minY-l.maxY,points:[{x:o.minX+o.width/2,y:o.minY},{x:o.minX+o.width/2,y:l.maxY},{x:l.minX+l.width/2,y:l.maxY}]}),o.maxY<l.minY&&c.push({box1:o,box2:l,distance:l.minY-o.maxY,points:[{x:o.minX+o.width/2,y:o.maxY},{x:o.minX+o.width/2,y:l.minY},{x:l.minX+l.width/2,y:l.minY}]});o.minX>=l.minX&&o.maxX<=l.maxX&&o.minY>=l.minY&&o.maxY<=l.maxY&&(c.push({distance:o.minX-l.minX,box1:o,box2:l,points:[{x:o.minX,y:o.minY+o.height/2},{x:l.minX,y:o.minY+o.height/2},{x:l.minX,y:l.minY+l.height/2}]}),c.push({distance:l.maxX-o.maxX,box1:o,box2:l,points:[{x:o.maxX,y:o.minY+o.height/2},{x:l.maxX,y:o.minY+o.height/2},{x:l.maxX,y:l.minY+l.height/2}]}),c.push({box1:o,box2:l,distance:o.minY-l.minY,points:[{x:o.minX+o.width/2,y:o.minY},{x:o.minX+o.width/2,y:l.minY},{x:l.minX+l.width/2,y:l.minY}]}),c.push({box1:o,box2:l,distance:l.maxY-o.maxY,points:[{x:o.minX+o.width/2,y:o.maxY},{x:o.minX+o.width/2,y:l.maxY},{x:l.minX+l.width/2,y:l.maxY}]})),JSON.stringify(v)!==JSON.stringify(c)&&E(c)},onTouchStart:X,onDragStart:t=>{var n;const r=t.target.findAncestor(".element",!0);if(r){const a=e.getElementById(null==r?void 0:r.id()),o=null==a?void 0:a.top,i=null==o?void 0:o.id;!(e.selectedElementsIds.indexOf(i)>=0)&&i&&(e.selectElements([i]),t.target.stopDrag(),t.target.startDrag(t),null===(n=f.current)||void 0===n||n.startDrag(t))}v&&E(null)},pageId:t.id,style:{position:"relative"}},react_1.default.createElement(react_konva_1.Layer,null,react_1.default.createElement(Background,{width:n,height:r,fill:o}),react_1.default.createElement(react_konva_1.Group,{x:h,y:_,scaleX:e.scale,scaleY:e.scale,name:"page-container"},react_1.default.createElement(react_konva_1.Group,{name:"page-container-2"},react_1.default.createElement(react_konva_1.Group,{name:"page-background-group",x:u,y:u},react_1.default.createElement(PageBackground,{x:-t.bleed,y:-t.bleed,width:t.computedWidth+2*t.bleed,height:t.computedHeight+2*t.bleed,background:t.background,shadowBlur:10,shadowColor:"lightgrey",name:"page-background",preventDefault:!1,scale:e.scale})),react_1.default.createElement(react_konva_1.Group,{x:u,y:u,name:"elements-container",listening:!e.isPlaying},react_1.default.createElement(react_konva_1.Rect,{name:"elements-area",width:t.computedWidth,height:t.computedHeight,listening:!1}),react_1.default.createElement(Elements,{elements:t.children,store:e})),react_1.default.createElement(react_konva_1.Rect,{stroke:s,name:"bleed",strokeWidth:t.bleed,x:t.bleed/2,y:t.bleed/2,width:t.computedWidth+t.bleed,height:t.computedHeight+t.bleed,listening:!1,visible:t.bleed>0&&e.bleedVisible,hideInExport:!0}))),react_1.default.createElement(react_konva_1.Line,{name:"workspace-background",points:[0,0,n,0,n,r,0,r,0,0,h,_,h,r-_,n-h,r-_,n-h,_,h,_],listening:!1,closed:!0,fill:o}),react_1.default.createElement(react_konva_1.Group,{x:h,y:_,scaleX:e.scale,scaleY:e.scale},react_1.default.createElement(react_konva_1.Rect,{name:"page-highlight",hideInExport:!0,x:-M/2-I,y:-M/2-I,width:m+M+2*I,height:g+M+2*I,stroke:L&&e.pages.length>1?l:i,strokeWidth:2,listening:!1,strokeScaleEnabled:!1})),react_1.default.createElement(react_konva_1.Group,{x:h+u*e.scale,y:_+u*e.scale,scaleX:e.scale,scaleY:e.scale,name:"page-abs-container"},react_1.default.createElement(react_konva_1.Transformer,{ref:f,onDragStart:n=>{var r;(null===(r=n.evt)||void 0===r?void 0:r.altKey)&&d&&e.selectedElements.forEach((e=>{const n=e.clone({},{skipSelect:!0}),r=t.children.indexOf(e);t.setElementZIndex(n.id,r)})),e.history.startTransaction()},onDragEnd:()=>{e.history.endTransaction()},onTransformStart:()=>{e.history.startTransaction()},boundBoxFunc:(e,t)=>{const n=Math.abs(t.width)<1||Math.abs(t.height)<1,r=Math.abs(e.width)<1||Math.abs(e.height)<1;return n&&!r?e:t},onTransform:e=>{var t,n;const r=null===(t=f.current)||void 0===t?void 0:t.__getNodeRect(),a=null===(n=f.current)||void 0===n?void 0:n.getActiveAnchor();k({anchor:a,x:r.x,y:r.y,rotation:r.rotation,width:r.width,height:r.height})},onTransformEnd:t=>{k({}),e.history.endTransaction()},visible:!e.isPlaying}),v&&v.map((({points:t,distance:n,box1:r,box2:a},o)=>react_1.default.createElement(react_konva_1.Group,{name:"distances-container",hideInExport:!0,key:o,listening:!1},react_1.default.createElement(react_konva_1.Rect,Object.assign({},r,{stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1})),react_1.default.createElement(react_konva_1.Rect,Object.assign({},a,{stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1})),react_1.default.createElement(react_konva_1.Line,{points:[t[0].x,t[0].y,t[1].x,t[1].y],stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1}),react_1.default.createElement(react_konva_1.Line,{points:[t[1].x,t[1].y,t[2].x,t[2].y],stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1}),react_1.default.createElement(react_konva_1.Label,{x:(t[0].x+t[1].x)/2,y:(t[0].y+t[1].y)/2,offsetY:-10,scaleX:1/e.scale,scaleY:1/e.scale},react_1.default.createElement(react_konva_1.Tag,{cornerRadius:5,fill:"rgb(0, 161, 255)",pointerDirection:"down"}),react_1.default.createElement(react_konva_1.Text,{align:"center",verticalAlign:"middle",fill:"white",padding:5,text:(0,unit_1.pxToUnitString)({unit:e.unit,dpi:e.dpi,px:n})}))))),t._rendering&&react_1.default.createElement(react_konva_1.Group,null,react_1.default.createElement(react_konva_1.Rect,{width:m,height:g,fill:"rgba(255,255,255,0.9)"}),react_1.default.createElement(react_konva_1.Text,{text:"Rendering...",fontSize:60,width:m,height:g,align:"center",verticalAlign:"middle"})),P&&react_1.default.createElement(P,{components:c,store:e,page:t,stageRef:p})),react_1.default.createElement(TransformLabels,Object.assign({},y,{store:e})),react_1.default.createElement(Selection,{selection:A}),validate_key_1.shouldShowCredit.value&&react_1.default.createElement(react_konva_1.Text,{text:"Powered by polotno.com",fontSize:14,fill:"rgba(0,0,0,0.6)",x:n-170,y:r-18,onMouseEnter:e=>{e.target.getStage().container().style.cursor="pointer"},onMouseLeave:e=>{e.target.getStage().container().style.cursor=""},onTouchStart:e=>{e.cancelBubble=!0},onMouseDown:e=>{e.cancelBubble=!0},onClick:()=>{window.open("https://polotno.com")},onTap:()=>{window.open("https://polotno.com")}}),react_1.default.createElement(react_konva_1.Group,{name:"line-guides"}))),x&&L&&O&&react_1.default.createElement(O,{store:e,page:t,xPadding:h,yPadding:_}))}));
1
+ "use strict";var __rest=this&&this.__rest||function(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(r=Object.getOwnPropertySymbols(e);a<r.length;a++)t.indexOf(r[a])<0&&Object.prototype.propertyIsEnumerable.call(e,r[a])&&(n[r[a]]=e[r[a]])}return n},__importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.registerNextDomDrop=exports.registerTransformerAttrs=exports.setTransformerStyle=void 0;const react_1=__importDefault(require("react")),mobx_react_lite_1=require("mobx-react-lite"),mobx_1=require("mobx"),react_konva_1=require("react-konva"),use_image_1=__importDefault(require("use-image")),konva_1=__importDefault(require("konva")),element_1=__importDefault(require("./element")),use_transformer_snap_1=require("./use-transformer-snap"),image_element_1=require("./image-element"),crop_1=require("../utils/crop"),validate_key_1=require("../utils/validate-key"),math_1=require("../utils/math"),unit_1=require("../utils/unit"),flags_1=require("../utils/flags"),screen_1=require("../utils/screen"),nativeDrag=konva_1.default.DD._drag;window.removeEventListener("mousemove",nativeDrag),konva_1.default.DD._drag=function(e){(0,mobx_1.runInAction)((()=>{nativeDrag.call(this,e)}))},window.addEventListener("mousemove",konva_1.default.DD._drag);const rotateFillGroup=new konva_1.default.Group,rotateFillSize=20;rotateFillGroup.add(new konva_1.default.Rect({width:20,height:20,fill:"white"})),rotateFillGroup.add(new konva_1.default.Path({scaleX:20/24,scaleY:20/24,data:"M4.98313549,11.0001422 C5.49589839,10.9914935 5.92501998,11.3703506 5.99116425,11.8666444 L5.99985778,11.9831355 L6.00348884,12.2068855 C6.11245031,15.4321748 8.76323537,17.9999971 11.9999971,17.9999971 C12.1869612,17.9999971 12.3726725,17.9914753 12.5567465,17.9745765 L12.2928932,17.7071068 C11.9023689,17.3165825 11.9023689,16.6834175 12.2928932,16.2928932 C12.6834175,15.9023689 13.3165825,15.9023689 13.7071068,16.2928932 L15.7071068,18.2928932 C16.0976311,18.6834175 16.0976311,19.3165825 15.7071068,19.7071068 L13.7071068,21.7071068 C13.3165825,22.0976311 12.6834175,22.0976311 12.2928932,21.7071068 C11.9023689,21.3165825 11.9023689,20.6834175 12.2928932,20.2928932 L12.6111505,19.9769552 C12.4086045,19.9922816 12.2047796,19.9999971 11.9999971,19.9999971 C7.7687005,19.9999971 4.28886152,16.7094374 4.01666425,12.5105203 L4.00420123,12.2575143 L4.00014222,12.0168645 C3.9908282,11.4646583 4.43092928,11.0094562 4.98313549,11.0001422 Z M11.7071068,2.29289322 C12.0675907,2.65337718 12.0953203,3.22060824 11.7902954,3.61289944 L11.7071068,3.70710678 L11.3891629,4.0230186 C11.5916051,4.00770767 11.7953244,4 12,4 C16.418278,4 20,7.581722 20,12 C20,12.5522847 19.5522847,13 19,13 C18.4477153,13 18,12.5522847 18,12 C18,8.6862915 15.3137085,6 12,6 C11.8129339,6 11.6271216,6.00853145 11.4429483,6.02544919 L11.7071068,6.29289322 C12.0976311,6.68341751 12.0976311,7.31658249 11.7071068,7.70710678 C11.3466228,8.06759074 10.7793918,8.09532028 10.3871006,7.79029539 L10.2928932,7.70710678 L8.29289322,5.70710678 C7.93240926,5.34662282 7.90467972,4.77939176 8.20970461,4.38710056 L8.29289322,4.29289322 L10.2928932,2.29289322 C10.6834175,1.90236893 11.3165825,1.90236893 11.7071068,2.29289322 Z",fill:"black"}));const rotaterFill=rotateFillGroup.toCanvas({pixelRatio:2,width:20,height:20}),TRANSFORMER_STYLE={enabledAnchors:["top-left","top-center","top-right","middle-left","bottom-left","bottom-right","bottom-center","middle-right"],borderEnabled:!0,rotateEnabled:!0,rotationSnaps:[0,45,90,135,180,225,270,315],ignoreStroke:!0,flipEnabled:!1,anchorStrokeWidth:2,borderStrokeWidth:2,rotateAnchorOffset:30,anchorStyleFunc:e=>{if(e.hasName("rotater")){const t=20;e.setAttrs({width:t,height:t,cornerRadius:t/2,offsetX:t/2,offsetY:t/2,fillPatternImage:rotaterFill,fillPatternScaleX:t/20/2,fillPatternScaleY:t/20/2,fillPriority:"pattern",fillPatternRepeat:"no-repeat"})}}},setTransformerStyle=e=>{Object.assign(TRANSFORMER_STYLE,e)};exports.setTransformerStyle=setTransformerStyle;const transformerAttributes={text:{enabledAnchors:["top-left","top-right","middle-left","bottom-left","bottom-right","middle-right"]},svg:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]},line:{enabledAnchors:[],borderEnabled:!1,rotateEnabled:!1},image:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]},many:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]},group:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]}};function registerTransformerAttrs(e,t){transformerAttributes[e]=transformerAttributes[e]||t,Object.assign(transformerAttributes[e],t)}exports.registerTransformerAttrs=registerTransformerAttrs;const Background=e=>react_1.default.createElement(react_konva_1.Rect,Object.assign({},e,{preventDefault:!1})),ImageBackground=e=>{var{url:t}=e,n=__rest(e,["url"]);const[r,a]=(0,use_image_1.default)(t,"anonymous"),o=r?(0,crop_1.getCrop)(r,{width:n.width,height:n.height},"center-middle"):{};return(0,image_element_1.useImageLoader)(a,"background"),react_1.default.createElement(react_konva_1.Image,Object.assign({image:r},n,o))},ColorBackground=e=>react_1.default.createElement(react_konva_1.Rect,Object.assign({},e)),PageBackground=e=>{const{background:t,scale:n,borderColor:r}=e,a=__rest(e,["background","scale","borderColor"]),o=react_1.default.useMemo((()=>!!konva_1.default.Util.colorToRGBA(t)),[t]),i=react_1.default.useMemo((()=>{const e=document.createElement("canvas"),t=30;e.width=60,e.height=60;const n=e.getContext("2d");return n&&(n.fillStyle="black",n.fillRect(t,0,t,t),n.fillRect(0,t,t,t)),e}),[]);return react_1.default.createElement(react_1.default.Fragment,null,react_1.default.createElement(react_konva_1.Rect,Object.assign({fillPatternImage:i},a,{opacity:.1,hideInExport:!0})),o?react_1.default.createElement(ColorBackground,Object.assign({fill:t},a)):react_1.default.createElement(ImageBackground,Object.assign({url:t},a)))},Selection=(0,mobx_react_lite_1.observer)((({selection:e})=>e.visible?react_1.default.createElement(react_konva_1.Rect,{name:"selection",x:Math.min(e.x1,e.x2),y:Math.min(e.y1,e.y2),width:Math.abs(e.x1-e.x2),height:Math.abs(e.y1-e.y2),fill:"rgba(0, 161, 255, 0.3)"}):null)),TransformLabels=(0,mobx_react_lite_1.observer)((({x:e,y:t,width:n,height:r,rotation:a,anchor:o,store:i})=>{const l=(0,math_1.getClientRect)({x:e,y:t,width:n,height:r,rotation:konva_1.default.Util.radToDeg(a)});if(void 0===o)return null;const c=(r/2+70)*Math.cos(a-Math.PI/2),s=(r/2+70)*Math.sin(a-Math.PI/2),d=(0,unit_1.pxToUnitRounded)({unit:i.unit,dpi:i.dpi,px:n/i.scale,precious:"px"===i.unit?0:1})+" x "+(0,unit_1.pxToUnitRounded)({unit:i.unit,dpi:i.dpi,px:r/i.scale,precious:"px"===i.unit?0:1})+("px"===i.unit?"":" "+i.unit);return react_1.default.createElement(react_1.default.Fragment,null,react_1.default.createElement(react_konva_1.Label,{x:(l.minX+l.maxX)/2+c,y:(l.minY+l.maxY)/2+s,offsetX:14,offsetY:14,visible:"rotater"===o},react_1.default.createElement(react_konva_1.Tag,{cornerRadius:5,fill:"rgb(0, 161, 255)"}),react_1.default.createElement(react_konva_1.Text,{align:"center",verticalAlign:"middle",fill:"white",padding:8,text:Math.round(konva_1.default.Util.radToDeg(a)).toString()+"°"})),react_1.default.createElement(react_konva_1.Label,{x:(l.minX+l.maxX)/2,y:l.maxY+20,visible:"rotater"!==o},react_1.default.createElement(react_konva_1.Tag,{cornerRadius:5,fill:"rgb(0, 161, 255)",pointerDirection:"up",pointerHeight:0,pointerWidth:0}),react_1.default.createElement(react_konva_1.Text,{align:"center",verticalAlign:"middle",fill:"white",padding:8,text:d})))})),Elements=(0,mobx_react_lite_1.observer)((({elements:e,store:t})=>{const n=e.filter((e=>e.alwaysOnTop)),r=e.filter((e=>!e.alwaysOnTop)).concat(n);return react_1.default.createElement(react_1.default.Fragment,null,r.map((e=>react_1.default.createElement(element_1.default,{key:e.id,store:t,element:e,onClick:()=>{console.warn("Polotno warning: onClick callback is deprecated. Just stop using it. Polotno will do selection automatically.")}}))))}));let onDomDrop=null;const registerNextDomDrop=e=>{onDomDrop=e};exports.registerNextDomDrop=registerNextDomDrop,exports.default=(0,mobx_react_lite_1.observer)((({store:e,page:t,width:n,height:r,pageControlsEnabled:a,backColor:o,pageBorderColor:i,activePageBorderColor:l,components:c,bleedColor:s,altCloneEnabled:d})=>{const u=e.bleedVisible?t.bleed:0,m=t.computedWidth+2*u,g=t.computedHeight+2*u,h=(n-m*e.scale)/2,_=(r-g*e.scale)/2,f=react_1.default.useRef(null),p=react_1.default.useRef(null),b=react_1.default.useRef(null),x=null==a||a,[v,E]=react_1.default.useState(null),[y,k]=react_1.default.useState({}),w=e.selectedElements.find((e=>e._cropModeEnabled)),S=e.selectedShapes.filter((e=>!e.resizable)).length>0,Y=e.selectedShapes.filter((e=>!e.draggable)).length>0,D=e.selectedElements.filter((e=>!e.visible)).length>0;react_1.default.useLayoutEffect((()=>{var t,n,r;if(!f.current)return;const a=f.current.getStage(),o=e.selectedShapes.map((e=>e._cropModeEnabled?null:a.findOne("#"+e.id))).filter((e=>e)),i=1===e.selectedElements.length&&(null===(t=e.selectedElements[0])||void 0===t?void 0:t.type)||"many";transformerAttributes[i]?(f.current.setAttrs(Object.assign(Object.assign({},TRANSFORMER_STYLE),transformerAttributes[i])),"svg"!==i&&"image"!==i||e.selectedElements[0].keepRatio||f.current.setAttrs({enabledAnchors:TRANSFORMER_STYLE.enabledAnchors}),"text"===i&&flags_1.flags.textVerticalResizeEnabled&&f.current.setAttrs({enabledAnchors:null===(n=transformerAttributes.text.enabledAnchors)||void 0===n?void 0:n.concat(["bottom-center"])})):f.current.setAttrs(TRANSFORMER_STYLE),S&&f.current.enabledAnchors([]),Y&&f.current.rotateEnabled(!1);o.find((e=>null==e?void 0:e.isDragging()))&&o.forEach((e=>{e.isDragging()||null==e||e.startDrag()})),f.current.nodes(o),null===(r=f.current.getLayer())||void 0===r||r.batchDraw()}),[e.selectedElements,w,S,D,Y]);const A=(0,mobx_react_lite_1.useLocalObservable)((()=>({visible:!1,x1:0,y1:0,x2:0,y2:0}))),R=react_1.default.useRef(!1),T=(0,screen_1.useMobile)(),X=(0,mobx_1.action)((e=>{var t,n;if(T)return;R.current=!1;const r=e.target.findAncestor(".elements-container"),a=e.target.findAncestor("Transformer"),o=e.target.findAncestor(".page-abs-container");if(r||a||o)return;const i=null===(t=e.target.getStage())||void 0===t?void 0:t.getPointerPosition();i&&(A.visible=!0,A.x1=i.x,A.y1=i.y,A.x2=i.x,A.y2=i.y,(null===(n=e.target.getStage())||void 0===n?void 0:n.getPointersPositions().length)>=2&&(A.visible=!1))}));react_1.default.useEffect((()=>{const t=(0,mobx_1.action)((e=>{var t,n;if(!A.visible)return;null===(t=p.current)||void 0===t||t.setPointersPositions(e);let r=(null===(n=p.current)||void 0===n?void 0:n.getPointerPosition())||{x:A.x2,y:A.y2};A.x2=r.x,A.y2=r.y})),n=(0,mobx_1.action)((()=>{if(!A.visible)return;if(!p.current)return;const t=p.current.findOne(".selection"),n=t?t.getClientRect():{width:0,height:0,x:0,y:0};if(n.width&&n.height){const t=[];p.current.find(".element").forEach((r=>{const a=r.getClientRect(),o=e.getElementById(r.id()),i=null==o?void 0:o.draggable,l=null==o?void 0:o.selectable;konva_1.default.Util.haveIntersection(n,a)&&i&&l&&t.push(o.top.id)}));const r=[...new Set(t)];e.selectElements(r)}A.visible=!1,R.current=!0}));return window.addEventListener("mousemove",t),window.addEventListener("touchmove",t),window.addEventListener("mouseup",n),window.addEventListener("touchend",n),()=>{window.removeEventListener("mousemove",t),window.removeEventListener("touchmove",t),window.removeEventListener("mouseup",n),window.removeEventListener("touchend",n)}}),[]);const C=n=>{if(e.activePage!==t&&t.select(),R.current)return;const r=n.evt.ctrlKey||n.evt.metaKey||n.evt.shiftKey,a=n.target.findAncestor(".elements-container"),o=n.target.findAncestor(".page-abs-container"),i=n.target.findAncestor("Transformer");if(!(r||a||i||o))return void e.selectElements([]);const l=n.target.findAncestor(".element",!0),c=e.getElementById(null==l?void 0:l.id()),s=null==c?void 0:c.top,d=null==s?void 0:s.id,u=e.selectedElementsIds.indexOf(d)>=0;d&&r&&!u?e.selectElements(e.selectedElementsIds.concat([d])):d&&r&&u?e.selectElements(e.selectedElementsIds.filter((e=>e!==d))):!d||r||u||e.selectElements([d])};(0,use_transformer_snap_1.useSnap)(f);const L=e.activePage===t,O=null==c?void 0:c.PageControls,P=null==c?void 0:c.Tooltip,M=1/e.scale,I=0/e.scale;return react_1.default.createElement("div",{ref:b,onDragOver:e=>e.preventDefault(),onDrop:n=>{if(n.preventDefault(),!p.current)return;p.current.setPointersPositions(n);const r=p.current.findOne(".elements-container").getRelativePointerPosition(),a=p.current.getPointerPosition(),o=p.current.getAllIntersections(a).map((e=>e.findAncestor(".element",!0))).filter(Boolean),i=[...new Set(o.reverse())].map((t=>e.getElementById(t.id()))),l=i[0];onDomDrop&&(onDomDrop(r,l,{elements:i,page:t}),onDomDrop=null)},style:{position:"relative",width:n+"px"},className:"polotno-page-container"+(L?" active-page":"")},react_1.default.createElement(react_konva_1.Stage,{ref:p,width:Math.min(n,4*window.innerWidth),height:Math.min(r,4*window.innerHeight),onClick:C,onTap:C,onMouseDown:X,onMouseMove:n=>{if(!n.evt.altKey&&v)return void E(null);if(!n.evt.altKey)return;const r=n.target.findAncestor(".element",!0),a=null==r?void 0:r.id();if(!e.selectedElements[0])return;if(e.selectedElementsIds.includes(a))return;const o=(0,math_1.getTotalClientRect)(e.selectedShapes),i=a?e.getElementById(a):{x:0,y:0,width:t.computedWidth,height:t.computedHeight,rotation:0},l=(0,math_1.getClientRect)(i),c=[];o.minX>l.maxX&&c.push({distance:o.minX-l.maxX,box1:o,box2:l,points:[{x:o.minX,y:o.minY+o.height/2},{x:l.maxX,y:o.minY+o.height/2},{x:l.maxX,y:l.minY+l.height/2}]}),o.maxX<l.minX&&c.push({distance:l.minX-o.maxX,box1:o,box2:l,points:[{x:o.maxX,y:o.minY+o.height/2},{x:l.minX,y:o.minY+o.height/2},{x:l.minX,y:l.minY+l.height/2}]}),o.minY>l.maxY&&c.push({box1:o,box2:l,distance:o.minY-l.maxY,points:[{x:o.minX+o.width/2,y:o.minY},{x:o.minX+o.width/2,y:l.maxY},{x:l.minX+l.width/2,y:l.maxY}]}),o.maxY<l.minY&&c.push({box1:o,box2:l,distance:l.minY-o.maxY,points:[{x:o.minX+o.width/2,y:o.maxY},{x:o.minX+o.width/2,y:l.minY},{x:l.minX+l.width/2,y:l.minY}]});o.minX>=l.minX&&o.maxX<=l.maxX&&o.minY>=l.minY&&o.maxY<=l.maxY&&(c.push({distance:o.minX-l.minX,box1:o,box2:l,points:[{x:o.minX,y:o.minY+o.height/2},{x:l.minX,y:o.minY+o.height/2},{x:l.minX,y:l.minY+l.height/2}]}),c.push({distance:l.maxX-o.maxX,box1:o,box2:l,points:[{x:o.maxX,y:o.minY+o.height/2},{x:l.maxX,y:o.minY+o.height/2},{x:l.maxX,y:l.minY+l.height/2}]}),c.push({box1:o,box2:l,distance:o.minY-l.minY,points:[{x:o.minX+o.width/2,y:o.minY},{x:o.minX+o.width/2,y:l.minY},{x:l.minX+l.width/2,y:l.minY}]}),c.push({box1:o,box2:l,distance:l.maxY-o.maxY,points:[{x:o.minX+o.width/2,y:o.maxY},{x:o.minX+o.width/2,y:l.maxY},{x:l.minX+l.width/2,y:l.maxY}]})),JSON.stringify(v)!==JSON.stringify(c)&&E(c)},onTouchStart:X,onDragStart:t=>{var n;const r=t.target.findAncestor(".element",!0);if(r){const a=e.getElementById(null==r?void 0:r.id()),o=null==a?void 0:a.top,i=null==o?void 0:o.id;!(e.selectedElementsIds.indexOf(i)>=0)&&i&&(e.selectElements([i]),t.target.stopDrag(),t.target.startDrag(t),null===(n=f.current)||void 0===n||n.startDrag(t))}v&&E(null)},pageId:t.id,style:{position:"relative"}},react_1.default.createElement(react_konva_1.Layer,null,react_1.default.createElement(Background,{width:n,height:r,fill:o}),react_1.default.createElement(react_konva_1.Group,{x:h,y:_,scaleX:e.scale,scaleY:e.scale,name:"page-container"},react_1.default.createElement(react_konva_1.Group,{name:"page-container-2"},react_1.default.createElement(react_konva_1.Group,{name:"page-background-group",x:u,y:u},react_1.default.createElement(PageBackground,{x:-t.bleed,y:-t.bleed,width:t.computedWidth+2*t.bleed,height:t.computedHeight+2*t.bleed,background:t.background,shadowBlur:10,shadowColor:"lightgrey",name:"page-background",preventDefault:!1,scale:e.scale})),react_1.default.createElement(react_konva_1.Group,{x:u,y:u,name:"elements-container",listening:!e.isPlaying},react_1.default.createElement(react_konva_1.Rect,{name:"elements-area",width:t.computedWidth,height:t.computedHeight,listening:!1}),react_1.default.createElement(Elements,{elements:t.children,store:e})),react_1.default.createElement(react_konva_1.Rect,{stroke:s,name:"bleed",strokeWidth:t.bleed,x:t.bleed/2,y:t.bleed/2,width:t.computedWidth+t.bleed,height:t.computedHeight+t.bleed,listening:!1,visible:t.bleed>0&&e.bleedVisible,hideInExport:!0}))),react_1.default.createElement(react_konva_1.Line,{name:"workspace-background",points:[0,0,n,0,n,r,0,r,0,0,h,_,h,r-_,n-h,r-_,n-h,_,h,_],listening:!1,closed:!0,fill:o}),react_1.default.createElement(react_konva_1.Group,{x:h,y:_,scaleX:e.scale,scaleY:e.scale},react_1.default.createElement(react_konva_1.Rect,{name:"page-highlight",hideInExport:!0,x:-M/2-I,y:-M/2-I,width:m+M+2*I,height:g+M+2*I,stroke:L&&e.pages.length>1?l:i,strokeWidth:2,listening:!1,strokeScaleEnabled:!1})),react_1.default.createElement(react_konva_1.Group,{x:h+u*e.scale,y:_+u*e.scale,scaleX:e.scale,scaleY:e.scale,name:"page-abs-container"},react_1.default.createElement(react_konva_1.Transformer,{ref:f,onDragStart:n=>{var r;(null===(r=n.evt)||void 0===r?void 0:r.altKey)&&d&&e.selectedElements.forEach((e=>{const n=e.clone({},{skipSelect:!0}),r=t.children.indexOf(e);t.setElementZIndex(n.id,r)})),e.history.startTransaction()},onDragEnd:()=>{e.history.endTransaction()},onTransformStart:()=>{e.history.startTransaction()},boundBoxFunc:(e,t)=>{const n=Math.abs(t.width)<1||Math.abs(t.height)<1,r=Math.abs(e.width)<1||Math.abs(e.height)<1;return n&&!r?e:t},onTransform:e=>{var t,n;const r=null===(t=f.current)||void 0===t?void 0:t.__getNodeRect(),a=null===(n=f.current)||void 0===n?void 0:n.getActiveAnchor();k({anchor:a,x:r.x,y:r.y,rotation:r.rotation,width:r.width,height:r.height})},onTransformEnd:t=>{k({}),e.history.endTransaction()},visible:!e.isPlaying}),v&&v.map((({points:t,distance:n,box1:r,box2:a},o)=>react_1.default.createElement(react_konva_1.Group,{name:"distances-container",hideInExport:!0,key:o,listening:!1},react_1.default.createElement(react_konva_1.Rect,Object.assign({},r,{stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1})),react_1.default.createElement(react_konva_1.Rect,Object.assign({},a,{stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1})),react_1.default.createElement(react_konva_1.Line,{points:[t[0].x,t[0].y,t[1].x,t[1].y],stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1}),react_1.default.createElement(react_konva_1.Line,{points:[t[1].x,t[1].y,t[2].x,t[2].y],stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1}),react_1.default.createElement(react_konva_1.Label,{x:(t[0].x+t[1].x)/2,y:(t[0].y+t[1].y)/2,offsetY:-10,scaleX:1/e.scale,scaleY:1/e.scale},react_1.default.createElement(react_konva_1.Tag,{cornerRadius:5,fill:"rgb(0, 161, 255)",pointerDirection:"down"}),react_1.default.createElement(react_konva_1.Text,{align:"center",verticalAlign:"middle",fill:"white",padding:5,text:(0,unit_1.pxToUnitString)({unit:e.unit,dpi:e.dpi,px:n})}))))),t._rendering&&react_1.default.createElement(react_konva_1.Group,null,react_1.default.createElement(react_konva_1.Rect,{width:m,height:g,fill:"rgba(255,255,255,0.9)"}),react_1.default.createElement(react_konva_1.Text,{text:"Rendering...",fontSize:60,width:m,height:g,align:"center",verticalAlign:"middle"})),P&&react_1.default.createElement(P,{components:c,store:e,page:t,stageRef:p})),react_1.default.createElement(TransformLabels,Object.assign({},y,{store:e})),react_1.default.createElement(Selection,{selection:A}),validate_key_1.shouldShowCredit.value&&react_1.default.createElement(react_konva_1.Text,{text:"Powered by polotno.com",fontSize:14,fill:"rgba(0,0,0,0.6)",x:n-170,y:r-18,onMouseEnter:e=>{e.target.getStage().container().style.cursor="pointer"},onMouseLeave:e=>{e.target.getStage().container().style.cursor=""},onTouchStart:e=>{e.cancelBubble=!0},onMouseDown:e=>{e.cancelBubble=!0},onClick:()=>{window.open("https://polotno.com")},onTap:()=>{window.open("https://polotno.com")}}),react_1.default.createElement(react_konva_1.Group,{name:"line-guides"}))),x&&L&&O&&react_1.default.createElement(O,{store:e,page:t,xPadding:h,yPadding:_}))}));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "polotno",
3
- "version": "2.4.15",
3
+ "version": "2.4.16",
4
4
  "description": "Design Editor Framework",
5
5
  "author": "Anton Lavrenov",
6
6
  "keywords": [
package/pages-timeline/pages-timeline.js CHANGED
@@ -44,4 +44,4 @@
44
44
  }
45
45
 
46
46
  ${(0,screen_1.mobileStyle)("\n display: none;\n ")}
47
- `,HideButton=({onClick:e})=>react_1.default.createElement(HideButtonContainer,{onClick:e},react_1.default.createElement("svg",{width:"96",height:"16",viewBox:"0 0 96 16",xmlns:"http://www.w3.org/2000/svg"},react_1.default.createElement("path",{className:"fill stroke",d:"M 95.865 16 C 93.555 14.8571 92.4 12.5714 88.6116 8.9143 C 88.4008 8.6286 88.242 8.4571 88.0054 8.3429 L 88.011 8.2286 C 85.701 5.9429 83.622 3.8857 81.1965 2.4 C 79.002 1.1429 76.3455 0.3429 72.765 0.1143 V 0 H 25.41 C 21.1365 0 18.1335 0.8 15.477 2.2857 C 12.936 3.7714 10.9725 5.8286 8.5073 8.2286 L 8.547 8.24 C 8.316 8.4571 8.085 8.6278 7.8393 8.831 C 4.0161 12.6741 3.465 14.8571 0 16"})),react_1.default.createElement("div",{className:"pointer"},"<")),Page=(0,mobx_react_lite_1.observer)((({page:e})=>{const[t,r]=react_1.default.useState(null);react_1.default.useEffect((()=>{const t=async()=>{const t=await e.store.toDataURL({pageId:e.id,pixelRatio:.1});r(t)},a=(0,mobx_state_tree_1.onSnapshot)(e,t);return t(),()=>{a()}}),[]);const a=react_1.default.useRef(null),o=(t,r)=>{t.preventDefault();const o=t=>{t.preventDefault();const{clientX:o}=t,{left:l,width:i}=a.current.getBoundingClientRect(),n=(o-l)/i;"start"===r?e.set({startTime:Math.min(e.endTime,Math.max(0,n))}):"end"===r&&e.set({endTime:Math.min(1,Math.max(e.startTime,n))})};window.addEventListener("mousemove",o),window.addEventListener("mouseup",(()=>{window.removeEventListener("mousemove",o)}))};return react_1.default.createElement("div",null,react_1.default.createElement("div",{style:{width:.01*e.duration+"px",height:"40px",display:"flex",position:"relative",overflow:"hidden",margin:"3px"},ref:a},react_1.default.createElement("img",{src:t,style:{width:"100%",height:"100%"}}),react_1.default.createElement("div",{style:{position:"absolute",top:"0",left:"0px",width:"10px",height:"100%",borderRadius:"0px",backgroundColor:"rgb(0, 161, 255, 0.9)",cursor:"ew-resize"},onMouseDown:e=>{o(e,"start")}}),react_1.default.createElement("div",{style:{position:"absolute",top:"0",right:"0px",width:"10px",height:"100%",borderRadius:"0px",backgroundColor:"rgb(0, 161, 255, 0.9)",cursor:"ew-resize"},onMouseDown:e=>{o(e,"end")}})))}));exports.Pages=(0,mobx_react_lite_1.observer)((({store:e})=>react_1.default.createElement("div",{style:{display:"flex"}},e.pages.map((e=>react_1.default.createElement(Page,{key:e.id,page:e})))))),exports.PagesTimeline=(0,mobx_react_lite_1.observer)((({store:e})=>react_1.default.createElement("div",{className:"bp5-navbar",style:{display:"flex"}},react_1.default.createElement(core_1.Button,{icon:react_1.default.createElement(icons_1.Play,null),onClick:()=>{e.play()}},"Play"),react_1.default.createElement(exports.Pages,{store:e}),react_1.default.createElement(HideButton,null))));
47
+ `,HideButton=({onClick:e})=>react_1.default.createElement(HideButtonContainer,{onClick:e},react_1.default.createElement("svg",{width:"96",height:"16",viewBox:"0 0 96 16",xmlns:"http://www.w3.org/2000/svg"},react_1.default.createElement("path",{className:"fill stroke",d:"M 95.865 16 C 93.555 14.8571 92.4 12.5714 88.6116 8.9143 C 88.4008 8.6286 88.242 8.4571 88.0054 8.3429 L 88.011 8.2286 C 85.701 5.9429 83.622 3.8857 81.1965 2.4 C 79.002 1.1429 76.3455 0.3429 72.765 0.1143 V 0 H 25.41 C 21.1365 0 18.1335 0.8 15.477 2.2857 C 12.936 3.7714 10.9725 5.8286 8.5073 8.2286 L 8.547 8.24 C 8.316 8.4571 8.085 8.6278 7.8393 8.831 C 4.0161 12.6741 3.465 14.8571 0 16"})),react_1.default.createElement("div",{className:"pointer"},"<")),Page=(0,mobx_react_lite_1.observer)((({page:e,scale:t})=>{const[r,a]=react_1.default.useState(null),l=e.store.activePage===e;react_1.default.useEffect((()=>{const t=async()=>{const t=await e.store.toDataURL({pageId:e.id,pixelRatio:.1});a(t)};let r=null;const l=(0,mobx_state_tree_1.onSnapshot)(e.children,(()=>{r||(r=setTimeout((()=>{t(),r=null}),1e3))}));return t(),()=>{clearTimeout(r),l()}}),[]);const o=react_1.default.useRef(null);return react_1.default.createElement("div",{style:{width:e.duration*t+"px",height:"60px",display:"flex",position:"relative",overflow:"hidden",borderRadius:"15px",overflow:"hidden"},ref:o},react_1.default.createElement("div",{style:{width:"100%",height:"100%",borderRadius:"10px",backgroundImage:`url("${r}")`,backgroundRepeat:"repeat-x",backgroundSize:"auto 100%"},onClick:()=>{e.store.selectPage(e.id)}}),l&&react_1.default.createElement("div",{style:{position:"absolute",top:"0",left:"0px",bottom:"0px",right:"0px",borderRadius:"15px",border:"2px solid rgb(0, 161, 255, 0.9)"}}),react_1.default.createElement("div",{style:{position:"absolute",top:"50%",right:"0px",width:"8px",height:"50%",transform:"translateY(-50%) translateX(-3px)",borderRadius:"5px",backgroundColor:"rgb(0, 161, 255, 0.9)",cursor:"ew-resize"},onMouseDown:t=>{((t,r)=>{t.preventDefault();const a=t=>{t.preventDefault();const a="start"===r?7:-7,{clientX:l}=t,{left:i,width:n}=o.current.getBoundingClientRect(),s=(l-i-a)/n;"start"===r||"end"===r&&e.set({duration:Math.max(1e3,s*e.duration)})};window.addEventListener("mousemove",a),window.addEventListener("mouseup",(()=>{window.removeEventListener("mousemove",a)}))})(t,"end")}}))})),CurrentTime=(0,mobx_react_lite_1.observer)((({store:e,scale:t})=>react_1.default.createElement("div",{style:{position:"absolute",left:e.currentTime*t+"px",top:"-5px",width:"2px",height:"calc(100% + 10px)",backgroundColor:"rgb(0, 161, 255, 0.9)"}})));exports.Pages=(0,mobx_react_lite_1.observer)((({store:e,scale:t})=>react_1.default.createElement("div",{style:{display:"flex",position:"relative"}},e.pages.map((e=>react_1.default.createElement(Page,{key:e.id,page:e,scale:t}))),react_1.default.createElement(CurrentTime,{store:e,scale:t})))),exports.PagesTimeline=(0,mobx_react_lite_1.observer)((({store:e})=>react_1.default.createElement("div",{className:"bp5-navbar",style:{display:"flex",padding:"5px",height:"auto"}},react_1.default.createElement("div",{style:{width:"100%",position:"relative",height:"100px"}},react_1.default.createElement("div",{style:{position:"absolute",top:0,left:0,right:0,bottom:0,overflowX:"auto",padding:"10px"}},react_1.default.createElement("div",{style:{height:"60px",display:"flex"}},react_1.default.createElement("div",{style:{width:"80px"}},react_1.default.createElement(core_1.Button,{icon:e.isPlaying?react_1.default.createElement(icons_1.Pause,null):react_1.default.createElement(icons_1.Play,null),onClick:()=>{e.isPlaying?e.stop():e.play()},minimal:!0,style:{width:"100%",height:"100%"}})),react_1.default.createElement(exports.Pages,{store:e,scale:.02}),react_1.default.createElement(core_1.Button,{icon:react_1.default.createElement(icons_1.Plus,null),onClick:()=>{e.addPage()},minimal:!0})),react_1.default.createElement(HideButton,null))))));
package/polotno.bundle.js CHANGED
@@ -110,7 +110,7 @@ For more info see: https://github.com/konvajs/react-konva/issues/194
110
110
  `}(e,n):(console.error(`Polotno error: Can not convert ${e.subType} figure to svg.`),aI(e))}let aF=e=>P(({element:t,fillProps:n,strokeProps:r})=>{let i=e({width:t.a.width,height:t.a.height,cornerRadius:t.cornerRadius}),o=1,a=1;"string"!=typeof i&&(o=i.scaleX,a=i.scaleY,i=i.path);let s=l(v).useRef(null);return(0,p.jsxs)(p.Fragment,{children:[(0,p.jsx)(r$,{width:t.width,height:t.height,fill:"transparent"}),(0,p.jsx)(rZ,{...n,ref:s,data:i,scaleX:o,scaleY:a}),(0,p.jsx)(rG,{clipFunc:e=>{let t=s.current;if(t){var n=t.dataArray;e.beginPath();for(var r=0;r<n.length;r++){var i=n[r].command,o=n[r].points;switch(i){case"L":e.lineTo(o[0],o[1]);break;case"M":e.moveTo(o[0],o[1]);break;case"C":e.bezierCurveTo(o[0],o[1],o[2],o[3],o[4],o[5]);break;case"Q":e.quadraticCurveTo(o[0],o[1],o[2],o[3]);break;case"A":var a=o[0],l=o[1],u=o[2],c=o[3],d=o[4],h=o[5],f=o[6],p=o[7],g=u>c?u:c,m=u>c?1:u/c,v=u>c?c/u:1;e.translate(a,l),e.rotate(f),e.scale(m,v),e.arc(0,0,g,d,d+h,1-p),e.scale(1/m,1/v),e.rotate(-f),e.translate(-a,-l);break;case"z":e.closePath()}}}},scaleX:o,scaleY:a,children:(0,p.jsx)(rZ,{...r,x:0,y:0,data:i,strokeWidth:2*r.strokeWidth,dash:r.dash.map(e=>e)})})]})}),az={},aB=e=>(az[e]||(az[e]=aF(aM[e]||aI)),az[e]),aU={text:iG,image:os,svg:os,line:aw,video:aR,figure:P(({element:e,store:t})=>{let n=e.selectable||"admin"===t.role,r=iL(),[i,o]=l(v).useState(!1),a=t.selectedElements.indexOf(e)>=0&&1===t.selectedElements.length,s=Math.min(e.strokeWidth,e.width/2,e.height/2),u=Math.max(0,Math.min(e.width/2,e.height/2,e.cornerRadius)),c=il(e,e.a.fill,"fill"),d={width:e.a.width,height:e.a.height,...c,cornerRadius:u,opacity:e.animated("opacity"),shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,listening:n,preventDefault:!r||a,hideInExport:!e.showInExport},h=il(e,e.stroke,"stroke"),f={visible:s>0,x:s/2,y:s/2,width:e.a.width-s,height:e.a.height-s,...h,strokeWidth:s,cornerRadius:Math.max(0,u-s),dash:e.dash.map(e=>e*s),opacity:e.animated("opacity"),hideInExport:!e.showInExport,listening:!1},g=aB(e.subType)||rG;return(0,p.jsxs)(l(v).Fragment,{children:[(0,p.jsx)(rG,{id:e.id,x:e.a.x,y:e.a.y,rotation:e.a.rotation,opacity:e.a.opacity,draggable:r?e.draggable&&a:e.draggable,name:"element",onMouseEnter:()=>{o(!0)},onMouseLeave:()=>{o(!1)},onDragMove:t=>{e.set({x:t.target.x(),y:t.target.y()})},onDragEnd:t=>{e.set({x:t.target.x(),y:t.target.y()})},onTransform:t=>{let n=t.target.scale();t.target.scaleX(1),t.target.scaleY(1),e.set({width:e.width*n.x,height:e.height*n.y,x:t.target.x(),y:t.target.y(),rotation:t.target.rotation()})},children:(0,p.jsx)(g,{element:e,fillProps:d,strokeProps:f})}),i&&!a&&(0,p.jsx)(ij,{element:e})]})}),group:P(e=>{let{element:t,store:n}=e,{children:r}=t,i=t.selectable||"admin"===n.role;return(0,p.jsx)(rG,{opacity:t.opacity,listening:i,children:r.map(t=>(0,v.createElement)(aH,{...e,key:t.id,store:n,element:t}))})})},aH=P(e=>{let t=aU[e.element.type];return("text"===e.element.type&&iP.htmlRenderEnabled&&(t=ac),e.element.visible)?t?(0,p.jsx)(t,{...e}):(console.error("Can not find component for "+e.element.type),null):null});var y=h("2SBKn");let aV="https://api.polotno.com/api",aq={},aG=(e,t)=>{aq[e]||(aq[e]=!0,console.error(t))},aW=(e,t,n)=>e.replace(RegExp(t,"g"),n),a$=`API for iconscout is provided as a demonstration.
111
111
  For production usage you have to use your own API endpoint.
112
112
  https://iconscout.com/developers, https://iconscout.com/legal/api-license-development-agreement
113
- https://polotno.com/docs/server-api`,aK={unsplashList:({query:e,page:t=1})=>`${aV}/get-unsplash?query=${e}&per_page=20&page=${t}&KEY=${a6()}`,unsplashDownload:e=>`${aV}/download-unsplash?id=${e}&KEY=${a6()}`,svgapiList:({query:e,page:t=0})=>`${aV}/get-svgapi?query=${e}&page=${t}&per_page=20&KEY=${a6()}`,svgapiDownload:e=>`${aV}/download-svgapi?path=${e}&KEY=${a6()}`,iconscoutList:({query:e,page:t=1})=>(aG("iconscout",a$),`${aV}/get-iconscout?query=${e}&page=${t}&KEY=${a6()}`),iconscoutDownload:e=>(aG("iconscout",a$),`${aV}/download-iconscout?uuid=${e}&KEY=${a6()}`),templateList:({query:e,page:t=1,sizeQuery:n})=>`${aV}/get-templates?${n}&query=${e}&per_page=30&page=${t}&KEY=${a6()}`},aY=()=>`${aV}/get-google-fonts?KEY=${a6()}`,aX=e=>`https://api.polotno.com/google-fonts-previews/black/${aW(e," ","-")}.png`,aZ=()=>`${aV}/remove-image-background?KEY=${a6()}`,aQ=e=>aK.templateList(e),aJ=()=>`${aV}/get-text-templates?KEY=${a6()}`,a0=e=>aK.unsplashList(e),a1=e=>aK.unsplashDownload(e),a2=y.observable({value:!1}),a3=y.action(()=>{a2.value=!0}),a5="",a6=()=>a5||"",a4=window.location.origin,a8=navigator.userAgent.indexOf("Headless")>-1,a9=navigator.userAgent.indexOf("Electron")>-1;"file://"===a4&&a8&&(a4="headless"),"file://"===a4&&a9&&(a4="electron");let a7=`%cPolotno error! Current domain is not allowed. It may lead to unexpected behavior and stop working. Please add "${a4}" here: https://polotno.com/cabinet`;async function le(e){for(let n=0;n<5;n++)try{var t;let n=await fetch(aV+"/validate-key",{method:"POST",body:JSON.stringify({key:e,site:location.host})});if(!e)return console.warn("Polotno API is initialized without API key. It may lead to unexpected behavior and stop working. Please create API key here: https://polotno.com/cabinet"),!1;if(200!==n.status){await new Promise(e=>setTimeout(e,3e3));continue}let r=await n.json();return r.is_valid||console.warn("Polotno API key is not valid. Please get new API key here: https://polotno.com/cabinet"),r.is_paid||console.log("%cPolotno Free Version. Development or non-commercial usage only. https://polotno.com/","background: rgb(0, 161, 255); color: white; padding: 5px; margin: 5px;"),r.is_domain_valid||console.log(a7,"background: rgba(247, 101, 68, 1); color: white; padding: 5px; margin: 5px;"),t=r.remove_background_enabled,iP.removeBackgroundEnabled=t,r.is_paid||!1}catch(e){await new Promise(e=>setTimeout(e,3e3))}return console.error("Can not validate Polotno API key. Please report to anton@polotno.com immediately."),!0}async function lt(e,t){a5=e,(!await le(e)||t)&&a3()}let ln=({px:e,unit:t="px",dpi:n})=>{switch(t){case"pt":default:return e;case"mm":return e/(n/25.4);case"cm":return e/(n/2.54);case"in":return e/n}},lr=({px:e,precious:t=2,dpi:n=72,unit:r="px"})=>parseFloat(ln({px:e,dpi:n,unit:r}).toFixed(t)),li=({unitVal:e,dpi:t,unit:n})=>e/ln({px:1,unit:n,dpi:t}),lo=e=>{let t=parseFloat(ln(e).toFixed(1));switch(e.unit){case"pt":return`${Math.round(t)}pt`;case"mm":return`${t}mm`;case"cm":return`${t}cm`;case"in":return`${t}in`;default:return`${Math.round(t)}px`}},la=l(A).DD._drag;window.removeEventListener("mousemove",la),l(A).DD._drag=function(e){(0,y.runInAction)(()=>{la.call(this,e)})},window.addEventListener("mousemove",l(A).DD._drag);let ll=new(l(A)).Group;ll.add(new(l(A)).Rect({width:20,height:20,fill:"white"})),ll.add(new(l(A)).Path({scaleX:20/24,scaleY:20/24,data:"M4.98313549,11.0001422 C5.49589839,10.9914935 5.92501998,11.3703506 5.99116425,11.8666444 L5.99985778,11.9831355 L6.00348884,12.2068855 C6.11245031,15.4321748 8.76323537,17.9999971 11.9999971,17.9999971 C12.1869612,17.9999971 12.3726725,17.9914753 12.5567465,17.9745765 L12.2928932,17.7071068 C11.9023689,17.3165825 11.9023689,16.6834175 12.2928932,16.2928932 C12.6834175,15.9023689 13.3165825,15.9023689 13.7071068,16.2928932 L15.7071068,18.2928932 C16.0976311,18.6834175 16.0976311,19.3165825 15.7071068,19.7071068 L13.7071068,21.7071068 C13.3165825,22.0976311 12.6834175,22.0976311 12.2928932,21.7071068 C11.9023689,21.3165825 11.9023689,20.6834175 12.2928932,20.2928932 L12.6111505,19.9769552 C12.4086045,19.9922816 12.2047796,19.9999971 11.9999971,19.9999971 C7.7687005,19.9999971 4.28886152,16.7094374 4.01666425,12.5105203 L4.00420123,12.2575143 L4.00014222,12.0168645 C3.9908282,11.4646583 4.43092928,11.0094562 4.98313549,11.0001422 Z M11.7071068,2.29289322 C12.0675907,2.65337718 12.0953203,3.22060824 11.7902954,3.61289944 L11.7071068,3.70710678 L11.3891629,4.0230186 C11.5916051,4.00770767 11.7953244,4 12,4 C16.418278,4 20,7.581722 20,12 C20,12.5522847 19.5522847,13 19,13 C18.4477153,13 18,12.5522847 18,12 C18,8.6862915 15.3137085,6 12,6 C11.8129339,6 11.6271216,6.00853145 11.4429483,6.02544919 L11.7071068,6.29289322 C12.0976311,6.68341751 12.0976311,7.31658249 11.7071068,7.70710678 C11.3466228,8.06759074 10.7793918,8.09532028 10.3871006,7.79029539 L10.2928932,7.70710678 L8.29289322,5.70710678 C7.93240926,5.34662282 7.90467972,4.77939176 8.20970461,4.38710056 L8.29289322,4.29289322 L10.2928932,2.29289322 C10.6834175,1.90236893 11.3165825,1.90236893 11.7071068,2.29289322 Z",fill:"black"}));let ls=ll.toCanvas({pixelRatio:2,width:20,height:20}),lu={enabledAnchors:["top-left","top-center","top-right","middle-left","bottom-left","bottom-right","bottom-center","middle-right"],borderEnabled:!0,rotateEnabled:!0,rotationSnaps:[0,45,90,135,180,225,270,315],ignoreStroke:!0,flipEnabled:!1,anchorStrokeWidth:2,borderStrokeWidth:2,rotateAnchorOffset:30,anchorStyleFunc:e=>{e.hasName("rotater")&&e.setAttrs({width:20,height:20,cornerRadius:10,offsetX:10,offsetY:10,fillPatternImage:ls,fillPatternScaleX:.5,fillPatternScaleY:.5,fillPriority:"pattern",fillPatternRepeat:"no-repeat"})}},lc={text:{enabledAnchors:["top-left","top-right","middle-left","bottom-left","bottom-right","middle-right"]},svg:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]},line:{enabledAnchors:[],borderEnabled:!1,rotateEnabled:!1},image:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]},many:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]},group:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]}},ld=e=>(0,p.jsx)(r$,{...e,preventDefault:!1}),lh=({url:e,...t})=>{let[n,r]=l(r1)(e,"anonymous"),i=n?function(e,t,n="scale"){let r,i;let o=t.width/t.height;o>=e.width/e.height?(r=e.width,i=e.width/o):(r=e.height*o,i=e.height);let a=0,l=0;return"left-top"===n?(a=0,l=0):"left-middle"===n?(a=0,l=(e.height-i)/2):"left-bottom"===n?(a=0,l=e.height-i):"center-top"===n?(a=(e.width-r)/2,l=0):"center-middle"===n?(a=(e.width-r)/2,l=(e.height-i)/2):"center-bottom"===n?(a=(e.width-r)/2,l=e.height-i):"right-top"===n?(a=e.width-r,l=0):"right-middle"===n?(a=e.width-r,l=(e.height-i)/2):"right-bottom"===n?(a=e.width-r,l=e.height-i):"scale"===n?(a=0,l=0,r=e.width,i=e.height):console.error(Error("Unknown clip position property - "+n)),{cropX:a,cropY:l,cropWidth:r,cropHeight:i}}(n,{width:t.width,height:t.height},"center-middle"):{};return oo(r,"background"),(0,p.jsx)(rY,{image:n,...t,...i})},lf=e=>(0,p.jsx)(r$,{...e}),lp=e=>{let{background:t,scale:n,borderColor:r,...i}=e,o=l(v).useMemo(()=>!!l(A).Util.colorToRGBA(t),[t]),a=l(v).useMemo(()=>{let e=document.createElement("canvas");e.width=60,e.height=60;let t=e.getContext("2d");return t&&(t.fillStyle="black",t.fillRect(30,0,30,30),t.fillRect(0,30,30,30)),e},[]);return(0,p.jsxs)(l(v).Fragment,{children:[(0,p.jsx)(r$,{fillPatternImage:a,...i,opacity:.1,hideInExport:!0}),o?(0,p.jsx)(lf,{fill:t,...i}):(0,p.jsx)(lh,{url:t,...i})]})},lg=P(({selection:e})=>e.visible?(0,p.jsx)(r$,{name:"selection",x:Math.min(e.x1,e.x2),y:Math.min(e.y1,e.y2),width:Math.abs(e.x1-e.x2),height:Math.abs(e.y1-e.y2),fill:"rgba(0, 161, 255, 0.3)"}):null),lm=P(({x:e,y:t,width:n,height:r,rotation:i,anchor:o,store:a})=>{let s=ah({x:e,y:t,width:n,height:r,rotation:l(A).Util.radToDeg(i)});if(void 0===o)return null;let u=(r/2+70)*Math.cos(i-Math.PI/2),c=(r/2+70)*Math.sin(i-Math.PI/2),d=lr({unit:a.unit,dpi:a.dpi,px:n/a.scale,precious:"px"===a.unit?0:1})+" x "+lr({unit:a.unit,dpi:a.dpi,px:r/a.scale,precious:"px"===a.unit?0:1})+("px"===a.unit?"":" "+a.unit);return(0,p.jsxs)(p.Fragment,{children:[(0,p.jsxs)(rW,{x:(s.minX+s.maxX)/2+u,y:(s.minY+s.maxY)/2+c,offsetX:14,offsetY:14,visible:"rotater"===o,children:[(0,p.jsx)("Tag",{cornerRadius:5,fill:"rgb(0, 161, 255)"}),(0,p.jsx)(rX,{align:"center",verticalAlign:"middle",fill:"white",padding:8,text:Math.round(l(A).Util.radToDeg(i)).toString()+"°"})]}),(0,p.jsxs)(rW,{x:(s.minX+s.maxX)/2,y:s.maxY+20,visible:"rotater"!==o,children:[(0,p.jsx)("Tag",{cornerRadius:5,fill:"rgb(0, 161, 255)",pointerDirection:"up",pointerHeight:0,pointerWidth:0}),(0,p.jsx)(rX,{align:"center",verticalAlign:"middle",fill:"white",padding:8,text:d})]})]})}),lv=P(({elements:e,store:t})=>{let n=e.filter(e=>e.alwaysOnTop),r=e.filter(e=>!e.alwaysOnTop).concat(n);return(0,p.jsx)(l(v).Fragment,{children:r.map(e=>(0,p.jsx)(aH,{store:t,element:e,onClick:()=>{console.warn("Polotno warning: onClick callback is deprecated. Just stop using it. Polotno will do selection automatically.")}},e.id))})}),ly=null,lb=e=>{ly=e};var lw=P(({store:e,page:t,width:n,height:r,pageControlsEnabled:i,backColor:o,pageBorderColor:a,activePageBorderColor:s,components:u,bleedColor:c,altCloneEnabled:d})=>{var h;let f=e.bleedVisible?t.bleed:0,g=t.computedWidth+2*f,m=t.computedHeight+2*f,b=(n-g*e.scale)/2,w=(r-m*e.scale)/2,x=l(v).useRef(null),_=l(v).useRef(null),E=l(v).useRef(null),[S,C]=l(v).useState(null),[O,k]=l(v).useState({}),P=e.selectedElements.find(e=>e._cropModeEnabled),T=e.selectedShapes.filter(e=>!e.resizable).length>0,N=e.selectedShapes.filter(e=>!e.draggable).length>0,j=e.selectedElements.filter(e=>!e.visible).length>0;l(v).useLayoutEffect(()=>{if(!x.current)return;let t=x.current.getStage(),n=e.selectedShapes.map(e=>e._cropModeEnabled?null:t.findOne("#"+e.id)).filter(e=>e),r=1===e.selectedElements.length&&e.selectedElements[0]?.type||"many";lc[r]?(x.current.setAttrs({...lu,...lc[r]}),"svg"!==r&&"image"!==r||e.selectedElements[0].keepRatio||x.current.setAttrs({enabledAnchors:lu.enabledAnchors}),"text"===r&&iP.textVerticalResizeEnabled&&x.current.setAttrs({enabledAnchors:lc.text.enabledAnchors?.concat(["bottom-center"])})):x.current.setAttrs(lu),T&&x.current.enabledAnchors([]),N&&x.current.rotateEnabled(!1),n.find(e=>e?.isDragging())&&n.forEach(e=>{e.isDragging()||e?.startDrag()}),x.current.nodes(n),x.current.getLayer()?.batchDraw()},[e.selectedElements,P,T,j,N]);let R=(h=()=>({visible:!1,x1:0,y1:0,x2:0,y2:0}),(0,v.useState)(function(){return(0,y.observable)(h(),void 0,{autoBind:!0})})[0]),I=l(v).useRef(!1),L=iL(),M=(0,y.action)(e=>{if(L)return;I.current=!1;let t=e.target.findAncestor(".elements-container"),n=e.target.findAncestor("Transformer"),r=e.target.findAncestor(".page-abs-container");if(t||n||r)return;let i=e.target.getStage()?.getPointerPosition();i&&(R.visible=!0,R.x1=i.x,R.y1=i.y,R.x2=i.x,R.y2=i.y,e.target.getStage()?.getPointersPositions().length>=2&&(R.visible=!1))});l(v).useEffect(()=>{let t=(0,y.action)(e=>{if(!R.visible)return;_.current?.setPointersPositions(e);let t=_.current?.getPointerPosition()||{x:R.x2,y:R.y2};R.x2=t.x,R.y2=t.y}),n=(0,y.action)(()=>{if(!R.visible||!_.current)return;let t=_.current.findOne(".selection"),n=t?t.getClientRect():{width:0,height:0,x:0,y:0};if(n.width&&n.height){let t=[];_.current.find(".element").forEach(r=>{let i=r.getClientRect(),o=e.getElementById(r.id()),a=o?.draggable,s=o?.selectable;l(A).Util.haveIntersection(n,i)&&a&&s&&t.push(o.top.id)});let r=[...new Set(t)];e.selectElements(r)}R.visible=!1,I.current=!0});return window.addEventListener("mousemove",t),window.addEventListener("touchmove",t),window.addEventListener("mouseup",n),window.addEventListener("touchend",n),()=>{window.removeEventListener("mousemove",t),window.removeEventListener("touchmove",t),window.removeEventListener("mouseup",n),window.removeEventListener("touchend",n)}},[]);let D=n=>{if(e.activePage!==t&&t.select(),I.current)return;let r=n.evt.ctrlKey||n.evt.metaKey||n.evt.shiftKey,i=n.target.findAncestor(".elements-container"),o=n.target.findAncestor(".page-abs-container"),a=n.target.findAncestor("Transformer");if(!r&&!i&&!a&&!o){e.selectElements([]);return}let l=n.target.findAncestor(".element",!0),s=e.getElementById(l?.id()),u=s?.top,c=u?.id,d=e.selectedElementsIds.indexOf(c)>=0;c&&r&&!d?e.selectElements(e.selectedElementsIds.concat([c])):c&&r&&d?e.selectElements(e.selectedElementsIds.filter(e=>e!==c)):!c||r||d||e.selectElements([c])};!function(e){let t=e=>e.hasName("element")||e.hasName("page-background")||e.hasName("elements-area");function n(n){let r=e.current?.getStage();var i=[],o=[];return r.find(t).forEach(e=>{if(!(n.indexOf(e)>=0)){var t=e.getClientRect({skipShadow:!0,skipStroke:!0});i.push(t.x,t.x+t.width,t.x+t.width/2),o.push(t.y,t.y+t.height,t.y+t.height/2)}}),{vertical:i,horizontal:o}}function r(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(l(A)).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(l(A)).Line({points:[e.lineGuide,-6e3,e.lineGuide,6e3],stroke:"rgb(0, 161, 255)",strokeWidth:1,name:"guid-line",dash:[4,6]});r?.add(t)}})}let i=e=>{e.target.getLayer().children.find(e=>"line-guides"===e.name()).destroyChildren();var t=ap(n(e.target.nodes()),function(e){let t=e.__getNodeRect(),n=ah({...t,rotation:l(A).Util.radToDeg(t.rotation)}),r=e.getAbsolutePosition();return{vertical:[{guide:n.x,offset:r.x-n.x,snap:"start"},{guide:n.x+n.width/2,offset:r.x-n.x-n.width/2,snap:"center"},{guide:n.x+n.width,offset:r.x-n.x-n.width,snap:"end"}],horizontal:[{guide:n.y,offset:r.y-n.y,snap:"start"},{guide:n.y+n.height/2,offset:r.y-n.y-n.height/2,snap:"center"},{guide:n.y+n.height,offset:r.y-n.y-n.height,snap:"end"}]}}(e.target));if(!t.length)return;r(t);let i=e.target.getAbsolutePosition(),o={...i};t.forEach(e=>{switch(e.snap){case"start":case"center":case"end":switch(e.orientation){case"V":o.x=e.lineGuide+e.offset;break;case"H":o.y=e.lineGuide+e.offset}}});let a=o.x-i.x,s=o.y-i.y;e.evt.ctrlKey||e.evt.metaKey||e.target.nodes().forEach(e=>{let t=e.getAbsolutePosition();e.setAbsolutePosition({x:t.x+a,y:t.y+s})})},o=(t,i,o)=>{let a=e.current,l=a.getLayer();if(l.children.find(e=>"line-guides"===e.name()).destroyChildren(),"rotater"===a.getActiveAnchor()||Math.sqrt(Math.pow(i.x-t.x,2)+Math.pow(i.y-t.y,2))>50||!l)return i;var s=ap(n(a.nodes()),{vertical:[{guide:i.x,offset:0,snap:"start"}],horizontal:[{guide:i.y,offset:0,snap:"start"}]});if(!s.length||(r(s),o.ctrlKey||o.metaKey))return i;let u=i.x,c=i.x;s.forEach(e=>{switch(e.orientation){case"V":u=e.lineGuide;break;case"H":c=e.lineGuide}});let d=Math.abs(i.x-u),h=Math.abs(i.y-c),f=d<10,p=h<10;return f&&!p?{x:u,y:t.y}:p&&!f?{x:t.x,y:c}:f&&p?{x:u,y:c}:i},a=e=>{if(!e.target)return;let t=e.target.getLayer();t.children.find(e=>"line-guides"===e.name()).destroyChildren(),t.batchDraw()};l(v).useEffect(()=>{e.current&&(e.current.anchorDragBoundFunc(o),e.current.on("dragstart",()=>{setTimeout(()=>{let e=[...l(A).DD._dragElements.entries()];e.reverse(),l(A).DD._dragElements.clear(),e.forEach(([e,t])=>{l(A).DD._dragElements.set(e,t)})})}),e.current.on("dragmove",i),e.current.on("dragend",a),e.current.on("transformend",a),e.current.on("transform",t=>{t.evt.ctrlKey||t.evt.metaKey?e.current?.rotationSnapTolerance(0):e.current?.rotationSnapTolerance(5)}))},[])}(x);let F=e.activePage===t,z=u?.PageControls,B=u?.Tooltip,U=1/e.scale,H=0/e.scale;return(0,p.jsxs)("div",{ref:E,onDragOver:e=>e.preventDefault(),onDrop:n=>{if(n.preventDefault(),!_.current)return;_.current.setPointersPositions(n);let r=_.current.findOne(".elements-container").getRelativePointerPosition(),i=_.current.getPointerPosition(),o=_.current.getAllIntersections(i).map(e=>e.findAncestor(".element",!0)).filter(Boolean),a=[...new Set(o.reverse())].map(t=>e.getElementById(t.id())),l=a[0];ly&&(ly(r,l,{elements:a,page:t}),ly=null)},style:{position:"relative",width:n+"px"},className:"polotno-page-container"+(F?" active-page":""),children:[(0,p.jsx)(r0,{ref:_,width:Math.min(n,4*window.innerWidth),height:Math.min(r,4*window.innerHeight),onClick:D,onTap:D,onMouseDown:M,onMouseMove:n=>{if(!n.evt.altKey&&S){C(null);return}if(!n.evt.altKey)return;let r=n.target.findAncestor(".element",!0),i=r?.id();if(!e.selectedElements[0]||e.selectedElementsIds.includes(i))return;let o=af(e.selectedElements),a=ah(i?e.getElementById(i):{x:0,y:0,width:t.computedWidth,height:t.computedHeight,rotation:0}),l=[];o.minX>a.maxX&&l.push({distance:o.minX-a.maxX,box1:o,box2:a,points:[{x:o.minX,y:o.minY+o.height/2},{x:a.maxX,y:o.minY+o.height/2},{x:a.maxX,y:a.minY+a.height/2}]}),o.maxX<a.minX&&l.push({distance:a.minX-o.maxX,box1:o,box2:a,points:[{x:o.maxX,y:o.minY+o.height/2},{x:a.minX,y:o.minY+o.height/2},{x:a.minX,y:a.minY+a.height/2}]}),o.minY>a.maxY&&l.push({box1:o,box2:a,distance:o.minY-a.maxY,points:[{x:o.minX+o.width/2,y:o.minY},{x:o.minX+o.width/2,y:a.maxY},{x:a.minX+a.width/2,y:a.maxY}]}),o.maxY<a.minY&&l.push({box1:o,box2:a,distance:a.minY-o.maxY,points:[{x:o.minX+o.width/2,y:o.maxY},{x:o.minX+o.width/2,y:a.minY},{x:a.minX+a.width/2,y:a.minY}]}),o.minX>=a.minX&&o.maxX<=a.maxX&&o.minY>=a.minY&&o.maxY<=a.maxY&&(l.push({distance:o.minX-a.minX,box1:o,box2:a,points:[{x:o.minX,y:o.minY+o.height/2},{x:a.minX,y:o.minY+o.height/2},{x:a.minX,y:a.minY+a.height/2}]}),l.push({distance:a.maxX-o.maxX,box1:o,box2:a,points:[{x:o.maxX,y:o.minY+o.height/2},{x:a.maxX,y:o.minY+o.height/2},{x:a.maxX,y:a.minY+a.height/2}]}),l.push({box1:o,box2:a,distance:o.minY-a.minY,points:[{x:o.minX+o.width/2,y:o.minY},{x:o.minX+o.width/2,y:a.minY},{x:a.minX+a.width/2,y:a.minY}]}),l.push({box1:o,box2:a,distance:a.maxY-o.maxY,points:[{x:o.minX+o.width/2,y:o.maxY},{x:o.minX+o.width/2,y:a.maxY},{x:a.minX+a.width/2,y:a.maxY}]})),JSON.stringify(S)!==JSON.stringify(l)&&C(l)},onTouchStart:M,onDragStart:t=>{let n=t.target.findAncestor(".element",!0);if(n){let r=e.getElementById(n?.id()),i=r?.top,o=i?.id;!(e.selectedElementsIds.indexOf(o)>=0)&&o&&(e.selectElements([o]),t.target.stopDrag(),t.target.startDrag(t),x.current?.startDrag(t))}S&&C(null)},pageId:t.id,style:{position:"relative"},children:(0,p.jsxs)("Layer",{children:[(0,p.jsx)(ld,{width:n,height:r,fill:o}),(0,p.jsx)(rG,{x:b,y:w,scaleX:e.scale,scaleY:e.scale,name:"page-container",children:(0,p.jsxs)(rG,{name:"page-container-2",children:[(0,p.jsx)(rG,{name:"page-background-group",x:f,y:f,children:(0,p.jsx)(lp,{x:-t.bleed,y:-t.bleed,width:t.computedWidth+2*t.bleed,height:t.computedHeight+2*t.bleed,background:t.background,shadowBlur:10,shadowColor:"lightgrey",name:"page-background",preventDefault:!1,scale:e.scale})}),(0,p.jsxs)(rG,{x:f,y:f,name:"elements-container",listening:!e.isPlaying,children:[(0,p.jsx)(r$,{name:"elements-area",width:t.computedWidth,height:t.computedHeight,listening:!1}),(0,p.jsx)(lv,{elements:t.children,store:e})]}),(0,p.jsx)(r$,{stroke:c,name:"bleed",strokeWidth:t.bleed,x:t.bleed/2,y:t.bleed/2,width:t.computedWidth+t.bleed,height:t.computedHeight+t.bleed,listening:!1,visible:t.bleed>0&&e.bleedVisible,hideInExport:!0})]})}),(0,p.jsx)(rK,{name:"workspace-background",points:[0,0,n,0,n,r,0,r,0,0,b,w,b,r-w,n-b,r-w,n-b,w,b,w],listening:!1,closed:!0,fill:o}),(0,p.jsx)(rG,{x:b,y:w,scaleX:e.scale,scaleY:e.scale,children:(0,p.jsx)(r$,{name:"page-highlight",hideInExport:!0,x:-U/2-H,y:-U/2-H,width:g+U+2*H,height:m+U+2*H,stroke:F&&e.pages.length>1?s:a,strokeWidth:2,listening:!1,strokeScaleEnabled:!1})}),(0,p.jsxs)(rG,{x:b+f*e.scale,y:w+f*e.scale,scaleX:e.scale,scaleY:e.scale,name:"page-abs-container",children:[(0,p.jsx)(rQ,{ref:x,onDragStart:n=>{n.evt?.altKey&&d&&e.selectedElements.forEach(e=>{let n=e.clone({},{skipSelect:!0}),r=t.children.indexOf(e);t.setElementZIndex(n.id,r)}),e.history.startTransaction()},onDragEnd:()=>{e.history.endTransaction()},onTransformStart:()=>{e.history.startTransaction()},boundBoxFunc:(e,t)=>{let n=1>Math.abs(t.width)||1>Math.abs(t.height),r=1>Math.abs(e.width)||1>Math.abs(e.height);return n&&!r?e:t},onTransform:e=>{let t=x.current?.__getNodeRect();k({anchor:x.current?.getActiveAnchor(),x:t.x,y:t.y,rotation:t.rotation,width:t.width,height:t.height})},onTransformEnd:t=>{k({}),e.history.endTransaction()},visible:!e.isPlaying}),S&&S.map(({points:t,distance:n,box1:r,box2:i},o)=>(0,p.jsxs)(rG,{name:"distances-container",hideInExport:!0,listening:!1,children:[(0,p.jsx)(r$,{...r,stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1}),(0,p.jsx)(r$,{...i,stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1}),(0,p.jsx)(rK,{points:[t[0].x,t[0].y,t[1].x,t[1].y],stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1}),(0,p.jsx)(rK,{points:[t[1].x,t[1].y,t[2].x,t[2].y],stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1}),(0,p.jsxs)(rW,{x:(t[0].x+t[1].x)/2,y:(t[0].y+t[1].y)/2,offsetY:-10,scaleX:1/e.scale,scaleY:1/e.scale,children:[(0,p.jsx)("Tag",{cornerRadius:5,fill:"rgb(0, 161, 255)",pointerDirection:"down"}),(0,p.jsx)(rX,{align:"center",verticalAlign:"middle",fill:"white",padding:5,text:lo({unit:e.unit,dpi:e.dpi,px:n})})]})]},o)),t._rendering&&(0,p.jsxs)(rG,{children:[(0,p.jsx)(r$,{width:g,height:m,fill:"rgba(255,255,255,0.9)"}),(0,p.jsx)(rX,{text:"Rendering...",fontSize:60,width:g,height:m,align:"center",verticalAlign:"middle"})]}),B&&(0,p.jsx)(B,{components:u,store:e,page:t,stageRef:_})]}),(0,p.jsx)(lm,{...O,store:e}),(0,p.jsx)(lg,{selection:R}),a2.value&&(0,p.jsx)(rX,{text:"Powered by polotno.com",fontSize:14,fill:"rgba(0,0,0,0.6)",x:n-170,y:r-18,onMouseEnter:e=>{e.target.getStage().container().style.cursor="pointer"},onMouseLeave:e=>{e.target.getStage().container().style.cursor=""},onTouchStart:e=>{e.cancelBubble=!0},onMouseDown:e=>{e.cancelBubble=!0},onClick:()=>{window.open("https://polotno.com")},onTap:()=>{window.open("https://polotno.com")}}),(0,p.jsx)(rG,{name:"line-guides"})]})}),(i??!0)&&F&&z&&(0,p.jsx)(z,{store:e,page:t,xPadding:b,yPadding:w})]})}),v=h("8NFma");let lx=[.1,.2,.5,1,2,5,10,20,25,50,100,200,500,1e3,2e3,5e3,1e4],l_=e=>lx.find(t=>e(t)>30)||1e4,lE=P(({store:e,width:t,height:n})=>{let r=l(v).useRef(null);if(!e.activePage)return null;let i=e.activePage;e.bleedVisible&&i.bleed;let o=i.computedWidth*e.scale,a=i.computedHeight*e.scale,s=(t-o)/2,u=l_(t=>li({unitVal:t,dpi:e.dpi,unit:e.unit})*e.scale),c=li({unitVal:u,dpi:e.dpi,unit:e.unit})*e.scale,d=Math.round(o/c)+1,h=Math.round(a/c)+1,f=af(e.selectedShapes);return(0,p.jsxs)("div",{style:{position:"absolute",top:0,left:0,pointerEvents:"none"},ref:r,children:[(0,p.jsxs)("div",{style:{width:t+"px",height:"14px",position:"sticky",fontSize:"8px",lineHeight:"14px",top:"0px",left:"0px",color:"grey",borderBottom:"1px solid grey",backgroundColor:"#e8e8e8",overflow:"hidden"},children:[[...Array(d)].map((t,n)=>(0,p.jsx)("div",{style:{position:"absolute",left:s+n*c+"px",borderLeft:"1px solid grey",paddingLeft:"2px",width:c+"px"},children:"px"===e.unit||u>=1?Math.round(u*n):(u*n).toFixed(1)},n)),!!e.selectedShapes.length&&(0,p.jsx)("div",{style:{position:"absolute",left:s+f.x*e.scale+"px",height:"14px",width:f.width*e.scale,backgroundColor:"rgba(0,0,0,0.15)"}})]}),e.pages.map((t,r)=>{let i=(n-t.computedHeight*e.scale)/2;return(0,p.jsxs)("div",{style:{left:"0px",width:"14px",height:n+"px",position:"sticky",fontSize:"8px",lineHeight:"14px",color:"grey",borderRight:"1px solid grey",backgroundColor:"#e8e8e8",overflow:"hidden"},children:[[...Array(h)].map((t,n)=>(0,p.jsx)("div",{style:{position:"absolute",left:"14px",top:i+n*c-14+"px",borderLeft:"1px solid grey",paddingLeft:"2px",transform:"rotate(90deg)",transformOrigin:"left top",width:c+"px",overflow:"hidden"},children:"px"===e.unit||u>=1?Math.round(u*n):(u*n).toFixed(1)},n)),e.selectedShapes[0]?.page===t&&(0,p.jsx)("div",{style:{position:"absolute",top:i+f.y*e.scale-14+"px",width:"14px",height:f.height*e.scale,backgroundColor:"rgba(0,0,0,0.15)"}})]},t.id)})]})});var iM=(h("58B0H"),h("58B0H"));let lS=(e=21)=>crypto.getRandomValues(new Uint8Array(e)).reduce((e,t)=>((t&=63)<36?e+=t.toString(36):t<62?e+=(t-26).toString(36).toUpperCase():t>62?e+="-":e+="_",e),"");var iM=(h("58B0H"),h("58B0H"));let lC=function(e,t){if(e===t)return!0;if("object"!=typeof e||null==e||"object"!=typeof t||null==t||Object.keys(e).length!=Object.keys(t).length)return!1;for(var n in e)if(!t.hasOwnProperty(n)||!lC(e[n],t[n]))return!1;return!0};Object.assign(iM.types);let lO=(0,iM.types).model("UndoManager",{history:(0,iM.types).array((0,iM.types).frozen()),undoIdx:-1,targetPath:""}).views(e=>({get canUndo(){return e.undoIdx>0},get canRedo(){return e.undoIdx<e.history.length-1}})).actions(e=>{let t,n;let r=!1,i=null,o=0,a=0,l=()=>a>0;function s(){let e=(0,iM.getSnapshot)(t);return{pages:e.pages,width:e.width,height:e.height}}function u(e){lC(t.pages.map(e=>e.id),e.pages.map(e=>e.id))?t.pages.forEach((t,n)=>{(0,iM.applySnapshot)(t,e.pages[n])}):(0,iM.applySnapshot)(t.pages,e.pages),t.setSize(e.width,e.height)}return{startTransaction(){a++},endTransaction(e){a--,e||this.requestAddState(s())},async ignore(t,n=!1,r=!1){r&&await new Promise(e=>setTimeout(e,10)),o&&e.addUndoState();let i=l();e.startTransaction();let s=a;try{await t()}catch(e){setTimeout(()=>{throw e})}let u=s!==a;e.endTransaction(!u),n||i||e.replaceState(),u||(clearTimeout(o),o=0)},async transaction(t){await e.ignore(t,!0),this.addUndoState()},requestAddState(e){if(i=e,!o&&!l()){if(r){r=!1;return}o=setTimeout(()=>{clearTimeout(o=0),l()||this.addUndoState()},100)}},addUndoState(){if(r){r=!1;return}let t=e.history[e.undoIdx];lC(i,t)||(clearTimeout(o),o=0,e.history.splice(e.undoIdx+1),e.history.push(i),e.undoIdx=e.history.length-1)},afterCreate(){if(!(t=(0,iM.resolvePath)(e,"..")))throw Error("Failed to find target store for UndoManager. Please provide `targetPath` property, or a `targetStore` in the environment");n=(0,iM.onSnapshot)(t,()=>{this.requestAddState(s())}),0===e.history.length&&this.requestAddState(s())},clear(){clearTimeout(o),o=0,e.history.splice(0,e.history.length),e.undoIdx=-1,e.addUndoState(s())},beforeDestroy(){n()},undo(){if(o&&this.addUndoState(),!e.canUndo){console.warn("No undo history. Please check `store.history.canUndo` before calling undo action.");return}e.undoIdx--,r=!0,u(e.history[e.undoIdx])},redo(){if(o&&this.addUndoState(),!e.canRedo){console.warn("No redo history. Please check `store.history.canRedo` before calling redo action.");return}e.undoIdx++,r=!0,u(e.history[e.undoIdx])},replaceState(){e.history[e.undoIdx]=s()}}});async function lk(e,t){let n=await (await fetch(e)).blob(),r=document.createElement("a"),i=URL.createObjectURL(n);r.href=i,r.download=t,document.body.appendChild(r),r.click(),setTimeout(function(){document.body.removeChild(r),window.URL.revokeObjectURL(i)},0)}async function lP({width:e,height:t}){return new(await (window.GIF?Promise.resolve(window.GIF):new Promise(e=>{var t=document.createElement("script");t.onload=function(){e(window.GIF)},t.src="https://cdnjs.cloudflare.com/ajax/libs/gif.js/0.2.0/gif.js",document.head.appendChild(t)})))({workers:4,width:e,height:t,workerScript:URL.createObjectURL(new Blob([`// gif.worker.js 0.2.0 - https://github.com/jnordberg/gif.js
113
+ https://polotno.com/docs/server-api`,aK={unsplashList:({query:e,page:t=1})=>`${aV}/get-unsplash?query=${e}&per_page=20&page=${t}&KEY=${a6()}`,unsplashDownload:e=>`${aV}/download-unsplash?id=${e}&KEY=${a6()}`,svgapiList:({query:e,page:t=0})=>`${aV}/get-svgapi?query=${e}&page=${t}&per_page=20&KEY=${a6()}`,svgapiDownload:e=>`${aV}/download-svgapi?path=${e}&KEY=${a6()}`,iconscoutList:({query:e,page:t=1})=>(aG("iconscout",a$),`${aV}/get-iconscout?query=${e}&page=${t}&KEY=${a6()}`),iconscoutDownload:e=>(aG("iconscout",a$),`${aV}/download-iconscout?uuid=${e}&KEY=${a6()}`),templateList:({query:e,page:t=1,sizeQuery:n})=>`${aV}/get-templates?${n}&query=${e}&per_page=30&page=${t}&KEY=${a6()}`},aY=()=>`${aV}/get-google-fonts?KEY=${a6()}`,aX=e=>`https://api.polotno.com/google-fonts-previews/black/${aW(e," ","-")}.png`,aZ=()=>`${aV}/remove-image-background?KEY=${a6()}`,aQ=e=>aK.templateList(e),aJ=()=>`${aV}/get-text-templates?KEY=${a6()}`,a0=e=>aK.unsplashList(e),a1=e=>aK.unsplashDownload(e),a2=y.observable({value:!1}),a3=y.action(()=>{a2.value=!0}),a5="",a6=()=>a5||"",a4=window.location.origin,a8=navigator.userAgent.indexOf("Headless")>-1,a9=navigator.userAgent.indexOf("Electron")>-1;"file://"===a4&&a8&&(a4="headless"),"file://"===a4&&a9&&(a4="electron");let a7=`%cPolotno error! Current domain is not allowed. It may lead to unexpected behavior and stop working. Please add "${a4}" here: https://polotno.com/cabinet`;async function le(e){for(let n=0;n<5;n++)try{var t;let n=await fetch(aV+"/validate-key",{method:"POST",body:JSON.stringify({key:e,site:location.host})});if(!e)return console.warn("Polotno API is initialized without API key. It may lead to unexpected behavior and stop working. Please create API key here: https://polotno.com/cabinet"),!1;if(200!==n.status){await new Promise(e=>setTimeout(e,3e3));continue}let r=await n.json();return r.is_valid||console.warn("Polotno API key is not valid. Please get new API key here: https://polotno.com/cabinet"),r.is_paid||console.log("%cPolotno Free Version. Development or non-commercial usage only. https://polotno.com/","background: rgb(0, 161, 255); color: white; padding: 5px; margin: 5px;"),r.is_domain_valid||console.log(a7,"background: rgba(247, 101, 68, 1); color: white; padding: 5px; margin: 5px;"),t=r.remove_background_enabled,iP.removeBackgroundEnabled=t,r.is_paid||!1}catch(e){await new Promise(e=>setTimeout(e,3e3))}return console.error("Can not validate Polotno API key. Please report to anton@polotno.com immediately."),!0}async function lt(e,t){a5=e,(!await le(e)||t)&&a3()}let ln=({px:e,unit:t="px",dpi:n})=>{switch(t){case"pt":default:return e;case"mm":return e/(n/25.4);case"cm":return e/(n/2.54);case"in":return e/n}},lr=({px:e,precious:t=2,dpi:n=72,unit:r="px"})=>parseFloat(ln({px:e,dpi:n,unit:r}).toFixed(t)),li=({unitVal:e,dpi:t,unit:n})=>e/ln({px:1,unit:n,dpi:t}),lo=e=>{let t=parseFloat(ln(e).toFixed(1));switch(e.unit){case"pt":return`${Math.round(t)}pt`;case"mm":return`${t}mm`;case"cm":return`${t}cm`;case"in":return`${t}in`;default:return`${Math.round(t)}px`}},la=l(A).DD._drag;window.removeEventListener("mousemove",la),l(A).DD._drag=function(e){(0,y.runInAction)(()=>{la.call(this,e)})},window.addEventListener("mousemove",l(A).DD._drag);let ll=new(l(A)).Group;ll.add(new(l(A)).Rect({width:20,height:20,fill:"white"})),ll.add(new(l(A)).Path({scaleX:20/24,scaleY:20/24,data:"M4.98313549,11.0001422 C5.49589839,10.9914935 5.92501998,11.3703506 5.99116425,11.8666444 L5.99985778,11.9831355 L6.00348884,12.2068855 C6.11245031,15.4321748 8.76323537,17.9999971 11.9999971,17.9999971 C12.1869612,17.9999971 12.3726725,17.9914753 12.5567465,17.9745765 L12.2928932,17.7071068 C11.9023689,17.3165825 11.9023689,16.6834175 12.2928932,16.2928932 C12.6834175,15.9023689 13.3165825,15.9023689 13.7071068,16.2928932 L15.7071068,18.2928932 C16.0976311,18.6834175 16.0976311,19.3165825 15.7071068,19.7071068 L13.7071068,21.7071068 C13.3165825,22.0976311 12.6834175,22.0976311 12.2928932,21.7071068 C11.9023689,21.3165825 11.9023689,20.6834175 12.2928932,20.2928932 L12.6111505,19.9769552 C12.4086045,19.9922816 12.2047796,19.9999971 11.9999971,19.9999971 C7.7687005,19.9999971 4.28886152,16.7094374 4.01666425,12.5105203 L4.00420123,12.2575143 L4.00014222,12.0168645 C3.9908282,11.4646583 4.43092928,11.0094562 4.98313549,11.0001422 Z M11.7071068,2.29289322 C12.0675907,2.65337718 12.0953203,3.22060824 11.7902954,3.61289944 L11.7071068,3.70710678 L11.3891629,4.0230186 C11.5916051,4.00770767 11.7953244,4 12,4 C16.418278,4 20,7.581722 20,12 C20,12.5522847 19.5522847,13 19,13 C18.4477153,13 18,12.5522847 18,12 C18,8.6862915 15.3137085,6 12,6 C11.8129339,6 11.6271216,6.00853145 11.4429483,6.02544919 L11.7071068,6.29289322 C12.0976311,6.68341751 12.0976311,7.31658249 11.7071068,7.70710678 C11.3466228,8.06759074 10.7793918,8.09532028 10.3871006,7.79029539 L10.2928932,7.70710678 L8.29289322,5.70710678 C7.93240926,5.34662282 7.90467972,4.77939176 8.20970461,4.38710056 L8.29289322,4.29289322 L10.2928932,2.29289322 C10.6834175,1.90236893 11.3165825,1.90236893 11.7071068,2.29289322 Z",fill:"black"}));let ls=ll.toCanvas({pixelRatio:2,width:20,height:20}),lu={enabledAnchors:["top-left","top-center","top-right","middle-left","bottom-left","bottom-right","bottom-center","middle-right"],borderEnabled:!0,rotateEnabled:!0,rotationSnaps:[0,45,90,135,180,225,270,315],ignoreStroke:!0,flipEnabled:!1,anchorStrokeWidth:2,borderStrokeWidth:2,rotateAnchorOffset:30,anchorStyleFunc:e=>{e.hasName("rotater")&&e.setAttrs({width:20,height:20,cornerRadius:10,offsetX:10,offsetY:10,fillPatternImage:ls,fillPatternScaleX:.5,fillPatternScaleY:.5,fillPriority:"pattern",fillPatternRepeat:"no-repeat"})}},lc={text:{enabledAnchors:["top-left","top-right","middle-left","bottom-left","bottom-right","middle-right"]},svg:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]},line:{enabledAnchors:[],borderEnabled:!1,rotateEnabled:!1},image:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]},many:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]},group:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]}},ld=e=>(0,p.jsx)(r$,{...e,preventDefault:!1}),lh=({url:e,...t})=>{let[n,r]=l(r1)(e,"anonymous"),i=n?function(e,t,n="scale"){let r,i;let o=t.width/t.height;o>=e.width/e.height?(r=e.width,i=e.width/o):(r=e.height*o,i=e.height);let a=0,l=0;return"left-top"===n?(a=0,l=0):"left-middle"===n?(a=0,l=(e.height-i)/2):"left-bottom"===n?(a=0,l=e.height-i):"center-top"===n?(a=(e.width-r)/2,l=0):"center-middle"===n?(a=(e.width-r)/2,l=(e.height-i)/2):"center-bottom"===n?(a=(e.width-r)/2,l=e.height-i):"right-top"===n?(a=e.width-r,l=0):"right-middle"===n?(a=e.width-r,l=(e.height-i)/2):"right-bottom"===n?(a=e.width-r,l=e.height-i):"scale"===n?(a=0,l=0,r=e.width,i=e.height):console.error(Error("Unknown clip position property - "+n)),{cropX:a,cropY:l,cropWidth:r,cropHeight:i}}(n,{width:t.width,height:t.height},"center-middle"):{};return oo(r,"background"),(0,p.jsx)(rY,{image:n,...t,...i})},lf=e=>(0,p.jsx)(r$,{...e}),lp=e=>{let{background:t,scale:n,borderColor:r,...i}=e,o=l(v).useMemo(()=>!!l(A).Util.colorToRGBA(t),[t]),a=l(v).useMemo(()=>{let e=document.createElement("canvas");e.width=60,e.height=60;let t=e.getContext("2d");return t&&(t.fillStyle="black",t.fillRect(30,0,30,30),t.fillRect(0,30,30,30)),e},[]);return(0,p.jsxs)(l(v).Fragment,{children:[(0,p.jsx)(r$,{fillPatternImage:a,...i,opacity:.1,hideInExport:!0}),o?(0,p.jsx)(lf,{fill:t,...i}):(0,p.jsx)(lh,{url:t,...i})]})},lg=P(({selection:e})=>e.visible?(0,p.jsx)(r$,{name:"selection",x:Math.min(e.x1,e.x2),y:Math.min(e.y1,e.y2),width:Math.abs(e.x1-e.x2),height:Math.abs(e.y1-e.y2),fill:"rgba(0, 161, 255, 0.3)"}):null),lm=P(({x:e,y:t,width:n,height:r,rotation:i,anchor:o,store:a})=>{let s=ah({x:e,y:t,width:n,height:r,rotation:l(A).Util.radToDeg(i)});if(void 0===o)return null;let u=(r/2+70)*Math.cos(i-Math.PI/2),c=(r/2+70)*Math.sin(i-Math.PI/2),d=lr({unit:a.unit,dpi:a.dpi,px:n/a.scale,precious:"px"===a.unit?0:1})+" x "+lr({unit:a.unit,dpi:a.dpi,px:r/a.scale,precious:"px"===a.unit?0:1})+("px"===a.unit?"":" "+a.unit);return(0,p.jsxs)(p.Fragment,{children:[(0,p.jsxs)(rW,{x:(s.minX+s.maxX)/2+u,y:(s.minY+s.maxY)/2+c,offsetX:14,offsetY:14,visible:"rotater"===o,children:[(0,p.jsx)("Tag",{cornerRadius:5,fill:"rgb(0, 161, 255)"}),(0,p.jsx)(rX,{align:"center",verticalAlign:"middle",fill:"white",padding:8,text:Math.round(l(A).Util.radToDeg(i)).toString()+"°"})]}),(0,p.jsxs)(rW,{x:(s.minX+s.maxX)/2,y:s.maxY+20,visible:"rotater"!==o,children:[(0,p.jsx)("Tag",{cornerRadius:5,fill:"rgb(0, 161, 255)",pointerDirection:"up",pointerHeight:0,pointerWidth:0}),(0,p.jsx)(rX,{align:"center",verticalAlign:"middle",fill:"white",padding:8,text:d})]})]})}),lv=P(({elements:e,store:t})=>{let n=e.filter(e=>e.alwaysOnTop),r=e.filter(e=>!e.alwaysOnTop).concat(n);return(0,p.jsx)(l(v).Fragment,{children:r.map(e=>(0,p.jsx)(aH,{store:t,element:e,onClick:()=>{console.warn("Polotno warning: onClick callback is deprecated. Just stop using it. Polotno will do selection automatically.")}},e.id))})}),ly=null,lb=e=>{ly=e};var lw=P(({store:e,page:t,width:n,height:r,pageControlsEnabled:i,backColor:o,pageBorderColor:a,activePageBorderColor:s,components:u,bleedColor:c,altCloneEnabled:d})=>{var h;let f=e.bleedVisible?t.bleed:0,g=t.computedWidth+2*f,m=t.computedHeight+2*f,b=(n-g*e.scale)/2,w=(r-m*e.scale)/2,x=l(v).useRef(null),_=l(v).useRef(null),E=l(v).useRef(null),[S,C]=l(v).useState(null),[O,k]=l(v).useState({}),P=e.selectedElements.find(e=>e._cropModeEnabled),T=e.selectedShapes.filter(e=>!e.resizable).length>0,N=e.selectedShapes.filter(e=>!e.draggable).length>0,j=e.selectedElements.filter(e=>!e.visible).length>0;l(v).useLayoutEffect(()=>{if(!x.current)return;let t=x.current.getStage(),n=e.selectedShapes.map(e=>e._cropModeEnabled?null:t.findOne("#"+e.id)).filter(e=>e),r=1===e.selectedElements.length&&e.selectedElements[0]?.type||"many";lc[r]?(x.current.setAttrs({...lu,...lc[r]}),"svg"!==r&&"image"!==r||e.selectedElements[0].keepRatio||x.current.setAttrs({enabledAnchors:lu.enabledAnchors}),"text"===r&&iP.textVerticalResizeEnabled&&x.current.setAttrs({enabledAnchors:lc.text.enabledAnchors?.concat(["bottom-center"])})):x.current.setAttrs(lu),T&&x.current.enabledAnchors([]),N&&x.current.rotateEnabled(!1),n.find(e=>e?.isDragging())&&n.forEach(e=>{e.isDragging()||e?.startDrag()}),x.current.nodes(n),x.current.getLayer()?.batchDraw()},[e.selectedElements,P,T,j,N]);let R=(h=()=>({visible:!1,x1:0,y1:0,x2:0,y2:0}),(0,v.useState)(function(){return(0,y.observable)(h(),void 0,{autoBind:!0})})[0]),I=l(v).useRef(!1),L=iL(),M=(0,y.action)(e=>{if(L)return;I.current=!1;let t=e.target.findAncestor(".elements-container"),n=e.target.findAncestor("Transformer"),r=e.target.findAncestor(".page-abs-container");if(t||n||r)return;let i=e.target.getStage()?.getPointerPosition();i&&(R.visible=!0,R.x1=i.x,R.y1=i.y,R.x2=i.x,R.y2=i.y,e.target.getStage()?.getPointersPositions().length>=2&&(R.visible=!1))});l(v).useEffect(()=>{let t=(0,y.action)(e=>{if(!R.visible)return;_.current?.setPointersPositions(e);let t=_.current?.getPointerPosition()||{x:R.x2,y:R.y2};R.x2=t.x,R.y2=t.y}),n=(0,y.action)(()=>{if(!R.visible||!_.current)return;let t=_.current.findOne(".selection"),n=t?t.getClientRect():{width:0,height:0,x:0,y:0};if(n.width&&n.height){let t=[];_.current.find(".element").forEach(r=>{let i=r.getClientRect(),o=e.getElementById(r.id()),a=o?.draggable,s=o?.selectable;l(A).Util.haveIntersection(n,i)&&a&&s&&t.push(o.top.id)});let r=[...new Set(t)];e.selectElements(r)}R.visible=!1,I.current=!0});return window.addEventListener("mousemove",t),window.addEventListener("touchmove",t),window.addEventListener("mouseup",n),window.addEventListener("touchend",n),()=>{window.removeEventListener("mousemove",t),window.removeEventListener("touchmove",t),window.removeEventListener("mouseup",n),window.removeEventListener("touchend",n)}},[]);let D=n=>{if(e.activePage!==t&&t.select(),I.current)return;let r=n.evt.ctrlKey||n.evt.metaKey||n.evt.shiftKey,i=n.target.findAncestor(".elements-container"),o=n.target.findAncestor(".page-abs-container"),a=n.target.findAncestor("Transformer");if(!r&&!i&&!a&&!o){e.selectElements([]);return}let l=n.target.findAncestor(".element",!0),s=e.getElementById(l?.id()),u=s?.top,c=u?.id,d=e.selectedElementsIds.indexOf(c)>=0;c&&r&&!d?e.selectElements(e.selectedElementsIds.concat([c])):c&&r&&d?e.selectElements(e.selectedElementsIds.filter(e=>e!==c)):!c||r||d||e.selectElements([c])};!function(e){let t=e=>e.hasName("element")||e.hasName("page-background")||e.hasName("elements-area");function n(n){let r=e.current?.getStage();var i=[],o=[];return r.find(t).forEach(e=>{if(!(n.indexOf(e)>=0)){var t=e.getClientRect({skipShadow:!0,skipStroke:!0});i.push(t.x,t.x+t.width,t.x+t.width/2),o.push(t.y,t.y+t.height,t.y+t.height/2)}}),{vertical:i,horizontal:o}}function r(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(l(A)).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(l(A)).Line({points:[e.lineGuide,-6e3,e.lineGuide,6e3],stroke:"rgb(0, 161, 255)",strokeWidth:1,name:"guid-line",dash:[4,6]});r?.add(t)}})}let i=e=>{e.target.getLayer().children.find(e=>"line-guides"===e.name()).destroyChildren();var t=ap(n(e.target.nodes()),function(e){let t=e.__getNodeRect(),n=ah({...t,rotation:l(A).Util.radToDeg(t.rotation)}),r=e.getAbsolutePosition();return{vertical:[{guide:n.x,offset:r.x-n.x,snap:"start"},{guide:n.x+n.width/2,offset:r.x-n.x-n.width/2,snap:"center"},{guide:n.x+n.width,offset:r.x-n.x-n.width,snap:"end"}],horizontal:[{guide:n.y,offset:r.y-n.y,snap:"start"},{guide:n.y+n.height/2,offset:r.y-n.y-n.height/2,snap:"center"},{guide:n.y+n.height,offset:r.y-n.y-n.height,snap:"end"}]}}(e.target));if(!t.length)return;r(t);let i=e.target.getAbsolutePosition(),o={...i};t.forEach(e=>{switch(e.snap){case"start":case"center":case"end":switch(e.orientation){case"V":o.x=e.lineGuide+e.offset;break;case"H":o.y=e.lineGuide+e.offset}}});let a=o.x-i.x,s=o.y-i.y;e.evt.ctrlKey||e.evt.metaKey||e.target.nodes().forEach(e=>{let t=e.getAbsolutePosition();e.setAbsolutePosition({x:t.x+a,y:t.y+s})})},o=(t,i,o)=>{let a=e.current,l=a.getLayer();if(l.children.find(e=>"line-guides"===e.name()).destroyChildren(),"rotater"===a.getActiveAnchor()||Math.sqrt(Math.pow(i.x-t.x,2)+Math.pow(i.y-t.y,2))>50||!l)return i;var s=ap(n(a.nodes()),{vertical:[{guide:i.x,offset:0,snap:"start"}],horizontal:[{guide:i.y,offset:0,snap:"start"}]});if(!s.length||(r(s),o.ctrlKey||o.metaKey))return i;let u=i.x,c=i.x;s.forEach(e=>{switch(e.orientation){case"V":u=e.lineGuide;break;case"H":c=e.lineGuide}});let d=Math.abs(i.x-u),h=Math.abs(i.y-c),f=d<10,p=h<10;return f&&!p?{x:u,y:t.y}:p&&!f?{x:t.x,y:c}:f&&p?{x:u,y:c}:i},a=e=>{if(!e.target)return;let t=e.target.getLayer();t.children.find(e=>"line-guides"===e.name()).destroyChildren(),t.batchDraw()};l(v).useEffect(()=>{e.current&&(e.current.anchorDragBoundFunc(o),e.current.on("dragstart",()=>{setTimeout(()=>{let e=[...l(A).DD._dragElements.entries()];e.reverse(),l(A).DD._dragElements.clear(),e.forEach(([e,t])=>{l(A).DD._dragElements.set(e,t)})})}),e.current.on("dragmove",i),e.current.on("dragend",a),e.current.on("transformend",a),e.current.on("transform",t=>{t.evt.ctrlKey||t.evt.metaKey?e.current?.rotationSnapTolerance(0):e.current?.rotationSnapTolerance(5)}))},[])}(x);let F=e.activePage===t,z=u?.PageControls,B=u?.Tooltip,U=1/e.scale,H=0/e.scale;return(0,p.jsxs)("div",{ref:E,onDragOver:e=>e.preventDefault(),onDrop:n=>{if(n.preventDefault(),!_.current)return;_.current.setPointersPositions(n);let r=_.current.findOne(".elements-container").getRelativePointerPosition(),i=_.current.getPointerPosition(),o=_.current.getAllIntersections(i).map(e=>e.findAncestor(".element",!0)).filter(Boolean),a=[...new Set(o.reverse())].map(t=>e.getElementById(t.id())),l=a[0];ly&&(ly(r,l,{elements:a,page:t}),ly=null)},style:{position:"relative",width:n+"px"},className:"polotno-page-container"+(F?" active-page":""),children:[(0,p.jsx)(r0,{ref:_,width:Math.min(n,4*window.innerWidth),height:Math.min(r,4*window.innerHeight),onClick:D,onTap:D,onMouseDown:M,onMouseMove:n=>{if(!n.evt.altKey&&S){C(null);return}if(!n.evt.altKey)return;let r=n.target.findAncestor(".element",!0),i=r?.id();if(!e.selectedElements[0]||e.selectedElementsIds.includes(i))return;let o=af(e.selectedShapes),a=ah(i?e.getElementById(i):{x:0,y:0,width:t.computedWidth,height:t.computedHeight,rotation:0}),l=[];o.minX>a.maxX&&l.push({distance:o.minX-a.maxX,box1:o,box2:a,points:[{x:o.minX,y:o.minY+o.height/2},{x:a.maxX,y:o.minY+o.height/2},{x:a.maxX,y:a.minY+a.height/2}]}),o.maxX<a.minX&&l.push({distance:a.minX-o.maxX,box1:o,box2:a,points:[{x:o.maxX,y:o.minY+o.height/2},{x:a.minX,y:o.minY+o.height/2},{x:a.minX,y:a.minY+a.height/2}]}),o.minY>a.maxY&&l.push({box1:o,box2:a,distance:o.minY-a.maxY,points:[{x:o.minX+o.width/2,y:o.minY},{x:o.minX+o.width/2,y:a.maxY},{x:a.minX+a.width/2,y:a.maxY}]}),o.maxY<a.minY&&l.push({box1:o,box2:a,distance:a.minY-o.maxY,points:[{x:o.minX+o.width/2,y:o.maxY},{x:o.minX+o.width/2,y:a.minY},{x:a.minX+a.width/2,y:a.minY}]}),o.minX>=a.minX&&o.maxX<=a.maxX&&o.minY>=a.minY&&o.maxY<=a.maxY&&(l.push({distance:o.minX-a.minX,box1:o,box2:a,points:[{x:o.minX,y:o.minY+o.height/2},{x:a.minX,y:o.minY+o.height/2},{x:a.minX,y:a.minY+a.height/2}]}),l.push({distance:a.maxX-o.maxX,box1:o,box2:a,points:[{x:o.maxX,y:o.minY+o.height/2},{x:a.maxX,y:o.minY+o.height/2},{x:a.maxX,y:a.minY+a.height/2}]}),l.push({box1:o,box2:a,distance:o.minY-a.minY,points:[{x:o.minX+o.width/2,y:o.minY},{x:o.minX+o.width/2,y:a.minY},{x:a.minX+a.width/2,y:a.minY}]}),l.push({box1:o,box2:a,distance:a.maxY-o.maxY,points:[{x:o.minX+o.width/2,y:o.maxY},{x:o.minX+o.width/2,y:a.maxY},{x:a.minX+a.width/2,y:a.maxY}]})),JSON.stringify(S)!==JSON.stringify(l)&&C(l)},onTouchStart:M,onDragStart:t=>{let n=t.target.findAncestor(".element",!0);if(n){let r=e.getElementById(n?.id()),i=r?.top,o=i?.id;!(e.selectedElementsIds.indexOf(o)>=0)&&o&&(e.selectElements([o]),t.target.stopDrag(),t.target.startDrag(t),x.current?.startDrag(t))}S&&C(null)},pageId:t.id,style:{position:"relative"},children:(0,p.jsxs)("Layer",{children:[(0,p.jsx)(ld,{width:n,height:r,fill:o}),(0,p.jsx)(rG,{x:b,y:w,scaleX:e.scale,scaleY:e.scale,name:"page-container",children:(0,p.jsxs)(rG,{name:"page-container-2",children:[(0,p.jsx)(rG,{name:"page-background-group",x:f,y:f,children:(0,p.jsx)(lp,{x:-t.bleed,y:-t.bleed,width:t.computedWidth+2*t.bleed,height:t.computedHeight+2*t.bleed,background:t.background,shadowBlur:10,shadowColor:"lightgrey",name:"page-background",preventDefault:!1,scale:e.scale})}),(0,p.jsxs)(rG,{x:f,y:f,name:"elements-container",listening:!e.isPlaying,children:[(0,p.jsx)(r$,{name:"elements-area",width:t.computedWidth,height:t.computedHeight,listening:!1}),(0,p.jsx)(lv,{elements:t.children,store:e})]}),(0,p.jsx)(r$,{stroke:c,name:"bleed",strokeWidth:t.bleed,x:t.bleed/2,y:t.bleed/2,width:t.computedWidth+t.bleed,height:t.computedHeight+t.bleed,listening:!1,visible:t.bleed>0&&e.bleedVisible,hideInExport:!0})]})}),(0,p.jsx)(rK,{name:"workspace-background",points:[0,0,n,0,n,r,0,r,0,0,b,w,b,r-w,n-b,r-w,n-b,w,b,w],listening:!1,closed:!0,fill:o}),(0,p.jsx)(rG,{x:b,y:w,scaleX:e.scale,scaleY:e.scale,children:(0,p.jsx)(r$,{name:"page-highlight",hideInExport:!0,x:-U/2-H,y:-U/2-H,width:g+U+2*H,height:m+U+2*H,stroke:F&&e.pages.length>1?s:a,strokeWidth:2,listening:!1,strokeScaleEnabled:!1})}),(0,p.jsxs)(rG,{x:b+f*e.scale,y:w+f*e.scale,scaleX:e.scale,scaleY:e.scale,name:"page-abs-container",children:[(0,p.jsx)(rQ,{ref:x,onDragStart:n=>{n.evt?.altKey&&d&&e.selectedElements.forEach(e=>{let n=e.clone({},{skipSelect:!0}),r=t.children.indexOf(e);t.setElementZIndex(n.id,r)}),e.history.startTransaction()},onDragEnd:()=>{e.history.endTransaction()},onTransformStart:()=>{e.history.startTransaction()},boundBoxFunc:(e,t)=>{let n=1>Math.abs(t.width)||1>Math.abs(t.height),r=1>Math.abs(e.width)||1>Math.abs(e.height);return n&&!r?e:t},onTransform:e=>{let t=x.current?.__getNodeRect();k({anchor:x.current?.getActiveAnchor(),x:t.x,y:t.y,rotation:t.rotation,width:t.width,height:t.height})},onTransformEnd:t=>{k({}),e.history.endTransaction()},visible:!e.isPlaying}),S&&S.map(({points:t,distance:n,box1:r,box2:i},o)=>(0,p.jsxs)(rG,{name:"distances-container",hideInExport:!0,listening:!1,children:[(0,p.jsx)(r$,{...r,stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1}),(0,p.jsx)(r$,{...i,stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1}),(0,p.jsx)(rK,{points:[t[0].x,t[0].y,t[1].x,t[1].y],stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1}),(0,p.jsx)(rK,{points:[t[1].x,t[1].y,t[2].x,t[2].y],stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1}),(0,p.jsxs)(rW,{x:(t[0].x+t[1].x)/2,y:(t[0].y+t[1].y)/2,offsetY:-10,scaleX:1/e.scale,scaleY:1/e.scale,children:[(0,p.jsx)("Tag",{cornerRadius:5,fill:"rgb(0, 161, 255)",pointerDirection:"down"}),(0,p.jsx)(rX,{align:"center",verticalAlign:"middle",fill:"white",padding:5,text:lo({unit:e.unit,dpi:e.dpi,px:n})})]})]},o)),t._rendering&&(0,p.jsxs)(rG,{children:[(0,p.jsx)(r$,{width:g,height:m,fill:"rgba(255,255,255,0.9)"}),(0,p.jsx)(rX,{text:"Rendering...",fontSize:60,width:g,height:m,align:"center",verticalAlign:"middle"})]}),B&&(0,p.jsx)(B,{components:u,store:e,page:t,stageRef:_})]}),(0,p.jsx)(lm,{...O,store:e}),(0,p.jsx)(lg,{selection:R}),a2.value&&(0,p.jsx)(rX,{text:"Powered by polotno.com",fontSize:14,fill:"rgba(0,0,0,0.6)",x:n-170,y:r-18,onMouseEnter:e=>{e.target.getStage().container().style.cursor="pointer"},onMouseLeave:e=>{e.target.getStage().container().style.cursor=""},onTouchStart:e=>{e.cancelBubble=!0},onMouseDown:e=>{e.cancelBubble=!0},onClick:()=>{window.open("https://polotno.com")},onTap:()=>{window.open("https://polotno.com")}}),(0,p.jsx)(rG,{name:"line-guides"})]})}),(i??!0)&&F&&z&&(0,p.jsx)(z,{store:e,page:t,xPadding:b,yPadding:w})]})}),v=h("8NFma");let lx=[.1,.2,.5,1,2,5,10,20,25,50,100,200,500,1e3,2e3,5e3,1e4],l_=e=>lx.find(t=>e(t)>30)||1e4,lE=P(({store:e,width:t,height:n})=>{let r=l(v).useRef(null);if(!e.activePage)return null;let i=e.activePage;e.bleedVisible&&i.bleed;let o=i.computedWidth*e.scale,a=i.computedHeight*e.scale,s=(t-o)/2,u=l_(t=>li({unitVal:t,dpi:e.dpi,unit:e.unit})*e.scale),c=li({unitVal:u,dpi:e.dpi,unit:e.unit})*e.scale,d=Math.round(o/c)+1,h=Math.round(a/c)+1,f=af(e.selectedShapes);return(0,p.jsxs)("div",{style:{position:"absolute",top:0,left:0,pointerEvents:"none"},ref:r,children:[(0,p.jsxs)("div",{style:{width:t+"px",height:"14px",position:"sticky",fontSize:"8px",lineHeight:"14px",top:"0px",left:"0px",color:"grey",borderBottom:"1px solid grey",backgroundColor:"#e8e8e8",overflow:"hidden"},children:[[...Array(d)].map((t,n)=>(0,p.jsx)("div",{style:{position:"absolute",left:s+n*c+"px",borderLeft:"1px solid grey",paddingLeft:"2px",width:c+"px"},children:"px"===e.unit||u>=1?Math.round(u*n):(u*n).toFixed(1)},n)),!!e.selectedShapes.length&&(0,p.jsx)("div",{style:{position:"absolute",left:s+f.x*e.scale+"px",height:"14px",width:f.width*e.scale,backgroundColor:"rgba(0,0,0,0.15)"}})]}),e.pages.map((t,r)=>{let i=(n-t.computedHeight*e.scale)/2;return(0,p.jsxs)("div",{style:{left:"0px",width:"14px",height:n+"px",position:"sticky",fontSize:"8px",lineHeight:"14px",color:"grey",borderRight:"1px solid grey",backgroundColor:"#e8e8e8",overflow:"hidden"},children:[[...Array(h)].map((t,n)=>(0,p.jsx)("div",{style:{position:"absolute",left:"14px",top:i+n*c-14+"px",borderLeft:"1px solid grey",paddingLeft:"2px",transform:"rotate(90deg)",transformOrigin:"left top",width:c+"px",overflow:"hidden"},children:"px"===e.unit||u>=1?Math.round(u*n):(u*n).toFixed(1)},n)),e.selectedShapes[0]?.page===t&&(0,p.jsx)("div",{style:{position:"absolute",top:i+f.y*e.scale-14+"px",width:"14px",height:f.height*e.scale,backgroundColor:"rgba(0,0,0,0.15)"}})]},t.id)})]})});var iM=(h("58B0H"),h("58B0H"));let lS=(e=21)=>crypto.getRandomValues(new Uint8Array(e)).reduce((e,t)=>((t&=63)<36?e+=t.toString(36):t<62?e+=(t-26).toString(36).toUpperCase():t>62?e+="-":e+="_",e),"");var iM=(h("58B0H"),h("58B0H"));let lC=function(e,t){if(e===t)return!0;if("object"!=typeof e||null==e||"object"!=typeof t||null==t||Object.keys(e).length!=Object.keys(t).length)return!1;for(var n in e)if(!t.hasOwnProperty(n)||!lC(e[n],t[n]))return!1;return!0};Object.assign(iM.types);let lO=(0,iM.types).model("UndoManager",{history:(0,iM.types).array((0,iM.types).frozen()),undoIdx:-1,targetPath:""}).views(e=>({get canUndo(){return e.undoIdx>0},get canRedo(){return e.undoIdx<e.history.length-1}})).actions(e=>{let t,n;let r=!1,i=null,o=0,a=0,l=()=>a>0;function s(){let e=(0,iM.getSnapshot)(t);return{pages:e.pages,width:e.width,height:e.height}}function u(e){lC(t.pages.map(e=>e.id),e.pages.map(e=>e.id))?t.pages.forEach((t,n)=>{(0,iM.applySnapshot)(t,e.pages[n])}):(0,iM.applySnapshot)(t.pages,e.pages),t.setSize(e.width,e.height)}return{startTransaction(){a++},endTransaction(e){a--,e||this.requestAddState(s())},async ignore(t,n=!1,r=!1){r&&await new Promise(e=>setTimeout(e,10)),o&&e.addUndoState();let i=l();e.startTransaction();let s=a;try{await t()}catch(e){setTimeout(()=>{throw e})}let u=s!==a;e.endTransaction(!u),n||i||e.replaceState(),u||(clearTimeout(o),o=0)},async transaction(t){await e.ignore(t,!0),this.addUndoState()},requestAddState(e){if(i=e,!o&&!l()){if(r){r=!1;return}o=setTimeout(()=>{clearTimeout(o=0),l()||this.addUndoState()},100)}},addUndoState(){if(r){r=!1;return}let t=e.history[e.undoIdx];lC(i,t)||(clearTimeout(o),o=0,e.history.splice(e.undoIdx+1),e.history.push(i),e.undoIdx=e.history.length-1)},afterCreate(){if(!(t=(0,iM.resolvePath)(e,"..")))throw Error("Failed to find target store for UndoManager. Please provide `targetPath` property, or a `targetStore` in the environment");n=(0,iM.onSnapshot)(t,()=>{this.requestAddState(s())}),0===e.history.length&&this.requestAddState(s())},clear(){clearTimeout(o),o=0,e.history.splice(0,e.history.length),e.undoIdx=-1,e.addUndoState(s())},beforeDestroy(){n()},undo(){if(o&&this.addUndoState(),!e.canUndo){console.warn("No undo history. Please check `store.history.canUndo` before calling undo action.");return}e.undoIdx--,r=!0,u(e.history[e.undoIdx])},redo(){if(o&&this.addUndoState(),!e.canRedo){console.warn("No redo history. Please check `store.history.canRedo` before calling redo action.");return}e.undoIdx++,r=!0,u(e.history[e.undoIdx])},replaceState(){e.history[e.undoIdx]=s()}}});async function lk(e,t){let n=await (await fetch(e)).blob(),r=document.createElement("a"),i=URL.createObjectURL(n);r.href=i,r.download=t,document.body.appendChild(r),r.click(),setTimeout(function(){document.body.removeChild(r),window.URL.revokeObjectURL(i)},0)}async function lP({width:e,height:t}){return new(await (window.GIF?Promise.resolve(window.GIF):new Promise(e=>{var t=document.createElement("script");t.onload=function(){e(window.GIF)},t.src="https://cdnjs.cloudflare.com/ajax/libs/gif.js/0.2.0/gif.js",document.head.appendChild(t)})))({workers:4,width:e,height:t,workerScript:URL.createObjectURL(new Blob([`// gif.worker.js 0.2.0 - https://github.com/jnordberg/gif.js
114
114
  (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){var NeuQuant=require("./TypedNeuQuant.js");var LZWEncoder=require("./LZWEncoder.js");function ByteArray(){this.page=-1;this.pages=[];this.newPage()}ByteArray.pageSize=4096;ByteArray.charMap={};for(var i=0;i<256;i++)ByteArray.charMap[i]=String.fromCharCode(i);ByteArray.prototype.newPage=function(){this.pages[++this.page]=new Uint8Array(ByteArray.pageSize);this.cursor=0};ByteArray.prototype.getData=function(){var rv="";for(var p=0;p<this.pages.length;p++){for(var i=0;i<ByteArray.pageSize;i++){rv+=ByteArray.charMap[this.pages[p][i]]}}return rv};ByteArray.prototype.writeByte=function(val){if(this.cursor>=ByteArray.pageSize)this.newPage();this.pages[this.page][this.cursor++]=val};ByteArray.prototype.writeUTFBytes=function(string){for(var l=string.length,i=0;i<l;i++)this.writeByte(string.charCodeAt(i))};ByteArray.prototype.writeBytes=function(array,offset,length){for(var l=length||array.length,i=offset||0;i<l;i++)this.writeByte(array[i])};function GIFEncoder(width,height){this.width=~~width;this.height=~~height;this.transparent=null;this.transIndex=0;this.repeat=-1;this.delay=0;this.image=null;this.pixels=null;this.indexedPixels=null;this.colorDepth=null;this.colorTab=null;this.neuQuant=null;this.usedEntry=new Array;this.palSize=7;this.dispose=-1;this.firstFrame=true;this.sample=10;this.dither=false;this.globalPalette=false;this.out=new ByteArray}GIFEncoder.prototype.setDelay=function(milliseconds){this.delay=Math.round(milliseconds/10)};GIFEncoder.prototype.setFrameRate=function(fps){this.delay=Math.round(100/fps)};GIFEncoder.prototype.setDispose=function(disposalCode){if(disposalCode>=0)this.dispose=disposalCode};GIFEncoder.prototype.setRepeat=function(repeat){this.repeat=repeat};GIFEncoder.prototype.setTransparent=function(color){this.transparent=color};GIFEncoder.prototype.addFrame=function(imageData){this.image=imageData;this.colorTab=this.globalPalette&&this.globalPalette.slice?this.globalPalette:null;this.getImagePixels();this.analyzePixels();if(this.globalPalette===true)this.globalPalette=this.colorTab;if(this.firstFrame){this.writeLSD();this.writePalette();if(this.repeat>=0){this.writeNetscapeExt()}}this.writeGraphicCtrlExt();this.writeImageDesc();if(!this.firstFrame&&!this.globalPalette)this.writePalette();this.writePixels();this.firstFrame=false};GIFEncoder.prototype.finish=function(){this.out.writeByte(59)};GIFEncoder.prototype.setQuality=function(quality){if(quality<1)quality=1;this.sample=quality};GIFEncoder.prototype.setDither=function(dither){if(dither===true)dither="FloydSteinberg";this.dither=dither};GIFEncoder.prototype.setGlobalPalette=function(palette){this.globalPalette=palette};GIFEncoder.prototype.getGlobalPalette=function(){return this.globalPalette&&this.globalPalette.slice&&this.globalPalette.slice(0)||this.globalPalette};GIFEncoder.prototype.writeHeader=function(){this.out.writeUTFBytes("GIF89a")};GIFEncoder.prototype.analyzePixels=function(){if(!this.colorTab){this.neuQuant=new NeuQuant(this.pixels,this.sample);this.neuQuant.buildColormap();this.colorTab=this.neuQuant.getColormap()}if(this.dither){this.ditherPixels(this.dither.replace("-serpentine",""),this.dither.match(/-serpentine/)!==null)}else{this.indexPixels()}this.pixels=null;this.colorDepth=8;this.palSize=7;if(this.transparent!==null){this.transIndex=this.findClosest(this.transparent,true)}};GIFEncoder.prototype.indexPixels=function(imgq){var nPix=this.pixels.length/3;this.indexedPixels=new Uint8Array(nPix);var k=0;for(var j=0;j<nPix;j++){var index=this.findClosestRGB(this.pixels[k++]&255,this.pixels[k++]&255,this.pixels[k++]&255);this.usedEntry[index]=true;this.indexedPixels[j]=index}};GIFEncoder.prototype.ditherPixels=function(kernel,serpentine){var kernels={FalseFloydSteinberg:[[3/8,1,0],[3/8,0,1],[2/8,1,1]],FloydSteinberg:[[7/16,1,0],[3/16,-1,1],[5/16,0,1],[1/16,1,1]],Stucki:[[8/42,1,0],[4/42,2,0],[2/42,-2,1],[4/42,-1,1],[8/42,0,1],[4/42,1,1],[2/42,2,1],[1/42,-2,2],[2/42,-1,2],[4/42,0,2],[2/42,1,2],[1/42,2,2]],Atkinson:[[1/8,1,0],[1/8,2,0],[1/8,-1,1],[1/8,0,1],[1/8,1,1],[1/8,0,2]]};if(!kernel||!kernels[kernel]){throw"Unknown dithering kernel: "+kernel}var ds=kernels[kernel];var index=0,height=this.height,width=this.width,data=this.pixels;var direction=serpentine?-1:1;this.indexedPixels=new Uint8Array(this.pixels.length/3);for(var y=0;y<height;y++){if(serpentine)direction=direction*-1;for(var x=direction==1?0:width-1,xend=direction==1?width:0;x!==xend;x+=direction){index=y*width+x;var idx=index*3;var r1=data[idx];var g1=data[idx+1];var b1=data[idx+2];idx=this.findClosestRGB(r1,g1,b1);this.usedEntry[idx]=true;this.indexedPixels[index]=idx;idx*=3;var r2=this.colorTab[idx];var g2=this.colorTab[idx+1];var b2=this.colorTab[idx+2];var er=r1-r2;var eg=g1-g2;var eb=b1-b2;for(var i=direction==1?0:ds.length-1,end=direction==1?ds.length:0;i!==end;i+=direction){var x1=ds[i][1];var y1=ds[i][2];if(x1+x>=0&&x1+x<width&&y1+y>=0&&y1+y<height){var d=ds[i][0];idx=index+x1+y1*width;idx*=3;data[idx]=Math.max(0,Math.min(255,data[idx]+er*d));data[idx+1]=Math.max(0,Math.min(255,data[idx+1]+eg*d));data[idx+2]=Math.max(0,Math.min(255,data[idx+2]+eb*d))}}}}};GIFEncoder.prototype.findClosest=function(c,used){return this.findClosestRGB((c&16711680)>>16,(c&65280)>>8,c&255,used)};GIFEncoder.prototype.findClosestRGB=function(r,g,b,used){if(this.colorTab===null)return-1;if(this.neuQuant&&!used){return this.neuQuant.lookupRGB(r,g,b)}var c=b|g<<8|r<<16;var minpos=0;var dmin=256*256*256;var len=this.colorTab.length;for(var i=0,index=0;i<len;index++){var dr=r-(this.colorTab[i++]&255);var dg=g-(this.colorTab[i++]&255);var db=b-(this.colorTab[i++]&255);var d=dr*dr+dg*dg+db*db;if((!used||this.usedEntry[index])&&d<dmin){dmin=d;minpos=index}}return minpos};GIFEncoder.prototype.getImagePixels=function(){var w=this.width;var h=this.height;this.pixels=new Uint8Array(w*h*3);var data=this.image;var srcPos=0;var count=0;for(var i=0;i<h;i++){for(var j=0;j<w;j++){this.pixels[count++]=data[srcPos++];this.pixels[count++]=data[srcPos++];this.pixels[count++]=data[srcPos++];srcPos++}}};GIFEncoder.prototype.writeGraphicCtrlExt=function(){this.out.writeByte(33);this.out.writeByte(249);this.out.writeByte(4);var transp,disp;if(this.transparent===null){transp=0;disp=0}else{transp=1;disp=2}if(this.dispose>=0){disp=dispose&7}disp<<=2;this.out.writeByte(0|disp|0|transp);this.writeShort(this.delay);this.out.writeByte(this.transIndex);this.out.writeByte(0)};GIFEncoder.prototype.writeImageDesc=function(){this.out.writeByte(44);this.writeShort(0);this.writeShort(0);this.writeShort(this.width);this.writeShort(this.height);if(this.firstFrame||this.globalPalette){this.out.writeByte(0)}else{this.out.writeByte(128|0|0|0|this.palSize)}};GIFEncoder.prototype.writeLSD=function(){this.writeShort(this.width);this.writeShort(this.height);this.out.writeByte(128|112|0|this.palSize);this.out.writeByte(0);this.out.writeByte(0)};GIFEncoder.prototype.writeNetscapeExt=function(){this.out.writeByte(33);this.out.writeByte(255);this.out.writeByte(11);this.out.writeUTFBytes("NETSCAPE2.0");this.out.writeByte(3);this.out.writeByte(1);this.writeShort(this.repeat);this.out.writeByte(0)};GIFEncoder.prototype.writePalette=function(){this.out.writeBytes(this.colorTab);var n=3*256-this.colorTab.length;for(var i=0;i<n;i++)this.out.writeByte(0)};GIFEncoder.prototype.writeShort=function(pValue){this.out.writeByte(pValue&255);this.out.writeByte(pValue>>8&255)};GIFEncoder.prototype.writePixels=function(){var enc=new LZWEncoder(this.width,this.height,this.indexedPixels,this.colorDepth);enc.encode(this.out)};GIFEncoder.prototype.stream=function(){return this.out};module.exports=GIFEncoder},{"./LZWEncoder.js":2,"./TypedNeuQuant.js":3}],2:[function(require,module,exports){var EOF=-1;var BITS=12;var HSIZE=5003;var masks=[0,1,3,7,15,31,63,127,255,511,1023,2047,4095,8191,16383,32767,65535];function LZWEncoder(width,height,pixels,colorDepth){var initCodeSize=Math.max(2,colorDepth);var accum=new Uint8Array(256);var htab=new Int32Array(HSIZE);var codetab=new Int32Array(HSIZE);var cur_accum,cur_bits=0;var a_count;var free_ent=0;var maxcode;var clear_flg=false;var g_init_bits,ClearCode,EOFCode;function char_out(c,outs){accum[a_count++]=c;if(a_count>=254)flush_char(outs)}function cl_block(outs){cl_hash(HSIZE);free_ent=ClearCode+2;clear_flg=true;output(ClearCode,outs)}function cl_hash(hsize){for(var i=0;i<hsize;++i)htab[i]=-1}function compress(init_bits,outs){var fcode,c,i,ent,disp,hsize_reg,hshift;g_init_bits=init_bits;clear_flg=false;n_bits=g_init_bits;maxcode=MAXCODE(n_bits);ClearCode=1<<init_bits-1;EOFCode=ClearCode+1;free_ent=ClearCode+2;a_count=0;ent=nextPixel();hshift=0;for(fcode=HSIZE;fcode<65536;fcode*=2)++hshift;hshift=8-hshift;hsize_reg=HSIZE;cl_hash(hsize_reg);output(ClearCode,outs);outer_loop:while((c=nextPixel())!=EOF){fcode=(c<<BITS)+ent;i=c<<hshift^ent;if(htab[i]===fcode){ent=codetab[i];continue}else if(htab[i]>=0){disp=hsize_reg-i;if(i===0)disp=1;do{if((i-=disp)<0)i+=hsize_reg;if(htab[i]===fcode){ent=codetab[i];continue outer_loop}}while(htab[i]>=0)}output(ent,outs);ent=c;if(free_ent<1<<BITS){codetab[i]=free_ent++;htab[i]=fcode}else{cl_block(outs)}}output(ent,outs);output(EOFCode,outs)}function encode(outs){outs.writeByte(initCodeSize);remaining=width*height;curPixel=0;compress(initCodeSize+1,outs);outs.writeByte(0)}function flush_char(outs){if(a_count>0){outs.writeByte(a_count);outs.writeBytes(accum,0,a_count);a_count=0}}function MAXCODE(n_bits){return(1<<n_bits)-1}function nextPixel(){if(remaining===0)return EOF;--remaining;var pix=pixels[curPixel++];return pix&255}function output(code,outs){cur_accum&=masks[cur_bits];if(cur_bits>0)cur_accum|=code<<cur_bits;else cur_accum=code;cur_bits+=n_bits;while(cur_bits>=8){char_out(cur_accum&255,outs);cur_accum>>=8;cur_bits-=8}if(free_ent>maxcode||clear_flg){if(clear_flg){maxcode=MAXCODE(n_bits=g_init_bits);clear_flg=false}else{++n_bits;if(n_bits==BITS)maxcode=1<<BITS;else maxcode=MAXCODE(n_bits)}}if(code==EOFCode){while(cur_bits>0){char_out(cur_accum&255,outs);cur_accum>>=8;cur_bits-=8}flush_char(outs)}}this.encode=encode}module.exports=LZWEncoder},{}],3:[function(require,module,exports){var ncycles=100;var netsize=256;var maxnetpos=netsize-1;var netbiasshift=4;var intbiasshift=16;var intbias=1<<intbiasshift;var gammashift=10;var gamma=1<<gammashift;var betashift=10;var beta=intbias>>betashift;var betagamma=intbias<<gammashift-betashift;var initrad=netsize>>3;var radiusbiasshift=6;var radiusbias=1<<radiusbiasshift;var initradius=initrad*radiusbias;var radiusdec=30;var alphabiasshift=10;var initalpha=1<<alphabiasshift;var alphadec;var radbiasshift=8;var radbias=1<<radbiasshift;var alpharadbshift=alphabiasshift+radbiasshift;var alpharadbias=1<<alpharadbshift;var prime1=499;var prime2=491;var prime3=487;var prime4=503;var minpicturebytes=3*prime4;function NeuQuant(pixels,samplefac){var network;var netindex;var bias;var freq;var radpower;function init(){network=[];netindex=new Int32Array(256);bias=new Int32Array(netsize);freq=new Int32Array(netsize);radpower=new Int32Array(netsize>>3);var i,v;for(i=0;i<netsize;i++){v=(i<<netbiasshift+8)/netsize;network[i]=new Float64Array([v,v,v,0]);freq[i]=intbias/netsize;bias[i]=0}}function unbiasnet(){for(var i=0;i<netsize;i++){network[i][0]>>=netbiasshift;network[i][1]>>=netbiasshift;network[i][2]>>=netbiasshift;network[i][3]=i}}function altersingle(alpha,i,b,g,r){network[i][0]-=alpha*(network[i][0]-b)/initalpha;network[i][1]-=alpha*(network[i][1]-g)/initalpha;network[i][2]-=alpha*(network[i][2]-r)/initalpha}function alterneigh(radius,i,b,g,r){var lo=Math.abs(i-radius);var hi=Math.min(i+radius,netsize);var j=i+1;var k=i-1;var m=1;var p,a;while(j<hi||k>lo){a=radpower[m++];if(j<hi){p=network[j++];p[0]-=a*(p[0]-b)/alpharadbias;p[1]-=a*(p[1]-g)/alpharadbias;p[2]-=a*(p[2]-r)/alpharadbias}if(k>lo){p=network[k--];p[0]-=a*(p[0]-b)/alpharadbias;p[1]-=a*(p[1]-g)/alpharadbias;p[2]-=a*(p[2]-r)/alpharadbias}}}function contest(b,g,r){var bestd=~(1<<31);var bestbiasd=bestd;var bestpos=-1;var bestbiaspos=bestpos;var i,n,dist,biasdist,betafreq;for(i=0;i<netsize;i++){n=network[i];dist=Math.abs(n[0]-b)+Math.abs(n[1]-g)+Math.abs(n[2]-r);if(dist<bestd){bestd=dist;bestpos=i}biasdist=dist-(bias[i]>>intbiasshift-netbiasshift);if(biasdist<bestbiasd){bestbiasd=biasdist;bestbiaspos=i}betafreq=freq[i]>>betashift;freq[i]-=betafreq;bias[i]+=betafreq<<gammashift}freq[bestpos]+=beta;bias[bestpos]-=betagamma;return bestbiaspos}function inxbuild(){var i,j,p,q,smallpos,smallval,previouscol=0,startpos=0;for(i=0;i<netsize;i++){p=network[i];smallpos=i;smallval=p[1];for(j=i+1;j<netsize;j++){q=network[j];if(q[1]<smallval){smallpos=j;smallval=q[1]}}q=network[smallpos];if(i!=smallpos){j=q[0];q[0]=p[0];p[0]=j;j=q[1];q[1]=p[1];p[1]=j;j=q[2];q[2]=p[2];p[2]=j;j=q[3];q[3]=p[3];p[3]=j}if(smallval!=previouscol){netindex[previouscol]=startpos+i>>1;for(j=previouscol+1;j<smallval;j++)netindex[j]=i;previouscol=smallval;startpos=i}}netindex[previouscol]=startpos+maxnetpos>>1;for(j=previouscol+1;j<256;j++)netindex[j]=maxnetpos}function inxsearch(b,g,r){var a,p,dist;var bestd=1e3;var best=-1;var i=netindex[g];var j=i-1;while(i<netsize||j>=0){if(i<netsize){p=network[i];dist=p[1]-g;if(dist>=bestd)i=netsize;else{i++;if(dist<0)dist=-dist;a=p[0]-b;if(a<0)a=-a;dist+=a;if(dist<bestd){a=p[2]-r;if(a<0)a=-a;dist+=a;if(dist<bestd){bestd=dist;best=p[3]}}}}if(j>=0){p=network[j];dist=g-p[1];if(dist>=bestd)j=-1;else{j--;if(dist<0)dist=-dist;a=p[0]-b;if(a<0)a=-a;dist+=a;if(dist<bestd){a=p[2]-r;if(a<0)a=-a;dist+=a;if(dist<bestd){bestd=dist;best=p[3]}}}}}return best}function learn(){var i;var lengthcount=pixels.length;var alphadec=30+(samplefac-1)/3;var samplepixels=lengthcount/(3*samplefac);var delta=~~(samplepixels/ncycles);var alpha=initalpha;var radius=initradius;var rad=radius>>radiusbiasshift;if(rad<=1)rad=0;for(i=0;i<rad;i++)radpower[i]=alpha*((rad*rad-i*i)*radbias/(rad*rad));var step;if(lengthcount<minpicturebytes){samplefac=1;step=3}else if(lengthcount%prime1!==0){step=3*prime1}else if(lengthcount%prime2!==0){step=3*prime2}else if(lengthcount%prime3!==0){step=3*prime3}else{step=3*prime4}var b,g,r,j;var pix=0;i=0;while(i<samplepixels){b=(pixels[pix]&255)<<netbiasshift;g=(pixels[pix+1]&255)<<netbiasshift;r=(pixels[pix+2]&255)<<netbiasshift;j=contest(b,g,r);altersingle(alpha,j,b,g,r);if(rad!==0)alterneigh(rad,j,b,g,r);pix+=step;if(pix>=lengthcount)pix-=lengthcount;i++;if(delta===0)delta=1;if(i%delta===0){alpha-=alpha/alphadec;radius-=radius/radiusdec;rad=radius>>radiusbiasshift;if(rad<=1)rad=0;for(j=0;j<rad;j++)radpower[j]=alpha*((rad*rad-j*j)*radbias/(rad*rad))}}}function buildColormap(){init();learn();unbiasnet();inxbuild()}this.buildColormap=buildColormap;function getColormap(){var map=[];var index=[];for(var i=0;i<netsize;i++)index[network[i][3]]=i;var k=0;for(var l=0;l<netsize;l++){var j=index[l];map[k++]=network[j][0];map[k++]=network[j][1];map[k++]=network[j][2]}return map}this.getColormap=getColormap;this.lookupRGB=inxsearch}module.exports=NeuQuant},{}],4:[function(require,module,exports){var GIFEncoder,renderFrame;GIFEncoder=require("./GIFEncoder.js");renderFrame=function(frame){var encoder,page,stream,transfer;encoder=new GIFEncoder(frame.width,frame.height);if(frame.index===0){encoder.writeHeader()}else{encoder.firstFrame=false}encoder.setTransparent(frame.transparent);encoder.setRepeat(frame.repeat);encoder.setDelay(frame.delay);encoder.setQuality(frame.quality);encoder.setDither(frame.dither);encoder.setGlobalPalette(frame.globalPalette);encoder.addFrame(frame.data);if(frame.last){encoder.finish()}if(frame.globalPalette===true){frame.globalPalette=encoder.getGlobalPalette()}stream=encoder.stream();frame.data=stream.pages;frame.cursor=stream.cursor;frame.pageSize=stream.constructor.pageSize;if(frame.canTransfer){transfer=function(){var i,len,ref,results;ref=frame.data;results=[];for(i=0,len=ref.length;i<len;i++){page=ref[i];results.push(page.buffer)}return results}();return self.postMessage(frame,transfer)}else{return self.postMessage(frame)}};self.onmessage=function(event){return renderFrame(event.data)}},{"./GIFEncoder.js":1}]},{},[4]);
115
115
  `],{type:"application/javascript"}))})}async function lT(e){for(let t=0;t<30;t++){let t=await e();if(t)return t;await new Promise(e=>setTimeout(e,50))}}function lA(e){return new Promise(t=>{let n=document.createElement("img");n.onload=async()=>{0===n.width||0===n.height?t(await iQ(e)):t({width:n.width,height:n.height})},n.crossOrigin="anonymous",n.src=e})}function lN(e){return new Promise((t,n)=>{let r=document.createElement("img");r.onload=()=>{t(r)},r.onerror=e=>{n(e)},r.crossOrigin="anonymous",r.src=e})}async function lj(e,t){let n,r;let i=await lN(e),o=document.createElement("canvas");o.width=2*i.width,o.height=2*i.height,o.getContext("2d").drawImage(i,0,0,o.width,o.height);let a=document.createElement("canvas");a.width=t.width,a.height=t.height;let l=a.getContext("2d"),{cropX:s,cropY:u}=t,c=o.width*t.cropWidth,d=o.height*t.cropHeight,h=t.width/t.height,f=c/d;return"svg"===t.type?(n=c,r=d):h>=f?(n=c,r=c/h):(n=d*h,r=d),l.drawImage(o,s*o.width,u*o.height,n,r,0,0,a.width,a.height),a.toDataURL("image/png")}function lR(e,t){let n,r;let{width:i,height:o}=e,a=i/o;a>=t.width/t.height?(n=t.width,r=t.width/a):(n=t.height*a,r=t.height);let l=(t.width-n)/2,s=(t.height-r)/2;return{cropX:l/t.width,cropY:s/t.height,cropWidth:n/t.width,cropHeight:r/t.height}}let lI=(e,t,...n)=>({type:e,props:t,children:n||[]}),lL=async({element:e,page:t,store:n})=>{let r,i,{src:o}=e;"svg"===e.type&&Object.keys(e.colorsReplace).length&&(o=i1(await iX(o),new Map(Object.entries(e.colorsReplace))));let a="";e.flipX&&(a+="scaleX(-1)"),e.flipY&&(a+="scaleY(-1)"),a||(a="none");let l={};if(e.clipSrc){let t=await iY(e.clipSrc);l["clip-path"]=`url(${t})`}let s=await lN(o),u=s.width*e.cropWidth,c=s.height*e.cropHeight,d=e.width/e.height;"svg"===e.type?(r=u,i=c):d>=u/c?(r=u,i=u/d):(r=c*d,i=c);let h=r/s.width,f=i/s.height,p=r/i>e.width/e.height?e.height/i:e.width/r,g=r*p/h,m=i*p/f,v=e.cropX*p*s.width,y=e.cropY*p*s.height;return lI("div",{style:{...l,width:"100%",height:"100%","border-radius":e.cornerRadius+"px",border:e.borderSize?`${e.borderSize}px solid ${e.borderColor}`:"none",background:`url(${o})`,transform:a,"background-size":`${Math.round(g)}px ${Math.round(m)}px`,"background-position-x":`${-Math.round(v)}px`,"background-position-y":`${-Math.round(y)}px`}})},lM=({element:e,type:t})=>{let n={"stroke-width":e.height,stroke:e.color,"line-cap":"round","stroke-linejoin":"round",opacity:e.opacity};return"arrow"===t||"triangle"===t?lI("polyline",{points:`${3*e.height},${-(2*e.height)} 0,0 ${3*e.height},${2*e.height}`,...n}):"bar"===t?lI("polyline",{points:`0,${-(2*e.height)} 0,${2*e.height}`,...n}):"circle"===t?lI("circle",{r:e.height,...n}):"square"===t?lI("polyline",{points:`${-e.height},${-e.height} ${-e.height},${e.height} ${e.height},${e.height} ${e.height},${-e.height}`,...n}):null},lD={image:lL,svg:lL,text:async({element:e,page:t,store:n})=>{let r={};e.fill.indexOf("gradient")>=0&&(r={...r,"background-color":e.fill,"background-image":e.fill,"background-clip":"text","text-fill-color":"transparent","-webkit-background-clip":"text","-webkit-text-fill-color":"transparent"});let i=e.backgroundPadding*(e.fontSize*e.lineHeight),o=lI("div",{style:{position:"absolute",top:-i/2+"px",left:-i/2+"px",display:e.backgroundEnabled?"block":"none",width:e.width+i+"px",height:e.height+i+"px","background-color":e.backgroundColor,"border-radius":e.backgroundCornerRadius*(e.fontSize*e.lineHeight*.5)+"px"}}),a=lI("div",{style:{...r,position:"absolute",top:0,left:0,width:e.width+"px",color:e.fill,"white-space":"pre-wrap","font-size":e.fontSize+"px","text-align":e.align,"font-family":e.fontFamily,"text-decoration":e.textDecoration||"none","line-height":e.lineHeight,"letter-spacing":e.letterSpacing+"em","font-style":e.fontStyle,"font-weight":e.fontWeight,"-webkit-text-stroke":`${e.strokeWidth}px ${e.stroke}`,"text-stroke":`${e.strokeWidth}px ${e.stroke}`}},e.text.split("\n").join("<br />"));return lI("div",{style:{position:"relative"}},o,a)},line:async({element:e,page:t,store:n})=>lI("svg",{style:{width:"100%",height:"100%",contain:"layout style size",overflow:"visible"}},lI("rect",{x:0,y:0,width:e.width,height:e.height,fill:e.color}),lI("g",{transform:`translate(0 ${e.height/2})`},lM({element:e,type:e.startHead})),lI("g",{transform:`translate(${e.width} ${e.height/2}) rotate(180)`},lM({element:e,type:e.endHead}))),figure:async({element:e,page:t,store:n,elementHook:r})=>{let i=lI("div",{innerHTML:aD(e)});return r&&r({dom:i,element:e})||i},group:async({element:e,page:t,store:n,elementHook:r})=>{let i=await Promise.all(e.children.map(e=>lF({element:e,page:t,store:n,elementHook:r}))),o=lI("div",{style:{"transform-origin":"top left",opacity:e.opacity}},...i);return r&&r({dom:o,element:e})||o}};async function lF({element:e,page:t,store:n,elementHook:r}){let i=await lD[e.type];i||(i=()=>lI("div",{}),console.error(`HTML export does not support ${e.type} type...`));let o=await i({element:e,page:t,store:n}),a=[];e.blurEnabled&&a.push(`blur(${e.blurRadius/2}px)`),e.brightnessEnabled&&a.push(`brightness(${100*e.brightness+100}%)`),e.sepiaEnabled&&a.push("sepia()"),e.grayscaleEnabled&&a.push("grayscale()"),e.shadowEnabled&&a.push(`drop-shadow(${e.shadowOffsetX}px ${e.shadowOffsetY}px ${e.shadowBlur}px ${e.shadowColor})`);let l=lI("div",{style:{position:"absolute",left:e.x+"px",top:e.y+"px",width:e.width+"px",height:e.height+"px",transform:`rotate(${e.rotation}deg)`,"transform-origin":"top left",opacity:e.opacity,filter:a.join(" ")||"none"}},o);return r&&r({dom:l,element:e})||l}async function lz({page:e,store:t,elementHook:n}){let r=await Promise.all(e.children.map(r=>lF({element:r,page:e,store:t,elementHook:n}))),i={};if(e.background.indexOf("url")>=0||e.background.indexOf("http")>=0||e.background.indexOf(".jpg")>=0||e.background.indexOf(".png")>=0||e.background.indexOf(".jpeg")>=0){let{width:n,height:i}=await lN(e.background),o=await lL({element:{x:0,y:0,width:t.width,height:t.height,src:e.background,cornerRadius:0,...lR({width:t.width,height:t.height},{width:n,height:i})},page:e,store:t});r.unshift(o)}else i={...i,"background-color":e.background};return lI("div",{className:"page",style:{...i,width:t.width+"px",height:t.height+"px",border:"1px solid grey",overflow:"hidden",position:"relative"}},...r)}async function lB({json:e,elementHook:t}){let n=await Promise.all(e.pages.map(n=>lz({page:n,store:e,elementHook:t}))),r=[];e.pages.forEach(e=>{e.children.forEach(e=>{"text"===e.type&&-1===r.indexOf(e.fontFamily)&&r.push(e.fontFamily)})});let i=r.map(t=>e.fonts.find(e=>e.fontFamily===t)?lI("style",{},""):lI("link",{href:`https://fonts.googleapis.com/css?family=${t}`,rel:"stylesheet"}));return lI("div",{className:"design"},...i,...n)}let lU=(e,t)=>"object"==typeof t?`${e}="${Object.keys(t).map(e=>`${e}:${t[e]};`).join(" ")}"`:`${e}="${t}"`,lH=({dom:e})=>{if("string"==typeof e)return e;if(!e)return"";let{innerHTML:t,...n}=e.props;return`<${e.type} ${Object.keys(n).map(t=>lU(t,e.props[t])).join(" ")}>${t||e.children.map(e=>lH({dom:e})).join("")}</${e.type}>`};async function lV({json:e,elementHook:t}){return lH({dom:await lB({json:e,elementHook:t})})}let lq=(e,t,...n)=>({type:e,props:t,children:n||[]}),lG=async e=>{let t=await lN(e),n=document.createElement("canvas");return n.width=t.width,n.height=t.height,n.getContext("2d").drawImage(t,0,0),n.toDataURL("image/png")},lW=async({element:e,page:t,store:n})=>{let r,i,{src:o}=e;"svg"===e.type&&(o=i1(await iX(o),new Map(Object.entries(e.colorsReplace))));let a="";e.flipX&&(a+="scaleX(-1)"),e.flipY&&(a+="scaleY(-1)");let l={};if(e.clipSrc){let t=await iY(e.clipSrc);l["clip-path"]=`url(${t})`}let s=await lN(o),u=s.width*e.cropWidth,c=s.height*e.cropHeight,d=e.width/e.height;"svg"===e.type?(r=u,i=c):d>=u/c?(r=u,i=u/d):(r=c*d,i=c);let h=r/s.width,f=i/s.height,p=r/i>e.width/e.height?e.height/i:e.width/r,g=r*p/h,m=i*p/f,v=e.cropX*p*s.width,y=e.cropY*p*s.height,b=`clip-${Math.random()}`;return lq("g",{style:{"clip-path":l["clip-path"],transform:a}},lq("defs",{},lq("clipPath",{id:b},lq("rect",{x:v,y:y,width:g,height:m}))),lq("image",{"xlink:href":await lG(o),width:e.width,height:e.height,preserveAspectRatio:"none","clip-path":`url(#${b})`}))},l$=({element:e,type:t})=>{let n={"stroke-width":e.height,stroke:e.color,"line-cap":"round","stroke-linejoin":"round",opacity:e.opacity};return"arrow"===t||"triangle"===t?lq("polyline",{points:`${3*e.height},${-(2*e.height)} 0,0 ${3*e.height},${2*e.height}`,...n}):"bar"===t?lq("polyline",{points:`0,${-(2*e.height)} 0,${2*e.height}`,...n}):"circle"===t?lq("circle",{r:e.height,...n}):"square"===t?lq("polyline",{points:`${-e.height},${-e.height} ${-e.height},${e.height} ${e.height},${e.height} ${e.height},${-e.height}`,...n}):null},lK={image:lW,svg:lW,text:async({element:e,page:t,store:n})=>{let r={};e.fill.indexOf("gradient")>=0&&(r={...r,"background-color":e.fill,"background-image":e.fill,"background-clip":"text","text-fill-color":"transparent","-webkit-background-clip":"text","-webkit-text-fill-color":"transparent"});let i=e.backgroundPadding*(e.fontSize*e.lineHeight),o=lq("div",{style:{position:"absolute",top:-i/2+"px",left:-i/2+"px",display:e.backgroundEnabled?"block":"none",width:e.width+i+"px",height:e.height+i+"px","background-color":e.backgroundColor,"border-radius":e.backgroundCornerRadius*(e.fontSize*e.lineHeight*.5)+"px"}}),a=lq("div",{style:{...r,position:"absolute",top:0,left:0,width:e.width+"px",color:e.fill,"white-space":"pre-wrap","font-size":e.fontSize+"px","text-align":e.align,"font-family":e.fontFamily,"text-decoration":e.textDecoration||"none","line-height":e.lineHeight,"letter-spacing":e.letterSpacing+"em","font-style":e.fontStyle,"font-weight":e.fontWeight,"-webkit-text-stroke":`${e.strokeWidth}px ${e.stroke}`,"text-stroke":`${e.strokeWidth}px ${e.stroke}`}},e.text.split("\n").join("<br />"));return lq("foreignObject",{width:e.width,height:e.height},lq("div",{style:{position:"relative"},xmlns:"http://www.w3.org/1999/xhtml"},o,a))},line:async({element:e,page:t,store:n})=>lq("svg",{style:{width:"100%",height:"100%",contain:"layout style size",overflow:"visible"}},lq("rect",{x:0,y:0,width:e.width,height:e.height,fill:e.color}),lq("g",{transform:`translate(0 ${e.height/2})`},l$({element:e,type:e.startHead})),lq("g",{transform:`translate(${e.width} ${e.height/2}) rotate(180)`},l$({element:e,type:e.endHead}))),group:async({element:e,page:t,store:n,elementHook:r})=>{let i=await Promise.all(e.children.map(e=>lY({element:e,page:t,store:n,elementHook:r}))),o=lq("g",{opacity:e.opacity,style:{"transform-origin":"top left"}},...i);return r&&r({dom:o,element:e})||o}};async function lY({element:e,page:t,store:n,elementHook:r}){let i=await lK[e.type];i||(i=()=>lq("div",{}),console.error(`HTML export does not support ${e.type} type...`));let o=await i({element:e,page:t,store:n}),a=[];e.blurEnabled&&a.push(`blur(${e.blurRadius/2}px)`),e.brightnessEnabled&&a.push(`brightness(${100*e.brightness+100}%)`),e.sepiaEnabled&&a.push("sepia()"),e.grayscaleEnabled&&a.push("grayscale()"),e.shadowEnabled&&a.push(`drop-shadow(${e.shadowOffsetX}px ${e.shadowOffsetY}px ${e.shadowBlur}px ${e.shadowColor})`);let l=lq("g",{transform:`translate(${e.x}, ${e.y}) rotate(${e.rotation})`,rotation:e.rotation,width:e.width,height:e.height,opacity:e.opacity,style:{"transform-origin":"top left",filter:a.join(" ")}},o);return r&&r({dom:l,element:e})||l}async function lX({page:e,store:t,elementHook:n}){let r=await Promise.all(e.children.map(r=>lY({element:r,page:e,store:t,elementHook:n}))),i={};if(e.background.indexOf("url")>=0||e.background.indexOf("http")>=0||e.background.indexOf(".jpg")>=0||e.background.indexOf(".png")>=0||e.background.indexOf(".jpeg")>=0){let n=await lN(e.background),r=await lj(e.background,{width:t.width,height:t.height,x:0,y:0,...lR({width:t.width,height:t.height},{width:n.width,height:n.height})});i={...i,"background-image":`url(${r})`}}return lq("g",{className:"page",style:{...i,background:e.background}},lq("rect",{x:0,y:0,width:t.width,height:t.height,fill:e.background}),...r)}async function lZ({json:e,elementHook:t}){let n=await Promise.all(e.pages.map(n=>lX({page:n,store:e,elementHook:t}))),r=[];e.pages.forEach(e=>{e.children.forEach(e=>{"text"===e.type&&-1===r.indexOf(e.fontFamily)&&r.push(e.fontFamily)})});let i=r.map(t=>e.fonts.find(e=>e.fontFamily===t)?lq("style",{},""):lq("link",{href:`https://fonts.googleapis.com/css?family=${t}`,rel:"stylesheet"}));return lq("svg",{xmlns:"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink",viewBox:`0 0 ${e.width} ${e.height}`,preserveAspectRatio:"xMidYMin slice"},...i,...n)}let lQ=(e,t)=>"object"==typeof t?`${e}="${Object.keys(t).map(e=>`${e}:${t[e]};`).join(" ")}"`:`${e}="${t}"`,lJ=({dom:e})=>"string"==typeof e?e:e?`<${e.type} ${Object.keys(e.props).map(t=>lQ(t,e.props[t])).join(" ")}>${e.children.map(e=>lJ({dom:e})).join("")}</${e.type}>
116
116
  `:"";async function l0({json:e,elementHook:t}){return lJ({dom:await lZ({json:e,elementHook:t})})}var iM=h("58B0H");let l1=(0,iM.types).model("Page",{id:iM.types.identifier,children:(0,iM.types).array((0,iM.types).late(()=>ss)),width:(0,iM.types).optional((0,iM.types).union(iM.types.number,(0,iM.types).literal("auto")),"auto"),height:(0,iM.types).optional((0,iM.types).union(iM.types.number,(0,iM.types).literal("auto")),"auto"),background:"white",bleed:0,custom:(0,iM.types).frozen(),duration:5e3,_exporting:!1,_rendering:!1}).postProcessSnapshot(e=>{let t={...e},n={};for(var r in t)"_"!==r[0]&&(n[r]=e[r]);return n}).views(e=>({get store(){return(0,iM.getParentOfType)(e,l3)},get startTime(){let t=0;for(let n of e.store.pages){if(n.id===e.id)break;t+=n.duration}return t}})).views(e=>({get computedWidth(){if("auto"===e.width)return e.store.width;return e.width},get computedHeight(){if("auto"===e.height)return e.store.height;return e.height}})).actions(e=>({toJSON:()=>JSON.parse(JSON.stringify((0,iM.getSnapshot)(e))),_forEachElementUp(t,n){let r=t.map(t=>({id:t,index:e.children.findIndex(e=>e.id===t)}));for(let{index:i}of(r.sort((e,t)=>t.index-e.index),r)){if(-1==i)continue;let r=i<e.children.length-1&&e.children[i+1],o=t.indexOf(r?.id)>=0;i===e.children.length-1||o||n(i)}},_forEachElementDown(t,n){let r=t.map(t=>({id:t,index:e.children.findIndex(e=>e.id===t)}));for(let{index:i}of(r.sort((e,t)=>e.index-t.index),r)){if(-1==i)continue;let r=i>0&&e.children[i-1],o=t.indexOf(r?.id)>=0;0===i||o||n(i)}return!1}})).actions(e=>({clone(t={}){let n=e.toJSON();n.children.forEach(e=>{e.id=lS(10),sa(e,e=>{e.id=lS(10)})});let r={...n,id:lS(10),...t},i=e.store.addPage(r),o=e.store.pages.indexOf(e);i.setZIndex(o+1),i.select()},setZIndex(t){e.store.setPageZIndex(e.id,t)},set(t){Object.assign(e,t)},select(){e.store.selectPage(e.id)},addElement(t,{skipSelect:n=!1}={}){let r=sd[t.type];if(!r){console.error("Can not find model with type "+t.type);return}t.children&&t.children.forEach(e=>{e.id=lS(10)});let i=r.create({id:lS(10),...t});return e.children.push(i),i.selectable&&!n&&e.store.selectElements([i.id]),i},canMoveElementsUp(t){let n=!1;return e._forEachElementUp(t,()=>{n=n||!0}),n},moveElementsUp(t){e._forEachElementUp(t,t=>{let n=e.children[t];(0,iM.detach)(n),e.children.splice(t+1,0,n)})},canMoveElementsTop(e){return this.canMoveElementsUp(e)},moveElementsTop(t){let n=[],r=[];e.children.forEach(e=>{t.indexOf(e.id)>=0?n.push(e):r.push(e)}),e.children.replace(r.concat(n))},canMoveElementsDown(t){let n=!1;return e._forEachElementDown(t,()=>{n=n||!0}),n},moveElementsDown(t){e._forEachElementDown(t,t=>{let n=e.children[t];(0,iM.detach)(n),e.children.splice(t-1,0,n)})},canMoveElementsBottom(e){return this.canMoveElementsDown(e)},moveElementsBottom(t){let n=[],r=[];e.children.forEach(e=>{t.indexOf(e.id)>=0?n.push(e):r.push(e)}),e.children.replace(n.concat(r))},setElementZIndex(t,n){let r=e.children.find(e=>e.id===t);r&&((0,iM.detach)(r),e.children.remove(r),e.children.splice(n,0,r))},setSize({width:t,height:n,useMagic:r,softChange:i}){if(r){let r=t/e.computedWidth,i=n/e.computedHeight,o=Math.min(r,i),a=Math.max(0,(t-e.computedWidth*o)/2),l=Math.max(0,(n-e.computedHeight*o)/2);sa(e,t=>{"group"!==t.type&&("image"===t.type&&t.x<1&&t.y<1&&t.width>=e.computedWidth-2&&t.height>=e.computedHeight-2?t.set({x:t.x*o,y:t.y*o,width:t.width*r,height:t.height*i,cropX:0,cropY:0,cropWidth:1,cropHeight:1}):(t.set({x:a+t.x*o,y:l+t.y*o,width:t.width*o,height:t.height*o}),"text"===t.type?t.set({fontSize:t.fontSize*o}):"figure"===t.type&&t.set({strokeWidth:t.strokeWidth*o})))})}i||(e.width=t),i||(e.height=n)}})).actions(e=>({moveElementUp(t){console.warn("page.moveElementUp(id) is deprecated. Please use page.moveElementsUp([id1, id2]) instead."),e.moveElementsUp([t])},moveElementDown(t){console.warn("page.moveElementDown(id) is deprecated. Please use page.moveElementsDown([id1, id2]) instead."),e.moveElementsDown([t])},moveElementTop(t){console.warn("page.moveElementTop(id) is deprecated. Please use page.moveElementsTop([id1, id2]) instead."),e.moveElementsTop([t])},moveElementBottom(t){console.warn("page.moveElementBottom(id) is deprecated. Please use page.moveElementsBottom([id1, id2]) instead."),e.moveElementsBottom([t])},play(){e.store.play({startTime:e.startTime,endTime:e.startTime+e.duration})}}));(0,iM.setLivelinessChecking)("ignore");let l2=(0,iM.types).model("Font",{fontFamily:iM.types.string,url:(0,iM.types).optional(iM.types.string,""),styles:(0,iM.types).frozen()}).preProcessSnapshot(e=>({...e,fontFamily:e.fontFamily||e.name})),l3=(0,iM.types).model("Store",{role:"",pages:(0,iM.types).array(l1),fonts:(0,iM.types).array(l2),width:1080,height:1080,currentTime:0,isPlaying:!1,scale:1,scaleToFit:1,unit:"px",dpi:72,bleedVisible:!1,rulesVisible:!1,openedSidePanel:"",selectedElementsIds:(0,iM.types).array(iM.types.string),animatedElementsIds:(0,iM.types).array(iM.types.string),history:(0,iM.types).optional(lO,{targetPath:"../pages"}),_elementsPixelRatio:2,_activePageId:""}).views(e=>({get _bleedVisible(){return console.warn("store._bleedVisible is deprecated. Please use store.bleedVisible instead."),e.bleedVisible},get selectedElements(){return e.selectedElementsIds.map(t=>{for(let n of e.pages)for(let e of n.children)if(e.id===t)return e}).filter(e=>!!e)},get children(){return e.pages},get selectedShapes(){let t=[];return sa({children:e.selectedElements},e=>{"group"!==e.type&&t.push(e)}),t},get activePage(){return e.pages.slice().find(t=>t.id===e._activePageId)||(e.pages.length?e.pages[0]:null)},get duration(){let t=0;return e.pages.forEach(e=>{t+=e.duration}),t},get _hasCroppedImages(){return e.find(e=>"image"===e.type&&e._cropModeEnabled)},find(t){let n;return sa({children:e.pages},e=>{if(!n&&t(e))return n=e,!0}),n},getElementById:t=>e.find(e=>e.id===t)})).actions(e=>{let t=0,n=null;return{afterCreate(){e.history.canUndo},setCurrentTime(t){e.currentTime=t},play({animatedElementsIds:r=[],startTime:i=0,currentTime:o=0,endTime:a=e.duration}={}){o&&(console.warn("currentTime property of store.play() is deprecated. Please use startTime instead."),i=o),e.animatedElementsIds=(0,iM.cast)(r),e.currentTime=i,e.isPlaying=!0,t=Date.now(),n=a,requestAnimationFrame(e.seek)},checkActivePage(){for(let t of e.pages){if(e.currentTime>=t.startTime&&e.currentTime<t.startTime+t.duration){e.selectPage(t.id);break}t.duration}},seek(){if(!e.isPlaying)return;let r=Date.now(),i=r-t;t=r,e.currentTime+=i,e.checkActivePage();let o=n||e.duration;e.isPlaying&&e.currentTime<o?requestAnimationFrame(e.seek):e.stop()},stop(){e.isPlaying=!1,e.currentTime=0,e.animatedElementsIds=(0,iM.cast)([]),e.checkActivePage()}}}).actions(e=>({setUnit({unit:t,dpi:n}){e.unit=t||e.unit,e.dpi=n||e.dpi},setRole(t){e.role=t},addPage(t){let n=l1.create({id:lS(10),...t});return e.pages.push(n),e._activePageId=n.id,n},selectPage(t){e._activePageId=t},selectElements(t){let n=t.map(t=>e.getElementById(t)).sort((e,t)=>e.page.children.indexOf(e)-e.page.children.indexOf(t)).filter(e=>!!e).map(e=>e.id);e.selectedElementsIds=(0,iM.cast)(n)},toggleBleed(t){e.bleedVisible=t??!e.bleedVisible},toggleRulers(t){e.rulesVisible=t??!e.rulesVisible},openSidePanel(t){e.openedSidePanel=t},setScale(t){e.scale=t},_setScaleToFit(t){e.scaleToFit=t},setElementsPixelRatio(t){e._elementsPixelRatio=t},setSize(t,n,r){e.pages.forEach(e=>{e.setSize({width:t,height:n,useMagic:r,softChange:!0})}),e.width=t,e.height=n},setPageZIndex(t,n){let r=e.pages.find(e=>e.id===t);r&&((0,iM.detach)(r),e.pages.remove(r),e.pages.splice(n,0,r))},deletePages(t){let n=e.pages.indexOf(e.activePage);t.forEach(t=>{let n=e.pages.find(e=>e.id===t);(0,iM.destroy)(n)});let r=Math.min(e.pages.length-1,n),i=e.pages[r];i&&(e._activePageId=i.id),e.selectedElementsIds=(0,iM.cast)(e.selectedElementsIds.filter(t=>e.getElementById(t)))},groupElements(t){let n=t.map(t=>e.getElementById(t));n.forEach(e=>{e&&(0,iM.detach)(e)});let r=e.activePage,i={id:lS(10),children:n,type:"group"};return r.children.push(i),e.selectedElementsIds=(0,iM.cast)([i.id]),i},ungroupElements(t){let n=t.map(t=>e.getElementById(t)),r=[];n.forEach(e=>{if(e&&"group"===e.type){let t=e.page,n=t.children.indexOf(e);e.children.forEach(e=>{r.push(e.id)}),e.children.forEach(e=>{(0,iM.detach)(e),t.children.push(e)}),t.children.splice(n,1)}}),e.selectedElementsIds=(0,iM.cast)(r)},deleteElements(t){t.forEach(t=>{e.pages.forEach(e=>{let n=e.children.find(e=>e.id===t);n&&(0,iM.destroy)(n)})}),e.selectedElementsIds=(0,iM.cast)(e.selectedElementsIds.filter(t=>e.getElementById(t)))},on(t,n){if("change"===t){let t=e.toJSON();return(0,iM.onSnapshot)(e,r=>{let i=e.toJSON();lC(t,i)||(t=i,n(i))})}},async _toCanvas({pixelRatio:t,ignoreBackground:n,pageId:r,mimeType:i,includeBleed:o}={}){let a=t||1;r=r||e.pages[0]?.id;let s=e.pages.find(e=>e.id===r);if(!s)throw Error(`No page for export with id ${r}`);s?.set({_exporting:!0});let u=await lT(()=>l(A).stages.find(e=>e.getAttr("pageId")===r));if(!u)throw Error(`Export is failed. Can not find stage for page ${r}. Looks like <Workspace /> component is not mounted, but it is required in order to process the export.`);let c=!!u.findOne(".page-container");await e.waitLoading();let d=u.findOne(".page-container");if(!d)throw Error(`Export is failed. Can't find page container. ${c}`);u.find("Transformer").forEach(e=>e.visible(!1)),d.find(".page-background").forEach(e=>e.shadowEnabled(!1)),d.find(".page-background").forEach(e=>e.strokeEnabled(!1)),d.find(".highlighter").forEach(e=>e.visible(!1));let h=d.findOne(".page-background-group"),f=h.clip();h.clip({x:null,y:null,width:null,height:null});let p=d.findOne(".elements-container"),g=p.clip();p.clip({x:null,y:null,width:null,height:null});let m=d.find(e=>e.getAttr("hideInExport"));m.forEach(e=>{e.setAttr("oldVisible",e.visible()),e.hide()});let v=d.find(e=>!e.visible()&&e.getAttr("editModeEnabled"));v.forEach(e=>{e.setAttr("oldVisible",e.visible()),e.show()}),n&&d.find(".page-background").forEach(e=>e.hide());let y=o?s.bleed:0,b=y;!e.bleedVisible&&o||(e.bleedVisible||o?e.bleedVisible&&o?b=0:e.bleedVisible&&!o&&(b=-s.bleed):b=0);let w=document.createElement("canvas");w.width=Math.round((s.computedWidth+2*y)*a),w.height=Math.round((s.computedHeight+2*y)*a);let x=w.getContext("2d");"image/jpeg"===i&&(x.fillStyle="white",x.fillRect(0,0,w.width,w.height));let _=d.scale();d.scale({x:1,y:1});let E=d.toCanvas({x:d.x()-b,y:d.y()-b,width:s.computedWidth+2*y,height:s.computedHeight+2*y,pixelRatio:a});return d.scale(_),x.drawImage(E,0,0,w.width,w.height),l(A).Util.releaseCanvas(E),n&&d.find(".page-background").forEach(e=>e.show()),m.forEach(e=>{e.visible(e.getAttr("oldVisible"))}),v.forEach(e=>{e.visible(e.getAttr("oldVisible"))}),d.find(".page-background").forEach(e=>e.shadowEnabled(!0)),d.find(".page-background").forEach(e=>e.strokeEnabled(!0)),u.find("Transformer").forEach(e=>e.visible(!0)),d.find(".highlighter").forEach(e=>e.visible(!0)),h.clip(f),p.clip(g),s?.set({_exporting:!1}),w},async toDataURL({pixelRatio:t,ignoreBackground:n,pageId:r,mimeType:i,includeBleed:o,quality:a}={}){let s=await e._toCanvas({pixelRatio:t,ignoreBackground:n,pageId:r,mimeType:i,includeBleed:o}),u=s.toDataURL(i,a);return l(A).Util.releaseCanvas(s),u},async toBlob({pixelRatio:t,ignoreBackground:n,pageId:r,mimeType:i,includeBleed:o,quality:a}={}){let s=await e._toCanvas({pixelRatio:t,ignoreBackground:n,pageId:r,mimeType:i,includeBleed:o}),u=new Promise(e=>{s.toBlob(e,i,a)});return l(A).Util.releaseCanvas(s),u},async saveAsImage({fileName:t,...n}={}){let r=n.mimeType||"image/png",i=r.split("/")[1];lk(await e.toDataURL(n),t||"polotno."+i,r)},async _toPDF(n){let r=n.dpi||e.dpi,i=n.parallel||1,o=n.unit||("px"===e.unit?"mm":e.unit),a=n.pixelRatio||1,l=n.pageIds||e.pages.map(e=>e.id),s=e.pages.filter(e=>l.includes(e.id)),u=await (t?Promise.resolve(t):new Promise(e=>{var n=document.createElement("script");n.onload=function(){e(t=window.jspdf.jsPDF)},n.src="https://unpkg.com/jspdf@2.2.0/dist/jspdf.umd.min.js",document.head.appendChild(n)})),c=e=>ln({px:e,unit:o,dpi:r}),d=c(n.cropMarkSize||0),h=s[0]||{},f=n.includeBleed?h.bleed:0,p=c(h.computedWidth+2*f)+2*d,g=c(h.computedHeight+2*f)+2*d;var m=new u({unit:o,orientation:p>g?"landscape":"portrait",format:[p,g],compress:!0,putOnlyUsedFonts:!0});m.deletePage(1);let v=e._elementsPixelRatio;for(let t of(e.setElementsPixelRatio(a),await new Promise(e=>setTimeout(e)),((e,t)=>{for(var n=[],r=0;r<e.length;r+=t)n.push(e.slice(r,r+t));return n})(s,i))){let r=t.map(async t=>{let r=n.includeBleed?t.bleed:0,i=c(t.computedWidth+2*r)+2*d,o=c(t.computedHeight+2*r)+2*d,l=0,s=a;for(;l<10;){2===(l+=1)&&console.error("Polotno can not export PDF with current settings. Quality is automatically reduced.");let r=await e.toDataURL({...n,pageId:t.id,pixelRatio:s});if(r.length>20)return{url:r,width:i,height:o};s*=.8}});(await Promise.all(r)).forEach(({url:e,width:t,height:n})=>{m.addPage([t,n],t>n?"landscape":"portrait"),d&&(m.setLineWidth(c(1)),m.line(2*d,0,2*d,d),m.line(0,2*d,d,2*d),m.line(t-2*d,0,t-2*d,d),m.line(t,2*d,t-d,2*d),m.line(0,n-2*d,d,n-2*d),m.line(2*d,n,2*d,n-d),m.line(t,n-2*d,t-d,n-2*d),m.line(t-2*d,n,t-2*d,n-d)),m.addImage(e,d,d,t-2*d,n-2*d,void 0,"FAST")})}return e.setElementsPixelRatio(v),m},toPDFDataURL:async t=>(await e._toPDF({mimeType:"image/jpeg",...t})).output("datauristring"),async toGIFDataURL(t={}){let n=t.pixelRatio||1,r=await lP({width:e.width*n,height:e.height*n}),i=1e3/(t.fps||10),o=e.duration/i;for(let t=0;t<o-1;t++){let o=t*i||1;e.setCurrentTime(o);let a=0,l="";for(let t of e.pages)if(a+=t.duration,t.set({_rendering:a>o}),a>o){l=t.id;break}let s=await e._toCanvas({pixelRatio:n,pageId:l});r.addFrame(s.getContext("2d"),{delay:i,copy:!0})}for(let t of e.pages)t.set({_rendering:!1});return e.stop(),r.render(),new Promise(e=>{r.on("finished",function(t){var n;(n=new FileReader).onload=function(t){e(t.target.result)},n.readAsDataURL(t)})})},async saveAsGIF({fileName:t,...n}={}){lk(await e.toGIFDataURL(n),t||"polotno.gif")},toHTML:async()=>lV({json:e.toJSON()}),async saveAsHTML({fileName:t}={}){let n=await e.toHTML();lk("data:text/html;base64,"+window.btoa(unescape(encodeURIComponent(n))),t||"polotno.html")},toSVG:async()=>l0({json:e.toJSON()}),async saveAsSVG({fileName:t}={}){let n=await e.toSVG();lk("data:text/svg;base64,"+window.btoa(unescape(encodeURIComponent(n))),t||"polotno.svg")},async saveAsPDF({fileName:t,...n}={}){(await e._toPDF({mimeType:"image/jpeg",...n})).save(t||"polotno.pdf")},async waitLoading(){await new Promise(e=>setTimeout(e,50)),await new Promise(e=>{var t;return t=()=>{is()?setTimeout(e,300):e(!0)},void(0===ic?t():id.push(t))})},toJSON:()=>({width:e.width,height:e.height,fonts:(0,iM.getSnapshot)(e.fonts),pages:(0,iM.getSnapshot)(e.pages),unit:e.unit,dpi:e.dpi}),loadJSON(t,n=!1){let r={...t},i=e.pages.indexOf(e.activePage),o=(r.pages[i]||r.pages[0])?.id;r._activePageId=o;let a={...(0,iM.getSnapshot)(e)};Object.assign(a,r),n?a.history=e.history.toJSON():a.history={history:[],undoIdx:-1},(0,iM.applySnapshot)(e,a)},clear({keepHistory:t=!1}={}){let n=e.pages.map(e=>e.id);e.deletePages(n),t||e.history.clear()},addFont(t){e.removeFont(t.fontFamily),e.fonts.push(t),e.loadFont(t.fontFamily)},removeFont(t){e.fonts.filter(e=>e.fontFamily===t).forEach(e=>(0,iM.destroy)(e))},async loadFont(t){let n=e.fonts.find(e=>e.fontFamily===t)||iw.find(e=>e.fontFamily===t);n?function(e){let t=e.fontFamily;if(ik[t]||!e.url&&!e.styles)return;let n=document.createElement("style");n.type="text/css";let r=e.styles||(e.url?[{src:`url("${e.url}")`}]:[]),i="";r.forEach(e=>{i+=`