polotno 2.24.1 → 2.25.1

package/canvas/html-element.js

@@ -1,4 +1,4 @@
-var e,t=this&&this.__createBinding||(Object.create?function(e,t,n,o){void 0===o&&(o=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,o,r)}:function(e,t,n,o){void 0===o&&(o=n),e[o]=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}),o=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(o){if(o&&o.__esModule){return o}var r={};if(null!=o){for(var i=e(o),a=0;a<i.length;a++){"default"!==i[a]&&t(r,o,i[a])}}return n(r,o),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,exports.setCursorFromCoords=C;const i=r(require("react")),a=require("mobx-react-lite"),l=require("react-konva"),s=r(require("quill")),c=o(require("mobx")),u=require("../utils/flags"),d=require("./apply-filters"),f=require("./text-element"),g=require("./use-color"),h=require("../utils/html2canvas"),m=require("./use-fadein"),p=require("react-konva-utils"),x=r(require("../utils/styled")),y=require("../utils/loader"),b=require("../utils/text"),w=o(require("../utils/fonts")),v=require("../utils/screen"),S=require("./text-element/max-font-size"),k=require("mobx"),E=require("./use-delayer");exports.quillRef=c.observable({enabled:!1,currentFormat:{},editor:c.observable.object({instance:null},{},{deep:!1})});const z=(0,x.default)("div",i.default.forwardRef)`
+var e,t=this&&this.__createBinding||(Object.create?function(e,t,n,r){void 0===r&&(r=n);var o=Object.getOwnPropertyDescriptor(t,n);o&&!("get"in o?!t.__esModule:o.writable||o.configurable)||(o={enumerable:!0,get:function(){return t[n]}}),Object.defineProperty(e,r,o)}: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 o={};if(null!=r){for(var i=e(r),a=0;a<i.length;a++){"default"!==i[a]&&t(o,r,i[a])}}return n(o,r),o}),o=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,exports.setCursorFromCoords=C;const i=o(require("react")),a=require("mobx-react-lite"),l=require("react-konva"),s=o(require("quill")),c=r(require("mobx")),u=require("../utils/flags"),d=require("./apply-filters"),f=require("./text-element"),g=require("./use-color"),h=require("../utils/html2canvas"),m=require("./use-fadein"),p=require("react-konva-utils"),x=o(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",i.default.forwardRef)`
   .ql-editor {
     outline: none;
   }
@@ -12,4 +12,4 @@ var e,t=this&&this.__createBinding||(Object.create?function(e,t,n,o){void 0===o&
   .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 F=({html:e,onBlur:t,onChange:n,element:o,clickCoords:r})=>{const a=i.default.useRef(null);i.default.useEffect((()=>{if(!a.current){return}const e=(0,exports.createQuill)(a.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=a.current)||void 0===e?void 0:e.childNodes[0];n(t.innerHTML)}),10)})),r?setTimeout((()=>C(e,r)),0):e.setSelection(0,0,"api"),e.on("selection-change",((t,n,o)=>{t&&c.runInAction((()=>{exports.quillRef.currentFormat=e.getFormat()}))})),a.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 o=function(e){return!!e&&!!e.closest(".sketch-picker")}(e.relatedTarget);o||t()})),()=>{c.runInAction((()=>{exports.quillRef.editor.instance=null,exports.quillRef.currentFormat={}})),delete window.__polotnoQuill}}),[]),i.default.useEffect((()=>(0,k.reaction)((()=>o.text),(()=>{var t;const n=exports.quillRef.editor.instance;if(!n){return}const r=n.getSelection();(null===(t=a.current)||void 0===t?void 0:t.childNodes[0].innerHTML)===o.text||((0,exports.setQuillContent)(n,e),r&&(n.setSelection(r.index,r.length),c.runInAction((()=>{exports.quillRef.currentFormat=n.getFormat()}))))}),{fireImmediately:!0})),[]);const l={color:o.fill};return o.fill.indexOf("gradient")>=0&&(l.backgroundColor=o.fill,l.backgroundImage=o.fill,l.backgroundSize="100% 100%",l.backgroundRepeat="repeat",l.webkitBackgroundClip="text",l.MozBackgroundClip="text",l.WebkitTextFillColor="transparent",l.MozTextFillColor="transparent"),i.default.createElement(z,{ref:a,style:Object.assign(Object.assign({},l),{fontSize:o.fontSize,fontWeight:o.fontWeight,width:o.a.width,fontFamily:'"'+o.fontFamily+'"',lineHeight:o.lineHeight,letterSpacing:o.letterSpacing*o.fontSize+"px",textAlign:o.align,opacity:Math.max(o.a.opacity,.2)}),dir:(0,f.getDir)((0,b.removeTags)(o.text))})};function q(e,{fontFamily:t="",color:n="black"}={}){let o=`color: ${n||e.fill}`;return e.fill.indexOf("gradient")>=0&&(o=`\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`,o,`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,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);function C(e,t){if(!e||!t){return}const{x:n,y:o}=t;try{let t=null;if(document.caretRangeFromPoint){t=document.caretRangeFromPoint(n,o)}else if(document.caretPositionFromPoint){const e=document.caretPositionFromPoint(n,o);e&&(t=document.createRange(),t.setStart(e.offsetNode,e.offset))}if(t){const n=s.default.find(t.startContainer,!0);if(n){const o=n.offset(e.scroll)+t.startOffset;return void e.setSelection(o,0,"api")}}}catch(r){}e.setSelection(0,0,"api")}exports.HTMLElement=(0,a.observer)((({element:e,store:t})=>{const n=i.default.useRef(null),[o,r]=i.default.useState(),[a,s]=i.default.useState(!1),[x,k]=i.default.useState(!1),O=i.default.useRef(e.height),C=t.selectedShapes.indexOf(e)>=0&&e.selectable,T=e.fontSize/3,{textVerticalResizeEnabled:_}=u.flags,M=(0,f.usePrevious)(e.fontFamily),[$]=(0,f.useFontLoader)(t,e.fontFamily),P=e._editModeEnabled;(0,m.useFadeIn)(n);const I=$?e.fontFamily:M!==e.fontFamily?M:"Arial",A=(0,g.useColor)(e).fill,D=q(e,{fontFamily:I,color:A}),{width:H,height:j}=function(e,t,n){return i.default.useMemo((()=>(0,h.detectSize)(e)),[e,t.width,n])}(D,e,$);i.default.useEffect((()=>{if(!$){return}if(!e.height){return void e.set({height:j})}const{textOverflow:n}=u.flags;if("change-font-size"!==n||a){"resize"===n&&(_&&e.height<j&&t.history.ignore((()=>{e.set({height:j})})),_||e.height===j||t.history.ignore((()=>{e.set({height:j})})))}else{const n=(e=>{let t=e.fontSize;for(let n=1;n<50;n++){const n=q(Object.assign(Object.assign({},e.toJSON()),{fontSize:t}),{fontFamily:e.fontFamily}),{height:o}=(0,h.detectSize)(n),r=e.height&&o>e.height,i=(0,h.isContentWrapping)({html:n});if(!r&&!i){break}t-=.5}return t})(e);n!==e.fontSize?t.history.ignore((()=>{e.set({fontSize:n})})):e.height!==j&&(_&&e.height<j?t.history.ignore((()=>{e.set({height:j})})):_||t.history.ignore((()=>{e.set({height:j})})))}}));const X=i.default.useMemo((()=>{const e={lastArgs:null,lastResult:null};return async function(t){return e.lastArgs&&e.lastResult&&(n=e.lastArgs,o=t,JSON.stringify(n)===JSON.stringify(o))||(e.lastResult=await(0,h.htmlToCanvas)(t),e.lastArgs=Object.assign({},t)),e.lastResult;var n,o}}),[]),Y=i.default.useRef(0),L=i.default.useRef(null);i.default.useEffect((()=>{a||P||(async()=>{Y.current++;const n=Y.current;let o=(0,y.incrementLoader)(`text ${e.id} ${n}`);L.current&&L.current(),L.current=o,k(!0);let i=null;const a=R?5:1;for(let r=0;r<a;r++){const o=r>0?X:h.htmlToCanvas;try{if(i=await o({skipCache:r>0,html:D,width:e.width||1,height:e.height||j||1,fontFamily:I,padding:T,pixelRatio:t._elementsPixelRatio,font:t.fonts.find((e=>e.fontFamily===I))||w.globalFonts.find((e=>e.fontFamily===I))}),n!==Y.current){return}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}(i)&&R){await new Promise((e=>setTimeout(e,50*(r+1))));continue}break}catch(l){console.error(l),(0,y.triggerLoadError)(`Error rendering rich text with id ${e.id}`);break}}i?r(i):o?(o(),o=null):console.error("Finish function is called twice!"),k(!1)})()}),[D,a,j,P,I,e.height,t._elementsPixelRatio,$]);const[W,B]=(0,E.useDelayer)(x,300),[Q]=(0,E.useDelayer)(a,300,!0),N=Q||W;i.default.useEffect((()=>{if(!N){return c.autorun((()=>{const t=n.current;(0,d.applyFilter)(t,e)}))}}),[o,N,e.shadowColor,e.shadowOffsetX,e.shadowOffsetY,e.shadowOpacity]),i.default.useEffect((()=>{o&&!x&&L.current&&(L.current(),L.current=null)}),[o,x]),i.default.useEffect((()=>()=>{L.current&&L.current()}),[]);let J=0;"middle"===e.verticalAlign&&(J=(e.height-j)/2),"bottom"===e.verticalAlign&&(J=e.height-j);const V=(0,f.getLineHeight)({fontLoaded:$,fontFamily:e.fontFamily,fontSize:e.fontSize,lineHeight:e.lineHeight}),G=(0,v.isTouchDevice)(),K=i.default.useRef(null);return i.default.createElement(i.default.Fragment,null,i.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)}),i.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:!N,draggable:G?e.draggable&&C:e.draggable,preventDefault:!G||C,opacity:P?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:t=>{e.contentEditable&&(K.current={x:t.evt.clientX,y:t.evt.clientY},e.toggleEditMode(!0))},onDblTap:t=>{var n;if(e.contentEditable){const o=null===(n=t.evt.changedTouches)||void 0===n?void 0:n[0];K.current=o?{x:o.clientX,y:o.clientY}:null,e.toggleEditMode(!0)}},onTransformStart:t=>{s(!0),O.current=e.height},onTransform:t=>{var n;const o=t.target,r=(null===(n=o.getStage())||void 0===n?void 0:n.findOne("Transformer")).getActiveAnchor(),i="middle-left"===r||"middle-right"===r,a="top-center"===r||"bottom-center"===r,l=o.scaleX();if(i){const t=o.scaleX(),n=Math.max(o.width()*t,e.fontSize);if(o.width(n),o.scaleX(1),u.flags.textVerticalResizeEnabled){const t=Math.max(j,O.current);e.set({height:t})}e.set({width:n,x:o.x(),y:o.y()})}else if(a){let n="resize"===u.flags.textOverflow?j:e.lineHeight*e.fontSize;const r=Math.max(n,t.target.height()*t.target.scaleY());o.scaleY(1),e.set({x:o.x(),y:o.y(),height:r,rotation:o.rotation()})}else{o.scaleX(1),o.scaleY(1),e.set({fontSize:e.fontSize*l,letterSpacing:e.letterSpacing,width:o.width()*l,x:o.x(),y:o.y(),rotation:o.rotation(),height:o.height()*l})}},onTransformEnd:t=>{s(!1),k(!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})}}),i.default.createElement(l.Image,{ref:n,image:o,x:e.a.x,y:e.a.y,offsetX:T,offsetY:T-J,listening:!1,rotation:e.a.rotation,width:e.a.width+2*T,height:e.a.height+2*T,visible:!N,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}),N&&i.default.createElement(l.Group,{x:e.a.x,y:e.a.y,rotation:e.a.rotation,offsetY:-J},i.default.createElement(p.Html,{divProps:{style:{pointerEvents:"none"}}},i.default.createElement(z,{dangerouslySetInnerHTML:{__html:D},style:{pointerEvents:"none",opacity:e.a.opacity}}))),P&&i.default.createElement(l.Group,{x:e.a.x,y:e.a.y,rotation:e.a.rotation,offsetY:-J},i.default.createElement(p.Html,null,i.default.createElement(F,{html:D,element:e,onChange:t=>{const n=(0,S.getLimitedFontSize)({oldText:(0,b.removeTags)(e.text),newText:(0,b.removeTags)(t),element:e});e.set({text:t,fontSize:n})},onBlur:n=>{e.toggleEditMode(!1),B(!0),""===(0,b.removeTags)(e.text)&&e.removable&&!e.placeholder&&t.deleteElements([e.id])},clickCoords:K.current}))))}));
+`;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 F=({html:e,onBlur:t,onChange:n,element:r,clickCoords:o})=>{const a=i.default.useRef(null);i.default.useEffect((()=>{if(!a.current){return}const r=(0,exports.createQuill)(a.current);return c.runInAction((()=>{exports.quillRef.editor.instance=r})),window.__polotnoQuill=r,r.on("text-change",(()=>{r.getSelection()&&c.runInAction((()=>{exports.quillRef.currentFormat=r.getFormat()})),setTimeout((()=>{var e;const t=null===(e=a.current)||void 0===e?void 0:e.childNodes[0];n(t.innerHTML)}),10)})),(0,exports.setQuillContent)(r,e),o?C(r,o):r.setSelection(0,0,"api"),r.on("selection-change",((e,t,n)=>{e&&c.runInAction((()=>{exports.quillRef.currentFormat=r.getFormat()}))})),a.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}}),[]),i.default.useEffect((()=>(0,E.reaction)((()=>r.text),(()=>{var t;const n=exports.quillRef.editor.instance;if(!n){return}const o=n.getSelection();(null===(t=a.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()}))))}),{fireImmediately:!0})),[]),i.default.useEffect((()=>{window.addEventListener("blur",t);const e=e=>{var n;(null===(n=a.current)||void 0===n?void 0:n.contains(e.target))||t()};return window.addEventListener("touchstart",e),()=>{window.removeEventListener("blur",t),window.removeEventListener("touchstart",e)}}),[]);const l={color:r.fill};return r.fill.indexOf("gradient")>=0&&(l.backgroundColor=r.fill,l.backgroundImage=r.fill,l.backgroundSize="100% 100%",l.backgroundRepeat="repeat",l.webkitBackgroundClip="text",l.MozBackgroundClip="text",l.WebkitTextFillColor="transparent",l.MozTextFillColor="transparent"),i.default.createElement(z,{ref:a,style:Object.assign(Object.assign({},l),{fontSize:r.fontSize,fontWeight:r.fontWeight,textTransform:r.textTransform,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 q(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}`,`text-transform: ${e.textTransform}`,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,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);function C(e,t){if(!e||!t){return}const{x:n,y:r}=t;try{let t=null;if(document.caretRangeFromPoint){t=document.caretRangeFromPoint(n,r)}else if(document.caretPositionFromPoint){const e=document.caretPositionFromPoint(n,r);e&&(t=document.createRange(),t.setStart(e.offsetNode,e.offset))}if(t){const n=s.default.find(t.startContainer,!0);if(n){const r=n.offset(e.scroll)+t.startOffset;return void e.setSelection(r,0,"api")}}}catch(o){}e.setSelection(0,0,"api")}exports.HTMLElement=(0,a.observer)((({element:e,store:t})=>{const n=i.default.useRef(null),[r,o]=i.default.useState(),[a,s]=i.default.useState(!1),[x,E]=i.default.useState(!1),O=i.default.useRef(e.height),C=t.selectedShapes.indexOf(e)>=0&&e.selectable,T=e.fontSize/3,{textVerticalResizeEnabled:_}=u.flags,M=(0,f.usePrevious)(e.fontFamily),[$]=(0,f.useFontLoader)(t,e.fontFamily),P=e._editModeEnabled;(0,m.useFadeIn)(n);const I=$?e.fontFamily:M!==e.fontFamily?M:"Arial",L=(0,g.useColor)(e).fill,A=q(e,{fontFamily:I,color:L}),{width:D,height:H}=function(e,t,n){return i.default.useMemo((()=>(0,h.detectSize)(e)),[e,t.width,n])}(A,e,$);i.default.useEffect((()=>{if(!$){return}if(!e.height){return void e.set({height:H})}const{textOverflow:n}=u.flags;if("change-font-size"!==n||a){"resize"===n&&(_&&e.height<H&&t.history.ignore((()=>{e.set({height:H})})),_||e.height===H||t.history.ignore((()=>{e.set({height:H})})))}else{const n=(e=>{let t=e.fontSize;for(let n=1;n<50;n++){const n=q(Object.assign(Object.assign({},e.toJSON()),{fontSize:t}),{fontFamily:e.fontFamily}),{height:r}=(0,h.detectSize)(n),o=e.height&&r>e.height,i=(0,h.isContentWrapping)({html:n});if(!o&&!i){break}t-=.5}return t})(e);n!==e.fontSize?t.history.ignore((()=>{e.set({fontSize:n})})):e.height!==H&&(_&&e.height<H?t.history.ignore((()=>{e.set({height:H})})):_||t.history.ignore((()=>{e.set({height:H})})))}}));const j=i.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,h.htmlToCanvas)(t),e.lastArgs=Object.assign({},t)),e.lastResult;var n,r}}),[]),X=i.default.useRef(0),Y=i.default.useRef(null);i.default.useEffect((()=>{a||P||(async()=>{X.current++;const n=X.current;let r=(0,y.incrementLoader)(`text ${e.id} ${n}`);Y.current&&Y.current(),Y.current=r,E(!0);let i=null;const a=R?5:1;for(let o=0;o<a;o++){const r=o>0?j:h.htmlToCanvas;try{if(i=await r({skipCache:o>0,html:A,width:e.width||1,height:e.height||H||1,fontFamily:I,padding:T,pixelRatio:t._elementsPixelRatio,font:t.fonts.find((e=>e.fontFamily===I))||w.globalFonts.find((e=>e.fontFamily===I))}),n!==X.current){return}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}(i)&&R){await new Promise((e=>setTimeout(e,50*(o+1))));continue}break}catch(l){console.error(l),(0,y.triggerLoadError)(`Error rendering rich text with id ${e.id}`);break}}i?o(i):r?(r(),r=null):console.error("Finish function is called twice!"),E(!1)})()}),[A,a,H,P,I,e.height,t._elementsPixelRatio,$]);const[Q,W]=(0,k.useDelayer)(x,300),[B]=(0,k.useDelayer)(a,300,!0),N=B||Q;i.default.useEffect((()=>{if(!N){return c.autorun((()=>{const t=n.current;(0,d.applyFilter)(t,e)}))}}),[r,N,e.shadowColor,e.shadowOffsetX,e.shadowOffsetY,e.shadowOpacity]),i.default.useEffect((()=>{r&&!x&&Y.current&&(Y.current(),Y.current=null)}),[r,x]),i.default.useEffect((()=>()=>{Y.current&&Y.current()}),[]);let J=0;"middle"===e.verticalAlign&&(J=(e.height-H)/2),"bottom"===e.verticalAlign&&(J=e.height-H);const V=(0,f.getLineHeight)({fontLoaded:$,fontFamily:e.fontFamily,fontSize:e.fontSize,lineHeight:e.lineHeight}),G=(0,v.isTouchDevice)(),K=i.default.useRef(null),U=i.default.useRef(null);return i.default.createElement(i.default.Fragment,null,i.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)}),i.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:!N,draggable:G?e.draggable&&C:e.draggable,preventDefault:!G||C,opacity:P?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:t=>{e.contentEditable&&(U.current={x:t.evt.clientX,y:t.evt.clientY},e.toggleEditMode(!0))},onDblTap:t=>{var n;if(e.contentEditable){const r=null===(n=t.evt.changedTouches)||void 0===n?void 0:n[0];U.current=r?{x:r.clientX,y:r.clientY}:null,e.toggleEditMode(!0)}},onTransformStart:t=>{s(!0),O.current=e.height},onTransform:t=>{var n;const r=t.target,o=(null===(n=r.getStage())||void 0===n?void 0:n.findOne("Transformer")).getActiveAnchor(),i="middle-left"===o||"middle-right"===o,a="top-center"===o||"bottom-center"===o,l=r.scaleX();if(i){const t=r.scaleX(),n=r.width()*t,o=e.fontSize;let i=n;if(n<o&&(i=o,K.current&&r.position(K.current)),r.width(i),r.scaleX(1),u.flags.textVerticalResizeEnabled){const t=Math.max(H,O.current);e.set({height:t})}e.set({width:r.width(),x:r.x(),y:r.y()})}else if(a){let n="resize"===u.flags.textOverflow?H:e.lineHeight*e.fontSize;const o=Math.max(n,t.target.height()*t.target.scaleY());r.scaleY(1),e.set({x:r.x(),y:r.y(),height:o,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})}K.current=t.target.position()},onTransformEnd:t=>{s(!1),E(!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})}}),i.default.createElement(l.Image,{ref:n,image:r,x:e.a.x,y:e.a.y,offsetX:T,offsetY:T-J,listening:!1,rotation:e.a.rotation,width:e.a.width+2*T,height:(e.a.width+2*T)*((null==r?void 0:r.height)/(null==r?void 0:r.width)||1),visible:!N&&!P,opacity:e.a.opacity,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,hideInExport:!e.showInExport,editModeEnabled:e._editModeEnabled}),N&&i.default.createElement(l.Group,{x:e.a.x,y:e.a.y,rotation:e.a.rotation,offsetY:-J},i.default.createElement(p.Html,{divProps:{style:{pointerEvents:"none"}}},i.default.createElement(z,{dangerouslySetInnerHTML:{__html:A},style:{pointerEvents:"none",opacity:e.a.opacity}}))),P&&i.default.createElement(l.Group,{x:e.a.x,y:e.a.y,rotation:e.a.rotation,offsetY:-J},i.default.createElement(p.Html,null,i.default.createElement(F,{html:A,element:e,onChange:t=>{const n=(0,S.getLimitedFontSize)({oldText:(0,b.removeTags)(e.text),newText:(0,b.removeTags)(t),element:e});e.set({text:t,fontSize:n})},onBlur:n=>{e.toggleEditMode(!1),W(!0),""===(0,b.removeTags)(e.text)&&e.removable&&!e.placeholder&&t.deleteElements([e.id])},clickCoords:U.current}))))}));

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"),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])}})))}));
+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"),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");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",textTransform:"none"};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),e.textTransform=n.textTransform;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 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,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,h.applyFilter)(t,e)}))));const[T]=(0,exports.useFontLoader)(n,e.fontFamily);let A=(0,f.removeTags)(e.text);"uppercase"===e.textTransform&&(A=A.toUpperCase());const 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(!T){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,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 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,h.applyFilter)(t,e))}),[T]);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=!A&&e.placeholder?.6:e.a.opacity;(0,g.useFadeIn)(i,H);const q=(0,exports.getLineHeight)({fontLoaded:T,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:A||e.placeholder,direction:E(A)},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,h.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/model/group-model.d.ts

@@ -228,6 +228,7 @@ export declare const TYPES_MAP: {
         fontStyle: import("mobx-state-tree").IType<string, string, string>;
         fontWeight: import("mobx-state-tree").IType<string, string, string>;
         textDecoration: import("mobx-state-tree").IType<string, string, string>;
+        textTransform: import("mobx-state-tree").IType<string, string, string>;
         fill: import("mobx-state-tree").IType<string, string, string>;
         align: import("mobx-state-tree").IType<string, string, string>;
         width: import("mobx-state-tree").IType<number, number, number>;

package/model/text-model.d.ts

@@ -57,6 +57,7 @@ export declare const TextElement: import("mobx-state-tree").IModelType<{
     fontStyle: import("mobx-state-tree").IType<string, string, string>;
     fontWeight: import("mobx-state-tree").IType<string, string, string>;
     textDecoration: import("mobx-state-tree").IType<string, string, string>;
+    textTransform: import("mobx-state-tree").IType<string, string, string>;
     fill: import("mobx-state-tree").IType<string, string, string>;
     align: import("mobx-state-tree").IType<string, string, string>;
     width: import("mobx-state-tree").IType<number, number, number>;

package/model/text-model.js

@@ -1 +1 @@
-Object.defineProperty(exports,"__esModule",{value:!0}),exports.TextElement=void 0;const e=require("mobx-state-tree"),t=require("./shape-model");exports.TextElement=t.Shape.named("Text").props({type:"text",text:"",placeholder:"",fontSize:14,fontFamily:"Roboto",fontStyle:"normal",fontWeight:"normal",textDecoration:"",fill:"black",align:"center",width:100,height:0,verticalAlign:"top",strokeWidth:0,stroke:"black",lineHeight:e.types.optional(e.types.union(e.types.number,e.types.string),1.2),letterSpacing:0,_editModeEnabled:!1,backgroundEnabled:!1,backgroundColor:"#7ED321",backgroundOpacity:1,backgroundCornerRadius:.5,backgroundPadding:.5}).preProcessSnapshot((e=>Object.assign({},e))).actions((e=>({toggleEditMode(t){e._editModeEnabled=null!=t?t:!e._editModeEnabled,e._editModeEnabled?e.store.history.startTransaction():e.store.history.endTransaction()}})));
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.TextElement=void 0;const e=require("mobx-state-tree"),t=require("./shape-model");exports.TextElement=t.Shape.named("Text").props({type:"text",text:"",placeholder:"",fontSize:14,fontFamily:"Roboto",fontStyle:"normal",fontWeight:"normal",textDecoration:"",textTransform:"none",fill:"black",align:"center",width:100,height:0,verticalAlign:"top",strokeWidth:0,stroke:"black",lineHeight:e.types.optional(e.types.union(e.types.number,e.types.string),1.2),letterSpacing:0,_editModeEnabled:!1,backgroundEnabled:!1,backgroundColor:"#7ED321",backgroundOpacity:1,backgroundCornerRadius:.5,backgroundPadding:.5}).preProcessSnapshot((e=>Object.assign({},e))).actions((e=>({toggleEditMode(t){e._editModeEnabled=null!=t?t:!e._editModeEnabled,e._editModeEnabled?e.store.history.startTransaction():e.store.history.endTransaction()}})));

package/package.json

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

package/pages-timeline/pages-timeline.js

@@ -1,7 +1,7 @@
-var e=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.PagesTimeline=exports.Pages=void 0;const t=require("mobx-react-lite"),a=e(require("react")),n=require("mobx-state-tree"),o=require("@blueprintjs/core"),l=require("@blueprintjs/icons"),i=require("react-sortablejs"),r=require("../utils/flags"),s=e(require("../utils/styled")),d=require("../utils/l10n"),u=require("../utils/deep-equal"),c=(0,s.default)("div")`
+var e=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.PagesTimeline=exports.Pages=void 0;const t=require("mobx-react-lite"),a=require("mobx"),n=e(require("react")),o=require("mobx-state-tree"),l=require("@blueprintjs/core"),i=require("@blueprintjs/icons"),r=require("react-sortablejs"),s=require("../utils/flags"),d=e(require("../utils/styled")),u=require("../utils/l10n"),c=require("../utils/deep-equal"),p=(0,d.default)("div")`
   position: relative;
   height: 0px;
-`,p=(0,s.default)("div")`
+`,m=(0,d.default)("div")`
   position: absolute;
   bottom: 5px;
   width: auto;
@@ -10,7 +10,7 @@ var e=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:
   box-shadow: 0 0 4px lightgrey;
   border-radius: 5px;
   z-index: 1;
-`,m=(0,s.default)("div",a.default.forwardRef)`
+`,f=(0,d.default)("div",n.default.forwardRef)`
   display: flex;
   position: relative;
   border-radius: 15px;
@@ -21,7 +21,7 @@ var e=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:
       pointer-events: auto;
     }
   }
-`,f=(0,s.default)("div")`
+`,g=(0,d.default)("div")`
   position: relative;
 
   &:hover {
@@ -30,7 +30,7 @@ var e=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:
       pointer-events: auto;
     }
   }
-`,g=(0,s.default)("div")`
+`,h=(0,d.default)("div")`
   position: absolute;
   z-index: 20;
   top: 5px;
@@ -41,7 +41,7 @@ var e=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:
   &:hover {
     display: block;
   }
-`,h=(0,s.default)("div")`
+`,x=(0,d.default)("div")`
   border: 4px solid rgba(0, 0, 0, 0.1);
   border-left-color: #09f;
   border-radius: 50%;
@@ -54,7 +54,7 @@ var e=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:
       transform: rotate(360deg);
     }
   }
-`,x=(0,s.default)("div")`
+`,v=(0,d.default)("div")`
   position: absolute;
   z-index: 20;
   top: -5px;
@@ -65,7 +65,7 @@ var e=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:
   &:hover {
     display: block;
   }
-`;let v=[],b=!1;const E=async()=>{if(b||0===v.length){return}b=!0;const{page:e,setPreview:t}=v.shift();try{t(await e.store.toDataURL({pageId:e.id,pixelRatio:.1,quickMode:!0}))}catch(a){if(a.message.includes("Canvas was unmounted.")){return}throw a}b=!1,E()},w=(0,t.observer)((({page:e,scale:t})=>{const[i,s]=a.default.useState(null),c=e.store.activePage===e,p=e.store,f=a.default.useRef(!1);a.default.useEffect((()=>{const t=()=>{v.push({page:e,setPreview:s}),E()};let a=null,o=null,l=Date.now();const i=()=>{a&&clearTimeout(a),f.current&&(o||(o=setTimeout((()=>{Date.now()-l>=6e3&&(t(),l=Date.now(),o=null)}),6e3)),a=setTimeout((()=>{t(),l=Date.now(),a=null,o&&(clearTimeout(o),o=null)}),300))};let r=null;const d=(0,n.onSnapshot)(e,(e=>{(0,u.deepEqual)(r,e)||(i(),r=e)})),c=new IntersectionObserver((e=>{e.forEach((e=>{e.isIntersecting?(f.current=!0,i()):(a&&clearTimeout(a),o&&clearTimeout(o),f.current=!1)}))}),{threshold:.1});return x.current&&c.observe(x.current),()=>{c.disconnect(),a&&clearTimeout(a),o&&clearTimeout(o),d(),v=v.filter((t=>t.page!==e))}}),[]);const x=a.default.useRef(null),b=60/e.computedHeight*e.computedWidth,w=r.flags.animationsEnabled?e.duration*t:b,y=p.pages.length>1;return a.default.createElement(m,{style:{width:w+"px",marginRight:r.flags.animationsEnabled?"0px":"10px",height:"60px"},ref:x,className:"polotno-page-container"},a.default.createElement("div",{style:{width:"100%",height:"100%",borderRadius:"15px",backgroundImage:i?`url("${i}")`:"none",backgroundRepeat:"repeat-x",backgroundSize:"auto 100%",backgroundColor:"white",display:"flex",justifyContent:"center",alignItems:"center"},onClick:()=>{e.store.selectPage(e.id)}},!i&&a.default.createElement(h,null)),a.default.createElement("div",{style:{position:"absolute",top:"0",left:"0px",bottom:"0px",right:"0px",borderRadius:"15px",border:c?"2px solid rgb(0, 161, 255, 0.9)":"2px solid lightgrey",zIndex:1,pointerEvents:"none"}}),r.flags.animationsEnabled&&a.default.createElement("div",{style:{position:"absolute",zIndex:1,bottom:"5px",left:"5px",backgroundColor:"rgba(0, 0, 0, 0.5)",color:"white",padding:"2px 7px",textAlign:"center",borderRadius:"4rem"}},(e.duration/1e3).toFixed(1),"s"),r.flags.animationsEnabled&&a.default.createElement("div",{style:{position:"absolute",zIndex:1,top:"50%",right:"0px",width:"8px",height:"50%",transform:"translateY(-50%) translateX(-3px)",borderRadius:"5px",border:"1px solid rgb(255, 255, 255, 0.6)",backgroundColor:"rgb(0, 0, 0, 0.6)",cursor:"ew-resize"},onMouseDown:t=>{(t=>{t.preventDefault();const a=t=>{t.preventDefault();const{clientX:a}=t,{left:n,width:o}=x.current.getBoundingClientRect(),l=(a-n- -7)/o;e.set({duration:Math.max(1e3,l*e.duration)})};window.addEventListener("mousemove",a),window.addEventListener("mouseup",(()=>{window.removeEventListener("mousemove",a)}))})(t)}}),a.default.createElement(g,{className:"polotno-page-menu",onClick:e=>{e.stopPropagation()}},a.default.createElement(o.Popover,{content:a.default.createElement(o.Menu,{style:{width:"100px"}},a.default.createElement(o.MenuItem,{icon:a.default.createElement(l.Duplicate,null),text:(0,d.t)("pagesTimeline.duplicatePage"),onClick:()=>{e.clone()}}),a.default.createElement(o.MenuItem,{icon:a.default.createElement(l.Insert,null),text:(0,d.t)("pagesTimeline.addPage"),onClick:()=>{var t,a,n;const o=p.addPage({bleed:(null===(t=p.activePage)||void 0===t?void 0:t.bleed)||0,width:(null===(a=p.activePage)||void 0===a?void 0:a.width)||"auto",height:(null===(n=p.activePage)||void 0===n?void 0:n.height)||"auto"}),l=p.pages.indexOf(e);o.setZIndex(l+1)}}),y&&a.default.createElement(o.MenuItem,{icon:a.default.createElement(l.Trash,null),text:(0,d.t)("pagesTimeline.removePage"),onClick:()=>{e.store.deletePages([e.id])}})),position:o.Position.TOP},a.default.createElement(o.Button,{icon:a.default.createElement(l.More,null),style:{minHeight:"20px",borderRadius:"10px"}}))))})),y=(0,t.observer)((({store:e,scale:t})=>{var n;const o=e.isPlaying?e.currentTime:(null===(n=e.activePage)||void 0===n?void 0:n.startTime)||0;return a.default.createElement("div",{style:{position:"absolute",left:o*t+"px",top:"-5px",width:"2px",height:"calc(100% + 10px)",backgroundColor:"rgb(0, 161, 255, 0.9)"}})}));exports.Pages=(0,t.observer)((({store:e,scale:t})=>{const n=e.pages.map((e=>({id:e.id})));return a.default.createElement(a.default.Fragment,null,a.default.createElement(i.ReactSortable,{list:n,setList:t=>{t.forEach((({id:t},a)=>{const n=e.pages.find((e=>e.id===t));e.pages.indexOf(n)!==a&&n.setZIndex(a)}))},direction:"horizontal",style:{display:"flex",flexDirection:"row"},delay:500,delayOnTouchOnly:!0,className:"polotno-pages-container"},n.map((({id:n})=>{const o=e.pages.find((e=>e.id===n));return a.default.createElement(w,{page:o,scale:t,key:n})}))))}));const P=(0,t.observer)((({audio:e,scale:t,store:n,index:i})=>{const r=n.duration*t-e.delay*t,s=Math.min((e.endTime-e.startTime)*e.duration*t,r),u=e.delay*t,{data:c,isLoading:p}=function(e){const[t,n]=a.default.useState(null),[o,l]=a.default.useState(!1),[i,r]=a.default.useState(null);return a.default.useEffect((()=>{var t;e?(l(!0),(t=e,new Promise((e=>{const a=new AudioContext;fetch(t).then((e=>e.arrayBuffer())).then((e=>a.decodeAudioData(e))).then((t=>{const a=t.getChannelData(0),n=Math.max(1,Math.floor(a.length/100)),o=[];for(let e=0;e<a.length;e+=n){let t=0;for(let o=0;o<n&&e+o<a.length;o++){t=Math.max(t,Math.abs(a[e+o]))}o.push(t)}e(o)}))}))).then((e=>{n(e),l(!1)})).catch((e=>{console.error("Error generating waveform:",e),r(e),l(!1)}))):n(null)}),[e]),{data:t,isLoading:o,error:i}}(e.src),m=function(e,t,n,o,l=20){const[i,r]=a.default.useState("");return a.default.useEffect((()=>{r(e&&t>0?function(e,t,a,n,o){let l="";const i=t/2,r=Math.floor(e.length*n),s=Math.ceil(e.length*o),d=e.slice(r,s);if(0===d.length){return""}d.forEach(((e,t)=>{const n=t/(d.length-1)*a,o=i-e*i;l+=0===t?`M ${n},${o}`:` L ${n},${o}`}));for(let u=d.length-1;u>=0;u--){const e=u/(d.length-1)*a,t=i+d[u]*i;l+=` L ${e},${t}`}return l+=" Z",l}(e,l,t,n,o):"")}),[e,t,l,n,o]),i}(c,s,e.startTime,e.endTime,20),g=e=>{const a=n.pages;let o=e;for(const n of a){const a=n.startTime,l=n.startTime+n.duration;if(Math.abs(e-a)<10/t){return o=a,o}if(Math.abs(e-l)<10/t){return o=l,o}}return null},v=(a,n)=>{a.stopPropagation(),a.preventDefault();const o=a.clientX,l=u,i=s,r=e.endTime,d=e.startTime,c=a=>{a.preventDefault();const s=(a.clientX-o)/t;if("start"===n){let a=Math.max(0,l/t+s);a=g(a)||a;const n=s/e.duration,o=Math.min(e.endTime-.1,Math.max(0,d+n));e.set({delay:a,startTime:o})}else{const a=l/t+i/t;let n=a+s;n=g(n)||n;const o=(n-a)/e.duration,d=Math.min(1,Math.max(e.startTime+.1,r+o));e.set({endTime:d})}},p=()=>{window.removeEventListener("mousemove",c),window.removeEventListener("mouseup",p)};window.addEventListener("mousemove",c),window.addEventListener("mouseup",p)};return a.default.createElement(f,{style:{position:"absolute",left:`${u}px`,top:20*i+"px",width:`${s}px`,height:"20px",backgroundColor:"rgba(0, 161, 255, 0.5)",borderRadius:"8px",cursor:"move"},onMouseDown:a=>{const n=a.clientX,o=u;a.preventDefault();const l=a=>{a.preventDefault();const l=(a.clientX-n)/t;let i=o/t+l;const r=(e.endTime-e.startTime)*e.duration,s=i+r,d=g(i),u=g(s),c=Math.abs(i-d),p=Math.abs(s-u);let m;m=null!==d&&c<p?Math.max(0,d):null!==u?Math.max(0,u-r):Math.max(0,i),e.set({delay:m})},i=()=>{window.removeEventListener("mousemove",l),window.removeEventListener("mouseup",i)};window.addEventListener("mousemove",l),window.addEventListener("mouseup",i)},className:"polotno-audio-container"},m&&a.default.createElement("svg",{width:"100%",height:"100%",viewBox:`0 0 ${s} 20`,preserveAspectRatio:"none"},a.default.createElement("path",{d:m,fill:"rgba(255, 255, 255, 0.5)"})),p&&a.default.createElement("div",{style:{display:"flex",justifyContent:"center",alignItems:"center",height:"100%"}},a.default.createElement(h,null)),a.default.createElement("div",{style:{position:"absolute",left:"0",top:"0",width:"10px",height:"100%",cursor:"ew-resize"},onMouseDown:e=>v(e,"start")}),a.default.createElement("div",{style:{position:"absolute",right:"0",top:"0",width:"10px",height:"100%",cursor:"ew-resize"},onMouseDown:e=>v(e,"end")}),a.default.createElement(x,{className:"polotno-audio-menu",onClick:e=>{e.stopPropagation()}},a.default.createElement(o.Popover,{content:a.default.createElement(o.Menu,{style:{width:"100px"}},a.default.createElement(o.MenuItem,{icon:a.default.createElement(l.Trash,null),text:(0,d.t)("pagesTimeline.removeAudio"),onClick:()=>{n.removeAudio(e.id)}})),position:o.Position.TOP},a.default.createElement(o.Button,{icon:a.default.createElement(l.More,null),style:{minHeight:"20px",borderRadius:"10px",padding:"0px"}}))))})),T=(0,t.observer)((({store:e,scale:t})=>a.default.createElement("div",{style:{position:"absolute",bottom:"-15px",paddingTop:"5px"},className:"polotno-audios-container"},e.audios.map(((n,o)=>a.default.createElement(P,{key:n.id,audio:n,scale:t,store:e,index:o})))))),M=e=>{const t=Math.floor(e/6e4),a=Math.floor(e%6e4/1e3);return`${t.toString().padStart(2,"0")}:${a.toString().padStart(2,"0")}`},k=(0,s.default)("div")`
+`;let b=[],E=!1;const w=async()=>{if(E||0===b.length){return}E=!0;const{page:e,setPreview:t}=b.shift();try{t(await e.store.toDataURL({pageId:e.id,pixelRatio:.1,quickMode:!0}))}catch(a){if(a.message.includes("Canvas was unmounted.")){return}throw a}E=!1,w()},y=(0,t.observer)((({page:e,scale:t})=>{const[r,d]=n.default.useState(null),p=e.store.activePage===e,m=e.store,g=n.default.useRef(!1);n.default.useEffect((()=>{const t=()=>{b.push({page:e,setPreview:d}),w()};let n=null,l=null,i=Date.now();const r=()=>{n&&clearTimeout(n),g.current&&(l||(l=setTimeout((()=>{Date.now()-i>=6e3&&(t(),i=Date.now(),l=null)}),6e3)),n=setTimeout((()=>{t(),i=Date.now(),n=null,l&&(clearTimeout(l),l=null)}),300))};let s=null;const u=(0,o.onSnapshot)(e,(e=>{(0,c.deepEqual)(s,e)||(r(),s=e)})),p=(0,a.reaction)((()=>e.children.some((e=>e._editModeEnabled))),(e=>{e||r()})),m=new IntersectionObserver((e=>{e.forEach((e=>{e.isIntersecting?(g.current=!0,r()):(n&&clearTimeout(n),l&&clearTimeout(l),g.current=!1)}))}),{threshold:.1});return v.current&&m.observe(v.current),()=>{m.disconnect(),n&&clearTimeout(n),l&&clearTimeout(l),u(),p(),b=b.filter((t=>t.page!==e))}}),[]);const v=n.default.useRef(null),E=60/e.computedHeight*e.computedWidth,y=s.flags.animationsEnabled?e.duration*t:E,P=m.pages.length>1;return n.default.createElement(f,{style:{width:y+"px",marginRight:s.flags.animationsEnabled?"0px":"10px",height:"60px"},ref:v,className:"polotno-page-container"},n.default.createElement("div",{style:{width:"100%",height:"100%",borderRadius:"15px",backgroundImage:r?`url("${r}")`:"none",backgroundRepeat:"repeat-x",backgroundSize:"auto 100%",backgroundColor:"white",display:"flex",justifyContent:"center",alignItems:"center"},onClick:()=>{e.store.selectPage(e.id)}},!r&&n.default.createElement(x,null)),n.default.createElement("div",{style:{position:"absolute",top:"0",left:"0px",bottom:"0px",right:"0px",borderRadius:"15px",border:p?"2px solid rgb(0, 161, 255, 0.9)":"2px solid lightgrey",zIndex:1,pointerEvents:"none"}}),s.flags.animationsEnabled&&n.default.createElement("div",{style:{position:"absolute",zIndex:1,bottom:"5px",left:"5px",backgroundColor:"rgba(0, 0, 0, 0.5)",color:"white",padding:"2px 7px",textAlign:"center",borderRadius:"4rem"}},(e.duration/1e3).toFixed(1),"s"),s.flags.animationsEnabled&&n.default.createElement("div",{style:{position:"absolute",zIndex:1,top:"50%",right:"0px",width:"8px",height:"50%",transform:"translateY(-50%) translateX(-3px)",borderRadius:"5px",border:"1px solid rgb(255, 255, 255, 0.6)",backgroundColor:"rgb(0, 0, 0, 0.6)",cursor:"ew-resize"},onMouseDown:t=>{(t=>{t.preventDefault();const a=t=>{t.preventDefault();const{clientX:a}=t,{left:n,width:o}=v.current.getBoundingClientRect(),l=(a-n- -7)/o;e.set({duration:Math.max(1e3,l*e.duration)})};window.addEventListener("mousemove",a),window.addEventListener("mouseup",(()=>{window.removeEventListener("mousemove",a)}))})(t)}}),n.default.createElement(h,{className:"polotno-page-menu",onClick:e=>{e.stopPropagation()}},n.default.createElement(l.Popover,{content:n.default.createElement(l.Menu,{style:{width:"100px"}},n.default.createElement(l.MenuItem,{icon:n.default.createElement(i.Duplicate,null),text:(0,u.t)("pagesTimeline.duplicatePage"),onClick:()=>{e.clone()}}),n.default.createElement(l.MenuItem,{icon:n.default.createElement(i.Insert,null),text:(0,u.t)("pagesTimeline.addPage"),onClick:()=>{var t,a,n;const o=m.addPage({bleed:(null===(t=m.activePage)||void 0===t?void 0:t.bleed)||0,width:(null===(a=m.activePage)||void 0===a?void 0:a.width)||"auto",height:(null===(n=m.activePage)||void 0===n?void 0:n.height)||"auto"}),l=m.pages.indexOf(e);o.setZIndex(l+1)}}),P&&n.default.createElement(l.MenuItem,{icon:n.default.createElement(i.Trash,null),text:(0,u.t)("pagesTimeline.removePage"),onClick:()=>{e.store.deletePages([e.id])}})),position:l.Position.TOP},n.default.createElement(l.Button,{icon:n.default.createElement(i.More,null),style:{minHeight:"20px",borderRadius:"10px"}}))))})),P=(0,t.observer)((({store:e,scale:t})=>{var a;const o=e.isPlaying?e.currentTime:(null===(a=e.activePage)||void 0===a?void 0:a.startTime)||0;return n.default.createElement("div",{style:{position:"absolute",left:o*t+"px",top:"-5px",width:"2px",height:"calc(100% + 10px)",backgroundColor:"rgb(0, 161, 255, 0.9)"}})}));exports.Pages=(0,t.observer)((({store:e,scale:t})=>{const a=e.pages.map((e=>({id:e.id})));return n.default.createElement(n.default.Fragment,null,n.default.createElement(r.ReactSortable,{list:a,setList:t=>{t.forEach((({id:t},a)=>{const n=e.pages.find((e=>e.id===t));e.pages.indexOf(n)!==a&&n.setZIndex(a)}))},direction:"horizontal",style:{display:"flex",flexDirection:"row"},delay:500,delayOnTouchOnly:!0,className:"polotno-pages-container"},a.map((({id:a})=>{const o=e.pages.find((e=>e.id===a));return n.default.createElement(y,{page:o,scale:t,key:a})}))))}));const T=(0,t.observer)((({audio:e,scale:t,store:a,index:o})=>{const r=a.duration*t-e.delay*t,s=Math.min((e.endTime-e.startTime)*e.duration*t,r),d=e.delay*t,{data:c,isLoading:p}=function(e){const[t,a]=n.default.useState(null),[o,l]=n.default.useState(!1),[i,r]=n.default.useState(null);return n.default.useEffect((()=>{var t;e?(l(!0),(t=e,new Promise((e=>{const a=new AudioContext;fetch(t).then((e=>e.arrayBuffer())).then((e=>a.decodeAudioData(e))).then((t=>{const a=t.getChannelData(0),n=Math.max(1,Math.floor(a.length/100)),o=[];for(let e=0;e<a.length;e+=n){let t=0;for(let o=0;o<n&&e+o<a.length;o++){t=Math.max(t,Math.abs(a[e+o]))}o.push(t)}e(o)}))}))).then((e=>{a(e),l(!1)})).catch((e=>{console.error("Error generating waveform:",e),r(e),l(!1)}))):a(null)}),[e]),{data:t,isLoading:o,error:i}}(e.src),m=function(e,t,a,o,l=20){const[i,r]=n.default.useState("");return n.default.useEffect((()=>{r(e&&t>0?function(e,t,a,n,o){let l="";const i=t/2,r=Math.floor(e.length*n),s=Math.ceil(e.length*o),d=e.slice(r,s);if(0===d.length){return""}d.forEach(((e,t)=>{const n=t/(d.length-1)*a,o=i-e*i;l+=0===t?`M ${n},${o}`:` L ${n},${o}`}));for(let u=d.length-1;u>=0;u--){const e=u/(d.length-1)*a,t=i+d[u]*i;l+=` L ${e},${t}`}return l+=" Z",l}(e,l,t,a,o):"")}),[e,t,l,a,o]),i}(c,s,e.startTime,e.endTime,20),f=e=>{const n=a.pages;let o=e;for(const a of n){const n=a.startTime,l=a.startTime+a.duration;if(Math.abs(e-n)<10/t){return o=n,o}if(Math.abs(e-l)<10/t){return o=l,o}}return null},h=(a,n)=>{a.stopPropagation(),a.preventDefault();const o=a.clientX,l=d,i=s,r=e.endTime,u=e.startTime,c=a=>{a.preventDefault();const s=(a.clientX-o)/t;if("start"===n){let a=Math.max(0,l/t+s);a=f(a)||a;const n=s/e.duration,o=Math.min(e.endTime-.1,Math.max(0,u+n));e.set({delay:a,startTime:o})}else{const a=l/t+i/t;let n=a+s;n=f(n)||n;const o=(n-a)/e.duration,d=Math.min(1,Math.max(e.startTime+.1,r+o));e.set({endTime:d})}},p=()=>{window.removeEventListener("mousemove",c),window.removeEventListener("mouseup",p)};window.addEventListener("mousemove",c),window.addEventListener("mouseup",p)};return n.default.createElement(g,{style:{position:"absolute",left:`${d}px`,top:20*o+"px",width:`${s}px`,height:"20px",backgroundColor:"rgba(0, 161, 255, 0.5)",borderRadius:"8px",cursor:"move"},onMouseDown:a=>{const n=a.clientX,o=d;a.preventDefault();const l=a=>{a.preventDefault();const l=(a.clientX-n)/t;let i=o/t+l;const r=(e.endTime-e.startTime)*e.duration,s=i+r,d=f(i),u=f(s),c=Math.abs(i-d),p=Math.abs(s-u);let m;m=null!==d&&c<p?Math.max(0,d):null!==u?Math.max(0,u-r):Math.max(0,i),e.set({delay:m})},i=()=>{window.removeEventListener("mousemove",l),window.removeEventListener("mouseup",i)};window.addEventListener("mousemove",l),window.addEventListener("mouseup",i)},className:"polotno-audio-container"},m&&n.default.createElement("svg",{width:"100%",height:"100%",viewBox:`0 0 ${s} 20`,preserveAspectRatio:"none"},n.default.createElement("path",{d:m,fill:"rgba(255, 255, 255, 0.5)"})),p&&n.default.createElement("div",{style:{display:"flex",justifyContent:"center",alignItems:"center",height:"100%"}},n.default.createElement(x,null)),n.default.createElement("div",{style:{position:"absolute",left:"0",top:"0",width:"10px",height:"100%",cursor:"ew-resize"},onMouseDown:e=>h(e,"start")}),n.default.createElement("div",{style:{position:"absolute",right:"0",top:"0",width:"10px",height:"100%",cursor:"ew-resize"},onMouseDown:e=>h(e,"end")}),n.default.createElement(v,{className:"polotno-audio-menu",onClick:e=>{e.stopPropagation()}},n.default.createElement(l.Popover,{content:n.default.createElement(l.Menu,{style:{width:"100px"}},n.default.createElement(l.MenuItem,{icon:n.default.createElement(i.Trash,null),text:(0,u.t)("pagesTimeline.removeAudio"),onClick:()=>{a.removeAudio(e.id)}})),position:l.Position.TOP},n.default.createElement(l.Button,{icon:n.default.createElement(i.More,null),style:{minHeight:"20px",borderRadius:"10px",padding:"0px"}}))))})),M=(0,t.observer)((({store:e,scale:t})=>n.default.createElement("div",{style:{position:"absolute",bottom:"-15px",paddingTop:"5px"},className:"polotno-audios-container"},e.audios.map(((a,o)=>n.default.createElement(T,{key:a.id,audio:a,scale:t,store:e,index:o})))))),k=e=>{const t=Math.floor(e/6e4),a=Math.floor(e%6e4/1e3);return`${t.toString().padStart(2,"0")}:${a.toString().padStart(2,"0")}`},C=(0,d.default)("div")`
   position: absolute;
   top: 5px;
   left: 5px;
@@ -73,4 +73,4 @@ var e=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:
   z-index: 2;
   width: 100px;
   text-align: center;
-`,C=(0,t.observer)((({store:e})=>a.default.createElement(k,{className:"polotno-play-button-container"},a.default.createElement(o.Button,{icon:e.isPlaying?a.default.createElement(l.Pause,{size:25}):a.default.createElement(l.Play,{size:25}),onClick:()=>{var t;if(e.isPlaying){const t=e.activePage;e.stop(),t&&e.selectPage(t.id)}else{e.play({startTime:(null===(t=e.activePage)||void 0===t?void 0:t.startTime)||0})}},style:{width:"60px",height:"60px",borderRadius:"50px"}}),a.default.createElement("div",{style:{paddingTop:"5px"}},M(e.currentTime)," / ",M(e.duration)))));exports.PagesTimeline=(0,t.observer)((({store:e,defaultOpened:t=!1})=>{const n=.02,[i,s]=a.default.useState(t),u=r.flags.animationsEnabled?10*e.audios.length+90:90;return a.default.createElement(a.default.Fragment,null,a.default.createElement(c,null,a.default.createElement(p,null,a.default.createElement(o.Navbar,{style:{height:"35px",padding:"0 5px"}},a.default.createElement(o.Navbar.Group,{style:{height:"35px"}},a.default.createElement(o.Button,{minimal:!0,onClick:()=>{s(!i)},icon:r.flags.animationsEnabled&&!i?a.default.createElement(l.Play,null):null},(0,d.t)("pagesTimeline.pages")))))),a.default.createElement(o.Navbar,{style:{padding:"5px",height:"auto",zIndex:1,display:i?"block":"none"},className:"polotno-pages-timeline"},a.default.createElement("div",{style:{width:"100%",position:"relative",height:u}},a.default.createElement("div",{style:{position:"absolute",top:0,left:0,right:0,bottom:0,overflowX:"auto",padding:"5px",zIndex:1,display:"flex"}},a.default.createElement("div",{style:{height:"60px",display:"flex"}},r.flags.animationsEnabled&&a.default.createElement("div",{style:{width:"90px",paddingRight:"5px",paddingLeft:"60px"}}),a.default.createElement("div",{style:{position:"relative"}},a.default.createElement(exports.Pages,{store:e,scale:n}),r.flags.animationsEnabled&&a.default.createElement(y,{store:e,scale:n}),r.flags.animationsEnabled&&a.default.createElement(T,{store:e,scale:n})),a.default.createElement(o.Button,{icon:a.default.createElement(l.Plus,null),style:{width:"60px"},onClick:()=>{var t;e.addPage({bleed:(null===(t=e.activePage)||void 0===t?void 0:t.bleed)||0})},minimal:!0}))),r.flags.animationsEnabled&&a.default.createElement(C,{store:e}))))}));
+`,D=(0,t.observer)((({store:e})=>n.default.createElement(C,{className:"polotno-play-button-container"},n.default.createElement(l.Button,{icon:e.isPlaying?n.default.createElement(i.Pause,{size:25}):n.default.createElement(i.Play,{size:25}),onClick:()=>{var t;if(e.isPlaying){const t=e.activePage;e.stop(),t&&e.selectPage(t.id)}else{e.play({startTime:(null===(t=e.activePage)||void 0===t?void 0:t.startTime)||0})}},style:{width:"60px",height:"60px",borderRadius:"50px"}}),n.default.createElement("div",{style:{paddingTop:"5px"}},k(e.currentTime)," / ",k(e.duration)))));exports.PagesTimeline=(0,t.observer)((({store:e,defaultOpened:t=!1})=>{const a=.02,[o,r]=n.default.useState(t),d=s.flags.animationsEnabled?10*e.audios.length+90:90;return n.default.createElement(n.default.Fragment,null,n.default.createElement(p,null,n.default.createElement(m,null,n.default.createElement(l.Navbar,{style:{height:"35px",padding:"0 5px"}},n.default.createElement(l.Navbar.Group,{style:{height:"35px"}},n.default.createElement(l.Button,{minimal:!0,onClick:()=>{r(!o)},icon:s.flags.animationsEnabled&&!o?n.default.createElement(i.Play,null):null},(0,u.t)("pagesTimeline.pages")))))),n.default.createElement(l.Navbar,{style:{padding:"5px",height:"auto",zIndex:1,display:o?"block":"none"},className:"polotno-pages-timeline"},n.default.createElement("div",{style:{width:"100%",position:"relative",height:d}},n.default.createElement("div",{style:{position:"absolute",top:0,left:0,right:0,bottom:0,overflowX:"auto",padding:"5px",zIndex:1,display:"flex"}},n.default.createElement("div",{style:{height:"60px",display:"flex"}},s.flags.animationsEnabled&&n.default.createElement("div",{style:{width:"90px",paddingRight:"5px",paddingLeft:"60px"}}),n.default.createElement("div",{style:{position:"relative"}},n.default.createElement(exports.Pages,{store:e,scale:a}),s.flags.animationsEnabled&&n.default.createElement(P,{store:e,scale:a}),s.flags.animationsEnabled&&n.default.createElement(M,{store:e,scale:a})),n.default.createElement(l.Button,{icon:n.default.createElement(i.Plus,null),style:{width:"60px"},onClick:()=>{var t;e.addPage({bleed:(null===(t=e.activePage)||void 0===t?void 0:t.bleed)||0})},minimal:!0}))),s.flags.animationsEnabled&&n.default.createElement(D,{store:e}))))}));