polotno 3.0.0-beta.35 → 3.0.0-beta.36

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 (13) hide show
  1. package/canvas/figure-element.js +1 -1
  2. package/canvas/html-element.js +1 -1
  3. package/canvas/page.js +1 -1
  4. package/canvas/table-element.js +1 -1
  5. package/model/group-model.d.ts +2 -4
  6. package/model/table-model.d.ts +2 -4
  7. package/model/table-model.js +1 -1
  8. package/package.json +1 -1
  9. package/pages-timeline/page-preview.js +1 -1
  10. package/polotno.bundle.js +36 -36
  11. package/toolbar/html-toolbar.js +1 -1
  12. package/toolbar/text-toolbar.js +2 -2
  13. package/utils/validate-key.js +1 -1
package/canvas/figure-element.js CHANGED
@@ -1 +1 @@
1
- import e from"react";import{observer as t}from"mobx-react-lite";import{Group as a,Rect as r,Path as s}from"react-konva";import{subTypeToPathDataFunc as o}from"../utils/figure-to-svg.js";import{isTouchDevice as i}from"../utils/screen.js";import{useColor as n}from"./use-color.js";const l={};export const FigureElement=t(({element:h,store:c})=>{const d=e.useRef(null),g=h.selectable||"admin"===c.role,m=i(),p=h.isSelected,f=Math.min(h.strokeWidth,h.width/2,h.height/2),u=Math.max(0,Math.min(h.width/2,h.height/2,h.cornerRadius)),w=n(h,h.a.fill,"fill"),b=Object.assign(Object.assign({width:h.a.width,height:h.a.height},w),{cornerRadius:u,opacity:h.animated("opacity"),shadowEnabled:h.shadowEnabled,shadowBlur:h.shadowBlur,shadowOffsetX:h.shadowOffsetX,shadowOffsetY:h.shadowOffsetY,shadowColor:h.shadowColor,shadowOpacity:h.shadowOpacity,preventDefault:!m||p,hideInExport:!h.showInExport}),y=n(h,h.stroke,"stroke"),x=Object.assign(Object.assign({visible:f>0,x:f/2,y:f/2,width:h.a.width-f,height:h.a.height-f},y),{strokeWidth:f,cornerRadius:Math.max(0,u-f),dash:h.dash.map(e=>e*f),opacity:h.animated("opacity"),hideInExport:!h.showInExport,listening:!1}),E=(k=h.subType,l[k]||(l[k]=(v=o(k),t(({element:t,fillProps:o,strokeProps:i})=>{let n=v({width:t.a.width,height:t.a.height,cornerRadius:t.cornerRadius}),l=1,h=1;"string"!=typeof n&&(l=n.scaleX,h=n.scaleY,n=n.path);const c=e.useRef(null);return e.createElement(e.Fragment,null,e.createElement(r,{width:t.width,height:t.height,fill:"transparent"}),e.createElement(s,Object.assign({},o,{ref:c,data:n,scaleX:l,scaleY:h})),e.createElement(a,{clipFunc:e=>{const t=c.current;if(t){var a=t.dataArray;e.beginPath();for(var r=0;r<a.length;r++){var s=a[r].command,o=a[r].points;switch(s){case"L":e.lineTo(o[0],o[1]);break;case"M":e.moveTo(o[0],o[1]);break;case"C":e.bezierCurveTo(o[0],o[1],o[2],o[3],o[4],o[5]);break;case"Q":e.quadraticCurveTo(o[0],o[1],o[2],o[3]);break;case"A":var i=o[0],n=o[1],l=o[2],h=o[3],d=o[4],g=o[5],m=o[6],p=o[7],f=l>h?l:h,u=l>h?1:l/h,w=l>h?h/l:1;e.translate(i,n),e.rotate(m),e.scale(u,w),e.arc(0,0,f,d,d+g,!p),e.scale(1/u,1/w),e.rotate(-m),e.translate(-i,-n);break;case"z":e.closePath()}}}},scaleX:l,scaleY:h},e.createElement(s,Object.assign({},i,{x:0,y:0,data:n,strokeWidth:2*i.strokeWidth,dash:i.dash.map(e=>e)}))))}))),l[k]||a);var k,v;return e.createElement(e.Fragment,null,e.createElement(a,{ref:d,id:h.id,x:h.a.x,y:h.a.y,rotation:h.a.rotation,opacity:h.a.opacity,listening:g,draggable:m?h.draggable&&p:h.draggable,name:"element",onDragMove:e=>{h.set({x:e.target.x(),y:e.target.y()})},onDragEnd:e=>{h.set({x:e.target.x(),y:e.target.y()})},onTransform:e=>{const t=e.target.scale();e.target.scaleX(1),e.target.scaleY(1),h.set({width:h.width*t.x,height:h.height*t.y,x:e.target.x(),y:e.target.y(),rotation:e.target.rotation()})}},e.createElement(E,{element:h,fillProps:b,strokeProps:x})))});
1
+ import t from"react";import{observer as e}from"mobx-react-lite";import{Group as a,Rect as r,Path as s}from"react-konva";import{subTypeToPathDataFunc as i}from"../utils/figure-to-svg.js";import{isTouchDevice as o}from"../utils/screen.js";import{useColor as h}from"./use-color.js";const n={};export const FigureElement=e(({element:l,store:c})=>{const d=t.useRef(null),g=l.selectable||"admin"===c.role,m=o(),p=l.isSelected,f=Math.min(l.strokeWidth,l.width/2,l.height/2),w=Math.max(0,Math.min(l.width/2,l.height/2,l.cornerRadius)),u=h(l,l.a.fill,"fill"),b=Object.assign(Object.assign({width:l.a.width,height:l.a.height},u),{cornerRadius:w,opacity:l.animated("opacity"),shadowEnabled:l.shadowEnabled,shadowBlur:l.shadowBlur,shadowOffsetX:l.shadowOffsetX,shadowOffsetY:l.shadowOffsetY,shadowColor:l.shadowColor,shadowOpacity:l.shadowOpacity,preventDefault:!m||p,hideInExport:!l.showInExport}),y=h(l,l.stroke,"stroke"),x=Object.assign(Object.assign({visible:f>0,x:f/2,y:f/2,width:l.a.width-f,height:l.a.height-f},y),{strokeWidth:f,cornerRadius:Math.max(0,w-f),dash:l.dash.map(t=>t*f),opacity:l.animated("opacity"),hideInExport:!l.showInExport,listening:!1}),k=Math.max(0,10-Math.min(l.a.width,l.a.height)),E=(v=l.subType,n[v]||(n[v]=(O=i(v),e(({element:e,fillProps:i,strokeProps:o,hitStrokeWidth:h})=>{let n=O({width:e.a.width,height:e.a.height,cornerRadius:e.cornerRadius}),l=1,c=1;"string"!=typeof n&&(l=n.scaleX,c=n.scaleY,n=n.path);const d=t.useRef(null);return t.createElement(t.Fragment,null,t.createElement(r,{width:e.a.width,height:e.a.height,fill:"transparent",hitStrokeWidth:h}),t.createElement(s,Object.assign({},i,{ref:d,data:n,scaleX:l,scaleY:c})),t.createElement(a,{clipFunc:t=>{const e=d.current;if(e){var a=e.dataArray;t.beginPath();for(var r=0;r<a.length;r++){var s=a[r].command,i=a[r].points;switch(s){case"L":t.lineTo(i[0],i[1]);break;case"M":t.moveTo(i[0],i[1]);break;case"C":t.bezierCurveTo(i[0],i[1],i[2],i[3],i[4],i[5]);break;case"Q":t.quadraticCurveTo(i[0],i[1],i[2],i[3]);break;case"A":var o=i[0],h=i[1],n=i[2],l=i[3],c=i[4],g=i[5],m=i[6],p=i[7],f=n>l?n:l,w=n>l?1:n/l,u=n>l?l/n:1;t.translate(o,h),t.rotate(m),t.scale(w,u),t.arc(0,0,f,c,c+g,!p),t.scale(1/w,1/u),t.rotate(-m),t.translate(-o,-h);break;case"z":t.closePath()}}}},scaleX:l,scaleY:c},t.createElement(s,Object.assign({},o,{x:0,y:0,data:n,strokeWidth:2*o.strokeWidth,dash:o.dash.map(t=>t)}))))}))),n[v]||a);var v,O;return t.createElement(t.Fragment,null,t.createElement(a,{ref:d,id:l.id,x:l.a.x,y:l.a.y,rotation:l.a.rotation,opacity:l.a.opacity,listening:g,draggable:m?l.draggable&&p:l.draggable,name:"element",onDragMove:t=>{l.set({x:t.target.x(),y:t.target.y()})},onDragEnd:t=>{l.set({x:t.target.x(),y:t.target.y()})},onTransform:t=>{const e=t.target.scale();t.target.scaleX(1),t.target.scaleY(1),l.set({width:l.width*e.x,height:l.height*e.y,x:t.target.x(),y:t.target.y(),rotation:t.target.rotation()})}},t.createElement(E,{element:l,fillProps:b,strokeProps:x,hitStrokeWidth:k})))});
package/canvas/html-element.js CHANGED
@@ -27,4 +27,4 @@ import t from"react";import{observer as e}from"mobx-react-lite";import{Group as
27
27
  -webkit-text-fill-color: transparent;
28
28
  color: transparent;
29
29
  }
