kritzel-stencil 0.0.141 → 0.0.142

package/dist/cjs/index.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BKstgWru.js');
+var index = require('./index-SaGfCHX3.js');
 
 
 

package/dist/cjs/kritzel-color_22.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-DcTwXs_q.js');
-var index$1 = require('./index-BKstgWru.js');
+var index$1 = require('./index-SaGfCHX3.js');
 
 const kritzelColorCss = ":host{display:flex}.checkerboard-bg{background:repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%) 50% / 8px 8px;position:relative;overflow:hidden}.color-circle{width:24px;height:24px;border-radius:50%;box-sizing:border-box;display:block}.color-circle.white{border:1px solid var(--kritzel-color-palette-circle-border-color, #dddcdc)}";
 
@@ -861,6 +861,7 @@ KritzelEditor.style = kritzelEditorCss;
 
 class KritzelViewport {
     _core;
+    _debounceUpdate;
     initialTouchDistance = 0;
     startX = 0;
     startY = 0;
@@ -873,6 +874,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;
@@ -923,7 +934,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') {
@@ -959,7 +970,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();
             }
         }
     }
@@ -993,7 +1004,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);
@@ -1020,7 +1031,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);
@@ -1031,7 +1042,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();
     }
 }
 
@@ -1125,7 +1136,7 @@ class KritzelContextMenuHandler extends index$1.KritzelBaseHandler {
                 new index$1.RemoveSelectionGroupCommand(this._core, this._core.store.state.selectionGroup),
                 new index$1.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;
@@ -1528,47 +1539,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();
@@ -1594,21 +1582,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 {
@@ -1705,10 +1678,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;
@@ -1716,6 +1740,9 @@ class KritzelCore {
     get history() {
         return this._history;
     }
+    get commandManager() {
+        return this._commandManager;
+    }
     get database() {
         return this._database;
     }
@@ -1726,6 +1753,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() {
@@ -1878,7 +1906,7 @@ class KritzelCore {
     }
     deselectAllObjects() {
         if (this._store.state.selectionGroup) {
-            this._history.executeCommand(new index$1.RemoveSelectionGroupCommand(this, this));
+            this.commandManager.executeCommand(new index$1.RemoveSelectionGroupCommand(this, this, true));
         }
     }
     delete() {
@@ -1888,13 +1916,13 @@ class KritzelCore {
         const deleteSelectedObjectsCommand = this._store.state.selectionGroup.objects.map(obj => new index$1.RemoveObjectCommand(this, this._store.state.selectionGroup, obj));
         const removeSelectionGroupCommand = new index$1.RemoveSelectionGroupCommand(this, this._store.state.selectionGroup);
         const commands = [...deleteSelectedObjectsCommand, removeSelectionGroupCommand];
-        this.history.executeCommand(new index$1.BatchCommand(this, this._store.state.selectionGroup, commands));
+        this.commandManager.executeCommand(new index$1.BatchCommand(this, this._store.state.selectionGroup, commands));
     }
     deleteObject(id, skipHistory = false) {
         const object = this.findObjectById(id);
         if (object) {
             const removeObjectCommand = new index$1.RemoveObjectCommand(this, this, object, skipHistory);
-            this.history.executeCommand(removeObjectCommand);
+            this.commandManager.executeCommand(removeObjectCommand);
         }
     }
     copy() {
@@ -1928,7 +1956,7 @@ class KritzelCore {
         const addCopiedObjectsCommands = this._store.state.copiedObjects.objects.map(obj => new index$1.AddObjectCommand(this, this, obj));
         const addCopiedObjectsAsSelectionGroupCommand = new index$1.AddSelectionGroupCommand(this, this, this._store.state.copiedObjects, previousSelectionGroup);
         commands.push(...addCopiedObjectsCommands, addCopiedObjectsAsSelectionGroupCommand);
-        this.history.executeCommand(new index$1.BatchCommand(this, this, commands));
+        this.commandManager.executeCommand(new index$1.BatchCommand(this, this, commands));
         this._store.state.isSelecting = false;
         this._store.state.copiedObjects = this._store.state.selectionGroup.copy();
         this._store.setState('activeTool', index$1.KritzelToolRegistry.getTool('selection'));
@@ -1943,7 +1971,7 @@ class KritzelCore {
             }
             return new index$1.UpdateObjectCommand(this, this, obj, { zIndex: obj.zIndex + 1 });
         });
-        this.history.executeCommand(new index$1.BatchCommand(this, this, increaseZIndexCommands));
+        this.commandManager.executeCommand(new index$1.BatchCommand(this, this, increaseZIndexCommands));
     }
     sendBackward(object) {
         const objects = object ? [object] : this._store.state.selectionGroup.objects;
@@ -1955,7 +1983,7 @@ class KritzelCore {
             }
             return new index$1.UpdateObjectCommand(this, this, obj, { zIndex: obj.zIndex - 1 });
         });
-        this.history.executeCommand(new index$1.BatchCommand(this, this, decreaseZIndexCommands));
+        this.commandManager.executeCommand(new index$1.BatchCommand(this, this, decreaseZIndexCommands));
     }
     bringToFront(object) {
         const objects = object ? [object] : this._store.state.selectionGroup.objects;
@@ -1964,7 +1992,7 @@ class KritzelCore {
         const increaseZIndexCommands = objects.map(obj => {
             return new index$1.UpdateObjectCommand(this, this, obj, { zIndex: max });
         });
-        this.history.executeCommand(new index$1.BatchCommand(this, this, increaseZIndexCommands));
+        this.commandManager.executeCommand(new index$1.BatchCommand(this, this, increaseZIndexCommands));
     }
     sendToBack(object) {
         const objects = object ? [object] : this._store.state.selectionGroup.objects;
@@ -1973,7 +2001,7 @@ class KritzelCore {
         const decreaseZIndexCommands = objects.map(obj => {
             return new index$1.UpdateObjectCommand(this, this, obj, { zIndex: min });
         });
-        this.history.executeCommand(new index$1.BatchCommand(this, this, decreaseZIndexCommands));
+        this.commandManager.executeCommand(new index$1.BatchCommand(this, this, decreaseZIndexCommands));
     }
     selectObjects(objects) {
         if (objects.length === 0) {
@@ -1989,7 +2017,7 @@ class KritzelCore {
         if (objects.length === 1) {
             selectionGroup.rotation = selectionGroup.objects[0].rotation;
         }
-        this.history.executeCommand(new index$1.AddSelectionGroupCommand(this, this, selectionGroup));
+        this.commandManager.executeCommand(new index$1.AddSelectionGroupCommand(this, this, selectionGroup));
     }
     selectAllObjectsInViewport() {
         const objectsInViewport = this._store.state.objectsMap
@@ -2006,13 +2034,13 @@ class KritzelCore {
             if (objectsInViewport.length === 1) {
                 selectionGroup.rotation = selectionGroup.objects[0].rotation;
             }
-            this.history.executeCommand(new index$1.AddSelectionGroupCommand(this, this, selectionGroup));
+            this.commandManager.executeCommand(new index$1.AddSelectionGroupCommand(this, this, selectionGroup));
             this._store.setState('activeTool', index$1.KritzelToolRegistry.getTool('selection'));
         }
     }
     clearSelection() {
-        const command = new index$1.RemoveSelectionGroupCommand(this, this._store.state.selectionGroup);
-        this.history.executeCommand(command);
+        const command = new index$1.RemoveSelectionGroupCommand(this, this);
+        this.commandManager.executeCommand(command);
         this._store.state.selectionGroup = null;
         this._store.state.selectionBox = null;
         this._store.state.isSelecting = false;
@@ -2023,11 +2051,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();
             }
         }
@@ -2084,15 +2110,21 @@ class KritzelCore {
         const worldY = yWithoutTranslate / this._store.state.scale;
         return { x: worldX, y: worldY };
     }
+    beforeWorkspaceChange() {
+        this.resetActiveText();
+        this.clearSelection();
+        this._store.setState('activeTool', index$1.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 = class {
     get host() { return index.getElement(this); }
     workspace;
     onWorkspaceChange(newWorkspace) {
         if (this.core.store.state.activeWorkspace !== newWorkspace) {
+            this.core.beforeWorkspaceChange();
             this.core.initializeWorkspace(newWorkspace);
         }
     }
@@ -2278,19 +2310,19 @@ const KritzelEngine = class {
         object.scale = object.scale ? object.scale : this.core.store.state.scale;
         object.zIndex = this.core.store.currentZIndex;
         const command = new index$1.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 index$1.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 index$1.RemoveObjectCommand(this.core, this, object);
-        this.core.history.executeCommand(command);
+        this.core.commandManager.executeCommand(command);
         return object;
     }
     async getSelectedObjects() {
@@ -2314,7 +2346,7 @@ const KritzelEngine = class {
     async centerObjectInViewport(object) {
         object.centerInViewport();
         const command = new index$1.UpdateObjectCommand(this.core, this, object, object);
-        this.core.history.executeCommand(command);
+        this.core.commandManager.executeCommand(command);
         return object;
     }
     async getCopiedObjects() {
@@ -2381,11 +2413,16 @@ const KritzelEngine = class {
     _handleActiveToolChange(activeTool) {
         if (!(activeTool instanceof index$1.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);
         index$1.KritzelKeyboardHelper.forceHideKeyboard();
+        this.core.rerender();
     }
     render() {
         const computedStyle = window.getComputedStyle(this.host);
@@ -2394,7 +2431,7 @@ const KritzelEngine = class {
         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 (index.h(index.Host, { key: 'caabd1ecbf2faccdf7fa50d087a8957df4dd1039' }, index.h("div", { key: 'd757e7133ed9dd190c17c383fb716f760f2b3906', class: "debug-panel", style: { display: this.core.store.state.debugInfo.showViewportInfo ? 'block' : 'none' } }, index.h("div", { key: '00ced12dd956b6eecff7ac80429c0fd05cc7d1c3' }, "ActiveWorkspaceId: ", this.core.store.state?.activeWorkspace?.id), index.h("div", { key: '771f3269627fbe1ef962027f017cf6bdec7bcf8f' }, "ActiveWorkspaceName: ", this.core.store.state?.activeWorkspace?.name), index.h("div", { key: '0e49a60afdfb776a61f46b53bd6488786778bf77' }, "TranslateX: ", this.core.store.state?.translateX), index.h("div", { key: 'e0438479bc9e950ef2cbe88ed0aa0b8ec1888890' }, "TranslateY: ", this.core.store.state?.translateY), index.h("div", { key: '41d7261ed6b893a97fefb4bb6b199ffea51bd5fe' }, "ViewportWidth: ", this.core.store.state?.viewportWidth), index.h("div", { key: '7b6470008968eeebc5097252b3b9e3d172fd5d22' }, "ViewportHeight: ", this.core.store.state?.viewportHeight), index.h("div", { key: '4012ebdc3234ee2775021b38f385dfa0917736cb' }, "Scale: ", this.core.store.state?.scale), index.h("div", { key: '964d26a0ff4ff93dfa1cc928330c4fbdb0ec9b3d' }, "ActiveTool: ", this.core.store.state?.activeTool?.name), index.h("div", { key: 'cd68a81778d3e0f83f9453cd813538b2223541e8' }, "HasViewportChanged: ", this.core.store.state?.hasViewportChanged ? 'true' : 'false'), index.h("div", { key: '2ea80f3b4216a5e3d727c6c94d8b1782fbde80eb' }, "IsEnabled: ", this.core.store.state?.isEnabled ? 'true' : 'false'), index.h("div", { key: '02966d69182e95a8e91d5252f3dcfc19237caafd' }, "IsScaling: ", this.core.store.state?.isScaling ? 'true' : 'false'), index.h("div", { key: '85c06265f3af2b793d1827a40bb74b8837690ce3' }, "IsPanning: ", this.core.store.state?.isPanning ? 'true' : 'false'), index.h("div", { key: '1a2847a815fabc37cae3b7659844975df0c79a81' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), index.h("div", { key: 'd1482aa165ed6b430ec0e640971c47e233103e87' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), index.h("div", { key: '3534e455918183d822374edbc80b621939100bd1' }, "IsResizeHandleSelected: ", this.core.store.state.isResizeHandleSelected ? 'true' : 'false'), index.h("div", { key: '7b061a4b08956660ee305316eea2e1d13d66d5de' }, "IsRotationHandleSelected: ", this.core.store.state.isRotationHandleSelected ? 'true' : 'false'), index.h("div", { key: '61998d0f4ffc65f5bb155dfe434a3a07667ca5ee' }, "IsDrawing: ", this.core.store.state.isDrawing ? 'true' : 'false'), index.h("div", { key: 'bdaeb0af59e844351eb46caf7bbe7e246174ccfe' }, "IsWriting: ", this.core.store.state.isWriting ? 'true' : 'false'), index.h("div", { key: '47518514eb67c486583ee61e6747104b4720924a' }, "PointerX: ", this.core.store.state?.pointerX), index.h("div", { key: '9b2ef1c30ecb09bc7df7f765e099f87ea836d697' }, "PointerY: ", this.core.store.state?.pointerY), index.h("div", { key: '72a65218942809918fb5fa1978af83f9442c3ed8' }, "SelectedObjects: ", this.core.store.state.selectionGroup?.objects.length || 0), index.h("div", { key: '1f2ad6b79f28306becd7e83f21ca877c7d15941d' }, "ViewportCenter: (", viewportCenterX.toFixed(2), ", ", viewportCenterY.toFixed(2), ")")), index.h("div", { key: 'ae8afa17ce2a1c0a06a3579091d6f1616fe9b9a7', id: "origin", class: "origin", style: {
+        return (index.h(index.Host, { key: 'f7fc3c4c6a91ccdabb83832671e36ebf49ce56c0' }, index.h("div", { key: 'f6a2ce9e78a1d0e9ea0590035f5b8811f62c8633', class: "debug-panel", style: { display: this.core.store.state.debugInfo.showViewportInfo ? 'block' : 'none' } }, index.h("div", { key: '5752045746f275223bd42c16dd7e848adaaae9f2' }, "ActiveWorkspaceId: ", this.core.store.state?.activeWorkspace?.id), index.h("div", { key: 'd99595b135243a7b69a583be33f7b195908ec716' }, "ActiveWorkspaceName: ", this.core.store.state?.activeWorkspace?.name), index.h("div", { key: '7cecdccad47d3957370ea923f3dfbcd618b5d28e' }, "TranslateX: ", this.core.store.state?.translateX), index.h("div", { key: '3a5ed989f2343eda92c7c81855c785dbf58fa770' }, "TranslateY: ", this.core.store.state?.translateY), index.h("div", { key: 'b78074a29463276300ce498b2ddb328cef9026cd' }, "ViewportWidth: ", this.core.store.state?.viewportWidth), index.h("div", { key: 'd4c8dcfddfa1984eedf695d74f9401fc3284c60b' }, "ViewportHeight: ", this.core.store.state?.viewportHeight), index.h("div", { key: '566b6dc9afd904ee49e59587ed664e5f46decead' }, "Scale: ", this.core.store.state?.scale), index.h("div", { key: 'd3feb7a11727c4337ca75a26b3275a0b5d639961' }, "ActiveTool: ", this.core.store.state?.activeTool?.name), index.h("div", { key: '3991c34df53c7d6fd97c83b0d4b8c9fb438c88fc' }, "HasViewportChanged: ", this.core.store.state?.hasViewportChanged ? 'true' : 'false'), index.h("div", { key: '5a4244b43871f96d08144483352064804f04e538' }, "IsEnabled: ", this.core.store.state?.isEnabled ? 'true' : 'false'), index.h("div", { key: '197655c09e24d624ea4dcd312169aeb449ed57ce' }, "IsScaling: ", this.core.store.state?.isScaling ? 'true' : 'false'), index.h("div", { key: 'a3e4a75a9853c8cee1485cbf8621377466babf90' }, "IsPanning: ", this.core.store.state?.isPanning ? 'true' : 'false'), index.h("div", { key: '171e0df3e1856e9fe8cd18be5c258c7472317453' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), index.h("div", { key: '66f5a56333dbac1da34e01f5ee1f577e1a964701' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), index.h("div", { key: 'b869e07b76c2fa21ab5383788e81a40ffdad1b2c' }, "IsResizeHandleSelected: ", this.core.store.state.isResizeHandleSelected ? 'true' : 'false'), index.h("div", { key: 'd936326f8ea675e170d418f4e97a5d46057bc385' }, "IsRotationHandleSelected: ", this.core.store.state.isRotationHandleSelected ? 'true' : 'false'), index.h("div", { key: '8594489402204ae4a9cd1bc7795169dbfa2d633d' }, "IsDrawing: ", this.core.store.state.isDrawing ? 'true' : 'false'), index.h("div", { key: 'f7a254dc35bfe6d42c32d25d0f277b211d86b03f' }, "IsWriting: ", this.core.store.state.isWriting ? 'true' : 'false'), index.h("div", { key: '053ebd21504bfa3622e4b3e965e39f707c19794d' }, "PointerX: ", this.core.store.state?.pointerX), index.h("div", { key: 'f330c65821326062874441355352134927760d61' }, "PointerY: ", this.core.store.state?.pointerY), index.h("div", { key: 'f6c6902562f3e74afa3a0426e72b0c803977250b' }, "SelectedObjects: ", this.core.store.state.selectionGroup?.objects.length || 0), index.h("div", { key: '99a2d4280d5e79d7dd9a7a27d809e70f90eac38b' }, "ViewportCenter: (", viewportCenterX.toFixed(2), ", ", viewportCenterY.toFixed(2), ")")), index.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 (index.h("div", { key: object.id, style: {
@@ -2422,17 +2459,17 @@ const KritzelEngine = class {
                     borderStyle: 'solid',
                     padding: object.padding + 'px',
                     overflow: 'visible',
-                } }, KritzelClassHelper.isInstanceOf(object, 'KritzelPath') && (index.h("svg", { ref: el => (el ? object.mount(el) : object.unmount()), xmlns: "http://www.w3.org/2000/svg", style: {
+                } }, KritzelClassHelper.isInstanceOf(object, 'KritzelPath') && (index.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 }, index.h("path", { d: object?.d, fill: object.fill, stroke: object?.stroke }))), KritzelClassHelper.isInstanceOf(object, 'KritzelImage') && (index.h("img", { ref: el => (el ? object.mount(el) : object.unmount()), src: object.src, style: {
+                }, viewBox: object?.viewBox }, index.h("path", { d: object?.d, fill: object.fill, stroke: object?.stroke }))), KritzelClassHelper.isInstanceOf(object, 'KritzelImage') && (index.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') && (index.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') && (index.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',
@@ -2441,17 +2478,17 @@ const KritzelEngine = class {
                     transformOrigin: 'top left',
                     transform: `scale(${object.scaleFactor})`,
                     backgroundColor: object.backgroundColor,
-                    overflow: 'visible'
-                } })), KritzelClassHelper.isInstanceOf(object, 'KritzelCustomElement') && (index.h("div", { ref: el => (el ? object.mount(el) : object.unmount()), style: {
+                    overflow: 'visible',
+                } })), KritzelClassHelper.isInstanceOf(object, 'KritzelCustomElement') && (index.h("div", { ref: el => object.mount(el), style: {
                     width: '100%',
                     height: '100%',
                     pointerEvents: 'auto',
                     overflow: 'hidden',
                     display: 'block',
-                } })), KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionGroup') && (index.h("div", { ref: el => (el ? object.mount(el) : object.unmount()), style: {
+                } })), KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionGroup') && (index.h("div", { ref: el => object.mount(el), style: {
                     width: '100%',
                     height: '100%',
-                } })), KritzelClassHelper.isInstanceOf(object, 'KrtizelSelectionBox') && (index.h("div", { ref: el => (el ? object.mount(el) : object.unmount()), style: {
+                } })), KritzelClassHelper.isInstanceOf(object, 'KrtizelSelectionBox') && (index.h("div", { ref: el => object.mount(el), style: {
                     width: '100%',
                     height: '100%',
                     backgroundColor: KritzelDevicesHelper.isFirefox() ? object.backgroundColor : 'transparent',
@@ -2498,7 +2535,7 @@ const KritzelEngine = class {
                 }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), index.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' }), index.h("g", { style: { display: this.core.store.state.debugInfo.showObjectInfo ? 'block' : 'none', pointerEvents: 'none' } }, index.h("foreignObject", { x: object.totalWidth.toString(), y: "0", width: "400px", height: "160px", style: { minHeight: '0', minWidth: '0', display: object.isDebugInfoVisible ? 'block' : 'none' } }, index.h("div", { style: { width: '100%', height: '100%' } }, index.h("div", { style: { whiteSpace: 'nowrap' } }, "zIndex: ", object.zIndex), index.h("div", { style: { whiteSpace: 'nowrap' } }, "translateX: ", object.translateX), index.h("div", { style: { whiteSpace: 'nowrap' } }, "translateY: ", object.translateY), index.h("div", { style: { whiteSpace: 'nowrap' } }, "width: ", object.width), index.h("div", { style: { whiteSpace: 'nowrap' } }, "height: ", object.height), index.h("div", { style: { whiteSpace: 'nowrap' } }, "scale: ", object.scale), index.h("div", { style: { whiteSpace: 'nowrap' } }, "rotation: ", object.rotation), index.h("div", { style: { whiteSpace: 'nowrap' } }, "x: ", object.x), index.h("div", { style: { whiteSpace: 'nowrap' } }, "y: ", object.y)))))));
+                }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), index.h("g", { style: { display: this.core.store.state.debugInfo.showObjectInfo ? 'block' : 'none', pointerEvents: 'none' } }, index.h("foreignObject", { x: object.totalWidth.toString(), y: "0", width: "400px", height: "160px", style: { minHeight: '0', minWidth: '0', display: object.isDebugInfoVisible ? 'block' : 'none' } }, index.h("div", { style: { width: '100%', height: '100%' } }, index.h("div", { style: { whitespace: 'nowrap' } }, "Id: ", object.id), index.h("div", { style: { whiteSpace: 'nowrap' } }, "width: ", object.width), index.h("div", { style: { whiteSpace: 'nowrap' } }, "height: ", object.height)))))));
         }), index.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',
@@ -2507,7 +2544,7 @@ const KritzelEngine = class {
                 transform: this.core.store.state.currentPath?.transformationMatrix,
                 transformOrigin: 'top left',
                 overflow: 'visible',
-            }, viewBox: this.core.store.state.currentPath?.viewBox }, index.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 && (index.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 }, index.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 && (index.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`,
@@ -2518,7 +2555,7 @@ const KritzelEngine = class {
                     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 index$1.KritzelEraserTool && !this.core.store.state.isScaling && index.h("kritzel-cursor-trail", { key: '9b51e52c76f21be679491c21d1921d389d6619fc', core: this.core })));
+            }, onClose: () => this.hideContextMenu() })), this.core.store.state?.activeTool instanceof index$1.KritzelEraserTool && !this.core.store.state.isScaling && index.h("kritzel-cursor-trail", { key: 'fc7c474156442dfb5c057ef4ed4f0e5f015c2502', core: this.core })));
     }
     static get watchers() { return {
         "workspace": ["onWorkspaceChange"],

package/dist/collection/classes/commands/add-object.command.js

@@ -10,6 +10,7 @@ export class AddObjectCommand extends KritzelBaseCommand {
         this._core.addObjectToDatabase(this.object);
     }
     undo() {
+        this.object.isMounted = false;
         this._core.store.state.objectsMap.remove(object => object.id === this.object.id);
         this._core.deleteObjectFromDatabase(this.object.id);
     }

package/dist/collection/classes/commands/add-object.command.js.map

@@ -1 +1 @@
-{"version":3,"file":"add-object.command.js","sourceRoot":"","sources":["../../../src/classes/commands/add-object.command.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAGpD,MAAM,OAAO,gBAAiB,SAAQ,kBAAkB;IAC9C,MAAM,CAAyB;IAEvC,YAAY,IAAiB,EAAE,SAAc,EAAG,MAA8B,EAAE,WAAW,GAAG,KAAK;QACjG,KAAK,CAAC,IAAI,EAAE,SAAS,EAAE,WAAW,CAAC,CAAC;QACpC,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;IACvB,CAAC;IAED,OAAO;QACL,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QACtD,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAC9C,CAAC;IAED,IAAI;QACF,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,EAAE,KAAK,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;QACjF,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;IACtD,CAAC;CACF","sourcesContent":["import { KritzelBaseObject } from '../objects/base-object.class';\r\nimport { KritzelBaseCommand } from './base.command';\r\nimport { KritzelCore } from '../core/core.class';\r\n\r\nexport class AddObjectCommand extends KritzelBaseCommand {\r\n  private object: KritzelBaseObject<any>;\r\n\r\n  constructor(core: KritzelCore, initiator: any,  object: KritzelBaseObject<any>, skipHistory = false) {\r\n    super(core, initiator, skipHistory);\r\n    this.object = object;\r\n  }\r\n\r\n  execute(): void {\r\n    this._core.store.state.objectsMap.insert(this.object);\r\n    this._core.addObjectToDatabase(this.object);\r\n  }\r\n\r\n  undo(): void {\r\n    this._core.store.state.objectsMap.remove(object => object.id === this.object.id);\r\n    this._core.deleteObjectFromDatabase(this.object.id);\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"add-object.command.js","sourceRoot":"","sources":["../../../src/classes/commands/add-object.command.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAGpD,MAAM,OAAO,gBAAmD,SAAQ,kBAAkB;IAChF,MAAM,CAAI;IAElB,YAAY,IAAiB,EAAE,SAAc,EAAG,MAAS,EAAE,WAAW,GAAG,KAAK;QAC5E,KAAK,CAAC,IAAI,EAAE,SAAS,EAAE,WAAW,CAAC,CAAC;QACpC,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;IACvB,CAAC;IAED,OAAO;QACL,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QACtD,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAC9C,CAAC;IAED,IAAI;QACF,IAAI,CAAC,MAAM,CAAC,SAAS,GAAG,KAAK,CAAC;QAC9B,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,EAAE,KAAK,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;QACjF,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;IACtD,CAAC;CACF","sourcesContent":["import { KritzelBaseObject } from '../objects/base-object.class';\r\nimport { KritzelBaseCommand } from './base.command';\r\nimport { KritzelCore } from '../core/core.class';\r\n\r\nexport class AddObjectCommand<T extends KritzelBaseObject<any>> extends KritzelBaseCommand {\r\n  private object: T;\r\n\r\n  constructor(core: KritzelCore, initiator: any,  object: T, skipHistory = false) {\r\n    super(core, initiator, skipHistory);\r\n    this.object = object;\r\n  }\r\n\r\n  execute(): void {\r\n    this._core.store.state.objectsMap.insert(this.object);\r\n    this._core.addObjectToDatabase(this.object);\r\n  }\r\n\r\n  undo(): void {\r\n    this.object.isMounted = false;\r\n    this._core.store.state.objectsMap.remove(object => object.id === this.object.id);\r\n    this._core.deleteObjectFromDatabase(this.object.id);\r\n  }\r\n}\r\n"]}

package/dist/collection/classes/commands/base.command.js

@@ -2,10 +2,12 @@ export class KritzelBaseCommand {
     _core;
     initiator;
     skipHistory;
+    timestamp;
     constructor(core, initiator, skipHistory = false) {
         this._core = core;
         this.initiator = initiator?.constructor?.name ?? 'Unknown';
         this.skipHistory = skipHistory;
+        this.timestamp = new Date();
     }
     execute() {
         throw new Error('Method not implemented.');

package/dist/collection/classes/commands/base.command.js.map

@@ -1 +1 @@
-{"version":3,"file":"base.command.js","sourceRoot":"","sources":["../../../src/classes/commands/base.command.ts"],"names":[],"mappings":"AAGA,MAAM,OAAO,kBAAkB;IACnB,KAAK,CAAc;IAE7B,SAAS,CAAS;IAClB,WAAW,CAAC;IAEZ,YAAY,IAAiB,EAAE,SAAc,EAAE,WAAW,GAAG,KAAK;QAChE,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;QAClB,IAAI,CAAC,SAAS,GAAG,SAAS,EAAE,WAAW,EAAE,IAAI,IAAI,SAAS,CAAC;QAC3D,IAAI,CAAC,WAAW,GAAG,WAAW,CAAC;IACjC,CAAC;IAED,OAAO;QACL,MAAM,IAAI,KAAK,CAAC,yBAAyB,CAAC,CAAC;IAC7C,CAAC;IAED,IAAI;QACF,MAAM,IAAI,KAAK,CAAC,yBAAyB,CAAC,CAAC;IAC7C,CAAC;CACF","sourcesContent":["import { KritzelCommand } from '../../interfaces/command.interface';\r\nimport { KritzelCore } from '../core/core.class';\r\n\r\nexport class KritzelBaseCommand implements KritzelCommand {\r\n  protected _core: KritzelCore;\r\n\r\n  initiator: string;\r\n  skipHistory;\r\n\r\n  constructor(core: KritzelCore, initiator: any, skipHistory = false) {\r\n    this._core = core;\r\n    this.initiator = initiator?.constructor?.name ?? 'Unknown';\r\n    this.skipHistory = skipHistory;\r\n  }\r\n\r\n  execute(): void {\r\n    throw new Error('Method not implemented.');\r\n  }\r\n\r\n  undo(): void {\r\n    throw new Error('Method not implemented.');\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"base.command.js","sourceRoot":"","sources":["../../../src/classes/commands/base.command.ts"],"names":[],"mappings":"AAGA,MAAM,OAAO,kBAAkB;IACnB,KAAK,CAAc;IAE7B,SAAS,CAAS;IAClB,WAAW,CAAU;IACrB,SAAS,CAAO;IAEhB,YAAY,IAAiB,EAAE,SAAc,EAAE,WAAW,GAAG,KAAK;QAChE,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;QAClB,IAAI,CAAC,SAAS,GAAG,SAAS,EAAE,WAAW,EAAE,IAAI,IAAI,SAAS,CAAC;QAC3D,IAAI,CAAC,WAAW,GAAG,WAAW,CAAC;QAC/B,IAAI,CAAC,SAAS,GAAG,IAAI,IAAI,EAAE,CAAC;IAC9B,CAAC;IAED,OAAO;QACL,MAAM,IAAI,KAAK,CAAC,yBAAyB,CAAC,CAAC;IAC7C,CAAC;IAED,IAAI;QACF,MAAM,IAAI,KAAK,CAAC,yBAAyB,CAAC,CAAC;IAC7C,CAAC;CACF","sourcesContent":["import { KritzelCommand } from '../../interfaces/command.interface';\r\nimport { KritzelCore } from '../core/core.class';\r\n\r\nexport class KritzelBaseCommand implements KritzelCommand {\r\n  protected _core: KritzelCore;\r\n\r\n  initiator: string;\r\n  skipHistory: boolean;\r\n  timestamp: Date;\r\n\r\n  constructor(core: KritzelCore, initiator: any, skipHistory = false) {\r\n    this._core = core;\r\n    this.initiator = initiator?.constructor?.name ?? 'Unknown';\r\n    this.skipHistory = skipHistory;\r\n    this.timestamp = new Date();\r\n  }\r\n\r\n  execute(): void {\r\n    throw new Error('Method not implemented.');\r\n  }\r\n\r\n  undo(): void {\r\n    throw new Error('Method not implemented.');\r\n  }\r\n}\r\n"]}

package/dist/collection/classes/commands/remove-object.command.js

@@ -1,5 +1,4 @@
 import { KritzelBaseCommand } from "./base.command";
-import { KritzelCustomElement } from "../objects/custom-element.class";
 export class RemoveObjectCommand extends KritzelBaseCommand {
     object;
     constructor(core, initiator, object, skipHistory = false) {
@@ -7,13 +6,12 @@ export 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);
     }
 }

package/dist/collection/classes/commands/remove-object.command.js.map

@@ -1 +1 @@
-{"version":3,"file":"remove-object.command.js","sourceRoot":"","sources":["../../../src/classes/commands/remove-object.command.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AACpD,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AAGvE,MAAM,OAAO,mBAAoB,SAAQ,kBAAkB;IACjD,MAAM,CAAyB;IAEvC,YAAY,IAAiB,EAAE,SAAc,EAAG,MAA8B,EAAE,WAAW,GAAG,KAAK;QACjG,KAAK,CAAC,IAAI,EAAE,SAAS,EAAE,WAAW,CAAC,CAAC;QACpC,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;IACvB,CAAC;IAED,OAAO;QACL,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,EAAE,KAAK,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;QACjF,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,YAAY,oBAAoB,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,CAAC,CAAC;QAC/H,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;IACtD,CAAC;IAED,IAAI;QACF,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QACtD,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,YAAY,oBAAoB,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,CAAC,CAAC;QAC/H,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAC9C,CAAC;CACF","sourcesContent":["import { KritzelBaseObject } from '../objects/base-object.class';\r\nimport { KritzelBaseCommand } from './base.command';\r\nimport { KritzelCustomElement } from '../objects/custom-element.class';\r\nimport { KritzelCore } from '../core/core.class';\r\n\r\nexport class RemoveObjectCommand extends KritzelBaseCommand {\r\n  private object: KritzelBaseObject<any>;\r\n\r\n  constructor(core: KritzelCore, initiator: any,  object: KritzelBaseObject<any>, skipHistory = false) {\r\n    super(core, initiator, skipHistory);\r\n    this.object = object;\r\n  }\r\n\r\n  execute(): void {\r\n    this._core.store.state.objectsMap.remove(object => object.id === this.object.id);\r\n    this._core.store.state.objectsMap.filter(object => object instanceof KritzelCustomElement).forEach(object => object.remount());\r\n    this._core.deleteObjectFromDatabase(this.object.id);\r\n  }\r\n\r\n  undo(): void {\r\n    this._core.store.state.objectsMap.insert(this.object);\r\n    this._core.store.state.objectsMap.filter(object => object instanceof KritzelCustomElement).forEach(object => object.remount());\r\n    this._core.addObjectToDatabase(this.object);\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"remove-object.command.js","sourceRoot":"","sources":["../../../src/classes/commands/remove-object.command.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAGpD,MAAM,OAAO,mBAAsD,SAAQ,kBAAkB;IACnF,MAAM,CAAI;IAElB,YAAY,IAAiB,EAAE,SAAc,EAAG,MAAS,EAAE,WAAW,GAAG,KAAK;QAC5E,KAAK,CAAC,IAAI,EAAE,SAAS,EAAE,WAAW,CAAC,CAAC;QACpC,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;IACvB,CAAC;IAED,OAAO;QACL,IAAI,CAAC,MAAM,CAAC,SAAS,GAAG,KAAK,CAAC;QAC9B,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,EAAE,KAAK,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;QACjF,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;IACtD,CAAC;IAED,IAAI;QACF,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QACtD,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAC9C,CAAC;CACF","sourcesContent":["import { KritzelBaseObject } from '../objects/base-object.class';\r\nimport { KritzelBaseCommand } from './base.command';\r\nimport { KritzelCore } from '../core/core.class';\r\n\r\nexport class RemoveObjectCommand<T extends KritzelBaseObject<any>> extends KritzelBaseCommand {\r\n  private object: T;\r\n\r\n  constructor(core: KritzelCore, initiator: any,  object: T, skipHistory = false) {\r\n    super(core, initiator, skipHistory);\r\n    this.object = object;\r\n  }\r\n\r\n  execute(): void {\r\n    this.object.isMounted = false;\r\n    this._core.store.state.objectsMap.remove(object => object.id === this.object.id);\r\n    this._core.deleteObjectFromDatabase(this.object.id);\r\n  }\r\n\r\n  undo(): void {\r\n    this._core.store.state.objectsMap.insert(this.object);\r\n    this._core.addObjectToDatabase(this.object);\r\n  }\r\n}\r\n"]}

package/dist/collection/classes/commands/update-object.command.js

@@ -20,6 +20,7 @@ export class UpdateObjectCommand extends KritzelBaseCommand {
                 this.object[key] = this.updatedProperties[key];
             }
         }
+        this.object.onExecuteUpdateCommand(this.updatedProperties);
         this._core.store.state.objectsMap.update(this.object);
         this._core.updateObjectInDatabase(this.object);
     }
@@ -29,6 +30,7 @@ export class UpdateObjectCommand extends KritzelBaseCommand {
                 this.object[key] = this.previousProperties[key];
             }
         }
+        this.object.onUndoUpdateCommand(this.previousProperties);
         this._core.store.state.objectsMap.update(this.object);
         this._core.updateObjectInDatabase(this.object);
     }

package/dist/collection/classes/commands/update-object.command.js.map

@@ -1 +1 @@
-{"version":3,"file":"update-object.command.js","sourceRoot":"","sources":["../../../src/classes/commands/update-object.command.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAGpD,MAAM,OAAO,mBAAoB,SAAQ,kBAAkB;IACjD,MAAM,CAAyB;IAC/B,iBAAiB,CAAkC;IACnD,kBAAkB,CAAkC;IAE5D,YAAY,IAAiB,EAAE,SAAc,EAAE,MAA8B,EAAE,iBAAkD,EAAE,WAAW,GAAG,KAAK;QACpJ,KAAK,CAAC,IAAI,EAAE,SAAS,EAAE,WAAW,CAAC,CAAC;QACpC,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;QACrB,IAAI,CAAC,iBAAiB,GAAG,iBAAiB,CAAC;QAE3C,IAAI,CAAC,kBAAkB,GAAG,EAAE,CAAC;QAC7B,KAAK,MAAM,GAAG,IAAI,iBAAiB,EAAE,CAAC;YACpC,IAAI,iBAAiB,CAAC,cAAc,CAAC,GAAG,CAAC,EAAE,CAAC;gBAC1C,IAAI,CAAC,kBAAkB,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;YAClD,CAAC;QACH,CAAC;IACH,CAAC;IAED,OAAO;QACL,KAAK,MAAM,GAAG,IAAI,IAAI,CAAC,iBAAiB,EAAE,CAAC;YACzC,IAAI,IAAI,CAAC,iBAAiB,CAAC,cAAc,CAAC,GAAG,CAAC,EAAE,CAAC;gBAC/C,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC;YACjD,CAAC;QACH,CAAC;QAED,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QACtD,IAAI,CAAC,KAAK,CAAC,sBAAsB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IACjD,CAAC;IAED,IAAI;QACF,KAAK,MAAM,GAAG,IAAI,IAAI,CAAC,kBAAkB,EAAE,CAAC;YAC1C,IAAI,IAAI,CAAC,kBAAkB,CAAC,cAAc,CAAC,GAAG,CAAC,EAAE,CAAC;gBAChD,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,kBAAkB,CAAC,GAAG,CAAC,CAAC;YAClD,CAAC;QACH,CAAC;QAED,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QACtD,IAAI,CAAC,KAAK,CAAC,sBAAsB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IACjD,CAAC;CACF","sourcesContent":["import { KritzelBaseObject } from '../objects/base-object.class';\r\nimport { KritzelBaseCommand } from './base.command';\r\nimport { KritzelCore } from '../core/core.class';\r\n\r\nexport class UpdateObjectCommand extends KritzelBaseCommand {\r\n  private object: KritzelBaseObject<any>;\r\n  private updatedProperties: Partial<KritzelBaseObject<any>>;\r\n  private previousProperties: Partial<KritzelBaseObject<any>>;\r\n\r\n  constructor(core: KritzelCore, initiator: any, object: KritzelBaseObject<any>, updatedProperties: Partial<KritzelBaseObject<any>>, skipHistory = false) {\r\n    super(core, initiator, skipHistory);\r\n    this.object = object;\r\n    this.updatedProperties = updatedProperties;\r\n\r\n    this.previousProperties = {};\r\n    for (const key in updatedProperties) {\r\n      if (updatedProperties.hasOwnProperty(key)) {\r\n        this.previousProperties[key] = this.object[key];\r\n      }\r\n    }\r\n  }\r\n\r\n  execute(): void {\r\n    for (const key in this.updatedProperties) {\r\n      if (this.updatedProperties.hasOwnProperty(key)) {\r\n        this.object[key] = this.updatedProperties[key];\r\n      }\r\n    }\r\n\r\n    this._core.store.state.objectsMap.update(this.object);\r\n    this._core.updateObjectInDatabase(this.object);\r\n  }\r\n\r\n  undo(): void {\r\n    for (const key in this.previousProperties) {\r\n      if (this.previousProperties.hasOwnProperty(key)) {\r\n        this.object[key] = this.previousProperties[key];\r\n      }\r\n    }\r\n\r\n    this._core.store.state.objectsMap.update(this.object);\r\n    this._core.updateObjectInDatabase(this.object);\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"update-object.command.js","sourceRoot":"","sources":["../../../src/classes/commands/update-object.command.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAGpD,MAAM,OAAO,mBAAsD,SAAQ,kBAAkB;IACnF,MAAM,CAAI;IACV,iBAAiB,CAAa;IAC9B,kBAAkB,CAAa;IAEvC,YAAY,IAAiB,EAAE,SAAc,EAAE,MAAS,EAAE,iBAA6B,EAAE,WAAW,GAAG,KAAK;QAC1G,KAAK,CAAC,IAAI,EAAE,SAAS,EAAE,WAAW,CAAC,CAAC;QACpC,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;QACrB,IAAI,CAAC,iBAAiB,GAAG,iBAAiB,CAAC;QAE3C,IAAI,CAAC,kBAAkB,GAAG,EAAE,CAAC;QAC7B,KAAK,MAAM,GAAG,IAAI,iBAAiB,EAAE,CAAC;YACpC,IAAI,iBAAiB,CAAC,cAAc,CAAC,GAAG,CAAC,EAAE,CAAC;gBAC1C,IAAI,CAAC,kBAAkB,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;YAClD,CAAC;QACH,CAAC;IACH,CAAC;IAED,OAAO;QACL,KAAK,MAAM,GAAG,IAAI,IAAI,CAAC,iBAAiB,EAAE,CAAC;YACzC,IAAI,IAAI,CAAC,iBAAiB,CAAC,cAAc,CAAC,GAAG,CAAC,EAAE,CAAC;gBAC/C,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC;YACjD,CAAC;QACH,CAAC;QAED,IAAI,CAAC,MAAM,CAAC,sBAAsB,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;QAE3D,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QACtD,IAAI,CAAC,KAAK,CAAC,sBAAsB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IACjD,CAAC;IAED,IAAI;QACF,KAAK,MAAM,GAAG,IAAI,IAAI,CAAC,kBAAkB,EAAE,CAAC;YAC1C,IAAI,IAAI,CAAC,kBAAkB,CAAC,cAAc,CAAC,GAAG,CAAC,EAAE,CAAC;gBAChD,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,kBAAkB,CAAC,GAAG,CAAC,CAAC;YAClD,CAAC;QACH,CAAC;QAED,IAAI,CAAC,MAAM,CAAC,mBAAmB,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;QAEzD,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QACtD,IAAI,CAAC,KAAK,CAAC,sBAAsB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IACjD,CAAC;CACF","sourcesContent":["import { KritzelBaseObject } from '../objects/base-object.class';\r\nimport { KritzelBaseCommand } from './base.command';\r\nimport { KritzelCore } from '../core/core.class';\r\n\r\nexport class UpdateObjectCommand<T extends KritzelBaseObject<any>> extends KritzelBaseCommand {\r\n  private object: T;\r\n  private updatedProperties: Partial<T>;\r\n  private previousProperties: Partial<T>;\r\n\r\n  constructor(core: KritzelCore, initiator: any, object: T, updatedProperties: Partial<T>, skipHistory = false) {\r\n    super(core, initiator, skipHistory);\r\n    this.object = object;\r\n    this.updatedProperties = updatedProperties;\r\n\r\n    this.previousProperties = {};\r\n    for (const key in updatedProperties) {\r\n      if (updatedProperties.hasOwnProperty(key)) {\r\n        this.previousProperties[key] = this.object[key];\r\n      }\r\n    }\r\n  }\r\n\r\n  execute(): void {\r\n    for (const key in this.updatedProperties) {\r\n      if (this.updatedProperties.hasOwnProperty(key)) {\r\n        this.object[key] = this.updatedProperties[key];\r\n      }\r\n    }\r\n\r\n    this.object.onExecuteUpdateCommand(this.updatedProperties);\r\n\r\n    this._core.store.state.objectsMap.update(this.object);\r\n    this._core.updateObjectInDatabase(this.object);\r\n  }\r\n\r\n  undo(): void {\r\n    for (const key in this.previousProperties) {\r\n      if (this.previousProperties.hasOwnProperty(key)) {\r\n        this.object[key] = this.previousProperties[key];\r\n      }\r\n    }\r\n\r\n    this.object.onUndoUpdateCommand(this.previousProperties);\r\n\r\n    this._core.store.state.objectsMap.update(this.object);\r\n    this._core.updateObjectInDatabase(this.object);\r\n  }\r\n}\r\n"]}