polotno 2.25.12 → 2.25.14

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.
Files changed (12) hide show
  1. package/canvas/html-element.js +2 -2
  2. package/canvas/page.js +1 -1
  3. package/canvas/text-element.js +1 -1
  4. package/canvas/use-transformer-snap.d.ts +1 -0
  5. package/canvas/use-transformer-snap.js +1 -1
  6. package/canvas/video-element.js +1 -1
  7. package/package.json +1 -1
  8. package/polotno.bundle.js +74 -74
  9. package/toolbar/html-toolbar.js +1 -1
  10. package/toolbar/text-ai-write.js +1 -1
  11. package/utils/fonts.js +1 -1
  12. package/utils/validate-key.js +1 -1
package/canvas/html-element.js CHANGED
@@ -1,4 +1,4 @@
1
- import t from"react";import{observer as e}from"mobx-react-lite";import{Group as o,Image as n,Rect as i}from"react-konva";import r from"quill";import*as a from"mobx";import{reaction as l}from"mobx";import{flags as s}from"../utils/flags.js";import{applyFilter as c}from"./apply-filters.js";import{getDir as d,getLineHeight as f,useFontLoader as u,usePrevious as h}from"./text-element.js";import{useColor as g}from"./use-color.js";import{detectSize as m,htmlToCanvas as p,isContentWrapping as x}from"../utils/html2canvas.js";import{resetStyleContent as w}from"../utils/reset-style.js";import{useFadeIn as b}from"./use-fadein.js";import{Html as y}from"react-konva-utils";import v from"../utils/styled.js";import{incrementLoader as E,triggerLoadError as S}from"../utils/loader.js";import{removeTags as k,sanitizeHtml as z}from"../utils/text.js";import*as F from"../utils/fonts.js";import{isTouchDevice as O}from"../utils/screen.js";import{getLimitedFontSize as R}from"./text-element/max-font-size.js";import{useDelayer as $}from"./use-delayer.js";function C(t){const e=(t||"").trim();if("<p><br></p>"===e||"<p></p>"===e){return""}if(e.startsWith("<p>")&&e.endsWith("</p>")){const t=e.slice(3,-4);if(!/(<\/?(p|div|h[1-6]|ul|ol|li|table|thead|tbody|tr|td|blockquote)\b)/i.test(t)){return t}}return t}export const quillRef=a.observable({enabled:!1,currentFormat:{},editor:a.observable.object({instance:null},{},{deep:!1})});const j=v("div",t.forwardRef)`
1
+ import t from"react";import{observer as e}from"mobx-react-lite";import{Group as o,Image as n,Rect as i}from"react-konva";import r from"quill";import*as a from"mobx";import{reaction as l}from"mobx";import{flags as s}from"../utils/flags.js";import{applyFilter as c}from"./apply-filters.js";import{getDir as d,getLineHeight as f,useFontLoader as u,usePrevious as h}from"./text-element.js";import{useColor as g}from"./use-color.js";import{detectSize as m,htmlToCanvas as p,isContentWrapping as x}from"../utils/html2canvas.js";import{resetStyleContent as w}from"../utils/reset-style.js";import{useFadeIn as b}from"./use-fadein.js";import{Html as y}from"react-konva-utils";import v from"../utils/styled.js";import{incrementLoader as S,triggerLoadError as E}from"../utils/loader.js";import{removeTags as k,sanitizeHtml as z}from"../utils/text.js";import*as F from"../utils/fonts.js";import{isTouchDevice as O}from"../utils/screen.js";import{getLimitedFontSize as R}from"./text-element/max-font-size.js";import{useDelayer as $}from"./use-delayer.js";function C(t){const e=(t||"").trim();if("<p><br></p>"===e||"<p></p>"===e){return""}if(e.startsWith("<p>")&&e.endsWith("</p>")){const t=e.slice(3,-4);if(!/(<\/?(p|div|h[1-6]|ul|ol|li|table|thead|tbody|tr|td|blockquote)\b)/i.test(t)){return t}}return t}export const quillRef=a.observable({enabled:!1,currentFormat:{},editor:a.observable.object({instance:null},{},{deep:!1})});const j=v("div",t.forwardRef)`
2
2
  .ql-editor {
3
3
  outline: none;
4
4
  }
