polotno 4.0.0-beta.43 → 4.0.0-beta.45

package/canvas/gif-element.js

@@ -1 +1 @@
-import{jsx as t,jsxs as e,Fragment as r}from"react/jsx-runtime";import i from"react";import{observer as a}from"mobx-react-lite";import{autorun as o}from"mobx";import{Image as n,Group as h,Rect as s,Arc as d,Text as l}from"react-konva";import{ROLES as c}from"../model/store.js";import g from"konva";import{parseGIF as f,decompressFrames as m}from"gifuct-js";import{useCornerRadiusAndCrop as u}from"./video-element.js";import{useImageLoader as p}from"./image-element.js";import{useWorkspaceStyle as w}from"./workspace-style.js";import{applyFilter as y}from"./apply-filters.js";import{useFadeIn as x}from"./use-fadein.js";import{isTouchDevice as E}from"../utils/screen.js";function b(t,e,r){const i=e.getContext("2d"),a=r.getContext("2d");if(!i||!a){return}2===t.disposalType&&i.clearRect(0,0,e.width,e.height),r.width=t.width,r.height=t.height;const o=a.createImageData(t.width,t.height);o.data.set(t.patch),a.putImageData(o,0,0),i.drawImage(r,t.left,t.top)}const S=a(({element:r})=>{const a=Math.min(30,r.width/4,r.height/4),o=i.useRef(null);i.useEffect(()=>{const t=o.current;if(!t){return}const e=new g.Animation(e=>{t.rotate(((null==e?void 0:e.timeDiff)||0)/2)},t.getLayer());return e.start(),()=>{e.stop()}},[]);const{mediaLoadingStyle:n}=w();return e(h,{x:r.a.x,y:r.a.y,rotation:r.a.rotation,listening:!1,opacity:r.a.opacity,hideInExport:!r.showInExport,children:[t(s,{width:r.width,height:r.height,fill:n.fill}),t(d,{ref:o,x:r.width/2,y:r.height/2,fill:n.textFill,outerRadius:Math.abs(a),innerRadius:Math.max(1,a-5),angle:270})]})}),v=a(({element:r})=>{const{mediaErrorStyle:i}=w(),a=Math.max(10,Math.min(30,r.width/22));return e(h,{x:r.a.x,y:r.a.y,rotation:r.a.rotation,listening:!1,opacity:r.a.opacity,hideInExport:!r.showInExport,children:[t(s,{width:r.width,height:r.height,fill:i.fill}),t(l,{text:"Cannot load the GIF...",fontSize:a,width:r.width,height:r.height,align:"center",fill:i.textFill,verticalAlign:"middle",padding:5})]})});export const GifElement=a(({element:a,store:h})=>{var d;const[l,w]=i.useState(!1),I=a.isSelected,M=i.useRef(null),R=i.useRef(),[j,C,T,z]=function(t){const[e,r]=i.useState([]),[a,o]=i.useState(0),[n,h]=i.useState("loading"),[s,d]=i.useState({width:0,height:0});return i.useEffect(()=>{(async()=>{try{const e=await fetch(t),i=await e.arrayBuffer(),a=f(i),n=m(a,!0),s=a.lsd.width,l=a.lsd.height;d({width:s,height:l});const c=n.map(t=>({patch:new Uint8ClampedArray(t.patch),delay:t.delay,width:t.dims.width,height:t.dims.height,left:t.dims.left,top:t.dims.top,disposalType:t.disposalType})),g=c.reduce((t,e)=>t+e.delay,0);r(c),o(g),h("loaded")}catch(e){console.error("Failed to load GIF:",e),h("failed")}})()},[t]),[e,a,s,n]}(a.src);p(z,a.src,a.id),i.useEffect(()=>(R.current=document.createElement("canvas"),()=>{R.current&&g.Util.releaseCanvas(R.current)}),[]),i.useEffect(()=>{if("loaded"===z&&R.current&&(R.current.width=T.width,R.current.height=T.height,j.length>0)){const t=R.current.getContext("2d");if(t){t.clearRect(0,0,T.width,T.height);const e=document.createElement("canvas");b(j[0],R.current,e)}}},[T,z,j]),i.useEffect(()=>{if(!j.length||!R.current){return}const t=R.current;t.width=T.width,t.height=T.height;const e=document.createElement("canvas"),r=t.getContext("2d");r&&r.clearRect(0,0,t.width,t.height);let i=-1;b(j[0],t,e),A(),i=0;const n=r=>{const a=(t=>{const e=t%C;let r=0;for(let i=0;i<j.length;i++){if(r+=j[i].delay,r>e){return i}}return 0})(r);a!==i&&(b(j[a],t,e),A(),M.current.getLayer().draw(),i=a)};if(h.isPlaying||a.page._exportingOrRendering){return o(()=>{n(h.currentTime-a.page.startTime)})}{const t=window.setInterval(()=>{n(h.currentTime||performance.now())},16);return()=>{clearInterval(t)}}},[h.isPlaying,j,C,a.page._exportingOrRendering]),i.useEffect(()=>{C&&h.history.ignore(()=>{a.set({duration:C})})},[C]);let{cropX:O,cropY:D,cropWidth:X,cropHeight:Y}=a;"loaded"!==z&&(O=D=0,X=Y=1);const F={x:T.width*O,y:T.height*D,width:T.width*X,height:T.height*Y},_=null!==(d=a.cornerRadius)&&void 0!==d?d:0,[k,A]=u(a,R.current,F,h._elementsPixelRatio,_,l||a._cropModeEnabled);i.useLayoutEffect(()=>{if(!l&&!a._cropModeEnabled&&M.current){return y(M.current,a),o(()=>{y(M.current,a)},{delay:100})}},[R.current,l,X,Y,a._cropModeEnabled,T.width,T.height]);const L="loading"===z,B="failed"===z,G=L||B?0:a.a.opacity;x(M,G);const P=a.selectable||h.role===c.ADMIN,U=E();return e(r,{children:[L&&t(S,{element:a}),B&&t(v,{element:a}),t(n,{ref:M,name:"element",id:a.id,image:k,x:a.a.x,y:a.a.y,width:a.a.width||1,height:a.a.height||1,rotation:a.a.rotation,opacity:G,shadowEnabled:a.shadowEnabled,shadowBlur:a.shadowBlur,shadowOffsetX:a.shadowOffsetX,shadowOffsetY:a.shadowOffsetY,shadowColor:a.shadowColor,shadowOpacity:a.shadowOpacity,customCrop:F,listening:P,draggable:U?a.draggable&&I:a.draggable,preventDefault:!U||I,hideInExport:!a.showInExport,onDragMove:t=>{a.set({x:t.target.x(),y:t.target.y()})},onDragEnd:t=>{a.set({x:t.target.x(),y:t.target.y()})},onTransformStart:()=>w(!0),onTransform:t=>{const e=t.currentTarget,r=Math.abs(e.scaleX()-1)<1e-7?1:e.scaleX(),i=Math.abs(e.scaleY()-1)<1e-7?1:e.scaleY();e.scaleX(1),e.scaleY(1),a.set({x:e.x(),y:e.y(),width:e.width()*r,height:e.height()*i,rotation:e.rotation()})},onTransformEnd:()=>w(!1)}),t(s,{x:a.a.x,y:a.a.y,width:Math.max(a.a.width-a.borderSize,0),height:Math.max(a.a.height-a.borderSize,0),opacity:G,offsetX:-a.borderSize/2,offsetY:-a.borderSize/2,stroke:a.borderColor,strokeWidth:a.borderSize,listening:!1,visible:!!a.borderSize,rotation:a.rotation,cornerRadius:Math.max(0,_-a.borderSize),hideInExport:!a.showInExport})]})});
+import{jsx as t,jsxs as e,Fragment as r}from"react/jsx-runtime";import i from"react";import{observer as a}from"mobx-react-lite";import{autorun as o}from"mobx";import{Image as n,Group as h,Rect as s,Arc as d,Text as l}from"react-konva";import{ROLES as c}from"../model/store.js";import g from"konva";import{parseGIF as f,decompressFrames as m}from"gifuct-js";import{useCornerRadiusAndCrop as u}from"./video-element.js";import{useImageLoader as p}from"./image-element.js";import{useWorkspaceStyle as w}from"./workspace-style.js";import{applyFilter as y}from"./apply-filters.js";import{useFadeIn as x}from"./use-fadein.js";import{isTouchDevice as E}from"../utils/screen.js";function b(t,e,r){const i=e.getContext("2d"),a=r.getContext("2d");if(!i||!a){return}2===t.disposalType&&i.clearRect(0,0,e.width,e.height),r.width=t.width,r.height=t.height;const o=a.createImageData(t.width,t.height);o.data.set(t.patch),a.putImageData(o,0,0),i.drawImage(r,t.left,t.top)}const v=a(({element:r})=>{const a=Math.min(30,r.width/4,r.height/4),o=i.useRef(null);i.useEffect(()=>{const t=o.current;if(!t){return}const e=new g.Animation(e=>{t.rotate(((null==e?void 0:e.timeDiff)||0)/2)},t.getLayer());return e.start(),()=>{e.stop()}},[]);const{mediaLoadingStyle:n}=w();return e(h,{x:r.a.x,y:r.a.y,rotation:r.a.rotation,listening:!1,opacity:r.a.opacity,hideInExport:!r.showInExport,children:[t(s,{width:r.width,height:r.height,fill:n.fill}),t(d,{ref:o,x:r.width/2,y:r.height/2,fill:n.textFill,outerRadius:Math.abs(a),innerRadius:Math.max(1,a-5),angle:270})]})}),S=a(({element:r})=>{const{mediaErrorStyle:i}=w(),a=Math.max(10,Math.min(30,r.width/22));return e(h,{x:r.a.x,y:r.a.y,rotation:r.a.rotation,listening:!1,opacity:r.a.opacity,hideInExport:!r.showInExport,children:[t(s,{width:r.width,height:r.height,fill:i.fill}),t(l,{text:"Cannot load the GIF...",fontSize:a,width:r.width,height:r.height,align:"center",fill:i.textFill,verticalAlign:"middle",padding:5})]})});export const GifElement=a(({element:a,store:h})=>{var d,l;const[w,I]=i.useState(!1),M=a.isSelected,R=i.useRef(null),j=i.useRef(),[C,T,z,O]=function(t){const[e,r]=i.useState([]),[a,o]=i.useState(0),[n,h]=i.useState("loading"),[s,d]=i.useState({width:0,height:0});return i.useEffect(()=>{(async()=>{try{const e=await fetch(t),i=await e.arrayBuffer(),a=f(i),n=m(a,!0),s=a.lsd.width,l=a.lsd.height;d({width:s,height:l});const c=n.map(t=>({patch:new Uint8ClampedArray(t.patch),delay:t.delay,width:t.dims.width,height:t.dims.height,left:t.dims.left,top:t.dims.top,disposalType:t.disposalType})),g=c.reduce((t,e)=>t+e.delay,0);r(c),o(g),h("loaded")}catch(e){console.error("Failed to load GIF:",e),h("failed")}})()},[t]),[e,a,s,n]}(a.src);p(O,a.src,a.id),i.useEffect(()=>(j.current=document.createElement("canvas"),()=>{j.current&&g.Util.releaseCanvas(j.current)}),[]),i.useEffect(()=>{if("loaded"===O&&j.current&&(j.current.width=z.width,j.current.height=z.height,C.length>0)){const t=j.current.getContext("2d");if(t){t.clearRect(0,0,z.width,z.height);const e=document.createElement("canvas");b(C[0],j.current,e)}}},[z,O,C]),i.useEffect(()=>{var t;if(!C.length||!j.current){return}const e=j.current;e.width=z.width,e.height=z.height;const r=document.createElement("canvas"),i=e.getContext("2d");i&&i.clearRect(0,0,e.width,e.height);let n=-1;b(C[0],e,r),L(),n=0;const s=t=>{const i=(t=>{const e=t%T;let r=0;for(let i=0;i<C.length;i++){if(r+=C[i].delay,r>e){return i}}return 0})(t);i!==n&&(b(C[i],e,r),L(),R.current.getLayer().draw(),n=i)};if(h.isPlaying||(null===(t=a.page)||void 0===t?void 0:t._exportingOrRendering)){return o(()=>{s(h.currentTime-a.page.startTime)})}{const t=window.setInterval(()=>{s(h.currentTime||performance.now())},16);return()=>{clearInterval(t)}}},[h.isPlaying,C,T,null===(d=a.page)||void 0===d?void 0:d._exportingOrRendering]),i.useEffect(()=>{T&&h.history.ignore(()=>{a.set({duration:T})})},[T]);let{cropX:D,cropY:X,cropWidth:Y,cropHeight:F}=a;"loaded"!==O&&(D=X=0,Y=F=1);const _={x:z.width*D,y:z.height*X,width:z.width*Y,height:z.height*F},k=null!==(l=a.cornerRadius)&&void 0!==l?l:0,[A,L]=u(a,j.current,_,h._elementsPixelRatio,k,w||a._cropModeEnabled);i.useLayoutEffect(()=>{if(!w&&!a._cropModeEnabled&&R.current){return y(R.current,a),o(()=>{y(R.current,a)},{delay:100})}},[j.current,w,Y,F,a._cropModeEnabled,z.width,z.height]);const B="loading"===O,G="failed"===O,P=B||G?0:a.a.opacity;x(R,P);const U=a.selectable||h.role===c.ADMIN,W=E();return e(r,{children:[B&&t(v,{element:a}),G&&t(S,{element:a}),t(n,{ref:R,name:"element",id:a.id,image:A,x:a.a.x,y:a.a.y,width:a.a.width||1,height:a.a.height||1,rotation:a.a.rotation,opacity:P,shadowEnabled:a.shadowEnabled,shadowBlur:a.shadowBlur,shadowOffsetX:a.shadowOffsetX,shadowOffsetY:a.shadowOffsetY,shadowColor:a.shadowColor,shadowOpacity:a.shadowOpacity,customCrop:_,listening:U,draggable:W?a.draggable&&M:a.draggable,preventDefault:!W||M,hideInExport:!a.showInExport,onDragMove:t=>{a.set({x:t.target.x(),y:t.target.y()})},onDragEnd:t=>{a.set({x:t.target.x(),y:t.target.y()})},onTransformStart:()=>I(!0),onTransform:t=>{const e=t.currentTarget,r=Math.abs(e.scaleX()-1)<1e-7?1:e.scaleX(),i=Math.abs(e.scaleY()-1)<1e-7?1:e.scaleY();e.scaleX(1),e.scaleY(1),a.set({x:e.x(),y:e.y(),width:e.width()*r,height:e.height()*i,rotation:e.rotation()})},onTransformEnd:()=>I(!1)}),t(s,{x:a.a.x,y:a.a.y,width:Math.max(a.a.width-a.borderSize,0),height:Math.max(a.a.height-a.borderSize,0),opacity:P,offsetX:-a.borderSize/2,offsetY:-a.borderSize/2,stroke:a.borderColor,strokeWidth:a.borderSize,listening:!1,visible:!!a.borderSize,rotation:a.rotation,cornerRadius:Math.max(0,k-a.borderSize),hideInExport:!a.showInExport})]})});

package/canvas/image-element.js

