npm - polotno - Versions diffs - 2.30.2 → 2.31.0 - Mend

polotno 2.30.2 → 2.31.0

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

Files changed (16) hide show

package/canvas/drawing-layer.js +1 -1
package/canvas/hotkeys.js +1 -1
package/canvas/page.js +1 -1
package/canvas/video-element.js +1 -1
package/canvas/workspace-canvas.d.ts +2 -1
package/canvas/workspace-canvas.js +1 -1
package/model/store.d.ts +2 -0
package/model/store.js +1 -1
package/package.json +17 -19
package/pages-timeline/pages-timeline.js +1 -1
package/polotno.bundle.js +121 -122
package/side-panel/draw-panel.js +6 -6
package/utils/path-to-svg.d.ts +0 -1
package/utils/path-to-svg.js +1 -1
package/utils/to-svg.js +1 -1
package/utils/validate-key.js +1 -1

package/canvas/drawing-layer.js CHANGED Viewed

	@@ -1 +1 @@
1	- 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,stroke: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,{stroke: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]),P=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=kl;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+gl,y:u+gl,scaleX:l,scaleY:l},e.createElement(n,{x:-(h+gl)/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:P,stroke:w,strokeWidth:k,lineCap:"round",lineJoin:"round",opacity~~:v,~~tension:.5,listening:!1})):null});
1	+ 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 s}from"../utils/path-to-svg.js";export const DrawingLayer=t(({store:t,page:i,width:c,height:a,scale:l,xPadding:u,yPadding:h,bleed:g})=>{const[y,d]=e.useState(!1),[p,f]=e.useState([]),m=e.useRef(null),x="draw"===t.tool,{strokeWidth:k,stroke:w,opacity:$,brushType:b}=t.toolOptions,v=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,u,h,g]),E=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,u,h,g]),S=e.useCallback(()=>{if(x&&y){if(d(!1),p.length>1){try{const e=s(p,{stroke:w,strokeWidth:k,smooth:!0}),r=t.selectedElementsIds.slice();t.history.transaction(()=>{i.addElement({type:"svg",x:e.x,y:e.y,width:e.width,height:e.height,src:e.src,opacity:$},{skipSelect:!0})}),t.selectElements(r)}catch(e){console.error("Error creating path SVG:",e)}}f([])}},[x,y,p,w,k,$,i,t.history,t]),M=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=kl;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="${$}" 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,$,l]),x?e.createElement(r,{ref:m,listening:x,x:u+gl,y:h+gl,scaleX:l,scaleY:l},e.createElement(n,{x:-(u+gl)/l,y:-(h+g*l)/l,width:c/l,height:a/l,fill:"transparent",onMouseDown:v,onMouseMove:E,onMouseUp:S,onTouchStart:v,onTouchMove:E,onTouchEnd:S}),p.length>0&&e.createElement(o,{points:M,stroke:w,strokeWidth:k,lineCap:"round",lineJoin:"round",opacity:$,tension:.5,listening:!1})):null});

package/canvas/hotkeys.js CHANGED Viewed

	@@ -1 +1 @@
