polotno 4.1.0 → 4.1.2

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 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()))}
+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()){return v.preventDefault(),void h.history.undo()}if(B&&(F&&"z"===v.key.toLowerCase()||"y"===v.key.toLowerCase())){return v.preventDefault(),void h.history.redo()}if(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/page.js

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

package/model/group-model.d.ts

@@ -388,6 +388,7 @@ export declare const TYPES_MAP: {
         set(attrs: any): void;
         afterCreate(): void;
         toggleEditMode(editing?: boolean): void;
+        beforeDestroy(): void;
     }, any, import("mobx-state-tree").ModelSnapshotType<{
         id: import("mobx-state-tree").ISimpleType<string>;
         type: import("mobx-state-tree").IType<string | undefined, string, string>;
@@ -1455,6 +1456,7 @@ export declare const TYPES_MAP: {
             set(attrs: any): void;
             setBorder(side: import("./table-model.js").BorderSideName, attrs: import("./table-model.js").BorderAttrs): void;
             toggleEditMode(editing?: boolean): void;
+            beforeDestroy(): void;
         }, any, any>>;
         borderColor: import("mobx-state-tree").IType<string | undefined, string, string>;
         borderWidth: import("mobx-state-tree").IType<number | undefined, number, number>;

package/model/page-model.d.ts

@@ -331,6 +331,7 @@ export declare const Page: import("mobx-state-tree").IModelType<{
         set(attrs: any): void;
         afterCreate(): void;
         toggleEditMode(editing?: boolean): void;
+        beforeDestroy(): void;
     }, any, import("mobx-state-tree").ModelSnapshotType<{
         id: import("mobx-state-tree").ISimpleType<string>;
         type: import("mobx-state-tree").IType<string | undefined, string, string>;
@@ -1391,6 +1392,7 @@ export declare const Page: import("mobx-state-tree").IModelType<{
             set(attrs: any): void;
             setBorder(side: import("./table-model.js").BorderSideName, attrs: import("./table-model.js").BorderAttrs): void;
             toggleEditMode(editing?: boolean): void;
+            beforeDestroy(): void;
         }, any, any>>;
         borderColor: import("mobx-state-tree").IType<string | undefined, string, string>;
         borderWidth: import("mobx-state-tree").IType<number | undefined, number, number>;

package/model/store.d.ts

@@ -380,6 +380,7 @@ export declare const Store: import("mobx-state-tree").IModelType<{
             set(attrs: any): void;
             afterCreate(): void;
             toggleEditMode(editing?: boolean): void;
+            beforeDestroy(): void;
         }, any, import("mobx-state-tree").ModelSnapshotType<{
             id: import("mobx-state-tree").ISimpleType<string>;
             type: import("mobx-state-tree").IType<string | undefined, string, string>;
@@ -1440,6 +1441,7 @@ export declare const Store: import("mobx-state-tree").IModelType<{
                 set(attrs: any): void;
                 setBorder(side: import("./table-model.js").BorderSideName, attrs: import("./table-model.js").BorderAttrs): void;
                 toggleEditMode(editing?: boolean): void;
+                beforeDestroy(): void;
             }, any, any>>;
             borderColor: import("mobx-state-tree").IType<string | undefined, string, string>;
             borderWidth: import("mobx-state-tree").IType<number | undefined, number, number>;
@@ -2374,6 +2376,7 @@ export declare const Store: import("mobx-state-tree").IModelType<{
             set(attrs: any): void;
             afterCreate(): void;
             toggleEditMode(editing?: boolean): void;
+            beforeDestroy(): void;
         }, any, import("mobx-state-tree").ModelSnapshotType<{
             id: import("mobx-state-tree").ISimpleType<string>;
             type: import("mobx-state-tree").IType<string | undefined, string, string>;
@@ -3434,6 +3437,7 @@ export declare const Store: import("mobx-state-tree").IModelType<{
                 set(attrs: any): void;
                 setBorder(side: import("./table-model.js").BorderSideName, attrs: import("./table-model.js").BorderAttrs): void;
                 toggleEditMode(editing?: boolean): void;
+                beforeDestroy(): void;
             }, any, any>>;
             borderColor: import("mobx-state-tree").IType<string | undefined, string, string>;
             borderWidth: import("mobx-state-tree").IType<number | undefined, number, number>;
@@ -4280,6 +4284,7 @@ export declare const Store: import("mobx-state-tree").IModelType<{
             set(attrs: any): void;
             afterCreate(): void;
             toggleEditMode(editing?: boolean): void;
+            beforeDestroy(): void;
         }, any, import("mobx-state-tree").ModelSnapshotType<{
             id: import("mobx-state-tree").ISimpleType<string>;
             type: import("mobx-state-tree").IType<string | undefined, string, string>;
@@ -5340,6 +5345,7 @@ export declare const Store: import("mobx-state-tree").IModelType<{
                 set(attrs: any): void;
                 setBorder(side: import("./table-model.js").BorderSideName, attrs: import("./table-model.js").BorderAttrs): void;
                 toggleEditMode(editing?: boolean): void;
+                beforeDestroy(): void;
             }, any, any>>;
             borderColor: import("mobx-state-tree").IType<string | undefined, string, string>;
             borderWidth: import("mobx-state-tree").IType<number | undefined, number, number>;
@@ -6474,6 +6480,7 @@ export declare const Store: import("mobx-state-tree").IModelType<{
             set(attrs: any): void;
             afterCreate(): void;
             toggleEditMode(editing?: boolean): void;
+            beforeDestroy(): void;
         }, any, import("mobx-state-tree").ModelSnapshotType<{
             id: import("mobx-state-tree").ISimpleType<string>;
             type: import("mobx-state-tree").IType<string | undefined, string, string>;
@@ -7534,6 +7541,7 @@ export declare const Store: import("mobx-state-tree").IModelType<{
                 set(attrs: any): void;
                 setBorder(side: import("./table-model.js").BorderSideName, attrs: import("./table-model.js").BorderAttrs): void;
                 toggleEditMode(editing?: boolean): void;
+                beforeDestroy(): void;
             }, any, any>>;
             borderColor: import("mobx-state-tree").IType<string | undefined, string, string>;
             borderWidth: import("mobx-state-tree").IType<number | undefined, number, number>;
@@ -8380,6 +8388,7 @@ export declare const Store: import("mobx-state-tree").IModelType<{
             set(attrs: any): void;
             afterCreate(): void;
             toggleEditMode(editing?: boolean): void;
+            beforeDestroy(): void;
         }, any, import("mobx-state-tree").ModelSnapshotType<{
             id: import("mobx-state-tree").ISimpleType<string>;
             type: import("mobx-state-tree").IType<string | undefined, string, string>;
@@ -9440,6 +9449,7 @@ export declare const Store: import("mobx-state-tree").IModelType<{
                 set(attrs: any): void;
                 setBorder(side: import("./table-model.js").BorderSideName, attrs: import("./table-model.js").BorderAttrs): void;
                 toggleEditMode(editing?: boolean): void;
+                beforeDestroy(): void;
             }, any, any>>;
             borderColor: import("mobx-state-tree").IType<string | undefined, string, string>;
             borderWidth: import("mobx-state-tree").IType<number | undefined, number, number>;
@@ -10287,6 +10297,7 @@ export declare const Store: import("mobx-state-tree").IModelType<{
             set(attrs: any): void;
             afterCreate(): void;
             toggleEditMode(editing?: boolean): void;
+            beforeDestroy(): void;
         }, any, import("mobx-state-tree").ModelSnapshotType<{
             id: import("mobx-state-tree").ISimpleType<string>;
             type: import("mobx-state-tree").IType<string | undefined, string, string>;
@@ -11347,6 +11358,7 @@ export declare const Store: import("mobx-state-tree").IModelType<{
                 set(attrs: any): void;
                 setBorder(side: import("./table-model.js").BorderSideName, attrs: import("./table-model.js").BorderAttrs): void;
                 toggleEditMode(editing?: boolean): void;
+                beforeDestroy(): void;
             }, any, any>>;
             borderColor: import("mobx-state-tree").IType<string | undefined, string, string>;
             borderWidth: import("mobx-state-tree").IType<number | undefined, number, number>;
@@ -12193,6 +12205,7 @@ export declare const Store: import("mobx-state-tree").IModelType<{
             set(attrs: any): void;
             afterCreate(): void;
             toggleEditMode(editing?: boolean): void;
+            beforeDestroy(): void;
         }, any, import("mobx-state-tree").ModelSnapshotType<{
             id: import("mobx-state-tree").ISimpleType<string>;
             type: import("mobx-state-tree").IType<string | undefined, string, string>;
@@ -13253,6 +13266,7 @@ export declare const Store: import("mobx-state-tree").IModelType<{
                 set(attrs: any): void;
                 setBorder(side: import("./table-model.js").BorderSideName, attrs: import("./table-model.js").BorderAttrs): void;
                 toggleEditMode(editing?: boolean): void;
+                beforeDestroy(): void;
             }, any, any>>;
             borderColor: import("mobx-state-tree").IType<string | undefined, string, string>;
             borderWidth: import("mobx-state-tree").IType<number | undefined, number, number>;
@@ -14132,6 +14146,7 @@ export declare const Store: import("mobx-state-tree").IModelType<{
             set(attrs: any): void;
             afterCreate(): void;
             toggleEditMode(editing?: boolean): void;
+            beforeDestroy(): void;
         }, any, import("mobx-state-tree").ModelSnapshotType<{
             id: import("mobx-state-tree").ISimpleType<string>;
             type: import("mobx-state-tree").IType<string | undefined, string, string>;
@@ -15192,6 +15207,7 @@ export declare const Store: import("mobx-state-tree").IModelType<{
                 set(attrs: any): void;
                 setBorder(side: import("./table-model.js").BorderSideName, attrs: import("./table-model.js").BorderAttrs): void;
                 toggleEditMode(editing?: boolean): void;
+                beforeDestroy(): void;
             }, any, any>>;
             borderColor: import("mobx-state-tree").IType<string | undefined, string, string>;
             borderWidth: import("mobx-state-tree").IType<number | undefined, number, number>;
@@ -16038,6 +16054,7 @@ export declare const Store: import("mobx-state-tree").IModelType<{
             set(attrs: any): void;
             afterCreate(): void;
             toggleEditMode(editing?: boolean): void;
+            beforeDestroy(): void;
         }, any, import("mobx-state-tree").ModelSnapshotType<{
             id: import("mobx-state-tree").ISimpleType<string>;
             type: import("mobx-state-tree").IType<string | undefined, string, string>;
@@ -17098,6 +17115,7 @@ export declare const Store: import("mobx-state-tree").IModelType<{
                 set(attrs: any): void;
                 setBorder(side: import("./table-model.js").BorderSideName, attrs: import("./table-model.js").BorderAttrs): void;
                 toggleEditMode(editing?: boolean): void;
+                beforeDestroy(): void;
             }, any, any>>;
             borderColor: import("mobx-state-tree").IType<string | undefined, string, string>;
             borderWidth: import("mobx-state-tree").IType<number | undefined, number, number>;

package/model/table-model.d.ts

@@ -141,6 +141,7 @@ export declare const TableCell: import("mobx-state-tree").IModelType<{
     set(attrs: any): void;
     setBorder(side: BorderSideName, attrs: BorderAttrs): void;
     toggleEditMode(editing?: boolean): void;
+    beforeDestroy(): void;
 }, any, any>;
 export type TableCellType = Instance<typeof TableCell>;
 export declare const TableElement: import("mobx-state-tree").IModelType<{
@@ -329,6 +330,7 @@ export declare const TableElement: import("mobx-state-tree").IModelType<{
         set(attrs: any): void;
         setBorder(side: BorderSideName, attrs: BorderAttrs): void;
         toggleEditMode(editing?: boolean): void;
+        beforeDestroy(): void;
     }, any, any>>;
     borderColor: import("mobx-state-tree").IType<string | undefined, string, string>;
     borderWidth: import("mobx-state-tree").IType<number | undefined, number, number>;

package/model/table-model.js

@@ -1 +1 @@
-import{types as e,getParent as t,getSnapshot as o,isAlive as l,getRoot as r,cast as n}from"mobx-state-tree";import{observable as s}from"mobx";import{nanoid as i}from"nanoid";import{Shape as c}from"./shape-model.js";const d=.05,a=e.enumeration(["solid","dashed","dotted","none"]);function g(e){return t(e,2)}function h(e,t,o){const r=e[`_${t}`];return null!=r?r:l(e)?g(e)[t]:o}function u(e){return t(e,1)}const f=e.model("BorderSide",{color:e.maybe(e.string),width:e.maybe(e.number),style:e.maybe(a)}).postProcessSnapshot(e=>{const t={};for(const[o,l]of Object.entries(e)){null!=l&&(t[o]=l)}return t}),b=e.model("CellBorders",{top:e.maybe(f),right:e.maybe(f),bottom:e.maybe(f),left:e.maybe(f)}).postProcessSnapshot(e=>{const t={};for(const[o,l]of Object.entries(e)){null!=l&&"object"==typeof l&&Object.keys(l).length>0&&(t[o]=l)}return t}),w=["fontSize","fontFamily","fontWeight","fontStyle","textDecoration","textTransform","fill","align","verticalAlign","lineHeight","letterSpacing","strokeWidth","stroke","cellBackground","cellPadding"],m=new Set(w),p=["blurEnabled","blurRadius","brightnessEnabled","brightness","sepiaEnabled","grayscaleEnabled","filters","shadowEnabled","shadowBlur","shadowOffsetX","shadowOffsetY","shadowColor","shadowOpacity"],C=["id","type","text","opacity","rowSpan","colSpan","mergedInto","name","custom","borders"],y=new Set(["row","col","x","y","width","height","rotation","draggable","resizable","selectable","removable","contentEditable","visible","showInExport","alwaysOnTop","backgroundEnabled","backgroundOpacity","backgroundColor","backgroundCornerRadius","backgroundPadding","curveEnabled","curvePower","shadowEnabled","shadowBlur","shadowOffsetX","shadowOffsetY","shadowColor","shadowOpacity","blurEnabled","blurRadius","brightnessEnabled","brightness","sepiaEnabled","grayscaleEnabled","placeholder","animations","filters"]),_={opacity:1,rowSpan:1,colSpan:1,name:""},v=[];export const TableCell=e.model("TableCell",{id:e.identifier,type:e.optional(e.literal("tablecell"),"tablecell"),text:"",_fontSize:e.maybe(e.number),_fontFamily:e.maybe(e.string),_fontWeight:e.maybe(e.string),_fontStyle:e.maybe(e.string),_textDecoration:e.maybe(e.string),_textTransform:e.maybe(e.string),_fill:e.maybe(e.string),_align:e.maybe(e.string),_verticalAlign:e.maybe(e.string),_lineHeight:e.maybe(e.union(e.number,e.string)),_letterSpacing:e.maybe(e.number),_strokeWidth:e.maybe(e.number),_stroke:e.maybe(e.string),_cellBackground:e.maybe(e.string),_cellPadding:e.maybe(e.number),opacity:1,rowSpan:1,colSpan:1,mergedInto:e.maybe(e.string),borders:e.maybe(b),name:"",custom:e.frozen()}).volatile(()=>({_editModeEnabled:!1,filters:s.map()})).preProcessSnapshot(e=>{if(!e){return e}for(const o in e){null===e[o]&&(e[o]=void 0)}const t={};for(const o of C){o in e&&(t[o]=e[o])}for(const o of w){void 0!==e[o]&&(t[`_${o}`]=e[o])}return t}).postProcessSnapshot(e=>{const t={};for(const[o,l]of Object.entries(e)){if(o.startsWith("_")){null!=l&&(t[o.slice(1)]=l)}else if("borders"===o){null!=l&&"object"==typeof l&&Object.keys(l).length>0&&(t.borders=l)}else{if(o in _&&l===_[o]){continue}t[o]=l}}return t}).views(e=>{const t={get row(){if(!l(e)){return 0}const t=g(e),o=u(e).indexOf(e);return-1===o?0:Math.floor(o/t.cols)},get col(){if(!l(e)){return 0}const t=g(e),o=u(e).indexOf(e);return-1===o?0:o%t.cols},get store(){return l(e)?r(e):null},get page(){if(!l(e)){return null}try{return g(e).page}catch(t){return null}},get fontSize(){return h(e,"fontSize",30)},get fontFamily(){return h(e,"fontFamily","Roboto")},get fontWeight(){return h(e,"fontWeight","normal")},get fontStyle(){return h(e,"fontStyle","normal")},get textDecoration(){return h(e,"textDecoration","")},get textTransform(){return h(e,"textTransform","none")},get fill(){return h(e,"fill","black")},get align(){return h(e,"align","left")},get verticalAlign(){return h(e,"verticalAlign","top")},get lineHeight(){return h(e,"lineHeight",1.2)},get letterSpacing(){return h(e,"letterSpacing",0)},get strokeWidth(){return h(e,"strokeWidth",0)},get stroke(){return h(e,"stroke","black")},get cellBackground(){return h(e,"cellBackground","transparent")},get cellPadding(){return h(e,"cellPadding",4)},get width(){if(!l(e)){return 100}try{return g(e).getCellRect(t.row,t.col,e.rowSpan,e.colSpan).width}catch(o){return 100}},get height(){if(!l(e)){return 100}try{return g(e).getCellRect(t.row,t.col,e.rowSpan,e.colSpan).height}catch(o){return 100}},get borderInsets(){if(!l(e)){return{top:0,right:0,bottom:0,left:0}}const o=g(e),r=(e,o)=>{const l=t.getEffectiveBorder(e);return"none"===l.style||0===l.width?0:o?l.width:l.width/2};return{top:r("top",0===t.row),bottom:r("bottom",t.row+e.rowSpan===o.rows),left:r("left",0===t.col),right:r("right",t.col+e.colSpan===o.cols)}},get a(){var o;if(!l(e)){return{x:0,y:0,width:100,height:100,rotation:0,opacity:1,fontSize:16}}const r=g(e).getCellRect(t.row,t.col,e.rowSpan,e.colSpan),n=t.cellPadding,{top:s,right:i,bottom:c,left:d}=t.borderInsets;return{x:r.x+d+n,y:r.y+s+n,width:Math.max(0,r.width-d-i-2*n),height:Math.max(0,r.height-s-c-2*n),rotation:0,opacity:null!==(o=e.opacity)&&void 0!==o?o:1,fontSize:t.fontSize}},getEffectiveBorder(t){var o,r,n,s,i,c,d;const a=l(e)?g(e):null,h=null===(o=e.borders)||void 0===o?void 0:o[t];return{color:null!==(n=null!==(r=null==h?void 0:h.color)&&void 0!==r?r:null==a?void 0:a.borderColor)&&void 0!==n?n:"#000000",width:null!==(i=null!==(s=null==h?void 0:h.width)&&void 0!==s?s:null==a?void 0:a.borderWidth)&&void 0!==i?i:1,style:null!==(d=null!==(c=null==h?void 0:h.style)&&void 0!==c?c:null==a?void 0:a.borderStyle)&&void 0!==d?d:"solid"}},get x(){return 0},get y(){return 0},get rotation(){return 0},get draggable(){return!1},get resizable(){return!1},get selectable(){return!1},get removable(){return!1},get contentEditable(){return!0},get visible(){return!0},get showInExport(){return!0},get alwaysOnTop(){return!1},get placeholder(){return""},get backgroundEnabled(){return!1},get backgroundOpacity(){return 1},get backgroundColor(){return"transparent"},get backgroundCornerRadius(){return 0},get backgroundPadding(){return 0},get curveEnabled(){return!1},get curvePower(){return 0},get shadowEnabled(){return!1},get shadowBlur(){return 0},get shadowOffsetX(){return 0},get shadowOffsetY(){return 0},get shadowColor(){return"black"},get shadowOpacity(){return 1},get blurEnabled(){return!1},get blurRadius(){return 0},get brightnessEnabled(){return!1},get brightness(){return 0},get sepiaEnabled(){return!1},get grayscaleEnabled(){return!1},get animations(){return v}};return t}).actions(e=>({toJSON:()=>Object.assign({},o(e)),set(t){null!=t.fontSize&&t.fontSize<1&&(t=Object.assign(Object.assign({},t),{fontSize:1}));const o={};for(const[e,l]of Object.entries(t)){m.has(e)?o[`_${e}`]=l:"borders"===e?o.borders=l?JSON.parse(JSON.stringify(l)):l:y.has(e)||(o[e]=l)}Object.assign(e,o)},setBorder(t,l){const r=e.borders?Object.assign({},o(e.borders)):{},s=r[t]||{},i=Object.assign({},s);void 0!==l.color&&(i.color=l.color),void 0!==l.width&&(i.width=l.width),void 0!==l.style&&(i.style=l.style),r[t]=i,e.borders=n(r)},toggleEditMode(t){const o=null!=t?t:!e._editModeEnabled;o!==e._editModeEnabled&&(e._editModeEnabled=o,e._editModeEnabled?e.store.history.startTransaction():e.store.history.endTransaction())}}));function I(e,t){const l=[];for(const r of e){const e={id:i(10),text:""};if(!r){l.push(e);continue}for(const t of w){const o=r[`_${t}`];null!=o&&(e[t]=o)}const n=r.borders;if(n){const l={},r=t?["left","right","top"]:["top","bottom","left"];for(const e of r){const t=n[e];t&&(l[e]=o(t))}Object.keys(l).length>0&&(e.borders=l)}l.push(e)}return l}function H(e){return Array.from({length:e},()=>1/e)}function R(e){const t=e.reduce((e,t)=>e+t,0);return 0===t?H(e.length):e.map(e=>e/t)}export const TableElement=c.named("Table").props({type:"table",width:300,height:200,rows:3,cols:3,colWidths:e.array(e.number),rowHeights:e.array(e.number),cells:e.array(TableCell),borderColor:"#000000",borderWidth:1,borderStyle:e.optional(e.enumeration(["solid","dashed","dotted","none"]),"solid"),fontSize:30,fontFamily:"Roboto",fontWeight:"normal",fontStyle:"normal",textDecoration:"",textTransform:"none",fill:"black",align:"center",verticalAlign:"middle",lineHeight:e.optional(e.union(e.number,e.string),1.2),letterSpacing:0,strokeWidth:0,stroke:"black",cellBackground:"transparent",cellPadding:4}).postProcessSnapshot(e=>{e.cells&&((e=Object.assign({},e)).cells=e.cells.map(t=>{const o={};for(const[l,r]of Object.entries(t)){m.has(l)&&r===e[l]||(o[l]=r)}return o}));for(const t of p){delete e[t]}return e}).volatile(()=>({_focusedCellIds:[],_editingCellId:void 0,_anchorCellId:void 0,_cellContentHeights:s.map(),_baseRowHeights:null,_baseHeight:null})).actions(e=>({afterCreate(){const t=e.rows*e.cols;if(0===e.cells.length){e.cells.replace(function(e,t){const o=[];for(let l=0;l<e*t;l++){o.push({id:i(10),text:""})}return o}(e.rows,e.cols))}else if(e.cells.length<t){for(;e.cells.length<t;){e.cells.push(n({id:i(10),text:""}))}}else{e.cells.length>t&&e.cells.splice(t)}0===e.colWidths.length&&e.colWidths.replace(H(e.cols)),0===e.rowHeights.length&&e.rowHeights.replace(H(e.rows))}})).views(e=>({get _cellMap(){const t=new Map,o=e.cols;return e.cells.forEach((e,l)=>{t.set(`${Math.floor(l/o)}:${l%o}`,e)}),t},getActualRowHeight:t=>e.rowHeights[t]*e.height})).views(e=>{const t={getCell:(t,o)=>e._cellMap.get(`${t}:${o}`),get minWidth(){return 20*e.cols},getRowContentOuterHeight(o){let l=0;for(let r=0;r<e.cols;r++){const n=t.getCell(o,r);if(!n){continue}const s=e._cellContentHeights.get(n.id);if(void 0===s){continue}const i=n.borderInsets,c=s+2*n.cellPadding+i.top+i.bottom;c>l&&(l=c)}return l},get minHeight(){const o=20*e.rows;if(0===e._cellContentHeights.size){return o}let l=0;for(let r=0;r<e.rows;r++){l+=t.getRowContentOuterHeight(r)}return Math.max(o,l)},get actualHeight(){let t=0;for(let o=0;o<e.rows;o++){t+=e.getActualRowHeight(o)}return t},getCellRect(t,o,l=1,r=1){let n=0;for(let d=0;d<o;d++){n+=e.colWidths[d]*e.width}let s=0;for(let d=0;d<t;d++){s+=e.getActualRowHeight(d)}let i=0;for(let d=o;d<o+r;d++){i+=(e.colWidths[d]||0)*e.width}let c=0;for(let d=t;d<t+l;d++){c+=e.getActualRowHeight(d)}return{x:n,y:s,width:i,height:c}},get visibleCells(){return e.cells.filter(e=>!e.mergedInto)},get focusedCells(){return e.cells.filter(t=>e._focusedCellIds.includes(t.id))},get editingCell(){if(e._editingCellId){return e.cells.find(t=>t.id===e._editingCellId)}},getFocusedCellRange(){if(0===e._focusedCellIds.length){return null}let t=1/0,o=-1/0,l=1/0,r=-1/0;const n=new Set(e._focusedCellIds);for(const s of e.cells){n.has(s.id)&&(s.row<t&&(t=s.row),s.row>o&&(o=s.row),s.col<l&&(l=s.col),s.col>r&&(r=s.col))}return t===1/0?null:{minRow:t,maxRow:o,minCol:l,maxCol:r}},get _fitRowsToContent(){var o,l;if(0===e._cellContentHeights.size){return null}const r=null!==(o=e._baseHeight)&&void 0!==o?o:e.height,n=null!==(l=e._baseRowHeights)&&void 0!==l?l:[...e.rowHeights];let s=!1;const i=[];for(let d=0;d<e.rows;d++){const o=e.rowHeights[d]*e.height,l=n[d]*r,c=t.getRowContentOuterHeight(d),a=Math.max(c,l);Math.abs(a-o)>1?(i.push(a),s=!0):i.push(o)}if(!s){return null}const c=i.reduce((e,t)=>e+t,0);return{rowHeights:i.map(e=>e/c),height:c}}};return t}).actions(e=>{const t={setCellContentHeight(t,o){e._cellContentHeights.set(t,o)},_applyFitRowsToContent(){if(!l(e)){return}null===e._baseRowHeights&&(e._baseRowHeights=[...e.rowHeights],e._baseHeight=e.height);const t=e._fitRowsToContent;t&&(e.height=t.height,e.rowHeights.replace(t.rowHeights))},focusCell(t,o=!1){o?e._focusedCellIds.includes(t)||(e._focusedCellIds=[...e._focusedCellIds,t]):(e._focusedCellIds=[t],e._anchorCellId=t)},selectRowRange(t,o){const l=Math.max(0,Math.min(t,o)),r=Math.min(e.rows-1,Math.max(t,o)),n=[];for(let s=l;s<=r;s++){for(let t=0;t<e.cols;t++){const o=e.getCell(s,t);o&&n.push(o.id)}}e._focusedCellIds=n,e._anchorCellId=n[0]},selectColumnRange(t,o){const l=Math.max(0,Math.min(t,o)),r=Math.min(e.cols-1,Math.max(t,o)),n=[];for(let s=0;s<e.rows;s++){for(let t=l;t<=r;t++){const o=e.getCell(s,t);o&&n.push(o.id)}}e._focusedCellIds=n,e._anchorCellId=n[0]},selectRow(e){t.selectRowRange(e,e)},selectColumn(e){t.selectColumnRange(e,e)},focusCellRange(t,o){const l=e.cells.find(t=>t.id===e._anchorCellId);if(!l){return}const r=Math.min(l.row,t),n=Math.max(l.row,t),s=Math.min(l.col,o),i=Math.max(l.col,o),c=[];for(const d of e.cells){d.row>=r&&d.row<=n&&d.col>=s&&d.col<=i&&c.push(d.id)}e._focusedCellIds=c},clearCellFocus(){if(l(e)){if(e._editingCellId){const t=e.cells.find(t=>t.id===e._editingCellId);t&&t.toggleEditMode(!1)}e._focusedCellIds=[],e._editingCellId=void 0,e._anchorCellId=void 0}},enterCellEdit(t){e._editingCellId=t,e._focusedCellIds.includes(t)||(e._focusedCellIds=[t]);const o=e.cells.find(e=>e.id===t);o&&o.toggleEditMode(!0)},exitCellEdit(){if(e._editingCellId){const t=e.cells.find(t=>t.id===e._editingCellId);t&&t.toggleEditMode(!1)}e._editingCellId=void 0},_resetBaseRowHeights(){e._baseRowHeights=null,e._baseHeight=null},setHeightRedistribute(t){const o=e.rows;if(0===o||t<=0){return void(e.height=t)}const l=e.height;if(l<=0||t>=l){return void(e.height=t)}const r=[],n=[];let s=0;for(let h=0;h<o;h++){r.push(e.rowHeights[h]*l);const t=e.getRowContentOuterHeight(h);n.push(t),s+=t}if(t<=s||s<=0){return void(e.height=t)}const i=t-s;let c=0;const d=[];for(let e=0;e<o;e++){const t=Math.max(0,r[e]-n[e]);d.push(t),c+=t}const a=[];if(c<=0){const e=t/l;for(let t=0;t<o;t++){a.push(r[t]*e)}}else{for(let e=0;e<o;e++){a.push(n[e]+d[e]/c*i)}}const g=a.map(e=>e/t);e.height=t,e.rowHeights.replace(g)},addRow(o){t._resetBaseRowHeights();const l=o>0?o-1:0,r=(e.rowHeights[l]||1/(e.rows+1))*e.height,n=e.height+r,s=[];for(let t=0;t<e.rows;t++){s.push(e.rowHeights[t]*e.height/n)}s.splice(o,0,r/n);const i=o>0?o-1:0,c=[];for(let t=0;t<e.cols;t++){c.push(e.cells[i*e.cols+t])}const d=o*e.cols,a=I(c,!0);e.cells.splice(d,0,...a),e.rows+=1,e.height=n,e.rowHeights.replace(R(s))},removeRow(o){if(e.rows<=1){return}t._resetBaseRowHeights();const l=o*e.cols,r=[];for(let t=l;t<l+e.cols;t++){r.push(e.cells[t].id)}if(e._editingCellId&&r.includes(e._editingCellId)){const t=e.cells.find(t=>t.id===e._editingCellId);t&&t.toggleEditMode(!1),e._editingCellId=void 0}e._focusedCellIds=e._focusedCellIds.filter(e=>!r.includes(e)),r.forEach(t=>e._cellContentHeights.delete(t)),e.cells.splice(l,e.cols);const n=[...e.rowHeights];n.splice(o,1),e.rows-=1,e.rowHeights.replace(R(n))},addColumn(t){const o=t>0?t-1:0,l=(e.colWidths[o]||1/(e.cols+1))*e.width,r=e.width+l,s=[];for(let n=0;n<e.cols;n++){s.push(e.colWidths[n]*e.width/r)}s.splice(t,0,l/r);const i=e.cols,c=t>0?t-1:0,d=[];for(let n=0;n<e.rows;n++){d.push(e.cells[n*i+c])}const a=I(d,!1);for(let g=e.rows-1;g>=0;g--){e.cells.splice(g*i+t,0,n(a[g]))}e.cols+=1,e.width=r,e.colWidths.replace(R(s))},removeColumn(t){if(e.cols<=1){return}const o=e.cols,l=[];for(let n=0;n<e.rows;n++){l.push(e.cells[n*o+t].id)}if(e._editingCellId&&l.includes(e._editingCellId)){const t=e.cells.find(t=>t.id===e._editingCellId);t&&t.toggleEditMode(!1),e._editingCellId=void 0}e._focusedCellIds=e._focusedCellIds.filter(e=>!l.includes(e)),l.forEach(t=>e._cellContentHeights.delete(t));for(let n=e.rows-1;n>=0;n--){e.cells.splice(n*o+t,1)}const r=[...e.colWidths];r.splice(t,1),e.cols-=1,e.colWidths.replace(R(r))},removeRowRange(o,l){for(let r=l;r>=o&&!(e.rows<=1);r--){t.removeRow(r)}},removeColumnRange(o,l){for(let r=l;r>=o&&!(e.cols<=1);r--){t.removeColumn(r)}},distributeRowsEvenly(){const o=e.rows;let l=20;for(let t=0;t<o;t++){l=Math.max(l,e.getRowContentOuterHeight(t))}t._resetBaseRowHeights(),e.height=Math.max(e.height,l*o),e.rowHeights.replace(H(o))},distributeColumnsEvenly(){e.colWidths.replace(H(e.cols))},resizeColumn(t,o){if(t>=e.cols-1){return}const l=[...e.colWidths],r=l[t]+l[t+1],n=l[t]+o,s=l[t+1]-o;n<d?(l[t]=d,l[t+1]=r-d):s<d?(l[t+1]=d,l[t]=r-d):(l[t]=n,l[t+1]=s),e.colWidths.replace(l)},resizeRow(t,o){if(t>=e.rows-1){return}const l=[...e.rowHeights],r=l[t]+l[t+1],n=e.height,s=n>0?e.getRowContentOuterHeight(t)/n:0,i=n>0?e.getRowContentOuterHeight(t+1)/n:0,c=Math.max(d,s),a=Math.max(d,i),g=l[t]+o,h=l[t+1]-o;g<c?(l[t]=c,l[t+1]=r-c):h<a?(l[t+1]=a,l[t]=r-a):(l[t]=g,l[t+1]=h),e.rowHeights.replace(l)},setCellBorders(t,o,l){const r={top:{side:"bottom",dr:-1,dc:0},bottom:{side:"top",dr:1,dc:0},left:{side:"right",dr:0,dc:-1},right:{side:"left",dr:0,dc:1}};for(const n of t){const t=e.cells.find(e=>e.id===n);if(t){for(const n of o){t.setBorder(n,l);const o=r[n],s=t.row+o.dr,i=t.col+o.dc,c=e.getCell(s,i);c&&c.setBorder(o.side,l)}}}},applyBorderMode(o,l){var r;const n=function(e,t,o){const{minRow:l,maxRow:r,minCol:n,maxCol:s}=t,i=(e,t,l,r)=>{const n=[];for(let s=e;s<=t;s++){for(let e=l;e<=r;e++){const t=o(s,e);t&&n.push(t.id)}}return n};if("all"===e){return[{cellIds:i(l,r,n,s),sides:["top","right","bottom","left"]}]}const c=[],d="outer"===e||"topOnly"===e||"topBottom"===e,a="outer"===e||"bottomOnly"===e||"topBottom"===e,g="outer"===e||"leftOnly"===e,h="outer"===e||"rightOnly"===e;if(d){const e=i(l,l,n,s);e.length&&c.push({cellIds:e,sides:["top"]})}if(a){const e=i(r,r,n,s);e.length&&c.push({cellIds:e,sides:["bottom"]})}if(g){const e=i(l,r,n,n);e.length&&c.push({cellIds:e,sides:["left"]})}if(h){const e=i(l,r,s,s);e.length&&c.push({cellIds:e,sides:["right"]})}if(d||a||g||h){return c}if(("inner"===e||"innerHorizontal"===e)&&r>l){const e=i(l,r-1,n,s);e.length&&c.push({cellIds:e,sides:["bottom"]})}if(("inner"===e||"innerVertical"===e)&&s>n){const e=i(l,r,n,s-1);e.length&&c.push({cellIds:e,sides:["right"]})}return c}(o,null!==(r=e.getFocusedCellRange())&&void 0!==r?r:{minRow:0,maxRow:e.rows-1,minCol:0,maxCol:e.cols-1},(t,o)=>e.getCell(t,o));for(const{cellIds:e,sides:s}of n){t.setCellBorders(e,s,l)}}};return t}).actions(e=>({clone(t={},{skipSelect:o=!1}={}){const l=JSON.parse(JSON.stringify(e.toJSON()));if(t.id=t.id||i(10),l.cells){const e=new Map;l.cells.forEach(t=>{const o=t.id,l=i(10);e.set(o,l),t.id=l}),l.cells.forEach(t=>{t.mergedInto&&e.has(t.mergedInto)&&(t.mergedInto=e.get(t.mergedInto))})}return Object.assign(l,t),e.page.addElement(l,{skipSelect:o})}}));
+import{types as e,getParent as t,getSnapshot as o,isAlive as l,getRoot as r,cast as n}from"mobx-state-tree";import{observable as s}from"mobx";import{nanoid as i}from"nanoid";import{Shape as c}from"./shape-model.js";const d=.05,a=e.enumeration(["solid","dashed","dotted","none"]);function g(e){return t(e,2)}function h(e,t,o){const r=e[`_${t}`];return null!=r?r:l(e)?g(e)[t]:o}function u(e){return t(e,1)}const f=e.model("BorderSide",{color:e.maybe(e.string),width:e.maybe(e.number),style:e.maybe(a)}).postProcessSnapshot(e=>{const t={};for(const[o,l]of Object.entries(e)){null!=l&&(t[o]=l)}return t}),b=e.model("CellBorders",{top:e.maybe(f),right:e.maybe(f),bottom:e.maybe(f),left:e.maybe(f)}).postProcessSnapshot(e=>{const t={};for(const[o,l]of Object.entries(e)){null!=l&&"object"==typeof l&&Object.keys(l).length>0&&(t[o]=l)}return t}),w=["fontSize","fontFamily","fontWeight","fontStyle","textDecoration","textTransform","fill","align","verticalAlign","lineHeight","letterSpacing","strokeWidth","stroke","cellBackground","cellPadding"],m=new Set(w),p=["blurEnabled","blurRadius","brightnessEnabled","brightness","sepiaEnabled","grayscaleEnabled","filters","shadowEnabled","shadowBlur","shadowOffsetX","shadowOffsetY","shadowColor","shadowOpacity"],C=["id","type","text","opacity","rowSpan","colSpan","mergedInto","name","custom","borders"],y=new Set(["row","col","x","y","width","height","rotation","draggable","resizable","selectable","removable","contentEditable","visible","showInExport","alwaysOnTop","backgroundEnabled","backgroundOpacity","backgroundColor","backgroundCornerRadius","backgroundPadding","curveEnabled","curvePower","shadowEnabled","shadowBlur","shadowOffsetX","shadowOffsetY","shadowColor","shadowOpacity","blurEnabled","blurRadius","brightnessEnabled","brightness","sepiaEnabled","grayscaleEnabled","placeholder","animations","filters"]),_={opacity:1,rowSpan:1,colSpan:1,name:""},v=[];export const TableCell=e.model("TableCell",{id:e.identifier,type:e.optional(e.literal("tablecell"),"tablecell"),text:"",_fontSize:e.maybe(e.number),_fontFamily:e.maybe(e.string),_fontWeight:e.maybe(e.string),_fontStyle:e.maybe(e.string),_textDecoration:e.maybe(e.string),_textTransform:e.maybe(e.string),_fill:e.maybe(e.string),_align:e.maybe(e.string),_verticalAlign:e.maybe(e.string),_lineHeight:e.maybe(e.union(e.number,e.string)),_letterSpacing:e.maybe(e.number),_strokeWidth:e.maybe(e.number),_stroke:e.maybe(e.string),_cellBackground:e.maybe(e.string),_cellPadding:e.maybe(e.number),opacity:1,rowSpan:1,colSpan:1,mergedInto:e.maybe(e.string),borders:e.maybe(b),name:"",custom:e.frozen()}).volatile(()=>({_editModeEnabled:!1,filters:s.map()})).preProcessSnapshot(e=>{if(!e){return e}for(const o in e){null===e[o]&&(e[o]=void 0)}const t={};for(const o of C){o in e&&(t[o]=e[o])}for(const o of w){void 0!==e[o]&&(t[`_${o}`]=e[o])}return t}).postProcessSnapshot(e=>{const t={};for(const[o,l]of Object.entries(e)){if(o.startsWith("_")){null!=l&&(t[o.slice(1)]=l)}else if("borders"===o){null!=l&&"object"==typeof l&&Object.keys(l).length>0&&(t.borders=l)}else{if(o in _&&l===_[o]){continue}t[o]=l}}return t}).views(e=>{const t={get row(){if(!l(e)){return 0}const t=g(e),o=u(e).indexOf(e);return-1===o?0:Math.floor(o/t.cols)},get col(){if(!l(e)){return 0}const t=g(e),o=u(e).indexOf(e);return-1===o?0:o%t.cols},get store(){return l(e)?r(e):null},get page(){if(!l(e)){return null}try{return g(e).page}catch(t){return null}},get fontSize(){return h(e,"fontSize",30)},get fontFamily(){return h(e,"fontFamily","Roboto")},get fontWeight(){return h(e,"fontWeight","normal")},get fontStyle(){return h(e,"fontStyle","normal")},get textDecoration(){return h(e,"textDecoration","")},get textTransform(){return h(e,"textTransform","none")},get fill(){return h(e,"fill","black")},get align(){return h(e,"align","left")},get verticalAlign(){return h(e,"verticalAlign","top")},get lineHeight(){return h(e,"lineHeight",1.2)},get letterSpacing(){return h(e,"letterSpacing",0)},get strokeWidth(){return h(e,"strokeWidth",0)},get stroke(){return h(e,"stroke","black")},get cellBackground(){return h(e,"cellBackground","transparent")},get cellPadding(){return h(e,"cellPadding",4)},get width(){if(!l(e)){return 100}try{return g(e).getCellRect(t.row,t.col,e.rowSpan,e.colSpan).width}catch(o){return 100}},get height(){if(!l(e)){return 100}try{return g(e).getCellRect(t.row,t.col,e.rowSpan,e.colSpan).height}catch(o){return 100}},get borderInsets(){if(!l(e)){return{top:0,right:0,bottom:0,left:0}}const o=g(e),r=(e,o)=>{const l=t.getEffectiveBorder(e);return"none"===l.style||0===l.width?0:o?l.width:l.width/2};return{top:r("top",0===t.row),bottom:r("bottom",t.row+e.rowSpan===o.rows),left:r("left",0===t.col),right:r("right",t.col+e.colSpan===o.cols)}},get a(){var o;if(!l(e)){return{x:0,y:0,width:100,height:100,rotation:0,opacity:1,fontSize:16}}const r=g(e).getCellRect(t.row,t.col,e.rowSpan,e.colSpan),n=t.cellPadding,{top:s,right:i,bottom:c,left:d}=t.borderInsets;return{x:r.x+d+n,y:r.y+s+n,width:Math.max(0,r.width-d-i-2*n),height:Math.max(0,r.height-s-c-2*n),rotation:0,opacity:null!==(o=e.opacity)&&void 0!==o?o:1,fontSize:t.fontSize}},getEffectiveBorder(t){var o,r,n,s,i,c,d;const a=l(e)?g(e):null,h=null===(o=e.borders)||void 0===o?void 0:o[t];return{color:null!==(n=null!==(r=null==h?void 0:h.color)&&void 0!==r?r:null==a?void 0:a.borderColor)&&void 0!==n?n:"#000000",width:null!==(i=null!==(s=null==h?void 0:h.width)&&void 0!==s?s:null==a?void 0:a.borderWidth)&&void 0!==i?i:1,style:null!==(d=null!==(c=null==h?void 0:h.style)&&void 0!==c?c:null==a?void 0:a.borderStyle)&&void 0!==d?d:"solid"}},get x(){return 0},get y(){return 0},get rotation(){return 0},get draggable(){return!1},get resizable(){return!1},get selectable(){return!1},get removable(){return!1},get contentEditable(){return!0},get visible(){return!0},get showInExport(){return!0},get alwaysOnTop(){return!1},get placeholder(){return""},get backgroundEnabled(){return!1},get backgroundOpacity(){return 1},get backgroundColor(){return"transparent"},get backgroundCornerRadius(){return 0},get backgroundPadding(){return 0},get curveEnabled(){return!1},get curvePower(){return 0},get shadowEnabled(){return!1},get shadowBlur(){return 0},get shadowOffsetX(){return 0},get shadowOffsetY(){return 0},get shadowColor(){return"black"},get shadowOpacity(){return 1},get blurEnabled(){return!1},get blurRadius(){return 0},get brightnessEnabled(){return!1},get brightness(){return 0},get sepiaEnabled(){return!1},get grayscaleEnabled(){return!1},get animations(){return v}};return t}).actions(e=>({toJSON:()=>Object.assign({},o(e)),set(t){null!=t.fontSize&&t.fontSize<1&&(t=Object.assign(Object.assign({},t),{fontSize:1}));const o={};for(const[e,l]of Object.entries(t)){m.has(e)?o[`_${e}`]=l:"borders"===e?o.borders=l?JSON.parse(JSON.stringify(l)):l:y.has(e)||(o[e]=l)}Object.assign(e,o)},setBorder(t,l){const r=e.borders?Object.assign({},o(e.borders)):{},s=r[t]||{},i=Object.assign({},s);void 0!==l.color&&(i.color=l.color),void 0!==l.width&&(i.width=l.width),void 0!==l.style&&(i.style=l.style),r[t]=i,e.borders=n(r)},toggleEditMode(t){const o=null!=t?t:!e._editModeEnabled;o!==e._editModeEnabled&&(e._editModeEnabled=o,e._editModeEnabled?e.store.history.startTransaction():e.store.history.endTransaction())},beforeDestroy(){e._editModeEnabled&&e.store.history.endTransaction()}}));function I(e,t){const l=[];for(const r of e){const e={id:i(10),text:""};if(!r){l.push(e);continue}for(const t of w){const o=r[`_${t}`];null!=o&&(e[t]=o)}const n=r.borders;if(n){const l={},r=t?["left","right","top"]:["top","bottom","left"];for(const e of r){const t=n[e];t&&(l[e]=o(t))}Object.keys(l).length>0&&(e.borders=l)}l.push(e)}return l}function H(e){return Array.from({length:e},()=>1/e)}function R(e){const t=e.reduce((e,t)=>e+t,0);return 0===t?H(e.length):e.map(e=>e/t)}export const TableElement=c.named("Table").props({type:"table",width:300,height:200,rows:3,cols:3,colWidths:e.array(e.number),rowHeights:e.array(e.number),cells:e.array(TableCell),borderColor:"#000000",borderWidth:1,borderStyle:e.optional(e.enumeration(["solid","dashed","dotted","none"]),"solid"),fontSize:30,fontFamily:"Roboto",fontWeight:"normal",fontStyle:"normal",textDecoration:"",textTransform:"none",fill:"black",align:"center",verticalAlign:"middle",lineHeight:e.optional(e.union(e.number,e.string),1.2),letterSpacing:0,strokeWidth:0,stroke:"black",cellBackground:"transparent",cellPadding:4}).postProcessSnapshot(e=>{e.cells&&((e=Object.assign({},e)).cells=e.cells.map(t=>{const o={};for(const[l,r]of Object.entries(t)){m.has(l)&&r===e[l]||(o[l]=r)}return o}));for(const t of p){delete e[t]}return e}).volatile(()=>({_focusedCellIds:[],_editingCellId:void 0,_anchorCellId:void 0,_cellContentHeights:s.map(),_baseRowHeights:null,_baseHeight:null})).actions(e=>({afterCreate(){const t=e.rows*e.cols;if(0===e.cells.length){e.cells.replace(function(e,t){const o=[];for(let l=0;l<e*t;l++){o.push({id:i(10),text:""})}return o}(e.rows,e.cols))}else if(e.cells.length<t){for(;e.cells.length<t;){e.cells.push(n({id:i(10),text:""}))}}else{e.cells.length>t&&e.cells.splice(t)}0===e.colWidths.length&&e.colWidths.replace(H(e.cols)),0===e.rowHeights.length&&e.rowHeights.replace(H(e.rows))}})).views(e=>({get _cellMap(){const t=new Map,o=e.cols;return e.cells.forEach((e,l)=>{t.set(`${Math.floor(l/o)}:${l%o}`,e)}),t},getActualRowHeight:t=>e.rowHeights[t]*e.height})).views(e=>{const t={getCell:(t,o)=>e._cellMap.get(`${t}:${o}`),get minWidth(){return 20*e.cols},getRowContentOuterHeight(o){let l=0;for(let r=0;r<e.cols;r++){const n=t.getCell(o,r);if(!n){continue}const s=e._cellContentHeights.get(n.id);if(void 0===s){continue}const i=n.borderInsets,c=s+2*n.cellPadding+i.top+i.bottom;c>l&&(l=c)}return l},get minHeight(){const o=20*e.rows;if(0===e._cellContentHeights.size){return o}let l=0;for(let r=0;r<e.rows;r++){l+=t.getRowContentOuterHeight(r)}return Math.max(o,l)},get actualHeight(){let t=0;for(let o=0;o<e.rows;o++){t+=e.getActualRowHeight(o)}return t},getCellRect(t,o,l=1,r=1){let n=0;for(let d=0;d<o;d++){n+=e.colWidths[d]*e.width}let s=0;for(let d=0;d<t;d++){s+=e.getActualRowHeight(d)}let i=0;for(let d=o;d<o+r;d++){i+=(e.colWidths[d]||0)*e.width}let c=0;for(let d=t;d<t+l;d++){c+=e.getActualRowHeight(d)}return{x:n,y:s,width:i,height:c}},get visibleCells(){return e.cells.filter(e=>!e.mergedInto)},get focusedCells(){return e.cells.filter(t=>e._focusedCellIds.includes(t.id))},get editingCell(){if(e._editingCellId){return e.cells.find(t=>t.id===e._editingCellId)}},getFocusedCellRange(){if(0===e._focusedCellIds.length){return null}let t=1/0,o=-1/0,l=1/0,r=-1/0;const n=new Set(e._focusedCellIds);for(const s of e.cells){n.has(s.id)&&(s.row<t&&(t=s.row),s.row>o&&(o=s.row),s.col<l&&(l=s.col),s.col>r&&(r=s.col))}return t===1/0?null:{minRow:t,maxRow:o,minCol:l,maxCol:r}},get _fitRowsToContent(){var o,l;if(0===e._cellContentHeights.size){return null}const r=null!==(o=e._baseHeight)&&void 0!==o?o:e.height,n=null!==(l=e._baseRowHeights)&&void 0!==l?l:[...e.rowHeights];let s=!1;const i=[];for(let d=0;d<e.rows;d++){const o=e.rowHeights[d]*e.height,l=n[d]*r,c=t.getRowContentOuterHeight(d),a=Math.max(c,l);Math.abs(a-o)>1?(i.push(a),s=!0):i.push(o)}if(!s){return null}const c=i.reduce((e,t)=>e+t,0);return{rowHeights:i.map(e=>e/c),height:c}}};return t}).actions(e=>{const t={setCellContentHeight(t,o){e._cellContentHeights.set(t,o)},_applyFitRowsToContent(){if(!l(e)){return}null===e._baseRowHeights&&(e._baseRowHeights=[...e.rowHeights],e._baseHeight=e.height);const t=e._fitRowsToContent;t&&(e.height=t.height,e.rowHeights.replace(t.rowHeights))},focusCell(t,o=!1){o?e._focusedCellIds.includes(t)||(e._focusedCellIds=[...e._focusedCellIds,t]):(e._focusedCellIds=[t],e._anchorCellId=t)},selectRowRange(t,o){const l=Math.max(0,Math.min(t,o)),r=Math.min(e.rows-1,Math.max(t,o)),n=[];for(let s=l;s<=r;s++){for(let t=0;t<e.cols;t++){const o=e.getCell(s,t);o&&n.push(o.id)}}e._focusedCellIds=n,e._anchorCellId=n[0]},selectColumnRange(t,o){const l=Math.max(0,Math.min(t,o)),r=Math.min(e.cols-1,Math.max(t,o)),n=[];for(let s=0;s<e.rows;s++){for(let t=l;t<=r;t++){const o=e.getCell(s,t);o&&n.push(o.id)}}e._focusedCellIds=n,e._anchorCellId=n[0]},selectRow(e){t.selectRowRange(e,e)},selectColumn(e){t.selectColumnRange(e,e)},focusCellRange(t,o){const l=e.cells.find(t=>t.id===e._anchorCellId);if(!l){return}const r=Math.min(l.row,t),n=Math.max(l.row,t),s=Math.min(l.col,o),i=Math.max(l.col,o),c=[];for(const d of e.cells){d.row>=r&&d.row<=n&&d.col>=s&&d.col<=i&&c.push(d.id)}e._focusedCellIds=c},clearCellFocus(){if(l(e)){if(e._editingCellId){const t=e.cells.find(t=>t.id===e._editingCellId);t&&t.toggleEditMode(!1)}e._focusedCellIds=[],e._editingCellId=void 0,e._anchorCellId=void 0}},enterCellEdit(t){e._editingCellId=t,e._focusedCellIds.includes(t)||(e._focusedCellIds=[t]);const o=e.cells.find(e=>e.id===t);o&&o.toggleEditMode(!0)},exitCellEdit(){if(e._editingCellId){const t=e.cells.find(t=>t.id===e._editingCellId);t&&t.toggleEditMode(!1)}e._editingCellId=void 0},_resetBaseRowHeights(){e._baseRowHeights=null,e._baseHeight=null},setHeightRedistribute(t){const o=e.rows;if(0===o||t<=0){return void(e.height=t)}const l=e.height;if(l<=0||t>=l){return void(e.height=t)}const r=[],n=[];let s=0;for(let h=0;h<o;h++){r.push(e.rowHeights[h]*l);const t=e.getRowContentOuterHeight(h);n.push(t),s+=t}if(t<=s||s<=0){return void(e.height=t)}const i=t-s;let c=0;const d=[];for(let e=0;e<o;e++){const t=Math.max(0,r[e]-n[e]);d.push(t),c+=t}const a=[];if(c<=0){const e=t/l;for(let t=0;t<o;t++){a.push(r[t]*e)}}else{for(let e=0;e<o;e++){a.push(n[e]+d[e]/c*i)}}const g=a.map(e=>e/t);e.height=t,e.rowHeights.replace(g)},addRow(o){t._resetBaseRowHeights();const l=o>0?o-1:0,r=(e.rowHeights[l]||1/(e.rows+1))*e.height,n=e.height+r,s=[];for(let t=0;t<e.rows;t++){s.push(e.rowHeights[t]*e.height/n)}s.splice(o,0,r/n);const i=o>0?o-1:0,c=[];for(let t=0;t<e.cols;t++){c.push(e.cells[i*e.cols+t])}const d=o*e.cols,a=I(c,!0);e.cells.splice(d,0,...a),e.rows+=1,e.height=n,e.rowHeights.replace(R(s))},removeRow(o){if(e.rows<=1){return}t._resetBaseRowHeights();const l=o*e.cols,r=[];for(let t=l;t<l+e.cols;t++){r.push(e.cells[t].id)}if(e._editingCellId&&r.includes(e._editingCellId)){const t=e.cells.find(t=>t.id===e._editingCellId);t&&t.toggleEditMode(!1),e._editingCellId=void 0}e._focusedCellIds=e._focusedCellIds.filter(e=>!r.includes(e)),r.forEach(t=>e._cellContentHeights.delete(t)),e.cells.splice(l,e.cols);const n=[...e.rowHeights];n.splice(o,1),e.rows-=1,e.rowHeights.replace(R(n))},addColumn(t){const o=t>0?t-1:0,l=(e.colWidths[o]||1/(e.cols+1))*e.width,r=e.width+l,s=[];for(let n=0;n<e.cols;n++){s.push(e.colWidths[n]*e.width/r)}s.splice(t,0,l/r);const i=e.cols,c=t>0?t-1:0,d=[];for(let n=0;n<e.rows;n++){d.push(e.cells[n*i+c])}const a=I(d,!1);for(let g=e.rows-1;g>=0;g--){e.cells.splice(g*i+t,0,n(a[g]))}e.cols+=1,e.width=r,e.colWidths.replace(R(s))},removeColumn(t){if(e.cols<=1){return}const o=e.cols,l=[];for(let n=0;n<e.rows;n++){l.push(e.cells[n*o+t].id)}if(e._editingCellId&&l.includes(e._editingCellId)){const t=e.cells.find(t=>t.id===e._editingCellId);t&&t.toggleEditMode(!1),e._editingCellId=void 0}e._focusedCellIds=e._focusedCellIds.filter(e=>!l.includes(e)),l.forEach(t=>e._cellContentHeights.delete(t));for(let n=e.rows-1;n>=0;n--){e.cells.splice(n*o+t,1)}const r=[...e.colWidths];r.splice(t,1),e.cols-=1,e.colWidths.replace(R(r))},removeRowRange(o,l){for(let r=l;r>=o&&!(e.rows<=1);r--){t.removeRow(r)}},removeColumnRange(o,l){for(let r=l;r>=o&&!(e.cols<=1);r--){t.removeColumn(r)}},distributeRowsEvenly(){const o=e.rows;let l=20;for(let t=0;t<o;t++){l=Math.max(l,e.getRowContentOuterHeight(t))}t._resetBaseRowHeights(),e.height=Math.max(e.height,l*o),e.rowHeights.replace(H(o))},distributeColumnsEvenly(){e.colWidths.replace(H(e.cols))},resizeColumn(t,o){if(t>=e.cols-1){return}const l=[...e.colWidths],r=l[t]+l[t+1],n=l[t]+o,s=l[t+1]-o;n<d?(l[t]=d,l[t+1]=r-d):s<d?(l[t+1]=d,l[t]=r-d):(l[t]=n,l[t+1]=s),e.colWidths.replace(l)},resizeRow(t,o){if(t>=e.rows-1){return}const l=[...e.rowHeights],r=l[t]+l[t+1],n=e.height,s=n>0?e.getRowContentOuterHeight(t)/n:0,i=n>0?e.getRowContentOuterHeight(t+1)/n:0,c=Math.max(d,s),a=Math.max(d,i),g=l[t]+o,h=l[t+1]-o;g<c?(l[t]=c,l[t+1]=r-c):h<a?(l[t+1]=a,l[t]=r-a):(l[t]=g,l[t+1]=h),e.rowHeights.replace(l)},setCellBorders(t,o,l){const r={top:{side:"bottom",dr:-1,dc:0},bottom:{side:"top",dr:1,dc:0},left:{side:"right",dr:0,dc:-1},right:{side:"left",dr:0,dc:1}};for(const n of t){const t=e.cells.find(e=>e.id===n);if(t){for(const n of o){t.setBorder(n,l);const o=r[n],s=t.row+o.dr,i=t.col+o.dc,c=e.getCell(s,i);c&&c.setBorder(o.side,l)}}}},applyBorderMode(o,l){var r;const n=function(e,t,o){const{minRow:l,maxRow:r,minCol:n,maxCol:s}=t,i=(e,t,l,r)=>{const n=[];for(let s=e;s<=t;s++){for(let e=l;e<=r;e++){const t=o(s,e);t&&n.push(t.id)}}return n};if("all"===e){return[{cellIds:i(l,r,n,s),sides:["top","right","bottom","left"]}]}const c=[],d="outer"===e||"topOnly"===e||"topBottom"===e,a="outer"===e||"bottomOnly"===e||"topBottom"===e,g="outer"===e||"leftOnly"===e,h="outer"===e||"rightOnly"===e;if(d){const e=i(l,l,n,s);e.length&&c.push({cellIds:e,sides:["top"]})}if(a){const e=i(r,r,n,s);e.length&&c.push({cellIds:e,sides:["bottom"]})}if(g){const e=i(l,r,n,n);e.length&&c.push({cellIds:e,sides:["left"]})}if(h){const e=i(l,r,s,s);e.length&&c.push({cellIds:e,sides:["right"]})}if(d||a||g||h){return c}if(("inner"===e||"innerHorizontal"===e)&&r>l){const e=i(l,r-1,n,s);e.length&&c.push({cellIds:e,sides:["bottom"]})}if(("inner"===e||"innerVertical"===e)&&s>n){const e=i(l,r,n,s-1);e.length&&c.push({cellIds:e,sides:["right"]})}return c}(o,null!==(r=e.getFocusedCellRange())&&void 0!==r?r:{minRow:0,maxRow:e.rows-1,minCol:0,maxCol:e.cols-1},(t,o)=>e.getCell(t,o));for(const{cellIds:e,sides:s}of n){t.setCellBorders(e,s,l)}}};return t}).actions(e=>({clone(t={},{skipSelect:o=!1}={}){const l=JSON.parse(JSON.stringify(e.toJSON()));if(t.id=t.id||i(10),l.cells){const e=new Map;l.cells.forEach(t=>{const o=t.id,l=i(10);e.set(o,l),t.id=l}),l.cells.forEach(t=>{t.mergedInto&&e.has(t.mergedInto)&&(t.mergedInto=e.get(t.mergedInto))})}return Object.assign(l,t),e.page.addElement(l,{skipSelect:o})}}));

package/model/text-model.d.ts

@@ -163,6 +163,7 @@ export declare const TextElement: import("mobx-state-tree").IModelType<{
     set(attrs: any): void;
     afterCreate(): void;
     toggleEditMode(editing?: boolean): void;
+    beforeDestroy(): void;
 }, any, import("mobx-state-tree").ModelSnapshotType<{
     id: import("mobx-state-tree").ISimpleType<string>;
     type: import("mobx-state-tree").IType<string | undefined, string, string>;

package/model/text-model.js

@@ -1 +1 @@
-import{types as e}from"mobx-state-tree";import{Shape as t}from"./shape-model.js";export const TextElement=t.named("Text").props({type:"text",text:"",placeholder:"",fontSize:14,fontFamily:"Roboto",fontStyle:"normal",fontWeight:"normal",textDecoration:"",textTransform:"none",fill:"black",align:"center",width:100,height:0,verticalAlign:"top",strokeWidth:0,stroke:"black",lineHeight:e.optional(e.union(e.number,e.string),1.2),letterSpacing:0,_editModeEnabled:!1,backgroundEnabled:!1,backgroundColor:"#7ED321",backgroundOpacity:1,backgroundCornerRadius:.5,backgroundPadding:.5,legacyBackground:e.maybe(e.boolean),curveEnabled:!1,curvePower:.5}).preProcessSnapshot(e=>Object.assign(Object.assign({},e),{fontSize:null!=e.fontSize&&e.fontSize<1?1:e.fontSize})).actions(e=>{const t=e.set;return{set(e){null!=e.fontSize&&e.fontSize<1&&(e=Object.assign(Object.assign({},e),{fontSize:1})),t(e)},afterCreate(){if(!e.height){const t=e.lineHeight,o="number"==typeof t?t:parseFloat(t)||1.2;e.height=Math.round(e.fontSize*o)}},toggleEditMode(t){const o=null!=t?t:!e._editModeEnabled;o!==e._editModeEnabled&&(e._editModeEnabled=o,e._editModeEnabled?e.store.history.startTransaction():e.store.history.endTransaction())}}});
+import{types as e}from"mobx-state-tree";import{Shape as t}from"./shape-model.js";export const TextElement=t.named("Text").props({type:"text",text:"",placeholder:"",fontSize:14,fontFamily:"Roboto",fontStyle:"normal",fontWeight:"normal",textDecoration:"",textTransform:"none",fill:"black",align:"center",width:100,height:0,verticalAlign:"top",strokeWidth:0,stroke:"black",lineHeight:e.optional(e.union(e.number,e.string),1.2),letterSpacing:0,_editModeEnabled:!1,backgroundEnabled:!1,backgroundColor:"#7ED321",backgroundOpacity:1,backgroundCornerRadius:.5,backgroundPadding:.5,legacyBackground:e.maybe(e.boolean),curveEnabled:!1,curvePower:.5}).preProcessSnapshot(e=>Object.assign(Object.assign({},e),{fontSize:null!=e.fontSize&&e.fontSize<1?1:e.fontSize})).actions(e=>{const t=e.set;return{set(e){null!=e.fontSize&&e.fontSize<1&&(e=Object.assign(Object.assign({},e),{fontSize:1})),t(e)},afterCreate(){if(!e.height){const t=e.lineHeight,o="number"==typeof t?t:parseFloat(t)||1.2;e.height=Math.round(e.fontSize*o)}},toggleEditMode(t){const o=null!=t?t:!e._editModeEnabled;o!==e._editModeEnabled&&(e._editModeEnabled=o,e._editModeEnabled?e.store.history.startTransaction():e.store.history.endTransaction())},beforeDestroy(){e._editModeEnabled&&e.store.history.endTransaction()}}});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "polotno",
-  "version": "4.1.0",
+  "version": "4.1.2",
   "description": "Design Editor Framework",
   "author": "Anton Lavrenov",
   "keywords": [
@@ -95,7 +95,7 @@
   },
   "dependencies": {
     "@base-ui/react": "^1.5.0",
-    "@polotno/schema": "0.1.0",
+    "@polotno/schema": "0.1.4",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "gifuct-js": "^2.1.2",