polotno 2.36.1 → 2.36.3

package/canvas/element.js

@@ -1 +1 @@
-import e from"react";import{observer as t}from"mobx-react-lite";import o from"konva";import{TextElement as n}from"./text-element.js";import{ImageElement as r}from"./image-element.js";import{HTMLElement as i}from"./html-element.js";import{LineElement as m}from"./line-element.js";import{VideoElement as l}from"./video-element.js";import{FigureElement as s}from"./figure-element.js";import{GifElement as a}from"./gif-element.js";import{Group as c}from"react-konva";import{Highlighter as f}from"./highlighter.js";import{forEveryChild as p}from"../model/group-model.js";import{flags as d}from"../utils/flags.js";const u={text:n,image:r,svg:r,line:m,video:l,figure:s,group:t(t=>{const{element:o,store:n}=t,{children:r}=o,i=o.selectable||"admin"===n.role;return e.createElement(c,{opacity:o.opacity,listening:i,hideInExport:!o.showInExport,id:o.id},r.map(o=>e.createElement(h,Object.assign({},t,{key:o.id,store:n,element:o}))))}),gif:a};export function registerShapeComponent(e,t){u[e]=t}const g=(e,t)=>{const n=[];p(e,e=>{"group"!==e.type&&n.push(e.a)});const r=[];n.forEach(e=>{const t=[{x:0,y:0},{x:0+e.width,y:0},{x:0+e.width,y:0+e.height},{x:0,y:0+e.height}],n=new o.Transform;n.translate(e.x,e.y),n.rotate(o.Util.degToRad(e.rotation)),t.forEach(e=>{const t=n.point(e);r.push(t)})});const i=new o.Transform;i.rotate(-o.Util.degToRad(t));let m=1/0,l=1/0,s=-1/0,a=-1/0;r.forEach(e=>{const t=i.point(e);m=Math.min(m,t.x),l=Math.min(l,t.y),s=Math.max(s,t.x),a=Math.max(a,t.y)}),i.invert();const c=i.point({x:m,y:l});return{x:c.x,y:c.y,width:s-m,height:a-l,rotation:t}},h=t(t=>{var n;const{element:r,store:m}=t,[l,s]=e.useState(!1),a=m.selectedElements.indexOf(r)>=0&&r.selectable,p="group"===(null===(n=r.parent)||void 0===n?void 0:n.type),h=(t=>{const[n,r]=e.useState(null);return e.useEffect(()=>{const e=setTimeout(()=>{const e=t.page.id,n=o.stages.find(t=>t.getAttr("pageId")===e);n||console.error("No stage is found for element",t.id),r(n)});return()=>clearTimeout(e)},[t.id]),n})(r),x=null==h?void 0:h.findOne("Transformer");e.useEffect(()=>{if(h){const e=e=>{const t=e.target.findAncestor(".element",!0),o=m.getElementById(null==t?void 0:t.id()),n=null==o?void 0:o.top,i=null==n?void 0:n.id;s(i===r.id)};h.on("mouseover",e);const t=()=>{s(!1)};return h.on("mouseleave",t),()=>{h.off("mouseover",e),h.off("mouseleave",t)}}},[h]);let y=u[t.element.type];return"text"===t.element.type&&d.htmlRenderEnabled&&(y=i),t.element.visible?y?e.createElement(c,{name:"element-container"},e.createElement(y,Object.assign({},t)),l&&!a&&!p&&e.createElement(f,{element:"group"===r.type?{a:g(r,(null==x?void 0:x.rotation())||0)}:r})):(console.error("Can not find component for "+t.element.type),null):null});export default h;
+import e from"react";import{observer as t}from"mobx-react-lite";import o from"konva";import{TextElement as n}from"./text-element.js";import{ImageElement as r}from"./image-element.js";import{HTMLElement as i}from"./html-element.js";import{LineElement as m}from"./line-element.js";import{VideoElement as l}from"./video-element.js";import{FigureElement as s}from"./figure-element.js";import{GifElement as a}from"./gif-element.js";import{Group as c}from"react-konva";import{Highlighter as f}from"./highlighter.js";import{forEveryChild as p}from"../model/group-model.js";import{flags as d}from"../utils/flags.js";const u={text:n,image:r,svg:r,line:m,video:l,figure:s,group:t(t=>{const{element:o,store:n}=t,{children:r}=o,i=o.selectable||"admin"===n.role;return e.createElement(c,{opacity:o.opacity,listening:i,hideInExport:!o.showInExport,id:o.id},r.map(o=>e.createElement(h,Object.assign({},t,{key:o.id,store:n,element:o}))))}),gif:a};export function registerShapeComponent(e,t){u[e]=t}const g=(e,t)=>{const n=[];p(e,e=>{"group"!==e.type&&n.push(e.a)});const r=[];n.forEach(e=>{const t=[{x:0,y:0},{x:0+e.width,y:0},{x:0+e.width,y:0+e.height},{x:0,y:0+e.height}],n=new o.Transform;n.translate(e.x,e.y),n.rotate(o.Util.degToRad(e.rotation)),t.forEach(e=>{const t=n.point(e);r.push(t)})});const i=new o.Transform;i.rotate(-o.Util.degToRad(t));let m=1/0,l=1/0,s=-1/0,a=-1/0;r.forEach(e=>{const t=i.point(e);m=Math.min(m,t.x),l=Math.min(l,t.y),s=Math.max(s,t.x),a=Math.max(a,t.y)}),i.invert();const c=i.point({x:m,y:l});return{x:c.x,y:c.y,width:s-m,height:a-l,rotation:t}},h=t(t=>{var n;const{element:r,store:m}=t,[l,s]=e.useState(!1),a=m.selectedElements.indexOf(r)>=0&&r.selectable,p="group"===(null===(n=r.parent)||void 0===n?void 0:n.type),h=(t=>{const[n,r]=e.useState();return e.useEffect(()=>{const e=setTimeout(()=>{const e=t.page.id,n=o.stages.find(t=>t.getAttr("pageId")===e);n||console.error("No stage is found for element",t.id),r(n)});return()=>clearTimeout(e)},[t.id]),n})(r),x=null==h?void 0:h.findOne("Transformer");e.useEffect(()=>{if(h){const e=e=>{const t=e.target.findAncestor(".element",!0),o=m.getElementById(null==t?void 0:t.id()),n=null==o?void 0:o.top,i=null==n?void 0:n.id;s(i===r.id)};h.on("mouseover",e);const t=()=>{s(!1)};return h.on("mouseleave",t),()=>{h.off("mouseover",e),h.off("mouseleave",t)}}},[h]);let y=u[t.element.type];return"text"===t.element.type&&d.htmlRenderEnabled&&(y=i),t.element.visible?y?e.createElement(c,{name:"element-container"},e.createElement(y,Object.assign({},t)),l&&!a&&!p&&e.createElement(f,{element:"group"===r.type?{a:g(r,(null==x?void 0:x.rotation())||0)}:r})):(console.error("Can not find component for "+t.element.type),null):null});export default h;

package/canvas/figure-element.js

@@ -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=c.selectedShapes.indexOf(h)>=0&&h.selectable,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,1-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})))});
+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=c.selectedShapes.indexOf(h)>=0&&h.selectable,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})))});

package/canvas/hotkeys.js

@@ -1 +1 @@
-import{copy as e,cut as t,paste as o}from"../utils/clipboard.js";import{duplicateElements as l}from"../utils/duplicate.js";import{alignBottom as a,alignCenter as c,alignLeft as n,alignMiddle as d,alignRight as i,alignTop as r}from"../utils/alignment.js";const s="rgba(191, 191, 191, 100)";export function handleHotkey(u,v){var p,f,m,y;if("INPUT"===(null===(p=document.activeElement)||void 0===p?void 0:p.tagName)||"TEXTAREA"===(null===(f=document.activeElement)||void 0===f?void 0:f.tagName)||"true"===(null===(m=document.activeElement)||void 0===m?void 0:m.contentEditable)){return}const h=document.querySelector(".polotno-workspace-container");if(document.activeElement!==h&&!(null==h?void 0:h.contains(document.activeElement))){const e=window.getSelection();if(e&&e.toString().length>0){return}}const g=v.selectedElements.filter(e=>e.removable).map(e=>e.id);46!==u.keyCode&&8!==u.keyCode||v.deleteElements(g);const E=u.ctrlKey||u.metaKey,D=u.shiftKey,w=u.altKey;if("Escape"===u.key&&"draw"===v.tool){return u.preventDefault(),void v.setTool("selection")}if(!E||D||"z"!==u.key.toLowerCase()&&"y"!==u.key.toLowerCase()||(u.preventDefault(),v.history.undo()),E&&D&&("z"===u.key.toLowerCase()||"y"===u.key.toLowerCase())&&(u.preventDefault(),v.history.redo()),E&&"KeyA"===u.code){u.preventDefault();const e=null===(y=v.activePage)||void 0===y?void 0:y.children.filter(e=>e.selectable),t=(null==e?void 0:e.map(e=>e.id))||[];v.selectElements(t)}if(E&&"KeyC"===u.code&&(u.preventDefault(),e(v)),E&&"KeyX"===u.code&&(u.preventDefault(),t(v)),E&&"KeyV"===u.code&&(u.preventDefault(),o(v)),"ArrowDown"===u.code&&(u.preventDefault(),v.selectedShapes.forEach(e=>{e.draggable&&e.set({y:e.y+1})})),"ArrowUp"===u.code&&(u.preventDefault(),v.selectedShapes.forEach(e=>{e.draggable&&e.set({y:e.y-1})})),"ArrowLeft"===u.code&&(u.preventDefault(),v.selectedShapes.forEach(e=>{e.draggable&&e.set({x:e.x-1})})),"ArrowRight"===u.code&&(u.preventDefault(),v.selectedShapes.forEach(e=>{e.draggable&&e.set({x:e.x+1})})),E&&"KeyG"===u.code){u.preventDefault();const e=v.selectedElements[0];if(e&&"group"===e.type){const t=e;v.ungroupElements([t.id])}else{v.groupElements(v.selectedElements.map(e=>e.id))}}if(E&&"KeyD"===u.code&&(u.preventDefault(),l(v.selectedElements,v)),"KeyT"===u.code&&!E){u.preventDefault();const e=30,t=v.width/2,o=v.width/2-t/2,l=v.height/2-e/2,a=2160,c=(v.width+v.height)/a;v.activePage.addElement({type:"text",x:o,y:l,width:t,fontSize:e*c,text:"Sample Text",fontFamily:"Roboto"})}if("KeyR"===u.code&&!E){u.preventDefault();const e={type:"figure",x:v.width/4,y:v.height/4,width:300,height:300,fill:s,stroke:"#0c0c0c",strokeWidth:0,subType:"rect"};v.activePage.addElement(e)}if("KeyL"===u.code&&!E){u.preventDefault();const e=v.activePage.computedWidth/3,t={type:"line",x:v.activePage.computedWidth/2-e/2,y:v.activePage.computedHeight/2,width:e,color:s};v.activePage.addElement(t)}if("KeyO"===u.code&&!E){u.preventDefault(),u.preventDefault();const e={type:"figure",x:v.width/4,y:v.height/4,width:300,height:300,fill:s,stroke:"#0c0c0c",strokeWidth:0,subType:"circle"};v.activePage.addElement(e)}E&&"Equal"===u.code&&(u.preventDefault(),v.setScale(v.scale+.1)),E&&"Minus"===u.code&&(u.preventDefault(),v.setScale(v.scale-.1)),w&&("KeyA"===u.code&&(u.preventDefault(),n(v)),"KeyD"===u.code&&(u.preventDefault(),i(v)),"KeyS"===u.code&&(u.preventDefault(),a(v)),"KeyW"===u.code&&(u.preventDefault(),r(v)),"KeyV"===u.code&&(u.preventDefault(),d(v)),"KeyH"===u.code&&(u.preventDefault(),c(v))),"BracketRight"===u.code&&(u.preventDefault(),E?v.activePage.moveElementsUp(v.selectedElementsIds):v.activePage.moveElementsTop(v.selectedElementsIds)),"BracketLeft"===u.code&&(u.preventDefault(),E?v.activePage.moveElementsDown(v.selectedElementsIds):v.activePage.moveElementsBottom(v.selectedElementsIds))}
+import{copy as e,cut as t,paste as l}from"../utils/clipboard.js";import{duplicateElements as o}from"../utils/duplicate.js";import{alignBottom as n,alignCenter as d,alignLeft as i,alignMiddle as a,alignRight as c,alignTop as r}from"../utils/alignment.js";const s="rgba(191, 191, 191, 100)";export function handleHotkey(v,u){var p,f,m,y,h,g,E,D,w,K,k,P,b,x,S,T,A,C;if("INPUT"===(null===(p=document.activeElement)||void 0===p?void 0:p.tagName)||"TEXTAREA"===(null===(f=document.activeElement)||void 0===f?void 0:f.tagName)||"true"===(null===(m=document.activeElement)||void 0===m?void 0:m.contentEditable)){return}const L=document.querySelector(".polotno-workspace-container");if(document.activeElement!==L&&!(null==L?void 0:L.contains(document.activeElement))){const e=window.getSelection();if(e&&e.toString().length>0){return}}const I=u.selectedElements.filter(e=>e.removable).map(e=>e.id);46!==v.keyCode&&8!==v.keyCode||u.deleteElements(I);const R=v.ctrlKey||v.metaKey,W=v.shiftKey,j=v.altKey;if("Escape"===v.key&&"draw"===u.tool){return v.preventDefault(),void u.setTool("selection")}if(!R||W||"z"!==v.key.toLowerCase()&&"y"!==v.key.toLowerCase()||(v.preventDefault(),u.history.undo()),R&&W&&("z"===v.key.toLowerCase()||"y"===v.key.toLowerCase())&&(v.preventDefault(),u.history.redo()),R&&"KeyA"===v.code){v.preventDefault();const e=null===(y=u.activePage)||void 0===y?void 0:y.children.filter(e=>e.selectable),t=(null==e?void 0:e.map(e=>e.id))||[];u.selectElements(t)}if(R&&"KeyC"===v.code&&(v.preventDefault(),e(u)),R&&"KeyX"===v.code&&(v.preventDefault(),t(u)),R&&"KeyV"===v.code&&(v.preventDefault(),l(u)),"ArrowDown"===v.code&&(v.preventDefault(),u.selectedShapes.forEach(e=>{e.draggable&&e.set({y:e.y+1})})),"ArrowUp"===v.code&&(v.preventDefault(),u.selectedShapes.forEach(e=>{e.draggable&&e.set({y:e.y-1})})),"ArrowLeft"===v.code&&(v.preventDefault(),u.selectedShapes.forEach(e=>{e.draggable&&e.set({x:e.x-1})})),"ArrowRight"===v.code&&(v.preventDefault(),u.selectedShapes.forEach(e=>{e.draggable&&e.set({x:e.x+1})})),R&&"KeyG"===v.code){v.preventDefault();const e=u.selectedElements[0];if(e&&"group"===e.type){const t=e;u.ungroupElements([t.id])}else{u.groupElements(u.selectedElements.map(e=>e.id))}}if(R&&"KeyD"===v.code&&(v.preventDefault(),o(u.selectedElements,u)),"KeyT"===v.code&&!R){v.preventDefault();const e=30,t=u.width/2,l=u.width/2-t/2,o=u.height/2-e/2,n=2160,d=(u.width+u.height)/n;null===(h=u.activePage)||void 0===h||h.addElement({type:"text",x:l,y:o,width:t,fontSize:e*d,text:"Sample Text",fontFamily:"Roboto"})}if("KeyR"===v.code&&!R){v.preventDefault();const e={type:"figure",x:u.width/4,y:u.height/4,width:300,height:300,fill:s,stroke:"#0c0c0c",strokeWidth:0,subType:"rect"};null===(g=u.activePage)||void 0===g||g.addElement(e)}if("KeyL"===v.code&&!R){v.preventDefault();const e=(null!==(D=null===(E=u.activePage)||void 0===E?void 0:E.computedWidth)&&void 0!==D?D:0)/3,t={type:"line",x:(null!==(K=null===(w=u.activePage)||void 0===w?void 0:w.computedWidth)&&void 0!==K?K:0)/2-e/2,y:(null!==(P=null===(k=u.activePage)||void 0===k?void 0:k.computedHeight)&&void 0!==P?P:0)/2,width:e,color:s};null===(b=u.activePage)||void 0===b||b.addElement(t)}if("KeyO"===v.code&&!R){v.preventDefault(),v.preventDefault();const e={type:"figure",x:u.width/4,y:u.height/4,width:300,height:300,fill:s,stroke:"#0c0c0c",strokeWidth:0,subType:"circle"};null===(x=u.activePage)||void 0===x||x.addElement(e)}R&&"Equal"===v.code&&(v.preventDefault(),u.setScale(u.scale+.1)),R&&"Minus"===v.code&&(v.preventDefault(),u.setScale(u.scale-.1)),j&&("KeyA"===v.code&&(v.preventDefault(),i(u)),"KeyD"===v.code&&(v.preventDefault(),c(u)),"KeyS"===v.code&&(v.preventDefault(),n(u)),"KeyW"===v.code&&(v.preventDefault(),r(u)),"KeyV"===v.code&&(v.preventDefault(),a(u)),"KeyH"===v.code&&(v.preventDefault(),d(u))),"BracketRight"===v.code&&(v.preventDefault(),R?null===(S=u.activePage)||void 0===S||S.moveElementsUp(u.selectedElementsIds):null===(T=u.activePage)||void 0===T||T.moveElementsTop(u.selectedElementsIds)),"BracketLeft"===v.code&&(v.preventDefault(),R?null===(A=u.activePage)||void 0===A||A.moveElementsDown(u.selectedElementsIds):null===(C=u.activePage)||void 0===C||C.moveElementsBottom(u.selectedElementsIds))}

package/canvas/html-element.js

