kritzel-stencil 0.0.119 → 0.0.120

package/dist/components/{p-DuWb7MaD.js → p-eS30Bqrc.js}

@@ -1,16 +1,25 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-DoQOtXjT.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-dCaxwGmu.js';
 import { K as KritzelMouseButton } from './p-D8W6LE-c.js';
-import { d as KritzelBaseObject, e as KritzelBaseCommand, f as KritzelBaseTool, g as KritzelEventHelper, c as KritzelTextTool, b as KritzelBrushTool, K as KritzelText, a as KritzelPath, O as ObjectHelper, A as AddObjectCommand, h as KritzelToolRegistry, i as KritzelKeyboardHelper } from './p-DRuQsvUx.js';
-import { K as KritzelContextMenu, d as defineCustomElement$3 } from './p-CYnE3twZ.js';
-import { d as defineCustomElement$2 } from './p-CSSrNLad.js';
-import { d as defineCustomElement$1 } from './p-C6kzcN4b.js';
+import { d as KritzelBaseObject, e as KritzelBaseCommand, f as KritzelBaseTool, g as KritzelEventHelper, c as KritzelTextTool, b as KritzelBrushTool, K as KritzelText, a as KritzelPath, O as ObjectHelper, A as AddObjectCommand, h as KritzelToolRegistry, i as KritzelKeyboardHelper } from './p-DC3j4P1n.js';
+import { K as KritzelContextMenu, d as defineCustomElement$3 } from './p-CEYRFk55.js';
+import { d as defineCustomElement$2 } from './p-D0L3GqSK.js';
+import { d as defineCustomElement$1 } from './p-B2wWYPH8.js';
 
 class KritzelImage extends KritzelBaseObject {
-    constructor() {
-        super(...arguments);
+    constructor(config) {
+        super();
         this.__class__ = 'KritzelImage';
         this.src = '';
+        this.maxWidth = 300;
+        this.maxHeight = 300;
+        this.maxCompressionSize = 300;
         this.debugInfoVisible = true;
+        this.src = (config === null || config === void 0 ? void 0 : config.src) || '';
+        this.x = (config === null || config === void 0 ? void 0 : config.x) || 0;
+        this.y = (config === null || config === void 0 ? void 0 : config.y) || 0;
+        this.translateX = (config === null || config === void 0 ? void 0 : config.translateX) || 0;
+        this.translateY = (config === null || config === void 0 ? void 0 : config.translateY) || 0;
+        this.scale = (config === null || config === void 0 ? void 0 : config.scale) || 1;
     }
     static create(store) {
         const object = new KritzelImage();
@@ -34,6 +43,18 @@ class KritzelImage extends KritzelBaseObject {
         this.translateX = x;
         this.translateY = y;
     }
+    calculateScaledDimensions(img) {
+        let scaledWidth = img.width;
+        let scaledHeight = img.height;
+        if (img.width > this.maxWidth || img.height > this.maxHeight) {
+            const widthRatio = this.maxWidth / img.width;
+            const heightRatio = this.maxHeight / img.height;
+            const scaleRatio = Math.min(widthRatio, heightRatio);
+            scaledWidth = img.width * scaleRatio;
+            scaledHeight = img.height * scaleRatio;
+        }
+        return { scaledWidth, scaledHeight };
+    }
 }
 
 class BatchCommand extends KritzelBaseCommand {
@@ -645,10 +666,12 @@ class AddSelectionGroupCommand extends KritzelBaseCommand {
         this._store.state.objectsOctree.remove(object => object instanceof KrtizelSelectionBox);
         this._store.state.objectsOctree.insert(this.selectionGroup);
         this._store.state.selectionGroup = this.selectionGroup;
+        this._store.state.selectionBox = null;
     }
     undo() {
         this._store.state.objectsOctree.remove(object => object.id === this.selectionGroup.id);
         this._store.state.selectionGroup = null;
+        this._store.state.selectionBox = null;
     }
 }
 
@@ -908,13 +931,6 @@ class KritzelSelectionTool extends KritzelBaseTool {
                     !this._store.state.isRotationHandleSelected) {
                     this._store.history.executeCommand(new RemoveSelectionGroupCommand(this._store, this._store.state.selectionGroup));
                 }
-                if (selectedObject && selectedObject.selected && selectedObject.objects.length === 1) {
-                    setTimeout(() => {
-                        if (this._store.state.isDragging === false && this._store.state.isResizing === false && this._store.state.isRotating === false) {
-                            selectedObject.objects[0].onSelectedClick();
-                        }
-                    }, 100);
-                }
             }
             this.rotationHandler.handlePointerDown(event);
             this.resizeHandler.handlePointerDown(event);
@@ -988,9 +1004,8 @@ class KritzelSelectionTool extends KritzelBaseTool {
         const shadowRoot = (_a = this._store.state.host) === null || _a === void 0 ? void 0 : _a.shadowRoot;
         if (!shadowRoot)
             return;
-        const point = event instanceof TouchEvent ? event.touches[0] : event;
-        const elementAtPoint = shadowRoot.elementFromPoint(point.clientX, point.clientY);
-        const handle = elementAtPoint.closest('.resize-handle-overlay');
+        const elementAtPoint = shadowRoot.elementFromPoint(event.clientX, event.clientY);
+        const handle = elementAtPoint === null || elementAtPoint === void 0 ? void 0 : elementAtPoint.closest('.resize-handle-overlay');
         return handle === null || handle === void 0 ? void 0 : handle.classList[1];
     }
     isHandleSelected(event) {
@@ -998,9 +1013,8 @@ class KritzelSelectionTool extends KritzelBaseTool {
         const shadowRoot = (_a = this._store.state.host) === null || _a === void 0 ? void 0 : _a.shadowRoot;
         if (!shadowRoot)
             return false;
-        const point = event instanceof TouchEvent ? event.touches[0] : event;
-        const elementAtPoint = shadowRoot.elementFromPoint(point.clientX, point.clientY);
-        return elementAtPoint === null || elementAtPoint === void 0 ? void 0 : elementAtPoint.classList.contains('resize-handle-overlay');
+        const elementAtPoint = shadowRoot.elementFromPoint(event.clientX, event.clientY);
+        return !!(elementAtPoint === null || elementAtPoint === void 0 ? void 0 : elementAtPoint.classList.contains('resize-handle-overlay'));
     }
     isRotationHandleSelected(event) {
         const path = event.composedPath();
@@ -1231,8 +1245,6 @@ class KritzelImageTool extends KritzelBaseTool {
     constructor(store) {
         super(store);
         this.fileInput = null;
-        this.maxWidth = 300;
-        this.maxHeight = 300;
         this.maxCompressionSize = 300;
         this.setupFileInput();
     }
@@ -1280,34 +1292,19 @@ class KritzelImageTool extends KritzelBaseTool {
             var _a;
             const img = new Image();
             img.src = (_a = e.target) === null || _a === void 0 ? void 0 : _a.result;
-            img.onload = () => this.processImage(img);
+            img.onload = () => this.createKritzelImage(img);
         };
         reader.readAsDataURL(file);
     }
-    processImage(img) {
-        const { scaledWidth, scaledHeight } = this.calculateScaledDimensions(img);
-        const image = this.createKritzelImage(img, scaledWidth, scaledHeight);
-        this.addImageToStore(image);
-    }
-    calculateScaledDimensions(img) {
-        let scaledWidth = img.width;
-        let scaledHeight = img.height;
-        if (img.width > this.maxWidth || img.height > this.maxHeight) {
-            const widthRatio = this.maxWidth / img.width;
-            const heightRatio = this.maxHeight / img.height;
-            const scaleRatio = Math.min(widthRatio, heightRatio);
-            scaledWidth = img.width * scaleRatio;
-            scaledHeight = img.height * scaleRatio;
-        }
-        return { scaledWidth, scaledHeight };
-    }
-    createKritzelImage(img, width, height) {
+    createKritzelImage(img) {
         const image = KritzelImage.create(this._store);
+        const { scaledWidth, scaledHeight } = image.calculateScaledDimensions(img);
         image.src = img.src;
-        image.width = width;
-        image.height = height;
+        image.width = scaledWidth;
+        image.height = scaledHeight;
         image.zIndex = this._store.currentZIndex;
         image.centerInViewport();
+        this.addImageToStore(image);
         return image;
     }
     addImageToStore(image) {
@@ -1324,6 +1321,9 @@ class KritzelImageTool extends KritzelBaseTool {
     }
 }
 
+const ABSOLUTE_SCALE_MAX = 1000;
+const ABSOLUTE_SCALE_MIN = 0.0001;
+
 class KritzelViewport {
     constructor(store, host) {
         this.initialTouchDistance = 0;
@@ -1774,13 +1774,17 @@ const DEFAULT_ENGINE_STATE = {
     cursorX: 0,
     cursorY: 0,
     scale: 1,
-    scaleMax: 1000,
-    scaleMin: 0.0001,
+    scaleMax: 1,
+    scaleMin: 1,
     scaleStep: 0.05,
     startX: 0,
     startY: 0,
     translateX: 0,
+    translateXMax: 400,
+    translateXMin: 0,
     translateY: 0,
+    translateYMax: 400,
+    translateYMin: 0,
     viewportWidth: 0,
     viewportHeight: 0,
     historyBufferSize: 1000,
@@ -2011,19 +2015,8 @@ class KritzelStore {
         const shadowRoot = (_a = this.state.host) === null || _a === void 0 ? void 0 : _a.shadowRoot;
         if (!shadowRoot)
             return null;
-        let clientX;
-        let clientY;
-        if ('touches' in event) {
-            const touch = event.touches[0];
-            if (!touch)
-                return null;
-            clientX = touch.clientX;
-            clientY = touch.clientY;
-        }
-        else {
-            clientX = event.clientX;
-            clientY = event.clientY;
-        }
+        const clientX = event.clientX;
+        const clientY = event.clientY;
         const elementAtPoint = shadowRoot.elementFromPoint(clientX, clientY);
         if (!elementAtPoint)
             return null;
@@ -2167,6 +2160,26 @@ class KritzelClassHelper {
 const kritzelEngineCss = ":host{display:block;position:relative;height:100%;width:100%;overflow:hidden;background-color:var(--kritzel-engine-background-color, #ffffff)}:host,:host *{touch-action:none;user-select:none}.debug-panel{position:absolute;pointer-events:none;top:0;right:0}.origin{position:relative;top:0;left:0;height:0;width:0;pointer-events:none;-webkit-transform-origin:top left;-moz-transform-origin:top left;transform-origin:top left;overflow:visible}.object{overflow:visible}textarea{all:unset;box-sizing:border-box;outline:none !important;border:none !important;overflow:visible}.resize-handle-overlay.top-left,.resize-handle-overlay.bottom-right{cursor:nwse-resize}.resize-handle-overlay.top-right,.resize-handle-overlay.bottom-left{cursor:nesw-resize}.rotation-handle-overlay{cursor:grab}";
 
 const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine extends H {
+    validateScaleMax(newValue) {
+        if (newValue > ABSOLUTE_SCALE_MAX) {
+            console.warn(`scaleMax cannot be greater than ${ABSOLUTE_SCALE_MAX}.`);
+            this.scaleMax = ABSOLUTE_SCALE_MAX;
+            this.store.state.scaleMax = this.scaleMax;
+        }
+        else {
+            this.store.state.scaleMax = newValue;
+        }
+    }
+    validateScaleMin(newValue) {
+        if (newValue < ABSOLUTE_SCALE_MIN) {
+            console.warn(`scaleMin cannot be less than ${ABSOLUTE_SCALE_MIN}.`);
+            this.scaleMin = ABSOLUTE_SCALE_MIN;
+            this.store.state.scaleMin = this.scaleMin;
+        }
+        else {
+            this.store.state.scaleMin = newValue;
+        }
+    }
     get isSelecting() {
         return this.store.state.activeTool instanceof KritzelSelectionTool && this.store.state.isSelecting;
     }
@@ -2179,56 +2192,21 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
         this.__attachShadow();
         this.isEngineReady = createEvent(this, "isEngineReady");
         this.activeToolChange = createEvent(this, "activeToolChange");
-        this.globalContextMenuItems = [
-            {
-                label: 'Paste',
-                icon: 'paste',
-                disabled: () => this.store.state.copiedObjects === null,
-                action: () => {
-                    const x = (-this.store.state.translateX + this.store.state.contextMenuX) / this.store.state.scale;
-                    const y = (-this.store.state.translateY + this.store.state.contextMenuY) / this.store.state.scale;
-                    this.paste(x, y);
-                },
-            },
-            { label: 'Select All', icon: 'select-all', action: () => this.selectAllObjectsInViewport() },
-        ];
-        this.objectContextMenuItems = [
-            { label: 'Copy', icon: 'copy', action: () => this.copy() },
-            {
-                label: 'Paste',
-                icon: 'paste',
-                disabled: () => this.store.state.copiedObjects === null,
-                action: () => {
-                    const x = (-this.store.state.translateX + this.store.state.contextMenuX) / this.store.state.scale;
-                    const y = (-this.store.state.translateY + this.store.state.contextMenuY) / this.store.state.scale;
-                    this.paste(x, y);
-                },
-            },
-            { label: 'Delete', icon: 'delete', action: () => this.delete() },
-            { label: 'Bring to Front', icon: 'bring-to-front', action: () => this.moveToTop() },
-            { label: 'Send to Back', icon: 'send-to-back', action: () => this.moveToBottom() },
-        ];
+        this.scaleMax = ABSOLUTE_SCALE_MAX;
+        this.scaleMin = ABSOLUTE_SCALE_MIN;
         this.forceUpdate = 0;
         this.contextMenuElement = null;
         this.store = new KritzelStore(this);
-        this.contextMenuHandler = new KritzelContextMenuHandler(this.store, this.globalContextMenuItems, this.objectContextMenuItems);
-        this.keyHandler = new KritzelKeyHandler(this.store);
-        this.store.onStateChange('activeTool', (activeTool) => {
-            if (!(activeTool instanceof KritzelSelectionTool)) {
-                this.store.clearSelection();
-            }
-            this.store.state.skipContextMenu = false;
-            this.activeToolChange.emit(activeTool);
-            KritzelKeyboardHelper.forceHideKeyboard();
-        });
-        this.store.onStateChange('isFocused', (isFocused) => {
-            if (!isFocused) {
-                this.store.resetActiveText();
-            }
-        });
+    }
+    componentWillLoad() {
+        this.validateScaleMax(this.scaleMax);
+        this.validateScaleMin(this.scaleMin);
     }
     componentDidLoad() {
+        this.contextMenuHandler = new KritzelContextMenuHandler(this.store, this.globalContextMenuItems, this.objectContextMenuItems);
+        this.keyHandler = new KritzelKeyHandler(this.store);
         this.viewport = new KritzelViewport(this.store, this.host);
+        this._registerStateChangeListeners();
         if (this.store.state.isReady === false) {
             this.store.state.isReady = true;
             this.isEngineReady.emit();
@@ -2318,10 +2296,6 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
         const isInKritzelEngine = path.includes(kritzelEngineElement || this.host);
         this.store.setState('isFocused', isInside && isInKritzelEngine);
     }
-    handleContextMenuAction(event) {
-        event.detail.action();
-        this.hideContextMenu();
-    }
     async registerTool(toolName, toolClass, toolConfig) {
         if (typeof toolClass !== 'function' || !(toolClass.prototype instanceof KritzelBaseTool)) {
             console.error(`Failed to register tool "${toolName}": Tool class must be a constructor function`);
@@ -2440,21 +2414,42 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
         this.store.history.executeCommand(command);
         return object;
     }
+    async getCopiedObjects() {
+        var _a;
+        return ((_a = this.store.state.copiedObjects) === null || _a === void 0 ? void 0 : _a.objects) || [];
+    }
+    _registerStateChangeListeners() {
+        this.store.onStateChange('activeTool', this._handleActiveToolChange.bind(this));
+        this.store.onStateChange('isFocused', this._handleIsFocusedChange.bind(this));
+    }
+    _handleActiveToolChange(activeTool) {
+        if (!(activeTool instanceof KritzelSelectionTool)) {
+            this.store.clearSelection();
+        }
+        this.store.state.skipContextMenu = false;
+        this.activeToolChange.emit(activeTool);
+        KritzelKeyboardHelper.forceHideKeyboard();
+    }
+    _handleIsFocusedChange(isFocused) {
+        if (!isFocused) {
+            this.store.resetActiveText();
+        }
+    }
     render() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3;
         const computedStyle = window.getComputedStyle(this.host);
         const baseHandleSizePx = computedStyle.getPropertyValue('--kritzel-selection-handle-size').trim() || '6px';
         const baseHandleSize = parseFloat(baseHandleSizePx);
         const baseHandleTouchSize = baseHandleSize * 2 < 14 ? 14 : baseHandleSize;
-        return (h(Host, { key: '1a8a4ac086fd25b356d25f1c4f094005771a3d57' }, h("div", { key: '5edf7faeb5d63e8341fa81b48287eaee001ed163', class: "debug-panel", style: { display: this.store.state.debugInfo.showViewportInfo ? 'block' : 'none' } }, h("div", { key: '356a8bb56abb4a9c98ab79f1d224a64e6c202a34' }, "TranslateX: ", (_a = this.store.state) === null || _a === void 0 ? void 0 :
-            _a.translateX), h("div", { key: 'e3d853e7e11c32bf5f801c29a0ed9add91ce24c3' }, "TranslateY: ", (_b = this.store.state) === null || _b === void 0 ? void 0 :
-            _b.translateY), h("div", { key: '7ada7c0c256bbdc79b2b74b391c87a319c9aaf05' }, "ViewportWidth: ", (_c = this.store.state) === null || _c === void 0 ? void 0 :
-            _c.viewportWidth), h("div", { key: '156ed10ab63bbacf30d549f115d82beeb6e714d5' }, "ViewportHeight: ", (_d = this.store.state) === null || _d === void 0 ? void 0 :
-            _d.viewportHeight), h("div", { key: '1cf8c42989b1c4117a4895f05686313e169b808e' }, "ObjectsInViewport. ", this.store.objects.length), h("div", { key: '1e558a335a31c050c80cda3cd763267fe95335d2' }, "Scale: ", (_e = this.store.state) === null || _e === void 0 ? void 0 :
-            _e.scale), h("div", { key: 'ff43094ed2f27d2157946329cc4473d92c2d3e30' }, "ActiveTool: ", (_g = (_f = this.store.state) === null || _f === void 0 ? void 0 : _f.activeTool) === null || _g === void 0 ? void 0 :
-            _g.name), h("div", { key: '844c0e1dd8d77270419e3c0a0362536e6027f4cb' }, "HasViewportChanged: ", ((_h = this.store.state) === null || _h === void 0 ? void 0 : _h.hasViewportChanged) ? 'true' : 'false'), h("div", { key: '64a782868924f27f9ef4d426694ddac338293bc5' }, "IsEnabled: ", ((_j = this.store.state) === null || _j === void 0 ? void 0 : _j.isEnabled) ? 'true' : 'false'), h("div", { key: '4fc48b5006641e0ecb9af0d8cc5b4fe2868faa3d' }, "IsScaling: ", ((_k = this.store.state) === null || _k === void 0 ? void 0 : _k.isScaling) ? 'true' : 'false'), h("div", { key: '1407e97aba7434599060b33ead00da898482cc6a' }, "IsPanning: ", ((_l = this.store.state) === null || _l === void 0 ? void 0 : _l.isPanning) ? 'true' : 'false'), h("div", { key: 'f99a32e77014bf5548a5ae50a99ee4e6f6ae4801' }, "IsFocused: ", this.store.state.isFocused ? 'true' : 'false'), h("div", { key: '0c7708d4a8dc78e171b9493b8b5ab2cfe2984ad6' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), h("div", { key: '5bca3b678ee83f2faba320dfbeb63af8d41b2908' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), h("div", { key: '2cecae3e2108ca108220ca7bb67777829cd223ef' }, "IsResizeHandleSelected: ", this.store.state.isResizeHandleSelected ? 'true' : 'false'), h("div", { key: 'd0cf8270f99ae6e8ce915a856e54ed7b38cd40aa' }, "IsRotationHandleSelected: ", this.store.state.isRotationHandleSelected ? 'true' : 'false'), h("div", { key: '4f1a0bad54e9a4ad46fec56d7c692a48e02cb7a2' }, "IsDrawing: ", this.store.state.isDrawing ? 'true' : 'false'), h("div", { key: '9a4b3fdc05e103a2c73a7940bd9a84a68f912b14' }, "IsWriting: ", this.store.state.isWriting ? 'true' : 'false'), h("div", { key: '5a480fdbe4a3fa435697bb94701971dda75f41d3' }, "CursorX: ", (_m = this.store.state) === null || _m === void 0 ? void 0 :
-            _m.cursorX), h("div", { key: 'f549e8faa3ddad5b3294bb72f24ad3735539e84b' }, "CursorY: ", (_o = this.store.state) === null || _o === void 0 ? void 0 :
-            _o.cursorY)), h("div", { key: 'e81679812ed19a50a09357549df00e590ae613b6', class: "origin", style: {
+        return (h(Host, { key: 'd484b59ebdea9e7b9e8e086c39e7b3a339fb034d' }, h("div", { key: 'ea68c0a3c0020110b5aca6f3a7bdfab223b64744', class: "debug-panel", style: { display: this.store.state.debugInfo.showViewportInfo ? 'block' : 'none' } }, h("div", { key: '4a7c60073190f2123dbb6bda4e206a1b488db7ac' }, "TranslateX: ", (_a = this.store.state) === null || _a === void 0 ? void 0 :
+            _a.translateX), h("div", { key: 'c4fe558accb441fb06ff048f41b07b520ffde505' }, "TranslateY: ", (_b = this.store.state) === null || _b === void 0 ? void 0 :
+            _b.translateY), h("div", { key: '00d5fd0b0ec3c79f9ab1dc9a1032fa2f70c7c246' }, "ViewportWidth: ", (_c = this.store.state) === null || _c === void 0 ? void 0 :
+            _c.viewportWidth), h("div", { key: '87c8f03bfcc6de031e3d9d74576a6028bfc155bc' }, "ViewportHeight: ", (_d = this.store.state) === null || _d === void 0 ? void 0 :
+            _d.viewportHeight), h("div", { key: 'f4e82ddee133818b6ad60b5b6c5e9e721fce4968' }, "ObjectsInViewport. ", this.store.objects.length), h("div", { key: '4f9018ce1184b676248614d4edfdeffd49ac7ce2' }, "Scale: ", (_e = this.store.state) === null || _e === void 0 ? void 0 :
+            _e.scale), h("div", { key: 'cc5d72952bc4b80a42d26ca1b1e56bcab96ab76c' }, "ActiveTool: ", (_g = (_f = this.store.state) === null || _f === void 0 ? void 0 : _f.activeTool) === null || _g === void 0 ? void 0 :
+            _g.name), h("div", { key: '387071b0ea3f2064d1ea0e0495aa92de8072a900' }, "HasViewportChanged: ", ((_h = this.store.state) === null || _h === void 0 ? void 0 : _h.hasViewportChanged) ? 'true' : 'false'), h("div", { key: 'a386b4fb631860b94f710cb601b1809283ab9664' }, "IsEnabled: ", ((_j = this.store.state) === null || _j === void 0 ? void 0 : _j.isEnabled) ? 'true' : 'false'), h("div", { key: 'a67ad19caa6a6cafa8b19dace26c25d60347090a' }, "IsScaling: ", ((_k = this.store.state) === null || _k === void 0 ? void 0 : _k.isScaling) ? 'true' : 'false'), h("div", { key: '9fe3152ba0a3e936b6c6551673de3a67bd5de0d1' }, "IsPanning: ", ((_l = this.store.state) === null || _l === void 0 ? void 0 : _l.isPanning) ? 'true' : 'false'), h("div", { key: '8103da258c7bdede340c6c64188a2f9657af16c3' }, "IsFocused: ", this.store.state.isFocused ? 'true' : 'false'), h("div", { key: '10b315366f6cf8eb2f27a20083094c9e483c2fe3' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), h("div", { key: 'b65926aca01fe6b41f70e8d7484674f568e9945a' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), h("div", { key: '5e95a4268ab30bf06918e83aa5f7e96b5ee1dbe2' }, "IsResizeHandleSelected: ", this.store.state.isResizeHandleSelected ? 'true' : 'false'), h("div", { key: '3922b7fcb2b74ec28f515db8254f05b454ef6b12' }, "IsRotationHandleSelected: ", this.store.state.isRotationHandleSelected ? 'true' : 'false'), h("div", { key: '13c162ec56f0990948bac4569c28a6076582c7ea' }, "IsDrawing: ", this.store.state.isDrawing ? 'true' : 'false'), h("div", { key: 'f909cbc959961e47dbff28e5c620175dc04f6873' }, "IsWriting: ", this.store.state.isWriting ? 'true' : 'false'), h("div", { key: '505122e286976b8fa9e9fac5b131bcecb359eaae' }, "CursorX: ", (_m = this.store.state) === null || _m === void 0 ? void 0 :
+            _m.cursorX), h("div", { key: '116217379cf67a0a268e97912ec44d52a98c434b' }, "CursorY: ", (_o = this.store.state) === null || _o === void 0 ? void 0 :
+            _o.cursorY)), h("div", { key: 'b0bcbb90404d0cbc1281b932bd13e67df612d58d', class: "origin", style: {
                 transform: `matrix(${(_p = this.store.state) === null || _p === void 0 ? void 0 : _p.scale}, 0, 0, ${(_q = this.store.state) === null || _q === void 0 ? void 0 : _q.scale}, ${(_r = this.store.state) === null || _r === void 0 ? void 0 : _r.translateX}, ${(_s = this.store.state) === null || _s === void 0 ? void 0 : _s.translateY})`,
             } }, (_t = this.store.objects) === null || _t === void 0 ? void 0 :
             _t.map(object => {
@@ -2551,7 +2546,7 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
                         fill: 'transparent',
                         cursor: 'grab',
                     }, visibility: object.selected && !this.isSelecting ? 'visible' : 'hidden' }), h("g", { style: { display: this.store.state.debugInfo.showObjectInfo ? 'block' : 'none', pointerEvents: 'none' } }, h("foreignObject", { x: object.totalWidth.toString(), y: "0", width: "400px", height: "160px", style: { minHeight: '0', minWidth: '0', display: object.debugInfoVisible ? 'block' : 'none' } }, h("div", { style: { width: '100%', height: '100%' } }, h("div", { style: { whiteSpace: 'nowrap' } }, "zIndex: ", object.zIndex), h("div", { style: { whiteSpace: 'nowrap' } }, "translateX: ", object.translateX), h("div", { style: { whiteSpace: 'nowrap' } }, "translateY: ", object.translateY), h("div", { style: { whiteSpace: 'nowrap' } }, "width: ", object.width), h("div", { style: { whiteSpace: 'nowrap' } }, "height: ", object.height), h("div", { style: { whiteSpace: 'nowrap' } }, "scale: ", object.scale), h("div", { style: { whiteSpace: 'nowrap' } }, "rotation: ", object.rotation)))))));
-            }), h("svg", { key: 'bf2c561803773e19aed36d418e96b9f797c305be', class: "object", xmlns: "http://www.w3.org/2000/svg", style: {
+            }), h("svg", { key: '4fd9e58c617eaf428edbdc3491d3f4fabe3ce564', class: "object", xmlns: "http://www.w3.org/2000/svg", style: {
                 height: (_u = this.store.state.currentPath) === null || _u === void 0 ? void 0 : _u.height.toString(),
                 width: (_v = this.store.state.currentPath) === null || _v === void 0 ? void 0 : _v.width.toString(),
                 left: '0',
@@ -2561,19 +2556,31 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
                 transform: (_x = this.store.state.currentPath) === null || _x === void 0 ? void 0 : _x.transformationMatrix,
                 transformOrigin: 'top left',
                 overflow: 'visible',
-            }, viewBox: (_y = this.store.state.currentPath) === null || _y === void 0 ? void 0 : _y.viewBox }, h("path", { key: '5177dab02b9a5563129d00b80b99a1a198eb8ff5', d: (_z = this.store.state.currentPath) === null || _z === void 0 ? void 0 : _z.d, fill: (_0 = this.store.state.currentPath) === null || _0 === void 0 ? void 0 : _0.fill, stroke: (_1 = this.store.state.currentPath) === null || _1 === void 0 ? void 0 : _1.stroke }))), this.store.state.isContextMenuVisible && (h("kritzel-context-menu", { key: 'ea3ae0531d9b2109e547baca7159ea29ebd34827', class: "context-menu", ref: el => (this.contextMenuElement = el), items: this.store.state.contextMenuItems, style: {
+            }, viewBox: (_y = this.store.state.currentPath) === null || _y === void 0 ? void 0 : _y.viewBox }, h("path", { key: 'ac88c3b66d642bbe42a0ac5345b4f4d6cddef5a3', d: (_z = this.store.state.currentPath) === null || _z === void 0 ? void 0 : _z.d, fill: (_0 = this.store.state.currentPath) === null || _0 === void 0 ? void 0 : _0.fill, stroke: (_1 = this.store.state.currentPath) === null || _1 === void 0 ? void 0 : _1.stroke }))), this.store.state.isContextMenuVisible && (h("kritzel-context-menu", { key: '75d7dfe1ef3ab64ae960c69a471224095a812cb8', class: "context-menu", ref: el => (this.contextMenuElement = el), items: this.store.state.contextMenuItems, objects: ((_2 = this.store.state.selectionGroup) === null || _2 === void 0 ? void 0 : _2.objects) || [], style: {
                 position: 'fixed',
                 left: `${this.store.state.contextMenuX}px`,
                 top: `${this.store.state.contextMenuY}px`,
                 zIndex: '10000',
-            }, onActionSelected: event => this.handleContextMenuAction(event) })), ((_2 = this.store.state) === null || _2 === void 0 ? void 0 : _2.activeTool) instanceof KritzelEraserTool && !this.store.state.isScaling && h("kritzel-cursor-trail", { key: 'c785558a0f922d7caeacaeeb44a9492ebcc0be7d', store: this.store })));
+            }, onActionSelected: event => {
+                event.detail.action({
+                    x: (-this.store.state.translateX + this.store.state.contextMenuX) / this.store.state.scale,
+                    y: (-this.store.state.translateY + this.store.state.contextMenuY) / this.store.state.scale,
+                }, this.store.state.selectionGroup.objects);
+                this.hideContextMenu();
+            } })), ((_3 = this.store.state) === null || _3 === void 0 ? void 0 : _3.activeTool) instanceof KritzelEraserTool && !this.store.state.isScaling && h("kritzel-cursor-trail", { key: 'a056ea6d5c4271f6af82d259d6d8126fef07c7bd', store: this.store })));
     }
     get host() { return this; }
+    static get watchers() { return {
+        "scaleMax": ["validateScaleMax"],
+        "scaleMin": ["validateScaleMin"]
+    }; }
     static get style() { return kritzelEngineCss; }
-}, [1, "kritzel-engine", {
+}, [257, "kritzel-engine", {
         "activeTool": [16, "active-tool"],
         "globalContextMenuItems": [16, "global-context-menu-items"],
         "objectContextMenuItems": [16, "object-context-menu-items"],
+        "scaleMax": [1026, "scale-max"],
+        "scaleMin": [1026, "scale-min"],
         "forceUpdate": [32],
         "registerTool": [64],
         "changeActiveTool": [64],
@@ -2598,8 +2605,12 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
         "selectObjects": [64],
         "selectAllObjectsInViewport": [64],
         "clearSelection": [64],
-        "centerObjectInViewport": [64]
-    }, [[0, "wheel", "handleWheel"], [0, "pointerdown", "handlePointerDown"], [0, "pointermove", "handlePointerMove"], [0, "pointerup", "handlePointerUp"], [0, "pointercancel", "handlePointerCancel"], [0, "contextmenu", "handleContextMenu"], [9, "resize", "handleResize"], [8, "keydown", "handleKeyDown"], [8, "keyup", "handleKeyUp"], [9, "mousedown", "updateFocus"]]]);
+        "centerObjectInViewport": [64],
+        "getCopiedObjects": [64]
+    }, [[0, "wheel", "handleWheel"], [0, "pointerdown", "handlePointerDown"], [0, "pointermove", "handlePointerMove"], [0, "pointerup", "handlePointerUp"], [0, "pointercancel", "handlePointerCancel"], [0, "contextmenu", "handleContextMenu"], [9, "resize", "handleResize"], [8, "keydown", "handleKeyDown"], [8, "keyup", "handleKeyUp"], [9, "mousedown", "updateFocus"]], {
+        "scaleMax": ["validateScaleMax"],
+        "scaleMin": ["validateScaleMin"]
+    }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
@@ -2629,7 +2640,7 @@ function defineCustomElement() {
     } });
 }
 
-export { KritzelImage as K, KritzelEngine as a, KritzelSelectionTool as b, KritzelEraserTool as c, defineCustomElement as d, KritzelImageTool as e };
-//# sourceMappingURL=p-DuWb7MaD.js.map
+export { ABSOLUTE_SCALE_MAX as A, KritzelImage as K, KritzelEraserTool as a, KritzelImageTool as b, KritzelSelectionTool as c, KritzelEngine as d, defineCustomElement as e, ABSOLUTE_SCALE_MIN as f };
+//# sourceMappingURL=p-eS30Bqrc.js.map
 
-//# sourceMappingURL=p-DuWb7MaD.js.map
+//# sourceMappingURL=p-eS30Bqrc.js.map