polotno 2.25.5 → 2.25.7

package/canvas/apply-filters.d.ts

@@ -1,3 +1,3 @@
 import Konva from 'konva';
-import { ShapeType } from '../model/shape-model';
+import { ShapeType } from '../model/shape-model.js';
 export declare function applyFilter(node: Konva.Node, element: ShapeType): void;

package/canvas/audio.d.ts

@@ -1,5 +1,5 @@
-import { StoreType } from '../model/store';
-import { AudioType } from '../model/audio-model';
+import { StoreType } from '../model/store.js';
+import { AudioType } from '../model/audio-model.js';
 type Props = {
     store: StoreType;
     audio: AudioType;

package/canvas/context-menu/context-menu.d.ts

@@ -1,5 +1,5 @@
-import { StoreType } from '../../model/store';
-import { ShapeType } from '../../model/shape-model';
+import { StoreType } from '../../model/store.js';
+import { ShapeType } from '../../model/shape-model.js';
 import React from 'react';
 type ContextMenuProps = {
     store: StoreType;

package/canvas/context-menu/context-menu.js

@@ -1 +1 @@
-import{observer as e}from"mobx-react-lite";import{ContextMenuPopover as t,Menu as o,MenuDivider as l,MenuItem as n}from"@blueprintjs/core";import r from"react";import{t as i}from"../../utils/l10n";import{useDuplicateElement as a}from"../../toolbar/use-duplicate-element";import{ChevronDown as c,ChevronUp as m,DoubleChevronDown as s,DoubleChevronUp as d,Duplicate as u,Layers as v,Lock as p,Trash as E,Unlock as b}from"@blueprintjs/icons";import{useRemoveElement as x}from"../../toolbar/use-remove-element";import{useCopyStyle as f}from"../../toolbar/use-copy-style";import{useLock as P}from"../../toolbar/use-lock";export const ContextMenu=e(({store:e,isOpen:k,offset:g,setIsOpen:C})=>{var M,D,h,y;const{disabled:w,duplicate:O}=a({store:e}),{disabled:B,remove:T}=x({store:e}),{setElementToCopy:j}=f(e),{disabled:I,lock:U,locked:F}=P({store:e}),q=F?r.createElement(p,null):r.createElement(b,null),z=e.selectedElementsIds;return 0===e.selectedElements.length?null:r.createElement(t,{isOpen:k,onClose:()=>{C(!1)},content:r.createElement(o,null,r.createElement(n,{shouldDismissPopover:!1,icon:q,text:i(F?"contextMenu.unlock":"contextMenu.lock"),onClick:U,disabled:I}),r.createElement(n,{icon:r.createElement(u,null),text:i("contextMenu.duplicate"),onClick:O,disabled:w}),r.createElement(n,{icon:r.createElement(E,null),text:i("contextMenu.remove"),onClick:T,disabled:B}),r.createElement(l,null),r.createElement(n,{icon:r.createElement(v,null),text:i("toolbar.layering")},r.createElement(n,{shouldDismissPopover:!1,icon:r.createElement(d,null),text:i("toolbar.toForward"),disabled:!(null===(M=e.activePage)||void 0===M?void 0:M.canMoveElementsTop(z)),onClick:()=>{var t;null===(t=e.activePage)||void 0===t||t.moveElementsTop(z)}}),r.createElement(n,{shouldDismissPopover:!1,icon:r.createElement(m,null),text:i("toolbar.up"),disabled:!(null===(D=e.activePage)||void 0===D?void 0:D.canMoveElementsUp(z)),onClick:()=>{var t;null===(t=e.activePage)||void 0===t||t.moveElementsUp(z)}}),r.createElement(n,{shouldDismissPopover:!1,icon:r.createElement(c,null),text:i("toolbar.down"),disabled:!(null===(h=e.activePage)||void 0===h?void 0:h.canMoveElementsDown(z)),onClick:()=>{var t;null===(t=e.activePage)||void 0===t||t.moveElementsDown(z)}}),r.createElement(n,{shouldDismissPopover:!1,icon:r.createElement(s,null),text:i("toolbar.toBottom"),disabled:!(null===(y=e.activePage)||void 0===y?void 0:y.canMoveElementsBottom(z)),onClick:()=>{var t;null===(t=e.activePage)||void 0===t||t.moveElementsBottom(z)}}))),targetOffset:{top:g.y,left:g.x}})});
+import{observer as e}from"mobx-react-lite";import{ContextMenuPopover as t,Menu as o,MenuDivider as l,MenuItem as n}from"@blueprintjs/core";import r from"react";import{t as i}from"../../utils/l10n.js";import{useDuplicateElement as a}from"../../toolbar/use-duplicate-element.js";import{ChevronDown as s,ChevronUp as c,DoubleChevronDown as m,DoubleChevronUp as d,Duplicate as u,Layers as v,Lock as p,Trash as E,Unlock as b}from"@blueprintjs/icons";import{useRemoveElement as x}from"../../toolbar/use-remove-element.js";import{useCopyStyle as f}from"../../toolbar/use-copy-style.js";import{useLock as P}from"../../toolbar/use-lock.js";export const ContextMenu=e(({store:e,isOpen:k,offset:g,setIsOpen:C})=>{var M,j,D,h;const{disabled:y,duplicate:w}=a({store:e}),{disabled:O,remove:B}=x({store:e}),{setElementToCopy:T}=f(e),{disabled:I,lock:U,locked:F}=P({store:e}),q=F?r.createElement(p,null):r.createElement(b,null),z=e.selectedElementsIds;return 0===e.selectedElements.length?null:r.createElement(t,{isOpen:k,onClose:()=>{C(!1)},content:r.createElement(o,null,r.createElement(n,{shouldDismissPopover:!1,icon:q,text:i(F?"contextMenu.unlock":"contextMenu.lock"),onClick:U,disabled:I}),r.createElement(n,{icon:r.createElement(u,null),text:i("contextMenu.duplicate"),onClick:w,disabled:y}),r.createElement(n,{icon:r.createElement(E,null),text:i("contextMenu.remove"),onClick:B,disabled:O}),r.createElement(l,null),r.createElement(n,{icon:r.createElement(v,null),text:i("toolbar.layering")},r.createElement(n,{shouldDismissPopover:!1,icon:r.createElement(d,null),text:i("toolbar.toForward"),disabled:!(null===(M=e.activePage)||void 0===M?void 0:M.canMoveElementsTop(z)),onClick:()=>{var t;null===(t=e.activePage)||void 0===t||t.moveElementsTop(z)}}),r.createElement(n,{shouldDismissPopover:!1,icon:r.createElement(c,null),text:i("toolbar.up"),disabled:!(null===(j=e.activePage)||void 0===j?void 0:j.canMoveElementsUp(z)),onClick:()=>{var t;null===(t=e.activePage)||void 0===t||t.moveElementsUp(z)}}),r.createElement(n,{shouldDismissPopover:!1,icon:r.createElement(s,null),text:i("toolbar.down"),disabled:!(null===(D=e.activePage)||void 0===D?void 0:D.canMoveElementsDown(z)),onClick:()=>{var t;null===(t=e.activePage)||void 0===t||t.moveElementsDown(z)}}),r.createElement(n,{shouldDismissPopover:!1,icon:r.createElement(m,null),text:i("toolbar.toBottom"),disabled:!(null===(h=e.activePage)||void 0===h?void 0:h.canMoveElementsBottom(z)),onClick:()=>{var t;null===(t=e.activePage)||void 0===t||t.moveElementsBottom(z)}}))),targetOffset:{top:g.y,left:g.x}})});

package/canvas/element.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { StoreType } from '../model/store';
-import { ShapeType } from '../model/shape-model';
+import { StoreType } from '../model/store.js';
+import { ShapeType } from '../model/shape-model.js';
 type ShapeProps = {
     store: StoreType;
     element: ShapeType;

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

package/canvas/figure-element.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { StoreType } from '../model/store';
-import { FigureElementType } from '../model/figure-model';
+import { StoreType } from '../model/store.js';
+import { FigureElementType } from '../model/figure-model.js';
 type FigureProps = {
     store: StoreType;
     element: FigureElementType;

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";import{isTouchDevice as i}from"../utils/screen";import{useColor as n}from"./use-color";const h={};export const FigureElement=t(({element:l,store:c})=>{const d=l.selectable||"admin"===c.role,g=i(),m=c.selectedShapes.indexOf(l)>=0&&l.selectable,p=Math.min(l.strokeWidth,l.width/2,l.height/2),f=Math.max(0,Math.min(l.width/2,l.height/2,l.cornerRadius)),w=n(l,l.a.fill,"fill"),u=Object.assign(Object.assign({width:l.a.width,height:l.a.height},w),{cornerRadius:f,opacity:l.animated("opacity"),shadowEnabled:l.shadowEnabled,shadowBlur:l.shadowBlur,shadowOffsetX:l.shadowOffsetX,shadowOffsetY:l.shadowOffsetY,shadowColor:l.shadowColor,shadowOpacity:l.shadowOpacity,preventDefault:!g||m,hideInExport:!l.showInExport}),b=n(l,l.stroke,"stroke"),y=Object.assign(Object.assign({visible:p>0,x:p/2,y:p/2,width:l.a.width-p,height:l.a.height-p},b),{strokeWidth:p,cornerRadius:Math.max(0,f-p),dash:l.dash.map(e=>e*p),opacity:l.animated("opacity"),hideInExport:!l.showInExport,listening:!1}),x=(E=l.subType,h[E]||(h[E]=(k=o(E),t(({element:t,fillProps:o,strokeProps:i})=>{let n=k({width:t.a.width,height:t.a.height,cornerRadius:t.cornerRadius}),h=1,l=1;"string"!=typeof n&&(h=n.scaleX,l=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:h,scaleY:l})),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],h=o[2],l=o[3],d=o[4],g=o[5],m=o[6],p=o[7],f=h>l?h:l,w=h>l?1:h/l,u=h>l?l/h:1;e.translate(i,n),e.rotate(m),e.scale(w,u),e.arc(0,0,f,d,d+g,1-p),e.scale(1/w,1/u),e.rotate(-m),e.translate(-i,-n);break;case"z":e.closePath()}}}},scaleX:h,scaleY:l},e.createElement(s,Object.assign({},i,{x:0,y:0,data:n,strokeWidth:2*i.strokeWidth,dash:i.dash.map(e=>e)}))))}))),h[E]||a);var E,k;return e.createElement(e.Fragment,null,e.createElement(a,{id:l.id,x:l.a.x,y:l.a.y,rotation:l.a.rotation,opacity:l.a.opacity,listening:d,draggable:g?l.draggable&&m:l.draggable,name:"element",onDragMove:e=>{l.set({x:e.target.x(),y:e.target.y()})},onDragEnd:e=>{l.set({x:e.target.x(),y:e.target.y()})},onTransform:e=>{const t=e.target.scale();e.target.scaleX(1),e.target.scaleY(1),l.set({width:l.width*t.x,height:l.height*t.y,x:e.target.x(),y:e.target.y(),rotation:e.target.rotation()})}},e.createElement(x,{element:l,fillProps:u,strokeProps:y})))});
+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 h={};export const FigureElement=t(({element:l,store:c})=>{const d=l.selectable||"admin"===c.role,g=i(),m=c.selectedShapes.indexOf(l)>=0&&l.selectable,p=Math.min(l.strokeWidth,l.width/2,l.height/2),f=Math.max(0,Math.min(l.width/2,l.height/2,l.cornerRadius)),w=n(l,l.a.fill,"fill"),u=Object.assign(Object.assign({width:l.a.width,height:l.a.height},w),{cornerRadius:f,opacity:l.animated("opacity"),shadowEnabled:l.shadowEnabled,shadowBlur:l.shadowBlur,shadowOffsetX:l.shadowOffsetX,shadowOffsetY:l.shadowOffsetY,shadowColor:l.shadowColor,shadowOpacity:l.shadowOpacity,preventDefault:!g||m,hideInExport:!l.showInExport}),b=n(l,l.stroke,"stroke"),y=Object.assign(Object.assign({visible:p>0,x:p/2,y:p/2,width:l.a.width-p,height:l.a.height-p},b),{strokeWidth:p,cornerRadius:Math.max(0,f-p),dash:l.dash.map(e=>e*p),opacity:l.animated("opacity"),hideInExport:!l.showInExport,listening:!1}),x=(E=l.subType,h[E]||(h[E]=(k=o(E),t(({element:t,fillProps:o,strokeProps:i})=>{let n=k({width:t.a.width,height:t.a.height,cornerRadius:t.cornerRadius}),h=1,l=1;"string"!=typeof n&&(h=n.scaleX,l=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:h,scaleY:l})),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],h=o[2],l=o[3],d=o[4],g=o[5],m=o[6],p=o[7],f=h>l?h:l,w=h>l?1:h/l,u=h>l?l/h:1;e.translate(i,n),e.rotate(m),e.scale(w,u),e.arc(0,0,f,d,d+g,1-p),e.scale(1/w,1/u),e.rotate(-m),e.translate(-i,-n);break;case"z":e.closePath()}}}},scaleX:h,scaleY:l},e.createElement(s,Object.assign({},i,{x:0,y:0,data:n,strokeWidth:2*i.strokeWidth,dash:i.dash.map(e=>e)}))))}))),h[E]||a);var E,k;return e.createElement(e.Fragment,null,e.createElement(a,{id:l.id,x:l.a.x,y:l.a.y,rotation:l.a.rotation,opacity:l.a.opacity,listening:d,draggable:g?l.draggable&&m:l.draggable,name:"element",onDragMove:e=>{l.set({x:e.target.x(),y:e.target.y()})},onDragEnd:e=>{l.set({x:e.target.x(),y:e.target.y()})},onTransform:e=>{const t=e.target.scale();e.target.scaleX(1),e.target.scaleY(1),l.set({width:l.width*t.x,height:l.height*t.y,x:e.target.x(),y:e.target.y(),rotation:e.target.rotation()})}},e.createElement(x,{element:l,fillProps:u,strokeProps:y})))});

