polotno 2.9.4 → 2.9.5

package/model/shape-model.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.Shape=exports.Animation=void 0;const mobx_state_tree_1=require("mobx-state-tree"),animations_1=require("../utils/animations"),mobx_1=require("mobx"),node_model_1=require("./node-model");exports.Animation=mobx_state_tree_1.types.model("Animation",{delay:0,duration:500,enabled:!0,type:mobx_state_tree_1.types.enumeration("Type",["enter","exit","loop"]),name:"none",data:mobx_state_tree_1.types.frozen({})}),exports.Shape=node_model_1.Node.named("Shape").props({x:0,y:0,width:100,height:100,rotation:0,opacity:1,animations:mobx_state_tree_1.types.array(exports.Animation),blurEnabled:!1,blurRadius:10,brightnessEnabled:!1,brightness:0,sepiaEnabled:!1,grayscaleEnabled:!1,shadowEnabled:!1,shadowBlur:5,shadowOffsetX:0,shadowOffsetY:0,shadowColor:"black",shadowOpacity:1,visible:!0,draggable:!0,resizable:!0,selectable:!0,contentEditable:!0,styleEditable:!0,alwaysOnTop:!1,showInExport:!0}).preProcessSnapshot((e=>{const t=Object.assign(Object.assign({},e),{x:e.x||0,y:e.y||0});return"width"in e&&(t.width=t.width||1),"height"in e&&(t.height=t.height||1),e.locked&&(t.draggable=!1,t.contentEditable=!1,t.styleEditable=!1,t.resizable=!1),t})).views((e=>{const t=(0,mobx_1.observable)({x:e.x,y:e.y,width:e.width,height:e.height,rotation:e.rotation,opacity:e.opacity,color:e.color,fontSize:e.fontSize}),a=(0,mobx_1.action)((e=>{Object.assign(t,e)}));return{get a(){const{currentTime:i}=e.store;if(a({x:e.x,y:e.y,width:e.width,height:e.height,rotation:e.rotation,opacity:e.opacity,color:e.color,fontSize:e.fontSize}),0===i)return t;const n=i-e.page.startTime;if(n>e.page.duration)return t;if(n<0)return t;const o=e.store.animatedElementsIds;if(o.length&&!o.includes(e.id))return t;const s=e.animations.find((e=>"enter"===e.type));(null==s?void 0:s.enabled)&&n<s.delay&&a({opacity:0});if((null==s?void 0:s.enabled)&&n>=s.delay&&n<=s.delay+s.duration){const t=n-s.delay,i=(0,animations_1.animate)({element:e,animation:s,dTime:t});a(i)}const r=e.animations.find((e=>"exit"===e.type));if((null==r?void 0:r.enabled)&&n>=e.page.duration-r.duration-r.delay&&n<=e.page.duration-r.delay){const t=n-(e.page.duration-r.duration),i=(0,animations_1.animate)({element:e,animation:r,dTime:t});a(i)}const d=e.animations.find((e=>"loop"===e.type));if(null==d?void 0:d.enabled){const t=n,i=(0,animations_1.animate)({element:e,animation:d,dTime:t});a(i)}return t},animated:t=>e.a[t]}})).actions((e=>({setAnimation(t,a){const i=e.animations.find((e=>e.type===t));i?Object.assign(i,a):e.animations.push(Object.assign({type:t},a))}})));
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.Shape=exports.Animation=void 0;const mobx_state_tree_1=require("mobx-state-tree"),animations_1=require("../utils/animations"),mobx_1=require("mobx"),node_model_1=require("./node-model");exports.Animation=mobx_state_tree_1.types.model("Animation",{delay:0,duration:500,enabled:!0,type:mobx_state_tree_1.types.enumeration("Type",["enter","exit","loop"]),name:"none",data:mobx_state_tree_1.types.frozen({})}),exports.Shape=node_model_1.Node.named("Shape").props({x:0,y:0,width:100,height:100,rotation:0,opacity:1,animations:mobx_state_tree_1.types.array(exports.Animation),blurEnabled:!1,blurRadius:10,brightnessEnabled:!1,brightness:0,sepiaEnabled:!1,grayscaleEnabled:!1,shadowEnabled:!1,shadowBlur:5,shadowOffsetX:0,shadowOffsetY:0,shadowColor:"black",shadowOpacity:1,visible:!0,draggable:!0,resizable:!0,selectable:!0,contentEditable:!0,styleEditable:!0,alwaysOnTop:!1,showInExport:!0}).preProcessSnapshot((e=>{const t=Object.assign(Object.assign({},e),{x:e.x||0,y:e.y||0});return"width"in e&&(t.width=t.width||1),"height"in e&&(t.height=t.height||1),e.locked&&(t.draggable=!1,t.contentEditable=!1,t.styleEditable=!1,t.resizable=!1,t.removable=!1),t})).views((e=>{const t=(0,mobx_1.observable)({x:e.x,y:e.y,width:e.width,height:e.height,rotation:e.rotation,opacity:e.opacity,color:e.color,fontSize:e.fontSize}),a=(0,mobx_1.action)((e=>{Object.assign(t,e)}));return{get a(){const{currentTime:i}=e.store;if(a({x:e.x,y:e.y,width:e.width,height:e.height,rotation:e.rotation,opacity:e.opacity,color:e.color,fontSize:e.fontSize}),0===i)return t;const n=i-e.page.startTime;if(n>e.page.duration)return t;if(n<0)return t;const o=e.store.animatedElementsIds;if(o.length&&!o.includes(e.id))return t;const s=e.animations.find((e=>"enter"===e.type));(null==s?void 0:s.enabled)&&n<s.delay&&a({opacity:0});if((null==s?void 0:s.enabled)&&n>=s.delay&&n<=s.delay+s.duration){const t=n-s.delay,i=(0,animations_1.animate)({element:e,animation:s,dTime:t});a(i)}const r=e.animations.find((e=>"exit"===e.type));if((null==r?void 0:r.enabled)&&n>=e.page.duration-r.duration-r.delay&&n<=e.page.duration-r.delay){const t=n-(e.page.duration-r.duration),i=(0,animations_1.animate)({element:e,animation:r,dTime:t});a(i)}const d=e.animations.find((e=>"loop"===e.type));if(null==d?void 0:d.enabled){const t=n,i=(0,animations_1.animate)({element:e,animation:d,dTime:t});a(i)}return t},animated:t=>e.a[t]}})).actions((e=>({setAnimation(t,a){const i=e.animations.find((e=>e.type===t));i?Object.assign(i,a):e.animations.push(Object.assign({type:t},a))}})));

package/package.json

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

package/polotno.bundle.js

