npm - polotno - Versions diffs - 1.13.0 → 1.14.1 - Mend

polotno 1.13.0 → 1.14.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/canvas/page.js +1 -1
package/canvas/tooltip.d.ts +8 -0
package/canvas/tooltip.js +1 -0
package/model/store.js +1 -1
package/package.json +1 -1
package/polotno.bundle.js +5 -5
package/toolbar/animations-picker.js +1 -1
package/toolbar/toolbar.js +1 -1
package/utils/l10n.d.ts +3 -0
package/utils/l10n.js +1 -1

package/canvas/page.js CHANGED Viewed

	@@ -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=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"),page_controls_1=require("./page-controls"),validate_key_1=require("../utils/validate-key"),math_1=require("../utils/math"),unit_1=require("../utils/unit"),flags_1=require("../utils/flags"),screen_1=require("../utils/screen"),rotateFillGroup=new konva_1.default.Group,rotateFillSize=20;rotateFillGroup.add(new konva_1.default.Rect({width:20,height:20,fill:"white"})),rotateFillGroup.add(new konva_1.default.Path({scaleX:20/24,scaleY:20/24,data:"M4.98313549,11.0001422 C5.49589839,10.9914935 5.92501998,11.3703506 5.99116425,11.8666444 L5.99985778,11.9831355 L6.00348884,12.2068855 C6.11245031,15.4321748 8.76323537,17.9999971 11.9999971,17.9999971 C12.1869612,17.9999971 12.3726725,17.9914753 12.5567465,17.9745765 L12.2928932,17.7071068 C11.9023689,17.3165825 11.9023689,16.6834175 12.2928932,16.2928932 C12.6834175,15.9023689 13.3165825,15.9023689 13.7071068,16.2928932 L15.7071068,18.2928932 C16.0976311,18.6834175 16.0976311,19.3165825 15.7071068,19.7071068 L13.7071068,21.7071068 C13.3165825,22.0976311 12.6834175,22.0976311 12.2928932,21.7071068 C11.9023689,21.3165825 11.9023689,20.6834175 12.2928932,20.2928932 L12.6111505,19.9769552 C12.4086045,19.9922816 12.2047796,19.9999971 11.9999971,19.9999971 C7.7687005,19.9999971 4.28886152,16.7094374 4.01666425,12.5105203 L4.00420123,12.2575143 L4.00014222,12.0168645 C3.9908282,11.4646583 4.43092928,11.0094562 4.98313549,11.0001422 Z M11.7071068,2.29289322 C12.0675907,2.65337718 12.0953203,3.22060824 11.7902954,3.61289944 L11.7071068,3.70710678 L11.3891629,4.0230186 C11.5916051,4.00770767 11.7953244,4 12,4 C16.418278,4 20,7.581722 20,12 C20,12.5522847 19.5522847,13 19,13 C18.4477153,13 18,12.5522847 18,12 C18,8.6862915 15.3137085,6 12,6 C11.8129339,6 11.6271216,6.00853145 11.4429483,6.02544919 L11.7071068,6.29289322 C12.0976311,6.68341751 12.0976311,7.31658249 11.7071068,7.70710678 C11.3466228,8.06759074 10.7793918,8.09532028 10.3871006,7.79029539 L10.2928932,7.70710678 L8.29289322,5.70710678 C7.93240926,5.34662282 7.90467972,4.77939176 8.20970461,4.38710056 L8.29289322,4.29289322 L10.2928932,2.29289322 C10.6834175,1.90236893 11.3165825,1.90236893 11.7071068,2.29289322 Z",fill:"black"}));const rotaterFill=rotateFillGroup.toCanvas({pixelRatio:2,width:20,height:20}),DEFAULT_TRANSFORMER_ATTRIBUTES={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,anchorStrokeWidth:2,borderStrokeWidth:2,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"})}}},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+90)Math.cos(a-Math.PI/2),s=(r/2+90)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})=>{const d=e.bleedVisible?t.bleed:0,u=t.computedWidth+2d,m=t.computedHeight+2d,g=(n-ue.scale)/2,_=(r-me.scale)/2,h=react_1.default.useRef(null),f=react_1.default.useRef(null),p=react_1.default.useRef(null),b=null==a\|\|a,[x,v]=react_1.default.useState(null),[E,y]=react_1.default.useState({}),k=e.selectedElements.find((e=>e._cropModeEnabled)),w=e.selectedShapes.filter((e=>!e.resizable)).length>0,A=e.selectedShapes.filter((e=>!e.draggable)).length>0,R=e.selectedElements.filter((e=>!e.visible)).length>0;react_1.default.useLayoutEffect((()=>{var t,n,r;if(!h.current)return;const a=h.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]?(h.current.setAttrs(Object.assign(Object.assign({},DEFAULT_TRANSFORMER_ATTRIBUTES),transformerAttributes[i])),"svg"!==i&&"image"!==i\|\|e.selectedElements[0].keepRatio\|\|h.current.setAttrs({enabledAnchors:DEFAULT_TRANSFORMER_ATTRIBUTES.enabledAnchors}),"text"===i&&flags_1.flags.textVerticalResizeEnabled&&h.current.setAttrs({enabledAnchors:null===(n=transformerAttributes.text.enabledAnchors)\|\|void 0===n?void 0:n.concat(["bottom-center"])})):h.current.setAttrs(DEFAULT_TRANSFORMER_ATTRIBUTES),w&&h.current.enabledAnchors([]),A&&h.current.rotateEnabled(!1);o.find((e=>null==e?void 0:e.isDragging()))&&o.forEach((e=>{null==e\|\|e.startDrag()})),h.current.nodes(o),null===(r=h.current.getLayer())\|\|void 0===r\|\|r.batchDraw()}),[e.selectedElements,k,w,R,A]);const T=(0,mobx_react_lite_1.useLocalObservable)((()=>({visible:!1,x1:0,y1:0,x2:0,y2:0}))),X=react_1.default.useRef(!1),Y=(0,screen_1.useMobile)(),S=(0,mobx_1.action)((n=>{var r,a;if(Y)return;X.current=!1,e.activePage!==t&&t.select();const o=n.target.findAncestor(".elements-container"),i=n.target.findAncestor("Transformer"),l=n.target.findAncestor(".page-abs-container");if(o\|\|i\|\|l)return;const c=null===(r=n.target.getStage())\|\|void 0===r?void 0:r.getPointerPosition();c&&(T.visible=!0,T.x1=c.x,T.y1=c.y,T.x2=c.x,T.y2=c.y,(null===(a=n.target.getStage())\|\|void 0===a?void 0:a.getPointersPositions().length)>=2&&(T.visible=!1))}));react_1.default.useEffect((()=>{const t=(0,mobx_1.action)((e=>{var t,n;if(!T.visible)return;null===(t=f.current)\|\|void 0===t\|\|t.setPointersPositions(e);let r=(null===(n=f.current)\|\|void 0===n?void 0:n.getPointerPosition())\|\|{x:T.x2,y:T.y2};T.x2=r.x,T.y2=r.y})),n=(0,mobx_1.action)((()=>{if(!T.visible)return;if(!f.current)return;const t=f.current.findOne(".selection"),n=t?t.getClientRect():{width:0,height:0,x:0,y:0};if(n.width&&n.height){const t=[];f.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(r.id())})),e.selectElements(t)}T.visible=!1,X.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=t=>{if(X.current)return;const n=t.evt.ctrlKey\|\|t.evt.metaKey\|\|t.evt.shiftKey,r=t.target.findAncestor(".elements-container"),a=t.target.findAncestor(".page-abs-container"),o=t.target.findAncestor("Transformer");if(!(n\|\|r\|\|o\|\|a))return void e.selectElements([]);const i=t.target.findAncestor(".element",!0),l=e.getElementById(null==i?void 0:i.id()),c=null==l?void 0:l.top,s=null==c?void 0:c.id,d=e.selectedElementsIds.indexOf(s)>=0;s&&n&&!d?e.selectElements(e.selectedElementsIds.concat([s])):s&&n&&d?e.selectElements(e.selectedElementsIds.filter((e=>e!==s))):!s\|\|n\|\|d\|\|e.selectElements([s])};(0,use_transformer_snap_1.useSnap)(h);const D=e.activePage===t,L=(null==c?void 0:c.PageControls)\|\|page_controls_1.PageControls,P=1/e.scale,O=0/e.scale;return react_1.default.createElement("div",{ref:p,onDragOver:e=>e.preventDefault(),onDrop:n=>{if(n.preventDefault(),!f.current)return;f.current.setPointersPositions(n);const r=f.current.findOne(".elements-container").getRelativePointerPosition(),a=f.current.getPointerPosition(),o=f.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"+(D?" active-page":"")},react_1.default.createElement(react_konva_1.Stage,{ref:f,width:n,height:r,onClick:C,onTap:C,onMouseDown:S,onMouseMove:n=>{if(!n.evt.altKey&&x)return void v(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(x)!==JSON.stringify(c)&&v(c)},onTouchStart:S,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(),null===(n=h.current)\|\|void 0===n\|\|n.startDrag(t))}x&&v(null)},pageId:t.id,style:{position:"relative"}},react_1.default.createElement(react_konva_1.Layer,null,react_1.default.createElement(Background,{width:n,height:r,fill:o}),react_1.default.createElement(react_konva_1.Group,{x:g,y:_,scaleX:e.scale,scaleY:e.scale,name:"page-container"},react_1.default.createElement(react_konva_1.Group,{name:"page-background-group",x:d,y:d},react_1.default.createElement(PageBackground,{x:-t.bleed,y:-t.bleed,width:t.computedWidth+2t.bleed,height:t.computedHeight+2t.bleed,background:t.background,shadowBlur:10,shadowColor:"lightgrey",name:"page-background",preventDefault:!1,scale:e.scale})),react_1.default.createElement(react_konva_1.Group,{x:d,y:d,name:"elements-container",listening:!e.isPlaying},react_1.default.createElement(react_konva_1.Rect,{name:"elements-area",width:t.computedWidth,height:t.computedHeight,listening:!1}),react_1.default.createElement(Elements,{elements:t.children,store:e})),react_1.default.createElement(react_konva_1.Rect,{stroke:s,name:"bleed",strokeWidth:t.bleed,x:t.bleed/2,y:t.bleed/2,width:t.computedWidth+t.bleed,height:t.computedHeight+t.bleed,listening:!1,visible:t.bleed>0&&e.bleedVisible,hideInExport:!0})),react_1.default.createElement(react_konva_1.Line,{name:"workspace-background",points:[0,0,n,0,n,r,0,r,0,0,g,_,g,r-_,n-g,r-_,n-g,_,g,_],listening:!1,closed:!0,fill:o}),react_1.default.createElement(react_konva_1.Group,{x:g,y:_,scaleX:e.scale,scaleY:e.scale,name:"page-container"},react_1.default.createElement(react_konva_1.Rect,{name:"page-highlight",hideInExport:!0,x:-P/2-O,y:-P/2-O,width:u+P+2O,height:m+P+2O,stroke:D&&e.pages.length>1?l:i,strokeWidth:2,listening:!1,strokeScaleEnabled:!1})),react_1.default.createElement(react_konva_1.Group,{x:g+de.scale,y:_+de.scale,scaleX:e.scale,scaleY:e.scale,name:"page-abs-container"},react_1.default.createElement(react_konva_1.Transformer,{ref:h,boundBoxFunc:(e,t)=>{const n=t.width<1\|\|t.height<1,r=e.width<1\|\|e.height<1;return n&&!r?e:t},onTransform:e=>{var t,n;const r=null===(t=h.current)\|\|void 0===t?void 0:t.__getNodeRect(),a=null===(n=h.current)\|\|void 0===n?void 0:n.getActiveAnchor();y({anchor:a,x:r.x,y:r.y,rotation:r.rotation,width:r.width,height:r.height})},onTransformEnd:e=>{y({})},visible:!e.isPlaying}),x&&x.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:u,height:m,fill:"rgba(255,255,255,0.9)"}),react_1.default.createElement(react_konva_1.Text,{text:"Rendering...",fontSize:60,width:u,height:m,align:"center",verticalAlign:"middle"}))),react_1.default.createElement(TransformLabels,Object.assign({},E,{store:e})),react_1.default.createElement(Selection,{selection:T}),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"}))),b&&D&&react_1.default.createElement(L,{store:e,page:t,xPadding:g,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=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"),page_controls_1=require("./page-controls"),validate_key_1=require("../utils/validate-key"),math_1=require("../utils/math"),unit_1=require("../utils/unit"),flags_1=require("../utils/flags"),screen_1=require("../utils/screen"),rotateFillGroup=new konva_1.default.Group,rotateFillSize=20;rotateFillGroup.add(new konva_1.default.Rect({width:20,height:20,fill:"white"})),rotateFillGroup.add(new konva_1.default.Path({scaleX:20/24,scaleY:20/24,data:"M4.98313549,11.0001422 C5.49589839,10.9914935 5.92501998,11.3703506 5.99116425,11.8666444 L5.99985778,11.9831355 L6.00348884,12.2068855 C6.11245031,15.4321748 8.76323537,17.9999971 11.9999971,17.9999971 C12.1869612,17.9999971 12.3726725,17.9914753 12.5567465,17.9745765 L12.2928932,17.7071068 C11.9023689,17.3165825 11.9023689,16.6834175 12.2928932,16.2928932 C12.6834175,15.9023689 13.3165825,15.9023689 13.7071068,16.2928932 L15.7071068,18.2928932 C16.0976311,18.6834175 16.0976311,19.3165825 15.7071068,19.7071068 L13.7071068,21.7071068 C13.3165825,22.0976311 12.6834175,22.0976311 12.2928932,21.7071068 C11.9023689,21.3165825 11.9023689,20.6834175 12.2928932,20.2928932 L12.6111505,19.9769552 C12.4086045,19.9922816 12.2047796,19.9999971 11.9999971,19.9999971 C7.7687005,19.9999971 4.28886152,16.7094374 4.01666425,12.5105203 L4.00420123,12.2575143 L4.00014222,12.0168645 C3.9908282,11.4646583 4.43092928,11.0094562 4.98313549,11.0001422 Z M11.7071068,2.29289322 C12.0675907,2.65337718 12.0953203,3.22060824 11.7902954,3.61289944 L11.7071068,3.70710678 L11.3891629,4.0230186 C11.5916051,4.00770767 11.7953244,4 12,4 C16.418278,4 20,7.581722 20,12 C20,12.5522847 19.5522847,13 19,13 C18.4477153,13 18,12.5522847 18,12 C18,8.6862915 15.3137085,6 12,6 C11.8129339,6 11.6271216,6.00853145 11.4429483,6.02544919 L11.7071068,6.29289322 C12.0976311,6.68341751 12.0976311,7.31658249 11.7071068,7.70710678 C11.3466228,8.06759074 10.7793918,8.09532028 10.3871006,7.79029539 L10.2928932,7.70710678 L8.29289322,5.70710678 C7.93240926,5.34662282 7.90467972,4.77939176 8.20970461,4.38710056 L8.29289322,4.29289322 L10.2928932,2.29289322 C10.6834175,1.90236893 11.3165825,1.90236893 11.7071068,2.29289322 Z",fill:"black"}));const rotaterFill=rotateFillGroup.toCanvas({pixelRatio:2,width:20,height:20}),DEFAULT_TRANSFORMER_ATTRIBUTES={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,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"})}}},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})=>{const d=e.bleedVisible?t.bleed:0,u=t.computedWidth+2d,m=t.computedHeight+2d,g=(n-ue.scale)/2,_=(r-me.scale)/2,h=react_1.default.useRef(null),f=react_1.default.useRef(null),p=react_1.default.useRef(null),b=null==a\|\|a,[x,v]=react_1.default.useState(null),[E,y]=react_1.default.useState({}),k=e.selectedElements.find((e=>e._cropModeEnabled)),w=e.selectedShapes.filter((e=>!e.resizable)).length>0,A=e.selectedShapes.filter((e=>!e.draggable)).length>0,R=e.selectedElements.filter((e=>!e.visible)).length>0;react_1.default.useLayoutEffect((()=>{var t,n,r;if(!h.current)return;const a=h.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]?(h.current.setAttrs(Object.assign(Object.assign({},DEFAULT_TRANSFORMER_ATTRIBUTES),transformerAttributes[i])),"svg"!==i&&"image"!==i\|\|e.selectedElements[0].keepRatio\|\|h.current.setAttrs({enabledAnchors:DEFAULT_TRANSFORMER_ATTRIBUTES.enabledAnchors}),"text"===i&&flags_1.flags.textVerticalResizeEnabled&&h.current.setAttrs({enabledAnchors:null===(n=transformerAttributes.text.enabledAnchors)\|\|void 0===n?void 0:n.concat(["bottom-center"])})):h.current.setAttrs(DEFAULT_TRANSFORMER_ATTRIBUTES),w&&h.current.enabledAnchors([]),A&&h.current.rotateEnabled(!1);o.find((e=>null==e?void 0:e.isDragging()))&&o.forEach((e=>{null==e\|\|e.startDrag()})),h.current.nodes(o),null===(r=h.current.getLayer())\|\|void 0===r\|\|r.batchDraw()}),[e.selectedElements,k,w,R,A]);const T=(0,mobx_react_lite_1.useLocalObservable)((()=>({visible:!1,x1:0,y1:0,x2:0,y2:0}))),X=react_1.default.useRef(!1),Y=(0,screen_1.useMobile)(),S=(0,mobx_1.action)((n=>{var r,a;if(Y)return;X.current=!1,e.activePage!==t&&t.select();const o=n.target.findAncestor(".elements-container"),i=n.target.findAncestor("Transformer"),l=n.target.findAncestor(".page-abs-container");if(o\|\|i\|\|l)return;const c=null===(r=n.target.getStage())\|\|void 0===r?void 0:r.getPointerPosition();c&&(T.visible=!0,T.x1=c.x,T.y1=c.y,T.x2=c.x,T.y2=c.y,(null===(a=n.target.getStage())\|\|void 0===a?void 0:a.getPointersPositions().length)>=2&&(T.visible=!1))}));react_1.default.useEffect((()=>{const t=(0,mobx_1.action)((e=>{var t,n;if(!T.visible)return;null===(t=f.current)\|\|void 0===t\|\|t.setPointersPositions(e);let r=(null===(n=f.current)\|\|void 0===n?void 0:n.getPointerPosition())\|\|{x:T.x2,y:T.y2};T.x2=r.x,T.y2=r.y})),n=(0,mobx_1.action)((()=>{if(!T.visible)return;if(!f.current)return;const t=f.current.findOne(".selection"),n=t?t.getClientRect():{width:0,height:0,x:0,y:0};if(n.width&&n.height){const t=[];f.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(r.id())})),e.selectElements(t)}T.visible=!1,X.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=t=>{if(X.current)return;const n=t.evt.ctrlKey\|\|t.evt.metaKey\|\|t.evt.shiftKey,r=t.target.findAncestor(".elements-container"),a=t.target.findAncestor(".page-abs-container"),o=t.target.findAncestor("Transformer");if(!(n\|\|r\|\|o\|\|a))return void e.selectElements([]);const i=t.target.findAncestor(".element",!0),l=e.getElementById(null==i?void 0:i.id()),c=null==l?void 0:l.top,s=null==c?void 0:c.id,d=e.selectedElementsIds.indexOf(s)>=0;s&&n&&!d?e.selectElements(e.selectedElementsIds.concat([s])):s&&n&&d?e.selectElements(e.selectedElementsIds.filter((e=>e!==s))):!s\|\|n\|\|d\|\|e.selectElements([s])};(0,use_transformer_snap_1.useSnap)(h);const D=e.activePage===t,L=(null==c?void 0:c.PageControls)\|\|page_controls_1.PageControls,P=null==c?void 0:c.Tooltip,O=1/e.scale,I=0/e.scale;return react_1.default.createElement("div",{ref:p,onDragOver:e=>e.preventDefault(),onDrop:n=>{if(n.preventDefault(),!f.current)return;f.current.setPointersPositions(n);const r=f.current.findOne(".elements-container").getRelativePointerPosition(),a=f.current.getPointerPosition(),o=f.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"+(D?" active-page":"")},react_1.default.createElement(react_konva_1.Stage,{ref:f,width:n,height:r,onClick:C,onTap:C,onMouseDown:S,onMouseMove:n=>{if(!n.evt.altKey&&x)return void v(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(x)!==JSON.stringify(c)&&v(c)},onTouchStart:S,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(),null===(n=h.current)\|\|void 0===n\|\|n.startDrag(t))}x&&v(null)},pageId:t.id,style:{position:"relative"}},react_1.default.createElement(react_konva_1.Layer,null,react_1.default.createElement(Background,{width:n,height:r,fill:o}),react_1.default.createElement(react_konva_1.Group,{x:g,y:_,scaleX:e.scale,scaleY:e.scale,name:"page-container"},react_1.default.createElement(react_konva_1.Group,{name:"page-background-group",x:d,y:d},react_1.default.createElement(PageBackground,{x:-t.bleed,y:-t.bleed,width:t.computedWidth+2t.bleed,height:t.computedHeight+2t.bleed,background:t.background,shadowBlur:10,shadowColor:"lightgrey",name:"page-background",preventDefault:!1,scale:e.scale})),react_1.default.createElement(react_konva_1.Group,{x:d,y:d,name:"elements-container",listening:!e.isPlaying},react_1.default.createElement(react_konva_1.Rect,{name:"elements-area",width:t.computedWidth,height:t.computedHeight,listening:!1}),react_1.default.createElement(Elements,{elements:t.children,store:e})),react_1.default.createElement(react_konva_1.Rect,{stroke:s,name:"bleed",strokeWidth:t.bleed,x:t.bleed/2,y:t.bleed/2,width:t.computedWidth+t.bleed,height:t.computedHeight+t.bleed,listening:!1,visible:t.bleed>0&&e.bleedVisible,hideInExport:!0})),react_1.default.createElement(react_konva_1.Line,{name:"workspace-background",points:[0,0,n,0,n,r,0,r,0,0,g,_,g,r-_,n-g,r-_,n-g,_,g,_],listening:!1,closed:!0,fill:o}),react_1.default.createElement(react_konva_1.Group,{x:g,y:_,scaleX:e.scale,scaleY:e.scale,name:"page-container"},react_1.default.createElement(react_konva_1.Rect,{name:"page-highlight",hideInExport:!0,x:-O/2-I,y:-O/2-I,width:u+O+2I,height:m+O+2I,stroke:D&&e.pages.length>1?l:i,strokeWidth:2,listening:!1,strokeScaleEnabled:!1})),react_1.default.createElement(react_konva_1.Group,{x:g+de.scale,y:_+de.scale,scaleX:e.scale,scaleY:e.scale,name:"page-abs-container"},react_1.default.createElement(react_konva_1.Transformer,{ref:h,boundBoxFunc:(e,t)=>{const n=t.width<1\|\|t.height<1,r=e.width<1\|\|e.height<1;return n&&!r?e:t},onTransform:e=>{var t,n;const r=null===(t=h.current)\|\|void 0===t?void 0:t.__getNodeRect(),a=null===(n=h.current)\|\|void 0===n?void 0:n.getActiveAnchor();y({anchor:a,x:r.x,y:r.y,rotation:r.rotation,width:r.width,height:r.height})},onTransformEnd:e=>{y({})},visible:!e.isPlaying}),x&&x.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:u,height:m,fill:"rgba(255,255,255,0.9)"}),react_1.default.createElement(react_konva_1.Text,{text:"Rendering...",fontSize:60,width:u,height:m,align:"center",verticalAlign:"middle"})),P&&react_1.default.createElement(P,{components:c,store:e,page:t,stageRef:f})),react_1.default.createElement(TransformLabels,Object.assign({},E,{store:e})),react_1.default.createElement(Selection,{selection:T}),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"}))),b&&D&&react_1.default.createElement(L,{store:e,page:t,xPadding:g,yPadding:_}))}));