30
- `;let P=["bold","color","font","italic","size","strike","underline","indent","list","direction"];export const setQuillFormats=t=>{P=t};export const createQuill=t=>new a(t,{toolbar:!1,keyboard:!1,clipboard:{matchVisual:!1},formats:P});export const setQuillContent=(t,e)=>{var o=t.clipboard.convert({html:"<div class='ql-editor' style='outline: none;'>"+e+"<p><br></p></div>",text:""});t.setContents(o),t.history.clear()};const B=({html:e,onBlur:o,onChange:n,element:r,clickCoords:i})=>{var l;const d=t.useRef(null);t.useEffect(()=>{if(!d.current){return}const t=(l=d.current,new a(l,{toolbar:!1,keyboard:!1,clipboard:{matchVisual:!1},formats:P}));var l;s.runInAction(()=>{quillRef.editor.instance=t}),window.__polotnoQuill=t,t.on("text-change",()=>{t.getSelection()&&s.runInAction(()=>{quillRef.currentFormat=t.getFormat(t.getSelection())}),setTimeout(()=>{var e,o;const i=null===(e=d.current)||void 0===e?void 0:e.childNodes[0];if(!i){return}const a=i.innerHTML;n($(a));const l=t.getContents(),s=r.fill;let c=null,f=!0;for(const t of l.ops){if("string"!=typeof t.insert||"\n"===t.insert){continue}const e=(null===(o=t.attributes)||void 0===o?void 0:o.color)||s;if(null===c){c=e}else if(e!==c){f=!1;break}}f&&c&&r.set({fill:c})},10)}),setQuillContent(t,e),i?setCursorFromCoords(t,i):t.setSelection(0,0,"api"),t.on("selection-change",(e,o,n)=>{e&&s.runInAction(()=>{quillRef.currentFormat=t.getFormat(t.getSelection())})}),d.current.childNodes[0].addEventListener("blur",t=>{const e=t.relatedTarget;if(null==e?void 0:e.classList.contains("ql-clipboard")){return}const n=function(t){return!!t&&!!t.closest(".sketch-picker")}(e);n||o()});const c=d.current.childNodes[0],f=e=>{var o,n;const r=t.getSelection();if(!r||0===r.length){return}const i=t.getText(r.index,r.length).replace(/\n$/,""),a=window.getSelection();let l="";if(a&&a.rangeCount>0){const t=a.getRangeAt(0),e=document.createElement("div");e.appendChild(t.cloneContents()),l=e.innerHTML}if(null===(o=e.clipboardData)||void 0===o||o.setData("text/plain",i),l){const t='<!DOCTYPE html><html><head><meta charset="utf-8"></head><body>\x3c!--StartFragment--\x3e<div style="white-space: pre-wrap; word-wrap: break-word;">'+l+"</div>\x3c!--EndFragment--\x3e</body></html>";null===(n=e.clipboardData)||void 0===n||n.setData("text/html",t)}e.preventDefault()},u=e=>{f(e);const o=t.getSelection();o&&o.length>0&&t.deleteText(o.index,o.length)};return c.addEventListener("copy",f),c.addEventListener("cut",u),()=>{c.removeEventListener("copy",f),c.removeEventListener("cut",u),s.runInAction(()=>{quillRef.editor.instance=null,quillRef.currentFormat={}}),delete window.__polotnoQuill}},[]),t.useEffect(()=>c(()=>r.text,()=>{var t,o;const n=quillRef.editor.instance;if(!n){return}const i=n.getSelection(),a=null===(o=null===(t=d.current)||void 0===t?void 0:t.childNodes)||void 0===o?void 0:o[0];$((null==a?void 0:a.innerHTML)||"")===r.text||(setQuillContent(n,e),i&&(n.setSelection(i.index,i.length),s.runInAction(()=>{quillRef.currentFormat=n.getFormat(n.getSelection())})))},{fireImmediately:!0}),[]),t.useEffect(()=>{window.addEventListener("blur",o);const t=t=>{var e;(null===(e=d.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:r.fill};r.fill.indexOf("gradient")>=0&&(f["--polotno-gradient"]=r.fill,f.color="transparent");const u=X(r);return t.createElement(L,{ref:d,style:Object.assign(Object.assign({},f),{fontSize:r.fontSize,fontWeight:r.fontWeight,textTransform:r.textTransform,width:r.a.width,fontFamily:'"'+r.fontFamily+'"',lineHeight:r.lineHeight,letterSpacing:r.letterSpacing*r.fontSize+"px",textAlign:r.align,opacity:Math.max(r.a.opacity,.2),textShadow:r.shadowEnabled?`${r.shadowOffsetX}px ${r.shadowOffsetY}px ${r.shadowBlur}px ${I(r.shadowColor,null!==(l=r.shadowOpacity)&&void 0!==l?l:1)}`:void 0,caretColor:u}),dir:p(T(r.text))})};function D(t){const e=document.createElement("canvas"),o=e.getContext("2d");return null==o||o.drawImage(t,0,0,e.width,e.height),function(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)}(e)}const W=/^((?!chrome|android).)*safari/i.test(navigator.userAgent),H=navigator.userAgent.includes("Firefox");export const HTMLElement=e(({element:e,store:a})=>{var c,p;const{textOverflowIndicatorStyle:F}=w(),z=t.useRef(null),[X,$]=t.useState(),[P,_]=t.useState(!1),[N,Q]=t.useState(!1),J=t.useRef(e.height),V=e.isSelected,G=g(V),U=e.fontSize/3,{textVerticalResizeEnabled:K}=d,Z=d.autoDeleteEmptyText,tt=g(e.fontFamily),[et]=h(a,e.fontFamily,e.fontStyle,e.fontWeight,e.text||e.placeholder),ot=e._editModeEnabled;O(z);const nt=et?e.fontFamily:tt!==e.fontFamily?tt:"Arial",rt=y(e).fill,it=x(e,{fontFamily:nt,color:rt}),at=x(e,{fontFamily:nt,color:rt,forEditor:!0}),lt=t.useRef([]),[,st]=t.useReducer(t=>t+1,0);t.useEffect(()=>{const t=lt.current;t.length>0&&(lt.current=[],t.forEach(t=>t()))});let{width:ct,height:dt}=function(e,o,n){return t.useMemo(()=>b(e),[e,o.width,n])}(it,e,et);t.useEffect(()=>{if(!et){return}const t=(t,o,n,r)=>{const i=C(`text ${e.id}`),l=()=>{a.history.ignore(t,o,n).then(()=>{lt.current.push(i),st()})};r?queueMicrotask(l):l()};if(!e.height){return void t(()=>{e.height||e.set({height:dt})},void 0,void 0,!0)}const{textOverflow:o}=d;if("change-font-size"!==o||P){"resize"===o&&(K&&e.height<dt&&!P&&t(()=>{e.set({height:dt})},!1,!0),K||e.height===dt||P||t(()=>{e.set({height:dt})},!1,!0))}else{const o=(t=>{let e=t.fontSize;for(let o=1;o<50;o++){const o=x(Object.assign(Object.assign({},t.toJSON()),{fontSize:e}),{fontFamily:t.fontFamily}),{height:n}=b(o);if(!(t.height&&n>t.height||!d.textSplitAllowed&&!t.curveEnabled&&S({html:o}))){break}e-=.5}return e})(e);o!==e.fontSize?t(()=>{e.set({fontSize:o})},!1,!0):e.height!==dt&&(K&&e.height<dt?t(()=>{e.set({height:dt})},!1,!0):K||t(()=>{e.set({height:dt})},!1,!0))}});const ft=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 E(e),t.lastArgs=Object.assign({},e)),t.lastResult;var o,n}},[]),ut=t.useRef(0),ht=t.useRef(null);t.useEffect(()=>{P||ot||(async()=>{ut.current++;const t=ut.current;let o=C(`text ${e.id} ${t}`);ht.current&&ht.current(),ht.current=o,Q(!0);let n=null;const r=W?5:1;for(let l=0;l<r;l++){const o=l>0?ft:E;try{if(n=await o({skipCache:l>0,html:it,width:e.width||1,height:e.height||dt||1,fontFamily:nt,padding:U,pixelRatio:a._elementsPixelRatio,font:a.fonts.find(t=>t.fontFamily===nt)||M.globalFonts.find(t=>t.fontFamily===nt)}),t!==ut.current){return}if((W||H)&&n&&D(n)){await new Promise(t=>setTimeout(t,50*(l+1)));continue}break}catch(i){console.error(i),j(`Error rendering rich text with id ${e.id}`);break}}n?$(n):o?(o(),o=null):console.error("Finish function is called twice!"),Q(!1)})()},[it,P,dt,ot,nt,e.height,a._elementsPixelRatio,et]);const[gt,mt]=A(N,300),[pt]=A(P,300,!0),xt=pt||gt;t.useEffect(()=>{var t;if(!xt){return s.autorun(()=>{const t=z.current;f(t,e)})}null===(t=z.current)||void 0===t||t.clearCache()},[X,xt,e.shadowColor,e.shadowOffsetX,e.shadowOffsetY,e.shadowOpacity]),t.useEffect(()=>{X&&!N&&ht.current&&(ht.current(),ht.current=null)},[X,N]),t.useLayoutEffect(()=>{if(!et){return}if(!e.curveEnabled){return}const t=new l.TextPath({data:m(e.a.width,e.a.height,e.curvePower,e.a.fontSize),text:T(e.text),letterSpacing:e.letterSpacing*e.a.fontSize,fontSize:e.a.fontSize,fontFamily:e.fontFamily,fontWeight:e.fontWeight,fontStyle:e.fontStyle,align:"center",textBaseline:"middle",fill:e.fill}),o=t.getSelfRect().width;if(o){const t=o-e.a.width,n=e.a.rotation*Math.PI/180,r=-t/2*Math.cos(n),i=-t/2*Math.sin(n);queueMicrotask(()=>{e.set({width:o,x:e.a.x+r,y:e.a.y+i})})}t.destroy()},[et,e.curveEnabled,e.curvePower,e.text,e.fontSize,e.fontFamily,e.fontWeight,e.fontStyle,e.letterSpacing]),t.useEffect(()=>()=>{ht.current&&ht.current()},[]),t.useEffect(()=>{G&&!V&&Z&&""===T(e.text)&&e.removable&&!e.placeholder&&a.deleteElements([e.id])},[Z,e.placeholder,e.removable,e.text,V,G]);let yt=0;"middle"===e.verticalAlign&&(yt=(e.height-dt)/2),"bottom"===e.verticalAlign&&(yt=e.height-dt);const wt=u({fontLoaded:et,fontFamily:e.fontFamily,fontSize:e.fontSize,lineHeight:e.lineHeight}),bt=e.backgroundPadding*(e.fontSize*wt*.5),vt=e.backgroundCornerRadius*(e.fontSize*wt*.5),Et=t.useMemo(()=>{if(!e.backgroundEnabled||e.curveEnabled||e.legacyBackground){return""}const t=v(it);if(0===t.length){return""}const o=t.map(t=>({left:t.left+U,right:t.right+U,top:t.top+U,bottom:t.bottom+U}));return k({rects:o,padding:bt,cornerRadius:vt})},[e.backgroundEnabled,e.curveEnabled,e.legacyBackground,it,et,bt,vt,U]),St=Y(),kt=m(e.a.width,dt,e.curvePower,e.fontSize),Ft=t.useRef(null),Ot=t.useRef(null),Rt=ot&&e.strokeWidth>0&&!e.curveEnabled,zt=ct>0?(e.a.width+2*U)/(ct+2*U):1;return t.createElement(t.Fragment,null,e.curveEnabled||e.legacyBackground?t.createElement(i,{x:e.a.x,y:e.a.y,offsetX:bt/zt,offsetY:bt/zt,rotation:e.a.rotation,scaleX:zt,scaleY:zt,hideInExport:!e.showInExport,listening:!1,visible:e.backgroundEnabled,opacity:e.backgroundOpacity*e.a.opacity,fill:e.backgroundColor,width:e.width+2*bt,height:e.height+2*bt,cornerRadius:vt}):t.createElement(r,{name:"html-background",x:e.a.x,y:e.a.y,offsetX:U/zt,offsetY:(U-yt)/zt,rotation:e.a.rotation,scaleX:zt,scaleY:zt,hideInExport:!e.showInExport,listening:!1,visible:e.backgroundEnabled&&Et.length>0,opacity:e.backgroundOpacity*e.a.opacity,fill:e.backgroundColor,data:Et}),t.createElement(r,{x:e.a.x,y:e.a.y,rotation:e.a.rotation,data:kt,stroke:F.stroke,strokeWidth:1,visible:!1}),t.createElement(i,{ref:z,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:!xt,draggable:St?e.draggable&&V:e.draggable,preventDefault:!St||V,opacity:ot?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&&(Ot.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];Ot.current=n?{x:n.clientX,y:n.clientY}:null,e.toggleEditMode(!0)}},onTransformStart:t=>{_(!0),J.current=e.height},onTransform:t=>{var o;const n=t.target,r=(null===(o=n.getStage())||void 0===o?void 0:o.findOne("Transformer")).getActiveAnchor(),i="middle-left"===r||"middle-right"===r,a="top-center"===r||"bottom-center"===r,l=n.scaleX();if(i){const t=n.scaleX(),o=n.width()*t,r=e.fontSize;let i=o;o<r&&(i=r,Ft.current&&n.position(Ft.current)),n.width(i),n.scaleX(1),n.scaleY(1);const a=x(Object.assign(Object.assign({},e.toJSON()),{width:i}),{fontFamily:nt,color:rt}),l=b(a).height,s=d.textVerticalResizeEnabled?Math.max(l,J.current):l;n.height(s),e.set({width:n.width(),height:s,x:n.x(),y:n.y()})}else if(a){const o="resize"===d.textOverflow,r="number"==typeof e.lineHeight?e.lineHeight:1;let i=o?dt:r*e.fontSize;const a=Math.max(i,t.target.height()*t.target.scaleY());n.scaleY(1),e.set({x:n.x(),y:n.y(),height:a,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})}Ft.current=t.target.position()},onTransformEnd:t=>{_(!1),Q(!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:z,image:X,x:e.a.x,y:e.a.y,offsetX:U,offsetY:U-yt,listening:!1,rotation:e.a.rotation,width:e.a.width+2*U,height:(e.a.width+2*U)*((null!==(c=null==X?void 0:X.height)&&void 0!==c?c:0)/((null==X?void 0:X.width)||1)||1),visible:!xt&&!ot,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||P||xt}),(xt||Rt)&&t.createElement(o,{x:e.a.x,y:e.a.y,rotation:e.a.rotation,offsetY:-yt},t.createElement(R,{divProps:{style:{pointerEvents:"none"}}},t.createElement(L,{dangerouslySetInnerHTML:{__html:it},style:{pointerEvents:"none",opacity:e.a.opacity,textShadow:e.shadowEnabled?`${e.shadowOffsetX}px ${e.shadowOffsetY}px ${e.shadowBlur}px ${I(e.shadowColor,null!==(p=e.shadowOpacity)&&void 0!==p?p:1)}`:void 0}}))),ot&&t.createElement(o,{x:e.a.x,y:e.a.y,rotation:e.a.rotation,offsetY:-yt},t.createElement(R,null,t.createElement(B,{html:at,element:e,onChange:t=>{const o=q({oldText:T(e.text),newText:T(t),element:e});e.set({text:t,fontSize:o})},onBlur:t=>{e.toggleEditMode(!1),mt(!0)},clickCoords:Ot.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=a.find(e.startContainer,!0);if(o){const n=o.offset(t.scroll)+e.startOffset;return void t.setSelection(n,0,"api")}}}catch(r){}t.setSelection(0,0,"api")}
30
+ `;let P=["background","bold","color","font","italic","size","strike","underline","indent","list","direction"];export const setQuillFormats=t=>{P=t};export const createQuill=t=>new a(t,{toolbar:!1,keyboard:!1,clipboard:{matchVisual:!1},formats:P});export const setQuillContent=(t,e)=>{var o=t.clipboard.convert({html:"<div class='ql-editor' style='outline: none;'>"+e+"<p><br></p></div>",text:""});t.setContents(o),t.history.clear()};const B=({html:e,onBlur:o,onChange:n,element:r,clickCoords:i})=>{var l;const d=t.useRef(null);t.useEffect(()=>{if(!d.current){return}const t=(l=d.current,new a(l,{toolbar:!1,keyboard:!1,clipboard:{matchVisual:!1},formats:P}));var l;s.runInAction(()=>{quillRef.editor.instance=t}),window.__polotnoQuill=t,t.on("text-change",()=>{t.getSelection()&&s.runInAction(()=>{quillRef.currentFormat=t.getFormat(t.getSelection())}),setTimeout(()=>{var e,o;const i=null===(e=d.current)||void 0===e?void 0:e.childNodes[0];if(!i){return}const a=i.innerHTML;n($(a));const l=t.getContents(),s=r.fill;let c=null,f=!0;for(const t of l.ops){if("string"!=typeof t.insert||"\n"===t.insert){continue}const e=(null===(o=t.attributes)||void 0===o?void 0:o.color)||s;if(null===c){c=e}else if(e!==c){f=!1;break}}f&&c&&r.set({fill:c})},10)}),setQuillContent(t,e),i?setCursorFromCoords(t,i):t.setSelection(0,0,"api"),t.on("selection-change",(e,o,n)=>{e&&s.runInAction(()=>{quillRef.currentFormat=t.getFormat(t.getSelection())})}),d.current.childNodes[0].addEventListener("blur",t=>{const e=t.relatedTarget;if(null==e?void 0:e.classList.contains("ql-clipboard")){return}const n=function(t){return!!t&&!!t.closest(".sketch-picker")}(e);n||o()});const c=d.current.childNodes[0],f=e=>{var o,n;const r=t.getSelection();if(!r||0===r.length){return}const i=t.getText(r.index,r.length).replace(/\n$/,""),a=window.getSelection();let l="";if(a&&a.rangeCount>0){const t=a.getRangeAt(0),e=document.createElement("div");e.appendChild(t.cloneContents()),l=e.innerHTML}if(null===(o=e.clipboardData)||void 0===o||o.setData("text/plain",i),l){const t='<!DOCTYPE html><html><head><meta charset="utf-8"></head><body>\x3c!--StartFragment--\x3e<div style="white-space: pre-wrap; word-wrap: break-word;">'+l+"</div>\x3c!--EndFragment--\x3e</body></html>";null===(n=e.clipboardData)||void 0===n||n.setData("text/html",t)}e.preventDefault()},u=e=>{f(e);const o=t.getSelection();o&&o.length>0&&t.deleteText(o.index,o.length)};return c.addEventListener("copy",f),c.addEventListener("cut",u),()=>{c.removeEventListener("copy",f),c.removeEventListener("cut",u),s.runInAction(()=>{quillRef.editor.instance=null,quillRef.currentFormat={}}),delete window.__polotnoQuill}},[]),t.useEffect(()=>c(()=>r.text,()=>{var t,e;const o=quillRef.editor.instance;if(!o){return}const n=o.getSelection(),i=null===(e=null===(t=d.current)||void 0===t?void 0:t.childNodes)||void 0===e?void 0:e[0];$((null==i?void 0:i.innerHTML)||"")===r.text||(setQuillContent(o,x(r,{forEditor:!0})),n&&(o.setSelection(n.index,n.length),s.runInAction(()=>{quillRef.currentFormat=o.getFormat(o.getSelection())})))},{fireImmediately:!0}),[]),t.useEffect(()=>{window.addEventListener("blur",o);const t=t=>{var e;(null===(e=d.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:r.fill};r.fill.indexOf("gradient")>=0&&(f["--polotno-gradient"]=r.fill,f.color="transparent");const u=X(r);return t.createElement(L,{ref:d,style:Object.assign(Object.assign({},f),{fontSize:r.fontSize,fontWeight:r.fontWeight,textTransform:r.textTransform,width:r.a.width,fontFamily:'"'+r.fontFamily+'"',lineHeight:r.lineHeight,letterSpacing:r.letterSpacing*r.fontSize+"px",textAlign:r.align,opacity:Math.max(r.a.opacity,.2),textShadow:r.shadowEnabled?`${r.shadowOffsetX}px ${r.shadowOffsetY}px ${r.shadowBlur}px ${I(r.shadowColor,null!==(l=r.shadowOpacity)&&void 0!==l?l:1)}`:void 0,caretColor:u}),dir:p(T(r.text))})};function D(t){const e=document.createElement("canvas"),o=e.getContext("2d");return null==o||o.drawImage(t,0,0,e.width,e.height),function(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)}(e)}const W=/^((?!chrome|android).)*safari/i.test(navigator.userAgent),H=navigator.userAgent.includes("Firefox");export const HTMLElement=e(({element:e,store:a})=>{var c,p;const{textOverflowIndicatorStyle:F}=w(),z=t.useRef(null),[X,$]=t.useState(),[P,_]=t.useState(!1),[N,Q]=t.useState(!1),J=t.useRef(e.height),V=e.isSelected,G=g(V),U=e.fontSize/3,{textVerticalResizeEnabled:K}=d,Z=d.autoDeleteEmptyText,tt=g(e.fontFamily),[et]=h(a,e.fontFamily,e.fontStyle,e.fontWeight,e.text||e.placeholder),ot=e._editModeEnabled;O(z);const nt=et?e.fontFamily:tt!==e.fontFamily?tt:"Arial",rt=y(e).fill,it=x(e,{fontFamily:nt,color:rt}),at=x(e,{fontFamily:nt,color:rt,forEditor:!0}),lt=t.useRef([]),[,st]=t.useReducer(t=>t+1,0);t.useEffect(()=>{const t=lt.current;t.length>0&&(lt.current=[],t.forEach(t=>t()))});let{width:ct,height:dt}=function(e,o,n){return t.useMemo(()=>b(e),[e,o.width,n])}(it,e,et);t.useEffect(()=>{if(!et){return}const t=(t,o,n,r)=>{const i=C(`text ${e.id}`),l=()=>{a.history.ignore(t,o,n).then(()=>{lt.current.push(i),st()})};r?queueMicrotask(l):l()};if(!e.height){return void t(()=>{e.height||e.set({height:dt})},void 0,void 0,!0)}const{textOverflow:o}=d;if("change-font-size"!==o||P){"resize"===o&&(K&&e.height<dt&&!P&&t(()=>{e.set({height:dt})},!1,!0),K||e.height===dt||P||t(()=>{e.set({height:dt})},!1,!0))}else{const o=(t=>{let e=t.fontSize;for(let o=1;o<50;o++){const o=x(Object.assign(Object.assign({},t.toJSON()),{fontSize:e}),{fontFamily:t.fontFamily}),{height:n}=b(o);if(!(t.height&&n>t.height||!d.textSplitAllowed&&!t.curveEnabled&&S({html:o}))){break}e-=.5}return e})(e);o!==e.fontSize?t(()=>{e.set({fontSize:o})},!1,!0):e.height!==dt&&(K&&e.height<dt?t(()=>{e.set({height:dt})},!1,!0):K||t(()=>{e.set({height:dt})},!1,!0))}});const ft=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 E(e),t.lastArgs=Object.assign({},e)),t.lastResult;var o,n}},[]),ut=t.useRef(0),ht=t.useRef(null);t.useEffect(()=>{P||ot||(async()=>{ut.current++;const t=ut.current;let o=C(`text ${e.id} ${t}`);ht.current&&ht.current(),ht.current=o,Q(!0);let n=null;const r=W?5:1;for(let l=0;l<r;l++){const o=l>0?ft:E;try{if(n=await o({skipCache:l>0,html:it,width:e.width||1,height:e.height||dt||1,fontFamily:nt,padding:U,pixelRatio:a._elementsPixelRatio,font:a.fonts.find(t=>t.fontFamily===nt)||M.globalFonts.find(t=>t.fontFamily===nt)}),t!==ut.current){return}if((W||H)&&n&&D(n)){await new Promise(t=>setTimeout(t,50*(l+1)));continue}break}catch(i){console.error(i),j(`Error rendering rich text with id ${e.id}`);break}}n?$(n):o?(o(),o=null):console.error("Finish function is called twice!"),Q(!1)})()},[it,P,dt,ot,nt,e.height,a._elementsPixelRatio,et]);const[gt,mt]=A(N,300),[pt]=A(P,300,!0),xt=pt||gt;t.useEffect(()=>{var t;if(!xt){return s.autorun(()=>{const t=z.current;f(t,e)})}null===(t=z.current)||void 0===t||t.clearCache()},[X,xt,e.shadowColor,e.shadowOffsetX,e.shadowOffsetY,e.shadowOpacity]),t.useEffect(()=>{X&&!N&&ht.current&&(ht.current(),ht.current=null)},[X,N]),t.useLayoutEffect(()=>{if(!et){return}if(!e.curveEnabled){return}const t=new l.TextPath({data:m(e.a.width,e.a.height,e.curvePower,e.a.fontSize),text:T(e.text),letterSpacing:e.letterSpacing*e.a.fontSize,fontSize:e.a.fontSize,fontFamily:e.fontFamily,fontWeight:e.fontWeight,fontStyle:e.fontStyle,align:"center",textBaseline:"middle",fill:e.fill}),o=t.getSelfRect().width;if(o){const t=o-e.a.width,n=e.a.rotation*Math.PI/180,r=-t/2*Math.cos(n),i=-t/2*Math.sin(n);queueMicrotask(()=>{e.set({width:o,x:e.a.x+r,y:e.a.y+i})})}t.destroy()},[et,e.curveEnabled,e.curvePower,e.text,e.fontSize,e.fontFamily,e.fontWeight,e.fontStyle,e.letterSpacing]),t.useEffect(()=>()=>{ht.current&&ht.current()},[]),t.useEffect(()=>{G&&!V&&Z&&""===T(e.text)&&e.removable&&!e.placeholder&&a.deleteElements([e.id])},[Z,e.placeholder,e.removable,e.text,V,G]);let yt=0;"middle"===e.verticalAlign&&(yt=(e.height-dt)/2),"bottom"===e.verticalAlign&&(yt=e.height-dt);const wt=u({fontLoaded:et,fontFamily:e.fontFamily,fontSize:e.fontSize,lineHeight:e.lineHeight}),bt=e.backgroundPadding*(e.fontSize*wt*.5),vt=e.backgroundCornerRadius*(e.fontSize*wt*.5),Et=t.useMemo(()=>{if(!e.backgroundEnabled||e.curveEnabled||e.legacyBackground){return""}const t=v(it);if(0===t.length){return""}const o=t.map(t=>({left:t.left+U,right:t.right+U,top:t.top+U,bottom:t.bottom+U}));return k({rects:o,padding:bt,cornerRadius:vt})},[e.backgroundEnabled,e.curveEnabled,e.legacyBackground,it,et,bt,vt,U]),St=Y(),kt=m(e.a.width,dt,e.curvePower,e.fontSize),Ft=t.useRef(null),Ot=t.useRef(null),Rt=ot&&e.strokeWidth>0&&!e.curveEnabled,zt=ct>0?(e.a.width+2*U)/(ct+2*U):1;return t.createElement(t.Fragment,null,e.curveEnabled||e.legacyBackground?t.createElement(i,{x:e.a.x,y:e.a.y,offsetX:bt/zt,offsetY:bt/zt,rotation:e.a.rotation,scaleX:zt,scaleY:zt,hideInExport:!e.showInExport,listening:!1,visible:e.backgroundEnabled,opacity:e.backgroundOpacity*e.a.opacity,fill:e.backgroundColor,width:e.width+2*bt,height:e.height+2*bt,cornerRadius:vt}):t.createElement(r,{name:"html-background",x:e.a.x,y:e.a.y,offsetX:U/zt,offsetY:(U-yt)/zt,rotation:e.a.rotation,scaleX:zt,scaleY:zt,hideInExport:!e.showInExport,listening:!1,visible:e.backgroundEnabled&&Et.length>0,opacity:e.backgroundOpacity*e.a.opacity,fill:e.backgroundColor,data:Et}),t.createElement(r,{x:e.a.x,y:e.a.y,rotation:e.a.rotation,data:kt,stroke:F.stroke,strokeWidth:1,visible:!1}),t.createElement(i,{ref:z,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:!xt,draggable:St?e.draggable&&V:e.draggable,preventDefault:!St||V,opacity:ot?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&&(Ot.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];Ot.current=n?{x:n.clientX,y:n.clientY}:null,e.toggleEditMode(!0)}},onTransformStart:t=>{_(!0),J.current=e.height},onTransform:t=>{var o;const n=t.target,r=(null===(o=n.getStage())||void 0===o?void 0:o.findOne("Transformer")).getActiveAnchor(),i="middle-left"===r||"middle-right"===r,a="top-center"===r||"bottom-center"===r,l=n.scaleX();if(i){const t=n.scaleX(),o=n.width()*t,r=e.fontSize;let i=o;o<r&&(i=r,Ft.current&&n.position(Ft.current)),n.width(i),n.scaleX(1),n.scaleY(1);const a=x(Object.assign(Object.assign({},e.toJSON()),{width:i}),{fontFamily:nt,color:rt}),l=b(a).height,s=d.textVerticalResizeEnabled?Math.max(l,J.current):l;n.height(s),e.set({width:n.width(),height:s,x:n.x(),y:n.y()})}else if(a){const o="resize"===d.textOverflow,r="number"==typeof e.lineHeight?e.lineHeight:1;let i=o?dt:r*e.fontSize;const a=Math.max(i,t.target.height()*t.target.scaleY());n.scaleY(1),e.set({x:n.x(),y:n.y(),height:a,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})}Ft.current=t.target.position()},onTransformEnd:t=>{_(!1),Q(!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:z,image:X,x:e.a.x,y:e.a.y,offsetX:U,offsetY:U-yt,listening:!1,rotation:e.a.rotation,width:e.a.width+2*U,height:(e.a.width+2*U)*((null!==(c=null==X?void 0:X.height)&&void 0!==c?c:0)/((null==X?void 0:X.width)||1)||1),visible:!xt&&!ot,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||P||xt}),(xt||Rt)&&t.createElement(o,{x:e.a.x,y:e.a.y,rotation:e.a.rotation,offsetY:-yt},t.createElement(R,{divProps:{style:{pointerEvents:"none"}}},t.createElement(L,{dangerouslySetInnerHTML:{__html:it},style:{pointerEvents:"none",opacity:e.a.opacity,textShadow:e.shadowEnabled?`${e.shadowOffsetX}px ${e.shadowOffsetY}px ${e.shadowBlur}px ${I(e.shadowColor,null!==(p=e.shadowOpacity)&&void 0!==p?p:1)}`:void 0}}))),ot&&t.createElement(o,{x:e.a.x,y:e.a.y,rotation:e.a.rotation,offsetY:-yt},t.createElement(R,null,t.createElement(B,{html:at,element:e,onChange:t=>{const o=q({oldText:T(e.text),newText:T(t),element:e});e.set({text:t,fontSize:o})},onBlur:t=>{e.toggleEditMode(!1),mt(!0)},clickCoords:Ot.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=a.find(e.startContainer,!0);if(o){const n=o.offset(t.scroll)+e.startOffset;return void t.setSelection(n,0,"api")}}}catch(r){}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 u,Tag as h,Text as g,Transformer as x,KonvaRenderer as p}from"react-konva";import f from"use-image";import{useWorkspaceStyle as b}from"./workspace-style.js";import v from"konva";import y from"./element.js";import{DrawingLayer as E}from"./drawing-layer.js";import{ensureDragOrder as w,useSnap as X}from"./use-transformer-snap.js";import{useImageLoader as Y}from"./image-element.js";import{getCrop as k}from"../utils/crop.js";import{___ as S,____ as A,isCreditVisible as M}from"../utils/validate-key.js";import{getClientRect as O,getTotalClientRect as R}from"../utils/math.js";import{pxToUnitRounded as j,pxToUnitString as P}from"../utils/unit.js";import{flags as I}from"../utils/flags.js";import{isTouchDevice as D}from"../utils/screen.js";import{useColor as C}from"./use-color.js";import{isGradient as T}from"../utils/gradient.js";import{Html as B}from"react-konva-utils";import{observerBatching as G}from"mobx-react-lite";const W=e=>p.batchedUpdates(e,null);G(e=>{p.isAlreadyRendering()?queueMicrotask(()=>W(e)):W(e)});const L=v.DD._drag;window.removeEventListener("mousemove",L),v.DD._drag=function(e){r(()=>{L.call(this,e)})},window.addEventListener("mousemove",v.DD._drag);const F={enabledAnchors:["top-left","top-center","top-right","middle-left","bottom-left","bottom-right","bottom-center","middle-right"],rotateEnabled:!0,rotationSnaps:[0,45,90,135,180,225,270,315],ignoreStroke:!0,flipEnabled:!1,keepRatio:!0},U={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"]},table:{keepRatio:!1,enabledAnchors:["top-left","top-right","middle-left","middle-right","bottom-left","bottom-right"]}};export function registerTransformerAttrs(e,t){U[e]=U[e]||t,Object.assign(U[e],t)}const z=e=>t.createElement(m,Object.assign({},e,{preventDefault:!1})),Z=n=>{var{url:i}=n,o=e(n,["url"]);const[r,l]=f(i,"anonymous"),s=r?k(r,{width:o.width,height:o.height},"center-middle"):{};return Y(l,i,"page background"),t.createElement(a,Object.assign({image:r},o,s))},V=e=>{const n=C({a:{width:e.width,height:e.height},width:e.width,height:e.height},e.fill);return t.createElement(m,Object.assign({},e,n))},_=n=>{const{background:i,scale:o,borderColor:r,transparencyBackgroundColor:l}=n,a=e(n,["background","scale","borderColor","transparencyBackgroundColor"]),s=t.useMemo(()=>!!v.Util.colorToRGBA(i)||T(i),[i]),c=t.useMemo(()=>{if(T(i)){return!0}const e=v.Util.colorToRGBA(i);return!e||e.a<1},[i]),d=t.useMemo(()=>{if(!c||l){return null}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},[c,l]);return t.createElement(t.Fragment,null,c&&(l?t.createElement(m,Object.assign({fill:l},a,{hideInExport:!0})):t.createElement(m,Object.assign({fillPatternImage:d},a,{opacity:.1,hideInExport:!0}))),s?t.createElement(V,Object.assign({fill:i},a)):t.createElement(Z,Object.assign({url:i},a)))},H=n(({selection:e})=>{if(!e.visible){return null}const{selectionRectStyle:n}=b();return 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.fill,stroke:n.stroke,strokeWidth:n.strokeWidth})});function J(e){let t=180*e/Math.PI;return t%=360,t>180?t-=360:t<-180&&(t+=360),Math.round(t)}const N=n(({x:e,y:n,width:i,height:o,rotation:r,anchor:l,store:a})=>{const{transformLabelStyle:c}=b();if(void 0===e||void 0===n||void 0===i||void 0===o||void 0===r||void 0===l){return null}const d=O({x:e,y:n,width:i,height:o,rotation:v.Util.radToDeg(r)}),m=(o/2+70)*Math.cos(r-Math.PI/2),u=(o/2+70)*Math.sin(r-Math.PI/2),x=j({unit:a.unit,dpi:a.dpi,px:i/a.scale,precious:"px"===a.unit?0:1})+" x "+j({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:(d.minX+d.maxX)/2+m,y:(d.minY+d.maxY)/2+u,offsetX:14,offsetY:14,visible:"rotater"===l},t.createElement(h,{cornerRadius:5,fill:c.fill}),t.createElement(g,{align:"center",verticalAlign:"middle",fill:c.textFill,padding:8,text:J(r).toString()+"°"})),t.createElement(s,{x:(d.minX+d.maxX)/2,y:d.maxY+20,visible:"rotater"!==l},t.createElement(h,{cornerRadius:5,fill:c.fill,pointerDirection:"up",pointerHeight:0,pointerWidth:0}),t.createElement(g,{align:"center",verticalAlign:"middle",fill:c.textFill,padding:8,text:x})))}),K=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(y,{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 $=null;export const registerNextDomDrop=e=>{$=e};const Q=atob("UG9sb3RubyBmcmVlIGxpY2Vuc2UgbGltaXRhdGlvbiBleGNlZWRlZCAtIFBsZWFzZSB1cGdyYWRlIHlvdXIgYWNjb3VudC4="),q=atob("I2MwMzkyYg=="),ee=atob("djAuOS4y"),te=e=>t.createElement(t.Fragment,null,t.createElement(s,{fill:q,height:200},t.createElement(h,{fill:q}),t.createElement(g,Object.assign({},e,{fill:"white",text:Q,height:void 0,padding:10,fontSize:20})))),ne=atob("RlJFRSAgVFJJQUwgIExJQ0VOU0U="),ie=(atob("UG93ZXJlZCBieSBQb2xvdG5v"),atob("TElDRU5TRSAgS0VZICBJUyAgTUlTU0lORw==")),oe=atob("UGxlYXNlIGFjdGl2YXRlIHlvdXIgbGljZW5zZS4KTGljZW5zZSByZWxhdGVkIHF1ZXN0aW9uczoKcG9sb3Ruby5jb20vY29udGFjdA=="),re=e=>{const n=1===A(),i=n?ie:ne,o=n?230:195;return t.createElement(l,Object.assign({},e,{listening:!1}),t.createElement(m,{fill:q,width:o,height:24,cornerRadius:2}),t.createElement(g,{text:i,fill:"white",fontSize:13,fontFamily:"monospace",width:o,align:"center",y:5,listening:!1}),n&&t.createElement(g,{text:oe,fill:"rgba(0,0,0,0.6)",fontSize:14,y:30,listening:!1}))};export default n(({store:e,page:n,width:r,height:a,pageControlsEnabled:p,components:f,altCloneEnabled:y,viewportSize:Y,layout:k="vertical",tooltipSafeArea:j,transformerSafeArea:C})=>{const T=b(),G=T.transformerStyle,W=F,L=e.bleedVisible?n.bleed:0,Z=n.computedWidth+2*L,V=n.computedHeight+2*L,J=(r-Z*e.scale)/2,Q=(a-V*e.scale)/2,q=t.useRef(null),ne=t.useRef(null),ie=t.useRef(null),oe=null==p||p,le=t.useRef(!1),[ae,se]=t.useState(null),[ce,de]=t.useState({}),[me,ue]=t.useState(0),he=useContextMenu({store:e}),ge=e.selectedElements.find(e=>e._cropModeEnabled),xe=e.selectedElements.find(e=>e.curveEnabled),pe=e.selectedShapes.filter(e=>!e.resizable).length>0,fe=e.selectedShapes.filter(e=>!e.draggable).length>0,be=e.selectedElements.filter(e=>!e.visible).length>0;t.useLayoutEffect(()=>{var t,n,i;if(!q.current){return}const o=q.current.getStage(),r=e.selectedShapes.map(e=>e._cropModeEnabled?null:o.findOne("#"+e.id)).filter(e=>!!e),l=1===e.selectedElements.length,a=l&&(null===(t=e.selectedElements[0])||void 0===t?void 0:t.type)||"many",s=U[a],c=Object.assign(Object.assign({},W),s||{});s&&("svg"!==a&&"image"!==a&&"gif"!==a||e.selectedElements[0].keepRatio||(c.enabledAnchors=W.enabledAnchors),"text"===a&&I.textVerticalResizeEnabled&&(c.enabledAnchors=null===(n=U.text.enabledAnchors)||void 0===n?void 0:n.concat(["bottom-center"])),"text"===a&&l&&e.selectedElements[0].curveEnabled&&(c.enabledAnchors=U.many.enabledAnchors)),q.current.setAttrs(Object.assign(Object.assign({},c),G)),pe&&q.current.enabledAnchors([]),fe&&q.current.rotateEnabled(!1),r.find(e=>null==e?void 0:e.isDragging())&&r.forEach(e=>{e.isDragging()||null==e||e.startDrag()}),q.current.nodes(r),w(),null===(i=q.current.getLayer())||void 0===i||i.batchDraw()},[e.selectedShapes,ge,pe,be,fe,xe,G]);const ve=()=>{var e,t;const n=q.current;if(!n){return}if(!n.isTransforming()){return void de({})}if(!n.nodes().length||!n.isTransforming()){return}const i=n.__getNodeRect(),o=null==n?void 0:n.getActiveAnchor(),r=n.getStage();de({anchor:o,x:i.x-(null!==(e=null==r?void 0:r.x())&&void 0!==e?e:0),y:i.y-(null!==(t=null==r?void 0:r.y())&&void 0!==t?t:0),rotation:i.rotation,width:i.width,height:i.height})},ye=t.useCallback(()=>{var e;if(null===(e=q.current)||void 0===e?void 0:e.isTransforming()){return}const t=q.current;if(!t||!t.nodes().length){return void ue(0)}const n=t.getClientRect();if(!t.getStage()){return}const i=function(e,t,n,i=0){const o=e.x+e.width/2,r=e.y+e.height/2,l=e.width/2,a=e.height/2,s=i*Math.PI/180,c=e=>{const t=e*Math.PI/180,i=(e%360+360)%360;let c;c=0===i||180===i?a:l;const d=Math.sin(t)*(c+n),m=-Math.cos(t)*(c+n),u=d*Math.cos(s)-m*Math.sin(s),h=d*Math.sin(s)+m*Math.cos(s);return{x:o+u,y:r+h}},d=e=>e.x>=t.left&&e.x<=t.right&&e.y>=t.top&&e.y<=t.bottom;if(d(c(0))){return 0}for(const m of[180,270,90]){if(d(c(m))){return m}}return 0}(n,{top:(null==C?void 0:C.top)||0,bottom:a-((null==C?void 0:C.bottom)||0),left:(null==C?void 0:C.left)||0,right:r-((null==C?void 0:C.right)||0)},G.rotateAnchorOffset,t.rotation());ue(i)},[C,r,a]);t.useEffect(()=>{var e;null===(e=q.current)||void 0===e||e.update(),ve(),ye()},[e.scale,ye]),t.useEffect(()=>{ye()},[e.selectedShapes,ye]);const Ee=i(()=>({visible:!1,x1:0,y1:0,x2:0,y2:0})),we=t.useRef(!1),Xe=D(),Ye=o(e=>{var t,n,i,o,r,l,a;if(Xe){return}we.current=!1;const s=e.target.findAncestor(".elements-container"),c=e.target.findAncestor("Transformer"),d=e.target.findAncestor(".page-abs-container");if(s||c||d){return}const m=null===(t=e.target.getStage())||void 0===t?void 0:t.getPointerPosition();m&&(m.x-=null!==(i=null===(n=e.target.getStage())||void 0===n?void 0:n.x())&&void 0!==i?i:0,m.y-=null!==(r=null===(o=e.target.getStage())||void 0===o?void 0:o.y())&&void 0!==r?r:0,Ee.visible=!0,Ee.x1=m.x,Ee.y1=m.y,Ee.x2=m.x,Ee.y2=m.y,(null!==(a=null===(l=e.target.getStage())||void 0===l?void 0:l.getPointersPositions().length)&&void 0!==a?a:0)>=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();if(!o||!r){return}const 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(),null==i||i.addEventListener("scroll",o),()=>{null==i||i.removeEventListener("scroll",o)}},[i.width,i.height])})({stageRef:ne,containerRef:ie,viewportSize:Y}),t.useEffect(()=>{const t=o(e=>{var t,n,i,o,r,l;if(!Ee.visible){return}null===(t=ne.current)||void 0===t||t.setPointersPositions(e);let a=null===(n=ne.current)||void 0===n?void 0:n.getPointerPosition();a?(a.x-=null!==(o=null===(i=ne.current)||void 0===i?void 0:i.x())&&void 0!==o?o:0,a.y-=null!==(l=null===(r=ne.current)||void 0===r?void 0:r.y())&&void 0!==l?l:0):a={x:Ee.x2,y:Ee.y2},Ee.x2=a.x,Ee.y2=a.y}),n=o(()=>{if(!Ee.visible){return}if(!ne.current){return}const t=ne.current.findOne(".selection"),n=t?t.getClientRect({skipStroke:!0}):{width:0,height:0,x:0,y:0};if(n.width&&n.height){const t=[];ne.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;v.Util.haveIntersection(n,o)&&l&&a&&t.push(r.top.id)});const i=[...new Set(t)];we.current=!0,e.selectElements(i)}Ee.visible=!1});return window.addEventListener("mousemove",t),window.addEventListener("touchmove",t),window.addEventListener("mouseup",n,{capture:!0}),window.addEventListener("touchend",n,{capture:!0}),()=>{window.removeEventListener("mousemove",t),window.removeEventListener("touchmove",t),window.removeEventListener("mouseup",n),window.removeEventListener("touchend",n)}},[]);const ke=t.useCallback(t=>{if(!e.selectedElements[0]){return}if(t&&e.selectedElementsIds.includes(t)){return}const i=R(e.selectedShapes),o=t?e.getElementById(t):{x:0,y:0,width:n.computedWidth,height:n.computedHeight,rotation:0},r=O(o),l=[];i.minX>r.maxX&&l.push({distance:i.minX-r.maxX,box1:i,box2:r,points:[{x:i.minX,y:i.minY+i.height/2},{x:r.maxX,y:i.minY+i.height/2},{x:r.maxX,y:r.minY+r.height/2}]}),i.maxX<r.minX&&l.push({distance:r.minX-i.maxX,box1:i,box2:r,points:[{x:i.maxX,y:i.minY+i.height/2},{x:r.minX,y:i.minY+i.height/2},{x:r.minX,y:r.minY+r.height/2}]}),i.minY>r.maxY&&l.push({box1:i,box2:r,distance:i.minY-r.maxY,points:[{x:i.minX+i.width/2,y:i.minY},{x:i.minX+i.width/2,y:r.maxY},{x:r.minX+r.width/2,y:r.maxY}]}),i.maxY<r.minY&&l.push({box1:i,box2:r,distance:r.minY-i.maxY,points:[{x:i.minX+i.width/2,y:i.maxY},{x:i.minX+i.width/2,y:r.minY},{x:r.minX+r.width/2,y:r.minY}]});const a=i.minX>=r.minX&&i.maxX<=r.maxX&&i.minY>=r.minY&&i.maxY<=r.maxY;if(a&&(l.push({distance:i.minX-r.minX,box1:i,box2:r,points:[{x:i.minX,y:i.minY+i.height/2},{x:r.minX,y:i.minY+i.height/2},{x:r.minX,y:r.minY+r.height/2}]}),l.push({distance:r.maxX-i.maxX,box1:i,box2:r,points:[{x:i.maxX,y:i.minY+i.height/2},{x:r.maxX,y:i.minY+i.height/2},{x:r.maxX,y:r.minY+r.height/2}]}),l.push({box1:i,box2:r,distance:i.minY-r.minY,points:[{x:i.minX+i.width/2,y:i.minY},{x:i.minX+i.width/2,y:r.minY},{x:r.minX+r.width/2,y:r.minY}]}),l.push({box1:i,box2:r,distance:r.maxY-i.maxY,points:[{x:i.minX+i.width/2,y:i.maxY},{x:i.minX+i.width/2,y:r.maxY},{x:r.minX+r.width/2,y:r.maxY}]})),0===l.length&&!a){const e=i.minX<r.maxX&&i.maxX>r.minX,t=i.minY<r.maxY&&i.maxY>r.minY;if(e&&t){const e=(Math.max(i.minY,r.minY)+Math.min(i.maxY,r.maxY))/2,t=(Math.max(i.minX,r.minX)+Math.min(i.maxX,r.maxX))/2;i.minX<r.minX?l.push({distance:r.minX-i.minX,box1:i,box2:r,points:[{x:i.minX,y:e},{x:r.minX,y:e},{x:r.minX,y:e}]}):l.push({distance:i.minX-r.minX,box1:i,box2:r,points:[{x:i.minX,y:e},{x:r.minX,y:e},{x:r.minX,y:e}]}),i.maxX>r.maxX?l.push({distance:i.maxX-r.maxX,box1:i,box2:r,points:[{x:r.maxX,y:e},{x:i.maxX,y:e},{x:r.maxX,y:e}]}):l.push({distance:r.maxX-i.maxX,box1:i,box2:r,points:[{x:i.maxX,y:e},{x:r.maxX,y:e},{x:r.maxX,y:e}]}),i.minY<r.minY?l.push({box1:i,box2:r,distance:r.minY-i.minY,points:[{x:t,y:i.minY},{x:t,y:r.minY},{x:t,y:r.minY}]}):l.push({box1:i,box2:r,distance:i.minY-r.minY,points:[{x:t,y:i.minY},{x:t,y:r.minY},{x:t,y:r.minY}]}),i.maxY>r.maxY?l.push({box1:i,box2:r,distance:i.maxY-r.maxY,points:[{x:t,y:r.maxY},{x:t,y:i.maxY},{x:t,y:r.maxY}]}):l.push({box1:i,box2:r,distance:r.maxY-i.maxY,points:[{x:t,y:i.maxY},{x:t,y:r.maxY},{x:t,y:r.maxY}]})}}JSON.stringify(ae)!==JSON.stringify(l)&&se(l)},[e,n]);t.useEffect(()=>{e.distanceGuidesVisible?ke():ae&&se(null)},[e.distanceGuidesVisible,ke,e.selectedShapes.map(e=>`${e.x},${e.y},${e.width},${e.height},${e.rotation}`).join("|")]);const Se=t.useRef(!1);t.useEffect(()=>{var e;let t;const n=null===(e=ie.current)||void 0===e?void 0:e.closest(".polotno-workspace-inner"),i=()=>{Se.current=!0,clearTimeout(t),t=setTimeout(()=>{Se.current=!1},300)};return null==n||n.addEventListener("scroll",i),()=>{clearTimeout(t),null==n||n.removeEventListener("scroll",i)}},[]),t.useEffect(()=>{const e=ne.current;if(!e){return}const t=e.container(),n=e=>{var t,n;e.touches.length>=2&&((null===(t=q.current)||void 0===t?void 0:t.isDragging())&&q.current.stopDrag(),null===(n=q.current)||void 0===n||n.nodes().forEach(e=>{e.isDragging()&&e.stopDrag()}))};return t.addEventListener("touchstart",n,{passive:!0}),t.addEventListener("touchmove",n,{passive:!0}),()=>{t.removeEventListener("touchstart",n),t.removeEventListener("touchmove",n)}},[]);const Ae=t=>{if(e.activePage!==n&&n.select(),Se.current){return}if(we.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||Ee.visible)){return void e.selectElements([])}const a=t.target.findAncestor(".element-container",!0),s=(null==a?void 0:a.findOne(".element"))||t.target.findAncestor(".element",!0),c=e.getElementById(null==s?void 0:s.id()),d=null==c?void 0:c.top,m=null==d?void 0:d.id,u=e.selectedElementsIds.indexOf(m)>=0,h=t.target.findAncestor(".page-container",!0);m&&i&&!u?e.selectElements(e.selectedElementsIds.concat([m])):m&&i&&u?e.selectElements(e.selectedElementsIds.filter(e=>e!==m)):!m||i||u?h?e.selectPages([n.id]):e.selectPages([]):e.selectElements([m])};X(q,e);const Me=e.activePage===n,Oe=e._selectedPagesIds.includes(n.id),Re=null==f?void 0:f.PageControls,je=null==f?void 0:f.Tooltip,Pe=null==f?void 0:f.ContextMenu,Ie=1/e.scale,De=0/e.scale;return t.createElement("div",{ref:ie,onDragOver:e=>e.preventDefault(),onDrop:t=>{if(t.preventDefault(),!ne.current){return}ne.current.setPointersPositions(t);const i=ne.current.findOne(".elements-container"),o=null==i?void 0:i.getRelativePointerPosition(),r=ne.current.getPointerPosition(),l=ne.current.getAllIntersections(r).map(e=>e.findAncestor(".element",!0)).filter(Boolean),a=[...new Set(l.reverse())].map(t=>e.getElementById(t.id())).filter(e=>!!e),s=a[0];$&&o&&($(o,s,{elements:a,page:n}),$=null)},style:{position:"relative",width:r+"px",height:a+"px",overflow:"hidden",flexShrink:0},className:"polotno-page-container"+(Me?" active-page":"")},t.createElement(u,{ref:ne,width:Math.min(r,Y.width+200),height:Math.min(Y.height+200,a),onClick:Ae,onTap:Ae,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([]),he.open({x:t.evt.clientX,y:t.evt.clientY})},onMouseDown:Ye,onMouseMove:t=>{if(!e.distanceGuidesVisible&&!t.evt.altKey){return void(ae&&se(null))}const n=t.target.findAncestor(".element",!0),i=null==n?void 0:n.id();ke(i)},onDragStart:t=>{var n;const i=t.target.getStage();if(i&&i.getPointersPositions().length>=2){return void t.target.stopDrag()}const o=t.target.findAncestor(".element",!0);if(o){const i=e.getElementById(null==o?void 0:o.id()),r=null==i?void 0:i.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=q.current)||void 0===n||n.startDrag(t))}ae&&se(null)},pageId:n.id,style:{position:"absolute",overflow:"hidden",top:0,left:0}},t.createElement(c,null,t.createElement(z,{width:r,height:a,fill:T.workspaceBackgroundColor}),t.createElement(l,{x:J,y:Q,scaleX:e.scale,scaleY:e.scale,name:"page-container"},t.createElement(l,{name:"page-container-2"},t.createElement(l,{name:"page-background-group",x:L,y:L},t.createElement(_,{x:-n.bleed,y:-n.bleed,width:n.computedWidth+2*n.bleed,height:n.computedHeight+2*n.bleed,background:n.background,transparencyBackgroundColor:T.transparencyBackgroundColor,name:"page-background",preventDefault:!1,scale:e.scale})),t.createElement(l,{x:L,y:L,name:"elements-container",listening:!e.isPlaying},t.createElement(m,{name:"elements-area",width:n.computedWidth,height:n.computedHeight,listening:!1}),t.createElement(K,{elements:n.children,store:e})),t.createElement(m,{stroke:T.bleedColor,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}),S()===ee&&t.createElement(te,{name:"hit-detection",x:-Ie/2-De,y:-Ie/2-De,width:Z+Ie+2*De,height:V+Ie+2*De}))),t.createElement(d,{name:"workspace-background",points:[0,0,r,0,r,a,0,a,0,0,J,Q,J,a-Q,r-J,a-Q,r-J,Q,J,Q],listening:!1,closed:!0,fill:T.workspaceBackgroundColor}),t.createElement(l,{x:J,y:Q,scaleX:e.scale,scaleY:e.scale},t.createElement(m,{name:"page-highlight",hideInExport:!0,x:-Ie/2-De,y:-Ie/2-De,width:Z+Ie+2*De,height:V+Ie+2*De,stroke:Oe?T.activePageBorderColor:T.pageBorderColor,strokeWidth:2,listening:!1,strokeScaleEnabled:!1})),t.createElement(l,{x:J+L*e.scale,y:Q+L*e.scale,scaleX:e.scale,scaleY:e.scale,name:"page-abs-container"},t.createElement(x,{ref:q,rotateAnchorAngle:me,onDragStart:t=>{var i;const o=t.target.getStage();o&&o.getPointersPositions().length>=2?t.target.stopDrag():((null===(i=t.evt)||void 0===i?void 0:i.altKey)&&y&&e.selectedElements.forEach(e=>{const t=e.clone({},{skipSelect:!0}),i=n.children.indexOf(e);n.setElementZIndex(t.id,i)}),le.current=!0,e.history.startTransaction())},onDragEnd:()=>{le.current&&(e.history.endTransaction(),le.current=!1),ye()},onTransformStart:()=>{e.history.startTransaction(),se(null)},boundBoxFunc:(t,n)=>{var i;const o=Math.abs(n.width)<1||Math.abs(n.height)<1,r=Math.abs(t.width)<1||Math.abs(t.height)<1;if(o&&!r){return t}const l=e.selectedElements;if(1===l.length&&"table"===(null===(i=l[0])||void 0===i?void 0:i.type)){const e=l[0],i=Math.abs(t.width),o=Math.abs(t.height);if(i>0&&o>0){const r=Math.abs(n.width)/i,l=Math.abs(n.height)/o,a=e.width*r,s=e.height*l;if(a<e.minWidth||s<e.minHeight){return t}}}return n},onTransform:e=>{const t=q.current.nodes(),n=t[t.length-1];e.target===n&&setTimeout(()=>{ve()},0)},onTransformEnd:t=>{de({}),e.history.endTransaction(),ye()},visible:!e.isPlaying}),ae&&ae.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:T.distanceGuideStyle.stroke,strokeWidth:1,strokeScaleEnabled:!1})),t.createElement(m,Object.assign({},r,{stroke:T.distanceGuideStyle.stroke,strokeWidth:1,strokeScaleEnabled:!1})),t.createElement(d,{points:[n[0].x,n[0].y,n[1].x,n[1].y],stroke:T.distanceGuideStyle.stroke,strokeWidth:1,strokeScaleEnabled:!1}),t.createElement(d,{points:[n[1].x,n[1].y,n[2].x,n[2].y],stroke:T.distanceGuideStyle.stroke,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(h,{cornerRadius:5,fill:T.distanceGuideStyle.labelFill,pointerDirection:"down"}),t.createElement(g,{align:"center",verticalAlign:"middle",fill:T.distanceGuideStyle.labelTextFill,padding:5,text:P({unit:e.unit,dpi:e.dpi,px:i})})))),n._rendering&&t.createElement(l,null,t.createElement(m,{width:Z,height:V,fill:"rgba(255,255,255,0.9)"}),t.createElement(g,{text:"Rendering...",fontSize:60,width:Z,height:V,align:"center",verticalAlign:"middle"})),je&&t.createElement(je,{components:f,store:e,page:n,stageRef:ne,tooltipSafeArea:j}),Pe&&t.createElement(B,null,t.createElement(Pe,Object.assign({components:f,store:e},he.props)))),t.createElement(E,{store:e,page:n,width:r,height:a,scale:e.scale,xPadding:J,yPadding:Q,bleed:L}),t.createElement(N,Object.assign({},ce,{store:e})),t.createElement(H,{selection:Ee}),A()>0&&t.createElement(l,{hideInExport:!0},t.createElement(re,{name:"cache-bounds",x:r-(1===A()?250:210),y:a-(1===A()?95:45)}),t.createElement(re,{name:"cache-bounds-t",x:10,y:10})),M()&&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","_blank","noopener")},onTap:()=>{window.open("https://polotno.com","_blank","noopener")}}),t.createElement(l,{name:"line-guides"}))),oe&&Re&&t.createElement(Re,{store:e,page:n,xPadding:J,yPadding:Q,layout:k}))});
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 u,Tag as h,Text as g,Transformer as x,KonvaRenderer as p}from"react-konva";import f from"use-image";import{useWorkspaceStyle as b}from"./workspace-style.js";import v from"konva";import y from"./element.js";import{DrawingLayer as E}from"./drawing-layer.js";import{ensureDragOrder as w,useSnap as X}from"./use-transformer-snap.js";import{useImageLoader as Y}from"./image-element.js";import{getCrop as k}from"../utils/crop.js";import{___ as S,____ as A,isCreditVisible as M}from"../utils/validate-key.js";import{getClientRect as O,getTotalClientRect as P}from"../utils/math.js";import{pxToUnitRounded as j,pxToUnitString as R}from"../utils/unit.js";import{flags as I}from"../utils/flags.js";import{isTouchDevice as D}from"../utils/screen.js";import{useColor as C}from"./use-color.js";import{isGradient as T}from"../utils/gradient.js";import{Html as B}from"react-konva-utils";import{observerBatching as G}from"mobx-react-lite";const W=e=>p.batchedUpdates(e,null);G(e=>{p.isAlreadyRendering()?queueMicrotask(()=>W(e)):W(e)});const L=v.DD._drag;window.removeEventListener("mousemove",L),v.DD._drag=function(e){r(()=>{L.call(this,e)})},window.addEventListener("mousemove",v.DD._drag);const F={enabledAnchors:["top-left","top-center","top-right","middle-left","bottom-left","bottom-right","bottom-center","middle-right"],rotateEnabled:!0,rotationSnaps:[0,45,90,135,180,225,270,315],ignoreStroke:!0,flipEnabled:!1,keepRatio:!0},U={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"]},table:{keepRatio:!1,enabledAnchors:["top-left","top-right","middle-left","middle-right","bottom-left","bottom-right"]}};export function registerTransformerAttrs(e,t){U[e]=U[e]||t,Object.assign(U[e],t)}const z=e=>t.createElement(m,Object.assign({},e,{preventDefault:!1})),Z=n=>{var{url:i}=n,o=e(n,["url"]);const[r,l]=f(i,"anonymous"),s=r?k(r,{width:o.width,height:o.height},"center-middle"):{};return Y(l,i,"page background"),t.createElement(a,Object.assign({image:r},o,s))},V=e=>{const n=C({a:{width:e.width,height:e.height},width:e.width,height:e.height},e.fill);return t.createElement(m,Object.assign({},e,n))},_=n=>{const{background:i,scale:o,borderColor:r,transparencyBackgroundColor:l}=n,a=e(n,["background","scale","borderColor","transparencyBackgroundColor"]),s=t.useMemo(()=>!!v.Util.colorToRGBA(i)||T(i),[i]),c=t.useMemo(()=>{if(T(i)){return!0}const e=v.Util.colorToRGBA(i);return!e||e.a<1},[i]),d=t.useMemo(()=>{if(!c||l){return null}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},[c,l]);return t.createElement(t.Fragment,null,c&&(l?t.createElement(m,Object.assign({fill:l},a,{hideInExport:!0})):t.createElement(m,Object.assign({fillPatternImage:d},a,{opacity:.1,hideInExport:!0}))),s?t.createElement(V,Object.assign({fill:i},a)):t.createElement(Z,Object.assign({url:i},a)))},H=n(({selection:e})=>{if(!e.visible){return null}const{selectionRectStyle:n}=b();return 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.fill,stroke:n.stroke,strokeWidth:n.strokeWidth})});function J(e){let t=180*e/Math.PI;return t%=360,t>180?t-=360:t<-180&&(t+=360),Math.round(t)}const N=n(({x:e,y:n,width:i,height:o,rotation:r,anchor:l,store:a})=>{const{transformLabelStyle:c}=b();if(void 0===e||void 0===n||void 0===i||void 0===o||void 0===r||void 0===l){return null}const d=O({x:e,y:n,width:i,height:o,rotation:v.Util.radToDeg(r)}),m=(o/2+70)*Math.cos(r-Math.PI/2),u=(o/2+70)*Math.sin(r-Math.PI/2),x=j({unit:a.unit,dpi:a.dpi,px:i/a.scale,precious:"px"===a.unit?0:1})+" x "+j({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:(d.minX+d.maxX)/2+m,y:(d.minY+d.maxY)/2+u,offsetX:14,offsetY:14,visible:"rotater"===l},t.createElement(h,{cornerRadius:5,fill:c.fill}),t.createElement(g,{align:"center",verticalAlign:"middle",fill:c.textFill,padding:8,text:J(r).toString()+"°"})),t.createElement(s,{x:(d.minX+d.maxX)/2,y:d.maxY+20,visible:"rotater"!==l},t.createElement(h,{cornerRadius:5,fill:c.fill,pointerDirection:"up",pointerHeight:0,pointerWidth:0}),t.createElement(g,{align:"center",verticalAlign:"middle",fill:c.textFill,padding:8,text:x})))}),K=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(y,{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 $=null;export const registerNextDomDrop=e=>{$=e};const Q=atob("UG9sb3RubyBmcmVlIGxpY2Vuc2UgbGltaXRhdGlvbiBleGNlZWRlZCAtIFBsZWFzZSB1cGdyYWRlIHlvdXIgYWNjb3VudC4="),q=atob("I2MwMzkyYg=="),ee=atob("djAuOS4y"),te=e=>t.createElement(t.Fragment,null,t.createElement(s,{fill:q,height:200},t.createElement(h,{fill:q}),t.createElement(g,Object.assign({},e,{fill:"white",text:Q,height:void 0,padding:10,fontSize:20})))),ne=atob("RlJFRSAgVFJJQUwgIExJQ0VOU0U="),ie=(atob("UG93ZXJlZCBieSBQb2xvdG5v"),atob("TElDRU5TRSAgS0VZICBJUyAgTUlTU0lORw==")),oe=atob("UGxlYXNlIGFjdGl2YXRlIHlvdXIgbGljZW5zZS4KTGljZW5zZSByZWxhdGVkIHF1ZXN0aW9uczoKcG9sb3Ruby5jb20vY29udGFjdA=="),re=e=>{const n=1===A(),i=n?ie:ne,o=n?230:195;return t.createElement(l,Object.assign({},e,{listening:!1}),t.createElement(m,{fill:q,width:o,height:24,cornerRadius:2}),t.createElement(g,{text:i,fill:"white",fontSize:13,fontFamily:"monospace",width:o,align:"center",y:5,listening:!1}),n&&t.createElement(g,{text:oe,fill:"rgba(0,0,0,0.6)",fontSize:14,y:30,listening:!1}))};export default n(({store:e,page:n,width:r,height:a,pageControlsEnabled:p,components:f,altCloneEnabled:y,viewportSize:Y,layout:k="vertical",tooltipSafeArea:j,transformerSafeArea:C})=>{const T=b(),G=T.transformerStyle,W=F,L=e.bleedVisible?n.bleed:0,Z=n.computedWidth+2*L,V=n.computedHeight+2*L,J=(r-Z*e.scale)/2,Q=(a-V*e.scale)/2,q=t.useRef(null),ne=t.useRef(null),ie=t.useRef(null),oe=null==p||p,le=t.useRef(!1),[ae,se]=t.useState(null),[ce,de]=t.useState({}),[me,ue]=t.useState(0),he=useContextMenu({store:e}),ge=e.selectedElements.find(e=>e._cropModeEnabled),xe=e.selectedElements.find(e=>e.curveEnabled),pe=e.selectedShapes.filter(e=>!e.resizable).length>0,fe=e.selectedShapes.filter(e=>!e.draggable).length>0,be=e.selectedElements.filter(e=>!e.visible).length>0;t.useLayoutEffect(()=>{var t,n,i;if(!q.current){return}const o=q.current.getStage(),r=e.selectedShapes.map(e=>e._cropModeEnabled?null:o.findOne("#"+e.id)).filter(e=>!!e),l=1===e.selectedElements.length,a=l&&(null===(t=e.selectedElements[0])||void 0===t?void 0:t.type)||"many",s=U[a],c=Object.assign(Object.assign({},W),s||{});s&&("svg"!==a&&"image"!==a&&"gif"!==a||e.selectedElements[0].keepRatio||(c.enabledAnchors=W.enabledAnchors),"text"===a&&I.textVerticalResizeEnabled&&(c.enabledAnchors=null===(n=U.text.enabledAnchors)||void 0===n?void 0:n.concat(["bottom-center"])),"text"===a&&l&&e.selectedElements[0].curveEnabled&&(c.enabledAnchors=U.many.enabledAnchors)),q.current.setAttrs(Object.assign(Object.assign({},c),G)),pe&&q.current.enabledAnchors([]),fe&&q.current.rotateEnabled(!1),r.find(e=>null==e?void 0:e.isDragging())&&r.forEach(e=>{e.isDragging()||null==e||e.startDrag()}),q.current.nodes(r),w(),null===(i=q.current.getLayer())||void 0===i||i.batchDraw()},[e.selectedShapes,ge,pe,be,fe,xe,G]);const ve=()=>{var e,t;const n=q.current;if(!n){return}if(!n.isTransforming()){return void de({})}if(!n.nodes().length||!n.isTransforming()){return}const i=n.__getNodeRect(),o=null==n?void 0:n.getActiveAnchor(),r=n.getStage();de({anchor:o,x:i.x-(null!==(e=null==r?void 0:r.x())&&void 0!==e?e:0),y:i.y-(null!==(t=null==r?void 0:r.y())&&void 0!==t?t:0),rotation:i.rotation,width:i.width,height:i.height})},ye=t.useCallback(()=>{var e;if(null===(e=q.current)||void 0===e?void 0:e.isTransforming()){return}const t=q.current;if(!t||!t.nodes().length){return void ue(0)}const n=t.getClientRect();if(!t.getStage()){return}const i=function(e,t,n,i=0){const o=e.x+e.width/2,r=e.y+e.height/2,l=e.width/2,a=e.height/2,s=i*Math.PI/180,c=e=>{const t=e*Math.PI/180,i=(e%360+360)%360;let c;c=0===i||180===i?a:l;const d=Math.sin(t)*(c+n),m=-Math.cos(t)*(c+n),u=d*Math.cos(s)-m*Math.sin(s),h=d*Math.sin(s)+m*Math.cos(s);return{x:o+u,y:r+h}},d=e=>e.x>=t.left&&e.x<=t.right&&e.y>=t.top&&e.y<=t.bottom;if(d(c(0))){return 0}for(const m of[180,270,90]){if(d(c(m))){return m}}return 0}(n,{top:(null==C?void 0:C.top)||0,bottom:a-((null==C?void 0:C.bottom)||0),left:(null==C?void 0:C.left)||0,right:r-((null==C?void 0:C.right)||0)},G.rotateAnchorOffset,t.rotation());ue(i)},[C,r,a]);t.useEffect(()=>{var e;null===(e=q.current)||void 0===e||e.update(),ve(),ye()},[e.scale,ye]),t.useEffect(()=>{ye()},[e.selectedShapes,ye]);const Ee=i(()=>({visible:!1,x1:0,y1:0,x2:0,y2:0})),we=t.useRef(!1),Xe=D(),Ye=o(e=>{var t,n,i,o,r,l,a;if(Xe){return}we.current=!1;const s=e.target.findAncestor(".elements-container"),c=e.target.findAncestor("Transformer"),d=e.target.findAncestor(".page-abs-container");if(s||c||d){return}const m=null===(t=e.target.getStage())||void 0===t?void 0:t.getPointerPosition();m&&(m.x-=null!==(i=null===(n=e.target.getStage())||void 0===n?void 0:n.x())&&void 0!==i?i:0,m.y-=null!==(r=null===(o=e.target.getStage())||void 0===o?void 0:o.y())&&void 0!==r?r:0,Ee.visible=!0,Ee.x1=m.x,Ee.y1=m.y,Ee.x2=m.x,Ee.y2=m.y,(null!==(a=null===(l=e.target.getStage())||void 0===l?void 0:l.getPointersPositions().length)&&void 0!==a?a:0)>=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();if(!o||!r){return}const 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(),null==i||i.addEventListener("scroll",o),()=>{null==i||i.removeEventListener("scroll",o)}},[i.width,i.height])})({stageRef:ne,containerRef:ie,viewportSize:Y}),t.useEffect(()=>{const t=o(e=>{var t,n,i,o,r,l;if(!Ee.visible){return}null===(t=ne.current)||void 0===t||t.setPointersPositions(e);let a=null===(n=ne.current)||void 0===n?void 0:n.getPointerPosition();a?(a.x-=null!==(o=null===(i=ne.current)||void 0===i?void 0:i.x())&&void 0!==o?o:0,a.y-=null!==(l=null===(r=ne.current)||void 0===r?void 0:r.y())&&void 0!==l?l:0):a={x:Ee.x2,y:Ee.y2},Ee.x2=a.x,Ee.y2=a.y}),n=o(()=>{if(!Ee.visible){return}if(!ne.current){return}const t=ne.current.findOne(".selection"),n=t?t.getClientRect({skipStroke:!0}):{width:0,height:0,x:0,y:0};if(n.width&&n.height){const t=[];ne.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;v.Util.haveIntersection(n,o)&&l&&a&&t.push(r.top.id)});const i=[...new Set(t)];we.current=!0,e.selectElements(i)}Ee.visible=!1});return window.addEventListener("mousemove",t),window.addEventListener("touchmove",t),window.addEventListener("mouseup",n,{capture:!0}),window.addEventListener("touchend",n,{capture:!0}),()=>{window.removeEventListener("mousemove",t),window.removeEventListener("touchmove",t),window.removeEventListener("mouseup",n),window.removeEventListener("touchend",n)}},[]);const ke=t.useCallback(t=>{if(!e.selectedElements[0]){return}if(t&&e.selectedElementsIds.includes(t)){return}const i=P(e.selectedShapes),o=t?e.getElementById(t):{x:0,y:0,width:n.computedWidth,height:n.computedHeight,rotation:0},r=O(o),l=[];i.minX>r.maxX&&l.push({distance:i.minX-r.maxX,box1:i,box2:r,points:[{x:i.minX,y:i.minY+i.height/2},{x:r.maxX,y:i.minY+i.height/2},{x:r.maxX,y:r.minY+r.height/2}]}),i.maxX<r.minX&&l.push({distance:r.minX-i.maxX,box1:i,box2:r,points:[{x:i.maxX,y:i.minY+i.height/2},{x:r.minX,y:i.minY+i.height/2},{x:r.minX,y:r.minY+r.height/2}]}),i.minY>r.maxY&&l.push({box1:i,box2:r,distance:i.minY-r.maxY,points:[{x:i.minX+i.width/2,y:i.minY},{x:i.minX+i.width/2,y:r.maxY},{x:r.minX+r.width/2,y:r.maxY}]}),i.maxY<r.minY&&l.push({box1:i,box2:r,distance:r.minY-i.maxY,points:[{x:i.minX+i.width/2,y:i.maxY},{x:i.minX+i.width/2,y:r.minY},{x:r.minX+r.width/2,y:r.minY}]});const a=i.minX>=r.minX&&i.maxX<=r.maxX&&i.minY>=r.minY&&i.maxY<=r.maxY;if(a&&(l.push({distance:i.minX-r.minX,box1:i,box2:r,points:[{x:i.minX,y:i.minY+i.height/2},{x:r.minX,y:i.minY+i.height/2},{x:r.minX,y:r.minY+r.height/2}]}),l.push({distance:r.maxX-i.maxX,box1:i,box2:r,points:[{x:i.maxX,y:i.minY+i.height/2},{x:r.maxX,y:i.minY+i.height/2},{x:r.maxX,y:r.minY+r.height/2}]}),l.push({box1:i,box2:r,distance:i.minY-r.minY,points:[{x:i.minX+i.width/2,y:i.minY},{x:i.minX+i.width/2,y:r.minY},{x:r.minX+r.width/2,y:r.minY}]}),l.push({box1:i,box2:r,distance:r.maxY-i.maxY,points:[{x:i.minX+i.width/2,y:i.maxY},{x:i.minX+i.width/2,y:r.maxY},{x:r.minX+r.width/2,y:r.maxY}]})),0===l.length&&!a){const e=i.minX<r.maxX&&i.maxX>r.minX,t=i.minY<r.maxY&&i.maxY>r.minY;if(e&&t){const e=(Math.max(i.minY,r.minY)+Math.min(i.maxY,r.maxY))/2,t=(Math.max(i.minX,r.minX)+Math.min(i.maxX,r.maxX))/2;i.minX<r.minX?l.push({distance:r.minX-i.minX,box1:i,box2:r,points:[{x:i.minX,y:e},{x:r.minX,y:e},{x:r.minX,y:e}]}):l.push({distance:i.minX-r.minX,box1:i,box2:r,points:[{x:i.minX,y:e},{x:r.minX,y:e},{x:r.minX,y:e}]}),i.maxX>r.maxX?l.push({distance:i.maxX-r.maxX,box1:i,box2:r,points:[{x:r.maxX,y:e},{x:i.maxX,y:e},{x:r.maxX,y:e}]}):l.push({distance:r.maxX-i.maxX,box1:i,box2:r,points:[{x:i.maxX,y:e},{x:r.maxX,y:e},{x:r.maxX,y:e}]}),i.minY<r.minY?l.push({box1:i,box2:r,distance:r.minY-i.minY,points:[{x:t,y:i.minY},{x:t,y:r.minY},{x:t,y:r.minY}]}):l.push({box1:i,box2:r,distance:i.minY-r.minY,points:[{x:t,y:i.minY},{x:t,y:r.minY},{x:t,y:r.minY}]}),i.maxY>r.maxY?l.push({box1:i,box2:r,distance:i.maxY-r.maxY,points:[{x:t,y:r.maxY},{x:t,y:i.maxY},{x:t,y:r.maxY}]}):l.push({box1:i,box2:r,distance:r.maxY-i.maxY,points:[{x:t,y:i.maxY},{x:t,y:r.maxY},{x:t,y:r.maxY}]})}}JSON.stringify(ae)!==JSON.stringify(l)&&se(l)},[e,n]);t.useEffect(()=>{e.distanceGuidesVisible?ke():ae&&se(null)},[e.distanceGuidesVisible,ke,e.selectedShapes.map(e=>`${e.x},${e.y},${e.width},${e.height},${e.rotation}`).join("|")]);const Se=t.useRef(!1);t.useEffect(()=>{var e;let t;const n=null===(e=ie.current)||void 0===e?void 0:e.closest(".polotno-workspace-inner"),i=()=>{Se.current=!0,clearTimeout(t),t=setTimeout(()=>{Se.current=!1},300)};return null==n||n.addEventListener("scroll",i),()=>{clearTimeout(t),null==n||n.removeEventListener("scroll",i)}},[]),t.useEffect(()=>{const e=ne.current;if(!e){return}const t=e.container(),n=e=>{var t,n;e.touches.length>=2&&((null===(t=q.current)||void 0===t?void 0:t.isDragging())&&q.current.stopDrag(),null===(n=q.current)||void 0===n||n.nodes().forEach(e=>{e.isDragging()&&e.stopDrag()}))};return t.addEventListener("touchstart",n,{passive:!0}),t.addEventListener("touchmove",n,{passive:!0}),()=>{t.removeEventListener("touchstart",n),t.removeEventListener("touchmove",n)}},[]);const Ae=t=>{if(e.activePage!==n&&n.select(),Se.current){return}if(we.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"),a=t.target.findAncestor(".page-container",!0);if(!(i||o||l||r||a||Ee.visible)){return e.selectElements([]),void e.selectPages([])}const s=t.target.findAncestor(".element-container",!0),c=(null==s?void 0:s.findOne(".element"))||t.target.findAncestor(".element",!0),d=e.getElementById(null==c?void 0:c.id()),m=null==d?void 0:d.top,u=null==m?void 0:m.id,h=e.selectedElementsIds.indexOf(u)>=0,g=t.target.findAncestor(".page-container",!0);u&&i&&!h?(e.selectElements(e.selectedElementsIds.concat([u])),e.selectPages([])):u&&i&&h?e.selectElements(e.selectedElementsIds.filter(e=>e!==u)):!u||i||h?u&&!i&&h||(g?(i||e.selectElements([]),e.selectPages([n.id])):e.selectPages([])):(e.selectElements([u]),e.selectPages([]))};X(q,e);const Me=e.activePage===n,Oe=e._selectedPagesIds.includes(n.id),Pe=null==f?void 0:f.PageControls,je=null==f?void 0:f.Tooltip,Re=null==f?void 0:f.ContextMenu,Ie=1/e.scale,De=0/e.scale;return t.createElement("div",{ref:ie,onDragOver:e=>e.preventDefault(),onDrop:t=>{if(t.preventDefault(),!ne.current){return}ne.current.setPointersPositions(t);const i=ne.current.findOne(".elements-container"),o=null==i?void 0:i.getRelativePointerPosition(),r=ne.current.getPointerPosition(),l=ne.current.getAllIntersections(r).map(e=>e.findAncestor(".element",!0)).filter(Boolean),a=[...new Set(l.reverse())].map(t=>e.getElementById(t.id())).filter(e=>!!e),s=a[0];$&&o&&($(o,s,{elements:a,page:n}),$=null)},style:{position:"relative",width:r+"px",height:a+"px",overflow:"hidden",flexShrink:0},className:"polotno-page-container"+(Me?" active-page":"")},t.createElement(u,{ref:ne,width:Math.min(r,Y.width+200),height:Math.min(Y.height+200,a),onClick:Ae,onTap:Ae,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([]),he.open({x:t.evt.clientX,y:t.evt.clientY})},onMouseDown:Ye,onMouseMove:t=>{if(!e.distanceGuidesVisible&&!t.evt.altKey){return void(ae&&se(null))}const n=t.target.findAncestor(".element",!0),i=null==n?void 0:n.id();ke(i)},onDragStart:t=>{var n;const i=t.target.getStage();if(i&&i.getPointersPositions().length>=2){return void t.target.stopDrag()}const o=t.target.findAncestor(".element",!0);if(o){const i=e.getElementById(null==o?void 0:o.id()),r=null==i?void 0:i.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=q.current)||void 0===n||n.startDrag(t))}ae&&se(null)},pageId:n.id,style:{position:"absolute",overflow:"hidden",top:0,left:0}},t.createElement(c,null,t.createElement(z,{width:r,height:a,fill:T.workspaceBackgroundColor}),t.createElement(l,{x:J,y:Q,scaleX:e.scale,scaleY:e.scale,name:"page-container"},t.createElement(l,{name:"page-container-2"},t.createElement(l,{name:"page-background-group",x:L,y:L},t.createElement(_,{x:-n.bleed,y:-n.bleed,width:n.computedWidth+2*n.bleed,height:n.computedHeight+2*n.bleed,background:n.background,transparencyBackgroundColor:T.transparencyBackgroundColor,name:"page-background",preventDefault:!1,scale:e.scale})),t.createElement(l,{x:L,y:L,name:"elements-container",listening:!e.isPlaying},t.createElement(m,{name:"elements-area",width:n.computedWidth,height:n.computedHeight,listening:!1}),t.createElement(K,{elements:n.children,store:e})),t.createElement(m,{stroke:T.bleedColor,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}),S()===ee&&t.createElement(te,{name:"hit-detection",x:-Ie/2-De,y:-Ie/2-De,width:Z+Ie+2*De,height:V+Ie+2*De}))),t.createElement(d,{name:"workspace-background",points:[0,0,r,0,r,a,0,a,0,0,J,Q,J,a-Q,r-J,a-Q,r-J,Q,J,Q],listening:!1,closed:!0,fill:T.workspaceBackgroundColor}),t.createElement(l,{x:J,y:Q,scaleX:e.scale,scaleY:e.scale},t.createElement(m,{name:"page-highlight",hideInExport:!0,x:-Ie/2-De,y:-Ie/2-De,width:Z+Ie+2*De,height:V+Ie+2*De,stroke:Oe?T.activePageBorderColor:T.pageBorderColor,strokeWidth:2,listening:!1,strokeScaleEnabled:!1})),t.createElement(l,{x:J+L*e.scale,y:Q+L*e.scale,scaleX:e.scale,scaleY:e.scale,name:"page-abs-container"},t.createElement(x,{ref:q,rotateAnchorAngle:me,onDragStart:t=>{var i;const o=t.target.getStage();o&&o.getPointersPositions().length>=2?t.target.stopDrag():((null===(i=t.evt)||void 0===i?void 0:i.altKey)&&y&&e.selectedElements.forEach(e=>{const t=e.clone({},{skipSelect:!0}),i=n.children.indexOf(e);n.setElementZIndex(t.id,i)}),le.current=!0,e.history.startTransaction())},onDragEnd:()=>{le.current&&(e.history.endTransaction(),le.current=!1),ye()},onTransformStart:()=>{e.history.startTransaction(),se(null)},boundBoxFunc:(t,n)=>{var i;const o=Math.abs(n.width)<1||Math.abs(n.height)<1,r=Math.abs(t.width)<1||Math.abs(t.height)<1;if(o&&!r){return t}const l=e.selectedElements;if(1===l.length&&"table"===(null===(i=l[0])||void 0===i?void 0:i.type)){const e=l[0],i=Math.abs(t.width),o=Math.abs(t.height);if(i>0&&o>0){const r=Math.abs(n.width)/i,l=Math.abs(n.height)/o,a=e.width*r,s=e.height*l,c=Object.assign({},n);return a<e.minWidth&&(c.width=t.width,c.x=t.x),s<e.minHeight&&(c.height=t.height,c.y=t.y),c}}return n},onTransform:e=>{const t=q.current.nodes(),n=t[t.length-1];e.target===n&&setTimeout(()=>{ve()},0)},onTransformEnd:t=>{de({}),e.history.endTransaction(),ye()},visible:!e.isPlaying}),ae&&ae.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:T.distanceGuideStyle.stroke,strokeWidth:1,strokeScaleEnabled:!1})),t.createElement(m,Object.assign({},r,{stroke:T.distanceGuideStyle.stroke,strokeWidth:1,strokeScaleEnabled:!1})),t.createElement(d,{points:[n[0].x,n[0].y,n[1].x,n[1].y],stroke:T.distanceGuideStyle.stroke,strokeWidth:1,strokeScaleEnabled:!1}),t.createElement(d,{points:[n[1].x,n[1].y,n[2].x,n[2].y],stroke:T.distanceGuideStyle.stroke,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(h,{cornerRadius:5,fill:T.distanceGuideStyle.labelFill,pointerDirection:"down"}),t.createElement(g,{align:"center",verticalAlign:"middle",fill:T.distanceGuideStyle.labelTextFill,padding:5,text:R({unit:e.unit,dpi:e.dpi,px:i})})))),n._rendering&&t.createElement(l,null,t.createElement(m,{width:Z,height:V,fill:"rgba(255,255,255,0.9)"}),t.createElement(g,{text:"Rendering...",fontSize:60,width:Z,height:V,align:"center",verticalAlign:"middle"})),je&&t.createElement(je,{components:f,store:e,page:n,stageRef:ne,tooltipSafeArea:j}),Re&&t.createElement(B,null,t.createElement(Re,Object.assign({components:f,store:e},he.props)))),t.createElement(E,{store:e,page:n,width:r,height:a,scale:e.scale,xPadding:J,yPadding:Q,bleed:L}),t.createElement(N,Object.assign({},ce,{store:e})),t.createElement(H,{selection:Ee}),A()>0&&t.createElement(l,{hideInExport:!0},t.createElement(re,{name:"cache-bounds",x:r-(1===A()?250:210),y:a-(1===A()?95:45)}),t.createElement(re,{name:"cache-bounds-t",x:10,y:10})),M()&&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","_blank","noopener")},onTap:()=>{window.open("https://polotno.com","_blank","noopener")}}),t.createElement(l,{name:"line-guides"}))),oe&&Pe&&t.createElement(Pe,{store:e,page:n,xPadding:J,yPadding:Q,layout:k}))});
package/canvas/table-element.js CHANGED
@@ -1 +1 @@
1
- import t from"react";import{observer as e}from"mobx-react-lite";import{autorun as o}from"mobx";import{Group as n,Rect as i,Line as r}from"react-konva";import{Html as s}from"react-konva-utils";import{isTouchDevice as l}from"../utils/screen.js";import{TextElement as a}from"./text-element.js";export const TableElement=e(({element:e,store:c})=>{const d=t.useRef(null),h=t.useRef(null),g=e.selectable||"admin"===c.role,u=l(),y=e.isSelected,f=e._focusedCellIds.length>0,w=e.editingCell;t.useEffect(()=>{y||e.clearCellFocus()},[y]);const p=null==w?void 0:w._editModeEnabled;t.useEffect(()=>{e._editingCellId&&w&&!w._editModeEnabled&&e.exitCellEdit()},[p]),t.useEffect(()=>{f&&!e._editingCellId&&setTimeout(()=>{var t;return null===(t=h.current)||void 0===t?void 0:t.focus()},0)},[f,e._editingCellId]),t.useEffect(()=>o(()=>{e._fitRowsToContent&&c.history.ignore(()=>{e._applyFitRowsToContent()})}),[e,c]);const m=t=>{const o=t.target.getStage();if(!o){return}const n=o.getPointerPosition();if(!n){return}const i=d.current;if(!i){return}const r=i.getAbsoluteTransform().copy().invert().point(n);for(const s of e.visibleCells){const t=e.getCellRect(s.row,s.col,s.rowSpan,s.colSpan);if(r.x>=t.x&&r.x<=t.x+t.width&&r.y>=t.y&&r.y<=t.y+t.height){return s}}},x=(t,e)=>"dashed"===t?[4*e,2*e]:"dotted"===t?[e,e]:void 0,b=[];for(const o of e.visibleCells){const n=e.getCellRect(o.row,o.col,o.rowSpan,o.colSpan);if(0===o.row){const e=o.getEffectiveBorder("top");"none"!==e.style&&e.width>0&&b.push(t.createElement(r,{key:`bt-${o.id}`,points:[n.x,n.y+e.width/2,n.x+n.width,n.y+e.width/2],stroke:e.color,strokeWidth:e.width,dash:x(e.style,e.width),listening:!1}))}if(0===o.col){const e=o.getEffectiveBorder("left");"none"!==e.style&&e.width>0&&b.push(t.createElement(r,{key:`bl-${o.id}`,points:[n.x+e.width/2,n.y,n.x+e.width/2,n.y+n.height],stroke:e.color,strokeWidth:e.width,dash:x(e.style,e.width),listening:!1}))}{const e=o.getEffectiveBorder("bottom");"none"!==e.style&&e.width>0&&b.push(t.createElement(r,{key:`bb-${o.id}`,points:[n.x,n.y+n.height-e.width/2,n.x+n.width,n.y+n.height-e.width/2],stroke:e.color,strokeWidth:e.width,dash:x(e.style,e.width),listening:!1}))}{const e=o.getEffectiveBorder("right");"none"!==e.style&&e.width>0&&b.push(t.createElement(r,{key:`br-${o.id}`,points:[n.x+n.width-e.width/2,n.y,n.x+n.width-e.width/2,n.y+n.height],stroke:e.color,strokeWidth:e.width,dash:x(e.style,e.width),listening:!1}))}}return t.createElement(t.Fragment,null,t.createElement(i,{id:e.id,name:"element",x:e.a.x,y:e.a.y,rotation:e.a.rotation,width:e.a.width,height:e.a.height,fill:"transparent",opacity:e.a.opacity,hideInExport:!e.showInExport,listening:g,draggable:u?e.draggable&&y:e.draggable,onClick:t=>{if(!y){return}if(e.locked||!e.contentEditable){return}const o=m(t);o&&(t.evt.shiftKey&&f?(t.cancelBubble=!0,e.focusCellRange(o.row,o.col)):e.focusCell(o.id))},onDblClick:t=>{if(!y){return}if(e.locked||!e.contentEditable){return}const o=m(t);o&&e.enterCellEdit(o.id)},onDragMove:t=>{var o;const n=t.target;e.set({x:n.x(),y:n.y()}),null===(o=d.current)||void 0===o||o.position({x:n.x(),y:n.y()})},onDragEnd:t=>{const o=t.target;e.set({x:o.x(),y:o.y()})},onTransformStart:()=>{e._setIsTransforming(!0)},onTransformEnd:()=>{e._setIsTransforming(!1),e._resetBaseRowHeights()},onTransform:t=>{var o,n;const i=t.target,r=i.scaleX(),s=i.scaleY();i.scaleX(1),i.scaleY(1);const l=e.width*r,a=e.height*s;i.width(l),i.height(a);const c=i.x(),h=i.y(),g=i.rotation();null===(o=d.current)||void 0===o||o.position({x:c,y:h}),null===(n=d.current)||void 0===n||n.rotation(g),e.set({width:l,height:a,x:c,y:h,rotation:g})}}),t.createElement(n,{ref:d,x:e.a.x,y:e.a.y,rotation:e.a.rotation,opacity:e.a.opacity,hideInExport:!e.showInExport,scaleX:e.a.width/e.width,scaleY:e.a.height/e.height},e.visibleCells.map(o=>{const n=e.getCellRect(o.row,o.col,o.rowSpan,o.colSpan);return"transparent"===o.cellBackground?null:t.createElement(i,{key:`bg-${o.id}`,x:n.x,y:n.y,width:n.width,height:n.height,fill:o.cellBackground,listening:!1})}),b,e.visibleCells.map(e=>t.createElement(a,{key:`text-${e.id}`,element:e,store:c})),e._focusedCellIds.map(o=>{const n=e.cells.find(t=>t.id===o);if(!n){return null}const r=e.getCellRect(n.row,n.col,n.rowSpan,n.colSpan);return t.createElement(i,{key:`focus-${o}`,x:r.x,y:r.y,width:r.width,height:r.height,fill:"rgba(13, 131, 221, 0.1)",stroke:"#0d83dd",strokeWidth:2,listening:!1})}),f&&!w&&t.createElement(s,null,t.createElement("input",{ref:h,style:{position:"absolute",opacity:0,width:"1px",height:"1px",pointerEvents:"none"},readOnly:!0})),y&&!w&&!c.isPlaying&&(()=>{const o=[];let n=0;for(let i=0;i<e.cols-1;i++){n+=e.colWidths[i]*e.a.width;const s=n,l=i;o.push(t.createElement(r,{key:`col-resize-${i}`,x:s,points:[0,0,0,e.a.height],stroke:"transparent",strokeWidth:1,hitStrokeWidth:16,draggable:!0,onMouseEnter:t=>{var e;const o=null===(e=t.target.getStage())||void 0===e?void 0:e.container();o&&(o.style.cursor="col-resize")},onMouseLeave:t=>{var e;const o=null===(e=t.target.getStage())||void 0===e?void 0:e.container();o&&(o.style.cursor="")},onDragStart:t=>{t.cancelBubble=!0,c.history.startTransaction()},onDragMove:t=>{t.cancelBubble=!0;const o=t.target,n=(o.x()-s)/e.width;o.x(s),e.resizeColumn(l,n)},onDragEnd:t=>{t.cancelBubble=!0,t.target.x(s),c.history.endTransaction()}}))}return o})(),y&&!w&&!c.isPlaying&&(()=>{const o=[];let n=0;for(let i=0;i<e.rows-1;i++){n+=e.rowHeights[i]*e.a.height;const s=n,l=i;o.push(t.createElement(r,{key:`row-resize-${i}`,y:s,points:[0,0,e.a.width,0],stroke:"transparent",strokeWidth:1,hitStrokeWidth:16,draggable:!0,onMouseEnter:t=>{var e;const o=null===(e=t.target.getStage())||void 0===e?void 0:e.container();o&&(o.style.cursor="row-resize")},onMouseLeave:t=>{var e;const o=null===(e=t.target.getStage())||void 0===e?void 0:e.container();o&&(o.style.cursor="")},onDragStart:t=>{t.cancelBubble=!0,e._setIsResizingRows(!0),c.history.startTransaction()},onDragMove:t=>{t.cancelBubble=!0;const o=t.target,n=(o.y()-s)/e.height;o.y(s),e.resizeRow(l,n)},onDragEnd:t=>{t.cancelBubble=!0,t.target.y(s),e._setIsResizingRows(!1),e._resetBaseRowHeights(),c.history.endTransaction()}}))}return o})()))});
1
+ import t from"react";import{observer as e}from"mobx-react-lite";import{autorun as o,observable as n,runInAction as i}from"mobx";import{Group as r,Rect as l,Line as s}from"react-konva";import{Html as a}from"react-konva-utils";import{isTouchDevice as c}from"../utils/screen.js";import{TextElement as d}from"./text-element.js";export const TableElement=e(({element:e,store:h})=>{const g=t.useRef(null),u=t.useRef(null),y=e.selectable||"admin"===h.role,f=c(),w=e.isSelected,p=e._focusedCellIds.length>0,m=e.editingCell;t.useEffect(()=>{w||e.clearCellFocus()},[w]);const x=null==m?void 0:m._editModeEnabled;t.useEffect(()=>{e._editingCellId&&m&&!m._editModeEnabled&&e.exitCellEdit()},[x]),t.useEffect(()=>{p&&!e._editingCellId&&setTimeout(()=>{var t;return null===(t=u.current)||void 0===t?void 0:t.focus()},0)},[p,e._editingCellId]);const b=t.useMemo(()=>n.box(!1),[]);t.useEffect(()=>o(()=>{b.get()||e._fitRowsToContent&&h.history.ignore(()=>{e._applyFitRowsToContent()})}),[e,h,b]);const E=t=>{const o=t.target.getStage();if(!o){return}const n=o.getPointerPosition();if(!n){return}const i=g.current;if(!i){return}const r=i.getAbsoluteTransform().copy().invert().point(n);for(const l of e.visibleCells){const t=e.getCellRect(l.row,l.col,l.rowSpan,l.colSpan);if(r.x>=t.x&&r.x<=t.x+t.width&&r.y>=t.y&&r.y<=t.y+t.height){return l}}},v=(t,e)=>"dashed"===t?[4*e,2*e]:"dotted"===t?[e,e]:void 0,k=[];for(const o of e.visibleCells){const n=e.getCellRect(o.row,o.col,o.rowSpan,o.colSpan);if(0===o.row){const e=o.getEffectiveBorder("top");"none"!==e.style&&e.width>0&&k.push(t.createElement(s,{key:`bt-${o.id}`,points:[n.x,n.y+e.width/2,n.x+n.width,n.y+e.width/2],stroke:e.color,strokeWidth:e.width,dash:v(e.style,e.width),listening:!1}))}if(0===o.col){const e=o.getEffectiveBorder("left");"none"!==e.style&&e.width>0&&k.push(t.createElement(s,{key:`bl-${o.id}`,points:[n.x+e.width/2,n.y,n.x+e.width/2,n.y+n.height],stroke:e.color,strokeWidth:e.width,dash:v(e.style,e.width),listening:!1}))}{const e=o.getEffectiveBorder("bottom");"none"!==e.style&&e.width>0&&k.push(t.createElement(s,{key:`bb-${o.id}`,points:[n.x,n.y+n.height-e.width/2,n.x+n.width,n.y+n.height-e.width/2],stroke:e.color,strokeWidth:e.width,dash:v(e.style,e.width),listening:!1}))}{const e=o.getEffectiveBorder("right");"none"!==e.style&&e.width>0&&k.push(t.createElement(s,{key:`br-${o.id}`,points:[n.x+n.width-e.width/2,n.y,n.x+n.width-e.width/2,n.y+n.height],stroke:e.color,strokeWidth:e.width,dash:v(e.style,e.width),listening:!1}))}}return t.createElement(t.Fragment,null,t.createElement(l,{id:e.id,name:"element",x:e.a.x,y:e.a.y,rotation:e.a.rotation,width:e.a.width,height:e.a.height,fill:"transparent",opacity:e.a.opacity,hideInExport:!e.showInExport,listening:y,draggable:f?e.draggable&&w:e.draggable,onClick:t=>{if(!w){return}if(e.locked||!e.contentEditable){return}const o=E(t);o&&(t.evt.shiftKey&&p?(t.cancelBubble=!0,e.focusCellRange(o.row,o.col)):e.focusCell(o.id))},onDblClick:t=>{if(!w){return}if(e.locked||!e.contentEditable){return}const o=E(t);o&&e.enterCellEdit(o.id)},onDragMove:t=>{var o;const n=t.target;e.set({x:n.x(),y:n.y()}),null===(o=g.current)||void 0===o||o.position({x:n.x(),y:n.y()})},onDragEnd:t=>{const o=t.target;e.set({x:o.x(),y:o.y()})},onTransformStart:()=>{i(()=>b.set(!0))},onTransformEnd:()=>{e._resetBaseRowHeights(),i(()=>b.set(!1))},onTransform:t=>{var o,n;const i=t.target,r=i.scaleX(),l=i.scaleY();i.scaleX(1),i.scaleY(1);const s=e.width*r,a=e.height*l;i.width(s),i.height(a);const c=i.x(),d=i.y(),h=i.rotation();null===(o=g.current)||void 0===o||o.position({x:c,y:d}),null===(n=g.current)||void 0===n||n.rotation(h),e.set({width:s,x:c,y:d,rotation:h}),e.setHeightRedistribute(a)}}),t.createElement(r,{ref:g,x:e.a.x,y:e.a.y,rotation:e.a.rotation,opacity:e.a.opacity,hideInExport:!e.showInExport,scaleX:e.a.width/e.width,scaleY:e.a.height/e.height},e.visibleCells.map(o=>{const n=e.getCellRect(o.row,o.col,o.rowSpan,o.colSpan);return"transparent"===o.cellBackground?null:t.createElement(l,{key:`bg-${o.id}`,x:n.x,y:n.y,width:n.width,height:n.height,fill:o.cellBackground,listening:!1})}),k,e.visibleCells.map(e=>t.createElement(d,{key:`text-${e.id}`,element:e,store:h})),e._focusedCellIds.map(o=>{const n=e.cells.find(t=>t.id===o);if(!n){return null}const i=e.getCellRect(n.row,n.col,n.rowSpan,n.colSpan);return t.createElement(l,{key:`focus-${o}`,x:i.x,y:i.y,width:i.width,height:i.height,fill:"rgba(13, 131, 221, 0.1)",stroke:"#0d83dd",strokeWidth:2,listening:!1})}),p&&!m&&t.createElement(a,null,t.createElement("input",{ref:u,style:{position:"absolute",opacity:0,width:"1px",height:"1px",pointerEvents:"none"},readOnly:!0})),w&&!m&&!h.isPlaying&&(()=>{const o=[];let n=0;for(let i=0;i<e.cols-1;i++){n+=e.colWidths[i]*e.a.width;const r=n,l=i;o.push(t.createElement(s,{key:`col-resize-${i}`,x:r,points:[0,0,0,e.a.height],stroke:"transparent",strokeWidth:1,hitStrokeWidth:16,draggable:!0,onMouseEnter:t=>{var e;const o=null===(e=t.target.getStage())||void 0===e?void 0:e.container();o&&(o.style.cursor="col-resize")},onMouseLeave:t=>{var e;const o=null===(e=t.target.getStage())||void 0===e?void 0:e.container();o&&(o.style.cursor="")},onDragStart:t=>{t.cancelBubble=!0,h.history.startTransaction()},onDragMove:t=>{t.cancelBubble=!0;const o=t.target,n=(o.x()-r)/e.width;o.x(r),e.resizeColumn(l,n)},onDragEnd:t=>{t.cancelBubble=!0,t.target.x(r),h.history.endTransaction()}}))}return o})(),w&&!m&&!h.isPlaying&&(()=>{const o=[];let n=0;for(let r=0;r<e.rows-1;r++){n+=e.rowHeights[r]*e.a.height;const l=n,a=r;o.push(t.createElement(s,{key:`row-resize-${r}`,y:l,points:[0,0,e.a.width,0],stroke:"transparent",strokeWidth:1,hitStrokeWidth:16,draggable:!0,onMouseEnter:t=>{var e;const o=null===(e=t.target.getStage())||void 0===e?void 0:e.container();o&&(o.style.cursor="row-resize")},onMouseLeave:t=>{var e;const o=null===(e=t.target.getStage())||void 0===e?void 0:e.container();o&&(o.style.cursor="")},onDragStart:t=>{t.cancelBubble=!0,i(()=>b.set(!0)),h.history.startTransaction()},onDragMove:t=>{t.cancelBubble=!0;const o=t.target,n=(o.y()-l)/e.height;o.y(l),e.resizeRow(a,n)},onDragEnd:t=>{t.cancelBubble=!0,t.target.y(l),e._resetBaseRowHeights(),i(()=>b.set(!1)),h.history.endTransaction()}}))}return o})()))});
package/model/group-model.d.ts CHANGED
@@ -1544,8 +1544,6 @@ export declare const TYPES_MAP: {
1544
1544
  _cellContentHeights: import("mobx").ObservableMap<string, number>;
1545
1545
  _baseRowHeights: number[] | null;
1546
1546
  _baseHeight: number | null;
1547
- _isResizingRows: boolean;
1548
- _isTransforming: boolean;
1549
1547
  } & {
1550
1548
  afterCreate(): void;
1551
1549
  } & {
@@ -1554,6 +1552,7 @@ export declare const TYPES_MAP: {
1554
1552
  } & {
1555
1553
  getCell(row: number, col: number): import("./table-model.js").TableCellType | undefined;
1556
1554
  readonly minWidth: number;
1555
+ getRowContentOuterHeight(row: number): number;
1557
1556
  readonly minHeight: number;
1558
1557
  readonly actualHeight: number;
1559
1558
  getCellRect(row: number, col: number, rowSpan?: number, colSpan?: number): {
@@ -1578,8 +1577,7 @@ export declare const TYPES_MAP: {
1578
1577
  enterCellEdit(cellId: string): void;
1579
1578
  exitCellEdit(): void;
1580
1579
  _resetBaseRowHeights(): void;
1581
- _setIsResizingRows(value: boolean): void;
1582
- _setIsTransforming(value: boolean): void;
1580
+ setHeightRedistribute(newHeight: number): void;
1583
1581
  addRow(index: number): void;
1584
1582
  removeRow(index: number): void;
1585
1583
  addColumn(index: number): void;
package/model/table-model.d.ts CHANGED
@@ -419,8 +419,6 @@ export declare const TableElement: import("mobx-state-tree").IModelType<{
419
419
  _cellContentHeights: import("mobx").ObservableMap<string, number>;
420
420
  _baseRowHeights: number[] | null;
421
421
  _baseHeight: number | null;
422
- _isResizingRows: boolean;
423
- _isTransforming: boolean;
424
422
  } & {
425
423
  afterCreate(): void;
426
424
  } & {
@@ -429,6 +427,7 @@ export declare const TableElement: import("mobx-state-tree").IModelType<{
429
427
  } & {
430
428
  getCell(row: number, col: number): TableCellType | undefined;
431
429
  readonly minWidth: number;
430
+ getRowContentOuterHeight(row: number): number;
432
431
  readonly minHeight: number;
433
432
  readonly actualHeight: number;
434
433
  getCellRect(row: number, col: number, rowSpan?: number, colSpan?: number): {
@@ -453,8 +452,7 @@ export declare const TableElement: import("mobx-state-tree").IModelType<{
453
452
  enterCellEdit(cellId: string): void;
454
453
  exitCellEdit(): void;
455
454
  _resetBaseRowHeights(): void;
456
- _setIsResizingRows(value: boolean): void;
457
- _setIsTransforming(value: boolean): void;
455
+ setHeightRedistribute(newHeight: number): void;
458
456
  addRow(index: number): void;
459
457
  removeRow(index: number): void;
460
458
  addColumn(index: number): void;
package/model/table-model.js CHANGED
@@ -1 +1 @@
1
- import{types as e,getParent as t,getSnapshot as o,isAlive as l,getRoot as r,cast as n}from"mobx-state-tree";import{observable as s}from"mobx";import{nanoid as i}from"nanoid";import{Shape as d}from"./shape-model.js";const c=.05,a=e.enumeration(["solid","dashed","dotted","none"]);function g(e){return t(e,2)}function u(e,t,o){const r=e[`_${t}`];return null!=r?r:l(e)?g(e)[t]:o}function h(e){return t(e,1)}const f=e.model("BorderSide",{color:e.maybe(e.string),width:e.maybe(e.number),style:e.maybe(a)}).postProcessSnapshot(e=>{const t={};for(const[o,l]of Object.entries(e)){null!=l&&(t[o]=l)}return t}),b=e.model("CellBorders",{top:e.maybe(f),right:e.maybe(f),bottom:e.maybe(f),left:e.maybe(f)}).postProcessSnapshot(e=>{const t={};for(const[o,l]of Object.entries(e)){null!=l&&"object"==typeof l&&Object.keys(l).length>0&&(t[o]=l)}return t}),w=["fontSize","fontFamily","fontWeight","fontStyle","textDecoration","textTransform","fill","align","verticalAlign","lineHeight","letterSpacing","strokeWidth","stroke","cellBackground","cellPadding"],p=new Set(w),m=["blurEnabled","blurRadius","brightnessEnabled","brightness","sepiaEnabled","grayscaleEnabled","filters","shadowEnabled","shadowBlur","shadowOffsetX","shadowOffsetY","shadowColor","shadowOpacity"],_=["id","type","text","opacity","rowSpan","colSpan","mergedInto","name","custom","borders"],y=new Set(["row","col","x","y","width","height","rotation","draggable","resizable","selectable","removable","contentEditable","visible","showInExport","alwaysOnTop","backgroundEnabled","backgroundOpacity","backgroundColor","backgroundCornerRadius","backgroundPadding","curveEnabled","curvePower","shadowEnabled","shadowBlur","shadowOffsetX","shadowOffsetY","shadowColor","shadowOpacity","blurEnabled","blurRadius","brightnessEnabled","brightness","sepiaEnabled","grayscaleEnabled","placeholder","animations","filters"]),C={opacity:1,rowSpan:1,colSpan:1,name:""},v=[];export const TableCell=e.model("TableCell",{id:e.identifier,type:e.optional(e.literal("tablecell"),"tablecell"),text:"",_fontSize:e.maybe(e.number),_fontFamily:e.maybe(e.string),_fontWeight:e.maybe(e.string),_fontStyle:e.maybe(e.string),_textDecoration:e.maybe(e.string),_textTransform:e.maybe(e.string),_fill:e.maybe(e.string),_align:e.maybe(e.string),_verticalAlign:e.maybe(e.string),_lineHeight:e.maybe(e.union(e.number,e.string)),_letterSpacing:e.maybe(e.number),_strokeWidth:e.maybe(e.number),_stroke:e.maybe(e.string),_cellBackground:e.maybe(e.string),_cellPadding:e.maybe(e.number),opacity:1,rowSpan:1,colSpan:1,mergedInto:e.maybe(e.string),borders:e.maybe(b),name:"",custom:e.frozen()}).volatile(()=>({_editModeEnabled:!1,filters:s.map()})).preProcessSnapshot(e=>{if(!e){return e}for(const o in e){null===e[o]&&(e[o]=void 0)}const t={};for(const o of _){o in e&&(t[o]=e[o])}for(const o of w){void 0!==e[o]&&(t[`_${o}`]=e[o])}return t}).postProcessSnapshot(e=>{const t={};for(const[o,l]of Object.entries(e)){if(o.startsWith("_")){null!=l&&(t[o.slice(1)]=l)}else if("borders"===o){null!=l&&"object"==typeof l&&Object.keys(l).length>0&&(t.borders=l)}else{if(o in C&&l===C[o]){continue}t[o]=l}}return t}).views(e=>{const t={get row(){if(!l(e)){return 0}const t=g(e),o=h(e).indexOf(e);return-1===o?0:Math.floor(o/t.cols)},get col(){if(!l(e)){return 0}const t=g(e),o=h(e).indexOf(e);return-1===o?0:o%t.cols},get store(){return l(e)?r(e):null},get page(){if(!l(e)){return null}try{return g(e).page}catch(t){return null}},get fontSize(){return u(e,"fontSize",30)},get fontFamily(){return u(e,"fontFamily","Roboto")},get fontWeight(){return u(e,"fontWeight","normal")},get fontStyle(){return u(e,"fontStyle","normal")},get textDecoration(){return u(e,"textDecoration","")},get textTransform(){return u(e,"textTransform","none")},get fill(){return u(e,"fill","black")},get align(){return u(e,"align","left")},get verticalAlign(){return u(e,"verticalAlign","top")},get lineHeight(){return u(e,"lineHeight",1.2)},get letterSpacing(){return u(e,"letterSpacing",0)},get strokeWidth(){return u(e,"strokeWidth",0)},get stroke(){return u(e,"stroke","black")},get cellBackground(){return u(e,"cellBackground","transparent")},get cellPadding(){return u(e,"cellPadding",4)},get width(){if(!l(e)){return 100}try{return g(e).getCellRect(t.row,t.col,e.rowSpan,e.colSpan).width}catch(o){return 100}},get height(){if(!l(e)){return 100}try{return g(e).getCellRect(t.row,t.col,e.rowSpan,e.colSpan).height}catch(o){return 100}},get a(){var o;if(!l(e)){return{x:0,y:0,width:100,height:100,rotation:0,opacity:1,fontSize:16}}const r=g(e).getCellRect(t.row,t.col,e.rowSpan,e.colSpan),n=t.cellPadding;return{x:r.x+n,y:r.y+n,width:r.width-2*n,height:r.height-2*n,rotation:0,opacity:null!==(o=e.opacity)&&void 0!==o?o:1,fontSize:t.fontSize}},getEffectiveBorder(t){var o,r,n,s,i,d,c;const a=l(e)?g(e):null,u=null===(o=e.borders)||void 0===o?void 0:o[t];return{color:null!==(n=null!==(r=null==u?void 0:u.color)&&void 0!==r?r:null==a?void 0:a.borderColor)&&void 0!==n?n:"#000000",width:null!==(i=null!==(s=null==u?void 0:u.width)&&void 0!==s?s:null==a?void 0:a.borderWidth)&&void 0!==i?i:1,style:null!==(c=null!==(d=null==u?void 0:u.style)&&void 0!==d?d:null==a?void 0:a.borderStyle)&&void 0!==c?c:"solid"}},get x(){return 0},get y(){return 0},get rotation(){return 0},get draggable(){return!1},get resizable(){return!1},get selectable(){return!1},get removable(){return!1},get contentEditable(){return!0},get visible(){return!0},get showInExport(){return!0},get alwaysOnTop(){return!1},get placeholder(){return""},get backgroundEnabled(){return!1},get backgroundOpacity(){return 1},get backgroundColor(){return"transparent"},get backgroundCornerRadius(){return 0},get backgroundPadding(){return 0},get curveEnabled(){return!1},get curvePower(){return 0},get shadowEnabled(){return!1},get shadowBlur(){return 0},get shadowOffsetX(){return 0},get shadowOffsetY(){return 0},get shadowColor(){return"black"},get shadowOpacity(){return 1},get blurEnabled(){return!1},get blurRadius(){return 0},get brightnessEnabled(){return!1},get brightness(){return 0},get sepiaEnabled(){return!1},get grayscaleEnabled(){return!1},get animations(){return v}};return t}).actions(e=>({toJSON:()=>Object.assign({},o(e)),set(t){null!=t.fontSize&&t.fontSize<1&&(t=Object.assign(Object.assign({},t),{fontSize:1}));const o={};for(const[e,l]of Object.entries(t)){p.has(e)?o[`_${e}`]=l:"borders"===e?o.borders=l?JSON.parse(JSON.stringify(l)):l:y.has(e)||(o[e]=l)}Object.assign(e,o)},setBorder(t,l){const r=e.borders?Object.assign({},o(e.borders)):{},s=r[t]||{},i=Object.assign({},s);void 0!==l.color&&(i.color=l.color),void 0!==l.width&&(i.width=l.width),void 0!==l.style&&(i.style=l.style),r[t]=i,e.borders=n(r)},toggleEditMode(t){const o=null!=t?t:!e._editModeEnabled;o!==e._editModeEnabled&&(e._editModeEnabled=o,e._editModeEnabled?e.store.history.startTransaction():e.store.history.endTransaction())}}));function S(e){return Array.from({length:e},()=>1/e)}function H(e){const t=e.reduce((e,t)=>e+t,0);return 0===t?S(e.length):e.map(e=>e/t)}export const TableElement=d.named("Table").props({type:"table",width:300,height:200,rows:3,cols:3,colWidths:e.array(e.number),rowHeights:e.array(e.number),cells:e.array(TableCell),borderColor:"#000000",borderWidth:1,borderStyle:e.optional(e.enumeration(["solid","dashed","dotted","none"]),"solid"),fontSize:30,fontFamily:"Roboto",fontWeight:"normal",fontStyle:"normal",textDecoration:"",textTransform:"none",fill:"black",align:"left",verticalAlign:"top",lineHeight:e.optional(e.union(e.number,e.string),1.2),letterSpacing:0,strokeWidth:0,stroke:"black",cellBackground:"transparent",cellPadding:4}).postProcessSnapshot(e=>{e.cells&&((e=Object.assign({},e)).cells=e.cells.map(t=>{const o={};for(const[l,r]of Object.entries(t)){p.has(l)&&r===e[l]||(o[l]=r)}return o}));for(const t of m){delete e[t]}return e}).volatile(()=>({_focusedCellIds:[],_editingCellId:void 0,_anchorCellId:void 0,_cellContentHeights:s.map(),_baseRowHeights:null,_baseHeight:null,_isResizingRows:!1,_isTransforming:!1})).actions(e=>({afterCreate(){const t=e.rows*e.cols;if(0===e.cells.length){e.cells.replace(n(function(e,t){const o=[];for(let l=0;l<e*t;l++){o.push({id:i(10),text:""})}return o}(e.rows,e.cols)))}else if(e.cells.length<t){for(;e.cells.length<t;){e.cells.push(n({id:i(10),text:""}))}}else{e.cells.length>t&&e.cells.splice(t)}0===e.colWidths.length&&e.colWidths.replace(S(e.cols)),0===e.rowHeights.length&&e.rowHeights.replace(S(e.rows))}})).views(e=>({get _cellMap(){const t=new Map,o=e.cols;return e.cells.forEach((e,l)=>{t.set(`${Math.floor(l/o)}:${l%o}`,e)}),t},getActualRowHeight:t=>e.rowHeights[t]*e.height})).views(e=>{const t={getCell:(t,o)=>e._cellMap.get(`${t}:${o}`),get minWidth(){return 20*e.cols},get minHeight(){return 20*e.rows},get actualHeight(){let t=0;for(let o=0;o<e.rows;o++){t+=e.getActualRowHeight(o)}return t},getCellRect(t,o,l=1,r=1){let n=0;for(let c=0;c<o;c++){n+=e.colWidths[c]*e.width}let s=0;for(let c=0;c<t;c++){s+=e.getActualRowHeight(c)}let i=0;for(let c=o;c<o+r;c++){i+=(e.colWidths[c]||0)*e.width}let d=0;for(let c=t;c<t+l;c++){d+=e.getActualRowHeight(c)}return{x:n,y:s,width:i,height:d}},get visibleCells(){return e.cells.filter(e=>!e.mergedInto)},get focusedCells(){return e.cells.filter(t=>e._focusedCellIds.includes(t.id))},get editingCell(){if(e._editingCellId){return e.cells.find(t=>t.id===e._editingCellId)}},get _fitRowsToContent(){var o,l;if(e._isResizingRows){return null}if(e._isTransforming){return null}if(0===e._cellContentHeights.size){return null}const r=null!==(o=e._baseHeight)&&void 0!==o?o:e.height,n=null!==(l=e._baseRowHeights)&&void 0!==l?l:[...e.rowHeights];let s=!1;const i=[];for(let c=0;c<e.rows;c++){const o=e.rowHeights[c]*e.height,l=n[c]*r;let d=0;for(let r=0;r<e.cols;r++){const o=t.getCell(c,r);if(!o){continue}const l=e._cellContentHeights.get(o.id);if(void 0!==l){const e=l+2*o.cellPadding;d=Math.max(d,e)}}const a=Math.max(d,l);Math.abs(a-o)>1?(i.push(a),s=!0):i.push(o)}if(!s){return null}const d=i.reduce((e,t)=>e+t,0);return{rowHeights:i.map(e=>e/d),height:d}}};return t}).actions(e=>{const t={setCellContentHeight(t,o){e._cellContentHeights.set(t,o)},_applyFitRowsToContent(){null===e._baseRowHeights&&(e._baseRowHeights=[...e.rowHeights],e._baseHeight=e.height);const t=e._fitRowsToContent;t&&(e.height=t.height,e.rowHeights.replace(t.rowHeights))},focusCell(t,o=!1){o?e._focusedCellIds.includes(t)||(e._focusedCellIds=[...e._focusedCellIds,t]):(e._focusedCellIds=[t],e._anchorCellId=t)},focusCellRange(t,o){const l=e.cells.find(t=>t.id===e._anchorCellId);if(!l){return}const r=Math.min(l.row,t),n=Math.max(l.row,t),s=Math.min(l.col,o),i=Math.max(l.col,o),d=[];for(const c of e.cells){c.row>=r&&c.row<=n&&c.col>=s&&c.col<=i&&d.push(c.id)}e._focusedCellIds=d},clearCellFocus(){if(l(e)){if(e._editingCellId){const t=e.cells.find(t=>t.id===e._editingCellId);t&&t.toggleEditMode(!1)}e._focusedCellIds=[],e._editingCellId=void 0,e._anchorCellId=void 0}},enterCellEdit(t){e._editingCellId=t,e._focusedCellIds.includes(t)||(e._focusedCellIds=[t]);const o=e.cells.find(e=>e.id===t);o&&o.toggleEditMode(!0)},exitCellEdit(){if(e._editingCellId){const t=e.cells.find(t=>t.id===e._editingCellId);t&&t.toggleEditMode(!1)}e._editingCellId=void 0},_resetBaseRowHeights(){e._baseRowHeights=null,e._baseHeight=null},_setIsResizingRows(t){e._isResizingRows=t},_setIsTransforming(t){e._isTransforming=t},addRow(o){t._resetBaseRowHeights();const l=o>0?o-1:0,r=(e.rowHeights[l]||1/(e.rows+1))*e.height,s=e.height+r,d=[];for(let t=0;t<e.rows;t++){d.push(e.rowHeights[t]*e.height/s)}d.splice(o,0,r/s);const c=o*e.cols,a=Array.from({length:e.cols},()=>({id:i(10),text:""}));e.cells.splice(c,0,...n(a)),e.rows+=1,e.height=s,e.rowHeights.replace(H(d))},removeRow(o){if(e.rows<=1){return}t._resetBaseRowHeights();const l=o*e.cols,r=[];for(let t=l;t<l+e.cols;t++){r.push(e.cells[t].id)}if(e._editingCellId&&r.includes(e._editingCellId)){const t=e.cells.find(t=>t.id===e._editingCellId);t&&t.toggleEditMode(!1),e._editingCellId=void 0}e._focusedCellIds=e._focusedCellIds.filter(e=>!r.includes(e)),r.forEach(t=>e._cellContentHeights.delete(t)),e.cells.splice(l,e.cols);const n=[...e.rowHeights];n.splice(o,1),e.rows-=1,e.rowHeights.replace(H(n))},addColumn(t){const o=t>0?t-1:0,l=(e.colWidths[o]||1/(e.cols+1))*e.width,r=e.width+l,s=[];for(let n=0;n<e.cols;n++){s.push(e.colWidths[n]*e.width/r)}s.splice(t,0,l/r);const d=e.cols;for(let c=e.rows-1;c>=0;c--){e.cells.splice(c*d+t,0,n({id:i(10),text:""}))}e.cols+=1,e.width=r,e.colWidths.replace(H(s))},removeColumn(t){if(e.cols<=1){return}const o=e.cols,l=[];for(let n=0;n<e.rows;n++){l.push(e.cells[n*o+t].id)}if(e._editingCellId&&l.includes(e._editingCellId)){const t=e.cells.find(t=>t.id===e._editingCellId);t&&t.toggleEditMode(!1),e._editingCellId=void 0}e._focusedCellIds=e._focusedCellIds.filter(e=>!l.includes(e)),l.forEach(t=>e._cellContentHeights.delete(t));for(let n=e.rows-1;n>=0;n--){e.cells.splice(n*o+t,1)}const r=[...e.colWidths];r.splice(t,1),e.cols-=1,e.colWidths.replace(H(r))},distributeRowsEvenly(){t._resetBaseRowHeights(),e.rowHeights.replace(S(e.rows))},distributeColumnsEvenly(){e.colWidths.replace(S(e.cols))},resizeColumn(t,o){if(t>=e.cols-1){return}const l=[...e.colWidths],r=l[t]+l[t+1],n=l[t]+o,s=l[t+1]-o;n<c?(l[t]=c,l[t+1]=r-c):s<c?(l[t+1]=c,l[t]=r-c):(l[t]=n,l[t+1]=s),e.colWidths.replace(l)},resizeRow(t,o){if(t>=e.rows-1){return}const l=[...e.rowHeights],r=l[t]+l[t+1],n=l[t]+o,s=l[t+1]-o;n<c?(l[t]=c,l[t+1]=r-c):s<c?(l[t+1]=c,l[t]=r-c):(l[t]=n,l[t+1]=s),e.rowHeights.replace(l)},setCellBorders(t,o,l){const r={top:{side:"bottom",dr:-1,dc:0},bottom:{side:"top",dr:1,dc:0},left:{side:"right",dr:0,dc:-1},right:{side:"left",dr:0,dc:1}};for(const n of t){const t=e.cells.find(e=>e.id===n);if(t){for(const n of o){t.setBorder(n,l);const o=r[n],s=t.row+o.dr,i=t.col+o.dc,d=e.getCell(s,i);d&&d.setBorder(o.side,l)}}}}};return t}).actions(e=>({clone(t={},{skipSelect:o=!1}={}){const l=JSON.parse(JSON.stringify(e.toJSON()));if(t.id=t.id||i(10),l.cells){const e=new Map;l.cells.forEach(t=>{const o=t.id,l=i(10);e.set(o,l),t.id=l}),l.cells.forEach(t=>{t.mergedInto&&e.has(t.mergedInto)&&(t.mergedInto=e.get(t.mergedInto))})}return Object.assign(l,t),e.page.addElement(l,{skipSelect:o})}}));
1
+ import{types as e,getParent as t,getSnapshot as o,isAlive as l,getRoot as r,cast as n}from"mobx-state-tree";import{observable as i}from"mobx";import{nanoid as s}from"nanoid";import{Shape as c}from"./shape-model.js";const d=.05,a=e.enumeration(["solid","dashed","dotted","none"]);function g(e){return t(e,2)}function h(e,t,o){const r=e[`_${t}`];return null!=r?r:l(e)?g(e)[t]:o}function u(e){return t(e,1)}const f=e.model("BorderSide",{color:e.maybe(e.string),width:e.maybe(e.number),style:e.maybe(a)}).postProcessSnapshot(e=>{const t={};for(const[o,l]of Object.entries(e)){null!=l&&(t[o]=l)}return t}),b=e.model("CellBorders",{top:e.maybe(f),right:e.maybe(f),bottom:e.maybe(f),left:e.maybe(f)}).postProcessSnapshot(e=>{const t={};for(const[o,l]of Object.entries(e)){null!=l&&"object"==typeof l&&Object.keys(l).length>0&&(t[o]=l)}return t}),w=["fontSize","fontFamily","fontWeight","fontStyle","textDecoration","textTransform","fill","align","verticalAlign","lineHeight","letterSpacing","strokeWidth","stroke","cellBackground","cellPadding"],p=new Set(w),m=["blurEnabled","blurRadius","brightnessEnabled","brightness","sepiaEnabled","grayscaleEnabled","filters","shadowEnabled","shadowBlur","shadowOffsetX","shadowOffsetY","shadowColor","shadowOpacity"],C=["id","type","text","opacity","rowSpan","colSpan","mergedInto","name","custom","borders"],y=new Set(["row","col","x","y","width","height","rotation","draggable","resizable","selectable","removable","contentEditable","visible","showInExport","alwaysOnTop","backgroundEnabled","backgroundOpacity","backgroundColor","backgroundCornerRadius","backgroundPadding","curveEnabled","curvePower","shadowEnabled","shadowBlur","shadowOffsetX","shadowOffsetY","shadowColor","shadowOpacity","blurEnabled","blurRadius","brightnessEnabled","brightness","sepiaEnabled","grayscaleEnabled","placeholder","animations","filters"]),_={opacity:1,rowSpan:1,colSpan:1,name:""},v=[];export const TableCell=e.model("TableCell",{id:e.identifier,type:e.optional(e.literal("tablecell"),"tablecell"),text:"",_fontSize:e.maybe(e.number),_fontFamily:e.maybe(e.string),_fontWeight:e.maybe(e.string),_fontStyle:e.maybe(e.string),_textDecoration:e.maybe(e.string),_textTransform:e.maybe(e.string),_fill:e.maybe(e.string),_align:e.maybe(e.string),_verticalAlign:e.maybe(e.string),_lineHeight:e.maybe(e.union(e.number,e.string)),_letterSpacing:e.maybe(e.number),_strokeWidth:e.maybe(e.number),_stroke:e.maybe(e.string),_cellBackground:e.maybe(e.string),_cellPadding:e.maybe(e.number),opacity:1,rowSpan:1,colSpan:1,mergedInto:e.maybe(e.string),borders:e.maybe(b),name:"",custom:e.frozen()}).volatile(()=>({_editModeEnabled:!1,filters:i.map()})).preProcessSnapshot(e=>{if(!e){return e}for(const o in e){null===e[o]&&(e[o]=void 0)}const t={};for(const o of C){o in e&&(t[o]=e[o])}for(const o of w){void 0!==e[o]&&(t[`_${o}`]=e[o])}return t}).postProcessSnapshot(e=>{const t={};for(const[o,l]of Object.entries(e)){if(o.startsWith("_")){null!=l&&(t[o.slice(1)]=l)}else if("borders"===o){null!=l&&"object"==typeof l&&Object.keys(l).length>0&&(t.borders=l)}else{if(o in _&&l===_[o]){continue}t[o]=l}}return t}).views(e=>{const t={get row(){if(!l(e)){return 0}const t=g(e),o=u(e).indexOf(e);return-1===o?0:Math.floor(o/t.cols)},get col(){if(!l(e)){return 0}const t=g(e),o=u(e).indexOf(e);return-1===o?0:o%t.cols},get store(){return l(e)?r(e):null},get page(){if(!l(e)){return null}try{return g(e).page}catch(t){return null}},get fontSize(){return h(e,"fontSize",30)},get fontFamily(){return h(e,"fontFamily","Roboto")},get fontWeight(){return h(e,"fontWeight","normal")},get fontStyle(){return h(e,"fontStyle","normal")},get textDecoration(){return h(e,"textDecoration","")},get textTransform(){return h(e,"textTransform","none")},get fill(){return h(e,"fill","black")},get align(){return h(e,"align","left")},get verticalAlign(){return h(e,"verticalAlign","top")},get lineHeight(){return h(e,"lineHeight",1.2)},get letterSpacing(){return h(e,"letterSpacing",0)},get strokeWidth(){return h(e,"strokeWidth",0)},get stroke(){return h(e,"stroke","black")},get cellBackground(){return h(e,"cellBackground","transparent")},get cellPadding(){return h(e,"cellPadding",4)},get width(){if(!l(e)){return 100}try{return g(e).getCellRect(t.row,t.col,e.rowSpan,e.colSpan).width}catch(o){return 100}},get height(){if(!l(e)){return 100}try{return g(e).getCellRect(t.row,t.col,e.rowSpan,e.colSpan).height}catch(o){return 100}},get a(){var o;if(!l(e)){return{x:0,y:0,width:100,height:100,rotation:0,opacity:1,fontSize:16}}const r=g(e).getCellRect(t.row,t.col,e.rowSpan,e.colSpan),n=t.cellPadding;return{x:r.x+n,y:r.y+n,width:r.width-2*n,height:r.height-2*n,rotation:0,opacity:null!==(o=e.opacity)&&void 0!==o?o:1,fontSize:t.fontSize}},getEffectiveBorder(t){var o,r,n,i,s,c,d;const a=l(e)?g(e):null,h=null===(o=e.borders)||void 0===o?void 0:o[t];return{color:null!==(n=null!==(r=null==h?void 0:h.color)&&void 0!==r?r:null==a?void 0:a.borderColor)&&void 0!==n?n:"#000000",width:null!==(s=null!==(i=null==h?void 0:h.width)&&void 0!==i?i:null==a?void 0:a.borderWidth)&&void 0!==s?s:1,style:null!==(d=null!==(c=null==h?void 0:h.style)&&void 0!==c?c:null==a?void 0:a.borderStyle)&&void 0!==d?d:"solid"}},get x(){return 0},get y(){return 0},get rotation(){return 0},get draggable(){return!1},get resizable(){return!1},get selectable(){return!1},get removable(){return!1},get contentEditable(){return!0},get visible(){return!0},get showInExport(){return!0},get alwaysOnTop(){return!1},get placeholder(){return""},get backgroundEnabled(){return!1},get backgroundOpacity(){return 1},get backgroundColor(){return"transparent"},get backgroundCornerRadius(){return 0},get backgroundPadding(){return 0},get curveEnabled(){return!1},get curvePower(){return 0},get shadowEnabled(){return!1},get shadowBlur(){return 0},get shadowOffsetX(){return 0},get shadowOffsetY(){return 0},get shadowColor(){return"black"},get shadowOpacity(){return 1},get blurEnabled(){return!1},get blurRadius(){return 0},get brightnessEnabled(){return!1},get brightness(){return 0},get sepiaEnabled(){return!1},get grayscaleEnabled(){return!1},get animations(){return v}};return t}).actions(e=>({toJSON:()=>Object.assign({},o(e)),set(t){null!=t.fontSize&&t.fontSize<1&&(t=Object.assign(Object.assign({},t),{fontSize:1}));const o={};for(const[e,l]of Object.entries(t)){p.has(e)?o[`_${e}`]=l:"borders"===e?o.borders=l?JSON.parse(JSON.stringify(l)):l:y.has(e)||(o[e]=l)}Object.assign(e,o)},setBorder(t,l){const r=e.borders?Object.assign({},o(e.borders)):{},i=r[t]||{},s=Object.assign({},i);void 0!==l.color&&(s.color=l.color),void 0!==l.width&&(s.width=l.width),void 0!==l.style&&(s.style=l.style),r[t]=s,e.borders=n(r)},toggleEditMode(t){const o=null!=t?t:!e._editModeEnabled;o!==e._editModeEnabled&&(e._editModeEnabled=o,e._editModeEnabled?e.store.history.startTransaction():e.store.history.endTransaction())}}));function H(e){return Array.from({length:e},()=>1/e)}function S(e){const t=e.reduce((e,t)=>e+t,0);return 0===t?H(e.length):e.map(e=>e/t)}export const TableElement=c.named("Table").props({type:"table",width:300,height:200,rows:3,cols:3,colWidths:e.array(e.number),rowHeights:e.array(e.number),cells:e.array(TableCell),borderColor:"#000000",borderWidth:1,borderStyle:e.optional(e.enumeration(["solid","dashed","dotted","none"]),"solid"),fontSize:30,fontFamily:"Roboto",fontWeight:"normal",fontStyle:"normal",textDecoration:"",textTransform:"none",fill:"black",align:"left",verticalAlign:"top",lineHeight:e.optional(e.union(e.number,e.string),1.2),letterSpacing:0,strokeWidth:0,stroke:"black",cellBackground:"transparent",cellPadding:4}).postProcessSnapshot(e=>{e.cells&&((e=Object.assign({},e)).cells=e.cells.map(t=>{const o={};for(const[l,r]of Object.entries(t)){p.has(l)&&r===e[l]||(o[l]=r)}return o}));for(const t of m){delete e[t]}return e}).volatile(()=>({_focusedCellIds:[],_editingCellId:void 0,_anchorCellId:void 0,_cellContentHeights:i.map(),_baseRowHeights:null,_baseHeight:null})).actions(e=>({afterCreate(){const t=e.rows*e.cols;if(0===e.cells.length){e.cells.replace(n(function(e,t){const o=[];for(let l=0;l<e*t;l++){o.push({id:s(10),text:""})}return o}(e.rows,e.cols)))}else if(e.cells.length<t){for(;e.cells.length<t;){e.cells.push(n({id:s(10),text:""}))}}else{e.cells.length>t&&e.cells.splice(t)}0===e.colWidths.length&&e.colWidths.replace(H(e.cols)),0===e.rowHeights.length&&e.rowHeights.replace(H(e.rows))}})).views(e=>({get _cellMap(){const t=new Map,o=e.cols;return e.cells.forEach((e,l)=>{t.set(`${Math.floor(l/o)}:${l%o}`,e)}),t},getActualRowHeight:t=>e.rowHeights[t]*e.height})).views(e=>{const t={getCell:(t,o)=>e._cellMap.get(`${t}:${o}`),get minWidth(){return 20*e.cols},getRowContentOuterHeight(o){let l=0;for(let r=0;r<e.cols;r++){const n=t.getCell(o,r);if(!n){continue}const i=e._cellContentHeights.get(n.id);void 0!==i&&(l=Math.max(l,i+2*n.cellPadding))}return l},get minHeight(){const o=20*e.rows;if(0===e._cellContentHeights.size){return o}let l=0;for(let r=0;r<e.rows;r++){l+=t.getRowContentOuterHeight(r)}return Math.max(o,l)},get actualHeight(){let t=0;for(let o=0;o<e.rows;o++){t+=e.getActualRowHeight(o)}return t},getCellRect(t,o,l=1,r=1){let n=0;for(let d=0;d<o;d++){n+=e.colWidths[d]*e.width}let i=0;for(let d=0;d<t;d++){i+=e.getActualRowHeight(d)}let s=0;for(let d=o;d<o+r;d++){s+=(e.colWidths[d]||0)*e.width}let c=0;for(let d=t;d<t+l;d++){c+=e.getActualRowHeight(d)}return{x:n,y:i,width:s,height:c}},get visibleCells(){return e.cells.filter(e=>!e.mergedInto)},get focusedCells(){return e.cells.filter(t=>e._focusedCellIds.includes(t.id))},get editingCell(){if(e._editingCellId){return e.cells.find(t=>t.id===e._editingCellId)}},get _fitRowsToContent(){var o,l;if(0===e._cellContentHeights.size){return null}const r=null!==(o=e._baseHeight)&&void 0!==o?o:e.height,n=null!==(l=e._baseRowHeights)&&void 0!==l?l:[...e.rowHeights];let i=!1;const s=[];for(let d=0;d<e.rows;d++){const o=e.rowHeights[d]*e.height,l=n[d]*r;let c=0;for(let r=0;r<e.cols;r++){const o=t.getCell(d,r);if(!o){continue}const l=e._cellContentHeights.get(o.id);if(void 0!==l){const e=l+2*o.cellPadding;c=Math.max(c,e)}}const a=Math.max(c,l);Math.abs(a-o)>1?(s.push(a),i=!0):s.push(o)}if(!i){return null}const c=s.reduce((e,t)=>e+t,0);return{rowHeights:s.map(e=>e/c),height:c}}};return t}).actions(e=>{const t={setCellContentHeight(t,o){e._cellContentHeights.set(t,o)},_applyFitRowsToContent(){null===e._baseRowHeights&&(e._baseRowHeights=[...e.rowHeights],e._baseHeight=e.height);const t=e._fitRowsToContent;t&&(e.height=t.height,e.rowHeights.replace(t.rowHeights))},focusCell(t,o=!1){o?e._focusedCellIds.includes(t)||(e._focusedCellIds=[...e._focusedCellIds,t]):(e._focusedCellIds=[t],e._anchorCellId=t)},focusCellRange(t,o){const l=e.cells.find(t=>t.id===e._anchorCellId);if(!l){return}const r=Math.min(l.row,t),n=Math.max(l.row,t),i=Math.min(l.col,o),s=Math.max(l.col,o),c=[];for(const d of e.cells){d.row>=r&&d.row<=n&&d.col>=i&&d.col<=s&&c.push(d.id)}e._focusedCellIds=c},clearCellFocus(){if(l(e)){if(e._editingCellId){const t=e.cells.find(t=>t.id===e._editingCellId);t&&t.toggleEditMode(!1)}e._focusedCellIds=[],e._editingCellId=void 0,e._anchorCellId=void 0}},enterCellEdit(t){e._editingCellId=t,e._focusedCellIds.includes(t)||(e._focusedCellIds=[t]);const o=e.cells.find(e=>e.id===t);o&&o.toggleEditMode(!0)},exitCellEdit(){if(e._editingCellId){const t=e.cells.find(t=>t.id===e._editingCellId);t&&t.toggleEditMode(!1)}e._editingCellId=void 0},_resetBaseRowHeights(){e._baseRowHeights=null,e._baseHeight=null},setHeightRedistribute(t){const o=e.rows;if(0===o||t<=0){return void(e.height=t)}const l=e.height;if(l<=0||t>=l){return void(e.height=t)}const r=[],n=[];let i=0;for(let h=0;h<o;h++){r.push(e.rowHeights[h]*l);const t=e.getRowContentOuterHeight(h);n.push(t),i+=t}if(t<=i||i<=0){return void(e.height=t)}const s=t-i;let c=0;const d=[];for(let e=0;e<o;e++){const t=Math.max(0,r[e]-n[e]);d.push(t),c+=t}const a=[];if(c<=0){const e=t/l;for(let t=0;t<o;t++){a.push(r[t]*e)}}else{for(let e=0;e<o;e++){a.push(n[e]+d[e]/c*s)}}const g=a.map(e=>e/t);e.height=t,e.rowHeights.replace(g)},addRow(o){t._resetBaseRowHeights();const l=o>0?o-1:0,r=(e.rowHeights[l]||1/(e.rows+1))*e.height,i=e.height+r,c=[];for(let t=0;t<e.rows;t++){c.push(e.rowHeights[t]*e.height/i)}c.splice(o,0,r/i);const d=o*e.cols,a=Array.from({length:e.cols},()=>({id:s(10),text:""}));e.cells.splice(d,0,...n(a)),e.rows+=1,e.height=i,e.rowHeights.replace(S(c))},removeRow(o){if(e.rows<=1){return}t._resetBaseRowHeights();const l=o*e.cols,r=[];for(let t=l;t<l+e.cols;t++){r.push(e.cells[t].id)}if(e._editingCellId&&r.includes(e._editingCellId)){const t=e.cells.find(t=>t.id===e._editingCellId);t&&t.toggleEditMode(!1),e._editingCellId=void 0}e._focusedCellIds=e._focusedCellIds.filter(e=>!r.includes(e)),r.forEach(t=>e._cellContentHeights.delete(t)),e.cells.splice(l,e.cols);const n=[...e.rowHeights];n.splice(o,1),e.rows-=1,e.rowHeights.replace(S(n))},addColumn(t){const o=t>0?t-1:0,l=(e.colWidths[o]||1/(e.cols+1))*e.width,r=e.width+l,i=[];for(let n=0;n<e.cols;n++){i.push(e.colWidths[n]*e.width/r)}i.splice(t,0,l/r);const c=e.cols;for(let d=e.rows-1;d>=0;d--){e.cells.splice(d*c+t,0,n({id:s(10),text:""}))}e.cols+=1,e.width=r,e.colWidths.replace(S(i))},removeColumn(t){if(e.cols<=1){return}const o=e.cols,l=[];for(let n=0;n<e.rows;n++){l.push(e.cells[n*o+t].id)}if(e._editingCellId&&l.includes(e._editingCellId)){const t=e.cells.find(t=>t.id===e._editingCellId);t&&t.toggleEditMode(!1),e._editingCellId=void 0}e._focusedCellIds=e._focusedCellIds.filter(e=>!l.includes(e)),l.forEach(t=>e._cellContentHeights.delete(t));for(let n=e.rows-1;n>=0;n--){e.cells.splice(n*o+t,1)}const r=[...e.colWidths];r.splice(t,1),e.cols-=1,e.colWidths.replace(S(r))},distributeRowsEvenly(){t._resetBaseRowHeights(),e.rowHeights.replace(H(e.rows))},distributeColumnsEvenly(){e.colWidths.replace(H(e.cols))},resizeColumn(t,o){if(t>=e.cols-1){return}const l=[...e.colWidths],r=l[t]+l[t+1],n=l[t]+o,i=l[t+1]-o;n<d?(l[t]=d,l[t+1]=r-d):i<d?(l[t+1]=d,l[t]=r-d):(l[t]=n,l[t+1]=i),e.colWidths.replace(l)},resizeRow(t,o){if(t>=e.rows-1){return}const l=[...e.rowHeights],r=l[t]+l[t+1],n=e.height,i=n>0?e.getRowContentOuterHeight(t)/n:0,s=n>0?e.getRowContentOuterHeight(t+1)/n:0,c=Math.max(d,i),a=Math.max(d,s),g=l[t]+o,h=l[t+1]-o;g<c?(l[t]=c,l[t+1]=r-c):h<a?(l[t+1]=a,l[t]=r-a):(l[t]=g,l[t+1]=h),e.rowHeights.replace(l)},setCellBorders(t,o,l){const r={top:{side:"bottom",dr:-1,dc:0},bottom:{side:"top",dr:1,dc:0},left:{side:"right",dr:0,dc:-1},right:{side:"left",dr:0,dc:1}};for(const n of t){const t=e.cells.find(e=>e.id===n);if(t){for(const n of o){t.setBorder(n,l);const o=r[n],i=t.row+o.dr,s=t.col+o.dc,c=e.getCell(i,s);c&&c.setBorder(o.side,l)}}}}};return t}).actions(e=>({clone(t={},{skipSelect:o=!1}={}){const l=JSON.parse(JSON.stringify(e.toJSON()));if(t.id=t.id||s(10),l.cells){const e=new Map;l.cells.forEach(t=>{const o=t.id,l=s(10);e.set(o,l),t.id=l}),l.cells.forEach(t=>{t.mergedInto&&e.has(t.mergedInto)&&(t.mergedInto=e.get(t.mergedInto))})}return Object.assign(l,t),e.page.addElement(l,{skipSelect:o})}}));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "polotno",
3
- "version": "3.0.0-beta.35",
3
+ "version": "3.0.0-beta.36",
4
4
  "description": "Design Editor Framework",
5
5
  "author": "Anton Lavrenov",
6
6
  "keywords": [
package/pages-timeline/page-preview.js CHANGED
@@ -20,4 +20,4 @@ import e from"react";import{observer as t}from"mobx-react-lite";import{reaction
20
20
  &:hover {
21
21
  display: block;
22
22
  }
23
- `;let w=[],E=!1;const P=async()=>{if(E||0===w.length){return}E=!0;const{page:e,setPreview:t}=w.shift();try{t(await e.store.toDataURL({pageId:e.id,pixelRatio:.1,quickMode:!0}))}catch(o){if(o instanceof Error&&"string"==typeof o.message&&o.message.includes("Canvas was unmounted.")){return E=!1,void P()}throw o}E=!1,P()};export const PagePreview=t(({page:t,scale:g})=>{const[E,y]=e.useState(null),R=t.store.activePage===t||t.store._selectedPagesIds.includes(t.id),k=e.useRef(null),I=t.store.pages.indexOf(t),C=60/t.computedHeight*t.computedWidth,T=m.animationsEnabled?t.duration*g:C,D=t.store.pages.length>1;e.useLayoutEffect(()=>{k.current&&(k.current.style.width=T+"px")},[I,T]),(({page:t,setPreview:i,groupRef:r})=>{const a=e.useRef(!1);e.useEffect(()=>{const e=()=>{w.push({page:t,setPreview:e=>i(e)}),P()};let s=null,l=null,c=Date.now();const d=()=>{s&&clearTimeout(s),a.current&&(l||(l=setTimeout(()=>{Date.now()-c>=6e3&&(e(),c=Date.now(),l=null)},6e3)),s=setTimeout(()=>{e(),c=Date.now(),s=null,l&&(clearTimeout(l),l=null)},300))};let u=null;const p=n(t,e=>{x(u,e)||(d(),u=e)}),g=o(()=>t.children.some(e=>e._editModeEnabled),e=>{e||d()}),m=new IntersectionObserver(e=>{e.forEach(e=>{e.isIntersecting?(a.current=!0,d()):(s&&clearTimeout(s),l&&clearTimeout(l),a.current=!1)})},{threshold:.1});return r.current&&m.observe(r.current),()=>{m.disconnect(),s&&clearTimeout(s),l&&clearTimeout(l),p(),g(),w=w.filter(e=>e.page!==t)}},[r,t,i])})({page:t,setPreview:y,groupRef:k});const{handleStartDrag:j}=((t,o)=>({handleStartDrag:e.useCallback((e,n)=>{e.preventDefault();const i=e=>{if(e.preventDefault(),!o.current){return}const i="start"===n?7:-7,{clientX:r}=e,{left:a,width:s}=o.current.getBoundingClientRect(),l=(r-a-i)/s;"end"===n&&t.set({duration:Math.max(1e3,l*t.duration)})},r=()=>{window.removeEventListener("mousemove",i),window.removeEventListener("mouseup",r)};window.addEventListener("mousemove",i),window.addEventListener("mouseup",r)},[o,t])}))(t,k);return e.createElement(v,{style:{width:T+"px",marginRight:m.animationsEnabled?"0px":"10px",height:"60px"},ref:k,className:"polotno-page-container"+(R?" sortable-selected":"")},e.createElement("div",{style:{width:"100%",height:"100%",borderRadius:"15px",backgroundImage:E?`url("${E}")`:"none",backgroundRepeat:"repeat-x",backgroundSize:"auto 100%",backgroundColor:"white",display:"flex",justifyContent:"center",alignItems:"center"},onClick:e=>{const{store:o}=t,n=o._selectedPagesIds.length?o._selectedPagesIds:o.activePage?[o.activePage.id]:[],i=n.includes(t.id),r=e.shiftKey;if(r&&i){const e=n.filter(e=>e!==t.id);o.selectPages(e)}else if(r&&!i){const e=n.concat([t.id]);o.selectPages(e)}else{o.selectPages([t.id])}}},!E&&e.createElement(h,null)),e.createElement("div",{style:{position:"absolute",top:"0",left:"0px",bottom:"0px",right:"0px",borderRadius:"15px",border:R?"2px solid rgb(0, 161, 255, 0.9)":"2px solid lightgrey",zIndex:1,pointerEvents:"none"}}),m.animationsEnabled&&e.createElement("div",{style:{position:"absolute",zIndex:1,bottom:"5px",left:"5px",backgroundColor:"rgba(0, 0, 0, 0.5)",color:"white",padding:"2px 7px",textAlign:"center",borderRadius:"4rem"}},(t.duration/1e3).toFixed(1),"s"),m.animationsEnabled&&e.createElement("div",{style:{position:"absolute",zIndex:1,top:"50%",right:"0px",width:"8px",height:"50%",transform:"translateY(-50%) translateX(-3px)",borderRadius:"5px",border:"1px solid rgb(255, 255, 255, 0.6)",backgroundColor:"rgb(0, 0, 0, 0.6)",cursor:"ew-resize"},onMouseDown:e=>j(e,"end")}),R&&e.createElement(b,{className:"polotno-page-menu",onClick:e=>{e.stopPropagation()}},e.createElement(s,{content:e.createElement(r,{style:{width:"140px"}},e.createElement(a,{icon:e.createElement(c,null),text:f("pagesTimeline.duplicatePage"),onClick:()=>{const e=t.store,o=(e.selectedPages||[]).filter(Boolean),n=o.length?o:e.activePage?[e.activePage]:[];if(!n.length){return}const i=new Set(n.map(e=>e.id)),r=e.pages.filter(e=>i.has(e.id)),a=r[r.length-1],s=r.map(e=>e.clone()),l=e.pages.indexOf(a);s.forEach((e,t)=>{e.setZIndex(l+1+t)}),e.selectPages(s.map(e=>e.id))}}),e.createElement(a,{icon:e.createElement(d,null),text:f("pagesTimeline.addPage"),onClick:()=>{var e,o,n;const i=t.store.addPage({bleed:(null===(e=t.store.activePage)||void 0===e?void 0:e.bleed)||0,width:(null===(o=t.store.activePage)||void 0===o?void 0:o.width)||"auto",height:(null===(n=t.store.activePage)||void 0===n?void 0:n.height)||"auto"}),r=t.store.pages.indexOf(t);i.setZIndex(r+1)}}),D&&e.createElement(a,{icon:e.createElement(p,null),text:f("pagesTimeline.removePage"),onClick:()=>{const e=t.store,o=(e.selectedPages||[]).filter(Boolean),n=o.length?o.map(e=>e.id):e.activePage?[e.activePage.id]:[];n.length&&e.deletePages(n)}})),position:l.TOP},e.createElement(i,{icon:e.createElement(u,null),style:{minHeight:"20px",borderRadius:"10px"}}))))});
23
+ `;let w=[],E=!1;const P=async()=>{if(E||0===w.length){return}E=!0;const{page:e,setPreview:t}=w.shift();try{t(await e.store.toDataURL({pageId:e.id,pixelRatio:.1,quickMode:!0}))}catch(o){o instanceof Error&&"string"==typeof o.message&&(o.message.includes("Canvas was unmounted.")||o.message.includes("<Workspace /> component is not mounted"))||console.error(o)}finally{E=!1}P()};export const PagePreview=t(({page:t,scale:g})=>{const[E,y]=e.useState(null),k=t.store.activePage===t||t.store._selectedPagesIds.includes(t.id),R=e.useRef(null),I=t.store.pages.indexOf(t),C=60/t.computedHeight*t.computedWidth,T=m.animationsEnabled?t.duration*g:C,D=t.store.pages.length>1;e.useLayoutEffect(()=>{R.current&&(R.current.style.width=T+"px")},[I,T]),(({page:t,setPreview:i,groupRef:r})=>{const a=e.useRef(!1);e.useEffect(()=>{const e=()=>{w.push({page:t,setPreview:e=>i(e)}),P()};let s=null,l=null,c=Date.now();const d=()=>{s&&clearTimeout(s),a.current&&(l||(l=setTimeout(()=>{Date.now()-c>=6e3&&(e(),c=Date.now(),l=null)},6e3)),s=setTimeout(()=>{e(),c=Date.now(),s=null,l&&(clearTimeout(l),l=null)},300))};let u=null;const p=n(t,e=>{x(u,e)||(d(),u=e)}),g=o(()=>t.children.some(e=>e._editModeEnabled),e=>{e||d()}),m=new IntersectionObserver(e=>{e.forEach(e=>{e.isIntersecting?(a.current=!0,d()):(s&&clearTimeout(s),l&&clearTimeout(l),a.current=!1)})},{threshold:.1});return r.current&&m.observe(r.current),()=>{m.disconnect(),s&&clearTimeout(s),l&&clearTimeout(l),p(),g(),w=w.filter(e=>e.page!==t)}},[r,t,i])})({page:t,setPreview:y,groupRef:R});const{handleStartDrag:j}=((t,o)=>({handleStartDrag:e.useCallback((e,n)=>{e.preventDefault();const i=e=>{if(e.preventDefault(),!o.current){return}const i="start"===n?7:-7,{clientX:r}=e,{left:a,width:s}=o.current.getBoundingClientRect(),l=(r-a-i)/s;"end"===n&&t.set({duration:Math.max(1e3,l*t.duration)})},r=()=>{window.removeEventListener("mousemove",i),window.removeEventListener("mouseup",r)};window.addEventListener("mousemove",i),window.addEventListener("mouseup",r)},[o,t])}))(t,R);return e.createElement(v,{style:{width:T+"px",marginRight:m.animationsEnabled?"0px":"10px",height:"60px"},ref:R,className:"polotno-page-container"+(k?" sortable-selected":"")},e.createElement("div",{style:{width:"100%",height:"100%",borderRadius:"15px",backgroundImage:E?`url("${E}")`:"none",backgroundRepeat:"repeat-x",backgroundSize:"auto 100%",backgroundColor:"white",display:"flex",justifyContent:"center",alignItems:"center"},onClick:e=>{const{store:o}=t,n=o._selectedPagesIds.length?o._selectedPagesIds:o.activePage?[o.activePage.id]:[],i=n.includes(t.id),r=e.shiftKey;if(r&&i){const e=n.filter(e=>e!==t.id);o.selectPages(e)}else if(r&&!i){const e=n.concat([t.id]);o.selectPages(e)}else{o.selectPages([t.id])}}},!E&&e.createElement(h,null)),e.createElement("div",{style:{position:"absolute",top:"0",left:"0px",bottom:"0px",right:"0px",borderRadius:"15px",border:k?"2px solid rgb(0, 161, 255, 0.9)":"2px solid lightgrey",zIndex:1,pointerEvents:"none"}}),m.animationsEnabled&&e.createElement("div",{style:{position:"absolute",zIndex:1,bottom:"5px",left:"5px",backgroundColor:"rgba(0, 0, 0, 0.5)",color:"white",padding:"2px 7px",textAlign:"center",borderRadius:"4rem"}},(t.duration/1e3).toFixed(1),"s"),m.animationsEnabled&&e.createElement("div",{style:{position:"absolute",zIndex:1,top:"50%",right:"0px",width:"8px",height:"50%",transform:"translateY(-50%) translateX(-3px)",borderRadius:"5px",border:"1px solid rgb(255, 255, 255, 0.6)",backgroundColor:"rgb(0, 0, 0, 0.6)",cursor:"ew-resize"},onMouseDown:e=>j(e,"end")}),k&&e.createElement(b,{className:"polotno-page-menu",onClick:e=>{e.stopPropagation()}},e.createElement(s,{content:e.createElement(r,{style:{width:"140px"}},e.createElement(a,{icon:e.createElement(c,null),text:f("pagesTimeline.duplicatePage"),onClick:()=>{const e=t.store,o=(e.selectedPages||[]).filter(Boolean),n=o.length?o:e.activePage?[e.activePage]:[];if(!n.length){return}const i=new Set(n.map(e=>e.id)),r=e.pages.filter(e=>i.has(e.id)),a=r[r.length-1],s=r.map(e=>e.clone()),l=e.pages.indexOf(a);s.forEach((e,t)=>{e.setZIndex(l+1+t)}),e.selectPages(s.map(e=>e.id))}}),e.createElement(a,{icon:e.createElement(d,null),text:f("pagesTimeline.addPage"),onClick:()=>{var e,o,n;const i=t.store.addPage({bleed:(null===(e=t.store.activePage)||void 0===e?void 0:e.bleed)||0,width:(null===(o=t.store.activePage)||void 0===o?void 0:o.width)||"auto",height:(null===(n=t.store.activePage)||void 0===n?void 0:n.height)||"auto"}),r=t.store.pages.indexOf(t);i.setZIndex(r+1)}}),D&&e.createElement(a,{icon:e.createElement(p,null),text:f("pagesTimeline.removePage"),onClick:()=>{const e=t.store,o=(e.selectedPages||[]).filter(Boolean),n=o.length?o.map(e=>e.id):e.activePage?[e.activePage.id]:[];n.length&&e.deletePages(n)}})),position:l.TOP},e.createElement(i,{icon:e.createElement(u,null),style:{minHeight:"20px",borderRadius:"10px"}}))))});