kritzel-stencil 0.0.121 → 0.0.123

package/dist/components/{p-q-xqpmae.js → p-DJaVT2yR.js}

@@ -1,9 +1,9 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-dCaxwGmu.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-DJN0U8pI.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-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';
+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-Cnc43o9b.js';
+import { K as KritzelContextMenu, d as defineCustomElement$3 } from './p-BY8BWGge.js';
+import { d as defineCustomElement$2 } from './p-Cw2ATHMj.js';
+import { d as defineCustomElement$1 } from './p-CtiROna-.js';
 
 class KritzelImage extends KritzelBaseObject {
     constructor(config) {
@@ -13,7 +13,7 @@ class KritzelImage extends KritzelBaseObject {
         this.maxWidth = 300;
         this.maxHeight = 300;
         this.maxCompressionSize = 300;
-        this.debugInfoVisible = true;
+        this.isDebugInfoVisible = 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;
@@ -70,6 +70,57 @@ class BatchCommand extends KritzelBaseCommand {
     }
 }
 
+class KritzelCustomElement extends KritzelBaseObject {
+    constructor(config) {
+        super();
+        this.__class__ = 'KritzelCustomElement';
+        this.isInteractive = true;
+        if (config) {
+            this.translateX = config.translateX || 0;
+            this.translateY = config.translateY || 0;
+            this.scale = config.scale || 1;
+            this.element = config.element;
+            this.height = config.height || 0;
+            this.width = config.width || 0;
+        }
+    }
+    static create(store, config) {
+        const object = new KritzelCustomElement(config);
+        object._store = store;
+        object.id = object.generateId();
+        return object;
+    }
+    mount(element) {
+        if (this.isMounted) {
+            return;
+        }
+        this.elementRef = element;
+        this.isMounted = true;
+        this.elementRef.appendChild(this.element);
+    }
+    resize(x, y, width, height) {
+        if (width <= 1 || height <= 1) {
+            return;
+        }
+        this.width = width;
+        this.height = height;
+        this.translateX = x;
+        this.translateY = y;
+        if (this.element) {
+            this.element.style.width = `${width}px`;
+            this.element.style.height = `${height}px`;
+        }
+    }
+    copy() {
+        const copiedObject = Object.create(Object.getPrototypeOf(this));
+        Object.assign(copiedObject, this);
+        copiedObject.id = this.generateId();
+        copiedObject.isMounted = false;
+        copiedObject.element = this.element.cloneNode(true);
+        return copiedObject;
+    }
+}
+
 class RemoveObjectCommand extends KritzelBaseCommand {
     constructor(store, initiator, object) {
         super(store, initiator);
@@ -77,9 +128,11 @@ class RemoveObjectCommand extends KritzelBaseCommand {
     }
     execute() {
         this._store.state.objectsOctree.remove(object => object.id === this.object.id);
+        this._store.state.objectsOctree.filter(object => object instanceof KritzelCustomElement).forEach(object => object.remount());
     }
     undo() {
         this._store.state.objectsOctree.insert(this.object);
+        this._store.state.objectsOctree.filter(object => object instanceof KritzelCustomElement).forEach(object => object.remount());
     }
 }
 
@@ -103,28 +156,33 @@ class KritzelEraserTool extends KritzelBaseTool {
         }
     }
     handlePointerMove(event) {
-        var _a, _b;
+        var _a;
         if (event.pointerType === 'mouse') {
             if (this._store.state.isErasing) {
-                const shadowRoot = (_a = this._store.state.host) === null || _a === void 0 ? void 0 : _a.shadowRoot;
-                if (!shadowRoot)
+                const selectedObjects = this._store.getObjectsFromPointerEvent(event, '.object');
+                if (selectedObjects.length === 0)
                     return;
-                const selectedObject = this._store.getObjectFromPointerEvent(event, '.object');
-                if (!selectedObject)
-                    return;
-                selectedObject.markedForRemoval = true;
+                const x = this._store.state.pointerX;
+                const y = this._store.state.pointerY;
+                selectedObjects.forEach(selectedObject => {
+                    selectedObject.markedForRemoval = selectedObject.hitTest(x, y);
+                });
                 this._store.rerender();
             }
         }
         if (event.pointerType === 'touch') {
             if (this._store.state.pointers.size === 1 && this._store.state.isErasing) {
-                const shadowRoot = (_b = this._store.state.host) === null || _b === void 0 ? void 0 : _b.shadowRoot;
+                const shadowRoot = (_a = this._store.state.host) === null || _a === void 0 ? void 0 : _a.shadowRoot;
                 if (!shadowRoot)
                     return;
-                const selectedObject = this._store.getObjectFromPointerEvent(event, '.object');
-                if (!selectedObject)
+                const selectedObjects = this._store.getObjectsFromPointerEvent(event, '.object');
+                if (selectedObjects.length === 0)
                     return;
-                selectedObject.markedForRemoval = true;
+                const x = this._store.state.pointerX;
+                const y = this._store.state.pointerY;
+                selectedObjects.forEach(selectedObject => {
+                    selectedObject.markedForRemoval = selectedObject.hitTest(x, y);
+                });
                 this._store.rerender();
             }
         }
@@ -132,9 +190,7 @@ class KritzelEraserTool extends KritzelBaseTool {
     handlePointerUp(event) {
         if (event.pointerType === 'mouse') {
             if (this._store.state.isErasing) {
-                const removeCommands = this._store.allObjects
-                    .filter(object => object.markedForRemoval)
-                    .map(object => {
+                const removeCommands = this._store.allObjects.filter(object => object.markedForRemoval).map(object => {
                     object.markedForRemoval = false;
                     return new RemoveObjectCommand(this._store, this, object);
                 });
@@ -217,7 +273,7 @@ class KritzelMoveHandler extends KritzelBaseHandler {
         var _a, _b;
         if (event.pointerType === 'mouse') {
             if (KritzelEventHelper.isLeftClick(event)) {
-                if (((_a = this._store.state.selectionGroup) === null || _a === void 0 ? void 0 : _a.selected) && !this._store.state.isResizeHandleSelected && !this._store.state.isRotationHandleSelected) {
+                if (((_a = this._store.state.selectionGroup) === null || _a === void 0 ? void 0 : _a.isSelected) && !this._store.state.isResizeHandleSelected && !this._store.state.isRotationHandleSelected) {
                     const clientX = event.clientX - this._store.offsetX;
                     const clientY = event.clientY - this._store.offsetY;
                     this._store.state.isDragging = true;
@@ -231,7 +287,7 @@ class KritzelMoveHandler extends KritzelBaseHandler {
         if (event.pointerType === 'touch') {
             const activePointers = Array.from(this._store.state.pointers.values());
             if (this._store.state.pointers.size === 1) {
-                if (((_b = this._store.state.selectionGroup) === null || _b === void 0 ? void 0 : _b.selected) && !this._store.state.isResizeHandleSelected && !this._store.state.isRotationHandleSelected) {
+                if (((_b = this._store.state.selectionGroup) === null || _b === void 0 ? void 0 : _b.isSelected) && !this._store.state.isResizeHandleSelected && !this._store.state.isRotationHandleSelected) {
                     const x = Math.round(activePointers[0].clientX - this._store.offsetX);
                     const y = Math.round(activePointers[0].clientY - this._store.offsetY);
                     this.dragStartX = x;
@@ -583,59 +639,6 @@ class KritzelRotationHandler extends KritzelBaseHandler {
     }
 }
 
-class KritzelGeometryHelper {
-    static doPolygonsIntersect(polygon1, polygon2) {
-        // 1. Convert polygons to array of points for easier processing
-        const points1 = [polygon1.bottomLeft, polygon1.bottomRight, polygon1.topRight, polygon1.topLeft];
-        const points2 = [polygon2.bottomLeft, polygon2.bottomRight, polygon2.topRight, polygon2.topLeft];
-        // 2. Check if any point of polygon1 is inside polygon2
-        for (const point of points1) {
-            if (this.isPointInPolygon(point, points2)) {
-                return true;
-            }
-        }
-        // 3. Check if any point of polygon2 is inside polygon1
-        for (const point of points2) {
-            if (this.isPointInPolygon(point, points1)) {
-                return true;
-            }
-        }
-        // 4. Check for edge intersections (more complex)
-        for (let i = 0; i < points1.length; i++) {
-            const p1a = points1[i];
-            const p1b = points1[(i + 1) % points1.length]; // Wrap around to the first point
-            for (let j = 0; j < points2.length; j++) {
-                const p2a = points2[j];
-                const p2b = points2[(j + 1) % points2.length];
-                if (this.intersectLines(p1a, p1b, p2a, p2b)) {
-                    return true;
-                }
-            }
-        }
-        return false; // No intersection found
-    }
-    static isPointInPolygon(point, polygon) {
-        let inside = false;
-        for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
-            const xi = polygon[i].x, yi = polygon[i].y;
-            const xj = polygon[j].x, yj = polygon[j].y;
-            const intersect = yi > point.y !== yj > point.y && point.x < ((xj - xi) * (point.y - yi)) / (yj - yi) + xi;
-            if (intersect)
-                inside = !inside;
-        }
-        return inside;
-    }
-    static intersectLines(p1a, p1b, p2a, p2b) {
-        const det = (p1b.x - p1a.x) * (p2b.y - p2a.y) - (p1b.y - p1a.y) * (p2b.x - p2a.x);
-        if (det === 0) {
-            return false; // Lines are parallel
-        }
-        const t = ((p2a.x - p1a.x) * (p2b.y - p2a.y) - (p2a.y - p1a.y) * (p2b.x - p2a.x)) / det;
-        const u = -((p1a.x - p2a.x) * (p1b.y - p1a.y) - (p1a.y - p2a.y) * (p1b.x - p1a.x)) / det;
-        return t >= 0 && t <= 1 && u >= 0 && u <= 1;
-    }
-}
-
 class KrtizelSelectionBox extends KritzelBaseObject {
     constructor() {
         super(...arguments);
@@ -648,8 +651,8 @@ class KrtizelSelectionBox extends KritzelBaseObject {
         object.id = object.generateId();
         object.scale = store.state.scale;
         object.zIndex = 99999;
-        object.backgroundColor = 'var(--kritzel-selection-box-background-color, rgba(14, 17, 17, 0.2))';
-        object.borderColor = 'var(--kritzel-selection-box-border-color, rgba(14, 17, 17, 0.5))';
+        object.backgroundColor = 'var(--kritzel-selection-box-background-color, rgba(0, 122, 255, 0.2))';
+        object.borderColor = 'var(--kritzel-selection-box-border-color, rgba(0, 122, 255, 0.5))';
         object.borderWidth = 2;
         object.height = 0;
         object.width = 0;
@@ -726,8 +729,10 @@ class KritzelSelectionHandler extends KritzelBaseHandler {
         if (event.pointerType === 'mouse') {
             if (KritzelEventHelper.isLeftClick(event) && this._store.state.isSelecting) {
                 if (this.isSelectionClick) {
-                    this.updateMouseSelection(event);
-                    this.addSelectedObjectAtIndexToSelectionGroup(0);
+                    const x = this._store.state.pointerX;
+                    const y = this._store.state.pointerY;
+                    const selectedObject = this._store.getObjectsFromPointerEvent(event, '.object').find(obj => obj.hitTest(x, y));
+                    this.addObjectToSelectionGroup(selectedObject);
                     this.removeSelectionBox();
                 }
                 if (this.isSelectionDrag) {
@@ -741,8 +746,10 @@ class KritzelSelectionHandler extends KritzelBaseHandler {
             clearTimeout(this.touchStartTimeout);
             if (this._store.state.isSelecting) {
                 if (this.isSelectionClick) {
-                    this.updateTouchSelection();
-                    this.addSelectedObjectAtIndexToSelectionGroup(0);
+                    const x = this._store.state.pointerX;
+                    const y = this._store.state.pointerY;
+                    const selectedObject = this._store.getObjectsFromPointerEvent(event, '.object').find(obj => obj.hitTest(x, y));
+                    this.addObjectToSelectionGroup(selectedObject);
                     this.removeSelectionBox();
                 }
                 if (this.isSelectionDrag) {
@@ -836,23 +843,16 @@ class KritzelSelectionHandler extends KritzelBaseHandler {
     updateSelectedObjects() {
         this._store.allObjects
             .filter(o => !(o instanceof KrtizelSelectionBox))
-            .forEach(object => {
-            const objectPolygon = object.rotatedPolygon;
-            const selectionBoxPolygon = this._store.state.selectionBox.rotatedPolygon;
-            object.selected = KritzelGeometryHelper.doPolygonsIntersect(objectPolygon, selectionBoxPolygon);
-        });
+            .forEach(object => (object.isSelected = object.hitTestPolygon(this._store.state.selectionBox.rotatedPolygon)));
     }
-    addSelectedObjectAtIndexToSelectionGroup(index) {
-        const selectedObjects = this._store.selectedObjects.sort((a, b) => b.zIndex - a.zIndex);
-        const selectedObject = selectedObjects[index];
-        if (!selectedObject) {
+    addObjectToSelectionGroup(object) {
+        if (!object) {
             return;
         }
-        selectedObjects.forEach(o => (o.selected = false));
         this._store.state.selectionGroup = KritzelSelectionGroup.create(this._store);
-        this._store.state.selectionGroup.addOrRemove(selectedObject);
-        this._store.state.selectionGroup.selected = true;
-        this._store.state.selectionGroup.rotation = this._store.state.selectionGroup.objects[0].rotation;
+        this._store.state.selectionGroup.addOrRemove(object);
+        this._store.state.selectionGroup.isSelected = true;
+        this._store.state.selectionGroup.rotation = object.rotation;
         this._store.history.executeCommand(new AddSelectionGroupCommand(this._store, this, this._store.state.selectionGroup));
     }
     addSelectedObjectsToSelectionGroup() {
@@ -862,10 +862,10 @@ class KritzelSelectionHandler extends KritzelBaseHandler {
         }
         this._store.state.selectionGroup = KritzelSelectionGroup.create(this._store);
         selectedObjects.forEach(o => {
-            o.selected = false;
+            o.isSelected = false;
             this._store.state.selectionGroup.addOrRemove(o);
         });
-        this._store.state.selectionGroup.selected = true;
+        this._store.state.selectionGroup.isSelected = true;
         if (this._store.state.selectionGroup.length === 1) {
             this._store.state.selectionGroup.rotation = this._store.state.selectionGroup.objects[0].rotation;
         }
@@ -873,11 +873,31 @@ class KritzelSelectionHandler extends KritzelBaseHandler {
     }
 }
 
+class KritzelHoverHandler extends KritzelBaseHandler {
+    constructor(store) {
+        super(store);
+    }
+    handlePointerMove(event) {
+        if (event.pointerType === 'mouse') {
+            const hoveredObject = this._store.getObjectFromPointerEvent(event, '.object');
+            if (!hoveredObject)
+                return;
+            const x = this._store.state.pointerX;
+            const y = this._store.state.pointerY;
+            hoveredObject.isHovered = hoveredObject.hitTest(x, y);
+            if (hoveredObject.isHovered) {
+                console.log(hoveredObject.id);
+            }
+        }
+    }
+}
+
 class KritzelSelectionTool extends KritzelBaseTool {
     constructor(store) {
         super(store);
         this.selectionHandler = new KritzelSelectionHandler(this._store);
         this.moveHandler = new KritzelMoveHandler(this._store);
+        this.hoverHandler = new KritzelHoverHandler(this._store);
         this.resizeHandler = new KritzelResizeHandler(this._store);
         this.rotationHandler = new KritzelRotationHandler(this._store);
     }
@@ -898,12 +918,8 @@ 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);
+                if (selectedObject && selectedObject.isSelected === false && (selectedObject === null || selectedObject === void 0 ? void 0 : selectedObject.objects.length) === 1 && selectedObject.objects[0].isInteractive) {
+                    return;
                 }
             }
             this.moveHandler.handlePointerDown(event);
@@ -944,6 +960,7 @@ class KritzelSelectionTool extends KritzelBaseTool {
         }
         if (event.pointerType === 'mouse') {
             this.moveHandler.handlePointerMove(event);
+            this.hoverHandler.handlePointerMove(event);
             this.selectionHandler.handlePointerMove(event);
             this.resizeHandler.handlePointerMove(event);
             this.rotationHandler.handlePointerMove(event);
@@ -1040,6 +1057,9 @@ class KritzelReviver {
                     case 'KritzelImage':
                         revivedObj = KritzelImage.create(this._store).revive(obj);
                         break;
+                    case 'KritzelCustomElement':
+                        revivedObj = KritzelCustomElement.create(this._store).revive(obj);
+                        break;
                     case 'KritzelSelectionGroup':
                         revivedObj = KritzelSelectionGroup.create(this._store).revive(obj);
                         break;
@@ -1105,7 +1125,7 @@ class KritzelSelectionGroup extends KritzelBaseObject {
         this.refreshObjectDimensions();
     }
     deselectAllChildren() {
-        this.objects.forEach(obj => (obj.selected = false));
+        this.objects.forEach(obj => (obj.isSelected = false));
     }
     updatePosition(x, y) {
         this.objects.forEach(obj => {
@@ -1134,6 +1154,7 @@ class KritzelSelectionGroup extends KritzelBaseObject {
         this.objects.forEach(obj => {
             obj.translateX += deltaX;
             obj.translateY += deltaY;
+            obj.move(startX, startY, endX, endY);
             this._store.state.objectsOctree.update(obj);
         });
         this.unchangedObjects.forEach(obj => {
@@ -1172,7 +1193,7 @@ class KritzelSelectionGroup extends KritzelBaseObject {
             const rotatedY = sin * offsetX + cos * offsetY;
             child.translateX = centerX + rotatedX - child.totalWidth / 2 / child.scale;
             child.translateY = centerY + rotatedY - child.totalHeight / 2 / child.scale;
-            child.rotation = this.objects.length === 1 ? value : value + unchangedChild.rotation;
+            child.rotate(this.objects.length === 1 ? value : value + unchangedChild.rotation);
             this._store.state.objectsOctree.update(child);
         });
     }
@@ -1310,7 +1331,7 @@ class KritzelImageTool extends KritzelBaseTool {
     addImageToStore(image) {
         const selectionGroup = KritzelSelectionGroup.create(this._store);
         selectionGroup.addOrRemove(image);
-        selectionGroup.selected = true;
+        selectionGroup.isSelected = true;
         const addImageCommand = new AddObjectCommand(this._store, this, image);
         const addSelectionGroupCommand = new AddSelectionGroupCommand(this._store, this, selectionGroup);
         this._store.history.executeCommand(new BatchCommand(this._store, this, [addImageCommand, addSelectionGroupCommand]));
@@ -1372,21 +1393,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;
@@ -1440,13 +1467,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;
@@ -1544,19 +1573,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)
@@ -1594,6 +1611,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 {
@@ -1771,8 +1803,8 @@ const DEFAULT_ENGINE_STATE = {
         logCommands: false,
     },
     host: null,
-    cursorX: 0,
-    cursorY: 0,
+    pointerX: 0,
+    pointerY: 0,
     scale: 1,
     scaleMax: 1,
     scaleMin: 1,
@@ -1807,7 +1839,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;
@@ -1898,7 +1930,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);
@@ -1958,10 +1990,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;
@@ -1982,10 +2014,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;
@@ -2026,6 +2058,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 {
@@ -2124,7 +2195,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));
@@ -2441,15 +2512,15 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
         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 => {
@@ -2473,17 +2544,17 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
                         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,
@@ -2499,54 +2570,60 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
                         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)',
+                        stroke: 'var(--kritzel-selection-border-color, #007AFF)',
                         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: {
-                        stroke: 'var(--kritzel-selection-border-color, #0e1111)',
+                    }, visibility: object.isSelected ? 'visible' : 'hidden' }), h("line", { x1: "0", y1: "0", x2: "0", y2: object.totalHeight, style: {
+                        stroke: 'var(--kritzel-selection-border-color, #007AFF)',
                         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: {
-                        stroke: 'var(--kritzel-selection-border-color, #0e1111)',
+                    }, 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, #007AFF)',
                         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: {
-                        stroke: 'var(--kritzel-selection-border-color, #0e1111)',
+                    }, 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, #007AFF)',
                         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: {
-                        stroke: 'var(--kritzel-selection-border-color, #0e1111)',
+                    }, 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, #007AFF)',
                         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("div", { style: { whiteSpace: 'nowrap' } }, "x: ", object.x), h("div", { style: { whiteSpace: 'nowrap' } }, "y: ", object.y)))))));
+            }), h("svg", { key: 'c40c470ce1a341a6d238ea6c313bd3a78465dbd9', 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',
@@ -2556,7 +2633,7 @@ 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: '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: 'f2d62173bc61abf639e356520419b50c0493f34b', 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: 'ad36d2e5eb72e2cbca73c48ef8a4db6d3b6f7a64', 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`,
@@ -2568,7 +2645,7 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
                     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: '6917e2621b4de0b0985e58a6043898d79e367ccc', store: this.store })));
     }
     get host() { return this; }
     static get watchers() { return {
@@ -2642,6 +2719,6 @@ function defineCustomElement() {
 }
 
 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-q-xqpmae.js.map
+//# sourceMappingURL=p-DJaVT2yR.js.map
 
-//# sourceMappingURL=p-q-xqpmae.js.map
+//# sourceMappingURL=p-DJaVT2yR.js.map