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

package/model/history.d.ts

@@ -1,7 +1,7 @@
 export declare const UndoManager: import("mobx-state-tree").IModelType<{
     history: import("mobx-state-tree").IArrayType<import("mobx-state-tree").IType<any, any, any>>;
-    undoIdx: import("mobx-state-tree").IType<number, number, number>;
-    targetPath: import("mobx-state-tree").IType<string, string, string>;
+    undoIdx: import("mobx-state-tree").IType<number | undefined, number, number>;
+    targetPath: import("mobx-state-tree").IType<string | undefined, string, string>;
 }, {
     readonly canUndo: boolean;
     readonly canRedo: boolean;

package/model/history.js

@@ -1 +1 @@
-import{types as t,resolvePath as e,onSnapshot as o,getSnapshot as a,applySnapshot as n}from"mobx-state-tree";import{deepEqual as r}from"../utils/deep-equal.js";Object.assign(t);export const UndoManager=t.model("UndoManager",{history:t.array(t.frozen()),undoIdx:-1,targetPath:""}).views(t=>({get canUndo(){return t.undoIdx>0},get canRedo(){return t.undoIdx<t.history.length-1}})).actions(t=>{let d,s,i=!1,c=null,h=0,u=0;const l=()=>u>0;function g(){const t=a(d);return{pages:t.pages,width:t.width,height:t.height,custom:t.custom,audios:t.audios}}function m(t){const e=d.pages.map(t=>t.id),o=t.pages.map(t=>t.id),a=!r(e,o),s=!r(d.custom,t.custom);a?n(d.pages,t.pages):d.pages.forEach((e,o)=>{n(e,t.pages[o])}),s&&d.set({custom:t.custom}),d.setSize(t.width,t.height)}return{startTransaction(){u++},endTransaction(t){u--,t||this.requestAddState(g())},async ignore(e,o=!1,a=!1){a&&await new Promise(t=>setTimeout(t,10)),h&&t.addUndoState();let n=l();t.startTransaction();let r=u;try{await e()}catch(i){setTimeout(()=>{throw i})}const d=r!==u,s=!d;t.endTransaction(s),o||n||t.replaceState(),d||(clearTimeout(h),h=0)},async transaction(e){await t.ignore(e,!0),this.addUndoState()},requestAddState(t){c=t,h||l()||(i?i=!1:h=setTimeout(()=>{h=0,clearTimeout(h),l()||this.addUndoState()},100))},addUndoState(){if(i){return void(i=!1)}const e=t.history[t.undoIdx];!r(c,e)&&(clearTimeout(h),h=0,t.history.splice(t.undoIdx+1),t.history.push(c),t.undoIdx=t.history.length-1)},afterCreate(){if(d=e(t,".."),!d){throw new Error("Failed to find target store for UndoManager. Please provide `targetPath` property, or a `targetStore` in the environment")}s=o(d,()=>{this.requestAddState(g())}),0===t.history.length&&this.requestAddState(g())},clear(){clearTimeout(h),h=0,t.history.splice(0,t.history.length),t.undoIdx=-1,t.addUndoState(g())},beforeDestroy(){s()},undo(){h&&this.addUndoState(),l()?m(t.history[t.undoIdx]):t.canUndo?(t.undoIdx--,i=!0,m(t.history[t.undoIdx])):console.warn("No undo history. Please check `store.history.canUndo` before calling undo action.")},redo(){h&&this.addUndoState(),t.canRedo?(t.undoIdx++,i=!0,m(t.history[t.undoIdx])):console.warn("No redo history. Please check `store.history.canRedo` before calling redo action.")},replaceState(){t.history[t.undoIdx]=g()}}});export default UndoManager;
+import{types as t,resolvePath as e,onSnapshot as o,getSnapshot as a,applySnapshot as n}from"mobx-state-tree";import{deepEqual as r}from"../utils/deep-equal.js";Object.assign(t);export const UndoManager=t.model("UndoManager",{history:t.array(t.frozen()),undoIdx:-1,targetPath:""}).views(t=>({get canUndo(){return t.undoIdx>0},get canRedo(){return t.undoIdx<t.history.length-1}})).actions(t=>{let d,s,i=!1,c=null,u=0,h=0;const l=()=>h>0;function g(){const t=a(d);return{pages:t.pages,width:t.width,height:t.height,custom:t.custom,audios:t.audios}}function m(t){const e=d.pages.map(t=>t.id),o=t.pages.map(t=>t.id),a=!r(e,o),s=!r(d.custom,t.custom);a?n(d.pages,t.pages):d.pages.forEach((e,o)=>{n(e,t.pages[o])}),s&&d.set({custom:t.custom}),d.setSize(t.width,t.height)}const p={startTransaction(){h++},endTransaction(t){h--,t||p.requestAddState(g())},async ignore(t,e=!1,o=!1){o&&await new Promise(t=>setTimeout(t,10)),u&&p.addUndoState();let a=l();p.startTransaction();let n=h;try{await t()}catch(s){setTimeout(()=>{throw s})}const r=n!==h,d=!r;p.endTransaction(d),e||a||p.replaceState(),r||(clearTimeout(u),u=0)},async transaction(t){await p.ignore(t,!0),p.addUndoState()},requestAddState(t){c=t,u||l()||(i?i=!1:u=setTimeout(()=>{u=0,clearTimeout(u),l()||p.addUndoState()},100))},addUndoState(){if(i){return void(i=!1)}const e=t.history[t.undoIdx];!r(c,e)&&(clearTimeout(u),u=0,t.history.splice(t.undoIdx+1),t.history.push(c),t.undoIdx=t.history.length-1)},afterCreate(){if(d=e(t,".."),!d){throw new Error("Failed to find target store for UndoManager. Please provide `targetPath` property, or a `targetStore` in the environment")}s=o(d,()=>{p.requestAddState(g())}),0===t.history.length&&p.requestAddState(g())},clear(){clearTimeout(u),u=0,t.history.splice(0,t.history.length),t.undoIdx=-1,p.addUndoState()},beforeDestroy(){s()},undo(){u&&p.addUndoState(),l()?m(t.history[t.undoIdx]):t.canUndo?(t.undoIdx--,i=!0,m(t.history[t.undoIdx])):console.warn("No undo history. Please check `store.history.canUndo` before calling undo action.")},redo(){u&&p.addUndoState(),t.canRedo?(t.undoIdx++,i=!0,m(t.history[t.undoIdx])):console.warn("No redo history. Please check `store.history.canRedo` before calling redo action.")},replaceState(){t.history[t.undoIdx]=g()}};return p});export default UndoManager;

package/model/image-model.d.ts

@@ -1,97 +1,122 @@
 import { Instance } from 'mobx-state-tree';
 export declare const ImageElement: 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>;
 } & {
-    type: import("mobx-state-tree").IType<string, string, string>;
-    width: import("mobx-state-tree").IType<number, number, number>;
-    height: import("mobx-state-tree").IType<number, number, number>;
-    src: import("mobx-state-tree").IType<string, string, string>;
-    cropX: import("mobx-state-tree").IType<number, number, number>;
-    cropY: import("mobx-state-tree").IType<number, number, number>;
-    cropWidth: import("mobx-state-tree").IType<number, number, number>;
-    cropHeight: import("mobx-state-tree").IType<number, number, number>;
-    cornerRadius: import("mobx-state-tree").IType<number, number, number>;
-    flipX: import("mobx-state-tree").IType<boolean, boolean, boolean>;
-    flipY: import("mobx-state-tree").IType<boolean, boolean, boolean>;
-    clipSrc: import("mobx-state-tree").IType<string, string, string>;
-    borderColor: import("mobx-state-tree").IType<string, string, string>;
-    borderSize: import("mobx-state-tree").IType<number, number, number>;
-    keepRatio: import("mobx-state-tree").IType<boolean, boolean, boolean>;
-    stretchEnabled: import("mobx-state-tree").IType<boolean, boolean, boolean>;
+    type: import("mobx-state-tree").IType<string | undefined, string, string>;
+    width: import("mobx-state-tree").IType<number | undefined, number, number>;
+    height: import("mobx-state-tree").IType<number | undefined, number, number>;
+    src: import("mobx-state-tree").IType<string | undefined, string, string>;
+    cropX: import("mobx-state-tree").IType<number | undefined, number, number>;
+    cropY: import("mobx-state-tree").IType<number | undefined, number, number>;
+    cropWidth: import("mobx-state-tree").IType<number | undefined, number, number>;
+    cropHeight: import("mobx-state-tree").IType<number | undefined, number, number>;
+    cornerRadius: import("mobx-state-tree").IType<number | undefined, number, number>;
+    flipX: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    flipY: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    clipSrc: import("mobx-state-tree").IType<string | undefined, string, string>;
+    borderColor: import("mobx-state-tree").IType<string | undefined, string, string>;
+    borderSize: import("mobx-state-tree").IType<number | undefined, number, number>;
+    keepRatio: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    stretchEnabled: 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;
@@ -102,14 +127,10 @@ export declare const ImageElement: 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;
@@ -119,16 +140,8 @@ export declare const ImageElement: 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;
@@ -140,14 +153,25 @@ export declare const ImageElement: import("mobx-state-tree").IModelType<{
     readonly _cropModeEnabled: boolean;
 }, 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 ImageElementType = Instance<typeof ImageElement>;

package/model/line-model.d.ts

@@ -1,88 +1,113 @@
 import { Instance } from 'mobx-state-tree';
 export declare const LineElement: 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>;
 } & {
-    type: import("mobx-state-tree").IType<string, string, string>;
-    width: import("mobx-state-tree").IType<number, number, number>;
-    height: import("mobx-state-tree").IType<number, number, number>;
-    color: import("mobx-state-tree").IType<string, string, string>;
+    type: import("mobx-state-tree").IType<string | undefined, string, string>;
+    width: import("mobx-state-tree").IType<number | undefined, number, number>;
+    height: import("mobx-state-tree").IType<number | undefined, number, number>;
+    color: import("mobx-state-tree").IType<string | undefined, string, string>;
     dash: import("mobx-state-tree").IArrayType<import("mobx-state-tree").ISimpleType<number>>;
-    startHead: import("mobx-state-tree").IType<string, string, string>;
-    endHead: import("mobx-state-tree").IType<string, string, string>;
+    startHead: import("mobx-state-tree").IType<string | undefined, string, string>;
+    endHead: import("mobx-state-tree").IType<string | undefined, string, string>;
 }, {
-    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;
@@ -93,14 +118,10 @@ export declare const LineElement: 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;
@@ -110,30 +131,33 @@ export declare const LineElement: 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 LineElementType = Instance<typeof LineElement>;