kritzel-stencil 0.0.128 → 0.0.130

package/dist/components/{p-D-zg05gA.js → p-jGaWxggY.js}

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-BqrTPNyu.js';
 import { K as KritzelMouseButton } from './p-D8W6LE-c.js';
-import { d as KritzelBaseObject, e as KritzelBaseCommand, f as KritzelBaseTool, g as KritzelEventHelper, U as UpdateObjectCommand, c as KritzelTextTool, b as KritzelBrushTool, K as KritzelText, a as KritzelPath, A as AddObjectCommand, h as KritzelToolRegistry, i as KritzelKeyboardHelper } from './p-B7VrEdgP.js';
+import { e as KritzelBaseObject, f as KritzelBaseCommand, g as KritzelBaseTool, h as KritzelEventHelper, U as UpdateObjectCommand, c as KritzelTextTool, b as KritzelBrushTool, K as KritzelText, a as KritzelPath, A as AddObjectCommand, i as KritzelToolRegistry, d as KritzelKeyboardHelper } from './p-C9-70hiF.js';
 import { O as ObjectHelper } from './p-Bb6od8He.js';
 import { K as KritzelContextMenu, d as defineCustomElement$3 } from './p-BU2q3PRS.js';
 import { K as KritzelWorkspace } from './p-BeVv4o5c.js';
@@ -131,13 +131,13 @@ class RemoveObjectCommand extends KritzelBaseCommand {
         this.object = object;
     }
     execute() {
-        this._store.state.objectsOctree.remove(object => object.id === this.object.id);
-        this._store.state.objectsOctree.filter(object => object instanceof KritzelCustomElement).forEach(object => object.remount());
+        this._store.state.objectsMap.remove(object => object.id === this.object.id);
+        this._store.state.objectsMap.filter(object => object instanceof KritzelCustomElement).forEach(object => object.remount());
         this._store.deleteObjectFromDatabase(this.object.id);
     }
     undo() {
-        this._store.state.objectsOctree.insert(this.object);
-        this._store.state.objectsOctree.filter(object => object instanceof KritzelCustomElement).forEach(object => object.remount());
+        this._store.state.objectsMap.insert(this.object);
+        this._store.state.objectsMap.filter(object => object instanceof KritzelCustomElement).forEach(object => object.remount());
         this._store.addObjectToDatabase(ObjectHelper.clone(this.object));
     }
 }
@@ -230,12 +230,12 @@ class RemoveSelectionGroupCommand extends KritzelBaseCommand {
         this.previousSelectionGroup = this._store.state.selectionGroup;
     }
     execute() {
-        this._store.state.objectsOctree.remove(object => { var _a; return object.id === ((_a = this.previousSelectionGroup) === null || _a === void 0 ? void 0 : _a.id); });
+        this._store.state.objectsMap.remove(object => { var _a; return object.id === ((_a = this.previousSelectionGroup) === null || _a === void 0 ? void 0 : _a.id); });
         this._store.state.selectionGroup = null;
     }
     undo() {
         if (this.previousSelectionGroup) {
-            this._store.state.objectsOctree.insert(this.previousSelectionGroup);
+            this._store.state.objectsMap.insert(this.previousSelectionGroup);
             this._store.state.selectionGroup = this.previousSelectionGroup;
         }
     }
@@ -554,14 +554,14 @@ class RotateSelectionGroupCommand extends KritzelBaseCommand {
         this._store.state.selectionGroup = this.selectionGroup;
         this._store.state.selectionGroup.rotate(this.rotation);
         this._store.state.selectionGroup.objects.forEach(object => {
-            this._store.state.objectsOctree.update(object);
+            this._store.state.objectsMap.update(object);
         });
     }
     undo() {
         this._store.state.selectionGroup = this.selectionGroup;
         this._store.state.selectionGroup.rotate(this.rotation - this.initialRotation);
         this._store.state.selectionGroup.objects.forEach(object => {
-            this._store.state.objectsOctree.update(object);
+            this._store.state.objectsMap.update(object);
         });
     }
 }
