polotno 2.40.1 → 2.41.0

package/model/store.d.ts

@@ -30,6 +30,7 @@ export interface ImageExportOptions extends ExportOptions {
 }
 export interface GifExportOptions extends ExportOptions {
     fps?: number;
+    pageIds?: Array<string>;
 }
 export interface PDFExportOptions extends ExportOptions {
     dpi?: number;
@@ -43,6 +44,10 @@ export interface LoadJSONOptions {
     keepHistory?: boolean;
     modernizeTextBackground?: boolean;
 }
+export declare const ROLES: {
+    readonly ADMIN: "admin";
+    readonly VIEWER: "viewer";
+};
 export declare const Store: import("mobx-state-tree").IModelType<{
     role: import("mobx-state-tree").IType<string | undefined, string, string>;
     pages: import("mobx-state-tree").IArrayType<import("mobx-state-tree").IModelType<{
@@ -67,9 +72,22 @@ export declare const Store: import("mobx-state-tree").IModelType<{
         readonly computedHeight: any;
     } & {
         toJSON(): any;
-        _forEachElementUp(ids: Array<string>, callback: Function): void;
-        _forEachElementDown(ids: Array<string>, callback: Function): false;
     } & {
+        setSize({ width, height, useMagic, softChange, }: {
+            width: number;
+            height: number;
+            useMagic?: boolean;
+            softChange?: boolean;
+        }): void;
+        canMoveElementsUp(ids: Array<string>): boolean;
+        canMoveElementsTop(ids: Array<string>): boolean;
+        canMoveElementsDown(ids: Array<string>): boolean;
+        canMoveElementsBottom(ids: Array<string>): boolean;
+        moveElementsUp(ids: Array<string>): void;
+        moveElementsDown(ids: Array<string>): void;
+        moveElementsTop(ids: Array<string>): void;
+        moveElementsBottom(ids: Array<string>): void;
+        setElementZIndex(id: string, zIndex: number): void;
         clone(attrs?: {}): any;
         setZIndex(zIndex: any): void;
         set(attrs: any): void;
@@ -83,21 +101,6 @@ export declare const Store: import("mobx-state-tree").IModelType<{
         }): T extends ElementType["type"] ? Extract<ElementType, {
             type: T;
         }> : NodeType;
-        canMoveElementsUp(ids: Array<string>): boolean;
-        moveElementsUp(ids: Array<string>): void;
-        canMoveElementsTop(ids: Array<string>): boolean;
-        moveElementsTop(ids: Array<string>): void;
-        canMoveElementsDown(ids: Array<string>): boolean;
-        moveElementsDown(ids: Array<string>): void;
-        canMoveElementsBottom(ids: Array<string>): boolean;
-        moveElementsBottom(ids: Array<string>): void;
-        setElementZIndex(id: any, zIndex: any): void;
-        setSize({ width, height, useMagic, softChange, }: {
-            width: number;
-            height: number;
-            useMagic?: boolean;
-            softChange?: boolean;
-        }): void;
     } & {
         moveElementUp(id: any): void;
         moveElementDown(id: any): void;
@@ -211,9 +214,22 @@ export declare const Store: import("mobx-state-tree").IModelType<{
         readonly computedHeight: any;
     } & {
         toJSON(): any;
-        _forEachElementUp(ids: Array<string>, callback: Function): void;
-        _forEachElementDown(ids: Array<string>, callback: Function): false;
     } & {
+        setSize({ width, height, useMagic, softChange, }: {
+            width: number;
+            height: number;
+            useMagic?: boolean;
+            softChange?: boolean;
+        }): void;
+        canMoveElementsUp(ids: Array<string>): boolean;
+        canMoveElementsTop(ids: Array<string>): boolean;
+        canMoveElementsDown(ids: Array<string>): boolean;
+        canMoveElementsBottom(ids: Array<string>): boolean;
+        moveElementsUp(ids: Array<string>): void;
+        moveElementsDown(ids: Array<string>): void;
+        moveElementsTop(ids: Array<string>): void;
+        moveElementsBottom(ids: Array<string>): void;
+        setElementZIndex(id: string, zIndex: number): void;
         clone(attrs?: {}): any;
         setZIndex(zIndex: any): void;
         set(attrs: any): void;
@@ -227,21 +243,6 @@ export declare const Store: import("mobx-state-tree").IModelType<{
         }): T extends ElementType["type"] ? Extract<ElementType, {
             type: T;
         }> : NodeType;
-        canMoveElementsUp(ids: Array<string>): boolean;
-        moveElementsUp(ids: Array<string>): void;
-        canMoveElementsTop(ids: Array<string>): boolean;
-        moveElementsTop(ids: Array<string>): void;
-        canMoveElementsDown(ids: Array<string>): boolean;
-        moveElementsDown(ids: Array<string>): void;
-        canMoveElementsBottom(ids: Array<string>): boolean;
-        moveElementsBottom(ids: Array<string>): void;
-        setElementZIndex(id: any, zIndex: any): void;
-        setSize({ width, height, useMagic, softChange, }: {
-            width: number;
-            height: number;
-            useMagic?: boolean;
-            softChange?: boolean;
-        }): void;
     } & {
         moveElementUp(id: any): void;
         moveElementDown(id: any): void;
@@ -270,9 +271,22 @@ export declare const Store: import("mobx-state-tree").IModelType<{
         readonly computedHeight: any;
     } & {
         toJSON(): any;
-        _forEachElementUp(ids: Array<string>, callback: Function): void;
-        _forEachElementDown(ids: Array<string>, callback: Function): false;
     } & {
+        setSize({ width, height, useMagic, softChange, }: {
+            width: number;
+            height: number;
+            useMagic?: boolean;
+            softChange?: boolean;
+        }): void;
+        canMoveElementsUp(ids: Array<string>): boolean;
+        canMoveElementsTop(ids: Array<string>): boolean;
+        canMoveElementsDown(ids: Array<string>): boolean;
+        canMoveElementsBottom(ids: Array<string>): boolean;
+        moveElementsUp(ids: Array<string>): void;
+        moveElementsDown(ids: Array<string>): void;
+        moveElementsTop(ids: Array<string>): void;
+        moveElementsBottom(ids: Array<string>): void;
+        setElementZIndex(id: string, zIndex: number): void;
         clone(attrs?: {}): any;
         setZIndex(zIndex: any): void;
         set(attrs: any): void;
@@ -286,21 +300,6 @@ export declare const Store: import("mobx-state-tree").IModelType<{
         }): T extends ElementType["type"] ? Extract<ElementType, {
             type: T;
         }> : NodeType;
-        canMoveElementsUp(ids: Array<string>): boolean;
-        moveElementsUp(ids: Array<string>): void;
-        canMoveElementsTop(ids: Array<string>): boolean;
-        moveElementsTop(ids: Array<string>): void;
-        canMoveElementsDown(ids: Array<string>): boolean;
-        moveElementsDown(ids: Array<string>): void;
-        canMoveElementsBottom(ids: Array<string>): boolean;
-        moveElementsBottom(ids: Array<string>): void;
-        setElementZIndex(id: any, zIndex: any): void;
-        setSize({ width, height, useMagic, softChange, }: {
-            width: number;
-            height: number;
-            useMagic?: boolean;
-            softChange?: boolean;
-        }): void;
     } & {
         moveElementUp(id: any): void;
         moveElementDown(id: any): void;
@@ -617,9 +616,22 @@ export declare const Store: import("mobx-state-tree").IModelType<{
         readonly computedHeight: any;
     } & {
         toJSON(): any;
-        _forEachElementUp(ids: Array<string>, callback: Function): void;
-        _forEachElementDown(ids: Array<string>, callback: Function): false;
     } & {
+        setSize({ width, height, useMagic, softChange, }: {
+            width: number;
+            height: number;
+            useMagic?: boolean;
+            softChange?: boolean;
+        }): void;
+        canMoveElementsUp(ids: Array<string>): boolean;
+        canMoveElementsTop(ids: Array<string>): boolean;
+        canMoveElementsDown(ids: Array<string>): boolean;
+        canMoveElementsBottom(ids: Array<string>): boolean;
+        moveElementsUp(ids: Array<string>): void;
+        moveElementsDown(ids: Array<string>): void;
+        moveElementsTop(ids: Array<string>): void;
+        moveElementsBottom(ids: Array<string>): void;
+        setElementZIndex(id: string, zIndex: number): void;
         clone(attrs?: {}): any;
         setZIndex(zIndex: any): void;
         set(attrs: any): void;
@@ -633,21 +645,6 @@ export declare const Store: import("mobx-state-tree").IModelType<{
         }): T extends ElementType["type"] ? Extract<ElementType, {
             type: T;
         }> : NodeType;
-        canMoveElementsUp(ids: Array<string>): boolean;
-        moveElementsUp(ids: Array<string>): void;
-        canMoveElementsTop(ids: Array<string>): boolean;
-        moveElementsTop(ids: Array<string>): void;
-        canMoveElementsDown(ids: Array<string>): boolean;
-        moveElementsDown(ids: Array<string>): void;
-        canMoveElementsBottom(ids: Array<string>): boolean;
-        moveElementsBottom(ids: Array<string>): void;
-        setElementZIndex(id: any, zIndex: any): void;
-        setSize({ width, height, useMagic, softChange, }: {
-            width: number;
-            height: number;
-            useMagic?: boolean;
-            softChange?: boolean;
-        }): void;
     } & {
         moveElementUp(id: any): void;
         moveElementDown(id: any): void;
@@ -676,9 +673,22 @@ export declare const Store: import("mobx-state-tree").IModelType<{
         readonly computedHeight: any;
     } & {
         toJSON(): any;
-        _forEachElementUp(ids: Array<string>, callback: Function): void;
-        _forEachElementDown(ids: Array<string>, callback: Function): false;
     } & {
+        setSize({ width, height, useMagic, softChange, }: {
+            width: number;
+            height: number;
+            useMagic?: boolean;
+            softChange?: boolean;
+        }): void;
+        canMoveElementsUp(ids: Array<string>): boolean;
+        canMoveElementsTop(ids: Array<string>): boolean;
+        canMoveElementsDown(ids: Array<string>): boolean;
+        canMoveElementsBottom(ids: Array<string>): boolean;
+        moveElementsUp(ids: Array<string>): void;
+        moveElementsDown(ids: Array<string>): void;
+        moveElementsTop(ids: Array<string>): void;
+        moveElementsBottom(ids: Array<string>): void;
+        setElementZIndex(id: string, zIndex: number): void;
         clone(attrs?: {}): any;
         setZIndex(zIndex: any): void;
         set(attrs: any): void;
@@ -692,21 +702,6 @@ export declare const Store: import("mobx-state-tree").IModelType<{
         }): T extends ElementType["type"] ? Extract<ElementType, {
             type: T;
         }> : NodeType;
-        canMoveElementsUp(ids: Array<string>): boolean;
-        moveElementsUp(ids: Array<string>): void;
-        canMoveElementsTop(ids: Array<string>): boolean;
-        moveElementsTop(ids: Array<string>): void;
-        canMoveElementsDown(ids: Array<string>): boolean;
-        moveElementsDown(ids: Array<string>): void;
-        canMoveElementsBottom(ids: Array<string>): boolean;
-        moveElementsBottom(ids: Array<string>): void;
-        setElementZIndex(id: any, zIndex: any): void;
-        setSize({ width, height, useMagic, softChange, }: {
-            width: number;
-            height: number;
-            useMagic?: boolean;
-            softChange?: boolean;
-        }): void;
     } & {
         moveElementUp(id: any): void;
         moveElementDown(id: any): void;
@@ -736,9 +731,22 @@ export declare const Store: import("mobx-state-tree").IModelType<{
         readonly computedHeight: any;
     } & {
         toJSON(): any;
-        _forEachElementUp(ids: Array<string>, callback: Function): void;
-        _forEachElementDown(ids: Array<string>, callback: Function): false;
     } & {
+        setSize({ width, height, useMagic, softChange, }: {
+            width: number;
+            height: number;
+            useMagic?: boolean;
+            softChange?: boolean;
+        }): void;
+        canMoveElementsUp(ids: Array<string>): boolean;
+        canMoveElementsTop(ids: Array<string>): boolean;
+        canMoveElementsDown(ids: Array<string>): boolean;
+        canMoveElementsBottom(ids: Array<string>): boolean;
+        moveElementsUp(ids: Array<string>): void;
+        moveElementsDown(ids: Array<string>): void;
+        moveElementsTop(ids: Array<string>): void;
+        moveElementsBottom(ids: Array<string>): void;
+        setElementZIndex(id: string, zIndex: number): void;
         clone(attrs?: {}): any;
         setZIndex(zIndex: any): void;
         set(attrs: any): void;
@@ -752,21 +760,6 @@ export declare const Store: import("mobx-state-tree").IModelType<{
         }): T extends ElementType["type"] ? Extract<ElementType, {
             type: T;
         }> : NodeType;
-        canMoveElementsUp(ids: Array<string>): boolean;
-        moveElementsUp(ids: Array<string>): void;
-        canMoveElementsTop(ids: Array<string>): boolean;
-        moveElementsTop(ids: Array<string>): void;
-        canMoveElementsDown(ids: Array<string>): boolean;
-        moveElementsDown(ids: Array<string>): void;
-        canMoveElementsBottom(ids: Array<string>): boolean;
-        moveElementsBottom(ids: Array<string>): void;
-        setElementZIndex(id: any, zIndex: any): void;
-        setSize({ width, height, useMagic, softChange, }: {
-            width: number;
-            height: number;
-            useMagic?: boolean;
-            softChange?: boolean;
-        }): void;
     } & {
         moveElementUp(id: any): void;
         moveElementDown(id: any): void;
@@ -795,9 +788,22 @@ export declare const Store: import("mobx-state-tree").IModelType<{
         readonly computedHeight: any;
     } & {
         toJSON(): any;
-        _forEachElementUp(ids: Array<string>, callback: Function): void;
-        _forEachElementDown(ids: Array<string>, callback: Function): false;
     } & {
+        setSize({ width, height, useMagic, softChange, }: {
+            width: number;
+            height: number;
+            useMagic?: boolean;
+            softChange?: boolean;
+        }): void;
+        canMoveElementsUp(ids: Array<string>): boolean;
+        canMoveElementsTop(ids: Array<string>): boolean;
+        canMoveElementsDown(ids: Array<string>): boolean;
+        canMoveElementsBottom(ids: Array<string>): boolean;
+        moveElementsUp(ids: Array<string>): void;
+        moveElementsDown(ids: Array<string>): void;
+        moveElementsTop(ids: Array<string>): void;
+        moveElementsBottom(ids: Array<string>): void;
+        setElementZIndex(id: string, zIndex: number): void;
         clone(attrs?: {}): any;
         setZIndex(zIndex: any): void;
         set(attrs: any): void;
@@ -811,21 +817,6 @@ export declare const Store: import("mobx-state-tree").IModelType<{
         }): T extends ElementType["type"] ? Extract<ElementType, {
             type: T;
         }> : NodeType;
-        canMoveElementsUp(ids: Array<string>): boolean;
-        moveElementsUp(ids: Array<string>): void;
-        canMoveElementsTop(ids: Array<string>): boolean;
-        moveElementsTop(ids: Array<string>): void;
-        canMoveElementsDown(ids: Array<string>): boolean;
-        moveElementsDown(ids: Array<string>): void;
-        canMoveElementsBottom(ids: Array<string>): boolean;
-        moveElementsBottom(ids: Array<string>): void;
-        setElementZIndex(id: any, zIndex: any): void;
-        setSize({ width, height, useMagic, softChange, }: {
-            width: number;
-            height: number;
-            useMagic?: boolean;
-            softChange?: boolean;
-        }): void;
     } & {
         moveElementUp(id: any): void;
         moveElementDown(id: any): void;
@@ -887,9 +878,22 @@ export declare const Store: import("mobx-state-tree").IModelType<{
         readonly computedHeight: any;
     } & {
         toJSON(): any;
-        _forEachElementUp(ids: Array<string>, callback: Function): void;
-        _forEachElementDown(ids: Array<string>, callback: Function): false;
     } & {
+        setSize({ width, height, useMagic, softChange, }: {
+            width: number;
+            height: number;
+            useMagic?: boolean;
+            softChange?: boolean;
+        }): void;
+        canMoveElementsUp(ids: Array<string>): boolean;
+        canMoveElementsTop(ids: Array<string>): boolean;
+        canMoveElementsDown(ids: Array<string>): boolean;
+        canMoveElementsBottom(ids: Array<string>): boolean;
+        moveElementsUp(ids: Array<string>): void;
+        moveElementsDown(ids: Array<string>): void;
+        moveElementsTop(ids: Array<string>): void;
+        moveElementsBottom(ids: Array<string>): void;
+        setElementZIndex(id: string, zIndex: number): void;
         clone(attrs?: {}): any;
         setZIndex(zIndex: any): void;
         set(attrs: any): void;
@@ -903,21 +907,6 @@ export declare const Store: import("mobx-state-tree").IModelType<{
         }): T extends ElementType["type"] ? Extract<ElementType, {
             type: T;
         }> : NodeType;
-        canMoveElementsUp(ids: Array<string>): boolean;
-        moveElementsUp(ids: Array<string>): void;
-        canMoveElementsTop(ids: Array<string>): boolean;
-        moveElementsTop(ids: Array<string>): void;
-        canMoveElementsDown(ids: Array<string>): boolean;
-        moveElementsDown(ids: Array<string>): void;
-        canMoveElementsBottom(ids: Array<string>): boolean;
-        moveElementsBottom(ids: Array<string>): void;
-        setElementZIndex(id: any, zIndex: any): void;
-        setSize({ width, height, useMagic, softChange, }: {
-            width: number;
-            height: number;
-            useMagic?: boolean;
-            softChange?: boolean;
-        }): void;
     } & {
         moveElementUp(id: any): void;
         moveElementDown(id: any): void;
@@ -946,9 +935,22 @@ export declare const Store: import("mobx-state-tree").IModelType<{
         readonly computedHeight: any;
     } & {
         toJSON(): any;
-        _forEachElementUp(ids: Array<string>, callback: Function): void;
-        _forEachElementDown(ids: Array<string>, callback: Function): false;
     } & {
+        setSize({ width, height, useMagic, softChange, }: {
+            width: number;
+            height: number;
+            useMagic?: boolean;
+            softChange?: boolean;
+        }): void;
+        canMoveElementsUp(ids: Array<string>): boolean;
+        canMoveElementsTop(ids: Array<string>): boolean;
+        canMoveElementsDown(ids: Array<string>): boolean;
+        canMoveElementsBottom(ids: Array<string>): boolean;
+        moveElementsUp(ids: Array<string>): void;
+        moveElementsDown(ids: Array<string>): void;
+        moveElementsTop(ids: Array<string>): void;
+        moveElementsBottom(ids: Array<string>): void;
+        setElementZIndex(id: string, zIndex: number): void;
         clone(attrs?: {}): any;
         setZIndex(zIndex: any): void;
         set(attrs: any): void;
@@ -962,21 +964,6 @@ export declare const Store: import("mobx-state-tree").IModelType<{
         }): T extends ElementType["type"] ? Extract<ElementType, {
             type: T;
         }> : NodeType;
-        canMoveElementsUp(ids: Array<string>): boolean;
-        moveElementsUp(ids: Array<string>): void;
-        canMoveElementsTop(ids: Array<string>): boolean;
-        moveElementsTop(ids: Array<string>): void;
-        canMoveElementsDown(ids: Array<string>): boolean;
-        moveElementsDown(ids: Array<string>): void;
-        canMoveElementsBottom(ids: Array<string>): boolean;
-        moveElementsBottom(ids: Array<string>): void;
-        setElementZIndex(id: any, zIndex: any): void;
-        setSize({ width, height, useMagic, softChange, }: {
-            width: number;
-            height: number;
-            useMagic?: boolean;
-            softChange?: boolean;
-        }): void;
     } & {
         moveElementUp(id: any): void;
         moveElementDown(id: any): void;

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 a,onSnapshot as s,setLivelinessChecking as r,types as l}from"mobx-state-tree";import{UndoManager as d}from"./history.js";import{nanoid as c}from"nanoid";import p from"konva";import{computed as g}from"mobx";import{downloadFile as m}from"../utils/download.js";import{getJsPDF as u}from"../utils/pdf.js";import{createGIF as f}from"../utils/gif-lib.js";import{validateKey as h}from"../utils/validate-key.js";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 P}from"../utils/canvas.js";import{whenLoaded as w}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 k}from"../utils/to-html.js";import{jsonToSVG as I}from"../utils/to-svg.js";import{Page as S}from"./page-model.js";import{forEveryChild as O,forEveryNode as T}from"./group-model.js";import{Audio as j}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(S),fonts:l.array(Font),audios:l.array(j),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:3,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 T({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 O({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 T({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 O={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:a=!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=a,requestAnimationFrame(()=>O.seek())},checkActivePage(){let e=0;for(const t of r.pages){if(r.currentTime>=t.startTime&&r.currentTime<t.startTime+t.duration){O.selectPage(t.id);break}e+=t.duration}},seek(){if(!r.isPlaying){return}const e=Date.now(),t=e-l;l=e,r.currentTime+=t,O.checkActivePage();const i=d||r.duration;r.isPlaying&&r.currentTime<i?requestAnimationFrame(()=>O.seek()):r.isPlaying&&g?(r.currentTime=0,requestAnimationFrame(()=>O.seek())):O.stop()},stop(){r.isPlaying=!1,r.currentTime=0,r.animatedElementsIds=i([]),O.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=S.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)},restoreSidePanel(){const e=r.previousOpenedSidePanel;e&&e!==r.openedSidePanel?r.openedSidePanel=e:r.openedSidePanel="photos"},setScale(e){r.scale=e},_setScaleToFit(e){r.scaleToFit=e},setElementsPixelRatio(e){r._elementsPixelRatio=e},setSize(e,t,i){r.pages.forEach(o=>{o.setSize({width:e,height:t,useMagic:i,softChange:!0})}),r.width=e,r.height=t},setPageZIndex(e,t){const i=r.pages.find(t=>t.id===e);i&&(n(i),r.pages.remove(i),r.pages.splice(t,0,i))},deletePages(e){const t=r.pages.indexOf(r.activePage);e.forEach(e=>{const t=r.pages.find(t=>t.id===e);o(t)});const n=Math.min(r.pages.length-1,t),a=r.pages[n];a&&(r._activePageId=a.id),r.selectedElementsIds=i(r.selectedElementsIds.filter(e=>r.getElementById(e)))},groupElements(e,t={}){const o=e.map(e=>r.getElementById(e)),a=o[0].page;if(o.forEach(e=>{e&&n(e)}),!o.length){return}const s=a.children.reduce((e,t)=>{if("group"===t.type){const i=t.name.match(/group-(\d+)/);if(i){const t=parseInt(i[1],10);return Math.max(e,t)}}return e},0),l=Object.assign({id:c(10),name:`group-${s+1}`,children:o,type:"group"},t);return a.children.push(l),r.selectedElementsIds=i([l.id]),a.children.find(e=>e.id===l.id)},ungroupElements(e){const t=e.map(e=>r.getElementById(e)),o=[];t.forEach(e=>{if(e&&"group"===e.type){const t=e.page,i=t.children.indexOf(e);e.children.forEach(e=>{o.push(e.id)}),e.children.forEach(e=>{n(e),t.children.push(e)}),t.children.splice(i,1)}}),r.selectedElementsIds=i(o)},deleteElements(e){const t=[];r.find(i=>(e.includes(i.id)&&t.push(i),!1)),t.forEach(e=>{o(e)}),r.selectedElementsIds=i(r.selectedElementsIds.filter(e=>r.getElementById(e)))},on(e,t){if("change"===e){let e=O.toJSON();return s(r,i=>{const o=O.toJSON();!E(e,o)&&(e=o,t(o))})}},async _toCanvas({pixelRatio:e,ignoreBackground:t,pageId:i,mimeType:o,includeBleed:n,_skipTimeout:a,quickMode:s=!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&&O.setElementsPixelRatio(c),s?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}),O.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 O.waitLoading({_skipTimeout:a});const h=f.findOne(".page-container");if(!h){throw O.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 w=h.findOne(".elements-container"),x=w.clip();w.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 k=h.find(e=>e.getAttr("hideInExport"));k.forEach(e=>{e.setAttr("oldVisible",e.visible()),e.hide()}),t&&h.find(".page-background").forEach(e=>e.hide());const I=n?g.bleed:0;let S=I;!r.bleedVisible&&n||(r.bleedVisible||n?r.bleedVisible&&n?S=0:r.bleedVisible&&!n&&(S=-g.bleed):S=0);const T=g.computedWidth+2*I,j=g.computedHeight+2*I,F=h.scale();h.scale({x:1,y:1});const R=P(h,{x:h.x()-S,y:h.y()-S,width:T,height:j,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()),k.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),w.clip(x),f.position(b),null==g||g.set({_exporting:!1,_forceMount:!1}),await Promise.resolve(),O.setElementsPixelRatio(m),C},async toDataURL(t={}){var{mimeType:i,quality:o,dpi:n,dpiMetadata:a="auto"}=t,s=e(t,["mimeType","quality","dpi","dpiMetadata"]);const l=await O._toCanvas(Object.assign({mimeType:i},s)),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"===a||"auto"===a&&72===g?c:v(c,d,g)},async toBlob(t={}){var{mimeType:i,quality:o}=t,n=e(t,["mimeType","quality"]);const a=await O._toCanvas(Object.assign({mimeType:i},n)),s=await new Promise(e=>{a.toBlob(e,i,o)});return p.Util.releaseCanvas(a),s},async saveAsImage(t={}){var{fileName:i}=t,o=e(t,["fileName"]);const n=(o.mimeType||"image/png").split("/")[1];m(await O.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,a=e.pageIds||r.pages.map(e=>e.id),s=r.pages.filter(e=>a.includes(e.id)),l=await u(),d=e=>x({px:e,unit:o,dpi:t}),c=e.cropMarkSize||0,p=d(c),g=s[0]||{},m=e.includeBleed?g.bleed:0,f=d(g.computedWidth+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})(s,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,s=t.computedHeight+2*i+2*c,r=d(o),l=d(s);let p=0,g=n;for(;p<10;){p+=1;const i=await O.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/a.length*.9),{url:i,width:r,height:l,widthPx:o,heightPx:s}}g*=.8}});(await Promise.all(t)).filter(e=>void 0!==e).forEach(({url:e,width:t,height:i,widthPx:n,heightPx:a})=>{b.addPage([t,i],t>i?"landscape":"portrait");const s=b.getCurrentPageInfo();var r;switch(o){case"pt":r=1;break;case"mm":r=72/25.4;break;case"cm":r=72/2.54;break;case"in":r=72;break;case"px":r=.75;break;default:throw"Invalid unit: "+o}if(s.pageContext.cropBox={bottomLeftX:0,bottomLeftY:0,topRightX:t*r,topRightY:i*r},s.pageContext.artBox={bottomLeftX:d(c+m)*r,bottomLeftY:d(c+m)*r,topRightX:d(n-c-m)*r,topRightY:d(a-c-m)*r},s.pageContext.bleedBox={bottomLeftX:d(c+m)*r,bottomLeftY:d(c+m)*r,topRightX:d(n-c-m)*r,topRightY:d(a-c-m)*r},p){b.setLineWidth(d(1));const e=p+d(m);b.line(e,0,e,p),b.line(0,e,p,e),b.line(t-e,0,t-e,p),b.line(t,e,t-p,e),b.line(0,i-e,p,i-e),b.line(e,i,e,i-p),b.line(t,i-e,t-p,i-e),b.line(t-e,i,t-e,i-p)}b.addImage(e,p,p,t-2*p,i-2*p,void 0,"FAST")})}return b},toPDFDataURL:async e=>(await O._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 a=0;a<n-1;a++){const e=a*o||1;O.setCurrentTime(e);let n=0,s="";for(const t of r.pages){if(n+=t.duration,t.set({_rendering:n>e}),n>e){s=t.id;break}}const l=await O._toCanvas({pixelRatio:t,pageId:s,_skipTimeout:!0});i.addFrame(l.getContext("2d"),{delay:o,copy:!0})}for(const a of r.pages){a.set({_rendering:!1})}return O.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 O.toGIFDataURL(o);m(n,i||"polotno.gif")},async toHTML({elementHook:e}={}){const t=O.toJSON();return k({json:t,elementHook:e})},async saveAsHTML({fileName:e,elementHook:t}={}){const i=await O.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=O.toJSON();t=t||(null===(o=n.pages[0])||void 0===o?void 0:o.id);const a=n.pages.find(e=>e.id===t);return I({json:Object.assign(Object.assign({},n),{pages:a?[a]:[]}),elementHook:e,fontEmbedding:i})},async saveAsSVG({fileName:e,elementHook:t,pageId:i,fontEmbedding:o="inline"}={}){const n=await O.toSVG({elementHook:t,pageId:i,fontEmbedding:o}),a="data:text/svg;base64,"+window.btoa(unescape(encodeURIComponent(n)));m(a,e||"polotno.svg")},async saveAsPDF(t={}){var{fileName:i}=t,o=e(t,["fileName"]);(await O._toPDF(Object.assign({mimeType:"image/jpeg"},o))).save(i||"polotno.pdf")},async waitLoading({_skipTimeout:e=!1}={}){e||await new Promise(e=>setTimeout(e,50)),await w()},toJSON:()=>({width:r.width,height:r.height,fonts:a(r.fonts),pages:a(r.pages),audios:a(r.audios),unit:r.unit,dpi:r.dpi,custom:r.custom,schemaVersion:r.schemaVersion}),loadJSON(e,i=!1){var o,n,s;const l="boolean"==typeof i?i:null!==(o=null==i?void 0:i.keepHistory)&&void 0!==o&&o,d="boolean"!=typeof i&&null!==(n=null==i?void 0:i.modernizeTextBackground)&&void 0!==n&&n,c=JSON.parse(JSON.stringify(e)),p=c.schemaVersion||0;p<1&&y.htmlRenderEnabled&&T({children:c.pages},e=>{if("text"===e.type){const t=16,i=e.letterSpacing*t;e.letterSpacing=i/e.fontSize}}),p<2&&T({children:c.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)})}),p<3&&y.htmlRenderEnabled&&!d&&T({children:c.pages},e=>{"text"===e.type&&e.backgroundEnabled&&(e.legacyBackground=!0)}),delete c.schemaVersion;const g=r.activePage?r.pages.indexOf(r.activePage):0;let m=null===(s=c.pages[g]||c.pages[0])||void 0===s?void 0:s.id;c._activePageId=m;const u=Object.assign({},a(r));Object.assign(u,c),u.history=l?a(r.history):{history:[],undoIdx:-1,targetPath:""},t(r,u)},clear({keepHistory:e=!1}={}){const t=r.pages.map(e=>e.id);O.deletePages(t),r.custom=null,e||r.history.clear()},addFont(e){O.removeFont(e.fontFamily),r.fonts.push(e)},removeFont(e){r.fonts.filter(t=>t.fontFamily===e).forEach(e=>o(e))},addAudio(e){const t=j.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,o){const n=r.fonts.find(t=>t.fontFamily===e)||b.globalFonts.find(t=>t.fontFamily===e);let a=[{fontStyle:"normal",fontWeight:"normal"},{fontStyle:"normal",fontWeight:"bold"}];return n?(n.styles&&(a=n.styles.map(e=>({fontStyle:e.fontStyle||"normal",fontWeight:e.fontWeight||"normal"}))),b.injectCustomFont(n)):b.injectGoogleFont(e),t&&i&&!a.some(e=>e.fontStyle===t&&e.fontWeight===i)&&a.push({fontStyle:t,fontWeight:i}),Promise.all(a.map(t=>b.loadFont(e,t.fontStyle,t.fontWeight,o)))},validate:e=>Store.validate(e,[{path:"",type:Store}]).map(e=>({path:"store"+e.context.map(e=>e.path).join("."),message:e.message}))};return O});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 a,onSnapshot as s,setLivelinessChecking as r,types as l}from"mobx-state-tree";import{UndoManager as d}from"./history.js";import{nanoid as c}from"nanoid";import p from"konva";import{computed as g}from"mobx";import{downloadFile as m}from"../utils/download.js";import{getJsPDF as u}from"../utils/pdf.js";import{createGIF as f}from"../utils/gif-lib.js";import{validateKey as h}from"../utils/validate-key.js";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 P}from"../utils/canvas.js";import{whenLoaded as w}from"../utils/loader.js";import{pxToUnit as E}from"../utils/unit.js";import{deepEqual as x}from"../utils/deep-equal.js";import{waitTillAvailable as I}from"../utils/wait.js";import{jsonToHTML as _}from"../utils/to-html.js";import{jsonToSVG as k}from"../utils/to-svg.js";import{Page as S}from"./page-model.js";import{forEveryChild as O,forEveryNode as T}from"./group-model.js";import{Audio as j}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 ROLES={ADMIN:"admin",VIEWER:"viewer"};export const Store=l.model("Store",{role:"",pages:l.array(S),fonts:l.array(Font),audios:l.array(j),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:3,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 T({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=>e._idsMap[t]).filter(e=>!!e)},get children(){return e.pages},get selectedShapes(){const e=[];return O({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 T({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 O={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:a=!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=a,requestAnimationFrame(()=>O.seek())},checkActivePage(){let e=0;for(const t of r.pages){if(r.currentTime>=t.startTime&&r.currentTime<t.startTime+t.duration){O.selectPage(t.id);break}e+=t.duration}},seek(){if(!r.isPlaying){return}const e=Date.now(),t=e-l;l=e,r.currentTime+=t,O.checkActivePage();const i=d||r.duration;r.isPlaying&&r.currentTime<i?requestAnimationFrame(()=>O.seek()):r.isPlaying&&g?(r.currentTime=0,requestAnimationFrame(()=>O.seek())):O.stop()},stop(){r.isPlaying=!1,r.currentTime=0,r.animatedElementsIds=i([]),O.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=S.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)).filter(e=>!!e);t.sort((e,t)=>{var i,o,n,a;return(null!==(o=null===(i=e.parent)||void 0===i?void 0:i.children.indexOf(e))&&void 0!==o?o:0)-(null!==(a=null===(n=t.parent)||void 0===n?void 0:n.children.indexOf(t))&&void 0!==a?a:0)}),r.selectedElementsIds=i(t.map(e=>e.id))},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)},restoreSidePanel(){const e=r.previousOpenedSidePanel;e&&e!==r.openedSidePanel?r.openedSidePanel=e:r.openedSidePanel="photos"},setScale(e){r.scale=e},_setScaleToFit(e){r.scaleToFit=e},setElementsPixelRatio(e){r._elementsPixelRatio=e},setSize(e,t,i){r.pages.forEach(o=>{o.setSize({width:e,height:t,useMagic:i,softChange:!0})}),r.width=e,r.height=t},setPageZIndex(e,t){const i=r.pages.find(t=>t.id===e);i&&(n(i),r.pages.remove(i),r.pages.splice(t,0,i))},deletePages(e){const t=r.pages.indexOf(r.activePage);e.forEach(e=>{const t=r.pages.find(t=>t.id===e);o(t)});const n=Math.min(r.pages.length-1,t),a=r.pages[n];a&&(r._activePageId=a.id),r.selectedElementsIds=i(r.selectedElementsIds.filter(e=>r.getElementById(e)))},groupElements(e,t={}){const o=e.map(e=>r.getElementById(e)).filter(e=>!!e);if(!o.length){return}const a=o[0].parent;if(!a){return}if(!o.every(e=>e.parent===a)){return void console.warn("store.groupElements: refusing to group elements that do not share a parent. Pass ids whose elements all live under the same page or the same group.")}o.forEach(e=>n(e));const s=a.children.reduce((e,t)=>{var i;if("group"===t.type){const o=null===(i=t.name)||void 0===i?void 0:i.match(/group-(\d+)/);if(o){const t=parseInt(o[1],10);return Math.max(e,t)}}return e},0),l=Object.assign({id:c(10),name:`group-${s+1}`,children:o,type:"group"},t);return a.children.push(l),r.selectedElementsIds=i([l.id]),a.children.find(e=>e.id===l.id)},ungroupElements(e){const t=e.map(e=>r.getElementById(e)),o=[];t.forEach(e=>{if(e&&"group"===e.type){const t=e.parent;if(!t){return}const i=t.children.indexOf(e);e.children.forEach(e=>{o.push(e.id)}),e.children.slice().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=O.toJSON();return s(r,i=>{const o=O.toJSON();!x(e,o)&&(e=o,t(o))})}},async _toCanvas({pixelRatio:e,ignoreBackground:t,pageId:i,mimeType:o,includeBleed:n,_skipTimeout:a,quickMode:s=!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&&O.setElementsPixelRatio(c),s?null==g||g.set({_forceMount:!0}):null==g||g.set({_exporting:!0});const u=await I(()=>{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}),O.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 O.waitLoading({_skipTimeout:a});const h=f.findOne(".page-container");if(!h){throw O.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 w=h.findOne(".elements-container"),E=w.clip();w.clip({x:null,y:null,width:null,height:null});const x=h.find(e=>!e.visible()&&e.getAttr("editModeEnabled")&&!e.getAttr("hideInExport"));x.forEach(e=>{e.setAttr("oldVisible",e.visible()),e.show()});const _=h.find(e=>e.getAttr("hideInExport"));_.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 S=k;!r.bleedVisible&&n||(r.bleedVisible||n?r.bleedVisible&&n?S=0:r.bleedVisible&&!n&&(S=-g.bleed):S=0);const T=g.computedWidth+2*k,j=g.computedHeight+2*k,R=h.scale();h.scale({x:1,y:1});const F=P(h,{x:h.x()-S,y:h.y()-S,width:T,height:j,pixelRatio:c,sceneCanvas:null==l?void 0:l.sceneCanvas,bufferCanvas:null==l?void 0:l.bufferCanvas});h.scale(R);const C=F._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()),_.forEach(e=>{e.visible(e.getAttr("oldVisible"))}),x.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),w.clip(E),f.position(b),null==g||g.set({_exporting:!1,_forceMount:!1}),await Promise.resolve(),O.setElementsPixelRatio(m),C},async toDataURL(t={}){var{mimeType:i,quality:o,dpi:n,dpiMetadata:a="auto"}=t,s=e(t,["mimeType","quality","dpi","dpiMetadata"]);const l=await O._toCanvas(Object.assign({mimeType:i},s)),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"===a||"auto"===a&&72===g?c:v(c,d,g)},async toBlob(t={}){var{mimeType:i,quality:o}=t,n=e(t,["mimeType","quality"]);const a=await O._toCanvas(Object.assign({mimeType:i},n)),s=await new Promise(e=>{a.toBlob(e,i,o)});return p.Util.releaseCanvas(a),s},async saveAsImage(t={}){var{fileName:i}=t,o=e(t,["fileName"]);const n=(o.mimeType||"image/png").split("/")[1];m(await O.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,a=e.pageIds||(e.pageId?[e.pageId]:r.pages.map(e=>e.id)),s=r.pages.filter(e=>a.includes(e.id)),l=await u(),d=e=>E({px:e,unit:o,dpi:t}),c=e.cropMarkSize||0,p=d(c),g=s[0]||{},m=e.includeBleed?g.bleed:0,f=d(g.computedWidth+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})(s,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,s=t.computedHeight+2*i+2*c,r=d(o),l=d(s);let p=0,g=n;for(;p<10;){p+=1;const i=await O.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/a.length*.9),{url:i,width:r,height:l,widthPx:o,heightPx:s}}g*=.8}});(await Promise.all(t)).filter(e=>void 0!==e).forEach(({url:e,width:t,height:i,widthPx:n,heightPx:a})=>{b.addPage([t,i],t>i?"landscape":"portrait");const s=b.getCurrentPageInfo();var r;switch(o){case"pt":r=1;break;case"mm":r=72/25.4;break;case"cm":r=72/2.54;break;case"in":r=72;break;case"px":r=.75;break;default:throw"Invalid unit: "+o}if(s.pageContext.cropBox={bottomLeftX:0,bottomLeftY:0,topRightX:t*r,topRightY:i*r},s.pageContext.artBox={bottomLeftX:d(c+m)*r,bottomLeftY:d(c+m)*r,topRightX:d(n-c-m)*r,topRightY:d(a-c-m)*r},s.pageContext.bleedBox={bottomLeftX:d(c+m)*r,bottomLeftY:d(c+m)*r,topRightX:d(n-c-m)*r,topRightY:d(a-c-m)*r},p){b.setLineWidth(d(1));const e=p+d(m);b.line(e,0,e,p),b.line(0,e,p,e),b.line(t-e,0,t-e,p),b.line(t,e,t-p,e),b.line(0,i-e,p,i-e),b.line(e,i,e,i-p),b.line(t,i-e,t-p,i-e),b.line(t-e,i,t-e,i-p)}b.addImage(e,p,p,t-2*p,i-2*p,void 0,"FAST")})}return b},toPDFDataURL:async e=>(await O._toPDF(Object.assign({mimeType:"image/jpeg"},e))).output("datauristring"),async toGIFDataURL(e={}){const t=e.pixelRatio||1,i=e.pageIds||(e.pageId?[e.pageId]:r.pages.map(e=>e.id)),o=r.pages.filter(e=>i.includes(e.id));if(!o.length){throw new Error("No pages found for GIF export")}const n=o[0],a=await f({width:n.computedWidth*t,height:n.computedHeight*t}),s=1e3/(e.fps||10);for(const l of o){const e=Math.max(1,Math.floor(l.duration/s));for(let i=0;i<e;i++){const e=l.startTime+i*s||1;O.setCurrentTime(e);for(const t of r.pages){t.set({_rendering:t.id===l.id})}const o=await O._toCanvas({pixelRatio:t,pageId:l.id,_skipTimeout:!0});a.addFrame(o.getContext("2d"),{delay:s,copy:!0})}}for(const l of r.pages){l.set({_rendering:!1})}return O.stop(),a.render(),new Promise(e=>{a.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 O.toGIFDataURL(o);m(n,i||"polotno.gif")},async toHTML({elementHook:e}={}){const t=O.toJSON();return _({json:t,elementHook:e})},async saveAsHTML({fileName:e,elementHook:t}={}){const i=await O.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=O.toJSON();t=t||(null===(o=n.pages[0])||void 0===o?void 0:o.id);const a=n.pages.find(e=>e.id===t);return k({json:Object.assign(Object.assign({},n),{pages:a?[a]:[]}),elementHook:e,fontEmbedding:i})},async saveAsSVG({fileName:e,elementHook:t,pageId:i,fontEmbedding:o="inline"}={}){const n=await O.toSVG({elementHook:t,pageId:i,fontEmbedding:o}),a="data:text/svg;base64,"+window.btoa(unescape(encodeURIComponent(n)));m(a,e||"polotno.svg")},async saveAsPDF(t={}){var{fileName:i}=t,o=e(t,["fileName"]);(await O._toPDF(Object.assign({mimeType:"image/jpeg"},o))).save(i||"polotno.pdf")},async waitLoading({_skipTimeout:e=!1}={}){e||await new Promise(e=>setTimeout(e,50)),await w()},toJSON:()=>({width:r.width,height:r.height,fonts:a(r.fonts),pages:a(r.pages),audios:a(r.audios),unit:r.unit,dpi:r.dpi,custom:r.custom,schemaVersion:r.schemaVersion}),loadJSON(e,i=!1){var o,n,s;const l="boolean"==typeof i?i:null!==(o=null==i?void 0:i.keepHistory)&&void 0!==o&&o,d="boolean"!=typeof i&&null!==(n=null==i?void 0:i.modernizeTextBackground)&&void 0!==n&&n,c=JSON.parse(JSON.stringify(e)),p=c.schemaVersion||0;p<1&&y.htmlRenderEnabled&&T({children:c.pages},e=>{if("text"===e.type){const t=16,i=e.letterSpacing*t;e.letterSpacing=i/e.fontSize}}),p<2&&T({children:c.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)})}),p<3&&y.htmlRenderEnabled&&!d&&T({children:c.pages},e=>{"text"===e.type&&e.backgroundEnabled&&(e.legacyBackground=!0)}),delete c.schemaVersion;const g=r.activePage?r.pages.indexOf(r.activePage):0;let m=null===(s=c.pages[g]||c.pages[0])||void 0===s?void 0:s.id;c._activePageId=m;const u=Object.assign({},a(r));Object.assign(u,c),u.history=l?a(r.history):{history:[],undoIdx:-1,targetPath:""},t(r,u)},clear({keepHistory:e=!1}={}){const t=r.pages.map(e=>e.id);O.deletePages(t),r.custom=null,e||r.history.clear()},addFont(e){O.removeFont(e.fontFamily),r.fonts.push(e)},removeFont(e){r.fonts.filter(t=>t.fontFamily===e).forEach(e=>o(e))},addAudio(e){const t=j.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,o){const n=r.fonts.find(t=>t.fontFamily===e)||b.globalFonts.find(t=>t.fontFamily===e);let a=[{fontStyle:"normal",fontWeight:"normal"},{fontStyle:"normal",fontWeight:"bold"}];return n?(n.styles&&(a=n.styles.map(e=>({fontStyle:e.fontStyle||"normal",fontWeight:e.fontWeight||"normal"}))),b.injectCustomFont(n)):b.injectGoogleFont(e),t&&i&&!a.some(e=>e.fontStyle===t&&e.fontWeight===i)&&a.push({fontStyle:t,fontWeight:i}),Promise.all(a.map(t=>b.loadFont(e,t.fontStyle,t.fontWeight,o)))},validate:e=>Store.validate(e,[{path:"",type:Store}]).map(e=>({path:"store"+e.context.map(e=>e.path).join("."),message:e.message}))};return O});export function createStore({key:e,showCredit:t}={key:"",showCredit:!1}){return Store.create({_forceShowCredit:t,_key:e})}export default createStore;

