polotno 2.36.10 → 2.37.1

package/model/group-model.d.ts

@@ -7,7 +7,9 @@ import { LineElementType } from './line-model.js';
 import { SVGElementType } from './svg-model.js';
 import { FigureElementType } from './figure-model.js';
 import { GifElementType } from './gif-model.js';
+import { TableElementType } from './table-model.js';
 export declare const forEveryChild: (node: any, cb: any) => void;
+export declare const forEveryNode: (node: any, cb: any) => void;
 export declare const ElementTypes: any;
 type ElementUnion = (SVGElementType & {
     type: 'svg';
@@ -23,6 +25,8 @@ type ElementUnion = (SVGElementType & {
     type: 'figure';
 }) | (GifElementType & {
     type: 'gif';
+}) | (TableElementType & {
+    type: 'table';
 });
 type UnknownElementType = {
     type: string;
@@ -1235,6 +1239,354 @@ export declare const TYPES_MAP: {
         alwaysOnTop: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
         showInExport: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
     }>>;
+    table: import("mobx-state-tree").IModelType<{
+        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>;
+    } & {
+        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 | 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 | 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 | 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 | undefined, number, number>;
+        }, {}, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
+        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 | undefined, string, string>;
+        width: import("mobx-state-tree").IType<number | undefined, number, number>;
+        height: import("mobx-state-tree").IType<number | undefined, number, number>;
+        rows: import("mobx-state-tree").IType<number | undefined, number, number>;
+        cols: import("mobx-state-tree").IType<number | undefined, number, number>;
+        colWidths: import("mobx-state-tree").IArrayType<import("mobx-state-tree").ISimpleType<number>>;
+        rowHeights: import("mobx-state-tree").IArrayType<import("mobx-state-tree").ISimpleType<number>>;
+        cells: import("mobx-state-tree").IArrayType<import("mobx-state-tree").IModelType<{
+            id: import("mobx-state-tree").ISimpleType<string>;
+            type: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<"tablecell">, [undefined]>;
+            text: import("mobx-state-tree").IType<string | undefined, string, string>;
+            _fontSize: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<number>>;
+            _fontFamily: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
+            _fontWeight: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
+            _fontStyle: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
+            _textDecoration: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
+            _textTransform: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
+            _fill: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
+            _align: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
+            _verticalAlign: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
+            _lineHeight: import("mobx-state-tree").IMaybe<import("mobx-state-tree/dist/internal").IUnionType<[import("mobx-state-tree").ISimpleType<number>, import("mobx-state-tree").ISimpleType<string>]>>;
+            _letterSpacing: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<number>>;
+            _strokeWidth: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<number>>;
+            _stroke: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
+            _cellBackground: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
+            _cellPadding: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<number>>;
+            opacity: import("mobx-state-tree").IType<number | undefined, number, number>;
+            rowSpan: import("mobx-state-tree").IType<number | undefined, number, number>;
+            colSpan: import("mobx-state-tree").IType<number | undefined, number, number>;
+            mergedInto: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
+            borders: import("mobx-state-tree").IMaybe<import("mobx-state-tree").IModelType<{
+                top: import("mobx-state-tree").IMaybe<import("mobx-state-tree").IModelType<{
+                    color: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
+                    width: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<number>>;
+                    style: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<"none" | "solid" | "dashed" | "dotted">>;
+                }, {}, import("mobx-state-tree")._NotCustomized, any>>;
+                right: import("mobx-state-tree").IMaybe<import("mobx-state-tree").IModelType<{
+                    color: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
+                    width: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<number>>;
+                    style: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<"none" | "solid" | "dashed" | "dotted">>;
+                }, {}, import("mobx-state-tree")._NotCustomized, any>>;
+                bottom: import("mobx-state-tree").IMaybe<import("mobx-state-tree").IModelType<{
+                    color: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
+                    width: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<number>>;
+                    style: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<"none" | "solid" | "dashed" | "dotted">>;
+                }, {}, import("mobx-state-tree")._NotCustomized, any>>;
+                left: import("mobx-state-tree").IMaybe<import("mobx-state-tree").IModelType<{
+                    color: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
+                    width: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<number>>;
+                    style: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<"none" | "solid" | "dashed" | "dotted">>;
+                }, {}, import("mobx-state-tree")._NotCustomized, any>>;
+            }, {}, import("mobx-state-tree")._NotCustomized, any>>;
+            name: import("mobx-state-tree").IType<string | undefined, string, string>;
+            custom: import("mobx-state-tree").IType<any, any, any>;
+        }, {
+            _editModeEnabled: boolean;
+            filters: import("mobx").ObservableMap<string, number>;
+        } & {
+            readonly row: number;
+            readonly col: number;
+            readonly store: any;
+            readonly page: any;
+            readonly fontSize: number;
+            readonly fontFamily: string;
+            readonly fontWeight: string;
+            readonly fontStyle: string;
+            readonly textDecoration: string;
+            readonly textTransform: string;
+            readonly fill: string;
+            readonly align: string;
+            readonly verticalAlign: string;
+            readonly lineHeight: number | string;
+            readonly letterSpacing: number;
+            readonly strokeWidth: number;
+            readonly stroke: string;
+            readonly cellBackground: string;
+            readonly cellPadding: number;
+            readonly width: number;
+            readonly height: number;
+            readonly a: {
+                x: number;
+                y: number;
+                width: number;
+                height: number;
+                rotation: number;
+                opacity: number;
+                fontSize: number;
+            };
+            getEffectiveBorder(side: import("./table-model.js").BorderSideName): {
+                color: string;
+                width: number;
+                style: string;
+            };
+            readonly x: number;
+            readonly y: number;
+            readonly rotation: number;
+            readonly draggable: boolean;
+            readonly resizable: boolean;
+            readonly selectable: boolean;
+            readonly removable: boolean;
+            readonly contentEditable: boolean;
+            readonly visible: boolean;
+            readonly showInExport: boolean;
+            readonly alwaysOnTop: boolean;
+            readonly placeholder: string;
+            readonly backgroundEnabled: boolean;
+            readonly backgroundOpacity: number;
+            readonly backgroundColor: string;
+            readonly backgroundCornerRadius: number;
+            readonly backgroundPadding: number;
+            readonly curveEnabled: boolean;
+            readonly curvePower: number;
+            readonly shadowEnabled: boolean;
+            readonly shadowBlur: number;
+            readonly shadowOffsetX: number;
+            readonly shadowOffsetY: number;
+            readonly shadowColor: string;
+            readonly shadowOpacity: number;
+            readonly blurEnabled: boolean;
+            readonly blurRadius: number;
+            readonly brightnessEnabled: boolean;
+            readonly brightness: number;
+            readonly sepiaEnabled: boolean;
+            readonly grayscaleEnabled: boolean;
+            readonly animations: readonly never[];
+        } & {
+            toJSON(): any;
+            set(attrs: any): void;
+            setBorder(side: import("./table-model.js").BorderSideName, attrs: import("./table-model.js").BorderAttrs): void;
+            toggleEditMode(editing?: boolean): void;
+        }, any, any>>;
+        borderColor: import("mobx-state-tree").IType<string | undefined, string, string>;
+        borderWidth: import("mobx-state-tree").IType<number | undefined, number, number>;
+        borderStyle: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
+        fontSize: import("mobx-state-tree").IType<number | undefined, number, number>;
+        fontFamily: import("mobx-state-tree").IType<string | undefined, string, string>;
+        fontWeight: import("mobx-state-tree").IType<string | undefined, string, string>;
+        fontStyle: import("mobx-state-tree").IType<string | undefined, string, string>;
+        textDecoration: import("mobx-state-tree").IType<string | undefined, string, string>;
+        textTransform: import("mobx-state-tree").IType<string | undefined, string, string>;
+        fill: import("mobx-state-tree").IType<string | undefined, string, string>;
+        align: import("mobx-state-tree").IType<string | undefined, string, string>;
+        verticalAlign: import("mobx-state-tree").IType<string | undefined, string, string>;
+        lineHeight: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree/dist/internal").IUnionType<[import("mobx-state-tree").ISimpleType<number>, import("mobx-state-tree").ISimpleType<string>]>, [undefined]>;
+        letterSpacing: import("mobx-state-tree").IType<number | undefined, number, number>;
+        strokeWidth: import("mobx-state-tree").IType<number | undefined, number, number>;
+        stroke: import("mobx-state-tree").IType<string | undefined, string, string>;
+        cellBackground: import("mobx-state-tree").IType<string | undefined, string, string>;
+        cellPadding: import("mobx-state-tree").IType<number | undefined, number, number>;
+    }, {
+        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 | 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>;
+        }> & import("mobx-state-tree").IStateTreeNode<import("mobx-state-tree").IModelType<{
+            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>;
+        }, {}, 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;
+            opacity: number;
+            custom: any;
+            visible: boolean;
+            selectable: boolean;
+            removable: boolean;
+            alwaysOnTop: boolean;
+            showInExport: boolean;
+        };
+    } & {
+        clone(attrs?: any, { skipSelect }?: {
+            skipSelect?: boolean | undefined;
+        }): NodeType;
+        set(attrs: any): void;
+        moveUp(): void;
+        moveTop(): void;
+        moveDown(): void;
+        moveBottom(): void;
+        setZIndex(zIndex: number): void;
+        beforeDestroy(): void;
+    } & {
+        readonly locked: boolean;
+        readonly a: import("./shape-model.js").AnimatedAttrs;
+        animated(attr: any): any;
+    } & {
+        setAnimation(type: any, attrs: any): void;
+        setFilter(type: any, value: any): void;
+    } & {
+        _focusedCellIds: string[];
+        _editingCellId: string | undefined;
+        _anchorCellId: string | undefined;
+        _cellContentHeights: import("mobx").ObservableMap<string, number>;
+        _baseRowHeights: number[] | null;
+        _baseHeight: number | null;
+        _isResizingRows: boolean;
+        _isTransforming: boolean;
+    } & {
+        afterCreate(): void;
+    } & {
+        readonly _cellMap: Map<string, import("./table-model.js").TableCellType>;
+        getActualRowHeight(rowIndex: number): number;
+    } & {
+        getCell(row: number, col: number): import("./table-model.js").TableCellType | undefined;
+        readonly minWidth: number;
+        readonly minHeight: number;
+        readonly actualHeight: number;
+        getCellRect(row: number, col: number, rowSpan?: number, colSpan?: number): {
+            x: number;
+            y: number;
+            width: number;
+            height: number;
+        };
+        readonly visibleCells: import("./table-model.js").TableCellType[];
+        readonly focusedCells: import("./table-model.js").TableCellType[];
+        readonly editingCell: import("./table-model.js").TableCellType | undefined;
+        readonly _fitRowsToContent: {
+            rowHeights: number[];
+            height: number;
+        } | null;
+    } & {
+        setCellContentHeight(cellId: string, height: number): void;
+        _applyFitRowsToContent(): void;
+        focusCell(cellId: string, addToSelection?: boolean): void;
+        focusCellRange(targetRow: number, targetCol: number): void;
+        clearCellFocus(): void;
+        enterCellEdit(cellId: string): void;
+        exitCellEdit(): void;
+        _resetBaseRowHeights(): void;
+        _setIsResizingRows(value: boolean): void;
+        _setIsTransforming(value: boolean): void;
+        addRow(index: number): void;
+        removeRow(index: number): void;
+        addColumn(index: number): void;
+        removeColumn(index: number): void;
+        distributeRowsEvenly(): void;
+        distributeColumnsEvenly(): void;
+        resizeColumn(index: number, delta: number): void;
+        resizeRow(index: number, delta: number): void;
+        setCellBorders(cellIds: string[], sides: import("./table-model.js").BorderSideName[], attrs: import("./table-model.js").BorderAttrs): void;
+    } & {
+        clone(attrs?: any, { skipSelect }?: {
+            skipSelect?: boolean | undefined;
+        }): any;
+    }, 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;
+    }>, any>;
 };
 export declare function registerShapeModel(defaultAttributes: any, extendFunc?: any): void;
 export type GroupElementType = Instance<typeof GroupElement>;