@@ -1 +1 @@
-import{jsx as t,jsxs as e,Fragment as r}from"react/jsx-runtime";import a from"react";import{observer as o}from"mobx-react-lite";import{autorun as i}from"mobx";import{Arc as n,Group as h,Image as s,Rect as d,Text as c,Transformer as g}from"react-konva";import{ROLES as l}from"../model/store.js";import u from"use-image";import f from"konva";import{Portal as p}from"react-konva-utils";import{useWorkspaceStyle as m}from"./workspace-style.js";import{incrementLoader as w,triggerLoadError as x}from"../utils/loader.js";import*as y from"../utils/svg.js";import{flags as M}from"../utils/flags.js";import{trySetCanvasSize as v}from"../utils/canvas.js";import{applyFilter as b}from"./apply-filters.js";import{useFadeIn as E}from"./use-fadein.js";import{isTouchDevice as S}from"../utils/screen.js";import{useDelayer as I}from"./use-delayer.js";import{useColor as R}from"./use-color.js";function C(){return document.createElement("canvas")}const X=t=>t.indexOf("data:image/svg+xml")>=0||t.indexOf(".svg")>=0;export const useSizeFixer=t=>{const[e,r]=a.useState(t);return a.useEffect(()=>{(async()=>{const a=await async function(t){if(!X(t)){return t}const e=await y.urlToString(t),r=y.fixSize(e);return y.svgToURL(r)}(t);a!==e&&r(a)})()},[t]),e};function Y(t,e){return{x:(t.x+e.x)/2,y:(t.y+e.y)/2}}const O=(t,e)=>e.width<5||e.height<5?t:e,T={keepRatio:!1,rotateEnabled:!1,boundBoxFunc:O},D={enabledAnchors:["top-left","top-right","bottom-left","bottom-right"],rotateEnabled:!1,borderEnabled:!1,boundBoxFunc:O};const A=(t,e,r)=>Math.max(e,Math.min(r,t));export const useCornerRadiusAndCrop=(t,e,r,o,i=0,n=!1,h=!0)=>{const s=Math.floor(A(t.a.width*o,1,1e4)),d=Math.floor(A(t.a.height*o,1,1e4)),c=Math.min(i*o,s/2,d/2),g=Math.max(t.a.width/r.width,t.a.height/r.height)*o,l=t.page._exportingOrRendering&&M.imageDownScalingEnabled&&g<1&&!n,u=0===r.x&&0===r.y&&r.width===(null==e?void 0:e.width)&&r.height===(null==e?void 0:e.height),p=a.useMemo(()=>{if(e&&e.width&&e.height){return u&&0===c&&!l?void 0:C()}},[e,c,l,u]);return a.useLayoutEffect(()=>{if(!p||!e){return}v(p,s,d);const t=p.getContext("2d");if(!t){return}c&&(t.beginPath(),t.moveTo(c,0),t.lineTo(s-c,0),t.arc(s-c,c,c,3*Math.PI/2,0,!1),t.lineTo(s,d-c),t.arc(s-c,d-c,c,0,Math.PI/2,!1),t.lineTo(c,d),t.arc(c,d-c,c,Math.PI/2,Math.PI,!1),t.lineTo(0,c),t.arc(c,c,c,Math.PI,3*Math.PI/2,!1),t.clip());const a=l?function(t,e){var r,a;const o=C();o.width=t.width,o.height=t.height;const i=Math.max(1,Math.floor(o.width*e)),n=Math.max(1,Math.floor(o.height*e));null===(r=o.getContext("2d"))||void 0===r||r.drawImage(t,0,0,o.width,o.height);const h=function(t,e,r,a,o,i,n){for(var h=new ImageData(e,r),s=new Int32Array(t.data.buffer),d=t.width,c=new Int32Array(h.data.buffer),g=h.width,l=e/i,u=r/n,f=Math.round(1/l),p=Math.round(1/u),m=f*p,w=0;w<h.height;w++){for(var x=0;x<g;x++){for(var y=0+Math.round(x/l)+(0+Math.round(w/u))*d,M=0,v=0,b=0,E=0,S=0;S<p;S++){for(var I=0;I<f;I++){var R=s[y+I+S*d];M+=R<<24>>>24,v+=R<<16>>>24,b+=R<<8>>>24,E+=R>>>24}}M=Math.round(M/m),v=Math.round(v/m),b=Math.round(b/m),E=Math.round(E/m),c[x+w*g]=E<<24|b<<16|v<<8|M}}return h}(o.getContext("2d").getImageData(0,0,o.width,o.height),i,n,0,0,o.width,o.height);return o.width=i,o.height=n,null===(a=o.getContext("2d"))||void 0===a||a.putImageData(h,0,0),o}(e,g):e,o=l?{x:Math.floor(r.x*g),y:Math.floor(r.y*g),width:Math.floor(r.width*g),height:Math.floor(r.height*g)}:r;t.drawImage(a,o.x,o.y,o.width,o.height,0,0,p.width,p.height)},[p,t.a.width,t.a.height,r.x,r.y,r.width,r.height,i,o,n,t.page._exportingOrRendering,l]),a.useEffect(()=>()=>{p&&"CANVAS"===p.nodeName&&f.Util.releaseCanvas(p)},[p]),p||e};const L=C(),W=o(({element:r})=>{const o=Math.min(30,r.a.width/4,r.a.height/4),i=a.useRef(null);a.useEffect(()=>{const t=i.current;if(!t){return}const e=new f.Animation(e=>{t.rotate(((null==e?void 0:e.timeDiff)||0)/2)},t.getLayer());return e.start(),()=>{e.stop()}});const{mediaLoadingStyle:s}=m();return e(h,{x:r.x,y:r.y,rotation:r.rotation,listening:!1,opacity:r.a.opacity,hideInExport:!r.showInExport,children:[t(d,{width:r.a.width,height:r.a.height,fill:s.fill}),t(n,{ref:i,x:r.a.width/2,y:r.a.height/2,fill:s.textFill,outerRadius:Math.abs(o),innerRadius:Math.max(1,o-5),angle:270})]})}),_=o(({element:r})=>{const{mediaErrorStyle:a}=m(),o=Math.max(10,Math.min(30,r.a.width/25));return e(h,{x:r.x,y:r.y,rotation:r.rotation,listening:!1,opacity:r.a.opacity,hideInExport:!r.showInExport,children:[t(d,{width:r.a.width,height:r.a.height,fill:a.fill}),t(c,{text:"Can not load the image...",fontSize:o,width:r.a.width,height:r.a.height,align:"center",fill:a.textFill,verticalAlign:"middle",padding:5})]})});let j=u;export const setImageLoaderHook=t=>{j=t};export const useImageLoader=(t,e="",r="")=>{const o=a.useRef(),i=()=>{var t;null===(t=o.current)||void 0===t||t.call(o),o.current=void 0};a.useEffect(()=>i,[]),a.useLayoutEffect(()=>{const a=e.slice(0,200),n=`image with id ${r} url: ${a}`;"loading"!==t||o.current||(o.current=w(n)),"loading"!==t&&i(),"failed"===t&&x(n)},[t])};export const ImageElement=o(({element:o,store:n})=>{var c;const u=m(),[w,x]=a.useState(!1),M=a.useRef(null),O=a.useRef(null),A=o.isSelected,[k,H]=(t=>{const[e,r]=a.useReducer(t=>t+1,0),o=a.useRef("loading"),i=a.useRef(t.src),n=a.useRef(t.src);n.current!==t.src&&(n.current=t.src,o.current="loading");const h=a.useMemo(()=>X(t.src)||"svg"===t.type,[t.src,t.type]);return a.useEffect(()=>{if(!h){return}if(!t.src){return}let e=!1;return(async()=>{o.current="loading",r();const a=await y.urlToString(t.src),n=y.fixSize(a);let h;h=t.colorsReplace?y.replaceColors(n,t.colorsReplace||new Map):y.svgToURL(n),e||(i.current=h,o.current="loaded",r())})(),()=>{e=!0}},[t.src,JSON.stringify(t.colorsReplace)]),h?[i.current,o.current]:[t.src,"loaded"]})(o),[z,P]=j(k,"anonymous"),F="svg"!==o.type||"loaded"===H?P:"loading";useImageLoader(F,o.src,o.id);const B=o.page._exportingOrRendering?1:Math.max(1,n.scale),N=n._elementsPixelRatio*B,U=(({image:t,status:e,type:r})=>{const o=a.useRef();return a.useEffect(()=>{o.current=t||o.current},[t]),"failed"!==e||"failed"!==e&&"svg"===r?o.current:void 0})({image:z,status:P,type:o.type}),V=((t,e,r)=>{const o=a.useMemo(()=>{var a,o;const{flipX:i,flipY:n}=t,h="svg"===t.type||t.src.indexOf("data:image/svg+xml")>=0||t.src.indexOf(".svg")>=0,s=navigator.userAgent.toLowerCase().indexOf("firefox")>-1,d=(/^((?!chrome|android).)*safari/i.test(navigator.userAgent)||s)&&h||t.maskSrc;if(!i&&!n&&!d){return e}if(!e||!e.width||!e.height){return null}const c=C();let g=1;"svg"===t.type&&(g=Math.max(t.a.width/e.width*r,t.a.height/e.height*r)),v(c,Math.max(e.width*g,1),Math.max(e.height*g,1));let l=i?-c.width:0,u=n?-c.height:0;return null===(a=c.getContext("2d"))||void 0===a||a.scale(i?-1:1,n?-1:1),null===(o=c.getContext("2d"))||void 0===o||o.drawImage(e,l,u,c.width,c.height),c},[t.maskSrc,t.flipX,t.flipY,e,t.a.width,t.a.height,r]);return a.useEffect(()=>()=>{o&&"CANVAS"===o.nodeName&&f.Util.releaseCanvas(o)},[o]),o})(o,z||U,N),$=((t,e)=>{const r=useSizeFixer(t.maskSrc||""),[o,i]=j(r,"anonymous");return useImageLoader(r?i:"loaded",r||"",t.id),a.useMemo(()=>{if(!o){return e}if(!e||!e.width||!e.height){return e}const r=C();r.width=Math.max(e.width,1),r.height=Math.max(e.height,1);const a=r.getContext("2d");if(!a){return e}a.drawImage(e,0,0),a.globalCompositeOperation="source-in";const i=function(t,e){const r=e.width/e.height;let a,o;return r>=t.width/t.height?(a=t.width,o=t.width/r):(a=t.height*r,o=t.height),{x:(t.width-a)/2,y:(t.height-o)/2,width:a,height:o}}(o,t);return a.drawImage(o,i.x,i.y,i.width,i.height,0,0,e.width,e.height),r},[e,o,t.a.width,t.a.height])})(o,V)||L;let{cropX:q,cropY:J,cropWidth:G,cropHeight:K}=o.a;"loaded"!==P&&(q=J=0,G=K=1);const Q=$.width*G,Z=$.height*K,tt=o.a.width/o.a.height;let et,rt;const at=Q/Z,ot=o.stretchEnabled;ot?(et=Q,rt=Z):tt>=at?(et=Q,rt=Q/tt):(et=Z*tt,rt=Z);const it={x:$.width*q,y:$.height*J,width:et,height:rt},nt=null!==(c=o.cornerRadius)&&void 0!==c?c:0,ht=o.page._exportingOrRendering?1:Math.min(2,n.scale),st=n._elementsPixelRatio*ht;let dt=((t,e,r,o)=>{const i=useSizeFixer(t.clipSrc||""),[n,h]=j(i,"anonymous"),s=t.clipSrc?h:"loaded";useImageLoader(s,t.clipSrc,t.id);const d=a.useMemo(()=>{if(e&&n){return C()}},[e,n]);return a.useLayoutEffect(()=>{var a;if(!n){return}if(!e||!e.width||!e.height){return}if(!n||!n.width||!n.height){return}if(!d){return}const o=C(),i=Math.max(t.a.width/n.width*r,t.a.height/n.height*r);o.width=Math.max(n.width*i,1),o.height=Math.max(n.height*i,1),null===(a=o.getContext("2d"))||void 0===a||a.drawImage(n,0,0,o.width,o.height),d.width=Math.max(e.width,1),d.height=Math.max(e.height,1);const h=d.getContext("2d");h&&(h.save(),h.drawImage(o,0,0,e.width,e.height),f.Util.releaseCanvas(o),h.globalCompositeOperation="source-in",h.drawImage(e,0,0,d.width,d.height),h.restore())},[d,e,n,t.a.width,t.a.height,r,...o]),t.clipSrc&&n?d:e})(o,useCornerRadiusAndCrop(o,$,it,st,nt,w||o._cropModeEnabled||"svg"===o.type,!0),st,[it,nt,st]);const ct=Math.max(o.a.width/et,o.a.height/rt);a.useEffect(()=>{var t;if(!o._cropModeEnabled){return}const e=null===(t=M.current)||void 0===t?void 0:t.getStage();function r(t){o._cropModeEnabled&&t.target!==O.current&&o.toggleCropMode(!1)}function a(t){o._cropModeEnabled&&t.target.parentNode!==(null==e?void 0:e.content)&&o.toggleCropMode(!1)}return document.body.addEventListener("click",a),null==e||e.on("click",r),null==e||e.on("tap",r),()=>{document.body.removeEventListener("click",a),document.body.removeEventListener("touchstart",a),null==e||e.off("click",r),null==e||e.off("click",r)}},[o._cropModeEnabled]),a.useLayoutEffect(()=>{if(!w&&!o._cropModeEnabled){return b(M.current,o),i(()=>{b(M.current,o)},{delay:100})}},[dt,o.page._exportingOrRendering,w,G,K,o._cropModeEnabled]),a.useLayoutEffect(()=>{var t;w||o._cropModeEnabled?null===(t=M.current)||void 0===t||t.clearCache():b(M.current,o)},[w,o.a.width,o.a.height,o._cropModeEnabled]),a.useEffect(()=>{b(M.current,o)},[o.shadowEnabled,o.shadowBlur,o.cornerRadius,o.shadowColor,o.shadowOffsetX,o.shadowOffsetY,o.shadowOpacity]);const gt=a.useRef(null),lt=a.useRef(null),ut=a.useRef(null);a.useLayoutEffect(()=>{o._cropModeEnabled&&(lt.current.nodes([gt.current]),ut.current.nodes([O.current]))},[o._cropModeEnabled]);var ft=a.useRef(null),pt=a.useRef(0),mt=a.useRef(!1);const wt=t=>{var e;(null===(e=t.evt.touches)||void 0===e?void 0:e.length)>2&&t.target.stopDrag(),Math.round(t.target.x())>0&&(t.target.x(0),t.target.scaleX(1)),Math.round(t.target.y())>0&&(t.target.y(0),t.target.scaleY(1));const r=t.target.width()*t.target.scaleX(),a=t.target.height()*t.target.scaleY(),i=Math.min(1,et/r),n=Math.min(1,rt/a),h=1-i,s=Math.min(h,Math.max(0,Math.round(-t.target.x())/r)),d=1-n,c=Math.min(d,Math.max(0,Math.round(-t.target.y())/a));t.target.setAttrs({x:-s*$.width,y:-c*$.height,scaleX:1,scaleY:1}),o.set({cropX:s,cropY:c,cropWidth:i,cropHeight:n})},xt=()=>{"svg"!==o.type&&o.contentEditable&&(o.stretchEnabled||setTimeout(()=>{o.toggleCropMode(!0)}))},yt="svg"===o.type&&U,Mt="loading"===P&&!yt,[vt]=I(Mt,100,!1,!1),bt="failed"===P,Et=!vt&&!bt,St=a.useRef({cropX:0,cropY:0,cropWidth:0,cropHeight:0}),It=Et?o.a.opacity:0;E(M,It);const Rt=o.selectable||n.role===l.ADMIN,Ct=S(),Xt=R(o,o.borderColor,"stroke");return e(r,{children:[vt&&t(W,{element:o}),bt&&t(_,{element:o}),t(s,{ref:M,name:"element",id:o.id,image:dt,x:o.a.x,y:o.a.y,width:o.a.width||1,height:o.a.height||1,rotation:o.a.rotation,opacity:It,shadowEnabled:o.shadowEnabled,shadowBlur:o.shadowBlur,shadowOffsetX:o.shadowOffsetX,shadowOffsetY:o.shadowOffsetY,shadowColor:o.shadowColor,shadowOpacity:o.shadowOpacity,customCrop:it,listening:Rt,draggable:Ct?o.draggable&&A:o.draggable,preventDefault:!Ct||A,hideInExport:!o.showInExport,onDragMove:t=>{o.set({x:t.target.x(),y:t.target.y()})},onDragEnd:t=>{o.set({x:t.target.x(),y:t.target.y()})},onDblClick:xt,onDblTap:xt,onTransformStart:()=>{x(!0),St.current={cropX:o.cropX,cropY:o.cropY,cropWidth:o.cropWidth,cropHeight:o.cropHeight}},onTransform:t=>{var e;const r=t.currentTarget,a=Math.abs(r.scaleX()-1)<1e-7?1:r.scaleX(),i=Math.abs(r.scaleY()-1)<1e-7?1:r.scaleY();r.scaleX(1),r.scaleY(1);const n=null===(e=t.target.getStage())||void 0===e?void 0:e.findOne("Transformer"),h=1-et/$.width,s=Math.min(h,Math.max(0,o.cropX)),d=1-rt/$.height,c=Math.min(d,Math.max(0,o.cropY)),g=n.getActiveAnchor(),l=!(g.indexOf("middle")>=0||g.indexOf("center")>=0),u=!l&&a<1&&St.current.cropHeight>rt/$.height;let f=l?o.cropWidth:o.cropWidth*a;u&&(f=o.cropWidth);const p=!l&&i<1&&St.current.cropWidth>et/$.width;let m=l?o.cropHeight:o.cropHeight*i;p&&(m=o.cropHeight),ot&&(f=o.cropWidth,m=o.cropHeight),o.set({cropX:s,cropY:c,x:r.x(),y:r.y(),width:r.width()*a,height:r.height()*i,rotation:t.target.rotation(),cropWidth:Math.min(f,1-s),cropHeight:Math.min(m,1-c)})},onTransformEnd:t=>{const e=t.currentTarget;o.set({width:e.width(),height:e.height(),x:e.x(),y:e.y(),rotation:t.target.rotation(),cropWidth:et/$.width,cropHeight:rt/$.height}),x(!1)}}),t(d,Object.assign({x:o.x,y:o.y,width:Math.max(o.a.width-o.borderSize,0),height:Math.max(o.a.height-o.borderSize,0),opacity:It,offsetX:-o.borderSize/2,offsetY:-o.borderSize/2},Xt,{strokeWidth:o.borderSize,listening:!1,visible:!!o.borderSize,rotation:o.rotation,cornerRadius:Math.max(0,nt-o.borderSize),hideInExport:!o.showInExport})),o._cropModeEnabled&&e(p,{selector:".page-abs-container",enabled:!0,children:[t(d,{x:-window.innerWidth/n.scale,y:-window.innerWidth/n.scale,width:window.innerWidth/n.scale*3,height:window.innerWidth/n.scale*3,fill:u.cropOverlayFill}),t(s,{listening:!1,image:dt,x:o.x,y:o.y,width:o.a.width,height:o.a.height,rotation:o.rotation,shadowEnabled:o.shadowEnabled,shadowBlur:o.shadowBlur}),e(h,{x:o.x,y:o.y,rotation:o.rotation,scaleX:ct,scaleY:ct,children:[t(s,{image:$,ref:O,opacity:.4,draggable:!0,x:-o.cropX*$.width,y:-o.cropY*$.height,onDragMove:wt,onTransform:wt,onTouchMove:t=>{t.evt.preventDefault();const e=t.target.getStage().getPointersPositions();var r=e[0],a=e[1];const o=t.target;if(r&&!a&&!o.isDragging()&&mt.current&&(o.startDrag(),mt.current=!1),r&&a){f.hitOnDragEnabled=!0,o.isDragging()&&(mt.current=!0,o.stopDrag());const e=t.target.getAbsoluteTransform().copy();e.invert();var i={x:r.x,y:r.y},n={x:a.x,y:a.y};if(!ft.current){return void(ft.current=Y(i,n))}var h=Y(i,n),s=function(t,e){return Math.sqrt(Math.pow(e.x-t.x,2)+Math.pow(e.y-t.y,2))}(i,n);pt.current||(pt.current=s);const p=o.position();var d={x:h.x-p.x,y:h.y-p.y},c=s/pt.current;o.scaleX(c),o.scaleY(c);const m=e.point(h),w=e.point(ft.current);var g=m.x-w.x,l=m.y-w.y,u={x:Math.min(0,h.x-d.x*c+g),y:Math.min(0,h.y-d.y*c+l)};o.position(u),pt.current=s,ft.current=h,wt(t)}},onTouchEnd:t=>{pt.current=0,ft.current=null,f.hitOnDragEnabled=!1}}),t(g,Object.assign({ref:ut},D,u.outerImageCropTransformerStyle)),t(d,{width:et,height:rt,ref:gt,listening:!1,onTransform:t=>{if(o.cropX<Math.abs(t.target.x()/$.width)&&t.target.x()<0&&o.cropX>0){const e=(o.cropWidth+o.cropX)*$.width;t.target.scaleX(1),t.target.width(e)}if(o.cropY<Math.abs(t.target.y()/$.height)&&t.target.y()<0&&o.cropY>0){const e=(o.cropHeight+o.cropY)*$.height;t.target.scaleY(1),t.target.height(e)}t.target.x()<-o.cropX*$.width-1e-9&&(t.target.x(-o.cropX*$.width),t.target.scaleX(1)),t.target.y()<-o.cropY*$.height-1e-9&&(t.target.y(-o.cropY*$.height),t.target.scaleY(1));const e=Math.min(1,Math.max(0,o.cropX+t.target.x()/$.width)),r=Math.min(1,Math.max(0,t.target.y()/$.height+o.cropY)),a=t.target.width()*t.target.scaleX(),i=t.target.height()*t.target.scaleY(),n=Math.min(1-e,a/$.width),h=Math.min(1-r,i/$.height),s=t.target.getAbsolutePosition(t.target.getParent().getParent());t.target.scale({x:1,y:1}),t.target.position({x:0,y:0}),o.set({x:s.x,y:s.y,cropX:e,cropY:r,cropWidth:n,cropHeight:h,width:Math.min(a*ct,$.width*(1-e)*ct),height:Math.min(i*ct,$.height*(1-r)*ct)})}}),t(g,Object.assign({ref:lt},T,u.innerImageCropTransformerStyle,{visible:o.resizable}))]})]})]})});
+import{jsx as t,jsxs as e,Fragment as r}from"react/jsx-runtime";import a from"react";import{observer as o}from"mobx-react-lite";import{autorun as i}from"mobx";import{Arc as n,Group as h,Image as d,Rect as s,Text as c,Transformer as l}from"react-konva";import{ROLES as g}from"../model/store.js";import u from"use-image";import f from"konva";import{Portal as p}from"react-konva-utils";import{useWorkspaceStyle as m}from"./workspace-style.js";import{incrementLoader as w,triggerLoadError as x}from"../utils/loader.js";import*as y from"../utils/svg.js";import{flags as M}from"../utils/flags.js";import{trySetCanvasSize as v}from"../utils/canvas.js";import{applyFilter as b}from"./apply-filters.js";import{useFadeIn as E}from"./use-fadein.js";import{isTouchDevice as S}from"../utils/screen.js";import{useDelayer as I}from"./use-delayer.js";import{useColor as R}from"./use-color.js";function C(){return document.createElement("canvas")}const X=t=>t.indexOf("data:image/svg+xml")>=0||t.indexOf(".svg")>=0;export const useSizeFixer=t=>{const[e,r]=a.useState(t);return a.useEffect(()=>{(async()=>{const a=await async function(t){if(!X(t)){return t}const e=await y.urlToString(t),r=y.fixSize(e);return y.svgToURL(r)}(t);a!==e&&r(a)})()},[t]),e};function Y(t,e){return{x:(t.x+e.x)/2,y:(t.y+e.y)/2}}const O=(t,e)=>e.width<5||e.height<5?t:e,T={keepRatio:!1,rotateEnabled:!1,boundBoxFunc:O},D={enabledAnchors:["top-left","top-right","bottom-left","bottom-right"],rotateEnabled:!1,borderEnabled:!1,boundBoxFunc:O};const A=(t,e,r)=>Math.max(e,Math.min(r,t));export const useCornerRadiusAndCrop=(t,e,r,o,i=0,n=!1,h=!0)=>{var d,s;const c=Math.floor(A(t.a.width*o,1,1e4)),l=Math.floor(A(t.a.height*o,1,1e4)),g=Math.min(i*o,c/2,l/2),u=Math.max(t.a.width/r.width,t.a.height/r.height)*o,p=(null===(d=t.page)||void 0===d?void 0:d._exportingOrRendering)&&M.imageDownScalingEnabled&&u<1&&!n,m=0===r.x&&0===r.y&&r.width===(null==e?void 0:e.width)&&r.height===(null==e?void 0:e.height),w=a.useMemo(()=>{if(e&&e.width&&e.height){return m&&0===g&&!p?void 0:C()}},[e,g,p,m]);return a.useLayoutEffect(()=>{if(!w||!e){return}v(w,c,l);const t=w.getContext("2d");if(!t){return}g&&(t.beginPath(),t.moveTo(g,0),t.lineTo(c-g,0),t.arc(c-g,g,g,3*Math.PI/2,0,!1),t.lineTo(c,l-g),t.arc(c-g,l-g,g,0,Math.PI/2,!1),t.lineTo(g,l),t.arc(g,l-g,g,Math.PI/2,Math.PI,!1),t.lineTo(0,g),t.arc(g,g,g,Math.PI,3*Math.PI/2,!1),t.clip());const a=p?function(t,e){var r,a;const o=C();o.width=t.width,o.height=t.height;const i=Math.max(1,Math.floor(o.width*e)),n=Math.max(1,Math.floor(o.height*e));null===(r=o.getContext("2d"))||void 0===r||r.drawImage(t,0,0,o.width,o.height);const h=function(t,e,r,a,o,i,n){for(var h=new ImageData(e,r),d=new Int32Array(t.data.buffer),s=t.width,c=new Int32Array(h.data.buffer),l=h.width,g=e/i,u=r/n,f=Math.round(1/g),p=Math.round(1/u),m=f*p,w=0;w<h.height;w++){for(var x=0;x<l;x++){for(var y=0+Math.round(x/g)+(0+Math.round(w/u))*s,M=0,v=0,b=0,E=0,S=0;S<p;S++){for(var I=0;I<f;I++){var R=d[y+I+S*s];M+=R<<24>>>24,v+=R<<16>>>24,b+=R<<8>>>24,E+=R>>>24}}M=Math.round(M/m),v=Math.round(v/m),b=Math.round(b/m),E=Math.round(E/m),c[x+w*l]=E<<24|b<<16|v<<8|M}}return h}(o.getContext("2d").getImageData(0,0,o.width,o.height),i,n,0,0,o.width,o.height);return o.width=i,o.height=n,null===(a=o.getContext("2d"))||void 0===a||a.putImageData(h,0,0),o}(e,u):e,o=p?{x:Math.floor(r.x*u),y:Math.floor(r.y*u),width:Math.floor(r.width*u),height:Math.floor(r.height*u)}:r;t.drawImage(a,o.x,o.y,o.width,o.height,0,0,w.width,w.height)},[w,t.a.width,t.a.height,r.x,r.y,r.width,r.height,i,o,n,null===(s=t.page)||void 0===s?void 0:s._exportingOrRendering,p]),a.useEffect(()=>()=>{w&&"CANVAS"===w.nodeName&&f.Util.releaseCanvas(w)},[w]),w||e};const L=C(),W=o(({element:r})=>{const o=Math.min(30,r.a.width/4,r.a.height/4),i=a.useRef(null);a.useEffect(()=>{const t=i.current;if(!t){return}const e=new f.Animation(e=>{t.rotate(((null==e?void 0:e.timeDiff)||0)/2)},t.getLayer());return e.start(),()=>{e.stop()}});const{mediaLoadingStyle:d}=m();return e(h,{x:r.x,y:r.y,rotation:r.rotation,listening:!1,opacity:r.a.opacity,hideInExport:!r.showInExport,children:[t(s,{width:r.a.width,height:r.a.height,fill:d.fill}),t(n,{ref:i,x:r.a.width/2,y:r.a.height/2,fill:d.textFill,outerRadius:Math.abs(o),innerRadius:Math.max(1,o-5),angle:270})]})}),_=o(({element:r})=>{const{mediaErrorStyle:a}=m(),o=Math.max(10,Math.min(30,r.a.width/25));return e(h,{x:r.x,y:r.y,rotation:r.rotation,listening:!1,opacity:r.a.opacity,hideInExport:!r.showInExport,children:[t(s,{width:r.a.width,height:r.a.height,fill:a.fill}),t(c,{text:"Can not load the image...",fontSize:o,width:r.a.width,height:r.a.height,align:"center",fill:a.textFill,verticalAlign:"middle",padding:5})]})});let j=u;export const setImageLoaderHook=t=>{j=t};export const useImageLoader=(t,e="",r="")=>{const o=a.useRef(),i=()=>{var t;null===(t=o.current)||void 0===t||t.call(o),o.current=void 0};a.useEffect(()=>i,[]),a.useLayoutEffect(()=>{const a=e.slice(0,200),n=`image with id ${r} url: ${a}`;"loading"!==t||o.current||(o.current=w(n)),"loading"!==t&&i(),"failed"===t&&x(n)},[t])};export const ImageElement=o(({element:o,store:n})=>{var c,u,w,x;const M=m(),[O,A]=a.useState(!1),k=a.useRef(null),H=a.useRef(null),z=o.isSelected,[P,F]=(t=>{const[e,r]=a.useReducer(t=>t+1,0),o=a.useRef("loading"),i=a.useRef(t.src),n=a.useRef(t.src);n.current!==t.src&&(n.current=t.src,o.current="loading");const h=a.useMemo(()=>X(t.src)||"svg"===t.type,[t.src,t.type]);return a.useEffect(()=>{if(!h){return}if(!t.src){return}let e=!1;return(async()=>{o.current="loading",r();const a=await y.urlToString(t.src),n=y.fixSize(a);let h;h=t.colorsReplace?y.replaceColors(n,t.colorsReplace||new Map):y.svgToURL(n),e||(i.current=h,o.current="loaded",r())})(),()=>{e=!0}},[t.src,JSON.stringify(t.colorsReplace)]),h?[i.current,o.current]:[t.src,"loaded"]})(o),[B,N]=j(P,"anonymous"),U="svg"!==o.type||"loaded"===F?N:"loading";useImageLoader(U,o.src,o.id);const V=(null===(c=o.page)||void 0===c?void 0:c._exportingOrRendering)?1:Math.max(1,n.scale),$=n._elementsPixelRatio*V,q=(({image:t,status:e,type:r})=>{const o=a.useRef();return a.useEffect(()=>{o.current=t||o.current},[t]),"failed"!==e||"failed"!==e&&"svg"===r?o.current:void 0})({image:B,status:N,type:o.type}),J=((t,e,r)=>{const o=a.useMemo(()=>{var a,o;const{flipX:i,flipY:n}=t,h="svg"===t.type||t.src.indexOf("data:image/svg+xml")>=0||t.src.indexOf(".svg")>=0,d=navigator.userAgent.toLowerCase().indexOf("firefox")>-1,s=(/^((?!chrome|android).)*safari/i.test(navigator.userAgent)||d)&&h||t.maskSrc;if(!i&&!n&&!s){return e}if(!e||!e.width||!e.height){return null}const c=C();let l=1;"svg"===t.type&&(l=Math.max(t.a.width/e.width*r,t.a.height/e.height*r)),v(c,Math.max(e.width*l,1),Math.max(e.height*l,1));let g=i?-c.width:0,u=n?-c.height:0;return null===(a=c.getContext("2d"))||void 0===a||a.scale(i?-1:1,n?-1:1),null===(o=c.getContext("2d"))||void 0===o||o.drawImage(e,g,u,c.width,c.height),c},[t.maskSrc,t.flipX,t.flipY,e,t.a.width,t.a.height,r]);return a.useEffect(()=>()=>{o&&"CANVAS"===o.nodeName&&f.Util.releaseCanvas(o)},[o]),o})(o,B||q,$),G=((t,e)=>{const r=useSizeFixer(t.maskSrc||""),[o,i]=j(r,"anonymous");return useImageLoader(r?i:"loaded",r||"",t.id),a.useMemo(()=>{if(!o){return e}if(!e||!e.width||!e.height){return e}const r=C();r.width=Math.max(e.width,1),r.height=Math.max(e.height,1);const a=r.getContext("2d");if(!a){return e}a.drawImage(e,0,0),a.globalCompositeOperation="source-in";const i=function(t,e){const r=e.width/e.height;let a,o;return r>=t.width/t.height?(a=t.width,o=t.width/r):(a=t.height*r,o=t.height),{x:(t.width-a)/2,y:(t.height-o)/2,width:a,height:o}}(o,t);return a.drawImage(o,i.x,i.y,i.width,i.height,0,0,e.width,e.height),r},[e,o,t.a.width,t.a.height])})(o,J)||L;let{cropX:K,cropY:Q,cropWidth:Z,cropHeight:tt}=o.a;"loaded"!==N&&(K=Q=0,Z=tt=1);const et=G.width*Z,rt=G.height*tt,at=o.a.width/o.a.height;let ot,it;const nt=et/rt,ht=o.stretchEnabled;ht?(ot=et,it=rt):at>=nt?(ot=et,it=et/at):(ot=rt*at,it=rt);const dt={x:G.width*K,y:G.height*Q,width:ot,height:it},st=null!==(u=o.cornerRadius)&&void 0!==u?u:0,ct=(null===(w=o.page)||void 0===w?void 0:w._exportingOrRendering)?1:Math.min(2,n.scale),lt=n._elementsPixelRatio*ct;let gt=((t,e,r,o)=>{const i=useSizeFixer(t.clipSrc||""),[n,h]=j(i,"anonymous"),d=t.clipSrc?h:"loaded";useImageLoader(d,t.clipSrc,t.id);const s=a.useMemo(()=>{if(e&&n){return C()}},[e,n]);return a.useLayoutEffect(()=>{var a;if(!n){return}if(!e||!e.width||!e.height){return}if(!n||!n.width||!n.height){return}if(!s){return}const o=C(),i=Math.max(t.a.width/n.width*r,t.a.height/n.height*r);o.width=Math.max(n.width*i,1),o.height=Math.max(n.height*i,1),null===(a=o.getContext("2d"))||void 0===a||a.drawImage(n,0,0,o.width,o.height),s.width=Math.max(e.width,1),s.height=Math.max(e.height,1);const h=s.getContext("2d");h&&(h.save(),h.drawImage(o,0,0,e.width,e.height),f.Util.releaseCanvas(o),h.globalCompositeOperation="source-in",h.drawImage(e,0,0,s.width,s.height),h.restore())},[s,e,n,t.a.width,t.a.height,r,...o]),t.clipSrc&&n?s:e})(o,useCornerRadiusAndCrop(o,G,dt,lt,st,O||o._cropModeEnabled||"svg"===o.type,!0),lt,[dt,st,lt]);const ut=Math.max(o.a.width/ot,o.a.height/it);a.useEffect(()=>{var t;if(!o._cropModeEnabled){return}const e=null===(t=k.current)||void 0===t?void 0:t.getStage();function r(t){o._cropModeEnabled&&t.target!==H.current&&o.toggleCropMode(!1)}function a(t){o._cropModeEnabled&&t.target.parentNode!==(null==e?void 0:e.content)&&o.toggleCropMode(!1)}return document.body.addEventListener("click",a),null==e||e.on("click",r),null==e||e.on("tap",r),()=>{document.body.removeEventListener("click",a),document.body.removeEventListener("touchstart",a),null==e||e.off("click",r),null==e||e.off("click",r)}},[o._cropModeEnabled]),a.useLayoutEffect(()=>{if(!O&&!o._cropModeEnabled){return b(k.current,o),i(()=>{b(k.current,o)},{delay:100})}},[gt,null===(x=o.page)||void 0===x?void 0:x._exportingOrRendering,O,Z,tt,o._cropModeEnabled]),a.useLayoutEffect(()=>{var t;O||o._cropModeEnabled?null===(t=k.current)||void 0===t||t.clearCache():b(k.current,o)},[O,o.a.width,o.a.height,o._cropModeEnabled]),a.useEffect(()=>{b(k.current,o)},[o.shadowEnabled,o.shadowBlur,o.cornerRadius,o.shadowColor,o.shadowOffsetX,o.shadowOffsetY,o.shadowOpacity]);const ft=a.useRef(null),pt=a.useRef(null),mt=a.useRef(null);a.useLayoutEffect(()=>{o._cropModeEnabled&&(pt.current.nodes([ft.current]),mt.current.nodes([H.current]))},[o._cropModeEnabled]);var wt=a.useRef(null),xt=a.useRef(0),yt=a.useRef(!1);const Mt=t=>{var e;(null===(e=t.evt.touches)||void 0===e?void 0:e.length)>2&&t.target.stopDrag(),Math.round(t.target.x())>0&&(t.target.x(0),t.target.scaleX(1)),Math.round(t.target.y())>0&&(t.target.y(0),t.target.scaleY(1));const r=t.target.width()*t.target.scaleX(),a=t.target.height()*t.target.scaleY(),i=Math.min(1,ot/r),n=Math.min(1,it/a),h=1-i,d=Math.min(h,Math.max(0,Math.round(-t.target.x())/r)),s=1-n,c=Math.min(s,Math.max(0,Math.round(-t.target.y())/a));t.target.setAttrs({x:-d*G.width,y:-c*G.height,scaleX:1,scaleY:1}),o.set({cropX:d,cropY:c,cropWidth:i,cropHeight:n})},vt=()=>{"svg"!==o.type&&o.contentEditable&&(o.stretchEnabled||setTimeout(()=>{o.toggleCropMode(!0)}))},bt="svg"===o.type&&q,Et="loading"===N&&!bt,[St]=I(Et,100,!1,!1),It="failed"===N,Rt=!St&&!It,Ct=a.useRef({cropX:0,cropY:0,cropWidth:0,cropHeight:0}),Xt=Rt?o.a.opacity:0;E(k,Xt);const Yt=o.selectable||n.role===g.ADMIN,Ot=S(),Tt=R(o,o.borderColor,"stroke");return e(r,{children:[St&&t(W,{element:o}),It&&t(_,{element:o}),t(d,{ref:k,name:"element",id:o.id,image:gt,x:o.a.x,y:o.a.y,width:o.a.width||1,height:o.a.height||1,rotation:o.a.rotation,opacity:Xt,shadowEnabled:o.shadowEnabled,shadowBlur:o.shadowBlur,shadowOffsetX:o.shadowOffsetX,shadowOffsetY:o.shadowOffsetY,shadowColor:o.shadowColor,shadowOpacity:o.shadowOpacity,customCrop:dt,listening:Yt,draggable:Ot?o.draggable&&z:o.draggable,preventDefault:!Ot||z,hideInExport:!o.showInExport,onDragMove:t=>{o.set({x:t.target.x(),y:t.target.y()})},onDragEnd:t=>{o.set({x:t.target.x(),y:t.target.y()})},onDblClick:vt,onDblTap:vt,onTransformStart:()=>{A(!0),Ct.current={cropX:o.cropX,cropY:o.cropY,cropWidth:o.cropWidth,cropHeight:o.cropHeight}},onTransform:t=>{var e;const r=t.currentTarget,a=Math.abs(r.scaleX()-1)<1e-7?1:r.scaleX(),i=Math.abs(r.scaleY()-1)<1e-7?1:r.scaleY();r.scaleX(1),r.scaleY(1);const n=null===(e=t.target.getStage())||void 0===e?void 0:e.findOne("Transformer"),h=1-ot/G.width,d=Math.min(h,Math.max(0,o.cropX)),s=1-it/G.height,c=Math.min(s,Math.max(0,o.cropY)),l=n.getActiveAnchor(),g=!(l.indexOf("middle")>=0||l.indexOf("center")>=0),u=!g&&a<1&&Ct.current.cropHeight>it/G.height;let f=g?o.cropWidth:o.cropWidth*a;u&&(f=o.cropWidth);const p=!g&&i<1&&Ct.current.cropWidth>ot/G.width;let m=g?o.cropHeight:o.cropHeight*i;p&&(m=o.cropHeight),ht&&(f=o.cropWidth,m=o.cropHeight),o.set({cropX:d,cropY:c,x:r.x(),y:r.y(),width:r.width()*a,height:r.height()*i,rotation:t.target.rotation(),cropWidth:Math.min(f,1-d),cropHeight:Math.min(m,1-c)})},onTransformEnd:t=>{const e=t.currentTarget;o.set({width:e.width(),height:e.height(),x:e.x(),y:e.y(),rotation:t.target.rotation(),cropWidth:ot/G.width,cropHeight:it/G.height}),A(!1)}}),t(s,Object.assign({x:o.x,y:o.y,width:Math.max(o.a.width-o.borderSize,0),height:Math.max(o.a.height-o.borderSize,0),opacity:Xt,offsetX:-o.borderSize/2,offsetY:-o.borderSize/2},Tt,{strokeWidth:o.borderSize,listening:!1,visible:!!o.borderSize,rotation:o.rotation,cornerRadius:Math.max(0,st-o.borderSize),hideInExport:!o.showInExport})),o._cropModeEnabled&&e(p,{selector:".page-abs-container",enabled:!0,children:[t(s,{x:-window.innerWidth/n.scale,y:-window.innerWidth/n.scale,width:window.innerWidth/n.scale*3,height:window.innerWidth/n.scale*3,fill:M.cropOverlayFill}),t(d,{listening:!1,image:gt,x:o.x,y:o.y,width:o.a.width,height:o.a.height,rotation:o.rotation,shadowEnabled:o.shadowEnabled,shadowBlur:o.shadowBlur}),e(h,{x:o.x,y:o.y,rotation:o.rotation,scaleX:ut,scaleY:ut,children:[t(d,{image:G,ref:H,opacity:.4,draggable:!0,x:-o.cropX*G.width,y:-o.cropY*G.height,onDragMove:Mt,onTransform:Mt,onTouchMove:t=>{t.evt.preventDefault();const e=t.target.getStage().getPointersPositions();var r=e[0],a=e[1];const o=t.target;if(r&&!a&&!o.isDragging()&&yt.current&&(o.startDrag(),yt.current=!1),r&&a){f.hitOnDragEnabled=!0,o.isDragging()&&(yt.current=!0,o.stopDrag());const e=t.target.getAbsoluteTransform().copy();e.invert();var i={x:r.x,y:r.y},n={x:a.x,y:a.y};if(!wt.current){return void(wt.current=Y(i,n))}var h=Y(i,n),d=function(t,e){return Math.sqrt(Math.pow(e.x-t.x,2)+Math.pow(e.y-t.y,2))}(i,n);xt.current||(xt.current=d);const p=o.position();var s={x:h.x-p.x,y:h.y-p.y},c=d/xt.current;o.scaleX(c),o.scaleY(c);const m=e.point(h),w=e.point(wt.current);var l=m.x-w.x,g=m.y-w.y,u={x:Math.min(0,h.x-s.x*c+l),y:Math.min(0,h.y-s.y*c+g)};o.position(u),xt.current=d,wt.current=h,Mt(t)}},onTouchEnd:t=>{xt.current=0,wt.current=null,f.hitOnDragEnabled=!1}}),t(l,Object.assign({ref:mt},D,M.outerImageCropTransformerStyle)),t(s,{width:ot,height:it,ref:ft,listening:!1,onTransform:t=>{if(o.cropX<Math.abs(t.target.x()/G.width)&&t.target.x()<0&&o.cropX>0){const e=(o.cropWidth+o.cropX)*G.width;t.target.scaleX(1),t.target.width(e)}if(o.cropY<Math.abs(t.target.y()/G.height)&&t.target.y()<0&&o.cropY>0){const e=(o.cropHeight+o.cropY)*G.height;t.target.scaleY(1),t.target.height(e)}t.target.x()<-o.cropX*G.width-1e-9&&(t.target.x(-o.cropX*G.width),t.target.scaleX(1)),t.target.y()<-o.cropY*G.height-1e-9&&(t.target.y(-o.cropY*G.height),t.target.scaleY(1));const e=Math.min(1,Math.max(0,o.cropX+t.target.x()/G.width)),r=Math.min(1,Math.max(0,t.target.y()/G.height+o.cropY)),a=t.target.width()*t.target.scaleX(),i=t.target.height()*t.target.scaleY(),n=Math.min(1-e,a/G.width),h=Math.min(1-r,i/G.height),d=t.target.getAbsolutePosition(t.target.getParent().getParent());t.target.scale({x:1,y:1}),t.target.position({x:0,y:0}),o.set({x:d.x,y:d.y,cropX:e,cropY:r,cropWidth:n,cropHeight:h,width:Math.min(a*ut,G.width*(1-e)*ut),height:Math.min(i*ut,G.height*(1-r)*ut)})}}),t(l,Object.assign({ref:pt},T,M.innerImageCropTransformerStyle,{visible:o.resizable}))]})]})]})});

