polotno 2.36.2 → 2.36.3

package/canvas/video-element.js

@@ -1 +1 @@
-import e from"react";import{observer as t}from"mobx-react-lite";import{autorun as r}from"mobx";import{Arc as n,Group as o,Image as i,Rect as a,Text as d,Transformer as h}from"react-konva";import c from"use-image";import l from"konva";import{Portal as s}from"react-konva-utils";import{incrementLoader as u,triggerLoadError as g}from"../utils/loader.js";import*as f from"../utils/svg.js";import{flags as m}from"../utils/flags.js";import{applyFilter as p}from"./apply-filters.js";import{useFadeIn as w}from"./use-fadein.js";import{isTouchDevice as v}from"../utils/screen.js";import{useMediabunnyVideo as x}from"./use-mediabunny-video.js";function M(){return document.createElement("canvas")}const E=new window.Image;E.src=f.svgToURL('\n  <svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n  <path opacity="0.6" d="M4 5.49683V18.5032C4 20.05 5.68077 21.0113 7.01404 20.227L18.0694 13.7239C19.384 12.9506 19.384 11.0494 18.0694 10.2761L7.01404 3.77296C5.68077 2.98869 4 3.95 4 5.49683Z" fill="white"/>\n  <path d="M4 5.49683V18.5032C4 20.05 5.68077 21.0113 7.01404 20.227L18.0694 13.7239C19.384 12.9506 19.384 11.0494 18.0694 10.2761L7.01404 3.77296C5.68077 2.98869 4 3.95 4 5.49683Z" stroke="#323232" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>\n  </svg>\n');const y=new window.Image;y.src=f.svgToURL('\n  <svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n  <path opacity="0.6" d="M14 19L14 5C14 3.89543 14.8954 3 16 3L17 3C18.1046 3 19 3.89543 19 5L19 19C19 20.1046 18.1046 21 17 21L16 21C14.8954 21 14 20.1046 14 19Z" fill="white"/>\n  <path opacity="0.6" d="M10 19L10 5C10 3.89543 9.10457 3 8 3L7 3C5.89543 3 5 3.89543 5 5L5 19C5 20.1046 5.89543 21 7 21L8 21C9.10457 21 10 20.1046 10 19Z" fill="white"/>\n  <path d="M14 19L14 5C14 3.89543 14.8954 3 16 3L17 3C18.1046 3 19 3.89543 19 5L19 19C19 20.1046 18.1046 21 17 21L16 21C14.8954 21 14 20.1046 14 19Z" stroke="#323232" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>\n  <path d="M10 19L10 5C10 3.89543 9.10457 3 8 3L7 3C5.89543 3 5 3.89543 5 5L5 19C5 20.1046 5.89543 21 7 21L8 21C9.10457 21 10 20.1046 10 19Z" stroke="#323232" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>\n  </svg>\n');export const useCornerRadiusAndCrop=(t,r,n,o,i=0,a=!1)=>{const d=Math.floor(Math.max(t.width*o,1)),h=Math.floor(Math.max(t.height*o,1)),c=Math.min(i*o,d/2,h/2),s=Math.max(t.width/n.width,t.height/n.height)*o,u=t.page._exportingOrRendering&&m.imageDownScalingEnabled&&s<1&&!a,g=r instanceof HTMLVideoElement?r.videoWidth:null==r?void 0:r.width,f=r instanceof HTMLVideoElement?r.videoHeight:null==r?void 0:r.height,p=0===n.x&&0===n.y&&n.width===g&&n.height===f,w=e.useMemo(()=>{if(r&&g&&f){return p&&0===c&&!u?void 0:M()}},[r,c,u,p,g,f]),v=()=>{if(!w||!r){return}w.width=d,w.height=h;const e=w.getContext("2d");if(!e){return}c&&(e.beginPath(),e.moveTo(c,0),e.lineTo(d-c,0),e.arc(d-c,c,c,3*Math.PI/2,0,!1),e.lineTo(d,h-c),e.arc(d-c,h-c,c,0,Math.PI/2,!1),e.lineTo(c,h),e.arc(c,h-c,c,Math.PI/2,Math.PI,!1),e.lineTo(0,c),e.arc(c,c,c,Math.PI,3*Math.PI/2,!1),e.clip());const t=u?function(e,t){var r,n;const o=M(),i=e instanceof HTMLVideoElement?e.videoWidth:e.width,a=e instanceof HTMLVideoElement?e.videoHeight:e.height;o.width=i,o.height=a,null===(r=o.getContext("2d"))||void 0===r||r.drawImage(e,0,0,o.width,o.height);const d=function(e,t,r,n,o,i,a){for(var d=new ImageData(t,r),h=new Int32Array(e.data.buffer),c=e.width,l=new Int32Array(d.data.buffer),s=d.width,u=t/i,g=r/a,f=Math.round(1/u),m=Math.round(1/g),p=f*m,w=0;w<d.height;w++){for(var v=0;v<s;v++){for(var x=0+Math.round(v/u)+(0+Math.round(w/g))*c,M=0,E=0,y=0,b=0,L=0;L<m;L++){for(var T=0;T<f;T++){var C=h[x+T+L*c];M+=C<<24>>>24,E+=C<<16>>>24,y+=C<<8>>>24,b+=C>>>24}}M=Math.round(M/p),E=Math.round(E/p),y=Math.round(y/p),b=Math.round(b/p),l[v+w*s]=b<<24|y<<16|E<<8|M}}return d}(o.getContext("2d").getImageData(0,0,o.width,o.height),Math.floor(o.width*t),Math.floor(o.height*t),0,0,o.width,o.height);return o.width=Math.floor(o.width*t),o.height=Math.floor(o.height*t),null===(n=o.getContext("2d"))||void 0===n||n.putImageData(d,0,0),o}(r,s):r,o=u?{x:Math.floor(n.x*s),y:Math.floor(n.y*s),width:Math.floor(n.width*s),height:Math.floor(n.height*s)}:n;e.drawImage(t,o.x,o.y,o.width,o.height,0,0,w.width,w.height)};return e.useLayoutEffect(()=>{v()},[w,t.width,t.height,n.x,n.y,n.width,n.height,i,o,a,t.page._exportingOrRendering,u]),e.useEffect(()=>()=>{w&&"CANVAS"===w.nodeName&&l.Util.releaseCanvas(w)},[w]),[w||r,v]};const b=M(),L=t(({element:t})=>{const r=Math.min(30,t.width/4,t.height/4),i=e.useRef(null);return e.useEffect(()=>{const e=i.current;if(!e){return}const t=new l.Animation(t=>{e.rotate(((null==t?void 0:t.timeDiff)||0)/2)},e.getLayer());return t.start(),()=>{t.stop()}}),e.createElement(o,{x:t.a.x,y:t.a.y,rotation:t.a.rotation,listening:!1,opacity:t.a.opacity,hideInExport:!t.showInExport},e.createElement(a,{width:t.width,height:t.height,fill:"rgba(124, 173, 212, 0.8)"}),e.createElement(n,{ref:i,x:t.width/2,y:t.height/2,fill:"white",outerRadius:Math.abs(r),innerRadius:Math.max(1,r-5),angle:270}))}),T=t(({element:t})=>{const r=Math.max(10,Math.min(30,t.width/25));return e.createElement(o,{x:t.a.x,y:t.a.y,rotation:t.a.rotation,listening:!1,opacity:t.a.opacity,hideInExport:!t.showInExport},e.createElement(a,{width:t.width,height:t.height,fill:"rgba(223, 102, 102, 0.8)"}),e.createElement(d,{text:"Can not load the video...",fontSize:r,width:t.width,height:t.height,align:"center",fill:"white",verticalAlign:"middle",padding:5}))});let C=function(t,r,n){const o=e.useRef("loading"),i=e.useRef(null),[a,d]=e.useState(0),h=e.useRef(),c=e.useRef(),l=e.useRef();return h.current===t&&c.current===r&&l.current===n||(o.current="loading",i.current=void 0,h.current=t,c.current=r,l.current=n),e.useLayoutEffect(function(){if(t){var e=document.createElement("video");return e.addEventListener("canplay",a),e.addEventListener("error",h),r&&(e.crossOrigin=r),n&&(e.referrerPolicy=n),e.src=t,e.load(),function(){e.removeEventListener("canplay",a),e.removeEventListener("error",h)}}function a(){o.current="loaded",i.current=e,i.current.currentTime=0,d(Math.random()),i.current.removeEventListener("canplay",a)}function h(t){var r;const n=4===e.readyState,a=e.buffered&&e.buffered.length>0&&e.buffered.end(e.buffered.length-1)/e.duration*100>=100;if(n&&a){return}const h=t.message||(null===(r=e.error)||void 0===r?void 0:r.message)||"Unknown error",c=new Error("Video failed to load: "+h);console.error(c),o.current="failed",i.current=void 0,d(Math.random())}},[t,r,n]),[i.current,o.current]};export const setVideoLoaderHook=e=>{C=e};function R(e){return e.readyState>=HTMLMediaElement.HAVE_CURRENT_DATA}export const useLoader=(t,r,n)=>{const o=e.useRef(),i=()=>{var e;null===(e=o.current)||void 0===e||e.call(o),o.current=void 0};e.useEffect(()=>i,[]),e.useLayoutEffect(()=>{const e=r.slice(0,200),a=`video with id ${n} url: ${e}`;"loading"!==t||o.current||(o.current=u(a)),"loading"!==t&&i(),"failed"===t&&g(a)},[t])};export const VideoElement=t(({element:t,store:n})=>{var d;const[g,m]=e.useState(!1),I=e.useRef(null),S=e.useRef(null),k=n.selectedShapes.indexOf(t)>=0&&t.selectable,[H,X]=e.useState(!1),[Y,W]=C(t.src,"anonymous"),[O,_]=e.useState(!1),A=n.activePage===t.page,P=t.page._exportingOrRendering&&"loaded"===W,V=x(t,n,P);useLoader(W,t.src,t.id),Y&&(Y.playsInline=!0);const D=((t,r,n)=>{const o=e.useMemo(()=>{var e,o;const{flipX:i,flipY:a}=t,d="svg"===t.type||t.src.indexOf("data:image/svg+xml")>=0||t.src.indexOf(".svg")>=0,h=navigator.userAgent.toLowerCase().indexOf("firefox")>-1;if(!(i||a||h&&d)){return r}if(!r){return null}const c=r instanceof HTMLVideoElement?r.videoWidth:null==r?void 0:r.width,l=r instanceof HTMLVideoElement?r.videoHeight:null==r?void 0:r.height;if(!c||!l){return null}const s=M();let u=1;"svg"===t.type&&(u=Math.max(t.width/c*n,t.height/l*n)),s.width=Math.max(c*u,1),s.height=Math.max(l*u,1);let g=i?-s.width:0,f=a?-s.height:0;return null===(e=s.getContext("2d"))||void 0===e||e.scale(i?-1:1,a?-1:1),null===(o=s.getContext("2d"))||void 0===o||o.drawImage(r,g,f,s.width,s.height),s},[t.flipX,t.flipY,r,t.width,t.height,n]);return e.useEffect(()=>()=>{o&&"CANVAS"===o.nodeName&&l.Util.releaseCanvas(o)},[o]),o})(t,Y,n._elementsPixelRatio),z=P&&V||D||b;e.useEffect(()=>{Y&&n.history.ignore(()=>{t.set({duration:1e3*Y.duration})})},[Y]),e.useEffect(()=>{var e;if(!Y){return}const r=n.animatedElementsIds,o=(!r.length||r.includes(t.id))&&n.isPlaying,i=A&&(o||H);if(!i){return void Y.pause()}i&&(Y.currentTime=t.startTime*Y.duration,Y.play());const a=new l.Animation(()=>{le.current()},null===(e=I.current)||void 0===e?void 0:e.getLayer());a.start();const d=()=>{X(!1),Y.currentTime=t.startTime*Y.duration},h=()=>{Y.currentTime>=t.endTime*Y.duration&&(Y.pause(),Y.currentTime=t.startTime*Y.duration,X(!1))};return Y.addEventListener("ended",d),Y.addEventListener("timeupdate",h),()=>{Y.pause(),a.stop(),Y.removeEventListener("ended",d),Y.removeEventListener("timeupdate",h)}},[Y,H,n.isPlaying,A]),e.useEffect(()=>{Y&&(Y.volume=t.volume)},[Y,t.volume]);const j=e.useRef();e.useEffect(()=>{const e=r(()=>{var e,r;if(Y){if(P&&V){return ce(),void n.currentTime}const o=n.animatedElementsIds;if(o.length&&!o.includes(t.id)){return}const i=n.currentTime>=t.page.startTime&&n.currentTime<t.page.startTime+t.page.duration,a=t.startTime*Y.duration*1e3,d=Y.duration*(t.endTime-t.startTime)*1e3;let h=((n.currentTime||t.page.startTime)-t.page.startTime)%d+a;if(i||(h=0),Math.abs(1e3*Y.currentTime-h)>500||!n.isPlaying){const e=h/1e3;e!==Y.currentTime&&(Y.currentTime=e),!R(Y)&&!n.isPlaying&&!j.current&&(j.current=u(`video ${t.id}`))}le.current(),null===(r=null===(e=I.current)||void 0===e?void 0:e.getLayer())||void 0===r||r.batchDraw()}});return()=>{e(),j.current&&(j.current(),j.current=null)}},[n,Y,P,V]),e.useEffect(()=>{var e;if(!Y){return}if(P){return null===(e=j.current)||void 0===e||e.call(j),void(j.current=null)}const r=()=>{var e,r;!R(Y)&&t.page._exportingOrRendering||j.current&&(le.current(),null===(r=null===(e=I.current)||void 0===e?void 0:e.getLayer())||void 0===r||r.batchDraw(),j.current(),j.current=null)};let n;return t.page._exportingOrRendering&&(n=setInterval(r,20)),Y.addEventListener("timeupdate",r),Y.addEventListener("canplay",r),()=>{clearInterval(n),Y.removeEventListener("timeupdate",r),Y.removeEventListener("canplay",r)}},[t.page._exportingOrRendering,Y,t.id,u,P]);let{cropX:B,cropY:U,cropWidth:N,cropHeight:Z}=t;"loaded"!==W&&(B=U=0,N=Z=1);const F=($=z)instanceof HTMLVideoElement?$.videoWidth:(null==$?void 0:$.width)||0;var $;const q=(e=>e instanceof HTMLVideoElement?e.videoHeight:(null==e?void 0:e.height)||0)(z),G=F*N,J=q*Z,K=t.width/t.height;let Q,ee;const te=G/J,re="svg"===t.type;re?(Q=G,ee=J):K>=te?(Q=G,ee=G/K):(Q=J*K,ee=J);const ne={x:F*B,y:q*U,width:Q,height:ee},oe=null!==(d=t.cornerRadius)&&void 0!==d?d:0,[ie,ae]=useCornerRadiusAndCrop(t,z,ne,n._elementsPixelRatio,oe,!0);let[de,he]=((t,r,n,o)=>{const i=(t=>{const[r,n]=e.useState(t);return e.useEffect(()=>{(async()=>{const e=await async function(e){if(!(e.indexOf("data:image/svg+xml")>=0||e.indexOf(".svg")>=0)){return e}const t=await f.urlToString(e),r=f.fixSize(t);return f.svgToURL(r)}(t);e!==r&&n(e)})()},[t]),r})(t.clipSrc||""),[a,d]=c(i,"anonymous"),h=t.clipSrc?d:"loaded";useLoader(h,t.clipSrc,t.id);const s=e.useMemo(()=>{if(r&&a){return M()}},[r,a]);function u(){var e;if(!a){return}const o=r instanceof HTMLVideoElement?r.videoWidth:null==r?void 0:r.width,i=r instanceof HTMLVideoElement?r.videoHeight:null==r?void 0:r.height;if(!r||!o||!i){return}if(!a||!a.width||!a.height){return}if(!s){return}const d=M(),h=Math.max(t.width/a.width*n,t.height/a.height*n);d.width=a.width*h,d.height=a.height*h,null===(e=d.getContext("2d"))||void 0===e||e.drawImage(a,0,0,d.width,d.height),s.width=Math.max(o,1),s.height=Math.max(i,1);const c=s.getContext("2d");c&&(c.save(),c.drawImage(d,0,0,o,i),l.Util.releaseCanvas(d),c.globalCompositeOperation="source-in",c.drawImage(r,0,0,s.width,s.height),c.restore())}return e.useLayoutEffect(()=>{u()},[s,r,a,t.width,t.height,n,...o]),[t.clipSrc&&a?s:r,u]})(t,ie,n._elementsPixelRatio,[ne,oe,n._elementsPixelRatio]);function ce(){var e,t;ae(),he(),null===(t=null===(e=I.current)||void 0===e?void 0:e.getLayer())||void 0===t||t.batchDraw()}e.useEffect(()=>{ce()});const le=e.useRef(ce);le.current=ce;const se=Math.max(t.width/Q,t.height/ee);e.useEffect(()=>{var e;if(!t._cropModeEnabled){return}const r=null===(e=I.current)||void 0===e?void 0:e.getStage();function n(e){t._cropModeEnabled&&e.target!==S.current&&t.toggleCropMode(!1)}function o(e){t._cropModeEnabled&&e.target.parentNode!==r.content&&t.toggleCropMode(!1)}return document.body.addEventListener("click",o),null==r||r.on("click",n),null==r||r.on("tap",n),()=>{document.body.removeEventListener("click",o),document.body.removeEventListener("touchstart",o),null==r||r.off("click",n),null==r||r.off("click",n)}},[t._cropModeEnabled]),e.useLayoutEffect(()=>{if(!g&&!t._cropModeEnabled){return p(I.current,t),r(()=>{p(I.current,t)},{delay:100})}},[z,g,N,Z,t._cropModeEnabled]),e.useLayoutEffect(()=>{var e;g||t._cropModeEnabled?null===(e=I.current)||void 0===e||e.clearCache():p(I.current,t)},[g,t.width,t.height,t._cropModeEnabled]),e.useEffect(()=>{p(I.current,t)},[t.shadowEnabled,t.shadowBlur,t.cornerRadius,t.shadowColor,t.shadowOffsetX,t.shadowOffsetY,t.shadowOpacity]);const ue=e.useRef(null),ge=e.useRef(null),fe=e.useRef(null);e.useLayoutEffect(()=>{t._cropModeEnabled&&(ge.current.nodes([ue.current]),fe.current.nodes([S.current]))},[t._cropModeEnabled]);const me=e=>{Math.round(e.target.x())>0&&(e.target.x(0),e.target.scaleX(1)),Math.round(e.target.y())>0&&(e.target.y(0),e.target.scaleY(1));const r=e.target.width()*e.target.scaleX(),n=e.target.height()*e.target.scaleY(),o=Math.min(1,Q/r),i=Math.min(1,ee/n),a=1-o,d=Math.min(a,Math.max(0,Math.round(-e.target.x())/r)),h=1-i,c=Math.min(h,Math.max(0,Math.round(-e.target.y())/n));e.target.setAttrs({x:-d*F,y:-c*q,scaleX:1,scaleY:1}),t.set({cropX:d,cropY:c,cropWidth:o,cropHeight:i})},pe=()=>{"svg"!==t.type&&t.contentEditable&&setTimeout(()=>{t.toggleCropMode(!0)})},we="loading"===W,ve="failed"===W,xe=!we&&!ve,Me=e.useRef({cropX:0,cropY:0,cropWidth:0,cropHeight:0}),Ee=xe?t.a.opacity:0;w(I,Ee);const ye=t.selectable||"admin"===n.role,be=v();return e.createElement(e.Fragment,null,e.createElement(o,{onMouseEnter:()=>_(!0),onMouseLeave:()=>_(!1)},we&&e.createElement(L,{element:t}),ve&&e.createElement(T,{element:t}),e.createElement(i,{ref:I,name:"element",id:t.id,image:de,x:t.a.x,y:t.a.y,width:t.a.width||1,height:t.a.height||1,rotation:t.a.rotation,opacity:Ee,shadowEnabled:t.shadowEnabled,shadowBlur:t.shadowBlur,shadowOffsetX:t.shadowOffsetX,shadowOffsetY:t.shadowOffsetY,shadowColor:t.shadowColor,shadowOpacity:t.shadowOpacity,customCrop:ne,listening:ye,draggable:be?t.draggable&&k:t.draggable,preventDefault:!be||k,hideInExport:!t.showInExport,onDragMove:e=>{t.set({x:e.target.x(),y:e.target.y()})},onDragEnd:e=>{t.set({x:e.target.x(),y:e.target.y()})},onDblClick:pe,onDblTap:pe,onTransformStart:()=>{m(!0),Me.current={cropX:t.cropX,cropY:t.cropY,cropWidth:t.cropWidth,cropHeight:t.cropHeight}},onTransform:e=>{var r;const n=e.currentTarget,o=Math.abs(n.scaleX()-1)<1e-7?1:n.scaleX(),i=Math.abs(n.scaleY()-1)<1e-7?1:n.scaleY();n.scaleX(1),n.scaleY(1);const a=null===(r=e.target.getStage())||void 0===r?void 0:r.findOne("Transformer"),d=1-Q/F,h=Math.min(d,Math.max(0,t.cropX)),c=1-ee/q,l=Math.min(c,Math.max(0,t.cropY)),s=a.getActiveAnchor(),u=!(s.indexOf("middle")>=0||s.indexOf("center")>=0),g=!u&&o<1&&Me.current.cropHeight>ee/q;let f=u?t.cropWidth:t.cropWidth*o;g&&(f=t.cropWidth);const m=!u&&i<1&&Me.current.cropWidth>Q/F;let p=u?t.cropHeight:t.cropHeight*i;m&&(p=t.cropHeight),re&&(f=t.cropWidth,p=t.cropHeight),t.set({cropX:h,cropY:l,x:n.x(),y:n.y(),width:n.width()*o,height:n.height()*i,rotation:e.target.rotation(),cropWidth:Math.min(f,1-h),cropHeight:Math.min(p,1-l)})},onTransformEnd:e=>{const r=e.currentTarget;t.set({width:r.width(),height:r.height(),x:r.x(),y:r.y(),rotation:e.target.rotation(),cropWidth:Q/F,cropHeight:ee/q}),m(!1)}}),e.createElement(a,{x:t.a.x,y:t.a.y,width:Math.max(t.a.width-t.borderSize,0),height:Math.max(t.a.height-t.borderSize,0),opacity:Ee,offsetX:-t.borderSize/2,offsetY:-t.borderSize/2,stroke:t.borderColor,strokeWidth:t.borderSize,listening:!1,visible:!!t.borderSize,rotation:t.rotation,cornerRadius:Math.max(0,oe-t.borderSize),hideInExport:!t.showInExport}),!n.isPlaying&&e.createElement(i,{image:H?(O||be)&&y:E,x:t.a.x,y:t.a.y,offsetX:-t.a.width/2+15/n.scale,offsetY:-t.a.height/2+15/n.scale,rotation:t.a.rotation,width:30/n.scale,height:30/n.scale,hideInExport:!0,onClick:()=>X(!H),onTap:()=>X(!H)}),t._cropModeEnabled&&e.createElement(s,{selector:".page-abs-container",enabled:!0},e.createElement(a,{x:-window.innerWidth/n.scale,y:-window.innerWidth/n.scale,width:window.innerWidth/n.scale*3,height:window.innerWidth/n.scale*3,fill:"rgba(0,0,0,0.3)"}),e.createElement(i,{listening:!1,image:de,x:t.a.x,y:t.a.y,width:t.a.width,height:t.a.height,rotation:t.a.rotation,shadowEnabled:t.shadowEnabled,shadowBlur:t.shadowBlur}),e.createElement(o,{x:t.a.x,y:t.a.y,rotation:t.a.rotation,scaleX:se,scaleY:se},e.createElement(i,{image:z,ref:S,width:F,height:q,opacity:.4,draggable:!0,x:-t.cropX*F,y:-t.cropY*q,onDragMove:me,onTransform:me}),e.createElement(h,{ref:fe,anchorSize:20,enabledAnchors:["top-left","top-right","bottom-left","bottom-right"],boundBoxFunc:(e,t)=>t.width<5||t.height<5?e:t,rotateEnabled:!1,borderEnabled:!1,anchorCornerRadius:10,anchorStrokeWidth:2,borderStrokeWidth:2}),e.createElement(a,{width:Q,height:ee,ref:ue,listening:!1,onTransform:e=>{e.target.x()<-t.cropX*F-1e-9&&(e.target.x(-t.cropX*F),e.target.scaleX(1)),e.target.y()<-t.cropY*q-1e-9&&(e.target.y(-t.cropY*q),e.target.scaleY(1));const r=Math.min(1,Math.max(0,t.cropX+e.target.x()/F)),n=Math.min(1,Math.max(0,e.target.y()/q+t.cropY)),o=e.target.width()*e.target.scaleX(),i=e.target.height()*e.target.scaleY(),a=Math.min(1-r,o/F),d=Math.min(1-n,i/q),h=e.target.getAbsolutePosition(e.target.getParent().getParent());e.target.scale({x:1,y:1}),e.target.position({x:0,y:0}),t.set({x:h.x,y:h.y,cropX:r,cropY:n,cropWidth:a,cropHeight:d,width:Math.min(o*se,F*(1-r)*se),height:Math.min(i*se,q*(1-n)*se)})}}),e.createElement(h,{ref:ge,enabledAnchors:["top-left","top-right","bottom-left","bottom-right"],boundBoxFunc:(e,t)=>t.width<5||t.height<5?e:t,keepRatio:!1,rotateEnabled:!1,anchorFill:"rgb(240, 240, 240)",anchorStrokeWidth:2,borderStrokeWidth:2,visible:t.resizable})))))});
+import e from"react";import{observer as t}from"mobx-react-lite";import{autorun as r}from"mobx";import{Arc as n,Group as o,Image as i,Rect as a,Text as d,Transformer as h}from"react-konva";import c from"use-image";import l from"konva";import{Portal as s}from"react-konva-utils";import{incrementLoader as u,triggerLoadError as g}from"../utils/loader.js";import*as f from"../utils/svg.js";import{flags as m}from"../utils/flags.js";import{applyFilter as p}from"./apply-filters.js";import{useFadeIn as w}from"./use-fadein.js";import{isTouchDevice as v}from"../utils/screen.js";import{useMediabunnyVideo as x}from"./use-mediabunny-video.js";function M(){return document.createElement("canvas")}const E=new window.Image;E.src=f.svgToURL('\n  <svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n  <path opacity="0.6" d="M4 5.49683V18.5032C4 20.05 5.68077 21.0113 7.01404 20.227L18.0694 13.7239C19.384 12.9506 19.384 11.0494 18.0694 10.2761L7.01404 3.77296C5.68077 2.98869 4 3.95 4 5.49683Z" fill="white"/>\n  <path d="M4 5.49683V18.5032C4 20.05 5.68077 21.0113 7.01404 20.227L18.0694 13.7239C19.384 12.9506 19.384 11.0494 18.0694 10.2761L7.01404 3.77296C5.68077 2.98869 4 3.95 4 5.49683Z" stroke="#323232" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>\n  </svg>\n');const y=new window.Image;y.src=f.svgToURL('\n  <svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n  <path opacity="0.6" d="M14 19L14 5C14 3.89543 14.8954 3 16 3L17 3C18.1046 3 19 3.89543 19 5L19 19C19 20.1046 18.1046 21 17 21L16 21C14.8954 21 14 20.1046 14 19Z" fill="white"/>\n  <path opacity="0.6" d="M10 19L10 5C10 3.89543 9.10457 3 8 3L7 3C5.89543 3 5 3.89543 5 5L5 19C5 20.1046 5.89543 21 7 21L8 21C9.10457 21 10 20.1046 10 19Z" fill="white"/>\n  <path d="M14 19L14 5C14 3.89543 14.8954 3 16 3L17 3C18.1046 3 19 3.89543 19 5L19 19C19 20.1046 18.1046 21 17 21L16 21C14.8954 21 14 20.1046 14 19Z" stroke="#323232" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>\n  <path d="M10 19L10 5C10 3.89543 9.10457 3 8 3L7 3C5.89543 3 5 3.89543 5 5L5 19C5 20.1046 5.89543 21 7 21L8 21C9.10457 21 10 20.1046 10 19Z" stroke="#323232" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>\n  </svg>\n');export const useCornerRadiusAndCrop=(t,r,n,o,i=0,a=!1)=>{const d=Math.floor(Math.max(t.width*o,1)),h=Math.floor(Math.max(t.height*o,1)),c=Math.min(i*o,d/2,h/2),s=Math.max(t.width/n.width,t.height/n.height)*o,u=t.page._exportingOrRendering&&m.imageDownScalingEnabled&&s<1&&!a,g=r instanceof HTMLVideoElement?r.videoWidth:null==r?void 0:r.width,f=r instanceof HTMLVideoElement?r.videoHeight:null==r?void 0:r.height,p=0===n.x&&0===n.y&&n.width===g&&n.height===f,w=e.useMemo(()=>{if(r&&g&&f){return p&&0===c&&!u?void 0:M()}},[r,c,u,p,g,f]),v=()=>{if(!w||!r){return}w.width=d,w.height=h;const e=w.getContext("2d");if(!e){return}c&&(e.beginPath(),e.moveTo(c,0),e.lineTo(d-c,0),e.arc(d-c,c,c,3*Math.PI/2,0,!1),e.lineTo(d,h-c),e.arc(d-c,h-c,c,0,Math.PI/2,!1),e.lineTo(c,h),e.arc(c,h-c,c,Math.PI/2,Math.PI,!1),e.lineTo(0,c),e.arc(c,c,c,Math.PI,3*Math.PI/2,!1),e.clip());const t=u?function(e,t){var r,n;const o=M(),i=e instanceof HTMLVideoElement?e.videoWidth:e.width,a=e instanceof HTMLVideoElement?e.videoHeight:e.height;o.width=i,o.height=a,null===(r=o.getContext("2d"))||void 0===r||r.drawImage(e,0,0,o.width,o.height);const d=function(e,t,r,n,o,i,a){for(var d=new ImageData(t,r),h=new Int32Array(e.data.buffer),c=e.width,l=new Int32Array(d.data.buffer),s=d.width,u=t/i,g=r/a,f=Math.round(1/u),m=Math.round(1/g),p=f*m,w=0;w<d.height;w++){for(var v=0;v<s;v++){for(var x=0+Math.round(v/u)+(0+Math.round(w/g))*c,M=0,E=0,y=0,b=0,L=0;L<m;L++){for(var T=0;T<f;T++){var C=h[x+T+L*c];M+=C<<24>>>24,E+=C<<16>>>24,y+=C<<8>>>24,b+=C>>>24}}M=Math.round(M/p),E=Math.round(E/p),y=Math.round(y/p),b=Math.round(b/p),l[v+w*s]=b<<24|y<<16|E<<8|M}}return d}(o.getContext("2d").getImageData(0,0,o.width,o.height),Math.floor(o.width*t),Math.floor(o.height*t),0,0,o.width,o.height);return o.width=Math.floor(o.width*t),o.height=Math.floor(o.height*t),null===(n=o.getContext("2d"))||void 0===n||n.putImageData(d,0,0),o}(r,s):r,o=u?{x:Math.floor(n.x*s),y:Math.floor(n.y*s),width:Math.floor(n.width*s),height:Math.floor(n.height*s)}:n;e.drawImage(t,o.x,o.y,o.width,o.height,0,0,w.width,w.height)};return e.useLayoutEffect(()=>{v()},[w,t.width,t.height,n.x,n.y,n.width,n.height,i,o,a,t.page._exportingOrRendering,u]),e.useEffect(()=>()=>{w&&"CANVAS"===w.nodeName&&l.Util.releaseCanvas(w)},[w]),[w||r,v]};const b=M(),L=t(({element:t})=>{const r=Math.min(30,t.width/4,t.height/4),i=e.useRef(null);return e.useEffect(()=>{const e=i.current;if(!e){return}const t=new l.Animation(t=>{e.rotate(((null==t?void 0:t.timeDiff)||0)/2)},e.getLayer());return t.start(),()=>{t.stop()}}),e.createElement(o,{x:t.a.x,y:t.a.y,rotation:t.a.rotation,listening:!1,opacity:t.a.opacity,hideInExport:!t.showInExport},e.createElement(a,{width:t.width,height:t.height,fill:"rgba(124, 173, 212, 0.8)"}),e.createElement(n,{ref:i,x:t.width/2,y:t.height/2,fill:"white",outerRadius:Math.abs(r),innerRadius:Math.max(1,r-5),angle:270}))}),T=t(({element:t})=>{const r=Math.max(10,Math.min(30,t.width/25));return e.createElement(o,{x:t.a.x,y:t.a.y,rotation:t.a.rotation,listening:!1,opacity:t.a.opacity,hideInExport:!t.showInExport},e.createElement(a,{width:t.width,height:t.height,fill:"rgba(223, 102, 102, 0.8)"}),e.createElement(d,{text:"Can not load the video...",fontSize:r,width:t.width,height:t.height,align:"center",fill:"white",verticalAlign:"middle",padding:5}))});let C=function(t,r,n){const o=e.useRef("loading"),i=e.useRef(void 0),[a,d]=e.useState(0),h=e.useRef(),c=e.useRef(),l=e.useRef();return h.current===t&&c.current===r&&l.current===n||(o.current="loading",i.current=void 0,h.current=t,c.current=r,l.current=n),e.useLayoutEffect(function(){if(t){var e=document.createElement("video");return e.addEventListener("canplay",a),e.addEventListener("error",h),r&&(e.crossOrigin=r),n&&(e.referrerPolicy=n),e.src=t,e.load(),function(){e.removeEventListener("canplay",a),e.removeEventListener("error",h)}}function a(){o.current="loaded",i.current=e,i.current.currentTime=0,d(Math.random()),i.current.removeEventListener("canplay",a)}function h(t){var r;const n=4===e.readyState,a=e.buffered&&e.buffered.length>0&&e.buffered.end(e.buffered.length-1)/e.duration*100>=100;if(n&&a){return}const h=t.message||(null===(r=e.error)||void 0===r?void 0:r.message)||"Unknown error",c=new Error("Video failed to load: "+h);console.error(c),o.current="failed",i.current=void 0,d(Math.random())}},[t,r,n]),[i.current,o.current]};export const setVideoLoaderHook=e=>{C=e};function R(e){return e.readyState>=HTMLMediaElement.HAVE_CURRENT_DATA}export const useLoader=(t,r,n)=>{const o=e.useRef(),i=()=>{var e;null===(e=o.current)||void 0===e||e.call(o),o.current=void 0};e.useEffect(()=>i,[]),e.useLayoutEffect(()=>{const e=r.slice(0,200),a=`video with id ${n} url: ${e}`;"loading"!==t||o.current||(o.current=u(a)),"loading"!==t&&i(),"failed"===t&&g(a)},[t])};export const VideoElement=t(({element:t,store:n})=>{var d;const[g,m]=e.useState(!1),I=e.useRef(null),S=e.useRef(null),k=n.selectedShapes.indexOf(t)>=0&&t.selectable,[H,X]=e.useState(!1),[Y,W]=C(t.src,"anonymous"),[O,_]=e.useState(!1),A=n.activePage===t.page,P=t.page._exportingOrRendering&&"loaded"===W,V=x(t,n,P);useLoader(W,t.src,t.id),Y&&(Y.playsInline=!0);const D=((t,r,n)=>{const o=e.useMemo(()=>{var e,o;const{flipX:i,flipY:a}=t,d="svg"===t.type||t.src.indexOf("data:image/svg+xml")>=0||t.src.indexOf(".svg")>=0,h=navigator.userAgent.toLowerCase().indexOf("firefox")>-1;if(!(i||a||h&&d)){return r}if(!r){return null}const c=r instanceof HTMLVideoElement?r.videoWidth:null==r?void 0:r.width,l=r instanceof HTMLVideoElement?r.videoHeight:null==r?void 0:r.height;if(!c||!l){return null}const s=M();let u=1;"svg"===t.type&&(u=Math.max(t.width/c*n,t.height/l*n)),s.width=Math.max(c*u,1),s.height=Math.max(l*u,1);let g=i?-s.width:0,f=a?-s.height:0;return null===(e=s.getContext("2d"))||void 0===e||e.scale(i?-1:1,a?-1:1),null===(o=s.getContext("2d"))||void 0===o||o.drawImage(r,g,f,s.width,s.height),s},[t.flipX,t.flipY,r,t.width,t.height,n]);return e.useEffect(()=>()=>{o&&"CANVAS"===o.nodeName&&l.Util.releaseCanvas(o)},[o]),o})(t,Y,n._elementsPixelRatio),z=P&&V||D||b;e.useEffect(()=>{Y&&n.history.ignore(()=>{t.set({duration:1e3*Y.duration})})},[Y]),e.useEffect(()=>{var e;if(!Y){return}const r=n.animatedElementsIds,o=(!r.length||r.includes(t.id))&&n.isPlaying,i=A&&(o||H);if(!i){return void Y.pause()}i&&(Y.currentTime=t.startTime*Y.duration,Y.play());const a=new l.Animation(()=>{le.current()},null===(e=I.current)||void 0===e?void 0:e.getLayer());a.start();const d=()=>{X(!1),Y.currentTime=t.startTime*Y.duration},h=()=>{Y.currentTime>=t.endTime*Y.duration&&(Y.pause(),Y.currentTime=t.startTime*Y.duration,X(!1))};return Y.addEventListener("ended",d),Y.addEventListener("timeupdate",h),()=>{Y.pause(),a.stop(),Y.removeEventListener("ended",d),Y.removeEventListener("timeupdate",h)}},[Y,H,n.isPlaying,A]),e.useEffect(()=>{Y&&(Y.volume=t.volume)},[Y,t.volume]);const j=e.useRef(null);e.useEffect(()=>{const e=r(()=>{var e,r;if(Y){if(P&&V){return ce(),void n.currentTime}const o=n.animatedElementsIds;if(o.length&&!o.includes(t.id)){return}const i=n.currentTime>=t.page.startTime&&n.currentTime<t.page.startTime+t.page.duration,a=t.startTime*Y.duration*1e3,d=Y.duration*(t.endTime-t.startTime)*1e3;let h=((n.currentTime||t.page.startTime)-t.page.startTime)%d+a;if(i||(h=0),Math.abs(1e3*Y.currentTime-h)>500||!n.isPlaying){const e=h/1e3;e!==Y.currentTime&&(Y.currentTime=e),!R(Y)&&!n.isPlaying&&!j.current&&(j.current=u(`video ${t.id}`))}le.current(),null===(r=null===(e=I.current)||void 0===e?void 0:e.getLayer())||void 0===r||r.batchDraw()}});return()=>{e(),j.current&&(j.current(),j.current=null)}},[n,Y,P,V]),e.useEffect(()=>{var e;if(!Y){return}if(P){return null===(e=j.current)||void 0===e||e.call(j),void(j.current=null)}const r=()=>{var e,r;!R(Y)&&t.page._exportingOrRendering||j.current&&(le.current(),null===(r=null===(e=I.current)||void 0===e?void 0:e.getLayer())||void 0===r||r.batchDraw(),j.current(),j.current=null)};let n;return t.page._exportingOrRendering&&(n=setInterval(r,20)),Y.addEventListener("timeupdate",r),Y.addEventListener("canplay",r),()=>{clearInterval(n),Y.removeEventListener("timeupdate",r),Y.removeEventListener("canplay",r)}},[t.page._exportingOrRendering,Y,t.id,u,P]);let{cropX:B,cropY:U,cropWidth:N,cropHeight:Z}=t;"loaded"!==W&&(B=U=0,N=Z=1);const F=($=z)instanceof HTMLVideoElement?$.videoWidth:(null==$?void 0:$.width)||0;var $;const q=(e=>e instanceof HTMLVideoElement?e.videoHeight:(null==e?void 0:e.height)||0)(z),G=F*N,J=q*Z,K=t.width/t.height;let Q,ee;const te=G/J,re="svg"===t.type;re?(Q=G,ee=J):K>=te?(Q=G,ee=G/K):(Q=J*K,ee=J);const ne={x:F*B,y:q*U,width:Q,height:ee},oe=null!==(d=t.cornerRadius)&&void 0!==d?d:0,[ie,ae]=useCornerRadiusAndCrop(t,z,ne,n._elementsPixelRatio,oe,!0);let[de,he]=((t,r,n,o)=>{const i=(t=>{const[r,n]=e.useState(t);return e.useEffect(()=>{(async()=>{const e=await async function(e){if(!(e.indexOf("data:image/svg+xml")>=0||e.indexOf(".svg")>=0)){return e}const t=await f.urlToString(e),r=f.fixSize(t);return f.svgToURL(r)}(t);e!==r&&n(e)})()},[t]),r})(t.clipSrc||""),[a,d]=c(i,"anonymous"),h=t.clipSrc?d:"loaded";useLoader(h,t.clipSrc,t.id);const s=e.useMemo(()=>{if(r&&a){return M()}},[r,a]);function u(){var e;if(!a){return}const o=r instanceof HTMLVideoElement?r.videoWidth:null==r?void 0:r.width,i=r instanceof HTMLVideoElement?r.videoHeight:null==r?void 0:r.height;if(!r||!o||!i){return}if(!a||!a.width||!a.height){return}if(!s){return}const d=M(),h=Math.max(t.width/a.width*n,t.height/a.height*n);d.width=a.width*h,d.height=a.height*h,null===(e=d.getContext("2d"))||void 0===e||e.drawImage(a,0,0,d.width,d.height),s.width=Math.max(o,1),s.height=Math.max(i,1);const c=s.getContext("2d");c&&(c.save(),c.drawImage(d,0,0,o,i),l.Util.releaseCanvas(d),c.globalCompositeOperation="source-in",c.drawImage(r,0,0,s.width,s.height),c.restore())}return e.useLayoutEffect(()=>{u()},[s,r,a,t.width,t.height,n,...o]),[t.clipSrc&&a?s:r,u]})(t,ie,n._elementsPixelRatio,[ne,oe,n._elementsPixelRatio]);function ce(){var e,t;ae(),he(),null===(t=null===(e=I.current)||void 0===e?void 0:e.getLayer())||void 0===t||t.batchDraw()}e.useEffect(()=>{ce()});const le=e.useRef(ce);le.current=ce;const se=Math.max(t.width/Q,t.height/ee);e.useEffect(()=>{var e;if(!t._cropModeEnabled){return}const r=null===(e=I.current)||void 0===e?void 0:e.getStage();function n(e){t._cropModeEnabled&&e.target!==S.current&&t.toggleCropMode(!1)}function o(e){t._cropModeEnabled&&e.target.parentNode!==(null==r?void 0:r.content)&&t.toggleCropMode(!1)}return document.body.addEventListener("click",o),null==r||r.on("click",n),null==r||r.on("tap",n),()=>{document.body.removeEventListener("click",o),document.body.removeEventListener("touchstart",o),null==r||r.off("click",n),null==r||r.off("click",n)}},[t._cropModeEnabled]),e.useLayoutEffect(()=>{if(!g&&!t._cropModeEnabled){return p(I.current,t),r(()=>{p(I.current,t)},{delay:100})}},[z,g,N,Z,t._cropModeEnabled]),e.useLayoutEffect(()=>{var e;g||t._cropModeEnabled?null===(e=I.current)||void 0===e||e.clearCache():p(I.current,t)},[g,t.width,t.height,t._cropModeEnabled]),e.useEffect(()=>{p(I.current,t)},[t.shadowEnabled,t.shadowBlur,t.cornerRadius,t.shadowColor,t.shadowOffsetX,t.shadowOffsetY,t.shadowOpacity]);const ue=e.useRef(null),ge=e.useRef(null),fe=e.useRef(null);e.useLayoutEffect(()=>{t._cropModeEnabled&&(ge.current.nodes([ue.current]),fe.current.nodes([S.current]))},[t._cropModeEnabled]);const me=e=>{Math.round(e.target.x())>0&&(e.target.x(0),e.target.scaleX(1)),Math.round(e.target.y())>0&&(e.target.y(0),e.target.scaleY(1));const r=e.target.width()*e.target.scaleX(),n=e.target.height()*e.target.scaleY(),o=Math.min(1,Q/r),i=Math.min(1,ee/n),a=1-o,d=Math.min(a,Math.max(0,Math.round(-e.target.x())/r)),h=1-i,c=Math.min(h,Math.max(0,Math.round(-e.target.y())/n));e.target.setAttrs({x:-d*F,y:-c*q,scaleX:1,scaleY:1}),t.set({cropX:d,cropY:c,cropWidth:o,cropHeight:i})},pe=()=>{"svg"!==t.type&&t.contentEditable&&setTimeout(()=>{t.toggleCropMode(!0)})},we="loading"===W,ve="failed"===W,xe=!we&&!ve,Me=e.useRef({cropX:0,cropY:0,cropWidth:0,cropHeight:0}),Ee=xe?t.a.opacity:0;w(I,Ee);const ye=t.selectable||"admin"===n.role,be=v();return e.createElement(e.Fragment,null,e.createElement(o,{onMouseEnter:()=>_(!0),onMouseLeave:()=>_(!1)},we&&e.createElement(L,{element:t}),ve&&e.createElement(T,{element:t}),e.createElement(i,{ref:I,name:"element",id:t.id,image:de,x:t.a.x,y:t.a.y,width:t.a.width||1,height:t.a.height||1,rotation:t.a.rotation,opacity:Ee,shadowEnabled:t.shadowEnabled,shadowBlur:t.shadowBlur,shadowOffsetX:t.shadowOffsetX,shadowOffsetY:t.shadowOffsetY,shadowColor:t.shadowColor,shadowOpacity:t.shadowOpacity,customCrop:ne,listening:ye,draggable:be?t.draggable&&k:t.draggable,preventDefault:!be||k,hideInExport:!t.showInExport,onDragMove:e=>{t.set({x:e.target.x(),y:e.target.y()})},onDragEnd:e=>{t.set({x:e.target.x(),y:e.target.y()})},onDblClick:pe,onDblTap:pe,onTransformStart:()=>{m(!0),Me.current={cropX:t.cropX,cropY:t.cropY,cropWidth:t.cropWidth,cropHeight:t.cropHeight}},onTransform:e=>{var r;const n=e.currentTarget,o=Math.abs(n.scaleX()-1)<1e-7?1:n.scaleX(),i=Math.abs(n.scaleY()-1)<1e-7?1:n.scaleY();n.scaleX(1),n.scaleY(1);const a=null===(r=e.target.getStage())||void 0===r?void 0:r.findOne("Transformer"),d=1-Q/F,h=Math.min(d,Math.max(0,t.cropX)),c=1-ee/q,l=Math.min(c,Math.max(0,t.cropY)),s=a.getActiveAnchor(),u=!(s.indexOf("middle")>=0||s.indexOf("center")>=0),g=!u&&o<1&&Me.current.cropHeight>ee/q;let f=u?t.cropWidth:t.cropWidth*o;g&&(f=t.cropWidth);const m=!u&&i<1&&Me.current.cropWidth>Q/F;let p=u?t.cropHeight:t.cropHeight*i;m&&(p=t.cropHeight),re&&(f=t.cropWidth,p=t.cropHeight),t.set({cropX:h,cropY:l,x:n.x(),y:n.y(),width:n.width()*o,height:n.height()*i,rotation:e.target.rotation(),cropWidth:Math.min(f,1-h),cropHeight:Math.min(p,1-l)})},onTransformEnd:e=>{const r=e.currentTarget;t.set({width:r.width(),height:r.height(),x:r.x(),y:r.y(),rotation:e.target.rotation(),cropWidth:Q/F,cropHeight:ee/q}),m(!1)}}),e.createElement(a,{x:t.a.x,y:t.a.y,width:Math.max(t.a.width-t.borderSize,0),height:Math.max(t.a.height-t.borderSize,0),opacity:Ee,offsetX:-t.borderSize/2,offsetY:-t.borderSize/2,stroke:t.borderColor,strokeWidth:t.borderSize,listening:!1,visible:!!t.borderSize,rotation:t.rotation,cornerRadius:Math.max(0,oe-t.borderSize),hideInExport:!t.showInExport}),!n.isPlaying&&e.createElement(i,{image:H?O||be?y:void 0:E,x:t.a.x,y:t.a.y,offsetX:-t.a.width/2+15/n.scale,offsetY:-t.a.height/2+15/n.scale,rotation:t.a.rotation,width:30/n.scale,height:30/n.scale,hideInExport:!0,onClick:()=>X(!H),onTap:()=>X(!H)}),t._cropModeEnabled&&e.createElement(s,{selector:".page-abs-container",enabled:!0},e.createElement(a,{x:-window.innerWidth/n.scale,y:-window.innerWidth/n.scale,width:window.innerWidth/n.scale*3,height:window.innerWidth/n.scale*3,fill:"rgba(0,0,0,0.3)"}),e.createElement(i,{listening:!1,image:de,x:t.a.x,y:t.a.y,width:t.a.width,height:t.a.height,rotation:t.a.rotation,shadowEnabled:t.shadowEnabled,shadowBlur:t.shadowBlur}),e.createElement(o,{x:t.a.x,y:t.a.y,rotation:t.a.rotation,scaleX:se,scaleY:se},e.createElement(i,{image:z,ref:S,width:F,height:q,opacity:.4,draggable:!0,x:-t.cropX*F,y:-t.cropY*q,onDragMove:me,onTransform:me}),e.createElement(h,{ref:fe,anchorSize:20,enabledAnchors:["top-left","top-right","bottom-left","bottom-right"],boundBoxFunc:(e,t)=>t.width<5||t.height<5?e:t,rotateEnabled:!1,borderEnabled:!1,anchorCornerRadius:10,anchorStrokeWidth:2,borderStrokeWidth:2}),e.createElement(a,{width:Q,height:ee,ref:ue,listening:!1,onTransform:e=>{e.target.x()<-t.cropX*F-1e-9&&(e.target.x(-t.cropX*F),e.target.scaleX(1)),e.target.y()<-t.cropY*q-1e-9&&(e.target.y(-t.cropY*q),e.target.scaleY(1));const r=Math.min(1,Math.max(0,t.cropX+e.target.x()/F)),n=Math.min(1,Math.max(0,e.target.y()/q+t.cropY)),o=e.target.width()*e.target.scaleX(),i=e.target.height()*e.target.scaleY(),a=Math.min(1-r,o/F),d=Math.min(1-n,i/q),h=e.target.getAbsolutePosition(e.target.getParent().getParent());e.target.scale({x:1,y:1}),e.target.position({x:0,y:0}),t.set({x:h.x,y:h.y,cropX:r,cropY:n,cropWidth:a,cropHeight:d,width:Math.min(o*se,F*(1-r)*se),height:Math.min(i*se,q*(1-n)*se)})}}),e.createElement(h,{ref:ge,enabledAnchors:["top-left","top-right","bottom-left","bottom-right"],boundBoxFunc:(e,t)=>t.width<5||t.height<5?e:t,keepRatio:!1,rotateEnabled:!1,anchorFill:"rgb(240, 240, 240)",anchorStrokeWidth:2,borderStrokeWidth:2,visible:t.resizable})))))});