package/model/table-model.d.ts

@@ -5,6 +5,13 @@ export type BorderAttrs = {
     width?: number;
     style?: string;
 };
+export type BorderMode = 'all' | 'outer' | 'inner' | 'topBottom' | 'topOnly' | 'bottomOnly' | 'leftOnly' | 'rightOnly' | 'innerHorizontal' | 'innerVertical';
+export type CellRange = {
+    minRow: number;
+    maxRow: number;
+    minCol: number;
+    maxCol: number;
+};
 export declare const TableCell: 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]>;
@@ -77,6 +84,12 @@ export declare const TableCell: import("mobx-state-tree").IModelType<{
     readonly cellPadding: number;
     readonly width: number;
     readonly height: number;
+    readonly borderInsets: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
     readonly a: {
         x: number;
         y: number;
@@ -259,6 +272,12 @@ export declare const TableElement: import("mobx-state-tree").IModelType<{
         readonly cellPadding: number;
         readonly width: number;
         readonly height: number;
+        readonly borderInsets: {
+            top: number;
+            right: number;
+            bottom: number;
+            left: number;
+        };
         readonly a: {
             x: number;
             y: number;
@@ -439,6 +458,7 @@ export declare const TableElement: import("mobx-state-tree").IModelType<{
     readonly visibleCells: TableCellType[];
     readonly focusedCells: TableCellType[];
     readonly editingCell: TableCellType | undefined;
+    getFocusedCellRange(): CellRange | null;
     readonly _fitRowsToContent: {
         rowHeights: number[];
         height: number;
@@ -447,6 +467,10 @@ export declare const TableElement: import("mobx-state-tree").IModelType<{
     setCellContentHeight(cellId: string, height: number): void;
     _applyFitRowsToContent(): void;
     focusCell(cellId: string, addToSelection?: boolean): void;
+    selectRowRange(startRow: number, endRow: number): void;
+    selectColumnRange(startCol: number, endCol: number): void;
+    selectRow(rowIndex: number): void;
+    selectColumn(colIndex: number): void;
     focusCellRange(targetRow: number, targetCol: number): void;
     clearCellFocus(): void;
     enterCellEdit(cellId: string): void;
@@ -457,11 +481,14 @@ export declare const TableElement: import("mobx-state-tree").IModelType<{
     removeRow(index: number): void;
     addColumn(index: number): void;
     removeColumn(index: number): void;
+    removeRowRange(minRow: number, maxRow: number): void;
+    removeColumnRange(minCol: number, maxCol: number): void;
     distributeRowsEvenly(): void;
     distributeColumnsEvenly(): void;
     resizeColumn(index: number, delta: number): void;
     resizeRow(index: number, delta: number): void;
     setCellBorders(cellIds: string[], sides: BorderSideName[], attrs: BorderAttrs): void;
+    applyBorderMode(mode: BorderMode, attrs: BorderAttrs): void;
 } & {
     clone(attrs?: any, { skipSelect }?: {
         skipSelect?: boolean | undefined;