package/canvas/page.js

@@ -1 +1 @@
-var e=this&&this.__rest||function(e,t){var n={};for(var i in e){Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i])}if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(i=Object.getOwnPropertySymbols(e);o<i.length;o++){t.indexOf(i[o])<0&&Object.prototype.propertyIsEnumerable.call(e,i[o])&&(n[i[o]]=e[i[o]])}}return n};import{jsx as t,jsxs as n,Fragment as i}from"react/jsx-runtime";import o from"react";import{observer as r,useLocalObservable as l}from"mobx-react-lite";import{action as s,runInAction as a}from"mobx";import{Group as d,Image as c,Label as m,Layer as u,Line as h,Rect as g,Stage as x,Tag as p,Text as f,Transformer as b,KonvaRenderer as v}from"react-konva";import y from"use-image";import{useWorkspaceStyle as E}from"./workspace-style.js";import{ROLES as w}from"../model/store.js";import X from"konva";import Y from"./element.js";import{DrawingLayer as S}from"./drawing-layer.js";import{ensureDragOrder as k,useSnap as A}from"./use-transformer-snap.js";import{useImageLoader as I}from"./image-element.js";import{getCrop as M}from"../utils/crop.js";import{___ as O,____ as P,isCreditVisible as R}from"../utils/validate-key.js";import{getClientRect as j,getTotalClientRect as D}from"../utils/math.js";import{pxToUnitRounded as C,pxToUnitString as B}from"../utils/unit.js";import{flags as T}from"../utils/flags.js";import{useColor as W}from"./use-color.js";import{isGradient as G}from"../utils/gradient.js";import{Html as L}from"react-konva-utils";import{observerBatching as V}from"mobx-react-lite";const F=e=>v.batchedUpdates(e,null);V(e=>{v.isAlreadyRendering()?queueMicrotask(()=>F(e)):F(e)});const U=X.DD._drag;window.removeEventListener("mousemove",U),X.DD._drag=function(e){a(()=>{U.call(this,e)})},window.addEventListener("mousemove",X.DD._drag);const z={enabledAnchors:["top-left","top-center","top-right","middle-left","bottom-left","bottom-right","bottom-center","middle-right"],rotateEnabled:!0,rotationSnaps:[0,45,90,135,180,225,270,315],ignoreStroke:!0,flipEnabled:!1,keepRatio:!0},Z={text:{enabledAnchors:["top-left","top-right","middle-left","bottom-left","bottom-right","middle-right"]},svg:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]},gif:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]},line:{enabledAnchors:[],borderEnabled:!1,rotateEnabled:!1},image:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]},many:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]},group:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]},table:{keepRatio:!1,enabledAnchors:["top-left","top-center","top-right","middle-left","middle-right","bottom-left","bottom-center","bottom-right"]}};export function registerTransformerAttrs(e,t){Z[e]=Z[e]||t,Object.assign(Z[e],t)}const _=e=>t(g,Object.assign({},e,{preventDefault:!1})),H=n=>{var{url:i}=n,o=e(n,["url"]);const[r,l]=y(i,"anonymous"),s=r?M(r,{width:o.width,height:o.height},"center-middle"):{};return I(l,i,"page background"),t(c,Object.assign({image:r},o,s))},J=e=>{const n=W({a:{width:e.width,height:e.height},width:e.width,height:e.height},e.fill);return t(g,Object.assign({},e,n))},N=i=>{const{background:r,scale:l,borderColor:s,transparencyBackgroundColor:a}=i,d=e(i,["background","scale","borderColor","transparencyBackgroundColor"]),c=o.useMemo(()=>!!X.Util.colorToRGBA(r)||G(r),[r]),m=o.useMemo(()=>{if(G(r)){return!0}const e=X.Util.colorToRGBA(r);return!e||e.a<1},[r]),u=o.useMemo(()=>{if(!m||a){return null}const e=document.createElement("canvas"),t=30;e.width=60,e.height=60;const n=e.getContext("2d");return n&&(n.fillStyle="black",n.fillRect(t,0,t,t),n.fillRect(0,t,t,t)),e},[m,a]);return n(o.Fragment,{children:[m&&t(g,a?Object.assign({fill:a},d,{hideInExport:!0}):Object.assign({fillPatternImage:u},d,{opacity:.1,hideInExport:!0})),c?t(J,Object.assign({fill:r},d)):t(H,Object.assign({url:r},d))]})},K=r(({selection:e})=>{const{selectionRectStyle:n}=E();return e.visible?t(g,{name:"selection",x:Math.min(e.x1,e.x2),y:Math.min(e.y1,e.y2),width:Math.abs(e.x1-e.x2),height:Math.abs(e.y1-e.y2),fill:n.fill,stroke:n.stroke,strokeWidth:n.strokeWidth}):null});function $(e){let t=180*e/Math.PI;return t%=360,t>180?t-=360:t<-180&&(t+=360),Math.round(t)}const Q=r(({x:e,y:o,width:r,height:l,rotation:s,anchor:a,store:d})=>{const{transformLabelStyle:c}=E();if(void 0===e||void 0===o||void 0===r||void 0===l||void 0===s||void 0===a){return null}const u=j({x:e,y:o,width:r,height:l,rotation:X.Util.radToDeg(s)}),h=(l/2+70)*Math.cos(s-Math.PI/2),g=(l/2+70)*Math.sin(s-Math.PI/2),x=C({unit:d.unit,dpi:d.dpi,px:r/d.scale,precious:"px"===d.unit?0:1})+" x "+C({unit:d.unit,dpi:d.dpi,px:l/d.scale,precious:"px"===d.unit?0:1})+("px"===d.unit?"":" "+d.unit);return n(i,{children:[n(m,{x:(u.minX+u.maxX)/2+h,y:(u.minY+u.maxY)/2+g,offsetX:14,offsetY:14,visible:"rotater"===a,children:[t(p,{cornerRadius:5,fill:c.fill}),t(f,{align:"center",verticalAlign:"middle",fill:c.textFill,padding:8,text:$(s).toString()+"°"})]}),n(m,{x:(u.minX+u.maxX)/2,y:u.maxY+20,visible:"rotater"!==a,children:[t(p,{cornerRadius:5,fill:c.fill,pointerDirection:"up",pointerHeight:0,pointerWidth:0}),t(f,{align:"center",verticalAlign:"middle",fill:c.textFill,padding:8,text:x})]})]})}),q=r(({elements:e,store:n})=>{const i=e.filter(e=>e.alwaysOnTop),r=e.filter(e=>!e.alwaysOnTop).concat(i);return t(o.Fragment,{children:r.map(e=>t(Y,{store:n,element:e,onClick:()=>{console.warn("Polotno warning: onClick callback is deprecated. Just stop using it. Polotno will do selection automatically.")}},e.id))})});export const useContextMenu=({store:e})=>{const[t,n]=o.useState(!1),[i,r]=o.useState({x:0,y:0}),l=o.useCallback(e=>{n(!0),r(e)},[]);return{open:l,close:o.useCallback(()=>{n(!1)},[]),props:{isOpen:t,offset:i,setIsOpen:n}}};let ee=null;export const registerNextDomDrop=e=>{ee=e};const te=atob("UG9sb3RubyBmcmVlIGxpY2Vuc2UgbGltaXRhdGlvbiBleGNlZWRlZCAtIFBsZWFzZSB1cGdyYWRlIHlvdXIgYWNjb3VudC4="),ne=atob("I2MwMzkyYg=="),ie=atob("djAuOS4y"),oe=e=>t(i,{children:n(m,{fill:ne,height:200,children:[t(p,{fill:ne}),t(f,Object.assign({},e,{fill:"white",text:te,height:void 0,padding:10,fontSize:20}))]})}),re=atob("RlJFRSAgVFJJQUwgIExJQ0VOU0U="),le=(atob("UG93ZXJlZCBieSBQb2xvdG5v"),atob("TElDRU5TRSAgS0VZICBJUyAgTUlTU0lORw==")),se=atob("UGxlYXNlIGFjdGl2YXRlIHlvdXIgbGljZW5zZS4KTGljZW5zZSByZWxhdGVkIHF1ZXN0aW9uczoKcG9sb3Ruby5jb20vY29udGFjdA=="),ae=e=>{const i=1===P(),o=i?le:re,r=i?230:195;return n(d,Object.assign({},e,{listening:!1,children:[t(g,{fill:ne,width:r,height:24,cornerRadius:2}),t(f,{text:o,fill:"white",fontSize:13,fontFamily:"monospace",width:r,align:"center",y:5,listening:!1}),i&&t(f,{text:se,fill:"rgba(0,0,0,0.6)",fontSize:14,y:30,listening:!1})]}))};export default r(({store:e,page:i,width:r,height:a,pageControlsEnabled:c,components:v,altCloneEnabled:y,groupSelectionMode:Y="drill",viewportSize:I,layout:M="vertical",tooltipSafeArea:C,transformerSafeArea:W})=>{const G=E(),V=G.transformerStyle,F=z,U=e.bleedVisible?i.bleed:0,H=i.computedWidth+2*U,J=i.computedHeight+2*U,$=(r-H*e.scale)/2,te=(a-J*e.scale)/2,ne=o.useRef(null),re=o.useRef(null),le=o.useRef(null),se=null==c||c,de=o.useRef(!1),[ce,me]=o.useState(null),[ue,he]=o.useState({}),[ge,xe]=o.useState(0),pe=useContextMenu({store:e}),fe=e.selectedElements.find(e=>e._cropModeEnabled),be=e.selectedElements.find(e=>e.curveEnabled),ve=e.selectedShapes.filter(e=>!e.resizable).length>0,ye=e.selectedShapes.filter(e=>!e.draggable).length>0,Ee=e.selectedElements.filter(e=>!e.visible).length>0,we=()=>{var t,n,i;const o=ne.current;if(!o){return[]}const r=o.getStage(),l=e.selectedShapes.map(e=>e._cropModeEnabled?null:r.findOne("#"+e.id)).filter(e=>!!e),s=1===e.selectedElements.length,a=s&&(null===(t=e.selectedElements[0])||void 0===t?void 0:t.type)||"many",d=Z[a],c=Object.assign(Object.assign({},F),d||{});return d&&("svg"!==a&&"image"!==a&&"gif"!==a||e.selectedElements[0].keepRatio||(c.enabledAnchors=F.enabledAnchors),"text"===a&&T.textVerticalResizeEnabled&&(c.enabledAnchors=null===(n=Z.text.enabledAnchors)||void 0===n?void 0:n.concat(["bottom-center","top-center"])),"text"===a&&s&&e.selectedElements[0].curveEnabled&&(c.enabledAnchors=Z.many.enabledAnchors)),o.setAttrs(Object.assign(Object.assign({},c),V)),ve&&o.enabledAnchors([]),ye&&o.rotateEnabled(!1),o.nodes(l),null===(i=o.getLayer())||void 0===i||i.batchDraw(),l};o.useLayoutEffect(()=>{const e=we();e.find(e=>null==e?void 0:e.isDragging())&&(e.forEach(e=>{e.isDragging()||null==e||e.startDrag()}),k())},[e.selectedShapes,fe,ve,Ee,ye,be,V]);const Xe=()=>{var e,t;const n=ne.current;if(!n){return}if(!n.isTransforming()){return void he({})}if(!n.nodes().length||!n.isTransforming()){return}const i=n.__getNodeRect(),o=null==n?void 0:n.getActiveAnchor(),r=n.getStage();he({anchor:o,x:i.x-(null!==(e=null==r?void 0:r.x())&&void 0!==e?e:0),y:i.y-(null!==(t=null==r?void 0:r.y())&&void 0!==t?t:0),rotation:i.rotation,width:i.width,height:i.height})},Ye=o.useCallback(()=>{var e;if(null===(e=ne.current)||void 0===e?void 0:e.isTransforming()){return}const t=ne.current;if(!t||!t.nodes().length){return void xe(0)}const n=t.getClientRect();if(!t.getStage()){return}const i=function(e,t,n,i=0){const o=e.x+e.width/2,r=e.y+e.height/2,l=e.width/2,s=e.height/2,a=i*Math.PI/180,d=e=>{const t=e*Math.PI/180,i=(e%360+360)%360;let d;d=0===i||180===i?s:l;const c=Math.sin(t)*(d+n),m=-Math.cos(t)*(d+n),u=c*Math.cos(a)-m*Math.sin(a),h=c*Math.sin(a)+m*Math.cos(a);return{x:o+u,y:r+h}},c=e=>e.x>=t.left&&e.x<=t.right&&e.y>=t.top&&e.y<=t.bottom;if(c(d(0))){return 0}for(const m of[180,270,90]){if(c(d(m))){return m}}return 0}(n,{top:(null==W?void 0:W.top)||0,bottom:a-((null==W?void 0:W.bottom)||0),left:(null==W?void 0:W.left)||0,right:r-((null==W?void 0:W.right)||0)},V.rotateAnchorOffset,t.rotation());xe(i)},[W,r,a]);o.useEffect(()=>{var e;null===(e=ne.current)||void 0===e||e.update(),Xe(),Ye()},[e.scale,Ye]),o.useEffect(()=>{Ye()},[e.selectedShapes,Ye]);const Se=l(()=>({visible:!1,x1:0,y1:0,x2:0,y2:0})),ke=o.useRef(!1),Ae=s(t=>{var n,i,o,r,l,s,a;if(e.role===w.VIEWER){return}ke.current=!1;const d=t.target.findAncestor(".elements-container"),c=t.target.findAncestor("Transformer"),m=t.target.findAncestor(".page-abs-container");if(d||c||m){return}const u=null===(n=t.target.getStage())||void 0===n?void 0:n.getPointerPosition();u&&(u.x-=null!==(o=null===(i=t.target.getStage())||void 0===i?void 0:i.x())&&void 0!==o?o:0,u.y-=null!==(l=null===(r=t.target.getStage())||void 0===r?void 0:r.y())&&void 0!==l?l:0,Se.visible=!0,Se.x1=u.x,Se.y1=u.y,Se.x2=u.x,Se.y2=u.y,(null!==(a=null===(s=t.target.getStage())||void 0===s?void 0:s.getPointersPositions().length)&&void 0!==a?a:0)>=2&&(Se.visible=!1))});(({stageRef:e,containerRef:t,viewportSize:n})=>{o.useEffect(()=>{var n;const i=null===(n=t.current)||void 0===n?void 0:n.closest(".polotno-workspace-inner");function o(){var n;if(!e.current){return}const o=null===(n=t.current)||void 0===n?void 0:n.getBoundingClientRect(),r=null==i?void 0:i.getBoundingClientRect();if(!o||!r){return}const l=Math.max(0,r.left-o.left-100),s=Math.max(0,r.top-o.top-100);e.current.position({x:-l,y:-s}),e.current.container().style.transform=`translate(${l}px, ${s}px)`}return o(),null==i||i.addEventListener("scroll",o),()=>{null==i||i.removeEventListener("scroll",o)}},[n.width,n.height])})({stageRef:re,containerRef:le,viewportSize:I}),o.useEffect(()=>{const t=s(e=>{var t,n,i,o,r,l;if(!Se.visible){return}null===(t=re.current)||void 0===t||t.setPointersPositions(e);let s=null===(n=re.current)||void 0===n?void 0:n.getPointerPosition();s?(s.x-=null!==(o=null===(i=re.current)||void 0===i?void 0:i.x())&&void 0!==o?o:0,s.y-=null!==(l=null===(r=re.current)||void 0===r?void 0:r.y())&&void 0!==l?l:0):s={x:Se.x2,y:Se.y2},Se.x2=s.x,Se.y2=s.y}),n=s(()=>{if(!Se.visible){return}if(!re.current){return}const t=re.current.findOne(".selection"),n=t?t.getClientRect({skipStroke:!0}):{width:0,height:0,x:0,y:0};if(n.width&&n.height){const t=[];re.current.find(".element").forEach(i=>{const o=i.getClientRect(),r=e.getElementById(i.id()),l=null==r?void 0:r.draggable,s=null==r?void 0:r.selectable;X.Util.haveIntersection(n,o)&&l&&s&&t.push(r.top.id)});const i=[...new Set(t)];ke.current=!0,e.selectElements(i)}Se.visible=!1});return window.addEventListener("mousemove",t),window.addEventListener("touchmove",t),window.addEventListener("mouseup",n,{capture:!0}),window.addEventListener("touchend",n,{capture:!0}),()=>{window.removeEventListener("mousemove",t),window.removeEventListener("touchmove",t),window.removeEventListener("mouseup",n),window.removeEventListener("touchend",n)}},[]);const Ie=o.useCallback(t=>{if(!e.selectedElements[0]){return}if(t&&e.selectedElementsIds.includes(t)){return}const n=D(e.selectedShapes),o=t?e.getElementById(t):{x:0,y:0,width:i.computedWidth,height:i.computedHeight,rotation:0},r=j(o),l=[];n.minX>r.maxX&&l.push({distance:n.minX-r.maxX,box1:n,box2:r,points:[{x:n.minX,y:n.minY+n.height/2},{x:r.maxX,y:n.minY+n.height/2},{x:r.maxX,y:r.minY+r.height/2}]}),n.maxX<r.minX&&l.push({distance:r.minX-n.maxX,box1:n,box2:r,points:[{x:n.maxX,y:n.minY+n.height/2},{x:r.minX,y:n.minY+n.height/2},{x:r.minX,y:r.minY+r.height/2}]}),n.minY>r.maxY&&l.push({box1:n,box2:r,distance:n.minY-r.maxY,points:[{x:n.minX+n.width/2,y:n.minY},{x:n.minX+n.width/2,y:r.maxY},{x:r.minX+r.width/2,y:r.maxY}]}),n.maxY<r.minY&&l.push({box1:n,box2:r,distance:r.minY-n.maxY,points:[{x:n.minX+n.width/2,y:n.maxY},{x:n.minX+n.width/2,y:r.minY},{x:r.minX+r.width/2,y:r.minY}]});const s=n.minX>=r.minX&&n.maxX<=r.maxX&&n.minY>=r.minY&&n.maxY<=r.maxY;if(s&&(l.push({distance:n.minX-r.minX,box1:n,box2:r,points:[{x:n.minX,y:n.minY+n.height/2},{x:r.minX,y:n.minY+n.height/2},{x:r.minX,y:r.minY+r.height/2}]}),l.push({distance:r.maxX-n.maxX,box1:n,box2:r,points:[{x:n.maxX,y:n.minY+n.height/2},{x:r.maxX,y:n.minY+n.height/2},{x:r.maxX,y:r.minY+r.height/2}]}),l.push({box1:n,box2:r,distance:n.minY-r.minY,points:[{x:n.minX+n.width/2,y:n.minY},{x:n.minX+n.width/2,y:r.minY},{x:r.minX+r.width/2,y:r.minY}]}),l.push({box1:n,box2:r,distance:r.maxY-n.maxY,points:[{x:n.minX+n.width/2,y:n.maxY},{x:n.minX+n.width/2,y:r.maxY},{x:r.minX+r.width/2,y:r.maxY}]})),0===l.length&&!s){const e=n.minX<r.maxX&&n.maxX>r.minX,t=n.minY<r.maxY&&n.maxY>r.minY;if(e&&t){const e=(Math.max(n.minY,r.minY)+Math.min(n.maxY,r.maxY))/2,t=(Math.max(n.minX,r.minX)+Math.min(n.maxX,r.maxX))/2;n.minX<r.minX?l.push({distance:r.minX-n.minX,box1:n,box2:r,points:[{x:n.minX,y:e},{x:r.minX,y:e},{x:r.minX,y:e}]}):l.push({distance:n.minX-r.minX,box1:n,box2:r,points:[{x:n.minX,y:e},{x:r.minX,y:e},{x:r.minX,y:e}]}),n.maxX>r.maxX?l.push({distance:n.maxX-r.maxX,box1:n,box2:r,points:[{x:r.maxX,y:e},{x:n.maxX,y:e},{x:r.maxX,y:e}]}):l.push({distance:r.maxX-n.maxX,box1:n,box2:r,points:[{x:n.maxX,y:e},{x:r.maxX,y:e},{x:r.maxX,y:e}]}),n.minY<r.minY?l.push({box1:n,box2:r,distance:r.minY-n.minY,points:[{x:t,y:n.minY},{x:t,y:r.minY},{x:t,y:r.minY}]}):l.push({box1:n,box2:r,distance:n.minY-r.minY,points:[{x:t,y:n.minY},{x:t,y:r.minY},{x:t,y:r.minY}]}),n.maxY>r.maxY?l.push({box1:n,box2:r,distance:n.maxY-r.maxY,points:[{x:t,y:r.maxY},{x:t,y:n.maxY},{x:t,y:r.maxY}]}):l.push({box1:n,box2:r,distance:r.maxY-n.maxY,points:[{x:t,y:n.maxY},{x:t,y:r.maxY},{x:t,y:r.maxY}]})}}JSON.stringify(ce)!==JSON.stringify(l)&&me(l)},[e,i]);o.useEffect(()=>{e.selectedElements[0]&&e.distanceGuidesVisible?Ie():ce&&me(null)},[e.distanceGuidesVisible,Ie,e.selectedShapes.map(e=>`${e.x},${e.y},${e.width},${e.height},${e.rotation}`).join("|")]);const Me=o.useRef(!1);o.useEffect(()=>{var e;let t;const n=null===(e=le.current)||void 0===e?void 0:e.closest(".polotno-workspace-inner"),i=()=>{Me.current=!0,clearTimeout(t),t=setTimeout(()=>{Me.current=!1},300)};return null==n||n.addEventListener("scroll",i),()=>{clearTimeout(t),null==n||n.removeEventListener("scroll",i)}},[]),o.useEffect(()=>{const e=re.current;if(!e){return}const t=e.container(),n=e=>{var t,n;e.touches.length>=2&&((null===(t=ne.current)||void 0===t?void 0:t.isDragging())&&ne.current.stopDrag(),null===(n=ne.current)||void 0===n||n.nodes().forEach(e=>{e.isDragging()&&e.stopDrag()}))};return t.addEventListener("touchstart",n,{passive:!0}),t.addEventListener("touchmove",n,{passive:!0}),()=>{t.removeEventListener("touchstart",n),t.removeEventListener("touchmove",n)}},[]);const Oe=t=>{if(e.role===w.VIEWER){return}if(e.activePage!==i&&i.select(),Me.current){return}if(ke.current){return}const n=t.evt.shiftKey,o=t.evt.ctrlKey||t.evt.metaKey,r=n||o,l=t.target.findAncestor(".elements-container"),s=t.target.findAncestor(".page-abs-container"),a=t.target.findAncestor("Transformer"),d=t.target.findAncestor(".page-container",!0);if(!(r||l||a||s||d||Se.visible)){return e.selectElements([]),void e.selectPages([])}if(o&&!n){const t=re.current,n=null==t?void 0:t.getPointerPosition();if(!t||!n){return}const i=t.getAllIntersections(n),o=new Set,r=[];for(const s of[...i].reverse()){const t=s.findAncestor(".element",!0);if(!t){continue}const n=e.getElementById(t.id()),i=null==n?void 0:n.top;i&&(o.has(i.id)||(o.add(i.id),r.push(i.id)))}if(0===r.length){return}let l;if(1===e.selectedElementsIds.length){const t=e.selectedElementsIds[0],n=r.indexOf(t);l=-1===n?r[0]:r[(n+1)%r.length]}else{l=r[0]}return e.selectElements([l]),void e.selectPages([])}const c=t.target.findAncestor(".element-container",!0),m=(null==c?void 0:c.findOne(".element"))||t.target.findAncestor(".element",!0),u=e.getElementById(null==m?void 0:m.id()),h=null==u?void 0:u.top;let g;if("group"===Y){g=null==h?void 0:h.id}else if(h){const t=e.selectedElements.some(e=>{var t;return(null===(t=e.top)||void 0===t?void 0:t.id)===h.id});g=t?null==u?void 0:u.id:null==h?void 0:h.id}else{g=void 0}const x=null==u?void 0:u.id;if(x&&e.selectedElementsIds.indexOf(x)>=0&&!n){return}const p=!!g&&e.selectedElementsIds.indexOf(g)>=0,f=t.target.findAncestor(".page-container",!0);if(g&&n&&!p){const t=e.selectedElementsIds.concat([g]),n=new Set(t),i=t.filter(t=>{const i=e.getElementById(t);if(!i){return!1}for(let e=i.parent;e;e=null==e?void 0:e.parent){if(n.has(e.id)){return!1}}return!0});e.selectElements(i),e.selectPages([])}else{g&&n&&p?e.selectElements(e.selectedElementsIds.filter(e=>e!==g)):!g||n||p?g&&!n&&p||(f?(n||e.selectElements([]),e.selectPages([i.id])):e.selectPages([])):(e.selectElements([g]),e.selectPages([]))}};A(ne,e);const Pe=e.activePage===i,Re=e._selectedPagesIds.includes(i.id),je=null==v?void 0:v.PageControls,De=null==v?void 0:v.Tooltip,Ce=null==v?void 0:v.ContextMenu,Be=1/e.scale,Te=0/e.scale;return n("div",{ref:le,onDragOver:e=>e.preventDefault(),onDrop:t=>{if(t.preventDefault(),e.role===w.VIEWER){return}if(!re.current){return}re.current.setPointersPositions(t);const n=re.current.findOne(".elements-container"),o=null==n?void 0:n.getRelativePointerPosition(),r=re.current.getPointerPosition(),l=re.current.getAllIntersections(r).map(e=>e.findAncestor(".element",!0)).filter(Boolean),s=[...new Set(l.reverse())].map(t=>e.getElementById(t.id())).filter(e=>!!e),a=s[0];ee&&o&&(ee(o,a,{elements:s,page:i}),ee=null)},style:{position:"relative",width:r+"px",height:a+"px",overflow:"hidden",flexShrink:0},className:"polotno-page-container"+(Pe?" active-page":""),children:[t(x,{ref:re,width:Math.min(r,I.width+200),height:Math.min(I.height+200,a),onClick:Oe,onTap:Oe,onContextMenu:t=>{if(t.evt.preventDefault(),e.role===w.VIEWER){return}const n=t.target.findAncestor(".element",!0),i=e.getElementById(null==n?void 0:n.id()),o=null==i?void 0:i.top,r=null==o?void 0:o.id;r?e.selectedElementsIds.indexOf(r)>=0||e.selectElements([r]):e.selectElements([]),pe.open({x:t.evt.clientX,y:t.evt.clientY})},onMouseDown:Ae,onMouseMove:t=>{if(!e.distanceGuidesVisible&&!t.evt.altKey){return void(ce&&me(null))}const n=t.target.findAncestor(".element",!0),i=null==n?void 0:n.id();Ie(i)},onDragStart:t=>{var n;const i=t.target.getStage();if(i&&i.getPointersPositions().length>=2){return void t.target.stopDrag()}const o=t.target.findAncestor(".element",!0);if(o){const i=e.getElementById(null==o?void 0:o.id()),r=null==i?void 0:i.top,l=null==r?void 0:r.id;if(!(i&&e.selectedElementsIds.indexOf(i.id)>=0||l&&e.selectedElementsIds.indexOf(l)>=0)&&l){e.selectElements([l]);const i=we();t.target.stopDrag(),i.forEach(e=>{e.isDragging()||e.startDrag(t)}),null===(n=ne.current)||void 0===n||n.startDrag(t),k()}}ce&&me(null)},pageId:i.id,style:{position:"absolute",overflow:"hidden",top:0,left:0},children:n(u,{children:[t(_,{width:r,height:a,fill:G.workspaceBackgroundColor}),t(d,{x:$,y:te,scaleX:e.scale,scaleY:e.scale,name:"page-container",children:n(d,{name:"page-container-2",children:[t(d,{name:"page-background-group",x:U,y:U,children:t(N,{x:-i.bleed,y:-i.bleed,width:i.computedWidth+2*i.bleed,height:i.computedHeight+2*i.bleed,background:i.background,transparencyBackgroundColor:G.transparencyBackgroundColor,name:"page-background",preventDefault:!1,scale:e.scale})}),n(d,{x:U,y:U,name:"elements-container",listening:!e.isPlaying&&e.role!==w.VIEWER,children:[t(g,{name:"elements-area",width:i.computedWidth,height:i.computedHeight,listening:!1}),t(q,{elements:i.children,store:e})]}),t(g,{stroke:G.bleedColor,name:"bleed",strokeWidth:i.bleed,x:i.bleed/2,y:i.bleed/2,width:i.computedWidth+i.bleed,height:i.computedHeight+i.bleed,listening:!1,visible:i.bleed>0&&e.bleedVisible,hideInExport:!0}),O()===ie&&t(oe,{name:"hit-detection",x:-Be/2-Te,y:-Be/2-Te,width:H+Be+2*Te,height:J+Be+2*Te})]})}),t(h,{name:"workspace-background",points:[0,0,r,0,r,a,0,a,0,0,$,te,$,a-te,r-$,a-te,r-$,te,$,te],listening:!1,closed:!0,fill:G.workspaceBackgroundColor}),t(d,{x:$,y:te,scaleX:e.scale,scaleY:e.scale,children:t(g,{name:"page-highlight",hideInExport:!0,x:-Be/2-Te,y:-Be/2-Te,width:H+Be+2*Te,height:J+Be+2*Te,stroke:Re?G.activePageBorderColor:G.pageBorderColor,strokeWidth:2,listening:!1,strokeScaleEnabled:!1})}),n(d,{x:$+U*e.scale,y:te+U*e.scale,scaleX:e.scale,scaleY:e.scale,name:"page-abs-container",children:[t(b,{ref:ne,rotateAnchorAngle:ge,onDragStart:t=>{var n;const o=t.target.getStage();o&&o.getPointersPositions().length>=2?t.target.stopDrag():((null===(n=t.evt)||void 0===n?void 0:n.altKey)&&y&&e.selectedElements.forEach(e=>{const t=e.clone({},{skipSelect:!0}),n=i.children.indexOf(e);i.setElementZIndex(t.id,n)}),de.current=!0,e.history.startTransaction())},onDragEnd:()=>{de.current&&(e.history.endTransaction(),de.current=!1),Ye()},onTransformStart:()=>{e.history.startTransaction(),me(null)},boundBoxFunc:(t,n)=>{var i;const o=Math.abs(n.width)<1||Math.abs(n.height)<1,r=Math.abs(t.width)<1||Math.abs(t.height)<1;if(o&&!r){return t}const l=e.selectedElements;if(1===l.length&&"table"===(null===(i=l[0])||void 0===i?void 0:i.type)){const e=l[0],i=Math.abs(t.width),o=Math.abs(t.height);if(i>0&&o>0){const r=Math.abs(n.width)/i,l=Math.abs(n.height)/o,s=e.width*r,a=e.height*l,d=Object.assign({},n);return s<e.minWidth&&(d.width=t.width,d.x=t.x),a<e.minHeight&&(d.height=t.height,d.y=t.y),d}}return n},onTransform:e=>{const t=ne.current.nodes(),n=t[t.length-1];e.target===n&&setTimeout(()=>{Xe()},0)},onTransformEnd:t=>{he({}),e.history.endTransaction(),Ye()},visible:!e.isPlaying}),ce&&ce.map(({points:i,distance:o,box1:r,box2:l},s)=>n(d,{name:"distances-container",hideInExport:!0,listening:!1,children:[t(g,Object.assign({},r,{stroke:G.distanceGuideStyle.stroke,strokeWidth:1,strokeScaleEnabled:!1})),t(g,Object.assign({},l,{stroke:G.distanceGuideStyle.stroke,strokeWidth:1,strokeScaleEnabled:!1})),t(h,{points:[i[0].x,i[0].y,i[1].x,i[1].y],stroke:G.distanceGuideStyle.stroke,strokeWidth:1,strokeScaleEnabled:!1}),t(h,{points:[i[1].x,i[1].y,i[2].x,i[2].y],stroke:G.distanceGuideStyle.stroke,strokeWidth:1,strokeScaleEnabled:!1}),n(m,{x:(i[0].x+i[1].x)/2,y:(i[0].y+i[1].y)/2,offsetY:-10,scaleX:1/e.scale,scaleY:1/e.scale,children:[t(p,{cornerRadius:5,fill:G.distanceGuideStyle.labelFill,pointerDirection:"down"}),t(f,{align:"center",verticalAlign:"middle",fill:G.distanceGuideStyle.labelTextFill,padding:5,text:B({unit:e.unit,dpi:e.dpi,px:o})})]})]},s)),i._rendering&&n(d,{children:[t(g,{width:H,height:J,fill:"rgba(255,255,255,0.9)"}),t(f,{text:"Rendering...",fontSize:60,width:H,height:J,align:"center",verticalAlign:"middle"})]}),De&&t(De,{components:v,store:e,page:i,stageRef:re,tooltipSafeArea:C}),Ce&&t(L,{children:t(Ce,Object.assign({components:v,store:e},pe.props))})]}),t(S,{store:e,page:i,width:r,height:a,scale:e.scale,xPadding:$,yPadding:te,bleed:U}),t(Q,Object.assign({},ue,{store:e})),t(K,{selection:Se}),P()>0&&n(d,{hideInExport:!0,children:[t(ae,{name:"cache-bounds",x:r-(1===P()?250:210),y:a-(1===P()?95:45)}),t(ae,{name:"cache-bounds-t",x:10,y:10})]}),R()&&t(f,{text:"Powered by polotno.com",fontSize:14,fill:"rgba(0,0,0,0.6)",x:r-170,y:a-18,onMouseEnter:e=>{e.target.getStage().container().style.cursor="pointer"},onMouseLeave:e=>{e.target.getStage().container().style.cursor=""},onTouchStart:e=>{e.cancelBubble=!0},onMouseDown:e=>{e.cancelBubble=!0},onClick:()=>{window.open("https://polotno.com","_blank","noopener")},onTap:()=>{window.open("https://polotno.com","_blank","noopener")}}),t(d,{name:"line-guides"})]})}),se&&je&&t(je,{store:e,page:i,xPadding:$,yPadding:te,layout:M})]})});
+var e=this&&this.__rest||function(e,t){var n={};for(var i in e){Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i])}if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(i=Object.getOwnPropertySymbols(e);o<i.length;o++){t.indexOf(i[o])<0&&Object.prototype.propertyIsEnumerable.call(e,i[o])&&(n[i[o]]=e[i[o]])}}return n};import{jsx as t,jsxs as n,Fragment as i}from"react/jsx-runtime";import o from"react";import{observer as r,useLocalObservable as l}from"mobx-react-lite";import{action as s,runInAction as a}from"mobx";import{Group as d,Image as c,Label as m,Layer as u,Line as h,Rect as g,Stage as x,Tag as p,Text as f,Transformer as b,KonvaRenderer as v}from"react-konva";import y from"use-image";import{useWorkspaceStyle as E}from"./workspace-style.js";import{ROLES as w}from"../model/store.js";import X from"konva";import Y from"./element.js";import{DrawingLayer as S}from"./drawing-layer.js";import{ensureDragOrder as k,useSnap as A}from"./use-transformer-snap.js";import{useImageLoader as I}from"./image-element.js";import{getCrop as M}from"../utils/crop.js";import{___ as O,____ as P,isCreditVisible as R}from"../utils/validate-key.js";import{getClientRect as j,getTotalClientRect as D}from"../utils/math.js";import{pxToUnitRounded as C,pxToUnitString as B}from"../utils/unit.js";import{flags as T}from"../utils/flags.js";import{useColor as W}from"./use-color.js";import{isGradient as G}from"../utils/gradient.js";import{Html as L}from"react-konva-utils";import{observerBatching as V}from"mobx-react-lite";const F=e=>v.batchedUpdates(e,null);V(e=>{v.isAlreadyRendering()?queueMicrotask(()=>F(e)):F(e)});const U=X.DD._drag;window.removeEventListener("mousemove",U),X.DD._drag=function(e){a(()=>{U.call(this,e)})},window.addEventListener("mousemove",X.DD._drag);const z={enabledAnchors:["top-left","top-center","top-right","middle-left","bottom-left","bottom-right","bottom-center","middle-right"],rotateEnabled:!0,rotationSnaps:[0,45,90,135,180,225,270,315],ignoreStroke:!0,flipEnabled:!1,keepRatio:!0},Z={text:{enabledAnchors:["top-left","top-right","middle-left","bottom-left","bottom-right","middle-right"]},svg:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]},gif:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]},line:{enabledAnchors:[],borderEnabled:!1,rotateEnabled:!1},image:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]},many:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]},group:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]},table:{keepRatio:!1,enabledAnchors:["top-left","top-center","top-right","middle-left","middle-right","bottom-left","bottom-center","bottom-right"]}};export function registerTransformerAttrs(e,t){Z[e]=Z[e]||t,Object.assign(Z[e],t)}const _=e=>t(g,Object.assign({},e,{preventDefault:!1})),H=n=>{var{url:i}=n,o=e(n,["url"]);const[r,l]=y(i,"anonymous"),s=r?M(r,{width:o.width,height:o.height},"center-middle"):{};return I(l,i,"page background"),t(c,Object.assign({image:r},o,s))},J=e=>{const n=W({a:{width:e.width,height:e.height},width:e.width,height:e.height},e.fill);return t(g,Object.assign({},e,n))},N=i=>{const{background:r,scale:l,borderColor:s,transparencyBackgroundColor:a}=i,d=e(i,["background","scale","borderColor","transparencyBackgroundColor"]),c=o.useMemo(()=>!!X.Util.colorToRGBA(r)||G(r),[r]),m=o.useMemo(()=>{if(G(r)){return!0}const e=X.Util.colorToRGBA(r);return!e||e.a<1},[r]),u=o.useMemo(()=>{if(!m||a){return null}const e=document.createElement("canvas"),t=30;e.width=60,e.height=60;const n=e.getContext("2d");return n&&(n.fillStyle="black",n.fillRect(t,0,t,t),n.fillRect(0,t,t,t)),e},[m,a]);return n(o.Fragment,{children:[m&&t(g,a?Object.assign({fill:a},d,{hideInExport:!0}):Object.assign({fillPatternImage:u},d,{opacity:.1,hideInExport:!0})),c?t(J,Object.assign({fill:r},d)):t(H,Object.assign({url:r},d))]})},K=r(({selection:e})=>{const{selectionRectStyle:n}=E();return e.visible?t(g,{name:"selection",x:Math.min(e.x1,e.x2),y:Math.min(e.y1,e.y2),width:Math.abs(e.x1-e.x2),height:Math.abs(e.y1-e.y2),fill:n.fill,stroke:n.stroke,strokeWidth:n.strokeWidth}):null});function $(e){let t=180*e/Math.PI;return t%=360,t>180?t-=360:t<-180&&(t+=360),Math.round(t)}const Q=r(({x:e,y:o,width:r,height:l,rotation:s,anchor:a,store:d})=>{const{transformLabelStyle:c}=E();if(void 0===e||void 0===o||void 0===r||void 0===l||void 0===s||void 0===a){return null}const u=j({x:e,y:o,width:r,height:l,rotation:X.Util.radToDeg(s)}),h=(l/2+70)*Math.cos(s-Math.PI/2),g=(l/2+70)*Math.sin(s-Math.PI/2),x=C({unit:d.unit,dpi:d.dpi,px:r/d.scale,precious:"px"===d.unit?0:1})+" x "+C({unit:d.unit,dpi:d.dpi,px:l/d.scale,precious:"px"===d.unit?0:1})+("px"===d.unit?"":" "+d.unit);return n(i,{children:[n(m,{x:(u.minX+u.maxX)/2+h,y:(u.minY+u.maxY)/2+g,offsetX:14,offsetY:14,visible:"rotater"===a,children:[t(p,{cornerRadius:5,fill:c.fill}),t(f,{align:"center",verticalAlign:"middle",fill:c.textFill,padding:8,text:$(s).toString()+"°"})]}),n(m,{x:(u.minX+u.maxX)/2,y:u.maxY+20,visible:"rotater"!==a,children:[t(p,{cornerRadius:5,fill:c.fill,pointerDirection:"up",pointerHeight:0,pointerWidth:0}),t(f,{align:"center",verticalAlign:"middle",fill:c.textFill,padding:8,text:x})]})]})}),q=r(({elements:e,store:n})=>{const i=e.filter(e=>e.alwaysOnTop),r=e.filter(e=>!e.alwaysOnTop).concat(i);return t(o.Fragment,{children:r.map(e=>t(Y,{store:n,element:e,onClick:()=>{console.warn("Polotno warning: onClick callback is deprecated. Just stop using it. Polotno will do selection automatically.")}},e.id))})});export const useContextMenu=({store:e})=>{const[t,n]=o.useState(!1),[i,r]=o.useState({x:0,y:0}),l=o.useCallback(e=>{n(!0),r(e)},[]);return{open:l,close:o.useCallback(()=>{n(!1)},[]),props:{isOpen:t,offset:i,setIsOpen:n}}};let ee=null;export const registerNextDomDrop=e=>{ee=e};const te=atob("UG9sb3RubyBmcmVlIGxpY2Vuc2UgbGltaXRhdGlvbiBleGNlZWRlZCAtIFBsZWFzZSB1cGdyYWRlIHlvdXIgYWNjb3VudC4="),ne=atob("I2MwMzkyYg=="),ie=atob("djAuOS4y"),oe=e=>t(i,{children:n(m,{fill:ne,height:200,children:[t(p,{fill:ne}),t(f,Object.assign({},e,{fill:"white",text:te,height:void 0,padding:10,fontSize:20}))]})}),re=atob("RlJFRSAgVFJJQUwgIExJQ0VOU0U="),le=(atob("UG93ZXJlZCBieSBQb2xvdG5v"),atob("TElDRU5TRSAgS0VZICBJUyAgTUlTU0lORw==")),se=atob("UGxlYXNlIGFjdGl2YXRlIHlvdXIgbGljZW5zZS4KTGljZW5zZSByZWxhdGVkIHF1ZXN0aW9uczoKcG9sb3Ruby5jb20vY29udGFjdA=="),ae=e=>{const i=1===P(),o=i?le:re,r=i?230:195;return n(d,Object.assign({},e,{listening:!1,children:[t(g,{fill:ne,width:r,height:24,cornerRadius:2}),t(f,{text:o,fill:"white",fontSize:13,fontFamily:"monospace",width:r,align:"center",y:5,listening:!1}),i&&t(f,{text:se,fill:"rgba(0,0,0,0.6)",fontSize:14,y:30,listening:!1})]}))};export default r(({store:e,page:i,width:r,height:a,pageControlsEnabled:c,components:v,altCloneEnabled:y,groupSelectionMode:Y="drill",viewportSize:I,layout:M="vertical",tooltipSafeArea:C,transformerSafeArea:W})=>{const G=E(),V=G.transformerStyle,F=z,U=e.bleedVisible?i.bleed:0,H=i.computedWidth+2*U,J=i.computedHeight+2*U,$=(r-H*e.scale)/2,te=(a-J*e.scale)/2,ne=o.useRef(null),re=o.useRef(null),le=o.useRef(null),se=null==c||c,de=o.useRef(!1),[ce,me]=o.useState(null),[ue,he]=o.useState({}),[ge,xe]=o.useState(0),pe=useContextMenu({store:e}),fe=e.selectedElements.find(e=>e._cropModeEnabled),be=e.selectedElements.find(e=>e.curveEnabled),ve=e.selectedShapes.filter(e=>!e.resizable).length>0,ye=e.selectedShapes.filter(e=>!e.draggable).length>0,Ee=e.selectedElements.filter(e=>!e.visible).length>0,we=()=>{var t,n,i;const o=ne.current;if(!o){return[]}const r=o.getStage(),l=e.selectedShapes.map(e=>e._cropModeEnabled?null:r.findOne("#"+e.id)).filter(e=>!!e),s=1===e.selectedElements.length,a=s&&(null===(t=e.selectedElements[0])||void 0===t?void 0:t.type)||"many",d=Z[a],c=Object.assign(Object.assign({},F),d||{});return d&&("svg"!==a&&"image"!==a&&"gif"!==a||e.selectedElements[0].keepRatio||(c.enabledAnchors=F.enabledAnchors),"text"===a&&T.textVerticalResizeEnabled&&(c.enabledAnchors=null===(n=Z.text.enabledAnchors)||void 0===n?void 0:n.concat(["bottom-center","top-center"])),"text"===a&&s&&e.selectedElements[0].curveEnabled&&(c.enabledAnchors=Z.many.enabledAnchors)),o.setAttrs(Object.assign(Object.assign({},c),V)),ve&&o.enabledAnchors([]),ye&&o.rotateEnabled(!1),o.nodes(l),null===(i=o.getLayer())||void 0===i||i.batchDraw(),l};o.useLayoutEffect(()=>{const e=we();e.find(e=>null==e?void 0:e.isDragging())&&(e.forEach(e=>{e.isDragging()||null==e||e.startDrag()}),k())},[e.selectedShapes,fe,ve,Ee,ye,be,V]);const Xe=()=>{var e,t;const n=ne.current;if(!n){return}if(!n.isTransforming()){return void he({})}if(!n.nodes().length||!n.isTransforming()){return}const i=n.__getNodeRect(),o=null==n?void 0:n.getActiveAnchor(),r=n.getStage();he({anchor:o,x:i.x-(null!==(e=null==r?void 0:r.x())&&void 0!==e?e:0),y:i.y-(null!==(t=null==r?void 0:r.y())&&void 0!==t?t:0),rotation:i.rotation,width:i.width,height:i.height})},Ye=o.useCallback(()=>{var e;if(null===(e=ne.current)||void 0===e?void 0:e.isTransforming()){return}const t=ne.current;if(!t||!t.nodes().length){return void xe(0)}const n=t.getClientRect();if(!t.getStage()){return}const i=function(e,t,n,i=0){const o=e.x+e.width/2,r=e.y+e.height/2,l=e.width/2,s=e.height/2,a=i*Math.PI/180,d=e=>{const t=e*Math.PI/180,i=(e%360+360)%360;let d;d=0===i||180===i?s:l;const c=Math.sin(t)*(d+n),m=-Math.cos(t)*(d+n),u=c*Math.cos(a)-m*Math.sin(a),h=c*Math.sin(a)+m*Math.cos(a);return{x:o+u,y:r+h}},c=e=>e.x>=t.left&&e.x<=t.right&&e.y>=t.top&&e.y<=t.bottom;if(c(d(0))){return 0}for(const m of[180,270,90]){if(c(d(m))){return m}}return 0}(n,{top:(null==W?void 0:W.top)||0,bottom:a-((null==W?void 0:W.bottom)||0),left:(null==W?void 0:W.left)||0,right:r-((null==W?void 0:W.right)||0)},V.rotateAnchorOffset,t.rotation());xe(i)},[W,r,a]);o.useEffect(()=>{var e;null===(e=ne.current)||void 0===e||e.update(),Xe(),Ye()},[e.scale,Ye]),o.useEffect(()=>{Ye()},[e.selectedShapes,Ye]);const Se=l(()=>({visible:!1,x1:0,y1:0,x2:0,y2:0})),ke=o.useRef(!1),Ae=s(t=>{var n,i,o,r,l,s,a;if(e.role===w.VIEWER){return}ke.current=!1;const d=t.target.findAncestor(".elements-container"),c=t.target.findAncestor("Transformer"),m=t.target.findAncestor(".page-abs-container");if(d||c||m){return}const u=null===(n=t.target.getStage())||void 0===n?void 0:n.getPointerPosition();u&&(u.x-=null!==(o=null===(i=t.target.getStage())||void 0===i?void 0:i.x())&&void 0!==o?o:0,u.y-=null!==(l=null===(r=t.target.getStage())||void 0===r?void 0:r.y())&&void 0!==l?l:0,Se.visible=!0,Se.x1=u.x,Se.y1=u.y,Se.x2=u.x,Se.y2=u.y,(null!==(a=null===(s=t.target.getStage())||void 0===s?void 0:s.getPointersPositions().length)&&void 0!==a?a:0)>=2&&(Se.visible=!1))});(({stageRef:e,containerRef:t,viewportSize:n})=>{o.useEffect(()=>{var n;const i=null===(n=t.current)||void 0===n?void 0:n.closest(".polotno-workspace-inner");function o(){var n;if(!e.current){return}const o=null===(n=t.current)||void 0===n?void 0:n.getBoundingClientRect(),r=null==i?void 0:i.getBoundingClientRect();if(!o||!r){return}const l=Math.max(0,r.left-o.left-100),s=Math.max(0,r.top-o.top-100);e.current.position({x:-l,y:-s}),e.current.container().style.transform=`translate(${l}px, ${s}px)`}return o(),null==i||i.addEventListener("scroll",o),()=>{null==i||i.removeEventListener("scroll",o)}},[n.width,n.height])})({stageRef:re,containerRef:le,viewportSize:I}),o.useEffect(()=>{const t=s(e=>{var t,n,i,o,r,l;if(!Se.visible){return}null===(t=re.current)||void 0===t||t.setPointersPositions(e);let s=null===(n=re.current)||void 0===n?void 0:n.getPointerPosition();s?(s.x-=null!==(o=null===(i=re.current)||void 0===i?void 0:i.x())&&void 0!==o?o:0,s.y-=null!==(l=null===(r=re.current)||void 0===r?void 0:r.y())&&void 0!==l?l:0):s={x:Se.x2,y:Se.y2},Se.x2=s.x,Se.y2=s.y}),n=s(()=>{if(!Se.visible){return}if(!re.current){return}const t=re.current.findOne(".selection"),n=t?t.getClientRect({skipStroke:!0}):{width:0,height:0,x:0,y:0};if(n.width&&n.height){const t=[];re.current.find(".element").forEach(i=>{const o=i.getClientRect(),r=e.getElementById(i.id()),l=null==r?void 0:r.draggable,s=null==r?void 0:r.selectable;X.Util.haveIntersection(n,o)&&l&&s&&t.push(r.top.id)});const i=[...new Set(t)];ke.current=!0,e.selectElements(i)}Se.visible=!1});return window.addEventListener("mousemove",t),window.addEventListener("touchmove",t),window.addEventListener("mouseup",n,{capture:!0}),window.addEventListener("touchend",n,{capture:!0}),()=>{window.removeEventListener("mousemove",t),window.removeEventListener("touchmove",t),window.removeEventListener("mouseup",n),window.removeEventListener("touchend",n)}},[]);const Ie=o.useCallback(t=>{if(!e.selectedElements[0]){return}if(t&&e.selectedElementsIds.includes(t)){return}const n=D(e.selectedShapes),o=t?e.getElementById(t):{x:0,y:0,width:i.computedWidth,height:i.computedHeight,rotation:0},r=j(o),l=[];n.minX>r.maxX&&l.push({distance:n.minX-r.maxX,box1:n,box2:r,points:[{x:n.minX,y:n.minY+n.height/2},{x:r.maxX,y:n.minY+n.height/2},{x:r.maxX,y:r.minY+r.height/2}]}),n.maxX<r.minX&&l.push({distance:r.minX-n.maxX,box1:n,box2:r,points:[{x:n.maxX,y:n.minY+n.height/2},{x:r.minX,y:n.minY+n.height/2},{x:r.minX,y:r.minY+r.height/2}]}),n.minY>r.maxY&&l.push({box1:n,box2:r,distance:n.minY-r.maxY,points:[{x:n.minX+n.width/2,y:n.minY},{x:n.minX+n.width/2,y:r.maxY},{x:r.minX+r.width/2,y:r.maxY}]}),n.maxY<r.minY&&l.push({box1:n,box2:r,distance:r.minY-n.maxY,points:[{x:n.minX+n.width/2,y:n.maxY},{x:n.minX+n.width/2,y:r.minY},{x:r.minX+r.width/2,y:r.minY}]});const s=n.minX>=r.minX&&n.maxX<=r.maxX&&n.minY>=r.minY&&n.maxY<=r.maxY;if(s&&(l.push({distance:n.minX-r.minX,box1:n,box2:r,points:[{x:n.minX,y:n.minY+n.height/2},{x:r.minX,y:n.minY+n.height/2},{x:r.minX,y:r.minY+r.height/2}]}),l.push({distance:r.maxX-n.maxX,box1:n,box2:r,points:[{x:n.maxX,y:n.minY+n.height/2},{x:r.maxX,y:n.minY+n.height/2},{x:r.maxX,y:r.minY+r.height/2}]}),l.push({box1:n,box2:r,distance:n.minY-r.minY,points:[{x:n.minX+n.width/2,y:n.minY},{x:n.minX+n.width/2,y:r.minY},{x:r.minX+r.width/2,y:r.minY}]}),l.push({box1:n,box2:r,distance:r.maxY-n.maxY,points:[{x:n.minX+n.width/2,y:n.maxY},{x:n.minX+n.width/2,y:r.maxY},{x:r.minX+r.width/2,y:r.maxY}]})),0===l.length&&!s){const e=n.minX<r.maxX&&n.maxX>r.minX,t=n.minY<r.maxY&&n.maxY>r.minY;if(e&&t){const e=(Math.max(n.minY,r.minY)+Math.min(n.maxY,r.maxY))/2,t=(Math.max(n.minX,r.minX)+Math.min(n.maxX,r.maxX))/2;n.minX<r.minX?l.push({distance:r.minX-n.minX,box1:n,box2:r,points:[{x:n.minX,y:e},{x:r.minX,y:e},{x:r.minX,y:e}]}):l.push({distance:n.minX-r.minX,box1:n,box2:r,points:[{x:n.minX,y:e},{x:r.minX,y:e},{x:r.minX,y:e}]}),n.maxX>r.maxX?l.push({distance:n.maxX-r.maxX,box1:n,box2:r,points:[{x:r.maxX,y:e},{x:n.maxX,y:e},{x:r.maxX,y:e}]}):l.push({distance:r.maxX-n.maxX,box1:n,box2:r,points:[{x:n.maxX,y:e},{x:r.maxX,y:e},{x:r.maxX,y:e}]}),n.minY<r.minY?l.push({box1:n,box2:r,distance:r.minY-n.minY,points:[{x:t,y:n.minY},{x:t,y:r.minY},{x:t,y:r.minY}]}):l.push({box1:n,box2:r,distance:n.minY-r.minY,points:[{x:t,y:n.minY},{x:t,y:r.minY},{x:t,y:r.minY}]}),n.maxY>r.maxY?l.push({box1:n,box2:r,distance:n.maxY-r.maxY,points:[{x:t,y:r.maxY},{x:t,y:n.maxY},{x:t,y:r.maxY}]}):l.push({box1:n,box2:r,distance:r.maxY-n.maxY,points:[{x:t,y:n.maxY},{x:t,y:r.maxY},{x:t,y:r.maxY}]})}}JSON.stringify(ce)!==JSON.stringify(l)&&me(l)},[e,i]);o.useEffect(()=>{e.selectedElements[0]&&e.distanceGuidesVisible?Ie():ce&&me(null)},[e.distanceGuidesVisible,Ie,e.selectedShapes.map(e=>`${e.x},${e.y},${e.width},${e.height},${e.rotation}`).join("|")]);const Me=o.useRef(!1);o.useEffect(()=>{var e;let t;const n=null===(e=le.current)||void 0===e?void 0:e.closest(".polotno-workspace-inner"),i=()=>{Me.current=!0,clearTimeout(t),t=setTimeout(()=>{Me.current=!1},300)};return null==n||n.addEventListener("scroll",i),()=>{clearTimeout(t),null==n||n.removeEventListener("scroll",i)}},[]),o.useEffect(()=>{const e=re.current;if(!e){return}const t=e.container(),n=e=>{var t,n;e.touches.length>=2&&((null===(t=ne.current)||void 0===t?void 0:t.isDragging())&&ne.current.stopDrag(),null===(n=ne.current)||void 0===n||n.nodes().forEach(e=>{e.isDragging()&&e.stopDrag()}))};return t.addEventListener("touchstart",n,{passive:!0}),t.addEventListener("touchmove",n,{passive:!0}),()=>{t.removeEventListener("touchstart",n),t.removeEventListener("touchmove",n)}},[]);const Oe=t=>{if(e.role===w.VIEWER){return}if(e.activePage!==i&&i.select(),Me.current){return}if(ke.current){return}const n=t.evt.shiftKey,o=t.evt.ctrlKey||t.evt.metaKey,r=n||o,l=t.target.findAncestor(".elements-container"),s=t.target.findAncestor(".page-abs-container"),a=t.target.findAncestor("Transformer"),d=t.target.findAncestor(".page-container",!0);if(!(r||l||a||s||d||Se.visible)){return e.selectElements([]),void e.selectPages([])}if(o&&!n){const t=re.current,n=null==t?void 0:t.getPointerPosition();if(!t||!n){return}const i=t.getAllIntersections(n),o=new Set,r=[];for(const s of[...i].reverse()){const t=s.findAncestor(".element",!0);if(!t){continue}const n=e.getElementById(t.id()),i=null==n?void 0:n.top;i&&(o.has(i.id)||(o.add(i.id),r.push(i.id)))}if(0===r.length){return}let l;if(1===e.selectedElementsIds.length){const t=e.selectedElementsIds[0],n=r.indexOf(t);l=-1===n?r[0]:r[(n+1)%r.length]}else{l=r[0]}return e.selectElements([l]),void e.selectPages([])}const c=t.target.findAncestor(".element-container",!0),m=(null==c?void 0:c.findOne(".element"))||t.target.findAncestor(".element",!0),u=e.getElementById(null==m?void 0:m.id()),h=null==u?void 0:u.top;let g;if("group"===Y){g=null==h?void 0:h.id}else if(h){const t=e.selectedElements.some(e=>{var t;return(null===(t=e.top)||void 0===t?void 0:t.id)===h.id});g=t?null==u?void 0:u.id:null==h?void 0:h.id}else{g=void 0}const x=null==u?void 0:u.id;if(x&&e.selectedElementsIds.indexOf(x)>=0&&!n){return}const p=!!g&&e.selectedElementsIds.indexOf(g)>=0,f=t.target.findAncestor(".page-container",!0);if(g&&n&&!p){const t=e.selectedElementsIds.concat([g]),n=new Set(t),i=t.filter(t=>{const i=e.getElementById(t);if(!i){return!1}for(let e=i.parent;e;e=null==e?void 0:e.parent){if(n.has(e.id)){return!1}}return!0});e.selectElements(i),e.selectPages([])}else{g&&n&&p?e.selectElements(e.selectedElementsIds.filter(e=>e!==g)):!g||n||p?g&&!n&&p||(f?(n||e.selectElements([]),e.selectPages([i.id])):e.selectPages([])):(e.selectElements([g]),e.selectPages([]))}};A(ne,e);const Pe=e.activePage===i,Re=e._selectedPagesIds.includes(i.id),je=null==v?void 0:v.PageControls,De=null==v?void 0:v.Tooltip,Ce=null==v?void 0:v.ContextMenu,Be=1/e.scale,Te=0/e.scale;return n("div",{ref:le,onDragOver:e=>e.preventDefault(),onDrop:t=>{if(t.preventDefault(),e.role===w.VIEWER){return}if(!re.current){return}re.current.setPointersPositions(t);const n=re.current.findOne(".elements-container"),o=null==n?void 0:n.getRelativePointerPosition(),r=re.current.getPointerPosition(),l=re.current.getAllIntersections(r).map(e=>e.findAncestor(".element",!0)).filter(Boolean),s=[...new Set(l.reverse())].map(t=>e.getElementById(t.id())).filter(e=>!!e),a=s[0];ee&&o&&(ee(o,a,{elements:s,page:i}),ee=null)},style:{position:"relative",width:r+"px",height:a+"px",overflow:"hidden",flexShrink:0},className:"polotno-page-container"+(Pe?" active-page":""),children:[t(x,{ref:re,width:Math.min(r,I.width+200),height:Math.min(I.height+200,a),onClick:Oe,onTap:Oe,onContextMenu:t=>{var n,i,o;if(t.evt.preventDefault(),e.role===w.VIEWER){return}const r=t.target.findAncestor(".element",!0),l=e.getElementById(null==r?void 0:r.id()),s=null==l?void 0:l.top,a=null==s?void 0:s.id;if(!a){return e.selectElements([]),void pe.close()}e.selectedElementsIds.indexOf(a)>=0||e.selectElements([a]);const d=null===(n=re.current)||void 0===n?void 0:n.findOne(".page-abs-container"),c=null==d?void 0:d.getRelativePointerPosition();pe.open({x:null!==(i=null==c?void 0:c.x)&&void 0!==i?i:0,y:null!==(o=null==c?void 0:c.y)&&void 0!==o?o:0})},onMouseDown:Ae,onMouseMove:t=>{if(!e.distanceGuidesVisible&&!t.evt.altKey){return void(ce&&me(null))}const n=t.target.findAncestor(".element",!0),i=null==n?void 0:n.id();Ie(i)},onDragStart:t=>{var n;const i=t.target.getStage();if(i&&i.getPointersPositions().length>=2){return void t.target.stopDrag()}const o=t.target.findAncestor(".element",!0);if(o){const i=e.getElementById(null==o?void 0:o.id()),r=null==i?void 0:i.top,l=null==r?void 0:r.id;if(!(i&&e.selectedElementsIds.indexOf(i.id)>=0||l&&e.selectedElementsIds.indexOf(l)>=0)&&l){e.selectElements([l]);const i=we();t.target.stopDrag(),i.forEach(e=>{e.isDragging()||e.startDrag(t)}),null===(n=ne.current)||void 0===n||n.startDrag(t),k()}}ce&&me(null)},pageId:i.id,style:{position:"absolute",overflow:"hidden",top:0,left:0},children:n(u,{children:[t(_,{width:r,height:a,fill:G.workspaceBackgroundColor}),t(d,{x:$,y:te,scaleX:e.scale,scaleY:e.scale,name:"page-container",children:n(d,{name:"page-container-2",children:[t(d,{name:"page-background-group",x:U,y:U,children:t(N,{x:-i.bleed,y:-i.bleed,width:i.computedWidth+2*i.bleed,height:i.computedHeight+2*i.bleed,background:i.background,transparencyBackgroundColor:G.transparencyBackgroundColor,name:"page-background",preventDefault:!1,scale:e.scale})}),n(d,{x:U,y:U,name:"elements-container",listening:!e.isPlaying&&e.role!==w.VIEWER,children:[t(g,{name:"elements-area",width:i.computedWidth,height:i.computedHeight,listening:!1}),t(q,{elements:i.children,store:e})]}),t(g,{stroke:G.bleedColor,name:"bleed",strokeWidth:i.bleed,x:i.bleed/2,y:i.bleed/2,width:i.computedWidth+i.bleed,height:i.computedHeight+i.bleed,listening:!1,visible:i.bleed>0&&e.bleedVisible,hideInExport:!0}),O()===ie&&t(oe,{name:"hit-detection",x:-Be/2-Te,y:-Be/2-Te,width:H+Be+2*Te,height:J+Be+2*Te})]})}),t(h,{name:"workspace-background",points:[0,0,r,0,r,a,0,a,0,0,$,te,$,a-te,r-$,a-te,r-$,te,$,te],listening:!1,closed:!0,fill:G.workspaceBackgroundColor}),t(d,{x:$,y:te,scaleX:e.scale,scaleY:e.scale,children:t(g,{name:"page-highlight",hideInExport:!0,x:-Be/2-Te,y:-Be/2-Te,width:H+Be+2*Te,height:J+Be+2*Te,stroke:Re?G.activePageBorderColor:G.pageBorderColor,strokeWidth:2,listening:!1,strokeScaleEnabled:!1})}),n(d,{x:$+U*e.scale,y:te+U*e.scale,scaleX:e.scale,scaleY:e.scale,name:"page-abs-container",children:[t(b,{ref:ne,rotateAnchorAngle:ge,onDragStart:t=>{var n;const o=t.target.getStage();o&&o.getPointersPositions().length>=2?t.target.stopDrag():((null===(n=t.evt)||void 0===n?void 0:n.altKey)&&y&&e.selectedElements.forEach(e=>{const t=e.clone({},{skipSelect:!0}),n=i.children.indexOf(e);i.setElementZIndex(t.id,n)}),de.current=!0,e.history.startTransaction())},onDragEnd:()=>{de.current&&(e.history.endTransaction(),de.current=!1),Ye()},onTransformStart:()=>{e.history.startTransaction(),me(null)},boundBoxFunc:(t,n)=>{var i;const o=Math.abs(n.width)<1||Math.abs(n.height)<1,r=Math.abs(t.width)<1||Math.abs(t.height)<1;if(o&&!r){return t}const l=e.selectedElements;if(1===l.length&&"table"===(null===(i=l[0])||void 0===i?void 0:i.type)){const e=l[0],i=Math.abs(t.width),o=Math.abs(t.height);if(i>0&&o>0){const r=Math.abs(n.width)/i,l=Math.abs(n.height)/o,s=e.width*r,a=e.height*l,d=Object.assign({},n);return s<e.minWidth&&(d.width=t.width,d.x=t.x),a<e.minHeight&&(d.height=t.height,d.y=t.y),d}}return n},onTransform:e=>{const t=ne.current.nodes(),n=t[t.length-1];e.target===n&&setTimeout(()=>{Xe()},0)},onTransformEnd:t=>{he({}),e.history.endTransaction(),Ye()},visible:!e.isPlaying}),ce&&ce.map(({points:i,distance:o,box1:r,box2:l},s)=>n(d,{name:"distances-container",hideInExport:!0,listening:!1,children:[t(g,Object.assign({},r,{stroke:G.distanceGuideStyle.stroke,strokeWidth:1,strokeScaleEnabled:!1})),t(g,Object.assign({},l,{stroke:G.distanceGuideStyle.stroke,strokeWidth:1,strokeScaleEnabled:!1})),t(h,{points:[i[0].x,i[0].y,i[1].x,i[1].y],stroke:G.distanceGuideStyle.stroke,strokeWidth:1,strokeScaleEnabled:!1}),t(h,{points:[i[1].x,i[1].y,i[2].x,i[2].y],stroke:G.distanceGuideStyle.stroke,strokeWidth:1,strokeScaleEnabled:!1}),n(m,{x:(i[0].x+i[1].x)/2,y:(i[0].y+i[1].y)/2,offsetY:-10,scaleX:1/e.scale,scaleY:1/e.scale,children:[t(p,{cornerRadius:5,fill:G.distanceGuideStyle.labelFill,pointerDirection:"down"}),t(f,{align:"center",verticalAlign:"middle",fill:G.distanceGuideStyle.labelTextFill,padding:5,text:B({unit:e.unit,dpi:e.dpi,px:o})})]})]},s)),i._rendering&&n(d,{children:[t(g,{width:H,height:J,fill:"rgba(255,255,255,0.9)"}),t(f,{text:"Rendering...",fontSize:60,width:H,height:J,align:"center",verticalAlign:"middle"})]}),De&&t(De,{components:v,store:e,page:i,stageRef:re,tooltipSafeArea:C}),Ce&&t(L,{children:t(Ce,Object.assign({components:v,store:e},pe.props))})]}),t(S,{store:e,page:i,width:r,height:a,scale:e.scale,xPadding:$,yPadding:te,bleed:U}),t(Q,Object.assign({},ue,{store:e})),t(K,{selection:Se}),P()>0&&n(d,{hideInExport:!0,children:[t(ae,{name:"cache-bounds",x:r-(1===P()?250:210),y:a-(1===P()?95:45)}),t(ae,{name:"cache-bounds-t",x:10,y:10})]}),R()&&t(f,{text:"Powered by polotno.com",fontSize:14,fill:"rgba(0,0,0,0.6)",x:r-170,y:a-18,onMouseEnter:e=>{e.target.getStage().container().style.cursor="pointer"},onMouseLeave:e=>{e.target.getStage().container().style.cursor=""},onTouchStart:e=>{e.cancelBubble=!0},onMouseDown:e=>{e.cancelBubble=!0},onClick:()=>{window.open("https://polotno.com","_blank","noopener")},onTap:()=>{window.open("https://polotno.com","_blank","noopener")}}),t(d,{name:"line-guides"})]})}),se&&je&&t(je,{store:e,page:i,xPadding:$,yPadding:te,layout:M})]})});

