polotno 2.21.11 → 2.22.0

package/canvas/element.js

@@ -1 +1 @@
-var e=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.registerShapeComponent=function(e,t){f[e]=t};const t=e(require("react")),r=require("mobx-react-lite"),n=require("./text-element"),l=require("./image-element"),i=require("./html-element"),o=require("./line-element"),m=require("./video-element"),u=require("./figure-element"),a=require("./gif-element"),s=require("react-konva"),c=require("../utils/flags"),d=(0,r.observer)((e=>{const{element:r,store:n}=e,{children:l}=r,i=r.selectable||"admin"===n.role;return t.default.createElement(s.Group,{opacity:r.opacity,listening:i,hideInExport:!r.showInExport},l.map((r=>t.default.createElement(p,Object.assign({},e,{key:r.id,store:n,element:r})))))})),f={text:n.TextElement,image:l.ImageElement,svg:l.ImageElement,line:o.LineElement,video:m.VideoElement,figure:u.FigureElement,group:d,gif:a.GifElement},p=(0,r.observer)((e=>{let r=f[e.element.type];return"text"===e.element.type&&c.flags.htmlRenderEnabled&&(r=i.HTMLElement),e.element.visible?r?t.default.createElement(r,Object.assign({},e)):(console.error("Can not find component for "+e.element.type),null):null}));exports.default=p;
+var e=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.registerShapeComponent=function(e,t){h[e]=t};const t=e(require("react")),n=require("mobx-react-lite"),r=e(require("konva")),l=require("./text-element"),o=require("./image-element"),i=require("./html-element"),a=require("./line-element"),u=require("./video-element"),d=require("./figure-element"),s=require("./gif-element"),m=require("react-konva"),f=require("./highlighter"),c=require("../model/group-model"),g=require("../utils/flags"),p=(0,n.observer)((e=>{const{element:n,store:r}=e,{children:l}=n,o=n.selectable||"admin"===r.role;return t.default.createElement(m.Group,{opacity:n.opacity,listening:o,hideInExport:!n.showInExport},l.map((n=>t.default.createElement(x,Object.assign({},e,{key:n.id,store:r,element:n})))))})),h={text:l.TextElement,image:o.ImageElement,svg:o.ImageElement,line:a.LineElement,video:u.VideoElement,figure:d.FigureElement,group:p,gif:s.GifElement},E=(e,t)=>{const n=[];(0,c.forEveryChild)(e,(e=>{"group"!==e.type&&n.push(e.a)}));const l=[];n.forEach((e=>{const t=[{x:0,y:0},{x:0+e.width,y:0},{x:0+e.width,y:0+e.height},{x:0,y:0+e.height}],n=new r.default.Transform;n.translate(e.x,e.y),n.rotate(r.default.Util.degToRad(e.rotation)),t.forEach((e=>{const t=n.point(e);l.push(t)}))}));const o=new r.default.Transform;o.rotate(-r.default.Util.degToRad(t));let i=1/0,a=1/0,u=-1/0,d=-1/0;l.forEach((e=>{const t=o.point(e);i=Math.min(i,t.x),a=Math.min(a,t.y),u=Math.max(u,t.x),d=Math.max(d,t.y)})),o.invert();const s=o.point({x:i,y:a});return{x:s.x,y:s.y,width:u-i,height:d-a,rotation:t}},x=(0,n.observer)((e=>{const{element:n,store:l}=e,[o,a]=t.default.useState(!1),u=l.selectedElements.indexOf(n)>=0&&n.selectable,d="group"===n.parent.type,s=(e=>{const[n,l]=t.default.useState(null);return t.default.useEffect((()=>{const t=e.page.id,n=r.default.stages.find((e=>e.getAttr("pageId")===t));l(n)}),[e.id]),n})(n),m=null==s?void 0:s.findOne("Transformer");t.default.useEffect((()=>{s&&(s.on("mouseover",(e=>{const t=e.target.findAncestor(".element",!0),r=l.getElementById(null==t?void 0:t.id()),o=null==r?void 0:r.top,i=null==o?void 0:o.id;a(i===n.id)})),s.on("mouseleave",(e=>{a(!1)})))}),[s]);let c=h[e.element.type];return"text"===e.element.type&&g.flags.htmlRenderEnabled&&(c=i.HTMLElement),e.element.visible?c?t.default.createElement(t.default.Fragment,null,t.default.createElement(c,Object.assign({},e)),(o||u)&&!d&&t.default.createElement(f.Highlighter,{element:"group"===n.type?{a:E(n,(null==m?void 0:m.rotation())||0)}:n})):(console.error("Can not find component for "+e.element.type),null):null}));exports.default=x;

package/canvas/figure-element.js

@@ -1 +1 @@
-var e=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.FigureElement=void 0;const t=e(require("react")),a=require("mobx-react-lite"),r=require("react-konva"),s=require("../utils/figure-to-svg"),i=require("./highlighter"),o=require("../utils/screen"),l=require("./use-color"),n={};exports.FigureElement=(0,a.observer)((({element:e,store:h})=>{const d=e.selectable||"admin"===h.role,c=(0,o.isTouchDevice)(),[u,g]=t.default.useState(!1),f=h.selectedShapes.indexOf(e)>=0&&e.selectable,p=Math.min(e.strokeWidth,e.width/2,e.height/2),m=Math.max(0,Math.min(e.width/2,e.height/2,e.cornerRadius)),b=(0,l.useColor)(e,e.a.fill,"fill"),w=Object.assign(Object.assign({width:e.a.width,height:e.a.height},b),{cornerRadius:m,opacity:e.animated("opacity"),shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,preventDefault:!c||f,hideInExport:!e.showInExport}),y=(0,l.useColor)(e,e.stroke,"stroke"),x=Object.assign(Object.assign({visible:p>0,x:p/2,y:p/2,width:e.a.width-p,height:e.a.height-p},y),{strokeWidth:p,cornerRadius:Math.max(0,m-p),dash:e.dash.map((e=>e*p)),opacity:e.animated("opacity"),hideInExport:!e.showInExport,listening:!1}),v=(E=e.subType,n[E]||(n[E]=(k=(0,s.subTypeToPathDataFunc)(E),(0,a.observer)((({element:e,fillProps:a,strokeProps:s})=>{let i=k({width:e.a.width,height:e.a.height,cornerRadius:e.cornerRadius}),o=1,l=1;"string"!=typeof i&&(o=i.scaleX,l=i.scaleY,i=i.path);const n=t.default.useRef(null);return t.default.createElement(t.default.Fragment,null,t.default.createElement(r.Rect,{width:e.width,height:e.height,fill:"transparent"}),t.default.createElement(r.Path,Object.assign({},a,{ref:n,data:i,scaleX:o,scaleY:l})),t.default.createElement(r.Group,{clipFunc:e=>{const t=n.current;if(t){var a=t.dataArray;e.beginPath();for(var r=0;r<a.length;r++){var s=a[r].command,i=a[r].points;switch(s){case"L":e.lineTo(i[0],i[1]);break;case"M":e.moveTo(i[0],i[1]);break;case"C":e.bezierCurveTo(i[0],i[1],i[2],i[3],i[4],i[5]);break;case"Q":e.quadraticCurveTo(i[0],i[1],i[2],i[3]);break;case"A":var o=i[0],l=i[1],h=i[2],d=i[3],c=i[4],u=i[5],g=i[6],f=i[7],p=h>d?h:d,m=h>d?1:h/d,b=h>d?d/h:1;e.translate(o,l),e.rotate(g),e.scale(m,b),e.arc(0,0,p,c,c+u,1-f),e.scale(1/m,1/b),e.rotate(-g),e.translate(-o,-l);break;case"z":e.closePath()}}}},scaleX:o,scaleY:l},t.default.createElement(r.Path,Object.assign({},s,{x:0,y:0,data:i,strokeWidth:2*s.strokeWidth,dash:s.dash.map((e=>e))}))))})))),n[E]||r.Group);var E,k;return t.default.createElement(t.default.Fragment,null,t.default.createElement(r.Group,{id:e.id,x:e.a.x,y:e.a.y,rotation:e.a.rotation,opacity:e.a.opacity,listening:d,draggable:c?e.draggable&&f:e.draggable,name:"element",onMouseEnter:()=>{g(!0)},onMouseLeave:()=>{g(!1)},onDragMove:t=>{e.set({x:t.target.x(),y:t.target.y()})},onDragEnd:t=>{e.set({x:t.target.x(),y:t.target.y()})},onTransform:t=>{const a=t.target.scale();t.target.scaleX(1),t.target.scaleY(1),e.set({width:e.width*a.x,height:e.height*a.y,x:t.target.x(),y:t.target.y(),rotation:t.target.rotation()})}},t.default.createElement(v,{element:e,fillProps:w,strokeProps:x})),(u||f)&&t.default.createElement(i.Highlighter,{element:e}))}));
+var e=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.FigureElement=void 0;const t=e(require("react")),a=require("mobx-react-lite"),r=require("react-konva"),s=require("../utils/figure-to-svg"),o=require("../utils/screen"),i=require("./use-color"),l={};exports.FigureElement=(0,a.observer)((({element:e,store:n})=>{const h=e.selectable||"admin"===n.role,d=(0,o.isTouchDevice)(),c=n.selectedShapes.indexOf(e)>=0&&e.selectable,u=Math.min(e.strokeWidth,e.width/2,e.height/2),g=Math.max(0,Math.min(e.width/2,e.height/2,e.cornerRadius)),f=(0,i.useColor)(e,e.a.fill,"fill"),p=Object.assign(Object.assign({width:e.a.width,height:e.a.height},f),{cornerRadius:g,opacity:e.animated("opacity"),shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,preventDefault:!d||c,hideInExport:!e.showInExport}),m=(0,i.useColor)(e,e.stroke,"stroke"),b=Object.assign(Object.assign({visible:u>0,x:u/2,y:u/2,width:e.a.width-u,height:e.a.height-u},m),{strokeWidth:u,cornerRadius:Math.max(0,g-u),dash:e.dash.map((e=>e*u)),opacity:e.animated("opacity"),hideInExport:!e.showInExport,listening:!1}),w=(y=e.subType,l[y]||(l[y]=(x=(0,s.subTypeToPathDataFunc)(y),(0,a.observer)((({element:e,fillProps:a,strokeProps:s})=>{let o=x({width:e.a.width,height:e.a.height,cornerRadius:e.cornerRadius}),i=1,l=1;"string"!=typeof o&&(i=o.scaleX,l=o.scaleY,o=o.path);const n=t.default.useRef(null);return t.default.createElement(t.default.Fragment,null,t.default.createElement(r.Rect,{width:e.width,height:e.height,fill:"transparent"}),t.default.createElement(r.Path,Object.assign({},a,{ref:n,data:o,scaleX:i,scaleY:l})),t.default.createElement(r.Group,{clipFunc:e=>{const t=n.current;if(t){var a=t.dataArray;e.beginPath();for(var r=0;r<a.length;r++){var s=a[r].command,o=a[r].points;switch(s){case"L":e.lineTo(o[0],o[1]);break;case"M":e.moveTo(o[0],o[1]);break;case"C":e.bezierCurveTo(o[0],o[1],o[2],o[3],o[4],o[5]);break;case"Q":e.quadraticCurveTo(o[0],o[1],o[2],o[3]);break;case"A":var i=o[0],l=o[1],h=o[2],d=o[3],c=o[4],u=o[5],g=o[6],f=o[7],p=h>d?h:d,m=h>d?1:h/d,b=h>d?d/h:1;e.translate(i,l),e.rotate(g),e.scale(m,b),e.arc(0,0,p,c,c+u,1-f),e.scale(1/m,1/b),e.rotate(-g),e.translate(-i,-l);break;case"z":e.closePath()}}}},scaleX:i,scaleY:l},t.default.createElement(r.Path,Object.assign({},s,{x:0,y:0,data:o,strokeWidth:2*s.strokeWidth,dash:s.dash.map((e=>e))}))))})))),l[y]||r.Group);var y,x;return t.default.createElement(t.default.Fragment,null,t.default.createElement(r.Group,{id:e.id,x:e.a.x,y:e.a.y,rotation:e.a.rotation,opacity:e.a.opacity,listening:h,draggable:d?e.draggable&&c:e.draggable,name:"element",onDragMove:t=>{e.set({x:t.target.x(),y:t.target.y()})},onDragEnd:t=>{e.set({x:t.target.x(),y:t.target.y()})},onTransform:t=>{const a=t.target.scale();t.target.scaleX(1),t.target.scaleY(1),e.set({width:e.width*a.x,height:e.height*a.y,x:t.target.x(),y:t.target.y(),rotation:t.target.rotation()})}},t.default.createElement(w,{element:e,fillProps:p,strokeProps:b})))}));

package/canvas/gif-element.js

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

package/canvas/highlighter.d.ts

@@ -1,9 +1,18 @@
 import React from 'react';
-import { ShapeType } from '../model/shape-model';
 import { RectConfig } from 'konva/lib/shapes/Rect';
 export declare const setHighlighterStyle: (style: RectConfig) => void;
+type SimplifiedElement = {
+    a: {
+        x: number;
+        y: number;
+        rotation: number;
+        width: number;
+        height: number;
+    };
+};
 export declare const Highlighter: (({ element }: {
-    element: ShapeType;
+    element: SimplifiedElement;
 }) => React.JSX.Element) & {
     displayName: string;
 };
+export {};

package/canvas/html-element.js

@@ -1,4 +1,4 @@
-var e,t=this&&this.__createBinding||(Object.create?function(e,t,n,i){void 0===i&&(i=n);var r=Object.getOwnPropertyDescriptor(t,n);r&&!("get"in r?!t.__esModule:r.writable||r.configurable)||(r={enumerable:!0,get:function(){return t[n]}}),Object.defineProperty(e,i,r)}:function(e,t,n,i){void 0===i&&(i=n),e[i]=t[n]}),n=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),i=this&&this.__importStar||(e=function(t){return e=Object.getOwnPropertyNames||function(e){var t=[];for(var n in e){Object.prototype.hasOwnProperty.call(e,n)&&(t[t.length]=n)}return t},e(t)},function(i){if(i&&i.__esModule){return i}var r={};if(null!=i){for(var o=e(i),a=0;a<o.length;a++){"default"!==o[a]&&t(r,i,o[a])}}return n(r,i),r}),r=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.HTMLElement=exports.setQuillContent=exports.createQuill=exports.setQuillFormats=exports.quillRef=void 0;const o=r(require("react")),a=require("mobx-react-lite"),l=require("react-konva"),s=r(require("quill")),u=r(require("konva")),c=i(require("mobx")),d=require("../utils/flags"),f=require("./apply-filters"),g=require("./text-element"),h=require("./use-color"),m=require("../utils/html2canvas"),p=require("./use-fadein"),x=require("./highlighter"),b=require("react-konva-utils"),y=r(require("../utils/styled")),w=require("../utils/loader"),v=require("../utils/text"),S=i(require("../utils/fonts")),E=require("../utils/screen"),k=require("./text-element/max-font-size");exports.quillRef=c.observable({enabled:!1,currentFormat:{},editor:c.observable.object({instance:null},{},{deep:!1})});const z=(0,y.default)("div",o.default.forwardRef)`
+var e,t=this&&this.__createBinding||(Object.create?function(e,t,n,r){void 0===r&&(r=n);var i=Object.getOwnPropertyDescriptor(t,n);i&&!("get"in i?!t.__esModule:i.writable||i.configurable)||(i={enumerable:!0,get:function(){return t[n]}}),Object.defineProperty(e,r,i)}:function(e,t,n,r){void 0===r&&(r=n),e[r]=t[n]}),n=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),r=this&&this.__importStar||(e=function(t){return e=Object.getOwnPropertyNames||function(e){var t=[];for(var n in e){Object.prototype.hasOwnProperty.call(e,n)&&(t[t.length]=n)}return t},e(t)},function(r){if(r&&r.__esModule){return r}var i={};if(null!=r){for(var o=e(r),a=0;a<o.length;a++){"default"!==o[a]&&t(i,r,o[a])}}return n(i,r),i}),i=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.HTMLElement=exports.setQuillContent=exports.createQuill=exports.setQuillFormats=exports.quillRef=void 0;const o=i(require("react")),a=require("mobx-react-lite"),l=require("react-konva"),s=i(require("quill")),u=i(require("konva")),c=r(require("mobx")),d=require("../utils/flags"),f=require("./apply-filters"),g=require("./text-element"),h=require("./use-color"),m=require("../utils/html2canvas"),p=require("./use-fadein"),x=require("react-konva-utils"),b=i(require("../utils/styled")),y=require("../utils/loader"),w=require("../utils/text"),v=r(require("../utils/fonts")),S=require("../utils/screen"),E=require("./text-element/max-font-size");exports.quillRef=c.observable({enabled:!1,currentFormat:{},editor:c.observable.object({instance:null},{},{deep:!1})});const k=(0,b.default)("div",o.default.forwardRef)`
   .ql-editor {
     outline: none;
   }
