kritzel-stencil 0.0.141 → 0.0.142

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

@@ -1,6 +1,6 @@
 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-BuDVaqTF.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-CZk591FE.js';
 import { K as KritzelWorkspace } from './p-YqK8ch2R.js';
 import { K as KritzelContextMenu, d as defineCustomElement$3 } from './p-DqsgZIHC.js';
 import { O as ObjectHelper } from './p-B0kd2rUI.js';
@@ -75,59 +75,6 @@ class BatchCommand extends KritzelBaseCommand {
     }
 }
 
-class KritzelCustomElement extends KritzelBaseObject {
-    __class__ = 'KritzelCustomElement';
-    element;
-    isInteractive = true;
-    constructor(config) {
-        super();
-        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(core, config) {
-        const object = new KritzelCustomElement(config);
-        object._core = core;
-        object.id = object.generateId();
-        object.workspaceId = core.store.state.activeWorkspace.id;
-        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 {
     object;
     constructor(core, initiator, object, skipHistory = false) {
@@ -135,13 +82,12 @@ class RemoveObjectCommand extends KritzelBaseCommand {
         this.object = object;
     }
     execute() {
+        this.object.isMounted = false;
         this._core.store.state.objectsMap.remove(object => object.id === this.object.id);
-        this._core.store.state.objectsMap.filter(object => object instanceof KritzelCustomElement).forEach(object => object.remount());
         this._core.deleteObjectFromDatabase(this.object.id);
     }
     undo() {
         this._core.store.state.objectsMap.insert(this.object);
-        this._core.store.state.objectsMap.filter(object => object instanceof KritzelCustomElement).forEach(object => object.remount());
         this._core.addObjectToDatabase(this.object);
     }
 }
@@ -204,7 +150,7 @@ class KritzelEraserTool extends KritzelBaseTool {
                     return new RemoveObjectCommand(this._core, this, object);
                 });
                 if (removeCommands.length > 0) {
-                    this._core.history.executeCommand(new BatchCommand(this._core, this, removeCommands));
+                    this._core.commandManager.executeCommand(new BatchCommand(this._core, this, removeCommands));
                 }
                 this._core.store.state.isErasing = false;
             }
@@ -219,7 +165,7 @@ class KritzelEraserTool extends KritzelBaseTool {
                     return new RemoveObjectCommand(this._core, this, object);
                 });
                 if (removeCommands.length > 0) {
-                    this._core.history.executeCommand(new BatchCommand(this._core, this, removeCommands));
+                    this._core.commandManager.executeCommand(new BatchCommand(this._core, this, removeCommands));
                 }
                 this._core.store.state.isErasing = false;
             }
