kritzel-stencil 0.0.127 → 0.0.129

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

@@ -15,6 +15,11 @@ import { KritzelEventHelper } from "../../../helpers/event.helper";
 import { KritzelClassHelper } from "../../../helpers/class.helper";
 import { ABSOLUTE_SCALE_MAX, ABSOLUTE_SCALE_MIN } from "../../../constants/engine.constants";
 export class KritzelEngine {
+    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}.`);
@@ -52,18 +57,23 @@ export class KritzelEngine {
         this.validateScaleMax(this.scaleMax);
         this.validateScaleMin(this.scaleMin);
     }
-    componentDidLoad() {
+    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.isEngineReady.emit(this.store.state);
         }
     }
     handleWheel(ev) {
         var _a, _b;
+        if (this.store.isDisabled) {
+            return;
+        }
         if (this.store.state.isContextMenuVisible) {
             this.hideContextMenu();
         }
@@ -72,11 +82,11 @@ export class KritzelEngine {
     }
     handlePointerDown(ev) {
         var _a, _b;
-        if (KritzelEventHelper.isPointerEventOnContextMenu(ev) === false && this.store.state.isContextMenuVisible) {
-            this.hideContextMenu();
+        if (this.store.isDisabled) {
             return;
         }
-        if (this.store.state.isEnabled === false) {
+        if (KritzelEventHelper.isPointerEventOnContextMenu(ev) === false && this.store.state.isContextMenuVisible) {
+            this.hideContextMenu();
             return;
         }
         KritzelEventHelper.onLongTouchPress(ev, (event) => {
@@ -92,7 +102,7 @@ export class KritzelEngine {
     }
     handlePointerMove(ev) {
         var _a, _b;
-        if (this.store.state.isEnabled === false) {
+        if (this.store.isDisabled) {
             return;
         }
         this.store.state.pointers.set(ev.pointerId, ev);
@@ -101,7 +111,7 @@ export class KritzelEngine {
     }
     handlePointerUp(ev) {
         var _a, _b;
-        if (this.store.state.isEnabled === false) {
+        if (this.store.isDisabled) {
             return;
         }
         this.store.state.pointers.delete(ev.pointerId);
@@ -111,7 +121,7 @@ export class KritzelEngine {
     }
     handlePointerCancel(ev) {
         var _a, _b;
-        if (this.store.state.isEnabled === false) {
+        if (this.store.isDisabled) {
             return;
         }
         this.host.releasePointerCapture(ev.pointerId);
@@ -121,7 +131,7 @@ export class KritzelEngine {
     }
     handleContextMenu(ev) {
         ev.preventDefault();
-        if (this.store.state.isEnabled === false) {
+        if (this.store.isDisabled) {
             return;
         }
         if (ev.pointerType === 'touch') {
@@ -139,6 +149,9 @@ export class KritzelEngine {
         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();
@@ -146,6 +159,9 @@ export class KritzelEngine {
         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`);
@@ -267,6 +283,24 @@ export class KritzelEngine {
         var _a;
         return ((_a = this.store.state.copiedObjects) === null || _a === void 0 ? void 0 : _a.objects) || [];
     }
+    async createWorkspace(workspace) {
+        return this.store.createWorkspace(workspace).then(() => {
+            this.workspacesChange.emit(this.store.state.workspaces);
+        });
+    }
+    async updateWorkspace(workspace) {
+        return this.store.updateWorkspace(workspace).then(() => {
+            this.workspacesChange.emit(this.store.state.workspaces);
+        });
+    }
+    async deleteWorkspace(workspace) {
+        return this.store.deleteWorkspace(workspace).then(() => {
+            this.workspacesChange.emit(this.store.state.workspaces.filter(ws => ws.id !== workspace.id));
+        });
+    }
+    async getWorkspaces() {
+        return this.store.getWorkspaces();
+    }
     _registerStateChangeListeners() {
         this.store.onStateChange('activeTool', this._handleActiveToolChange.bind(this));
         this.store.onStateChange('isFocused', this._handleIsFocusedChange.bind(this));
@@ -285,25 +319,27 @@ export class KritzelEngine {
         }
     }
     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;
