kritzel-stencil 0.0.128 → 0.0.130

package/dist/components/p-jpGLgpoq.js

@@ -0,0 +1,237 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-BqrTPNyu.js';
+import { O as ObjectHelper } from './p-Bb6od8He.js';
+
+const KritzelPortal = /*@__PURE__*/ proxyCustomElement(class KritzelPortal extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.close = createEvent(this, "close");
+        this.autoFocus = true;
+        this.id = `portal-${ObjectHelper.generateUUID()}`;
+        this.defaultOffset = 0;
+        this.minLeft = 0;
+    }
+    anchorChanged(newValue) {
+        if (newValue) {
+            this.openPortal();
+            this.calculatePosition();
+            if (this.autoFocus) {
+                this.focusFirstElement();
+            }
+        }
+        else {
+            this.closePortal();
+        }
+    }
+    handleOutsideClick(event) {
+        event.stopPropagation();
+        const isLastPortal = this.lastAddedPortal === this.portal;
+        if (!isLastPortal)
+            return;
+        const target = event.target;
+        if (!this.host.contains(target)) {
+            this.close.emit();
+            this.closePortal();
+        }
+    }
+    handleKeyDown(event) {
+        event.stopPropagation();
+        const isLastPortal = this.lastAddedPortal === this.portal;
+        if (!isLastPortal)
+            return;
+        if (event.key === 'Escape') {
+            this.anchor.focus();
+            this.close.emit();
+            this.closePortal();
+        }
+        if (event.key === 'Tab') {
+            this.trapFocus(event);
+        }
+        if (event.key === 'Enter') {
+            const activeElement = this.getDeepActiveElement();
+            if (activeElement === null || activeElement === void 0 ? void 0 : activeElement.click) {
+                event.preventDefault();
+                activeElement.click();
+            }
+        }
+    }
+    handleResize() {
+        this.calculatePosition();
+    }
+    focusFirstElement() {
+        requestAnimationFrame(() => {
+            var _a, _b;
+            (_b = (_a = this.firstFocusableElement) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a);
+        });
+    }
+    getDeepActiveElement() {
+        var _a;
+        let activeEl = document.activeElement;
+        while ((_a = activeEl === null || activeEl === void 0 ? void 0 : activeEl.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement) {
+            activeEl = activeEl.shadowRoot.activeElement;
+        }
+        return activeEl;
+    }
+    trapFocus(event) {
+        const focusableElements = this.getFocusableElements(this.host);
+        if (focusableElements.length === 0)
+            return;
+        const firstFocusable = focusableElements[0];
+        const lastFocusable = focusableElements[focusableElements.length - 1];
+        const activeElement = this.getDeepActiveElement();
+        if (event.shiftKey) {
+            /* shift + tab */
+            if (activeElement === firstFocusable) {
+                lastFocusable.focus();
+                event.preventDefault();
+            }
+        }
+        else {
+            /* tab */
+            if (activeElement === lastFocusable) {
+                firstFocusable.focus();
+                event.preventDefault();
+            }
+        }
+    }
+    getFocusableElements(root) {
+        if (!root)
+            return [];
+        const focusableElements = [];
+        const focusableSelector = 'a[href], button:not([disabled]), input:not([disabled]), textarea:not([disabled]), select:not([disabled]), details, [tabindex]:not([tabindex="-1"])';
+        const isVisible = (el) => {
+            return el.offsetParent !== null;
+        };
+        // Check if the root element itself is focusable
+        if (root.matches(focusableSelector) && !root.hasAttribute('disabled') && isVisible(root)) {
+            focusableElements.push(root);
+        }
+        // Function to recursively find focusable elements
+        const findFocusable = (element) => {
+            // Search in shadow root
+            if (element.shadowRoot) {
+                Array.from(element.shadowRoot.querySelectorAll(focusableSelector)).forEach(el => {
+                    if (isVisible(el)) {
+                        focusableElements.push(el);
+                    }
+                });
+                Array.from(element.shadowRoot.children).forEach(findFocusable);
+            }
+            // Search in light DOM
+            Array.from(element.querySelectorAll(focusableSelector)).forEach(el => {
+                if (!focusableElements.includes(el) && isVisible(el)) {
+                    focusableElements.push(el);
+                }
+            });
+            // Handle slotted content
+            if (element.tagName === 'SLOT') {
+                element.assignedElements({ flatten: true }).forEach(el => findFocusable(el));
+            }
+            Array.from(element.children).forEach(findFocusable);
+        };
+        findFocusable(root);
+        // Return unique elements in document order
+        return [...new Set(focusableElements)];
+    }
+    get firstFocusableElement() {
+        var _a, _b;
+        const slotEl = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot');
+        const firstAssigned = slotEl === null || slotEl === void 0 ? void 0 : slotEl.assignedElements({ flatten: true })[0];
+        if (!firstAssigned)
+            return null;
+        const focusable = this.getFocusableElements(firstAssigned);
+        return (_b = focusable[0]) !== null && _b !== void 0 ? _b : firstAssigned;
+    }
+    get lastAddedPortal() {
+        const portals = Array.from(document.querySelectorAll('[id^="portal-"]'));
+        return portals.length ? portals[portals.length - 1] : null;
+    }
+    calculateLeft() {
+        var _a;
+        if (!this.anchor || !this.portal)
+            return 0;
+        const refRect = this.anchor.getBoundingClientRect();
+        const portalRect = this.portal.getBoundingClientRect();
+        const offset = (_a = this.offsetX) !== null && _a !== void 0 ? _a : this.defaultOffset;
+        let left = refRect.left + offset;
+        const maxLeft = window.innerWidth - portalRect.width - this.minLeft;
+        if (left < this.minLeft)
+            left = this.minLeft;
+        if (left > maxLeft)
+            left = maxLeft;
+        return Math.round(left + window.scrollX);
+    }
+    calculateTop() {
+        var _a;
+        if (!this.anchor || !this.portal)
+            return 0;
+        const refRect = this.anchor.getBoundingClientRect();
+        const portalRect = this.portal.getBoundingClientRect();
+        const offset = (_a = this.offsetY) !== null && _a !== void 0 ? _a : this.defaultOffset;
+        let top = refRect.bottom + offset;
+        if (top + portalRect.height > window.innerHeight) {
+            top = refRect.top - portalRect.height - offset;
+        }
+        return Math.round(top + window.scrollY);
+    }
+    openPortal() {
+        this.portal = document.createElement('div');
+        this.portal.setAttribute('id', this.id);
+        this.portal.style.zIndex = '1';
+        this.portal.style.position = 'absolute';
+        this.portal.style.top = '0px';
+        this.portal.style.left = '0px';
+        this.portal.appendChild(this.host);
+        document.body.append(this.portal);
+    }
+    closePortal() {
+        const portal = document.getElementById(this.id);
+        if (!portal)
+            return;
+        document.body.removeChild(portal);
+        this.host.remove();
+    }
+    calculatePosition() {
+        if (!this.anchor || !this.portal)
+            return;
+        const top = this.calculateTop();
+        const left = this.calculateLeft();
+        this.portal.style.top = `${top}px`;
+        this.portal.style.left = `${left}px`;
+    }
+    render() {
+        return (h(Host, { key: '968f0360b9396da16f5b970293ba20f8a1dcc09a', style: { display: this.anchor ? 'block' : 'none' } }, h("slot", { key: '0fe1569bde60a834e9226d7c838d113a64151164' })));
+    }
+    get host() { return this; }
+    static get watchers() { return {
+        "anchor": ["anchorChanged"]
+    }; }
+}, [257, "kritzel-portal", {
+        "anchor": [16],
+        "offsetX": [2, "offset-x"],
+        "offsetY": [2, "offset-y"],
+        "autoFocus": [4, "auto-focus"]
+    }, [[8, "click", "handleOutsideClick"], [8, "keydown", "handleKeyDown"], [11, "resize", "handleResize"]], {
+        "anchor": ["anchorChanged"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["kritzel-portal"];
+    components.forEach(tagName => { switch (tagName) {
+        case "kritzel-portal":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, KritzelPortal);
+            }
+            break;
+    } });
+}
+
+export { KritzelPortal as K, defineCustomElement as d };
+//# sourceMappingURL=p-jpGLgpoq.js.map
+
+//# sourceMappingURL=p-jpGLgpoq.js.map

