polotno 4.1.3 → 4.2.0

package/canvas/workspace-canvas.js

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

package/config.d.ts

@@ -15,7 +15,7 @@ export { setIcons, type IconName } from './icons/registry.js';
 export { registerNextDomDrop as unstable_registerNextDomDrop } from './canvas/page.js';
 export { getGoogleFontsListAPI, getGoogleFontImage, setAPI } from './utils/api.js';
 export { setColorsPresetFunc } from './toolbar/color-picker.js';
-export { setQuillFormats as unstable_setQuillFormats } from './canvas/html-element.js';
+export { setQuillFormats as unstable_setQuillFormats } from './canvas/rich-editor.js';
 export { useDownScaling, setDownScalingEnabled } from './utils/flags.js';
 export { useRemoveBackground as unstable_setRemoveBackgroundEnabled, setRemoveBackgroundEnabled, } from './utils/flags.js';
 export { useHtmlTextRender as unstable_useHtmlTextRender, setRichTextEnabled, } from './utils/flags.js';

package/config.js

@@ -1 +1 @@
-export{setGoogleFonts,addGlobalFont,removeGlobalFont,replaceGlobalFonts,setGoogleFontsVariants}from"./utils/fonts.js";export{setUploadFunc}from"./side-panel/upload-panel.js";export{setFontUploadFunc}from"./side-panel/text-panel.js";export{toggleFadeInAnimation}from"./canvas/use-fadein.js";export{setTransformerStyle,setHighlighterStyle,setInnerImageCropTransformerStyle,setOuterImageCropTransformerStyle}from"./canvas/workspace-style.js";export{setImageLoaderHook as unstable_setImageLoaderHook}from"./canvas/image-element.js";export{registerShapeModel as unstable_registerShapeModel}from"./model/group-model.js";export{registerShapeComponent as unstable_registerShapeComponent}from"./canvas/element.js";export{registerTransformerAttrs as unstable_registerTransformerAttrs}from"./canvas/page.js";export{registerToolbarComponent as unstable_registerToolbarComponent}from"./toolbar/toolbar.js";export{onLoadError,setAssetLoadTimeout,setFontLoadTimeout}from"./utils/loader.js";export{setSnapFilterFunc as unstable_setSnapFilterFunc}from"./canvas/use-transformer-snap.js";export{setTranslations,getTranslations}from"./utils/l10n.js";export{setIcons}from"./icons/registry.js";export{registerNextDomDrop as unstable_registerNextDomDrop}from"./canvas/page.js";export{getGoogleFontsListAPI,getGoogleFontImage,setAPI}from"./utils/api.js";export{setColorsPresetFunc}from"./toolbar/color-picker.js";export{setQuillFormats as unstable_setQuillFormats}from"./canvas/html-element.js";export{useDownScaling,setDownScalingEnabled}from"./utils/flags.js";export{useRemoveBackground as unstable_setRemoveBackgroundEnabled,setRemoveBackgroundEnabled}from"./utils/flags.js";export{useHtmlTextRender as unstable_useHtmlTextRender,setRichTextEnabled}from"./utils/flags.js";export{setLegacyRichTextEnabled}from"./utils/flags.js";export{setForceTextFit as unstable_setForceTextFit}from"./utils/flags.js";export{setTextSplitAllowed as unstable_setTextSplitAllowed}from"./utils/flags.js";export{setTextOverflow as unstable_setTextOverflow,setTextOverflow}from"./utils/flags.js";export{setTextVerticalResizeEnabled as unstable_setTextVerticalResizeEnabled,setTextVerticalResizeEnabled}from"./utils/flags.js";export{setAnimationsEnabled as unstable_setAnimationsEnabled,setAnimationsEnabled}from"./utils/flags.js";export{setAiTextEnabled}from"./utils/flags.js";export{setAutoDeleteEmptyText}from"./utils/flags.js";
+export{setGoogleFonts,addGlobalFont,removeGlobalFont,replaceGlobalFonts,setGoogleFontsVariants}from"./utils/fonts.js";export{setUploadFunc}from"./side-panel/upload-panel.js";export{setFontUploadFunc}from"./side-panel/text-panel.js";export{toggleFadeInAnimation}from"./canvas/use-fadein.js";export{setTransformerStyle,setHighlighterStyle,setInnerImageCropTransformerStyle,setOuterImageCropTransformerStyle}from"./canvas/workspace-style.js";export{setImageLoaderHook as unstable_setImageLoaderHook}from"./canvas/image-element.js";export{registerShapeModel as unstable_registerShapeModel}from"./model/group-model.js";export{registerShapeComponent as unstable_registerShapeComponent}from"./canvas/element.js";export{registerTransformerAttrs as unstable_registerTransformerAttrs}from"./canvas/page.js";export{registerToolbarComponent as unstable_registerToolbarComponent}from"./toolbar/toolbar.js";export{onLoadError,setAssetLoadTimeout,setFontLoadTimeout}from"./utils/loader.js";export{setSnapFilterFunc as unstable_setSnapFilterFunc}from"./canvas/use-transformer-snap.js";export{setTranslations,getTranslations}from"./utils/l10n.js";export{setIcons}from"./icons/registry.js";export{registerNextDomDrop as unstable_registerNextDomDrop}from"./canvas/page.js";export{getGoogleFontsListAPI,getGoogleFontImage,setAPI}from"./utils/api.js";export{setColorsPresetFunc}from"./toolbar/color-picker.js";export{setQuillFormats as unstable_setQuillFormats}from"./canvas/rich-editor.js";export{useDownScaling,setDownScalingEnabled}from"./utils/flags.js";export{useRemoveBackground as unstable_setRemoveBackgroundEnabled,setRemoveBackgroundEnabled}from"./utils/flags.js";export{useHtmlTextRender as unstable_useHtmlTextRender,setRichTextEnabled}from"./utils/flags.js";export{setLegacyRichTextEnabled}from"./utils/flags.js";export{setForceTextFit as unstable_setForceTextFit}from"./utils/flags.js";export{setTextSplitAllowed as unstable_setTextSplitAllowed}from"./utils/flags.js";export{setTextOverflow as unstable_setTextOverflow,setTextOverflow}from"./utils/flags.js";export{setTextVerticalResizeEnabled as unstable_setTextVerticalResizeEnabled,setTextVerticalResizeEnabled}from"./utils/flags.js";export{setAnimationsEnabled as unstable_setAnimationsEnabled,setAnimationsEnabled}from"./utils/flags.js";export{setAiTextEnabled}from"./utils/flags.js";export{setAutoDeleteEmptyText}from"./utils/flags.js";

package/icons/registry.d.ts

