polotno 2.24.0 → 2.25.0

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,r,n){void 0===n&&(n=r);var o=Object.getOwnPropertyDescriptor(t,r);o&&!("get"in o?!t.__esModule:o.writable||o.configurable)||(o={enumerable:!0,get:function(){return t[r]}}),Object.defineProperty(e,n,o)}:function(e,t,r,n){void 0===n&&(n=r),e[n]=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}),n=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(n){if(n&&n.__esModule){return n}var o={};if(null!=n){for(var i=e(n),a=0;a<i.length;a++){"default"!==i[a]&&t(o,n,i[a])}}return r(o,n),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=T;const i=o(require("react")),a=require("mobx-react-lite"),l=require("react-konva"),s=o(require("quill")),c=n(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=n(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)`
   .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 r=e.clipboard.convert("<div class='ql-editor' style='outline: none;'>"+t+"<p><br></p></div>");e.setContents(r),e.history.clear()};const F=({html:e,onBlur:t,onChange:r,element:n,clickCoords:o})=>{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];r(t.innerHTML)}),10)})),o?setTimeout((()=>T(e,o)),0):e.setSelection(0,0,"api"),e.on("selection-change",((t,r,n)=>{t&&c.runInAction((()=>{exports.quillRef.currentFormat=e.getFormat()}))})),a.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 n=function(e){return!!e&&!!e.closest(".sketch-picker")}(e.relatedTarget);n||t()})),()=>{c.runInAction((()=>{exports.quillRef.editor.instance=null,exports.quillRef.currentFormat={}})),delete window.__polotnoQuill}}),[]),i.default.useEffect((()=>(0,k.reaction)((()=>n.text),(()=>{var t;const r=exports.quillRef.editor.instance;if(!r){return}const o=r.getSelection();(null===(t=a.current)||void 0===t?void 0:t.childNodes[0].innerHTML)===n.text||((0,exports.setQuillContent)(r,e),o&&(r.setSelection(o.index,o.length),c.runInAction((()=>{exports.quillRef.currentFormat=r.getFormat()}))))}),{fireImmediately:!0})),[]);const l={color:n.fill};return n.fill.indexOf("gradient")>=0&&(l.backgroundColor=n.fill,l.backgroundImage=n.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:n.fontSize,fontWeight:n.fontWeight,textTransform:n.textTransform,width:n.a.width,fontFamily:'"'+n.fontFamily+'"',lineHeight:n.lineHeight,letterSpacing:n.letterSpacing*n.fontSize+"px",textAlign:n.align,opacity:Math.max(n.a.opacity,.2)}),dir:(0,f.getDir)((0,b.removeTags)(n.text))})};function q(e,{fontFamily:t="",color:r="black"}={}){let n=`color: ${r||e.fill}`;return e.fill.indexOf("gradient")>=0&&(n=`\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`,n,`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: ${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);function T(e,t){if(!e||!t){return}const{x:r,y:n}=t;try{let t=null;if(document.caretRangeFromPoint){t=document.caretRangeFromPoint(r,n)}else if(document.caretPositionFromPoint){const e=document.caretPositionFromPoint(r,n);e&&(t=document.createRange(),t.setStart(e.offsetNode,e.offset))}if(t){const r=s.default.find(t.startContainer,!0);if(r){const n=r.offset(e.scroll)+t.startOffset;return void e.setSelection(n,0,"api")}}}catch(o){}e.setSelection(0,0,"api")}exports.HTMLElement=(0,a.observer)((({element:e,store:t})=>{const r=i.default.useRef(null),[n,o]=i.default.useState(),[a,s]=i.default.useState(!1),[x,k]=i.default.useState(!1),O=i.default.useRef(e.height),T=t.selectedShapes.indexOf(e)>=0&&e.selectable,C=e.fontSize/3,{textVerticalResizeEnabled:_}=u.flags,M=(0,f.usePrevious)(e.fontFamily),[$]=(0,f.useFontLoader)(t,e.fontFamily),P=e._editModeEnabled;(0,m.useFadeIn)(r);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,r){return i.default.useMemo((()=>(0,h.detectSize)(e)),[e,t.width,r])}(D,e,$);i.default.useEffect((()=>{if(!$){return}if(!e.height){return void e.set({height:j})}const{textOverflow:r}=u.flags;if("change-font-size"!==r||a){"resize"===r&&(_&&e.height<j&&t.history.ignore((()=>{e.set({height:j})})),_||e.height===j||t.history.ignore((()=>{e.set({height:j})})))}else{const r=(e=>{let t=e.fontSize;for(let r=1;r<50;r++){const r=q(Object.assign(Object.assign({},e.toJSON()),{fontSize:t}),{fontFamily:e.fontFamily}),{height:n}=(0,h.detectSize)(r),o=e.height&&n>e.height,i=(0,h.isContentWrapping)({html:r});if(!o&&!i){break}t-=.5}return t})(e);r!==e.fontSize?t.history.ignore((()=>{e.set({fontSize:r})})):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&&(r=e.lastArgs,n=t,JSON.stringify(r)===JSON.stringify(n))||(e.lastResult=await(0,h.htmlToCanvas)(t),e.lastArgs=Object.assign({},t)),e.lastResult;var r,n}}),[]),Y=i.default.useRef(0),L=i.default.useRef(null);i.default.useEffect((()=>{a||P||(async()=>{Y.current++;const r=Y.current;let n=(0,y.incrementLoader)(`text ${e.id} ${r}`);L.current&&L.current(),L.current=n,k(!0);let i=null;const a=R?5:1;for(let o=0;o<a;o++){const n=o>0?X:h.htmlToCanvas;try{if(i=await n({skipCache:o>0,html:D,width:e.width||1,height:e.height||j||1,fontFamily:I,padding:C,pixelRatio:t._elementsPixelRatio,font:t.fonts.find((e=>e.fontFamily===I))||w.globalFonts.find((e=>e.fontFamily===I))}),r!==Y.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}(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):n?(n(),n=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=r.current;(0,d.applyFilter)(t,e)}))}}),[n,N,e.shadowColor,e.shadowOffsetX,e.shadowOffsetY,e.shadowOpacity]),i.default.useEffect((()=>{n&&!x&&L.current&&(L.current(),L.current=null)}),[n,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),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: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: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 r;if(e.contentEditable){const n=null===(r=t.evt.changedTouches)||void 0===r?void 0:r[0];U.current=n?{x:n.clientX,y:n.clientY}:null,e.toggleEditMode(!0)}},onTransformStart:t=>{s(!0),O.current=e.height},onTransform:t=>{var r;const n=t.target,o=(null===(r=n.getStage())||void 0===r?void 0:r.findOne("Transformer")).getActiveAnchor(),i="middle-left"===o||"middle-right"===o,a="top-center"===o||"bottom-center"===o,l=n.scaleX();if(i){const t=n.scaleX(),r=n.width()*t,o=e.fontSize;let i=r;if(r<o&&(i=o,K.current&&n.position(K.current)),n.width(i),n.scaleX(1),u.flags.textVerticalResizeEnabled){const t=Math.max(j,O.current);e.set({height:t})}e.set({width:n.width(),x:n.x(),y:n.y()})}else if(a){let r="resize"===u.flags.textOverflow?j:e.lineHeight*e.fontSize;const o=Math.max(r,t.target.height()*t.target.scaleY());n.scaleY(1),e.set({x:n.x(),y:n.y(),height:o,rotation:n.rotation()})}else{n.scaleX(1),n.scaleY(1),e.set({fontSize:e.fontSize*l,letterSpacing:e.letterSpacing,width:n.width()*l,x:n.x(),y:n.y(),rotation:n.rotation(),height:n.height()*l})}K.current=t.target.position()},onTransformEnd:t=>{s(!1),k(!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})}}),i.default.createElement(l.Image,{ref:r,image:n,x:e.a.x,y:e.a.y,offsetX:C,offsetY:C-J,listening:!1,rotation:e.a.rotation,width:e.a.width+2*C,height:e.a.height+2*C,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 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])},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.0",
+  "version": "2.25.0",
   "description": "Design Editor Framework",
   "author": "Anton Lavrenov",
   "keywords": [
@@ -87,7 +87,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "size-limit": "^11.2.0",
-    "skia-canvas": "^1.0.2",
+    "skia-canvas": "^2.0.2",
     "svg-path-bounds": "^1.0.2",
     "terser": "^5.39.2",
     "ts-jest": "^29",