package/dist/components/p-jpGLgpoq.js.map

@@ -0,0 +1 @@
+{"file":"p-jpGLgpoq.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/shared/kritzel-portal/kritzel-portal.tsx"],"sourcesContent":["import { Component, Host, Listen, Prop, Watch, h, Event, EventEmitter, Element } from '@stencil/core';\r\nimport { ObjectHelper } from '../../../helpers/object.helper';\r\n\r\n@Component({\r\n  tag: 'kritzel-portal',\r\n  shadow: true,\r\n})\r\nexport class KritzelPortal {\r\n  @Element() host: HTMLElement;\r\n\r\n  @Prop() anchor: HTMLElement;\r\n  @Watch('anchor')\r\n  anchorChanged(newValue: HTMLElement) {\r\n    if (newValue) {\r\n      this.openPortal();\r\n      this.calculatePosition();\r\n      if (this.autoFocus) {\r\n        this.focusFirstElement();\r\n      }\r\n    } else {\r\n      this.closePortal();\r\n    }\r\n  }\r\n\r\n  @Prop() offsetX: number;\r\n  @Prop() offsetY: number;\r\n  @Prop() autoFocus: boolean = true;\r\n\r\n  @Event() close: EventEmitter<void>;\r\n\r\n  @Listen('click', { target: 'window' })\r\n  handleOutsideClick(event: MouseEvent) {\r\n    event.stopPropagation();\r\n\r\n    const isLastPortal = this.lastAddedPortal === this.portal;\r\n    if (!isLastPortal) return;\r\n\r\n    const target = event.target as HTMLElement;\r\n    if (!this.host.contains(target)) {\r\n      this.close.emit();\r\n      this.closePortal();\r\n    }\r\n  }\r\n\r\n  @Listen('keydown', { target: 'window' })\r\n  handleKeyDown(event: KeyboardEvent) {\r\n    event.stopPropagation();\r\n\r\n    const isLastPortal = this.lastAddedPortal === this.portal;\r\n    if (!isLastPortal) return;\r\n\r\n    if (event.key === 'Escape') {\r\n      this.anchor.focus();\r\n      this.close.emit();\r\n      this.closePortal();\r\n    }\r\n\r\n    if (event.key === 'Tab') {\r\n      this.trapFocus(event);\r\n    }\r\n\r\n    if (event.key === 'Enter') {\r\n      const activeElement = this.getDeepActiveElement() as HTMLElement;\r\n      if (activeElement?.click) {\r\n        event.preventDefault();\r\n        activeElement.click();\r\n      }\r\n    }\r\n  }\r\n\r\n  @Listen('resize', { target: 'window', capture: true })\r\n  handleResize() {\r\n    this.calculatePosition();\r\n  }\r\n\r\n  private portal: HTMLElement;\r\n  private id: string = `portal-${ObjectHelper.generateUUID()}`;\r\n  private defaultOffset = 0;\r\n  private minLeft = 0;\r\n\r\n  private focusFirstElement() {\r\n    requestAnimationFrame(() => {\r\n      this.firstFocusableElement?.focus?.();\r\n    });\r\n  }\r\n\r\n  private getDeepActiveElement(): Element {\r\n    let activeEl = document.activeElement;\r\n    while (activeEl?.shadowRoot?.activeElement) {\r\n      activeEl = activeEl.shadowRoot.activeElement;\r\n    }\r\n    return activeEl;\r\n  }\r\n\r\n  private trapFocus(event: KeyboardEvent) {\r\n    const focusableElements = this.getFocusableElements(this.host);\r\n    if (focusableElements.length === 0) return;\r\n\r\n    const firstFocusable = focusableElements[0];\r\n    const lastFocusable = focusableElements[focusableElements.length - 1];\r\n    const activeElement = this.getDeepActiveElement();\r\n\r\n    if (event.shiftKey) {\r\n      /* shift + tab */\r\n      if (activeElement === firstFocusable) {\r\n        lastFocusable.focus();\r\n        event.preventDefault();\r\n      }\r\n    } else {\r\n      /* tab */\r\n      if (activeElement === lastFocusable) {\r\n        firstFocusable.focus();\r\n        event.preventDefault();\r\n      }\r\n    }\r\n  }\r\n\r\n  private getFocusableElements(root: HTMLElement): HTMLElement[] {\r\n    if (!root) return [];\r\n\r\n    const focusableElements: HTMLElement[] = [];\r\n    const focusableSelector = 'a[href], button:not([disabled]), input:not([disabled]), textarea:not([disabled]), select:not([disabled]), details, [tabindex]:not([tabindex=\"-1\"])';\r\n\r\n    const isVisible = (el: HTMLElement) => {\r\n      return el.offsetParent !== null;\r\n    };\r\n\r\n    // Check if the root element itself is focusable\r\n    if (root.matches(focusableSelector) && !root.hasAttribute('disabled') && isVisible(root)) {\r\n      focusableElements.push(root);\r\n    }\r\n\r\n    // Function to recursively find focusable elements\r\n    const findFocusable = (element: Element) => {\r\n      // Search in shadow root\r\n      if (element.shadowRoot) {\r\n        Array.from(element.shadowRoot.querySelectorAll<HTMLElement>(focusableSelector)).forEach(el => {\r\n          if (isVisible(el)) {\r\n            focusableElements.push(el);\r\n          }\r\n        });\r\n        Array.from(element.shadowRoot.children).forEach(findFocusable);\r\n      }\r\n\r\n      // Search in light DOM\r\n      Array.from(element.querySelectorAll<HTMLElement>(focusableSelector)).forEach(el => {\r\n        if (!focusableElements.includes(el) && isVisible(el)) {\r\n          focusableElements.push(el);\r\n        }\r\n      });\r\n\r\n      // Handle slotted content\r\n      if (element.tagName === 'SLOT') {\r\n        (element as HTMLSlotElement).assignedElements({ flatten: true }).forEach(el => findFocusable(el));\r\n      }\r\n\r\n      Array.from(element.children).forEach(findFocusable);\r\n    };\r\n\r\n    findFocusable(root);\r\n\r\n    // Return unique elements in document order\r\n    return [...new Set(focusableElements)];\r\n  }\r\n\r\n  private get firstFocusableElement(): HTMLElement | null {\r\n    const slotEl = this.host.shadowRoot?.querySelector('slot') as HTMLSlotElement | null;\r\n    const firstAssigned = slotEl?.assignedElements({ flatten: true })[0] as HTMLElement | undefined;\r\n    if (!firstAssigned) return null;\r\n\r\n    const focusable = this.getFocusableElements(firstAssigned);\r\n    return focusable[0] ?? firstAssigned;\r\n  }\r\n\r\n  private get lastAddedPortal(): HTMLElement | null {\r\n    const portals = Array.from(document.querySelectorAll<HTMLElement>('[id^=\"portal-\"]'));\r\n    return portals.length ? portals[portals.length - 1] : null;\r\n  }\r\n\r\n  private calculateLeft() {\r\n    if (!this.anchor || !this.portal) return 0;\r\n    const refRect = this.anchor.getBoundingClientRect();\r\n    const portalRect = this.portal.getBoundingClientRect();\r\n\r\n    const offset = this.offsetX ?? this.defaultOffset;\r\n    let left = refRect.left + offset;\r\n\r\n    const maxLeft = window.innerWidth - portalRect.width - this.minLeft;\r\n    if (left < this.minLeft) left = this.minLeft;\r\n    if (left > maxLeft) left = maxLeft;\r\n\r\n    return Math.round(left + window.scrollX);\r\n  }\r\n\r\n  private calculateTop() {\r\n    if (!this.anchor || !this.portal) return 0;\r\n    const refRect = this.anchor.getBoundingClientRect();\r\n    const portalRect = this.portal.getBoundingClientRect();\r\n    const offset = this.offsetY ?? this.defaultOffset;\r\n\r\n    let top = refRect.bottom + offset;\r\n\r\n    if (top + portalRect.height > window.innerHeight) {\r\n      top = refRect.top - portalRect.height - offset;\r\n    }\r\n\r\n    return Math.round(top + window.scrollY);\r\n  }\r\n\r\n  private openPortal() {\r\n    this.portal = document.createElement('div');\r\n    this.portal.setAttribute('id', this.id);\r\n    this.portal.style.zIndex = '1';\r\n    this.portal.style.position = 'absolute';\r\n    this.portal.style.top = '0px';\r\n    this.portal.style.left = '0px';\r\n    this.portal.appendChild(this.host);\r\n    document.body.append(this.portal);\r\n  }\r\n\r\n  private closePortal() {\r\n    const portal = document.getElementById(this.id);\r\n    if (!portal) return;\r\n    document.body.removeChild(portal);\r\n    this.host.remove();\r\n  }\r\n\r\n  private calculatePosition() {\r\n    if (!this.anchor || !this.portal) return;\r\n    const top = this.calculateTop();\r\n    const left = this.calculateLeft();\r\n    this.portal.style.top = `${top}px`;\r\n    this.portal.style.left = `${left}px`;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host style={{ display: this.anchor ? 'block' : 'none' }}>\r\n        <slot />\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/esm/{index-J4NpPimy.js → index-DqqxAoZI.js}

@@ -135,11 +135,11 @@ class AddObjectCommand extends KritzelBaseCommand {
         this.object = object;
     }
     execute() {
-        this._store.state.objectsOctree.insert(this.object);
+        this._store.state.objectsMap.insert(this.object);
         this._store.addObjectToDatabase(ObjectHelper.clone(this.object));
     }
     undo() {
-        this._store.state.objectsOctree.remove(object => object.id === this.object.id);
+        this._store.state.objectsMap.remove(object => object.id === this.object.id);
         this._store.deleteObjectFromDatabase(this.object.id);
     }
 }
