polotno 2.29.5 → 2.30.0

package/canvas/drawing-layer.d.ts

@@ -4,8 +4,14 @@ import { PageType } from '../model/page-model.js';
 type DrawingLayerProps = {
     store: StoreType;
     page: PageType;
+    width: number;
+    height: number;
+    scale: number;
+    xPadding: number;
+    yPadding: number;
+    bleed: number;
 };
-export declare const DrawingLayer: (({ store, page }: DrawingLayerProps) => React.JSX.Element) & {
+export declare const DrawingLayer: (({ store, page, width, height, scale, xPadding, yPadding, bleed, }: DrawingLayerProps) => React.JSX.Element) & {
     displayName: string;
 };
 export {};

package/canvas/drawing-layer.js

@@ -1 +1 @@
-import t from"react";import{observer as e}from"mobx-react-lite";import{Group as o,Line as r,Rect as i}from"react-konva";import{pathToSVG as n}from"../utils/path-to-svg.js";export const DrawingLayer=e(({store:e,page:s})=>{const[a,c]=t.useState(!1),[l,h]=t.useState([]),u=t.useRef(null),g="draw"===e.editorMode,{strokeWidth:p,strokeColor:y,opacity:d,brushType:m}=e.drawingOptions,f="highlighter"===m?.5:d,w=t.useCallback(t=>{if(!g){return}c(!0);const e=t.target.getRelativePointerPosition();e&&h([{x:e.x,y:e.y}])},[g]),$=t.useCallback(t=>{if(!g||!a){return}const e=t.target.getRelativePointerPosition();e&&h(t=>[...t,{x:e.x,y:e.y}])},[g,a]),k=t.useCallback(()=>{if(g&&a){if(c(!1),l.length>1){try{const t=n(l,{strokeColor:y,strokeWidth:p,opacity:f,smooth:!0});e.history.transaction(()=>{s.addElement({type:"svg",x:t.x,y:t.y,width:t.width,height:t.height,src:t.src})})}catch(t){console.error("Error creating path SVG:",t)}}h([])}},[g,a,l,y,p,f,s,e.history]),x=t.useMemo(()=>l.flatMap(t=>[t.x,t.y]),[l]);return t.useEffect(()=>{if(g&&u.current){const t=u.current.getStage();if(!t){return}const e=Math.min(2*p,32),o=e/2,r=e/2,i=`data:image/svg+xml;base64,${btoa(`<svg xmlns="http://www.w3.org/2000/svg" width="${e}" height="${e}" viewBox="0 0 ${e} ${e}">\n          <circle cx="${r}" cy="${r}" r="${o-1}" fill="${y}" opacity="${f}" stroke="white" stroke-width="1"/>\n          <circle cx="${r}" cy="${r}" r="${o-1}" fill="none" stroke="black" stroke-width="1" opacity="0.3"/>\n        </svg>`)}`;return t.container().style.cursor=`url("${i}") ${r} ${r}, crosshair`,()=>{t.container()&&(t.container().style.cursor="")}}},[g,y,p,f]),g?t.createElement(o,{ref:u,listening:g},t.createElement(i,{x:0,y:0,width:s.computedWidth,height:s.computedHeight,fill:"transparent",onMouseDown:w,onMouseMove:$,onMouseUp:k,onTouchStart:w,onTouchMove:$,onTouchEnd:k}),l.length>0&&t.createElement(r,{points:x,stroke:y,strokeWidth:p,lineCap:"round",lineJoin:"round",opacity:f,tension:.5,listening:!1})):null});
+import e from"react";import{observer as t}from"mobx-react-lite";import{Group as r,Line as o,Rect as n}from"react-konva";import{pathToSVG as i}from"../utils/path-to-svg.js";export const DrawingLayer=t(({store:t,page:s,width:c,height:a,scale:l,xPadding:h,yPadding:u,bleed:g})=>{const[y,d]=e.useState(!1),[p,f]=e.useState([]),m=e.useRef(null),x="draw"===t.tool,{strokeWidth:k,strokeColor:w,opacity:$,brushType:b}=t.toolOptions,v="highlighter"===b?.5:$,E=e.useCallback(e=>{if(!x){return}if(d(!0),e.cancelBubble=!0,!e.target.getStage()){return}const t=m.current.getRelativePointerPosition();t&&f([{x:t.x,y:t.y}])},[x,l,h,u,g]),S=e.useCallback(e=>{if(!x||!y){return}if(e.cancelBubble=!0,!e.target.getStage()){return}const t=m.current.getRelativePointerPosition();t&&f(e=>[...e,{x:t.x,y:t.y}])},[x,y,l,h,u,g]),M=e.useCallback(()=>{if(x&&y){if(d(!1),p.length>1){try{const e=i(p,{strokeColor:w,strokeWidth:k,opacity:v,smooth:!0}),r=t.selectedElementsIds.slice();t.history.transaction(()=>{s.addElement({type:"svg",x:e.x,y:e.y,width:e.width,height:e.height,src:e.src},{skipSelect:!0})}),t.selectElements(r)}catch(e){console.error("Error creating path SVG:",e)}}f([])}},[x,y,p,w,k,v,s,t.history,t]),C=e.useMemo(()=>p.flatMap(e=>[e.x,e.y]),[p]);return e.useEffect(()=>{if(x&&m.current){const e=m.current.getStage();if(!e){return}const t=k*l;if(t>100||t<4){e.container().style.cursor="crosshair"}else{const r=t/2,o=t/2,n=`data:image/svg+xml;base64,${btoa(`<svg xmlns="http://www.w3.org/2000/svg" width="${t}" height="${t}" viewBox="0 0 ${t} ${t}">\n          <circle cx="${o}" cy="${o}" r="${r-1}" fill="${w}" opacity="${v}" stroke="white" stroke-width="1"/>\n          <circle cx="${o}" cy="${o}" r="${r-1}" fill="none" stroke="black" stroke-width="1" opacity="0.3"/>\n        </svg>`)}`;e.container().style.cursor=`url("${n}") ${o} ${o}, crosshair`}return()=>{e.container()&&(e.container().style.cursor="")}}},[x,w,k,v,l]),x?e.createElement(r,{ref:m,listening:x,x:h+g*l,y:u+g*l,scaleX:l,scaleY:l},e.createElement(n,{x:-(h+g*l)/l,y:-(u+g*l)/l,width:c/l,height:a/l,fill:"transparent",onMouseDown:E,onMouseMove:S,onMouseUp:M,onTouchStart:E,onTouchMove:S,onTouchEnd:M}),p.length>0&&e.createElement(o,{points:C,stroke:w,strokeWidth:k,lineCap:"round",lineJoin:"round",opacity:v,tension:.5,listening:!1})):null});

package/canvas/page-controls.js

@@ -1 +1 @@
-import e from"react";import{observer as a}from"mobx-react-lite";import{Button as t,Tooltip as n}from"@blueprintjs/core";import{ChevronUp as l,ChevronDown as o,Duplicate as i,Trash as c,Insert as r}from"@blueprintjs/icons";import{t as m}from"../utils/l10n.js";export const PageControls=a(({store:a,page:d,xPadding:s,yPadding:p})=>{const g=a.pages.length>1,u=a.pages.indexOf(d);return e.createElement("div",{style:{position:"absolute",top:p-40+"px",right:s+"px"}},g&&e.createElement(n,{content:m("workspace.moveUp"),disabled:0===u},e.createElement(t,{icon:e.createElement(l,null),minimal:!0,disabled:0===u,onClick:()=>{d.setZIndex(u-1)},"aria-label":m("workspace.moveUp")})),g&&e.createElement(n,{content:m("workspace.moveDown"),disabled:u===a.pages.length-1},e.createElement(t,{icon:e.createElement(o,null),"aria-label":m("workspace.moveDown"),minimal:!0,disabled:u===a.pages.length-1,onClick:()=>{const e=a.pages.indexOf(d);d.setZIndex(e+1)}})),e.createElement(n,{content:m("workspace.duplicatePage")},e.createElement(t,{icon:e.createElement(i,null),minimal:!0,"aria-label":m("workspace.duplicatePage"),onClick:()=>{d.clone()}})),g&&e.createElement(n,{content:m("workspace.removePage")},e.createElement(t,{icon:e.createElement(c,null),"aria-label":m("workspace.removePage"),minimal:!0,onClick:()=>{a.deletePages([d.id])}})),e.createElement(n,{content:m("workspace.addPage")},e.createElement(t,{icon:e.createElement(r,null),minimal:!0,"aria-label":m("workspace.addPage"),onClick:()=>{var e,t,n;const l=a.addPage({bleed:(null===(e=a.activePage)||void 0===e?void 0:e.bleed)||0,width:(null===(t=a.activePage)||void 0===t?void 0:t.width)||"auto",height:(null===(n=a.activePage)||void 0===n?void 0:n.height)||"auto"}),o=a.pages.indexOf(d);l.setZIndex(o+1)}})))});
+import e from"react";import{observer as t}from"mobx-react-lite";import{Button as a,Tooltip as l}from"@blueprintjs/core";import{ChevronUp as n,ChevronDown as o,Duplicate as i,Trash as c,Insert as r}from"@blueprintjs/icons";import{t as m}from"../utils/l10n.js";export const PageControls=t(({store:t,page:d,xPadding:s,yPadding:p})=>{const g=t.pages.length>1,u=t.pages.indexOf(d);return"selection"!==t.tool?null:e.createElement("div",{style:{position:"absolute",top:p-40+"px",right:s+"px"}},g&&e.createElement(l,{content:m("workspace.moveUp"),disabled:0===u},e.createElement(a,{icon:e.createElement(n,null),minimal:!0,disabled:0===u,onClick:()=>{d.setZIndex(u-1)},"aria-label":m("workspace.moveUp")})),g&&e.createElement(l,{content:m("workspace.moveDown"),disabled:u===t.pages.length-1},e.createElement(a,{icon:e.createElement(o,null),"aria-label":m("workspace.moveDown"),minimal:!0,disabled:u===t.pages.length-1,onClick:()=>{const e=t.pages.indexOf(d);d.setZIndex(e+1)}})),e.createElement(l,{content:m("workspace.duplicatePage")},e.createElement(a,{icon:e.createElement(i,null),minimal:!0,"aria-label":m("workspace.duplicatePage"),onClick:()=>{d.clone()}})),g&&e.createElement(l,{content:m("workspace.removePage")},e.createElement(a,{icon:e.createElement(c,null),"aria-label":m("workspace.removePage"),minimal:!0,onClick:()=>{t.deletePages([d.id])}})),e.createElement(l,{content:m("workspace.addPage")},e.createElement(a,{icon:e.createElement(r,null),minimal:!0,"aria-label":m("workspace.addPage"),onClick:()=>{var e,a,l;const n=t.addPage({bleed:(null===(e=t.activePage)||void 0===e?void 0:e.bleed)||0,width:(null===(a=t.activePage)||void 0===a?void 0:a.width)||"auto",height:(null===(l=t.activePage)||void 0===l?void 0:l.height)||"auto"}),o=t.pages.indexOf(d);n.setZIndex(o+1)}})))});

package/canvas/page.js

@@ -1 +1 @@
-var e=this&&this.__rest||function(e,t){var n={};for(var i in e){Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[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])&&(n[i[o]]=e[i[o]])}}return n};import t from"react";import{observer as n,useLocalObservable as i}from"mobx-react-lite";import{action as o,runInAction as r}from"mobx";import{Group as l,Image as a,Label as s,Layer as c,Line as d,Rect as m,Stage as h,Tag as u,Text as g,Transformer as p}from"react-konva";import f from"use-image";import b from"konva";import x from"./element.js";import{ensureDragOrder as v,useSnap as E}from"./use-transformer-snap.js";import{useImageLoader as y}from"./image-element.js";import{getCrop as w}from"../utils/crop.js";import{___ as k,isCreditVisible as Y}from"../utils/validate-key.js";import{getClientRect as S,getTotalClientRect as X}from"../utils/math.js";import{pxToUnitRounded as C,pxToUnitString as A}from"../utils/unit.js";import{flags as O}from"../utils/flags.js";import{isTouchDevice as P}from"../utils/screen.js";import{useColor as L}from"./use-color.js";import{isGradient as R}from"../utils/gradient.js";import{Html as M}from"react-konva-utils";const j=b.DD._drag;window.removeEventListener("mousemove",j),b.DD._drag=function(e){r(()=>{j.call(this,e)})},window.addEventListener("mousemove",b.DD._drag);const D=new b.Group,I=20;D.add(new b.Rect({width:I,height:I,fill:"white"})),D.add(new b.Path({scaleX:I/24,scaleY:I/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 T=D.toCanvas({pixelRatio:2,width:I,height:I}),W={enabledAnchors:["top-left","top-center","top-right","middle-left","bottom-left","bottom-right","bottom-center","middle-right"],borderEnabled:!0,rotateEnabled:!0,rotationSnaps:[0,45,90,135,180,225,270,315],ignoreStroke:!0,flipEnabled:!1,anchorStrokeWidth:2,borderStrokeWidth:2,rotateAnchorOffset:30,anchorStyleFunc:e=>{if(e.hasName("rotater")){const t=20;e.setAttrs({width:t,height:t,cornerRadius:t/2,offsetX:t/2,offsetY:t/2,fillPatternImage:T,fillPatternScaleX:t/I/2,fillPatternScaleY:t/I/2,fillPriority:"pattern",fillPatternRepeat:"no-repeat"})}}};export const setTransformerStyle=e=>{Object.assign(W,e)};const B={text:{enabledAnchors:["top-left","top-right","middle-left","bottom-left","bottom-right","middle-right"]},svg:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]},gif:{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"]}};export function registerTransformerAttrs(e,t){B[e]=B[e]||t,Object.assign(B[e],t)}const F=e=>t.createElement(m,Object.assign({},e,{preventDefault:!1})),G=n=>{var{url:i}=n,o=e(n,["url"]);const[r,l]=f(i,"anonymous"),s=r?w(r,{width:o.width,height:o.height},"center-middle"):{};return y(l,i,"page background"),t.createElement(a,Object.assign({image:r},o,s))},_=e=>{const n=L({fill:e.fill,a:{width:e.width,height:e.height}});return t.createElement(m,Object.assign({},e,n))},z=n=>{const{background:i,scale:o,borderColor:r}=n,l=e(n,["background","scale","borderColor"]),a=t.useMemo(()=>!!b.Util.colorToRGBA(i)||R(i),[i]),s=t.useMemo(()=>{const e=document.createElement("canvas"),t=30;e.width=60,e.height=60;const n=e.getContext("2d");return n&&(n.fillStyle="black",n.fillRect(t,0,t,t),n.fillRect(0,t,t,t)),e},[]);return t.createElement(t.Fragment,null,t.createElement(m,Object.assign({fillPatternImage:s},l,{opacity:.1,hideInExport:!0})),a?t.createElement(_,Object.assign({fill:i},l)):t.createElement(G,Object.assign({url:i},l)))},N=n(({selection:e,fill:n="rgba(0, 161, 255, 0.3)",stroke:i="rgb(0, 161, 255)",strokeWidth:o=1})=>e.visible?t.createElement(m,{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:n,stroke:i,strokeWidth:o}):null),H=n(({x:e,y:n,width:i,height:o,rotation:r,anchor:l,store:a,tagFill:c,textFill:d})=>{const m=S({x:e,y:n,width:i,height:o,rotation:b.Util.radToDeg(r)});if(void 0===l){return null}const h=(o/2+70)*Math.cos(r-Math.PI/2),p=(o/2+70)*Math.sin(r-Math.PI/2),f=C({unit:a.unit,dpi:a.dpi,px:i/a.scale,precious:"px"===a.unit?0:1})+" x "+C({unit:a.unit,dpi:a.dpi,px:o/a.scale,precious:"px"===a.unit?0:1})+("px"===a.unit?"":" "+a.unit);return t.createElement(t.Fragment,null,t.createElement(s,{x:(m.minX+m.maxX)/2+h,y:(m.minY+m.maxY)/2+p,offsetX:14,offsetY:14,visible:"rotater"===l},t.createElement(u,{cornerRadius:5,fill:c||"rgb(0, 161, 255)"}),t.createElement(g,{align:"center",verticalAlign:"middle",fill:d||"white",padding:8,text:Math.round(b.Util.radToDeg(r)).toString()+"°"})),t.createElement(s,{x:(m.minX+m.maxX)/2,y:m.maxY+20,visible:"rotater"!==l},t.createElement(u,{cornerRadius:5,fill:c||"rgb(0, 161, 255)",pointerDirection:"up",pointerHeight:0,pointerWidth:0}),t.createElement(g,{align:"center",verticalAlign:"middle",fill:d||"white",padding:8,text:f})))}),V=n(({elements:e,store:n})=>{const i=e.filter(e=>e.alwaysOnTop),o=e.filter(e=>!e.alwaysOnTop).concat(i);return t.createElement(t.Fragment,null,o.map(e=>t.createElement(x,{key:e.id,store:n,element:e,onClick:()=>{console.warn("Polotno warning: onClick callback is deprecated. Just stop using it. Polotno will do selection automatically.")}})))});export const useContextMenu=({store:e})=>{const[n,i]=t.useState(!1),[o,r]=t.useState({x:0,y:0}),l=t.useCallback(e=>{i(!0),r(e)},[]);return{open:l,close:t.useCallback(()=>{i(!1)},[]),props:{isOpen:n,offset:o,setIsOpen:i}}};let Z=null;export const registerNextDomDrop=e=>{Z=e};const K=atob("UG9sb3RubyBmcmVlIGxpY2Vuc2UgbGltaXRhdGlvbiBleGNlZWRlZCAtIFBsZWFzZSB1cGdyYWRlIHlvdXIgYWNjb3VudC4="),U=atob("cmVk"),J=atob("djAuOS4y"),$=e=>t.createElement(t.Fragment,null,t.createElement(s,{fill:U,height:200},t.createElement(u,{fill:U}),t.createElement(g,Object.assign({},e,{fill:"white",text:K,height:void 0,padding:10,fontSize:20}))));export default n(({store:e,page:n,width:r,height:a,pageControlsEnabled:f,backColor:x,pageBorderColor:y,activePageBorderColor:w,components:C,bleedColor:L,altCloneEnabled:R,viewportSize:j,selectionRectFill:D,selectionRectStroke:I,selectionRectStrokeWidth:T,snapGuideStroke:G,snapGuideStrokeWidth:_,snapGuideDash:K,transformLabelFill:U,transformLabelTextFill:q,distanceGuideStroke:Q,distanceLabelFill:ee,distanceLabelTextFill:te})=>{const ne=e.bleedVisible?n.bleed:0,ie=n.computedWidth+2*ne,oe=n.computedHeight+2*ne,re=(r-ie*e.scale)/2,le=(a-oe*e.scale)/2,ae=t.useRef(null),se=t.useRef(null),ce=t.useRef(null),de=null==f||f,[me,he]=t.useState(null),[ue,ge]=t.useState({}),pe=useContextMenu({store:e}),fe=e.selectedElements.find(e=>e._cropModeEnabled),be=e.selectedElements.find(e=>e.curveEnabled),xe=e.selectedShapes.filter(e=>!e.resizable).length>0,ve=e.selectedShapes.filter(e=>!e.draggable).length>0,Ee=e.selectedElements.filter(e=>!e.visible).length>0;t.useLayoutEffect(()=>{var t,n,i;if(!ae.current){return}const o=ae.current.getStage(),r=e.selectedShapes.map(e=>e._cropModeEnabled?null:o.findOne("#"+e.id)).filter(e=>e),l=1===e.selectedElements.length,a=l&&(null===(t=e.selectedElements[0])||void 0===t?void 0:t.type)||"many";B[a]?(ae.current.setAttrs(Object.assign(Object.assign({},W),B[a])),"svg"!==a&&"image"!==a&&"gif"!==a||e.selectedElements[0].keepRatio||ae.current.setAttrs({enabledAnchors:W.enabledAnchors}),"text"===a&&O.textVerticalResizeEnabled&&ae.current.setAttrs({enabledAnchors:null===(n=B.text.enabledAnchors)||void 0===n?void 0:n.concat(["bottom-center"])}),"text"===a&&l&&e.selectedElements[0].curveEnabled&&ae.current.setAttrs({enabledAnchors:B.many.enabledAnchors})):ae.current.setAttrs(W),xe&&ae.current.enabledAnchors([]),ve&&ae.current.rotateEnabled(!1),r.find(e=>null==e?void 0:e.isDragging())&&r.forEach(e=>{e.isDragging()||null==e||e.startDrag()}),ae.current.nodes(r),v(),null===(i=ae.current.getLayer())||void 0===i||i.batchDraw()},[e.selectedShapes,fe,xe,Ee,ve,be]);const ye=i(()=>({visible:!1,x1:0,y1:0,x2:0,y2:0})),we=t.useRef(!1),ke=P(),Ye=o(e=>{var t,n,i,o;if(ke){return}we.current=!1;const r=e.target.findAncestor(".elements-container"),l=e.target.findAncestor("Transformer"),a=e.target.findAncestor(".page-abs-container");if(r||l||a){return}const s=null===(t=e.target.getStage())||void 0===t?void 0:t.getPointerPosition();s.x-=null===(n=e.target.getStage())||void 0===n?void 0:n.x(),s.y-=null===(i=e.target.getStage())||void 0===i?void 0:i.y(),s&&(ye.visible=!0,ye.x1=s.x,ye.y1=s.y,ye.x2=s.x,ye.y2=s.y,(null===(o=e.target.getStage())||void 0===o?void 0:o.getPointersPositions().length)>=2&&(ye.visible=!1))});(({stageRef:e,containerRef:n,viewportSize:i})=>{t.useEffect(()=>{var t;const i=null===(t=n.current)||void 0===t?void 0:t.closest(".polotno-workspace-inner");function o(){var t;if(!e.current){return}const o=null===(t=n.current)||void 0===t?void 0:t.getBoundingClientRect(),r=null==i?void 0:i.getBoundingClientRect(),l=Math.max(0,r.left-o.left-100),a=Math.max(0,r.top-o.top-100);e.current.position({x:-l,y:-a}),e.current.container().style.transform=`translate(${l}px, ${a}px)`}return o(),i.addEventListener("scroll",o),()=>{i.removeEventListener("scroll",o)}},[i.width,i.height])})({stageRef:se,containerRef:ce,viewportSize:j}),t.useEffect(()=>{const t=o(e=>{var t,n,i,o;if(!ye.visible){return}null===(t=se.current)||void 0===t||t.setPointersPositions(e);let r=null===(n=se.current)||void 0===n?void 0:n.getPointerPosition();r?(r.x-=null===(i=se.current)||void 0===i?void 0:i.x(),r.y-=null===(o=se.current)||void 0===o?void 0:o.y()):r={x:ye.x2,y:ye.y2},ye.x2=r.x,ye.y2=r.y}),n=o(()=>{if(!ye.visible){return}if(!se.current){return}const t=se.current.findOne(".selection"),n=t?t.getClientRect():{width:0,height:0,x:0,y:0};if(n.width&&n.height){const t=[];se.current.find(".element").forEach(i=>{const o=i.getClientRect(),r=e.getElementById(i.id()),l=null==r?void 0:r.draggable,a=null==r?void 0:r.selectable;b.Util.haveIntersection(n,o)&&l&&a&&t.push(r.top.id)});const i=[...new Set(t)];e.selectElements(i)}ye.visible=!1,we.current=!0});return window.addEventListener("mousemove",t),window.addEventListener("touchmove",t),window.addEventListener("mouseup",n),window.addEventListener("touchend",n),()=>{window.removeEventListener("mousemove",t),window.removeEventListener("touchmove",t),window.removeEventListener("mouseup",n),window.removeEventListener("touchend",n)}},[]);const Se=t.useRef(!1);t.useEffect(()=>{var e;let t;const n=null===(e=ce.current)||void 0===e?void 0:e.closest(".polotno-workspace-inner"),i=()=>{Se.current=!0,clearTimeout(t),t=setTimeout(()=>{Se.current=!1},300)};return n.addEventListener("scroll",i),()=>{clearTimeout(t),n.removeEventListener("scroll",i)}},[]);const Xe=t=>{if(e.activePage!==n&&n.select(),Se.current){return}if(we.current){return}const i=t.evt.ctrlKey||t.evt.metaKey||t.evt.shiftKey,o=t.target.findAncestor(".elements-container"),r=t.target.findAncestor(".page-abs-container"),l=t.target.findAncestor("Transformer");if(!(i||o||l||r||ye.visible)){return void e.selectElements([])}const a=t.target.findAncestor(".element",!0),s=e.getElementById(null==a?void 0:a.id()),c=null==s?void 0:s.top,d=null==c?void 0:c.id,m=e.selectedElementsIds.indexOf(d)>=0,h=t.target.findAncestor(".page-container",!0);d&&i&&!m?e.selectElements(e.selectedElementsIds.concat([d])):d&&i&&m?e.selectElements(e.selectedElementsIds.filter(e=>e!==d)):!d||i||m?h?e.selectPages([n.id]):e.selectPages([]):e.selectElements([d])};E(ae,e,{stroke:G,strokeWidth:_,dash:K});const Ce=e.activePage===n,Ae=e._selectedPagesIds.includes(n.id),Oe=null==C?void 0:C.PageControls,Pe=null==C?void 0:C.Tooltip,Le=null==C?void 0:C.ContextMenu,Re=1/e.scale,Me=0/e.scale;return t.createElement("div",{ref:ce,onDragOver:e=>e.preventDefault(),onDrop:t=>{if(t.preventDefault(),!se.current){return}se.current.setPointersPositions(t);const i=se.current.findOne(".elements-container").getRelativePointerPosition(),o=se.current.getPointerPosition(),r=se.current.getAllIntersections(o).map(e=>e.findAncestor(".element",!0)).filter(Boolean),l=[...new Set(r.reverse())].map(t=>e.getElementById(t.id())),a=l[0];Z&&(Z(i,a,{elements:l,page:n}),Z=null)},style:{position:"relative",width:r+"px",height:a+"px",overflow:"hidden"},className:"polotno-page-container"+(Ce?" active-page":"")},t.createElement(h,{ref:se,width:Math.min(r,j.width+200),height:Math.min(j.height+200,a),onClick:Xe,onTap:Xe,onContextMenu:t=>{t.evt.preventDefault();const n=t.target.findAncestor(".element",!0),i=e.getElementById(null==n?void 0:n.id()),o=null==i?void 0:i.top,r=null==o?void 0:o.id;r?e.selectedElementsIds.indexOf(r)>=0||e.selectElements([r]):e.selectElements([]),pe.open({x:t.evt.clientX,y:t.evt.clientY})},onMouseDown:Ye,onMouseMove:t=>{if(!t.evt.altKey&&me){return void he(null)}if(!t.evt.altKey){return}const i=t.target.findAncestor(".element",!0),o=null==i?void 0:i.id();if(!e.selectedElements[0]){return}if(e.selectedElementsIds.includes(o)){return}const r=X(e.selectedShapes),l=o?e.getElementById(o):{x:0,y:0,width:n.computedWidth,height:n.computedHeight,rotation:0},a=S(l),s=[];r.minX>a.maxX&&s.push({distance:r.minX-a.maxX,box1:r,box2:a,points:[{x:r.minX,y:r.minY+r.height/2},{x:a.maxX,y:r.minY+r.height/2},{x:a.maxX,y:a.minY+a.height/2}]}),r.maxX<a.minX&&s.push({distance:a.minX-r.maxX,box1:r,box2:a,points:[{x:r.maxX,y:r.minY+r.height/2},{x:a.minX,y:r.minY+r.height/2},{x:a.minX,y:a.minY+a.height/2}]}),r.minY>a.maxY&&s.push({box1:r,box2:a,distance:r.minY-a.maxY,points:[{x:r.minX+r.width/2,y:r.minY},{x:r.minX+r.width/2,y:a.maxY},{x:a.minX+a.width/2,y:a.maxY}]}),r.maxY<a.minY&&s.push({box1:r,box2:a,distance:a.minY-r.maxY,points:[{x:r.minX+r.width/2,y:r.maxY},{x:r.minX+r.width/2,y:a.minY},{x:a.minX+a.width/2,y:a.minY}]}),r.minX>=a.minX&&r.maxX<=a.maxX&&r.minY>=a.minY&&r.maxY<=a.maxY&&(s.push({distance:r.minX-a.minX,box1:r,box2:a,points:[{x:r.minX,y:r.minY+r.height/2},{x:a.minX,y:r.minY+r.height/2},{x:a.minX,y:a.minY+a.height/2}]}),s.push({distance:a.maxX-r.maxX,box1:r,box2:a,points:[{x:r.maxX,y:r.minY+r.height/2},{x:a.maxX,y:r.minY+r.height/2},{x:a.maxX,y:a.minY+a.height/2}]}),s.push({box1:r,box2:a,distance:r.minY-a.minY,points:[{x:r.minX+r.width/2,y:r.minY},{x:r.minX+r.width/2,y:a.minY},{x:a.minX+a.width/2,y:a.minY}]}),s.push({box1:r,box2:a,distance:a.maxY-r.maxY,points:[{x:r.minX+r.width/2,y:r.maxY},{x:r.minX+r.width/2,y:a.maxY},{x:a.minX+a.width/2,y:a.maxY}]})),JSON.stringify(me)!==JSON.stringify(s)&&he(s)},onDragStart:t=>{var n;const i=t.target.findAncestor(".element",!0);if(i){const o=e.getElementById(null==i?void 0:i.id()),r=null==o?void 0:o.top,l=null==r?void 0:r.id;!(e.selectedElementsIds.indexOf(l)>=0)&&l&&(e.selectElements([l]),t.target.stopDrag(),t.target.startDrag(t),null===(n=ae.current)||void 0===n||n.startDrag(t))}me&&he(null)},pageId:n.id,style:{position:"absolute",overflow:"hidden",top:0,left:0}},t.createElement(c,null,t.createElement(F,{width:r,height:a,fill:x}),t.createElement(l,{x:re,y:le,scaleX:e.scale,scaleY:e.scale,name:"page-container"},t.createElement(l,{name:"page-container-2"},t.createElement(l,{name:"page-background-group",x:ne,y:ne},t.createElement(z,{x:-n.bleed,y:-n.bleed,width:n.computedWidth+2*n.bleed,height:n.computedHeight+2*n.bleed,background:n.background,name:"page-background",preventDefault:!1,scale:e.scale})),t.createElement(l,{x:ne,y:ne,name:"elements-container",listening:!e.isPlaying},t.createElement(m,{name:"elements-area",width:n.computedWidth,height:n.computedHeight,listening:!1}),t.createElement(V,{elements:n.children,store:e})),t.createElement(m,{stroke:L,name:"bleed",strokeWidth:n.bleed,x:n.bleed/2,y:n.bleed/2,width:n.computedWidth+n.bleed,height:n.computedHeight+n.bleed,listening:!1,visible:n.bleed>0&&e.bleedVisible,hideInExport:!0}),k()===J&&t.createElement($,{name:"hit-detection",x:-Re/2-Me,y:-Re/2-Me,width:ie+Re+2*Me,height:oe+Re+2*Me}))),t.createElement(d,{name:"workspace-background",points:[0,0,r,0,r,a,0,a,0,0,re,le,re,a-le,r-re,a-le,r-re,le,re,le],listening:!1,closed:!0,fill:x}),t.createElement(l,{x:re,y:le,scaleX:e.scale,scaleY:e.scale},t.createElement(m,{name:"page-highlight",hideInExport:!0,x:-Re/2-Me,y:-Re/2-Me,width:ie+Re+2*Me,height:oe+Re+2*Me,stroke:Ae?w:y,strokeWidth:2,listening:!1,strokeScaleEnabled:!1})),t.createElement(l,{x:re+ne*e.scale,y:le+ne*e.scale,scaleX:e.scale,scaleY:e.scale,name:"page-abs-container"},t.createElement(p,{ref:ae,onDragStart:t=>{var i;(null===(i=t.evt)||void 0===i?void 0:i.altKey)&&R&&e.selectedElements.forEach(e=>{const t=e.clone({},{skipSelect:!0}),i=n.children.indexOf(e);n.setElementZIndex(t.id,i)}),e.history.startTransaction()},onDragEnd:()=>{e.history.endTransaction()},onTransformStart:()=>{e.history.startTransaction(),he(null)},boundBoxFunc:(e,t)=>{const n=Math.abs(t.width)<1||Math.abs(t.height)<1,i=Math.abs(e.width)<1||Math.abs(e.height)<1;return n&&!i?e:t},onTransform:e=>{var t,n;const i=ae.current.nodes(),o=i[i.length-1];if(e.target!==o){return}const r=null===(t=ae.current)||void 0===t?void 0:t.__getNodeRect(),l=null===(n=ae.current)||void 0===n?void 0:n.getActiveAnchor();ge({anchor:l,x:r.x,y:r.y,rotation:r.rotation,width:r.width,height:r.height})},onTransformEnd:t=>{ge({}),e.history.endTransaction()},visible:!e.isPlaying}),me&&me.map(({points:n,distance:i,box1:o,box2:r},a)=>t.createElement(l,{name:"distances-container",hideInExport:!0,key:a,listening:!1},t.createElement(m,Object.assign({},o,{stroke:Q,strokeWidth:1,strokeScaleEnabled:!1})),t.createElement(m,Object.assign({},r,{stroke:Q,strokeWidth:1,strokeScaleEnabled:!1})),t.createElement(d,{points:[n[0].x,n[0].y,n[1].x,n[1].y],stroke:Q,strokeWidth:1,strokeScaleEnabled:!1}),t.createElement(d,{points:[n[1].x,n[1].y,n[2].x,n[2].y],stroke:Q,strokeWidth:1,strokeScaleEnabled:!1}),t.createElement(s,{x:(n[0].x+n[1].x)/2,y:(n[0].y+n[1].y)/2,offsetY:-10,scaleX:1/e.scale,scaleY:1/e.scale},t.createElement(u,{cornerRadius:5,fill:ee,pointerDirection:"down"}),t.createElement(g,{align:"center",verticalAlign:"middle",fill:te,padding:5,text:A({unit:e.unit,dpi:e.dpi,px:i})})))),n._rendering&&t.createElement(l,null,t.createElement(m,{width:ie,height:oe,fill:"rgba(255,255,255,0.9)"}),t.createElement(g,{text:"Rendering...",fontSize:60,width:ie,height:oe,align:"center",verticalAlign:"middle"})),Pe&&t.createElement(Pe,{components:C,store:e,page:n,stageRef:se}),Le&&t.createElement(M,null,t.createElement(Le,Object.assign({components:C,store:e},pe.props)))),t.createElement(H,Object.assign({},ue,{store:e,tagFill:U,textFill:q})),t.createElement(N,{selection:ye,fill:D,stroke:I,strokeWidth:T}),Y()&&t.createElement(g,{text:"Powered by polotno.com",fontSize:14,fill:"rgba(0,0,0,0.6)",x:r-170,y:a-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")}}),t.createElement(l,{name:"line-guides"}))),de&&Oe&&t.createElement(Oe,{store:e,page:n,xPadding:re,yPadding:le}))});
+var e=this&&this.__rest||function(e,t){var n={};for(var i in e){Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i])}if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(i=Object.getOwnPropertySymbols(e);r<i.length;r++){t.indexOf(i[r])<0&&Object.prototype.propertyIsEnumerable.call(e,i[r])&&(n[i[r]]=e[i[r]])}}return n};import t from"react";import{observer as n,useLocalObservable as i}from"mobx-react-lite";import{action as r,runInAction as o}from"mobx";import{Group as l,Image as a,Label as s,Layer as c,Line as d,Rect as m,Stage as h,Tag as g,Text as u,Transformer as p}from"react-konva";import f from"use-image";import b from"konva";import x from"./element.js";import{DrawingLayer as v}from"./drawing-layer.js";import{ensureDragOrder as E,useSnap as y}from"./use-transformer-snap.js";import{useImageLoader as w}from"./image-element.js";import{getCrop as k}from"../utils/crop.js";import{___ as S,isCreditVisible as Y}from"../utils/validate-key.js";import{getClientRect as X,getTotalClientRect as C}from"../utils/math.js";import{pxToUnitRounded as A,pxToUnitString as P}from"../utils/unit.js";import{flags as O}from"../utils/flags.js";import{isTouchDevice as L}from"../utils/screen.js";import{useColor as R}from"./use-color.js";import{isGradient as j}from"../utils/gradient.js";import{Html as M}from"react-konva-utils";const D=b.DD._drag;window.removeEventListener("mousemove",D),b.DD._drag=function(e){o(()=>{D.call(this,e)})},window.addEventListener("mousemove",b.DD._drag);const I=new b.Group,T=20;I.add(new b.Rect({width:T,height:T,fill:"white"})),I.add(new b.Path({scaleX:T/24,scaleY:T/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 W=I.toCanvas({pixelRatio:2,width:T,height:T}),B={enabledAnchors:["top-left","top-center","top-right","middle-left","bottom-left","bottom-right","bottom-center","middle-right"],borderEnabled:!0,rotateEnabled:!0,rotationSnaps:[0,45,90,135,180,225,270,315],ignoreStroke:!0,flipEnabled:!1,anchorStrokeWidth:2,borderStrokeWidth:2,rotateAnchorOffset:30,anchorStyleFunc:e=>{if(e.hasName("rotater")){const t=20;e.setAttrs({width:t,height:t,cornerRadius:t/2,offsetX:t/2,offsetY:t/2,fillPatternImage:W,fillPatternScaleX:t/T/2,fillPatternScaleY:t/T/2,fillPriority:"pattern",fillPatternRepeat:"no-repeat"})}}};export const setTransformerStyle=e=>{Object.assign(B,e)};const F={text:{enabledAnchors:["top-left","top-right","middle-left","bottom-left","bottom-right","middle-right"]},svg:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]},gif:{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"]}};export function registerTransformerAttrs(e,t){F[e]=F[e]||t,Object.assign(F[e],t)}const G=e=>t.createElement(m,Object.assign({},e,{preventDefault:!1})),_=n=>{var{url:i}=n,r=e(n,["url"]);const[o,l]=f(i,"anonymous"),s=o?k(o,{width:r.width,height:r.height},"center-middle"):{};return w(l,i,"page background"),t.createElement(a,Object.assign({image:o},r,s))},z=e=>{const n=R({fill:e.fill,a:{width:e.width,height:e.height}});return t.createElement(m,Object.assign({},e,n))},N=n=>{const{background:i,scale:r,borderColor:o}=n,l=e(n,["background","scale","borderColor"]),a=t.useMemo(()=>!!b.Util.colorToRGBA(i)||j(i),[i]),s=t.useMemo(()=>{const e=document.createElement("canvas"),t=30;e.width=60,e.height=60;const n=e.getContext("2d");return n&&(n.fillStyle="black",n.fillRect(t,0,t,t),n.fillRect(0,t,t,t)),e},[]);return t.createElement(t.Fragment,null,t.createElement(m,Object.assign({fillPatternImage:s},l,{opacity:.1,hideInExport:!0})),a?t.createElement(z,Object.assign({fill:i},l)):t.createElement(_,Object.assign({url:i},l)))},H=n(({selection:e,fill:n="rgba(0, 161, 255, 0.3)",stroke:i="rgb(0, 161, 255)",strokeWidth:r=1})=>e.visible?t.createElement(m,{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:n,stroke:i,strokeWidth:r}):null),V=n(({x:e,y:n,width:i,height:r,rotation:o,anchor:l,store:a,tagFill:c,textFill:d})=>{const m=X({x:e,y:n,width:i,height:r,rotation:b.Util.radToDeg(o)});if(void 0===l){return null}const h=(r/2+70)*Math.cos(o-Math.PI/2),p=(r/2+70)*Math.sin(o-Math.PI/2),f=A({unit:a.unit,dpi:a.dpi,px:i/a.scale,precious:"px"===a.unit?0:1})+" x "+A({unit:a.unit,dpi:a.dpi,px:r/a.scale,precious:"px"===a.unit?0:1})+("px"===a.unit?"":" "+a.unit);return t.createElement(t.Fragment,null,t.createElement(s,{x:(m.minX+m.maxX)/2+h,y:(m.minY+m.maxY)/2+p,offsetX:14,offsetY:14,visible:"rotater"===l},t.createElement(g,{cornerRadius:5,fill:c||"rgb(0, 161, 255)"}),t.createElement(u,{align:"center",verticalAlign:"middle",fill:d||"white",padding:8,text:Math.round(b.Util.radToDeg(o)).toString()+"°"})),t.createElement(s,{x:(m.minX+m.maxX)/2,y:m.maxY+20,visible:"rotater"!==l},t.createElement(g,{cornerRadius:5,fill:c||"rgb(0, 161, 255)",pointerDirection:"up",pointerHeight:0,pointerWidth:0}),t.createElement(u,{align:"center",verticalAlign:"middle",fill:d||"white",padding:8,text:f})))}),Z=n(({elements:e,store:n})=>{const i=e.filter(e=>e.alwaysOnTop),r=e.filter(e=>!e.alwaysOnTop).concat(i);return t.createElement(t.Fragment,null,r.map(e=>t.createElement(x,{key:e.id,store:n,element:e,onClick:()=>{console.warn("Polotno warning: onClick callback is deprecated. Just stop using it. Polotno will do selection automatically.")}})))});export const useContextMenu=({store:e})=>{const[n,i]=t.useState(!1),[r,o]=t.useState({x:0,y:0}),l=t.useCallback(e=>{i(!0),o(e)},[]);return{open:l,close:t.useCallback(()=>{i(!1)},[]),props:{isOpen:n,offset:r,setIsOpen:i}}};let K=null;export const registerNextDomDrop=e=>{K=e};const U=atob("UG9sb3RubyBmcmVlIGxpY2Vuc2UgbGltaXRhdGlvbiBleGNlZWRlZCAtIFBsZWFzZSB1cGdyYWRlIHlvdXIgYWNjb3VudC4="),J=atob("cmVk"),$=atob("djAuOS4y"),q=e=>t.createElement(t.Fragment,null,t.createElement(s,{fill:J,height:200},t.createElement(g,{fill:J}),t.createElement(u,Object.assign({},e,{fill:"white",text:U,height:void 0,padding:10,fontSize:20}))));export default n(({store:e,page:n,width:o,height:a,pageControlsEnabled:f,backColor:x,pageBorderColor:w,activePageBorderColor:k,components:A,bleedColor:R,altCloneEnabled:j,viewportSize:D,selectionRectFill:I,selectionRectStroke:T,selectionRectStrokeWidth:W,snapGuideStroke:_,snapGuideStrokeWidth:z,snapGuideDash:U,transformLabelFill:J,transformLabelTextFill:Q,distanceGuideStroke:ee,distanceLabelFill:te,distanceLabelTextFill:ne})=>{const ie=e.bleedVisible?n.bleed:0,re=n.computedWidth+2*ie,oe=n.computedHeight+2*ie,le=(o-re*e.scale)/2,ae=(a-oe*e.scale)/2,se=t.useRef(null),ce=t.useRef(null),de=t.useRef(null),me=null==f||f,[he,ge]=t.useState(null),[ue,pe]=t.useState({}),fe=useContextMenu({store:e}),be=e.selectedElements.find(e=>e._cropModeEnabled),xe=e.selectedElements.find(e=>e.curveEnabled),ve=e.selectedShapes.filter(e=>!e.resizable).length>0,Ee=e.selectedShapes.filter(e=>!e.draggable).length>0,ye=e.selectedElements.filter(e=>!e.visible).length>0;t.useLayoutEffect(()=>{var t,n,i;if(!se.current){return}const r=se.current.getStage(),o=e.selectedShapes.map(e=>e._cropModeEnabled?null:r.findOne("#"+e.id)).filter(e=>e),l=1===e.selectedElements.length,a=l&&(null===(t=e.selectedElements[0])||void 0===t?void 0:t.type)||"many";F[a]?(se.current.setAttrs(Object.assign(Object.assign({},B),F[a])),"svg"!==a&&"image"!==a&&"gif"!==a||e.selectedElements[0].keepRatio||se.current.setAttrs({enabledAnchors:B.enabledAnchors}),"text"===a&&O.textVerticalResizeEnabled&&se.current.setAttrs({enabledAnchors:null===(n=F.text.enabledAnchors)||void 0===n?void 0:n.concat(["bottom-center"])}),"text"===a&&l&&e.selectedElements[0].curveEnabled&&se.current.setAttrs({enabledAnchors:F.many.enabledAnchors})):se.current.setAttrs(B),ve&&se.current.enabledAnchors([]),Ee&&se.current.rotateEnabled(!1),o.find(e=>null==e?void 0:e.isDragging())&&o.forEach(e=>{e.isDragging()||null==e||e.startDrag()}),se.current.nodes(o),E(),null===(i=se.current.getLayer())||void 0===i||i.batchDraw()},[e.selectedShapes,be,ve,ye,Ee,xe]);const we=()=>{const e=se.current;if(!e){return}if(!e.nodes().length||!e.isTransforming()){return}const t=e.__getNodeRect(),n=null==e?void 0:e.getActiveAnchor(),i=e.getStage();pe({anchor:n,x:t.x-i.x(),y:t.y-i.y(),rotation:t.rotation,width:t.width,height:t.height})};t.useEffect(()=>{var e;null===(e=se.current)||void 0===e||e.update(),we()},[e.scale]);const ke=i(()=>({visible:!1,x1:0,y1:0,x2:0,y2:0})),Se=t.useRef(!1),Ye=L(),Xe=r(e=>{var t,n,i,r;if(Ye){return}Se.current=!1;const o=e.target.findAncestor(".elements-container"),l=e.target.findAncestor("Transformer"),a=e.target.findAncestor(".page-abs-container");if(o||l||a){return}const s=null===(t=e.target.getStage())||void 0===t?void 0:t.getPointerPosition();s.x-=null===(n=e.target.getStage())||void 0===n?void 0:n.x(),s.y-=null===(i=e.target.getStage())||void 0===i?void 0:i.y(),s&&(ke.visible=!0,ke.x1=s.x,ke.y1=s.y,ke.x2=s.x,ke.y2=s.y,(null===(r=e.target.getStage())||void 0===r?void 0:r.getPointersPositions().length)>=2&&(ke.visible=!1))});(({stageRef:e,containerRef:n,viewportSize:i})=>{t.useEffect(()=>{var t;const i=null===(t=n.current)||void 0===t?void 0:t.closest(".polotno-workspace-inner");function r(){var t;if(!e.current){return}const r=null===(t=n.current)||void 0===t?void 0:t.getBoundingClientRect(),o=null==i?void 0:i.getBoundingClientRect(),l=Math.max(0,o.left-r.left-100),a=Math.max(0,o.top-r.top-100);e.current.position({x:-l,y:-a}),e.current.container().style.transform=`translate(${l}px, ${a}px)`}return r(),i.addEventListener("scroll",r),()=>{i.removeEventListener("scroll",r)}},[i.width,i.height])})({stageRef:ce,containerRef:de,viewportSize:D}),t.useEffect(()=>{const t=r(e=>{var t,n,i,r;if(!ke.visible){return}null===(t=ce.current)||void 0===t||t.setPointersPositions(e);let o=null===(n=ce.current)||void 0===n?void 0:n.getPointerPosition();o?(o.x-=null===(i=ce.current)||void 0===i?void 0:i.x(),o.y-=null===(r=ce.current)||void 0===r?void 0:r.y()):o={x:ke.x2,y:ke.y2},ke.x2=o.x,ke.y2=o.y}),n=r(()=>{if(!ke.visible){return}if(!ce.current){return}const t=ce.current.findOne(".selection"),n=t?t.getClientRect():{width:0,height:0,x:0,y:0};if(n.width&&n.height){const t=[];ce.current.find(".element").forEach(i=>{const r=i.getClientRect(),o=e.getElementById(i.id()),l=null==o?void 0:o.draggable,a=null==o?void 0:o.selectable;b.Util.haveIntersection(n,r)&&l&&a&&t.push(o.top.id)});const i=[...new Set(t)];e.selectElements(i)}ke.visible=!1,Se.current=!0});return window.addEventListener("mousemove",t),window.addEventListener("touchmove",t),window.addEventListener("mouseup",n),window.addEventListener("touchend",n),()=>{window.removeEventListener("mousemove",t),window.removeEventListener("touchmove",t),window.removeEventListener("mouseup",n),window.removeEventListener("touchend",n)}},[]);const Ce=t.useRef(!1);t.useEffect(()=>{var e;let t;const n=null===(e=de.current)||void 0===e?void 0:e.closest(".polotno-workspace-inner"),i=()=>{Ce.current=!0,clearTimeout(t),t=setTimeout(()=>{Ce.current=!1},300)};return n.addEventListener("scroll",i),()=>{clearTimeout(t),n.removeEventListener("scroll",i)}},[]);const Ae=t=>{if(e.activePage!==n&&n.select(),Ce.current){return}if(Se.current){return}const i=t.evt.ctrlKey||t.evt.metaKey||t.evt.shiftKey,r=t.target.findAncestor(".elements-container"),o=t.target.findAncestor(".page-abs-container"),l=t.target.findAncestor("Transformer");if(!(i||r||l||o||ke.visible)){return void e.selectElements([])}const a=t.target.findAncestor(".element",!0),s=e.getElementById(null==a?void 0:a.id()),c=null==s?void 0:s.top,d=null==c?void 0:c.id,m=e.selectedElementsIds.indexOf(d)>=0,h=t.target.findAncestor(".page-container",!0);d&&i&&!m?e.selectElements(e.selectedElementsIds.concat([d])):d&&i&&m?e.selectElements(e.selectedElementsIds.filter(e=>e!==d)):!d||i||m?h?e.selectPages([n.id]):e.selectPages([]):e.selectElements([d])};y(se,e,{stroke:_,strokeWidth:z,dash:U});const Pe=e.activePage===n,Oe=e._selectedPagesIds.includes(n.id),Le=null==A?void 0:A.PageControls,Re=null==A?void 0:A.Tooltip,je=null==A?void 0:A.ContextMenu,Me=1/e.scale,De=0/e.scale;return t.createElement("div",{ref:de,onDragOver:e=>e.preventDefault(),onDrop:t=>{if(t.preventDefault(),!ce.current){return}ce.current.setPointersPositions(t);const i=ce.current.findOne(".elements-container").getRelativePointerPosition(),r=ce.current.getPointerPosition(),o=ce.current.getAllIntersections(r).map(e=>e.findAncestor(".element",!0)).filter(Boolean),l=[...new Set(o.reverse())].map(t=>e.getElementById(t.id())),a=l[0];K&&(K(i,a,{elements:l,page:n}),K=null)},style:{position:"relative",width:o+"px",height:a+"px",overflow:"hidden"},className:"polotno-page-container"+(Pe?" active-page":"")},t.createElement(h,{ref:ce,width:Math.min(o,D.width+200),height:Math.min(D.height+200,a),onClick:Ae,onTap:Ae,onContextMenu:t=>{t.evt.preventDefault();const n=t.target.findAncestor(".element",!0),i=e.getElementById(null==n?void 0:n.id()),r=null==i?void 0:i.top,o=null==r?void 0:r.id;o?e.selectedElementsIds.indexOf(o)>=0||e.selectElements([o]):e.selectElements([]),fe.open({x:t.evt.clientX,y:t.evt.clientY})},onMouseDown:Xe,onMouseMove:t=>{if(!t.evt.altKey&&he){return void ge(null)}if(!t.evt.altKey){return}const i=t.target.findAncestor(".element",!0),r=null==i?void 0:i.id();if(!e.selectedElements[0]){return}if(e.selectedElementsIds.includes(r)){return}const o=C(e.selectedShapes),l=r?e.getElementById(r):{x:0,y:0,width:n.computedWidth,height:n.computedHeight,rotation:0},a=X(l),s=[];o.minX>a.maxX&&s.push({distance:o.minX-a.maxX,box1:o,box2:a,points:[{x:o.minX,y:o.minY+o.height/2},{x:a.maxX,y:o.minY+o.height/2},{x:a.maxX,y:a.minY+a.height/2}]}),o.maxX<a.minX&&s.push({distance:a.minX-o.maxX,box1:o,box2:a,points:[{x:o.maxX,y:o.minY+o.height/2},{x:a.minX,y:o.minY+o.height/2},{x:a.minX,y:a.minY+a.height/2}]}),o.minY>a.maxY&&s.push({box1:o,box2:a,distance:o.minY-a.maxY,points:[{x:o.minX+o.width/2,y:o.minY},{x:o.minX+o.width/2,y:a.maxY},{x:a.minX+a.width/2,y:a.maxY}]}),o.maxY<a.minY&&s.push({box1:o,box2:a,distance:a.minY-o.maxY,points:[{x:o.minX+o.width/2,y:o.maxY},{x:o.minX+o.width/2,y:a.minY},{x:a.minX+a.width/2,y:a.minY}]}),o.minX>=a.minX&&o.maxX<=a.maxX&&o.minY>=a.minY&&o.maxY<=a.maxY&&(s.push({distance:o.minX-a.minX,box1:o,box2:a,points:[{x:o.minX,y:o.minY+o.height/2},{x:a.minX,y:o.minY+o.height/2},{x:a.minX,y:a.minY+a.height/2}]}),s.push({distance:a.maxX-o.maxX,box1:o,box2:a,points:[{x:o.maxX,y:o.minY+o.height/2},{x:a.maxX,y:o.minY+o.height/2},{x:a.maxX,y:a.minY+a.height/2}]}),s.push({box1:o,box2:a,distance:o.minY-a.minY,points:[{x:o.minX+o.width/2,y:o.minY},{x:o.minX+o.width/2,y:a.minY},{x:a.minX+a.width/2,y:a.minY}]}),s.push({box1:o,box2:a,distance:a.maxY-o.maxY,points:[{x:o.minX+o.width/2,y:o.maxY},{x:o.minX+o.width/2,y:a.maxY},{x:a.minX+a.width/2,y:a.maxY}]})),JSON.stringify(he)!==JSON.stringify(s)&&ge(s)},onDragStart:t=>{var n;const i=t.target.findAncestor(".element",!0);if(i){const r=e.getElementById(null==i?void 0:i.id()),o=null==r?void 0:r.top,l=null==o?void 0:o.id;!(e.selectedElementsIds.indexOf(l)>=0)&&l&&(e.selectElements([l]),t.target.stopDrag(),t.target.startDrag(t),null===(n=se.current)||void 0===n||n.startDrag(t))}he&&ge(null)},pageId:n.id,style:{position:"absolute",overflow:"hidden",top:0,left:0}},t.createElement(c,null,t.createElement(G,{width:o,height:a,fill:x}),t.createElement(l,{x:le,y:ae,scaleX:e.scale,scaleY:e.scale,name:"page-container"},t.createElement(l,{name:"page-container-2"},t.createElement(l,{name:"page-background-group",x:ie,y:ie},t.createElement(N,{x:-n.bleed,y:-n.bleed,width:n.computedWidth+2*n.bleed,height:n.computedHeight+2*n.bleed,background:n.background,name:"page-background",preventDefault:!1,scale:e.scale})),t.createElement(l,{x:ie,y:ie,name:"elements-container",listening:!e.isPlaying},t.createElement(m,{name:"elements-area",width:n.computedWidth,height:n.computedHeight,listening:!1}),t.createElement(Z,{elements:n.children,store:e})),t.createElement(m,{stroke:R,name:"bleed",strokeWidth:n.bleed,x:n.bleed/2,y:n.bleed/2,width:n.computedWidth+n.bleed,height:n.computedHeight+n.bleed,listening:!1,visible:n.bleed>0&&e.bleedVisible,hideInExport:!0}),S()===$&&t.createElement(q,{name:"hit-detection",x:-Me/2-De,y:-Me/2-De,width:re+Me+2*De,height:oe+Me+2*De}))),t.createElement(d,{name:"workspace-background",points:[0,0,o,0,o,a,0,a,0,0,le,ae,le,a-ae,o-le,a-ae,o-le,ae,le,ae],listening:!1,closed:!0,fill:x}),t.createElement(l,{x:le,y:ae,scaleX:e.scale,scaleY:e.scale},t.createElement(m,{name:"page-highlight",hideInExport:!0,x:-Me/2-De,y:-Me/2-De,width:re+Me+2*De,height:oe+Me+2*De,stroke:Oe?k:w,strokeWidth:2,listening:!1,strokeScaleEnabled:!1})),t.createElement(l,{x:le+ie*e.scale,y:ae+ie*e.scale,scaleX:e.scale,scaleY:e.scale,name:"page-abs-container"},t.createElement(p,{ref:se,onDragStart:t=>{var i;(null===(i=t.evt)||void 0===i?void 0:i.altKey)&&j&&e.selectedElements.forEach(e=>{const t=e.clone({},{skipSelect:!0}),i=n.children.indexOf(e);n.setElementZIndex(t.id,i)}),e.history.startTransaction()},onDragEnd:()=>{e.history.endTransaction()},onTransformStart:()=>{e.history.startTransaction(),ge(null)},boundBoxFunc:(e,t)=>{const n=Math.abs(t.width)<1||Math.abs(t.height)<1,i=Math.abs(e.width)<1||Math.abs(e.height)<1;return n&&!i?e:t},onTransform:e=>{const t=se.current.nodes(),n=t[t.length-1];e.target===n&&we()},onTransformEnd:t=>{pe({}),e.history.endTransaction()},visible:!e.isPlaying}),he&&he.map(({points:n,distance:i,box1:r,box2:o},a)=>t.createElement(l,{name:"distances-container",hideInExport:!0,key:a,listening:!1},t.createElement(m,Object.assign({},r,{stroke:ee,strokeWidth:1,strokeScaleEnabled:!1})),t.createElement(m,Object.assign({},o,{stroke:ee,strokeWidth:1,strokeScaleEnabled:!1})),t.createElement(d,{points:[n[0].x,n[0].y,n[1].x,n[1].y],stroke:ee,strokeWidth:1,strokeScaleEnabled:!1}),t.createElement(d,{points:[n[1].x,n[1].y,n[2].x,n[2].y],stroke:ee,strokeWidth:1,strokeScaleEnabled:!1}),t.createElement(s,{x:(n[0].x+n[1].x)/2,y:(n[0].y+n[1].y)/2,offsetY:-10,scaleX:1/e.scale,scaleY:1/e.scale},t.createElement(g,{cornerRadius:5,fill:te,pointerDirection:"down"}),t.createElement(u,{align:"center",verticalAlign:"middle",fill:ne,padding:5,text:P({unit:e.unit,dpi:e.dpi,px:i})})))),n._rendering&&t.createElement(l,null,t.createElement(m,{width:re,height:oe,fill:"rgba(255,255,255,0.9)"}),t.createElement(u,{text:"Rendering...",fontSize:60,width:re,height:oe,align:"center",verticalAlign:"middle"})),Re&&t.createElement(Re,{components:A,store:e,page:n,stageRef:ce}),je&&t.createElement(M,null,t.createElement(je,Object.assign({components:A,store:e},fe.props)))),t.createElement(v,{store:e,page:n,width:o,height:a,scale:e.scale,xPadding:le,yPadding:ae,bleed:ie}),t.createElement(V,Object.assign({},ue,{store:e,tagFill:J,textFill:Q})),t.createElement(H,{selection:ke,fill:I,stroke:T,strokeWidth:W}),Y()&&t.createElement(u,{text:"Powered by polotno.com",fontSize:14,fill:"rgba(0,0,0,0.6)",x:o-170,y:a-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")}}),t.createElement(l,{name:"line-guides"}))),me&&Le&&t.createElement(Le,{store:e,page:n,xPadding:le,yPadding:ae}))});

package/canvas/text-element.d.ts

@@ -6,7 +6,7 @@ type ShapeProps = {
     element: TextElementType;
 };
 export declare function isRTLText(string: string): boolean;
-export declare function getDir(string: string): "ltr" | "rtl";
+export declare function getDir(string: string): "rtl" | "ltr";
 export declare const useFontLoader: (store: StoreType, fontFamily: string) => boolean[];
 export declare const getLineHeight: ({ fontLoaded, fontFamily, fontSize, lineHeight, }: {
     fontLoaded: any;

package/canvas/video-element.js

@@ -1 +1 @@
-import e from"react";import{observer as t}from"mobx-react-lite";import{autorun as r}from"mobx";import{Arc as n,Group as o,Image as i,Rect as a,Text as h,Transformer as d}from"react-konva";import c from"use-image";import s from"konva";import{Portal as l}from"react-konva-utils";import{incrementLoader as u,triggerLoadError as g}from"../utils/loader.js";import*as f from"../utils/svg.js";import{flags as m}from"../utils/flags.js";import{applyFilter as p}from"./apply-filters.js";import{useFadeIn as w}from"./use-fadein.js";import{isTouchDevice as v}from"../utils/screen.js";function x(){return document.createElement("canvas")}const E=new window.Image;E.src=f.svgToURL('\n  <svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n  <path opacity="0.6" d="M4 5.49683V18.5032C4 20.05 5.68077 21.0113 7.01404 20.227L18.0694 13.7239C19.384 12.9506 19.384 11.0494 18.0694 10.2761L7.01404 3.77296C5.68077 2.98869 4 3.95 4 5.49683Z" fill="white"/>\n  <path d="M4 5.49683V18.5032C4 20.05 5.68077 21.0113 7.01404 20.227L18.0694 13.7239C19.384 12.9506 19.384 11.0494 18.0694 10.2761L7.01404 3.77296C5.68077 2.98869 4 3.95 4 5.49683Z" stroke="#323232" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>\n  </svg>\n');const M=new window.Image;M.src=f.svgToURL('\n  <svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n  <path opacity="0.6" d="M14 19L14 5C14 3.89543 14.8954 3 16 3L17 3C18.1046 3 19 3.89543 19 5L19 19C19 20.1046 18.1046 21 17 21L16 21C14.8954 21 14 20.1046 14 19Z" fill="white"/>\n  <path opacity="0.6" d="M10 19L10 5C10 3.89543 9.10457 3 8 3L7 3C5.89543 3 5 3.89543 5 5L5 19C5 20.1046 5.89543 21 7 21L8 21C9.10457 21 10 20.1046 10 19Z" fill="white"/>\n  <path d="M14 19L14 5C14 3.89543 14.8954 3 16 3L17 3C18.1046 3 19 3.89543 19 5L19 19C19 20.1046 18.1046 21 17 21L16 21C14.8954 21 14 20.1046 14 19Z" stroke="#323232" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>\n  <path d="M10 19L10 5C10 3.89543 9.10457 3 8 3L7 3C5.89543 3 5 3.89543 5 5L5 19C5 20.1046 5.89543 21 7 21L8 21C9.10457 21 10 20.1046 10 19Z" stroke="#323232" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>\n  </svg>\n');export const useCornerRadiusAndCrop=(t,r,n,o,i=0,a=!1)=>{const h=Math.floor(Math.max(t.width*o,1)),d=Math.floor(Math.max(t.height*o,1)),c=Math.min(i*o,h/2,d/2),l=Math.max(t.width/n.width,t.height/n.height)*o,u=t.page._exportingOrRendering&&m.imageDownScalingEnabled&&l<1&&!a,g=0===n.x&&0===n.y&&n.width===(null==r?void 0:r.width)&&n.height===(null==r?void 0:r.height),f=e.useMemo(()=>{if(r&&r.width&&r.height){return g&&0===c&&!u?void 0:x()}},[r,c,u,g]),p=()=>{if(!f||!r){return}f.width=h,f.height=d;const e=f.getContext("2d");if(!e){return}c&&(e.beginPath(),e.moveTo(c,0),e.lineTo(h-c,0),e.arc(h-c,c,c,3*Math.PI/2,0,!1),e.lineTo(h,d-c),e.arc(h-c,d-c,c,0,Math.PI/2,!1),e.lineTo(c,d),e.arc(c,d-c,c,Math.PI/2,Math.PI,!1),e.lineTo(0,c),e.arc(c,c,c,Math.PI,3*Math.PI/2,!1),e.clip());const t=u?function(e,t){var r,n;const o=x();o.width=e.width,o.height=e.height,null===(r=o.getContext("2d"))||void 0===r||r.drawImage(e,0,0,o.width,o.height);const i=function(e,t,r,n,o,i,a){for(var h=new ImageData(t,r),d=new Int32Array(e.data.buffer),c=e.width,s=new Int32Array(h.data.buffer),l=h.width,u=t/i,g=r/a,f=Math.round(1/u),m=Math.round(1/g),p=f*m,w=0;w<h.height;w++){for(var v=0;v<l;v++){for(var x=0+Math.round(v/u)+(0+Math.round(w/g))*c,E=0,M=0,y=0,b=0,L=0;L<m;L++){for(var C=0;C<f;C++){var T=d[x+C+L*c];E+=T<<24>>>24,M+=T<<16>>>24,y+=T<<8>>>24,b+=T>>>24}}E=Math.round(E/p),M=Math.round(M/p),y=Math.round(y/p),b=Math.round(b/p),s[v+w*l]=b<<24|y<<16|M<<8|E}}return h}(o.getContext("2d").getImageData(0,0,o.width,o.height),Math.floor(o.width*t),Math.floor(o.height*t),0,0,o.width,o.height);return o.width=Math.floor(o.width*t),o.height=Math.floor(o.height*t),null===(n=o.getContext("2d"))||void 0===n||n.putImageData(i,0,0),o}(r,l):r,o=u?{x:Math.floor(n.x*l),y:Math.floor(n.y*l),width:Math.floor(n.width*l),height:Math.floor(n.height*l)}:n;e.drawImage(t,o.x,o.y,o.width,o.height,0,0,f.width,f.height)};return e.useLayoutEffect(()=>{p()},[f,t.width,t.height,n.x,n.y,n.width,n.height,i,o,a,t.page._exportingOrRendering,u]),e.useEffect(()=>()=>{f&&"CANVAS"===f.nodeName&&s.Util.releaseCanvas(f)},[f]),[f||r,p]};const y=x(),b=t(({element:t})=>{const r=Math.min(30,t.width/4,t.height/4),i=e.useRef(null);return e.useEffect(()=>{const e=i.current;if(!e){return}const t=new s.Animation(t=>{e.rotate(((null==t?void 0:t.timeDiff)||0)/2)},e.getLayer());return t.start(),()=>{t.stop()}}),e.createElement(o,{x:t.a.x,y:t.a.y,rotation:t.a.rotation,listening:!1,opacity:t.a.opacity,hideInExport:!t.showInExport},e.createElement(a,{width:t.width,height:t.height,fill:"rgba(124, 173, 212, 0.8)"}),e.createElement(n,{ref:i,x:t.width/2,y:t.height/2,fill:"white",outerRadius:Math.abs(r),innerRadius:Math.max(1,r-5),angle:270}))}),L=t(({element:t})=>{const r=Math.max(10,Math.min(30,t.width/25));return e.createElement(o,{x:t.a.x,y:t.a.y,rotation:t.a.rotation,listening:!1,opacity:t.a.opacity,hideInExport:!t.showInExport},e.createElement(a,{width:t.width,height:t.height,fill:"rgba(223, 102, 102, 0.8)"}),e.createElement(h,{text:"Can not load the video...",fontSize:r,width:t.width,height:t.height,align:"center",fill:"white",verticalAlign:"middle",padding:5}))});let C=function(t,r,n){const o=e.useRef("loading"),i=e.useRef(null),[a,h]=e.useState(0),d=e.useRef(),c=e.useRef(),s=e.useRef();return d.current===t&&c.current===r&&s.current===n||(o.current="loading",i.current=void 0,d.current=t,c.current=r,s.current=n),e.useLayoutEffect(function(){if(t){var e=document.createElement("video");return e.addEventListener("canplay",a),e.addEventListener("error",d),r&&(e.crossOrigin=r),n&&(e.referrerpolicy=n),e.src=t,e.load(),function(){e.removeEventListener("canplay",a),e.removeEventListener("error",d)}}function a(){o.current="loaded",i.current=e,i.current.currentTime=0,h(Math.random()),i.current.removeEventListener("canplay",a)}function d(t){var r;const n=4===e.readyState,a=e.buffered&&e.buffered.length>0&&e.buffered.end(e.buffered.length-1)/e.duration*100>=100;if(n&&a){return}const d=t.message||(null===(r=e.error)||void 0===r?void 0:r.message)||"Unknown error",c=new Error("Video failed to load: "+d);console.error(c),o.current="failed",i.current=void 0,h(Math.random())}},[t,r,n]),[i.current,o.current]};export const setVideoLoaderHook=e=>{C=e};function T(e){return e.readyState>=HTMLMediaElement.HAVE_CURRENT_DATA}export const useLoader=(t,r,n)=>{const o=e.useRef(),i=()=>{var e;null===(e=o.current)||void 0===e||e.call(o),o.current=void 0};e.useEffect(()=>i,[]),e.useLayoutEffect(()=>{const e=r.slice(0,200),a=`video with id ${n} url: ${e}`;"loading"!==t||o.current||(o.current=u(a)),"loading"!==t&&i(),"failed"===t&&g(a)},[t])};export const VideoElement=t(({element:t,store:n})=>{var h;const[g,m]=e.useState(!1),R=e.useRef(null),I=e.useRef(null),S=n.selectedShapes.indexOf(t)>=0&&t.selectable,[k,X]=e.useState(!1),[Y,W]=C(t.src,"anonymous"),[O,_]=e.useState(!1),P=n.activePage===t.page;useLoader(W,t.src,t.id),Y&&(Y.width=Y.videoWidth,Y.height=Y.videoHeight,Y.playsInline=!0);const A=Y||y;e.useEffect(()=>{Y&&n.history.ignore(()=>{t.set({duration:1e3*Y.duration})})},[Y]),e.useEffect(()=>{var e;if(!Y){return}const r=n.animatedElementsIds,o=(!r.length||r.includes(t.id))&&n.isPlaying,i=P&&(o||k);if(!i){return void Y.pause()}i&&(Y.currentTime=t.startTime*Y.duration,Y.play());const a=new s.Animation(()=>{re()},null===(e=R.current)||void 0===e?void 0:e.getLayer());a.start();const h=()=>{X(!1),Y.currentTime=t.startTime*Y.duration},d=()=>{Y.currentTime>=t.endTime*Y.duration&&(Y.pause(),Y.currentTime=t.startTime*Y.duration,X(!1))};return Y.addEventListener("ended",h),Y.addEventListener("timeupdate",d),()=>{Y.pause(),a.stop(),Y.removeEventListener("ended",h),Y.removeEventListener("timeupdate",d)}},[Y,k,n.isPlaying,P]),e.useEffect(()=>{Y&&(Y.volume=t.volume)},[Y,t.volume]);const H=e.useRef();e.useEffect(()=>{const e=r(()=>{var e,r;if(Y){const o=n.animatedElementsIds;if(o.length&&!o.includes(t.id)){return}const i=t.startTime*Y.duration*1e3,a=Y.duration*(t.endTime-t.startTime)*1e3,h=((n.currentTime||t.page.startTime)-t.page.startTime)%a+i;if(Math.abs(1e3*Y.currentTime-h)>500||!n.isPlaying){const e=h/1e3;e!==Y.currentTime&&(Y.currentTime=e),!T(Y)&&!n.isPlaying&&!H.current&&(H.current=u(`video ${t.id}`))}re(),null===(r=null===(e=R.current)||void 0===e?void 0:e.getLayer())||void 0===r||r.batchDraw()}});return()=>{e(),H.current&&(H.current(),H.current=null)}},[n,Y]),e.useEffect(()=>{if(!Y){return}const e=()=>{var e,r;!T(Y)&&t.page._exportingOrRendering||H.current&&(re(),null===(r=null===(e=R.current)||void 0===e?void 0:e.getLayer())||void 0===r||r.batchDraw(),H.current(),H.current=null)};let r;return t.page._exportingOrRendering&&(r=setInterval(e,20)),Y.addEventListener("timeupdate",e),Y.addEventListener("canplay",e),()=>{clearInterval(r),Y.removeEventListener("timeupdate",e),Y.removeEventListener("canplay",e)}},[t.page._exportingOrRendering,Y,t.id,u]);let{cropX:D,cropY:z,cropWidth:j,cropHeight:B}=t;"loaded"!==W&&(D=z=0,j=B=1);const U=A.width*j,V=A.height*B,Z=t.width/t.height;let F,N;const $=U/V,q="svg"===t.type;q?(F=U,N=V):Z>=$?(F=U,N=U/Z):(F=V*Z,N=V);const G={x:A.width*D,y:A.height*z,width:F,height:N},J=null!==(h=t.cornerRadius)&&void 0!==h?h:0,[K,Q]=useCornerRadiusAndCrop(t,A,G,n._elementsPixelRatio,J,!0);let[ee,te]=((t,r,n,o)=>{const i=(t=>{const[r,n]=e.useState(t);return e.useEffect(()=>{(async()=>{const e=await async function(e){if(!(e.indexOf("data:image/svg+xml")>=0||e.indexOf(".svg")>=0)){return e}const t=await f.urlToString(e),r=f.fixSize(t);return f.svgToURL(r)}(t);e!==r&&n(e)})()},[t]),r})(t.clipSrc||""),[a,h]=c(i,"anonymous"),d=t.clipSrc?h:"loaded";useLoader(d,t.clipSrc,t.id);const l=e.useMemo(()=>{if(r&&a){return x()}},[r,a]);function u(){var e;if(!a){return}if(!r||!r.width||!r.height){return}if(!a||!a.width||!a.height){return}if(!l){return}const o=x(),i=Math.max(t.width/a.width*n,t.height/a.height*n);o.width=a.width*i,o.height=a.height*i,null===(e=o.getContext("2d"))||void 0===e||e.drawImage(a,0,0,o.width,o.height),l.width=Math.max(r.width,1),l.height=Math.max(r.height,1);const h=l.getContext("2d");h&&(h.save(),h.drawImage(o,0,0,r.width,r.height),s.Util.releaseCanvas(o),h.globalCompositeOperation="source-in",h.drawImage(r,0,0,l.width,l.height),h.restore())}return e.useLayoutEffect(()=>{u()},[l,r,a,t.width,t.height,n,...o]),[t.clipSrc&&a?l:r,u]})(t,K,n._elementsPixelRatio,[G,J,n._elementsPixelRatio]);function re(){Q(),te()}const ne=Math.max(t.width/F,t.height/N);e.useEffect(()=>{var e;if(!t._cropModeEnabled){return}const r=null===(e=R.current)||void 0===e?void 0:e.getStage();function n(e){t._cropModeEnabled&&e.target!==I.current&&t.toggleCropMode(!1)}function o(e){t._cropModeEnabled&&e.target.parentNode!==r.content&&t.toggleCropMode(!1)}return document.body.addEventListener("click",o),null==r||r.on("click",n),null==r||r.on("tap",n),()=>{document.body.removeEventListener("click",o),document.body.removeEventListener("touchstart",o),null==r||r.off("click",n),null==r||r.off("click",n)}},[t._cropModeEnabled]),e.useLayoutEffect(()=>{if(!g&&!t._cropModeEnabled){return p(R.current,t),r(()=>{p(R.current,t)},{delay:100})}},[A,g,j,B,t._cropModeEnabled]),e.useLayoutEffect(()=>{var e;g||t._cropModeEnabled?null===(e=R.current)||void 0===e||e.clearCache():p(R.current,t)},[g,t.width,t.height,t._cropModeEnabled]),e.useEffect(()=>{p(R.current,t)},[t.shadowEnabled,t.shadowBlur,t.cornerRadius,t.shadowColor,t.shadowOffsetX,t.shadowOffsetY,t.shadowOpacity]);const oe=e.useRef(null),ie=e.useRef(null),ae=e.useRef(null);e.useLayoutEffect(()=>{t._cropModeEnabled&&(ie.current.nodes([oe.current]),ae.current.nodes([I.current]))},[t._cropModeEnabled]);const he=e=>{Math.round(e.target.x())>0&&(e.target.x(0),e.target.scaleX(1)),Math.round(e.target.y())>0&&(e.target.y(0),e.target.scaleY(1));const r=e.target.width()*e.target.scaleX(),n=e.target.height()*e.target.scaleY(),o=Math.min(1,F/r),i=Math.min(1,N/n),a=1-o,h=Math.min(a,Math.max(0,Math.round(-e.target.x())/r)),d=1-i,c=Math.min(d,Math.max(0,Math.round(-e.target.y())/n));e.target.setAttrs({x:-h*A.width,y:-c*A.height,scaleX:1,scaleY:1}),t.set({cropX:h,cropY:c,cropWidth:o,cropHeight:i})},de=()=>{"svg"!==t.type&&t.contentEditable&&setTimeout(()=>{t.toggleCropMode(!0)})},ce="loading"===W,se="failed"===W,le=!ce&&!se,ue=e.useRef({cropX:0,cropY:0,cropWidth:0,cropHeight:0}),ge=le?t.a.opacity:0;w(R,ge);const fe=t.selectable||"admin"===n.role,me=v();return e.createElement(e.Fragment,null,e.createElement(o,{onMouseEnter:()=>_(!0),onMouseLeave:()=>_(!1)},ce&&e.createElement(b,{element:t}),se&&e.createElement(L,{element:t}),e.createElement(i,{ref:R,name:"element",id:t.id,image:ee,x:t.a.x,y:t.a.y,width:t.a.width||1,height:t.a.height||1,rotation:t.a.rotation,opacity:ge,shadowEnabled:t.shadowEnabled,shadowBlur:t.shadowBlur,shadowOffsetX:t.shadowOffsetX,shadowOffsetY:t.shadowOffsetY,shadowColor:t.shadowColor,shadowOpacity:t.shadowOpacity,customCrop:G,listening:fe,draggable:me?t.draggable&&S:t.draggable,preventDefault:!me||S,hideInExport:!t.showInExport,onDragMove:e=>{t.set({x:e.target.x(),y:e.target.y()})},onDragEnd:e=>{t.set({x:e.target.x(),y:e.target.y()})},onDblClick:de,onDblTap:de,onTransformStart:()=>{m(!0),ue.current={cropX:t.cropX,cropY:t.cropY,cropWidth:t.cropWidth,cropHeight:t.cropHeight}},onTransform:e=>{var r;const n=e.currentTarget,o=Math.abs(n.scaleX()-1)<1e-7?1:n.scaleX(),i=Math.abs(n.scaleY()-1)<1e-7?1:n.scaleY();n.scaleX(1),n.scaleY(1);const a=null===(r=e.target.getStage())||void 0===r?void 0:r.findOne("Transformer"),h=1-F/A.width,d=Math.min(h,Math.max(0,t.cropX)),c=1-N/A.height,s=Math.min(c,Math.max(0,t.cropY)),l=a.getActiveAnchor(),u=!(l.indexOf("middle")>=0||l.indexOf("center")>=0),g=!u&&o<1&&ue.current.cropHeight>N/A.height;let f=u?t.cropWidth:t.cropWidth*o;g&&(f=t.cropWidth);const m=!u&&i<1&&ue.current.cropWidth>F/A.width;let p=u?t.cropHeight:t.cropHeight*i;m&&(p=t.cropHeight),q&&(f=t.cropWidth,p=t.cropHeight),t.set({cropX:d,cropY:s,x:n.x(),y:n.y(),width:n.width()*o,height:n.height()*i,rotation:e.target.rotation(),cropWidth:Math.min(f,1-d),cropHeight:Math.min(p,1-s)})},onTransformEnd:e=>{const r=e.currentTarget;t.set({width:r.width(),height:r.height(),x:r.x(),y:r.y(),rotation:e.target.rotation(),cropWidth:F/A.width,cropHeight:N/A.height}),m(!1)}}),e.createElement(a,{x:t.a.x,y:t.a.y,width:Math.max(t.a.width-t.borderSize,0),height:Math.max(t.a.height-t.borderSize,0),opacity:ge,offsetX:-t.borderSize/2,offsetY:-t.borderSize/2,stroke:t.borderColor,strokeWidth:t.borderSize,listening:!1,visible:!!t.borderSize,rotation:t.rotation,cornerRadius:Math.max(0,J-t.borderSize),hideInExport:!t.showInExport}),!n.isPlaying&&e.createElement(i,{image:k?(O||me)&&M:E,x:t.a.x,y:t.a.y,offsetX:-t.a.width/2+15/n.scale,offsetY:-t.a.height/2+15/n.scale,rotation:t.a.rotation,width:30/n.scale,height:30/n.scale,hideInExport:!0,onClick:()=>X(!k),onTap:()=>X(!k)}),t._cropModeEnabled&&e.createElement(l,{selector:".page-abs-container",enabled:!0},e.createElement(a,{x:-window.innerWidth/n.scale,y:-window.innerWidth/n.scale,width:window.innerWidth/n.scale*3,height:window.innerWidth/n.scale*3,fill:"rgba(0,0,0,0.3)"}),e.createElement(i,{listening:!1,image:ee,x:t.a.x,y:t.a.y,width:t.a.width,height:t.a.height,rotation:t.a.rotation,shadowEnabled:t.shadowEnabled,shadowBlur:t.shadowBlur}),e.createElement(o,{x:t.a.x,y:t.a.y,rotation:t.a.rotation,scaleX:ne,scaleY:ne},e.createElement(i,{image:A,ref:I,opacity:.4,draggable:!0,x:-t.cropX*A.width,y:-t.cropY*A.height,onDragMove:he,onTransform:he}),e.createElement(d,{ref:ae,anchorSize:20,enabledAnchors:["top-left","top-right","bottom-left","bottom-right"],boundBoxFunc:(e,t)=>t.width<5||t.height<5?e:t,rotateEnabled:!1,borderEnabled:!1,anchorCornerRadius:10,anchorStrokeWidth:2,borderStrokeWidth:2}),e.createElement(a,{width:F,height:N,ref:oe,listening:!1,onTransform:e=>{e.target.x()<-t.cropX*A.width-1e-9&&(e.target.x(-t.cropX*A.width),e.target.scaleX(1)),e.target.y()<-t.cropY*A.height-1e-9&&(e.target.y(-t.cropY*A.height),e.target.scaleY(1));const r=Math.min(1,Math.max(0,t.cropX+e.target.x()/A.width)),n=Math.min(1,Math.max(0,e.target.y()/A.height+t.cropY)),o=e.target.width()*e.target.scaleX(),i=e.target.height()*e.target.scaleY(),a=Math.min(1-r,o/A.width),h=Math.min(1-n,i/A.height),d=e.target.getAbsolutePosition(e.target.getParent().getParent());e.target.scale({x:1,y:1}),e.target.position({x:0,y:0}),t.set({x:d.x,y:d.y,cropX:r,cropY:n,cropWidth:a,cropHeight:h,width:Math.min(o*ne,A.width*(1-r)*ne),height:Math.min(i*ne,A.height*(1-n)*ne)})}}),e.createElement(d,{ref:ie,enabledAnchors:["top-left","top-right","bottom-left","bottom-right"],boundBoxFunc:(e,t)=>t.width<5||t.height<5?e:t,keepRatio:!1,rotateEnabled:!1,anchorFill:"rgb(240, 240, 240)",anchorStrokeWidth:2,borderStrokeWidth:2,visible:t.resizable})))))});
+import e from"react";import{observer as t}from"mobx-react-lite";import{autorun as r}from"mobx";import{Arc as n,Group as o,Image as i,Rect as a,Text as d,Transformer as h}from"react-konva";import c from"use-image";import l from"konva";import{Portal as s}from"react-konva-utils";import{incrementLoader as u,triggerLoadError as g}from"../utils/loader.js";import*as f from"../utils/svg.js";import{flags as m}from"../utils/flags.js";import{applyFilter as p}from"./apply-filters.js";import{useFadeIn as w}from"./use-fadein.js";import{isTouchDevice as v}from"../utils/screen.js";function x(){return document.createElement("canvas")}const M=new window.Image;M.src=f.svgToURL('\n  <svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n  <path opacity="0.6" d="M4 5.49683V18.5032C4 20.05 5.68077 21.0113 7.01404 20.227L18.0694 13.7239C19.384 12.9506 19.384 11.0494 18.0694 10.2761L7.01404 3.77296C5.68077 2.98869 4 3.95 4 5.49683Z" fill="white"/>\n  <path d="M4 5.49683V18.5032C4 20.05 5.68077 21.0113 7.01404 20.227L18.0694 13.7239C19.384 12.9506 19.384 11.0494 18.0694 10.2761L7.01404 3.77296C5.68077 2.98869 4 3.95 4 5.49683Z" stroke="#323232" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>\n  </svg>\n');const E=new window.Image;E.src=f.svgToURL('\n  <svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n  <path opacity="0.6" d="M14 19L14 5C14 3.89543 14.8954 3 16 3L17 3C18.1046 3 19 3.89543 19 5L19 19C19 20.1046 18.1046 21 17 21L16 21C14.8954 21 14 20.1046 14 19Z" fill="white"/>\n  <path opacity="0.6" d="M10 19L10 5C10 3.89543 9.10457 3 8 3L7 3C5.89543 3 5 3.89543 5 5L5 19C5 20.1046 5.89543 21 7 21L8 21C9.10457 21 10 20.1046 10 19Z" fill="white"/>\n  <path d="M14 19L14 5C14 3.89543 14.8954 3 16 3L17 3C18.1046 3 19 3.89543 19 5L19 19C19 20.1046 18.1046 21 17 21L16 21C14.8954 21 14 20.1046 14 19Z" stroke="#323232" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>\n  <path d="M10 19L10 5C10 3.89543 9.10457 3 8 3L7 3C5.89543 3 5 3.89543 5 5L5 19C5 20.1046 5.89543 21 7 21L8 21C9.10457 21 10 20.1046 10 19Z" stroke="#323232" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>\n  </svg>\n');export const useCornerRadiusAndCrop=(t,r,n,o,i=0,a=!1)=>{const d=Math.floor(Math.max(t.width*o,1)),h=Math.floor(Math.max(t.height*o,1)),c=Math.min(i*o,d/2,h/2),s=Math.max(t.width/n.width,t.height/n.height)*o,u=t.page._exportingOrRendering&&m.imageDownScalingEnabled&&s<1&&!a,g=r instanceof HTMLVideoElement?r.videoWidth:null==r?void 0:r.width,f=r instanceof HTMLVideoElement?r.videoHeight:null==r?void 0:r.height,p=0===n.x&&0===n.y&&n.width===g&&n.height===f,w=e.useMemo(()=>{if(r&&g&&f){return p&&0===c&&!u?void 0:x()}},[r,c,u,p,g,f]),v=()=>{if(!w||!r){return}w.width=d,w.height=h;const e=w.getContext("2d");if(!e){return}c&&(e.beginPath(),e.moveTo(c,0),e.lineTo(d-c,0),e.arc(d-c,c,c,3*Math.PI/2,0,!1),e.lineTo(d,h-c),e.arc(d-c,h-c,c,0,Math.PI/2,!1),e.lineTo(c,h),e.arc(c,h-c,c,Math.PI/2,Math.PI,!1),e.lineTo(0,c),e.arc(c,c,c,Math.PI,3*Math.PI/2,!1),e.clip());const t=u?function(e,t){var r,n;const o=x();o.width=e.width,o.height=e.height,null===(r=o.getContext("2d"))||void 0===r||r.drawImage(e,0,0,o.width,o.height);const i=function(e,t,r,n,o,i,a){for(var d=new ImageData(t,r),h=new Int32Array(e.data.buffer),c=e.width,l=new Int32Array(d.data.buffer),s=d.width,u=t/i,g=r/a,f=Math.round(1/u),m=Math.round(1/g),p=f*m,w=0;w<d.height;w++){for(var v=0;v<s;v++){for(var x=0+Math.round(v/u)+(0+Math.round(w/g))*c,M=0,E=0,y=0,b=0,L=0;L<m;L++){for(var C=0;C<f;C++){var T=h[x+C+L*c];M+=T<<24>>>24,E+=T<<16>>>24,y+=T<<8>>>24,b+=T>>>24}}M=Math.round(M/p),E=Math.round(E/p),y=Math.round(y/p),b=Math.round(b/p),l[v+w*s]=b<<24|y<<16|E<<8|M}}return d}(o.getContext("2d").getImageData(0,0,o.width,o.height),Math.floor(o.width*t),Math.floor(o.height*t),0,0,o.width,o.height);return o.width=Math.floor(o.width*t),o.height=Math.floor(o.height*t),null===(n=o.getContext("2d"))||void 0===n||n.putImageData(i,0,0),o}(r,s):r,o=u?{x:Math.floor(n.x*s),y:Math.floor(n.y*s),width:Math.floor(n.width*s),height:Math.floor(n.height*s)}:n;e.drawImage(t,o.x,o.y,o.width,o.height,0,0,w.width,w.height)};return e.useLayoutEffect(()=>{v()},[w,t.width,t.height,n.x,n.y,n.width,n.height,i,o,a,t.page._exportingOrRendering,u]),e.useEffect(()=>()=>{w&&"CANVAS"===w.nodeName&&l.Util.releaseCanvas(w)},[w]),[w||r,v]};const y=x(),b=t(({element:t})=>{const r=Math.min(30,t.width/4,t.height/4),i=e.useRef(null);return e.useEffect(()=>{const e=i.current;if(!e){return}const t=new l.Animation(t=>{e.rotate(((null==t?void 0:t.timeDiff)||0)/2)},e.getLayer());return t.start(),()=>{t.stop()}}),e.createElement(o,{x:t.a.x,y:t.a.y,rotation:t.a.rotation,listening:!1,opacity:t.a.opacity,hideInExport:!t.showInExport},e.createElement(a,{width:t.width,height:t.height,fill:"rgba(124, 173, 212, 0.8)"}),e.createElement(n,{ref:i,x:t.width/2,y:t.height/2,fill:"white",outerRadius:Math.abs(r),innerRadius:Math.max(1,r-5),angle:270}))}),L=t(({element:t})=>{const r=Math.max(10,Math.min(30,t.width/25));return e.createElement(o,{x:t.a.x,y:t.a.y,rotation:t.a.rotation,listening:!1,opacity:t.a.opacity,hideInExport:!t.showInExport},e.createElement(a,{width:t.width,height:t.height,fill:"rgba(223, 102, 102, 0.8)"}),e.createElement(d,{text:"Can not load the video...",fontSize:r,width:t.width,height:t.height,align:"center",fill:"white",verticalAlign:"middle",padding:5}))});let C=function(t,r,n){const o=e.useRef("loading"),i=e.useRef(null),[a,d]=e.useState(0),h=e.useRef(),c=e.useRef(),l=e.useRef();return h.current===t&&c.current===r&&l.current===n||(o.current="loading",i.current=void 0,h.current=t,c.current=r,l.current=n),e.useLayoutEffect(function(){if(t){var e=document.createElement("video");return e.addEventListener("canplay",a),e.addEventListener("error",h),r&&(e.crossOrigin=r),n&&(e.referrerPolicy=n),e.src=t,e.load(),function(){e.removeEventListener("canplay",a),e.removeEventListener("error",h)}}function a(){o.current="loaded",i.current=e,i.current.currentTime=0,d(Math.random()),i.current.removeEventListener("canplay",a)}function h(t){var r;const n=4===e.readyState,a=e.buffered&&e.buffered.length>0&&e.buffered.end(e.buffered.length-1)/e.duration*100>=100;if(n&&a){return}const h=t.message||(null===(r=e.error)||void 0===r?void 0:r.message)||"Unknown error",c=new Error("Video failed to load: "+h);console.error(c),o.current="failed",i.current=void 0,d(Math.random())}},[t,r,n]),[i.current,o.current]};export const setVideoLoaderHook=e=>{C=e};function T(e){return e.readyState>=HTMLMediaElement.HAVE_CURRENT_DATA}export const useLoader=(t,r,n)=>{const o=e.useRef(),i=()=>{var e;null===(e=o.current)||void 0===e||e.call(o),o.current=void 0};e.useEffect(()=>i,[]),e.useLayoutEffect(()=>{const e=r.slice(0,200),a=`video with id ${n} url: ${e}`;"loading"!==t||o.current||(o.current=u(a)),"loading"!==t&&i(),"failed"===t&&g(a)},[t])};export const VideoElement=t(({element:t,store:n})=>{var d;const[g,m]=e.useState(!1),R=e.useRef(null),I=e.useRef(null),S=n.selectedShapes.indexOf(t)>=0&&t.selectable,[k,H]=e.useState(!1),[X,Y]=C(t.src,"anonymous"),[W,O]=e.useState(!1),_=n.activePage===t.page;useLoader(Y,t.src,t.id),X&&(X.playsInline=!0);const A=((t,r,n)=>{const o=e.useMemo(()=>{var e,o;const{flipX:i,flipY:a}=t,d="svg"===t.type||t.src.indexOf("data:image/svg+xml")>=0||t.src.indexOf(".svg")>=0,h=navigator.userAgent.toLowerCase().indexOf("firefox")>-1;if(!(i||a||h&&d)){return r}if(!r){return null}const c=r instanceof HTMLVideoElement?r.videoWidth:null==r?void 0:r.width,l=r instanceof HTMLVideoElement?r.videoHeight:null==r?void 0:r.height;if(!c||!l){return null}const s=x();let u=1;"svg"===t.type&&(u=Math.max(t.width/c*n,t.height/l*n)),s.width=Math.max(c*u,1),s.height=Math.max(l*u,1);let g=i?-s.width:0,f=a?-s.height:0;return null===(e=s.getContext("2d"))||void 0===e||e.scale(i?-1:1,a?-1:1),null===(o=s.getContext("2d"))||void 0===o||o.drawImage(r,g,f,s.width,s.height),s},[t.flipX,t.flipY,r,t.width,t.height,n]);return e.useEffect(()=>()=>{o&&"CANVAS"===o.nodeName&&l.Util.releaseCanvas(o)},[o]),o})(t,X,n._elementsPixelRatio),P=A||y;e.useEffect(()=>{X&&n.history.ignore(()=>{t.set({duration:1e3*X.duration})})},[X]),e.useEffect(()=>{var e;if(!X){return}const r=n.animatedElementsIds,o=(!r.length||r.includes(t.id))&&n.isPlaying,i=_&&(o||k);if(!i){return void X.pause()}i&&(X.currentTime=t.startTime*X.duration,X.play());const a=new l.Animation(()=>{ae()},null===(e=R.current)||void 0===e?void 0:e.getLayer());a.start();const d=()=>{H(!1),X.currentTime=t.startTime*X.duration},h=()=>{X.currentTime>=t.endTime*X.duration&&(X.pause(),X.currentTime=t.startTime*X.duration,H(!1))};return X.addEventListener("ended",d),X.addEventListener("timeupdate",h),()=>{X.pause(),a.stop(),X.removeEventListener("ended",d),X.removeEventListener("timeupdate",h)}},[X,k,n.isPlaying,_]),e.useEffect(()=>{X&&(X.volume=t.volume)},[X,t.volume]);const V=e.useRef();e.useEffect(()=>{const e=r(()=>{var e,r;if(X){const o=n.animatedElementsIds;if(o.length&&!o.includes(t.id)){return}const i=t.startTime*X.duration*1e3,a=X.duration*(t.endTime-t.startTime)*1e3,d=((n.currentTime||t.page.startTime)-t.page.startTime)%a+i;if(Math.abs(1e3*X.currentTime-d)>500||!n.isPlaying){const e=d/1e3;e!==X.currentTime&&(X.currentTime=e),!T(X)&&!n.isPlaying&&!V.current&&(V.current=u(`video ${t.id}`))}ae(),null===(r=null===(e=R.current)||void 0===e?void 0:e.getLayer())||void 0===r||r.batchDraw()}});return()=>{e(),V.current&&(V.current(),V.current=null)}},[n,X]),e.useEffect(()=>{if(!X){return}const e=()=>{var e,r;!T(X)&&t.page._exportingOrRendering||V.current&&(ae(),null===(r=null===(e=R.current)||void 0===e?void 0:e.getLayer())||void 0===r||r.batchDraw(),V.current(),V.current=null)};let r;return t.page._exportingOrRendering&&(r=setInterval(e,20)),X.addEventListener("timeupdate",e),X.addEventListener("canplay",e),()=>{clearInterval(r),X.removeEventListener("timeupdate",e),X.removeEventListener("canplay",e)}},[t.page._exportingOrRendering,X,t.id,u]);let{cropX:D,cropY:z,cropWidth:j,cropHeight:B}=t;"loaded"!==Y&&(D=z=0,j=B=1);const U=(N=P)instanceof HTMLVideoElement?N.videoWidth:(null==N?void 0:N.width)||0;var N;const Z=(e=>e instanceof HTMLVideoElement?e.videoHeight:(null==e?void 0:e.height)||0)(P),F=U*j,$=Z*B,q=t.width/t.height;let G,J;const K=F/$,Q="svg"===t.type;Q?(G=F,J=$):q>=K?(G=F,J=F/q):(G=$*q,J=$);const ee={x:U*D,y:Z*z,width:G,height:J},te=null!==(d=t.cornerRadius)&&void 0!==d?d:0,[re,ne]=useCornerRadiusAndCrop(t,P,ee,n._elementsPixelRatio,te,!0);let[oe,ie]=((t,r,n,o)=>{const i=(t=>{const[r,n]=e.useState(t);return e.useEffect(()=>{(async()=>{const e=await async function(e){if(!(e.indexOf("data:image/svg+xml")>=0||e.indexOf(".svg")>=0)){return e}const t=await f.urlToString(e),r=f.fixSize(t);return f.svgToURL(r)}(t);e!==r&&n(e)})()},[t]),r})(t.clipSrc||""),[a,d]=c(i,"anonymous"),h=t.clipSrc?d:"loaded";useLoader(h,t.clipSrc,t.id);const s=e.useMemo(()=>{if(r&&a){return x()}},[r,a]);function u(){var e;if(!a){return}const o=r instanceof HTMLVideoElement?r.videoWidth:null==r?void 0:r.width,i=r instanceof HTMLVideoElement?r.videoHeight:null==r?void 0:r.height;if(!r||!o||!i){return}if(!a||!a.width||!a.height){return}if(!s){return}const d=x(),h=Math.max(t.width/a.width*n,t.height/a.height*n);d.width=a.width*h,d.height=a.height*h,null===(e=d.getContext("2d"))||void 0===e||e.drawImage(a,0,0,d.width,d.height),s.width=Math.max(o,1),s.height=Math.max(i,1);const c=s.getContext("2d");c&&(c.save(),c.drawImage(d,0,0,o,i),l.Util.releaseCanvas(d),c.globalCompositeOperation="source-in",c.drawImage(r,0,0,s.width,s.height),c.restore())}return e.useLayoutEffect(()=>{u()},[s,r,a,t.width,t.height,n,...o]),[t.clipSrc&&a?s:r,u]})(t,re,n._elementsPixelRatio,[ee,te,n._elementsPixelRatio]);function ae(){ne(),ie()}const de=Math.max(t.width/G,t.height/J);e.useEffect(()=>{var e;if(!t._cropModeEnabled){return}const r=null===(e=R.current)||void 0===e?void 0:e.getStage();function n(e){t._cropModeEnabled&&e.target!==I.current&&t.toggleCropMode(!1)}function o(e){t._cropModeEnabled&&e.target.parentNode!==r.content&&t.toggleCropMode(!1)}return document.body.addEventListener("click",o),null==r||r.on("click",n),null==r||r.on("tap",n),()=>{document.body.removeEventListener("click",o),document.body.removeEventListener("touchstart",o),null==r||r.off("click",n),null==r||r.off("click",n)}},[t._cropModeEnabled]),e.useLayoutEffect(()=>{if(!g&&!t._cropModeEnabled){return p(R.current,t),r(()=>{p(R.current,t)},{delay:100})}},[P,g,j,B,t._cropModeEnabled]),e.useLayoutEffect(()=>{var e;g||t._cropModeEnabled?null===(e=R.current)||void 0===e||e.clearCache():p(R.current,t)},[g,t.width,t.height,t._cropModeEnabled]),e.useEffect(()=>{p(R.current,t)},[t.shadowEnabled,t.shadowBlur,t.cornerRadius,t.shadowColor,t.shadowOffsetX,t.shadowOffsetY,t.shadowOpacity]);const he=e.useRef(null),ce=e.useRef(null),le=e.useRef(null);e.useLayoutEffect(()=>{t._cropModeEnabled&&(ce.current.nodes([he.current]),le.current.nodes([I.current]))},[t._cropModeEnabled]);const se=e=>{Math.round(e.target.x())>0&&(e.target.x(0),e.target.scaleX(1)),Math.round(e.target.y())>0&&(e.target.y(0),e.target.scaleY(1));const r=e.target.width()*e.target.scaleX(),n=e.target.height()*e.target.scaleY(),o=Math.min(1,G/r),i=Math.min(1,J/n),a=1-o,d=Math.min(a,Math.max(0,Math.round(-e.target.x())/r)),h=1-i,c=Math.min(h,Math.max(0,Math.round(-e.target.y())/n));e.target.setAttrs({x:-d*U,y:-c*Z,scaleX:1,scaleY:1}),t.set({cropX:d,cropY:c,cropWidth:o,cropHeight:i})},ue=()=>{"svg"!==t.type&&t.contentEditable&&setTimeout(()=>{t.toggleCropMode(!0)})},ge="loading"===Y,fe="failed"===Y,me=!ge&&!fe,pe=e.useRef({cropX:0,cropY:0,cropWidth:0,cropHeight:0}),we=me?t.a.opacity:0;w(R,we);const ve=t.selectable||"admin"===n.role,xe=v();return e.createElement(e.Fragment,null,e.createElement(o,{onMouseEnter:()=>O(!0),onMouseLeave:()=>O(!1)},ge&&e.createElement(b,{element:t}),fe&&e.createElement(L,{element:t}),e.createElement(i,{ref:R,name:"element",id:t.id,image:oe,x:t.a.x,y:t.a.y,width:t.a.width||1,height:t.a.height||1,rotation:t.a.rotation,opacity:we,shadowEnabled:t.shadowEnabled,shadowBlur:t.shadowBlur,shadowOffsetX:t.shadowOffsetX,shadowOffsetY:t.shadowOffsetY,shadowColor:t.shadowColor,shadowOpacity:t.shadowOpacity,customCrop:ee,listening:ve,draggable:xe?t.draggable&&S:t.draggable,preventDefault:!xe||S,hideInExport:!t.showInExport,onDragMove:e=>{t.set({x:e.target.x(),y:e.target.y()})},onDragEnd:e=>{t.set({x:e.target.x(),y:e.target.y()})},onDblClick:ue,onDblTap:ue,onTransformStart:()=>{m(!0),pe.current={cropX:t.cropX,cropY:t.cropY,cropWidth:t.cropWidth,cropHeight:t.cropHeight}},onTransform:e=>{var r;const n=e.currentTarget,o=Math.abs(n.scaleX()-1)<1e-7?1:n.scaleX(),i=Math.abs(n.scaleY()-1)<1e-7?1:n.scaleY();n.scaleX(1),n.scaleY(1);const a=null===(r=e.target.getStage())||void 0===r?void 0:r.findOne("Transformer"),d=1-G/U,h=Math.min(d,Math.max(0,t.cropX)),c=1-J/Z,l=Math.min(c,Math.max(0,t.cropY)),s=a.getActiveAnchor(),u=!(s.indexOf("middle")>=0||s.indexOf("center")>=0),g=!u&&o<1&&pe.current.cropHeight>J/Z;let f=u?t.cropWidth:t.cropWidth*o;g&&(f=t.cropWidth);const m=!u&&i<1&&pe.current.cropWidth>G/U;let p=u?t.cropHeight:t.cropHeight*i;m&&(p=t.cropHeight),Q&&(f=t.cropWidth,p=t.cropHeight),t.set({cropX:h,cropY:l,x:n.x(),y:n.y(),width:n.width()*o,height:n.height()*i,rotation:e.target.rotation(),cropWidth:Math.min(f,1-h),cropHeight:Math.min(p,1-l)})},onTransformEnd:e=>{const r=e.currentTarget;t.set({width:r.width(),height:r.height(),x:r.x(),y:r.y(),rotation:e.target.rotation(),cropWidth:G/U,cropHeight:J/Z}),m(!1)}}),e.createElement(a,{x:t.a.x,y:t.a.y,width:Math.max(t.a.width-t.borderSize,0),height:Math.max(t.a.height-t.borderSize,0),opacity:we,offsetX:-t.borderSize/2,offsetY:-t.borderSize/2,stroke:t.borderColor,strokeWidth:t.borderSize,listening:!1,visible:!!t.borderSize,rotation:t.rotation,cornerRadius:Math.max(0,te-t.borderSize),hideInExport:!t.showInExport}),!n.isPlaying&&e.createElement(i,{image:k?(W||xe)&&E:M,x:t.a.x,y:t.a.y,offsetX:-t.a.width/2+15/n.scale,offsetY:-t.a.height/2+15/n.scale,rotation:t.a.rotation,width:30/n.scale,height:30/n.scale,hideInExport:!0,onClick:()=>H(!k),onTap:()=>H(!k)}),t._cropModeEnabled&&e.createElement(s,{selector:".page-abs-container",enabled:!0},e.createElement(a,{x:-window.innerWidth/n.scale,y:-window.innerWidth/n.scale,width:window.innerWidth/n.scale*3,height:window.innerWidth/n.scale*3,fill:"rgba(0,0,0,0.3)"}),e.createElement(i,{listening:!1,image:oe,x:t.a.x,y:t.a.y,width:t.a.width,height:t.a.height,rotation:t.a.rotation,shadowEnabled:t.shadowEnabled,shadowBlur:t.shadowBlur}),e.createElement(o,{x:t.a.x,y:t.a.y,rotation:t.a.rotation,scaleX:de,scaleY:de},e.createElement(i,{image:P,ref:I,opacity:.4,draggable:!0,x:-t.cropX*U,y:-t.cropY*Z,onDragMove:se,onTransform:se}),e.createElement(h,{ref:le,anchorSize:20,enabledAnchors:["top-left","top-right","bottom-left","bottom-right"],boundBoxFunc:(e,t)=>t.width<5||t.height<5?e:t,rotateEnabled:!1,borderEnabled:!1,anchorCornerRadius:10,anchorStrokeWidth:2,borderStrokeWidth:2}),e.createElement(a,{width:G,height:J,ref:he,listening:!1,onTransform:e=>{e.target.x()<-t.cropX*U-1e-9&&(e.target.x(-t.cropX*U),e.target.scaleX(1)),e.target.y()<-t.cropY*Z-1e-9&&(e.target.y(-t.cropY*Z),e.target.scaleY(1));const r=Math.min(1,Math.max(0,t.cropX+e.target.x()/U)),n=Math.min(1,Math.max(0,e.target.y()/Z+t.cropY)),o=e.target.width()*e.target.scaleX(),i=e.target.height()*e.target.scaleY(),a=Math.min(1-r,o/U),d=Math.min(1-n,i/Z),h=e.target.getAbsolutePosition(e.target.getParent().getParent());e.target.scale({x:1,y:1}),e.target.position({x:0,y:0}),t.set({x:h.x,y:h.y,cropX:r,cropY:n,cropWidth:a,cropHeight:d,width:Math.min(o*de,U*(1-r)*de),height:Math.min(i*de,Z*(1-n)*de)})}}),e.createElement(h,{ref:ce,enabledAnchors:["top-left","top-right","bottom-left","bottom-right"],boundBoxFunc:(e,t)=>t.width<5||t.height<5?e:t,keepRatio:!1,rotateEnabled:!1,anchorFill:"rgb(240, 240, 240)",anchorStrokeWidth:2,borderStrokeWidth:2,visible:t.resizable})))))});

package/model/store.d.ts

@@ -136,6 +136,13 @@ export declare const Store: import("mobx-state-tree").IModelType<{
     openedSidePanel: import("mobx-state-tree").IType<string, string, string>;
     previousOpenedSidePanel: import("mobx-state-tree").IType<string, string, string>;
     custom: import("mobx-state-tree").IType<any, any, any>;
+    tool: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
+    toolOptions: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IModelType<{
+        brushType: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
+        strokeWidth: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<number>, [undefined]>;
+        strokeColor: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
+        opacity: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<number>, [undefined]>;
+    }, {}, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>, [undefined]>;
     selectedElementsIds: import("mobx-state-tree").IArrayType<import("mobx-state-tree").ISimpleType<string>>;
     animatedElementsIds: import("mobx-state-tree").IArrayType<import("mobx-state-tree").ISimpleType<string>>;
     history: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IModelType<{
@@ -799,6 +806,13 @@ export declare const Store: import("mobx-state-tree").IModelType<{
         dpi: any;
     }): void;
     setRole(role: string): void;
+    setTool(tool: "selection" | "draw" | "pan" | "text" | "eraser"): void;
+    updateToolOptions(options: Partial<{
+        brushType: "brush" | "highlighter";
+        strokeWidth: number;
+        strokeColor: string;
+        opacity: number;
+    }>): void;
     addPage(attrs?: any): import("mobx-state-tree").ModelInstanceTypeProps<{
         id: import("mobx-state-tree").ISimpleType<string>;
         children: import("mobx-state-tree").IArrayType<any>;

package/model/store.js

@@ -1 +1 @@
-var e=this&&this.__rest||function(e,t){var i={};for(var o in e){Object.prototype.hasOwnProperty.call(e,o)&&t.indexOf(o)<0&&(i[o]=e[o])}if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var n=0;for(o=Object.getOwnPropertySymbols(e);n<o.length;n++){t.indexOf(o[n])<0&&Object.prototype.propertyIsEnumerable.call(e,o[n])&&(i[o[n]]=e[o[n]])}}return i};import{applySnapshot as t,cast as i,destroy as o,detach as n,getSnapshot as a,onSnapshot as s,setLivelinessChecking as r,types as l}from"mobx-state-tree";import{UndoManager as d}from"./history.js";import{nanoid as c}from"nanoid";import p from"konva";import{computed as g}from"mobx";import{downloadFile as m}from"../utils/download.js";import{getJsPDF as u}from"../utils/pdf.js";import{createGIF as f}from"../utils/gif-lib.js";import{validateKey as h}from"../utils/validate-key.js";import*as y from"../utils/fonts.js";import{flags as b}from"../utils/flags.js";import{whenLoaded as w}from"../utils/loader.js";import{pxToUnit as v}from"../utils/unit.js";import{deepEqual as P}from"../utils/deep-equal.js";import{waitTillAvailable as E}from"../utils/wait.js";import{jsonToHTML as x}from"../utils/to-html.js";import{jsonToSVG as _}from"../utils/to-svg.js";import{Page as I}from"./page-model.js";import{forEveryChild as k}from"./group-model.js";import{Audio as S}from"./audio-model.js";r("ignore");export const Font=l.model("Font",{fontFamily:l.string,url:l.optional(l.string,""),styles:l.frozen()}).preProcessSnapshot(e=>Object.assign(Object.assign({},e),{fontFamily:e.fontFamily||e.name}));export const Store=l.model("Store",{role:"",pages:l.array(I),fonts:l.array(Font),audios:l.array(S),width:1080,height:1080,currentTime:0,isPlaying:!1,scale:1,scaleToFit:1,unit:"px",dpi:72,schemaVersion:2,bleedVisible:!1,rulesVisible:!1,openedSidePanel:"",previousOpenedSidePanel:"",custom:l.frozen(),selectedElementsIds:l.array(l.string),animatedElementsIds:l.array(l.string),history:l.optional(d,{targetPath:"../pages"}),_elementsPixelRatio:Math.min(2,"undefined"!=typeof window&&window.devicePixelRatio||1),_activePageId:"",_selectedPagesIds:l.array(l.string),_forceShowCredit:!1,_key:"",_validated:!1}).views(e=>{const t=g(()=>{const t={};return k({children:e.pages},e=>(t[e.id]=e,!1)),t},{keepAlive:!0});return{get _idsMap(){return t.get()}}}).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 k({children:e.selectedElements},e=>{"group"!==e.type&&t.push(e)}),t},get activePage(){return e.pages.slice().find(t=>t.id===e._activePageId)||(e.pages.length?e.pages[0]:null)},get selectedPages(){return e._selectedPagesIds.map(t=>e.pages.find(e=>e.id===t))},get duration(){let t=0;return e.pages.forEach(e=>{t+=e.duration}),t},get _hasCroppedImages(){return e.find(e=>"image"===e.type&&e._cropModeEnabled)},find(t){let i;return k({children:e.pages},e=>{if(!i&&t(e)){return i=e,!0}}),i},getElementById:t=>e._idsMap[t]})).actions(e=>{let t=0,o=null,n=!1;return{afterCreate(){e.history.canUndo},setCurrentTime(t){e.currentTime=t},_togglePlaying(t=!e.isPlaying){e.isPlaying=t},play({animatedElementsIds:a=[],startTime:s=0,currentTime:r=0,endTime:l=e.duration,repeat:d=!1}={}){r&&(console.warn("currentTime property of store.play() is deprecated. Please use startTime instead."),s=r),e.animatedElementsIds=i(a),e.currentTime=s,e.isPlaying=!0,t=Date.now(),o=l,n=d,requestAnimationFrame(e.seek)},checkActivePage(){let t=0;for(const i of e.pages){if(e.currentTime>=i.startTime&&e.currentTime<i.startTime+i.duration){e.selectPage(i.id);break}t+=i.duration}},seek(){if(!e.isPlaying){return}const i=Date.now(),a=i-t;t=i,e.currentTime+=a,e.checkActivePage();const s=o||e.duration;e.isPlaying&&e.currentTime<s?requestAnimationFrame(e.seek):e.isPlaying&&n?(e.currentTime=0,requestAnimationFrame(e.seek)):e.stop()},stop(){e.isPlaying=!1,e.currentTime=0,e.animatedElementsIds=i([]),e.checkActivePage()}}}).actions(r=>({__(){r._validated||(h(r._key,r._forceShowCredit),r._validated=!0)},set(e){Object.assign(r,e)},setUnit({unit:e,dpi:t}){r.unit=e||r.unit,r.dpi=t||r.dpi},setRole(e){r.role=e},addPage(e){const t=I.create(Object.assign({id:c(10)},e));return r.pages.push(t),r._activePageId=t.id,t},selectPage(e){r._activePageId=e,1===r._selectedPagesIds.length&&(r._selectedPagesIds=i([e]))},selectPages(e){r._selectedPagesIds=i(e),1===r._selectedPagesIds.length&&(r._activePageId=r._selectedPagesIds[0])},selectElements(e){const t=e.map(e=>r.getElementById(e)).sort((e,t)=>e.page.children.indexOf(e)-e.page.children.indexOf(t)).filter(e=>!!e).map(e=>e.id);r.selectedElementsIds=i(t)},toggleBleed(e){r.bleedVisible=null!=e?e:!r.bleedVisible},toggleRulers(e){r.rulesVisible=null!=e?e:!r.rulesVisible},openSidePanel(e){r.openedSidePanel!==e&&(r.previousOpenedSidePanel=r.openedSidePanel,r.openedSidePanel=e)},setScale(e){r.scale=e},_setScaleToFit(e){r.scaleToFit=e},setElementsPixelRatio(e){r._elementsPixelRatio=e},setSize(e,t,i){r.pages.forEach(o=>{o.setSize({width:e,height:t,useMagic:i,softChange:!0})}),r.width=e,r.height=t},setPageZIndex(e,t){const i=r.pages.find(t=>t.id===e);i&&(n(i),r.pages.remove(i),r.pages.splice(t,0,i))},deletePages(e){const t=r.pages.indexOf(r.activePage);e.forEach(e=>{const t=r.pages.find(t=>t.id===e);o(t)});const n=Math.min(r.pages.length-1,t),a=r.pages[n];a&&(r._activePageId=a.id),r.selectedElementsIds=i(r.selectedElementsIds.filter(e=>r.getElementById(e)))},groupElements(e,t={}){const o=e.map(e=>r.getElementById(e)),a=o[0].page;if(o.forEach(e=>{e&&n(e)}),!o.length){return}const s=a.children.reduce((e,t)=>{if("group"===t.type){const i=t.name.match(/group-(\d+)/);if(i){const t=parseInt(i[1],10);return Math.max(e,t)}}return e},0),l=Object.assign({id:c(10),name:`group-${s+1}`,children:o,type:"group"},t);return a.children.push(l),r.selectedElementsIds=i([l.id]),a.children.find(e=>e.id===l.id)},ungroupElements(e){const t=e.map(e=>r.getElementById(e)),o=[];t.forEach(e=>{if(e&&"group"===e.type){const t=e.page,i=t.children.indexOf(e);e.children.forEach(e=>{o.push(e.id)}),e.children.forEach(e=>{n(e),t.children.push(e)}),t.children.splice(i,1)}}),r.selectedElementsIds=i(o)},deleteElements(e){const t=[];r.find(i=>(e.includes(i.id)&&t.push(i),!1)),t.forEach(e=>{o(e)}),r.selectedElementsIds=i(r.selectedElementsIds.filter(e=>r.getElementById(e)))},on(e,t){if("change"===e){let e=r.toJSON();return s(r,i=>{const o=r.toJSON();!P(e,o)&&(e=o,t(o))})}},async _toCanvas({pixelRatio:e,ignoreBackground:t,pageId:i,mimeType:o,includeBleed:n,_skipTimeout:a,quickMode:s=!1}={}){var l;const d=e||1;i=i||(null===(l=r.pages[0])||void 0===l?void 0:l.id);const c=r.pages.find(e=>e.id===i);if(!c){throw new Error(`No page for export with id ${i}`)}const g=r._elementsPixelRatio;d>r._elementsPixelRatio&&r.setElementsPixelRatio(d),s?null==c||c.set({_forceMount:!0}):null==c||c.set({_exporting:!0});const m=await E(()=>{const e=p.stages.filter(e=>e.getAttr("pageId")===i);return 0===e.length?null:e});if(!m){throw null==c||c.set({_forceMount:!1,_exporting:!1}),r.setElementsPixelRatio(g),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.`)}m.length>1&&console.error(`Polotno error: Detected several canvas elements for page "${i}" in the document. This is not supported and will lead to incorrect export. Make sure to use unique ids for all pages and make sure you unmount <Workspace /> when it is not needed.`);const u=m[0];await r.waitLoading({_skipTimeout:a});const f=u.findOne(".page-container");if(!f){throw r.setElementsPixelRatio(g),null==c||c.set({_forceMount:!1,_exporting:!1}),new Error("Export is failed. Canvas was unmounted.")}const h=u.position();u.position({x:0,y:0}),u.find("Transformer").forEach(e=>{e.setAttr("oldVisible",e.visible()),e.visible(!1)}),f.find(".page-background").forEach(e=>e.shadowEnabled(!1)),f.find(".page-background").forEach(e=>e.strokeEnabled(!1)),f.find(".highlighter").forEach(e=>e.visible(!1));const y=f.findOne(".page-background-group"),b=y.clip();y.clip({x:null,y:null,width:null,height:null});const w=f.findOne(".elements-container"),v=w.clip();w.clip({x:null,y:null,width:null,height:null});const P=f.find(e=>!e.visible()&&e.getAttr("editModeEnabled")&&!e.getAttr("hideInExport"));P.forEach(e=>{e.setAttr("oldVisible",e.visible()),e.show()});const x=f.find(e=>e.getAttr("hideInExport"));x.forEach(e=>{e.setAttr("oldVisible",e.visible()),e.hide()}),t&&f.find(".page-background").forEach(e=>e.hide());const _=n?c.bleed:0;let I=_;!r.bleedVisible&&n||(r.bleedVisible||n?r.bleedVisible&&n?I=0:r.bleedVisible&&!n&&(I=-c.bleed):I=0);const k=document.createElement("canvas");k.width=Math.round((c.computedWidth+2*_)*d),k.height=Math.round((c.computedHeight+2*_)*d);const S=k.getContext("2d");"image/jpeg"===o&&(S.fillStyle="white",S.fillRect(0,0,k.width,k.height));const O=f.scale();f.scale({x:1,y:1});const j=f.toCanvas({x:f.x()-I,y:f.y()-I,width:c.computedWidth+2*_,height:c.computedHeight+2*_,pixelRatio:d});return f.scale(O),S.drawImage(j,0,0,k.width,k.height),p.Util.releaseCanvas(j),t&&f.find(".page-background").forEach(e=>e.show()),x.forEach(e=>{e.visible(e.getAttr("oldVisible"))}),P.forEach(e=>{e.visible(e.getAttr("oldVisible"))}),f.find(".page-background").forEach(e=>e.shadowEnabled(!0)),f.find(".page-background").forEach(e=>e.strokeEnabled(!0)),u.find("Transformer").forEach(e=>{e.visible(e.getAttr("oldVisible"))}),f.find(".highlighter").forEach(e=>e.visible(!0)),y.clip(b),w.clip(v),u.position(h),null==c||c.set({_exporting:!1,_forceMount:!1}),await new Promise(e=>setTimeout(e)),r.setElementsPixelRatio(g),k},async toDataURL(t={}){var{mimeType:i,quality:o}=t,n=e(t,["mimeType","quality"]);const a=await r._toCanvas(Object.assign({mimeType:i},n)),s=a.toDataURL(i,o);return p.Util.releaseCanvas(a),s},async toBlob(t={}){var{mimeType:i,quality:o}=t,n=e(t,["mimeType","quality"]);const a=await r._toCanvas(Object.assign({mimeType:i},n)),s=await new Promise(e=>{a.toBlob(e,i,o)});return p.Util.releaseCanvas(a),s},async saveAsImage(t={}){var{fileName:i}=t,o=e(t,["fileName"]);const n=o.mimeType||"image/png",a=n.split("/")[1];m(await r.toDataURL(o),i||"polotno."+a,n)},async _toPDF(e){const t=e.dpi||r.dpi,i=e.parallel||1,o=e.unit||("px"===r.unit?"mm":r.unit),n=e.pixelRatio||1,a=e.pageIds||r.pages.map(e=>e.id),s=r.pages.filter(e=>a.includes(e.id)),l=await u(),d=e=>v({px:e,unit:o,dpi:t}),c=e.cropMarkSize||0,p=d(c),g=s[0]||{},m=e.includeBleed?g.bleed:0,f=d(g.computedWidth+2*m+2*p),h=d(g.computedHeight+2*m+2*p);var y=new l({unit:o,orientation:f>h?"landscape":"portrait",format:[f,h],compress:!0,putOnlyUsedFonts:!0});y.deletePage(1);const b=((e,t)=>{for(var i=[],o=0;o<e.length;o+=t){i.push(e.slice(o,o+t))}return i})(s,i);let w=0;for(const u of b){const t=u.map(async t=>{const i=e.includeBleed?t.bleed:0,o=t.computedWidth+2*i+2*c,s=t.computedHeight+2*i+2*c,l=d(o),p=d(s);let g=0,m=n;for(;g<10;){g+=1,2===g&&console.error("Polotno can not export PDF with current settings. Quality is automatically reduced.");const i=await r.toDataURL(Object.assign(Object.assign({},e),{pageId:t.id,pixelRatio:m}));if(i.length>20){return e.onProgress&&e.onProgress(++w/a.length*.9),{url:i,width:l,height:p,widthPx:o,heightPx:s}}m*=.8}});(await Promise.all(t)).forEach(({url:e,width:t,height:i,widthPx:n,heightPx:a})=>{y.addPage([t,i],t>i?"landscape":"portrait");const s=y.getCurrentPageInfo();var r;switch(o){case"pt":r=1;break;case"mm":r=72/25.4;break;case"cm":r=72/2.54;break;case"in":r=72;break;case"px":r=.75;break;case"pc":case"em":r=12;break;case"ex":r=6;break;default:throw"Invalid unit: "+o}if(s.pageContext.cropBox={bottomLeftX:0,bottomLeftY:0,topRightX:t*r,topRightY:i*r},s.pageContext.artBox={bottomLeftX:d(c+m)*r,bottomLeftY:d(c+m)*r,topRightX:d(n-c-m)*r,topRightY:d(a-c-m)*r},s.pageContext.bleedBox={bottomLeftX:d(c+m)*r,bottomLeftY:d(c+m)*r,topRightX:d(n-c-m)*r,topRightY:d(a-c-m)*r},p){y.setLineWidth(d(1));const e=p+d(m);y.line(e,0,e,p),y.line(0,e,p,e),y.line(t-e,0,t-e,p),y.line(t,e,t-p,e),y.line(0,i-e,p,i-e),y.line(e,i,e,i-p),y.line(t,i-e,t-p,i-e),y.line(t-e,i,t-e,i-p)}y.addImage(e,p,p,t-2*p,i-2*p,void 0,"FAST")})}return y},toPDFDataURL:async e=>(await r._toPDF(Object.assign({mimeType:"image/jpeg"},e))).output("datauristring"),async toGIFDataURL(e={}){const t=e.pixelRatio||1,i=await f({width:r.width*t,height:r.height*t}),o=1e3/(e.fps||10),n=r.duration/o;for(let a=0;a<n-1;a++){const e=a*o||1;r.setCurrentTime(e);let n=0,s="";for(const t of r.pages){if(n+=t.duration,t.set({_rendering:n>e}),n>e){s=t.id;break}}const l=await r._toCanvas({pixelRatio:t,pageId:s,_skipTimeout:!0});i.addFrame(l.getContext("2d"),{delay:o,copy:!0})}for(const a of r.pages){a.set({_rendering:!1})}return r.stop(),i.render(),new Promise(e=>{i.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,o=e(t,["fileName"]);const n=await r.toGIFDataURL(o);m(n,i||"polotno.gif")},async toHTML({elementHook:e}={elementHook:void 0}){const t=r.toJSON();return x({json:t,elementHook:e})},async saveAsHTML({fileName:e,elementHook:t}={}){const i=await r.toHTML({elementHook:t}),o="data:text/html;base64,"+window.btoa(unescape(encodeURIComponent(i)));m(o,e||"polotno.html")},async toSVG({elementHook:e,pageId:t,fontEmbedding:i="inline"}={fontEmbedding:"inline"}){var o;const n=r.toJSON();t=t||(null===(o=n.pages[0])||void 0===o?void 0:o.id);const a=n.pages.find(e=>e.id===t);return _({json:Object.assign(Object.assign({},n),{pages:a?[a]:[]}),elementHook:e,fontEmbedding:i})},async saveAsSVG({fileName:e,elementHook:t,pageId:i,fontEmbedding:o="inline"}={}){const n=await r.toSVG({elementHook:t,pageId:i,fontEmbedding:o}),a="data:text/svg;base64,"+window.btoa(unescape(encodeURIComponent(n)));m(a,e||"polotno.svg")},async saveAsPDF(t={}){var{fileName:i}=t,o=e(t,["fileName"]);(await r._toPDF(Object.assign({mimeType:"image/jpeg"},o))).save(i||"polotno.pdf")},async waitLoading({_skipTimeout:e=!1}={}){e||await new Promise(e=>setTimeout(e,50)),await w()},toJSON:()=>({width:r.width,height:r.height,fonts:a(r.fonts),pages:a(r.pages),audios:a(r.audios),unit:r.unit,dpi:r.dpi,custom:r.custom,schemaVersion:r.schemaVersion}),loadJSON(e,i=!1){var o;const n=JSON.parse(JSON.stringify(e)),s=n.schemaVersion||0;s<1&&b.htmlRenderEnabled&&k({children:n.pages},e=>{if("text"===e.type){const t=16,i=e.letterSpacing*t;e.letterSpacing=i/e.fontSize}}),s<2&&k({children:n.pages},e=>{e.filters&&Object.keys(e.filters).forEach(t=>{if(["warm","cold","natural"].includes(t)){return}const i=e.filters[t];i&&"number"==typeof i.intensity&&(i.intensity=i.intensity/100)})}),delete n.schemaVersion;const l=r.pages.indexOf(r.activePage);let d=null===(o=n.pages[l]||n.pages[0])||void 0===o?void 0:o.id;n._activePageId=d;const c=Object.assign({},a(r));Object.assign(c,n),c.history=i?r.history.toJSON():{history:[],undoIdx:-1},t(r,c)},clear({keepHistory:e=!1}={}){const t=r.pages.map(e=>e.id);r.deletePages(t),r.custom=null,e||r.history.clear()},addFont(e){r.removeFont(e.fontFamily),r.fonts.push(e),r.loadFont(e.fontFamily)},removeFont(e){r.fonts.filter(t=>t.fontFamily===e).forEach(e=>o(e))},addAudio(e){const t=S.create(Object.assign({id:c(10)},e));r.audios.push(t)},removeAudio(e){const t=r.audios.find(t=>t.id===e);t&&r.audios.remove(t)},async loadFont(e,t=""){const i=r.fonts.find(t=>t.fontFamily===e)||y.globalFonts.find(t=>t.fontFamily===e);let o=[{fontStyle:"normal",fontWeight:"normal"},{fontStyle:"normal",fontWeight:"bold"}];return i?(i.styles&&(o=i.styles.map(e=>({fontStyle:e.fontStyle||"normal",fontWeight:e.fontWeight||"normal"}))),y.injectCustomFont(i)):y.injectGoogleFont(e),Promise.all(o.map(i=>y.loadFont(e,i.fontStyle,i.fontWeight,t)))},validate:e=>Store.validate(e,[{path:"",type:Store}]).map(e=>({path:"store"+e.context.map(e=>e.path).join("."),message:e.message}))}));export function createStore({key:e,showCredit:t}={key:"",showCredit:!1}){return Store.create({_forceShowCredit:t,_key:e})}export default createStore;
+var e=this&&this.__rest||function(e,t){var i={};for(var o in e){Object.prototype.hasOwnProperty.call(e,o)&&t.indexOf(o)<0&&(i[o]=e[o])}if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var n=0;for(o=Object.getOwnPropertySymbols(e);n<o.length;n++){t.indexOf(o[n])<0&&Object.prototype.propertyIsEnumerable.call(e,o[n])&&(i[o[n]]=e[o[n]])}}return i};import{applySnapshot as t,cast as i,destroy as o,detach as n,getSnapshot as a,onSnapshot as s,setLivelinessChecking as r,types as l}from"mobx-state-tree";import{UndoManager as d}from"./history.js";import{nanoid as c}from"nanoid";import p from"konva";import{computed as g}from"mobx";import{downloadFile as m}from"../utils/download.js";import{getJsPDF as u}from"../utils/pdf.js";import{createGIF as f}from"../utils/gif-lib.js";import{validateKey as h}from"../utils/validate-key.js";import*as b from"../utils/fonts.js";import{flags as y}from"../utils/flags.js";import{whenLoaded as w}from"../utils/loader.js";import{pxToUnit as v}from"../utils/unit.js";import{deepEqual as P}from"../utils/deep-equal.js";import{waitTillAvailable as E}from"../utils/wait.js";import{jsonToHTML as x}from"../utils/to-html.js";import{jsonToSVG as _}from"../utils/to-svg.js";import{Page as k}from"./page-model.js";import{forEveryChild as I}from"./group-model.js";import{Audio as O}from"./audio-model.js";r("ignore");export const Font=l.model("Font",{fontFamily:l.string,url:l.optional(l.string,""),styles:l.frozen()}).preProcessSnapshot(e=>Object.assign(Object.assign({},e),{fontFamily:e.fontFamily||e.name}));export const Store=l.model("Store",{role:"",pages:l.array(k),fonts:l.array(Font),audios:l.array(O),width:1080,height:1080,currentTime:0,isPlaying:!1,scale:1,scaleToFit:1,unit:"px",dpi:72,schemaVersion:2,bleedVisible:!1,rulesVisible:!1,openedSidePanel:"",previousOpenedSidePanel:"",custom:l.frozen(),tool:l.optional(l.enumeration("Tool",["selection","draw","pan","text","eraser"]),"selection"),toolOptions:l.optional(l.model({brushType:l.optional(l.enumeration("BrushType",["brush","highlighter"]),"brush"),strokeWidth:l.optional(l.number,5),strokeColor:l.optional(l.string,"#000000"),opacity:l.optional(l.number,1)}),{}),selectedElementsIds:l.array(l.string),animatedElementsIds:l.array(l.string),history:l.optional(d,{targetPath:"../pages"}),_elementsPixelRatio:Math.min(2,"undefined"!=typeof window&&window.devicePixelRatio||1),_activePageId:"",_selectedPagesIds:l.array(l.string),_forceShowCredit:!1,_key:"",_validated:!1}).views(e=>{const t=g(()=>{const t={};return I({children:e.pages},e=>(t[e.id]=e,!1)),t},{keepAlive:!0});return{get _idsMap(){return t.get()}}}).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 I({children:e.selectedElements},e=>{"group"!==e.type&&t.push(e)}),t},get activePage(){return e.pages.slice().find(t=>t.id===e._activePageId)||(e.pages.length?e.pages[0]:null)},get selectedPages(){return e._selectedPagesIds.map(t=>e.pages.find(e=>e.id===t))},get duration(){let t=0;return e.pages.forEach(e=>{t+=e.duration}),t},get _hasCroppedImages(){return e.find(e=>"image"===e.type&&e._cropModeEnabled)},find(t){let i;return I({children:e.pages},e=>{if(!i&&t(e)){return i=e,!0}}),i},getElementById:t=>e._idsMap[t]})).actions(e=>{let t=0,o=null,n=!1;return{afterCreate(){e.history.canUndo},setCurrentTime(t){e.currentTime=t},_togglePlaying(t=!e.isPlaying){e.isPlaying=t},play({animatedElementsIds:a=[],startTime:s=0,currentTime:r=0,endTime:l=e.duration,repeat:d=!1}={}){r&&(console.warn("currentTime property of store.play() is deprecated. Please use startTime instead."),s=r),e.animatedElementsIds=i(a),e.currentTime=s,e.isPlaying=!0,t=Date.now(),o=l,n=d,requestAnimationFrame(e.seek)},checkActivePage(){let t=0;for(const i of e.pages){if(e.currentTime>=i.startTime&&e.currentTime<i.startTime+i.duration){e.selectPage(i.id);break}t+=i.duration}},seek(){if(!e.isPlaying){return}const i=Date.now(),a=i-t;t=i,e.currentTime+=a,e.checkActivePage();const s=o||e.duration;e.isPlaying&&e.currentTime<s?requestAnimationFrame(e.seek):e.isPlaying&&n?(e.currentTime=0,requestAnimationFrame(e.seek)):e.stop()},stop(){e.isPlaying=!1,e.currentTime=0,e.animatedElementsIds=i([]),e.checkActivePage()}}}).actions(r=>({__(){r._validated||(h(r._key,r._forceShowCredit),r._validated=!0)},set(e){Object.assign(r,e)},setUnit({unit:e,dpi:t}){r.unit=e||r.unit,r.dpi=t||r.dpi},setRole(e){r.role=e},setTool(e){r.tool=e},updateToolOptions(e){Object.assign(r.toolOptions,e)},addPage(e){const t=k.create(Object.assign({id:c(10)},e));return r.pages.push(t),r._activePageId=t.id,t},selectPage(e){r._activePageId=e,1===r._selectedPagesIds.length&&(r._selectedPagesIds=i([e]))},selectPages(e){r._selectedPagesIds=i(e),1===r._selectedPagesIds.length&&(r._activePageId=r._selectedPagesIds[0])},selectElements(e){const t=e.map(e=>r.getElementById(e)).sort((e,t)=>e.page.children.indexOf(e)-e.page.children.indexOf(t)).filter(e=>!!e).map(e=>e.id);r.selectedElementsIds=i(t)},toggleBleed(e){r.bleedVisible=null!=e?e:!r.bleedVisible},toggleRulers(e){r.rulesVisible=null!=e?e:!r.rulesVisible},openSidePanel(e){r.openedSidePanel!==e&&(r.previousOpenedSidePanel=r.openedSidePanel,r.openedSidePanel=e)},setScale(e){r.scale=e},_setScaleToFit(e){r.scaleToFit=e},setElementsPixelRatio(e){r._elementsPixelRatio=e},setSize(e,t,i){r.pages.forEach(o=>{o.setSize({width:e,height:t,useMagic:i,softChange:!0})}),r.width=e,r.height=t},setPageZIndex(e,t){const i=r.pages.find(t=>t.id===e);i&&(n(i),r.pages.remove(i),r.pages.splice(t,0,i))},deletePages(e){const t=r.pages.indexOf(r.activePage);e.forEach(e=>{const t=r.pages.find(t=>t.id===e);o(t)});const n=Math.min(r.pages.length-1,t),a=r.pages[n];a&&(r._activePageId=a.id),r.selectedElementsIds=i(r.selectedElementsIds.filter(e=>r.getElementById(e)))},groupElements(e,t={}){const o=e.map(e=>r.getElementById(e)),a=o[0].page;if(o.forEach(e=>{e&&n(e)}),!o.length){return}const s=a.children.reduce((e,t)=>{if("group"===t.type){const i=t.name.match(/group-(\d+)/);if(i){const t=parseInt(i[1],10);return Math.max(e,t)}}return e},0),l=Object.assign({id:c(10),name:`group-${s+1}`,children:o,type:"group"},t);return a.children.push(l),r.selectedElementsIds=i([l.id]),a.children.find(e=>e.id===l.id)},ungroupElements(e){const t=e.map(e=>r.getElementById(e)),o=[];t.forEach(e=>{if(e&&"group"===e.type){const t=e.page,i=t.children.indexOf(e);e.children.forEach(e=>{o.push(e.id)}),e.children.forEach(e=>{n(e),t.children.push(e)}),t.children.splice(i,1)}}),r.selectedElementsIds=i(o)},deleteElements(e){const t=[];r.find(i=>(e.includes(i.id)&&t.push(i),!1)),t.forEach(e=>{o(e)}),r.selectedElementsIds=i(r.selectedElementsIds.filter(e=>r.getElementById(e)))},on(e,t){if("change"===e){let e=r.toJSON();return s(r,i=>{const o=r.toJSON();!P(e,o)&&(e=o,t(o))})}},async _toCanvas({pixelRatio:e,ignoreBackground:t,pageId:i,mimeType:o,includeBleed:n,_skipTimeout:a,quickMode:s=!1}={}){var l;const d=e||1;i=i||(null===(l=r.pages[0])||void 0===l?void 0:l.id);const c=r.pages.find(e=>e.id===i);if(!c){throw new Error(`No page for export with id ${i}`)}const g=r._elementsPixelRatio;d>r._elementsPixelRatio&&r.setElementsPixelRatio(d),s?null==c||c.set({_forceMount:!0}):null==c||c.set({_exporting:!0});const m=await E(()=>{const e=p.stages.filter(e=>e.getAttr("pageId")===i);return 0===e.length?null:e});if(!m){throw null==c||c.set({_forceMount:!1,_exporting:!1}),r.setElementsPixelRatio(g),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.`)}m.length>1&&console.error(`Polotno error: Detected several canvas elements for page "${i}" in the document. This is not supported and will lead to incorrect export. Make sure to use unique ids for all pages and make sure you unmount <Workspace /> when it is not needed.`);const u=m[0];await r.waitLoading({_skipTimeout:a});const f=u.findOne(".page-container");if(!f){throw r.setElementsPixelRatio(g),null==c||c.set({_forceMount:!1,_exporting:!1}),new Error("Export is failed. Canvas was unmounted.")}const h=u.position();u.position({x:0,y:0}),u.find("Transformer").forEach(e=>{e.setAttr("oldVisible",e.visible()),e.visible(!1)}),f.find(".page-background").forEach(e=>e.shadowEnabled(!1)),f.find(".page-background").forEach(e=>e.strokeEnabled(!1)),f.find(".highlighter").forEach(e=>e.visible(!1));const b=f.findOne(".page-background-group"),y=b.clip();b.clip({x:null,y:null,width:null,height:null});const w=f.findOne(".elements-container"),v=w.clip();w.clip({x:null,y:null,width:null,height:null});const P=f.find(e=>!e.visible()&&e.getAttr("editModeEnabled")&&!e.getAttr("hideInExport"));P.forEach(e=>{e.setAttr("oldVisible",e.visible()),e.show()});const x=f.find(e=>e.getAttr("hideInExport"));x.forEach(e=>{e.setAttr("oldVisible",e.visible()),e.hide()}),t&&f.find(".page-background").forEach(e=>e.hide());const _=n?c.bleed:0;let k=_;!r.bleedVisible&&n||(r.bleedVisible||n?r.bleedVisible&&n?k=0:r.bleedVisible&&!n&&(k=-c.bleed):k=0);const I=document.createElement("canvas");I.width=Math.round((c.computedWidth+2*_)*d),I.height=Math.round((c.computedHeight+2*_)*d);const O=I.getContext("2d");"image/jpeg"===o&&(O.fillStyle="white",O.fillRect(0,0,I.width,I.height));const T=f.scale();f.scale({x:1,y:1});const S=f.toCanvas({x:f.x()-k,y:f.y()-k,width:c.computedWidth+2*_,height:c.computedHeight+2*_,pixelRatio:d});return f.scale(T),O.drawImage(S,0,0,I.width,I.height),p.Util.releaseCanvas(S),t&&f.find(".page-background").forEach(e=>e.show()),x.forEach(e=>{e.visible(e.getAttr("oldVisible"))}),P.forEach(e=>{e.visible(e.getAttr("oldVisible"))}),f.find(".page-background").forEach(e=>e.shadowEnabled(!0)),f.find(".page-background").forEach(e=>e.strokeEnabled(!0)),u.find("Transformer").forEach(e=>{e.visible(e.getAttr("oldVisible"))}),f.find(".highlighter").forEach(e=>e.visible(!0)),b.clip(y),w.clip(v),u.position(h),null==c||c.set({_exporting:!1,_forceMount:!1}),await new Promise(e=>setTimeout(e)),r.setElementsPixelRatio(g),I},async toDataURL(t={}){var{mimeType:i,quality:o}=t,n=e(t,["mimeType","quality"]);const a=await r._toCanvas(Object.assign({mimeType:i},n)),s=a.toDataURL(i,o);return p.Util.releaseCanvas(a),s},async toBlob(t={}){var{mimeType:i,quality:o}=t,n=e(t,["mimeType","quality"]);const a=await r._toCanvas(Object.assign({mimeType:i},n)),s=await new Promise(e=>{a.toBlob(e,i,o)});return p.Util.releaseCanvas(a),s},async saveAsImage(t={}){var{fileName:i}=t,o=e(t,["fileName"]);const n=o.mimeType||"image/png",a=n.split("/")[1];m(await r.toDataURL(o),i||"polotno."+a,n)},async _toPDF(e){const t=e.dpi||r.dpi,i=e.parallel||1,o=e.unit||("px"===r.unit?"mm":r.unit),n=e.pixelRatio||1,a=e.pageIds||r.pages.map(e=>e.id),s=r.pages.filter(e=>a.includes(e.id)),l=await u(),d=e=>v({px:e,unit:o,dpi:t}),c=e.cropMarkSize||0,p=d(c),g=s[0]||{},m=e.includeBleed?g.bleed:0,f=d(g.computedWidth+2*m+2*p),h=d(g.computedHeight+2*m+2*p);var b=new l({unit:o,orientation:f>h?"landscape":"portrait",format:[f,h],compress:!0,putOnlyUsedFonts:!0});b.deletePage(1);const y=((e,t)=>{for(var i=[],o=0;o<e.length;o+=t){i.push(e.slice(o,o+t))}return i})(s,i);let w=0;for(const u of y){const t=u.map(async t=>{const i=e.includeBleed?t.bleed:0,o=t.computedWidth+2*i+2*c,s=t.computedHeight+2*i+2*c,l=d(o),p=d(s);let g=0,m=n;for(;g<10;){g+=1,2===g&&console.error("Polotno can not export PDF with current settings. Quality is automatically reduced.");const i=await r.toDataURL(Object.assign(Object.assign({},e),{pageId:t.id,pixelRatio:m}));if(i.length>20){return e.onProgress&&e.onProgress(++w/a.length*.9),{url:i,width:l,height:p,widthPx:o,heightPx:s}}m*=.8}});(await Promise.all(t)).forEach(({url:e,width:t,height:i,widthPx:n,heightPx:a})=>{b.addPage([t,i],t>i?"landscape":"portrait");const s=b.getCurrentPageInfo();var r;switch(o){case"pt":r=1;break;case"mm":r=72/25.4;break;case"cm":r=72/2.54;break;case"in":r=72;break;case"px":r=.75;break;case"pc":case"em":r=12;break;case"ex":r=6;break;default:throw"Invalid unit: "+o}if(s.pageContext.cropBox={bottomLeftX:0,bottomLeftY:0,topRightX:t*r,topRightY:i*r},s.pageContext.artBox={bottomLeftX:d(c+m)*r,bottomLeftY:d(c+m)*r,topRightX:d(n-c-m)*r,topRightY:d(a-c-m)*r},s.pageContext.bleedBox={bottomLeftX:d(c+m)*r,bottomLeftY:d(c+m)*r,topRightX:d(n-c-m)*r,topRightY:d(a-c-m)*r},p){b.setLineWidth(d(1));const e=p+d(m);b.line(e,0,e,p),b.line(0,e,p,e),b.line(t-e,0,t-e,p),b.line(t,e,t-p,e),b.line(0,i-e,p,i-e),b.line(e,i,e,i-p),b.line(t,i-e,t-p,i-e),b.line(t-e,i,t-e,i-p)}b.addImage(e,p,p,t-2*p,i-2*p,void 0,"FAST")})}return b},toPDFDataURL:async e=>(await r._toPDF(Object.assign({mimeType:"image/jpeg"},e))).output("datauristring"),async toGIFDataURL(e={}){const t=e.pixelRatio||1,i=await f({width:r.width*t,height:r.height*t}),o=1e3/(e.fps||10),n=r.duration/o;for(let a=0;a<n-1;a++){const e=a*o||1;r.setCurrentTime(e);let n=0,s="";for(const t of r.pages){if(n+=t.duration,t.set({_rendering:n>e}),n>e){s=t.id;break}}const l=await r._toCanvas({pixelRatio:t,pageId:s,_skipTimeout:!0});i.addFrame(l.getContext("2d"),{delay:o,copy:!0})}for(const a of r.pages){a.set({_rendering:!1})}return r.stop(),i.render(),new Promise(e=>{i.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,o=e(t,["fileName"]);const n=await r.toGIFDataURL(o);m(n,i||"polotno.gif")},async toHTML({elementHook:e}={elementHook:void 0}){const t=r.toJSON();return x({json:t,elementHook:e})},async saveAsHTML({fileName:e,elementHook:t}={}){const i=await r.toHTML({elementHook:t}),o="data:text/html;base64,"+window.btoa(unescape(encodeURIComponent(i)));m(o,e||"polotno.html")},async toSVG({elementHook:e,pageId:t,fontEmbedding:i="inline"}={fontEmbedding:"inline"}){var o;const n=r.toJSON();t=t||(null===(o=n.pages[0])||void 0===o?void 0:o.id);const a=n.pages.find(e=>e.id===t);return _({json:Object.assign(Object.assign({},n),{pages:a?[a]:[]}),elementHook:e,fontEmbedding:i})},async saveAsSVG({fileName:e,elementHook:t,pageId:i,fontEmbedding:o="inline"}={}){const n=await r.toSVG({elementHook:t,pageId:i,fontEmbedding:o}),a="data:text/svg;base64,"+window.btoa(unescape(encodeURIComponent(n)));m(a,e||"polotno.svg")},async saveAsPDF(t={}){var{fileName:i}=t,o=e(t,["fileName"]);(await r._toPDF(Object.assign({mimeType:"image/jpeg"},o))).save(i||"polotno.pdf")},async waitLoading({_skipTimeout:e=!1}={}){e||await new Promise(e=>setTimeout(e,50)),await w()},toJSON:()=>({width:r.width,height:r.height,fonts:a(r.fonts),pages:a(r.pages),audios:a(r.audios),unit:r.unit,dpi:r.dpi,custom:r.custom,schemaVersion:r.schemaVersion}),loadJSON(e,i=!1){var o;const n=JSON.parse(JSON.stringify(e)),s=n.schemaVersion||0;s<1&&y.htmlRenderEnabled&&I({children:n.pages},e=>{if("text"===e.type){const t=16,i=e.letterSpacing*t;e.letterSpacing=i/e.fontSize}}),s<2&&I({children:n.pages},e=>{e.filters&&Object.keys(e.filters).forEach(t=>{if(["warm","cold","natural"].includes(t)){return}const i=e.filters[t];i&&"number"==typeof i.intensity&&(i.intensity=i.intensity/100)})}),delete n.schemaVersion;const l=r.pages.indexOf(r.activePage);let d=null===(o=n.pages[l]||n.pages[0])||void 0===o?void 0:o.id;n._activePageId=d;const c=Object.assign({},a(r));Object.assign(c,n),c.history=i?r.history.toJSON():{history:[],undoIdx:-1},t(r,c)},clear({keepHistory:e=!1}={}){const t=r.pages.map(e=>e.id);r.deletePages(t),r.custom=null,e||r.history.clear()},addFont(e){r.removeFont(e.fontFamily),r.fonts.push(e),r.loadFont(e.fontFamily)},removeFont(e){r.fonts.filter(t=>t.fontFamily===e).forEach(e=>o(e))},addAudio(e){const t=O.create(Object.assign({id:c(10)},e));r.audios.push(t)},removeAudio(e){const t=r.audios.find(t=>t.id===e);t&&r.audios.remove(t)},async loadFont(e,t=""){const i=r.fonts.find(t=>t.fontFamily===e)||b.globalFonts.find(t=>t.fontFamily===e);let o=[{fontStyle:"normal",fontWeight:"normal"},{fontStyle:"normal",fontWeight:"bold"}];return i?(i.styles&&(o=i.styles.map(e=>({fontStyle:e.fontStyle||"normal",fontWeight:e.fontWeight||"normal"}))),b.injectCustomFont(i)):b.injectGoogleFont(e),Promise.all(o.map(i=>b.loadFont(e,i.fontStyle,i.fontWeight,t)))},validate:e=>Store.validate(e,[{path:"",type:Store}]).map(e=>({path:"store"+e.context.map(e=>e.path).join("."),message:e.message}))}));export function createStore({key:e,showCredit:t}={key:"",showCredit:!1}){return Store.create({_forceShowCredit:t,_key:e})}export default createStore;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "polotno",
-  "version": "2.29.5",
+  "version": "2.30.0",
   "description": "Design Editor Framework",
   "author": "Anton Lavrenov",
   "keywords": [
@@ -66,7 +66,7 @@
     "functions-have-names": "^1.2.3",
     "gifuct-js": "^2.1.2",
     "gradient-parser": "^1.1.1",
-    "konva": "^10.0.4",
+    "konva": "^10.0.5",
     "mensch": "^0.3.4",
     "mobx": "6.13.7",
     "mobx-react-lite": "^4.1.0",