polotno 3.0.0-beta.37 → 3.0.0-beta.38

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

@@ -1,6 +1,5 @@
 import { StoreType } from '../../model/store.js';
 import { ShapeType } from '../../model/shape-model.js';
-import React from 'react';
 type ContextMenuProps = {
     store: StoreType;
     element: ShapeType;
@@ -11,7 +10,7 @@ type ContextMenuProps = {
     isOpen: boolean;
     setIsOpen: (b: boolean) => void;
 };
-export declare const ContextMenu: (({ store, isOpen, offset, setIsOpen }: ContextMenuProps) => React.JSX.Element | null) & {
+export declare const ContextMenu: (({ store, isOpen, offset, setIsOpen }: ContextMenuProps) => import("react/jsx-runtime").JSX.Element | null) & {
     displayName: string;
 };
 export {};

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 a}from"../../utils/l10n.js";import{useDuplicateElement as i}from"../../toolbar/use-duplicate-element.js";import{ChevronDown as s,ChevronUp as m,DoubleChevronDown as c,DoubleChevronUp as d,Duplicate as u,Layers as v,Lock as E,Trash as b,Unlock as C}from"@blueprintjs/icons";import{useRemoveElement as p}from"../../toolbar/use-remove-element.js";import{useCopyStyle as x}from"../../toolbar/use-copy-style.js";import{useLock as w}from"../../toolbar/use-lock.js";export const ContextMenu=e(({store:e,isOpen:k,offset:R,setIsOpen:g})=>{var y,f,h,P,M;const{disabled:j,duplicate:D}=i({store:e}),{disabled:B,remove:F}=p({store:e}),{setElementToCopy:O}=x(e),{disabled:T,lock:I,locked:U}=w({store:e}),A=U?r.createElement(E,null):r.createElement(C,null),L=e.selectedElementsIds;return 0===e.selectedElements.length?null:r.createElement(t,{isOpen:k,onClose:()=>{g(!1)},content:r.createElement(o,null,r.createElement(n,{shouldDismissPopover:!1,icon:A,text:a(U?"contextMenu.unlock":"contextMenu.lock"),onClick:I,disabled:T}),r.createElement(n,{icon:r.createElement(u,null),text:a("contextMenu.duplicate"),onClick:D,disabled:j}),r.createElement(n,{icon:r.createElement(b,null),text:a("contextMenu.remove"),onClick:F,disabled:B}),r.createElement(l,null),r.createElement(n,{icon:r.createElement(v,null),text:a("toolbar.layering")},r.createElement(n,{shouldDismissPopover:!1,icon:r.createElement(d,null),text:a("toolbar.toForward"),disabled:!(null===(y=e.activePage)||void 0===y?void 0:y.canMoveElementsTop(L)),onClick:()=>{var t;null===(t=e.activePage)||void 0===t||t.moveElementsTop(L)}}),r.createElement(n,{shouldDismissPopover:!1,icon:r.createElement(m,null),text:a("toolbar.up"),disabled:!(null===(f=e.activePage)||void 0===f?void 0:f.canMoveElementsUp(L)),onClick:()=>{var t;null===(t=e.activePage)||void 0===t||t.moveElementsUp(L)}}),r.createElement(n,{shouldDismissPopover:!1,icon:r.createElement(s,null),text:a("toolbar.down"),disabled:!(null===(h=e.activePage)||void 0===h?void 0:h.canMoveElementsDown(L)),onClick:()=>{var t;null===(t=e.activePage)||void 0===t||t.moveElementsDown(L)}}),r.createElement(n,{shouldDismissPopover:!1,icon:r.createElement(c,null),text:a("toolbar.toBottom"),disabled:!(null===(P=e.activePage)||void 0===P?void 0:P.canMoveElementsBottom(L)),onClick:()=>{var t;null===(t=e.activePage)||void 0===t||t.moveElementsBottom(L)}})),"table"===(null===(M=e.selectedElements[0])||void 0===M?void 0:M.type)&&(()=>{var t;const o=e.selectedElements[0],i=o.focusedCells[0],s=null!=i,m=null!==(t=o.getFocusedCellRange())&&void 0!==t?t:i?{minRow:i.row,maxRow:i.row,minCol:i.col,maxCol:i.col}:{minRow:0,maxRow:0,minCol:0,maxCol:0},{minRow:c,maxRow:d,minCol:u,maxCol:v}=m,E=d>c,b=v>u;return r.createElement(r.Fragment,null,s&&r.createElement(r.Fragment,null,r.createElement(l,null),r.createElement(n,{text:a("toolbar.insertRowAbove"),onClick:()=>{e.history.transaction(()=>{o.addRow(c)})}}),r.createElement(n,{text:a("toolbar.insertRowBelow"),onClick:()=>{e.history.transaction(()=>{o.addRow(d+1)})}}),r.createElement(n,{text:a(E?"toolbar.deleteRows":"toolbar.deleteRow"),disabled:o.rows<=d-c+1,onClick:()=>{e.history.transaction(()=>{o.removeRowRange(c,d)})}}),r.createElement(l,null),r.createElement(n,{text:a("toolbar.insertColumnLeft"),onClick:()=>{e.history.transaction(()=>{o.addColumn(u)})}}),r.createElement(n,{text:a("toolbar.insertColumnRight"),onClick:()=>{e.history.transaction(()=>{o.addColumn(v+1)})}}),r.createElement(n,{text:a(b?"toolbar.deleteColumns":"toolbar.deleteColumn"),disabled:o.cols<=v-u+1,onClick:()=>{e.history.transaction(()=>{o.removeColumnRange(u,v)})}})),r.createElement(l,null),r.createElement(n,{text:a("toolbar.distributeRowsEvenly"),onClick:()=>{e.history.transaction(()=>{o.distributeRowsEvenly()})}}),r.createElement(n,{text:a("toolbar.distributeColumnsEvenly"),onClick:()=>{e.history.transaction(()=>{o.distributeColumnsEvenly()})}}))})()),targetOffset:{top:R.y,left:R.x}})});
+import{jsx as o,jsxs as e,Fragment as t}from"react/jsx-runtime";import{observer as l}from"mobx-react-lite";import{ContextMenuPopover as n,Menu as s,MenuDivider as i,MenuItem as r}from"@blueprintjs/core";import{t as a}from"../../utils/l10n.js";import{useDuplicateElement as d}from"../../toolbar/use-duplicate-element.js";import{ChevronDown as m,ChevronUp as c,DoubleChevronDown as u,DoubleChevronUp as b,Duplicate as v,Layers as p,Lock as C,Trash as x,Unlock as E}from"@blueprintjs/icons";import{useRemoveElement as h}from"../../toolbar/use-remove-element.js";import{useCopyStyle as w}from"../../toolbar/use-copy-style.js";import{useLock as f}from"../../toolbar/use-lock.js";export const ContextMenu=l(({store:l,isOpen:k,offset:R,setIsOpen:y})=>{var j;const{disabled:g,duplicate:M}=d({store:l}),{disabled:D,remove:P}=h({store:l}),{setElementToCopy:B}=w(l),{disabled:O,lock:F,locked:T}=f({store:l}),U=o(T?C:E,{});return 0===l.selectedElements.length?null:o(n,{isOpen:k,onClose:()=>{y(!1)},content:e(s,{children:[o(r,{shouldDismissPopover:!1,icon:U,text:a(T?"contextMenu.unlock":"contextMenu.lock"),onClick:F,disabled:O}),o(r,{icon:o(v,{}),text:a("contextMenu.duplicate"),onClick:M,disabled:g}),o(r,{icon:o(x,{}),text:a("contextMenu.remove"),onClick:P,disabled:D}),o(i,{}),e(r,{icon:o(p,{}),text:a("toolbar.layering"),children:[o(r,{shouldDismissPopover:!1,icon:o(b,{}),text:a("toolbar.toForward"),disabled:!l.selectedElements.some(o=>{var e;return null===(e=o.parent)||void 0===e?void 0:e.canMoveElementsTop([o.id])}),onClick:()=>l.selectedElements.forEach(o=>o.moveTop())}),o(r,{shouldDismissPopover:!1,icon:o(c,{}),text:a("toolbar.up"),disabled:!l.selectedElements.some(o=>{var e;return null===(e=o.parent)||void 0===e?void 0:e.canMoveElementsUp([o.id])}),onClick:()=>l.selectedElements.forEach(o=>o.moveUp())}),o(r,{shouldDismissPopover:!1,icon:o(m,{}),text:a("toolbar.down"),disabled:!l.selectedElements.some(o=>{var e;return null===(e=o.parent)||void 0===e?void 0:e.canMoveElementsDown([o.id])}),onClick:()=>l.selectedElements.forEach(o=>o.moveDown())}),o(r,{shouldDismissPopover:!1,icon:o(u,{}),text:a("toolbar.toBottom"),disabled:!l.selectedElements.some(o=>{var e;return null===(e=o.parent)||void 0===e?void 0:e.canMoveElementsBottom([o.id])}),onClick:()=>l.selectedElements.forEach(o=>o.moveBottom())})]}),"table"===(null===(j=l.selectedElements[0])||void 0===j?void 0:j.type)&&(()=>{var n;const s=l.selectedElements[0],d=s.focusedCells[0],m=null!=d,c=null!==(n=s.getFocusedCellRange())&&void 0!==n?n:d?{minRow:d.row,maxRow:d.row,minCol:d.col,maxCol:d.col}:{minRow:0,maxRow:0,minCol:0,maxCol:0},{minRow:u,maxRow:b,minCol:v,maxCol:p}=c,C=b>u,x=p>v;return e(t,{children:[m&&e(t,{children:[o(i,{}),o(r,{text:a("toolbar.insertRowAbove"),onClick:()=>{l.history.transaction(()=>{s.addRow(u)})}}),o(r,{text:a("toolbar.insertRowBelow"),onClick:()=>{l.history.transaction(()=>{s.addRow(b+1)})}}),o(r,{text:a(C?"toolbar.deleteRows":"toolbar.deleteRow"),disabled:s.rows<=b-u+1,onClick:()=>{l.history.transaction(()=>{s.removeRowRange(u,b)})}}),o(i,{}),o(r,{text:a("toolbar.insertColumnLeft"),onClick:()=>{l.history.transaction(()=>{s.addColumn(v)})}}),o(r,{text:a("toolbar.insertColumnRight"),onClick:()=>{l.history.transaction(()=>{s.addColumn(p+1)})}}),o(r,{text:a(x?"toolbar.deleteColumns":"toolbar.deleteColumn"),disabled:s.cols<=p-v+1,onClick:()=>{l.history.transaction(()=>{s.removeColumnRange(v,p)})}})]}),o(i,{}),o(r,{text:a("toolbar.distributeRowsEvenly"),onClick:()=>{l.history.transaction(()=>{s.distributeRowsEvenly()})}}),o(r,{text:a("toolbar.distributeColumnsEvenly"),onClick:()=>{l.history.transaction(()=>{s.distributeColumnsEvenly()})}})]})})()]}),targetOffset:{top:R.y,left:R.x}})});

package/canvas/drawing-layer.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import { StoreType } from '../model/store.js';
 import { PageType } from '../model/page-model.js';
 type DrawingLayerProps = {
@@ -11,7 +10,7 @@ type DrawingLayerProps = {
     yPadding: number;
     bleed: number;
 };
-export declare const DrawingLayer: (({ store, page, width, height, scale, xPadding, yPadding, bleed, }: DrawingLayerProps) => React.JSX.Element | null) & {
+export declare const DrawingLayer: (({ store, page, width, height, scale, xPadding, yPadding, bleed, }: DrawingLayerProps) => import("react/jsx-runtime").JSX.Element | null) & {
     displayName: string;
 };
 export {};

package/canvas/drawing-layer.js

@@ -1 +1 @@
-import e from"react";import{observer as t}from"mobx-react-lite";import{Group as r,Line as o,Rect as n}from"react-konva";import{pathToSVG as s}from"../utils/path-to-svg.js";export const DrawingLayer=t(({store:t,page:i,width:c,height:a,scale:l,xPadding:u,yPadding:h,bleed:d})=>{const[g,y]=e.useState(!1),[p,f]=e.useState([]),m=e.useRef(null),w="draw"===t.tool,{strokeWidth:v,stroke:x,opacity:k,brushType:$}=t.toolOptions,E=e.useCallback(e=>{if(!w){return}if(y(!0),e.cancelBubble=!0,!e.target.getStage()){return}const t=m.current.getRelativePointerPosition();t&&f([{x:t.x,y:t.y}])},[w,l,u,h,d]),b=e.useCallback(e=>{if(!w||!g){return}if(e.cancelBubble=!0,!e.target.getStage()){return}const t=m.current.getRelativePointerPosition();t&&f(e=>[...e,{x:t.x,y:t.y}])},[w,g,l,u,h,d]),S=e.useCallback(()=>{if(w&&g){if(y(!1),p.length>=1){try{const e=s(p,{stroke:x,strokeWidth:v,smooth:!0}),r=t.selectedElementsIds.slice();t.history.transaction(()=>{i.addElement({type:"svg",x:e.x,y:e.y,width:e.width,height:e.height,src:e.src,opacity:k},{skipSelect:!0})}),t.selectElements(r)}catch(e){console.error("Error creating path SVG:",e)}}f([])}},[w,g,p,x,v,k,i,t.history,t]);e.useEffect(()=>{if(!g){return}const e=()=>S();return window.addEventListener("mouseup",e),window.addEventListener("touchend",e),()=>{window.removeEventListener("mouseup",e),window.removeEventListener("touchend",e)}},[g,S]);const M=e.useMemo(()=>p.flatMap(e=>[e.x,e.y]),[p]);return e.useEffect(()=>{if(w&&m.current){const e=m.current.getStage();if(!e){return}const t=v*l;if(t>100||t<4){e.container().style.cursor="crosshair"}else{const r=t/2,o=t/2,n=`data:image/svg+xml;base64,${btoa(`<svg xmlns="http://www.w3.org/2000/svg" width="${t}" height="${t}" viewBox="0 0 ${t} ${t}">\n          <circle cx="${o}" cy="${o}" r="${r-1}" fill="${x}" opacity="${k}" stroke="white" stroke-width="1"/>\n          <circle cx="${o}" cy="${o}" r="${r-1}" fill="none" stroke="black" stroke-width="1" opacity="0.3"/>\n        </svg>`)}`;e.container().style.cursor=`url("${n}") ${o} ${o}, crosshair`}return()=>{e.container()&&(e.container().style.cursor="")}}},[w,x,v,k,l]),w?e.createElement(r,{ref:m,listening:w,x:u+d*l,y:h+d*l,scaleX:l,scaleY:l},e.createElement(n,{x:-(u+d*l)/l,y:-(h+d*l)/l,width:c/l,height:a/l,fill:"transparent",onMouseDown:E,onMouseMove:b,onMouseUp:S,onTouchStart:E,onTouchMove:b,onTouchEnd:S}),p.length>0&&e.createElement(o,{points:M,stroke:x,strokeWidth:v,lineCap:"round",lineJoin:"round",opacity:k,tension:.5,listening:!1})):null});
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import r from"react";import{observer as o}from"mobx-react-lite";import{Group as n,Line as s,Rect as i}from"react-konva";import{pathToSVG as c}from"../utils/path-to-svg.js";export const DrawingLayer=o(({store:o,page:a,width:l,height:u,scale:h,xPadding:d,yPadding:g,bleed:p})=>{const[y,f]=r.useState(!1),[m,w]=r.useState([]),x=r.useRef(null),v="draw"===o.tool,{strokeWidth:k,stroke:$,opacity:b,brushType:E}=o.toolOptions,S=r.useCallback(e=>{if(!v){return}if(f(!0),e.cancelBubble=!0,!e.target.getStage()){return}const t=x.current.getRelativePointerPosition();t&&w([{x:t.x,y:t.y}])},[v,h,d,g,p]),M=r.useCallback(e=>{if(!v||!y){return}if(e.cancelBubble=!0,!e.target.getStage()){return}const t=x.current.getRelativePointerPosition();t&&w(e=>[...e,{x:t.x,y:t.y}])},[v,y,h,d,g,p]),P=r.useCallback(()=>{if(v&&y){if(f(!1),m.length>=1){try{const e=c(m,{stroke:$,strokeWidth:k,smooth:!0}),t=o.selectedElementsIds.slice();o.history.transaction(()=>{a.addElement({type:"svg",x:e.x,y:e.y,width:e.width,height:e.height,src:e.src,opacity:b},{skipSelect:!0})}),o.selectElements(t)}catch(e){console.error("Error creating path SVG:",e)}}w([])}},[v,y,m,$,k,b,a,o.history,o]);r.useEffect(()=>{if(!y){return}const e=()=>P();return window.addEventListener("mouseup",e),window.addEventListener("touchend",e),()=>{window.removeEventListener("mouseup",e),window.removeEventListener("touchend",e)}},[y,P]);const L=r.useMemo(()=>m.flatMap(e=>[e.x,e.y]),[m]);return r.useEffect(()=>{if(v&&x.current){const e=x.current.getStage();if(!e){return}const t=k*h;if(t>100||t<4){e.container().style.cursor="crosshair"}else{const r=t/2,o=t/2,n=`data:image/svg+xml;base64,${btoa(`<svg xmlns="http://www.w3.org/2000/svg" width="${t}" height="${t}" viewBox="0 0 ${t} ${t}">\n          <circle cx="${o}" cy="${o}" r="${r-1}" fill="${$}" opacity="${b}" stroke="white" stroke-width="1"/>\n          <circle cx="${o}" cy="${o}" r="${r-1}" fill="none" stroke="black" stroke-width="1" opacity="0.3"/>\n        </svg>`)}`;e.container().style.cursor=`url("${n}") ${o} ${o}, crosshair`}return()=>{e.container()&&(e.container().style.cursor="")}}},[v,$,k,b,h]),v?t(n,{ref:x,listening:v,x:d+p*h,y:g+p*h,scaleX:h,scaleY:h,children:[e(i,{x:-(d+p*h)/h,y:-(g+p*h)/h,width:l/h,height:u/h,fill:"transparent",onMouseDown:S,onMouseMove:M,onMouseUp:P,onTouchStart:S,onTouchMove:M,onTouchEnd:P}),m.length>0&&e(s,{points:L,stroke:$,strokeWidth:k,lineCap:"round",lineJoin:"round",opacity:b,tension:.5,listening:!1})]}):null});

package/canvas/element.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import { StoreType } from '../model/store.js';
 import { ShapeType } from '../model/shape-model.js';
 type ShapeProps = {
@@ -7,7 +6,7 @@ type ShapeProps = {
     onClick: Function;
 };
 export declare function registerShapeComponent(type: string, component: JSX.Element): void;
-declare const Element: ((props: ShapeProps) => React.JSX.Element | null) & {
+declare const Element: ((props: ShapeProps) => import("react/jsx-runtime").JSX.Element | null) & {
     displayName: string;
 };
 export default Element;

package/canvas/element.js

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

package/canvas/figure-element.d.ts

@@ -1,11 +1,10 @@
-import React from 'react';
 import { StoreType } from '../model/store.js';
 import { FigureElementType } from '../model/figure-model.js';
 type FigureProps = {
     store: StoreType;
     element: FigureElementType;
 };
-export declare const FigureElement: (({ element, store }: FigureProps) => React.JSX.Element) & {
+export declare const FigureElement: (({ element, store }: FigureProps) => import("react/jsx-runtime").JSX.Element) & {
     displayName: string;
 };
 export {};

package/canvas/figure-element.js

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

package/canvas/gif-element.d.ts

@@ -1,11 +1,10 @@
-import React from 'react';
 import { StoreType } from '../model/store.js';
 import { VideoElementType } from '../model/video-model.js';
 type Props = {
     store: StoreType;
     element: VideoElementType;
 };
-export declare const GifElement: (({ element, store }: Props) => React.JSX.Element) & {
+export declare const GifElement: (({ element, store }: Props) => import("react/jsx-runtime").JSX.Element) & {
     displayName: string;
 };
 export {};

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

package/canvas/highlighter.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 type SimplifiedElement = {
     a: {
         x: number;
@@ -10,7 +9,7 @@ type SimplifiedElement = {
 };
 export declare const Highlighter: (({ element }: {
     element: SimplifiedElement;
-}) => React.JSX.Element) & {
+}) => import("react/jsx-runtime").JSX.Element) & {
     displayName: string;
 };
 export {};

package/canvas/highlighter.js

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

package/canvas/hotkeys.js

@@ -1 +1 @@
-import{ROLES as e}from"../model/store.js";import{copy as t,cut as o,paste as l}from"../utils/clipboard.js";import{duplicateElements as n}from"../utils/duplicate.js";import{alignBottom as r,alignCenter as i,alignLeft as c,alignMiddle as a,alignRight as s,alignTop as d}from"../utils/alignment.js";import{removeTags as u}from"../utils/text.js";const f="rgba(191, 191, 191, 100)";function v(e,t,o){const l=e.getCell(t,o);l&&e.focusCell(l.id)}function y(e,t,o){const l=e.getCell(t,o);l&&e.enterCellEdit(l.id)}export function handleHotkey(p,m){var h,w,g,D,E,K,k,C,x,R,A,b,S,P,T,L,I,M;if(m.role===e.VIEWER){return}const j=function(e){if(1!==e.selectedElements.length){return null}const t=e.selectedElements[0];return"table"!==t.type?null:t}(m);if(j&&function(e,t,o){const l=t._focusedCellIds.length>0,n=!!t._editingCellId;if(!l&&!n){return!1}if(n){if("Escape"===e.key){return e.preventDefault(),t.exitCellEdit(),!0}if("Tab"===e.key){e.preventDefault();const o=t.editingCell;if(t.exitCellEdit(),o){if(e.shiftKey){let e=o.col-1,l=o.row;e<0&&(l-=1,e=t.cols-1),l<0&&(l=t.rows-1,e=t.cols-1),y(t,l,e)}else{let e=o.col+1,l=o.row;e>=t.cols&&(l+=1,e=0),l>=t.rows&&(l=0,e=0),y(t,l,e)}}return!0}if(e.metaKey||e.ctrlKey){const o=t.editingCell;if(o){if("b"===e.key){return e.preventDefault(),o.set({fontWeight:"bold"===o.fontWeight?"normal":"bold"}),!0}if("i"===e.key){return e.preventDefault(),o.set({fontStyle:"italic"===o.fontStyle?"normal":"italic"}),!0}if("u"===e.key){e.preventDefault();const t=o.textDecoration.split(" ").filter(Boolean),l=t.includes("underline");return o.set({textDecoration:l?t.filter(e=>"underline"!==e).join(" "):[...t,"underline"].join(" ")}),!0}}}return!0}if("Escape"===e.key){return e.preventDefault(),t.clearCellFocus(),!0}const r=t.focusedCells[0];if(!r){return!1}const i=r.row,c=r.col;if("Enter"===e.key){return e.preventDefault(),t.enterCellEdit(r.id),!0}if("Tab"===e.key){if(e.preventDefault(),e.shiftKey){let e=c-1,o=i;e<0&&(o-=1,e=t.cols-1),o<0&&(o=t.rows-1,e=t.cols-1),v(t,o,e)}else{let e=c+1,o=i;e>=t.cols&&(o+=1,e=0),o>=t.rows&&(o=0,e=0),v(t,o,e)}return!0}if("ArrowRight"===e.key||"ArrowLeft"===e.key||"ArrowDown"===e.key||"ArrowUp"===e.key){if(e.preventDefault(),e.shiftKey){const o=function(e){const t=e.cells.find(t=>t.id===e._anchorCellId);if(!t){return null}const o=e.focusedCells;if(o.length<=1){return{row:t.row,col:t.col}}let l=1/0,n=-1,r=1/0,i=-1;for(const c of o){c.row<l&&(l=c.row),c.row>n&&(n=c.row),c.col<r&&(r=c.col),c.col>i&&(i=c.col)}return{row:t.row===l?n:l,col:t.col===r?i:r}}(t)||{row:i,col:c};let l=o.row,n=o.col;"ArrowRight"===e.key&&(n=Math.min(o.col+1,t.cols-1)),"ArrowLeft"===e.key&&(n=Math.max(o.col-1,0)),"ArrowDown"===e.key&&(l=Math.min(o.row+1,t.rows-1)),"ArrowUp"===e.key&&(l=Math.max(o.row-1,0)),t.focusCellRange(l,n)}else{"ArrowRight"===e.key&&v(t,i,Math.min(c+1,t.cols-1)),"ArrowLeft"===e.key&&v(t,i,Math.max(c-1,0)),"ArrowDown"===e.key&&v(t,Math.min(i+1,t.rows-1),c),"ArrowUp"===e.key&&v(t,Math.max(i-1,0),c)}return!0}const a=e.ctrlKey||e.metaKey;if(!(a||e.shiftKey||e.altKey||"Delete"!==e.key&&"Backspace"!==e.key)){return e.preventDefault(),t.focusedCells.forEach(e=>{e.set({text:""})}),!0}if(a&&e.shiftKey&&!e.altKey&&"Equal"===e.code){e.preventDefault();const l=t.getFocusedCellRange(),n=l?l.maxRow+1:i+1;return o.history.transaction(()=>{t.addRow(n)}),!0}if(a&&e.shiftKey&&e.altKey&&"Equal"===e.code){e.preventDefault();const l=t.getFocusedCellRange(),n=l?l.maxCol+1:c+1;return o.history.transaction(()=>{t.addColumn(n)}),!0}if(a&&!e.shiftKey&&"Backspace"===e.code){const l=t.getFocusedCellRange();if(l&&0===l.minCol&&l.maxCol===t.cols-1&&t.rows>1){return e.preventDefault(),o.history.transaction(()=>{t.removeRowRange(l.minRow,l.maxRow)}),!0}}if(a&&e.shiftKey&&"Backspace"===e.code){const l=t.getFocusedCellRange();if(l&&0===l.minRow&&l.maxRow===t.rows-1&&t.cols>1){return e.preventDefault(),o.history.transaction(()=>{t.removeColumnRange(l.minCol,l.maxCol)}),!0}}if(a&&"KeyC"===e.code){e.preventDefault();const o=t.focusedCells.map(e=>u(e.text));return navigator.clipboard.writeText(o.join("\n")),!0}return a&&"KeyV"===e.code?(e.preventDefault(),navigator.clipboard.readText().then(e=>{const o=t.focusedCells[0];o&&o.set({text:e})}),!0):!(!a||"KeyA"!==e.code||(e.preventDefault(),t.cells.forEach(e=>{t.focusCell(e.id,!0)}),0))}(p,j,m)){return}if("INPUT"===(null===(h=document.activeElement)||void 0===h?void 0:h.tagName)||"TEXTAREA"===(null===(w=document.activeElement)||void 0===w?void 0:w.tagName)||"true"===(null===(g=document.activeElement)||void 0===g?void 0:g.contentEditable)){return}const W=document.querySelector(".polotno-workspace-container"),B=document.activeElement===W||(null==W?void 0:W.contains(document.activeElement));if(!B){const e=window.getSelection();if(e&&e.toString().length>0){return}}if("Alt"===p.key){const e=W;return void((B||m.distanceGuidesVisible||e&&e.matches(":hover"))&&p.preventDefault())}const F=m.selectedElements.filter(e=>e.removable).map(e=>e.id);46!==p.keyCode&&8!==p.keyCode||m.deleteElements(F);const U=p.ctrlKey||p.metaKey,V=p.shiftKey,q=p.altKey;if("Escape"===p.key){return p.preventDefault(),void("draw"===m.tool?m.setTool("selection"):m.selectElements([]))}if(!U||V||"z"!==p.key.toLowerCase()&&"y"!==p.key.toLowerCase()||(p.preventDefault(),m.history.undo()),U&&V&&("z"===p.key.toLowerCase()||"y"===p.key.toLowerCase())&&(p.preventDefault(),m.history.redo()),U&&"KeyA"===p.code){p.preventDefault();const e=null===(D=m.activePage)||void 0===D?void 0:D.children.filter(e=>e.selectable),t=(null==e?void 0:e.map(e=>e.id))||[];m.selectElements(t)}if(U&&"KeyC"===p.code&&(p.preventDefault(),t(m)),U&&"KeyX"===p.code&&(p.preventDefault(),o(m)),U&&"KeyV"===p.code&&(p.preventDefault(),l(m)),"ArrowDown"===p.code){p.preventDefault();const e=p.shiftKey?10:1;m.selectedShapes.forEach(t=>{t.draggable&&t.set({y:t.y+e})})}if("ArrowUp"===p.code){p.preventDefault();const e=p.shiftKey?10:1;m.selectedShapes.forEach(t=>{t.draggable&&t.set({y:t.y-e})})}if("ArrowLeft"===p.code){p.preventDefault();const e=p.shiftKey?10:1;m.selectedShapes.forEach(t=>{t.draggable&&t.set({x:t.x-e})})}if("ArrowRight"===p.code){p.preventDefault();const e=p.shiftKey?10:1;m.selectedShapes.forEach(t=>{t.draggable&&t.set({x:t.x+e})})}if(U&&"KeyG"===p.code){p.preventDefault();const e=m.selectedElements[0];if(e&&"group"===e.type){const t=e;m.ungroupElements([t.id])}else{m.groupElements(m.selectedElements.map(e=>e.id))}}if(U&&"KeyD"===p.code&&(p.preventDefault(),n(m.selectedElements,m)),"KeyT"===p.code&&!U){p.preventDefault();const e=30,t=m.width/2,o=m.width/2-t/2,l=m.height/2-e/2,n=2160,r=(m.width+m.height)/n;null===(E=m.activePage)||void 0===E||E.addElement({type:"text",x:o,y:l,width:t,fontSize:e*r,text:"Sample Text",fontFamily:"Roboto"})}if("KeyR"===p.code&&!U){p.preventDefault();const e={type:"figure",x:m.width/4,y:m.height/4,width:300,height:300,fill:f,stroke:"#0c0c0c",strokeWidth:0,subType:"rect"};null===(K=m.activePage)||void 0===K||K.addElement(e)}if("KeyL"===p.code&&!U){p.preventDefault();const e=(null!==(C=null===(k=m.activePage)||void 0===k?void 0:k.computedWidth)&&void 0!==C?C:0)/3,t={type:"line",x:(null!==(R=null===(x=m.activePage)||void 0===x?void 0:x.computedWidth)&&void 0!==R?R:0)/2-e/2,y:(null!==(b=null===(A=m.activePage)||void 0===A?void 0:A.computedHeight)&&void 0!==b?b:0)/2,width:e,color:f};null===(S=m.activePage)||void 0===S||S.addElement(t)}if("KeyO"===p.code&&!U){p.preventDefault(),p.preventDefault();const e={type:"figure",x:m.width/4,y:m.height/4,width:300,height:300,fill:f,stroke:"#0c0c0c",strokeWidth:0,subType:"circle"};null===(P=m.activePage)||void 0===P||P.addElement(e)}U&&"Equal"===p.code&&(p.preventDefault(),m.setScale(m.scale+.1)),U&&"Minus"===p.code&&(p.preventDefault(),m.setScale(m.scale-.1)),q&&("KeyA"===p.code&&(p.preventDefault(),c(m)),"KeyD"===p.code&&(p.preventDefault(),s(m)),"KeyS"===p.code&&(p.preventDefault(),r(m)),"KeyW"===p.code&&(p.preventDefault(),d(m)),"KeyV"===p.code&&(p.preventDefault(),a(m)),"KeyH"===p.code&&(p.preventDefault(),i(m))),"BracketRight"===p.code&&(p.preventDefault(),U?null===(T=m.activePage)||void 0===T||T.moveElementsUp(m.selectedElementsIds):null===(L=m.activePage)||void 0===L||L.moveElementsTop(m.selectedElementsIds)),"BracketLeft"===p.code&&(p.preventDefault(),U?null===(I=m.activePage)||void 0===I||I.moveElementsDown(m.selectedElementsIds):null===(M=m.activePage)||void 0===M||M.moveElementsBottom(m.selectedElementsIds))}
+import{ROLES as e}from"../model/store.js";import{copy as t,cut as o,paste as l}from"../utils/clipboard.js";import{duplicateElements as r}from"../utils/duplicate.js";import{alignBottom as n,alignCenter as i,alignLeft as c,alignMiddle as a,alignRight as s,alignTop as f}from"../utils/alignment.js";import{removeTags as d}from"../utils/text.js";const u="rgba(191, 191, 191, 100)";function y(e,t,o){const l=e.getCell(t,o);l&&e.focusCell(l.id)}function p(e,t,o){const l=e.getCell(t,o);l&&e.enterCellEdit(l.id)}export function handleHotkey(v,h){var m,w,g,D,E,K,k,C,x,R,A;if(h.role===e.VIEWER){return}const b=document.activeElement,S=document.querySelector(".polotno-workspace-container"),T="INPUT"===(null==b?void 0:b.tagName)||"TEXTAREA"===(null==b?void 0:b.tagName)||!!(null==b?void 0:b.isContentEditable),L=!(!b||!(null==S?void 0:S.contains(b))),M=T&&!L,P=function(e){if(1!==e.selectedElements.length){return null}const t=e.selectedElements[0];return"table"!==t.type?null:t}(h);if(!M&&P&&function(e,t,o){const l=t._focusedCellIds.length>0,r=!!t._editingCellId;if(!l&&!r){return!1}if(r){if("Escape"===e.key){return e.preventDefault(),t.exitCellEdit(),!0}if("Tab"===e.key){e.preventDefault();const o=t.editingCell;if(t.exitCellEdit(),o){if(e.shiftKey){let e=o.col-1,l=o.row;e<0&&(l-=1,e=t.cols-1),l<0&&(l=t.rows-1,e=t.cols-1),p(t,l,e)}else{let e=o.col+1,l=o.row;e>=t.cols&&(l+=1,e=0),l>=t.rows&&(l=0,e=0),p(t,l,e)}}return!0}if(e.metaKey||e.ctrlKey){const o=t.editingCell;if(o){if("b"===e.key){return e.preventDefault(),o.set({fontWeight:"bold"===o.fontWeight?"normal":"bold"}),!0}if("i"===e.key){return e.preventDefault(),o.set({fontStyle:"italic"===o.fontStyle?"normal":"italic"}),!0}if("u"===e.key){e.preventDefault();const t=o.textDecoration.split(" ").filter(Boolean),l=t.includes("underline");return o.set({textDecoration:l?t.filter(e=>"underline"!==e).join(" "):[...t,"underline"].join(" ")}),!0}}}return!0}if("Escape"===e.key){return e.preventDefault(),t.clearCellFocus(),!0}const n=t.focusedCells[0];if(!n){return!1}const i=n.row,c=n.col;if("Enter"===e.key){return e.preventDefault(),t.enterCellEdit(n.id),!0}if("Tab"===e.key){if(e.preventDefault(),e.shiftKey){let e=c-1,o=i;e<0&&(o-=1,e=t.cols-1),o<0&&(o=t.rows-1,e=t.cols-1),y(t,o,e)}else{let e=c+1,o=i;e>=t.cols&&(o+=1,e=0),o>=t.rows&&(o=0,e=0),y(t,o,e)}return!0}if("ArrowRight"===e.key||"ArrowLeft"===e.key||"ArrowDown"===e.key||"ArrowUp"===e.key){if(e.preventDefault(),e.shiftKey){const o=function(e){const t=e.cells.find(t=>t.id===e._anchorCellId);if(!t){return null}const o=e.focusedCells;if(o.length<=1){return{row:t.row,col:t.col}}let l=1/0,r=-1,n=1/0,i=-1;for(const c of o){c.row<l&&(l=c.row),c.row>r&&(r=c.row),c.col<n&&(n=c.col),c.col>i&&(i=c.col)}return{row:t.row===l?r:l,col:t.col===n?i:n}}(t)||{row:i,col:c};let l=o.row,r=o.col;"ArrowRight"===e.key&&(r=Math.min(o.col+1,t.cols-1)),"ArrowLeft"===e.key&&(r=Math.max(o.col-1,0)),"ArrowDown"===e.key&&(l=Math.min(o.row+1,t.rows-1)),"ArrowUp"===e.key&&(l=Math.max(o.row-1,0)),t.focusCellRange(l,r)}else{"ArrowRight"===e.key&&y(t,i,Math.min(c+1,t.cols-1)),"ArrowLeft"===e.key&&y(t,i,Math.max(c-1,0)),"ArrowDown"===e.key&&y(t,Math.min(i+1,t.rows-1),c),"ArrowUp"===e.key&&y(t,Math.max(i-1,0),c)}return!0}const a=e.ctrlKey||e.metaKey;if(!(a||e.shiftKey||e.altKey||"Delete"!==e.key&&"Backspace"!==e.key)){return e.preventDefault(),t.focusedCells.forEach(e=>{e.set({text:""})}),!0}if(a&&e.shiftKey&&!e.altKey&&"Equal"===e.code){e.preventDefault();const l=t.getFocusedCellRange(),r=l?l.maxRow+1:i+1;return o.history.transaction(()=>{t.addRow(r)}),!0}if(a&&e.shiftKey&&e.altKey&&"Equal"===e.code){e.preventDefault();const l=t.getFocusedCellRange(),r=l?l.maxCol+1:c+1;return o.history.transaction(()=>{t.addColumn(r)}),!0}if(a&&!e.shiftKey&&"Backspace"===e.code){const l=t.getFocusedCellRange();if(l&&0===l.minCol&&l.maxCol===t.cols-1&&t.rows>1){return e.preventDefault(),o.history.transaction(()=>{t.removeRowRange(l.minRow,l.maxRow)}),!0}}if(a&&e.shiftKey&&"Backspace"===e.code){const l=t.getFocusedCellRange();if(l&&0===l.minRow&&l.maxRow===t.rows-1&&t.cols>1){return e.preventDefault(),o.history.transaction(()=>{t.removeColumnRange(l.minCol,l.maxCol)}),!0}}if(a&&"KeyC"===e.code){e.preventDefault();const o=t.focusedCells.map(e=>d(e.text));return navigator.clipboard.writeText(o.join("\n")),!0}return a&&"KeyV"===e.code?(e.preventDefault(),navigator.clipboard.readText().then(e=>{const o=t.focusedCells[0];o&&o.set({text:e})}),!0):!(!a||"KeyA"!==e.code||(e.preventDefault(),t.cells.forEach(e=>{t.focusCell(e.id,!0)}),0))}(v,P,h)){return}if(T){return}const j=document.activeElement===S||L;if(!j){const e=window.getSelection();if(e&&e.toString().length>0){return}}if("Alt"===v.key){const e=S;return void((j||h.distanceGuidesVisible||e&&e.matches(":hover"))&&v.preventDefault())}const W=h.selectedElements.filter(e=>e.removable).map(e=>e.id);46!==v.keyCode&&8!==v.keyCode||h.deleteElements(W);const B=v.ctrlKey||v.metaKey,F=v.shiftKey,U=v.altKey;if("Escape"===v.key){return v.preventDefault(),void("draw"===h.tool?h.setTool("selection"):h.selectElements([]))}if(!B||F||"z"!==v.key.toLowerCase()&&"y"!==v.key.toLowerCase()||(v.preventDefault(),h.history.undo()),B&&F&&("z"===v.key.toLowerCase()||"y"===v.key.toLowerCase())&&(v.preventDefault(),h.history.redo()),B&&"KeyA"===v.code){v.preventDefault();const e=null===(m=h.activePage)||void 0===m?void 0:m.children.filter(e=>e.selectable),t=(null==e?void 0:e.map(e=>e.id))||[];h.selectElements(t)}if(B&&"KeyC"===v.code&&(v.preventDefault(),t(h)),B&&"KeyX"===v.code&&(v.preventDefault(),o(h)),B&&"KeyV"===v.code&&(v.preventDefault(),l(h)),"ArrowDown"===v.code){v.preventDefault();const e=v.shiftKey?10:1;h.selectedShapes.forEach(t=>{t.draggable&&t.set({y:t.y+e})})}if("ArrowUp"===v.code){v.preventDefault();const e=v.shiftKey?10:1;h.selectedShapes.forEach(t=>{t.draggable&&t.set({y:t.y-e})})}if("ArrowLeft"===v.code){v.preventDefault();const e=v.shiftKey?10:1;h.selectedShapes.forEach(t=>{t.draggable&&t.set({x:t.x-e})})}if("ArrowRight"===v.code){v.preventDefault();const e=v.shiftKey?10:1;h.selectedShapes.forEach(t=>{t.draggable&&t.set({x:t.x+e})})}if(B&&"KeyG"===v.code){v.preventDefault();const e=h.selectedElements[0];if(e&&"group"===e.type){const t=e;h.ungroupElements([t.id])}else{h.groupElements(h.selectedElements.map(e=>e.id))}}if(B&&"KeyD"===v.code&&(v.preventDefault(),r(h.selectedElements,h)),"KeyT"===v.code&&!B){v.preventDefault();const e=30,t=h.width/2,o=h.width/2-t/2,l=h.height/2-e/2,r=2160,n=(h.width+h.height)/r;null===(w=h.activePage)||void 0===w||w.addElement({type:"text",x:o,y:l,width:t,fontSize:e*n,text:"Sample Text",fontFamily:"Roboto"})}if("KeyR"===v.code&&!B){v.preventDefault();const e={type:"figure",x:h.width/4,y:h.height/4,width:300,height:300,fill:u,stroke:"#0c0c0c",strokeWidth:0,subType:"rect"};null===(g=h.activePage)||void 0===g||g.addElement(e)}if("KeyL"===v.code&&!B){v.preventDefault();const e=(null!==(E=null===(D=h.activePage)||void 0===D?void 0:D.computedWidth)&&void 0!==E?E:0)/3,t={type:"line",x:(null!==(k=null===(K=h.activePage)||void 0===K?void 0:K.computedWidth)&&void 0!==k?k:0)/2-e/2,y:(null!==(x=null===(C=h.activePage)||void 0===C?void 0:C.computedHeight)&&void 0!==x?x:0)/2,width:e,color:u};null===(R=h.activePage)||void 0===R||R.addElement(t)}if("KeyO"===v.code&&!B){v.preventDefault(),v.preventDefault();const e={type:"figure",x:h.width/4,y:h.height/4,width:300,height:300,fill:u,stroke:"#0c0c0c",strokeWidth:0,subType:"circle"};null===(A=h.activePage)||void 0===A||A.addElement(e)}B&&"Equal"===v.code&&(v.preventDefault(),h.setScale(h.scale+.1)),B&&"Minus"===v.code&&(v.preventDefault(),h.setScale(h.scale-.1)),U&&("KeyA"===v.code&&(v.preventDefault(),c(h)),"KeyD"===v.code&&(v.preventDefault(),s(h)),"KeyS"===v.code&&(v.preventDefault(),n(h)),"KeyW"===v.code&&(v.preventDefault(),f(h)),"KeyV"===v.code&&(v.preventDefault(),a(h)),"KeyH"===v.code&&(v.preventDefault(),i(h))),"BracketRight"===v.code&&(v.preventDefault(),h.selectedElements.forEach(e=>B?e.moveUp():e.moveTop())),"BracketLeft"===v.code&&(v.preventDefault(),h.selectedElements.forEach(e=>B?e.moveDown():e.moveBottom()))}

package/canvas/html-element.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import Quill from 'quill';
 import { StoreType } from '../model/store.js';
 import { TextElementType } from '../model/text-model.js';
@@ -17,7 +16,7 @@ type ShapeProps = {
 export declare const setQuillFormats: (formats: string[]) => void;
 export declare const createQuill: (node: any) => Quill;
 export declare const setQuillContent: (quill: any, html: any) => void;
-export declare const HTMLElement: (({ element, store }: ShapeProps) => React.JSX.Element) & {
+export declare const HTMLElement: (({ element, store }: ShapeProps) => import("react/jsx-runtime").JSX.Element) & {
     displayName: string;
 };
 export declare function setCursorFromCoords(quill: any, coords: {

package/canvas/html-element.js

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

package/canvas/image-element.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import { StoreType } from '../model/store.js';
 import { ImageElementType } from '../model/image-model.js';
 export declare const useSizeFixer: (src: string) => string;
@@ -18,7 +17,7 @@ type ImageProps = {
 };
 export declare const setImageLoaderHook: (customImageLoaderHook: any) => void;
 export declare const useImageLoader: (status: string, src?: string, id?: string) => void;
-export declare const ImageElement: (({ element, store }: ImageProps) => React.JSX.Element) & {
+export declare const ImageElement: (({ element, store }: ImageProps) => import("react/jsx-runtime").JSX.Element) & {
     displayName: string;
 };
 export {};

package/canvas/image-element.js

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

package/canvas/line-element.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import { StoreType } from '../model/store.js';
 import { LineElementType } from '../model/line-model.js';
 type LineProps = {
@@ -22,7 +21,7 @@ export declare function getLinePositionFromMiddlePoints(middleLeft: any, middleR
     height: any;
     rotation: number;
 };
-export declare const LineElement: (({ element, store }: LineProps) => React.JSX.Element) & {
+export declare const LineElement: (({ element, store }: LineProps) => import("react/jsx-runtime").JSX.Element) & {
     displayName: string;
 };
 export {};

package/canvas/line-element.js

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