@@ -12,4 +12,4 @@ import t from"react";import{observer as e}from"mobx-react-lite";import{Group as
12
12
  .ql-direction-rtl {
13
13
  direction: rtl;
14
14
  }
15
- `;let T=["bold","color","font","italic","size","strike","underline","indent","list","direction"];export const setQuillFormats=t=>{T=t};export const createQuill=t=>new r(t,{toolbar:!1,keyboard:!1,clipboard:{matchVisual:!1},formats:T});export const setQuillContent=(t,e)=>{var o=t.clipboard.convert("<div class='ql-editor' style='outline: none;'>"+e+"<p><br></p></div>");t.setContents(o),t.history.clear()};const M=({html:e,onBlur:o,onChange:n,element:i,clickCoords:s})=>{const c=t.useRef(null);t.useEffect(()=>{if(!c.current){return}const t=(i=c.current,new r(i,{toolbar:!1,keyboard:!1,clipboard:{matchVisual:!1},formats:T}));var i;return a.runInAction(()=>{quillRef.editor.instance=t}),window.__polotnoQuill=t,t.on("text-change",()=>{t.getSelection()&&a.runInAction(()=>{quillRef.currentFormat=t.getFormat()}),setTimeout(()=>{var t;const e=(null===(t=c.current)||void 0===t?void 0:t.childNodes[0]).innerHTML;n(C(e))},10)}),setQuillContent(t,e),s?setCursorFromCoords(t,s):t.setSelection(0,0,"api"),t.on("selection-change",(e,o,n)=>{e&&a.runInAction(()=>{quillRef.currentFormat=t.getFormat()})}),c.current.childNodes[0].addEventListener("blur",t=>{var e;if(null===(e=t.relatedTarget)||void 0===e?void 0:e.classList.contains("ql-clipboard")){return}const n=function(t){return!!t&&!!t.closest(".sketch-picker")}(t.relatedTarget);n||o()}),()=>{a.runInAction(()=>{quillRef.editor.instance=null,quillRef.currentFormat={}}),delete window.__polotnoQuill}},[]),t.useEffect(()=>l(()=>i.text,()=>{var t;const o=quillRef.editor.instance;if(!o){return}const n=o.getSelection();C(null===(t=c.current)||void 0===t?void 0:t.childNodes[0].innerHTML)===i.text||(setQuillContent(o,e),n&&(o.setSelection(n.index,n.length),a.runInAction(()=>{quillRef.currentFormat=o.getFormat()})))},{fireImmediately:!0}),[]),t.useEffect(()=>{window.addEventListener("blur",o);const t=t=>{var e;(null===(e=c.current)||void 0===e?void 0:e.contains(t.target))||o()};return window.addEventListener("touchstart",t),()=>{window.removeEventListener("blur",o),window.removeEventListener("touchstart",t)}},[]);const f={color:i.fill};return i.fill.indexOf("gradient")>=0&&(f.backgroundColor=i.fill,f.backgroundImage=i.fill,f.backgroundSize="100% 100%",f.backgroundRepeat="repeat",f.webkitBackgroundClip="text",f.MozBackgroundClip="text",f.WebkitTextFillColor="transparent",f.MozTextFillColor="transparent"),t.createElement(j,{ref:c,style:Object.assign(Object.assign({},f),{fontSize:i.fontSize,fontWeight:i.fontWeight,textTransform:i.textTransform,width:i.a.width,fontFamily:'"'+i.fontFamily+'"',lineHeight:i.lineHeight,letterSpacing:i.letterSpacing*i.fontSize+"px",textAlign:i.align,opacity:Math.max(i.a.opacity,.2),textShadow:i.shadowEnabled?`${i.shadowOffsetX}px ${i.shadowOffsetY}px ${i.shadowBlur}px ${i.shadowColor}`:void 0}),dir:d(k(i.text))})};function X(t){return!function(t){const e=t.getContext("2d").getImageData(0,0,t.width,t.height).data;for(let o=0;o<e.length;o+=4){if(0!==e[o+3]){return!0}}return!1}(t)}function Y(t,{fontFamily:e="",color:o="black"}={}){let n=`color: ${o||t.fill}`;return t.fill.indexOf("gradient")>=0&&(n=`\n background-color: ${o};\n background-image: ${t.fill};\n background-size: 100% 100%;\n background-repeat: repeat;\n -webkit-background-clip: text;\n -moz-background-clip: text;\n -webkit-text-fill-color: transparent;\n -moz-text-fill-color: transparent;\n `),`<div style="${["white-space: pre-wrap",`width: ${Math.round(t.width||100)}px`,n,`font-size: ${t.fontSize}px`,`font-family: '${e}'`,`text-align: ${t.align}`,`text-transform: ${t.textTransform}`,t.textDecoration?`text-decoration: ${t.textDecoration}; text-decoration-color: ${o||t.fill}; text-decoration-layer: over`:"",t.lineHeight?`line-height: ${t.lineHeight}`:"",t.letterSpacing?`letter-spacing: ${t.letterSpacing*t.fontSize}px`:"",t.fontStyle?`font-style: ${t.fontStyle}`:"",t.fontWeight?`font-weight: ${t.fontWeight}`:"",t.strokeWidth?`-webkit-text-stroke: ${t.strokeWidth}px ${t.stroke}`:"",t.strokeWidth?"paint-order: stroke fill":""].filter(Boolean).join("; ")}" contentEditable dir="${d(k(t.text))}">${z(t.text).replace(/\n/g,"</br>")}</div>`}const A=/^((?!chrome|android).)*safari/i.test(navigator.userAgent);export const HTMLElement=e(({element:e,store:r})=>{const l=t.useRef(null),[d,w]=t.useState(),[v,z]=t.useState(!1),[C,T]=t.useState(!1),q=t.useRef(e.height),I=r.selectedShapes.indexOf(e)>=0&&e.selectable,P=e.fontSize/3,{textVerticalResizeEnabled:W}=s,B=h(e.fontFamily),[H]=u(r,e.fontFamily),L=e._editModeEnabled;b(l);const _=H?e.fontFamily:B!==e.fontFamily?B:"Arial",D=g(e).fill,N=Y(e,{fontFamily:_,color:D}),{width:Q,height:V}=function(e,o,n){return t.useMemo(()=>m(e),[e,o.width,n])}(N,e,H);t.useEffect(()=>{if(!H){return}if(!e.height){return void r.history.ignore(()=>{e.set({height:V})})}const{textOverflow:t}=s;if("change-font-size"!==t||v){"resize"===t&&(W&&e.height<V&&r.history.ignore(()=>{e.set({height:V})}),W||e.height===V||r.history.ignore(()=>{e.set({height:V})}))}else{const t=(t=>{let e=t.fontSize;for(let o=1;o<50;o++){const o=Y(Object.assign(Object.assign({},t.toJSON()),{fontSize:e}),{fontFamily:t.fontFamily}),{height:n}=m(o),i=t.height&&n>t.height,r=x({html:o});if(!i&&!r){break}e-=.5}return e})(e);t!==e.fontSize?r.history.ignore(()=>{e.set({fontSize:t})}):e.height!==V&&(W&&e.height<V?r.history.ignore(()=>{e.set({height:V})}):W||r.history.ignore(()=>{e.set({height:V})}))}});const J=t.useMemo(()=>{const t={lastArgs:null,lastResult:null};return async function(e){return t.lastArgs&&t.lastResult&&(o=t.lastArgs,n=e,JSON.stringify(o)===JSON.stringify(n))||(t.lastResult=await p(e),t.lastArgs=Object.assign({},e)),t.lastResult;var o,n}},[]),G=t.useRef(0),K=t.useRef(null);t.useEffect(()=>{v||L||(async()=>{G.current++;const t=G.current;let o=E(`text ${e.id} ${t}`);K.current&&K.current(),K.current=o,T(!0);let n=null;const i=A?5:1;for(let l=0;l<i;l++){const o=l>0?J:p;try{if(n=await o({skipCache:l>0,html:N,width:e.width||1,height:e.height||V||1,fontFamily:_,padding:P,pixelRatio:r._elementsPixelRatio,font:r.fonts.find(t=>t.fontFamily===_)||F.globalFonts.find(t=>t.fontFamily===_)}),t!==G.current){return}if(A&&X(n)){await new Promise(t=>setTimeout(t,50*(l+1)));continue}break}catch(a){console.error(a),S(`Error rendering rich text with id ${e.id}`);break}}n?w(n):o?(o(),o=null):console.error("Finish function is called twice!"),T(!1)})()},[N,v,V,L,_,e.height,r._elementsPixelRatio,H]);const[U,Z]=$(C,300),[tt]=$(v,300,!0),et=tt||U;t.useEffect(()=>{var t;if(!et){return a.autorun(()=>{const t=l.current;c(t,e)})}null===(t=l.current)||void 0===t||t.clearCache()},[d,et,e.shadowColor,e.shadowOffsetX,e.shadowOffsetY,e.shadowOpacity]),t.useEffect(()=>{d&&!C&&K.current&&(K.current(),K.current=null)},[d,C]),t.useEffect(()=>()=>{K.current&&K.current()},[]),t.useEffect(()=>{I||""!==k(e.text)||!e.removable||e.placeholder||r.deleteElements([e.id])},[I]);let ot=0;"middle"===e.verticalAlign&&(ot=(e.height-V)/2),"bottom"===e.verticalAlign&&(ot=e.height-V);const nt=f({fontLoaded:H,fontFamily:e.fontFamily,fontSize:e.fontSize,lineHeight:e.lineHeight}),it=O(),rt=t.useRef(null),at=t.useRef(null),lt=L&&e.strokeWidth>0;return t.createElement(t.Fragment,null,t.createElement(i,{x:e.a.x,y:e.a.y,offsetX:e.backgroundPadding*(e.fontSize*nt*.5),offsetY:e.backgroundPadding*(e.fontSize*nt*.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*nt),height:e.a.height+e.backgroundPadding*(e.fontSize*nt),cornerRadius:e.backgroundCornerRadius*(e.fontSize*nt*.5)}),t.createElement(i,{ref:l,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:!et,draggable:it?e.draggable&&I:e.draggable,preventDefault:!it||I,opacity:L?0:e.a.opacity,hideInExport:!e.showInExport,onDragMove:t=>{e.set({x:t.target.x(),y:t.target.y()})},onDragEnd:t=>{e.set({x:t.target.x(),y:t.target.y()})},id:e.id,onDblClick:t=>{e.contentEditable&&(at.current={x:t.evt.clientX,y:t.evt.clientY},e.toggleEditMode(!0))},onDblTap:t=>{var o;if(e.contentEditable){const n=null===(o=t.evt.changedTouches)||void 0===o?void 0:o[0];at.current=n?{x:n.clientX,y:n.clientY}:null,e.toggleEditMode(!0)}},onTransformStart:t=>{z(!0),q.current=e.height},onTransform:t=>{var o;const n=t.target,i=(null===(o=n.getStage())||void 0===o?void 0:o.findOne("Transformer")).getActiveAnchor(),r="middle-left"===i||"middle-right"===i,a="top-center"===i||"bottom-center"===i,l=n.scaleX();if(r){const t=n.scaleX(),o=n.width()*t,i=e.fontSize;let r=o;if(o<i&&(r=i,rt.current&&n.position(rt.current)),n.width(r),n.scaleX(1),s.textVerticalResizeEnabled){const t=Math.max(V,q.current);e.set({height:t})}e.set({width:n.width(),x:n.x(),y:n.y()})}else if(a){let o="resize"===s.textOverflow?V:e.lineHeight*e.fontSize;const i=Math.max(o,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,letterSpacing:e.letterSpacing,width:n.width()*l,x:n.x(),y:n.y(),rotation:n.rotation(),height:n.height()*l})}rt.current=t.target.position()},onTransformEnd:t=>{z(!1),T(!0);const o=t.target.scaleX();t.target.scaleX(1),t.target.scaleY(1),e.set({fontSize:e.fontSize*o,width:t.target.width()*o,x:t.target.x(),y:t.target.y(),rotation:t.target.rotation(),shadowBlur:e.shadowBlur*o,shadowOffsetX:e.shadowOffsetX*o,shadowOffsetY:e.shadowOffsetY*o,strokeWidth:e.strokeWidth*o})}}),t.createElement(n,{ref:l,image:d,x:e.a.x,y:e.a.y,offsetX:P,offsetY:P-ot,listening:!1,rotation:e.a.rotation,width:e.a.width+2*P,height:(e.a.width+2*P)*((null==d?void 0:d.height)/(null==d?void 0:d.width)||1),visible:!et&&!L,opacity:e.a.opacity,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,hideInExport:!e.showInExport,editModeEnabled:e._editModeEnabled||v||et}),(et||lt)&&t.createElement(o,{x:e.a.x,y:e.a.y,rotation:e.a.rotation,offsetY:-ot},t.createElement(y,{divProps:{style:{pointerEvents:"none"}}},t.createElement(j,{dangerouslySetInnerHTML:{__html:N},style:{pointerEvents:"none",opacity:e.a.opacity,textShadow:e.shadowEnabled?`${e.shadowOffsetX}px ${e.shadowOffsetY}px ${e.shadowBlur}px ${e.shadowColor}`:void 0}}))),L&&t.createElement(o,{x:e.a.x,y:e.a.y,rotation:e.a.rotation,offsetY:-ot},t.createElement(y,null,t.createElement(M,{html:N,element:e,onChange:t=>{const o=R({oldText:k(e.text),newText:k(t),element:e});e.set({text:t,fontSize:o})},onBlur:t=>{e.toggleEditMode(!1),Z(!0)},clickCoords:at.current}))))});export function setCursorFromCoords(t,e){if(!t||!e){return}const{x:o,y:n}=e;try{let e=null;if(document.caretRangeFromPoint){e=document.caretRangeFromPoint(o,n)}else if(document.caretPositionFromPoint){const t=document.caretPositionFromPoint(o,n);t&&(e=document.createRange(),e.setStart(t.offsetNode,t.offset))}if(e){const o=r.find(e.startContainer,!0);if(o){const n=o.offset(t.scroll)+e.startOffset;return void t.setSelection(n,0,"api")}}}catch(i){}t.setSelection(0,0,"api")}
15
+ `;let T=["bold","color","font","italic","size","strike","underline","indent","list","direction"];export const setQuillFormats=t=>{T=t};export const createQuill=t=>new r(t,{toolbar:!1,keyboard:!1,clipboard:{matchVisual:!1},formats:T});export const setQuillContent=(t,e)=>{var o=t.clipboard.convert("<div class='ql-editor' style='outline: none;'>"+e+"<p><br></p></div>");t.setContents(o),t.history.clear()};const M=({html:e,onBlur:o,onChange:n,element:i,clickCoords:s})=>{const c=t.useRef(null);t.useEffect(()=>{if(!c.current){return}const t=(i=c.current,new r(i,{toolbar:!1,keyboard:!1,clipboard:{matchVisual:!1},formats:T}));var i;return a.runInAction(()=>{quillRef.editor.instance=t}),window.__polotnoQuill=t,t.on("text-change",()=>{t.getSelection()&&a.runInAction(()=>{quillRef.currentFormat=t.getFormat(t.getSelection())}),setTimeout(()=>{var t;const e=(null===(t=c.current)||void 0===t?void 0:t.childNodes[0]).innerHTML;n(C(e))},10)}),setQuillContent(t,e),s?setCursorFromCoords(t,s):t.setSelection(0,0,"api"),t.on("selection-change",(e,o,n)=>{e&&a.runInAction(()=>{quillRef.currentFormat=t.getFormat(t.getSelection())})}),c.current.childNodes[0].addEventListener("blur",t=>{var e;if(null===(e=t.relatedTarget)||void 0===e?void 0:e.classList.contains("ql-clipboard")){return}const n=function(t){return!!t&&!!t.closest(".sketch-picker")}(t.relatedTarget);n||o()}),()=>{a.runInAction(()=>{quillRef.editor.instance=null,quillRef.currentFormat={}}),delete window.__polotnoQuill}},[]),t.useEffect(()=>l(()=>i.text,()=>{var t;const o=quillRef.editor.instance;if(!o){return}const n=o.getSelection();C(null===(t=c.current)||void 0===t?void 0:t.childNodes[0].innerHTML)===i.text||(setQuillContent(o,e),n&&(o.setSelection(n.index,n.length),a.runInAction(()=>{quillRef.currentFormat=o.getFormat(o.getSelection())})))},{fireImmediately:!0}),[]),t.useEffect(()=>{window.addEventListener("blur",o);const t=t=>{var e;(null===(e=c.current)||void 0===e?void 0:e.contains(t.target))||o()};return window.addEventListener("touchstart",t),()=>{window.removeEventListener("blur",o),window.removeEventListener("touchstart",t)}},[]);const f={color:i.fill};return i.fill.indexOf("gradient")>=0&&(f.backgroundColor=i.fill,f.backgroundImage=i.fill,f.backgroundSize="100% 100%",f.backgroundRepeat="repeat",f.webkitBackgroundClip="text",f.MozBackgroundClip="text",f.WebkitTextFillColor="transparent",f.MozTextFillColor="transparent"),t.createElement(j,{ref:c,style:Object.assign(Object.assign({},f),{fontSize:i.fontSize,fontWeight:i.fontWeight,textTransform:i.textTransform,width:i.a.width,fontFamily:'"'+i.fontFamily+'"',lineHeight:i.lineHeight,letterSpacing:i.letterSpacing*i.fontSize+"px",textAlign:i.align,opacity:Math.max(i.a.opacity,.2),textShadow:i.shadowEnabled?`${i.shadowOffsetX}px ${i.shadowOffsetY}px ${i.shadowBlur}px ${i.shadowColor}`:void 0}),dir:d(k(i.text))})};function X(t){return!function(t){const e=t.getContext("2d").getImageData(0,0,t.width,t.height).data;for(let o=0;o<e.length;o+=4){if(0!==e[o+3]){return!0}}return!1}(t)}function Y(t,{fontFamily:e="",color:o="black"}={}){let n=`color: ${o||t.fill}`;return t.fill.indexOf("gradient")>=0&&(n=`\n background-color: ${o};\n background-image: ${t.fill};\n background-size: 100% 100%;\n background-repeat: repeat;\n -webkit-background-clip: text;\n -moz-background-clip: text;\n -webkit-text-fill-color: transparent;\n -moz-text-fill-color: transparent;\n `),`<div style="${["white-space: pre-wrap",`width: ${Math.round(t.width||100)}px`,n,`font-size: ${t.fontSize}px`,`font-family: '${e}'`,`text-align: ${t.align}`,`text-transform: ${t.textTransform}`,t.textDecoration?`text-decoration: ${t.textDecoration}; text-decoration-color: ${o||t.fill}; text-decoration-layer: over`:"",t.lineHeight?`line-height: ${t.lineHeight}`:"",t.letterSpacing?`letter-spacing: ${t.letterSpacing*t.fontSize}px`:"",t.fontStyle?`font-style: ${t.fontStyle}`:"",t.fontWeight?`font-weight: ${t.fontWeight}`:"",t.strokeWidth?`-webkit-text-stroke: ${t.strokeWidth}px ${t.stroke}`:"",t.strokeWidth?"paint-order: stroke fill":""].filter(Boolean).join("; ")}" contentEditable dir="${d(k(t.text))}">${z(t.text).replace(/\n/g,"</br>")}</div>`}const A=/^((?!chrome|android).)*safari/i.test(navigator.userAgent);export const HTMLElement=e(({element:e,store:r})=>{const l=t.useRef(null),[d,w]=t.useState(),[v,z]=t.useState(!1),[C,T]=t.useState(!1),q=t.useRef(e.height),I=r.selectedShapes.indexOf(e)>=0&&e.selectable,P=e.fontSize/3,{textVerticalResizeEnabled:W}=s,B=h(e.fontFamily),[H]=u(r,e.fontFamily),L=e._editModeEnabled;b(l);const _=H?e.fontFamily:B!==e.fontFamily?B:"Arial",D=g(e).fill,N=Y(e,{fontFamily:_,color:D}),{width:Q,height:V}=function(e,o,n){return t.useMemo(()=>m(e),[e,o.width,n])}(N,e,H);t.useEffect(()=>{if(!H){return}if(!e.height){return void r.history.ignore(()=>{e.set({height:V})})}const{textOverflow:t}=s;if("change-font-size"!==t||v){"resize"===t&&(W&&e.height<V&&r.history.ignore(()=>{e.set({height:V})}),W||e.height===V||r.history.ignore(()=>{e.set({height:V})}))}else{const t=(t=>{let e=t.fontSize;for(let o=1;o<50;o++){const o=Y(Object.assign(Object.assign({},t.toJSON()),{fontSize:e}),{fontFamily:t.fontFamily}),{height:n}=m(o),i=t.height&&n>t.height,r=x({html:o});if(!i&&!r){break}e-=.5}return e})(e);t!==e.fontSize?r.history.ignore(()=>{e.set({fontSize:t})}):e.height!==V&&(W&&e.height<V?r.history.ignore(()=>{e.set({height:V})}):W||r.history.ignore(()=>{e.set({height:V})}))}});const J=t.useMemo(()=>{const t={lastArgs:null,lastResult:null};return async function(e){return t.lastArgs&&t.lastResult&&(o=t.lastArgs,n=e,JSON.stringify(o)===JSON.stringify(n))||(t.lastResult=await p(e),t.lastArgs=Object.assign({},e)),t.lastResult;var o,n}},[]),G=t.useRef(0),K=t.useRef(null);t.useEffect(()=>{v||L||(async()=>{G.current++;const t=G.current;let o=S(`text ${e.id} ${t}`);K.current&&K.current(),K.current=o,T(!0);let n=null;const i=A?5:1;for(let l=0;l<i;l++){const o=l>0?J:p;try{if(n=await o({skipCache:l>0,html:N,width:e.width||1,height:e.height||V||1,fontFamily:_,padding:P,pixelRatio:r._elementsPixelRatio,font:r.fonts.find(t=>t.fontFamily===_)||F.globalFonts.find(t=>t.fontFamily===_)}),t!==G.current){return}if(A&&X(n)){await new Promise(t=>setTimeout(t,50*(l+1)));continue}break}catch(a){console.error(a),E(`Error rendering rich text with id ${e.id}`);break}}n?w(n):o?(o(),o=null):console.error("Finish function is called twice!"),T(!1)})()},[N,v,V,L,_,e.height,r._elementsPixelRatio,H]);const[U,Z]=$(C,300),[tt]=$(v,300,!0),et=tt||U;t.useEffect(()=>{var t;if(!et){return a.autorun(()=>{const t=l.current;c(t,e)})}null===(t=l.current)||void 0===t||t.clearCache()},[d,et,e.shadowColor,e.shadowOffsetX,e.shadowOffsetY,e.shadowOpacity]),t.useEffect(()=>{d&&!C&&K.current&&(K.current(),K.current=null)},[d,C]),t.useEffect(()=>()=>{K.current&&K.current()},[]),t.useEffect(()=>{I||""!==k(e.text)||!e.removable||e.placeholder||r.deleteElements([e.id])},[I]);let ot=0;"middle"===e.verticalAlign&&(ot=(e.height-V)/2),"bottom"===e.verticalAlign&&(ot=e.height-V);const nt=f({fontLoaded:H,fontFamily:e.fontFamily,fontSize:e.fontSize,lineHeight:e.lineHeight}),it=O(),rt=t.useRef(null),at=t.useRef(null),lt=L&&e.strokeWidth>0;return t.createElement(t.Fragment,null,t.createElement(i,{x:e.a.x,y:e.a.y,offsetX:e.backgroundPadding*(e.fontSize*nt*.5),offsetY:e.backgroundPadding*(e.fontSize*nt*.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*nt),height:e.a.height+e.backgroundPadding*(e.fontSize*nt),cornerRadius:e.backgroundCornerRadius*(e.fontSize*nt*.5)}),t.createElement(i,{ref:l,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:!et,draggable:it?e.draggable&&I:e.draggable,preventDefault:!it||I,opacity:L?0:e.a.opacity,hideInExport:!e.showInExport,onDragMove:t=>{e.set({x:t.target.x(),y:t.target.y()})},onDragEnd:t=>{e.set({x:t.target.x(),y:t.target.y()})},id:e.id,onDblClick:t=>{e.contentEditable&&(at.current={x:t.evt.clientX,y:t.evt.clientY},e.toggleEditMode(!0))},onDblTap:t=>{var o;if(e.contentEditable){const n=null===(o=t.evt.changedTouches)||void 0===o?void 0:o[0];at.current=n?{x:n.clientX,y:n.clientY}:null,e.toggleEditMode(!0)}},onTransformStart:t=>{z(!0),q.current=e.height},onTransform:t=>{var o;const n=t.target,i=(null===(o=n.getStage())||void 0===o?void 0:o.findOne("Transformer")).getActiveAnchor(),r="middle-left"===i||"middle-right"===i,a="top-center"===i||"bottom-center"===i,l=n.scaleX();if(r){const t=n.scaleX(),o=n.width()*t,i=e.fontSize;let r=o;if(o<i&&(r=i,rt.current&&n.position(rt.current)),n.width(r),n.scaleX(1),s.textVerticalResizeEnabled){const t=Math.max(V,q.current);e.set({height:t})}e.set({width:n.width(),x:n.x(),y:n.y()})}else if(a){let o="resize"===s.textOverflow?V:e.lineHeight*e.fontSize;const i=Math.max(o,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,letterSpacing:e.letterSpacing,width:n.width()*l,x:n.x(),y:n.y(),rotation:n.rotation(),height:n.height()*l})}rt.current=t.target.position()},onTransformEnd:t=>{z(!1),T(!0);const o=t.target.scaleX();t.target.scaleX(1),t.target.scaleY(1),e.set({fontSize:e.fontSize*o,width:t.target.width()*o,x:t.target.x(),y:t.target.y(),rotation:t.target.rotation(),shadowBlur:e.shadowBlur*o,shadowOffsetX:e.shadowOffsetX*o,shadowOffsetY:e.shadowOffsetY*o,strokeWidth:e.strokeWidth*o})}}),t.createElement(n,{ref:l,image:d,x:e.a.x,y:e.a.y,offsetX:P,offsetY:P-ot,listening:!1,rotation:e.a.rotation,width:e.a.width+2*P,height:(e.a.width+2*P)*((null==d?void 0:d.height)/(null==d?void 0:d.width)||1),visible:!et&&!L,opacity:e.a.opacity,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,hideInExport:!e.showInExport,editModeEnabled:e._editModeEnabled||v||et}),(et||lt)&&t.createElement(o,{x:e.a.x,y:e.a.y,rotation:e.a.rotation,offsetY:-ot},t.createElement(y,{divProps:{style:{pointerEvents:"none"}}},t.createElement(j,{dangerouslySetInnerHTML:{__html:N},style:{pointerEvents:"none",opacity:e.a.opacity,textShadow:e.shadowEnabled?`${e.shadowOffsetX}px ${e.shadowOffsetY}px ${e.shadowBlur}px ${e.shadowColor}`:void 0}}))),L&&t.createElement(o,{x:e.a.x,y:e.a.y,rotation:e.a.rotation,offsetY:-ot},t.createElement(y,null,t.createElement(M,{html:N,element:e,onChange:t=>{const o=R({oldText:k(e.text),newText:k(t),element:e});e.set({text:t,fontSize:o})},onBlur:t=>{e.toggleEditMode(!1),Z(!0)},clickCoords:at.current}))))});export function setCursorFromCoords(t,e){if(!t||!e){return}const{x:o,y:n}=e;try{let e=null;if(document.caretRangeFromPoint){e=document.caretRangeFromPoint(o,n)}else if(document.caretPositionFromPoint){const t=document.caretPositionFromPoint(o,n);t&&(e=document.createRange(),e.setStart(t.offsetNode,t.offset))}if(e){const o=r.find(e.startContainer,!0);if(o){const n=o.offset(t.scroll)+e.startOffset;return void t.setSelection(n,0,"api")}}}catch(i){}t.setSelection(0,0,"api")}
package/canvas/page.js CHANGED
@@ -1 +1 @@
1
- var e=this&&this.__rest||function(e,t){var n={};for(var i in e){Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i])}if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(i=Object.getOwnPropertySymbols(e);o<i.length;o++){t.indexOf(i[o])<0&&Object.prototype.propertyIsEnumerable.call(e,i[o])&&(n[i[o]]=e[i[o]])}}return n};import t from"react";import{observer as n,useLocalObservable as i}from"mobx-react-lite";import{action as o,runInAction as r}from"mobx";import{Group as l,Image as a,Label as s,Layer as c,Line as d,Rect as m,Stage as h,Tag as g,Text as u,Transformer as p}from"react-konva";import f from"use-image";import x from"konva";import b from"./element.js";import{useSnap as v}from"./use-transformer-snap.js";import{useImageLoader as E}from"./image-element.js";import{getCrop as y}from"../utils/crop.js";import{isCreditVisible as w,___ as k}from"../utils/validate-key.js";import{getClientRect as Y,getTotalClientRect as S}from"../utils/math.js";import{pxToUnitRounded as X,pxToUnitString as C}from"../utils/unit.js";import{flags as A}from"../utils/flags.js";import{isTouchDevice as O}from"../utils/screen.js";import{useColor as D}from"./use-color.js";import{isGradient as P}from"../utils/gradient.js";import{Html as L}from"react-konva-utils";const R=x.DD._drag;window.removeEventListener("mousemove",R),x.DD._drag=function(e){r(()=>{R.call(this,e)})},window.addEventListener("mousemove",x.DD._drag);const M=new x.Group,j=20;M.add(new x.Rect({width:j,height:j,fill:"white"})),M.add(new x.Path({scaleX:j/24,scaleY:j/24,data:"M4.98313549,11.0001422 C5.49589839,10.9914935 5.92501998,11.3703506 5.99116425,11.8666444 L5.99985778,11.9831355 L6.00348884,12.2068855 C6.11245031,15.4321748 8.76323537,17.9999971 11.9999971,17.9999971 C12.1869612,17.9999971 12.3726725,17.9914753 12.5567465,17.9745765 L12.2928932,17.7071068 C11.9023689,17.3165825 11.9023689,16.6834175 12.2928932,16.2928932 C12.6834175,15.9023689 13.3165825,15.9023689 13.7071068,16.2928932 L15.7071068,18.2928932 C16.0976311,18.6834175 16.0976311,19.3165825 15.7071068,19.7071068 L13.7071068,21.7071068 C13.3165825,22.0976311 12.6834175,22.0976311 12.2928932,21.7071068 C11.9023689,21.3165825 11.9023689,20.6834175 12.2928932,20.2928932 L12.6111505,19.9769552 C12.4086045,19.9922816 12.2047796,19.9999971 11.9999971,19.9999971 C7.7687005,19.9999971 4.28886152,16.7094374 4.01666425,12.5105203 L4.00420123,12.2575143 L4.00014222,12.0168645 C3.9908282,11.4646583 4.43092928,11.0094562 4.98313549,11.0001422 Z M11.7071068,2.29289322 C12.0675907,2.65337718 12.0953203,3.22060824 11.7902954,3.61289944 L11.7071068,3.70710678 L11.3891629,4.0230186 C11.5916051,4.00770767 11.7953244,4 12,4 C16.418278,4 20,7.581722 20,12 C20,12.5522847 19.5522847,13 19,13 C18.4477153,13 18,12.5522847 18,12 C18,8.6862915 15.3137085,6 12,6 C11.8129339,6 11.6271216,6.00853145 11.4429483,6.02544919 L11.7071068,6.29289322 C12.0976311,6.68341751 12.0976311,7.31658249 11.7071068,7.70710678 C11.3466228,8.06759074 10.7793918,8.09532028 10.3871006,7.79029539 L10.2928932,7.70710678 L8.29289322,5.70710678 C7.93240926,5.34662282 7.90467972,4.77939176 8.20970461,4.38710056 L8.29289322,4.29289322 L10.2928932,2.29289322 C10.6834175,1.90236893 11.3165825,1.90236893 11.7071068,2.29289322 Z",fill:"black"}));const I=M.toCanvas({pixelRatio:2,width:j,height:j}),T={enabledAnchors:["top-left","top-center","top-right","middle-left","bottom-left","bottom-right","bottom-center","middle-right"],borderEnabled:!0,rotateEnabled:!0,rotationSnaps:[0,45,90,135,180,225,270,315],ignoreStroke:!0,flipEnabled:!1,anchorStrokeWidth:2,borderStrokeWidth:2,rotateAnchorOffset:30,anchorStyleFunc:e=>{if(e.hasName("rotater")){const t=20;e.setAttrs({width:t,height:t,cornerRadius:t/2,offsetX:t/2,offsetY:t/2,fillPatternImage:I,fillPatternScaleX:t/j/2,fillPatternScaleY:t/j/2,fillPriority:"pattern",fillPatternRepeat:"no-repeat"})}}};export const setTransformerStyle=e=>{Object.assign(T,e)};const W={text:{enabledAnchors:["top-left","top-right","middle-left","bottom-left","bottom-right","middle-right"]},svg:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]},gif:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]},line:{enabledAnchors:[],borderEnabled:!1,rotateEnabled:!1},image:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]},many:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]},group:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]}};export function registerTransformerAttrs(e,t){W[e]=W[e]||t,Object.assign(W[e],t)}const B=e=>t.createElement(m,Object.assign({},e,{preventDefault:!1})),F=n=>{var{url:i}=n,o=e(n,["url"]);const[r,l]=f(i,"anonymous"),s=r?y(r,{width:o.width,height:o.height},"center-middle"):{};return E(l,i,"page background"),t.createElement(a,Object.assign({image:r},o,s))},_=e=>{const n=D({fill:e.fill,a:{width:e.width,height:e.height}});return t.createElement(m,Object.assign({},e,n))},G=n=>{const{background:i,scale:o,borderColor:r}=n,l=e(n,["background","scale","borderColor"]),a=t.useMemo(()=>!!x.Util.colorToRGBA(i)||P(i),[i]),s=t.useMemo(()=>{const e=document.createElement("canvas"),t=30;e.width=60,e.height=60;const n=e.getContext("2d");return n&&(n.fillStyle="black",n.fillRect(t,0,t,t),n.fillRect(0,t,t,t)),e},[]);return t.createElement(t.Fragment,null,t.createElement(m,Object.assign({fillPatternImage:s},l,{opacity:.1,hideInExport:!0})),a?t.createElement(_,Object.assign({fill:i},l)):t.createElement(F,Object.assign({url:i},l)))},z=n(({selection:e,fill:n="rgba(0, 161, 255, 0.3)",stroke:i="rgb(0, 161, 255)",strokeWidth:o=1})=>e.visible?t.createElement(m,{name:"selection",x:Math.min(e.x1,e.x2),y:Math.min(e.y1,e.y2),width:Math.abs(e.x1-e.x2),height:Math.abs(e.y1-e.y2),fill:n,stroke:i,strokeWidth:o}):null),N=n(({x:e,y:n,width:i,height:o,rotation:r,anchor:l,store:a,tagFill:c,textFill:d})=>{const m=Y({x:e,y:n,width:i,height:o,rotation:x.Util.radToDeg(r)});if(void 0===l){return null}const h=(o/2+70)*Math.cos(r-Math.PI/2),p=(o/2+70)*Math.sin(r-Math.PI/2),f=X({unit:a.unit,dpi:a.dpi,px:i/a.scale,precious:"px"===a.unit?0:1})+" x "+X({unit:a.unit,dpi:a.dpi,px:o/a.scale,precious:"px"===a.unit?0:1})+("px"===a.unit?"":" "+a.unit);return t.createElement(t.Fragment,null,t.createElement(s,{x:(m.minX+m.maxX)/2+h,y:(m.minY+m.maxY)/2+p,offsetX:14,offsetY:14,visible:"rotater"===l},t.createElement(g,{cornerRadius:5,fill:c||"rgb(0, 161, 255)"}),t.createElement(u,{align:"center",verticalAlign:"middle",fill:d||"white",padding:8,text:Math.round(x.Util.radToDeg(r)).toString()+"°"})),t.createElement(s,{x:(m.minX+m.maxX)/2,y:m.maxY+20,visible:"rotater"!==l},t.createElement(g,{cornerRadius:5,fill:c||"rgb(0, 161, 255)",pointerDirection:"up",pointerHeight:0,pointerWidth:0}),t.createElement(u,{align:"center",verticalAlign:"middle",fill:d||"white",padding:8,text:f})))}),H=n(({elements:e,store:n})=>{const i=e.filter(e=>e.alwaysOnTop),o=e.filter(e=>!e.alwaysOnTop).concat(i);return t.createElement(t.Fragment,null,o.map(e=>t.createElement(b,{key:e.id,store:n,element:e,onClick:()=>{console.warn("Polotno warning: onClick callback is deprecated. Just stop using it. Polotno will do selection automatically.")}})))});export const useContextMenu=({store:e})=>{const[n,i]=t.useState(!1),[o,r]=t.useState({x:0,y:0}),l=t.useCallback(e=>{i(!0),r(e)},[]);return{open:l,close:t.useCallback(()=>{i(!1)},[]),props:{isOpen:n,offset:o,setIsOpen:i}}};let V=null;export const registerNextDomDrop=e=>{V=e};const Z=atob("UG9sb3RubyBmcmVlIGxpY2Vuc2UgbGltaXRhdGlvbiBleGNlZWRlZCAtIFBsZWFzZSB1cGdyYWRlIHlvdXIgYWNjb3VudC4="),K=atob("cmVk"),U=atob("djAuOS4y"),J=e=>t.createElement(t.Fragment,null,t.createElement(s,{fill:K,height:200},t.createElement(g,{fill:K}),t.createElement(u,Object.assign({},e,{fill:"white",text:Z,height:void 0,padding:10,fontSize:20}))));export default n(({store:e,page:n,width:r,height:a,pageControlsEnabled:f,backColor:b,pageBorderColor:E,activePageBorderColor:y,components:X,bleedColor:D,altCloneEnabled:P,viewportSize:R,selectionRectFill:M,selectionRectStroke:j,selectionRectStrokeWidth:I,snapGuideStroke:F,snapGuideStrokeWidth:_,snapGuideDash:Z,transformLabelFill:K,transformLabelTextFill:$,distanceGuideStroke:q,distanceLabelFill:Q,distanceLabelTextFill:ee})=>{const te=e.bleedVisible?n.bleed:0,ne=n.computedWidth+2*te,ie=n.computedHeight+2*te,oe=(r-ne*e.scale)/2,re=(a-ie*e.scale)/2,le=t.useRef(null),ae=t.useRef(null),se=t.useRef(null),ce=null==f||f,[de,me]=t.useState(null),[he,ge]=t.useState({}),ue=useContextMenu({store:e}),pe=e.selectedElements.find(e=>e._cropModeEnabled),fe=e.selectedShapes.filter(e=>!e.resizable).length>0,xe=e.selectedShapes.filter(e=>!e.draggable).length>0,be=e.selectedElements.filter(e=>!e.visible).length>0;t.useLayoutEffect(()=>{var t,n,i;if(!le.current){return}const o=le.current.getStage(),r=e.selectedShapes.map(e=>e._cropModeEnabled?null:o.findOne("#"+e.id)).filter(e=>e),l=1===e.selectedElements.length&&(null===(t=e.selectedElements[0])||void 0===t?void 0:t.type)||"many";if(W[l]?(le.current.setAttrs(Object.assign(Object.assign({},T),W[l])),"svg"!==l&&"image"!==l&&"gif"!==l||e.selectedElements[0].keepRatio||le.current.setAttrs({enabledAnchors:T.enabledAnchors}),"text"===l&&A.textVerticalResizeEnabled&&le.current.setAttrs({enabledAnchors:null===(n=W.text.enabledAnchors)||void 0===n?void 0:n.concat(["bottom-center"])})):le.current.setAttrs(T),fe&&le.current.enabledAnchors([]),xe&&le.current.rotateEnabled(!1),r.find(e=>null==e?void 0:e.isDragging())&&r.forEach(e=>{e.isDragging()||null==e||e.startDrag()}),le.current.nodes(r),0===x.DD._dragElements.size){return}const a=[...x.DD._dragElements.entries()],s=a.find(([e,t])=>t.node instanceof x.Transformer);s&&(a.splice(a.indexOf(s),1),a.unshift(s),x.DD._dragElements.clear(),a.forEach(([e,t])=>{x.DD._dragElements.set(e,t)}),null===(i=le.current.getLayer())||void 0===i||i.batchDraw())},[e.selectedShapes,pe,fe,be,xe]);const ve=i(()=>({visible:!1,x1:0,y1:0,x2:0,y2:0})),Ee=t.useRef(!1),ye=O(),we=o(e=>{var t,n,i,o;if(ye){return}Ee.current=!1;const r=e.target.findAncestor(".elements-container"),l=e.target.findAncestor("Transformer"),a=e.target.findAncestor(".page-abs-container");if(r||l||a){return}const s=null===(t=e.target.getStage())||void 0===t?void 0:t.getPointerPosition();s.x-=null===(n=e.target.getStage())||void 0===n?void 0:n.x(),s.y-=null===(i=e.target.getStage())||void 0===i?void 0:i.y(),s&&(ve.visible=!0,ve.x1=s.x,ve.y1=s.y,ve.x2=s.x,ve.y2=s.y,(null===(o=e.target.getStage())||void 0===o?void 0:o.getPointersPositions().length)>=2&&(ve.visible=!1))});(({stageRef:e,containerRef:n,viewportSize:i})=>{t.useEffect(()=>{var t;const i=null===(t=n.current)||void 0===t?void 0:t.closest(".polotno-workspace-inner");function o(){var t;if(!e.current){return}const o=null===(t=n.current)||void 0===t?void 0:t.getBoundingClientRect(),r=null==i?void 0:i.getBoundingClientRect(),l=Math.max(0,r.left-o.left-100),a=Math.max(0,r.top-o.top-100);e.current.position({x:-l,y:-a}),e.current.container().style.transform=`translate(${l}px, ${a}px)`}return o(),i.addEventListener("scroll",o),()=>{i.removeEventListener("scroll",o)}},[i.width,i.height])})({stageRef:ae,containerRef:se,viewportSize:R}),t.useEffect(()=>{const t=o(e=>{var t,n,i,o;if(!ve.visible){return}null===(t=ae.current)||void 0===t||t.setPointersPositions(e);let r=null===(n=ae.current)||void 0===n?void 0:n.getPointerPosition();r?(r.x-=null===(i=ae.current)||void 0===i?void 0:i.x(),r.y-=null===(o=ae.current)||void 0===o?void 0:o.y()):r={x:ve.x2,y:ve.y2},ve.x2=r.x,ve.y2=r.y}),n=o(()=>{if(!ve.visible){return}if(!ae.current){return}const t=ae.current.findOne(".selection"),n=t?t.getClientRect():{width:0,height:0,x:0,y:0};if(n.width&&n.height){const t=[];ae.current.find(".element").forEach(i=>{const o=i.getClientRect(),r=e.getElementById(i.id()),l=null==r?void 0:r.draggable,a=null==r?void 0:r.selectable;x.Util.haveIntersection(n,o)&&l&&a&&t.push(r.top.id)});const i=[...new Set(t)];e.selectElements(i)}ve.visible=!1,Ee.current=!0});return window.addEventListener("mousemove",t),window.addEventListener("touchmove",t),window.addEventListener("mouseup",n),window.addEventListener("touchend",n),()=>{window.removeEventListener("mousemove",t),window.removeEventListener("touchmove",t),window.removeEventListener("mouseup",n),window.removeEventListener("touchend",n)}},[]);const ke=t.useRef(!1);t.useEffect(()=>{var e;let t;const n=null===(e=se.current)||void 0===e?void 0:e.closest(".polotno-workspace-inner"),i=()=>{ke.current=!0,clearTimeout(t),t=setTimeout(()=>{ke.current=!1},300)};return n.addEventListener("scroll",i),()=>{clearTimeout(t),n.removeEventListener("scroll",i)}},[]);const Ye=t=>{if(e.activePage!==n&&n.select(),ke.current){return}if(Ee.current){return}const i=t.evt.ctrlKey||t.evt.metaKey||t.evt.shiftKey,o=t.target.findAncestor(".elements-container"),r=t.target.findAncestor(".page-abs-container"),l=t.target.findAncestor("Transformer");if(!(i||o||l||r)){return void e.selectElements([])}const a=t.target.findAncestor(".element",!0),s=e.getElementById(null==a?void 0:a.id()),c=null==s?void 0:s.top,d=null==c?void 0:c.id,m=e.selectedElementsIds.indexOf(d)>=0;d&&i&&!m?e.selectElements(e.selectedElementsIds.concat([d])):d&&i&&m?e.selectElements(e.selectedElementsIds.filter(e=>e!==d)):!d||i||m||e.selectElements([d])};v(le,e,{stroke:F,strokeWidth:_,dash:Z});const Se=e.activePage===n,Xe=null==X?void 0:X.PageControls,Ce=null==X?void 0:X.Tooltip,Ae=null==X?void 0:X.ContextMenu,Oe=1/e.scale,De=0/e.scale;return t.createElement("div",{ref:se,onDragOver:e=>e.preventDefault(),onDrop:t=>{if(t.preventDefault(),!ae.current){return}ae.current.setPointersPositions(t);const i=ae.current.findOne(".elements-container").getRelativePointerPosition(),o=ae.current.getPointerPosition(),r=ae.current.getAllIntersections(o).map(e=>e.findAncestor(".element",!0)).filter(Boolean),l=[...new Set(r.reverse())].map(t=>e.getElementById(t.id())),a=l[0];V&&(V(i,a,{elements:l,page:n}),V=null)},style:{position:"relative",width:r+"px",height:a+"px",overflow:"hidden"},className:"polotno-page-container"+(Se?" active-page":"")},t.createElement(h,{ref:ae,width:Math.min(r,R.width+200),height:Math.min(R.height+200,a),onClick:Ye,onTap:Ye,onContextMenu:t=>{t.evt.preventDefault();const n=t.target.findAncestor(".element",!0),i=e.getElementById(null==n?void 0:n.id()),o=null==i?void 0:i.top,r=null==o?void 0:o.id;r?e.selectedElementsIds.indexOf(r)>=0||e.selectElements([r]):e.selectElements([]),ue.open({x:t.evt.clientX,y:t.evt.clientY})},onMouseDown:we,onMouseMove:t=>{if(!t.evt.altKey&&de){return void me(null)}if(!t.evt.altKey){return}const i=t.target.findAncestor(".element",!0),o=null==i?void 0:i.id();if(!e.selectedElements[0]){return}if(e.selectedElementsIds.includes(o)){return}const r=S(e.selectedShapes),l=o?e.getElementById(o):{x:0,y:0,width:n.computedWidth,height:n.computedHeight,rotation:0},a=Y(l),s=[];r.minX>a.maxX&&s.push({distance:r.minX-a.maxX,box1:r,box2:a,points:[{x:r.minX,y:r.minY+r.height/2},{x:a.maxX,y:r.minY+r.height/2},{x:a.maxX,y:a.minY+a.height/2}]}),r.maxX<a.minX&&s.push({distance:a.minX-r.maxX,box1:r,box2:a,points:[{x:r.maxX,y:r.minY+r.height/2},{x:a.minX,y:r.minY+r.height/2},{x:a.minX,y:a.minY+a.height/2}]}),r.minY>a.maxY&&s.push({box1:r,box2:a,distance:r.minY-a.maxY,points:[{x:r.minX+r.width/2,y:r.minY},{x:r.minX+r.width/2,y:a.maxY},{x:a.minX+a.width/2,y:a.maxY}]}),r.maxY<a.minY&&s.push({box1:r,box2:a,distance:a.minY-r.maxY,points:[{x:r.minX+r.width/2,y:r.maxY},{x:r.minX+r.width/2,y:a.minY},{x:a.minX+a.width/2,y:a.minY}]}),r.minX>=a.minX&&r.maxX<=a.maxX&&r.minY>=a.minY&&r.maxY<=a.maxY&&(s.push({distance:r.minX-a.minX,box1:r,box2:a,points:[{x:r.minX,y:r.minY+r.height/2},{x:a.minX,y:r.minY+r.height/2},{x:a.minX,y:a.minY+a.height/2}]}),s.push({distance:a.maxX-r.maxX,box1:r,box2:a,points:[{x:r.maxX,y:r.minY+r.height/2},{x:a.maxX,y:r.minY+r.height/2},{x:a.maxX,y:a.minY+a.height/2}]}),s.push({box1:r,box2:a,distance:r.minY-a.minY,points:[{x:r.minX+r.width/2,y:r.minY},{x:r.minX+r.width/2,y:a.minY},{x:a.minX+a.width/2,y:a.minY}]}),s.push({box1:r,box2:a,distance:a.maxY-r.maxY,points:[{x:r.minX+r.width/2,y:r.maxY},{x:r.minX+r.width/2,y:a.maxY},{x:a.minX+a.width/2,y:a.maxY}]})),JSON.stringify(de)!==JSON.stringify(s)&&me(s)},onDragStart:t=>{var n;const i=t.target.findAncestor(".element",!0);if(i){const o=e.getElementById(null==i?void 0:i.id()),r=null==o?void 0:o.top,l=null==r?void 0:r.id;!(e.selectedElementsIds.indexOf(l)>=0)&&l&&(e.selectElements([l]),t.target.stopDrag(),t.target.startDrag(t),null===(n=le.current)||void 0===n||n.startDrag(t))}de&&me(null)},pageId:n.id,style:{position:"absolute",overflow:"hidden",top:0,left:0}},t.createElement(c,null,t.createElement(B,{width:r,height:a,fill:b}),t.createElement(l,{x:oe,y:re,scaleX:e.scale,scaleY:e.scale,name:"page-container"},t.createElement(l,{name:"page-container-2"},t.createElement(l,{name:"page-background-group",x:te,y:te},t.createElement(G,{x:-n.bleed,y:-n.bleed,width:n.computedWidth+2*n.bleed,height:n.computedHeight+2*n.bleed,background:n.background,name:"page-background",preventDefault:!1,scale:e.scale})),t.createElement(l,{x:te,y:te,name:"elements-container",listening:!e.isPlaying},t.createElement(m,{name:"elements-area",width:n.computedWidth,height:n.computedHeight,listening:!1}),t.createElement(H,{elements:n.children,store:e})),t.createElement(m,{stroke:D,name:"bleed",strokeWidth:n.bleed,x:n.bleed/2,y:n.bleed/2,width:n.computedWidth+n.bleed,height:n.computedHeight+n.bleed,listening:!1,visible:n.bleed>0&&e.bleedVisible,hideInExport:!0}),k()===U&&t.createElement(J,{name:"hit-detection",x:-Oe/2-De,y:-Oe/2-De,width:ne+Oe+2*De,height:ie+Oe+2*De}))),t.createElement(d,{name:"workspace-background",points:[0,0,r,0,r,a,0,a,0,0,oe,re,oe,a-re,r-oe,a-re,r-oe,re,oe,re],listening:!1,closed:!0,fill:b}),t.createElement(l,{x:oe,y:re,scaleX:e.scale,scaleY:e.scale},t.createElement(m,{name:"page-highlight",hideInExport:!0,x:-Oe/2-De,y:-Oe/2-De,width:ne+Oe+2*De,height:ie+Oe+2*De,stroke:Se&&e.pages.length>1?y:E,strokeWidth:2,listening:!1,strokeScaleEnabled:!1})),t.createElement(l,{x:oe+te*e.scale,y:re+te*e.scale,scaleX:e.scale,scaleY:e.scale,name:"page-abs-container"},t.createElement(p,{ref:le,onDragStart:t=>{var i;(null===(i=t.evt)||void 0===i?void 0:i.altKey)&&P&&e.selectedElements.forEach(e=>{const t=e.clone({},{skipSelect:!0}),i=n.children.indexOf(e);n.setElementZIndex(t.id,i)}),e.history.startTransaction()},onDragEnd:()=>{e.history.endTransaction()},onTransformStart:()=>{e.history.startTransaction(),me(null)},boundBoxFunc:(e,t)=>{const n=Math.abs(t.width)<1||Math.abs(t.height)<1,i=Math.abs(e.width)<1||Math.abs(e.height)<1;return n&&!i?e:t},onTransform:e=>{var t,n;const i=le.current.nodes(),o=i[i.length-1];if(e.target!==o){return}const r=null===(t=le.current)||void 0===t?void 0:t.__getNodeRect(),l=null===(n=le.current)||void 0===n?void 0:n.getActiveAnchor();ge({anchor:l,x:r.x,y:r.y,rotation:r.rotation,width:r.width,height:r.height})},onTransformEnd:t=>{ge({}),e.history.endTransaction()},visible:!e.isPlaying}),de&&de.map(({points:n,distance:i,box1:o,box2:r},a)=>t.createElement(l,{name:"distances-container",hideInExport:!0,key:a,listening:!1},t.createElement(m,Object.assign({},o,{stroke:q,strokeWidth:1,strokeScaleEnabled:!1})),t.createElement(m,Object.assign({},r,{stroke:q,strokeWidth:1,strokeScaleEnabled:!1})),t.createElement(d,{points:[n[0].x,n[0].y,n[1].x,n[1].y],stroke:q,strokeWidth:1,strokeScaleEnabled:!1}),t.createElement(d,{points:[n[1].x,n[1].y,n[2].x,n[2].y],stroke:q,strokeWidth:1,strokeScaleEnabled:!1}),t.createElement(s,{x:(n[0].x+n[1].x)/2,y:(n[0].y+n[1].y)/2,offsetY:-10,scaleX:1/e.scale,scaleY:1/e.scale},t.createElement(g,{cornerRadius:5,fill:Q,pointerDirection:"down"}),t.createElement(u,{align:"center",verticalAlign:"middle",fill:ee,padding:5,text:C({unit:e.unit,dpi:e.dpi,px:i})})))),n._rendering&&t.createElement(l,null,t.createElement(m,{width:ne,height:ie,fill:"rgba(255,255,255,0.9)"}),t.createElement(u,{text:"Rendering...",fontSize:60,width:ne,height:ie,align:"center",verticalAlign:"middle"})),Ce&&t.createElement(Ce,{components:X,store:e,page:n,stageRef:ae}),Ae&&t.createElement(L,null,t.createElement(Ae,Object.assign({components:X,store:e},ue.props)))),t.createElement(N,Object.assign({},he,{store:e,tagFill:K,textFill:$})),t.createElement(z,{selection:ve,fill:M,stroke:j,strokeWidth:I}),w()&&t.createElement(u,{text:"Powered by polotno.com",fontSize:14,fill:"rgba(0,0,0,0.6)",x:r-170,y:a-18,onMouseEnter:e=>{e.target.getStage().container().style.cursor="pointer"},onMouseLeave:e=>{e.target.getStage().container().style.cursor=""},onTouchStart:e=>{e.cancelBubble=!0},onMouseDown:e=>{e.cancelBubble=!0},onClick:()=>{window.open("https://polotno.com")},onTap:()=>{window.open("https://polotno.com")}}),t.createElement(l,{name:"line-guides"}))),ce&&Xe&&t.createElement(Xe,{store:e,page:n,xPadding:oe,yPadding:re}))});
1
+ var e=this&&this.__rest||function(e,t){var n={};for(var i in e){Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i])}if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(i=Object.getOwnPropertySymbols(e);o<i.length;o++){t.indexOf(i[o])<0&&Object.prototype.propertyIsEnumerable.call(e,i[o])&&(n[i[o]]=e[i[o]])}}return n};import t from"react";import{observer as n,useLocalObservable as i}from"mobx-react-lite";import{action as o,runInAction as r}from"mobx";import{Group as l,Image as a,Label as s,Layer as c,Line as d,Rect as m,Stage as h,Tag as u,Text as g,Transformer as p}from"react-konva";import f from"use-image";import x from"konva";import b from"./element.js";import{useSnap as v,ensureDragOrder as E}from"./use-transformer-snap.js";import{useImageLoader as y}from"./image-element.js";import{getCrop as w}from"../utils/crop.js";import{isCreditVisible as k,___ as Y}from"../utils/validate-key.js";import{getClientRect as S,getTotalClientRect as X}from"../utils/math.js";import{pxToUnitRounded as C,pxToUnitString as A}from"../utils/unit.js";import{flags as O}from"../utils/flags.js";import{isTouchDevice as P}from"../utils/screen.js";import{useColor as L}from"./use-color.js";import{isGradient as R}from"../utils/gradient.js";import{Html as M}from"react-konva-utils";const j=x.DD._drag;window.removeEventListener("mousemove",j),x.DD._drag=function(e){r(()=>{j.call(this,e)})},window.addEventListener("mousemove",x.DD._drag);const D=new x.Group,I=20;D.add(new x.Rect({width:I,height:I,fill:"white"})),D.add(new x.Path({scaleX:I/24,scaleY:I/24,data:"M4.98313549,11.0001422 C5.49589839,10.9914935 5.92501998,11.3703506 5.99116425,11.8666444 L5.99985778,11.9831355 L6.00348884,12.2068855 C6.11245031,15.4321748 8.76323537,17.9999971 11.9999971,17.9999971 C12.1869612,17.9999971 12.3726725,17.9914753 12.5567465,17.9745765 L12.2928932,17.7071068 C11.9023689,17.3165825 11.9023689,16.6834175 12.2928932,16.2928932 C12.6834175,15.9023689 13.3165825,15.9023689 13.7071068,16.2928932 L15.7071068,18.2928932 C16.0976311,18.6834175 16.0976311,19.3165825 15.7071068,19.7071068 L13.7071068,21.7071068 C13.3165825,22.0976311 12.6834175,22.0976311 12.2928932,21.7071068 C11.9023689,21.3165825 11.9023689,20.6834175 12.2928932,20.2928932 L12.6111505,19.9769552 C12.4086045,19.9922816 12.2047796,19.9999971 11.9999971,19.9999971 C7.7687005,19.9999971 4.28886152,16.7094374 4.01666425,12.5105203 L4.00420123,12.2575143 L4.00014222,12.0168645 C3.9908282,11.4646583 4.43092928,11.0094562 4.98313549,11.0001422 Z M11.7071068,2.29289322 C12.0675907,2.65337718 12.0953203,3.22060824 11.7902954,3.61289944 L11.7071068,3.70710678 L11.3891629,4.0230186 C11.5916051,4.00770767 11.7953244,4 12,4 C16.418278,4 20,7.581722 20,12 C20,12.5522847 19.5522847,13 19,13 C18.4477153,13 18,12.5522847 18,12 C18,8.6862915 15.3137085,6 12,6 C11.8129339,6 11.6271216,6.00853145 11.4429483,6.02544919 L11.7071068,6.29289322 C12.0976311,6.68341751 12.0976311,7.31658249 11.7071068,7.70710678 C11.3466228,8.06759074 10.7793918,8.09532028 10.3871006,7.79029539 L10.2928932,7.70710678 L8.29289322,5.70710678 C7.93240926,5.34662282 7.90467972,4.77939176 8.20970461,4.38710056 L8.29289322,4.29289322 L10.2928932,2.29289322 C10.6834175,1.90236893 11.3165825,1.90236893 11.7071068,2.29289322 Z",fill:"black"}));const T=D.toCanvas({pixelRatio:2,width:I,height:I}),W={enabledAnchors:["top-left","top-center","top-right","middle-left","bottom-left","bottom-right","bottom-center","middle-right"],borderEnabled:!0,rotateEnabled:!0,rotationSnaps:[0,45,90,135,180,225,270,315],ignoreStroke:!0,flipEnabled:!1,anchorStrokeWidth:2,borderStrokeWidth:2,rotateAnchorOffset:30,anchorStyleFunc:e=>{if(e.hasName("rotater")){const t=20;e.setAttrs({width:t,height:t,cornerRadius:t/2,offsetX:t/2,offsetY:t/2,fillPatternImage:T,fillPatternScaleX:t/I/2,fillPatternScaleY:t/I/2,fillPriority:"pattern",fillPatternRepeat:"no-repeat"})}}};export const setTransformerStyle=e=>{Object.assign(W,e)};const B={text:{enabledAnchors:["top-left","top-right","middle-left","bottom-left","bottom-right","middle-right"]},svg:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]},gif:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]},line:{enabledAnchors:[],borderEnabled:!1,rotateEnabled:!1},image:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]},many:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]},group:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]}};export function registerTransformerAttrs(e,t){B[e]=B[e]||t,Object.assign(B[e],t)}const F=e=>t.createElement(m,Object.assign({},e,{preventDefault:!1})),G=n=>{var{url:i}=n,o=e(n,["url"]);const[r,l]=f(i,"anonymous"),s=r?w(r,{width:o.width,height:o.height},"center-middle"):{};return y(l,i,"page background"),t.createElement(a,Object.assign({image:r},o,s))},_=e=>{const n=L({fill:e.fill,a:{width:e.width,height:e.height}});return t.createElement(m,Object.assign({},e,n))},z=n=>{const{background:i,scale:o,borderColor:r}=n,l=e(n,["background","scale","borderColor"]),a=t.useMemo(()=>!!x.Util.colorToRGBA(i)||R(i),[i]),s=t.useMemo(()=>{const e=document.createElement("canvas"),t=30;e.width=60,e.height=60;const n=e.getContext("2d");return n&&(n.fillStyle="black",n.fillRect(t,0,t,t),n.fillRect(0,t,t,t)),e},[]);return t.createElement(t.Fragment,null,t.createElement(m,Object.assign({fillPatternImage:s},l,{opacity:.1,hideInExport:!0})),a?t.createElement(_,Object.assign({fill:i},l)):t.createElement(G,Object.assign({url:i},l)))},N=n(({selection:e,fill:n="rgba(0, 161, 255, 0.3)",stroke:i="rgb(0, 161, 255)",strokeWidth:o=1})=>e.visible?t.createElement(m,{name:"selection",x:Math.min(e.x1,e.x2),y:Math.min(e.y1,e.y2),width:Math.abs(e.x1-e.x2),height:Math.abs(e.y1-e.y2),fill:n,stroke:i,strokeWidth:o}):null),H=n(({x:e,y:n,width:i,height:o,rotation:r,anchor:l,store:a,tagFill:c,textFill:d})=>{const m=S({x:e,y:n,width:i,height:o,rotation:x.Util.radToDeg(r)});if(void 0===l){return null}const h=(o/2+70)*Math.cos(r-Math.PI/2),p=(o/2+70)*Math.sin(r-Math.PI/2),f=C({unit:a.unit,dpi:a.dpi,px:i/a.scale,precious:"px"===a.unit?0:1})+" x "+C({unit:a.unit,dpi:a.dpi,px:o/a.scale,precious:"px"===a.unit?0:1})+("px"===a.unit?"":" "+a.unit);return t.createElement(t.Fragment,null,t.createElement(s,{x:(m.minX+m.maxX)/2+h,y:(m.minY+m.maxY)/2+p,offsetX:14,offsetY:14,visible:"rotater"===l},t.createElement(u,{cornerRadius:5,fill:c||"rgb(0, 161, 255)"}),t.createElement(g,{align:"center",verticalAlign:"middle",fill:d||"white",padding:8,text:Math.round(x.Util.radToDeg(r)).toString()+"°"})),t.createElement(s,{x:(m.minX+m.maxX)/2,y:m.maxY+20,visible:"rotater"!==l},t.createElement(u,{cornerRadius:5,fill:c||"rgb(0, 161, 255)",pointerDirection:"up",pointerHeight:0,pointerWidth:0}),t.createElement(g,{align:"center",verticalAlign:"middle",fill:d||"white",padding:8,text:f})))}),V=n(({elements:e,store:n})=>{const i=e.filter(e=>e.alwaysOnTop),o=e.filter(e=>!e.alwaysOnTop).concat(i);return t.createElement(t.Fragment,null,o.map(e=>t.createElement(b,{key:e.id,store:n,element:e,onClick:()=>{console.warn("Polotno warning: onClick callback is deprecated. Just stop using it. Polotno will do selection automatically.")}})))});export const useContextMenu=({store:e})=>{const[n,i]=t.useState(!1),[o,r]=t.useState({x:0,y:0}),l=t.useCallback(e=>{i(!0),r(e)},[]);return{open:l,close:t.useCallback(()=>{i(!1)},[]),props:{isOpen:n,offset:o,setIsOpen:i}}};let Z=null;export const registerNextDomDrop=e=>{Z=e};const K=atob("UG9sb3RubyBmcmVlIGxpY2Vuc2UgbGltaXRhdGlvbiBleGNlZWRlZCAtIFBsZWFzZSB1cGdyYWRlIHlvdXIgYWNjb3VudC4="),U=atob("cmVk"),J=atob("djAuOS4y"),$=e=>t.createElement(t.Fragment,null,t.createElement(s,{fill:U,height:200},t.createElement(u,{fill:U}),t.createElement(g,Object.assign({},e,{fill:"white",text:K,height:void 0,padding:10,fontSize:20}))));export default n(({store:e,page:n,width:r,height:a,pageControlsEnabled:f,backColor:b,pageBorderColor:y,activePageBorderColor:w,components:C,bleedColor:L,altCloneEnabled:R,viewportSize:j,selectionRectFill:D,selectionRectStroke:I,selectionRectStrokeWidth:T,snapGuideStroke:G,snapGuideStrokeWidth:_,snapGuideDash:K,transformLabelFill:U,transformLabelTextFill:q,distanceGuideStroke:Q,distanceLabelFill:ee,distanceLabelTextFill:te})=>{const ne=e.bleedVisible?n.bleed:0,ie=n.computedWidth+2*ne,oe=n.computedHeight+2*ne,re=(r-ie*e.scale)/2,le=(a-oe*e.scale)/2,ae=t.useRef(null),se=t.useRef(null),ce=t.useRef(null),de=null==f||f,[me,he]=t.useState(null),[ue,ge]=t.useState({}),pe=useContextMenu({store:e}),fe=e.selectedElements.find(e=>e._cropModeEnabled),xe=e.selectedShapes.filter(e=>!e.resizable).length>0,be=e.selectedShapes.filter(e=>!e.draggable).length>0,ve=e.selectedElements.filter(e=>!e.visible).length>0;t.useLayoutEffect(()=>{var t,n,i;if(!ae.current){return}const o=ae.current.getStage(),r=e.selectedShapes.map(e=>e._cropModeEnabled?null:o.findOne("#"+e.id)).filter(e=>e),l=1===e.selectedElements.length&&(null===(t=e.selectedElements[0])||void 0===t?void 0:t.type)||"many";B[l]?(ae.current.setAttrs(Object.assign(Object.assign({},W),B[l])),"svg"!==l&&"image"!==l&&"gif"!==l||e.selectedElements[0].keepRatio||ae.current.setAttrs({enabledAnchors:W.enabledAnchors}),"text"===l&&O.textVerticalResizeEnabled&&ae.current.setAttrs({enabledAnchors:null===(n=B.text.enabledAnchors)||void 0===n?void 0:n.concat(["bottom-center"])})):ae.current.setAttrs(W),xe&&ae.current.enabledAnchors([]),be&&ae.current.rotateEnabled(!1),r.find(e=>null==e?void 0:e.isDragging())&&r.forEach(e=>{e.isDragging()||null==e||e.startDrag()}),ae.current.nodes(r),E(),null===(i=ae.current.getLayer())||void 0===i||i.batchDraw()},[e.selectedShapes,fe,xe,ve,be]);const Ee=i(()=>({visible:!1,x1:0,y1:0,x2:0,y2:0})),ye=t.useRef(!1),we=P(),ke=o(e=>{var t,n,i,o;if(we){return}ye.current=!1;const r=e.target.findAncestor(".elements-container"),l=e.target.findAncestor("Transformer"),a=e.target.findAncestor(".page-abs-container");if(r||l||a){return}const s=null===(t=e.target.getStage())||void 0===t?void 0:t.getPointerPosition();s.x-=null===(n=e.target.getStage())||void 0===n?void 0:n.x(),s.y-=null===(i=e.target.getStage())||void 0===i?void 0:i.y(),s&&(Ee.visible=!0,Ee.x1=s.x,Ee.y1=s.y,Ee.x2=s.x,Ee.y2=s.y,(null===(o=e.target.getStage())||void 0===o?void 0:o.getPointersPositions().length)>=2&&(Ee.visible=!1))});(({stageRef:e,containerRef:n,viewportSize:i})=>{t.useEffect(()=>{var t;const i=null===(t=n.current)||void 0===t?void 0:t.closest(".polotno-workspace-inner");function o(){var t;if(!e.current){return}const o=null===(t=n.current)||void 0===t?void 0:t.getBoundingClientRect(),r=null==i?void 0:i.getBoundingClientRect(),l=Math.max(0,r.left-o.left-100),a=Math.max(0,r.top-o.top-100);e.current.position({x:-l,y:-a}),e.current.container().style.transform=`translate(${l}px, ${a}px)`}return o(),i.addEventListener("scroll",o),()=>{i.removeEventListener("scroll",o)}},[i.width,i.height])})({stageRef:se,containerRef:ce,viewportSize:j}),t.useEffect(()=>{const t=o(e=>{var t,n,i,o;if(!Ee.visible){return}null===(t=se.current)||void 0===t||t.setPointersPositions(e);let r=null===(n=se.current)||void 0===n?void 0:n.getPointerPosition();r?(r.x-=null===(i=se.current)||void 0===i?void 0:i.x(),r.y-=null===(o=se.current)||void 0===o?void 0:o.y()):r={x:Ee.x2,y:Ee.y2},Ee.x2=r.x,Ee.y2=r.y}),n=o(()=>{if(!Ee.visible){return}if(!se.current){return}const t=se.current.findOne(".selection"),n=t?t.getClientRect():{width:0,height:0,x:0,y:0};if(n.width&&n.height){const t=[];se.current.find(".element").forEach(i=>{const o=i.getClientRect(),r=e.getElementById(i.id()),l=null==r?void 0:r.draggable,a=null==r?void 0:r.selectable;x.Util.haveIntersection(n,o)&&l&&a&&t.push(r.top.id)});const i=[...new Set(t)];e.selectElements(i)}Ee.visible=!1,ye.current=!0});return window.addEventListener("mousemove",t),window.addEventListener("touchmove",t),window.addEventListener("mouseup",n),window.addEventListener("touchend",n),()=>{window.removeEventListener("mousemove",t),window.removeEventListener("touchmove",t),window.removeEventListener("mouseup",n),window.removeEventListener("touchend",n)}},[]);const Ye=t.useRef(!1);t.useEffect(()=>{var e;let t;const n=null===(e=ce.current)||void 0===e?void 0:e.closest(".polotno-workspace-inner"),i=()=>{Ye.current=!0,clearTimeout(t),t=setTimeout(()=>{Ye.current=!1},300)};return n.addEventListener("scroll",i),()=>{clearTimeout(t),n.removeEventListener("scroll",i)}},[]);const Se=t=>{if(e.activePage!==n&&n.select(),Ye.current){return}if(ye.current){return}const i=t.evt.ctrlKey||t.evt.metaKey||t.evt.shiftKey,o=t.target.findAncestor(".elements-container"),r=t.target.findAncestor(".page-abs-container"),l=t.target.findAncestor("Transformer");if(!(i||o||l||r)){return void e.selectElements([])}const a=t.target.findAncestor(".element",!0),s=e.getElementById(null==a?void 0:a.id()),c=null==s?void 0:s.top,d=null==c?void 0:c.id,m=e.selectedElementsIds.indexOf(d)>=0;d&&i&&!m?e.selectElements(e.selectedElementsIds.concat([d])):d&&i&&m?e.selectElements(e.selectedElementsIds.filter(e=>e!==d)):!d||i||m||e.selectElements([d])};v(ae,e,{stroke:G,strokeWidth:_,dash:K});const Xe=e.activePage===n,Ce=null==C?void 0:C.PageControls,Ae=null==C?void 0:C.Tooltip,Oe=null==C?void 0:C.ContextMenu,Pe=1/e.scale,Le=0/e.scale;return t.createElement("div",{ref:ce,onDragOver:e=>e.preventDefault(),onDrop:t=>{if(t.preventDefault(),!se.current){return}se.current.setPointersPositions(t);const i=se.current.findOne(".elements-container").getRelativePointerPosition(),o=se.current.getPointerPosition(),r=se.current.getAllIntersections(o).map(e=>e.findAncestor(".element",!0)).filter(Boolean),l=[...new Set(r.reverse())].map(t=>e.getElementById(t.id())),a=l[0];Z&&(Z(i,a,{elements:l,page:n}),Z=null)},style:{position:"relative",width:r+"px",height:a+"px",overflow:"hidden"},className:"polotno-page-container"+(Xe?" active-page":"")},t.createElement(h,{ref:se,width:Math.min(r,j.width+200),height:Math.min(j.height+200,a),onClick:Se,onTap:Se,onContextMenu:t=>{t.evt.preventDefault();const n=t.target.findAncestor(".element",!0),i=e.getElementById(null==n?void 0:n.id()),o=null==i?void 0:i.top,r=null==o?void 0:o.id;r?e.selectedElementsIds.indexOf(r)>=0||e.selectElements([r]):e.selectElements([]),pe.open({x:t.evt.clientX,y:t.evt.clientY})},onMouseDown:ke,onMouseMove:t=>{if(!t.evt.altKey&&me){return void he(null)}if(!t.evt.altKey){return}const i=t.target.findAncestor(".element",!0),o=null==i?void 0:i.id();if(!e.selectedElements[0]){return}if(e.selectedElementsIds.includes(o)){return}const r=X(e.selectedShapes),l=o?e.getElementById(o):{x:0,y:0,width:n.computedWidth,height:n.computedHeight,rotation:0},a=S(l),s=[];r.minX>a.maxX&&s.push({distance:r.minX-a.maxX,box1:r,box2:a,points:[{x:r.minX,y:r.minY+r.height/2},{x:a.maxX,y:r.minY+r.height/2},{x:a.maxX,y:a.minY+a.height/2}]}),r.maxX<a.minX&&s.push({distance:a.minX-r.maxX,box1:r,box2:a,points:[{x:r.maxX,y:r.minY+r.height/2},{x:a.minX,y:r.minY+r.height/2},{x:a.minX,y:a.minY+a.height/2}]}),r.minY>a.maxY&&s.push({box1:r,box2:a,distance:r.minY-a.maxY,points:[{x:r.minX+r.width/2,y:r.minY},{x:r.minX+r.width/2,y:a.maxY},{x:a.minX+a.width/2,y:a.maxY}]}),r.maxY<a.minY&&s.push({box1:r,box2:a,distance:a.minY-r.maxY,points:[{x:r.minX+r.width/2,y:r.maxY},{x:r.minX+r.width/2,y:a.minY},{x:a.minX+a.width/2,y:a.minY}]}),r.minX>=a.minX&&r.maxX<=a.maxX&&r.minY>=a.minY&&r.maxY<=a.maxY&&(s.push({distance:r.minX-a.minX,box1:r,box2:a,points:[{x:r.minX,y:r.minY+r.height/2},{x:a.minX,y:r.minY+r.height/2},{x:a.minX,y:a.minY+a.height/2}]}),s.push({distance:a.maxX-r.maxX,box1:r,box2:a,points:[{x:r.maxX,y:r.minY+r.height/2},{x:a.maxX,y:r.minY+r.height/2},{x:a.maxX,y:a.minY+a.height/2}]}),s.push({box1:r,box2:a,distance:r.minY-a.minY,points:[{x:r.minX+r.width/2,y:r.minY},{x:r.minX+r.width/2,y:a.minY},{x:a.minX+a.width/2,y:a.minY}]}),s.push({box1:r,box2:a,distance:a.maxY-r.maxY,points:[{x:r.minX+r.width/2,y:r.maxY},{x:r.minX+r.width/2,y:a.maxY},{x:a.minX+a.width/2,y:a.maxY}]})),JSON.stringify(me)!==JSON.stringify(s)&&he(s)},onDragStart:t=>{var n;const i=t.target.findAncestor(".element",!0);if(i){const o=e.getElementById(null==i?void 0:i.id()),r=null==o?void 0:o.top,l=null==r?void 0:r.id;!(e.selectedElementsIds.indexOf(l)>=0)&&l&&(e.selectElements([l]),t.target.stopDrag(),t.target.startDrag(t),null===(n=ae.current)||void 0===n||n.startDrag(t))}me&&he(null)},pageId:n.id,style:{position:"absolute",overflow:"hidden",top:0,left:0}},t.createElement(c,null,t.createElement(F,{width:r,height:a,fill:b}),t.createElement(l,{x:re,y:le,scaleX:e.scale,scaleY:e.scale,name:"page-container"},t.createElement(l,{name:"page-container-2"},t.createElement(l,{name:"page-background-group",x:ne,y:ne},t.createElement(z,{x:-n.bleed,y:-n.bleed,width:n.computedWidth+2*n.bleed,height:n.computedHeight+2*n.bleed,background:n.background,name:"page-background",preventDefault:!1,scale:e.scale})),t.createElement(l,{x:ne,y:ne,name:"elements-container",listening:!e.isPlaying},t.createElement(m,{name:"elements-area",width:n.computedWidth,height:n.computedHeight,listening:!1}),t.createElement(V,{elements:n.children,store:e})),t.createElement(m,{stroke:L,name:"bleed",strokeWidth:n.bleed,x:n.bleed/2,y:n.bleed/2,width:n.computedWidth+n.bleed,height:n.computedHeight+n.bleed,listening:!1,visible:n.bleed>0&&e.bleedVisible,hideInExport:!0}),Y()===J&&t.createElement($,{name:"hit-detection",x:-Pe/2-Le,y:-Pe/2-Le,width:ie+Pe+2*Le,height:oe+Pe+2*Le}))),t.createElement(d,{name:"workspace-background",points:[0,0,r,0,r,a,0,a,0,0,re,le,re,a-le,r-re,a-le,r-re,le,re,le],listening:!1,closed:!0,fill:b}),t.createElement(l,{x:re,y:le,scaleX:e.scale,scaleY:e.scale},t.createElement(m,{name:"page-highlight",hideInExport:!0,x:-Pe/2-Le,y:-Pe/2-Le,width:ie+Pe+2*Le,height:oe+Pe+2*Le,stroke:Xe&&e.pages.length>1?w:y,strokeWidth:2,listening:!1,strokeScaleEnabled:!1})),t.createElement(l,{x:re+ne*e.scale,y:le+ne*e.scale,scaleX:e.scale,scaleY:e.scale,name:"page-abs-container"},t.createElement(p,{ref:ae,onDragStart:t=>{var i;(null===(i=t.evt)||void 0===i?void 0:i.altKey)&&R&&e.selectedElements.forEach(e=>{const t=e.clone({},{skipSelect:!0}),i=n.children.indexOf(e);n.setElementZIndex(t.id,i)}),e.history.startTransaction()},onDragEnd:()=>{e.history.endTransaction()},onTransformStart:()=>{e.history.startTransaction(),he(null)},boundBoxFunc:(e,t)=>{const n=Math.abs(t.width)<1||Math.abs(t.height)<1,i=Math.abs(e.width)<1||Math.abs(e.height)<1;return n&&!i?e:t},onTransform:e=>{var t,n;const i=ae.current.nodes(),o=i[i.length-1];if(e.target!==o){return}const r=null===(t=ae.current)||void 0===t?void 0:t.__getNodeRect(),l=null===(n=ae.current)||void 0===n?void 0:n.getActiveAnchor();ge({anchor:l,x:r.x,y:r.y,rotation:r.rotation,width:r.width,height:r.height})},onTransformEnd:t=>{ge({}),e.history.endTransaction()},visible:!e.isPlaying}),me&&me.map(({points:n,distance:i,box1:o,box2:r},a)=>t.createElement(l,{name:"distances-container",hideInExport:!0,key:a,listening:!1},t.createElement(m,Object.assign({},o,{stroke:Q,strokeWidth:1,strokeScaleEnabled:!1})),t.createElement(m,Object.assign({},r,{stroke:Q,strokeWidth:1,strokeScaleEnabled:!1})),t.createElement(d,{points:[n[0].x,n[0].y,n[1].x,n[1].y],stroke:Q,strokeWidth:1,strokeScaleEnabled:!1}),t.createElement(d,{points:[n[1].x,n[1].y,n[2].x,n[2].y],stroke:Q,strokeWidth:1,strokeScaleEnabled:!1}),t.createElement(s,{x:(n[0].x+n[1].x)/2,y:(n[0].y+n[1].y)/2,offsetY:-10,scaleX:1/e.scale,scaleY:1/e.scale},t.createElement(u,{cornerRadius:5,fill:ee,pointerDirection:"down"}),t.createElement(g,{align:"center",verticalAlign:"middle",fill:te,padding:5,text:A({unit:e.unit,dpi:e.dpi,px:i})})))),n._rendering&&t.createElement(l,null,t.createElement(m,{width:ie,height:oe,fill:"rgba(255,255,255,0.9)"}),t.createElement(g,{text:"Rendering...",fontSize:60,width:ie,height:oe,align:"center",verticalAlign:"middle"})),Ae&&t.createElement(Ae,{components:C,store:e,page:n,stageRef:se}),Oe&&t.createElement(M,null,t.createElement(Oe,Object.assign({components:C,store:e},pe.props)))),t.createElement(H,Object.assign({},ue,{store:e,tagFill:U,textFill:q})),t.createElement(N,{selection:Ee,fill:D,stroke:I,strokeWidth:T}),k()&&t.createElement(g,{text:"Powered by polotno.com",fontSize:14,fill:"rgba(0,0,0,0.6)",x:r-170,y:a-18,onMouseEnter:e=>{e.target.getStage().container().style.cursor="pointer"},onMouseLeave:e=>{e.target.getStage().container().style.cursor=""},onTouchStart:e=>{e.cancelBubble=!0},onMouseDown:e=>{e.cancelBubble=!0},onClick:()=>{window.open("https://polotno.com")},onTap:()=>{window.open("https://polotno.com")}}),t.createElement(l,{name:"line-guides"}))),de&&Ce&&t.createElement(Ce,{store:e,page:n,xPadding:re,yPadding:le}))});
package/canvas/text-element.js CHANGED
@@ -1 +1 @@
1
- import t from"react";import{observer as e}from"mobx-react-lite";import{Group as n,Path as o,Text as r}from"react-konva";import{Html as i}from"react-konva-utils";import{autorun as a}from"mobx";import l from"konva";import{parsePath as s,roundCommands as c}from"svg-round-corners";import{useColor as d}from"./use-color.js";import{incrementLoader as h}from"../utils/loader.js";import{isFontLoaded as u}from"../utils/fonts.js";import{flags as f}from"../utils/flags.js";import{removeTags as g}from"../utils/text.js";import{applyFilter as m}from"./apply-filters.js";import{useFadeIn as p}from"./use-fadein.js";import{isTouchDevice as x}from"../utils/screen.js";import{isAlive as w}from"mobx-state-tree";import{getLimitedFontSize as v}from"./text-element/max-font-size.js";let y;function S(){return y||(y=document.getElementById("polotno-text-style"),y||(y=document.createElement("style"),y.id="polotno-text-style",document.head.appendChild(y)),y)}l._fixTextRendering=!0;const E={border:"none",padding:"0px",overflow:"hidden",background:"none",outline:"none",resize:"none",overflowWrap:"break-word",whiteSpace:"pre-wrap",userSelect:"text",wordBreak:"normal",textTransform:"none"};function b(t){var e="֑-߿‏‫‮יִ-﷽ﹰ-ﻼ";return new RegExp("^[^"+e+"]*?["+e+"]").test(t)}export function isRTLText(t){t=t.replace(/\s/g,"");let e=0;for(var n=0;n<t.length;n++){b(t[n])&&(e+=1)}return e>t.length/2}export function getDir(t){return isRTLText(t)?"rtl":"ltr"}const z=e(({textNodeRef:e,element:n,onBlur:o,selectAll:r,cursorPosition:i})=>{const[a,l]=t.useState(E),s=e.current;t.useLayoutEffect(()=>{const t={};t.width=s.width()-2*s.padding()+"px",t.height=s.height()-2*s.padding()+s.fontSize()*s.lineHeight()+"px",t.fontSize=s.fontSize()+"px",t.lineHeight=s.lineHeight()+.01,t.fontFamily=s.fontFamily(),t.textAlign=s.align(),t.color=s.fill(),t.fontWeight=n.fontWeight,t.fontStyle=n.fontStyle,t.letterSpacing=n.letterSpacing+"em",t.opacity=Math.max(n.a.opacity,.2),t.textTransform=n.textTransform;const e=`\n .polotno-input::placeholder {\n color: ${a.color};\n opacity: 0.6;\n }\n `,o=S();o.innerHTML="",o.appendChild(document.createTextNode(e)),JSON.stringify(t)!==JSON.stringify(a)&&l(t)});const c=t.useRef(null);t.useLayoutEffect(()=>{var t;const e=c.current;if(!e){return}null===(t=c.current)||void 0===t||t.focus();const n=i||e.value.length;e.selectionStart=e.selectionEnd=n,r&&(null==e||e.select(),document.execCommand("selectAll",!1,null))},[]),t.useEffect(()=>{window.addEventListener("blur",o);const t=t=>{var e;(null===(e=c.current)||void 0===e?void 0:e.contains(t.target))||o()};return window.addEventListener("touchstart",t),()=>{window.removeEventListener("blur",o),window.removeEventListener("touchstart",t)}},[]);let d=0;const h=s.textArr.length*s.lineHeight()*s.fontSize();"middle"===n.verticalAlign&&(d=(n.a.height-h)/2),"bottom"===n.verticalAlign&&(d=n.a.height-h);const u=g(n.text);return t.createElement("textarea",{className:"polotno-input",ref:c,dir:getDir(u),style:Object.assign(Object.assign(Object.assign({},E),a),{paddingTop:d+"px"}),value:u,onChange:t=>{const e=v({oldText:n.text,newText:t.target.value,element:n});n.set({text:t.target.value,fontSize:e})},placeholder:n.placeholder,onBlur:o})}),O=e=>t.createElement(i,null,t.createElement(z,Object.assign({},e)));export const useFontLoader=(e,n)=>{const[o,r]=t.useReducer(t=>t+1,0),i=t.useRef(u(n));return t.useLayoutEffect(()=>{if(i.current=u(n),i.current){return}let t=!0;return(async()=>{i.current=!1,r();const o=h(`text ${n}`);await e.loadFont(n),setTimeout(o,100),t&&(i.current=!0,r())})(),()=>{t=!1}},[n]),[i.current]};export const getLineHeight=({fontLoaded:e,fontFamily:n,fontSize:o,lineHeight:r})=>t.useMemo(()=>{if("number"==typeof r){return r}const t=document.createElement("div");t.style.fontFamily=n,t.style.fontSize=o+"px",t.style.lineHeight=r,t.innerText="Test text",document.body.appendChild(t);const e=t.offsetHeight;return document.body.removeChild(t),e/o},[e,n,o,r]);export function usePrevious(e){const n=t.useRef(e),o=t.useRef(e);return t.useMemo(()=>{o.current=n.current,n.current=e},[e]),o.current}export const TextElement=e(({element:e,store:i})=>{const l=t.useRef(null),h=t.useRef(null),{editorEnabled:u,selectAll:v}=(e=>{const[n,o]=t.useState(!1),r=t.useRef(!1);return t.useEffect(()=>{var t=!0;return setTimeout(()=>{t&&(e._editModeEnabled&&(r.current=!0),o(!0),setTimeout(()=>{r.current=!1},50))},50),()=>{t=!1}},[]),{editorEnabled:n&&e._editModeEnabled,selectAll:r.current}})(e),[y,S]=t.useState(!1),E=t.useRef(e.a.height),b=i.selectedShapes.indexOf(e)>=0&&e.selectable,{textVerticalResizeEnabled:z}=f,A=usePrevious(e.fontFamily),[T,L]=t.useState([]);t.useEffect(()=>{var t,e;const n=null!==(e=null===(t=l.current)||void 0===t?void 0:t.textArr)&&void 0!==e?e:[];JSON.stringify(n)!==JSON.stringify(T)&&L(n)}),t.useEffect(()=>{if(e.a.width){return}const t=l.current;t.width(600),e.set({width:1.4*t.getTextWidth()})},[]),t.useEffect(()=>{b||""!==e.text||!e.removable||e.placeholder||i.deleteElements([e.id])},[b]),t.useLayoutEffect(()=>a(()=>{const t=l.current;m(t,e)}));const[k]=useFontLoader(i,e.fontFamily);let F=g(e.text);"uppercase"===e.textTransform&&(F=F.toUpperCase());const M=()=>{const t=l.current.clone({height:void 0}),e=Math.ceil(t.fontSize()*t.lineHeight()*t.textArr.length+1);return t.destroy(),e};t.useLayoutEffect(()=>{if(!k){return}const{textOverflow:t,textSplitAllowed:n}=f;if(!e.a.height){const t=M();return void i.history.ignore(()=>{e.set({height:t})})}if(!i.isPlaying){if("change-font-size"!==t||y){if("resize"===t){const t=M();z&&e.a.height<t&&i.history.ignore(()=>{var n;w(e)&&e.set({height:t}),null===(n=l.current)||void 0===n||n.height(t)},!1,!0),z||e.a.height===t||y||i.history.ignore(()=>{var n;w(e)&&e.set({height:t}),null===(n=l.current)||void 0===n||n.height(t)},!1,!0)}}else{const t=function(t,e,n=!1){const o=t.fontSize(),r=t.height(),i=g(e.text);let a=e.a.fontSize;t.height(void 0);const l=Math.round(2*e.a.fontSize)-1;for(let s=1;s<l;s++){const o=e.a.height&&t.height()>e.a.height;let r=i.split("\n").join(" ").split(/[\s-]+/).reduce((t,e)=>/[\u3000-\u303F\u3040-\u309F\u30A0-\u30FF\uFF00-\uFFEF\u4E00-\u9FAF\uAC00-\uD7AF]/.test(e)?t.concat(e.split("")):t.concat(e),[]),l=t.textArr.map(t=>t.text).join(";");const s=r.find(t=>!l.includes(t)||(l=l.replace(t,""),!1));if(!(o||s&&!n)){break}a-=.5,t.fontSize(a)}return t.fontSize(o),t.height(r),a}(l.current,e,n);if(t!==e.a.fontSize){return void i.history.ignore(()=>{e.set({fontSize:t})},!1,!0)}const o=M();e.a.height===o||z||i.history.ignore(()=>{e.set({height:o})},!1,!0)}}}),t.useLayoutEffect(()=>{const t=l.current;t&&(t.width(t.width()+1e-8),t._setTextData(),m(t,e))},[k]);const R=t.useRef(null),$=t.useRef(0),j=t=>{t.evt.preventDefault();const n=i.selectedShapes.find(t=>t===e);n&&e.contentEditable&&($.current=function(t){var e;const n=t.target,o=function(t){var e=t.getAbsoluteTransform().copy();e.invert();var n=t.getStage().getPointerPosition();return e.point(n)}(n),r=n.textArr,i=Math.floor(o.y/(n.fontSize()*n.lineHeight())),a=r.slice(0,i).reduce((t,e)=>t+e.text.length,i),l=null!==(e=r[i])&&void 0!==e?e:r[0];let s=0;return"right"===n.align()?s=n.width()-l.width:"center"===n.align()&&(s=n.width()/2-l.width/2),a+Math.round((o.x-s)/l.width*l.text.length)}(t),e.toggleEditMode())},H=!F&&e.placeholder?.6:e.a.opacity;p(l,H);const C=getLineHeight({fontLoaded:k,fontFamily:e.fontFamily,fontSize:e.a.fontSize,lineHeight:e.lineHeight}),X=e.selectable||"admin"===i.role,Y=d(e),B=t.useMemo(()=>e.backgroundEnabled?function({lines:t,lineHeight:e,width:n,align:o="left",padding:r=0,cornerRadius:i=0}){var a;t.forEach((t,e)=>{t.cx=n/2,"right"===o?t.cx=n-t.width/2:"left"===o&&(t.cx=t.width/2),"justify"!==o||t.lastInParagraph||(t.width=n),"justify"===o&&(t.cx=t.width/2)});let l=`M ${null===(a=t[0])||void 0===a?void 0:a.cx} ${-r}`;t.forEach((n,o)=>{const{cx:i}=n,a=t[o-1];a&&a.width>n.width?l+=` L ${i+n.width/2+r} ${o*e+r}`:l+=` L ${i+n.width/2+r} ${o*e-r}`;const s=t[o+1];s&&s.width>n.width?l+=` L ${i+n.width/2+r} ${(o+1)*e-r}`:l+=` L ${i+n.width/2+r} ${(o+1)*e+r}`});for(var d=t.length-1;d>=0;d--){const n=t[d],{cx:o}=n,i=t[d+1];i&&i.width>n.width?l+=` L ${o-n.width/2-r} ${(d+1)*e-r}`:l+=` L ${o-n.width/2-r} ${(d+1)*e+r}`;const a=t[d-1];a&&a.width>n.width?l+=` L ${o-n.width/2-r} ${d*e+r}`:l+=` L ${o-n.width/2-r} ${d*e-r}`}l+=" Z";const h=s(l);return c(h,i).path}({lines:JSON.parse(JSON.stringify(T)),cornerRadius:e.backgroundCornerRadius*(e.a.fontSize*C*.5),lineHeight:C*e.a.fontSize,padding:e.backgroundPadding*(e.a.fontSize*C*.5),width:e.a.width,align:e.align}):"",[e.backgroundEnabled,e.backgroundCornerRadius,e.a.fontSize,C,e.backgroundPadding,e.a.width,e.align,T]),D=x();let W=0;return"middle"===e.verticalAlign?W=(e.a.height-T.length*C*e.a.fontSize)/2:"bottom"===e.verticalAlign&&(W=e.a.height-T.length*C*e.a.fontSize),t.createElement(t.Fragment,null,t.createElement(o,{ref:h,x:e.a.x,y:e.a.y,rotation:e.a.rotation,hideInExport:!e.showInExport,listening:!1,visible:e.backgroundEnabled,opacity:e.backgroundOpacity*H,data:B,fill:e.backgroundColor,offsetY:-W}),t.createElement(r,Object.assign({ref:l,id:e.id,name:"element",hideInExport:!e.showInExport,editModeEnabled:e._editModeEnabled,x:e.a.x,y:e.a.y,rotation:e.a.rotation,width:e.a.width,height:e.a.height,text:F||e.placeholder,direction:getDir(F)},Y,{stroke:e.stroke,lineJoin:"round",strokeWidth:e.strokeWidth,fillAfterStrokeEnabled:!0,fontSize:e.a.fontSize,fontFamily:`"${e.fontFamily}", "${A}"`,fontStyle:e.fontStyle+" "+e.fontWeight,textDecoration:e.textDecoration,align:e.align,verticalAlign:e.verticalAlign,draggable:D?e.draggable&&b:e.draggable,preventDefault:!D||b,opacity:H,visible:!e._editModeEnabled,ellipsis:"ellipsis"===f.textOverflow,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,lineHeight:C,letterSpacing:e.letterSpacing*e.a.fontSize,listening:X,onDragMove:t=>{e.set({x:t.target.x(),y:t.target.y()})},onDragEnd:t=>{e.set({x:t.target.x(),y:t.target.y()})},onClick:j,onTap:j,onTransformStart:()=>{S(!0),E.current=l.current.height()},onTransform:t=>{var n,o,r;const i=t.target;null===(n=h.current)||void 0===n||n.setAttrs({x:i.x(),y:i.y(),rotation:i.rotation(),scale:i.scale()});const a=(null===(o=i.getStage())||void 0===o?void 0:o.findOne("Transformer")).getActiveAnchor();if("middle-left"===a||"middle-right"===a){const t=i.scaleX(),n=i.width()*t,o=e.a.fontSize;let r=n;n<o&&(r=o,R.current&&i.position(R.current)),i.width(r),i.scaleX(1),i.scaleY(1);const a=M();if("ellipsis"!==f.textOverflow){const t=Math.max(a,E.current);i.height(t),e.set({height:i.height()})}const l=f.textVerticalResizeEnabled?Math.max(a,E.current):M();e.set({x:i.x(),width:i.width(),rotation:i.rotation(),height:l}),m(i,e)}if("top-center"===a||"bottom-center"===a){let n="resize"===f.textOverflow?M():C*e.a.fontSize;t.target.height(Math.max(n,t.target.height()*t.target.scaleY())),t.target.scaleY(1)}R.current=t.target.position();const l=t.target.scaleX();null===(r=h.current)||void 0===r||r.setAttrs({scaleX:1,scaleY:1}),t.target.scaleX(1),t.target.scaleY(1),e.set({fontSize:e.a.fontSize*l,width:t.target.width()*l,x:t.target.x(),y:t.target.y(),rotation:t.target.rotation(),height:t.target.height()*l,shadowBlur:e.shadowBlur*l,shadowOffsetX:e.shadowOffsetX*l,shadowOffsetY:e.shadowOffsetY*l,strokeWidth:e.strokeWidth*l})},onTransformEnd:t=>{var n;const o=t.target.scaleX();t.target.scaleX(1),t.target.scaleY(1),e.set({fontSize:Math.round(e.a.fontSize*o),width:Math.ceil(t.target.width()*o),x:t.target.x(),y:t.target.y(),rotation:t.target.rotation(),height:t.target.height()*o,shadowBlur:e.shadowBlur*o,shadowOffsetX:e.shadowOffsetX*o,shadowOffsetY:e.shadowOffsetY*o,strokeWidth:e.strokeWidth*o}),null===(n=h.current)||void 0===n||n.setAttrs({scaleX:1,scaleY:1}),S(!1)}})),u&&t.createElement(n,{x:e.a.x,y:e.a.y,rotation:e.a.rotation},t.createElement(O,{textNodeRef:l,element:e,selectAll:v,cursorPosition:$.current,onBlur:()=>{e.toggleEditMode(!1)}})))});
1
+ import t from"react";import{observer as e}from"mobx-react-lite";import{Group as n,Path as o,Text as r}from"react-konva";import{Html as i}from"react-konva-utils";import{autorun as a}from"mobx";import l from"konva";import{parsePath as s,roundCommands as c}from"svg-round-corners";import{useColor as d}from"./use-color.js";import{incrementLoader as u}from"../utils/loader.js";import{isFontLoaded as h}from"../utils/fonts.js";import{flags as f}from"../utils/flags.js";import{removeTags as g}from"../utils/text.js";import{applyFilter as m}from"./apply-filters.js";import{useFadeIn as p}from"./use-fadein.js";import{isTouchDevice as x}from"../utils/screen.js";import{isAlive as w}from"mobx-state-tree";import{getLimitedFontSize as y}from"./text-element/max-font-size.js";let v;function S(){return v||(v=document.getElementById("polotno-text-style"),v||(v=document.createElement("style"),v.id="polotno-text-style",document.head.appendChild(v)),v)}l._fixTextRendering=!0;const E={border:"none",padding:"0px",overflow:"hidden",background:"none",outline:"none",resize:"none",overflowWrap:"break-word",whiteSpace:"pre-wrap",userSelect:"text",wordBreak:"normal",textTransform:"none"};function b(t){var e="֑-߿‏‫‮יִ-﷽ﹰ-ﻼ";return new RegExp("^[^"+e+"]*?["+e+"]").test(t)}export function isRTLText(t){t=t.replace(/\s/g,"");let e=0;for(var n=0;n<t.length;n++){b(t[n])&&(e+=1)}return e>t.length/2}export function getDir(t){return isRTLText(t)?"rtl":"ltr"}const z=e(({textNodeRef:e,element:n,onBlur:o,selectAll:r,cursorPosition:i})=>{const[a,l]=t.useState(E),s=e.current;t.useLayoutEffect(()=>{const t={};t.width=s.width()-2*s.padding()+"px",t.height=s.height()-2*s.padding()+s.fontSize()*s.lineHeight()+"px",t.fontSize=s.fontSize()+"px",t.lineHeight=s.lineHeight()+.01,t.fontFamily=s.fontFamily(),t.textAlign=s.align(),t.color=s.fill(),t.fontWeight=n.fontWeight,t.fontStyle=n.fontStyle,t.letterSpacing=n.letterSpacing+"em",t.opacity=Math.max(n.a.opacity,.2),t.textTransform=n.textTransform;const e=`\n .polotno-input::placeholder {\n color: ${a.color};\n opacity: 0.6;\n }\n `,o=S();o.innerHTML="",o.appendChild(document.createTextNode(e)),JSON.stringify(t)!==JSON.stringify(a)&&l(t)});const c=t.useRef(null);t.useLayoutEffect(()=>{var t;const e=c.current;if(!e){return}null===(t=c.current)||void 0===t||t.focus();const n=i||e.value.length;e.selectionStart=e.selectionEnd=n,r&&(null==e||e.select(),document.execCommand("selectAll",!1,null))},[]),t.useEffect(()=>{window.addEventListener("blur",o);const t=t=>{var e;(null===(e=c.current)||void 0===e?void 0:e.contains(t.target))||o()};return window.addEventListener("touchstart",t),()=>{window.removeEventListener("blur",o),window.removeEventListener("touchstart",t)}},[]);let d=0;const u=s.textArr.length*s.lineHeight()*s.fontSize();"middle"===n.verticalAlign&&(d=(n.a.height-u)/2),"bottom"===n.verticalAlign&&(d=n.a.height-u);const h=g(n.text);return t.createElement("textarea",{className:"polotno-input",ref:c,dir:getDir(h),style:Object.assign(Object.assign(Object.assign({},E),a),{paddingTop:d+"px"}),value:h,onChange:t=>{const e=y({oldText:n.text,newText:t.target.value,element:n});n.set({text:t.target.value,fontSize:e})},placeholder:n.placeholder,onBlur:o})}),O=e=>t.createElement(i,null,t.createElement(z,Object.assign({},e)));export const useFontLoader=(e,n)=>{const[o,r]=t.useReducer(t=>t+1,0),i=t.useRef(h(n)),a=t.useRef(null);return t.useLayoutEffect(()=>{if(i.current=h(n),i.current){return}let t=!0;return(async()=>{i.current=!1,r();const o=u(`text ${n}`);await e.loadFont(n),t?(a.current=o,i.current=!0,r()):o()})(),()=>{a.current&&(a.current(),a.current=null),t=!1}},[n]),t.useEffect(()=>{i.current&&setTimeout(()=>{a.current&&(a.current(),a.current=null)})},[i.current]),[i.current]};export const getLineHeight=({fontLoaded:e,fontFamily:n,fontSize:o,lineHeight:r})=>t.useMemo(()=>{if("number"==typeof r){return r}const t=document.createElement("div");t.style.fontFamily=n,t.style.fontSize=o+"px",t.style.lineHeight=r,t.innerText="Test text",document.body.appendChild(t);const e=t.offsetHeight;return document.body.removeChild(t),e/o},[e,n,o,r]);export function usePrevious(e){const n=t.useRef(e),o=t.useRef(e);return t.useMemo(()=>{o.current=n.current,n.current=e},[e]),o.current}export const TextElement=e(({element:e,store:i})=>{const l=t.useRef(null),u=t.useRef(null),{editorEnabled:h,selectAll:y}=(e=>{const[n,o]=t.useState(!1),r=t.useRef(!1);return t.useEffect(()=>{var t=!0;return setTimeout(()=>{t&&(e._editModeEnabled&&(r.current=!0),o(!0),setTimeout(()=>{r.current=!1},50))},50),()=>{t=!1}},[]),{editorEnabled:n&&e._editModeEnabled,selectAll:r.current}})(e),[v,S]=t.useState(!1),E=t.useRef(e.a.height),b=i.selectedShapes.indexOf(e)>=0&&e.selectable,{textVerticalResizeEnabled:z}=f,A=usePrevious(e.fontFamily),[F,T]=t.useState([]);t.useEffect(()=>{var t,e;const n=null!==(e=null===(t=l.current)||void 0===t?void 0:t.textArr)&&void 0!==e?e:[];JSON.stringify(n)!==JSON.stringify(F)&&T(n)}),t.useEffect(()=>{if(e.a.width){return}const t=l.current;t.width(600),e.set({width:1.4*t.getTextWidth()})},[]),t.useEffect(()=>{b||""!==e.text||!e.removable||e.placeholder||i.deleteElements([e.id])},[b]),t.useLayoutEffect(()=>a(()=>{const t=l.current;m(t,e)}));const[L]=useFontLoader(i,e.fontFamily);let k=g(e.text);"uppercase"===e.textTransform&&(k=k.toUpperCase());const R=()=>{const t=l.current.clone({height:void 0}),e=Math.ceil(t.fontSize()*t.lineHeight()*t.textArr.length+1);return t.destroy(),e};t.useLayoutEffect(()=>{if(!L){return}const{textOverflow:t,textSplitAllowed:n}=f;if(!e.a.height){const t=R();return void i.history.ignore(()=>{e.set({height:t})})}if(!i.isPlaying){if("change-font-size"!==t||v){if("resize"===t){const t=R();z&&e.a.height<t&&i.history.ignore(()=>{var n;w(e)&&e.set({height:t}),null===(n=l.current)||void 0===n||n.height(t)},!1,!0),z||e.a.height===t||v||i.history.ignore(()=>{var n;w(e)&&e.set({height:t}),null===(n=l.current)||void 0===n||n.height(t)},!1,!0)}}else{const t=function(t,e,n=!1){const o=t.fontSize(),r=t.height(),i=g(e.text);let a=e.a.fontSize;t.height(void 0);const l=Math.round(2*e.a.fontSize)-1;for(let s=1;s<l;s++){const o=e.a.height&&t.height()>e.a.height;let r=i.split("\n").join(" ").split(/[\s-]+/).reduce((t,e)=>/[\u3000-\u303F\u3040-\u309F\u30A0-\u30FF\uFF00-\uFFEF\u4E00-\u9FAF\uAC00-\uD7AF]/.test(e)?t.concat(e.split("")):t.concat(e),[]),l=t.textArr.map(t=>t.text).join(";");const s=r.find(t=>!l.includes(t)||(l=l.replace(t,""),!1));if(!(o||s&&!n)){break}a-=.5,t.fontSize(a)}return t.fontSize(o),t.height(r),a}(l.current,e,n);if(t!==e.a.fontSize){return void i.history.ignore(()=>{e.set({fontSize:t})},!1,!0)}const o=R();e.a.height===o||z||i.history.ignore(()=>{e.set({height:o})},!1,!0)}}}),t.useLayoutEffect(()=>{const t=l.current;t&&(t.width(t.width()+1e-8),t.width(t.width()-1e-8),t._setTextData(),m(t,e))},[L]);const M=t.useRef(null),$=t.useRef(0),j=t=>{t.evt.preventDefault();const n=i.selectedShapes.find(t=>t===e);n&&e.contentEditable&&($.current=function(t){var e;const n=t.target,o=function(t){var e=t.getAbsoluteTransform().copy();e.invert();var n=t.getStage().getPointerPosition();return e.point(n)}(n),r=n.textArr,i=Math.floor(o.y/(n.fontSize()*n.lineHeight())),a=r.slice(0,i).reduce((t,e)=>t+e.text.length,i),l=null!==(e=r[i])&&void 0!==e?e:r[0];let s=0;return"right"===n.align()?s=n.width()-l.width:"center"===n.align()&&(s=n.width()/2-l.width/2),a+Math.round((o.x-s)/l.width*l.text.length)}(t),e.toggleEditMode())},H=!k&&e.placeholder?.6:e.a.opacity;p(l,H);const C=getLineHeight({fontLoaded:L,fontFamily:e.fontFamily,fontSize:e.a.fontSize,lineHeight:e.lineHeight}),X=e.selectable||"admin"===i.role,Y=d(e),B=t.useMemo(()=>e.backgroundEnabled?function({lines:t,lineHeight:e,width:n,align:o="left",padding:r=0,cornerRadius:i=0}){var a;t.forEach((t,e)=>{t.cx=n/2,"right"===o?t.cx=n-t.width/2:"left"===o&&(t.cx=t.width/2),"justify"!==o||t.lastInParagraph||(t.width=n),"justify"===o&&(t.cx=t.width/2)});let l=`M ${null===(a=t[0])||void 0===a?void 0:a.cx} ${-r}`;t.forEach((n,o)=>{const{cx:i}=n,a=t[o-1];a&&a.width>n.width?l+=` L ${i+n.width/2+r} ${o*e+r}`:l+=` L ${i+n.width/2+r} ${o*e-r}`;const s=t[o+1];s&&s.width>n.width?l+=` L ${i+n.width/2+r} ${(o+1)*e-r}`:l+=` L ${i+n.width/2+r} ${(o+1)*e+r}`});for(var d=t.length-1;d>=0;d--){const n=t[d],{cx:o}=n,i=t[d+1];i&&i.width>n.width?l+=` L ${o-n.width/2-r} ${(d+1)*e-r}`:l+=` L ${o-n.width/2-r} ${(d+1)*e+r}`;const a=t[d-1];a&&a.width>n.width?l+=` L ${o-n.width/2-r} ${d*e+r}`:l+=` L ${o-n.width/2-r} ${d*e-r}`}l+=" Z";const u=s(l);return c(u,i).path}({lines:JSON.parse(JSON.stringify(F)),cornerRadius:e.backgroundCornerRadius*(e.a.fontSize*C*.5),lineHeight:C*e.a.fontSize,padding:e.backgroundPadding*(e.a.fontSize*C*.5),width:e.a.width,align:e.align}):"",[e.backgroundEnabled,e.backgroundCornerRadius,e.a.fontSize,C,e.backgroundPadding,e.a.width,e.align,F]),D=x();let W=0;"middle"===e.verticalAlign?W=(e.a.height-F.length*C*e.a.fontSize)/2:"bottom"===e.verticalAlign&&(W=e.a.height-F.length*C*e.a.fontSize);const N=L?e.fontFamily:A===e.fontFamily?"Arial":e.fontFamily;return t.createElement(t.Fragment,null,t.createElement(o,{ref:u,x:e.a.x,y:e.a.y,rotation:e.a.rotation,hideInExport:!e.showInExport,listening:!1,visible:e.backgroundEnabled,opacity:e.backgroundOpacity*H,data:B,fill:e.backgroundColor,offsetY:-W}),t.createElement(r,Object.assign({ref:l,id:e.id,name:"element",hideInExport:!e.showInExport,editModeEnabled:e._editModeEnabled,x:e.a.x,y:e.a.y,rotation:e.a.rotation,width:e.a.width,height:e.a.height,text:k||e.placeholder,direction:getDir(k)},Y,{stroke:e.stroke,lineJoin:"round",strokeWidth:e.strokeWidth,fillAfterStrokeEnabled:!0,fontSize:e.a.fontSize,fontFamily:N,fontStyle:e.fontStyle+" "+e.fontWeight,textDecoration:e.textDecoration,align:e.align,verticalAlign:e.verticalAlign,draggable:D?e.draggable&&b:e.draggable,preventDefault:!D||b,opacity:H,visible:!e._editModeEnabled,ellipsis:"ellipsis"===f.textOverflow,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,lineHeight:C,letterSpacing:e.letterSpacing*e.a.fontSize,listening:X,onDragMove:t=>{e.set({x:t.target.x(),y:t.target.y()})},onDragEnd:t=>{e.set({x:t.target.x(),y:t.target.y()})},onClick:j,onTap:j,onTransformStart:()=>{S(!0),E.current=l.current.height()},onTransform:t=>{var n,o,r;const i=t.target;null===(n=u.current)||void 0===n||n.setAttrs({x:i.x(),y:i.y(),rotation:i.rotation(),scale:i.scale()});const a=(null===(o=i.getStage())||void 0===o?void 0:o.findOne("Transformer")).getActiveAnchor();if("middle-left"===a||"middle-right"===a){const t=i.scaleX(),n=i.width()*t,o=e.a.fontSize;let r=n;n<o&&(r=o,M.current&&i.position(M.current)),i.width(r),i.scaleX(1),i.scaleY(1);const a=R();if("ellipsis"!==f.textOverflow){const t=Math.max(a,E.current);i.height(t),e.set({height:i.height()})}const l=f.textVerticalResizeEnabled?Math.max(a,E.current):R();e.set({x:i.x(),width:i.width(),rotation:i.rotation(),height:l}),m(i,e)}if("top-center"===a||"bottom-center"===a){let n="resize"===f.textOverflow?R():C*e.a.fontSize;t.target.height(Math.max(n,t.target.height()*t.target.scaleY())),t.target.scaleY(1)}M.current=t.target.position();const l=t.target.scaleX();null===(r=u.current)||void 0===r||r.setAttrs({scaleX:1,scaleY:1}),t.target.scaleX(1),t.target.scaleY(1),e.set({fontSize:e.a.fontSize*l,width:t.target.width()*l,x:t.target.x(),y:t.target.y(),rotation:t.target.rotation(),height:t.target.height()*l,shadowBlur:e.shadowBlur*l,shadowOffsetX:e.shadowOffsetX*l,shadowOffsetY:e.shadowOffsetY*l,strokeWidth:e.strokeWidth*l})},onTransformEnd:t=>{var n;const o=t.target.scaleX();t.target.scaleX(1),t.target.scaleY(1),e.set({fontSize:Math.round(e.a.fontSize*o),width:Math.ceil(t.target.width()*o),x:t.target.x(),y:t.target.y(),rotation:t.target.rotation(),height:t.target.height()*o,shadowBlur:e.shadowBlur*o,shadowOffsetX:e.shadowOffsetX*o,shadowOffsetY:e.shadowOffsetY*o,strokeWidth:e.strokeWidth*o}),null===(n=u.current)||void 0===n||n.setAttrs({scaleX:1,scaleY:1}),S(!1)}})),h&&t.createElement(n,{x:e.a.x,y:e.a.y,rotation:e.a.rotation},t.createElement(O,{textNodeRef:l,element:e,selectAll:y,cursorPosition:$.current,onBlur:()=>{e.toggleEditMode(!1)}})))});
package/canvas/use-transformer-snap.d.ts CHANGED
@@ -17,6 +17,7 @@ declare let snapFilterFunc: ({ targetKonvaNodes, guideKonvaNode, distance, snapD
17
17
  snapDirection: any;
18
18
  }) => boolean;