@@ -4,6 +4,7 @@ export type IconComponent = ComponentType<{
 }>;
 declare const defaults: {
     'action.duplicate': import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+    'action.split': import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
     'action.remove': import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
     'action.lock': import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
     'action.unlock': import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
@@ -89,6 +90,7 @@ declare const defaults: {
     'background.colorPicker': import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
     'pagesTimeline.play': import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
     'pagesTimeline.pause': import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+    'pagesTimeline.rewind': import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
     'size.instagram': (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
     'size.facebook': (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
     'size.youtube': (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;

package/icons/registry.js

@@ -1 +1 @@
-var t=this&&this.__rest||function(t,o){var e={};for(var i in t){Object.prototype.hasOwnProperty.call(t,i)&&o.indexOf(i)<0&&(e[i]=t[i])}if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var n=0;for(i=Object.getOwnPropertySymbols(t);n<i.length;n++){o.indexOf(i[n])<0&&Object.prototype.propertyIsEnumerable.call(t,i[n])&&(e[i[n]]=t[i[n]])}}return e};import{jsx as o}from"react/jsx-runtime";import{observable as e,action as i}from"mobx";import{observer as n}from"mobx-react-lite";import{AlignCenter as a,AlignCenterHorizontal as r,AlignCenterVertical as l,AlignEndHorizontal as s,AlignEndVertical as c,AlignHorizontalSpaceAround as p,AlignJustify as d,AlignLeft as m,AlignRight as g,AlignStartHorizontal as u,AlignStartVertical as b,AlignVerticalJustifyCenter as f,AlignVerticalJustifyEnd as x,AlignVerticalJustifyStart as y,AlignVerticalSpaceAround as h,ArrowDown as v,ArrowDownLeft as w,ArrowDownRight as P,ArrowLeft as z,ArrowLeftRight as O,ArrowRight as j,ArrowUp as k,ArrowUpDown as L,ArrowUpLeft as R,ArrowUpRight as I,Ban as T,Bold as B,CaseSensitive as C,Check as D,ChevronDown as H,ChevronLeft as M,ChevronRight as F,ChevronsDown as S,ChevronsUp as U,ChevronUp as V,CloudUpload as $,Contrast as _,Copy as E,CreditCard as J,Crop as W,Edit as Z,Eye as q,EyeOff as A,Files as G,FileText as K,GripVertical as N,HelpCircle as Q,Highlighter as X,Image as Y,Italic as tt,Layers as ot,LayoutTemplate as et,List as it,ListOrdered as nt,Lock as at,MousePointer as rt,MoreHorizontal as lt,PaintBucket as st,Palette as ct,Pause as pt,Pencil as dt,Pilcrow as mt,Pipette as gt,Play as ut,Plus as bt,Redo2 as ft,Scaling as xt,Scissors as yt,Search as ht,Settings as vt,Shapes as wt,Sparkles as Pt,Strikethrough as zt,TextCursorInput as Ot,Timer as jt,Trash2 as kt,Type as Lt,Underline as Rt,Undo2 as It,Unlock as Tt,Upload as Bt,Video as Ct,Volume2 as Dt,VolumeX as Ht,WandSparkles as Mt,WrapText as Ft,X as St,ZoomIn as Ut,ZoomOut as Vt}from"lucide-react";import{Instagram as $t,Facebook as _t,Youtube as Et,Linkedin as Jt,Twitter as Wt}from"./brand-icons.js";import{MoveIcon as Zt,FadeIcon as qt,ZoomIcon as At,RotateIcon as Gt,BlinkIcon as Kt,BounceIcon as Nt}from"./animation-icons.js";const Qt={"action.duplicate":E,"action.remove":kt,"action.lock":at,"action.unlock":Tt,"action.undo":It,"action.redo":ft,"action.add":bt,"action.more":lt,"action.settings":vt,"action.search":ht,"action.close":St,"action.confirm":D,"action.none":T,"action.visible":q,"action.hidden":A,"action.dragHandle":N,"action.eyeDropper":gt,"action.unmuted":Dt,"action.muted":Ht,"action.help":Q,"ui.chevronUp":V,"ui.chevronDown":H,"ui.chevronLeft":M,"ui.chevronRight":F,"layering.menu":ot,"layering.up":V,"layering.down":H,"layering.top":U,"layering.bottom":S,"text.bold":B,"text.italic":tt,"text.underline":Rt,"text.strikethrough":zt,"text.alignLeft":m,"text.alignCenter":a,"text.alignRight":g,"text.alignJustify":d,"text.valignTop":y,"text.valignMiddle":f,"text.valignBottom":x,"text.uppercase":C,"text.spacing":Ft,"text.bulletList":it,"text.numberedList":nt,"text.paragraph":mt,"text.richText":Ot,"text.uploadFont":Bt,"position.alignLeft":b,"position.alignCenter":l,"position.alignRight":c,"position.alignTop":u,"position.alignMiddle":r,"position.alignBottom":s,"position.distributeVertical":h,"position.distributeHorizontal":p,"sidePanel.templates":et,"sidePanel.text":Lt,"sidePanel.photos":Y,"sidePanel.elements":wt,"sidePanel.upload":$,"sidePanel.background":st,"sidePanel.pages":G,"sidePanel.layers":ot,"sidePanel.resize":xt,"sidePanel.draw":dt,"sidePanel.videos":Ct,"toolbar.opacity":_,"toolbar.filters":Mt,"toolbar.aiWrite":Pt,"toolbar.duration":jt,"toolbar.trim":yt,"toolbar.flipHorizontal":O,"toolbar.flipVertical":L,"toolbar.zoomIn":Ut,"toolbar.zoomOut":Vt,"toolbar.crop":W,"download.export":Bt,"download.image":Y,"download.pdf":K,"download.video":Ct,"draw.select":rt,"draw.brush":Z,"draw.highlighter":X,"background.colorPicker":ct,"pagesTimeline.play":ut,"pagesTimeline.pause":pt,"size.instagram":$t,"size.facebook":_t,"size.youtube":Et,"size.linkedin":Jt,"size.twitter":Wt,"size.video":Ct,"size.print":K,"size.businessCard":J,"animation.directionRight":j,"animation.directionLeft":z,"animation.directionUp":k,"animation.directionDown":v,"animation.directionBottomRight":P,"animation.directionBottomLeft":w,"animation.directionTopRight":I,"animation.directionTopLeft":R,"animation.typeMove":Zt,"animation.typeFade":qt,"animation.typeZoom":At,"animation.typeRotate":Gt,"animation.typeBlink":Kt,"animation.typeBounce":Nt},Xt=e.map();export const setIcons=i(t=>{for(const o of Object.keys(t)){const e=t[o];null!=e&&("function"==typeof e||"object"==typeof e?Xt.set(o,e):console.warn(`polotno: setIcons('${o}') expects a React component, received ${typeof e}. Ignored.`))}});export const resetIcons=i(()=>Xt.clear());export const PolotnoIcon=n(e=>{var i,{name:n}=e,a=t(e,["name"]);const r=null!==(i=Xt.get(n))&&void 0!==i?i:Qt[n];return o(r,Object.assign({"data-pn-icon":""},a))});
+var t=this&&this.__rest||function(t,o){var e={};for(var i in t){Object.prototype.hasOwnProperty.call(t,i)&&o.indexOf(i)<0&&(e[i]=t[i])}if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var n=0;for(i=Object.getOwnPropertySymbols(t);n<i.length;n++){o.indexOf(i[n])<0&&Object.prototype.propertyIsEnumerable.call(t,i[n])&&(e[i[n]]=t[i[n]])}}return e};import{jsx as o}from"react/jsx-runtime";import{observable as e,action as i}from"mobx";import{observer as n}from"mobx-react-lite";import{AlignCenter as a,AlignCenterHorizontal as r,AlignCenterVertical as l,AlignEndHorizontal as s,AlignEndVertical as c,AlignHorizontalSpaceAround as p,AlignJustify as d,AlignLeft as m,AlignRight as g,AlignStartHorizontal as u,AlignStartVertical as b,AlignVerticalJustifyCenter as f,AlignVerticalJustifyEnd as x,AlignVerticalJustifyStart as y,AlignVerticalSpaceAround as h,ArrowDown as v,ArrowDownLeft as w,ArrowDownRight as P,ArrowLeft as z,ArrowLeftRight as O,ArrowRight as j,ArrowUp as k,ArrowUpDown as L,ArrowUpLeft as R,ArrowUpRight as T,Ban as I,Bold as B,CaseSensitive as C,Check as D,ChevronDown as H,ChevronLeft as M,ChevronRight as F,ChevronsDown as S,ChevronsUp as U,ChevronUp as V,CloudUpload as $,Contrast as _,Copy as E,CreditCard as J,Crop as W,Edit as Z,Eye as q,EyeOff as A,Files as G,FileText as K,GripVertical as N,HelpCircle as Q,Highlighter as X,Image as Y,Italic as tt,Layers as ot,LayoutTemplate as et,List as it,ListOrdered as nt,Lock as at,MousePointer as rt,MoreHorizontal as lt,PaintBucket as st,Palette as ct,Pause as pt,Pencil as dt,Pilcrow as mt,Pipette as gt,Play as ut,Plus as bt,Redo2 as ft,Scaling as xt,Scissors as yt,Search as ht,SkipBack as vt,Settings as wt,Shapes as Pt,Sparkles as zt,Strikethrough as Ot,TextCursorInput as jt,Timer as kt,Trash2 as Lt,Type as Rt,Underline as Tt,Undo2 as It,Unlock as Bt,Upload as Ct,Video as Dt,Volume2 as Ht,VolumeX as Mt,WandSparkles as Ft,WrapText as St,X as Ut,ZoomIn as Vt,ZoomOut as $t}from"lucide-react";import{Instagram as _t,Facebook as Et,Youtube as Jt,Linkedin as Wt,Twitter as Zt}from"./brand-icons.js";import{MoveIcon as qt,FadeIcon as At,ZoomIcon as Gt,RotateIcon as Kt,BlinkIcon as Nt,BounceIcon as Qt}from"./animation-icons.js";const Xt={"action.duplicate":E,"action.split":yt,"action.remove":Lt,"action.lock":at,"action.unlock":Bt,"action.undo":It,"action.redo":ft,"action.add":bt,"action.more":lt,"action.settings":wt,"action.search":ht,"action.close":Ut,"action.confirm":D,"action.none":I,"action.visible":q,"action.hidden":A,"action.dragHandle":N,"action.eyeDropper":gt,"action.unmuted":Ht,"action.muted":Mt,"action.help":Q,"ui.chevronUp":V,"ui.chevronDown":H,"ui.chevronLeft":M,"ui.chevronRight":F,"layering.menu":ot,"layering.up":V,"layering.down":H,"layering.top":U,"layering.bottom":S,"text.bold":B,"text.italic":tt,"text.underline":Tt,"text.strikethrough":Ot,"text.alignLeft":m,"text.alignCenter":a,"text.alignRight":g,"text.alignJustify":d,"text.valignTop":y,"text.valignMiddle":f,"text.valignBottom":x,"text.uppercase":C,"text.spacing":St,"text.bulletList":it,"text.numberedList":nt,"text.paragraph":mt,"text.richText":jt,"text.uploadFont":Ct,"position.alignLeft":b,"position.alignCenter":l,"position.alignRight":c,"position.alignTop":u,"position.alignMiddle":r,"position.alignBottom":s,"position.distributeVertical":h,"position.distributeHorizontal":p,"sidePanel.templates":et,"sidePanel.text":Rt,"sidePanel.photos":Y,"sidePanel.elements":Pt,"sidePanel.upload":$,"sidePanel.background":st,"sidePanel.pages":G,"sidePanel.layers":ot,"sidePanel.resize":xt,"sidePanel.draw":dt,"sidePanel.videos":Dt,"toolbar.opacity":_,"toolbar.filters":Ft,"toolbar.aiWrite":zt,"toolbar.duration":kt,"toolbar.trim":yt,"toolbar.flipHorizontal":O,"toolbar.flipVertical":L,"toolbar.zoomIn":Vt,"toolbar.zoomOut":$t,"toolbar.crop":W,"download.export":Ct,"download.image":Y,"download.pdf":K,"download.video":Dt,"draw.select":rt,"draw.brush":Z,"draw.highlighter":X,"background.colorPicker":ct,"pagesTimeline.play":ut,"pagesTimeline.pause":pt,"pagesTimeline.rewind":vt,"size.instagram":_t,"size.facebook":Et,"size.youtube":Jt,"size.linkedin":Wt,"size.twitter":Zt,"size.video":Dt,"size.print":K,"size.businessCard":J,"animation.directionRight":j,"animation.directionLeft":z,"animation.directionUp":k,"animation.directionDown":v,"animation.directionBottomRight":P,"animation.directionBottomLeft":w,"animation.directionTopRight":T,"animation.directionTopLeft":R,"animation.typeMove":qt,"animation.typeFade":At,"animation.typeZoom":Gt,"animation.typeRotate":Kt,"animation.typeBlink":Nt,"animation.typeBounce":Qt},Yt=e.map();export const setIcons=i(t=>{for(const o of Object.keys(t)){const e=t[o];null!=e&&("function"==typeof e||"object"==typeof e?Yt.set(o,e):console.warn(`polotno: setIcons('${o}') expects a React component, received ${typeof e}. Ignored.`))}});export const resetIcons=i(()=>Yt.clear());export const PolotnoIcon=n(e=>{var i,{name:n}=e,a=t(e,["name"]);const r=null!==(i=Yt.get(n))&&void 0!==i?i:Xt[n];return o(r,Object.assign({"data-pn-icon":""},a))});

package/model/figure-model.d.ts

@@ -134,6 +134,11 @@ export declare const FigureElement: import("mobx-state-tree").IModelType<{
     readonly locked: boolean;
     readonly a: import("./shape-model.js").AnimatedAttrs;
     animated(attr: any): any;
+    readonly timeRange: {
+        start: number;
+        end: number;
+    };
+    readonly active: boolean;
     readonly isSelected: boolean;
     readonly isSelectedDirectly: boolean;
 } & {

package/model/gif-model.d.ts

@@ -147,6 +147,11 @@ export declare const GifElement: import("mobx-state-tree").IModelType<{
     readonly locked: boolean;
     readonly a: import("./shape-model.js").AnimatedAttrs;
     animated(attr: any): any;
+    readonly timeRange: {
+        start: number;
+        end: number;
+    };
+    readonly active: boolean;
     readonly isSelected: boolean;
     readonly isSelectedDirectly: boolean;
 } & {

package/model/group-model.d.ts

@@ -204,6 +204,11 @@ export declare const TYPES_MAP: {
         readonly locked: boolean;
         readonly a: import("./shape-model.js").AnimatedAttrs;
         animated(attr: any): any;
+        readonly timeRange: {
+            start: number;
+            end: number;
+        };
+        readonly active: boolean;
         readonly isSelected: boolean;
         readonly isSelectedDirectly: boolean;
     } & {
@@ -379,6 +384,11 @@ export declare const TYPES_MAP: {
         readonly locked: boolean;
         readonly a: import("./shape-model.js").AnimatedAttrs;
         animated(attr: any): any;
+        readonly timeRange: {
+            start: number;
+            end: number;
+        };
+        readonly active: boolean;
         readonly isSelected: boolean;
         readonly isSelectedDirectly: boolean;
     } & {
@@ -545,6 +555,11 @@ export declare const TYPES_MAP: {
         readonly locked: boolean;
         readonly a: import("./shape-model.js").AnimatedAttrs;
         animated(attr: any): any;
+        readonly timeRange: {
+            start: number;
+            end: number;
+        };
+        readonly active: boolean;
         readonly isSelected: boolean;
         readonly isSelectedDirectly: boolean;
     } & {
@@ -714,6 +729,11 @@ export declare const TYPES_MAP: {
         readonly locked: boolean;
         readonly a: import("./shape-model.js").AnimatedAttrs;
         animated(attr: any): any;
+        readonly timeRange: {
+            start: number;
+            end: number;
+        };
+        readonly active: boolean;
         readonly isSelected: boolean;
         readonly isSelectedDirectly: boolean;
     } & {
@@ -893,6 +913,11 @@ export declare const TYPES_MAP: {
         readonly locked: boolean;
         readonly a: import("./shape-model.js").AnimatedAttrs;
         animated(attr: any): any;
+        readonly timeRange: {
+            start: number;
+            end: number;
+        };
+        readonly active: boolean;
         readonly isSelected: boolean;
         readonly isSelectedDirectly: boolean;
     } & {
@@ -1061,6 +1086,11 @@ export declare const TYPES_MAP: {
         readonly locked: boolean;
         readonly a: import("./shape-model.js").AnimatedAttrs;
         animated(attr: any): any;
+        readonly timeRange: {
+            start: number;
+            end: number;
+        };
+        readonly active: boolean;
         readonly isSelected: boolean;
         readonly isSelectedDirectly: boolean;
     } & {
@@ -1237,6 +1267,11 @@ export declare const TYPES_MAP: {
         readonly locked: boolean;
         readonly a: import("./shape-model.js").AnimatedAttrs;
         animated(attr: any): any;
+        readonly timeRange: {
+            start: number;
+            end: number;
+        };
+        readonly active: boolean;
         readonly isSelected: boolean;
         readonly isSelectedDirectly: boolean;
     } & {
@@ -1554,6 +1589,11 @@ export declare const TYPES_MAP: {
         readonly locked: boolean;
         readonly a: import("./shape-model.js").AnimatedAttrs;
         animated(attr: any): any;
+        readonly timeRange: {
+            start: number;
+            end: number;
+        };
+        readonly active: boolean;
         readonly isSelected: boolean;
         readonly isSelectedDirectly: boolean;
     } & {

package/model/group-model.js

@@ -1 +1 @@
-var e=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 r=0;for(i=Object.getOwnPropertySymbols(e);r<i.length;r++){t.indexOf(i[r])<0&&Object.prototype.propertyIsEnumerable.call(e,i[r])&&(o[i[r]]=e[i[r]])}}return o};import{detach as t,isAlive as o,types as i}from"mobx-state-tree";import{nanoid as r}from"nanoid";import{Node as n}from"./node-model.js";import{Animation as l,Shape as s}from"./shape-model.js";import{animate as a}from"../utils/animations.js";import{getCenter as d,getTotalClientRect as c}from"../utils/math.js";import{TextElement as p}from"./text-model.js";import{ImageElement as h}from"./image-model.js";import{VideoElement as y}from"./video-model.js";import{LineElement as f}from"./line-model.js";import{SVGElement as m}from"./svg-model.js";import{FigureElement as u}from"./figure-model.js";import{GifElement as g}from"./gif-model.js";import{TableElement as E}from"./table-model.js";export const forEveryChild=(e,t)=>{if(e.children){for(const o of e.children){if(!0===t(o)){break}forEveryChild(o,t)}}};export const forEveryNode=(e,t)=>{if(e.children){for(const o of e.children){if(!0===t(o)){break}forEveryNode(o,t)}}if(e.cells){for(const o of e.cells){if(!0===t(o)){break}}}};export function zIndexOps(e){const o=(t,o,i)=>{const r=t.map(t=>e.children.findIndex(e=>e.id===t)).filter(e=>-1!==e).sort((e,t)=>(t-e)*o);for(const n of r){const r=e.children[n+o];!r||t.indexOf(r.id)>=0||i(n)}},i=(e,t)=>{let i=!1;return o(e,t,()=>{i=!0}),i},r=(i,r)=>{o(i,r,o=>{const i=e.children[o];t(i),e.children.splice(o+r,0,i)})},n=(t,o)=>{const i=[],r=[];e.children.forEach(e=>{(t.indexOf(e.id)>=0?i:r).push(e)}),e.children.replace(o?r.concat(i):i.concat(r))};return{canMoveElementsUp:e=>i(e,1),canMoveElementsTop:e=>i(e,1),canMoveElementsDown:e=>i(e,-1),canMoveElementsBottom:e=>i(e,-1),moveElementsUp(e){r(e,1)},moveElementsDown(e){r(e,-1)},moveElementsTop(e){n(e,!0)},moveElementsBottom(e){n(e,!1)},setElementZIndex(o,i){const r=e.children.find(e=>e.id===o);r&&(t(r),e.children.remove(r),e.children.splice(i,0,r))}}}const b=[...new Array(20)].map((e,t)=>i.late(()=>C[t]));export const ElementTypes=i.union({dispatcher:e=>{const t=TYPES_MAP[e.type];if(!t){throw new Error(`Unknown element type: "${e.type}"`)}return t}},m,p,h,f,y,u,g,E,i.late(()=>GroupElement),...b);const v=Object.freeze({x:0,y:0,offsetX:0,offsetY:0,scaleX:1,scaleY:1,rotation:0,opacity:1});function x(e){return 1===e?v:Object.assign(Object.assign({},v),{opacity:e})}const w={x:0,y:0,width:0,height:0,rotation:0,opacity:1,fontSize:0,cropX:0,cropY:0,cropWidth:1,cropHeight:1},j=(e,t)=>"number"==typeof e&&isFinite(e)?e:t;function O(e,t,o,i){w.x=e.x,w.y=e.y,w.width=e.width,w.height=e.height,w.opacity=i;const r=a({element:w,animation:t,dTime:o})||{},n=j(r.width,e.width),l=j(r.height,e.height);return{x:j(r.x,e.x),y:j(r.y,e.y),width:n>0?n:e.width,height:l>0?l:e.height,rotation:j(r.rotation,0),opacity:j(r.opacity,i)}}export const GroupElement=n.named("Group").props({type:"group",children:i.array(ElementTypes),animations:i.array(l)}).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},get _restingBbox(){const t=[];if(forEveryChild(e,e=>{var o,i,r;if("group"===e.type){return}const n=e.width,l=e.height;!n||!l||n<=0||l<=0||t.push({x:null!==(o=e.x)&&void 0!==o?o:0,y:null!==(i=e.y)&&void 0!==i?i:0,width:n,height:l,rotation:null!==(r=e.rotation)&&void 0!==r?r:0})}),!t.length){return null}const o=c(t);return o.width<=0||o.height<=0?null:{x:o.x,y:o.y,width:o.width,height:o.height}},get a(){if(!o(e)){return v}const{currentTime:t}=e.store;if(0===t){return x(e.opacity)}const i=e.page;if(!i){return x(e.opacity)}const r=t-i.startTime;if(r<0||r>i.duration){return x(e.opacity)}const n=e.store.animatedElementsIds;if(n.length&&!n.includes(e.id)){return x(e.opacity)}let l,s,a;for(const o of e.animations){o.enabled&&("enter"===o.type?l=o:"exit"===o.type?s=o:"loop"===o.type&&(a=o))}const c=!!l&&r<l.delay,p=!!l&&r>=l.delay&&r<=l.delay+l.duration,h=!c&&!p&&!!s&&r>=i.duration-s.duration-s.delay&&r<=i.duration-s.delay,y=!!s&&r>=i.duration-s.delay;if(!(c||p||h||y||a)){return x(e.opacity)}const f=this._restingBbox;if(!f){return x(e.opacity)}let m={x:f.x,y:f.y,width:f.width,height:f.height,rotation:0,opacity:e.opacity};c&&(m.opacity=0),p&&(m=O(f,l,r-l.delay,e.opacity)),h&&(m=O(f,s,r-(i.duration-s.duration-s.delay),e.opacity)),y&&(m.opacity=0),a&&(m=O(m,a,r,m.opacity));const u=d(m);return{x:u.x,y:u.y,offsetX:f.x+f.width/2,offsetY:f.y+f.height/2,scaleX:m.width/f.width,scaleY:m.height/f.height,rotation:m.rotation,opacity:m.opacity}}})).actions(t=>Object.assign(Object.assign({set(o){var{draggable:i,contentEditable:r,styleEditable:n,resizable:l}=o,s=e(o,["draggable","contentEditable","styleEditable","resizable"]);void 0!==i&&forEveryChild(t,e=>{e.set({draggable:i})}),void 0!==r&&forEveryChild(t,e=>{e.set({contentEditable:r})}),void 0!==n&&forEveryChild(t,e=>{e.set({styleEditable:n})}),void 0!==l&&forEveryChild(t,e=>{e.set({resizable:l})}),Object.assign(t,s)},addElement(e,{skipSelect:o=!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||r(10)});const n=i.create(Object.assign({id:r(10)},e));return t.children.push(n),n.selectable&&!o&&t.store.selectElements([n.id]),n}},zIndexOps(t)),{setAnimation(e,o){const i=t.animations.find(t=>t.type===e);i?Object.assign(i,o):t.animations.push(Object.assign({type:e},o))}}));const C=[];export const TYPES_MAP={svg:m,text:p,image:h,group:GroupElement,line:f,video:y,figure:u,gif:g,table:E};export function registerShapeModel(e,t){const o=e.type;if(!o){throw new Error('You must pass "type" attribute to custom model.')}let i=s.named(o).props(e);t&&(i=t(i)),TYPES_MAP[o]=i,C.push(i)}
+var e=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 r=0;for(i=Object.getOwnPropertySymbols(e);r<i.length;r++){t.indexOf(i[r])<0&&Object.prototype.propertyIsEnumerable.call(e,i[r])&&(o[i[r]]=e[i[r]])}}return o};import{detach as t,isAlive as o,types as i}from"mobx-state-tree";import{nanoid as r}from"nanoid";import{Node as n}from"./node-model.js";import{Animation as l,Shape as s}from"./shape-model.js";import{animate as a}from"../utils/animations.js";import{getPlayheadLocalTime as d}from"../utils/timeline.js";import{getCenter as c,getTotalClientRect as p}from"../utils/math.js";import{TextElement as h}from"./text-model.js";import{ImageElement as y}from"./image-model.js";import{VideoElement as f}from"./video-model.js";import{LineElement as m}from"./line-model.js";import{SVGElement as u}from"./svg-model.js";import{FigureElement as g}from"./figure-model.js";import{GifElement as E}from"./gif-model.js";import{TableElement as b}from"./table-model.js";export const forEveryChild=(e,t)=>{if(e.children){for(const o of e.children){if(!0===t(o)){break}forEveryChild(o,t)}}};export const forEveryNode=(e,t)=>{if(e.children){for(const o of e.children){if(!0===t(o)){break}forEveryNode(o,t)}}if(e.cells){for(const o of e.cells){if(!0===t(o)){break}}}};export function zIndexOps(e){const o=(t,o,i)=>{const r=t.map(t=>e.children.findIndex(e=>e.id===t)).filter(e=>-1!==e).sort((e,t)=>(t-e)*o);for(const n of r){const r=e.children[n+o];!r||t.indexOf(r.id)>=0||i(n)}},i=(e,t)=>{let i=!1;return o(e,t,()=>{i=!0}),i},r=(i,r)=>{o(i,r,o=>{const i=e.children[o];t(i),e.children.splice(o+r,0,i)})},n=(t,o)=>{const i=[],r=[];e.children.forEach(e=>{(t.indexOf(e.id)>=0?i:r).push(e)}),e.children.replace(o?r.concat(i):i.concat(r))};return{canMoveElementsUp:e=>i(e,1),canMoveElementsTop:e=>i(e,1),canMoveElementsDown:e=>i(e,-1),canMoveElementsBottom:e=>i(e,-1),moveElementsUp(e){r(e,1)},moveElementsDown(e){r(e,-1)},moveElementsTop(e){n(e,!0)},moveElementsBottom(e){n(e,!1)},setElementZIndex(o,i){const r=e.children.find(e=>e.id===o);r&&(t(r),e.children.remove(r),e.children.splice(i,0,r))}}}const v=[...new Array(20)].map((e,t)=>i.late(()=>P[t]));export const ElementTypes=i.union({dispatcher:e=>{const t=TYPES_MAP[e.type];if(!t){throw new Error(`Unknown element type: "${e.type}"`)}return t}},u,h,y,m,f,g,E,b,i.late(()=>GroupElement),...v);const x=Object.freeze({x:0,y:0,offsetX:0,offsetY:0,scaleX:1,scaleY:1,rotation:0,opacity:1});function w(e){return 1===e?x:Object.assign(Object.assign({},x),{opacity:e})}const j={x:0,y:0,width:0,height:0,rotation:0,opacity:1,fontSize:0,cropX:0,cropY:0,cropWidth:1,cropHeight:1},O=(e,t)=>"number"==typeof e&&isFinite(e)?e:t;function C(e,t,o,i){j.x=e.x,j.y=e.y,j.width=e.width,j.height=e.height,j.opacity=i;const r=a({element:j,animation:t,dTime:o})||{},n=O(r.width,e.width),l=O(r.height,e.height);return{x:O(r.x,e.x),y:O(r.y,e.y),width:n>0?n:e.width,height:l>0?l:e.height,rotation:O(r.rotation,0),opacity:O(r.opacity,i)}}export const GroupElement=n.named("Group").props({type:"group",children:i.array(ElementTypes),animations:i.array(l)}).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},get _restingBbox(){const t=[];if(forEveryChild(e,e=>{var o,i,r;if("group"===e.type){return}const n=e.width,l=e.height;!n||!l||n<=0||l<=0||t.push({x:null!==(o=e.x)&&void 0!==o?o:0,y:null!==(i=e.y)&&void 0!==i?i:0,width:n,height:l,rotation:null!==(r=e.rotation)&&void 0!==r?r:0})}),!t.length){return null}const o=p(t);return o.width<=0||o.height<=0?null:{x:o.x,y:o.y,width:o.width,height:o.height}},get a(){if(!o(e)){return x}const t=d(e);if(null===t){return w(e.opacity)}if(e.store.isEditingPaused&&this.isSelectedDirectly){return w(e.opacity)}const i=e.page,r=e.store.animatedElementsIds;if(r.length&&!r.includes(e.id)){return w(e.opacity)}let n,l,s;for(const o of e.animations){o.enabled&&("enter"===o.type?n=o:"exit"===o.type?l=o:"loop"===o.type&&(s=o))}const a=!!n&&t<n.delay,p=!!n&&t>=n.delay&&t<=n.delay+n.duration,h=!a&&!p&&!!l&&t>=i.duration-l.duration-l.delay&&t<=i.duration-l.delay,y=!!l&&t>=i.duration-l.delay;if(!(a||p||h||y||s)){return w(e.opacity)}const f=this._restingBbox;if(!f){return w(e.opacity)}let m={x:f.x,y:f.y,width:f.width,height:f.height,rotation:0,opacity:e.opacity};a&&(m.opacity=0),p&&(m=C(f,n,t-n.delay,e.opacity)),h&&(m=C(f,l,t-(i.duration-l.duration-l.delay),e.opacity)),y&&(m.opacity=0),s&&(m=C(m,s,t,m.opacity));const u=c(m);return{x:u.x,y:u.y,offsetX:f.x+f.width/2,offsetY:f.y+f.height/2,scaleX:m.width/f.width,scaleY:m.height/f.height,rotation:m.rotation,opacity:m.opacity}},get isSelectedDirectly(){return!!o(e)&&e.store.selectedElements.indexOf(e)>=0&&e.selectable},get active(){return!0}})).actions(t=>Object.assign(Object.assign({set(o){var{draggable:i,contentEditable:r,styleEditable:n,resizable:l}=o,s=e(o,["draggable","contentEditable","styleEditable","resizable"]);void 0!==i&&forEveryChild(t,e=>{e.set({draggable:i})}),void 0!==r&&forEveryChild(t,e=>{e.set({contentEditable:r})}),void 0!==n&&forEveryChild(t,e=>{e.set({styleEditable:n})}),void 0!==l&&forEveryChild(t,e=>{e.set({resizable:l})}),Object.assign(t,s)},addElement(e,{skipSelect:o=!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||r(10)});const n=i.create(Object.assign({id:r(10)},e));return t.children.push(n),n.selectable&&!o&&t.store.selectElements([n.id]),n}},zIndexOps(t)),{setAnimation(e,o){const i=t.animations.find(t=>t.type===e);i?Object.assign(i,o):t.animations.push(Object.assign({type:e},o))}}));const P=[];export const TYPES_MAP={svg:u,text:h,image:y,group:GroupElement,line:m,video:f,figure:g,gif:E,table:b};export function registerShapeModel(e,t){const o=e.type;if(!o){throw new Error('You must pass "type" attribute to custom model.')}let i=s.named(o).props(e);t&&(i=t(i)),TYPES_MAP[o]=i,P.push(i)}