@@ -13,4 +13,4 @@ import t from"react";import{observer as e}from"mobx-react-lite";import{Group as
   .ql-direction-rtl {
     direction: rtl;
   }
-`;let X=["bold","color","font","italic","size","strike","underline","indent","list","direction"];export const setQuillFormats=t=>{X=t};export const createQuill=t=>new a(t,{toolbar:!1,keyboard:!1,clipboard:{matchVisual:!1},formats:X});export const setQuillContent=(t,e)=>{var o=t.clipboard.convert("<div class='ql-editor' style='outline: none;'>"+e+"<p><br></p></div>");t.setContents(o),t.history.clear()};const $=({html:e,onBlur:o,onChange:n,element:i,clickCoords:r})=>{var l;const d=t.useRef(null);t.useEffect(()=>{if(!d.current){return}const t=(i=d.current,new a(i,{toolbar:!1,keyboard:!1,clipboard:{matchVisual:!1},formats:X}));var i;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 t;const e=null===(t=d.current)||void 0===t?void 0:t.childNodes[0];if(!e){return}const o=e.innerHTML;n(Y(o))},10)}),setQuillContent(t,e),r?setCursorFromCoords(t,r):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 l=d.current.childNodes[0],c=e=>{var o,n;const i=t.getSelection();if(!i||0===i.length){return}const r=t.getText(i.index,i.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",r),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()},f=e=>{c(e);const o=t.getSelection();o&&o.length>0&&t.deleteText(o.index,o.length)};return l.addEventListener("copy",c),l.addEventListener("cut",f),()=>{l.removeEventListener("copy",c),l.removeEventListener("cut",f),s.runInAction(()=>{quillRef.editor.instance=null,quillRef.currentFormat={}}),delete window.__polotnoQuill}},[]),t.useEffect(()=>c(()=>i.text,()=>{var t,o;const n=quillRef.editor.instance;if(!n){return}const r=n.getSelection(),a=null===(o=null===(t=d.current)||void 0===t?void 0:t.childNodes)||void 0===o?void 0:o[0];Y((null==a?void 0:a.innerHTML)||"")===i.text||(setQuillContent(n,e),r&&(n.setSelection(r.index,r.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:i.fill};i.fill.indexOf("gradient")>=0&&(f.backgroundColor=i.fill,f.backgroundImage=i.fill,f.backgroundSize="100% 100%",f.backgroundRepeat="repeat",f.webkitBackgroundClip="text",f.MozBackgroundClip="text",f.WebkitTextFillColor="transparent",f.MozTextFillColor="transparent");const u=M(i);return t.createElement(L,{ref:d,style:Object.assign(Object.assign({},f),{fontSize:i.fontSize,fontWeight:i.fontWeight,textTransform:i.textTransform,width:i.a.width,fontFamily:'"'+i.fontFamily+'"',lineHeight:i.lineHeight,letterSpacing:i.letterSpacing*i.fontSize+"px",textAlign:i.align,opacity:Math.max(i.a.opacity,.2),textShadow:i.shadowEnabled?`${i.shadowOffsetX}px ${i.shadowOffsetY}px ${i.shadowBlur}px ${A(i.shadowColor,null!==(l=i.shadowOpacity)&&void 0!==l?l:1)}`:void 0,caretColor:u}),dir:p(O(i.text))})};function I(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)}const q=/^((?!chrome|android).)*safari/i.test(navigator.userAgent);export const HTMLElement=e(({element:e,store:a})=>{var c;const p=t.useRef(null),[b,F]=t.useState(),[M,Y]=t.useState(!1),[X,D]=t.useState(!1),B=t.useRef(e.height),W=a.selectedShapes.indexOf(e)>=0&&e.selectable,H=g(W),_=e.fontSize/3,{textVerticalResizeEnabled:N}=d,Q=d.autoDeleteEmptyText,V=g(e.fontFamily),[J]=h(a,e.fontFamily),G=e._editModeEnabled;E(p);const U=J?e.fontFamily:V!==e.fontFamily?V:"Arial",K=x(e).fill,Z=P(e,{fontFamily:U,color:K}),tt=P(e,{fontFamily:U,color:K,forEditor:!0});let{width:et,height:ot}=function(e,o,n){return t.useMemo(()=>w(e),[e,o.width,n])}(Z,e,J);t.useEffect(()=>{if(!J){return}if(!e.height){return void a.history.ignore(()=>{e.set({height:ot})})}const{textOverflow:t}=d;if("change-font-size"!==t||M){"resize"===t&&(N&&e.height<ot&&!M&&a.history.ignore(()=>{e.set({height:ot})}),N||e.height===ot||a.history.ignore(()=>{e.set({height:ot})}))}else{const t=(t=>{let e=t.fontSize;for(let o=1;o<50;o++){const o=P(Object.assign(Object.assign({},t.toJSON()),{fontSize:e}),{fontFamily:t.fontFamily}),{height:n}=w(o);if(!(t.height&&n>t.height||!d.textSplitAllowed&&!t.curveEnabled&&v({html:o}))){break}e-=.5}return e})(e);t!==e.fontSize?a.history.ignore(()=>{e.set({fontSize:t})}):e.height!==ot&&(N&&e.height<ot?a.history.ignore(()=>{e.set({height:ot})}):N||a.history.ignore(()=>{e.set({height:ot})}))}});const nt=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 y(e),t.lastArgs=Object.assign({},e)),t.lastResult;var o,n}},[]),it=t.useRef(0),rt=t.useRef(null);t.useEffect(()=>{M||G||(async()=>{it.current++;const t=it.current;let o=k(`text ${e.id} ${t}`);rt.current&&rt.current(),rt.current=o,D(!0);let n=null;const i=q?5:1;for(let l=0;l<i;l++){const o=l>0?nt:y;try{if(n=await o({skipCache:l>0,html:Z,width:e.width||1,height:e.height||ot||1,fontFamily:U,padding:_,pixelRatio:a._elementsPixelRatio,font:a.fonts.find(t=>t.fontFamily===U)||C.globalFonts.find(t=>t.fontFamily===U)}),t!==it.current){return}if(q&&I(n)){await new Promise(t=>setTimeout(t,50*(l+1)));continue}break}catch(r){console.error(r),z(`Error rendering rich text with id ${e.id}`);break}}n?F(n):o?(o(),o=null):console.error("Finish function is called twice!"),D(!1)})()},[Z,M,ot,G,U,e.height,a._elementsPixelRatio,J]);const[at,lt]=j(X,300),[st]=j(M,300,!0),ct=st||at;t.useEffect(()=>{var t;if(!ct){return s.autorun(()=>{const t=p.current;f(t,e)})}null===(t=p.current)||void 0===t||t.clearCache()},[b,ct,e.shadowColor,e.shadowOffsetX,e.shadowOffsetY,e.shadowOpacity]),t.useEffect(()=>{b&&!X&&rt.current&&(rt.current(),rt.current=null)},[b,X]),t.useLayoutEffect(()=>{if(!J){return}if(!e.curveEnabled){return}const t=new l.TextPath({data:m(e.a.width,e.a.height,e.curvePower,e.a.fontSize),text:O(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,i=-t/2*Math.cos(n),r=-t/2*Math.sin(n);e.set({width:o,x:e.a.x+i,y:e.a.y+r})}t.destroy()},[J,e.curveEnabled,e.curvePower,e.text,e.fontSize,e.fontFamily,e.fontWeight,e.fontStyle,e.letterSpacing]),t.useEffect(()=>()=>{rt.current&&rt.current()},[]),t.useEffect(()=>{H&&!W&&Q&&""===O(e.text)&&e.removable&&!e.placeholder&&a.deleteElements([e.id])},[Q,e.placeholder,e.removable,e.text,W,H]);let dt=0;"middle"===e.verticalAlign&&(dt=(e.height-ot)/2),"bottom"===e.verticalAlign&&(dt=e.height-ot);const ft=u({fontLoaded:J,fontFamily:e.fontFamily,fontSize:e.fontSize,lineHeight:e.lineHeight}),ut=R(),ht=m(e.a.width,ot,e.curvePower,e.fontSize),gt=t.useRef(null),mt=t.useRef(null),pt=G&&e.strokeWidth>0&&!e.curveEnabled;return t.createElement(t.Fragment,null,t.createElement(r,{x:e.a.x,y:e.a.y,offsetX:e.backgroundPadding*(e.fontSize*ft*.5),offsetY:e.backgroundPadding*(e.fontSize*ft*.5),rotation:e.a.rotation,hideInExport:!e.showInExport,listening:!1,visible:e.backgroundEnabled,opacity:e.backgroundOpacity*e.a.opacity,fill:e.backgroundColor,width:e.a.width+e.backgroundPadding*(e.fontSize*ft),height:e.a.height+e.backgroundPadding*(e.fontSize*ft),cornerRadius:e.backgroundCornerRadius*(e.fontSize*ft*.5)}),t.createElement(i,{x:e.a.x,y:e.a.y,rotation:e.a.rotation,data:ht,stroke:"red",strokeWidth:1,visible:!1}),t.createElement(r,{ref:p,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:!ct,draggable:ut?e.draggable&&W:e.draggable,preventDefault:!ut||W,opacity:G?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&&(mt.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];mt.current=n?{x:n.clientX,y:n.clientY}:null,e.toggleEditMode(!0)}},onTransformStart:t=>{Y(!0),B.current=e.height},onTransform:t=>{var o;const n=t.target,i=(null===(o=n.getStage())||void 0===o?void 0:o.findOne("Transformer")).getActiveAnchor(),r="middle-left"===i||"middle-right"===i,a="top-center"===i||"bottom-center"===i,l=n.scaleX();if(r){const t=n.scaleX(),o=n.width()*t,i=e.fontSize;let r=o;if(o<i&&(r=i,gt.current&&n.position(gt.current)),n.width(r),n.scaleX(1),d.textVerticalResizeEnabled){const t=Math.max(ot,B.current);e.set({height:t})}e.set({width:n.width(),x:n.x(),y:n.y()})}else if(a){const o="resize"===d.textOverflow,i="number"==typeof e.lineHeight?e.lineHeight:1;let r=o?ot:i*e.fontSize;const a=Math.max(r,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})}gt.current=t.target.position()},onTransformEnd:t=>{Y(!1),D(!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:p,image:b,x:e.a.x,y:e.a.y,offsetX:_,offsetY:_-dt,listening:!1,rotation:e.a.rotation,width:e.a.width+2*_,height:(e.a.width+2*_)*((null==b?void 0:b.height)/(null==b?void 0:b.width)||1),visible:!ct&&!G,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||M||ct}),(ct||pt)&&t.createElement(o,{x:e.a.x,y:e.a.y,rotation:e.a.rotation,offsetY:-dt},t.createElement(S,{divProps:{style:{pointerEvents:"none"}}},t.createElement(L,{dangerouslySetInnerHTML:{__html:Z},style:{pointerEvents:"none",opacity:e.a.opacity,textShadow:e.shadowEnabled?`${e.shadowOffsetX}px ${e.shadowOffsetY}px ${e.shadowBlur}px ${A(e.shadowColor,null!==(c=e.shadowOpacity)&&void 0!==c?c:1)}`:void 0}}))),G&&t.createElement(o,{x:e.a.x,y:e.a.y,rotation:e.a.rotation,offsetY:-dt},t.createElement(S,null,t.createElement($,{html:tt,element:e,onChange:t=>{const o=T({oldText:O(e.text),newText:O(t),element:e});e.set({text:t,fontSize:o})},onBlur:t=>{e.toggleEditMode(!1),lt(!0)},clickCoords:mt.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(i){}t.setSelection(0,0,"api")}
+`;let X=["bold","color","font","italic","size","strike","underline","indent","list","direction"];export const setQuillFormats=t=>{X=t};export const createQuill=t=>new a(t,{toolbar:!1,keyboard:!1,clipboard:{matchVisual:!1},formats:X});export const setQuillContent=(t,e)=>{var o=t.clipboard.convert("<div class='ql-editor' style='outline: none;'>"+e+"<p><br></p></div>");t.setContents(o),t.history.clear()};const $=({html:e,onBlur:o,onChange:n,element:i,clickCoords:r})=>{var l;const d=t.useRef(null);t.useEffect(()=>{if(!d.current){return}const t=(i=d.current,new a(i,{toolbar:!1,keyboard:!1,clipboard:{matchVisual:!1},formats:X}));var i;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 t;const e=null===(t=d.current)||void 0===t?void 0:t.childNodes[0];if(!e){return}const o=e.innerHTML;n(Y(o))},10)}),setQuillContent(t,e),r?setCursorFromCoords(t,r):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 l=d.current.childNodes[0],c=e=>{var o,n;const i=t.getSelection();if(!i||0===i.length){return}const r=t.getText(i.index,i.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",r),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()},f=e=>{c(e);const o=t.getSelection();o&&o.length>0&&t.deleteText(o.index,o.length)};return l.addEventListener("copy",c),l.addEventListener("cut",f),()=>{l.removeEventListener("copy",c),l.removeEventListener("cut",f),s.runInAction(()=>{quillRef.editor.instance=null,quillRef.currentFormat={}}),delete window.__polotnoQuill}},[]),t.useEffect(()=>c(()=>i.text,()=>{var t,o;const n=quillRef.editor.instance;if(!n){return}const r=n.getSelection(),a=null===(o=null===(t=d.current)||void 0===t?void 0:t.childNodes)||void 0===o?void 0:o[0];Y((null==a?void 0:a.innerHTML)||"")===i.text||(setQuillContent(n,e),r&&(n.setSelection(r.index,r.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:i.fill};i.fill.indexOf("gradient")>=0&&(f.backgroundColor=i.fill,f.backgroundImage=i.fill,f.backgroundSize="100% 100%",f.backgroundRepeat="repeat",f.webkitBackgroundClip="text",f.MozBackgroundClip="text",f.WebkitTextFillColor="transparent",f.MozTextFillColor="transparent");const u=M(i);return t.createElement(L,{ref:d,style:Object.assign(Object.assign({},f),{fontSize:i.fontSize,fontWeight:i.fontWeight,textTransform:i.textTransform,width:i.a.width,fontFamily:'"'+i.fontFamily+'"',lineHeight:i.lineHeight,letterSpacing:i.letterSpacing*i.fontSize+"px",textAlign:i.align,opacity:Math.max(i.a.opacity,.2),textShadow:i.shadowEnabled?`${i.shadowOffsetX}px ${i.shadowOffsetY}px ${i.shadowBlur}px ${A(i.shadowColor,null!==(l=i.shadowOpacity)&&void 0!==l?l:1)}`:void 0,caretColor:u}),dir:p(O(i.text))})};function I(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)}const q=/^((?!chrome|android).)*safari/i.test(navigator.userAgent);export const HTMLElement=e(({element:e,store:a})=>{var c,p;const b=t.useRef(null),[F,M]=t.useState(),[Y,X]=t.useState(!1),[D,B]=t.useState(!1),W=t.useRef(e.height),H=a.selectedShapes.indexOf(e)>=0&&e.selectable,_=g(H),N=e.fontSize/3,{textVerticalResizeEnabled:Q}=d,V=d.autoDeleteEmptyText,J=g(e.fontFamily),[G]=h(a,e.fontFamily),U=e._editModeEnabled;E(b);const K=G?e.fontFamily:J!==e.fontFamily?J:"Arial",Z=x(e).fill,tt=P(e,{fontFamily:K,color:Z}),et=P(e,{fontFamily:K,color:Z,forEditor:!0});let{width:ot,height:nt}=function(e,o,n){return t.useMemo(()=>w(e),[e,o.width,n])}(tt,e,G);t.useEffect(()=>{if(!G){return}if(!e.height){return void a.history.ignore(()=>{e.set({height:nt})})}const{textOverflow:t}=d;if("change-font-size"!==t||Y){"resize"===t&&(Q&&e.height<nt&&!Y&&a.history.ignore(()=>{e.set({height:nt})}),Q||e.height===nt||a.history.ignore(()=>{e.set({height:nt})}))}else{const t=(t=>{let e=t.fontSize;for(let o=1;o<50;o++){const o=P(Object.assign(Object.assign({},t.toJSON()),{fontSize:e}),{fontFamily:t.fontFamily}),{height:n}=w(o);if(!(t.height&&n>t.height||!d.textSplitAllowed&&!t.curveEnabled&&v({html:o}))){break}e-=.5}return e})(e);t!==e.fontSize?a.history.ignore(()=>{e.set({fontSize:t})}):e.height!==nt&&(Q&&e.height<nt?a.history.ignore(()=>{e.set({height:nt})}):Q||a.history.ignore(()=>{e.set({height:nt})}))}});const it=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 y(e),t.lastArgs=Object.assign({},e)),t.lastResult;var o,n}},[]),rt=t.useRef(0),at=t.useRef(null);t.useEffect(()=>{Y||U||(async()=>{rt.current++;const t=rt.current;let o=k(`text ${e.id} ${t}`);at.current&&at.current(),at.current=o,B(!0);let n=null;const i=q?5:1;for(let l=0;l<i;l++){const o=l>0?it:y;try{if(n=await o({skipCache:l>0,html:tt,width:e.width||1,height:e.height||nt||1,fontFamily:K,padding:N,pixelRatio:a._elementsPixelRatio,font:a.fonts.find(t=>t.fontFamily===K)||C.globalFonts.find(t=>t.fontFamily===K)}),t!==rt.current){return}if(q&&n&&I(n)){await new Promise(t=>setTimeout(t,50*(l+1)));continue}break}catch(r){console.error(r),z(`Error rendering rich text with id ${e.id}`);break}}n?M(n):o?(o(),o=null):console.error("Finish function is called twice!"),B(!1)})()},[tt,Y,nt,U,K,e.height,a._elementsPixelRatio,G]);const[lt,st]=j(D,300),[ct]=j(Y,300,!0),dt=ct||lt;t.useEffect(()=>{var t;if(!dt){return s.autorun(()=>{const t=b.current;f(t,e)})}null===(t=b.current)||void 0===t||t.clearCache()},[F,dt,e.shadowColor,e.shadowOffsetX,e.shadowOffsetY,e.shadowOpacity]),t.useEffect(()=>{F&&!D&&at.current&&(at.current(),at.current=null)},[F,D]),t.useLayoutEffect(()=>{if(!G){return}if(!e.curveEnabled){return}const t=new l.TextPath({data:m(e.a.width,e.a.height,e.curvePower,e.a.fontSize),text:O(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,i=-t/2*Math.cos(n),r=-t/2*Math.sin(n);e.set({width:o,x:e.a.x+i,y:e.a.y+r})}t.destroy()},[G,e.curveEnabled,e.curvePower,e.text,e.fontSize,e.fontFamily,e.fontWeight,e.fontStyle,e.letterSpacing]),t.useEffect(()=>()=>{at.current&&at.current()},[]),t.useEffect(()=>{_&&!H&&V&&""===O(e.text)&&e.removable&&!e.placeholder&&a.deleteElements([e.id])},[V,e.placeholder,e.removable,e.text,H,_]);let ft=0;"middle"===e.verticalAlign&&(ft=(e.height-nt)/2),"bottom"===e.verticalAlign&&(ft=e.height-nt);const ut=u({fontLoaded:G,fontFamily:e.fontFamily,fontSize:e.fontSize,lineHeight:e.lineHeight}),ht=R(),gt=m(e.a.width,nt,e.curvePower,e.fontSize),mt=t.useRef(null),pt=t.useRef(null),xt=U&&e.strokeWidth>0&&!e.curveEnabled;return t.createElement(t.Fragment,null,t.createElement(r,{x:e.a.x,y:e.a.y,offsetX:e.backgroundPadding*(e.fontSize*ut*.5),offsetY:e.backgroundPadding*(e.fontSize*ut*.5),rotation:e.a.rotation,hideInExport:!e.showInExport,listening:!1,visible:e.backgroundEnabled,opacity:e.backgroundOpacity*e.a.opacity,fill:e.backgroundColor,width:e.a.width+e.backgroundPadding*(e.fontSize*ut),height:e.a.height+e.backgroundPadding*(e.fontSize*ut),cornerRadius:e.backgroundCornerRadius*(e.fontSize*ut*.5)}),t.createElement(i,{x:e.a.x,y:e.a.y,rotation:e.a.rotation,data:gt,stroke:"red",strokeWidth:1,visible:!1}),t.createElement(r,{ref:b,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:!dt,draggable:ht?e.draggable&&H:e.draggable,preventDefault:!ht||H,opacity:U?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&&(pt.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];pt.current=n?{x:n.clientX,y:n.clientY}:null,e.toggleEditMode(!0)}},onTransformStart:t=>{X(!0),W.current=e.height},onTransform:t=>{var o;const n=t.target,i=(null===(o=n.getStage())||void 0===o?void 0:o.findOne("Transformer")).getActiveAnchor(),r="middle-left"===i||"middle-right"===i,a="top-center"===i||"bottom-center"===i,l=n.scaleX();if(r){const t=n.scaleX(),o=n.width()*t,i=e.fontSize;let r=o;if(o<i&&(r=i,mt.current&&n.position(mt.current)),n.width(r),n.scaleX(1),d.textVerticalResizeEnabled){const t=Math.max(nt,W.current);e.set({height:t})}e.set({width:n.width(),x:n.x(),y:n.y()})}else if(a){const o="resize"===d.textOverflow,i="number"==typeof e.lineHeight?e.lineHeight:1;let r=o?nt:i*e.fontSize;const a=Math.max(r,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})}mt.current=t.target.position()},onTransformEnd:t=>{X(!1),B(!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:b,image:F,x:e.a.x,y:e.a.y,offsetX:N,offsetY:N-ft,listening:!1,rotation:e.a.rotation,width:e.a.width+2*N,height:(e.a.width+2*N)*((null!==(c=null==F?void 0:F.height)&&void 0!==c?c:0)/((null==F?void 0:F.width)||1)||1),visible:!dt&&!U,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||Y||dt}),(dt||xt)&&t.createElement(o,{x:e.a.x,y:e.a.y,rotation:e.a.rotation,offsetY:-ft},t.createElement(S,{divProps:{style:{pointerEvents:"none"}}},t.createElement(L,{dangerouslySetInnerHTML:{__html:tt},style:{pointerEvents:"none",opacity:e.a.opacity,textShadow:e.shadowEnabled?`${e.shadowOffsetX}px ${e.shadowOffsetY}px ${e.shadowBlur}px ${A(e.shadowColor,null!==(p=e.shadowOpacity)&&void 0!==p?p:1)}`:void 0}}))),U&&t.createElement(o,{x:e.a.x,y:e.a.y,rotation:e.a.rotation,offsetY:-ft},t.createElement(S,null,t.createElement($,{html:et,element:e,onChange:t=>{const o=T({oldText:O(e.text),newText:O(t),element:e});e.set({text:t,fontSize:o})},onBlur:t=>{e.toggleEditMode(!1),st(!0)},clickCoords:pt.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(i){}t.setSelection(0,0,"api")}

package/canvas/image-element.d.ts

@@ -11,9 +11,13 @@ export declare const useCornerRadiusAndCrop: (element: ImageElementType, image:
     width: number;
     height: number;
 }, pixelRatio: number, cornerRadius?: number, skipDownscale?: boolean, isVector?: boolean) => HTMLCanvasElement | HTMLImageElement | undefined;
+type ImageOrSVGElementType = ImageElementType & {
+    maskSrc?: string;
+    colorsReplace?: Map<string, string>;
+};
 type ImageProps = {
     store: StoreType;
-    element: ImageElementType;
+    element: ImageOrSVGElementType;
 };
 export declare const setImageLoaderHook: (customImageLoaderHook: any) => void;
 export declare const useImageLoader: (status: string, src?: string, id?: string) => void;

package/canvas/image-element.js

@@ -1 +1 @@
-import t from"react";import{observer as e}from"mobx-react-lite";import{autorun as r}from"mobx";import{Arc as a,Group as o,Image as i,Rect as n,Text as h,Transformer as c}from"react-konva";import s from"use-image";import d from"konva";import{Portal as g}from"react-konva-utils";import{incrementLoader as l,triggerLoadError as u}from"../utils/loader.js";import*as m from"../utils/svg.js";import{flags as p}from"../utils/flags.js";import{trySetCanvasSize as f}from"../utils/canvas.js";import{applyFilter as w}from"./apply-filters.js";import{useFadeIn as x}from"./use-fadein.js";import{isTouchDevice as y}from"../utils/screen.js";import{useDelayer as M}from"./use-delayer.js";import{useColor as v}from"./use-color.js";function b(){return document.createElement("canvas")}const E=t=>t.indexOf("data:image/svg+xml")>=0||t.indexOf(".svg")>=0;export const useSizeFixer=e=>{const[r,a]=t.useState(e);return t.useEffect(()=>{(async()=>{const t=await async function(t){if(!E(t)){return t}const e=await m.urlToString(t),r=m.fixSize(e);return m.svgToURL(r)}(e);t!==r&&a(t)})()},[e]),r};function S(t,e){return{x:(t.x+e.x)/2,y:(t.y+e.y)/2}}const R={boundBoxFunc:(t,e)=>e.width<5||e.height<5?t:e,enabledAnchors:["top-left","top-right","bottom-left","bottom-right"],keepRatio:!1,rotateEnabled:!1,anchorFill:"rgb(240, 240, 240)",anchorStrokeWidth:2,borderStrokeWidth:2};export const setInnerImageCropTransformerStyle=t=>{Object.assign(R,t)};const C={boundBoxFunc:(t,e)=>e.width<5||e.height<5?t:e,anchorSize:20,enabledAnchors:["top-left","top-right","bottom-left","bottom-right"],rotateEnabled:!1,borderEnabled:!1,anchorCornerRadius:10,anchorStrokeWidth:2,borderStrokeWidth:2};export const setOuterImageCropTransformerStyle=t=>{Object.assign(C,t)};const I=(t,e,r)=>Math.max(e,Math.min(r,t));export const useCornerRadiusAndCrop=(e,r,a,o,i=0,n=!1,h=!0)=>{const c=Math.floor(I(e.a.width*o,1,1e4)),s=Math.floor(I(e.a.height*o,1,1e4)),g=Math.min(i*o,c/2,s/2),l=Math.max(e.a.width/a.width,e.a.height/a.height)*o,u=e.page._exportingOrRendering&&p.imageDownScalingEnabled&&l<1&&!n,m=0===a.x&&0===a.y&&a.width===(null==r?void 0:r.width)&&a.height===(null==r?void 0:r.height),w=t.useMemo(()=>{if(r&&r.width&&r.height){return m&&0===g&&!u?void 0:b()}},[r,g,u,m]);return t.useLayoutEffect(()=>{if(!w||!r){return}f(w,c,s);const t=w.getContext("2d");if(!t){return}g&&(t.beginPath(),t.moveTo(g,0),t.lineTo(c-g,0),t.arc(c-g,g,g,3*Math.PI/2,0,!1),t.lineTo(c,s-g),t.arc(c-g,s-g,g,0,Math.PI/2,!1),t.lineTo(g,s),t.arc(g,s-g,g,Math.PI/2,Math.PI,!1),t.lineTo(0,g),t.arc(g,g,g,Math.PI,3*Math.PI/2,!1),t.clip());const e=u?function(t,e){var r,a;const o=b();o.width=t.width,o.height=t.height;const i=Math.max(1,Math.floor(o.width*e)),n=Math.max(1,Math.floor(o.height*e));null===(r=o.getContext("2d"))||void 0===r||r.drawImage(t,0,0,o.width,o.height);const h=function(t,e,r,a,o,i,n){for(var h=new ImageData(e,r),c=new Int32Array(t.data.buffer),s=t.width,d=new Int32Array(h.data.buffer),g=h.width,l=e/i,u=r/n,m=Math.round(1/l),p=Math.round(1/u),f=m*p,w=0;w<h.height;w++){for(var x=0;x<g;x++){for(var y=0+Math.round(x/l)+(0+Math.round(w/u))*s,M=0,v=0,b=0,E=0,S=0;S<p;S++){for(var R=0;R<m;R++){var C=c[y+R+S*s];M+=C<<24>>>24,v+=C<<16>>>24,b+=C<<8>>>24,E+=C>>>24}}M=Math.round(M/f),v=Math.round(v/f),b=Math.round(b/f),E=Math.round(E/f),d[x+w*g]=E<<24|b<<16|v<<8|M}}return h}(o.getContext("2d").getImageData(0,0,o.width,o.height),i,n,0,0,o.width,o.height);return o.width=i,o.height=n,null===(a=o.getContext("2d"))||void 0===a||a.putImageData(h,0,0),o}(r,l):r,o=u?{x:Math.floor(a.x*l),y:Math.floor(a.y*l),width:Math.floor(a.width*l),height:Math.floor(a.height*l)}:a;t.drawImage(e,o.x,o.y,o.width,o.height,0,0,w.width,w.height)},[w,e.a.width,e.a.height,a.x,a.y,a.width,a.height,i,o,n,e.page._exportingOrRendering,u]),t.useEffect(()=>()=>{w&&"CANVAS"===w.nodeName&&d.Util.releaseCanvas(w)},[w]),w||r};const O=b(),X=e(({element:e})=>{const r=Math.min(30,e.a.width/4,e.a.height/4),i=t.useRef(null);return t.useEffect(()=>{const t=i.current;if(!t){return}const e=new d.Animation(e=>{t.rotate(((null==e?void 0:e.timeDiff)||0)/2)},t.getLayer());return e.start(),()=>{e.stop()}}),t.createElement(o,{x:e.x,y:e.y,rotation:e.rotation,listening:!1,opacity:e.a.opacity,hideInExport:!e.showInExport},t.createElement(n,{width:e.a.width,height:e.a.height,fill:"rgba(124, 173, 212, 0.8)"}),t.createElement(a,{ref:i,x:e.a.width/2,y:e.a.height/2,fill:"white",outerRadius:Math.abs(r),innerRadius:Math.max(1,r-5),angle:270}))}),Y=e(({element:e})=>{const r=Math.max(10,Math.min(30,e.a.width/25));return t.createElement(o,{x:e.x,y:e.y,rotation:e.rotation,listening:!1,opacity:e.a.opacity,hideInExport:!e.showInExport},t.createElement(n,{width:e.a.width,height:e.a.height,fill:"rgba(223, 102, 102, 0.8)"}),t.createElement(h,{text:"Can not load the image...",fontSize:r,width:e.a.width,height:e.a.height,align:"center",fill:"white",verticalAlign:"middle",padding:5}))});let T=s;export const setImageLoaderHook=t=>{T=t};export const useImageLoader=(e,r="",a="")=>{const o=t.useRef(),i=()=>{var t;null===(t=o.current)||void 0===t||t.call(o),o.current=void 0};t.useEffect(()=>i,[]),t.useLayoutEffect(()=>{const t=r.slice(0,200),n=`image with id ${a} url: ${t}`;"loading"!==e||o.current||(o.current=l(n)),"loading"!==e&&i(),"failed"===e&&u(n)},[e])};export const ImageElement=e(({element:e,store:a})=>{var h;const[s,l]=t.useState(!1),u=t.useRef(null),p=t.useRef(null),I=a.selectedShapes.indexOf(e)>=0&&e.selectable,[W,k]=(e=>{const[r,a]=t.useReducer(t=>t+1,0),o=t.useRef("loading"),i=t.useRef(e.src),n=t.useRef(e.src);n.current!==e.src&&(n.current=e.src,o.current="loading");const h=t.useMemo(()=>E(e.src)||"svg"===e.type,[e.src,e.type]);return t.useEffect(()=>{if(!h){return}if(!e.src){return}let t=!1;return(async()=>{o.current="loading",a();const r=await m.urlToString(e.src),n=m.fixSize(r);let h;h=e.colorsReplace?m.replaceColors(n,e.colorsReplace||new Map):m.svgToURL(n),t||(i.current=h,o.current="loaded",a())})(),()=>{t=!0}},[e.src,JSON.stringify(e.colorsReplace)]),h?[i.current,o.current]:[e.src,"loaded"]})(e),[A,D]=T(W,"anonymous"),_="svg"!==e.type||"loaded"===k?D:"loading";useImageLoader(_,e.src,e.id);const L=e.page._exportingOrRendering?1:Math.max(1,a.scale),z=a._elementsPixelRatio*L,H=(({image:e,status:r,type:a})=>{const o=t.useRef();return t.useEffect(()=>{o.current=e||o.current},[e]),"failed"!==r||"failed"!==r&&"svg"===a?o.current:void 0})({image:A,status:D,type:e.type}),j=((e,r,a)=>{const o=t.useMemo(()=>{var t,o;const{flipX:i,flipY:n}=e,h="svg"===e.type||e.src.indexOf("data:image/svg+xml")>=0||e.src.indexOf(".svg")>=0,c=navigator.userAgent.toLowerCase().indexOf("firefox")>-1,s=(/^((?!chrome|android).)*safari/i.test(navigator.userAgent)||c)&&h||e.maskSrc;if(!i&&!n&&!s){return r}if(!r||!r.width||!r.height){return null}const d=b();let g=1;"svg"===e.type&&(g=Math.max(e.a.width/r.width*a,e.a.height/r.height*a)),f(d,Math.max(r.width*g,1),Math.max(r.height*g,1));let l=i?-d.width:0,u=n?-d.height:0;return null===(t=d.getContext("2d"))||void 0===t||t.scale(i?-1:1,n?-1:1),null===(o=d.getContext("2d"))||void 0===o||o.drawImage(r,l,u,d.width,d.height),d},[e.maskSrc,e.flipX,e.flipY,r,e.a.width,e.a.height,a]);return t.useEffect(()=>()=>{o&&"CANVAS"===o.nodeName&&d.Util.releaseCanvas(o)},[o]),o})(e,A||H,z),P=((e,r)=>{const a=useSizeFixer(e.maskSrc||""),[o,i]=T(a,"anonymous");return useImageLoader(a?i:"loaded",a||"",e.id),t.useMemo(()=>{if(!o){return r}if(!r||!r.width||!r.height){return r}const t=b();t.width=Math.max(r.width,1),t.height=Math.max(r.height,1);const a=t.getContext("2d");if(!a){return r}a.drawImage(r,0,0),a.globalCompositeOperation="source-in";const i=function(t,e){const r=e.width/e.height;let a,o;return r>=t.width/t.height?(a=t.width,o=t.width/r):(a=t.height*r,o=t.height),{x:(t.width-a)/2,y:(t.height-o)/2,width:a,height:o}}(o,e);return a.drawImage(o,i.x,i.y,i.width,i.height,0,0,r.width,r.height),t},[r,o,e.a.width,e.a.height])})(e,j)||O;let{cropX:B,cropY:F,cropWidth:N,cropHeight:U}=e.a;"loaded"!==D&&(B=F=0,N=U=1);const V=P.width*N,$=P.height*U,q=e.a.width/e.a.height;let J,G;const K=V/$,Q=e.stretchEnabled;Q?(J=V,G=$):q>=K?(J=V,G=V/q):(J=$*q,G=$);const Z={x:P.width*B,y:P.height*F,width:J,height:G},tt=null!==(h=e.cornerRadius)&&void 0!==h?h:0,et=e.page._exportingOrRendering?1:Math.min(2,a.scale),rt=a._elementsPixelRatio*et;let at=((e,r,a,o)=>{const i=useSizeFixer(e.clipSrc||""),[n,h]=T(i,"anonymous"),c=e.clipSrc?h:"loaded";useImageLoader(c,e.clipSrc,e.id);const s=t.useMemo(()=>{if(r&&n){return b()}},[r,n]);return t.useLayoutEffect(()=>{var t;if(!n){return}if(!r||!r.width||!r.height){return}if(!n||!n.width||!n.height){return}if(!s){return}const o=b(),i=Math.max(e.a.width/n.width*a,e.a.height/n.height*a);o.width=Math.max(n.width*i,1),o.height=Math.max(n.height*i,1),null===(t=o.getContext("2d"))||void 0===t||t.drawImage(n,0,0,o.width,o.height),s.width=Math.max(r.width,1),s.height=Math.max(r.height,1);const h=s.getContext("2d");h&&(h.save(),h.drawImage(o,0,0,r.width,r.height),d.Util.releaseCanvas(o),h.globalCompositeOperation="source-in",h.drawImage(r,0,0,s.width,s.height),h.restore())},[s,r,n,e.a.width,e.a.height,a,...o]),e.clipSrc&&n?s:r})(e,useCornerRadiusAndCrop(e,P,Z,rt,tt,s||e._cropModeEnabled||"svg"===e.type,!0),rt,[Z,tt,rt]);const ot=Math.max(e.a.width/J,e.a.height/G);t.useEffect(()=>{var t;if(!e._cropModeEnabled){return}const r=null===(t=u.current)||void 0===t?void 0:t.getStage();function a(t){e._cropModeEnabled&&t.target!==p.current&&e.toggleCropMode(!1)}function o(t){e._cropModeEnabled&&t.target.parentNode!==r.content&&e.toggleCropMode(!1)}return document.body.addEventListener("click",o),null==r||r.on("click",a),null==r||r.on("tap",a),()=>{document.body.removeEventListener("click",o),document.body.removeEventListener("touchstart",o),null==r||r.off("click",a),null==r||r.off("click",a)}},[e._cropModeEnabled]),t.useLayoutEffect(()=>{if(!s&&!e._cropModeEnabled){return w(u.current,e),r(()=>{w(u.current,e)},{delay:100})}},[at,e.page._exportingOrRendering,s,N,U,e._cropModeEnabled]),t.useLayoutEffect(()=>{var t;s||e._cropModeEnabled?null===(t=u.current)||void 0===t||t.clearCache():w(u.current,e)},[s,e.a.width,e.a.height,e._cropModeEnabled]),t.useEffect(()=>{w(u.current,e)},[e.shadowEnabled,e.shadowBlur,e.cornerRadius,e.shadowColor,e.shadowOffsetX,e.shadowOffsetY,e.shadowOpacity]);const it=t.useRef(null),nt=t.useRef(null),ht=t.useRef(null);t.useLayoutEffect(()=>{e._cropModeEnabled&&(nt.current.nodes([it.current]),ht.current.nodes([p.current]))},[e._cropModeEnabled]);var ct=t.useRef(null),st=t.useRef(0),dt=t.useRef(!1);const gt=t=>{var r;(null===(r=t.evt.touches)||void 0===r?void 0:r.length)>2&&t.target.stopDrag(),Math.round(t.target.x())>0&&(t.target.x(0),t.target.scaleX(1)),Math.round(t.target.y())>0&&(t.target.y(0),t.target.scaleY(1));const a=t.target.width()*t.target.scaleX(),o=t.target.height()*t.target.scaleY(),i=Math.min(1,J/a),n=Math.min(1,G/o),h=1-i,c=Math.min(h,Math.max(0,Math.round(-t.target.x())/a)),s=1-n,d=Math.min(s,Math.max(0,Math.round(-t.target.y())/o));t.target.setAttrs({x:-c*P.width,y:-d*P.height,scaleX:1,scaleY:1}),e.set({cropX:c,cropY:d,cropWidth:i,cropHeight:n})},lt=()=>{"svg"!==e.type&&e.contentEditable&&(e.stretchEnabled||setTimeout(()=>{e.toggleCropMode(!0)}))},ut="svg"===e.type&&H,mt="loading"===D&&!ut,[pt]=M(mt,100,!1,!1),ft="failed"===D,wt=!pt&&!ft,xt=t.useRef({cropX:0,cropY:0,cropWidth:0,cropHeight:0}),yt=wt?e.a.opacity:0;x(u,yt);const Mt=e.selectable||"admin"===a.role,vt=y(),bt=v(e,e.borderColor,"stroke");return t.createElement(t.Fragment,null,pt&&t.createElement(X,{element:e}),ft&&t.createElement(Y,{element:e}),t.createElement(i,{ref:u,name:"element",id:e.id,image:at,x:e.a.x,y:e.a.y,width:e.a.width||1,height:e.a.height||1,rotation:e.a.rotation,opacity:yt,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,customCrop:Z,listening:Mt,draggable:vt?e.draggable&&I:e.draggable,preventDefault:!vt||I,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()})},onDblClick:lt,onDblTap:lt,onTransformStart:()=>{l(!0),xt.current={cropX:e.cropX,cropY:e.cropY,cropWidth:e.cropWidth,cropHeight:e.cropHeight}},onTransform:t=>{var r;const a=t.currentTarget,o=Math.abs(a.scaleX()-1)<1e-7?1:a.scaleX(),i=Math.abs(a.scaleY()-1)<1e-7?1:a.scaleY();a.scaleX(1),a.scaleY(1);const n=null===(r=t.target.getStage())||void 0===r?void 0:r.findOne("Transformer"),h=1-J/P.width,c=Math.min(h,Math.max(0,e.cropX)),s=1-G/P.height,d=Math.min(s,Math.max(0,e.cropY)),g=n.getActiveAnchor(),l=!(g.indexOf("middle")>=0||g.indexOf("center")>=0),u=!l&&o<1&&xt.current.cropHeight>G/P.height;let m=l?e.cropWidth:e.cropWidth*o;u&&(m=e.cropWidth);const p=!l&&i<1&&xt.current.cropWidth>J/P.width;let f=l?e.cropHeight:e.cropHeight*i;p&&(f=e.cropHeight),Q&&(m=e.cropWidth,f=e.cropHeight),e.set({cropX:c,cropY:d,x:a.x(),y:a.y(),width:a.width()*o,height:a.height()*i,rotation:t.target.rotation(),cropWidth:Math.min(m,1-c),cropHeight:Math.min(f,1-d)})},onTransformEnd:t=>{const r=t.currentTarget;e.set({width:r.width(),height:r.height(),x:r.x(),y:r.y(),rotation:t.target.rotation(),cropWidth:J/P.width,cropHeight:G/P.height}),l(!1)}}),t.createElement(n,Object.assign({x:e.x,y:e.y,width:Math.max(e.a.width-e.borderSize,0),height:Math.max(e.a.height-e.borderSize,0),opacity:yt,offsetX:-e.borderSize/2,offsetY:-e.borderSize/2},bt,{strokeWidth:e.borderSize,listening:!1,visible:!!e.borderSize,rotation:e.rotation,cornerRadius:Math.max(0,tt-e.borderSize),hideInExport:!e.showInExport})),e._cropModeEnabled&&t.createElement(g,{selector:".page-abs-container",enabled:!0},t.createElement(n,{x:-window.innerWidth/a.scale,y:-window.innerWidth/a.scale,width:window.innerWidth/a.scale*3,height:window.innerWidth/a.scale*3,fill:"rgba(0,0,0,0.3)"}),t.createElement(i,{listening:!1,image:at,x:e.x,y:e.y,width:e.a.width,height:e.a.height,rotation:e.rotation,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur}),t.createElement(o,{x:e.x,y:e.y,rotation:e.rotation,scaleX:ot,scaleY:ot},t.createElement(i,{image:P,ref:p,opacity:.4,draggable:!0,x:-e.cropX*P.width,y:-e.cropY*P.height,onDragMove:gt,onTransform:gt,onTouchMove:t=>{t.evt.preventDefault();const e=t.target.getStage().getPointersPositions();var r=e[0],a=e[1];const o=t.target;if(r&&!a&&!o.isDragging()&&dt.current&&(o.startDrag(),dt.current=!1),r&&a){d.hitOnDragEnabled=!0,o.isDragging()&&(dt.current=!0,o.stopDrag());const e=t.target.getAbsoluteTransform().copy();e.invert();var i={x:r.x,y:r.y},n={x:a.x,y:a.y};if(!ct.current){return void(ct.current=S(i,n))}var h=S(i,n),c=function(t,e){return Math.sqrt(Math.pow(e.x-t.x,2)+Math.pow(e.y-t.y,2))}(i,n);st.current||(st.current=c);const p=o.position();var s={x:h.x-p.x,y:h.y-p.y},g=c/st.current;o.scaleX(g),o.scaleY(g);const f=e.point(h),w=e.point(ct.current);var l=f.x-w.x,u=f.y-w.y,m={x:Math.min(0,h.x-s.x*g+l),y:Math.min(0,h.y-s.y*g+u)};o.position(m),st.current=c,ct.current=h,gt(t)}},onTouchEnd:t=>{st.current=0,ct.current=null,d.hitOnDragEnabled=!1}}),t.createElement(c,Object.assign({ref:ht},C)),t.createElement(n,{width:J,height:G,ref:it,listening:!1,onTransform:t=>{if(e.cropX<Math.abs(t.target.x()/P.width)&&t.target.x()<0&&e.cropX>0){const r=(e.cropWidth+e.cropX)*P.width;t.target.scaleX(1),t.target.width(r)}if(e.cropY<Math.abs(t.target.y()/P.height)&&t.target.y()<0&&e.cropY>0){const r=(e.cropHeight+e.cropY)*P.height;t.target.scaleY(1),t.target.height(r)}t.target.x()<-e.cropX*P.width-1e-9&&(t.target.x(-e.cropX*P.width),t.target.scaleX(1)),t.target.y()<-e.cropY*P.height-1e-9&&(t.target.y(-e.cropY*P.height),t.target.scaleY(1));const r=Math.min(1,Math.max(0,e.cropX+t.target.x()/P.width)),a=Math.min(1,Math.max(0,t.target.y()/P.height+e.cropY)),o=t.target.width()*t.target.scaleX(),i=t.target.height()*t.target.scaleY(),n=Math.min(1-r,o/P.width),h=Math.min(1-a,i/P.height),c=t.target.getAbsolutePosition(t.target.getParent().getParent());t.target.scale({x:1,y:1}),t.target.position({x:0,y:0}),e.set({x:c.x,y:c.y,cropX:r,cropY:a,cropWidth:n,cropHeight:h,width:Math.min(o*ot,P.width*(1-r)*ot),height:Math.min(i*ot,P.height*(1-a)*ot)})}}),t.createElement(c,Object.assign({ref:nt},R,{visible:e.resizable})))))});
+import t from"react";import{observer as e}from"mobx-react-lite";import{autorun as r}from"mobx";import{Arc as a,Group as o,Image as i,Rect as n,Text as h,Transformer as c}from"react-konva";import s from"use-image";import d from"konva";import{Portal as g}from"react-konva-utils";import{incrementLoader as l,triggerLoadError as u}from"../utils/loader.js";import*as m from"../utils/svg.js";import{flags as p}from"../utils/flags.js";import{trySetCanvasSize as f}from"../utils/canvas.js";import{applyFilter as w}from"./apply-filters.js";import{useFadeIn as x}from"./use-fadein.js";import{isTouchDevice as y}from"../utils/screen.js";import{useDelayer as M}from"./use-delayer.js";import{useColor as v}from"./use-color.js";function b(){return document.createElement("canvas")}const E=t=>t.indexOf("data:image/svg+xml")>=0||t.indexOf(".svg")>=0;export const useSizeFixer=e=>{const[r,a]=t.useState(e);return t.useEffect(()=>{(async()=>{const t=await async function(t){if(!E(t)){return t}const e=await m.urlToString(t),r=m.fixSize(e);return m.svgToURL(r)}(e);t!==r&&a(t)})()},[e]),r};function S(t,e){return{x:(t.x+e.x)/2,y:(t.y+e.y)/2}}const R={boundBoxFunc:(t,e)=>e.width<5||e.height<5?t:e,enabledAnchors:["top-left","top-right","bottom-left","bottom-right"],keepRatio:!1,rotateEnabled:!1,anchorFill:"rgb(240, 240, 240)",anchorStrokeWidth:2,borderStrokeWidth:2};export const setInnerImageCropTransformerStyle=t=>{Object.assign(R,t)};const C={boundBoxFunc:(t,e)=>e.width<5||e.height<5?t:e,anchorSize:20,enabledAnchors:["top-left","top-right","bottom-left","bottom-right"],rotateEnabled:!1,borderEnabled:!1,anchorCornerRadius:10,anchorStrokeWidth:2,borderStrokeWidth:2};export const setOuterImageCropTransformerStyle=t=>{Object.assign(C,t)};const I=(t,e,r)=>Math.max(e,Math.min(r,t));export const useCornerRadiusAndCrop=(e,r,a,o,i=0,n=!1,h=!0)=>{const c=Math.floor(I(e.a.width*o,1,1e4)),s=Math.floor(I(e.a.height*o,1,1e4)),g=Math.min(i*o,c/2,s/2),l=Math.max(e.a.width/a.width,e.a.height/a.height)*o,u=e.page._exportingOrRendering&&p.imageDownScalingEnabled&&l<1&&!n,m=0===a.x&&0===a.y&&a.width===(null==r?void 0:r.width)&&a.height===(null==r?void 0:r.height),w=t.useMemo(()=>{if(r&&r.width&&r.height){return m&&0===g&&!u?void 0:b()}},[r,g,u,m]);return t.useLayoutEffect(()=>{if(!w||!r){return}f(w,c,s);const t=w.getContext("2d");if(!t){return}g&&(t.beginPath(),t.moveTo(g,0),t.lineTo(c-g,0),t.arc(c-g,g,g,3*Math.PI/2,0,!1),t.lineTo(c,s-g),t.arc(c-g,s-g,g,0,Math.PI/2,!1),t.lineTo(g,s),t.arc(g,s-g,g,Math.PI/2,Math.PI,!1),t.lineTo(0,g),t.arc(g,g,g,Math.PI,3*Math.PI/2,!1),t.clip());const e=u?function(t,e){var r,a;const o=b();o.width=t.width,o.height=t.height;const i=Math.max(1,Math.floor(o.width*e)),n=Math.max(1,Math.floor(o.height*e));null===(r=o.getContext("2d"))||void 0===r||r.drawImage(t,0,0,o.width,o.height);const h=function(t,e,r,a,o,i,n){for(var h=new ImageData(e,r),c=new Int32Array(t.data.buffer),s=t.width,d=new Int32Array(h.data.buffer),g=h.width,l=e/i,u=r/n,m=Math.round(1/l),p=Math.round(1/u),f=m*p,w=0;w<h.height;w++){for(var x=0;x<g;x++){for(var y=0+Math.round(x/l)+(0+Math.round(w/u))*s,M=0,v=0,b=0,E=0,S=0;S<p;S++){for(var R=0;R<m;R++){var C=c[y+R+S*s];M+=C<<24>>>24,v+=C<<16>>>24,b+=C<<8>>>24,E+=C>>>24}}M=Math.round(M/f),v=Math.round(v/f),b=Math.round(b/f),E=Math.round(E/f),d[x+w*g]=E<<24|b<<16|v<<8|M}}return h}(o.getContext("2d").getImageData(0,0,o.width,o.height),i,n,0,0,o.width,o.height);return o.width=i,o.height=n,null===(a=o.getContext("2d"))||void 0===a||a.putImageData(h,0,0),o}(r,l):r,o=u?{x:Math.floor(a.x*l),y:Math.floor(a.y*l),width:Math.floor(a.width*l),height:Math.floor(a.height*l)}:a;t.drawImage(e,o.x,o.y,o.width,o.height,0,0,w.width,w.height)},[w,e.a.width,e.a.height,a.x,a.y,a.width,a.height,i,o,n,e.page._exportingOrRendering,u]),t.useEffect(()=>()=>{w&&"CANVAS"===w.nodeName&&d.Util.releaseCanvas(w)},[w]),w||r};const O=b(),X=e(({element:e})=>{const r=Math.min(30,e.a.width/4,e.a.height/4),i=t.useRef(null);return t.useEffect(()=>{const t=i.current;if(!t){return}const e=new d.Animation(e=>{t.rotate(((null==e?void 0:e.timeDiff)||0)/2)},t.getLayer());return e.start(),()=>{e.stop()}}),t.createElement(o,{x:e.x,y:e.y,rotation:e.rotation,listening:!1,opacity:e.a.opacity,hideInExport:!e.showInExport},t.createElement(n,{width:e.a.width,height:e.a.height,fill:"rgba(124, 173, 212, 0.8)"}),t.createElement(a,{ref:i,x:e.a.width/2,y:e.a.height/2,fill:"white",outerRadius:Math.abs(r),innerRadius:Math.max(1,r-5),angle:270}))}),Y=e(({element:e})=>{const r=Math.max(10,Math.min(30,e.a.width/25));return t.createElement(o,{x:e.x,y:e.y,rotation:e.rotation,listening:!1,opacity:e.a.opacity,hideInExport:!e.showInExport},t.createElement(n,{width:e.a.width,height:e.a.height,fill:"rgba(223, 102, 102, 0.8)"}),t.createElement(h,{text:"Can not load the image...",fontSize:r,width:e.a.width,height:e.a.height,align:"center",fill:"white",verticalAlign:"middle",padding:5}))});let T=s;export const setImageLoaderHook=t=>{T=t};export const useImageLoader=(e,r="",a="")=>{const o=t.useRef(),i=()=>{var t;null===(t=o.current)||void 0===t||t.call(o),o.current=void 0};t.useEffect(()=>i,[]),t.useLayoutEffect(()=>{const t=r.slice(0,200),n=`image with id ${a} url: ${t}`;"loading"!==e||o.current||(o.current=l(n)),"loading"!==e&&i(),"failed"===e&&u(n)},[e])};export const ImageElement=e(({element:e,store:a})=>{var h;const[s,l]=t.useState(!1),u=t.useRef(null),p=t.useRef(null),I=a.selectedShapes.indexOf(e)>=0&&e.selectable,[W,k]=(e=>{const[r,a]=t.useReducer(t=>t+1,0),o=t.useRef("loading"),i=t.useRef(e.src),n=t.useRef(e.src);n.current!==e.src&&(n.current=e.src,o.current="loading");const h=t.useMemo(()=>E(e.src)||"svg"===e.type,[e.src,e.type]);return t.useEffect(()=>{if(!h){return}if(!e.src){return}let t=!1;return(async()=>{o.current="loading",a();const r=await m.urlToString(e.src),n=m.fixSize(r);let h;h=e.colorsReplace?m.replaceColors(n,e.colorsReplace||new Map):m.svgToURL(n),t||(i.current=h,o.current="loaded",a())})(),()=>{t=!0}},[e.src,JSON.stringify(e.colorsReplace)]),h?[i.current,o.current]:[e.src,"loaded"]})(e),[A,D]=T(W,"anonymous"),_="svg"!==e.type||"loaded"===k?D:"loading";useImageLoader(_,e.src,e.id);const L=e.page._exportingOrRendering?1:Math.max(1,a.scale),z=a._elementsPixelRatio*L,H=(({image:e,status:r,type:a})=>{const o=t.useRef();return t.useEffect(()=>{o.current=e||o.current},[e]),"failed"!==r||"failed"!==r&&"svg"===a?o.current:void 0})({image:A,status:D,type:e.type}),j=((e,r,a)=>{const o=t.useMemo(()=>{var t,o;const{flipX:i,flipY:n}=e,h="svg"===e.type||e.src.indexOf("data:image/svg+xml")>=0||e.src.indexOf(".svg")>=0,c=navigator.userAgent.toLowerCase().indexOf("firefox")>-1,s=(/^((?!chrome|android).)*safari/i.test(navigator.userAgent)||c)&&h||e.maskSrc;if(!i&&!n&&!s){return r}if(!r||!r.width||!r.height){return null}const d=b();let g=1;"svg"===e.type&&(g=Math.max(e.a.width/r.width*a,e.a.height/r.height*a)),f(d,Math.max(r.width*g,1),Math.max(r.height*g,1));let l=i?-d.width:0,u=n?-d.height:0;return null===(t=d.getContext("2d"))||void 0===t||t.scale(i?-1:1,n?-1:1),null===(o=d.getContext("2d"))||void 0===o||o.drawImage(r,l,u,d.width,d.height),d},[e.maskSrc,e.flipX,e.flipY,r,e.a.width,e.a.height,a]);return t.useEffect(()=>()=>{o&&"CANVAS"===o.nodeName&&d.Util.releaseCanvas(o)},[o]),o})(e,A||H,z),P=((e,r)=>{const a=useSizeFixer(e.maskSrc||""),[o,i]=T(a,"anonymous");return useImageLoader(a?i:"loaded",a||"",e.id),t.useMemo(()=>{if(!o){return r}if(!r||!r.width||!r.height){return r}const t=b();t.width=Math.max(r.width,1),t.height=Math.max(r.height,1);const a=t.getContext("2d");if(!a){return r}a.drawImage(r,0,0),a.globalCompositeOperation="source-in";const i=function(t,e){const r=e.width/e.height;let a,o;return r>=t.width/t.height?(a=t.width,o=t.width/r):(a=t.height*r,o=t.height),{x:(t.width-a)/2,y:(t.height-o)/2,width:a,height:o}}(o,e);return a.drawImage(o,i.x,i.y,i.width,i.height,0,0,r.width,r.height),t},[r,o,e.a.width,e.a.height])})(e,j)||O;let{cropX:B,cropY:F,cropWidth:N,cropHeight:U}=e.a;"loaded"!==D&&(B=F=0,N=U=1);const V=P.width*N,$=P.height*U,q=e.a.width/e.a.height;let J,G;const K=V/$,Q=e.stretchEnabled;Q?(J=V,G=$):q>=K?(J=V,G=V/q):(J=$*q,G=$);const Z={x:P.width*B,y:P.height*F,width:J,height:G},tt=null!==(h=e.cornerRadius)&&void 0!==h?h:0,et=e.page._exportingOrRendering?1:Math.min(2,a.scale),rt=a._elementsPixelRatio*et;let at=((e,r,a,o)=>{const i=useSizeFixer(e.clipSrc||""),[n,h]=T(i,"anonymous"),c=e.clipSrc?h:"loaded";useImageLoader(c,e.clipSrc,e.id);const s=t.useMemo(()=>{if(r&&n){return b()}},[r,n]);return t.useLayoutEffect(()=>{var t;if(!n){return}if(!r||!r.width||!r.height){return}if(!n||!n.width||!n.height){return}if(!s){return}const o=b(),i=Math.max(e.a.width/n.width*a,e.a.height/n.height*a);o.width=Math.max(n.width*i,1),o.height=Math.max(n.height*i,1),null===(t=o.getContext("2d"))||void 0===t||t.drawImage(n,0,0,o.width,o.height),s.width=Math.max(r.width,1),s.height=Math.max(r.height,1);const h=s.getContext("2d");h&&(h.save(),h.drawImage(o,0,0,r.width,r.height),d.Util.releaseCanvas(o),h.globalCompositeOperation="source-in",h.drawImage(r,0,0,s.width,s.height),h.restore())},[s,r,n,e.a.width,e.a.height,a,...o]),e.clipSrc&&n?s:r})(e,useCornerRadiusAndCrop(e,P,Z,rt,tt,s||e._cropModeEnabled||"svg"===e.type,!0),rt,[Z,tt,rt]);const ot=Math.max(e.a.width/J,e.a.height/G);t.useEffect(()=>{var t;if(!e._cropModeEnabled){return}const r=null===(t=u.current)||void 0===t?void 0:t.getStage();function a(t){e._cropModeEnabled&&t.target!==p.current&&e.toggleCropMode(!1)}function o(t){e._cropModeEnabled&&t.target.parentNode!==(null==r?void 0:r.content)&&e.toggleCropMode(!1)}return document.body.addEventListener("click",o),null==r||r.on("click",a),null==r||r.on("tap",a),()=>{document.body.removeEventListener("click",o),document.body.removeEventListener("touchstart",o),null==r||r.off("click",a),null==r||r.off("click",a)}},[e._cropModeEnabled]),t.useLayoutEffect(()=>{if(!s&&!e._cropModeEnabled){return w(u.current,e),r(()=>{w(u.current,e)},{delay:100})}},[at,e.page._exportingOrRendering,s,N,U,e._cropModeEnabled]),t.useLayoutEffect(()=>{var t;s||e._cropModeEnabled?null===(t=u.current)||void 0===t||t.clearCache():w(u.current,e)},[s,e.a.width,e.a.height,e._cropModeEnabled]),t.useEffect(()=>{w(u.current,e)},[e.shadowEnabled,e.shadowBlur,e.cornerRadius,e.shadowColor,e.shadowOffsetX,e.shadowOffsetY,e.shadowOpacity]);const it=t.useRef(null),nt=t.useRef(null),ht=t.useRef(null);t.useLayoutEffect(()=>{e._cropModeEnabled&&(nt.current.nodes([it.current]),ht.current.nodes([p.current]))},[e._cropModeEnabled]);var ct=t.useRef(null),st=t.useRef(0),dt=t.useRef(!1);const gt=t=>{var r;(null===(r=t.evt.touches)||void 0===r?void 0:r.length)>2&&t.target.stopDrag(),Math.round(t.target.x())>0&&(t.target.x(0),t.target.scaleX(1)),Math.round(t.target.y())>0&&(t.target.y(0),t.target.scaleY(1));const a=t.target.width()*t.target.scaleX(),o=t.target.height()*t.target.scaleY(),i=Math.min(1,J/a),n=Math.min(1,G/o),h=1-i,c=Math.min(h,Math.max(0,Math.round(-t.target.x())/a)),s=1-n,d=Math.min(s,Math.max(0,Math.round(-t.target.y())/o));t.target.setAttrs({x:-c*P.width,y:-d*P.height,scaleX:1,scaleY:1}),e.set({cropX:c,cropY:d,cropWidth:i,cropHeight:n})},lt=()=>{"svg"!==e.type&&e.contentEditable&&(e.stretchEnabled||setTimeout(()=>{e.toggleCropMode(!0)}))},ut="svg"===e.type&&H,mt="loading"===D&&!ut,[pt]=M(mt,100,!1,!1),ft="failed"===D,wt=!pt&&!ft,xt=t.useRef({cropX:0,cropY:0,cropWidth:0,cropHeight:0}),yt=wt?e.a.opacity:0;x(u,yt);const Mt=e.selectable||"admin"===a.role,vt=y(),bt=v(e,e.borderColor,"stroke");return t.createElement(t.Fragment,null,pt&&t.createElement(X,{element:e}),ft&&t.createElement(Y,{element:e}),t.createElement(i,{ref:u,name:"element",id:e.id,image:at,x:e.a.x,y:e.a.y,width:e.a.width||1,height:e.a.height||1,rotation:e.a.rotation,opacity:yt,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,customCrop:Z,listening:Mt,draggable:vt?e.draggable&&I:e.draggable,preventDefault:!vt||I,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()})},onDblClick:lt,onDblTap:lt,onTransformStart:()=>{l(!0),xt.current={cropX:e.cropX,cropY:e.cropY,cropWidth:e.cropWidth,cropHeight:e.cropHeight}},onTransform:t=>{var r;const a=t.currentTarget,o=Math.abs(a.scaleX()-1)<1e-7?1:a.scaleX(),i=Math.abs(a.scaleY()-1)<1e-7?1:a.scaleY();a.scaleX(1),a.scaleY(1);const n=null===(r=t.target.getStage())||void 0===r?void 0:r.findOne("Transformer"),h=1-J/P.width,c=Math.min(h,Math.max(0,e.cropX)),s=1-G/P.height,d=Math.min(s,Math.max(0,e.cropY)),g=n.getActiveAnchor(),l=!(g.indexOf("middle")>=0||g.indexOf("center")>=0),u=!l&&o<1&&xt.current.cropHeight>G/P.height;let m=l?e.cropWidth:e.cropWidth*o;u&&(m=e.cropWidth);const p=!l&&i<1&&xt.current.cropWidth>J/P.width;let f=l?e.cropHeight:e.cropHeight*i;p&&(f=e.cropHeight),Q&&(m=e.cropWidth,f=e.cropHeight),e.set({cropX:c,cropY:d,x:a.x(),y:a.y(),width:a.width()*o,height:a.height()*i,rotation:t.target.rotation(),cropWidth:Math.min(m,1-c),cropHeight:Math.min(f,1-d)})},onTransformEnd:t=>{const r=t.currentTarget;e.set({width:r.width(),height:r.height(),x:r.x(),y:r.y(),rotation:t.target.rotation(),cropWidth:J/P.width,cropHeight:G/P.height}),l(!1)}}),t.createElement(n,Object.assign({x:e.x,y:e.y,width:Math.max(e.a.width-e.borderSize,0),height:Math.max(e.a.height-e.borderSize,0),opacity:yt,offsetX:-e.borderSize/2,offsetY:-e.borderSize/2},bt,{strokeWidth:e.borderSize,listening:!1,visible:!!e.borderSize,rotation:e.rotation,cornerRadius:Math.max(0,tt-e.borderSize),hideInExport:!e.showInExport})),e._cropModeEnabled&&t.createElement(g,{selector:".page-abs-container",enabled:!0},t.createElement(n,{x:-window.innerWidth/a.scale,y:-window.innerWidth/a.scale,width:window.innerWidth/a.scale*3,height:window.innerWidth/a.scale*3,fill:"rgba(0,0,0,0.3)"}),t.createElement(i,{listening:!1,image:at,x:e.x,y:e.y,width:e.a.width,height:e.a.height,rotation:e.rotation,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur}),t.createElement(o,{x:e.x,y:e.y,rotation:e.rotation,scaleX:ot,scaleY:ot},t.createElement(i,{image:P,ref:p,opacity:.4,draggable:!0,x:-e.cropX*P.width,y:-e.cropY*P.height,onDragMove:gt,onTransform:gt,onTouchMove:t=>{t.evt.preventDefault();const e=t.target.getStage().getPointersPositions();var r=e[0],a=e[1];const o=t.target;if(r&&!a&&!o.isDragging()&&dt.current&&(o.startDrag(),dt.current=!1),r&&a){d.hitOnDragEnabled=!0,o.isDragging()&&(dt.current=!0,o.stopDrag());const e=t.target.getAbsoluteTransform().copy();e.invert();var i={x:r.x,y:r.y},n={x:a.x,y:a.y};if(!ct.current){return void(ct.current=S(i,n))}var h=S(i,n),c=function(t,e){return Math.sqrt(Math.pow(e.x-t.x,2)+Math.pow(e.y-t.y,2))}(i,n);st.current||(st.current=c);const p=o.position();var s={x:h.x-p.x,y:h.y-p.y},g=c/st.current;o.scaleX(g),o.scaleY(g);const f=e.point(h),w=e.point(ct.current);var l=f.x-w.x,u=f.y-w.y,m={x:Math.min(0,h.x-s.x*g+l),y:Math.min(0,h.y-s.y*g+u)};o.position(m),st.current=c,ct.current=h,gt(t)}},onTouchEnd:t=>{st.current=0,ct.current=null,d.hitOnDragEnabled=!1}}),t.createElement(c,Object.assign({ref:ht},C)),t.createElement(n,{width:J,height:G,ref:it,listening:!1,onTransform:t=>{if(e.cropX<Math.abs(t.target.x()/P.width)&&t.target.x()<0&&e.cropX>0){const r=(e.cropWidth+e.cropX)*P.width;t.target.scaleX(1),t.target.width(r)}if(e.cropY<Math.abs(t.target.y()/P.height)&&t.target.y()<0&&e.cropY>0){const r=(e.cropHeight+e.cropY)*P.height;t.target.scaleY(1),t.target.height(r)}t.target.x()<-e.cropX*P.width-1e-9&&(t.target.x(-e.cropX*P.width),t.target.scaleX(1)),t.target.y()<-e.cropY*P.height-1e-9&&(t.target.y(-e.cropY*P.height),t.target.scaleY(1));const r=Math.min(1,Math.max(0,e.cropX+t.target.x()/P.width)),a=Math.min(1,Math.max(0,t.target.y()/P.height+e.cropY)),o=t.target.width()*t.target.scaleX(),i=t.target.height()*t.target.scaleY(),n=Math.min(1-r,o/P.width),h=Math.min(1-a,i/P.height),c=t.target.getAbsolutePosition(t.target.getParent().getParent());t.target.scale({x:1,y:1}),t.target.position({x:0,y:0}),e.set({x:c.x,y:c.y,cropX:r,cropY:a,cropWidth:n,cropHeight:h,width:Math.min(o*ot,P.width*(1-r)*ot),height:Math.min(i*ot,P.height*(1-a)*ot)})}}),t.createElement(c,Object.assign({ref:nt},R,{visible:e.resizable})))))});

