polotno 3.0.0-beta.13 → 3.0.0-beta.15

package/model/node-model.d.ts

@@ -1,42 +1,67 @@
 import { Instance } from 'mobx-state-tree';
 export declare const Node: import("mobx-state-tree").IModelType<{
     id: import("mobx-state-tree").ISimpleType<string>;
-    type: import("mobx-state-tree").IType<string, string, string>;
-    name: import("mobx-state-tree").IType<string, string, string>;
-    opacity: import("mobx-state-tree").IType<number, number, number>;
+    type: import("mobx-state-tree").IType<string | undefined, string, string>;
+    name: import("mobx-state-tree").IType<string | undefined, string, string>;
+    opacity: import("mobx-state-tree").IType<number | undefined, number, number>;
     custom: import("mobx-state-tree").IType<any, any, any>;
-    visible: import("mobx-state-tree").IType<boolean, boolean, boolean>;
-    selectable: import("mobx-state-tree").IType<boolean, boolean, boolean>;
-    removable: import("mobx-state-tree").IType<boolean, boolean, boolean>;
-    alwaysOnTop: import("mobx-state-tree").IType<boolean, boolean, boolean>;
-    showInExport: import("mobx-state-tree").IType<boolean, boolean, boolean>;
+    visible: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    selectable: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    removable: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    alwaysOnTop: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    showInExport: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
 }, {
-    readonly locked: boolean;
     readonly page: any;
     readonly store: any;
     readonly top: import("mobx-state-tree").ModelInstanceTypeProps<{
         id: import("mobx-state-tree").ISimpleType<string>;
-        type: import("mobx-state-tree").IType<string, string, string>;
-        name: import("mobx-state-tree").IType<string, string, string>;
-        opacity: import("mobx-state-tree").IType<number, number, number>;
+        type: import("mobx-state-tree").IType<string | undefined, string, string>;
+        name: import("mobx-state-tree").IType<string | undefined, string, string>;
+        opacity: import("mobx-state-tree").IType<number | undefined, number, number>;
         custom: import("mobx-state-tree").IType<any, any, any>;
-        visible: import("mobx-state-tree").IType<boolean, boolean, boolean>;
-        selectable: import("mobx-state-tree").IType<boolean, boolean, boolean>;
-        removable: import("mobx-state-tree").IType<boolean, boolean, boolean>;
-        alwaysOnTop: import("mobx-state-tree").IType<boolean, boolean, boolean>;
-        showInExport: import("mobx-state-tree").IType<boolean, boolean, boolean>;
+        visible: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+        selectable: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+        removable: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+        alwaysOnTop: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+        showInExport: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
     }> & import("mobx-state-tree").IStateTreeNode<import("mobx-state-tree").IModelType<{
         id: import("mobx-state-tree").ISimpleType<string>;
-        type: import("mobx-state-tree").IType<string, string, string>;
-        name: import("mobx-state-tree").IType<string, string, string>;
-        opacity: import("mobx-state-tree").IType<number, number, number>;
+        type: import("mobx-state-tree").IType<string | undefined, string, string>;
+        name: import("mobx-state-tree").IType<string | undefined, string, string>;
+        opacity: import("mobx-state-tree").IType<number | undefined, number, number>;
         custom: import("mobx-state-tree").IType<any, any, any>;
-        visible: import("mobx-state-tree").IType<boolean, boolean, boolean>;
-        selectable: import("mobx-state-tree").IType<boolean, boolean, boolean>;
-        removable: import("mobx-state-tree").IType<boolean, boolean, boolean>;
-        alwaysOnTop: import("mobx-state-tree").IType<boolean, boolean, boolean>;
-        showInExport: import("mobx-state-tree").IType<boolean, boolean, boolean>;
+        visible: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+        selectable: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+        removable: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+        alwaysOnTop: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+        showInExport: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
     }, {}, import("mobx-state-tree").ModelCreationType<{
+        id: string;
+        type: string | undefined;
+        name: string | undefined;
+        opacity: number | undefined;
+        custom: any;
+        visible: boolean | undefined;
+        selectable: boolean | undefined;
+        removable: boolean | undefined;
+        alwaysOnTop: boolean | undefined;
+        showInExport: boolean | undefined;
+    }>, import("mobx-state-tree").ModelSnapshotType<{
+        id: import("mobx-state-tree").ISimpleType<string>;
+        type: import("mobx-state-tree").IType<string | undefined, string, string>;
+        name: import("mobx-state-tree").IType<string | undefined, string, string>;
+        opacity: import("mobx-state-tree").IType<number | undefined, number, number>;
+        custom: import("mobx-state-tree").IType<any, any, any>;
+        visible: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+        selectable: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+        removable: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+        alwaysOnTop: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+        showInExport: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    }>>>;
+    readonly parent: any;
+    readonly zIndex: any;
+} & {
+    toJSON(): {
         id: string;
         type: string;
         name: string;
@@ -47,14 +72,10 @@ export declare const Node: import("mobx-state-tree").IModelType<{
         removable: boolean;
         alwaysOnTop: boolean;
         showInExport: boolean;
-    }>, {}>>;
-    readonly parent: any;
-    readonly zIndex: any;
-} & {
-    toJSON(): {};
+    };
 } & {
     clone(attrs?: any, { skipSelect }?: {
-        skipSelect?: boolean;
+        skipSelect?: boolean | undefined;
     }): NodeType;
     set(attrs: any): void;
     moveUp(): void;
@@ -65,14 +86,25 @@ export declare const Node: import("mobx-state-tree").IModelType<{
     beforeDestroy(): void;
 }, import("mobx-state-tree").ModelCreationType<{
     id: string;
-    type: string;
-    name: string;
-    opacity: number;
+    type: string | undefined;
+    name: string | undefined;
+    opacity: number | undefined;
     custom: any;
-    visible: boolean;
-    selectable: boolean;
-    removable: boolean;
-    alwaysOnTop: boolean;
-    showInExport: boolean;
-}>, {}>;
+    visible: boolean | undefined;
+    selectable: boolean | undefined;
+    removable: boolean | undefined;
+    alwaysOnTop: boolean | undefined;
+    showInExport: boolean | undefined;
+}>, import("mobx-state-tree").ModelSnapshotType<{
+    id: import("mobx-state-tree").ISimpleType<string>;
+    type: import("mobx-state-tree").IType<string | undefined, string, string>;
+    name: import("mobx-state-tree").IType<string | undefined, string, string>;
+    opacity: import("mobx-state-tree").IType<number | undefined, number, number>;
+    custom: import("mobx-state-tree").IType<any, any, any>;
+    visible: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    selectable: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    removable: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    alwaysOnTop: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    showInExport: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+}>>;
 export type NodeType = Instance<typeof Node>;