@@ -237,6 +237,24 @@ class KritzelKeyboardHelper {
             meta.setAttribute('content', newContent);
         }
     }
+    static onKeyboardVisibleChanged(callback) {
+        if ('visualViewport' in window) {
+            const VIEWPORT_VS_CLIENT_HEIGHT_RATIO = 0.75;
+            const onResize = (event) => {
+                const target = event.target;
+                const isOpen = (target.height * target.scale) / window.screen.height < VIEWPORT_VS_CLIENT_HEIGHT_RATIO;
+                callback(isOpen);
+            };
+            window.visualViewport.addEventListener('resize', onResize);
+            return () => window.visualViewport.removeEventListener('resize', onResize);
+        }
+        else {
+            // Fallback for older browsers does not provide a reliable event-based mechanism.
+            console.warn('Listening for keyboard visibility changes is not reliably supported in this browser.');
+            // Return a no-op cleanup function.
+            return () => { };
+        }
+    }
 }
 
 class KritzelTextTool extends KritzelBaseTool {
@@ -598,7 +616,7 @@ class KritzelBaseObject {
     updatePosition(x, y) {
         this.translateX = x;
         this.translateY = y;
-        this._store.state.objectsOctree.update(this);
+        this._store.state.objectsMap.update(this);
     }
 }
 
@@ -912,7 +930,7 @@ class KritzelPath extends KritzelBaseObject {
         this.translateX = x;
         this.translateY = y;
         this._adjustedPoints = null;
-        this._store.state.objectsOctree.update(this);
+        this._store.state.objectsMap.update(this);
     }
     computeAdjustedPoints() {
         var _a;
@@ -1264,13 +1282,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));
     }
 }