19
19
  export declare const setSnapFilterFunc: (func: typeof snapFilterFunc) => void;
20
+ export declare const ensureDragOrder: () => void;
20
21
  export declare function useSnap(ref: {
21
22
  current: Konva.Transformer | null;
22
23
  }, store: StoreType, style?: SnapGuideStyle): void;
package/canvas/use-transformer-snap.js CHANGED
@@ -1 +1 @@
1
- import e from"react";import t from"konva";import{getClientRect as n}from"../utils/math.js";const o={stroke:"rgb(0, 161, 255)",strokeWidth:1,dash:[4,6]};export const setSnapGuideStyle=({stroke:e,strokeWidth:t,dash:n})=>{void 0!==e&&(o.stroke=e),void 0!==t&&(o.strokeWidth=t),void 0!==n&&(o.dash=n)};let i=({targetKonvaNodes:e,guideKonvaNode:t,distance:n,snapDirection:o})=>n<5;export const setSnapFilterFunc=e=>{i=e};function r(e,t){var n=[],o=[];e.vertical.forEach(e=>{t.vertical.forEach(t=>{var o=Math.abs(e.offset-t.guide);i({targetKonvaNodes:t.nodes,guideKonvaNode:e.node,distance:o,snapDirection:e.snap})&&n.push({lineGuide:e.offset,diff:o,snap:t.snap,offset:t.offset})})}),e.horizontal.forEach(e=>{t.horizontal.forEach(t=>{var n=Math.abs(e.offset-t.guide);i({targetKonvaNodes:t.nodes,guideKonvaNode:e.node,distance:n,snapDirection:e.snap})&&o.push({lineGuide:e.offset,diff:n,snap:t.snap,offset:t.offset})})});var r=[];const s=n.sort((e,t)=>e.diff-t.diff),a=o.sort((e,t)=>e.diff-t.diff);var d=s[0],f=a[0];return d&&s.filter(e=>Math.abs(e.diff-d.diff)<.1).forEach(e=>{r.push(Object.assign({orientation:"V"},e))}),f&&a.filter(e=>Math.abs(e.diff-f.diff)<.1).forEach(e=>{r.push(Object.assign({orientation:"H"},e))}),r}export function useSnap(i,d,f){const c=e.useRef(null);setSnapGuideStyle(f);const l=e=>e.hasName("element")||e.hasName("page-background")||!c.current&&e.hasName("elements-area");function u(e){var t;const n=null===(t=i.current)||void 0===t?void 0:t.getStage(),o=[],r=[];return n.find(l).forEach(t=>{if(!(e.indexOf(t)>=0)){var n=t.getClientRect({skipShadow:!0,skipStroke:!0});o.push({offset:n.x,node:t,snap:"start"},{offset:n.x+n.width,node:t,snap:"end"},{offset:n.x+n.width/2,node:t,snap:"center"}),r.push({offset:n.y,node:t,snap:"start"},{offset:n.y+n.height,node:t,snap:"end"},{offset:n.y+n.height/2,node:t,snap:"center"})}}),{vertical:o,horizontal:r}}function h(e){var n;const r=null===(n=i.current)||void 0===n?void 0:n.getLayer(),s=null==r?void 0:r.children.find(e=>"line-guides"===e.name());e.forEach(e=>{if("H"===e.orientation){var n=new t.Line({x:-r.getStage().x(),y:-r.getStage().y(),points:[-6e3,e.lineGuide,6e3,e.lineGuide],stroke:o.stroke,strokeWidth:o.strokeWidth,name:"guid-line",dash:o.dash});null==s||s.add(n),r.batchDraw()}else{"V"===e.orientation&&(n=new t.Line({x:-r.getStage().x(),y:-r.getStage().y(),points:[e.lineGuide,-6e3,e.lineGuide,6e3],stroke:o.stroke,strokeWidth:o.strokeWidth,name:"guid-line",dash:o.dash}),null==s||s.add(n))}})}const g=e=>{const o=e.target.getLayer().children.find(e=>"line-guides"===e.name());null==o||o.destroyChildren();var i=u(e.target.nodes()),s=function(e){const o=e.__getNodeRect(),i=n(Object.assign(Object.assign({},o),{rotation:t.Util.radToDeg(o.rotation)})),r=e.getAbsolutePosition();return{vertical:[{guide:i.x,offset:r.x-i.x,snap:"start",nodes:e.nodes()},{guide:i.x+i.width/2,offset:r.x-i.x-i.width/2,snap:"center",nodes:e.nodes()},{guide:i.x+i.width,offset:r.x-i.x-i.width,snap:"end",nodes:e.nodes()}],horizontal:[{guide:i.y,offset:r.y-i.y,snap:"start",nodes:e.nodes()},{guide:i.y+i.height/2,offset:r.y-i.y-i.height/2,snap:"center",nodes:e.nodes()},{guide:i.y+i.height,offset:r.y-i.y-i.height,snap:"end",nodes:e.nodes()}]}}(e.target),a=r(i,s);if(!a.length){return}h(a);const d=e.target.getAbsolutePosition(),f=(e.target.nodes().map(e=>e.getAbsolutePosition()),Object.assign({},d));a.forEach(e=>{switch(e.snap){case"start":case"center":case"end":switch(e.orientation){case"V":f.x=e.lineGuide+e.offset;break;case"H":f.y=e.lineGuide+e.offset}}});const c=f.x-d.x,l=f.y-d.y;e.evt.ctrlKey||e.evt.metaKey||e.target.nodes().forEach(e=>{const t=e.getAbsolutePosition();e.setAbsolutePosition({x:t.x+c,y:t.y+l})})},y=(e,t,n)=>{var o;const d=i.current,f=d.getLayer().children.find(e=>"line-guides"===e.name());if(null==f||f.destroyChildren(),"rotater"===d.getActiveAnchor()){return t}const c=d.getActiveAnchor(),l=a[c],g=null===(o=d.findOne(`.${l}`))||void 0===o?void 0:o.getAbsolutePosition();if(!g){return t}const y={x:e.x-g.x,y:e.y-g.y},p=function(e,t){const n=s(e,t)/s(t,t);return{x:n*t.x,y:n*t.y}}({x:t.x-e.x,y:t.y-e.y},y),x={x:e.x+p.x,y:e.y+p.y};var v=r(u(d.nodes()),{vertical:[{guide:x.x,offset:0,snap:"start",nodes:d.nodes()}],horizontal:[{guide:x.y,offset:0,snap:"start",nodes:d.nodes()}]});if(!v.length){return t}if(h(v),n.ctrlKey||n.metaKey){return t}const m=[];if(v.forEach(e=>{const t=function(e,t,n){if("V"===n.orientation){const o=n.lineGuide;if(Math.abs(t.x-e.x)<1e-4){return null}const i=(t.y-e.y)/(t.x-e.x);return{x:o,y:i*o+(e.y-i*e.x)}}{const o=n.lineGuide;if(Math.abs(t.y-e.y)<1e-4){return null}const i=(t.y-e.y)/(t.x-e.x);return{x:(o-e.y)/i+e.x,y:o}}}(x,g,{orientation:e.orientation,lineGuide:e.lineGuide});t&&m.push(t)}),m.length>0){let e=m[0],t=Math.sqrt(Math.pow(x.x-e.x,2)+Math.pow(x.y-e.y,2));if(m.forEach(n=>{const o=Math.sqrt(Math.pow(x.x-n.x,2)+Math.pow(x.y-n.y,2));o<t&&(t=o,e=n)}),t<10){return e}}return x},p=e=>{if(!e.target){return}const t=e.target.getLayer(),n=t.children.find(e=>"line-guides"===e.name());null==n||n.destroyChildren(),t.batchDraw()};e.useEffect(()=>{i.current&&(i.current.anchorDragBoundFunc(y),i.current.on("dragmove",g),i.current.on("dragend",p),i.current.on("transformend",p),i.current.on("transform",e=>{var t,n;e.evt.ctrlKey||e.evt.metaKey?null===(t=i.current)||void 0===t||t.rotationSnapTolerance(0):null===(n=i.current)||void 0===n||n.rotationSnapTolerance(5)}))},[])}export function useAnchorSnap(n,i,s){const a=e=>e.hasName("element")||e.hasName("line-anchor")||e.hasName("page-background")||e.hasName("elements-area"),d=e=>{const s=e.target.getLayer().children.find(e=>"line-guides"===e.name());null==s||s.destroyChildren();var d,f=r(function(e){var t;const o=null===(t=n.current)||void 0===t?void 0:t.getStage();var i=[],r=[];return o.find(a).forEach(t=>{if(!(e.indexOf(t)>=0)){var n=t.getClientRect({skipShadow:!0,skipStroke:!0});t.hasName("line-anchor")&&(n={x:t.absolutePosition().x,y:t.absolutePosition().y,width:0,height:0}),i.push({offset:n.x,node:t,snap:"start"},{offset:n.x+n.width,node:t,snap:"end"},{offset:n.x+n.width/2,node:t,snap:"center"}),r.push({offset:n.y,node:t,snap:"start"},{offset:n.y+n.height,node:t,snap:"end"},{offset:n.y+n.height/2,node:t,snap:"center"})}}),{vertical:i,horizontal:r}}([e.target,...i.map(e=>e.current)]),{vertical:[{guide:(d=e.target).absolutePosition().x,offset:0,snap:"center",nodes:[d]}],horizontal:[{guide:d.absolutePosition().y,offset:0,snap:"center",nodes:[d]}]});if(!f.length){return}!function(e){var i;const r=null===(i=n.current)||void 0===i?void 0:i.getLayer(),s=null==r?void 0:r.children.find(e=>"line-guides"===e.name());e.forEach(e=>{if("H"===e.orientation){var n=new t.Line({points:[-6e3,e.lineGuide,6e3,e.lineGuide],stroke:o.stroke,strokeWidth:o.strokeWidth,name:"guid-line",dash:o.dash});null==s||s.add(n),r.batchDraw()}else{"V"===e.orientation&&(n=new t.Line({points:[e.lineGuide,-6e3,e.lineGuide,6e3],stroke:o.stroke,strokeWidth:o.strokeWidth,name:"guid-line",dash:o.dash}),null==s||s.add(n))}})}(f);const c=e.target.getAbsolutePosition(),l=Object.assign({},c);f.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 u=l.x-c.x,h=l.y-c.y;if(!e.evt.ctrlKey&&!e.evt.metaKey){const t=e.target.getAbsolutePosition();e.target.absolutePosition({x:t.x+u,y:t.y+h})}},f=e=>{if(!e.target){return}const t=e.target.getLayer(),n=t.children.find(e=>"line-guides"===e.name());null==n||n.destroyChildren(),t.batchDraw()};e.useEffect(()=>{n.current&&(n.current.on("dragmove",d),n.current.on("dragend",f))},s)}function s(e,t){return e.x*t.x+e.y*t.y}const a={"top-left":"bottom-right","top-center":"bottom-center","top-right":"bottom-left","middle-right":"middle-left","bottom-right":"top-left","bottom-center":"top-center","bottom-left":"top-right","middle-left":"middle-right"};
1
+ import e from"react";import t from"konva";import{getClientRect as n}from"../utils/math.js";const o={stroke:"rgb(0, 161, 255)",strokeWidth:1,dash:[4,6]};export const setSnapGuideStyle=({stroke:e,strokeWidth:t,dash:n})=>{void 0!==e&&(o.stroke=e),void 0!==t&&(o.strokeWidth=t),void 0!==n&&(o.dash=n)};let r=({targetKonvaNodes:e,guideKonvaNode:t,distance:n,snapDirection:o})=>n<5;export const setSnapFilterFunc=e=>{r=e};function i(e,t){var n=[],o=[];e.vertical.forEach(e=>{t.vertical.forEach(t=>{var o=Math.abs(e.offset-t.guide);r({targetKonvaNodes:t.nodes,guideKonvaNode:e.node,distance:o,snapDirection:e.snap})&&n.push({lineGuide:e.offset,diff:o,snap:t.snap,offset:t.offset})})}),e.horizontal.forEach(e=>{t.horizontal.forEach(t=>{var n=Math.abs(e.offset-t.guide);r({targetKonvaNodes:t.nodes,guideKonvaNode:e.node,distance:n,snapDirection:e.snap})&&o.push({lineGuide:e.offset,diff:n,snap:t.snap,offset:t.offset})})});var i=[];const s=n.sort((e,t)=>e.diff-t.diff),a=o.sort((e,t)=>e.diff-t.diff);var d=s[0],f=a[0];return d&&s.filter(e=>Math.abs(e.diff-d.diff)<.1).forEach(e=>{i.push(Object.assign({orientation:"V"},e))}),f&&a.filter(e=>Math.abs(e.diff-f.diff)<.1).forEach(e=>{i.push(Object.assign({orientation:"H"},e))}),i}export const ensureDragOrder=()=>{if(0===t.DD._dragElements.size){return}const e=[...t.DD._dragElements.entries()],n=e.find(([e,n])=>n.node instanceof t.Transformer);n&&(e.splice(e.indexOf(n),1),e.unshift(n),t.DD._dragElements.clear(),e.forEach(([e,n])=>{t.DD._dragElements.set(e,n)}))};export function useSnap(r,d,f){const c=e.useRef(null);setSnapGuideStyle(f);const l=e=>e.hasName("element")||e.hasName("page-background")||!c.current&&e.hasName("elements-area");function u(e){var t;const n=null===(t=r.current)||void 0===t?void 0:t.getStage(),o=[],i=[];return n.find(l).forEach(t=>{if(!(e.indexOf(t)>=0)){var n=t.getClientRect({skipShadow:!0,skipStroke:!0});o.push({offset:n.x,node:t,snap:"start"},{offset:n.x+n.width,node:t,snap:"end"},{offset:n.x+n.width/2,node:t,snap:"center"}),i.push({offset:n.y,node:t,snap:"start"},{offset:n.y+n.height,node:t,snap:"end"},{offset:n.y+n.height/2,node:t,snap:"center"})}}),{vertical:o,horizontal:i}}function h(e){var n;const i=null===(n=r.current)||void 0===n?void 0:n.getLayer(),s=null==i?void 0:i.children.find(e=>"line-guides"===e.name());e.forEach(e=>{if("H"===e.orientation){var n=new t.Line({x:-i.getStage().x(),y:-i.getStage().y(),points:[-6e3,e.lineGuide,6e3,e.lineGuide],stroke:o.stroke,strokeWidth:o.strokeWidth,name:"guid-line",dash:o.dash});null==s||s.add(n),i.batchDraw()}else{"V"===e.orientation&&(n=new t.Line({x:-i.getStage().x(),y:-i.getStage().y(),points:[e.lineGuide,-6e3,e.lineGuide,6e3],stroke:o.stroke,strokeWidth:o.strokeWidth,name:"guid-line",dash:o.dash}),null==s||s.add(n))}})}const g=e=>{const o=e.target.getLayer().children.find(e=>"line-guides"===e.name());null==o||o.destroyChildren();var r=u(e.target.nodes()),s=function(e){const o=e.__getNodeRect(),r=n(Object.assign(Object.assign({},o),{rotation:t.Util.radToDeg(o.rotation)})),i=e.getAbsolutePosition();return{vertical:[{guide:r.x,offset:i.x-r.x,snap:"start",nodes:e.nodes()},{guide:r.x+r.width/2,offset:i.x-r.x-r.width/2,snap:"center",nodes:e.nodes()},{guide:r.x+r.width,offset:i.x-r.x-r.width,snap:"end",nodes:e.nodes()}],horizontal:[{guide:r.y,offset:i.y-r.y,snap:"start",nodes:e.nodes()},{guide:r.y+r.height/2,offset:i.y-r.y-r.height/2,snap:"center",nodes:e.nodes()},{guide:r.y+r.height,offset:i.y-r.y-r.height,snap:"end",nodes:e.nodes()}]}}(e.target),a=i(r,s);if(!a.length){return}h(a);const d=e.target.getAbsolutePosition(),f=(e.target.nodes().map(e=>e.getAbsolutePosition()),Object.assign({},d));a.forEach(e=>{switch(e.snap){case"start":case"center":case"end":switch(e.orientation){case"V":f.x=e.lineGuide+e.offset;break;case"H":f.y=e.lineGuide+e.offset}}});const c=f.x-d.x,l=f.y-d.y;e.evt.ctrlKey||e.evt.metaKey||e.target.nodes().forEach(e=>{const t=e.getAbsolutePosition();e.setAbsolutePosition({x:t.x+c,y:t.y+l})})},y=(e,t,n)=>{var o;const d=r.current,f=d.getLayer().children.find(e=>"line-guides"===e.name());if(null==f||f.destroyChildren(),"rotater"===d.getActiveAnchor()){return t}const c=d.getActiveAnchor(),l=a[c],g=null===(o=d.findOne(`.${l}`))||void 0===o?void 0:o.getAbsolutePosition();if(!g){return t}const y={x:e.x-g.x,y:e.y-g.y},p=function(e,t){const n=s(e,t)/s(t,t);return{x:n*t.x,y:n*t.y}}({x:t.x-e.x,y:t.y-e.y},y),x={x:e.x+p.x,y:e.y+p.y};var v=i(u(d.nodes()),{vertical:[{guide:x.x,offset:0,snap:"start",nodes:d.nodes()}],horizontal:[{guide:x.y,offset:0,snap:"start",nodes:d.nodes()}]});if(!v.length){return t}if(h(v),n.ctrlKey||n.metaKey){return t}const m=[];if(v.forEach(e=>{const t=function(e,t,n){if("V"===n.orientation){const o=n.lineGuide;if(Math.abs(t.x-e.x)<1e-4){return null}const r=(t.y-e.y)/(t.x-e.x);return{x:o,y:r*o+(e.y-r*e.x)}}{const o=n.lineGuide;if(Math.abs(t.y-e.y)<1e-4){return null}const r=(t.y-e.y)/(t.x-e.x);return{x:(o-e.y)/r+e.x,y:o}}}(x,g,{orientation:e.orientation,lineGuide:e.lineGuide});t&&m.push(t)}),m.length>0){let e=m[0],t=Math.sqrt(Math.pow(x.x-e.x,2)+Math.pow(x.y-e.y,2));if(m.forEach(n=>{const o=Math.sqrt(Math.pow(x.x-n.x,2)+Math.pow(x.y-n.y,2));o<t&&(t=o,e=n)}),t<10){return e}}return x},p=e=>{if(!e.target){return}const t=e.target.getLayer(),n=t.children.find(e=>"line-guides"===e.name());null==n||n.destroyChildren(),t.batchDraw()};e.useEffect(()=>{r.current&&(r.current.anchorDragBoundFunc(y),r.current.on("dragstart",e=>{setTimeout(()=>{ensureDragOrder()})}),r.current.on("dragmove",g),r.current.on("dragend",p),r.current.on("transformend",p),r.current.on("transform",e=>{var t,n;e.evt.ctrlKey||e.evt.metaKey?null===(t=r.current)||void 0===t||t.rotationSnapTolerance(0):null===(n=r.current)||void 0===n||n.rotationSnapTolerance(5)}))},[])}export function useAnchorSnap(n,r,s){const a=e=>e.hasName("element")||e.hasName("line-anchor")||e.hasName("page-background")||e.hasName("elements-area"),d=e=>{const s=e.target.getLayer().children.find(e=>"line-guides"===e.name());null==s||s.destroyChildren();var d,f=i(function(e){var t;const o=null===(t=n.current)||void 0===t?void 0:t.getStage();var r=[],i=[];return o.find(a).forEach(t=>{if(!(e.indexOf(t)>=0)){var n=t.getClientRect({skipShadow:!0,skipStroke:!0});t.hasName("line-anchor")&&(n={x:t.absolutePosition().x,y:t.absolutePosition().y,width:0,height:0}),r.push({offset:n.x,node:t,snap:"start"},{offset:n.x+n.width,node:t,snap:"end"},{offset:n.x+n.width/2,node:t,snap:"center"}),i.push({offset:n.y,node:t,snap:"start"},{offset:n.y+n.height,node:t,snap:"end"},{offset:n.y+n.height/2,node:t,snap:"center"})}}),{vertical:r,horizontal:i}}([e.target,...r.map(e=>e.current)]),{vertical:[{guide:(d=e.target).absolutePosition().x,offset:0,snap:"center",nodes:[d]}],horizontal:[{guide:d.absolutePosition().y,offset:0,snap:"center",nodes:[d]}]});if(!f.length){return}!function(e){var r;const i=null===(r=n.current)||void 0===r?void 0:r.getLayer(),s=null==i?void 0:i.children.find(e=>"line-guides"===e.name());e.forEach(e=>{if("H"===e.orientation){var n=new t.Line({points:[-6e3,e.lineGuide,6e3,e.lineGuide],stroke:o.stroke,strokeWidth:o.strokeWidth,name:"guid-line",dash:o.dash});null==s||s.add(n),i.batchDraw()}else{"V"===e.orientation&&(n=new t.Line({points:[e.lineGuide,-6e3,e.lineGuide,6e3],stroke:o.stroke,strokeWidth:o.strokeWidth,name:"guid-line",dash:o.dash}),null==s||s.add(n))}})}(f);const c=e.target.getAbsolutePosition(),l=Object.assign({},c);f.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 u=l.x-c.x,h=l.y-c.y;if(!e.evt.ctrlKey&&!e.evt.metaKey){const t=e.target.getAbsolutePosition();e.target.absolutePosition({x:t.x+u,y:t.y+h})}},f=e=>{if(!e.target){return}const t=e.target.getLayer(),n=t.children.find(e=>"line-guides"===e.name());null==n||n.destroyChildren(),t.batchDraw()};e.useEffect(()=>{n.current&&(n.current.on("dragmove",d),n.current.on("dragend",f))},s)}function s(e,t){return e.x*t.x+e.y*t.y}const a={"top-left":"bottom-right","top-center":"bottom-center","top-right":"bottom-left","middle-right":"middle-left","bottom-right":"top-left","bottom-center":"top-center","bottom-left":"top-right","middle-left":"middle-right"};
package/canvas/video-element.js CHANGED
@@ -1 +1 @@
1
- import e from"react";import{observer as t}from"mobx-react-lite";import{autorun as r}from"mobx";import{Image as n,Group as o,Rect as i,Transformer as a,Arc as h,Text as d}from"react-konva";import c from"use-image";import s from"konva";import{Portal as l}from"react-konva-utils";import{incrementLoader as u,triggerLoadError as g}from"../utils/loader.js";import*as f from"../utils/svg.js";import{flags as m}from"../utils/flags.js";import{applyFilter as p}from"./apply-filters.js";import{useFadeIn as w}from"./use-fadein.js";import{isTouchDevice as v}from"../utils/screen.js";function x(){return document.createElement("canvas")}const y=new window.Image;y.src=f.svgToURL('\n <svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n <path opacity="0.6" d="M4 5.49683V18.5032C4 20.05 5.68077 21.0113 7.01404 20.227L18.0694 13.7239C19.384 12.9506 19.384 11.0494 18.0694 10.2761L7.01404 3.77296C5.68077 2.98869 4 3.95 4 5.49683Z" fill="white"/>\n <path d="M4 5.49683V18.5032C4 20.05 5.68077 21.0113 7.01404 20.227L18.0694 13.7239C19.384 12.9506 19.384 11.0494 18.0694 10.2761L7.01404 3.77296C5.68077 2.98869 4 3.95 4 5.49683Z" stroke="#323232" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>\n </svg>\n');const E=new window.Image;E.src=f.svgToURL('\n <svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n <path opacity="0.6" d="M14 19L14 5C14 3.89543 14.8954 3 16 3L17 3C18.1046 3 19 3.89543 19 5L19 19C19 20.1046 18.1046 21 17 21L16 21C14.8954 21 14 20.1046 14 19Z" fill="white"/>\n <path opacity="0.6" d="M10 19L10 5C10 3.89543 9.10457 3 8 3L7 3C5.89543 3 5 3.89543 5 5L5 19C5 20.1046 5.89543 21 7 21L8 21C9.10457 21 10 20.1046 10 19Z" fill="white"/>\n <path d="M14 19L14 5C14 3.89543 14.8954 3 16 3L17 3C18.1046 3 19 3.89543 19 5L19 19C19 20.1046 18.1046 21 17 21L16 21C14.8954 21 14 20.1046 14 19Z" stroke="#323232" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>\n <path d="M10 19L10 5C10 3.89543 9.10457 3 8 3L7 3C5.89543 3 5 3.89543 5 5L5 19C5 20.1046 5.89543 21 7 21L8 21C9.10457 21 10 20.1046 10 19Z" stroke="#323232" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>\n </svg>\n');export const useCornerRadiusAndCrop=(t,r,n,o,i=0,a=!1)=>{const h=Math.floor(Math.max(t.width*o,1)),d=Math.floor(Math.max(t.height*o,1)),c=Math.min(i*o,h/2,d/2),l=Math.max(t.width/n.width,t.height/n.height)*o,u=t.page._exportingOrRendering&&m.imageDownScalingEnabled&&l<1&&!a,g=0===n.x&&0===n.y&&n.width===(null==r?void 0:r.width)&&n.height===(null==r?void 0:r.height),f=e.useMemo(()=>{if(r&&r.width&&r.height){return g&&0===c&&!u?void 0:x()}},[r,c,u,g]),p=()=>{if(!f||!r){return}f.width=h,f.height=d;const e=f.getContext("2d");if(!e){return}c&&(e.beginPath(),e.moveTo(c,0),e.lineTo(h-c,0),e.arc(h-c,c,c,3*Math.PI/2,0,!1),e.lineTo(h,d-c),e.arc(h-c,d-c,c,0,Math.PI/2,!1),e.lineTo(c,d),e.arc(c,d-c,c,Math.PI/2,Math.PI,!1),e.lineTo(0,c),e.arc(c,c,c,Math.PI,3*Math.PI/2,!1),e.clip());const t=u?function(e,t){var r,n;const o=x();o.width=e.width,o.height=e.height,null===(r=o.getContext("2d"))||void 0===r||r.drawImage(e,0,0,o.width,o.height);const i=function(e,t,r,n,o,i,a){for(var h=new ImageData(t,r),d=new Int32Array(e.data.buffer),c=e.width,s=new Int32Array(h.data.buffer),l=h.width,u=t/i,g=r/a,f=Math.round(1/u),m=Math.round(1/g),p=f*m,w=0;w<h.height;w++){for(var v=0;v<l;v++){for(var x=0+Math.round(v/u)+(0+Math.round(w/g))*c,y=0,E=0,M=0,b=0,L=0;L<m;L++){for(var C=0;C<f;C++){var T=d[x+C+L*c];y+=T<<24>>>24,E+=T<<16>>>24,M+=T<<8>>>24,b+=T>>>24}}y=Math.round(y/p),E=Math.round(E/p),M=Math.round(M/p),b=Math.round(b/p),s[v+w*l]=b<<24|M<<16|E<<8|y}}return h}(o.getContext("2d").getImageData(0,0,o.width,o.height),Math.floor(o.width*t),Math.floor(o.height*t),0,0,o.width,o.height);return o.width=Math.floor(o.width*t),o.height=Math.floor(o.height*t),null===(n=o.getContext("2d"))||void 0===n||n.putImageData(i,0,0),o}(r,l):r,o=u?{x:Math.floor(n.x*l),y:Math.floor(n.y*l),width:Math.floor(n.width*l),height:Math.floor(n.height*l)}:n;e.drawImage(t,o.x,o.y,o.width,o.height,0,0,f.width,f.height)};return e.useLayoutEffect(()=>{p()},[f,t.width,t.height,n.x,n.y,n.width,n.height,i,o,a,t.page._exportingOrRendering,u]),e.useEffect(()=>()=>{f&&"CANVAS"===f.nodeName&&s.Util.releaseCanvas(f)},[f]),[f||r,p]};const M=x(),b=t(({element:t})=>{const r=Math.min(30,t.width/4,t.height/4),n=e.useRef(null);return e.useEffect(()=>{const e=n.current;if(!e){return}const t=new s.Animation(t=>{e.rotate(((null==t?void 0:t.timeDiff)||0)/2)},e.getLayer());return t.start(),()=>{t.stop()}}),e.createElement(o,{x:t.a.x,y:t.a.y,rotation:t.a.rotation,listening:!1,opacity:t.a.opacity,hideInExport:!t.showInExport},e.createElement(i,{width:t.width,height:t.height,fill:"rgba(124, 173, 212, 0.8)"}),e.createElement(h,{ref:n,x:t.width/2,y:t.height/2,fill:"white",outerRadius:Math.abs(r),innerRadius:Math.max(1,r-5),angle:270}))}),L=t(({element:t})=>{const r=Math.max(10,Math.min(30,t.width/25));return e.createElement(o,{x:t.a.x,y:t.a.y,rotation:t.a.rotation,listening:!1,opacity:t.a.opacity,hideInExport:!t.showInExport},e.createElement(i,{width:t.width,height:t.height,fill:"rgba(223, 102, 102, 0.8)"}),e.createElement(d,{text:"Can not load the video...",fontSize:r,width:t.width,height:t.height,align:"center",fill:"white",verticalAlign:"middle",padding:5}))});let C=function(t,r,n){const o=e.useRef("loading"),i=e.useRef(null),[a,h]=e.useState(0),d=e.useRef(),c=e.useRef(),s=e.useRef();return d.current===t&&c.current===r&&s.current===n||(o.current="loading",i.current=void 0,d.current=t,c.current=r,s.current=n),e.useLayoutEffect(function(){if(t){var e=document.createElement("video");return e.addEventListener("canplay",a),e.addEventListener("error",d),r&&(e.crossOrigin=r),n&&(e.referrerpolicy=n),e.src=t,e.load(),function(){e.removeEventListener("canplay",a),e.removeEventListener("error",d)}}function a(){o.current="loaded",i.current=e,i.current.currentTime=0,h(Math.random()),i.current.removeEventListener("canplay",a)}function d(t){var r;const n=4===e.readyState,a=e.buffered&&e.buffered.length>0&&e.buffered.end(e.buffered.length-1)/e.duration*100>=100;if(n&&a){return}const d=t.message||(null===(r=e.error)||void 0===r?void 0:r.message)||"Unknown error",c=new Error("Video failed to load: "+d);console.error(c),o.current="failed",i.current=void 0,h(Math.random())}},[t,r,n]),[i.current,o.current]};export const setVideoLoaderHook=e=>{C=e};function T(e){return e.readyState>=HTMLMediaElement.HAVE_CURRENT_DATA}export const useLoader=(t,r,n)=>{const o=e.useRef(),i=()=>{var e;null===(e=o.current)||void 0===e||e.call(o),o.current=void 0};e.useEffect(()=>i,[]),e.useLayoutEffect(()=>{const e=r.slice(0,200),a=`video with id ${n} url: ${e}`;"loading"!==t||o.current||(o.current=u(a)),"loading"!==t&&i(),"failed"===t&&g(a)},[t])};export const VideoElement=t(({element:t,store:h})=>{var d;const[g,m]=e.useState(!1),R=e.useRef(null),I=e.useRef(null),k=h.selectedShapes.indexOf(t)>=0&&t.selectable,[S,X]=e.useState(!1),[Y,W]=C(t.src,"anonymous"),O=h.activePage===t.page;useLoader(W,t.src,t.id),Y&&(Y.width=Y.videoWidth,Y.height=Y.videoHeight,Y.playsInline=!0);const _=Y||M;e.useEffect(()=>{Y&&h.history.ignore(()=>{t.set({duration:1e3*Y.duration})})},[Y]),e.useEffect(()=>{var e;if(!Y){return}const r=h.animatedElementsIds,n=(!r.length||r.includes(t.id))&&h.isPlaying,o=O&&(n||S);if(!o){return void Y.pause()}o&&(Y.currentTime=t.startTime*Y.duration,Y.play());const i=new s.Animation(()=>{ee()},null===(e=R.current)||void 0===e?void 0:e.getLayer());i.start();const a=()=>{X(!1),Y.currentTime=t.startTime*Y.duration},d=()=>{Y.currentTime>=t.endTime*Y.duration&&(Y.pause(),Y.currentTime=t.startTime*Y.duration,X(!1))};return Y.addEventListener("ended",a),Y.addEventListener("timeupdate",d),()=>{Y.pause(),i.stop(),Y.removeEventListener("ended",a),Y.removeEventListener("timeupdate",d)}},[Y,S,h.isPlaying,O]),e.useEffect(()=>{Y&&(Y.volume=t.volume)},[Y,t.volume]);const P=e.useRef();e.useEffect(()=>{const e=r(()=>{var e,r;if(Y){const n=h.animatedElementsIds;if(n.length&&!n.includes(t.id)){return}const o=t.startTime*Y.duration*1e3,i=Y.duration*(t.endTime-t.startTime)*1e3,a=((h.currentTime||t.page.startTime)-t.page.startTime)%i+o;if(Math.abs(1e3*Y.currentTime-a)>500||!h.isPlaying){const e=a/1e3;e!==Y.currentTime&&(Y.currentTime=e),!T(Y)&&!h.isPlaying&&!P.current&&(P.current=u(`video ${t.id}`))}ee(),null===(r=null===(e=R.current)||void 0===e?void 0:e.getLayer())||void 0===r||r.batchDraw()}});return()=>{e(),P.current&&(P.current(),P.current=null)}},[h,Y]),e.useEffect(()=>{if(!Y){return}const e=()=>{var e,r;!T(Y)&&t.page._exportingOrRendering||P.current&&(ee(),null===(r=null===(e=R.current)||void 0===e?void 0:e.getLayer())||void 0===r||r.batchDraw(),P.current(),P.current=null)};let r;return t.page._exportingOrRendering&&(r=setInterval(e,50)),Y.addEventListener("timeupdate",e),Y.addEventListener("canplay",e),()=>{clearInterval(r),Y.removeEventListener("timeupdate",e),Y.removeEventListener("canplay",e)}},[t.page._exportingOrRendering,Y,t.id,u]);let{cropX:A,cropY:H,cropWidth:D,cropHeight:z}=t;"loaded"!==W&&(A=H=0,D=z=1);const j=_.width*D,B=_.height*z,U=t.width/t.height;let V,Z;const F=j/B,N="svg"===t.type;N?(V=j,Z=B):U>=F?(V=j,Z=j/U):(V=B*U,Z=B);const $={x:_.width*A,y:_.height*H,width:V,height:Z},q=null!==(d=t.cornerRadius)&&void 0!==d?d:0,[G,J]=useCornerRadiusAndCrop(t,_,$,h._elementsPixelRatio,q,g||t._cropModeEnabled||"svg"===t.type);let[K,Q]=((t,r,n,o)=>{const i=(t=>{const[r,n]=e.useState(t);return e.useEffect(()=>{(async()=>{const e=await async function(e){if(!(e.indexOf("data:image/svg+xml")>=0||e.indexOf(".svg")>=0)){return e}const t=await f.urlToString(e),r=f.fixSize(t);return f.svgToURL(r)}(t);e!==r&&n(e)})()},[t]),r})(t.clipSrc||""),[a,h]=c(i,"anonymous"),d=t.clipSrc?h:"loaded";useLoader(d,t.clipSrc,t.id);const l=e.useMemo(()=>{if(r&&a){return x()}},[r,a]);function u(){var e;if(!a){return}if(!r||!r.width||!r.height){return}if(!a||!a.width||!a.height){return}if(!l){return}const o=x(),i=Math.max(t.width/a.width*n,t.height/a.height*n);o.width=a.width*i,o.height=a.height*i,null===(e=o.getContext("2d"))||void 0===e||e.drawImage(a,0,0,o.width,o.height),l.width=Math.max(r.width,1),l.height=Math.max(r.height,1);const h=l.getContext("2d");h&&(h.save(),h.drawImage(o,0,0,r.width,r.height),s.Util.releaseCanvas(o),h.globalCompositeOperation="source-in",h.drawImage(r,0,0,l.width,l.height),h.restore())}return e.useLayoutEffect(()=>{u()},[l,r,a,t.width,t.height,n,...o]),[t.clipSrc&&a?l:r,u]})(t,G,h._elementsPixelRatio,[$,q,h._elementsPixelRatio]);function ee(){J(),Q()}const te=Math.max(t.width/V,t.height/Z);e.useEffect(()=>{var e;if(!t._cropModeEnabled){return}const r=null===(e=R.current)||void 0===e?void 0:e.getStage();function n(e){t._cropModeEnabled&&e.target!==I.current&&t.toggleCropMode(!1)}function o(e){t._cropModeEnabled&&e.target.parentNode!==r.content&&t.toggleCropMode(!1)}return document.body.addEventListener("click",o),null==r||r.on("click",n),null==r||r.on("tap",n),()=>{document.body.removeEventListener("click",o),document.body.removeEventListener("touchstart",o),null==r||r.off("click",n),null==r||r.off("click",n)}},[t._cropModeEnabled]),e.useLayoutEffect(()=>{if(!g&&!t._cropModeEnabled){return p(R.current,t),r(()=>{p(R.current,t)},{delay:100})}},[_,g,D,z,t._cropModeEnabled]),e.useLayoutEffect(()=>{var e;g||t._cropModeEnabled?null===(e=R.current)||void 0===e||e.clearCache():p(R.current,t)},[g,t.width,t.height,t._cropModeEnabled]),e.useEffect(()=>{p(R.current,t)},[t.shadowEnabled,t.shadowBlur,t.cornerRadius,t.shadowColor,t.shadowOffsetX,t.shadowOffsetY,t.shadowOpacity]);const re=e.useRef(null),ne=e.useRef(null),oe=e.useRef(null);e.useLayoutEffect(()=>{t._cropModeEnabled&&(ne.current.nodes([re.current]),oe.current.nodes([I.current]))},[t._cropModeEnabled]);const ie=e=>{Math.round(e.target.x())>0&&(e.target.x(0),e.target.scaleX(1)),Math.round(e.target.y())>0&&(e.target.y(0),e.target.scaleY(1));const r=e.target.width()*e.target.scaleX(),n=e.target.height()*e.target.scaleY(),o=Math.min(1,V/r),i=Math.min(1,Z/n),a=1-o,h=Math.min(a,Math.max(0,Math.round(-e.target.x())/r)),d=1-i,c=Math.min(d,Math.max(0,Math.round(-e.target.y())/n));e.target.setAttrs({x:-h*_.width,y:-c*_.height,scaleX:1,scaleY:1}),t.set({cropX:h,cropY:c,cropWidth:o,cropHeight:i})},ae=()=>{"svg"!==t.type&&t.contentEditable&&setTimeout(()=>{t.toggleCropMode(!0)})},he="loading"===W,de="failed"===W,ce=!he&&!de,se=e.useRef({cropX:0,cropY:0,cropWidth:0,cropHeight:0}),le=ce?t.a.opacity:0;w(R,le);const ue=t.selectable||"admin"===h.role,ge=v();return e.createElement(e.Fragment,null,he&&e.createElement(b,{element:t}),de&&e.createElement(L,{element:t}),e.createElement(n,{ref:R,name:"element",id:t.id,image:K,x:t.a.x,y:t.a.y,width:t.a.width||1,height:t.a.height||1,rotation:t.a.rotation,opacity:le,shadowEnabled:t.shadowEnabled,shadowBlur:t.shadowBlur,shadowOffsetX:t.shadowOffsetX,shadowOffsetY:t.shadowOffsetY,shadowColor:t.shadowColor,shadowOpacity:t.shadowOpacity,customCrop:$,listening:ue,draggable:ge?t.draggable&&k:t.draggable,preventDefault:!ge||k,hideInExport:!t.showInExport,onDragMove:e=>{t.set({x:e.target.x(),y:e.target.y()})},onDragEnd:e=>{t.set({x:e.target.x(),y:e.target.y()})},onDblClick:ae,onDblTap:ae,onTransformStart:()=>{m(!0),se.current={cropX:t.cropX,cropY:t.cropY,cropWidth:t.cropWidth,cropHeight:t.cropHeight}},onTransform:e=>{var r;const n=e.currentTarget,o=Math.abs(n.scaleX()-1)<1e-7?1:n.scaleX(),i=Math.abs(n.scaleY()-1)<1e-7?1:n.scaleY();n.scaleX(1),n.scaleY(1);const a=null===(r=e.target.getStage())||void 0===r?void 0:r.findOne("Transformer"),h=1-V/_.width,d=Math.min(h,Math.max(0,t.cropX)),c=1-Z/_.height,s=Math.min(c,Math.max(0,t.cropY)),l=a.getActiveAnchor(),u=!(l.indexOf("middle")>=0||l.indexOf("center")>=0),g=!u&&o<1&&se.current.cropHeight>Z/_.height;let f=u?t.cropWidth:t.cropWidth*o;g&&(f=t.cropWidth);const m=!u&&i<1&&se.current.cropWidth>V/_.width;let p=u?t.cropHeight:t.cropHeight*i;m&&(p=t.cropHeight),N&&(f=t.cropWidth,p=t.cropHeight),t.set({cropX:d,cropY:s,x:n.x(),y:n.y(),width:n.width()*o,height:n.height()*i,rotation:e.target.rotation(),cropWidth:Math.min(f,1-d),cropHeight:Math.min(p,1-s)})},onTransformEnd:e=>{const r=e.currentTarget;t.set({width:r.width(),height:r.height(),x:r.x(),y:r.y(),rotation:e.target.rotation(),cropWidth:V/_.width,cropHeight:Z/_.height}),m(!1)}}),e.createElement(i,{x:t.a.x,y:t.a.y,width:Math.max(t.a.width-t.borderSize,0),height:Math.max(t.a.height-t.borderSize,0),opacity:le,offsetX:-t.borderSize/2,offsetY:-t.borderSize/2,stroke:t.borderColor,strokeWidth:t.borderSize,listening:!1,visible:!!t.borderSize,rotation:t.rotation,cornerRadius:Math.max(0,q-t.borderSize),hideInExport:!t.showInExport}),!h.isPlaying&&e.createElement(n,{image:S?E:y,x:t.a.x,y:t.a.y,offsetX:-t.a.width/2+15/h.scale,offsetY:-t.a.height/2+15/h.scale,rotation:t.a.rotation,width:30/h.scale,height:30/h.scale,hideInExport:!0,onClick:()=>X(!S),onTap:()=>X(!S)}),t._cropModeEnabled&&e.createElement(l,{selector:".page-abs-container",enabled:!0},e.createElement(i,{x:-window.innerWidth/h.scale,y:-window.innerWidth/h.scale,width:window.innerWidth/h.scale*3,height:window.innerWidth/h.scale*3,fill:"rgba(0,0,0,0.3)"}),e.createElement(n,{listening:!1,image:K,x:t.a.x,y:t.a.y,width:t.a.width,height:t.a.height,rotation:t.a.rotation,shadowEnabled:t.shadowEnabled,shadowBlur:t.shadowBlur}),e.createElement(o,{x:t.a.x,y:t.a.y,rotation:t.a.rotation,scaleX:te,scaleY:te},e.createElement(n,{image:_,ref:I,opacity:.4,draggable:!0,x:-t.cropX*_.width,y:-t.cropY*_.height,onDragMove:ie,onTransform:ie}),e.createElement(a,{ref:oe,anchorSize:20,enabledAnchors:["top-left","top-right","bottom-left","bottom-right"],boundBoxFunc:(e,t)=>t.width<5||t.height<5?e:t,rotateEnabled:!1,borderEnabled:!1,anchorCornerRadius:10,anchorStrokeWidth:2,borderStrokeWidth:2}),e.createElement(i,{width:V,height:Z,ref:re,listening:!1,onTransform:e=>{e.target.x()<-t.cropX*_.width-1e-9&&(e.target.x(-t.cropX*_.width),e.target.scaleX(1)),e.target.y()<-t.cropY*_.height-1e-9&&(e.target.y(-t.cropY*_.height),e.target.scaleY(1));const r=Math.min(1,Math.max(0,t.cropX+e.target.x()/_.width)),n=Math.min(1,Math.max(0,e.target.y()/_.height+t.cropY)),o=e.target.width()*e.target.scaleX(),i=e.target.height()*e.target.scaleY(),a=Math.min(1-r,o/_.width),h=Math.min(1-n,i/_.height),d=e.target.getAbsolutePosition(e.target.getParent().getParent());e.target.scale({x:1,y:1}),e.target.position({x:0,y:0}),t.set({x:d.x,y:d.y,cropX:r,cropY:n,cropWidth:a,cropHeight:h,width:Math.min(o*te,_.width*(1-r)*te),height:Math.min(i*te,_.height*(1-n)*te)})}}),e.createElement(a,{ref:ne,enabledAnchors:["top-left","top-right","bottom-left","bottom-right"],boundBoxFunc:(e,t)=>t.width<5||t.height<5?e:t,keepRatio:!1,rotateEnabled:!1,anchorFill:"rgb(240, 240, 240)",anchorStrokeWidth:2,borderStrokeWidth:2,visible:t.resizable}))))});
1
+ import e from"react";import{observer as t}from"mobx-react-lite";import{autorun as r}from"mobx";import{Image as n,Group as o,Rect as i,Transformer as a,Arc as h,Text as d}from"react-konva";import c from"use-image";import s from"konva";import{Portal as l}from"react-konva-utils";import{incrementLoader as u,triggerLoadError as g}from"../utils/loader.js";import*as f from"../utils/svg.js";import{flags as m}from"../utils/flags.js";import{applyFilter as p}from"./apply-filters.js";import{useFadeIn as w}from"./use-fadein.js";import{isTouchDevice as v}from"../utils/screen.js";function x(){return document.createElement("canvas")}const y=new window.Image;y.src=f.svgToURL('\n <svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n <path opacity="0.6" d="M4 5.49683V18.5032C4 20.05 5.68077 21.0113 7.01404 20.227L18.0694 13.7239C19.384 12.9506 19.384 11.0494 18.0694 10.2761L7.01404 3.77296C5.68077 2.98869 4 3.95 4 5.49683Z" fill="white"/>\n <path d="M4 5.49683V18.5032C4 20.05 5.68077 21.0113 7.01404 20.227L18.0694 13.7239C19.384 12.9506 19.384 11.0494 18.0694 10.2761L7.01404 3.77296C5.68077 2.98869 4 3.95 4 5.49683Z" stroke="#323232" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>\n </svg>\n');const E=new window.Image;E.src=f.svgToURL('\n <svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n <path opacity="0.6" d="M14 19L14 5C14 3.89543 14.8954 3 16 3L17 3C18.1046 3 19 3.89543 19 5L19 19C19 20.1046 18.1046 21 17 21L16 21C14.8954 21 14 20.1046 14 19Z" fill="white"/>\n <path opacity="0.6" d="M10 19L10 5C10 3.89543 9.10457 3 8 3L7 3C5.89543 3 5 3.89543 5 5L5 19C5 20.1046 5.89543 21 7 21L8 21C9.10457 21 10 20.1046 10 19Z" fill="white"/>\n <path d="M14 19L14 5C14 3.89543 14.8954 3 16 3L17 3C18.1046 3 19 3.89543 19 5L19 19C19 20.1046 18.1046 21 17 21L16 21C14.8954 21 14 20.1046 14 19Z" stroke="#323232" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>\n <path d="M10 19L10 5C10 3.89543 9.10457 3 8 3L7 3C5.89543 3 5 3.89543 5 5L5 19C5 20.1046 5.89543 21 7 21L8 21C9.10457 21 10 20.1046 10 19Z" stroke="#323232" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>\n </svg>\n');export const useCornerRadiusAndCrop=(t,r,n,o,i=0,a=!1)=>{const h=Math.floor(Math.max(t.width*o,1)),d=Math.floor(Math.max(t.height*o,1)),c=Math.min(i*o,h/2,d/2),l=Math.max(t.width/n.width,t.height/n.height)*o,u=t.page._exportingOrRendering&&m.imageDownScalingEnabled&&l<1&&!a,g=0===n.x&&0===n.y&&n.width===(null==r?void 0:r.width)&&n.height===(null==r?void 0:r.height),f=e.useMemo(()=>{if(r&&r.width&&r.height){return g&&0===c&&!u?void 0:x()}},[r,c,u,g]),p=()=>{if(!f||!r){return}f.width=h,f.height=d;const e=f.getContext("2d");if(!e){return}c&&(e.beginPath(),e.moveTo(c,0),e.lineTo(h-c,0),e.arc(h-c,c,c,3*Math.PI/2,0,!1),e.lineTo(h,d-c),e.arc(h-c,d-c,c,0,Math.PI/2,!1),e.lineTo(c,d),e.arc(c,d-c,c,Math.PI/2,Math.PI,!1),e.lineTo(0,c),e.arc(c,c,c,Math.PI,3*Math.PI/2,!1),e.clip());const t=u?function(e,t){var r,n;const o=x();o.width=e.width,o.height=e.height,null===(r=o.getContext("2d"))||void 0===r||r.drawImage(e,0,0,o.width,o.height);const i=function(e,t,r,n,o,i,a){for(var h=new ImageData(t,r),d=new Int32Array(e.data.buffer),c=e.width,s=new Int32Array(h.data.buffer),l=h.width,u=t/i,g=r/a,f=Math.round(1/u),m=Math.round(1/g),p=f*m,w=0;w<h.height;w++){for(var v=0;v<l;v++){for(var x=0+Math.round(v/u)+(0+Math.round(w/g))*c,y=0,E=0,M=0,b=0,L=0;L<m;L++){for(var C=0;C<f;C++){var T=d[x+C+L*c];y+=T<<24>>>24,E+=T<<16>>>24,M+=T<<8>>>24,b+=T>>>24}}y=Math.round(y/p),E=Math.round(E/p),M=Math.round(M/p),b=Math.round(b/p),s[v+w*l]=b<<24|M<<16|E<<8|y}}return h}(o.getContext("2d").getImageData(0,0,o.width,o.height),Math.floor(o.width*t),Math.floor(o.height*t),0,0,o.width,o.height);return o.width=Math.floor(o.width*t),o.height=Math.floor(o.height*t),null===(n=o.getContext("2d"))||void 0===n||n.putImageData(i,0,0),o}(r,l):r,o=u?{x:Math.floor(n.x*l),y:Math.floor(n.y*l),width:Math.floor(n.width*l),height:Math.floor(n.height*l)}:n;e.drawImage(t,o.x,o.y,o.width,o.height,0,0,f.width,f.height)};return e.useLayoutEffect(()=>{p()},[f,t.width,t.height,n.x,n.y,n.width,n.height,i,o,a,t.page._exportingOrRendering,u]),e.useEffect(()=>()=>{f&&"CANVAS"===f.nodeName&&s.Util.releaseCanvas(f)},[f]),[f||r,p]};const M=x(),b=t(({element:t})=>{const r=Math.min(30,t.width/4,t.height/4),n=e.useRef(null);return e.useEffect(()=>{const e=n.current;if(!e){return}const t=new s.Animation(t=>{e.rotate(((null==t?void 0:t.timeDiff)||0)/2)},e.getLayer());return t.start(),()=>{t.stop()}}),e.createElement(o,{x:t.a.x,y:t.a.y,rotation:t.a.rotation,listening:!1,opacity:t.a.opacity,hideInExport:!t.showInExport},e.createElement(i,{width:t.width,height:t.height,fill:"rgba(124, 173, 212, 0.8)"}),e.createElement(h,{ref:n,x:t.width/2,y:t.height/2,fill:"white",outerRadius:Math.abs(r),innerRadius:Math.max(1,r-5),angle:270}))}),L=t(({element:t})=>{const r=Math.max(10,Math.min(30,t.width/25));return e.createElement(o,{x:t.a.x,y:t.a.y,rotation:t.a.rotation,listening:!1,opacity:t.a.opacity,hideInExport:!t.showInExport},e.createElement(i,{width:t.width,height:t.height,fill:"rgba(223, 102, 102, 0.8)"}),e.createElement(d,{text:"Can not load the video...",fontSize:r,width:t.width,height:t.height,align:"center",fill:"white",verticalAlign:"middle",padding:5}))});let C=function(t,r,n){const o=e.useRef("loading"),i=e.useRef(null),[a,h]=e.useState(0),d=e.useRef(),c=e.useRef(),s=e.useRef();return d.current===t&&c.current===r&&s.current===n||(o.current="loading",i.current=void 0,d.current=t,c.current=r,s.current=n),e.useLayoutEffect(function(){if(t){var e=document.createElement("video");return e.addEventListener("canplay",a),e.addEventListener("error",d),r&&(e.crossOrigin=r),n&&(e.referrerpolicy=n),e.src=t,e.load(),function(){e.removeEventListener("canplay",a),e.removeEventListener("error",d)}}function a(){o.current="loaded",i.current=e,i.current.currentTime=0,h(Math.random()),i.current.removeEventListener("canplay",a)}function d(t){var r;const n=4===e.readyState,a=e.buffered&&e.buffered.length>0&&e.buffered.end(e.buffered.length-1)/e.duration*100>=100;if(n&&a){return}const d=t.message||(null===(r=e.error)||void 0===r?void 0:r.message)||"Unknown error",c=new Error("Video failed to load: "+d);console.error(c),o.current="failed",i.current=void 0,h(Math.random())}},[t,r,n]),[i.current,o.current]};export const setVideoLoaderHook=e=>{C=e};function T(e){return e.readyState>=HTMLMediaElement.HAVE_CURRENT_DATA}export const useLoader=(t,r,n)=>{const o=e.useRef(),i=()=>{var e;null===(e=o.current)||void 0===e||e.call(o),o.current=void 0};e.useEffect(()=>i,[]),e.useLayoutEffect(()=>{const e=r.slice(0,200),a=`video with id ${n} url: ${e}`;"loading"!==t||o.current||(o.current=u(a)),"loading"!==t&&i(),"failed"===t&&g(a)},[t])};export const VideoElement=t(({element:t,store:h})=>{var d;const[g,m]=e.useState(!1),R=e.useRef(null),I=e.useRef(null),k=h.selectedShapes.indexOf(t)>=0&&t.selectable,[S,X]=e.useState(!1),[Y,W]=C(t.src,"anonymous"),O=h.activePage===t.page;useLoader(W,t.src,t.id),Y&&(Y.width=Y.videoWidth,Y.height=Y.videoHeight,Y.playsInline=!0);const _=Y||M;e.useEffect(()=>{Y&&h.history.ignore(()=>{t.set({duration:1e3*Y.duration})})},[Y]),e.useEffect(()=>{var e;if(!Y){return}const r=h.animatedElementsIds,n=(!r.length||r.includes(t.id))&&h.isPlaying,o=O&&(n||S);if(!o){return void Y.pause()}o&&(Y.currentTime=t.startTime*Y.duration,Y.play());const i=new s.Animation(()=>{ee()},null===(e=R.current)||void 0===e?void 0:e.getLayer());i.start();const a=()=>{X(!1),Y.currentTime=t.startTime*Y.duration},d=()=>{Y.currentTime>=t.endTime*Y.duration&&(Y.pause(),Y.currentTime=t.startTime*Y.duration,X(!1))};return Y.addEventListener("ended",a),Y.addEventListener("timeupdate",d),()=>{Y.pause(),i.stop(),Y.removeEventListener("ended",a),Y.removeEventListener("timeupdate",d)}},[Y,S,h.isPlaying,O]),e.useEffect(()=>{Y&&(Y.volume=t.volume)},[Y,t.volume]);const P=e.useRef();e.useEffect(()=>{const e=r(()=>{var e,r;if(Y){const n=h.animatedElementsIds;if(n.length&&!n.includes(t.id)){return}const o=t.startTime*Y.duration*1e3,i=Y.duration*(t.endTime-t.startTime)*1e3,a=((h.currentTime||t.page.startTime)-t.page.startTime)%i+o;if(Math.abs(1e3*Y.currentTime-a)>500||!h.isPlaying){const e=a/1e3;e!==Y.currentTime&&(Y.currentTime=e),!T(Y)&&!h.isPlaying&&!P.current&&(P.current=u(`video ${t.id}`))}ee(),null===(r=null===(e=R.current)||void 0===e?void 0:e.getLayer())||void 0===r||r.batchDraw()}});return()=>{e(),P.current&&(P.current(),P.current=null)}},[h,Y]),e.useEffect(()=>{if(!Y){return}const e=()=>{var e,r;!T(Y)&&t.page._exportingOrRendering||P.current&&(ee(),null===(r=null===(e=R.current)||void 0===e?void 0:e.getLayer())||void 0===r||r.batchDraw(),P.current(),P.current=null)};let r;return t.page._exportingOrRendering&&(r=setInterval(e,20)),Y.addEventListener("timeupdate",e),Y.addEventListener("canplay",e),()=>{clearInterval(r),Y.removeEventListener("timeupdate",e),Y.removeEventListener("canplay",e)}},[t.page._exportingOrRendering,Y,t.id,u]);let{cropX:A,cropY:H,cropWidth:D,cropHeight:z}=t;"loaded"!==W&&(A=H=0,D=z=1);const j=_.width*D,B=_.height*z,U=t.width/t.height;let V,Z;const F=j/B,N="svg"===t.type;N?(V=j,Z=B):U>=F?(V=j,Z=j/U):(V=B*U,Z=B);const $={x:_.width*A,y:_.height*H,width:V,height:Z},q=null!==(d=t.cornerRadius)&&void 0!==d?d:0,[G,J]=useCornerRadiusAndCrop(t,_,$,h._elementsPixelRatio,q,g||t._cropModeEnabled||"svg"===t.type);let[K,Q]=((t,r,n,o)=>{const i=(t=>{const[r,n]=e.useState(t);return e.useEffect(()=>{(async()=>{const e=await async function(e){if(!(e.indexOf("data:image/svg+xml")>=0||e.indexOf(".svg")>=0)){return e}const t=await f.urlToString(e),r=f.fixSize(t);return f.svgToURL(r)}(t);e!==r&&n(e)})()},[t]),r})(t.clipSrc||""),[a,h]=c(i,"anonymous"),d=t.clipSrc?h:"loaded";useLoader(d,t.clipSrc,t.id);const l=e.useMemo(()=>{if(r&&a){return x()}},[r,a]);function u(){var e;if(!a){return}if(!r||!r.width||!r.height){return}if(!a||!a.width||!a.height){return}if(!l){return}const o=x(),i=Math.max(t.width/a.width*n,t.height/a.height*n);o.width=a.width*i,o.height=a.height*i,null===(e=o.getContext("2d"))||void 0===e||e.drawImage(a,0,0,o.width,o.height),l.width=Math.max(r.width,1),l.height=Math.max(r.height,1);const h=l.getContext("2d");h&&(h.save(),h.drawImage(o,0,0,r.width,r.height),s.Util.releaseCanvas(o),h.globalCompositeOperation="source-in",h.drawImage(r,0,0,l.width,l.height),h.restore())}return e.useLayoutEffect(()=>{u()},[l,r,a,t.width,t.height,n,...o]),[t.clipSrc&&a?l:r,u]})(t,G,h._elementsPixelRatio,[$,q,h._elementsPixelRatio]);function ee(){J(),Q()}const te=Math.max(t.width/V,t.height/Z);e.useEffect(()=>{var e;if(!t._cropModeEnabled){return}const r=null===(e=R.current)||void 0===e?void 0:e.getStage();function n(e){t._cropModeEnabled&&e.target!==I.current&&t.toggleCropMode(!1)}function o(e){t._cropModeEnabled&&e.target.parentNode!==r.content&&t.toggleCropMode(!1)}return document.body.addEventListener("click",o),null==r||r.on("click",n),null==r||r.on("tap",n),()=>{document.body.removeEventListener("click",o),document.body.removeEventListener("touchstart",o),null==r||r.off("click",n),null==r||r.off("click",n)}},[t._cropModeEnabled]),e.useLayoutEffect(()=>{if(!g&&!t._cropModeEnabled){return p(R.current,t),r(()=>{p(R.current,t)},{delay:100})}},[_,g,D,z,t._cropModeEnabled]),e.useLayoutEffect(()=>{var e;g||t._cropModeEnabled?null===(e=R.current)||void 0===e||e.clearCache():p(R.current,t)},[g,t.width,t.height,t._cropModeEnabled]),e.useEffect(()=>{p(R.current,t)},[t.shadowEnabled,t.shadowBlur,t.cornerRadius,t.shadowColor,t.shadowOffsetX,t.shadowOffsetY,t.shadowOpacity]);const re=e.useRef(null),ne=e.useRef(null),oe=e.useRef(null);e.useLayoutEffect(()=>{t._cropModeEnabled&&(ne.current.nodes([re.current]),oe.current.nodes([I.current]))},[t._cropModeEnabled]);const ie=e=>{Math.round(e.target.x())>0&&(e.target.x(0),e.target.scaleX(1)),Math.round(e.target.y())>0&&(e.target.y(0),e.target.scaleY(1));const r=e.target.width()*e.target.scaleX(),n=e.target.height()*e.target.scaleY(),o=Math.min(1,V/r),i=Math.min(1,Z/n),a=1-o,h=Math.min(a,Math.max(0,Math.round(-e.target.x())/r)),d=1-i,c=Math.min(d,Math.max(0,Math.round(-e.target.y())/n));e.target.setAttrs({x:-h*_.width,y:-c*_.height,scaleX:1,scaleY:1}),t.set({cropX:h,cropY:c,cropWidth:o,cropHeight:i})},ae=()=>{"svg"!==t.type&&t.contentEditable&&setTimeout(()=>{t.toggleCropMode(!0)})},he="loading"===W,de="failed"===W,ce=!he&&!de,se=e.useRef({cropX:0,cropY:0,cropWidth:0,cropHeight:0}),le=ce?t.a.opacity:0;w(R,le);const ue=t.selectable||"admin"===h.role,ge=v();return e.createElement(e.Fragment,null,he&&e.createElement(b,{element:t}),de&&e.createElement(L,{element:t}),e.createElement(n,{ref:R,name:"element",id:t.id,image:K,x:t.a.x,y:t.a.y,width:t.a.width||1,height:t.a.height||1,rotation:t.a.rotation,opacity:le,shadowEnabled:t.shadowEnabled,shadowBlur:t.shadowBlur,shadowOffsetX:t.shadowOffsetX,shadowOffsetY:t.shadowOffsetY,shadowColor:t.shadowColor,shadowOpacity:t.shadowOpacity,customCrop:$,listening:ue,draggable:ge?t.draggable&&k:t.draggable,preventDefault:!ge||k,hideInExport:!t.showInExport,onDragMove:e=>{t.set({x:e.target.x(),y:e.target.y()})},onDragEnd:e=>{t.set({x:e.target.x(),y:e.target.y()})},onDblClick:ae,onDblTap:ae,onTransformStart:()=>{m(!0),se.current={cropX:t.cropX,cropY:t.cropY,cropWidth:t.cropWidth,cropHeight:t.cropHeight}},onTransform:e=>{var r;const n=e.currentTarget,o=Math.abs(n.scaleX()-1)<1e-7?1:n.scaleX(),i=Math.abs(n.scaleY()-1)<1e-7?1:n.scaleY();n.scaleX(1),n.scaleY(1);const a=null===(r=e.target.getStage())||void 0===r?void 0:r.findOne("Transformer"),h=1-V/_.width,d=Math.min(h,Math.max(0,t.cropX)),c=1-Z/_.height,s=Math.min(c,Math.max(0,t.cropY)),l=a.getActiveAnchor(),u=!(l.indexOf("middle")>=0||l.indexOf("center")>=0),g=!u&&o<1&&se.current.cropHeight>Z/_.height;let f=u?t.cropWidth:t.cropWidth*o;g&&(f=t.cropWidth);const m=!u&&i<1&&se.current.cropWidth>V/_.width;let p=u?t.cropHeight:t.cropHeight*i;m&&(p=t.cropHeight),N&&(f=t.cropWidth,p=t.cropHeight),t.set({cropX:d,cropY:s,x:n.x(),y:n.y(),width:n.width()*o,height:n.height()*i,rotation:e.target.rotation(),cropWidth:Math.min(f,1-d),cropHeight:Math.min(p,1-s)})},onTransformEnd:e=>{const r=e.currentTarget;t.set({width:r.width(),height:r.height(),x:r.x(),y:r.y(),rotation:e.target.rotation(),cropWidth:V/_.width,cropHeight:Z/_.height}),m(!1)}}),e.createElement(i,{x:t.a.x,y:t.a.y,width:Math.max(t.a.width-t.borderSize,0),height:Math.max(t.a.height-t.borderSize,0),opacity:le,offsetX:-t.borderSize/2,offsetY:-t.borderSize/2,stroke:t.borderColor,strokeWidth:t.borderSize,listening:!1,visible:!!t.borderSize,rotation:t.rotation,cornerRadius:Math.max(0,q-t.borderSize),hideInExport:!t.showInExport}),!h.isPlaying&&e.createElement(n,{image:S?E:y,x:t.a.x,y:t.a.y,offsetX:-t.a.width/2+15/h.scale,offsetY:-t.a.height/2+15/h.scale,rotation:t.a.rotation,width:30/h.scale,height:30/h.scale,hideInExport:!0,onClick:()=>X(!S),onTap:()=>X(!S)}),t._cropModeEnabled&&e.createElement(l,{selector:".page-abs-container",enabled:!0},e.createElement(i,{x:-window.innerWidth/h.scale,y:-window.innerWidth/h.scale,width:window.innerWidth/h.scale*3,height:window.innerWidth/h.scale*3,fill:"rgba(0,0,0,0.3)"}),e.createElement(n,{listening:!1,image:K,x:t.a.x,y:t.a.y,width:t.a.width,height:t.a.height,rotation:t.a.rotation,shadowEnabled:t.shadowEnabled,shadowBlur:t.shadowBlur}),e.createElement(o,{x:t.a.x,y:t.a.y,rotation:t.a.rotation,scaleX:te,scaleY:te},e.createElement(n,{image:_,ref:I,opacity:.4,draggable:!0,x:-t.cropX*_.width,y:-t.cropY*_.height,onDragMove:ie,onTransform:ie}),e.createElement(a,{ref:oe,anchorSize:20,enabledAnchors:["top-left","top-right","bottom-left","bottom-right"],boundBoxFunc:(e,t)=>t.width<5||t.height<5?e:t,rotateEnabled:!1,borderEnabled:!1,anchorCornerRadius:10,anchorStrokeWidth:2,borderStrokeWidth:2}),e.createElement(i,{width:V,height:Z,ref:re,listening:!1,onTransform:e=>{e.target.x()<-t.cropX*_.width-1e-9&&(e.target.x(-t.cropX*_.width),e.target.scaleX(1)),e.target.y()<-t.cropY*_.height-1e-9&&(e.target.y(-t.cropY*_.height),e.target.scaleY(1));const r=Math.min(1,Math.max(0,t.cropX+e.target.x()/_.width)),n=Math.min(1,Math.max(0,e.target.y()/_.height+t.cropY)),o=e.target.width()*e.target.scaleX(),i=e.target.height()*e.target.scaleY(),a=Math.min(1-r,o/_.width),h=Math.min(1-n,i/_.height),d=e.target.getAbsolutePosition(e.target.getParent().getParent());e.target.scale({x:1,y:1}),e.target.position({x:0,y:0}),t.set({x:d.x,y:d.y,cropX:r,cropY:n,cropWidth:a,cropHeight:h,width:Math.min(o*te,_.width*(1-r)*te),height:Math.min(i*te,_.height*(1-n)*te)})}}),e.createElement(a,{ref:ne,enabledAnchors:["top-left","top-right","bottom-left","bottom-right"],boundBoxFunc:(e,t)=>t.width<5||t.height<5?e:t,keepRatio:!1,rotateEnabled:!1,anchorFill:"rgb(240, 240, 240)",anchorStrokeWidth:2,borderStrokeWidth:2,visible:t.resizable}))))});
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "polotno",
3
- "version": "2.25.12",
3
+ "version": "2.25.14",
4
4
  "description": "Design Editor Framework",
5
5
  "author": "Anton Lavrenov",
6
6
  "keywords": [