package/canvas/rich-editor.js

@@ -1,4 +1,4 @@
-import{jsx as t}from"react/jsx-runtime";import e from"react";import o from"quill";import*as n from"mobx";import{reaction as i}from"mobx";import{isAlive as r}from"mobx-state-tree";import l from"konva";import{getQuillEditorHtml as a,getDir as s}from"../utils/text-html.js";import{normalizeRichTextHtml as c,isQuillFormatMixed as d}from"../utils/rich-text-html.js";import{resetStyleContent as u}from"../utils/reset-style.js";import{removeTags as f}from"../utils/text.js";import{isGradient as p,parseColor as m}from"../utils/gradient.js";import{getOptimalCaretColor as g}from"./text-element/caret-color.js";import{registerQuillUnrestrictedFontFormats as h}from"./quill-font-formats.js";import{ALL_QUILL_MIXED_KEYS as v,setActiveTextEditor as x,updateActiveTextFormat as b,clearActiveTextEditor as S}from"../utils/text-format-state.js";import y from"../utils/styled.js";export function applyOpacityToColor(t,e){if(1===e){return t}const o=l.Util.colorToRGBA(t);return o?`rgba(${o.r}, ${o.g}, ${o.b}, ${o.a*e})`:t}export const quillRef=n.observable({enabled:!1,currentFormat:{},lastSelection:null,pendingToolbarInteraction:!1,editor:n.observable.object({instance:null},{},{deep:!1})});const w=v;export function syncQuillFormatState(t,e){const o=e?t.getFormat(e):{},i=function(t,e){const o={};if(!e||e.length<=0){return o}const n=t.getContents(e.index,e.length);for(const i of w){d(n,i)&&(o[i]=!0)}return o}(t,e);n.runInAction(()=>{quillRef.currentFormat=o}),b(o,i,e)}const C="polotno-saved-selection";function E(){const t=window.getSelection();if(!t||0===t.rangeCount||t.isCollapsed){return}if("undefined"==typeof Highlight||!CSS.highlights){return}const e=t.getRangeAt(0).cloneRange();CSS.highlights.set(C,new Highlight(e)),q()}function T(){"undefined"!=typeof CSS&&CSS.highlights&&CSS.highlights.delete(C)}function q(t=20){setTimeout(()=>{"undefined"!=typeof CSS&&CSS.highlights&&CSS.highlights.has(C)&&(t>0&&(document.querySelector("[data-radix-popper-content-wrapper]")||k(document.activeElement))?q(t-1):T())},300)}if("undefined"!=typeof document&&"undefined"!=typeof CSS&&CSS.highlights&&!document.querySelector("[data-polotno-highlight]")){const F=document.createElement("style");F.setAttribute("data-polotno-highlight",""),F.textContent=`::highlight(${C}) { background-color: rgba(0, 100, 255, 0.3); }`,document.head.appendChild(F)}export const RichTextContainer=y("div",e.forwardRef)`
+import{jsx as e}from"react/jsx-runtime";import t from"react";import n from"quill";import*as o from"mobx";import{reaction as i}from"mobx";import{isAlive as r}from"mobx-state-tree";import l from"konva";import{getQuillEditorHtml as s,getDir as a}from"../utils/text-html.js";import{normalizeRichTextHtml as d,isQuillFormatMixed as c}from"../utils/rich-text-html.js";import{resetStyleContent as u}from"../utils/reset-style.js";import{removeTags as f}from"../utils/text.js";import{isGradient as p,parseColor as m}from"../utils/gradient.js";import{getOptimalCaretColor as h}from"./text-element/caret-color.js";import{registerQuillUnrestrictedFontFormats as g}from"./quill-font-formats.js";import{ALL_QUILL_MIXED_KEYS as b,setActiveTextEditor as v,updateActiveTextFormat as x,clearActiveTextEditor as y}from"../utils/text-format-state.js";import w from"../utils/styled.js";export function applyOpacityToColor(e,t){if(1===t){return e}const n=l.Util.colorToRGBA(e);return n?`rgba(${n.r}, ${n.g}, ${n.b}, ${n.a*t})`:e}export const quillRef=o.observable({enabled:!1,currentFormat:{},lastSelection:null,pendingToolbarInteraction:!1,editor:o.observable.object({instance:null},{},{deep:!1})});const S=b;export function syncQuillFormatState(e,t){const n=t?e.getFormat(t):{},i=function(e,t){const n={};if(!t||t.length<=0){return n}const o=e.getContents(t.index,t.length);for(const i of S){c(o,i)&&(n[i]=!0)}return n}(e,t);o.runInAction(()=>{quillRef.currentFormat=n}),x(n,i,t)}const q="polotno-saved-selection";function k(){const e=window.getSelection();if(!e||0===e.rangeCount||e.isCollapsed){return}if("undefined"==typeof Highlight||!CSS.highlights){return}const t=e.getRangeAt(0).cloneRange();CSS.highlights.set(q,new Highlight(t)),E()}function C(){"undefined"!=typeof CSS&&CSS.highlights&&CSS.highlights.delete(q)}function E(e=20){setTimeout(()=>{"undefined"!=typeof CSS&&CSS.highlights&&CSS.highlights.has(q)&&(e>0&&(document.querySelector("[data-radix-popper-content-wrapper]")||R(document.activeElement))?E(e-1):C())},300)}if("undefined"!=typeof document&&"undefined"!=typeof CSS&&CSS.highlights&&!document.querySelector("[data-polotno-highlight]")){const L=document.createElement("style");L.setAttribute("data-polotno-highlight",""),L.textContent=`::highlight(${q}) { background-color: rgba(0, 100, 255, 0.3); }`,document.head.appendChild(L)}export const RichTextContainer=w("div",t.forwardRef)`
   .ql-editor {
     outline: none;
     /* Element-level underline/strike — text-decoration doesn't inherit, so it is
@@ -10,6 +10,92 @@ import{jsx as t}from"react/jsx-runtime";import e from"react";import o from"quill
     opacity: 0;
   }
   ${u}
+
+  /* ===== Editor-only list markers (Quill flat-DOM hack) ======================
+     Quill emits a FLAT <ol> with per-item data-list + ql-indent classes (not
+     real nested <ul>/<ol>), so the browser's native markers can't render mixed
+     bullet/number items or nested numbering. The editor therefore disables
+     native markers and draws its own via ::before — but ONLY here, so it can't
+     leak into the export/canvas paths (which use native markers; see
+     reset-style.ts). These are tuned to match render-tag (the canvas
+     reference): marker sized at the item font, sitting just left of the text
+     inside the 2.1em indent. letter-spacing is intentionally NOT reset to
+     normal — numbered markers track it, like render-tag/native/Canva. */
+  .ql-editor ul,
+  .ql-editor ol {
+    list-style: none;
+    /* Editor box model is the inverse of the shared reset: the indent lives on
+       the <li> (not the list) so the absolutely-positioned ::before marker
+       below has room in the li's start-padding. (The export/canvas path puts
+       the indent on the list for native outside markers — see reset-style.ts.) */
+    padding-inline-start: 0;
+  }
+  .ql-editor .ql-ui {
+    display: none;
+  }
+  /* Per-LEVEL ordered counters (list-0..list-3), so a nested ordered list
+     restarts at 1 — matching canonical HTML and the canvas. Quill's flat DOM
+     expresses depth via ql-indent-N, so each ordered item increments its
+     level's counter and RESETS all deeper levels (counter-reset applies before
+     counter-increment on the same element). A single global counter would make
+     a nested "deep" item continue the outer numbering (e.g. show 3 instead of
+     1). All levels use decimal to match render-tag (which doesn't cycle
+     styles). Custom counter names avoid Safari's list-item counter bug. */
+  .ql-editor ol {
+    counter-reset: list-0 list-1 list-2 list-3;
+  }
+  .ql-editor li {
+    position: relative; /* anchor for the absolutely-positioned ::before */
+    padding-inline-start: 2.1em; /* marker space + per-level indent (start side) */
+  }
+  .ql-editor li[data-list='ordered'] {
+    counter-increment: list-0;
+    counter-reset: list-1 list-2 list-3;
+  }
+  .ql-editor li.ql-indent-1[data-list='ordered'] {
+    counter-increment: list-1;
+    counter-reset: list-2 list-3;
+  }
+  .ql-editor li.ql-indent-2[data-list='ordered'] {
+    counter-increment: list-2;
+    counter-reset: list-3;
+  }
+  .ql-editor li.ql-indent-3[data-list='ordered'] {
+    counter-increment: list-3;
+  }
+  /* Marker box spans the 2.1em indent and right-aligns the marker against the
+     text with a gap, so the marker's right edge ≈ render-tag's
+     (contentStart − gap). line-height is inherited so the marker sits on the
+     item's first-line baseline (matches render-tag's number baseline; bullets
+     are close). */
+  .ql-editor li::before {
+    position: absolute;
+    inset-inline-start: 0;
+    top: 0;
+    box-sizing: border-box;
+    width: 2.1em;
+    text-align: end;
+    font-weight: normal;
+    font-style: normal;
+  }
+  .ql-editor li[data-list='ordered']::before {
+    content: counter(list-0) '.';
+    padding-inline-end: 0.32em; /* ≈ render-tag's space-width gap for numbers */
+  }
+  .ql-editor li.ql-indent-1[data-list='ordered']::before {
+    content: counter(list-1) '.';
+  }
+  .ql-editor li.ql-indent-2[data-list='ordered']::before {
+    content: counter(list-2) '.';
+  }
+  .ql-editor li.ql-indent-3[data-list='ordered']::before {
+    content: counter(list-3) '.';
+  }
+  .ql-editor li[data-list='bullet']::before {
+    content: '•';
+    padding-inline-end: 0.5em; /* ≈ render-tag's wider bullet gap (7px + ascent/3) */
+  }
+
   strong {
     font-weight: 700;
   }
@@ -30,4 +116,4 @@ import{jsx as t}from"react/jsx-runtime";import e from"react";import o from"quill
     -webkit-text-fill-color: transparent;
     color: transparent;
   }
