polotno 1.7.2 → 1.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.
- package/canvas/html-element.js +1 -1
- package/package.json +1 -1
- package/polotno.bundle.js +1 -1
package/canvas/html-element.js
CHANGED
|
@@ -16,4 +16,4 @@
|
|
|
16
16
|
.ql-direction-rtl {
|
|
17
17
|
direction: rtl;
|
|
18
18
|
}
|
|
19
|
-
`,RichEditor=({html:e,onBlur:t,onChange:i,element:r})=>{const n=react_1.default.useRef(null);react_1.default.useEffect((()=>{if(!n.current)return;const e=new quill_1.default(n.current,{toolbar:!1,keyboard:!1,clipboard:{matchVisual:!1}});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=n.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())})),n.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=n.current)||void 0===t?void 0:t.childNodes[0].innerHTML)===r.text)){var a=i.clipboard.convert("<div class='ql-editor' style='outline: none;'>"+e+"<p><br></p></div>");i.setContents(a),i.history.clear(),o&&(i.setSelection(o.index,o.length),exports.quillRef.currentFormat=i.getFormat())}}),[r.text]);const o=(0,text_element_1.useTextColor)(r).fill;return react_1.default.createElement(RichTextContainer,{ref:n,style:{fontSize:r.fontSize,color:o,width:r.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 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}</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};exports.HTMLElement=(0,mobx_react_lite_1.observer)((({element:e,store:t})=>{const i=react_1.default.useRef(null),[r,n]=react_1.default.useState(),[o,a]=react_1.default.useState(!1),[l,s]=react_1.default.useState(!0),[c,
|
|
19
|
+
`,RichEditor=({html:e,onBlur:t,onChange:i,element:r})=>{const n=react_1.default.useRef(null);react_1.default.useEffect((()=>{if(!n.current)return;const e=new quill_1.default(n.current,{toolbar:!1,keyboard:!1,clipboard:{matchVisual:!1},formats:["background","bold","color","font","italic","size","strike","underline","indent","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=n.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())})),n.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=n.current)||void 0===t?void 0:t.childNodes[0].innerHTML)===r.text)){var a=i.clipboard.convert("<div class='ql-editor' style='outline: none;'>"+e+"<p><br></p></div>");i.setContents(a),i.history.clear(),o&&(i.setSelection(o.index,o.length),exports.quillRef.currentFormat=i.getFormat())}}),[r.text]);const o=(0,text_element_1.useTextColor)(r).fill;return react_1.default.createElement(RichTextContainer,{ref:n,style:{fontSize:r.fontSize,color:o,width:r.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 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}</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};exports.HTMLElement=(0,mobx_react_lite_1.observer)((({element:e,store:t})=>{const i=react_1.default.useRef(null),[r,n]=react_1.default.useState(),[o,a]=react_1.default.useState(!1),[l,s]=react_1.default.useState(!0),[c,d]=react_1.default.useState(!1),[u,f]=react_1.default.useState(!1),h=react_1.default.useRef(e.height),g=t.selectedElements.indexOf(e)>=0,_=e.fontSize/4,{textVerticalResizeEnabled:m}=flags_1.flags,[x]=(0,text_element_1.useFontLoader)(t,e.fontFamily);(0,use_fadein_1.useFadeIn)(i);const p=x?e.fontFamily:"Arial",y=(0,text_element_1.useTextColor)(e).fill,b=getHtml(e,{fontFamily:p,color:y}),{width:v,height:w}=useHtmlSize(b,e,x);react_1.default.useEffect((()=>{if(!x)return;if(!e.height)return void e.set({height:w});const{textOverflow:i}=flags_1.flags;if("change-font-size"!==i||o)"resize"===i&&(m&&e.height<w&&t.history.ignore((()=>{e.set({height:w})})),m||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&&t.history.ignore((()=>{e.set({height:w})}))}}));const S=react_1.default.useRef(0);react_1.default.useEffect((()=>{if(o||c)return;S.current++;const i=S.current,r=(0,loader_1.incrementLoader)(`text ${e.id}`);s(!0),async function(){await new Promise((e=>setTimeout(e)));const o=await(0,html2canvas_1.htmlToCanvas)({html:b,width:e.width||1,height:e.height||w||1,fontFamily:p,padding:_,font:t.fonts.find((e=>e.fontFamily===p))||fonts.globalFonts.find((e=>e.fontFamily===p))});i===S.current?(n(o),s(!1),konva_1.default.Util.requestAnimFrame(r)):r()}()}),[b,o,w,c,p,e.height]);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 z=(0,text_element_1.getLineHeight)({fontLoaded:x,fontFamily:e.fontFamily,fontSize:e.fontSize,lineHeight:e.lineHeight}),k=(0,screen_1.useMobile)();return react_1.default.createElement(react_1.default.Fragment,null,react_1.default.createElement(react_konva_1.Rect,{x:e.x,y:e.y,offsetX:e.backgroundPadding*(e.fontSize*z*.5),offsetY:e.backgroundPadding*(e.fontSize*z*.5),rotation:e.rotation,hideInExport:!e.showInExport||!e.text,listening:!1,visible:e.backgroundEnabled,opacity:e.backgroundOpacity,fill:e.backgroundColor,width:e.width+e.backgroundPadding*(e.fontSize*z),height:e.height+e.backgroundPadding*(e.fontSize*z),cornerRadius:e.backgroundCornerRadius*(e.fontSize*z*.5)}),react_1.default.createElement(react_konva_1.Rect,{ref:i,name:"element",x:e.x,y:e.y,listening:e.selectable,rotation:e.rotation,width:e.width,height:e.height,visible:!E,draggable:k?e.draggable&&g:e.draggable,preventDefault:!k||g,opacity:c?0:e.opacity,hideInExport:!e.showInExport,onMouseEnter:()=>{f(!0)},onMouseLeave:()=>{f(!1)},onDragStart:()=>{t.history.startTransaction()},onDragMove:t=>{e.set({x:t.target.x(),y:t.target.y()})},onDragEnd:i=>{e.set({x:i.target.x(),y:i.target.y()}),t.history.endTransaction()},id:e.id,onDblClick:()=>{e.contentEditable&&d(!0)},onDblTap:()=>{e.contentEditable&&d(!0)},onTransformStart:t=>{a(!0),h.current=e.height},onTransform:t=>{var i;const r=t.target,n=(null===(i=r.getStage())||void 0===i?void 0:i.findOne("Transformer")).getActiveAnchor(),o="middle-left"===n||"middle-right"===n,a="top-center"===n||"bottom-center"===n,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,h.current);e.set({height:t})}e.set({width:i,x:r.x(),y:r.y()})}else if(a){let i="resize"===flags_1.flags.textOverflow?w:e.lineHeight*e.fontSize;const n=Math.max(i,t.target.height()*t.target.scaleY());r.scaleY(1),e.set({x:r.x(),y:r.y(),height:n,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=>{a(!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()})}}),react_1.default.createElement(react_konva_1.Image,{ref:i,image:r,x:e.x,y:e.y,offsetX:_,offsetY:_-q,listening:!1,rotation:e.rotation,width:e.width+2*_,height:e.height+2*_,visible:!E,opacity:c?0:e.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.x,y:e.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:b},style:{pointerEvents:"none",display:"inline-block"}}))),c&&react_1.default.createElement(react_konva_1.Group,{x:e.x,y:e.y,rotation:e.rotation,offsetY:-q},react_1.default.createElement(react_konva_utils_1.Html,null,react_1.default.createElement(RichEditor,{html:b,element:e,onChange:t=>{e.set({text:t})},onBlur:e=>{d(!1)}}))),(g||u)&&react_1.default.createElement(highlighter_1.Highlighter,{element:e}))}));
|
package/package.json
CHANGED
package/polotno.bundle.js
CHANGED
|
@@ -119,7 +119,7 @@ var r;e(t.exports,"useSyncExternalStore",(()=>r),(e=>r=e));var i=l("8NFma");var
|
|
|
119
119
|
.ql-direction-rtl {
|
|
120
120
|
direction: rtl;
|
|
121
121
|
}
|
|
122
|
-
`,Zh=({html:e,onBlur:t,onChange:r,element:i})=>{const o=n(f).useRef(null);n(f).useEffect((()=>{if(!o.current)return;const e=new(n(wu))(o.current,{toolbar:!1,keyboard:!1,clipboard:{matchVisual:!1}});return Xh.editor.instance=e,window.__polotnoQuill=e,e.on("text-change",(()=>{e.getSelection()&&(Xh.currentFormat=e.getFormat()),setTimeout((()=>{r(o.current?.childNodes[0].innerHTML)}),10)})),e.setSelection(0,0,"api"),e.on("selection-change",(n=>{n||t(),n&&(Xh.currentFormat=e.getFormat())})),o.current.childNodes[0].addEventListener("blur",(e=>{e.relatedTarget?.classList.contains("ql-clipboard")||t()})),()=>{Xh.editor.instance=null,Xh.currentFormat={},delete window.__polotnoQuill}}),[]),n(f).useEffect((()=>{const t=Xh.editor.instance;if(!t)return;const n=t.getSelection();if(!(o.current?.childNodes[0].innerHTML===i.text)){var r=t.clipboard.convert("<div class='ql-editor' style='outline: none;'>"+e+"<p><br></p></div>");t.setContents(r),t.history.clear(),n&&(t.setSelection(n.index,n.length),Xh.currentFormat=t.getFormat())}}),[i.text]);const a=$c(i).fill;return(0,s.jsx)(Qh,{ref:o,style:{fontSize:i.fontSize,color:a,width:i.width,fontFamily:i.fontFamily,lineHeight:i.lineHeight,letterSpacing:i.letterSpacing+"rem",textAlign:i.align},dir:qc(kc(i.text))})};function Jh(e,{fontFamily:t="",color:n="black"}={}){let r=`color: ${n||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="${qc(kc(e.text))}">${e.text}</div>`}const ed=ei((({element:e,store:t})=>{const r=n(f).useRef(null),[i,o]=n(f).useState(),[a,l]=n(f).useState(!1),[c,u]=n(f).useState(!0),[h,d]=n(f).useState(!1),[p,v]=n(f).useState(!1),m=n(f).useRef(e.height),g=t.selectedElements.indexOf(e)>=0,y=e.fontSize/4,{textVerticalResizeEnabled:b}=Mc,[w]=Wc(t,e.fontFamily);sc(r);const x=w?e.fontFamily:"Arial",_=$c(e).fill,E=Jh(e,{fontFamily:x,color:_}),{width:z,height:S}=function(e,t,r){return n(f).useMemo((()=>Ah(e)),[e,t.width,r])}(E,e,w);n(f).useEffect((()=>{if(!w)return;if(!e.height)return void e.set({height:S});const{textOverflow:n}=Mc;if("change-font-size"!==n||a)"resize"===n&&(b&&e.height<S&&t.history.ignore((()=>{e.set({height:S})})),b||e.height===S||t.history.ignore((()=>{e.set({height:S})})));else{const n=(e=>{let t=e.fontSize;for(let n=1;n<50;n++){const n=Jh({...e.toJSON(),fontSize:t},{fontFamily:e.fontFamily}),{height:r}=Ah(n);if(!(e.height&&r>e.height))break;t-=.5}return t})(e);n!==e.fontSize?t.history.ignore((()=>{e.set({fontSize:n})})):e.height!==S&&t.history.ignore((()=>{e.set({height:S})}))}}));const C=n(f).useRef(0);n(f).useLayoutEffect((()=>{if(a||h)return;C.current++;const n=C.current,r=hc(`text ${e.id}`);u(!0),async function(){await new Promise((e=>setTimeout(e)));const i=await Lh({html:E,width:e.width||1,height:e.height||S||1,fontFamily:x,padding:y,font:t.fonts.find((e=>e.fontFamily===x))||wc.find((e=>e.fontFamily===x))});n===C.current?(o(i),u(!1),pl.Util.requestAnimFrame(r)):r()}()}),[E,a,S,h,x,e.height]);const O=a||c;n(f).useLayoutEffect((()=>Kt((()=>{Vc(r.current,e)}))),[i,O,e.shadowColor,e.shadowOffsetX,e.shadowOffsetY,e.shadowOpacity]);let M=0;"middle"===e.verticalAlign&&(M=(e.height-S)/2),"bottom"===e.verticalAlign&&(M=e.height-S);const k=Kc({fontLoaded:w,fontFamily:e.fontFamily,fontSize:e.fontSize,lineHeight:e.lineHeight}),A=Fc();return(0,s.jsxs)(n(f).Fragment,{children:[(0,s.jsx)(ks,{x:e.x,y:e.y,offsetX:e.backgroundPadding*(e.fontSize*k*.5),offsetY:e.backgroundPadding*(e.fontSize*k*.5),rotation:e.rotation,hideInExport:!e.showInExport||!e.text,listening:!1,visible:e.backgroundEnabled,opacity:e.backgroundOpacity,fill:e.backgroundColor,width:e.width+e.backgroundPadding*(e.fontSize*k),height:e.height+e.backgroundPadding*(e.fontSize*k),cornerRadius:e.backgroundCornerRadius*(e.fontSize*k*.5)}),(0,s.jsx)(ks,{ref:r,name:"element",x:e.x,y:e.y,listening:e.selectable,rotation:e.rotation,width:e.width,height:e.height,visible:!O,draggable:A?e.draggable&&g:e.draggable,preventDefault:!A||g,opacity:h?0:e.opacity,hideInExport:!e.showInExport,onMouseEnter:()=>{v(!0)},onMouseLeave:()=>{v(!1)},onDragStart:()=>{t.history.startTransaction()},onDragMove:t=>{e.set({x:t.target.x(),y:t.target.y()})},onDragEnd:n=>{e.set({x:n.target.x(),y:n.target.y()}),t.history.endTransaction()},id:e.id,onDblClick:()=>{e.contentEditable&&d(!0)},onDblTap:()=>{e.contentEditable&&d(!0)},onTransformStart:t=>{l(!0),m.current=e.height},onTransform:t=>{const n=t.target,r=n.getStage()?.findOne("Transformer"),i=r.getActiveAnchor(),o="middle-left"===i||"middle-right"===i,a="top-center"===i||"bottom-center"===i,l=n.scaleX();if(o){const t=n.scaleX(),r=Math.max(n.width()*t,e.fontSize);if(n.width(r),n.scaleX(1),Mc.textVerticalResizeEnabled){const t=Math.max(S,m.current);e.set({height:t})}e.set({width:r,x:n.x(),y:n.y()})}else if(a){let r="resize"===Mc.textOverflow?S:e.lineHeight*e.fontSize;const i=Math.max(r,t.target.height()*t.target.scaleY());n.scaleY(1),e.set({x:n.x(),y:n.y(),height:i,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=>{l(!1),u(!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()})}}),(0,s.jsx)(Ls,{ref:r,image:i,x:e.x,y:e.y,offsetX:y,offsetY:y-M,listening:!1,rotation:e.rotation,width:e.width+2*y,height:e.height+2*y,visible:!O,opacity:h?0:e.opacity,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,hideInExport:!e.showInExport}),O&&(0,s.jsx)(Os,{x:e.x,y:e.y,rotation:e.rotation,offsetY:-M,children:(0,s.jsx)(Vs.Html,{divProps:{style:{pointerEvents:"none"}},children:(0,s.jsx)(Qh,{dangerouslySetInnerHTML:{__html:E},style:{pointerEvents:"none",display:"inline-block"}})})}),h&&(0,s.jsx)(Os,{x:e.x,y:e.y,rotation:e.rotation,offsetY:-M,children:(0,s.jsx)(Vs.Html,{children:(0,s.jsx)(Zh,{html:E,element:e,onChange:t=>{e.set({text:t})},onBlur:e=>{d(!1)}})})}),(g||p)&&(0,s.jsx)(Ic,{element:e})]})}));f=l("8NFma"),f=l("8NFma");function td(e,t,n,r,i){const o=Math.sqrt(n*n+r*r);i+=Math.atan2(r,n);return{x:e+o*Math.cos(i),y:t+o*Math.sin(i)}}function nd(e){const{x:t,y:n,width:r,height:i}=e,o=pl.Util.degToRad(e.rotation),a=td(t,n,0,0,o),l=td(t,n,r,0,o),s=td(t,n,r,i,o),c=td(t,n,0,i,o),u=Math.min(a.x,l.x,s.x,c.x),h=Math.min(a.y,l.y,s.y,c.y),d=Math.max(a.x,l.x,s.x,c.x),f=Math.max(a.y,l.y,s.y,c.y);return{x:u,y:h,width:d-u,height:f-h,minX:u,minY:h,maxX:d,maxY:f}}function rd(e){const t=e.map((e=>nd(e))),n=Math.min(...t.map((e=>e.minX))),r=Math.min(...t.map((e=>e.minY))),i=Math.max(...t.map((e=>e.maxX))),o=Math.max(...t.map((e=>e.maxY)));return{x:n,y:r,width:i-n,height:o-r,minX:n,minY:r,maxX:i,maxY:o}}function id(e,t){var n=[],r=[];e.vertical.forEach((e=>{t.vertical.forEach((t=>{var r=Math.abs(e-t.guide);r<5&&n.push({lineGuide:e,diff:r,snap:t.snap,offset:t.offset})}))})),e.horizontal.forEach((e=>{t.horizontal.forEach((t=>{var n=Math.abs(e-t.guide);n<5&&r.push({lineGuide:e,diff:n,snap:t.snap,offset:t.offset})}))}));var i=[];const o=n.sort(((e,t)=>e.diff-t.diff)),a=r.sort(((e,t)=>e.diff-t.diff));var l=o[0],s=a[0];if(l){o.filter((e=>Math.abs(e.diff-l.diff)<.1)).forEach((e=>{i.push({orientation:"V",...e})}))}if(s){a.filter((e=>Math.abs(e.diff-s.diff)<.1)).forEach((e=>{i.push({orientation:"H",...e})}))}return i}function od(e){const t=e=>e.hasName("element")||e.hasName("page-background")||e.hasName("elements-area");function r(n){const r=e.current?.getStage();var i=[],o=[];return r.find(t).forEach((e=>{if(!(n.indexOf(e)>=0)){var t=e.getClientRect({skipShadow:!0,skipStroke:!0});i.push(t.x,t.x+t.width,t.x+t.width/2),o.push(t.y,t.y+t.height,t.y+t.height/2)}})),{vertical:i,horizontal:o}}function i(t){const n=e.current?.getLayer(),r=n?.children.find((e=>"line-guides"===e.name()));t.forEach((e=>{if("H"===e.orientation){var t=new pl.Line({points:[-6e3,e.lineGuide,6e3,e.lineGuide],stroke:"rgb(0, 161, 255)",strokeWidth:1,name:"guid-line",dash:[4,6]});r?.add(t),n.batchDraw()}else if("V"===e.orientation){t=new pl.Line({points:[e.lineGuide,-6e3,e.lineGuide,6e3],stroke:"rgb(0, 161, 255)",strokeWidth:1,name:"guid-line",dash:[4,6]});r?.add(t)}}))}const o=e=>{e.target.getLayer().children.find((e=>"line-guides"===e.name())).destroyChildren();var t=r(e.target.nodes()),n=function(e){const t=e.__getNodeRect(),n=nd({...t,rotation:pl.Util.radToDeg(t.rotation)}),r=e.getAbsolutePosition();return{vertical:[{guide:n.x,offset:r.x-n.x,snap:"start"},{guide:n.x+n.width/2,offset:r.x-n.x-n.width/2,snap:"center"},{guide:n.x+n.width,offset:r.x-n.x-n.width,snap:"end"}],horizontal:[{guide:n.y,offset:r.y-n.y,snap:"start"},{guide:n.y+n.height/2,offset:r.y-n.y-n.height/2,snap:"center"},{guide:n.y+n.height,offset:r.y-n.y-n.height,snap:"end"}]}}(e.target),o=id(t,n);if(!o.length)return;i(o);const a=e.target.getAbsolutePosition(),l={...a};o.forEach((e=>{switch(e.snap){case"start":case"center":case"end":switch(e.orientation){case"V":l.x=e.lineGuide+e.offset;break;case"H":l.y=e.lineGuide+e.offset}}}));const s=l.x-a.x,c=l.y-a.y;e.evt.ctrlKey||e.evt.metaKey||e.target.nodes().forEach((e=>{const t=e.getAbsolutePosition();e.setAbsolutePosition({x:t.x+s,y:t.y+c})}))},a=(t,n,o)=>{const a=e.current,l=a.getLayer();if(l.children.find((e=>"line-guides"===e.name())).destroyChildren(),"rotater"===a.getActiveAnchor())return n;if(Math.sqrt(Math.pow(n.x-t.x,2)+Math.pow(n.y-t.y,2))>50)return n;if(!l)return n;var s=id(r(a.nodes()),{vertical:[{guide:n.x,offset:0,snap:"start"}],horizontal:[{guide:n.y,offset:0,snap:"start"}]});if(!s.length)return n;i(s);if(o.ctrlKey||o.metaKey)return n;let c=n.x,u=n.x;s.forEach((e=>{switch(e.orientation){case"V":c=e.lineGuide;break;case"H":u=e.lineGuide}}));const h=Math.abs(n.x-c)<10,d=Math.abs(n.y-u)<10;return h&&!d?{x:c,y:t.y}:d&&!h?{x:t.x,y:u}:h&&d?{x:c,y:u}:n},l=e=>{if(!e.target)return;const t=e.target.getLayer();t.children.find((e=>"line-guides"===e.name())).destroyChildren(),t.batchDraw()};n(f).useEffect((()=>{e.current&&(e.current.anchorDragBoundFunc(a),e.current.on("dragstart",(()=>{setTimeout((()=>{const e=[...pl.DD._dragElements.entries()];e.reverse(),pl.DD._dragElements.clear(),e.forEach((([e,t])=>{pl.DD._dragElements.set(e,t)}))}))})),e.current.on("dragmove",o),e.current.on("dragend",l),e.current.on("transformend",l))}),[])}function ad(e,t,r){const i=e=>e.hasName("element")||e.hasName("line-anchor")||e.hasName("page-background")||e.hasName("elements-area");const o=n=>{n.target.getLayer().children.find((e=>"line-guides"===e.name())).destroyChildren();var r,o=id(function(t){const n=e.current?.getStage();var r=[],o=[];return n.find(i).forEach((e=>{if(!(t.indexOf(e)>=0)){var n=e.getClientRect({skipShadow:!0,skipStroke:!0});e.hasName("line-anchor")&&(n={x:e.absolutePosition().x,y:e.absolutePosition().y,width:0,height:0}),r.push(n.x,n.x+n.width,n.x+n.width/2),o.push(n.y,n.y+n.height,n.y+n.height/2)}})),{vertical:r,horizontal:o}}([n.target,...t.map((e=>e.current))]),{vertical:[{guide:(r=n.target).absolutePosition().x,offset:0,snap:"center"}],horizontal:[{guide:r.absolutePosition().y,offset:0,snap:"center"}]});if(!o.length)return;!function(t){const n=e.current?.getLayer(),r=n?.children.find((e=>"line-guides"===e.name()));t.forEach((e=>{if("H"===e.orientation){var t=new pl.Line({points:[-6e3,e.lineGuide,6e3,e.lineGuide],stroke:"rgb(0, 161, 255)",strokeWidth:1,name:"guid-line",dash:[4,6]});r?.add(t),n.batchDraw()}else"V"===e.orientation&&(t=new pl.Line({points:[e.lineGuide,-6e3,e.lineGuide,6e3],stroke:"rgb(0, 161, 255)",strokeWidth:1,name:"guid-line",dash:[4,6]}),r?.add(t))}))}(o);const a=n.target.getAbsolutePosition(),l={...a};o.forEach((e=>{switch(e.snap){case"start":case"center":case"end":switch(e.orientation){case"V":l.x=e.lineGuide+e.offset;break;case"H":l.y=e.lineGuide+e.offset}}}));const s=l.x-a.x,c=l.y-a.y;if(!(n.evt.ctrlKey||n.evt.metaKey)){const e=n.target.getAbsolutePosition();n.target.absolutePosition({x:e.x+s,y:e.y+c})}},a=e=>{if(!e.target)return;const t=e.target.getLayer();t.children.find((e=>"line-guides"===e.name())).destroyChildren(),t.batchDraw()};n(f).useEffect((()=>{e.current&&(e.current.on("dragmove",o),e.current.on("dragend",a))}),r)}function ld(e,t,n){const r=Math.sqrt(Math.pow(t.x-e.x,2)+Math.pow(t.y-e.y,2)),i=Math.atan2(t.y-e.y,t.x-e.x),o=180*i/Math.PI;return{x:e.x+Math.cos(i-Math.PI/2)*n/2,y:e.y+Math.sin(i-Math.PI/2)*n/2,width:r,height:n,rotation:o}}const sd=(e,t)=>({offsetX:5/e,offsetY:5/e,width:10/e,height:10/e,fill:"white",stroke:"rgb(0, 161, 255)",strokeWidth:2,strokeScaleEnabled:!1,draggable:!0,dragDistance:0,onMouseEnter:e=>{e.target.getStage().container().style.cursor="crosshair"},onMouseLeave:e=>{e.target.getStage().container().style.cursor=""},onDragStart:e=>{t.history.startTransaction()},onDragEnd:e=>{t.history.endTransaction()}}),cd=ei((({element:e,type:t})=>{const n={strokeWidth:e.height,stroke:e.a.color,lineCap:"round",lineJoin:"round",fill:e.a.color,opacity:e.a.opacity};return(0,s.jsxs)(s.Fragment,{children:["arrow"===t&&(0,s.jsx)(As,{points:[3*e.height,2*-e.height,0,0,3*e.height,2*e.height],...n}),"triangle"===t&&(0,s.jsx)(As,{points:[3*e.height,2*-e.height,0,0,3*e.height,2*e.height],closed:!0,...n}),"bar"===t&&(0,s.jsx)(As,{points:[0,2*-e.height,0,2*e.height],closed:!0,...n}),"square"===t&&(0,s.jsx)(As,{points:[0,2*-e.height,4*e.height,2*-e.height,4*e.height,2*e.height,0,2*e.height],closed:!0,...n}),"circle"===t&&(0,s.jsx)("Circle",{x:2*e.height,y:0,radius:2*e.height,...n})]})})),ud=ei((({element:e,store:t})=>{const r=n(f).useRef(null),i=n(f).useRef(null),o=n(f).useRef(null),a=e.selectable||"admin"===t.role,l=Fc(),[c,u]=n(f).useState(!1),h=t.selectedElements.indexOf(e)>=0&&1===t.selectedElements.length,{middleLeft:d,middleRight:p}=function({x:e,y:t,width:n,height:r,rotation:i}){const o=i*Math.PI/180,a={x:e+r/2*Math.cos(o+Math.PI/2),y:t+r/2*Math.sin(o+Math.PI/2)};return{middleLeft:a,middleRight:{x:a.x+n*Math.cos(o),y:a.y+n*Math.sin(o)}}}(e);return ad(i,[r],[h]),ad(o,[r],[h]),(0,s.jsxs)(n(f).Fragment,{children:[(0,s.jsx)(As,{ref:r,name:"element",id:e.id,x:e.a.x,y:e.a.y,points:[0,0,e.width,0],offsetY:-e.height/2,strokeWidth:e.height,hitStrokeWidth:Math.max(e.height,20),dash:e.dash.map((t=>t*e.height)),stroke:e.a.color,rotation:e.a.rotation,opacity:e.animated("opacity"),shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,listening:a,draggable:l?e.draggable&&h:e.draggable,preventDefault:!l||h,hideInExport:!e.showInExport,onMouseEnter:()=>{u(!0)},onMouseLeave:()=>{u(!1)},onDragStart:()=>{t.history.startTransaction()},onDragMove:t=>{e.set({x:t.target.x(),y:t.target.y()})},onDragEnd:n=>{e.set({x:n.target.x(),y:n.target.y()}),t.history.endTransaction()},onTransformStart:()=>{t.history.startTransaction()},onTransform:t=>{const n=t.target.scaleX();t.target.scaleX(1),t.target.scaleY(1),e.set({height:e.height*n,width:e.width*n,x:t.target.x(),y:t.target.y(),rotation:t.target.rotation()})},onTransformEnd:e=>{t.history.endTransaction()}}),(0,s.jsx)(Os,{x:d.x,y:d.y,rotation:e.rotation,children:(0,s.jsx)(cd,{element:e,type:e.startHead})}),(0,s.jsx)(Os,{x:p.x,y:p.y,rotation:e.rotation+180,children:(0,s.jsx)(cd,{element:e,type:e.endHead})}),c&&!h&&(0,s.jsx)(Ic,{element:e}),h&&e.resizable&&(0,s.jsx)(Fs,{selector:".page-abs-container",enabled:!0,children:(0,s.jsxs)(Os,{visible:h,children:[(0,s.jsx)(ks,{x:d.x,y:d.y,ref:i,name:"line-anchor",...sd(t.scale,t),onDragMove:t=>{const n=ld(t.target.position(),p,e.height);e.set({x:n.x,y:n.y,width:n.width,rotation:n.rotation})}}),(0,s.jsx)(ks,{x:p.x,y:p.y,ref:o,name:"line-anchor",...sd(t.scale,t),onDragMove:t=>{const n=ld(d,t.target.position(),e.height);e.set({x:n.x,y:n.y,width:n.width,rotation:n.rotation})}})]})})]})})),hd={text:Yc,image:mu,svg:mu,line:ud,group:ei((e=>{const{element:t,store:n}=e,{children:r}=t,i=t.selectable||"admin"===n.role;return(0,s.jsx)(Os,{opacity:t.opacity,listening:i,children:r.map((t=>(0,f.createElement)(dd,{...e,key:t.id,store:n,element:t})))})}))};const dd=ei((e=>{let t=hd[e.element.type];return"text"===e.element.type&&Mc.htmlRenderEnabled&&(t=ed),e.element.visible?t?(0,s.jsx)(t,{...e}):(console.error("Can not find component for "+e.element.type),null):null}));var fd=dd;function pd(e,t,n="scale"){const r=t.width/t.height;let i,o;r>=e.width/e.height?(i=e.width,o=e.width/r):(i=e.height*r,o=e.height);let a=0,l=0;return"left-top"===n?(a=0,l=0):"left-middle"===n?(a=0,l=(e.height-o)/2):"left-bottom"===n?(a=0,l=e.height-o):"center-top"===n?(a=(e.width-i)/2,l=0):"center-middle"===n?(a=(e.width-i)/2,l=(e.height-o)/2):"center-bottom"===n?(a=(e.width-i)/2,l=e.height-o):"right-top"===n?(a=e.width-i,l=0):"right-middle"===n?(a=e.width-i,l=(e.height-o)/2):"right-bottom"===n?(a=e.width-i,l=e.height-o):"scale"===n?(a=0,l=0,i=e.width,o=e.height):console.error(new Error("Unknown clip position property - "+n)),{cropX:a,cropY:l,cropWidth:i,cropHeight:o}}l("8NFma"),"undefined"!=typeof window&&"undefined"!=typeof document&&l("2j10E");var vd={};e(vd,"show",(()=>jE)),e(vd,"hide",(()=>RE)),e(vd,"isOpen",(()=>VE));
|
|
122
|
+
`,Zh=({html:e,onBlur:t,onChange:r,element:i})=>{const o=n(f).useRef(null);n(f).useEffect((()=>{if(!o.current)return;const e=new(n(wu))(o.current,{toolbar:!1,keyboard:!1,clipboard:{matchVisual:!1},formats:["background","bold","color","font","italic","size","strike","underline","indent","align","direction"]});return Xh.editor.instance=e,window.__polotnoQuill=e,e.on("text-change",(()=>{e.getSelection()&&(Xh.currentFormat=e.getFormat()),setTimeout((()=>{r(o.current?.childNodes[0].innerHTML)}),10)})),e.setSelection(0,0,"api"),e.on("selection-change",(n=>{n||t(),n&&(Xh.currentFormat=e.getFormat())})),o.current.childNodes[0].addEventListener("blur",(e=>{e.relatedTarget?.classList.contains("ql-clipboard")||t()})),()=>{Xh.editor.instance=null,Xh.currentFormat={},delete window.__polotnoQuill}}),[]),n(f).useEffect((()=>{const t=Xh.editor.instance;if(!t)return;const n=t.getSelection();if(!(o.current?.childNodes[0].innerHTML===i.text)){var r=t.clipboard.convert("<div class='ql-editor' style='outline: none;'>"+e+"<p><br></p></div>");t.setContents(r),t.history.clear(),n&&(t.setSelection(n.index,n.length),Xh.currentFormat=t.getFormat())}}),[i.text]);const a=$c(i).fill;return(0,s.jsx)(Qh,{ref:o,style:{fontSize:i.fontSize,color:a,width:i.width,fontFamily:i.fontFamily,lineHeight:i.lineHeight,letterSpacing:i.letterSpacing+"rem",textAlign:i.align},dir:qc(kc(i.text))})};function Jh(e,{fontFamily:t="",color:n="black"}={}){let r=`color: ${n||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="${qc(kc(e.text))}">${e.text}</div>`}const ed=ei((({element:e,store:t})=>{const r=n(f).useRef(null),[i,o]=n(f).useState(),[a,l]=n(f).useState(!1),[c,u]=n(f).useState(!0),[h,d]=n(f).useState(!1),[p,v]=n(f).useState(!1),m=n(f).useRef(e.height),g=t.selectedElements.indexOf(e)>=0,y=e.fontSize/4,{textVerticalResizeEnabled:b}=Mc,[w]=Wc(t,e.fontFamily);sc(r);const x=w?e.fontFamily:"Arial",_=$c(e).fill,E=Jh(e,{fontFamily:x,color:_}),{width:z,height:S}=function(e,t,r){return n(f).useMemo((()=>Ah(e)),[e,t.width,r])}(E,e,w);n(f).useEffect((()=>{if(!w)return;if(!e.height)return void e.set({height:S});const{textOverflow:n}=Mc;if("change-font-size"!==n||a)"resize"===n&&(b&&e.height<S&&t.history.ignore((()=>{e.set({height:S})})),b||e.height===S||t.history.ignore((()=>{e.set({height:S})})));else{const n=(e=>{let t=e.fontSize;for(let n=1;n<50;n++){const n=Jh({...e.toJSON(),fontSize:t},{fontFamily:e.fontFamily}),{height:r}=Ah(n);if(!(e.height&&r>e.height))break;t-=.5}return t})(e);n!==e.fontSize?t.history.ignore((()=>{e.set({fontSize:n})})):e.height!==S&&t.history.ignore((()=>{e.set({height:S})}))}}));const C=n(f).useRef(0);n(f).useEffect((()=>{if(a||h)return;C.current++;const n=C.current,r=hc(`text ${e.id}`);u(!0),async function(){await new Promise((e=>setTimeout(e)));const i=await Lh({html:E,width:e.width||1,height:e.height||S||1,fontFamily:x,padding:y,font:t.fonts.find((e=>e.fontFamily===x))||wc.find((e=>e.fontFamily===x))});n===C.current?(o(i),u(!1),pl.Util.requestAnimFrame(r)):r()}()}),[E,a,S,h,x,e.height]);const O=a||c;n(f).useEffect((()=>Kt((()=>{Vc(r.current,e)}))),[i,O,e.shadowColor,e.shadowOffsetX,e.shadowOffsetY,e.shadowOpacity]);let M=0;"middle"===e.verticalAlign&&(M=(e.height-S)/2),"bottom"===e.verticalAlign&&(M=e.height-S);const k=Kc({fontLoaded:w,fontFamily:e.fontFamily,fontSize:e.fontSize,lineHeight:e.lineHeight}),A=Fc();return(0,s.jsxs)(n(f).Fragment,{children:[(0,s.jsx)(ks,{x:e.x,y:e.y,offsetX:e.backgroundPadding*(e.fontSize*k*.5),offsetY:e.backgroundPadding*(e.fontSize*k*.5),rotation:e.rotation,hideInExport:!e.showInExport||!e.text,listening:!1,visible:e.backgroundEnabled,opacity:e.backgroundOpacity,fill:e.backgroundColor,width:e.width+e.backgroundPadding*(e.fontSize*k),height:e.height+e.backgroundPadding*(e.fontSize*k),cornerRadius:e.backgroundCornerRadius*(e.fontSize*k*.5)}),(0,s.jsx)(ks,{ref:r,name:"element",x:e.x,y:e.y,listening:e.selectable,rotation:e.rotation,width:e.width,height:e.height,visible:!O,draggable:A?e.draggable&&g:e.draggable,preventDefault:!A||g,opacity:h?0:e.opacity,hideInExport:!e.showInExport,onMouseEnter:()=>{v(!0)},onMouseLeave:()=>{v(!1)},onDragStart:()=>{t.history.startTransaction()},onDragMove:t=>{e.set({x:t.target.x(),y:t.target.y()})},onDragEnd:n=>{e.set({x:n.target.x(),y:n.target.y()}),t.history.endTransaction()},id:e.id,onDblClick:()=>{e.contentEditable&&d(!0)},onDblTap:()=>{e.contentEditable&&d(!0)},onTransformStart:t=>{l(!0),m.current=e.height},onTransform:t=>{const n=t.target,r=n.getStage()?.findOne("Transformer"),i=r.getActiveAnchor(),o="middle-left"===i||"middle-right"===i,a="top-center"===i||"bottom-center"===i,l=n.scaleX();if(o){const t=n.scaleX(),r=Math.max(n.width()*t,e.fontSize);if(n.width(r),n.scaleX(1),Mc.textVerticalResizeEnabled){const t=Math.max(S,m.current);e.set({height:t})}e.set({width:r,x:n.x(),y:n.y()})}else if(a){let r="resize"===Mc.textOverflow?S:e.lineHeight*e.fontSize;const i=Math.max(r,t.target.height()*t.target.scaleY());n.scaleY(1),e.set({x:n.x(),y:n.y(),height:i,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=>{l(!1),u(!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()})}}),(0,s.jsx)(Ls,{ref:r,image:i,x:e.x,y:e.y,offsetX:y,offsetY:y-M,listening:!1,rotation:e.rotation,width:e.width+2*y,height:e.height+2*y,visible:!O,opacity:h?0:e.opacity,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,hideInExport:!e.showInExport}),O&&(0,s.jsx)(Os,{x:e.x,y:e.y,rotation:e.rotation,offsetY:-M,children:(0,s.jsx)(Vs.Html,{divProps:{style:{pointerEvents:"none"}},children:(0,s.jsx)(Qh,{dangerouslySetInnerHTML:{__html:E},style:{pointerEvents:"none",display:"inline-block"}})})}),h&&(0,s.jsx)(Os,{x:e.x,y:e.y,rotation:e.rotation,offsetY:-M,children:(0,s.jsx)(Vs.Html,{children:(0,s.jsx)(Zh,{html:E,element:e,onChange:t=>{e.set({text:t})},onBlur:e=>{d(!1)}})})}),(g||p)&&(0,s.jsx)(Ic,{element:e})]})}));f=l("8NFma"),f=l("8NFma");function td(e,t,n,r,i){const o=Math.sqrt(n*n+r*r);i+=Math.atan2(r,n);return{x:e+o*Math.cos(i),y:t+o*Math.sin(i)}}function nd(e){const{x:t,y:n,width:r,height:i}=e,o=pl.Util.degToRad(e.rotation),a=td(t,n,0,0,o),l=td(t,n,r,0,o),s=td(t,n,r,i,o),c=td(t,n,0,i,o),u=Math.min(a.x,l.x,s.x,c.x),h=Math.min(a.y,l.y,s.y,c.y),d=Math.max(a.x,l.x,s.x,c.x),f=Math.max(a.y,l.y,s.y,c.y);return{x:u,y:h,width:d-u,height:f-h,minX:u,minY:h,maxX:d,maxY:f}}function rd(e){const t=e.map((e=>nd(e))),n=Math.min(...t.map((e=>e.minX))),r=Math.min(...t.map((e=>e.minY))),i=Math.max(...t.map((e=>e.maxX))),o=Math.max(...t.map((e=>e.maxY)));return{x:n,y:r,width:i-n,height:o-r,minX:n,minY:r,maxX:i,maxY:o}}function id(e,t){var n=[],r=[];e.vertical.forEach((e=>{t.vertical.forEach((t=>{var r=Math.abs(e-t.guide);r<5&&n.push({lineGuide:e,diff:r,snap:t.snap,offset:t.offset})}))})),e.horizontal.forEach((e=>{t.horizontal.forEach((t=>{var n=Math.abs(e-t.guide);n<5&&r.push({lineGuide:e,diff:n,snap:t.snap,offset:t.offset})}))}));var i=[];const o=n.sort(((e,t)=>e.diff-t.diff)),a=r.sort(((e,t)=>e.diff-t.diff));var l=o[0],s=a[0];if(l){o.filter((e=>Math.abs(e.diff-l.diff)<.1)).forEach((e=>{i.push({orientation:"V",...e})}))}if(s){a.filter((e=>Math.abs(e.diff-s.diff)<.1)).forEach((e=>{i.push({orientation:"H",...e})}))}return i}function od(e){const t=e=>e.hasName("element")||e.hasName("page-background")||e.hasName("elements-area");function r(n){const r=e.current?.getStage();var i=[],o=[];return r.find(t).forEach((e=>{if(!(n.indexOf(e)>=0)){var t=e.getClientRect({skipShadow:!0,skipStroke:!0});i.push(t.x,t.x+t.width,t.x+t.width/2),o.push(t.y,t.y+t.height,t.y+t.height/2)}})),{vertical:i,horizontal:o}}function i(t){const n=e.current?.getLayer(),r=n?.children.find((e=>"line-guides"===e.name()));t.forEach((e=>{if("H"===e.orientation){var t=new pl.Line({points:[-6e3,e.lineGuide,6e3,e.lineGuide],stroke:"rgb(0, 161, 255)",strokeWidth:1,name:"guid-line",dash:[4,6]});r?.add(t),n.batchDraw()}else if("V"===e.orientation){t=new pl.Line({points:[e.lineGuide,-6e3,e.lineGuide,6e3],stroke:"rgb(0, 161, 255)",strokeWidth:1,name:"guid-line",dash:[4,6]});r?.add(t)}}))}const o=e=>{e.target.getLayer().children.find((e=>"line-guides"===e.name())).destroyChildren();var t=r(e.target.nodes()),n=function(e){const t=e.__getNodeRect(),n=nd({...t,rotation:pl.Util.radToDeg(t.rotation)}),r=e.getAbsolutePosition();return{vertical:[{guide:n.x,offset:r.x-n.x,snap:"start"},{guide:n.x+n.width/2,offset:r.x-n.x-n.width/2,snap:"center"},{guide:n.x+n.width,offset:r.x-n.x-n.width,snap:"end"}],horizontal:[{guide:n.y,offset:r.y-n.y,snap:"start"},{guide:n.y+n.height/2,offset:r.y-n.y-n.height/2,snap:"center"},{guide:n.y+n.height,offset:r.y-n.y-n.height,snap:"end"}]}}(e.target),o=id(t,n);if(!o.length)return;i(o);const a=e.target.getAbsolutePosition(),l={...a};o.forEach((e=>{switch(e.snap){case"start":case"center":case"end":switch(e.orientation){case"V":l.x=e.lineGuide+e.offset;break;case"H":l.y=e.lineGuide+e.offset}}}));const s=l.x-a.x,c=l.y-a.y;e.evt.ctrlKey||e.evt.metaKey||e.target.nodes().forEach((e=>{const t=e.getAbsolutePosition();e.setAbsolutePosition({x:t.x+s,y:t.y+c})}))},a=(t,n,o)=>{const a=e.current,l=a.getLayer();if(l.children.find((e=>"line-guides"===e.name())).destroyChildren(),"rotater"===a.getActiveAnchor())return n;if(Math.sqrt(Math.pow(n.x-t.x,2)+Math.pow(n.y-t.y,2))>50)return n;if(!l)return n;var s=id(r(a.nodes()),{vertical:[{guide:n.x,offset:0,snap:"start"}],horizontal:[{guide:n.y,offset:0,snap:"start"}]});if(!s.length)return n;i(s);if(o.ctrlKey||o.metaKey)return n;let c=n.x,u=n.x;s.forEach((e=>{switch(e.orientation){case"V":c=e.lineGuide;break;case"H":u=e.lineGuide}}));const h=Math.abs(n.x-c)<10,d=Math.abs(n.y-u)<10;return h&&!d?{x:c,y:t.y}:d&&!h?{x:t.x,y:u}:h&&d?{x:c,y:u}:n},l=e=>{if(!e.target)return;const t=e.target.getLayer();t.children.find((e=>"line-guides"===e.name())).destroyChildren(),t.batchDraw()};n(f).useEffect((()=>{e.current&&(e.current.anchorDragBoundFunc(a),e.current.on("dragstart",(()=>{setTimeout((()=>{const e=[...pl.DD._dragElements.entries()];e.reverse(),pl.DD._dragElements.clear(),e.forEach((([e,t])=>{pl.DD._dragElements.set(e,t)}))}))})),e.current.on("dragmove",o),e.current.on("dragend",l),e.current.on("transformend",l))}),[])}function ad(e,t,r){const i=e=>e.hasName("element")||e.hasName("line-anchor")||e.hasName("page-background")||e.hasName("elements-area");const o=n=>{n.target.getLayer().children.find((e=>"line-guides"===e.name())).destroyChildren();var r,o=id(function(t){const n=e.current?.getStage();var r=[],o=[];return n.find(i).forEach((e=>{if(!(t.indexOf(e)>=0)){var n=e.getClientRect({skipShadow:!0,skipStroke:!0});e.hasName("line-anchor")&&(n={x:e.absolutePosition().x,y:e.absolutePosition().y,width:0,height:0}),r.push(n.x,n.x+n.width,n.x+n.width/2),o.push(n.y,n.y+n.height,n.y+n.height/2)}})),{vertical:r,horizontal:o}}([n.target,...t.map((e=>e.current))]),{vertical:[{guide:(r=n.target).absolutePosition().x,offset:0,snap:"center"}],horizontal:[{guide:r.absolutePosition().y,offset:0,snap:"center"}]});if(!o.length)return;!function(t){const n=e.current?.getLayer(),r=n?.children.find((e=>"line-guides"===e.name()));t.forEach((e=>{if("H"===e.orientation){var t=new pl.Line({points:[-6e3,e.lineGuide,6e3,e.lineGuide],stroke:"rgb(0, 161, 255)",strokeWidth:1,name:"guid-line",dash:[4,6]});r?.add(t),n.batchDraw()}else"V"===e.orientation&&(t=new pl.Line({points:[e.lineGuide,-6e3,e.lineGuide,6e3],stroke:"rgb(0, 161, 255)",strokeWidth:1,name:"guid-line",dash:[4,6]}),r?.add(t))}))}(o);const a=n.target.getAbsolutePosition(),l={...a};o.forEach((e=>{switch(e.snap){case"start":case"center":case"end":switch(e.orientation){case"V":l.x=e.lineGuide+e.offset;break;case"H":l.y=e.lineGuide+e.offset}}}));const s=l.x-a.x,c=l.y-a.y;if(!(n.evt.ctrlKey||n.evt.metaKey)){const e=n.target.getAbsolutePosition();n.target.absolutePosition({x:e.x+s,y:e.y+c})}},a=e=>{if(!e.target)return;const t=e.target.getLayer();t.children.find((e=>"line-guides"===e.name())).destroyChildren(),t.batchDraw()};n(f).useEffect((()=>{e.current&&(e.current.on("dragmove",o),e.current.on("dragend",a))}),r)}function ld(e,t,n){const r=Math.sqrt(Math.pow(t.x-e.x,2)+Math.pow(t.y-e.y,2)),i=Math.atan2(t.y-e.y,t.x-e.x),o=180*i/Math.PI;return{x:e.x+Math.cos(i-Math.PI/2)*n/2,y:e.y+Math.sin(i-Math.PI/2)*n/2,width:r,height:n,rotation:o}}const sd=(e,t)=>({offsetX:5/e,offsetY:5/e,width:10/e,height:10/e,fill:"white",stroke:"rgb(0, 161, 255)",strokeWidth:2,strokeScaleEnabled:!1,draggable:!0,dragDistance:0,onMouseEnter:e=>{e.target.getStage().container().style.cursor="crosshair"},onMouseLeave:e=>{e.target.getStage().container().style.cursor=""},onDragStart:e=>{t.history.startTransaction()},onDragEnd:e=>{t.history.endTransaction()}}),cd=ei((({element:e,type:t})=>{const n={strokeWidth:e.height,stroke:e.a.color,lineCap:"round",lineJoin:"round",fill:e.a.color,opacity:e.a.opacity};return(0,s.jsxs)(s.Fragment,{children:["arrow"===t&&(0,s.jsx)(As,{points:[3*e.height,2*-e.height,0,0,3*e.height,2*e.height],...n}),"triangle"===t&&(0,s.jsx)(As,{points:[3*e.height,2*-e.height,0,0,3*e.height,2*e.height],closed:!0,...n}),"bar"===t&&(0,s.jsx)(As,{points:[0,2*-e.height,0,2*e.height],closed:!0,...n}),"square"===t&&(0,s.jsx)(As,{points:[0,2*-e.height,4*e.height,2*-e.height,4*e.height,2*e.height,0,2*e.height],closed:!0,...n}),"circle"===t&&(0,s.jsx)("Circle",{x:2*e.height,y:0,radius:2*e.height,...n})]})})),ud=ei((({element:e,store:t})=>{const r=n(f).useRef(null),i=n(f).useRef(null),o=n(f).useRef(null),a=e.selectable||"admin"===t.role,l=Fc(),[c,u]=n(f).useState(!1),h=t.selectedElements.indexOf(e)>=0&&1===t.selectedElements.length,{middleLeft:d,middleRight:p}=function({x:e,y:t,width:n,height:r,rotation:i}){const o=i*Math.PI/180,a={x:e+r/2*Math.cos(o+Math.PI/2),y:t+r/2*Math.sin(o+Math.PI/2)};return{middleLeft:a,middleRight:{x:a.x+n*Math.cos(o),y:a.y+n*Math.sin(o)}}}(e);return ad(i,[r],[h]),ad(o,[r],[h]),(0,s.jsxs)(n(f).Fragment,{children:[(0,s.jsx)(As,{ref:r,name:"element",id:e.id,x:e.a.x,y:e.a.y,points:[0,0,e.width,0],offsetY:-e.height/2,strokeWidth:e.height,hitStrokeWidth:Math.max(e.height,20),dash:e.dash.map((t=>t*e.height)),stroke:e.a.color,rotation:e.a.rotation,opacity:e.animated("opacity"),shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,listening:a,draggable:l?e.draggable&&h:e.draggable,preventDefault:!l||h,hideInExport:!e.showInExport,onMouseEnter:()=>{u(!0)},onMouseLeave:()=>{u(!1)},onDragStart:()=>{t.history.startTransaction()},onDragMove:t=>{e.set({x:t.target.x(),y:t.target.y()})},onDragEnd:n=>{e.set({x:n.target.x(),y:n.target.y()}),t.history.endTransaction()},onTransformStart:()=>{t.history.startTransaction()},onTransform:t=>{const n=t.target.scaleX();t.target.scaleX(1),t.target.scaleY(1),e.set({height:e.height*n,width:e.width*n,x:t.target.x(),y:t.target.y(),rotation:t.target.rotation()})},onTransformEnd:e=>{t.history.endTransaction()}}),(0,s.jsx)(Os,{x:d.x,y:d.y,rotation:e.rotation,children:(0,s.jsx)(cd,{element:e,type:e.startHead})}),(0,s.jsx)(Os,{x:p.x,y:p.y,rotation:e.rotation+180,children:(0,s.jsx)(cd,{element:e,type:e.endHead})}),c&&!h&&(0,s.jsx)(Ic,{element:e}),h&&e.resizable&&(0,s.jsx)(Fs,{selector:".page-abs-container",enabled:!0,children:(0,s.jsxs)(Os,{visible:h,children:[(0,s.jsx)(ks,{x:d.x,y:d.y,ref:i,name:"line-anchor",...sd(t.scale,t),onDragMove:t=>{const n=ld(t.target.position(),p,e.height);e.set({x:n.x,y:n.y,width:n.width,rotation:n.rotation})}}),(0,s.jsx)(ks,{x:p.x,y:p.y,ref:o,name:"line-anchor",...sd(t.scale,t),onDragMove:t=>{const n=ld(d,t.target.position(),e.height);e.set({x:n.x,y:n.y,width:n.width,rotation:n.rotation})}})]})})]})})),hd={text:Yc,image:mu,svg:mu,line:ud,group:ei((e=>{const{element:t,store:n}=e,{children:r}=t,i=t.selectable||"admin"===n.role;return(0,s.jsx)(Os,{opacity:t.opacity,listening:i,children:r.map((t=>(0,f.createElement)(dd,{...e,key:t.id,store:n,element:t})))})}))};const dd=ei((e=>{let t=hd[e.element.type];return"text"===e.element.type&&Mc.htmlRenderEnabled&&(t=ed),e.element.visible?t?(0,s.jsx)(t,{...e}):(console.error("Can not find component for "+e.element.type),null):null}));var fd=dd;function pd(e,t,n="scale"){const r=t.width/t.height;let i,o;r>=e.width/e.height?(i=e.width,o=e.width/r):(i=e.height*r,o=e.height);let a=0,l=0;return"left-top"===n?(a=0,l=0):"left-middle"===n?(a=0,l=(e.height-o)/2):"left-bottom"===n?(a=0,l=e.height-o):"center-top"===n?(a=(e.width-i)/2,l=0):"center-middle"===n?(a=(e.width-i)/2,l=(e.height-o)/2):"center-bottom"===n?(a=(e.width-i)/2,l=e.height-o):"right-top"===n?(a=e.width-i,l=0):"right-middle"===n?(a=e.width-i,l=(e.height-o)/2):"right-bottom"===n?(a=e.width-i,l=e.height-o):"scale"===n?(a=0,l=0,i=e.width,o=e.height):console.error(new Error("Unknown clip position property - "+n)),{cropX:a,cropY:l,cropWidth:i,cropHeight:o}}l("8NFma"),"undefined"!=typeof window&&"undefined"!=typeof document&&l("2j10E");var vd={};e(vd,"show",(()=>jE)),e(vd,"hide",(()=>RE)),e(vd,"isOpen",(()=>VE));
|
|
123
123
|
/*! *****************************************************************************
|
|
124
124
|
Copyright (c) Microsoft Corporation.
|
|
125
125
|
|