@@ -12,4 +12,4 @@ var e,t=this&&this.__createBinding||(Object.create?function(e,t,n,i){void 0===i&
   .ql-direction-rtl {
     direction: rtl;
   }
-`;let O=["bold","color","font","italic","size","strike","underline","indent","list","direction"];exports.setQuillFormats=e=>{O=e},exports.createQuill=e=>new s.default(e,{toolbar:!1,keyboard:!1,clipboard:{matchVisual:!1},formats:O}),exports.setQuillContent=(e,t)=>{var n=e.clipboard.convert("<div class='ql-editor' style='outline: none;'>"+t+"<p><br></p></div>");e.setContents(n),e.history.clear()};const q=({html:e,onBlur:t,onChange:n,element:i})=>{const r=o.default.useRef(null);o.default.useEffect((()=>{if(!r.current){return}const e=(0,exports.createQuill)(r.current);return c.runInAction((()=>{exports.quillRef.editor.instance=e})),window.__polotnoQuill=e,e.on("text-change",(()=>{e.getSelection()&&c.runInAction((()=>{exports.quillRef.currentFormat=e.getFormat()})),setTimeout((()=>{var e;const t=null===(e=r.current)||void 0===e?void 0:e.childNodes[0];n(t.innerHTML)}),10)})),e.setSelection(0,0,"api"),e.on("selection-change",((t,n,i)=>{t&&c.runInAction((()=>{exports.quillRef.currentFormat=e.getFormat()}))})),r.current.childNodes[0].addEventListener("blur",(e=>{var n;if(null===(n=e.relatedTarget)||void 0===n?void 0:n.classList.contains("ql-clipboard")){return}const i=function(e){return!!e&&!!e.closest(".sketch-picker")}(e.relatedTarget);i||t()})),()=>{c.runInAction((()=>{exports.quillRef.editor.instance=null,exports.quillRef.currentFormat={}})),delete window.__polotnoQuill}}),[]),o.default.useEffect((()=>{var t;const n=exports.quillRef.editor.instance;if(!n){return}const o=n.getSelection();(null===(t=r.current)||void 0===t?void 0:t.childNodes[0].innerHTML)===i.text||((0,exports.setQuillContent)(n,e),o&&(n.setSelection(o.index,o.length),c.runInAction((()=>{exports.quillRef.currentFormat=n.getFormat()}))))}),[i.text]);const a={color:i.fill};return i.fill.indexOf("gradient")>=0&&(a.backgroundColor=i.fill,a.backgroundImage=i.fill,a.backgroundSize="100% 100%",a.backgroundRepeat="repeat",a.webkitBackgroundClip="text",a.MozBackgroundClip="text",a.WebkitTextFillColor="transparent",a.MozTextFillColor="transparent"),o.default.createElement(z,{ref:r,style:Object.assign(Object.assign({},a),{fontSize:i.fontSize,fontWeight:i.fontWeight,width:i.a.width,fontFamily:i.fontFamily,lineHeight:i.lineHeight,letterSpacing:i.letterSpacing*i.fontSize+"px",textAlign:i.align}),dir:(0,g.getDir)((0,v.removeTags)(i.text))})},F=(e,t=100,n=!1,i="")=>{const[r,a]=o.default.useState(e),l=o.default.useRef(null);return o.default.useEffect((()=>e===n?(l.current&&(clearTimeout(l.current),l.current=null),void a(n)):(l.current&&clearTimeout(l.current),l.current=setTimeout((()=>{a(e),l.current=null}),t),()=>{l.current&&clearTimeout(l.current)})),[e,t]),[r,a]};function R(e,{fontFamily:t="",color:n="black"}={}){let i=`color: ${n||e.fill}`;return e.fill.indexOf("gradient")>=0&&(i=`\n      background-color: ${n};\n      background-image: ${e.fill};\n      background-size: 100% 100%;\n      background-repeat: repeat;\n      -webkit-background-clip: text;\n      -moz-background-clip: text;\n      -webkit-text-fill-color: transparent;\n      -moz-text-fill-color: transparent;\n    `),`<div style="${["white-space: pre-wrap",`width: ${Math.round(e.width||100)}px`,i,`font-size: ${e.fontSize}px`,`font-family: '${t}'`,`text-align: ${e.align}`,e.textDecoration?`text-decoration: ${e.textDecoration}; text-decoration-color: ${n||e.fill}; text-decoration-layer: over`:"",e.lineHeight?`line-height: ${e.lineHeight}`:"",e.letterSpacing?`letter-spacing: ${e.letterSpacing*e.fontSize}px`:"",e.fontStyle?`font-style: ${e.fontStyle}`:"",e.fontWeight?`font-weight: ${e.fontWeight}`:"",e.strokeWidth?`-webkit-text-stroke: ${e.strokeWidth}px ${e.stroke}`:"",e.strokeWidth?"paint-order: stroke fill":""].filter(Boolean).join("; ")}" contentEditable dir="${(0,g.getDir)((0,v.removeTags)(e.text))}">${(0,v.sanitizeHtml)(e.text).replace(/\n/g,"</br>")}</div>`}const T=/^((?!chrome|android).)*safari/i.test(navigator.userAgent);exports.HTMLElement=(0,a.observer)((({element:e,store:t})=>{const n=o.default.useRef(null),[i,r]=o.default.useState(),[a,s]=o.default.useState(!1),[y,O]=o.default.useState(!0),[M,_]=o.default.useState(!1),C=o.default.useRef(e.height),$=t.selectedShapes.indexOf(e)>=0&&e.selectable,A=e.fontSize/3,{textVerticalResizeEnabled:H}=d.flags,I=(0,g.usePrevious)(e.fontFamily),[j]=(0,g.useFontLoader)(t,e.fontFamily),P=e._editModeEnabled;(0,p.useFadeIn)(n);const D=j?e.fontFamily:I!==e.fontFamily?I:"Arial",L=(0,h.useColor)(e).fill,X=R(e,{fontFamily:D,color:L}),{width:Y,height:W}=function(e,t,n){return o.default.useMemo((()=>(0,m.detectSize)(e)),[e,t.width,n])}(X,e,j);o.default.useEffect((()=>{if(!j){return}if(!e.height){return void e.set({height:W})}const{textOverflow:n}=d.flags;if("change-font-size"!==n||a){"resize"===n&&(H&&e.height<W&&t.history.ignore((()=>{e.set({height:W})})),H||e.height===W||t.history.ignore((()=>{e.set({height:W})})))}else{const n=(e=>{let t=e.fontSize;for(let n=1;n<50;n++){const n=R(Object.assign(Object.assign({},e.toJSON()),{fontSize:t}),{fontFamily:e.fontFamily}),{height:i}=(0,m.detectSize)(n),r=e.height&&i>e.height,o=(0,m.isContentWrapping)({html:n});if(!r&&!o){break}t-=.5}return t})(e);n!==e.fontSize?t.history.ignore((()=>{e.set({fontSize:n})})):e.height!==W&&(H&&e.height<W?t.history.ignore((()=>{e.set({height:W})})):H||t.history.ignore((()=>{e.set({height:W})})))}}));const B=o.default.useRef(0),Q=o.default.useMemo((()=>{const e={lastArgs:null,lastResult:null};return async function(t){return e.lastArgs&&e.lastResult&&(n=e.lastArgs,i=t,JSON.stringify(n)===JSON.stringify(i))||(e.lastResult=await(0,m.htmlToCanvas)(t),e.lastArgs=Object.assign({},t)),e.lastResult;var n,i}}),[]);o.default.useEffect((()=>{a||P||(async()=>{B.current++;const n=B.current,i=(0,w.incrementLoader)(`text ${e.id}`);O(!0);let o=null;const a=T?5:1;for(let r=0;r<a;r++){const a=r>0?Q:m.htmlToCanvas;try{if(o=await a({skipCache:r>0,html:X,width:e.width||1,height:e.height||W||1,fontFamily:D,padding:A,pixelRatio:t._elementsPixelRatio,font:t.fonts.find((e=>e.fontFamily===D))||S.globalFonts.find((e=>e.fontFamily===D))}),n!==B.current){return void i()}if(!function(e){const t=e.getContext("2d").getImageData(0,0,e.width,e.height).data;for(let n=0;n<t.length;n+=4){if(0!==t[n+3]){return!0}}return!1}(o)&&T){await new Promise((e=>setTimeout(e,50*(r+1))));continue}}catch(l){(0,w.triggerLoadError)(`Error rendering rich text with id ${e.id}`);break}}o?(r(o),O(!1),u.default.Util.requestAnimFrame(i)):i()})()}),[X,a,W,P,D,e.height,t._elementsPixelRatio,j]);const[N,J]=F(y),[V]=F(a,100,!0),G=V||N;o.default.useEffect((()=>c.autorun((()=>{const t=n.current;(0,f.applyFilter)(t,e)}))),[i,G,e.shadowColor,e.shadowOffsetX,e.shadowOffsetY,e.shadowOpacity]);let U=0;"middle"===e.verticalAlign&&(U=(e.height-W)/2),"bottom"===e.verticalAlign&&(U=e.height-W);const K=(0,g.getLineHeight)({fontLoaded:j,fontFamily:e.fontFamily,fontSize:e.fontSize,lineHeight:e.lineHeight}),Z=(0,E.isTouchDevice)();return o.default.createElement(o.default.Fragment,null,o.default.createElement(l.Rect,{x:e.a.x,y:e.a.y,offsetX:e.backgroundPadding*(e.fontSize*K*.5),offsetY:e.backgroundPadding*(e.fontSize*K*.5),rotation:e.a.rotation,hideInExport:!e.showInExport,listening:!1,visible:e.backgroundEnabled,opacity:e.backgroundOpacity*e.a.opacity,fill:e.backgroundColor,width:e.a.width+e.backgroundPadding*(e.fontSize*K),height:e.a.height+e.backgroundPadding*(e.fontSize*K),cornerRadius:e.backgroundCornerRadius*(e.fontSize*K*.5)}),o.default.createElement(l.Rect,{ref:n,name:"element",x:e.a.x,y:e.a.y,listening:e.selectable,rotation:e.a.rotation,width:e.a.width,height:e.a.height,visible:!G,draggable:Z?e.draggable&&$:e.draggable,preventDefault:!Z||$,opacity:P?0:e.a.opacity,hideInExport:!e.showInExport,onMouseEnter:()=>{_(!0)},onMouseLeave:()=>{_(!1)},onDragMove:t=>{e.set({x:t.target.x(),y:t.target.y()})},onDragEnd:t=>{e.set({x:t.target.x(),y:t.target.y()})},id:e.id,onDblClick:()=>{e.contentEditable&&e.toggleEditMode(!0)},onDblTap:()=>{e.contentEditable&&e.toggleEditMode(!0)},onTransformStart:t=>{s(!0),C.current=e.height},onTransform:t=>{var n;const i=t.target,r=(null===(n=i.getStage())||void 0===n?void 0:n.findOne("Transformer")).getActiveAnchor(),o="middle-left"===r||"middle-right"===r,a="top-center"===r||"bottom-center"===r,l=i.scaleX();if(o){const t=i.scaleX(),n=Math.max(i.width()*t,e.fontSize);if(i.width(n),i.scaleX(1),d.flags.textVerticalResizeEnabled){const t=Math.max(W,C.current);e.set({height:t})}e.set({width:n,x:i.x(),y:i.y()})}else if(a){let n="resize"===d.flags.textOverflow?W:e.lineHeight*e.fontSize;const r=Math.max(n,t.target.height()*t.target.scaleY());i.scaleY(1),e.set({x:i.x(),y:i.y(),height:r,rotation:i.rotation()})}else{i.scaleX(1),i.scaleY(1),e.set({fontSize:e.fontSize*l,letterSpacing:e.letterSpacing,width:i.width()*l,x:i.x(),y:i.y(),rotation:i.rotation(),height:i.height()*l})}},onTransformEnd:t=>{s(!1),O(!0);const n=t.target.scaleX();t.target.scaleX(1),t.target.scaleY(1),e.set({fontSize:e.fontSize*n,width:t.target.width()*n,x:t.target.x(),y:t.target.y(),rotation:t.target.rotation(),shadowBlur:e.shadowBlur*n,shadowOffsetX:e.shadowOffsetX*n,shadowOffsetY:e.shadowOffsetY*n,strokeWidth:e.strokeWidth*n})}}),o.default.createElement(l.Image,{ref:n,image:i,x:e.a.x,y:e.a.y,offsetX:A,offsetY:A-U,listening:!1,rotation:e.rotation,width:e.a.width+2*A,height:e.a.height+2*A,visible:!G,opacity:P?0:e.a.opacity,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,hideInExport:!e.showInExport}),G&&o.default.createElement(l.Group,{x:e.a.x,y:e.a.y,rotation:e.rotation,offsetY:-U},o.default.createElement(b.Html,{divProps:{style:{pointerEvents:"none"}}},o.default.createElement(z,{dangerouslySetInnerHTML:{__html:X},style:{pointerEvents:"none"}}))),P&&o.default.createElement(l.Group,{x:e.a.x,y:e.a.y,rotation:e.rotation,offsetY:-U},o.default.createElement(b.Html,null,o.default.createElement(q,{html:X,element:e,onChange:t=>{const n=(0,k.getLimitedFontSize)({oldText:(0,v.removeTags)(e.text),newText:(0,v.removeTags)(t),element:e});e.set({text:t,fontSize:n})},onBlur:t=>{e.toggleEditMode(!1),J(!0)}}))),($||M)&&o.default.createElement(x.Highlighter,{element:e}))}));
+`;let z=["bold","color","font","italic","size","strike","underline","indent","list","direction"];exports.setQuillFormats=e=>{z=e},exports.createQuill=e=>new s.default(e,{toolbar:!1,keyboard:!1,clipboard:{matchVisual:!1},formats:z}),exports.setQuillContent=(e,t)=>{var n=e.clipboard.convert("<div class='ql-editor' style='outline: none;'>"+t+"<p><br></p></div>");e.setContents(n),e.history.clear()};const O=({html:e,onBlur:t,onChange:n,element:r})=>{const i=o.default.useRef(null);o.default.useEffect((()=>{if(!i.current){return}const e=(0,exports.createQuill)(i.current);return c.runInAction((()=>{exports.quillRef.editor.instance=e})),window.__polotnoQuill=e,e.on("text-change",(()=>{e.getSelection()&&c.runInAction((()=>{exports.quillRef.currentFormat=e.getFormat()})),setTimeout((()=>{var e;const t=null===(e=i.current)||void 0===e?void 0:e.childNodes[0];n(t.innerHTML)}),10)})),e.setSelection(0,0,"api"),e.on("selection-change",((t,n,r)=>{t&&c.runInAction((()=>{exports.quillRef.currentFormat=e.getFormat()}))})),i.current.childNodes[0].addEventListener("blur",(e=>{var n;if(null===(n=e.relatedTarget)||void 0===n?void 0:n.classList.contains("ql-clipboard")){return}const r=function(e){return!!e&&!!e.closest(".sketch-picker")}(e.relatedTarget);r||t()})),()=>{c.runInAction((()=>{exports.quillRef.editor.instance=null,exports.quillRef.currentFormat={}})),delete window.__polotnoQuill}}),[]),o.default.useEffect((()=>{var t;const n=exports.quillRef.editor.instance;if(!n){return}const o=n.getSelection();(null===(t=i.current)||void 0===t?void 0:t.childNodes[0].innerHTML)===r.text||((0,exports.setQuillContent)(n,e),o&&(n.setSelection(o.index,o.length),c.runInAction((()=>{exports.quillRef.currentFormat=n.getFormat()}))))}),[r.text]);const a={color:r.fill};return r.fill.indexOf("gradient")>=0&&(a.backgroundColor=r.fill,a.backgroundImage=r.fill,a.backgroundSize="100% 100%",a.backgroundRepeat="repeat",a.webkitBackgroundClip="text",a.MozBackgroundClip="text",a.WebkitTextFillColor="transparent",a.MozTextFillColor="transparent"),o.default.createElement(k,{ref:i,style:Object.assign(Object.assign({},a),{fontSize:r.fontSize,fontWeight:r.fontWeight,width:r.a.width,fontFamily:r.fontFamily,lineHeight:r.lineHeight,letterSpacing:r.letterSpacing*r.fontSize+"px",textAlign:r.align}),dir:(0,g.getDir)((0,w.removeTags)(r.text))})},q=(e,t=100,n=!1,r="")=>{const[i,a]=o.default.useState(e),l=o.default.useRef(null);return o.default.useEffect((()=>e===n?(l.current&&(clearTimeout(l.current),l.current=null),void a(n)):(l.current&&clearTimeout(l.current),l.current=setTimeout((()=>{a(e),l.current=null}),t),()=>{l.current&&clearTimeout(l.current)})),[e,t]),[i,a]};function F(e,{fontFamily:t="",color:n="black"}={}){let r=`color: ${n||e.fill}`;return e.fill.indexOf("gradient")>=0&&(r=`\n      background-color: ${n};\n      background-image: ${e.fill};\n      background-size: 100% 100%;\n      background-repeat: repeat;\n      -webkit-background-clip: text;\n      -moz-background-clip: text;\n      -webkit-text-fill-color: transparent;\n      -moz-text-fill-color: transparent;\n    `),`<div style="${["white-space: pre-wrap",`width: ${Math.round(e.width||100)}px`,r,`font-size: ${e.fontSize}px`,`font-family: '${t}'`,`text-align: ${e.align}`,e.textDecoration?`text-decoration: ${e.textDecoration}; text-decoration-color: ${n||e.fill}; text-decoration-layer: over`:"",e.lineHeight?`line-height: ${e.lineHeight}`:"",e.letterSpacing?`letter-spacing: ${e.letterSpacing*e.fontSize}px`:"",e.fontStyle?`font-style: ${e.fontStyle}`:"",e.fontWeight?`font-weight: ${e.fontWeight}`:"",e.strokeWidth?`-webkit-text-stroke: ${e.strokeWidth}px ${e.stroke}`:"",e.strokeWidth?"paint-order: stroke fill":""].filter(Boolean).join("; ")}" contentEditable dir="${(0,g.getDir)((0,w.removeTags)(e.text))}">${(0,w.sanitizeHtml)(e.text).replace(/\n/g,"</br>")}</div>`}const R=/^((?!chrome|android).)*safari/i.test(navigator.userAgent);exports.HTMLElement=(0,a.observer)((({element:e,store:t})=>{const n=o.default.useRef(null),[r,i]=o.default.useState(),[a,s]=o.default.useState(!1),[b,z]=o.default.useState(!0),[T,M]=o.default.useState(!1),_=o.default.useRef(e.height),C=t.selectedShapes.indexOf(e)>=0&&e.selectable,$=e.fontSize/3,{textVerticalResizeEnabled:A}=d.flags,H=(0,g.usePrevious)(e.fontFamily),[I]=(0,g.useFontLoader)(t,e.fontFamily),j=e._editModeEnabled;(0,p.useFadeIn)(n);const L=I?e.fontFamily:H!==e.fontFamily?H:"Arial",P=(0,h.useColor)(e).fill,D=F(e,{fontFamily:L,color:P}),{width:X,height:Y}=function(e,t,n){return o.default.useMemo((()=>(0,m.detectSize)(e)),[e,t.width,n])}(D,e,I);o.default.useEffect((()=>{if(!I){return}if(!e.height){return void e.set({height:Y})}const{textOverflow:n}=d.flags;if("change-font-size"!==n||a){"resize"===n&&(A&&e.height<Y&&t.history.ignore((()=>{e.set({height:Y})})),A||e.height===Y||t.history.ignore((()=>{e.set({height:Y})})))}else{const n=(e=>{let t=e.fontSize;for(let n=1;n<50;n++){const n=F(Object.assign(Object.assign({},e.toJSON()),{fontSize:t}),{fontFamily:e.fontFamily}),{height:r}=(0,m.detectSize)(n),i=e.height&&r>e.height,o=(0,m.isContentWrapping)({html:n});if(!i&&!o){break}t-=.5}return t})(e);n!==e.fontSize?t.history.ignore((()=>{e.set({fontSize:n})})):e.height!==Y&&(A&&e.height<Y?t.history.ignore((()=>{e.set({height:Y})})):A||t.history.ignore((()=>{e.set({height:Y})})))}}));const W=o.default.useRef(0),B=o.default.useMemo((()=>{const e={lastArgs:null,lastResult:null};return async function(t){return e.lastArgs&&e.lastResult&&(n=e.lastArgs,r=t,JSON.stringify(n)===JSON.stringify(r))||(e.lastResult=await(0,m.htmlToCanvas)(t),e.lastArgs=Object.assign({},t)),e.lastResult;var n,r}}),[]);o.default.useEffect((()=>{a||j||(async()=>{W.current++;const n=W.current,r=(0,y.incrementLoader)(`text ${e.id}`);z(!0);let o=null;const a=R?5:1;for(let i=0;i<a;i++){const a=i>0?B:m.htmlToCanvas;try{if(o=await a({skipCache:i>0,html:D,width:e.width||1,height:e.height||Y||1,fontFamily:L,padding:$,pixelRatio:t._elementsPixelRatio,font:t.fonts.find((e=>e.fontFamily===L))||v.globalFonts.find((e=>e.fontFamily===L))}),n!==W.current){return void r()}if(!function(e){const t=e.getContext("2d").getImageData(0,0,e.width,e.height).data;for(let n=0;n<t.length;n+=4){if(0!==t[n+3]){return!0}}return!1}(o)&&R){await new Promise((e=>setTimeout(e,50*(i+1))));continue}}catch(l){(0,y.triggerLoadError)(`Error rendering rich text with id ${e.id}`);break}}o?(i(o),z(!1),u.default.Util.requestAnimFrame(r)):r()})()}),[D,a,Y,j,L,e.height,t._elementsPixelRatio,I]);const[Q,N]=q(b),[J]=q(a,100,!0),V=J||Q;o.default.useEffect((()=>c.autorun((()=>{const t=n.current;(0,f.applyFilter)(t,e)}))),[r,V,e.shadowColor,e.shadowOffsetX,e.shadowOffsetY,e.shadowOpacity]);let G=0;"middle"===e.verticalAlign&&(G=(e.height-Y)/2),"bottom"===e.verticalAlign&&(G=e.height-Y);const U=(0,g.getLineHeight)({fontLoaded:I,fontFamily:e.fontFamily,fontSize:e.fontSize,lineHeight:e.lineHeight}),K=(0,S.isTouchDevice)();return o.default.createElement(o.default.Fragment,null,o.default.createElement(l.Rect,{x:e.a.x,y:e.a.y,offsetX:e.backgroundPadding*(e.fontSize*U*.5),offsetY:e.backgroundPadding*(e.fontSize*U*.5),rotation:e.a.rotation,hideInExport:!e.showInExport,listening:!1,visible:e.backgroundEnabled,opacity:e.backgroundOpacity*e.a.opacity,fill:e.backgroundColor,width:e.a.width+e.backgroundPadding*(e.fontSize*U),height:e.a.height+e.backgroundPadding*(e.fontSize*U),cornerRadius:e.backgroundCornerRadius*(e.fontSize*U*.5)}),o.default.createElement(l.Rect,{ref:n,name:"element",x:e.a.x,y:e.a.y,listening:e.selectable,rotation:e.a.rotation,width:e.a.width,height:e.a.height,visible:!V,draggable:K?e.draggable&&C:e.draggable,preventDefault:!K||C,opacity:j?0:e.a.opacity,hideInExport:!e.showInExport,onMouseEnter,onMouseLeave,onDragMove:t=>{e.set({x:t.target.x(),y:t.target.y()})},onDragEnd:t=>{e.set({x:t.target.x(),y:t.target.y()})},id:e.id,onDblClick:()=>{e.contentEditable&&e.toggleEditMode(!0)},onDblTap:()=>{e.contentEditable&&e.toggleEditMode(!0)},onTransformStart:t=>{s(!0),_.current=e.height},onTransform:t=>{var n;const r=t.target,i=(null===(n=r.getStage())||void 0===n?void 0:n.findOne("Transformer")).getActiveAnchor(),o="middle-left"===i||"middle-right"===i,a="top-center"===i||"bottom-center"===i,l=r.scaleX();if(o){const t=r.scaleX(),n=Math.max(r.width()*t,e.fontSize);if(r.width(n),r.scaleX(1),d.flags.textVerticalResizeEnabled){const t=Math.max(Y,_.current);e.set({height:t})}e.set({width:n,x:r.x(),y:r.y()})}else if(a){let n="resize"===d.flags.textOverflow?Y:e.lineHeight*e.fontSize;const i=Math.max(n,t.target.height()*t.target.scaleY());r.scaleY(1),e.set({x:r.x(),y:r.y(),height:i,rotation:r.rotation()})}else{r.scaleX(1),r.scaleY(1),e.set({fontSize:e.fontSize*l,letterSpacing:e.letterSpacing,width:r.width()*l,x:r.x(),y:r.y(),rotation:r.rotation(),height:r.height()*l})}},onTransformEnd:t=>{s(!1),z(!0);const n=t.target.scaleX();t.target.scaleX(1),t.target.scaleY(1),e.set({fontSize:e.fontSize*n,width:t.target.width()*n,x:t.target.x(),y:t.target.y(),rotation:t.target.rotation(),shadowBlur:e.shadowBlur*n,shadowOffsetX:e.shadowOffsetX*n,shadowOffsetY:e.shadowOffsetY*n,strokeWidth:e.strokeWidth*n})}}),o.default.createElement(l.Image,{ref:n,image:r,x:e.a.x,y:e.a.y,offsetX:$,offsetY:$-G,listening:!1,rotation:e.rotation,width:e.a.width+2*$,height:e.a.height+2*$,visible:!V,opacity:j?0:e.a.opacity,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,hideInExport:!e.showInExport}),V&&o.default.createElement(l.Group,{x:e.a.x,y:e.a.y,rotation:e.rotation,offsetY:-G},o.default.createElement(x.Html,{divProps:{style:{pointerEvents:"none"}}},o.default.createElement(k,{dangerouslySetInnerHTML:{__html:D},style:{pointerEvents:"none"}}))),j&&o.default.createElement(l.Group,{x:e.a.x,y:e.a.y,rotation:e.rotation,offsetY:-G},o.default.createElement(x.Html,null,o.default.createElement(O,{html:D,element:e,onChange:t=>{const n=(0,E.getLimitedFontSize)({oldText:(0,w.removeTags)(e.text),newText:(0,w.removeTags)(t),element:e});e.set({text:t,fontSize:n})},onBlur:t=>{e.toggleEditMode(!1),N(!0)}}))))}));

package/canvas/image-element.js

@@ -1 +1 @@
-var e,t=this&&this.__createBinding||(Object.create?function(e,t,r,a){void 0===a&&(a=r);var i=Object.getOwnPropertyDescriptor(t,r);i&&!("get"in i?!t.__esModule:i.writable||i.configurable)||(i={enumerable:!0,get:function(){return t[r]}}),Object.defineProperty(e,a,i)}:function(e,t,r,a){void 0===a&&(a=r),e[a]=t[r]}),r=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),a=this&&this.__importStar||(e=function(t){return e=Object.getOwnPropertyNames||function(e){var t=[];for(var r in e){Object.prototype.hasOwnProperty.call(e,r)&&(t[t.length]=r)}return t},e(t)},function(a){if(a&&a.__esModule){return a}var i={};if(null!=a){for(var o=e(a),n=0;n<o.length;n++){"default"!==o[n]&&t(i,a,o[n])}}return r(i,a),i}),i=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.ImageElement=exports.useImageLoader=exports.setImageLoaderHook=exports.useCornerRadiusAndCrop=exports.setOuterImageCropTransformerStyle=exports.setInnerImageCropTransformerStyle=exports.useSizeFixer=void 0;const o=i(require("react")),n=require("mobx-react-lite"),h=require("mobx"),d=require("react-konva"),l=i(require("use-image")),s=i(require("konva")),c=require("react-konva-utils"),u=require("./highlighter"),g=require("../utils/loader"),f=a(require("../utils/svg")),p=require("../utils/flags"),m=require("../utils/canvas"),w=require("./apply-filters"),x=require("./use-fadein"),y=require("../utils/screen");function M(){return document.createElement("canvas")}function v(e,t){return{x:(e.x+t.x)/2,y:(e.y+t.y)/2}}exports.useSizeFixer=e=>{const[t,r]=o.default.useState(e);return o.default.useEffect((()=>{(async()=>{const a=await async function(e){if(!(e.indexOf("data:image/svg+xml")>=0||e.indexOf(".svg")>=0)){return e}const t=await f.urlToString(e),r=f.fixSize(t);return f.svgToURL(r)}(e);a!==t&&r(a)})()}),[e]),t};const b={boundBoxFunc:(e,t)=>t.width<5||t.height<5?e:t,enabledAnchors:["top-left","top-right","bottom-left","bottom-right"],keepRatio:!1,rotateEnabled:!1,anchorFill:"rgb(240, 240, 240)",anchorStrokeWidth:2,borderStrokeWidth:2};exports.setInnerImageCropTransformerStyle=e=>{Object.assign(b,e)};const E={boundBoxFunc:(e,t)=>t.width<5||t.height<5?e:t,anchorSize:20,enabledAnchors:["top-left","top-right","bottom-left","bottom-right"],rotateEnabled:!1,borderEnabled:!1,anchorCornerRadius:10,anchorStrokeWidth:2,borderStrokeWidth:2};exports.setOuterImageCropTransformerStyle=e=>{Object.assign(E,e)};const S=(e,t,r)=>Math.max(t,Math.min(r,e));exports.useCornerRadiusAndCrop=(e,t,r,a,i=0,n=!1,h=!0)=>{const d=Math.floor(S(e.a.width*a,1,1e4)),l=Math.floor(S(e.a.height*a,1,1e4)),c=Math.min(i*a,d/2,l/2),u=Math.max(e.a.width/r.width,e.a.height/r.height)*a,g=e.page._exportingOrRendering&&p.flags.imageDownScalingEnabled&&u<1&&!n,f=0===r.x&&0===r.y&&r.width===(null==t?void 0:t.width)&&r.height===(null==t?void 0:t.height),w=o.default.useMemo((()=>{if(t&&t.width&&t.height){return f&&0===c&&!g?void 0:M()}}),[t,c,g,f]);return o.default.useLayoutEffect((()=>{if(!w||!t){return}(0,m.trySetCanvasSize)(w,d,l);const e=w.getContext("2d");if(!e){return}c&&(e.beginPath(),e.moveTo(c,0),e.lineTo(d-c,0),e.arc(d-c,c,c,3*Math.PI/2,0,!1),e.lineTo(d,l-c),e.arc(d-c,l-c,c,0,Math.PI/2,!1),e.lineTo(c,l),e.arc(c,l-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 a=g?function(e,t){var r,a;const i=M();i.width=e.width,i.height=e.height;const o=Math.max(1,Math.floor(i.width*t)),n=Math.max(1,Math.floor(i.height*t));null===(r=i.getContext("2d"))||void 0===r||r.drawImage(e,0,0,i.width,i.height);const h=function(e,t,r,a,i,o,n){for(var h=new ImageData(t,r),d=new Int32Array(e.data.buffer),l=e.width,s=new Int32Array(h.data.buffer),c=h.width,u=t/o,g=r/n,f=Math.round(1/u),p=Math.round(1/g),m=f*p,w=0;w<h.height;w++){for(var x=0;x<c;x++){for(var y=0+Math.round(x/u)+(0+Math.round(w/g))*l,M=0,v=0,b=0,E=0,S=0;S<p;S++){for(var I=0;I<f;I++){var O=d[y+I+S*l];M+=O<<24>>>24,v+=O<<16>>>24,b+=O<<8>>>24,E+=O>>>24}}M=Math.round(M/m),v=Math.round(v/m),b=Math.round(b/m),E=Math.round(E/m),s[x+w*c]=E<<24|b<<16|v<<8|M}}return h}(i.getContext("2d").getImageData(0,0,i.width,i.height),o,n,0,0,i.width,i.height);return i.width=o,i.height=n,null===(a=i.getContext("2d"))||void 0===a||a.putImageData(h,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(a,i.x,i.y,i.width,i.height,0,0,w.width,w.height)}),[w,e.a.width,e.a.height,r.x,r.y,r.width,r.height,i,a,n,e.page._exportingOrRendering,g]),o.default.useEffect((()=>()=>{w&&"CANVAS"===w.nodeName&&s.default.Util.releaseCanvas(w)}),[w]),w||t};const I=M(),O=(0,n.observer)((({element:e})=>{const t=Math.min(30,e.a.width/4,e.a.height/4),r=o.default.useRef(null);return o.default.useEffect((()=>{const e=r.current;if(!e){return}const t=new s.default.Animation((t=>{e.rotate(((null==t?void 0:t.timeDiff)||0)/2)}),e.getLayer());return t.start(),()=>{t.stop()}})),o.default.createElement(d.Group,{x:e.x,y:e.y,rotation:e.rotation,listening:!1,opacity:e.a.opacity,hideInExport:!e.showInExport},o.default.createElement(d.Rect,{width:e.a.width,height:e.a.height,fill:"rgba(124, 173, 212, 0.8)"}),o.default.createElement(d.Arc,{ref:r,x:e.a.width/2,y:e.a.height/2,fill:"white",outerRadius:Math.abs(t),innerRadius:Math.max(1,t-5),angle:270}))})),C=(0,n.observer)((({element:e})=>{const t=Math.max(10,Math.min(30,e.a.width/25));return o.default.createElement(d.Group,{x:e.x,y:e.y,rotation:e.rotation,listening:!1,opacity:e.a.opacity,hideInExport:!e.showInExport},o.default.createElement(d.Rect,{width:e.a.width,height:e.a.height,fill:"rgba(223, 102, 102, 0.8)"}),o.default.createElement(d.Text,{text:"Can not load the image...",fontSize:t,width:e.a.width,height:e.a.height,align:"center",fill:"white",verticalAlign:"middle",padding:5}))}));let R=l.default;exports.setImageLoaderHook=e=>{R=e},exports.useImageLoader=(e,t="",r="")=>{const a=o.default.useRef(),i=()=>{var e;null===(e=a.current)||void 0===e||e.call(a),a.current=void 0};o.default.useEffect((()=>i),[]),o.default.useLayoutEffect((()=>{const o=t.slice(0,200),n=`image with id ${r} url: ${o}`;"loading"!==e||a.current||(a.current=(0,g.incrementLoader)(n)),"loading"!==e&&i(),"failed"===e&&(0,g.triggerLoadError)(n)}),[e])},exports.ImageElement=(0,n.observer)((({element:e,store:t})=>{var r;const[a,i]=o.default.useState(!1),n=o.default.useRef(null),l=o.default.useRef(null),[g,p]=o.default.useState(!1),S=t.selectedShapes.indexOf(e)>=0&&e.selectable,[_,T]=(e=>{const[t,r]=o.default.useReducer((e=>e+1),0),a=o.default.useRef("loading"),i=o.default.useRef(e.src),n=o.default.useRef(e.src);return n.current!==e.src&&(n.current=e.src,a.current="loading"),o.default.useEffect((()=>{if("svg"!==e.type){return}if(!e.src){return}let t=!1;return(async()=>{a.current="loading",r();const o=await f.urlToString(e.src),n=f.fixSize(o),h=f.replaceColors(n,e.colorsReplace);t||(i.current=h,a.current="loaded",r())})(),()=>{t=!0}}),[e.src,JSON.stringify(e.colorsReplace)]),"svg"!==e.type?[e.src,"loaded"]:[i.current,a.current]})(e),[X,Y]=R(_,"anonymous"),k="svg"!==e.type||"loaded"===T?Y:"loading";(0,exports.useImageLoader)(k,e.src,e.id);const D=e.page._exportingOrRendering?1:Math.max(1,t.scale),L=t._elementsPixelRatio*D,W=(({image:e,status:t,type:r})=>{const a=o.default.useRef();return o.default.useEffect((()=>{a.current=e||a.current}),[e]),"failed"!==t||"failed"!==t&&"svg"===r?a.current:void 0})({image:X,status:Y,type:e.type}),A=((e,t,r)=>{const a=o.default.useMemo((()=>{var a,i;const{flipX:o,flipY:n}=e,h="svg"===e.type||e.src.indexOf("data:image/svg+xml")>=0||e.src.indexOf(".svg")>=0,d=navigator.userAgent.toLowerCase().indexOf("firefox")>-1,l=(/^((?!chrome|android).)*safari/i.test(navigator.userAgent)||d)&&h||e.maskSrc;if(!o&&!n&&!l){return t}if(!t||!t.width||!t.height){return null}const s=M();let c=1;"svg"===e.type&&(c=Math.max(e.a.width/t.width*r,e.a.height/t.height*r)),(0,m.trySetCanvasSize)(s,Math.max(t.width*c,1),Math.max(t.height*c,1));let u=o?-s.width:0,g=n?-s.height:0;return null===(a=s.getContext("2d"))||void 0===a||a.scale(o?-1:1,n?-1:1),null===(i=s.getContext("2d"))||void 0===i||i.drawImage(t,u,g,s.width,s.height),s}),[e.maskSrc,e.flipX,e.flipY,t,e.a.width,e.a.height,r]);return o.default.useEffect((()=>()=>{a&&"CANVAS"===a.nodeName&&s.default.Util.releaseCanvas(a)}),[a]),a})(e,X||W,L),P=((e,t)=>{const[r,a]=R(e.maskSrc,"anonymous"),i=e.maskSrc?a:"loaded";return(0,exports.useImageLoader)(i,e.maskSrc||"",e.id),o.default.useMemo((()=>{if(!r){return t}if(!t||!t.width||!t.height){return t}const a=M();a.width=Math.max(t.width,1),a.height=Math.max(t.height,1);const i=a.getContext("2d");if(!i){return t}i.drawImage(t,0,0),i.globalCompositeOperation="source-in";const o=function(e,t){const r=t.width/t.height;let a,i;return r>=e.width/e.height?(a=e.width,i=e.width/r):(a=e.height*r,i=e.height),{x:(e.width-a)/2,y:(e.height-i)/2,width:a,height:i}}(r,e);return i.drawImage(r,o.x,o.y,o.width,o.height,0,0,t.width,t.height),a}),[t,r,e.a.width,e.a.height])})(e,A)||I;let{cropX:z,cropY:q,cropWidth:H,cropHeight:j}=e.a;"loaded"!==Y&&(z=q=0,H=j=1);const F=P.width*H,B=P.height*j,N=e.a.width/e.a.height;let U,G;const V=F/B,$="svg"===e.type;$?(U=F,G=B):N>=V?(U=F,G=F/N):(U=B*N,G=B);const J={x:P.width*z,y:P.height*q,width:U,height:G},K=null!==(r=e.cornerRadius)&&void 0!==r?r:0,Q=e.page._exportingOrRendering?1:Math.min(2,t.scale),Z=t._elementsPixelRatio*Q;let ee=((e,t,r,a)=>{const i=(0,exports.useSizeFixer)(e.clipSrc||""),[n,h]=R(i,"anonymous"),d=e.clipSrc?h:"loaded";(0,exports.useImageLoader)(d,e.clipSrc,e.id);const l=o.default.useMemo((()=>{if(t&&n){return M()}}),[t,n]);return o.default.useLayoutEffect((()=>{var a;if(!n){return}if(!t||!t.width||!t.height){return}if(!n||!n.width||!n.height){return}if(!l){return}const i=M(),o=Math.max(e.a.width/n.width*r,e.a.height/n.height*r);i.width=n.width*o,i.height=n.height*o,null===(a=i.getContext("2d"))||void 0===a||a.drawImage(n,0,0,i.width,i.height),l.width=Math.max(t.width,1),l.height=Math.max(t.height,1);const h=l.getContext("2d");h&&(h.save(),h.drawImage(i,0,0,t.width,t.height),s.default.Util.releaseCanvas(i),h.globalCompositeOperation="source-in",h.drawImage(t,0,0,l.width,l.height),h.restore())}),[l,t,n,e.a.width,e.a.height,r,...a]),e.clipSrc&&n?l:t})(e,(0,exports.useCornerRadiusAndCrop)(e,P,J,Z,K,a||e._cropModeEnabled||"svg"===e.type,!0),Z,[J,K,Z]);const te=Math.max(e.a.width/U,e.a.height/G);o.default.useEffect((()=>{var t;if(!e._cropModeEnabled){return}const r=null===(t=n.current)||void 0===t?void 0:t.getStage();function a(t){e._cropModeEnabled&&t.target!==l.current&&e.toggleCropMode(!1)}function i(t){e._cropModeEnabled&&t.target.parentNode!==r.content&&e.toggleCropMode(!1)}return document.body.addEventListener("click",i),null==r||r.on("click",a),null==r||r.on("tap",a),()=>{document.body.removeEventListener("click",i),document.body.removeEventListener("touchstart",i),null==r||r.off("click",a),null==r||r.off("click",a)}}),[e._cropModeEnabled]),o.default.useLayoutEffect((()=>{if(!a&&!e._cropModeEnabled){return(0,w.applyFilter)(n.current,e),(0,h.autorun)((()=>{(0,w.applyFilter)(n.current,e)}),{delay:100})}}),[ee,e.page._exportingOrRendering,a,H,j,e._cropModeEnabled]),o.default.useLayoutEffect((()=>{var t;a||e._cropModeEnabled?null===(t=n.current)||void 0===t||t.clearCache():(0,w.applyFilter)(n.current,e)}),[a,e.a.width,e.a.height,e._cropModeEnabled]),o.default.useEffect((()=>{(0,w.applyFilter)(n.current,e)}),[e.shadowEnabled,e.shadowBlur,e.cornerRadius,e.shadowColor,e.shadowOffsetX,e.shadowOffsetY,e.shadowOpacity]);const re=o.default.useRef(null),ae=o.default.useRef(null),ie=o.default.useRef(null);o.default.useLayoutEffect((()=>{e._cropModeEnabled&&(ae.current.nodes([re.current]),ie.current.nodes([l.current]))}),[e._cropModeEnabled]);var oe=o.default.useRef(null),ne=o.default.useRef(0),he=o.default.useRef(!1);const de=t=>{var r;(null===(r=t.evt.touches)||void 0===r?void 0:r.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 a=t.target.width()*t.target.scaleX(),i=t.target.height()*t.target.scaleY(),o=Math.min(1,U/a),n=Math.min(1,G/i),h=1-o,d=Math.min(h,Math.max(0,Math.round(-t.target.x())/a)),l=1-n,s=Math.min(l,Math.max(0,Math.round(-t.target.y())/i));t.target.setAttrs({x:-d*P.width,y:-s*P.height,scaleX:1,scaleY:1}),e.set({cropX:d,cropY:s,cropWidth:o,cropHeight:n})},le=()=>{"svg"!==e.type&&e.contentEditable&&setTimeout((()=>{e.toggleCropMode(!0)}))},se="svg"===e.type&&W,ce="loading"===Y&&!se,ue="failed"===Y,ge=!ce&&!ue,fe=o.default.useRef({cropX:0,cropY:0,cropWidth:0,cropHeight:0}),pe=ge?e.a.opacity:0;(0,x.useFadeIn)(n,pe);const me=e.selectable||"admin"===t.role,we=(0,y.isTouchDevice)();return o.default.createElement(o.default.Fragment,null,ce&&o.default.createElement(O,{element:e}),ue&&o.default.createElement(C,{element:e}),o.default.createElement(d.Image,{ref:n,name:"element",id:e.id,image:ee,x:e.a.x,y:e.a.y,width:e.a.width||1,height:e.a.height||1,rotation:e.a.rotation,opacity:pe,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,customCrop:J,listening:me,draggable:we?e.draggable&&S:e.draggable,preventDefault:!we||S,hideInExport:!e.showInExport,onMouseEnter:()=>{p(!0)},onMouseLeave:()=>{p(!1)},onDragMove:t=>{e.set({x:t.target.x(),y:t.target.y()})},onDragEnd:t=>{e.set({x:t.target.x(),y:t.target.y()})},onDblClick:le,onDblTap:le,onTransformStart:()=>{i(!0),fe.current={cropX:e.cropX,cropY:e.cropY,cropWidth:e.cropWidth,cropHeight:e.cropHeight}},onTransform:t=>{var r;const a=t.currentTarget,i=Math.abs(a.scaleX()-1)<1e-7?1:a.scaleX(),o=Math.abs(a.scaleY()-1)<1e-7?1:a.scaleY();a.scaleX(1),a.scaleY(1);const n=null===(r=t.target.getStage())||void 0===r?void 0:r.findOne("Transformer"),h=1-U/P.width,d=Math.min(h,Math.max(0,e.cropX)),l=1-G/P.height,s=Math.min(l,Math.max(0,e.cropY)),c=n.getActiveAnchor(),u=!(c.indexOf("middle")>=0||c.indexOf("center")>=0),g=!u&&i<1&&fe.current.cropHeight>G/P.height;let f=u?e.cropWidth:e.cropWidth*i;g&&(f=e.cropWidth);const p=!u&&o<1&&fe.current.cropWidth>U/P.width;let m=u?e.cropHeight:e.cropHeight*o;p&&(m=e.cropHeight),$&&(f=e.cropWidth,m=e.cropHeight),e.set({cropX:d,cropY:s,x:a.x(),y:a.y(),width:a.width()*i,height:a.height()*o,rotation:t.target.rotation(),cropWidth:Math.min(f,1-d),cropHeight:Math.min(m,1-s)})},onTransformEnd:t=>{const r=t.currentTarget;e.set({width:r.width(),height:r.height(),x:r.x(),y:r.y(),rotation:t.target.rotation(),cropWidth:U/P.width,cropHeight:G/P.height}),i(!1)}}),o.default.createElement(d.Rect,{x:e.x,y:e.y,width:Math.max(e.a.width-e.borderSize,0),height:Math.max(e.a.height-e.borderSize,0),opacity:pe,offsetX:-e.borderSize/2,offsetY:-e.borderSize/2,stroke:e.borderColor,strokeWidth:e.borderSize,listening:!1,visible:!!e.borderSize,rotation:e.rotation,cornerRadius:Math.max(0,K-e.borderSize),hideInExport:!e.showInExport}),e._cropModeEnabled&&o.default.createElement(c.Portal,{selector:".page-abs-container",enabled:!0},o.default.createElement(d.Rect,{x:-window.innerWidth/t.scale,y:-window.innerWidth/t.scale,width:window.innerWidth/t.scale*3,height:window.innerWidth/t.scale*3,fill:"rgba(0,0,0,0.3)"}),o.default.createElement(d.Image,{listening:!1,image:ee,x:e.x,y:e.y,width:e.a.width,height:e.a.height,rotation:e.rotation,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur}),o.default.createElement(d.Group,{x:e.x,y:e.y,rotation:e.rotation,scaleX:te,scaleY:te},o.default.createElement(d.Image,{image:P,ref:l,opacity:.4,draggable:!0,x:-e.cropX*P.width,y:-e.cropY*P.height,onDragMove:de,onTransform:de,onTouchMove:e=>{e.evt.preventDefault();const t=e.target.getStage().getPointersPositions();var r=t[0],a=t[1];const i=e.target;if(r&&!a&&!i.isDragging()&&he.current&&(i.startDrag(),he.current=!1),r&&a){s.default.hitOnDragEnabled=!0,i.isDragging()&&(he.current=!0,i.stopDrag());const t=e.target.getAbsoluteTransform().copy();t.invert();var o={x:r.x,y:r.y},n={x:a.x,y:a.y};if(!oe.current){return void(oe.current=v(o,n))}var h=v(o,n),d=function(e,t){return Math.sqrt(Math.pow(t.x-e.x,2)+Math.pow(t.y-e.y,2))}(o,n);ne.current||(ne.current=d);const p=i.position();var l={x:h.x-p.x,y:h.y-p.y},c=d/ne.current;i.scaleX(c),i.scaleY(c);const m=t.point(h),w=t.point(oe.current);var u=m.x-w.x,g=m.y-w.y,f={x:Math.min(0,h.x-l.x*c+u),y:Math.min(0,h.y-l.y*c+g)};i.position(f),ne.current=d,oe.current=h,de(e)}},onTouchEnd:e=>{ne.current=0,oe.current=null,s.default.hitOnDragEnabled=!1}}),o.default.createElement(d.Transformer,Object.assign({ref:ie},E)),o.default.createElement(d.Rect,{width:U,height:G,ref:re,listening:!1,onTransform:t=>{t.target.x()<-e.cropX*P.width-1e-9&&(t.target.x(-e.cropX*P.width),t.target.scaleX(1)),t.target.y()<-e.cropY*P.height-1e-9&&(t.target.y(-e.cropY*P.height),t.target.scaleY(1));const r=Math.min(1,Math.max(0,e.cropX+t.target.x()/P.width)),a=Math.min(1,Math.max(0,t.target.y()/P.height+e.cropY)),i=t.target.width()*t.target.scaleX(),o=t.target.height()*t.target.scaleY(),n=Math.min(1-r,i/P.width),h=Math.min(1-a,o/P.height),d=t.target.getAbsolutePosition(t.target.getParent().getParent());t.target.scale({x:1,y:1}),t.target.position({x:0,y:0}),e.set({x:d.x,y:d.y,cropX:r,cropY:a,cropWidth:n,cropHeight:h,width:Math.min(i*te,P.width*(1-r)*te),height:Math.min(o*te,P.height*(1-a)*te)})}}),o.default.createElement(d.Transformer,Object.assign({ref:ae},b,{visible:e.resizable})))),(g||S)&&o.default.createElement(u.Highlighter,{element:e}))}));
+var e,t=this&&this.__createBinding||(Object.create?function(e,t,r,a){void 0===a&&(a=r);var i=Object.getOwnPropertyDescriptor(t,r);i&&!("get"in i?!t.__esModule:i.writable||i.configurable)||(i={enumerable:!0,get:function(){return t[r]}}),Object.defineProperty(e,a,i)}:function(e,t,r,a){void 0===a&&(a=r),e[a]=t[r]}),r=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),a=this&&this.__importStar||(e=function(t){return e=Object.getOwnPropertyNames||function(e){var t=[];for(var r in e){Object.prototype.hasOwnProperty.call(e,r)&&(t[t.length]=r)}return t},e(t)},function(a){if(a&&a.__esModule){return a}var i={};if(null!=a){for(var o=e(a),n=0;n<o.length;n++){"default"!==o[n]&&t(i,a,o[n])}}return r(i,a),i}),i=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.ImageElement=exports.useImageLoader=exports.setImageLoaderHook=exports.useCornerRadiusAndCrop=exports.setOuterImageCropTransformerStyle=exports.setInnerImageCropTransformerStyle=exports.useSizeFixer=void 0;const o=i(require("react")),n=require("mobx-react-lite"),h=require("mobx"),d=require("react-konva"),l=i(require("use-image")),s=i(require("konva")),c=require("react-konva-utils"),u=require("../utils/loader"),g=a(require("../utils/svg")),f=require("../utils/flags"),p=require("../utils/canvas"),m=require("./apply-filters"),w=require("./use-fadein"),x=require("../utils/screen");function y(){return document.createElement("canvas")}function M(e,t){return{x:(e.x+t.x)/2,y:(e.y+t.y)/2}}exports.useSizeFixer=e=>{const[t,r]=o.default.useState(e);return o.default.useEffect((()=>{(async()=>{const a=await async function(e){if(!(e.indexOf("data:image/svg+xml")>=0||e.indexOf(".svg")>=0)){return e}const t=await g.urlToString(e),r=g.fixSize(t);return g.svgToURL(r)}(e);a!==t&&r(a)})()}),[e]),t};const v={boundBoxFunc:(e,t)=>t.width<5||t.height<5?e:t,enabledAnchors:["top-left","top-right","bottom-left","bottom-right"],keepRatio:!1,rotateEnabled:!1,anchorFill:"rgb(240, 240, 240)",anchorStrokeWidth:2,borderStrokeWidth:2};exports.setInnerImageCropTransformerStyle=e=>{Object.assign(v,e)};const b={boundBoxFunc:(e,t)=>t.width<5||t.height<5?e:t,anchorSize:20,enabledAnchors:["top-left","top-right","bottom-left","bottom-right"],rotateEnabled:!1,borderEnabled:!1,anchorCornerRadius:10,anchorStrokeWidth:2,borderStrokeWidth:2};exports.setOuterImageCropTransformerStyle=e=>{Object.assign(b,e)};const E=(e,t,r)=>Math.max(t,Math.min(r,e));exports.useCornerRadiusAndCrop=(e,t,r,a,i=0,n=!1,h=!0)=>{const d=Math.floor(E(e.a.width*a,1,1e4)),l=Math.floor(E(e.a.height*a,1,1e4)),c=Math.min(i*a,d/2,l/2),u=Math.max(e.a.width/r.width,e.a.height/r.height)*a,g=e.page._exportingOrRendering&&f.flags.imageDownScalingEnabled&&u<1&&!n,m=0===r.x&&0===r.y&&r.width===(null==t?void 0:t.width)&&r.height===(null==t?void 0:t.height),w=o.default.useMemo((()=>{if(t&&t.width&&t.height){return m&&0===c&&!g?void 0:y()}}),[t,c,g,m]);return o.default.useLayoutEffect((()=>{if(!w||!t){return}(0,p.trySetCanvasSize)(w,d,l);const e=w.getContext("2d");if(!e){return}c&&(e.beginPath(),e.moveTo(c,0),e.lineTo(d-c,0),e.arc(d-c,c,c,3*Math.PI/2,0,!1),e.lineTo(d,l-c),e.arc(d-c,l-c,c,0,Math.PI/2,!1),e.lineTo(c,l),e.arc(c,l-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 a=g?function(e,t){var r,a;const i=y();i.width=e.width,i.height=e.height;const o=Math.max(1,Math.floor(i.width*t)),n=Math.max(1,Math.floor(i.height*t));null===(r=i.getContext("2d"))||void 0===r||r.drawImage(e,0,0,i.width,i.height);const h=function(e,t,r,a,i,o,n){for(var h=new ImageData(t,r),d=new Int32Array(e.data.buffer),l=e.width,s=new Int32Array(h.data.buffer),c=h.width,u=t/o,g=r/n,f=Math.round(1/u),p=Math.round(1/g),m=f*p,w=0;w<h.height;w++){for(var x=0;x<c;x++){for(var y=0+Math.round(x/u)+(0+Math.round(w/g))*l,M=0,v=0,b=0,E=0,S=0;S<p;S++){for(var I=0;I<f;I++){var O=d[y+I+S*l];M+=O<<24>>>24,v+=O<<16>>>24,b+=O<<8>>>24,E+=O>>>24}}M=Math.round(M/m),v=Math.round(v/m),b=Math.round(b/m),E=Math.round(E/m),s[x+w*c]=E<<24|b<<16|v<<8|M}}return h}(i.getContext("2d").getImageData(0,0,i.width,i.height),o,n,0,0,i.width,i.height);return i.width=o,i.height=n,null===(a=i.getContext("2d"))||void 0===a||a.putImageData(h,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(a,i.x,i.y,i.width,i.height,0,0,w.width,w.height)}),[w,e.a.width,e.a.height,r.x,r.y,r.width,r.height,i,a,n,e.page._exportingOrRendering,g]),o.default.useEffect((()=>()=>{w&&"CANVAS"===w.nodeName&&s.default.Util.releaseCanvas(w)}),[w]),w||t};const S=y(),I=(0,n.observer)((({element:e})=>{const t=Math.min(30,e.a.width/4,e.a.height/4),r=o.default.useRef(null);return o.default.useEffect((()=>{const e=r.current;if(!e){return}const t=new s.default.Animation((t=>{e.rotate(((null==t?void 0:t.timeDiff)||0)/2)}),e.getLayer());return t.start(),()=>{t.stop()}})),o.default.createElement(d.Group,{x:e.x,y:e.y,rotation:e.rotation,listening:!1,opacity:e.a.opacity,hideInExport:!e.showInExport},o.default.createElement(d.Rect,{width:e.a.width,height:e.a.height,fill:"rgba(124, 173, 212, 0.8)"}),o.default.createElement(d.Arc,{ref:r,x:e.a.width/2,y:e.a.height/2,fill:"white",outerRadius:Math.abs(t),innerRadius:Math.max(1,t-5),angle:270}))})),O=(0,n.observer)((({element:e})=>{const t=Math.max(10,Math.min(30,e.a.width/25));return o.default.createElement(d.Group,{x:e.x,y:e.y,rotation:e.rotation,listening:!1,opacity:e.a.opacity,hideInExport:!e.showInExport},o.default.createElement(d.Rect,{width:e.a.width,height:e.a.height,fill:"rgba(223, 102, 102, 0.8)"}),o.default.createElement(d.Text,{text:"Can not load the image...",fontSize:t,width:e.a.width,height:e.a.height,align:"center",fill:"white",verticalAlign:"middle",padding:5}))}));let C=l.default;exports.setImageLoaderHook=e=>{C=e},exports.useImageLoader=(e,t="",r="")=>{const a=o.default.useRef(),i=()=>{var e;null===(e=a.current)||void 0===e||e.call(a),a.current=void 0};o.default.useEffect((()=>i),[]),o.default.useLayoutEffect((()=>{const o=t.slice(0,200),n=`image with id ${r} url: ${o}`;"loading"!==e||a.current||(a.current=(0,u.incrementLoader)(n)),"loading"!==e&&i(),"failed"===e&&(0,u.triggerLoadError)(n)}),[e])},exports.ImageElement=(0,n.observer)((({element:e,store:t})=>{var r;const[a,i]=o.default.useState(!1),n=o.default.useRef(null),l=o.default.useRef(null),u=t.selectedShapes.indexOf(e)>=0&&e.selectable,[f,E]=(e=>{const[t,r]=o.default.useReducer((e=>e+1),0),a=o.default.useRef("loading"),i=o.default.useRef(e.src),n=o.default.useRef(e.src);return n.current!==e.src&&(n.current=e.src,a.current="loading"),o.default.useEffect((()=>{if("svg"!==e.type){return}if(!e.src){return}let t=!1;return(async()=>{a.current="loading",r();const o=await g.urlToString(e.src),n=g.fixSize(o),h=g.replaceColors(n,e.colorsReplace);t||(i.current=h,a.current="loaded",r())})(),()=>{t=!0}}),[e.src,JSON.stringify(e.colorsReplace)]),"svg"!==e.type?[e.src,"loaded"]:[i.current,a.current]})(e),[R,_]=C(f,"anonymous"),T="svg"!==e.type||"loaded"===E?_:"loading";(0,exports.useImageLoader)(T,e.src,e.id);const X=e.page._exportingOrRendering?1:Math.max(1,t.scale),Y=t._elementsPixelRatio*X,k=(({image:e,status:t,type:r})=>{const a=o.default.useRef();return o.default.useEffect((()=>{a.current=e||a.current}),[e]),"failed"!==t||"failed"!==t&&"svg"===r?a.current:void 0})({image:R,status:_,type:e.type}),D=((e,t,r)=>{const a=o.default.useMemo((()=>{var a,i;const{flipX:o,flipY:n}=e,h="svg"===e.type||e.src.indexOf("data:image/svg+xml")>=0||e.src.indexOf(".svg")>=0,d=navigator.userAgent.toLowerCase().indexOf("firefox")>-1,l=(/^((?!chrome|android).)*safari/i.test(navigator.userAgent)||d)&&h||e.maskSrc;if(!o&&!n&&!l){return t}if(!t||!t.width||!t.height){return null}const s=y();let c=1;"svg"===e.type&&(c=Math.max(e.a.width/t.width*r,e.a.height/t.height*r)),(0,p.trySetCanvasSize)(s,Math.max(t.width*c,1),Math.max(t.height*c,1));let u=o?-s.width:0,g=n?-s.height:0;return null===(a=s.getContext("2d"))||void 0===a||a.scale(o?-1:1,n?-1:1),null===(i=s.getContext("2d"))||void 0===i||i.drawImage(t,u,g,s.width,s.height),s}),[e.maskSrc,e.flipX,e.flipY,t,e.a.width,e.a.height,r]);return o.default.useEffect((()=>()=>{a&&"CANVAS"===a.nodeName&&s.default.Util.releaseCanvas(a)}),[a]),a})(e,R||k,Y),W=((e,t)=>{const[r,a]=C(e.maskSrc,"anonymous"),i=e.maskSrc?a:"loaded";return(0,exports.useImageLoader)(i,e.maskSrc||"",e.id),o.default.useMemo((()=>{if(!r){return t}if(!t||!t.width||!t.height){return t}const a=y();a.width=Math.max(t.width,1),a.height=Math.max(t.height,1);const i=a.getContext("2d");if(!i){return t}i.drawImage(t,0,0),i.globalCompositeOperation="source-in";const o=function(e,t){const r=t.width/t.height;let a,i;return r>=e.width/e.height?(a=e.width,i=e.width/r):(a=e.height*r,i=e.height),{x:(e.width-a)/2,y:(e.height-i)/2,width:a,height:i}}(r,e);return i.drawImage(r,o.x,o.y,o.width,o.height,0,0,t.width,t.height),a}),[t,r,e.a.width,e.a.height])})(e,D)||S;let{cropX:A,cropY:L,cropWidth:P,cropHeight:z}=e.a;"loaded"!==_&&(A=L=0,P=z=1);const q=W.width*P,H=W.height*z,j=e.a.width/e.a.height;let F,B;const N=q/H,U=e.stretchEnabled;U?(F=q,B=H):j>=N?(F=q,B=q/j):(F=H*j,B=H);const G={x:W.width*A,y:W.height*L,width:F,height:B},V=null!==(r=e.cornerRadius)&&void 0!==r?r:0,$=e.page._exportingOrRendering?1:Math.min(2,t.scale),J=t._elementsPixelRatio*$;let K=((e,t,r,a)=>{const i=(0,exports.useSizeFixer)(e.clipSrc||""),[n,h]=C(i,"anonymous"),d=e.clipSrc?h:"loaded";(0,exports.useImageLoader)(d,e.clipSrc,e.id);const l=o.default.useMemo((()=>{if(t&&n){return y()}}),[t,n]);return o.default.useLayoutEffect((()=>{var a;if(!n){return}if(!t||!t.width||!t.height){return}if(!n||!n.width||!n.height){return}if(!l){return}const i=y(),o=Math.max(e.a.width/n.width*r,e.a.height/n.height*r);i.width=n.width*o,i.height=n.height*o,null===(a=i.getContext("2d"))||void 0===a||a.drawImage(n,0,0,i.width,i.height),l.width=Math.max(t.width,1),l.height=Math.max(t.height,1);const h=l.getContext("2d");h&&(h.save(),h.drawImage(i,0,0,t.width,t.height),s.default.Util.releaseCanvas(i),h.globalCompositeOperation="source-in",h.drawImage(t,0,0,l.width,l.height),h.restore())}),[l,t,n,e.a.width,e.a.height,r,...a]),e.clipSrc&&n?l:t})(e,(0,exports.useCornerRadiusAndCrop)(e,W,G,J,V,a||e._cropModeEnabled||"svg"===e.type,!0),J,[G,V,J]);const Q=Math.max(e.a.width/F,e.a.height/B);o.default.useEffect((()=>{var t;if(!e._cropModeEnabled){return}const r=null===(t=n.current)||void 0===t?void 0:t.getStage();function a(t){e._cropModeEnabled&&t.target!==l.current&&e.toggleCropMode(!1)}function i(t){e._cropModeEnabled&&t.target.parentNode!==r.content&&e.toggleCropMode(!1)}return document.body.addEventListener("click",i),null==r||r.on("click",a),null==r||r.on("tap",a),()=>{document.body.removeEventListener("click",i),document.body.removeEventListener("touchstart",i),null==r||r.off("click",a),null==r||r.off("click",a)}}),[e._cropModeEnabled]),o.default.useLayoutEffect((()=>{if(!a&&!e._cropModeEnabled){return(0,m.applyFilter)(n.current,e),(0,h.autorun)((()=>{(0,m.applyFilter)(n.current,e)}),{delay:100})}}),[K,e.page._exportingOrRendering,a,P,z,e._cropModeEnabled]),o.default.useLayoutEffect((()=>{var t;a||e._cropModeEnabled?null===(t=n.current)||void 0===t||t.clearCache():(0,m.applyFilter)(n.current,e)}),[a,e.a.width,e.a.height,e._cropModeEnabled]),o.default.useEffect((()=>{(0,m.applyFilter)(n.current,e)}),[e.shadowEnabled,e.shadowBlur,e.cornerRadius,e.shadowColor,e.shadowOffsetX,e.shadowOffsetY,e.shadowOpacity]);const Z=o.default.useRef(null),ee=o.default.useRef(null),te=o.default.useRef(null);o.default.useLayoutEffect((()=>{e._cropModeEnabled&&(ee.current.nodes([Z.current]),te.current.nodes([l.current]))}),[e._cropModeEnabled]);var re=o.default.useRef(null),ae=o.default.useRef(0),ie=o.default.useRef(!1);const oe=t=>{var r;(null===(r=t.evt.touches)||void 0===r?void 0:r.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 a=t.target.width()*t.target.scaleX(),i=t.target.height()*t.target.scaleY(),o=Math.min(1,F/a),n=Math.min(1,B/i),h=1-o,d=Math.min(h,Math.max(0,Math.round(-t.target.x())/a)),l=1-n,s=Math.min(l,Math.max(0,Math.round(-t.target.y())/i));t.target.setAttrs({x:-d*W.width,y:-s*W.height,scaleX:1,scaleY:1}),e.set({cropX:d,cropY:s,cropWidth:o,cropHeight:n})},ne=()=>{"svg"!==e.type&&e.contentEditable&&(e.stretchEnabled||setTimeout((()=>{e.toggleCropMode(!0)})))},he="svg"===e.type&&k,de="loading"===_&&!he,le="failed"===_,se=!de&&!le,ce=o.default.useRef({cropX:0,cropY:0,cropWidth:0,cropHeight:0}),ue=se?e.a.opacity:0;(0,w.useFadeIn)(n,ue);const ge=e.selectable||"admin"===t.role,fe=(0,x.isTouchDevice)();return o.default.createElement(o.default.Fragment,null,de&&o.default.createElement(I,{element:e}),le&&o.default.createElement(O,{element:e}),o.default.createElement(d.Image,{ref:n,name:"element",id:e.id,image:K,x:e.a.x,y:e.a.y,width:e.a.width||1,height:e.a.height||1,rotation:e.a.rotation,opacity:ue,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,customCrop:G,listening:ge,draggable:fe?e.draggable&&u:e.draggable,preventDefault:!fe||u,hideInExport:!e.showInExport,onDragMove:t=>{e.set({x:t.target.x(),y:t.target.y()})},onDragEnd:t=>{e.set({x:t.target.x(),y:t.target.y()})},onDblClick:ne,onDblTap:ne,onTransformStart:()=>{i(!0),ce.current={cropX:e.cropX,cropY:e.cropY,cropWidth:e.cropWidth,cropHeight:e.cropHeight}},onTransform:t=>{var r;const a=t.currentTarget,i=Math.abs(a.scaleX()-1)<1e-7?1:a.scaleX(),o=Math.abs(a.scaleY()-1)<1e-7?1:a.scaleY();a.scaleX(1),a.scaleY(1);const n=null===(r=t.target.getStage())||void 0===r?void 0:r.findOne("Transformer"),h=1-F/W.width,d=Math.min(h,Math.max(0,e.cropX)),l=1-B/W.height,s=Math.min(l,Math.max(0,e.cropY)),c=n.getActiveAnchor(),u=!(c.indexOf("middle")>=0||c.indexOf("center")>=0),g=!u&&i<1&&ce.current.cropHeight>B/W.height;let f=u?e.cropWidth:e.cropWidth*i;g&&(f=e.cropWidth);const p=!u&&o<1&&ce.current.cropWidth>F/W.width;let m=u?e.cropHeight:e.cropHeight*o;p&&(m=e.cropHeight),U&&(f=e.cropWidth,m=e.cropHeight),e.set({cropX:d,cropY:s,x:a.x(),y:a.y(),width:a.width()*i,height:a.height()*o,rotation:t.target.rotation(),cropWidth:Math.min(f,1-d),cropHeight:Math.min(m,1-s)})},onTransformEnd:t=>{const r=t.currentTarget;e.set({width:r.width(),height:r.height(),x:r.x(),y:r.y(),rotation:t.target.rotation(),cropWidth:F/W.width,cropHeight:B/W.height}),i(!1)}}),o.default.createElement(d.Rect,{x:e.x,y:e.y,width:Math.max(e.a.width-e.borderSize,0),height:Math.max(e.a.height-e.borderSize,0),opacity:ue,offsetX:-e.borderSize/2,offsetY:-e.borderSize/2,stroke:e.borderColor,strokeWidth:e.borderSize,listening:!1,visible:!!e.borderSize,rotation:e.rotation,cornerRadius:Math.max(0,V-e.borderSize),hideInExport:!e.showInExport}),e._cropModeEnabled&&o.default.createElement(c.Portal,{selector:".page-abs-container",enabled:!0},o.default.createElement(d.Rect,{x:-window.innerWidth/t.scale,y:-window.innerWidth/t.scale,width:window.innerWidth/t.scale*3,height:window.innerWidth/t.scale*3,fill:"rgba(0,0,0,0.3)"}),o.default.createElement(d.Image,{listening:!1,image:K,x:e.x,y:e.y,width:e.a.width,height:e.a.height,rotation:e.rotation,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur}),o.default.createElement(d.Group,{x:e.x,y:e.y,rotation:e.rotation,scaleX:Q,scaleY:Q},o.default.createElement(d.Image,{image:W,ref:l,opacity:.4,draggable:!0,x:-e.cropX*W.width,y:-e.cropY*W.height,onDragMove:oe,onTransform:oe,onTouchMove:e=>{e.evt.preventDefault();const t=e.target.getStage().getPointersPositions();var r=t[0],a=t[1];const i=e.target;if(r&&!a&&!i.isDragging()&&ie.current&&(i.startDrag(),ie.current=!1),r&&a){s.default.hitOnDragEnabled=!0,i.isDragging()&&(ie.current=!0,i.stopDrag());const t=e.target.getAbsoluteTransform().copy();t.invert();var o={x:r.x,y:r.y},n={x:a.x,y:a.y};if(!re.current){return void(re.current=M(o,n))}var h=M(o,n),d=function(e,t){return Math.sqrt(Math.pow(t.x-e.x,2)+Math.pow(t.y-e.y,2))}(o,n);ae.current||(ae.current=d);const p=i.position();var l={x:h.x-p.x,y:h.y-p.y},c=d/ae.current;i.scaleX(c),i.scaleY(c);const m=t.point(h),w=t.point(re.current);var u=m.x-w.x,g=m.y-w.y,f={x:Math.min(0,h.x-l.x*c+u),y:Math.min(0,h.y-l.y*c+g)};i.position(f),ae.current=d,re.current=h,oe(e)}},onTouchEnd:e=>{ae.current=0,re.current=null,s.default.hitOnDragEnabled=!1}}),o.default.createElement(d.Transformer,Object.assign({ref:te},b)),o.default.createElement(d.Rect,{width:F,height:B,ref:Z,listening:!1,onTransform:t=>{t.target.x()<-e.cropX*W.width-1e-9&&(t.target.x(-e.cropX*W.width),t.target.scaleX(1)),t.target.y()<-e.cropY*W.height-1e-9&&(t.target.y(-e.cropY*W.height),t.target.scaleY(1));const r=Math.min(1,Math.max(0,e.cropX+t.target.x()/W.width)),a=Math.min(1,Math.max(0,t.target.y()/W.height+e.cropY)),i=t.target.width()*t.target.scaleX(),o=t.target.height()*t.target.scaleY(),n=Math.min(1-r,i/W.width),h=Math.min(1-a,o/W.height),d=t.target.getAbsolutePosition(t.target.getParent().getParent());t.target.scale({x:1,y:1}),t.target.position({x:0,y:0}),e.set({x:d.x,y:d.y,cropX:r,cropY:a,cropWidth:n,cropHeight:h,width:Math.min(i*Q,W.width*(1-r)*Q),height:Math.min(o*Q,W.height*(1-a)*Q)})}}),o.default.createElement(d.Transformer,Object.assign({ref:ee},v,{visible:e.resizable})))))}));

package/canvas/line-element.js

@@ -1 +1 @@
-var e=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.LineElement=void 0,exports.getMiddlePoints=l,exports.getLinePositionFromMiddlePoints=d;const t=e(require("react")),a=require("mobx-react-lite"),r=require("react-konva"),o=require("./use-color"),n=require("react-konva-utils"),i=require("./highlighter"),s=require("./use-transformer-snap"),h=require("../utils/screen");function l(e){const{x:t,y:a,width:r,height:o,rotation:n}=e.a,i=n*Math.PI/180,s={x:t+o/2*Math.cos(i+Math.PI/2),y:a+o/2*Math.sin(i+Math.PI/2)};return{middleLeft:s,middleRight:{x:s.x+r*Math.cos(i),y:s.y+r*Math.sin(i)}}}function d(e,t,a){const r=Math.sqrt(Math.pow(t.x-e.x,2)+Math.pow(t.y-e.y,2)),o=Math.atan2(t.y-e.y,t.x-e.x),n=180*o/Math.PI;return{x:e.x+Math.cos(o-Math.PI/2)*a/2,y:e.y+Math.sin(o-Math.PI/2)*a/2,width:r,height:a,rotation:n}}const c=(e,t)=>({offsetX:5/e,offsetY:5/e,width:10/e,height:10/e,fill:"white",stroke:"rgb(0, 161, 255)",strokeWidth:2,strokeScaleEnabled:!1,draggable:!0,dragDistance:0,onMouseEnter:e=>{e.target.getStage().container().style.cursor="crosshair"},onMouseLeave:e=>{e.target.getStage().container().style.cursor=""},onDragStart:e=>{t.history.startTransaction()},onDragEnd:e=>{t.history.endTransaction()}}),g=(0,a.observer)((({element:e,type:a})=>{const n=(0,o.useColor)(e,e.a.color,"fill"),i=(0,o.useColor)(e,e.a.color,"stroke"),s=Object.assign(Object.assign(Object.assign({strokeWidth:e.height,lineCap:"round",lineJoin:"round"},i),n),{opacity:e.a.opacity,hideInExport:!e.showInExport});return t.default.createElement(t.default.Fragment,null,"arrow"===a&&t.default.createElement(r.Line,Object.assign({points:[3*e.height,2*-e.height,0,0,3*e.height,2*e.height]},s)),"triangle"===a&&t.default.createElement(r.Line,Object.assign({points:[3*e.height,2*-e.height,0,0,3*e.height,2*e.height],closed:!0},s)),"bar"===a&&t.default.createElement(r.Line,Object.assign({points:[0,2*-e.height,0,2*e.height],closed:!0},s)),"square"===a&&t.default.createElement(r.Line,Object.assign({points:[0,2*-e.height,4*e.height,2*-e.height,4*e.height,2*e.height,0,2*e.height],closed:!0},s)),"circle"===a&&t.default.createElement(r.Circle,Object.assign({x:2*e.height,y:0,radius:2*e.height},s)))}));exports.LineElement=(0,a.observer)((({element:e,store:a})=>{const u=t.default.useRef(null),f=t.default.useRef(null),x=t.default.useRef(null),m=e.selectable||"admin"===a.role,y=(0,h.isTouchDevice)(),[p,E]=t.default.useState(!1),b=a.selectedElements.indexOf(e)>=0&&1===a.selectedElements.length,w=a.selectedShapes.indexOf(e)>=0&&e.selectable,{middleLeft:M,middleRight:O}=l(e);(0,s.useAnchorSnap)(f,[u],[b]),(0,s.useAnchorSnap)(x,[u],[b]);const v=(0,o.useColor)(e,e.a.color,"stroke");return t.default.createElement(t.default.Fragment,null,t.default.createElement(r.Line,Object.assign({ref:u,name:"element",id:e.id,x:e.a.x,y:e.a.y,points:[0,0,e.a.width,0],offsetY:-e.a.height/2,strokeWidth:e.a.height,hitStrokeWidth:Math.max(e.a.height,20),dash:e.dash.map((t=>t*e.a.height))},v,{rotation:e.a.rotation,opacity:e.animated("opacity"),shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,listening:m,draggable:y?e.draggable&&w:e.draggable,preventDefault:!y||w,hideInExport:!e.showInExport,onMouseEnter:()=>{E(!0)},onMouseLeave:()=>{E(!1)},onDragMove:t=>{e.set({x:t.target.x(),y:t.target.y()})},onDragEnd:t=>{e.set({x:t.target.x(),y:t.target.y()})},onTransform:t=>{const a=t.target.scaleX();t.target.scaleX(1),t.target.scaleY(1),e.set({height:e.height*a,width:e.width*a,x:t.target.x(),y:t.target.y(),rotation:t.target.rotation()})}})),t.default.createElement(r.Group,{x:M.x,y:M.y,rotation:e.rotation,hideInExport:!e.showInExport},t.default.createElement(g,{element:e,type:e.startHead})),t.default.createElement(r.Group,{x:O.x,y:O.y,rotation:e.rotation+180},t.default.createElement(g,{element:e,type:e.endHead})),(p||w&&!b)&&t.default.createElement(i.Highlighter,{element:e}),b&&e.resizable&&t.default.createElement(n.Portal,{selector:".page-abs-container",enabled:!0},t.default.createElement(r.Group,{visible:b},t.default.createElement(r.Rect,Object.assign({x:M.x,y:M.y,ref:f,name:"line-anchor"},c(a.scale,a),{onDragMove:t=>{const a=d(t.target.position(),O,e.height);e.set({x:a.x,y:a.y,width:a.width,rotation:a.rotation})}})),t.default.createElement(r.Rect,Object.assign({x:O.x,y:O.y,ref:x,name:"line-anchor"},c(a.scale,a),{onDragMove:t=>{const a=d(M,t.target.position(),e.height);e.set({x:a.x,y:a.y,width:a.width,rotation:a.rotation})}})))))}));
+var e=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.LineElement=void 0,exports.getMiddlePoints=h,exports.getLinePositionFromMiddlePoints=l;const t=e(require("react")),a=require("mobx-react-lite"),r=require("react-konva"),o=require("./use-color"),n=require("react-konva-utils"),i=require("./use-transformer-snap"),s=require("../utils/screen");function h(e){const{x:t,y:a,width:r,height:o,rotation:n}=e.a,i=n*Math.PI/180,s={x:t+o/2*Math.cos(i+Math.PI/2),y:a+o/2*Math.sin(i+Math.PI/2)};return{middleLeft:s,middleRight:{x:s.x+r*Math.cos(i),y:s.y+r*Math.sin(i)}}}function l(e,t,a){const r=Math.sqrt(Math.pow(t.x-e.x,2)+Math.pow(t.y-e.y,2)),o=Math.atan2(t.y-e.y,t.x-e.x),n=180*o/Math.PI;return{x:e.x+Math.cos(o-Math.PI/2)*a/2,y:e.y+Math.sin(o-Math.PI/2)*a/2,width:r,height:a,rotation:n}}const d=(e,t)=>({offsetX:5/e,offsetY:5/e,width:10/e,height:10/e,fill:"white",stroke:"rgb(0, 161, 255)",strokeWidth:2,strokeScaleEnabled:!1,draggable:!0,dragDistance:0,onMouseEnter:e=>{e.target.getStage().container().style.cursor="crosshair"},onMouseLeave:e=>{e.target.getStage().container().style.cursor=""},onDragStart:e=>{t.history.startTransaction()},onDragEnd:e=>{t.history.endTransaction()}}),c=(0,a.observer)((({element:e,type:a})=>{const n=(0,o.useColor)(e,e.a.color,"fill"),i=(0,o.useColor)(e,e.a.color,"stroke"),s=Object.assign(Object.assign(Object.assign({strokeWidth:e.height,lineCap:"round",lineJoin:"round"},i),n),{opacity:e.a.opacity,hideInExport:!e.showInExport});return t.default.createElement(t.default.Fragment,null,"arrow"===a&&t.default.createElement(r.Line,Object.assign({points:[3*e.height,2*-e.height,0,0,3*e.height,2*e.height]},s)),"triangle"===a&&t.default.createElement(r.Line,Object.assign({points:[3*e.height,2*-e.height,0,0,3*e.height,2*e.height],closed:!0},s)),"bar"===a&&t.default.createElement(r.Line,Object.assign({points:[0,2*-e.height,0,2*e.height],closed:!0},s)),"square"===a&&t.default.createElement(r.Line,Object.assign({points:[0,2*-e.height,4*e.height,2*-e.height,4*e.height,2*e.height,0,2*e.height],closed:!0},s)),"circle"===a&&t.default.createElement(r.Circle,Object.assign({x:2*e.height,y:0,radius:2*e.height},s)))}));exports.LineElement=(0,a.observer)((({element:e,store:a})=>{const g=t.default.useRef(null),u=t.default.useRef(null),f=t.default.useRef(null),x=e.selectable||"admin"===a.role,y=(0,s.isTouchDevice)(),m=a.selectedElements.indexOf(e)>=0&&1===a.selectedElements.length,p=a.selectedShapes.indexOf(e)>=0&&e.selectable,{middleLeft:E,middleRight:b}=h(e);(0,i.useAnchorSnap)(u,[g],[m]),(0,i.useAnchorSnap)(f,[g],[m]);const w=(0,o.useColor)(e,e.a.color,"stroke");return t.default.createElement(t.default.Fragment,null,t.default.createElement(r.Line,Object.assign({ref:g,name:"element",id:e.id,x:e.a.x,y:e.a.y,points:[0,0,e.a.width,0],offsetY:-e.a.height/2,strokeWidth:e.a.height,hitStrokeWidth:Math.max(e.a.height,20),dash:e.dash.map((t=>t*e.a.height))},w,{rotation:e.a.rotation,opacity:e.animated("opacity"),shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,listening:x,draggable:y?e.draggable&&p:e.draggable,preventDefault:!y||p,hideInExport:!e.showInExport,onDragMove:t=>{e.set({x:t.target.x(),y:t.target.y()})},onDragEnd:t=>{e.set({x:t.target.x(),y:t.target.y()})},onTransform:t=>{const a=t.target.scaleX();t.target.scaleX(1),t.target.scaleY(1),e.set({height:e.height*a,width:e.width*a,x:t.target.x(),y:t.target.y(),rotation:t.target.rotation()})}})),t.default.createElement(r.Group,{x:E.x,y:E.y,rotation:e.rotation,hideInExport:!e.showInExport},t.default.createElement(c,{element:e,type:e.startHead})),t.default.createElement(r.Group,{x:b.x,y:b.y,rotation:e.rotation+180},t.default.createElement(c,{element:e,type:e.endHead})),m&&e.resizable&&t.default.createElement(n.Portal,{selector:".page-abs-container",enabled:!0},t.default.createElement(r.Group,{visible:m},t.default.createElement(r.Rect,Object.assign({x:E.x,y:E.y,ref:u,name:"line-anchor"},d(a.scale,a),{onDragMove:t=>{const a=l(t.target.position(),b,e.height);e.set({x:a.x,y:a.y,width:a.width,rotation:a.rotation})}})),t.default.createElement(r.Rect,Object.assign({x:b.x,y:b.y,ref:f,name:"line-anchor"},d(a.scale,a),{onDragMove:t=>{const a=l(E,t.target.position(),e.height);e.set({x:a.x,y:a.y,width:a.width,rotation:a.rotation})}})))))}));

package/canvas/text-element.js

@@ -1 +1 @@
-var e=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.TextElement=exports.getLineHeight=exports.useFontLoader=void 0,exports.isRTLText=S,exports.getDir=E,exports.usePrevious=F;const t=e(require("react")),n=require("mobx-react-lite"),i=require("react-konva"),r=require("react-konva-utils"),o=require("mobx"),a=e(require("konva")),l=require("svg-round-corners"),s=require("./use-color"),d=require("../utils/loader"),u=require("../utils/fonts"),c=require("../utils/flags"),f=require("../utils/text"),h=require("./apply-filters"),g=require("./use-fadein"),x=require("./highlighter"),p=require("../utils/screen"),w=require("mobx-state-tree"),m=require("./text-element/max-font-size");a.default._fixTextRendering=!0;const v=document.createElement("style");v.type="text/css",document.head.appendChild(v);const y={border:"none",padding:"0px",overflow:"hidden",background:"none",outline:"none",resize:"none",overflowWrap:"break-word",whiteSpace:"pre-wrap",userSelect:"text",wordBreak:"normal"};function S(e){e=e.replace(/\s/g,"");let t=0;for(var n=0;n<e.length;n++){i=e[n],void 0,r="֑-߿‏‫‮יִ-﷽ﹰ-ﻼ",new RegExp("^[^"+r+"]*?["+r+"]").test(i)&&(t+=1)}var i,r;return t>e.length/2}function E(e){return S(e)?"rtl":"ltr"}const b=(0,n.observer)((({textNodeRef:e,element:n,onBlur:i,selectAll:r,cursorPosition:o})=>{const[a,l]=t.default.useState(y),s=e.current;t.default.useLayoutEffect((()=>{const e={};e.width=s.width()-2*s.padding()+"px",e.height=s.height()-2*s.padding()+s.fontSize()*s.lineHeight()+"px",e.fontSize=s.fontSize()+"px",e.lineHeight=s.lineHeight()+.01,e.fontFamily=s.fontFamily(),e.textAlign=s.align(),e.color=s.fill(),e.fontWeight=n.fontWeight,e.fontStyle=n.fontStyle,e.letterSpacing=n.letterSpacing+"em";const t=`\n        .polotno-input::placeholder {\n          color: ${a.color};\n          opacity: 0.6;\n        }\n      `;v.innerHTML="",v.appendChild(document.createTextNode(t)),JSON.stringify(e)!==JSON.stringify(a)&&l(e)}));const d=t.default.useRef(null);t.default.useLayoutEffect((()=>{var e;const t=d.current;if(!t){return}null===(e=d.current)||void 0===e||e.focus();const n=o||t.value.length;t.selectionStart=t.selectionEnd=n,r&&(null==t||t.select(),document.execCommand("selectAll",!1,null))}),[]),t.default.useEffect((()=>{window.addEventListener("blur",i);const e=e=>{var t;(null===(t=d.current)||void 0===t?void 0:t.contains(e.target))||i()};return window.addEventListener("touchstart",e),()=>{window.removeEventListener("blur",i),window.removeEventListener("touchstart",e)}}),[]);let u=0;const c=s.textArr.length*s.lineHeight()*s.fontSize();"middle"===n.verticalAlign&&(u=(n.a.height-c)/2),"bottom"===n.verticalAlign&&(u=n.a.height-c);const h=(0,f.removeTags)(n.text);return t.default.createElement("textarea",{className:"polotno-input",ref:d,dir:E(h),style:Object.assign(Object.assign(Object.assign({},y),a),{paddingTop:u+"px"}),value:h,onChange:e=>{const t=(0,m.getLimitedFontSize)({oldText:n.text,newText:e.target.value,element:n});n.set({text:e.target.value,fontSize:t})},placeholder:n.placeholder,onBlur:i})})),z=e=>t.default.createElement(r.Html,null,t.default.createElement(b,Object.assign({},e)));function F(e){const n=t.default.useRef(e),i=t.default.useRef(e);return t.default.useMemo((()=>{i.current=n.current,n.current=e}),[e]),i.current}exports.useFontLoader=(e,n)=>{const[i,r]=t.default.useReducer((e=>e+1),0),o=t.default.useRef((0,u.isFontLoaded)(n));return t.default.useLayoutEffect((()=>{if(o.current=(0,u.isFontLoaded)(n),o.current){return}let t=!0;return(async()=>{o.current=!1,r();const i=(0,d.incrementLoader)(`text ${n}`);await e.loadFont(n),setTimeout(i,100),t&&(o.current=!0,r())})(),()=>{t=!1}}),[n]),[o.current]},exports.getLineHeight=({fontLoaded:e,fontFamily:n,fontSize:i,lineHeight:r})=>t.default.useMemo((()=>{if("number"==typeof r){return r}const e=document.createElement("div");e.style.fontFamily=n,e.style.fontSize=i+"px",e.style.lineHeight=r,e.innerText="Test text",document.body.appendChild(e);const t=e.offsetHeight;return document.body.removeChild(e),t/i}),[e,n,i,r]),exports.TextElement=(0,n.observer)((({element:e,store:n})=>{const r=t.default.useRef(null),a=t.default.useRef(null),{editorEnabled:d,selectAll:u}=(e=>{const[n,i]=t.default.useState(!1),r=t.default.useRef(!1);return t.default.useEffect((()=>{var t=!0;return setTimeout((()=>{t&&(e._editModeEnabled&&(r.current=!0),i(!0),setTimeout((()=>{r.current=!1}),50))}),50),()=>{t=!1}}),[]),{editorEnabled:n&&e._editModeEnabled,selectAll:r.current}})(e),[m,v]=t.default.useState(!1),[y,S]=t.default.useState(!1),b=t.default.useRef(e.a.height),L=n.selectedShapes.indexOf(e)>=0&&e.selectable,{textVerticalResizeEnabled:A}=c.flags,O=F(e.fontFamily),[T,M]=t.default.useState([]);t.default.useEffect((()=>{var e,t;const n=null!==(t=null===(e=r.current)||void 0===e?void 0:e.textArr)&&void 0!==t?t:[];JSON.stringify(n)!==JSON.stringify(T)&&M(n)})),t.default.useEffect((()=>{if(e.a.width){return}const t=r.current;t.width(600),e.set({width:1.4*t.getTextWidth()})}),[]),t.default.useLayoutEffect((()=>(0,o.autorun)((()=>{const t=r.current;(0,h.applyFilter)(t,e)}))));const[k]=(0,exports.useFontLoader)(n,e.fontFamily),$=(0,f.removeTags)(e.text),R=()=>{const e=r.current.clone({height:void 0}),t=Math.ceil(e.fontSize()*e.lineHeight()*e.textArr.length+1);return e.destroy(),t};t.default.useLayoutEffect((()=>{if(!k){return}const{textOverflow:t,textSplitAllowed:i}=c.flags;if(e.a.height){if(!n.isPlaying){if("change-font-size"!==t||y){if("resize"===t){const t=R();A&&e.a.height<t&&n.history.ignore((()=>{var n;(0,w.isAlive)(e)&&e.set({height:t}),null===(n=r.current)||void 0===n||n.height(t)}),!1,!0),A||e.a.height===t||n.history.ignore((()=>{var n;(0,w.isAlive)(e)&&e.set({height:t}),null===(n=r.current)||void 0===n||n.height(t)}),!1,!0)}}else{const t=function(e,t,n=!1){const i=e.fontSize(),r=e.height(),o=(0,f.removeTags)(t.text);let a=t.a.fontSize;e.height(void 0);const l=Math.round(2*t.a.fontSize)-1;for(let s=1;s<l;s++){const i=t.a.height&&e.height()>t.a.height;let r=o.split("\n").join(" ").split(/[\s-]+/).reduce(((e,t)=>/[\u3000-\u303F\u3040-\u309F\u30A0-\u30FF\uFF00-\uFFEF\u4E00-\u9FAF\uAC00-\uD7AF]/.test(t)?e.concat(t.split("")):e.concat(t)),[]),l=e.textArr.map((e=>e.text)).join(";");const s=r.find((e=>!l.includes(e)||(l=l.replace(e,""),!1)));if(!(i||s&&!n)){break}a-=.5,e.fontSize(a)}return e.fontSize(i),e.height(r),a}(r.current,e,i);if(t!==e.a.fontSize){return void n.history.ignore((()=>{e.set({fontSize:t})}),!1,!0)}const o=R();e.a.height===o||A||n.history.ignore((()=>{e.set({height:o})}),!1,!0)}}}else{const t=R();n.history.ignore((()=>{e.set({height:t})}),!1,!0)}})),t.default.useLayoutEffect((()=>{const t=r.current;t&&(t.width(t.width()+1e-8),t._setTextData(),(0,h.applyFilter)(t,e))}),[k]);const H=t.default.useRef(null),q=t.default.useRef(0),C=t=>{t.evt.preventDefault();const i=n.selectedShapes.find((t=>t===e));i&&e.contentEditable&&(q.current=function(e){var t;const n=e.target,i=function(e){var t=e.getAbsoluteTransform().copy();t.invert();var n=e.getStage().getPointerPosition();return t.point(n)}(n),r=n.textArr,o=Math.floor(i.y/(n.fontSize()*n.lineHeight())),a=r.slice(0,o).reduce(((e,t)=>e+t.text.length),o),l=null!==(t=r[o])&&void 0!==t?t:r[0];let s=0;return"right"===n.align()?s=n.width()-l.width:"center"===n.align()&&(s=n.width()/2-l.width/2),a+Math.round((i.x-s)/l.width*l.text.length)}(t),e.toggleEditMode())},P=!$&&e.placeholder?.6:e.a.opacity;(0,g.useFadeIn)(r,P);const _=(0,exports.getLineHeight)({fontLoaded:k,fontFamily:e.fontFamily,fontSize:e.a.fontSize,lineHeight:e.lineHeight}),D=e.selectable||"admin"===n.role,j=(0,s.useColor)(e),N=t.default.useMemo((()=>e.backgroundEnabled?function({lines:e,lineHeight:t,width:n,align:i="left",padding:r=0,cornerRadius:o=0}){var a;e.forEach(((e,t)=>{e.cx=n/2,"right"===i?e.cx=n-e.width/2:"left"===i&&(e.cx=e.width/2),"justify"!==i||e.lastInParagraph||(e.width=n),"justify"===i&&(e.cx=e.width/2)}));let s=`M ${null===(a=e[0])||void 0===a?void 0:a.cx} ${-r}`;e.forEach(((n,i)=>{const{cx:o}=n,a=e[i-1];a&&a.width>n.width?s+=` L ${o+n.width/2+r} ${i*t+r}`:s+=` L ${o+n.width/2+r} ${i*t-r}`;const l=e[i+1];l&&l.width>n.width?s+=` L ${o+n.width/2+r} ${(i+1)*t-r}`:s+=` L ${o+n.width/2+r} ${(i+1)*t+r}`}));for(var d=e.length-1;d>=0;d--){const n=e[d],{cx:i}=n,o=e[d+1];o&&o.width>n.width?s+=` L ${i-n.width/2-r} ${(d+1)*t-r}`:s+=` L ${i-n.width/2-r} ${(d+1)*t+r}`;const a=e[d-1];a&&a.width>n.width?s+=` L ${i-n.width/2-r} ${d*t+r}`:s+=` L ${i-n.width/2-r} ${d*t-r}`}s+=" Z";const u=(0,l.parsePath)(s);return(0,l.roundCommands)(u,o).path}({lines:JSON.parse(JSON.stringify(T)),cornerRadius:e.backgroundCornerRadius*(e.a.fontSize*_*.5),lineHeight:_*e.a.fontSize,padding:e.backgroundPadding*(e.a.fontSize*_*.5),width:e.a.width,align:e.align}):""),[e.backgroundEnabled,e.backgroundCornerRadius,e.a.fontSize,_,e.backgroundPadding,e.a.width,e.align,T]),Y=(0,p.isTouchDevice)();let W=0;return"middle"===e.verticalAlign?W=(e.a.height-T.length*_*e.a.fontSize)/2:"bottom"===e.verticalAlign&&(W=e.a.height-T.length*_*e.a.fontSize),t.default.createElement(t.default.Fragment,null,t.default.createElement(i.Path,{ref:a,x:e.a.x,y:e.a.y,rotation:e.a.rotation,hideInExport:!e.showInExport,listening:!1,visible:e.backgroundEnabled,opacity:e.backgroundOpacity*P,data:N,fill:e.backgroundColor,offsetY:-W}),t.default.createElement(i.Text,Object.assign({ref:r,id:e.id,name:"element",hideInExport:!e.showInExport,editModeEnabled:e._editModeEnabled,x:e.a.x,y:e.a.y,rotation:e.a.rotation,width:e.a.width,height:e.a.height,text:$||e.placeholder,direction:E($)},j,{stroke:e.stroke,lineJoin:"round",strokeWidth:e.strokeWidth,fillAfterStrokeEnabled:!0,fontSize:e.a.fontSize,fontFamily:`"${e.fontFamily}", "${O}"`,fontStyle:e.fontStyle+" "+e.fontWeight,textDecoration:e.textDecoration,align:e.align,verticalAlign:e.verticalAlign,draggable:Y?e.draggable&&L:e.draggable,preventDefault:!Y||L,opacity:P,visible:!e._editModeEnabled,ellipsis:"ellipsis"===c.flags.textOverflow,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,lineHeight:_,letterSpacing:e.letterSpacing*e.a.fontSize,listening:D,onDragMove:t=>{e.set({x:t.target.x(),y:t.target.y()})},onDragEnd:t=>{e.set({x:t.target.x(),y:t.target.y()})},onMouseEnter:()=>{v(!0)},onMouseLeave:()=>{v(!1)},onClick:C,onTap:C,onTransformStart:()=>{S(!0),b.current=r.current.height()},onTransform:t=>{var n,i;const r=t.target;null===(n=a.current)||void 0===n||n.setAttrs({x:r.x(),y:r.y(),rotation:r.rotation(),scale:r.scale()});const o=(null===(i=r.getStage())||void 0===i?void 0:i.findOne("Transformer")).getActiveAnchor();if("middle-left"===o||"middle-right"===o){const t=r.scaleX(),n=r.width()*t,i=e.a.fontSize;let o=n;n<i&&(o=i,H.current&&r.position(H.current)),r.width(o),r.scaleX(1),r.scaleY(1);const a=R();if("ellipsis"!==c.flags.textOverflow){const t=Math.max(a,b.current);r.height(t),e.set({height:r.height()})}e.set({x:r.x(),y:r.y(),width:r.width(),rotation:r.rotation()}),(0,h.applyFilter)(r,e)}if("top-center"===o||"bottom-center"===o){let n="resize"===c.flags.textOverflow?R():_*e.a.fontSize;t.target.height(Math.max(n,t.target.height()*t.target.scaleY())),t.target.scaleY(1)}H.current=t.target.position()},onTransformEnd:t=>{var n;const i=t.target.scaleX();t.target.scaleX(1),t.target.scaleY(1),e.set({fontSize:Math.round(e.a.fontSize*i),width:Math.ceil(t.target.width()*i),x:t.target.x(),y:t.target.y(),rotation:t.target.rotation(),height:t.target.height()*i,shadowBlur:e.shadowBlur*i,shadowOffsetX:e.shadowOffsetX*i,shadowOffsetY:e.shadowOffsetY*i,strokeWidth:e.strokeWidth*i}),null===(n=a.current)||void 0===n||n.setAttrs({scaleX:1,scaleY:1}),S(!1)}})),d&&t.default.createElement(i.Group,{x:e.a.x,y:e.a.y,rotation:e.a.rotation},t.default.createElement(z,{textNodeRef:r,element:e,selectAll:u,cursorPosition:q.current,onBlur:()=>{e.toggleEditMode(!1)}})),!y&&(m||L)&&t.default.createElement(x.Highlighter,{element:e}))}));
+var e=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.TextElement=exports.getLineHeight=exports.useFontLoader=void 0,exports.isRTLText=y,exports.getDir=S,exports.usePrevious=z;const t=e(require("react")),n=require("mobx-react-lite"),i=require("react-konva"),r=require("react-konva-utils"),o=require("mobx"),a=e(require("konva")),l=require("svg-round-corners"),s=require("./use-color"),d=require("../utils/loader"),u=require("../utils/fonts"),c=require("../utils/flags"),f=require("../utils/text"),h=require("./apply-filters"),g=require("./use-fadein"),x=require("../utils/screen"),p=require("mobx-state-tree"),w=require("./text-element/max-font-size");a.default._fixTextRendering=!0;const v=document.createElement("style");v.type="text/css",document.head.appendChild(v);const m={border:"none",padding:"0px",overflow:"hidden",background:"none",outline:"none",resize:"none",overflowWrap:"break-word",whiteSpace:"pre-wrap",userSelect:"text",wordBreak:"normal"};function y(e){e=e.replace(/\s/g,"");let t=0;for(var n=0;n<e.length;n++){i=e[n],void 0,r="֑-߿‏‫‮יִ-﷽ﹰ-ﻼ",new RegExp("^[^"+r+"]*?["+r+"]").test(i)&&(t+=1)}var i,r;return t>e.length/2}function S(e){return y(e)?"rtl":"ltr"}const b=(0,n.observer)((({textNodeRef:e,element:n,onBlur:i,selectAll:r,cursorPosition:o})=>{const[a,l]=t.default.useState(m),s=e.current;t.default.useLayoutEffect((()=>{const e={};e.width=s.width()-2*s.padding()+"px",e.height=s.height()-2*s.padding()+s.fontSize()*s.lineHeight()+"px",e.fontSize=s.fontSize()+"px",e.lineHeight=s.lineHeight()+.01,e.fontFamily=s.fontFamily(),e.textAlign=s.align(),e.color=s.fill(),e.fontWeight=n.fontWeight,e.fontStyle=n.fontStyle,e.letterSpacing=n.letterSpacing+"em";const t=`\n        .polotno-input::placeholder {\n          color: ${a.color};\n          opacity: 0.6;\n        }\n      `;v.innerHTML="",v.appendChild(document.createTextNode(t)),JSON.stringify(e)!==JSON.stringify(a)&&l(e)}));const d=t.default.useRef(null);t.default.useLayoutEffect((()=>{var e;const t=d.current;if(!t){return}null===(e=d.current)||void 0===e||e.focus();const n=o||t.value.length;t.selectionStart=t.selectionEnd=n,r&&(null==t||t.select(),document.execCommand("selectAll",!1,null))}),[]),t.default.useEffect((()=>{window.addEventListener("blur",i);const e=e=>{var t;(null===(t=d.current)||void 0===t?void 0:t.contains(e.target))||i()};return window.addEventListener("touchstart",e),()=>{window.removeEventListener("blur",i),window.removeEventListener("touchstart",e)}}),[]);let u=0;const c=s.textArr.length*s.lineHeight()*s.fontSize();"middle"===n.verticalAlign&&(u=(n.a.height-c)/2),"bottom"===n.verticalAlign&&(u=n.a.height-c);const h=(0,f.removeTags)(n.text);return t.default.createElement("textarea",{className:"polotno-input",ref:d,dir:S(h),style:Object.assign(Object.assign(Object.assign({},m),a),{paddingTop:u+"px"}),value:h,onChange:e=>{const t=(0,w.getLimitedFontSize)({oldText:n.text,newText:e.target.value,element:n});n.set({text:e.target.value,fontSize:t})},placeholder:n.placeholder,onBlur:i})})),E=e=>t.default.createElement(r.Html,null,t.default.createElement(b,Object.assign({},e)));function z(e){const n=t.default.useRef(e),i=t.default.useRef(e);return t.default.useMemo((()=>{i.current=n.current,n.current=e}),[e]),i.current}exports.useFontLoader=(e,n)=>{const[i,r]=t.default.useReducer((e=>e+1),0),o=t.default.useRef((0,u.isFontLoaded)(n));return t.default.useLayoutEffect((()=>{if(o.current=(0,u.isFontLoaded)(n),o.current){return}let t=!0;return(async()=>{o.current=!1,r();const i=(0,d.incrementLoader)(`text ${n}`);await e.loadFont(n),setTimeout(i,100),t&&(o.current=!0,r())})(),()=>{t=!1}}),[n]),[o.current]},exports.getLineHeight=({fontLoaded:e,fontFamily:n,fontSize:i,lineHeight:r})=>t.default.useMemo((()=>{if("number"==typeof r){return r}const e=document.createElement("div");e.style.fontFamily=n,e.style.fontSize=i+"px",e.style.lineHeight=r,e.innerText="Test text",document.body.appendChild(e);const t=e.offsetHeight;return document.body.removeChild(e),t/i}),[e,n,i,r]),exports.TextElement=(0,n.observer)((({element:e,store:n})=>{const r=t.default.useRef(null),a=t.default.useRef(null),{editorEnabled:d,selectAll:u}=(e=>{const[n,i]=t.default.useState(!1),r=t.default.useRef(!1);return t.default.useEffect((()=>{var t=!0;return setTimeout((()=>{t&&(e._editModeEnabled&&(r.current=!0),i(!0),setTimeout((()=>{r.current=!1}),50))}),50),()=>{t=!1}}),[]),{editorEnabled:n&&e._editModeEnabled,selectAll:r.current}})(e),[w,v]=t.default.useState(!1),m=t.default.useRef(e.a.height),y=n.selectedShapes.indexOf(e)>=0&&e.selectable,{textVerticalResizeEnabled:b}=c.flags,F=z(e.fontFamily),[L,A]=t.default.useState([]);t.default.useEffect((()=>{var e,t;const n=null!==(t=null===(e=r.current)||void 0===e?void 0:e.textArr)&&void 0!==t?t:[];JSON.stringify(n)!==JSON.stringify(L)&&A(n)})),t.default.useEffect((()=>{if(e.a.width){return}const t=r.current;t.width(600),e.set({width:1.4*t.getTextWidth()})}),[]),t.default.useLayoutEffect((()=>(0,o.autorun)((()=>{const t=r.current;(0,h.applyFilter)(t,e)}))));const[O]=(0,exports.useFontLoader)(n,e.fontFamily),T=(0,f.removeTags)(e.text),k=()=>{const e=r.current.clone({height:void 0}),t=Math.ceil(e.fontSize()*e.lineHeight()*e.textArr.length+1);return e.destroy(),t};t.default.useLayoutEffect((()=>{if(!O){return}const{textOverflow:t,textSplitAllowed:i}=c.flags;if(e.a.height){if(!n.isPlaying){if("change-font-size"!==t||w){if("resize"===t){const t=k();b&&e.a.height<t&&n.history.ignore((()=>{var n;(0,p.isAlive)(e)&&e.set({height:t}),null===(n=r.current)||void 0===n||n.height(t)}),!1,!0),b||e.a.height===t||n.history.ignore((()=>{var n;(0,p.isAlive)(e)&&e.set({height:t}),null===(n=r.current)||void 0===n||n.height(t)}),!1,!0)}}else{const t=function(e,t,n=!1){const i=e.fontSize(),r=e.height(),o=(0,f.removeTags)(t.text);let a=t.a.fontSize;e.height(void 0);const l=Math.round(2*t.a.fontSize)-1;for(let s=1;s<l;s++){const i=t.a.height&&e.height()>t.a.height;let r=o.split("\n").join(" ").split(/[\s-]+/).reduce(((e,t)=>/[\u3000-\u303F\u3040-\u309F\u30A0-\u30FF\uFF00-\uFFEF\u4E00-\u9FAF\uAC00-\uD7AF]/.test(t)?e.concat(t.split("")):e.concat(t)),[]),l=e.textArr.map((e=>e.text)).join(";");const s=r.find((e=>!l.includes(e)||(l=l.replace(e,""),!1)));if(!(i||s&&!n)){break}a-=.5,e.fontSize(a)}return e.fontSize(i),e.height(r),a}(r.current,e,i);if(t!==e.a.fontSize){return void n.history.ignore((()=>{e.set({fontSize:t})}),!1,!0)}const o=k();e.a.height===o||b||n.history.ignore((()=>{e.set({height:o})}),!1,!0)}}}else{const t=k();n.history.ignore((()=>{e.set({height:t})}),!1,!0)}})),t.default.useLayoutEffect((()=>{const t=r.current;t&&(t.width(t.width()+1e-8),t._setTextData(),(0,h.applyFilter)(t,e))}),[O]);const M=t.default.useRef(null),$=t.default.useRef(0),R=t=>{t.evt.preventDefault();const i=n.selectedShapes.find((t=>t===e));i&&e.contentEditable&&($.current=function(e){var t;const n=e.target,i=function(e){var t=e.getAbsoluteTransform().copy();t.invert();var n=e.getStage().getPointerPosition();return t.point(n)}(n),r=n.textArr,o=Math.floor(i.y/(n.fontSize()*n.lineHeight())),a=r.slice(0,o).reduce(((e,t)=>e+t.text.length),o),l=null!==(t=r[o])&&void 0!==t?t:r[0];let s=0;return"right"===n.align()?s=n.width()-l.width:"center"===n.align()&&(s=n.width()/2-l.width/2),a+Math.round((i.x-s)/l.width*l.text.length)}(t),e.toggleEditMode())},H=!T&&e.placeholder?.6:e.a.opacity;(0,g.useFadeIn)(r,H);const q=(0,exports.getLineHeight)({fontLoaded:O,fontFamily:e.fontFamily,fontSize:e.a.fontSize,lineHeight:e.lineHeight}),C=e.selectable||"admin"===n.role,P=(0,s.useColor)(e),_=t.default.useMemo((()=>e.backgroundEnabled?function({lines:e,lineHeight:t,width:n,align:i="left",padding:r=0,cornerRadius:o=0}){var a;e.forEach(((e,t)=>{e.cx=n/2,"right"===i?e.cx=n-e.width/2:"left"===i&&(e.cx=e.width/2),"justify"!==i||e.lastInParagraph||(e.width=n),"justify"===i&&(e.cx=e.width/2)}));let s=`M ${null===(a=e[0])||void 0===a?void 0:a.cx} ${-r}`;e.forEach(((n,i)=>{const{cx:o}=n,a=e[i-1];a&&a.width>n.width?s+=` L ${o+n.width/2+r} ${i*t+r}`:s+=` L ${o+n.width/2+r} ${i*t-r}`;const l=e[i+1];l&&l.width>n.width?s+=` L ${o+n.width/2+r} ${(i+1)*t-r}`:s+=` L ${o+n.width/2+r} ${(i+1)*t+r}`}));for(var d=e.length-1;d>=0;d--){const n=e[d],{cx:i}=n,o=e[d+1];o&&o.width>n.width?s+=` L ${i-n.width/2-r} ${(d+1)*t-r}`:s+=` L ${i-n.width/2-r} ${(d+1)*t+r}`;const a=e[d-1];a&&a.width>n.width?s+=` L ${i-n.width/2-r} ${d*t+r}`:s+=` L ${i-n.width/2-r} ${d*t-r}`}s+=" Z";const u=(0,l.parsePath)(s);return(0,l.roundCommands)(u,o).path}({lines:JSON.parse(JSON.stringify(L)),cornerRadius:e.backgroundCornerRadius*(e.a.fontSize*q*.5),lineHeight:q*e.a.fontSize,padding:e.backgroundPadding*(e.a.fontSize*q*.5),width:e.a.width,align:e.align}):""),[e.backgroundEnabled,e.backgroundCornerRadius,e.a.fontSize,q,e.backgroundPadding,e.a.width,e.align,L]),D=(0,x.isTouchDevice)();let j=0;return"middle"===e.verticalAlign?j=(e.a.height-L.length*q*e.a.fontSize)/2:"bottom"===e.verticalAlign&&(j=e.a.height-L.length*q*e.a.fontSize),t.default.createElement(t.default.Fragment,null,t.default.createElement(i.Path,{ref:a,x:e.a.x,y:e.a.y,rotation:e.a.rotation,hideInExport:!e.showInExport,listening:!1,visible:e.backgroundEnabled,opacity:e.backgroundOpacity*H,data:_,fill:e.backgroundColor,offsetY:-j}),t.default.createElement(i.Text,Object.assign({ref:r,id:e.id,name:"element",hideInExport:!e.showInExport,editModeEnabled:e._editModeEnabled,x:e.a.x,y:e.a.y,rotation:e.a.rotation,width:e.a.width,height:e.a.height,text:T||e.placeholder,direction:S(T)},P,{stroke:e.stroke,lineJoin:"round",strokeWidth:e.strokeWidth,fillAfterStrokeEnabled:!0,fontSize:e.a.fontSize,fontFamily:`"${e.fontFamily}", "${F}"`,fontStyle:e.fontStyle+" "+e.fontWeight,textDecoration:e.textDecoration,align:e.align,verticalAlign:e.verticalAlign,draggable:D?e.draggable&&y:e.draggable,preventDefault:!D||y,opacity:H,visible:!e._editModeEnabled,ellipsis:"ellipsis"===c.flags.textOverflow,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,lineHeight:q,letterSpacing:e.letterSpacing*e.a.fontSize,listening:C,onDragMove:t=>{e.set({x:t.target.x(),y:t.target.y()})},onDragEnd:t=>{e.set({x:t.target.x(),y:t.target.y()})},onClick:R,onTap:R,onTransformStart:()=>{v(!0),m.current=r.current.height()},onTransform:t=>{var n,i;const r=t.target;null===(n=a.current)||void 0===n||n.setAttrs({x:r.x(),y:r.y(),rotation:r.rotation(),scale:r.scale()});const o=(null===(i=r.getStage())||void 0===i?void 0:i.findOne("Transformer")).getActiveAnchor();if("middle-left"===o||"middle-right"===o){const t=r.scaleX(),n=r.width()*t,i=e.a.fontSize;let o=n;n<i&&(o=i,M.current&&r.position(M.current)),r.width(o),r.scaleX(1),r.scaleY(1);const a=k();if("ellipsis"!==c.flags.textOverflow){const t=Math.max(a,m.current);r.height(t),e.set({height:r.height()})}e.set({x:r.x(),y:r.y(),width:r.width(),rotation:r.rotation()}),(0,h.applyFilter)(r,e)}if("top-center"===o||"bottom-center"===o){let n="resize"===c.flags.textOverflow?k():q*e.a.fontSize;t.target.height(Math.max(n,t.target.height()*t.target.scaleY())),t.target.scaleY(1)}M.current=t.target.position()},onTransformEnd:t=>{var n;const i=t.target.scaleX();t.target.scaleX(1),t.target.scaleY(1),e.set({fontSize:Math.round(e.a.fontSize*i),width:Math.ceil(t.target.width()*i),x:t.target.x(),y:t.target.y(),rotation:t.target.rotation(),height:t.target.height()*i,shadowBlur:e.shadowBlur*i,shadowOffsetX:e.shadowOffsetX*i,shadowOffsetY:e.shadowOffsetY*i,strokeWidth:e.strokeWidth*i}),null===(n=a.current)||void 0===n||n.setAttrs({scaleX:1,scaleY:1}),v(!1)}})),d&&t.default.createElement(i.Group,{x:e.a.x,y:e.a.y,rotation:e.a.rotation},t.default.createElement(E,{textNodeRef:r,element:e,selectAll:u,cursorPosition:$.current,onBlur:()=>{e.toggleEditMode(!1)}})))}));

package/canvas/tooltip.js

@@ -1 +1 @@
-var e=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.Tooltip=void 0;const t=e(require("react")),n=require("mobx-react-lite"),l=require("react-konva-utils"),o=require("@blueprintjs/core"),r=require("../utils/math"),a=require("../toolbar/element-container"),u=require("../toolbar/text-ai-write"),i=require("../toolbar/duplicate-button"),s=require("../toolbar/remove-button"),c=require("../toolbar/position-picker"),d=require("../toolbar/group-button");function f(e,t){return e.classList.contains(t)?e:e.parentElement?f(e.parentElement,t):null}const p=()=>null;exports.Tooltip=(0,n.observer)((({store:e,page:n,components:v,stageRef:m})=>{var g,E;const h=(0,r.getTotalClientRect)(e.selectedShapes),b=e.selectedShapes.every((e=>e.page===n)),k=t.default.useRef(null),[x,y]=t.default.useState(!1),C=e._hasCroppedImages;e.selectedElements.length,t.default.useEffect((()=>{var e,t,n;const l=()=>{y(!0)},o=()=>{y(!1)};null===(e=null==m?void 0:m.current)||void 0===e||e.on("dragstart",l),null===(t=null==m?void 0:m.current)||void 0===t||t.on("dragend",o);const r=null===(n=null==m?void 0:m.current)||void 0===n?void 0:n.findOne("Transformer");return null==r||r.on("transformstart",l),null==r||r.on("transformend",o),()=>{var e,t;null===(e=null==m?void 0:m.current)||void 0===e||e.off("dragstart",l),null===(t=null==m?void 0:m.current)||void 0===t||t.off("dragend",o),null==r||r.off("transformstart",l),null==r||r.off("transformend",o)}}),[]);const[q,R]=t.default.useState({fit:!0,needCalculate:!1,token:Math.random()});if(t.default.useEffect((()=>{0!==e.selectedElements.length&&R({fit:!0,needCalculate:!0,token:Math.random()})}),[e.selectedElements,x]),t.default.useEffect((()=>{setTimeout((()=>{if(!k.current){return}if(!q.needCalculate){return}const e=f(k.current,"polotno-workspace-container");if(!e){return}const t=e.getBoundingClientRect(),n=k.current.getBoundingClientRect(),l=(n.right,t.left,n.top-t.top),o=(n.left,t.left,n.bottom-t.top);l<20&&q.fit&&R({fit:!1,needCalculate:!1,token:q.token}),o-t.height>-20&&!q.fit&&R({fit:!0,needCalculate:!1,token:q.token})}),10)}),[q.needCalculate,k.current,q.token]),t.default.useEffect((()=>{const t=f(m.current.content,"polotno-workspace-inner"),n=()=>{e.selectedElements.length&&R({fit:!0,needCalculate:!0,token:Math.random()})};return null==t||t.addEventListener("scroll",n),()=>{null==t||t.removeEventListener("scroll",n)}}),[]),0===e.selectedShapes.length){return null}if(x){return null}if(!b){return null}if(e.activePage!==n){return null}if(C){return null}const T=(null==v?void 0:v.Position)||c.PositionPicker,B=(null==v?void 0:v.Duplicate)||i.DuplicateButton,M=(null==v?void 0:v.Remove)||s.RemoveButton,_=(null==v?void 0:v.Group)||d.GroupButton,w=(null==v?void 0:v.Lock)||p,O=e.selectedElements[0].type,P=Object.assign({TextAiWrite:u.TextAiWrite},v),j=(0,a.extendToolbar)({components:P,type:O,usedItems:[]}),S=(null===(E=null===(g=null==m?void 0:m.current)||void 0===g?void 0:g.findOne("Transformer"))||void 0===E?void 0:E.rotation())||0;let L=30;return Math.abs(S)<5&&q.fit&&(L=80),Math.abs(S)>160&&!q.fit&&(L=80),t.default.createElement(l.Html,{parentNodeFunc:({stage:e})=>{var t,n;return(null===(t=null==e?void 0:e.container())||void 0===t?void 0:t.closest(".polotno-workspace-container"))||(null===(n=null==e?void 0:e.container())||void 0===n?void 0:n.parentNode)},transformFunc:e=>{var t;const n=h.x+h.width/2,l=q.fit?h.y*e.scaleY-L:h.y*e.scaleY+h.height*e.scaleY+L,o=null===(t=null==m?void 0:m.current)||void 0===t?void 0:t.container(),r=(null==o?void 0:o.getBoundingClientRect())||{left:0,top:0},a=null==o?void 0:o.closest(".polotno-workspace-container"),u=(null==a?void 0:a.getBoundingClientRect())||{left:0,top:0},i=r.left-u.left,s=r.top-u.top;return Object.assign(Object.assign({},e),{x:i+e.x+n*e.scaleX,y:s+e.y+l,scaleX:1,scaleY:1})},divProps:{style:{pointerEvents:"none",position:"absolute",zIndex:9}}},t.default.createElement("div",{ref:k,style:{pointerEvents:"none"}},t.default.createElement(o.Navbar,{style:{padding:"2px",borderRadius:"5px",height:"34px",transform:"translate(-50%, -50%)",pointerEvents:"auto"}},t.default.createElement(o.NavbarGroup,{style:{height:"30px"}},j.map((n=>{const l=P[n];return t.default.createElement(l,{elements:e.selectedElements,element:e.selectedElements[0],store:e,key:n})})),t.default.createElement(_,{store:e}),t.default.createElement(w,{store:e}),t.default.createElement(B,{store:e}),t.default.createElement(M,{store:e}),t.default.createElement(T,{store:e})))))}));
+var e=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.Tooltip=void 0;const t=e(require("react")),n=require("mobx-react-lite"),l=require("react-konva-utils"),o=require("@blueprintjs/core"),r=require("../utils/math"),a=require("../toolbar/element-container"),u=require("../toolbar/text-ai-write"),i=require("../toolbar/duplicate-button"),s=require("../toolbar/remove-button"),c=require("../toolbar/position-picker"),d=require("../toolbar/group-button");function f(e,t){return e.classList.contains(t)?e:e.parentElement?f(e.parentElement,t):null}const p=()=>null;exports.Tooltip=(0,n.observer)((({store:e,page:n,components:v,stageRef:m})=>{var g,E;const h=(0,r.getTotalClientRect)(e.selectedShapes),b=e.selectedShapes.every((e=>e.page===n)),k=t.default.useRef(null),[x,y]=t.default.useState(!1),C=e._hasCroppedImages;e.selectedElements.length,t.default.useEffect((()=>{var e,t,n;const l=()=>{y(!0)},o=()=>{y(!1)};null===(e=null==m?void 0:m.current)||void 0===e||e.on("dragstart",l),null===(t=null==m?void 0:m.current)||void 0===t||t.on("dragend",o);const r=null===(n=null==m?void 0:m.current)||void 0===n?void 0:n.findOne("Transformer");return null==r||r.on("transformstart",l),null==r||r.on("transformend",o),()=>{var e,t;null===(e=null==m?void 0:m.current)||void 0===e||e.off("dragstart",l),null===(t=null==m?void 0:m.current)||void 0===t||t.off("dragend",o),null==r||r.off("transformstart",l),null==r||r.off("transformend",o)}}),[]);const[q,R]=t.default.useState({fit:!0,needCalculate:!1,token:Math.random()});if(t.default.useEffect((()=>{0!==e.selectedElements.length&&R({fit:!0,needCalculate:!0,token:Math.random()})}),[e.selectedElements,x]),t.default.useEffect((()=>{setTimeout((()=>{if(!k.current){return}if(!q.needCalculate){return}const e=f(k.current,"polotno-workspace-container");if(!e){return}const t=e.getBoundingClientRect(),n=k.current.getBoundingClientRect(),l=(n.right,t.left,n.top-t.top),o=(n.left,t.left,n.bottom-t.top);l<20&&q.fit&&R({fit:!1,needCalculate:!1,token:q.token}),o-t.height>-20&&!q.fit&&R({fit:!0,needCalculate:!1,token:q.token})}),10)}),[q.needCalculate,k.current,q.token]),t.default.useEffect((()=>{const t=f(m.current.content,"polotno-workspace-inner"),n=()=>{e.selectedElements.length&&R({fit:!0,needCalculate:!0,token:Math.random()})};return null==t||t.addEventListener("scroll",n),()=>{null==t||t.removeEventListener("scroll",n)}}),[]),0===e.selectedShapes.length){return null}if(x){return null}if(!b){return null}if(e.activePage!==n){return null}if(C){return null}const T=(null==v?void 0:v.Position)||c.PositionPicker,B=(null==v?void 0:v.Duplicate)||i.DuplicateButton,M=(null==v?void 0:v.Remove)||s.RemoveButton,_=(null==v?void 0:v.Group)||d.GroupButton,w=(null==v?void 0:v.Lock)||p,O=e.selectedElements[0].type,P=Object.assign({TextAiWrite:u.TextAiWrite},v),j=(0,a.extendToolbar)({components:P,type:O,usedItems:[]}),S=(null===(E=null===(g=null==m?void 0:m.current)||void 0===g?void 0:g.findOne("Transformer"))||void 0===E?void 0:E.rotation())||0;let L=30;return Math.abs(S)<30&&q.fit&&(L=80),Math.abs(S)>140&&!q.fit&&(L=80),t.default.createElement(l.Html,{parentNodeFunc:({stage:e})=>{var t,n;return(null===(t=null==e?void 0:e.container())||void 0===t?void 0:t.closest(".polotno-workspace-container"))||(null===(n=null==e?void 0:e.container())||void 0===n?void 0:n.parentNode)},transformFunc:e=>{var t;const n=h.x+h.width/2,l=q.fit?h.y*e.scaleY-L:h.y*e.scaleY+h.height*e.scaleY+L,o=null===(t=null==m?void 0:m.current)||void 0===t?void 0:t.container(),r=(null==o?void 0:o.getBoundingClientRect())||{left:0,top:0},a=null==o?void 0:o.closest(".polotno-workspace-container"),u=(null==a?void 0:a.getBoundingClientRect())||{left:0,top:0},i=r.left-u.left,s=r.top-u.top;return Object.assign(Object.assign({},e),{x:i+e.x+n*e.scaleX,y:s+e.y+l,scaleX:1,scaleY:1})},divProps:{style:{pointerEvents:"none",position:"absolute",zIndex:9}}},t.default.createElement("div",{ref:k,style:{pointerEvents:"none"}},t.default.createElement(o.Navbar,{style:{padding:"2px",borderRadius:"5px",height:"34px",transform:"translate(-50%, -50%)",pointerEvents:"auto"}},t.default.createElement(o.NavbarGroup,{style:{height:"30px"}},j.map((n=>{const l=P[n];return t.default.createElement(l,{elements:e.selectedElements,element:e.selectedElements[0],store:e,key:n})})),t.default.createElement(_,{store:e}),t.default.createElement(w,{store:e}),t.default.createElement(B,{store:e}),t.default.createElement(M,{store:e}),t.default.createElement(T,{store:e})))))}));

package/canvas/video-element.js

@@ -1 +1 @@
-var e,t=this&&this.__createBinding||(Object.create?function(e,t,r,a){void 0===a&&(a=r);var n=Object.getOwnPropertyDescriptor(t,r);n&&!("get"in n?!t.__esModule:n.writable||n.configurable)||(n={enumerable:!0,get:function(){return t[r]}}),Object.defineProperty(e,a,n)}:function(e,t,r,a){void 0===a&&(a=r),e[a]=t[r]}),r=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),a=this&&this.__importStar||(e=function(t){return e=Object.getOwnPropertyNames||function(e){var t=[];for(var r in e){Object.prototype.hasOwnProperty.call(e,r)&&(t[t.length]=r)}return t},e(t)},function(a){if(a&&a.__esModule){return a}var n={};if(null!=a){for(var i=e(a),o=0;o<i.length;o++){"default"!==i[o]&&t(n,a,i[o])}}return r(n,a),n}),n=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.VideoElement=exports.useLoader=exports.setVideoLoaderHook=exports.useCornerRadiusAndCrop=void 0;const i=n(require("react")),o=require("mobx-react-lite"),d=require("mobx"),h=require("react-konva"),l=n(require("use-image")),u=n(require("konva")),c=require("react-konva-utils"),s=require("./highlighter"),g=require("../utils/loader"),f=a(require("../utils/svg")),p=require("../utils/flags"),m=require("./apply-filters"),w=require("./use-fadein"),v=require("../utils/screen");function x(){return document.createElement("canvas")}const y=new window.Image;y.src=f.svgToURL('\n  <svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n  <path opacity="0.6" d="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 M=new window.Image;M.src=f.svgToURL('\n  <svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n  <path opacity="0.6" d="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'),exports.useCornerRadiusAndCrop=(e,t,r,a,n=0,o=!1)=>{const d=Math.floor(Math.max(e.width*a,1)),h=Math.floor(Math.max(e.height*a,1)),l=Math.min(n*a,d/2,h/2),c=Math.max(e.width/r.width,e.height/r.height)*a,s=e.page._exportingOrRendering&&p.flags.imageDownScalingEnabled&&c<1&&!o,g=0===r.x&&0===r.y&&r.width===(null==t?void 0:t.width)&&r.height===(null==t?void 0:t.height),f=i.default.useMemo((()=>{if(t&&t.width&&t.height){return g&&0===l&&!s?void 0:x()}}),[t,l,s,g]),m=()=>{if(!f||!t){return}f.width=d,f.height=h;const e=f.getContext("2d");if(!e){return}l&&(e.beginPath(),e.moveTo(l,0),e.lineTo(d-l,0),e.arc(d-l,l,l,3*Math.PI/2,0,!1),e.lineTo(d,h-l),e.arc(d-l,h-l,l,0,Math.PI/2,!1),e.lineTo(l,h),e.arc(l,h-l,l,Math.PI/2,Math.PI,!1),e.lineTo(0,l),e.arc(l,l,l,Math.PI,3*Math.PI/2,!1),e.clip());const a=s?function(e,t){var r,a;const n=x();n.width=e.width,n.height=e.height,null===(r=n.getContext("2d"))||void 0===r||r.drawImage(e,0,0,n.width,n.height);const i=function(e,t,r,a,n,i,o){for(var d=new ImageData(t,r),h=new Int32Array(e.data.buffer),l=e.width,u=new Int32Array(d.data.buffer),c=d.width,s=t/i,g=r/o,f=Math.round(1/s),p=Math.round(1/g),m=f*p,w=0;w<d.height;w++){for(var v=0;v<c;v++){for(var x=0+Math.round(v/s)+(0+Math.round(w/g))*l,y=0,M=0,E=0,b=0,L=0;L<p;L++){for(var C=0;C<f;C++){var R=h[x+C+L*l];y+=R<<24>>>24,M+=R<<16>>>24,E+=R<<8>>>24,b+=R>>>24}}y=Math.round(y/m),M=Math.round(M/m),E=Math.round(E/m),b=Math.round(b/m),u[v+w*c]=b<<24|E<<16|M<<8|y}}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===(a=n.getContext("2d"))||void 0===a||a.putImageData(i,0,0),n}(t,c):t,n=s?{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(a,n.x,n.y,n.width,n.height,0,0,f.width,f.height)};return i.default.useLayoutEffect((()=>{m()}),[f,e.width,e.height,r.x,r.y,r.width,r.height,n,a,o,e.page._exportingOrRendering,s]),i.default.useEffect((()=>()=>{f&&"CANVAS"===f.nodeName&&u.default.Util.releaseCanvas(f)}),[f]),[f||t,m]};const E=x(),b=(0,o.observer)((({element:e})=>{const t=Math.min(30,e.width/4,e.height/4),r=i.default.useRef(null);return i.default.useEffect((()=>{const e=r.current;if(!e){return}const t=new u.default.Animation((t=>{e.rotate(((null==t?void 0:t.timeDiff)||0)/2)}),e.getLayer());return t.start(),()=>{t.stop()}})),i.default.createElement(h.Group,{x:e.a.x,y:e.a.y,rotation:e.a.rotation,listening:!1,opacity:e.a.opacity,hideInExport:!e.showInExport},i.default.createElement(h.Rect,{width:e.width,height:e.height,fill:"rgba(124, 173, 212, 0.8)"}),i.default.createElement(h.Arc,{ref:r,x:e.width/2,y:e.height/2,fill:"white",outerRadius:Math.abs(t),innerRadius:Math.max(1,t-5),angle:270}))})),L=(0,o.observer)((({element:e})=>{const t=Math.max(10,Math.min(30,e.width/25));return i.default.createElement(h.Group,{x:e.a.x,y:e.a.y,rotation:e.a.rotation,listening:!1,opacity:e.a.opacity,hideInExport:!e.showInExport},i.default.createElement(h.Rect,{width:e.width,height:e.height,fill:"rgba(223, 102, 102, 0.8)"}),i.default.createElement(h.Text,{text:"Can not load the video...",fontSize:t,width:e.width,height:e.height,align:"center",fill:"white",verticalAlign:"middle",padding:5}))}));let C=function(e,t,r){const a=i.default.useRef("loading"),n=i.default.useRef(null),[o,d]=i.default.useState(0),h=i.default.useRef(),l=i.default.useRef(),u=i.default.useRef();return h.current===e&&l.current===t&&u.current===r||(a.current="loading",n.current=void 0,h.current=e,l.current=t,u.current=r),i.default.useLayoutEffect((function(){if(e){var i=document.createElement("video");return i.addEventListener("canplay",o),i.addEventListener("error",h),t&&(i.crossOrigin=t),r&&(i.referrerpolicy=r),i.src=e,i.load(),function(){i.removeEventListener("canplay",o),i.removeEventListener("error",h)}}function o(){a.current="loaded",n.current=i,n.current.currentTime=0,d(Math.random()),n.current.removeEventListener("canplay",o)}function h(e){const t=4===i.readyState,r=i.buffered&&i.buffered.length>0&&i.buffered.end(i.buffered.length-1)/i.duration*100>=100;t&&r||(a.current="failed",n.current=void 0,d(Math.random()))}}),[e,t,r]),[n.current,a.current]};exports.setVideoLoaderHook=e=>{C=e},exports.useLoader=(e,t,r)=>{const a=i.default.useRef(),n=()=>{var e;null===(e=a.current)||void 0===e||e.call(a),a.current=void 0};i.default.useEffect((()=>n),[]),i.default.useLayoutEffect((()=>{const i=t.slice(0,200),o=`video with id ${r} url: ${i}`;"loading"!==e||a.current||(a.current=(0,g.incrementLoader)(o)),"loading"!==e&&n(),"failed"===e&&(0,g.triggerLoadError)(o)}),[e])},exports.VideoElement=(0,o.observer)((({element:e,store:t})=>{var r;const[a,n]=i.default.useState(!1),o=i.default.useRef(null),p=i.default.useRef(null),[R,T]=i.default.useState(!1),I=t.selectedShapes.indexOf(e)>=0&&e.selectable,[_,S]=i.default.useState(!1),[O,k]=C(e.src,"anonymous"),P=t.activePage===e.page;(0,exports.useLoader)(k,e.src,e.id),O&&(O.width=O.videoWidth,O.height=O.videoHeight,O.playsInline=!0);const X=O||E;i.default.useEffect((()=>{O&&t.history.ignore((()=>{e.set({duration:1e3*O.duration})}))}),[O]),i.default.useEffect((()=>{var r;if(!O){return}const a=t.animatedElementsIds,n=(!a.length||a.includes(e.id))&&t.isPlaying,i=P&&(n||_);if(!i){return void O.pause()}i&&(O.currentTime=e.startTime*O.duration,O.play());const d=new u.default.Animation((()=>{Q()}),null===(r=o.current)||void 0===r?void 0:r.getLayer());d.start();const h=()=>{S(!1),O.currentTime=e.startTime*O.duration},l=()=>{O.currentTime>=e.endTime*O.duration&&(O.pause(),O.currentTime=e.startTime*O.duration,S(!1))};return O.addEventListener("ended",h),O.addEventListener("timeupdate",l),()=>{O.pause(),d.stop(),O.removeEventListener("ended",h),O.removeEventListener("timeupdate",l)}}),[O,_,t.isPlaying,P]),i.default.useEffect((()=>{O&&(O.volume=e.volume)}),[O,e.volume]);const Y=i.default.useRef();i.default.useEffect((()=>{const r=(0,d.autorun)((()=>{var r,a;if(O){const n=t.animatedElementsIds;if(n.length&&!n.includes(e.id)){return}const i=(t.currentTime-e.page.startTime)%e.duration;if(Math.abs(1e3*O.currentTime-i)>500||!t.isPlaying){const r=i/1e3;r!==O.currentTime&&(O.currentTime=r),4!==O.readyState&&!t.isPlaying&&!Y.current&&(Y.current=(0,g.incrementLoader)(`video ${e.id}`))}Q(),null===(a=null===(r=o.current)||void 0===r?void 0:r.getLayer())||void 0===a||a.batchDraw()}}));return()=>{r(),Y.current&&(Y.current(),Y.current=null)}}),[t,O]),i.default.useEffect((()=>{if(!O){return}const t=()=>{var t,r;4!==O.readyState&&e.page._exportingOrRendering||Y.current&&(Q(),null===(r=null===(t=o.current)||void 0===t?void 0:t.getLayer())||void 0===r||r.batchDraw(),Y.current(),Y.current=null)};let r;return e.page._exportingOrRendering&&(r=setInterval(t,50)),O.addEventListener("timeupdate",t),O.addEventListener("canplay",t),()=>{clearInterval(r),O.removeEventListener("timeupdate",t),O.removeEventListener("canplay",t)}}),[e.page._exportingOrRendering,O,e.id,g.incrementLoader]);let{cropX:W,cropY:A,cropWidth:D,cropHeight:H}=e;"loaded"!==k&&(W=A=0,D=H=1);const q=X.width*D,j=X.height*H,z=e.width/e.height;let B,F;const V=q/j,Z="svg"===e.type;Z?(B=q,F=j):z>=V?(B=q,F=q/z):(B=j*z,F=j);const U={x:X.width*W,y:X.height*A,width:B,height:F},N=null!==(r=e.cornerRadius)&&void 0!==r?r:0,[G,$]=(0,exports.useCornerRadiusAndCrop)(e,X,U,t._elementsPixelRatio,N,a||e._cropModeEnabled||"svg"===e.type);let[J,K]=((e,t,r,a)=>{const n=(e=>{const[t,r]=i.default.useState(e);return i.default.useEffect((()=>{(async()=>{const a=await async function(e){if(!(e.indexOf("data:image/svg+xml")>=0||e.indexOf(".svg")>=0)){return e}const t=await f.urlToString(e),r=f.fixSize(t);return f.svgToURL(r)}(e);a!==t&&r(a)})()}),[e]),t})(e.clipSrc||""),[o,d]=(0,l.default)(n,"anonymous"),h=e.clipSrc?d:"loaded";(0,exports.useLoader)(h,e.clipSrc,e.id);const c=i.default.useMemo((()=>{if(t&&o){return x()}}),[t,o]);function s(){var a;if(!o){return}if(!t||!t.width||!t.height){return}if(!o||!o.width||!o.height){return}if(!c){return}const n=x(),i=Math.max(e.width/o.width*r,e.height/o.height*r);n.width=o.width*i,n.height=o.height*i,null===(a=n.getContext("2d"))||void 0===a||a.drawImage(o,0,0,n.width,n.height),c.width=Math.max(t.width,1),c.height=Math.max(t.height,1);const d=c.getContext("2d");d&&(d.save(),d.drawImage(n,0,0,t.width,t.height),u.default.Util.releaseCanvas(n),d.globalCompositeOperation="source-in",d.drawImage(t,0,0,c.width,c.height),d.restore())}return i.default.useLayoutEffect((()=>{s()}),[c,t,o,e.width,e.height,r,...a]),[e.clipSrc&&o?c:t,s]})(e,G,t._elementsPixelRatio,[U,N,t._elementsPixelRatio]);function Q(){$(),K()}const ee=Math.max(e.width/B,e.height/F);i.default.useEffect((()=>{var t;if(!e._cropModeEnabled){return}const r=null===(t=o.current)||void 0===t?void 0:t.getStage();function a(t){e._cropModeEnabled&&t.target!==p.current&&e.toggleCropMode(!1)}function n(t){e._cropModeEnabled&&t.target.parentNode!==r.content&&e.toggleCropMode(!1)}return document.body.addEventListener("click",n),null==r||r.on("click",a),null==r||r.on("tap",a),()=>{document.body.removeEventListener("click",n),document.body.removeEventListener("touchstart",n),null==r||r.off("click",a),null==r||r.off("click",a)}}),[e._cropModeEnabled]),i.default.useLayoutEffect((()=>{if(!a&&!e._cropModeEnabled){return(0,m.applyFilter)(o.current,e),(0,d.autorun)((()=>{(0,m.applyFilter)(o.current,e)}),{delay:100})}}),[X,a,D,H,e._cropModeEnabled]),i.default.useLayoutEffect((()=>{var t;a||e._cropModeEnabled?null===(t=o.current)||void 0===t||t.clearCache():(0,m.applyFilter)(o.current,e)}),[a,e.width,e.height,e._cropModeEnabled]),i.default.useEffect((()=>{(0,m.applyFilter)(o.current,e)}),[e.shadowEnabled,e.shadowBlur,e.cornerRadius,e.shadowColor,e.shadowOffsetX,e.shadowOffsetY,e.shadowOpacity]);const te=i.default.useRef(null),re=i.default.useRef(null),ae=i.default.useRef(null);i.default.useLayoutEffect((()=>{e._cropModeEnabled&&(re.current.nodes([te.current]),ae.current.nodes([p.current]))}),[e._cropModeEnabled]);const ne=t=>{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(),n=Math.min(1,B/r),i=Math.min(1,F/a),o=1-n,d=Math.min(o,Math.max(0,Math.round(-t.target.x())/r)),h=1-i,l=Math.min(h,Math.max(0,Math.round(-t.target.y())/a));t.target.setAttrs({x:-d*X.width,y:-l*X.height,scaleX:1,scaleY:1}),e.set({cropX:d,cropY:l,cropWidth:n,cropHeight:i})},ie=()=>{"svg"!==e.type&&e.contentEditable&&setTimeout((()=>{e.toggleCropMode(!0)}))},oe="loading"===k,de="failed"===k,he=!oe&&!de,le=i.default.useRef({cropX:0,cropY:0,cropWidth:0,cropHeight:0}),ue=he?e.a.opacity:0;(0,w.useFadeIn)(o,ue);const ce=e.selectable||"admin"===t.role,se=(0,v.isTouchDevice)();return i.default.createElement(i.default.Fragment,null,oe&&i.default.createElement(b,{element:e}),de&&i.default.createElement(L,{element:e}),i.default.createElement(h.Image,{ref:o,name:"element",id:e.id,image:J,x:e.a.x,y:e.a.y,width:e.a.width||1,height:e.a.height||1,rotation:e.a.rotation,opacity:ue,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,customCrop:U,listening:ce,draggable:se?e.draggable&&I:e.draggable,preventDefault:!se||I,hideInExport:!e.showInExport,onMouseEnter:()=>{T(!0)},onMouseLeave:()=>{T(!1)},onDragMove:t=>{e.set({x:t.target.x(),y:t.target.y()})},onDragEnd:t=>{e.set({x:t.target.x(),y:t.target.y()})},onDblClick:ie,onDblTap:ie,onTransformStart:()=>{n(!0),le.current={cropX:e.cropX,cropY:e.cropY,cropWidth:e.cropWidth,cropHeight:e.cropHeight}},onTransform:t=>{var r;const a=t.currentTarget,n=Math.abs(a.scaleX()-1)<1e-7?1:a.scaleX(),i=Math.abs(a.scaleY()-1)<1e-7?1:a.scaleY();a.scaleX(1),a.scaleY(1);const o=null===(r=t.target.getStage())||void 0===r?void 0:r.findOne("Transformer"),d=1-B/X.width,h=Math.min(d,Math.max(0,e.cropX)),l=1-F/X.height,u=Math.min(l,Math.max(0,e.cropY)),c=o.getActiveAnchor(),s=!(c.indexOf("middle")>=0||c.indexOf("center")>=0),g=!s&&n<1&&le.current.cropHeight>F/X.height;let f=s?e.cropWidth:e.cropWidth*n;g&&(f=e.cropWidth);const p=!s&&i<1&&le.current.cropWidth>B/X.width;let m=s?e.cropHeight:e.cropHeight*i;p&&(m=e.cropHeight),Z&&(f=e.cropWidth,m=e.cropHeight),e.set({cropX:h,cropY:u,x:a.x(),y:a.y(),width:a.width()*n,height:a.height()*i,rotation:t.target.rotation(),cropWidth:Math.min(f,1-h),cropHeight:Math.min(m,1-u)})},onTransformEnd:t=>{const r=t.currentTarget;e.set({width:r.width(),height:r.height(),x:r.x(),y:r.y(),rotation:t.target.rotation(),cropWidth:B/X.width,cropHeight:F/X.height}),n(!1)}}),i.default.createElement(h.Rect,{x:e.a.x,y:e.a.y,width:Math.max(e.a.width-e.borderSize,0),height:Math.max(e.a.height-e.borderSize,0),opacity:ue,offsetX:-e.borderSize/2,offsetY:-e.borderSize/2,stroke:e.borderColor,strokeWidth:e.borderSize,listening:!1,visible:!!e.borderSize,rotation:e.rotation,cornerRadius:Math.max(0,N-e.borderSize),hideInExport:!e.showInExport}),!t.isPlaying&&i.default.createElement(h.Image,{image:_?M:y,x:e.a.x,y:e.a.y,offsetX:-e.a.width/2+15/t.scale,offsetY:-e.a.height/2+15/t.scale,rotation:e.a.rotation,width:30/t.scale,height:30/t.scale,hideInExport:!0,onClick:()=>S(!_),onTap:()=>S(!_)}),e._cropModeEnabled&&i.default.createElement(c.Portal,{selector:".page-abs-container",enabled:!0},i.default.createElement(h.Rect,{x:-window.innerWidth/t.scale,y:-window.innerWidth/t.scale,width:window.innerWidth/t.scale*3,height:window.innerWidth/t.scale*3,fill:"rgba(0,0,0,0.3)"}),i.default.createElement(h.Image,{listening:!1,image:J,x:e.a.x,y:e.a.y,width:e.a.width,height:e.a.height,rotation:e.a.rotation,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur}),i.default.createElement(h.Group,{x:e.a.x,y:e.a.y,rotation:e.a.rotation,scaleX:ee,scaleY:ee},i.default.createElement(h.Image,{image:X,ref:p,opacity:.4,draggable:!0,x:-e.cropX*X.width,y:-e.cropY*X.height,onDragMove:ne,onTransform:ne}),i.default.createElement(h.Transformer,{ref:ae,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}),i.default.createElement(h.Rect,{width:B,height:F,ref:te,listening:!1,onTransform:t=>{t.target.x()<-e.cropX*X.width-1e-9&&(t.target.x(-e.cropX*X.width),t.target.scaleX(1)),t.target.y()<-e.cropY*X.height-1e-9&&(t.target.y(-e.cropY*X.height),t.target.scaleY(1));const r=Math.min(1,Math.max(0,e.cropX+t.target.x()/X.width)),a=Math.min(1,Math.max(0,t.target.y()/X.height+e.cropY)),n=t.target.width()*t.target.scaleX(),i=t.target.height()*t.target.scaleY(),o=Math.min(1-r,n/X.width),d=Math.min(1-a,i/X.height),h=t.target.getAbsolutePosition(t.target.getParent().getParent());t.target.scale({x:1,y:1}),t.target.position({x:0,y:0}),e.set({x:h.x,y:h.y,cropX:r,cropY:a,cropWidth:o,cropHeight:d,width:Math.min(n*ee,X.width*(1-r)*ee),height:Math.min(i*ee,X.height*(1-a)*ee)})}}),i.default.createElement(h.Transformer,{ref:re,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:e.resizable}))),(R||I)&&i.default.createElement(s.Highlighter,{element:e}))}));
+var e,t=this&&this.__createBinding||(Object.create?function(e,t,r,a){void 0===a&&(a=r);var n=Object.getOwnPropertyDescriptor(t,r);n&&!("get"in n?!t.__esModule:n.writable||n.configurable)||(n={enumerable:!0,get:function(){return t[r]}}),Object.defineProperty(e,a,n)}:function(e,t,r,a){void 0===a&&(a=r),e[a]=t[r]}),r=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),a=this&&this.__importStar||(e=function(t){return e=Object.getOwnPropertyNames||function(e){var t=[];for(var r in e){Object.prototype.hasOwnProperty.call(e,r)&&(t[t.length]=r)}return t},e(t)},function(a){if(a&&a.__esModule){return a}var n={};if(null!=a){for(var i=e(a),o=0;o<i.length;o++){"default"!==i[o]&&t(n,a,i[o])}}return r(n,a),n}),n=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.VideoElement=exports.useLoader=exports.setVideoLoaderHook=exports.useCornerRadiusAndCrop=void 0;const i=n(require("react")),o=require("mobx-react-lite"),d=require("mobx"),h=require("react-konva"),l=n(require("use-image")),u=n(require("konva")),c=require("react-konva-utils"),s=require("../utils/loader"),g=a(require("../utils/svg")),f=require("../utils/flags"),p=require("./apply-filters"),m=require("./use-fadein"),w=require("../utils/screen");function v(){return document.createElement("canvas")}const x=new window.Image;x.src=g.svgToURL('\n  <svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n  <path opacity="0.6" d="M4 5.49683V18.5032C4 20.05 5.68077 21.0113 7.01404 20.227L18.0694 13.7239C19.384 12.9506 19.384 11.0494 18.0694 10.2761L7.01404 3.77296C5.68077 2.98869 4 3.95 4 5.49683Z" fill="white"/>\n  <path d="M4 5.49683V18.5032C4 20.05 5.68077 21.0113 7.01404 20.227L18.0694 13.7239C19.384 12.9506 19.384 11.0494 18.0694 10.2761L7.01404 3.77296C5.68077 2.98869 4 3.95 4 5.49683Z" stroke="#323232" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>\n  </svg>\n');const y=new window.Image;y.src=g.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'),exports.useCornerRadiusAndCrop=(e,t,r,a,n=0,o=!1)=>{const d=Math.floor(Math.max(e.width*a,1)),h=Math.floor(Math.max(e.height*a,1)),l=Math.min(n*a,d/2,h/2),c=Math.max(e.width/r.width,e.height/r.height)*a,s=e.page._exportingOrRendering&&f.flags.imageDownScalingEnabled&&c<1&&!o,g=0===r.x&&0===r.y&&r.width===(null==t?void 0:t.width)&&r.height===(null==t?void 0:t.height),p=i.default.useMemo((()=>{if(t&&t.width&&t.height){return g&&0===l&&!s?void 0:v()}}),[t,l,s,g]),m=()=>{if(!p||!t){return}p.width=d,p.height=h;const e=p.getContext("2d");if(!e){return}l&&(e.beginPath(),e.moveTo(l,0),e.lineTo(d-l,0),e.arc(d-l,l,l,3*Math.PI/2,0,!1),e.lineTo(d,h-l),e.arc(d-l,h-l,l,0,Math.PI/2,!1),e.lineTo(l,h),e.arc(l,h-l,l,Math.PI/2,Math.PI,!1),e.lineTo(0,l),e.arc(l,l,l,Math.PI,3*Math.PI/2,!1),e.clip());const a=s?function(e,t){var r,a;const n=v();n.width=e.width,n.height=e.height,null===(r=n.getContext("2d"))||void 0===r||r.drawImage(e,0,0,n.width,n.height);const i=function(e,t,r,a,n,i,o){for(var d=new ImageData(t,r),h=new Int32Array(e.data.buffer),l=e.width,u=new Int32Array(d.data.buffer),c=d.width,s=t/i,g=r/o,f=Math.round(1/s),p=Math.round(1/g),m=f*p,w=0;w<d.height;w++){for(var v=0;v<c;v++){for(var x=0+Math.round(v/s)+(0+Math.round(w/g))*l,y=0,M=0,E=0,b=0,L=0;L<p;L++){for(var C=0;C<f;C++){var R=h[x+C+L*l];y+=R<<24>>>24,M+=R<<16>>>24,E+=R<<8>>>24,b+=R>>>24}}y=Math.round(y/m),M=Math.round(M/m),E=Math.round(E/m),b=Math.round(b/m),u[v+w*c]=b<<24|E<<16|M<<8|y}}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===(a=n.getContext("2d"))||void 0===a||a.putImageData(i,0,0),n}(t,c):t,n=s?{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(a,n.x,n.y,n.width,n.height,0,0,p.width,p.height)};return i.default.useLayoutEffect((()=>{m()}),[p,e.width,e.height,r.x,r.y,r.width,r.height,n,a,o,e.page._exportingOrRendering,s]),i.default.useEffect((()=>()=>{p&&"CANVAS"===p.nodeName&&u.default.Util.releaseCanvas(p)}),[p]),[p||t,m]};const M=v(),E=(0,o.observer)((({element:e})=>{const t=Math.min(30,e.width/4,e.height/4),r=i.default.useRef(null);return i.default.useEffect((()=>{const e=r.current;if(!e){return}const t=new u.default.Animation((t=>{e.rotate(((null==t?void 0:t.timeDiff)||0)/2)}),e.getLayer());return t.start(),()=>{t.stop()}})),i.default.createElement(h.Group,{x:e.a.x,y:e.a.y,rotation:e.a.rotation,listening:!1,opacity:e.a.opacity,hideInExport:!e.showInExport},i.default.createElement(h.Rect,{width:e.width,height:e.height,fill:"rgba(124, 173, 212, 0.8)"}),i.default.createElement(h.Arc,{ref:r,x:e.width/2,y:e.height/2,fill:"white",outerRadius:Math.abs(t),innerRadius:Math.max(1,t-5),angle:270}))})),b=(0,o.observer)((({element:e})=>{const t=Math.max(10,Math.min(30,e.width/25));return i.default.createElement(h.Group,{x:e.a.x,y:e.a.y,rotation:e.a.rotation,listening:!1,opacity:e.a.opacity,hideInExport:!e.showInExport},i.default.createElement(h.Rect,{width:e.width,height:e.height,fill:"rgba(223, 102, 102, 0.8)"}),i.default.createElement(h.Text,{text:"Can not load the video...",fontSize:t,width:e.width,height:e.height,align:"center",fill:"white",verticalAlign:"middle",padding:5}))}));let L=function(e,t,r){const a=i.default.useRef("loading"),n=i.default.useRef(null),[o,d]=i.default.useState(0),h=i.default.useRef(),l=i.default.useRef(),u=i.default.useRef();return h.current===e&&l.current===t&&u.current===r||(a.current="loading",n.current=void 0,h.current=e,l.current=t,u.current=r),i.default.useLayoutEffect((function(){if(e){var i=document.createElement("video");return i.addEventListener("canplay",o),i.addEventListener("error",h),t&&(i.crossOrigin=t),r&&(i.referrerpolicy=r),i.src=e,i.load(),function(){i.removeEventListener("canplay",o),i.removeEventListener("error",h)}}function o(){a.current="loaded",n.current=i,n.current.currentTime=0,d(Math.random()),n.current.removeEventListener("canplay",o)}function h(e){const t=4===i.readyState,r=i.buffered&&i.buffered.length>0&&i.buffered.end(i.buffered.length-1)/i.duration*100>=100;t&&r||(a.current="failed",n.current=void 0,d(Math.random()))}}),[e,t,r]),[n.current,a.current]};exports.setVideoLoaderHook=e=>{L=e},exports.useLoader=(e,t,r)=>{const a=i.default.useRef(),n=()=>{var e;null===(e=a.current)||void 0===e||e.call(a),a.current=void 0};i.default.useEffect((()=>n),[]),i.default.useLayoutEffect((()=>{const i=t.slice(0,200),o=`video with id ${r} url: ${i}`;"loading"!==e||a.current||(a.current=(0,s.incrementLoader)(o)),"loading"!==e&&n(),"failed"===e&&(0,s.triggerLoadError)(o)}),[e])},exports.VideoElement=(0,o.observer)((({element:e,store:t})=>{var r;const[a,n]=i.default.useState(!1),o=i.default.useRef(null),f=i.default.useRef(null),C=t.selectedShapes.indexOf(e)>=0&&e.selectable,[R,T]=i.default.useState(!1),[I,_]=L(e.src,"anonymous"),O=t.activePage===e.page;(0,exports.useLoader)(_,e.src,e.id),I&&(I.width=I.videoWidth,I.height=I.videoHeight,I.playsInline=!0);const S=I||M;i.default.useEffect((()=>{I&&t.history.ignore((()=>{e.set({duration:1e3*I.duration})}))}),[I]),i.default.useEffect((()=>{var r;if(!I){return}const a=t.animatedElementsIds,n=(!a.length||a.includes(e.id))&&t.isPlaying,i=O&&(n||R);if(!i){return void I.pause()}i&&(I.currentTime=e.startTime*I.duration,I.play());const d=new u.default.Animation((()=>{$()}),null===(r=o.current)||void 0===r?void 0:r.getLayer());d.start();const h=()=>{T(!1),I.currentTime=e.startTime*I.duration},l=()=>{I.currentTime>=e.endTime*I.duration&&(I.pause(),I.currentTime=e.startTime*I.duration,T(!1))};return I.addEventListener("ended",h),I.addEventListener("timeupdate",l),()=>{I.pause(),d.stop(),I.removeEventListener("ended",h),I.removeEventListener("timeupdate",l)}}),[I,R,t.isPlaying,O]),i.default.useEffect((()=>{I&&(I.volume=e.volume)}),[I,e.volume]);const k=i.default.useRef();i.default.useEffect((()=>{const r=(0,d.autorun)((()=>{var r,a;if(I){const n=t.animatedElementsIds;if(n.length&&!n.includes(e.id)){return}const i=(t.currentTime-e.page.startTime)%e.duration;if(Math.abs(1e3*I.currentTime-i)>500||!t.isPlaying){const r=i/1e3;r!==I.currentTime&&(I.currentTime=r),4!==I.readyState&&!t.isPlaying&&!k.current&&(k.current=(0,s.incrementLoader)(`video ${e.id}`))}$(),null===(a=null===(r=o.current)||void 0===r?void 0:r.getLayer())||void 0===a||a.batchDraw()}}));return()=>{r(),k.current&&(k.current(),k.current=null)}}),[t,I]),i.default.useEffect((()=>{if(!I){return}const t=()=>{var t,r;4!==I.readyState&&e.page._exportingOrRendering||k.current&&($(),null===(r=null===(t=o.current)||void 0===t?void 0:t.getLayer())||void 0===r||r.batchDraw(),k.current(),k.current=null)};let r;return e.page._exportingOrRendering&&(r=setInterval(t,50)),I.addEventListener("timeupdate",t),I.addEventListener("canplay",t),()=>{clearInterval(r),I.removeEventListener("timeupdate",t),I.removeEventListener("canplay",t)}}),[e.page._exportingOrRendering,I,e.id,s.incrementLoader]);let{cropX:P,cropY:X,cropWidth:Y,cropHeight:W}=e;"loaded"!==_&&(P=X=0,Y=W=1);const A=S.width*Y,D=S.height*W,H=e.width/e.height;let q,j;const z=A/D,B="svg"===e.type;B?(q=A,j=D):H>=z?(q=A,j=A/H):(q=D*H,j=D);const F={x:S.width*P,y:S.height*X,width:q,height:j},V=null!==(r=e.cornerRadius)&&void 0!==r?r:0,[Z,U]=(0,exports.useCornerRadiusAndCrop)(e,S,F,t._elementsPixelRatio,V,a||e._cropModeEnabled||"svg"===e.type);let[N,G]=((e,t,r,a)=>{const n=(e=>{const[t,r]=i.default.useState(e);return i.default.useEffect((()=>{(async()=>{const a=await async function(e){if(!(e.indexOf("data:image/svg+xml")>=0||e.indexOf(".svg")>=0)){return e}const t=await g.urlToString(e),r=g.fixSize(t);return g.svgToURL(r)}(e);a!==t&&r(a)})()}),[e]),t})(e.clipSrc||""),[o,d]=(0,l.default)(n,"anonymous"),h=e.clipSrc?d:"loaded";(0,exports.useLoader)(h,e.clipSrc,e.id);const c=i.default.useMemo((()=>{if(t&&o){return v()}}),[t,o]);function s(){var a;if(!o){return}if(!t||!t.width||!t.height){return}if(!o||!o.width||!o.height){return}if(!c){return}const n=v(),i=Math.max(e.width/o.width*r,e.height/o.height*r);n.width=o.width*i,n.height=o.height*i,null===(a=n.getContext("2d"))||void 0===a||a.drawImage(o,0,0,n.width,n.height),c.width=Math.max(t.width,1),c.height=Math.max(t.height,1);const d=c.getContext("2d");d&&(d.save(),d.drawImage(n,0,0,t.width,t.height),u.default.Util.releaseCanvas(n),d.globalCompositeOperation="source-in",d.drawImage(t,0,0,c.width,c.height),d.restore())}return i.default.useLayoutEffect((()=>{s()}),[c,t,o,e.width,e.height,r,...a]),[e.clipSrc&&o?c:t,s]})(e,Z,t._elementsPixelRatio,[F,V,t._elementsPixelRatio]);function $(){U(),G()}const J=Math.max(e.width/q,e.height/j);i.default.useEffect((()=>{var t;if(!e._cropModeEnabled){return}const r=null===(t=o.current)||void 0===t?void 0:t.getStage();function a(t){e._cropModeEnabled&&t.target!==f.current&&e.toggleCropMode(!1)}function n(t){e._cropModeEnabled&&t.target.parentNode!==r.content&&e.toggleCropMode(!1)}return document.body.addEventListener("click",n),null==r||r.on("click",a),null==r||r.on("tap",a),()=>{document.body.removeEventListener("click",n),document.body.removeEventListener("touchstart",n),null==r||r.off("click",a),null==r||r.off("click",a)}}),[e._cropModeEnabled]),i.default.useLayoutEffect((()=>{if(!a&&!e._cropModeEnabled){return(0,p.applyFilter)(o.current,e),(0,d.autorun)((()=>{(0,p.applyFilter)(o.current,e)}),{delay:100})}}),[S,a,Y,W,e._cropModeEnabled]),i.default.useLayoutEffect((()=>{var t;a||e._cropModeEnabled?null===(t=o.current)||void 0===t||t.clearCache():(0,p.applyFilter)(o.current,e)}),[a,e.width,e.height,e._cropModeEnabled]),i.default.useEffect((()=>{(0,p.applyFilter)(o.current,e)}),[e.shadowEnabled,e.shadowBlur,e.cornerRadius,e.shadowColor,e.shadowOffsetX,e.shadowOffsetY,e.shadowOpacity]);const K=i.default.useRef(null),Q=i.default.useRef(null),ee=i.default.useRef(null);i.default.useLayoutEffect((()=>{e._cropModeEnabled&&(Q.current.nodes([K.current]),ee.current.nodes([f.current]))}),[e._cropModeEnabled]);const te=t=>{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(),n=Math.min(1,q/r),i=Math.min(1,j/a),o=1-n,d=Math.min(o,Math.max(0,Math.round(-t.target.x())/r)),h=1-i,l=Math.min(h,Math.max(0,Math.round(-t.target.y())/a));t.target.setAttrs({x:-d*S.width,y:-l*S.height,scaleX:1,scaleY:1}),e.set({cropX:d,cropY:l,cropWidth:n,cropHeight:i})},re=()=>{"svg"!==e.type&&e.contentEditable&&setTimeout((()=>{e.toggleCropMode(!0)}))},ae="loading"===_,ne="failed"===_,ie=!ae&&!ne,oe=i.default.useRef({cropX:0,cropY:0,cropWidth:0,cropHeight:0}),de=ie?e.a.opacity:0;(0,m.useFadeIn)(o,de);const he=e.selectable||"admin"===t.role,le=(0,w.isTouchDevice)();return i.default.createElement(i.default.Fragment,null,ae&&i.default.createElement(E,{element:e}),ne&&i.default.createElement(b,{element:e}),i.default.createElement(h.Image,{ref:o,name:"element",id:e.id,image:N,x:e.a.x,y:e.a.y,width:e.a.width||1,height:e.a.height||1,rotation:e.a.rotation,opacity:de,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,customCrop:F,listening:he,draggable:le?e.draggable&&C:e.draggable,preventDefault:!le||C,hideInExport:!e.showInExport,onDragMove:t=>{e.set({x:t.target.x(),y:t.target.y()})},onDragEnd:t=>{e.set({x:t.target.x(),y:t.target.y()})},onDblClick:re,onDblTap:re,onTransformStart:()=>{n(!0),oe.current={cropX:e.cropX,cropY:e.cropY,cropWidth:e.cropWidth,cropHeight:e.cropHeight}},onTransform:t=>{var r;const a=t.currentTarget,n=Math.abs(a.scaleX()-1)<1e-7?1:a.scaleX(),i=Math.abs(a.scaleY()-1)<1e-7?1:a.scaleY();a.scaleX(1),a.scaleY(1);const o=null===(r=t.target.getStage())||void 0===r?void 0:r.findOne("Transformer"),d=1-q/S.width,h=Math.min(d,Math.max(0,e.cropX)),l=1-j/S.height,u=Math.min(l,Math.max(0,e.cropY)),c=o.getActiveAnchor(),s=!(c.indexOf("middle")>=0||c.indexOf("center")>=0),g=!s&&n<1&&oe.current.cropHeight>j/S.height;let f=s?e.cropWidth:e.cropWidth*n;g&&(f=e.cropWidth);const p=!s&&i<1&&oe.current.cropWidth>q/S.width;let m=s?e.cropHeight:e.cropHeight*i;p&&(m=e.cropHeight),B&&(f=e.cropWidth,m=e.cropHeight),e.set({cropX:h,cropY:u,x:a.x(),y:a.y(),width:a.width()*n,height:a.height()*i,rotation:t.target.rotation(),cropWidth:Math.min(f,1-h),cropHeight:Math.min(m,1-u)})},onTransformEnd:t=>{const r=t.currentTarget;e.set({width:r.width(),height:r.height(),x:r.x(),y:r.y(),rotation:t.target.rotation(),cropWidth:q/S.width,cropHeight:j/S.height}),n(!1)}}),i.default.createElement(h.Rect,{x:e.a.x,y:e.a.y,width:Math.max(e.a.width-e.borderSize,0),height:Math.max(e.a.height-e.borderSize,0),opacity:de,offsetX:-e.borderSize/2,offsetY:-e.borderSize/2,stroke:e.borderColor,strokeWidth:e.borderSize,listening:!1,visible:!!e.borderSize,rotation:e.rotation,cornerRadius:Math.max(0,V-e.borderSize),hideInExport:!e.showInExport}),!t.isPlaying&&i.default.createElement(h.Image,{image:R?y:x,x:e.a.x,y:e.a.y,offsetX:-e.a.width/2+15/t.scale,offsetY:-e.a.height/2+15/t.scale,rotation:e.a.rotation,width:30/t.scale,height:30/t.scale,hideInExport:!0,onClick:()=>T(!R),onTap:()=>T(!R)}),e._cropModeEnabled&&i.default.createElement(c.Portal,{selector:".page-abs-container",enabled:!0},i.default.createElement(h.Rect,{x:-window.innerWidth/t.scale,y:-window.innerWidth/t.scale,width:window.innerWidth/t.scale*3,height:window.innerWidth/t.scale*3,fill:"rgba(0,0,0,0.3)"}),i.default.createElement(h.Image,{listening:!1,image:N,x:e.a.x,y:e.a.y,width:e.a.width,height:e.a.height,rotation:e.a.rotation,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur}),i.default.createElement(h.Group,{x:e.a.x,y:e.a.y,rotation:e.a.rotation,scaleX:J,scaleY:J},i.default.createElement(h.Image,{image:S,ref:f,opacity:.4,draggable:!0,x:-e.cropX*S.width,y:-e.cropY*S.height,onDragMove:te,onTransform:te}),i.default.createElement(h.Transformer,{ref:ee,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}),i.default.createElement(h.Rect,{width:q,height:j,ref:K,listening:!1,onTransform:t=>{t.target.x()<-e.cropX*S.width-1e-9&&(t.target.x(-e.cropX*S.width),t.target.scaleX(1)),t.target.y()<-e.cropY*S.height-1e-9&&(t.target.y(-e.cropY*S.height),t.target.scaleY(1));const r=Math.min(1,Math.max(0,e.cropX+t.target.x()/S.width)),a=Math.min(1,Math.max(0,t.target.y()/S.height+e.cropY)),n=t.target.width()*t.target.scaleX(),i=t.target.height()*t.target.scaleY(),o=Math.min(1-r,n/S.width),d=Math.min(1-a,i/S.height),h=t.target.getAbsolutePosition(t.target.getParent().getParent());t.target.scale({x:1,y:1}),t.target.position({x:0,y:0}),e.set({x:h.x,y:h.y,cropX:r,cropY:a,cropWidth:o,cropHeight:d,width:Math.min(n*J,S.width*(1-r)*J),height:Math.min(i*J,S.height*(1-a)*J)})}}),i.default.createElement(h.Transformer,{ref:Q,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:e.resizable}))))}));

package/model/gif-model.d.ts

@@ -64,6 +64,7 @@ export declare const GifElement: import("mobx-state-tree").IModelType<{
     borderColor: import("mobx-state-tree").IType<string, string, string>;
     borderSize: import("mobx-state-tree").IType<number, number, number>;
     keepRatio: import("mobx-state-tree").IType<boolean, boolean, boolean>;
+    stretchEnabled: import("mobx-state-tree").IType<boolean, boolean, boolean>;
     _cropModeEnabled: import("mobx-state-tree").IType<boolean, boolean, boolean>;
 } & {
     type: import("mobx-state-tree").IType<string, string, string>;

package/model/group-model.d.ts

@@ -90,6 +90,7 @@ export declare const TYPES_MAP: {
         cropWidth: import("mobx-state-tree").IType<number, number, number>;
         cropHeight: import("mobx-state-tree").IType<number, number, number>;
         keepRatio: import("mobx-state-tree").IType<boolean, boolean, boolean>;
+        stretchEnabled: import("mobx-state-tree").IType<boolean, boolean, boolean>;
         flipX: import("mobx-state-tree").IType<boolean, boolean, boolean>;
         flipY: import("mobx-state-tree").IType<boolean, boolean, boolean>;
         width: import("mobx-state-tree").IType<number, number, number>;
@@ -389,6 +390,7 @@ export declare const TYPES_MAP: {
         borderColor: import("mobx-state-tree").IType<string, string, string>;
         borderSize: import("mobx-state-tree").IType<number, number, number>;
         keepRatio: import("mobx-state-tree").IType<boolean, boolean, boolean>;
+        stretchEnabled: import("mobx-state-tree").IType<boolean, boolean, boolean>;
         _cropModeEnabled: import("mobx-state-tree").IType<boolean, boolean, boolean>;
     }, {
         readonly locked: boolean;
@@ -676,6 +678,7 @@ export declare const TYPES_MAP: {
         borderColor: import("mobx-state-tree").IType<string, string, string>;
         borderSize: import("mobx-state-tree").IType<number, number, number>;
         keepRatio: import("mobx-state-tree").IType<boolean, boolean, boolean>;
+        stretchEnabled: import("mobx-state-tree").IType<boolean, boolean, boolean>;
         _cropModeEnabled: import("mobx-state-tree").IType<boolean, boolean, boolean>;
     } & {
         type: import("mobx-state-tree").IType<string, string, string>;
@@ -968,6 +971,7 @@ export declare const TYPES_MAP: {
         borderColor: import("mobx-state-tree").IType<string, string, string>;
         borderSize: import("mobx-state-tree").IType<number, number, number>;
         keepRatio: import("mobx-state-tree").IType<boolean, boolean, boolean>;
+        stretchEnabled: import("mobx-state-tree").IType<boolean, boolean, boolean>;
         _cropModeEnabled: import("mobx-state-tree").IType<boolean, boolean, boolean>;
     } & {
         type: import("mobx-state-tree").IType<string, string, string>;

package/model/image-model.d.ts

@@ -64,6 +64,7 @@ export declare const ImageElement: import("mobx-state-tree").IModelType<{
     borderColor: import("mobx-state-tree").IType<string, string, string>;
     borderSize: import("mobx-state-tree").IType<number, number, number>;
     keepRatio: import("mobx-state-tree").IType<boolean, boolean, boolean>;
+    stretchEnabled: import("mobx-state-tree").IType<boolean, boolean, boolean>;
     _cropModeEnabled: import("mobx-state-tree").IType<boolean, boolean, boolean>;
 }, {
     readonly locked: boolean;

package/model/image-model.js

@@ -1 +1 @@
-Object.defineProperty(exports,"__esModule",{value:!0}),exports.ImageElement=void 0;const e=require("./shape-model");exports.ImageElement=e.Shape.named("Image").props({type:"image",width:100,height:100,src:"",cropX:0,cropY:0,cropWidth:1,cropHeight:1,cornerRadius:0,flipX:!1,flipY:!1,clipSrc:"",borderColor:"black",borderSize:0,keepRatio:!1,_cropModeEnabled:!1}).actions((e=>({toggleCropMode(o){e._cropModeEnabled=null!=o?o:!e._cropModeEnabled,e._cropModeEnabled?e.store.history.startTransaction():e.store.history.endTransaction()},beforeDestroy(){e._cropModeEnabled&&e.store.history.endTransaction()}})));
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.ImageElement=void 0;const e=require("./shape-model");exports.ImageElement=e.Shape.named("Image").props({type:"image",width:100,height:100,src:"",cropX:0,cropY:0,cropWidth:1,cropHeight:1,cornerRadius:0,flipX:!1,flipY:!1,clipSrc:"",borderColor:"black",borderSize:0,keepRatio:!1,stretchEnabled:!1,_cropModeEnabled:!1}).actions((e=>({toggleCropMode(o){e._cropModeEnabled=null!=o?o:!e._cropModeEnabled,e._cropModeEnabled?e.store.history.startTransaction():e.store.history.endTransaction()},beforeDestroy(){e._cropModeEnabled&&e.store.history.endTransaction()}})));

package/model/svg-model.d.ts

@@ -57,6 +57,7 @@ export declare const SVGElement: import("mobx-state-tree").IModelType<{
     cropWidth: import("mobx-state-tree").IType<number, number, number>;
     cropHeight: import("mobx-state-tree").IType<number, number, number>;
     keepRatio: import("mobx-state-tree").IType<boolean, boolean, boolean>;
+    stretchEnabled: import("mobx-state-tree").IType<boolean, boolean, boolean>;
     flipX: import("mobx-state-tree").IType<boolean, boolean, boolean>;
     flipY: import("mobx-state-tree").IType<boolean, boolean, boolean>;
     width: import("mobx-state-tree").IType<number, number, number>;

package/model/svg-model.js

@@ -1 +1 @@
-Object.defineProperty(exports,"__esModule",{value:!0}),exports.SVGElement=void 0;const e=require("mobx-state-tree"),r=require("./shape-model");exports.SVGElement=r.Shape.named("SVG").props({type:"svg",src:"",maskSrc:"",cropX:0,cropY:0,cropWidth:1,cropHeight:1,keepRatio:!0,flipX:!1,flipY:!1,width:100,height:100,borderColor:"black",borderSize:0,cornerRadius:0,colorsReplace:e.types.map(e.types.string)}).preProcessSnapshot((e=>Object.assign(Object.assign({},e),{src:e.src||e.svgSource,colorsReplace:Array.isArray(e.colorsReplace)?{}:e.colorsReplace}))).actions((e=>({replaceColor(r,o){e.colorsReplace.set(r,o)}})));
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.SVGElement=void 0;const e=require("mobx-state-tree"),r=require("./shape-model");exports.SVGElement=r.Shape.named("SVG").props({type:"svg",src:"",maskSrc:"",cropX:0,cropY:0,cropWidth:1,cropHeight:1,keepRatio:!0,stretchEnabled:!0,flipX:!1,flipY:!1,width:100,height:100,borderColor:"black",borderSize:0,cornerRadius:0,colorsReplace:e.types.map(e.types.string)}).preProcessSnapshot((e=>Object.assign(Object.assign({},e),{src:e.src||e.svgSource,colorsReplace:Array.isArray(e.colorsReplace)?{}:e.colorsReplace}))).actions((e=>({replaceColor(r,o){e.colorsReplace.set(r,o)}})));

package/model/video-model.d.ts

@@ -64,6 +64,7 @@ export declare const VideoElement: import("mobx-state-tree").IModelType<{
     borderColor: import("mobx-state-tree").IType<string, string, string>;
     borderSize: import("mobx-state-tree").IType<number, number, number>;
     keepRatio: import("mobx-state-tree").IType<boolean, boolean, boolean>;
+    stretchEnabled: import("mobx-state-tree").IType<boolean, boolean, boolean>;
     _cropModeEnabled: import("mobx-state-tree").IType<boolean, boolean, boolean>;
 } & {
     type: import("mobx-state-tree").IType<string, string, string>;

package/package.json

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