polotno 2.40.2 → 2.41.0

package/canvas/workspace-canvas.js

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

package/model/group-model.d.ts

@@ -10,6 +10,19 @@ import { GifElementType } from './gif-model.js';
 import { TableElementType } from './table-model.js';
 export declare const forEveryChild: (node: any, cb: any) => void;
 export declare const forEveryNode: (node: any, cb: any) => void;
+export declare function zIndexOps(self: {
+    children: any;
+}): {
+    canMoveElementsUp(ids: Array<string>): boolean;
+    canMoveElementsTop(ids: Array<string>): boolean;
+    canMoveElementsDown(ids: Array<string>): boolean;
+    canMoveElementsBottom(ids: Array<string>): boolean;
+    moveElementsUp(ids: Array<string>): void;
+    moveElementsDown(ids: Array<string>): void;
+    moveElementsTop(ids: Array<string>): void;
+    moveElementsBottom(ids: Array<string>): void;
+    setElementZIndex(id: string, zIndex: number): void;
+};
 export declare const ElementTypes: any;
 type ElementUnion = (SVGElementType & {
     type: 'svg';
@@ -364,18 +377,7 @@ export declare const TYPES_MAP: {
         set(attrs: any): void;
         afterCreate(): void;
         toggleEditMode(editing?: boolean): void;
-    }, import("mobx-state-tree").ModelCreationType<{
-        id: string;
-        type: string | undefined;
-        name: string | undefined;
-        opacity: number | undefined;
-        custom: any;
-        visible: boolean | undefined;
-        selectable: boolean | undefined;
-        removable: boolean | undefined;
-        alwaysOnTop: boolean | undefined;
-        showInExport: boolean | undefined;
-    }>, import("mobx-state-tree").ModelSnapshotType<{
+    }, any, import("mobx-state-tree").ModelSnapshotType<{
         id: import("mobx-state-tree").ISimpleType<string>;
         type: import("mobx-state-tree").IType<string | undefined, string, string>;
         name: import("mobx-state-tree").IType<string | undefined, string, string>;
@@ -1384,6 +1386,12 @@ export declare const TYPES_MAP: {
             readonly cellPadding: number;
             readonly width: number;
             readonly height: number;
+            readonly borderInsets: {
+                top: number;
+                right: number;
+                bottom: number;
+                left: number;
+            };
             readonly a: {
                 x: number;
                 y: number;

package/model/group-model.js

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

package/model/node-model.js

@@ -1 +1 @@
-import{types as e,getParentOfType as t,getSnapshot as o,hasParentOfType as n}from"mobx-state-tree";import{nanoid as r}from"nanoid";import{Store as s}from"./store.js";import{Page as i}from"./page-model.js";import{GroupElement as m,forEveryNode as p}from"./group-model.js";export const Node=e.model("Node",{id:e.identifier,type:"none",name:"",opacity:1,custom:e.frozen(),visible:!0,selectable:!0,removable:!0,alwaysOnTop:!1,showInExport:!0}).preProcessSnapshot(e=>{for(var t in e){null===e[t]&&(e[t]=void 0)}return e}).postProcessSnapshot(e=>{const t=Object.assign({},e),o={};for(var n in t){"_"!==n[0]&&(o[n]=e[n])}return o}).views(e=>({get page(){return t(e,i)},get store(){return t(e,s)},get top(){let o=e;for(;;){if(!n(o,m)){return o}o=t(o,m)}},get parent(){if(n(e,m)){const o=t(e,m);return o&&o.children&&o.children.length,o}if(n(e,i)){const o=t(e,i);return o&&o.children&&o.children.length,o}if(n(e,s)){const o=t(e,s);return o&&o.pages&&o.pages.length,o}return null},get zIndex(){return e.parent.children.indexOf(e)}})).actions(e=>({toJSON:()=>Object.assign({},o(e))})).actions(e=>({clone(t={},{skipSelect:o=!1}={}){const n=JSON.parse(JSON.stringify(e.toJSON()));t.id=t.id||r(10);const s=new Map;return p(n,e=>{const t=e.id,o=r(10);s.set(t,o),e.id=o}),p(n,e=>{e.mergedInto&&s.has(e.mergedInto)&&(e.mergedInto=s.get(e.mergedInto))}),Object.assign(n,t),e.page.addElement(n,{skipSelect:o})},set(t){Object.assign(e,t)},moveUp(){e.page.moveElementsUp([e.id])},moveTop(){e.page.moveElementsTop([e.id])},moveDown(){e.page.moveElementsDown([e.id])},moveBottom(){e.page.moveElementsBottom([e.id])},setZIndex(t){e.parent.setElementZIndex(e.id,t)},beforeDestroy(){}}));
+import{types as e,getParentOfType as t,getSnapshot as n,hasParentOfType as o}from"mobx-state-tree";import{nanoid as r}from"nanoid";import{Store as s}from"./store.js";import{Page as i}from"./page-model.js";import{GroupElement as a,forEveryNode as l}from"./group-model.js";export const Node=e.model("Node",{id:e.identifier,type:"none",name:"",opacity:1,custom:e.frozen(),visible:!0,selectable:!0,removable:!0,alwaysOnTop:!1,showInExport:!0}).preProcessSnapshot(e=>{for(var t in e){null===e[t]&&(e[t]=void 0)}return e}).postProcessSnapshot(e=>{const t=Object.assign({},e),n={};for(var o in t){"_"!==o[0]&&(n[o]=e[o])}return n}).views(e=>({get page(){return t(e,i)},get store(){return t(e,s)},get top(){let n=e;for(;;){if(!o(n,a)){return n}n=t(n,a)}},get parent(){if(o(e,a)){const n=t(e,a);return n&&n.children&&n.children.length,n}if(o(e,i)){const n=t(e,i);return n&&n.children&&n.children.length,n}if(o(e,s)){const n=t(e,s);return n&&n.pages&&n.pages.length,n}return null},get zIndex(){return e.parent.children.indexOf(e)}})).actions(e=>({toJSON:()=>Object.assign({},n(e))})).actions(e=>({clone(t={},{skipSelect:n=!1}={}){const o=JSON.parse(JSON.stringify(e.toJSON()));t.id=t.id||r(10);const s=new Map;return l(o,e=>{const t=e.id,n=r(10);s.set(t,n),e.id=n}),l(o,e=>{e.mergedInto&&s.has(e.mergedInto)&&(e.mergedInto=s.get(e.mergedInto))}),Object.assign(o,t),e.page.addElement(o,{skipSelect:n})},set(t){Object.assign(e,t)},moveUp(){var t;null===(t=e.parent)||void 0===t||t.moveElementsUp([e.id])},moveTop(){var t;null===(t=e.parent)||void 0===t||t.moveElementsTop([e.id])},moveDown(){var t;null===(t=e.parent)||void 0===t||t.moveElementsDown([e.id])},moveBottom(){var t;null===(t=e.parent)||void 0===t||t.moveElementsBottom([e.id])},setZIndex(t){e.parent.setElementZIndex(e.id,t)},beforeDestroy(){}}));

package/model/page-model.d.ts

@@ -23,9 +23,22 @@ export declare const Page: import("mobx-state-tree").IModelType<{
     readonly computedHeight: any;
 } & {
     toJSON(): any;
-    _forEachElementUp(ids: Array<string>, callback: Function): void;
-    _forEachElementDown(ids: Array<string>, callback: Function): false;
 } & {
+    setSize({ width, height, useMagic, softChange, }: {
+        width: number;
+        height: number;
+        useMagic?: boolean;
+        softChange?: boolean;
+    }): void;
+    canMoveElementsUp(ids: Array<string>): boolean;
+    canMoveElementsTop(ids: Array<string>): boolean;
+    canMoveElementsDown(ids: Array<string>): boolean;
+    canMoveElementsBottom(ids: Array<string>): boolean;
+    moveElementsUp(ids: Array<string>): void;
+    moveElementsDown(ids: Array<string>): void;
+    moveElementsTop(ids: Array<string>): void;
+    moveElementsBottom(ids: Array<string>): void;
+    setElementZIndex(id: string, zIndex: number): void;
     clone(attrs?: {}): any;
     setZIndex(zIndex: any): void;
     set(attrs: any): void;
@@ -39,21 +52,6 @@ export declare const Page: import("mobx-state-tree").IModelType<{
     }): T extends ElementType["type"] ? Extract<ElementType, {
         type: T;
     }> : NodeType;
-    canMoveElementsUp(ids: Array<string>): boolean;
-    moveElementsUp(ids: Array<string>): void;
-    canMoveElementsTop(ids: Array<string>): boolean;
-    moveElementsTop(ids: Array<string>): void;
-    canMoveElementsDown(ids: Array<string>): boolean;
-    moveElementsDown(ids: Array<string>): void;
-    canMoveElementsBottom(ids: Array<string>): boolean;
-    moveElementsBottom(ids: Array<string>): void;
-    setElementZIndex(id: any, zIndex: any): void;
-    setSize({ width, height, useMagic, softChange, }: {
-        width: number;
-        height: number;
-        useMagic?: boolean;
-        softChange?: boolean;
-    }): void;
 } & {
     moveElementUp(id: any): void;
     moveElementDown(id: any): void;

package/model/page-model.js

@@ -1 +1 @@
-import{detach as e,getParentOfType as t,getSnapshot as n,types as o}from"mobx-state-tree";import{nanoid as i}from"nanoid";import{ElementTypes as r,forEveryChild as d,forEveryNode as s,TYPES_MAP as c}from"./group-model.js";import{Store as a}from"./store.js";import{getTotalClientRect as l}from"../utils/math.js";export const Page=o.model("Page",{id:o.identifier,children:o.array(o.late(()=>r)),width:o.optional(o.union(o.number,o.literal("auto")),"auto"),height:o.optional(o.union(o.number,o.literal("auto")),"auto"),background:"white",bleed:0,custom:o.frozen(),duration:5e3,_exporting:!1,_rendering:!1,_forceMount:!1}).postProcessSnapshot(e=>{const t=Object.assign({},e),n={};for(var o in t){"_"!==o[0]&&(n[o]=e[o])}return n}).views(e=>({get store(){return t(e,a)}})).views(e=>({get startTime(){let t=0;for(const n of e.store.pages){if(n.id===e.id){return t}t+=n.duration}return t},get _exportingOrRendering(){return e._exporting||e._rendering}})).views(e=>({get computedWidth(){return"auto"===e.width?e.store.width:e.width},get computedHeight(){return"auto"===e.height?e.store.height:e.height}})).actions(e=>({toJSON:()=>JSON.parse(JSON.stringify(n(e))),_forEachElementUp(t,n){const o=t.map(t=>({id:t,index:e.children.findIndex(e=>e.id===t)}));o.sort((e,t)=>t.index-e.index);for(const{index:i}of o){if(-1==i){continue}const o=i<e.children.length-1&&e.children[i+1],r=t.indexOf(null==o?void 0:o.id)>=0;i===e.children.length-1||r||n(i)}},_forEachElementDown(t,n){const o=t.map(t=>({id:t,index:e.children.findIndex(e=>e.id===t)}));o.sort((e,t)=>e.index-t.index);for(const{index:i}of o){if(-1==i){continue}const o=i>0&&e.children[i-1],r=t.indexOf(null==o?void 0:o.id)>=0;0===i||r||n(i)}return!1}})).actions(t=>{const n={clone(e={}){const n=t.toJSON(),o=new Map;n.children.forEach(e=>{const t=e.id,n=i(10);o.set(t,n),e.id=n,s(e,e=>{const t=e.id,n=i(10);o.set(t,n),e.id=n})}),n.children.forEach(e=>{e.cells&&e.cells.forEach(e=>{e.mergedInto&&o.has(e.mergedInto)&&(e.mergedInto=o.get(e.mergedInto))})});const r=Object.assign(Object.assign(Object.assign({},n),{id:i(10)}),e),d=t.store.addPage(r),c=t.store.pages.indexOf(t);return d.setZIndex(c+1),d.select(),d},setZIndex(e){t.store.setPageZIndex(t.id,e)},set(e){Object.assign(t,e)},select(){t.store.selectPage(t.id)},addElement(e,{skipSelect:n=!1}={}){const o=c[e.type];if(!o){return void console.error("Can not find model with type "+e.type)}"children"in e&&Array.isArray(e.children)&&s(e,e=>{e.id=e.id||i(10)});const r=t.children.reduce((t,n)=>{if("group"===n.type){const o=n.children.reduce((t,n)=>{var o;const i=null===(o=n.name)||void 0===o?void 0:o.match(new RegExp(`${e.type}-(\\d+)`));if(i){const e=parseInt(i[1],10);return Math.max(t,e||0)}},0);return Math.max(t,o||0)}{const o=n.name.match(new RegExp(`${e.type}-(\\d+)`));if(o){const e=parseInt(o[1],10);return Math.max(t,e||0)}}return t},0),d=o.create(Object.assign({id:i(10),name:`${e.type}-${r+1}`},e));return t.children.push(d),d.selectable&&!n&&t.store.selectElements([d.id]),d},canMoveElementsUp(e){let n=!1;return t._forEachElementUp(e,()=>{n=n||!0}),n},moveElementsUp(n){t._forEachElementUp(n,n=>{const o=t.children[n];e(o),t.children.splice(n+1,0,o)})},canMoveElementsTop:e=>n.canMoveElementsUp(e),moveElementsTop(e){const n=[],o=[];t.children.forEach(t=>{e.indexOf(t.id)>=0?n.push(t):o.push(t)}),t.children.replace(o.concat(n))},canMoveElementsDown(e){let n=!1;return t._forEachElementDown(e,()=>{n=n||!0}),n},moveElementsDown(n){t._forEachElementDown(n,n=>{const o=t.children[n];e(o),t.children.splice(n-1,0,o)})},canMoveElementsBottom:e=>n.canMoveElementsDown(e),moveElementsBottom(e){const n=[],o=[];t.children.forEach(t=>{e.indexOf(t.id)>=0?n.push(t):o.push(t)}),t.children.replace(n.concat(o))},setElementZIndex(n,o){const i=t.children.find(e=>e.id===n);i&&(e(i),t.children.remove(i),t.children.splice(o,0,i))},setSize({width:e,height:n,useMagic:o,softChange:i}){if(o){const o=[],i=e=>"image"===e.type&&e.x<1&&e.y<1&&e.width>=t.computedWidth-2&&e.height>=t.computedHeight-2;d(t,e=>{"group"!==e.type&&(i(e)||o.push(e))});const r=o.length?l(o):{x:0,y:0,width:t.computedWidth,height:t.computedHeight},s=1/4,c=Math.max(0,Math.min(r.x,t.computedWidth-r.x-r.width)),a=t.computedWidth*s,h=Math.max(0,c-a),m=Math.max(0,Math.min(r.y,t.computedHeight-r.y-r.height)),p=t.computedHeight*s,g=Math.max(0,m-p),u=t.computedWidth-2*h,f=t.computedHeight-2*g,E=e/u,x=n/f,v=Math.min(E,x),w=(e-u*v)/2-h*v,y=(n-f*v)/2-g*v;d(t,e=>{var t;if("group"!==e.type){if(i(e)){e.set({x:e.x*v,y:e.y*v,width:e.width*E,height:e.height*x,cropX:0,cropY:0,cropWidth:1,cropHeight:1})}else if(e.set({x:w+e.x*v,y:y+e.y*v,width:e.width*v,height:e.height*v}),"text"===e.type){e.set({fontSize:e.fontSize*v})}else if("figure"===e.type){e.set({strokeWidth:e.strokeWidth*v})}else if("table"===e.type){e.set({borderWidth:e.borderWidth*v});for(const n of e.cells){const e={fontSize:n.fontSize*v,cellPadding:n.cellPadding*v};if(n.borders){const o=JSON.parse(JSON.stringify(n.borders));for(const e of["top","right","bottom","left"]){null!=(null===(t=o[e])||void 0===t?void 0:t.width)&&(o[e]=Object.assign(Object.assign({},o[e]),{width:o[e].width*v}))}e.borders=o}n.set(e)}}}})}i||(t.width=e),i||(t.height=n)}};return n}).actions(e=>({moveElementUp(t){console.warn("page.moveElementUp(id) is deprecated. Please use page.moveElementsUp([id1, id2]) instead."),e.moveElementsUp([t])},moveElementDown(t){console.warn("page.moveElementDown(id) is deprecated. Please use page.moveElementsDown([id1, id2]) instead."),e.moveElementsDown([t])},moveElementTop(t){console.warn("page.moveElementTop(id) is deprecated. Please use page.moveElementsTop([id1, id2]) instead."),e.moveElementsTop([t])},moveElementBottom(t){console.warn("page.moveElementBottom(id) is deprecated. Please use page.moveElementsBottom([id1, id2]) instead."),e.moveElementsBottom([t])},play(){e.store.play({startTime:e.startTime,endTime:e.startTime+e.duration})}}));
+import{getParentOfType as e,getSnapshot as t,types as i}from"mobx-state-tree";import{nanoid as o}from"nanoid";import{ElementTypes as n,forEveryChild as r,forEveryNode as s,TYPES_MAP as d,zIndexOps as a}from"./group-model.js";import{Store as m}from"./store.js";import{getTotalClientRect as h}from"../utils/math.js";export const Page=i.model("Page",{id:i.identifier,children:i.array(i.late(()=>n)),width:i.optional(i.union(i.number,i.literal("auto")),"auto"),height:i.optional(i.union(i.number,i.literal("auto")),"auto"),background:"white",bleed:0,custom:i.frozen(),duration:5e3,_exporting:!1,_rendering:!1,_forceMount:!1}).postProcessSnapshot(e=>{const t=Object.assign({},e),i={};for(var o in t){"_"!==o[0]&&(i[o]=e[o])}return i}).views(t=>({get store(){return e(t,m)}})).views(e=>({get startTime(){let t=0;for(const i of e.store.pages){if(i.id===e.id){return t}t+=i.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(t(e)))})).actions(e=>Object.assign(Object.assign({clone(t={}){const i=e.toJSON(),n=new Map;i.children.forEach(e=>{const t=e.id,i=o(10);n.set(t,i),e.id=i,s(e,e=>{const t=e.id,i=o(10);n.set(t,i),e.id=i})}),i.children.forEach(e=>{e.cells&&e.cells.forEach(e=>{e.mergedInto&&n.has(e.mergedInto)&&(e.mergedInto=n.get(e.mergedInto))})});const r=Object.assign(Object.assign(Object.assign({},i),{id:o(10)}),t),d=e.store.addPage(r),a=e.store.pages.indexOf(e);return d.setZIndex(a+1),d.select(),d},setZIndex(t){e.store.setPageZIndex(e.id,t)},set(t){Object.assign(e,t)},select(){e.store.selectPage(e.id)},addElement(t,{skipSelect:i=!1}={}){const n=d[t.type];if(!n){return void console.error("Can not find model with type "+t.type)}"children"in t&&Array.isArray(t.children)&&s(t,e=>{e.id=e.id||o(10)});const r=e.children.reduce((e,i)=>{if("group"===i.type){const o=i.children.reduce((e,i)=>{var o;const n=null===(o=i.name)||void 0===o?void 0:o.match(new RegExp(`${t.type}-(\\d+)`));if(n){const t=parseInt(n[1],10);return Math.max(e,t||0)}},0);return Math.max(e,o||0)}{const o=i.name.match(new RegExp(`${t.type}-(\\d+)`));if(o){const t=parseInt(o[1],10);return Math.max(e,t||0)}}return e},0),a=n.create(Object.assign({id:o(10),name:`${t.type}-${r+1}`},t));return e.children.push(a),a.selectable&&!i&&e.store.selectElements([a.id]),a}},a(e)),{setSize({width:t,height:i,useMagic:o,softChange:n}){if(o){const o=[],n=t=>"image"===t.type&&t.x<1&&t.y<1&&t.width>=e.computedWidth-2&&t.height>=e.computedHeight-2;r(e,e=>{"group"!==e.type&&(n(e)||o.push(e))});const s=o.length?h(o):{x:0,y:0,width:e.computedWidth,height:e.computedHeight},d=1/4,a=Math.max(0,Math.min(s.x,e.computedWidth-s.x-s.width)),m=e.computedWidth*d,c=Math.max(0,a-m),p=Math.max(0,Math.min(s.y,e.computedHeight-s.y-s.height)),l=e.computedHeight*d,g=Math.max(0,p-l),u=e.computedWidth-2*c,f=e.computedHeight-2*g,w=t/u,y=i/f,v=Math.min(w,y),x=(t-u*v)/2-c*v,b=(i-f*v)/2-g*v;r(e,e=>{var t;if("group"!==e.type){if(n(e)){e.set({x:e.x*v,y:e.y*v,width:e.width*w,height:e.height*y,cropX:0,cropY:0,cropWidth:1,cropHeight:1})}else if(e.set({x:x+e.x*v,y:b+e.y*v,width:e.width*v,height:e.height*v}),"text"===e.type){e.set({fontSize:e.fontSize*v})}else if("figure"===e.type){e.set({strokeWidth:e.strokeWidth*v})}else if("table"===e.type){e.set({borderWidth:e.borderWidth*v});for(const i of e.cells){const e={fontSize:i.fontSize*v,cellPadding:i.cellPadding*v};if(i.borders){const o=JSON.parse(JSON.stringify(i.borders));for(const e of["top","right","bottom","left"]){null!=(null===(t=o[e])||void 0===t?void 0:t.width)&&(o[e]=Object.assign(Object.assign({},o[e]),{width:o[e].width*v}))}e.borders=o}i.set(e)}}}})}n||(e.width=t),n||(e.height=i)}})).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

@@ -30,6 +30,7 @@ export interface ImageExportOptions extends ExportOptions {
 }
 export interface GifExportOptions extends ExportOptions {
     fps?: number;
+    pageIds?: Array<string>;
 }
 export interface PDFExportOptions extends ExportOptions {
     dpi?: number;
@@ -71,9 +72,22 @@ export declare const Store: import("mobx-state-tree").IModelType<{
         readonly computedHeight: any;
     } & {
         toJSON(): any;
-        _forEachElementUp(ids: Array<string>, callback: Function): void;
-        _forEachElementDown(ids: Array<string>, callback: Function): false;
     } & {
+        setSize({ width, height, useMagic, softChange, }: {
+            width: number;
+            height: number;
+            useMagic?: boolean;
+            softChange?: boolean;
+        }): void;
+        canMoveElementsUp(ids: Array<string>): boolean;
+        canMoveElementsTop(ids: Array<string>): boolean;
+        canMoveElementsDown(ids: Array<string>): boolean;
+        canMoveElementsBottom(ids: Array<string>): boolean;
+        moveElementsUp(ids: Array<string>): void;
+        moveElementsDown(ids: Array<string>): void;
+        moveElementsTop(ids: Array<string>): void;
+        moveElementsBottom(ids: Array<string>): void;
+        setElementZIndex(id: string, zIndex: number): void;
         clone(attrs?: {}): any;
         setZIndex(zIndex: any): void;
         set(attrs: any): void;
@@ -87,21 +101,6 @@ export declare const Store: import("mobx-state-tree").IModelType<{
         }): T extends ElementType["type"] ? Extract<ElementType, {
             type: T;
         }> : NodeType;
-        canMoveElementsUp(ids: Array<string>): boolean;
-        moveElementsUp(ids: Array<string>): void;
-        canMoveElementsTop(ids: Array<string>): boolean;
-        moveElementsTop(ids: Array<string>): void;
-        canMoveElementsDown(ids: Array<string>): boolean;
-        moveElementsDown(ids: Array<string>): void;
-        canMoveElementsBottom(ids: Array<string>): boolean;
-        moveElementsBottom(ids: Array<string>): void;
-        setElementZIndex(id: any, zIndex: any): void;
-        setSize({ width, height, useMagic, softChange, }: {
-            width: number;
-            height: number;
-            useMagic?: boolean;
-            softChange?: boolean;
-        }): void;
     } & {
         moveElementUp(id: any): void;
         moveElementDown(id: any): void;
@@ -215,9 +214,22 @@ export declare const Store: import("mobx-state-tree").IModelType<{
         readonly computedHeight: any;
     } & {
         toJSON(): any;
-        _forEachElementUp(ids: Array<string>, callback: Function): void;
-        _forEachElementDown(ids: Array<string>, callback: Function): false;
     } & {
+        setSize({ width, height, useMagic, softChange, }: {
+            width: number;
+            height: number;
+            useMagic?: boolean;
+            softChange?: boolean;
+        }): void;
+        canMoveElementsUp(ids: Array<string>): boolean;
+        canMoveElementsTop(ids: Array<string>): boolean;
+        canMoveElementsDown(ids: Array<string>): boolean;
+        canMoveElementsBottom(ids: Array<string>): boolean;
+        moveElementsUp(ids: Array<string>): void;
+        moveElementsDown(ids: Array<string>): void;
+        moveElementsTop(ids: Array<string>): void;
+        moveElementsBottom(ids: Array<string>): void;
+        setElementZIndex(id: string, zIndex: number): void;
         clone(attrs?: {}): any;
         setZIndex(zIndex: any): void;
         set(attrs: any): void;
@@ -231,21 +243,6 @@ export declare const Store: import("mobx-state-tree").IModelType<{
         }): T extends ElementType["type"] ? Extract<ElementType, {
             type: T;
         }> : NodeType;
-        canMoveElementsUp(ids: Array<string>): boolean;
-        moveElementsUp(ids: Array<string>): void;
-        canMoveElementsTop(ids: Array<string>): boolean;
-        moveElementsTop(ids: Array<string>): void;
-        canMoveElementsDown(ids: Array<string>): boolean;
-        moveElementsDown(ids: Array<string>): void;
-        canMoveElementsBottom(ids: Array<string>): boolean;
-        moveElementsBottom(ids: Array<string>): void;
-        setElementZIndex(id: any, zIndex: any): void;
-        setSize({ width, height, useMagic, softChange, }: {
-            width: number;
-            height: number;
-            useMagic?: boolean;
-            softChange?: boolean;
-        }): void;
     } & {
         moveElementUp(id: any): void;
         moveElementDown(id: any): void;
@@ -274,9 +271,22 @@ export declare const Store: import("mobx-state-tree").IModelType<{
         readonly computedHeight: any;
     } & {
         toJSON(): any;
-        _forEachElementUp(ids: Array<string>, callback: Function): void;
-        _forEachElementDown(ids: Array<string>, callback: Function): false;
     } & {
+        setSize({ width, height, useMagic, softChange, }: {
+            width: number;
+            height: number;
+            useMagic?: boolean;
+            softChange?: boolean;
+        }): void;
+        canMoveElementsUp(ids: Array<string>): boolean;
+        canMoveElementsTop(ids: Array<string>): boolean;
+        canMoveElementsDown(ids: Array<string>): boolean;
+        canMoveElementsBottom(ids: Array<string>): boolean;
+        moveElementsUp(ids: Array<string>): void;
+        moveElementsDown(ids: Array<string>): void;
+        moveElementsTop(ids: Array<string>): void;
+        moveElementsBottom(ids: Array<string>): void;
+        setElementZIndex(id: string, zIndex: number): void;
         clone(attrs?: {}): any;
         setZIndex(zIndex: any): void;
         set(attrs: any): void;
@@ -290,21 +300,6 @@ export declare const Store: import("mobx-state-tree").IModelType<{
         }): T extends ElementType["type"] ? Extract<ElementType, {
             type: T;
         }> : NodeType;
-        canMoveElementsUp(ids: Array<string>): boolean;
-        moveElementsUp(ids: Array<string>): void;
-        canMoveElementsTop(ids: Array<string>): boolean;
-        moveElementsTop(ids: Array<string>): void;
-        canMoveElementsDown(ids: Array<string>): boolean;
-        moveElementsDown(ids: Array<string>): void;
-        canMoveElementsBottom(ids: Array<string>): boolean;
-        moveElementsBottom(ids: Array<string>): void;
-        setElementZIndex(id: any, zIndex: any): void;
-        setSize({ width, height, useMagic, softChange, }: {
-            width: number;
-            height: number;
-            useMagic?: boolean;
-            softChange?: boolean;
-        }): void;
     } & {
         moveElementUp(id: any): void;
         moveElementDown(id: any): void;
@@ -621,9 +616,22 @@ export declare const Store: import("mobx-state-tree").IModelType<{
         readonly computedHeight: any;
     } & {
         toJSON(): any;
-        _forEachElementUp(ids: Array<string>, callback: Function): void;
-        _forEachElementDown(ids: Array<string>, callback: Function): false;
     } & {
+        setSize({ width, height, useMagic, softChange, }: {
+            width: number;
+            height: number;
+            useMagic?: boolean;
+            softChange?: boolean;
+        }): void;
+        canMoveElementsUp(ids: Array<string>): boolean;
+        canMoveElementsTop(ids: Array<string>): boolean;
+        canMoveElementsDown(ids: Array<string>): boolean;
+        canMoveElementsBottom(ids: Array<string>): boolean;
+        moveElementsUp(ids: Array<string>): void;
+        moveElementsDown(ids: Array<string>): void;
+        moveElementsTop(ids: Array<string>): void;
+        moveElementsBottom(ids: Array<string>): void;
+        setElementZIndex(id: string, zIndex: number): void;
         clone(attrs?: {}): any;
         setZIndex(zIndex: any): void;
         set(attrs: any): void;
@@ -637,21 +645,6 @@ export declare const Store: import("mobx-state-tree").IModelType<{
         }): T extends ElementType["type"] ? Extract<ElementType, {
             type: T;
         }> : NodeType;
-        canMoveElementsUp(ids: Array<string>): boolean;
-        moveElementsUp(ids: Array<string>): void;
-        canMoveElementsTop(ids: Array<string>): boolean;
-        moveElementsTop(ids: Array<string>): void;
-        canMoveElementsDown(ids: Array<string>): boolean;
-        moveElementsDown(ids: Array<string>): void;
-        canMoveElementsBottom(ids: Array<string>): boolean;
-        moveElementsBottom(ids: Array<string>): void;
-        setElementZIndex(id: any, zIndex: any): void;
-        setSize({ width, height, useMagic, softChange, }: {
-            width: number;
-            height: number;
-            useMagic?: boolean;
-            softChange?: boolean;
-        }): void;
     } & {
         moveElementUp(id: any): void;
         moveElementDown(id: any): void;
@@ -680,9 +673,22 @@ export declare const Store: import("mobx-state-tree").IModelType<{
         readonly computedHeight: any;
     } & {
         toJSON(): any;
-        _forEachElementUp(ids: Array<string>, callback: Function): void;
-        _forEachElementDown(ids: Array<string>, callback: Function): false;
     } & {
+        setSize({ width, height, useMagic, softChange, }: {
+            width: number;
+            height: number;
+            useMagic?: boolean;
+            softChange?: boolean;
+        }): void;
+        canMoveElementsUp(ids: Array<string>): boolean;
+        canMoveElementsTop(ids: Array<string>): boolean;
+        canMoveElementsDown(ids: Array<string>): boolean;
+        canMoveElementsBottom(ids: Array<string>): boolean;
+        moveElementsUp(ids: Array<string>): void;
+        moveElementsDown(ids: Array<string>): void;
+        moveElementsTop(ids: Array<string>): void;
+        moveElementsBottom(ids: Array<string>): void;
+        setElementZIndex(id: string, zIndex: number): void;
         clone(attrs?: {}): any;
         setZIndex(zIndex: any): void;
         set(attrs: any): void;
@@ -696,21 +702,6 @@ export declare const Store: import("mobx-state-tree").IModelType<{
         }): T extends ElementType["type"] ? Extract<ElementType, {
             type: T;
         }> : NodeType;
-        canMoveElementsUp(ids: Array<string>): boolean;
-        moveElementsUp(ids: Array<string>): void;
-        canMoveElementsTop(ids: Array<string>): boolean;
-        moveElementsTop(ids: Array<string>): void;
-        canMoveElementsDown(ids: Array<string>): boolean;
-        moveElementsDown(ids: Array<string>): void;
-        canMoveElementsBottom(ids: Array<string>): boolean;
-        moveElementsBottom(ids: Array<string>): void;
-        setElementZIndex(id: any, zIndex: any): void;
-        setSize({ width, height, useMagic, softChange, }: {
-            width: number;
-            height: number;
-            useMagic?: boolean;
-            softChange?: boolean;
-        }): void;
     } & {
         moveElementUp(id: any): void;
         moveElementDown(id: any): void;
@@ -740,9 +731,22 @@ export declare const Store: import("mobx-state-tree").IModelType<{
         readonly computedHeight: any;
     } & {
         toJSON(): any;
-        _forEachElementUp(ids: Array<string>, callback: Function): void;
-        _forEachElementDown(ids: Array<string>, callback: Function): false;
     } & {
+        setSize({ width, height, useMagic, softChange, }: {
+            width: number;
+            height: number;
+            useMagic?: boolean;
+            softChange?: boolean;
+        }): void;
+        canMoveElementsUp(ids: Array<string>): boolean;
+        canMoveElementsTop(ids: Array<string>): boolean;
+        canMoveElementsDown(ids: Array<string>): boolean;
+        canMoveElementsBottom(ids: Array<string>): boolean;
+        moveElementsUp(ids: Array<string>): void;
+        moveElementsDown(ids: Array<string>): void;
+        moveElementsTop(ids: Array<string>): void;
+        moveElementsBottom(ids: Array<string>): void;
+        setElementZIndex(id: string, zIndex: number): void;
         clone(attrs?: {}): any;
         setZIndex(zIndex: any): void;
         set(attrs: any): void;
@@ -756,21 +760,6 @@ export declare const Store: import("mobx-state-tree").IModelType<{
         }): T extends ElementType["type"] ? Extract<ElementType, {
             type: T;
         }> : NodeType;
-        canMoveElementsUp(ids: Array<string>): boolean;
-        moveElementsUp(ids: Array<string>): void;
-        canMoveElementsTop(ids: Array<string>): boolean;
-        moveElementsTop(ids: Array<string>): void;
-        canMoveElementsDown(ids: Array<string>): boolean;
-        moveElementsDown(ids: Array<string>): void;
-        canMoveElementsBottom(ids: Array<string>): boolean;
-        moveElementsBottom(ids: Array<string>): void;
-        setElementZIndex(id: any, zIndex: any): void;
-        setSize({ width, height, useMagic, softChange, }: {
-            width: number;
-            height: number;
-            useMagic?: boolean;
-            softChange?: boolean;
-        }): void;
     } & {
         moveElementUp(id: any): void;
         moveElementDown(id: any): void;
@@ -799,9 +788,22 @@ export declare const Store: import("mobx-state-tree").IModelType<{
         readonly computedHeight: any;
     } & {
         toJSON(): any;
-        _forEachElementUp(ids: Array<string>, callback: Function): void;
-        _forEachElementDown(ids: Array<string>, callback: Function): false;
     } & {
+        setSize({ width, height, useMagic, softChange, }: {
+            width: number;
+            height: number;
+            useMagic?: boolean;
+            softChange?: boolean;
+        }): void;
+        canMoveElementsUp(ids: Array<string>): boolean;
+        canMoveElementsTop(ids: Array<string>): boolean;
+        canMoveElementsDown(ids: Array<string>): boolean;
+        canMoveElementsBottom(ids: Array<string>): boolean;
+        moveElementsUp(ids: Array<string>): void;
+        moveElementsDown(ids: Array<string>): void;
+        moveElementsTop(ids: Array<string>): void;
+        moveElementsBottom(ids: Array<string>): void;
+        setElementZIndex(id: string, zIndex: number): void;
         clone(attrs?: {}): any;
         setZIndex(zIndex: any): void;
         set(attrs: any): void;
@@ -815,21 +817,6 @@ export declare const Store: import("mobx-state-tree").IModelType<{
         }): T extends ElementType["type"] ? Extract<ElementType, {
             type: T;
         }> : NodeType;
-        canMoveElementsUp(ids: Array<string>): boolean;
-        moveElementsUp(ids: Array<string>): void;
-        canMoveElementsTop(ids: Array<string>): boolean;
-        moveElementsTop(ids: Array<string>): void;
-        canMoveElementsDown(ids: Array<string>): boolean;
-        moveElementsDown(ids: Array<string>): void;
-        canMoveElementsBottom(ids: Array<string>): boolean;
-        moveElementsBottom(ids: Array<string>): void;
-        setElementZIndex(id: any, zIndex: any): void;
-        setSize({ width, height, useMagic, softChange, }: {
-            width: number;
-            height: number;
-            useMagic?: boolean;
-            softChange?: boolean;
-        }): void;
     } & {
         moveElementUp(id: any): void;
         moveElementDown(id: any): void;
@@ -891,9 +878,22 @@ export declare const Store: import("mobx-state-tree").IModelType<{
         readonly computedHeight: any;
     } & {
         toJSON(): any;
-        _forEachElementUp(ids: Array<string>, callback: Function): void;
-        _forEachElementDown(ids: Array<string>, callback: Function): false;
     } & {
+        setSize({ width, height, useMagic, softChange, }: {
+            width: number;
+            height: number;
+            useMagic?: boolean;
+            softChange?: boolean;
+        }): void;
+        canMoveElementsUp(ids: Array<string>): boolean;
+        canMoveElementsTop(ids: Array<string>): boolean;
+        canMoveElementsDown(ids: Array<string>): boolean;
+        canMoveElementsBottom(ids: Array<string>): boolean;
+        moveElementsUp(ids: Array<string>): void;
+        moveElementsDown(ids: Array<string>): void;
+        moveElementsTop(ids: Array<string>): void;
+        moveElementsBottom(ids: Array<string>): void;
+        setElementZIndex(id: string, zIndex: number): void;
         clone(attrs?: {}): any;
         setZIndex(zIndex: any): void;
         set(attrs: any): void;
@@ -907,21 +907,6 @@ export declare const Store: import("mobx-state-tree").IModelType<{
         }): T extends ElementType["type"] ? Extract<ElementType, {
             type: T;
         }> : NodeType;
-        canMoveElementsUp(ids: Array<string>): boolean;
-        moveElementsUp(ids: Array<string>): void;
-        canMoveElementsTop(ids: Array<string>): boolean;
-        moveElementsTop(ids: Array<string>): void;
-        canMoveElementsDown(ids: Array<string>): boolean;
-        moveElementsDown(ids: Array<string>): void;
-        canMoveElementsBottom(ids: Array<string>): boolean;
-        moveElementsBottom(ids: Array<string>): void;
-        setElementZIndex(id: any, zIndex: any): void;
-        setSize({ width, height, useMagic, softChange, }: {
-            width: number;
-            height: number;
-            useMagic?: boolean;
-            softChange?: boolean;
-        }): void;
     } & {
         moveElementUp(id: any): void;
         moveElementDown(id: any): void;
@@ -950,9 +935,22 @@ export declare const Store: import("mobx-state-tree").IModelType<{
         readonly computedHeight: any;
     } & {
         toJSON(): any;
-        _forEachElementUp(ids: Array<string>, callback: Function): void;
-        _forEachElementDown(ids: Array<string>, callback: Function): false;
     } & {
+        setSize({ width, height, useMagic, softChange, }: {
+            width: number;
+            height: number;
+            useMagic?: boolean;
+            softChange?: boolean;
+        }): void;
+        canMoveElementsUp(ids: Array<string>): boolean;
+        canMoveElementsTop(ids: Array<string>): boolean;
+        canMoveElementsDown(ids: Array<string>): boolean;
+        canMoveElementsBottom(ids: Array<string>): boolean;
+        moveElementsUp(ids: Array<string>): void;
+        moveElementsDown(ids: Array<string>): void;
+        moveElementsTop(ids: Array<string>): void;
+        moveElementsBottom(ids: Array<string>): void;
+        setElementZIndex(id: string, zIndex: number): void;
         clone(attrs?: {}): any;
         setZIndex(zIndex: any): void;
         set(attrs: any): void;
@@ -966,21 +964,6 @@ export declare const Store: import("mobx-state-tree").IModelType<{
         }): T extends ElementType["type"] ? Extract<ElementType, {
             type: T;
         }> : NodeType;
-        canMoveElementsUp(ids: Array<string>): boolean;
-        moveElementsUp(ids: Array<string>): void;
-        canMoveElementsTop(ids: Array<string>): boolean;
-        moveElementsTop(ids: Array<string>): void;
-        canMoveElementsDown(ids: Array<string>): boolean;
-        moveElementsDown(ids: Array<string>): void;
-        canMoveElementsBottom(ids: Array<string>): boolean;
-        moveElementsBottom(ids: Array<string>): void;
-        setElementZIndex(id: any, zIndex: any): void;
-        setSize({ width, height, useMagic, softChange, }: {
-            width: number;
-            height: number;
-            useMagic?: boolean;
-            softChange?: boolean;
-        }): void;
     } & {
         moveElementUp(id: any): void;
         moveElementDown(id: any): void;