package/model/group-model.js

@@ -1 +1 @@
-var e=this&&this.__rest||function(e,t){var r={};for(var o in e){Object.prototype.hasOwnProperty.call(e,o)&&t.indexOf(o)<0&&(r[o]=e[o])}if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(o=Object.getOwnPropertySymbols(e);i<o.length;i++){t.indexOf(o[i])<0&&Object.prototype.propertyIsEnumerable.call(e,o[i])&&(r[o[i]]=e[o[i]])}}return r};import{detach as t,types as r}from"mobx-state-tree";import{nanoid as o}from"nanoid";import{Node as i}from"./node-model.js";import{Shape as l}from"./shape-model.js";import{TextElement as n}from"./text-model.js";import{ImageElement as s}from"./image-model.js";import{VideoElement as d}from"./video-model.js";import{LineElement as a}from"./line-model.js";import{SVGElement as m}from"./svg-model.js";import{FigureElement as p}from"./figure-model.js";import{GifElement as c}from"./gif-model.js";export const forEveryChild=(e,t)=>{if(e.children){for(const r of e.children){if(!0===t(r)){break}forEveryChild(r,t)}}};const f=[...new Array(20)].map((e,t)=>r.late(()=>y[t]));export const ElementTypes=r.union({dispatcher:e=>{const t=TYPES_MAP[e.type];if(!t){throw new Error(`Unknown element type: "${e.type}"`)}return t}},m,n,s,a,d,p,c,r.late(()=>GroupElement),...f);export const GroupElement=i.named("Group").props({type:"group",children:r.array(ElementTypes)}).views(e=>({get draggable(){let t=!0;return forEveryChild(e,e=>{e.draggable||(t=!1)}),t},get resizable(){let t=!0;return forEveryChild(e,e=>{e.resizable||(t=!1)}),t},get contentEditable(){let t=!0;return forEveryChild(e,e=>{e.contentEditable||(t=!1)}),t},get styleEditable(){let t=!0;return forEveryChild(e,e=>{e.styleEditable||(t=!1)}),t},get locked(){let t=!0;return forEveryChild(e,e=>{e.locked||(t=!1)}),t}})).actions(r=>({set(t){var{draggable:o,contentEditable:i,styleEditable:l,resizable:n}=t,s=e(t,["draggable","contentEditable","styleEditable","resizable"]);void 0!==o&&forEveryChild(r,e=>{e.set({draggable:o})}),void 0!==i&&forEveryChild(r,e=>{e.set({contentEditable:i})}),void 0!==l&&forEveryChild(r,e=>{e.set({styleEditable:l})}),void 0!==n&&forEveryChild(r,e=>{e.set({resizable:n})}),Object.assign(r,s)},addElement(e,{skipSelect:t=!1}={}){const i=TYPES_MAP[e.type];if(!i){return void console.error("Can not find model with type "+e.type)}e.children&&e.children.forEach(e=>{e.id=e.id||o(10)});const l=i.create(Object.assign({id:o(10)},e));return r.children.push(l),l.selectable&&!t&&r.store.selectElements([l.id]),l},setElementZIndex(e,o){const i=r.children.find(t=>t.id===e);i&&(t(i),r.children.remove(i),r.children.splice(o,0,i))},setAnimation(e,t){forEveryChild(r,r=>{r.setAnimation(e,t)})}}));const y=[];export const TYPES_MAP={svg:m,text:n,image:s,group:GroupElement,line:a,video:d,figure:p,gif:c};export function registerShapeModel(e,t){const r=e.type;if(!r){throw new Error('You must pass "type" attribute to custom model.')}let o=l.named(r).props(e);t&&(o=t(o)),TYPES_MAP[r]=o,y.push(o)}
+var e=this&&this.__rest||function(e,t){var r={};for(var o in e){Object.prototype.hasOwnProperty.call(e,o)&&t.indexOf(o)<0&&(r[o]=e[o])}if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(o=Object.getOwnPropertySymbols(e);i<o.length;i++){t.indexOf(o[i])<0&&Object.prototype.propertyIsEnumerable.call(e,o[i])&&(r[o[i]]=e[o[i]])}}return r};import{detach as t,types as r}from"mobx-state-tree";import{nanoid as o}from"nanoid";import{Node as i}from"./node-model.js";import{Shape as l}from"./shape-model.js";import{TextElement as n}from"./text-model.js";import{ImageElement as s}from"./image-model.js";import{VideoElement as d}from"./video-model.js";import{LineElement as a}from"./line-model.js";import{SVGElement as m}from"./svg-model.js";import{FigureElement as p}from"./figure-model.js";import{GifElement as f}from"./gif-model.js";import{TableElement as c}from"./table-model.js";export const forEveryChild=(e,t)=>{if(e.children){for(const r of e.children){if(!0===t(r)){break}forEveryChild(r,t)}}};export const forEveryNode=(e,t)=>{if(e.children){for(const r of e.children){if(!0===t(r)){break}forEveryNode(r,t)}}if(e.cells){for(const r of e.cells){if(!0===t(r)){break}}}};const y=[...new Array(20)].map((e,t)=>r.late(()=>E[t]));export const ElementTypes=r.union({dispatcher:e=>{const t=TYPES_MAP[e.type];if(!t){throw new Error(`Unknown element type: "${e.type}"`)}return t}},m,n,s,a,d,p,f,c,r.late(()=>GroupElement),...y);export const GroupElement=i.named("Group").props({type:"group",children:r.array(ElementTypes)}).views(e=>({get draggable(){let t=!0;return forEveryChild(e,e=>{e.draggable||(t=!1)}),t},get resizable(){let t=!0;return forEveryChild(e,e=>{e.resizable||(t=!1)}),t},get contentEditable(){let t=!0;return forEveryChild(e,e=>{e.contentEditable||(t=!1)}),t},get styleEditable(){let t=!0;return forEveryChild(e,e=>{e.styleEditable||(t=!1)}),t},get locked(){let t=!0;return forEveryChild(e,e=>{e.locked||(t=!1)}),t}})).actions(r=>({set(t){var{draggable:o,contentEditable:i,styleEditable:l,resizable:n}=t,s=e(t,["draggable","contentEditable","styleEditable","resizable"]);void 0!==o&&forEveryChild(r,e=>{e.set({draggable:o})}),void 0!==i&&forEveryChild(r,e=>{e.set({contentEditable:i})}),void 0!==l&&forEveryChild(r,e=>{e.set({styleEditable:l})}),void 0!==n&&forEveryChild(r,e=>{e.set({resizable:n})}),Object.assign(r,s)},addElement(e,{skipSelect:t=!1}={}){const i=TYPES_MAP[e.type];if(!i){return void console.error("Can not find model with type "+e.type)}e.children&&e.children.forEach(e=>{e.id=e.id||o(10)});const l=i.create(Object.assign({id:o(10)},e));return r.children.push(l),l.selectable&&!t&&r.store.selectElements([l.id]),l},setElementZIndex(e,o){const i=r.children.find(t=>t.id===e);i&&(t(i),r.children.remove(i),r.children.splice(o,0,i))},setAnimation(e,t){forEveryChild(r,r=>{r.setAnimation(e,t)})}}));const E=[];export const TYPES_MAP={svg:m,text:n,image:s,group:GroupElement,line:a,video:d,figure:p,gif:f,table:c};export function registerShapeModel(e,t){const r=e.type;if(!r){throw new Error('You must pass "type" attribute to custom model.')}let o=l.named(r).props(e);t&&(o=t(o)),TYPES_MAP[r]=o,E.push(o)}

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 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(){}}));
+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 m,forEveryNode as p}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,m)){return o}o=t(o,m)}},get parent(){if(n(e,m)){const o=t(e,m);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()));t.id=t.id||r(10);const s=new Map;return p(n,e=>{const t=e.id,o=r(10);s.set(t,o),e.id=o}),p(n,e=>{e.mergedInto&&s.has(e.mergedInto)&&(e.mergedInto=s.get(e.mergedInto))}),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.js

