polotno 2.0.0 → 2.0.2

package/canvas/page.js

@@ -1 +1 @@
-"use strict";var __rest=this&&this.__rest||function(e,t){var r={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(r[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(n=Object.getOwnPropertySymbols(e);a<n.length;a++)t.indexOf(n[a])<0&&Object.prototype.propertyIsEnumerable.call(e,n[a])&&(r[n[a]]=e[n[a]])}return r},__importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.registerNextDomDrop=exports.registerTransformerAttrs=exports.setTransformerStyle=void 0;const react_1=__importDefault(require("react")),mobx_react_lite_1=require("mobx-react-lite"),mobx_1=require("mobx"),react_konva_1=require("react-konva"),use_image_1=__importDefault(require("use-image")),konva_1=__importDefault(require("konva")),element_1=__importDefault(require("./element")),use_transformer_snap_1=require("./use-transformer-snap"),image_element_1=require("./image-element"),crop_1=require("../utils/crop"),validate_key_1=require("../utils/validate-key"),math_1=require("../utils/math"),unit_1=require("../utils/unit"),flags_1=require("../utils/flags"),screen_1=require("../utils/screen"),rotateFillGroup=new konva_1.default.Group,rotateFillSize=20;rotateFillGroup.add(new konva_1.default.Rect({width:20,height:20,fill:"white"})),rotateFillGroup.add(new konva_1.default.Path({scaleX:20/24,scaleY:20/24,data:"M4.98313549,11.0001422 C5.49589839,10.9914935 5.92501998,11.3703506 5.99116425,11.8666444 L5.99985778,11.9831355 L6.00348884,12.2068855 C6.11245031,15.4321748 8.76323537,17.9999971 11.9999971,17.9999971 C12.1869612,17.9999971 12.3726725,17.9914753 12.5567465,17.9745765 L12.2928932,17.7071068 C11.9023689,17.3165825 11.9023689,16.6834175 12.2928932,16.2928932 C12.6834175,15.9023689 13.3165825,15.9023689 13.7071068,16.2928932 L15.7071068,18.2928932 C16.0976311,18.6834175 16.0976311,19.3165825 15.7071068,19.7071068 L13.7071068,21.7071068 C13.3165825,22.0976311 12.6834175,22.0976311 12.2928932,21.7071068 C11.9023689,21.3165825 11.9023689,20.6834175 12.2928932,20.2928932 L12.6111505,19.9769552 C12.4086045,19.9922816 12.2047796,19.9999971 11.9999971,19.9999971 C7.7687005,19.9999971 4.28886152,16.7094374 4.01666425,12.5105203 L4.00420123,12.2575143 L4.00014222,12.0168645 C3.9908282,11.4646583 4.43092928,11.0094562 4.98313549,11.0001422 Z M11.7071068,2.29289322 C12.0675907,2.65337718 12.0953203,3.22060824 11.7902954,3.61289944 L11.7071068,3.70710678 L11.3891629,4.0230186 C11.5916051,4.00770767 11.7953244,4 12,4 C16.418278,4 20,7.581722 20,12 C20,12.5522847 19.5522847,13 19,13 C18.4477153,13 18,12.5522847 18,12 C18,8.6862915 15.3137085,6 12,6 C11.8129339,6 11.6271216,6.00853145 11.4429483,6.02544919 L11.7071068,6.29289322 C12.0976311,6.68341751 12.0976311,7.31658249 11.7071068,7.70710678 C11.3466228,8.06759074 10.7793918,8.09532028 10.3871006,7.79029539 L10.2928932,7.70710678 L8.29289322,5.70710678 C7.93240926,5.34662282 7.90467972,4.77939176 8.20970461,4.38710056 L8.29289322,4.29289322 L10.2928932,2.29289322 C10.6834175,1.90236893 11.3165825,1.90236893 11.7071068,2.29289322 Z",fill:"black"}));const rotaterFill=rotateFillGroup.toCanvas({pixelRatio:2,width:20,height:20}),TRANSFORMER_STYLE={enabledAnchors:["top-left","top-center","top-right","middle-left","bottom-left","bottom-right","bottom-center","middle-right"],borderEnabled:!0,rotateEnabled:!0,rotationSnaps:[0,45,90,135,180,225,270,315],ignoreStroke:!0,anchorStrokeWidth:2,borderStrokeWidth:2,rotateAnchorOffset:30,anchorStyleFunc:e=>{if(e.hasName("rotater")){const t=20;e.setAttrs({width:t,height:t,cornerRadius:t/2,offsetX:t/2,offsetY:t/2,fillPatternImage:rotaterFill,fillPatternScaleX:t/20/2,fillPatternScaleY:t/20/2,fillPriority:"pattern",fillPatternRepeat:"no-repeat"})}}},setTransformerStyle=e=>{Object.assign(TRANSFORMER_STYLE,e)};exports.setTransformerStyle=setTransformerStyle;const transformerAttributes={text:{enabledAnchors:["top-left","top-right","middle-left","bottom-left","bottom-right","middle-right"]},svg:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]},line:{enabledAnchors:[],borderEnabled:!1,rotateEnabled:!1},image:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]},many:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]},group:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]}};function registerTransformerAttrs(e,t){transformerAttributes[e]=transformerAttributes[e]||t,Object.assign(transformerAttributes[e],t)}exports.registerTransformerAttrs=registerTransformerAttrs;const Background=e=>react_1.default.createElement(react_konva_1.Rect,Object.assign({},e,{preventDefault:!1})),ImageBackground=e=>{var{url:t}=e,r=__rest(e,["url"]);const[n,a]=(0,use_image_1.default)(t,"anonymous"),o=n?(0,crop_1.getCrop)(n,{width:r.width,height:r.height},"center-middle"):{};return(0,image_element_1.useImageLoader)(a,"background"),react_1.default.createElement(react_konva_1.Image,Object.assign({image:n},r,o))},ColorBackground=e=>react_1.default.createElement(react_konva_1.Rect,Object.assign({},e)),PageBackground=e=>{const{background:t,scale:r,borderColor:n}=e,a=__rest(e,["background","scale","borderColor"]),o=react_1.default.useMemo((()=>!!konva_1.default.Util.colorToRGBA(t)),[t]),i=react_1.default.useMemo((()=>{const e=document.createElement("canvas"),t=30;e.width=60,e.height=60;const r=e.getContext("2d");return r&&(r.fillStyle="black",r.fillRect(t,0,t,t),r.fillRect(0,t,t,t)),e}),[]);return react_1.default.createElement(react_1.default.Fragment,null,react_1.default.createElement(react_konva_1.Rect,Object.assign({fillPatternImage:i},a,{opacity:.1,hideInExport:!0})),o?react_1.default.createElement(ColorBackground,Object.assign({fill:t},a)):react_1.default.createElement(ImageBackground,Object.assign({url:t},a)))},Selection=(0,mobx_react_lite_1.observer)((({selection:e})=>e.visible?react_1.default.createElement(react_konva_1.Rect,{name:"selection",x:Math.min(e.x1,e.x2),y:Math.min(e.y1,e.y2),width:Math.abs(e.x1-e.x2),height:Math.abs(e.y1-e.y2),fill:"rgba(0, 161, 255, 0.3)"}):null)),TransformLabels=(0,mobx_react_lite_1.observer)((({x:e,y:t,width:r,height:n,rotation:a,anchor:o,store:i})=>{const l=(0,math_1.getClientRect)({x:e,y:t,width:r,height:n,rotation:konva_1.default.Util.radToDeg(a)});if(void 0===o)return null;const c=(n/2+70)*Math.cos(a-Math.PI/2),s=(n/2+70)*Math.sin(a-Math.PI/2),d=(0,unit_1.pxToUnitRounded)({unit:i.unit,dpi:i.dpi,px:r/i.scale,precious:"px"===i.unit?0:1})+" x "+(0,unit_1.pxToUnitRounded)({unit:i.unit,dpi:i.dpi,px:n/i.scale,precious:"px"===i.unit?0:1})+("px"===i.unit?"":" "+i.unit);return react_1.default.createElement(react_1.default.Fragment,null,react_1.default.createElement(react_konva_1.Label,{x:(l.minX+l.maxX)/2+c,y:(l.minY+l.maxY)/2+s,offsetX:14,offsetY:14,visible:"rotater"===o},react_1.default.createElement(react_konva_1.Tag,{cornerRadius:5,fill:"rgb(0, 161, 255)"}),react_1.default.createElement(react_konva_1.Text,{align:"center",verticalAlign:"middle",fill:"white",padding:8,text:Math.round(konva_1.default.Util.radToDeg(a)).toString()+"°"})),react_1.default.createElement(react_konva_1.Label,{x:(l.minX+l.maxX)/2,y:l.maxY+20,visible:"rotater"!==o},react_1.default.createElement(react_konva_1.Tag,{cornerRadius:5,fill:"rgb(0, 161, 255)",pointerDirection:"up",pointerHeight:0,pointerWidth:0}),react_1.default.createElement(react_konva_1.Text,{align:"center",verticalAlign:"middle",fill:"white",padding:8,text:d})))})),Elements=(0,mobx_react_lite_1.observer)((({elements:e,store:t})=>{const r=e.filter((e=>e.alwaysOnTop)),n=e.filter((e=>!e.alwaysOnTop)).concat(r);return react_1.default.createElement(react_1.default.Fragment,null,n.map((e=>react_1.default.createElement(element_1.default,{key:e.id,store:t,element:e,onClick:()=>{console.warn("Polotno warning: onClick callback is deprecated. Just stop using it. Polotno will do selection automatically.")}}))))}));let onDomDrop=null;const registerNextDomDrop=e=>{onDomDrop=e};exports.registerNextDomDrop=registerNextDomDrop,exports.default=(0,mobx_react_lite_1.observer)((({store:e,page:t,width:r,height:n,pageControlsEnabled:a,backColor:o,pageBorderColor:i,activePageBorderColor:l,components:c,bleedColor:s})=>{const d=e.bleedVisible?t.bleed:0,u=t.computedWidth+2*d,m=t.computedHeight+2*d,g=(r-u*e.scale)/2,_=(n-m*e.scale)/2,f=react_1.default.useRef(null),h=react_1.default.useRef(null),p=react_1.default.useRef(null),b=null==a||a,[x,v]=react_1.default.useState(null),[E,y]=react_1.default.useState({}),k=e.selectedElements.find((e=>e._cropModeEnabled)),w=e.selectedShapes.filter((e=>!e.resizable)).length>0,Y=e.selectedShapes.filter((e=>!e.draggable)).length>0,S=e.selectedElements.filter((e=>!e.visible)).length>0;react_1.default.useLayoutEffect((()=>{var t,r,n;if(!f.current)return;const a=f.current.getStage(),o=e.selectedShapes.map((e=>e._cropModeEnabled?null:a.findOne("#"+e.id))).filter((e=>e)),i=1===e.selectedElements.length&&(null===(t=e.selectedElements[0])||void 0===t?void 0:t.type)||"many";transformerAttributes[i]?(f.current.setAttrs(Object.assign(Object.assign({},TRANSFORMER_STYLE),transformerAttributes[i])),"svg"!==i&&"image"!==i||e.selectedElements[0].keepRatio||f.current.setAttrs({enabledAnchors:TRANSFORMER_STYLE.enabledAnchors}),"text"===i&&flags_1.flags.textVerticalResizeEnabled&&f.current.setAttrs({enabledAnchors:null===(r=transformerAttributes.text.enabledAnchors)||void 0===r?void 0:r.concat(["bottom-center"])})):f.current.setAttrs(TRANSFORMER_STYLE),w&&f.current.enabledAnchors([]),Y&&f.current.rotateEnabled(!1);o.find((e=>null==e?void 0:e.isDragging()))&&o.forEach((e=>{null==e||e.startDrag()})),f.current.nodes(o),null===(n=f.current.getLayer())||void 0===n||n.batchDraw()}),[e.selectedElements,k,w,S,Y]);const A=(0,mobx_react_lite_1.useLocalObservable)((()=>({visible:!1,x1:0,y1:0,x2:0,y2:0}))),R=react_1.default.useRef(!1),X=(0,screen_1.useMobile)(),T=(0,mobx_1.action)((e=>{var t,r;if(X)return;R.current=!1;const n=e.target.findAncestor(".elements-container"),a=e.target.findAncestor("Transformer"),o=e.target.findAncestor(".page-abs-container");if(n||a||o)return;const i=null===(t=e.target.getStage())||void 0===t?void 0:t.getPointerPosition();i&&(A.visible=!0,A.x1=i.x,A.y1=i.y,A.x2=i.x,A.y2=i.y,(null===(r=e.target.getStage())||void 0===r?void 0:r.getPointersPositions().length)>=2&&(A.visible=!1))}));react_1.default.useEffect((()=>{const t=(0,mobx_1.action)((e=>{var t,r;if(!A.visible)return;null===(t=h.current)||void 0===t||t.setPointersPositions(e);let n=(null===(r=h.current)||void 0===r?void 0:r.getPointerPosition())||{x:A.x2,y:A.y2};A.x2=n.x,A.y2=n.y})),r=(0,mobx_1.action)((()=>{if(!A.visible)return;if(!h.current)return;const t=h.current.findOne(".selection"),r=t?t.getClientRect():{width:0,height:0,x:0,y:0};if(r.width&&r.height){const t=[];h.current.find(".element").forEach((n=>{const a=n.getClientRect(),o=e.getElementById(n.id()),i=null==o?void 0:o.draggable,l=null==o?void 0:o.selectable;konva_1.default.Util.haveIntersection(r,a)&&i&&l&&t.push(n.id())})),e.selectElements(t)}A.visible=!1,R.current=!0}));return window.addEventListener("mousemove",t),window.addEventListener("touchmove",t),window.addEventListener("mouseup",r),window.addEventListener("touchend",r),()=>{window.removeEventListener("mousemove",t),window.removeEventListener("touchmove",t),window.removeEventListener("mouseup",r),window.removeEventListener("touchend",r)}}),[]);const C=r=>{if(e.activePage!==t&&t.select(),R.current)return;const n=r.evt.ctrlKey||r.evt.metaKey||r.evt.shiftKey,a=r.target.findAncestor(".elements-container"),o=r.target.findAncestor(".page-abs-container"),i=r.target.findAncestor("Transformer");if(!(n||a||i||o))return void e.selectElements([]);const l=r.target.findAncestor(".element",!0),c=e.getElementById(null==l?void 0:l.id()),s=null==c?void 0:c.top,d=null==s?void 0:s.id,u=e.selectedElementsIds.indexOf(d)>=0;d&&n&&!u?e.selectElements(e.selectedElementsIds.concat([d])):d&&n&&u?e.selectElements(e.selectedElementsIds.filter((e=>e!==d))):!d||n||u||e.selectElements([d])};(0,use_transformer_snap_1.useSnap)(f);const D=e.activePage===t,L=null==c?void 0:c.PageControls,O=null==c?void 0:c.Tooltip,P=1/e.scale,M=0/e.scale;return react_1.default.createElement("div",{ref:p,onDragOver:e=>e.preventDefault(),onDrop:r=>{if(r.preventDefault(),!h.current)return;h.current.setPointersPositions(r);const n=h.current.findOne(".elements-container").getRelativePointerPosition(),a=h.current.getPointerPosition(),o=h.current.getAllIntersections(a).map((e=>e.findAncestor(".element",!0))).filter(Boolean),i=[...new Set(o.reverse())].map((t=>e.getElementById(t.id()))),l=i[0];onDomDrop&&(onDomDrop(n,l,{elements:i,page:t}),onDomDrop=null)},style:{position:"relative",width:r+"px"},className:"polotno-page-container"+(D?" active-page":"")},react_1.default.createElement(react_konva_1.Stage,{ref:h,width:r,height:n,onClick:C,onTap:C,onMouseDown:T,onMouseMove:r=>{if(!r.evt.altKey&&x)return void v(null);if(!r.evt.altKey)return;const n=r.target.findAncestor(".element",!0),a=null==n?void 0:n.id();if(!e.selectedElements[0])return;if(e.selectedElementsIds.includes(a))return;const o=(0,math_1.getTotalClientRect)(e.selectedElements),i=a?e.getElementById(a):{x:0,y:0,width:t.computedWidth,height:t.computedHeight,rotation:0},l=(0,math_1.getClientRect)(i),c=[];o.minX>l.maxX&&c.push({distance:o.minX-l.maxX,box1:o,box2:l,points:[{x:o.minX,y:o.minY+o.height/2},{x:l.maxX,y:o.minY+o.height/2},{x:l.maxX,y:l.minY+l.height/2}]}),o.maxX<l.minX&&c.push({distance:l.minX-o.maxX,box1:o,box2:l,points:[{x:o.maxX,y:o.minY+o.height/2},{x:l.minX,y:o.minY+o.height/2},{x:l.minX,y:l.minY+l.height/2}]}),o.minY>l.maxY&&c.push({box1:o,box2:l,distance:o.minY-l.maxY,points:[{x:o.minX+o.width/2,y:o.minY},{x:o.minX+o.width/2,y:l.maxY},{x:l.minX+l.width/2,y:l.maxY}]}),o.maxY<l.minY&&c.push({box1:o,box2:l,distance:l.minY-o.maxY,points:[{x:o.minX+o.width/2,y:o.maxY},{x:o.minX+o.width/2,y:l.minY},{x:l.minX+l.width/2,y:l.minY}]});o.minX>=l.minX&&o.maxX<=l.maxX&&o.minY>=l.minY&&o.maxY<=l.maxY&&(c.push({distance:o.minX-l.minX,box1:o,box2:l,points:[{x:o.minX,y:o.minY+o.height/2},{x:l.minX,y:o.minY+o.height/2},{x:l.minX,y:l.minY+l.height/2}]}),c.push({distance:l.maxX-o.maxX,box1:o,box2:l,points:[{x:o.maxX,y:o.minY+o.height/2},{x:l.maxX,y:o.minY+o.height/2},{x:l.maxX,y:l.minY+l.height/2}]}),c.push({box1:o,box2:l,distance:o.minY-l.minY,points:[{x:o.minX+o.width/2,y:o.minY},{x:o.minX+o.width/2,y:l.minY},{x:l.minX+l.width/2,y:l.minY}]}),c.push({box1:o,box2:l,distance:l.maxY-o.maxY,points:[{x:o.minX+o.width/2,y:o.maxY},{x:o.minX+o.width/2,y:l.maxY},{x:l.minX+l.width/2,y:l.maxY}]})),JSON.stringify(x)!==JSON.stringify(c)&&v(c)},onTouchStart:T,onDragStart:t=>{var r;const n=t.target.findAncestor(".element",!0);if(n){const a=e.getElementById(null==n?void 0:n.id()),o=null==a?void 0:a.top,i=null==o?void 0:o.id;!(e.selectedElementsIds.indexOf(i)>=0)&&i&&(e.selectElements([i]),t.target.stopDrag(),t.target.startDrag(),null===(r=f.current)||void 0===r||r.startDrag(t))}x&&v(null)},pageId:t.id,style:{position:"relative"}},react_1.default.createElement(react_konva_1.Layer,null,react_1.default.createElement(Background,{width:r,height:n,fill:o}),react_1.default.createElement(react_konva_1.Group,{x:g,y:_,scaleX:e.scale,scaleY:e.scale,name:"page-container"},react_1.default.createElement(react_konva_1.Group,{name:"page-background-group",x:d,y:d},react_1.default.createElement(PageBackground,{x:-t.bleed,y:-t.bleed,width:t.computedWidth+2*t.bleed,height:t.computedHeight+2*t.bleed,background:t.background,shadowBlur:10,shadowColor:"lightgrey",name:"page-background",preventDefault:!1,scale:e.scale})),react_1.default.createElement(react_konva_1.Group,{x:d,y:d,name:"elements-container",listening:!e.isPlaying},react_1.default.createElement(react_konva_1.Rect,{name:"elements-area",width:t.computedWidth,height:t.computedHeight,listening:!1}),react_1.default.createElement(Elements,{elements:t.children,store:e})),react_1.default.createElement(react_konva_1.Rect,{stroke:s,name:"bleed",strokeWidth:t.bleed,x:t.bleed/2,y:t.bleed/2,width:t.computedWidth+t.bleed,height:t.computedHeight+t.bleed,listening:!1,visible:t.bleed>0&&e.bleedVisible,hideInExport:!0})),react_1.default.createElement(react_konva_1.Line,{name:"workspace-background",points:[0,0,r,0,r,n,0,n,0,0,g,_,g,n-_,r-g,n-_,r-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-M,y:-P/2-M,width:u+P+2*M,height:m+P+2*M,stroke:D&&e.pages.length>1?l:i,strokeWidth:2,listening:!1,strokeScaleEnabled:!1})),react_1.default.createElement(react_konva_1.Group,{x:g+d*e.scale,y:_+d*e.scale,scaleX:e.scale,scaleY:e.scale,name:"page-abs-container"},react_1.default.createElement(react_konva_1.Transformer,{ref:f,boundBoxFunc:(e,t)=>{const r=t.width<1||t.height<1,n=e.width<1||e.height<1;return r&&!n?e:t},onTransform:e=>{var t,r;const n=null===(t=f.current)||void 0===t?void 0:t.__getNodeRect(),a=null===(r=f.current)||void 0===r?void 0:r.getActiveAnchor();y({anchor:a,x:n.x,y:n.y,rotation:n.rotation,width:n.width,height:n.height})},onTransformEnd:e=>{y({})},visible:!e.isPlaying}),x&&x.map((({points:t,distance:r,box1:n,box2:a},o)=>react_1.default.createElement(react_konva_1.Group,{name:"distances-container",hideInExport:!0,key:o,listening:!1},react_1.default.createElement(react_konva_1.Rect,Object.assign({},n,{stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1})),react_1.default.createElement(react_konva_1.Rect,Object.assign({},a,{stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1})),react_1.default.createElement(react_konva_1.Line,{points:[t[0].x,t[0].y,t[1].x,t[1].y],stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1}),react_1.default.createElement(react_konva_1.Line,{points:[t[1].x,t[1].y,t[2].x,t[2].y],stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1}),react_1.default.createElement(react_konva_1.Label,{x:(t[0].x+t[1].x)/2,y:(t[0].y+t[1].y)/2,offsetY:-10,scaleX:1/e.scale,scaleY:1/e.scale},react_1.default.createElement(react_konva_1.Tag,{cornerRadius:5,fill:"rgb(0, 161, 255)",pointerDirection:"down"}),react_1.default.createElement(react_konva_1.Text,{align:"center",verticalAlign:"middle",fill:"white",padding:5,text:(0,unit_1.pxToUnitString)({unit:e.unit,dpi:e.dpi,px:r})}))))),t._rendering&&react_1.default.createElement(react_konva_1.Group,null,react_1.default.createElement(react_konva_1.Rect,{width:u,height:m,fill:"rgba(255,255,255,0.9)"}),react_1.default.createElement(react_konva_1.Text,{text:"Rendering...",fontSize:60,width:u,height:m,align:"center",verticalAlign:"middle"})),O&&react_1.default.createElement(O,{components:c,store:e,page:t,stageRef:h})),react_1.default.createElement(TransformLabels,Object.assign({},E,{store:e})),react_1.default.createElement(Selection,{selection:A}),validate_key_1.shouldShowCredit.value&&react_1.default.createElement(react_konva_1.Text,{text:"Powered by polotno.com",fontSize:14,fill:"rgba(0,0,0,0.6)",x:r-170,y:n-18,onMouseEnter:e=>{e.target.getStage().container().style.cursor="pointer"},onMouseLeave:e=>{e.target.getStage().container().style.cursor=""},onTouchStart:e=>{e.cancelBubble=!0},onMouseDown:e=>{e.cancelBubble=!0},onClick:()=>{window.open("https://polotno.com")},onTap:()=>{window.open("https://polotno.com")}}),react_1.default.createElement(react_konva_1.Group,{name:"line-guides"}))),b&&D&&react_1.default.createElement(L,{store:e,page:t,xPadding:g,yPadding:_}))}));
+"use strict";var __rest=this&&this.__rest||function(e,t){var r={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(r[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(n=Object.getOwnPropertySymbols(e);a<n.length;a++)t.indexOf(n[a])<0&&Object.prototype.propertyIsEnumerable.call(e,n[a])&&(r[n[a]]=e[n[a]])}return r},__importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.registerNextDomDrop=exports.registerTransformerAttrs=exports.setTransformerStyle=void 0;const react_1=__importDefault(require("react")),mobx_react_lite_1=require("mobx-react-lite"),mobx_1=require("mobx"),react_konva_1=require("react-konva"),use_image_1=__importDefault(require("use-image")),konva_1=__importDefault(require("konva")),element_1=__importDefault(require("./element")),use_transformer_snap_1=require("./use-transformer-snap"),image_element_1=require("./image-element"),crop_1=require("../utils/crop"),validate_key_1=require("../utils/validate-key"),math_1=require("../utils/math"),unit_1=require("../utils/unit"),flags_1=require("../utils/flags"),screen_1=require("../utils/screen"),rotateFillGroup=new konva_1.default.Group,rotateFillSize=20;rotateFillGroup.add(new konva_1.default.Rect({width:20,height:20,fill:"white"})),rotateFillGroup.add(new konva_1.default.Path({scaleX:20/24,scaleY:20/24,data:"M4.98313549,11.0001422 C5.49589839,10.9914935 5.92501998,11.3703506 5.99116425,11.8666444 L5.99985778,11.9831355 L6.00348884,12.2068855 C6.11245031,15.4321748 8.76323537,17.9999971 11.9999971,17.9999971 C12.1869612,17.9999971 12.3726725,17.9914753 12.5567465,17.9745765 L12.2928932,17.7071068 C11.9023689,17.3165825 11.9023689,16.6834175 12.2928932,16.2928932 C12.6834175,15.9023689 13.3165825,15.9023689 13.7071068,16.2928932 L15.7071068,18.2928932 C16.0976311,18.6834175 16.0976311,19.3165825 15.7071068,19.7071068 L13.7071068,21.7071068 C13.3165825,22.0976311 12.6834175,22.0976311 12.2928932,21.7071068 C11.9023689,21.3165825 11.9023689,20.6834175 12.2928932,20.2928932 L12.6111505,19.9769552 C12.4086045,19.9922816 12.2047796,19.9999971 11.9999971,19.9999971 C7.7687005,19.9999971 4.28886152,16.7094374 4.01666425,12.5105203 L4.00420123,12.2575143 L4.00014222,12.0168645 C3.9908282,11.4646583 4.43092928,11.0094562 4.98313549,11.0001422 Z M11.7071068,2.29289322 C12.0675907,2.65337718 12.0953203,3.22060824 11.7902954,3.61289944 L11.7071068,3.70710678 L11.3891629,4.0230186 C11.5916051,4.00770767 11.7953244,4 12,4 C16.418278,4 20,7.581722 20,12 C20,12.5522847 19.5522847,13 19,13 C18.4477153,13 18,12.5522847 18,12 C18,8.6862915 15.3137085,6 12,6 C11.8129339,6 11.6271216,6.00853145 11.4429483,6.02544919 L11.7071068,6.29289322 C12.0976311,6.68341751 12.0976311,7.31658249 11.7071068,7.70710678 C11.3466228,8.06759074 10.7793918,8.09532028 10.3871006,7.79029539 L10.2928932,7.70710678 L8.29289322,5.70710678 C7.93240926,5.34662282 7.90467972,4.77939176 8.20970461,4.38710056 L8.29289322,4.29289322 L10.2928932,2.29289322 C10.6834175,1.90236893 11.3165825,1.90236893 11.7071068,2.29289322 Z",fill:"black"}));const rotaterFill=rotateFillGroup.toCanvas({pixelRatio:2,width:20,height:20}),TRANSFORMER_STYLE={enabledAnchors:["top-left","top-center","top-right","middle-left","bottom-left","bottom-right","bottom-center","middle-right"],borderEnabled:!0,rotateEnabled:!0,rotationSnaps:[0,45,90,135,180,225,270,315],ignoreStroke:!0,anchorStrokeWidth:2,borderStrokeWidth:2,rotateAnchorOffset:30,anchorStyleFunc:e=>{if(e.hasName("rotater")){const t=20;e.setAttrs({width:t,height:t,cornerRadius:t/2,offsetX:t/2,offsetY:t/2,fillPatternImage:rotaterFill,fillPatternScaleX:t/20/2,fillPatternScaleY:t/20/2,fillPriority:"pattern",fillPatternRepeat:"no-repeat"})}}},setTransformerStyle=e=>{Object.assign(TRANSFORMER_STYLE,e)};exports.setTransformerStyle=setTransformerStyle;const transformerAttributes={text:{enabledAnchors:["top-left","top-right","middle-left","bottom-left","bottom-right","middle-right"]},svg:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]},line:{enabledAnchors:[],borderEnabled:!1,rotateEnabled:!1},image:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]},many:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]},group:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]}};function registerTransformerAttrs(e,t){transformerAttributes[e]=transformerAttributes[e]||t,Object.assign(transformerAttributes[e],t)}exports.registerTransformerAttrs=registerTransformerAttrs;const Background=e=>react_1.default.createElement(react_konva_1.Rect,Object.assign({},e,{preventDefault:!1})),ImageBackground=e=>{var{url:t}=e,r=__rest(e,["url"]);const[n,a]=(0,use_image_1.default)(t,"anonymous"),o=n?(0,crop_1.getCrop)(n,{width:r.width,height:r.height},"center-middle"):{};return(0,image_element_1.useImageLoader)(a,"background"),react_1.default.createElement(react_konva_1.Image,Object.assign({image:n},r,o))},ColorBackground=e=>react_1.default.createElement(react_konva_1.Rect,Object.assign({},e)),PageBackground=e=>{const{background:t,scale:r,borderColor:n}=e,a=__rest(e,["background","scale","borderColor"]),o=react_1.default.useMemo((()=>!!konva_1.default.Util.colorToRGBA(t)),[t]),i=react_1.default.useMemo((()=>{const e=document.createElement("canvas"),t=30;e.width=60,e.height=60;const r=e.getContext("2d");return r&&(r.fillStyle="black",r.fillRect(t,0,t,t),r.fillRect(0,t,t,t)),e}),[]);return react_1.default.createElement(react_1.default.Fragment,null,react_1.default.createElement(react_konva_1.Rect,Object.assign({fillPatternImage:i},a,{opacity:.1,hideInExport:!0})),o?react_1.default.createElement(ColorBackground,Object.assign({fill:t},a)):react_1.default.createElement(ImageBackground,Object.assign({url:t},a)))},Selection=(0,mobx_react_lite_1.observer)((({selection:e})=>e.visible?react_1.default.createElement(react_konva_1.Rect,{name:"selection",x:Math.min(e.x1,e.x2),y:Math.min(e.y1,e.y2),width:Math.abs(e.x1-e.x2),height:Math.abs(e.y1-e.y2),fill:"rgba(0, 161, 255, 0.3)"}):null)),TransformLabels=(0,mobx_react_lite_1.observer)((({x:e,y:t,width:r,height:n,rotation:a,anchor:o,store:i})=>{const l=(0,math_1.getClientRect)({x:e,y:t,width:r,height:n,rotation:konva_1.default.Util.radToDeg(a)});if(void 0===o)return null;const c=(n/2+70)*Math.cos(a-Math.PI/2),s=(n/2+70)*Math.sin(a-Math.PI/2),d=(0,unit_1.pxToUnitRounded)({unit:i.unit,dpi:i.dpi,px:r/i.scale,precious:"px"===i.unit?0:1})+" x "+(0,unit_1.pxToUnitRounded)({unit:i.unit,dpi:i.dpi,px:n/i.scale,precious:"px"===i.unit?0:1})+("px"===i.unit?"":" "+i.unit);return react_1.default.createElement(react_1.default.Fragment,null,react_1.default.createElement(react_konva_1.Label,{x:(l.minX+l.maxX)/2+c,y:(l.minY+l.maxY)/2+s,offsetX:14,offsetY:14,visible:"rotater"===o},react_1.default.createElement(react_konva_1.Tag,{cornerRadius:5,fill:"rgb(0, 161, 255)"}),react_1.default.createElement(react_konva_1.Text,{align:"center",verticalAlign:"middle",fill:"white",padding:8,text:Math.round(konva_1.default.Util.radToDeg(a)).toString()+"°"})),react_1.default.createElement(react_konva_1.Label,{x:(l.minX+l.maxX)/2,y:l.maxY+20,visible:"rotater"!==o},react_1.default.createElement(react_konva_1.Tag,{cornerRadius:5,fill:"rgb(0, 161, 255)",pointerDirection:"up",pointerHeight:0,pointerWidth:0}),react_1.default.createElement(react_konva_1.Text,{align:"center",verticalAlign:"middle",fill:"white",padding:8,text:d})))})),Elements=(0,mobx_react_lite_1.observer)((({elements:e,store:t})=>{const r=e.filter((e=>e.alwaysOnTop)),n=e.filter((e=>!e.alwaysOnTop)).concat(r);return react_1.default.createElement(react_1.default.Fragment,null,n.map((e=>react_1.default.createElement(element_1.default,{key:e.id,store:t,element:e,onClick:()=>{console.warn("Polotno warning: onClick callback is deprecated. Just stop using it. Polotno will do selection automatically.")}}))))}));let onDomDrop=null;const registerNextDomDrop=e=>{onDomDrop=e};exports.registerNextDomDrop=registerNextDomDrop,exports.default=(0,mobx_react_lite_1.observer)((({store:e,page:t,width:r,height:n,pageControlsEnabled:a,backColor:o,pageBorderColor:i,activePageBorderColor:l,components:c,bleedColor:s})=>{const d=e.bleedVisible?t.bleed:0,u=t.computedWidth+2*d,m=t.computedHeight+2*d,g=(r-u*e.scale)/2,_=(n-m*e.scale)/2,f=react_1.default.useRef(null),h=react_1.default.useRef(null),p=react_1.default.useRef(null),b=null==a||a,[x,v]=react_1.default.useState(null),[E,y]=react_1.default.useState({}),k=e.selectedElements.find((e=>e._cropModeEnabled)),w=e.selectedShapes.filter((e=>!e.resizable)).length>0,Y=e.selectedShapes.filter((e=>!e.draggable)).length>0,S=e.selectedElements.filter((e=>!e.visible)).length>0;react_1.default.useLayoutEffect((()=>{var t,r,n;if(!f.current)return;const a=f.current.getStage(),o=e.selectedShapes.map((e=>e._cropModeEnabled?null:a.findOne("#"+e.id))).filter((e=>e)),i=1===e.selectedElements.length&&(null===(t=e.selectedElements[0])||void 0===t?void 0:t.type)||"many";transformerAttributes[i]?(f.current.setAttrs(Object.assign(Object.assign({},TRANSFORMER_STYLE),transformerAttributes[i])),"svg"!==i&&"image"!==i||e.selectedElements[0].keepRatio||f.current.setAttrs({enabledAnchors:TRANSFORMER_STYLE.enabledAnchors}),"text"===i&&flags_1.flags.textVerticalResizeEnabled&&f.current.setAttrs({enabledAnchors:null===(r=transformerAttributes.text.enabledAnchors)||void 0===r?void 0:r.concat(["bottom-center"])})):f.current.setAttrs(TRANSFORMER_STYLE),w&&f.current.enabledAnchors([]),Y&&f.current.rotateEnabled(!1);o.find((e=>null==e?void 0:e.isDragging()))&&o.forEach((e=>{null==e||e.startDrag()})),f.current.nodes(o),null===(n=f.current.getLayer())||void 0===n||n.batchDraw()}),[e.selectedElements,k,w,S,Y]);const A=(0,mobx_react_lite_1.useLocalObservable)((()=>({visible:!1,x1:0,y1:0,x2:0,y2:0}))),R=react_1.default.useRef(!1),X=(0,screen_1.useMobile)(),T=(0,mobx_1.action)((e=>{var t,r;if(X)return;R.current=!1;const n=e.target.findAncestor(".elements-container"),a=e.target.findAncestor("Transformer"),o=e.target.findAncestor(".page-abs-container");if(n||a||o)return;const i=null===(t=e.target.getStage())||void 0===t?void 0:t.getPointerPosition();i&&(A.visible=!0,A.x1=i.x,A.y1=i.y,A.x2=i.x,A.y2=i.y,(null===(r=e.target.getStage())||void 0===r?void 0:r.getPointersPositions().length)>=2&&(A.visible=!1))}));react_1.default.useEffect((()=>{const t=(0,mobx_1.action)((e=>{var t,r;if(!A.visible)return;null===(t=h.current)||void 0===t||t.setPointersPositions(e);let n=(null===(r=h.current)||void 0===r?void 0:r.getPointerPosition())||{x:A.x2,y:A.y2};A.x2=n.x,A.y2=n.y})),r=(0,mobx_1.action)((()=>{if(!A.visible)return;if(!h.current)return;const t=h.current.findOne(".selection"),r=t?t.getClientRect():{width:0,height:0,x:0,y:0};if(r.width&&r.height){const t=[];h.current.find(".element").forEach((n=>{const a=n.getClientRect(),o=e.getElementById(n.id()),i=null==o?void 0:o.draggable,l=null==o?void 0:o.selectable;konva_1.default.Util.haveIntersection(r,a)&&i&&l&&t.push(n.id())})),e.selectElements(t)}A.visible=!1,R.current=!0}));return window.addEventListener("mousemove",t),window.addEventListener("touchmove",t),window.addEventListener("mouseup",r),window.addEventListener("touchend",r),()=>{window.removeEventListener("mousemove",t),window.removeEventListener("touchmove",t),window.removeEventListener("mouseup",r),window.removeEventListener("touchend",r)}}),[]);const C=r=>{if(e.activePage!==t&&t.select(),R.current)return;const n=r.evt.ctrlKey||r.evt.metaKey||r.evt.shiftKey,a=r.target.findAncestor(".elements-container"),o=r.target.findAncestor(".page-abs-container"),i=r.target.findAncestor("Transformer");if(!(n||a||i||o))return void e.selectElements([]);const l=r.target.findAncestor(".element",!0),c=e.getElementById(null==l?void 0:l.id()),s=null==c?void 0:c.top,d=null==s?void 0:s.id,u=e.selectedElementsIds.indexOf(d)>=0;d&&n&&!u?e.selectElements(e.selectedElementsIds.concat([d])):d&&n&&u?e.selectElements(e.selectedElementsIds.filter((e=>e!==d))):!d||n||u||e.selectElements([d])};(0,use_transformer_snap_1.useSnap)(f);const D=e.activePage===t,L=null==c?void 0:c.PageControls,O=null==c?void 0:c.Tooltip,P=1/e.scale,M=0/e.scale;return react_1.default.createElement("div",{ref:p,onDragOver:e=>e.preventDefault(),onDrop:r=>{if(r.preventDefault(),!h.current)return;h.current.setPointersPositions(r);const n=h.current.findOne(".elements-container").getRelativePointerPosition(),a=h.current.getPointerPosition(),o=h.current.getAllIntersections(a).map((e=>e.findAncestor(".element",!0))).filter(Boolean),i=[...new Set(o.reverse())].map((t=>e.getElementById(t.id()))),l=i[0];onDomDrop&&(onDomDrop(n,l,{elements:i,page:t}),onDomDrop=null)},style:{position:"relative",width:r+"px"},className:"polotno-page-container"+(D?" active-page":"")},react_1.default.createElement(react_konva_1.Stage,{ref:h,width:r,height:n,onClick:C,onTap:C,onMouseDown:T,onMouseMove:r=>{if(!r.evt.altKey&&x)return void v(null);if(!r.evt.altKey)return;const n=r.target.findAncestor(".element",!0),a=null==n?void 0:n.id();if(!e.selectedElements[0])return;if(e.selectedElementsIds.includes(a))return;const o=(0,math_1.getTotalClientRect)(e.selectedElements),i=a?e.getElementById(a):{x:0,y:0,width:t.computedWidth,height:t.computedHeight,rotation:0},l=(0,math_1.getClientRect)(i),c=[];o.minX>l.maxX&&c.push({distance:o.minX-l.maxX,box1:o,box2:l,points:[{x:o.minX,y:o.minY+o.height/2},{x:l.maxX,y:o.minY+o.height/2},{x:l.maxX,y:l.minY+l.height/2}]}),o.maxX<l.minX&&c.push({distance:l.minX-o.maxX,box1:o,box2:l,points:[{x:o.maxX,y:o.minY+o.height/2},{x:l.minX,y:o.minY+o.height/2},{x:l.minX,y:l.minY+l.height/2}]}),o.minY>l.maxY&&c.push({box1:o,box2:l,distance:o.minY-l.maxY,points:[{x:o.minX+o.width/2,y:o.minY},{x:o.minX+o.width/2,y:l.maxY},{x:l.minX+l.width/2,y:l.maxY}]}),o.maxY<l.minY&&c.push({box1:o,box2:l,distance:l.minY-o.maxY,points:[{x:o.minX+o.width/2,y:o.maxY},{x:o.minX+o.width/2,y:l.minY},{x:l.minX+l.width/2,y:l.minY}]});o.minX>=l.minX&&o.maxX<=l.maxX&&o.minY>=l.minY&&o.maxY<=l.maxY&&(c.push({distance:o.minX-l.minX,box1:o,box2:l,points:[{x:o.minX,y:o.minY+o.height/2},{x:l.minX,y:o.minY+o.height/2},{x:l.minX,y:l.minY+l.height/2}]}),c.push({distance:l.maxX-o.maxX,box1:o,box2:l,points:[{x:o.maxX,y:o.minY+o.height/2},{x:l.maxX,y:o.minY+o.height/2},{x:l.maxX,y:l.minY+l.height/2}]}),c.push({box1:o,box2:l,distance:o.minY-l.minY,points:[{x:o.minX+o.width/2,y:o.minY},{x:o.minX+o.width/2,y:l.minY},{x:l.minX+l.width/2,y:l.minY}]}),c.push({box1:o,box2:l,distance:l.maxY-o.maxY,points:[{x:o.minX+o.width/2,y:o.maxY},{x:o.minX+o.width/2,y:l.maxY},{x:l.minX+l.width/2,y:l.maxY}]})),JSON.stringify(x)!==JSON.stringify(c)&&v(c)},onTouchStart:T,onDragStart:t=>{var r;const n=t.target.findAncestor(".element",!0);if(n){const a=e.getElementById(null==n?void 0:n.id()),o=null==a?void 0:a.top,i=null==o?void 0:o.id;!(e.selectedElementsIds.indexOf(i)>=0)&&i&&(e.selectElements([i]),t.target.stopDrag(),t.target.startDrag(),null===(r=f.current)||void 0===r||r.startDrag(t))}x&&v(null)},pageId:t.id,style:{position:"relative"}},react_1.default.createElement(react_konva_1.Layer,null,react_1.default.createElement(Background,{width:r,height:n,fill:o}),react_1.default.createElement(react_konva_1.Group,{x:g,y:_,scaleX:e.scale,scaleY:e.scale,name:"page-container"},react_1.default.createElement(react_konva_1.Group,{name:"page-background-group",x:d,y:d},react_1.default.createElement(PageBackground,{x:-t.bleed,y:-t.bleed,width:t.computedWidth+2*t.bleed,height:t.computedHeight+2*t.bleed,background:t.background,shadowBlur:10,shadowColor:"lightgrey",name:"page-background",preventDefault:!1,scale:e.scale})),react_1.default.createElement(react_konva_1.Group,{x:d,y:d,name:"elements-container",listening:!e.isPlaying},react_1.default.createElement(react_konva_1.Rect,{name:"elements-area",width:t.computedWidth,height:t.computedHeight,listening:!1}),react_1.default.createElement(Elements,{elements:t.children,store:e})),react_1.default.createElement(react_konva_1.Rect,{stroke:s,name:"bleed",strokeWidth:t.bleed,x:t.bleed/2,y:t.bleed/2,width:t.computedWidth+t.bleed,height:t.computedHeight+t.bleed,listening:!1,visible:t.bleed>0&&e.bleedVisible,hideInExport:!0})),react_1.default.createElement(react_konva_1.Line,{name:"workspace-background",points:[0,0,r,0,r,n,0,n,0,0,g,_,g,n-_,r-g,n-_,r-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-M,y:-P/2-M,width:u+P+2*M,height:m+P+2*M,stroke:D&&e.pages.length>1?l:i,strokeWidth:2,listening:!1,strokeScaleEnabled:!1})),react_1.default.createElement(react_konva_1.Group,{x:g+d*e.scale,y:_+d*e.scale,scaleX:e.scale,scaleY:e.scale,name:"page-abs-container"},react_1.default.createElement(react_konva_1.Transformer,{ref:f,boundBoxFunc:(e,t)=>{const r=t.width<1||t.height<1,n=e.width<1||e.height<1;return r&&!n?e:t},onTransform:e=>{var t,r;const n=null===(t=f.current)||void 0===t?void 0:t.__getNodeRect(),a=null===(r=f.current)||void 0===r?void 0:r.getActiveAnchor();y({anchor:a,x:n.x,y:n.y,rotation:n.rotation,width:n.width,height:n.height})},onTransformEnd:e=>{y({})},visible:!e.isPlaying}),x&&x.map((({points:t,distance:r,box1:n,box2:a},o)=>react_1.default.createElement(react_konva_1.Group,{name:"distances-container",hideInExport:!0,key:o,listening:!1},react_1.default.createElement(react_konva_1.Rect,Object.assign({},n,{stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1})),react_1.default.createElement(react_konva_1.Rect,Object.assign({},a,{stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1})),react_1.default.createElement(react_konva_1.Line,{points:[t[0].x,t[0].y,t[1].x,t[1].y],stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1}),react_1.default.createElement(react_konva_1.Line,{points:[t[1].x,t[1].y,t[2].x,t[2].y],stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1}),react_1.default.createElement(react_konva_1.Label,{x:(t[0].x+t[1].x)/2,y:(t[0].y+t[1].y)/2,offsetY:-10,scaleX:1/e.scale,scaleY:1/e.scale},react_1.default.createElement(react_konva_1.Tag,{cornerRadius:5,fill:"rgb(0, 161, 255)",pointerDirection:"down"}),react_1.default.createElement(react_konva_1.Text,{align:"center",verticalAlign:"middle",fill:"white",padding:5,text:(0,unit_1.pxToUnitString)({unit:e.unit,dpi:e.dpi,px:r})}))))),t._rendering&&react_1.default.createElement(react_konva_1.Group,null,react_1.default.createElement(react_konva_1.Rect,{width:u,height:m,fill:"rgba(255,255,255,0.9)"}),react_1.default.createElement(react_konva_1.Text,{text:"Rendering...",fontSize:60,width:u,height:m,align:"center",verticalAlign:"middle"})),O&&react_1.default.createElement(O,{components:c,store:e,page:t,stageRef:h})),react_1.default.createElement(TransformLabels,Object.assign({},E,{store:e})),react_1.default.createElement(Selection,{selection:A}),validate_key_1.shouldShowCredit.value&&react_1.default.createElement(react_konva_1.Text,{text:"Powered by polotno.com",fontSize:14,fill:"rgba(0,0,0,0.6)",x:r-170,y:n-18,onMouseEnter:e=>{e.target.getStage().container().style.cursor="pointer"},onMouseLeave:e=>{e.target.getStage().container().style.cursor=""},onTouchStart:e=>{e.cancelBubble=!0},onMouseDown:e=>{e.cancelBubble=!0},onClick:()=>{window.open("https://polotno.com")},onTap:()=>{window.open("https://polotno.com")}}),react_1.default.createElement(react_konva_1.Group,{name:"line-guides"}))),b&&D&&L&&react_1.default.createElement(L,{store:e,page:t,xPadding:g,yPadding:_}))}));

