kritzel-stencil 0.0.121 → 0.0.122

package/dist/esm/index.js

@@ -1,4 +1,4 @@
-export { D as DEFAULT_BRUSH_CONFIG, e as DEFAULT_TEXT_CONFIG, K as KritzelBrushTool, d as KritzelEraserTool, s as KritzelImage, f as KritzelImageTool, r as KritzelPath, c as KritzelSelectionTool, q as KritzelText, a as KritzelTextTool } from './index-DsUDklEm.js';
+export { D as DEFAULT_BRUSH_CONFIG, e as DEFAULT_TEXT_CONFIG, K as KritzelBrushTool, d as KritzelEraserTool, s as KritzelImage, f as KritzelImageTool, r as KritzelPath, c as KritzelSelectionTool, q as KritzelText, a as KritzelTextTool } from './index-DYLW4hYm.js';
 //# sourceMappingURL=index.js.map
 
 //# sourceMappingURL=index.js.map

package/dist/esm/kritzel-brush-style_18.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-BPFXWTBp.js';
-import { K as KritzelBrushTool, a as KritzelTextTool, b as KritzelMouseButton, c as KritzelSelectionTool, D as DEFAULT_BRUSH_CONFIG, d as KritzelEraserTool, e as DEFAULT_TEXT_CONFIG, f as KritzelImageTool, g as KritzelEventHelper, h as KritzelBaseCommand, i as KritzelSelectionGroup, j as KrtizelSelectionBox, R as RemoveSelectionGroupCommand, k as RemoveObjectCommand, B as BatchCommand, A as AddObjectCommand, l as AddSelectionGroupCommand, m as KritzelToolRegistry, n as KritzelBaseHandler, o as KritzelBaseTool, p as KritzelKeyboardHelper } from './index-DsUDklEm.js';
+import { K as KritzelBrushTool, a as KritzelTextTool, b as KritzelMouseButton, c as KritzelSelectionTool, D as DEFAULT_BRUSH_CONFIG, d as KritzelEraserTool, e as DEFAULT_TEXT_CONFIG, f as KritzelImageTool, g as KritzelEventHelper, h as KritzelBaseCommand, i as KritzelSelectionGroup, j as KrtizelSelectionBox, R as RemoveSelectionGroupCommand, k as RemoveObjectCommand, B as BatchCommand, A as AddObjectCommand, l as AddSelectionGroupCommand, m as KritzelToolRegistry, n as KritzelBaseHandler, o as KritzelBaseTool, p as KritzelKeyboardHelper } from './index-DYLW4hYm.js';
 
 const kritzelBrushStyleCss = ":host{display:flex;align-items:flex-start;gap:8px;padding:8px;box-sizing:border-box;width:100%}.brush-style-button{display:flex;justify-content:center;align-items:center;width:42px;height:32px;padding:0;border:none;outline:none;background:none;cursor:default;border-radius:0;color:var(--control-text-color);font-weight:bold;-webkit-tap-highlight-color:transparent}.font-style-button:not(:last-child){border-right:1px solid #333333}.font-style-button:hover{background-color:var(--control-hover-bg)}.font-style-button:active{background-color:var(--control-active-bg)}.font-style-button.selected,.font-style-button.selected:hover,.font-style-button.selected:active{background-color:var(--control-selected-bg);color:var(--control-selected-color)}";
 
@@ -661,8 +661,8 @@ const KritzelEditor = class {
                 name: 'brush',
                 type: 'tool',
                 tool: KritzelBrushTool,
-                isDefault: true,
                 icon: 'pen',
+                isDefault: true,
                 config: DEFAULT_BRUSH_CONFIG,
             },
             {
@@ -714,14 +714,14 @@ const KritzelEditor = class {
                             object.edit();
                         }
                     }
-                }
+                },
             },
             { label: 'Copy', icon: 'copy', action: () => this.engineRef.copy() },
             {
                 label: 'Paste',
                 icon: 'paste',
                 disabled: async () => (await this.engineRef.getCopiedObjects()).length === 0,
-                action: (menu, _) => this.engineRef.paste(menu.x, menu.y)
+                action: (menu, _) => this.engineRef.paste(menu.x, menu.y),
             },
             { label: 'Delete', icon: 'delete', action: () => this.engineRef.delete() },
             { label: 'Bring to Front', icon: 'bring-to-front', action: () => this.engineRef.moveToTop() },