@@ -1 +1 @@
-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})}}));
+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,forEveryNode as s,TYPES_MAP as c}from"./group-model.js";import{Store as a}from"./store.js";import{getTotalClientRect as l}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,a)}})).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(),o=new Map;n.children.forEach(e=>{const t=e.id,n=i(10);o.set(t,n),e.id=n,s(e,e=>{const t=e.id,n=i(10);o.set(t,n),e.id=n})}),n.children.forEach(e=>{e.cells&&e.cells.forEach(e=>{e.mergedInto&&o.has(e.mergedInto)&&(e.mergedInto=o.get(e.mergedInto))})});const r=Object.assign(Object.assign(Object.assign({},n),{id:i(10)}),e),d=t.store.addPage(r),c=t.store.pages.indexOf(t);return d.setZIndex(c+1),d.select(),d},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=c[e.type];if(!o){return void console.error("Can not find model with type "+e.type)}"children"in e&&Array.isArray(e.children)&&s(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),d=o.create(Object.assign({id:i(10),name:`${e.type}-${r+1}`},e));return t.children.push(d),d.selectable&&!n&&t.store.selectElements([d.id]),d},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?l(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)),a=t.computedWidth*s,h=Math.max(0,c-a),m=Math.max(0,Math.min(r.y,t.computedHeight-r.y-r.height)),p=t.computedHeight*s,g=Math.max(0,m-p),u=t.computedWidth-2*h,f=t.computedHeight-2*g,E=e/u,x=n/f,v=Math.min(E,x),w=(e-u*v)/2-h*v,y=(n-f*v)/2-g*v;d(t,e=>{var t;if("group"!==e.type){if(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})}else if(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})}else if("figure"===e.type){e.set({strokeWidth:e.strokeWidth*v})}else if("table"===e.type){e.set({borderWidth:e.borderWidth*v});for(const n of e.cells){const e={fontSize:n.fontSize*v,cellPadding:n.cellPadding*v};if(n.borders){const o=JSON.parse(JSON.stringify(n.borders));for(const e of["top","right","bottom","left"]){null!=(null===(t=o[e])||void 0===t?void 0:t.width)&&(o[e]=Object.assign(Object.assign({},o[e]),{width:o[e].width*v}))}e.borders=o}n.set(e)}}}})}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/schema.d.ts