package/model/node-model.js

@@ -1 +1 @@
-import{types as e,getParentOfType as t,getSnapshot as o,hasParentOfType as n}from"mobx-state-tree";import{nanoid as r}from"nanoid";import{Store as s}from"./store.js";import{Page as i}from"./page-model.js";import{GroupElement as a,forEveryChild as l}from"./group-model.js";export const Node=e.model("Node",{id:e.identifier,type:"none",name:"",opacity:1,custom:e.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=>{const t=Object.assign({},e),o={};for(var n in t){"_"!==n[0]&&(o[n]=e[n])}return o}).views(e=>({get locked(){return!(e.draggable||e.contentEditable||e.styleEditable||e.resizable)},get page(){return t(e,i)},get store(){return t(e,s)},get top(){let o=e;for(;;){if(!n(o,a)){return o}o=t(o,a)}},get parent(){if(n(e,a)){const o=t(e,a);return o&&o.children&&o.children.length,o}if(n(e,i)){const o=t(e,i);return o&&o.children&&o.children.length,o}if(n(e,s)){const o=t(e,s);return o&&o.pages&&o.pages.length,o}return null},get zIndex(){return e.parent.children.indexOf(e)}})).actions(e=>({toJSON:()=>Object.assign({},o(e))})).actions(e=>({clone(t={},{skipSelect:o=!1}={}){const n=JSON.parse(JSON.stringify(e.toJSON()));return t.id=t.id||r(10),l(n,e=>{e.id=r(10)}),Object.assign(n,t),e.page.addElement(n,{skipSelect:o})},set(t){Object.assign(e,t)},moveUp(){e.page.moveElementsUp([e.id])},moveTop(){e.page.moveElementsTop([e.id])},moveDown(){e.page.moveElementsDown([e.id])},moveBottom(){e.page.moveElementsBottom([e.id])},setZIndex(t){e.parent.setElementZIndex(e.id,t)},beforeDestroy(){}}));
+import{types as e,getParentOfType as t,getSnapshot as o,hasParentOfType as n}from"mobx-state-tree";import{nanoid as r}from"nanoid";import{Store as s}from"./store.js";import{Page as i}from"./page-model.js";import{GroupElement as p,forEveryChild as m}from"./group-model.js";export const Node=e.model("Node",{id:e.identifier,type:"none",name:"",opacity:1,custom:e.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=>{const t=Object.assign({},e),o={};for(var n in t){"_"!==n[0]&&(o[n]=e[n])}return o}).views(e=>({get page(){return t(e,i)},get store(){return t(e,s)},get top(){let o=e;for(;;){if(!n(o,p)){return o}o=t(o,p)}},get parent(){if(n(e,p)){const o=t(e,p);return o&&o.children&&o.children.length,o}if(n(e,i)){const o=t(e,i);return o&&o.children&&o.children.length,o}if(n(e,s)){const o=t(e,s);return o&&o.pages&&o.pages.length,o}return null},get zIndex(){return e.parent.children.indexOf(e)}})).actions(e=>({toJSON:()=>Object.assign({},o(e))})).actions(e=>({clone(t={},{skipSelect:o=!1}={}){const n=JSON.parse(JSON.stringify(e.toJSON()));return t.id=t.id||r(10),m(n,e=>{e.id=r(10)}),Object.assign(n,t),e.page.addElement(n,{skipSelect:o})},set(t){Object.assign(e,t)},moveUp(){e.page.moveElementsUp([e.id])},moveTop(){e.page.moveElementsTop([e.id])},moveDown(){e.page.moveElementsDown([e.id])},moveBottom(){e.page.moveElementsBottom([e.id])},setZIndex(t){e.parent.setElementZIndex(e.id,t)},beforeDestroy(){}}));

package/model/page-model.d.ts

@@ -6,13 +6,13 @@ export declare const Page: import("mobx-state-tree").IModelType<{
     children: import("mobx-state-tree").IArrayType<any>;
     width: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree/dist/internal").IUnionType<[import("mobx-state-tree").ISimpleType<number>, import("mobx-state-tree").ISimpleType<"auto">]>, [undefined]>;
     height: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree/dist/internal").IUnionType<[import("mobx-state-tree").ISimpleType<number>, import("mobx-state-tree").ISimpleType<"auto">]>, [undefined]>;
-    background: import("mobx-state-tree").IType<string, string, string>;
-    bleed: import("mobx-state-tree").IType<number, number, number>;
+    background: import("mobx-state-tree").IType<string | undefined, string, string>;
+    bleed: import("mobx-state-tree").IType<number | undefined, number, number>;
     custom: import("mobx-state-tree").IType<any, any, any>;
-    duration: import("mobx-state-tree").IType<number, number, number>;
-    _exporting: import("mobx-state-tree").IType<boolean, boolean, boolean>;
-    _rendering: import("mobx-state-tree").IType<boolean, boolean, boolean>;
-    _forceMount: import("mobx-state-tree").IType<boolean, boolean, boolean>;
+    duration: import("mobx-state-tree").IType<number | undefined, number, number>;
+    _exporting: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    _rendering: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    _forceMount: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
 }, {
     readonly store: any;
 } & {
@@ -35,17 +35,17 @@ export declare const Page: import("mobx-state-tree").IModelType<{
     } & (T extends ElementType["type"] ? Partial<Omit<Extract<ElementType, {
         type: T;
     }>, "type">> : Record<string, any>), { skipSelect }?: {
-        skipSelect?: boolean;
+        skipSelect?: boolean | undefined;
     }): T extends ElementType["type"] ? Extract<ElementType, {
         type: T;
     }> : NodeType;
-    canMoveElementsUp(ids: Array<string>): false;
+    canMoveElementsUp(ids: Array<string>): boolean;
     moveElementsUp(ids: Array<string>): void;
-    canMoveElementsTop(ids: Array<string>): any;
+    canMoveElementsTop(ids: Array<string>): boolean;
     moveElementsTop(ids: Array<string>): void;
-    canMoveElementsDown(ids: Array<string>): false;
+    canMoveElementsDown(ids: Array<string>): boolean;
     moveElementsDown(ids: Array<string>): void;
-    canMoveElementsBottom(ids: Array<string>): any;
+    canMoveElementsBottom(ids: Array<string>): boolean;
     moveElementsBottom(ids: Array<string>): void;
     setElementZIndex(id: any, zIndex: any): void;
     setSize({ width, height, useMagic, softChange, }: {

package/model/page-model.js

@@ -1 +1 @@
-import{detach as e,getParentOfType as t,getSnapshot as n,types as i}from"mobx-state-tree";import{nanoid as o}from"nanoid";import{ElementTypes as r,forEveryChild as d,TYPES_MAP as s}from"./group-model.js";import{Store as c}from"./store.js";import{getTotalClientRect as a}from"../utils/math.js";export const Page=i.model("Page",{id:i.identifier,children:i.array(i.late(()=>r)),width:i.optional(i.union(i.number,i.literal("auto")),"auto"),height:i.optional(i.union(i.number,i.literal("auto")),"auto"),background:"white",bleed:0,custom:i.frozen(),duration:5e3,_exporting:!1,_rendering:!1,_forceMount:!1}).postProcessSnapshot(e=>{const t=Object.assign({},e),n={};for(var i in t){"_"!==i[0]&&(n[i]=e[i])}return n}).views(e=>({get store(){return t(e,c)}})).views(e=>({get startTime(){let t=0;for(const n of e.store.pages){if(n.id===e.id){return t}t+=n.duration}return t},get _exportingOrRendering(){return e._exporting||e._rendering}})).views(e=>({get computedWidth(){return"auto"===e.width?e.store.width:e.width},get computedHeight(){return"auto"===e.height?e.store.height:e.height}})).actions(e=>({toJSON:()=>JSON.parse(JSON.stringify(n(e))),_forEachElementUp(t,n){const i=t.map(t=>({id:t,index:e.children.findIndex(e=>e.id===t)}));i.sort((e,t)=>t.index-e.index);for(const{index:o}of i){if(-1==o){continue}const i=o<e.children.length-1&&e.children[o+1],r=t.indexOf(null==i?void 0:i.id)>=0;o===e.children.length-1||r||n(o)}},_forEachElementDown(t,n){const i=t.map(t=>({id:t,index:e.children.findIndex(e=>e.id===t)}));i.sort((e,t)=>e.index-t.index);for(const{index:o}of i){if(-1==o){continue}const i=o>0&&e.children[o-1],r=t.indexOf(null==i?void 0:i.id)>=0;0===o||r||n(o)}return!1}})).actions(t=>({clone(e={}){const n=t.toJSON();n.children.forEach(e=>{e.id=o(10),d(e,e=>{e.id=o(10)})});const i=Object.assign(Object.assign(Object.assign({},n),{id:o(10)}),e),r=t.store.addPage(i),s=t.store.pages.indexOf(t);return r.setZIndex(s+1),r.select(),r},setZIndex(e){t.store.setPageZIndex(t.id,e)},set(e){Object.assign(t,e)},select(){t.store.selectPage(t.id)},addElement(e,{skipSelect:n=!1}={}){const i=s[e.type];if(!i){return void console.error("Can not find model with type "+e.type)}"children"in e&&Array.isArray(e.children)&&d(e,e=>{e.id=e.id||o(10)});const r=t.children.reduce((t,n)=>{if("group"===n.type){const i=n.children.reduce((t,n)=>{var i;const o=null===(i=n.name)||void 0===i?void 0:i.match(new RegExp(`${e.type}-(\\d+)`));if(o){const e=parseInt(o[1],10);return Math.max(t,e||0)}},0);return Math.max(t,i||0)}{const i=n.name.match(new RegExp(`${e.type}-(\\d+)`));if(i){const e=parseInt(i[1],10);return Math.max(t,e||0)}}return t},0),c=i.create(Object.assign({id:o(10),name:`${e.type}-${r+1}`},e));return t.children.push(c),c.selectable&&!n&&t.store.selectElements([c.id]),c},canMoveElementsUp(e){let n=!1;return t._forEachElementUp(e,()=>{n=n||!0}),n},moveElementsUp(n){t._forEachElementUp(n,n=>{const i=t.children[n];e(i),t.children.splice(n+1,0,i)})},canMoveElementsTop(e){return this.canMoveElementsUp(e)},moveElementsTop(e){const n=[],i=[];t.children.forEach(t=>{e.indexOf(t.id)>=0?n.push(t):i.push(t)}),t.children.replace(i.concat(n))},canMoveElementsDown(e){let n=!1;return t._forEachElementDown(e,()=>{n=n||!0}),n},moveElementsDown(n){t._forEachElementDown(n,n=>{const i=t.children[n];e(i),t.children.splice(n-1,0,i)})},canMoveElementsBottom(e){return this.canMoveElementsDown(e)},moveElementsBottom(e){const n=[],i=[];t.children.forEach(t=>{e.indexOf(t.id)>=0?n.push(t):i.push(t)}),t.children.replace(n.concat(i))},setElementZIndex(n,i){const o=t.children.find(e=>e.id===n);o&&(e(o),t.children.remove(o),t.children.splice(i,0,o))},setSize({width:e,height:n,useMagic:i,softChange:o}){if(i){const i=[],o=e=>"image"===e.type&&e.x<1&&e.y<1&&e.width>=t.computedWidth-2&&e.height>=t.computedHeight-2;d(t,e=>{"group"!==e.type&&(o(e)||i.push(e))});const r=i.length?a(i):{x:0,y:0,width:t.computedWidth,height:t.computedHeight},s=1/4,c=Math.max(0,Math.min(r.x,t.computedWidth-r.x-r.width)),h=t.computedWidth*s,m=Math.max(0,c-h),l=Math.max(0,Math.min(r.y,t.computedHeight-r.y-r.height)),p=t.computedHeight*s,u=Math.max(0,l-p),g=t.computedWidth-2*m,f=t.computedHeight-2*u,E=e/g,x=n/f,v=Math.min(E,x),w=(e-g*v)/2-m*v,y=(n-f*v)/2-u*v;d(t,e=>{"group"!==e.type&&(o(e)?e.set({x:e.x*v,y:e.y*v,width:e.width*E,height:e.height*x,cropX:0,cropY:0,cropWidth:1,cropHeight:1}):(e.set({x:w+e.x*v,y:y+e.y*v,width:e.width*v,height:e.height*v}),"text"===e.type?e.set({fontSize:e.fontSize*v}):"figure"===e.type&&e.set({strokeWidth:e.strokeWidth*v})))})}o||(t.width=e),o||(t.height=n)}})).actions(e=>({moveElementUp(t){console.warn("page.moveElementUp(id) is deprecated. Please use page.moveElementsUp([id1, id2]) instead."),e.moveElementsUp([t])},moveElementDown(t){console.warn("page.moveElementDown(id) is deprecated. Please use page.moveElementsDown([id1, id2]) instead."),e.moveElementsDown([t])},moveElementTop(t){console.warn("page.moveElementTop(id) is deprecated. Please use page.moveElementsTop([id1, id2]) instead."),e.moveElementsTop([t])},moveElementBottom(t){console.warn("page.moveElementBottom(id) is deprecated. Please use page.moveElementsBottom([id1, id2]) instead."),e.moveElementsBottom([t])},play(){e.store.play({startTime:e.startTime,endTime:e.startTime+e.duration})}}));
+import{detach as e,getParentOfType as t,getSnapshot as n,types as o}from"mobx-state-tree";import{nanoid as i}from"nanoid";import{ElementTypes as r,forEveryChild as d,TYPES_MAP as s}from"./group-model.js";import{Store as c}from"./store.js";import{getTotalClientRect as a}from"../utils/math.js";export const Page=o.model("Page",{id:o.identifier,children:o.array(o.late(()=>r)),width:o.optional(o.union(o.number,o.literal("auto")),"auto"),height:o.optional(o.union(o.number,o.literal("auto")),"auto"),background:"white",bleed:0,custom:o.frozen(),duration:5e3,_exporting:!1,_rendering:!1,_forceMount:!1}).postProcessSnapshot(e=>{const t=Object.assign({},e),n={};for(var o in t){"_"!==o[0]&&(n[o]=e[o])}return n}).views(e=>({get store(){return t(e,c)}})).views(e=>({get startTime(){let t=0;for(const n of e.store.pages){if(n.id===e.id){return t}t+=n.duration}return t},get _exportingOrRendering(){return e._exporting||e._rendering}})).views(e=>({get computedWidth(){return"auto"===e.width?e.store.width:e.width},get computedHeight(){return"auto"===e.height?e.store.height:e.height}})).actions(e=>({toJSON:()=>JSON.parse(JSON.stringify(n(e))),_forEachElementUp(t,n){const o=t.map(t=>({id:t,index:e.children.findIndex(e=>e.id===t)}));o.sort((e,t)=>t.index-e.index);for(const{index:i}of o){if(-1==i){continue}const o=i<e.children.length-1&&e.children[i+1],r=t.indexOf(null==o?void 0:o.id)>=0;i===e.children.length-1||r||n(i)}},_forEachElementDown(t,n){const o=t.map(t=>({id:t,index:e.children.findIndex(e=>e.id===t)}));o.sort((e,t)=>e.index-t.index);for(const{index:i}of o){if(-1==i){continue}const o=i>0&&e.children[i-1],r=t.indexOf(null==o?void 0:o.id)>=0;0===i||r||n(i)}return!1}})).actions(t=>{const n={clone(e={}){const n=t.toJSON();n.children.forEach(e=>{e.id=i(10),d(e,e=>{e.id=i(10)})});const o=Object.assign(Object.assign(Object.assign({},n),{id:i(10)}),e),r=t.store.addPage(o),s=t.store.pages.indexOf(t);return r.setZIndex(s+1),r.select(),r},setZIndex(e){t.store.setPageZIndex(t.id,e)},set(e){Object.assign(t,e)},select(){t.store.selectPage(t.id)},addElement(e,{skipSelect:n=!1}={}){const o=s[e.type];if(!o){return void console.error("Can not find model with type "+e.type)}"children"in e&&Array.isArray(e.children)&&d(e,e=>{e.id=e.id||i(10)});const r=t.children.reduce((t,n)=>{if("group"===n.type){const o=n.children.reduce((t,n)=>{var o;const i=null===(o=n.name)||void 0===o?void 0:o.match(new RegExp(`${e.type}-(\\d+)`));if(i){const e=parseInt(i[1],10);return Math.max(t,e||0)}},0);return Math.max(t,o||0)}{const o=n.name.match(new RegExp(`${e.type}-(\\d+)`));if(o){const e=parseInt(o[1],10);return Math.max(t,e||0)}}return t},0),c=o.create(Object.assign({id:i(10),name:`${e.type}-${r+1}`},e));return t.children.push(c),c.selectable&&!n&&t.store.selectElements([c.id]),c},canMoveElementsUp(e){let n=!1;return t._forEachElementUp(e,()=>{n=n||!0}),n},moveElementsUp(n){t._forEachElementUp(n,n=>{const o=t.children[n];e(o),t.children.splice(n+1,0,o)})},canMoveElementsTop:e=>n.canMoveElementsUp(e),moveElementsTop(e){const n=[],o=[];t.children.forEach(t=>{e.indexOf(t.id)>=0?n.push(t):o.push(t)}),t.children.replace(o.concat(n))},canMoveElementsDown(e){let n=!1;return t._forEachElementDown(e,()=>{n=n||!0}),n},moveElementsDown(n){t._forEachElementDown(n,n=>{const o=t.children[n];e(o),t.children.splice(n-1,0,o)})},canMoveElementsBottom:e=>n.canMoveElementsDown(e),moveElementsBottom(e){const n=[],o=[];t.children.forEach(t=>{e.indexOf(t.id)>=0?n.push(t):o.push(t)}),t.children.replace(n.concat(o))},setElementZIndex(n,o){const i=t.children.find(e=>e.id===n);i&&(e(i),t.children.remove(i),t.children.splice(o,0,i))},setSize({width:e,height:n,useMagic:o,softChange:i}){if(o){const o=[],i=e=>"image"===e.type&&e.x<1&&e.y<1&&e.width>=t.computedWidth-2&&e.height>=t.computedHeight-2;d(t,e=>{"group"!==e.type&&(i(e)||o.push(e))});const r=o.length?a(o):{x:0,y:0,width:t.computedWidth,height:t.computedHeight},s=1/4,c=Math.max(0,Math.min(r.x,t.computedWidth-r.x-r.width)),m=t.computedWidth*s,h=Math.max(0,c-m),l=Math.max(0,Math.min(r.y,t.computedHeight-r.y-r.height)),p=t.computedHeight*s,u=Math.max(0,l-p),g=t.computedWidth-2*h,f=t.computedHeight-2*u,E=e/g,x=n/f,v=Math.min(E,x),w=(e-g*v)/2-h*v,y=(n-f*v)/2-u*v;d(t,e=>{"group"!==e.type&&(i(e)?e.set({x:e.x*v,y:e.y*v,width:e.width*E,height:e.height*x,cropX:0,cropY:0,cropWidth:1,cropHeight:1}):(e.set({x:w+e.x*v,y:y+e.y*v,width:e.width*v,height:e.height*v}),"text"===e.type?e.set({fontSize:e.fontSize*v}):"figure"===e.type&&e.set({strokeWidth:e.strokeWidth*v})))})}i||(t.width=e),i||(t.height=n)}};return n}).actions(e=>({moveElementUp(t){console.warn("page.moveElementUp(id) is deprecated. Please use page.moveElementsUp([id1, id2]) instead."),e.moveElementsUp([t])},moveElementDown(t){console.warn("page.moveElementDown(id) is deprecated. Please use page.moveElementsDown([id1, id2]) instead."),e.moveElementsDown([t])},moveElementTop(t){console.warn("page.moveElementTop(id) is deprecated. Please use page.moveElementsTop([id1, id2]) instead."),e.moveElementsTop([t])},moveElementBottom(t){console.warn("page.moveElementBottom(id) is deprecated. Please use page.moveElementsBottom([id1, id2]) instead."),e.moveElementsBottom([t])},play(){e.store.play({startTime:e.startTime,endTime:e.startTime+e.duration})}}));

package/model/shape-model.d.ts

@@ -1,93 +1,118 @@
 import { Instance } from 'mobx-state-tree';
 export declare const Animation: import("mobx-state-tree").IModelType<{
-    delay: import("mobx-state-tree").IType<number, number, number>;
-    duration: import("mobx-state-tree").IType<number, number, number>;
-    enabled: import("mobx-state-tree").IType<boolean, boolean, boolean>;
+    delay: import("mobx-state-tree").IType<number | undefined, number, number>;
+    duration: import("mobx-state-tree").IType<number | undefined, number, number>;
+    enabled: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
     type: import("mobx-state-tree").ISimpleType<string>;
-    name: import("mobx-state-tree").IType<string, string, string>;
-    data: import("mobx-state-tree").IType<{}, {}, {}>;
+    name: import("mobx-state-tree").IType<string | undefined, string, string>;
+    data: import("mobx-state-tree").IType<{} | null | undefined, {}, {}>;
 }, {}, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>;
 export declare const getDiff: (obj1: Record<string, any>, obj2: Record<string, any>) => Record<string, any>;
 export declare const ShapeFilter: import("mobx-state-tree").IModelType<{
-    intensity: import("mobx-state-tree").IType<number, number, number>;
+    intensity: import("mobx-state-tree").IType<number | undefined, number, number>;
 }, {}, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>;
 export declare const INDEPENDENT_FILTERS: string[];
 export declare const Shape: import("mobx-state-tree").IModelType<{
     id: import("mobx-state-tree").ISimpleType<string>;
-    type: import("mobx-state-tree").IType<string, string, string>;
-    name: import("mobx-state-tree").IType<string, string, string>;
-    opacity: import("mobx-state-tree").IType<number, number, number>;
+    type: import("mobx-state-tree").IType<string | undefined, string, string>;
+    name: import("mobx-state-tree").IType<string | undefined, string, string>;
+    opacity: import("mobx-state-tree").IType<number | undefined, number, number>;
     custom: import("mobx-state-tree").IType<any, any, any>;
-    visible: import("mobx-state-tree").IType<boolean, boolean, boolean>;
-    selectable: import("mobx-state-tree").IType<boolean, boolean, boolean>;
-    removable: import("mobx-state-tree").IType<boolean, boolean, boolean>;
-    alwaysOnTop: import("mobx-state-tree").IType<boolean, boolean, boolean>;
-    showInExport: import("mobx-state-tree").IType<boolean, boolean, boolean>;
+    visible: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    selectable: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    removable: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    alwaysOnTop: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    showInExport: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
 } & {
-    x: import("mobx-state-tree").IType<number, number, number>;
-    y: import("mobx-state-tree").IType<number, number, number>;
-    width: import("mobx-state-tree").IType<number, number, number>;
-    height: import("mobx-state-tree").IType<number, number, number>;
-    rotation: import("mobx-state-tree").IType<number, number, number>;
-    opacity: import("mobx-state-tree").IType<number, number, number>;
+    x: import("mobx-state-tree").IType<number | undefined, number, number>;
+    y: import("mobx-state-tree").IType<number | undefined, number, number>;
+    width: import("mobx-state-tree").IType<number | undefined, number, number>;
+    height: import("mobx-state-tree").IType<number | undefined, number, number>;
+    rotation: import("mobx-state-tree").IType<number | undefined, number, number>;
+    opacity: import("mobx-state-tree").IType<number | undefined, number, number>;
     animations: import("mobx-state-tree").IArrayType<import("mobx-state-tree").IModelType<{
-        delay: import("mobx-state-tree").IType<number, number, number>;
-        duration: import("mobx-state-tree").IType<number, number, number>;
-        enabled: import("mobx-state-tree").IType<boolean, boolean, boolean>;
+        delay: import("mobx-state-tree").IType<number | undefined, number, number>;
+        duration: import("mobx-state-tree").IType<number | undefined, number, number>;
+        enabled: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
         type: import("mobx-state-tree").ISimpleType<string>;
-        name: import("mobx-state-tree").IType<string, string, string>;
-        data: import("mobx-state-tree").IType<{}, {}, {}>;
+        name: import("mobx-state-tree").IType<string | undefined, string, string>;
+        data: import("mobx-state-tree").IType<{} | null | undefined, {}, {}>;
     }, {}, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
-    blurEnabled: import("mobx-state-tree").IType<boolean, boolean, boolean>;
-    blurRadius: import("mobx-state-tree").IType<number, number, number>;
-    brightnessEnabled: import("mobx-state-tree").IType<boolean, boolean, boolean>;
-    brightness: import("mobx-state-tree").IType<number, number, number>;
-    sepiaEnabled: import("mobx-state-tree").IType<boolean, boolean, boolean>;
-    grayscaleEnabled: import("mobx-state-tree").IType<boolean, boolean, boolean>;
+    blurEnabled: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    blurRadius: import("mobx-state-tree").IType<number | undefined, number, number>;
+    brightnessEnabled: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    brightness: import("mobx-state-tree").IType<number | undefined, number, number>;
+    sepiaEnabled: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    grayscaleEnabled: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
     filters: import("mobx-state-tree").IMapType<import("mobx-state-tree").IModelType<{
-        intensity: import("mobx-state-tree").IType<number, number, number>;
+        intensity: import("mobx-state-tree").IType<number | undefined, number, number>;
     }, {}, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
-    shadowEnabled: import("mobx-state-tree").IType<boolean, boolean, boolean>;
-    shadowBlur: import("mobx-state-tree").IType<number, number, number>;
-    shadowOffsetX: import("mobx-state-tree").IType<number, number, number>;
-    shadowOffsetY: import("mobx-state-tree").IType<number, number, number>;
-    shadowColor: import("mobx-state-tree").IType<string, string, string>;
-    shadowOpacity: import("mobx-state-tree").IType<number, number, number>;
-    visible: import("mobx-state-tree").IType<boolean, boolean, boolean>;
-    draggable: import("mobx-state-tree").IType<boolean, boolean, boolean>;
-    resizable: import("mobx-state-tree").IType<boolean, boolean, boolean>;
-    selectable: import("mobx-state-tree").IType<boolean, boolean, boolean>;
-    contentEditable: import("mobx-state-tree").IType<boolean, boolean, boolean>;
-    styleEditable: import("mobx-state-tree").IType<boolean, boolean, boolean>;
-    alwaysOnTop: import("mobx-state-tree").IType<boolean, boolean, boolean>;
-    showInExport: import("mobx-state-tree").IType<boolean, boolean, boolean>;
+    shadowEnabled: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    shadowBlur: import("mobx-state-tree").IType<number | undefined, number, number>;
+    shadowOffsetX: import("mobx-state-tree").IType<number | undefined, number, number>;
+    shadowOffsetY: import("mobx-state-tree").IType<number | undefined, number, number>;
+    shadowColor: import("mobx-state-tree").IType<string | undefined, string, string>;
+    shadowOpacity: import("mobx-state-tree").IType<number | undefined, number, number>;
+    visible: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    draggable: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    resizable: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    selectable: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    contentEditable: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    styleEditable: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    alwaysOnTop: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    showInExport: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
 }, {
-    readonly locked: boolean;
     readonly page: any;
     readonly store: any;
     readonly top: import("mobx-state-tree").ModelInstanceTypeProps<{
         id: import("mobx-state-tree").ISimpleType<string>;
-        type: import("mobx-state-tree").IType<string, string, string>;
-        name: import("mobx-state-tree").IType<string, string, string>;
-        opacity: import("mobx-state-tree").IType<number, number, number>;
+        type: import("mobx-state-tree").IType<string | undefined, string, string>;
+        name: import("mobx-state-tree").IType<string | undefined, string, string>;
+        opacity: import("mobx-state-tree").IType<number | undefined, number, number>;
         custom: import("mobx-state-tree").IType<any, any, any>;
-        visible: import("mobx-state-tree").IType<boolean, boolean, boolean>;
-        selectable: import("mobx-state-tree").IType<boolean, boolean, boolean>;
-        removable: import("mobx-state-tree").IType<boolean, boolean, boolean>;
-        alwaysOnTop: import("mobx-state-tree").IType<boolean, boolean, boolean>;
-        showInExport: import("mobx-state-tree").IType<boolean, boolean, boolean>;
+        visible: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+        selectable: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+        removable: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+        alwaysOnTop: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+        showInExport: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
     }> & import("mobx-state-tree").IStateTreeNode<import("mobx-state-tree").IModelType<{
         id: import("mobx-state-tree").ISimpleType<string>;
-        type: import("mobx-state-tree").IType<string, string, string>;
-        name: import("mobx-state-tree").IType<string, string, string>;
-        opacity: import("mobx-state-tree").IType<number, number, number>;
+        type: import("mobx-state-tree").IType<string | undefined, string, string>;
+        name: import("mobx-state-tree").IType<string | undefined, string, string>;
+        opacity: import("mobx-state-tree").IType<number | undefined, number, number>;
         custom: import("mobx-state-tree").IType<any, any, any>;
-        visible: import("mobx-state-tree").IType<boolean, boolean, boolean>;
-        selectable: import("mobx-state-tree").IType<boolean, boolean, boolean>;
-        removable: import("mobx-state-tree").IType<boolean, boolean, boolean>;
-        alwaysOnTop: import("mobx-state-tree").IType<boolean, boolean, boolean>;
-        showInExport: import("mobx-state-tree").IType<boolean, boolean, boolean>;
+        visible: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+        selectable: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+        removable: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+        alwaysOnTop: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+        showInExport: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
     }, {}, import("mobx-state-tree").ModelCreationType<{
+        id: string;
+        type: string | undefined;
+        name: string | undefined;
+        opacity: number | undefined;
+        custom: any;
+        visible: boolean | undefined;
+        selectable: boolean | undefined;
+        removable: boolean | undefined;
+        alwaysOnTop: boolean | undefined;
+        showInExport: boolean | undefined;
+    }>, import("mobx-state-tree").ModelSnapshotType<{
+        id: import("mobx-state-tree").ISimpleType<string>;
+        type: import("mobx-state-tree").IType<string | undefined, string, string>;
+        name: import("mobx-state-tree").IType<string | undefined, string, string>;
+        opacity: import("mobx-state-tree").IType<number | undefined, number, number>;
+        custom: import("mobx-state-tree").IType<any, any, any>;
+        visible: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+        selectable: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+        removable: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+        alwaysOnTop: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+        showInExport: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    }>>>;
+    readonly parent: any;
+    readonly zIndex: any;
+} & {
+    toJSON(): {
         id: string;
         type: string;
         name: string;
@@ -98,14 +123,10 @@ export declare const Shape: import("mobx-state-tree").IModelType<{
         removable: boolean;
         alwaysOnTop: boolean;
         showInExport: boolean;
-    }>, {}>>;
-    readonly parent: any;
-    readonly zIndex: any;
-} & {
-    toJSON(): {};
+    };
 } & {
     clone(attrs?: any, { skipSelect }?: {
-        skipSelect?: boolean;
+        skipSelect?: boolean | undefined;
     }): import("./node-model.js").NodeType;
     set(attrs: any): void;
     moveUp(): void;
@@ -115,30 +136,33 @@ export declare const Shape: import("mobx-state-tree").IModelType<{
     setZIndex(zIndex: number): void;
     beforeDestroy(): void;
 } & {
-    readonly a: {
-        x: number;
-        y: number;
-        width: number;
-        height: number;
-        rotation: number;
-        opacity: number;
-        color: any;
-        fontSize: any;
-    };
+    readonly locked: boolean;
+    readonly a: Record<string, any>;
     animated(attr: any): any;
 } & {
     setAnimation(type: any, attrs: any): void;
     setFilter(type: any, value: any): void;
 }, import("mobx-state-tree").ModelCreationType<{
     id: string;
-    type: string;
-    name: string;
-    opacity: number;
+    type: string | undefined;
+    name: string | undefined;
+    opacity: number | undefined;
     custom: any;
-    visible: boolean;
-    selectable: boolean;
-    removable: boolean;
-    alwaysOnTop: boolean;
-    showInExport: boolean;
-}>, {}>;
+    visible: boolean | undefined;
+    selectable: boolean | undefined;
+    removable: boolean | undefined;
+    alwaysOnTop: boolean | undefined;
+    showInExport: boolean | undefined;
+}>, import("mobx-state-tree").ModelSnapshotType<{
+    id: import("mobx-state-tree").ISimpleType<string>;
+    type: import("mobx-state-tree").IType<string | undefined, string, string>;
+    name: import("mobx-state-tree").IType<string | undefined, string, string>;
+    opacity: import("mobx-state-tree").IType<number | undefined, number, number>;
+    custom: import("mobx-state-tree").IType<any, any, any>;
+    visible: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    selectable: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    removable: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    alwaysOnTop: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    showInExport: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+}>>;
 export type ShapeType = Instance<typeof Shape>;

package/model/shape-model.js

@@ -1 +1 @@
-import{types as t}from"mobx-state-tree";import{animate as e}from"../utils/animations.js";import{observable as i,action as n}from"mobx";import{Node as o}from"./node-model.js";export const Animation=t.model("Animation",{delay:0,duration:500,enabled:!0,type:t.enumeration("Type",["enter","exit","loop"]),name:"none",data:t.frozen({})});export const getDiff=(t,e)=>{const i={};for(const n in e){if("number"==typeof t[n]&&"number"==typeof e[n]){const o=e[n]-t[n];0!==o&&(i[n]=o)}}return i};export const ShapeFilter=t.model("ShapeFilter",{intensity:1});export const INDEPENDENT_FILTERS=["temperature","contrast","highlights","shadows","white","black","saturation","vibrance"];export const Shape=o.named("Shape").props({x:0,y:0,width:100,height:100,rotation:0,opacity:1,animations:t.array(Animation),blurEnabled:!1,blurRadius:10,brightnessEnabled:!1,brightness:0,sepiaEnabled:!1,grayscaleEnabled:!1,filters:t.map(ShapeFilter),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(t=>{const e=Object.assign(Object.assign({},t),{x:t.x||0,y:t.y||0,filters:Array.isArray(t.filters)?{}:t.filters});return"width"in t&&(e.width=e.width||1),"height"in t&&(e.height=e.height||1),t.locked&&(e.draggable=!1,e.contentEditable=!1,e.styleEditable=!1,e.resizable=!1,e.removable=!1),e}).views(t=>{const o=i({x:t.x,y:t.y,width:t.width,height:t.height,rotation:t.rotation,opacity:t.opacity,color:t.color,fontSize:t.fontSize}),a=n(t=>{Object.assign(o,t)}),r=n(t=>{for(const e in t){"number"==typeof o[e]&&(o[e]=o[e]+t[e])}});return{get a(){const{currentTime:i}=t.store;if(a({x:t.x,y:t.y,width:t.width,height:t.height,rotation:t.rotation,opacity:t.opacity,color:t.color,fontSize:t.fontSize,cropX:t.cropX,cropY:t.cropY,cropWidth:t.cropWidth,cropHeight:t.cropHeight}),0===i){return o}const n=i-t.page.startTime;if(n>t.page.duration){return o}if(n<0){return o}const s=t.store.animatedElementsIds;if(s.length&&!s.includes(t.id)){return o}const l=t.animations.find(t=>"enter"===t.type),d=(null==l?void 0:l.enabled)&&n<l.delay;d&&a({opacity:0});const c=(null==l?void 0:l.enabled)&&n>=l.delay&&n<=l.delay+l.duration;if(c){const i=n-l.delay,o=e({element:t,animation:l,dTime:i}),a=getDiff(t,o);r(a)}const p=t.animations.find(t=>"exit"===t.type);if(!d&&!c&&(null==p?void 0:p.enabled)&&n>=t.page.duration-p.duration-p.delay&&n<=t.page.duration-p.delay){const i=n-(t.page.duration-p.duration-p.delay),o=e({element:t,animation:p,dTime:i}),a=getDiff(t,o);r(a)}(null==p?void 0:p.enabled)&&n>=t.page.duration-p.delay&&a({opacity:0});const h=t.animations.find(t=>"loop"===t.type);if(null==h?void 0:h.enabled){const i=e({element:t,animation:h,dTime:n}),o=getDiff(t,i);r(o)}return o},animated:e=>t.a[e]}}).actions(t=>({setAnimation(e,i){const n=t.animations.find(t=>t.type===e);n?Object.assign(n,i):t.animations.push(Object.assign({type:e},i))},setFilter(e,i){INDEPENDENT_FILTERS.includes(e)||t.filters.forEach((e,i)=>{INDEPENDENT_FILTERS.includes(i.toString())||t.filters.delete(i.toString())}),null==i?t.filters.delete(e):t.filters.set(e,{intensity:i})}}));
+import{types as e}from"mobx-state-tree";import{animate as t}from"../utils/animations.js";import{observable as n,action as i}from"mobx";import{Node as o}from"./node-model.js";export const Animation=e.model("Animation",{delay:0,duration:500,enabled:!0,type:e.enumeration("Type",["enter","exit","loop"]),name:"none",data:e.frozen({})});export const getDiff=(e,t)=>{const n={};for(const i in t){if("number"==typeof e[i]&&"number"==typeof t[i]){const o=t[i]-e[i];0!==o&&(n[i]=o)}}return n};export const ShapeFilter=e.model("ShapeFilter",{intensity:1});export const INDEPENDENT_FILTERS=["temperature","contrast","highlights","shadows","white","black","saturation","vibrance"];export const Shape=o.named("Shape").props({x:0,y:0,width:100,height:100,rotation:0,opacity:1,animations:e.array(Animation),blurEnabled:!1,blurRadius:10,brightnessEnabled:!1,brightness:0,sepiaEnabled:!1,grayscaleEnabled:!1,filters:e.map(ShapeFilter),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:"x"in e&&e.x||0,y:"y"in e&&e.y||0,filters:"filters"in e?Array.isArray(e.filters)?{}:e.filters:void 0});return"width"in e&&(t.width=t.width||1),"height"in e&&(t.height=t.height||1),"locked"in e&&e.locked&&(t.draggable=!1,t.contentEditable=!1,t.styleEditable=!1,t.resizable=!1,t.removable=!1),t}).views(e=>{const o=["x","y","width","height","rotation","opacity","color","fontSize","cropX","cropY","cropWidth","cropHeight"],a=e,r={};for(const t of o){t in e&&(r[t]=a[t])}const s=n(r),l=i(e=>{for(const t in e){s[t]=e[t]}}),d=i(e=>{Object.assign(s,e)}),c=i(e=>{for(const t in e){"number"==typeof s[t]&&(s[t]=s[t]+e[t])}});return{get locked(){return!(e.draggable||e.contentEditable||e.styleEditable||e.resizable)},get a(){const{currentTime:n}=e.store,i={};for(const e in s){i[e]=a[e]}if(l(i),0===n){return s}const o=n-e.page.startTime;if(o>e.page.duration){return s}if(o<0){return s}const r=e.store.animatedElementsIds;if(r.length&&!r.includes(e.id)){return s}const p=e.animations.find(e=>"enter"===e.type),f=(null==p?void 0:p.enabled)&&o<p.delay;f&&d({opacity:0});const m=(null==p?void 0:p.enabled)&&o>=p.delay&&o<=p.delay+p.duration;if(m){const n=o-p.delay,i=t({element:e,animation:p,dTime:n}),a=getDiff(e,i);c(a)}const b=e.animations.find(e=>"exit"===e.type);if(!f&&!m&&(null==b?void 0:b.enabled)&&o>=e.page.duration-b.duration-b.delay&&o<=e.page.duration-b.delay){const n=o-(e.page.duration-b.duration-b.delay),i=t({element:e,animation:b,dTime:n}),a=getDiff(e,i);c(a)}(null==b?void 0:b.enabled)&&o>=e.page.duration-b.delay&&d({opacity:0});const h=e.animations.find(e=>"loop"===e.type);if(null==h?void 0:h.enabled){const n=t({element:e,animation:h,dTime:o}),i=getDiff(e,n);c(i)}return s},animated(e){return this.a[e]}}}).actions(e=>({setAnimation(t,n){const i=e.animations.find(e=>e.type===t);i?Object.assign(i,n):e.animations.push(Object.assign({type:t},n))},setFilter(t,n){INDEPENDENT_FILTERS.includes(t)||e.filters.forEach((t,n)=>{INDEPENDENT_FILTERS.includes(n.toString())||e.filters.delete(n.toString())}),null==n?e.filters.delete(t):e.filters.set(t,{intensity:n})}}));