@@ -800,7 +800,7 @@ const KritzelEditor = class {
         }
     }
     render() {
-        return (h(Host, { key: '2b269b9caee7c54eaea7782e22b0aa4620a89787' }, h("kritzel-engine", { key: '9ba5fbb01d673fdc74c1d9789640f3e513d290d2', ref: el => (this.engineRef = el), onIsEngineReady: () => (this.isEngineReady = true), scaleMax: this.scaleMax, scaleMin: this.scaleMin, globalContextMenuItems: this.globalContextMenuItems, objectContextMenuItems: this.objectContextMenuItems }), h("kritzel-controls", { key: 'f21688e22f401430966561f5992049c9faf077c1', ref: el => (this.controlsRef = el), controls: this.controls, isUtilityPanelVisible: this.isUtilityPanelVisible, style: this.isControlsVisible ? { display: 'flex' } : { display: 'none' }, onIsControlsReady: () => (this.isControlsReady = true) })));
+        return (h(Host, { key: 'f2fa7efff5baf4df8a9b2100b96e1546731b006b' }, h("kritzel-engine", { key: 'd4fc5d1b0827656119b14c9e2971818904f41c3f', ref: el => (this.engineRef = el), onIsEngineReady: () => (this.isEngineReady = true), scaleMax: this.scaleMax, scaleMin: this.scaleMin, globalContextMenuItems: this.globalContextMenuItems, objectContextMenuItems: this.objectContextMenuItems }), h("kritzel-controls", { key: 'd5f3a9b3d23090bbc8f36b8f974226697868988d', ref: el => (this.controlsRef = el), controls: this.controls, isUtilityPanelVisible: this.isUtilityPanelVisible, style: this.isControlsVisible ? { display: 'flex' } : { display: 'none' }, onIsControlsReady: () => (this.isControlsReady = true) })));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
@@ -858,21 +858,27 @@ class KritzelViewport {
     }
     handlePointerMove(event) {
         if (event.pointerType === 'mouse') {
-            const adjustedClientX = event.clientX - this._store.offsetX;
-            const adjustedClientY = event.clientY - this._store.offsetY;
-            this._store.state.cursorX = adjustedClientX;
-            this._store.state.cursorY = adjustedClientY;
+            const hostRect = this._store.state.host.getBoundingClientRect();
+            const xRelativeToHost = event.clientX - hostRect.left;
+            const yRelativeToHost = event.clientY - hostRect.top;
+            this._store.state.pointerX = (xRelativeToHost - this._store.state.translateX) / this._store.state.scale;
+            this._store.state.pointerY = (yRelativeToHost - this._store.state.translateY) / this._store.state.scale;
             if (this._store.state.isPanning) {
-                this._store.state.translateX -= this._store.state.startX - adjustedClientX;
-                this._store.state.translateY -= this._store.state.startY - adjustedClientY;
-                this._store.state.startX = adjustedClientX;
-                this._store.state.startY = adjustedClientY;
+                this._store.state.translateX -= this._store.state.startX - xRelativeToHost;
+                this._store.state.translateY -= this._store.state.startY - yRelativeToHost;
+                this._store.state.startX = xRelativeToHost;
+                this._store.state.startY = yRelativeToHost;
                 this._store.state.hasViewportChanged = true;
                 this._store.state.skipContextMenu = true;
                 this._store.rerender();
             }
         }
         if (event.pointerType === 'touch') {
+            const hostRect = this._store.state.host.getBoundingClientRect();
+            const xRelativeToHost = event.clientX - hostRect.left;
+            const yRelativeToHost = event.clientY - hostRect.top;
+            this._store.state.pointerX = (xRelativeToHost - this._store.state.translateX) / this._store.state.scale;
+            this._store.state.pointerY = (yRelativeToHost - this._store.state.translateY) / this._store.state.scale;
             const activePointers = Array.from(this._store.state.pointers.values());
             if (activePointers.length === 2) {
                 const firstTouchX = activePointers[0].clientX - this._store.offsetX;
@@ -926,13 +932,15 @@ class KritzelViewport {
     }
     handleZoom(event) {
         const rect = this._store.state.host.getBoundingClientRect();
-        this._store.state.cursorX = event.clientX - rect.left;
-        this._store.state.cursorY = event.clientY - rect.top;
+        const xRelativeToHost = event.clientX - rect.left;
+        const yRelativeToHost = event.clientY - rect.top;
+        this._store.state.pointerX = (xRelativeToHost - this._store.state.translateX) / this._store.state.scale;
+        this._store.state.pointerY = (yRelativeToHost - this._store.state.translateY) / this._store.state.scale;
         const delta = event.deltaY > 0 ? -this._store.state.scaleStep * this._store.state.scale : this._store.state.scaleStep * this._store.state.scale;
         const newScale = Math.min(this._store.state.scaleMax, Math.max(this._store.state.scaleMin, this._store.state.scale + delta));
         const scaleRatio = newScale / this._store.state.scale;
-        const translateXAdjustment = (this._store.state.cursorX - this._store.state.translateX) * (scaleRatio - 1);
-        const translateYAdjustment = (this._store.state.cursorY - this._store.state.translateY) * (scaleRatio - 1);
+        const translateXAdjustment = (xRelativeToHost - this._store.state.translateX) * (scaleRatio - 1);
+        const translateYAdjustment = (yRelativeToHost - this._store.state.translateY) * (scaleRatio - 1);
         this._store.state.scale = newScale;
         this._store.state.translateX -= translateXAdjustment;
         this._store.state.translateY -= translateYAdjustment;
@@ -1030,19 +1038,7 @@ class KritzelHistory {
     }
     executeCommand(command) {
         if (this._store.state.hasViewportChanged) {
-            const command = new UpdateViewportCommand(this._store, this, this.previousViewport);
-            command.execute();
-            this.undoStack.add(command);
-            if (this.redoStack.isEmpty() === false) {
-                this.redoStack.clear();
-            }
-            this._store.state.hasViewportChanged = false;
-            this.previousViewport = {
-                scale: this._store.state.scale,
-                scaleStep: this._store.state.scaleStep,
-                translateX: this._store.state.translateX,
-                translateY: this._store.state.translateY,
-            };
+            this.addUpdateViewportCommand();
         }
         command.execute();
         if (this._store.state.debugInfo.logCommands)
@@ -1080,6 +1076,21 @@ class KritzelHistory {
         }
         this._store.rerender();
     }
+    addUpdateViewportCommand() {
+        const command = new UpdateViewportCommand(this._store, this, this.previousViewport);
+        command.execute();
+        this.undoStack.add(command);
+        if (this.redoStack.isEmpty() === false) {
+            this.redoStack.clear();
+        }
+        this._store.state.hasViewportChanged = false;
+        this.previousViewport = {
+            scale: this._store.state.scale,
+            scaleStep: this._store.state.scaleStep,
+            translateX: this._store.state.translateX,
+            translateY: this._store.state.translateY,
+        };
+    }
 }
 
 class KritzelOctree {
@@ -1257,8 +1268,8 @@ const DEFAULT_ENGINE_STATE = {
         logCommands: false,
     },
     host: null,
-    cursorX: 0,
-    cursorY: 0,
+    pointerX: 0,
+    pointerY: 0,
     scale: 1,
     scaleMax: 1,
     scaleMin: 1,
@@ -1293,7 +1304,7 @@ class KritzelStore {
         return this._state.objectsOctree.allObjects();
     }
     get selectedObjects() {
-        return this.allObjects.filter(o => !(o instanceof KritzelSelectionGroup)).filter(o => o.selected);
+        return this.allObjects.filter(o => !(o instanceof KritzelSelectionGroup)).filter(o => o.isSelected);
     }
     get offsetX() {
         return this._state.host.getBoundingClientRect().left;
@@ -1384,7 +1395,7 @@ class KritzelStore {
         this.state.copiedObjects = this.state.selectionGroup.copy();
     }
     paste(x, y) {
-        this.state.copiedObjects.selected = true;
+        this.state.copiedObjects.isSelected = true;
         const adjustedX = x !== undefined ? x : this.state.copiedObjects.translateX + 25;
         const adjustedY = y !== undefined ? y : this.state.copiedObjects.translateY + 25;
         this.state.copiedObjects.updatePosition(adjustedX, adjustedY);
@@ -1444,10 +1455,10 @@ class KritzelStore {
         }
         const selectionGroup = KritzelSelectionGroup.create(this);
         objects.forEach(obj => {
-            obj.selected = false;
+            obj.isSelected = false;
             selectionGroup.addOrRemove(obj);
         });
-        selectionGroup.selected = true;
+        selectionGroup.isSelected = true;
         this.state.selectionGroup = selectionGroup;
         if (objects.length === 1) {
             selectionGroup.rotation = selectionGroup.objects[0].rotation;
@@ -1468,10 +1479,10 @@ class KritzelStore {
         if (objectsInViewport.length > 0) {
             const selectionGroup = KritzelSelectionGroup.create(this);
             objectsInViewport.forEach(obj => {
-                obj.selected = false;
+                obj.isSelected = false;
                 selectionGroup.addOrRemove(obj);
             });
-            selectionGroup.selected = true;
+            selectionGroup.isSelected = true;
             this.state.isSelecting = false;
             if (objectsInViewport.length === 1) {
                 selectionGroup.rotation = selectionGroup.objects[0].rotation;
@@ -1512,6 +1523,45 @@ class KritzelStore {
         }
         return null;
     }
+    getObjectsFromPointerEvent(event, selector = '.object') {
+        var _a;
+        const shadowRoot = (_a = this.state.host) === null || _a === void 0 ? void 0 : _a.shadowRoot;
+        if (!shadowRoot)
+            return [];
+        const clientX = event.clientX;
+        const clientY = event.clientY;
+        const elementsAtPoint = shadowRoot.elementsFromPoint(clientX, clientY);
+        if (!elementsAtPoint || elementsAtPoint.length === 0)
+            return [];
+        const objectIds = new Set();
+        elementsAtPoint.forEach(element => {
+            const selectedObject = element.closest(selector);
+            if (selectedObject && selectedObject.id) {
+                objectIds.add(selectedObject.id);
+            }
+        });
+        if (objectIds.size > 0) {
+            return this.allObjects.filter(object => objectIds.has(object.id)).sort((a, b) => b.zIndex - a.zIndex);
+        }
+        return [];
+    }
+    getCanvasPoint(event) {
+        if (!this.state.host) {
+            return { x: 0, y: 0 };
+        }
+        // Get the position of the kritzel-engine host element relative to the viewport
+        const hostRect = this.state.host.getBoundingClientRect();
+        // 1. Make the pointer coordinates relative to the host element
+        const xRelativeToHost = event.clientX - hostRect.left;
+        const yRelativeToHost = event.clientY - hostRect.top;
+        // 2. Reverse the translation applied to the #origin div
+        const xWithoutTranslate = xRelativeToHost - this.state.translateX;
+        const yWithoutTranslate = yRelativeToHost - this.state.translateY;
+        // 3. Reverse the scaling to get the final world coordinates
+        const worldX = xWithoutTranslate / this.state.scale;
+        const worldY = yWithoutTranslate / this.state.scale;
+        return { x: worldX, y: worldY };
+    }
 }
 
 class KritzelKeyHandler extends KritzelBaseHandler {
@@ -1610,7 +1660,7 @@ class KritzelContextMenuHandler extends KritzelBaseHandler {
         if (selectedObject && !(selectedObject instanceof KritzelSelectionGroup)) {
             this._store.state.selectionGroup = KritzelSelectionGroup.create(this._store);
             this._store.state.selectionGroup.addOrRemove(selectedObject);
-            this._store.state.selectionGroup.selected = true;
+            this._store.state.selectionGroup.isSelected = true;
             this._store.state.selectionGroup.rotation = selectedObject.rotation;
             this._store.state.isSelecting = false;
             this._store.history.executeCommand(new AddSelectionGroupCommand(this._store, this, this._store.state.selectionGroup));
@@ -1925,15 +1975,15 @@ const KritzelEngine = class {
         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: '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: {
+        return (h(Host, { key: 'a8e6c284c98509ddd158686887d656d3907d40a2' }, h("div", { key: '3935b658e8859f746a5faef0bb91a527b68fcd3e', class: "debug-panel", style: { display: this.store.state.debugInfo.showViewportInfo ? 'block' : 'none' } }, h("div", { key: '12c190c7ea99ac69310b27e719e7df8392b2b46e' }, "TranslateX: ", (_a = this.store.state) === null || _a === void 0 ? void 0 :
+            _a.translateX), h("div", { key: '4c98deccc2a029dab06ed76e5af426f4a05c7b66' }, "TranslateY: ", (_b = this.store.state) === null || _b === void 0 ? void 0 :
+            _b.translateY), h("div", { key: '1330191a39c7795f17a6adcc4fbd05e2d6a24d43' }, "ViewportWidth: ", (_c = this.store.state) === null || _c === void 0 ? void 0 :
+            _c.viewportWidth), h("div", { key: '1ee59427037357ee6bf746a094285426eb0e6a58' }, "ViewportHeight: ", (_d = this.store.state) === null || _d === void 0 ? void 0 :
+            _d.viewportHeight), h("div", { key: '1e68312e8516f25dcff34e9f9f70b90f426b8711' }, "ObjectsInViewport. ", this.store.objects.length), h("div", { key: '1d7cea9e21d9b744d8eaac29286528829143b4fa' }, "Scale: ", (_e = this.store.state) === null || _e === void 0 ? void 0 :
+            _e.scale), h("div", { key: '0b60168fbd55aefa3714067bace80f167b8bcac0' }, "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: '109752df6a77633d89929f325d296f96d27d7aa9' }, "HasViewportChanged: ", ((_h = this.store.state) === null || _h === void 0 ? void 0 : _h.hasViewportChanged) ? 'true' : 'false'), h("div", { key: 'b35466caf465b490c5d448d694353186ff902f09' }, "IsEnabled: ", ((_j = this.store.state) === null || _j === void 0 ? void 0 : _j.isEnabled) ? 'true' : 'false'), h("div", { key: '5df20e47f3bf234f04eea001b0a0abaf57946498' }, "IsScaling: ", ((_k = this.store.state) === null || _k === void 0 ? void 0 : _k.isScaling) ? 'true' : 'false'), h("div", { key: '9d1ec8b8268488821a968e109fa279393977fdf8' }, "IsPanning: ", ((_l = this.store.state) === null || _l === void 0 ? void 0 : _l.isPanning) ? 'true' : 'false'), h("div", { key: '92fa98b7fa3bf877c4fffaca70683d2d908f5177' }, "IsFocused: ", this.store.state.isFocused ? 'true' : 'false'), h("div", { key: '708d02459c1e3907dd88a2f2fd8916c1ee684cf1' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), h("div", { key: '27f45c1b6ee0b6bd0b3301a9c09b9198de722ac4' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), h("div", { key: '50d4476aecfc00d12bae7d8a3880ccb8de82fe68' }, "IsResizeHandleSelected: ", this.store.state.isResizeHandleSelected ? 'true' : 'false'), h("div", { key: '0c582e97ee1535b4a14b75b7ef15373c43f21c4b' }, "IsRotationHandleSelected: ", this.store.state.isRotationHandleSelected ? 'true' : 'false'), h("div", { key: '7a8378ac991d17d0eaaba5fbd519875197903a39' }, "IsDrawing: ", this.store.state.isDrawing ? 'true' : 'false'), h("div", { key: '00b56f11ffd16f7b9049d2857f5f7effceba1294' }, "IsWriting: ", this.store.state.isWriting ? 'true' : 'false'), h("div", { key: '3b7773194bd6bc8b8b2d024afc768f4e9fbb54c6' }, "PointerX: ", (_m = this.store.state) === null || _m === void 0 ? void 0 :
+            _m.pointerX), h("div", { key: 'a2b2c96f6180591082a5aee20cc3e82236dac520' }, "PointerY: ", (_o = this.store.state) === null || _o === void 0 ? void 0 :
+            _o.pointerY)), h("div", { key: '309eb61fff5182b5076cb3886bbd79006efc30b1', id: "origin", 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 => {
@@ -1957,17 +2007,17 @@ const KritzelEngine = class {
                         borderStyle: 'solid',
                         padding: object.padding + 'px',
                         overflow: 'visible',
-                    } }, KritzelClassHelper.isInstanceOf(object, 'KritzelPath') && (h("svg", { ref: el => object.mount(el), xmlns: "http://www.w3.org/2000/svg", style: {
+                    } }, KritzelClassHelper.isInstanceOf(object, 'KritzelPath') && (h("svg", { ref: el => el ? object.mount(el) : object.unmount(), xmlns: "http://www.w3.org/2000/svg", style: {
                         height: object === null || object === void 0 ? void 0 : object.height.toString(),
                         width: object === null || object === void 0 ? void 0 : object.width.toString(),
                         position: 'absolute',
                         overflow: 'visible',
-                    }, viewBox: object === null || object === void 0 ? void 0 : object.viewBox }, h("path", { d: object === null || object === void 0 ? void 0 : object.d, fill: object.fill, stroke: object === null || object === void 0 ? void 0 : object.stroke }))), KritzelClassHelper.isInstanceOf(object, 'KritzelImage') && (h("img", { ref: el => object.mount(el), src: object.src, style: {
+                    }, viewBox: object === null || object === void 0 ? void 0 : object.viewBox }, h("path", { d: object === null || object === void 0 ? void 0 : object.d, fill: object.fill, stroke: object === null || object === void 0 ? void 0 : object.stroke }))), KritzelClassHelper.isInstanceOf(object, 'KritzelImage') && (h("img", { ref: el => el ? object.mount(el) : object.unmount(), src: object.src, style: {
                         width: '100%',
                         height: '100%',
                         userSelect: 'none',
                         pointerEvents: 'none',
-                    }, draggable: false, onDragStart: e => e.preventDefault() })), KritzelClassHelper.isInstanceOf(object, 'KritzelText') && (h("textarea", { ref: el => object.mount(el), value: object.value, onKeyDown: event => object.handleKeyDown(event), onInput: event => object.handleInput(event), rows: object.rows, style: {
+                    }, draggable: false, onDragStart: e => e.preventDefault() })), KritzelClassHelper.isInstanceOf(object, 'KritzelText') && (h("textarea", { ref: el => el ? object.mount(el) : object.unmount(), value: object.value, onKeyDown: event => object.handleKeyDown(event), onInput: event => object.handleInput(event), rows: object.rows, style: {
                         width: '100%',
                         height: '100%',
                         color: object.fontColor,
@@ -1983,54 +2033,60 @@ const KritzelEngine = class {
                         pointerEvents: object.isReadonly ? 'none' : 'auto',
                         cursor: object.isReadonly ? 'default' : 'text',
                         caretColor: object.isReadonly ? 'transparent' : 'auto',
-                    } })), KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionGroup') && (h("div", { ref: el => object.mount(el), style: {
+                    } })), KritzelClassHelper.isInstanceOf(object, 'KritzelCustomElement') && (h("div", { ref: el => el ? object.mount(el) : object.unmount(), style: {
+                        width: '100%',
+                        height: '100%',
+                        pointerEvents: 'auto',
+                        overflow: 'hidden',
+                        display: 'block',
+                    } })), KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionGroup') && (h("div", { ref: el => el ? object.mount(el) : object.unmount(), style: {
                         width: '100%',
                         height: '100%',
-                    } })), KritzelClassHelper.isInstanceOf(object, 'KrtizelSelectionBox') && (h("div", { ref: el => object.mount(el), style: {
+                    } })), KritzelClassHelper.isInstanceOf(object, 'KrtizelSelectionBox') && (h("div", { ref: el => el ? object.mount(el) : object.unmount(), style: {
                         width: '100%',
                         height: '100%',
                     } }))), h("line", { x1: "0", y1: "0", x2: object.totalWidth, y2: "0", style: {
                         stroke: 'var(--kritzel-selection-border-color, #0e1111)',
                         strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${(_b = this.store.state) === null || _b === void 0 ? void 0 : _b.scale})`,
                         strokeLinecap: 'square',
-                    }, visibility: object.selected ? 'visible' : 'hidden' }), h("line", { x1: "0", y1: "0", x2: "0", y2: object.totalHeight, style: {
+                    }, visibility: object.isSelected ? 'visible' : 'hidden' }), h("line", { x1: "0", y1: "0", x2: "0", y2: object.totalHeight, style: {
                         stroke: 'var(--kritzel-selection-border-color, #0e1111)',
                         strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${(_c = this.store.state) === null || _c === void 0 ? void 0 : _c.scale})`,
                         strokeLinecap: 'square',
-                    }, visibility: object.selected ? 'visible' : 'hidden' }), h("line", { x1: "0", y1: object.totalHeight, x2: object.totalWidth, y2: object.totalHeight, style: {
+                    }, visibility: object.isSelected ? 'visible' : 'hidden' }), h("line", { x1: "0", y1: object.totalHeight, x2: object.totalWidth, y2: object.totalHeight, style: {
                         stroke: 'var(--kritzel-selection-border-color, #0e1111)',
                         strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${(_d = this.store.state) === null || _d === void 0 ? void 0 : _d.scale})`,
                         strokeLinecap: 'square',
-                    }, visibility: object.selected ? 'visible' : 'hidden' }), h("line", { x1: object.totalWidth, y1: "0", x2: object.totalWidth, y2: object.totalHeight, style: {
+                    }, visibility: object.isSelected ? 'visible' : 'hidden' }), h("line", { x1: object.totalWidth, y1: "0", x2: object.totalWidth, y2: object.totalHeight, style: {
                         stroke: 'var(--kritzel-selection-border-color, #0e1111)',
                         strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${(_e = this.store.state) === null || _e === void 0 ? void 0 : _e.scale})`,
                         strokeLinecap: 'square',
-                    }, visibility: object.selected ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle top-left", cx: "0", cy: "0", r: `${(baseHandleSize * object.scale) / ((_f = this.store.state) === null || _f === void 0 ? void 0 : _f.scale)}`, style: {
+                    }, visibility: object.isSelected ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle top-left", cx: "0", cy: "0", r: `${(baseHandleSize * object.scale) / ((_f = this.store.state) === null || _f === void 0 ? void 0 : _f.scale)}`, style: {
                         fill: 'var(--kritzel-selection-handle-color, #000000)',
-                    }, visibility: object.selected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle-overlay top-left", cx: "0", cy: "0", r: `${(baseHandleTouchSize * object.scale) / ((_g = this.store.state) === null || _g === void 0 ? void 0 : _g.scale)}`, style: {
+                    }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle-overlay top-left", cx: "0", cy: "0", r: `${(baseHandleTouchSize * object.scale) / ((_g = this.store.state) === null || _g === void 0 ? void 0 : _g.scale)}`, style: {
                         fill: 'transparent',
-                    }, visibility: object.selected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle top-right", cx: object.totalWidth, cy: "0", r: `${(baseHandleSize * object.scale) / ((_h = this.store.state) === null || _h === void 0 ? void 0 : _h.scale)}`, style: {
+                    }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle top-right", cx: object.totalWidth, cy: "0", r: `${(baseHandleSize * object.scale) / ((_h = this.store.state) === null || _h === void 0 ? void 0 : _h.scale)}`, style: {
                         fill: 'var(--kritzel-selection-handle-color, #000000)',
-                    }, visibility: object.selected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle-overlay top-right", cx: object.totalWidth, cy: "0", r: `${(baseHandleTouchSize * object.scale) / ((_j = this.store.state) === null || _j === void 0 ? void 0 : _j.scale)}`, style: {
+                    }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle-overlay top-right", cx: object.totalWidth, cy: "0", r: `${(baseHandleTouchSize * object.scale) / ((_j = this.store.state) === null || _j === void 0 ? void 0 : _j.scale)}`, style: {
                         fill: 'transparent',
-                    }, visibility: object.selected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle bottom-left", cx: "0", cy: object.totalHeight, r: `${(baseHandleSize * object.scale) / ((_k = this.store.state) === null || _k === void 0 ? void 0 : _k.scale)}`, style: {
+                    }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle bottom-left", cx: "0", cy: object.totalHeight, r: `${(baseHandleSize * object.scale) / ((_k = this.store.state) === null || _k === void 0 ? void 0 : _k.scale)}`, style: {
                         fill: 'var(--kritzel-selection-handle-color, #000000)',
-                    }, visibility: object.selected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle-overlay bottom-left", cx: "0", cy: object.totalHeight, r: `${(baseHandleTouchSize * object.scale) / ((_l = this.store.state) === null || _l === void 0 ? void 0 : _l.scale)}`, style: {
+                    }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle-overlay bottom-left", cx: "0", cy: object.totalHeight, r: `${(baseHandleTouchSize * object.scale) / ((_l = this.store.state) === null || _l === void 0 ? void 0 : _l.scale)}`, style: {
                         fill: 'transparent',