-`;let R=["background","bold","color","font","italic","size","strike","underline","indent","list","direction"];export const setQuillFormats=t=>{R=t};export const createQuill=t=>(h(),new o(t,{toolbar:!1,keyboard:!1,clipboard:{matchVisual:!1},formats:R}));export const setQuillContent=(t,e)=>{var o=t.clipboard.convert({html:"<div class='ql-editor' style='outline: none;'>"+e+"<p><br></p></div>",text:""});t.setContents(o),t.history.clear()};export const RichEditor=({onBlur:l,onChange:d,element:u,clickCoords:v})=>{var b,y,w;const C=e.useRef(null),q=e.useRef(!1);e.useLayoutEffect(()=>{let t,e=!1,i=null,s=null,f=null,p=null,m=null;const g=()=>{if(!e&&C.current){try{g=C.current,h(),t=new o(g,{toolbar:!1,keyboard:!1,clipboard:{matchVisual:!1},formats:R}),n.runInAction(()=>{quillRef.editor.instance=t}),quillRef.pendingToolbarInteraction=!1,window.__polotnoQuill=t,x({instance:t,store:u.store,element:u}),t.on("text-change",()=>{const e=t.getSelection();e&&(syncQuillFormatState(t,e),n.runInAction(()=>{quillRef.lastSelection={index:e.index,length:e.length}})),setTimeout(()=>{var e;const o=t.root;if(!o||!o.isConnected){return}if(!r(u)){return}const n=o.innerHTML;q.current=!0,d(c(function(t){const e=(t||"").trim();if("<p><br></p>"===e||"<p></p>"===e){return""}if(e.startsWith("<p>")&&e.endsWith("</p>")){const t=e.slice(3,-4);if(!/(<\/?(p|div|h[1-6]|ul|ol|li|table|thead|tbody|tr|td|blockquote)\b)/i.test(t)){return t}}return t}(n),{fontSize:u.fontSize,fontFamily:u.fontFamily}));const i=t.getContents(),l=u.fill;let a=null,s=!0;for(const t of i.ops){if("string"!=typeof t.insert||"\n"===t.insert){continue}const o=(null===(e=t.attributes)||void 0===e?void 0:e.color)||l;if(null===a){a=o}else if(o!==a){s=!1;break}}s&&a&&u.set({fill:a})},10)});const e=a(u,u.fontFamily);setQuillContent(t,e),q.current=!0;const b=C.current.closest(".polotno-workspace-inner"),S=null==b?void 0:b.scrollLeft,y=null==b?void 0:b.scrollTop;v?setCursorFromCoords(t,v):t.setSelection(0,0,"api"),b&&void 0!==S&&void 0!==y&&(b.scrollLeft=S,b.scrollTop=y),t.on("selection-change",(e,o,i)=>{e&&(syncQuillFormatState(t,e),n.runInAction(()=>{quillRef.lastSelection={index:e.index,length:e.length}}))});const w=t.root;p=t=>{const e=t.relatedTarget;(null==e?void 0:e.classList.contains("ql-clipboard"))||(k(e)||quillRef.pendingToolbarInteraction?E():setTimeout(()=>{quillRef.pendingToolbarInteraction||k(document.activeElement)?E():(T(),l())},0))},m=()=>{T()},w.addEventListener("blur",p),w.addEventListener("focus",m),i=w,s=e=>{var o,n;const i=t.getSelection();if(!i||0===i.length){return}const r=t.getText(i.index,i.length).replace(/\n$/,""),l=window.getSelection();let a="";if(l&&l.rangeCount>0){const t=l.getRangeAt(0);let e=t.cloneContents(),o=t.startContainer;o&&o.nodeType===Node.TEXT_NODE&&(o=o.parentNode);let n=t.endContainer;if(n&&n.nodeType===Node.TEXT_NODE&&(n=n.parentNode),o&&o===n){let t=o;for(;t&&t!==w&&t.nodeType===Node.ELEMENT_NODE;){const o=t.tagName;if("SPAN"!==o&&"EM"!==o&&"STRONG"!==o&&"U"!==o&&"S"!==o&&"A"!==o){break}const n=t.cloneNode(!1);n.appendChild(e),e=n,t=t.parentNode}}const i=document.createElement("div");i.appendChild(e),a=i.innerHTML}if(null===(o=e.clipboardData)||void 0===o||o.setData("text/plain",r),a){const t='<!DOCTYPE html><html><head><meta charset="utf-8"></head><body>\x3c!--StartFragment--\x3e<div style="white-space: pre-wrap; overflow-wrap: break-word;">'+a+"</div>\x3c!--EndFragment--\x3e</body></html>";null===(n=e.clipboardData)||void 0===n||n.setData("text/html",t)}e.preventDefault()},f=e=>{s&&s(e);const o=t.getSelection();o&&o.length>0&&t.deleteText(o.index,o.length)},i.addEventListener("copy",s),i.addEventListener("cut",f)}catch(b){console.error("RichEditor init failed:",b)}}var g};return C.current?g():queueMicrotask(g),()=>{e=!0,i&&p&&i.removeEventListener("blur",p),i&&m&&i.removeEventListener("focus",m),T(),i&&s&&f&&(i.removeEventListener("copy",s),i.removeEventListener("cut",f)),n.runInAction(()=>{quillRef.editor.instance=null,quillRef.currentFormat={},quillRef.lastSelection=null}),S(t),delete window.__polotnoQuill}},[]),e.useEffect(()=>i(()=>r(u)?`${u.text}\0${u.fontSize}\0${u.fontFamily}`:"",()=>{if(!r(u)){return}const t=quillRef.editor.instance;if(!t){return}if(q.current){return void(q.current=!1)}const e=t.getSelection();setQuillContent(t,a(u,u.fontFamily)),q.current=!0,e&&(t.setSelection(e.index,e.length),syncQuillFormatState(t,t.getSelection()))},{fireImmediately:!0}),[]),e.useEffect(()=>{window.addEventListener("blur",l);const t=t=>{var e;(null===(e=C.current)||void 0===e?void 0:e.contains(t.target))||k(t.target)||quillRef.pendingToolbarInteraction||(T(),l())};return window.addEventListener("mousedown",t),window.addEventListener("touchstart",t),()=>{window.removeEventListener("blur",l),window.removeEventListener("mousedown",t),window.removeEventListener("touchstart",t)}},[]);const F={color:u.fill};u.fill.indexOf("gradient")>=0&&(F["--polotno-gradient"]=u.fill,F.color="transparent");const L=p(u.fill)?null!==(y=null===(b=m(u.fill).stops[0])||void 0===b?void 0:b.color)&&void 0!==y?y:"#000000":g(u);return t(RichTextContainer,{ref:C,style:Object.assign(Object.assign({},F),{fontSize:u.fontSize,fontFamily:u.fontFamily,fontWeight:u.fontWeight,fontStyle:u.fontStyle,"--polotno-text-decoration":u.textDecoration||"none",textTransform:u.textTransform,width:u.a.width,lineHeight:u.lineHeight,letterSpacing:u.letterSpacing*u.fontSize+"px",textAlign:u.align,opacity:Math.max(u.a.opacity,.2),textShadow:u.shadowEnabled?`${u.shadowOffsetX}px ${u.shadowOffsetY}px ${u.shadowBlur}px ${applyOpacityToColor(u.shadowColor,null!==(w=u.shadowOpacity)&&void 0!==w?w:1)}`:void 0,caretColor:L}),dir:s(f(u.text))})};function k(t){return!(!t||!t.closest(".sketch-picker")&&!t.closest("[data-polotno-keep-focus]")&&!t.closest("[data-radix-popper-content-wrapper]")&&!t.closest(".polotno-toolbar"))}export function setCursorFromCoords(t,e){if(!t||!e){return}const{x:n,y:i}=e;try{let e=null;if(document.caretRangeFromPoint){e=document.caretRangeFromPoint(n,i)}else if(document.caretPositionFromPoint){const t=document.caretPositionFromPoint(n,i);t&&(e=document.createRange(),e.setStart(t.offsetNode,t.offset))}if(e){const n=o.find(e.startContainer,!0);if(n){const o=n.offset(t.scroll)+e.startOffset;return void t.setSelection(o,0,"api")}}}catch(r){}t.setSelection(0,0,"api")}
+`;let T=["background","bold","color","font","italic","size","strike","underline","indent","list","direction"];export const setQuillFormats=e=>{T=e};export const createQuill=e=>(g(),new n(e,{toolbar:!1,keyboard:!1,clipboard:{matchVisual:!1},formats:T}));export const setQuillContent=(e,t)=>{var n=e.clipboard.convert({html:"<div class='ql-editor' style='outline: none;'>"+t+"<p><br></p></div>",text:""});e.setContents(n),e.history.clear()};export const RichEditor=({onBlur:l,onChange:c,element:u,clickCoords:b})=>{var x,w,S;const q=t.useRef(null),E=t.useRef(!1);t.useLayoutEffect(()=>{let e,t=!1,i=null,a=null,f=null,p=null,m=null;const h=()=>{if(!t&&q.current){try{h=q.current,g(),e=new n(h,{toolbar:!1,keyboard:!1,clipboard:{matchVisual:!1},formats:T}),o.runInAction(()=>{quillRef.editor.instance=e}),quillRef.pendingToolbarInteraction=!1,window.__polotnoQuill=e,v({instance:e,store:u.store,element:u}),e.on("text-change",()=>{const t=e.getSelection();t&&(syncQuillFormatState(e,t),o.runInAction(()=>{quillRef.lastSelection={index:t.index,length:t.length}})),setTimeout(()=>{var t;const n=e.root;if(!n||!n.isConnected){return}if(!r(u)){return}const o=n.innerHTML;E.current=!0,c(d(function(e){const t=(e||"").trim();if("<p><br></p>"===t||"<p></p>"===t){return""}if(t.startsWith("<p>")&&t.endsWith("</p>")){const e=t.slice(3,-4);if(!/(<\/?(p|div|h[1-6]|ul|ol|li|table|thead|tbody|tr|td|blockquote)\b)/i.test(e)){return e}}return e}(o),{fontSize:u.fontSize,fontFamily:u.fontFamily}));const i=e.getContents(),l=u.fill;let s=null,a=!0;for(const e of i.ops){if("string"!=typeof e.insert||"\n"===e.insert){continue}const n=(null===(t=e.attributes)||void 0===t?void 0:t.color)||l;if(null===s){s=n}else if(n!==s){a=!1;break}}a&&s&&u.set({fill:s})},10)});const t=s(u,u.fontFamily);setQuillContent(e,t),E.current=!0;const x=q.current.closest(".polotno-workspace-inner"),y=null==x?void 0:x.scrollLeft,w=null==x?void 0:x.scrollTop;b?setCursorFromCoords(e,b):e.setSelection(0,0,"api"),x&&void 0!==y&&void 0!==w&&(x.scrollLeft=y,x.scrollTop=w),e.on("selection-change",(t,n,i)=>{t&&(syncQuillFormatState(e,t),o.runInAction(()=>{quillRef.lastSelection={index:t.index,length:t.length}}))});const S=e.root;p=e=>{const t=e.relatedTarget;(null==t?void 0:t.classList.contains("ql-clipboard"))||(R(t)||quillRef.pendingToolbarInteraction?k():setTimeout(()=>{quillRef.pendingToolbarInteraction||R(document.activeElement)?k():(C(),l())},0))},m=()=>{C()},S.addEventListener("blur",p),S.addEventListener("focus",m),i=S,a=t=>{var n,o;const i=e.getSelection();if(!i||0===i.length){return}const r=e.getText(i.index,i.length).replace(/\n$/,""),l=window.getSelection();let s="";if(l&&l.rangeCount>0){const e=l.getRangeAt(0);let t=e.cloneContents(),n=e.startContainer;n&&n.nodeType===Node.TEXT_NODE&&(n=n.parentNode);let o=e.endContainer;if(o&&o.nodeType===Node.TEXT_NODE&&(o=o.parentNode),n&&n===o){let e=n;for(;e&&e!==S&&e.nodeType===Node.ELEMENT_NODE;){const n=e.tagName;if("SPAN"!==n&&"EM"!==n&&"STRONG"!==n&&"U"!==n&&"S"!==n&&"A"!==n){break}const o=e.cloneNode(!1);o.appendChild(t),t=o,e=e.parentNode}}const i=document.createElement("div");i.appendChild(t),s=i.innerHTML}if(null===(n=t.clipboardData)||void 0===n||n.setData("text/plain",r),s){const e='<!DOCTYPE html><html><head><meta charset="utf-8"></head><body>\x3c!--StartFragment--\x3e<div style="white-space: pre-wrap; overflow-wrap: break-word;">'+s+"</div>\x3c!--EndFragment--\x3e</body></html>";null===(o=t.clipboardData)||void 0===o||o.setData("text/html",e)}t.preventDefault()},f=t=>{a&&a(t);const n=e.getSelection();n&&n.length>0&&e.deleteText(n.index,n.length)},i.addEventListener("copy",a),i.addEventListener("cut",f)}catch(x){console.error("RichEditor init failed:",x)}}var h};return q.current?h():queueMicrotask(h),()=>{t=!0,i&&p&&i.removeEventListener("blur",p),i&&m&&i.removeEventListener("focus",m),C(),i&&a&&f&&(i.removeEventListener("copy",a),i.removeEventListener("cut",f)),o.runInAction(()=>{quillRef.editor.instance=null,quillRef.currentFormat={},quillRef.lastSelection=null}),y(e),delete window.__polotnoQuill}},[]),t.useEffect(()=>i(()=>r(u)?`${u.text}\0${u.fontSize}\0${u.fontFamily}`:"",()=>{if(!r(u)){return}const e=quillRef.editor.instance;if(!e){return}if(E.current){return void(E.current=!1)}const t=e.getSelection();setQuillContent(e,s(u,u.fontFamily)),E.current=!0,t&&(e.setSelection(t.index,t.length),syncQuillFormatState(e,e.getSelection()))},{fireImmediately:!0}),[]),t.useEffect(()=>{window.addEventListener("blur",l);const e=e=>{var t;(null===(t=q.current)||void 0===t?void 0:t.contains(e.target))||R(e.target)||quillRef.pendingToolbarInteraction||(C(),l())};return window.addEventListener("mousedown",e),window.addEventListener("touchstart",e),()=>{window.removeEventListener("blur",l),window.removeEventListener("mousedown",e),window.removeEventListener("touchstart",e)}},[]);const L={color:u.fill};u.fill.indexOf("gradient")>=0&&(L["--polotno-gradient"]=u.fill,L.color="transparent");const F=p(u.fill)?null!==(w=null===(x=m(u.fill).stops[0])||void 0===x?void 0:x.color)&&void 0!==w?w:"#000000":h(u);return e(RichTextContainer,{ref:q,style:Object.assign(Object.assign({},L),{fontSize:u.fontSize,fontFamily:u.fontFamily,fontWeight:u.fontWeight,fontStyle:u.fontStyle,"--polotno-text-decoration":u.textDecoration||"none",textTransform:u.textTransform,width:u.a.width,lineHeight:u.lineHeight,letterSpacing:u.letterSpacing*u.fontSize+"px",textAlign:u.align,opacity:Math.max(u.a.opacity,.2),textShadow:u.shadowEnabled?`${u.shadowOffsetX}px ${u.shadowOffsetY}px ${u.shadowBlur}px ${applyOpacityToColor(u.shadowColor,null!==(S=u.shadowOpacity)&&void 0!==S?S:1)}`:void 0,caretColor:F}),dir:a(f(u.text))})};function R(e){return!(!e||!e.closest(".sketch-picker")&&!e.closest("[data-polotno-keep-focus]")&&!e.closest("[data-radix-popper-content-wrapper]")&&!e.closest(".polotno-toolbar"))}export function setCursorFromCoords(e,t){if(!e||!t){return}const{x:o,y:i}=t;try{let t=null;if(document.caretRangeFromPoint){t=document.caretRangeFromPoint(o,i)}else if(document.caretPositionFromPoint){const e=document.caretPositionFromPoint(o,i);e&&(t=document.createRange(),t.setStart(e.offsetNode,e.offset))}if(t){const o=n.find(t.startContainer,!0);if(o){const n=o.offset(e.scroll)+t.startOffset;return void e.setSelection(n,0,"api")}}}catch(r){}e.setSelection(0,0,"api")}

