polotno 2.7.2 → 2.7.3

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.
@@ -14,6 +14,7 @@ type ShapeProps = {
14
14
  element: TextElementType;
15
15
  onClick: Function;
16
16
  };
17
+ export declare const createQuill: (node: any) => any;
17
18
  export declare const HTMLElement: (({ element, store }: ShapeProps) => React.JSX.Element) & {
18
19
  displayName: string;
19
20
  };
@@ -1,4 +1,4 @@
1
- "use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,t,i,r){void 0===r&&(r=i);var a=Object.getOwnPropertyDescriptor(t,i);a&&!("get"in a?!t.__esModule:a.writable||a.configurable)||(a={enumerable:!0,get:function(){return t[i]}}),Object.defineProperty(e,r,a)}:function(e,t,i,r){void 0===r&&(r=i),e[r]=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.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/dist/quill"));require("quill-paste-smart");const 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");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)`
1
+ "use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,t,i,r){void 0===r&&(r=i);var a=Object.getOwnPropertyDescriptor(t,i);a&&!("get"in a?!t.__esModule:a.writable||a.configurable)||(a={enumerable:!0,get:function(){return t[i]}}),Object.defineProperty(e,r,a)}:function(e,t,i,r){void 0===r&&(r=i),e[r]=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/dist/quill"));require("quill-paste-smart");const 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");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
  }
@@ -17,4 +17,4 @@
17
17
  .ql-direction-rtl {
18
18
  direction: rtl;
19
19
  }