+        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: '9662d9be6c5537340fe8416a5f74f3dec995fc91' }, h("div", { key: '4f42e6cf0ee0b77c672e7485a53ffed7a75961fa', class: "debug-panel", style: { display: this.store.state.debugInfo.showViewportInfo ? 'block' : 'none' } }, h("div", { key: '75bb2ea8e945c4d65d86a90f4f6da95ccd4425d1' }, "TranslateX: ", (_a = this.store.state) === null || _a === void 0 ? void 0 :
-            _a.translateX), h("div", { key: '69558794d6b88fece7c8af2be3cf5930174b8fd6' }, "TranslateY: ", (_b = this.store.state) === null || _b === void 0 ? void 0 :
-            _b.translateY), h("div", { key: 'd2e933f23eef9ee56137906f56c5cbadbaadaf23' }, "ViewportWidth: ", (_c = this.store.state) === null || _c === void 0 ? void 0 :
-            _c.viewportWidth), h("div", { key: 'c085fee84706c0be930d1e659dedb8a2728130dd' }, "ViewportHeight: ", (_d = this.store.state) === null || _d === void 0 ? void 0 :
-            _d.viewportHeight), h("div", { key: 'eeef8323ae0bc5047f038f4794aee4ed718d1183' }, "ObjectsInViewport. ", this.store.objects.length), h("div", { key: '20172772854ab20ee9dd9b4bf9b969627c649e61' }, "Scale: ", (_e = this.store.state) === null || _e === void 0 ? void 0 :
-            _e.scale), h("div", { key: '256646b05f63bc6949578acb1739f57a581c86e4' }, "ActiveTool: ", (_g = (_f = this.store.state) === null || _f === void 0 ? void 0 : _f.activeTool) === null || _g === void 0 ? void 0 :
-            _g.name), h("div", { key: 'd9e17c3c89a135fcbaf1cdfaa8f8123186c74626' }, "HasViewportChanged: ", ((_h = this.store.state) === null || _h === void 0 ? void 0 : _h.hasViewportChanged) ? 'true' : 'false'), h("div", { key: '7750bc5b2763e6351eb37f51b54bca965f7e0823' }, "IsEnabled: ", ((_j = this.store.state) === null || _j === void 0 ? void 0 : _j.isEnabled) ? 'true' : 'false'), h("div", { key: '59ca295c0ab33fe6d82ccd1072fe64672c9f21b7' }, "IsScaling: ", ((_k = this.store.state) === null || _k === void 0 ? void 0 : _k.isScaling) ? 'true' : 'false'), h("div", { key: 'b413ddf6bbc8e7e758abd811f3e66a71a4961a04' }, "IsPanning: ", ((_l = this.store.state) === null || _l === void 0 ? void 0 : _l.isPanning) ? 'true' : 'false'), h("div", { key: 'c941fe71c6d3a124bcb02ff6d1efa33d943646aa' }, "IsFocused: ", this.store.state.isFocused ? 'true' : 'false'), h("div", { key: 'f060e324991d0885770cfbedf8332047a3ede890' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), h("div", { key: 'ec3f85f2cc61bb55210cfa952ce8b1af66c4caf4' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), h("div", { key: '0376abe30d6456038a98383a82eff2ec955fd69a' }, "IsResizeHandleSelected: ", this.store.state.isResizeHandleSelected ? 'true' : 'false'), h("div", { key: '546d868377d654400e9013f8df54389e08a2c02d' }, "IsRotationHandleSelected: ", this.store.state.isRotationHandleSelected ? 'true' : 'false'), h("div", { key: 'b233911cad585a5318dd0a83258d477dd3e286f7' }, "IsDrawing: ", this.store.state.isDrawing ? 'true' : 'false'), h("div", { key: '4fd9f89a72c49bb681695030245d4622ffe281b5' }, "IsWriting: ", this.store.state.isWriting ? 'true' : 'false'), h("div", { key: 'e7c3b3485b945fff20dd0c6601727b52478a283b' }, "PointerX: ", (_m = this.store.state) === null || _m === void 0 ? void 0 :
-            _m.pointerX), h("div", { key: '0e940ac9609f23f1e4855206dda52c52eec14fe5' }, "PointerY: ", (_o = this.store.state) === null || _o === void 0 ? void 0 :
-            _o.pointerY), h("div", { key: '60475be8341d3a8e28416d91a38d188bce30d15b' }, "SelectedObjects: ", ((_p = this.store.state.selectionGroup) === null || _p === void 0 ? void 0 : _p.objects.length) || 0)), h("div", { key: '16608718942fd141d17a5d398045e178fa37eacf', id: "origin", class: "origin", style: {
-                transform: `matrix(${(_q = this.store.state) === null || _q === void 0 ? void 0 : _q.scale}, 0, 0, ${(_r = this.store.state) === null || _r === void 0 ? void 0 : _r.scale}, ${(_s = this.store.state) === null || _s === void 0 ? void 0 : _s.translateX}, ${(_t = this.store.state) === null || _t === void 0 ? void 0 : _t.translateY})`,
-            } }, (_u = this.store.objects) === null || _u === void 0 ? void 0 :
-            _u.map(object => {
+        return (h(Host, { key: 'c7e747aa6106e7904cf9f44db37fa285a6fb4434' }, h("div", { key: 'b75652ab9f9531dce765cbe448ad3131c172d06a', class: "debug-panel", style: { display: this.store.state.debugInfo.showViewportInfo ? 'block' : 'none' } }, h("div", { key: 'fd1355bd640b9296949f6bbcf084589578654db6' }, "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: '8520e3e774e97ebc42ee86401fbfbafbe41c88e8' }, "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: 'f247b4d76cd018e787a9b59829deedeb6c5c5272' }, "TranslateX: ", (_e = this.store.state) === null || _e === void 0 ? void 0 :
+            _e.translateX), h("div", { key: 'e0438479bc9e950ef2cbe88ed0aa0b8ec1888890' }, "TranslateY: ", (_f = this.store.state) === null || _f === void 0 ? void 0 :
+            _f.translateY), h("div", { key: '1735fde66588e285039bcc090dee71630608d666' }, "ViewportWidth: ", (_g = this.store.state) === null || _g === void 0 ? void 0 :
+            _g.viewportWidth), h("div", { key: '15f8b3305c27a395b8aa6463c5acec42bb3e3ddd' }, "ViewportHeight: ", (_h = this.store.state) === null || _h === void 0 ? void 0 :
+            _h.viewportHeight), h("div", { key: 'd2e39bae191c7256967d0140f38e75dccf95f24c' }, "ObjectsInViewport. ", this.store.objects.length), h("div", { key: 'cd3f53ff4a8f119a2ef975133f69fc3798fe0f71' }, "Scale: ", (_j = this.store.state) === null || _j === void 0 ? void 0 :
+            _j.scale), h("div", { key: 'b1f8c77589a80fe49d0947602bda46438921f7a8' }, "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: '41cd94f58f71cd5c1cffc679ada5fc51f6ceeea7' }, "HasViewportChanged: ", ((_m = this.store.state) === null || _m === void 0 ? void 0 : _m.hasViewportChanged) ? 'true' : 'false'), h("div", { key: 'bf8495bb924673aad3a9ca57ed0bf9ac23874dfb' }, "IsEnabled: ", ((_o = this.store.state) === null || _o === void 0 ? void 0 : _o.isEnabled) ? 'true' : 'false'), h("div", { key: '3823936f5b46b100742f94fac8d7e87ed93ddb58' }, "IsScaling: ", ((_p = this.store.state) === null || _p === void 0 ? void 0 : _p.isScaling) ? 'true' : 'false'), h("div", { key: '62eb836fff78b050cdab8cbef54f88f9d5b644ba' }, "IsPanning: ", ((_q = this.store.state) === null || _q === void 0 ? void 0 : _q.isPanning) ? 'true' : 'false'), h("div", { key: 'dac6b8d18ae8f6317bdd318ad48a9612f9942613' }, "IsFocused: ", this.store.state.isFocused ? 'true' : 'false'), h("div", { key: 'af232e2cd738e255029f5611531c246ac63a28ce' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), h("div", { key: '95a44fef4b6befe95bfadfc62957103b48bf76b6' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), h("div", { key: 'e8162d4de449a0d6756c2f540fca28353c193438' }, "IsResizeHandleSelected: ", this.store.state.isResizeHandleSelected ? 'true' : 'false'), h("div", { key: '4440d023cd4982c834736e06863698c3baf72353' }, "IsRotationHandleSelected: ", this.store.state.isRotationHandleSelected ? 'true' : 'false'), h("div", { key: 'd3e467dd18e53850df4d5bedf2b69f54b1fbe5c6' }, "IsDrawing: ", this.store.state.isDrawing ? 'true' : 'false'), h("div", { key: 'df6e4bca16cbe4346786a544d6f6c53d87bdb699' }, "IsWriting: ", this.store.state.isWriting ? 'true' : 'false'), h("div", { key: '532aebf1ff35cc578f12e36cdaf00713ffc76b97' }, "PointerX: ", (_r = this.store.state) === null || _r === void 0 ? void 0 :
+            _r.pointerX), h("div", { key: 'f710f8c8d27979da4a40e50452e2cdd63cdefa98' }, "PointerY: ", (_s = this.store.state) === null || _s === void 0 ? void 0 :
+            _s.pointerY), h("div", { key: '0175010e1d5a22be81ca0b2d88dd1aff217eacfd' }, "SelectedObjects: ", ((_t = this.store.state.selectionGroup) === null || _t === void 0 ? void 0 : _t.objects.length) || 0)), h("div", { key: 'dc2964c479405ed147bd5f090e24262595a474e2', 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.objectsOctree.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", { style: { 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", key: object.id, id: object.id, class: "object", style: {
+                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',
@@ -322,17 +358,17 @@ export class KritzelEngine {
                         borderStyle: 'solid',
                         padding: object.padding + 'px',
                         overflow: 'visible',
-                    } }, KritzelClassHelper.isInstanceOf(object, 'KritzelPath') && (h("svg", { ref: el => el ? object.mount(el) : object.unmount(), xmlns: "http://www.w3.org/2000/svg", style: {
+                    } }, KritzelClassHelper.isInstanceOf(object, 'KritzelPath') && (h("svg", { ref: el => (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: {
+                    }, 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: {
+                    }, 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,
@@ -348,16 +384,16 @@ export class KritzelEngine {
                         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: {
+                    } })), 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: {
+                    } })), 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: {
+                    } })), 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: {
@@ -401,17 +437,17 @@ export class KritzelEngine {
                         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: 'd945e3fae758a66d8d17875203561602446acf9a', class: "object", xmlns: "http://www.w3.org/2000/svg", style: {
-                height: (_v = this.store.state.currentPath) === null || _v === void 0 ? void 0 : _v.height.toString(),
-                width: (_w = this.store.state.currentPath) === null || _w === void 0 ? void 0 : _w.width.toString(),
+            }), h("svg", { key: '86f9a08bea3ac2d261b14b2eec471fafd20ca11f', 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(),
                 left: '0',
                 top: '0',
-                zIndex: (_x = this.store.state.currentPath) === null || _x === void 0 ? void 0 : _x.zIndex.toString(),
+                zIndex: (_1 = this.store.state.currentPath) === null || _1 === void 0 ? void 0 : _1.zIndex.toString(),
                 position: 'absolute',
-                transform: (_y = this.store.state.currentPath) === null || _y === void 0 ? void 0 : _y.transformationMatrix,
+                transform: (_2 = this.store.state.currentPath) === null || _2 === void 0 ? void 0 : _2.transformationMatrix,
                 transformOrigin: 'top left',
                 overflow: 'visible',
-            }, viewBox: (_z = this.store.state.currentPath) === null || _z === void 0 ? void 0 : _z.viewBox }, h("path", { key: '111070848aa210dabf4150a9e69326c7a32a2bb7', d: (_0 = this.store.state.currentPath) === null || _0 === void 0 ? void 0 : _0.d, fill: (_1 = this.store.state.currentPath) === null || _1 === void 0 ? void 0 : _1.fill, stroke: (_2 = this.store.state.currentPath) === null || _2 === void 0 ? void 0 : _2.stroke }))), this.store.state.isContextMenuVisible && (h("kritzel-context-menu", { key: '13f61253ab96655d6816bfba60b7c1c8e0697533', class: "context-menu", ref: el => (this.contextMenuElement = el), items: this.store.state.contextMenuItems, objects: ((_3 = this.store.state.selectionGroup) === null || _3 === void 0 ? void 0 : _3.objects) || [], style: {
+            }, viewBox: (_3 = this.store.state.currentPath) === null || _3 === void 0 ? void 0 : _3.viewBox }, h("path", { key: '66ebcf1791c993d62b34a2e4da1d4279428a17dd', 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: 'af91784e3afc84b71d5186237d287c31d472d80a', 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: {
                 position: 'fixed',
                 left: `${this.store.state.contextMenuX}px`,
                 top: `${this.store.state.contextMenuY}px`,
@@ -423,7 +459,7 @@ export class KritzelEngine {
                     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);
                 this.hideContextMenu();
-            } })), ((_4 = this.store.state) === null || _4 === void 0 ? void 0 : _4.activeTool) instanceof KritzelEraserTool && !this.store.state.isScaling && h("kritzel-cursor-trail", { key: 'bcbedb0fd45a7b87e82e78326bfdc0d1a872c1aa', store: this.store })));
+            } })), ((_8 = this.store.state) === null || _8 === void 0 ? void 0 : _8.activeTool) instanceof KritzelEraserTool && !this.store.state.isScaling && h("kritzel-cursor-trail", { key: '573a4422b742044df5f240b260bc66e83d004520', store: this.store })));
     }
     static get is() { return "kritzel-engine"; }
     static get encapsulation() { return "shadow"; }
