kritzel-stencil 0.0.130 → 0.0.132

package/dist/collection/components/core/kritzel-engine/kritzel-engine.js

@@ -1,7 +1,6 @@
 import { Host, h } from "@stencil/core";
-import { KritzelViewport } from "../../../classes/viewport.class";
+import { KritzelViewport } from "../../../classes/core/viewport.class";
 import { KritzelSelectionTool } from "../../../classes/tools/selection-tool.class";
-import { KritzelStore } from "../../../classes/store.class";
 import { KritzelKeyHandler } from "../../../classes/handlers/key.handler";
 import { KritzelBaseTool } from "../../../classes/tools/base-tool.class";
 import { KritzelEraserTool } from "../../../classes/tools/eraser-tool.class";
@@ -14,124 +13,98 @@ import { KritzelToolRegistry } from "../../../classes/registries/tool.registry";
 import { KritzelEventHelper } from "../../../helpers/event.helper";
 import { KritzelClassHelper } from "../../../helpers/class.helper";
 import { ABSOLUTE_SCALE_MAX, ABSOLUTE_SCALE_MIN } from "../../../constants/engine.constants";
+import { KritzelCore } from "../../../classes/core/core.class";
+import { KritzelDevicesHelper } from "../../../helpers/devices.helper";
 export class KritzelEngine {
+    host;
+    workspace;
     onWorkspaceChange(newWorkspace) {
-        if (newWorkspace) {
-            this.store.initializeWorkspace(newWorkspace);
+        if (this.core.store.state.activeWorkspace !== newWorkspace) {
+            this.core.initializeWorkspace(newWorkspace);
         }
     }
+    activeTool;
+    globalContextMenuItems;
+    objectContextMenuItems;
+    scaleMax = ABSOLUTE_SCALE_MAX;
     validateScaleMax(newValue) {
         if (newValue > ABSOLUTE_SCALE_MAX) {
             console.warn(`scaleMax cannot be greater than ${ABSOLUTE_SCALE_MAX}.`);
             this.scaleMax = ABSOLUTE_SCALE_MAX;
-            this.store.state.scaleMax = this.scaleMax;
+            this.core.store.setState('scaleMax', this.scaleMax);
         }
         else {
-            this.store.state.scaleMax = newValue;
+            this.core.store.setState('scaleMax', newValue);
         }
     }
+    scaleMin = ABSOLUTE_SCALE_MIN;
     validateScaleMin(newValue) {
         if (newValue < ABSOLUTE_SCALE_MIN) {
             console.warn(`scaleMin cannot be less than ${ABSOLUTE_SCALE_MIN}.`);
             this.scaleMin = ABSOLUTE_SCALE_MIN;
-            this.store.state.scaleMin = this.scaleMin;
+            this.core.store.setState('scaleMin', this.scaleMin);
         }
         else {
-            this.store.state.scaleMin = newValue;
-        }
-    }
-    get isSelecting() {
-        return this.store.state.activeTool instanceof KritzelSelectionTool && this.store.state.isSelecting;
-    }
-    get isSelectionActive() {
-        return this.store.state.activeTool instanceof KritzelSelectionTool && this.store.state.selectionGroup !== null;
-    }
-    constructor() {
-        this.scaleMax = ABSOLUTE_SCALE_MAX;
-        this.scaleMin = ABSOLUTE_SCALE_MIN;
-        this.forceUpdate = 0;
-        this.contextMenuElement = null;
-        this.store = new KritzelStore(this);
-    }
-    componentWillLoad() {
-        this.validateScaleMax(this.scaleMax);
-        this.validateScaleMin(this.scaleMin);
-    }
-    async componentDidLoad() {
-        this.contextMenuHandler = new KritzelContextMenuHandler(this.store, this.globalContextMenuItems, this.objectContextMenuItems);
-        this.keyHandler = new KritzelKeyHandler(this.store);
-        this.viewport = new KritzelViewport(this.store, this.host);
-        this._registerStateChangeListeners();
-        await this.store.initializeDatabase();
-        await this.store.initializeWorkspace(this.workspace);
-        if (this.store.state.isReady === false) {
-            this.store.state.isReady = true;
-            this.isEngineReady.emit(this.store.state);
+            this.core.store.setState('scaleMin', newValue);
         }
     }
+    isEngineReady;
+    activeToolChange;
+    workspacesChange;
+    longpress;
+    forceUpdate = 0;
     handleWheel(ev) {
-        var _a, _b;
-        if (this.store.isDisabled) {
+        if (this.core.store.isDisabled) {
             return;
         }
-        if (this.store.state.isContextMenuVisible) {
+        if (this.core.store.state.isContextMenuVisible) {
             this.hideContextMenu();
         }
         this.viewport.handleWheel(ev);
-        (_b = (_a = this.store.state) === null || _a === void 0 ? void 0 : _a.activeTool) === null || _b === void 0 ? void 0 : _b.handleWheel(ev);
+        this.core.store.state?.activeTool?.handleWheel(ev);
     }
     handlePointerDown(ev) {
-        var _a, _b;
-        if (this.store.isDisabled) {
-            return;
-        }
-        if (KritzelEventHelper.isPointerEventOnContextMenu(ev) === false && this.store.state.isContextMenuVisible) {
-            this.hideContextMenu();
+        if (this.core.store.isDisabled) {
             return;
         }
-        KritzelEventHelper.onLongTouchPress(ev, (event) => {
-            if (!(this.store.state.activeTool instanceof KritzelSelectionTool)) {
-                return;
-            }
-            this.contextMenuHandler.handleContextMenu(event);
-        });
+        KritzelEventHelper.onLongPress(ev, (event) => this.longpress.emit(event));
         this.host.setPointerCapture(ev.pointerId);
-        this.store.state.pointers.set(ev.pointerId, ev);
+        this.core.store.state.pointers.set(ev.pointerId, ev);
         this.viewport.handlePointerDown(ev);
-        (_b = (_a = this.store.state) === null || _a === void 0 ? void 0 : _a.activeTool) === null || _b === void 0 ? void 0 : _b.handlePointerDown(ev);
+        this.core.store.state?.activeTool?.handlePointerDown(ev);
     }
     handlePointerMove(ev) {
-        var _a, _b;
-        if (this.store.isDisabled) {
+        if (this.core.store.isDisabled) {
             return;
         }
-        this.store.state.pointers.set(ev.pointerId, ev);
+        this.core.store.state.pointers.set(ev.pointerId, ev);
         this.viewport.handlePointerMove(ev);
-        (_b = (_a = this.store.state) === null || _a === void 0 ? void 0 : _a.activeTool) === null || _b === void 0 ? void 0 : _b.handlePointerMove(ev);
+        this.core.store.state?.activeTool?.handlePointerMove(ev);
     }
     handlePointerUp(ev) {
-        var _a, _b;
-        if (this.store.isDisabled) {
+        if (this.core.store.isDisabled) {
             return;
         }
-        this.store.state.pointers.delete(ev.pointerId);
+        this.core.store.state.pointers.delete(ev.pointerId);
         this.host.releasePointerCapture(ev.pointerId);
         this.viewport.handlePointerUp(ev);
-        (_b = (_a = this.store.state) === null || _a === void 0 ? void 0 : _a.activeTool) === null || _b === void 0 ? void 0 : _b.handlePointerUp(ev);
+        this.core.store.state?.activeTool?.handlePointerUp(ev);
     }
     handlePointerCancel(ev) {
-        var _a, _b;
-        if (this.store.isDisabled) {
+        if (this.core.store.isDisabled) {
             return;
         }
         this.host.releasePointerCapture(ev.pointerId);
-        this.store.state.pointers.delete(ev.pointerId);
+        this.core.store.state.pointers.delete(ev.pointerId);
         this.viewport.handlePointerUp(ev);
-        (_b = (_a = this.store.state) === null || _a === void 0 ? void 0 : _a.activeTool) === null || _b === void 0 ? void 0 : _b.handlePointerUp(ev);
+        this.core.store.state?.activeTool?.handlePointerUp(ev);
+    }
+    handleLongPress(ev) {
+        this.contextMenuHandler.handleContextMenu(ev.detail);
     }
     handleContextMenu(ev) {
         ev.preventDefault();
-        if (this.store.isDisabled) {
+        if (this.core.store.isDisabled) {
             return;
         }
         if (ev.pointerType === 'touch') {
@@ -148,26 +121,12 @@ export class KritzelEngine {
     handleKeyUp(ev) {
         this.keyHandler.handleKeyUp(ev);
     }
-    updateFocus(ev) {
-        if (this.store.isDisabled) {
-            return;
-        }
-        const rect = this.store.state.host.getBoundingClientRect();
-        const isInside = ev.clientX >= rect.left && ev.clientX <= rect.right && ev.clientY >= rect.top && ev.clientY <= rect.bottom;
-        const path = ev.composedPath();
-        const kritzelEngineElement = this.host.closest('kritzel-engine');
-        const isInKritzelEngine = path.includes(kritzelEngineElement || this.host);
-        this.store.setState('isFocused', isInside && isInKritzelEngine);
-    }
-    handleClick() {
-        this.enable();
-    }
     async registerTool(toolName, toolClass, toolConfig) {
         if (typeof toolClass !== 'function' || !(toolClass.prototype instanceof KritzelBaseTool)) {
             console.error(`Failed to register tool "${toolName}": Tool class must be a constructor function`);
             return null;
         }
-        const registeredTool = KritzelToolRegistry.registerTool(toolName, toolClass, this.store);
+        const registeredTool = KritzelToolRegistry.registerTool(toolName, toolClass, this.core);
         if (toolConfig) {
             Object.entries(toolConfig).forEach(([key, value]) => {
                 registeredTool[key] = value;
@@ -176,290 +135,304 @@ export class KritzelEngine {
         return Promise.resolve(registeredTool);
     }
     async changeActiveTool(tool) {
-        var _a;
-        (_a = this.store.state.activeTool) === null || _a === void 0 ? void 0 : _a.onDeactivate();
-        this.store.setState('activeTool', tool);
-        this.store.deselectAllObjects();
-        tool === null || tool === void 0 ? void 0 : tool.onActivate();
-    }
-    async setFocus() {
-        this.host.focus();
-        this.store.state.isFocused = true;
+        this.core.store.state.activeTool?.onDeactivate();
+        this.core.store.setState('activeTool', tool);
+        this.core.deselectAllObjects();
+        tool?.onActivate();
     }
     async disable() {
-        this.store.state.isEnabled = false;
-        this.forceUpdate++;
+        this.core.store.setState('isEnabled', false);
+        this.core.rerender();
     }
     async enable() {
-        this.store.state.isEnabled = true;
-        this.forceUpdate++;
+        this.core.store.setState('isEnabled', true);
+        this.core.rerender();
     }
     async delete() {
-        this.store.delete();
+        this.core.delete();
     }
     async copy() {
-        this.store.copy();
+        this.core.copy();
     }
     async paste(x, y) {
-        this.store.paste(x, y);
+        this.core.paste(x, y);
     }
     async bringForward(object) {
-        this.store.bringForward(object);
+        this.core.bringForward(object);
     }
     async sendBackward(object) {
-        this.store.sendBackward(object);
+        this.core.sendBackward(object);
     }
     async bringToFront(object) {
-        this.store.bringToFront(object);
+        this.core.bringToFront(object);
     }
     async sendToBack(object) {
-        this.store.sendToBack(object);
+        this.core.sendToBack(object);
     }
     async undo() {
-        this.store.history.undo();
+        this.core.history.undo();
     }
     async redo() {
-        this.store.history.redo();
+        this.core.history.redo();
     }
     async hideContextMenu() {
-        this.store.state.pointers.clear();
-        this.store.state.isContextMenuVisible = false;
-        this.store.state.selectionBox = null;
-        this.store.state.isSelecting = false;
+        this.core.store.state.pointers.clear();
+        this.core.store.setState('isContextMenuVisible', false);
+        this.core.store.setState('selectionBox', null);
+        this.core.store.setState('isSelecting', false);
+        this.core.store.setState('isEnabled', true);
+        this.core.rerender();
     }
     async getObjectById(id) {
-        const object = this.store.objects.find(obj => obj.id === id);
+        const object = this.core.store.allObjects.find(obj => obj.id === id);
         return object || null;
     }
     async addObject(object) {
-        this.store.deselectAllObjects();
+        this.core.deselectAllObjects();
         object.id = object.generateId();
-        object._store = this.store;
-        object.scale = object.scale ? object.scale : this.store.state.scale;
-        object.zIndex = this.store.currentZIndex;
-        const command = new AddObjectCommand(this.store, this, object);
-        this.store.history.executeCommand(command);
+        object._core = this.core;
+        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);
         return object;
     }
     async updateObject(object, updatedProperties) {
-        this.store.deselectAllObjects();
-        const command = new UpdateObjectCommand(this.store, this, object, updatedProperties);
-        this.store.history.executeCommand(command);
+        this.core.deselectAllObjects();
+        const command = new UpdateObjectCommand(this.core, this, object, updatedProperties);
+        this.core.history.executeCommand(command);
         return object;
     }
     async removeObject(object) {
-        this.store.deselectAllObjects();
-        const command = new RemoveObjectCommand(this.store, this, object);
-        this.store.history.executeCommand(command);
+        this.core.deselectAllObjects();
+        const command = new RemoveObjectCommand(this.core, this, object);
+        this.core.history.executeCommand(command);
         return object;
     }
     async getSelectedObjects() {
-        return this.store.state.selectionGroup ? this.store.state.selectionGroup.objects : [];
+        return this.core.store.state.selectionGroup ? this.core.store.state.selectionGroup.objects : [];
     }
     async selectObjects(objects) {
-        var _a;
-        (_a = this.store.state.activeTool) === null || _a === void 0 ? void 0 : _a.onDeactivate();
-        this.store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
-        this.store.deselectAllObjects();
-        this.store.selectObjects(objects);
+        this.core.store.state.activeTool?.onDeactivate();
+        this.core.store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
+        this.core.deselectAllObjects();
+        this.core.selectObjects(objects);
     }
     async selectAllObjectsInViewport() {
-        var _a;
-        (_a = this.store.state.activeTool) === null || _a === void 0 ? void 0 : _a.onDeactivate();
-        this.store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
-        this.store.deselectAllObjects();
-        this.store.selectAllObjectsInViewport();
+        this.core.store.state.activeTool?.onDeactivate();
+        this.core.store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
+        this.core.deselectAllObjects();
+        this.core.selectAllObjectsInViewport();
     }
     async clearSelection() {
-        this.store.clearSelection();
+        this.core.clearSelection();
     }
     async centerObjectInViewport(object) {
         object.centerInViewport();
-        const command = new UpdateObjectCommand(this.store, this, object, object);
-        this.store.history.executeCommand(command);
+        const command = new UpdateObjectCommand(this.core, this, object, object);
+        this.core.history.executeCommand(command);
         return object;
     }
     async getCopiedObjects() {
-        var _a;
-        return ((_a = this.store.state.copiedObjects) === null || _a === void 0 ? void 0 : _a.objects) || [];
+        return this.core.store.state.copiedObjects?.objects || [];
     }
     async createWorkspace(workspace) {
-        return this.store.createWorkspace(workspace).then(() => {
-            this.workspacesChange.emit(this.store.state.workspaces);
-        });
+        workspace._core = this.core;
+        await this.core.createWorkspace(workspace);
+        this.workspacesChange.emit(this.core.store.state.workspaces);
+        return workspace;
     }
     async updateWorkspace(workspace) {
-        return this.store.updateWorkspace(workspace).then(() => {
-            this.workspacesChange.emit(this.store.state.workspaces);
-        });
+        await this.core.updateWorkspace(workspace);
+        this.workspacesChange.emit(this.core.store.state.workspaces);
     }
     async deleteWorkspace(workspace) {
-        return this.store.deleteWorkspace(workspace).then(async () => {
-            this.workspacesChange.emit(this.store.state.workspaces);
-        });
+        await this.core.deleteWorkspace(workspace);
+        this.workspacesChange.emit(this.core.store.state.workspaces);
     }
     async getWorkspaces() {
-        return this.store.getWorkspaces();
+        return this.core.getWorkspaces();
+    }
+    async getActiveWorkspace() {
+        return this.core.store.state.activeWorkspace;
+    }
+    core;
+    viewport;
+    contextMenuHandler;
+    keyHandler;
+    contextMenuElement = null;
+    get isSelecting() {
+        return this.core.store.state.activeTool instanceof KritzelSelectionTool && this.core.store.state.isSelecting;
+    }
+    get isSelectionActive() {
+        return this.core.store.state.activeTool instanceof KritzelSelectionTool && this.core.store.state.selectionGroup !== null;
+    }
+    constructor() {
+        this.core = new KritzelCore(this);
+    }
+    componentWillLoad() {
+        this.validateScaleMax(this.scaleMax);
+        this.validateScaleMin(this.scaleMin);
+    }
+    async componentDidLoad() {
+        this.contextMenuHandler = new KritzelContextMenuHandler(this.core, this.globalContextMenuItems, this.objectContextMenuItems);
+        this.keyHandler = new KritzelKeyHandler(this.core);
+        this.viewport = new KritzelViewport(this.core, this.host);
+        await this.core.initializeDatabase();
+        await this.core.initializeWorkspace(this.workspace);
+        this._registerStateChangeListeners();
+        if (this.core.store.state.isReady === false) {
+            this.core.store.setState('isReady', true);
+            this.isEngineReady.emit(this.core.store.state);
+        }
     }
     _registerStateChangeListeners() {
-        this.store.onStateChange('activeTool', this._handleActiveToolChange.bind(this));
-        this.store.onStateChange('isFocused', this._handleIsFocusedChange.bind(this));
+        this.core.store.onStateChange('activeTool', this._handleActiveToolChange.bind(this));
     }
     _handleActiveToolChange(activeTool) {
         if (!(activeTool instanceof KritzelSelectionTool)) {
-            this.store.clearSelection();
+            this.core.clearSelection();
         }
-        this.store.state.skipContextMenu = false;
+        this.core.store.setState('skipContextMenu', false);
         this.activeToolChange.emit(activeTool);
         KritzelKeyboardHelper.forceHideKeyboard();
     }
-    _handleIsFocusedChange(isFocused) {
-        if (!isFocused) {
-            this.store.resetActiveText();
-        }
-    }
     render() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8;
         const computedStyle = window.getComputedStyle(this.host);
         const baseHandleSizePx = computedStyle.getPropertyValue('--kritzel-selection-handle-size').trim() || '6px';
         const baseHandleSize = parseFloat(baseHandleSizePx);
         const baseHandleTouchSize = baseHandleSize * 2 < 14 ? 14 : baseHandleSize;
-        return (h(Host, { key: 'fd353ff17bcde1a9ab646b6f463d1c6ce00a3dff' }, h("div", { key: '45bc2af8f1a3a2bfa3aa76a478c7bf208027da0c', class: "debug-panel", style: { display: this.store.state.debugInfo.showViewportInfo ? 'block' : 'none' } }, h("div", { key: '50e932febc35c7dbe852ad99d96ca4f0e0b742fc' }, "ActiveWorkspaceId: ", (_b = (_a = this.store.state) === null || _a === void 0 ? void 0 : _a.activeWorkspace) === null || _b === void 0 ? void 0 :
-            _b.id), h("div", { key: 'af94b5061f0803588fece6cccdf540f46f13ca05' }, "ActiveWorkspaceName: ", (_d = (_c = this.store.state) === null || _c === void 0 ? void 0 : _c.activeWorkspace) === null || _d === void 0 ? void 0 :
-            _d.name), h("div", { key: '89c0d21ce94f4eda72153554fadbd6942e785edc' }, "TranslateX: ", (_e = this.store.state) === null || _e === void 0 ? void 0 :
-            _e.translateX), h("div", { key: '340b5165265241972a7a940268c7940063ba8c12' }, "TranslateY: ", (_f = this.store.state) === null || _f === void 0 ? void 0 :
-            _f.translateY), h("div", { key: '428054b3ea4a1c327f03d6b37bfe6331dea6c57b' }, "ViewportWidth: ", (_g = this.store.state) === null || _g === void 0 ? void 0 :
-            _g.viewportWidth), h("div", { key: 'd67420ef633627413066a28b8ef9ac43c520015d' }, "ViewportHeight: ", (_h = this.store.state) === null || _h === void 0 ? void 0 :
-            _h.viewportHeight), h("div", { key: 'dedf9eb89c79fa496f7b6d0df9c646898f66b3d4' }, "ObjectsInViewport. ", this.store.objects.length), h("div", { key: '59bb8416941fd84305f2892f24098f6f4a084401' }, "Scale: ", (_j = this.store.state) === null || _j === void 0 ? void 0 :
-            _j.scale), h("div", { key: '6705a4cec22e4e33f75e296e17bc2952a3d1cba7' }, "ActiveTool: ", (_l = (_k = this.store.state) === null || _k === void 0 ? void 0 : _k.activeTool) === null || _l === void 0 ? void 0 :
-            _l.name), h("div", { key: 'ca22e0a377a11fdca851b38f1bf425648cd3b9dd' }, "HasViewportChanged: ", ((_m = this.store.state) === null || _m === void 0 ? void 0 : _m.hasViewportChanged) ? 'true' : 'false'), h("div", { key: '57508b9ee24a5af631e6bb1eace404c39af14f82' }, "IsEnabled: ", ((_o = this.store.state) === null || _o === void 0 ? void 0 : _o.isEnabled) ? 'true' : 'false'), h("div", { key: 'f6cea367b5007f767afb25a033215abda734de9d' }, "IsScaling: ", ((_p = this.store.state) === null || _p === void 0 ? void 0 : _p.isScaling) ? 'true' : 'false'), h("div", { key: '4386ef749facd2e54da7f58aa2713b87ed76f2df' }, "IsPanning: ", ((_q = this.store.state) === null || _q === void 0 ? void 0 : _q.isPanning) ? 'true' : 'false'), h("div", { key: '1713185b36a50dfe0f9efa0c92394222db80a377' }, "IsFocused: ", this.store.state.isFocused ? 'true' : 'false'), h("div", { key: '5104f428b808e7d843712302ad2e58b619876bee' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), h("div", { key: '2cb3b27a00627188e7082fa94169eb961a1ae6ed' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), h("div", { key: '7407656e61be665f27e706738faa6d318e2c1d04' }, "IsResizeHandleSelected: ", this.store.state.isResizeHandleSelected ? 'true' : 'false'), h("div", { key: '701bf05c25cb3d3728af6602f694e6064627ea59' }, "IsRotationHandleSelected: ", this.store.state.isRotationHandleSelected ? 'true' : 'false'), h("div", { key: '772c345ea9c64ef800fdbb26919f1a54ca889025' }, "IsDrawing: ", this.store.state.isDrawing ? 'true' : 'false'), h("div", { key: 'dc687c8ba24182b8b61979ad334b989d3be72ec6' }, "IsWriting: ", this.store.state.isWriting ? 'true' : 'false'), h("div", { key: '10cbc575a7905396a76eca4e7b56be719755aeb4' }, "PointerX: ", (_r = this.store.state) === null || _r === void 0 ? void 0 :
-            _r.pointerX), h("div", { key: '4f21199328ffadddcc58b7d6b102a89e5079f676' }, "PointerY: ", (_s = this.store.state) === null || _s === void 0 ? void 0 :
-            _s.pointerY), h("div", { key: 'ac705f38cb323b8dc8cbf95f875657c5dec5c9ae' }, "SelectedObjects: ", ((_t = this.store.state.selectionGroup) === null || _t === void 0 ? void 0 : _t.objects.length) || 0)), h("div", { key: '2ca55c53246e64520af6720a3f87d2357295ca7f', id: "origin", class: "origin", style: {
-                transform: `matrix(${(_u = this.store.state) === null || _u === void 0 ? void 0 : _u.scale}, 0, 0, ${(_v = this.store.state) === null || _v === void 0 ? void 0 : _v.scale}, ${(_w = this.store.state) === null || _w === void 0 ? void 0 : _w.translateX}, ${(_x = this.store.state) === null || _x === void 0 ? void 0 : _x.translateY})`,
-            } }, (_y = this.store.state.objectsMap.allObjects()) === null || _y === void 0 ? void 0 :
-            _y.map(object => {
-                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
-                return (h("div", { key: object.id, style: { display: object.isInViewport() ? 'block' : 'none', transform: object === null || object === void 0 ? void 0 : object.transformationMatrix, transformOrigin: 'top left', zIndex: object.zIndex.toString(), position: 'absolute' } }, h("svg", { xmlns: "http://www.w3.org/2000/svg", id: object.id, class: "object", style: {
-                        height: object === null || object === void 0 ? void 0 : object.totalHeight.toString(),
-                        width: object === null || object === void 0 ? void 0 : object.totalWidth.toString(),
-                        left: '0',
-                        top: '0',
-                        position: 'absolute',
-                        transform: `rotate(${object.rotationDegrees}deg)`,
-                        transformOrigin: 'center',
-                        opacity: object.markedForRemoval ? '0.5' : object.opacity.toString(),
-                        pointerEvents: object.markedForRemoval ? 'none' : 'auto',
-                    } }, h("foreignObject", { x: "0", y: "0", width: object.totalWidth.toString(), height: object.totalHeight.toString(), style: {
-                        minHeight: '0',
-                        minWidth: '0',
-                        backgroundColor: object.backgroundColor,
-                        borderColor: object.borderColor,
-                        borderWidth: object.borderWidth + 'px',
-                        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: {
-                        height: object === null || object === void 0 ? void 0 : object.height.toString(),
-                        width: object === null || object === void 0 ? void 0 : object.width.toString(),
-                        position: 'absolute',
-                        overflow: 'visible',
-                    }, viewBox: object === null || object === void 0 ? void 0 : object.viewBox }, h("path", { d: object === null || object === void 0 ? void 0 : object.d, fill: object.fill, stroke: object === null || object === void 0 ? void 0 : object.stroke }))), KritzelClassHelper.isInstanceOf(object, 'KritzelImage') && (h("img", { ref: el => (el ? object.mount(el) : object.unmount()), src: object.src, style: {
-                        width: '100%',
-                        height: '100%',
-                        userSelect: 'none',
-                        pointerEvents: 'none',
-                    }, draggable: false, onDragStart: e => e.preventDefault() })), KritzelClassHelper.isInstanceOf(object, 'KritzelText') && (h("textarea", { ref: el => (el ? object.mount(el) : object.unmount()), value: object.value, onKeyDown: event => object.handleKeyDown(event), onInput: event => object.handleInput(event), rows: object.rows, style: {
-                        width: '100%',
-                        height: '100%',
-                        color: object.fontColor,
-                        fontSize: ((_a = object.fontSize) === null || _a === void 0 ? void 0 : _a.toString()) + 'px',
-                        fontFamily: object.fontFamily,
-                        border: 'none',
-                        outline: 'none',
-                        resize: 'none',
-                        overflow: 'hidden',
-                        display: 'block',
-                        padding: '1px',
-                        whiteSpace: 'nowrap',
-                        pointerEvents: object.isReadonly ? 'none' : 'auto',
-                        cursor: object.isReadonly ? 'default' : 'text',
-                        caretColor: object.isReadonly ? 'transparent' : 'auto',
-                    } })), KritzelClassHelper.isInstanceOf(object, 'KritzelCustomElement') && (h("div", { ref: el => (el ? object.mount(el) : object.unmount()), style: {
-                        width: '100%',
-                        height: '100%',
-                        pointerEvents: 'auto',
-                        overflow: 'hidden',
-                        display: 'block',
-                    } })), KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionGroup') && (h("div", { ref: el => (el ? object.mount(el) : object.unmount()), style: {
-                        width: '100%',
-                        height: '100%',
-                    } })), KritzelClassHelper.isInstanceOf(object, 'KrtizelSelectionBox') && (h("div", { ref: el => (el ? object.mount(el) : object.unmount()), style: {
-                        width: '100%',
-                        height: '100%',
-                    } }))), h("line", { x1: "0", y1: "0", x2: object.totalWidth, y2: "0", style: {
-                        stroke: 'var(--kritzel-selection-border-color, #007AFF)',
-                        strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${(_b = this.store.state) === null || _b === void 0 ? void 0 : _b.scale})`,
-                        strokeLinecap: 'square',
-                    }, visibility: object.isSelected ? 'visible' : 'hidden' }), h("line", { x1: "0", y1: "0", x2: "0", y2: object.totalHeight, style: {
-                        stroke: 'var(--kritzel-selection-border-color, #007AFF)',
-                        strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${(_c = this.store.state) === null || _c === void 0 ? void 0 : _c.scale})`,
-                        strokeLinecap: 'square',
-                    }, visibility: object.isSelected ? 'visible' : 'hidden' }), h("line", { x1: "0", y1: object.totalHeight, x2: object.totalWidth, y2: object.totalHeight, style: {
-                        stroke: 'var(--kritzel-selection-border-color, #007AFF)',
-                        strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${(_d = this.store.state) === null || _d === void 0 ? void 0 : _d.scale})`,
-                        strokeLinecap: 'square',
-                    }, visibility: object.isSelected ? 'visible' : 'hidden' }), h("line", { x1: object.totalWidth, y1: "0", x2: object.totalWidth, y2: object.totalHeight, style: {
-                        stroke: 'var(--kritzel-selection-border-color, #007AFF)',
-                        strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${(_e = this.store.state) === null || _e === void 0 ? void 0 : _e.scale})`,
-                        strokeLinecap: 'square',
-                    }, visibility: object.isSelected ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle top-left", cx: "0", cy: "0", r: `${(baseHandleSize * object.scale) / ((_f = this.store.state) === null || _f === void 0 ? void 0 : _f.scale)}`, style: {
-                        fill: 'var(--kritzel-selection-handle-color, #000000)',
-                    }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle-overlay top-left", cx: "0", cy: "0", r: `${(baseHandleTouchSize * object.scale) / ((_g = this.store.state) === null || _g === void 0 ? void 0 : _g.scale)}`, style: {
-                        fill: 'transparent',
-                    }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle top-right", cx: object.totalWidth, cy: "0", r: `${(baseHandleSize * object.scale) / ((_h = this.store.state) === null || _h === void 0 ? void 0 : _h.scale)}`, style: {
-                        fill: 'var(--kritzel-selection-handle-color, #000000)',
-                    }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle-overlay top-right", cx: object.totalWidth, cy: "0", r: `${(baseHandleTouchSize * object.scale) / ((_j = this.store.state) === null || _j === void 0 ? void 0 : _j.scale)}`, style: {
-                        fill: 'transparent',
-                    }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle bottom-left", cx: "0", cy: object.totalHeight, r: `${(baseHandleSize * object.scale) / ((_k = this.store.state) === null || _k === void 0 ? void 0 : _k.scale)}`, style: {
-                        fill: 'var(--kritzel-selection-handle-color, #000000)',
-                    }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle-overlay bottom-left", cx: "0", cy: object.totalHeight, r: `${(baseHandleTouchSize * object.scale) / ((_l = this.store.state) === null || _l === void 0 ? void 0 : _l.scale)}`, style: {
-                        fill: 'transparent',
-                    }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle bottom-right", cx: object.totalWidth, cy: object.totalHeight, r: `${(baseHandleSize * object.scale) / ((_m = this.store.state) === null || _m === void 0 ? void 0 : _m.scale)}`, style: {
-                        fill: 'var(--kritzel-selection-handle-color, #000000)',
-                    }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle-overlay bottom-right", cx: object.totalWidth, cy: object.totalHeight, r: `${(baseHandleTouchSize * object.scale) / ((_o = this.store.state) === null || _o === void 0 ? void 0 : _o.scale)}`, style: {
-                        fill: 'transparent',
-                    }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("line", { x1: object.totalWidth / 2, y1: "0", x2: object.totalWidth / 2, y2: -((15 * object.scale) / ((_p = this.store.state) === null || _p === void 0 ? void 0 : _p.scale)), style: {
-                        stroke: 'var(--kritzel-selection-border-color, #007AFF)',
-                        strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${(_q = this.store.state) === null || _q === void 0 ? void 0 : _q.scale})`,
-                    }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "rotation-handle", cx: object.totalWidth / 2, cy: -((15 * object.scale) / ((_r = this.store.state) === null || _r === void 0 ? void 0 : _r.scale)), r: `${(baseHandleSize * object.scale) / ((_s = this.store.state) === null || _s === void 0 ? void 0 : _s.scale)}`, style: {
-                        fill: 'var(--kritzel-selection-handle-color, #000000)',
-                    }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "rotation-handle-overlay", cx: object.totalWidth / 2, cy: -((15 * object.scale) / ((_t = this.store.state) === null || _t === void 0 ? void 0 : _t.scale)), r: `${(baseHandleTouchSize * object.scale) / ((_u = this.store.state) === null || _u === void 0 ? void 0 : _u.scale)}`, style: {
-                        fill: 'transparent',
-                        cursor: 'grab',
-                    }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("g", { style: { display: this.store.state.debugInfo.showObjectInfo ? 'block' : 'none', pointerEvents: 'none' } }, h("foreignObject", { x: object.totalWidth.toString(), y: "0", width: "400px", height: "160px", style: { minHeight: '0', minWidth: '0', display: object.isDebugInfoVisible ? 'block' : 'none' } }, h("div", { style: { width: '100%', height: '100%' } }, h("div", { style: { whiteSpace: 'nowrap' } }, "zIndex: ", object.zIndex), h("div", { style: { whiteSpace: 'nowrap' } }, "translateX: ", object.translateX), h("div", { style: { whiteSpace: 'nowrap' } }, "translateY: ", object.translateY), h("div", { style: { whiteSpace: 'nowrap' } }, "width: ", object.width), h("div", { style: { whiteSpace: 'nowrap' } }, "height: ", object.height), h("div", { style: { whiteSpace: 'nowrap' } }, "scale: ", object.scale), h("div", { style: { whiteSpace: 'nowrap' } }, "rotation: ", object.rotation), h("div", { style: { whiteSpace: 'nowrap' } }, "x: ", object.x), h("div", { style: { whiteSpace: 'nowrap' } }, "y: ", object.y)))))));
-            }), h("svg", { key: '0098f1b8233d45f49dc8bdcc13c08f20c04b65e1', class: "object", xmlns: "http://www.w3.org/2000/svg", style: {
-                height: (_z = this.store.state.currentPath) === null || _z === void 0 ? void 0 : _z.height.toString(),
-                width: (_0 = this.store.state.currentPath) === null || _0 === void 0 ? void 0 : _0.width.toString(),
+        return (h(Host, { key: '05b345f98a4548591946d1295da4d4b288767da6' }, h("div", { key: 'c8399a8968a39448120f3123b39c755b0f9b5e49', class: "debug-panel", style: { display: this.core.store.state.debugInfo.showViewportInfo ? 'block' : 'none' } }, h("div", { key: '2cedd93f88f1a1e6ddc99e648375549ca5254f04' }, "ActiveWorkspaceId: ", this.core.store.state?.activeWorkspace?.id), h("div", { key: '30ed15a98512b0efd91123773963d6266fa8426a' }, "ActiveWorkspaceName: ", this.core.store.state?.activeWorkspace?.name), h("div", { key: 'a0eb11088673a9e0e2e22880ae8a7a89c6705609' }, "TranslateX: ", this.core.store.state?.translateX), h("div", { key: '97c7ccfc77342d4122f85136ab4c81709046a4e4' }, "TranslateY: ", this.core.store.state?.translateY), h("div", { key: 'ff832aa8a779a4adb2fca5b7ecd8d9b992cf7b99' }, "ViewportWidth: ", this.core.store.state?.viewportWidth), h("div", { key: '6867ad7ee7f4fbe8725ac6edbe1bd999942fd729' }, "ViewportHeight: ", this.core.store.state?.viewportHeight), h("div", { key: 'f54768467cace934702bd3fd6f26970515f669f0' }, "Scale: ", this.core.store.state?.scale), h("div", { key: '4aaa2cec8688e42249a6f0f7e2d67a13c57fa155' }, "ActiveTool: ", this.core.store.state?.activeTool?.name), h("div", { key: '0bec60557f2a1271c69226b477fde02f4c2857a1' }, "HasViewportChanged: ", this.core.store.state?.hasViewportChanged ? 'true' : 'false'), h("div", { key: 'bd342af473102a1c2095a3a2810de25630c8a717' }, "IsEnabled: ", this.core.store.state?.isEnabled ? 'true' : 'false'), h("div", { key: '62477d9f931903bff3fa6fa85f1ecd3b2944884f' }, "IsScaling: ", this.core.store.state?.isScaling ? 'true' : 'false'), h("div", { key: '80fba2f64cec36d9c7b2d5f2081ef21190c61768' }, "IsPanning: ", this.core.store.state?.isPanning ? 'true' : 'false'), h("div", { key: 'da75419ac806f146a6ac69607b64095eb1f37de4' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), h("div", { key: '11b3bf816afa3d64fea468de92a351d9e96dee9e' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), h("div", { key: 'e12cf1412d0e48a1245ae923c595e737deb4dffb' }, "IsResizeHandleSelected: ", this.core.store.state.isResizeHandleSelected ? 'true' : 'false'), h("div", { key: 'fa79c455e0ae7d68259003ce63a58eda4c250eba' }, "IsRotationHandleSelected: ", this.core.store.state.isRotationHandleSelected ? 'true' : 'false'), h("div", { key: 'bc7b25568bac9ef9cd6f1341a7415e4b93d8e8e9' }, "IsDrawing: ", this.core.store.state.isDrawing ? 'true' : 'false'), h("div", { key: 'a62eef5e0e277b629a11bb13809a4ab211d9428c' }, "IsWriting: ", this.core.store.state.isWriting ? 'true' : 'false'), h("div", { key: '285815884e83a3d5d8ec3726034ff4853225f216' }, "PointerX: ", this.core.store.state?.pointerX), h("div", { key: 'f267eb928ccb57736229d3a7fbc5bfdfd0d51819' }, "PointerY: ", this.core.store.state?.pointerY), h("div", { key: '55977bf82d326a128a5da8d303875603c2850aac' }, "SelectedObjects: ", this.core.store.state.selectionGroup?.objects.length || 0)), h("div", { key: '8c91eaf482ce6cbd7400ba5342ec6c866fc0a049', 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: {
+                    display: object.isInViewport() ? 'block' : 'none',
+                    transform: object?.transformationMatrix,
+                    transformOrigin: 'top left',
+                    zIndex: object.zIndex.toString(),
+                    position: 'absolute',
+                } }, h("svg", { xmlns: "http://www.w3.org/2000/svg", id: object.id, class: "object", style: {
+                    height: object?.totalHeight.toString(),
+                    width: object?.totalWidth.toString(),
+                    left: '0',
+                    top: '0',
+                    position: 'absolute',
+                    transform: `rotate(${object.rotationDegrees}deg)`,
+                    transformOrigin: 'center',
+                    opacity: object.markedForRemoval ? '0.5' : object.opacity.toString(),
+                    pointerEvents: object.markedForRemoval ? 'none' : 'auto',
+                } }, h("foreignObject", { x: "0", y: "0", width: object.totalWidth.toString(), height: object.totalHeight.toString(), style: {
+                    minHeight: '0',
+                    minWidth: '0',
+                    backgroundColor: object.backgroundColor,
+                    borderColor: object.borderColor,
+                    borderWidth: object.borderWidth + 'px',
+                    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: {
+                    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: {
+                    width: '100%',
+                    height: '100%',
+                    userSelect: 'none',
+                    pointerEvents: 'none',
+                }, draggable: false, onDragStart: e => e.preventDefault() })), KritzelClassHelper.isInstanceOf(object, 'KritzelText') && (h("textarea", { ref: el => (el ? object.mount(el) : object.unmount()), value: object.value, onKeyDown: event => object.handleKeyDown(event), onInput: event => object.handleInput(event), rows: object.rows, style: {
+                    width: '100%',
+                    height: '100%',
+                    color: object.fontColor,
+                    fontSize: object.fontSize?.toString() + 'px',
+                    fontFamily: object.fontFamily,
+                    border: 'none',
+                    outline: 'none',
+                    resize: 'none',
+                    overflow: 'hidden',
+                    display: 'block',
+                    padding: '1px',
+                    whiteSpace: 'nowrap',
+                    pointerEvents: object.isReadonly ? 'none' : 'auto',
+                    cursor: object.isReadonly ? 'default' : 'text',
+                    caretColor: object.isReadonly ? 'transparent' : 'auto',
+                } })), KritzelClassHelper.isInstanceOf(object, 'KritzelCustomElement') && (h("div", { ref: el => (el ? object.mount(el) : object.unmount()), style: {
+                    width: '100%',
+                    height: '100%',
+                    pointerEvents: 'auto',
+                    overflow: 'hidden',
+                    display: 'block',
+                } })), KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionGroup') && (h("div", { ref: el => (el ? object.mount(el) : object.unmount()), style: {
+                    width: '100%',
+                    height: '100%',
+                } })), KritzelClassHelper.isInstanceOf(object, 'KrtizelSelectionBox') && (h("div", { ref: el => (el ? object.mount(el) : object.unmount()), style: {
+                    width: '100%',
+                    height: '100%',
+                    backgroundColor: KritzelDevicesHelper.isFirefox() ? object.backgroundColor : 'transparent',
+                    borderWidth: KritzelDevicesHelper.isFirefox() ? object.borderWidth + 'px' : '0',
+                    borderStyle: KritzelDevicesHelper.isFirefox() ? 'solid' : 'none',
+                    borderColor: KritzelDevicesHelper.isFirefox() ? object.borderColor : 'transparent',
+                } }))), h("line", { x1: "0", y1: "0", x2: object.totalWidth, y2: "0", style: {
+                    stroke: 'var(--kritzel-selection-border-color, #007AFF)',
+                    strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${this.core.store.state?.scale})`,
+                    strokeLinecap: 'square',
+                }, visibility: object.isSelected ? 'visible' : 'hidden' }), h("line", { x1: "0", y1: "0", x2: "0", y2: object.totalHeight, style: {
+                    stroke: 'var(--kritzel-selection-border-color, #007AFF)',
+                    strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${this.core.store.state?.scale})`,
+                    strokeLinecap: 'square',
+                }, visibility: object.isSelected ? 'visible' : 'hidden' }), h("line", { x1: "0", y1: object.totalHeight, x2: object.totalWidth, y2: object.totalHeight, style: {
+                    stroke: 'var(--kritzel-selection-border-color, #007AFF)',
+                    strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${this.core.store.state?.scale})`,
+                    strokeLinecap: 'square',
+                }, visibility: object.isSelected ? 'visible' : 'hidden' }), h("line", { x1: object.totalWidth, y1: "0", x2: object.totalWidth, y2: object.totalHeight, style: {
+                    stroke: 'var(--kritzel-selection-border-color, #007AFF)',
+                    strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${this.core.store.state?.scale})`,
+                    strokeLinecap: 'square',
+                }, visibility: object.isSelected ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle top-left", cx: "0", cy: "0", r: `${(baseHandleSize * object.scale) / this.core.store.state?.scale}`, style: {
+                    fill: 'var(--kritzel-selection-handle-color, #000000)',
+                }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle-overlay top-left", cx: "0", cy: "0", r: `${(baseHandleTouchSize * object.scale) / this.core.store.state?.scale}`, style: {
+                    fill: 'transparent',
+                }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle top-right", cx: object.totalWidth, cy: "0", r: `${(baseHandleSize * object.scale) / this.core.store.state?.scale}`, style: {
+                    fill: 'var(--kritzel-selection-handle-color, #000000)',
+                }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle-overlay top-right", cx: object.totalWidth, cy: "0", r: `${(baseHandleTouchSize * object.scale) / this.core.store.state?.scale}`, style: {
+                    fill: 'transparent',
+                }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle bottom-left", cx: "0", cy: object.totalHeight, r: `${(baseHandleSize * object.scale) / this.core.store.state?.scale}`, style: {
+                    fill: 'var(--kritzel-selection-handle-color, #000000)',
+                }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle-overlay bottom-left", cx: "0", cy: object.totalHeight, r: `${(baseHandleTouchSize * object.scale) / this.core.store.state?.scale}`, style: {
+                    fill: 'transparent',
+                }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle bottom-right", cx: object.totalWidth, cy: object.totalHeight, r: `${(baseHandleSize * object.scale) / this.core.store.state?.scale}`, style: {
+                    fill: 'var(--kritzel-selection-handle-color, #000000)',
+                }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle-overlay bottom-right", cx: object.totalWidth, cy: object.totalHeight, r: `${(baseHandleTouchSize * object.scale) / this.core.store.state?.scale}`, style: {
+                    fill: 'transparent',
+                }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("line", { x1: object.totalWidth / 2, y1: "0", x2: object.totalWidth / 2, y2: -((15 * object.scale) / this.core.store.state?.scale), style: {
+                    stroke: 'var(--kritzel-selection-border-color, #007AFF)',
+                    strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${this.core.store.state?.scale})`,
+                }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "rotation-handle", cx: object.totalWidth / 2, cy: -((15 * object.scale) / this.core.store.state?.scale), r: `${(baseHandleSize * object.scale) / this.core.store.state?.scale}`, style: {
+                    fill: 'var(--kritzel-selection-handle-color, #000000)',
+                }, 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)))))));
+        }), 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',
-                zIndex: (_1 = this.store.state.currentPath) === null || _1 === void 0 ? void 0 : _1.zIndex.toString(),
+                zIndex: this.core.store.state.currentPath?.zIndex.toString(),
                 position: 'absolute',
-                transform: (_2 = this.store.state.currentPath) === null || _2 === void 0 ? void 0 : _2.transformationMatrix,
+                transform: this.core.store.state.currentPath?.transformationMatrix,
                 transformOrigin: 'top left',
                 overflow: 'visible',
-            }, viewBox: (_3 = this.store.state.currentPath) === null || _3 === void 0 ? void 0 : _3.viewBox }, h("path", { key: '08310713fa8f2f1f695b1b61bb2b6e5a5f77f192', d: (_4 = this.store.state.currentPath) === null || _4 === void 0 ? void 0 : _4.d, fill: (_5 = this.store.state.currentPath) === null || _5 === void 0 ? void 0 : _5.fill, stroke: (_6 = this.store.state.currentPath) === null || _6 === void 0 ? void 0 : _6.stroke }))), this.store.state.isContextMenuVisible && (h("kritzel-context-menu", { key: '2529447e26ba02689303be39cc593dfafc25b96c', class: "context-menu", ref: el => (this.contextMenuElement = el), items: this.store.state.contextMenuItems, objects: ((_7 = this.store.state.selectionGroup) === null || _7 === void 0 ? void 0 : _7.objects) || [], style: {
+            }, viewBox: this.core.store.state.currentPath?.viewBox }, h("path", { key: '1cdae549bc53dc30eb397f27702054ac6c5122f7', 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: '2428e653f61d7ac5a71da1dbf94155b02e870406', 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.store.state.contextMenuX}px`,
-                top: `${this.store.state.contextMenuY}px`,
+                left: `${this.core.store.state.contextMenuX}px`,
+                top: `${this.core.store.state.contextMenuY}px`,
                 zIndex: '10000',
             }, onActionSelected: event => {
-                var _a;
                 event.detail.action({
-                    x: (-this.store.state.translateX + this.store.state.contextMenuX) / this.store.state.scale,
-                    y: (-this.store.state.translateY + this.store.state.contextMenuY) / this.store.state.scale,
-                }, (_a = this.store.state.selectionGroup) === null || _a === void 0 ? void 0 : _a.objects);
+                    x: (-this.core.store.state.translateX + this.core.store.state.contextMenuX) / this.core.store.state.scale,
+                    y: (-this.core.store.state.translateY + this.core.store.state.contextMenuY) / this.core.store.state.scale,
+                }, this.core.store.state.selectionGroup?.objects);
                 this.hideContextMenu();
-            } })), ((_8 = this.store.state) === null || _8 === void 0 ? void 0 : _8.activeTool) instanceof KritzelEraserTool && !this.store.state.isScaling && h("kritzel-cursor-trail", { key: '7c10277160eb1bc51581e4dfbdd4d0cdf626ed8c', store: this.store })));
+            }, onClose: () => this.hideContextMenu() })), this.core.store.state?.activeTool instanceof KritzelEraserTool && !this.core.store.state.isScaling && h("kritzel-cursor-trail", { key: '94bdb8b137c50bb7499a37e4784ae36989258ee2', core: this.core })));
     }
     static get is() { return "kritzel-engine"; }
     static get encapsulation() { return "shadow"; }
@@ -485,8 +458,8 @@ export class KritzelEngine {
                     "references": {
                         "KritzelWorkspace": {
                             "location": "import",
-                            "path": "../../../classes/workspace.class",
-                            "id": "src/classes/workspace.class.ts::KritzelWorkspace"
+                            "path": "../../../classes/core/workspace.class",
+                            "id": "src/classes/core/workspace.class.ts::KritzelWorkspace"
                         }
                     }
                 },
@@ -677,8 +650,28 @@ export class KritzelEngine {
                     "references": {
                         "KritzelWorkspace": {
                             "location": "import",
-                            "path": "../../../classes/workspace.class",
-                            "id": "src/classes/workspace.class.ts::KritzelWorkspace"
+                            "path": "../../../classes/core/workspace.class",
+                            "id": "src/classes/core/workspace.class.ts::KritzelWorkspace"
+                        }
+                    }
+                }
+            }, {
+                "method": "longpress",
+                "name": "longpress",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "PointerEvent",
+                    "resolved": "PointerEvent",
+                    "references": {
+                        "PointerEvent": {
+                            "location": "global",
+                            "id": "global::PointerEvent"
                         }
                     }
                 }
@@ -756,23 +749,6 @@ export class KritzelEngine {
                     "tags": []
                 }
             },
-            "setFocus": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "",
-                    "tags": []
-                }
-            },
             "disable": {
                 "complexType": {
                     "signature": "() => Promise<void>",
@@ -1297,7 +1273,7 @@ export class KritzelEngine {
             },
             "createWorkspace": {
                 "complexType": {
-                    "signature": "(workspace: KritzelWorkspace) => Promise<void>",
+                    "signature": "(workspace: KritzelWorkspace) => Promise<KritzelWorkspace | null>",
                     "parameters": [{
                             "name": "workspace",
                             "type": "KritzelWorkspace",
@@ -1310,11 +1286,11 @@ export class KritzelEngine {
                         },
                         "KritzelWorkspace": {
                             "location": "import",
-                            "path": "../../../classes/workspace.class",
-                            "id": "src/classes/workspace.class.ts::KritzelWorkspace"
+                            "path": "../../../classes/core/workspace.class",
+                            "id": "src/classes/core/workspace.class.ts::KritzelWorkspace"
                         }
                     },
-                    "return": "Promise<void>"
+                    "return": "Promise<KritzelWorkspace>"
                 },
                 "docs": {
                     "text": "",
@@ -1336,8 +1312,8 @@ export class KritzelEngine {
                         },
                         "KritzelWorkspace": {
                             "location": "import",
-                            "path": "../../../classes/workspace.class",
-                            "id": "src/classes/workspace.class.ts::KritzelWorkspace"
+                            "path": "../../../classes/core/workspace.class",
+                            "id": "src/classes/core/workspace.class.ts::KritzelWorkspace"
                         }
                     },
                     "return": "Promise<void>"
@@ -1362,8 +1338,8 @@ export class KritzelEngine {
                         },
                         "KritzelWorkspace": {
                             "location": "import",
-                            "path": "../../../classes/workspace.class",
-                            "id": "src/classes/workspace.class.ts::KritzelWorkspace"
+                            "path": "../../../classes/core/workspace.class",
+                            "id": "src/classes/core/workspace.class.ts::KritzelWorkspace"
                         }
                     },
                     "return": "Promise<void>"
@@ -1384,8 +1360,8 @@ export class KritzelEngine {
                         },
                         "KritzelWorkspace": {
                             "location": "import",
-                            "path": "../../../classes/workspace.class",
-                            "id": "src/classes/workspace.class.ts::KritzelWorkspace"
+                            "path": "../../../classes/core/workspace.class",
+                            "id": "src/classes/core/workspace.class.ts::KritzelWorkspace"
                         }
                     },
                     "return": "Promise<KritzelWorkspace[]>"
@@ -1394,6 +1370,28 @@ export class KritzelEngine {
                     "text": "",
                     "tags": []
                 }
+            },
+            "getActiveWorkspace": {
+                "complexType": {
+                    "signature": "() => Promise<KritzelWorkspace>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "KritzelWorkspace": {
+                            "location": "import",
+                            "path": "../../../classes/core/workspace.class",
+                            "id": "src/classes/core/workspace.class.ts::KritzelWorkspace"
+                        }
+                    },
+                    "return": "Promise<KritzelWorkspace>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
             }
         };
     }
@@ -1441,6 +1439,12 @@ export class KritzelEngine {
                 "target": undefined,
                 "capture": false,
                 "passive": false
+            }, {
+                "name": "longpress",
+                "method": "handleLongPress",
+                "target": undefined,
+                "capture": false,
+                "passive": false
             }, {
                 "name": "contextmenu",
                 "method": "handleContextMenu",
@@ -1465,18 +1469,6 @@ export class KritzelEngine {
                 "target": "window",
                 "capture": false,
                 "passive": false
-            }, {
-                "name": "mousedown",
-                "method": "updateFocus",
-                "target": "window",
-                "capture": false,
-                "passive": true
-            }, {
-                "name": "click",
-                "method": "handleClick",
-                "target": undefined,
-                "capture": false,
-                "passive": false
             }];
     }
 }