polotno 2.23.10 → 2.23.12

package/canvas/html-element.js

@@ -1,4 +1,4 @@
-var e,t=this&&this.__createBinding||(Object.create?function(e,t,i,r){void 0===r&&(r=i);var n=Object.getOwnPropertyDescriptor(t,i);n&&!("get"in n?!t.__esModule:n.writable||n.configurable)||(n={enumerable:!0,get:function(){return t[i]}}),Object.defineProperty(e,r,n)}:function(e,t,i,r){void 0===r&&(r=i),e[r]=t[i]}),i=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 i in e){Object.prototype.hasOwnProperty.call(e,i)&&(t[t.length]=i)}return t},e(t)},function(r){if(r&&r.__esModule){return r}var n={};if(null!=r){for(var o=e(r),a=0;a<o.length;a++){"default"!==o[a]&&t(n,r,o[a])}}return i(n,r),n}),n=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=n(require("react")),a=require("mobx-react-lite"),l=require("react-konva"),s=n(require("quill")),c=r(require("mobx")),d=require("../utils/flags"),u=require("./apply-filters"),f=require("./text-element"),g=require("./use-color"),h=require("../utils/html2canvas"),p=require("./use-fadein"),m=require("react-konva-utils"),x=n(require("../utils/styled")),y=require("../utils/loader"),b=require("../utils/text"),w=r(require("../utils/fonts")),v=require("../utils/screen"),S=require("./text-element/max-font-size"),E=require("mobx"),k=require("./use-delayer");exports.quillRef=c.observable({enabled:!1,currentFormat:{},editor:c.observable.object({instance:null},{},{deep:!1})});const z=(0,x.default)("div",o.default.forwardRef)`
+var e,t=this&&this.__createBinding||(Object.create?function(e,t,r,i){void 0===i&&(i=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,i,n)}:function(e,t,r,i){void 0===i&&(i=r),e[i]=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}),i=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(i){if(i&&i.__esModule){return i}var n={};if(null!=i){for(var o=e(i),a=0;a<o.length;a++){"default"!==o[a]&&t(n,i,o[a])}}return r(n,i),n}),n=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=n(require("react")),a=require("mobx-react-lite"),l=require("react-konva"),s=n(require("quill")),c=i(require("mobx")),u=require("../utils/flags"),d=require("./apply-filters"),f=require("./text-element"),g=require("./use-color"),h=require("../utils/html2canvas"),p=require("./use-fadein"),m=require("react-konva-utils"),x=n(require("../utils/styled")),y=require("../utils/loader"),b=require("../utils/text"),w=i(require("../utils/fonts")),v=require("../utils/screen"),S=require("./text-element/max-font-size"),E=require("mobx"),k=require("./use-delayer");exports.quillRef=c.observable({enabled:!1,currentFormat:{},editor:c.observable.object({instance:null},{},{deep:!1})});const z=(0,x.default)("div",o.default.forwardRef)`
   .ql-editor {
     outline: none;
   }
