polotno 2.14.5 → 2.14.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/canvas/workspace-canvas.js +1 -1
  2. package/model/page-model.d.ts +7 -5
  3. package/model/page-model.js +1 -1
  4. package/model/store.d.ts +42 -35
  5. package/model/store.js +1 -1
  6. package/package.json +1 -1
  7. package/polotno-app.d.ts +132 -110
  8. package/polotno.bundle.js +2 -2
package/canvas/workspace-canvas.js CHANGED
@@ -1 +1 @@
1
- "use strict";var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.WorkspaceCanvas=void 0;const react_1=__importDefault(require("react")),mobx_react_lite_1=require("mobx-react-lite"),page_1=__importDefault(require("./page")),rules_1=require("./rules"),audio_1=require("./audio"),hotkeys_1=require("./hotkeys"),l10n_1=require("../utils/l10n"),limit=(e,t,r)=>Math.max(t,Math.min(r,e)),ZERO_SIZE_WARNING="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:",useSaveScrollOnScaleChange=(e,t,r,a,n,l)=>{const o=react_1.default.useRef({width:t,height:r}),c=react_1.default.useRef({top:0,left:0}),i=react_1.default.useRef(!1),s=react_1.default.useRef(n.pages.length);i.current=s.current!==n.pages.length,s.current=n.pages.length,react_1.default.useEffect((()=>{const t=e.current,r=e=>{c.current={top:t.scrollTop,left:t.scrollLeft}};return t.addEventListener("scroll",r),()=>{t.removeEventListener("scroll",r)}}),[]),react_1.default.useLayoutEffect((()=>{if(!e.current)return;if(i.current)return;const a=e.current,n=(c.current.left+a.offsetWidth/2)/o.current.width,s=(c.current.top+a.offsetHeight/2)/o.current.height;l.current=!0,a.scrollLeft=n*t-a.offsetWidth/2,a.scrollTop=s*r-a.offsetHeight/2,o.current={width:t,height:r}}),[a,t,r])},smoothScroll=({element:e,scrollTop:t=0,duration:r=300,onFinish:a=(()=>{})})=>{const n=e.scrollTop,l=t-n;let o=0,c=!1;if(0===r)return e.scrollTop=t,()=>{};const i=()=>{if(c)return;o+=20;const t=s(o,n,l,r);e.scrollTop=t,o<r?setTimeout(i,20):a()},s=(e,t,r,a)=>(e/=a/2)<1?r/2*e*e+t:-r/2*(--e*(e-2)-1)+t;return i(),()=>{c=!0}},useScrollOnActiveChange=(e,t,r,a,n)=>{const l=react_1.default.useRef(!1),o=react_1.default.useRef(null),c=react_1.default.useRef(!1);react_1.default.useEffect((()=>{const t=e.current,r=()=>{n.current};return t.addEventListener("scroll",r),()=>{t.removeEventListener("scroll",r)}}),[]);const i=r.pages.indexOf(r.activePage);react_1.default.useLayoutEffect((()=>{if(!r.activePage)return;if(!e.current)return;if(l.current)return;const a=e.current,n=r.pages.indexOf(r.activePage)*t;let o=()=>{};return(Math.abs(n-a.scrollTop)>.5*t||c.current)&&(c.current=!0,o=smoothScroll({element:a,scrollTop:n,onFinish:()=>{c.current=!1},duration:r.isPlaying?0:300})),o}),[r.activePage,i,r.isPlaying]);return{handleScroll:e=>{if(c.current)return;l.current=!0,clearTimeout(o.current),o.current=setTimeout((()=>{l.current=!1}),300);const t=e.currentTarget.childNodes[0].offsetHeight,n=e.currentTarget.scrollTop,i=Math.floor((n+a.height/3)/t),s=r.pages[i];s&&r.activePage!==s&&s.select()}}},NoPages=({store:e})=>react_1.default.createElement("div",{style:{position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",textAlign:"center"}},react_1.default.createElement("p",null,(0,l10n_1.t)("workspace.noPages")),react_1.default.createElement("button",{onClick:()=>{e.addPage()}},(0,l10n_1.t)("workspace.addPage"))),PagePlaceholder=({width:e,height:t,xPadding:r,yPadding:a,backgroundColor:n})=>react_1.default.createElement("div",{style:{width:e+"px",height:t+"px",backgroundColor:n,paddingLeft:r+"px",paddingRight:r+"px",paddingTop:a+"px",paddingBottom:a+"px"}},react_1.default.createElement("div",{style:{width:" 100%",height:"100%",backgroundColor:"white"}}));exports.WorkspaceCanvas=(0,mobx_react_lite_1.observer)((({store:e,pageControlsEnabled:t,backgroundColor:r,pageBorderColor:a,activePageBorderColor:n,bleedColor:l,components:o,onKeyDown:c,paddingX:i,paddingY:s,altCloneEnabled:u=!0,visiblePagesOffset:d,renderOnlyActivePage:h})=>{var g;const f=null!=i?i:20,p=null!=s?s:55,[m,_]=react_1.default.useState({width:100,height:100}),v=react_1.default.useRef(m),w=react_1.default.useRef(null),E=react_1.default.useRef(null),y=e.bleedVisible?Math.max(0,...e.pages.map((e=>e.bleed))):0,b=Math.max(...e.pages.map((e=>e.computedWidth))),x=Math.max(...e.pages.map((e=>e.computedHeight))),P=(null===(g=e.activePage)||void 0===g?void 0:g.computedHeight)||0,k=b+2*y,C=(h?P:x)+2*y,T=async({skipTimeout:t}={skipTimeout:!1})=>{if(t||await new Promise((e=>setTimeout(e,50))),null===w.current)return;const r=w.current.getBoundingClientRect();0!==r.width&&0!==r.height||(console.warn(ZERO_SIZE_WARNING),console.log(w.current));const a=E.current.clientWidth||r.width,n={width:a,height:r.height};(v.current.width!==n.width||v.current.height!==n.height)&&(_(n),v.current=n);const l=(a-2*f)/k,o=e.pages.length>1?3.1:2,c=(r.height-p*o)/C,i=Math.max(Math.min(l,c),.01);e.scaleToFit!==i&&(e.setScale(i),e._setScaleToFit(i))};react_1.default.useLayoutEffect((()=>{T({skipTimeout:!0})}),[]),react_1.default.useEffect((()=>{T()}),[k,C]),react_1.default.useEffect((()=>{e.__()}),[]),react_1.default.useEffect((()=>{const e=w.current;if(window.ResizeObserver){const t=new ResizeObserver((()=>{T({skipTimeout:!0})}));return t.observe(e),()=>t.unobserve(e)}{const e=setInterval((()=>{T({skipTimeout:!0})}),100);return()=>clearInterval(e)}}),[k,C]);const R=Math.max(f,(m.width-k*e.scale)/2),M=h?1:e.pages.length,S=C*e.scale*M,O=Math.max(p,(m.height-S)/M/2);react_1.default.useEffect((()=>{const t=t=>{(c||hotkeys_1.handleHotkey)(t,e)};return window.addEventListener("keydown",t),()=>window.removeEventListener("keydown",t)}),[]),react_1.default.useEffect((()=>{var t;const r=t=>{if(t.ctrlKey||t.metaKey){t.preventDefault();const l=Math.max(3,e.scaleToFit),o=Math.min(.1,e.scaleToFit),c=(r=t.deltaY<0?1.05*e.scale:e.scale/1.05,a=o,n=l,Math.max(a,Math.min(n,r)));e.setScale(c)}else var r,a,n};return null===(t=E.current)||void 0===t||t.addEventListener("wheel",r),()=>{var e;return null===(e=E.current)||void 0===e?void 0:e.removeEventListener("wheel",r)}}),[]);const L=react_1.default.useRef(!1);useSaveScrollOnScaleChange(E,k*e.scale+2*R,C*e.scale+2*O,e.scale,e,L);const{handleScroll:W}=useScrollOnActiveChange(E,C*e.scale+2*O,e,m,L),N=m.width>=k*e.scale+2*R,q=r||"rgba(232, 232, 232, 0.9)",A=e.pages.indexOf(e.activePage),F=(null==o?void 0:o.NoPages)||NoPages,I=null!=d?d:Math.min(3,Math.max(1,Math.ceil(m.height/2/(C*e.scale))));return react_1.default.createElement("div",{ref:w,style:{width:"100%",height:"100%",position:"relative",outline:"none",flex:1,backgroundColor:q},tabIndex:0,className:"polotno-workspace-container"},react_1.default.createElement("div",{ref:E,onScroll:W,style:{position:"absolute",top:0,left:0,width:"100%",height:"100%",overflow:"auto",overflowX:N?"hidden":"auto"},className:"polotno-workspace-inner"},e.pages.map(((r,c)=>{const i=r===e.activePage;if(h&&!i&&!r._exportingOrRendering)return null;if(!(Math.abs(c-A)<=I||r._exportingOrRendering))return react_1.default.createElement(PagePlaceholder,{key:r.id,width:k*e.scale+2*R,height:C*e.scale+2*O,backgroundColor:q,xPadding:R,yPadding:O});const s=react_1.default.createElement(page_1.default,{key:r.id,page:r,xPadding:R,yPadding:O,width:k*e.scale+2*R,height:C*e.scale+2*O,store:e,pageControlsEnabled:t,backColor:q,pageBorderColor:a||"lightgrey",activePageBorderColor:n||"rgb(0, 161, 255)",altCloneEnabled:u,bleedColor:l||"rgba(255, 0, 0, 0.1)",components:o});return r._exportingOrRendering&&!i&&h?react_1.default.createElement("div",{style:{display:"none"},key:r.id},s):s})),e.rulesVisible&&react_1.default.createElement(rules_1.TopRules,{store:e,xPadding:R,yPadding:O,width:k*e.scale+2*R,height:C*e.scale+2*O}),0===e.pages.length&&react_1.default.createElement(F,{store:e}),e.audios.map((t=>react_1.default.createElement(audio_1.AudioElement,{key:t.id,audio:t,store:e})))))})),exports.default=exports.WorkspaceCanvas;
1
+ "use strict";var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.WorkspaceCanvas=void 0;const react_1=__importDefault(require("react")),mobx_react_lite_1=require("mobx-react-lite"),page_1=__importDefault(require("./page")),rules_1=require("./rules"),audio_1=require("./audio"),hotkeys_1=require("./hotkeys"),l10n_1=require("../utils/l10n"),limit=(e,t,r)=>Math.max(t,Math.min(r,e)),ZERO_SIZE_WARNING="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:",useSaveScrollOnScaleChange=(e,t,r,a,n,o)=>{const l=react_1.default.useRef({width:t,height:r}),c=react_1.default.useRef({top:0,left:0}),i=react_1.default.useRef(!1),s=react_1.default.useRef(n.pages.length);i.current=s.current!==n.pages.length,s.current=n.pages.length,react_1.default.useEffect((()=>{const t=e.current,r=e=>{c.current={top:t.scrollTop,left:t.scrollLeft}};return t.addEventListener("scroll",r),()=>{t.removeEventListener("scroll",r)}}),[]),react_1.default.useLayoutEffect((()=>{if(!e.current)return;if(i.current)return;const a=e.current,n=(c.current.left+a.offsetWidth/2)/l.current.width,s=(c.current.top+a.offsetHeight/2)/l.current.height;o.current=!0,a.scrollLeft=n*t-a.offsetWidth/2,a.scrollTop=s*r-a.offsetHeight/2,l.current={width:t,height:r}}),[a,t,r])},smoothScroll=({element:e,scrollTop:t=0,duration:r=300,onFinish:a=(()=>{})})=>{const n=e.scrollTop,o=t-n;let l=0,c=!1;if(0===r)return e.scrollTop=t,()=>{};const i=()=>{if(c)return;l+=20;const t=s(l,n,o,r);e.scrollTop=t,l<r?setTimeout(i,20):a()},s=(e,t,r,a)=>(e/=a/2)<1?r/2*e*e+t:-r/2*(--e*(e-2)-1)+t;return i(),()=>{c=!0}},useScrollOnActiveChange=(e,t,r,a,n)=>{const o=react_1.default.useRef(!1),l=react_1.default.useRef(null),c=react_1.default.useRef(!1);react_1.default.useEffect((()=>{const t=e.current,r=()=>{n.current};return t.addEventListener("scroll",r),()=>{t.removeEventListener("scroll",r)}}),[]);const i=r.pages.indexOf(r.activePage);react_1.default.useLayoutEffect((()=>{if(!r.activePage)return;if(!e.current)return;if(o.current)return;const a=e.current,n=r.pages.indexOf(r.activePage)*t;let l=()=>{};return(Math.abs(n-a.scrollTop)>.5*t||c.current)&&(c.current=!0,l=smoothScroll({element:a,scrollTop:n,onFinish:()=>{c.current=!1},duration:r.isPlaying?0:300})),l}),[r.activePage,i,r.isPlaying]);return{handleScroll:e=>{if(c.current)return;o.current=!0,clearTimeout(l.current),l.current=setTimeout((()=>{o.current=!1}),300);const t=e.currentTarget.childNodes[0].offsetHeight,n=e.currentTarget.scrollTop,i=Math.floor((n+a.height/3)/t),s=r.pages[i];s&&r.activePage!==s&&s.select()}}},NoPages=({store:e})=>react_1.default.createElement("div",{style:{position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",textAlign:"center"}},react_1.default.createElement("p",null,(0,l10n_1.t)("workspace.noPages")),react_1.default.createElement("button",{onClick:()=>{e.addPage()}},(0,l10n_1.t)("workspace.addPage"))),PagePlaceholder=({width:e,height:t,xPadding:r,yPadding:a,backgroundColor:n})=>react_1.default.createElement("div",{style:{width:e+"px",height:t+"px",backgroundColor:n,paddingLeft:r+"px",paddingRight:r+"px",paddingTop:a+"px",paddingBottom:a+"px"}},react_1.default.createElement("div",{style:{width:" 100%",height:"100%",backgroundColor:"white"}}));exports.WorkspaceCanvas=(0,mobx_react_lite_1.observer)((({store:e,pageControlsEnabled:t,backgroundColor:r,pageBorderColor:a,activePageBorderColor:n,bleedColor:o,components:l,onKeyDown:c,paddingX:i,paddingY:s,altCloneEnabled:u=!0,visiblePagesOffset:d,renderOnlyActivePage:h})=>{var f;const g=null!=i?i:20,p=null!=s?s:55,[m,_]=react_1.default.useState({width:100,height:100}),v=react_1.default.useRef(m),w=react_1.default.useRef(null),E=react_1.default.useRef(null),y=e.bleedVisible?Math.max(0,...e.pages.map((e=>e.bleed))):0,b=Math.max(...e.pages.map((e=>e.computedWidth))),x=Math.max(...e.pages.map((e=>e.computedHeight))),P=(null===(f=e.activePage)||void 0===f?void 0:f.computedHeight)||0,k=b+2*y,C=(h?P:x)+2*y,T=async({skipTimeout:t}={skipTimeout:!1})=>{if(t||await new Promise((e=>setTimeout(e,50))),null===w.current)return;const r=w.current.getBoundingClientRect();0!==r.width&&0!==r.height||(console.warn(ZERO_SIZE_WARNING),console.log(w.current));const a=E.current.clientWidth||r.width,n={width:a,height:r.height};(v.current.width!==n.width||v.current.height!==n.height)&&(_(n),v.current=n);const o=(a-2*g)/k,l=e.pages.length>1?3.1:2,c=(r.height-p*l)/C,i=Math.max(Math.min(o,c),.01);e.scaleToFit!==i&&(e.setScale(i),e._setScaleToFit(i))};react_1.default.useLayoutEffect((()=>{T({skipTimeout:!0})}),[]),react_1.default.useEffect((()=>{T()}),[k,C]),react_1.default.useEffect((()=>{e.__()}),[]),react_1.default.useEffect((()=>{const e=w.current;if(window.ResizeObserver){const t=new ResizeObserver((()=>{T({skipTimeout:!0})}));return t.observe(e),()=>t.unobserve(e)}{const e=setInterval((()=>{T({skipTimeout:!0})}),100);return()=>clearInterval(e)}}),[k,C]);const M=Math.max(g,(m.width-k*e.scale)/2),R=h?1:e.pages.length,S=C*e.scale*R,O=Math.max(p,(m.height-S)/R/2);react_1.default.useEffect((()=>{const t=t=>{(c||hotkeys_1.handleHotkey)(t,e)};return window.addEventListener("keydown",t),()=>window.removeEventListener("keydown",t)}),[]),react_1.default.useEffect((()=>{var t;const r=t=>{if(t.ctrlKey||t.metaKey){t.preventDefault();const o=Math.max(3,e.scaleToFit),l=Math.min(.1,e.scaleToFit),c=(r=t.deltaY<0?1.05*e.scale:e.scale/1.05,a=l,n=o,Math.max(a,Math.min(n,r)));e.setScale(c)}else var r,a,n};return null===(t=E.current)||void 0===t||t.addEventListener("wheel",r),()=>{var e;return null===(e=E.current)||void 0===e?void 0:e.removeEventListener("wheel",r)}}),[]);const L=react_1.default.useRef(!1);useSaveScrollOnScaleChange(E,k*e.scale+2*M,C*e.scale+2*O,e.scale,e,L);const{handleScroll:W}=useScrollOnActiveChange(E,C*e.scale+2*O,e,m,L),N=m.width>=k*e.scale+2*M,q=r||"rgba(232, 232, 232, 0.9)",A=e.pages.indexOf(e.activePage),F=(null==l?void 0:l.NoPages)||NoPages,I=null!=d?d:Math.min(3,Math.max(1,Math.ceil(m.height/2/(C*e.scale))));return react_1.default.createElement("div",{ref:w,style:{width:"100%",height:"100%",position:"relative",outline:"none",flex:1,backgroundColor:q},tabIndex:0,className:"polotno-workspace-container"},react_1.default.createElement("div",{ref:E,onScroll:W,style:{position:"absolute",top:0,left:0,width:"100%",height:"100%",overflow:"auto",overflowX:N?"hidden":"auto"},className:"polotno-workspace-inner"},e.pages.map(((r,c)=>{const i=r===e.activePage;if(h&&!i&&!r._exportingOrRendering&&!r._forceMount)return null;if(!(Math.abs(c-A)<=I||r._exportingOrRendering||r._forceMount))return react_1.default.createElement(PagePlaceholder,{key:r.id,width:k*e.scale+2*M,height:C*e.scale+2*O,backgroundColor:q,xPadding:M,yPadding:O});const s=react_1.default.createElement(page_1.default,{key:r.id,page:r,xPadding:M,yPadding:O,width:k*e.scale+2*M,height:C*e.scale+2*O,store:e,pageControlsEnabled:t,backColor:q,pageBorderColor:a||"lightgrey",activePageBorderColor:n||"rgb(0, 161, 255)",altCloneEnabled:u,bleedColor:o||"rgba(255, 0, 0, 0.1)",components:l});return(r._exportingOrRendering||r._forceMount)&&!i&&h?react_1.default.createElement("div",{style:{display:"none"},key:r.id},s):s})),e.rulesVisible&&react_1.default.createElement(rules_1.TopRules,{store:e,xPadding:M,yPadding:O,width:k*e.scale+2*M,height:C*e.scale+2*O}),0===e.pages.length&&react_1.default.createElement(F,{store:e}),e.audios.map((t=>react_1.default.createElement(audio_1.AudioElement,{key:t.id,audio:t,store:e})))))})),exports.default=exports.WorkspaceCanvas;
package/model/page-model.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import { Instance } from 'mobx-state-tree';
2
+ import { NodeType } from './node-model';
2
3
  import { ElementType } from './group-model';
3
4
  export declare const Page: import("mobx-state-tree").IModelType<{
4
5
  id: import("mobx-state-tree").ISimpleType<string>;
@@ -11,6 +12,7 @@ export declare const Page: import("mobx-state-tree").IModelType<{
11
12
  duration: import("mobx-state-tree").IType<number, number, number>;
12
13
  _exporting: import("mobx-state-tree").IType<boolean, boolean, boolean>;
13
14
  _rendering: import("mobx-state-tree").IType<boolean, boolean, boolean>;
15
+ _forceMount: import("mobx-state-tree").IType<boolean, boolean, boolean>;
14
16
  }, {
15
17
  readonly store: any;
16
18
  } & {
@@ -28,15 +30,15 @@ export declare const Page: import("mobx-state-tree").IModelType<{
28
30
  setZIndex(zIndex: any): void;
29
31
  set(attrs: any): void;
30
32
  select(): void;
31
- addElement<T extends ElementType["type"]>(attrs: {
33
+ addElement<T extends ElementType["type"] | (string & {})>(attrs: {
32
34
  type: T;
33
- } & Partial<Omit<Extract<ElementType, {
35
+ } & (T extends ElementType["type"] ? Partial<Omit<Extract<ElementType, {
34
36
  type: T;
35
- }>, "type">>, { skipSelect }?: {
37
+ }>, "type">> : Record<string, any>), { skipSelect }?: {
36
38
  skipSelect?: boolean;
37
- }): Extract<ElementType, {
39
+ }): T extends ElementType["type"] ? Extract<ElementType, {
38
40
  type: T;
39
- }>;
41
+ }> : NodeType;
40
42
  canMoveElementsUp(ids: Array<string>): false;
41
43
  moveElementsUp(ids: Array<string>): void;
42
44
  canMoveElementsTop(ids: Array<string>): any;
package/model/page-model.js CHANGED
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.Page=void 0;const mobx_state_tree_1=require("mobx-state-tree"),nanoid_1=require("nanoid"),group_model_1=require("./group-model"),store_1=require("./store"),group_model_2=require("./group-model"),math_1=require("../utils/math");exports.Page=mobx_state_tree_1.types.model("Page",{id:mobx_state_tree_1.types.identifier,children:mobx_state_tree_1.types.array(mobx_state_tree_1.types.late((()=>group_model_1.ElementTypes))),width:mobx_state_tree_1.types.optional(mobx_state_tree_1.types.union(mobx_state_tree_1.types.number,mobx_state_tree_1.types.literal("auto")),"auto"),height:mobx_state_tree_1.types.optional(mobx_state_tree_1.types.union(mobx_state_tree_1.types.number,mobx_state_tree_1.types.literal("auto")),"auto"),background:"white",bleed:0,custom:mobx_state_tree_1.types.frozen(),duration:5e3,_exporting:!1,_rendering:!1}).postProcessSnapshot((e=>{const t=Object.assign({},e),o={};for(var n in t)"_"!==n[0]&&(o[n]=e[n]);return o})).views((e=>({get store(){return(0,mobx_state_tree_1.getParentOfType)(e,store_1.Store)}}))).views((e=>({get startTime(){let t=0;for(const o of e.store.pages){if(o.id===e.id)return t;t+=o.duration}return t},get _exportingOrRendering(){return e._exporting||e._rendering}}))).views((e=>({get computedWidth(){return"auto"===e.width?e.store.width:e.width},get computedHeight(){return"auto"===e.height?e.store.height:e.height}}))).actions((e=>({toJSON:()=>JSON.parse(JSON.stringify((0,mobx_state_tree_1.getSnapshot)(e))),_forEachElementUp(t,o){const n=t.map((t=>({id:t,index:e.children.findIndex((e=>e.id===t))})));n.sort(((e,t)=>t.index-e.index));for(const{index:i}of n){if(-1==i)continue;const n=i<e.children.length-1&&e.children[i+1],r=t.indexOf(null==n?void 0:n.id)>=0;i===e.children.length-1||r||o(i)}},_forEachElementDown(t,o){const n=t.map((t=>({id:t,index:e.children.findIndex((e=>e.id===t))})));n.sort(((e,t)=>e.index-t.index));for(const{index:i}of n){if(-1==i)continue;const n=i>0&&e.children[i-1],r=t.indexOf(null==n?void 0:n.id)>=0;0===i||r||o(i)}return!1}}))).actions((e=>({clone(t={}){const o=e.toJSON();o.children.forEach((e=>{e.id=(0,nanoid_1.nanoid)(10),(0,group_model_2.forEveryChild)(e,(e=>{e.id=(0,nanoid_1.nanoid)(10)}))}));const n=Object.assign(Object.assign(Object.assign({},o),{id:(0,nanoid_1.nanoid)(10)}),t),i=e.store.addPage(n),r=e.store.pages.indexOf(e);i.setZIndex(r+1),i.select()},setZIndex(t){e.store.setPageZIndex(e.id,t)},set(t){Object.assign(e,t)},select(){e.store.selectPage(e.id)},addElement(t,{skipSelect:o=!1}={}){const n=group_model_2.TYPES_MAP[t.type];if(!n)return void console.error("Can not find model with type "+t.type);"children"in t&&Array.isArray(t.children)&&t.children.forEach((e=>{e.id=(0,nanoid_1.nanoid)(10)}));const i=n.create(Object.assign({id:(0,nanoid_1.nanoid)(10)},t));return e.children.push(i),i.selectable&&!o&&e.store.selectElements([i.id]),i},canMoveElementsUp(t){let o=!1;return e._forEachElementUp(t,(()=>{o=o||!0})),o},moveElementsUp(t){e._forEachElementUp(t,(t=>{const o=e.children[t];(0,mobx_state_tree_1.detach)(o),e.children.splice(t+1,0,o)}))},canMoveElementsTop(e){return this.canMoveElementsUp(e)},moveElementsTop(t){const o=[],n=[];e.children.forEach((e=>{t.indexOf(e.id)>=0?o.push(e):n.push(e)})),e.children.replace(n.concat(o))},canMoveElementsDown(t){let o=!1;return e._forEachElementDown(t,(()=>{o=o||!0})),o},moveElementsDown(t){e._forEachElementDown(t,(t=>{const o=e.children[t];(0,mobx_state_tree_1.detach)(o),e.children.splice(t-1,0,o)}))},canMoveElementsBottom(e){return this.canMoveElementsDown(e)},moveElementsBottom(t){const o=[],n=[];e.children.forEach((e=>{t.indexOf(e.id)>=0?o.push(e):n.push(e)})),e.children.replace(o.concat(n))},setElementZIndex(t,o){const n=e.children.find((e=>e.id===t));n&&((0,mobx_state_tree_1.detach)(n),e.children.remove(n),e.children.splice(o,0,n))},setSize({width:t,height:o,useMagic:n,softChange:i}){if(n){const n=[],i=t=>"image"===t.type&&t.x<1&&t.y<1&&t.width>=e.computedWidth-2&&t.height>=e.computedHeight-2;(0,group_model_2.forEveryChild)(e,(e=>{"group"!==e.type&&(i(e)||n.push(e))}));const r=n.length?(0,math_1.getTotalClientRect)(n):{x:0,y:0,width:e.computedWidth,height:e.computedHeight},s=1/4,d=Math.max(0,Math.min(r.x,e.computedWidth-r.x-r.width)),a=e.computedWidth*s,m=Math.max(0,d-a),c=Math.max(0,Math.min(r.y,e.computedHeight-r.y-r.height)),h=e.computedHeight*s,l=Math.max(0,c-h),p=e.computedWidth-2*m,_=e.computedHeight-2*l,u=t/p,g=o/_,x=Math.min(u,g),E=(t-p*x)/2-m*x,f=(o-_*x)/2-l*x;(0,group_model_2.forEveryChild)(e,(e=>{if("group"===e.type)return;i(e)?e.set({x:e.x*x,y:e.y*x,width:e.width*u,height:e.height*g,cropX:0,cropY:0,cropWidth:1,cropHeight:1}):(e.set({x:E+e.x*x,y:f+e.y*x,width:e.width*x,height:e.height*x}),"text"===e.type?e.set({fontSize:e.fontSize*x}):"figure"===e.type&&e.set({strokeWidth:e.strokeWidth*x}))}))}i||(e.width=t),i||(e.height=o)}}))).actions((e=>({moveElementUp(t){console.warn("page.moveElementUp(id) is deprecated. Please use page.moveElementsUp([id1, id2]) instead."),e.moveElementsUp([t])},moveElementDown(t){console.warn("page.moveElementDown(id) is deprecated. Please use page.moveElementsDown([id1, id2]) instead."),e.moveElementsDown([t])},moveElementTop(t){console.warn("page.moveElementTop(id) is deprecated. Please use page.moveElementsTop([id1, id2]) instead."),e.moveElementsTop([t])},moveElementBottom(t){console.warn("page.moveElementBottom(id) is deprecated. Please use page.moveElementsBottom([id1, id2]) instead."),e.moveElementsBottom([t])},play(){e.store.play({startTime:e.startTime,endTime:e.startTime+e.duration})}})));
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.Page=void 0;const mobx_state_tree_1=require("mobx-state-tree"),nanoid_1=require("nanoid"),group_model_1=require("./group-model"),store_1=require("./store"),group_model_2=require("./group-model"),math_1=require("../utils/math");exports.Page=mobx_state_tree_1.types.model("Page",{id:mobx_state_tree_1.types.identifier,children:mobx_state_tree_1.types.array(mobx_state_tree_1.types.late((()=>group_model_1.ElementTypes))),width:mobx_state_tree_1.types.optional(mobx_state_tree_1.types.union(mobx_state_tree_1.types.number,mobx_state_tree_1.types.literal("auto")),"auto"),height:mobx_state_tree_1.types.optional(mobx_state_tree_1.types.union(mobx_state_tree_1.types.number,mobx_state_tree_1.types.literal("auto")),"auto"),background:"white",bleed:0,custom:mobx_state_tree_1.types.frozen(),duration:5e3,_exporting:!1,_rendering:!1,_forceMount:!1}).postProcessSnapshot((e=>{const t=Object.assign({},e),o={};for(var n in t)"_"!==n[0]&&(o[n]=e[n]);return o})).views((e=>({get store(){return(0,mobx_state_tree_1.getParentOfType)(e,store_1.Store)}}))).views((e=>({get startTime(){let t=0;for(const o of e.store.pages){if(o.id===e.id)return t;t+=o.duration}return t},get _exportingOrRendering(){return e._exporting||e._rendering}}))).views((e=>({get computedWidth(){return"auto"===e.width?e.store.width:e.width},get computedHeight(){return"auto"===e.height?e.store.height:e.height}}))).actions((e=>({toJSON:()=>JSON.parse(JSON.stringify((0,mobx_state_tree_1.getSnapshot)(e))),_forEachElementUp(t,o){const n=t.map((t=>({id:t,index:e.children.findIndex((e=>e.id===t))})));n.sort(((e,t)=>t.index-e.index));for(const{index:i}of n){if(-1==i)continue;const n=i<e.children.length-1&&e.children[i+1],r=t.indexOf(null==n?void 0:n.id)>=0;i===e.children.length-1||r||o(i)}},_forEachElementDown(t,o){const n=t.map((t=>({id:t,index:e.children.findIndex((e=>e.id===t))})));n.sort(((e,t)=>e.index-t.index));for(const{index:i}of n){if(-1==i)continue;const n=i>0&&e.children[i-1],r=t.indexOf(null==n?void 0:n.id)>=0;0===i||r||o(i)}return!1}}))).actions((e=>({clone(t={}){const o=e.toJSON();o.children.forEach((e=>{e.id=(0,nanoid_1.nanoid)(10),(0,group_model_2.forEveryChild)(e,(e=>{e.id=(0,nanoid_1.nanoid)(10)}))}));const n=Object.assign(Object.assign(Object.assign({},o),{id:(0,nanoid_1.nanoid)(10)}),t),i=e.store.addPage(n),r=e.store.pages.indexOf(e);i.setZIndex(r+1),i.select()},setZIndex(t){e.store.setPageZIndex(e.id,t)},set(t){Object.assign(e,t)},select(){e.store.selectPage(e.id)},addElement(t,{skipSelect:o=!1}={}){const n=group_model_2.TYPES_MAP[t.type];if(!n)return void console.error("Can not find model with type "+t.type);"children"in t&&Array.isArray(t.children)&&t.children.forEach((e=>{e.id=(0,nanoid_1.nanoid)(10)}));const i=n.create(Object.assign({id:(0,nanoid_1.nanoid)(10)},t));return e.children.push(i),i.selectable&&!o&&e.store.selectElements([i.id]),i},canMoveElementsUp(t){let o=!1;return e._forEachElementUp(t,(()=>{o=o||!0})),o},moveElementsUp(t){e._forEachElementUp(t,(t=>{const o=e.children[t];(0,mobx_state_tree_1.detach)(o),e.children.splice(t+1,0,o)}))},canMoveElementsTop(e){return this.canMoveElementsUp(e)},moveElementsTop(t){const o=[],n=[];e.children.forEach((e=>{t.indexOf(e.id)>=0?o.push(e):n.push(e)})),e.children.replace(n.concat(o))},canMoveElementsDown(t){let o=!1;return e._forEachElementDown(t,(()=>{o=o||!0})),o},moveElementsDown(t){e._forEachElementDown(t,(t=>{const o=e.children[t];(0,mobx_state_tree_1.detach)(o),e.children.splice(t-1,0,o)}))},canMoveElementsBottom(e){return this.canMoveElementsDown(e)},moveElementsBottom(t){const o=[],n=[];e.children.forEach((e=>{t.indexOf(e.id)>=0?o.push(e):n.push(e)})),e.children.replace(o.concat(n))},setElementZIndex(t,o){const n=e.children.find((e=>e.id===t));n&&((0,mobx_state_tree_1.detach)(n),e.children.remove(n),e.children.splice(o,0,n))},setSize({width:t,height:o,useMagic:n,softChange:i}){if(n){const n=[],i=t=>"image"===t.type&&t.x<1&&t.y<1&&t.width>=e.computedWidth-2&&t.height>=e.computedHeight-2;(0,group_model_2.forEveryChild)(e,(e=>{"group"!==e.type&&(i(e)||n.push(e))}));const r=n.length?(0,math_1.getTotalClientRect)(n):{x:0,y:0,width:e.computedWidth,height:e.computedHeight},s=1/4,d=Math.max(0,Math.min(r.x,e.computedWidth-r.x-r.width)),a=e.computedWidth*s,m=Math.max(0,d-a),c=Math.max(0,Math.min(r.y,e.computedHeight-r.y-r.height)),h=e.computedHeight*s,l=Math.max(0,c-h),p=e.computedWidth-2*m,_=e.computedHeight-2*l,u=t/p,g=o/_,x=Math.min(u,g),E=(t-p*x)/2-m*x,f=(o-_*x)/2-l*x;(0,group_model_2.forEveryChild)(e,(e=>{if("group"===e.type)return;i(e)?e.set({x:e.x*x,y:e.y*x,width:e.width*u,height:e.height*g,cropX:0,cropY:0,cropWidth:1,cropHeight:1}):(e.set({x:E+e.x*x,y:f+e.y*x,width:e.width*x,height:e.height*x}),"text"===e.type?e.set({fontSize:e.fontSize*x}):"figure"===e.type&&e.set({strokeWidth:e.strokeWidth*x}))}))}i||(e.width=t),i||(e.height=o)}}))).actions((e=>({moveElementUp(t){console.warn("page.moveElementUp(id) is deprecated. Please use page.moveElementsUp([id1, id2]) instead."),e.moveElementsUp([t])},moveElementDown(t){console.warn("page.moveElementDown(id) is deprecated. Please use page.moveElementsDown([id1, id2]) instead."),e.moveElementsDown([t])},moveElementTop(t){console.warn("page.moveElementTop(id) is deprecated. Please use page.moveElementsTop([id1, id2]) instead."),e.moveElementsTop([t])},moveElementBottom(t){console.warn("page.moveElementBottom(id) is deprecated. Please use page.moveElementsBottom([id1, id2]) instead."),e.moveElementsBottom([t])},play(){e.store.play({startTime:e.startTime,endTime:e.startTime+e.duration})}})));
package/model/store.d.ts CHANGED
@@ -46,6 +46,7 @@ export declare const Store: import("mobx-state-tree").IModelType<{
46
46
  duration: import("mobx-state-tree").IType<number, number, number>;
47
47
  _exporting: import("mobx-state-tree").IType<boolean, boolean, boolean>;
48
48
  _rendering: import("mobx-state-tree").IType<boolean, boolean, boolean>;
49
+ _forceMount: import("mobx-state-tree").IType<boolean, boolean, boolean>;
49
50
  }, {
50
51
  readonly store: any;
51
52
  } & {
@@ -63,15 +64,15 @@ export declare const Store: import("mobx-state-tree").IModelType<{
63
64
  setZIndex(zIndex: any): void;
64
65
  set(attrs: any): void;
65
66
  select(): void;
66
- addElement<T extends ElementType["type"]>(attrs: {
67
+ addElement<T extends ElementType["type"] | (string & {})>(attrs: {
67
68
  type: T;
68
- } & Partial<Omit<Extract<ElementType, {
69
+ } & (T extends ElementType["type"] ? Partial<Omit<Extract<ElementType, {
69
70
  type: T;
70
- }>, "type">>, { skipSelect }?: {
71
+ }>, "type">> : Record<string, any>), { skipSelect }?: {
71
72
  skipSelect?: boolean;
72
- }): Extract<ElementType, {
73
+ }): T extends ElementType["type"] ? Extract<ElementType, {
73
74
  type: T;
74
- }>;
75
+ }> : NodeType;
75
76
  canMoveElementsUp(ids: Array<string>): false;
76
77
  moveElementsUp(ids: Array<string>): void;
77
78
  canMoveElementsTop(ids: Array<string>): any;
@@ -175,6 +176,7 @@ export declare const Store: import("mobx-state-tree").IModelType<{
175
176
  duration: import("mobx-state-tree").IType<number, number, number>;
176
177
  _exporting: import("mobx-state-tree").IType<boolean, boolean, boolean>;
177
178
  _rendering: import("mobx-state-tree").IType<boolean, boolean, boolean>;
179
+ _forceMount: import("mobx-state-tree").IType<boolean, boolean, boolean>;
178
180
  }, {
179
181
  readonly store: any;
180
182
  } & {
@@ -192,15 +194,15 @@ export declare const Store: import("mobx-state-tree").IModelType<{
192
194
  setZIndex(zIndex: any): void;
193
195
  set(attrs: any): void;
194
196
  select(): void;
195
- addElement<T extends ElementType["type"]>(attrs: {
197
+ addElement<T extends ElementType["type"] | (string & {})>(attrs: {
196
198
  type: T;
197
- } & Partial<Omit<Extract<ElementType, {
199
+ } & (T extends ElementType["type"] ? Partial<Omit<Extract<ElementType, {
198
200
  type: T;
199
- }>, "type">>, { skipSelect }?: {
201
+ }>, "type">> : Record<string, any>), { skipSelect }?: {
200
202
  skipSelect?: boolean;
201
- }): Extract<ElementType, {
203
+ }): T extends ElementType["type"] ? Extract<ElementType, {
202
204
  type: T;
203
- }>;
205
+ }> : NodeType;
204
206
  canMoveElementsUp(ids: Array<string>): false;
205
207
  moveElementsUp(ids: Array<string>): void;
206
208
  canMoveElementsTop(ids: Array<string>): any;
@@ -233,6 +235,7 @@ export declare const Store: import("mobx-state-tree").IModelType<{
233
235
  duration: import("mobx-state-tree").IType<number, number, number>;
234
236
  _exporting: import("mobx-state-tree").IType<boolean, boolean, boolean>;
235
237
  _rendering: import("mobx-state-tree").IType<boolean, boolean, boolean>;
238
+ _forceMount: import("mobx-state-tree").IType<boolean, boolean, boolean>;
236
239
  }, {
237
240
  readonly store: any;
238
241
  } & {
@@ -250,15 +253,15 @@ export declare const Store: import("mobx-state-tree").IModelType<{
250
253
  setZIndex(zIndex: any): void;
251
254
  set(attrs: any): void;
252
255
  select(): void;
253
- addElement<T extends ElementType["type"]>(attrs: {
256
+ addElement<T extends ElementType["type"] | (string & {})>(attrs: {
254
257
  type: T;
255
- } & Partial<Omit<Extract<ElementType, {
258
+ } & (T extends ElementType["type"] ? Partial<Omit<Extract<ElementType, {
256
259
  type: T;
257
- }>, "type">>, { skipSelect }?: {
260
+ }>, "type">> : Record<string, any>), { skipSelect }?: {
258
261
  skipSelect?: boolean;
259
- }): Extract<ElementType, {
262
+ }): T extends ElementType["type"] ? Extract<ElementType, {
260
263
  type: T;
261
- }>;
264
+ }> : NodeType;
262
265
  canMoveElementsUp(ids: Array<string>): false;
263
266
  moveElementsUp(ids: Array<string>): void;
264
267
  canMoveElementsTop(ids: Array<string>): any;
@@ -530,6 +533,7 @@ export declare const Store: import("mobx-state-tree").IModelType<{
530
533
  duration: import("mobx-state-tree").IType<number, number, number>;
531
534
  _exporting: import("mobx-state-tree").IType<boolean, boolean, boolean>;
532
535
  _rendering: import("mobx-state-tree").IType<boolean, boolean, boolean>;
536
+ _forceMount: import("mobx-state-tree").IType<boolean, boolean, boolean>;
533
537
  }> & {
534
538
  readonly store: any;
535
539
  } & {
@@ -547,15 +551,15 @@ export declare const Store: import("mobx-state-tree").IModelType<{
547
551
  setZIndex(zIndex: any): void;
548
552
  set(attrs: any): void;
549
553
  select(): void;
550
- addElement<T extends ElementType["type"]>(attrs: {
554
+ addElement<T extends ElementType["type"] | (string & {})>(attrs: {
551
555
  type: T;
552
- } & Partial<Omit<Extract<ElementType, {
556
+ } & (T extends ElementType["type"] ? Partial<Omit<Extract<ElementType, {
553
557
  type: T;
554
- }>, "type">>, { skipSelect }?: {
558
+ }>, "type">> : Record<string, any>), { skipSelect }?: {
555
559
  skipSelect?: boolean;
556
- }): Extract<ElementType, {
560
+ }): T extends ElementType["type"] ? Extract<ElementType, {
557
561
  type: T;
558
- }>;
562
+ }> : NodeType;
559
563
  canMoveElementsUp(ids: Array<string>): false;
560
564
  moveElementsUp(ids: Array<string>): void;
561
565
  canMoveElementsTop(ids: Array<string>): any;
@@ -588,6 +592,7 @@ export declare const Store: import("mobx-state-tree").IModelType<{
588
592
  duration: import("mobx-state-tree").IType<number, number, number>;
589
593
  _exporting: import("mobx-state-tree").IType<boolean, boolean, boolean>;
590
594
  _rendering: import("mobx-state-tree").IType<boolean, boolean, boolean>;
595
+ _forceMount: import("mobx-state-tree").IType<boolean, boolean, boolean>;
591
596
  }, {
592
597
  readonly store: any;
593
598
  } & {
@@ -605,15 +610,15 @@ export declare const Store: import("mobx-state-tree").IModelType<{
605
610
  setZIndex(zIndex: any): void;
606
611
  set(attrs: any): void;
607
612
  select(): void;
608
- addElement<T extends ElementType["type"]>(attrs: {
613
+ addElement<T extends ElementType["type"] | (string & {})>(attrs: {
609
614
  type: T;
610
- } & Partial<Omit<Extract<ElementType, {
615
+ } & (T extends ElementType["type"] ? Partial<Omit<Extract<ElementType, {
611
616
  type: T;
612
- }>, "type">>, { skipSelect }?: {
617
+ }>, "type">> : Record<string, any>), { skipSelect }?: {
613
618
  skipSelect?: boolean;
614
- }): Extract<ElementType, {
619
+ }): T extends ElementType["type"] ? Extract<ElementType, {
615
620
  type: T;
616
- }>;
621
+ }> : NodeType;
617
622
  canMoveElementsUp(ids: Array<string>): false;
618
623
  moveElementsUp(ids: Array<string>): void;
619
624
  canMoveElementsTop(ids: Array<string>): any;
@@ -672,6 +677,7 @@ export declare const Store: import("mobx-state-tree").IModelType<{
672
677
  duration: import("mobx-state-tree").IType<number, number, number>;
673
678
  _exporting: import("mobx-state-tree").IType<boolean, boolean, boolean>;
674
679
  _rendering: import("mobx-state-tree").IType<boolean, boolean, boolean>;
680
+ _forceMount: import("mobx-state-tree").IType<boolean, boolean, boolean>;
675
681
  }> & {
676
682
  readonly store: any;
677
683
  } & {
@@ -689,15 +695,15 @@ export declare const Store: import("mobx-state-tree").IModelType<{
689
695
  setZIndex(zIndex: any): void;
690
696
  set(attrs: any): void;
691
697
  select(): void;
692
- addElement<T extends ElementType["type"]>(attrs: {
698
+ addElement<T extends ElementType["type"] | (string & {})>(attrs: {
693
699
  type: T;
694
- } & Partial<Omit<Extract<ElementType, {
700
+ } & (T extends ElementType["type"] ? Partial<Omit<Extract<ElementType, {
695
701
  type: T;
696
- }>, "type">>, { skipSelect }?: {
702
+ }>, "type">> : Record<string, any>), { skipSelect }?: {
697
703
  skipSelect?: boolean;
698
- }): Extract<ElementType, {
704
+ }): T extends ElementType["type"] ? Extract<ElementType, {
699
705
  type: T;
700
- }>;
706
+ }> : NodeType;
701
707
  canMoveElementsUp(ids: Array<string>): false;
702
708
  moveElementsUp(ids: Array<string>): void;
703
709
  canMoveElementsTop(ids: Array<string>): any;
@@ -730,6 +736,7 @@ export declare const Store: import("mobx-state-tree").IModelType<{
730
736
  duration: import("mobx-state-tree").IType<number, number, number>;
731
737
  _exporting: import("mobx-state-tree").IType<boolean, boolean, boolean>;
732
738
  _rendering: import("mobx-state-tree").IType<boolean, boolean, boolean>;
739
+ _forceMount: import("mobx-state-tree").IType<boolean, boolean, boolean>;
733
740
  }, {
734
741
  readonly store: any;
735
742
  } & {
@@ -747,15 +754,15 @@ export declare const Store: import("mobx-state-tree").IModelType<{
747
754
  setZIndex(zIndex: any): void;
748
755
  set(attrs: any): void;
749
756
  select(): void;
750
- addElement<T extends ElementType["type"]>(attrs: {
757
+ addElement<T extends ElementType["type"] | (string & {})>(attrs: {
751
758
  type: T;
752
- } & Partial<Omit<Extract<ElementType, {
759
+ } & (T extends ElementType["type"] ? Partial<Omit<Extract<ElementType, {
753
760
  type: T;
754
- }>, "type">>, { skipSelect }?: {
761
+ }>, "type">> : Record<string, any>), { skipSelect }?: {
755
762
  skipSelect?: boolean;
756
- }): Extract<ElementType, {
763
+ }): T extends ElementType["type"] ? Extract<ElementType, {
757
764
  type: T;
758
- }>;
765
+ }> : NodeType;
759
766
  canMoveElementsUp(ids: Array<string>): false;
760
767
  moveElementsUp(ids: Array<string>): void;
761
768
  canMoveElementsTop(ids: Array<string>): any;
package/model/store.js CHANGED
@@ -1 +1 @@
1
- "use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,t,i,o){void 0===o&&(o=i);var a=Object.getOwnPropertyDescriptor(t,i);a&&!("get"in a?!t.__esModule:a.writable||a.configurable)||(a={enumerable:!0,get:function(){return t[i]}}),Object.defineProperty(e,o,a)}:function(e,t,i,o){void 0===o&&(o=i),e[o]=t[i]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),__importStar=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var i in e)"default"!==i&&Object.prototype.hasOwnProperty.call(e,i)&&__createBinding(t,e,i);return __setModuleDefault(t,e),t},__rest=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 a=0;for(o=Object.getOwnPropertySymbols(e);a<o.length;a++)t.indexOf(o[a])<0&&Object.prototype.propertyIsEnumerable.call(e,o[a])&&(i[o[a]]=e[o[a]])}return i},__importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.Store=exports.Font=void 0,exports.createStore=createStore;const mobx_state_tree_1=require("mobx-state-tree"),history_1=require("./history"),nanoid_1=require("nanoid"),konva_1=__importDefault(require("konva")),download_1=require("../utils/download"),pdf_1=require("../utils/pdf"),gif_lib_1=require("../utils/gif-lib"),validate_key_1=require("../utils/validate-key"),fonts=__importStar(require("../utils/fonts")),loader_1=require("../utils/loader"),unit_1=require("../utils/unit"),deep_equal_1=require("../utils/deep-equal"),wait_1=require("../utils/wait"),html_1=require("../utils/html"),to_svg_1=require("../utils/to-svg"),page_model_1=require("./page-model"),group_model_1=require("./group-model"),audio_model_1=require("./audio-model");function createStore({key:e,showCredit:t}={key:"",showCredit:!1}){return exports.Store.create({_forceShowCredit:t,_key:e})}(0,mobx_state_tree_1.setLivelinessChecking)("ignore"),exports.Font=mobx_state_tree_1.types.model("Font",{fontFamily:mobx_state_tree_1.types.string,url:mobx_state_tree_1.types.optional(mobx_state_tree_1.types.string,""),styles:mobx_state_tree_1.types.frozen()}).preProcessSnapshot((e=>Object.assign(Object.assign({},e),{fontFamily:e.fontFamily||e.name}))),exports.Store=mobx_state_tree_1.types.model("Store",{role:"",pages:mobx_state_tree_1.types.array(page_model_1.Page),fonts:mobx_state_tree_1.types.array(exports.Font),audios:mobx_state_tree_1.types.array(audio_model_1.Audio),width:1080,height:1080,currentTime:0,isPlaying:!1,scale:1,scaleToFit:1,unit:"px",dpi:72,bleedVisible:!1,rulesVisible:!1,openedSidePanel:"",previousOpenedSidePanel:"",custom:mobx_state_tree_1.types.frozen(),selectedElementsIds:mobx_state_tree_1.types.array(mobx_state_tree_1.types.string),animatedElementsIds:mobx_state_tree_1.types.array(mobx_state_tree_1.types.string),history:mobx_state_tree_1.types.optional(history_1.UndoManager,{targetPath:"../pages"}),_elementsPixelRatio:Math.min(2,window.devicePixelRatio||1),_activePageId:"",_forceShowCredit:!1,_key:"",_validated:!1}).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 t=[];return(0,group_model_1.forEveryChild)({children:e.selectedElements},(e=>{"group"!==e.type&&t.push(e)})),t},get activePage(){return e.pages.slice().find((t=>t.id===e._activePageId))||(e.pages.length?e.pages[0]:null)},get duration(){let t=0;return e.pages.forEach((e=>{t+=e.duration})),t},get _hasCroppedImages(){return e.find((e=>"image"===e.type&&e._cropModeEnabled))},find(t){let i;return(0,group_model_1.forEveryChild)({children:e.pages},(e=>{if(!i&&t(e))return i=e,!0})),i},getElementById:t=>e.find((e=>e.id===t))}))).actions((e=>{let t=0,i=null,o=!1;return{afterCreate(){e.history.canUndo},setCurrentTime(t){e.currentTime=t},play({animatedElementsIds:a=[],startTime:n=0,currentTime:s=0,endTime:r=e.duration,repeat:l=!1}={}){s&&(console.warn("currentTime property of store.play() is deprecated. Please use startTime instead."),n=s),e.animatedElementsIds=(0,mobx_state_tree_1.cast)(a),e.currentTime=n,e.isPlaying=!0,t=Date.now(),i=r,o=l,requestAnimationFrame(e.seek)},checkActivePage(){let t=0;for(const i of e.pages){if(e.currentTime>=i.startTime&&e.currentTime<i.startTime+i.duration){e.selectPage(i.id);break}t+=i.duration}},seek(){if(!e.isPlaying)return;const a=Date.now(),n=a-t;t=a,e.currentTime+=n,e.checkActivePage();const s=i||e.duration;e.isPlaying&&e.currentTime<s?requestAnimationFrame(e.seek):e.isPlaying&&o?(e.currentTime=0,requestAnimationFrame(e.seek)):e.stop()},stop(){e.isPlaying=!1,e.currentTime=0,e.animatedElementsIds=(0,mobx_state_tree_1.cast)([]),e.checkActivePage()}}})).actions((e=>({__(){e._validated||((0,validate_key_1.validateKey)(e._key,e._forceShowCredit),e._validated=!0)},set(t){Object.assign(e,t)},setUnit({unit:t,dpi:i}){e.unit=t||e.unit,e.dpi=i||e.dpi},setRole(t){e.role=t},addPage(t){const i=page_model_1.Page.create(Object.assign({id:(0,nanoid_1.nanoid)(10)},t));return e.pages.push(i),e._activePageId=i.id,i},selectPage(t){e._activePageId=t},selectElements(t){const i=t.map((t=>e.getElementById(t))).sort(((e,t)=>e.page.children.indexOf(e)-e.page.children.indexOf(t))).filter((e=>!!e)).map((e=>e.id));e.selectedElementsIds=(0,mobx_state_tree_1.cast)(i)},toggleBleed(t){e.bleedVisible=null!=t?t:!e.bleedVisible},toggleRulers(t){e.rulesVisible=null!=t?t:!e.rulesVisible},openSidePanel(t){e.openedSidePanel!==t&&(e.previousOpenedSidePanel=e.openedSidePanel,e.openedSidePanel=t)},setScale(t){e.scale=t},_setScaleToFit(t){e.scaleToFit=t},setElementsPixelRatio(t){e._elementsPixelRatio=t},setSize(t,i,o){e.pages.forEach((e=>{e.setSize({width:t,height:i,useMagic:o,softChange:!0})})),e.width=t,e.height=i},setPageZIndex(t,i){const o=e.pages.find((e=>e.id===t));o&&((0,mobx_state_tree_1.detach)(o),e.pages.remove(o),e.pages.splice(i,0,o))},deletePages(t){const i=e.pages.indexOf(e.activePage);t.forEach((t=>{const i=e.pages.find((e=>e.id===t));(0,mobx_state_tree_1.destroy)(i)}));const o=Math.min(e.pages.length-1,i),a=e.pages[o];a&&(e._activePageId=a.id),e.selectedElementsIds=(0,mobx_state_tree_1.cast)(e.selectedElementsIds.filter((t=>e.getElementById(t))))},groupElements(t){const i=t.map((t=>e.getElementById(t)));i.forEach((e=>{e&&(0,mobx_state_tree_1.detach)(e)}));const o=e.activePage,a={id:(0,nanoid_1.nanoid)(10),children:i,type:"group"};return o.children.push(a),e.selectedElementsIds=(0,mobx_state_tree_1.cast)([a.id]),a},ungroupElements(t){const i=t.map((t=>e.getElementById(t))),o=[];i.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=>{(0,mobx_state_tree_1.detach)(e),t.children.push(e)})),t.children.splice(i,1)}})),e.selectedElementsIds=(0,mobx_state_tree_1.cast)(o)},deleteElements(t){const i=[];e.find((e=>(t.includes(e.id)&&i.push(e),!1))),i.forEach((e=>{(0,mobx_state_tree_1.destroy)(e)})),e.selectedElementsIds=(0,mobx_state_tree_1.cast)(e.selectedElementsIds.filter((t=>e.getElementById(t))))},on(t,i){if("change"===t){let t=e.toJSON();return(0,mobx_state_tree_1.onSnapshot)(e,(o=>{const a=e.toJSON();!(0,deep_equal_1.deepEqual)(t,a)&&(t=a,i(a))}))}},async _toCanvas({pixelRatio:t,ignoreBackground:i,pageId:o,mimeType:a,includeBleed:n,_skipTimeout:s,quickMode:r=!1}={}){var l;const d=t||1;o=o||(null===(l=e.pages[0])||void 0===l?void 0:l.id);const c=e.pages.find((e=>e.id===o));if(!c)throw new Error(`No page for export with id ${o}`);null==c||c.set({_exporting:!r});const p=await(0,wait_1.waitTillAvailable)((()=>konva_1.default.stages.find((e=>e.getAttr("pageId")===o))));if(!p)throw new Error(`Export is failed. Can not find stage for page ${o}. Looks like <Workspace /> component is not mounted, but it is required in order to process the export.`);const u=!!p.findOne(".page-container"),g=e._elementsPixelRatio;d>e._elementsPixelRatio&&e.setElementsPixelRatio(d),await e.waitLoading({_skipTimeout:s});const _=p.findOne(".page-container");if(!_)throw e.setElementsPixelRatio(g),new Error(`Export is failed. Can't find page container. ${u}`);p.find("Transformer").forEach((e=>e.visible(!1))),_.find(".page-background").forEach((e=>e.shadowEnabled(!1))),_.find(".page-background").forEach((e=>e.strokeEnabled(!1))),_.find(".highlighter").forEach((e=>e.visible(!1)));const m=_.findOne(".page-background-group"),f=m.clip();m.clip({x:null,y:null,width:null,height:null});const h=_.findOne(".elements-container"),b=h.clip();h.clip({x:null,y:null,width:null,height:null});const y=_.find((e=>e.getAttr("hideInExport")));y.forEach((e=>{e.setAttr("oldVisible",e.visible()),e.hide()}));const v=_.find((e=>!e.visible()&&e.getAttr("editModeEnabled")));v.forEach((e=>{e.setAttr("oldVisible",e.visible()),e.show()})),i&&_.find(".page-background").forEach((e=>e.hide()));const x=n?c.bleed:0;let w=x;!e.bleedVisible&&n||(e.bleedVisible||n?e.bleedVisible&&n?w=0:e.bleedVisible&&!n&&(w=-c.bleed):w=0);const P=document.createElement("canvas");P.width=Math.round((c.computedWidth+2*x)*d),P.height=Math.round((c.computedHeight+2*x)*d);const E=P.getContext("2d");"image/jpeg"===a&&(E.fillStyle="white",E.fillRect(0,0,P.width,P.height));const S=_.scale();_.scale({x:1,y:1});const O=_.toCanvas({x:_.x()-w,y:_.y()-w,width:c.computedWidth+2*x,height:c.computedHeight+2*x,pixelRatio:d});return _.scale(S),E.drawImage(O,0,0,P.width,P.height),konva_1.default.Util.releaseCanvas(O),i&&_.find(".page-background").forEach((e=>e.show())),y.forEach((e=>{e.visible(e.getAttr("oldVisible"))})),v.forEach((e=>{e.visible(e.getAttr("oldVisible"))})),_.find(".page-background").forEach((e=>e.shadowEnabled(!0))),_.find(".page-background").forEach((e=>e.strokeEnabled(!0))),p.find("Transformer").forEach((e=>e.visible(!0))),_.find(".highlighter").forEach((e=>e.visible(!0))),m.clip(f),h.clip(b),e.setElementsPixelRatio(g),null==c||c.set({_exporting:!1}),P},async toDataURL(t={}){var{mimeType:i,quality:o}=t,a=__rest(t,["mimeType","quality"]);const n=await e._toCanvas(Object.assign({mimeType:i},a)),s=n.toDataURL(i,o);return konva_1.default.Util.releaseCanvas(n),s},async toBlob(t={}){var{mimeType:i,quality:o}=t,a=__rest(t,["mimeType","quality"]);const n=await e._toCanvas(Object.assign({mimeType:i},a)),s=await new Promise((e=>{n.toBlob(e,i,o)}));return konva_1.default.Util.releaseCanvas(n),s},async saveAsImage(t={}){var{fileName:i}=t,o=__rest(t,["fileName"]);const a=o.mimeType||"image/png",n=a.split("/")[1];(0,download_1.downloadFile)(await e.toDataURL(o),i||"polotno."+n,a)},async _toPDF(t){const i=t.dpi||e.dpi,o=t.parallel||1,a=t.unit||("px"===e.unit?"mm":e.unit),n=t.pixelRatio||1,s=t.pageIds||e.pages.map((e=>e.id)),r=e.pages.filter((e=>s.includes(e.id))),l=await(0,pdf_1.getJsPDF)(),d=e=>(0,unit_1.pxToUnit)({px:e,unit:a,dpi:i}),c=t.cropMarkSize||0,p=d(c),u=r[0]||{},g=t.includeBleed?u.bleed:0,_=d(u.computedWidth+2*g+2*p),m=d(u.computedHeight+2*g+2*p);var f=new l({unit:a,orientation:_>m?"landscape":"portrait",format:[_,m],compress:!0,putOnlyUsedFonts:!0});f.deletePage(1);const h=((e,t)=>{for(var i=[],o=0;o<e.length;o+=t)i.push(e.slice(o,o+t));return i})(r,o);let b=0;for(const i of h){const o=i.map((async i=>{const o=t.includeBleed?i.bleed:0,a=i.computedWidth+2*o+2*c,r=i.computedHeight+2*o+2*c,l=d(a),p=d(r);let u=0,g=n;for(;u<10;){u+=1,2===u&&console.error("Polotno can not export PDF with current settings. Quality is automatically reduced.");const o=await e.toDataURL(Object.assign(Object.assign({},t),{pageId:i.id,pixelRatio:g}));if(o.length>20)return t.onProgress&&t.onProgress(++b/s.length*.9),{url:o,width:l,height:p,widthPx:a,heightPx:r};g*=.8}}));(await Promise.all(o)).forEach((({url:e,width:t,height:i,widthPx:o,heightPx:a})=>{f.addPage([t,i],t>i?"landscape":"portrait");const n=f.getCurrentPageInfo();n.pageContext.cropBox={bottomLeftX:c,bottomLeftY:c,topRightX:o-c,topRightY:a-c},n.pageContext.bleedBox={bottomLeftX:c+g,bottomLeftY:c+g,topRightX:o-c-g,topRightY:a-c-g},p&&(f.setLineWidth(d(1)),f.line(2*p,0,2*p,p),f.line(0,2*p,p,2*p),f.line(t-2*p,0,t-2*p,p),f.line(t,2*p,t-p,2*p),f.line(0,i-2*p,p,i-2*p),f.line(2*p,i,2*p,i-p),f.line(t,i-2*p,t-p,i-2*p),f.line(t-2*p,i,t-2*p,i-p)),f.addImage(e,p,p,t-2*p,i-2*p,void 0,"FAST")}))}return f},toPDFDataURL:async t=>(await e._toPDF(Object.assign({mimeType:"image/jpeg"},t))).output("datauristring"),async toGIFDataURL(t={}){const i=t.pixelRatio||1,o=await(0,gif_lib_1.createGIF)({width:e.width*i,height:e.height*i}),a=1e3/(t.fps||10),n=e.duration/a;for(let t=0;t<n-1;t++){const n=t*a||1;e.setCurrentTime(n);let s=0,r="";for(const t of e.pages)if(s+=t.duration,t.set({_rendering:s>n}),s>n){r=t.id;break}const l=await e._toCanvas({pixelRatio:i,pageId:r,_skipTimeout:!0});o.addFrame(l.getContext("2d"),{delay:a,copy:!0})}for(const t of e.pages)t.set({_rendering:!1});e.stop(),o.render();return new Promise((e=>{o.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=__rest(t,["fileName"]);const a=await e.toGIFDataURL(o);(0,download_1.downloadFile)(a,i||"polotno.gif")},async toHTML({elementHook:t}={elementHook:void 0}){const i=e.toJSON();return(0,html_1.jsonToHTML)({json:i,elementHook:t})},async saveAsHTML({fileName:t}={}){const i=await e.toHTML(),o="data:text/html;base64,"+window.btoa(unescape(encodeURIComponent(i)));(0,download_1.downloadFile)(o,t||"polotno.html")},async toSVG({elementHook:t,pageId:i}={elementHook:void 0,pageId:void 0}){var o;const a=e.toJSON();i=i||(null===(o=a.pages[0])||void 0===o?void 0:o.id);const n=a.pages.find((e=>e.id===i));return(0,to_svg_1.jsonToSVG)({json:Object.assign(Object.assign({},a),{pages:[n]}),elementHook:t})},async saveAsSVG({fileName:t,elementHook:i,pageId:o}={}){const a=await e.toSVG({elementHook:i,pageId:o}),n="data:text/svg;base64,"+window.btoa(unescape(encodeURIComponent(a)));(0,download_1.downloadFile)(n,t||"polotno.svg")},async saveAsPDF(t={}){var{fileName:i}=t,o=__rest(t,["fileName"]);(await e._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(0,loader_1.whenLoaded)()},toJSON:()=>({width:e.width,height:e.height,fonts:(0,mobx_state_tree_1.getSnapshot)(e.fonts),pages:(0,mobx_state_tree_1.getSnapshot)(e.pages),audios:(0,mobx_state_tree_1.getSnapshot)(e.audios),unit:e.unit,dpi:e.dpi,custom:e.custom}),loadJSON(t,i=!1){var o;const a=Object.assign({},t),n=e.pages.indexOf(e.activePage);let s=null===(o=a.pages[n]||a.pages[0])||void 0===o?void 0:o.id;a._activePageId=s;const r=Object.assign({},(0,mobx_state_tree_1.getSnapshot)(e));Object.assign(r,a),r.history=i?e.history.toJSON():{history:[],undoIdx:-1},(0,mobx_state_tree_1.applySnapshot)(e,r)},clear({keepHistory:t=!1}={}){const i=e.pages.map((e=>e.id));e.deletePages(i),t||e.history.clear()},addFont(t){e.removeFont(t.fontFamily),e.fonts.push(t),e.loadFont(t.fontFamily)},removeFont(t){e.fonts.filter((e=>e.fontFamily===t)).forEach((e=>(0,mobx_state_tree_1.destroy)(e)))},addAudio(t){const i=audio_model_1.Audio.create(Object.assign({id:(0,nanoid_1.nanoid)(10)},t));e.audios.push(i)},removeAudio(t){const i=e.audios.find((e=>e.id===t));i&&e.audios.remove(i)},async loadFont(t){const i=e.fonts.find((e=>e.fontFamily===t))||fonts.globalFonts.find((e=>e.fontFamily===t));let o=[{fontStyle:"normal",fontWeight:"normal"}];return i?(i.styles&&(o=i.styles.map((e=>({fontStyle:e.fontStyle||"normal",fontWeight:e.fontWeight||"normal"})))),fonts.injectCustomFont(i)):fonts.injectGoogleFont(t),Promise.all(o.map((e=>fonts.loadFont(t,e.fontStyle,e.fontWeight))))},validate:e=>exports.Store.validate(e,[{path:"",type:exports.Store}]).map((e=>({path:"store"+e.context.map((e=>e.path)).join("."),message:e.message})))}))),exports.default=createStore;
1
+ "use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,t,o,i){void 0===i&&(i=o);var a=Object.getOwnPropertyDescriptor(t,o);a&&!("get"in a?!t.__esModule:a.writable||a.configurable)||(a={enumerable:!0,get:function(){return t[o]}}),Object.defineProperty(e,i,a)}:function(e,t,o,i){void 0===i&&(i=o),e[i]=t[o]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),__importStar=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var o in e)"default"!==o&&Object.prototype.hasOwnProperty.call(e,o)&&__createBinding(t,e,o);return __setModuleDefault(t,e),t},__rest=this&&this.__rest||function(e,t){var o={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(o[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(i=Object.getOwnPropertySymbols(e);a<i.length;a++)t.indexOf(i[a])<0&&Object.prototype.propertyIsEnumerable.call(e,i[a])&&(o[i[a]]=e[i[a]])}return o},__importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.Store=exports.Font=void 0,exports.createStore=createStore;const mobx_state_tree_1=require("mobx-state-tree"),history_1=require("./history"),nanoid_1=require("nanoid"),konva_1=__importDefault(require("konva")),download_1=require("../utils/download"),pdf_1=require("../utils/pdf"),gif_lib_1=require("../utils/gif-lib"),validate_key_1=require("../utils/validate-key"),fonts=__importStar(require("../utils/fonts")),loader_1=require("../utils/loader"),unit_1=require("../utils/unit"),deep_equal_1=require("../utils/deep-equal"),wait_1=require("../utils/wait"),html_1=require("../utils/html"),to_svg_1=require("../utils/to-svg"),page_model_1=require("./page-model"),group_model_1=require("./group-model"),audio_model_1=require("./audio-model");function createStore({key:e,showCredit:t}={key:"",showCredit:!1}){return exports.Store.create({_forceShowCredit:t,_key:e})}(0,mobx_state_tree_1.setLivelinessChecking)("ignore"),exports.Font=mobx_state_tree_1.types.model("Font",{fontFamily:mobx_state_tree_1.types.string,url:mobx_state_tree_1.types.optional(mobx_state_tree_1.types.string,""),styles:mobx_state_tree_1.types.frozen()}).preProcessSnapshot((e=>Object.assign(Object.assign({},e),{fontFamily:e.fontFamily||e.name}))),exports.Store=mobx_state_tree_1.types.model("Store",{role:"",pages:mobx_state_tree_1.types.array(page_model_1.Page),fonts:mobx_state_tree_1.types.array(exports.Font),audios:mobx_state_tree_1.types.array(audio_model_1.Audio),width:1080,height:1080,currentTime:0,isPlaying:!1,scale:1,scaleToFit:1,unit:"px",dpi:72,bleedVisible:!1,rulesVisible:!1,openedSidePanel:"",previousOpenedSidePanel:"",custom:mobx_state_tree_1.types.frozen(),selectedElementsIds:mobx_state_tree_1.types.array(mobx_state_tree_1.types.string),animatedElementsIds:mobx_state_tree_1.types.array(mobx_state_tree_1.types.string),history:mobx_state_tree_1.types.optional(history_1.UndoManager,{targetPath:"../pages"}),_elementsPixelRatio:Math.min(2,window.devicePixelRatio||1),_activePageId:"",_forceShowCredit:!1,_key:"",_validated:!1}).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 o of e.pages)for(const e of o.children)if(e.id===t)return e})).filter((e=>!!e))},get children(){return e.pages},get selectedShapes(){const t=[];return(0,group_model_1.forEveryChild)({children:e.selectedElements},(e=>{"group"!==e.type&&t.push(e)})),t},get activePage(){return e.pages.slice().find((t=>t.id===e._activePageId))||(e.pages.length?e.pages[0]:null)},get duration(){let t=0;return e.pages.forEach((e=>{t+=e.duration})),t},get _hasCroppedImages(){return e.find((e=>"image"===e.type&&e._cropModeEnabled))},find(t){let o;return(0,group_model_1.forEveryChild)({children:e.pages},(e=>{if(!o&&t(e))return o=e,!0})),o},getElementById:t=>e.find((e=>e.id===t))}))).actions((e=>{let t=0,o=null,i=!1;return{afterCreate(){e.history.canUndo},setCurrentTime(t){e.currentTime=t},play({animatedElementsIds:a=[],startTime:n=0,currentTime:s=0,endTime:r=e.duration,repeat:l=!1}={}){s&&(console.warn("currentTime property of store.play() is deprecated. Please use startTime instead."),n=s),e.animatedElementsIds=(0,mobx_state_tree_1.cast)(a),e.currentTime=n,e.isPlaying=!0,t=Date.now(),o=r,i=l,requestAnimationFrame(e.seek)},checkActivePage(){let t=0;for(const o of e.pages){if(e.currentTime>=o.startTime&&e.currentTime<o.startTime+o.duration){e.selectPage(o.id);break}t+=o.duration}},seek(){if(!e.isPlaying)return;const a=Date.now(),n=a-t;t=a,e.currentTime+=n,e.checkActivePage();const s=o||e.duration;e.isPlaying&&e.currentTime<s?requestAnimationFrame(e.seek):e.isPlaying&&i?(e.currentTime=0,requestAnimationFrame(e.seek)):e.stop()},stop(){e.isPlaying=!1,e.currentTime=0,e.animatedElementsIds=(0,mobx_state_tree_1.cast)([]),e.checkActivePage()}}})).actions((e=>({__(){e._validated||((0,validate_key_1.validateKey)(e._key,e._forceShowCredit),e._validated=!0)},set(t){Object.assign(e,t)},setUnit({unit:t,dpi:o}){e.unit=t||e.unit,e.dpi=o||e.dpi},setRole(t){e.role=t},addPage(t){const o=page_model_1.Page.create(Object.assign({id:(0,nanoid_1.nanoid)(10)},t));return e.pages.push(o),e._activePageId=o.id,o},selectPage(t){e._activePageId=t},selectElements(t){const o=t.map((t=>e.getElementById(t))).sort(((e,t)=>e.page.children.indexOf(e)-e.page.children.indexOf(t))).filter((e=>!!e)).map((e=>e.id));e.selectedElementsIds=(0,mobx_state_tree_1.cast)(o)},toggleBleed(t){e.bleedVisible=null!=t?t:!e.bleedVisible},toggleRulers(t){e.rulesVisible=null!=t?t:!e.rulesVisible},openSidePanel(t){e.openedSidePanel!==t&&(e.previousOpenedSidePanel=e.openedSidePanel,e.openedSidePanel=t)},setScale(t){e.scale=t},_setScaleToFit(t){e.scaleToFit=t},setElementsPixelRatio(t){e._elementsPixelRatio=t},setSize(t,o,i){e.pages.forEach((e=>{e.setSize({width:t,height:o,useMagic:i,softChange:!0})})),e.width=t,e.height=o},setPageZIndex(t,o){const i=e.pages.find((e=>e.id===t));i&&((0,mobx_state_tree_1.detach)(i),e.pages.remove(i),e.pages.splice(o,0,i))},deletePages(t){const o=e.pages.indexOf(e.activePage);t.forEach((t=>{const o=e.pages.find((e=>e.id===t));(0,mobx_state_tree_1.destroy)(o)}));const i=Math.min(e.pages.length-1,o),a=e.pages[i];a&&(e._activePageId=a.id),e.selectedElementsIds=(0,mobx_state_tree_1.cast)(e.selectedElementsIds.filter((t=>e.getElementById(t))))},groupElements(t){const o=t.map((t=>e.getElementById(t)));o.forEach((e=>{e&&(0,mobx_state_tree_1.detach)(e)}));const i=e.activePage,a={id:(0,nanoid_1.nanoid)(10),children:o,type:"group"};return i.children.push(a),e.selectedElementsIds=(0,mobx_state_tree_1.cast)([a.id]),a},ungroupElements(t){const o=t.map((t=>e.getElementById(t))),i=[];o.forEach((e=>{if(e&&"group"===e.type){const t=e.page,o=t.children.indexOf(e);e.children.forEach((e=>{i.push(e.id)})),e.children.forEach((e=>{(0,mobx_state_tree_1.detach)(e),t.children.push(e)})),t.children.splice(o,1)}})),e.selectedElementsIds=(0,mobx_state_tree_1.cast)(i)},deleteElements(t){const o=[];e.find((e=>(t.includes(e.id)&&o.push(e),!1))),o.forEach((e=>{(0,mobx_state_tree_1.destroy)(e)})),e.selectedElementsIds=(0,mobx_state_tree_1.cast)(e.selectedElementsIds.filter((t=>e.getElementById(t))))},on(t,o){if("change"===t){let t=e.toJSON();return(0,mobx_state_tree_1.onSnapshot)(e,(i=>{const a=e.toJSON();!(0,deep_equal_1.deepEqual)(t,a)&&(t=a,o(a))}))}},async _toCanvas({pixelRatio:t,ignoreBackground:o,pageId:i,mimeType:a,includeBleed:n,_skipTimeout:s,quickMode:r=!1}={}){var l;const d=t||1;i=i||(null===(l=e.pages[0])||void 0===l?void 0:l.id);const c=e.pages.find((e=>e.id===i));if(!c)throw new Error(`No page for export with id ${i}`);r?null==c||c.set({_forceMount:!0}):null==c||c.set({_exporting:!1});const p=await(0,wait_1.waitTillAvailable)((()=>konva_1.default.stages.find((e=>e.getAttr("pageId")===i))));if(!p)throw null==c||c.set({_forceMount:!1,_exporting:!1}),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.`);const u=!!p.findOne(".page-container"),_=e._elementsPixelRatio;d>e._elementsPixelRatio&&e.setElementsPixelRatio(d),await e.waitLoading({_skipTimeout:s});const g=p.findOne(".page-container");if(!g)throw e.setElementsPixelRatio(_),null==c||c.set({_forceMount:!1,_exporting:!1}),new Error(`Export is failed. Can't find page container. ${u}`);p.find("Transformer").forEach((e=>e.visible(!1))),g.find(".page-background").forEach((e=>e.shadowEnabled(!1))),g.find(".page-background").forEach((e=>e.strokeEnabled(!1))),g.find(".highlighter").forEach((e=>e.visible(!1)));const m=g.findOne(".page-background-group"),f=m.clip();m.clip({x:null,y:null,width:null,height:null});const h=g.findOne(".elements-container"),b=h.clip();h.clip({x:null,y:null,width:null,height:null});const y=g.find((e=>e.getAttr("hideInExport")));y.forEach((e=>{e.setAttr("oldVisible",e.visible()),e.hide()}));const x=g.find((e=>!e.visible()&&e.getAttr("editModeEnabled")));x.forEach((e=>{e.setAttr("oldVisible",e.visible()),e.show()})),o&&g.find(".page-background").forEach((e=>e.hide()));const v=n?c.bleed:0;let w=v;!e.bleedVisible&&n||(e.bleedVisible||n?e.bleedVisible&&n?w=0:e.bleedVisible&&!n&&(w=-c.bleed):w=0);const P=document.createElement("canvas");P.width=Math.round((c.computedWidth+2*v)*d),P.height=Math.round((c.computedHeight+2*v)*d);const E=P.getContext("2d");"image/jpeg"===a&&(E.fillStyle="white",E.fillRect(0,0,P.width,P.height));const S=g.scale();g.scale({x:1,y:1});const O=g.toCanvas({x:g.x()-w,y:g.y()-w,width:c.computedWidth+2*v,height:c.computedHeight+2*v,pixelRatio:d});return g.scale(S),E.drawImage(O,0,0,P.width,P.height),konva_1.default.Util.releaseCanvas(O),o&&g.find(".page-background").forEach((e=>e.show())),y.forEach((e=>{e.visible(e.getAttr("oldVisible"))})),x.forEach((e=>{e.visible(e.getAttr("oldVisible"))})),g.find(".page-background").forEach((e=>e.shadowEnabled(!0))),g.find(".page-background").forEach((e=>e.strokeEnabled(!0))),p.find("Transformer").forEach((e=>e.visible(!0))),g.find(".highlighter").forEach((e=>e.visible(!0))),m.clip(f),h.clip(b),e.setElementsPixelRatio(_),null==c||c.set({_exporting:!1,_forceMount:!1}),P},async toDataURL(t={}){var{mimeType:o,quality:i}=t,a=__rest(t,["mimeType","quality"]);const n=await e._toCanvas(Object.assign({mimeType:o},a)),s=n.toDataURL(o,i);return konva_1.default.Util.releaseCanvas(n),s},async toBlob(t={}){var{mimeType:o,quality:i}=t,a=__rest(t,["mimeType","quality"]);const n=await e._toCanvas(Object.assign({mimeType:o},a)),s=await new Promise((e=>{n.toBlob(e,o,i)}));return konva_1.default.Util.releaseCanvas(n),s},async saveAsImage(t={}){var{fileName:o}=t,i=__rest(t,["fileName"]);const a=i.mimeType||"image/png",n=a.split("/")[1];(0,download_1.downloadFile)(await e.toDataURL(i),o||"polotno."+n,a)},async _toPDF(t){const o=t.dpi||e.dpi,i=t.parallel||1,a=t.unit||("px"===e.unit?"mm":e.unit),n=t.pixelRatio||1,s=t.pageIds||e.pages.map((e=>e.id)),r=e.pages.filter((e=>s.includes(e.id))),l=await(0,pdf_1.getJsPDF)(),d=e=>(0,unit_1.pxToUnit)({px:e,unit:a,dpi:o}),c=t.cropMarkSize||0,p=d(c),u=r[0]||{},_=t.includeBleed?u.bleed:0,g=d(u.computedWidth+2*_+2*p),m=d(u.computedHeight+2*_+2*p);var f=new l({unit:a,orientation:g>m?"landscape":"portrait",format:[g,m],compress:!0,putOnlyUsedFonts:!0});f.deletePage(1);const h=((e,t)=>{for(var o=[],i=0;i<e.length;i+=t)o.push(e.slice(i,i+t));return o})(r,i);let b=0;for(const o of h){const i=o.map((async o=>{const i=t.includeBleed?o.bleed:0,a=o.computedWidth+2*i+2*c,r=o.computedHeight+2*i+2*c,l=d(a),p=d(r);let u=0,_=n;for(;u<10;){u+=1,2===u&&console.error("Polotno can not export PDF with current settings. Quality is automatically reduced.");const i=await e.toDataURL(Object.assign(Object.assign({},t),{pageId:o.id,pixelRatio:_}));if(i.length>20)return t.onProgress&&t.onProgress(++b/s.length*.9),{url:i,width:l,height:p,widthPx:a,heightPx:r};_*=.8}}));(await Promise.all(i)).forEach((({url:e,width:t,height:o,widthPx:i,heightPx:a})=>{f.addPage([t,o],t>o?"landscape":"portrait");const n=f.getCurrentPageInfo();n.pageContext.cropBox={bottomLeftX:c,bottomLeftY:c,topRightX:i-c,topRightY:a-c},n.pageContext.bleedBox={bottomLeftX:c+_,bottomLeftY:c+_,topRightX:i-c-_,topRightY:a-c-_},p&&(f.setLineWidth(d(1)),f.line(2*p,0,2*p,p),f.line(0,2*p,p,2*p),f.line(t-2*p,0,t-2*p,p),f.line(t,2*p,t-p,2*p),f.line(0,o-2*p,p,o-2*p),f.line(2*p,o,2*p,o-p),f.line(t,o-2*p,t-p,o-2*p),f.line(t-2*p,o,t-2*p,o-p)),f.addImage(e,p,p,t-2*p,o-2*p,void 0,"FAST")}))}return f},toPDFDataURL:async t=>(await e._toPDF(Object.assign({mimeType:"image/jpeg"},t))).output("datauristring"),async toGIFDataURL(t={}){const o=t.pixelRatio||1,i=await(0,gif_lib_1.createGIF)({width:e.width*o,height:e.height*o}),a=1e3/(t.fps||10),n=e.duration/a;for(let t=0;t<n-1;t++){const n=t*a||1;e.setCurrentTime(n);let s=0,r="";for(const t of e.pages)if(s+=t.duration,t.set({_rendering:s>n}),s>n){r=t.id;break}const l=await e._toCanvas({pixelRatio:o,pageId:r,_skipTimeout:!0});i.addFrame(l.getContext("2d"),{delay:a,copy:!0})}for(const t of e.pages)t.set({_rendering:!1});e.stop(),i.render();return new Promise((e=>{i.on("finished",(function(t){!function(e,t){var o=new FileReader;o.onload=function(e){t(e.target.result)},o.readAsDataURL(e)}(t,e)}))}))},async saveAsGIF(t={}){var{fileName:o}=t,i=__rest(t,["fileName"]);const a=await e.toGIFDataURL(i);(0,download_1.downloadFile)(a,o||"polotno.gif")},async toHTML({elementHook:t}={elementHook:void 0}){const o=e.toJSON();return(0,html_1.jsonToHTML)({json:o,elementHook:t})},async saveAsHTML({fileName:t}={}){const o=await e.toHTML(),i="data:text/html;base64,"+window.btoa(unescape(encodeURIComponent(o)));(0,download_1.downloadFile)(i,t||"polotno.html")},async toSVG({elementHook:t,pageId:o}={elementHook:void 0,pageId:void 0}){var i;const a=e.toJSON();o=o||(null===(i=a.pages[0])||void 0===i?void 0:i.id);const n=a.pages.find((e=>e.id===o));return(0,to_svg_1.jsonToSVG)({json:Object.assign(Object.assign({},a),{pages:[n]}),elementHook:t})},async saveAsSVG({fileName:t,elementHook:o,pageId:i}={}){const a=await e.toSVG({elementHook:o,pageId:i}),n="data:text/svg;base64,"+window.btoa(unescape(encodeURIComponent(a)));(0,download_1.downloadFile)(n,t||"polotno.svg")},async saveAsPDF(t={}){var{fileName:o}=t,i=__rest(t,["fileName"]);(await e._toPDF(Object.assign({mimeType:"image/jpeg"},i))).save(o||"polotno.pdf")},async waitLoading({_skipTimeout:e=!1}={}){e||await new Promise((e=>setTimeout(e,50))),await(0,loader_1.whenLoaded)()},toJSON:()=>({width:e.width,height:e.height,fonts:(0,mobx_state_tree_1.getSnapshot)(e.fonts),pages:(0,mobx_state_tree_1.getSnapshot)(e.pages),audios:(0,mobx_state_tree_1.getSnapshot)(e.audios),unit:e.unit,dpi:e.dpi,custom:e.custom}),loadJSON(t,o=!1){var i;const a=Object.assign({},t),n=e.pages.indexOf(e.activePage);let s=null===(i=a.pages[n]||a.pages[0])||void 0===i?void 0:i.id;a._activePageId=s;const r=Object.assign({},(0,mobx_state_tree_1.getSnapshot)(e));Object.assign(r,a),r.history=o?e.history.toJSON():{history:[],undoIdx:-1},(0,mobx_state_tree_1.applySnapshot)(e,r)},clear({keepHistory:t=!1}={}){const o=e.pages.map((e=>e.id));e.deletePages(o),t||e.history.clear()},addFont(t){e.removeFont(t.fontFamily),e.fonts.push(t),e.loadFont(t.fontFamily)},removeFont(t){e.fonts.filter((e=>e.fontFamily===t)).forEach((e=>(0,mobx_state_tree_1.destroy)(e)))},addAudio(t){const o=audio_model_1.Audio.create(Object.assign({id:(0,nanoid_1.nanoid)(10)},t));e.audios.push(o)},removeAudio(t){const o=e.audios.find((e=>e.id===t));o&&e.audios.remove(o)},async loadFont(t){const o=e.fonts.find((e=>e.fontFamily===t))||fonts.globalFonts.find((e=>e.fontFamily===t));let i=[{fontStyle:"normal",fontWeight:"normal"}];return o?(o.styles&&(i=o.styles.map((e=>({fontStyle:e.fontStyle||"normal",fontWeight:e.fontWeight||"normal"})))),fonts.injectCustomFont(o)):fonts.injectGoogleFont(t),Promise.all(i.map((e=>fonts.loadFont(t,e.fontStyle,e.fontWeight))))},validate:e=>exports.Store.validate(e,[{path:"",type:exports.Store}]).map((e=>({path:"store"+e.context.map((e=>e.path)).join("."),message:e.message})))}))),exports.default=createStore;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "polotno",
3
- "version": "2.14.5",
3
+ "version": "2.14.6",
4
4
  "description": "Design Editor Framework",
5
5
  "author": "Anton Lavrenov",
6
6
  "keywords": [