package/model/image-model.d.ts

@@ -143,6 +143,11 @@ export declare const ImageElement: import("mobx-state-tree").IModelType<{
     readonly locked: boolean;
     readonly a: import("./shape-model.js").AnimatedAttrs;
     animated(attr: any): any;
+    readonly timeRange: {
+        start: number;
+        end: number;
+    };
+    readonly active: boolean;
     readonly isSelected: boolean;
     readonly isSelectedDirectly: boolean;
 } & {

package/model/line-model.d.ts

@@ -134,6 +134,11 @@ export declare const LineElement: import("mobx-state-tree").IModelType<{
     readonly locked: boolean;
     readonly a: import("./shape-model.js").AnimatedAttrs;
     animated(attr: any): any;
+    readonly timeRange: {
+        start: number;
+        end: number;
+    };
+    readonly active: boolean;
     readonly isSelected: boolean;
     readonly isSelectedDirectly: boolean;
 } & {

package/model/page-model.d.ts

@@ -148,6 +148,11 @@ export declare const Page: import("mobx-state-tree").IModelType<{
         readonly locked: boolean;
         readonly a: import("./shape-model.js").AnimatedAttrs;
         animated(attr: any): any;
+        readonly timeRange: {
+            start: number;
+            end: number;
+        };
+        readonly active: boolean;
         readonly isSelected: boolean;
         readonly isSelectedDirectly: boolean;
     } & {
@@ -322,6 +327,11 @@ export declare const Page: import("mobx-state-tree").IModelType<{
         readonly locked: boolean;
         readonly a: import("./shape-model.js").AnimatedAttrs;
         animated(attr: any): any;
+        readonly timeRange: {
+            start: number;
+            end: number;
+        };
+        readonly active: boolean;
         readonly isSelected: boolean;
         readonly isSelectedDirectly: boolean;
     } & {
@@ -487,6 +497,11 @@ export declare const Page: import("mobx-state-tree").IModelType<{
         readonly locked: boolean;
         readonly a: import("./shape-model.js").AnimatedAttrs;
         animated(attr: any): any;
+        readonly timeRange: {
+            start: number;
+            end: number;
+        };
+        readonly active: boolean;
         readonly isSelected: boolean;
         readonly isSelectedDirectly: boolean;
     } & {
@@ -654,6 +669,11 @@ export declare const Page: import("mobx-state-tree").IModelType<{
         readonly locked: boolean;
         readonly a: import("./shape-model.js").AnimatedAttrs;
         animated(attr: any): any;
+        readonly timeRange: {
+            start: number;
+            end: number;
+        };
+        readonly active: boolean;
         readonly isSelected: boolean;
         readonly isSelectedDirectly: boolean;
     } & {
@@ -832,6 +852,11 @@ export declare const Page: import("mobx-state-tree").IModelType<{
         readonly locked: boolean;
         readonly a: import("./shape-model.js").AnimatedAttrs;
         animated(attr: any): any;
+        readonly timeRange: {
+            start: number;
+            end: number;
+        };
+        readonly active: boolean;
         readonly isSelected: boolean;
         readonly isSelectedDirectly: boolean;
     } & {
@@ -999,6 +1024,11 @@ export declare const Page: import("mobx-state-tree").IModelType<{
         readonly locked: boolean;
         readonly a: import("./shape-model.js").AnimatedAttrs;
         animated(attr: any): any;
+        readonly timeRange: {
+            start: number;
+            end: number;
+        };
+        readonly active: boolean;
         readonly isSelected: boolean;
         readonly isSelectedDirectly: boolean;
     } & {
@@ -1174,6 +1204,11 @@ export declare const Page: import("mobx-state-tree").IModelType<{
         readonly locked: boolean;
         readonly a: import("./shape-model.js").AnimatedAttrs;
         animated(attr: any): any;
+        readonly timeRange: {
+            start: number;
+            end: number;
+        };
+        readonly active: boolean;
         readonly isSelected: boolean;
         readonly isSelectedDirectly: boolean;
     } & {
@@ -1490,6 +1525,11 @@ export declare const Page: import("mobx-state-tree").IModelType<{
         readonly locked: boolean;
         readonly a: import("./shape-model.js").AnimatedAttrs;
         animated(attr: any): any;
+        readonly timeRange: {
+            start: number;
+            end: number;
+        };
+        readonly active: boolean;
         readonly isSelected: boolean;
         readonly isSelectedDirectly: boolean;
     } & {
@@ -1695,6 +1735,11 @@ export declare const Page: import("mobx-state-tree").IModelType<{
         readonly locked: boolean;
         readonly a: import("./shape-model.js").AnimatedAttrs;
         animated(attr: any): any;
+        readonly timeRange: {
+            start: number;
+            end: number;
+        };
+        readonly active: boolean;
         readonly isSelected: boolean;
         readonly isSelectedDirectly: boolean;
     } & {
@@ -1827,6 +1872,11 @@ export declare const Page: import("mobx-state-tree").IModelType<{
         readonly locked: boolean;
         readonly a: import("./shape-model.js").AnimatedAttrs;
         animated(attr: any): any;
+        readonly timeRange: {
+            start: number;
+            end: number;
+        };
+        readonly active: boolean;
         readonly isSelected: boolean;
         readonly isSelectedDirectly: boolean;
     } & {
@@ -1859,6 +1909,10 @@ export declare const Page: import("mobx-state-tree").IModelType<{
     height: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree/dist/internal").IUnionType<[import("mobx-state-tree").ISimpleType<number>, import("mobx-state-tree").ISimpleType<"auto">]>, [undefined]>;
     background: import("mobx-state-tree").IType<string | undefined, string, string>;
     bleed: import("mobx-state-tree").IType<number | undefined, number, number>;
+    bleedTop: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<number>>;
+    bleedRight: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<number>>;
+    bleedBottom: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<number>>;
+    bleedLeft: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<number>>;
     custom: import("mobx-state-tree").IType<any, any, any>;
     duration: import("mobx-state-tree").IType<number | undefined, number, number>;
     _exporting: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
@@ -1869,9 +1923,11 @@ export declare const Page: import("mobx-state-tree").IModelType<{
 } & {
     readonly startTime: number;
     readonly _exportingOrRendering: boolean;
+    readonly playheadLocalTime: number | null;
 } & {
     readonly computedWidth: any;
     readonly computedHeight: any;
+    readonly computedBleed: import("@polotno/schema").ResolvedBleed;
 } & {
     toJSON(): any;
 } & {

package/model/page-model.js

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

package/model/shape-model.d.ts

@@ -148,6 +148,11 @@ export declare const Shape: import("mobx-state-tree").IModelType<{
     readonly locked: boolean;
     readonly a: AnimatedAttrs;
     animated(attr: any): any;
+    readonly timeRange: {
+        start: number;
+        end: number;
+    };
+    readonly active: boolean;
     readonly isSelected: boolean;
     readonly isSelectedDirectly: boolean;
 } & {

package/model/shape-model.js

@@ -1 +1 @@
-import{types as e,isAlive as t}from"mobx-state-tree";import{animate as i}from"../utils/animations.js";import{observable as n,action as o}from"mobx";import{Node as a}from"./node-model.js";export const Animation=e.model("Animation",{delay:0,duration:500,enabled:!0,type:e.enumeration("Type",["enter","exit","loop"]),name:"none",data:e.frozen({})});export const getDiff=(e,t)=>{const i={};for(const n in t){if("number"==typeof e[n]&&"number"==typeof t[n]){const o=t[n]-e[n];0!==o&&(i[n]=o)}}return i};export const ShapeFilter=e.model("ShapeFilter",{intensity:1});export const INDEPENDENT_FILTERS=["temperature","contrast","highlights","shadows","white","black","saturation","vibrance"];export const Shape=a.named("Shape").props({x:0,y:0,width:100,height:100,rotation:0,opacity:1,animations:e.array(Animation),blurEnabled:!1,blurRadius:10,brightnessEnabled:!1,brightness:0,sepiaEnabled:!1,grayscaleEnabled:!1,filters:e.map(ShapeFilter),shadowEnabled:!1,shadowBlur:5,shadowOffsetX:0,shadowOffsetY:0,shadowColor:"black",shadowOpacity:1,visible:!0,draggable:!0,resizable:!0,selectable:!0,contentEditable:!0,styleEditable:!0,alwaysOnTop:!1,showInExport:!0}).preProcessSnapshot(e=>{const t=Object.assign(Object.assign({},e),{x:"x"in e&&e.x||0,y:"y"in e&&e.y||0,filters:"filters"in e?Array.isArray(e.filters)?{}:e.filters:void 0});return"width"in e&&(t.width=t.width||1),"height"in e&&(t.height=t.height||1),"locked"in e&&e.locked&&(t.draggable=!1,t.contentEditable=!1,t.styleEditable=!1,t.resizable=!1,t.removable=!1),t}).views(e=>{var a,r,s,l,d,c;const p=["x","y","width","height","rotation","opacity","color","fontSize","cropX","cropY","cropWidth","cropHeight"],f=e,u={x:null!==(a=f.x)&&void 0!==a?a:0,y:null!==(r=f.y)&&void 0!==r?r:0,width:null!==(s=f.width)&&void 0!==s?s:0,height:null!==(l=f.height)&&void 0!==l?l:0,rotation:null!==(d=f.rotation)&&void 0!==d?d:0,opacity:null!==(c=f.opacity)&&void 0!==c?c:1};for(const t of p){t in e&&(u[t]=f[t])}const h=n(u),m=o(e=>{for(const t in e){h[t]=e[t]}}),b=o(e=>{Object.assign(h,e)}),y=o(e=>{for(const t in e){"number"==typeof h[t]&&(h[t]=h[t]+e[t])}});return{get locked(){return!(e.draggable||e.contentEditable||e.styleEditable||e.resizable)},get a(){if(!t(e)){return h}const{currentTime:n}=e.store,o={};for(const e in h){o[e]=f[e]}if(m(o),0===n){return h}const a=n-e.page.startTime;if(a>e.page.duration){return h}if(a<0){return h}const r=e.store.animatedElementsIds;if(r.length&&!r.includes(e.id)){return h}const s=e.animations.find(e=>"enter"===e.type),l=(null==s?void 0:s.enabled)&&a<s.delay;l&&b({opacity:0});const d=(null==s?void 0:s.enabled)&&a>=s.delay&&a<=s.delay+s.duration;if(d){const t=a-s.delay,n=i({element:e,animation:s,dTime:t}),o=getDiff(e,n);y(o)}const c=e.animations.find(e=>"exit"===e.type);if(!l&&!d&&(null==c?void 0:c.enabled)&&a>=e.page.duration-c.duration-c.delay&&a<=e.page.duration-c.delay){const t=a-(e.page.duration-c.duration-c.delay),n=i({element:e,animation:c,dTime:t}),o=getDiff(e,n);y(o)}(null==c?void 0:c.enabled)&&a>=e.page.duration-c.delay&&b({opacity:0});const p=e.animations.find(e=>"loop"===e.type);if(null==p?void 0:p.enabled){const t=i({element:e,animation:p,dTime:a}),n=getDiff(e,t);y(n)}return h},animated(e){return this.a[e]},get isSelected(){return!!t(e)&&e.store.selectedShapes.indexOf(e)>=0&&e.selectable},get isSelectedDirectly(){return!!t(e)&&e.store.selectedElements.indexOf(e)>=0&&e.selectable}}}).actions(e=>({setAnimation(t,i){const n=e.animations.find(e=>e.type===t);n?Object.assign(n,i):e.animations.push(Object.assign({type:t},i))},setFilter(t,i){INDEPENDENT_FILTERS.includes(t)||e.filters.forEach((t,i)=>{INDEPENDENT_FILTERS.includes(i.toString())||e.filters.delete(i.toString())}),null==i?e.filters.delete(t):e.filters.set(t,{intensity:i})}}));
+import{types as e,isAlive as t}from"mobx-state-tree";import{animate as i}from"../utils/animations.js";import{observable as n,action as o}from"mobx";import{Node as a}from"./node-model.js";import{getElementTimeRange as r,getPlayheadLocalTime as s}from"../utils/timeline.js";export const Animation=e.model("Animation",{delay:0,duration:500,enabled:!0,type:e.enumeration("Type",["enter","exit","loop"]),name:"none",data:e.frozen({})});export const getDiff=(e,t)=>{const i={};for(const n in t){if("number"==typeof e[n]&&"number"==typeof t[n]){const o=t[n]-e[n];0!==o&&(i[n]=o)}}return i};export const ShapeFilter=e.model("ShapeFilter",{intensity:1});export const INDEPENDENT_FILTERS=["temperature","contrast","highlights","shadows","white","black","saturation","vibrance"];export const Shape=a.named("Shape").props({x:0,y:0,width:100,height:100,rotation:0,opacity:1,animations:e.array(Animation),blurEnabled:!1,blurRadius:10,brightnessEnabled:!1,brightness:0,sepiaEnabled:!1,grayscaleEnabled:!1,filters:e.map(ShapeFilter),shadowEnabled:!1,shadowBlur:5,shadowOffsetX:0,shadowOffsetY:0,shadowColor:"black",shadowOpacity:1,visible:!0,draggable:!0,resizable:!0,selectable:!0,contentEditable:!0,styleEditable:!0,alwaysOnTop:!1,showInExport:!0}).preProcessSnapshot(e=>{const t=Object.assign(Object.assign({},e),{x:"x"in e&&e.x||0,y:"y"in e&&e.y||0,filters:"filters"in e?Array.isArray(e.filters)?{}:e.filters:void 0});return"width"in e&&(t.width=t.width||1),"height"in e&&(t.height=t.height||1),"locked"in e&&e.locked&&(t.draggable=!1,t.contentEditable=!1,t.styleEditable=!1,t.resizable=!1,t.removable=!1),t}).views(e=>{var a,l,d,c,p,u;const f=["x","y","width","height","rotation","opacity","color","fontSize","cropX","cropY","cropWidth","cropHeight"],m=e,h={x:null!==(a=m.x)&&void 0!==a?a:0,y:null!==(l=m.y)&&void 0!==l?l:0,width:null!==(d=m.width)&&void 0!==d?d:0,height:null!==(c=m.height)&&void 0!==c?c:0,rotation:null!==(p=m.rotation)&&void 0!==p?p:0,opacity:null!==(u=m.opacity)&&void 0!==u?u:1};for(const t of f){t in e&&(h[t]=m[t])}const g=n(h),b=o(e=>{for(const t in e){g[t]=e[t]}}),y=o(e=>{Object.assign(g,e)}),E=o(e=>{for(const t in e){"number"==typeof g[t]&&(g[t]=g[t]+e[t])}});return{get locked(){return!(e.draggable||e.contentEditable||e.styleEditable||e.resizable)},get a(){if(!t(e)){return g}const n={};for(const e in g){n[e]=m[e]}b(n);const o=s(e);if(null===o){return g}const a=e.store.isEditingPaused&&this.isSelected,r=e.store.animatedElementsIds;if(r.length&&!r.includes(e.id)){return g}const l=e.animations.find(e=>"enter"===e.type),d=(null==l?void 0:l.enabled)&&o<l.delay;d&&y({opacity:0});const c=(null==l?void 0:l.enabled)&&o>=l.delay&&o<=l.delay+l.duration;if(c&&!a){const t=o-l.delay,n=i({element:e,animation:l,dTime:t}),a=getDiff(e,n);E(a)}const p=e.animations.find(e=>"exit"===e.type);if(!d&&!c&&(null==p?void 0:p.enabled)&&o>=e.page.duration-p.duration-p.delay&&o<=e.page.duration-p.delay&&!a){const t=o-(e.page.duration-p.duration-p.delay),n=i({element:e,animation:p,dTime:t}),a=getDiff(e,n);E(a)}(null==p?void 0:p.enabled)&&o>=e.page.duration-p.delay&&y({opacity:0});const u=e.animations.find(e=>"loop"===e.type);if((null==u?void 0:u.enabled)&&!a){const t=i({element:e,animation:u,dTime:o}),n=getDiff(e,t);E(n)}return g},animated(e){return this.a[e]},get timeRange(){return t(e)&&e.page?r(e.animations,e.page.duration):{start:0,end:0}},get active(){if(!t(e)){return!0}const i=s(e);if(null===i){return!0}const{start:n,end:o}=this.timeRange;return i>=n&&i<o},get isSelected(){return!!t(e)&&e.store.selectedShapes.indexOf(e)>=0&&e.selectable},get isSelectedDirectly(){return!!t(e)&&e.store.selectedElements.indexOf(e)>=0&&e.selectable}}}).actions(e=>({setAnimation(t,i){const n=e.animations.find(e=>e.type===t);n?Object.assign(n,i):e.animations.push(Object.assign({type:t},i))},setFilter(t,i){INDEPENDENT_FILTERS.includes(t)||e.filters.forEach((t,i)=>{INDEPENDENT_FILTERS.includes(i.toString())||e.filters.delete(i.toString())}),null==i?e.filters.delete(t):e.filters.set(t,{intensity:i})}}));