package/canvas/page.js

@@ -1 +1 @@
-var e=this&&this.__rest||function(e,t){var n={};for(var i in e){Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i])}if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(i=Object.getOwnPropertySymbols(e);o<i.length;o++){t.indexOf(i[o])<0&&Object.prototype.propertyIsEnumerable.call(e,i[o])&&(n[i[o]]=e[i[o]])}}return n};import t from"react";import{observer as n,useLocalObservable as i}from"mobx-react-lite";import{action as o,runInAction as r}from"mobx";import{Group as l,Image as a,Label as s,Layer as c,Line as d,Rect as m,Stage as h,Tag as u,Text as g,Transformer as x}from"react-konva";import p from"use-image";import f from"konva";import b from"./element.js";import{DrawingLayer as v}from"./drawing-layer.js";import{ensureDragOrder as y,useSnap as E}from"./use-transformer-snap.js";import{useImageLoader as w}from"./image-element.js";import{getCrop as Y}from"../utils/crop.js";import{___ as X,isCreditVisible as S}from"../utils/validate-key.js";import{getClientRect as k,getTotalClientRect as A}from"../utils/math.js";import{pxToUnitRounded as R,pxToUnitString as C}from"../utils/unit.js";import{flags as M}from"../utils/flags.js";import{isTouchDevice as O}from"../utils/screen.js";import{useColor as P}from"./use-color.js";import{isGradient as L}from"../utils/gradient.js";import{Html as T}from"react-konva-utils";const j=f.DD._drag;window.removeEventListener("mousemove",j),f.DD._drag=function(e){r(()=>{j.call(this,e)})},window.addEventListener("mousemove",f.DD._drag);const I=new f.Group,D=20;I.add(new f.Rect({width:D,height:D,fill:"white"})),I.add(new f.Path({scaleX:D/24,scaleY:D/24,data:"M4.98313549,11.0001422 C5.49589839,10.9914935 5.92501998,11.3703506 5.99116425,11.8666444 L5.99985778,11.9831355 L6.00348884,12.2068855 C6.11245031,15.4321748 8.76323537,17.9999971 11.9999971,17.9999971 C12.1869612,17.9999971 12.3726725,17.9914753 12.5567465,17.9745765 L12.2928932,17.7071068 C11.9023689,17.3165825 11.9023689,16.6834175 12.2928932,16.2928932 C12.6834175,15.9023689 13.3165825,15.9023689 13.7071068,16.2928932 L15.7071068,18.2928932 C16.0976311,18.6834175 16.0976311,19.3165825 15.7071068,19.7071068 L13.7071068,21.7071068 C13.3165825,22.0976311 12.6834175,22.0976311 12.2928932,21.7071068 C11.9023689,21.3165825 11.9023689,20.6834175 12.2928932,20.2928932 L12.6111505,19.9769552 C12.4086045,19.9922816 12.2047796,19.9999971 11.9999971,19.9999971 C7.7687005,19.9999971 4.28886152,16.7094374 4.01666425,12.5105203 L4.00420123,12.2575143 L4.00014222,12.0168645 C3.9908282,11.4646583 4.43092928,11.0094562 4.98313549,11.0001422 Z M11.7071068,2.29289322 C12.0675907,2.65337718 12.0953203,3.22060824 11.7902954,3.61289944 L11.7071068,3.70710678 L11.3891629,4.0230186 C11.5916051,4.00770767 11.7953244,4 12,4 C16.418278,4 20,7.581722 20,12 C20,12.5522847 19.5522847,13 19,13 C18.4477153,13 18,12.5522847 18,12 C18,8.6862915 15.3137085,6 12,6 C11.8129339,6 11.6271216,6.00853145 11.4429483,6.02544919 L11.7071068,6.29289322 C12.0976311,6.68341751 12.0976311,7.31658249 11.7071068,7.70710678 C11.3466228,8.06759074 10.7793918,8.09532028 10.3871006,7.79029539 L10.2928932,7.70710678 L8.29289322,5.70710678 C7.93240926,5.34662282 7.90467972,4.77939176 8.20970461,4.38710056 L8.29289322,4.29289322 L10.2928932,2.29289322 C10.6834175,1.90236893 11.3165825,1.90236893 11.7071068,2.29289322 Z",fill:"black"}));const W=I.toCanvas({pixelRatio:2,width:D,height:D});export const TRANSFORMER_STYLE={enabledAnchors:["top-left","top-center","top-right","middle-left","bottom-left","bottom-right","bottom-center","middle-right"],borderEnabled:!0,rotateEnabled:!0,rotationSnaps:[0,45,90,135,180,225,270,315],ignoreStroke:!0,flipEnabled:!1,anchorStrokeWidth:2,borderStrokeWidth:2,rotateAnchorOffset:30,anchorStyleFunc:e=>{if(e.hasName("rotater")){const t=20;e.setAttrs({width:t,height:t,cornerRadius:t/2,offsetX:t/2,offsetY:t/2,fillPatternImage:W,fillPatternScaleX:t/D/2,fillPatternScaleY:t/D/2,fillPriority:"pattern",fillPatternRepeat:"no-repeat"})}}};export const setTransformerStyle=e=>{Object.assign(TRANSFORMER_STYLE,e)};const F={text:{enabledAnchors:["top-left","top-right","middle-left","bottom-left","bottom-right","middle-right"]},svg:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]},gif:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]},line:{enabledAnchors:[],borderEnabled:!1,rotateEnabled:!1},image:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]},many:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]},group:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]}};export function registerTransformerAttrs(e,t){F[e]=F[e]||t,Object.assign(F[e],t)}const B=e=>t.createElement(m,Object.assign({},e,{preventDefault:!1})),_=n=>{var{url:i}=n,o=e(n,["url"]);const[r,l]=p(i,"anonymous"),s=r?Y(r,{width:o.width,height:o.height},"center-middle"):{};return w(l,i,"page background"),t.createElement(a,Object.assign({image:r},o,s))},G=e=>{const n=P({fill:e.fill,a:{width:e.width,height:e.height}});return t.createElement(m,Object.assign({},e,n))},N=n=>{const{background:i,scale:o,borderColor:r}=n,l=e(n,["background","scale","borderColor"]),a=t.useMemo(()=>!!f.Util.colorToRGBA(i)||L(i),[i]),s=t.useMemo(()=>{const e=document.createElement("canvas"),t=30;e.width=60,e.height=60;const n=e.getContext("2d");return n&&(n.fillStyle="black",n.fillRect(t,0,t,t),n.fillRect(0,t,t,t)),e},[]);return t.createElement(t.Fragment,null,t.createElement(m,Object.assign({fillPatternImage:s},l,{opacity:.1,hideInExport:!0})),a?t.createElement(G,Object.assign({fill:i},l)):t.createElement(_,Object.assign({url:i},l)))},V=n(({selection:e,fill:n="rgba(0, 161, 255, 0.3)",stroke:i="rgb(0, 161, 255)",strokeWidth:o=1})=>e.visible?t.createElement(m,{name:"selection",x:Math.min(e.x1,e.x2),y:Math.min(e.y1,e.y2),width:Math.abs(e.x1-e.x2),height:Math.abs(e.y1-e.y2),fill:n,stroke:i,strokeWidth:o}):null);function z(e){let t=180*e/Math.PI;return t%=360,t>180?t-=360:t<-180&&(t+=360),Math.round(t)}const H=n(({x:e,y:n,width:i,height:o,rotation:r,anchor:l,store:a,tagFill:c,textFill:d})=>{const m=k({x:e,y:n,width:i,height:o,rotation:f.Util.radToDeg(r)});if(void 0===l){return null}const h=(o/2+70)*Math.cos(r-Math.PI/2),x=(o/2+70)*Math.sin(r-Math.PI/2),p=R({unit:a.unit,dpi:a.dpi,px:i/a.scale,precious:"px"===a.unit?0:1})+" x "+R({unit:a.unit,dpi:a.dpi,px:o/a.scale,precious:"px"===a.unit?0:1})+("px"===a.unit?"":" "+a.unit);return t.createElement(t.Fragment,null,t.createElement(s,{x:(m.minX+m.maxX)/2+h,y:(m.minY+m.maxY)/2+x,offsetX:14,offsetY:14,visible:"rotater"===l},t.createElement(u,{cornerRadius:5,fill:c||"rgb(0, 161, 255)"}),t.createElement(g,{align:"center",verticalAlign:"middle",fill:d||"white",padding:8,text:z(r).toString()+"°"})),t.createElement(s,{x:(m.minX+m.maxX)/2,y:m.maxY+20,visible:"rotater"!==l},t.createElement(u,{cornerRadius:5,fill:c||"rgb(0, 161, 255)",pointerDirection:"up",pointerHeight:0,pointerWidth:0}),t.createElement(g,{align:"center",verticalAlign:"middle",fill:d||"white",padding:8,text:p})))}),Z=n(({elements:e,store:n})=>{const i=e.filter(e=>e.alwaysOnTop),o=e.filter(e=>!e.alwaysOnTop).concat(i);return t.createElement(t.Fragment,null,o.map(e=>t.createElement(b,{key:e.id,store:n,element:e,onClick:()=>{console.warn("Polotno warning: onClick callback is deprecated. Just stop using it. Polotno will do selection automatically.")}})))});export const useContextMenu=({store:e})=>{const[n,i]=t.useState(!1),[o,r]=t.useState({x:0,y:0}),l=t.useCallback(e=>{i(!0),r(e)},[]);return{open:l,close:t.useCallback(()=>{i(!1)},[]),props:{isOpen:n,offset:o,setIsOpen:i}}};let $=null;export const registerNextDomDrop=e=>{$=e};const K=atob("UG9sb3RubyBmcmVlIGxpY2Vuc2UgbGltaXRhdGlvbiBleGNlZWRlZCAtIFBsZWFzZSB1cGdyYWRlIHlvdXIgYWNjb3VudC4="),U=atob("cmVk"),J=atob("djAuOS4y"),q=e=>t.createElement(t.Fragment,null,t.createElement(s,{fill:U,height:200},t.createElement(u,{fill:U}),t.createElement(g,Object.assign({},e,{fill:"white",text:K,height:void 0,padding:10,fontSize:20}))));export default n(({store:e,page:n,width:r,height:a,pageControlsEnabled:p,backColor:b,pageBorderColor:w,activePageBorderColor:Y,components:R,bleedColor:P,altCloneEnabled:L,viewportSize:j,selectionRectFill:I,selectionRectStroke:D,selectionRectStrokeWidth:W,snapGuideStroke:_,snapGuideStrokeWidth:G,snapGuideDash:z,transformLabelFill:K,transformLabelTextFill:U,distanceGuideStroke:Q,distanceLabelFill:ee,distanceLabelTextFill:te,layout:ne="vertical",tooltipSafeArea:ie,transformerSafeArea:oe})=>{const re=e.bleedVisible?n.bleed:0,le=n.computedWidth+2*re,ae=n.computedHeight+2*re,se=(r-le*e.scale)/2,ce=(a-ae*e.scale)/2,de=t.useRef(null),me=t.useRef(null),he=t.useRef(null),ue=null==p||p,[ge,xe]=t.useState(null),[pe,fe]=t.useState({}),[be,ve]=t.useState(0),ye=useContextMenu({store:e}),Ee=e.selectedElements.find(e=>e._cropModeEnabled),we=e.selectedElements.find(e=>e.curveEnabled),Ye=e.selectedShapes.filter(e=>!e.resizable).length>0,Xe=e.selectedShapes.filter(e=>!e.draggable).length>0,Se=e.selectedElements.filter(e=>!e.visible).length>0;t.useLayoutEffect(()=>{var t,n,i;if(!de.current){return}const o=de.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";F[a]?(de.current.setAttrs(Object.assign(Object.assign({},TRANSFORMER_STYLE),F[a])),"svg"!==a&&"image"!==a&&"gif"!==a||e.selectedElements[0].keepRatio||de.current.setAttrs({enabledAnchors:TRANSFORMER_STYLE.enabledAnchors}),"text"===a&&M.textVerticalResizeEnabled&&de.current.setAttrs({enabledAnchors:null===(n=F.text.enabledAnchors)||void 0===n?void 0:n.concat(["bottom-center"])}),"text"===a&&l&&e.selectedElements[0].curveEnabled&&de.current.setAttrs({enabledAnchors:F.many.enabledAnchors})):de.current.setAttrs(TRANSFORMER_STYLE),Ye&&de.current.enabledAnchors([]),Xe&&de.current.rotateEnabled(!1),r.find(e=>null==e?void 0:e.isDragging())&&r.forEach(e=>{e.isDragging()||null==e||e.startDrag()}),de.current.nodes(r),y(),null===(i=de.current.getLayer())||void 0===i||i.batchDraw()},[e.selectedShapes,Ee,Ye,Se,Xe,we]);const ke=()=>{const e=de.current;if(!e){return}if(!e.isTransforming()){return void fe({})}if(!e.nodes().length||!e.isTransforming()){return}const t=e.__getNodeRect(),n=null==e?void 0:e.getActiveAnchor(),i=e.getStage();fe({anchor:n,x:t.x-i.x(),y:t.y-i.y(),rotation:t.rotation,width:t.width,height:t.height})},Ae=t.useCallback(()=>{var e;if(null===(e=de.current)||void 0===e?void 0:e.isTransforming()){return}const t=de.current;if(!t||!t.nodes().length){return void ve(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),h=d*Math.cos(s)-m*Math.sin(s),u=d*Math.sin(s)+m*Math.cos(s);return{x:o+h,y:r+u}},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==oe?void 0:oe.top)||0,bottom:a-((null==oe?void 0:oe.bottom)||0),left:(null==oe?void 0:oe.left)||0,right:r-((null==oe?void 0:oe.right)||0)},TRANSFORMER_STYLE.rotateAnchorOffset||30,t.rotation());ve(i)},[oe,r,a]);t.useEffect(()=>{var e;null===(e=de.current)||void 0===e||e.update(),ke(),Ae()},[e.scale,Ae]),t.useEffect(()=>{Ae()},[e.selectedShapes,Ae]);const Re=i(()=>({visible:!1,x1:0,y1:0,x2:0,y2:0})),Ce=t.useRef(!1),Me=O(),Oe=o(e=>{var t,n,i,o;if(Me){return}Ce.current=!1;const r=e.target.findAncestor(".elements-container"),l=e.target.findAncestor("Transformer"),a=e.target.findAncestor(".page-abs-container");if(r||l||a){return}const s=null===(t=e.target.getStage())||void 0===t?void 0:t.getPointerPosition();s.x-=null===(n=e.target.getStage())||void 0===n?void 0:n.x(),s.y-=null===(i=e.target.getStage())||void 0===i?void 0:i.y(),s&&(Re.visible=!0,Re.x1=s.x,Re.y1=s.y,Re.x2=s.x,Re.y2=s.y,(null===(o=e.target.getStage())||void 0===o?void 0:o.getPointersPositions().length)>=2&&(Re.visible=!1))});(({stageRef:e,containerRef:n,viewportSize:i})=>{t.useEffect(()=>{var t;const i=null===(t=n.current)||void 0===t?void 0:t.closest(".polotno-workspace-inner");function o(){var t;if(!e.current){return}const o=null===(t=n.current)||void 0===t?void 0:t.getBoundingClientRect(),r=null==i?void 0:i.getBoundingClientRect(),l=Math.max(0,r.left-o.left-100),a=Math.max(0,r.top-o.top-100);e.current.position({x:-l,y:-a}),e.current.container().style.transform=`translate(${l}px, ${a}px)`}return o(),i.addEventListener("scroll",o),()=>{i.removeEventListener("scroll",o)}},[i.width,i.height])})({stageRef:me,containerRef:he,viewportSize:j}),t.useEffect(()=>{const t=o(e=>{var t,n,i,o;if(!Re.visible){return}console.log("continueSelection"),null===(t=me.current)||void 0===t||t.setPointersPositions(e);let r=null===(n=me.current)||void 0===n?void 0:n.getPointerPosition();r?(r.x-=null===(i=me.current)||void 0===i?void 0:i.x(),r.y-=null===(o=me.current)||void 0===o?void 0:o.y()):r={x:Re.x2,y:Re.y2},Re.x2=r.x,Re.y2=r.y}),n=o(()=>{if(!Re.visible){return}if(!me.current){return}const t=me.current.findOne(".selection"),n=t?t.getClientRect({skipStroke:!0}):{width:0,height:0,x:0,y:0};if(n.width&&n.height){const t=[];me.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;f.Util.haveIntersection(n,o)&&l&&a&&t.push(r.top.id)});const i=[...new Set(t)];Ce.current=!0,e.selectElements(i)}Re.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 Pe=t.useCallback(t=>{if(!e.selectedElements[0]){return}if(t&&e.selectedElementsIds.includes(t)){return}const i=A(e.selectedShapes),o=t?e.getElementById(t):{x:0,y:0,width:n.computedWidth,height:n.computedHeight,rotation:0},r=k(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(ge)!==JSON.stringify(l)&&xe(l)},[e,n]);t.useEffect(()=>{e.distanceGuidesVisible?Pe():ge&&xe(null)},[e.distanceGuidesVisible,Pe,e.selectedShapes.map(e=>`${e.x},${e.y},${e.width},${e.height},${e.rotation}`).join("|")]);const Le=t.useRef(!1);t.useEffect(()=>{var e;let t;const n=null===(e=he.current)||void 0===e?void 0:e.closest(".polotno-workspace-inner"),i=()=>{Le.current=!0,clearTimeout(t),t=setTimeout(()=>{Le.current=!1},300)};return n.addEventListener("scroll",i),()=>{clearTimeout(t),n.removeEventListener("scroll",i)}},[]);const Te=t=>{if(e.activePage!==n&&n.select(),Le.current){return}if(Ce.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||Re.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,h=e.selectedElementsIds.indexOf(m)>=0,u=t.target.findAncestor(".page-container",!0);m&&i&&!h?e.selectElements(e.selectedElementsIds.concat([m])):m&&i&&h?e.selectElements(e.selectedElementsIds.filter(e=>e!==m)):!m||i||h?u?e.selectPages([n.id]):e.selectPages([]):e.selectElements([m])};E(de,e,{stroke:_,strokeWidth:G,dash:z});const je=e.activePage===n,Ie=e._selectedPagesIds.includes(n.id),De=null==R?void 0:R.PageControls,We=null==R?void 0:R.Tooltip,Fe=null==R?void 0:R.ContextMenu,Be=1/e.scale,_e=0/e.scale;return t.createElement("div",{ref:he,onDragOver:e=>e.preventDefault(),onDrop:t=>{if(t.preventDefault(),!me.current){return}me.current.setPointersPositions(t);const i=me.current.findOne(".elements-container").getRelativePointerPosition(),o=me.current.getPointerPosition(),r=me.current.getAllIntersections(o).map(e=>e.findAncestor(".element",!0)).filter(Boolean),l=[...new Set(r.reverse())].map(t=>e.getElementById(t.id())),a=l[0];$&&($(i,a,{elements:l,page:n}),$=null)},style:{position:"relative",width:r+"px",height:a+"px",overflow:"hidden",flexShrink:0},className:"polotno-page-container"+(je?" active-page":"")},t.createElement(h,{ref:me,width:Math.min(r,j.width+200),height:Math.min(j.height+200,a),onClick:Te,onTap:Te,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([]),ye.open({x:t.evt.clientX,y:t.evt.clientY})},onMouseDown:Oe,onMouseMove:t=>{if(!e.distanceGuidesVisible&&!t.evt.altKey){return void(ge&&xe(null))}const n=t.target.findAncestor(".element",!0),i=null==n?void 0:n.id();Pe(i)},onDragStart:t=>{var n;const i=t.target.findAncestor(".element",!0);if(i){const o=e.getElementById(null==i?void 0:i.id()),r=null==o?void 0:o.top,l=null==r?void 0:r.id;!(e.selectedElementsIds.indexOf(l)>=0)&&l&&(e.selectElements([l]),t.target.stopDrag(),t.target.startDrag(t),null===(n=de.current)||void 0===n||n.startDrag(t))}ge&&xe(null)},pageId:n.id,style:{position:"absolute",overflow:"hidden",top:0,left:0}},t.createElement(c,null,t.createElement(B,{width:r,height:a,fill:b}),t.createElement(l,{x:se,y:ce,scaleX:e.scale,scaleY:e.scale,name:"page-container"},t.createElement(l,{name:"page-container-2"},t.createElement(l,{name:"page-background-group",x:re,y:re},t.createElement(N,{x:-n.bleed,y:-n.bleed,width:n.computedWidth+2*n.bleed,height:n.computedHeight+2*n.bleed,background:n.background,name:"page-background",preventDefault:!1,scale:e.scale})),t.createElement(l,{x:re,y:re,name:"elements-container",listening:!e.isPlaying},t.createElement(m,{name:"elements-area",width:n.computedWidth,height:n.computedHeight,listening:!1}),t.createElement(Z,{elements:n.children,store:e})),t.createElement(m,{stroke:P,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}),X()===J&&t.createElement(q,{name:"hit-detection",x:-Be/2-_e,y:-Be/2-_e,width:le+Be+2*_e,height:ae+Be+2*_e}))),t.createElement(d,{name:"workspace-background",points:[0,0,r,0,r,a,0,a,0,0,se,ce,se,a-ce,r-se,a-ce,r-se,ce,se,ce],listening:!1,closed:!0,fill:b}),t.createElement(l,{x:se,y:ce,scaleX:e.scale,scaleY:e.scale},t.createElement(m,{name:"page-highlight",hideInExport:!0,x:-Be/2-_e,y:-Be/2-_e,width:le+Be+2*_e,height:ae+Be+2*_e,stroke:Ie?Y:w,strokeWidth:2,listening:!1,strokeScaleEnabled:!1})),t.createElement(l,{x:se+re*e.scale,y:ce+re*e.scale,scaleX:e.scale,scaleY:e.scale,name:"page-abs-container"},t.createElement(x,{ref:de,rotateAnchorAngle:be,onDragStart:t=>{var i;(null===(i=t.evt)||void 0===i?void 0:i.altKey)&&L&&e.selectedElements.forEach(e=>{const t=e.clone({},{skipSelect:!0}),i=n.children.indexOf(e);n.setElementZIndex(t.id,i)}),e.history.startTransaction()},onDragEnd:()=>{e.history.endTransaction(),Ae()},onTransformStart:()=>{e.history.startTransaction(),xe(null)},boundBoxFunc:(e,t)=>{const n=Math.abs(t.width)<1||Math.abs(t.height)<1,i=Math.abs(e.width)<1||Math.abs(e.height)<1;return n&&!i?e:t},onTransform:e=>{const t=de.current.nodes(),n=t[t.length-1];e.target===n&&setTimeout(()=>{ke()},0)},onTransformEnd:t=>{fe({}),e.history.endTransaction(),Ae()},visible:!e.isPlaying}),ge&&ge.map(({points:n,distance:i,box1:o,box2:r},a)=>t.createElement(l,{name:"distances-container",hideInExport:!0,key:a,listening:!1},t.createElement(m,Object.assign({},o,{stroke:Q,strokeWidth:1,strokeScaleEnabled:!1})),t.createElement(m,Object.assign({},r,{stroke:Q,strokeWidth:1,strokeScaleEnabled:!1})),t.createElement(d,{points:[n[0].x,n[0].y,n[1].x,n[1].y],stroke:Q,strokeWidth:1,strokeScaleEnabled:!1}),t.createElement(d,{points:[n[1].x,n[1].y,n[2].x,n[2].y],stroke:Q,strokeWidth:1,strokeScaleEnabled:!1}),t.createElement(s,{x:(n[0].x+n[1].x)/2,y:(n[0].y+n[1].y)/2,offsetY:-10,scaleX:1/e.scale,scaleY:1/e.scale},t.createElement(u,{cornerRadius:5,fill:ee,pointerDirection:"down"}),t.createElement(g,{align:"center",verticalAlign:"middle",fill:te,padding:5,text:C({unit:e.unit,dpi:e.dpi,px:i})})))),n._rendering&&t.createElement(l,null,t.createElement(m,{width:le,height:ae,fill:"rgba(255,255,255,0.9)"}),t.createElement(g,{text:"Rendering...",fontSize:60,width:le,height:ae,align:"center",verticalAlign:"middle"})),We&&t.createElement(We,{components:R,store:e,page:n,stageRef:me,tooltipSafeArea:ie}),Fe&&t.createElement(T,null,t.createElement(Fe,Object.assign({components:R,store:e},ye.props)))),t.createElement(v,{store:e,page:n,width:r,height:a,scale:e.scale,xPadding:se,yPadding:ce,bleed:re}),t.createElement(H,Object.assign({},pe,{store:e,tagFill:K,textFill:U})),t.createElement(V,{selection:Re,fill:I,stroke:D,strokeWidth:W}),S()&&t.createElement(g,{text:"Powered by polotno.com",fontSize:14,fill:"rgba(0,0,0,0.6)",x:r-170,y:a-18,onMouseEnter:e=>{e.target.getStage().container().style.cursor="pointer"},onMouseLeave:e=>{e.target.getStage().container().style.cursor=""},onTouchStart:e=>{e.cancelBubble=!0},onMouseDown:e=>{e.cancelBubble=!0},onClick:()=>{window.open("https://polotno.com")},onTap:()=>{window.open("https://polotno.com")}}),t.createElement(l,{name:"line-guides"}))),ue&&De&&t.createElement(De,{store:e,page:n,xPadding:se,yPadding:ce,layout:ne}))});
+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}from"react-konva";import p from"use-image";import f from"konva";import b from"./element.js";import{DrawingLayer as v}from"./drawing-layer.js";import{ensureDragOrder as y,useSnap as E}from"./use-transformer-snap.js";import{useImageLoader as w}from"./image-element.js";import{getCrop as Y}from"../utils/crop.js";import{___ as X,____ as S,isCreditVisible as k}from"../utils/validate-key.js";import{getClientRect as R,getTotalClientRect as A}from"../utils/math.js";import{pxToUnitRounded as C,pxToUnitString as M}from"../utils/unit.js";import{flags as O}from"../utils/flags.js";import{isTouchDevice as P}from"../utils/screen.js";import{useColor as T}from"./use-color.js";import{isGradient as I}from"../utils/gradient.js";import{Html as L}from"react-konva-utils";const j=f.DD._drag;window.removeEventListener("mousemove",j),f.DD._drag=function(e){r(()=>{j.call(this,e)})},window.addEventListener("mousemove",f.DD._drag);const D=new f.Group,F=20;D.add(new f.Rect({width:F,height:F,fill:"white"})),D.add(new f.Path({scaleX:F/24,scaleY:F/24,data:"M4.98313549,11.0001422 C5.49589839,10.9914935 5.92501998,11.3703506 5.99116425,11.8666444 L5.99985778,11.9831355 L6.00348884,12.2068855 C6.11245031,15.4321748 8.76323537,17.9999971 11.9999971,17.9999971 C12.1869612,17.9999971 12.3726725,17.9914753 12.5567465,17.9745765 L12.2928932,17.7071068 C11.9023689,17.3165825 11.9023689,16.6834175 12.2928932,16.2928932 C12.6834175,15.9023689 13.3165825,15.9023689 13.7071068,16.2928932 L15.7071068,18.2928932 C16.0976311,18.6834175 16.0976311,19.3165825 15.7071068,19.7071068 L13.7071068,21.7071068 C13.3165825,22.0976311 12.6834175,22.0976311 12.2928932,21.7071068 C11.9023689,21.3165825 11.9023689,20.6834175 12.2928932,20.2928932 L12.6111505,19.9769552 C12.4086045,19.9922816 12.2047796,19.9999971 11.9999971,19.9999971 C7.7687005,19.9999971 4.28886152,16.7094374 4.01666425,12.5105203 L4.00420123,12.2575143 L4.00014222,12.0168645 C3.9908282,11.4646583 4.43092928,11.0094562 4.98313549,11.0001422 Z M11.7071068,2.29289322 C12.0675907,2.65337718 12.0953203,3.22060824 11.7902954,3.61289944 L11.7071068,3.70710678 L11.3891629,4.0230186 C11.5916051,4.00770767 11.7953244,4 12,4 C16.418278,4 20,7.581722 20,12 C20,12.5522847 19.5522847,13 19,13 C18.4477153,13 18,12.5522847 18,12 C18,8.6862915 15.3137085,6 12,6 C11.8129339,6 11.6271216,6.00853145 11.4429483,6.02544919 L11.7071068,6.29289322 C12.0976311,6.68341751 12.0976311,7.31658249 11.7071068,7.70710678 C11.3466228,8.06759074 10.7793918,8.09532028 10.3871006,7.79029539 L10.2928932,7.70710678 L8.29289322,5.70710678 C7.93240926,5.34662282 7.90467972,4.77939176 8.20970461,4.38710056 L8.29289322,4.29289322 L10.2928932,2.29289322 C10.6834175,1.90236893 11.3165825,1.90236893 11.7071068,2.29289322 Z",fill:"black"}));const W=D.toCanvas({pixelRatio:2,width:F,height:F});export const TRANSFORMER_STYLE={enabledAnchors:["top-left","top-center","top-right","middle-left","bottom-left","bottom-right","bottom-center","middle-right"],borderEnabled:!0,rotateEnabled:!0,rotationSnaps:[0,45,90,135,180,225,270,315],ignoreStroke:!0,flipEnabled:!1,anchorStrokeWidth:2,borderStrokeWidth:2,rotateAnchorOffset:30,anchorStyleFunc:e=>{if(e.hasName("rotater")){const t=20;e.setAttrs({width:t,height:t,cornerRadius:t/2,offsetX:t/2,offsetY:t/2,fillPatternImage:W,fillPatternScaleX:t/F/2,fillPatternScaleY:t/F/2,fillPriority:"pattern",fillPatternRepeat:"no-repeat"})}}};export const setTransformerStyle=e=>{Object.assign(TRANSFORMER_STYLE,e)};const G={text:{enabledAnchors:["top-left","top-right","middle-left","bottom-left","bottom-right","middle-right"]},svg:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]},gif:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]},line:{enabledAnchors:[],borderEnabled:!1,rotateEnabled:!1},image:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]},many:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]},group:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]}};export function registerTransformerAttrs(e,t){G[e]=G[e]||t,Object.assign(G[e],t)}const B=e=>t.createElement(m,Object.assign({},e,{preventDefault:!1})),_=n=>{var{url:i}=n,o=e(n,["url"]);const[r,l]=p(i,"anonymous"),s=r?Y(r,{width:o.width,height:o.height},"center-middle"):{};return w(l,i,"page background"),t.createElement(a,Object.assign({image:r},o,s))},N=e=>{const n=T({a:{width:e.width,height:e.height},width:e.width,height:e.height},e.fill);return t.createElement(m,Object.assign({},e,n))},Z=n=>{const{background:i,scale:o,borderColor:r}=n,l=e(n,["background","scale","borderColor"]),a=t.useMemo(()=>!!f.Util.colorToRGBA(i)||I(i),[i]),s=t.useMemo(()=>{const e=document.createElement("canvas"),t=30;e.width=60,e.height=60;const n=e.getContext("2d");return n&&(n.fillStyle="black",n.fillRect(t,0,t,t),n.fillRect(0,t,t,t)),e},[]);return t.createElement(t.Fragment,null,t.createElement(m,Object.assign({fillPatternImage:s},l,{opacity:.1,hideInExport:!0})),a?t.createElement(N,Object.assign({fill:i},l)):t.createElement(_,Object.assign({url:i},l)))},z=n(({selection:e,fill:n="rgba(0, 161, 255, 0.3)",stroke:i="rgb(0, 161, 255)",strokeWidth:o=1})=>e.visible?t.createElement(m,{name:"selection",x:Math.min(e.x1,e.x2),y:Math.min(e.y1,e.y2),width:Math.abs(e.x1-e.x2),height:Math.abs(e.y1-e.y2),fill:n,stroke:i,strokeWidth:o}):null);function U(e){let t=180*e/Math.PI;return t%=360,t>180?t-=360:t<-180&&(t+=360),Math.round(t)}const V=n(({x:e,y:n,width:i,height:o,rotation:r,anchor:l,store:a,tagFill:c,textFill:d})=>{if(void 0===e||void 0===n||void 0===i||void 0===o||void 0===r||void 0===l){return null}const m=R({x:e,y:n,width:i,height:o,rotation:f.Util.radToDeg(r)}),u=(o/2+70)*Math.cos(r-Math.PI/2),x=(o/2+70)*Math.sin(r-Math.PI/2),p=C({unit:a.unit,dpi:a.dpi,px:i/a.scale,precious:"px"===a.unit?0:1})+" x "+C({unit:a.unit,dpi:a.dpi,px:o/a.scale,precious:"px"===a.unit?0:1})+("px"===a.unit?"":" "+a.unit);return t.createElement(t.Fragment,null,t.createElement(s,{x:(m.minX+m.maxX)/2+u,y:(m.minY+m.maxY)/2+x,offsetX:14,offsetY:14,visible:"rotater"===l},t.createElement(h,{cornerRadius:5,fill:c||"rgb(0, 161, 255)"}),t.createElement(g,{align:"center",verticalAlign:"middle",fill:d||"white",padding:8,text:U(r).toString()+"°"})),t.createElement(s,{x:(m.minX+m.maxX)/2,y:m.maxY+20,visible:"rotater"!==l},t.createElement(h,{cornerRadius:5,fill:c||"rgb(0, 161, 255)",pointerDirection:"up",pointerHeight:0,pointerWidth:0}),t.createElement(g,{align:"center",verticalAlign:"middle",fill:d||"white",padding:8,text:p})))}),H=n(({elements:e,store:n})=>{const i=e.filter(e=>e.alwaysOnTop),o=e.filter(e=>!e.alwaysOnTop).concat(i);return t.createElement(t.Fragment,null,o.map(e=>t.createElement(b,{key:e.id,store:n,element:e,onClick:()=>{console.warn("Polotno warning: onClick callback is deprecated. Just stop using it. Polotno will do selection automatically.")}})))});export const useContextMenu=({store:e})=>{const[n,i]=t.useState(!1),[o,r]=t.useState({x:0,y:0}),l=t.useCallback(e=>{i(!0),r(e)},[]);return{open:l,close:t.useCallback(()=>{i(!1)},[]),props:{isOpen:n,offset:o,setIsOpen:i}}};let J=null;export const registerNextDomDrop=e=>{J=e};const K=atob("UG9sb3RubyBmcmVlIGxpY2Vuc2UgbGltaXRhdGlvbiBleGNlZWRlZCAtIFBsZWFzZSB1cGdyYWRlIHlvdXIgYWNjb3VudC4="),$=atob("I2MwMzkyYg=="),Q=atob("djAuOS4y"),q=e=>t.createElement(t.Fragment,null,t.createElement(s,{fill:$,height:200},t.createElement(h,{fill:$}),t.createElement(g,Object.assign({},e,{fill:"white",text:K,height:void 0,padding:10,fontSize:20})))),ee=atob("RlJFRSAgVFJJQUwgIExJQ0VOU0U="),te=(atob("UG93ZXJlZCBieSBQb2xvdG5v"),atob("TElDRU5TRSAgS0VZICBJUyAgTUlTU0lORw==")),ne=atob("UGxlYXNlIGFjdGl2YXRlIHlvdXIgbGljZW5zZS4KTGljZW5zZSByZWxhdGVkIHF1ZXN0aW9uczoKcG9sb3Ruby5jb20vY29udGFjdA=="),ie=e=>{const n=1===S(),i=n?te:ee,o=n?230:195;return t.createElement(l,Object.assign({},e,{listening:!1}),t.createElement(m,{fill:$,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:ne,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,backColor:b,pageBorderColor:w,activePageBorderColor:Y,components:C,bleedColor:T,altCloneEnabled:I,viewportSize:j,selectionRectFill:D,selectionRectStroke:F,selectionRectStrokeWidth:W,snapGuideStroke:_,snapGuideStrokeWidth:N,snapGuideDash:U,transformLabelFill:K,transformLabelTextFill:$,distanceGuideStroke:ee,distanceLabelFill:te,distanceLabelTextFill:ne,layout:oe="vertical",tooltipSafeArea:re,transformerSafeArea:le})=>{const ae=e.bleedVisible?n.bleed:0,se=n.computedWidth+2*ae,ce=n.computedHeight+2*ae,de=(r-se*e.scale)/2,me=(a-ce*e.scale)/2,ue=t.useRef(null),he=t.useRef(null),ge=t.useRef(null),xe=null==p||p,[pe,fe]=t.useState(null),[be,ve]=t.useState({}),[ye,Ee]=t.useState(0),we=useContextMenu({store:e}),Ye=e.selectedElements.find(e=>e._cropModeEnabled),Xe=e.selectedElements.find(e=>e.curveEnabled),Se=e.selectedShapes.filter(e=>!e.resizable).length>0,ke=e.selectedShapes.filter(e=>!e.draggable).length>0,Re=e.selectedElements.filter(e=>!e.visible).length>0;t.useLayoutEffect(()=>{var t,n,i;if(!ue.current){return}const o=ue.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";G[a]?(ue.current.setAttrs(Object.assign(Object.assign({},TRANSFORMER_STYLE),G[a])),"svg"!==a&&"image"!==a&&"gif"!==a||e.selectedElements[0].keepRatio||ue.current.setAttrs({enabledAnchors:TRANSFORMER_STYLE.enabledAnchors}),"text"===a&&O.textVerticalResizeEnabled&&ue.current.setAttrs({enabledAnchors:null===(n=G.text.enabledAnchors)||void 0===n?void 0:n.concat(["bottom-center"])}),"text"===a&&l&&e.selectedElements[0].curveEnabled&&ue.current.setAttrs({enabledAnchors:G.many.enabledAnchors})):ue.current.setAttrs(TRANSFORMER_STYLE),Se&&ue.current.enabledAnchors([]),ke&&ue.current.rotateEnabled(!1),r.find(e=>null==e?void 0:e.isDragging())&&r.forEach(e=>{e.isDragging()||null==e||e.startDrag()}),ue.current.nodes(r),y(),null===(i=ue.current.getLayer())||void 0===i||i.batchDraw()},[e.selectedShapes,Ye,Se,Re,ke,Xe]);const Ae=()=>{var e,t;const n=ue.current;if(!n){return}if(!n.isTransforming()){return void ve({})}if(!n.nodes().length||!n.isTransforming()){return}const i=n.__getNodeRect(),o=null==n?void 0:n.getActiveAnchor(),r=n.getStage();ve({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})},Ce=t.useCallback(()=>{var e;if(null===(e=ue.current)||void 0===e?void 0:e.isTransforming()){return}const t=ue.current;if(!t||!t.nodes().length){return void Ee(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==le?void 0:le.top)||0,bottom:a-((null==le?void 0:le.bottom)||0),left:(null==le?void 0:le.left)||0,right:r-((null==le?void 0:le.right)||0)},TRANSFORMER_STYLE.rotateAnchorOffset||30,t.rotation());Ee(i)},[le,r,a]);t.useEffect(()=>{var e;null===(e=ue.current)||void 0===e||e.update(),Ae(),Ce()},[e.scale,Ce]),t.useEffect(()=>{Ce()},[e.selectedShapes,Ce]);const Me=i(()=>({visible:!1,x1:0,y1:0,x2:0,y2:0})),Oe=t.useRef(!1),Pe=P(),Te=o(e=>{var t,n,i,o,r,l,a;if(Pe){return}Oe.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,Me.visible=!0,Me.x1=m.x,Me.y1=m.y,Me.x2=m.x,Me.y2=m.y,(null!==(a=null===(l=e.target.getStage())||void 0===l?void 0:l.getPointersPositions().length)&&void 0!==a?a:0)>=2&&(Me.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:he,containerRef:ge,viewportSize:j}),t.useEffect(()=>{const t=o(e=>{var t,n,i,o,r,l;if(!Me.visible){return}null===(t=he.current)||void 0===t||t.setPointersPositions(e);let a=null===(n=he.current)||void 0===n?void 0:n.getPointerPosition();a?(a.x-=null!==(o=null===(i=he.current)||void 0===i?void 0:i.x())&&void 0!==o?o:0,a.y-=null!==(l=null===(r=he.current)||void 0===r?void 0:r.y())&&void 0!==l?l:0):a={x:Me.x2,y:Me.y2},Me.x2=a.x,Me.y2=a.y}),n=o(()=>{if(!Me.visible){return}if(!he.current){return}const t=he.current.findOne(".selection"),n=t?t.getClientRect({skipStroke:!0}):{width:0,height:0,x:0,y:0};if(n.width&&n.height){const t=[];he.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;f.Util.haveIntersection(n,o)&&l&&a&&t.push(r.top.id)});const i=[...new Set(t)];Oe.current=!0,e.selectElements(i)}Me.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 Ie=t.useCallback(t=>{if(!e.selectedElements[0]){return}if(t&&e.selectedElementsIds.includes(t)){return}const i=A(e.selectedShapes),o=t?e.getElementById(t):{x:0,y:0,width:n.computedWidth,height:n.computedHeight,rotation:0},r=R(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(pe)!==JSON.stringify(l)&&fe(l)},[e,n]);t.useEffect(()=>{e.distanceGuidesVisible?Ie():pe&&fe(null)},[e.distanceGuidesVisible,Ie,e.selectedShapes.map(e=>`${e.x},${e.y},${e.width},${e.height},${e.rotation}`).join("|")]);const Le=t.useRef(!1);t.useEffect(()=>{var e;let t;const n=null===(e=ge.current)||void 0===e?void 0:e.closest(".polotno-workspace-inner"),i=()=>{Le.current=!0,clearTimeout(t),t=setTimeout(()=>{Le.current=!1},300)};return null==n||n.addEventListener("scroll",i),()=>{clearTimeout(t),null==n||n.removeEventListener("scroll",i)}},[]);const je=t=>{if(e.activePage!==n&&n.select(),Le.current){return}if(Oe.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||Me.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])};E(ue,e,{stroke:_,strokeWidth:N,dash:U});const De=e.activePage===n,Fe=e._selectedPagesIds.includes(n.id),We=null==C?void 0:C.PageControls,Ge=null==C?void 0:C.Tooltip,Be=null==C?void 0:C.ContextMenu,_e=1/e.scale,Ne=0/e.scale;return t.createElement("div",{ref:ge,onDragOver:e=>e.preventDefault(),onDrop:t=>{if(t.preventDefault(),!he.current){return}he.current.setPointersPositions(t);const i=he.current.findOne(".elements-container"),o=null==i?void 0:i.getRelativePointerPosition(),r=he.current.getPointerPosition(),l=he.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];J&&o&&(J(o,s,{elements:a,page:n}),J=null)},style:{position:"relative",width:r+"px",height:a+"px",overflow:"hidden",flexShrink:0},className:"polotno-page-container"+(De?" active-page":"")},t.createElement(u,{ref:he,width:Math.min(r,j.width+200),height:Math.min(j.height+200,a),onClick:je,onTap:je,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([]),we.open({x:t.evt.clientX,y:t.evt.clientY})},onMouseDown:Te,onMouseMove:t=>{if(!e.distanceGuidesVisible&&!t.evt.altKey){return void(pe&&fe(null))}const n=t.target.findAncestor(".element",!0),i=null==n?void 0:n.id();Ie(i)},onDragStart:t=>{var n;const i=t.target.findAncestor(".element",!0);if(i){const o=e.getElementById(null==i?void 0:i.id()),r=null==o?void 0:o.top,l=null==r?void 0:r.id;!(e.selectedElementsIds.indexOf(l)>=0)&&l&&(e.selectElements([l]),t.target.stopDrag(),t.target.startDrag(t),null===(n=ue.current)||void 0===n||n.startDrag(t))}pe&&fe(null)},pageId:n.id,style:{position:"absolute",overflow:"hidden",top:0,left:0}},t.createElement(c,null,t.createElement(B,{width:r,height:a,fill:b}),t.createElement(l,{x:de,y:me,scaleX:e.scale,scaleY:e.scale,name:"page-container"},t.createElement(l,{name:"page-container-2"},t.createElement(l,{name:"page-background-group",x:ae,y:ae},t.createElement(Z,{x:-n.bleed,y:-n.bleed,width:n.computedWidth+2*n.bleed,height:n.computedHeight+2*n.bleed,background:n.background,name:"page-background",preventDefault:!1,scale:e.scale})),t.createElement(l,{x:ae,y:ae,name:"elements-container",listening:!e.isPlaying},t.createElement(m,{name:"elements-area",width:n.computedWidth,height:n.computedHeight,listening:!1}),t.createElement(H,{elements:n.children,store:e})),t.createElement(m,{stroke:T,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}),X()===Q&&t.createElement(q,{name:"hit-detection",x:-_e/2-Ne,y:-_e/2-Ne,width:se+_e+2*Ne,height:ce+_e+2*Ne}))),t.createElement(d,{name:"workspace-background",points:[0,0,r,0,r,a,0,a,0,0,de,me,de,a-me,r-de,a-me,r-de,me,de,me],listening:!1,closed:!0,fill:b}),t.createElement(l,{x:de,y:me,scaleX:e.scale,scaleY:e.scale},t.createElement(m,{name:"page-highlight",hideInExport:!0,x:-_e/2-Ne,y:-_e/2-Ne,width:se+_e+2*Ne,height:ce+_e+2*Ne,stroke:Fe?Y:w,strokeWidth:2,listening:!1,strokeScaleEnabled:!1})),t.createElement(l,{x:de+ae*e.scale,y:me+ae*e.scale,scaleX:e.scale,scaleY:e.scale,name:"page-abs-container"},t.createElement(x,{ref:ue,rotateAnchorAngle:ye,onDragStart:t=>{var i;(null===(i=t.evt)||void 0===i?void 0:i.altKey)&&I&&e.selectedElements.forEach(e=>{const t=e.clone({},{skipSelect:!0}),i=n.children.indexOf(e);n.setElementZIndex(t.id,i)}),e.history.startTransaction()},onDragEnd:()=>{e.history.endTransaction(),Ce()},onTransformStart:()=>{e.history.startTransaction(),fe(null)},boundBoxFunc:(e,t)=>{const n=Math.abs(t.width)<1||Math.abs(t.height)<1,i=Math.abs(e.width)<1||Math.abs(e.height)<1;return n&&!i?e:t},onTransform:e=>{const t=ue.current.nodes(),n=t[t.length-1];e.target===n&&setTimeout(()=>{Ae()},0)},onTransformEnd:t=>{ve({}),e.history.endTransaction(),Ce()},visible:!e.isPlaying}),pe&&pe.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:ee,strokeWidth:1,strokeScaleEnabled:!1})),t.createElement(m,Object.assign({},r,{stroke:ee,strokeWidth:1,strokeScaleEnabled:!1})),t.createElement(d,{points:[n[0].x,n[0].y,n[1].x,n[1].y],stroke:ee,strokeWidth:1,strokeScaleEnabled:!1}),t.createElement(d,{points:[n[1].x,n[1].y,n[2].x,n[2].y],stroke:ee,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:te,pointerDirection:"down"}),t.createElement(g,{align:"center",verticalAlign:"middle",fill:ne,padding:5,text:M({unit:e.unit,dpi:e.dpi,px:i})})))),n._rendering&&t.createElement(l,null,t.createElement(m,{width:se,height:ce,fill:"rgba(255,255,255,0.9)"}),t.createElement(g,{text:"Rendering...",fontSize:60,width:se,height:ce,align:"center",verticalAlign:"middle"})),Ge&&t.createElement(Ge,{components:C,store:e,page:n,stageRef:he,tooltipSafeArea:re}),Be&&t.createElement(L,null,t.createElement(Be,Object.assign({components:C,store:e},we.props)))),t.createElement(v,{store:e,page:n,width:r,height:a,scale:e.scale,xPadding:de,yPadding:me,bleed:ae}),t.createElement(V,Object.assign({},be,{store:e,tagFill:K,textFill:$})),t.createElement(z,{selection:Me,fill:D,stroke:F,strokeWidth:W}),S()>0&&t.createElement(l,{hideInExport:!0},t.createElement(ie,{name:"cache-bounds",x:r-(1===S()?250:210),y:a-(1===S()?95:45)}),t.createElement(ie,{name:"cache-bounds-t",x:10,y:10})),k()&&t.createElement(g,{text:"Powered by polotno.com",fontSize:14,fill:"rgba(0,0,0,0.6)",x:r-170,y:a-18,onMouseEnter:e=>{e.target.getStage().container().style.cursor="pointer"},onMouseLeave:e=>{e.target.getStage().container().style.cursor=""},onTouchStart:e=>{e.cancelBubble=!0},onMouseDown:e=>{e.cancelBubble=!0},onClick:()=>{window.open("https://polotno.com")},onTap:()=>{window.open("https://polotno.com")}}),t.createElement(l,{name:"line-guides"}))),xe&&We&&t.createElement(We,{store:e,page:n,xPadding:de,yPadding:me,layout:oe}))});

package/canvas/rules.d.ts

@@ -9,8 +9,14 @@ type TopRulesProps = {
     pageSizes?: number[];
     layout?: 'vertical' | 'horizontal';
     renderOnlyActivePage?: boolean;
+    rulerBackgroundColor?: string;
+    rulerTextColor?: string;
+    rulerBorderColor?: string;
+    rulerBorderSize?: number;
+    rulerTickColor?: string;
+    rulerTickSize?: number;
 };
-export declare const TopRules: (({ store, width, height, pageSizes, layout, renderOnlyActivePage }: TopRulesProps) => React.JSX.Element | null) & {
+export declare const TopRules: (({ store, width, height, pageSizes, layout, renderOnlyActivePage, rulerBackgroundColor, rulerTextColor, rulerBorderColor, rulerBorderSize, rulerTickColor, rulerTickSize }: TopRulesProps) => React.JSX.Element | null) & {
     displayName: string;
 };
 export {};

package/canvas/rules.js

@@ -1,4 +1,4 @@
-import e from"react";import{getTotalClientRect as t}from"../utils/math.js";import{unitToPx as o}from"../utils/unit.js";import{observer as i}from"mobx-react-lite";import{styled as l}from"../utils/goober.js";const r=l("div",e.forwardRef)`
+import e from"react";import{getTotalClientRect as o}from"../utils/math.js";import{unitToPx as t}from"../utils/unit.js";import{observer as r}from"mobx-react-lite";import{styled as l}from"../utils/goober.js";const i=l("div",e.forwardRef)`
   position: absolute;
   top: 0;
   left: 0;
@@ -14,7 +14,7 @@ import e from"react";import{getTotalClientRect as t}from"../utils/math.js";impor
   border-bottom: 1px solid grey;
   background-color: #e8e8e8;
   overflow: hidden;
-`,n=l("div",e.forwardRef)`
+`,s=l("div",e.forwardRef)`
   left: 0;
   width: 14px;
   position: sticky;
@@ -24,11 +24,11 @@ import e from"react";import{getTotalClientRect as t}from"../utils/math.js";impor
   border-right: 1px solid grey;
   background-color: #e8e8e8;
   overflow: hidden;
-`,s=l("div",e.forwardRef)`
+`,n=l("div",e.forwardRef)`
   position: absolute;
   border-left: 1px solid grey;
   padding-left: 2px;
-`,p=l("div",e.forwardRef)`
+`,d=l("div",e.forwardRef)`
   position: absolute;
   left: 14px;
   border-left: 1px solid grey;
@@ -36,4 +36,4 @@ import e from"react";import{getTotalClientRect as t}from"../utils/math.js";impor
   transform: rotate(90deg);
   transform-origin: left top;
   overflow: hidden;
-`,d=[.1,.2,.5,1,2,5,10,20,25,50,100,200,500,1e3,2e3,5e3,1e4];export const TopRules=i(({store:i,width:l,height:c,pageSizes:h,layout:u="vertical",renderOnlyActivePage:x})=>{const g=e.useRef(null);if(!i.activePage){return null}const m="horizontal"===u,f=i.activePage,y=(i.bleedVisible&&f.bleed,f.computedWidth*i.scale),b=f.computedHeight*i.scale,v=(l-y)/2,w=(c-b)/2,k=(E=e=>o({unitVal:e,dpi:i.dpi,unit:i.unit})*i.scale,d.find(e=>E(e)>30)||1e4);var E;const R=o({unitVal:k,dpi:i.dpi,unit:i.unit})*i.scale,S=Math.round(y/R)+1,z=Math.round(b/R)+1,F=t(i.selectedShapes);return e.createElement(r,{ref:g,className:"polotno-rulers",style:{display:"flex",flexDirection:"column"}},m?e.createElement(e.Fragment,null,e.createElement("div",{style:{display:"flex",flexDirection:"row",position:"sticky",top:0,zIndex:1}},e.createElement("div",{style:{width:"14px",height:"14px",flexShrink:0,backgroundColor:"#e8e8e8",borderRight:"1px solid grey",borderBottom:"1px solid grey",position:"sticky",left:0,zIndex:2}}),(x?[i.activePage]:i.pages).map((t,o)=>{var r;if(!t){return null}const n=h?h[o]:l,p=(n-t.computedWidth*i.scale)/2;return e.createElement(a,{key:t.id,style:{width:n+"px",flexShrink:0,position:"relative"},className:"polotno-x-ruler"},[...Array(S)].map((t,o)=>e.createElement(s,{key:o,style:{left:p+o*R+"px",width:R+"px"}},"px"===i.unit||k>=1?Math.round(k*o):(k*o).toFixed(1))),(null===(r=i.selectedShapes[0])||void 0===r?void 0:r.page)===t&&e.createElement("div",{style:{position:"absolute",left:p+F.x*i.scale+"px",height:"14px",width:F.width*i.scale,backgroundColor:"rgba(0,0,0,0.15)"}}))})),e.createElement(n,{style:{height:c+"px",position:"sticky",left:0,marginTop:"-14px"},className:"polotno-y-ruler"},[...Array(z)].map((t,o)=>e.createElement(p,{key:o,style:{top:w+o*R+"px",width:R+"px"}},"px"===i.unit||k>=1?Math.round(k*o):(k*o).toFixed(1))),!!i.selectedShapes.length&&e.createElement("div",{style:{position:"absolute",top:w+F.y*i.scale+"px",width:"14px",height:F.height*i.scale,backgroundColor:"rgba(0,0,0,0.15)"}}))):e.createElement(e.Fragment,null,e.createElement(a,{style:{width:l+"px"},className:"polotno-x-ruler"},[...Array(S)].map((t,o)=>e.createElement(s,{key:o,style:{left:v+o*R+"px",width:R+"px"}},"px"===i.unit||k>=1?Math.round(k*o):(k*o).toFixed(1))),!!i.selectedShapes.length&&e.createElement("div",{style:{position:"absolute",left:v+F.x*i.scale+"px",height:"14px",width:F.width*i.scale,backgroundColor:"rgba(0,0,0,0.15)"}})),(x?[i.activePage]:i.pages).map((t,o)=>{var l;if(!t){return null}const r=h?h[o]:c,a=(r-t.computedHeight*i.scale)/2,s=0===o?14:0;return e.createElement(n,{key:t.id,style:{height:r-s+"px"},className:"polotno-y-ruler"},[...Array(z)].map((t,o)=>e.createElement(p,{key:o,style:{top:a+o*R-s+"px",width:R+"px"}},"px"===i.unit||k>=1?Math.round(k*o):(k*o).toFixed(1))),(null===(l=i.selectedShapes[0])||void 0===l?void 0:l.page)===t&&e.createElement("div",{style:{position:"absolute",top:a+F.y*i.scale-s+"px",width:"14px",height:F.height*i.scale,backgroundColor:"rgba(0,0,0,0.15)"}}))})))});
+`,p=[.1,.2,.5,1,2,5,10,20,25,50,100,200,500,1e3,2e3,5e3,1e4];export const TopRules=r(({store:r,width:l,height:c,pageSizes:u,layout:h="vertical",renderOnlyActivePage:x,rulerBackgroundColor:g,rulerTextColor:m,rulerBorderColor:f,rulerBorderSize:y,rulerTickColor:b,rulerTickSize:k})=>{const v=e.useRef(null);if(!r.activePage){return null}const w="horizontal"===h,$=r.activePage,E=(r.bleedVisible&&$.bleed,$.computedWidth*r.scale),N=$.computedHeight*r.scale,C=(l-E)/2,R=(c-N)/2,S=(z=e=>t({unitVal:e,dpi:r.dpi,unit:r.unit})*r.scale,p.find(e=>z(e)>30)||1e4);var z;const B=t({unitVal:S,dpi:r.dpi,unit:r.unit})*r.scale,F=Math.round(E/B)+1,M=Math.round(N/B)+1,A=o(r.selectedShapes),P=g||"#e8e8e8",T=m||"grey",L=f||"grey",j=null!=y?y:1,V=b||"grey",D=null!=k?k:1;return e.createElement(i,{ref:v,className:"polotno-rulers",style:{display:"flex",flexDirection:"column"}},w?e.createElement(e.Fragment,null,e.createElement("div",{style:{display:"flex",flexDirection:"row",position:"sticky",top:0,zIndex:1}},e.createElement("div",{className:"polotno-ruler-corner",style:{width:"14px",height:"14px",flexShrink:0,backgroundColor:P,borderRight:`${j}px solid ${L}`,borderBottom:`${j}px solid ${L}`,position:"sticky",left:0,zIndex:2}}),(x?[r.activePage]:r.pages).map((o,t)=>{var i;if(!o){return null}const s=u?u[t]:l,d=(s-o.computedWidth*r.scale)/2;return e.createElement(a,{key:o.id,style:{width:s+"px",flexShrink:0,position:"relative",backgroundColor:P,color:T,borderBottom:`${j}px solid ${L}`},className:"polotno-x-ruler"},[...Array(F)].map((o,t)=>e.createElement(n,{key:t,className:"polotno-ruler-tick",style:{left:d+t*B+"px",width:B+"px",borderLeft:`${D}px solid ${V}`}},"px"===r.unit||S>=1?Math.round(S*t):(S*t).toFixed(1))),(null===(i=r.selectedShapes[0])||void 0===i?void 0:i.page)===o&&e.createElement("div",{className:"polotno-ruler-selection",style:{position:"absolute",left:d+A.x*r.scale+"px",height:"14px",width:A.width*r.scale,backgroundColor:"rgba(0,0,0,0.15)"}}))})),e.createElement(s,{style:{height:c+"px",position:"sticky",left:0,marginTop:"-14px",backgroundColor:P,color:T,borderRight:`${j}px solid ${L}`},className:"polotno-y-ruler"},[...Array(M)].map((o,t)=>e.createElement(d,{key:t,className:"polotno-ruler-tick",style:{top:R+t*B+"px",width:B+"px",borderLeft:`${D}px solid ${V}`}},"px"===r.unit||S>=1?Math.round(S*t):(S*t).toFixed(1))),!!r.selectedShapes.length&&e.createElement("div",{className:"polotno-ruler-selection",style:{position:"absolute",top:R+A.y*r.scale+"px",width:"14px",height:A.height*r.scale,backgroundColor:"rgba(0,0,0,0.15)"}}))):e.createElement(e.Fragment,null,e.createElement(a,{style:{width:l+"px",backgroundColor:P,color:T,borderBottom:`${j}px solid ${L}`},className:"polotno-x-ruler"},[...Array(F)].map((o,t)=>e.createElement(n,{key:t,className:"polotno-ruler-tick",style:{left:C+t*B+"px",width:B+"px",borderLeft:`${D}px solid ${V}`}},"px"===r.unit||S>=1?Math.round(S*t):(S*t).toFixed(1))),!!r.selectedShapes.length&&e.createElement("div",{className:"polotno-ruler-selection",style:{position:"absolute",left:C+A.x*r.scale+"px",height:"14px",width:A.width*r.scale,backgroundColor:"rgba(0,0,0,0.15)"}})),(x?[r.activePage]:r.pages).map((o,t)=>{var l;if(!o){return null}const i=u?u[t]:c,a=(i-o.computedHeight*r.scale)/2,n=0===t?14:0;return e.createElement(s,{key:o.id,style:{height:i-n+"px",backgroundColor:P,color:T,borderRight:`${j}px solid ${L}`},className:"polotno-y-ruler"},[...Array(M)].map((o,t)=>e.createElement(d,{key:t,className:"polotno-ruler-tick",style:{top:a+t*B-n+"px",width:B+"px",borderLeft:`${D}px solid ${V}`}},"px"===r.unit||S>=1?Math.round(S*t):(S*t).toFixed(1))),(null===(l=r.selectedShapes[0])||void 0===l?void 0:l.page)===o&&e.createElement("div",{className:"polotno-ruler-selection",style:{position:"absolute",top:a+A.y*r.scale-n+"px",width:"14px",height:A.height*r.scale,backgroundColor:"rgba(0,0,0,0.15)"}}))})))});

package/canvas/text-element.js

@@ -1 +1 @@
-import t from"react";import{observer as e}from"mobx-react-lite";import{Group as n,Path as o,Text as r,TextPath as i}from"react-konva";import{Html as a}from"react-konva-utils";import{autorun as l}from"mobx";import s from"konva";import{parsePath as d,roundCommands as c}from"svg-round-corners";import{useColor as h}from"./use-color.js";import{incrementLoader as u}from"../utils/loader.js";import{isFontLoaded as f}from"../utils/fonts.js";import{flags as g}from"../utils/flags.js";import{removeTags as m}from"../utils/text.js";import{getDir as w,getCurvePath as x,resolveLineHeight as p}from"../utils/text-html.js";import{applyFilter as v}from"./apply-filters.js";import{useFadeIn as y}from"./use-fadein.js";import{isTouchDevice as S}from"../utils/screen.js";import{isAlive as E}from"mobx-state-tree";import{getLimitedFontSize as b}from"./text-element/max-font-size.js";import{getOptimalCaretColor as z}from"./text-element/caret-color.js";let O;function k(){return O||(O=document.getElementById("polotno-text-style"),O||(O=document.createElement("style"),O.id="polotno-text-style",document.head.appendChild(O)),O)}s._fixTextRendering=!0;const A={border:"none",padding:"0px",overflow:"hidden",background:"none",outline:"none",resize:"none",overflowWrap:"break-word",whiteSpace:"pre-wrap",userSelect:"text",wordBreak:"normal",textTransform:"none"};export{getDir}from"../utils/text-html.js";const L=e(({textNodeRef:e,element:n,onBlur:o,selectAll:r,cursorPosition:i})=>{const[a,l]=t.useState(A),s=e.current;t.useLayoutEffect(()=>{const t={};t.width=s.width()-2*s.padding()+"px",t.height=s.height()-2*s.padding()+s.fontSize()*s.lineHeight()+"px",t.fontSize=s.fontSize()+"px",t.lineHeight=s.lineHeight()+.01,t.fontFamily=s.fontFamily(),t.textAlign=s.align(),t.color=s.fill(),t.fontWeight=n.fontWeight,t.fontStyle=n.fontStyle,t.letterSpacing=n.letterSpacing+"em",t.opacity=Math.max(n.a.opacity,.2),t.textTransform=n.textTransform,t.caretColor=z(n);const e=`\n        .polotno-input::placeholder {\n          color: ${a.color};\n          opacity: 0.6;\n        }\n      `,o=k();o.innerHTML="",o.appendChild(document.createTextNode(e)),JSON.stringify(t)!==JSON.stringify(a)&&l(t)});const d=t.useRef(null);if(t.useLayoutEffect(()=>{var t;const e=d.current;if(!e){return}null===(t=d.current)||void 0===t||t.focus();const n=i||e.value.length;e.selectionStart=e.selectionEnd=n,r&&(null==e||e.select(),document.execCommand("selectAll",!1,null))},[]),t.useEffect(()=>{window.addEventListener("blur",o);const t=t=>{var e;(null===(e=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)}},[]),!s){return null}let c=0;const h=s.textArr.length*s.lineHeight()*s.fontSize();"middle"===n.verticalAlign&&(c=(n.a.height-h)/2),"bottom"===n.verticalAlign&&(c=n.a.height-h);const u=m(n.text);return t.createElement("textarea",{className:"polotno-input",ref:d,dir:w(u),style:Object.assign(Object.assign(Object.assign({},A),a),{paddingTop:c+"px"}),value:u,onChange:t=>{const e=b({oldText:n.text,newText:t.target.value,element:n});n.set({text:t.target.value,fontSize:e})},placeholder:n.placeholder,onBlur:o})}),$=e=>t.createElement(a,null,t.createElement(L,Object.assign({},e)));export const useFontLoader=(e,n)=>{const[o,r]=t.useReducer(t=>t+1,0),i=t.useRef(f(n)),a=t.useRef(null);return t.useLayoutEffect(()=>{if(i.current=f(n),i.current){return}let t=!0;return(async()=>{i.current=!1,r();const o=u(`text ${n}`);await e.loadFont(n),t?(a.current=o,i.current=!0,r()):o()})(),()=>{a.current&&(a.current(),a.current=null),t=!1}},[n]),t.useEffect(()=>{i.current&&setTimeout(()=>{a.current&&(a.current(),a.current=null)})},[i.current]),[i.current]};export const getLineHeight=({fontLoaded:e,fontFamily:n,fontSize:o,lineHeight:r})=>t.useMemo(()=>p({fontFamily:n,fontSize:o,lineHeight:r}),[e,n,o,r]);export function usePrevious(e){const n=t.useRef(e),o=t.useRef(e);return t.useMemo(()=>{o.current=n.current,n.current=e},[e]),o.current}export{getCurvePath}from"../utils/text-html.js";export const TextElement=e(({element:e,store:a})=>{const s=t.useRef(null),f=t.useRef(null),p=t.useRef(null),{editorEnabled:b,selectAll:z}=(e=>{const[n,o]=t.useState(!1),r=t.useRef(!1);return t.useEffect(()=>{var t=!0;return setTimeout(()=>{t&&(e._editModeEnabled&&(r.current=!0),o(!0),setTimeout(()=>{r.current=!1},50))},50),()=>{t=!1}},[]),{editorEnabled:n&&e._editModeEnabled,selectAll:r.current}})(e),[O,k]=t.useState(!1),A=t.useRef(e.a.height),L=a.selectedShapes.indexOf(e)>=0&&e.selectable,F=usePrevious(L),{textVerticalResizeEnabled:M}=g,R=g.autoDeleteEmptyText,j=usePrevious(e.fontFamily),[T,C]=t.useState([]);t.useEffect(()=>{var t,e;const n=null!==(e=null===(t=s.current)||void 0===t?void 0:t.textArr)&&void 0!==e?e:[];JSON.stringify(n)!==JSON.stringify(T)&&C(n)}),t.useEffect(()=>{if(e.a.width){return}const t=s.current;t.width(600),e.set({width:1.4*t.getTextWidth()})},[]),t.useEffect(()=>{F&&!L&&R&&""===e.text&&e.removable&&!e.placeholder&&a.deleteElements([e.id])},[R,e.placeholder,e.removable,e.text,L,F]),t.useLayoutEffect(()=>l(()=>{const t=s.current;v(t,e)}));const[H]=useFontLoader(a,e.fontFamily);let P=m(e.text);"uppercase"===e.textTransform&&(P=P.toUpperCase());const W=()=>{if(e.curveEnabled){const t=f.current;return t.getSelfRect().height||t.fontSize()}const t=s.current.clone({height:void 0}),n=Math.ceil(t.fontSize()*t.lineHeight()*t.textArr.length+1);return t.destroy(),n};t.useLayoutEffect(()=>{if(!H){return}const{textOverflow:t,textSplitAllowed:n}=g,o=(t,...n)=>{const o=u(`text ${e.id} before ignore`);a.history.ignore(t,...n).then(()=>{o()})};if(!e.a.height){const t=W();return void o(()=>{e.set({height:t})})}if(!a.isPlaying){if("change-font-size"!==t||O){if("resize"===t){const t=W();M&&e.a.height<t&&!O&&o(()=>{var n;E(e)&&e.set({height:t}),null===(n=s.current)||void 0===n||n.height(t)},!1,!0),M||e.a.height===t||O||o(()=>{var n;E(e)&&e.set({height:t}),null===(n=s.current)||void 0===n||n.height(t)},!1,!0)}}else{const t=function(t,e,n=!1){const o=t.fontSize(),r=t.height(),i=m(e.text);let a=e.a.fontSize;t.height(void 0);const l=Math.round(2*e.a.fontSize)-1;for(let s=1;s<l;s++){const o=e.a.height&&t.height()>e.a.height;let r=i.split("\n").join(" ").split(/[\s-]+/).reduce((t,e)=>(e=e.toLowerCase(),/[\u3000-\u303F\u3040-\u309F\u30A0-\u30FF\uFF00-\uFFEF\u4E00-\u9FAF\uAC00-\uD7AF]/.test(e)?t.concat(e.split("")):t.concat(e)),[]),l=t.textArr.map(t=>t.text.toLowerCase()).join(";");const s=r.find(t=>!l.includes(t)||(l=l.replace(t,""),!1));if(!(o||s&&!n)){break}a-=.5,t.fontSize(a)}return t.fontSize(o),t.height(r),a}(s.current,e,n);if(t!==e.a.fontSize){return void o(()=>{e.set({fontSize:t})},!1,!0)}const r=W();e.a.height===r||M||o(()=>{e.set({height:r})},!1,!0)}}}),t.useLayoutEffect(()=>{var t;if(H&&e.curveEnabled){const n=null===(t=f.current)||void 0===t?void 0:t.getSelfRect().width;if(n){const t=n-e.a.width,o=e.a.rotation*Math.PI/180,r=-t/2*Math.cos(o),i=-t/2*Math.sin(o);e.set({width:n,x:e.a.x+r,y:e.a.y+i})}}},[H,e.curveEnabled,e.curvePower,e.text,e.fontSize,e.fontFamily,e.fontWeight,e.fontStyle,e.letterSpacing]),t.useLayoutEffect(()=>{const t=s.current;t&&(t.width(t.width()+1e-8),t.width(t.width()-1e-8),t._setTextData(),v(t,e))},[H]);const X=t.useRef(null),Y=t.useRef(0),B=t=>{t.evt.preventDefault();const n=a.selectedShapes.find(t=>t===e);n&&e.contentEditable&&(Y.current=function(t){var e;const n=t.target,o=function(t){var e=t.getAbsoluteTransform().copy();e.invert();var n=t.getStage().getPointerPosition();return e.point(n)}(n),r=n.textArr,i=Math.floor(o.y/(n.fontSize()*n.lineHeight())),a=r.slice(0,i).reduce((t,e)=>t+e.text.length,i),l=null!==(e=r[i])&&void 0!==e?e:r[0];let s=0;return"right"===n.align()?s=n.width()-l.width:"center"===n.align()&&(s=n.width()/2-l.width/2),a+Math.round((o.x-s)/l.width*l.text.length)}(t),e.toggleEditMode())},D=!P&&e.placeholder?.6:e.a.opacity;y(s,D);const N=getLineHeight({fontLoaded:H,fontFamily:e.fontFamily,fontSize:e.a.fontSize,lineHeight:e.lineHeight}),I=e.selectable||"admin"===a.role,J=h(e),_=h(e,e.stroke,"stroke"),V=t.useMemo(()=>e.backgroundEnabled?e.curveEnabled?function({width:t,height:e,padding:n=0,cornerRadius:o=0}){const r=-n,i=-n,a=t+n,l=e+n,s=d(`M ${r} ${i} L ${a} ${i} L ${a} ${l} L ${r} ${l} Z`);return c(s,o).path}({width:e.a.width,height:e.a.height,cornerRadius:e.backgroundCornerRadius*(e.a.fontSize*N*.5),padding:e.backgroundPadding*(e.a.fontSize*N*.5)}):function({lines:t,lineHeight:e,width:n,align:o="left",padding:r=0,cornerRadius:i=0}){var a;t.forEach((t,e)=>{t.cx=n/2,"right"===o?t.cx=n-t.width/2:"left"===o&&(t.cx=t.width/2),"justify"!==o||t.lastInParagraph||(t.width=n),"justify"===o&&(t.cx=t.width/2)});let l=`M ${null===(a=t[0])||void 0===a?void 0:a.cx} ${-r}`;t.forEach((n,o)=>{const{cx:i}=n,a=t[o-1];a&&a.width>n.width?l+=` L ${i+n.width/2+r} ${o*e+r}`:l+=` L ${i+n.width/2+r} ${o*e-r}`;const s=t[o+1];s&&s.width>n.width?l+=` L ${i+n.width/2+r} ${(o+1)*e-r}`:l+=` L ${i+n.width/2+r} ${(o+1)*e+r}`});for(var s=t.length-1;s>=0;s--){const n=t[s],{cx:o}=n,i=t[s+1];i&&i.width>n.width?l+=` L ${o-n.width/2-r} ${(s+1)*e-r}`:l+=` L ${o-n.width/2-r} ${(s+1)*e+r}`;const a=t[s-1];a&&a.width>n.width?l+=` L ${o-n.width/2-r} ${s*e+r}`:l+=` L ${o-n.width/2-r} ${s*e-r}`}l+=" Z";const h=d(l);return c(h,i).path}({lines:JSON.parse(JSON.stringify(T)),cornerRadius:e.backgroundCornerRadius*(e.a.fontSize*N*.5),lineHeight:N*e.a.fontSize,padding:e.backgroundPadding*(e.a.fontSize*N*.5),width:e.a.width,align:e.align}):"",[e.backgroundEnabled,e.curveEnabled,e.backgroundCornerRadius,e.a.fontSize,e.a.height,N,e.backgroundPadding,e.a.width,e.align,T]),Z=S();let U=0;e.curveEnabled||("middle"===e.verticalAlign?U=(e.a.height-T.length*N*e.a.fontSize)/2:"bottom"===e.verticalAlign&&(U=e.a.height-T.length*N*e.a.fontSize));const q=e.curveEnabled?x(e.a.width,e.a.height,e.curvePower,e.a.fontSize):"",G=H?'"'+e.fontFamily+'"':j===e.fontFamily?"Arial":'"'+j+'"';return t.createElement(t.Fragment,null,t.createElement(o,{ref:p,x:e.a.x,y:e.a.y,rotation:e.a.rotation,hideInExport:!e.showInExport,listening:!1,visible:e.backgroundEnabled,opacity:e.backgroundOpacity*D,data:V,fill:e.backgroundColor,offsetY:-U}),t.createElement(o,{data:q,stroke:"red",strokeWidth:1,x:e.a.x,y:e.a.y,rotation:e.a.rotation,visible:!1}),t.createElement(i,Object.assign({ref:f,visible:e.curveEnabled,data:q,text:P||e.placeholder,listening:!1,align:"center",textBaseline:"middle"},J,_,{strokeWidth:e.strokeWidth,lineJoin:"round",fillAfterStrokeEnabled:!0,fontSize:e.a.fontSize,fontFamily:`"${e.fontFamily}", "${j}"`,fontStyle:e.fontStyle+" "+e.fontWeight,textDecoration:e.textDecoration.trim(),letterSpacing:e.letterSpacing*e.a.fontSize,x:e.a.x,y:e.a.y,rotation:e.a.rotation,opacity:e._editModeEnabled?.3:D,hideInExport:!e.showInExport,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity})),t.createElement(r,Object.assign({ref:s,id:e.id,name:"element",hideInExport:!e.showInExport,editModeEnabled:e._editModeEnabled,x:e.a.x,y:e.a.y,rotation:e.a.rotation,width:e.a.width,height:e.a.height,text:P||e.placeholder,direction:w(P)},J,_,{lineJoin:"round",strokeWidth:e.strokeWidth,fillAfterStrokeEnabled:!0,fontSize:e.a.fontSize,fontFamily:G,fontStyle:e.fontStyle+" "+e.fontWeight,textDecoration:e.textDecoration,align:e.align,verticalAlign:e.verticalAlign,draggable:Z?e.draggable&&L:e.draggable,preventDefault:!Z||L,opacity:e.curveEnabled?0:D,visible:!e._editModeEnabled,ellipsis:"ellipsis"===g.textOverflow,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,lineHeight:N,letterSpacing:e.letterSpacing*e.a.fontSize,listening:I,onDragMove:t=>{e.set({x:t.target.x(),y:t.target.y()})},onDragEnd:t=>{e.set({x:t.target.x(),y:t.target.y()})},onClick:B,onTap:B,onTransformStart:()=>{k(!0),A.current=s.current.height()},onTransform:t=>{var n,o,r;const i=t.target;null===(n=p.current)||void 0===n||n.setAttrs({x:i.x(),y:i.y(),rotation:i.rotation(),scale:i.scale()});const a=(null===(o=i.getStage())||void 0===o?void 0:o.findOne("Transformer")).getActiveAnchor();if("middle-left"===a||"middle-right"===a){const t=i.scaleX(),n=i.width()*t,o=e.a.fontSize;let r=n;n<o&&(r=o,X.current&&i.position(X.current)),i.width(r),i.scaleX(1),i.scaleY(1);let a=W();if("ellipsis"===g.textOverflow){a=A.current}else{const t=Math.max(a,A.current);i.height(t),e.set({height:i.height()})}const l=g.textVerticalResizeEnabled?Math.max(a,A.current):W();e.set({x:i.x(),width:i.width(),rotation:i.rotation(),height:l}),v(i,e)}if("top-center"===a||"bottom-center"===a){let n="resize"===g.textOverflow?W():N*e.a.fontSize;t.target.height(Math.max(n,t.target.height()*t.target.scaleY())),t.target.scaleY(1)}X.current=t.target.position();const l=t.target.scaleX();null===(r=p.current)||void 0===r||r.setAttrs({scaleX:1,scaleY:1}),t.target.scaleX(1),t.target.scaleY(1),e.set({fontSize:e.a.fontSize*l,width:t.target.width()*l,x:t.target.x(),y:t.target.y(),rotation:t.target.rotation(),height:t.target.height()*l,shadowBlur:e.shadowBlur*l,shadowOffsetX:e.shadowOffsetX*l,shadowOffsetY:e.shadowOffsetY*l,strokeWidth:e.strokeWidth*l})},onTransformEnd:t=>{var n;const o=t.target.scaleX();t.target.scaleX(1),t.target.scaleY(1),e.set({fontSize:Math.round(e.a.fontSize*o),width:Math.ceil(t.target.width()*o),x:t.target.x(),y:t.target.y(),rotation:t.target.rotation(),height:t.target.height()*o,shadowBlur:e.shadowBlur*o,shadowOffsetX:e.shadowOffsetX*o,shadowOffsetY:e.shadowOffsetY*o,strokeWidth:e.strokeWidth*o}),null===(n=p.current)||void 0===n||n.setAttrs({scaleX:1,scaleY:1}),k(!1)}})),b&&t.createElement(n,{x:e.a.x,y:e.a.y,rotation:e.a.rotation},t.createElement($,{textNodeRef:s,element:e,selectAll:z,cursorPosition:Y.current,onBlur:()=>{e.toggleEditMode(!1)}})))});
+import t from"react";import{observer as e}from"mobx-react-lite";import{Group as n,Path as o,Text as r,TextPath as i}from"react-konva";import{Html as a}from"react-konva-utils";import{autorun as l}from"mobx";import s from"konva";import{parsePath as c,roundCommands as d}from"svg-round-corners";import{useColor as h}from"./use-color.js";import{incrementLoader as u}from"../utils/loader.js";import{isFontLoaded as f}from"../utils/fonts.js";import{flags as g}from"../utils/flags.js";import{removeTags as m}from"../utils/text.js";import{getDir as w,getCurvePath as p,resolveLineHeight as x}from"../utils/text-html.js";import{applyFilter as v}from"./apply-filters.js";import{useFadeIn as y}from"./use-fadein.js";import{isTouchDevice as E}from"../utils/screen.js";import{isAlive as S}from"mobx-state-tree";import{getLimitedFontSize as b}from"./text-element/max-font-size.js";import{getOptimalCaretColor as z}from"./text-element/caret-color.js";let O;function k(){return O||(O=document.getElementById("polotno-text-style"),O||(O=document.createElement("style"),O.id="polotno-text-style",document.head.appendChild(O)),O)}s._fixTextRendering=!0;const A={border:"none",padding:"0px",overflow:"hidden",background:"none",outline:"none",resize:"none",overflowWrap:"break-word",whiteSpace:"pre-wrap",userSelect:"text",wordBreak:"normal",textTransform:"none"};export{getDir}from"../utils/text-html.js";const L=e(({textNodeRef:e,element:n,onBlur:o,selectAll:r,cursorPosition:i})=>{const[a,l]=t.useState(A),s=e.current;t.useLayoutEffect(()=>{if(!s){return}const t={};t.width=s.width()-2*s.padding()+"px",t.height=s.height()-2*s.padding()+s.fontSize()*s.lineHeight()+"px",t.fontSize=s.fontSize()+"px",t.lineHeight=s.lineHeight()+.01,t.fontFamily=s.fontFamily(),t.textAlign=s.align(),t.color=s.fill(),t.fontWeight=n.fontWeight,t.fontStyle=n.fontStyle,t.letterSpacing=n.letterSpacing+"em",t.opacity=Math.max(n.a.opacity,.2),t.textTransform=n.textTransform,t.caretColor=z(n);const e=`\n        .polotno-input::placeholder {\n          color: ${a.color};\n          opacity: 0.6;\n        }\n      `,o=k();o.innerHTML="",o.appendChild(document.createTextNode(e)),JSON.stringify(t)!==JSON.stringify(a)&&l(t)});const c=t.useRef(null);if(t.useLayoutEffect(()=>{var t;const e=c.current;if(!e){return}null===(t=c.current)||void 0===t||t.focus();const n=i||e.value.length;e.selectionStart=e.selectionEnd=n,r&&(null==e||e.select(),document.execCommand("selectAll",!1,void 0))},[]),t.useEffect(()=>{window.addEventListener("blur",o);const t=t=>{var e;(null===(e=c.current)||void 0===e?void 0:e.contains(t.target))||o()};return window.addEventListener("touchstart",t),()=>{window.removeEventListener("blur",o),window.removeEventListener("touchstart",t)}},[]),!s){return null}let d=0;const h=s.textArr.length*s.lineHeight()*s.fontSize();"middle"===n.verticalAlign&&(d=(n.a.height-h)/2),"bottom"===n.verticalAlign&&(d=n.a.height-h);const u=m(n.text);return t.createElement("textarea",{className:"polotno-input",ref:c,dir:w(u),style:Object.assign(Object.assign(Object.assign({},A),a),{paddingTop:d+"px"}),value:u,onChange:t=>{const e=b({oldText:n.text,newText:t.target.value,element:n});n.set({text:t.target.value,fontSize:e})},placeholder:n.placeholder,onBlur:o})}),$=e=>t.createElement(a,null,t.createElement(L,Object.assign({},e)));export const useFontLoader=(e,n)=>{const[o,r]=t.useReducer(t=>t+1,0),i=t.useRef(f(n)),a=t.useRef(null);return t.useLayoutEffect(()=>{if(i.current=f(n),i.current){return}let t=!0;return(async()=>{i.current=!1,r();const o=u(`text ${n}`);await e.loadFont(n),t?(a.current=o,i.current=!0,r()):o()})(),()=>{a.current&&(a.current(),a.current=null),t=!1}},[n]),t.useEffect(()=>{i.current&&setTimeout(()=>{a.current&&(a.current(),a.current=null)})},[i.current]),[i.current]};export const getLineHeight=({fontLoaded:e,fontFamily:n,fontSize:o,lineHeight:r})=>t.useMemo(()=>x({fontFamily:n,fontSize:o,lineHeight:r}),[e,n,o,r]);export function usePrevious(e){const n=t.useRef(e),o=t.useRef(e);return t.useMemo(()=>{o.current=n.current,n.current=e},[e]),o.current}export{getCurvePath}from"../utils/text-html.js";export const TextElement=e(({element:e,store:a})=>{const s=t.useRef(null),f=t.useRef(null),x=t.useRef(null),b=t.useRef([]),[,z]=t.useReducer(t=>t+1,0),{editorEnabled:O,selectAll:k}=(e=>{const[n,o]=t.useState(!1),r=t.useRef(!1);return t.useEffect(()=>{var t=!0;return setTimeout(()=>{t&&(e._editModeEnabled&&(r.current=!0),o(!0),setTimeout(()=>{r.current=!1},50))},50),()=>{t=!1}},[]),{editorEnabled:n&&e._editModeEnabled,selectAll:r.current}})(e),[A,L]=t.useState(!1),F=t.useRef(e.a.height),R=a.selectedShapes.indexOf(e)>=0&&e.selectable,M=usePrevious(R),{textVerticalResizeEnabled:j}=g,T=g.autoDeleteEmptyText,C=usePrevious(e.fontFamily),[H,P]=t.useState([]);t.useEffect(()=>{var t,e;const n=null!==(e=null===(t=s.current)||void 0===t?void 0:t.textArr)&&void 0!==e?e:[];JSON.stringify(n)!==JSON.stringify(H)&&P(n)}),t.useEffect(()=>{if(e.a.width){return}const t=s.current;t.width(600),e.set({width:1.4*t.getTextWidth()})},[]),t.useEffect(()=>{M&&!R&&T&&""===e.text&&e.removable&&!e.placeholder&&a.deleteElements([e.id])},[T,e.placeholder,e.removable,e.text,R,M]),t.useLayoutEffect(()=>l(()=>{const t=s.current;v(t,e)})),t.useEffect(()=>{const t=b.current;t.length>0&&(b.current=[],t.forEach(t=>t()))});const[W]=useFontLoader(a,e.fontFamily);let X=m(e.text);"uppercase"===e.textTransform&&(X=X.toUpperCase());const Y=()=>{if(e.curveEnabled){const t=f.current;return t.getSelfRect().height||t.fontSize()}const t=s.current.clone({height:void 0}),n=Math.ceil(t.fontSize()*t.lineHeight()*t.textArr.length+1);return t.destroy(),n};t.useLayoutEffect(()=>{if(!W){return}const{textOverflow:t,textSplitAllowed:n}=g,o=(t,...n)=>{const o=u(`text ${e.id} before ignore`);a.history.ignore(t,...n).then(()=>{b.current.push(o),z()})};if(!e.a.height){const t=Y();return void o(()=>{e.set({height:t})})}if(!a.isPlaying){if("change-font-size"!==t||A){if("resize"===t){const t=Y();j&&e.a.height<t&&!A&&o(()=>{var n;S(e)&&e.set({height:t}),null===(n=s.current)||void 0===n||n.height(t)},!1,!0),j||e.a.height===t||A||o(()=>{var n;S(e)&&e.set({height:t}),null===(n=s.current)||void 0===n||n.height(t)},!1,!0)}}else{const t=function(t,e,n=!1){const o=t.fontSize(),r=t.height(),i=m(e.text);let a=e.a.fontSize;t.height(void 0);const l=Math.round(2*e.a.fontSize)-1;for(let s=1;s<l;s++){const o=e.a.height&&t.height()>e.a.height;let r=i.split("\n").join(" ").split(/[\s-]+/).reduce((t,e)=>(e=e.toLowerCase(),/[\u3000-\u303F\u3040-\u309F\u30A0-\u30FF\uFF00-\uFFEF\u4E00-\u9FAF\uAC00-\uD7AF]/.test(e)?t.concat(e.split("")):t.concat(e)),[]),l=t.textArr.map(t=>t.text.toLowerCase()).join(";");const s=r.find(t=>!l.includes(t)||(l=l.replace(t,""),!1));if(!(o||s&&!n)){break}a-=.5,t.fontSize(a)}return t.fontSize(o),t.height(r),a}(s.current,e,n);if(t!==e.a.fontSize){return void o(()=>{e.set({fontSize:t})},!1,!0)}const r=Y();e.a.height===r||j||o(()=>{e.set({height:r})},!1,!0)}}}),t.useLayoutEffect(()=>{var t;if(W&&e.curveEnabled){const n=null===(t=f.current)||void 0===t?void 0:t.getSelfRect().width;if(n){const t=n-e.a.width,o=e.a.rotation*Math.PI/180,r=-t/2*Math.cos(o),i=-t/2*Math.sin(o);e.set({width:n,x:e.a.x+r,y:e.a.y+i})}}},[W,e.curveEnabled,e.curvePower,e.text,e.fontSize,e.fontFamily,e.fontWeight,e.fontStyle,e.letterSpacing]),t.useLayoutEffect(()=>{const t=s.current;t&&(t.width(t.width()+1e-8),t.width(t.width()-1e-8),t._setTextData(),v(t,e))},[W]);const B=t.useRef(null),D=t.useRef(0),N=t=>{t.evt.preventDefault();const n=a.selectedShapes.find(t=>t===e);n&&e.contentEditable&&(D.current=function(t){var e;const n=t.target,o=function(t){var e=t.getAbsoluteTransform().copy();e.invert();var n=t.getStage().getPointerPosition();return e.point(n)}(n),r=n.textArr,i=Math.floor(o.y/(n.fontSize()*n.lineHeight())),a=r.slice(0,i).reduce((t,e)=>t+e.text.length,i),l=null!==(e=r[i])&&void 0!==e?e:r[0];let s=0;return"right"===n.align()?s=n.width()-l.width:"center"===n.align()&&(s=n.width()/2-l.width/2),a+Math.round((o.x-s)/l.width*l.text.length)}(t),e.toggleEditMode())},I=!X&&e.placeholder?.6:e.a.opacity;y(s,I);const J=getLineHeight({fontLoaded:W,fontFamily:e.fontFamily,fontSize:e.a.fontSize,lineHeight:e.lineHeight}),_=e.selectable||"admin"===a.role,V=h(e),Z=h(e,e.stroke,"stroke"),U=t.useMemo(()=>e.backgroundEnabled?e.curveEnabled?function({width:t,height:e,padding:n=0,cornerRadius:o=0}){const r=-n,i=-n,a=t+n,l=e+n,s=c(`M ${r} ${i} L ${a} ${i} L ${a} ${l} L ${r} ${l} Z`);return d(s,o).path}({width:e.a.width,height:e.a.height,cornerRadius:e.backgroundCornerRadius*(e.a.fontSize*J*.5),padding:e.backgroundPadding*(e.a.fontSize*J*.5)}):function({lines:t,lineHeight:e,width:n,align:o="left",padding:r=0,cornerRadius:i=0}){var a;t.forEach((t,e)=>{t.cx=n/2,"right"===o?t.cx=n-t.width/2:"left"===o&&(t.cx=t.width/2),"justify"!==o||t.lastInParagraph||(t.width=n),"justify"===o&&(t.cx=t.width/2)});let l=`M ${null===(a=t[0])||void 0===a?void 0:a.cx} ${-r}`;t.forEach((n,o)=>{const{cx:i}=n,a=t[o-1];a&&a.width>n.width?l+=` L ${i+n.width/2+r} ${o*e+r}`:l+=` L ${i+n.width/2+r} ${o*e-r}`;const s=t[o+1];s&&s.width>n.width?l+=` L ${i+n.width/2+r} ${(o+1)*e-r}`:l+=` L ${i+n.width/2+r} ${(o+1)*e+r}`});for(var s=t.length-1;s>=0;s--){const n=t[s],{cx:o}=n,i=t[s+1];i&&i.width>n.width?l+=` L ${o-n.width/2-r} ${(s+1)*e-r}`:l+=` L ${o-n.width/2-r} ${(s+1)*e+r}`;const a=t[s-1];a&&a.width>n.width?l+=` L ${o-n.width/2-r} ${s*e+r}`:l+=` L ${o-n.width/2-r} ${s*e-r}`}l+=" Z";const h=c(l);return d(h,i).path}({lines:JSON.parse(JSON.stringify(H)),cornerRadius:e.backgroundCornerRadius*(e.a.fontSize*J*.5),lineHeight:J*e.a.fontSize,padding:e.backgroundPadding*(e.a.fontSize*J*.5),width:e.a.width,align:e.align}):"",[e.backgroundEnabled,e.curveEnabled,e.backgroundCornerRadius,e.a.fontSize,e.a.height,J,e.backgroundPadding,e.a.width,e.align,H]),q=E();let G=0;e.curveEnabled||("middle"===e.verticalAlign?G=(e.a.height-H.length*J*e.a.fontSize)/2:"bottom"===e.verticalAlign&&(G=e.a.height-H.length*J*e.a.fontSize));const K=e.curveEnabled?p(e.a.width,e.a.height,e.curvePower,e.a.fontSize):"",Q=W?'"'+e.fontFamily+'"':C===e.fontFamily?"Arial":'"'+C+'"';return t.createElement(t.Fragment,null,t.createElement(o,{ref:x,x:e.a.x,y:e.a.y,rotation:e.a.rotation,hideInExport:!e.showInExport,listening:!1,visible:e.backgroundEnabled,opacity:e.backgroundOpacity*I,data:U,fill:e.backgroundColor,offsetY:-G}),t.createElement(o,{data:K,stroke:"red",strokeWidth:1,x:e.a.x,y:e.a.y,rotation:e.a.rotation,visible:!1}),t.createElement(i,Object.assign({ref:f,visible:e.curveEnabled,data:K,text:X||e.placeholder,listening:!1,align:"center",textBaseline:"middle"},V,Z,{strokeWidth:e.strokeWidth,lineJoin:"round",fillAfterStrokeEnabled:!0,fontSize:e.a.fontSize,fontFamily:`"${e.fontFamily}", "${C}"`,fontStyle:e.fontStyle+" "+e.fontWeight,textDecoration:e.textDecoration.trim(),letterSpacing:e.letterSpacing*e.a.fontSize,x:e.a.x,y:e.a.y,rotation:e.a.rotation,opacity:e._editModeEnabled?.3:I,hideInExport:!e.showInExport,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity})),t.createElement(r,Object.assign({ref:s,id:e.id,name:"element",hideInExport:!e.showInExport,editModeEnabled:e._editModeEnabled,x:e.a.x,y:e.a.y,rotation:e.a.rotation,width:e.a.width,height:e.a.height,text:X||e.placeholder,direction:w(X)},V,Z,{lineJoin:"round",strokeWidth:e.strokeWidth,fillAfterStrokeEnabled:!0,fontSize:e.a.fontSize,fontFamily:Q,fontStyle:e.fontStyle+" "+e.fontWeight,textDecoration:e.textDecoration,align:e.align,verticalAlign:e.verticalAlign,draggable:q?e.draggable&&R:e.draggable,preventDefault:!q||R,opacity:e.curveEnabled?0:I,visible:!e._editModeEnabled,ellipsis:"ellipsis"===g.textOverflow,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,lineHeight:J,letterSpacing:e.letterSpacing*e.a.fontSize,listening:_,onDragMove:t=>{e.set({x:t.target.x(),y:t.target.y()})},onDragEnd:t=>{e.set({x:t.target.x(),y:t.target.y()})},onClick:N,onTap:N,onTransformStart:()=>{L(!0),F.current=s.current.height()},onTransform:t=>{var n,o,r;const i=t.target;null===(n=x.current)||void 0===n||n.setAttrs({x:i.x(),y:i.y(),rotation:i.rotation(),scale:i.scale()});const a=(null===(o=i.getStage())||void 0===o?void 0:o.findOne("Transformer")).getActiveAnchor();if("middle-left"===a||"middle-right"===a){const t=i.scaleX(),n=i.width()*t,o=e.a.fontSize;let r=n;n<o&&(r=o,B.current&&i.position(B.current)),i.width(r),i.scaleX(1),i.scaleY(1);let a=Y();if("ellipsis"===g.textOverflow){a=F.current}else{const t=Math.max(a,F.current);i.height(t),e.set({height:i.height()})}const l=g.textVerticalResizeEnabled?Math.max(a,F.current):Y();e.set({x:i.x(),width:i.width(),rotation:i.rotation(),height:l}),v(i,e)}if("top-center"===a||"bottom-center"===a){let n="resize"===g.textOverflow?Y():J*e.a.fontSize;t.target.height(Math.max(n,t.target.height()*t.target.scaleY())),t.target.scaleY(1)}B.current=t.target.position();const l=t.target.scaleX();null===(r=x.current)||void 0===r||r.setAttrs({scaleX:1,scaleY:1}),t.target.scaleX(1),t.target.scaleY(1),e.set({fontSize:e.a.fontSize*l,width:t.target.width()*l,x:t.target.x(),y:t.target.y(),rotation:t.target.rotation(),height:t.target.height()*l,shadowBlur:e.shadowBlur*l,shadowOffsetX:e.shadowOffsetX*l,shadowOffsetY:e.shadowOffsetY*l,strokeWidth:e.strokeWidth*l})},onTransformEnd:t=>{var n;const o=t.target.scaleX();t.target.scaleX(1),t.target.scaleY(1),e.set({fontSize:Math.round(e.a.fontSize*o),width:Math.ceil(t.target.width()*o),x:t.target.x(),y:t.target.y(),rotation:t.target.rotation(),height:t.target.height()*o,shadowBlur:e.shadowBlur*o,shadowOffsetX:e.shadowOffsetX*o,shadowOffsetY:e.shadowOffsetY*o,strokeWidth:e.strokeWidth*o}),null===(n=x.current)||void 0===n||n.setAttrs({scaleX:1,scaleY:1}),L(!1)}})),O&&t.createElement(n,{x:e.a.x,y:e.a.y,rotation:e.a.rotation},t.createElement($,{textNodeRef:s,element:e,selectAll:k,cursorPosition:D.current,onBlur:()=>{e.toggleEditMode(!1)}})))});

package/canvas/use-color.d.ts

@@ -1,6 +1,12 @@
-import { ShapeType } from '../model/shape-model.js';
-export declare const useColor: (element: ShapeType, value?: any, propName?: string) => {
-    [x: string]: any;
+import { AnimatedAttrs } from '../model/shape-model.js';
+type ColorElement = {
+    a: Pick<AnimatedAttrs, 'width' | 'height'>;
+    width: number;
+    height: number;
+    fill?: string;
+};
+export declare const useColor: (element: ColorElement, value?: string, propName?: string) => {
+    [x: string]: string;
     fillLinearGradientStartPointX?: undefined;
     fillLinearGradientStartPointY?: undefined;
     fillLinearGradientColorStops?: undefined;
@@ -16,7 +22,7 @@ export declare const useColor: (element: ShapeType, value?: any, propName?: stri
 } | {
     fillLinearGradientStartPointX: number;
     fillLinearGradientStartPointY: number;
-    fillLinearGradientColorStops: never[];
+    fillLinearGradientColorStops: (string | number)[];
     fillLinearGradientEndPointX: number;
     fillLinearGradientEndPointY: number;
     fill: any;
@@ -29,7 +35,7 @@ export declare const useColor: (element: ShapeType, value?: any, propName?: stri
 } | {
     strokeLinearGradientStartPointX: number;
     strokeLinearGradientStartPointY: number;
-    strokeLinearGradientColorStops: never[];
+    strokeLinearGradientColorStops: (string | number)[];
     strokeLinearGradientEndPointX: number;
     strokeLinearGradientEndPointY: number;
     fillLinearGradientStartPointX?: undefined;
@@ -40,3 +46,4 @@ export declare const useColor: (element: ShapeType, value?: any, propName?: stri
     fill?: undefined;
     fillPriority?: undefined;
 };
+export {};

package/canvas/use-color.js

@@ -1 +1 @@
-import t from"react";import*as i from"../utils/gradient.js";import r from"konva";export const useColor=(o,a=o.fill,n="fill")=>t.useMemo(()=>{if(!i.isGradient(a)){return{[n]:a}}const{stops:t,rotation:e}=i.parseColor(a),l=o.a.width/2,s=o.a.height/2,d=(e%180+180)%180,h=d>45&&d<135?o.a.width:o.a.height,f=r.Util.degToRad(e)-Math.PI/2,G=[];return t.forEach(({offset:t,color:i})=>{G.push(t,i)}),"fill"===n?{fillLinearGradientStartPointX:l-h/2*Math.cos(f),fillLinearGradientStartPointY:s-h/2*Math.sin(f),fillLinearGradientColorStops:G,fillLinearGradientEndPointX:l+h/2*Math.cos(f),fillLinearGradientEndPointY:s+h/2*Math.sin(f),fill:t[1].color,fillPriority:"linear-gradient"}:{strokeLinearGradientStartPointX:l-h/2*Math.cos(f),strokeLinearGradientStartPointY:s-h/2*Math.sin(f),strokeLinearGradientColorStops:G,strokeLinearGradientEndPointX:l+h/2*Math.cos(f),strokeLinearGradientEndPointY:s+h/2*Math.sin(f)}},[a,o.width,o.height]);
+import t from"react";import*as i from"../utils/gradient.js";import r from"konva";export const useColor=(o,a,n)=>{var e;return void 0===a&&(a=null!==(e=o.fill)&&void 0!==e?e:""),void 0===n&&(n="fill"),t.useMemo(()=>{if(!i.isGradient(a)){return{[n]:a}}const{stops:t,rotation:e}=i.parseColor(a),l=o.a.width/2,s=o.a.height/2,d=(e%180+180)%180,h=d>45&&d<135?o.a.width:o.a.height,f=r.Util.degToRad(e)-Math.PI/2,G=[];return t.forEach(({offset:t,color:i})=>{G.push(t,i)}),"fill"===n?{fillLinearGradientStartPointX:l-h/2*Math.cos(f),fillLinearGradientStartPointY:s-h/2*Math.sin(f),fillLinearGradientColorStops:G,fillLinearGradientEndPointX:l+h/2*Math.cos(f),fillLinearGradientEndPointY:s+h/2*Math.sin(f),fill:t[1].color,fillPriority:"linear-gradient"}:{strokeLinearGradientStartPointX:l-h/2*Math.cos(f),strokeLinearGradientStartPointY:s-h/2*Math.sin(f),strokeLinearGradientColorStops:G,strokeLinearGradientEndPointX:l+h/2*Math.cos(f),strokeLinearGradientEndPointY:s+h/2*Math.sin(f)}},[a,o.width,o.height])};