package/canvas/workspace-canvas.js

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

package/model/figure-model.d.ts

@@ -132,7 +132,7 @@ export declare const FigureElement: import("mobx-state-tree").IModelType<{
     beforeDestroy(): void;
 } & {
     readonly locked: boolean;
-    readonly a: Record<string, any>;
+    readonly a: import("./shape-model.js").AnimatedAttrs;
     animated(attr: any): any;
 } & {
     setAnimation(type: any, attrs: any): void;

package/model/gif-model.d.ts

@@ -145,7 +145,7 @@ export declare const GifElement: import("mobx-state-tree").IModelType<{
     beforeDestroy(): void;
 } & {
     readonly locked: boolean;
-    readonly a: Record<string, any>;
+    readonly a: import("./shape-model.js").AnimatedAttrs;
     animated(attr: any): any;
 } & {
     setAnimation(type: any, attrs: any): void;

package/model/group-model.d.ts

@@ -175,7 +175,7 @@ export declare const TYPES_MAP: {
         beforeDestroy(): void;
     } & {
         readonly locked: boolean;
-        readonly a: Record<string, any>;
+        readonly a: import("./shape-model.js").AnimatedAttrs;
         animated(attr: any): any;
     } & {
         setAnimation(type: any, attrs: any): void;
@@ -346,7 +346,7 @@ export declare const TYPES_MAP: {
         beforeDestroy(): void;
     } & {
         readonly locked: boolean;
-        readonly a: Record<string, any>;
+        readonly a: import("./shape-model.js").AnimatedAttrs;
         animated(attr: any): any;
     } & {
         setAnimation(type: any, attrs: any): void;
@@ -518,7 +518,7 @@ export declare const TYPES_MAP: {
         beforeDestroy(): void;
     } & {
         readonly locked: boolean;
-        readonly a: Record<string, any>;
+        readonly a: import("./shape-model.js").AnimatedAttrs;
         animated(attr: any): any;
     } & {
         setAnimation(type: any, attrs: any): void;
@@ -685,7 +685,7 @@ export declare const TYPES_MAP: {
         beforeDestroy(): void;
     } & {
         readonly locked: boolean;
-        readonly a: Record<string, any>;
+        readonly a: import("./shape-model.js").AnimatedAttrs;
         animated(attr: any): any;
     } & {
         setAnimation(type: any, attrs: any): void;
@@ -861,7 +861,7 @@ export declare const TYPES_MAP: {
         beforeDestroy(): void;
     } & {
         readonly locked: boolean;
-        readonly a: Record<string, any>;
+        readonly a: import("./shape-model.js").AnimatedAttrs;
         animated(attr: any): any;
     } & {
         setAnimation(type: any, attrs: any): void;
@@ -1027,7 +1027,7 @@ export declare const TYPES_MAP: {
         beforeDestroy(): void;
     } & {
         readonly locked: boolean;
-        readonly a: Record<string, any>;
+        readonly a: import("./shape-model.js").AnimatedAttrs;
         animated(attr: any): any;
     } & {
         setAnimation(type: any, attrs: any): void;
@@ -1201,7 +1201,7 @@ export declare const TYPES_MAP: {
         beforeDestroy(): void;
     } & {
         readonly locked: boolean;
-        readonly a: Record<string, any>;
+        readonly a: import("./shape-model.js").AnimatedAttrs;
         animated(attr: any): any;
     } & {
         setAnimation(type: any, attrs: any): void;

package/model/image-model.d.ts

@@ -141,7 +141,7 @@ export declare const ImageElement: import("mobx-state-tree").IModelType<{
     beforeDestroy(): void;
 } & {
     readonly locked: boolean;
-    readonly a: Record<string, any>;
+    readonly a: import("./shape-model.js").AnimatedAttrs;
     animated(attr: any): any;
 } & {
     setAnimation(type: any, attrs: any): void;

package/model/line-model.d.ts

@@ -132,7 +132,7 @@ export declare const LineElement: import("mobx-state-tree").IModelType<{
     beforeDestroy(): void;
 } & {
     readonly locked: boolean;
-    readonly a: Record<string, any>;
+    readonly a: import("./shape-model.js").AnimatedAttrs;
     animated(attr: any): any;
 } & {
     setAnimation(type: any, attrs: any): void;

package/model/shape-model.d.ts

@@ -1,4 +1,13 @@
 import { Instance } from 'mobx-state-tree';
+export type AnimatedAttrs = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    rotation: number;
+    opacity: number;
+    [key: string]: any;
+};
 export declare const Animation: import("mobx-state-tree").IModelType<{
     delay: import("mobx-state-tree").IType<number | undefined, number, number>;
     duration: import("mobx-state-tree").IType<number | undefined, number, number>;
@@ -137,7 +146,7 @@ export declare const Shape: import("mobx-state-tree").IModelType<{
     beforeDestroy(): void;
 } & {
     readonly locked: boolean;
-    readonly a: Record<string, any>;
+    readonly a: AnimatedAttrs;
     animated(attr: any): any;
 } & {
     setAnimation(type: any, attrs: any): void;

package/model/shape-model.js

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

package/model/store.d.ts

@@ -429,7 +429,7 @@ export declare const Store: import("mobx-state-tree").IModelType<{
         beforeDestroy(): void;
     } & {
         readonly locked: boolean;
-        readonly a: Record<string, any>;
+        readonly a: import("./shape-model.js").AnimatedAttrs;
         animated(attr: any): any;
     } & {
         setAnimation(type: any, attrs: any): void;
@@ -559,7 +559,7 @@ export declare const Store: import("mobx-state-tree").IModelType<{
         beforeDestroy(): void;
     } & {
         readonly locked: boolean;
-        readonly a: Record<string, any>;
+        readonly a: import("./shape-model.js").AnimatedAttrs;
         animated(attr: any): any;
     } & {
         setAnimation(type: any, attrs: any): void;
@@ -834,7 +834,7 @@ export declare const Store: import("mobx-state-tree").IModelType<{
     setCurrentTime(time: any): void;
     _togglePlaying(playing?: boolean): void;
     play({ animatedElementsIds, startTime, currentTime, endTime, repeat, }?: {
-        animatedElementsIds?: never[] | undefined;
+        animatedElementsIds?: string[] | undefined;
         startTime?: number | undefined;
         currentTime?: number | undefined;
         endTime?: number | undefined;

package/model/svg-model.d.ts

@@ -142,7 +142,7 @@ export declare const SVGElement: import("mobx-state-tree").IModelType<{
     beforeDestroy(): void;
 } & {
     readonly locked: boolean;
-    readonly a: Record<string, any>;
+    readonly a: import("./shape-model.js").AnimatedAttrs;
     animated(attr: any): any;
 } & {
     setAnimation(type: any, attrs: any): void;

package/model/text-model.d.ts

@@ -151,7 +151,7 @@ export declare const TextElement: import("mobx-state-tree").IModelType<{
     beforeDestroy(): void;
 } & {
     readonly locked: boolean;
-    readonly a: Record<string, any>;
+    readonly a: import("./shape-model.js").AnimatedAttrs;
     animated(attr: any): any;
 } & {
     setAnimation(type: any, attrs: any): void;

package/model/video-model.d.ts

@@ -147,7 +147,7 @@ export declare const VideoElement: import("mobx-state-tree").IModelType<{
     beforeDestroy(): void;
 } & {
     readonly locked: boolean;
-    readonly a: Record<string, any>;
+    readonly a: import("./shape-model.js").AnimatedAttrs;
     animated(attr: any): any;
 } & {
     setAnimation(type: any, attrs: any): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "polotno",
-  "version": "2.36.2",
+  "version": "2.36.3",
   "description": "Design Editor Framework",
   "author": "Anton Lavrenov",
   "keywords": [

package/polotno-app.js

@@ -18,4 +18,4 @@ import e from"react";import t from"react-dom/client";import o from"./canvas/work
   flex: 1;
   flex-direction: column;
   position: relative;
-`;export const PolotnoContainer=e.forwardRef((t,o)=>e.createElement(p,Object.assign({},t,{ref:o,className:`bp5-scope ${t.className||""}`.trim()})));export const SidePanelWrap=e.forwardRef((t,o)=>e.createElement(d,Object.assign({},t,{ref:o})));export const WorkspaceWrap=e.forwardRef((t,o)=>e.createElement(f,Object.assign({},t,{ref:o})));export const PolotnoApp=({store:t,style:l,sections:c})=>{let m=s;return c&&(m=c.map(e=>{const t=s.find(t=>t.name===e);return t||console.error(`Section ${e} not found`),t}).filter(Boolean)),e.createElement(PolotnoContainer,{className:"polotno-app-container",style:l},e.createElement(SidePanelWrap,null,e.createElement(n,{store:t,sections:m})),e.createElement(WorkspaceWrap,null,e.createElement(r,{store:t,components:{ActionControls:()=>e.createElement(i,{store:t})}}),e.createElement(o,{store:t}),e.createElement(a,{store:t})))};export function createPolotnoApp({container:o,key:r,showCredit:n,sections:s}){const a=m({key:r,showCredit:n}),i=t.createRoot(o);return i.render(e.createElement(PolotnoApp,{store:a,sections:s})),a.addPage(),a.history.clear(),{store:a,root:i,destroy:()=>i.unmount()}}export const createDemoApp=createPolotnoApp;
+`;export const PolotnoContainer=e.forwardRef((t,o)=>e.createElement(p,Object.assign({},t,{ref:o,className:`bp5-scope ${t.className||""}`.trim()})));export const SidePanelWrap=e.forwardRef((t,o)=>e.createElement(d,Object.assign({},t,{ref:o})));export const WorkspaceWrap=e.forwardRef((t,o)=>e.createElement(f,Object.assign({},t,{ref:o})));export const PolotnoApp=({store:t,style:l,sections:c})=>{let m=s;return c&&(m=c.map(e=>{const t=s.find(t=>t.name===e);return t||console.error(`Section ${e} not found`),t}).filter(e=>!!e)),e.createElement(PolotnoContainer,{className:"polotno-app-container",style:l},e.createElement(SidePanelWrap,null,e.createElement(n,{store:t,sections:m})),e.createElement(WorkspaceWrap,null,e.createElement(r,{store:t,components:{ActionControls:()=>e.createElement(i,{store:t})}}),e.createElement(o,{store:t}),e.createElement(a,{store:t})))};export function createPolotnoApp({container:o,key:r,showCredit:n,sections:s}){const a=m({key:r,showCredit:n}),i=t.createRoot(o);return i.render(e.createElement(PolotnoApp,{store:a,sections:s})),a.addPage(),a.history.clear(),{store:a,root:i,destroy:()=>i.unmount()}}export const createDemoApp=createPolotnoApp;

package/polotno.bundle.d.ts

@@ -1 +1,9 @@
 export { createPolotnoApp } from './polotno-app.js';
+import * as config from './config.js';
+import { createPolotnoApp } from './polotno-app.js';
+declare global {
+    interface Window {
+        createPolotnoApp?: typeof createPolotnoApp;
+        polotnoConfig?: typeof config;
+    }
+}