package/canvas/text-element.js

@@ -1 +1 @@
-"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,t,r,i){void 0===i&&(i=r);var n=Object.getOwnPropertyDescriptor(t,r);n&&!("get"in n?!t.__esModule:n.writable||n.configurable)||(n={enumerable:!0,get:function(){return t[r]}}),Object.defineProperty(e,i,n)}:function(e,t,r,i){void 0===i&&(i=r),e[i]=t[r]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),__importStar=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)"default"!==r&&Object.prototype.hasOwnProperty.call(e,r)&&__createBinding(t,e,r);return __setModuleDefault(t,e),t},__importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.TextElement=exports.useTextColor=exports.usePrevious=exports.getLineHeight=exports.useFontLoader=exports.getDir=exports.isRTLText=void 0;const react_1=__importDefault(require("react")),mobx_react_lite_1=require("mobx-react-lite"),react_konva_1=require("react-konva"),react_konva_utils_1=require("react-konva-utils"),mobx_1=require("mobx"),konva_1=__importDefault(require("konva")),svg_round_corners_1=require("svg-round-corners"),loader_1=require("../utils/loader"),fonts_1=require("../utils/fonts"),flags_1=require("../utils/flags"),text_1=require("../utils/text"),gradient=__importStar(require("../utils/gradient")),apply_filters_1=require("./apply-filters"),use_fadein_1=require("./use-fadein"),highlighter_1=require("./highlighter"),screen_1=require("../utils/screen"),styleNode=document.createElement("style");styleNode.type="text/css",document.head.appendChild(styleNode);const initialStyles={border:"none",padding:"0px",overflow:"hidden",background:"none",outline:"none",resize:"none",overflowWrap:"break-word",whiteSpace:"pre-wrap",userSelect:"text",wordBreak:"normal"};function isRTL(e){var t="֑-߿‏‫‮יִ-﷽ﹰ-ﻼ";return new RegExp("^[^"+t+"]*?["+t+"]").test(e)}function isRTLText(e){e=e.replace(/\s/g,"");let t=0;for(var r=0;r<e.length;r++){isRTL(e[r])&&(t+=1)}return t>e.length/2}function getDir(e){return isRTLText(e)?"rtl":"ltr"}exports.isRTLText=isRTLText,exports.getDir=getDir;const TextInput=(0,mobx_react_lite_1.observer)((({textNodeRef:e,element:t,onBlur:r,selectAll:i,cursorPosition:n})=>{const[o,a]=react_1.default.useState(initialStyles),l=e.current;react_1.default.useLayoutEffect((()=>{const e={};e.width=l.width()-2*l.padding()+"px",e.height=l.height()-2*l.padding()+10+"px",e.fontSize=l.fontSize()+"px",e.lineHeight=l.lineHeight()+.01,e.fontFamily=l.fontFamily(),e.textAlign=l.align(),e.color=l.fill(),e.fontWeight=t.fontWeight,e.fontStyle=t.fontStyle,e.letterSpacing=t.letterSpacing+"em";const r=`\n        .polotno-input::placeholder {\n          color: ${o.color};\n          opacity: 0.6;\n        }\n      `;styleNode.innerHTML="",styleNode.appendChild(document.createTextNode(r)),JSON.stringify(e)!==JSON.stringify(o)&&a(e)}));const s=react_1.default.useRef(null);react_1.default.useEffect((()=>{const e=setTimeout((()=>{var e;const t=s.current;if(!t)return;null===(e=s.current)||void 0===e||e.focus();const r=n||t.value.length;t.selectionStart=t.selectionEnd=r,i&&(null==t||t.select(),document.execCommand("selectAll",!1,null))}));return()=>{clearTimeout(e)}}),[]);let d=0;const c=l.textArr.length*l.lineHeight()*l.fontSize();"middle"===t.verticalAlign&&(d=(t.a.height-c)/2),"bottom"===t.verticalAlign&&(d=t.a.height-c);const u=(0,text_1.removeTags)(t.text);return react_1.default.createElement(react_konva_utils_1.Html,null,react_1.default.createElement("textarea",{className:"polotno-input",ref:s,dir:getDir(u),style:Object.assign(Object.assign(Object.assign({},initialStyles),o),{paddingTop:d+"px"}),value:u,onChange:e=>{t.set({text:e.target.value})},placeholder:t.placeholder,onBlur:r}))})),useEditor=e=>{const[t,r]=react_1.default.useState(!1),i=react_1.default.useRef(!1);return react_1.default.useEffect((()=>{var t=!0;return setTimeout((()=>{t&&(e._editModeEnabled&&(i.current=!0),r(!0),setTimeout((()=>{i.current=!1}),50))}),50),()=>{t=!1}}),[]),{editorEnabled:t&&e._editModeEnabled,selectAll:i.current}},useFontLoader=(e,t)=>{const[r,i]=react_1.default.useReducer((e=>e+1),0),n=react_1.default.useRef(!!(0,fonts_1.isFontLoaded)(t));return react_1.default.useLayoutEffect((()=>{if(n.current)return;let r=!0;return(async()=>{n.current=!1,i();const o=(0,loader_1.incrementLoader)(`text ${t}`);await e.loadFont(t),konva_1.default.Util.requestAnimFrame(o),r&&(n.current=!0,i())})(),()=>{r=!1}}),[t]),[n.current]};exports.useFontLoader=useFontLoader;const getLineHeight=({fontLoaded:e,fontFamily:t,fontSize:r,lineHeight:i})=>react_1.default.useMemo((()=>{if("number"==typeof i)return i;const e=document.createElement("div");e.style.fontFamily=t,e.style.fontSize=r+"px",e.style.lineHeight=i,e.innerText="Test text",document.body.appendChild(e);const n=e.offsetHeight;return document.body.removeChild(e),n/r}),[e,t,r,i]);function getRelativePointerPosition(e){var t=e.getAbsoluteTransform().copy();t.invert();var r=e.getStage().getPointerPosition();return t.point(r)}function getCursorPosition(e){var t;const r=e.target,i=getRelativePointerPosition(r),n=r.textArr,o=Math.floor(i.y/(r.fontSize()*r.lineHeight())),a=n.slice(0,o).reduce(((e,t)=>e+t.text.length),o),l=null!==(t=n[o])&&void 0!==t?t:n[0];let s=0;"right"===r.align()?s=r.width()-l.width:"center"===r.align()&&(s=r.width()/2-l.width/2);return a+Math.round((i.x-s)/l.width*l.text.length)}function usePrevious(e){const t=react_1.default.useRef(e),r=react_1.default.useRef(e);return react_1.default.useMemo((()=>{r.current=t.current,t.current=e}),[e]),r.current}function findFitFontSize(e,t){const r=e.fontSize(),i=e.height(),n=(0,text_1.removeTags)(t.text);let o=t.a.fontSize;e.height(void 0);const a=Math.round(2*t.a.fontSize)-1;for(let r=1;r<a;r++){const r=t.a.height&&e.height()>t.a.height,i=n.split("\n").join(" ").split(/[\s-]+/);let a=e.textArr.map((e=>e.text)).join(";");const l=i.find((e=>!a.includes(e)||(a=a.replace(e,""),!1)));if(!(r||l))break;o-=.5,e.fontSize(o)}return e.fontSize(r),e.height(i),o}function generateBackgroundShape({lines:e,lineHeight:t,width:r,align:i="left",padding:n=0,cornerRadius:o=0}){var a;e.forEach(((e,t)=>{e.cx=r/2,"right"===i?e.cx=r-e.width/2:"left"===i&&(e.cx=e.width/2),"justify"!==i||e.lastInParagraph||(e.width=r),"justify"===i&&(e.cx=e.width/2)}));let l=`M ${null===(a=e[0])||void 0===a?void 0:a.cx} ${-n}`;e.forEach(((r,i)=>{const{cx:o}=r,a=e[i-1];a&&a.width>r.width?l+=` L ${o+r.width/2+n} ${i*t+n}`:l+=` L ${o+r.width/2+n} ${i*t-n}`;const s=e[i+1];s&&s.width>r.width?l+=` L ${o+r.width/2+n} ${(i+1)*t-n}`:l+=` L ${o+r.width/2+n} ${(i+1)*t+n}`}));for(var s=e.length-1;s>=0;s--){const r=e[s],{cx:i}=r,o=e[s+1];o&&o.width>r.width?l+=` L ${i-r.width/2-n} ${(s+1)*t-n}`:l+=` L ${i-r.width/2-n} ${(s+1)*t+n}`;const a=e[s-1];a&&a.width>r.width?l+=` L ${i-r.width/2-n} ${s*t+n}`:l+=` L ${i-r.width/2-n} ${s*t-n}`}l+=" Z";const d=(0,svg_round_corners_1.parsePath)(l);return(0,svg_round_corners_1.roundCommands)(d,o).path}exports.getLineHeight=getLineHeight,exports.usePrevious=usePrevious;const useTextColor=e=>react_1.default.useMemo((()=>{if(!gradient.isGradient(e.fill))return{fill:e.fill};const{stops:t,rotation:r}=gradient.parseColor(e.fill),i={x:e.a.width/2,y:e.a.height/2},n=Math.sqrt(Math.pow(i.x,2)+Math.pow(i.y,2)),o=konva_1.default.Util.degToRad(r)-Math.PI/2,a=[];return t.forEach((({offset:e,color:t})=>{a.push(e,t)})),{fillLinearGradientStartPointX:i.x-n*Math.cos(o),fillLinearGradientStartPointY:i.y-n*Math.sin(o),fillLinearGradientColorStops:a,fillLinearGradientEndPointX:i.x+n*Math.cos(o),fillLinearGradientEndPointY:i.y+n*Math.sin(o),fill:t[1].color,fillPriority:"linear-gradient"}}),[e.fill]);exports.useTextColor=useTextColor,exports.TextElement=(0,mobx_react_lite_1.observer)((({element:e,store:t})=>{const r=react_1.default.useRef(null),i=react_1.default.useRef(null),{editorEnabled:n,selectAll:o}=useEditor(e),[a,l]=react_1.default.useState(!1),[s,d]=react_1.default.useState(!1),c=react_1.default.useRef(e.a.height),u=t.selectedElements.indexOf(e)>=0,{textVerticalResizeEnabled:f}=flags_1.flags,h=usePrevious(e.fontFamily),[g,_]=react_1.default.useState([]);react_1.default.useEffect((()=>{var e,t;const i=null!==(t=null===(e=r.current)||void 0===e?void 0:e.textArr)&&void 0!==t?t:[];JSON.stringify(i)!==JSON.stringify(g)&&_(i)})),react_1.default.useEffect((()=>{if(e.a.width)return;const t=r.current;t.width(600),e.set({width:1.4*t.getTextWidth()})}),[]),react_1.default.useLayoutEffect((()=>(0,mobx_1.autorun)((()=>{const t=r.current;(0,apply_filters_1.applyFilter)(t,e)}))));const[p]=(0,exports.useFontLoader)(t,e.fontFamily),x=(0,text_1.removeTags)(e.text),y=()=>{const e=r.current.clone({height:void 0}),t=Math.ceil(e.fontSize()*e.lineHeight()*e.textArr.length+1);return e.destroy(),t};react_1.default.useLayoutEffect((()=>{if(!p)return;const{textOverflow:i}=flags_1.flags;if(e.a.height)if("change-font-size"!==i||s){if("resize"===i){const i=y();f&&e.a.height<i&&t.history.ignore((()=>{e.set({height:i}),r.current.height(i)})),f||e.a.height===i||t.history.ignore((()=>{e.set({height:i}),r.current.height(i)}))}}else{const i=findFitFontSize(r.current,e);if(i!==e.a.fontSize)return void t.history.ignore((()=>{e.set({fontSize:i})}));const n=y();e.a.height===n||f||t.history.ignore((()=>{e.set({height:n})}))}else{const r=y();t.history.ignore((()=>{e.set({height:r})}))}})),react_1.default.useLayoutEffect((()=>{const t=r.current;t&&(t.width(t.width()+1e-8),t._setTextData(),(0,apply_filters_1.applyFilter)(t,e))}),[p]);const m=react_1.default.useRef(null),v=react_1.default.useRef(0),w=r=>{r.evt.preventDefault();const i=t.selectedShapes.find((t=>t===e));i&&e.contentEditable&&(v.current=getCursorPosition(r),e.toggleEditMode())},S=!x&&e.placeholder?.6:e.a.opacity;(0,use_fadein_1.useFadeIn)(r,S);const b=(0,exports.getLineHeight)({fontLoaded:p,fontFamily:e.fontFamily,fontSize:e.a.fontSize,lineHeight:e.lineHeight}),E=e.selectable||"admin"===t.role,T=(0,exports.useTextColor)(e),L=react_1.default.useMemo((()=>e.backgroundEnabled?generateBackgroundShape({lines:JSON.parse(JSON.stringify(g)),cornerRadius:e.backgroundCornerRadius*(e.a.fontSize*b*.5),lineHeight:b*e.a.fontSize,padding:e.backgroundPadding*(e.a.fontSize*b*.5),width:e.a.width,align:e.align}):""),[e.backgroundEnabled,e.backgroundCornerRadius,e.a.fontSize,b,e.backgroundPadding,e.a.width,e.align,g]),M=(0,screen_1.useMobile)();let k=0;return"middle"===e.verticalAlign?k=(e.a.height-g.length*b*e.a.fontSize)/2:"bottom"===e.verticalAlign&&(k=e.a.height-g.length*b*e.a.fontSize),react_1.default.createElement(react_1.default.Fragment,null,react_1.default.createElement(react_konva_1.Path,{ref:i,x:e.a.x,y:e.a.y,rotation:e.a.rotation,hideInExport:!e.showInExport||!x,listening:!1,visible:e.backgroundEnabled,opacity:e.backgroundOpacity,data:L,fill:e.backgroundColor,offsetY:-k}),react_1.default.createElement(react_konva_1.Text,Object.assign({ref:r,id:e.id,name:"element",hideInExport:!e.showInExport||!x,editModeEnabled:e._editModeEnabled,x:e.a.x,y:e.a.y,rotation:e.a.rotation,width:e.a.width,height:e.a.height,text:x||e.placeholder},T,{stroke:e.stroke,lineJoin:"round",strokeWidth:e.strokeWidth,fillAfterStrokeEnabled:!0,fontSize:e.a.fontSize,fontFamily:`"${e.fontFamily}", "${h}"`,fontStyle:e.fontStyle+" "+e.fontWeight,textDecoration:e.textDecoration,align:e.align,verticalAlign:e.verticalAlign,draggable:M?e.draggable&&u:e.draggable,preventDefault:!M||u,opacity:S,visible:!e._editModeEnabled,ellipsis:"ellipsis"===flags_1.flags.textOverflow,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,lineHeight:b,letterSpacing:e.letterSpacing*e.a.fontSize,listening:E,onDragStart:()=>{t.history.startTransaction()},onDragMove:t=>{e.set({x:t.target.x(),y:t.target.y()})},onDragEnd:r=>{e.set({x:r.target.x(),y:r.target.y()}),t.history.endTransaction()},onMouseEnter:()=>{l(!0)},onMouseLeave:()=>{l(!1)},onClick:w,onTap:w,onTransformStart:()=>{d(!0),t.history.startTransaction(),c.current=r.current.height()},onTransform:t=>{var r,n;const o=t.target;null===(r=i.current)||void 0===r||r.setAttrs({x:o.x(),y:o.y(),rotation:o.rotation(),scale:o.scale()});const a=(null===(n=o.getStage())||void 0===n?void 0:n.findOne("Transformer")).getActiveAnchor();if("middle-left"===a||"middle-right"===a){const t=o.scaleX(),r=o.width()*t,i=e.a.fontSize;let n=r;r<i&&(n=i,m.current&&o.position(m.current)),o.width(n),o.scaleX(1),o.scaleY(1);const a=y();if("ellipsis"!==flags_1.flags.textOverflow){const t=Math.max(a,c.current);o.height(t),e.set({height:o.height()})}e.set({x:o.x(),y:o.y(),width:o.width(),rotation:o.rotation()}),(0,apply_filters_1.applyFilter)(o,e)}if("top-center"===a||"bottom-center"===a){let r="resize"===flags_1.flags.textOverflow?y():b*e.a.fontSize;t.target.height(Math.max(r,t.target.height()*t.target.scaleY())),t.target.scaleY(1)}t.target.strokeWidth(e.strokeWidth/t.target.scaleX()),m.current=t.target.position()},onTransformEnd:r=>{var n;const o=r.target.scaleX();r.target.scaleX(1),r.target.scaleY(1),r.target.strokeWidth(e.strokeWidth),e.set({fontSize:Math.round(e.a.fontSize*o),width:Math.ceil(r.target.width()*o),x:r.target.x(),y:r.target.y(),rotation:r.target.rotation(),height:r.target.height()*o}),null===(n=i.current)||void 0===n||n.setAttrs({scaleX:1,scaleY:1}),t.history.endTransaction(),d(!1)}})),n&&react_1.default.createElement(react_konva_1.Group,{x:e.a.x,y:e.a.y,rotation:e.a.rotation},react_1.default.createElement(TextInput,{textNodeRef:r,element:e,selectAll:o,cursorPosition:v.current,onBlur:()=>{e.toggleEditMode(!1)}})),!s&&(a||u)&&react_1.default.createElement(highlighter_1.Highlighter,{element:e}))}));
+"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,t,r,i){void 0===i&&(i=r);var n=Object.getOwnPropertyDescriptor(t,r);n&&!("get"in n?!t.__esModule:n.writable||n.configurable)||(n={enumerable:!0,get:function(){return t[r]}}),Object.defineProperty(e,i,n)}:function(e,t,r,i){void 0===i&&(i=r),e[i]=t[r]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),__importStar=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)"default"!==r&&Object.prototype.hasOwnProperty.call(e,r)&&__createBinding(t,e,r);return __setModuleDefault(t,e),t},__importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.TextElement=exports.useTextColor=exports.usePrevious=exports.getLineHeight=exports.useFontLoader=exports.getDir=exports.isRTLText=void 0;const react_1=__importDefault(require("react")),mobx_react_lite_1=require("mobx-react-lite"),react_konva_1=require("react-konva"),react_konva_utils_1=require("react-konva-utils"),mobx_1=require("mobx"),konva_1=__importDefault(require("konva")),svg_round_corners_1=require("svg-round-corners"),loader_1=require("../utils/loader"),fonts_1=require("../utils/fonts"),flags_1=require("../utils/flags"),text_1=require("../utils/text"),gradient=__importStar(require("../utils/gradient")),apply_filters_1=require("./apply-filters"),use_fadein_1=require("./use-fadein"),highlighter_1=require("./highlighter"),screen_1=require("../utils/screen"),styleNode=document.createElement("style");styleNode.type="text/css",document.head.appendChild(styleNode);const initialStyles={border:"none",padding:"0px",overflow:"hidden",background:"none",outline:"none",resize:"none",overflowWrap:"break-word",whiteSpace:"pre-wrap",userSelect:"text",wordBreak:"normal"};function isRTL(e){var t="֑-߿‏‫‮יִ-﷽ﹰ-ﻼ";return new RegExp("^[^"+t+"]*?["+t+"]").test(e)}function isRTLText(e){e=e.replace(/\s/g,"");let t=0;for(var r=0;r<e.length;r++){isRTL(e[r])&&(t+=1)}return t>e.length/2}function getDir(e){return isRTLText(e)?"rtl":"ltr"}exports.isRTLText=isRTLText,exports.getDir=getDir;const TextInput=(0,mobx_react_lite_1.observer)((({textNodeRef:e,element:t,onBlur:r,selectAll:i,cursorPosition:n})=>{const[o,a]=react_1.default.useState(initialStyles),l=e.current;react_1.default.useLayoutEffect((()=>{const e={};e.width=l.width()-2*l.padding()+"px",e.height=l.height()-2*l.padding()+10+"px",e.fontSize=l.fontSize()+"px",e.lineHeight=l.lineHeight()+.01,e.fontFamily=l.fontFamily(),e.textAlign=l.align(),e.color=l.fill(),e.fontWeight=t.fontWeight,e.fontStyle=t.fontStyle,e.letterSpacing=t.letterSpacing+"em";const r=`\n        .polotno-input::placeholder {\n          color: ${o.color};\n          opacity: 0.6;\n        }\n      `;styleNode.innerHTML="",styleNode.appendChild(document.createTextNode(r)),JSON.stringify(e)!==JSON.stringify(o)&&a(e)}));const s=react_1.default.useRef(null);react_1.default.useEffect((()=>{const e=setTimeout((()=>{var e;const t=s.current;if(!t)return;null===(e=s.current)||void 0===e||e.focus();const r=n||t.value.length;t.selectionStart=t.selectionEnd=r,i&&(null==t||t.select(),document.execCommand("selectAll",!1,null))}));return()=>{clearTimeout(e)}}),[]);let d=0;const c=l.textArr.length*l.lineHeight()*l.fontSize();"middle"===t.verticalAlign&&(d=(t.a.height-c)/2),"bottom"===t.verticalAlign&&(d=t.a.height-c);const u=(0,text_1.removeTags)(t.text);return react_1.default.createElement(react_konva_utils_1.Html,null,react_1.default.createElement("textarea",{className:"polotno-input",ref:s,dir:getDir(u),style:Object.assign(Object.assign(Object.assign({},initialStyles),o),{paddingTop:d+"px"}),value:u,onChange:e=>{t.set({text:e.target.value})},placeholder:t.placeholder,onBlur:r}))})),useEditor=e=>{const[t,r]=react_1.default.useState(!1),i=react_1.default.useRef(!1);return react_1.default.useEffect((()=>{var t=!0;return setTimeout((()=>{t&&(e._editModeEnabled&&(i.current=!0),r(!0),setTimeout((()=>{i.current=!1}),50))}),50),()=>{t=!1}}),[]),{editorEnabled:t&&e._editModeEnabled,selectAll:i.current}},useFontLoader=(e,t)=>{const[r,i]=react_1.default.useReducer((e=>e+1),0),n=react_1.default.useRef((0,fonts_1.isFontLoaded)(t));return react_1.default.useLayoutEffect((()=>{if(n.current=(0,fonts_1.isFontLoaded)(t),n.current)return;let r=!0;return(async()=>{n.current=!1,i();const o=(0,loader_1.incrementLoader)(`text ${t}`);await e.loadFont(t),konva_1.default.Util.requestAnimFrame(o),r&&(n.current=!0,i())})(),()=>{r=!1}}),[t]),[n.current]};exports.useFontLoader=useFontLoader;const getLineHeight=({fontLoaded:e,fontFamily:t,fontSize:r,lineHeight:i})=>react_1.default.useMemo((()=>{if("number"==typeof i)return i;const e=document.createElement("div");e.style.fontFamily=t,e.style.fontSize=r+"px",e.style.lineHeight=i,e.innerText="Test text",document.body.appendChild(e);const n=e.offsetHeight;return document.body.removeChild(e),n/r}),[e,t,r,i]);function getRelativePointerPosition(e){var t=e.getAbsoluteTransform().copy();t.invert();var r=e.getStage().getPointerPosition();return t.point(r)}function getCursorPosition(e){var t;const r=e.target,i=getRelativePointerPosition(r),n=r.textArr,o=Math.floor(i.y/(r.fontSize()*r.lineHeight())),a=n.slice(0,o).reduce(((e,t)=>e+t.text.length),o),l=null!==(t=n[o])&&void 0!==t?t:n[0];let s=0;"right"===r.align()?s=r.width()-l.width:"center"===r.align()&&(s=r.width()/2-l.width/2);return a+Math.round((i.x-s)/l.width*l.text.length)}function usePrevious(e){const t=react_1.default.useRef(e),r=react_1.default.useRef(e);return react_1.default.useMemo((()=>{r.current=t.current,t.current=e}),[e]),r.current}function findFitFontSize(e,t){const r=e.fontSize(),i=e.height(),n=(0,text_1.removeTags)(t.text);let o=t.a.fontSize;e.height(void 0);const a=Math.round(2*t.a.fontSize)-1;for(let r=1;r<a;r++){const r=t.a.height&&e.height()>t.a.height,i=n.split("\n").join(" ").split(/[\s-]+/);let a=e.textArr.map((e=>e.text)).join(";");const l=i.find((e=>!a.includes(e)||(a=a.replace(e,""),!1)));if(!(r||l))break;o-=.5,e.fontSize(o)}return e.fontSize(r),e.height(i),o}function generateBackgroundShape({lines:e,lineHeight:t,width:r,align:i="left",padding:n=0,cornerRadius:o=0}){var a;e.forEach(((e,t)=>{e.cx=r/2,"right"===i?e.cx=r-e.width/2:"left"===i&&(e.cx=e.width/2),"justify"!==i||e.lastInParagraph||(e.width=r),"justify"===i&&(e.cx=e.width/2)}));let l=`M ${null===(a=e[0])||void 0===a?void 0:a.cx} ${-n}`;e.forEach(((r,i)=>{const{cx:o}=r,a=e[i-1];a&&a.width>r.width?l+=` L ${o+r.width/2+n} ${i*t+n}`:l+=` L ${o+r.width/2+n} ${i*t-n}`;const s=e[i+1];s&&s.width>r.width?l+=` L ${o+r.width/2+n} ${(i+1)*t-n}`:l+=` L ${o+r.width/2+n} ${(i+1)*t+n}`}));for(var s=e.length-1;s>=0;s--){const r=e[s],{cx:i}=r,o=e[s+1];o&&o.width>r.width?l+=` L ${i-r.width/2-n} ${(s+1)*t-n}`:l+=` L ${i-r.width/2-n} ${(s+1)*t+n}`;const a=e[s-1];a&&a.width>r.width?l+=` L ${i-r.width/2-n} ${s*t+n}`:l+=` L ${i-r.width/2-n} ${s*t-n}`}l+=" Z";const d=(0,svg_round_corners_1.parsePath)(l);return(0,svg_round_corners_1.roundCommands)(d,o).path}exports.getLineHeight=getLineHeight,exports.usePrevious=usePrevious;const useTextColor=e=>react_1.default.useMemo((()=>{if(!gradient.isGradient(e.fill))return{fill:e.fill};const{stops:t,rotation:r}=gradient.parseColor(e.fill),i={x:e.a.width/2,y:e.a.height/2},n=Math.sqrt(Math.pow(i.x,2)+Math.pow(i.y,2)),o=konva_1.default.Util.degToRad(r)-Math.PI/2,a=[];return t.forEach((({offset:e,color:t})=>{a.push(e,t)})),{fillLinearGradientStartPointX:i.x-n*Math.cos(o),fillLinearGradientStartPointY:i.y-n*Math.sin(o),fillLinearGradientColorStops:a,fillLinearGradientEndPointX:i.x+n*Math.cos(o),fillLinearGradientEndPointY:i.y+n*Math.sin(o),fill:t[1].color,fillPriority:"linear-gradient"}}),[e.fill]);exports.useTextColor=useTextColor,exports.TextElement=(0,mobx_react_lite_1.observer)((({element:e,store:t})=>{const r=react_1.default.useRef(null),i=react_1.default.useRef(null),{editorEnabled:n,selectAll:o}=useEditor(e),[a,l]=react_1.default.useState(!1),[s,d]=react_1.default.useState(!1),c=react_1.default.useRef(e.a.height),u=t.selectedElements.indexOf(e)>=0,{textVerticalResizeEnabled:f}=flags_1.flags,h=usePrevious(e.fontFamily),[g,_]=react_1.default.useState([]);react_1.default.useEffect((()=>{var e,t;const i=null!==(t=null===(e=r.current)||void 0===e?void 0:e.textArr)&&void 0!==t?t:[];JSON.stringify(i)!==JSON.stringify(g)&&_(i)})),react_1.default.useEffect((()=>{if(e.a.width)return;const t=r.current;t.width(600),e.set({width:1.4*t.getTextWidth()})}),[]),react_1.default.useLayoutEffect((()=>(0,mobx_1.autorun)((()=>{const t=r.current;(0,apply_filters_1.applyFilter)(t,e)}))));const[p]=(0,exports.useFontLoader)(t,e.fontFamily),x=(0,text_1.removeTags)(e.text),y=()=>{const e=r.current.clone({height:void 0}),t=Math.ceil(e.fontSize()*e.lineHeight()*e.textArr.length+1);return e.destroy(),t};react_1.default.useLayoutEffect((()=>{if(!p)return;const{textOverflow:i}=flags_1.flags;if(e.a.height)if("change-font-size"!==i||s){if("resize"===i){const i=y();f&&e.a.height<i&&t.history.ignore((()=>{e.set({height:i}),r.current.height(i)})),f||e.a.height===i||t.history.ignore((()=>{e.set({height:i}),r.current.height(i)}))}}else{const i=findFitFontSize(r.current,e);if(i!==e.a.fontSize)return void t.history.ignore((()=>{e.set({fontSize:i})}));const n=y();e.a.height===n||f||t.history.ignore((()=>{e.set({height:n})}))}else{const r=y();t.history.ignore((()=>{e.set({height:r})}))}})),react_1.default.useLayoutEffect((()=>{const t=r.current;t&&(t.width(t.width()+1e-8),t._setTextData(),(0,apply_filters_1.applyFilter)(t,e))}),[p]);const m=react_1.default.useRef(null),v=react_1.default.useRef(0),w=r=>{r.evt.preventDefault();const i=t.selectedShapes.find((t=>t===e));i&&e.contentEditable&&(v.current=getCursorPosition(r),e.toggleEditMode())},S=!x&&e.placeholder?.6:e.a.opacity;(0,use_fadein_1.useFadeIn)(r,S);const b=(0,exports.getLineHeight)({fontLoaded:p,fontFamily:e.fontFamily,fontSize:e.a.fontSize,lineHeight:e.lineHeight}),E=e.selectable||"admin"===t.role,T=(0,exports.useTextColor)(e),L=react_1.default.useMemo((()=>e.backgroundEnabled?generateBackgroundShape({lines:JSON.parse(JSON.stringify(g)),cornerRadius:e.backgroundCornerRadius*(e.a.fontSize*b*.5),lineHeight:b*e.a.fontSize,padding:e.backgroundPadding*(e.a.fontSize*b*.5),width:e.a.width,align:e.align}):""),[e.backgroundEnabled,e.backgroundCornerRadius,e.a.fontSize,b,e.backgroundPadding,e.a.width,e.align,g]),M=(0,screen_1.useMobile)();let k=0;return"middle"===e.verticalAlign?k=(e.a.height-g.length*b*e.a.fontSize)/2:"bottom"===e.verticalAlign&&(k=e.a.height-g.length*b*e.a.fontSize),react_1.default.createElement(react_1.default.Fragment,null,react_1.default.createElement(react_konva_1.Path,{ref:i,x:e.a.x,y:e.a.y,rotation:e.a.rotation,hideInExport:!e.showInExport||!x,listening:!1,visible:e.backgroundEnabled,opacity:e.backgroundOpacity,data:L,fill:e.backgroundColor,offsetY:-k}),react_1.default.createElement(react_konva_1.Text,Object.assign({ref:r,id:e.id,name:"element",hideInExport:!e.showInExport||!x,editModeEnabled:e._editModeEnabled,x:e.a.x,y:e.a.y,rotation:e.a.rotation,width:e.a.width,height:e.a.height,text:x||e.placeholder},T,{stroke:e.stroke,lineJoin:"round",strokeWidth:e.strokeWidth,fillAfterStrokeEnabled:!0,fontSize:e.a.fontSize,fontFamily:`"${e.fontFamily}", "${h}"`,fontStyle:e.fontStyle+" "+e.fontWeight,textDecoration:e.textDecoration,align:e.align,verticalAlign:e.verticalAlign,draggable:M?e.draggable&&u:e.draggable,preventDefault:!M||u,opacity:S,visible:!e._editModeEnabled,ellipsis:"ellipsis"===flags_1.flags.textOverflow,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,lineHeight:b,letterSpacing:e.letterSpacing*e.a.fontSize,listening:E,onDragStart:()=>{t.history.startTransaction()},onDragMove:t=>{e.set({x:t.target.x(),y:t.target.y()})},onDragEnd:r=>{e.set({x:r.target.x(),y:r.target.y()}),t.history.endTransaction()},onMouseEnter:()=>{l(!0)},onMouseLeave:()=>{l(!1)},onClick:w,onTap:w,onTransformStart:()=>{d(!0),t.history.startTransaction(),c.current=r.current.height()},onTransform:t=>{var r,n;const o=t.target;null===(r=i.current)||void 0===r||r.setAttrs({x:o.x(),y:o.y(),rotation:o.rotation(),scale:o.scale()});const a=(null===(n=o.getStage())||void 0===n?void 0:n.findOne("Transformer")).getActiveAnchor();if("middle-left"===a||"middle-right"===a){const t=o.scaleX(),r=o.width()*t,i=e.a.fontSize;let n=r;r<i&&(n=i,m.current&&o.position(m.current)),o.width(n),o.scaleX(1),o.scaleY(1);const a=y();if("ellipsis"!==flags_1.flags.textOverflow){const t=Math.max(a,c.current);o.height(t),e.set({height:o.height()})}e.set({x:o.x(),y:o.y(),width:o.width(),rotation:o.rotation()}),(0,apply_filters_1.applyFilter)(o,e)}if("top-center"===a||"bottom-center"===a){let r="resize"===flags_1.flags.textOverflow?y():b*e.a.fontSize;t.target.height(Math.max(r,t.target.height()*t.target.scaleY())),t.target.scaleY(1)}t.target.strokeWidth(e.strokeWidth/t.target.scaleX()),m.current=t.target.position()},onTransformEnd:r=>{var n;const o=r.target.scaleX();r.target.scaleX(1),r.target.scaleY(1),r.target.strokeWidth(e.strokeWidth),e.set({fontSize:Math.round(e.a.fontSize*o),width:Math.ceil(r.target.width()*o),x:r.target.x(),y:r.target.y(),rotation:r.target.rotation(),height:r.target.height()*o}),null===(n=i.current)||void 0===n||n.setAttrs({scaleX:1,scaleY:1}),t.history.endTransaction(),d(!1)}})),n&&react_1.default.createElement(react_konva_1.Group,{x:e.a.x,y:e.a.y,rotation:e.a.rotation},react_1.default.createElement(TextInput,{textNodeRef:r,element:e,selectAll:o,cursorPosition:v.current,onBlur:()=>{e.toggleEditMode(!1)}})),!s&&(a||u)&&react_1.default.createElement(highlighter_1.Highlighter,{element:e}))}));

