polotno 2.35.2 → 2.36.0

package/canvas/audio.d.ts

@@ -4,7 +4,7 @@ type Props = {
     store: StoreType;
     audio: AudioType;
 };
-export declare const AudioElement: (({ audio, store }: Props) => any) & {
+export declare const AudioElement: (({ audio, store }: Props) => null) & {
     displayName: string;
 };
 export {};

package/canvas/context-menu/context-menu.d.ts

@@ -11,7 +11,7 @@ type ContextMenuProps = {
     isOpen: boolean;
     setIsOpen: (b: boolean) => void;
 };
-export declare const ContextMenu: (({ store, isOpen, offset, setIsOpen }: ContextMenuProps) => React.JSX.Element) & {
+export declare const ContextMenu: (({ store, isOpen, offset, setIsOpen }: ContextMenuProps) => React.JSX.Element | null) & {
     displayName: string;
 };
 export {};

package/canvas/drawing-layer.d.ts

@@ -11,7 +11,7 @@ type DrawingLayerProps = {
     yPadding: number;
     bleed: number;
 };
-export declare const DrawingLayer: (({ store, page, width, height, scale, xPadding, yPadding, bleed, }: DrawingLayerProps) => React.JSX.Element) & {
+export declare const DrawingLayer: (({ store, page, width, height, scale, xPadding, yPadding, bleed, }: DrawingLayerProps) => React.JSX.Element | null) & {
     displayName: string;
 };
 export {};

package/canvas/element.d.ts

@@ -7,7 +7,7 @@ type ShapeProps = {
     onClick: Function;
 };
 export declare function registerShapeComponent(type: string, component: JSX.Element): void;
-declare const Element: ((props: ShapeProps) => React.JSX.Element) & {
+declare const Element: ((props: ShapeProps) => React.JSX.Element | null) & {
     displayName: string;
 };
 export default Element;

package/canvas/image-element.d.ts

@@ -10,7 +10,7 @@ export declare const useCornerRadiusAndCrop: (element: ImageElementType, image:
     y: number;
     width: number;
     height: number;
-}, pixelRatio: number, cornerRadius?: number, skipDownscale?: boolean, isVector?: boolean) => HTMLCanvasElement | HTMLImageElement;
+}, pixelRatio: number, cornerRadius?: number, skipDownscale?: boolean, isVector?: boolean) => HTMLCanvasElement | HTMLImageElement | undefined;
 type ImageProps = {
     store: StoreType;
     element: ImageElementType;

package/canvas/page-controls.d.ts

@@ -7,6 +7,6 @@ export declare const PageControls: (({ store, page, xPadding, yPadding, layout,
     xPadding: number;
     yPadding: number;
     layout?: "vertical" | "horizontal";
-}) => React.JSX.Element) & {
+}) => React.JSX.Element | null) & {
     displayName: string;
 };

package/canvas/rules.d.ts

@@ -1,14 +1,16 @@
 import React from 'react';
 import { StoreType } from '../model/store.js';