@@ -370,10 +316,15 @@ class KritzelMoveHandler extends KritzelBaseHandler {
                 const clientY = event.clientY - this._core.store.offsetY;
                 this.endX = clientX;
                 this.endY = clientY;
-                this._core.store.state.selectionGroup.move(clientX, clientY, this.dragStartX, this.dragStartY);
-                this.dragStartX = clientX;
-                this.dragStartY = clientY;
-                this.hasMoved = true;
+                const moveDeltaX = Math.abs(clientX - this.startX);
+                const moveDeltaY = Math.abs(clientY - this.startY);
+                const moveThreshold = 5;
+                if (moveDeltaX > moveThreshold || moveDeltaY > moveThreshold) {
+                    this._core.store.state.selectionGroup.move(clientX, clientY, this.dragStartX, this.dragStartY);
+                    this.dragStartX = clientX;
+                    this.dragStartY = clientY;
+                    this.hasMoved = true;
+                }
             }
         }
         if (event.pointerType === 'touch') {
@@ -408,7 +359,7 @@ class KritzelMoveHandler extends KritzelBaseHandler {
             if (this._core.store.state.isDragging) {
                 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.commandManager.executeCommand(new MoveSelectionGroupCommand(this._core, this, this.endX, this.endY, this.startX, this.startY, true));
                     this._core.store.state.hasObjectsChanged = true;
                 }
             }
@@ -417,7 +368,7 @@ class KritzelMoveHandler extends KritzelBaseHandler {
             if (this._core.store.state.isDragging) {
                 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.commandManager.executeCommand(new MoveSelectionGroupCommand(this._core, this, this.endX, this.endY, this.startX, this.startY, true));
                     this._core.store.state.hasObjectsChanged = true;
                 }
             }
@@ -467,6 +418,7 @@ class KritzelResizeHandler extends KritzelBaseHandler {
     initialMouseY = 0;
     initialSize = { x: 0, y: 0, width: 0, height: 0 };
     newSize = { x: 0, y: 0, width: 0, height: 0 };
+    hasResized = false;
     constructor(core) {
         super(core);
     }
@@ -475,6 +427,7 @@ class KritzelResizeHandler extends KritzelBaseHandler {
         this.initialMouseY = 0;
         this.initialSize = { x: 0, y: 0, width: 0, height: 0 };
         this.newSize = { x: 0, y: 0, width: 0, height: 0 };
+        this.hasResized = false;
     }
     handlePointerDown(event) {
         if (event.pointerType === 'mouse') {
@@ -521,6 +474,15 @@ class KritzelResizeHandler extends KritzelBaseHandler {
                 const clientY = event.clientY - this._core.store.offsetY;
                 const dx = clientX - this.initialMouseX;
                 const dy = clientY - this.initialMouseY;
+                const resizeDeltaX = Math.abs(dx);
+                const resizeDeltaY = Math.abs(dy);
+                const resizeThreshold = 5;
+                if (resizeDeltaX > resizeThreshold || resizeDeltaY > resizeThreshold) {
+                    this.hasResized = true;
+                }
+                if (!this.hasResized) {
+                    return;
+                }
                 switch (this._core.store.state.resizeHandleType) {
                     case KritzelHandleType.TopLeft:
                         this.newSize.width = this.initialSize.width - dx;
@@ -561,6 +523,16 @@ class KritzelResizeHandler extends KritzelBaseHandler {
                 const clientY = Math.round(oneFingerTouch.clientY - this._core.store.offsetY);
                 const dx = clientX - this.initialMouseX;
                 const dy = clientY - this.initialMouseY;
+                const resizeDeltaX = Math.abs(dx);
+                const resizeDeltaY = Math.abs(dy);
+                const resizeThreshold = 5;
+                if (resizeDeltaX > resizeThreshold || resizeDeltaY > resizeThreshold) {
+                    clearTimeout(this._core.store.state.longTouchTimeout);
+                    this.hasResized = true;
+                }
+                if (!this.hasResized) {
+                    return;
+                }
                 switch (this._core.store.state.resizeHandleType) {
                     case KritzelHandleType.TopLeft:
                         this.newSize.width = this.initialSize.width - dx;
@@ -588,24 +560,27 @@ class KritzelResizeHandler extends KritzelBaseHandler {
                         break;
                 }
                 this._core.store.state.selectionGroup.resize(this.newSize.x, this.newSize.y, this.newSize.width, this.newSize.height);
-                clearTimeout(this._core.store.state.longTouchTimeout);
             }
         }
     }
     handlePointerUp(event) {
         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.state.isResizing = false;
-                this._core.store.state.hasObjectsChanged = true;
+                if (this.hasResized) {
+                    this._core.commandManager.executeCommand(new ResizeSelectionGroupCommand(this._core, this, structuredClone(this.initialSize), structuredClone(this.newSize)));
+                    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.state.isResizing = false;
-                this._core.store.state.hasObjectsChanged = true;
+                if (this.hasResized) {
+                    this._core.commandManager.executeCommand(new ResizeSelectionGroupCommand(this._core, this, structuredClone(this.initialSize), structuredClone(this.newSize)));
+                    this._core.store.state.hasObjectsChanged = true;
+                }
                 this.reset();
                 clearTimeout(this._core.store.state.longTouchTimeout);
             }
@@ -731,7 +706,7 @@ class KritzelRotationHandler extends KritzelBaseHandler {
     handlePointerUp(event) {
         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.commandManager.executeCommand(new RotateSelectionGroupCommand(this._core, this, this.rotation, this.initialSelectionGroupRotation));
                 this._core.store.state.isRotating = false;
                 this._core.store.state.hasObjectsChanged = true;
                 this.reset();
@@ -739,7 +714,7 @@ class KritzelRotationHandler extends KritzelBaseHandler {
         }
         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.commandManager.executeCommand(new RotateSelectionGroupCommand(this._core, this, this.rotation, this.initialSelectionGroupRotation));
                 this._core.store.state.isRotating = false;
                 this._core.store.state.hasObjectsChanged = true;
                 this.reset();
@@ -843,7 +818,7 @@ class KritzelSelectionHandler extends KritzelBaseHandler {
             if (KritzelEventHelper.isLeftClick(event)) {
                 const hasObjectsMoved = this._core.store.state.hasObjectsChanged;
                 if (this._core.store.state.selectionGroup?.objects.length === 1 && hasObjectsMoved === false) {
-                    this._core.store.state.selectionGroup.objects[0].edit();
+                    this._core.store.state.selectionGroup.objects[0].edit(event);
                 }
                 this._core.store.state.hasObjectsChanged = false;
                 if (this._core.store.state.isSelecting) {
@@ -862,7 +837,7 @@ class KritzelSelectionHandler extends KritzelBaseHandler {
             clearTimeout(this.touchStartTimeout);
             const hasObjectsMoved = this._core.store.state.hasObjectsChanged;
             if (this._core.store.state.selectionGroup?.objects.length === 1 && hasObjectsMoved === false) {
-                this._core.store.state.selectionGroup.objects[0].edit();
+                this._core.store.state.selectionGroup.objects[0].edit(event);
             }
             this._core.store.state.hasObjectsChanged = false;
             if (this._core.store.state.isSelecting) {
@@ -1005,7 +980,7 @@ class KritzelSelectionHandler extends KritzelBaseHandler {
         selectionGroup.addOrRemove(object);
         selectionGroup.isSelected = true;
         selectionGroup.rotation = object.rotation;
-        this._core.history.executeCommand(new AddSelectionGroupCommand(this._core, this, selectionGroup));
+        this._core.commandManager.executeCommand(new AddSelectionGroupCommand(this._core, this, selectionGroup));
     }
     addSelectedObjectsToSelectionGroup() {
         const selectedObjects = this._core.store.selectedObjects;
@@ -1022,7 +997,7 @@ class KritzelSelectionHandler extends KritzelBaseHandler {
         if (selectionGroup.length === 1) {
             selectionGroup.rotation = selectionGroup.objects[0].rotation;
         }
-        this._core.history.executeCommand(new AddSelectionGroupCommand(this._core, this, selectionGroup));
+        this._core.commandManager.executeCommand(new AddSelectionGroupCommand(this._core, this, selectionGroup));
     }
 }
 
@@ -1071,7 +1046,7 @@ class KritzelSelectionTool extends KritzelBaseTool {
                     this._core.store.state.selectionGroup &&
                     !this._core.store.state.isResizeHandleSelected &&
                     !this._core.store.state.isRotationHandleSelected) {
-                    this._core.history.executeCommand(new RemoveSelectionGroupCommand(this._core, this._core.store.state.selectionGroup));
+                    this._core.commandManager.executeCommand(new RemoveSelectionGroupCommand(this._core, this._core.store.state.selectionGroup));
                 }
                 if (selectedObject && selectedObject.isSelected === false && selectedObject?.objects.length === 1 && selectedObject.objects[0].isInteractive) {
                     return;
@@ -1100,7 +1075,7 @@ class KritzelSelectionTool extends KritzelBaseTool {
                     this._core.store.state.selectionGroup &&
                     !this._core.store.state.isResizeHandleSelected &&
                     !this._core.store.state.isRotationHandleSelected) {
-                    this._core.history.executeCommand(new RemoveSelectionGroupCommand(this._core, this._core.store.state.selectionGroup));
+                    this._core.commandManager.executeCommand(new RemoveSelectionGroupCommand(this._core, this._core.store.state.selectionGroup));
                 }
             }
             this.rotationHandler.handlePointerDown(event);
@@ -1194,6 +1169,65 @@ class KritzelSelectionTool extends KritzelBaseTool {
     }
 }
 
+class KritzelCustomElement extends KritzelBaseObject {
+    __class__ = 'KritzelCustomElement';
+    element;
+    isInteractive = true;
+    constructor(config) {
+        super();
+        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(core, config) {
+        const object = new KritzelCustomElement(config);
+        object._core = core;
+        object.id = object.generateId();
+        object.workspaceId = core.store.state.activeWorkspace.id;
+        return object;
+    }
+    mount(element) {
+        if (element === null) {
+            return;
+        }
+        // If already mounted to the same element and content is still attached, skip
+        if (this.isMounted && this.elementRef === element && this.element.parentElement === element) {
+            return;
+        }
+        this.elementRef = element;
+        this.isMounted = true;
+        // Clear existing content and append the element
+        this.elementRef.innerHTML = '';
+        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 KritzelReviver {
     _core;
     constructor(core) {
@@ -1501,7 +1535,7 @@ class KritzelImageTool extends KritzelBaseTool {
         selectionGroup.isSelected = true;
         const addImageCommand = new AddObjectCommand(this._core, this, image);
         const addSelectionGroupCommand = new AddSelectionGroupCommand(this._core, this, selectionGroup);
-        this._core.history.executeCommand(new BatchCommand(this._core, this, [addImageCommand, addSelectionGroupCommand]));
+        this._core.commandManager.executeCommand(new BatchCommand(this._core, this, [addImageCommand, addSelectionGroupCommand]));
         this._core.store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
     }
     handleCancel() {
@@ -1514,6 +1548,7 @@ const ABSOLUTE_SCALE_MIN = 0.0001;
 
 class KritzelViewport {
     _core;
+    _debounceUpdate;
     initialTouchDistance = 0;
     startX = 0;
     startY = 0;
@@ -1526,6 +1561,16 @@ class KritzelViewport {
         this._core.store.state.startY = 0;
         this._core.store.state.translateX = 0;
         this._core.store.state.translateY = 0;
+        this._debounceUpdate = this.debounce(() => {
+            this._core.updateWorkspaceViewport(this._core.store.state.translateX, this._core.store.state.translateY, this._core.store.state.scale);
+        }, 0);
+    }
+    debounce(func, delay) {
+        let timeoutId;
+        return () => {
+            clearTimeout(timeoutId);
+            timeoutId = setTimeout(func, delay);
+        };
     }
     handleResize() {
         this._core.store.state.viewportWidth = this._core.store.state.host.clientWidth;
@@ -1576,7 +1621,7 @@ class KritzelViewport {
                 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);
+                this._debounceUpdate();
             }
         }
         if (event.pointerType === 'touch') {
@@ -1612,7 +1657,7 @@ class KritzelViewport {
                 this.startY = midpointY;
                 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);
+                this._debounceUpdate();
             }
         }
     }
@@ -1646,7 +1691,7 @@ class KritzelViewport {
         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);
+        this._debounceUpdate();
     }
     centerFitInViewport(object) {
         const scaleX = this._core.store.state.viewportWidth / (object.rotatedBoundingBox.width * 1.1);
@@ -1673,7 +1718,7 @@ class KritzelViewport {
         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);
+        this._debounceUpdate();
         setTimeout(() => {
             this._core.store.state.isScaling = false;
         }, 300);
@@ -1684,7 +1729,7 @@ class KritzelViewport {
         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);
+        this._debounceUpdate();
     }
 }
 
@@ -1778,7 +1823,7 @@ class KritzelContextMenuHandler extends KritzelBaseHandler {
                 new RemoveSelectionGroupCommand(this._core, this._core.store.state.selectionGroup),
                 new AddSelectionGroupCommand(this._core, this, selectionGroup),
             ]);
-            this._core.history.executeCommand(batch);
+            this._core.commandManager.executeCommand(batch);
         }
         this._core.store.state.contextMenuItems = this._core.store.state.selectionGroup ? this.objectContextMenuItems : this.globalContextMenuItems;
         let x = event.clientX - this._core.store.offsetX;
@@ -2181,47 +2226,24 @@ class KritzelHistory {
     _core;
     undoStack;
     redoStack;
-    previousViewport;
     constructor(core) {
         this._core = core;
         this.undoStack = new KritzelCircularBuffer(this._core.store.state.historyBufferSize);
         this.redoStack = new KritzelCircularBuffer(this._core.store.state.historyBufferSize);
-        this.previousViewport = {
-            scale: this._core.store.state.scale,
-            scaleStep: this._core.store.state.scaleStep,
-            translateX: this._core.store.state.translateX,
-            translateY: this._core.store.state.translateY,
-        };
     }
     reset() {
         this.undoStack.clear();
         this.redoStack.clear();
-        this.previousViewport = {
+        this._core.commandManager.previousViewport = {
             scale: this._core.store.state.scale,
             scaleStep: this._core.store.state.scaleStep,
             translateX: this._core.store.state.translateX,
             translateY: this._core.store.state.translateY
         };
     }
-    executeCommand(command) {
-        if (this._core.store.state.hasViewportChanged) {
-            this.addUpdateViewportCommand();
-        }
-        command.execute();
-        if (command.skipHistory === false) {
-            if (this._core.store.state.debugInfo.logCommands) {
-                console.info('add', command);
-            }
-            this.undoStack.add(command);
-            if (this.redoStack.isEmpty() === false) {
-                this.redoStack.clear();
-            }
-        }
-        this._core.rerender();
-    }
     undo() {
         if (this._core.store.state.hasViewportChanged) {
-            const command = new UpdateViewportCommand(this._core, this, this.previousViewport);
+            const command = new UpdateViewportCommand(this._core, this, this._core.commandManager.previousViewport);
             command.undo();
             this._core.store.state.hasViewportChanged = false;
             this._core.rerender();
@@ -2247,21 +2269,6 @@ class KritzelHistory {
         }
         this._core.rerender();
     }
-    addUpdateViewportCommand() {
-        const command = new UpdateViewportCommand(this._core, this, this.previousViewport);
-        command.execute();
-        this.undoStack.add(command);
-        if (this.redoStack.isEmpty() === false) {
-            this.redoStack.clear();
-        }
-        this._core.store.state.hasViewportChanged = false;
-        this.previousViewport = {
-            scale: this._core.store.state.scale,
-            scaleStep: this._core.store.state.scaleStep,
-            translateX: this._core.store.state.translateX,
-            translateY: this._core.store.state.translateY,
-        };
-    }
 }
 
 class KritzelObjectMap {
@@ -2358,10 +2365,61 @@ class KritzelStore {
     }
 }
 
+class KritzelCommandManager {
+    _core;
+    _history;
+    previousViewport;
+    constructor(core) {
+        this._core = core;
+        this._history = this._core.history;
+        this.previousViewport = {
+            scale: this._core.store.state.scale,
+            scaleStep: this._core.store.state.scaleStep,
+            translateX: this._core.store.state.translateX,
+            translateY: this._core.store.state.translateY,
+        };
+    }
+    executeCommand(command) {
+        if (this._core.store.state.hasViewportChanged) {
+            this.addUpdateViewportCommand();
+        }
+        command.execute();
+        if (this.isSkipped(command) === false) {
+            if (this._core.store.state.debugInfo.logCommands) {
+                console.log('execute', command);
+            }
+            this._history.undoStack.add(command);
+            if (this._history.redoStack.isEmpty() === false) {
+                this._history.redoStack.clear();
+            }
+        }
+        this._core.rerender();
+    }
+    isSkipped(command) {
+        return command.skipHistory === true;
+    }
+    addUpdateViewportCommand() {
+        const command = new UpdateViewportCommand(this._core, this, this.previousViewport);
+        command.execute();
+        this._history.undoStack.add(command);
+        if (this._history.redoStack.isEmpty() === false) {
+            this._history.redoStack.clear();
+        }
+        this._core.store.state.hasViewportChanged = false;
+        this.previousViewport = {
+            scale: this._core.store.state.scale,
+            scaleStep: this._core.store.state.scaleStep,
+            translateX: this._core.store.state.translateX,
+            translateY: this._core.store.state.translateY,
+        };
+    }
+}
+
 class KritzelCore {
     _kritzelEngine;
     _store;
     _history;
+    _commandManager;
     _database;
     get engine() {
         return this._kritzelEngine;
@@ -2369,6 +2427,9 @@ class KritzelCore {
     get history() {
         return this._history;
     }
+    get commandManager() {
+        return this._commandManager;
+    }
     get database() {
         return this._database;
     }
@@ -2379,6 +2440,7 @@ class KritzelCore {
         this._kritzelEngine = kritzelEngine;
         this._store = new KritzelStore(DEFAULT_ENGINE_STATE);
         this._history = new KritzelHistory(this);
+        this._commandManager = new KritzelCommandManager(this);
         this._database = new KritzelDatabase('kritzelDB', 1, this._store.state.debugInfo.logDatabase);
     }
     async initializeDatabase() {
@@ -2531,7 +2593,7 @@ class KritzelCore {
     }
     deselectAllObjects() {
         if (this._store.state.selectionGroup) {
-            this._history.executeCommand(new RemoveSelectionGroupCommand(this, this));
+            this.commandManager.executeCommand(new RemoveSelectionGroupCommand(this, this, true));
         }
     }
     delete() {
@@ -2541,13 +2603,13 @@ class KritzelCore {
         const deleteSelectedObjectsCommand = this._store.state.selectionGroup.objects.map(obj => new RemoveObjectCommand(this, this._store.state.selectionGroup, obj));
         const removeSelectionGroupCommand = new RemoveSelectionGroupCommand(this, this._store.state.selectionGroup);
         const commands = [...deleteSelectedObjectsCommand, removeSelectionGroupCommand];
-        this.history.executeCommand(new BatchCommand(this, this._store.state.selectionGroup, commands));
+        this.commandManager.executeCommand(new BatchCommand(this, this._store.state.selectionGroup, commands));
     }
     deleteObject(id, skipHistory = false) {
         const object = this.findObjectById(id);
         if (object) {
             const removeObjectCommand = new RemoveObjectCommand(this, this, object, skipHistory);
-            this.history.executeCommand(removeObjectCommand);
+            this.commandManager.executeCommand(removeObjectCommand);
         }
     }
     copy() {
@@ -2581,7 +2643,7 @@ class KritzelCore {
         const addCopiedObjectsCommands = this._store.state.copiedObjects.objects.map(obj => new AddObjectCommand(this, this, obj));
         const addCopiedObjectsAsSelectionGroupCommand = new AddSelectionGroupCommand(this, this, this._store.state.copiedObjects, previousSelectionGroup);
         commands.push(...addCopiedObjectsCommands, addCopiedObjectsAsSelectionGroupCommand);
-        this.history.executeCommand(new BatchCommand(this, this, commands));
+        this.commandManager.executeCommand(new BatchCommand(this, this, commands));
         this._store.state.isSelecting = false;
         this._store.state.copiedObjects = this._store.state.selectionGroup.copy();
         this._store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
@@ -2596,7 +2658,7 @@ class KritzelCore {
             }
             return new UpdateObjectCommand(this, this, obj, { zIndex: obj.zIndex + 1 });
         });
-        this.history.executeCommand(new BatchCommand(this, this, increaseZIndexCommands));
+        this.commandManager.executeCommand(new BatchCommand(this, this, increaseZIndexCommands));
     }
     sendBackward(object) {
         const objects = object ? [object] : this._store.state.selectionGroup.objects;
@@ -2608,7 +2670,7 @@ class KritzelCore {
             }
             return new UpdateObjectCommand(this, this, obj, { zIndex: obj.zIndex - 1 });
         });
-        this.history.executeCommand(new BatchCommand(this, this, decreaseZIndexCommands));
+        this.commandManager.executeCommand(new BatchCommand(this, this, decreaseZIndexCommands));
     }
     bringToFront(object) {
         const objects = object ? [object] : this._store.state.selectionGroup.objects;
@@ -2617,7 +2679,7 @@ class KritzelCore {
         const increaseZIndexCommands = objects.map(obj => {
             return new UpdateObjectCommand(this, this, obj, { zIndex: max });
         });
-        this.history.executeCommand(new BatchCommand(this, this, increaseZIndexCommands));
+        this.commandManager.executeCommand(new BatchCommand(this, this, increaseZIndexCommands));
     }
     sendToBack(object) {
         const objects = object ? [object] : this._store.state.selectionGroup.objects;
@@ -2626,7 +2688,7 @@ class KritzelCore {
         const decreaseZIndexCommands = objects.map(obj => {
             return new UpdateObjectCommand(this, this, obj, { zIndex: min });
         });
-        this.history.executeCommand(new BatchCommand(this, this, decreaseZIndexCommands));
+        this.commandManager.executeCommand(new BatchCommand(this, this, decreaseZIndexCommands));
     }
     selectObjects(objects) {
         if (objects.length === 0) {
@@ -2642,7 +2704,7 @@ class KritzelCore {
         if (objects.length === 1) {
             selectionGroup.rotation = selectionGroup.objects[0].rotation;
         }
-        this.history.executeCommand(new AddSelectionGroupCommand(this, this, selectionGroup));
+        this.commandManager.executeCommand(new AddSelectionGroupCommand(this, this, selectionGroup));
     }
     selectAllObjectsInViewport() {
         const objectsInViewport = this._store.state.objectsMap
@@ -2659,13 +2721,13 @@ class KritzelCore {
             if (objectsInViewport.length === 1) {
                 selectionGroup.rotation = selectionGroup.objects[0].rotation;
             }
-            this.history.executeCommand(new AddSelectionGroupCommand(this, this, selectionGroup));
+            this.commandManager.executeCommand(new AddSelectionGroupCommand(this, this, selectionGroup));
             this._store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
         }
     }
     clearSelection() {
-        const command = new RemoveSelectionGroupCommand(this, this._store.state.selectionGroup);
-        this.history.executeCommand(command);
+        const command = new RemoveSelectionGroupCommand(this, this);
+        this.commandManager.executeCommand(command);
         this._store.state.selectionGroup = null;
         this._store.state.selectionBox = null;
         this._store.state.isSelecting = false;
@@ -2676,11 +2738,9 @@ class KritzelCore {
     resetActiveText() {
         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();
             }
         }
@@ -2737,15 +2797,21 @@ class KritzelCore {
         const worldY = yWithoutTranslate / this._store.state.scale;
         return { x: worldX, y: worldY };
     }
+    beforeWorkspaceChange() {
+        this.resetActiveText();
+        this.clearSelection();
+        this._store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
+    }
 }
 
-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 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,h1,h2,h3,h4,h5,h6,blockquote,pre{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; }
     workspace;
     onWorkspaceChange(newWorkspace) {
         if (this.core.store.state.activeWorkspace !== newWorkspace) {
+            this.core.beforeWorkspaceChange();
             this.core.initializeWorkspace(newWorkspace);
         }
     }
@@ -2931,19 +2997,19 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
         object.scale = object.scale ? object.scale : this.core.store.state.scale;
         object.zIndex = this.core.store.currentZIndex;
         const command = new AddObjectCommand(this.core, this, object);
-        this.core.history.executeCommand(command);
+        this.core.commandManager.executeCommand(command);
         return object;
     }
     async updateObject(object, updatedProperties) {
         this.core.deselectAllObjects();
         const command = new UpdateObjectCommand(this.core, this, object, updatedProperties);
-        this.core.history.executeCommand(command);
+        this.core.commandManager.executeCommand(command);
         return object;
     }
     async removeObject(object) {
         this.core.deselectAllObjects();
         const command = new RemoveObjectCommand(this.core, this, object);
-        this.core.history.executeCommand(command);
+        this.core.commandManager.executeCommand(command);
         return object;
     }
     async getSelectedObjects() {
@@ -2967,7 +3033,7 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
     async centerObjectInViewport(object) {
         object.centerInViewport();
         const command = new UpdateObjectCommand(this.core, this, object, object);
-        this.core.history.executeCommand(command);
+        this.core.commandManager.executeCommand(command);
         return object;
     }
     async getCopiedObjects() {
@@ -3038,11 +3104,16 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
     _handleActiveToolChange(activeTool) {
         if (!(activeTool instanceof KritzelSelectionTool)) {
             this.core.clearSelection();
+            this.core.store.state.selectionBox = null;
+            this.core.store.state.isSelecting = false;
+            this.core.store.state.isResizeHandleSelected = false;
+            this.core.store.state.isRotationHandleSelected = false;
         }
         this.core.store.state.skipContextMenu = false;
         this.core.store.state.copiedObjects = null;
         this.activeToolChange.emit(activeTool);
         KritzelKeyboardHelper.forceHideKeyboard();
+        this.core.rerender();
     }
     render() {
         const computedStyle = window.getComputedStyle(this.host);
@@ -3051,7 +3122,7 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
         const baseHandleTouchSize = baseHandleSize * 2 < 14 ? 14 : baseHandleSize;
         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: {
+        return (h(Host, { key: 'f7fc3c4c6a91ccdabb83832671e36ebf49ce56c0' }, h("div", { key: 'f6a2ce9e78a1d0e9ea0590035f5b8811f62c8633', class: "debug-panel", style: { display: this.core.store.state.debugInfo.showViewportInfo ? 'block' : 'none' } }, h("div", { key: '5752045746f275223bd42c16dd7e848adaaae9f2' }, "ActiveWorkspaceId: ", this.core.store.state?.activeWorkspace?.id), h("div", { key: 'd99595b135243a7b69a583be33f7b195908ec716' }, "ActiveWorkspaceName: ", this.core.store.state?.activeWorkspace?.name), h("div", { key: '7cecdccad47d3957370ea923f3dfbcd618b5d28e' }, "TranslateX: ", this.core.store.state?.translateX), h("div", { key: '3a5ed989f2343eda92c7c81855c785dbf58fa770' }, "TranslateY: ", this.core.store.state?.translateY), h("div", { key: 'b78074a29463276300ce498b2ddb328cef9026cd' }, "ViewportWidth: ", this.core.store.state?.viewportWidth), h("div", { key: 'd4c8dcfddfa1984eedf695d74f9401fc3284c60b' }, "ViewportHeight: ", this.core.store.state?.viewportHeight), h("div", { key: '566b6dc9afd904ee49e59587ed664e5f46decead' }, "Scale: ", this.core.store.state?.scale), h("div", { key: 'd3feb7a11727c4337ca75a26b3275a0b5d639961' }, "ActiveTool: ", this.core.store.state?.activeTool?.name), h("div", { key: '3991c34df53c7d6fd97c83b0d4b8c9fb438c88fc' }, "HasViewportChanged: ", this.core.store.state?.hasViewportChanged ? 'true' : 'false'), h("div", { key: '5a4244b43871f96d08144483352064804f04e538' }, "IsEnabled: ", this.core.store.state?.isEnabled ? 'true' : 'false'), h("div", { key: '197655c09e24d624ea4dcd312169aeb449ed57ce' }, "IsScaling: ", this.core.store.state?.isScaling ? 'true' : 'false'), h("div", { key: 'a3e4a75a9853c8cee1485cbf8621377466babf90' }, "IsPanning: ", this.core.store.state?.isPanning ? 'true' : 'false'), h("div", { key: '171e0df3e1856e9fe8cd18be5c258c7472317453' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), h("div", { key: '66f5a56333dbac1da34e01f5ee1f577e1a964701' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), h("div", { key: 'b869e07b76c2fa21ab5383788e81a40ffdad1b2c' }, "IsResizeHandleSelected: ", this.core.store.state.isResizeHandleSelected ? 'true' : 'false'), h("div", { key: 'd936326f8ea675e170d418f4e97a5d46057bc385' }, "IsRotationHandleSelected: ", this.core.store.state.isRotationHandleSelected ? 'true' : 'false'), h("div", { key: '8594489402204ae4a9cd1bc7795169dbfa2d633d' }, "IsDrawing: ", this.core.store.state.isDrawing ? 'true' : 'false'), h("div", { key: 'f7a254dc35bfe6d42c32d25d0f277b211d86b03f' }, "IsWriting: ", this.core.store.state.isWriting ? 'true' : 'false'), h("div", { key: '053ebd21504bfa3622e4b3e965e39f707c19794d' }, "PointerX: ", this.core.store.state?.pointerX), h("div", { key: 'f330c65821326062874441355352134927760d61' }, "PointerY: ", this.core.store.state?.pointerY), h("div", { key: 'f6c6902562f3e74afa3a0426e72b0c803977250b' }, "SelectedObjects: ", this.core.store.state.selectionGroup?.objects.length || 0), h("div", { key: '99a2d4280d5e79d7dd9a7a27d809e70f90eac38b' }, "ViewportCenter: (", viewportCenterX.toFixed(2), ", ", viewportCenterY.toFixed(2), ")")), h("div", { key: 'dac21fa0ac9487b74c89ac7408e80d9fb89b4558', 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: {
@@ -3079,17 +3150,17 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
                     borderStyle: 'solid',
                     padding: object.padding + 'px',
                     overflow: 'visible',
-                } }, KritzelClassHelper.isInstanceOf(object, 'KritzelPath') && (h("svg", { ref: el => (el ? object.mount(el) : object.unmount()), xmlns: "http://www.w3.org/2000/svg", style: {
+                } }, KritzelClassHelper.isInstanceOf(object, 'KritzelPath') && (h("svg", { ref: el => object.mount(el), xmlns: "http://www.w3.org/2000/svg", style: {
                     height: object?.height.toString(),
                     width: object?.width.toString(),
                     position: 'absolute',
                     overflow: 'visible',
-                }, viewBox: object?.viewBox }, h("path", { d: object?.d, fill: object.fill, stroke: object?.stroke }))), KritzelClassHelper.isInstanceOf(object, 'KritzelImage') && (h("img", { ref: el => (el ? object.mount(el) : object.unmount()), src: object.src, style: {
+                }, viewBox: object?.viewBox }, h("path", { d: object?.d, fill: object.fill, stroke: object?.stroke }))), KritzelClassHelper.isInstanceOf(object, 'KritzelImage') && (h("img", { ref: el => object.mount(el), src: object.src, style: {
                     width: '100%',
                     height: '100%',
                     userSelect: 'none',
                     pointerEvents: 'none',
-                }, 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: {
+                }, draggable: false, onDragStart: e => e.preventDefault() })), KritzelClassHelper.isInstanceOf(object, 'KritzelText') && (h("div", { ref: el => object.mount(el), 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',
@@ -3098,17 +3169,17 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
                     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: {
+                    overflow: 'visible',
+                } })), KritzelClassHelper.isInstanceOf(object, 'KritzelCustomElement') && (h("div", { ref: el => object.mount(el), 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: {
+                } })), KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionGroup') && (h("div", { ref: el => object.mount(el), style: {
                     width: '100%',
                     height: '100%',
-                } })), KritzelClassHelper.isInstanceOf(object, 'KrtizelSelectionBox') && (h("div", { ref: el => (el ? object.mount(el) : object.unmount()), style: {
+                } })), KritzelClassHelper.isInstanceOf(object, 'KrtizelSelectionBox') && (h("div", { ref: el => object.mount(el), style: {
                     width: '100%',
                     height: '100%',
                     backgroundColor: KritzelDevicesHelper.isFirefox() ? object.backgroundColor : 'transparent',
@@ -3155,7 +3226,7 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
                 }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "rotation-handle-overlay", cx: object.totalWidth / 2, cy: -((15 * object.scale) / this.core.store.state?.scale), r: `${(baseHandleTouchSize * object.scale) / this.core.store.state?.scale}`, style: {
                     fill: 'transparent',
                     cursor: 'grab',
-                }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("g", { style: { display: this.core.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)))))));
+                }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("g", { style: { display: this.core.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' } }, "Id: ", object.id), h("div", { style: { whiteSpace: 'nowrap' } }, "width: ", object.width), h("div", { style: { whiteSpace: 'nowrap' } }, "height: ", object.height)))))));
         }), h("svg", { key: "current-path", class: "object", xmlns: "http://www.w3.org/2000/svg", width: this.core.store.state.currentPath?.width, height: this.core.store.state.currentPath?.height, style: {
                 left: '0',
                 top: '0',
@@ -3164,7 +3235,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: '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: {
+            }, viewBox: this.core.store.state.currentPath?.viewBox }, h("path", { key: 'f3aaf24804430eeb0308a15ae4a38df302d0566f', 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: 'd99a76a11b613167d5723d1c16e9289e45eee8a3', 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`,
@@ -3175,7 +3246,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: '9b51e52c76f21be679491c21d1921d389d6619fc', core: this.core })));
+            }, onClose: () => this.hideContextMenu() })), this.core.store.state?.activeTool instanceof KritzelEraserTool && !this.core.store.state.isScaling && h("kritzel-cursor-trail", { key: 'fc7c474156442dfb5c057ef4ed4f0e5f015c2502', core: this.core })));
     }
     static get watchers() { return {
         "workspace": ["onWorkspaceChange"],
@@ -3255,6 +3326,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-C4nj29RW.js.map
+//# sourceMappingURL=p-CziwfEQh.js.map
 
-//# sourceMappingURL=p-C4nj29RW.js.map
+//# sourceMappingURL=p-CziwfEQh.js.map