kritzel-stencil 0.0.139 → 0.0.141

package/dist/components/{p-KudVTtHk.js → p-C4nj29RW.js}

@@ -1,12 +1,12 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-BYanlgdq.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-C9hrbrUN.js';
 import { K as KritzelMouseButton } from './p-D8W6LE-c.js';
-import { e as KritzelBaseObject, f as KritzelBaseCommand, g as KritzelBaseTool, h as KritzelEventHelper, c as KritzelTextTool, b as KritzelBrushTool, K as KritzelText, a as KritzelPath, A as AddObjectCommand, i as KritzelToolRegistry, U as UpdateObjectCommand, d as KritzelKeyboardHelper } from './p-BbGgijCS.js';
+import { e as KritzelBaseObject, f as KritzelBaseCommand, g as KritzelBaseTool, h as KritzelEventHelper, c as KritzelTextTool, b as KritzelBrushTool, K as KritzelText, a as KritzelPath, A as AddObjectCommand, i as KritzelToolRegistry, U as UpdateObjectCommand, d as KritzelKeyboardHelper } from './p-BuDVaqTF.js';
 import { K as KritzelWorkspace } from './p-YqK8ch2R.js';
-import { K as KritzelContextMenu, d as defineCustomElement$3 } from './p-DOPuq6gn.js';
+import { K as KritzelContextMenu, d as defineCustomElement$3 } from './p-DqsgZIHC.js';
 import { O as ObjectHelper } from './p-B0kd2rUI.js';
 import { K as KritzelDevicesHelper } from './p-l10It7Nm.js';
-import { d as defineCustomElement$2 } from './p-Db3kxVe2.js';
-import { d as defineCustomElement$1 } from './p-sq9jgfX0.js';
+import { d as defineCustomElement$2 } from './p-ByAzDzS5.js';
+import { d as defineCustomElement$1 } from './p-D27d2rKT.js';
 
 class KritzelImage extends KritzelBaseObject {
     __class__ = 'KritzelImage';
@@ -154,13 +154,13 @@ class KritzelEraserTool extends KritzelBaseTool {
     handlePointerDown(event) {
         if (event.pointerType === 'mouse') {
             if (KritzelEventHelper.isLeftClick(event)) {
-                this._core.store.setState('isErasing', true);
+                this._core.store.state.isErasing = true;
             }
         }
         if (event.pointerType === 'touch') {
             this.touchStartTimeout = setTimeout(() => {
                 if (this._core.store.state.pointers.size === 1 && !this._core.store.state.isScaling) {
-                    this._core.store.setState('isErasing', true);
+                    this._core.store.state.isErasing = true;
                 }
             }, 80);
         }
@@ -206,7 +206,7 @@ class KritzelEraserTool extends KritzelBaseTool {
                 if (removeCommands.length > 0) {
                     this._core.history.executeCommand(new BatchCommand(this._core, this, removeCommands));
                 }
-                this._core.store.setState('isErasing', false);
+                this._core.store.state.isErasing = false;
             }
         }
         if (event.pointerType === 'touch') {
@@ -221,7 +221,7 @@ class KritzelEraserTool extends KritzelBaseTool {
                 if (removeCommands.length > 0) {
                     this._core.history.executeCommand(new BatchCommand(this._core, this, removeCommands));
                 }
-                this._core.store.setState('isErasing', false);
+                this._core.store.state.isErasing = false;
             }
         }
     }
@@ -235,12 +235,12 @@ class RemoveSelectionGroupCommand extends KritzelBaseCommand {
     }
     execute() {
         this._core.store.state.objectsMap.remove(object => object.id === this.previousSelectionGroup?.id);
-        this._core.store.setState('selectionGroup', null);
+        this._core.store.state.selectionGroup = null;
     }
     undo() {
         if (this.previousSelectionGroup) {
             this._core.store.state.objectsMap.insert(this.previousSelectionGroup);
-            this._core.store.setState('selectionGroup', this.previousSelectionGroup);
+            this._core.store.state.selectionGroup = this.previousSelectionGroup;
         }
     }
 }
@@ -271,7 +271,7 @@ class MoveSelectionGroupCommand extends KritzelBaseCommand {
             });
             return;
         }