package/canvas/tooltip.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+import React from 'react';
+import { StoreType, PageType } from '../model/store';
+export declare const Tooltip: React.MemoExoticComponent<React.ForwardRefExoticComponent<{
+    store: StoreType;
+    page: PageType;
+    components?: any;
+    stageRef?: any;
+} & React.RefAttributes<{}>>>;

package/canvas/tooltip.js ADDED Viewed

@@ -0,0 +1 @@

+ "use strict";var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.Tooltip=void 0;const react_1=__importDefault(require("react")),mobx_react_lite_1=require("mobx-react-lite"),react_konva_utils_1=require("react-konva-utils"),core_1=require("@blueprintjs/core"),math_1=require("../utils/math"),element_container_1=require("../toolbar/element-container"),duplicate_button_1=require("../toolbar/duplicate-button"),remove_button_1=require("../toolbar/remove-button"),position_picker_1=require("../toolbar/position-picker");function findParentWithClass(e,t){return e.classList.contains(t)?e:e.parentElement?findParentWithClass(e.parentElement,t):null}exports.Tooltip=(0,mobx_react_lite_1.observer)((({store:e,page:t,components:r,stageRef:n})=>{const l=(0,math_1.getTotalClientRect)(e.selectedShapes),a=e.selectedShapes.every((e=>e.page===t)),o=react_1.default.useRef(null),[u,c]=react_1.default.useState(!1);react_1.default.useEffect((()=>{var e,t,r;const l=()=>{c(!0)},a=()=>{c(!1)};null===(e=null==n?void 0:n.current)||void 0===e||e.on("dragstart",l),null===(t=null==n?void 0:n.current)||void 0===t||t.on("dragend",a);const o=null===(r=null==n?void 0:n.current)||void 0===r?void 0:r.findOne("Transformer");return null==o||o.on("transformstart",l),null==o||o.on("transformend",a),()=>{var e,t;null===(e=null==n?void 0:n.current)||void 0===e||e.off("dragstart",l),null===(t=null==n?void 0:n.current)||void 0===t||t.off("dragend",a),null==o||o.off("transformstart",l),null==o||o.off("transformend",a)}}),[]);const[i,s]=react_1.default.useState({fit:!0,needCalculate:!0});if(react_1.default.useEffect((()=>{if(!o.current)return;if(!i.needCalculate)return;const e=findParentWithClass(o.current,"polotno-workspace-container");if(!e)return;const t=e.getBoundingClientRect(),r=o.current.getBoundingClientRect(),n=(r.right,t.left,r.top-t.top);r.left,t.left,r.bottom,t.top;s(n<20?{fit:!1,needCalculate:!1}:{fit:!0,needCalculate:!1})}),[i.needCalculate,o.current]),react_1.default.useEffect((()=>{const e=findParentWithClass(n.current.content,"polotno-workspace-inner"),t=()=>{s({fit:!0,needCalculate:!0})};return null==e||e.addEventListener("scroll",t),()=>{null==e||e.removeEventListener("scroll",t)}}),[]),0===e.selectedShapes.length)return null;if(u)return null;if(!a)return null;if(e.activePage!==t)return;const d=(null==r?void 0:r.Position)||position_picker_1.PositionPicker,f=(null==r?void 0:r.Duplicate)||duplicate_button_1.DuplicateButton,_=(null==r?void 0:r.Remove)||remove_button_1.RemoveButton,m=e.selectedElements[0].type,p=(0,element_container_1.extendToolbar)({components:r,type:m,usedItems:[]});return react_1.default.createElement(react_konva_utils_1.Html,{transformFunc:e=>{const t=l.x+l.width/2,r=i.fit?l.y*e.scaleY-80:l.y*e.scaleY+l.height*e.scaleY+30;return Object.assign(Object.assign({},e),{x:e.x+t*e.scaleX,y:e.y+r,scaleX:1,scaleY:1})}},react_1.default.createElement("div",{ref:o},react_1.default.createElement(core_1.Navbar,{style:{padding:"2px",borderRadius:"5px",height:"34px",transform:"translate(-50%, -50%)"}},react_1.default.createElement(core_1.NavbarGroup,{style:{height:"30px"}},p.map((t=>{const n=r[t];return react_1.default.createElement(n,{elements:e.selectedElements,element:e.selectedElements[0],store:e,key:t})})),react_1.default.createElement(f,{store:e}),react_1.default.createElement(_,{store:e}),react_1.default.createElement(d,{store:e})))))}));