@@ -1363,12 +1381,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;
         }
     }
@@ -1687,14 +1705,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);
         });
     }
 }
@@ -1840,13 +1858,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;
     }
@@ -1938,7 +1956,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) {
@@ -1953,8 +1971,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());
@@ -1975,8 +1993,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;
@@ -2313,17 +2331,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;
@@ -2341,7 +2359,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);
@@ -2362,7 +2380,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() {
@@ -2402,7 +2420,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;
@@ -2605,7 +2623,7 @@ const DEFAULT_TEXT_CONFIG = {
     ],
 };
 
-export { AddObjectCommand as A, BatchCommand as B, DEFAULT_BRUSH_CONFIG as D, KritzelBrushTool as K, ObjectHelper as O, RemoveSelectionGroupCommand as R, UpdateObjectCommand as U, KritzelTextTool as a, KritzelMouseButton as b, KritzelSelectionTool as c, KritzelEraserTool as d, DEFAULT_TEXT_CONFIG as e, KritzelImageTool as f, KritzelEventHelper as g, KritzelBaseCommand as h, KritzelSelectionGroup as i, KrtizelSelectionBox as j, KritzelReviver as k, RemoveObjectCommand as l, AddSelectionGroupCommand as m, KritzelToolRegistry as n, KritzelBaseHandler as o, KritzelBaseTool as p, KritzelKeyboardHelper as q, KritzelText as r, KritzelPath as s, KritzelImage as t };
-//# sourceMappingURL=index-J4NpPimy.js.map
+export { AddObjectCommand as A, BatchCommand as B, DEFAULT_BRUSH_CONFIG as D, KritzelBrushTool as K, ObjectHelper as O, RemoveSelectionGroupCommand as R, UpdateObjectCommand as U, KritzelTextTool as a, KritzelMouseButton as b, KritzelSelectionTool as c, KritzelEraserTool as d, DEFAULT_TEXT_CONFIG as e, KritzelImageTool as f, KritzelKeyboardHelper as g, KritzelEventHelper as h, KritzelBaseCommand as i, KritzelSelectionGroup as j, KrtizelSelectionBox as k, KritzelReviver as l, RemoveObjectCommand as m, AddSelectionGroupCommand as n, KritzelToolRegistry as o, KritzelBaseHandler as p, KritzelBaseTool as q, KritzelText as r, KritzelPath as s, KritzelImage as t };
+//# sourceMappingURL=index-DqqxAoZI.js.map
 
-//# sourceMappingURL=index-J4NpPimy.js.map
+//# sourceMappingURL=index-DqqxAoZI.js.map