-                    }, visibility: object.selected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle bottom-right", cx: object.totalWidth, cy: object.totalHeight, r: `${(baseHandleSize * object.scale) / ((_m = this.store.state) === null || _m === void 0 ? void 0 : _m.scale)}`, style: {
+                    }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle bottom-right", cx: object.totalWidth, cy: object.totalHeight, r: `${(baseHandleSize * object.scale) / ((_m = this.store.state) === null || _m === void 0 ? void 0 : _m.scale)}`, style: {
                         fill: 'var(--kritzel-selection-handle-color, #000000)',
-                    }, visibility: object.selected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle-overlay bottom-right", cx: object.totalWidth, cy: object.totalHeight, r: `${(baseHandleTouchSize * object.scale) / ((_o = this.store.state) === null || _o === void 0 ? void 0 : _o.scale)}`, style: {
+                    }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle-overlay bottom-right", cx: object.totalWidth, cy: object.totalHeight, r: `${(baseHandleTouchSize * object.scale) / ((_o = this.store.state) === null || _o === void 0 ? void 0 : _o.scale)}`, style: {
                         fill: 'transparent',
-                    }, visibility: object.selected && !this.isSelecting ? 'visible' : 'hidden' }), h("line", { x1: object.totalWidth / 2, y1: "0", x2: object.totalWidth / 2, y2: -((15 * object.scale) / ((_p = this.store.state) === null || _p === void 0 ? void 0 : _p.scale)), style: {
+                    }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("line", { x1: object.totalWidth / 2, y1: "0", x2: object.totalWidth / 2, y2: -((15 * object.scale) / ((_p = this.store.state) === null || _p === void 0 ? void 0 : _p.scale)), style: {
                         stroke: 'var(--kritzel-selection-border-color, #0e1111)',
                         strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${(_q = this.store.state) === null || _q === void 0 ? void 0 : _q.scale})`,
-                    }, visibility: object.selected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "rotation-handle", cx: object.totalWidth / 2, cy: -((15 * object.scale) / ((_r = this.store.state) === null || _r === void 0 ? void 0 : _r.scale)), r: `${(baseHandleSize * object.scale) / ((_s = this.store.state) === null || _s === void 0 ? void 0 : _s.scale)}`, style: {
+                    }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "rotation-handle", cx: object.totalWidth / 2, cy: -((15 * object.scale) / ((_r = this.store.state) === null || _r === void 0 ? void 0 : _r.scale)), r: `${(baseHandleSize * object.scale) / ((_s = this.store.state) === null || _s === void 0 ? void 0 : _s.scale)}`, style: {
                         fill: 'var(--kritzel-selection-handle-color, #000000)',
-                    }, visibility: object.selected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "rotation-handle-overlay", cx: object.totalWidth / 2, cy: -((15 * object.scale) / ((_t = this.store.state) === null || _t === void 0 ? void 0 : _t.scale)), r: `${(baseHandleTouchSize * object.scale) / ((_u = this.store.state) === null || _u === void 0 ? void 0 : _u.scale)}`, style: {
+                    }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "rotation-handle-overlay", cx: object.totalWidth / 2, cy: -((15 * object.scale) / ((_t = this.store.state) === null || _t === void 0 ? void 0 : _t.scale)), r: `${(baseHandleTouchSize * object.scale) / ((_u = this.store.state) === null || _u === void 0 ? void 0 : _u.scale)}`, style: {
                         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: '4fd9e58c617eaf428edbdc3491d3f4fabe3ce564', class: "object", xmlns: "http://www.w3.org/2000/svg", style: {
+                    }, visibility: object.isSelected && !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.isDebugInfoVisible ? '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: '2bd19129a4d4d8334273c221aaa039c562240883', 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',
@@ -2040,7 +2096,7 @@ const KritzelEngine = class {
                 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: '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: '8dc7ef8180a94bc1b4bf25c969574421ca4d0c4e', 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: {
+            }, viewBox: (_y = this.store.state.currentPath) === null || _y === void 0 ? void 0 : _y.viewBox }, h("path", { key: '327c40e8bd4f838172808fb6ffc6a4f7971ebd63', 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: '933c55feabc4ae7ac13dffab763c931763e88a7f', 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`,
@@ -2052,7 +2108,7 @@ const KritzelEngine = class {
                     y: (-this.store.state.translateY + this.store.state.contextMenuY) / this.store.state.scale,
                 }, (_a = this.store.state.selectionGroup) === null || _a === void 0 ? void 0 : _a.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: 'c4cd252caaae9e0b1f8f2dd6a669cf4c24154e17', store: this.store })));
+            } })), ((_3 = this.store.state) === null || _3 === void 0 ? void 0 : _3.activeTool) instanceof KritzelEraserTool && !this.store.state.isScaling && h("kritzel-cursor-trail", { key: '0fa1c51dd63156d26b21b9b443c471cf2014351c', store: this.store })));
     }
     get host() { return getElement(this); }
     static get watchers() { return {