1	- import{copy as e,cut as t,paste as o}from"../utils/clipboard.js";import{duplicateElements as l}from"../utils/duplicate.js";import{alignBottom as a,alignCenter as c,alignLeft as n,alignMiddle as d,alignRight as i,alignTop as r}from"../utils/alignment.js";const s="rgba(191, 191, 191, 100)";export function handleHotkey(u,v){var p,f,m,y;if("INPUT"===(null===(p=document.activeElement)\|\|void 0===p?void 0:p.tagName)\|\|"TEXTAREA"===(null===(f=document.activeElement)\|\|void 0===f?void 0:f.tagName)\|\|"true"===(null===(m=document.activeElement)\|\|void 0===m?void 0:m.contentEditable)){return}const h=document.querySelector(".polotno-workspace-container");if(document.activeElement!==h&&!(null==h?void 0:h.contains(document.activeElement))){const e=window.getSelection();if(e&&e.toString().length>0){return}}const g=v.selectedElements.filter(e=>e.removable).map(e=>e.id);46!==u.keyCode&&8!==u.keyCode\|\|v.deleteElements(g);const E=u.ctrlKey\|\|u.metaKey,D=u.shiftKey,w=u.altKey;if(!E\|\|D\|\|"z"!==u.key.toLowerCase()&&"y"!==u.key.toLowerCase()\|\|(u.preventDefault(),v.history.undo()),E&&D&&("z"===u.key.toLowerCase()\|\|"y"===u.key.toLowerCase())&&(u.preventDefault(),v.history.redo()),E&&"KeyA"===u.code){u.preventDefault();const e=null===(y=v.activePage)\|\|void 0===y?void 0:y.children.filter(e=>e.selectable),t=(null==e?void 0:e.map(e=>e.id))\|\|[];v.selectElements(t)}if(E&&"KeyC"===u.code&&(u.preventDefault(),e(v)),E&&"KeyX"===u.code&&(u.preventDefault(),t(v)),E&&"KeyV"===u.code&&(u.preventDefault(),o(v)),"ArrowDown"===u.code&&(u.preventDefault(),v.selectedShapes.forEach(e=>{e.draggable&&e.set({y:e.y+1})})),"ArrowUp"===u.code&&(u.preventDefault(),v.selectedShapes.forEach(e=>{e.draggable&&e.set({y:e.y-1})})),"ArrowLeft"===u.code&&(u.preventDefault(),v.selectedShapes.forEach(e=>{e.draggable&&e.set({x:e.x-1})})),"ArrowRight"===u.code&&(u.preventDefault(),v.selectedShapes.forEach(e=>{e.draggable&&e.set({x:e.x+1})})),E&&"KeyG"===u.code){u.preventDefault();const e=v.selectedElements[0];if(e&&"group"===e.type){const t=e;v.ungroupElements([t.id])}else{v.groupElements(v.selectedElements.map(e=>e.id))}}if(E&&"KeyD"===u.code&&(u.preventDefault(),l(v.selectedElements,v)),"KeyT"===u.code&&!E){u.preventDefault();const e=30,t=v.width/2,o=v.width/2-t/2,l=v.height/2-e/2,a=2160,c=(v.width+v.height)/a;v.activePage.addElement({type:"text",x:o,y:l,width:t,fontSize:e*c,text:"Sample Text",fontFamily:"Roboto"})}if("KeyR"===u.code&&!E){u.preventDefault();const e={type:"figure",x:v.width/4,y:v.height/4,width:300,height:300,fill:s,stroke:"#0c0c0c",strokeWidth:0,subType:"rect"};v.activePage.addElement(e)}if("KeyL"===u.code&&!E){u.preventDefault();const e=v.activePage.computedWidth/3,t={type:"line",x:v.activePage.computedWidth/2-e/2,y:v.activePage.computedHeight/2,width:e,color:s};v.activePage.addElement(t)}if("KeyO"===u.code&&!E){u.preventDefault(),u.preventDefault();const e={type:"figure",x:v.width/4,y:v.height/4,width:300,height:300,fill:s,stroke:"#0c0c0c",strokeWidth:0,subType:"circle"};v.activePage.addElement(e)}E&&"Equal"===u.code&&(u.preventDefault(),v.setScale(v.scale+.1)),E&&"Minus"===u.code&&(u.preventDefault(),v.setScale(v.scale-.1)),w&&("KeyA"===u.code&&(u.preventDefault(),n(v)),"KeyD"===u.code&&(u.preventDefault(),i(v)),"KeyS"===u.code&&(u.preventDefault(),a(v)),"KeyW"===u.code&&(u.preventDefault(),r(v)),"KeyV"===u.code&&(u.preventDefault(),d(v)),"KeyH"===u.code&&(u.preventDefault(),c(v))),"BracketRight"===u.code&&(u.preventDefault(),E?v.activePage.moveElementsUp(v.selectedElementsIds):v.activePage.moveElementsTop(v.selectedElementsIds)),"BracketLeft"===u.code&&(u.preventDefault(),E?v.activePage.moveElementsDown(v.selectedElementsIds):v.activePage.moveElementsBottom(v.selectedElementsIds))}
1	+ import{copy as e,cut as t,paste as o}from"../utils/clipboard.js";import{duplicateElements as l}from"../utils/duplicate.js";import{alignBottom as a,alignCenter as c,alignLeft as n,alignMiddle as d,alignRight as i,alignTop as r}from"../utils/alignment.js";const s="rgba(191, 191, 191, 100)";export function handleHotkey(u,v){var p,f,m,y;if("INPUT"===(null===(p=document.activeElement)\|\|void 0===p?void 0:p.tagName)\|\|"TEXTAREA"===(null===(f=document.activeElement)\|\|void 0===f?void 0:f.tagName)\|\|"true"===(null===(m=document.activeElement)\|\|void 0===m?void 0:m.contentEditable)){return}const h=document.querySelector(".polotno-workspace-container");if(document.activeElement!==h&&!(null==h?void 0:h.contains(document.activeElement))){const e=window.getSelection();if(e&&e.toString().length>0){return}}const g=v.selectedElements.filter(e=>e.removable).map(e=>e.id);46!==u.keyCode&&8!==u.keyCode\|\|v.deleteElements(g);const E=u.ctrlKey\|\|u.metaKey,D=u.shiftKey,w=u.altKey;if("Escape"===u.key&&"draw"===v.tool){return u.preventDefault(),void v.setTool("selection")}if(!E\|\|D\|\|"z"!==u.key.toLowerCase()&&"y"!==u.key.toLowerCase()\|\|(u.preventDefault(),v.history.undo()),E&&D&&("z"===u.key.toLowerCase()\|\|"y"===u.key.toLowerCase())&&(u.preventDefault(),v.history.redo()),E&&"KeyA"===u.code){u.preventDefault();const e=null===(y=v.activePage)\|\|void 0===y?void 0:y.children.filter(e=>e.selectable),t=(null==e?void 0:e.map(e=>e.id))\|\|[];v.selectElements(t)}if(E&&"KeyC"===u.code&&(u.preventDefault(),e(v)),E&&"KeyX"===u.code&&(u.preventDefault(),t(v)),E&&"KeyV"===u.code&&(u.preventDefault(),o(v)),"ArrowDown"===u.code&&(u.preventDefault(),v.selectedShapes.forEach(e=>{e.draggable&&e.set({y:e.y+1})})),"ArrowUp"===u.code&&(u.preventDefault(),v.selectedShapes.forEach(e=>{e.draggable&&e.set({y:e.y-1})})),"ArrowLeft"===u.code&&(u.preventDefault(),v.selectedShapes.forEach(e=>{e.draggable&&e.set({x:e.x-1})})),"ArrowRight"===u.code&&(u.preventDefault(),v.selectedShapes.forEach(e=>{e.draggable&&e.set({x:e.x+1})})),E&&"KeyG"===u.code){u.preventDefault();const e=v.selectedElements[0];if(e&&"group"===e.type){const t=e;v.ungroupElements([t.id])}else{v.groupElements(v.selectedElements.map(e=>e.id))}}if(E&&"KeyD"===u.code&&(u.preventDefault(),l(v.selectedElements,v)),"KeyT"===u.code&&!E){u.preventDefault();const e=30,t=v.width/2,o=v.width/2-t/2,l=v.height/2-e/2,a=2160,c=(v.width+v.height)/a;v.activePage.addElement({type:"text",x:o,y:l,width:t,fontSize:e*c,text:"Sample Text",fontFamily:"Roboto"})}if("KeyR"===u.code&&!E){u.preventDefault();const e={type:"figure",x:v.width/4,y:v.height/4,width:300,height:300,fill:s,stroke:"#0c0c0c",strokeWidth:0,subType:"rect"};v.activePage.addElement(e)}if("KeyL"===u.code&&!E){u.preventDefault();const e=v.activePage.computedWidth/3,t={type:"line",x:v.activePage.computedWidth/2-e/2,y:v.activePage.computedHeight/2,width:e,color:s};v.activePage.addElement(t)}if("KeyO"===u.code&&!E){u.preventDefault(),u.preventDefault();const e={type:"figure",x:v.width/4,y:v.height/4,width:300,height:300,fill:s,stroke:"#0c0c0c",strokeWidth:0,subType:"circle"};v.activePage.addElement(e)}E&&"Equal"===u.code&&(u.preventDefault(),v.setScale(v.scale+.1)),E&&"Minus"===u.code&&(u.preventDefault(),v.setScale(v.scale-.1)),w&&("KeyA"===u.code&&(u.preventDefault(),n(v)),"KeyD"===u.code&&(u.preventDefault(),i(v)),"KeyS"===u.code&&(u.preventDefault(),a(v)),"KeyW"===u.code&&(u.preventDefault(),r(v)),"KeyV"===u.code&&(u.preventDefault(),d(v)),"KeyH"===u.code&&(u.preventDefault(),c(v))),"BracketRight"===u.code&&(u.preventDefault(),E?v.activePage.moveElementsUp(v.selectedElementsIds):v.activePage.moveElementsTop(v.selectedElementsIds)),"BracketLeft"===u.code&&(u.preventDefault(),E?v.activePage.moveElementsDown(v.selectedElementsIds):v.activePage.moveElementsBottom(v.selectedElementsIds))}