@@ -160,7 +160,7 @@ For more info see: https://github.com/konvajs/react-konva/issues/194
         font-style: ${e.fontStyle||"normal"};
         font-weight: ${e.fontWeight||"normal"};
       }
-    `}),n.innerHTML=i,document.getElementsByTagName("head")[0].appendChild(n),ij[e.fontFamily]=!0}(n):function(e){if(iA[e])return;let t=e.replace(/ /g,"+"),n=`https://fonts.googleapis.com/css?family=${t}:${iN}`,r=document.createElement("link");r.type="text/css",r.href=n,r.rel="stylesheet",document.getElementsByTagName("head")[0].appendChild(r),iA[e]=!0}(t),await iT(t)},validate:e=>lN.validate(e,[{path:"",type:lN}]).map(e=>({path:"store"+e.context.map(e=>e.path).join("."),message:e.message}))})),lj=(0,iV.types).model("Node",{id:iV.types.identifier,type:"none",name:"",opacity:1,custom:(0,iV.types).frozen(),visible:!0,selectable:!0,removable:!0,alwaysOnTop:!1,showInExport:!0}).preProcessSnapshot(e=>{for(var t in e)null===e[t]&&(e[t]=void 0);return e}).postProcessSnapshot(e=>{let t={...e},n={};for(var r in t)"_"!==r[0]&&(n[r]=e[r]);return n}).views(e=>({get locked(){return!e.draggable&&!e.contentEditable&&!e.styleEditable&&!e.resizable&&!e.removable},get page(){return(0,iV.getParentOfType)(e,lT)},get store(){return(0,iV.getParentOfType)(e,lN)},get top(){let t=e;for(;;){if(!(0,iV.hasParentOfType)(t,l$))return t;t=(0,iV.getParentOfType)(t,l$)}},get parent(){if((0,iV.hasParentOfType)(e,l$))return(0,iV.getParentOfType)(e,l$);if((0,iV.hasParentOfType)(e,lT))return(0,iV.getParentOfType)(e,lT);if((0,iV.hasParentOfType)(e,lN))return(0,iV.getParentOfType)(e,lN);return null},get zIndex(){return e.parent.children.indexOf(e)}})).actions(e=>({toJSON:()=>({...(0,iV.getSnapshot)(e)})})).actions(e=>({clone(t={},{skipSelect:n=!1}={}){let r=JSON.parse(JSON.stringify(e.toJSON()));return t.id=t.id||a7(10),lq(r,e=>{e.id=a7(10)}),Object.assign(r,t),e.page.addElement(r,{skipSelect:n})},set(t){Object.assign(e,t)},moveUp(){e.page.moveElementsUp([e.id])},moveTop(){e.page.moveElementsTop([e.id])},moveDown(){e.page.moveElementsDown([e.id])},moveBottom(){e.page.moveElementsBottom([e.id])},setZIndex(t){e.parent.setElementZIndex(e.id,t)},beforeDestroy(){}}));var iV=g("58B0H");let lR={right:{from:{x:-200},to:{x:0}},left:{from:{x:200},to:{x:0}},up:{from:{y:200},to:{y:0}},down:{from:{y:-200},to:{y:0}},"bottom-right":{from:{x:-200,y:-200},to:{x:0,y:0}},"bottom-left":{from:{x:200,y:-200},to:{x:0,y:0}},"top-right":{from:{x:-200,y:200},to:{x:0,y:0}},"top-left":{from:{x:200,y:200},to:{x:0,y:0}}},lL={fade:({dTime:e,element:t,animation:n})=>{let r=e/n.duration;return"enter"===n.type?{opacity:r*t.opacity}:{opacity:(1-r)*t.opacity}},rotate:({dTime:e,element:t,animation:n})=>{let r=n.duration;return function(e,t){let n=function(e){let t=oV(e.rotation||0);return{x:e.x+e.width/2*Math.cos(t)+e.height/2*Math.sin(-t),y:e.y+e.height/2*Math.cos(t)+e.width/2*Math.sin(t)}}(e);return function(e,t,n){let r=oV(t),i=n.x+(e.x-n.x)*Math.cos(r)-(e.y-n.y)*Math.sin(r),o=n.y+(e.x-n.x)*Math.sin(r)+(e.y-n.y)*Math.cos(r);return{...e,rotation:e.rotation+t,x:i,y:o}}(e,t,n)}({x:t.x,y:t.y,width:t.width,height:t.height,rotation:t.rotation},e/r*360)},blink:({dTime:e,element:t,animation:n})=>{let r=n.duration,i=e%r/(r/2);return{opacity:t.opacity*(i<=1?i:2-i)}},bounce:({dTime:e,element:t,animation:n})=>{let r=n.duration,i={},o={x:t.x+t.width/3,y:t.y+t.height/3,width:t.width/3,height:t.height/3,fontSize:t.fontSize/3},a={x:t.x,y:t.y,width:t.width,height:t.height,fontSize:t.fontSize},l=e%r/(r/2),s=l<=1?l:2-l;for(let e in o){let t=o[e],n=a[e]-t;i[e]=t+s*n}return i},move:({dTime:e,element:t,animation:n})=>{let r=lR[n.data.direction]||lR.right,i={};for(var o in r.from){let a=r.from[o],l=r.to[o];"exit"===n.type&&(a=r.to[o],l=-r.from[o]);let s=t[o]+a,u=t[o]+l-s;i[o]=s+e/n.duration*u}return i},zoom:({dTime:e,element:t,animation:n})=>{let r={},i={x:t.x+t.width/3,y:t.y+t.height/3,width:t.width/3,height:t.height/3,fontSize:t.fontSize/3},o={x:t.x,y:t.y,width:t.width,height:t.height,fontSize:t.fontSize};for(var a in i){let t=i[a],l=o[a];if("exit"===n.type){let e=t;t=l,l=e}let s=l-t;r[a]=t+e/n.duration*s}return r}},lI=({element:e,dTime:t,animation:n})=>{let r=lL[n.name];return r?r({element:e,dTime:t,animation:n}):(console.error("Can not find animation type: "+n.name),{})};var x=g("2SBKn");let lM=(0,iV.types).model("Animation",{delay:0,duration:500,enabled:!0,type:(0,iV.types).enumeration("Type",["enter","exit","loop"]),name:"none",data:(0,iV.types).frozen({})}),lD=lj.named("Shape").props({x:0,y:0,width:100,height:100,rotation:0,opacity:1,animations:(0,iV.types).array(lM),blurEnabled:!1,blurRadius:10,brightnessEnabled:!1,brightness:0,sepiaEnabled:!1,grayscaleEnabled:!1,shadowEnabled:!1,shadowBlur:5,shadowOffsetX:0,shadowOffsetY:0,shadowColor:"black",shadowOpacity:1,visible:!0,draggable:!0,resizable:!0,selectable:!0,contentEditable:!0,styleEditable:!0,alwaysOnTop:!1,showInExport:!0}).preProcessSnapshot(e=>{let t={...e,x:e.x||0,y:e.y||0};return"width"in e&&(t.width=t.width||1),"height"in e&&(t.height=t.height||1),e.locked&&(t.draggable=!1,t.contentEditable=!1,t.styleEditable=!1,t.resizable=!1),t}).views(e=>{let t=(0,x.observable)({x:e.x,y:e.y,width:e.width,height:e.height,rotation:e.rotation,opacity:e.opacity,color:e.color,fontSize:e.fontSize}),n=(0,x.action)(e=>{Object.assign(t,e)});return{get a(){let{currentTime:r}=e.store;if(n({x:e.x,y:e.y,width:e.width,height:e.height,rotation:e.rotation,opacity:e.opacity,color:e.color,fontSize:e.fontSize}),0===r)return t;let i=r-e.page.startTime;if(i>e.page.duration||i<0)return t;let o=e.store.animatedElementsIds;if(o.length&&!o.includes(e.id))return t;let a=e.animations.find(e=>"enter"===e.type);if(a?.enabled&&i<a.delay&&n({opacity:0}),a?.enabled&&i>=a.delay&&i<=a.delay+a.duration){let t=i-a.delay;n(lI({element:e,animation:a,dTime:t}))}let l=e.animations.find(e=>"exit"===e.type);if(l?.enabled&&i>=e.page.duration-l.duration-l.delay&&i<=e.page.duration-l.delay){let t=i-(e.page.duration-l.duration);n(lI({element:e,animation:l,dTime:t}))}let s=e.animations.find(e=>"loop"===e.type);return s?.enabled&&n(lI({element:e,animation:s,dTime:i})),t},animated:t=>e.a[t]}}).actions(e=>({setAnimation(t,n){let r=e.animations.find(e=>e.type===t);r?Object.assign(r,n):e.animations.push({type:t,...n})}}));var iV=g("58B0H");let lF=lD.named("Text").props({type:"text",text:"",placeholder:"",fontSize:14,fontFamily:"Roboto",fontStyle:"normal",fontWeight:"normal",textDecoration:"",fill:"black",align:"center",width:100,height:0,verticalAlign:"top",strokeWidth:0,stroke:"black",lineHeight:(0,iV.types).optional((0,iV.types).union(iV.types.number,iV.types.string),1.2),letterSpacing:0,_editModeEnabled:!1,backgroundEnabled:!1,backgroundColor:"#7ED321",backgroundOpacity:1,backgroundCornerRadius:.5,backgroundPadding:.5}).preProcessSnapshot(e=>({...e})).actions(e=>({toggleEditMode(t){e._editModeEnabled=t??!e._editModeEnabled,e._editModeEnabled?e.store.history.startTransaction():e.store.history.endTransaction()}})),lz=lD.named("Image").props({type:"image",width:100,height:100,src:"",cropX:0,cropY:0,cropWidth:1,cropHeight:1,cornerRadius:0,flipX:!1,flipY:!1,clipSrc:"",borderColor:"black",borderSize:0,keepRatio:!1,_cropModeEnabled:!1}).actions(e=>({toggleCropMode(t){e._cropModeEnabled=t??!e._cropModeEnabled,e._cropModeEnabled?e.store.history.startTransaction():e.store.history.endTransaction()},beforeDestroy(){e._cropModeEnabled&&e.store.history.endTransaction()}})),lB=lz.named("Video").props({type:"video",duration:0,startTime:0,endTime:1});var iV=g("58B0H");let lU=lD.named("Line").props({type:"line",width:400,height:10,color:"black",dash:(0,iV.types).array(iV.types.number),startHead:"",endHead:""}).actions(e=>({}));var iV=g("58B0H");let lH=lD.named("SVG").props({type:"svg",src:"",maskSrc:"",cropX:0,cropY:0,cropWidth:1,cropHeight:1,keepRatio:!0,flipX:!1,flipY:!1,width:100,height:100,borderColor:"black",borderSize:0,cornerRadius:0,colorsReplace:(0,iV.types).map(iV.types.string)}).preProcessSnapshot(e=>({...e,src:e.src||e.svgSource})).actions(e=>({replaceColor(t,n){e.colorsReplace.set(t,n)}}));var iV=g("58B0H");let lV=lD.named("Figure").props({type:"figure",subType:"rect",fill:"rgb(0, 161, 255)",dash:(0,iV.types).array(iV.types.number),strokeWidth:0,stroke:"rgba(98, 197, 255, 1)",cornerRadius:0}),lq=(e,t)=>{if(e.children)for(let n of e.children){if(!0===t(n))break;lq(n,t)}},lG=[...Array(20)].map((e,t)=>(0,iV.types).late(()=>lK[t])),lW=(0,iV.types).union({dispatcher:e=>{let t=lY[e.type];if(!t)throw Error(`Unknown element type: "${e.type}"`);return t}},lH,lF,lz,lU,lB,lV,(0,iV.types).late(()=>l$),...lG),l$=lj.named("Group").props({type:"group",children:(0,iV.types).array(lW)}).views(e=>({get draggable(){let t=!0;return lq(e,e=>{e.draggable||(t=!1)}),t},get resizable(){let t=!0;return lq(e,e=>{e.resizable||(t=!1)}),t},get contentEditable(){let t=!0;return lq(e,e=>{e.contentEditable||(t=!1)}),t},get styleEditable(){let t=!0;return lq(e,e=>{e.styleEditable||(t=!1)}),t},get locked(){let t=!0;return lq(e,e=>{e.locked||(t=!1)}),t}})).actions(e=>({set({draggable:t,contentEditable:n,styleEditable:r,resizable:i,...o}){void 0!==t&&lq(e,e=>{e.set({draggable:t})}),void 0!==n&&lq(e,e=>{e.set({contentEditable:n})}),void 0!==r&&lq(e,e=>{e.set({styleEditable:r})}),void 0!==i&&lq(e,e=>{e.set({resizable:i})}),Object.assign(e,o)},addElement(t,{skipSelect:n=!1}={}){let r=lY[t.type];if(!r){console.error("Can not find model with type "+t.type);return}t.children&&t.children.forEach(e=>{e.id=a7(10)});let i=r.create({id:a7(10),...t});return e.children.push(i),i.selectable&&!n&&e.store.selectElements([i.id]),i},setElementZIndex(t,n){let r=e.children.find(e=>e.id===t);r&&((0,iV.detach)(r),e.children.remove(r),e.children.splice(n,0,r))}})),lK=[],lY={svg:lH,text:lF,image:lz,group:l$,line:lU,video:lB,figure:lV},lX=[],lZ="",lQ="polotno_clipboard",lJ=e=>{lX=JSON.parse(JSON.stringify(e));try{localStorage.setItem(lQ,JSON.stringify(e))}catch(e){}},l0=()=>{try{let e=localStorage.getItem(lQ);if(e)return JSON.parse(e)}catch(e){}return lX};var x=g("2SBKn");let l1=(0,x.observable)({toolbar:{duration:"Duration",opacity:"Opacity",effects:"Effects",blur:"Blur",textBackground:"Background",backgroundCornerRadius:"Corner radius",backgroundOpacity:"Opacity",backgroundPadding:"Padding",brightness:"Brightness",sepia:"Sepia",grayscale:"Grayscale",textStroke:"Text Stroke",shadow:"Shadow",border:"Border",cornerRadius:"Corner Radius",position:"Position",layering:"Layering",toForward:"To forward",up:"Up",down:"Down",toBottom:"To bottom",alignLeft:"Align left",alignCenter:"Align center",alignRight:"Align right",alignTop:"Align top",alignMiddle:"Align middle",alignBottom:"Align bottom",flip:"Flip",flipHorizontally:"Flip horizontally",flipVertically:"Flip vertically",fitToBackground:"Fit to page",removeBackground:"Remove background",removeBackgroundTitle:"Remove background from image",cancelRemoveBackground:"Cancel",confirmRemoveBackground:"Confirm",crop:"Crop",cropDone:"Done",cropCancel:"Cancel",clip:"Apply mask",removeClip:"Remove mask",removeMask:"Remove mask",transparency:"Transparency",lockedDescription:"Object is locked. Unlock it to allow changes from canvas.",unlockedDescription:"Object is unlocked. Lock it to prevent changes from canvas.",removeElements:"Remove elements",duplicateElements:"Duplicate elements",download:"Download",saveAsImage:"Save as image",saveAsPDF:"Save as PDF",lineHeight:"Line height",letterSpacing:"Letter spacing",offsetX:"Offset X",offsetY:"Offset Y",color:"Color",selectable:"Selectable",draggable:"Draggable",removable:"Removable",resizable:"Resizable",contentEditable:"Can change content",styleEditable:"Can change style",alwaysOnTop:"Always on top",showInExport:"Show in export",ungroupElements:"Ungroup",groupElements:"Group",lineSize:"Line size",fade:"Fade",move:"Move",zoom:"Zoom",animate:"Animate",rotate:"Rotate",none:"None",bounce:"Bounce",blink:"Blink",spaceEvenly:"Space evenly",horizontalDistribution:"Horizontally",verticalDistribution:"Vertically",strokeWidth:"Stroke Width",colorPicker:{solid:"Solid",linear:"Linear"}},workspace:{noPages:"There are no pages yet...",addPage:"Add page",removePage:"Remove page",duplicatePage:"Duplicate page",moveUp:"Move up",moveDown:"Move down"},scale:{reset:"Reset"},error:{removeBackground:"Ops! Something went wrong. Background can not be removed."},sidePanel:{templates:"Templates",searchTemplatesWithSameSize:"Show templates with the same size",searchPlaceholder:"Search...",otherFormats:"Other formats",noResults:"No results",error:"Loading is failed...",text:"Text",uploadFont:"Upload font",myFonts:"My fonts",photos:"Photos",videos:"Videos",animations:"Animations",effects:"Effects",elements:"Elements",shapes:"Shapes",lines:"Lines",upload:"Upload",uploadImage:"Upload Image",uploadTip:"Do you want to upload your own images?",background:"Background",resize:"Resize",layers:"Layers",layerTypes:{image:"Image",text:"Text",svg:"SVG",line:"Line",figure:"Figure",group:"Group"},layersTip:"Elements on your active page:",noLayers:"No elements on the page...",namePlaceholder:"Type element name...",useMagicResize:"Use magic resize",clipImage:"Mask image",width:"Width",height:"Height",magicResizeDescription:"Magic resize will automatically resize and move all elements on the canvas",headerText:"Header",createHeader:"Create header",subHeaderText:"Sub Header",createSubHeader:"Create sub header",bodyText:"Body text",createBody:"Create body text"}}),l2=e=>e&&"object"==typeof e;(0,x.action)((e,{validate:t=!1}={})=>{t&&function e(t,n,r=""){Object.keys(n).forEach(i=>{let o=n[i],a=r?`${r}.${i}`:i;l2(o)?l2(t[i])?e(t[i],o,a):console.warn(`Missing nested translation object at '${a}'`):void 0===t[i]&&console.warn(`Missing translation '${a}'`)})}(e,l1),function e(t,n){Object.keys(n).forEach(r=>{let i=t[r],o=n[r];l2(o)&&l2(i)?e(i,o):t[r]=o})}(l1,e)});let l3={},l5=e=>{let t=function(e,t){var n,r=t.split("."),i=e;for(n=0;n<r.length;++n){if(void 0==i[r[n]])return;i=i[r[n]]}return i}(l1,e);if(void 0!==t)return t;l3[e]||(l3[e]=!0,console.warn(`Missing translation '${e}'`));let n=e.split("."),r=n[n.length-1]||" ";return r.charAt(0).toUpperCase()+r.slice(1)},l4=(e,t,n)=>Math.max(t,Math.min(n,e)),l6=`Polotno warning: <Workspace /> component can not automatically detect its size.
+    `}),n.innerHTML=i,document.getElementsByTagName("head")[0].appendChild(n),ij[e.fontFamily]=!0}(n):function(e){if(iA[e])return;let t=e.replace(/ /g,"+"),n=`https://fonts.googleapis.com/css?family=${t}:${iN}`,r=document.createElement("link");r.type="text/css",r.href=n,r.rel="stylesheet",document.getElementsByTagName("head")[0].appendChild(r),iA[e]=!0}(t),await iT(t)},validate:e=>lN.validate(e,[{path:"",type:lN}]).map(e=>({path:"store"+e.context.map(e=>e.path).join("."),message:e.message}))})),lj=(0,iV.types).model("Node",{id:iV.types.identifier,type:"none",name:"",opacity:1,custom:(0,iV.types).frozen(),visible:!0,selectable:!0,removable:!0,alwaysOnTop:!1,showInExport:!0}).preProcessSnapshot(e=>{for(var t in e)null===e[t]&&(e[t]=void 0);return e}).postProcessSnapshot(e=>{let t={...e},n={};for(var r in t)"_"!==r[0]&&(n[r]=e[r]);return n}).views(e=>({get locked(){return!e.draggable&&!e.contentEditable&&!e.styleEditable&&!e.resizable&&!e.removable},get page(){return(0,iV.getParentOfType)(e,lT)},get store(){return(0,iV.getParentOfType)(e,lN)},get top(){let t=e;for(;;){if(!(0,iV.hasParentOfType)(t,l$))return t;t=(0,iV.getParentOfType)(t,l$)}},get parent(){if((0,iV.hasParentOfType)(e,l$))return(0,iV.getParentOfType)(e,l$);if((0,iV.hasParentOfType)(e,lT))return(0,iV.getParentOfType)(e,lT);if((0,iV.hasParentOfType)(e,lN))return(0,iV.getParentOfType)(e,lN);return null},get zIndex(){return e.parent.children.indexOf(e)}})).actions(e=>({toJSON:()=>({...(0,iV.getSnapshot)(e)})})).actions(e=>({clone(t={},{skipSelect:n=!1}={}){let r=JSON.parse(JSON.stringify(e.toJSON()));return t.id=t.id||a7(10),lq(r,e=>{e.id=a7(10)}),Object.assign(r,t),e.page.addElement(r,{skipSelect:n})},set(t){Object.assign(e,t)},moveUp(){e.page.moveElementsUp([e.id])},moveTop(){e.page.moveElementsTop([e.id])},moveDown(){e.page.moveElementsDown([e.id])},moveBottom(){e.page.moveElementsBottom([e.id])},setZIndex(t){e.parent.setElementZIndex(e.id,t)},beforeDestroy(){}}));var iV=g("58B0H");let lR={right:{from:{x:-200},to:{x:0}},left:{from:{x:200},to:{x:0}},up:{from:{y:200},to:{y:0}},down:{from:{y:-200},to:{y:0}},"bottom-right":{from:{x:-200,y:-200},to:{x:0,y:0}},"bottom-left":{from:{x:200,y:-200},to:{x:0,y:0}},"top-right":{from:{x:-200,y:200},to:{x:0,y:0}},"top-left":{from:{x:200,y:200},to:{x:0,y:0}}},lL={fade:({dTime:e,element:t,animation:n})=>{let r=e/n.duration;return"enter"===n.type?{opacity:r*t.opacity}:{opacity:(1-r)*t.opacity}},rotate:({dTime:e,element:t,animation:n})=>{let r=n.duration;return function(e,t){let n=function(e){let t=oV(e.rotation||0);return{x:e.x+e.width/2*Math.cos(t)+e.height/2*Math.sin(-t),y:e.y+e.height/2*Math.cos(t)+e.width/2*Math.sin(t)}}(e);return function(e,t,n){let r=oV(t),i=n.x+(e.x-n.x)*Math.cos(r)-(e.y-n.y)*Math.sin(r),o=n.y+(e.x-n.x)*Math.sin(r)+(e.y-n.y)*Math.cos(r);return{...e,rotation:e.rotation+t,x:i,y:o}}(e,t,n)}({x:t.x,y:t.y,width:t.width,height:t.height,rotation:t.rotation},e/r*360)},blink:({dTime:e,element:t,animation:n})=>{let r=n.duration,i=e%r/(r/2);return{opacity:t.opacity*(i<=1?i:2-i)}},bounce:({dTime:e,element:t,animation:n})=>{let r=n.duration,i={},o={x:t.x+t.width/3,y:t.y+t.height/3,width:t.width/3,height:t.height/3,fontSize:t.fontSize/3},a={x:t.x,y:t.y,width:t.width,height:t.height,fontSize:t.fontSize},l=e%r/(r/2),s=l<=1?l:2-l;for(let e in o){let t=o[e],n=a[e]-t;i[e]=t+s*n}return i},move:({dTime:e,element:t,animation:n})=>{let r=lR[n.data.direction]||lR.right,i={};for(var o in r.from){let a=r.from[o],l=r.to[o];"exit"===n.type&&(a=r.to[o],l=-r.from[o]);let s=t[o]+a,u=t[o]+l-s;i[o]=s+e/n.duration*u}return i},zoom:({dTime:e,element:t,animation:n})=>{let r={},i={x:t.x+t.width/3,y:t.y+t.height/3,width:t.width/3,height:t.height/3,fontSize:t.fontSize/3},o={x:t.x,y:t.y,width:t.width,height:t.height,fontSize:t.fontSize};for(var a in i){let t=i[a],l=o[a];if("exit"===n.type){let e=t;t=l,l=e}let s=l-t;r[a]=t+e/n.duration*s}return r}},lI=({element:e,dTime:t,animation:n})=>{let r=lL[n.name];return r?r({element:e,dTime:t,animation:n}):(console.error("Can not find animation type: "+n.name),{})};var x=g("2SBKn");let lM=(0,iV.types).model("Animation",{delay:0,duration:500,enabled:!0,type:(0,iV.types).enumeration("Type",["enter","exit","loop"]),name:"none",data:(0,iV.types).frozen({})}),lD=lj.named("Shape").props({x:0,y:0,width:100,height:100,rotation:0,opacity:1,animations:(0,iV.types).array(lM),blurEnabled:!1,blurRadius:10,brightnessEnabled:!1,brightness:0,sepiaEnabled:!1,grayscaleEnabled:!1,shadowEnabled:!1,shadowBlur:5,shadowOffsetX:0,shadowOffsetY:0,shadowColor:"black",shadowOpacity:1,visible:!0,draggable:!0,resizable:!0,selectable:!0,contentEditable:!0,styleEditable:!0,alwaysOnTop:!1,showInExport:!0}).preProcessSnapshot(e=>{let t={...e,x:e.x||0,y:e.y||0};return"width"in e&&(t.width=t.width||1),"height"in e&&(t.height=t.height||1),e.locked&&(t.draggable=!1,t.contentEditable=!1,t.styleEditable=!1,t.resizable=!1,t.removable=!1),t}).views(e=>{let t=(0,x.observable)({x:e.x,y:e.y,width:e.width,height:e.height,rotation:e.rotation,opacity:e.opacity,color:e.color,fontSize:e.fontSize}),n=(0,x.action)(e=>{Object.assign(t,e)});return{get a(){let{currentTime:r}=e.store;if(n({x:e.x,y:e.y,width:e.width,height:e.height,rotation:e.rotation,opacity:e.opacity,color:e.color,fontSize:e.fontSize}),0===r)return t;let i=r-e.page.startTime;if(i>e.page.duration||i<0)return t;let o=e.store.animatedElementsIds;if(o.length&&!o.includes(e.id))return t;let a=e.animations.find(e=>"enter"===e.type);if(a?.enabled&&i<a.delay&&n({opacity:0}),a?.enabled&&i>=a.delay&&i<=a.delay+a.duration){let t=i-a.delay;n(lI({element:e,animation:a,dTime:t}))}let l=e.animations.find(e=>"exit"===e.type);if(l?.enabled&&i>=e.page.duration-l.duration-l.delay&&i<=e.page.duration-l.delay){let t=i-(e.page.duration-l.duration);n(lI({element:e,animation:l,dTime:t}))}let s=e.animations.find(e=>"loop"===e.type);return s?.enabled&&n(lI({element:e,animation:s,dTime:i})),t},animated:t=>e.a[t]}}).actions(e=>({setAnimation(t,n){let r=e.animations.find(e=>e.type===t);r?Object.assign(r,n):e.animations.push({type:t,...n})}}));var iV=g("58B0H");let lF=lD.named("Text").props({type:"text",text:"",placeholder:"",fontSize:14,fontFamily:"Roboto",fontStyle:"normal",fontWeight:"normal",textDecoration:"",fill:"black",align:"center",width:100,height:0,verticalAlign:"top",strokeWidth:0,stroke:"black",lineHeight:(0,iV.types).optional((0,iV.types).union(iV.types.number,iV.types.string),1.2),letterSpacing:0,_editModeEnabled:!1,backgroundEnabled:!1,backgroundColor:"#7ED321",backgroundOpacity:1,backgroundCornerRadius:.5,backgroundPadding:.5}).preProcessSnapshot(e=>({...e})).actions(e=>({toggleEditMode(t){e._editModeEnabled=t??!e._editModeEnabled,e._editModeEnabled?e.store.history.startTransaction():e.store.history.endTransaction()}})),lz=lD.named("Image").props({type:"image",width:100,height:100,src:"",cropX:0,cropY:0,cropWidth:1,cropHeight:1,cornerRadius:0,flipX:!1,flipY:!1,clipSrc:"",borderColor:"black",borderSize:0,keepRatio:!1,_cropModeEnabled:!1}).actions(e=>({toggleCropMode(t){e._cropModeEnabled=t??!e._cropModeEnabled,e._cropModeEnabled?e.store.history.startTransaction():e.store.history.endTransaction()},beforeDestroy(){e._cropModeEnabled&&e.store.history.endTransaction()}})),lB=lz.named("Video").props({type:"video",duration:0,startTime:0,endTime:1});var iV=g("58B0H");let lU=lD.named("Line").props({type:"line",width:400,height:10,color:"black",dash:(0,iV.types).array(iV.types.number),startHead:"",endHead:""}).actions(e=>({}));var iV=g("58B0H");let lH=lD.named("SVG").props({type:"svg",src:"",maskSrc:"",cropX:0,cropY:0,cropWidth:1,cropHeight:1,keepRatio:!0,flipX:!1,flipY:!1,width:100,height:100,borderColor:"black",borderSize:0,cornerRadius:0,colorsReplace:(0,iV.types).map(iV.types.string)}).preProcessSnapshot(e=>({...e,src:e.src||e.svgSource})).actions(e=>({replaceColor(t,n){e.colorsReplace.set(t,n)}}));var iV=g("58B0H");let lV=lD.named("Figure").props({type:"figure",subType:"rect",fill:"rgb(0, 161, 255)",dash:(0,iV.types).array(iV.types.number),strokeWidth:0,stroke:"rgba(98, 197, 255, 1)",cornerRadius:0}),lq=(e,t)=>{if(e.children)for(let n of e.children){if(!0===t(n))break;lq(n,t)}},lG=[...Array(20)].map((e,t)=>(0,iV.types).late(()=>lK[t])),lW=(0,iV.types).union({dispatcher:e=>{let t=lY[e.type];if(!t)throw Error(`Unknown element type: "${e.type}"`);return t}},lH,lF,lz,lU,lB,lV,(0,iV.types).late(()=>l$),...lG),l$=lj.named("Group").props({type:"group",children:(0,iV.types).array(lW)}).views(e=>({get draggable(){let t=!0;return lq(e,e=>{e.draggable||(t=!1)}),t},get resizable(){let t=!0;return lq(e,e=>{e.resizable||(t=!1)}),t},get contentEditable(){let t=!0;return lq(e,e=>{e.contentEditable||(t=!1)}),t},get styleEditable(){let t=!0;return lq(e,e=>{e.styleEditable||(t=!1)}),t},get locked(){let t=!0;return lq(e,e=>{e.locked||(t=!1)}),t}})).actions(e=>({set({draggable:t,contentEditable:n,styleEditable:r,resizable:i,...o}){void 0!==t&&lq(e,e=>{e.set({draggable:t})}),void 0!==n&&lq(e,e=>{e.set({contentEditable:n})}),void 0!==r&&lq(e,e=>{e.set({styleEditable:r})}),void 0!==i&&lq(e,e=>{e.set({resizable:i})}),Object.assign(e,o)},addElement(t,{skipSelect:n=!1}={}){let r=lY[t.type];if(!r){console.error("Can not find model with type "+t.type);return}t.children&&t.children.forEach(e=>{e.id=a7(10)});let i=r.create({id:a7(10),...t});return e.children.push(i),i.selectable&&!n&&e.store.selectElements([i.id]),i},setElementZIndex(t,n){let r=e.children.find(e=>e.id===t);r&&((0,iV.detach)(r),e.children.remove(r),e.children.splice(n,0,r))}})),lK=[],lY={svg:lH,text:lF,image:lz,group:l$,line:lU,video:lB,figure:lV},lX=[],lZ="",lQ="polotno_clipboard",lJ=e=>{lX=JSON.parse(JSON.stringify(e));try{localStorage.setItem(lQ,JSON.stringify(e))}catch(e){}},l0=()=>{try{let e=localStorage.getItem(lQ);if(e)return JSON.parse(e)}catch(e){}return lX};var x=g("2SBKn");let l1=(0,x.observable)({toolbar:{duration:"Duration",opacity:"Opacity",effects:"Effects",blur:"Blur",textBackground:"Background",backgroundCornerRadius:"Corner radius",backgroundOpacity:"Opacity",backgroundPadding:"Padding",brightness:"Brightness",sepia:"Sepia",grayscale:"Grayscale",textStroke:"Text Stroke",shadow:"Shadow",border:"Border",cornerRadius:"Corner Radius",position:"Position",layering:"Layering",toForward:"To forward",up:"Up",down:"Down",toBottom:"To bottom",alignLeft:"Align left",alignCenter:"Align center",alignRight:"Align right",alignTop:"Align top",alignMiddle:"Align middle",alignBottom:"Align bottom",flip:"Flip",flipHorizontally:"Flip horizontally",flipVertically:"Flip vertically",fitToBackground:"Fit to page",removeBackground:"Remove background",removeBackgroundTitle:"Remove background from image",cancelRemoveBackground:"Cancel",confirmRemoveBackground:"Confirm",crop:"Crop",cropDone:"Done",cropCancel:"Cancel",clip:"Apply mask",removeClip:"Remove mask",removeMask:"Remove mask",transparency:"Transparency",lockedDescription:"Object is locked. Unlock it to allow changes from canvas.",unlockedDescription:"Object is unlocked. Lock it to prevent changes from canvas.",removeElements:"Remove elements",duplicateElements:"Duplicate elements",download:"Download",saveAsImage:"Save as image",saveAsPDF:"Save as PDF",lineHeight:"Line height",letterSpacing:"Letter spacing",offsetX:"Offset X",offsetY:"Offset Y",color:"Color",selectable:"Selectable",draggable:"Draggable",removable:"Removable",resizable:"Resizable",contentEditable:"Can change content",styleEditable:"Can change style",alwaysOnTop:"Always on top",showInExport:"Show in export",ungroupElements:"Ungroup",groupElements:"Group",lineSize:"Line size",fade:"Fade",move:"Move",zoom:"Zoom",animate:"Animate",rotate:"Rotate",none:"None",bounce:"Bounce",blink:"Blink",spaceEvenly:"Space evenly",horizontalDistribution:"Horizontally",verticalDistribution:"Vertically",strokeWidth:"Stroke Width",colorPicker:{solid:"Solid",linear:"Linear"}},workspace:{noPages:"There are no pages yet...",addPage:"Add page",removePage:"Remove page",duplicatePage:"Duplicate page",moveUp:"Move up",moveDown:"Move down"},scale:{reset:"Reset"},error:{removeBackground:"Ops! Something went wrong. Background can not be removed."},sidePanel:{templates:"Templates",searchTemplatesWithSameSize:"Show templates with the same size",searchPlaceholder:"Search...",otherFormats:"Other formats",noResults:"No results",error:"Loading is failed...",text:"Text",uploadFont:"Upload font",myFonts:"My fonts",photos:"Photos",videos:"Videos",animations:"Animations",effects:"Effects",elements:"Elements",shapes:"Shapes",lines:"Lines",upload:"Upload",uploadImage:"Upload Image",uploadTip:"Do you want to upload your own images?",background:"Background",resize:"Resize",layers:"Layers",layerTypes:{image:"Image",text:"Text",svg:"SVG",line:"Line",figure:"Figure",group:"Group"},layersTip:"Elements on your active page:",noLayers:"No elements on the page...",namePlaceholder:"Type element name...",useMagicResize:"Use magic resize",clipImage:"Mask image",width:"Width",height:"Height",magicResizeDescription:"Magic resize will automatically resize and move all elements on the canvas",headerText:"Header",createHeader:"Create header",subHeaderText:"Sub Header",createSubHeader:"Create sub header",bodyText:"Body text",createBody:"Create body text"}}),l2=e=>e&&"object"==typeof e;(0,x.action)((e,{validate:t=!1}={})=>{t&&function e(t,n,r=""){Object.keys(n).forEach(i=>{let o=n[i],a=r?`${r}.${i}`:i;l2(o)?l2(t[i])?e(t[i],o,a):console.warn(`Missing nested translation object at '${a}'`):void 0===t[i]&&console.warn(`Missing translation '${a}'`)})}(e,l1),function e(t,n){Object.keys(n).forEach(r=>{let i=t[r],o=n[r];l2(o)&&l2(i)?e(i,o):t[r]=o})}(l1,e)});let l3={},l5=e=>{let t=function(e,t){var n,r=t.split("."),i=e;for(n=0;n<r.length;++n){if(void 0==i[r[n]])return;i=i[r[n]]}return i}(l1,e);if(void 0!==t)return t;l3[e]||(l3[e]=!0,console.warn(`Missing translation '${e}'`));let n=e.split("."),r=n[n.length-1]||" ";return r.charAt(0).toUpperCase()+r.slice(1)},l4=(e,t,n)=>Math.max(t,Math.min(n,e)),l6=`Polotno warning: <Workspace /> component can not automatically detect its size.
 Width or height of parent elements is equal 0.
 Please make sure it has non-zero size. You may need to adjust it with your styles. <Workspace /> will automatically fit into parent container.
 For simpler debugging here is the log of the parent element:`,l8=(e,t,n,r,i,o)=>{let a=c(w).useRef({width:t,height:n}),l=c(w).useRef({top:0,left:0}),s=c(w).useRef(!1),u=c(w).useRef(i.pages.length);s.current=u.current!==i.pages.length,u.current=i.pages.length,c(w).useEffect(()=>{let t=e.current,n=e=>{l.current={top:t.scrollTop,left:t.scrollLeft}};return t.addEventListener("scroll",n),()=>{t.removeEventListener("scroll",n)}},[]),c(w).useLayoutEffect(()=>{if(!e.current||s.current)return;let r=e.current,i=(l.current.left+r.offsetWidth/2)/a.current.width,u=(l.current.top+r.offsetHeight/2)/a.current.height;o.current=!0,r.scrollLeft=i*t-r.offsetWidth/2,r.scrollTop=u*n-r.offsetHeight/2,a.current={width:t,height:n}},[r,t,n])},l9=(e,t,n,r,i)=>{let o=c(w).useRef(!1),a=c(w).useRef(null);c(w).useEffect(()=>{let t=e.current,n=()=>{if(i.current)return};return t.addEventListener("scroll",n),()=>{t.removeEventListener("scroll",n)}},[]);let l=n.pages.indexOf(n.activePage);return c(w).useLayoutEffect(()=>{if(!n.activePage||!e.current||o.current)return;let r=e.current,a=n.pages.indexOf(n.activePage)*t;Math.abs(a-r.scrollTop)>.5*t&&(i.current=!0,r.scrollTop=a)},[n.activePage,l]),{handleScroll:e=>{if(i.current){i.current=!1;return}o.current=!0,clearTimeout(a.current),a.current=setTimeout(()=>{o.current=!1},300);let t=e.currentTarget.childNodes[0].offsetHeight,l=Math.floor((e.currentTarget.scrollTop+r.height/3)/t),s=n.pages[l];s&&s.select()}}},l7=({store:e})=>(0,v.jsxs)("div",{style:{position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",textAlign:"center"},children:[(0,v.jsx)("p",{children:l5("workspace.noPages")}),(0,v.jsx)("button",{onClick:()=>{e.addPage()},children:l5("workspace.addPage")})]}),se=({width:e,height:t,xPadding:n,yPadding:r,backgroundColor:i})=>(0,v.jsx)("div",{style:{width:e+"px",height:t+"px",backgroundColor:i,paddingLeft:n+"px",paddingRight:n+"px",paddingTop:r+"px",paddingBottom:r+"px"},children:(0,v.jsx)("div",{style:{width:" 100%",height:"100%",backgroundColor:"white"}})}),st=N(({store:e,pageControlsEnabled:t,backgroundColor:n,pageBorderColor:r,activePageBorderColor:i,bleedColor:o,components:a,onKeyDown:l,paddingX:s,paddingY:u,altCloneEnabled:d=!0,visiblePagesOffset:h})=>{let f=s??20,p=u??55,[g,m]=c(w).useState({width:100,height:100}),y=c(w).useRef(g),b=c(w).useRef(null),x=c(w).useRef(null),_=e.bleedVisible?Math.max(0,...e.pages.map(e=>e.bleed)):0,E=Math.max(...e.pages.map(e=>e.computedWidth)),S=Math.max(...e.pages.map(e=>e.computedHeight)),C=E+2*_,O=S+2*_,k=async({skipTimeout:t}={skipTimeout:!1})=>{if(t||await new Promise(e=>setTimeout(e,50)),null===b.current)return;let n=b.current.getBoundingClientRect();(0===n.width||0===n.height)&&(console.warn(l6),console.log(b.current));let r=x.current.clientWidth||n.width,i={width:r,height:n.height};(y.current.width!==i.width||y.current.height!==i.height)&&(m(i),y.current=i);let o=Math.max(Math.min((r-2*f)/C,(n.height-2*p)/O),.01);e.scaleToFit!==o&&(e.setScale(o),e._setScaleToFit(o))};c(w).useLayoutEffect(()=>{k({skipTimeout:!0})},[]),c(w).useEffect(()=>{k()},[C,O]),c(w).useEffect(()=>{let e=b.current;if(window.ResizeObserver){let t=new ResizeObserver(()=>{k({skipTimeout:!0})});return t.observe(e),()=>t.unobserve(e)}{let e=setInterval(()=>{k({skipTimeout:!0})},100);return()=>clearInterval(e)}},[C,O]);let P=Math.max(f,(g.width-C*e.scale)/2),T=O*e.scale*e.pages.length,A=Math.max(p,(g.height-T)/e.pages.length/2);c(w).useEffect(()=>{let t=t=>{(l||function(e,t){if(document.activeElement?.tagName==="INPUT"||document.activeElement?.tagName==="TEXTAREA"||document.activeElement?.contentEditable==="true")return;let n=t.selectedElements.filter(e=>e.removable),r=n.map(e=>e.id);(46===e.keyCode||8===e.keyCode)&&t.deleteElements(r);let i=e.ctrlKey||e.metaKey,o=e.shiftKey;if(i&&!o&&"KeyZ"===e.code&&(e.preventDefault(),t.history.undo()),i&&o&&"KeyZ"===e.code&&(e.preventDefault(),t.history.redo()),i&&"KeyA"===e.code){e.preventDefault();let n=t.activePage?.children.filter(e=>e.selectable),r=n?.map(e=>e.id)||[];t.selectElements(r)}if(i&&"KeyC"===e.code&&(e.preventDefault(),lZ=t.activePage?.id,lJ(t.selectedElements.map(e=>e.toJSON()))),i&&"KeyX"===e.code&&(e.preventDefault(),lZ=t.activePage?.id,lJ(t.selectedElements.map(e=>e.toJSON())),t.deleteElements(n)),i&&"KeyV"===e.code){e.preventDefault();let n=0;lZ===t.activePage?.id&&(n=t.width/20),lZ=t.activePage?.id,t.history.transaction(()=>{let e=[],r=l0();lq({children:r},e=>{delete e.id,"group"!==e.type&&(e.x+=n,e.y+=n)}),r.forEach(n=>{let r=t.activePage?.addElement(n);r&&e.push(r.id)}),lJ(r),t.selectElements(e)})}"ArrowDown"===e.code&&(e.preventDefault(),t.selectedElements.forEach(e=>{e.set({y:e.y+1})})),"ArrowUp"===e.code&&(e.preventDefault(),t.selectedElements.forEach(e=>{e.set({y:e.y-1})})),"ArrowLeft"===e.code&&(e.preventDefault(),t.selectedElements.forEach(e=>{e.set({x:e.x-1})})),"ArrowRight"===e.code&&(e.preventDefault(),t.selectedElements.forEach(e=>{e.set({x:e.x+1})}))})(t,e)};return window.addEventListener("keydown",t),()=>window.removeEventListener("keydown",t)},[]),c(w).useEffect(()=>{let t=t=>{if(t.ctrlKey||t.metaKey){t.preventDefault();let n=Math.max(3,e.scaleToFit),r=Math.min(.1,e.scaleToFit),i=l4(t.deltaY<0?1.05*e.scale:e.scale/1.05,r,n);e.setScale(i);return}};return x.current?.addEventListener("wheel",t),()=>x.current?.removeEventListener("wheel",t)},[]);let N=c(w).useRef(!1);l8(x,C*e.scale+2*P,O*e.scale+2*A,e.scale,e,N);let{handleScroll:j}=l9(x,O*e.scale+2*A,e,g,N),R=g.width>=C*e.scale+2*P,L=n||"rgba(232, 232, 232, 0.9)",I=e.pages.indexOf(e.activePage),M=a?.NoPages||l7,D=h??Math.min(3,Math.max(1,Math.ceil(g.height/2/(O*e.scale))));return(0,v.jsx)("div",{ref:b,style:{width:"100%",height:"100%",position:"relative",outline:"none",flex:1,backgroundColor:L},tabIndex:0,className:"polotno-workspace-container",children:(0,v.jsxs)("div",{ref:x,onScroll:j,style:{position:"absolute",top:0,left:0,width:"100%",height:"100%",overflow:"auto",overflowX:R?"hidden":"auto"},className:"polotno-workspace-inner",children:[e.pages.map((n,l)=>Math.abs(l-I)<=D||n._exportingOrRendering?(0,v.jsx)(a0,{page:n,xPadding:P,yPadding:A,width:C*e.scale+2*P,height:O*e.scale+2*A,store:e,pageControlsEnabled:t,backColor:L,pageBorderColor:r||"lightgrey",activePageBorderColor:i||"rgb(0, 161, 255)",altCloneEnabled:d,bleedColor:o||"rgba(255, 0, 0, 0.1)",components:a},n.id):(0,v.jsx)(se,{width:C*e.scale+2*P,height:O*e.scale+2*A,backgroundColor:L,xPadding:P,yPadding:A},n.id)),e.rulesVisible&&(0,v.jsx)(a9,{store:e,xPadding:P,yPadding:A,width:C*e.scale+2*P,height:O*e.scale+2*A}),0===e.pages.length&&(0,v.jsx)(M,{store:e})]})})});g("8NFma");var sn=g("gztBd"),sr={};!/*!