polotno 2.39.1 → 2.40.1

package/LICENSE.md

@@ -1,13 +1,9 @@
 Copyright (C) 2014 - present by Anton Lavrenov
 
-1. You can use this package for free for non-commercial products and local development process.
-2. For commercial usage you have to buy a license here: https://polotno.com/
-3. Please respect the copyright.
+Full license (canonical): https://polotno.com/legal/license
 
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+- Free Trial: evaluation, testing, and internal development only. No production use.
+- Commercial/production use requires a paid license.
+- Do not reverse engineer or decompile the SDK.
+- Do not redistribute or sublicense the SDK itself, and do not bypass license checks or technical limits.
+- The SDK is provided "as is", without warranties or liability to the maximum extent permitted by law.

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{TableElement as c}from"./table-element.js";import{Group as f}from"react-konva";import{Highlighter as p}from"./highlighter.js";import{forEveryChild as d}from"../model/group-model.js";import{flags as u}from"../utils/flags.js";const g={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(f,{opacity:o.opacity,listening:i,hideInExport:!o.showInExport,id:o.id},r.map(o=>e.createElement(x,Object.assign({},t,{key:o.id,store:n,element:o}))))}),gif:a,table:c};export function registerShapeComponent(e,t){g[e]=t}const h=(e,t)=>{const n=[];d(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}},x=t(t=>{var n;const{element:r,store:m}=t,[l,s]=e.useState(!1),a=m.selectedElements.indexOf(r)>=0&&r.selectable,c="group"===(null===(n=r.parent)||void 0===n?void 0:n.type),d=(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==d?void 0:d.findOne("Transformer");e.useEffect(()=>{if(d){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)};d.on("mouseover",e);const t=()=>{s(!1)};return d.on("mouseleave",t),()=>{d.off("mouseover",e),d.off("mouseleave",t)}}},[d]);let y=g[t.element.type];return"text"===t.element.type&&u.htmlRenderEnabled&&(y=i),t.element.visible?y?e.createElement(f,{name:"element-container"},e.createElement(y,Object.assign({},t)),l&&!a&&!c&&e.createElement(p,{element:"group"===r.type?{a:h(r,(null==x?void 0:x.rotation())||0)}:r})):(console.error("Can not find component for "+t.element.type),null):null});export default x;
+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{TableElement as c}from"./table-element.js";import{Group as f}from"react-konva";import{Highlighter as p}from"./highlighter.js";import{forEveryChild as d}from"../model/group-model.js";import{flags as u}from"../utils/flags.js";const g={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(f,{opacity:o.opacity,listening:i,hideInExport:!o.showInExport,id:o.id},r.map(o=>e.createElement(y,Object.assign({},t,{key:o.id,store:n,element:o}))))}),gif:a,table:c};export function registerShapeComponent(e,t){g[e]=t}const h=(e,t)=>{const n=[];d(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}},y=t(t=>{var n,r;const{element:m,store:l}=t,[s,a]=e.useState(!1),c=m.isSelectedDirectly,d="group"===(null===(n=m.parent)||void 0===n?void 0:n.type),y=(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})(m),v=e.useRef();e.useEffect(()=>{if(y){const e=e=>{const t=e.target.findAncestor(".element",!0),o=l.getElementById(null==t?void 0:t.id()),n=null==o?void 0:o.top,r=null==n?void 0:n.id;a(r===m.id)};y.on("mouseover",e);const t=()=>{a(!1)};return y.on("mouseleave",t),()=>{y.off("mouseover",e),y.off("mouseleave",t)}}},[y]);let x=g[t.element.type];return"text"===t.element.type&&u.htmlRenderEnabled&&(x=i),t.element.visible?x?e.createElement(f,{name:"element-container"},e.createElement(x,Object.assign({},t)),s&&!c&&!d&&e.createElement(p,{element:"group"===m.type?{a:h(m,(null===(v.current||(v.current=null==y?void 0:y.findOne("Transformer")),r=v.current)||void 0===r?void 0:r.rotation())||0)}:m})):(console.error("Can not find component for "+t.element.type),null):null});export default y;

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,!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 t from"react";import{observer as e}from"mobx-react-lite";import{Group as a,Rect as r,Path as s}from"react-konva";import{subTypeToPathDataFunc as i}from"../utils/figure-to-svg.js";import{isTouchDevice as o}from"../utils/screen.js";import{useColor as h}from"./use-color.js";const n={};export const FigureElement=e(({element:l,store:c})=>{const d=t.useRef(null),g=l.selectable||"admin"===c.role,m=o(),p=l.isSelected,f=Math.min(l.strokeWidth,l.width/2,l.height/2),w=Math.max(0,Math.min(l.width/2,l.height/2,l.cornerRadius)),u=h(l,l.a.fill,"fill"),b=Object.assign(Object.assign({width:l.a.width,height:l.a.height},u),{cornerRadius:w,opacity:l.animated("opacity"),shadowEnabled:l.shadowEnabled,shadowBlur:l.shadowBlur,shadowOffsetX:l.shadowOffsetX,shadowOffsetY:l.shadowOffsetY,shadowColor:l.shadowColor,shadowOpacity:l.shadowOpacity,preventDefault:!m||p,hideInExport:!l.showInExport}),y=h(l,l.stroke,"stroke"),x=Object.assign(Object.assign({visible:f>0,x:f/2,y:f/2,width:l.a.width-f,height:l.a.height-f},y),{strokeWidth:f,cornerRadius:Math.max(0,w-f),dash:l.dash.map(t=>t*f),opacity:l.animated("opacity"),hideInExport:!l.showInExport,listening:!1}),k=Math.max(0,10-Math.min(l.a.width,l.a.height)),E=(v=l.subType,n[v]||(n[v]=(O=i(v),e(({element:e,fillProps:i,strokeProps:o,hitStrokeWidth:h})=>{let n=O({width:e.a.width,height:e.a.height,cornerRadius:e.cornerRadius}),l=1,c=1;"string"!=typeof n&&(l=n.scaleX,c=n.scaleY,n=n.path);const d=t.useRef(null);return t.createElement(t.Fragment,null,t.createElement(r,{width:e.a.width,height:e.a.height,fill:"transparent",hitStrokeWidth:h}),t.createElement(s,Object.assign({},i,{ref:d,data:n,scaleX:l,scaleY:c})),t.createElement(a,{clipFunc:t=>{const e=d.current;if(e){var a=e.dataArray;t.beginPath();for(var r=0;r<a.length;r++){var s=a[r].command,i=a[r].points;switch(s){case"L":t.lineTo(i[0],i[1]);break;case"M":t.moveTo(i[0],i[1]);break;case"C":t.bezierCurveTo(i[0],i[1],i[2],i[3],i[4],i[5]);break;case"Q":t.quadraticCurveTo(i[0],i[1],i[2],i[3]);break;case"A":var o=i[0],h=i[1],n=i[2],l=i[3],c=i[4],g=i[5],m=i[6],p=i[7],f=n>l?n:l,w=n>l?1:n/l,u=n>l?l/n:1;t.translate(o,h),t.rotate(m),t.scale(w,u),t.arc(0,0,f,c,c+g,!p),t.scale(1/w,1/u),t.rotate(-m),t.translate(-o,-h);break;case"z":t.closePath()}}}},scaleX:l,scaleY:c},t.createElement(s,Object.assign({},o,{x:0,y:0,data:n,strokeWidth:2*o.strokeWidth,dash:o.dash.map(t=>t)}))))}))),n[v]||a);var v,O;return t.createElement(t.Fragment,null,t.createElement(a,{ref:d,id:l.id,x:l.a.x,y:l.a.y,rotation:l.a.rotation,opacity:l.a.opacity,listening:g,draggable:m?l.draggable&&p:l.draggable,name:"element",onDragMove:t=>{l.set({x:t.target.x(),y:t.target.y()})},onDragEnd:t=>{l.set({x:t.target.x(),y:t.target.y()})},onTransform:t=>{const e=t.target.scale();t.target.scaleX(1),t.target.scaleY(1),l.set({width:l.width*e.x,height:l.height*e.y,x:t.target.x(),y:t.target.y(),rotation:t.target.rotation()})}},t.createElement(E,{element:l,fillProps:b,strokeProps:x,hitStrokeWidth:k})))});

package/canvas/gif-element.js

@@ -1 +1 @@
-import e from"react";import{observer as t}from"mobx-react-lite";import{autorun as r}from"mobx";import{Image as a,Group as i,Rect as n,Arc as o,Text as h}from"react-konva";import d from"konva";import{parseGIF as s,decompressFrames as c}from"gifuct-js";import{useCornerRadiusAndCrop as l}from"./video-element.js";import{useImageLoader as g}from"./image-element.js";import{applyFilter as m}from"./apply-filters.js";import{useFadeIn as f}from"./use-fadein.js";import{isTouchDevice as u}from"../utils/screen.js";function p(e,t,r){const a=t.getContext("2d"),i=r.getContext("2d");if(!a||!i){return}2===e.disposalType&&a.clearRect(0,0,t.width,t.height),r.width=e.width,r.height=e.height;const n=i.createImageData(e.width,e.height);n.data.set(e.patch),i.putImageData(n,0,0),a.drawImage(r,e.left,e.top)}const w=t(({element:t})=>{const r=Math.min(30,t.width/4,t.height/4),a=e.useRef(null);return e.useEffect(()=>{const e=a.current;if(!e){return}const t=new d.Animation(t=>{e.rotate(((null==t?void 0:t.timeDiff)||0)/2)},e.getLayer());return t.start(),()=>{t.stop()}},[]),e.createElement(i,{x:t.a.x,y:t.a.y,rotation:t.a.rotation,listening:!1,opacity:t.a.opacity,hideInExport:!t.showInExport},e.createElement(n,{width:t.width,height:t.height,fill:"rgba(124, 173, 212, 0.8)"}),e.createElement(o,{ref:a,x:t.width/2,y:t.height/2,fill:"white",outerRadius:Math.abs(r),innerRadius:Math.max(1,r-5),angle:270}))}),y=t(({element:t})=>{const r=Math.max(10,Math.min(30,t.width/22));return e.createElement(i,{x:t.a.x,y:t.a.y,rotation:t.a.rotation,listening:!1,opacity:t.a.opacity,hideInExport:!t.showInExport},e.createElement(n,{width:t.width,height:t.height,fill:"rgba(223, 102, 102, 0.8)"}),e.createElement(h,{text:"Cannot load the GIF...",fontSize:r,width:t.width,height:t.height,align:"center",fill:"white",verticalAlign:"middle",padding:5}))});export const GifElement=t(({element:t,store:i})=>{var o;const[h,x]=e.useState(!1),E=i.selectedShapes.indexOf(t)>=0&&t.selectable,b=e.useRef(null),v=e.useRef(),[I,S,M,R]=function(t){const[r,a]=e.useState([]),[i,n]=e.useState(0),[o,h]=e.useState("loading"),[d,l]=e.useState({width:0,height:0});return e.useEffect(()=>{(async()=>{try{const e=await fetch(t),r=await e.arrayBuffer(),i=s(r),o=c(i,!0),d=i.lsd.width,g=i.lsd.height;l({width:d,height:g});const m=o.map(e=>({patch:new Uint8ClampedArray(e.patch),delay:e.delay,width:e.dims.width,height:e.dims.height,left:e.dims.left,top:e.dims.top,disposalType:e.disposalType})),f=m.reduce((e,t)=>e+t.delay,0);a(m),n(f),h("loaded")}catch(e){console.error("Failed to load GIF:",e),h("failed")}})()},[t]),[r,i,d,o]}(t.src);g(R,t.src,t.id),e.useEffect(()=>(v.current=document.createElement("canvas"),()=>{v.current&&d.Util.releaseCanvas(v.current)}),[]),e.useEffect(()=>{if("loaded"===R&&v.current&&(v.current.width=M.width,v.current.height=M.height,I.length>0)){const e=v.current.getContext("2d");if(e){e.clearRect(0,0,M.width,M.height);const t=document.createElement("canvas");p(I[0],v.current,t)}}},[M,R,I]),e.useEffect(()=>{if(!I.length||!v.current){return}const e=v.current;e.width=M.width,e.height=M.height;const a=document.createElement("canvas"),n=e.getContext("2d");n&&n.clearRect(0,0,e.width,e.height);let o=-1;p(I[0],e,a),D(),o=0;const h=t=>{const r=(e=>{const t=e%S;let r=0;for(let a=0;a<I.length;a++){if(r+=I[a].delay,r>t){return a}}return 0})(t);r!==o&&(p(I[r],e,a),D(),b.current.getLayer().draw(),o=r)};if(i.isPlaying||t.page._exportingOrRendering){return r(()=>{h(i.currentTime-t.page.startTime)})}{const e=window.setInterval(()=>{h(i.currentTime||performance.now())},16);return()=>{clearInterval(e)}}},[i.isPlaying,I,S,t.page._exportingOrRendering]),e.useEffect(()=>{S&&i.history.ignore(()=>{t.set({duration:S})})},[S]);let{cropX:C,cropY:T,cropWidth:O,cropHeight:z}=t;"loaded"!==R&&(C=T=0,O=z=1);const X={x:M.width*C,y:M.height*T,width:M.width*O,height:M.height*z},Y=null!==(o=t.cornerRadius)&&void 0!==o?o:0,[j,D]=l(t,v.current,X,i._elementsPixelRatio,Y,h||t._cropModeEnabled);e.useLayoutEffect(()=>{if(!h&&!t._cropModeEnabled&&b.current){return m(b.current,t),r(()=>{m(b.current,t)},{delay:100})}},[v.current,h,O,z,t._cropModeEnabled,M.width,M.height]);const _="loading"===R,k="failed"===R,F=_||k?0:t.a.opacity;f(b,F);const A=t.selectable||"admin"===i.role,B=u();return e.createElement(e.Fragment,null,_&&e.createElement(w,{element:t}),k&&e.createElement(y,{element:t}),e.createElement(a,{ref:b,name:"element",id:t.id,image:j,x:t.a.x,y:t.a.y,width:t.a.width||1,height:t.a.height||1,rotation:t.a.rotation,opacity:F,shadowEnabled:t.shadowEnabled,shadowBlur:t.shadowBlur,shadowOffsetX:t.shadowOffsetX,shadowOffsetY:t.shadowOffsetY,shadowColor:t.shadowColor,shadowOpacity:t.shadowOpacity,customCrop:X,listening:A,draggable:B?t.draggable&&E:t.draggable,preventDefault:!B||E,hideInExport:!t.showInExport,onDragMove:e=>{t.set({x:e.target.x(),y:e.target.y()})},onDragEnd:e=>{t.set({x:e.target.x(),y:e.target.y()})},onTransformStart:()=>x(!0),onTransform:e=>{const r=e.currentTarget,a=Math.abs(r.scaleX()-1)<1e-7?1:r.scaleX(),i=Math.abs(r.scaleY()-1)<1e-7?1:r.scaleY();r.scaleX(1),r.scaleY(1),t.set({x:r.x(),y:r.y(),width:r.width()*a,height:r.height()*i,rotation:r.rotation()})},onTransformEnd:()=>x(!1)}),e.createElement(n,{x:t.a.x,y:t.a.y,width:Math.max(t.a.width-t.borderSize,0),height:Math.max(t.a.height-t.borderSize,0),opacity:F,offsetX:-t.borderSize/2,offsetY:-t.borderSize/2,stroke:t.borderColor,strokeWidth:t.borderSize,listening:!1,visible:!!t.borderSize,rotation:t.rotation,cornerRadius:Math.max(0,Y-t.borderSize),hideInExport:!t.showInExport}))});
+import e from"react";import{observer as t}from"mobx-react-lite";import{autorun as r}from"mobx";import{Image as a,Group as i,Rect as o,Arc as n,Text as h}from"react-konva";import d from"konva";import{parseGIF as s,decompressFrames as l}from"gifuct-js";import{useCornerRadiusAndCrop as c}from"./video-element.js";import{useImageLoader as m}from"./image-element.js";import{useWorkspaceStyle as g}from"./workspace-style.js";import{applyFilter as f}from"./apply-filters.js";import{useFadeIn as u}from"./use-fadein.js";import{isTouchDevice as p}from"../utils/screen.js";function w(e,t,r){const a=t.getContext("2d"),i=r.getContext("2d");if(!a||!i){return}2===e.disposalType&&a.clearRect(0,0,t.width,t.height),r.width=e.width,r.height=e.height;const o=i.createImageData(e.width,e.height);o.data.set(e.patch),i.putImageData(o,0,0),a.drawImage(r,e.left,e.top)}const y=t(({element:t})=>{const r=Math.min(30,t.width/4,t.height/4),a=e.useRef(null);e.useEffect(()=>{const e=a.current;if(!e){return}const t=new d.Animation(t=>{e.rotate(((null==t?void 0:t.timeDiff)||0)/2)},e.getLayer());return t.start(),()=>{t.stop()}},[]);const{mediaLoadingStyle:h}=g();return e.createElement(i,{x:t.a.x,y:t.a.y,rotation:t.a.rotation,listening:!1,opacity:t.a.opacity,hideInExport:!t.showInExport},e.createElement(o,{width:t.width,height:t.height,fill:h.fill}),e.createElement(n,{ref:a,x:t.width/2,y:t.height/2,fill:h.textFill,outerRadius:Math.abs(r),innerRadius:Math.max(1,r-5),angle:270}))}),x=t(({element:t})=>{const{mediaErrorStyle:r}=g(),a=Math.max(10,Math.min(30,t.width/22));return e.createElement(i,{x:t.a.x,y:t.a.y,rotation:t.a.rotation,listening:!1,opacity:t.a.opacity,hideInExport:!t.showInExport},e.createElement(o,{width:t.width,height:t.height,fill:r.fill}),e.createElement(h,{text:"Cannot load the GIF...",fontSize:a,width:t.width,height:t.height,align:"center",fill:r.textFill,verticalAlign:"middle",padding:5}))});export const GifElement=t(({element:t,store:i})=>{var n;const[h,g]=e.useState(!1),E=t.isSelected,b=e.useRef(null),S=e.useRef(),[v,I,M,R]=function(t){const[r,a]=e.useState([]),[i,o]=e.useState(0),[n,h]=e.useState("loading"),[d,c]=e.useState({width:0,height:0});return e.useEffect(()=>{(async()=>{try{const e=await fetch(t),r=await e.arrayBuffer(),i=s(r),n=l(i,!0),d=i.lsd.width,m=i.lsd.height;c({width:d,height:m});const g=n.map(e=>({patch:new Uint8ClampedArray(e.patch),delay:e.delay,width:e.dims.width,height:e.dims.height,left:e.dims.left,top:e.dims.top,disposalType:e.disposalType})),f=g.reduce((e,t)=>e+t.delay,0);a(g),o(f),h("loaded")}catch(e){console.error("Failed to load GIF:",e),h("failed")}})()},[t]),[r,i,d,n]}(t.src);m(R,t.src,t.id),e.useEffect(()=>(S.current=document.createElement("canvas"),()=>{S.current&&d.Util.releaseCanvas(S.current)}),[]),e.useEffect(()=>{if("loaded"===R&&S.current&&(S.current.width=M.width,S.current.height=M.height,v.length>0)){const e=S.current.getContext("2d");if(e){e.clearRect(0,0,M.width,M.height);const t=document.createElement("canvas");w(v[0],S.current,t)}}},[M,R,v]),e.useEffect(()=>{if(!v.length||!S.current){return}const e=S.current;e.width=M.width,e.height=M.height;const a=document.createElement("canvas"),o=e.getContext("2d");o&&o.clearRect(0,0,e.width,e.height);let n=-1;w(v[0],e,a),D(),n=0;const h=t=>{const r=(e=>{const t=e%I;let r=0;for(let a=0;a<v.length;a++){if(r+=v[a].delay,r>t){return a}}return 0})(t);r!==n&&(w(v[r],e,a),D(),b.current.getLayer().draw(),n=r)};if(i.isPlaying||t.page._exportingOrRendering){return r(()=>{h(i.currentTime-t.page.startTime)})}{const e=window.setInterval(()=>{h(i.currentTime||performance.now())},16);return()=>{clearInterval(e)}}},[i.isPlaying,v,I,t.page._exportingOrRendering]),e.useEffect(()=>{I&&i.history.ignore(()=>{t.set({duration:I})})},[I]);let{cropX:C,cropY:T,cropWidth:z,cropHeight:O}=t;"loaded"!==R&&(C=T=0,z=O=1);const j={x:M.width*C,y:M.height*T,width:M.width*z,height:M.height*O},X=null!==(n=t.cornerRadius)&&void 0!==n?n:0,[Y,D]=c(t,S.current,j,i._elementsPixelRatio,X,h||t._cropModeEnabled);e.useLayoutEffect(()=>{if(!h&&!t._cropModeEnabled&&b.current){return f(b.current,t),r(()=>{f(b.current,t)},{delay:100})}},[S.current,h,z,O,t._cropModeEnabled,M.width,M.height]);const F="loading"===R,_="failed"===R,k=F||_?0:t.a.opacity;u(b,k);const L=t.selectable||"admin"===i.role,A=p();return e.createElement(e.Fragment,null,F&&e.createElement(y,{element:t}),_&&e.createElement(x,{element:t}),e.createElement(a,{ref:b,name:"element",id:t.id,image:Y,x:t.a.x,y:t.a.y,width:t.a.width||1,height:t.a.height||1,rotation:t.a.rotation,opacity:k,shadowEnabled:t.shadowEnabled,shadowBlur:t.shadowBlur,shadowOffsetX:t.shadowOffsetX,shadowOffsetY:t.shadowOffsetY,shadowColor:t.shadowColor,shadowOpacity:t.shadowOpacity,customCrop:j,listening:L,draggable:A?t.draggable&&E:t.draggable,preventDefault:!A||E,hideInExport:!t.showInExport,onDragMove:e=>{t.set({x:e.target.x(),y:e.target.y()})},onDragEnd:e=>{t.set({x:e.target.x(),y:e.target.y()})},onTransformStart:()=>g(!0),onTransform:e=>{const r=e.currentTarget,a=Math.abs(r.scaleX()-1)<1e-7?1:r.scaleX(),i=Math.abs(r.scaleY()-1)<1e-7?1:r.scaleY();r.scaleX(1),r.scaleY(1),t.set({x:r.x(),y:r.y(),width:r.width()*a,height:r.height()*i,rotation:r.rotation()})},onTransformEnd:()=>g(!1)}),e.createElement(o,{x:t.a.x,y:t.a.y,width:Math.max(t.a.width-t.borderSize,0),height:Math.max(t.a.height-t.borderSize,0),opacity:k,offsetX:-t.borderSize/2,offsetY:-t.borderSize/2,stroke:t.borderColor,strokeWidth:t.borderSize,listening:!1,visible:!!t.borderSize,rotation:t.rotation,cornerRadius:Math.max(0,X-t.borderSize),hideInExport:!t.showInExport}))});