package/canvas/page.js CHANGED Viewed

	@@ -1 +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 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+2ie,oe=n.computedHeight+2ie,le=(o-ree.scale)/2,ae=(a-oee.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+2n.bleed,height:n.computedHeight+2n.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+2De,height:oe+Me+2De}))),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+2De,height:oe+Me+2De,stroke:Oe?k:w,strokeWidth:2,listening:!1,strokeScaleEnabled:!1})),t.createElement(l,{x:le+iee.scale,y:ae+iee.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}))});
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 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)))},V=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),H=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 U=null;export const registerNextDomDrop=e=>{U=e};const K=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:K,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:K,transformLabelFill:J,transformLabelTextFill:Q,distanceGuideStroke:ee,distanceLabelFill:te,distanceLabelTextFill:ne})=>{const ie=e.bleedVisible?n.bleed:0,re=n.computedWidth+2ie,oe=n.computedHeight+2ie,le=(o-ree.scale)/2,ae=(a-oee.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:K});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];U&&(U(i,a,{elements:l,page:n}),U=null)},style:{position:"relative",width:o+"px",height:a+"px",overflow:"hidden",flexShrink:0},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(!e.distanceGuidesVisible&&!t.evt.altKey){return void(he&&ge(null))}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+2n.bleed,height:n.computedHeight+2n.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+2De,height:oe+Me+2De}))),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+2De,height:oe+Me+2De,stroke:Oe?k:w,strokeWidth:2,listening:!1,strokeScaleEnabled:!1})),t.createElement(l,{x:le+iee.scale,y:ae+iee.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(H,Object.assign({},ue,{store:e,tagFill:J,textFill:Q})),t.createElement(V,{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/video-element.js CHANGED Viewed

	@@ -1 +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 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";importas 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.widtho,1)),h=Math.floor(Math.max(t.heighto,1)),c=Math.min(io,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,3Math.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,3Math.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=fm,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+Lc];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+ws]=b<<24\|y<<16\|E<<8\|M}}return d}(o.getContext("2d").getImageData(0,0,o.width,o.height),Math.floor(o.widtht),Math.floor(o.heightt),0,0,o.width,o.height);return o.width=Math.floor(o.widtht),o.height=Math.floor(o.heightt),null===(n=o.getContext("2d"))\|\|void 0===n\|\|n.putImageData(i,0,0),o}(r,s):r,o=u?{x:Math.floor(n.xs),y:Math.floor(n.ys),width:Math.floor(n.widths),height:Math.floor(n.heights)}: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.duration100>=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/cn,t.height/ln)),s.width=Math.max(cu,1),s.height=Math.max(lu,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:1e3X.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.startTimeX.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.startTimeX.duration},h=()=>{X.currentTime>=t.endTimeX.duration&&(X.pause(),X.currentTime=t.startTimeX.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.startTimeX.duration1e3,a=X.duration(t.endTime-t.startTime)1e3,d=((n.currentTime\|\|t.page.startTime)-t.page.startTime)%a+i;if(Math.abs(1e3X.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=Uj,$=ZB,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:UD,y:Zz,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.widthn,t.height/a.heightn);d.width=a.widthh,d.height=a.heighth,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:-dU,y:-cZ,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.cropWidtho;g&&(f=t.cropWidth);const m=!u&&i<1&&pe.current.cropWidth>G/U;let p=u?t.cropHeight:t.cropHeighti;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.scale3,height:window.innerWidth/n.scale3,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.cropXU,y:-t.cropYZ,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.cropXU-1e-9&&(e.target.x(-t.cropXU),e.target.scaleX(1)),e.target.y()<-t.cropYZ-1e-9&&(e.target.y(-t.cropYZ),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(ode,U(1-r)de),height:Math.min(ide,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})))))});
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 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";importas 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.widtho,1)),h=Math.floor(Math.max(t.heighto,1)),c=Math.min(io,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,3Math.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,3Math.PI/2,!1),e.clip());const t=u?function(e,t){var r,n;const o=x(),i=e instanceof HTMLVideoElement?e.videoWidth:e.width,a=e instanceof HTMLVideoElement?e.videoHeight:e.height;o.width=i,o.height=a,null===(r=o.getContext("2d"))\|\|void 0===r\|\|r.drawImage(e,0,0,o.width,o.height);const d=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=fm,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+Lc];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+ws]=b<<24\|y<<16\|E<<8\|M}}return d}(o.getContext("2d").getImageData(0,0,o.width,o.height),Math.floor(o.widtht),Math.floor(o.heightt),0,0,o.width,o.height);return o.width=Math.floor(o.widtht),o.height=Math.floor(o.heightt),null===(n=o.getContext("2d"))\|\|void 0===n\|\|n.putImageData(d,0,0),o}(r,s):r,o=u?{x:Math.floor(n.xs),y:Math.floor(n.ys),width:Math.floor(n.widths),height:Math.floor(n.heights)}: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.duration100>=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/cn,t.height/ln)),s.width=Math.max(cu,1),s.height=Math.max(lu,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:1e3X.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.startTimeX.duration,X.play());const a=new l.Animation(()=>{de.current()},null===(e=R.current)\|\|void 0===e?void 0:e.getLayer());a.start();const d=()=>{H(!1),X.currentTime=t.startTimeX.duration},h=()=>{X.currentTime>=t.endTimeX.duration&&(X.pause(),X.currentTime=t.startTimeX.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.startTimeX.duration1e3,a=X.duration(t.endTime-t.startTime)1e3,d=((n.currentTime\|\|t.page.startTime)-t.page.startTime)%a+i;if(Math.abs(1e3X.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}`))}de.current(),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&&(de.current(),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=Uj,$=ZB,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:UD,y:Zz,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.widthn,t.height/a.heightn);d.width=a.widthh,d.height=a.heighth,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=e.useRef(ae);de.current=ae;const he=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 ce=e.useRef(null),le=e.useRef(null),se=e.useRef(null);e.useLayoutEffect(()=>{t._cropModeEnabled&&(le.current.nodes([ce.current]),se.current.nodes([I.current]))},[t._cropModeEnabled]);const ue=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:-dU,y:-cZ,scaleX:1,scaleY:1}),t.set({cropX:d,cropY:c,cropWidth:o,cropHeight:i})},ge=()=>{"svg"!==t.type&&t.contentEditable&&setTimeout(()=>{t.toggleCropMode(!0)})},fe="loading"===Y,me="failed"===Y,pe=!fe&&!me,we=e.useRef({cropX:0,cropY:0,cropWidth:0,cropHeight:0}),ve=pe?t.a.opacity:0;w(R,ve);const xe=t.selectable\|\|"admin"===n.role,Me=v();return e.createElement(e.Fragment,null,e.createElement(o,{onMouseEnter:()=>O(!0),onMouseLeave:()=>O(!1)},fe&&e.createElement(b,{element:t}),me&&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:ve,shadowEnabled:t.shadowEnabled,shadowBlur:t.shadowBlur,shadowOffsetX:t.shadowOffsetX,shadowOffsetY:t.shadowOffsetY,shadowColor:t.shadowColor,shadowOpacity:t.shadowOpacity,customCrop:ee,listening:xe,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:ge,onDblTap:ge,onTransformStart:()=>{m(!0),we.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&&we.current.cropHeight>J/Z;let f=u?t.cropWidth:t.cropWidtho;g&&(f=t.cropWidth);const m=!u&&i<1&&we.current.cropWidth>G/U;let p=u?t.cropHeight:t.cropHeighti;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:ve,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\|\|Me)&&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.scale3,height:window.innerWidth/n.scale3,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:he,scaleY:he},e.createElement(i,{image:P,ref:I,width:U,height:Z,opacity:.4,draggable:!0,x:-t.cropXU,y:-t.cropYZ,onDragMove:ue,onTransform:ue}),e.createElement(h,{ref:se,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:ce,listening:!1,onTransform:e=>{e.target.x()<-t.cropXU-1e-9&&(e.target.x(-t.cropXU),e.target.scaleX(1)),e.target.y()<-t.cropYZ-1e-9&&(e.target.y(-t.cropYZ),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(ohe,U(1-r)he),height:Math.min(ihe,Z(1-n)*he)})}}),e.createElement(h,{ref:le,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/canvas/workspace-canvas.d.ts CHANGED Viewed

@@ -2,6 +2,7 @@ import React from 'react';
 import { StoreType } from '../model/store.js';
 export type WorkspaceProps = {
     store: StoreType;
+    layout?: 'vertical' | 'horizontal';
     pageControlsEnabled?: boolean;
     backgroundColor?: string;
     pageBorderColor?: string;
@@ -26,7 +27,7 @@ export type WorkspaceProps = {
     visiblePagesOffset?: number;
     renderOnlyActivePage?: boolean;
 };
-export declare const WorkspaceCanvas: (({ store, pageControlsEnabled, backgroundColor, pageBorderColor, activePageBorderColor, bleedColor, snapGuideStroke, snapGuideStrokeWidth, snapGuideDash, selectionRectFill, selectionRectStroke, selectionRectStrokeWidth, transformLabelFill, transformLabelTextFill, distanceGuideStroke, distanceLabelFill, distanceLabelTextFill, components, onKeyDown, paddingX, paddingY, altCloneEnabled, visiblePagesOffset, renderOnlyActivePage, }: WorkspaceProps) => React.JSX.Element) & {
+export declare const WorkspaceCanvas: (({ store, layout, pageControlsEnabled, backgroundColor, pageBorderColor, activePageBorderColor, bleedColor, snapGuideStroke, snapGuideStrokeWidth, snapGuideDash, selectionRectFill, selectionRectStroke, selectionRectStrokeWidth, transformLabelFill, transformLabelTextFill, distanceGuideStroke, distanceLabelFill, distanceLabelTextFill, components, onKeyDown, paddingX, paddingY, altCloneEnabled, visiblePagesOffset, renderOnlyActivePage, }: WorkspaceProps) => React.JSX.Element) & {
     displayName: string;
 };
 export default WorkspaceCanvas;

package/canvas/workspace-canvas.js CHANGED Viewed

	@@ -1 +1 @@
1	- import e from"react";import{observer as t}from"mobx-react-lite";import r from"./page.js";import{TopRules as n}from"./rules.js";import{AudioElement as o}from"./audio.js";import{handleHotkey as i}from"./hotkeys.js";import{t as a}from"../utils/l10n.js";const l=({store:t})=>e.createElement("div",{style:{position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",textAlign:"center"}},e.createElement("p",null,a("workspace.noPages")),e.createElement("button",{onClick:()=>{t.addPage()}},a("workspace.addPage"))),s=({width:t,height:r,xPadding:n,yPadding:o,backgroundColor:i})=>e.createElement("div",{style:{width:t+"px",height:r+"px",backgroundColor:i,paddingLeft:n+"px",paddingRight:n+"px",paddingTop:o+"px",paddingBottom:o+"px"}},e.createElement("div",{style:{width:" 100%",height:"100%",backgroundColor:"white"}})),c=[4,6];export const WorkspaceCanvas=t(({store:t,pageControlsEnabled:a,backgroundColor:u,pageBorderColor:d,activePageBorderColor:h,bleedColor:g,snapGuideStroke:p,snapGuideStrokeWidth:f,snapGuideDash:m,selectionRectFill:v,selectionRectStroke:w,selectionRectStrokeWidth:b,transformLabelFill:k,transformLabelTextFill:E,distanceGuideStroke:x,distanceLabelFill:y,distanceLabelTextFill:P,components:T,onKeyDown:R,paddingX:L,paddingY:C,altCloneEnabled:M=!0,visiblePagesOffset:S,renderOnlyActivePage:F})=>{var W;const O=null!=L?L:20,_=null!=C?C:55,[G,j]=e.useState({width:100,height:100}),z=e.useRef(G),B=e.useRef(null),H=e.useRef(null),D=t.bleedVisible?Math.max(0,...t.pages.map(e=>e.bleed)):0,N=Math.max(...t.pages.map(e=>e.computedWidth)),I=Math.max(...t.pages.map(e=>e.computedHeight)),K=(null===(W=t.activePage)\|\|void 0===W?void 0:W.computedHeight)\|\|0,Y=N+2D,A=(F?K:I)+2D,V=async({skipTimeout:e}={skipTimeout:!1})=>{if(e\|\|await new Promise(e=>setTimeout(e,50)),null===B.current){return}const r=B.current.getBoundingClientRect();0!==r.width&&0!==r.height\|\|(console.warn("Polotno warning: <Workspace /> component can not automatically detect its size.\nWidth or height of parent elements is equal 0.\nPlease make sure it has non-zero size. You may need to adjust it with your styles. <Workspace /> will automatically fit into parent container.\nFor simpler debugging here is the log of the parent element:"),console.log(B.current));const n=H.current.clientWidth\|\|r.width,o={width:n,height:r.height};(z.current.width!==o.width\|\|z.current.height!==o.height)&&(j(o),z.current=o);const i=(n-2O)/Y,a=t.pages.length>1?3.1:2,l=(r.height-_a)/A,s=t.pages.length?Math.max(Math.min(i,l),.01):1;t.scaleToFit!==s&&(t.setScale(s),t._setScaleToFit(s))};e.useLayoutEffect(()=>{V({skipTimeout:!0})},[]),e.useEffect(()=>{V()},[Y,A,C,L]),e.useLayoutEffect(()=>{V({skipTimeout:!0})},[t.openedSidePanel]),e.useEffect(()=>{t.__()},[]),e.useEffect(()=>{const e=B.current;if(window.ResizeObserver){const t=new ResizeObserver(()=>{V({skipTimeout:!0})});return t.observe(e),()=>t.unobserve(e)}{const e=setInterval(()=>{V({skipTimeout:!0})},100);return()=>clearInterval(e)}},[Y,A]);const X=Math.max(O,(G.width-Yt.scale)/2),~~q=F?1:~~t.~~pages.length,J~~=At.scale~~q,Q~~=Math.max(_,(G.height-J)/q/2);e.useEffect(()=>{const e=e=>{(R\|\|i)(e,t)};return window.addEventListener("keydown",e),()=>window.removeEventListener("keydown",e)},[]),e.useEffect(()=>{~~var~~ e~~;const r~~=e=>{if(e.ctrlKey\|\|e.metaKey){e.preventDefault();const i=Math.max(5,t.scaleToFit),a=Math.min(.1,t.scaleToFit),l=.03,s=(r=e.deltaY<0?t.scale(1+l):t.scale/(1+l),n=a,o=i,Math.max(n,Math.min(o,r)));return void t.setScale(s)}var r,n,o};return null~~===(e=H.current)~~\|\|~~void 0===e\|\|e~~.addEventListener("wheel",r),()=>~~{var e;return~~ null~~===(e=H.current)\|\|void 0===e~~?void 0:e.removeEventListener("wheel",r)}},[]);const U=e.useRef(!1);((t,r,n,o,i,a)=>{const l=e.useRef({width:r,height:n}),s=e.useRef({top:0,left:0}),c=e.useRef(!1),u=e.useRef(i.pages.length);c.current=u.current!==i.pages.length,u.current=i.pages.length,e.useEffect(()=>{const e=t.current,r=t=>{s.current={top:e.scrollTop,left:e.scrollLeft}};return e.addEventListener("scroll",r),()=>{e.removeEventListener("scroll",r)}},[]),e.useLayoutEffect(()=>{if(!t.current){return}if(c.current){return}const e=t.current,o=(s.current.left+e.offsetWidth/2)/l.current.width,i=(s.current.top+e.offsetHeight/2)/l.current.height;a.current=!0,e.scrollLeft=or-e.offsetWidth/2,e.scrollTop=in-e.offsetHeight/2,l.current={width:r,height:n}},[o,r,n])})(H,Yt.scale+2X,At.scale+2Q,t.scale,t,U);const{handleScroll:Z}=((t,r,n,o,i,a)=>{const l=e.useRef(!1),s=e.useRef(null),c=e.useRef(!1);e.useEffect(()=>{const e=t.current,r=()=>{i.current};return e.addEventListener("scroll",r),()=>{e.removeEventListener("scroll",r)}},[]);const u=n.pages.indexOf(n.activePage);return e.useLayoutEffect(()=>{if(a){return}if(!n.activePage){return}if(!t.current){return}if(l.current){return}const e=t.current,o=n.pages.indexOf(n.activePage)r;let i=()=>{};return(Math.abs(o-~~e.scrollTop~~)>.5r\|\|c.current)&&(c.current=!0,i=(({element:e,scrollTop:t=0,duration:r=300,onFinish:n=()=>{}})=>{const o=e.scrollTop,i=t-o;let a=0,l=!1;if(0===r){return e.scrollTop=t,()=>{}}const s=()=>{if(l){return}a+=20;const t=c(a,o,i,r);e.scrollTop=t,a<r?setTimeout(s,20):n()},c=(e,t,r,n)=>(e/=n/2)<1?r/2ee+t:-r/2(--e(e-2)-1)+t;return s(),()=>{l=!0}})({element:e,scrollTop:o,onFinish:()=>{c.current=!1},duration:n.isPlaying?0:300})),i},[n.activePage,u,n.isPlaying,a]),{handleScroll:e=>{if(a){return}if(c.current){return}l.current=!0,clearTimeout(s.current),s.current=setTimeout(()=>{l.current=!1},300);const t=e.currentTarget.childNodes[0].offsetHeight,r=e.currentTarget.scrollTop,i=Math.floor((r+~~o.height~~/3)/t),u=n.pages[i];u&&n.activePage!==u&&u.select()}}})(H,At~~.scale+2Q~~,t,G,U,F)~~,$=~~G.width>=Yt.scale+2X,ee=u\|\|"rgba(232, 232, 232, 0.9)",te=t.pages.indexOf(t.activePage),re=(null==T?void 0:T.NoPages)\|\|l,ne=null!=S?S:Math.min(3,Math.max(1,Math.ceil(G.height/2/(At.scale))));return e.createElement("div",{ref:B,style:{width:"100%",height:"100%",position:"relative",outline:"none",flex:1,backgroundColor:ee,overflow:"hidden"},tabIndex:0,className:"polotno-workspace-container"},e.createElement("div",{ref:H,onScroll:Z,style:{position:"absolute",top:0,left:0,width:"100%",height:"100%",overflow:"auto",overflowX~~:$?~~"hidden":"auto"},className:"polotno-workspace-inner"},t.pages.map((n,o)=>{const i=n===t.activePage;if(F&&!i&&!n._exportingOrRendering&&!n._forceMount){return null}if(!(Math.abs(o-te)<=ne\|\|n._exportingOrRendering\|\|n._forceMount)){return e.createElement(s,{key:n.id,width:Yt.scale+2X,height:At.scale+2Q,backgroundColor:ee,xPadding:X,yPadding:Q})}const l=e.createElement(r,{key:n.id,page:n,xPadding:X,yPadding:Q,width:Yt.scale+2X,height:At.scale+2Q,store:t,pageControlsEnabled:a,backColor:ee,pageBorderColor:d\|\|"lightgrey",activePageBorderColor:h\|\|"rgb(0, 161, 255)",altCloneEnabled:M,bleedColor:g\|\|"rgba(255, 0, 0, 0.1)",selectionRectFill:v,selectionRectStroke:w,selectionRectStrokeWidth:b,snapGuideStroke:p\|\|"rgb(0, 161, 255)",snapGuideStrokeWidth:f\|\|1,snapGuideDash:m\|\|c,transformLabelFill:k,transformLabelTextFill:E,distanceGuideStroke:x\|\|"rgb(0, 161, 255)",distanceLabelFill:y\|\|"rgb(0, 161, 255)",distanceLabelTextFill:P\|\|"white",components:T,viewportSize:G});return(n._exportingOrRendering\|\|n._forceMount)&&!i&&F?e.createElement("div",{style:{display:"none"},key:n.id},l):l}),t.rulesVisible&&e.createElement(n,{store:t,xPadding:X,yPadding:Q,width:Yt.scale+2X,height:At.scale+2*Q}),0===t.pages.length&&e.createElement(re,{store:t}),t.audios.map(r=>e.createElement(o,{key:r.id,audio:r,store:t}))))});export default WorkspaceCanvas;
1	+ import e from"react";import{observer as t}from"mobx-react-lite";import r from"./page.js";import{TopRules as n}from"./rules.js";import{AudioElement as o}from"./audio.js";import{handleHotkey as i}from"./hotkeys.js";import{t as l}from"../utils/l10n.js";const a=({store:t})=>e.createElement("div",{style:{position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",textAlign:"center"}},e.createElement("p",null,l("workspace.noPages")),e.createElement("button",{onClick:()=>{t.addPage()}},l("workspace.addPage"))),s=({width:t,height:r,xPadding:n,yPadding:o,backgroundColor:i})=>e.createElement("div",{style:{width:t+"px",height:r+"px",backgroundColor:i,paddingLeft:n+"px",paddingRight:n+"px",paddingTop:o+"px",paddingBottom:o+"px",flexShrink:0}},e.createElement("div",{style:{width:" 100%",height:"100%",backgroundColor:"white"}})),c=[4,6];export const WorkspaceCanvas=t(({store:t,layout:l="vertical",pageControlsEnabled:u,backgroundColor:d,pageBorderColor:h,activePageBorderColor:g,bleedColor:f,snapGuideStroke:p,snapGuideStrokeWidth:m,snapGuideDash:v,selectionRectFill:w,selectionRectStroke:b,selectionRectStrokeWidth:x,transformLabelFill:k,transformLabelTextFill:y,distanceGuideStroke:E,distanceLabelFill:T,distanceLabelTextFill:L,components:P,onKeyDown:M,paddingX:R,paddingY:S,altCloneEnabled:C=!0,visiblePagesOffset:F,renderOnlyActivePage:W})=>{var O;const _="horizontal"===l,j=null!=R?R:20,z=null!=S?S:55,[G,B]=e.useState({width:100,height:100}),D=e.useRef(G),H=e.useRef(null),N=e.useRef(null),Y=t.bleedVisible?Math.max(0,...t.pages.map(e=>e.bleed)):0,I=Math.max(...t.pages.map(e=>e.computedWidth)),K=Math.max(...t.pages.map(e=>e.computedHeight)),A=(null===(O=t.activePage)\|\|void 0===O?void 0:O.computedHeight)\|\|0,V=I+2Y,X=(W?A:K)+2Y,q=async({skipTimeout:e}={skipTimeout:!1})=>{if(e\|\|await new Promise(e=>setTimeout(e,50)),null===H.current){return}const r=H.current.getBoundingClientRect();0!==r.width&&0!==r.height\|\|(console.warn("Polotno warning: <Workspace /> component can not automatically detect its size.\nWidth or height of parent elements is equal 0.\nPlease make sure it has non-zero size. You may need to adjust it with your styles. <Workspace /> will automatically fit into parent container.\nFor simpler debugging here is the log of the parent element:"),console.log(H.current));const n=N.current.clientWidth\|\|r.width,o={width:n,height:r.height};(D.current.width!==o.width\|\|D.current.height!==o.height)&&(B(o),D.current=o);const i=(n-2j)/V,l=t.pages.length>1?3.1:2,a=(r.height-zl)/X,s=t.pages.length>1?3.1:2,c=(n-js)/V,u=(r.height-2z)/X,d=t.pages.length?Math.max(Math.min(_?c:i,_?u:a),.01):1;t.scaleToFit!==d&&(t.setScale(d),t._setScaleToFit(d))};e.useLayoutEffect(()=>{q({skipTimeout:!0})},[]),e.useEffect(()=>{q()},[V,X,S,R]),e.useLayoutEffect(()=>{q({skipTimeout:!0})},[t.openedSidePanel]),e.useEffect(()=>{t.__()},[]),e.useEffect(()=>{const e=H.current;if(window.ResizeObserver){const t=new ResizeObserver(()=>{q({skipTimeout:!0})});return t.observe(e),()=>t.unobserve(e)}{const e=setInterval(()=>{q({skipTimeout:!0})},100);return()=>clearInterval(e)}},[V,X]);const J=W?1:t.pages.length;let Q,U;if(_){const e=Vt.scaleJ;Q=Math.max(j,(G.width-e)/J/2),U=Math.max(z,(G.height-Xt.scale)/2)}else{Q=Math.max(j,(G.width-Vt.scale)/2);const e=Xt.scaleJ;U=Math.max(z,(G.height-e)/J/2)}e.useEffect(()=>{const e=e=>{(M\|\|i)(e,t)};return window.addEventListener("keydown",e),()=>window.removeEventListener("keydown",e)},[]),e.useEffect(()=>{const e=e=>{if(e.ctrlKey\|\|e.metaKey){e.preventDefault();const i=Math.max(5,t.scaleToFit);let l=Math.min(.1,t.scaleToFit);_&&V>0&&Number.isFinite(V)&&(l=Math.max(l,300/V)),l=Math.max(l,.01);const a=.03,s=(r=e.deltaY<0?t.scale(1+a):t.scale/(1+a),n=l,o=i,Math.max(n,Math.min(o,r)));return void t.setScale(s)}var r,n,o},r=N.current;return null==r\|\|r.addEventListener("wheel",e),()=>null==r?void 0:r.removeEventListener("wheel",e)},[_,V,t]);const Z=e.useRef(!1);((t,r,n,o,i,l)=>{const a=e.useRef({width:r,height:n}),s=e.useRef({top:0,left:0}),c=e.useRef(!1),u=e.useRef(i.pages.length);c.current=u.current!==i.pages.length,u.current=i.pages.length,e.useEffect(()=>{const e=t.current,r=t=>{s.current={top:e.scrollTop,left:e.scrollLeft}};return e.addEventListener("scroll",r),()=>{e.removeEventListener("scroll",r)}},[]),e.useLayoutEffect(()=>{if(!t.current){return}if(c.current){return}const e=t.current,o=(s.current.left+e.offsetWidth/2)/a.current.width,i=(s.current.top+e.offsetHeight/2)/a.current.height;l.current=!0,e.scrollLeft=or-e.offsetWidth/2,e.scrollTop=in-e.offsetHeight/2,a.current={width:r,height:n}},[o,r,n])})(N,Vt.scale+2Q,Xt.scale+2U,t.scale,t,Z);const $=_?Vt.scale+2Q:Xt.scale+2U,{handleScroll:ee}=((t,r,n,o,i,l,a)=>{const s=e.useRef(!1),c=e.useRef(null),u=e.useRef(!1),d="horizontal"===a;e.useEffect(()=>{const e=t.current,r=()=>{i.current};return e.addEventListener("scroll",r),()=>{e.removeEventListener("scroll",r)}},[]);const h=n.pages.indexOf(n.activePage);return e.useLayoutEffect(()=>{if(l){return}if(!n.activePage){return}if(!t.current){return}if(s.current){return}const e=t.current,o=n.pages.indexOf(n.activePage)r,i=d?e.scrollLeft:e.scrollTop;let a=()=>{};return(Math.abs(o-i)>.5r\|\|u.current)&&(u.current=!0,a=(({element:e,scrollTop:t,scrollLeft:r,duration:n=300,onFinish:o=()=>{}})=>{const i=void 0!==t,l=i?e.scrollTop:e.scrollLeft,a=i?t:r,s=a-l;let c=0,u=!1;if(0===n){return i?e.scrollTop=a:e.scrollLeft=a,()=>{}}const d=()=>{if(u){return}c+=20;const t=h(c,l,s,n);i?e.scrollTop=t:e.scrollLeft=t,c<n?setTimeout(d,20):o()},h=(e,t,r,n)=>(e/=n/2)<1?r/2ee+t:-r/2(--e(e-2)-1)+t;return d(),()=>{u=!0}})(Object.assign(Object.assign({element:e},d?{scrollLeft:o}:{scrollTop:o}),{onFinish:()=>{u.current=!1},duration:n.isPlaying?0:300}))),a},[n.activePage,h,n.isPlaying,l,a]),{handleScroll:e=>{if(l){return}if(u.current){return}s.current=!0,clearTimeout(c.current),c.current=setTimeout(()=>{s.current=!1},300);const t=e.currentTarget.childNodes[0];if(!t){return}const r=d?t.offsetWidth:t.offsetHeight;if(!r){return}const i=d?e.currentTarget.scrollLeft:e.currentTarget.scrollTop,a=d?o.width:o.height,h=Math.floor((i+a/3)/r),g=n.pages[h];g&&n.activePage!==g&&g.select()}}})(N,$,t,G,Z,W,l),te=G.width>=Vt.scale+2Q,re=d\|\|"rgba(232, 232, 232, 0.9)",ne=t.pages.indexOf(t.activePage),oe=(null==P?void 0:P.NoPages)\|\|a,ie=null!=F?F:Math.min(3,Math.max(1,Math.ceil(_?G.width/2/(Vt.scale):G.height/2/(Xt.scale))));return e.createElement("div",{ref:H,style:{width:"100%",height:"100%",position:"relative",outline:"none",flex:1,backgroundColor:re,overflow:"hidden"},tabIndex:0,className:"polotno-workspace-container"},e.createElement("div",{ref:N,onScroll:ee,style:{position:"absolute",top:0,left:0,width:"100%",height:"100%",display:"flex",flexDirection:_?"row":"column",overflow:"auto",overflowX:_?"auto":te?"hidden":"auto",overflowY:_?"hidden":"auto"},className:"polotno-workspace-inner"},t.pages.map((n,o)=>{const i=n===t.activePage;if(W&&!i&&!n._exportingOrRendering&&!n._forceMount){return null}if(!(Math.abs(o-ne)<=ie\|\|n._exportingOrRendering\|\|n._forceMount)){return e.createElement("div",{key:n.id,style:{flexShrink:0}},e.createElement(s,{width:Vt.scale+2Q,height:Xt.scale+2U,backgroundColor:re,xPadding:Q,yPadding:U}))}const l=e.createElement(r,{key:n.id,page:n,xPadding:Q,yPadding:U,width:Vt.scale+2Q,height:Xt.scale+2U,store:t,pageControlsEnabled:u,backColor:re,pageBorderColor:h\|\|"lightgrey",activePageBorderColor:g\|\|"rgb(0, 161, 255)",altCloneEnabled:C,bleedColor:f\|\|"rgba(255, 0, 0, 0.1)",selectionRectFill:w,selectionRectStroke:b,selectionRectStrokeWidth:x,snapGuideStroke:p\|\|"rgb(0, 161, 255)",snapGuideStrokeWidth:m\|\|1,snapGuideDash:v\|\|c,transformLabelFill:k,transformLabelTextFill:y,distanceGuideStroke:E\|\|"rgb(0, 161, 255)",distanceLabelFill:T\|\|"rgb(0, 161, 255)",distanceLabelTextFill:L\|\|"white",components:P,viewportSize:G});return(n._exportingOrRendering\|\|n._forceMount)&&!i&&W?e.createElement("div",{style:{display:"none",flexShrink:0},key:n.id},l):l}),t.rulesVisible&&e.createElement(n,{store:t,xPadding:Q,yPadding:U,width:Vt.scale+2Q,height:Xt.scale+2*U}),0===t.pages.length&&e.createElement(oe,{store:t}),t.audios.map(r=>e.createElement(o,{key:r.id,audio:r,store:t}))))});export default WorkspaceCanvas;

package/model/store.d.ts CHANGED Viewed

@@ -133,6 +133,7 @@ export declare const Store: import("mobx-state-tree").IModelType<{
     schemaVersion: import("mobx-state-tree").IType<number, number, number>;
     bleedVisible: import("mobx-state-tree").IType<boolean, boolean, boolean>;
     rulesVisible: import("mobx-state-tree").IType<boolean, boolean, boolean>;
+    distanceGuidesVisible: import("mobx-state-tree").IType<boolean, boolean, boolean>;
     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>;
@@ -937,6 +938,7 @@ export declare const Store: import("mobx-state-tree").IModelType<{
     selectElements(ids: Array<string>): void;
     toggleBleed(bleedVisible?: boolean): void;
     toggleRulers(rulesVisible?: boolean): void;
+    toggleDistanceGuides(distanceGuidesVisible?: boolean): void;
     openSidePanel(panelName: string): void;
     setScale(scale: number): void;
     _setScaleToFit(scale: number): void;

package/model/store.js CHANGED Viewed

	@@ -1 +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";importas 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),stroke: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},setToolOptions(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+2m+2p),h=d(g.computedHeight+2m+2p);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+2i+2c,s=t.computedHeight+2i+2c,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:tr,topRightY:ir},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-2p,i-2p,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.widtht,height:r.heightt}),o=1e3/(e.fps\|\|10),n=r.duration/o;for(let a=0;a<n-1;a++){const e=ao\|\|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;
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 s,onSnapshot as a,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";importas 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,distanceGuidesVisible:!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),stroke: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:s=[],startTime:a=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."),a=r),e.animatedElementsIds=i(s),e.currentTime=a,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(),s=i-t;t=i,e.currentTime+=s,e.checkActivePage();const a=o\|\|e.duration;e.isPlaying&&e.currentTime<a?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},setToolOptions(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},toggleDistanceGuides(e){r.distanceGuidesVisible=null!=e?e:!r.distanceGuidesVisible},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),s=r.pages[n];s&&(r._activePageId=s.id),r.selectedElementsIds=i(r.selectedElementsIds.filter(e=>r.getElementById(e)))},groupElements(e,t={}){const o=e.map(e=>r.getElementById(e)),s=o[0].page;if(o.forEach(e=>{e&&n(e)}),!o.length){return}const a=s.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-${a+1}`,children:o,type:"group"},t);return s.children.push(l),r.selectedElementsIds=i([l.id]),s.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 a(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:s,quickMode:a=!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),a?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:s});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 s=await r._toCanvas(Object.assign({mimeType:i},n)),a=s.toDataURL(i,o);return p.Util.releaseCanvas(s),a},async toBlob(t={}){var{mimeType:i,quality:o}=t,n=e(t,["mimeType","quality"]);const s=await r._toCanvas(Object.assign({mimeType:i},n)),a=await new Promise(e=>{s.toBlob(e,i,o)});return p.Util.releaseCanvas(s),a},async saveAsImage(t={}){var{fileName:i}=t,o=e(t,["fileName"]);const n=o.mimeType\|\|"image/png",s=n.split("/")[1];m(await r.toDataURL(o),i\|\|"polotno."+s,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,s=e.pageIds\|\|r.pages.map(e=>e.id),a=r.pages.filter(e=>s.includes(e.id)),l=await u(),d=e=>v({px:e,unit:o,dpi:t}),c=e.cropMarkSize\|\|0,p=d(c),g=a[0]\|\|{},m=e.includeBleed?g.bleed:0,f=d(g.computedWidth+2m+2p),h=d(g.computedHeight+2m+2p);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})(a,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+2i+2c,a=t.computedHeight+2i+2c,l=d(o),p=d(a);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/s.length.9),{url:i,width:l,height:p,widthPx:o,heightPx:a}}m=.8}});(await Promise.all(t)).forEach(({url:e,width:t,height:i,widthPx:n,heightPx:s})=>{b.addPage([t,i],t>i?"landscape":"portrait");const a=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(a.pageContext.cropBox={bottomLeftX:0,bottomLeftY:0,topRightX:tr,topRightY:ir},a.pageContext.artBox={bottomLeftX:d(c+m)r,bottomLeftY:d(c+m)r,topRightX:d(n-c-m)r,topRightY:d(s-c-m)r},a.pageContext.bleedBox={bottomLeftX:d(c+m)r,bottomLeftY:d(c+m)r,topRightX:d(n-c-m)r,topRightY:d(s-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-2p,i-2p,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.widtht,height:r.heightt}),o=1e3/(e.fps\|\|10),n=r.duration/o;for(let s=0;s<n-1;s++){const e=so\|\|1;r.setCurrentTime(e);let n=0,a="";for(const t of r.pages){if(n+=t.duration,t.set({_rendering:n>e}),n>e){a=t.id;break}}const l=await r._toCanvas({pixelRatio:t,pageId:a,_skipTimeout:!0});i.addFrame(l.getContext("2d"),{delay:o,copy:!0})}for(const s of r.pages){s.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 s=n.pages.find(e=>e.id===t);return _({json:Object.assign(Object.assign({},n),{pages:s?[s]:[]}),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}),s="data:text/svg;base64,"+window.btoa(unescape(encodeURIComponent(n)));m(s,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:s(r.fonts),pages:s(r.pages),audios:s(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)),a=n.schemaVersion\|\|0;a<1&&y.htmlRenderEnabled&&I({children:n.pages},e=>{if("text"===e.type){const t=16,i=e.letterSpacing*t;e.letterSpacing=i/e.fontSize}}),a<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({},s(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)},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 CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "polotno",
-  "version": "2.30.2",
+  "version": "2.31.0",
   "description": "Design Editor Framework",
   "author": "Anton Lavrenov",
   "keywords": [
@@ -66,12 +66,12 @@
     "functions-have-names": "^1.2.3",
     "gifuct-js": "^2.1.2",
     "gradient-parser": "^1.1.1",
-    "konva": "^10.0.5",
+    "konva": "^10.0.8",
     "mensch": "^0.3.4",
-    "mobx": "6.13.7",
-    "mobx-react-lite": "^4.1.0",
-    "mobx-state-tree": "6.0.1",
-    "nanoid": "3.3.4",
+    "mobx": "6.15.0",
+    "mobx-react-lite": "^4.1.1",
+    "mobx-state-tree": "7.0.2",
+    "nanoid": "^3.3.11",
     "quill": "^1.3.7",
     "rasterizehtml": "^1.3.1",
     "react": "^18.2.0",
@@ -83,7 +83,7 @@
     "react-window": "^1.8.11",
     "sortablejs": "^1.15.6",
     "svg-round-corners": "^0.4.3",
-    "swr": "^2.3.4",
+    "swr": "^2.3.6",
     "use-image": "^1.1.4"
   },
   "targets": {
@@ -116,36 +116,34 @@
     "@canvas/image": "^2.0.0",
     "@size-limit/preset-big-lib": "^11.2.0",
     "@testing-library/dom": "^10.4.1",
-    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
-    "@types/jest": "^29",
+    "@types/jest": "^30",
     "@types/react": "^18.3.12",
     "@types/sanitize-html": "^2.16.0",
-    "@vitest/browser": "^1.6.0",
     "assert": "^2.1.0",
-    "bippy": "^0.0.25",
+    "bippy": "^0.5.2",
     "buffer": "^6.0.3",
-    "canvas": "^3.1.2",
+    "canvas": "^3.2.0",
     "filehound": "^1.17.6",
     "glob": "^11.0.3",
     "jest-file-snapshot": "^0.7.0",
-    "jsdom": "^26.1.0",
+    "jsdom": "^27.1.0",
     "license-checker": "^25.0.1",
     "parcel": "2.13.3",
     "path-browserify": "^1.0.1",
-    "postcss-selector-parser": "^6.1.2",
+    "postcss-selector-parser": "^7.1.0",
     "pptxgenjs": "^4.0.1",
     "process": "^0.11.10",
     "punycode": "^2.3.1",
     "querystring-es3": "^0.2.1",
     "size-limit": "^11.2.0",
-    "skia-canvas": "^2.0.2",
-    "terser": "^5.43.1",
+    "skia-canvas": "^3.0.8",
+    "terser": "^5.44.0",
     "ts-jest": "^29",
-    "typescript": "^5.8.3",
+    "typescript": "^5.9.3",
     "uglifyjs-folder": "^3.3.0",
-    "vitest": "^1.6.0",
-    "webdriverio": "^8.38.2"
+    "vitest": "^4.0.6"
   },
   "homepage": "https://polotno.com/",
   "scripts": {

package/pages-timeline/pages-timeline.js CHANGED Viewed

@@ -73,4 +73,4 @@ import{observer as e}from"mobx-react-lite";import{reaction as t}from"mobx";impor
   z-index: 2;
   width: 100px;
   text-align: center;
-`,A=e(({store:e})=>n.createElement(X,{className:"polotno-play-button-container"},n.createElement(i,{icon:e.isPlaying?n.createElement(m,{size:25}):n.createElement(c,{size:25}),onClick:()=>{var t;if(e.isPlaying){const t=e.activePage;e.stop(),t&&e.selectPage(t.id)}else{e.play({startTime:(null===(t=e.activePage)||void 0===t?void 0:t.startTime)||0})}},style:{width:"60px",height:"60px",borderRadius:"50px"}}),n.createElement("div",{style:{paddingTop:"5px"}},N(e.currentTime)," / ",N(e.duration))));export const PagesTimeline=e(({store:e,defaultOpened:t=!1})=>{const o=.02,[r,l]=n.useState(t),s=E.animationsEnabled?10*e.audios.length+90:90;return n.createElement(n.Fragment,null,n.createElement(P,null,n.createElement(T,null,n.createElement(a,{style:{height:"35px",padding:"0 5px"}},n.createElement(a.Group,{style:{height:"35px"}},n.createElement(i,{minimal:!0,onClick:()=>{l(!r)},icon:E.animationsEnabled&&!r?n.createElement(v,null):null},w("pagesTimeline.pages")))))),n.createElement(a,{style:{padding:"5px",height:"auto",zIndex:1,display:r?"block":"none"},className:"polotno-pages-timeline"},n.createElement("div",{style:{width:"100%",position:"relative",height:s}},n.createElement("div",{style:{position:"absolute",top:0,left:0,right:0,bottom:0,overflowX:"auto",padding:"5px",zIndex:1,display:"flex"}},n.createElement("div",{style:{height:"60px",display:"flex"}},E.animationsEnabled&&n.createElement("div",{style:{width:"90px",paddingRight:"5px",paddingLeft:"60px"}}),n.createElement("div",{style:{position:"relative"}},n.createElement(Pages,{store:e,scale:o}),E.animationsEnabled&&n.createElement($,{store:e,scale:o}),E.animationsEnabled&&n.createElement(j,{store:e,scale:o})),n.createElement(i,{icon:n.createElement(p,null),style:{width:"60px"},onClick:()=>{var t;e.addPage({bleed:(null===(t=e.activePage)||void 0===t?void 0:t.bleed)||0})},minimal:!0}))),E.animationsEnabled&&n.createElement(A,{store:e}))))});
+`,A=e(({store:e})=>n.createElement(X,{className:"polotno-play-button-container"},n.createElement(i,{icon:e.isPlaying?n.createElement(m,{size:25}):n.createElement(c,{size:25}),onClick:()=>{var t;if(e.isPlaying){const t=e.activePage;e.stop(),t&&e.selectPage(t.id)}else{e.play({startTime:(null===(t=e.activePage)||void 0===t?void 0:t.startTime)||0})}},style:{width:"60px",height:"60px",borderRadius:"50px"}}),n.createElement("div",{style:{paddingTop:"5px"}},N(e.currentTime)," / ",N(e.duration))));export const PagesTimeline=e(({store:e,defaultOpened:t=!1})=>{const o=.02,[r,l]=n.useState(t),s=E.animationsEnabled?Math.min(10*e.audios.length+90,300):90;return n.createElement(n.Fragment,null,n.createElement(P,null,n.createElement(T,null,n.createElement(a,{style:{height:"35px",padding:"0 5px"}},n.createElement(a.Group,{style:{height:"35px"}},n.createElement(i,{minimal:!0,onClick:()=>{l(!r)},icon:E.animationsEnabled&&!r?n.createElement(v,null):null},w("pagesTimeline.pages")))))),n.createElement(a,{style:{padding:"5px",height:"auto",zIndex:1,display:r?"block":"none"},className:"polotno-pages-timeline"},n.createElement("div",{style:{width:"100%",position:"relative",height:s}},n.createElement("div",{style:{position:"absolute",top:0,left:0,right:0,bottom:0,overflowX:"auto",padding:"5px",zIndex:1,display:"flex"}},n.createElement("div",{style:{height:"60px",display:"flex"}},E.animationsEnabled&&n.createElement("div",{style:{width:"90px",paddingRight:"5px",paddingLeft:"60px"}}),n.createElement("div",{style:{position:"relative"}},n.createElement(Pages,{store:e,scale:o}),E.animationsEnabled&&n.createElement($,{store:e,scale:o}),E.animationsEnabled&&n.createElement(j,{store:e,scale:o})),n.createElement(i,{icon:n.createElement(p,null),style:{width:"60px"},onClick:()=>{var t;e.addPage({bleed:(null===(t=e.activePage)||void 0===t?void 0:t.bleed)||0})},minimal:!0}))),E.animationsEnabled&&n.createElement(A,{store:e}))))});