polotno 2.14.6 → 2.14.7

package/canvas/workspace-canvas.js

@@ -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,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;
+"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,o)=>{const l=react_1.default.useRef(!1),c=react_1.default.useRef(null),i=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 s=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||i.current)&&(i.current=!0,o=smoothScroll({element:a,scrollTop:n,onFinish:()=>{i.current=!1},duration:r.isPlaying?0:300})),o}),[r.activePage,s,r.isPlaying]);return{handleScroll:e=>{if(o)return;if(i.current)return;l.current=!0,clearTimeout(c.current),c.current=setTimeout((()=>{l.current=!1}),300);const t=e.currentTarget.childNodes[0].offsetHeight,n=e.currentTarget.scrollTop,s=Math.floor((n+a.height/3)/t),u=r.pages[s];u&&r.activePage!==u&&u.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,h),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/store.js

@@ -1 +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;
+"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:!0});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

@@ -1,6 +1,6 @@
 {
   "name": "polotno",
-  "version": "2.14.6",
+  "version": "2.14.7",
   "description": "Design Editor Framework",
   "author": "Anton Lavrenov",
   "keywords": [
@@ -70,7 +70,6 @@
     "@vitest/browser": "^1.6.0",
     "assert": "^2.1.0",
     "buffer": "^6.0.3",
-    "canvas": "^3.0.0-rc2",
     "jest-file-snapshot": "^0.5.0",
     "jsdom": "^24.1.0",
     "parcel": "^2.12.0",
@@ -91,13 +90,13 @@
   },
   "homepage": "https://polotno.com/",
   "scripts": {
-    "start": "PARCEL_WORKERS=0 parcel index.html --no-source-maps",
+    "start": "parcel index.html --no-source-maps",
     "clean": "rm -rf ./lib && rm -rf ./.parcel-cache",
     "tsc": "tsc --outDir ./lib --removeComments --sourceMap false --module CommonJS || echo \"tsc faild for some file(s).\"",
     "minify": "uglifyjs-folder ./lib -eo ./lib -x .js",
     "build": "npm run clean && npm run tsc && npm run minify && npm run build:bundle && cp ./package.json ./lib && cp ./README.md ./lib && cp ./LICENSE.md ./lib && npm run remove-test-from-lib",
     "remove-test-from-lib": "find . -name \"*.test.js\" -type f -exec rm -f {} \\;",
-    "build:bundle": "PARCEL_WORKERS=0 parcel build && rm -f ./lib/polotno.bundle.js.map",
+    "build:bundle": "parcel build && rm -f ./lib/polotno.bundle.js.map",
     "size": "npm run build && size-limit",
     "test": "vitest",
     "test:watch": "jest --watch"