package/canvas/video-element.js

@@ -1 +1 @@
-import{jsx as e,jsxs as t,Fragment as r}from"react/jsx-runtime";import o from"react";import{observer as n}from"mobx-react-lite";import{autorun as i}from"mobx";import{Arc as a,Group as d,Image as h,Rect as s,Text as c,Transformer as l}from"react-konva";import{ROLES as u}from"../model/store.js";import g from"use-image";import f from"konva";import{Portal as m}from"react-konva-utils";import{useWorkspaceStyle as p}from"./workspace-style.js";import{incrementLoader as w,triggerLoadError as v}from"../utils/loader.js";import*as x from"../utils/svg.js";import{flags as M}from"../utils/flags.js";import{applyFilter as y}from"./apply-filters.js";import{useFadeIn as E}from"./use-fadein.js";import{isTouchDevice as b}from"../utils/screen.js";import{useMediabunnyVideo as L}from"./use-mediabunny-video.js";function T(){return document.createElement("canvas")}const C=new window.Image;C.src=x.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 R=new window.Image;R.src=x.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=(e,t,r,n,i=0,a=!1)=>{const d=Math.floor(Math.max(e.width*n,1)),h=Math.floor(Math.max(e.height*n,1)),s=Math.min(i*n,d/2,h/2),c=Math.max(e.width/r.width,e.height/r.height)*n,l=e.page._exportingOrRendering&&M.imageDownScalingEnabled&&c<1&&!a,u=t instanceof HTMLVideoElement?t.videoWidth:null==t?void 0:t.width,g=t instanceof HTMLVideoElement?t.videoHeight:null==t?void 0:t.height,m=0===r.x&&0===r.y&&r.width===u&&r.height===g,p=o.useMemo(()=>{if(t&&u&&g){return m&&0===s&&!l?void 0:T()}},[t,s,l,m,u,g]),w=()=>{if(!p||!t){return}p.width=d,p.height=h;const e=p.getContext("2d");if(!e){return}s&&(e.beginPath(),e.moveTo(s,0),e.lineTo(d-s,0),e.arc(d-s,s,s,3*Math.PI/2,0,!1),e.lineTo(d,h-s),e.arc(d-s,h-s,s,0,Math.PI/2,!1),e.lineTo(s,h),e.arc(s,h-s,s,Math.PI/2,Math.PI,!1),e.lineTo(0,s),e.arc(s,s,s,Math.PI,3*Math.PI/2,!1),e.clip());const o=l?function(e,t){var r,o;const n=T(),i=e instanceof HTMLVideoElement?e.videoWidth:e.width,a=e instanceof HTMLVideoElement?e.videoHeight:e.height;n.width=i,n.height=a,null===(r=n.getContext("2d"))||void 0===r||r.drawImage(e,0,0,n.width,n.height);const d=function(e,t,r,o,n,i,a){for(var d=new ImageData(t,r),h=new Int32Array(e.data.buffer),s=e.width,c=new Int32Array(d.data.buffer),l=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<l;v++){for(var x=0+Math.round(v/u)+(0+Math.round(w/g))*s,M=0,y=0,E=0,b=0,L=0;L<m;L++){for(var T=0;T<f;T++){var C=h[x+T+L*s];M+=C<<24>>>24,y+=C<<16>>>24,E+=C<<8>>>24,b+=C>>>24}}M=Math.round(M/p),y=Math.round(y/p),E=Math.round(E/p),b=Math.round(b/p),c[v+w*l]=b<<24|E<<16|y<<8|M}}return d}(n.getContext("2d").getImageData(0,0,n.width,n.height),Math.floor(n.width*t),Math.floor(n.height*t),0,0,n.width,n.height);return n.width=Math.floor(n.width*t),n.height=Math.floor(n.height*t),null===(o=n.getContext("2d"))||void 0===o||o.putImageData(d,0,0),n}(t,c):t,n=l?{x:Math.floor(r.x*c),y:Math.floor(r.y*c),width:Math.floor(r.width*c),height:Math.floor(r.height*c)}:r;e.drawImage(o,n.x,n.y,n.width,n.height,0,0,p.width,p.height)};return o.useLayoutEffect(()=>{w()},[p,e.width,e.height,r.x,r.y,r.width,r.height,i,n,a,e.page._exportingOrRendering,l]),o.useEffect(()=>()=>{p&&"CANVAS"===p.nodeName&&f.Util.releaseCanvas(p)},[p]),[p||t,w]};const S=T(),I=n(({element:r})=>{const n=Math.min(30,r.width/4,r.height/4),i=o.useRef(null);o.useEffect(()=>{const e=i.current;if(!e){return}const t=new f.Animation(t=>{e.rotate(((null==t?void 0:t.timeDiff)||0)/2)},e.getLayer());return t.start(),()=>{t.stop()}});const{mediaLoadingStyle:h}=p();return t(d,{x:r.a.x,y:r.a.y,rotation:r.a.rotation,listening:!1,opacity:r.a.opacity,hideInExport:!r.showInExport,children:[e(s,{width:r.width,height:r.height,fill:h.fill}),e(a,{ref:i,x:r.width/2,y:r.height/2,fill:h.textFill,outerRadius:Math.abs(n),innerRadius:Math.max(1,n-5),angle:270})]})}),k=n(({element:r})=>{const{mediaErrorStyle:o}=p(),n=Math.max(10,Math.min(30,r.width/25));return t(d,{x:r.a.x,y:r.a.y,rotation:r.a.rotation,listening:!1,opacity:r.a.opacity,hideInExport:!r.showInExport,children:[e(s,{width:r.width,height:r.height,fill:o.fill}),e(c,{text:"Can not load the video...",fontSize:n,width:r.width,height:r.height,align:"center",fill:o.textFill,verticalAlign:"middle",padding:5})]})});let H=function(e,t,r){const n=o.useRef("loading"),i=o.useRef(void 0),[a,d]=o.useState(0),h=o.useRef(),s=o.useRef(),c=o.useRef();return h.current===e&&s.current===t&&c.current===r||(n.current="loading",i.current=void 0,h.current=e,s.current=t,c.current=r),o.useLayoutEffect(function(){if(e){var o=document.createElement("video");return o.addEventListener("canplay",a),o.addEventListener("error",h),t&&(o.crossOrigin=t),r&&(o.referrerPolicy=r),o.src=e,o.load(),function(){o.removeEventListener("canplay",a),o.removeEventListener("error",h)}}function a(){n.current="loaded",i.current=o,i.current.currentTime=0,d(Math.random()),i.current.removeEventListener("canplay",a)}function h(e){var t;const r=4===o.readyState,a=o.buffered&&o.buffered.length>0&&o.buffered.end(o.buffered.length-1)/o.duration*100>=100;if(r&&a){return}const h=e.message||(null===(t=o.error)||void 0===t?void 0:t.message)||"Unknown error",s=new Error("Video failed to load: "+h);console.error(s),n.current="failed",i.current=void 0,d(Math.random())}},[e,t,r]),[i.current,n.current]};export const setVideoLoaderHook=e=>{H=e};function X(e){return e.readyState>=HTMLMediaElement.HAVE_CURRENT_DATA}export const useLoader=(e,t,r)=>{const n=o.useRef(),i=()=>{var e;null===(e=n.current)||void 0===e||e.call(n),n.current=void 0};o.useEffect(()=>i,[]),o.useLayoutEffect(()=>{const o=t.slice(0,200),a=`video with id ${r} url: ${o}`;"loading"!==e||n.current||(n.current=w(a)),"loading"!==e&&i(),"failed"===e&&v(a)},[e])};export const VideoElement=n(({element:n,store:a})=>{var c;const[p,v]=o.useState(!1),M=o.useRef(null),Y=o.useRef(null),W=n.isSelected,[O,_]=o.useState(!1),[A,P]=H(n.src,"anonymous"),[V,D]=o.useState(!1),j=a.activePage===n.page,z=n.page._exportingOrRendering&&"loaded"===P,B=L(n,a,z);useLoader(P,n.src,n.id),A&&(A.playsInline=!0);const U=((e,t,r)=>{const n=o.useMemo(()=>{var o,n;const{flipX:i,flipY:a}=e,d="svg"===e.type||e.src.indexOf("data:image/svg+xml")>=0||e.src.indexOf(".svg")>=0,h=navigator.userAgent.toLowerCase().indexOf("firefox")>-1;if(!(i||a||h&&d)){return t}if(!t){return null}const s=t instanceof HTMLVideoElement?t.videoWidth:null==t?void 0:t.width,c=t instanceof HTMLVideoElement?t.videoHeight:null==t?void 0:t.height;if(!s||!c){return null}const l=T();let u=1;"svg"===e.type&&(u=Math.max(e.width/s*r,e.height/c*r)),l.width=Math.max(s*u,1),l.height=Math.max(c*u,1);let g=i?-l.width:0,f=a?-l.height:0;return null===(o=l.getContext("2d"))||void 0===o||o.scale(i?-1:1,a?-1:1),null===(n=l.getContext("2d"))||void 0===n||n.drawImage(t,g,f,l.width,l.height),l},[e.flipX,e.flipY,t,e.width,e.height,r]);return o.useEffect(()=>()=>{n&&"CANVAS"===n.nodeName&&f.Util.releaseCanvas(n)},[n]),n})(n,A,a._elementsPixelRatio),N=z&&B||U||S;o.useEffect(()=>{A&&a.history.ignore(()=>{n.set({duration:1e3*A.duration})})},[A]),o.useEffect(()=>{var e;if(!A){return}const t=a.animatedElementsIds,r=(!t.length||t.includes(n.id))&&a.isPlaying,o=j&&(r||O);if(!o){return void A.pause()}o&&(A.currentTime=n.startTime*A.duration,A.play());const i=new f.Animation(()=>{fe.current()},null===(e=M.current)||void 0===e?void 0:e.getLayer());i.start();const d=()=>{_(!1),A.currentTime=n.startTime*A.duration},h=()=>{A.currentTime>=n.endTime*A.duration&&(A.pause(),A.currentTime=n.startTime*A.duration,_(!1))};return A.addEventListener("ended",d),A.addEventListener("timeupdate",h),()=>{A.pause(),i.stop(),A.removeEventListener("ended",d),A.removeEventListener("timeupdate",h)}},[A,O,a.isPlaying,j]),o.useEffect(()=>{A&&(A.volume=n.volume)},[A,n.volume]);const F=o.useRef(null);o.useEffect(()=>{const e=i(()=>{var e,t;if(A){if(z&&B){return ge(),void a.currentTime}const r=a.animatedElementsIds;if(r.length&&!r.includes(n.id)){return}const o=a.currentTime>=n.page.startTime&&a.currentTime<n.page.startTime+n.page.duration,i=n.startTime*A.duration*1e3,d=A.duration*(n.endTime-n.startTime)*1e3;let h=((a.currentTime||n.page.startTime)-n.page.startTime)%d+i;if(o||(h=0),Math.abs(1e3*A.currentTime-h)>500||!a.isPlaying){const e=h/1e3;e!==A.currentTime&&(A.currentTime=e),!X(A)&&!a.isPlaying&&!F.current&&(F.current=w(`video ${n.id}`))}fe.current(),null===(t=null===(e=M.current)||void 0===e?void 0:e.getLayer())||void 0===t||t.batchDraw()}});return()=>{e(),F.current&&(F.current(),F.current=null)}},[a,A,z,B]),o.useEffect(()=>{var e;if(!A){return}if(z){return null===(e=F.current)||void 0===e||e.call(F),void(F.current=null)}const t=()=>{var e,t;!X(A)&&n.page._exportingOrRendering||F.current&&(fe.current(),null===(t=null===(e=M.current)||void 0===e?void 0:e.getLayer())||void 0===t||t.batchDraw(),F.current(),F.current=null)};let r;return n.page._exportingOrRendering&&(r=setInterval(t,20)),A.addEventListener("timeupdate",t),A.addEventListener("canplay",t),()=>{clearInterval(r),A.removeEventListener("timeupdate",t),A.removeEventListener("canplay",t)}},[n.page._exportingOrRendering,A,n.id,w,z]);let{cropX:Z,cropY:$,cropWidth:q,cropHeight:G}=n;"loaded"!==P&&(Z=$=0,q=G=1);const J=(K=N)instanceof HTMLVideoElement?K.videoWidth:(null==K?void 0:K.width)||0;var K;const Q=(e=>e instanceof HTMLVideoElement?e.videoHeight:(null==e?void 0:e.height)||0)(N),ee=J*q,te=Q*G,re=n.width/n.height;let oe,ne;const ie=ee/te,ae="svg"===n.type;ae?(oe=ee,ne=te):re>=ie?(oe=ee,ne=ee/re):(oe=te*re,ne=te);const de={x:J*Z,y:Q*$,width:oe,height:ne},he=null!==(c=n.cornerRadius)&&void 0!==c?c:0,[se,ce]=useCornerRadiusAndCrop(n,N,de,a._elementsPixelRatio,he,!0);let[le,ue]=((e,t,r,n)=>{const i=(e=>{const[t,r]=o.useState(e);return o.useEffect(()=>{(async()=>{const o=await async function(e){if(!(e.indexOf("data:image/svg+xml")>=0||e.indexOf(".svg")>=0)){return e}const t=await x.urlToString(e),r=x.fixSize(t);return x.svgToURL(r)}(e);o!==t&&r(o)})()},[e]),t})(e.clipSrc||""),[a,d]=g(i,"anonymous"),h=e.clipSrc?d:"loaded";useLoader(h,e.clipSrc,e.id);const s=o.useMemo(()=>{if(t&&a){return T()}},[t,a]);function c(){var o;if(!a){return}const n=t instanceof HTMLVideoElement?t.videoWidth:null==t?void 0:t.width,i=t instanceof HTMLVideoElement?t.videoHeight:null==t?void 0:t.height;if(!t||!n||!i){return}if(!a||!a.width||!a.height){return}if(!s){return}const d=T(),h=Math.max(e.width/a.width*r,e.height/a.height*r);d.width=a.width*h,d.height=a.height*h,null===(o=d.getContext("2d"))||void 0===o||o.drawImage(a,0,0,d.width,d.height),s.width=Math.max(n,1),s.height=Math.max(i,1);const c=s.getContext("2d");c&&(c.save(),c.drawImage(d,0,0,n,i),f.Util.releaseCanvas(d),c.globalCompositeOperation="source-in",c.drawImage(t,0,0,s.width,s.height),c.restore())}return o.useLayoutEffect(()=>{c()},[s,t,a,e.width,e.height,r,...n]),[e.clipSrc&&a?s:t,c]})(n,se,a._elementsPixelRatio,[de,he,a._elementsPixelRatio]);function ge(){var e,t;ce(),ue(),null===(t=null===(e=M.current)||void 0===e?void 0:e.getLayer())||void 0===t||t.batchDraw()}o.useEffect(()=>{ge()});const fe=o.useRef(ge);fe.current=ge;const me=Math.max(n.width/oe,n.height/ne);o.useEffect(()=>{var e;if(!n._cropModeEnabled){return}const t=null===(e=M.current)||void 0===e?void 0:e.getStage();function r(e){n._cropModeEnabled&&e.target!==Y.current&&n.toggleCropMode(!1)}function o(e){n._cropModeEnabled&&e.target.parentNode!==(null==t?void 0:t.content)&&n.toggleCropMode(!1)}return document.body.addEventListener("click",o),null==t||t.on("click",r),null==t||t.on("tap",r),()=>{document.body.removeEventListener("click",o),document.body.removeEventListener("touchstart",o),null==t||t.off("click",r),null==t||t.off("click",r)}},[n._cropModeEnabled]),o.useLayoutEffect(()=>{if(!p&&!n._cropModeEnabled){return y(M.current,n),i(()=>{y(M.current,n)},{delay:100})}},[N,p,q,G,n._cropModeEnabled]),o.useLayoutEffect(()=>{var e;p||n._cropModeEnabled?null===(e=M.current)||void 0===e||e.clearCache():y(M.current,n)},[p,n.width,n.height,n._cropModeEnabled]),o.useEffect(()=>{y(M.current,n)},[n.shadowEnabled,n.shadowBlur,n.cornerRadius,n.shadowColor,n.shadowOffsetX,n.shadowOffsetY,n.shadowOpacity]);const pe=o.useRef(null),we=o.useRef(null),ve=o.useRef(null);o.useLayoutEffect(()=>{n._cropModeEnabled&&(we.current.nodes([pe.current]),ve.current.nodes([Y.current]))},[n._cropModeEnabled]);const xe=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 t=e.target.width()*e.target.scaleX(),r=e.target.height()*e.target.scaleY(),o=Math.min(1,oe/t),i=Math.min(1,ne/r),a=1-o,d=Math.min(a,Math.max(0,Math.round(-e.target.x())/t)),h=1-i,s=Math.min(h,Math.max(0,Math.round(-e.target.y())/r));e.target.setAttrs({x:-d*J,y:-s*Q,scaleX:1,scaleY:1}),n.set({cropX:d,cropY:s,cropWidth:o,cropHeight:i})},Me=()=>{"svg"!==n.type&&n.contentEditable&&setTimeout(()=>{n.toggleCropMode(!0)})},ye="loading"===P,Ee="failed"===P,be=!ye&&!Ee,Le=o.useRef({cropX:0,cropY:0,cropWidth:0,cropHeight:0}),Te=be?n.a.opacity:0;E(M,Te);const Ce=n.selectable||a.role===u.ADMIN,Re=b();return e(r,{children:t(d,{onMouseEnter:()=>D(!0),onMouseLeave:()=>D(!1),children:[ye&&e(I,{element:n}),Ee&&e(k,{element:n}),e(h,{ref:M,name:"element",id:n.id,image:le,x:n.a.x,y:n.a.y,width:n.a.width||1,height:n.a.height||1,rotation:n.a.rotation,opacity:Te,shadowEnabled:n.shadowEnabled,shadowBlur:n.shadowBlur,shadowOffsetX:n.shadowOffsetX,shadowOffsetY:n.shadowOffsetY,shadowColor:n.shadowColor,shadowOpacity:n.shadowOpacity,customCrop:de,listening:Ce,draggable:Re?n.draggable&&W:n.draggable,preventDefault:!Re||W,hideInExport:!n.showInExport,onDragMove:e=>{n.set({x:e.target.x(),y:e.target.y()})},onDragEnd:e=>{n.set({x:e.target.x(),y:e.target.y()})},onDblClick:Me,onDblTap:Me,onTransformStart:()=>{v(!0),Le.current={cropX:n.cropX,cropY:n.cropY,cropWidth:n.cropWidth,cropHeight:n.cropHeight}},onTransform:e=>{var t;const r=e.currentTarget,o=Math.abs(r.scaleX()-1)<1e-7?1:r.scaleX(),i=Math.abs(r.scaleY()-1)<1e-7?1:r.scaleY();r.scaleX(1),r.scaleY(1);const a=null===(t=e.target.getStage())||void 0===t?void 0:t.findOne("Transformer"),d=1-oe/J,h=Math.min(d,Math.max(0,n.cropX)),s=1-ne/Q,c=Math.min(s,Math.max(0,n.cropY)),l=a.getActiveAnchor(),u=!(l.indexOf("middle")>=0||l.indexOf("center")>=0),g=!u&&o<1&&Le.current.cropHeight>ne/Q;let f=u?n.cropWidth:n.cropWidth*o;g&&(f=n.cropWidth);const m=!u&&i<1&&Le.current.cropWidth>oe/J;let p=u?n.cropHeight:n.cropHeight*i;m&&(p=n.cropHeight),ae&&(f=n.cropWidth,p=n.cropHeight),n.set({cropX:h,cropY:c,x:r.x(),y:r.y(),width:r.width()*o,height:r.height()*i,rotation:e.target.rotation(),cropWidth:Math.min(f,1-h),cropHeight:Math.min(p,1-c)})},onTransformEnd:e=>{const t=e.currentTarget;n.set({width:t.width(),height:t.height(),x:t.x(),y:t.y(),rotation:e.target.rotation(),cropWidth:oe/J,cropHeight:ne/Q}),v(!1)}}),e(s,{x:n.a.x,y:n.a.y,width:Math.max(n.a.width-n.borderSize,0),height:Math.max(n.a.height-n.borderSize,0),opacity:Te,offsetX:-n.borderSize/2,offsetY:-n.borderSize/2,stroke:n.borderColor,strokeWidth:n.borderSize,listening:!1,visible:!!n.borderSize,rotation:n.rotation,cornerRadius:Math.max(0,he-n.borderSize),hideInExport:!n.showInExport}),!a.isPlaying&&e(h,{image:O?V||Re?R:void 0:C,x:n.a.x,y:n.a.y,offsetX:-n.a.width/2+15/a.scale,offsetY:-n.a.height/2+15/a.scale,rotation:n.a.rotation,width:30/a.scale,height:30/a.scale,hideInExport:!0,onClick:()=>_(!O),onTap:()=>_(!O)}),n._cropModeEnabled&&t(m,{selector:".page-abs-container",enabled:!0,children:[e(s,{x:-window.innerWidth/a.scale,y:-window.innerWidth/a.scale,width:window.innerWidth/a.scale*3,height:window.innerWidth/a.scale*3,fill:"rgba(0,0,0,0.3)"}),e(h,{listening:!1,image:le,x:n.a.x,y:n.a.y,width:n.a.width,height:n.a.height,rotation:n.a.rotation,shadowEnabled:n.shadowEnabled,shadowBlur:n.shadowBlur}),t(d,{x:n.a.x,y:n.a.y,rotation:n.a.rotation,scaleX:me,scaleY:me,children:[e(h,{image:N,ref:Y,width:J,height:Q,opacity:.4,draggable:!0,x:-n.cropX*J,y:-n.cropY*Q,onDragMove:xe,onTransform:xe}),e(l,{ref:ve,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(s,{width:oe,height:ne,ref:pe,listening:!1,onTransform:e=>{e.target.x()<-n.cropX*J-1e-9&&(e.target.x(-n.cropX*J),e.target.scaleX(1)),e.target.y()<-n.cropY*Q-1e-9&&(e.target.y(-n.cropY*Q),e.target.scaleY(1));const t=Math.min(1,Math.max(0,n.cropX+e.target.x()/J)),r=Math.min(1,Math.max(0,e.target.y()/Q+n.cropY)),o=e.target.width()*e.target.scaleX(),i=e.target.height()*e.target.scaleY(),a=Math.min(1-t,o/J),d=Math.min(1-r,i/Q),h=e.target.getAbsolutePosition(e.target.getParent().getParent());e.target.scale({x:1,y:1}),e.target.position({x:0,y:0}),n.set({x:h.x,y:h.y,cropX:t,cropY:r,cropWidth:a,cropHeight:d,width:Math.min(o*me,J*(1-t)*me),height:Math.min(i*me,Q*(1-r)*me)})}}),e(l,{ref:we,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:n.resizable})]})]})]})})});
+import{jsx as e,jsxs as t,Fragment as r}from"react/jsx-runtime";import o from"react";import{observer as i}from"mobx-react-lite";import{autorun as n}from"mobx";import{Arc as a,Group as d,Image as h,Rect as l,Text as s,Transformer as c}from"react-konva";import{ROLES as u}from"../model/store.js";import g from"use-image";import f from"konva";import{Portal as m}from"react-konva-utils";import{useWorkspaceStyle as p}from"./workspace-style.js";import{incrementLoader as v,triggerLoadError as w}from"../utils/loader.js";import*as x from"../utils/svg.js";import{flags as M}from"../utils/flags.js";import{applyFilter as y}from"./apply-filters.js";import{useFadeIn as E}from"./use-fadein.js";import{isTouchDevice as b}from"../utils/screen.js";import{useMediabunnyVideo as L}from"./use-mediabunny-video.js";function T(){return document.createElement("canvas")}const C=new window.Image;C.src=x.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 R=new window.Image;R.src=x.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=(e,t,r,i,n=0,a=!1)=>{var d,h;const l=Math.floor(Math.max(e.width*i,1)),s=Math.floor(Math.max(e.height*i,1)),c=Math.min(n*i,l/2,s/2),u=Math.max(e.width/r.width,e.height/r.height)*i,g=(null===(d=e.page)||void 0===d?void 0:d._exportingOrRendering)&&M.imageDownScalingEnabled&&u<1&&!a,m=t instanceof HTMLVideoElement?t.videoWidth:null==t?void 0:t.width,p=t instanceof HTMLVideoElement?t.videoHeight:null==t?void 0:t.height,v=0===r.x&&0===r.y&&r.width===m&&r.height===p,w=o.useMemo(()=>{if(t&&m&&p){return v&&0===c&&!g?void 0:T()}},[t,c,g,v,m,p]),x=()=>{if(!w||!t){return}w.width=l,w.height=s;const e=w.getContext("2d");if(!e){return}c&&(e.beginPath(),e.moveTo(c,0),e.lineTo(l-c,0),e.arc(l-c,c,c,3*Math.PI/2,0,!1),e.lineTo(l,s-c),e.arc(l-c,s-c,c,0,Math.PI/2,!1),e.lineTo(c,s),e.arc(c,s-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 o=g?function(e,t){var r,o;const i=T(),n=e instanceof HTMLVideoElement?e.videoWidth:e.width,a=e instanceof HTMLVideoElement?e.videoHeight:e.height;i.width=n,i.height=a,null===(r=i.getContext("2d"))||void 0===r||r.drawImage(e,0,0,i.width,i.height);const d=function(e,t,r,o,i,n,a){for(var d=new ImageData(t,r),h=new Int32Array(e.data.buffer),l=e.width,s=new Int32Array(d.data.buffer),c=d.width,u=t/n,g=r/a,f=Math.round(1/u),m=Math.round(1/g),p=f*m,v=0;v<d.height;v++){for(var w=0;w<c;w++){for(var x=0+Math.round(w/u)+(0+Math.round(v/g))*l,M=0,y=0,E=0,b=0,L=0;L<m;L++){for(var T=0;T<f;T++){var C=h[x+T+L*l];M+=C<<24>>>24,y+=C<<16>>>24,E+=C<<8>>>24,b+=C>>>24}}M=Math.round(M/p),y=Math.round(y/p),E=Math.round(E/p),b=Math.round(b/p),s[w+v*c]=b<<24|E<<16|y<<8|M}}return d}(i.getContext("2d").getImageData(0,0,i.width,i.height),Math.floor(i.width*t),Math.floor(i.height*t),0,0,i.width,i.height);return i.width=Math.floor(i.width*t),i.height=Math.floor(i.height*t),null===(o=i.getContext("2d"))||void 0===o||o.putImageData(d,0,0),i}(t,u):t,i=g?{x:Math.floor(r.x*u),y:Math.floor(r.y*u),width:Math.floor(r.width*u),height:Math.floor(r.height*u)}:r;e.drawImage(o,i.x,i.y,i.width,i.height,0,0,w.width,w.height)};return o.useLayoutEffect(()=>{x()},[w,e.width,e.height,r.x,r.y,r.width,r.height,n,i,a,null===(h=e.page)||void 0===h?void 0:h._exportingOrRendering,g]),o.useEffect(()=>()=>{w&&"CANVAS"===w.nodeName&&f.Util.releaseCanvas(w)},[w]),[w||t,x]};const S=T(),I=i(({element:r})=>{const i=Math.min(30,r.width/4,r.height/4),n=o.useRef(null);o.useEffect(()=>{const e=n.current;if(!e){return}const t=new f.Animation(t=>{e.rotate(((null==t?void 0:t.timeDiff)||0)/2)},e.getLayer());return t.start(),()=>{t.stop()}});const{mediaLoadingStyle:h}=p();return t(d,{x:r.a.x,y:r.a.y,rotation:r.a.rotation,listening:!1,opacity:r.a.opacity,hideInExport:!r.showInExport,children:[e(l,{width:r.width,height:r.height,fill:h.fill}),e(a,{ref:n,x:r.width/2,y:r.height/2,fill:h.textFill,outerRadius:Math.abs(i),innerRadius:Math.max(1,i-5),angle:270})]})}),k=i(({element:r})=>{const{mediaErrorStyle:o}=p(),i=Math.max(10,Math.min(30,r.width/25));return t(d,{x:r.a.x,y:r.a.y,rotation:r.a.rotation,listening:!1,opacity:r.a.opacity,hideInExport:!r.showInExport,children:[e(l,{width:r.width,height:r.height,fill:o.fill}),e(s,{text:"Can not load the video...",fontSize:i,width:r.width,height:r.height,align:"center",fill:o.textFill,verticalAlign:"middle",padding:5})]})});let H=function(e,t,r){const i=o.useRef("loading"),n=o.useRef(void 0),[a,d]=o.useState(0),h=o.useRef(),l=o.useRef(),s=o.useRef();return h.current===e&&l.current===t&&s.current===r||(i.current="loading",n.current=void 0,h.current=e,l.current=t,s.current=r),o.useLayoutEffect(function(){if(e){var o=document.createElement("video");return o.addEventListener("canplay",a),o.addEventListener("error",h),t&&(o.crossOrigin=t),r&&(o.referrerPolicy=r),o.src=e,o.load(),function(){o.removeEventListener("canplay",a),o.removeEventListener("error",h)}}function a(){i.current="loaded",n.current=o,n.current.currentTime=0,d(Math.random()),n.current.removeEventListener("canplay",a)}function h(e){var t;const r=4===o.readyState,a=o.buffered&&o.buffered.length>0&&o.buffered.end(o.buffered.length-1)/o.duration*100>=100;if(r&&a){return}const h=e.message||(null===(t=o.error)||void 0===t?void 0:t.message)||"Unknown error",l=new Error("Video failed to load: "+h);console.error(l),i.current="failed",n.current=void 0,d(Math.random())}},[e,t,r]),[n.current,i.current]};export const setVideoLoaderHook=e=>{H=e};function X(e){return e.readyState>=HTMLMediaElement.HAVE_CURRENT_DATA}export const useLoader=(e,t,r)=>{const i=o.useRef(),n=()=>{var e;null===(e=i.current)||void 0===e||e.call(i),i.current=void 0};o.useEffect(()=>n,[]),o.useLayoutEffect(()=>{const o=t.slice(0,200),a=`video with id ${r} url: ${o}`;"loading"!==e||i.current||(i.current=v(a)),"loading"!==e&&n(),"failed"===e&&w(a)},[e])};export const VideoElement=i(({element:i,store:a})=>{var s,p,w;const[M,Y]=o.useState(!1),W=o.useRef(null),O=o.useRef(null),_=i.isSelected,[A,P]=o.useState(!1),[V,D]=H(i.src,"anonymous"),[j,z]=o.useState(!1),B=a.activePage===i.page,U=(null===(s=i.page)||void 0===s?void 0:s._exportingOrRendering)&&"loaded"===D,N=L(i,a,U);useLoader(D,i.src,i.id),V&&(V.playsInline=!0);const F=((e,t,r)=>{const i=o.useMemo(()=>{var o,i;const{flipX:n,flipY:a}=e,d="svg"===e.type||e.src.indexOf("data:image/svg+xml")>=0||e.src.indexOf(".svg")>=0,h=navigator.userAgent.toLowerCase().indexOf("firefox")>-1;if(!(n||a||h&&d)){return t}if(!t){return null}const l=t instanceof HTMLVideoElement?t.videoWidth:null==t?void 0:t.width,s=t instanceof HTMLVideoElement?t.videoHeight:null==t?void 0:t.height;if(!l||!s){return null}const c=T();let u=1;"svg"===e.type&&(u=Math.max(e.width/l*r,e.height/s*r)),c.width=Math.max(l*u,1),c.height=Math.max(s*u,1);let g=n?-c.width:0,f=a?-c.height:0;return null===(o=c.getContext("2d"))||void 0===o||o.scale(n?-1:1,a?-1:1),null===(i=c.getContext("2d"))||void 0===i||i.drawImage(t,g,f,c.width,c.height),c},[e.flipX,e.flipY,t,e.width,e.height,r]);return o.useEffect(()=>()=>{i&&"CANVAS"===i.nodeName&&f.Util.releaseCanvas(i)},[i]),i})(i,V,a._elementsPixelRatio),Z=U&&N||F||S;o.useEffect(()=>{V&&a.history.ignore(()=>{i.set({duration:1e3*V.duration})})},[V]),o.useEffect(()=>{var e;if(!V){return}const t=a.animatedElementsIds,r=(!t.length||t.includes(i.id))&&a.isPlaying,o=B&&(r||A);if(!o){return void V.pause()}o&&(V.currentTime=i.startTime*V.duration,V.play());const n=new f.Animation(()=>{pe.current()},null===(e=W.current)||void 0===e?void 0:e.getLayer());n.start();const d=()=>{P(!1),V.currentTime=i.startTime*V.duration},h=()=>{V.currentTime>=i.endTime*V.duration&&(V.pause(),V.currentTime=i.startTime*V.duration,P(!1))};return V.addEventListener("ended",d),V.addEventListener("timeupdate",h),()=>{V.pause(),n.stop(),V.removeEventListener("ended",d),V.removeEventListener("timeupdate",h)}},[V,A,a.isPlaying,B]),o.useEffect(()=>{V&&(V.volume=i.volume)},[V,i.volume]);const $=o.useRef(null);o.useEffect(()=>{const e=n(()=>{var e,t;if(V){if(U&&N){return me(),void a.currentTime}const r=a.animatedElementsIds;if(r.length&&!r.includes(i.id)){return}const o=a.currentTime>=i.page.startTime&&a.currentTime<i.page.startTime+i.page.duration,n=i.startTime*V.duration*1e3,d=V.duration*(i.endTime-i.startTime)*1e3;let h=((a.currentTime||i.page.startTime)-i.page.startTime)%d+n;if(o||(h=0),Math.abs(1e3*V.currentTime-h)>500||!a.isPlaying){const e=h/1e3;e!==V.currentTime&&(V.currentTime=e),!X(V)&&!a.isPlaying&&!$.current&&($.current=v(`video ${i.id}`))}pe.current(),null===(t=null===(e=W.current)||void 0===e?void 0:e.getLayer())||void 0===t||t.batchDraw()}});return()=>{e(),$.current&&($.current(),$.current=null)}},[a,V,U,N]),o.useEffect(()=>{var e,t;if(!V){return}if(U){return null===(e=$.current)||void 0===e||e.call($),void($.current=null)}const r=()=>{var e,t,r;!X(V)&&(null===(e=i.page)||void 0===e?void 0:e._exportingOrRendering)||$.current&&(pe.current(),null===(r=null===(t=W.current)||void 0===t?void 0:t.getLayer())||void 0===r||r.batchDraw(),$.current(),$.current=null)};let o;return(null===(t=i.page)||void 0===t?void 0:t._exportingOrRendering)&&(o=setInterval(r,20)),V.addEventListener("timeupdate",r),V.addEventListener("canplay",r),()=>{clearInterval(o),V.removeEventListener("timeupdate",r),V.removeEventListener("canplay",r)}},[null===(p=i.page)||void 0===p?void 0:p._exportingOrRendering,V,i.id,v,U]);let{cropX:q,cropY:G,cropWidth:J,cropHeight:K}=i;"loaded"!==D&&(q=G=0,J=K=1);const Q=(ee=Z)instanceof HTMLVideoElement?ee.videoWidth:(null==ee?void 0:ee.width)||0;var ee;const te=(e=>e instanceof HTMLVideoElement?e.videoHeight:(null==e?void 0:e.height)||0)(Z),re=Q*J,oe=te*K,ie=i.width/i.height;let ne,ae;const de=re/oe,he="svg"===i.type;he?(ne=re,ae=oe):ie>=de?(ne=re,ae=re/ie):(ne=oe*ie,ae=oe);const le={x:Q*q,y:te*G,width:ne,height:ae},se=null!==(w=i.cornerRadius)&&void 0!==w?w:0,[ce,ue]=useCornerRadiusAndCrop(i,Z,le,a._elementsPixelRatio,se,!0);let[ge,fe]=((e,t,r,i)=>{const n=(e=>{const[t,r]=o.useState(e);return o.useEffect(()=>{(async()=>{const o=await async function(e){if(!(e.indexOf("data:image/svg+xml")>=0||e.indexOf(".svg")>=0)){return e}const t=await x.urlToString(e),r=x.fixSize(t);return x.svgToURL(r)}(e);o!==t&&r(o)})()},[e]),t})(e.clipSrc||""),[a,d]=g(n,"anonymous"),h=e.clipSrc?d:"loaded";useLoader(h,e.clipSrc,e.id);const l=o.useMemo(()=>{if(t&&a){return T()}},[t,a]);function s(){var o;if(!a){return}const i=t instanceof HTMLVideoElement?t.videoWidth:null==t?void 0:t.width,n=t instanceof HTMLVideoElement?t.videoHeight:null==t?void 0:t.height;if(!t||!i||!n){return}if(!a||!a.width||!a.height){return}if(!l){return}const d=T(),h=Math.max(e.width/a.width*r,e.height/a.height*r);d.width=a.width*h,d.height=a.height*h,null===(o=d.getContext("2d"))||void 0===o||o.drawImage(a,0,0,d.width,d.height),l.width=Math.max(i,1),l.height=Math.max(n,1);const s=l.getContext("2d");s&&(s.save(),s.drawImage(d,0,0,i,n),f.Util.releaseCanvas(d),s.globalCompositeOperation="source-in",s.drawImage(t,0,0,l.width,l.height),s.restore())}return o.useLayoutEffect(()=>{s()},[l,t,a,e.width,e.height,r,...i]),[e.clipSrc&&a?l:t,s]})(i,ce,a._elementsPixelRatio,[le,se,a._elementsPixelRatio]);function me(){var e,t;ue(),fe(),null===(t=null===(e=W.current)||void 0===e?void 0:e.getLayer())||void 0===t||t.batchDraw()}o.useEffect(()=>{me()});const pe=o.useRef(me);pe.current=me;const ve=Math.max(i.width/ne,i.height/ae);o.useEffect(()=>{var e;if(!i._cropModeEnabled){return}const t=null===(e=W.current)||void 0===e?void 0:e.getStage();function r(e){i._cropModeEnabled&&e.target!==O.current&&i.toggleCropMode(!1)}function o(e){i._cropModeEnabled&&e.target.parentNode!==(null==t?void 0:t.content)&&i.toggleCropMode(!1)}return document.body.addEventListener("click",o),null==t||t.on("click",r),null==t||t.on("tap",r),()=>{document.body.removeEventListener("click",o),document.body.removeEventListener("touchstart",o),null==t||t.off("click",r),null==t||t.off("click",r)}},[i._cropModeEnabled]),o.useLayoutEffect(()=>{if(!M&&!i._cropModeEnabled){return y(W.current,i),n(()=>{y(W.current,i)},{delay:100})}},[Z,M,J,K,i._cropModeEnabled]),o.useLayoutEffect(()=>{var e;M||i._cropModeEnabled?null===(e=W.current)||void 0===e||e.clearCache():y(W.current,i)},[M,i.width,i.height,i._cropModeEnabled]),o.useEffect(()=>{y(W.current,i)},[i.shadowEnabled,i.shadowBlur,i.cornerRadius,i.shadowColor,i.shadowOffsetX,i.shadowOffsetY,i.shadowOpacity]);const we=o.useRef(null),xe=o.useRef(null),Me=o.useRef(null);o.useLayoutEffect(()=>{i._cropModeEnabled&&(xe.current.nodes([we.current]),Me.current.nodes([O.current]))},[i._cropModeEnabled]);const ye=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 t=e.target.width()*e.target.scaleX(),r=e.target.height()*e.target.scaleY(),o=Math.min(1,ne/t),n=Math.min(1,ae/r),a=1-o,d=Math.min(a,Math.max(0,Math.round(-e.target.x())/t)),h=1-n,l=Math.min(h,Math.max(0,Math.round(-e.target.y())/r));e.target.setAttrs({x:-d*Q,y:-l*te,scaleX:1,scaleY:1}),i.set({cropX:d,cropY:l,cropWidth:o,cropHeight:n})},Ee=()=>{"svg"!==i.type&&i.contentEditable&&setTimeout(()=>{i.toggleCropMode(!0)})},be="loading"===D,Le="failed"===D,Te=!be&&!Le,Ce=o.useRef({cropX:0,cropY:0,cropWidth:0,cropHeight:0}),Re=Te?i.a.opacity:0;E(W,Re);const Se=i.selectable||a.role===u.ADMIN,Ie=b();return e(r,{children:t(d,{onMouseEnter:()=>z(!0),onMouseLeave:()=>z(!1),children:[be&&e(I,{element:i}),Le&&e(k,{element:i}),e(h,{ref:W,name:"element",id:i.id,image:ge,x:i.a.x,y:i.a.y,width:i.a.width||1,height:i.a.height||1,rotation:i.a.rotation,opacity:Re,shadowEnabled:i.shadowEnabled,shadowBlur:i.shadowBlur,shadowOffsetX:i.shadowOffsetX,shadowOffsetY:i.shadowOffsetY,shadowColor:i.shadowColor,shadowOpacity:i.shadowOpacity,customCrop:le,listening:Se,draggable:Ie?i.draggable&&_:i.draggable,preventDefault:!Ie||_,hideInExport:!i.showInExport,onDragMove:e=>{i.set({x:e.target.x(),y:e.target.y()})},onDragEnd:e=>{i.set({x:e.target.x(),y:e.target.y()})},onDblClick:Ee,onDblTap:Ee,onTransformStart:()=>{Y(!0),Ce.current={cropX:i.cropX,cropY:i.cropY,cropWidth:i.cropWidth,cropHeight:i.cropHeight}},onTransform:e=>{var t;const r=e.currentTarget,o=Math.abs(r.scaleX()-1)<1e-7?1:r.scaleX(),n=Math.abs(r.scaleY()-1)<1e-7?1:r.scaleY();r.scaleX(1),r.scaleY(1);const a=null===(t=e.target.getStage())||void 0===t?void 0:t.findOne("Transformer"),d=1-ne/Q,h=Math.min(d,Math.max(0,i.cropX)),l=1-ae/te,s=Math.min(l,Math.max(0,i.cropY)),c=a.getActiveAnchor(),u=!(c.indexOf("middle")>=0||c.indexOf("center")>=0),g=!u&&o<1&&Ce.current.cropHeight>ae/te;let f=u?i.cropWidth:i.cropWidth*o;g&&(f=i.cropWidth);const m=!u&&n<1&&Ce.current.cropWidth>ne/Q;let p=u?i.cropHeight:i.cropHeight*n;m&&(p=i.cropHeight),he&&(f=i.cropWidth,p=i.cropHeight),i.set({cropX:h,cropY:s,x:r.x(),y:r.y(),width:r.width()*o,height:r.height()*n,rotation:e.target.rotation(),cropWidth:Math.min(f,1-h),cropHeight:Math.min(p,1-s)})},onTransformEnd:e=>{const t=e.currentTarget;i.set({width:t.width(),height:t.height(),x:t.x(),y:t.y(),rotation:e.target.rotation(),cropWidth:ne/Q,cropHeight:ae/te}),Y(!1)}}),e(l,{x:i.a.x,y:i.a.y,width:Math.max(i.a.width-i.borderSize,0),height:Math.max(i.a.height-i.borderSize,0),opacity:Re,offsetX:-i.borderSize/2,offsetY:-i.borderSize/2,stroke:i.borderColor,strokeWidth:i.borderSize,listening:!1,visible:!!i.borderSize,rotation:i.rotation,cornerRadius:Math.max(0,se-i.borderSize),hideInExport:!i.showInExport}),!a.isPlaying&&e(h,{image:A?j||Ie?R:void 0:C,x:i.a.x,y:i.a.y,offsetX:-i.a.width/2+15/a.scale,offsetY:-i.a.height/2+15/a.scale,rotation:i.a.rotation,width:30/a.scale,height:30/a.scale,hideInExport:!0,onClick:()=>P(!A),onTap:()=>P(!A)}),i._cropModeEnabled&&t(m,{selector:".page-abs-container",enabled:!0,children:[e(l,{x:-window.innerWidth/a.scale,y:-window.innerWidth/a.scale,width:window.innerWidth/a.scale*3,height:window.innerWidth/a.scale*3,fill:"rgba(0,0,0,0.3)"}),e(h,{listening:!1,image:ge,x:i.a.x,y:i.a.y,width:i.a.width,height:i.a.height,rotation:i.a.rotation,shadowEnabled:i.shadowEnabled,shadowBlur:i.shadowBlur}),t(d,{x:i.a.x,y:i.a.y,rotation:i.a.rotation,scaleX:ve,scaleY:ve,children:[e(h,{image:Z,ref:O,width:Q,height:te,opacity:.4,draggable:!0,x:-i.cropX*Q,y:-i.cropY*te,onDragMove:ye,onTransform:ye}),e(c,{ref:Me,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(l,{width:ne,height:ae,ref:we,listening:!1,onTransform:e=>{e.target.x()<-i.cropX*Q-1e-9&&(e.target.x(-i.cropX*Q),e.target.scaleX(1)),e.target.y()<-i.cropY*te-1e-9&&(e.target.y(-i.cropY*te),e.target.scaleY(1));const t=Math.min(1,Math.max(0,i.cropX+e.target.x()/Q)),r=Math.min(1,Math.max(0,e.target.y()/te+i.cropY)),o=e.target.width()*e.target.scaleX(),n=e.target.height()*e.target.scaleY(),a=Math.min(1-t,o/Q),d=Math.min(1-r,n/te),h=e.target.getAbsolutePosition(e.target.getParent().getParent());e.target.scale({x:1,y:1}),e.target.position({x:0,y:0}),i.set({x:h.x,y:h.y,cropX:t,cropY:r,cropWidth:a,cropHeight:d,width:Math.min(o*ve,Q*(1-t)*ve),height:Math.min(n*ve,te*(1-r)*ve)})}}),e(c,{ref:xe,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:i.resizable})]})]})]})})});

package/config.d.ts

@@ -19,7 +19,7 @@ export { setQuillFormats as unstable_setQuillFormats } from './canvas/html-eleme
 export { useDownScaling, setDownScalingEnabled } from './utils/flags.js';
 export { useRemoveBackground as unstable_setRemoveBackgroundEnabled, setRemoveBackgroundEnabled, } from './utils/flags.js';
 export { useHtmlTextRender as unstable_useHtmlTextRender, setRichTextEnabled, } from './utils/flags.js';
-export { setRenderTagTextEnabled, setRenderTagTextEnabled as unstable_setRenderTagTextEnabled, } from './utils/flags.js';
+export { setLegacuRichTextEnabled } from './utils/flags.js';
 export { setForceTextFit as unstable_setForceTextFit } from './utils/flags.js';
 export { setTextSplitAllowed as unstable_setTextSplitAllowed } from './utils/flags.js';
 export { setTextOverflow as unstable_setTextOverflow, setTextOverflow, } from './utils/flags.js';

package/config.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "polotno",
-  "version": "4.0.0-beta.43",
+  "version": "4.0.0-beta.45",
   "description": "Design Editor Framework",
   "author": "Anton Lavrenov",
   "keywords": [
@@ -110,11 +110,11 @@
     "quill": "^2.0.3",
     "radix-ui": "^1.5.0",
     "rasterizehtml": "^1.4.1",
-    "react-konva": "^19.2.4",
+    "react-konva": "^19.2.5",
     "react-konva-utils": "^2.0.0",
     "react-sortablejs": "6.1.4",
     "react-window": "^1.8.11",
-    "render-tag": "^0.1.13",
+    "render-tag": "^0.1.14",
     "sortablejs": "^1.15.7",
     "svg-round-corners": "^0.4.3",
     "swr": "^2.4.1",
@@ -169,9 +169,9 @@
     "@babel/core": "^7.29.7",
     "@babel/parser": "^7.29.7",
     "@babel/traverse": "^7.29.7",
-    "@blueprintjs/core": "6.15.1",
-    "@blueprintjs/icons": "^6.10.0",
-    "@blueprintjs/select": "6.2.2",
+    "@blueprintjs/core": "6.16.0",
+    "@blueprintjs/icons": "^6.11.0",
+    "@blueprintjs/select": "6.3.0",
     "@canvas/image": "^2.0.0",
     "@polotno/video-export": "^0.0.11",
     "@size-limit/preset-big-lib": "^12.1.0",