-type PageProps = {
+type TopRulesProps = {
     store: StoreType;
     xPadding: number;
     yPadding: number;
     width: number;
     height: number;
+    pageSizes?: number[];
     layout?: 'vertical' | 'horizontal';
+    renderOnlyActivePage?: boolean;
 };
-export declare const TopRules: (({ store, width, height, layout }: PageProps) => React.JSX.Element) & {
+export declare const TopRules: (({ store, width, height, pageSizes, layout, renderOnlyActivePage }: TopRulesProps) => React.JSX.Element | null) & {
     displayName: string;
 };
 export {};

package/canvas/rules.js

@@ -14,7 +14,7 @@ import e from"react";import{getTotalClientRect as t}from"../utils/math.js";impor
   border-bottom: 1px solid grey;
   background-color: #e8e8e8;
   overflow: hidden;
-`,s=l("div",e.forwardRef)`
+`,n=l("div",e.forwardRef)`
   left: 0;
   width: 14px;
   position: sticky;
@@ -24,7 +24,7 @@ import e from"react";import{getTotalClientRect as t}from"../utils/math.js";impor
   border-right: 1px solid grey;
   background-color: #e8e8e8;
   overflow: hidden;
-`,n=l("div",e.forwardRef)`
+`,s=l("div",e.forwardRef)`
   position: absolute;
   border-left: 1px solid grey;
   padding-left: 2px;
@@ -36,4 +36,4 @@ import e from"react";import{getTotalClientRect as t}from"../utils/math.js";impor
   transform: rotate(90deg);
   transform-origin: left top;
   overflow: hidden;
-`,d=[.1,.2,.5,1,2,5,10,20,25,50,100,200,500,1e3,2e3,5e3,1e4];export const TopRules=i(({store:i,width:l,height:c,layout:h="vertical"})=>{const x=e.useRef(null);if(!i.activePage){return null}const u="horizontal"===h,g=i.activePage,m=(i.bleedVisible&&g.bleed,g.computedWidth*i.scale),f=g.computedHeight*i.scale,y=(l-m)/2,b=(c-f)/2,v=(w=e=>o({unitVal:e,dpi:i.dpi,unit:i.unit})*i.scale,d.find(e=>w(e)>30)||1e4);var w;const k=o({unitVal:v,dpi:i.dpi,unit:i.unit})*i.scale,E=Math.round(m/k)+1,R=Math.round(f/k)+1,S=t(i.selectedShapes);return e.createElement(r,{ref:x,className:"polotno-rulers",style:{display:"flex",flexDirection:"column"}},u?e.createElement(e.Fragment,null,e.createElement("div",{style:{display:"flex",flexDirection:"row",position:"sticky",top:0,zIndex:1}},e.createElement("div",{style:{width:"14px",height:"14px",flexShrink:0,backgroundColor:"#e8e8e8",borderRight:"1px solid grey",borderBottom:"1px solid grey",position:"sticky",left:0,zIndex:2}}),i.pages.map((t,o)=>{var r;const s=t.computedWidth*i.scale,p=(l-s)/2;return e.createElement(a,{key:t.id,style:{width:l+"px",flexShrink:0,position:"relative"},className:"polotno-x-ruler"},[...Array(E)].map((t,o)=>e.createElement(n,{key:o,style:{left:p+o*k+"px",width:k+"px"}},"px"===i.unit||v>=1?Math.round(v*o):(v*o).toFixed(1))),(null===(r=i.selectedShapes[0])||void 0===r?void 0:r.page)===t&&e.createElement("div",{style:{position:"absolute",left:p+S.x*i.scale+"px",height:"14px",width:S.width*i.scale,backgroundColor:"rgba(0,0,0,0.15)"}}))})),e.createElement(s,{style:{height:c+"px",position:"sticky",left:0,marginTop:"-14px"},className:"polotno-y-ruler"},[...Array(R)].map((t,o)=>e.createElement(p,{key:o,style:{top:b+o*k+"px",width:k+"px"}},"px"===i.unit||v>=1?Math.round(v*o):(v*o).toFixed(1))),!!i.selectedShapes.length&&e.createElement("div",{style:{position:"absolute",top:b+S.y*i.scale+"px",width:"14px",height:S.height*i.scale,backgroundColor:"rgba(0,0,0,0.15)"}}))):e.createElement(e.Fragment,null,e.createElement(a,{style:{width:l+"px"},className:"polotno-x-ruler"},[...Array(E)].map((t,o)=>e.createElement(n,{key:o,style:{left:y+o*k+"px",width:k+"px"}},"px"===i.unit||v>=1?Math.round(v*o):(v*o).toFixed(1))),!!i.selectedShapes.length&&e.createElement("div",{style:{position:"absolute",left:y+S.x*i.scale+"px",height:"14px",width:S.width*i.scale,backgroundColor:"rgba(0,0,0,0.15)"}})),i.pages.map((t,o)=>{var l;const r=t.computedHeight*i.scale,a=(c-r)/2,n=0===o?14:0;return e.createElement(s,{key:t.id,style:{height:c-n+"px"},className:"polotno-y-ruler"},[...Array(R)].map((t,o)=>e.createElement(p,{key:o,style:{top:a+o*k-n+"px",width:k+"px"}},"px"===i.unit||v>=1?Math.round(v*o):(v*o).toFixed(1))),(null===(l=i.selectedShapes[0])||void 0===l?void 0:l.page)===t&&e.createElement("div",{style:{position:"absolute",top:a+S.y*i.scale-n+"px",width:"14px",height:S.height*i.scale,backgroundColor:"rgba(0,0,0,0.15)"}}))})))});
+`,d=[.1,.2,.5,1,2,5,10,20,25,50,100,200,500,1e3,2e3,5e3,1e4];export const TopRules=i(({store:i,width:l,height:c,pageSizes:h,layout:u="vertical",renderOnlyActivePage:x})=>{const g=e.useRef(null);if(!i.activePage){return null}const m="horizontal"===u,f=i.activePage,y=(i.bleedVisible&&f.bleed,f.computedWidth*i.scale),b=f.computedHeight*i.scale,v=(l-y)/2,w=(c-b)/2,k=(E=e=>o({unitVal:e,dpi:i.dpi,unit:i.unit})*i.scale,d.find(e=>E(e)>30)||1e4);var E;const R=o({unitVal:k,dpi:i.dpi,unit:i.unit})*i.scale,S=Math.round(y/R)+1,z=Math.round(b/R)+1,F=t(i.selectedShapes);return e.createElement(r,{ref:g,className:"polotno-rulers",style:{display:"flex",flexDirection:"column"}},m?e.createElement(e.Fragment,null,e.createElement("div",{style:{display:"flex",flexDirection:"row",position:"sticky",top:0,zIndex:1}},e.createElement("div",{style:{width:"14px",height:"14px",flexShrink:0,backgroundColor:"#e8e8e8",borderRight:"1px solid grey",borderBottom:"1px solid grey",position:"sticky",left:0,zIndex:2}}),(x?[i.activePage]:i.pages).map((t,o)=>{var r;if(!t){return null}const n=h?h[o]:l,p=(n-t.computedWidth*i.scale)/2;return e.createElement(a,{key:t.id,style:{width:n+"px",flexShrink:0,position:"relative"},className:"polotno-x-ruler"},[...Array(S)].map((t,o)=>e.createElement(s,{key:o,style:{left:p+o*R+"px",width:R+"px"}},"px"===i.unit||k>=1?Math.round(k*o):(k*o).toFixed(1))),(null===(r=i.selectedShapes[0])||void 0===r?void 0:r.page)===t&&e.createElement("div",{style:{position:"absolute",left:p+F.x*i.scale+"px",height:"14px",width:F.width*i.scale,backgroundColor:"rgba(0,0,0,0.15)"}}))})),e.createElement(n,{style:{height:c+"px",position:"sticky",left:0,marginTop:"-14px"},className:"polotno-y-ruler"},[...Array(z)].map((t,o)=>e.createElement(p,{key:o,style:{top:w+o*R+"px",width:R+"px"}},"px"===i.unit||k>=1?Math.round(k*o):(k*o).toFixed(1))),!!i.selectedShapes.length&&e.createElement("div",{style:{position:"absolute",top:w+F.y*i.scale+"px",width:"14px",height:F.height*i.scale,backgroundColor:"rgba(0,0,0,0.15)"}}))):e.createElement(e.Fragment,null,e.createElement(a,{style:{width:l+"px"},className:"polotno-x-ruler"},[...Array(S)].map((t,o)=>e.createElement(s,{key:o,style:{left:v+o*R+"px",width:R+"px"}},"px"===i.unit||k>=1?Math.round(k*o):(k*o).toFixed(1))),!!i.selectedShapes.length&&e.createElement("div",{style:{position:"absolute",left:v+F.x*i.scale+"px",height:"14px",width:F.width*i.scale,backgroundColor:"rgba(0,0,0,0.15)"}})),(x?[i.activePage]:i.pages).map((t,o)=>{var l;if(!t){return null}const r=h?h[o]:c,a=(r-t.computedHeight*i.scale)/2,s=0===o?14:0;return e.createElement(n,{key:t.id,style:{height:r-s+"px"},className:"polotno-y-ruler"},[...Array(z)].map((t,o)=>e.createElement(p,{key:o,style:{top:a+o*R-s+"px",width:R+"px"}},"px"===i.unit||k>=1?Math.round(k*o):(k*o).toFixed(1))),(null===(l=i.selectedShapes[0])||void 0===l?void 0:l.page)===t&&e.createElement("div",{style:{position:"absolute",top:a+F.y*i.scale-s+"px",width:"14px",height:F.height*i.scale,backgroundColor:"rgba(0,0,0,0.15)"}}))})))});

package/canvas/tooltip.d.ts

@@ -12,6 +12,6 @@ export declare const Tooltip: (({ store, page, components, stageRef, tooltipSafe
         left?: number;
         right?: number;
     };
-}) => React.JSX.Element) & {
+}) => React.JSX.Element | null) & {
     displayName: string;
 };