20
- `,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=new quill_1.default(a.current,{toolbar:!1,keyboard:!1,clipboard:{matchVisual:!1},formats:["background","bold","color","font","italic","size","strike","underline","indent","list","align","direction"]});return exports.quillRef.editor.instance=e,window.__polotnoQuill=e,e.on("text-change",(()=>{e.getSelection()&&(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&&(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()})),()=>{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 o=i.getSelection();if(!((null===(t=a.current)||void 0===t?void 0:t.childNodes[0].innerHTML)===r.text)){var n=i.clipboard.convert("<div class='ql-editor' style='outline: none;'>"+e+"<p><br></p></div>");i.setContents(n),i.history.clear(),o&&(i.setSelection(o.index,o.length),exports.quillRef.currentFormat=i.getFormat())}}),[r.text]);const o=(0,use_color_1.useColor)(r).fill;return react_1.default.createElement(RichTextContainer,{ref:a,style:{fontSize:r.fontSize,color:o,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`<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};" 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);if(!(e.height&&r>e.height))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(),[o,n]=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",y=(0,use_color_1.useColor)(e).fill,v=getHtml(e,{fontFamily:p,color:y}),{width:b,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||o)"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);react_1.default.useEffect((()=>{o||x||(async()=>{S.current++;const i=S.current,r=(0,loader_1.incrementLoader)(`text ${e.id}`);s(!0);let o=null;const n=isSafari?5:1;for(let a=0;a<n;a++){if(o=await(0,html2canvas_1.htmlToCanvas)({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(o)&&isSafari&&await new Promise((e=>setTimeout(e,50*(a+1))))}o?(a(o),s(!1),konva_1.default.Util.requestAnimFrame(r)):r()})()}),[v,o,w,x,p,e.height,t._elementsPixelRatio]);const E=o||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 q=0;"middle"===e.verticalAlign&&(q=(e.height-w)/2),"bottom"===e.verticalAlign&&(q=e.height-w);const k=(0,text_element_1.getLineHeight)({fontLoaded:m,fontFamily:e.fontFamily,fontSize:e.fontSize,lineHeight:e.lineHeight}),z=(0,screen_1.useMobile)();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*k*.5),offsetY:e.backgroundPadding*(e.fontSize*k*.5),rotation:e.rotation,hideInExport:!e.showInExport,listening:!1,visible:e.backgroundEnabled,opacity:e.backgroundOpacity,fill:e.backgroundColor,width:e.a.width+e.backgroundPadding*(e.fontSize*k),height:e.a.height+e.backgroundPadding*(e.fontSize*k),cornerRadius:e.backgroundCornerRadius*(e.fontSize*k*.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.rotation,width:e.a.width,height:e.a.height,visible:!E,draggable:z?e.draggable&&f:e.draggable,preventDefault:!z||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=>{n(!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(),o="middle-left"===a||"middle-right"===a,n="top-center"===a||"bottom-center"===a,l=r.scaleX();if(o){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(n){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=>{n(!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-q,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:-q},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:-q},react_1.default.createElement(react_konva_utils_1.Html,null,react_1.default.createElement(RichEditor,{html:v,element:e,onChange:t=>{e.set({text:t})},onBlur:t=>{e.toggleEditMode(!1)}}))),(f||c)&&react_1.default.createElement(highlighter_1.Highlighter,{element:e}))}));
20
+ `,createQuill=e=>new quill_1.default(e,{toolbar:!1,keyboard:!1,clipboard:{matchVisual:!1},formats:["background","bold","color","font","italic","size","strike","underline","indent","list","align","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 exports.quillRef.editor.instance=e,window.__polotnoQuill=e,e.on("text-change",(()=>{e.getSelection()&&(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&&(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()})),()=>{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 o=i.getSelection();if(!((null===(t=a.current)||void 0===t?void 0:t.childNodes[0].innerHTML)===r.text)){var n=i.clipboard.convert("<div class='ql-editor' style='outline: none;'>"+e+"<p><br></p></div>");i.setContents(n),i.history.clear(),o&&(i.setSelection(o.index,o.length),exports.quillRef.currentFormat=i.getFormat())}}),[r.text]);const o=(0,use_color_1.useColor)(r).fill;return react_1.default.createElement(RichTextContainer,{ref:a,style:{fontSize:r.fontSize,color:o,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`<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};" 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);if(!(e.height&&r>e.height))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(),[o,n]=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",y=(0,use_color_1.useColor)(e).fill,v=getHtml(e,{fontFamily:p,color:y}),{width:b,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||o)"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);react_1.default.useEffect((()=>{o||x||(async()=>{S.current++;const i=S.current,r=(0,loader_1.incrementLoader)(`text ${e.id}`);s(!0);let o=null;const n=isSafari?5:1;for(let a=0;a<n;a++){if(o=await(0,html2canvas_1.htmlToCanvas)({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(o)&&isSafari&&await new Promise((e=>setTimeout(e,50*(a+1))))}o?(a(o),s(!1),konva_1.default.Util.requestAnimFrame(r)):r()})()}),[v,o,w,x,p,e.height,t._elementsPixelRatio]);const E=o||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 q=0;"middle"===e.verticalAlign&&(q=(e.height-w)/2),"bottom"===e.verticalAlign&&(q=e.height-w);const k=(0,text_element_1.getLineHeight)({fontLoaded:m,fontFamily:e.fontFamily,fontSize:e.fontSize,lineHeight:e.lineHeight}),z=(0,screen_1.useMobile)();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*k*.5),offsetY:e.backgroundPadding*(e.fontSize*k*.5),rotation:e.rotation,hideInExport:!e.showInExport,listening:!1,visible:e.backgroundEnabled,opacity:e.backgroundOpacity,fill:e.backgroundColor,width:e.a.width+e.backgroundPadding*(e.fontSize*k),height:e.a.height+e.backgroundPadding*(e.fontSize*k),cornerRadius:e.backgroundCornerRadius*(e.fontSize*k*.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.rotation,width:e.a.width,height:e.a.height,visible:!E,draggable:z?e.draggable&&f:e.draggable,preventDefault:!z||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=>{n(!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(),o="middle-left"===a||"middle-right"===a,n="top-center"===a||"bottom-center"===a,l=r.scaleX();if(o){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(n){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=>{n(!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-q,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:-q},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:-q},react_1.default.createElement(react_konva_utils_1.Html,null,react_1.default.createElement(RichEditor,{html:v,element:e,onChange:t=>{e.set({text:t})},onBlur:t=>{e.toggleEditMode(!1)}}))),(f||c)&&react_1.default.createElement(highlighter_1.Highlighter,{element:e}))}));
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.Page=void 0;const mobx_state_tree_1=require("mobx-state-tree"),nanoid_1=require("nanoid"),group_model_1=require("./group-model"),store_1=require("./store"),group_model_2=require("./group-model");exports.Page=mobx_state_tree_1.types.model("Page",{id:mobx_state_tree_1.types.identifier,children:mobx_state_tree_1.types.array(mobx_state_tree_1.types.late((()=>group_model_1.ElementTypes))),width:mobx_state_tree_1.types.optional(mobx_state_tree_1.types.union(mobx_state_tree_1.types.number,mobx_state_tree_1.types.literal("auto")),"auto"),height:mobx_state_tree_1.types.optional(mobx_state_tree_1.types.union(mobx_state_tree_1.types.number,mobx_state_tree_1.types.literal("auto")),"auto"),background:"white",bleed:0,custom:mobx_state_tree_1.types.frozen(),duration:5e3,_exporting:!1,_rendering:!1}).postProcessSnapshot((e=>{const t=Object.assign({},e),o={};for(var n in t)"_"!==n[0]&&(o[n]=e[n]);return o})).views((e=>({get store(){return(0,mobx_state_tree_1.getParentOfType)(e,store_1.Store)},get startTime(){let t=0;for(const o of e.store.pages){if(o.id===e.id)return t;t+=o.duration}return t},get _exportingOrRendering(){return e._exporting||e._rendering}}))).views((e=>({get computedWidth(){return"auto"===e.width?e.store.width:e.width},get computedHeight(){return"auto"===e.height?e.store.height:e.height}}))).actions((e=>({toJSON:()=>JSON.parse(JSON.stringify((0,mobx_state_tree_1.getSnapshot)(e))),_forEachElementUp(t,o){const n=t.map((t=>({id:t,index:e.children.findIndex((e=>e.id===t))})));n.sort(((e,t)=>t.index-e.index));for(const{index:i}of n){if(-1==i)continue;const n=i<e.children.length-1&&e.children[i+1],r=t.indexOf(null==n?void 0:n.id)>=0;i===e.children.length-1||r||o(i)}},_forEachElementDown(t,o){const n=t.map((t=>({id:t,index:e.children.findIndex((e=>e.id===t))})));n.sort(((e,t)=>e.index-t.index));for(const{index:i}of n){if(-1==i)continue;const n=i>0&&e.children[i-1],r=t.indexOf(null==n?void 0:n.id)>=0;0===i||r||o(i)}return!1}}))).actions((e=>({clone(t={}){const o=e.toJSON();o.children.forEach((e=>{e.id=(0,nanoid_1.nanoid)(10),(0,group_model_2.forEveryChild)(e,(e=>{e.id=(0,nanoid_1.nanoid)(10)}))}));const n=Object.assign(Object.assign(Object.assign({},o),{id:(0,nanoid_1.nanoid)(10)}),t),i=e.store.addPage(n),r=e.store.pages.indexOf(e);i.setZIndex(r+1),i.select()},setZIndex(t){e.store.setPageZIndex(e.id,t)},set(t){Object.assign(e,t)},select(){e.store.selectPage(e.id)},addElement(t,{skipSelect:o=!1}={}){const n=group_model_2.TYPES_MAP[t.type];if(!n)return void console.error("Can not find model with type "+t.type);t.children&&t.children.forEach((e=>{e.id=(0,nanoid_1.nanoid)(10)}));const i=n.create(Object.assign({id:(0,nanoid_1.nanoid)(10)},t));return e.children.push(i),i.selectable&&!o&&e.store.selectElements([i.id]),i},canMoveElementsUp(t){let o=!1;return e._forEachElementUp(t,(()=>{o=o||!0})),o},moveElementsUp(t){e._forEachElementUp(t,(t=>{const o=e.children[t];(0,mobx_state_tree_1.detach)(o),e.children.splice(t+1,0,o)}))},canMoveElementsTop(e){return this.canMoveElementsUp(e)},moveElementsTop(t){const o=[],n=[];e.children.forEach((e=>{t.indexOf(e.id)>=0?o.push(e):n.push(e)})),e.children.replace(n.concat(o))},canMoveElementsDown(t){let o=!1;return e._forEachElementDown(t,(()=>{o=o||!0})),o},moveElementsDown(t){e._forEachElementDown(t,(t=>{const o=e.children[t];(0,mobx_state_tree_1.detach)(o),e.children.splice(t-1,0,o)}))},canMoveElementsBottom(e){return this.canMoveElementsDown(e)},moveElementsBottom(t){const o=[],n=[];e.children.forEach((e=>{t.indexOf(e.id)>=0?o.push(e):n.push(e)})),e.children.replace(o.concat(n))},setElementZIndex(t,o){const n=e.children.find((e=>e.id===t));n&&((0,mobx_state_tree_1.detach)(n),e.children.remove(n),e.children.splice(o,0,n))},setSize({width:t,height:o,useMagic:n,softChange:i}){if(n){const n=t/e.computedWidth,i=o/e.computedHeight,r=Math.min(n,i),s=Math.max(0,(t-e.computedWidth*r)/2),d=Math.max(0,(o-e.computedHeight*r)/2);(0,group_model_2.forEveryChild)(e,(t=>{if("group"===t.type)return;"image"===t.type&&t.x<1&&t.y<1&&t.width>=e.computedWidth-2&&t.height>=e.computedHeight-2?t.set({x:t.x*r,y:t.y*r,width:t.width*n,height:t.height*i,cropX:0,cropY:0,cropWidth:1,cropHeight:1}):(t.set({x:s+t.x*r,y:d+t.y*r,width:t.width*r,height:t.height*r}),"text"===t.type?t.set({fontSize:t.fontSize*r}):"figure"===t.type&&t.set({strokeWidth:t.strokeWidth*r}))}))}i||(e.width=t),i||(e.height=o)}}))).actions((e=>({moveElementUp(t){console.warn("page.moveElementUp(id) is deprecated. Please use page.moveElementsUp([id1, id2]) instead."),e.moveElementsUp([t])},moveElementDown(t){console.warn("page.moveElementDown(id) is deprecated. Please use page.moveElementsDown([id1, id2]) instead."),e.moveElementsDown([t])},moveElementTop(t){console.warn("page.moveElementTop(id) is deprecated. Please use page.moveElementsTop([id1, id2]) instead."),e.moveElementsTop([t])},moveElementBottom(t){console.warn("page.moveElementBottom(id) is deprecated. Please use page.moveElementsBottom([id1, id2]) instead."),e.moveElementsBottom([t])},play(){e.store.play({startTime:e.startTime,endTime:e.startTime+e.duration})}})));
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.Page=void 0;const mobx_state_tree_1=require("mobx-state-tree"),nanoid_1=require("nanoid"),group_model_1=require("./group-model"),store_1=require("./store"),group_model_2=require("./group-model"),math_1=require("../utils/math");exports.Page=mobx_state_tree_1.types.model("Page",{id:mobx_state_tree_1.types.identifier,children:mobx_state_tree_1.types.array(mobx_state_tree_1.types.late((()=>group_model_1.ElementTypes))),width:mobx_state_tree_1.types.optional(mobx_state_tree_1.types.union(mobx_state_tree_1.types.number,mobx_state_tree_1.types.literal("auto")),"auto"),height:mobx_state_tree_1.types.optional(mobx_state_tree_1.types.union(mobx_state_tree_1.types.number,mobx_state_tree_1.types.literal("auto")),"auto"),background:"white",bleed:0,custom:mobx_state_tree_1.types.frozen(),duration:5e3,_exporting:!1,_rendering:!1}).postProcessSnapshot((e=>{const t=Object.assign({},e),o={};for(var n in t)"_"!==n[0]&&(o[n]=e[n]);return o})).views((e=>({get store(){return(0,mobx_state_tree_1.getParentOfType)(e,store_1.Store)},get startTime(){let t=0;for(const o of e.store.pages){if(o.id===e.id)return t;t+=o.duration}return t},get _exportingOrRendering(){return e._exporting||e._rendering}}))).views((e=>({get computedWidth(){return"auto"===e.width?e.store.width:e.width},get computedHeight(){return"auto"===e.height?e.store.height:e.height}}))).actions((e=>({toJSON:()=>JSON.parse(JSON.stringify((0,mobx_state_tree_1.getSnapshot)(e))),_forEachElementUp(t,o){const n=t.map((t=>({id:t,index:e.children.findIndex((e=>e.id===t))})));n.sort(((e,t)=>t.index-e.index));for(const{index:i}of n){if(-1==i)continue;const n=i<e.children.length-1&&e.children[i+1],r=t.indexOf(null==n?void 0:n.id)>=0;i===e.children.length-1||r||o(i)}},_forEachElementDown(t,o){const n=t.map((t=>({id:t,index:e.children.findIndex((e=>e.id===t))})));n.sort(((e,t)=>e.index-t.index));for(const{index:i}of n){if(-1==i)continue;const n=i>0&&e.children[i-1],r=t.indexOf(null==n?void 0:n.id)>=0;0===i||r||o(i)}return!1}}))).actions((e=>({clone(t={}){const o=e.toJSON();o.children.forEach((e=>{e.id=(0,nanoid_1.nanoid)(10),(0,group_model_2.forEveryChild)(e,(e=>{e.id=(0,nanoid_1.nanoid)(10)}))}));const n=Object.assign(Object.assign(Object.assign({},o),{id:(0,nanoid_1.nanoid)(10)}),t),i=e.store.addPage(n),r=e.store.pages.indexOf(e);i.setZIndex(r+1),i.select()},setZIndex(t){e.store.setPageZIndex(e.id,t)},set(t){Object.assign(e,t)},select(){e.store.selectPage(e.id)},addElement(t,{skipSelect:o=!1}={}){const n=group_model_2.TYPES_MAP[t.type];if(!n)return void console.error("Can not find model with type "+t.type);t.children&&t.children.forEach((e=>{e.id=(0,nanoid_1.nanoid)(10)}));const i=n.create(Object.assign({id:(0,nanoid_1.nanoid)(10)},t));return e.children.push(i),i.selectable&&!o&&e.store.selectElements([i.id]),i},canMoveElementsUp(t){let o=!1;return e._forEachElementUp(t,(()=>{o=o||!0})),o},moveElementsUp(t){e._forEachElementUp(t,(t=>{const o=e.children[t];(0,mobx_state_tree_1.detach)(o),e.children.splice(t+1,0,o)}))},canMoveElementsTop(e){return this.canMoveElementsUp(e)},moveElementsTop(t){const o=[],n=[];e.children.forEach((e=>{t.indexOf(e.id)>=0?o.push(e):n.push(e)})),e.children.replace(n.concat(o))},canMoveElementsDown(t){let o=!1;return e._forEachElementDown(t,(()=>{o=o||!0})),o},moveElementsDown(t){e._forEachElementDown(t,(t=>{const o=e.children[t];(0,mobx_state_tree_1.detach)(o),e.children.splice(t-1,0,o)}))},canMoveElementsBottom(e){return this.canMoveElementsDown(e)},moveElementsBottom(t){const o=[],n=[];e.children.forEach((e=>{t.indexOf(e.id)>=0?o.push(e):n.push(e)})),e.children.replace(o.concat(n))},setElementZIndex(t,o){const n=e.children.find((e=>e.id===t));n&&((0,mobx_state_tree_1.detach)(n),e.children.remove(n),e.children.splice(o,0,n))},setSize({width:t,height:o,useMagic:n,softChange:i}){if(n){const n=[],i=t=>"image"===t.type&&t.x<1&&t.y<1&&t.width>=e.computedWidth-2&&t.height>=e.computedHeight-2;(0,group_model_2.forEveryChild)(e,(e=>{"group"!==e.type&&(i(e)||n.push(e))}));const r=(0,math_1.getTotalClientRect)(n),s=0,d=Math.max(0,Math.min(r.x,e.computedWidth-r.x-r.width)),a=e.computedWidth*s,m=Math.max(0,d-a),c=Math.max(0,Math.min(r.y,e.computedHeight-r.y-r.height)),l=e.computedHeight*s,h=Math.max(0,c-l),p=e.computedWidth-2*m,_=e.computedHeight-2*h,u=t/p,g=o/_,x=Math.min(u,g),E=(t-p*x)/2-m*x,f=(o-_*x)/2-h*x;(0,group_model_2.forEveryChild)(e,(e=>{if("group"===e.type)return;i(e)?e.set({x:e.x*x,y:e.y*x,width:e.width*u,height:e.height*g,cropX:0,cropY:0,cropWidth:1,cropHeight:1}):(e.set({x:E+e.x*x,y:f+e.y*x,width:e.width*x,height:e.height*x}),"text"===e.type?e.set({fontSize:e.fontSize*x}):"figure"===e.type&&e.set({strokeWidth:e.strokeWidth*x}))}))}i||(e.width=t),i||(e.height=o)}}))).actions((e=>({moveElementUp(t){console.warn("page.moveElementUp(id) is deprecated. Please use page.moveElementsUp([id1, id2]) instead."),e.moveElementsUp([t])},moveElementDown(t){console.warn("page.moveElementDown(id) is deprecated. Please use page.moveElementsDown([id1, id2]) instead."),e.moveElementsDown([t])},moveElementTop(t){console.warn("page.moveElementTop(id) is deprecated. Please use page.moveElementsTop([id1, id2]) instead."),e.moveElementsTop([t])},moveElementBottom(t){console.warn("page.moveElementBottom(id) is deprecated. Please use page.moveElementsBottom([id1, id2]) instead."),e.moveElementsBottom([t])},play(){e.store.play({startTime:e.startTime,endTime:e.startTime+e.duration})}})));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "polotno",
3
- "version": "2.7.2",
3
+ "version": "2.7.3",
4
4
  "description": "Design Editor Framework",
5
5
  "author": "Anton Lavrenov",
6
6
  "keywords": [