package/model/store.js CHANGED Viewed

	@@ -1 +1 @@
1	- "use strict";var __createBinding=this&&this.__createBinding\|\|(Object.create?function(e,t,o,n){void 0===n&&(n=o);var a=Object.getOwnPropertyDescriptor(t,o);a&&!("get"in a?!t.__esModule:a.writable\|\|a.configurable)\|\|(a={enumerable:!0,get:function(){return t[o]}}),Object.defineProperty(e,n,a)}:function(e,t,o,n){void 0===n&&(n=o),e[n]=t[o]}),__setModuleDefault=this&&this.__setModuleDefault\|\|(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),__importStar=this&&this.__importStar\|\|function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var o in e)"default"!==o&&Object.prototype.hasOwnProperty.call(e,o)&&__createBinding(t,e,o);return __setModuleDefault(t,e),t},__rest=this&&this.__rest\|\|function(e,t){var o={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(o[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(n=Object.getOwnPropertySymbols(e);a<n.length;a++)t.indexOf(n[a])<0&&Object.prototype.propertyIsEnumerable.call(e,n[a])&&(o[n[a]]=e[n[a]])}return o},__importDefault=this&&this.__importDefault\|\|function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.createStore=exports.Store=exports.Font=exports.Page=exports.GroupElement=exports.registerShapeModel=exports.SVGElement=exports.LineElement=exports.VideoElement=exports.ImageElement=exports.TextElement=exports.Element=exports.Animation=exports.Node=void 0;const mobx_state_tree_1=require("mobx-state-tree"),history_1=require("./history"),nanoid_1=require("nanoid"),konva_1=__importDefault(require("konva")),download_1=require("../utils/download"),pdf_1=require("../utils/pdf"),gif_lib_1=require("../utils/gif-lib"),validate_key_1=require("../utils/validate-key"),fonts=__importStar(require("../utils/fonts")),loader_1=require("../utils/loader"),unit_1=require("../utils/unit"),deep_equal_1=require("../utils/deep-equal"),wait_1=require("../utils/wait"),html_1=require("../utils/html"),to_svg_1=require("../utils/to-svg"),animations_1=require("../utils/animations");(0,mobx_state_tree_1.setLivelinessChecking)("ignore");const forEveryChild=(e,t)=>{e.children&&e.children.forEach((e=>{t(e),forEveryChild(e,t)}))};exports.Node=mobx_state_tree_1.types.model("Node",{id:mobx_state_tree_1.types.identifier,type:"none",name:"",opacity:1,custom:mobx_state_tree_1.types.frozen(),visible:!0,selectable:!0,removable:!0,alwaysOnTop:!1,showInExport:!0}).postProcessSnapshot((e=>{const t=Object.assign({},e),o={};for(var n in t)"_"!==n[0]&&(o[n]=e[n]);return o})).views((e=>({get locked(){return!(e.draggable\|\|e.contentEditable\|\|e.styleEditable\|\|e.resizable)},get page(){return(0,mobx_state_tree_1.getParentOfType)(e,exports.Page)},get store(){return(0,mobx_state_tree_1.getParentOfType)(e,exports.Store)},get top(){let t=e;for(;;){if(!(0,mobx_state_tree_1.hasParentOfType)(t,exports.GroupElement))return t;t=(0,mobx_state_tree_1.getParentOfType)(t,exports.GroupElement)}},get parent(){return(0,mobx_state_tree_1.hasParentOfType)(e,exports.GroupElement)?(0,mobx_state_tree_1.getParentOfType)(e,exports.GroupElement):(0,mobx_state_tree_1.hasParentOfType)(e,exports.Page)?(0,mobx_state_tree_1.getParentOfType)(e,exports.Page):(0,mobx_state_tree_1.hasParentOfType)(e,exports.Store)?(0,mobx_state_tree_1.getParentOfType)(e,exports.Store):null}}))).actions((e=>({toJSON:()=>Object.assign({},(0,mobx_state_tree_1.getSnapshot)(e))}))).actions((e=>({clone(t={}){const o=e.toJSON();return t.id=t.id\|\|(0,nanoid_1.nanoid)(10),forEveryChild(o,(e=>{e.id=(0,nanoid_1.nanoid)(10)})),Object.assign(o,t),e.page.addElement(o)},set(t){Object.assign(e,t)},moveUp(){e.page.moveElementsUp([e.id])},moveTop(){e.page.moveElementsTop([e.id])},moveDown(){e.page.moveElementsDown([e.id])},moveBottom(){e.page.moveElementsBottom([e.id])},beforeDestroy(){e.store.history.endTransaction()}}))),exports.Animation=mobx_state_tree_1.types.model("Animation",{delay:0,duration:500,enabled:!0,type:mobx_state_tree_1.types.enumeration("Type",["enter","exit"]),name:"none",data:mobx_state_tree_1.types.frozen({})}),exports.Element=exports.Node.named("Element").props({x:0,y:0,width:100,height:100,rotation:0,opacity:1,animations:mobx_state_tree_1.types.array(exports.Animation),blurEnabled:!1,blurRadius:10,brightnessEnabled:!1,brightness:0,sepiaEnabled:!1,grayscaleEnabled:!1,shadowEnabled:!1,shadowBlur:5,shadowOffsetX:0,shadowOffsetY:0,shadowColor:"black",shadowOpacity:1,visible:!0,draggable:!0,resizable:!0,selectable:!0,contentEditable:!0,styleEditable:!0,alwaysOnTop:!1,showInExport:!0}).preProcessSnapshot((e=>{const t=Object.assign(Object.assign({},e),{x:e.x\|\|0,y:e.y\|\|0});return"width"in e&&(t.width=t.width\|\|1),"height"in e&&(t.height=t.height\|\|1),e.locked&&(t.draggable=!1,t.contentEditable=!1,t.styleEditable=!1,t.resizable=!1),t})).views((e=>({get a(){const{currentTime:t}=e.store,o={x:e.x,y:e.y,width:e.width,height:e.height,rotation:e.rotation,opacity:e.opacity,color:e.color,fontSize:e.fontSize};if(0===t)return o;const n=t-e.page.startTime;if(n>e.page.duration)return o;if(n<0)return o;const a=e.store.animatedElementsIds;if(a.length&&!a.includes(e.id))return o;const i=e.animations.find((e=>"enter"===e.type));(null==i?void 0:i.enabled)&&n<i.delay&&(o.opacity=0);if((null==i?void 0:i.enabled)&&n>=i.delay&&n<=i.delay+i.duration){const t=n-i.delay,a=(0,animations_1.animate)({element:e,animation:i,dTime:t});Object.assign(o,a)}const s=e.animations.find((e=>"exit"===e.type));if((null==s?void 0:s.enabled)&&n>=e.page.duration-s.duration){const t=n-(e.page.duration-s.duration),a=(0,animations_1.animate)({element:e,animation:s,dTime:t});Object.assign(o,a)}return o},animated:t=>e.a[t]}))).actions((e=>({setAnimation(t,o){const n=e.animations.find((e=>e.type===t));n?Object.assign(n,o):e.animations.push(Object.assign({type:t},o))}}))),exports.TextElement=exports.Element.named("Text").props({type:"text",text:"",placeholder:"",fontSize:14,fontFamily:"Roboto",fontStyle:"normal",fontWeight:"normal",textDecoration:"",fill:"black",align:"center",width:100,height:0,verticalAlign:"top",strokeWidth:0,stroke:"black",lineHeight:mobx_state_tree_1.types.optional(mobx_state_tree_1.types.union(mobx_state_tree_1.types.number,mobx_state_tree_1.types.string),1.2),letterSpacing:0,_editModeEnabled:!1,backgroundEnabled:!1,backgroundColor:"#7ED321",backgroundOpacity:1,backgroundCornerRadius:.5,backgroundPadding:.5}).preProcessSnapshot((e=>Object.assign({},e))).actions((e=>({toggleEditMode(t){e._editModeEnabled=null!=t?t:!e._editModeEnabled,e._editModeEnabled?e.store.history.startTransaction():e.store.history.endTransaction()}}))),exports.ImageElement=exports.Element.named("Image").props({type:"image",width:100,height:100,src:"",cropX:0,cropY:0,cropWidth:1,cropHeight:1,cornerRadius:0,flipX:!1,flipY:!1,clipSrc:"",borderColor:"black",borderSize:0,keepRatio:!1,_cropModeEnabled:!1}).actions((e=>({toggleCropMode(t){e._cropModeEnabled=null!=t?t:!e._cropModeEnabled,e._cropModeEnabled?e.store.history.startTransaction():e.store.history.endTransaction()}}))),exports.VideoElement=exports.ImageElement.named("Video").props({type:"video",duration:0}),exports.LineElement=exports.Element.named("Line").props({type:"line",width:400,height:10,color:"black",dash:mobx_state_tree_1.types.array(mobx_state_tree_1.types.number),startHead:"",endHead:""}).actions((e=>({}))),exports.SVGElement=exports.Element.named("SVG").props({type:"svg",src:"",maskSrc:"",cropX:0,cropY:0,cropWidth:1,cropHeight:1,keepRatio:!0,flipX:!1,flipY:!1,width:100,height:100,borderColor:"black",borderSize:0,cornerRadius:0,colorsReplace:mobx_state_tree_1.types.map(mobx_state_tree_1.types.string)}).preProcessSnapshot((e=>Object.assign(Object.assign({},e),{src:e.src\|\|e.svgSource}))).actions((e=>({replaceColor(t,o){e.colorsReplace.set(t,o)}})));const ADDITIONAL_TYPES=[];function registerShapeModel(e){const t=e.type;if(!t)throw new Error('You must pass "type" attribute to custom model.');const o=exports.Element.named(t).props(e);TYPES_MAP[t]=o,ADDITIONAL_TYPES.push(o)}exports.registerShapeModel=registerShapeModel;const additionalTypesUnion=[...new Array(20)].map(((e,t)=>mobx_state_tree_1.types.late((()=>ADDITIONAL_TYPES[t])))),ElementTypes=mobx_state_tree_1.types.union({dispatcher:e=>{const t=TYPES_MAP[e.type];if(!t)throw new Error(`Unknown element type: "${e.type}"`);return t}},exports.SVGElement,exports.TextElement,exports.ImageElement,exports.LineElement,exports.VideoElement,mobx_state_tree_1.types.late((()=>exports.GroupElement)),...additionalTypesUnion);exports.GroupElement=exports.Node.named("Group").props({type:"group",children:mobx_state_tree_1.types.array(ElementTypes)}).views((e=>({get draggable(){let t=!0;return forEveryChild(e,(e=>{e.draggable\|\|(t=!1)})),t},get resizable(){let t=!0;return forEveryChild(e,(e=>{e.resizable\|\|(t=!1)})),t},get contentEditable(){let t=!0;return forEveryChild(e,(e=>{e.contentEditable\|\|(t=!1)})),t},get styleEditable(){let t=!0;return forEveryChild(e,(e=>{e.styleEditable\|\|(t=!1)})),t},get locked(){let t=!0;return forEveryChild(e,(e=>{e.locked\|\|(t=!1)})),t}}))).actions((e=>({set(t){var{draggable:o,contentEditable:n,styleEditable:a,resizable:i}=t,s=__rest(t,["draggable","contentEditable","styleEditable","resizable"]);void 0!==o&&forEveryChild(e,(e=>{e.set({draggable:o})})),void 0!==n&&forEveryChild(e,(e=>{e.set({contentEditable:n})})),void 0!==a&&forEveryChild(e,(e=>{e.set({styleEditable:a})})),void 0!==i&&forEveryChild(e,(e=>{e.set({resizable:i})})),Object.assign(e,s)}})));const TYPES_MAP={svg:exports.SVGElement,text:exports.TextElement,image:exports.ImageElement,group:exports.GroupElement,line:exports.LineElement,video:exports.VideoElement};function createStore({key:e,showCredit:t}={key:"",showCredit:!1}){const o=exports.Store.create();return(0,validate_key_1.validateKey)(e,t),o}exports.Page=mobx_state_tree_1.types.model("Page",{id:mobx_state_tree_1.types.identifier,children:mobx_state_tree_1.types.array(ElementTypes),width:mobx_state_tree_1.types.optional(mobx_state_tree_1.types.union(mobx_state_tree_1.types.number,mobx_state_tree_1.types.literal("auto")),"auto"),height:mobx_state_tree_1.types.optional(mobx_state_tree_1.types.union(mobx_state_tree_1.types.number,mobx_state_tree_1.types.literal("auto")),"auto"),background:"white",bleed:0,custom:mobx_state_tree_1.types.frozen(),duration:5e3,_exporting:!1,_rendering:!1}).postProcessSnapshot((e=>{const t=Object.assign({},e),o={};for(var n in t)"_"!==n[0]&&(o[n]=e[n]);return o})).views((e=>({get store(){return(0,mobx_state_tree_1.getParentOfType)(e,exports.Store)},get startTime(){let t=0;for(const o of e.store.pages){if(o.id===e.id)return t;t+=o.duration}return t}}))).views((e=>({get computedWidth(){return"auto"===e.width?e.store.width:e.width},get computedHeight(){return"auto"===e.height?e.store.height:e.height}}))).actions((e=>({toJSON:()=>JSON.parse(JSON.stringify((0,mobx_state_tree_1.getSnapshot)(e))),_forEachElementUp(t,o){const n=t.map((t=>({id:t,index:e.children.findIndex((e=>e.id===t))})));n.sort(((e,t)=>t.index-e.index));for(const{index:a}of n){if(-1==a)continue;const n=a<e.children.length-1&&e.children[a+1],i=t.indexOf(null==n?void 0:n.id)>=0;a===e.children.length-1\|\|i\|\|o(a)}},_forEachElementDown(t,o){const n=t.map((t=>({id:t,index:e.children.findIndex((e=>e.id===t))})));n.sort(((e,t)=>e.index-t.index));for(const{index:a}of n){if(-1==a)continue;const n=a>0&&e.children[a-1],i=t.indexOf(null==n?void 0:n.id)>=0;0===a\|\|i\|\|o(a)}return!1}}))).actions((e=>({clone(t={}){const o=e.toJSON();o.children.forEach((e=>{e.id=(0,nanoid_1.nanoid)(10),forEveryChild(e,(e=>{e.id=(0,nanoid_1.nanoid)(10)}))}));const n=Object.assign(Object.assign(Object.assign({},o),{id:(0,nanoid_1.nanoid)(10)}),t),a=e.store.addPage(n),i=e.store.pages.indexOf(e);a.setZIndex(i+1),a.select()},setZIndex(t){e.store.setPageZIndex(e.id,t)},set(t){Object.assign(e,t)},select(){e.store.selectPage(e.id)},addElement(t){const o=TYPES_MAP[t.type];if(!o)return void console.error("Can not find model with type "+t.type);t.children&&t.children.forEach((e=>{e.id=(0,nanoid_1.nanoid)(10)}));const n=o.create(Object.assign({id:(0,nanoid_1.nanoid)(10)},t));return e.children.push(n),n.selectable&&e.store.selectElements([n.id]),n},canMoveElementsUp(t){let o=!1;return e._forEachElementUp(t,(()=>{o=o\|\|!0})),o},moveElementsUp(t){e._forEachElementUp(t,(t=>{const o=e.children[t];(0,mobx_state_tree_1.detach)(o),e.children.splice(t+1,0,o)}))},canMoveElementsTop(e){return this.canMoveElementsUp(e)},moveElementsTop(t){const o=[],n=[];e.children.forEach((e=>{t.indexOf(e.id)>=0?o.push(e):n.push(e)})),e.children.replace(n.concat(o))},canMoveElementsDown(t){let o=!1;return e._forEachElementDown(t,(()=>{o=o\|\|!0})),o},moveElementsDown(t){e._forEachElementDown(t,(t=>{const o=e.children[t];(0,mobx_state_tree_1.detach)(o),e.children.splice(t-1,0,o)}))},canMoveElementsBottom(e){return this.canMoveElementsDown(e)},moveElementsBottom(t){const o=[],n=[];e.children.forEach((e=>{t.indexOf(e.id)>=0?o.push(e):n.push(e)})),e.children.replace(o.concat(n))},setElementZIndex(t,o){const n=e.children.find((e=>e.id===t));n&&((0,mobx_state_tree_1.detach)(n),e.children.remove(n),e.children.splice(o,0,n))},setSize({width:t,height:o,useMagic:n,softChange:a}){if(n){const n=t/e.computedWidth,a=o/e.computedHeight,i=Math.min(n,a),s=Math.max(0,(t-e.computedWidthi)/2),r=Math.max(0,(o-e.computedHeighti)/2);forEveryChild(e,(async t=>{if("group"===t.type)return;"image"===t.type&&t.x<1&&t.y<1&&t.width>=e.computedWidth-2&&t.height>=e.computedHeight-2?t.set({x:t.xi,y:t.yi,width:t.widthn,height:t.heighta,cropX:0,cropY:0,cropWidth:1,cropHeight:1}):(t.set({x:s+t.xi,y:r+t.yi,width:t.widthi,height:t.heighti}),"text"===t.type&&t.set({fontSize:t.fontSizei}))}))}a\|\|(e.width=t),a\|\|(e.height=o)}}))).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])}}))),exports.Font=mobx_state_tree_1.types.model("Font",{fontFamily:mobx_state_tree_1.types.string,url:mobx_state_tree_1.types.optional(mobx_state_tree_1.types.string,""),styles:mobx_state_tree_1.types.frozen()}).preProcessSnapshot((e=>Object.assign(Object.assign({},e),{fontFamily:e.fontFamily\|\|e.name}))),exports.Store=mobx_state_tree_1.types.model("Store",{role:"",pages:mobx_state_tree_1.types.array(exports.Page),fonts:mobx_state_tree_1.types.array(exports.Font),width:1080,height:1080,currentTime:0,isPlaying:!1,scale:1,scaleToFit:1,unit:"px",dpi:72,bleedVisible:!1,rulesVisible:!1,openedSidePanel:"",selectedElementsIds:mobx_state_tree_1.types.array(mobx_state_tree_1.types.string),animatedElementsIds:mobx_state_tree_1.types.array(mobx_state_tree_1.types.string),history:mobx_state_tree_1.types.optional(history_1.UndoManager,{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(const o of e.pages)for(const e of o.children)if(e.id===t)return e})).filter((e=>!!e))},get children(){return e.pages},get selectedShapes(){const t=[];return e.selectedElementsIds.forEach((o=>{for(const n of e.pages)for(const e of n.children)e.id===o&&"group"!==e.type&&t.push(e),"group"===e.type&&e.id===o&&t.push(...e.children)})),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}}))).actions((e=>{let t=0;return{afterCreate(){e.history.canUndo},setCurrentTime(t){e.currentTime=t},play({animatedElementsIds:o=[],currentTime:n=0}={}){e.animatedElementsIds=(0,mobx_state_tree_1.cast)(o),e.currentTime=n,e.isPlaying=!0,t=Date.now(),requestAnimationFrame(e.seek)},seek(){if(!e.isPlaying)return;const o=Date.now(),n=o-t;t=o,e.currentTime+=n;let a=0;for(const t of e.pages){if(e.currentTime>=t.startTime&&e.currentTime<t.startTime+t.duration){e.selectPage(t.id);break}a+=t.duration}e.isPlaying&&e.currentTime<e.duration?requestAnimationFrame(e.seek):e.stop()},stop(){e.isPlaying=!1,e.currentTime=0,e.animatedElementsIds=(0,mobx_state_tree_1.cast)([])}}})).actions((e=>({setUnit({unit:t,dpi:o}){e.unit=t\|\|e.unit,e.dpi=o\|\|e.dpi},setRole(t){e.role=t},find(t){let o;return forEveryChild({children:e.pages},(e=>{!o&&t(e)&&(o=e)})),o},getElementById:t=>e.find((e=>e.id===t)),addPage(t){const o=exports.Page.create(Object.assign({id:(0,nanoid_1.nanoid)(10)},t));return e.pages.push(o),e._activePageId=o.id,o},selectPage(t){e._activePageId=t},selectElements(t){const o=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,mobx_state_tree_1.cast)(o)},toggleBleed(t){e.bleedVisible=null!=t?t:!e.bleedVisible},toggleRulers(t){e.rulesVisible=null!=t?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,o,n){e.pages.forEach((e=>{e.setSize({width:t,height:o,useMagic:n,softChange:!0})})),e.width=t,e.height=o},setPageZIndex(t,o){const n=e.pages.find((e=>e.id===t));n&&((0,mobx_state_tree_1.detach)(n),e.pages.remove(n),e.pages.splice(o,0,n))},deletePages(t){const o=e.pages.indexOf(e.activePage);t.forEach((t=>{const o=e.pages.find((e=>e.id===t));(0,mobx_state_tree_1.destroy)(o)}));const n=Math.min(e.pages.length-1,o),a=e.pages[n];a&&(e._activePageId=a.id),e.selectedElementsIds=(0,mobx_state_tree_1.cast)(e.selectedElementsIds.filter((t=>e.getElementById(t))))},groupElements(t){const o=t.map((t=>e.getElementById(t)));o.forEach((e=>{e&&(0,mobx_state_tree_1.detach)(e)}));const n=e.activePage,a=exports.GroupElement.create({id:(0,nanoid_1.nanoid)(10),children:(0,mobx_state_tree_1.cast)(o)});return n.children.push(a),e.selectedElementsIds=(0,mobx_state_tree_1.cast)([a.id]),a},ungroupElements(t){const o=t.map((t=>e.getElementById(t))),n=[];o.forEach((e=>{if(e&&"group"===e.type){const t=e.page,o=t.children.indexOf(e);e.children.forEach((e=>{n.push(e.id)})),e.children.forEach((e=>{(0,mobx_state_tree_1.detach)(e),t.children.push(e)})),t.children.splice(o,1)}})),e.selectedElementsIds=(0,mobx_state_tree_1.cast)(n)},deleteElements(t){t.forEach((t=>{e.pages.forEach((e=>{const o=e.children.find((e=>e.id===t));o&&(0,mobx_state_tree_1.destroy)(o)}))})),e.selectedElementsIds=(0,mobx_state_tree_1.cast)(e.selectedElementsIds.filter((t=>e.getElementById(t))))},on(t,o){if("change"===t){let t=e.toJSON();return(0,mobx_state_tree_1.onSnapshot)(e,(n=>{const a=e.toJSON();!(0,deep_equal_1.deepEqual)(t,a)&&(t=a,o(a))}))}},async _toCanvas({pixelRatio:t,ignoreBackground:o,pageId:n,mimeType:a,includeBleed:i}={}){var s;const r=t\|\|1;n=n\|\|(null===(s=e.pages[0])\|\|void 0===s?void 0:s.id);const l=e.pages.find((e=>e.id===n));if(!l)throw new Error(`No page for export with id ${n}`);null==l\|\|l.set({_exporting:!0});const d=await(0,wait_1.waitTillAvailable)((()=>konva_1.default.stages.find((e=>e.getAttr("pageId")===n))));if(!d)throw new Error(`Export is failed. Can not find stage for page ${n}. Looks like <Workspace /> component is not mounted, but it is required in order to process the export.`);const c=!!d.findOne(".page-container");await e.waitLoading();const p=d.findOne(".page-container");if(!p)throw new Error(`Export is failed. Can't find page container. ${c}`);d.find("Transformer").forEach((e=>e.visible(!1))),p.find(".page-background").forEach((e=>e.shadowEnabled(!1))),p.find(".page-background").forEach((e=>e.strokeEnabled(!1))),p.find(".highlighter").forEach((e=>e.visible(!1)));const m=p.findOne(".page-background-group"),g=m.clip();m.clip({x:null,y:null,width:null,height:null});const _=p.findOne(".elements-container"),h=_.clip();_.clip({x:null,y:null,width:null,height:null});const u=p.find((e=>e.getAttr("hideInExport")));u.forEach((e=>{e.setAttr("oldVisible",e.visible()),e.hide()}));const f=p.find((e=>!e.visible()&&e.getAttr("editModeEnabled")));f.forEach((e=>{e.setAttr("oldVisible",e.visible()),e.show()})),o&&p.find(".page-background").forEach((e=>e.hide()));const b=i?l.bleed:0;let y=b;e.bleedVisible&&i?y=0:e.bleedVisible&&!i&&(y=-l.bleed);const x=document.createElement("canvas");x.width=(l.computedWidth+2b)r,x.height=(l.computedHeight+2b)r;const E=x.getContext("2d");"image/jpeg"===a&&(E.fillStyle="white",E.fillRect(0,0,x.width,x.height));const v=p.toCanvas({x:p.x()-yp.scaleX(),y:p.y()-yp.scaleY(),width:(l.computedWidth+2b)p.scaleX(),height:(l.computedHeight+2b)p.scaleY(),pixelRatio:1/p.scaleX()r});return E.drawImage(v,0,0),konva_1.default.Util.releaseCanvas(v),o&&p.find(".page-background").forEach((e=>e.show())),u.forEach((e=>{e.visible(e.getAttr("oldVisible"))})),f.forEach((e=>{e.visible(e.getAttr("oldVisible"))})),p.find(".page-background").forEach((e=>e.shadowEnabled(!0))),p.find(".page-background").forEach((e=>e.strokeEnabled(!0))),d.find("Transformer").forEach((e=>e.visible(!0))),p.find(".highlighter").forEach((e=>e.visible(!0))),m.clip(g),_.clip(h),null==l\|\|l.set({_exporting:!1}),x},async toDataURL({pixelRatio:t,ignoreBackground:o,pageId:n,mimeType:a,includeBleed:i,quality:s}={}){const r=await e._toCanvas({pixelRatio:t,ignoreBackground:o,pageId:n,mimeType:a,includeBleed:i}),l=r.toDataURL(a,s);return konva_1.default.Util.releaseCanvas(r),l},async toBlob({pixelRatio:t,ignoreBackground:o,pageId:n,mimeType:a,includeBleed:i,quality:s}={}){const r=await e._toCanvas({pixelRatio:t,ignoreBackground:o,pageId:n,mimeType:a,includeBleed:i}),l=new Promise((e=>{r.toBlob(e,a,s)}));return konva_1.default.Util.releaseCanvas(r),l},async saveAsImage(t={}){var{fileName:o}=t,n=__rest(t,["fileName"]);const a=n.mimeType\|\|"image/png",i=a.split("/")[1];(0,download_1.downloadFile)(await e.toDataURL(n),o\|\|"polotno."+i,a)},async _toPDF(t){const o=t.dpi\|\|e.dpi,n=t.parallel\|\|1,a=t.unit\|\|("px"===e.unit?"mm":e.unit),i=t.pixelRatio\|\|1,s=t.pageIds\|\|e.pages.map((e=>e.id)),r=e.pages.filter((e=>s.includes(e.id))),l=await(0,pdf_1.getJsPDF)(),d=e=>(0,unit_1.pxToUnit)({px:e,unit:a,dpi:o}),c=r[0]\|\|{},p=t.includeBleed?c.bleed:0,m=d(c.computedWidth+2p),g=d(c.computedHeight+2p);var _=new l({unit:a,orientation:m>g?"landscape":"portrait",format:[m,g],compress:!0,putOnlyUsedFonts:!0});_.deletePage(1);const h=e._elementsPixelRatio;e.setElementsPixelRatio(i),await new Promise((e=>setTimeout(e)));const u=((e,t)=>{for(var o=[],n=0;n<e.length;n+=t)o.push(e.slice(n,n+t));return o})(r,n);for(const o of u){const n=o.map((async o=>{const n=t.includeBleed?o.bleed:0,a=d(o.computedWidth+2n),s=d(o.computedHeight+2n);let r=0,l=i;for(;r<10;){r+=1,2===r&&console.error("Polotno can not export PDF with current settings. Quality is automatically reduced.");const n=await e.toDataURL(Object.assign(Object.assign({},t),{pageId:o.id,pixelRatio:l}));if(n.length>20)return{url:n,width:a,height:s};l=.8}}));(await Promise.all(n)).forEach((({url:e,width:t,height:o})=>{_.addPage([t,o],t>o?"landscape":"portrait"),_.addImage(e,0,0,t,o,void 0,"FAST")}))}return e.setElementsPixelRatio(h),_},toPDFDataURL:async t=>(await e._toPDF(Object.assign({mimeType:"image/jpeg"},t))).output("datauristring"),async toGIFDataURL(t={}){const o=t.pixelRatio\|\|1,n=await(0,gif_lib_1.createGIF)({width:e.widtho,height:e.heighto}),a=1e3/(t.fps\|\|10),i=e.duration/a;for(let t=0;t<i-1;t++){const i=ta\|\|1;e.setCurrentTime(i);let s=0,r="";for(const t of e.pages)if(s+=t.duration,t.set({_rendering:s>i}),s>i){r=t.id;break}const l=await e._toCanvas({pixelRatio:o,pageId:r});n.addFrame(l.getContext("2d"),{delay:a,copy:!0})}for(const t of e.pages)t.set({_rendering:!1});e.stop(),n.render();return new Promise((e=>{n.on("finished",(function(t){!function(e,t){var o=new FileReader;o.onload=function(e){t(e.target.result)},o.readAsDataURL(e)}(t,e)}))}))},async saveAsGIF(t={}){var{fileName:o}=t,n=__rest(t,["fileName"]);const a=await e.toGIFDataURL(n);(0,download_1.downloadFile)(a,o\|\|"polotno.gif")},async toHTML(){const t=e.toJSON();return(0,html_1.jsonToHTML)({json:t})},async saveAsHTML({fileName:t}={}){const o=await e.toHTML(),n="data:text/html;base64,"+window.btoa(unescape(encodeURIComponent(o)));(0,download_1.downloadFile)(n,t\|\|"polotno.html")},async toSVG(){const t=e.toJSON();return(0,to_svg_1.jsonToSVG)({json:t})},async saveAsSVG({fileName:t}={}){const o=await e.toSVG(),n="data:text/svg;base64,"+window.btoa(unescape(encodeURIComponent(o)));(0,download_1.downloadFile)(n,t\|\|"polotno.svg")},async saveAsPDF(t={}){var{fileName:o}=t,n=__rest(t,["fileName"]);(await e._toPDF(Object.assign({mimeType:"image/jpeg"},n))).save(o\|\|"polotno.pdf")},async waitLoading(){await new Promise((e=>setTimeout(e,50))),await(0,loader_1.whenLoaded)()},toJSON:()=>({width:e.width,height:e.height,fonts:(0,mobx_state_tree_1.getSnapshot)(e.fonts),pages:(0,mobx_state_tree_1.getSnapshot)(e.pages),unit:e.unit,dpi:e.dpi}),loadJSON(t,o=!1){var n;const a=Object.assign({},t),i=e.pages.indexOf(e.activePage);let s=null===(n=a.pages[i]\|\|a.pages[0])\|\|void 0===n?void 0:n.id;a._activePageId=s;const r=Object.assign({},(0,mobx_state_tree_1.getSnapshot)(e));Object.assign(r,a),r.history=o?e.history.toJSON():{history:[],undoIdx:-1},(0,mobx_state_tree_1.applySnapshot)(e,r)},clear({keepHistory:t=!1}={}){const o=e.pages.map((e=>e.id));e.deletePages(o),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,mobx_state_tree_1.destroy)(e)))},async loadFont(t){const o=e.fonts.find((e=>e.fontFamily===t))\|\|fonts.globalFonts.find((e=>e.fontFamily===t));o?fonts.injectCustomFont(o):fonts.injectGoogleFont(t),await fonts.loadFont(t)}}))),exports.createStore=createStore,exports.default=createStore;
1	+ "use strict";var __createBinding=this&&this.__createBinding\|\|(Object.create?function(e,t,o,n){void 0===n&&(n=o);var a=Object.getOwnPropertyDescriptor(t,o);a&&!("get"in a?!t.__esModule:a.writable\|\|a.configurable)\|\|(a={enumerable:!0,get:function(){return t[o]}}),Object.defineProperty(e,n,a)}:function(e,t,o,n){void 0===n&&(n=o),e[n]=t[o]}),__setModuleDefault=this&&this.__setModuleDefault\|\|(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),__importStar=this&&this.__importStar\|\|function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var o in e)"default"!==o&&Object.prototype.hasOwnProperty.call(e,o)&&__createBinding(t,e,o);return __setModuleDefault(t,e),t},__rest=this&&this.__rest\|\|function(e,t){var o={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(o[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(n=Object.getOwnPropertySymbols(e);a<n.length;a++)t.indexOf(n[a])<0&&Object.prototype.propertyIsEnumerable.call(e,n[a])&&(o[n[a]]=e[n[a]])}return o},__importDefault=this&&this.__importDefault\|\|function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.createStore=exports.Store=exports.Font=exports.Page=exports.GroupElement=exports.registerShapeModel=exports.SVGElement=exports.LineElement=exports.VideoElement=exports.ImageElement=exports.TextElement=exports.Element=exports.Animation=exports.Node=void 0;const mobx_state_tree_1=require("mobx-state-tree"),history_1=require("./history"),nanoid_1=require("nanoid"),konva_1=__importDefault(require("konva")),download_1=require("../utils/download"),pdf_1=require("../utils/pdf"),gif_lib_1=require("../utils/gif-lib"),validate_key_1=require("../utils/validate-key"),fonts=__importStar(require("../utils/fonts")),loader_1=require("../utils/loader"),unit_1=require("../utils/unit"),deep_equal_1=require("../utils/deep-equal"),wait_1=require("../utils/wait"),html_1=require("../utils/html"),to_svg_1=require("../utils/to-svg"),animations_1=require("../utils/animations");(0,mobx_state_tree_1.setLivelinessChecking)("ignore");const forEveryChild=(e,t)=>{e.children&&e.children.forEach((e=>{t(e),forEveryChild(e,t)}))};exports.Node=mobx_state_tree_1.types.model("Node",{id:mobx_state_tree_1.types.identifier,type:"none",name:"",opacity:1,custom:mobx_state_tree_1.types.frozen(),visible:!0,selectable:!0,removable:!0,alwaysOnTop:!1,showInExport:!0}).postProcessSnapshot((e=>{const t=Object.assign({},e),o={};for(var n in t)"_"!==n[0]&&(o[n]=e[n]);return o})).views((e=>({get locked(){return!(e.draggable\|\|e.contentEditable\|\|e.styleEditable\|\|e.resizable)},get page(){return(0,mobx_state_tree_1.getParentOfType)(e,exports.Page)},get store(){return(0,mobx_state_tree_1.getParentOfType)(e,exports.Store)},get top(){let t=e;for(;;){if(!(0,mobx_state_tree_1.hasParentOfType)(t,exports.GroupElement))return t;t=(0,mobx_state_tree_1.getParentOfType)(t,exports.GroupElement)}},get parent(){return(0,mobx_state_tree_1.hasParentOfType)(e,exports.GroupElement)?(0,mobx_state_tree_1.getParentOfType)(e,exports.GroupElement):(0,mobx_state_tree_1.hasParentOfType)(e,exports.Page)?(0,mobx_state_tree_1.getParentOfType)(e,exports.Page):(0,mobx_state_tree_1.hasParentOfType)(e,exports.Store)?(0,mobx_state_tree_1.getParentOfType)(e,exports.Store):null}}))).actions((e=>({toJSON:()=>Object.assign({},(0,mobx_state_tree_1.getSnapshot)(e))}))).actions((e=>({clone(t={}){const o=e.toJSON();return t.id=t.id\|\|(0,nanoid_1.nanoid)(10),forEveryChild(o,(e=>{e.id=(0,nanoid_1.nanoid)(10)})),Object.assign(o,t),e.page.addElement(o)},set(t){Object.assign(e,t)},moveUp(){e.page.moveElementsUp([e.id])},moveTop(){e.page.moveElementsTop([e.id])},moveDown(){e.page.moveElementsDown([e.id])},moveBottom(){e.page.moveElementsBottom([e.id])},beforeDestroy(){e.store.history.endTransaction()}}))),exports.Animation=mobx_state_tree_1.types.model("Animation",{delay:0,duration:500,enabled:!0,type:mobx_state_tree_1.types.enumeration("Type",["enter","exit"]),name:"none",data:mobx_state_tree_1.types.frozen({})}),exports.Element=exports.Node.named("Element").props({x:0,y:0,width:100,height:100,rotation:0,opacity:1,animations:mobx_state_tree_1.types.array(exports.Animation),blurEnabled:!1,blurRadius:10,brightnessEnabled:!1,brightness:0,sepiaEnabled:!1,grayscaleEnabled:!1,shadowEnabled:!1,shadowBlur:5,shadowOffsetX:0,shadowOffsetY:0,shadowColor:"black",shadowOpacity:1,visible:!0,draggable:!0,resizable:!0,selectable:!0,contentEditable:!0,styleEditable:!0,alwaysOnTop:!1,showInExport:!0}).preProcessSnapshot((e=>{const t=Object.assign(Object.assign({},e),{x:e.x\|\|0,y:e.y\|\|0});return"width"in e&&(t.width=t.width\|\|1),"height"in e&&(t.height=t.height\|\|1),e.locked&&(t.draggable=!1,t.contentEditable=!1,t.styleEditable=!1,t.resizable=!1),t})).views((e=>({get a(){const{currentTime:t}=e.store,o={x:e.x,y:e.y,width:e.width,height:e.height,rotation:e.rotation,opacity:e.opacity,color:e.color,fontSize:e.fontSize};if(0===t)return o;const n=t-e.page.startTime;if(n>e.page.duration)return o;if(n<0)return o;const a=e.store.animatedElementsIds;if(a.length&&!a.includes(e.id))return o;const i=e.animations.find((e=>"enter"===e.type));(null==i?void 0:i.enabled)&&n<i.delay&&(o.opacity=0);if((null==i?void 0:i.enabled)&&n>=i.delay&&n<=i.delay+i.duration){const t=n-i.delay,a=(0,animations_1.animate)({element:e,animation:i,dTime:t});Object.assign(o,a)}const s=e.animations.find((e=>"exit"===e.type));if((null==s?void 0:s.enabled)&&n>=e.page.duration-s.duration){const t=n-(e.page.duration-s.duration),a=(0,animations_1.animate)({element:e,animation:s,dTime:t});Object.assign(o,a)}return o},animated:t=>e.a[t]}))).actions((e=>({setAnimation(t,o){const n=e.animations.find((e=>e.type===t));n?Object.assign(n,o):e.animations.push(Object.assign({type:t},o))}}))),exports.TextElement=exports.Element.named("Text").props({type:"text",text:"",placeholder:"",fontSize:14,fontFamily:"Roboto",fontStyle:"normal",fontWeight:"normal",textDecoration:"",fill:"black",align:"center",width:100,height:0,verticalAlign:"top",strokeWidth:0,stroke:"black",lineHeight:mobx_state_tree_1.types.optional(mobx_state_tree_1.types.union(mobx_state_tree_1.types.number,mobx_state_tree_1.types.string),1.2),letterSpacing:0,_editModeEnabled:!1,backgroundEnabled:!1,backgroundColor:"#7ED321",backgroundOpacity:1,backgroundCornerRadius:.5,backgroundPadding:.5}).preProcessSnapshot((e=>Object.assign({},e))).actions((e=>({toggleEditMode(t){e._editModeEnabled=null!=t?t:!e._editModeEnabled,e._editModeEnabled?e.store.history.startTransaction():e.store.history.endTransaction()}}))),exports.ImageElement=exports.Element.named("Image").props({type:"image",width:100,height:100,src:"",cropX:0,cropY:0,cropWidth:1,cropHeight:1,cornerRadius:0,flipX:!1,flipY:!1,clipSrc:"",borderColor:"black",borderSize:0,keepRatio:!1,_cropModeEnabled:!1}).actions((e=>({toggleCropMode(t){e._cropModeEnabled=null!=t?t:!e._cropModeEnabled,e._cropModeEnabled?e.store.history.startTransaction():e.store.history.endTransaction()}}))),exports.VideoElement=exports.ImageElement.named("Video").props({type:"video",duration:0}),exports.LineElement=exports.Element.named("Line").props({type:"line",width:400,height:10,color:"black",dash:mobx_state_tree_1.types.array(mobx_state_tree_1.types.number),startHead:"",endHead:""}).actions((e=>({}))),exports.SVGElement=exports.Element.named("SVG").props({type:"svg",src:"",maskSrc:"",cropX:0,cropY:0,cropWidth:1,cropHeight:1,keepRatio:!0,flipX:!1,flipY:!1,width:100,height:100,borderColor:"black",borderSize:0,cornerRadius:0,colorsReplace:mobx_state_tree_1.types.map(mobx_state_tree_1.types.string)}).preProcessSnapshot((e=>Object.assign(Object.assign({},e),{src:e.src\|\|e.svgSource}))).actions((e=>({replaceColor(t,o){e.colorsReplace.set(t,o)}})));const ADDITIONAL_TYPES=[];function registerShapeModel(e){const t=e.type;if(!t)throw new Error('You must pass "type" attribute to custom model.');const o=exports.Element.named(t).props(e);TYPES_MAP[t]=o,ADDITIONAL_TYPES.push(o)}exports.registerShapeModel=registerShapeModel;const additionalTypesUnion=[...new Array(20)].map(((e,t)=>mobx_state_tree_1.types.late((()=>ADDITIONAL_TYPES[t])))),ElementTypes=mobx_state_tree_1.types.union({dispatcher:e=>{const t=TYPES_MAP[e.type];if(!t)throw new Error(`Unknown element type: "${e.type}"`);return t}},exports.SVGElement,exports.TextElement,exports.ImageElement,exports.LineElement,exports.VideoElement,mobx_state_tree_1.types.late((()=>exports.GroupElement)),...additionalTypesUnion);exports.GroupElement=exports.Node.named("Group").props({type:"group",children:mobx_state_tree_1.types.array(ElementTypes)}).views((e=>({get draggable(){let t=!0;return forEveryChild(e,(e=>{e.draggable\|\|(t=!1)})),t},get resizable(){let t=!0;return forEveryChild(e,(e=>{e.resizable\|\|(t=!1)})),t},get contentEditable(){let t=!0;return forEveryChild(e,(e=>{e.contentEditable\|\|(t=!1)})),t},get styleEditable(){let t=!0;return forEveryChild(e,(e=>{e.styleEditable\|\|(t=!1)})),t},get locked(){let t=!0;return forEveryChild(e,(e=>{e.locked\|\|(t=!1)})),t}}))).actions((e=>({set(t){var{draggable:o,contentEditable:n,styleEditable:a,resizable:i}=t,s=__rest(t,["draggable","contentEditable","styleEditable","resizable"]);void 0!==o&&forEveryChild(e,(e=>{e.set({draggable:o})})),void 0!==n&&forEveryChild(e,(e=>{e.set({contentEditable:n})})),void 0!==a&&forEveryChild(e,(e=>{e.set({styleEditable:a})})),void 0!==i&&forEveryChild(e,(e=>{e.set({resizable:i})})),Object.assign(e,s)}})));const TYPES_MAP={svg:exports.SVGElement,text:exports.TextElement,image:exports.ImageElement,group:exports.GroupElement,line:exports.LineElement,video:exports.VideoElement};function createStore({key:e,showCredit:t}={key:"",showCredit:!1}){const o=exports.Store.create();return(0,validate_key_1.validateKey)(e,t),o}exports.Page=mobx_state_tree_1.types.model("Page",{id:mobx_state_tree_1.types.identifier,children:mobx_state_tree_1.types.array(ElementTypes),width:mobx_state_tree_1.types.optional(mobx_state_tree_1.types.union(mobx_state_tree_1.types.number,mobx_state_tree_1.types.literal("auto")),"auto"),height:mobx_state_tree_1.types.optional(mobx_state_tree_1.types.union(mobx_state_tree_1.types.number,mobx_state_tree_1.types.literal("auto")),"auto"),background:"white",bleed:0,custom:mobx_state_tree_1.types.frozen(),duration:5e3,_exporting:!1,_rendering:!1}).postProcessSnapshot((e=>{const t=Object.assign({},e),o={};for(var n in t)"_"!==n[0]&&(o[n]=e[n]);return o})).views((e=>({get store(){return(0,mobx_state_tree_1.getParentOfType)(e,exports.Store)},get startTime(){let t=0;for(const o of e.store.pages){if(o.id===e.id)return t;t+=o.duration}return t}}))).views((e=>({get computedWidth(){return"auto"===e.width?e.store.width:e.width},get computedHeight(){return"auto"===e.height?e.store.height:e.height}}))).actions((e=>({toJSON:()=>JSON.parse(JSON.stringify((0,mobx_state_tree_1.getSnapshot)(e))),_forEachElementUp(t,o){const n=t.map((t=>({id:t,index:e.children.findIndex((e=>e.id===t))})));n.sort(((e,t)=>t.index-e.index));for(const{index:a}of n){if(-1==a)continue;const n=a<e.children.length-1&&e.children[a+1],i=t.indexOf(null==n?void 0:n.id)>=0;a===e.children.length-1\|\|i\|\|o(a)}},_forEachElementDown(t,o){const n=t.map((t=>({id:t,index:e.children.findIndex((e=>e.id===t))})));n.sort(((e,t)=>e.index-t.index));for(const{index:a}of n){if(-1==a)continue;const n=a>0&&e.children[a-1],i=t.indexOf(null==n?void 0:n.id)>=0;0===a\|\|i\|\|o(a)}return!1}}))).actions((e=>({clone(t={}){const o=e.toJSON();o.children.forEach((e=>{e.id=(0,nanoid_1.nanoid)(10),forEveryChild(e,(e=>{e.id=(0,nanoid_1.nanoid)(10)}))}));const n=Object.assign(Object.assign(Object.assign({},o),{id:(0,nanoid_1.nanoid)(10)}),t),a=e.store.addPage(n),i=e.store.pages.indexOf(e);a.setZIndex(i+1),a.select()},setZIndex(t){e.store.setPageZIndex(e.id,t)},set(t){Object.assign(e,t)},select(){e.store.selectPage(e.id)},addElement(t){const o=TYPES_MAP[t.type];if(!o)return void console.error("Can not find model with type "+t.type);t.children&&t.children.forEach((e=>{e.id=(0,nanoid_1.nanoid)(10)}));const n=o.create(Object.assign({id:(0,nanoid_1.nanoid)(10)},t));return e.children.push(n),n.selectable&&e.store.selectElements([n.id]),n},canMoveElementsUp(t){let o=!1;return e._forEachElementUp(t,(()=>{o=o\|\|!0})),o},moveElementsUp(t){e._forEachElementUp(t,(t=>{const o=e.children[t];(0,mobx_state_tree_1.detach)(o),e.children.splice(t+1,0,o)}))},canMoveElementsTop(e){return this.canMoveElementsUp(e)},moveElementsTop(t){const o=[],n=[];e.children.forEach((e=>{t.indexOf(e.id)>=0?o.push(e):n.push(e)})),e.children.replace(n.concat(o))},canMoveElementsDown(t){let o=!1;return e._forEachElementDown(t,(()=>{o=o\|\|!0})),o},moveElementsDown(t){e._forEachElementDown(t,(t=>{const o=e.children[t];(0,mobx_state_tree_1.detach)(o),e.children.splice(t-1,0,o)}))},canMoveElementsBottom(e){return this.canMoveElementsDown(e)},moveElementsBottom(t){const o=[],n=[];e.children.forEach((e=>{t.indexOf(e.id)>=0?o.push(e):n.push(e)})),e.children.replace(o.concat(n))},setElementZIndex(t,o){const n=e.children.find((e=>e.id===t));n&&((0,mobx_state_tree_1.detach)(n),e.children.remove(n),e.children.splice(o,0,n))},setSize({width:t,height:o,useMagic:n,softChange:a}){if(n){const n=t/e.computedWidth,a=o/e.computedHeight,i=Math.min(n,a),s=Math.max(0,(t-e.computedWidthi)/2),r=Math.max(0,(o-e.computedHeighti)/2);forEveryChild(e,(async t=>{if("group"===t.type)return;"image"===t.type&&t.x<1&&t.y<1&&t.width>=e.computedWidth-2&&t.height>=e.computedHeight-2?t.set({x:t.xi,y:t.yi,width:t.widthn,height:t.heighta,cropX:0,cropY:0,cropWidth:1,cropHeight:1}):(t.set({x:s+t.xi,y:r+t.yi,width:t.widthi,height:t.heighti}),"text"===t.type&&t.set({fontSize:t.fontSizei}))}))}a\|\|(e.width=t),a\|\|(e.height=o)}}))).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])}}))),exports.Font=mobx_state_tree_1.types.model("Font",{fontFamily:mobx_state_tree_1.types.string,url:mobx_state_tree_1.types.optional(mobx_state_tree_1.types.string,""),styles:mobx_state_tree_1.types.frozen()}).preProcessSnapshot((e=>Object.assign(Object.assign({},e),{fontFamily:e.fontFamily\|\|e.name}))),exports.Store=mobx_state_tree_1.types.model("Store",{role:"",pages:mobx_state_tree_1.types.array(exports.Page),fonts:mobx_state_tree_1.types.array(exports.Font),width:1080,height:1080,currentTime:0,isPlaying:!1,scale:1,scaleToFit:1,unit:"px",dpi:72,bleedVisible:!1,rulesVisible:!1,openedSidePanel:"",selectedElementsIds:mobx_state_tree_1.types.array(mobx_state_tree_1.types.string),animatedElementsIds:mobx_state_tree_1.types.array(mobx_state_tree_1.types.string),history:mobx_state_tree_1.types.optional(history_1.UndoManager,{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(const o of e.pages)for(const e of o.children)if(e.id===t)return e})).filter((e=>!!e))},get children(){return e.pages},get selectedShapes(){const t=[];return e.selectedElementsIds.forEach((o=>{for(const n of e.pages)for(const e of n.children)e.id===o&&"group"!==e.type&&t.push(e),"group"===e.type&&e.id===o&&t.push(...e.children)})),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}}))).actions((e=>{let t=0;return{afterCreate(){e.history.canUndo},setCurrentTime(t){e.currentTime=t},play({animatedElementsIds:o=[],currentTime:n=0}={}){e.animatedElementsIds=(0,mobx_state_tree_1.cast)(o),e.currentTime=n,e.isPlaying=!0,t=Date.now(),requestAnimationFrame(e.seek)},seek(){if(!e.isPlaying)return;const o=Date.now(),n=o-t;t=o,e.currentTime+=n;let a=0;for(const t of e.pages){if(e.currentTime>=t.startTime&&e.currentTime<t.startTime+t.duration){e.selectPage(t.id);break}a+=t.duration}e.isPlaying&&e.currentTime<e.duration?requestAnimationFrame(e.seek):e.stop()},stop(){e.isPlaying=!1,e.currentTime=0,e.animatedElementsIds=(0,mobx_state_tree_1.cast)([])}}})).actions((e=>({setUnit({unit:t,dpi:o}){e.unit=t\|\|e.unit,e.dpi=o\|\|e.dpi},setRole(t){e.role=t},find(t){let o;return forEveryChild({children:e.pages},(e=>{!o&&t(e)&&(o=e)})),o},getElementById:t=>e.find((e=>e.id===t)),addPage(t){const o=exports.Page.create(Object.assign({id:(0,nanoid_1.nanoid)(10)},t));return e.pages.push(o),e._activePageId=o.id,o},selectPage(t){e._activePageId=t},selectElements(t){const o=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,mobx_state_tree_1.cast)(o)},toggleBleed(t){e.bleedVisible=null!=t?t:!e.bleedVisible},toggleRulers(t){e.rulesVisible=null!=t?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,o,n){e.pages.forEach((e=>{e.setSize({width:t,height:o,useMagic:n,softChange:!0})})),e.width=t,e.height=o},setPageZIndex(t,o){const n=e.pages.find((e=>e.id===t));n&&((0,mobx_state_tree_1.detach)(n),e.pages.remove(n),e.pages.splice(o,0,n))},deletePages(t){const o=e.pages.indexOf(e.activePage);t.forEach((t=>{const o=e.pages.find((e=>e.id===t));(0,mobx_state_tree_1.destroy)(o)}));const n=Math.min(e.pages.length-1,o),a=e.pages[n];a&&(e._activePageId=a.id),e.selectedElementsIds=(0,mobx_state_tree_1.cast)(e.selectedElementsIds.filter((t=>e.getElementById(t))))},groupElements(t){const o=t.map((t=>e.getElementById(t)));o.forEach((e=>{e&&(0,mobx_state_tree_1.detach)(e)}));const n=e.activePage,a=exports.GroupElement.create({id:(0,nanoid_1.nanoid)(10),children:(0,mobx_state_tree_1.cast)(o)});return n.children.push(a),e.selectedElementsIds=(0,mobx_state_tree_1.cast)([a.id]),a},ungroupElements(t){const o=t.map((t=>e.getElementById(t))),n=[];o.forEach((e=>{if(e&&"group"===e.type){const t=e.page,o=t.children.indexOf(e);e.children.forEach((e=>{n.push(e.id)})),e.children.forEach((e=>{(0,mobx_state_tree_1.detach)(e),t.children.push(e)})),t.children.splice(o,1)}})),e.selectedElementsIds=(0,mobx_state_tree_1.cast)(n)},deleteElements(t){t.forEach((t=>{e.pages.forEach((e=>{const o=e.children.find((e=>e.id===t));o&&(0,mobx_state_tree_1.destroy)(o)}))})),e.selectedElementsIds=(0,mobx_state_tree_1.cast)(e.selectedElementsIds.filter((t=>e.getElementById(t))))},on(t,o){if("change"===t){let t=e.toJSON();return(0,mobx_state_tree_1.onSnapshot)(e,(n=>{const a=e.toJSON();!(0,deep_equal_1.deepEqual)(t,a)&&(t=a,o(a))}))}},async _toCanvas({pixelRatio:t,ignoreBackground:o,pageId:n,mimeType:a,includeBleed:i}={}){var s;const r=t\|\|1;n=n\|\|(null===(s=e.pages[0])\|\|void 0===s?void 0:s.id);const l=e.pages.find((e=>e.id===n));if(!l)throw new Error(`No page for export with id ${n}`);null==l\|\|l.set({_exporting:!0});const d=await(0,wait_1.waitTillAvailable)((()=>konva_1.default.stages.find((e=>e.getAttr("pageId")===n))));if(!d)throw new Error(`Export is failed. Can not find stage for page ${n}. Looks like <Workspace /> component is not mounted, but it is required in order to process the export.`);const c=!!d.findOne(".page-container");await e.waitLoading();const p=d.findOne(".page-container");if(!p)throw new Error(`Export is failed. Can't find page container. ${c}`);d.find("Transformer").forEach((e=>e.visible(!1))),p.find(".page-background").forEach((e=>e.shadowEnabled(!1))),p.find(".page-background").forEach((e=>e.strokeEnabled(!1))),p.find(".highlighter").forEach((e=>e.visible(!1)));const m=p.scale();p.scale({x:1,y:1});const g=p.findOne(".page-background-group"),_=g.clip();g.clip({x:null,y:null,width:null,height:null});const h=p.findOne(".elements-container"),u=h.clip();h.clip({x:null,y:null,width:null,height:null});const f=p.find((e=>e.getAttr("hideInExport")));f.forEach((e=>{e.setAttr("oldVisible",e.visible()),e.hide()}));const b=p.find((e=>!e.visible()&&e.getAttr("editModeEnabled")));b.forEach((e=>{e.setAttr("oldVisible",e.visible()),e.show()})),o&&p.find(".page-background").forEach((e=>e.hide()));const y=i?l.bleed:0;let x=y;e.bleedVisible&&i?x=0:e.bleedVisible&&!i&&(x=-l.bleed);const E=document.createElement("canvas");E.width=(l.computedWidth+2y)r,E.height=(l.computedHeight+2y)r;const v=E.getContext("2d");"image/jpeg"===a&&(v.fillStyle="white",v.fillRect(0,0,E.width,E.height));const w=p.toCanvas({x:p.x()-xp.scaleX(),y:p.y()-xp.scaleY(),width:(l.computedWidth+2y)p.scaleX(),height:(l.computedHeight+2y)p.scaleY(),pixelRatio:1/p.scaleX()r});return v.drawImage(w,0,0),konva_1.default.Util.releaseCanvas(w),o&&p.find(".page-background").forEach((e=>e.show())),f.forEach((e=>{e.visible(e.getAttr("oldVisible"))})),b.forEach((e=>{e.visible(e.getAttr("oldVisible"))})),p.find(".page-background").forEach((e=>e.shadowEnabled(!0))),p.find(".page-background").forEach((e=>e.strokeEnabled(!0))),d.find("Transformer").forEach((e=>e.visible(!0))),p.find(".highlighter").forEach((e=>e.visible(!0))),g.clip(_),h.clip(u),p.scale(m),null==l\|\|l.set({_exporting:!1}),E},async toDataURL({pixelRatio:t,ignoreBackground:o,pageId:n,mimeType:a,includeBleed:i,quality:s}={}){const r=await e._toCanvas({pixelRatio:t,ignoreBackground:o,pageId:n,mimeType:a,includeBleed:i}),l=r.toDataURL(a,s);return konva_1.default.Util.releaseCanvas(r),l},async toBlob({pixelRatio:t,ignoreBackground:o,pageId:n,mimeType:a,includeBleed:i,quality:s}={}){const r=await e._toCanvas({pixelRatio:t,ignoreBackground:o,pageId:n,mimeType:a,includeBleed:i}),l=new Promise((e=>{r.toBlob(e,a,s)}));return konva_1.default.Util.releaseCanvas(r),l},async saveAsImage(t={}){var{fileName:o}=t,n=__rest(t,["fileName"]);const a=n.mimeType\|\|"image/png",i=a.split("/")[1];(0,download_1.downloadFile)(await e.toDataURL(n),o\|\|"polotno."+i,a)},async _toPDF(t){const o=t.dpi\|\|e.dpi,n=t.parallel\|\|1,a=t.unit\|\|("px"===e.unit?"mm":e.unit),i=t.pixelRatio\|\|1,s=t.pageIds\|\|e.pages.map((e=>e.id)),r=e.pages.filter((e=>s.includes(e.id))),l=await(0,pdf_1.getJsPDF)(),d=e=>(0,unit_1.pxToUnit)({px:e,unit:a,dpi:o}),c=r[0]\|\|{},p=t.includeBleed?c.bleed:0,m=d(c.computedWidth+2p),g=d(c.computedHeight+2p);var _=new l({unit:a,orientation:m>g?"landscape":"portrait",format:[m,g],compress:!0,putOnlyUsedFonts:!0});_.deletePage(1);const h=e._elementsPixelRatio;e.setElementsPixelRatio(i),await new Promise((e=>setTimeout(e)));const u=((e,t)=>{for(var o=[],n=0;n<e.length;n+=t)o.push(e.slice(n,n+t));return o})(r,n);for(const o of u){const n=o.map((async o=>{const n=t.includeBleed?o.bleed:0,a=d(o.computedWidth+2n),s=d(o.computedHeight+2n);let r=0,l=i;for(;r<10;){r+=1,2===r&&console.error("Polotno can not export PDF with current settings. Quality is automatically reduced.");const n=await e.toDataURL(Object.assign(Object.assign({},t),{pageId:o.id,pixelRatio:l}));if(n.length>20)return{url:n,width:a,height:s};l=.8}}));(await Promise.all(n)).forEach((({url:e,width:t,height:o})=>{_.addPage([t,o],t>o?"landscape":"portrait"),_.addImage(e,0,0,t,o,void 0,"FAST")}))}return e.setElementsPixelRatio(h),_},toPDFDataURL:async t=>(await e._toPDF(Object.assign({mimeType:"image/jpeg"},t))).output("datauristring"),async toGIFDataURL(t={}){const o=t.pixelRatio\|\|1,n=await(0,gif_lib_1.createGIF)({width:e.widtho,height:e.heighto}),a=1e3/(t.fps\|\|10),i=e.duration/a;for(let t=0;t<i-1;t++){const i=ta\|\|1;e.setCurrentTime(i);let s=0,r="";for(const t of e.pages)if(s+=t.duration,t.set({_rendering:s>i}),s>i){r=t.id;break}const l=await e._toCanvas({pixelRatio:o,pageId:r});n.addFrame(l.getContext("2d"),{delay:a,copy:!0})}for(const t of e.pages)t.set({_rendering:!1});e.stop(),n.render();return new Promise((e=>{n.on("finished",(function(t){!function(e,t){var o=new FileReader;o.onload=function(e){t(e.target.result)},o.readAsDataURL(e)}(t,e)}))}))},async saveAsGIF(t={}){var{fileName:o}=t,n=__rest(t,["fileName"]);const a=await e.toGIFDataURL(n);(0,download_1.downloadFile)(a,o\|\|"polotno.gif")},async toHTML(){const t=e.toJSON();return(0,html_1.jsonToHTML)({json:t})},async saveAsHTML({fileName:t}={}){const o=await e.toHTML(),n="data:text/html;base64,"+window.btoa(unescape(encodeURIComponent(o)));(0,download_1.downloadFile)(n,t\|\|"polotno.html")},async toSVG(){const t=e.toJSON();return(0,to_svg_1.jsonToSVG)({json:t})},async saveAsSVG({fileName:t}={}){const o=await e.toSVG(),n="data:text/svg;base64,"+window.btoa(unescape(encodeURIComponent(o)));(0,download_1.downloadFile)(n,t\|\|"polotno.svg")},async saveAsPDF(t={}){var{fileName:o}=t,n=__rest(t,["fileName"]);(await e._toPDF(Object.assign({mimeType:"image/jpeg"},n))).save(o\|\|"polotno.pdf")},async waitLoading(){await new Promise((e=>setTimeout(e,50))),await(0,loader_1.whenLoaded)()},toJSON:()=>({width:e.width,height:e.height,fonts:(0,mobx_state_tree_1.getSnapshot)(e.fonts),pages:(0,mobx_state_tree_1.getSnapshot)(e.pages),unit:e.unit,dpi:e.dpi}),loadJSON(t,o=!1){var n;const a=Object.assign({},t),i=e.pages.indexOf(e.activePage);let s=null===(n=a.pages[i]\|\|a.pages[0])\|\|void 0===n?void 0:n.id;a._activePageId=s;const r=Object.assign({},(0,mobx_state_tree_1.getSnapshot)(e));Object.assign(r,a),r.history=o?e.history.toJSON():{history:[],undoIdx:-1},(0,mobx_state_tree_1.applySnapshot)(e,r)},clear({keepHistory:t=!1}={}){const o=e.pages.map((e=>e.id));e.deletePages(o),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,mobx_state_tree_1.destroy)(e)))},async loadFont(t){const o=e.fonts.find((e=>e.fontFamily===t))\|\|fonts.globalFonts.find((e=>e.fontFamily===t));o?fonts.injectCustomFont(o):fonts.injectGoogleFont(t),await fonts.loadFont(t)}}))),exports.createStore=createStore,exports.default=createStore;

package/package.json CHANGED Viewed

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