package/canvas/use-color.d.ts

@@ -16,7 +16,7 @@ export declare const useColor: (element: ShapeType, value?: any, propName?: stri
 } | {
     fillLinearGradientStartPointX: number;
     fillLinearGradientStartPointY: number;
-    fillLinearGradientColorStops: any[];
+    fillLinearGradientColorStops: never[];
     fillLinearGradientEndPointX: number;
     fillLinearGradientEndPointY: number;
     fill: any;
@@ -29,7 +29,7 @@ export declare const useColor: (element: ShapeType, value?: any, propName?: stri
 } | {
     strokeLinearGradientStartPointX: number;
     strokeLinearGradientStartPointY: number;
-    strokeLinearGradientColorStops: any[];
+    strokeLinearGradientColorStops: never[];
     strokeLinearGradientEndPointX: number;
     strokeLinearGradientEndPointY: number;
     fillLinearGradientStartPointX?: undefined;

package/canvas/video-element.d.ts

@@ -6,7 +6,7 @@ export declare const useCornerRadiusAndCrop: (element: VideoElementType, image:
     y: number;
     width: number;
     height: number;
-}, pixelRatio: number, cornerRadius?: number, skipDownscale?: boolean) => readonly [HTMLCanvasElement | HTMLVideoElement, () => void];
+}, pixelRatio: number, cornerRadius?: number, skipDownscale?: boolean) => readonly [HTMLCanvasElement | HTMLVideoElement | undefined, () => void];
 type Props = {
     store: StoreType;
     element: VideoElementType;

package/canvas/workspace-canvas.d.ts

@@ -23,6 +23,7 @@ export type WorkspaceProps = {
     onKeyDown?: (e: KeyboardEvent, store: StoreType) => void;
     paddingX?: number;
     paddingY?: number;
+    pageGap?: number;
     altCloneEnabled?: boolean;
     visiblePagesOffset?: number;
     renderOnlyActivePage?: boolean;
@@ -33,7 +34,7 @@ export type WorkspaceProps = {
         right?: number;
     };
 };
-export declare const WorkspaceCanvas: (({ store, layout, pageControlsEnabled, backgroundColor, pageBorderColor, activePageBorderColor, bleedColor, snapGuideStroke, snapGuideStrokeWidth, snapGuideDash, selectionRectFill, selectionRectStroke, selectionRectStrokeWidth, transformLabelFill, transformLabelTextFill, distanceGuideStroke, distanceLabelFill, distanceLabelTextFill, components, onKeyDown, paddingX, paddingY, altCloneEnabled, visiblePagesOffset, renderOnlyActivePage, tooltipSafeArea, }: WorkspaceProps) => React.JSX.Element) & {
+export declare const WorkspaceCanvas: (({ store, layout, pageControlsEnabled, backgroundColor, pageBorderColor, activePageBorderColor, bleedColor, snapGuideStroke, snapGuideStrokeWidth, snapGuideDash, selectionRectFill, selectionRectStroke, selectionRectStrokeWidth, transformLabelFill, transformLabelTextFill, distanceGuideStroke, distanceLabelFill, distanceLabelTextFill, components, onKeyDown, paddingX, paddingY, pageGap, altCloneEnabled, visiblePagesOffset, renderOnlyActivePage, tooltipSafeArea, }: WorkspaceProps) => React.JSX.Element) & {
     displayName: string;
 };
 export default WorkspaceCanvas;

package/canvas/workspace-canvas.js

@@ -1 +1 @@
-import e from"react";import{observer as t}from"mobx-react-lite";import r from"./page.js";import{TopRules as n}from"./rules.js";import{AudioElement as o}from"./audio.js";import{handleHotkey as l}from"./hotkeys.js";import{t as i}from"../utils/l10n.js";const a=({store:t})=>e.createElement("div",{style:{position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",textAlign:"center"}},e.createElement("p",null,i("workspace.noPages")),e.createElement("button",{onClick:()=>{t.addPage()}},i("workspace.addPage"))),s=({width:t,height:r,xPadding:n,yPadding:o,backgroundColor:l})=>e.createElement("div",{style:{width:t+"px",height:r+"px",backgroundColor:l,paddingLeft:n+"px",paddingRight:n+"px",paddingTop:o+"px",paddingBottom:o+"px",flexShrink:0}},e.createElement("div",{style:{width:" 100%",height:"100%",backgroundColor:"white"}})),c=[4,6];export const WorkspaceCanvas=t(({store:t,layout:i="vertical",pageControlsEnabled:u,backgroundColor:d,pageBorderColor:h,activePageBorderColor:g,bleedColor:f,snapGuideStroke:p,snapGuideStrokeWidth:m,snapGuideDash:v,selectionRectFill:w,selectionRectStroke:b,selectionRectStrokeWidth:x,transformLabelFill:k,transformLabelTextFill:y,distanceGuideStroke:E,distanceLabelFill:T,distanceLabelTextFill:L,components:P,onKeyDown:M,paddingX:R,paddingY:S,altCloneEnabled:C=!0,visiblePagesOffset:F,renderOnlyActivePage:W,tooltipSafeArea:O})=>{var _;const j="horizontal"===i,z=null!=R?R:20,G=null!=S?S:55,[B,D]=e.useState({width:100,height:100}),H=e.useRef(B),N=e.useRef(null),A=e.useRef(null),Y=t.bleedVisible?Math.max(0,...t.pages.map(e=>e.bleed)):0,I=Math.max(...t.pages.map(e=>e.computedWidth)),K=Math.max(...t.pages.map(e=>e.computedHeight)),V=(null===(_=t.activePage)||void 0===_?void 0:_.computedHeight)||0,X=I+2*Y,q=(W?V:K)+2*Y,J=async({skipTimeout:e}={skipTimeout:!1})=>{if(e||await new Promise(e=>setTimeout(e,50)),null===N.current){return}const r=N.current.getBoundingClientRect();0!==r.width&&0!==r.height||(console.warn("Polotno warning: <Workspace /> component can not automatically detect its size.\nWidth or height of parent elements is equal 0.\nPlease make sure it has non-zero size. You may need to adjust it with your styles. <Workspace /> will automatically fit into parent container.\nFor simpler debugging here is the log of the parent element:"),console.log(N.current));const n=A.current.clientWidth||r.width,o={width:n,height:r.height};(H.current.width!==o.width||H.current.height!==o.height)&&(D(o),H.current=o);const l=(n-2*z)/X,i=t.pages.length>1?3.1:2,a=(r.height-G*i)/q,s=t.pages.length>1?3.1:2,c=(n-z*s)/X,u=(r.height-2*G)/q,d=t.pages.length?Math.max(Math.min(j?c:l,j?u:a),.01):1;t.scaleToFit!==d&&(t.setScale(d),t._setScaleToFit(d))};e.useLayoutEffect(()=>{J({skipTimeout:!0})},[]),e.useEffect(()=>{J()},[X,q,S,R]),e.useLayoutEffect(()=>{J({skipTimeout:!0})},[t.openedSidePanel]),e.useEffect(()=>{t.__()},[]),e.useEffect(()=>{const e=N.current;if(window.ResizeObserver){const t=new ResizeObserver(()=>{J({skipTimeout:!0})});return t.observe(e),()=>t.unobserve(e)}{const e=setInterval(()=>{J({skipTimeout:!0})},100);return()=>clearInterval(e)}},[X,q]);const Q=W?1:t.pages.length;let U,Z;if(j){const e=X*t.scale*Q;U=Math.max(z,(B.width-e)/Q/2),Z=Math.max(G,(B.height-q*t.scale)/2)}else{U=Math.max(z,(B.width-X*t.scale)/2);const e=q*t.scale*Q;Z=Math.max(G,(B.height-e)/Q/2)}e.useEffect(()=>{const e=e=>{(M||l)(e,t)};return window.addEventListener("keydown",e),()=>window.removeEventListener("keydown",e)},[]),e.useEffect(()=>{const e=e=>{if(e.ctrlKey||e.metaKey){e.preventDefault();const l=Math.max(5,t.scaleToFit);let i=Math.min(.1,t.scaleToFit);j&&X>0&&Number.isFinite(X)&&(i=Math.max(i,300/X)),i=Math.max(i,.01);const a=.03,s=(r=e.deltaY<0?t.scale*(1+a):t.scale/(1+a),n=i,o=l,Math.max(n,Math.min(o,r)));return void t.setScale(s)}var r,n,o},r=A.current;return null==r||r.addEventListener("wheel",e),()=>null==r?void 0:r.removeEventListener("wheel",e)},[j,X,t]);const $=e.useRef(!1),[,ee]=e.useReducer(e=>e+1,0);((t,r,n,o,l,i)=>{const a=e.useRef({width:r,height:n}),s=e.useRef({top:0,left:0}),c=e.useRef(!1),u=e.useRef(l.pages.length);c.current=u.current!==l.pages.length,u.current=l.pages.length,e.useEffect(()=>{const e=t.current,r=t=>{s.current={top:e.scrollTop,left:e.scrollLeft}};return e.addEventListener("scroll",r),()=>{e.removeEventListener("scroll",r)}},[]),e.useLayoutEffect(()=>{if(!t.current){return}if(c.current){return}const e=t.current,o=(s.current.left+e.offsetWidth/2)/a.current.width,l=(s.current.top+e.offsetHeight/2)/a.current.height;i.current=!0,e.scrollLeft=o*r-e.offsetWidth/2,e.scrollTop=l*n-e.offsetHeight/2,a.current={width:r,height:n}},[o,r,n])})(A,X*t.scale+2*U,q*t.scale+2*Z,t.scale,t,$);const te=j?X*t.scale+2*U:q*t.scale+2*Z,{handleScroll:re}=((t,r,n,o,l,i,a,s)=>{const c=e.useRef(!1),u=e.useRef(null),d=e.useRef(!1),h="horizontal"===a;e.useEffect(()=>{const e=t.current,r=()=>{l.current};return e.addEventListener("scroll",r),()=>{e.removeEventListener("scroll",r)}},[]);const g=n.pages.indexOf(n.activePage);return e.useLayoutEffect(()=>{if(i){return}if(!n.activePage){return}if(!t.current){return}if(c.current){return}const e=t.current,o=n.pages.indexOf(n.activePage)*r,l=h?e.scrollLeft:e.scrollTop;let a=()=>{};return(Math.abs(o-l)>.5*r||d.current)&&(d.current=!0,a=(({element:e,scrollTop:t,scrollLeft:r,duration:n=300,onFinish:o=()=>{}})=>{const l=void 0!==t,i=l?e.scrollTop:e.scrollLeft,a=l?t:r,s=a-i;let c=0,u=!1;if(0===n){return l?e.scrollTop=a:e.scrollLeft=a,()=>{}}const d=()=>{if(u){return}c+=20;const t=h(c,i,s,n);l?e.scrollTop=t:e.scrollLeft=t,c<n?setTimeout(d,20):o()},h=(e,t,r,n)=>(e/=n/2)<1?r/2*e*e+t:-r/2*(--e*(e-2)-1)+t;return d(),()=>{u=!0}})(Object.assign(Object.assign({element:e},h?{scrollLeft:o}:{scrollTop:o}),{onFinish:()=>{d.current=!1,null==s||s()},duration:n.isPlaying?0:300}))),a},[n.activePage,g,n.isPlaying,i,a]),{handleScroll:e=>{if(i){return}if(d.current){return}c.current=!0,clearTimeout(u.current),u.current=setTimeout(()=>{c.current=!1},300);const t=e.currentTarget.childNodes[0];if(!t){return}const r=h?t.offsetWidth:t.offsetHeight;if(!r){return}const l=h?e.currentTarget.scrollLeft:e.currentTarget.scrollTop,a=h?o.width:o.height,s=Math.floor((l+a/3)/r),g=n.pages[s];g&&n.activePage!==g&&g.select()}}})(A,te,t,B,$,W,i,ee),ne=B.width>=X*t.scale+2*U,oe=B.height>=q*t.scale+2*Z,le=d||"rgba(232, 232, 232, 0.9)",ie=(null==P?void 0:P.NoPages)||a,ae=j?X*t.scale+2*U:q*t.scale+2*Z,se=j?B.width:B.height,ce=A.current?j?A.current.scrollLeft:A.current.scrollTop:0,ue=Math.max(0,Math.floor(ce/ae)),de=Math.min(t.pages.length-1,Math.ceil((ce+se)/ae)),he=null!=F?F:1,ge=Math.max(0,ue-he),fe=Math.min(t.pages.length-1,de+he);return e.createElement("div",{ref:N,style:{width:"100%",height:"100%",position:"relative",outline:"none",flex:1,backgroundColor:le,overflow:"hidden"},tabIndex:0,className:"polotno-workspace-container"},e.createElement("div",{ref:A,onScroll:re,style:{position:"absolute",top:0,left:0,width:"100%",height:"100%",display:"flex",flexDirection:j?"row":"column",overflow:"auto",overflowX:j?"auto":ne?"hidden":"auto",overflowY:j&&oe?"hidden":"auto"},className:"polotno-workspace-inner"},t.pages.map((n,o)=>{const l=n===t.activePage;if(W&&!l&&!n._exportingOrRendering&&!n._forceMount){return null}if(!(l||o>=ge&&o<=fe||n._exportingOrRendering||n._forceMount)){return e.createElement("div",{key:n.id,style:{flexShrink:0}},e.createElement(s,{width:X*t.scale+2*U,height:q*t.scale+2*Z,backgroundColor:le,xPadding:U,yPadding:Z}))}const a=e.createElement(r,{key:n.id,page:n,xPadding:U,yPadding:Z,width:X*t.scale+2*U,height:q*t.scale+2*Z,store:t,pageControlsEnabled:u,backColor:le,pageBorderColor:h||"lightgrey",activePageBorderColor:g||"rgb(0, 161, 255)",altCloneEnabled:C,bleedColor:f||"rgba(255, 0, 0, 0.1)",selectionRectFill:w,selectionRectStroke:b,selectionRectStrokeWidth:x,snapGuideStroke:p||"rgb(0, 161, 255)",snapGuideStrokeWidth:m||1,snapGuideDash:v||c,transformLabelFill:k,transformLabelTextFill:y,distanceGuideStroke:E||"rgb(0, 161, 255)",distanceLabelFill:T||"rgb(0, 161, 255)",distanceLabelTextFill:L||"white",components:P,viewportSize:B,layout:i,tooltipSafeArea:O});return(n._exportingOrRendering||n._forceMount)&&!l&&W?e.createElement("div",{style:{display:"none",flexShrink:0},key:n.id},a):a}),t.rulesVisible&&e.createElement(n,{store:t,xPadding:U,yPadding:Z,width:X*t.scale+2*U,height:q*t.scale+2*Z,layout:i}),0===t.pages.length&&e.createElement(ie,{store:t}),t.audios.map(r=>e.createElement(o,{key:r.id,audio:r,store:t}))))});export default WorkspaceCanvas;
+import e from"react";import{observer as t}from"mobx-react-lite";import r from"./page.js";import{TopRules as n}from"./rules.js";import{AudioElement as o}from"./audio.js";import{handleHotkey as i}from"./hotkeys.js";import{t as l}from"../utils/l10n.js";const a=(e,t,r)=>Math.max(t,Math.min(r,e)),s=(e,t)=>Math.sqrt(Math.pow(t.clientX-e.clientX,2)+Math.pow(t.clientY-e.clientY,2)),c=({store:t})=>e.createElement("div",{style:{position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",textAlign:"center"}},e.createElement("p",null,l("workspace.noPages")),e.createElement("button",{onClick:()=>{t.addPage()}},l("workspace.addPage"))),u=({width:t,height:r,xPadding:n,yPadding:o,backgroundColor:i})=>e.createElement("div",{style:{width:t+"px",height:r+"px",backgroundColor:i,paddingLeft:n+"px",paddingRight:n+"px",paddingTop:o+"px",paddingBottom:o+"px",flexShrink:0}},e.createElement("div",{style:{width:" 100%",height:"100%",backgroundColor:"white"}})),d=[4,6];export const WorkspaceCanvas=t(({store:t,layout:l="vertical",pageControlsEnabled:h,backgroundColor:g,pageBorderColor:p,activePageBorderColor:f,bleedColor:m,snapGuideStroke:v,snapGuideStrokeWidth:b,snapGuideDash:w,selectionRectFill:x,selectionRectStroke:k,selectionRectStrokeWidth:E,transformLabelFill:y,transformLabelTextFill:L,distanceGuideStroke:T,distanceLabelFill:M,distanceLabelTextFill:P,components:R,onKeyDown:S,paddingX:C,paddingY:F,pageGap:O,altCloneEnabled:W=!0,visiblePagesOffset:z,renderOnlyActivePage:j,tooltipSafeArea:G})=>{var _;const B="horizontal"===l,Y=null!=C?C:20,D=null!=F?F:55,[X,A]=e.useState({width:100,height:100}),N=e.useRef(X),H=e.useRef(null),I=e.useRef(null),K=e.useRef(0),q=t.bleedVisible?Math.max(0,...t.pages.map(e=>e.bleed)):0,V=Math.max(...t.pages.map(e=>e.computedWidth)),J=Math.max(...t.pages.map(e=>e.computedHeight)),Q=(null===(_=t.activePage)||void 0===_?void 0:_.computedHeight)||0,U=V+2*q,Z=(j?Q:J)+2*q,$=async({skipTimeout:e}={skipTimeout:!1})=>{if(e||await new Promise(e=>setTimeout(e,50)),null===H.current){return}const r=H.current.getBoundingClientRect();0!==r.width&&0!==r.height||(console.warn("Polotno warning: <Workspace /> component can not automatically detect its size.\nWidth or height of parent elements is equal 0.\nPlease make sure it has non-zero size. You may need to adjust it with your styles. <Workspace /> will automatically fit into parent container.\nFor simpler debugging here is the log of the parent element:"),console.log(H.current));const n=I.current.clientWidth||r.width,o={width:n,height:r.height};(N.current.width!==o.width||N.current.height!==o.height)&&(A(o),N.current=o);const i=(n-2*Y)/U,l=t.pages.length>1?3.1:2,a=(r.height-D*l)/Z,s=t.pages.length>1?3.1:2,c=(n-Y*s)/U,u=(r.height-2*D)/Z,d=t.pages.length?Math.max(Math.min(B?c:i,B?u:a),.01):1;t.scaleToFit!==d&&(t.setScale(d),t._setScaleToFit(d))};e.useLayoutEffect(()=>{$({skipTimeout:!0})},[]),e.useEffect(()=>{$()},[U,Z,F,C]),e.useLayoutEffect(()=>{$({skipTimeout:!0})},[t.openedSidePanel]),e.useEffect(()=>{t.__()},[]),e.useEffect(()=>{const e=H.current;if(window.ResizeObserver){const t=new ResizeObserver(()=>{$({skipTimeout:!0})});return t.observe(e),()=>t.unobserve(e)}{const e=setInterval(()=>{$({skipTimeout:!0})},100);return()=>clearInterval(e)}},[U,Z]);const ee=j?1:t.pages.length;let te,re;if(B){const e=U*t.scale*ee;te=Math.max(Y,(X.width-e)/ee/2),re=Math.max(D,(X.height-Z*t.scale)/2)}else{te=Math.max(Y,(X.width-U*t.scale)/2);const e=Z*t.scale*ee;re=Math.max(D,(X.height-e)/ee/2)}e.useEffect(()=>{const e=e=>{(S||i)(e,t)};return window.addEventListener("keydown",e),()=>window.removeEventListener("keydown",e)},[]),e.useEffect(()=>{const e=e=>{if(e.ctrlKey||e.metaKey){e.preventDefault();const r=Math.max(5,t.scaleToFit);let n=Math.min(.1,t.scaleToFit);B&&U>0&&Number.isFinite(U)&&(n=Math.max(n,300/U)),n=Math.max(n,.01);const o=.03,i=a(e.deltaY<0?t.scale*(1+o):t.scale/(1+o),n,r);return void t.setScale(i)}},r=I.current;return null==r||r.addEventListener("wheel",e),()=>null==r?void 0:r.removeEventListener("wheel",e)},[B,U,t]),e.useEffect(()=>{const e=I.current;if(!e){return}const r=e=>{2===e.touches.length&&(K.current=s(e.touches[0],e.touches[1]))},n=r=>{if(2===r.touches.length&&K.current>0){r.preventDefault();const n=s(r.touches[0],r.touches[1]),o=n/K.current,i=Math.max(5,t.scaleToFit);let l=Math.min(.1,t.scaleToFit);B&&U>0&&Number.isFinite(U)&&(l=Math.max(l,300/U)),l=Math.max(l,.01);const c=t.scale,u=a(c*o,l,i),d=u/c,h=e.getBoundingClientRect(),g=(r.touches[0].clientX+r.touches[1].clientX)/2-h.left,p=(r.touches[0].clientY+r.touches[1].clientY)/2-h.top,f=e.scrollLeft+g,m=e.scrollTop+p;ae.current=!0,t.setScale(u),e.scrollLeft=f*d-g,e.scrollTop=m*d-p,K.current=n}},o=()=>{K.current=0};return e.addEventListener("touchstart",r,{passive:!0}),e.addEventListener("touchmove",n,{passive:!1}),e.addEventListener("touchend",o,{passive:!0}),()=>{e.removeEventListener("touchstart",r),e.removeEventListener("touchmove",n),e.removeEventListener("touchend",o)}},[B,U,t]);const ne=void 0!==O,oe=e.useMemo(()=>t.pages.map(e=>{if(B){const r=(e.computedWidth+2*q)*t.scale;return ne?r+O:r+2*te}{const r=(e.computedHeight+2*q)*t.scale;return ne?r+O:r+2*re}}),[t.pages,t.scale,q,te,re,O,B,ne]),ie=e.useMemo(()=>{const e=[];let t=ne?B?te:re:0;for(let r=0;r<oe.length;r++){e.push(t),t+=oe[r]}return e},[oe,ne,B,te,re]),le=e.useMemo(()=>{const e=oe.reduce((e,t)=>e+t,0);return ne?e+(B?2*te:2*re):e},[oe,ne,B,te,re]),ae=e.useRef(!1),[,se]=e.useReducer(e=>e+1,0);((t,r,n,o,i,l)=>{const a=e.useRef(r),s=e.useRef(0),c=e.useRef(!1),u=e.useRef(o.pages.length);c.current=u.current!==o.pages.length,u.current=o.pages.length,e.useEffect(()=>{const e=t.current,r=t=>{s.current=l?e.scrollLeft:e.scrollTop};return e.addEventListener("scroll",r),()=>{e.removeEventListener("scroll",r)}},[l]),e.useLayoutEffect(()=>{if(!t.current){return}if(c.current){return}const e=t.current,n=l?e.offsetWidth:e.offsetHeight,o=(s.current+n/2)/a.current;i.current=!0;const u=o*r-n/2;l?e.scrollLeft=u:e.scrollTop=u,a.current=r},[n,r,l])})(I,le,t.scale,t,ae,B);const{handleScroll:ce}=((t,r,n,o,i,l,a,s,c)=>{const u=e.useRef(!1),d=e.useRef(null),h=e.useRef(!1),g="horizontal"===s;e.useEffect(()=>{const e=t.current,r=()=>{l.current};return e.addEventListener("scroll",r),()=>{e.removeEventListener("scroll",r)}},[]);const p=o.pages.indexOf(o.activePage);return e.useLayoutEffect(()=>{if(a){return}if(!o.activePage){return}if(!t.current){return}if(u.current){return}const e=t.current,i=o.pages.indexOf(o.activePage),l=r[i]||0,s=g?e.scrollLeft:e.scrollTop,d=n[i]||n[0]||0;let p=()=>{};return(Math.abs(l-s)>.5*d||h.current)&&(h.current=!0,p=(({element:e,scrollTop:t,scrollLeft:r,duration:n=300,onFinish:o=()=>{}})=>{const i=void 0!==t,l=i?e.scrollTop:e.scrollLeft,a=i?t:r,s=a-l;let c=0,u=!1;if(0===n){return i?e.scrollTop=a:e.scrollLeft=a,()=>{}}const d=()=>{if(u){return}c+=20;const t=h(c,l,s,n);i?e.scrollTop=t:e.scrollLeft=t,c<n?setTimeout(d,20):o()},h=(e,t,r,n)=>(e/=n/2)<1?r/2*e*e+t:-r/2*(--e*(e-2)-1)+t;return d(),()=>{u=!0}})(Object.assign(Object.assign({element:e},g?{scrollLeft:l}:{scrollTop:l}),{onFinish:()=>{h.current=!1,null==c||c()},duration:o.isPlaying?0:300}))),p},[o.activePage,p,o.isPlaying,a,s,r,n]),{handleScroll:e=>{if(a){return}if(h.current){return}u.current=!0,clearTimeout(d.current),d.current=setTimeout(()=>{u.current=!1},300);const t=(g?e.currentTarget.scrollLeft:e.currentTarget.scrollTop)+(g?i.width:i.height)/3;let n=0;for(let o=r.length-1;o>=0;o--){if(t>=r[o]){n=o;break}}const l=o.pages[n];l&&o.activePage!==l&&l.select()}}})(I,ie,oe,t,X,ae,j,l,se),ue=X.width>=U*t.scale+2*te,de=X.height>=Z*t.scale+2*re,he=g||"rgba(232, 232, 232, 0.9)",ge=(null==R?void 0:R.NoPages)||c,pe=B?X.width:X.height,fe=I.current?B?I.current.scrollLeft:I.current.scrollTop:0,me=e=>{for(let t=ie.length-1;t>=0;t--){if(e>=ie[t]){return t}}return 0},ve=Math.max(0,me(fe)),be=Math.min(t.pages.length-1,me(fe+pe)),we=null!=z?z:1,xe=Math.max(0,ve-we),ke=Math.min(t.pages.length-1,be+we);return e.createElement("div",{ref:H,style:{width:"100%",height:"100%",position:"relative",outline:"none",flex:1,backgroundColor:he,overflow:"hidden"},tabIndex:0,className:"polotno-workspace-container"},e.createElement("div",{ref:I,onScroll:ce,style:Object.assign({position:"absolute",top:0,left:0,width:"100%",height:"100%",display:"flex",flexDirection:B?"row":"column",overflow:"auto",overflowX:B?"auto":ue?"hidden":"auto",overflowY:B&&de?"hidden":"auto"},ne&&{paddingTop:B?0:re,paddingBottom:B?0:re,paddingLeft:B?te:0,paddingRight:B?te:0,boxSizing:"border-box"}),className:"polotno-workspace-inner"},t.pages.map((n,o)=>{const i=n===t.activePage;if(j&&!i&&!n._exportingOrRendering&&!n._forceMount){return null}const a=i||o>=xe&&o<=ke||n._exportingOrRendering||n._forceMount,s=B?oe[o]:U*t.scale+2*te,c=B?Z*t.scale+2*re:oe[o];if(!a){return e.createElement("div",{key:n.id,style:{flexShrink:0}},e.createElement(u,{width:s,height:c,backgroundColor:he,xPadding:te,yPadding:re}))}const g=e.createElement(r,{key:n.id,page:n,xPadding:te,yPadding:re,width:s,height:c,store:t,pageControlsEnabled:h,backColor:he,pageBorderColor:p||"lightgrey",activePageBorderColor:f||"rgb(0, 161, 255)",altCloneEnabled:W,bleedColor:m||"rgba(255, 0, 0, 0.1)",selectionRectFill:x,selectionRectStroke:k,selectionRectStrokeWidth:E,snapGuideStroke:v||"rgb(0, 161, 255)",snapGuideStrokeWidth:b||1,snapGuideDash:w||d,transformLabelFill:y,transformLabelTextFill:L,distanceGuideStroke:T||"rgb(0, 161, 255)",distanceLabelFill:M||"rgb(0, 161, 255)",distanceLabelTextFill:P||"white",components:R,viewportSize:X,layout:l,tooltipSafeArea:G});return(n._exportingOrRendering||n._forceMount)&&!i&&j?e.createElement("div",{style:{display:"none",flexShrink:0},key:n.id},g):g}),t.rulesVisible&&e.createElement(n,{store:t,xPadding:te,yPadding:re,width:U*t.scale+2*te,height:Z*t.scale+2*re,pageSizes:oe,layout:l,renderOnlyActivePage:j}),0===t.pages.length&&e.createElement(ge,{store:t}),t.audios.map(r=>e.createElement(o,{key:r.id,audio:r,store:t}))))});export default WorkspaceCanvas;

package/model/audio-model.d.ts

@@ -1,12 +1,12 @@
 import { Instance } from 'mobx-state-tree';
 export declare const Audio: import("mobx-state-tree").IModelType<{
     id: import("mobx-state-tree").ISimpleType<string>;
-    src: import("mobx-state-tree").IType<string, string, string>;
-    duration: import("mobx-state-tree").IType<number, number, number>;
-    startTime: import("mobx-state-tree").IType<number, number, number>;
-    endTime: import("mobx-state-tree").IType<number, number, number>;
-    volume: import("mobx-state-tree").IType<number, number, number>;
-    delay: import("mobx-state-tree").IType<number, number, number>;
+    src: import("mobx-state-tree").IType<string | undefined, string, string>;
+    duration: import("mobx-state-tree").IType<number | undefined, number, number>;
+    startTime: import("mobx-state-tree").IType<number | undefined, number, number>;
+    endTime: import("mobx-state-tree").IType<number | undefined, number, number>;
+    volume: import("mobx-state-tree").IType<number | undefined, number, number>;
+    delay: import("mobx-state-tree").IType<number | undefined, number, number>;
     custom: import("mobx-state-tree").IType<any, any, any>;
 }, {
     toJSON(): {

package/model/figure-model.d.ts

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