package/canvas/gif-element.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { StoreType } from '../model/store';
-import { VideoElementType } from '../model/video-model';
+import { StoreType } from '../model/store.js';
+import { VideoElementType } from '../model/video-model.js';
 type Props = {
     store: StoreType;
     element: VideoElementType;

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";import{useImageLoader as g}from"./image-element";import{applyFilter as m}from"./apply-filters";import{useFadeIn as f}from"./use-fadein";import{isTouchDevice as u}from"../utils/screen";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),_(),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),_(),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,[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 k="loading"===R,F="failed"===R,A=k||F?0:t.a.opacity;f(b,A);const B=t.selectable||"admin"===i.role,G=u();return e.createElement(e.Fragment,null,k&&e.createElement(w,{element:t}),F&&e.createElement(y,{element:t}),e.createElement(a,{ref:b,name:"element",id:t.id,image:D,x:t.a.x,y:t.a.y,width:t.a.width||1,height:t.a.height||1,rotation:t.a.rotation,opacity:A,shadowEnabled:t.shadowEnabled,shadowBlur:t.shadowBlur,shadowOffsetX:t.shadowOffsetX,shadowOffsetY:t.shadowOffsetY,shadowColor:t.shadowColor,shadowOpacity:t.shadowOpacity,customCrop:X,listening:B,draggable:G?t.draggable&&E:t.draggable,preventDefault:!G||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:A,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 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}))});

package/canvas/hotkeys.d.ts

@@ -1,2 +1,2 @@
-import { StoreType } from '../model/store';
+import { StoreType } from '../model/store.js';
 export declare function handleHotkey(e: KeyboardEvent, store: StoreType): void;

package/canvas/hotkeys.js

@@ -1 +1 @@
-import{copy as e,cut as t,paste as o}from"../utils/clipboard";export function handleHotkey(a,l){var r,d,n,c;if("INPUT"===(null===(r=document.activeElement)||void 0===r?void 0:r.tagName)||"TEXTAREA"===(null===(d=document.activeElement)||void 0===d?void 0:d.tagName)||"true"===(null===(n=document.activeElement)||void 0===n?void 0:n.contentEditable)){return}const i=l.selectedElements.filter(e=>e.removable).map(e=>e.id);46!==a.keyCode&&8!==a.keyCode||l.deleteElements(i);const s=a.ctrlKey||a.metaKey,v=a.shiftKey;if(!s||v||"z"!==a.key.toLowerCase()&&"y"!==a.key.toLowerCase()||(a.preventDefault(),l.history.undo()),s&&v&&("z"===a.key.toLowerCase()||"y"===a.key.toLowerCase())&&(a.preventDefault(),l.history.redo()),s&&"KeyA"===a.code){a.preventDefault();const e=null===(c=l.activePage)||void 0===c?void 0:c.children.filter(e=>e.selectable),t=(null==e?void 0:e.map(e=>e.id))||[];l.selectElements(t)}s&&"KeyC"===a.code&&(a.preventDefault(),e(l)),s&&"KeyX"===a.code&&(a.preventDefault(),t(l)),s&&"KeyV"===a.code&&(a.preventDefault(),o(l)),"ArrowDown"===a.code&&(a.preventDefault(),l.selectedShapes.forEach(e=>{e.draggable&&e.set({y:e.y+1})})),"ArrowUp"===a.code&&(a.preventDefault(),l.selectedShapes.forEach(e=>{e.draggable&&e.set({y:e.y-1})})),"ArrowLeft"===a.code&&(a.preventDefault(),l.selectedShapes.forEach(e=>{e.draggable&&e.set({x:e.x-1})})),"ArrowRight"===a.code&&(a.preventDefault(),l.selectedShapes.forEach(e=>{e.draggable&&e.set({x:e.x+1})}))}
+import{copy as e,cut as t,paste as o}from"../utils/clipboard.js";export function handleHotkey(a,l){var r,d,n,c;if("INPUT"===(null===(r=document.activeElement)||void 0===r?void 0:r.tagName)||"TEXTAREA"===(null===(d=document.activeElement)||void 0===d?void 0:d.tagName)||"true"===(null===(n=document.activeElement)||void 0===n?void 0:n.contentEditable)){return}const s=l.selectedElements.filter(e=>e.removable).map(e=>e.id);46!==a.keyCode&&8!==a.keyCode||l.deleteElements(s);const i=a.ctrlKey||a.metaKey,v=a.shiftKey;if(!i||v||"z"!==a.key.toLowerCase()&&"y"!==a.key.toLowerCase()||(a.preventDefault(),l.history.undo()),i&&v&&("z"===a.key.toLowerCase()||"y"===a.key.toLowerCase())&&(a.preventDefault(),l.history.redo()),i&&"KeyA"===a.code){a.preventDefault();const e=null===(c=l.activePage)||void 0===c?void 0:c.children.filter(e=>e.selectable),t=(null==e?void 0:e.map(e=>e.id))||[];l.selectElements(t)}i&&"KeyC"===a.code&&(a.preventDefault(),e(l)),i&&"KeyX"===a.code&&(a.preventDefault(),t(l)),i&&"KeyV"===a.code&&(a.preventDefault(),o(l)),"ArrowDown"===a.code&&(a.preventDefault(),l.selectedShapes.forEach(e=>{e.draggable&&e.set({y:e.y+1})})),"ArrowUp"===a.code&&(a.preventDefault(),l.selectedShapes.forEach(e=>{e.draggable&&e.set({y:e.y-1})})),"ArrowLeft"===a.code&&(a.preventDefault(),l.selectedShapes.forEach(e=>{e.draggable&&e.set({x:e.x-1})})),"ArrowRight"===a.code&&(a.preventDefault(),l.selectedShapes.forEach(e=>{e.draggable&&e.set({x:e.x+1})}))}

package/canvas/html-element.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { StoreType } from '../model/store';
-import { TextElementType } from '../model/text-model';
+import { StoreType } from '../model/store.js';
+import { TextElementType } from '../model/text-model.js';
 export declare const quillRef: {
     enabled: boolean;
     currentFormat: {};

package/canvas/html-element.js

@@ -1,4 +1,4 @@
-import t from"react";import{observer as e}from"mobx-react-lite";import{Image as o,Group as n,Rect as i}from"react-konva";import r from"quill";import*as a from"mobx";import{flags as l}from"../utils/flags";import{applyFilter as s}from"./apply-filters";import{useFontLoader as c,getDir as d,getLineHeight as f,usePrevious as u}from"./text-element";import{useColor as h}from"./use-color";import{htmlToCanvas as g,detectSize as m,isContentWrapping as p}from"../utils/html2canvas";import{resetStyleContent as x}from"../utils/reset-style";import{useFadeIn as y}from"./use-fadein";import{Html as w}from"react-konva-utils";import b from"../utils/styled";import{incrementLoader as v,triggerLoadError as E}from"../utils/loader";import{removeTags as S,sanitizeHtml as k}from"../utils/text";import*as z from"../utils/fonts";import{isTouchDevice as F}from"../utils/screen";import{getLimitedFontSize as R}from"./text-element/max-font-size";import{reaction as O}from"mobx";import{useDelayer as C}from"./use-delayer";export const quillRef=a.observable({enabled:!1,currentFormat:{},editor:a.observable.object({instance:null},{},{deep:!1})});const $=b("div",t.forwardRef)`
+import t from"react";import{observer as e}from"mobx-react-lite";import{Image as o,Group as n,Rect as i}from"react-konva";import r from"quill";import*as a from"mobx";import{flags as l}from"../utils/flags.js";import{applyFilter as s}from"./apply-filters.js";import{useFontLoader as c,getDir as d,getLineHeight as f,usePrevious as u}from"./text-element.js";import{useColor as h}from"./use-color.js";import{htmlToCanvas as g,detectSize as m,isContentWrapping as p}from"../utils/html2canvas.js";import{resetStyleContent as x}from"../utils/reset-style.js";import{useFadeIn as y}from"./use-fadein.js";import{Html as w}from"react-konva-utils";import b from"../utils/styled.js";import{incrementLoader as v,triggerLoadError as E}from"../utils/loader.js";import{removeTags as S,sanitizeHtml as k}from"../utils/text.js";import*as z from"../utils/fonts.js";import{isTouchDevice as F}from"../utils/screen.js";import{getLimitedFontSize as R}from"./text-element/max-font-size.js";import{reaction as O}from"mobx";import{useDelayer as C}from"./use-delayer.js";export const quillRef=a.observable({enabled:!1,currentFormat:{},editor:a.observable.object({instance:null},{},{deep:!1})});const $=b("div",t.forwardRef)`
   .ql-editor {
     outline: none;
   }
@@ -12,4 +12,4 @@ import t from"react";import{observer as e}from"mobx-react-lite";import{Image as
   .ql-direction-rtl {
     direction: rtl;
   }
-`;let T=["bold","color","font","italic","size","strike","underline","indent","list","direction"];export const setQuillFormats=t=>{T=t};export const createQuill=t=>new r(t,{toolbar:!1,keyboard:!1,clipboard:{matchVisual:!1},formats:T});export const setQuillContent=(t,e)=>{var o=t.clipboard.convert("<div class='ql-editor' style='outline: none;'>"+e+"<p><br></p></div>");t.setContents(o),t.history.clear()};const M=({html:e,onBlur:o,onChange:n,element:i,clickCoords:l})=>{const s=t.useRef(null);t.useEffect(()=>{if(!s.current){return}const t=(i=s.current,new r(i,{toolbar:!1,keyboard:!1,clipboard:{matchVisual:!1},formats:T}));var i;return a.runInAction(()=>{quillRef.editor.instance=t}),window.__polotnoQuill=t,t.on("text-change",()=>{t.getSelection()&&a.runInAction(()=>{quillRef.currentFormat=t.getFormat()}),setTimeout(()=>{var t;const e=null===(t=s.current)||void 0===t?void 0:t.childNodes[0];n(e.innerHTML)},10)}),setQuillContent(t,e),l?setCursorFromCoords(t,l):t.setSelection(0,0,"api"),t.on("selection-change",(e,o,n)=>{e&&a.runInAction(()=>{quillRef.currentFormat=t.getFormat()})}),s.current.childNodes[0].addEventListener("blur",t=>{var e;if(null===(e=t.relatedTarget)||void 0===e?void 0:e.classList.contains("ql-clipboard")){return}const n=function(t){return!!t&&!!t.closest(".sketch-picker")}(t.relatedTarget);n||o()}),()=>{a.runInAction(()=>{quillRef.editor.instance=null,quillRef.currentFormat={}}),delete window.__polotnoQuill}},[]),t.useEffect(()=>O(()=>i.text,()=>{var t;const o=quillRef.editor.instance;if(!o){return}const n=o.getSelection();(null===(t=s.current)||void 0===t?void 0:t.childNodes[0].innerHTML)===i.text||(setQuillContent(o,e),n&&(o.setSelection(n.index,n.length),a.runInAction(()=>{quillRef.currentFormat=o.getFormat()})))},{fireImmediately:!0}),[]),t.useEffect(()=>{window.addEventListener("blur",o);const t=t=>{var e;(null===(e=s.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 c={color:i.fill};return i.fill.indexOf("gradient")>=0&&(c.backgroundColor=i.fill,c.backgroundImage=i.fill,c.backgroundSize="100% 100%",c.backgroundRepeat="repeat",c.webkitBackgroundClip="text",c.MozBackgroundClip="text",c.WebkitTextFillColor="transparent",c.MozTextFillColor="transparent"),t.createElement($,{ref:s,style:Object.assign(Object.assign({},c),{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)}),dir:d(S(i.text))})};function A(t){return!function(t){const e=t.getContext("2d").getImageData(0,0,t.width,t.height).data;for(let o=0;o<e.length;o+=4){if(0!==e[o+3]){return!0}}return!1}(t)}function I(t,{fontFamily:e="",color:o="black"}={}){let n=`color: ${o||t.fill}`;return t.fill.indexOf("gradient")>=0&&(n=`\n      background-color: ${o};\n      background-image: ${t.fill};\n      background-size: 100% 100%;\n      background-repeat: repeat;\n      -webkit-background-clip: text;\n      -moz-background-clip: text;\n      -webkit-text-fill-color: transparent;\n      -moz-text-fill-color: transparent;\n    `),`<div style="${["white-space: pre-wrap",`width: ${Math.round(t.width||100)}px`,n,`font-size: ${t.fontSize}px`,`font-family: '${e}'`,`text-align: ${t.align}`,`text-transform: ${t.textTransform}`,t.textDecoration?`text-decoration: ${t.textDecoration}; text-decoration-color: ${o||t.fill}; text-decoration-layer: over`:"",t.lineHeight?`line-height: ${t.lineHeight}`:"",t.letterSpacing?`letter-spacing: ${t.letterSpacing*t.fontSize}px`:"",t.fontStyle?`font-style: ${t.fontStyle}`:"",t.fontWeight?`font-weight: ${t.fontWeight}`:"",t.strokeWidth?`-webkit-text-stroke: ${t.strokeWidth}px ${t.stroke}`:"",t.strokeWidth?"paint-order: stroke fill":""].filter(Boolean).join("; ")}" contentEditable dir="${d(S(t.text))}">${k(t.text).replace(/\n/g,"</br>")}</div>`}const X=/^((?!chrome|android).)*safari/i.test(navigator.userAgent);export const HTMLElement=e(({element:e,store:r})=>{const d=t.useRef(null),[x,b]=t.useState(),[k,O]=t.useState(!1),[T,Y]=t.useState(!1),q=t.useRef(e.height),P=r.selectedShapes.indexOf(e)>=0&&e.selectable,H=e.fontSize/3,{textVerticalResizeEnabled:L}=l,W=u(e.fontFamily),[_]=c(r,e.fontFamily),B=e._editModeEnabled;y(d);const D=_?e.fontFamily:W!==e.fontFamily?W:"Arial",j=h(e).fill,N=I(e,{fontFamily:D,color:j}),{width:Q,height:V}=function(e,o,n){return t.useMemo(()=>m(e),[e,o.width,n])}(N,e,_);t.useEffect(()=>{if(!_){return}if(!e.height){return void e.set({height:V})}const{textOverflow:t}=l;if("change-font-size"!==t||k){"resize"===t&&(L&&e.height<V&&r.history.ignore(()=>{e.set({height:V})}),L||e.height===V||r.history.ignore(()=>{e.set({height:V})}))}else{const t=(t=>{let e=t.fontSize;for(let o=1;o<50;o++){const o=I(Object.assign(Object.assign({},t.toJSON()),{fontSize:e}),{fontFamily:t.fontFamily}),{height:n}=m(o),i=t.height&&n>t.height,r=p({html:o});if(!i&&!r){break}e-=.5}return e})(e);t!==e.fontSize?r.history.ignore(()=>{e.set({fontSize:t})}):e.height!==V&&(L&&e.height<V?r.history.ignore(()=>{e.set({height:V})}):L||r.history.ignore(()=>{e.set({height:V})}))}});const J=t.useMemo(()=>{const t={lastArgs:null,lastResult:null};return async function(e){return t.lastArgs&&t.lastResult&&(o=t.lastArgs,n=e,JSON.stringify(o)===JSON.stringify(n))||(t.lastResult=await g(e),t.lastArgs=Object.assign({},e)),t.lastResult;var o,n}},[]),G=t.useRef(0),K=t.useRef(null);t.useEffect(()=>{k||B||(async()=>{G.current++;const t=G.current;let o=v(`text ${e.id} ${t}`);K.current&&K.current(),K.current=o,Y(!0);let n=null;const i=X?5:1;for(let l=0;l<i;l++){const o=l>0?J:g;try{if(n=await o({skipCache:l>0,html:N,width:e.width||1,height:e.height||V||1,fontFamily:D,padding:H,pixelRatio:r._elementsPixelRatio,font:r.fonts.find(t=>t.fontFamily===D)||z.globalFonts.find(t=>t.fontFamily===D)}),t!==G.current){return}if(X&&A(n)){await new Promise(t=>setTimeout(t,50*(l+1)));continue}break}catch(a){console.error(a),E(`Error rendering rich text with id ${e.id}`);break}}n?b(n):o?(o(),o=null):console.error("Finish function is called twice!"),Y(!1)})()},[N,k,V,B,D,e.height,r._elementsPixelRatio,_]);const[U,Z]=C(T,300),[tt]=C(k,300,!0),et=tt||U;t.useEffect(()=>{if(!et){return a.autorun(()=>{const t=d.current;s(t,e)})}},[x,et,e.shadowColor,e.shadowOffsetX,e.shadowOffsetY,e.shadowOpacity]),t.useEffect(()=>{x&&!T&&K.current&&(K.current(),K.current=null)},[x,T]),t.useEffect(()=>()=>{K.current&&K.current()},[]);let ot=0;"middle"===e.verticalAlign&&(ot=(e.height-V)/2),"bottom"===e.verticalAlign&&(ot=e.height-V);const nt=f({fontLoaded:_,fontFamily:e.fontFamily,fontSize:e.fontSize,lineHeight:e.lineHeight}),it=F(),rt=t.useRef(null),at=t.useRef(null),lt=B&&e.strokeWidth>0;return t.createElement(t.Fragment,null,t.createElement(i,{x:e.a.x,y:e.a.y,offsetX:e.backgroundPadding*(e.fontSize*nt*.5),offsetY:e.backgroundPadding*(e.fontSize*nt*.5),rotation:e.a.rotation,hideInExport:!e.showInExport,listening:!1,visible:e.backgroundEnabled,opacity:e.backgroundOpacity*e.a.opacity,fill:e.backgroundColor,width:e.a.width+e.backgroundPadding*(e.fontSize*nt),height:e.a.height+e.backgroundPadding*(e.fontSize*nt),cornerRadius:e.backgroundCornerRadius*(e.fontSize*nt*.5)}),t.createElement(i,{ref:d,name:"element",x:e.a.x,y:e.a.y,listening:e.selectable,rotation:e.a.rotation,width:e.a.width,height:e.a.height,visible:!et,draggable:it?e.draggable&&P:e.draggable,preventDefault:!it||P,opacity:B?0:e.a.opacity,hideInExport:!e.showInExport,onDragMove:t=>{e.set({x:t.target.x(),y:t.target.y()})},onDragEnd:t=>{e.set({x:t.target.x(),y:t.target.y()})},id:e.id,onDblClick:t=>{e.contentEditable&&(at.current={x:t.evt.clientX,y:t.evt.clientY},e.toggleEditMode(!0))},onDblTap:t=>{var o;if(e.contentEditable){const n=null===(o=t.evt.changedTouches)||void 0===o?void 0:o[0];at.current=n?{x:n.clientX,y:n.clientY}:null,e.toggleEditMode(!0)}},onTransformStart:t=>{O(!0),q.current=e.height},onTransform:t=>{var o;const n=t.target,i=(null===(o=n.getStage())||void 0===o?void 0:o.findOne("Transformer")).getActiveAnchor(),r="middle-left"===i||"middle-right"===i,a="top-center"===i||"bottom-center"===i,s=n.scaleX();if(r){const t=n.scaleX(),o=n.width()*t,i=e.fontSize;let r=o;if(o<i&&(r=i,rt.current&&n.position(rt.current)),n.width(r),n.scaleX(1),l.textVerticalResizeEnabled){const t=Math.max(V,q.current);e.set({height:t})}e.set({width:n.width(),x:n.x(),y:n.y()})}else if(a){let o="resize"===l.textOverflow?V:e.lineHeight*e.fontSize;const i=Math.max(o,t.target.height()*t.target.scaleY());n.scaleY(1),e.set({x:n.x(),y:n.y(),height:i,rotation:n.rotation()})}else{n.scaleX(1),n.scaleY(1),e.set({fontSize:e.fontSize*s,letterSpacing:e.letterSpacing,width:n.width()*s,x:n.x(),y:n.y(),rotation:n.rotation(),height:n.height()*s})}rt.current=t.target.position()},onTransformEnd:t=>{O(!1),Y(!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(o,{ref:d,image:x,x:e.a.x,y:e.a.y,offsetX:H,offsetY:H-ot,listening:!1,rotation:e.a.rotation,width:e.a.width+2*H,height:(e.a.width+2*H)*((null==x?void 0:x.height)/(null==x?void 0:x.width)||1),visible:!et&&!B,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||k}),(et||lt)&&t.createElement(n,{x:e.a.x,y:e.a.y,rotation:e.a.rotation,offsetY:-ot},t.createElement(w,{divProps:{style:{pointerEvents:"none"}}},t.createElement($,{dangerouslySetInnerHTML:{__html:N},style:{pointerEvents:"none",opacity:e.a.opacity}}))),B&&t.createElement(n,{x:e.a.x,y:e.a.y,rotation:e.a.rotation,offsetY:-ot},t.createElement(w,null,t.createElement(M,{html:N,element:e,onChange:t=>{const o=R({oldText:S(e.text),newText:S(t),element:e});e.set({text:t,fontSize:o})},onBlur:t=>{e.toggleEditMode(!1),Z(!0),""===S(e.text)&&e.removable&&!e.placeholder&&r.deleteElements([e.id])},clickCoords:at.current}))))});export function setCursorFromCoords(t,e){if(!t||!e){return}const{x:o,y:n}=e;try{let e=null;if(document.caretRangeFromPoint){e=document.caretRangeFromPoint(o,n)}else if(document.caretPositionFromPoint){const t=document.caretPositionFromPoint(o,n);t&&(e=document.createRange(),e.setStart(t.offsetNode,t.offset))}if(e){const o=r.find(e.startContainer,!0);if(o){const n=o.offset(t.scroll)+e.startOffset;return void t.setSelection(n,0,"api")}}}catch(i){}t.setSelection(0,0,"api")}
+`;let j=["bold","color","font","italic","size","strike","underline","indent","list","direction"];export const setQuillFormats=t=>{j=t};export const createQuill=t=>new r(t,{toolbar:!1,keyboard:!1,clipboard:{matchVisual:!1},formats:j});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 T=({html:e,onBlur:o,onChange:n,element:i,clickCoords:l})=>{const s=t.useRef(null);t.useEffect(()=>{if(!s.current){return}const t=(i=s.current,new r(i,{toolbar:!1,keyboard:!1,clipboard:{matchVisual:!1},formats:j}));var i;return a.runInAction(()=>{quillRef.editor.instance=t}),window.__polotnoQuill=t,t.on("text-change",()=>{t.getSelection()&&a.runInAction(()=>{quillRef.currentFormat=t.getFormat()}),setTimeout(()=>{var t;const e=null===(t=s.current)||void 0===t?void 0:t.childNodes[0];n(e.innerHTML)},10)}),setQuillContent(t,e),l?setCursorFromCoords(t,l):t.setSelection(0,0,"api"),t.on("selection-change",(e,o,n)=>{e&&a.runInAction(()=>{quillRef.currentFormat=t.getFormat()})}),s.current.childNodes[0].addEventListener("blur",t=>{var e;if(null===(e=t.relatedTarget)||void 0===e?void 0:e.classList.contains("ql-clipboard")){return}const n=function(t){return!!t&&!!t.closest(".sketch-picker")}(t.relatedTarget);n||o()}),()=>{a.runInAction(()=>{quillRef.editor.instance=null,quillRef.currentFormat={}}),delete window.__polotnoQuill}},[]),t.useEffect(()=>O(()=>i.text,()=>{var t;const o=quillRef.editor.instance;if(!o){return}const n=o.getSelection();(null===(t=s.current)||void 0===t?void 0:t.childNodes[0].innerHTML)===i.text||(setQuillContent(o,e),n&&(o.setSelection(n.index,n.length),a.runInAction(()=>{quillRef.currentFormat=o.getFormat()})))},{fireImmediately:!0}),[]),t.useEffect(()=>{window.addEventListener("blur",o);const t=t=>{var e;(null===(e=s.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 c={color:i.fill};return i.fill.indexOf("gradient")>=0&&(c.backgroundColor=i.fill,c.backgroundImage=i.fill,c.backgroundSize="100% 100%",c.backgroundRepeat="repeat",c.webkitBackgroundClip="text",c.MozBackgroundClip="text",c.WebkitTextFillColor="transparent",c.MozTextFillColor="transparent"),t.createElement($,{ref:s,style:Object.assign(Object.assign({},c),{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)}),dir:d(S(i.text))})};function M(t){return!function(t){const e=t.getContext("2d").getImageData(0,0,t.width,t.height).data;for(let o=0;o<e.length;o+=4){if(0!==e[o+3]){return!0}}return!1}(t)}function A(t,{fontFamily:e="",color:o="black"}={}){let n=`color: ${o||t.fill}`;return t.fill.indexOf("gradient")>=0&&(n=`\n      background-color: ${o};\n      background-image: ${t.fill};\n      background-size: 100% 100%;\n      background-repeat: repeat;\n      -webkit-background-clip: text;\n      -moz-background-clip: text;\n      -webkit-text-fill-color: transparent;\n      -moz-text-fill-color: transparent;\n    `),`<div style="${["white-space: pre-wrap",`width: ${Math.round(t.width||100)}px`,n,`font-size: ${t.fontSize}px`,`font-family: '${e}'`,`text-align: ${t.align}`,`text-transform: ${t.textTransform}`,t.textDecoration?`text-decoration: ${t.textDecoration}; text-decoration-color: ${o||t.fill}; text-decoration-layer: over`:"",t.lineHeight?`line-height: ${t.lineHeight}`:"",t.letterSpacing?`letter-spacing: ${t.letterSpacing*t.fontSize}px`:"",t.fontStyle?`font-style: ${t.fontStyle}`:"",t.fontWeight?`font-weight: ${t.fontWeight}`:"",t.strokeWidth?`-webkit-text-stroke: ${t.strokeWidth}px ${t.stroke}`:"",t.strokeWidth?"paint-order: stroke fill":""].filter(Boolean).join("; ")}" contentEditable dir="${d(S(t.text))}">${k(t.text).replace(/\n/g,"</br>")}</div>`}const I=/^((?!chrome|android).)*safari/i.test(navigator.userAgent);export const HTMLElement=e(({element:e,store:r})=>{const d=t.useRef(null),[x,b]=t.useState(),[k,O]=t.useState(!1),[j,X]=t.useState(!1),Y=t.useRef(e.height),q=r.selectedShapes.indexOf(e)>=0&&e.selectable,P=e.fontSize/3,{textVerticalResizeEnabled:H}=l,L=u(e.fontFamily),[W]=c(r,e.fontFamily),_=e._editModeEnabled;y(d);const B=W?e.fontFamily:L!==e.fontFamily?L:"Arial",D=h(e).fill,N=A(e,{fontFamily:B,color:D}),{width:Q,height:V}=function(e,o,n){return t.useMemo(()=>m(e),[e,o.width,n])}(N,e,W);t.useEffect(()=>{if(!W){return}if(!e.height){return void e.set({height:V})}const{textOverflow:t}=l;if("change-font-size"!==t||k){"resize"===t&&(H&&e.height<V&&r.history.ignore(()=>{e.set({height:V})}),H||e.height===V||r.history.ignore(()=>{e.set({height:V})}))}else{const t=(t=>{let e=t.fontSize;for(let o=1;o<50;o++){const o=A(Object.assign(Object.assign({},t.toJSON()),{fontSize:e}),{fontFamily:t.fontFamily}),{height:n}=m(o),i=t.height&&n>t.height,r=p({html:o});if(!i&&!r){break}e-=.5}return e})(e);t!==e.fontSize?r.history.ignore(()=>{e.set({fontSize:t})}):e.height!==V&&(H&&e.height<V?r.history.ignore(()=>{e.set({height:V})}):H||r.history.ignore(()=>{e.set({height:V})}))}});const J=t.useMemo(()=>{const t={lastArgs:null,lastResult:null};return async function(e){return t.lastArgs&&t.lastResult&&(o=t.lastArgs,n=e,JSON.stringify(o)===JSON.stringify(n))||(t.lastResult=await g(e),t.lastArgs=Object.assign({},e)),t.lastResult;var o,n}},[]),G=t.useRef(0),K=t.useRef(null);t.useEffect(()=>{k||_||(async()=>{G.current++;const t=G.current;let o=v(`text ${e.id} ${t}`);K.current&&K.current(),K.current=o,X(!0);let n=null;const i=I?5:1;for(let l=0;l<i;l++){const o=l>0?J:g;try{if(n=await o({skipCache:l>0,html:N,width:e.width||1,height:e.height||V||1,fontFamily:B,padding:P,pixelRatio:r._elementsPixelRatio,font:r.fonts.find(t=>t.fontFamily===B)||z.globalFonts.find(t=>t.fontFamily===B)}),t!==G.current){return}if(I&&M(n)){await new Promise(t=>setTimeout(t,50*(l+1)));continue}break}catch(a){console.error(a),E(`Error rendering rich text with id ${e.id}`);break}}n?b(n):o?(o(),o=null):console.error("Finish function is called twice!"),X(!1)})()},[N,k,V,_,B,e.height,r._elementsPixelRatio,W]);const[U,Z]=C(j,300),[tt]=C(k,300,!0),et=tt||U;t.useEffect(()=>{if(!et){return a.autorun(()=>{const t=d.current;s(t,e)})}},[x,et,e.shadowColor,e.shadowOffsetX,e.shadowOffsetY,e.shadowOpacity]),t.useEffect(()=>{x&&!j&&K.current&&(K.current(),K.current=null)},[x,j]),t.useEffect(()=>()=>{K.current&&K.current()},[]);let ot=0;"middle"===e.verticalAlign&&(ot=(e.height-V)/2),"bottom"===e.verticalAlign&&(ot=e.height-V);const nt=f({fontLoaded:W,fontFamily:e.fontFamily,fontSize:e.fontSize,lineHeight:e.lineHeight}),it=F(),rt=t.useRef(null),at=t.useRef(null),lt=_&&e.strokeWidth>0;return t.createElement(t.Fragment,null,t.createElement(i,{x:e.a.x,y:e.a.y,offsetX:e.backgroundPadding*(e.fontSize*nt*.5),offsetY:e.backgroundPadding*(e.fontSize*nt*.5),rotation:e.a.rotation,hideInExport:!e.showInExport,listening:!1,visible:e.backgroundEnabled,opacity:e.backgroundOpacity*e.a.opacity,fill:e.backgroundColor,width:e.a.width+e.backgroundPadding*(e.fontSize*nt),height:e.a.height+e.backgroundPadding*(e.fontSize*nt),cornerRadius:e.backgroundCornerRadius*(e.fontSize*nt*.5)}),t.createElement(i,{ref:d,name:"element",x:e.a.x,y:e.a.y,listening:e.selectable,rotation:e.a.rotation,width:e.a.width,height:e.a.height,visible:!et,draggable:it?e.draggable&&q:e.draggable,preventDefault:!it||q,opacity:_?0:e.a.opacity,hideInExport:!e.showInExport,onDragMove:t=>{e.set({x:t.target.x(),y:t.target.y()})},onDragEnd:t=>{e.set({x:t.target.x(),y:t.target.y()})},id:e.id,onDblClick:t=>{e.contentEditable&&(at.current={x:t.evt.clientX,y:t.evt.clientY},e.toggleEditMode(!0))},onDblTap:t=>{var o;if(e.contentEditable){const n=null===(o=t.evt.changedTouches)||void 0===o?void 0:o[0];at.current=n?{x:n.clientX,y:n.clientY}:null,e.toggleEditMode(!0)}},onTransformStart:t=>{O(!0),Y.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,s=n.scaleX();if(r){const t=n.scaleX(),o=n.width()*t,i=e.fontSize;let r=o;if(o<i&&(r=i,rt.current&&n.position(rt.current)),n.width(r),n.scaleX(1),l.textVerticalResizeEnabled){const t=Math.max(V,Y.current);e.set({height:t})}e.set({width:n.width(),x:n.x(),y:n.y()})}else if(a){let o="resize"===l.textOverflow?V:e.lineHeight*e.fontSize;const i=Math.max(o,t.target.height()*t.target.scaleY());n.scaleY(1),e.set({x:n.x(),y:n.y(),height:i,rotation:n.rotation()})}else{n.scaleX(1),n.scaleY(1),e.set({fontSize:e.fontSize*s,letterSpacing:e.letterSpacing,width:n.width()*s,x:n.x(),y:n.y(),rotation:n.rotation(),height:n.height()*s})}rt.current=t.target.position()},onTransformEnd:t=>{O(!1),X(!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(o,{ref:d,image:x,x:e.a.x,y:e.a.y,offsetX:P,offsetY:P-ot,listening:!1,rotation:e.a.rotation,width:e.a.width+2*P,height:(e.a.width+2*P)*((null==x?void 0:x.height)/(null==x?void 0:x.width)||1),visible:!et&&!_,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||k}),(et||lt)&&t.createElement(n,{x:e.a.x,y:e.a.y,rotation:e.a.rotation,offsetY:-ot},t.createElement(w,{divProps:{style:{pointerEvents:"none"}}},t.createElement($,{dangerouslySetInnerHTML:{__html:N},style:{pointerEvents:"none",opacity:e.a.opacity}}))),_&&t.createElement(n,{x:e.a.x,y:e.a.y,rotation:e.a.rotation,offsetY:-ot},t.createElement(w,null,t.createElement(T,{html:N,element:e,onChange:t=>{const o=R({oldText:S(e.text),newText:S(t),element:e});e.set({text:t,fontSize:o})},onBlur:t=>{e.toggleEditMode(!1),Z(!0),""===S(e.text)&&e.removable&&!e.placeholder&&r.deleteElements([e.id])},clickCoords:at.current}))))});export function setCursorFromCoords(t,e){if(!t||!e){return}const{x:o,y:n}=e;try{let e=null;if(document.caretRangeFromPoint){e=document.caretRangeFromPoint(o,n)}else if(document.caretPositionFromPoint){const t=document.caretPositionFromPoint(o,n);t&&(e=document.createRange(),e.setStart(t.offsetNode,t.offset))}if(e){const o=r.find(e.startContainer,!0);if(o){const n=o.offset(t.scroll)+e.startOffset;return void t.setSelection(n,0,"api")}}}catch(i){}t.setSelection(0,0,"api")}

package/canvas/image-element.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { TransformerConfig } from 'konva/lib/shapes/Transformer';
-import { StoreType } from '../model/store';
-import { ImageElementType } from '../model/image-model';
+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;

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{Image as a,Group as o,Rect as i,Transformer as n,Arc as h,Text as c}from"react-konva";import d from"use-image";import s from"konva";import{Portal as g}from"react-konva-utils";import{incrementLoader as l,triggerLoadError as u}from"../utils/loader";import*as m from"../utils/svg";import{flags as p}from"../utils/flags";import{trySetCanvasSize as f}from"../utils/canvas";import{applyFilter as w}from"./apply-filters";import{useFadeIn as x}from"./use-fadein";import{isTouchDevice as y}from"../utils/screen";import{useDelayer as M}from"./use-delayer";function v(){return document.createElement("canvas")}const b=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(!b(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 E(t,e){return{x:(t.x+e.x)/2,y:(t.y+e.y)/2}}const S={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(S,t)};const R={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(R,t)};const C=(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(C(e.a.width*o,1,1e4)),d=Math.floor(C(e.a.height*o,1,1e4)),g=Math.min(i*o,c/2,d/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:v()}},[r,g,u,m]);return t.useLayoutEffect(()=>{if(!w||!r){return}f(w,c,d);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,d-g),t.arc(c-g,d-g,g,0,Math.PI/2,!1),t.lineTo(g,d),t.arc(g,d-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=v();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),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))*d,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*d];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),s[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&&s.Util.releaseCanvas(w)},[w]),w||r};const I=v(),O=e(({element:e})=>{const r=Math.min(30,e.a.width/4,e.a.height/4),a=t.useRef(null);return t.useEffect(()=>{const t=a.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()}}),t.createElement(o,{x:e.x,y:e.y,rotation:e.rotation,listening:!1,opacity:e.a.opacity,hideInExport:!e.showInExport},t.createElement(i,{width:e.a.width,height:e.a.height,fill:"rgba(124, 173, 212, 0.8)"}),t.createElement(h,{ref:a,x:e.a.width/2,y:e.a.height/2,fill:"white",outerRadius:Math.abs(r),innerRadius:Math.max(1,r-5),angle:270}))}),X=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(i,{width:e.a.width,height:e.a.height,fill:"rgba(223, 102, 102, 0.8)"}),t.createElement(c,{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 Y=d;export const setImageLoaderHook=t=>{Y=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:h})=>{var c;const[d,l]=t.useState(!1),u=t.useRef(null),p=t.useRef(null),C=h.selectedShapes.indexOf(e)>=0&&e.selectable,[T,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(()=>b(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),[k,A]=Y(T,"anonymous"),D="svg"!==e.type||"loaded"===W?A:"loading";useImageLoader(D,e.src,e.id);const _=e.page._exportingOrRendering?1:Math.max(1,h.scale),L=h._elementsPixelRatio*_,z=(({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:k,status:A,type:e.type}),H=((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=v();let g=1;"svg"===e.type&&(g=Math.max(e.a.width/r.width*a,e.a.height/r.height*a)),f(s,Math.max(r.width*g,1),Math.max(r.height*g,1));let l=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,l,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,k||z,L),P=((e,r)=>{const a=useSizeFixer(e.maskSrc||""),[o,i]=Y(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=v();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,H)||I;let{cropX:B,cropY:F,cropWidth:N,cropHeight:U}=e.a;"loaded"!==A&&(B=F=0,N=U=1);const j=P.width*N,V=P.height*U,$=e.a.width/e.a.height;let q,J;const G=j/V,K=e.stretchEnabled;K?(q=j,J=V):$>=G?(q=j,J=j/$):(q=V*$,J=V);const Q={x:P.width*B,y:P.height*F,width:q,height:J},Z=null!==(c=e.cornerRadius)&&void 0!==c?c:0,tt=e.page._exportingOrRendering?1:Math.min(2,h.scale),et=h._elementsPixelRatio*tt;let rt=((e,r,a,o)=>{const i=useSizeFixer(e.clipSrc||""),[n,h]=Y(i,"anonymous"),c=e.clipSrc?h:"loaded";useImageLoader(c,e.clipSrc,e.id);const d=t.useMemo(()=>{if(r&&n){return v()}},[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=v(),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,P,Q,et,Z,d||e._cropModeEnabled||"svg"===e.type,!0),et,[Q,Z,et]);const at=Math.max(e.a.width/q,e.a.height/J);t.useEffect(()=>{var t;if(!e._cropModeEnabled){return}const r=null===(t=u.current)||void 0===t?void 0:t.getStage();function a(t){e._cropModeEnabled&&t.target!==p.current&&e.toggleCropMode(!1)}function o(t){e._cropModeEnabled&&t.target.parentNode!==r.content&&e.toggleCropMode(!1)}return document.body.addEventListener("click",o),null==r||r.on("click",a),null==r||r.on("tap",a),()=>{document.body.removeEventListener("click",o),document.body.removeEventListener("touchstart",o),null==r||r.off("click",a),null==r||r.off("click",a)}},[e._cropModeEnabled]),t.useLayoutEffect(()=>{if(!d&&!e._cropModeEnabled){return w(u.current,e),r(()=>{w(u.current,e)},{delay:100})}},[rt,e.page._exportingOrRendering,d,N,U,e._cropModeEnabled]),t.useLayoutEffect(()=>{var t;d||e._cropModeEnabled?null===(t=u.current)||void 0===t||t.clearCache():w(u.current,e)},[d,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 ot=t.useRef(null),it=t.useRef(null),nt=t.useRef(null);t.useLayoutEffect(()=>{e._cropModeEnabled&&(it.current.nodes([ot.current]),nt.current.nodes([p.current]))},[e._cropModeEnabled]);var ht=t.useRef(null),ct=t.useRef(0),dt=t.useRef(!1);const st=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,q/a),n=Math.min(1,J/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*P.width,y:-s*P.height,scaleX:1,scaleY:1}),e.set({cropX:c,cropY:s,cropWidth:i,cropHeight:n})},gt=()=>{"svg"!==e.type&&e.contentEditable&&(e.stretchEnabled||setTimeout(()=>{e.toggleCropMode(!0)}))},lt="svg"===e.type&&z,ut="loading"===A&&!lt,[mt]=M(ut,100,!1,!1),pt="failed"===A,ft=!mt&&!pt,wt=t.useRef({cropX:0,cropY:0,cropWidth:0,cropHeight:0}),xt=ft?e.a.opacity:0;x(u,xt);const yt=e.selectable||"admin"===h.role,Mt=y();return t.createElement(t.Fragment,null,mt&&t.createElement(O,{element:e}),pt&&t.createElement(X,{element:e}),t.createElement(a,{ref:u,name:"element",id:e.id,image:rt,x:e.a.x,y:e.a.y,width:e.a.width||1,height:e.a.height||1,rotation:e.a.rotation,opacity:xt,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,customCrop:Q,listening:yt,draggable:Mt?e.draggable&&C:e.draggable,preventDefault:!Mt||C,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:gt,onDblTap:gt,onTransformStart:()=>{l(!0),wt.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-q/P.width,c=Math.min(h,Math.max(0,e.cropX)),d=1-J/P.height,s=Math.min(d,Math.max(0,e.cropY)),g=n.getActiveAnchor(),l=!(g.indexOf("middle")>=0||g.indexOf("center")>=0),u=!l&&o<1&&wt.current.cropHeight>J/P.height;let m=l?e.cropWidth:e.cropWidth*o;u&&(m=e.cropWidth);const p=!l&&i<1&&wt.current.cropWidth>q/P.width;let f=l?e.cropHeight:e.cropHeight*i;p&&(f=e.cropHeight),K&&(m=e.cropWidth,f=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(f,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:q/P.width,cropHeight:J/P.height}),l(!1)}}),t.createElement(i,{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:xt,offsetX:-e.borderSize/2,offsetY:-e.borderSize/2,stroke:e.borderColor,strokeWidth:e.borderSize,listening:!1,visible:!!e.borderSize,rotation:e.rotation,cornerRadius:Math.max(0,Z-e.borderSize),hideInExport:!e.showInExport}),e._cropModeEnabled&&t.createElement(g,{selector:".page-abs-container",enabled:!0},t.createElement(i,{x:-window.innerWidth/h.scale,y:-window.innerWidth/h.scale,width:window.innerWidth/h.scale*3,height:window.innerWidth/h.scale*3,fill:"rgba(0,0,0,0.3)"}),t.createElement(a,{listening:!1,image:rt,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:at,scaleY:at},t.createElement(a,{image:P,ref:p,opacity:.4,draggable:!0,x:-e.cropX*P.width,y:-e.cropY*P.height,onDragMove:st,onTransform:st,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){s.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(!ht.current){return void(ht.current=E(i,n))}var h=E(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);ct.current||(ct.current=c);const p=o.position();var d={x:h.x-p.x,y:h.y-p.y},g=c/ct.current;o.scaleX(g),o.scaleY(g);const f=e.point(h),w=e.point(ht.current);var l=f.x-w.x,u=f.y-w.y,m={x:Math.min(0,h.x-d.x*g+l),y:Math.min(0,h.y-d.y*g+u)};o.position(m),ct.current=c,ht.current=h,st(t)}},onTouchEnd:t=>{ct.current=0,ht.current=null,s.hitOnDragEnabled=!1}}),t.createElement(n,Object.assign({ref:nt},R)),t.createElement(i,{width:q,height:J,ref:ot,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*at,P.width*(1-r)*at),height:Math.min(i*at,P.height*(1-a)*at)})}}),t.createElement(n,Object.assign({ref:it},S,{visible:e.resizable})))))});
+import t from"react";import{observer as e}from"mobx-react-lite";import{autorun as r}from"mobx";import{Image as a,Group as o,Rect as i,Transformer as n,Arc as h,Text as c}from"react-konva";import d from"use-image";import s 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";function v(){return document.createElement("canvas")}const b=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(!b(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 E(t,e){return{x:(t.x+e.x)/2,y:(t.y+e.y)/2}}const S={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(S,t)};const R={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(R,t)};const C=(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(C(e.a.width*o,1,1e4)),d=Math.floor(C(e.a.height*o,1,1e4)),g=Math.min(i*o,c/2,d/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:v()}},[r,g,u,m]);return t.useLayoutEffect(()=>{if(!w||!r){return}f(w,c,d);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,d-g),t.arc(c-g,d-g,g,0,Math.PI/2,!1),t.lineTo(g,d),t.arc(g,d-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=v();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),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))*d,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*d];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),s[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&&s.Util.releaseCanvas(w)},[w]),w||r};const I=v(),O=e(({element:e})=>{const r=Math.min(30,e.a.width/4,e.a.height/4),a=t.useRef(null);return t.useEffect(()=>{const t=a.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()}}),t.createElement(o,{x:e.x,y:e.y,rotation:e.rotation,listening:!1,opacity:e.a.opacity,hideInExport:!e.showInExport},t.createElement(i,{width:e.a.width,height:e.a.height,fill:"rgba(124, 173, 212, 0.8)"}),t.createElement(h,{ref:a,x:e.a.width/2,y:e.a.height/2,fill:"white",outerRadius:Math.abs(r),innerRadius:Math.max(1,r-5),angle:270}))}),X=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(i,{width:e.a.width,height:e.a.height,fill:"rgba(223, 102, 102, 0.8)"}),t.createElement(c,{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 Y=d;export const setImageLoaderHook=t=>{Y=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:h})=>{var c;const[d,l]=t.useState(!1),u=t.useRef(null),p=t.useRef(null),C=h.selectedShapes.indexOf(e)>=0&&e.selectable,[T,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(()=>b(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),[k,A]=Y(T,"anonymous"),D="svg"!==e.type||"loaded"===W?A:"loading";useImageLoader(D,e.src,e.id);const _=e.page._exportingOrRendering?1:Math.max(1,h.scale),L=h._elementsPixelRatio*_,z=(({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:k,status:A,type:e.type}),H=((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=v();let g=1;"svg"===e.type&&(g=Math.max(e.a.width/r.width*a,e.a.height/r.height*a)),f(s,Math.max(r.width*g,1),Math.max(r.height*g,1));let l=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,l,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,k||z,L),P=((e,r)=>{const a=useSizeFixer(e.maskSrc||""),[o,i]=Y(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=v();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,H)||I;let{cropX:j,cropY:B,cropWidth:F,cropHeight:N}=e.a;"loaded"!==A&&(j=B=0,F=N=1);const U=P.width*F,V=P.height*N,$=e.a.width/e.a.height;let q,J;const G=U/V,K=e.stretchEnabled;K?(q=U,J=V):$>=G?(q=U,J=U/$):(q=V*$,J=V);const Q={x:P.width*j,y:P.height*B,width:q,height:J},Z=null!==(c=e.cornerRadius)&&void 0!==c?c:0,tt=e.page._exportingOrRendering?1:Math.min(2,h.scale),et=h._elementsPixelRatio*tt;let rt=((e,r,a,o)=>{const i=useSizeFixer(e.clipSrc||""),[n,h]=Y(i,"anonymous"),c=e.clipSrc?h:"loaded";useImageLoader(c,e.clipSrc,e.id);const d=t.useMemo(()=>{if(r&&n){return v()}},[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=v(),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,P,Q,et,Z,d||e._cropModeEnabled||"svg"===e.type,!0),et,[Q,Z,et]);const at=Math.max(e.a.width/q,e.a.height/J);t.useEffect(()=>{var t;if(!e._cropModeEnabled){return}const r=null===(t=u.current)||void 0===t?void 0:t.getStage();function a(t){e._cropModeEnabled&&t.target!==p.current&&e.toggleCropMode(!1)}function o(t){e._cropModeEnabled&&t.target.parentNode!==r.content&&e.toggleCropMode(!1)}return document.body.addEventListener("click",o),null==r||r.on("click",a),null==r||r.on("tap",a),()=>{document.body.removeEventListener("click",o),document.body.removeEventListener("touchstart",o),null==r||r.off("click",a),null==r||r.off("click",a)}},[e._cropModeEnabled]),t.useLayoutEffect(()=>{if(!d&&!e._cropModeEnabled){return w(u.current,e),r(()=>{w(u.current,e)},{delay:100})}},[rt,e.page._exportingOrRendering,d,F,N,e._cropModeEnabled]),t.useLayoutEffect(()=>{var t;d||e._cropModeEnabled?null===(t=u.current)||void 0===t||t.clearCache():w(u.current,e)},[d,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 ot=t.useRef(null),it=t.useRef(null),nt=t.useRef(null);t.useLayoutEffect(()=>{e._cropModeEnabled&&(it.current.nodes([ot.current]),nt.current.nodes([p.current]))},[e._cropModeEnabled]);var ht=t.useRef(null),ct=t.useRef(0),dt=t.useRef(!1);const st=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,q/a),n=Math.min(1,J/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*P.width,y:-s*P.height,scaleX:1,scaleY:1}),e.set({cropX:c,cropY:s,cropWidth:i,cropHeight:n})},gt=()=>{"svg"!==e.type&&e.contentEditable&&(e.stretchEnabled||setTimeout(()=>{e.toggleCropMode(!0)}))},lt="svg"===e.type&&z,ut="loading"===A&&!lt,[mt]=M(ut,100,!1,!1),pt="failed"===A,ft=!mt&&!pt,wt=t.useRef({cropX:0,cropY:0,cropWidth:0,cropHeight:0}),xt=ft?e.a.opacity:0;x(u,xt);const yt=e.selectable||"admin"===h.role,Mt=y();return t.createElement(t.Fragment,null,mt&&t.createElement(O,{element:e}),pt&&t.createElement(X,{element:e}),t.createElement(a,{ref:u,name:"element",id:e.id,image:rt,x:e.a.x,y:e.a.y,width:e.a.width||1,height:e.a.height||1,rotation:e.a.rotation,opacity:xt,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,customCrop:Q,listening:yt,draggable:Mt?e.draggable&&C:e.draggable,preventDefault:!Mt||C,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:gt,onDblTap:gt,onTransformStart:()=>{l(!0),wt.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-q/P.width,c=Math.min(h,Math.max(0,e.cropX)),d=1-J/P.height,s=Math.min(d,Math.max(0,e.cropY)),g=n.getActiveAnchor(),l=!(g.indexOf("middle")>=0||g.indexOf("center")>=0),u=!l&&o<1&&wt.current.cropHeight>J/P.height;let m=l?e.cropWidth:e.cropWidth*o;u&&(m=e.cropWidth);const p=!l&&i<1&&wt.current.cropWidth>q/P.width;let f=l?e.cropHeight:e.cropHeight*i;p&&(f=e.cropHeight),K&&(m=e.cropWidth,f=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(f,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:q/P.width,cropHeight:J/P.height}),l(!1)}}),t.createElement(i,{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:xt,offsetX:-e.borderSize/2,offsetY:-e.borderSize/2,stroke:e.borderColor,strokeWidth:e.borderSize,listening:!1,visible:!!e.borderSize,rotation:e.rotation,cornerRadius:Math.max(0,Z-e.borderSize),hideInExport:!e.showInExport}),e._cropModeEnabled&&t.createElement(g,{selector:".page-abs-container",enabled:!0},t.createElement(i,{x:-window.innerWidth/h.scale,y:-window.innerWidth/h.scale,width:window.innerWidth/h.scale*3,height:window.innerWidth/h.scale*3,fill:"rgba(0,0,0,0.3)"}),t.createElement(a,{listening:!1,image:rt,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:at,scaleY:at},t.createElement(a,{image:P,ref:p,opacity:.4,draggable:!0,x:-e.cropX*P.width,y:-e.cropY*P.height,onDragMove:st,onTransform:st,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){s.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(!ht.current){return void(ht.current=E(i,n))}var h=E(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);ct.current||(ct.current=c);const p=o.position();var d={x:h.x-p.x,y:h.y-p.y},g=c/ct.current;o.scaleX(g),o.scaleY(g);const f=e.point(h),w=e.point(ht.current);var l=f.x-w.x,u=f.y-w.y,m={x:Math.min(0,h.x-d.x*g+l),y:Math.min(0,h.y-d.y*g+u)};o.position(m),ct.current=c,ht.current=h,st(t)}},onTouchEnd:t=>{ct.current=0,ht.current=null,s.hitOnDragEnabled=!1}}),t.createElement(n,Object.assign({ref:nt},R)),t.createElement(i,{width:q,height:J,ref:ot,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*at,P.width*(1-r)*at),height:Math.min(i*at,P.height*(1-a)*at)})}}),t.createElement(n,Object.assign({ref:it},S,{visible:e.resizable})))))});

package/canvas/line-element.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { StoreType } from '../model/store';
-import { LineElementType } from '../model/line-model';
+import { StoreType } from '../model/store.js';
+import { LineElementType } from '../model/line-model.js';
 type LineProps = {
     store: StoreType;
     element: LineElementType;

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 i,Circle as n}from"react-konva";import{useColor as r}from"./use-color";import{Portal as s}from"react-konva-utils";import{useAnchorSnap as h}from"./use-transformer-snap";import{isTouchDevice as l}from"../utils/screen";export function getMiddlePoints(t){const{x:e,y:a,width:o,height:i,rotation:n}=t.a,r=n*Math.PI/180,s={x:e+i/2*Math.cos(r+Math.PI/2),y:a+i/2*Math.sin(r+Math.PI/2)};return{middleLeft:s,middleRight:{x:s.x+o*Math.cos(r),y:s.y+o*Math.sin(r)}}}export function getLinePositionFromMiddlePoints(t,e,a){const o=Math.sqrt(Math.pow(e.x-t.x,2)+Math.pow(e.y-t.y,2)),i=Math.atan2(e.y-t.y,e.x-t.x),n=180*i/Math.PI;return{x:t.x+Math.cos(i-Math.PI/2)*a/2,y:t.y+Math.sin(i-Math.PI/2)*a/2,width:o,height:a,rotation:n}}const g=(t,e)=>({offsetX:5/t,offsetY:5/t,width:10/t,height:10/t,fill:"white",stroke:"rgb(0, 161, 255)",strokeWidth: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()}}),c=e(({element:e,type:a})=>{const i=r(e,e.a.color,"fill"),s=r(e,e.a.color,"stroke"),h=Object.assign(Object.assign(Object.assign({strokeWidth:e.height,lineCap:"round",lineJoin:"round"},s),i),{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 d=t.useRef(null),m=t.useRef(null),x=t.useRef(null),y=e.selectable||"admin"===n.role,p=l(),f=n.selectedElements.indexOf(e)>=0&&1===n.selectedElements.length,E=n.selectedShapes.indexOf(e)>=0&&e.selectable,{middleLeft:u,middleRight:w}=getMiddlePoints(e);h(m,[d],[f]),h(x,[d],[f]);const b=r(e,e.a.color,"stroke");return t.createElement(t.Fragment,null,t.createElement(o,Object.assign({ref:d,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:y,draggable:p?e.draggable&&E:e.draggable,preventDefault:!p||E,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:u.x,y:u.y,rotation:e.rotation,hideInExport:!e.showInExport},t.createElement(c,{element:e,type:e.startHead})),t.createElement(a,{x:w.x,y:w.y,rotation:e.rotation+180},t.createElement(c,{element:e,type:e.endHead})),f&&e.resizable&&t.createElement(s,{selector:".page-abs-container",enabled:!0},t.createElement(a,{visible:f},t.createElement(i,Object.assign({x:u.x,y:u.y,ref:m,name:"line-anchor"},g(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(i,Object.assign({x:w.x,y:w.y,ref:x,name:"line-anchor"},g(n.scale,n),{onDragMove:t=>{const a=getLinePositionFromMiddlePoints(u,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 a,Line as o,Rect as i,Circle as n}from"react-konva";import{useColor as r}from"./use-color.js";import{Portal as s}from"react-konva-utils";import{useAnchorSnap as h}from"./use-transformer-snap.js";import{isTouchDevice as l}from"../utils/screen.js";export function getMiddlePoints(t){const{x:e,y:a,width:o,height:i,rotation:n}=t.a,r=n*Math.PI/180,s={x:e+i/2*Math.cos(r+Math.PI/2),y:a+i/2*Math.sin(r+Math.PI/2)};return{middleLeft:s,middleRight:{x:s.x+o*Math.cos(r),y:s.y+o*Math.sin(r)}}}export function getLinePositionFromMiddlePoints(t,e,a){const o=Math.sqrt(Math.pow(e.x-t.x,2)+Math.pow(e.y-t.y,2)),i=Math.atan2(e.y-t.y,e.x-t.x),n=180*i/Math.PI;return{x:t.x+Math.cos(i-Math.PI/2)*a/2,y:t.y+Math.sin(i-Math.PI/2)*a/2,width:o,height:a,rotation:n}}const g=(t,e)=>({offsetX:5/t,offsetY:5/t,width:10/t,height:10/t,fill:"white",stroke:"rgb(0, 161, 255)",strokeWidth: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()}}),c=e(({element:e,type:a})=>{const i=r(e,e.a.color,"fill"),s=r(e,e.a.color,"stroke"),h=Object.assign(Object.assign(Object.assign({strokeWidth:e.height,lineCap:"round",lineJoin:"round"},s),i),{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 d=t.useRef(null),m=t.useRef(null),x=t.useRef(null),y=e.selectable||"admin"===n.role,p=l(),f=n.selectedElements.indexOf(e)>=0&&1===n.selectedElements.length,E=n.selectedShapes.indexOf(e)>=0&&e.selectable,{middleLeft:u,middleRight:w}=getMiddlePoints(e);h(m,[d],[f]),h(x,[d],[f]);const b=r(e,e.a.color,"stroke");return t.createElement(t.Fragment,null,t.createElement(o,Object.assign({ref:d,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:y,draggable:p?e.draggable&&E:e.draggable,preventDefault:!p||E,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:u.x,y:u.y,rotation:e.rotation,hideInExport:!e.showInExport},t.createElement(c,{element:e,type:e.startHead})),t.createElement(a,{x:w.x,y:w.y,rotation:e.rotation+180},t.createElement(c,{element:e,type:e.endHead})),f&&e.resizable&&t.createElement(s,{selector:".page-abs-container",enabled:!0},t.createElement(a,{visible:f},t.createElement(i,Object.assign({x:u.x,y:u.y,ref:m,name:"line-anchor"},g(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(i,Object.assign({x:w.x,y:w.y,ref:x,name:"line-anchor"},g(n.scale,n),{onDragMove:t=>{const a=getLinePositionFromMiddlePoints(u,t.target.position(),e.height);e.set({x:a.x,y:a.y,width:a.width,rotation:a.rotation})}})))))});

package/canvas/page-controls.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { StoreType } from '../model/store';
-import { PageType } from '../model/page-model';
+import { StoreType } from '../model/store.js';
+import { PageType } from '../model/page-model.js';
 export declare const PageControls: (({ store, page, xPadding, yPadding, }: {
     store: StoreType;
     page: PageType;

package/canvas/page-controls.js

@@ -1 +1 @@
-import e from"react";import{observer as t}from"mobx-react-lite";import{Button as n,Tooltip as l}from"@blueprintjs/core";import{ChevronUp as a,ChevronDown as i,Duplicate as o,Trash as c,Insert as r}from"@blueprintjs/icons";import{t as m}from"../utils/l10n";export const PageControls=t(({store:t,page:d,xPadding:s,yPadding:p})=>{const g=t.pages.length>1,u=t.pages.indexOf(d);return e.createElement("div",{style:{position:"absolute",top:p-40+"px",right:s+"px"}},g&&e.createElement(l,{content:m("workspace.moveUp"),disabled:0===u},e.createElement(n,{icon:e.createElement(a,null),minimal:!0,disabled:0===u,onClick:()=>{d.setZIndex(u-1)}})),g&&e.createElement(l,{content:m("workspace.moveDown"),disabled:u===t.pages.length-1},e.createElement(n,{icon:e.createElement(i,null),minimal:!0,disabled:u===t.pages.length-1,onClick:()=>{const e=t.pages.indexOf(d);d.setZIndex(e+1)}})),e.createElement(l,{content:m("workspace.duplicatePage")},e.createElement(n,{icon:e.createElement(o,null),minimal:!0,onClick:()=>{d.clone()}})),g&&e.createElement(l,{content:m("workspace.removePage")},e.createElement(n,{icon:e.createElement(c,null),minimal:!0,onClick:()=>{t.deletePages([d.id])}})),e.createElement(l,{content:m("workspace.addPage")},e.createElement(n,{icon:e.createElement(r,null),minimal:!0,onClick:()=>{var e,n,l;const a=t.addPage({bleed:(null===(e=t.activePage)||void 0===e?void 0:e.bleed)||0,width:(null===(n=t.activePage)||void 0===n?void 0:n.width)||"auto",height:(null===(l=t.activePage)||void 0===l?void 0:l.height)||"auto"}),i=t.pages.indexOf(d);a.setZIndex(i+1)}})))});
+import e from"react";import{observer as t}from"mobx-react-lite";import{Button as n,Tooltip as l}from"@blueprintjs/core";import{ChevronUp as a,ChevronDown as i,Duplicate as o,Trash as c,Insert as r}from"@blueprintjs/icons";import{t as m}from"../utils/l10n.js";export const PageControls=t(({store:t,page:d,xPadding:s,yPadding:p})=>{const g=t.pages.length>1,u=t.pages.indexOf(d);return e.createElement("div",{style:{position:"absolute",top:p-40+"px",right:s+"px"}},g&&e.createElement(l,{content:m("workspace.moveUp"),disabled:0===u},e.createElement(n,{icon:e.createElement(a,null),minimal:!0,disabled:0===u,onClick:()=>{d.setZIndex(u-1)}})),g&&e.createElement(l,{content:m("workspace.moveDown"),disabled:u===t.pages.length-1},e.createElement(n,{icon:e.createElement(i,null),minimal:!0,disabled:u===t.pages.length-1,onClick:()=>{const e=t.pages.indexOf(d);d.setZIndex(e+1)}})),e.createElement(l,{content:m("workspace.duplicatePage")},e.createElement(n,{icon:e.createElement(o,null),minimal:!0,onClick:()=>{d.clone()}})),g&&e.createElement(l,{content:m("workspace.removePage")},e.createElement(n,{icon:e.createElement(c,null),minimal:!0,onClick:()=>{t.deletePages([d.id])}})),e.createElement(l,{content:m("workspace.addPage")},e.createElement(n,{icon:e.createElement(r,null),minimal:!0,onClick:()=>{var e,n,l;const a=t.addPage({bleed:(null===(e=t.activePage)||void 0===e?void 0:e.bleed)||0,width:(null===(n=t.activePage)||void 0===n?void 0:n.width)||"auto",height:(null===(l=t.activePage)||void 0===l?void 0:l.height)||"auto"}),i=t.pages.indexOf(d);a.setZIndex(i+1)}})))});

package/canvas/page.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 import { Vector2d } from 'konva/lib/types';
-import { StoreType } from '../model/store';
-import { PageType } from '../model/page-model';
-import { NodeType } from '../model/node-model';
+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 setTransformerStyle: (style: TransformerConfig) => void;
 export declare function registerTransformerAttrs(type: any, attrs: any): void;

package/canvas/page.js

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

package/canvas/rules.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { StoreType } from '../model/store';
+import { StoreType } from '../model/store.js';
 type PageProps = {
     store: StoreType;
     xPadding: number;

package/canvas/rules.js

@@ -1,4 +1,4 @@
-import e from"react";import{getTotalClientRect as t}from"../utils/math";import{unitToPx as o}from"../utils/unit";import{observer as r}from"mobx-react-lite";import{styled as i}from"../utils/goober";const l=i("div",e.forwardRef)`
+import e from"react";import{getTotalClientRect as t}from"../utils/math.js";import{unitToPx as o}from"../utils/unit.js";import{observer as r}from"mobx-react-lite";import{styled as i}from"../utils/goober.js";const l=i("div",e.forwardRef)`
   position: absolute;
   top: 0;
   left: 0;
@@ -24,11 +24,11 @@ import e from"react";import{getTotalClientRect as t}from"../utils/math";import{u
   border-right: 1px solid grey;
   background-color: #e8e8e8;
   overflow: hidden;
-`,d=i("div",e.forwardRef)`
+`,s=i("div",e.forwardRef)`
   position: absolute;
   border-left: 1px solid grey;
   padding-left: 2px;
-`,p=i("div",e.forwardRef)`
+`,d=i("div",e.forwardRef)`
   position: absolute;
   left: 14px;
   border-left: 1px solid grey;
@@ -36,4 +36,4 @@ import e from"react";import{getTotalClientRect as t}from"../utils/math";import{u
   transform: rotate(90deg);
   transform-origin: left top;
   overflow: hidden;
-`,s=[.1,.2,.5,1,2,5,10,20,25,50,100,200,500,1e3,2e3,5e3,1e4];export const TopRules=r(({store:r,width:i,height:c})=>{const u=e.useRef(null);if(!r.activePage){return null}const h=r.activePage,f=(r.bleedVisible&&h.bleed,h.computedWidth*r.scale),g=h.computedHeight*r.scale,m=(i-f)/2,x=(b=e=>o({unitVal:e,dpi:r.dpi,unit:r.unit})*r.scale,s.find(e=>b(e)>30)||1e4);var b;const y=o({unitVal:x,dpi:r.dpi,unit:r.unit})*r.scale,v=Math.round(f/y)+1,w=Math.round(g/y)+1,k=t(r.selectedShapes);return e.createElement(l,{ref:u,className:"polotno-rulers"},e.createElement(n,{style:{width:i+"px"},className:"polotno-x-ruler"},[...Array(v)].map((t,o)=>e.createElement(d,{key:o,style:{left:m+o*y+"px",width:y+"px"}},"px"===r.unit||x>=1?Math.round(x*o):(x*o).toFixed(1))),!!r.selectedShapes.length&&e.createElement("div",{style:{position:"absolute",left:m+k.x*r.scale+"px",height:"14px",width:k.width*r.scale,backgroundColor:"rgba(0,0,0,0.15)"}})),r.pages.map((t,o)=>{var i;const l=t.computedHeight*r.scale,n=(c-l)/2;return e.createElement(a,{key:t.id,style:{height:c+"px"},className:"polotno-y-ruler"},[...Array(w)].map((t,o)=>e.createElement(p,{key:o,style:{top:n+o*y-14+"px",width:y+"px"}},"px"===r.unit||x>=1?Math.round(x*o):(x*o).toFixed(1))),(null===(i=r.selectedShapes[0])||void 0===i?void 0:i.page)===t&&e.createElement("div",{style:{position:"absolute",top:n+k.y*r.scale-14+"px",width:"14px",height:k.height*r.scale,backgroundColor:"rgba(0,0,0,0.15)"}}))}))});export function LeftRules(){return e.createElement("div",null,e.createElement("h1",null,"Top rules"))}
+`,p=[.1,.2,.5,1,2,5,10,20,25,50,100,200,500,1e3,2e3,5e3,1e4];export const TopRules=r(({store:r,width:i,height:c})=>{const u=e.useRef(null);if(!r.activePage){return null}const h=r.activePage,f=(r.bleedVisible&&h.bleed,h.computedWidth*r.scale),g=h.computedHeight*r.scale,m=(i-f)/2,x=(b=e=>o({unitVal:e,dpi:r.dpi,unit:r.unit})*r.scale,p.find(e=>b(e)>30)||1e4);var b;const y=o({unitVal:x,dpi:r.dpi,unit:r.unit})*r.scale,v=Math.round(f/y)+1,w=Math.round(g/y)+1,k=t(r.selectedShapes);return e.createElement(l,{ref:u,className:"polotno-rulers"},e.createElement(n,{style:{width:i+"px"},className:"polotno-x-ruler"},[...Array(v)].map((t,o)=>e.createElement(s,{key:o,style:{left:m+o*y+"px",width:y+"px"}},"px"===r.unit||x>=1?Math.round(x*o):(x*o).toFixed(1))),!!r.selectedShapes.length&&e.createElement("div",{style:{position:"absolute",left:m+k.x*r.scale+"px",height:"14px",width:k.width*r.scale,backgroundColor:"rgba(0,0,0,0.15)"}})),r.pages.map((t,o)=>{var i;const l=t.computedHeight*r.scale,n=(c-l)/2;return e.createElement(a,{key:t.id,style:{height:c+"px"},className:"polotno-y-ruler"},[...Array(w)].map((t,o)=>e.createElement(d,{key:o,style:{top:n+o*y-14+"px",width:y+"px"}},"px"===r.unit||x>=1?Math.round(x*o):(x*o).toFixed(1))),(null===(i=r.selectedShapes[0])||void 0===i?void 0:i.page)===t&&e.createElement("div",{style:{position:"absolute",top:n+k.y*r.scale-14+"px",width:"14px",height:k.height*r.scale,backgroundColor:"rgba(0,0,0,0.15)"}}))}))});export function LeftRules(){return e.createElement("div",null,e.createElement("h1",null,"Top rules"))}

package/canvas/text-element/max-font-size.d.ts

@@ -1,4 +1,4 @@
-import { TextElementType } from '../../model/text-model';
+import { TextElementType } from '../../model/text-model.js';
 export declare function getLimitedFontSize({ oldText, newText, element, }: {
     oldText: string;
     newText: string;

package/canvas/text-element.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { StoreType } from '../model/store';
-import { TextElementType } from '../model/text-model';
+import { StoreType } from '../model/store.js';
+import { TextElementType } from '../model/text-model.js';
 type ShapeProps = {
     store: StoreType;
     element: TextElementType;