package/canvas/highlighter.d.ts

@@ -1,6 +1,4 @@
 import React from 'react';
-import { RectConfig } from 'konva/lib/shapes/Rect';
-export declare const setHighlighterStyle: (style: RectConfig) => void;
 type SimplifiedElement = {
     a: {
         x: number;

package/canvas/highlighter.js

@@ -1 +1 @@
-import t from"react";import{observer as e}from"mobx-react-lite";import{Rect as i}from"react-konva";const r={stroke:"rgb(0, 161, 255)",strokeWidth:2};export const setHighlighterStyle=t=>{Object.assign(r,t)};export const Highlighter=e(({element:e})=>t.createElement(i,Object.assign({name:"highlighter",x:e.a.x,y:e.a.y,rotation:e.a.rotation,width:e.a.width,height:e.a.height,listening:!1,strokeScaleEnabled:!1},r)));
+import t from"react";import{observer as e}from"mobx-react-lite";import{Rect as r}from"react-konva";import{useWorkspaceStyle as i}from"./workspace-style.js";export const Highlighter=e(({element:e})=>{const{highlighterStyle:o}=i();return t.createElement(r,Object.assign({name:"highlighter",x:e.a.x,y:e.a.y,rotation:e.a.rotation,width:e.a.width,height:e.a.height,listening:!1,strokeScaleEnabled:!1},o))});

package/canvas/html-element.js

@@ -1,4 +1,4 @@
-import t from"react";import{observer as e}from"mobx-react-lite";import{Group as o,Image as n,Path as i,Rect as r}from"react-konva";import a from"quill";import l from"konva";import*as s from"mobx";import{reaction as c}from"mobx";import{flags as d}from"../utils/flags.js";import{applyFilter as f}from"./apply-filters.js";import{getLineHeight as u,useFontLoader as h,usePrevious as g}from"./text-element.js";import{getCurvePath as m,getDir as p,getHtml as x}from"../utils/text-html.js";import{useColor as w}from"./use-color.js";import{detectSize as y,htmlToCanvas as v,isContentWrapping as b}from"../utils/html2canvas.js";import{resetStyleContent as E}from"../utils/reset-style.js";import{useFadeIn as S}from"./use-fadein.js";import{Html as k}from"react-konva-utils";import F from"../utils/styled.js";import{incrementLoader as O,triggerLoadError as z}from"../utils/loader.js";import{removeTags as R}from"../utils/text.js";import*as C from"../utils/fonts.js";import{isTouchDevice as j}from"../utils/screen.js";import{getLimitedFontSize as T}from"./text-element/max-font-size.js";import{useDelayer as M}from"./use-delayer.js";import{getOptimalCaretColor as q}from"./text-element/caret-color.js";function A(t,e){if(1===e){return t}const o=l.Util.colorToRGBA(t);return o?`rgba(${o.r}, ${o.g}, ${o.b}, ${o.a*e})`:t}function P(t){const e=(t||"").trim();if("<p><br></p>"===e||"<p></p>"===e){return""}if(e.startsWith("<p>")&&e.endsWith("</p>")){const t=e.slice(3,-4);if(!/(<\/?(p|div|h[1-6]|ul|ol|li|table|thead|tbody|tr|td|blockquote)\b)/i.test(t)){return t}}return t}export const quillRef=s.observable({enabled:!1,currentFormat:{},editor:s.observable.object({instance:null},{},{deep:!1})});const Y=F("div",t.forwardRef)`
+import t from"react";import{observer as e}from"mobx-react-lite";import{Group as o,Image as n,Path as r,Rect as i}from"react-konva";import a from"quill";import l from"konva";import*as s from"mobx";import{reaction as c}from"mobx";import{flags as d}from"../utils/flags.js";import{applyFilter as f}from"./apply-filters.js";import{getLineHeight as u,useFontLoader as h,usePrevious as g}from"./text-element.js";import{getCurvePath as m,getDir as p,getHtml as x}from"../utils/text-html.js";import{useColor as y}from"./use-color.js";import{useWorkspaceStyle as w}from"./workspace-style.js";import{detectSize as b,detectLineRects as v,htmlToCanvas as E,isContentWrapping as S}from"../utils/html2canvas.js";import{generateBackgroundShapeFromRects as k}from"../utils/background-shape.js";import{resetStyleContent as F}from"../utils/reset-style.js";import{useFadeIn as O}from"./use-fadein.js";import{Html as R}from"react-konva-utils";import z from"../utils/styled.js";import{incrementLoader as C,triggerLoadError as j}from"../utils/loader.js";import{removeTags as T}from"../utils/text.js";import*as M from"../utils/fonts.js";import{isTouchDevice as Y}from"../utils/screen.js";import{getLimitedFontSize as q}from"./text-element/max-font-size.js";import{useDelayer as A}from"./use-delayer.js";import{getOptimalCaretColor as X}from"./text-element/caret-color.js";function I(t,e){if(1===e){return t}const o=l.Util.colorToRGBA(t);return o?`rgba(${o.r}, ${o.g}, ${o.b}, ${o.a*e})`:t}function $(t){const e=(t||"").trim();if("<p><br></p>"===e||"<p></p>"===e){return""}if(e.startsWith("<p>")&&e.endsWith("</p>")){const t=e.slice(3,-4);if(!/(<\/?(p|div|h[1-6]|ul|ol|li|table|thead|tbody|tr|td|blockquote)\b)/i.test(t)){return t}}return t}export const quillRef=s.observable({enabled:!1,currentFormat:{},editor:s.observable.object({instance:null},{},{deep:!1})});const L=z("div",t.forwardRef)`
   .ql-editor {
     outline: none;
   }
@@ -6,7 +6,7 @@ import t from"react";import{observer as e}from"mobx-react-lite";import{Group as
     pointer-events: none;
     opacity: 0;
   }
-  ${E}
+  ${F}
   strong {
     font-weight: 700;
   }
@@ -14,10 +14,10 @@ import t from"react";import{observer as e}from"mobx-react-lite";import{Group as
     direction: rtl;
   }
   /* Apply gradient fill to all text-bearing elements when --polotno-gradient is set */
-  &[style*="--polotno-gradient"] .ql-editor,
-  &[style*="--polotno-gradient"] .ql-editor p,
-  &[style*="--polotno-gradient"] .ql-editor li,
-  &[style*="--polotno-gradient"] .ql-editor li::before {
+  &[style*='--polotno-gradient'] .ql-editor,
+  &[style*='--polotno-gradient'] .ql-editor p,
+  &[style*='--polotno-gradient'] .ql-editor li,
+  &[style*='--polotno-gradient'] .ql-editor li::before {
     background-image: var(--polotno-gradient);
     background-size: 100% 100%;
     background-repeat: repeat;
@@ -27,4 +27,4 @@ import t from"react";import{observer as e}from"mobx-react-lite";import{Group as
     -webkit-text-fill-color: transparent;
     color: transparent;
   }
-`;let $=["bold","color","font","italic","size","strike","underline","indent","list","direction"];export const setQuillFormats=t=>{$=t};export const createQuill=t=>new a(t,{toolbar:!1,keyboard:!1,clipboard:{matchVisual:!1},formats:$});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 L=({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=(l=d.current,new a(l,{toolbar:!1,keyboard:!1,clipboard:{matchVisual:!1},formats:$}));var l;s.runInAction(()=>{quillRef.editor.instance=t}),window.__polotnoQuill=t,t.on("text-change",()=>{t.getSelection()&&s.runInAction(()=>{quillRef.currentFormat=t.getFormat(t.getSelection())}),setTimeout(()=>{var e,o;const r=null===(e=d.current)||void 0===e?void 0:e.childNodes[0];if(!r){return}const a=r.innerHTML;n(P(a));const l=t.getContents(),s=i.fill;let c=null,f=!0;for(const t of l.ops){if("string"!=typeof t.insert||"\n"===t.insert){continue}const e=(null===(o=t.attributes)||void 0===o?void 0:o.color)||s;if(null===c){c=e}else if(e!==c){f=!1;break}}f&&c&&i.set({fill:c})},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 c=d.current.childNodes[0],f=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()},u=e=>{f(e);const o=t.getSelection();o&&o.length>0&&t.deleteText(o.index,o.length)};return c.addEventListener("copy",f),c.addEventListener("cut",u),()=>{c.removeEventListener("copy",f),c.removeEventListener("cut",u),s.runInAction(()=>{quillRef.editor.instance=null,quillRef.currentFormat={}}),delete window.__polotnoQuill}},[]),t.useEffect(()=>c(()=>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];P((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["--polotno-gradient"]=i.fill,f.color="transparent");const u=q(i);return t.createElement(Y,{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(R(i.text))})};function X(t){const e=document.createElement("canvas"),o=e.getContext("2d");return null==o||o.drawImage(t,0,0,e.width,e.height),function(t){return!function(t){const e=t.getContext("2d").getImageData(0,0,t.width,t.height).data;for(let o=0;o<e.length;o+=4){if(0!==e[o+3]){return!0}}return!1}(t)}(e)}const I=/^((?!chrome|android).)*safari/i.test(navigator.userAgent),D=navigator.userAgent.includes("Firefox");export const HTMLElement=e(({element:e,store:a})=>{var c,p;const E=t.useRef(null),[F,q]=t.useState(),[P,$]=t.useState(!1),[W,H]=t.useState(!1),B=t.useRef(e.height),_=a.selectedShapes.indexOf(e)>=0&&e.selectable,N=g(_),Q=e.fontSize/3,{textVerticalResizeEnabled:J}=d,V=d.autoDeleteEmptyText,G=g(e.fontFamily),[U]=h(a,e.fontFamily,e.fontStyle,e.fontWeight,e.text||e.placeholder),K=e._editModeEnabled;S(E);const Z=U?e.fontFamily:G!==e.fontFamily?G:"Arial",tt=w(e).fill,et=x(e,{fontFamily:Z,color:tt}),ot=x(e,{fontFamily:Z,color:tt,forEditor:!0}),nt=t.useRef([]),[,it]=t.useReducer(t=>t+1,0);t.useEffect(()=>{const t=nt.current;t.length>0&&(nt.current=[],t.forEach(t=>t()))});let{width:rt,height:at}=function(e,o,n){return t.useMemo(()=>y(e),[e,o.width,n])}(et,e,U);t.useEffect(()=>{if(!U){return}const t=(t,o,n,i)=>{const r=O(`text ${e.id}`),l=()=>{a.history.ignore(t,o,n).then(()=>{nt.current.push(r),it()})};i?queueMicrotask(l):l()};if(!e.height){return void t(()=>{e.height||e.set({height:at})},void 0,void 0,!0)}const{textOverflow:o}=d;if("change-font-size"!==o||P){"resize"===o&&(J&&e.height<at&&!P&&t(()=>{e.set({height:at})},!1,!0),J||e.height===at||P||t(()=>{e.set({height:at})},!1,!0))}else{const o=(t=>{let e=t.fontSize;for(let o=1;o<50;o++){const o=x(Object.assign(Object.assign({},t.toJSON()),{fontSize:e}),{fontFamily:t.fontFamily}),{height:n}=y(o);if(!(t.height&&n>t.height||!d.textSplitAllowed&&!t.curveEnabled&&b({html:o}))){break}e-=.5}return e})(e);o!==e.fontSize?t(()=>{e.set({fontSize:o})},!1,!0):e.height!==at&&(J&&e.height<at?t(()=>{e.set({height:at})},!1,!0):J||t(()=>{e.set({height:at})},!1,!0))}});const lt=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 v(e),t.lastArgs=Object.assign({},e)),t.lastResult;var o,n}},[]),st=t.useRef(0),ct=t.useRef(null);t.useEffect(()=>{P||K||(async()=>{st.current++;const t=st.current;let o=O(`text ${e.id} ${t}`);ct.current&&ct.current(),ct.current=o,H(!0);let n=null;const i=I?5:1;for(let l=0;l<i;l++){const o=l>0?lt:v;try{if(n=await o({skipCache:l>0,html:et,width:e.width||1,height:e.height||at||1,fontFamily:Z,padding:Q,pixelRatio:a._elementsPixelRatio,font:a.fonts.find(t=>t.fontFamily===Z)||C.globalFonts.find(t=>t.fontFamily===Z)}),t!==st.current){return}if((I||D)&&n&&X(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?q(n):o?(o(),o=null):console.error("Finish function is called twice!"),H(!1)})()},[et,P,at,K,Z,e.height,a._elementsPixelRatio,U]);const[dt,ft]=M(W,300),[ut]=M(P,300,!0),ht=ut||dt;t.useEffect(()=>{var t;if(!ht){return s.autorun(()=>{const t=E.current;f(t,e)})}null===(t=E.current)||void 0===t||t.clearCache()},[F,ht,e.shadowColor,e.shadowOffsetX,e.shadowOffsetY,e.shadowOpacity]),t.useEffect(()=>{F&&!W&&ct.current&&(ct.current(),ct.current=null)},[F,W]),t.useLayoutEffect(()=>{if(!U){return}if(!e.curveEnabled){return}const t=new l.TextPath({data:m(e.a.width,e.a.height,e.curvePower,e.a.fontSize),text:R(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);queueMicrotask(()=>{e.set({width:o,x:e.a.x+i,y:e.a.y+r})})}t.destroy()},[U,e.curveEnabled,e.curvePower,e.text,e.fontSize,e.fontFamily,e.fontWeight,e.fontStyle,e.letterSpacing]),t.useEffect(()=>()=>{ct.current&&ct.current()},[]),t.useEffect(()=>{N&&!_&&V&&""===R(e.text)&&e.removable&&!e.placeholder&&a.deleteElements([e.id])},[V,e.placeholder,e.removable,e.text,_,N]);let gt=0;"middle"===e.verticalAlign&&(gt=(e.height-at)/2),"bottom"===e.verticalAlign&&(gt=e.height-at);const mt=u({fontLoaded:U,fontFamily:e.fontFamily,fontSize:e.fontSize,lineHeight:e.lineHeight}),pt=j(),xt=m(e.a.width,at,e.curvePower,e.fontSize),wt=t.useRef(null),yt=t.useRef(null),vt=K&&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*mt*.5),offsetY:e.backgroundPadding*(e.fontSize*mt*.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*mt),height:e.a.height+e.backgroundPadding*(e.fontSize*mt),cornerRadius:e.backgroundCornerRadius*(e.fontSize*mt*.5)}),t.createElement(i,{x:e.a.x,y:e.a.y,rotation:e.a.rotation,data:xt,stroke:"red",strokeWidth:1,visible:!1}),t.createElement(r,{ref:E,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:!ht,draggable:pt?e.draggable&&_:e.draggable,preventDefault:!pt||_,opacity:K?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&&(yt.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];yt.current=n?{x:n.clientX,y:n.clientY}:null,e.toggleEditMode(!0)}},onTransformStart:t=>{$(!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;o<i&&(r=i,wt.current&&n.position(wt.current)),n.width(r),n.scaleX(1),n.scaleY(1);const a=x(Object.assign(Object.assign({},e.toJSON()),{width:r}),{fontFamily:Z,color:tt}),l=y(a).height,s=d.textVerticalResizeEnabled?Math.max(l,B.current):l;n.height(s),e.set({width:n.width(),height:s,x:n.x(),y:n.y()})}else if(a){const o="resize"===d.textOverflow,i="number"==typeof e.lineHeight?e.lineHeight:1;let r=o?at: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})}wt.current=t.target.position()},onTransformEnd:t=>{$(!1),H(!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:E,image:F,x:e.a.x,y:e.a.y,offsetX:Q,offsetY:Q-gt,listening:!1,rotation:e.a.rotation,width:e.a.width+2*Q,height:(e.a.width+2*Q)*((null!==(c=null==F?void 0:F.height)&&void 0!==c?c:0)/((null==F?void 0:F.width)||1)||1),visible:!ht&&!K,opacity:e.a.opacity,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,hideInExport:!e.showInExport,editModeEnabled:e._editModeEnabled||P||ht}),(ht||vt)&&t.createElement(o,{x:e.a.x,y:e.a.y,rotation:e.a.rotation,offsetY:-gt},t.createElement(k,{divProps:{style:{pointerEvents:"none"}}},t.createElement(Y,{dangerouslySetInnerHTML:{__html:et},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}}))),K&&t.createElement(o,{x:e.a.x,y:e.a.y,rotation:e.a.rotation,offsetY:-gt},t.createElement(k,null,t.createElement(L,{html:ot,element:e,onChange:t=>{const o=T({oldText:R(e.text),newText:R(t),element:e});e.set({text:t,fontSize:o})},onBlur:t=>{e.toggleEditMode(!1),ft(!0)},clickCoords:yt.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 P=["background","bold","color","font","italic","size","strike","underline","indent","list","direction"];export const setQuillFormats=t=>{P=t};export const createQuill=t=>new a(t,{toolbar:!1,keyboard:!1,clipboard:{matchVisual:!1},formats:P});export const setQuillContent=(t,e)=>{var o=t.clipboard.convert("<div class='ql-editor' style='outline: none;'>"+e+"<p><br></p></div>");t.setContents(o),t.history.clear()};const B=({html:e,onBlur:o,onChange:n,element:r,clickCoords:i})=>{var l;const d=t.useRef(null);t.useEffect(()=>{if(!d.current){return}const t=(l=d.current,new a(l,{toolbar:!1,keyboard:!1,clipboard:{matchVisual:!1},formats:P}));var l;s.runInAction(()=>{quillRef.editor.instance=t}),window.__polotnoQuill=t,t.on("text-change",()=>{t.getSelection()&&s.runInAction(()=>{quillRef.currentFormat=t.getFormat(t.getSelection())}),setTimeout(()=>{var e,o;const i=null===(e=d.current)||void 0===e?void 0:e.childNodes[0];if(!i){return}const a=i.innerHTML;n($(a));const l=t.getContents(),s=r.fill;let c=null,f=!0;for(const t of l.ops){if("string"!=typeof t.insert||"\n"===t.insert){continue}const e=(null===(o=t.attributes)||void 0===o?void 0:o.color)||s;if(null===c){c=e}else if(e!==c){f=!1;break}}f&&c&&r.set({fill:c})},10)}),setQuillContent(t,e),i?setCursorFromCoords(t,i):t.setSelection(0,0,"api"),t.on("selection-change",(e,o,n)=>{e&&s.runInAction(()=>{quillRef.currentFormat=t.getFormat(t.getSelection())})}),d.current.childNodes[0].addEventListener("blur",t=>{const e=t.relatedTarget;if(null==e?void 0:e.classList.contains("ql-clipboard")){return}const n=function(t){return!!t&&!!t.closest(".sketch-picker")}(e);n||o()});const c=d.current.childNodes[0],f=e=>{var o,n;const r=t.getSelection();if(!r||0===r.length){return}const i=t.getText(r.index,r.length).replace(/\n$/,""),a=window.getSelection();let l="";if(a&&a.rangeCount>0){const t=a.getRangeAt(0),e=document.createElement("div");e.appendChild(t.cloneContents()),l=e.innerHTML}if(null===(o=e.clipboardData)||void 0===o||o.setData("text/plain",i),l){const t='<!DOCTYPE html><html><head><meta charset="utf-8"></head><body>\x3c!--StartFragment--\x3e<div style="white-space: pre-wrap; word-wrap: break-word;">'+l+"</div>\x3c!--EndFragment--\x3e</body></html>";null===(n=e.clipboardData)||void 0===n||n.setData("text/html",t)}e.preventDefault()},u=e=>{f(e);const o=t.getSelection();o&&o.length>0&&t.deleteText(o.index,o.length)};return c.addEventListener("copy",f),c.addEventListener("cut",u),()=>{c.removeEventListener("copy",f),c.removeEventListener("cut",u),s.runInAction(()=>{quillRef.editor.instance=null,quillRef.currentFormat={}}),delete window.__polotnoQuill}},[]),t.useEffect(()=>c(()=>r.text,()=>{var t,e;const o=quillRef.editor.instance;if(!o){return}const n=o.getSelection(),i=null===(e=null===(t=d.current)||void 0===t?void 0:t.childNodes)||void 0===e?void 0:e[0];$((null==i?void 0:i.innerHTML)||"")===r.text||(setQuillContent(o,x(r,{forEditor:!0})),n&&(o.setSelection(n.index,n.length),s.runInAction(()=>{quillRef.currentFormat=o.getFormat(o.getSelection())})))},{fireImmediately:!0}),[]),t.useEffect(()=>{window.addEventListener("blur",o);const t=t=>{var e;(null===(e=d.current)||void 0===e?void 0:e.contains(t.target))||o()};return window.addEventListener("touchstart",t),()=>{window.removeEventListener("blur",o),window.removeEventListener("touchstart",t)}},[]);const f={color:r.fill};r.fill.indexOf("gradient")>=0&&(f["--polotno-gradient"]=r.fill,f.color="transparent");const u=X(r);return t.createElement(L,{ref:d,style:Object.assign(Object.assign({},f),{fontSize:r.fontSize,fontWeight:r.fontWeight,textTransform:r.textTransform,width:r.a.width,fontFamily:'"'+r.fontFamily+'"',lineHeight:r.lineHeight,letterSpacing:r.letterSpacing*r.fontSize+"px",textAlign:r.align,opacity:Math.max(r.a.opacity,.2),textShadow:r.shadowEnabled?`${r.shadowOffsetX}px ${r.shadowOffsetY}px ${r.shadowBlur}px ${I(r.shadowColor,null!==(l=r.shadowOpacity)&&void 0!==l?l:1)}`:void 0,caretColor:u}),dir:p(T(r.text))})};function D(t){const e=document.createElement("canvas"),o=e.getContext("2d");return null==o||o.drawImage(t,0,0,e.width,e.height),function(t){return!function(t){const e=t.getContext("2d").getImageData(0,0,t.width,t.height).data;for(let o=0;o<e.length;o+=4){if(0!==e[o+3]){return!0}}return!1}(t)}(e)}const W=/^((?!chrome|android).)*safari/i.test(navigator.userAgent),H=navigator.userAgent.includes("Firefox");export const HTMLElement=e(({element:e,store:a})=>{var c,p;const{textOverflowIndicatorStyle:F}=w(),z=t.useRef(null),[X,$]=t.useState(),[P,_]=t.useState(!1),[N,Q]=t.useState(!1),J=t.useRef(e.height),V=e.isSelected,G=g(V),U=e.fontSize/3,{textVerticalResizeEnabled:K}=d,Z=d.autoDeleteEmptyText,tt=g(e.fontFamily),[et]=h(a,e.fontFamily,e.fontStyle,e.fontWeight,e.text||e.placeholder),ot=e._editModeEnabled;O(z);const nt=et?e.fontFamily:tt!==e.fontFamily?tt:"Arial",rt=y(e).fill,it=x(e,{fontFamily:nt,color:rt}),at=x(e,{fontFamily:nt,color:rt,forEditor:!0}),lt=t.useRef([]),[,st]=t.useReducer(t=>t+1,0);t.useEffect(()=>{const t=lt.current;t.length>0&&(lt.current=[],t.forEach(t=>t()))});let{width:ct,height:dt}=function(e,o,n){return t.useMemo(()=>b(e),[e,o.width,n])}(it,e,et);t.useEffect(()=>{if(!et){return}const t=(t,o,n,r)=>{const i=C(`text ${e.id}`),l=()=>{a.history.ignore(t,o,n).then(()=>{lt.current.push(i),st()})};r?queueMicrotask(l):l()};if(!e.height){return void t(()=>{e.height||e.set({height:dt})},void 0,void 0,!0)}const{textOverflow:o}=d;if("change-font-size"!==o||P){"resize"===o&&(K&&e.height<dt&&!P&&t(()=>{e.set({height:dt})},!1,!0),K||e.height===dt||P||t(()=>{e.set({height:dt})},!1,!0))}else{const o=(t=>{let e=t.fontSize;for(let o=1;o<50;o++){const o=x(Object.assign(Object.assign({},t.toJSON()),{fontSize:e}),{fontFamily:t.fontFamily}),{height:n}=b(o);if(!(t.height&&n>t.height||!d.textSplitAllowed&&!t.curveEnabled&&S({html:o}))){break}e-=.5}return e})(e);o!==e.fontSize?t(()=>{e.set({fontSize:o})},!1,!0):e.height!==dt&&(K&&e.height<dt?t(()=>{e.set({height:dt})},!1,!0):K||t(()=>{e.set({height:dt})},!1,!0))}});const ft=t.useMemo(()=>{const t={lastArgs:null,lastResult:null};return async function(e){return t.lastArgs&&t.lastResult&&(o=t.lastArgs,n=e,JSON.stringify(o)===JSON.stringify(n))||(t.lastResult=await E(e),t.lastArgs=Object.assign({},e)),t.lastResult;var o,n}},[]),ut=t.useRef(0),ht=t.useRef(null);t.useEffect(()=>{P||ot||(async()=>{ut.current++;const t=ut.current;let o=C(`text ${e.id} ${t}`);ht.current&&ht.current(),ht.current=o,Q(!0);let n=null;const r=W?5:1;for(let l=0;l<r;l++){const o=l>0?ft:E;try{if(n=await o({skipCache:l>0,html:it,width:e.width||1,height:e.height||dt||1,fontFamily:nt,padding:U,pixelRatio:a._elementsPixelRatio,font:a.fonts.find(t=>t.fontFamily===nt)||M.globalFonts.find(t=>t.fontFamily===nt)}),t!==ut.current){return}if((W||H)&&n&&D(n)){await new Promise(t=>setTimeout(t,50*(l+1)));continue}break}catch(i){console.error(i),j(`Error rendering rich text with id ${e.id}`);break}}n?$(n):o?(o(),o=null):console.error("Finish function is called twice!"),Q(!1)})()},[it,P,dt,ot,nt,e.height,a._elementsPixelRatio,et]);const[gt,mt]=A(N,300),[pt]=A(P,300,!0),xt=pt||gt;t.useEffect(()=>{var t;if(!xt){return s.autorun(()=>{const t=z.current;f(t,e)})}null===(t=z.current)||void 0===t||t.clearCache()},[X,xt,e.shadowColor,e.shadowOffsetX,e.shadowOffsetY,e.shadowOpacity]),t.useEffect(()=>{X&&!N&&ht.current&&(ht.current(),ht.current=null)},[X,N]),t.useLayoutEffect(()=>{if(!et){return}if(!e.curveEnabled){return}const t=new l.TextPath({data:m(e.a.width,e.a.height,e.curvePower,e.a.fontSize),text:T(e.text),letterSpacing:e.letterSpacing*e.a.fontSize,fontSize:e.a.fontSize,fontFamily:e.fontFamily,fontWeight:e.fontWeight,fontStyle:e.fontStyle,align:"center",textBaseline:"middle",fill:e.fill}),o=t.getSelfRect().width;if(o){const t=o-e.a.width,n=e.a.rotation*Math.PI/180,r=-t/2*Math.cos(n),i=-t/2*Math.sin(n);queueMicrotask(()=>{e.set({width:o,x:e.a.x+r,y:e.a.y+i})})}t.destroy()},[et,e.curveEnabled,e.curvePower,e.text,e.fontSize,e.fontFamily,e.fontWeight,e.fontStyle,e.letterSpacing]),t.useEffect(()=>()=>{ht.current&&ht.current()},[]),t.useEffect(()=>{G&&!V&&Z&&""===T(e.text)&&e.removable&&!e.placeholder&&a.deleteElements([e.id])},[Z,e.placeholder,e.removable,e.text,V,G]);let yt=0;"middle"===e.verticalAlign&&(yt=(e.height-dt)/2),"bottom"===e.verticalAlign&&(yt=e.height-dt);const wt=u({fontLoaded:et,fontFamily:e.fontFamily,fontSize:e.fontSize,lineHeight:e.lineHeight}),bt=e.backgroundPadding*(e.fontSize*wt*.5),vt=e.backgroundCornerRadius*(e.fontSize*wt*.5),Et=t.useMemo(()=>{if(!e.backgroundEnabled||e.curveEnabled||e.legacyBackground){return""}const t=v(it);if(0===t.length){return""}const o=t.map(t=>({left:t.left+U,right:t.right+U,top:t.top+U,bottom:t.bottom+U}));return k({rects:o,padding:bt,cornerRadius:vt})},[e.backgroundEnabled,e.curveEnabled,e.legacyBackground,it,et,bt,vt,U]),St=Y(),kt=m(e.a.width,dt,e.curvePower,e.fontSize),Ft=t.useRef(null),Ot=t.useRef(null),Rt=ot&&e.strokeWidth>0&&!e.curveEnabled,zt=ct>0?(e.a.width+2*U)/(ct+2*U):1;return t.createElement(t.Fragment,null,e.curveEnabled||e.legacyBackground?t.createElement(i,{x:e.a.x,y:e.a.y,offsetX:bt/zt,offsetY:bt/zt,rotation:e.a.rotation,scaleX:zt,scaleY:zt,hideInExport:!e.showInExport,listening:!1,visible:e.backgroundEnabled,opacity:e.backgroundOpacity*e.a.opacity,fill:e.backgroundColor,width:e.width+2*bt,height:e.height+2*bt,cornerRadius:vt}):t.createElement(r,{name:"html-background",x:e.a.x,y:e.a.y,offsetX:U/zt,offsetY:(U-yt)/zt,rotation:e.a.rotation,scaleX:zt,scaleY:zt,hideInExport:!e.showInExport,listening:!1,visible:e.backgroundEnabled&&Et.length>0,opacity:e.backgroundOpacity*e.a.opacity,fill:e.backgroundColor,data:Et}),t.createElement(r,{x:e.a.x,y:e.a.y,rotation:e.a.rotation,data:kt,stroke:F.stroke,strokeWidth:1,visible:!1}),t.createElement(i,{ref:z,name:"element",x:e.a.x,y:e.a.y,listening:e.selectable,rotation:e.a.rotation,width:e.a.width,height:e.a.height,visible:!xt,draggable:St?e.draggable&&V:e.draggable,preventDefault:!St||V,opacity:ot?0:e.a.opacity,hideInExport:!e.showInExport,onDragMove:t=>{e.set({x:t.target.x(),y:t.target.y()})},onDragEnd:t=>{e.set({x:t.target.x(),y:t.target.y()})},id:e.id,onDblClick:t=>{e.contentEditable&&(Ot.current={x:t.evt.clientX,y:t.evt.clientY},e.toggleEditMode(!0))},onDblTap:t=>{var o;if(e.contentEditable){const n=null===(o=t.evt.changedTouches)||void 0===o?void 0:o[0];Ot.current=n?{x:n.clientX,y:n.clientY}:null,e.toggleEditMode(!0)}},onTransformStart:t=>{_(!0),J.current=e.height},onTransform:t=>{var o;const n=t.target,r=(null===(o=n.getStage())||void 0===o?void 0:o.findOne("Transformer")).getActiveAnchor(),i="middle-left"===r||"middle-right"===r,a="top-center"===r||"bottom-center"===r,l=n.scaleX();if(i){const t=n.scaleX(),o=n.width()*t,r=e.fontSize;let i=o;o<r&&(i=r,Ft.current&&n.position(Ft.current)),n.width(i),n.scaleX(1),n.scaleY(1);const a=x(Object.assign(Object.assign({},e.toJSON()),{width:i}),{fontFamily:nt,color:rt}),l=b(a).height,s=d.textVerticalResizeEnabled?Math.max(l,J.current):l;n.height(s),e.set({width:n.width(),height:s,x:n.x(),y:n.y()})}else if(a){const o="resize"===d.textOverflow,r="number"==typeof e.lineHeight?e.lineHeight:1;let i=o?dt:r*e.fontSize;const a=Math.max(i,t.target.height()*t.target.scaleY());n.scaleY(1),e.set({x:n.x(),y:n.y(),height:a,rotation:n.rotation()})}else{n.scaleX(1),n.scaleY(1),e.set({fontSize:e.fontSize*l,letterSpacing:e.letterSpacing,width:n.width()*l,x:n.x(),y:n.y(),rotation:n.rotation(),height:n.height()*l})}Ft.current=t.target.position()},onTransformEnd:t=>{_(!1),Q(!0);const o=t.target.scaleX();t.target.scaleX(1),t.target.scaleY(1),e.set({fontSize:e.fontSize*o,width:t.target.width()*o,x:t.target.x(),y:t.target.y(),rotation:t.target.rotation(),shadowBlur:e.shadowBlur*o,shadowOffsetX:e.shadowOffsetX*o,shadowOffsetY:e.shadowOffsetY*o,strokeWidth:e.strokeWidth*o})}}),t.createElement(n,{ref:z,image:X,x:e.a.x,y:e.a.y,offsetX:U,offsetY:U-yt,listening:!1,rotation:e.a.rotation,width:e.a.width+2*U,height:(e.a.width+2*U)*((null!==(c=null==X?void 0:X.height)&&void 0!==c?c:0)/((null==X?void 0:X.width)||1)||1),visible:!xt&&!ot,opacity:e.a.opacity,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,hideInExport:!e.showInExport,editModeEnabled:e._editModeEnabled||P||xt}),(xt||Rt)&&t.createElement(o,{x:e.a.x,y:e.a.y,rotation:e.a.rotation,offsetY:-yt},t.createElement(R,{divProps:{style:{pointerEvents:"none"}}},t.createElement(L,{dangerouslySetInnerHTML:{__html:it},style:{pointerEvents:"none",opacity:e.a.opacity,textShadow:e.shadowEnabled?`${e.shadowOffsetX}px ${e.shadowOffsetY}px ${e.shadowBlur}px ${I(e.shadowColor,null!==(p=e.shadowOpacity)&&void 0!==p?p:1)}`:void 0}}))),ot&&t.createElement(o,{x:e.a.x,y:e.a.y,rotation:e.a.rotation,offsetY:-yt},t.createElement(R,null,t.createElement(B,{html:at,element:e,onChange:t=>{const o=q({oldText:T(e.text),newText:T(t),element:e});e.set({text:t,fontSize:o})},onBlur:t=>{e.toggleEditMode(!1),mt(!0)},clickCoords:Ot.current}))))});export function setCursorFromCoords(t,e){if(!t||!e){return}const{x:o,y:n}=e;try{let e=null;if(document.caretRangeFromPoint){e=document.caretRangeFromPoint(o,n)}else if(document.caretPositionFromPoint){const t=document.caretPositionFromPoint(o,n);t&&(e=document.createRange(),e.setStart(t.offsetNode,t.offset))}if(e){const o=a.find(e.startContainer,!0);if(o){const n=o.offset(t.scroll)+e.startOffset;return void t.setSelection(n,0,"api")}}}catch(r){}t.setSelection(0,0,"api")}

package/canvas/image-element.d.ts

@@ -1,10 +1,7 @@
 import React from 'react';
-import { TransformerConfig } from 'konva/lib/shapes/Transformer';
 import { StoreType } from '../model/store.js';
 import { ImageElementType } from '../model/image-model.js';
 export declare const useSizeFixer: (src: string) => string;
-export declare const setInnerImageCropTransformerStyle: (style: TransformerConfig) => void;
-export declare const setOuterImageCropTransformerStyle: (style: TransformerConfig) => void;
 export declare const useCornerRadiusAndCrop: (element: ImageElementType, image: HTMLImageElement | HTMLCanvasElement | undefined, crop: {
     x: number;
     y: number;

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!==(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})))))});
+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 d from"use-image";import s from"konva";import{Portal as l}from"react-konva-utils";import{useWorkspaceStyle as g}from"./workspace-style.js";import{incrementLoader as u,triggerLoadError as m}from"../utils/loader.js";import*as f from"../utils/svg.js";import{flags as p}from"../utils/flags.js";import{trySetCanvasSize as w}from"../utils/canvas.js";import{applyFilter as x}from"./apply-filters.js";import{useFadeIn as y}from"./use-fadein.js";import{isTouchDevice as M}from"../utils/screen.js";import{useDelayer as v}from"./use-delayer.js";import{useColor as E}from"./use-color.js";function b(){return document.createElement("canvas")}const S=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(!S(t)){return t}const e=await f.urlToString(t),r=f.fixSize(e);return f.svgToURL(r)}(e);t!==r&&a(t)})()},[e]),r};function R(t,e){return{x:(t.x+e.x)/2,y:(t.y+e.y)/2}}const C=["top-left","top-right","bottom-left","bottom-right"],I=(t,e)=>e.width<5||e.height<5?t:e,X={enabledAnchors:C,keepRatio:!1,rotateEnabled:!1,boundBoxFunc:I},Y={enabledAnchors:C,rotateEnabled:!1,borderEnabled:!1,boundBoxFunc:I};const O=(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(O(e.a.width*o,1,1e4)),d=Math.floor(O(e.a.height*o,1,1e4)),l=Math.min(i*o,c/2,d/2),g=Math.max(e.a.width/a.width,e.a.height/a.height)*o,u=e.page._exportingOrRendering&&p.imageDownScalingEnabled&&g<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),f=t.useMemo(()=>{if(r&&r.width&&r.height){return m&&0===l&&!u?void 0:b()}},[r,l,u,m]);return t.useLayoutEffect(()=>{if(!f||!r){return}w(f,c,d);const t=f.getContext("2d");if(!t){return}l&&(t.beginPath(),t.moveTo(l,0),t.lineTo(c-l,0),t.arc(c-l,l,l,3*Math.PI/2,0,!1),t.lineTo(c,d-l),t.arc(c-l,d-l,l,0,Math.PI/2,!1),t.lineTo(l,d),t.arc(l,d-l,l,Math.PI/2,Math.PI,!1),t.lineTo(0,l),t.arc(l,l,l,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),d=t.width,s=new Int32Array(h.data.buffer),l=h.width,g=e/i,u=r/n,m=Math.round(1/g),f=Math.round(1/u),p=m*f,w=0;w<h.height;w++){for(var x=0;x<l;x++){for(var y=0+Math.round(x/g)+(0+Math.round(w/u))*d,M=0,v=0,E=0,b=0,S=0;S<f;S++){for(var R=0;R<m;R++){var C=c[y+R+S*d];M+=C<<24>>>24,v+=C<<16>>>24,E+=C<<8>>>24,b+=C>>>24}}M=Math.round(M/p),v=Math.round(v/p),E=Math.round(E/p),b=Math.round(b/p),s[x+w*l]=b<<24|E<<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,g):r,o=u?{x:Math.floor(a.x*g),y:Math.floor(a.y*g),width:Math.floor(a.width*g),height:Math.floor(a.height*g)}:a;t.drawImage(e,o.x,o.y,o.width,o.height,0,0,f.width,f.height)},[f,e.a.width,e.a.height,a.x,a.y,a.width,a.height,i,o,n,e.page._exportingOrRendering,u]),t.useEffect(()=>()=>{f&&"CANVAS"===f.nodeName&&s.Util.releaseCanvas(f)},[f]),f||r};const T=b(),A=e(({element:e})=>{const r=Math.min(30,e.a.width/4,e.a.height/4),i=t.useRef(null);t.useEffect(()=>{const t=i.current;if(!t){return}const e=new s.Animation(e=>{t.rotate(((null==e?void 0:e.timeDiff)||0)/2)},t.getLayer());return e.start(),()=>{e.stop()}});const{mediaLoadingStyle:h}=g();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:h.fill}),t.createElement(a,{ref:i,x:e.a.width/2,y:e.a.height/2,fill:h.textFill,outerRadius:Math.abs(r),innerRadius:Math.max(1,r-5),angle:270}))}),D=e(({element:e})=>{const{mediaErrorStyle:r}=g(),a=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:r.fill}),t.createElement(h,{text:"Can not load the image...",fontSize:a,width:e.a.width,height:e.a.height,align:"center",fill:r.textFill,verticalAlign:"middle",padding:5}))});let L=d;export const setImageLoaderHook=t=>{L=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=u(n)),"loading"!==e&&i(),"failed"===e&&m(n)},[e])};export const ImageElement=e(({element:e,store:a})=>{var h;const d=g(),[u,m]=t.useState(!1),p=t.useRef(null),C=t.useRef(null),I=e.isSelected,[O,W]=(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(()=>S(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 f.urlToString(e.src),n=f.fixSize(r);let h;h=e.colorsReplace?f.replaceColors(n,e.colorsReplace||new Map):f.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),[_,k]=L(O,"anonymous"),H="svg"!==e.type||"loaded"===W?k:"loading";useImageLoader(H,e.src,e.id);const z=e.page._exportingOrRendering?1:Math.max(1,a.scale),P=a._elementsPixelRatio*z,j=(({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:_,status:k,type:e.type}),F=((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,d=(/^((?!chrome|android).)*safari/i.test(navigator.userAgent)||c)&&h||e.maskSrc;if(!i&&!n&&!d){return r}if(!r||!r.width||!r.height){return null}const s=b();let l=1;"svg"===e.type&&(l=Math.max(e.a.width/r.width*a,e.a.height/r.height*a)),w(s,Math.max(r.width*l,1),Math.max(r.height*l,1));let g=i?-s.width:0,u=n?-s.height:0;return null===(t=s.getContext("2d"))||void 0===t||t.scale(i?-1:1,n?-1:1),null===(o=s.getContext("2d"))||void 0===o||o.drawImage(r,g,u,s.width,s.height),s},[e.maskSrc,e.flipX,e.flipY,r,e.a.width,e.a.height,a]);return t.useEffect(()=>()=>{o&&"CANVAS"===o.nodeName&&s.Util.releaseCanvas(o)},[o]),o})(e,_||j,P),B=((e,r)=>{const a=useSizeFixer(e.maskSrc||""),[o,i]=L(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,F)||T;let{cropX:N,cropY:U,cropWidth:V,cropHeight:$}=e.a;"loaded"!==k&&(N=U=0,V=$=1);const q=B.width*V,J=B.height*$,G=e.a.width/e.a.height;let K,Q;const Z=q/J,tt=e.stretchEnabled;tt?(K=q,Q=J):G>=Z?(K=q,Q=q/G):(K=J*G,Q=J);const et={x:B.width*N,y:B.height*U,width:K,height:Q},rt=null!==(h=e.cornerRadius)&&void 0!==h?h:0,at=e.page._exportingOrRendering?1:Math.min(2,a.scale),ot=a._elementsPixelRatio*at;let it=((e,r,a,o)=>{const i=useSizeFixer(e.clipSrc||""),[n,h]=L(i,"anonymous"),c=e.clipSrc?h:"loaded";useImageLoader(c,e.clipSrc,e.id);const d=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(!d){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),d.width=Math.max(r.width,1),d.height=Math.max(r.height,1);const h=d.getContext("2d");h&&(h.save(),h.drawImage(o,0,0,r.width,r.height),s.Util.releaseCanvas(o),h.globalCompositeOperation="source-in",h.drawImage(r,0,0,d.width,d.height),h.restore())},[d,r,n,e.a.width,e.a.height,a,...o]),e.clipSrc&&n?d:r})(e,useCornerRadiusAndCrop(e,B,et,ot,rt,u||e._cropModeEnabled||"svg"===e.type,!0),ot,[et,rt,ot]);const nt=Math.max(e.a.width/K,e.a.height/Q);t.useEffect(()=>{var t;if(!e._cropModeEnabled){return}const r=null===(t=p.current)||void 0===t?void 0:t.getStage();function a(t){e._cropModeEnabled&&t.target!==C.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(!u&&!e._cropModeEnabled){return x(p.current,e),r(()=>{x(p.current,e)},{delay:100})}},[it,e.page._exportingOrRendering,u,V,$,e._cropModeEnabled]),t.useLayoutEffect(()=>{var t;u||e._cropModeEnabled?null===(t=p.current)||void 0===t||t.clearCache():x(p.current,e)},[u,e.a.width,e.a.height,e._cropModeEnabled]),t.useEffect(()=>{x(p.current,e)},[e.shadowEnabled,e.shadowBlur,e.cornerRadius,e.shadowColor,e.shadowOffsetX,e.shadowOffsetY,e.shadowOpacity]);const ht=t.useRef(null),ct=t.useRef(null),dt=t.useRef(null);t.useLayoutEffect(()=>{e._cropModeEnabled&&(ct.current.nodes([ht.current]),dt.current.nodes([C.current]))},[e._cropModeEnabled]);var st=t.useRef(null),lt=t.useRef(0),gt=t.useRef(!1);const ut=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,K/a),n=Math.min(1,Q/o),h=1-i,c=Math.min(h,Math.max(0,Math.round(-t.target.x())/a)),d=1-n,s=Math.min(d,Math.max(0,Math.round(-t.target.y())/o));t.target.setAttrs({x:-c*B.width,y:-s*B.height,scaleX:1,scaleY:1}),e.set({cropX:c,cropY:s,cropWidth:i,cropHeight:n})},mt=()=>{"svg"!==e.type&&e.contentEditable&&(e.stretchEnabled||setTimeout(()=>{e.toggleCropMode(!0)}))},ft="svg"===e.type&&j,pt="loading"===k&&!ft,[wt]=v(pt,100,!1,!1),xt="failed"===k,yt=!wt&&!xt,Mt=t.useRef({cropX:0,cropY:0,cropWidth:0,cropHeight:0}),vt=yt?e.a.opacity:0;y(p,vt);const Et=e.selectable||"admin"===a.role,bt=M(),St=E(e,e.borderColor,"stroke");return t.createElement(t.Fragment,null,wt&&t.createElement(A,{element:e}),xt&&t.createElement(D,{element:e}),t.createElement(i,{ref:p,name:"element",id:e.id,image:it,x:e.a.x,y:e.a.y,width:e.a.width||1,height:e.a.height||1,rotation:e.a.rotation,opacity:vt,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,customCrop:et,listening:Et,draggable:bt?e.draggable&&I:e.draggable,preventDefault:!bt||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:mt,onDblTap:mt,onTransformStart:()=>{m(!0),Mt.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-K/B.width,c=Math.min(h,Math.max(0,e.cropX)),d=1-Q/B.height,s=Math.min(d,Math.max(0,e.cropY)),l=n.getActiveAnchor(),g=!(l.indexOf("middle")>=0||l.indexOf("center")>=0),u=!g&&o<1&&Mt.current.cropHeight>Q/B.height;let m=g?e.cropWidth:e.cropWidth*o;u&&(m=e.cropWidth);const f=!g&&i<1&&Mt.current.cropWidth>K/B.width;let p=g?e.cropHeight:e.cropHeight*i;f&&(p=e.cropHeight),tt&&(m=e.cropWidth,p=e.cropHeight),e.set({cropX:c,cropY:s,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(p,1-s)})},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:K/B.width,cropHeight:Q/B.height}),m(!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:vt,offsetX:-e.borderSize/2,offsetY:-e.borderSize/2},St,{strokeWidth:e.borderSize,listening:!1,visible:!!e.borderSize,rotation:e.rotation,cornerRadius:Math.max(0,rt-e.borderSize),hideInExport:!e.showInExport})),e._cropModeEnabled&&t.createElement(l,{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:d.cropOverlayFill}),t.createElement(i,{listening:!1,image:it,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:nt,scaleY:nt},t.createElement(i,{image:B,ref:C,opacity:.4,draggable:!0,x:-e.cropX*B.width,y:-e.cropY*B.height,onDragMove:ut,onTransform:ut,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()&&gt.current&&(o.startDrag(),gt.current=!1),r&&a){s.hitOnDragEnabled=!0,o.isDragging()&&(gt.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(!st.current){return void(st.current=R(i,n))}var h=R(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);lt.current||(lt.current=c);const f=o.position();var d={x:h.x-f.x,y:h.y-f.y},l=c/lt.current;o.scaleX(l),o.scaleY(l);const p=e.point(h),w=e.point(st.current);var g=p.x-w.x,u=p.y-w.y,m={x:Math.min(0,h.x-d.x*l+g),y:Math.min(0,h.y-d.y*l+u)};o.position(m),lt.current=c,st.current=h,ut(t)}},onTouchEnd:t=>{lt.current=0,st.current=null,s.hitOnDragEnabled=!1}}),t.createElement(c,Object.assign({ref:dt},Y,d.outerImageCropTransformerStyle)),t.createElement(n,{width:K,height:Q,ref:ht,listening:!1,onTransform:t=>{if(e.cropX<Math.abs(t.target.x()/B.width)&&t.target.x()<0&&e.cropX>0){const r=(e.cropWidth+e.cropX)*B.width;t.target.scaleX(1),t.target.width(r)}if(e.cropY<Math.abs(t.target.y()/B.height)&&t.target.y()<0&&e.cropY>0){const r=(e.cropHeight+e.cropY)*B.height;t.target.scaleY(1),t.target.height(r)}t.target.x()<-e.cropX*B.width-1e-9&&(t.target.x(-e.cropX*B.width),t.target.scaleX(1)),t.target.y()<-e.cropY*B.height-1e-9&&(t.target.y(-e.cropY*B.height),t.target.scaleY(1));const r=Math.min(1,Math.max(0,e.cropX+t.target.x()/B.width)),a=Math.min(1,Math.max(0,t.target.y()/B.height+e.cropY)),o=t.target.width()*t.target.scaleX(),i=t.target.height()*t.target.scaleY(),n=Math.min(1-r,o/B.width),h=Math.min(1-a,i/B.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*nt,B.width*(1-r)*nt),height:Math.min(i*nt,B.height*(1-a)*nt)})}}),t.createElement(c,Object.assign({ref:ct},X,d.innerImageCropTransformerStyle,{visible:e.resizable})))))});

package/canvas/line-element.js

@@ -1 +1 @@
-import t from"react";import{observer as e}from"mobx-react-lite";import{Group as a,Line as o,Rect as r,Circle as n}from"react-konva";import{useColor as i}from"./use-color.js";import{Portal as s}from"react-konva-utils";import{useAnchorSnap as h}from"./use-transformer-snap.js";import{TRANSFORMER_STYLE as l}from"./page.js";import{isTouchDevice as c}from"../utils/screen.js";export function getMiddlePoints(t){const{x:e,y:a,width:o,height:r,rotation:n}=t.a,i=n*Math.PI/180,s={x:e+r/2*Math.cos(i+Math.PI/2),y:a+r/2*Math.sin(i+Math.PI/2)};return{middleLeft:s,middleRight:{x:s.x+o*Math.cos(i),y:s.y+o*Math.sin(i)}}}export function getLinePositionFromMiddlePoints(t,e,a){const o=Math.sqrt(Math.pow(e.x-t.x,2)+Math.pow(e.y-t.y,2)),r=Math.atan2(e.y-t.y,e.x-t.x),n=180*r/Math.PI;return{x:t.x+Math.cos(r-Math.PI/2)*a/2,y:t.y+Math.sin(r-Math.PI/2)*a/2,width:o,height:a,rotation:n}}const d=(t,e)=>{const a=l.anchorSize||10;return{offsetX:a/2/t,offsetY:a/2/t,width:a/t,height:a/t,cornerRadius:(l.anchorCornerRadius||0)/t,fill:l.anchorFill||"white",stroke:l.anchorStroke||"rgb(0, 161, 255)",strokeWidth:l.anchorStrokeWidth||2,strokeScaleEnabled:!1,draggable:!0,dragDistance:0,onMouseEnter:t=>{t.target.getStage().container().style.cursor="crosshair"},onMouseLeave:t=>{t.target.getStage().container().style.cursor=""},onDragStart:t=>{e.history.startTransaction()},onDragEnd:t=>{e.history.endTransaction()}}},g=e(({element:e,type:a})=>{const r=i(e,e.a.color,"fill"),s=i(e,e.a.color,"stroke"),h=Object.assign(Object.assign(Object.assign({strokeWidth:e.height,lineCap:"round",lineJoin:"round"},s),r),{opacity:e.a.opacity,hideInExport:!e.showInExport});return t.createElement(t.Fragment,null,"arrow"===a&&t.createElement(o,Object.assign({points:[3*e.height,2*-e.height,0,0,3*e.height,2*e.height]},h)),"triangle"===a&&t.createElement(o,Object.assign({points:[3*e.height,2*-e.height,0,0,3*e.height,2*e.height],closed:!0},h)),"bar"===a&&t.createElement(o,Object.assign({points:[0,2*-e.height,0,2*e.height],closed:!0},h)),"square"===a&&t.createElement(o,Object.assign({points:[0,2*-e.height,4*e.height,2*-e.height,4*e.height,2*e.height,0,2*e.height],closed:!0},h)),"circle"===a&&t.createElement(n,Object.assign({x:2*e.height,y:0,radius:2*e.height},h)))});export const LineElement=e(({element:e,store:n})=>{const l=t.useRef(null),m=t.useRef(null),p=t.useRef(null),u=e.selectable||"admin"===n.role,x=c(),y=n.selectedElements.indexOf(e)>=0&&1===n.selectedElements.length,f=n.selectedShapes.indexOf(e)>=0&&e.selectable,{middleLeft:E,middleRight:w}=getMiddlePoints(e);h(m,[l],[y]),h(p,[l],[y]);const b=i(e,e.a.color,"stroke");return t.createElement(t.Fragment,null,t.createElement(o,Object.assign({ref:l,name:"element",id:e.id,x:e.a.x,y:e.a.y,points:[0,0,e.a.width,0],offsetY:-e.a.height/2,strokeWidth:e.a.height,hitStrokeWidth:Math.max(e.a.height,20),dash:e.dash.map(t=>t*e.a.height)},b,{rotation:e.a.rotation,opacity:e.animated("opacity"),shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,listening:u,draggable:x?e.draggable&&f:e.draggable,preventDefault:!x||f,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()})},onTransform:t=>{const a=t.target.scaleX();t.target.scaleX(1),t.target.scaleY(1),e.set({height:e.height*a,width:e.width*a,x:t.target.x(),y:t.target.y(),rotation:t.target.rotation()})}})),t.createElement(a,{x:E.x,y:E.y,rotation:e.rotation,hideInExport:!e.showInExport,onClick:t=>{var e;return null===(e=l.current)||void 0===e?void 0:e.fire("click",t)},onTap:t=>{var e;return null===(e=l.current)||void 0===e?void 0:e.fire("tap",t)}},t.createElement(g,{element:e,type:e.startHead})),t.createElement(a,{x:w.x,y:w.y,rotation:e.rotation+180,onClick:t=>{var e;return null===(e=l.current)||void 0===e?void 0:e.fire("click",t)},onTap:t=>{var e;return null===(e=l.current)||void 0===e?void 0:e.fire("tap",t)}},t.createElement(g,{element:e,type:e.endHead})),y&&e.resizable&&t.createElement(s,{selector:".page-abs-container",enabled:!0},t.createElement(a,{visible:y},t.createElement(r,Object.assign({x:E.x,y:E.y,ref:m,name:"line-anchor"},d(n.scale,n),{onDragMove:t=>{const a=getLinePositionFromMiddlePoints(t.target.position(),w,e.height);e.set({x:a.x,y:a.y,width:a.width,rotation:a.rotation})}})),t.createElement(r,Object.assign({x:w.x,y:w.y,ref:p,name:"line-anchor"},d(n.scale,n),{onDragMove:t=>{const a=getLinePositionFromMiddlePoints(E,t.target.position(),e.height);e.set({x:a.x,y:a.y,width:a.width,rotation:a.rotation})}})))))});
+import t from"react";import{observer as e}from"mobx-react-lite";import{Group as o,Line as a,Rect as r,Circle as n}from"react-konva";import{useColor as i}from"./use-color.js";import{Portal as s}from"react-konva-utils";import{useAnchorSnap as h}from"./use-transformer-snap.js";import{useWorkspaceStyle as l}from"./workspace-style.js";import{isTouchDevice as c}from"../utils/screen.js";export function getMiddlePoints(t){const{x:e,y:o,width:a,height:r,rotation:n}=t.a,i=n*Math.PI/180,s={x:e+r/2*Math.cos(i+Math.PI/2),y:o+r/2*Math.sin(i+Math.PI/2)};return{middleLeft:s,middleRight:{x:s.x+a*Math.cos(i),y:s.y+a*Math.sin(i)}}}export function getLinePositionFromMiddlePoints(t,e,o){const a=Math.sqrt(Math.pow(e.x-t.x,2)+Math.pow(e.y-t.y,2)),r=Math.atan2(e.y-t.y,e.x-t.x),n=180*r/Math.PI;return{x:t.x+Math.cos(r-Math.PI/2)*o/2,y:t.y+Math.sin(r-Math.PI/2)*o/2,width:a,height:o,rotation:n}}const d=(t,e,o)=>{const a=o.anchorSize;return{offsetX:a/2/t,offsetY:a/2/t,width:a/t,height:a/t,cornerRadius:o.anchorCornerRadius/t,fill:o.anchorFill,stroke:o.anchorStroke,strokeWidth:o.anchorStrokeWidth,strokeScaleEnabled:!1,draggable:!0,dragDistance:0,onMouseEnter:t=>{t.target.getStage().container().style.cursor="crosshair"},onMouseLeave:t=>{t.target.getStage().container().style.cursor=""},onDragStart:t=>{e.history.startTransaction()},onDragEnd:t=>{e.history.endTransaction()}}},g=e(({element:e,type:o})=>{const r=i(e,e.a.color,"fill"),s=i(e,e.a.color,"stroke"),h=Object.assign(Object.assign(Object.assign({strokeWidth:e.height,lineCap:"round",lineJoin:"round"},s),r),{opacity:e.a.opacity,hideInExport:!e.showInExport});return t.createElement(t.Fragment,null,"arrow"===o&&t.createElement(a,Object.assign({points:[3*e.height,2*-e.height,0,0,3*e.height,2*e.height]},h)),"triangle"===o&&t.createElement(a,Object.assign({points:[3*e.height,2*-e.height,0,0,3*e.height,2*e.height],closed:!0},h)),"bar"===o&&t.createElement(a,Object.assign({points:[0,2*-e.height,0,2*e.height],closed:!0},h)),"square"===o&&t.createElement(a,Object.assign({points:[0,2*-e.height,4*e.height,2*-e.height,4*e.height,2*e.height,0,2*e.height],closed:!0},h)),"circle"===o&&t.createElement(n,Object.assign({x:2*e.height,y:0,radius:2*e.height},h)))});export const LineElement=e(({element:e,store:n})=>{const{transformerStyle:m}=l(),y=t.useRef(null),p=t.useRef(null),u=t.useRef(null),f=e.selectable||"admin"===n.role,x=c(),E=n.selectedElements.indexOf(e)>=0&&1===n.selectedElements.length,w=e.isSelected,{middleLeft:M,middleRight:b}=getMiddlePoints(e);h(p,[y],[E]),h(u,[y],[E]);const v=i(e,e.a.color,"stroke");return t.createElement(t.Fragment,null,t.createElement(a,Object.assign({ref:y,name:"element",id:e.id,x:e.a.x,y:e.a.y,points:[0,0,e.a.width,0],offsetY:-e.a.height/2,strokeWidth:e.a.height,hitStrokeWidth:Math.max(e.a.height,20),dash:e.dash.map(t=>t*e.a.height)},v,{rotation:e.a.rotation,opacity:e.animated("opacity"),shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,listening:f,draggable:x?e.draggable&&w:e.draggable,preventDefault:!x||w,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()})},onTransform:t=>{const o=t.target.scaleX();t.target.scaleX(1),t.target.scaleY(1),e.set({height:e.height*o,width:e.width*o,x:t.target.x(),y:t.target.y(),rotation:t.target.rotation()})}})),t.createElement(o,{x:M.x,y:M.y,rotation:e.rotation,hideInExport:!e.showInExport,onClick:t=>{var e;return null===(e=y.current)||void 0===e?void 0:e.fire("click",t)},onTap:t=>{var e;return null===(e=y.current)||void 0===e?void 0:e.fire("tap",t)}},t.createElement(g,{element:e,type:e.startHead})),t.createElement(o,{x:b.x,y:b.y,rotation:e.rotation+180,onClick:t=>{var e;return null===(e=y.current)||void 0===e?void 0:e.fire("click",t)},onTap:t=>{var e;return null===(e=y.current)||void 0===e?void 0:e.fire("tap",t)}},t.createElement(g,{element:e,type:e.endHead})),E&&e.resizable&&t.createElement(s,{selector:".page-abs-container",enabled:!0},t.createElement(o,{visible:E},t.createElement(r,Object.assign({x:M.x,y:M.y,ref:p,name:"line-anchor"},d(n.scale,n,m),{onDragMove:t=>{const o=getLinePositionFromMiddlePoints(t.target.position(),b,e.height);e.set({x:o.x,y:o.y,width:o.width,rotation:o.rotation})}})),t.createElement(r,Object.assign({x:b.x,y:b.y,ref:u,name:"line-anchor"},d(n.scale,n,m),{onDragMove:t=>{const o=getLinePositionFromMiddlePoints(M,t.target.position(),e.height);e.set({x:o.x,y:o.y,width:o.width,rotation:o.rotation})}})))))});

package/canvas/page.d.ts

@@ -3,9 +3,6 @@ import { Vector2d } from 'konva/lib/types';
 import { StoreType } from '../model/store.js';
 import { PageType } from '../model/page-model.js';
 import { NodeType } from '../model/node-model.js';
-import { TransformerConfig } from 'konva/lib/shapes/Transformer';
-export declare const TRANSFORMER_STYLE: TransformerConfig;
-export declare const setTransformerStyle: (style: TransformerConfig) => void;
 export declare function registerTransformerAttrs(type: any, attrs: any): void;
 export declare const useContextMenu: ({ store }: {
     store: StoreType;
@@ -38,11 +35,6 @@ type PageProps = {
     width: number;
     height: number;
     pageControlsEnabled?: boolean;
-    backColor: string;
-    transparencyBackgroundColor?: string;
-    pageBorderColor: string;
-    activePageBorderColor: string;
-    bleedColor: string;
     components: any;
     altCloneEnabled?: boolean;
     viewportSize: {
@@ -50,17 +42,6 @@ type PageProps = {
         height: number;
     };
     layout?: 'vertical' | 'horizontal';
-    selectionRectFill?: string;
-    selectionRectStroke?: string;
-    selectionRectStrokeWidth?: number;
-    snapGuideStroke?: string;
-    snapGuideStrokeWidth?: number;
-    snapGuideDash?: number[];
-    transformLabelFill?: string;
-    transformLabelTextFill?: string;
-    distanceGuideStroke?: string;
-    distanceLabelFill?: string;
-    distanceLabelTextFill?: string;
     tooltipSafeArea?: {
         top?: number;
         bottom?: number;
@@ -74,7 +55,7 @@ type PageProps = {
         right?: number;
     };
 };
-declare const _default: (({ store, page, width, height, pageControlsEnabled, backColor, transparencyBackgroundColor, pageBorderColor, activePageBorderColor, components, bleedColor, altCloneEnabled, viewportSize, selectionRectFill, selectionRectStroke, selectionRectStrokeWidth, snapGuideStroke, snapGuideStrokeWidth, snapGuideDash, transformLabelFill, transformLabelTextFill, distanceGuideStroke, distanceLabelFill, distanceLabelTextFill, layout, tooltipSafeArea, transformerSafeArea, }: PageProps) => React.JSX.Element) & {
+declare const _default: (({ store, page, width, height, pageControlsEnabled, components, altCloneEnabled, viewportSize, layout, tooltipSafeArea, transformerSafeArea, }: PageProps) => React.JSX.Element) & {
     displayName: string;
 };
 export default _default;

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 u,Tag as h,Text as g,Transformer as x,KonvaRenderer as p}from"react-konva";import f from"use-image";import b from"konva";import v from"./element.js";import{DrawingLayer as y}from"./drawing-layer.js";import{ensureDragOrder as E,useSnap as w}from"./use-transformer-snap.js";import{useImageLoader as Y}from"./image-element.js";import{getCrop as X}from"../utils/crop.js";import{___ as S,____ as k,isCreditVisible as R}from"../utils/validate-key.js";import{getClientRect as A,getTotalClientRect as M}from"../utils/math.js";import{pxToUnitRounded as C,pxToUnitString as O}from"../utils/unit.js";import{flags as P}from"../utils/flags.js";import{isTouchDevice as L}from"../utils/screen.js";import{useColor as T}from"./use-color.js";import{isGradient as I}from"../utils/gradient.js";import{Html as j}from"react-konva-utils";import{observerBatching as D}from"mobx-react-lite";const F=e=>p.batchedUpdates(e,null);D(e=>{p.isAlreadyRendering()?queueMicrotask(()=>F(e)):F(e)});const W=b.DD._drag;window.removeEventListener("mousemove",W),b.DD._drag=function(e){r(()=>{W.call(this,e)})},window.addEventListener("mousemove",b.DD._drag);const B=new b.Group,G=20;B.add(new b.Rect({width:G,height:G,fill:"white"})),B.add(new b.Path({scaleX:G/24,scaleY:G/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 _=B.toCanvas({pixelRatio:2,width:G,height:G});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,keepRatio:!0,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:_,fillPatternScaleX:t/G/2,fillPatternScaleY:t/G/2,fillPriority:"pattern",fillPatternRepeat:"no-repeat"})}}};export const setTransformerStyle=e=>{Object.assign(TRANSFORMER_STYLE,e)};const N={text:{enabledAnchors:["top-left","top-right","middle-left","bottom-left","bottom-right","middle-right"]},svg:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]},gif:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]},line:{enabledAnchors:[],borderEnabled:!1,rotateEnabled:!1},image:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]},many:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]},group:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]},table:{keepRatio:!1,enabledAnchors:["top-left","top-right","middle-left","middle-right","bottom-left","bottom-right"]}};export function registerTransformerAttrs(e,t){N[e]=N[e]||t,Object.assign(N[e],t)}const U=e=>t.createElement(m,Object.assign({},e,{preventDefault:!1})),Z=n=>{var{url:i}=n,o=e(n,["url"]);const[r,l]=f(i,"anonymous"),s=r?X(r,{width:o.width,height:o.height},"center-middle"):{};return Y(l,i,"page background"),t.createElement(a,Object.assign({image:r},o,s))},z=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))},V=n=>{const{background:i,scale:o,borderColor:r,transparencyBackgroundColor:l}=n,a=e(n,["background","scale","borderColor","transparencyBackgroundColor"]),s=t.useMemo(()=>!!b.Util.colorToRGBA(i)||I(i),[i]),c=t.useMemo(()=>{if(I(i)){return!0}const e=b.Util.colorToRGBA(i);return!e||e.a<1},[i]),d=t.useMemo(()=>{if(!c||l){return null}const e=document.createElement("canvas"),t=30;e.width=60,e.height=60;const n=e.getContext("2d");return n&&(n.fillStyle="black",n.fillRect(t,0,t,t),n.fillRect(0,t,t,t)),e},[c,l]);return t.createElement(t.Fragment,null,c&&(l?t.createElement(m,Object.assign({fill:l},a,{hideInExport:!0})):t.createElement(m,Object.assign({fillPatternImage:d},a,{opacity:.1,hideInExport:!0}))),s?t.createElement(z,Object.assign({fill:i},a)):t.createElement(Z,Object.assign({url:i},a)))},H=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 J(e){let t=180*e/Math.PI;return t%=360,t>180?t-=360:t<-180&&(t+=360),Math.round(t)}const K=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=A({x:e,y:n,width:i,height:o,rotation:b.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:J(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})))}),$=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(v,{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 Q=null;export const registerNextDomDrop=e=>{Q=e};const q=atob("UG9sb3RubyBmcmVlIGxpY2Vuc2UgbGltaXRhdGlvbiBleGNlZWRlZCAtIFBsZWFzZSB1cGdyYWRlIHlvdXIgYWNjb3VudC4="),ee=atob("I2MwMzkyYg=="),te=atob("djAuOS4y"),ne=e=>t.createElement(t.Fragment,null,t.createElement(s,{fill:ee,height:200},t.createElement(h,{fill:ee}),t.createElement(g,Object.assign({},e,{fill:"white",text:q,height:void 0,padding:10,fontSize:20})))),ie=atob("RlJFRSAgVFJJQUwgIExJQ0VOU0U="),oe=(atob("UG93ZXJlZCBieSBQb2xvdG5v"),atob("TElDRU5TRSAgS0VZICBJUyAgTUlTU0lORw==")),re=atob("UGxlYXNlIGFjdGl2YXRlIHlvdXIgbGljZW5zZS4KTGljZW5zZSByZWxhdGVkIHF1ZXN0aW9uczoKcG9sb3Ruby5jb20vY29udGFjdA=="),le=e=>{const n=1===k(),i=n?oe:ie,o=n?230:195;return t.createElement(l,Object.assign({},e,{listening:!1}),t.createElement(m,{fill:ee,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:re,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:f,transparencyBackgroundColor:v,pageBorderColor:Y,activePageBorderColor:X,components:C,bleedColor:T,altCloneEnabled:I,viewportSize:D,selectionRectFill:F,selectionRectStroke:W,selectionRectStrokeWidth:B,snapGuideStroke:G,snapGuideStrokeWidth:_,snapGuideDash:Z,transformLabelFill:z,transformLabelTextFill:J,distanceGuideStroke:q,distanceLabelFill:ee,distanceLabelTextFill:ie,layout:oe="vertical",tooltipSafeArea:re,transformerSafeArea:ae})=>{const se=e.bleedVisible?n.bleed:0,ce=n.computedWidth+2*se,de=n.computedHeight+2*se,me=(r-ce*e.scale)/2,ue=(a-de*e.scale)/2,he=t.useRef(null),ge=t.useRef(null),xe=t.useRef(null),pe=null==p||p,fe=t.useRef(!1),[be,ve]=t.useState(null),[ye,Ee]=t.useState({}),[we,Ye]=t.useState(0),Xe=useContextMenu({store:e}),Se=e.selectedElements.find(e=>e._cropModeEnabled),ke=e.selectedElements.find(e=>e.curveEnabled),Re=e.selectedShapes.filter(e=>!e.resizable).length>0,Ae=e.selectedShapes.filter(e=>!e.draggable).length>0,Me=e.selectedElements.filter(e=>!e.visible).length>0;t.useLayoutEffect(()=>{var t,n,i;if(!he.current){return}const o=he.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";N[a]?(he.current.setAttrs(Object.assign(Object.assign({},TRANSFORMER_STYLE),N[a])),"svg"!==a&&"image"!==a&&"gif"!==a||e.selectedElements[0].keepRatio||he.current.setAttrs({enabledAnchors:TRANSFORMER_STYLE.enabledAnchors}),"text"===a&&P.textVerticalResizeEnabled&&he.current.setAttrs({enabledAnchors:null===(n=N.text.enabledAnchors)||void 0===n?void 0:n.concat(["bottom-center"])}),"text"===a&&l&&e.selectedElements[0].curveEnabled&&he.current.setAttrs({enabledAnchors:N.many.enabledAnchors})):he.current.setAttrs(TRANSFORMER_STYLE),Re&&he.current.enabledAnchors([]),Ae&&he.current.rotateEnabled(!1),r.find(e=>null==e?void 0:e.isDragging())&&r.forEach(e=>{e.isDragging()||null==e||e.startDrag()}),he.current.nodes(r),E(),null===(i=he.current.getLayer())||void 0===i||i.batchDraw()},[e.selectedShapes,Se,Re,Me,Ae,ke]);const Ce=()=>{var e,t;const n=he.current;if(!n){return}if(!n.isTransforming()){return void Ee({})}if(!n.nodes().length||!n.isTransforming()){return}const i=n.__getNodeRect(),o=null==n?void 0:n.getActiveAnchor(),r=n.getStage();Ee({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})},Oe=t.useCallback(()=>{var e;if(null===(e=he.current)||void 0===e?void 0:e.isTransforming()){return}const t=he.current;if(!t||!t.nodes().length){return void Ye(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==ae?void 0:ae.top)||0,bottom:a-((null==ae?void 0:ae.bottom)||0),left:(null==ae?void 0:ae.left)||0,right:r-((null==ae?void 0:ae.right)||0)},TRANSFORMER_STYLE.rotateAnchorOffset||30,t.rotation());Ye(i)},[ae,r,a]);t.useEffect(()=>{var e;null===(e=he.current)||void 0===e||e.update(),Ce(),Oe()},[e.scale,Oe]),t.useEffect(()=>{Oe()},[e.selectedShapes,Oe]);const Pe=i(()=>({visible:!1,x1:0,y1:0,x2:0,y2:0})),Le=t.useRef(!1),Te=L(),Ie=o(e=>{var t,n,i,o,r,l,a;if(Te){return}Le.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,Pe.visible=!0,Pe.x1=m.x,Pe.y1=m.y,Pe.x2=m.x,Pe.y2=m.y,(null!==(a=null===(l=e.target.getStage())||void 0===l?void 0:l.getPointersPositions().length)&&void 0!==a?a:0)>=2&&(Pe.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:ge,containerRef:xe,viewportSize:D}),t.useEffect(()=>{const t=o(e=>{var t,n,i,o,r,l;if(!Pe.visible){return}null===(t=ge.current)||void 0===t||t.setPointersPositions(e);let a=null===(n=ge.current)||void 0===n?void 0:n.getPointerPosition();a?(a.x-=null!==(o=null===(i=ge.current)||void 0===i?void 0:i.x())&&void 0!==o?o:0,a.y-=null!==(l=null===(r=ge.current)||void 0===r?void 0:r.y())&&void 0!==l?l:0):a={x:Pe.x2,y:Pe.y2},Pe.x2=a.x,Pe.y2=a.y}),n=o(()=>{if(!Pe.visible){return}if(!ge.current){return}const t=ge.current.findOne(".selection"),n=t?t.getClientRect({skipStroke:!0}):{width:0,height:0,x:0,y:0};if(n.width&&n.height){const t=[];ge.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;b.Util.haveIntersection(n,o)&&l&&a&&t.push(r.top.id)});const i=[...new Set(t)];Le.current=!0,e.selectElements(i)}Pe.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 je=t.useCallback(t=>{if(!e.selectedElements[0]){return}if(t&&e.selectedElementsIds.includes(t)){return}const i=M(e.selectedShapes),o=t?e.getElementById(t):{x:0,y:0,width:n.computedWidth,height:n.computedHeight,rotation:0},r=A(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(be)!==JSON.stringify(l)&&ve(l)},[e,n]);t.useEffect(()=>{e.distanceGuidesVisible?je():be&&ve(null)},[e.distanceGuidesVisible,je,e.selectedShapes.map(e=>`${e.x},${e.y},${e.width},${e.height},${e.rotation}`).join("|")]);const De=t.useRef(!1);t.useEffect(()=>{var e;let t;const n=null===(e=xe.current)||void 0===e?void 0:e.closest(".polotno-workspace-inner"),i=()=>{De.current=!0,clearTimeout(t),t=setTimeout(()=>{De.current=!1},300)};return null==n||n.addEventListener("scroll",i),()=>{clearTimeout(t),null==n||n.removeEventListener("scroll",i)}},[]),t.useEffect(()=>{const e=ge.current;if(!e){return}const t=e.container(),n=e=>{var t,n;e.touches.length>=2&&((null===(t=he.current)||void 0===t?void 0:t.isDragging())&&he.current.stopDrag(),null===(n=he.current)||void 0===n||n.nodes().forEach(e=>{e.isDragging()&&e.stopDrag()}))};return t.addEventListener("touchstart",n,{passive:!0}),t.addEventListener("touchmove",n,{passive:!0}),()=>{t.removeEventListener("touchstart",n),t.removeEventListener("touchmove",n)}},[]);const Fe=t=>{if(e.activePage!==n&&n.select(),De.current){return}if(Le.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||Pe.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])};w(he,e,{stroke:G,strokeWidth:_,dash:Z});const We=e.activePage===n,Be=e._selectedPagesIds.includes(n.id),Ge=null==C?void 0:C.PageControls,_e=null==C?void 0:C.Tooltip,Ne=null==C?void 0:C.ContextMenu,Ue=1/e.scale,Ze=0/e.scale;return t.createElement("div",{ref:xe,onDragOver:e=>e.preventDefault(),onDrop:t=>{if(t.preventDefault(),!ge.current){return}ge.current.setPointersPositions(t);const i=ge.current.findOne(".elements-container"),o=null==i?void 0:i.getRelativePointerPosition(),r=ge.current.getPointerPosition(),l=ge.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];Q&&o&&(Q(o,s,{elements:a,page:n}),Q=null)},style:{position:"relative",width:r+"px",height:a+"px",overflow:"hidden",flexShrink:0},className:"polotno-page-container"+(We?" active-page":"")},t.createElement(u,{ref:ge,width:Math.min(r,D.width+200),height:Math.min(D.height+200,a),onClick:Fe,onTap:Fe,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([]),Xe.open({x:t.evt.clientX,y:t.evt.clientY})},onMouseDown:Ie,onMouseMove:t=>{if(!e.distanceGuidesVisible&&!t.evt.altKey){return void(be&&ve(null))}const n=t.target.findAncestor(".element",!0),i=null==n?void 0:n.id();je(i)},onDragStart:t=>{var n;const i=t.target.getStage();if(i&&i.getPointersPositions().length>=2){return void t.target.stopDrag()}const o=t.target.findAncestor(".element",!0);if(o){const i=e.getElementById(null==o?void 0:o.id()),r=null==i?void 0:i.top,l=null==r?void 0:r.id;!(e.selectedElementsIds.indexOf(l)>=0)&&l&&(e.selectElements([l]),t.target.stopDrag(),t.target.startDrag(t),null===(n=he.current)||void 0===n||n.startDrag(t))}be&&ve(null)},pageId:n.id,style:{position:"absolute",overflow:"hidden",top:0,left:0}},t.createElement(c,null,t.createElement(U,{width:r,height:a,fill:f}),t.createElement(l,{x:me,y:ue,scaleX:e.scale,scaleY:e.scale,name:"page-container"},t.createElement(l,{name:"page-container-2"},t.createElement(l,{name:"page-background-group",x:se,y:se},t.createElement(V,{x:-n.bleed,y:-n.bleed,width:n.computedWidth+2*n.bleed,height:n.computedHeight+2*n.bleed,background:n.background,transparencyBackgroundColor:v,name:"page-background",preventDefault:!1,scale:e.scale})),t.createElement(l,{x:se,y:se,name:"elements-container",listening:!e.isPlaying},t.createElement(m,{name:"elements-area",width:n.computedWidth,height:n.computedHeight,listening:!1}),t.createElement($,{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}),S()===te&&t.createElement(ne,{name:"hit-detection",x:-Ue/2-Ze,y:-Ue/2-Ze,width:ce+Ue+2*Ze,height:de+Ue+2*Ze}))),t.createElement(d,{name:"workspace-background",points:[0,0,r,0,r,a,0,a,0,0,me,ue,me,a-ue,r-me,a-ue,r-me,ue,me,ue],listening:!1,closed:!0,fill:f}),t.createElement(l,{x:me,y:ue,scaleX:e.scale,scaleY:e.scale},t.createElement(m,{name:"page-highlight",hideInExport:!0,x:-Ue/2-Ze,y:-Ue/2-Ze,width:ce+Ue+2*Ze,height:de+Ue+2*Ze,stroke:Be?X:Y,strokeWidth:2,listening:!1,strokeScaleEnabled:!1})),t.createElement(l,{x:me+se*e.scale,y:ue+se*e.scale,scaleX:e.scale,scaleY:e.scale,name:"page-abs-container"},t.createElement(x,{ref:he,rotateAnchorAngle:we,onDragStart:t=>{var i;const o=t.target.getStage();o&&o.getPointersPositions().length>=2?t.target.stopDrag():((null===(i=t.evt)||void 0===i?void 0:i.altKey)&&I&&e.selectedElements.forEach(e=>{const t=e.clone({},{skipSelect:!0}),i=n.children.indexOf(e);n.setElementZIndex(t.id,i)}),fe.current=!0,e.history.startTransaction())},onDragEnd:()=>{fe.current&&(e.history.endTransaction(),fe.current=!1),Oe()},onTransformStart:()=>{e.history.startTransaction(),ve(null)},boundBoxFunc:(t,n)=>{var i;const o=Math.abs(n.width)<1||Math.abs(n.height)<1,r=Math.abs(t.width)<1||Math.abs(t.height)<1;if(o&&!r){return t}const l=e.selectedElements;if(1===l.length&&"table"===(null===(i=l[0])||void 0===i?void 0:i.type)){const e=l[0],i=Math.abs(t.width),o=Math.abs(t.height);if(i>0&&o>0){const r=Math.abs(n.width)/i,l=Math.abs(n.height)/o,a=e.width*r,s=e.height*l;if(a<e.minWidth||s<e.minHeight){return t}}}return n},onTransform:e=>{const t=he.current.nodes(),n=t[t.length-1];e.target===n&&setTimeout(()=>{Ce()},0)},onTransformEnd:t=>{Ee({}),e.history.endTransaction(),Oe()},visible:!e.isPlaying}),be&&be.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(h,{cornerRadius:5,fill:ee,pointerDirection:"down"}),t.createElement(g,{align:"center",verticalAlign:"middle",fill:ie,padding:5,text:O({unit:e.unit,dpi:e.dpi,px:i})})))),n._rendering&&t.createElement(l,null,t.createElement(m,{width:ce,height:de,fill:"rgba(255,255,255,0.9)"}),t.createElement(g,{text:"Rendering...",fontSize:60,width:ce,height:de,align:"center",verticalAlign:"middle"})),_e&&t.createElement(_e,{components:C,store:e,page:n,stageRef:ge,tooltipSafeArea:re}),Ne&&t.createElement(j,null,t.createElement(Ne,Object.assign({components:C,store:e},Xe.props)))),t.createElement(y,{store:e,page:n,width:r,height:a,scale:e.scale,xPadding:me,yPadding:ue,bleed:se}),t.createElement(K,Object.assign({},ye,{store:e,tagFill:z,textFill:J})),t.createElement(H,{selection:Pe,fill:F,stroke:W,strokeWidth:B}),k()>0&&t.createElement(l,{hideInExport:!0},t.createElement(le,{name:"cache-bounds",x:r-(1===k()?250:210),y:a-(1===k()?95:45)}),t.createElement(le,{name:"cache-bounds-t",x:10,y:10})),R()&&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"}))),pe&&Ge&&t.createElement(Ge,{store:e,page:n,xPadding:me,yPadding:ue,layout:oe}))});
+var e=this&&this.__rest||function(e,t){var n={};for(var i in e){Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i])}if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(i=Object.getOwnPropertySymbols(e);o<i.length;o++){t.indexOf(i[o])<0&&Object.prototype.propertyIsEnumerable.call(e,i[o])&&(n[i[o]]=e[i[o]])}}return n};import t from"react";import{observer as n,useLocalObservable as i}from"mobx-react-lite";import{action as o,runInAction as r}from"mobx";import{Group as l,Image as a,Label as s,Layer as c,Line as d,Rect as m,Stage as u,Tag as h,Text as g,Transformer as x,KonvaRenderer as p}from"react-konva";import f from"use-image";import{useWorkspaceStyle as b}from"./workspace-style.js";import v from"konva";import y from"./element.js";import{DrawingLayer as E}from"./drawing-layer.js";import{ensureDragOrder as w,useSnap as X}from"./use-transformer-snap.js";import{useImageLoader as Y}from"./image-element.js";import{getCrop as k}from"../utils/crop.js";import{___ as S,____ as A,isCreditVisible as M}from"../utils/validate-key.js";import{getClientRect as O,getTotalClientRect as P}from"../utils/math.js";import{pxToUnitRounded as j,pxToUnitString as R}from"../utils/unit.js";import{flags as I}from"../utils/flags.js";import{isTouchDevice as D}from"../utils/screen.js";import{useColor as C}from"./use-color.js";import{isGradient as T}from"../utils/gradient.js";import{Html as B}from"react-konva-utils";import{observerBatching as G}from"mobx-react-lite";const W=e=>p.batchedUpdates(e,null);G(e=>{p.isAlreadyRendering()?queueMicrotask(()=>W(e)):W(e)});const L=v.DD._drag;window.removeEventListener("mousemove",L),v.DD._drag=function(e){r(()=>{L.call(this,e)})},window.addEventListener("mousemove",v.DD._drag);const F={enabledAnchors:["top-left","top-center","top-right","middle-left","bottom-left","bottom-right","bottom-center","middle-right"],rotateEnabled:!0,rotationSnaps:[0,45,90,135,180,225,270,315],ignoreStroke:!0,flipEnabled:!1,keepRatio:!0},U={text:{enabledAnchors:["top-left","top-right","middle-left","bottom-left","bottom-right","middle-right"]},svg:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]},gif:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]},line:{enabledAnchors:[],borderEnabled:!1,rotateEnabled:!1},image:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]},many:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]},group:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]},table:{keepRatio:!1,enabledAnchors:["top-left","top-right","middle-left","middle-right","bottom-left","bottom-right"]}};export function registerTransformerAttrs(e,t){U[e]=U[e]||t,Object.assign(U[e],t)}const z=e=>t.createElement(m,Object.assign({},e,{preventDefault:!1})),Z=n=>{var{url:i}=n,o=e(n,["url"]);const[r,l]=f(i,"anonymous"),s=r?k(r,{width:o.width,height:o.height},"center-middle"):{};return Y(l,i,"page background"),t.createElement(a,Object.assign({image:r},o,s))},V=e=>{const n=C({a:{width:e.width,height:e.height},width:e.width,height:e.height},e.fill);return t.createElement(m,Object.assign({},e,n))},_=n=>{const{background:i,scale:o,borderColor:r,transparencyBackgroundColor:l}=n,a=e(n,["background","scale","borderColor","transparencyBackgroundColor"]),s=t.useMemo(()=>!!v.Util.colorToRGBA(i)||T(i),[i]),c=t.useMemo(()=>{if(T(i)){return!0}const e=v.Util.colorToRGBA(i);return!e||e.a<1},[i]),d=t.useMemo(()=>{if(!c||l){return null}const e=document.createElement("canvas"),t=30;e.width=60,e.height=60;const n=e.getContext("2d");return n&&(n.fillStyle="black",n.fillRect(t,0,t,t),n.fillRect(0,t,t,t)),e},[c,l]);return t.createElement(t.Fragment,null,c&&(l?t.createElement(m,Object.assign({fill:l},a,{hideInExport:!0})):t.createElement(m,Object.assign({fillPatternImage:d},a,{opacity:.1,hideInExport:!0}))),s?t.createElement(V,Object.assign({fill:i},a)):t.createElement(Z,Object.assign({url:i},a)))},H=n(({selection:e})=>{if(!e.visible){return null}const{selectionRectStyle:n}=b();return t.createElement(m,{name:"selection",x:Math.min(e.x1,e.x2),y:Math.min(e.y1,e.y2),width:Math.abs(e.x1-e.x2),height:Math.abs(e.y1-e.y2),fill:n.fill,stroke:n.stroke,strokeWidth:n.strokeWidth})});function J(e){let t=180*e/Math.PI;return t%=360,t>180?t-=360:t<-180&&(t+=360),Math.round(t)}const N=n(({x:e,y:n,width:i,height:o,rotation:r,anchor:l,store:a})=>{const{transformLabelStyle:c}=b();if(void 0===e||void 0===n||void 0===i||void 0===o||void 0===r||void 0===l){return null}const d=O({x:e,y:n,width:i,height:o,rotation:v.Util.radToDeg(r)}),m=(o/2+70)*Math.cos(r-Math.PI/2),u=(o/2+70)*Math.sin(r-Math.PI/2),x=j({unit:a.unit,dpi:a.dpi,px:i/a.scale,precious:"px"===a.unit?0:1})+" x "+j({unit:a.unit,dpi:a.dpi,px:o/a.scale,precious:"px"===a.unit?0:1})+("px"===a.unit?"":" "+a.unit);return t.createElement(t.Fragment,null,t.createElement(s,{x:(d.minX+d.maxX)/2+m,y:(d.minY+d.maxY)/2+u,offsetX:14,offsetY:14,visible:"rotater"===l},t.createElement(h,{cornerRadius:5,fill:c.fill}),t.createElement(g,{align:"center",verticalAlign:"middle",fill:c.textFill,padding:8,text:J(r).toString()+"°"})),t.createElement(s,{x:(d.minX+d.maxX)/2,y:d.maxY+20,visible:"rotater"!==l},t.createElement(h,{cornerRadius:5,fill:c.fill,pointerDirection:"up",pointerHeight:0,pointerWidth:0}),t.createElement(g,{align:"center",verticalAlign:"middle",fill:c.textFill,padding:8,text:x})))}),K=n(({elements:e,store:n})=>{const i=e.filter(e=>e.alwaysOnTop),o=e.filter(e=>!e.alwaysOnTop).concat(i);return t.createElement(t.Fragment,null,o.map(e=>t.createElement(y,{key:e.id,store:n,element:e,onClick:()=>{console.warn("Polotno warning: onClick callback is deprecated. Just stop using it. Polotno will do selection automatically.")}})))});export const useContextMenu=({store:e})=>{const[n,i]=t.useState(!1),[o,r]=t.useState({x:0,y:0}),l=t.useCallback(e=>{i(!0),r(e)},[]);return{open:l,close:t.useCallback(()=>{i(!1)},[]),props:{isOpen:n,offset:o,setIsOpen:i}}};let $=null;export const registerNextDomDrop=e=>{$=e};const Q=atob("UG9sb3RubyBmcmVlIGxpY2Vuc2UgbGltaXRhdGlvbiBleGNlZWRlZCAtIFBsZWFzZSB1cGdyYWRlIHlvdXIgYWNjb3VudC4="),q=atob("I2MwMzkyYg=="),ee=atob("djAuOS4y"),te=e=>t.createElement(t.Fragment,null,t.createElement(s,{fill:q,height:200},t.createElement(h,{fill:q}),t.createElement(g,Object.assign({},e,{fill:"white",text:Q,height:void 0,padding:10,fontSize:20})))),ne=atob("RlJFRSAgVFJJQUwgIExJQ0VOU0U="),ie=(atob("UG93ZXJlZCBieSBQb2xvdG5v"),atob("TElDRU5TRSAgS0VZICBJUyAgTUlTU0lORw==")),oe=atob("UGxlYXNlIGFjdGl2YXRlIHlvdXIgbGljZW5zZS4KTGljZW5zZSByZWxhdGVkIHF1ZXN0aW9uczoKcG9sb3Ruby5jb20vY29udGFjdA=="),re=e=>{const n=1===A(),i=n?ie:ne,o=n?230:195;return t.createElement(l,Object.assign({},e,{listening:!1}),t.createElement(m,{fill:q,width:o,height:24,cornerRadius:2}),t.createElement(g,{text:i,fill:"white",fontSize:13,fontFamily:"monospace",width:o,align:"center",y:5,listening:!1}),n&&t.createElement(g,{text:oe,fill:"rgba(0,0,0,0.6)",fontSize:14,y:30,listening:!1}))};export default n(({store:e,page:n,width:r,height:a,pageControlsEnabled:p,components:f,altCloneEnabled:y,viewportSize:Y,layout:k="vertical",tooltipSafeArea:j,transformerSafeArea:C})=>{const T=b(),G=T.transformerStyle,W=F,L=e.bleedVisible?n.bleed:0,Z=n.computedWidth+2*L,V=n.computedHeight+2*L,J=(r-Z*e.scale)/2,Q=(a-V*e.scale)/2,q=t.useRef(null),ne=t.useRef(null),ie=t.useRef(null),oe=null==p||p,le=t.useRef(!1),[ae,se]=t.useState(null),[ce,de]=t.useState({}),[me,ue]=t.useState(0),he=useContextMenu({store:e}),ge=e.selectedElements.find(e=>e._cropModeEnabled),xe=e.selectedElements.find(e=>e.curveEnabled),pe=e.selectedShapes.filter(e=>!e.resizable).length>0,fe=e.selectedShapes.filter(e=>!e.draggable).length>0,be=e.selectedElements.filter(e=>!e.visible).length>0;t.useLayoutEffect(()=>{var t,n,i;if(!q.current){return}const o=q.current.getStage(),r=e.selectedShapes.map(e=>e._cropModeEnabled?null:o.findOne("#"+e.id)).filter(e=>!!e),l=1===e.selectedElements.length,a=l&&(null===(t=e.selectedElements[0])||void 0===t?void 0:t.type)||"many",s=U[a],c=Object.assign(Object.assign({},W),s||{});s&&("svg"!==a&&"image"!==a&&"gif"!==a||e.selectedElements[0].keepRatio||(c.enabledAnchors=W.enabledAnchors),"text"===a&&I.textVerticalResizeEnabled&&(c.enabledAnchors=null===(n=U.text.enabledAnchors)||void 0===n?void 0:n.concat(["bottom-center"])),"text"===a&&l&&e.selectedElements[0].curveEnabled&&(c.enabledAnchors=U.many.enabledAnchors)),q.current.setAttrs(Object.assign(Object.assign({},c),G)),pe&&q.current.enabledAnchors([]),fe&&q.current.rotateEnabled(!1),r.find(e=>null==e?void 0:e.isDragging())&&r.forEach(e=>{e.isDragging()||null==e||e.startDrag()}),q.current.nodes(r),w(),null===(i=q.current.getLayer())||void 0===i||i.batchDraw()},[e.selectedShapes,ge,pe,be,fe,xe,G]);const ve=()=>{var e,t;const n=q.current;if(!n){return}if(!n.isTransforming()){return void de({})}if(!n.nodes().length||!n.isTransforming()){return}const i=n.__getNodeRect(),o=null==n?void 0:n.getActiveAnchor(),r=n.getStage();de({anchor:o,x:i.x-(null!==(e=null==r?void 0:r.x())&&void 0!==e?e:0),y:i.y-(null!==(t=null==r?void 0:r.y())&&void 0!==t?t:0),rotation:i.rotation,width:i.width,height:i.height})},ye=t.useCallback(()=>{var e;if(null===(e=q.current)||void 0===e?void 0:e.isTransforming()){return}const t=q.current;if(!t||!t.nodes().length){return void ue(0)}const n=t.getClientRect();if(!t.getStage()){return}const i=function(e,t,n,i=0){const o=e.x+e.width/2,r=e.y+e.height/2,l=e.width/2,a=e.height/2,s=i*Math.PI/180,c=e=>{const t=e*Math.PI/180,i=(e%360+360)%360;let c;c=0===i||180===i?a:l;const d=Math.sin(t)*(c+n),m=-Math.cos(t)*(c+n),u=d*Math.cos(s)-m*Math.sin(s),h=d*Math.sin(s)+m*Math.cos(s);return{x:o+u,y:r+h}},d=e=>e.x>=t.left&&e.x<=t.right&&e.y>=t.top&&e.y<=t.bottom;if(d(c(0))){return 0}for(const m of[180,270,90]){if(d(c(m))){return m}}return 0}(n,{top:(null==C?void 0:C.top)||0,bottom:a-((null==C?void 0:C.bottom)||0),left:(null==C?void 0:C.left)||0,right:r-((null==C?void 0:C.right)||0)},G.rotateAnchorOffset,t.rotation());ue(i)},[C,r,a]);t.useEffect(()=>{var e;null===(e=q.current)||void 0===e||e.update(),ve(),ye()},[e.scale,ye]),t.useEffect(()=>{ye()},[e.selectedShapes,ye]);const Ee=i(()=>({visible:!1,x1:0,y1:0,x2:0,y2:0})),we=t.useRef(!1),Xe=D(),Ye=o(e=>{var t,n,i,o,r,l,a;if(Xe){return}we.current=!1;const s=e.target.findAncestor(".elements-container"),c=e.target.findAncestor("Transformer"),d=e.target.findAncestor(".page-abs-container");if(s||c||d){return}const m=null===(t=e.target.getStage())||void 0===t?void 0:t.getPointerPosition();m&&(m.x-=null!==(i=null===(n=e.target.getStage())||void 0===n?void 0:n.x())&&void 0!==i?i:0,m.y-=null!==(r=null===(o=e.target.getStage())||void 0===o?void 0:o.y())&&void 0!==r?r:0,Ee.visible=!0,Ee.x1=m.x,Ee.y1=m.y,Ee.x2=m.x,Ee.y2=m.y,(null!==(a=null===(l=e.target.getStage())||void 0===l?void 0:l.getPointersPositions().length)&&void 0!==a?a:0)>=2&&(Ee.visible=!1))});(({stageRef:e,containerRef:n,viewportSize:i})=>{t.useEffect(()=>{var t;const i=null===(t=n.current)||void 0===t?void 0:t.closest(".polotno-workspace-inner");function o(){var t;if(!e.current){return}const o=null===(t=n.current)||void 0===t?void 0:t.getBoundingClientRect(),r=null==i?void 0:i.getBoundingClientRect();if(!o||!r){return}const l=Math.max(0,r.left-o.left-100),a=Math.max(0,r.top-o.top-100);e.current.position({x:-l,y:-a}),e.current.container().style.transform=`translate(${l}px, ${a}px)`}return o(),null==i||i.addEventListener("scroll",o),()=>{null==i||i.removeEventListener("scroll",o)}},[i.width,i.height])})({stageRef:ne,containerRef:ie,viewportSize:Y}),t.useEffect(()=>{const t=o(e=>{var t,n,i,o,r,l;if(!Ee.visible){return}null===(t=ne.current)||void 0===t||t.setPointersPositions(e);let a=null===(n=ne.current)||void 0===n?void 0:n.getPointerPosition();a?(a.x-=null!==(o=null===(i=ne.current)||void 0===i?void 0:i.x())&&void 0!==o?o:0,a.y-=null!==(l=null===(r=ne.current)||void 0===r?void 0:r.y())&&void 0!==l?l:0):a={x:Ee.x2,y:Ee.y2},Ee.x2=a.x,Ee.y2=a.y}),n=o(()=>{if(!Ee.visible){return}if(!ne.current){return}const t=ne.current.findOne(".selection"),n=t?t.getClientRect({skipStroke:!0}):{width:0,height:0,x:0,y:0};if(n.width&&n.height){const t=[];ne.current.find(".element").forEach(i=>{const o=i.getClientRect(),r=e.getElementById(i.id()),l=null==r?void 0:r.draggable,a=null==r?void 0:r.selectable;v.Util.haveIntersection(n,o)&&l&&a&&t.push(r.top.id)});const i=[...new Set(t)];we.current=!0,e.selectElements(i)}Ee.visible=!1});return window.addEventListener("mousemove",t),window.addEventListener("touchmove",t),window.addEventListener("mouseup",n,{capture:!0}),window.addEventListener("touchend",n,{capture:!0}),()=>{window.removeEventListener("mousemove",t),window.removeEventListener("touchmove",t),window.removeEventListener("mouseup",n),window.removeEventListener("touchend",n)}},[]);const ke=t.useCallback(t=>{if(!e.selectedElements[0]){return}if(t&&e.selectedElementsIds.includes(t)){return}const i=P(e.selectedShapes),o=t?e.getElementById(t):{x:0,y:0,width:n.computedWidth,height:n.computedHeight,rotation:0},r=O(o),l=[];i.minX>r.maxX&&l.push({distance:i.minX-r.maxX,box1:i,box2:r,points:[{x:i.minX,y:i.minY+i.height/2},{x:r.maxX,y:i.minY+i.height/2},{x:r.maxX,y:r.minY+r.height/2}]}),i.maxX<r.minX&&l.push({distance:r.minX-i.maxX,box1:i,box2:r,points:[{x:i.maxX,y:i.minY+i.height/2},{x:r.minX,y:i.minY+i.height/2},{x:r.minX,y:r.minY+r.height/2}]}),i.minY>r.maxY&&l.push({box1:i,box2:r,distance:i.minY-r.maxY,points:[{x:i.minX+i.width/2,y:i.minY},{x:i.minX+i.width/2,y:r.maxY},{x:r.minX+r.width/2,y:r.maxY}]}),i.maxY<r.minY&&l.push({box1:i,box2:r,distance:r.minY-i.maxY,points:[{x:i.minX+i.width/2,y:i.maxY},{x:i.minX+i.width/2,y:r.minY},{x:r.minX+r.width/2,y:r.minY}]});const a=i.minX>=r.minX&&i.maxX<=r.maxX&&i.minY>=r.minY&&i.maxY<=r.maxY;if(a&&(l.push({distance:i.minX-r.minX,box1:i,box2:r,points:[{x:i.minX,y:i.minY+i.height/2},{x:r.minX,y:i.minY+i.height/2},{x:r.minX,y:r.minY+r.height/2}]}),l.push({distance:r.maxX-i.maxX,box1:i,box2:r,points:[{x:i.maxX,y:i.minY+i.height/2},{x:r.maxX,y:i.minY+i.height/2},{x:r.maxX,y:r.minY+r.height/2}]}),l.push({box1:i,box2:r,distance:i.minY-r.minY,points:[{x:i.minX+i.width/2,y:i.minY},{x:i.minX+i.width/2,y:r.minY},{x:r.minX+r.width/2,y:r.minY}]}),l.push({box1:i,box2:r,distance:r.maxY-i.maxY,points:[{x:i.minX+i.width/2,y:i.maxY},{x:i.minX+i.width/2,y:r.maxY},{x:r.minX+r.width/2,y:r.maxY}]})),0===l.length&&!a){const e=i.minX<r.maxX&&i.maxX>r.minX,t=i.minY<r.maxY&&i.maxY>r.minY;if(e&&t){const e=(Math.max(i.minY,r.minY)+Math.min(i.maxY,r.maxY))/2,t=(Math.max(i.minX,r.minX)+Math.min(i.maxX,r.maxX))/2;i.minX<r.minX?l.push({distance:r.minX-i.minX,box1:i,box2:r,points:[{x:i.minX,y:e},{x:r.minX,y:e},{x:r.minX,y:e}]}):l.push({distance:i.minX-r.minX,box1:i,box2:r,points:[{x:i.minX,y:e},{x:r.minX,y:e},{x:r.minX,y:e}]}),i.maxX>r.maxX?l.push({distance:i.maxX-r.maxX,box1:i,box2:r,points:[{x:r.maxX,y:e},{x:i.maxX,y:e},{x:r.maxX,y:e}]}):l.push({distance:r.maxX-i.maxX,box1:i,box2:r,points:[{x:i.maxX,y:e},{x:r.maxX,y:e},{x:r.maxX,y:e}]}),i.minY<r.minY?l.push({box1:i,box2:r,distance:r.minY-i.minY,points:[{x:t,y:i.minY},{x:t,y:r.minY},{x:t,y:r.minY}]}):l.push({box1:i,box2:r,distance:i.minY-r.minY,points:[{x:t,y:i.minY},{x:t,y:r.minY},{x:t,y:r.minY}]}),i.maxY>r.maxY?l.push({box1:i,box2:r,distance:i.maxY-r.maxY,points:[{x:t,y:r.maxY},{x:t,y:i.maxY},{x:t,y:r.maxY}]}):l.push({box1:i,box2:r,distance:r.maxY-i.maxY,points:[{x:t,y:i.maxY},{x:t,y:r.maxY},{x:t,y:r.maxY}]})}}JSON.stringify(ae)!==JSON.stringify(l)&&se(l)},[e,n]);t.useEffect(()=>{e.distanceGuidesVisible?ke():ae&&se(null)},[e.distanceGuidesVisible,ke,e.selectedShapes.map(e=>`${e.x},${e.y},${e.width},${e.height},${e.rotation}`).join("|")]);const Se=t.useRef(!1);t.useEffect(()=>{var e;let t;const n=null===(e=ie.current)||void 0===e?void 0:e.closest(".polotno-workspace-inner"),i=()=>{Se.current=!0,clearTimeout(t),t=setTimeout(()=>{Se.current=!1},300)};return null==n||n.addEventListener("scroll",i),()=>{clearTimeout(t),null==n||n.removeEventListener("scroll",i)}},[]),t.useEffect(()=>{const e=ne.current;if(!e){return}const t=e.container(),n=e=>{var t,n;e.touches.length>=2&&((null===(t=q.current)||void 0===t?void 0:t.isDragging())&&q.current.stopDrag(),null===(n=q.current)||void 0===n||n.nodes().forEach(e=>{e.isDragging()&&e.stopDrag()}))};return t.addEventListener("touchstart",n,{passive:!0}),t.addEventListener("touchmove",n,{passive:!0}),()=>{t.removeEventListener("touchstart",n),t.removeEventListener("touchmove",n)}},[]);const Ae=t=>{if(e.activePage!==n&&n.select(),Se.current){return}if(we.current){return}const i=t.evt.ctrlKey||t.evt.metaKey||t.evt.shiftKey,o=t.target.findAncestor(".elements-container"),r=t.target.findAncestor(".page-abs-container"),l=t.target.findAncestor("Transformer"),a=t.target.findAncestor(".page-container",!0);if(!(i||o||l||r||a||Ee.visible)){return e.selectElements([]),void e.selectPages([])}const s=t.target.findAncestor(".element-container",!0),c=(null==s?void 0:s.findOne(".element"))||t.target.findAncestor(".element",!0),d=e.getElementById(null==c?void 0:c.id()),m=null==d?void 0:d.top,u=null==m?void 0:m.id,h=e.selectedElementsIds.indexOf(u)>=0,g=t.target.findAncestor(".page-container",!0);u&&i&&!h?(e.selectElements(e.selectedElementsIds.concat([u])),e.selectPages([])):u&&i&&h?e.selectElements(e.selectedElementsIds.filter(e=>e!==u)):!u||i||h?u&&!i&&h||(g?(i||e.selectElements([]),e.selectPages([n.id])):e.selectPages([])):(e.selectElements([u]),e.selectPages([]))};X(q,e);const Me=e.activePage===n,Oe=e._selectedPagesIds.includes(n.id),Pe=null==f?void 0:f.PageControls,je=null==f?void 0:f.Tooltip,Re=null==f?void 0:f.ContextMenu,Ie=1/e.scale,De=0/e.scale;return t.createElement("div",{ref:ie,onDragOver:e=>e.preventDefault(),onDrop:t=>{if(t.preventDefault(),!ne.current){return}ne.current.setPointersPositions(t);const i=ne.current.findOne(".elements-container"),o=null==i?void 0:i.getRelativePointerPosition(),r=ne.current.getPointerPosition(),l=ne.current.getAllIntersections(r).map(e=>e.findAncestor(".element",!0)).filter(Boolean),a=[...new Set(l.reverse())].map(t=>e.getElementById(t.id())).filter(e=>!!e),s=a[0];$&&o&&($(o,s,{elements:a,page:n}),$=null)},style:{position:"relative",width:r+"px",height:a+"px",overflow:"hidden",flexShrink:0},className:"polotno-page-container"+(Me?" active-page":"")},t.createElement(u,{ref:ne,width:Math.min(r,Y.width+200),height:Math.min(Y.height+200,a),onClick:Ae,onTap:Ae,onContextMenu:t=>{t.evt.preventDefault();const n=t.target.findAncestor(".element",!0),i=e.getElementById(null==n?void 0:n.id()),o=null==i?void 0:i.top,r=null==o?void 0:o.id;r?e.selectedElementsIds.indexOf(r)>=0||e.selectElements([r]):e.selectElements([]),he.open({x:t.evt.clientX,y:t.evt.clientY})},onMouseDown:Ye,onMouseMove:t=>{if(!e.distanceGuidesVisible&&!t.evt.altKey){return void(ae&&se(null))}const n=t.target.findAncestor(".element",!0),i=null==n?void 0:n.id();ke(i)},onDragStart:t=>{var n;const i=t.target.getStage();if(i&&i.getPointersPositions().length>=2){return void t.target.stopDrag()}const o=t.target.findAncestor(".element",!0);if(o){const i=e.getElementById(null==o?void 0:o.id()),r=null==i?void 0:i.top,l=null==r?void 0:r.id;!(e.selectedElementsIds.indexOf(l)>=0)&&l&&(e.selectElements([l]),t.target.stopDrag(),t.target.startDrag(t),null===(n=q.current)||void 0===n||n.startDrag(t))}ae&&se(null)},pageId:n.id,style:{position:"absolute",overflow:"hidden",top:0,left:0}},t.createElement(c,null,t.createElement(z,{width:r,height:a,fill:T.workspaceBackgroundColor}),t.createElement(l,{x:J,y:Q,scaleX:e.scale,scaleY:e.scale,name:"page-container"},t.createElement(l,{name:"page-container-2"},t.createElement(l,{name:"page-background-group",x:L,y:L},t.createElement(_,{x:-n.bleed,y:-n.bleed,width:n.computedWidth+2*n.bleed,height:n.computedHeight+2*n.bleed,background:n.background,transparencyBackgroundColor:T.transparencyBackgroundColor,name:"page-background",preventDefault:!1,scale:e.scale})),t.createElement(l,{x:L,y:L,name:"elements-container",listening:!e.isPlaying},t.createElement(m,{name:"elements-area",width:n.computedWidth,height:n.computedHeight,listening:!1}),t.createElement(K,{elements:n.children,store:e})),t.createElement(m,{stroke:T.bleedColor,name:"bleed",strokeWidth:n.bleed,x:n.bleed/2,y:n.bleed/2,width:n.computedWidth+n.bleed,height:n.computedHeight+n.bleed,listening:!1,visible:n.bleed>0&&e.bleedVisible,hideInExport:!0}),S()===ee&&t.createElement(te,{name:"hit-detection",x:-Ie/2-De,y:-Ie/2-De,width:Z+Ie+2*De,height:V+Ie+2*De}))),t.createElement(d,{name:"workspace-background",points:[0,0,r,0,r,a,0,a,0,0,J,Q,J,a-Q,r-J,a-Q,r-J,Q,J,Q],listening:!1,closed:!0,fill:T.workspaceBackgroundColor}),t.createElement(l,{x:J,y:Q,scaleX:e.scale,scaleY:e.scale},t.createElement(m,{name:"page-highlight",hideInExport:!0,x:-Ie/2-De,y:-Ie/2-De,width:Z+Ie+2*De,height:V+Ie+2*De,stroke:Oe?T.activePageBorderColor:T.pageBorderColor,strokeWidth:2,listening:!1,strokeScaleEnabled:!1})),t.createElement(l,{x:J+L*e.scale,y:Q+L*e.scale,scaleX:e.scale,scaleY:e.scale,name:"page-abs-container"},t.createElement(x,{ref:q,rotateAnchorAngle:me,onDragStart:t=>{var i;const o=t.target.getStage();o&&o.getPointersPositions().length>=2?t.target.stopDrag():((null===(i=t.evt)||void 0===i?void 0:i.altKey)&&y&&e.selectedElements.forEach(e=>{const t=e.clone({},{skipSelect:!0}),i=n.children.indexOf(e);n.setElementZIndex(t.id,i)}),le.current=!0,e.history.startTransaction())},onDragEnd:()=>{le.current&&(e.history.endTransaction(),le.current=!1),ye()},onTransformStart:()=>{e.history.startTransaction(),se(null)},boundBoxFunc:(t,n)=>{var i;const o=Math.abs(n.width)<1||Math.abs(n.height)<1,r=Math.abs(t.width)<1||Math.abs(t.height)<1;if(o&&!r){return t}const l=e.selectedElements;if(1===l.length&&"table"===(null===(i=l[0])||void 0===i?void 0:i.type)){const e=l[0],i=Math.abs(t.width),o=Math.abs(t.height);if(i>0&&o>0){const r=Math.abs(n.width)/i,l=Math.abs(n.height)/o,a=e.width*r,s=e.height*l,c=Object.assign({},n);return a<e.minWidth&&(c.width=t.width,c.x=t.x),s<e.minHeight&&(c.height=t.height,c.y=t.y),c}}return n},onTransform:e=>{const t=q.current.nodes(),n=t[t.length-1];e.target===n&&setTimeout(()=>{ve()},0)},onTransformEnd:t=>{de({}),e.history.endTransaction(),ye()},visible:!e.isPlaying}),ae&&ae.map(({points:n,distance:i,box1:o,box2:r},a)=>t.createElement(l,{name:"distances-container",hideInExport:!0,key:a,listening:!1},t.createElement(m,Object.assign({},o,{stroke:T.distanceGuideStyle.stroke,strokeWidth:1,strokeScaleEnabled:!1})),t.createElement(m,Object.assign({},r,{stroke:T.distanceGuideStyle.stroke,strokeWidth:1,strokeScaleEnabled:!1})),t.createElement(d,{points:[n[0].x,n[0].y,n[1].x,n[1].y],stroke:T.distanceGuideStyle.stroke,strokeWidth:1,strokeScaleEnabled:!1}),t.createElement(d,{points:[n[1].x,n[1].y,n[2].x,n[2].y],stroke:T.distanceGuideStyle.stroke,strokeWidth:1,strokeScaleEnabled:!1}),t.createElement(s,{x:(n[0].x+n[1].x)/2,y:(n[0].y+n[1].y)/2,offsetY:-10,scaleX:1/e.scale,scaleY:1/e.scale},t.createElement(h,{cornerRadius:5,fill:T.distanceGuideStyle.labelFill,pointerDirection:"down"}),t.createElement(g,{align:"center",verticalAlign:"middle",fill:T.distanceGuideStyle.labelTextFill,padding:5,text:R({unit:e.unit,dpi:e.dpi,px:i})})))),n._rendering&&t.createElement(l,null,t.createElement(m,{width:Z,height:V,fill:"rgba(255,255,255,0.9)"}),t.createElement(g,{text:"Rendering...",fontSize:60,width:Z,height:V,align:"center",verticalAlign:"middle"})),je&&t.createElement(je,{components:f,store:e,page:n,stageRef:ne,tooltipSafeArea:j}),Re&&t.createElement(B,null,t.createElement(Re,Object.assign({components:f,store:e},he.props)))),t.createElement(E,{store:e,page:n,width:r,height:a,scale:e.scale,xPadding:J,yPadding:Q,bleed:L}),t.createElement(N,Object.assign({},ce,{store:e})),t.createElement(H,{selection:Ee}),A()>0&&t.createElement(l,{hideInExport:!0},t.createElement(re,{name:"cache-bounds",x:r-(1===A()?250:210),y:a-(1===A()?95:45)}),t.createElement(re,{name:"cache-bounds-t",x:10,y:10})),M()&&t.createElement(g,{text:"Powered by polotno.com",fontSize:14,fill:"rgba(0,0,0,0.6)",x:r-170,y:a-18,onMouseEnter:e=>{e.target.getStage().container().style.cursor="pointer"},onMouseLeave:e=>{e.target.getStage().container().style.cursor=""},onTouchStart:e=>{e.cancelBubble=!0},onMouseDown:e=>{e.cancelBubble=!0},onClick:()=>{window.open("https://polotno.com","_blank","noopener")},onTap:()=>{window.open("https://polotno.com","_blank","noopener")}}),t.createElement(l,{name:"line-guides"}))),oe&&Pe&&t.createElement(Pe,{store:e,page:n,xPadding:J,yPadding:Q,layout:k}))});

package/canvas/rules.d.ts

@@ -9,14 +9,8 @@ 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, rulerBackgroundColor, rulerTextColor, rulerBorderColor, rulerBorderSize, rulerTickColor, rulerTickSize }: TopRulesProps) => React.JSX.Element | null) & {
+export declare const TopRules: (({ store, width, height, pageSizes, layout, renderOnlyActivePage }: TopRulesProps) => React.JSX.Element | null) & {
     displayName: string;
 };
 export {};