@@ -439,6 +475,30 @@ export class KritzelEngine {
     }
     static get properties() {
         return {
+            "workspace": {
+                "type": "unknown",
+                "attribute": "workspace",
+                "mutable": false,
+                "complexType": {
+                    "original": "KritzelWorkspace",
+                    "resolved": "KritzelWorkspace",
+                    "references": {
+                        "KritzelWorkspace": {
+                            "location": "import",
+                            "path": "../../../classes/workspace.class",
+                            "id": "src/classes/workspace.class.ts::KritzelWorkspace"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
             "activeTool": {
                 "type": "unknown",
                 "attribute": "active-tool",
@@ -570,9 +630,15 @@ export class KritzelEngine {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "void",
-                    "resolved": "void",
-                    "references": {}
+                    "original": "KritzelEngineState",
+                    "resolved": "KritzelEngineState",
+                    "references": {
+                        "KritzelEngineState": {
+                            "location": "import",
+                            "path": "../../../interfaces/engine-state.interface",
+                            "id": "src/interfaces/engine-state.interface.ts::KritzelEngineState"
+                        }
+                    }
                 }
             }, {
                 "method": "activeToolChange",
@@ -595,6 +661,27 @@ export class KritzelEngine {
                         }
                     }
                 }
+            }, {
+                "method": "workspacesChange",
+                "name": "workspacesChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "KritzelWorkspace[]",
+                    "resolved": "KritzelWorkspace[]",
+                    "references": {
+                        "KritzelWorkspace": {
+                            "location": "import",
+                            "path": "../../../classes/workspace.class",
+                            "id": "src/classes/workspace.class.ts::KritzelWorkspace"
+                        }
+                    }
+                }
             }];
     }
     static get methods() {
@@ -1207,12 +1294,115 @@ export class KritzelEngine {
                     "text": "",
                     "tags": []
                 }
+            },
+            "createWorkspace": {
+                "complexType": {
+                    "signature": "(workspace: KritzelWorkspace) => Promise<void>",
+                    "parameters": [{
+                            "name": "workspace",
+                            "type": "KritzelWorkspace",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "KritzelWorkspace": {
+                            "location": "import",
+                            "path": "../../../classes/workspace.class",
+                            "id": "src/classes/workspace.class.ts::KritzelWorkspace"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "updateWorkspace": {
+                "complexType": {
+                    "signature": "(workspace: KritzelWorkspace) => Promise<void>",
+                    "parameters": [{
+                            "name": "workspace",
+                            "type": "KritzelWorkspace",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "KritzelWorkspace": {
+                            "location": "import",
+                            "path": "../../../classes/workspace.class",
+                            "id": "src/classes/workspace.class.ts::KritzelWorkspace"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "deleteWorkspace": {
+                "complexType": {
+                    "signature": "(workspace: KritzelWorkspace) => Promise<void>",
+                    "parameters": [{
+                            "name": "workspace",
+                            "type": "KritzelWorkspace",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "KritzelWorkspace": {
+                            "location": "import",
+                            "path": "../../../classes/workspace.class",
+                            "id": "src/classes/workspace.class.ts::KritzelWorkspace"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "getWorkspaces": {
+                "complexType": {
+                    "signature": "() => Promise<KritzelWorkspace[]>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "KritzelWorkspace": {
+                            "location": "import",
+                            "path": "../../../classes/workspace.class",
+                            "id": "src/classes/workspace.class.ts::KritzelWorkspace"
+                        }
+                    },
+                    "return": "Promise<KritzelWorkspace[]>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
             }
         };
     }
     static get elementRef() { return "host"; }
     static get watchers() {
         return [{
+                "propName": "workspace",
+                "methodName": "onWorkspaceChange"
+            }, {
                 "propName": "scaleMax",
                 "methodName": "validateScaleMax"
             }, {
@@ -1281,6 +1471,12 @@ export class KritzelEngine {
                 "target": "window",
                 "capture": false,
                 "passive": true
+            }, {
+                "name": "click",
+                "method": "handleClick",
+                "target": undefined,
+                "capture": false,
+                "passive": false
             }];
     }
 }