kritzel-stencil 0.0.131 → 0.0.133

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,131 +13,100 @@ 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 (this.core.store.state.activeWorkspace !== newWorkspace) {
+            this.core.initializeWorkspace(newWorkspace);
+        }
+    }
     activeTool;
     globalContextMenuItems;
     objectContextMenuItems;
     scaleMax = ABSOLUTE_SCALE_MAX;
-    scaleMin = ABSOLUTE_SCALE_MIN;
-    isEngineReady;
-    activeToolChange;
-    workspacesChange;
-    host;
-    forceUpdate = 0;
-    onWorkspaceChange(newWorkspace) {
-        if (newWorkspace) {
-            this.store.initializeWorkspace(newWorkspace);
-        }
-    }
     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;
-        }
-    }
-    store;
-    viewport;
-    contextMenuHandler;
-    keyHandler;
-    contextMenuElement = null;
-    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.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) {
-        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);
-        this.store.state?.activeTool?.handleWheel(ev);
+        this.core.store.state?.activeTool?.handleWheel(ev);
     }
     handlePointerDown(ev) {
-        if (this.store.isDisabled) {
+        if (this.core.store.isDisabled) {
             return;
         }
-        if (KritzelEventHelper.isPointerEventOnContextMenu(ev) === false && this.store.state.isContextMenuVisible) {
-            this.hideContextMenu();
-            return;
+        if (KritzelDevicesHelper.isTouchDevice()) {
+            KritzelEventHelper.onLongPress(ev, (event) => this.longpress.emit(event));
         }
-        KritzelEventHelper.onLongTouchPress(ev, (event) => {
-            if (!(this.store.state.activeTool instanceof KritzelSelectionTool)) {
-                return;
-            }
-            this.contextMenuHandler.handleContextMenu(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);
-        this.store.state?.activeTool?.handlePointerDown(ev);
+        this.core.store.state?.activeTool?.handlePointerDown(ev);
     }
     handlePointerMove(ev) {
-        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);
-        this.store.state?.activeTool?.handlePointerMove(ev);
+        this.core.store.state?.activeTool?.handlePointerMove(ev);
     }
     handlePointerUp(ev) {
-        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);
-        this.store.state?.activeTool?.handlePointerUp(ev);
+        this.core.store.state?.activeTool?.handlePointerUp(ev);
     }
     handlePointerCancel(ev) {
-        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);
-        this.store.state?.activeTool?.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') {
@@ -155,26 +123,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;
@@ -183,153 +137,183 @@ export class KritzelEngine {
         return Promise.resolve(registeredTool);
     }
     async changeActiveTool(tool) {
-        this.store.state.activeTool?.onDeactivate();
-        this.store.setState('activeTool', tool);
-        this.store.deselectAllObjects();
+        this.core.store.state.activeTool?.onDeactivate();
+        this.core.store.setState('activeTool', tool);
+        this.core.deselectAllObjects();
         tool?.onActivate();
     }
-    async setFocus() {
-        this.host.focus();
-        this.store.state.isFocused = true;
-    }
     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) {
-        this.store.state.activeTool?.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() {
-        this.store.state.activeTool?.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() {
-        return this.store.state.copiedObjects?.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() {
         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: ", this.store.state?.activeWorkspace?.id), h("div", { key: 'af94b5061f0803588fece6cccdf540f46f13ca05' }, "ActiveWorkspaceName: ", this.store.state?.activeWorkspace?.name), h("div", { key: '89c0d21ce94f4eda72153554fadbd6942e785edc' }, "TranslateX: ", this.store.state?.translateX), h("div", { key: '340b5165265241972a7a940268c7940063ba8c12' }, "TranslateY: ", this.store.state?.translateY), h("div", { key: '428054b3ea4a1c327f03d6b37bfe6331dea6c57b' }, "ViewportWidth: ", this.store.state?.viewportWidth), h("div", { key: 'd67420ef633627413066a28b8ef9ac43c520015d' }, "ViewportHeight: ", this.store.state?.viewportHeight), h("div", { key: 'dedf9eb89c79fa496f7b6d0df9c646898f66b3d4' }, "ObjectsInViewport. ", this.store.objects.length), h("div", { key: '59bb8416941fd84305f2892f24098f6f4a084401' }, "Scale: ", this.store.state?.scale), h("div", { key: '6705a4cec22e4e33f75e296e17bc2952a3d1cba7' }, "ActiveTool: ", this.store.state?.activeTool?.name), h("div", { key: 'ca22e0a377a11fdca851b38f1bf425648cd3b9dd' }, "HasViewportChanged: ", this.store.state?.hasViewportChanged ? 'true' : 'false'), h("div", { key: '57508b9ee24a5af631e6bb1eace404c39af14f82' }, "IsEnabled: ", this.store.state?.isEnabled ? 'true' : 'false'), h("div", { key: 'f6cea367b5007f767afb25a033215abda734de9d' }, "IsScaling: ", this.store.state?.isScaling ? 'true' : 'false'), h("div", { key: '4386ef749facd2e54da7f58aa2713b87ed76f2df' }, "IsPanning: ", this.store.state?.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: ", this.store.state?.pointerX), h("div", { key: '4f21199328ffadddcc58b7d6b102a89e5079f676' }, "PointerY: ", this.store.state?.pointerY), h("div", { key: 'ac705f38cb323b8dc8cbf95f875657c5dec5c9ae' }, "SelectedObjects: ", this.store.state.selectionGroup?.objects.length || 0)), h("div", { key: '2ca55c53246e64520af6720a3f87d2357295ca7f', id: "origin", class: "origin", style: {
-                transform: `matrix(${this.store.state?.scale}, 0, 0, ${this.store.state?.scale}, ${this.store.state?.translateX}, ${this.store.state?.translateY})`,
-            } }, this.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: {
+        return (h(Host, { key: 'da47553aad7abf8b5daab177c6933a9177b91089' }, h("div", { key: '4e64b43bfb85a61154d36ca8ecd3518d61445d50', class: "debug-panel", style: { display: this.core.store.state.debugInfo.showViewportInfo ? 'block' : 'none' } }, h("div", { key: '21742da9258a2b929b81c0ca6c8f37f41b228ad4' }, "ActiveWorkspaceId: ", this.core.store.state?.activeWorkspace?.id), h("div", { key: 'de31fcf57b0faf8fad2bb39336eeea35dbec35ca' }, "ActiveWorkspaceName: ", this.core.store.state?.activeWorkspace?.name), h("div", { key: 'a2cb298a867f92349b5e1fb556ee5f9c6110f1c7' }, "TranslateX: ", this.core.store.state?.translateX), h("div", { key: '28697bfcecf9f8b4b1972a90cd02855767433047' }, "TranslateY: ", this.core.store.state?.translateY), h("div", { key: '7fb25f6e9c9b8dea11832dbd311d2cc0b981cbeb' }, "ViewportWidth: ", this.core.store.state?.viewportWidth), h("div", { key: '92aeade312b3d28e4c9b0e1c7ca55f6932fd23d9' }, "ViewportHeight: ", this.core.store.state?.viewportHeight), h("div", { key: 'a4fd8090acaf094e44fdc2e72fcc388695b412c4' }, "Scale: ", this.core.store.state?.scale), h("div", { key: '6ff28100b64bafdffcb8fe9d49cd041a6a374817' }, "ActiveTool: ", this.core.store.state?.activeTool?.name), h("div", { key: '12a61ad3d070563eb721d0d4068143962914b2bc' }, "HasViewportChanged: ", this.core.store.state?.hasViewportChanged ? 'true' : 'false'), h("div", { key: '437309daa2af1a64c9b9d3548fe12e075dd4a8bd' }, "IsEnabled: ", this.core.store.state?.isEnabled ? 'true' : 'false'), h("div", { key: 'e6841095c220ebf081604c548729f085ec9d17bd' }, "IsScaling: ", this.core.store.state?.isScaling ? 'true' : 'false'), h("div", { key: 'b07316a528782f7560c2e42f7bd9edd473cc256c' }, "IsPanning: ", this.core.store.state?.isPanning ? 'true' : 'false'), h("div", { key: '7160a5aa21c4cdbf2b523f620c819ad541a2e466' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), h("div", { key: '9ad29a686bc76b47d4c5040121b468428ade437a' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), h("div", { key: '68f240aa7d7188996647afd0df73d63a253e18a1' }, "IsResizeHandleSelected: ", this.core.store.state.isResizeHandleSelected ? 'true' : 'false'), h("div", { key: '260010c089bdf0e8fd8c2406c39394ef79a85262' }, "IsRotationHandleSelected: ", this.core.store.state.isRotationHandleSelected ? 'true' : 'false'), h("div", { key: '6b07975c781801b0a7d7727d0666a6765aa9e889' }, "IsDrawing: ", this.core.store.state.isDrawing ? 'true' : 'false'), h("div", { key: '83c949c9ed26c3d445421ba1f965a742f5fc149f' }, "IsWriting: ", this.core.store.state.isWriting ? 'true' : 'false'), h("div", { key: '1687122785d3370da5d91a975dd56f11aebc81c1' }, "PointerX: ", this.core.store.state?.pointerX), h("div", { key: 'a28e152a0510c9e3eef5624de1b5512baf45b37c' }, "PointerY: ", this.core.store.state?.pointerY), h("div", { key: '09e5a0157002fe95a46415d32a3eb17be8d959a9' }, "SelectedObjects: ", this.core.store.state.selectionGroup?.objects.length || 0)), h("div", { key: '5228fbae773f30d91b129c257ef08adca10a6a70', 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',
@@ -386,69 +370,71 @@ export class KritzelEngine {
                 } })), 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.store.state?.scale})`,
+                    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.store.state?.scale})`,
+                    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.store.state?.scale})`,
+                    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.store.state?.scale})`,
+                    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.store.state?.scale}`, style: {
+                }, 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.store.state?.scale}`, style: {
+                }, 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.store.state?.scale}`, style: {
+                }, 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.store.state?.scale}`, style: {
+                }, 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.store.state?.scale}`, style: {
+                }, 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.store.state?.scale}`, style: {
+                }, 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.store.state?.scale}`, style: {
+                }, 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.store.state?.scale}`, style: {
+                }, 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.store.state?.scale), style: {
+                }, 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.store.state?.scale})`,
-                }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "rotation-handle", cx: object.totalWidth / 2, cy: -((15 * object.scale) / this.store.state?.scale), r: `${(baseHandleSize * object.scale) / this.store.state?.scale}`, style: {
+                    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.store.state?.scale), r: `${(baseHandleTouchSize * object.scale) / this.store.state?.scale}`, style: {
+                }, 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.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: this.store.state.currentPath?.height.toString(),
-                width: this.store.state.currentPath?.width.toString(),
+                }, 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: this.store.state.currentPath?.zIndex.toString(),
+                zIndex: this.core.store.state.currentPath?.zIndex.toString(),
                 position: 'absolute',
-                transform: this.store.state.currentPath?.transformationMatrix,
+                transform: this.core.store.state.currentPath?.transformationMatrix,
                 transformOrigin: 'top left',
                 overflow: 'visible',
-            }, viewBox: this.store.state.currentPath?.viewBox }, h("path", { key: '08310713fa8f2f1f695b1b61bb2b6e5a5f77f192', d: this.store.state.currentPath?.d, fill: this.store.state.currentPath?.fill, stroke: this.store.state.currentPath?.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: this.store.state.selectionGroup?.objects || [], style: {
+            }, viewBox: this.core.store.state.currentPath?.viewBox }, h("path", { key: '6dedb398968d275166e042660c4718635b57da84', 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: '09ae0d7842918bcb4ae9fd16d416badc19942264', 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 => {
                 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,
-                }, this.store.state.selectionGroup?.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();
-            } })), this.store.state?.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: 'e0863ccf8c52ebef822827d8eeac62d3619134ca', core: this.core })));
     }
     static get is() { return "kritzel-engine"; }
     static get encapsulation() { return "shadow"; }
@@ -474,8 +460,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"
                         }
                     }
                 },
@@ -666,8 +652,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"
                         }
                     }
                 }
@@ -745,23 +751,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>",
@@ -1286,7 +1275,7 @@ export class KritzelEngine {
             },
             "createWorkspace": {
                 "complexType": {
-                    "signature": "(workspace: KritzelWorkspace) => Promise<void>",
+                    "signature": "(workspace: KritzelWorkspace) => Promise<KritzelWorkspace | null>",
                     "parameters": [{
                             "name": "workspace",
                             "type": "KritzelWorkspace",
@@ -1299,11 +1288,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": "",
@@ -1325,8 +1314,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>"
@@ -1351,8 +1340,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>"
@@ -1373,8 +1362,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[]>"
@@ -1383,6 +1372,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": []
+                }
             }
         };
     }
@@ -1430,6 +1441,12 @@ export class KritzelEngine {
                 "target": undefined,
                 "capture": false,
                 "passive": false
+            }, {
+                "name": "longpress",
+                "method": "handleLongPress",
+                "target": undefined,
+                "capture": false,
+                "passive": false
             }, {
                 "name": "contextmenu",
                 "method": "handleContextMenu",
@@ -1454,18 +1471,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
             }];
     }
 }