polotno 1.2.5 → 1.3.0

package/canvas/text-element.d.ts

@@ -18,7 +18,7 @@ export declare const useTextColor: (element: TextElementType) => {
 } | {
     fillLinearGradientStartPointX: number;
     fillLinearGradientStartPointY: number;
-    fillLinearGradientColorStops: any[];
+    fillLinearGradientColorStops: never[];
     fillLinearGradientEndPointX: number;
     fillLinearGradientEndPointY: number;
     fill: any;

package/canvas/text-element.js

@@ -1 +1 @@
-"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,t,r,i){void 0===i&&(i=r);var n=Object.getOwnPropertyDescriptor(t,r);n&&!("get"in n?!t.__esModule:n.writable||n.configurable)||(n={enumerable:!0,get:function(){return t[r]}}),Object.defineProperty(e,i,n)}:function(e,t,r,i){void 0===i&&(i=r),e[i]=t[r]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),__importStar=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)"default"!==r&&Object.prototype.hasOwnProperty.call(e,r)&&__createBinding(t,e,r);return __setModuleDefault(t,e),t},__importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.TextElement=exports.useTextColor=exports.useFontLoader=exports.getDir=exports.isRTLText=void 0;const react_1=__importDefault(require("react")),mobx_react_lite_1=require("mobx-react-lite"),react_konva_1=require("react-konva"),react_konva_utils_1=require("react-konva-utils"),mobx_1=require("mobx"),konva_1=__importDefault(require("konva")),loader_1=require("../utils/loader"),fonts_1=require("../utils/fonts"),flags_1=require("../utils/flags"),text_1=require("../utils/text"),gradient=__importStar(require("../utils/gradient")),apply_filters_1=require("./apply-filters"),use_fadein_1=require("./use-fadein"),highlighter_1=require("./highlighter"),styleNode=document.createElement("style");styleNode.type="text/css",document.head.appendChild(styleNode);const initialStyles={border:"none",padding:"0px",overflow:"hidden",background:"none",outline:"none",resize:"none",overflowWrap:"break-word",whiteSpace:"pre-wrap",userSelect:"text",wordBreak:"normal"};function isRTL(e){return new RegExp("^[^֑-߿‏‫‮יִ-﷽ﹰ-ﻼ]*?[֑-߿‏‫‮יִ-﷽ﹰ-ﻼ]").test(e)}function isRTLText(e){e=e.replace(/\s/g,"");let t=0;for(var r=0;r<e.length;r++){isRTL(e[r])&&(t+=1)}return t>e.length/2}function getDir(e){return isRTLText(e)?"rtl":"ltr"}exports.isRTLText=isRTLText,exports.getDir=getDir;const TextInput=(0,mobx_react_lite_1.observer)((({textNodeRef:e,element:t,onBlur:r,selectAll:i,cursorPosition:n})=>{const[o,a]=react_1.default.useState(initialStyles),l=e.current;react_1.default.useLayoutEffect((()=>{const e={};e.width=l.width()-2*l.padding()+"px",e.height=l.height()-2*l.padding()+10+"px",e.fontSize=l.fontSize()+"px",e.lineHeight=l.lineHeight()+.01,e.fontFamily=l.fontFamily(),e.textAlign=l.align(),e.color=l.fill(),e.fontWeight=t.fontWeight,e.fontStyle=t.fontStyle;const r=`\n        .polotno-input::placeholder {\n          color: ${o.color};\n          opacity: 0.6;\n        }\n      `;styleNode.innerHTML="",styleNode.appendChild(document.createTextNode(r)),JSON.stringify(e)!==JSON.stringify(o)&&a(e)}));const s=react_1.default.useRef(null);react_1.default.useEffect((()=>{const e=setTimeout((()=>{var e;const t=s.current;if(!t)return;null===(e=s.current)||void 0===e||e.focus();const r=n||t.value.length;t.selectionStart=t.selectionEnd=r,i&&(null==t||t.select(),document.execCommand("selectAll",!1,null))}));return()=>{clearTimeout(e)}}),[]);let c=0;const u=l.textArr.length*l.lineHeight()*l.fontSize();return"middle"===t.verticalAlign&&(c=(t.height-u)/2),"bottom"===t.verticalAlign&&(c=t.height-u),react_1.default.createElement(react_konva_utils_1.Html,null,react_1.default.createElement("textarea",{className:"polotno-input",ref:s,dir:getDir(t.text),style:Object.assign(Object.assign(Object.assign({},initialStyles),o),{paddingTop:c+"px"}),value:t.text,onChange:e=>{t.set({text:e.target.value})},placeholder:t.placeholder,onBlur:r}))})),useEditor=e=>{const[t,r]=react_1.default.useState(!1),i=react_1.default.useRef(!1);return react_1.default.useEffect((()=>{var t=!0;return setTimeout((()=>{t&&(e._editModeEnabled&&(i.current=!0),r(!0),setTimeout((()=>{i.current=!1}),50))}),50),()=>{t=!1}}),[]),{editorEnabled:t&&e._editModeEnabled,selectAll:i.current}},useFontLoader=(e,t)=>{const[r,i]=react_1.default.useState((0,fonts_1.isFontLoaded)(t));return react_1.default.useLayoutEffect((()=>{if((0,fonts_1.isFontLoaded)(t))return void i(!0);let n=!0;return(async()=>{r&&i(!1);const o=(0,loader_1.incrementLoader)(`text ${t}`);await e.loadFont(t),konva_1.default.Util.requestAnimFrame(o),n&&i(!0)})(),()=>{n=!1}}),[t]),[r]};exports.useFontLoader=useFontLoader;const getLineHeight=({fontLoaded:e,fontFamily:t,fontSize:r,lineHeight:i})=>react_1.default.useMemo((()=>{if("number"==typeof i)return i;const e=document.createElement("div");e.style.fontFamily=t,e.style.fontSize=r+"px",e.style.lineHeight=i,e.innerText="Test text",document.body.appendChild(e);const n=e.offsetHeight;return document.body.removeChild(e),n/r}),[e,t,r,i]);function getRelativePointerPosition(e){var t=e.getAbsoluteTransform().copy();t.invert();var r=e.getStage().getPointerPosition();return t.point(r)}function getCursorPosition(e){var t;const r=e.target,i=getRelativePointerPosition(r),n=r.textArr,o=Math.floor(i.y/(r.fontSize()*r.lineHeight())),a=n.slice(0,o).reduce(((e,t)=>e+t.text.length),o),l=null!==(t=n[o])&&void 0!==t?t:n[0];let s=0;"right"===r.align()?s=r.width()-l.width:"center"===r.align()&&(s=r.width()/2-l.width/2);return a+Math.round((i.x-s)/l.width*l.text.length)}function usePrevious(e){const t=react_1.default.useRef(e),r=react_1.default.useRef(e);return react_1.default.useEffect((()=>{r.current=t.current,t.current=e}),[e]),r.current}function findFitFontSize(e,t){const r=e.getAttrs(),i=(0,text_1.removeTags)(t.text);let n=t.fontSize;const o=Math.round(2*t.fontSize)-1;for(let r=1;r<o;r++){const r=t.height&&e.height()>t.height,o=i.split("\n").join(" ").split(" ");let a=e.textArr.map((e=>e.text)).join(";");const l=o.find((e=>!a.includes(e)||(a=a.replace(e,""),!1)));if(!(r||l))break;n-=.5,e.fontSize(n)}return e.fontSize(r.fontSize),n}const useTextColor=e=>react_1.default.useMemo((()=>{if(!gradient.isGradient(e.fill))return{fill:e.fill};const t=gradient.parseColor(e.fill),r={x:e.width/2,y:e.height/2},i=Math.sqrt(Math.pow(r.x,2)+Math.pow(r.y,2)),n=konva_1.default.Util.degToRad(t[0])-Math.PI/2;return{fillLinearGradientStartPointX:r.x-i*Math.cos(n),fillLinearGradientStartPointY:r.y-i*Math.sin(n),fillLinearGradientColorStops:[0,t[1],1,t[2]],fillLinearGradientEndPointX:r.x+i*Math.cos(n),fillLinearGradientEndPointY:r.y+i*Math.sin(n),fill:t[1],fillPriority:"linear-gradient"}}),[e.fill]);exports.useTextColor=useTextColor,exports.TextElement=(0,mobx_react_lite_1.observer)((({element:e,store:t})=>{const r=react_1.default.useRef(null),{editorEnabled:i,selectAll:n}=useEditor(e),[o,a]=react_1.default.useState(!1),[l,s]=react_1.default.useState(!1),c=react_1.default.useRef(e.height),u=t.selectedElements.indexOf(e)>=0,{textVerticalResizeEnabled:d}=flags_1.flags,f=usePrevious(e.fontFamily);react_1.default.useEffect((()=>{if(e.width)return;const t=r.current;t.width(600),e.set({width:1.4*t.getTextWidth()})}),[]),react_1.default.useLayoutEffect((()=>(0,mobx_1.autorun)((()=>{const t=r.current;(0,apply_filters_1.applyFilter)(t,e)}))));const[h]=(0,exports.useFontLoader)(t,e.fontFamily),g=(0,text_1.removeTags)(e.text),_=()=>{const e=r.current.clone({height:void 0}),t=Math.ceil(e.fontSize()*e.lineHeight()*e.textArr.length+1);return e.destroy(),t};react_1.default.useLayoutEffect((()=>{if(!h)return;const{textOverflow:i}=flags_1.flags;if(e.height)if("change-font-size"!==i||l){if("resize"===i){const i=_();d&&e.height<i&&t.history.ignore((()=>{e.set({height:i}),r.current.height(i)})),d||e.height===i||t.history.ignore((()=>{e.set({height:i}),r.current.height(i)}))}}else{const i=findFitFontSize(r.current,e);if(i!==e.fontSize)return void t.history.ignore((()=>{e.set({fontSize:i})}));const n=_();e.height!==n&&t.history.ignore((()=>{e.set({height:n})}))}else{const r=_();t.history.ignore((()=>{e.set({height:r})}))}})),react_1.default.useLayoutEffect((()=>{const t=r.current;t&&(t.width(t.width()+1e-8),t._setTextData(),(0,apply_filters_1.applyFilter)(t,e))}),[h]);const p=react_1.default.useRef(null),x=react_1.default.useRef(0),y=r=>{const i=t.selectedElements.find((t=>t===e));i&&e.contentEditable&&(x.current=getCursorPosition(r),e.toggleEditMode())},m=!g&&e.placeholder?.6:e.opacity;(0,use_fadein_1.useFadeIn)(r,m);const v=getLineHeight({fontLoaded:h,fontFamily:e.fontFamily,fontSize:e.fontSize,lineHeight:e.lineHeight}),S=e.selectable||"admin"===t.role,w=(0,exports.useTextColor)(e);return react_1.default.createElement(react_1.default.Fragment,null,react_1.default.createElement(react_konva_1.Text,Object.assign({ref:r,id:e.id,name:"element",hideInExport:!e.showInExport||!g,editModeEnabled:e._editModeEnabled,x:e.x,y:e.y,rotation:e.rotation,width:e.width,height:e.height,text:g||e.placeholder},w,{stroke:e.stroke,strokeWidth:e.strokeWidth,fillAfterStrokeEnabled:!0,fontSize:e.fontSize,fontFamily:`"${e.fontFamily}", "${f}"`,fontStyle:e.fontStyle+" "+e.fontWeight,textDecoration:e.textDecoration,align:e.align,verticalAlign:e.verticalAlign,draggable:e.draggable,opacity:m,visible:!e._editModeEnabled,ellipsis:"ellipsis"===flags_1.flags.textOverflow,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,lineHeight:v,letterSpacing:e.letterSpacing*e.fontSize,listening:S,onDragStart:()=>{t.history.startTransaction()},onDragMove:t=>{e.set({x:t.target.x(),y:t.target.y()})},onDragEnd:r=>{e.set({x:r.target.x(),y:r.target.y()}),t.history.endTransaction()},onMouseEnter:()=>{a(!0)},onMouseLeave:()=>{a(!1)},onClick:y,onTap:y,onTransformStart:()=>{s(!0),t.history.startTransaction(),c.current=r.current.height()},onTransform:t=>{var r;const i=t.target,n=(null===(r=i.getStage())||void 0===r?void 0:r.findOne("Transformer")).getActiveAnchor();if("middle-left"===n||"middle-right"===n){const t=i.scaleX(),r=i.width()*t,n=e.fontSize;let o=r;r<n&&(o=n,p.current&&i.position(p.current)),i.width(o),i.scaleX(1),i.scaleY(1);const a=_();if("ellipsis"!==flags_1.flags.textOverflow){const t=Math.max(a,c.current);i.height(t),e.set({height:i.height()})}e.set({x:i.x(),y:i.y(),width:i.width(),rotation:i.rotation()}),(0,apply_filters_1.applyFilter)(i,e)}if("top-center"===n||"bottom-center"===n){let r="resize"===flags_1.flags.textOverflow?_():v*e.fontSize;t.target.height(Math.max(r,t.target.height()*t.target.scaleY())),t.target.scaleY(1)}t.target.strokeWidth(e.strokeWidth/t.target.scaleX()),p.current=t.target.position()},onTransformEnd:r=>{s(!1);const i=r.target.scaleX();r.target.scaleX(1),r.target.scaleY(1),r.target.strokeWidth(e.strokeWidth),e.set({fontSize:Math.round(e.fontSize*i),width:Math.ceil(r.target.width()*i),x:r.target.x(),y:r.target.y(),rotation:r.target.rotation(),height:r.target.height()}),t.history.endTransaction()}})),i&&react_1.default.createElement(react_konva_1.Group,{x:e.x,y:e.y,rotation:e.rotation},react_1.default.createElement(TextInput,{textNodeRef:r,element:e,selectAll:n,cursorPosition:x.current,onBlur:()=>{e.toggleEditMode(!1)}})),!l&&(o||u)&&react_1.default.createElement(highlighter_1.Highlighter,{element:e}))}));
+"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,t,r,i){void 0===i&&(i=r);var n=Object.getOwnPropertyDescriptor(t,r);n&&!("get"in n?!t.__esModule:n.writable||n.configurable)||(n={enumerable:!0,get:function(){return t[r]}}),Object.defineProperty(e,i,n)}:function(e,t,r,i){void 0===i&&(i=r),e[i]=t[r]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),__importStar=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)"default"!==r&&Object.prototype.hasOwnProperty.call(e,r)&&__createBinding(t,e,r);return __setModuleDefault(t,e),t},__importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.TextElement=exports.useTextColor=exports.useFontLoader=exports.getDir=exports.isRTLText=void 0;const react_1=__importDefault(require("react")),mobx_react_lite_1=require("mobx-react-lite"),react_konva_1=require("react-konva"),react_konva_utils_1=require("react-konva-utils"),mobx_1=require("mobx"),konva_1=__importDefault(require("konva")),loader_1=require("../utils/loader"),fonts_1=require("../utils/fonts"),flags_1=require("../utils/flags"),text_1=require("../utils/text"),gradient=__importStar(require("../utils/gradient")),apply_filters_1=require("./apply-filters"),use_fadein_1=require("./use-fadein"),highlighter_1=require("./highlighter"),styleNode=document.createElement("style");styleNode.type="text/css",document.head.appendChild(styleNode);const initialStyles={border:"none",padding:"0px",overflow:"hidden",background:"none",outline:"none",resize:"none",overflowWrap:"break-word",whiteSpace:"pre-wrap",userSelect:"text",wordBreak:"normal"};function isRTL(e){return new RegExp("^[^֑-߿‏‫‮יִ-﷽ﹰ-ﻼ]*?[֑-߿‏‫‮יִ-﷽ﹰ-ﻼ]").test(e)}function isRTLText(e){e=e.replace(/\s/g,"");let t=0;for(var r=0;r<e.length;r++){isRTL(e[r])&&(t+=1)}return t>e.length/2}function getDir(e){return isRTLText(e)?"rtl":"ltr"}exports.isRTLText=isRTLText,exports.getDir=getDir;const TextInput=(0,mobx_react_lite_1.observer)((({textNodeRef:e,element:t,onBlur:r,selectAll:i,cursorPosition:n})=>{const[o,a]=react_1.default.useState(initialStyles),l=e.current;react_1.default.useLayoutEffect((()=>{const e={};e.width=l.width()-2*l.padding()+"px",e.height=l.height()-2*l.padding()+10+"px",e.fontSize=l.fontSize()+"px",e.lineHeight=l.lineHeight()+.01,e.fontFamily=l.fontFamily(),e.textAlign=l.align(),e.color=l.fill(),e.fontWeight=t.fontWeight,e.fontStyle=t.fontStyle;const r=`\n        .polotno-input::placeholder {\n          color: ${o.color};\n          opacity: 0.6;\n        }\n      `;styleNode.innerHTML="",styleNode.appendChild(document.createTextNode(r)),JSON.stringify(e)!==JSON.stringify(o)&&a(e)}));const s=react_1.default.useRef(null);react_1.default.useEffect((()=>{const e=setTimeout((()=>{var e;const t=s.current;if(!t)return;null===(e=s.current)||void 0===e||e.focus();const r=n||t.value.length;t.selectionStart=t.selectionEnd=r,i&&(null==t||t.select(),document.execCommand("selectAll",!1,null))}));return()=>{clearTimeout(e)}}),[]);let c=0;const u=l.textArr.length*l.lineHeight()*l.fontSize();return"middle"===t.verticalAlign&&(c=(t.height-u)/2),"bottom"===t.verticalAlign&&(c=t.height-u),react_1.default.createElement(react_konva_utils_1.Html,null,react_1.default.createElement("textarea",{className:"polotno-input",ref:s,dir:getDir(t.text),style:Object.assign(Object.assign(Object.assign({},initialStyles),o),{paddingTop:c+"px"}),value:t.text,onChange:e=>{t.set({text:e.target.value})},placeholder:t.placeholder,onBlur:r}))})),useEditor=e=>{const[t,r]=react_1.default.useState(!1),i=react_1.default.useRef(!1);return react_1.default.useEffect((()=>{var t=!0;return setTimeout((()=>{t&&(e._editModeEnabled&&(i.current=!0),r(!0),setTimeout((()=>{i.current=!1}),50))}),50),()=>{t=!1}}),[]),{editorEnabled:t&&e._editModeEnabled,selectAll:i.current}},useFontLoader=(e,t)=>{const[r,i]=react_1.default.useState((0,fonts_1.isFontLoaded)(t));return react_1.default.useLayoutEffect((()=>{if((0,fonts_1.isFontLoaded)(t))return void i(!0);let n=!0;return(async()=>{r&&i(!1);const o=(0,loader_1.incrementLoader)(`text ${t}`);await e.loadFont(t),konva_1.default.Util.requestAnimFrame(o),n&&i(!0)})(),()=>{n=!1}}),[t]),[r]};exports.useFontLoader=useFontLoader;const getLineHeight=({fontLoaded:e,fontFamily:t,fontSize:r,lineHeight:i})=>react_1.default.useMemo((()=>{if("number"==typeof i)return i;const e=document.createElement("div");e.style.fontFamily=t,e.style.fontSize=r+"px",e.style.lineHeight=i,e.innerText="Test text",document.body.appendChild(e);const n=e.offsetHeight;return document.body.removeChild(e),n/r}),[e,t,r,i]);function getRelativePointerPosition(e){var t=e.getAbsoluteTransform().copy();t.invert();var r=e.getStage().getPointerPosition();return t.point(r)}function getCursorPosition(e){var t;const r=e.target,i=getRelativePointerPosition(r),n=r.textArr,o=Math.floor(i.y/(r.fontSize()*r.lineHeight())),a=n.slice(0,o).reduce(((e,t)=>e+t.text.length),o),l=null!==(t=n[o])&&void 0!==t?t:n[0];let s=0;"right"===r.align()?s=r.width()-l.width:"center"===r.align()&&(s=r.width()/2-l.width/2);return a+Math.round((i.x-s)/l.width*l.text.length)}function usePrevious(e){const t=react_1.default.useRef(e),r=react_1.default.useRef(e);return react_1.default.useEffect((()=>{r.current=t.current,t.current=e}),[e]),r.current}function findFitFontSize(e,t){const r=e.getAttrs(),i=(0,text_1.removeTags)(t.text);let n=t.fontSize;const o=Math.round(2*t.fontSize)-1;for(let r=1;r<o;r++){const r=t.height&&e.height()>t.height,o=i.split("\n").join(" ").split(" ");let a=e.textArr.map((e=>e.text)).join(";");const l=o.find((e=>!a.includes(e)||(a=a.replace(e,""),!1)));if(!(r||l))break;n-=.5,e.fontSize(n)}return e.fontSize(r.fontSize),n}const useTextColor=e=>react_1.default.useMemo((()=>{if(!gradient.isGradient(e.fill))return{fill:e.fill};const{stops:t,rotation:r}=gradient.parseColor(e.fill),i={x:e.width/2,y:e.height/2},n=Math.sqrt(Math.pow(i.x,2)+Math.pow(i.y,2)),o=konva_1.default.Util.degToRad(r)-Math.PI/2,a=[];return t.forEach((({offset:e,color:t})=>{a.push(e,t)})),{fillLinearGradientStartPointX:i.x-n*Math.cos(o),fillLinearGradientStartPointY:i.y-n*Math.sin(o),fillLinearGradientColorStops:a,fillLinearGradientEndPointX:i.x+n*Math.cos(o),fillLinearGradientEndPointY:i.y+n*Math.sin(o),fill:t[1].color,fillPriority:"linear-gradient"}}),[e.fill]);exports.useTextColor=useTextColor,exports.TextElement=(0,mobx_react_lite_1.observer)((({element:e,store:t})=>{const r=react_1.default.useRef(null),{editorEnabled:i,selectAll:n}=useEditor(e),[o,a]=react_1.default.useState(!1),[l,s]=react_1.default.useState(!1),c=react_1.default.useRef(e.height),u=t.selectedElements.indexOf(e)>=0,{textVerticalResizeEnabled:d}=flags_1.flags,f=usePrevious(e.fontFamily);react_1.default.useEffect((()=>{if(e.width)return;const t=r.current;t.width(600),e.set({width:1.4*t.getTextWidth()})}),[]),react_1.default.useLayoutEffect((()=>(0,mobx_1.autorun)((()=>{const t=r.current;(0,apply_filters_1.applyFilter)(t,e)}))));const[h]=(0,exports.useFontLoader)(t,e.fontFamily),g=(0,text_1.removeTags)(e.text),_=()=>{const e=r.current.clone({height:void 0}),t=Math.ceil(e.fontSize()*e.lineHeight()*e.textArr.length+1);return e.destroy(),t};react_1.default.useLayoutEffect((()=>{if(!h)return;const{textOverflow:i}=flags_1.flags;if(e.height)if("change-font-size"!==i||l){if("resize"===i){const i=_();d&&e.height<i&&t.history.ignore((()=>{e.set({height:i}),r.current.height(i)})),d||e.height===i||t.history.ignore((()=>{e.set({height:i}),r.current.height(i)}))}}else{const i=findFitFontSize(r.current,e);if(i!==e.fontSize)return void t.history.ignore((()=>{e.set({fontSize:i})}));const n=_();e.height!==n&&t.history.ignore((()=>{e.set({height:n})}))}else{const r=_();t.history.ignore((()=>{e.set({height:r})}))}})),react_1.default.useLayoutEffect((()=>{const t=r.current;t&&(t.width(t.width()+1e-8),t._setTextData(),(0,apply_filters_1.applyFilter)(t,e))}),[h]);const p=react_1.default.useRef(null),x=react_1.default.useRef(0),y=r=>{const i=t.selectedElements.find((t=>t===e));i&&e.contentEditable&&(x.current=getCursorPosition(r),e.toggleEditMode())},m=!g&&e.placeholder?.6:e.opacity;(0,use_fadein_1.useFadeIn)(r,m);const v=getLineHeight({fontLoaded:h,fontFamily:e.fontFamily,fontSize:e.fontSize,lineHeight:e.lineHeight}),S=e.selectable||"admin"===t.role,w=(0,exports.useTextColor)(e);return react_1.default.createElement(react_1.default.Fragment,null,react_1.default.createElement(react_konva_1.Text,Object.assign({ref:r,id:e.id,name:"element",hideInExport:!e.showInExport||!g,editModeEnabled:e._editModeEnabled,x:e.x,y:e.y,rotation:e.rotation,width:e.width,height:e.height,text:g||e.placeholder},w,{stroke:e.stroke,strokeWidth:e.strokeWidth,fillAfterStrokeEnabled:!0,fontSize:e.fontSize,fontFamily:`"${e.fontFamily}", "${f}"`,fontStyle:e.fontStyle+" "+e.fontWeight,textDecoration:e.textDecoration,align:e.align,verticalAlign:e.verticalAlign,draggable:e.draggable,opacity:m,visible:!e._editModeEnabled,ellipsis:"ellipsis"===flags_1.flags.textOverflow,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,lineHeight:v,letterSpacing:e.letterSpacing*e.fontSize,listening:S,onDragStart:()=>{t.history.startTransaction()},onDragMove:t=>{e.set({x:t.target.x(),y:t.target.y()})},onDragEnd:r=>{e.set({x:r.target.x(),y:r.target.y()}),t.history.endTransaction()},onMouseEnter:()=>{a(!0)},onMouseLeave:()=>{a(!1)},onClick:y,onTap:y,onTransformStart:()=>{s(!0),t.history.startTransaction(),c.current=r.current.height()},onTransform:t=>{var r;const i=t.target,n=(null===(r=i.getStage())||void 0===r?void 0:r.findOne("Transformer")).getActiveAnchor();if("middle-left"===n||"middle-right"===n){const t=i.scaleX(),r=i.width()*t,n=e.fontSize;let o=r;r<n&&(o=n,p.current&&i.position(p.current)),i.width(o),i.scaleX(1),i.scaleY(1);const a=_();if("ellipsis"!==flags_1.flags.textOverflow){const t=Math.max(a,c.current);i.height(t),e.set({height:i.height()})}e.set({x:i.x(),y:i.y(),width:i.width(),rotation:i.rotation()}),(0,apply_filters_1.applyFilter)(i,e)}if("top-center"===n||"bottom-center"===n){let r="resize"===flags_1.flags.textOverflow?_():v*e.fontSize;t.target.height(Math.max(r,t.target.height()*t.target.scaleY())),t.target.scaleY(1)}t.target.strokeWidth(e.strokeWidth/t.target.scaleX()),p.current=t.target.position()},onTransformEnd:r=>{s(!1);const i=r.target.scaleX();r.target.scaleX(1),r.target.scaleY(1),r.target.strokeWidth(e.strokeWidth),e.set({fontSize:Math.round(e.fontSize*i),width:Math.ceil(r.target.width()*i),x:r.target.x(),y:r.target.y(),rotation:r.target.rotation(),height:r.target.height()}),t.history.endTransaction()}})),i&&react_1.default.createElement(react_konva_1.Group,{x:e.x,y:e.y,rotation:e.rotation},react_1.default.createElement(TextInput,{textNodeRef:r,element:e,selectAll:n,cursorPosition:x.current,onBlur:()=>{e.toggleEditMode(!1)}})),!l&&(o||u)&&react_1.default.createElement(highlighter_1.Highlighter,{element:e}))}));

package/package.json

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