@@ -2,17 +2,22 @@ export interface Store {
     schemaVersion: number;
     width: number;
     height: number;
-    unit: 'px' | 'pt' | 'mm' | 'in';
+    unit: 'px' | 'pt' | 'mm' | 'cm' | 'in';
     dpi: number;
     custom?: unknown;
     fonts: Font[];
     pages: Page[];
     audios: Audio[];
 }
+export interface FontStyleVariant {
+    src: string;
+    fontStyle?: string;
+    fontWeight?: string;
+}
 export interface Font {
     fontFamily: string;
     url?: string;
-    styles?: unknown;
+    styles?: FontStyleVariant[];
 }
 export interface Audio {
     id: string;
@@ -33,7 +38,7 @@ export interface Page {
     duration: number;
     children: Element[];
 }
-export type Element = TextElement | ImageElement | SVGElement | LineElement | VideoElement | FigureElement | GifElement | GroupElement;
+export type Element = TextElement | ImageElement | SVGElement | LineElement | VideoElement | FigureElement | GifElement | GroupElement | TableElement;
 export interface Animation {
     delay: number;
     duration: number;
@@ -180,4 +185,68 @@ export interface VideoElement extends ShapeAttributes, BaseImageProps {
     endTime: number;
     volume: number;
 }
+export interface BorderSide {
+    color?: string;
+    width?: number;
+    style?: 'solid' | 'dashed' | 'dotted' | 'none';
+}
+export interface CellBorders {
+    top?: BorderSide;
+    right?: BorderSide;
+    bottom?: BorderSide;
+    left?: BorderSide;
+}
+export interface TableCell {
+    id: string;
+    type: 'tablecell';
+    text?: string;
+    opacity?: number;
+    rowSpan?: number;
+    colSpan?: number;
+    mergedInto?: string;
+    name?: string;
+    custom?: unknown;
+    borders?: CellBorders;
+    fontSize?: number;
+    fontFamily?: string;
+    fontWeight?: string;
+    fontStyle?: string;
+    textDecoration?: string;
+    textTransform?: string;
+    fill?: string;
+    align?: string;
+    verticalAlign?: string;
+    lineHeight?: number | string;
+    letterSpacing?: number;
+    strokeWidth?: number;
+    stroke?: string;
+    cellBackground?: string;
+    cellPadding?: number;
+}
+export interface TableElement extends Omit<ShapeAttributes, 'blurEnabled' | 'blurRadius' | 'brightnessEnabled' | 'brightness' | 'sepiaEnabled' | 'grayscaleEnabled' | 'filters' | 'shadowEnabled' | 'shadowBlur' | 'shadowOffsetX' | 'shadowOffsetY' | 'shadowColor' | 'shadowOpacity'> {
+    type: 'table';
+    rows: number;
+    cols: number;
+    colWidths: number[];
+    rowHeights: number[];
+    cells: TableCell[];
+    borderColor: string;
+    borderWidth: number;
+    borderStyle: 'solid' | 'dashed' | 'dotted' | 'none';
+    fontSize: number;
+    fontFamily: string;
+    fontWeight: string;
+    fontStyle: string;
+    textDecoration: string;
+    textTransform: string;
+    fill: string;
+    align: string;
+    verticalAlign: string;
+    lineHeight: number | string;
+    letterSpacing: number;
+    strokeWidth: number;
+    stroke: string;
+    cellBackground: string;
+    cellPadding: number;
+}
 export {};

package/model/store.js

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