-        this._core.store.setState('selectionGroup', this.selectionGroup);
+        this._core.store.state.selectionGroup = this.selectionGroup;
         this._core.store.state.selectionGroup.move(this.startX, this.startY, this.endX, this.endY);
         this._core.store.state.selectionGroup.objects.forEach(object => {
             this._core.store.state.objectsMap.update(object);
@@ -279,7 +279,7 @@ class MoveSelectionGroupCommand extends KritzelBaseCommand {
         });
     }
     undo() {
-        this._core.store.setState('selectionGroup', this.selectionGroup);
+        this._core.store.state.selectionGroup = this.selectionGroup;
         this._core.store.state.selectionGroup.move(this.endX, this.endY, this.startX, this.startY);
         this._core.store.state.selectionGroup.objects.forEach(object => {
             this._core.store.state.objectsMap.update(object);
@@ -303,6 +303,7 @@ class KritzelMoveHandler extends KritzelBaseHandler {
     endX;
     endY;
     hasMoved = false;
+    trackedPointerId = null;
     constructor(core) {
         super(core);
     }
@@ -314,6 +315,11 @@ class KritzelMoveHandler extends KritzelBaseHandler {
         this.endX = 0;
         this.endY = 0;
         this.hasMoved = false;
+        this.trackedPointerId = null;
+    }
+    cancelPendingDrag() {
+        this._core.store.state.isDragging = false;
+        this.reset();
     }
     handlePointerDown(event) {
         if (event.pointerType === 'mouse') {
@@ -321,13 +327,20 @@ class KritzelMoveHandler extends KritzelBaseHandler {
                 if (this._core.store.state.selectionGroup?.isSelected && !this._core.store.state.isResizeHandleSelected && !this._core.store.state.isRotationHandleSelected) {
                     const clientX = event.clientX - this._core.store.offsetX;
                     const clientY = event.clientY - this._core.store.offsetY;
-                    this._core.store.setState('isDragging', true);
+                    this._core.store.state.isDragging = true;
                     this.dragStartX = clientX;
                     this.dragStartY = clientY;
                     this.startX = this.dragStartX;
                     this.startY = this.dragStartY;
+                    this.trackedPointerId = event.pointerId;
+                }
+                else {
+                    this.trackedPointerId = null;
                 }
             }
+            else {
+                this.trackedPointerId = null;
+            }
         }
         if (event.pointerType === 'touch') {
             const activePointers = Array.from(this._core.store.state.pointers.values());
@@ -339,11 +352,18 @@ class KritzelMoveHandler extends KritzelBaseHandler {
                     this.dragStartY = y;
                     this.startX = x;
                     this.startY = y;
+                    this.trackedPointerId = event.pointerId;
+                }
+                else {
+                    this.trackedPointerId = null;
                 }
             }
         }
     }
     handlePointerMove(event) {
+        if (this.trackedPointerId === null || this.trackedPointerId !== event.pointerId) {
+            return;
+        }
         if (event.pointerType === 'mouse') {
             if (this._core.store.state.isDragging && this._core.store.state.selectionGroup) {
                 const clientX = event.clientX - this._core.store.offsetX;
@@ -364,7 +384,7 @@ class KritzelMoveHandler extends KritzelBaseHandler {
                 !this._core.store.state.isRotationHandleSelected) {
                 const x = Math.round(activePointers[0].clientX - this._core.store.offsetX);
                 const y = Math.round(activePointers[0].clientY - this._core.store.offsetY);
-                this._core.store.setState('isDragging', true);
+                this._core.store.state.isDragging = true;
                 this.endX = x;
                 this.endY = y;
                 const moveDeltaX = Math.abs(x - this.startX);
@@ -381,26 +401,28 @@ class KritzelMoveHandler extends KritzelBaseHandler {
         }
     }
     handlePointerUp(event) {
+        if (this.trackedPointerId === null || this.trackedPointerId !== event.pointerId) {
+            return;
+        }
         if (event.pointerType === 'mouse') {
             if (this._core.store.state.isDragging) {
-                this._core.store.setState('isDragging', false);
+                this._core.store.state.isDragging = false;
                 if (this.hasMoved) {
                     this._core.history.executeCommand(new MoveSelectionGroupCommand(this._core, this, this.endX, this.endY, this.startX, this.startY, true));
-                    this._core.store.setState('hasObjectsChanged', true);
+                    this._core.store.state.hasObjectsChanged = true;
                 }
-                this.reset();
             }
         }
         if (event.pointerType === 'touch') {
             if (this._core.store.state.isDragging) {
-                this._core.store.setState('isDragging', false);
+                this._core.store.state.isDragging = false;
                 if (this.hasMoved) {
                     this._core.history.executeCommand(new MoveSelectionGroupCommand(this._core, this, this.endX, this.endY, this.startX, this.startY, true));
-                    this._core.store.setState('hasObjectsChanged', true);
+                    this._core.store.state.hasObjectsChanged = true;
                 }
-                this.reset();
             }
         }
+        this.reset();
     }
 }
 
@@ -423,7 +445,7 @@ class ResizeSelectionGroupCommand extends KritzelBaseCommand {
         this.selectionGroup = this._core.store.state.selectionGroup;
     }
     execute() {
-        this._core.store.setState('selectionGroup', this.selectionGroup);
+        this._core.store.state.selectionGroup = this.selectionGroup;
         this._core.store.state.selectionGroup.resize(this.newSize.x, this.newSize.y, this.newSize.width, this.newSize.height);
         this._core.store.state.selectionGroup.objects.forEach(object => {
             this._core.store.state.objectsMap.update(object);
@@ -431,7 +453,7 @@ class ResizeSelectionGroupCommand extends KritzelBaseCommand {
         });
     }
     undo() {
-        this._core.store.setState('selectionGroup', this.selectionGroup);
+        this._core.store.state.selectionGroup = this.selectionGroup;
         this._core.store.state.selectionGroup.resize(this.previousSize.x, this.previousSize.y, this.previousSize.width, this.previousSize.height);
         this._core.store.state.selectionGroup.objects.forEach(object => {
             this._core.store.state.objectsMap.update(object);
@@ -460,7 +482,7 @@ class KritzelResizeHandler extends KritzelBaseHandler {
                 if (this._core.store.state.selectionGroup && this._core.store.state.isResizeHandleSelected) {
                     const clientX = event.clientX - this._core.store.offsetX;
                     const clientY = event.clientY - this._core.store.offsetY;
-                    this._core.store.setState('isResizing', true);
+                    this._core.store.state.isResizing = true;
                     this.initialMouseX = clientX;
                     this.initialMouseY = clientY;
                     this.initialSize.width = this._core.store.state.selectionGroup.width;
@@ -480,7 +502,7 @@ class KritzelResizeHandler extends KritzelBaseHandler {
                 if (this._core.store.state.selectionGroup && this._core.store.state.isResizeHandleSelected) {
                     const clientX = Math.round(firstTouch.clientX - this._core.store.offsetX);
                     const clientY = Math.round(firstTouch.clientY - this._core.store.offsetY);
-                    this._core.store.setState('isResizing', true);
+                    this._core.store.state.isResizing = true;
                     this.initialMouseX = clientX;
                     this.initialMouseY = clientY;
                     this.initialSize.width = this._core.store.state.selectionGroup.width;
@@ -574,16 +596,16 @@ class KritzelResizeHandler extends KritzelBaseHandler {
         if (event.pointerType === 'mouse') {
             if (this._core.store.state.isResizing) {
                 this._core.history.executeCommand(new ResizeSelectionGroupCommand(this._core, this, structuredClone(this.initialSize), structuredClone(this.newSize)));
-                this._core.store.setState('isResizing', false);
-                this._core.store.setState('hasObjectsChanged', true);
+                this._core.store.state.isResizing = false;
+                this._core.store.state.hasObjectsChanged = true;
                 this.reset();
             }
         }
         if (event.pointerType === 'touch') {
             if (this._core.store.state.isResizing) {
                 this._core.history.executeCommand(new ResizeSelectionGroupCommand(this._core, this, structuredClone(this.initialSize), structuredClone(this.newSize)));
-                this._core.store.setState('isResizing', false);
-                this._core.store.setState('hasObjectsChanged', true);
+                this._core.store.state.isResizing = false;
+                this._core.store.state.hasObjectsChanged = true;
                 this.reset();
                 clearTimeout(this._core.store.state.longTouchTimeout);
             }
@@ -602,7 +624,7 @@ class RotateSelectionGroupCommand extends KritzelBaseCommand {
         this.selectionGroup = this._core.store.state.selectionGroup;
     }
     execute() {
-        this._core.store.setState('selectionGroup', this.selectionGroup);
+        this._core.store.state.selectionGroup = this.selectionGroup;
         this._core.store.state.selectionGroup.rotate(this.rotation);
         this._core.store.state.selectionGroup.objects.forEach(object => {
             this._core.store.state.objectsMap.update(object);
@@ -610,7 +632,7 @@ class RotateSelectionGroupCommand extends KritzelBaseCommand {
         });
     }
     undo() {
-        this._core.store.setState('selectionGroup', this.selectionGroup);
+        this._core.store.state.selectionGroup = this.selectionGroup;
         this._core.store.state.selectionGroup.rotate(this.initialRotation);
         this._core.store.state.selectionGroup.objects.forEach(object => {
             this._core.store.state.objectsMap.update(object);
@@ -638,7 +660,7 @@ class KritzelRotationHandler extends KritzelBaseHandler {
                 if (this._core.store.state.selectionGroup && this._core.store.state.isRotationHandleSelected) {
                     const clientX = event.clientX - this._core.store.offsetX;
                     const clientY = event.clientY - this._core.store.offsetY;
-                    this._core.store.setState('isRotating', true);
+                    this._core.store.state.isRotating = true;
                     const centerX = this._core.store.state.selectionGroup.translateX + this._core.store.state.selectionGroup.width / 2 / this._core.store.state.scale;
                     const centerY = this._core.store.state.selectionGroup.translateY + this._core.store.state.selectionGroup.height / 2 / this._core.store.state.scale;
                     const cursorX = (clientX - this._core.store.state.translateX) / this._core.store.state.scale;
@@ -659,7 +681,7 @@ class KritzelRotationHandler extends KritzelBaseHandler {
                 if (this._core.store.state.selectionGroup && this._core.store.state.isRotationHandleSelected) {
                     const clientX = Math.round(firstTouch.clientX - this._core.store.offsetX);
                     const clientY = Math.round(firstTouch.clientY - this._core.store.offsetY);
-                    this._core.store.setState('isRotating', true);
+                    this._core.store.state.isRotating = true;
                     const centerX = this._core.store.state.selectionGroup.translateX + this._core.store.state.selectionGroup.width / 2 / this._core.store.state.scale;
                     const centerY = this._core.store.state.selectionGroup.translateY + this._core.store.state.selectionGroup.height / 2 / this._core.store.state.scale;
                     const cursorX = (clientX - this._core.store.state.translateX) / this._core.store.state.scale;
@@ -710,16 +732,16 @@ class KritzelRotationHandler extends KritzelBaseHandler {
         if (event.pointerType === 'mouse') {
             if (this._core.store.state.isRotating) {
                 this._core.history.executeCommand(new RotateSelectionGroupCommand(this._core, this, this.rotation, this.initialSelectionGroupRotation));
-                this._core.store.setState('isRotating', false);
-                this._core.store.setState('hasObjectsChanged', true);
+                this._core.store.state.isRotating = false;
+                this._core.store.state.hasObjectsChanged = true;
                 this.reset();
             }
         }
         if (event.pointerType === 'touch') {
             if (this._core.store.state.isRotating) {
                 this._core.history.executeCommand(new RotateSelectionGroupCommand(this._core, this, this.rotation, this.initialSelectionGroupRotation));
-                this._core.store.setState('isRotating', false);
-                this._core.store.setState('hasObjectsChanged', true);
+                this._core.store.state.isRotating = false;
+                this._core.store.state.hasObjectsChanged = true;
                 this.reset();
                 clearTimeout(this._core.store.state.longTouchTimeout);
             }
@@ -757,13 +779,13 @@ class AddSelectionGroupCommand extends KritzelBaseCommand {
     execute() {
         this._core.store.state.objectsMap.remove(object => object instanceof KrtizelSelectionBox || object instanceof KritzelSelectionGroup);
         this._core.store.state.objectsMap.insert(this.selectionGroup);
-        this._core.store.setState('selectionGroup', this.selectionGroup);
-        this._core.store.setState('selectionBox', null);
+        this._core.store.state.selectionGroup = this.selectionGroup;
+        this._core.store.state.selectionBox = null;
     }
     undo() {
         this._core.store.state.objectsMap.remove(object => object.id === this.selectionGroup.id);
-        this._core.store.setState('selectionGroup', this.previousSelectionGroup);
-        this._core.store.setState('selectionBox', null);
+        this._core.store.state.selectionGroup = this.previousSelectionGroup;
+        this._core.store.state.selectionBox = null;
     }
 }
 
@@ -823,14 +845,10 @@ class KritzelSelectionHandler extends KritzelBaseHandler {
                 if (this._core.store.state.selectionGroup?.objects.length === 1 && hasObjectsMoved === false) {
                     this._core.store.state.selectionGroup.objects[0].edit();
                 }
-                this._core.store.setState('hasObjectsChanged', false);
+                this._core.store.state.hasObjectsChanged = false;
                 if (this._core.store.state.isSelecting) {
                     if (this.isSelectionClick) {
-                        const x = this._core.store.state.pointerX;
-                        const y = this._core.store.state.pointerY;
-                        const selectedObject = this._core.getObjectsFromPointerEvent(event, '.object').find(obj => obj.hitTest(x, y));
-                        this.addObjectToSelectionGroup(selectedObject);
-                        this.removeSelectionBox();
+                        this.handleSelectionClick(event);
                     }
                     if (this.isSelectionDrag) {
                         this.updateMouseSelection(event);
@@ -846,27 +864,23 @@ class KritzelSelectionHandler extends KritzelBaseHandler {
             if (this._core.store.state.selectionGroup?.objects.length === 1 && hasObjectsMoved === false) {
                 this._core.store.state.selectionGroup.objects[0].edit();
             }
-            this._core.store.setState('hasObjectsChanged', false);
+            this._core.store.state.hasObjectsChanged = false;
             if (this._core.store.state.isSelecting) {
                 if (this.isSelectionClick) {
-                    const x = this._core.store.state.pointerX;
-                    const y = this._core.store.state.pointerY;
-                    const selectedObject = this._core.getObjectsFromPointerEvent(event, '.object').find(obj => obj.hitTest(x, y));
-                    this.addObjectToSelectionGroup(selectedObject);
-                    this.removeSelectionBox();
+                    this.handleSelectionClick(event);
                 }
                 if (this.isSelectionDrag) {
                     this.updateTouchSelection();
                     this.addSelectedObjectsToSelectionGroup();
                     this.removeSelectionBox();
                 }
-                this._core.store.setState('skipContextMenu', false);
+                this._core.store.state.skipContextMenu = false;
             }
         }
     }
     removeSelectionBox() {
-        this._core.store.setState('selectionBox', null);
-        this._core.store.setState('isSelecting', false);
+        this._core.store.state.selectionBox = null;
+        this._core.store.state.isSelecting = false;
         this._core.store.state.objectsMap.remove(o => o instanceof KrtizelSelectionBox);
     }
     startMouseSelection(event) {
@@ -878,9 +892,9 @@ class KritzelSelectionHandler extends KritzelBaseHandler {
         this.startY = (clientY - this._core.store.state.translateY) / this._core.store.state.scale;
         selectionBox.translateX = this.startX;
         selectionBox.translateY = this.startY;
-        this._core.store.setState('selectionGroup', null);
-        this._core.store.setState('selectionBox', selectionBox);
-        this._core.store.setState('isSelecting', true);
+        this._core.store.state.selectionGroup = null;
+        this._core.store.state.selectionBox = selectionBox;
+        this._core.store.state.isSelecting = true;
         this._core.store.state.objectsMap.remove(o => o instanceof KrtizelSelectionBox || o instanceof KritzelSelectionGroup);
         this._core.store.state.objectsMap.insert(selectionBox);
     }
@@ -900,9 +914,9 @@ class KritzelSelectionHandler extends KritzelBaseHandler {
         this.startY = (clientY - this._core.store.state.translateY) / this._core.store.state.scale;
         selectionBox.translateX = this.startX;
         selectionBox.translateY = this.startY;
-        this._core.store.setState('selectionGroup', null);
-        this._core.store.setState('selectionBox', selectionBox);
-        this._core.store.setState('isSelecting', true);
+        this._core.store.state.selectionGroup = null;
+        this._core.store.state.selectionBox = selectionBox;
+        this._core.store.state.isSelecting = true;
         this._core.store.state.objectsMap.remove(o => o instanceof KrtizelSelectionBox || o instanceof KritzelSelectionGroup);
         this._core.store.state.objectsMap.insert(selectionBox);
     }
@@ -914,11 +928,18 @@ class KritzelSelectionHandler extends KritzelBaseHandler {
         if (selectionBox) {
             const currentX = (clientX - this._core.store.state.translateX) / selectionBox.scale;
             const currentY = (clientY - this._core.store.state.translateY) / selectionBox.scale;
-            selectionBox.width = Math.abs(currentX - this.startX) * selectionBox.scale;
-            selectionBox.height = Math.abs(currentY - this.startY) * selectionBox.scale;
+            const width = Math.abs(currentX - this.startX) * selectionBox.scale;
+            const height = Math.abs(currentY - this.startY) * selectionBox.scale;
+            selectionBox.width = width;
+            selectionBox.height = height;
             selectionBox.translateX = Math.min(currentX, this.startX);
             selectionBox.translateY = Math.min(currentY, this.startY);
-            this.updateSelectedObjects();
+            if (width > 0 || height > 0) {
+                this.updateSelectedObjects();
+            }
+            else {
+                this.clearSelectionPreview();
+            }
         }
     }
     updateTouchSelection() {
@@ -934,11 +955,18 @@ class KritzelSelectionHandler extends KritzelBaseHandler {
         if (selectionBox) {
             const currentX = (clientX - this._core.store.state.translateX) / selectionBox.scale;
             const currentY = (clientY - this._core.store.state.translateY) / selectionBox.scale;
-            selectionBox.width = Math.abs(currentX - this.startX) * selectionBox.scale;
-            selectionBox.height = Math.abs(currentY - this.startY) * selectionBox.scale;
+            const width = Math.abs(currentX - this.startX) * selectionBox.scale;
+            const height = Math.abs(currentY - this.startY) * selectionBox.scale;
+            selectionBox.width = width;
+            selectionBox.height = height;
             selectionBox.translateX = Math.min(currentX, this.startX);
             selectionBox.translateY = Math.min(currentY, this.startY);
-            this.updateSelectedObjects();
+            if (width > 0 || height > 0) {
+                this.updateSelectedObjects();
+            }
+            else {
+                this.clearSelectionPreview();
+            }
         }
     }
     updateSelectedObjects() {
@@ -946,6 +974,28 @@ class KritzelSelectionHandler extends KritzelBaseHandler {
             .filter(o => !(o instanceof KrtizelSelectionBox))
             .forEach(object => (object.isSelected = object.hitTestPolygon(this._core.store.state.selectionBox.rotatedPolygon)));
     }
+    handleSelectionClick(event) {
+        const selectedObject = this.getTopmostHitObject(event);
+        this.clearSelectionPreview();
+        this.addObjectToSelectionGroup(selectedObject);
+        this.removeSelectionBox();
+    }
+    getTopmostHitObject(event) {
+        const pointerX = this._core.store.state.pointerX;
+        const pointerY = this._core.store.state.pointerY;
+        const overlappingObjects = this._core.getObjectsFromPointerEvent(event, '.object');
+        for (const object of overlappingObjects) {
+            if (object.hitTest(pointerX, pointerY)) {
+                return object;
+            }
+        }
+        return null;
+    }
+    clearSelectionPreview() {
+        this._core.store.allNonSelectionObjects.forEach(object => {
+            object.isSelected = false;
+        });
+    }
     addObjectToSelectionGroup(object) {
         if (!object) {
             return;
@@ -962,7 +1012,7 @@ class KritzelSelectionHandler extends KritzelBaseHandler {
         if (selectedObjects.length === 0) {
             return;
         }
-        this._core.store.setState('selectionGroup', KritzelSelectionGroup.create(this._core));
+        this._core.store.state.selectionGroup = KritzelSelectionGroup.create(this._core);
         selectedObjects.forEach(o => {
             this._core.store.state.selectionGroup.addOrRemove(o);
             o.isSelected = false;
@@ -1012,9 +1062,9 @@ class KritzelSelectionTool extends KritzelBaseTool {
         }
         if (event.pointerType === 'mouse') {
             if (KritzelEventHelper.isLeftClick(event)) {
-                this._core.store.setState('isResizeHandleSelected', this.isHandleSelected(event));
-                this._core.store.setState('isRotationHandleSelected', this.isRotationHandleSelected(event));
-                this._core.store.setState('resizeHandleType', this.getHandleType(event));
+                this._core.store.state.isResizeHandleSelected = this.isHandleSelected(event);
+                this._core.store.state.isRotationHandleSelected = this.isRotationHandleSelected(event);
+                this._core.store.state.resizeHandleType = this.getHandleType(event);
                 const selectedObject = this.getSelectedObject(event);
                 const isDifferentObject = selectedObject && this._core.store.state.selectionGroup && selectedObject.id !== this._core.store.state.selectionGroup.id;
                 if ((selectedObject === null || isDifferentObject) &&
@@ -1038,13 +1088,13 @@ class KritzelSelectionTool extends KritzelBaseTool {
                 return;
             }
             if (this._core.store.state.pointers.size === 1) {
-                this._core.store.setState('isResizeHandleSelected', this.isHandleSelected(event));
-                this._core.store.setState('isRotationHandleSelected', this.isRotationHandleSelected(event));
-                this._core.store.setState('resizeHandleType', this.getHandleType(event));
+                this._core.store.state.isResizeHandleSelected = this.isHandleSelected(event);
+                this._core.store.state.isRotationHandleSelected = this.isRotationHandleSelected(event);
+                this._core.store.state.resizeHandleType = this.getHandleType(event);
                 const selectedObject = this.getSelectedObject(event);
                 const isDifferentObject = selectedObject && this._core.store.state.selectionGroup && selectedObject.id !== this._core.store.state.selectionGroup.id;
                 if (!this._core.store.state.selectionGroup && selectedObject) {
-                    this._core.store.setState('skipContextMenu', true);
+                    this._core.store.state.skipContextMenu = true;
                 }
                 if ((selectedObject === null || isDifferentObject) &&
                     this._core.store.state.selectionGroup &&
@@ -1315,7 +1365,9 @@ class KritzelSelectionGroup extends KritzelBaseObject {
     }
     copy() {
         const selectionGroup = KritzelSelectionGroup.create(this._core);
-        this.objects.sort((a, b) => a.zIndex - b.zIndex).forEach(obj => {
+        this.objects
+            .sort((a, b) => a.zIndex - b.zIndex)
+            .forEach(obj => {
             const copiedObject = obj.copy();
             selectionGroup.addOrRemove(copiedObject);
         });
@@ -1467,18 +1519,18 @@ class KritzelViewport {
     startY = 0;
     constructor(core, host) {
         this._core = core;
-        this._core.store.setState('host', host);
-        this._core.store.setState('viewportWidth', host.clientWidth);
-        this._core.store.setState('viewportHeight', host.clientHeight);
-        this._core.store.setState('startX', 0);
-        this._core.store.setState('startY', 0);
-        this._core.store.setState('translateX', 0);
-        this._core.store.setState('translateY', 0);
+        this._core.store.state.host = host;
+        this._core.store.state.viewportWidth = host.clientWidth;
+        this._core.store.state.viewportHeight = host.clientHeight;
+        this._core.store.state.startX = 0;
+        this._core.store.state.startY = 0;
+        this._core.store.state.translateX = 0;
+        this._core.store.state.translateY = 0;
     }
     handleResize() {
-        this._core.store.setState('viewportWidth', this._core.store.state.host.clientWidth);
-        this._core.store.setState('viewportHeight', this._core.store.state.host.clientHeight);
-        this._core.store.setState('hasViewportChanged', true);
+        this._core.store.state.viewportWidth = this._core.store.state.host.clientWidth;
+        this._core.store.state.viewportHeight = this._core.store.state.host.clientHeight;
+        this._core.store.state.hasViewportChanged = true;
         this._core.rerender();
     }
     handlePointerDown(event) {
@@ -1486,16 +1538,16 @@ class KritzelViewport {
             const adjustedClientX = event.clientX - this._core.store.offsetX;
             const adjustedClientY = event.clientY - this._core.store.offsetY;
             if (event.button === KritzelMouseButton.Right) {
-                this._core.store.setState('isPanning', true);
-                this._core.store.setState('startX', adjustedClientX);
-                this._core.store.setState('startY', adjustedClientY);
+                this._core.store.state.isPanning = true;
+                this._core.store.state.startX = adjustedClientX;
+                this._core.store.state.startY = adjustedClientY;
             }
         }
         if (event.pointerType === 'touch') {
             const activePointers = Array.from(this._core.store.state.pointers.values());
             if (activePointers.length === 2) {
-                this._core.store.setState('currentPath', null);
-                this._core.store.setState('isScaling', true);
+                this._core.store.state.currentPath = null;
+                this._core.store.state.isScaling = true;
                 const firstTouchX = activePointers[0].clientX - this._core.store.offsetX;
                 const firstTouchY = activePointers[0].clientY - this._core.store.offsetY;
                 const secondTouchX = activePointers[1].clientX - this._core.store.offsetX;
@@ -1512,17 +1564,17 @@ class KritzelViewport {
             const hostRect = this._core.store.state.host.getBoundingClientRect();
             const xRelativeToHost = event.clientX - hostRect.left;
             const yRelativeToHost = event.clientY - hostRect.top;
-            this._core.store.setState('pointerX', (xRelativeToHost - this._core.store.state.translateX) / this._core.store.state.scale);
-            this._core.store.setState('pointerY', (yRelativeToHost - this._core.store.state.translateY) / this._core.store.state.scale);
+            this._core.store.state.pointerX = (xRelativeToHost - this._core.store.state.translateX) / this._core.store.state.scale;
+            this._core.store.state.pointerY = (yRelativeToHost - this._core.store.state.translateY) / this._core.store.state.scale;
             if (this._core.store.state.isPanning) {
                 const dx = xRelativeToHost - this._core.store.state.startX;
                 const dy = yRelativeToHost - this._core.store.state.startY;
-                this._core.store.setState('translateX', this._core.store.state.translateX + dx);
-                this._core.store.setState('translateY', this._core.store.state.translateY + dy);
-                this._core.store.setState('startX', xRelativeToHost);
-                this._core.store.setState('startY', yRelativeToHost);
-                this._core.store.setState('hasViewportChanged', true);
-                this._core.store.setState('skipContextMenu', true);
+                this._core.store.state.translateX += dx;
+                this._core.store.state.translateY += dy;
+                this._core.store.state.startX = xRelativeToHost;
+                this._core.store.state.startY = yRelativeToHost;
+                this._core.store.state.hasViewportChanged = true;
+                this._core.store.state.skipContextMenu = true;
                 this._core.rerender();
                 this._core.updateWorkspaceViewport(this._core.store.state.translateX, this._core.store.state.translateY, this._core.store.state.scale);
             }
@@ -1531,8 +1583,8 @@ class KritzelViewport {
             const hostRect = this._core.store.state.host.getBoundingClientRect();
             const xRelativeToHost = event.clientX - hostRect.left;
             const yRelativeToHost = event.clientY - hostRect.top;
-            this._core.store.setState('pointerX', (xRelativeToHost - this._core.store.state.translateX) / this._core.store.state.scale);
-            this._core.store.setState('pointerY', (yRelativeToHost - this._core.store.state.translateY) / this._core.store.state.scale);
+            this._core.store.state.pointerX = (xRelativeToHost - this._core.store.state.translateX) / this._core.store.state.scale;
+            this._core.store.state.pointerY = (yRelativeToHost - this._core.store.state.translateY) / this._core.store.state.scale;
             const activePointers = Array.from(this._core.store.state.pointers.values());
             if (activePointers.length === 2) {
                 const firstTouchX = activePointers[0].clientX - this._core.store.offsetX;
@@ -1545,20 +1597,20 @@ class KritzelViewport {
                 const scaleRatio = currentTouchDistance / this.initialTouchDistance;
                 const newScale = this._core.store.state.scale * scaleRatio;
                 if (newScale > this._core.store.state.scaleMax || newScale < this._core.store.state.scaleMin) {
-                    this._core.store.setState('translateX', this._core.store.state.translateX + midpointX - this.startX);
-                    this._core.store.setState('translateY', this._core.store.state.translateY + midpointY - this.startY);
+                    this._core.store.state.translateX = this._core.store.state.translateX + midpointX - this.startX;
+                    this._core.store.state.translateY = this._core.store.state.translateY + midpointY - this.startY;
                 }
                 else {
                     const translateXAdjustment = (midpointX - this._core.store.state.translateX) * (scaleRatio - 1);
                     const translateYAdjustment = (midpointY - this._core.store.state.translateY) * (scaleRatio - 1);
-                    this._core.store.setState('translateX', this._core.store.state.translateX + midpointX - this.startX - translateXAdjustment);
-                    this._core.store.setState('translateY', this._core.store.state.translateY + midpointY - this.startY - translateYAdjustment);
-                    this._core.store.setState('scale', newScale);
+                    this._core.store.state.translateX = this._core.store.state.translateX + midpointX - this.startX - translateXAdjustment;
+                    this._core.store.state.translateY = this._core.store.state.translateY + midpointY - this.startY - translateYAdjustment;
+                    this._core.store.state.scale = newScale;
                     this.initialTouchDistance = currentTouchDistance;
                 }
                 this.startX = midpointX;
                 this.startY = midpointY;
-                this._core.store.setState('hasViewportChanged', true);
+                this._core.store.state.hasViewportChanged = true;
                 this._core.rerender();
                 this._core.updateWorkspaceViewport(this._core.store.state.translateX, this._core.store.state.translateY, this._core.store.state.scale);
             }
@@ -1567,12 +1619,12 @@ class KritzelViewport {
     handlePointerUp(event) {
         if (event.pointerType === 'mouse') {
             if (this._core.store.state.isPanning) {
-                this._core.store.setState('isPanning', false);
+                this._core.store.state.isPanning = false;
                 this._core.rerender();
             }
         }
         if (event.pointerType === 'touch') {
-            this._core.store.setState('isScaling', false);
+            this._core.store.state.isScaling = false;
             this._core.rerender();
         }
     }
@@ -1585,33 +1637,52 @@ class KritzelViewport {
             this.handlePan(event);
         }
     }
+    centerInViewport(object) {
+        const { scale, viewportWidth, viewportHeight } = this._core.store.state;
+        const { x, y, width, height } = object.rotatedBoundingBox;
+        const objectCenterX = x + width / 2;
+        const objectCenterY = y + height / 2;
+        this._core.store.state.translateX = viewportWidth / 2 - objectCenterX * scale;
+        this._core.store.state.translateY = viewportHeight / 2 - objectCenterY * scale;
+        this._core.store.state.hasViewportChanged = true;
+        this._core.rerender();
+        this._core.updateWorkspaceViewport(this._core.store.state.translateX, this._core.store.state.translateY, this._core.store.state.scale);
+    }
+    centerFitInViewport(object) {
+        const scaleX = this._core.store.state.viewportWidth / (object.rotatedBoundingBox.width * 1.1);
+        const scaleY = this._core.store.state.viewportHeight / (object.rotatedBoundingBox.height * 1.1);
+        const newScale = Math.min(scaleX, scaleY, this._core.store.state.scaleMax);
+        const clampedScale = Math.max(newScale, this._core.store.state.scaleMin);
+        this._core.store.state.scale = clampedScale;
+        this.centerInViewport(object);
+    }
     handleZoom(event) {
-        this._core.store.setState('isScaling', true);
+        this._core.store.state.isScaling = true;
         const rect = this._core.store.state.host.getBoundingClientRect();
         const xRelativeToHost = event.clientX - rect.left;
         const yRelativeToHost = event.clientY - rect.top;
-        this._core.store.setState('pointerX', (xRelativeToHost - this._core.store.state.translateX) / this._core.store.state.scale);
-        this._core.store.setState('pointerY', (yRelativeToHost - this._core.store.state.translateY) / this._core.store.state.scale);
+        this._core.store.state.pointerX = (xRelativeToHost - this._core.store.state.translateX) / this._core.store.state.scale;
+        this._core.store.state.pointerY = (yRelativeToHost - this._core.store.state.translateY) / this._core.store.state.scale;
         const delta = event.deltaY > 0 ? -this._core.store.state.scaleStep * this._core.store.state.scale : this._core.store.state.scaleStep * this._core.store.state.scale;
         const newScale = Math.min(this._core.store.state.scaleMax, Math.max(this._core.store.state.scaleMin, this._core.store.state.scale + delta));
         const scaleRatio = newScale / this._core.store.state.scale;
         const translateXAdjustment = (xRelativeToHost - this._core.store.state.translateX) * (scaleRatio - 1);
         const translateYAdjustment = (yRelativeToHost - this._core.store.state.translateY) * (scaleRatio - 1);
-        this._core.store.setState('scale', newScale);
-        this._core.store.setState('translateX', this._core.store.state.translateX - translateXAdjustment);
-        this._core.store.setState('translateY', this._core.store.state.translateY - translateYAdjustment);
-        this._core.store.setState('hasViewportChanged', true);
+        this._core.store.state.scale = newScale;
+        this._core.store.state.translateX = this._core.store.state.translateX - translateXAdjustment;
+        this._core.store.state.translateY = this._core.store.state.translateY - translateYAdjustment;
+        this._core.store.state.hasViewportChanged = true;
         this._core.rerender();
         this._core.updateWorkspaceViewport(this._core.store.state.translateX, this._core.store.state.translateY, this._core.store.state.scale);
         setTimeout(() => {
-            this._core.store.setState('isScaling', false);
+            this._core.store.state.isScaling = false;
         }, 300);
     }
     handlePan(event) {
         const panSpeed = 0.8;
-        this._core.store.setState('translateX', this._core.store.state.translateX - event.deltaX * panSpeed);
-        this._core.store.setState('translateY', this._core.store.state.translateY - event.deltaY * panSpeed);
-        this._core.store.setState('hasViewportChanged', true);
+        this._core.store.state.translateX = this._core.store.state.translateX - event.deltaX * panSpeed;
+        this._core.store.state.translateY = this._core.store.state.translateY - event.deltaY * panSpeed;
+        this._core.store.state.hasViewportChanged = true;
         this._core.rerender();
         this._core.updateWorkspaceViewport(this._core.store.state.translateX, this._core.store.state.translateY, this._core.store.state.scale);
     }
@@ -1643,8 +1714,8 @@ class KritzelKeyHandler extends KritzelBaseHandler {
         },
         { key: 'v', ctrl: true, condition: c => !!c.store.state.copiedObjects && !c.store.state.activeText, action: c => c.paste() },
         // Text editing
-        { key: 'a', ctrl: true, condition: c => !!c.store.state.activeText, action: c => c.store.state.activeText.selectAll() },
-        { key: 'v', ctrl: true, condition: c => !!c.store.state.activeText, action: c => c.store.state.activeText.insertFromClipboard() },
+        // { key: 'a', ctrl: true, condition: c => !!c.store.state.activeText, action: c => c.store.state.activeText.selectAll() },
+        // { key: 'v', ctrl: true, condition: c => !!c.store.state.activeText, action: c => c.store.state.activeText.insertFromClipboard() },
         // Object layering
         { key: '+', ctrl: true, condition: c => !!c.store.state.selectionGroup, action: c => c.bringForward() },
         { key: '-', ctrl: true, condition: c => !!c.store.state.selectionGroup, action: c => c.sendBackward() },
@@ -1661,7 +1732,7 @@ class KritzelKeyHandler extends KritzelBaseHandler {
         toolInstance.onActivate();
     }
     handleKeyDown(event) {
-        this._core.store.setState('isCtrlKeyPressed', event.ctrlKey);
+        this._core.store.state.isCtrlKeyPressed = event.ctrlKey;
         const shortcut = this.shortcuts.find(s => s.key === event.key && !!s.ctrl === event.ctrlKey && !!s.shift === event.shiftKey && (!s.condition || s.condition(this._core)));
         if (shortcut) {
             event.preventDefault();
@@ -1669,7 +1740,7 @@ class KritzelKeyHandler extends KritzelBaseHandler {
         }
     }
     handleKeyUp(event) {
-        this._core.store.setState('isCtrlKeyPressed', event.ctrlKey);
+        this._core.store.state.isCtrlKeyPressed = event.ctrlKey;
     }
 }
 
@@ -1686,23 +1757,30 @@ class KritzelContextMenuHandler extends KritzelBaseHandler {
             return;
         }
         if (this._core.store.state.skipContextMenu) {
-            this._core.store.setState('skipContextMenu', false);
+            this._core.store.state.skipContextMenu = false;
             return;
         }
+        const selectionTool = this._core.store.state.activeTool;
+        selectionTool?.moveHandler?.cancelPendingDrag();
+        if (this._core.store.state.selectionBox) {
+            this._core.store.state.objectsMap.remove(object => object instanceof KrtizelSelectionBox);
+            this._core.store.state.selectionBox = null;
+            this._core.store.state.isSelecting = false;
+        }
         const selectedObject = this._core.getObjectFromPointerEvent(event, '.object');
-        if (selectedObject && !(selectedObject instanceof KritzelSelectionGroup)) {
+        if (selectedObject && !(selectedObject instanceof KritzelSelectionGroup) && !(selectedObject instanceof KrtizelSelectionBox)) {
             const selectionGroup = KritzelSelectionGroup.create(this._core);
             selectionGroup.addOrRemove(selectedObject);
             selectionGroup.isSelected = true;
             selectionGroup.rotation = selectedObject.rotation;
-            this._core.store.setState('isSelecting', false);
+            this._core.store.state.isSelecting = false;
             const batch = new BatchCommand(this._core, this, [
                 new RemoveSelectionGroupCommand(this._core, this._core.store.state.selectionGroup),
                 new AddSelectionGroupCommand(this._core, this, selectionGroup),
             ]);
             this._core.history.executeCommand(batch);
         }
-        this._core.store.setState('contextMenuItems', this._core.store.state.selectionGroup ? this.objectContextMenuItems : this.globalContextMenuItems);
+        this._core.store.state.contextMenuItems = this._core.store.state.selectionGroup ? this.objectContextMenuItems : this.globalContextMenuItems;
         let x = event.clientX - this._core.store.offsetX;
         let y = event.clientY - this._core.store.offsetY;
         const menuWidthEstimate = 150;
@@ -1716,10 +1794,10 @@ class KritzelContextMenuHandler extends KritzelBaseHandler {
         }
         x = Math.max(margin, x);
         y = Math.max(margin, y);
-        this._core.store.setState('contextMenuX', x);
-        this._core.store.setState('contextMenuY', y);
-        this._core.store.setState('isContextMenuVisible', true);
-        this._core.store.setState('isEnabled', false);
+        this._core.store.state.contextMenuX = x;
+        this._core.store.state.contextMenuY = y;
+        this._core.store.state.isContextMenuVisible = true;
+        this._core.store.state.isEnabled = false;
         this._core.rerender();
     }
 }
@@ -2040,14 +2118,14 @@ class UpdateViewportCommand extends KritzelBaseCommand {
         };
     }
     execute() {
-        this._core.store.setState('scale', this.currentViewport.scale);
-        this._core.store.setState('translateX', this.currentViewport.translateX);
-        this._core.store.setState('translateY', this.currentViewport.translateY);
+        this._core.store.state.scale = this.currentViewport.scale;
+        this._core.store.state.translateX = this.currentViewport.translateX;
+        this._core.store.state.translateY = this.currentViewport.translateY;
     }
     undo() {
-        this._core.store.setState('scale', this.previousViewport.scale);
-        this._core.store.setState('translateX', this.previousViewport.translateX);
-        this._core.store.setState('translateY', this.previousViewport.translateY);
+        this._core.store.state.scale = this.previousViewport.scale;
+        this._core.store.state.translateX = this.previousViewport.translateX;
+        this._core.store.state.translateY = this.previousViewport.translateY;
     }
 }
 
@@ -2145,7 +2223,7 @@ class KritzelHistory {
         if (this._core.store.state.hasViewportChanged) {
             const command = new UpdateViewportCommand(this._core, this, this.previousViewport);
             command.undo();
-            this._core.store.setState('hasViewportChanged', false);
+            this._core.store.state.hasViewportChanged = false;
             this._core.rerender();
             return;
         }
@@ -2156,7 +2234,7 @@ class KritzelHistory {
                 console.info('undo', command);
             this.redoStack.add(command);
         }
-        this._core.store.setState('copiedObjects', null);
+        this._core.store.state.copiedObjects = null;
         this._core.rerender();
     }
     redo() {
@@ -2176,7 +2254,7 @@ class KritzelHistory {
         if (this.redoStack.isEmpty() === false) {
             this.redoStack.clear();
         }
-        this._core.store.setState('hasViewportChanged', false);
+        this._core.store.state.hasViewportChanged = false;
         this.previousViewport = {
             scale: this._core.store.state.scale,
             scaleStep: this._core.store.state.scaleStep,
@@ -2236,11 +2314,14 @@ class KritzelStore {
         return this._state;
     }
     get currentZIndex() {
-        return this._state.objectsMap.filter(o => !(o instanceof KritzelSelectionGroup) && !(o instanceof KrtizelSelectionBox)).length;
+        return Math.max(0, ...this._state.objectsMap.filter(o => !(o instanceof KritzelSelectionGroup) && !(o instanceof KrtizelSelectionBox)).map(o => o.zIndex)) + 1;
     }
     get allObjects() {
         return this._state.objectsMap.allObjects();
     }
+    get allNonSelectionObjects() {
+        return this._state.objectsMap.allObjects().filter(o => !(o instanceof KritzelSelectionGroup) && !(o instanceof KrtizelSelectionBox));
+    }
     get selectedObjects() {
         return this.allObjects.filter(o => !(o instanceof KritzelSelectionGroup)).filter(o => o.isSelected);
     }
@@ -2314,18 +2395,21 @@ class KritzelCore {
         const workspaces = await this.getWorkspaces();
         const mostRecentWorkspace = [...workspaces].sort((a, b) => b.updatedAt.getTime() - a.updatedAt.getTime())[0];
         const fallbackWorkspace = new KritzelWorkspace(ObjectHelper.generateUUID(), 'New Workspace');
-        this._store.setState('activeWorkspace', workspace ?? mostRecentWorkspace ?? fallbackWorkspace);
-        const isExistingWorkspace = await this.getWorkspace(this._store.state.activeWorkspace.id);
-        if (isExistingWorkspace) {
+        const candidateWorkspace = workspace ?? mostRecentWorkspace ?? fallbackWorkspace;
+        const existingWorkspace = await this.getWorkspace(candidateWorkspace.id);
+        if (existingWorkspace) {
+            this._store.state.activeWorkspace = existingWorkspace;
             await this.updateWorkspace(this._store.state.activeWorkspace);
         }
         else {
+            this._store.state.activeWorkspace = candidateWorkspace;
             await this.createWorkspace(this._store.state.activeWorkspace);
         }
-        this._store.setState('workspaces', await this.getWorkspaces());
-        this._store.setState('translateX', this._store.state.activeWorkspace.viewport.translateX);
-        this._store.setState('translateY', this._store.state.activeWorkspace.viewport.translateY);
-        this._store.setState('scale', this._store.state.activeWorkspace.viewport.scale);
+        this._store.state.workspaces = await this.getWorkspaces();
+        const viewport = this._store.state.activeWorkspace.viewport ?? { translateX: 0, translateY: 0, scale: 1 };
+        this._store.state.translateX = viewport.translateX ?? 0;
+        this._store.state.translateY = viewport.translateY ?? 0;
+        this._store.state.scale = viewport.scale ?? 1;
         await this.initializeWorkspaceObjects(this._store.state.activeWorkspace.id);
     }
     async initializeWorkspaceObjects(workspaceId) {
@@ -2420,7 +2504,7 @@ class KritzelCore {
         const index = workspaces.findIndex(w => w.id === workspace.id);
         if (index !== -1) {
             workspaces[index] = workspace;
-            this._store.setState('workspaces', workspaces);
+            this._store.state.workspaces = workspaces;
         }
     }
     async deleteWorkspace(workspace) {
@@ -2430,7 +2514,7 @@ class KritzelCore {
         const objectRange = IDBKeyRange.bound([workspace.id], [workspace.id, '\uffff']);
         await this._database.deleteByRange('objects', objectRange);
         await this._database.delete('workspaces', workspace.id);
-        this._store.setState('workspaces', this._store.state.workspaces.filter(ws => ws.id !== workspace.id));
+        this._store.state.workspaces = this._store.state.workspaces.filter(ws => ws.id !== workspace.id);
     }
     rerender() {
         if (this._kritzelEngine) {
@@ -2467,18 +2551,27 @@ class KritzelCore {
         }
     }
     copy() {
-        this._store.setState('copiedObjects', this._store.state.selectionGroup.copy());
+        this._store.state.copiedObjects = this._store.state.selectionGroup.copy();
     }
     paste(x, y) {
         const copiedObjects = this._store.state.copiedObjects;
         copiedObjects.isSelected = true;
-        this._store.setState('copiedObjects', copiedObjects);
+        this._store.state.copiedObjects = copiedObjects;
         const adjustedX = x !== undefined ? x : this._store.state.copiedObjects.translateX + 25 / this._store.state.scale;
         const adjustedY = y !== undefined ? y : this._store.state.copiedObjects.translateY + 25 / this._store.state.scale;
         this._store.state.copiedObjects.updatePosition(adjustedX, adjustedY);
+        this._store.state.copiedObjects.updateZIndices(this._store.currentZIndex);
         const activeWorkspace = this._store.state.activeWorkspace;
-        this.store.state.copiedObjects.updateWorkspaceId(activeWorkspace.id);
-        this.store.state.copiedObjects.updateZIndices(this.store.currentZIndex);
+        if (this.store.state.copiedObjects.workspaceId !== activeWorkspace.id) {
+            this.store.state.copiedObjects.updateWorkspaceId(activeWorkspace.id);
+            if (x !== undefined && y !== undefined) {
+                this._store.state.copiedObjects.updatePosition(x, y);
+            }
+            else {
+                this.store.state.copiedObjects.centerInViewport();
+            }
+            this.engine.viewport.centerFitInViewport(copiedObjects);
+        }
         const commands = [];
         let previousSelectionGroup = null;
         if (this._store.state.selectionGroup !== null) {
@@ -2489,13 +2582,14 @@ class KritzelCore {
         const addCopiedObjectsAsSelectionGroupCommand = new AddSelectionGroupCommand(this, this, this._store.state.copiedObjects, previousSelectionGroup);
         commands.push(...addCopiedObjectsCommands, addCopiedObjectsAsSelectionGroupCommand);
         this.history.executeCommand(new BatchCommand(this, this, commands));
-        this._store.setState('isSelecting', false);
-        this._store.setState('copiedObjects', this._store.state.selectionGroup.copy());
+        this._store.state.isSelecting = false;
+        this._store.state.copiedObjects = this._store.state.selectionGroup.copy();
         this._store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
     }
     bringForward(object) {
-        const max = this._store.allObjects.length + 1;
         const objects = object ? [object] : this._store.state.selectionGroup.objects;
+        const allNonSelectionObjectsWithoutCurrent = this._store.allNonSelectionObjects.filter(o => objects.findIndex(obj => obj.id === o.id) === -1);
+        const max = allNonSelectionObjectsWithoutCurrent.length > 0 ? Math.max(...allNonSelectionObjectsWithoutCurrent.map(obj => obj.zIndex)) + 1 : 0;
         const increaseZIndexCommands = objects.map(obj => {
             if (obj.zIndex === max) {
                 return;
@@ -2505,8 +2599,9 @@ class KritzelCore {
         this.history.executeCommand(new BatchCommand(this, this, increaseZIndexCommands));
     }
     sendBackward(object) {
-        const min = 0;
         const objects = object ? [object] : this._store.state.selectionGroup.objects;
+        const allNonSelectionObjectsWithoutCurrent = this._store.allNonSelectionObjects.filter(o => objects.findIndex(obj => obj.id === o.id) === -1);
+        const min = allNonSelectionObjectsWithoutCurrent.length > 0 ? Math.min(...allNonSelectionObjectsWithoutCurrent.map(obj => obj.zIndex)) - 1 : 0;
         const decreaseZIndexCommands = objects.map(obj => {
             if (obj.zIndex === min) {
                 return;
@@ -2516,16 +2611,18 @@ class KritzelCore {
         this.history.executeCommand(new BatchCommand(this, this, decreaseZIndexCommands));
     }
     bringToFront(object) {
-        const max = Math.max(...this._store.allObjects.map(obj => obj.zIndex)) + 1;
         const objects = object ? [object] : this._store.state.selectionGroup.objects;
+        const allNonSelectionObjectsWithoutCurrent = this._store.allNonSelectionObjects.filter(o => objects.findIndex(obj => obj.id === o.id) === -1);
+        const max = Math.max(...allNonSelectionObjectsWithoutCurrent.map(obj => obj.zIndex)) + 1;
         const increaseZIndexCommands = objects.map(obj => {
             return new UpdateObjectCommand(this, this, obj, { zIndex: max });
         });
         this.history.executeCommand(new BatchCommand(this, this, increaseZIndexCommands));
     }
     sendToBack(object) {
-        const min = Math.min(...this._store.allObjects.map(obj => obj.zIndex)) - 1;
         const objects = object ? [object] : this._store.state.selectionGroup.objects;
+        const allNonSelectionObjectsWithoutCurrent = this._store.allNonSelectionObjects.filter(o => objects.findIndex(obj => obj.id === o.id) === -1);
+        const min = Math.min(...allNonSelectionObjectsWithoutCurrent.map(obj => obj.zIndex)) - 1;
         const decreaseZIndexCommands = objects.map(obj => {
             return new UpdateObjectCommand(this, this, obj, { zIndex: min });
         });
@@ -2541,7 +2638,7 @@ class KritzelCore {
             selectionGroup.addOrRemove(obj);
         });
         selectionGroup.isSelected = true;
-        this._store.setState('selectionGroup', selectionGroup);
+        this._store.state.selectionBox = selectionGroup;
         if (objects.length === 1) {
             selectionGroup.rotation = selectionGroup.objects[0].rotation;
         }
@@ -2558,7 +2655,7 @@ class KritzelCore {
                 selectionGroup.addOrRemove(obj);
             });
             selectionGroup.isSelected = true;
-            this._store.setState('isSelecting', false);
+            this._store.state.isSelecting = false;
             if (objectsInViewport.length === 1) {
                 selectionGroup.rotation = selectionGroup.objects[0].rotation;
             }
@@ -2569,18 +2666,25 @@ class KritzelCore {
     clearSelection() {
         const command = new RemoveSelectionGroupCommand(this, this._store.state.selectionGroup);
         this.history.executeCommand(command);
-        this._store.setState('selectionGroup', null);
-        this._store.setState('selectionBox', null);
-        this._store.setState('isSelecting', false);
-        this._store.setState('isResizeHandleSelected', false);
-        this._store.setState('isRotationHandleSelected', false);
+        this._store.state.selectionGroup = null;
+        this._store.state.selectionBox = null;
+        this._store.state.isSelecting = false;
+        this._store.state.isResizeHandleSelected = false;
+        this._store.state.isRotationHandleSelected = false;
         this.rerender();
     }
     resetActiveText() {
-        if (this._store.state.activeText && this._store.state.activeText.value === ' ') {
-            this.deleteObject(this._store.state.activeText.id, true);
+        if (this._store.state.activeText) {
+            if (this._store.state.activeText.isEmpty) {
+                console.log('Deleting empty text object', this._store.state.activeText.id);
+                this.deleteObject(this._store.state.activeText.id, true);
+            }
+            else {
+                console.log('Saving active text object before resetting', this._store.state.activeText.id);
+                this._store.state.activeText.save();
+            }
         }
-        this._store.setState('activeText', null);
+        this._store.state.activeText = null;
     }
     getObjectFromPointerEvent(event, selector = '.object') {
         const shadowRoot = this._store.state.host?.shadowRoot;
@@ -2635,7 +2739,7 @@ class KritzelCore {
     }
 }
 
-const kritzelEngineCss = ":host{display:block;position:relative;height:100%;width:100%;overflow:hidden;background-color:var(--kritzel-engine-background-color, #ffffff)}:host,:host *{touch-action:none;user-select:none}.debug-panel{position:absolute;pointer-events:none;top:0;right:0}.origin{position:relative;top:0;left:0;height:0;width:0;pointer-events:none;-webkit-transform-origin:top left;-moz-transform-origin:top left;transform-origin:top left;overflow:visible}.object{overflow:visible}textarea{all:unset;box-sizing:border-box;outline:none !important;border:none !important;overflow:visible}.resize-handle-overlay.top-left,.resize-handle-overlay.bottom-right{cursor:nwse-resize}.resize-handle-overlay.top-right,.resize-handle-overlay.bottom-left{cursor:nesw-resize}.rotation-handle-overlay{cursor:grab}";
+const kritzelEngineCss = ":host{display:block;position:relative;height:100%;width:100%;overflow:hidden;background-color:var(--kritzel-engine-background-color, #ffffff)}:host,:host *{touch-action:none;user-select:none}.ProseMirror{outline:none}p{margin:0;padding:0}.debug-panel{position:absolute;pointer-events:none;top:0;right:0}.origin{position:relative;top:0;left:0;height:0;width:0;pointer-events:none;-webkit-transform-origin:top left;-moz-transform-origin:top left;transform-origin:top left;overflow:visible}.object{overflow:visible}.resize-handle-overlay.top-left,.resize-handle-overlay.bottom-right{cursor:nwse-resize}.resize-handle-overlay.top-right,.resize-handle-overlay.bottom-left{cursor:nesw-resize}.rotation-handle-overlay{cursor:grab}.PlaygroundEditorTheme__quote{margin:0;margin-left:20px;margin-bottom:10px;font-size:15px;color:rgb(101, 103, 107);border-left-color:rgb(206, 208, 212);border-left-width:4px;border-left-style:solid;padding-left:16px}";
 
 const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine extends H {
     get host() { return this; }
@@ -2653,10 +2757,10 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
         if (newValue > ABSOLUTE_SCALE_MAX) {
             console.warn(`scaleMax cannot be greater than ${ABSOLUTE_SCALE_MAX}.`);
             this.scaleMax = ABSOLUTE_SCALE_MAX;
-            this.core.store.setState('scaleMax', this.scaleMax);
+            this.core.store.state.scaleMax = this.scaleMax;
         }
         else {
-            this.core.store.setState('scaleMax', newValue);
+            this.core.store.state.scaleMax = newValue;
         }
     }
     scaleMin = ABSOLUTE_SCALE_MIN;
@@ -2664,10 +2768,10 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
         if (newValue < ABSOLUTE_SCALE_MIN) {
             console.warn(`scaleMin cannot be less than ${ABSOLUTE_SCALE_MIN}.`);
             this.scaleMin = ABSOLUTE_SCALE_MIN;
-            this.core.store.setState('scaleMin', this.scaleMin);
+            this.core.store.state.scaleMin = this.scaleMin;
         }
         else {
-            this.core.store.setState('scaleMin', newValue);
+            this.core.store.state.scaleMin = newValue;
         }
     }
     isEngineReady;
@@ -2774,11 +2878,11 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
         tool?.onActivate();
     }
     async disable() {
-        this.core.store.setState('isEnabled', false);
+        this.core.store.state.isEnabled = false;
         this.core.rerender();
     }
     async enable() {
-        this.core.store.setState('isEnabled', true);
+        this.core.store.state.isEnabled = true;
         this.core.rerender();
     }
     async delete() {
@@ -2810,10 +2914,10 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
     }
     async hideContextMenu() {
         this.core.store.state.pointers.clear();
-        this.core.store.setState('isContextMenuVisible', false);
-        this.core.store.setState('selectionBox', null);
-        this.core.store.setState('isSelecting', false);
-        this.core.store.setState('isEnabled', true);
+        this.core.store.state.isContextMenuVisible = false;
+        this.core.store.state.selectionBox = null;
+        this.core.store.state.isSelecting = false;
+        this.core.store.state.isEnabled = true;
         this.core.rerender();
     }
     async getObjectById(id) {
@@ -2924,7 +3028,7 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
         await this.core.initializeWorkspace(this.workspace);
         this._registerStateChangeListeners();
         if (this.core.store.state.isReady === false) {
-            this.core.store.setState('isReady', true);
+            this.core.store.state.isReady = true;
             this.isEngineReady.emit(this.core.store.state);
         }
     }
@@ -2935,8 +3039,8 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
         if (!(activeTool instanceof KritzelSelectionTool)) {
             this.core.clearSelection();
         }
-        this.core.store.setState('skipContextMenu', false);
-        this.core.store.setState('copiedObjects', null);
+        this.core.store.state.skipContextMenu = false;
+        this.core.store.state.copiedObjects = null;
         this.activeToolChange.emit(activeTool);
         KritzelKeyboardHelper.forceHideKeyboard();
     }
@@ -2945,7 +3049,9 @@ 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: 'b65542448b46000bfb0f467b503b2c9d9e603eaa' }, h("div", { key: '8197e8fe5e768f89d5861cc04d4343d5753b8f88', class: "debug-panel", style: { display: this.core.store.state.debugInfo.showViewportInfo ? 'block' : 'none' } }, h("div", { key: '97b720f029fb8034453f28df04779011d641105e' }, "ActiveWorkspaceId: ", this.core.store.state?.activeWorkspace?.id), h("div", { key: 'e4601378a7d3dc92e66edcd5b7ff0022f890c1e3' }, "ActiveWorkspaceName: ", this.core.store.state?.activeWorkspace?.name), h("div", { key: '2506d664411df86fd4d59ee703dc1487c7394f15' }, "TranslateX: ", this.core.store.state?.translateX), h("div", { key: 'cada25c03ba66f54433cd09b83d9826f79c94c43' }, "TranslateY: ", this.core.store.state?.translateY), h("div", { key: '91853038c5c83116e9ffc296e9acc3b525bbed21' }, "ViewportWidth: ", this.core.store.state?.viewportWidth), h("div", { key: '0d3f9d47a5c5f9adab73a44436b214b537f5dd57' }, "ViewportHeight: ", this.core.store.state?.viewportHeight), h("div", { key: '079f2314aed15ea9b95ace2be564ff8e0f60acaa' }, "Scale: ", this.core.store.state?.scale), h("div", { key: '7d83d8ef32077e9b8d3bd1ddf23e5e1bcb187d0c' }, "ActiveTool: ", this.core.store.state?.activeTool?.name), h("div", { key: 'a63d135300e0a24b20e4ea4b631e123a0c492947' }, "HasViewportChanged: ", this.core.store.state?.hasViewportChanged ? 'true' : 'false'), h("div", { key: '258d3b009ea75024fc0d2d06000c7c4228312640' }, "IsEnabled: ", this.core.store.state?.isEnabled ? 'true' : 'false'), h("div", { key: 'c4dcff04abf12c675d995bad82407d0f5047ebd7' }, "IsScaling: ", this.core.store.state?.isScaling ? 'true' : 'false'), h("div", { key: 'fcd7bc6d221d0d3eb294ec7f6526a604ccc539d2' }, "IsPanning: ", this.core.store.state?.isPanning ? 'true' : 'false'), h("div", { key: '416ac549246b7a43bf644c536acbff1fb292eb52' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), h("div", { key: '7d061a0515e33ce836bb550250330c4e2819bc14' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), h("div", { key: '1debb3ee3e6a8297d427d09f61c8df8827bcfa37' }, "IsResizeHandleSelected: ", this.core.store.state.isResizeHandleSelected ? 'true' : 'false'), h("div", { key: '7d0fbcbc3e4c40ba21d144afd7d7b56b14227ddc' }, "IsRotationHandleSelected: ", this.core.store.state.isRotationHandleSelected ? 'true' : 'false'), h("div", { key: '90f5c8d1cf60eb90bb5d136d3457a97d831e361c' }, "IsDrawing: ", this.core.store.state.isDrawing ? 'true' : 'false'), h("div", { key: '122a2ad39d27d6f242a286bb2a8298687ab8cbb2' }, "IsWriting: ", this.core.store.state.isWriting ? 'true' : 'false'), h("div", { key: 'f5515be35f5037ec256198f2f916c61b78ab4ec2' }, "PointerX: ", this.core.store.state?.pointerX), h("div", { key: '2c16ecb22f4063450ef7d17be93ec1a0434a5abd' }, "PointerY: ", this.core.store.state?.pointerY), h("div", { key: '69b531a94a9b7430d70ce80ef3247211c67a516e' }, "SelectedObjects: ", this.core.store.state.selectionGroup?.objects.length || 0)), h("div", { key: '52b6e44b6fb2b59743f3c48fb1cc2616b19308c7', id: "origin", class: "origin", style: {
+        const viewportCenterX = this.core.store.state.viewportWidth / 2 + this.core.store.state.translateX;
+        const viewportCenterY = this.core.store.state.viewportHeight / 2 + this.core.store.state.translateY;
+        return (h(Host, { key: 'caabd1ecbf2faccdf7fa50d087a8957df4dd1039' }, h("div", { key: 'd757e7133ed9dd190c17c383fb716f760f2b3906', class: "debug-panel", style: { display: this.core.store.state.debugInfo.showViewportInfo ? 'block' : 'none' } }, h("div", { key: '00ced12dd956b6eecff7ac80429c0fd05cc7d1c3' }, "ActiveWorkspaceId: ", this.core.store.state?.activeWorkspace?.id), h("div", { key: '771f3269627fbe1ef962027f017cf6bdec7bcf8f' }, "ActiveWorkspaceName: ", this.core.store.state?.activeWorkspace?.name), h("div", { key: '0e49a60afdfb776a61f46b53bd6488786778bf77' }, "TranslateX: ", this.core.store.state?.translateX), h("div", { key: 'e0438479bc9e950ef2cbe88ed0aa0b8ec1888890' }, "TranslateY: ", this.core.store.state?.translateY), h("div", { key: '41d7261ed6b893a97fefb4bb6b199ffea51bd5fe' }, "ViewportWidth: ", this.core.store.state?.viewportWidth), h("div", { key: '7b6470008968eeebc5097252b3b9e3d172fd5d22' }, "ViewportHeight: ", this.core.store.state?.viewportHeight), h("div", { key: '4012ebdc3234ee2775021b38f385dfa0917736cb' }, "Scale: ", this.core.store.state?.scale), h("div", { key: '964d26a0ff4ff93dfa1cc928330c4fbdb0ec9b3d' }, "ActiveTool: ", this.core.store.state?.activeTool?.name), h("div", { key: 'cd68a81778d3e0f83f9453cd813538b2223541e8' }, "HasViewportChanged: ", this.core.store.state?.hasViewportChanged ? 'true' : 'false'), h("div", { key: '2ea80f3b4216a5e3d727c6c94d8b1782fbde80eb' }, "IsEnabled: ", this.core.store.state?.isEnabled ? 'true' : 'false'), h("div", { key: '02966d69182e95a8e91d5252f3dcfc19237caafd' }, "IsScaling: ", this.core.store.state?.isScaling ? 'true' : 'false'), h("div", { key: '85c06265f3af2b793d1827a40bb74b8837690ce3' }, "IsPanning: ", this.core.store.state?.isPanning ? 'true' : 'false'), h("div", { key: '1a2847a815fabc37cae3b7659844975df0c79a81' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), h("div", { key: 'd1482aa165ed6b430ec0e640971c47e233103e87' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), h("div", { key: '3534e455918183d822374edbc80b621939100bd1' }, "IsResizeHandleSelected: ", this.core.store.state.isResizeHandleSelected ? 'true' : 'false'), h("div", { key: '7b061a4b08956660ee305316eea2e1d13d66d5de' }, "IsRotationHandleSelected: ", this.core.store.state.isRotationHandleSelected ? 'true' : 'false'), h("div", { key: '61998d0f4ffc65f5bb155dfe434a3a07667ca5ee' }, "IsDrawing: ", this.core.store.state.isDrawing ? 'true' : 'false'), h("div", { key: 'bdaeb0af59e844351eb46caf7bbe7e246174ccfe' }, "IsWriting: ", this.core.store.state.isWriting ? 'true' : 'false'), h("div", { key: '47518514eb67c486583ee61e6747104b4720924a' }, "PointerX: ", this.core.store.state?.pointerX), h("div", { key: '9b2ef1c30ecb09bc7df7f765e099f87ea836d697' }, "PointerY: ", this.core.store.state?.pointerY), h("div", { key: '72a65218942809918fb5fa1978af83f9442c3ed8' }, "SelectedObjects: ", this.core.store.state.selectionGroup?.objects.length || 0), h("div", { key: '1f2ad6b79f28306becd7e83f21ca877c7d15941d' }, "ViewportCenter: (", viewportCenterX.toFixed(2), ", ", viewportCenterY.toFixed(2), ")")), h("div", { key: 'ae8afa17ce2a1c0a06a3579091d6f1616fe9b9a7', id: "origin", class: "origin", style: {
                 transform: `matrix(${this.core.store.state?.scale}, 0, 0, ${this.core.store.state?.scale}, ${this.core.store.state?.translateX}, ${this.core.store.state?.translateY})`,
             } }, this.core.store.state.objectsMap.allObjects()?.map(object => {
             return (h("div", { key: object.id, style: {
@@ -2983,22 +3089,16 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
                     height: '100%',
                     userSelect: 'none',
                     pointerEvents: 'none',
-                }, 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,
-                    fontSize: object.fontSize?.toString() + 'px',
-                    fontFamily: object.fontFamily,
-                    border: 'none',
-                    outline: 'none',
-                    resize: 'none',
-                    overflow: 'hidden',
-                    display: 'block',
-                    padding: '1px',
-                    whiteSpace: 'nowrap',
-                    pointerEvents: object.isReadonly ? 'none' : 'auto',
-                    cursor: object.isReadonly ? 'default' : 'text',
-                    caretColor: object.isReadonly ? 'transparent' : 'auto',
+                }, draggable: false, onDragStart: e => e.preventDefault() })), KritzelClassHelper.isInstanceOf(object, 'KritzelText') && (h("div", { ref: el => (el ? object.mount(el) : object.unmount()), onPointerDown: e => object.handlePointerDown(e), onPointerMove: e => object.handlePointerMove(e), onPointerUp: e => object.handlePointerUp(e), style: {
+                    minWidth: object.initialWidth + 'px',
+                    minHeight: object.initialHeight + 'px',
+                    maxWidth: '500px',
+                    height: 'auto',
+                    width: 'max-content',
+                    transformOrigin: 'top left',
+                    transform: `scale(${object.scaleFactor})`,
+                    backgroundColor: object.backgroundColor,
+                    overflow: 'visible'
                 } })), KritzelClassHelper.isInstanceOf(object, 'KritzelCustomElement') && (h("div", { ref: el => (el ? object.mount(el) : object.unmount()), style: {
                     width: '100%',
                     height: '100%',
@@ -3064,7 +3164,7 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
                 transform: this.core.store.state.currentPath?.transformationMatrix,
                 transformOrigin: 'top left',
                 overflow: 'visible',
-            }, viewBox: this.core.store.state.currentPath?.viewBox }, h("path", { key: '2fa37f509acc3573049fc01f22e41fdda6e4acd9', d: this.core.store.state.currentPath?.d, fill: this.core.store.state.currentPath?.fill, stroke: this.core.store.state.currentPath?.stroke }))), this.core.store.state.isContextMenuVisible && (h("kritzel-context-menu", { key: 'a17f9ff108cf509f3d6e20fc434cffb7a4d72530', class: "context-menu", ref: el => (this.contextMenuElement = el), items: this.core.store.state.contextMenuItems, objects: this.core.store.state.selectionGroup?.objects || [], style: {
+            }, viewBox: this.core.store.state.currentPath?.viewBox }, h("path", { key: '9428a1401021b38b8b811fd68af9e24d53301c08', d: this.core.store.state.currentPath?.d, fill: this.core.store.state.currentPath?.fill, stroke: this.core.store.state.currentPath?.stroke }))), this.core.store.state.isContextMenuVisible && (h("kritzel-context-menu", { key: '1ccc963df66e4210886717644503be6304c6c99f', class: "context-menu", ref: el => (this.contextMenuElement = el), items: this.core.store.state.contextMenuItems, objects: this.core.store.state.selectionGroup?.objects || [], style: {
                 position: 'fixed',
                 left: `${this.core.store.state.contextMenuX}px`,
                 top: `${this.core.store.state.contextMenuY}px`,
@@ -3075,7 +3175,7 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
                     y: (-this.core.store.state.translateY + this.core.store.state.contextMenuY) / this.core.store.state.scale,
                 }, this.core.store.state.selectionGroup?.objects);
                 this.hideContextMenu();
-            }, onClose: () => this.hideContextMenu() })), this.core.store.state?.activeTool instanceof KritzelEraserTool && !this.core.store.state.isScaling && h("kritzel-cursor-trail", { key: 'a22fa1dba0442fa77a7660ca230d4bb0236e10ea', core: this.core })));
+            }, onClose: () => this.hideContextMenu() })), this.core.store.state?.activeTool instanceof KritzelEraserTool && !this.core.store.state.isScaling && h("kritzel-cursor-trail", { key: '9b51e52c76f21be679491c21d1921d389d6619fc', core: this.core })));
     }
     static get watchers() { return {
         "workspace": ["onWorkspaceChange"],
@@ -3085,9 +3185,9 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
     static get style() { return kritzelEngineCss; }
 }, [257, "kritzel-engine", {
         "workspace": [16],
-        "activeTool": [16, "active-tool"],
-        "globalContextMenuItems": [16, "global-context-menu-items"],
-        "objectContextMenuItems": [16, "object-context-menu-items"],
+        "activeTool": [16],
+        "globalContextMenuItems": [16],
+        "objectContextMenuItems": [16],
         "scaleMax": [1026, "scale-max"],
         "scaleMin": [1026, "scale-min"],
         "forceUpdate": [32],
@@ -3155,6 +3255,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-KudVTtHk.js.map
+//# sourceMappingURL=p-C4nj29RW.js.map
 
-//# sourceMappingURL=p-KudVTtHk.js.map
+//# sourceMappingURL=p-C4nj29RW.js.map