@@ -707,13 +707,13 @@ class AddSelectionGroupCommand extends KritzelBaseCommand {
         this.selectionGroup = selectionGroup;
     }
     execute() {
-        this._store.state.objectsOctree.remove(object => object instanceof KrtizelSelectionBox);
-        this._store.state.objectsOctree.insert(this.selectionGroup);
+        this._store.state.objectsMap.remove(object => object instanceof KrtizelSelectionBox);
+        this._store.state.objectsMap.insert(this.selectionGroup);
         this._store.state.selectionGroup = this.selectionGroup;
         this._store.state.selectionBox = null;
     }
     undo() {
-        this._store.state.objectsOctree.remove(object => object.id === this.selectionGroup.id);
+        this._store.state.objectsMap.remove(object => object.id === this.selectionGroup.id);
         this._store.state.selectionGroup = null;
         this._store.state.selectionBox = null;
     }
@@ -805,7 +805,7 @@ class KritzelSelectionHandler extends KritzelBaseHandler {
     removeSelectionBox() {
         this._store.state.selectionBox = null;
         this._store.state.isSelecting = false;
-        this._store.state.objectsOctree.remove(o => o instanceof KrtizelSelectionBox);
+        this._store.state.objectsMap.remove(o => o instanceof KrtizelSelectionBox);
         this._store.rerender();
     }
     startMouseSelection(event) {
@@ -820,8 +820,8 @@ class KritzelSelectionHandler extends KritzelBaseHandler {
         this._store.state.selectionGroup = null;
         this._store.state.selectionBox = selectionBox;
         this._store.state.isSelecting = true;
-        this._store.state.objectsOctree.remove(o => o instanceof KrtizelSelectionBox || o instanceof KritzelSelectionGroup);
-        this._store.state.objectsOctree.insert(selectionBox);
+        this._store.state.objectsMap.remove(o => o instanceof KrtizelSelectionBox || o instanceof KritzelSelectionGroup);
+        this._store.state.objectsMap.insert(selectionBox);
     }
     startTouchSelection() {
         const activePointers = Array.from(this._store.state.pointers.values());
@@ -842,8 +842,8 @@ class KritzelSelectionHandler extends KritzelBaseHandler {
         this._store.state.selectionGroup = null;
         this._store.state.selectionBox = selectionBox;
         this._store.state.isSelecting = true;
-        this._store.state.objectsOctree.remove(o => o instanceof KrtizelSelectionBox || o instanceof KritzelSelectionGroup);
-        this._store.state.objectsOctree.insert(selectionBox);
+        this._store.state.objectsMap.remove(o => o instanceof KrtizelSelectionBox || o instanceof KritzelSelectionGroup);
+        this._store.state.objectsMap.insert(selectionBox);
     }
     updateMouseSelection(event) {
         let clientX, clientY;
@@ -1180,17 +1180,17 @@ class KritzelSelectionGroup extends KritzelBaseObject {
         });
         this.translateX = x;
         this.translateY = y;
-        this._store.state.objectsOctree.update(this);
+        this._store.state.objectsMap.update(this);
     }
     move(startX, startY, endX, endY) {
         const deltaX = (startX - endX) / this._store.state.scale;
         const deltaY = (startY - endY) / this._store.state.scale;
         this.translateX += deltaX;
         this.translateY += deltaY;
-        this._store.state.objectsOctree.update(this);
+        this._store.state.objectsMap.update(this);
         this.objects.forEach(obj => {
             obj.move(startX, startY, endX, endY);
-            this._store.state.objectsOctree.update(obj);
+            this._store.state.objectsMap.update(obj);
         });
         this.unchangedObjects.forEach(obj => {
             obj.translateX += deltaX;
@@ -1208,7 +1208,7 @@ class KritzelSelectionGroup extends KritzelBaseObject {
             const updatedX = child.translateX + deltaX + (child.translateX - this.translateX) * (widthScaleFactor - 1);
             const updatedY = child.translateY + deltaY + (child.translateY - this.translateY) * (heightScaleFactor - 1);
             child.resize(updatedX, updatedY, updatedWidth, updatedHeight);
-            this._store.state.objectsOctree.update(child);
+            this._store.state.objectsMap.update(child);
         });
         this.refreshObjectDimensions();
         this.unchangedObjects = ObjectHelper.clone(this.objects);
@@ -1229,7 +1229,7 @@ class KritzelSelectionGroup extends KritzelBaseObject {
             child.translateX = centerX + rotatedX - child.totalWidth / 2 / child.scale;
             child.translateY = centerY + rotatedY - child.totalHeight / 2 / child.scale;
             child.rotate(this.objects.length === 1 ? value : value + unchangedChild.rotation);
-            this._store.state.objectsOctree.update(child);
+            this._store.state.objectsMap.update(child);
         });
     }
     copy() {
@@ -1269,7 +1269,7 @@ class KritzelSelectionGroup extends KritzelBaseObject {
             this.width = (this.maxX - this.minX - this.padding) * this.scale;
             this.height = (this.maxY - this.minY - this.padding) * this.scale;
         }
-        this._store.state.objectsOctree.update(this);
+        this._store.state.objectsMap.update(this);
     }
     getOffsetXToCenter(obj) {
         const objCenterX = obj.translateX + obj.totalWidth / obj.scale / 2;
@@ -1683,128 +1683,13 @@ class KritzelHistory {
     }
 }
 
-class KritzelOctree {
-    constructor(bounds, capacity = 8) {
-        this.objects = [];
-        this.children = null;
-        this.bounds = bounds;
-        this.capacity = capacity;
-    }
-    reset() {
-        this.objects = [];
-        this.children = null;
-    }
-    insert(object) {
-        if (!this.intersects(object.rotatedBoundingBox, this.bounds)) {
-            return false;
-        }
-        if (this.objects.length < this.capacity && this.children === null) {
-            this.objects.push(object);
-            return true;
-        }
-        if (this.children === null) {
-            this.subdivide();
-        }
-        for (const child of this.children) {
-            if (child.insert(object)) {
-                return true;
-            }
-        }
-        return false;
-    }
-    update(object) {
-        const index = this.objects.findIndex(o => o.id === object.id);
-        if (index !== -1) {
-            this.objects[index] = object;
-            return true;
-        }
-        if (this.children !== null) {
-            for (const child of this.children) {
-                if (child.update(object)) {
-                    return true;
-                }
-            }
-        }
-        return false;
-    }
-    remove(predicate) {
-        const index = this.objects.findIndex(o => predicate(o));
-        if (index !== -1) {
-            this.objects.splice(index, 1);
-        }
-        if (this.children !== null) {
-            for (const child of this.children) {
-                child.remove(predicate);
-            }
-        }
-    }
-    query(range) {
-        const results = [];
-        if (!this.intersects(range, this.bounds)) {
-            return results;
-        }
-        for (const object of this.objects) {
-            if (this.intersects(object.rotatedBoundingBox, range)) {
-                results.push(object);
-            }
-        }
-        if (this.children !== null) {
-            for (const child of this.children) {
-                results.push(...child.query(range));
-            }
-        }
-        return results;
-    }
-    filter(predicate) {
-        const results = this.objects.filter(o => predicate(o));
-        if (this.children !== null) {
-            for (const child of this.children) {
-                results.push(...child.filter(predicate));
-            }
-        }
-        return results;
-    }
-    allObjects() {
-        const results = [...this.objects];
-        if (this.children !== null) {
-            for (const child of this.children) {
-                results.push(...child.allObjects());
-            }
-        }
-        return results;
-    }
-    subdivide() {
-        const { x, y, z, width, height, depth } = this.bounds;
-        const halfWidth = width / 2;
-        const halfHeight = height / 2;
-        const halfDepth = depth / 2;
-        this.children = [
-            new KritzelOctree({ x, y, z, width: halfWidth, height: halfHeight, depth: halfDepth }, this.capacity),
-            new KritzelOctree({ x: x + halfWidth, y, z, width: halfWidth, height: halfHeight, depth: halfDepth }, this.capacity),
-            new KritzelOctree({ x, y: y + halfHeight, z, width: halfWidth, height: halfHeight, depth: halfDepth }, this.capacity),
-            new KritzelOctree({ x: x + halfWidth, y: y + halfHeight, z, width: halfWidth, height: halfHeight, depth: halfDepth }, this.capacity),
-            new KritzelOctree({ x, y, z: z + halfDepth, width: halfWidth, height: halfHeight, depth: halfDepth }, this.capacity),
-            new KritzelOctree({ x: x + halfWidth, y, z: z + halfDepth, width: halfWidth, height: halfHeight, depth: halfDepth }, this.capacity),
-            new KritzelOctree({ x, y: y + halfHeight, z: z + halfDepth, width: halfWidth, height: halfHeight, depth: halfDepth }, this.capacity),
-            new KritzelOctree({ x: x + halfWidth, y: y + halfHeight, z: z + halfDepth, width: halfWidth, height: halfHeight, depth: halfDepth }, this.capacity),
-        ];
-    }
-    intersects(a, b) {
-        return !(a.x >= b.x + b.width || // a is completely to the right of b
-            a.x + a.width <= b.x || // a is completely to the left of b
-            a.y >= b.y + b.height || // a is completely below b
-            a.y + a.height <= b.y // a is completely above b
-        );
-    }
-}
-
 const DEFAULT_ENGINE_STATE = {
     activeWorkspace: null,
     activeTool: null,
     activeText: null,
     currentPath: null,
     copiedObjects: null,
-    objectsOctree: null,
+    objectsMap: null,
     selectionBox: null,
     selectionGroup: null,
     resizeHandleType: null,
@@ -2086,6 +1971,48 @@ class KritzelDatabase {
     }
 }
 
+class KritzelObjectMap {
+    constructor() {
+        this.map = new Map();
+    }
+    reset() {
+        this.map.clear();
+    }
+    insert(object) {
+        if (!object.id) {
+            return false;
+        }
+        this.map.set(object.id, object);
+        return true;
+    }
+    update(object) {
+        if (!object.id || !this.map.has(object.id)) {
+            return false;
+        }
+        this.map.set(object.id, object);
+        return true;
+    }
+    remove(predicate) {
+        for (const [id, object] of this.map) {
+            if (predicate(object)) {
+                this.map.delete(id);
+            }
+        }
+    }
+    filter(predicate) {
+        const results = [];
+        for (const object of this.map.values()) {
+            if (predicate(object)) {
+                results.push(object);
+            }
+        }
+        return results;
+    }
+    allObjects() {
+        return Array.from(this.map.values());
+    }
+}
+
 class KritzelStore {
     get history() {
         return this._history;
@@ -2097,10 +2024,10 @@ class KritzelStore {
         return this._state;
     }
     get currentZIndex() {
-        return this._state.objectsOctree.filter(o => !(o instanceof KritzelSelectionGroup) && !(o instanceof KrtizelSelectionBox)).length;
+        return this._state.objectsMap.filter(o => !(o instanceof KritzelSelectionGroup) && !(o instanceof KrtizelSelectionBox)).length;
     }
     get allObjects() {
-        return this._state.objectsOctree.allObjects();
+        return this._state.objectsMap.allObjects();
     }
     get selectedObjects() {
         return this.allObjects.filter(o => !(o instanceof KritzelSelectionGroup)).filter(o => o.isSelected);
@@ -2121,14 +2048,7 @@ class KritzelStore {
         this._kritzelEngine = kritzelEngine;
         this._history = new KritzelHistory(this);
         this._database = new KritzelDatabase('kritzelDB', 1, this._state.debugInfo.logDatabase);
-        this._state.objectsOctree = new KritzelOctree({
-            x: -Infinity,
-            y: -Infinity,
-            z: -Infinity,
-            width: Infinity,
-            height: Infinity,
-            depth: Infinity,
-        });
+        this._state.objectsMap = new KritzelObjectMap();
     }
     async initializeDatabase() {
         await this._database.open([
@@ -2160,13 +2080,13 @@ class KritzelStore {
         await this.initializeWorkspaceObjects(this._state.activeWorkspace.id);
     }
     async initializeWorkspaceObjects(workspaceId) {
-        this._state.objectsOctree.reset();
+        this._state.objectsMap.reset();
         this._history.reset();
         const objectsFromDb = await this._database.getAllByRange('objects', IDBKeyRange.bound([workspaceId], [workspaceId, '\uffff']));
         const reviver = new KritzelReviver(this);
         objectsFromDb.forEach(element => {
             const revivedObject = reviver.revive(element);
-            this._state.objectsOctree.insert(revivedObject);
+            this._state.objectsMap.insert(revivedObject);
         });
         this.rerender();
     }
@@ -2257,6 +2177,7 @@ class KritzelStore {
         const objectRange = IDBKeyRange.bound([workspace.id], [workspace.id, '\uffff']);
         await this._database.deleteByRange('objects', objectRange);
         await this._database.delete('workspaces', workspace.id);
+        this.state.workspaces = this.state.workspaces.filter(ws => ws.id !== workspace.id);
     }
     rerender() {
         if (this._kritzelEngine) {
@@ -2382,15 +2303,8 @@ class KritzelStore {
         this.history.executeCommand(new AddSelectionGroupCommand(this, this, selectionGroup));
     }
     selectAllObjectsInViewport() {
-        const objectsInViewport = this._state.objectsOctree
-            .query({
-            x: -this._state.translateX / this._state.scale,
-            y: -this._state.translateY / this._state.scale,
-            z: this._state.scale,
-            width: this._state.viewportWidth / this._state.scale,
-            height: this._state.viewportHeight / this._state.scale,
-            depth: 100,
-        })
+        const objectsInViewport = this._state.objectsMap
+            .filter(o => o.isInViewport())
             .filter(o => !(o instanceof KritzelSelectionGroup) && !(o instanceof KrtizelSelectionBox) && !(o instanceof KritzelContextMenu));
         if (objectsInViewport.length > 0) {
             const selectionGroup = KritzelSelectionGroup.create(this);
@@ -2897,8 +2811,8 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
         });
     }
     async deleteWorkspace(workspace) {
-        return this.store.deleteWorkspace(workspace).then(() => {
-            this.workspacesChange.emit(this.store.state.workspaces.filter(ws => ws.id !== workspace.id));
+        return this.store.deleteWorkspace(workspace).then(async () => {
+            this.workspacesChange.emit(this.store.state.workspaces);
         });
     }
     async getWorkspaces() {
@@ -2927,19 +2841,19 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
         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: '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: {
+        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.objectsOctree.allObjects()) === null || _y === void 0 ? void 0 :
+            } }, (_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: {
@@ -3040,7 +2954,7 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
                         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: '86f9a08bea3ac2d261b14b2eec471fafd20ca11f', class: "object", xmlns: "http://www.w3.org/2000/svg", style: {
+            }), 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(),
                 left: '0',
@@ -3050,7 +2964,7 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
                 transform: (_2 = this.store.state.currentPath) === null || _2 === void 0 ? void 0 : _2.transformationMatrix,
                 transformOrigin: 'top left',
                 overflow: 'visible',
-            }, 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: {
+            }, 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: {
                 position: 'fixed',
                 left: `${this.store.state.contextMenuX}px`,
                 top: `${this.store.state.contextMenuY}px`,
@@ -3062,7 +2976,7 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
                     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();
-            } })), ((_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 })));
+            } })), ((_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 })));
     }
     get host() { return this; }
     static get watchers() { return {
@@ -3143,6 +3057,6 @@ function defineCustomElement() {
 }
 
 export { ABSOLUTE_SCALE_MAX as A, KritzelImage as K, KritzelEraserTool as a, KritzelImageTool as b, KritzelSelectionTool as c, KritzelEngine as d, defineCustomElement as e, ABSOLUTE_SCALE_MIN as f };
-//# sourceMappingURL=p-D-zg05gA.js.map
+//# sourceMappingURL=p-jGaWxggY.js.map
 
-//# sourceMappingURL=p-D-zg05gA.js.map
+//# sourceMappingURL=p-jGaWxggY.js.map