package/model/store.d.ts

@@ -483,6 +483,10 @@ export declare const Store: import("mobx-state-tree").IModelType<{
     addFont(font: fonts.FONT): void;
     removeFont(fontFamily: string): void;
     loadFont(fontFamily: any): Promise<void>;
+    validate(json: any): {
+        path: string;
+        message: string;
+    }[];
 }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>;
 export type StoreType = Instance<typeof Store>;
 export interface StoreProps {

package/model/store.js

@@ -1 +1 @@
-"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,t,i,a){void 0===a&&(a=i);var o=Object.getOwnPropertyDescriptor(t,i);o&&!("get"in o?!t.__esModule:o.writable||o.configurable)||(o={enumerable:!0,get:function(){return t[i]}}),Object.defineProperty(e,a,o)}:function(e,t,i,a){void 0===a&&(a=i),e[a]=t[i]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),__importStar=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var i in e)"default"!==i&&Object.prototype.hasOwnProperty.call(e,i)&&__createBinding(t,e,i);return __setModuleDefault(t,e),t},__rest=this&&this.__rest||function(e,t){var i={};for(var a in e)Object.prototype.hasOwnProperty.call(e,a)&&t.indexOf(a)<0&&(i[a]=e[a]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(a=Object.getOwnPropertySymbols(e);o<a.length;o++)t.indexOf(a[o])<0&&Object.prototype.propertyIsEnumerable.call(e,a[o])&&(i[a[o]]=e[a[o]])}return i},__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=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"),page_model_1=require("./page-model"),group_model_1=require("./group-model");function createStore({key:e,showCredit:t}={key:"",showCredit:!1}){const i=exports.Store.create();return(0,validate_key_1.validateKey)(e,t),i}(0,mobx_state_tree_1.setLivelinessChecking)("ignore"),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(page_model_1.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 i of e.pages)for(const e of i.children)if(e.id===t)return e})).filter((e=>!!e))},get children(){return e.pages},get selectedShapes(){const t=[];return e.selectedElementsIds.forEach((i=>{for(const a of e.pages)for(const e of a.children)e.id===i&&"group"!==e.type&&t.push(e),"group"===e.type&&e.id===i&&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:i=[],currentTime:a=0}={}){e.animatedElementsIds=(0,mobx_state_tree_1.cast)(i),e.currentTime=a,e.isPlaying=!0,t=Date.now(),requestAnimationFrame(e.seek)},seek(){if(!e.isPlaying)return;const i=Date.now(),a=i-t;t=i,e.currentTime+=a;let o=0;for(const t of e.pages){if(e.currentTime>=t.startTime&&e.currentTime<t.startTime+t.duration){e.selectPage(t.id);break}o+=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:i}){e.unit=t||e.unit,e.dpi=i||e.dpi},setRole(t){e.role=t},find(t){let i;return(0,group_model_1.forEveryChild)({children:e.pages},(e=>{!i&&t(e)&&(i=e)})),i},getElementById:t=>e.find((e=>e.id===t)),addPage(t){const i=page_model_1.Page.create(Object.assign({id:(0,nanoid_1.nanoid)(10)},t));return e.pages.push(i),e._activePageId=i.id,i},selectPage(t){e._activePageId=t},selectElements(t){const i=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)(i)},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,i,a){e.pages.forEach((e=>{e.setSize({width:t,height:i,useMagic:a,softChange:!0})})),e.width=t,e.height=i},setPageZIndex(t,i){const a=e.pages.find((e=>e.id===t));a&&((0,mobx_state_tree_1.detach)(a),e.pages.remove(a),e.pages.splice(i,0,a))},deletePages(t){const i=e.pages.indexOf(e.activePage);t.forEach((t=>{const i=e.pages.find((e=>e.id===t));(0,mobx_state_tree_1.destroy)(i)}));const a=Math.min(e.pages.length-1,i),o=e.pages[a];o&&(e._activePageId=o.id),e.selectedElementsIds=(0,mobx_state_tree_1.cast)(e.selectedElementsIds.filter((t=>e.getElementById(t))))},groupElements(t){const i=t.map((t=>e.getElementById(t)));i.forEach((e=>{e&&(0,mobx_state_tree_1.detach)(e)}));const a=e.activePage,o={id:(0,nanoid_1.nanoid)(10),children:i,type:"group"};return a.children.push(o),e.selectedElementsIds=(0,mobx_state_tree_1.cast)([o.id]),o},ungroupElements(t){const i=t.map((t=>e.getElementById(t))),a=[];i.forEach((e=>{if(e&&"group"===e.type){const t=e.page,i=t.children.indexOf(e);e.children.forEach((e=>{a.push(e.id)})),e.children.forEach((e=>{(0,mobx_state_tree_1.detach)(e),t.children.push(e)})),t.children.splice(i,1)}})),e.selectedElementsIds=(0,mobx_state_tree_1.cast)(a)},deleteElements(t){t.forEach((t=>{e.pages.forEach((e=>{const i=e.children.find((e=>e.id===t));i&&(0,mobx_state_tree_1.destroy)(i)}))})),e.selectedElementsIds=(0,mobx_state_tree_1.cast)(e.selectedElementsIds.filter((t=>e.getElementById(t))))},on(t,i){if("change"===t){let t=e.toJSON();return(0,mobx_state_tree_1.onSnapshot)(e,(a=>{const o=e.toJSON();!(0,deep_equal_1.deepEqual)(t,o)&&(t=o,i(o))}))}},async _toCanvas({pixelRatio:t,ignoreBackground:i,pageId:a,mimeType:o,includeBleed:n}={}){var s;const r=t||1;a=a||(null===(s=e.pages[0])||void 0===s?void 0:s.id);const l=e.pages.find((e=>e.id===a));if(!l)throw new Error(`No page for export with id ${a}`);null==l||l.set({_exporting:!0});const d=await(0,wait_1.waitTillAvailable)((()=>konva_1.default.stages.find((e=>e.getAttr("pageId")===a))));if(!d)throw new Error(`Export is failed. Can not find stage for page ${a}. 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 g=p.findOne(".page-background-group"),u=g.clip();g.clip({x:null,y:null,width:null,height:null});const _=p.findOne(".elements-container"),m=_.clip();_.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 h=p.find((e=>!e.visible()&&e.getAttr("editModeEnabled")));h.forEach((e=>{e.setAttr("oldVisible",e.visible()),e.show()})),i&&p.find(".page-background").forEach((e=>e.hide()));const b=n?l.bleed:0;let y=b;e.bleedVisible&&n?y=0:e.bleedVisible&&!n&&(y=-l.bleed);const x=document.createElement("canvas");x.width=(l.computedWidth+2*b)*r,x.height=(l.computedHeight+2*b)*r;const w=x.getContext("2d");"image/jpeg"===o&&(w.fillStyle="white",w.fillRect(0,0,x.width,x.height));const v=p.toCanvas({x:p.x()-y*p.scaleX(),y:p.y()-y*p.scaleY(),width:(l.computedWidth+2*b)*p.scaleX(),height:(l.computedHeight+2*b)*p.scaleY(),pixelRatio:1/p.scaleX()*r});return w.drawImage(v,0,0),konva_1.default.Util.releaseCanvas(v),i&&p.find(".page-background").forEach((e=>e.show())),f.forEach((e=>{e.visible(e.getAttr("oldVisible"))})),h.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(u),_.clip(m),null==l||l.set({_exporting:!1}),x},async toDataURL({pixelRatio:t,ignoreBackground:i,pageId:a,mimeType:o,includeBleed:n,quality:s}={}){const r=await e._toCanvas({pixelRatio:t,ignoreBackground:i,pageId:a,mimeType:o,includeBleed:n}),l=r.toDataURL(o,s);return konva_1.default.Util.releaseCanvas(r),l},async toBlob({pixelRatio:t,ignoreBackground:i,pageId:a,mimeType:o,includeBleed:n,quality:s}={}){const r=await e._toCanvas({pixelRatio:t,ignoreBackground:i,pageId:a,mimeType:o,includeBleed:n}),l=new Promise((e=>{r.toBlob(e,o,s)}));return konva_1.default.Util.releaseCanvas(r),l},async saveAsImage(t={}){var{fileName:i}=t,a=__rest(t,["fileName"]);const o=a.mimeType||"image/png",n=o.split("/")[1];(0,download_1.downloadFile)(await e.toDataURL(a),i||"polotno."+n,o)},async _toPDF(t){const i=t.dpi||e.dpi,a=t.parallel||1,o=t.unit||("px"===e.unit?"mm":e.unit),n=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:o,dpi:i}),c=d(t.cropMarkSize||0),p=r[0]||{},g=t.includeBleed?p.bleed:0,u=d(p.computedWidth+2*g)+2*c,_=d(p.computedHeight+2*g)+2*c;var m=new l({unit:o,orientation:u>_?"landscape":"portrait",format:[u,_],compress:!0,putOnlyUsedFonts:!0});m.deletePage(1);const f=e._elementsPixelRatio;e.setElementsPixelRatio(n),await new Promise((e=>setTimeout(e)));const h=((e,t)=>{for(var i=[],a=0;a<e.length;a+=t)i.push(e.slice(a,a+t));return i})(r,a);for(const i of h){const a=i.map((async i=>{const a=t.includeBleed?i.bleed:0,o=d(i.computedWidth+2*a)+2*c,s=d(i.computedHeight+2*a)+2*c;let r=0,l=n;for(;r<10;){r+=1,2===r&&console.error("Polotno can not export PDF with current settings. Quality is automatically reduced.");const a=await e.toDataURL(Object.assign(Object.assign({},t),{pageId:i.id,pixelRatio:l}));if(a.length>20)return{url:a,width:o,height:s};l*=.8}}));(await Promise.all(a)).forEach((({url:e,width:t,height:i})=>{m.addPage([t,i],t>i?"landscape":"portrait"),c&&(m.setLineWidth(d(1)),m.line(2*c,0,2*c,c),m.line(0,2*c,c,2*c),m.line(t-2*c,0,t-2*c,c),m.line(t,2*c,t-c,2*c),m.line(0,i-2*c,c,i-2*c),m.line(2*c,i,2*c,i-c),m.line(t,i-2*c,t-c,i-2*c),m.line(t-2*c,i,t-2*c,i-c)),m.addImage(e,c,c,t-2*c,i-2*c,void 0,"FAST")}))}return e.setElementsPixelRatio(f),m},toPDFDataURL:async t=>(await e._toPDF(Object.assign({mimeType:"image/jpeg"},t))).output("datauristring"),async toGIFDataURL(t={}){const i=t.pixelRatio||1,a=await(0,gif_lib_1.createGIF)({width:e.width*i,height:e.height*i}),o=1e3/(t.fps||10),n=e.duration/o;for(let t=0;t<n-1;t++){const n=t*o||1;e.setCurrentTime(n);let s=0,r="";for(const t of e.pages)if(s+=t.duration,t.set({_rendering:s>n}),s>n){r=t.id;break}const l=await e._toCanvas({pixelRatio:i,pageId:r});a.addFrame(l.getContext("2d"),{delay:o,copy:!0})}for(const t of e.pages)t.set({_rendering:!1});e.stop(),a.render();return new Promise((e=>{a.on("finished",(function(t){!function(e,t){var i=new FileReader;i.onload=function(e){t(e.target.result)},i.readAsDataURL(e)}(t,e)}))}))},async saveAsGIF(t={}){var{fileName:i}=t,a=__rest(t,["fileName"]);const o=await e.toGIFDataURL(a);(0,download_1.downloadFile)(o,i||"polotno.gif")},async toHTML(){const t=e.toJSON();return(0,html_1.jsonToHTML)({json:t})},async saveAsHTML({fileName:t}={}){const i=await e.toHTML(),a="data:text/html;base64,"+window.btoa(unescape(encodeURIComponent(i)));(0,download_1.downloadFile)(a,t||"polotno.html")},async toSVG(){const t=e.toJSON();return(0,to_svg_1.jsonToSVG)({json:t})},async saveAsSVG({fileName:t}={}){const i=await e.toSVG(),a="data:text/svg;base64,"+window.btoa(unescape(encodeURIComponent(i)));(0,download_1.downloadFile)(a,t||"polotno.svg")},async saveAsPDF(t={}){var{fileName:i}=t,a=__rest(t,["fileName"]);(await e._toPDF(Object.assign({mimeType:"image/jpeg"},a))).save(i||"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,i=!1){var a;const o=Object.assign({},t),n=e.pages.indexOf(e.activePage);let s=null===(a=o.pages[n]||o.pages[0])||void 0===a?void 0:a.id;o._activePageId=s;const r=Object.assign({},(0,mobx_state_tree_1.getSnapshot)(e));Object.assign(r,o),r.history=i?e.history.toJSON():{history:[],undoIdx:-1},(0,mobx_state_tree_1.applySnapshot)(e,r)},clear({keepHistory:t=!1}={}){const i=e.pages.map((e=>e.id));e.deletePages(i),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 i=e.fonts.find((e=>e.fontFamily===t))||fonts.globalFonts.find((e=>e.fontFamily===t));i?fonts.injectCustomFont(i):fonts.injectGoogleFont(t),await fonts.loadFont(t)}}))),exports.createStore=createStore,exports.default=createStore;
+"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,t,a,i){void 0===i&&(i=a);var o=Object.getOwnPropertyDescriptor(t,a);o&&!("get"in o?!t.__esModule:o.writable||o.configurable)||(o={enumerable:!0,get:function(){return t[a]}}),Object.defineProperty(e,i,o)}:function(e,t,a,i){void 0===i&&(i=a),e[i]=t[a]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),__importStar=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var a in e)"default"!==a&&Object.prototype.hasOwnProperty.call(e,a)&&__createBinding(t,e,a);return __setModuleDefault(t,e),t},__rest=this&&this.__rest||function(e,t){var a={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(a[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(i=Object.getOwnPropertySymbols(e);o<i.length;o++)t.indexOf(i[o])<0&&Object.prototype.propertyIsEnumerable.call(e,i[o])&&(a[i[o]]=e[i[o]])}return a},__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=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"),page_model_1=require("./page-model"),group_model_1=require("./group-model");function createStore({key:e,showCredit:t}={key:"",showCredit:!1}){const a=exports.Store.create();return(0,validate_key_1.validateKey)(e,t),a}(0,mobx_state_tree_1.setLivelinessChecking)("ignore"),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(page_model_1.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 a of e.pages)for(const e of a.children)if(e.id===t)return e})).filter((e=>!!e))},get children(){return e.pages},get selectedShapes(){const t=[];return e.selectedElementsIds.forEach((a=>{for(const i of e.pages)for(const e of i.children)e.id===a&&"group"!==e.type&&t.push(e),"group"===e.type&&e.id===a&&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:a=[],currentTime:i=0}={}){e.animatedElementsIds=(0,mobx_state_tree_1.cast)(a),e.currentTime=i,e.isPlaying=!0,t=Date.now(),requestAnimationFrame(e.seek)},seek(){if(!e.isPlaying)return;const a=Date.now(),i=a-t;t=a,e.currentTime+=i;let o=0;for(const t of e.pages){if(e.currentTime>=t.startTime&&e.currentTime<t.startTime+t.duration){e.selectPage(t.id);break}o+=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:a}){e.unit=t||e.unit,e.dpi=a||e.dpi},setRole(t){e.role=t},find(t){let a;return(0,group_model_1.forEveryChild)({children:e.pages},(e=>{!a&&t(e)&&(a=e)})),a},getElementById:t=>e.find((e=>e.id===t)),addPage(t){const a=page_model_1.Page.create(Object.assign({id:(0,nanoid_1.nanoid)(10)},t));return e.pages.push(a),e._activePageId=a.id,a},selectPage(t){e._activePageId=t},selectElements(t){const a=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)(a)},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,a,i){e.pages.forEach((e=>{e.setSize({width:t,height:a,useMagic:i,softChange:!0})})),e.width=t,e.height=a},setPageZIndex(t,a){const i=e.pages.find((e=>e.id===t));i&&((0,mobx_state_tree_1.detach)(i),e.pages.remove(i),e.pages.splice(a,0,i))},deletePages(t){const a=e.pages.indexOf(e.activePage);t.forEach((t=>{const a=e.pages.find((e=>e.id===t));(0,mobx_state_tree_1.destroy)(a)}));const i=Math.min(e.pages.length-1,a),o=e.pages[i];o&&(e._activePageId=o.id),e.selectedElementsIds=(0,mobx_state_tree_1.cast)(e.selectedElementsIds.filter((t=>e.getElementById(t))))},groupElements(t){const a=t.map((t=>e.getElementById(t)));a.forEach((e=>{e&&(0,mobx_state_tree_1.detach)(e)}));const i=e.activePage,o={id:(0,nanoid_1.nanoid)(10),children:a,type:"group"};return i.children.push(o),e.selectedElementsIds=(0,mobx_state_tree_1.cast)([o.id]),o},ungroupElements(t){const a=t.map((t=>e.getElementById(t))),i=[];a.forEach((e=>{if(e&&"group"===e.type){const t=e.page,a=t.children.indexOf(e);e.children.forEach((e=>{i.push(e.id)})),e.children.forEach((e=>{(0,mobx_state_tree_1.detach)(e),t.children.push(e)})),t.children.splice(a,1)}})),e.selectedElementsIds=(0,mobx_state_tree_1.cast)(i)},deleteElements(t){t.forEach((t=>{e.pages.forEach((e=>{const a=e.children.find((e=>e.id===t));a&&(0,mobx_state_tree_1.destroy)(a)}))})),e.selectedElementsIds=(0,mobx_state_tree_1.cast)(e.selectedElementsIds.filter((t=>e.getElementById(t))))},on(t,a){if("change"===t){let t=e.toJSON();return(0,mobx_state_tree_1.onSnapshot)(e,(i=>{const o=e.toJSON();!(0,deep_equal_1.deepEqual)(t,o)&&(t=o,a(o))}))}},async _toCanvas({pixelRatio:t,ignoreBackground:a,pageId:i,mimeType:o,includeBleed:n}={}){var s;const r=t||1;i=i||(null===(s=e.pages[0])||void 0===s?void 0:s.id);const l=e.pages.find((e=>e.id===i));if(!l)throw new Error(`No page for export with id ${i}`);null==l||l.set({_exporting:!0});const d=await(0,wait_1.waitTillAvailable)((()=>konva_1.default.stages.find((e=>e.getAttr("pageId")===i))));if(!d)throw new Error(`Export is failed. Can not find stage for page ${i}. 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 g=p.findOne(".page-background-group"),u=g.clip();g.clip({x:null,y:null,width:null,height:null});const _=p.findOne(".elements-container"),m=_.clip();_.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 h=p.find((e=>!e.visible()&&e.getAttr("editModeEnabled")));h.forEach((e=>{e.setAttr("oldVisible",e.visible()),e.show()})),a&&p.find(".page-background").forEach((e=>e.hide()));const b=n?l.bleed:0;let y=b;e.bleedVisible&&n?y=0:e.bleedVisible&&!n&&(y=-l.bleed);const x=document.createElement("canvas");x.width=(l.computedWidth+2*b)*r,x.height=(l.computedHeight+2*b)*r;const w=x.getContext("2d");"image/jpeg"===o&&(w.fillStyle="white",w.fillRect(0,0,x.width,x.height));const v=p.toCanvas({x:p.x()-y*p.scaleX(),y:p.y()-y*p.scaleY(),width:(l.computedWidth+2*b)*p.scaleX(),height:(l.computedHeight+2*b)*p.scaleY(),pixelRatio:1/p.scaleX()*r});return w.drawImage(v,0,0),konva_1.default.Util.releaseCanvas(v),a&&p.find(".page-background").forEach((e=>e.show())),f.forEach((e=>{e.visible(e.getAttr("oldVisible"))})),h.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(u),_.clip(m),null==l||l.set({_exporting:!1}),x},async toDataURL({pixelRatio:t,ignoreBackground:a,pageId:i,mimeType:o,includeBleed:n,quality:s}={}){const r=await e._toCanvas({pixelRatio:t,ignoreBackground:a,pageId:i,mimeType:o,includeBleed:n}),l=r.toDataURL(o,s);return konva_1.default.Util.releaseCanvas(r),l},async toBlob({pixelRatio:t,ignoreBackground:a,pageId:i,mimeType:o,includeBleed:n,quality:s}={}){const r=await e._toCanvas({pixelRatio:t,ignoreBackground:a,pageId:i,mimeType:o,includeBleed:n}),l=new Promise((e=>{r.toBlob(e,o,s)}));return konva_1.default.Util.releaseCanvas(r),l},async saveAsImage(t={}){var{fileName:a}=t,i=__rest(t,["fileName"]);const o=i.mimeType||"image/png",n=o.split("/")[1];(0,download_1.downloadFile)(await e.toDataURL(i),a||"polotno."+n,o)},async _toPDF(t){const a=t.dpi||e.dpi,i=t.parallel||1,o=t.unit||("px"===e.unit?"mm":e.unit),n=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:o,dpi:a}),c=d(t.cropMarkSize||0),p=r[0]||{},g=t.includeBleed?p.bleed:0,u=d(p.computedWidth+2*g)+2*c,_=d(p.computedHeight+2*g)+2*c;var m=new l({unit:o,orientation:u>_?"landscape":"portrait",format:[u,_],compress:!0,putOnlyUsedFonts:!0});m.deletePage(1);const f=e._elementsPixelRatio;e.setElementsPixelRatio(n),await new Promise((e=>setTimeout(e)));const h=((e,t)=>{for(var a=[],i=0;i<e.length;i+=t)a.push(e.slice(i,i+t));return a})(r,i);for(const a of h){const i=a.map((async a=>{const i=t.includeBleed?a.bleed:0,o=d(a.computedWidth+2*i)+2*c,s=d(a.computedHeight+2*i)+2*c;let r=0,l=n;for(;r<10;){r+=1,2===r&&console.error("Polotno can not export PDF with current settings. Quality is automatically reduced.");const i=await e.toDataURL(Object.assign(Object.assign({},t),{pageId:a.id,pixelRatio:l}));if(i.length>20)return{url:i,width:o,height:s};l*=.8}}));(await Promise.all(i)).forEach((({url:e,width:t,height:a})=>{m.addPage([t,a],t>a?"landscape":"portrait"),c&&(m.setLineWidth(d(1)),m.line(2*c,0,2*c,c),m.line(0,2*c,c,2*c),m.line(t-2*c,0,t-2*c,c),m.line(t,2*c,t-c,2*c),m.line(0,a-2*c,c,a-2*c),m.line(2*c,a,2*c,a-c),m.line(t,a-2*c,t-c,a-2*c),m.line(t-2*c,a,t-2*c,a-c)),m.addImage(e,c,c,t-2*c,a-2*c,void 0,"FAST")}))}return e.setElementsPixelRatio(f),m},toPDFDataURL:async t=>(await e._toPDF(Object.assign({mimeType:"image/jpeg"},t))).output("datauristring"),async toGIFDataURL(t={}){const a=t.pixelRatio||1,i=await(0,gif_lib_1.createGIF)({width:e.width*a,height:e.height*a}),o=1e3/(t.fps||10),n=e.duration/o;for(let t=0;t<n-1;t++){const n=t*o||1;e.setCurrentTime(n);let s=0,r="";for(const t of e.pages)if(s+=t.duration,t.set({_rendering:s>n}),s>n){r=t.id;break}const l=await e._toCanvas({pixelRatio:a,pageId:r});i.addFrame(l.getContext("2d"),{delay:o,copy:!0})}for(const t of e.pages)t.set({_rendering:!1});e.stop(),i.render();return new Promise((e=>{i.on("finished",(function(t){!function(e,t){var a=new FileReader;a.onload=function(e){t(e.target.result)},a.readAsDataURL(e)}(t,e)}))}))},async saveAsGIF(t={}){var{fileName:a}=t,i=__rest(t,["fileName"]);const o=await e.toGIFDataURL(i);(0,download_1.downloadFile)(o,a||"polotno.gif")},async toHTML(){const t=e.toJSON();return(0,html_1.jsonToHTML)({json:t})},async saveAsHTML({fileName:t}={}){const a=await e.toHTML(),i="data:text/html;base64,"+window.btoa(unescape(encodeURIComponent(a)));(0,download_1.downloadFile)(i,t||"polotno.html")},async toSVG(){const t=e.toJSON();return(0,to_svg_1.jsonToSVG)({json:t})},async saveAsSVG({fileName:t}={}){const a=await e.toSVG(),i="data:text/svg;base64,"+window.btoa(unescape(encodeURIComponent(a)));(0,download_1.downloadFile)(i,t||"polotno.svg")},async saveAsPDF(t={}){var{fileName:a}=t,i=__rest(t,["fileName"]);(await e._toPDF(Object.assign({mimeType:"image/jpeg"},i))).save(a||"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,a=!1){var i;const o=Object.assign({},t),n=e.pages.indexOf(e.activePage);let s=null===(i=o.pages[n]||o.pages[0])||void 0===i?void 0:i.id;o._activePageId=s;const r=Object.assign({},(0,mobx_state_tree_1.getSnapshot)(e));Object.assign(r,o),r.history=a?e.history.toJSON():{history:[],undoIdx:-1},(0,mobx_state_tree_1.applySnapshot)(e,r)},clear({keepHistory:t=!1}={}){const a=e.pages.map((e=>e.id));e.deletePages(a),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 a=e.fonts.find((e=>e.fontFamily===t))||fonts.globalFonts.find((e=>e.fontFamily===t));a?fonts.injectCustomFont(a):fonts.injectGoogleFont(t),await fonts.loadFont(t)},validate:e=>exports.Store.validate(e,[{path:"",type:exports.Store}]).map((e=>({path:"store"+e.context.map((e=>e.path)).join("."),message:e.message})))}))),exports.createStore=createStore,exports.default=createStore;

package/package.json

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

package/polotno-app.d.ts

@@ -544,6 +544,10 @@ export declare function createPolotnoApp({ container, key, showCredit }: {
         addFont(font: import("./utils/fonts").FONT): void;
         removeFont(fontFamily: string): void;
         loadFont(fontFamily: any): Promise<void>;
+        validate(json: any): {
+            path: string;
+            message: string;
+        }[];
     } & import("mobx-state-tree").IStateTreeNode<import("mobx-state-tree").IModelType<{
         role: import("mobx-state-tree").IType<string, string, string>;
         pages: import("mobx-state-tree").IArrayType<import("mobx-state-tree").IModelType<{
@@ -1005,6 +1009,10 @@ export declare function createPolotnoApp({ container, key, showCredit }: {
         addFont(font: import("./utils/fonts").FONT): void;
         removeFont(fontFamily: string): void;
         loadFont(fontFamily: any): Promise<void>;
+        validate(json: any): {
+            path: string;
+            message: string;
+        }[];
     }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
     root: any;
 };

package/polotno.bundle.js

@@ -1178,7 +1178,7 @@ e.marker=e.marker.toUpperCase(),e.marker){case"M":case"L":case"A":case"T":e.valu
 function e(t,n){return"M"===t[n].marker?t[n]:e(t,n-1)}(n,t);e.values.x=r.values.x,e.values.y=r.values.y}return e}function lu(e,t,n){// Skip the first moveTo command and any other that's not a lineTo.
 if(0!==t&&"L"===e.marker){// It seems we have a lineTo here. Get the immediate previous command
 let r=n[t-1],i=["x","y"].every(t=>0===Math.round(Math.abs(r.values[t]-e.values[t])));i&&(e.overlap=!0)}return e}function lc(e,t){return Math.atan2(t.x-e.x,t.y-e.y)}function ld(e,t){let n=e.x-t.x,r=e.y-t.y;return Math.sqrt(Math.pow(n,2)+Math.pow(r,2))}function lh(e,t){let n=t/Math.tan(e);return n===1/0||n===-1/0||isNaN(n)?t:n}var v=h("8NFma");let lf=()=>!1;function lp(e,t){let n=/*@__PURE__*/l(v).useRef();/*@__PURE__*/l(v).useLayoutEffect(()=>{n.current&&n.current.destroy()},[t]),/*@__PURE__*/l(v).useLayoutEffect(()=>{},[])}let lg=0,lm=[];function lv(e){lg+=1;let t=!1,n=setTimeout(()=>{t||(lw(`Timeout loading image ${e}`),console.error("Timeout triggered for loader. Some assets may not have loaded.",e),t=!0,ly())},3e4);return()=>{t||(clearTimeout(n),ly())}}function ly(){0==(lg-=1)&&(lm.forEach(e=>e()),lm=[])}let lb=[];function lw(e){lb.forEach(t=>t(e))}let lx=eD(["Roboto","Amatic SC","Press Start 2P","Marck Script","Rubik Mono One"]),l_=eD({value:!1});function lE(){return l_.value}let lS=eD([]);var lO=document.createElement("canvas");function lC(e,t="Arial"){var n=lO.getContext("2d");return n.font=`normal 40px '${e}', ${t}`,n.measureText("Some test text;?#D-ПРИВЕТ!1230o9u8i7y6t5r4e3w2q1").width}let lk={// let us think Arial is already loaded
-Arial:!0},lP=e=>lk[e];async function lT(e){if(lk[e])return;// try to use font load API
+Arial:!0},lP=e=>!!lk[e];async function lT(e){if(lk[e])return;// try to use font load API
 // it is better, because it is possible that the font is ALREADY loaded
 // so we don't need to wait for a manual check
 let t=!!document.fonts?.load,n=lC("Arial");if(t)try{await document.fonts.load(`16px '${e}'`);// when Chrome browser tell us the font is loaded, it is not really loaded yet, we still need to wait
@@ -1219,8 +1219,8 @@ let e=setTimeout(()=>{let e=u.current;if(!e)return;u.current?.focus();let t=i||e
 // select all when on mount (or very small time offset) we have flag on
 let[t,n]=/*@__PURE__*/l(v).useState(!1),r=/*@__PURE__*/l(v).useRef(!1);return /*@__PURE__*/l(v).useEffect(()=>{var t=!0;return(// to a timeout, because a user may toggle edit mode in a not batched by react transaction
 setTimeout(()=>{t&&(e._editModeEnabled&&(r.current=!0),n(!0),// remove select all flag
-setTimeout(()=>{r.current=!1},50))},50),()=>{t=!1})},[]),{editorEnabled:t&&e._editModeEnabled,selectAll:r.current}},lX=(e,t)=>{let[n,r]=/*@__PURE__*/l(v).useReducer(e=>e+1,0),i=/*@__PURE__*/l(v).useRef(!!lP(t));return /*@__PURE__*/l(v).useLayoutEffect(()=>{// if font is already loaded after quick check, do nothing
-if(i.current)return;let n=!0,o=async()=>{i.current=!1,r();let o=lv(`text ${t}`);await e.loadFont(t),/*@__PURE__*/l(nQ).Util.requestAnimFrame(o),n&&(i.current=!0,r())};return o(),()=>{n=!1}},[t]),[i.current]},lQ=({fontLoaded:e,fontFamily:t,fontSize:n,lineHeight:r})=>/*@__PURE__*/l(v).useMemo(()=>{if("number"==typeof r)return r;let e=document.createElement("div");e.style.fontFamily=t,e.style.fontSize=n+"px",e.style.lineHeight=r,e.innerText="Test text",document.body.appendChild(e);let i=e.offsetHeight;return document.body.removeChild(e),i/n},[e,t,n,r]);function lZ(e){let t=/*@__PURE__*/l(v).useRef(e),n=/*@__PURE__*/l(v).useRef(e);return /*@__PURE__*/l(v).useMemo(()=>{n.current=t.current,t.current=e},[e]),n.current;//in the end, return the current ref value.
+setTimeout(()=>{r.current=!1},50))},50),()=>{t=!1})},[]),{editorEnabled:t&&e._editModeEnabled,selectAll:r.current}},lX=(e,t)=>{let[n,r]=/*@__PURE__*/l(v).useReducer(e=>e+1,0),i=/*@__PURE__*/l(v).useRef(lP(t));return /*@__PURE__*/l(v).useLayoutEffect(()=>{if(// if font is already loaded after quick check, do nothing
+i.current=lP(t),i.current)return;let n=!0,o=async()=>{i.current=!1,r();let o=lv(`text ${t}`);await e.loadFont(t),/*@__PURE__*/l(nQ).Util.requestAnimFrame(o),n&&(i.current=!0,r())};return o(),()=>{n=!1}},[t]),[i.current]},lQ=({fontLoaded:e,fontFamily:t,fontSize:n,lineHeight:r})=>/*@__PURE__*/l(v).useMemo(()=>{if("number"==typeof r)return r;let e=document.createElement("div");e.style.fontFamily=t,e.style.fontSize=n+"px",e.style.lineHeight=r,e.innerText="Test text",document.body.appendChild(e);let i=e.offsetHeight;return document.body.removeChild(e),i/n},[e,t,n,r]);function lZ(e){let t=/*@__PURE__*/l(v).useRef(e),n=/*@__PURE__*/l(v).useRef(e);return /*@__PURE__*/l(v).useMemo(()=>{n.current=t.current,t.current=e},[e]),n.current;//in the end, return the current ref value.
 }let lJ=e=>/*@__PURE__*/l(v).useMemo(()=>{if(!lM(e.fill))return{fill:e.fill};let{stops:t,rotation:n}=lF(e.fill),r={x:e.a.width/2,y:e.a.height/2},i=Math.sqrt(Math.pow(r.x,2)+Math.pow(r.y,2)),o=/*@__PURE__*/l(nQ).Util.degToRad(n)-Math.PI/2,a=[];return t.forEach(({offset:e,color:t})=>{a.push(e,t)}),{fillLinearGradientStartPointX:r.x-i*Math.cos(o),fillLinearGradientStartPointY:r.y-i*Math.sin(o),fillLinearGradientColorStops:a,fillLinearGradientEndPointX:r.x+i*Math.cos(o),fillLinearGradientEndPointY:r.y+i*Math.sin(o),fill:t[1].color,fillPriority:"linear-gradient"}},[e.fill]),l0=nK(({element:e,store:t})=>{let n=/*@__PURE__*/l(v).useRef(null),r=/*@__PURE__*/l(v).useRef(null),{editorEnabled:i,selectAll:o}=lY(e),[a,s]=/*@__PURE__*/l(v).useState(!1),[u,c]=/*@__PURE__*/l(v).useState(!1),d=/*@__PURE__*/l(v).useRef(e.a.height),h=t.selectedElements.indexOf(e)>=0,{textVerticalResizeEnabled:f}=lj,g=lZ(e.fontFamily),[m,y]=/*@__PURE__*/l(v).useState([]);/*@__PURE__*/l(v).useEffect(()=>{let e=n.current?.textArr??[];JSON.stringify(e)!==JSON.stringify(m)&&y(e)}),/*@__PURE__*/l(v).useEffect(()=>{if(e.a.width)return;let t=n.current;t.width(600),e.set({width:1.4*t.getTextWidth()})},[]),/*@__PURE__*/l(v).useLayoutEffect(()=>{let t=tT(()=>{let t=n.current;lz(t,e)});return t});let[b]=lX(t,e.fontFamily),w=lR(e.text),x=()=>{let e=n.current,t=e.clone({height:void 0}),r=Math.ceil(t.fontSize()*t.lineHeight()*t.textArr.length+1// one extra pixel for fix possible rounding errors
 );return t.destroy(),r};/*@__PURE__*/l(v).useLayoutEffect(()=>{if(!b)return;let{textOverflow:r}=lj;// if no height, save it to element
 if(!e.a.height){let n=x();t.history.ignore(()=>{e.set({height:n})});return}// also do that check only while exporting
@@ -2132,7 +2132,7 @@ name:"elements-container",listening:!e.isPlaying,children:[/*#__PURE__*/(0,p.jsx
 // align="right"
 // verticalAlign="bottom"
 // listening={false}
-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")}}),/*#__PURE__*/(0,p.jsx)(a3,{name:"line-guides"})]})}),(i??!0)&&L&&/*#__PURE__*/(0,p.jsx)(M,{store:e,page:t,xPadding:m,yPadding:y})]})}),v=h("8NFma");let cE=[.1,.2,.5,1,2,5,10,20,25,50,100,200,500,1e3,2e3,5e3,1e4],cS=e=>cE.find(t=>{let n=e(t);return n>30})||1e4,cO=nK(({store:e,width:t,height:n})=>{let r=/*@__PURE__*/l(v).useRef(null);if(!e.activePage)return null;let i=e.activePage;e.bleedVisible&&i.bleed;let o=i.computedWidth*e.scale,a=i.computedHeight*e.scale,s=(t-o)/2,u=cS(t=>cl({unitVal:t,dpi:e.dpi,unit:e.unit})*e.scale),c=cl({unitVal:u,dpi:e.dpi,unit:e.unit})*e.scale,d=Math.round(o/c)+1,h=Math.round(a/c)+1,f=ux(e.selectedElements);return/*#__PURE__*/(0,p.jsxs)("div",{style:{position:"absolute",top:0,left:0,// minWidth: '100%',
+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")}}),/*#__PURE__*/(0,p.jsx)(a3,{name:"line-guides"})]})}),(i??!0)&&L&&M&&/*#__PURE__*/(0,p.jsx)(M,{store:e,page:t,xPadding:m,yPadding:y})]})}),v=h("8NFma");let cE=[.1,.2,.5,1,2,5,10,20,25,50,100,200,500,1e3,2e3,5e3,1e4],cS=e=>cE.find(t=>{let n=e(t);return n>30})||1e4,cO=nK(({store:e,width:t,height:n})=>{let r=/*@__PURE__*/l(v).useRef(null);if(!e.activePage)return null;let i=e.activePage;e.bleedVisible&&i.bleed;let o=i.computedWidth*e.scale,a=i.computedHeight*e.scale,s=(t-o)/2,u=cS(t=>cl({unitVal:t,dpi:e.dpi,unit:e.unit})*e.scale),c=cl({unitVal:u,dpi:e.dpi,unit:e.unit})*e.scale,d=Math.round(o/c)+1,h=Math.round(a/c)+1,f=ux(e.selectedElements);return/*#__PURE__*/(0,p.jsxs)("div",{style:{position:"absolute",top:0,left:0,// minWidth: '100%',
 // minHeight: '100%',
 pointerEvents:"none"},ref:r,children:[/*#__PURE__*/(0,p.jsxs)("div",{style:{width:t+"px",height:"14px",position:"sticky",fontSize:"8px",lineHeight:"14px",top:"0px",left:"0px",color:"grey",borderBottom:"1px solid grey",backgroundColor:"#e8e8e8",overflow:"hidden"},children:[[...Array(d)].map((t,n)=>/*#__PURE__*/(0,p.jsx)("div",{style:{position:"absolute",left:s+n*c+"px",borderLeft:"1px solid grey",paddingLeft:"2px",width:c+"px"},children:"px"===e.unit||u>=1?Math.round(u*n):(u*n).toFixed(1)},n)),!!e.selectedElements.length&&/*#__PURE__*/(0,p.jsx)("div",{style:{position:"absolute",left:s+f.x*e.scale+"px",height:"14px",width:f.width*e.scale,backgroundColor:"rgba(0,0,0,0.15)"}})]}),e.pages.map((t,r)=>{let i=t.computedHeight*e.scale,o=(n-i)/2;return/*#__PURE__*/(0,p.jsxs)("div",{style:{left:"0px",width:"14px",height:n+"px",position:"sticky",fontSize:"8px",lineHeight:"14px",color:"grey",borderRight:"1px solid grey",backgroundColor:"#e8e8e8",overflow:"hidden"},children:[[...Array(h)].map((t,n)=>/*#__PURE__*/(0,p.jsx)("div",{style:{position:"absolute",left:"14px",top:o+n*c-14+"px",borderLeft:"1px solid grey",paddingLeft:"2px",transform:"rotate(90deg)",transformOrigin:"left top",width:c+"px",overflow:"hidden"},children:"px"===e.unit||u>=1?Math.round(u*n):(u*n).toFixed(1)},n)),e.selectedElements[0]?.page===t&&/*#__PURE__*/(0,p.jsx)("div",{style:{position:"absolute",top:o+f.y*e.scale-14+"px",width:"14px",height:f.height*e.scale,backgroundColor:"rgba(0,0,0,0.15)"}})]},t.id)})]})}),cC=[],ck="",cP="polotno_clipboard",cT=e=>{cC=e;try{localStorage.setItem(cP,JSON.stringify(e))}catch(e){}},cA=()=>{try{let e=localStorage.getItem(cP);if(e)return JSON.parse(e)}catch(e){}return cC},cN=eD({toolbar:{duration:"Duration",opacity:"Opacity",effects:"Effects",blur:"Blur",textBackground:"Background",backgroundCornerRadius:"Corner radius",backgroundOpacity:"Opacity",backgroundPadding:"Padding",brightness:"Brightness",sepia:"Sepia",grayscale:"Grayscale",textStroke:"Text Stroke",shadow:"Shadow",border:"Border",cornerRadius:"Corner Radius",position:"Position",layering:"Layering",toForward:"To forward",up:"Up",down:"Down",toBottom:"To bottom",alignLeft:"Align left",alignCenter:"Align center",alignRight:"Align right",alignTop:"Align top",alignMiddle:"Align middle",alignBottom:"Align bottom",flip:"Flip",flipHorizontally:"Flip horizontally",flipVertically:"Flip vertically",fitToBackground:"Fit to page",removeBackground:"Remove background",removeBackgroundTitle:"Remove background from image",cancelRemoveBackground:"Cancel",confirmRemoveBackground:"Confirm",crop:"Crop",cropDone:"Done",cropCancel:"Cancel",removeClip:"Remove clip",removeMask:"Remove mask",transparency:"Transparency",lockedDescription:"Object is locked. Unlock it to allow changes from canvas.",unlockedDescription:"Object is unlocked. Lock it to prevent changes from canvas.",removeElements:"Remove elements",duplicateElements:"Duplicate elements",download:"Download",saveAsImage:"Save as image",saveAsPDF:"Save as PDF",lineHeight:"Line height",letterSpacing:"Letter spacing",offsetX:"Offset X",offsetY:"Offset Y",color:"Color",selectable:"Selectable",draggable:"Draggable",removable:"Removable",resizable:"Resizable",contentEditable:"Can change content",styleEditable:"Can change style",alwaysOnTop:"Always on top",showInExport:"Show in export",ungroupElements:"Ungroup",groupElements:"Group",lineSize:"Line size",fade:"Fade",move:"Move",zoom:"Zoom",animate:"Animate",spaceEvenly:"Space evenly",horizontalDistribution:"Horizontally",verticalDistribution:"Vertically"},workspace:{noPages:"There are no pages yet...",addPage:"Add page",removePage:"Remove page",duplicatePage:"Duplicate page",moveUp:"Move up",moveDown:"Move down"},scale:{reset:"Reset"},error:{removeBackground:"Ops! Something went wrong. Background can not be removed."},sidePanel:{templates:"Templates",searchTemplatesWithSameSize:"Show templates with the same size",searchPlaceholder:"Search...",otherFormats:"Other formats",noResults:"No results",error:"Loading is failed...",text:"Text",uploadFont:"Upload font",myFonts:"My fonts",photos:"Photos",elements:"Elements",shapes:"Shapes",lines:"Lines",upload:"Upload",uploadImage:"Upload Image",uploadTip:"Do you want to upload your own images?",background:"Background",resize:"Resize",layers:"Layers",layerTypes:{image:"Image",text:"Text",svg:"SVG",line:"Line",group:"Group"},layersTip:"Elements on your active page:",noLayers:"No elements on the page...",namePlaceholder:"Type element name...",useMagicResize:"Use magic resize",width:"Width",height:"Height",magicResizeDescription:"Magic resize will automatically resize and move all elements on the canvas",headerText:"Header",createHeader:"Create header",subHeaderText:"Sub Header",createSubHeader:"Create sub header",bodyText:"Body text",createBody:"Create body text"}}),cj=e=>e&&"object"==typeof e;tO(e=>{!function e(t,n){Object.keys(n).forEach(r=>{let i=t[r],o=n[r];cj(o)&&cj(i)?e(i,o):t[r]=o})}(cN,e)});let cR={},cI=e=>{let t=function(e,t){var n,r=t.split("."),i=e;for(n=0;n<r.length;++n){if(void 0==i[r[n]])return;i=i[r[n]]}return i}(cN,e);if(void 0!==t)return t;cR[e]||(cR[e]=!0,console.warn(`Missing translation '${e}'`));let n=e.split("."),r=n[n.length-1]||" ";// capitalize last part
 return r.charAt(0).toUpperCase()+r.slice(1)},cL=(e,t,n)=>Math.max(t,Math.min(n,e)),cM=`Polotno warning: <Workspace /> component can not automatically detect its size.
@@ -6347,7 +6347,7 @@ e.history.canUndo},setCurrentTime(t){e.currentTime=t},play({animatedElementsIds:
         font-style: ${e.fontStyle||"normal"};
         font-weight: ${e.fontWeight||"normal"};
       }
-    `}),n.innerHTML=i,document.getElementsByTagName("head")[0].appendChild(n),lN[e.fontFamily]=!0}(n):function(e){if(lA[e])return;let t=e.replace(/ /g,"+"),n=`https://fonts.googleapis.com/css?family=${t}:400,400italic,700,700italic`,r=document.createElement("link");r.type="text/css",r.href=n,r.rel="stylesheet",document.getElementsByTagName("head")[0].appendChild(r),lA[e]=!0}(t),await lT(t)}})),Ms=ud("div")`
+    `}),n.innerHTML=i,document.getElementsByTagName("head")[0].appendChild(n),lN[e.fontFamily]=!0}(n):function(e){if(lA[e])return;let t=e.replace(/ /g,"+"),n=`https://fonts.googleapis.com/css?family=${t}:400,400italic,700,700italic`,r=document.createElement("link");r.type="text/css",r.href=n,r.rel="stylesheet",document.getElementsByTagName("head")[0].appendChild(r),lA[e]=!0}(t),await lT(t)},validate(e){let t=Ml.validate(e,[{path:"",type:Ml}]),n=t.map(e=>({path:"store"+e.context.map(e=>e.path).join("."),message:e.message}));return n}})),Ms=ud("div")`
   display: flex;
   height: 100%;
   width: 100%;

package/utils/fonts.d.ts

@@ -10,7 +10,7 @@ export declare const globalFonts: mobx.IObservableArray<FontItem>;
 export declare function addGlobalFont(font: FontItem): void;
 export declare function removeGlobalFont(fontFamily: string): void;
 export declare function replaceGlobalFonts(fonts: Array<FontItem>): void;
-export declare const isFontLoaded: (fontName: string) => any;
+export declare const isFontLoaded: (fontName: string) => boolean;
 export declare function loadFont(fontName: any): Promise<void>;
 export declare function setGoogleFontsVariants(variants: string): void;
 export declare function injectGoogleFont(fontName: string): void;

package/utils/fonts.js

@@ -1 +1 @@
-"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,t,o,n){void 0===n&&(n=o);var s=Object.getOwnPropertyDescriptor(t,o);s&&!("get"in s?!t.__esModule:s.writable||s.configurable)||(s={enumerable:!0,get:function(){return t[o]}}),Object.defineProperty(e,n,s)}: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};Object.defineProperty(exports,"__esModule",{value:!0}),exports.injectCustomFont=exports.injectGoogleFont=exports.setGoogleFontsVariants=exports.loadFont=exports.isFontLoaded=exports.replaceGlobalFonts=exports.removeGlobalFont=exports.addGlobalFont=exports.globalFonts=exports.getFontsList=exports.setGoogleFonts=exports.isGoogleFontChanged=void 0;const mobx=__importStar(require("mobx")),loader_1=require("./loader");let GOOGLE_FONTS=mobx.observable(["Roboto","Amatic SC","Press Start 2P","Marck Script","Rubik Mono One"]),googleFontsChanged=mobx.observable({value:!1});function isGoogleFontChanged(){return googleFontsChanged.value}function setGoogleFonts(e){"default"!==e?(googleFontsChanged.value=!0,GOOGLE_FONTS.splice(0,GOOGLE_FONTS.length),GOOGLE_FONTS.push(...e)):googleFontsChanged.value=!1}function getFontsList(){return GOOGLE_FONTS}function addGlobalFont(e){exports.globalFonts.push(e)}function removeGlobalFont(e){const t=exports.globalFonts.findIndex((t=>t.fontFamily===e));-1!==t&&exports.globalFonts.splice(t,1)}function replaceGlobalFonts(e){exports.globalFonts.replace(e)}exports.isGoogleFontChanged=isGoogleFontChanged,exports.setGoogleFonts=setGoogleFonts,exports.getFontsList=getFontsList,exports.globalFonts=mobx.observable([]),exports.addGlobalFont=addGlobalFont,exports.removeGlobalFont=removeGlobalFont,exports.replaceGlobalFonts=replaceGlobalFonts;var TEXT_TEXT="Some test text;?#D-ПРИВЕТ!1230o9u8i7y6t5r4e3w2q1",canvas=document.createElement("canvas");function measureArial(){return measureFont("Arial")}function measureTimes(){return measureFont("Times","Times")}function measureFont(e,t="Arial"){var o=canvas.getContext("2d");return o.font=`normal 40px '${e}', ${t}`,o.measureText(TEXT_TEXT).width}const MAX_ATTEMPTS=100,loadedFonts={Arial:!0},isFontLoaded=e=>loadedFonts[e];async function loadFont(e){var t;if(loadedFonts[e])return;const o=!!(null===(t=document.fonts)||void 0===t?void 0:t.load),n=measureArial();if(o)try{await document.fonts.load(`16px '${e}'`);const t=measureFont(e);if(n!==t)return void(loadedFonts[e]=!0)}catch(e){}const s=measureTimes(),r=measureFont(e);for(let t=0;t<100;t++){const t=measureFont(e,"Arial"),o=measureFont(e,"Times");if(t!==r||t!==n||o!==s)return void(loadedFonts[e]=!0);await new Promise((e=>setTimeout(e,60)))}console.warn(`Timeout for loading font "${e}". Looks like polotno can't load it. Is it a correct font family?`),(0,loader_1.triggerLoadError)(`Timeout for loading font "${e}"`)}exports.isFontLoaded=isFontLoaded,exports.loadFont=loadFont;const registeredGoogleFonts={};let googleFontsVariants="400,400italic,700,700italic";function setGoogleFontsVariants(e){googleFontsVariants=e}function injectGoogleFont(e){if(registeredGoogleFonts[e])return;const t=`https://fonts.googleapis.com/css?family=${e.replace(/ /g,"+")}:${googleFontsVariants}`,o=document.createElement("link");o.type="text/css",o.href=t,o.rel="stylesheet",document.getElementsByTagName("head")[0].appendChild(o),registeredGoogleFonts[e]=!0}exports.setGoogleFontsVariants=setGoogleFontsVariants,exports.injectGoogleFont=injectGoogleFont;const registeredCustomFonts={};function injectCustomFont(e){const t=e.fontFamily;if(registeredCustomFonts[t])return;if(!e.url&&!e.styles)return;const o=document.createElement("style");o.type="text/css";const n=e.styles||(e.url?[{src:`url("${e.url}")`}]:[]);let s="";n.forEach((e=>{s+=`\n      @font-face {\n        font-family: '${t}';\n        src: ${e.src};\n        font-style: ${e.fontStyle||"normal"};\n        font-weight: ${e.fontWeight||"normal"};\n      }\n    `})),o.innerHTML=s,document.getElementsByTagName("head")[0].appendChild(o),registeredCustomFonts[e.fontFamily]=!0}exports.injectCustomFont=injectCustomFont;
+"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,t,o,n){void 0===n&&(n=o);var s=Object.getOwnPropertyDescriptor(t,o);s&&!("get"in s?!t.__esModule:s.writable||s.configurable)||(s={enumerable:!0,get:function(){return t[o]}}),Object.defineProperty(e,n,s)}: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};Object.defineProperty(exports,"__esModule",{value:!0}),exports.injectCustomFont=exports.injectGoogleFont=exports.setGoogleFontsVariants=exports.loadFont=exports.isFontLoaded=exports.replaceGlobalFonts=exports.removeGlobalFont=exports.addGlobalFont=exports.globalFonts=exports.getFontsList=exports.setGoogleFonts=exports.isGoogleFontChanged=void 0;const mobx=__importStar(require("mobx")),loader_1=require("./loader");let GOOGLE_FONTS=mobx.observable(["Roboto","Amatic SC","Press Start 2P","Marck Script","Rubik Mono One"]),googleFontsChanged=mobx.observable({value:!1});function isGoogleFontChanged(){return googleFontsChanged.value}function setGoogleFonts(e){"default"!==e?(googleFontsChanged.value=!0,GOOGLE_FONTS.splice(0,GOOGLE_FONTS.length),GOOGLE_FONTS.push(...e)):googleFontsChanged.value=!1}function getFontsList(){return GOOGLE_FONTS}function addGlobalFont(e){exports.globalFonts.push(e)}function removeGlobalFont(e){const t=exports.globalFonts.findIndex((t=>t.fontFamily===e));-1!==t&&exports.globalFonts.splice(t,1)}function replaceGlobalFonts(e){exports.globalFonts.replace(e)}exports.isGoogleFontChanged=isGoogleFontChanged,exports.setGoogleFonts=setGoogleFonts,exports.getFontsList=getFontsList,exports.globalFonts=mobx.observable([]),exports.addGlobalFont=addGlobalFont,exports.removeGlobalFont=removeGlobalFont,exports.replaceGlobalFonts=replaceGlobalFonts;var TEXT_TEXT="Some test text;?#D-ПРИВЕТ!1230o9u8i7y6t5r4e3w2q1",canvas=document.createElement("canvas");function measureArial(){return measureFont("Arial")}function measureTimes(){return measureFont("Times","Times")}function measureFont(e,t="Arial"){var o=canvas.getContext("2d");return o.font=`normal 40px '${e}', ${t}`,o.measureText(TEXT_TEXT).width}const MAX_ATTEMPTS=100,loadedFonts={Arial:!0},isFontLoaded=e=>!!loadedFonts[e];async function loadFont(e){var t;if(loadedFonts[e])return;const o=!!(null===(t=document.fonts)||void 0===t?void 0:t.load),n=measureArial();if(o)try{await document.fonts.load(`16px '${e}'`);const t=measureFont(e);if(n!==t)return void(loadedFonts[e]=!0)}catch(e){}const s=measureTimes(),r=measureFont(e);for(let t=0;t<100;t++){const t=measureFont(e,"Arial"),o=measureFont(e,"Times");if(t!==r||t!==n||o!==s)return void(loadedFonts[e]=!0);await new Promise((e=>setTimeout(e,60)))}console.warn(`Timeout for loading font "${e}". Looks like polotno can't load it. Is it a correct font family?`),(0,loader_1.triggerLoadError)(`Timeout for loading font "${e}"`)}exports.isFontLoaded=isFontLoaded,exports.loadFont=loadFont;const registeredGoogleFonts={};let googleFontsVariants="400,400italic,700,700italic";function setGoogleFontsVariants(e){googleFontsVariants=e}function injectGoogleFont(e){if(registeredGoogleFonts[e])return;const t=`https://fonts.googleapis.com/css?family=${e.replace(/ /g,"+")}:${googleFontsVariants}`,o=document.createElement("link");o.type="text/css",o.href=t,o.rel="stylesheet",document.getElementsByTagName("head")[0].appendChild(o),registeredGoogleFonts[e]=!0}exports.setGoogleFontsVariants=setGoogleFontsVariants,exports.injectGoogleFont=injectGoogleFont;const registeredCustomFonts={};function injectCustomFont(e){const t=e.fontFamily;if(registeredCustomFonts[t])return;if(!e.url&&!e.styles)return;const o=document.createElement("style");o.type="text/css";const n=e.styles||(e.url?[{src:`url("${e.url}")`}]:[]);let s="";n.forEach((e=>{s+=`\n      @font-face {\n        font-family: '${t}';\n        src: ${e.src};\n        font-style: ${e.fontStyle||"normal"};\n        font-weight: ${e.fontWeight||"normal"};\n      }\n    `})),o.innerHTML=s,document.getElementsByTagName("head")[0].appendChild(o),registeredCustomFonts[e.fontFamily]=!0}exports.injectCustomFont=injectCustomFont;