polotno 2.34.1 → 2.34.2

package/canvas/use-mediabunny-video.d.ts

@@ -0,0 +1,3 @@
+import { VideoElementType } from '../model/video-model.js';
+import { StoreType } from '../model/store.js';
+export declare const useMediabunnyVideo: (element: VideoElementType, store: StoreType, shouldUse: boolean) => HTMLCanvasElement | null;

package/canvas/use-mediabunny-video.js

@@ -0,0 +1 @@
+import e from"react";import{autorun as r}from"mobx";import{Input as t,UrlSource as n,BufferSource as u,CanvasSink as a,ALL_FORMATS as i}from"mediabunny";import{incrementLoader as c,triggerLoadError as s}from"../utils/loader.js";const o=.05;export const useMediabunnyVideo=(l,d,f)=>{const[m,h]=e.useState({input:null,videoSink:null,duration:0,isReady:!1,error:null});e.useRef(m).current=m;const g=e.useRef(0),p=e.useRef(null),w=e.useRef(null),v=e.useRef(null),b=e.useRef(null),y=e.useRef(null),T=e.useRef(null),R=e.useRef(!1),k=e.useRef(null),S=e.useRef([]),$=e.useRef(null),x=e.useRef(!1),[,E]=e.useReducer(e=>e+1,0);return e.useEffect(()=>{if(!f){return}let e=!0;const r=++g.current;let o=null;return(async()=>{try{if(!e||r!==g.current){return}o=c(`mediabunny init ${l.id}`);const s=await async function(e){if(function(e){return e.startsWith("data:")}(e)){const r=function(e){const r=e.indexOf(",");if(-1===r){throw new Error("Invalid data URL format")}const t=e.slice(r+1),n=atob(t),u=new Uint8Array(n.length);for(let a=0;a<n.length;a++){u[a]=n.charCodeAt(a)}return u.buffer}(e);return new u(r)}if(function(e){return e.startsWith("file://")}(e)){try{const r=await fetch(e),t=await r.arrayBuffer();return new u(t)}catch(r){throw new Error(`Failed to load file URL: ${e}. File URLs may not be supported in this environment. Error: ${r}`)}}return new n(e)}(l.src);if(!e||r!==g.current){return void(o&&(o(),o=null))}const d=new t({source:s,formats:i}),f=await d.computeDuration(),m=await d.getPrimaryVideoTrack();if(!m){throw new Error("No video track found")}if(null===m.codec){throw new Error("Unsupported video codec")}if(!await m.canDecode()){throw new Error("Unable to decode the video track")}const p=await m.canBeTransparent(),w=new a(m,{poolSize:5,fit:"contain",alpha:p});if(!e||r!==g.current){return d.dispose(),void(o&&(o(),o=null))}o&&(o(),o=null),h(e=>Object.assign(Object.assign({},e),{input:d,videoSink:w,duration:f,isReady:!0,error:null}))}catch(d){if(console.error("Failed to initialize mediabunny:",d),o&&(o(),o=null),e&&r===g.current){const e=`Failed to initialize mediabunny for video ${l.id}: ${d}`;s(e),h(e=>Object.assign(Object.assign({},e),{error:String(d),isReady:!1}))}}})(),()=>{e=!1,o&&(o(),o=null)}},[l.src,f]),e.useEffect(()=>()=>{w.current&&(w.current.return(),w.current=null),p.current&&(p.current(),p.current=null),v.current=null,b.current=null,y.current=null,R.current=!1,k.current=null,S.current=[],$.current=null,x.current=!1,h({input:null,videoSink:null,duration:0,isReady:!1,error:null})},[f]),e.useEffect(()=>{if(!f||!m.isReady||!m.videoSink){return}const e=++g.current,t="string"==typeof l.src?l.src.slice(0,120):String(l.src),n=(e,r={},n="debug")=>{let u="";try{u=JSON.stringify(Object.assign(Object.assign({},r),{timeCalc:T.current}))}catch(i){u=`[unserializable extras: ${String(i)}]`}const a=`mediabunny event=${e} elementId=${l.id} targetTime=${y.current} duration=${m.duration} lastFrameTimestamp=${b.current} hasIterator=${Boolean(w.current)} prefetchSize=${S.current.length} srcHint=${t} extras=${u}`;"error"===n?console.error(a):"warn"===n?console.warn(a):console.debug(a)},u=e=>{const r=m.duration||0;if(!r||!Number.isFinite(r)){return e}const t=r>o?r-o:r;return Math.max(0,Math.min(e,t))},a=e=>{const r=m.duration||0;return!(!r||!Number.isFinite(r))&&r-e<=.050001000000000004},i=e=>{let r=v.current;r&&r.width===e.canvas.width&&r.height===e.canvas.height||(r||(r=document.createElement("canvas"),v.current=r),r.width=e.canvas.width,r.height=e.canvas.height);const t=r.getContext("2d");t&&(t.clearRect(0,0,r.width,r.height),t.drawImage(e.canvas,0,0)),b.current=e.timestamp},s=e=>{const r=w.current;r&&(x.current||(x.current=!0,$.current=(async()=>{try{for(;S.current.length<4&&e===g.current;){const t=await r.next();if(e!==g.current){return}if(t.done||!t.value){break}S.current.push({timestamp:t.value.timestamp,frame:t.value})}}catch(t){}finally{x.current=!1,$.current=null}})()))},h=e=>{const r=S.current;for(let t=0;t<r.length;t++){if(Math.abs(r[t].timestamp-e)<o){const e=r[t];return S.current=r.slice(t+1),e}}return null},M=()=>{S.current=[]},O=async(e,r,t=0)=>{const c=u(e),l=(e=>{const r=b.current;return null===r||e<r-o||e>r+.5})(c)?"seek":"iterate";try{const t=m.videoSink,u=b.current;if(null!==u&&Math.abs(u-c)<o){return void(y.current=e)}const f=h(c);if(f){return i(f.frame),y.current=e,s(r),void E()}if($.current){await $.current;const t=h(c);if(t){return i(t.frame),y.current=e,s(r),void E()}}if(M(),"seek"===l){w.current&&(await w.current.return(),w.current=null);const u=t.canvases(c);w.current=u;const o=await u.next();if(r!==g.current){return void(w.current&&(await w.current.return(),w.current=null))}if(o.done||!o.value){if(a(c)||n("iterator_exhausted",{mode:l,requestedTargetTime:e,clampedTargetTime:c},"warn"),r===g.current&&!a(c)){try{w.current&&(await w.current.return(),w.current=null),M();const n=t.canvases(c);w.current=n;const u=await n.next();!u.done&&u.value&&(i(u.value),s(r),y.current=e,E())}catch(d){}}return}i(o.value),s(r)}else{const u=w.current;if(!u){return}let f=!1;for(;r===g.current;){const m=await u.next();if(r!==g.current){break}if(m.done||!m.value){if(a(c)||n("iterator_exhausted",{mode:l,requestedTargetTime:e,clampedTargetTime:c},"warn"),!f&&!a(c)){f=!0;try{w.current&&(await w.current.return(),w.current=null),M();const e=t.canvases(c);w.current=e;const n=await e.next();if(r!==g.current){break}if(n.done||!n.value){break}i(n.value),s(r);break}catch(d){break}}break}const h=m.value;if(i(h),Math.abs(h.timestamp-c)<o){s(r);break}if(h.timestamp>c){s(r);break}}}y.current=e,E()}catch(f){const u=f instanceof Error?{name:f.name,message:f.message,stack:f.stack}:{message:String(f)},a=f instanceof Error?`${f.name}: ${f.message}`:String(f),i=a.includes("Unsupported configuration")||a.includes("isConfigSupported")||a.includes("OperationError");if(n("frame_process_failed",{mode:l,requestedTargetTime:e,clampedTargetTime:c,unsupportedConfigAttempt:t,isUnsupportedConfig:i,error:u},"error"),i&&t<1){try{w.current&&(await w.current.return(),w.current=null),M(),$.current=null,x.current=!1,b.current=null,await O(e,r,t+1)}catch(d){}}}},U=r(()=>{const r=m.videoSink,t=m.duration;if(!r||!t){return}const n=l.startTime*t*1e3,a=t*(l.endTime-l.startTime)*1e3,i=((d.currentTime||l.page.startTime)-l.page.startTime)%a+n,s=i/1e3,o=u(s);T.current={pageStartTime:l.page.startTime,storeCurrentTime:d.currentTime,offsetMs:n,durationMs:a,restMs:i,targetTime:s,clampedTargetTime:o,startTime:l.startTime,endTime:l.endTime,videoDuration:t},((e,r)=>{R.current?k.current=e:(R.current=!0,p.current||(p.current=c(`mediabunny video frame ${l.id}`)),(async()=>{let t=e;for(;null!==t&&r===g.current;){await O(t,r),t=k.current,k.current=null}p.current&&(p.current(),p.current=null),R.current=!1})())})(o,e)});return()=>{U(),g.current++,p.current&&(p.current(),p.current=null)}},[f,m.isReady,m.videoSink,m.duration,d,l]),f&&m.isReady?v.current:null};

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";function x(){return document.createElement("canvas")}const M=new window.Image;M.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 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="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:x()}},[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=x(),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 C=0;C<f;C++){var T=h[x+C+L*c];M+=T<<24>>>24,E+=T<<16>>>24,y+=T<<8>>>24,b+=T>>>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 y=x(),b=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}))}),L=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 T(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),R=e.useRef(null),I=e.useRef(null),S=n.selectedShapes.indexOf(t)>=0&&t.selectable,[k,H]=e.useState(!1),[X,Y]=C(t.src,"anonymous"),[W,O]=e.useState(!1),_=n.activePage===t.page;useLoader(Y,t.src,t.id),X&&(X.playsInline=!0);const A=((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=x();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,X,n._elementsPixelRatio),P=A||y;e.useEffect(()=>{X&&n.history.ignore(()=>{t.set({duration:1e3*X.duration})})},[X]),e.useEffect(()=>{var e;if(!X){return}const r=n.animatedElementsIds,o=(!r.length||r.includes(t.id))&&n.isPlaying,i=_&&(o||k);if(!i){return void X.pause()}i&&(X.currentTime=t.startTime*X.duration,X.play());const a=new l.Animation(()=>{de.current()},null===(e=R.current)||void 0===e?void 0:e.getLayer());a.start();const d=()=>{H(!1),X.currentTime=t.startTime*X.duration},h=()=>{X.currentTime>=t.endTime*X.duration&&(X.pause(),X.currentTime=t.startTime*X.duration,H(!1))};return X.addEventListener("ended",d),X.addEventListener("timeupdate",h),()=>{X.pause(),a.stop(),X.removeEventListener("ended",d),X.removeEventListener("timeupdate",h)}},[X,k,n.isPlaying,_]),e.useEffect(()=>{X&&(X.volume=t.volume)},[X,t.volume]);const V=e.useRef();e.useEffect(()=>{const e=r(()=>{var e,r;if(X){const o=n.animatedElementsIds;if(o.length&&!o.includes(t.id)){return}const i=t.startTime*X.duration*1e3,a=X.duration*(t.endTime-t.startTime)*1e3,d=((n.currentTime||t.page.startTime)-t.page.startTime)%a+i;if(Math.abs(1e3*X.currentTime-d)>500||!n.isPlaying){const e=d/1e3;e!==X.currentTime&&(X.currentTime=e),!T(X)&&!n.isPlaying&&!V.current&&(V.current=u(`video ${t.id}`))}de.current(),null===(r=null===(e=R.current)||void 0===e?void 0:e.getLayer())||void 0===r||r.batchDraw()}});return()=>{e(),V.current&&(V.current(),V.current=null)}},[n,X]),e.useEffect(()=>{if(!X){return}const e=()=>{var e,r;!T(X)&&t.page._exportingOrRendering||V.current&&(de.current(),null===(r=null===(e=R.current)||void 0===e?void 0:e.getLayer())||void 0===r||r.batchDraw(),V.current(),V.current=null)};let r;return t.page._exportingOrRendering&&(r=setInterval(e,20)),X.addEventListener("timeupdate",e),X.addEventListener("canplay",e),()=>{clearInterval(r),X.removeEventListener("timeupdate",e),X.removeEventListener("canplay",e)}},[t.page._exportingOrRendering,X,t.id,u]);let{cropX:D,cropY:z,cropWidth:j,cropHeight:B}=t;"loaded"!==Y&&(D=z=0,j=B=1);const U=(N=P)instanceof HTMLVideoElement?N.videoWidth:(null==N?void 0:N.width)||0;var N;const Z=(e=>e instanceof HTMLVideoElement?e.videoHeight:(null==e?void 0:e.height)||0)(P),F=U*j,$=Z*B,q=t.width/t.height;let G,J;const K=F/$,Q="svg"===t.type;Q?(G=F,J=$):q>=K?(G=F,J=F/q):(G=$*q,J=$);const ee={x:U*D,y:Z*z,width:G,height:J},te=null!==(d=t.cornerRadius)&&void 0!==d?d:0,[re,ne]=useCornerRadiusAndCrop(t,P,ee,n._elementsPixelRatio,te,!0);let[oe,ie]=((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 x()}},[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=x(),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,re,n._elementsPixelRatio,[ee,te,n._elementsPixelRatio]);function ae(){ne(),ie()}const de=e.useRef(ae);de.current=ae;const he=Math.max(t.width/G,t.height/J);e.useEffect(()=>{var e;if(!t._cropModeEnabled){return}const r=null===(e=R.current)||void 0===e?void 0:e.getStage();function n(e){t._cropModeEnabled&&e.target!==I.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(R.current,t),r(()=>{p(R.current,t)},{delay:100})}},[P,g,j,B,t._cropModeEnabled]),e.useLayoutEffect(()=>{var e;g||t._cropModeEnabled?null===(e=R.current)||void 0===e||e.clearCache():p(R.current,t)},[g,t.width,t.height,t._cropModeEnabled]),e.useEffect(()=>{p(R.current,t)},[t.shadowEnabled,t.shadowBlur,t.cornerRadius,t.shadowColor,t.shadowOffsetX,t.shadowOffsetY,t.shadowOpacity]);const ce=e.useRef(null),le=e.useRef(null),se=e.useRef(null);e.useLayoutEffect(()=>{t._cropModeEnabled&&(le.current.nodes([ce.current]),se.current.nodes([I.current]))},[t._cropModeEnabled]);const ue=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,G/r),i=Math.min(1,J/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*U,y:-c*Z,scaleX:1,scaleY:1}),t.set({cropX:d,cropY:c,cropWidth:o,cropHeight:i})},ge=()=>{"svg"!==t.type&&t.contentEditable&&setTimeout(()=>{t.toggleCropMode(!0)})},fe="loading"===Y,me="failed"===Y,pe=!fe&&!me,we=e.useRef({cropX:0,cropY:0,cropWidth:0,cropHeight:0}),ve=pe?t.a.opacity:0;w(R,ve);const xe=t.selectable||"admin"===n.role,Me=v();return e.createElement(e.Fragment,null,e.createElement(o,{onMouseEnter:()=>O(!0),onMouseLeave:()=>O(!1)},fe&&e.createElement(b,{element:t}),me&&e.createElement(L,{element:t}),e.createElement(i,{ref:R,name:"element",id:t.id,image:oe,x:t.a.x,y:t.a.y,width:t.a.width||1,height:t.a.height||1,rotation:t.a.rotation,opacity:ve,shadowEnabled:t.shadowEnabled,shadowBlur:t.shadowBlur,shadowOffsetX:t.shadowOffsetX,shadowOffsetY:t.shadowOffsetY,shadowColor:t.shadowColor,shadowOpacity:t.shadowOpacity,customCrop:ee,listening:xe,draggable:Me?t.draggable&&S:t.draggable,preventDefault:!Me||S,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:ge,onDblTap:ge,onTransformStart:()=>{m(!0),we.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-G/U,h=Math.min(d,Math.max(0,t.cropX)),c=1-J/Z,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&&we.current.cropHeight>J/Z;let f=u?t.cropWidth:t.cropWidth*o;g&&(f=t.cropWidth);const m=!u&&i<1&&we.current.cropWidth>G/U;let p=u?t.cropHeight:t.cropHeight*i;m&&(p=t.cropHeight),Q&&(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:G/U,cropHeight:J/Z}),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:ve,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,te-t.borderSize),hideInExport:!t.showInExport}),!n.isPlaying&&e.createElement(i,{image:k?(W||Me)&&E:M,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:()=>H(!k),onTap:()=>H(!k)}),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:oe,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:he,scaleY:he},e.createElement(i,{image:P,ref:I,width:U,height:Z,opacity:.4,draggable:!0,x:-t.cropX*U,y:-t.cropY*Z,onDragMove:ue,onTransform:ue}),e.createElement(h,{ref:se,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:G,height:J,ref:ce,listening:!1,onTransform:e=>{e.target.x()<-t.cropX*U-1e-9&&(e.target.x(-t.cropX*U),e.target.scaleX(1)),e.target.y()<-t.cropY*Z-1e-9&&(e.target.y(-t.cropY*Z),e.target.scaleY(1));const r=Math.min(1,Math.max(0,t.cropX+e.target.x()/U)),n=Math.min(1,Math.max(0,e.target.y()/Z+t.cropY)),o=e.target.width()*e.target.scaleX(),i=e.target.height()*e.target.scaleY(),a=Math.min(1-r,o/U),d=Math.min(1-n,i/Z),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*he,U*(1-r)*he),height:Math.min(i*he,Z*(1-n)*he)})}}),e.createElement(h,{ref:le,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(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})))))});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "polotno",
-  "version": "2.34.1",
+  "version": "2.34.2",
   "description": "Design Editor Framework",
   "author": "Anton Lavrenov",
   "keywords": [
@@ -67,6 +67,7 @@
     "functions-have-names": "^1.2.3",
     "gifuct-js": "^2.1.2",
     "gradient-parser": "^1.1.1",
+    "mediabunny": "^1.24.1",
     "konva": "^10.0.12",
     "mensch": "^0.3.4",
     "mobx": "6.15.0",