@@ -12,4 +12,4 @@ var e,t=this&&this.__createBinding||(Object.create?function(e,t,i,r){void 0===r&
   .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 i=e.clipboard.convert("<div class='ql-editor' style='outline: none;'>"+t+"<p><br></p></div>");e.setContents(i),e.history.clear()};const q=({html:e,onBlur:t,onChange:i,element:r})=>{const n=o.default.useRef(null);o.default.useEffect((()=>{if(!n.current){return}const e=(0,exports.createQuill)(n.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=n.current)||void 0===e?void 0:e.childNodes[0];i(t.innerHTML)}),10)})),e.setSelection(0,0,"api"),e.on("selection-change",((t,i,r)=>{t&&c.runInAction((()=>{exports.quillRef.currentFormat=e.getFormat()}))})),n.current.childNodes[0].addEventListener("blur",(e=>{var i;if(null===(i=e.relatedTarget)||void 0===i?void 0:i.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((()=>(0,E.reaction)((()=>r.text),(()=>{var t;const i=exports.quillRef.editor.instance;if(!i){return}const o=i.getSelection();(null===(t=n.current)||void 0===t?void 0:t.childNodes[0].innerHTML)===r.text||((0,exports.setQuillContent)(i,e),o&&(i.setSelection(o.index,o.length),c.runInAction((()=>{exports.quillRef.currentFormat=i.getFormat()}))))}),{fireImmediately:!0})),[]);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(z,{ref:n,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,opacity:Math.max(r.a.opacity,.2)}),dir:(0,f.getDir)((0,b.removeTags)(r.text))})};function F(e,{fontFamily:t="",color:i="black"}={}){let r=`color: ${i||e.fill}`;return e.fill.indexOf("gradient")>=0&&(r=`\n      background-color: ${i};\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: ${i||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,f.getDir)((0,b.removeTags)(e.text))}">${(0,b.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 i=o.default.useRef(null),[r,n]=o.default.useState(),[a,s]=o.default.useState(!1),[x,E]=o.default.useState(!1),O=o.default.useRef(e.height),T=t.selectedShapes.indexOf(e)>=0&&e.selectable,_=e.fontSize/3,{textVerticalResizeEnabled:C}=d.flags,M=(0,f.usePrevious)(e.fontFamily),[$]=(0,f.useFontLoader)(t,e.fontFamily),I=e._editModeEnabled;(0,p.useFadeIn)(i);const A=$?e.fontFamily:M!==e.fontFamily?M:"Arial",D=(0,g.useColor)(e).fill,H=F(e,{fontFamily:A,color:D}),{width:j,height:P}=function(e,t,i){return o.default.useMemo((()=>(0,h.detectSize)(e)),[e,t.width,i])}(H,e,$);o.default.useEffect((()=>{if(!$){return}if(!e.height){return void e.set({height:P})}const{textOverflow:i}=d.flags;if("change-font-size"!==i||a){"resize"===i&&(C&&e.height<P&&t.history.ignore((()=>{e.set({height:P})})),C||e.height===P||t.history.ignore((()=>{e.set({height:P})})))}else{const i=(e=>{let t=e.fontSize;for(let i=1;i<50;i++){const i=F(Object.assign(Object.assign({},e.toJSON()),{fontSize:t}),{fontFamily:e.fontFamily}),{height:r}=(0,h.detectSize)(i),n=e.height&&r>e.height,o=(0,h.isContentWrapping)({html:i});if(!n&&!o){break}t-=.5}return t})(e);i!==e.fontSize?t.history.ignore((()=>{e.set({fontSize:i})})):e.height!==P&&(C&&e.height<P?t.history.ignore((()=>{e.set({height:P})})):C||t.history.ignore((()=>{e.set({height:P})})))}}));const L=o.default.useRef(0),X=o.default.useMemo((()=>{const e={lastArgs:null,lastResult:null};return async function(t){return e.lastArgs&&e.lastResult&&(i=e.lastArgs,r=t,JSON.stringify(i)===JSON.stringify(r))||(e.lastResult=await(0,h.htmlToCanvas)(t),e.lastArgs=Object.assign({},t)),e.lastResult;var i,r}}),[]),Y=o.default.useRef(null);o.default.useEffect((()=>{a||I||(async()=>{L.current++;const i=L.current,r=(0,y.incrementLoader)(`text ${e.id}`);Y.current=r,E(!0);let o=null;const a=R?5:1;for(let n=0;n<a;n++){const a=n>0?X:h.htmlToCanvas;try{if(o=await a({skipCache:n>0,html:H,width:e.width||1,height:e.height||P||1,fontFamily:A,padding:_,pixelRatio:t._elementsPixelRatio,font:t.fonts.find((e=>e.fontFamily===A))||w.globalFonts.find((e=>e.fontFamily===A))}),i!==L.current){return void r()}if(!function(e){const t=e.getContext("2d").getImageData(0,0,e.width,e.height).data;for(let i=0;i<t.length;i+=4){if(0!==t[i+3]){return!0}}return!1}(o)&&R){await new Promise((e=>setTimeout(e,50*(n+1))));continue}}catch(l){console.error(l),(0,y.triggerLoadError)(`Error rendering rich text with id ${e.id}`);break}}if(!o){return Y.current=null,r(),void E(!1)}n(o),E(!1)})()}),[H,a,P,I,A,e.height,t._elementsPixelRatio,$]);const[W,B]=(0,k.useDelayer)(x,300),[Q]=(0,k.useDelayer)(a,300,!0),N=Q||W;o.default.useEffect((()=>{if(!N){return c.autorun((()=>{const t=i.current;(0,u.applyFilter)(t,e)}))}}),[r,N,e.shadowColor,e.shadowOffsetX,e.shadowOffsetY,e.shadowOpacity]),o.default.useEffect((()=>{r&&!x&&Y.current&&(Y.current(),Y.current=null)}),[r,x]),o.default.useEffect((()=>()=>{Y.current&&Y.current()}),[]);let J=0;"middle"===e.verticalAlign&&(J=(e.height-P)/2),"bottom"===e.verticalAlign&&(J=e.height-P);const V=(0,f.getLineHeight)({fontLoaded:$,fontFamily:e.fontFamily,fontSize:e.fontSize,lineHeight:e.lineHeight}),G=(0,v.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*V*.5),offsetY:e.backgroundPadding*(e.fontSize*V*.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*V),height:e.a.height+e.backgroundPadding*(e.fontSize*V),cornerRadius:e.backgroundCornerRadius*(e.fontSize*V*.5)}),o.default.createElement(l.Rect,{ref:i,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:!N,draggable:G?e.draggable&&T:e.draggable,preventDefault:!G||T,opacity:I?0:e.a.opacity,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()})},id:e.id,onDblClick:()=>{e.contentEditable&&e.toggleEditMode(!0)},onDblTap:()=>{e.contentEditable&&e.toggleEditMode(!0)},onTransformStart:t=>{s(!0),O.current=e.height},onTransform:t=>{var i;const r=t.target,n=(null===(i=r.getStage())||void 0===i?void 0:i.findOne("Transformer")).getActiveAnchor(),o="middle-left"===n||"middle-right"===n,a="top-center"===n||"bottom-center"===n,l=r.scaleX();if(o){const t=r.scaleX(),i=Math.max(r.width()*t,e.fontSize);if(r.width(i),r.scaleX(1),d.flags.textVerticalResizeEnabled){const t=Math.max(P,O.current);e.set({height:t})}e.set({width:i,x:r.x(),y:r.y()})}else if(a){let i="resize"===d.flags.textOverflow?P:e.lineHeight*e.fontSize;const n=Math.max(i,t.target.height()*t.target.scaleY());r.scaleY(1),e.set({x:r.x(),y:r.y(),height:n,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),E(!0);const i=t.target.scaleX();t.target.scaleX(1),t.target.scaleY(1),e.set({fontSize:e.fontSize*i,width:t.target.width()*i,x:t.target.x(),y:t.target.y(),rotation:t.target.rotation(),shadowBlur:e.shadowBlur*i,shadowOffsetX:e.shadowOffsetX*i,shadowOffsetY:e.shadowOffsetY*i,strokeWidth:e.strokeWidth*i})}}),o.default.createElement(l.Image,{ref:i,image:r,x:e.a.x,y:e.a.y,offsetX:_,offsetY:_-J,listening:!1,rotation:e.a.rotation,width:e.a.width+2*_,height:e.a.height+2*_,visible:!N,opacity:I?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}),N&&o.default.createElement(l.Group,{x:e.a.x,y:e.a.y,rotation:e.a.rotation,offsetY:-J},o.default.createElement(m.Html,{divProps:{style:{pointerEvents:"none"}}},o.default.createElement(z,{dangerouslySetInnerHTML:{__html:H},style:{pointerEvents:"none",opacity:e.a.opacity}}))),I&&o.default.createElement(l.Group,{x:e.a.x,y:e.a.y,rotation:e.a.rotation,offsetY:-J},o.default.createElement(m.Html,null,o.default.createElement(q,{html:H,element:e,onChange:t=>{const i=(0,S.getLimitedFontSize)({oldText:(0,b.removeTags)(e.text),newText:(0,b.removeTags)(t),element:e});e.set({text:t,fontSize:i})},onBlur:i=>{e.toggleEditMode(!1),B(!0),""===(0,b.removeTags)(e.text)&&e.removable&&!e.placeholder&&t.deleteElements([e.id])}}))))}));
+`;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 r=e.clipboard.convert("<div class='ql-editor' style='outline: none;'>"+t+"<p><br></p></div>");e.setContents(r),e.history.clear()};const q=({html:e,onBlur:t,onChange:r,element:i})=>{const n=o.default.useRef(null);o.default.useEffect((()=>{if(!n.current){return}const e=(0,exports.createQuill)(n.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=n.current)||void 0===e?void 0:e.childNodes[0];r(t.innerHTML)}),10)})),e.setSelection(0,0,"api"),e.on("selection-change",((t,r,i)=>{t&&c.runInAction((()=>{exports.quillRef.currentFormat=e.getFormat()}))})),n.current.childNodes[0].addEventListener("blur",(e=>{var r;if(null===(r=e.relatedTarget)||void 0===r?void 0:r.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((()=>(0,E.reaction)((()=>i.text),(()=>{var t;const r=exports.quillRef.editor.instance;if(!r){return}const o=r.getSelection();(null===(t=n.current)||void 0===t?void 0:t.childNodes[0].innerHTML)===i.text||((0,exports.setQuillContent)(r,e),o&&(r.setSelection(o.index,o.length),c.runInAction((()=>{exports.quillRef.currentFormat=r.getFormat()}))))}),{fireImmediately:!0})),[]);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:n,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,opacity:Math.max(i.a.opacity,.2)}),dir:(0,f.getDir)((0,b.removeTags)(i.text))})};function F(e,{fontFamily:t="",color:r="black"}={}){let i=`color: ${r||e.fill}`;return e.fill.indexOf("gradient")>=0&&(i=`\n      background-color: ${r};\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: ${r||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,f.getDir)((0,b.removeTags)(e.text))}">${(0,b.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 r=o.default.useRef(null),[i,n]=o.default.useState(),[a,s]=o.default.useState(!1),[x,E]=o.default.useState(!1),O=o.default.useRef(e.height),T=t.selectedShapes.indexOf(e)>=0&&e.selectable,_=e.fontSize/3,{textVerticalResizeEnabled:C}=u.flags,M=(0,f.usePrevious)(e.fontFamily),[$]=(0,f.useFontLoader)(t,e.fontFamily),I=e._editModeEnabled;(0,p.useFadeIn)(r);const A=$?e.fontFamily:M!==e.fontFamily?M:"Arial",D=(0,g.useColor)(e).fill,H=F(e,{fontFamily:A,color:D}),{width:j,height:P}=function(e,t,r){return o.default.useMemo((()=>(0,h.detectSize)(e)),[e,t.width,r])}(H,e,$);o.default.useEffect((()=>{if(!$){return}if(!e.height){return void e.set({height:P})}const{textOverflow:r}=u.flags;if("change-font-size"!==r||a){"resize"===r&&(C&&e.height<P&&t.history.ignore((()=>{e.set({height:P})})),C||e.height===P||t.history.ignore((()=>{e.set({height:P})})))}else{const r=(e=>{let t=e.fontSize;for(let r=1;r<50;r++){const r=F(Object.assign(Object.assign({},e.toJSON()),{fontSize:t}),{fontFamily:e.fontFamily}),{height:i}=(0,h.detectSize)(r),n=e.height&&i>e.height,o=(0,h.isContentWrapping)({html:r});if(!n&&!o){break}t-=.5}return t})(e);r!==e.fontSize?t.history.ignore((()=>{e.set({fontSize:r})})):e.height!==P&&(C&&e.height<P?t.history.ignore((()=>{e.set({height:P})})):C||t.history.ignore((()=>{e.set({height:P})})))}}));const L=o.default.useMemo((()=>{const e={lastArgs:null,lastResult:null};return async function(t){return e.lastArgs&&e.lastResult&&(r=e.lastArgs,i=t,JSON.stringify(r)===JSON.stringify(i))||(e.lastResult=await(0,h.htmlToCanvas)(t),e.lastArgs=Object.assign({},t)),e.lastResult;var r,i}}),[]),X=o.default.useRef(0),Y=o.default.useRef(null);o.default.useEffect((()=>{a||I||(async()=>{X.current++;const r=X.current;let i=(0,y.incrementLoader)(`text ${e.id} ${r}`);Y.current&&Y.current(),Y.current=i,E(!0);let o=null;const a=R?5:1;for(let n=0;n<a;n++){const i=n>0?L:h.htmlToCanvas;try{if(o=await i({skipCache:n>0,html:H,width:e.width||1,height:e.height||P||1,fontFamily:A,padding:_,pixelRatio:t._elementsPixelRatio,font:t.fonts.find((e=>e.fontFamily===A))||w.globalFonts.find((e=>e.fontFamily===A))}),r!==X.current){return}if(!function(e){const t=e.getContext("2d").getImageData(0,0,e.width,e.height).data;for(let r=0;r<t.length;r+=4){if(0!==t[r+3]){return!0}}return!1}(o)&&R){await new Promise((e=>setTimeout(e,50*(n+1))));continue}break}catch(l){console.error(l),(0,y.triggerLoadError)(`Error rendering rich text with id ${e.id}`);break}}o?n(o):i?(i(),i=null):console.error("Finish function is called twice!"),E(!1)})()}),[H,a,P,I,A,e.height,t._elementsPixelRatio,$]);const[W,B]=(0,k.useDelayer)(x,300),[Q]=(0,k.useDelayer)(a,300,!0),N=Q||W;o.default.useEffect((()=>{if(!N){return c.autorun((()=>{const t=r.current;(0,d.applyFilter)(t,e)}))}}),[i,N,e.shadowColor,e.shadowOffsetX,e.shadowOffsetY,e.shadowOpacity]),o.default.useEffect((()=>{i&&!x&&Y.current&&(Y.current(),Y.current=null)}),[i,x]),o.default.useEffect((()=>()=>{Y.current&&Y.current()}),[]);let J=0;"middle"===e.verticalAlign&&(J=(e.height-P)/2),"bottom"===e.verticalAlign&&(J=e.height-P);const V=(0,f.getLineHeight)({fontLoaded:$,fontFamily:e.fontFamily,fontSize:e.fontSize,lineHeight:e.lineHeight}),G=(0,v.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*V*.5),offsetY:e.backgroundPadding*(e.fontSize*V*.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*V),height:e.a.height+e.backgroundPadding*(e.fontSize*V),cornerRadius:e.backgroundCornerRadius*(e.fontSize*V*.5)}),o.default.createElement(l.Rect,{ref:r,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:!N,draggable:G?e.draggable&&T:e.draggable,preventDefault:!G||T,opacity:I?0:e.a.opacity,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()})},id:e.id,onDblClick:()=>{e.contentEditable&&e.toggleEditMode(!0)},onDblTap:()=>{e.contentEditable&&e.toggleEditMode(!0)},onTransformStart:t=>{s(!0),O.current=e.height},onTransform:t=>{var r;const i=t.target,n=(null===(r=i.getStage())||void 0===r?void 0:r.findOne("Transformer")).getActiveAnchor(),o="middle-left"===n||"middle-right"===n,a="top-center"===n||"bottom-center"===n,l=i.scaleX();if(o){const t=i.scaleX(),r=Math.max(i.width()*t,e.fontSize);if(i.width(r),i.scaleX(1),u.flags.textVerticalResizeEnabled){const t=Math.max(P,O.current);e.set({height:t})}e.set({width:r,x:i.x(),y:i.y()})}else if(a){let r="resize"===u.flags.textOverflow?P:e.lineHeight*e.fontSize;const n=Math.max(r,t.target.height()*t.target.scaleY());i.scaleY(1),e.set({x:i.x(),y:i.y(),height:n,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),E(!0);const r=t.target.scaleX();t.target.scaleX(1),t.target.scaleY(1),e.set({fontSize:e.fontSize*r,width:t.target.width()*r,x:t.target.x(),y:t.target.y(),rotation:t.target.rotation(),shadowBlur:e.shadowBlur*r,shadowOffsetX:e.shadowOffsetX*r,shadowOffsetY:e.shadowOffsetY*r,strokeWidth:e.strokeWidth*r})}}),o.default.createElement(l.Image,{ref:r,image:i,x:e.a.x,y:e.a.y,offsetX:_,offsetY:_-J,listening:!1,rotation:e.a.rotation,width:e.a.width+2*_,height:e.a.height+2*_,visible:!N,opacity:I?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}),N&&o.default.createElement(l.Group,{x:e.a.x,y:e.a.y,rotation:e.a.rotation,offsetY:-J},o.default.createElement(m.Html,{divProps:{style:{pointerEvents:"none"}}},o.default.createElement(z,{dangerouslySetInnerHTML:{__html:H},style:{pointerEvents:"none",opacity:e.a.opacity}}))),I&&o.default.createElement(l.Group,{x:e.a.x,y:e.a.y,rotation:e.a.rotation,offsetY:-J},o.default.createElement(m.Html,null,o.default.createElement(q,{html:H,element:e,onChange:t=>{const r=(0,S.getLimitedFontSize)({oldText:(0,b.removeTags)(e.text),newText:(0,b.removeTags)(t),element:e});e.set({text:t,fontSize:r})},onBlur:r=>{e.toggleEditMode(!1),B(!0),""===(0,b.removeTags)(e.text)&&e.removable&&!e.placeholder&&t.deleteElements([e.id])}}))))}));

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=y,exports.getDir=S,exports.usePrevious=z;const t=e(require("react")),n=require("mobx-react-lite"),r=require("react-konva"),i=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"),h=require("../utils/text"),f=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 m=document.createElement("style");m.type="text/css",document.head.appendChild(m);const v={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++){r=e[n],void 0,i="֑-߿‏‫‮יִ-﷽ﹰ-ﻼ",new RegExp("^[^"+i+"]*?["+i+"]").test(r)&&(t+=1)}var r,i;return t>e.length/2}function S(e){return y(e)?"rtl":"ltr"}const b=(0,n.observer)((({textNodeRef:e,element:n,onBlur:r,selectAll:i,cursorPosition:o})=>{const[a,l]=t.default.useState(v),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",e.opacity=Math.max(n.a.opacity,.2);const t=`\n        .polotno-input::placeholder {\n          color: ${a.color};\n          opacity: 0.6;\n        }\n      `;m.innerHTML="",m.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,i&&(null==t||t.select(),document.execCommand("selectAll",!1,null))}),[]),t.default.useEffect((()=>{window.addEventListener("blur",r);const e=e=>{var t;(null===(t=d.current)||void 0===t?void 0:t.contains(e.target))||r()};return window.addEventListener("touchstart",e),()=>{window.removeEventListener("blur",r),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 f=(0,h.removeTags)(n.text);return t.default.createElement("textarea",{className:"polotno-input",ref:d,dir:S(f),style:Object.assign(Object.assign(Object.assign({},v),a),{paddingTop:u+"px"}),value:f,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:r})})),E=e=>t.default.createElement(i.Html,null,t.default.createElement(b,Object.assign({},e)));function z(e){const n=t.default.useRef(e),r=t.default.useRef(e);return t.default.useMemo((()=>{r.current=n.current,n.current=e}),[e]),r.current}exports.useFontLoader=(e,n)=>{const[r,i]=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,i();const r=(0,d.incrementLoader)(`text ${n}`);await e.loadFont(n),setTimeout(r,100),t&&(o.current=!0,i())})(),()=>{t=!1}}),[n]),[o.current]},exports.getLineHeight=({fontLoaded:e,fontFamily:n,fontSize:r,lineHeight:i})=>t.default.useMemo((()=>{if("number"==typeof i){return i}const e=document.createElement("div");e.style.fontFamily=n,e.style.fontSize=r+"px",e.style.lineHeight=i,e.innerText="Test text",document.body.appendChild(e);const t=e.offsetHeight;return document.body.removeChild(e),t/r}),[e,n,r,i]),exports.TextElement=(0,n.observer)((({element:e,store:n})=>{const i=t.default.useRef(null),a=t.default.useRef(null),{editorEnabled:d,selectAll:u}=(e=>{const[n,r]=t.default.useState(!1),i=t.default.useRef(!1);return t.default.useEffect((()=>{var t=!0;return setTimeout((()=>{t&&(e._editModeEnabled&&(i.current=!0),r(!0),setTimeout((()=>{i.current=!1}),50))}),50),()=>{t=!1}}),[]),{editorEnabled:n&&e._editModeEnabled,selectAll:i.current}})(e),[w,m]=t.default.useState(!1),v=t.default.useRef(e.a.height),y=n.selectedShapes.indexOf(e)>=0&&e.selectable,{textVerticalResizeEnabled:b}=c.flags,F=z(e.fontFamily),[O,L]=t.default.useState([]);t.default.useEffect((()=>{var e,t;const n=null!==(t=null===(e=i.current)||void 0===e?void 0:e.textArr)&&void 0!==t?t:[];JSON.stringify(n)!==JSON.stringify(O)&&L(n)})),t.default.useEffect((()=>{if(e.a.width){return}const t=i.current;t.width(600),e.set({width:1.4*t.getTextWidth()})}),[]),t.default.useLayoutEffect((()=>(0,o.autorun)((()=>{const t=i.current;(0,f.applyFilter)(t,e)}))));const[A]=(0,exports.useFontLoader)(n,e.fontFamily),T=(0,h.removeTags)(e.text),k=()=>{const e=i.current.clone({height:void 0}),t=Math.ceil(e.fontSize()*e.lineHeight()*e.textArr.length+1);return e.destroy(),t};t.default.useLayoutEffect((()=>{if(!A){return}const{textOverflow:t,textSplitAllowed:r}=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=i.current)||void 0===n||n.height(t)}),!1,!0),b||e.a.height===t||w||n.history.ignore((()=>{var n;(0,p.isAlive)(e)&&e.set({height:t}),null===(n=i.current)||void 0===n||n.height(t)}),!1,!0)}}else{const t=function(e,t,n=!1){const r=e.fontSize(),i=e.height(),o=(0,h.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 r=t.a.height&&e.height()>t.a.height;let i=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=i.find((e=>!l.includes(e)||(l=l.replace(e,""),!1)));if(!(r||s&&!n)){break}a-=.5,e.fontSize(a)}return e.fontSize(r),e.height(i),a}(i.current,e,r);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=i.current;t&&(t.width(t.width()+1e-8),t._setTextData(),(0,f.applyFilter)(t,e))}),[A]);const M=t.default.useRef(null),R=t.default.useRef(0),$=t=>{t.evt.preventDefault();const r=n.selectedShapes.find((t=>t===e));r&&e.contentEditable&&(R.current=function(e){var t;const n=e.target,r=function(e){var t=e.getAbsoluteTransform().copy();t.invert();var n=e.getStage().getPointerPosition();return t.point(n)}(n),i=n.textArr,o=Math.floor(r.y/(n.fontSize()*n.lineHeight())),a=i.slice(0,o).reduce(((e,t)=>e+t.text.length),o),l=null!==(t=i[o])&&void 0!==t?t:i[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((r.x-s)/l.width*l.text.length)}(t),e.toggleEditMode())},H=!T&&e.placeholder?.6:e.a.opacity;(0,g.useFadeIn)(i,H);const q=(0,exports.getLineHeight)({fontLoaded:A,fontFamily:e.fontFamily,fontSize:e.a.fontSize,lineHeight:e.lineHeight}),C=e.selectable||"admin"===n.role,X=(0,s.useColor)(e),Y=t.default.useMemo((()=>e.backgroundEnabled?function({lines:e,lineHeight:t,width:n,align:r="left",padding:i=0,cornerRadius:o=0}){var a;e.forEach(((e,t)=>{e.cx=n/2,"right"===r?e.cx=n-e.width/2:"left"===r&&(e.cx=e.width/2),"justify"!==r||e.lastInParagraph||(e.width=n),"justify"===r&&(e.cx=e.width/2)}));let s=`M ${null===(a=e[0])||void 0===a?void 0:a.cx} ${-i}`;e.forEach(((n,r)=>{const{cx:o}=n,a=e[r-1];a&&a.width>n.width?s+=` L ${o+n.width/2+i} ${r*t+i}`:s+=` L ${o+n.width/2+i} ${r*t-i}`;const l=e[r+1];l&&l.width>n.width?s+=` L ${o+n.width/2+i} ${(r+1)*t-i}`:s+=` L ${o+n.width/2+i} ${(r+1)*t+i}`}));for(var d=e.length-1;d>=0;d--){const n=e[d],{cx:r}=n,o=e[d+1];o&&o.width>n.width?s+=` L ${r-n.width/2-i} ${(d+1)*t-i}`:s+=` L ${r-n.width/2-i} ${(d+1)*t+i}`;const a=e[d-1];a&&a.width>n.width?s+=` L ${r-n.width/2-i} ${d*t+i}`:s+=` L ${r-n.width/2-i} ${d*t-i}`}s+=" Z";const u=(0,l.parsePath)(s);return(0,l.roundCommands)(u,o).path}({lines:JSON.parse(JSON.stringify(O)),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,O]),P=(0,x.isTouchDevice)();let _=0;return"middle"===e.verticalAlign?_=(e.a.height-O.length*q*e.a.fontSize)/2:"bottom"===e.verticalAlign&&(_=e.a.height-O.length*q*e.a.fontSize),t.default.createElement(t.default.Fragment,null,t.default.createElement(r.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:Y,fill:e.backgroundColor,offsetY:-_}),t.default.createElement(r.Text,Object.assign({ref:i,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)},X,{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:P?e.draggable&&y:e.draggable,preventDefault:!P||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:$,onTap:$,onTransformStart:()=>{m(!0),v.current=i.current.height()},onTransform:t=>{var n,r,i;const o=t.target;null===(n=a.current)||void 0===n||n.setAttrs({x:o.x(),y:o.y(),rotation:o.rotation(),scale:o.scale()});const l=(null===(r=o.getStage())||void 0===r?void 0:r.findOne("Transformer")).getActiveAnchor();if("middle-left"===l||"middle-right"===l){const t=o.scaleX(),n=o.width()*t,r=e.a.fontSize;let i=n;n<r&&(i=r,M.current&&o.position(M.current)),o.width(i),o.scaleX(1),o.scaleY(1);const a=k();if("ellipsis"!==c.flags.textOverflow){const t=Math.max(a,v.current);o.height(t),e.set({height:o.height()})}const l=c.flags.textVerticalResizeEnabled?Math.max(a,v.current):k();e.set({x:o.x(),width:o.width(),rotation:o.rotation(),height:l}),(0,f.applyFilter)(o,e)}if("top-center"===l||"bottom-center"===l){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();const s=t.target.scaleX();null===(i=a.current)||void 0===i||i.setAttrs({scaleX:1,scaleY:1}),t.target.scaleX(1),t.target.scaleY(1),e.set({fontSize:e.a.fontSize*s,width:t.target.width()*s,x:t.target.x(),y:t.target.y(),rotation:t.target.rotation(),height:t.target.height()*s,shadowBlur:e.shadowBlur*s,shadowOffsetX:e.shadowOffsetX*s,shadowOffsetY:e.shadowOffsetY*s,strokeWidth:e.strokeWidth*s})},onTransformEnd:t=>{var n;const r=t.target.scaleX();t.target.scaleX(1),t.target.scaleY(1),e.set({fontSize:Math.round(e.a.fontSize*r),width:Math.ceil(t.target.width()*r),x:t.target.x(),y:t.target.y(),rotation:t.target.rotation(),height:t.target.height()*r,shadowBlur:e.shadowBlur*r,shadowOffsetX:e.shadowOffsetX*r,shadowOffsetY:e.shadowOffsetY*r,strokeWidth:e.strokeWidth*r}),null===(n=a.current)||void 0===n||n.setAttrs({scaleX:1,scaleY:1}),m(!1)}})),d&&t.default.createElement(r.Group,{x:e.a.x,y:e.a.y,rotation:e.a.rotation},t.default.createElement(E,{textNodeRef:i,element:e,selectAll:u,cursorPosition:R.current,onBlur:()=>{e.toggleEditMode(!1),""===e.text&&e.removable&&!e.placeholder&&n.deleteElements([e.id])}})))}));
+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"),r=require("react-konva"),i=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"),h=require("../utils/text"),f=require("./apply-filters"),g=require("./use-fadein"),x=require("../utils/screen"),p=require("mobx-state-tree"),w=require("./text-element/max-font-size");let m;function v(){return m||(m=document.getElementById("polotno-text-style"),m||(m=document.createElement("style"),m.id="polotno-text-style",document.head.appendChild(m)),m)}a.default._fixTextRendering=!0;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++){r=e[n],void 0,i="֑-߿‏‫‮יִ-﷽ﹰ-ﻼ",new RegExp("^[^"+i+"]*?["+i+"]").test(r)&&(t+=1)}var r,i;return t>e.length/2}function E(e){return S(e)?"rtl":"ltr"}const b=(0,n.observer)((({textNodeRef:e,element:n,onBlur:r,selectAll:i,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",e.opacity=Math.max(n.a.opacity,.2);const t=`\n        .polotno-input::placeholder {\n          color: ${a.color};\n          opacity: 0.6;\n        }\n      `,r=v();r.innerHTML="",r.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,i&&(null==t||t.select(),document.execCommand("selectAll",!1,null))}),[]),t.default.useEffect((()=>{window.addEventListener("blur",r);const e=e=>{var t;(null===(t=d.current)||void 0===t?void 0:t.contains(e.target))||r()};return window.addEventListener("touchstart",e),()=>{window.removeEventListener("blur",r),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 f=(0,h.removeTags)(n.text);return t.default.createElement("textarea",{className:"polotno-input",ref:d,dir:E(f),style:Object.assign(Object.assign(Object.assign({},y),a),{paddingTop:u+"px"}),value:f,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:r})})),z=e=>t.default.createElement(i.Html,null,t.default.createElement(b,Object.assign({},e)));function F(e){const n=t.default.useRef(e),r=t.default.useRef(e);return t.default.useMemo((()=>{r.current=n.current,n.current=e}),[e]),r.current}exports.useFontLoader=(e,n)=>{const[r,i]=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,i();const r=(0,d.incrementLoader)(`text ${n}`);await e.loadFont(n),setTimeout(r,100),t&&(o.current=!0,i())})(),()=>{t=!1}}),[n]),[o.current]},exports.getLineHeight=({fontLoaded:e,fontFamily:n,fontSize:r,lineHeight:i})=>t.default.useMemo((()=>{if("number"==typeof i){return i}const e=document.createElement("div");e.style.fontFamily=n,e.style.fontSize=r+"px",e.style.lineHeight=i,e.innerText="Test text",document.body.appendChild(e);const t=e.offsetHeight;return document.body.removeChild(e),t/r}),[e,n,r,i]),exports.TextElement=(0,n.observer)((({element:e,store:n})=>{const i=t.default.useRef(null),a=t.default.useRef(null),{editorEnabled:d,selectAll:u}=(e=>{const[n,r]=t.default.useState(!1),i=t.default.useRef(!1);return t.default.useEffect((()=>{var t=!0;return setTimeout((()=>{t&&(e._editModeEnabled&&(i.current=!0),r(!0),setTimeout((()=>{i.current=!1}),50))}),50),()=>{t=!1}}),[]),{editorEnabled:n&&e._editModeEnabled,selectAll:i.current}})(e),[w,m]=t.default.useState(!1),v=t.default.useRef(e.a.height),y=n.selectedShapes.indexOf(e)>=0&&e.selectable,{textVerticalResizeEnabled:S}=c.flags,b=F(e.fontFamily),[O,L]=t.default.useState([]);t.default.useEffect((()=>{var e,t;const n=null!==(t=null===(e=i.current)||void 0===e?void 0:e.textArr)&&void 0!==t?t:[];JSON.stringify(n)!==JSON.stringify(O)&&L(n)})),t.default.useEffect((()=>{if(e.a.width){return}const t=i.current;t.width(600),e.set({width:1.4*t.getTextWidth()})}),[]),t.default.useLayoutEffect((()=>(0,o.autorun)((()=>{const t=i.current;(0,f.applyFilter)(t,e)}))));const[A]=(0,exports.useFontLoader)(n,e.fontFamily),T=(0,h.removeTags)(e.text),k=()=>{const e=i.current.clone({height:void 0}),t=Math.ceil(e.fontSize()*e.lineHeight()*e.textArr.length+1);return e.destroy(),t};t.default.useLayoutEffect((()=>{if(!A){return}const{textOverflow:t,textSplitAllowed:r}=c.flags;if(e.a.height){if(!n.isPlaying){if("change-font-size"!==t||w){if("resize"===t){const t=k();S&&e.a.height<t&&n.history.ignore((()=>{var n;(0,p.isAlive)(e)&&e.set({height:t}),null===(n=i.current)||void 0===n||n.height(t)}),!1,!0),S||e.a.height===t||w||n.history.ignore((()=>{var n;(0,p.isAlive)(e)&&e.set({height:t}),null===(n=i.current)||void 0===n||n.height(t)}),!1,!0)}}else{const t=function(e,t,n=!1){const r=e.fontSize(),i=e.height(),o=(0,h.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 r=t.a.height&&e.height()>t.a.height;let i=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=i.find((e=>!l.includes(e)||(l=l.replace(e,""),!1)));if(!(r||s&&!n)){break}a-=.5,e.fontSize(a)}return e.fontSize(r),e.height(i),a}(i.current,e,r);if(t!==e.a.fontSize){return void n.history.ignore((()=>{e.set({fontSize:t})}),!1,!0)}const o=k();e.a.height===o||S||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=i.current;t&&(t.width(t.width()+1e-8),t._setTextData(),(0,f.applyFilter)(t,e))}),[A]);const M=t.default.useRef(null),R=t.default.useRef(0),$=t=>{t.evt.preventDefault();const r=n.selectedShapes.find((t=>t===e));r&&e.contentEditable&&(R.current=function(e){var t;const n=e.target,r=function(e){var t=e.getAbsoluteTransform().copy();t.invert();var n=e.getStage().getPointerPosition();return t.point(n)}(n),i=n.textArr,o=Math.floor(r.y/(n.fontSize()*n.lineHeight())),a=i.slice(0,o).reduce(((e,t)=>e+t.text.length),o),l=null!==(t=i[o])&&void 0!==t?t:i[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((r.x-s)/l.width*l.text.length)}(t),e.toggleEditMode())},H=!T&&e.placeholder?.6:e.a.opacity;(0,g.useFadeIn)(i,H);const q=(0,exports.getLineHeight)({fontLoaded:A,fontFamily:e.fontFamily,fontSize:e.a.fontSize,lineHeight:e.lineHeight}),C=e.selectable||"admin"===n.role,X=(0,s.useColor)(e),Y=t.default.useMemo((()=>e.backgroundEnabled?function({lines:e,lineHeight:t,width:n,align:r="left",padding:i=0,cornerRadius:o=0}){var a;e.forEach(((e,t)=>{e.cx=n/2,"right"===r?e.cx=n-e.width/2:"left"===r&&(e.cx=e.width/2),"justify"!==r||e.lastInParagraph||(e.width=n),"justify"===r&&(e.cx=e.width/2)}));let s=`M ${null===(a=e[0])||void 0===a?void 0:a.cx} ${-i}`;e.forEach(((n,r)=>{const{cx:o}=n,a=e[r-1];a&&a.width>n.width?s+=` L ${o+n.width/2+i} ${r*t+i}`:s+=` L ${o+n.width/2+i} ${r*t-i}`;const l=e[r+1];l&&l.width>n.width?s+=` L ${o+n.width/2+i} ${(r+1)*t-i}`:s+=` L ${o+n.width/2+i} ${(r+1)*t+i}`}));for(var d=e.length-1;d>=0;d--){const n=e[d],{cx:r}=n,o=e[d+1];o&&o.width>n.width?s+=` L ${r-n.width/2-i} ${(d+1)*t-i}`:s+=` L ${r-n.width/2-i} ${(d+1)*t+i}`;const a=e[d-1];a&&a.width>n.width?s+=` L ${r-n.width/2-i} ${d*t+i}`:s+=` L ${r-n.width/2-i} ${d*t-i}`}s+=" Z";const u=(0,l.parsePath)(s);return(0,l.roundCommands)(u,o).path}({lines:JSON.parse(JSON.stringify(O)),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,O]),P=(0,x.isTouchDevice)();let _=0;return"middle"===e.verticalAlign?_=(e.a.height-O.length*q*e.a.fontSize)/2:"bottom"===e.verticalAlign&&(_=e.a.height-O.length*q*e.a.fontSize),t.default.createElement(t.default.Fragment,null,t.default.createElement(r.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:Y,fill:e.backgroundColor,offsetY:-_}),t.default.createElement(r.Text,Object.assign({ref:i,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:E(T)},X,{stroke:e.stroke,lineJoin:"round",strokeWidth:e.strokeWidth,fillAfterStrokeEnabled:!0,fontSize:e.a.fontSize,fontFamily:`"${e.fontFamily}", "${b}"`,fontStyle:e.fontStyle+" "+e.fontWeight,textDecoration:e.textDecoration,align:e.align,verticalAlign:e.verticalAlign,draggable:P?e.draggable&&y:e.draggable,preventDefault:!P||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:$,onTap:$,onTransformStart:()=>{m(!0),v.current=i.current.height()},onTransform:t=>{var n,r,i;const o=t.target;null===(n=a.current)||void 0===n||n.setAttrs({x:o.x(),y:o.y(),rotation:o.rotation(),scale:o.scale()});const l=(null===(r=o.getStage())||void 0===r?void 0:r.findOne("Transformer")).getActiveAnchor();if("middle-left"===l||"middle-right"===l){const t=o.scaleX(),n=o.width()*t,r=e.a.fontSize;let i=n;n<r&&(i=r,M.current&&o.position(M.current)),o.width(i),o.scaleX(1),o.scaleY(1);const a=k();if("ellipsis"!==c.flags.textOverflow){const t=Math.max(a,v.current);o.height(t),e.set({height:o.height()})}const l=c.flags.textVerticalResizeEnabled?Math.max(a,v.current):k();e.set({x:o.x(),width:o.width(),rotation:o.rotation(),height:l}),(0,f.applyFilter)(o,e)}if("top-center"===l||"bottom-center"===l){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();const s=t.target.scaleX();null===(i=a.current)||void 0===i||i.setAttrs({scaleX:1,scaleY:1}),t.target.scaleX(1),t.target.scaleY(1),e.set({fontSize:e.a.fontSize*s,width:t.target.width()*s,x:t.target.x(),y:t.target.y(),rotation:t.target.rotation(),height:t.target.height()*s,shadowBlur:e.shadowBlur*s,shadowOffsetX:e.shadowOffsetX*s,shadowOffsetY:e.shadowOffsetY*s,strokeWidth:e.strokeWidth*s})},onTransformEnd:t=>{var n;const r=t.target.scaleX();t.target.scaleX(1),t.target.scaleY(1),e.set({fontSize:Math.round(e.a.fontSize*r),width:Math.ceil(t.target.width()*r),x:t.target.x(),y:t.target.y(),rotation:t.target.rotation(),height:t.target.height()*r,shadowBlur:e.shadowBlur*r,shadowOffsetX:e.shadowOffsetX*r,shadowOffsetY:e.shadowOffsetY*r,strokeWidth:e.strokeWidth*r}),null===(n=a.current)||void 0===n||n.setAttrs({scaleX:1,scaleY:1}),m(!1)}})),d&&t.default.createElement(r.Group,{x:e.a.x,y:e.a.y,rotation:e.a.rotation},t.default.createElement(z,{textNodeRef:i,element:e,selectAll:u,cursorPosition:R.current,onBlur:()=>{e.toggleEditMode(!1),""===e.text&&e.removable&&!e.placeholder&&n.deleteElements([e.id])}})))}));

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("../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 T=h[x+C+L*l];y+=T<<24>>>24,M+=T<<16>>>24,E+=T<<8>>>24,b+=T>>>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,[T,R]=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||T);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=()=>{R(!1),I.currentTime=e.startTime*I.duration},l=()=>{I.currentTime>=e.endTime*I.duration&&(I.pause(),I.currentTime=e.startTime*I.duration,R(!1))};return I.addEventListener("ended",h),I.addEventListener("timeupdate",l),()=>{I.pause(),d.stop(),I.removeEventListener("ended",h),I.removeEventListener("timeupdate",l)}}),[I,T,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=e.startTime*I.duration*1e3,d=I.duration*(e.endTime-e.startTime)*1e3,h=((t.currentTime||e.page.startTime)-e.page.startTime)%d+i;if(Math.abs(1e3*I.currentTime-h)>500||!t.isPlaying){const r=h/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:T?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:()=>R(!T),onTap:()=>R(!T)}),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}))))}));
+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 T=h[x+C+L*l];y+=T<<24>>>24,M+=T<<16>>>24,E+=T<<8>>>24,b+=T>>>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;if(t&&r){return}const o=new Error("Video failed to load: "+e.message);console.error(o),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,[T,R]=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||T);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=()=>{R(!1),I.currentTime=e.startTime*I.duration},l=()=>{I.currentTime>=e.endTime*I.duration&&(I.pause(),I.currentTime=e.startTime*I.duration,R(!1))};return I.addEventListener("ended",h),I.addEventListener("timeupdate",l),()=>{I.pause(),d.stop(),I.removeEventListener("ended",h),I.removeEventListener("timeupdate",l)}}),[I,T,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=e.startTime*I.duration*1e3,d=I.duration*(e.endTime-e.startTime)*1e3,h=((t.currentTime||e.page.startTime)-e.page.startTime)%d+i;if(Math.abs(1e3*I.currentTime-h)>500||!t.isPlaying){const r=h/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:T?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:()=>R(!T),onTap:()=>R(!T)}),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/package.json

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