polotno 2.10.5 → 2.10.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/canvas/html-element.js +2 -2
- package/package.json +2 -1
- package/polotno.bundle.js +65 -65
- package/utils/svg.js +1 -1
- package/utils/svg.test.d.ts +0 -0
package/canvas/html-element.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,t,i,
|
|
1
|
+
"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,t,i,n){void 0===n&&(n=i);var r=Object.getOwnPropertyDescriptor(t,i);r&&!("get"in r?!t.__esModule:r.writable||r.configurable)||(r={enumerable:!0,get:function(){return t[i]}}),Object.defineProperty(e,n,r)}:function(e,t,i,n){void 0===n&&(n=i),e[n]=t[i]}),__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 i in e)"default"!==i&&Object.prototype.hasOwnProperty.call(e,i)&&__createBinding(t,e,i);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.HTMLElement=exports.createQuill=exports.quillRef=void 0;const react_1=__importDefault(require("react")),mobx_react_lite_1=require("mobx-react-lite"),react_konva_1=require("react-konva"),quill_1=__importDefault(require("quill")),konva_1=__importDefault(require("konva")),mobx=__importStar(require("mobx")),flags_1=require("../utils/flags"),apply_filters_1=require("./apply-filters"),text_element_1=require("./text-element"),use_color_1=require("./use-color"),html2canvas_1=require("../utils/html2canvas"),use_fadein_1=require("./use-fadein"),highlighter_1=require("./highlighter"),react_konva_utils_1=require("react-konva-utils"),styled_1=__importDefault(require("../utils/styled")),loader_1=require("../utils/loader"),text_1=require("../utils/text"),fonts=__importStar(require("../utils/fonts")),screen_1=require("../utils/screen"),max_font_size_1=require("./text-element/max-font-size");exports.quillRef=mobx.observable({enabled:!1,currentFormat:{},editor:mobx.observable.object({instance:null},{},{deep:!1})});const RichTextContainer=(0,styled_1.default)("div",react_1.default.forwardRef)`
|
|
2
2
|
.ql-editor {
|
|
3
3
|
outline: none;
|
|
4
4
|
}
|
|
@@ -9,4 +9,4 @@
|
|
|
9
9
|
.ql-direction-rtl {
|
|
10
10
|
direction: rtl;
|
|
11
11
|
}
|
|
12
|
-
`,createQuill=e=>new quill_1.default(e,{toolbar:!1,keyboard:!1,clipboard:{matchVisual:!1},formats:["bold","color","font","italic","size","strike","underline","indent","list","direction"]});exports.createQuill=createQuill;const RichEditor=({html:e,onBlur:t,onChange:i,element:r})=>{const a=react_1.default.useRef(null);react_1.default.useEffect((()=>{if(!a.current)return;const e=(0,exports.createQuill)(a.current);return mobx.runInAction((()=>{exports.quillRef.editor.instance=e})),window.__polotnoQuill=e,e.on("text-change",(()=>{e.getSelection()&&mobx.runInAction((()=>{exports.quillRef.currentFormat=e.getFormat()})),setTimeout((()=>{var e;i(null===(e=a.current)||void 0===e?void 0:e.childNodes[0].innerHTML)}),10)})),e.setSelection(0,0,"api"),e.on("selection-change",(i=>{i||t(),i&&mobx.runInAction((()=>{exports.quillRef.currentFormat=e.getFormat()}))})),a.current.childNodes[0].addEventListener("blur",(e=>{var i;(null===(i=e.relatedTarget)||void 0===i?void 0:i.classList.contains("ql-clipboard"))||t()})),()=>{mobx.runInAction((()=>{exports.quillRef.editor.instance=null,exports.quillRef.currentFormat={}})),delete window.__polotnoQuill}}),[]),react_1.default.useEffect((()=>{var t;const i=exports.quillRef.editor.instance;if(!i)return;const n=i.getSelection();if(!((null===(t=a.current)||void 0===t?void 0:t.childNodes[0].innerHTML)===r.text)){var o=i.clipboard.convert("<div class='ql-editor' style='outline: none;'>"+e+"<p><br></p></div>");i.setContents(o),i.history.clear(),n&&(i.setSelection(n.index,n.length),mobx.runInAction((()=>{exports.quillRef.currentFormat=i.getFormat()})))}}),[r.text]);const n={color:r.fill};return r.fill.indexOf("gradient")>=0&&(n["background-color"]=r.fill,n["background-image"]=r.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"),react_1.default.createElement(RichTextContainer,{ref:a,style:Object.assign(Object.assign({},n),{fontSize:r.fontSize,width:r.a.width,fontFamily:r.fontFamily,lineHeight:r.lineHeight,letterSpacing:r.letterSpacing+"rem",textAlign:r.align}),dir:(0,text_element_1.getDir)((0,text_1.removeTags)(r.text))})};function useHtmlSize(e,t,i){return react_1.default.useMemo((()=>(0,html2canvas_1.detectSize)(e)),[e,t.width,i])}function hasNonTransparentPixel(e){const t=e.getContext("2d").getImageData(0,0,e.width,e.height).data;for(let e=0;e<t.length;e+=4)if(0!==t[e+3])return!0;return!1}function isCanvasBlank(e){return!hasNonTransparentPixel(e)}function getHtml(e,{fontFamily:t="",color:i="black"}={}){let r=`color: ${i||e.fill}`;return e.fill.indexOf("gradient")>=0&&(r=`\n background-color: ${i};\n background-image: ${e.fill};\n background-size: 100% 100%;\n background-repeat: repeat;\n -webkit-background-clip: text;\n -moz-background-clip: text;\n -webkit-text-fill-color: transparent;\n -moz-text-fill-color: transparent;\n `),`<div style="white-space: unset; width: ${Math.round(e.width||100)}px; ${r}; font-size: ${e.fontSize}px; font-family: '${t}'; text-decoration: ${e.textDecoration}; text-align: ${e.align}; line-height: ${e.lineHeight}; letter-spacing: ${e.letterSpacing}rem; font-style: ${e.fontStyle}; font-weight: ${e.fontWeight}; -webkit-text-stroke: ${e.strokeWidth}px ${e.stroke}; paint-order: stroke fill;" contentEditable dir="${(0,text_element_1.getDir)((0,text_1.removeTags)(e.text))}">${e.text.replaceAll("\n","</br>")}</div>`}const findFitFontSize=e=>{let t=e.fontSize;for(let i=1;i<50;i++){const i=getHtml(Object.assign(Object.assign({},e.toJSON()),{fontSize:t}),{fontFamily:e.fontFamily}),{height:r}=(0,html2canvas_1.detectSize)(i),a=e.height&&r>e.height,n=(0,html2canvas_1.isContentWrapping)({html:i});if(!(a||n))break;t-=.5}return t},isSafari=/^((?!chrome|android).)*safari/i.test(navigator.userAgent);exports.HTMLElement=(0,mobx_react_lite_1.observer)((({element:e,store:t})=>{const i=react_1.default.useRef(null),[r,a]=react_1.default.useState(),[n,o]=react_1.default.useState(!1),[l,s]=react_1.default.useState(!0),[c,d]=react_1.default.useState(!1),u=react_1.default.useRef(e.height),f=t.selectedElements.indexOf(e)>=0,h=e.fontSize/3,{textVerticalResizeEnabled:g}=flags_1.flags,_=(0,text_element_1.usePrevious)(e.fontFamily),[m]=(0,text_element_1.useFontLoader)(t,e.fontFamily),x=e._editModeEnabled;(0,use_fadein_1.useFadeIn)(i);const p=m?e.fontFamily:_!==e.fontFamily?_:"Arial",b=(0,use_color_1.useColor)(e).fill,v=getHtml(e,{fontFamily:p,color:b}),{width:y,height:w}=useHtmlSize(v,e,m);react_1.default.useEffect((()=>{if(!m)return;if(!e.height)return void e.set({height:w});const{textOverflow:i}=flags_1.flags;if("change-font-size"!==i||n)"resize"===i&&(g&&e.height<w&&t.history.ignore((()=>{e.set({height:w})})),g||e.height===w||t.history.ignore((()=>{e.set({height:w})})));else{const i=findFitFontSize(e);i!==e.fontSize?t.history.ignore((()=>{e.set({fontSize:i})})):e.height!==w&&(g&&e.height<w?t.history.ignore((()=>{e.set({height:w})})):g||t.history.ignore((()=>{e.set({height:w})})))}}));const S=react_1.default.useRef(0),k=react_1.default.useMemo((()=>{const e={lastArgs:null,lastResult:null};return async function(t){return e.lastArgs&&e.lastResult&&(i=e.lastArgs,r=t,JSON.stringify(i)===JSON.stringify(r))||(e.lastResult=await(0,html2canvas_1.htmlToCanvas)(t),e.lastArgs=Object.assign({},t)),e.lastResult;var i,r}}),[]);react_1.default.useEffect((()=>{n||x||(async()=>{S.current++;const i=S.current,r=(0,loader_1.incrementLoader)(`text ${e.id}`);s(!0);let n=null;const o=isSafari?5:1;for(let a=0;a<o;a++){const o=a>0?k:html2canvas_1.htmlToCanvas;if(n=await o({skipCache:a>0,html:v,width:e.width||1,height:e.height||w||1,fontFamily:p,padding:h,pixelRatio:t._elementsPixelRatio,font:t.fonts.find((e=>e.fontFamily===p))||fonts.globalFonts.find((e=>e.fontFamily===p))}),i!==S.current)return void r();isCanvasBlank(n)&&isSafari&&await new Promise((e=>setTimeout(e,50*(a+1))))}n?(a(n),s(!1),konva_1.default.Util.requestAnimFrame(r)):r()})()}),[v,n,w,x,p,e.height,t._elementsPixelRatio]);const E=n||l;react_1.default.useEffect((()=>mobx.autorun((()=>{const t=i.current;(0,apply_filters_1.applyFilter)(t,e)}))),[r,E,e.shadowColor,e.shadowOffsetX,e.shadowOffsetY,e.shadowOpacity]);let z=0;"middle"===e.verticalAlign&&(z=(e.height-w)/2),"bottom"===e.verticalAlign&&(z=e.height-w);const q=(0,text_element_1.getLineHeight)({fontLoaded:m,fontFamily:e.fontFamily,fontSize:e.fontSize,lineHeight:e.lineHeight}),O=(0,screen_1.isTouchDevice)();return react_1.default.createElement(react_1.default.Fragment,null,react_1.default.createElement(react_konva_1.Rect,{x:e.a.x,y:e.a.y,offsetX:e.backgroundPadding*(e.fontSize*q*.5),offsetY:e.backgroundPadding*(e.fontSize*q*.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*q),height:e.a.height+e.backgroundPadding*(e.fontSize*q),cornerRadius:e.backgroundCornerRadius*(e.fontSize*q*.5)}),react_1.default.createElement(react_konva_1.Rect,{ref:i,name:"element",x:e.a.x,y:e.a.y,listening:e.selectable,rotation:e.a.rotation,width:e.a.width,height:e.a.height,visible:!E,draggable:O?e.draggable&&f:e.draggable,preventDefault:!O||f,opacity:x?0:e.a.opacity,hideInExport:!e.showInExport,onMouseEnter:()=>{d(!0)},onMouseLeave:()=>{d(!1)},onDragMove:t=>{e.set({x:t.target.x(),y:t.target.y()})},onDragEnd:t=>{e.set({x:t.target.x(),y:t.target.y()})},id:e.id,onDblClick:()=>{e.contentEditable&&e.toggleEditMode(!0)},onDblTap:()=>{e.contentEditable&&e.toggleEditMode(!0)},onTransformStart:t=>{o(!0),u.current=e.height},onTransform:t=>{var i;const r=t.target,a=(null===(i=r.getStage())||void 0===i?void 0:i.findOne("Transformer")).getActiveAnchor(),n="middle-left"===a||"middle-right"===a,o="top-center"===a||"bottom-center"===a,l=r.scaleX();if(n){const t=r.scaleX(),i=Math.max(r.width()*t,e.fontSize);if(r.width(i),r.scaleX(1),flags_1.flags.textVerticalResizeEnabled){const t=Math.max(w,u.current);e.set({height:t})}e.set({width:i,x:r.x(),y:r.y()})}else if(o){let i="resize"===flags_1.flags.textOverflow?w:e.lineHeight*e.fontSize;const a=Math.max(i,t.target.height()*t.target.scaleY());r.scaleY(1),e.set({x:r.x(),y:r.y(),height:a,rotation:r.rotation()})}else r.scaleX(1),r.scaleY(1),e.set({fontSize:e.fontSize*l,width:r.width()*l,x:r.x(),y:r.y(),rotation:r.rotation(),height:r.height()*l})},onTransformEnd:t=>{o(!1),s(!0);const i=t.target.scaleX();t.target.scaleX(1),t.target.scaleY(1),e.set({fontSize:e.fontSize*i,width:t.target.width()*i,x:t.target.x(),y:t.target.y(),rotation:t.target.rotation(),shadowBlur:e.shadowBlur*i,shadowOffsetX:e.shadowOffsetX*i,shadowOffsetY:e.shadowOffsetY*i,strokeWidth:e.strokeWidth*i})}}),react_1.default.createElement(react_konva_1.Image,{ref:i,image:r,x:e.a.x,y:e.a.y,offsetX:h,offsetY:h-z,listening:!1,rotation:e.rotation,width:e.a.width+2*h,height:e.a.height+2*h,visible:!E,opacity:x?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}),E&&react_1.default.createElement(react_konva_1.Group,{x:e.a.x,y:e.a.y,rotation:e.rotation,offsetY:-z},react_1.default.createElement(react_konva_utils_1.Html,{divProps:{style:{pointerEvents:"none"}}},react_1.default.createElement(RichTextContainer,{dangerouslySetInnerHTML:{__html:v},style:{pointerEvents:"none",display:"inline-block"}}))),x&&react_1.default.createElement(react_konva_1.Group,{x:e.a.x,y:e.a.y,rotation:e.rotation,offsetY:-z},react_1.default.createElement(react_konva_utils_1.Html,null,react_1.default.createElement(RichEditor,{html:v,element:e,onChange:t=>{const i=(0,max_font_size_1.getLimitedFontSize)({oldText:(0,text_1.removeTags)(e.text),newText:(0,text_1.removeTags)(t),element:e});e.set({text:t,fontSize:i})},onBlur:t=>{e.toggleEditMode(!1)}}))),(f||c)&&react_1.default.createElement(highlighter_1.Highlighter,{element:e}))}));
|
|
12
|
+
`,createQuill=e=>new quill_1.default(e,{toolbar:!1,keyboard:!1,clipboard:{matchVisual:!1},formats:["bold","color","font","italic","size","strike","underline","indent","list","direction"]});exports.createQuill=createQuill;const RichEditor=({html:e,onBlur:t,onChange:i,element:n})=>{const r=react_1.default.useRef(null);react_1.default.useEffect((()=>{if(!r.current)return;const e=(0,exports.createQuill)(r.current);return mobx.runInAction((()=>{exports.quillRef.editor.instance=e})),window.__polotnoQuill=e,e.on("text-change",(()=>{e.getSelection()&&mobx.runInAction((()=>{exports.quillRef.currentFormat=e.getFormat()})),setTimeout((()=>{var e;i(null===(e=r.current)||void 0===e?void 0:e.childNodes[0].innerHTML)}),10)})),e.setSelection(0,0,"api"),e.on("selection-change",(i=>{i||t(),i&&mobx.runInAction((()=>{exports.quillRef.currentFormat=e.getFormat()}))})),r.current.childNodes[0].addEventListener("blur",(e=>{var i;(null===(i=e.relatedTarget)||void 0===i?void 0:i.classList.contains("ql-clipboard"))||t()})),()=>{mobx.runInAction((()=>{exports.quillRef.editor.instance=null,exports.quillRef.currentFormat={}})),delete window.__polotnoQuill}}),[]),react_1.default.useEffect((()=>{var t;const i=exports.quillRef.editor.instance;if(!i)return;const a=i.getSelection();if(!((null===(t=r.current)||void 0===t?void 0:t.childNodes[0].innerHTML)===n.text)){var o=i.clipboard.convert("<div class='ql-editor' style='outline: none;'>"+e+"<p><br></p></div>");i.setContents(o),i.history.clear(),a&&(i.setSelection(a.index,a.length),mobx.runInAction((()=>{exports.quillRef.currentFormat=i.getFormat()})))}}),[n.text]);const a={color:n.fill};return n.fill.indexOf("gradient")>=0&&(a["background-color"]=n.fill,a["background-image"]=n.fill,a["background-size"]="100% 100%",a["background-repeat"]="repeat",a["-webkit-background-clip"]="text",a["-moz-background-clip"]="text",a["-webkit-text-fill-color"]="transparent",a["-moz-text-fill-color"]="transparent"),react_1.default.createElement(RichTextContainer,{ref:r,style:Object.assign(Object.assign({},a),{fontSize:n.fontSize,width:n.a.width,fontFamily:n.fontFamily,lineHeight:n.lineHeight,letterSpacing:n.letterSpacing+"rem",textAlign:n.align}),dir:(0,text_element_1.getDir)((0,text_1.removeTags)(n.text))})};function useHtmlSize(e,t,i){return react_1.default.useMemo((()=>(0,html2canvas_1.detectSize)(e)),[e,t.width,i])}function hasNonTransparentPixel(e){const t=e.getContext("2d").getImageData(0,0,e.width,e.height).data;for(let e=0;e<t.length;e+=4)if(0!==t[e+3])return!0;return!1}function isCanvasBlank(e){return!hasNonTransparentPixel(e)}function getHtml(e,{fontFamily:t="",color:i="black"}={}){let n=`color: ${i||e.fill}`;e.fill.indexOf("gradient")>=0&&(n=`\n background-color: ${i};\n background-image: ${e.fill};\n background-size: 100% 100%;\n background-repeat: repeat;\n -webkit-background-clip: text;\n -moz-background-clip: text;\n -webkit-text-fill-color: transparent;\n -moz-text-fill-color: transparent;\n `);return`<div style="${["white-space: unset",`width: ${Math.round(e.width||100)}px`,n,`font-size: ${e.fontSize}px`,`font-family: '${t}'`,`text-align: ${e.align}`,e.textDecoration?`text-decoration: ${e.textDecoration}`:"",e.lineHeight?`line-height: ${e.lineHeight}`:"",e.letterSpacing?`letter-spacing: ${e.letterSpacing}rem`:"",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,text_element_1.getDir)((0,text_1.removeTags)(e.text))}">${e.text.replaceAll("\n","</br>")}</div>`}const findFitFontSize=e=>{let t=e.fontSize;for(let i=1;i<50;i++){const i=getHtml(Object.assign(Object.assign({},e.toJSON()),{fontSize:t}),{fontFamily:e.fontFamily}),{height:n}=(0,html2canvas_1.detectSize)(i),r=e.height&&n>e.height,a=(0,html2canvas_1.isContentWrapping)({html:i});if(!(r||a))break;t-=.5}return t},isSafari=/^((?!chrome|android).)*safari/i.test(navigator.userAgent);exports.HTMLElement=(0,mobx_react_lite_1.observer)((({element:e,store:t})=>{const i=react_1.default.useRef(null),[n,r]=react_1.default.useState(),[a,o]=react_1.default.useState(!1),[l,s]=react_1.default.useState(!0),[c,d]=react_1.default.useState(!1),u=react_1.default.useRef(e.height),f=t.selectedElements.indexOf(e)>=0,h=e.fontSize/3,{textVerticalResizeEnabled:g}=flags_1.flags,_=(0,text_element_1.usePrevious)(e.fontFamily),[m]=(0,text_element_1.useFontLoader)(t,e.fontFamily),x=e._editModeEnabled;(0,use_fadein_1.useFadeIn)(i);const p=m?e.fontFamily:_!==e.fontFamily?_:"Arial",b=(0,use_color_1.useColor)(e).fill,y=getHtml(e,{fontFamily:p,color:b}),{width:v,height:w}=useHtmlSize(y,e,m);react_1.default.useEffect((()=>{if(!m)return;if(!e.height)return void e.set({height:w});const{textOverflow:i}=flags_1.flags;if("change-font-size"!==i||a)"resize"===i&&(g&&e.height<w&&t.history.ignore((()=>{e.set({height:w})})),g||e.height===w||t.history.ignore((()=>{e.set({height:w})})));else{const i=findFitFontSize(e);i!==e.fontSize?t.history.ignore((()=>{e.set({fontSize:i})})):e.height!==w&&(g&&e.height<w?t.history.ignore((()=>{e.set({height:w})})):g||t.history.ignore((()=>{e.set({height:w})})))}}));const S=react_1.default.useRef(0),k=react_1.default.useMemo((()=>{const e={lastArgs:null,lastResult:null};return async function(t){return e.lastArgs&&e.lastResult&&(i=e.lastArgs,n=t,JSON.stringify(i)===JSON.stringify(n))||(e.lastResult=await(0,html2canvas_1.htmlToCanvas)(t),e.lastArgs=Object.assign({},t)),e.lastResult;var i,n}}),[]);react_1.default.useEffect((()=>{a||x||(async()=>{S.current++;const i=S.current,n=(0,loader_1.incrementLoader)(`text ${e.id}`);s(!0);let a=null;const o=isSafari?5:1;for(let r=0;r<o;r++){const o=r>0?k:html2canvas_1.htmlToCanvas;if(a=await o({skipCache:r>0,html:y,width:e.width||1,height:e.height||w||1,fontFamily:p,padding:h,pixelRatio:t._elementsPixelRatio,font:t.fonts.find((e=>e.fontFamily===p))||fonts.globalFonts.find((e=>e.fontFamily===p))}),i!==S.current)return void n();isCanvasBlank(a)&&isSafari&&await new Promise((e=>setTimeout(e,50*(r+1))))}a?(r(a),s(!1),konva_1.default.Util.requestAnimFrame(n)):n()})()}),[y,a,w,x,p,e.height,t._elementsPixelRatio]);const E=a||l;react_1.default.useEffect((()=>mobx.autorun((()=>{const t=i.current;(0,apply_filters_1.applyFilter)(t,e)}))),[n,E,e.shadowColor,e.shadowOffsetX,e.shadowOffsetY,e.shadowOpacity]);let z=0;"middle"===e.verticalAlign&&(z=(e.height-w)/2),"bottom"===e.verticalAlign&&(z=e.height-w);const q=(0,text_element_1.getLineHeight)({fontLoaded:m,fontFamily:e.fontFamily,fontSize:e.fontSize,lineHeight:e.lineHeight}),O=(0,screen_1.isTouchDevice)();return react_1.default.createElement(react_1.default.Fragment,null,react_1.default.createElement(react_konva_1.Rect,{x:e.a.x,y:e.a.y,offsetX:e.backgroundPadding*(e.fontSize*q*.5),offsetY:e.backgroundPadding*(e.fontSize*q*.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*q),height:e.a.height+e.backgroundPadding*(e.fontSize*q),cornerRadius:e.backgroundCornerRadius*(e.fontSize*q*.5)}),react_1.default.createElement(react_konva_1.Rect,{ref:i,name:"element",x:e.a.x,y:e.a.y,listening:e.selectable,rotation:e.a.rotation,width:e.a.width,height:e.a.height,visible:!E,draggable:O?e.draggable&&f:e.draggable,preventDefault:!O||f,opacity:x?0:e.a.opacity,hideInExport:!e.showInExport,onMouseEnter:()=>{d(!0)},onMouseLeave:()=>{d(!1)},onDragMove:t=>{e.set({x:t.target.x(),y:t.target.y()})},onDragEnd:t=>{e.set({x:t.target.x(),y:t.target.y()})},id:e.id,onDblClick:()=>{e.contentEditable&&e.toggleEditMode(!0)},onDblTap:()=>{e.contentEditable&&e.toggleEditMode(!0)},onTransformStart:t=>{o(!0),u.current=e.height},onTransform:t=>{var i;const n=t.target,r=(null===(i=n.getStage())||void 0===i?void 0:i.findOne("Transformer")).getActiveAnchor(),a="middle-left"===r||"middle-right"===r,o="top-center"===r||"bottom-center"===r,l=n.scaleX();if(a){const t=n.scaleX(),i=Math.max(n.width()*t,e.fontSize);if(n.width(i),n.scaleX(1),flags_1.flags.textVerticalResizeEnabled){const t=Math.max(w,u.current);e.set({height:t})}e.set({width:i,x:n.x(),y:n.y()})}else if(o){let i="resize"===flags_1.flags.textOverflow?w:e.lineHeight*e.fontSize;const r=Math.max(i,t.target.height()*t.target.scaleY());n.scaleY(1),e.set({x:n.x(),y:n.y(),height:r,rotation:n.rotation()})}else n.scaleX(1),n.scaleY(1),e.set({fontSize:e.fontSize*l,width:n.width()*l,x:n.x(),y:n.y(),rotation:n.rotation(),height:n.height()*l})},onTransformEnd:t=>{o(!1),s(!0);const i=t.target.scaleX();t.target.scaleX(1),t.target.scaleY(1),e.set({fontSize:e.fontSize*i,width:t.target.width()*i,x:t.target.x(),y:t.target.y(),rotation:t.target.rotation(),shadowBlur:e.shadowBlur*i,shadowOffsetX:e.shadowOffsetX*i,shadowOffsetY:e.shadowOffsetY*i,strokeWidth:e.strokeWidth*i})}}),react_1.default.createElement(react_konva_1.Image,{ref:i,image:n,x:e.a.x,y:e.a.y,offsetX:h,offsetY:h-z,listening:!1,rotation:e.rotation,width:e.a.width+2*h,height:e.a.height+2*h,visible:!E,opacity:x?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}),E&&react_1.default.createElement(react_konva_1.Group,{x:e.a.x,y:e.a.y,rotation:e.rotation,offsetY:-z},react_1.default.createElement(react_konva_utils_1.Html,{divProps:{style:{pointerEvents:"none"}}},react_1.default.createElement(RichTextContainer,{dangerouslySetInnerHTML:{__html:y},style:{pointerEvents:"none",display:"inline-block"}}))),x&&react_1.default.createElement(react_konva_1.Group,{x:e.a.x,y:e.a.y,rotation:e.rotation,offsetY:-z},react_1.default.createElement(react_konva_utils_1.Html,null,react_1.default.createElement(RichEditor,{html:y,element:e,onChange:t=>{const i=(0,max_font_size_1.getLimitedFontSize)({oldText:(0,text_1.removeTags)(e.text),newText:(0,text_1.removeTags)(t),element:e});e.set({text:t,fontSize:i})},onBlur:t=>{e.toggleEditMode(!1)}}))),(f||c)&&react_1.default.createElement(highlighter_1.Highlighter,{element:e}))}));
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "polotno",
|
|
3
|
-
"version": "2.10.
|
|
3
|
+
"version": "2.10.6",
|
|
4
4
|
"description": "Design Editor Framework",
|
|
5
5
|
"author": "Anton Lavrenov",
|
|
6
6
|
"keywords": [
|
|
@@ -13,6 +13,7 @@
|
|
|
13
13
|
"@blueprintjs/core": "5.10.5",
|
|
14
14
|
"@blueprintjs/select": "5.2.1",
|
|
15
15
|
"@meronex/icons": "^4.0.0",
|
|
16
|
+
"cssom": "^0.5.0",
|
|
16
17
|
"fast-json-patch": "^3.1.1",
|
|
17
18
|
"functions-have-names": "^1.2.3",
|
|
18
19
|
"gradient-parser": "^1.0.2",
|