kritzel-stencil 0.0.141 → 0.0.142

package/dist/esm/index.js

@@ -1,2 +1,2 @@
-export { D as DEFAULT_BRUSH_CONFIG, e as DEFAULT_TEXT_CONFIG, K as KritzelBrushTool, d as KritzelEraserTool, u as KritzelImage, f as KritzelImageTool, t as KritzelPath, c as KritzelSelectionTool, s as KritzelText, a as KritzelTextTool, g as KritzelWorkspace } from './index-D0Q2MKPn.js';
+export { D as DEFAULT_BRUSH_CONFIG, e as DEFAULT_TEXT_CONFIG, K as KritzelBrushTool, d as KritzelEraserTool, u as KritzelImage, f as KritzelImageTool, t as KritzelPath, c as KritzelSelectionTool, s as KritzelText, a as KritzelTextTool, g as KritzelWorkspace } from './index-SIM_s7ed.js';
 //# sourceMappingURL=index.js.map

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, H as Host, c as createEvent, g as getElement } from './index-Cw77zP6g.js';
-import { K as KritzelBrushTool, a as KritzelTextTool, b as KritzelMouseButton, c as KritzelSelectionTool, D as DEFAULT_BRUSH_CONFIG, d as KritzelEraserTool, e as DEFAULT_TEXT_CONFIG, f as KritzelImageTool, g as KritzelWorkspace, h as KritzelKeyboardHelper, i as KritzelEventHelper, j as KritzelBaseHandler, k as KritzelToolRegistry, l as KrtizelSelectionBox, m as KritzelSelectionGroup, B as BatchCommand, R as RemoveSelectionGroupCommand, A as AddSelectionGroupCommand, n as KritzelBaseCommand, O as ObjectHelper, o as KritzelReviver, p as RemoveObjectCommand, q as AddObjectCommand, U as UpdateObjectCommand, r as KritzelBaseTool } from './index-D0Q2MKPn.js';
+import { K as KritzelBrushTool, a as KritzelTextTool, b as KritzelMouseButton, c as KritzelSelectionTool, D as DEFAULT_BRUSH_CONFIG, d as KritzelEraserTool, e as DEFAULT_TEXT_CONFIG, f as KritzelImageTool, g as KritzelWorkspace, h as KritzelKeyboardHelper, i as KritzelEventHelper, j as KritzelBaseHandler, k as KritzelToolRegistry, l as KrtizelSelectionBox, m as KritzelSelectionGroup, B as BatchCommand, R as RemoveSelectionGroupCommand, A as AddSelectionGroupCommand, n as KritzelBaseCommand, O as ObjectHelper, o as KritzelReviver, p as RemoveObjectCommand, q as AddObjectCommand, U as UpdateObjectCommand, r as KritzelBaseTool } from './index-SIM_s7ed.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)}";
 
@@ -859,6 +859,7 @@ KritzelEditor.style = kritzelEditorCss;
 
 class KritzelViewport {
     _core;
+    _debounceUpdate;
     initialTouchDistance = 0;
     startX = 0;
     startY = 0;
@@ -871,6 +872,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;
@@ -921,7 +932,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') {
@@ -957,7 +968,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();
             }
         }
     }
@@ -991,7 +1002,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);
@@ -1018,7 +1029,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);
@@ -1029,7 +1040,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();
     }
 }
 
@@ -1123,7 +1134,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;
@@ -1526,47 +1537,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();
@@ -1592,21 +1580,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 {
@@ -1703,10 +1676,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;
@@ -1714,6 +1738,9 @@ class KritzelCore {
     get history() {
         return this._history;
     }
+    get commandManager() {
+        return this._commandManager;
+    }
     get database() {
         return this._database;
     }
@@ -1724,6 +1751,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() {
@@ -1876,7 +1904,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() {
@@ -1886,13 +1914,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() {
@@ -1926,7 +1954,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'));
@@ -1941,7 +1969,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;
@@ -1953,7 +1981,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;
@@ -1962,7 +1990,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;
@@ -1971,7 +1999,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) {
@@ -1987,7 +2015,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
@@ -2004,13 +2032,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;
@@ -2021,11 +2049,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();
             }
         }
@@ -2082,15 +2108,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 = class {
     get host() { return getElement(this); }
     workspace;
     onWorkspaceChange(newWorkspace) {
         if (this.core.store.state.activeWorkspace !== newWorkspace) {
+            this.core.beforeWorkspaceChange();
             this.core.initializeWorkspace(newWorkspace);
         }
     }
@@ -2276,19 +2308,19 @@ const KritzelEngine = class {
         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() {
@@ -2312,7 +2344,7 @@ const KritzelEngine = class {
     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() {
@@ -2379,11 +2411,16 @@ const KritzelEngine = class {
     _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);
@@ -2392,7 +2429,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 (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: {
@@ -2420,17 +2457,17 @@ const KritzelEngine = class {
                     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',
@@ -2439,17 +2476,17 @@ const KritzelEngine = class {
                     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',
@@ -2496,7 +2533,7 @@ const KritzelEngine = class {
                 }, 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',
@@ -2505,7 +2542,7 @@ const KritzelEngine = class {
                 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`,
@@ -2516,7 +2553,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 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"],

package/dist/stencil/index.esm.js

@@ -1,2 +1,2 @@
-export{D as DEFAULT_BRUSH_CONFIG,e as DEFAULT_TEXT_CONFIG,K as KritzelBrushTool,d as KritzelEraserTool,u as KritzelImage,f as KritzelImageTool,t as KritzelPath,c as KritzelSelectionTool,s as KritzelText,a as KritzelTextTool,g as KritzelWorkspace}from"./p-D0Q2MKPn.js";
+export{D as DEFAULT_BRUSH_CONFIG,e as DEFAULT_TEXT_CONFIG,K as KritzelBrushTool,d as KritzelEraserTool,u as KritzelImage,f as KritzelImageTool,t as KritzelPath,c as KritzelSelectionTool,s as KritzelText,a as KritzelTextTool,g as KritzelWorkspace}from"./p-SIM_s7ed.js";
 //# sourceMappingURL=index.esm.js.map