kritzel-stencil 0.3.1 → 0.3.7

package/dist/collection/classes/registries/tool.registry.js

@@ -1,25 +1,46 @@
 /**
- * A static registry for managing drawing tools in the Kritzel library.
+ * A per-engine registry for managing drawing tools in the Kritzel library.
+ * Each `KritzelCore` owns its own `KritzelToolRegistry` instance so that
+ * multiple editors on the same page do not share tool instances or configs.
+ *
  * Tools are instantiated and stored by name, allowing retrieval by name or index.
  */
 export class KritzelToolRegistry {
+    core;
     /** Internal storage for registered tools, mapping tool names to their instances. */
-    static registry = {};
+    registry = {};
     /**
-     * Registers a new tool by instantiating it with the provided constructor and core instance.
+     * Creates a new tool registry bound to a specific `KritzelCore` instance.
+     * The bound core is used as the constructor argument when registering new tools.
+     *
+     * @param core - The `KritzelCore` instance this registry is bound to.
+     */
+    constructor(core) {
+        this.core = core;
+    }
+    /**
+     * Registers a new tool by instantiating it with the registry's bound core.
      * The tool is stored in the registry under the specified name.
      *
      * @param toolName - The unique identifier for the tool.
      * @param constructor - The tool class constructor that extends `KritzelBaseTool`.
-     * @param core - The `KritzelCore` instance to pass to the tool constructor.
      * @returns The newly created and registered tool instance.
      */
-    static registerTool(toolName, constructor, core) {
-        const toolInstance = new constructor(core);
+    registerTool(toolName, constructor) {
+        const toolInstance = new constructor(this.core);
         toolInstance.name = toolName;
         this.registry[toolName] = toolInstance;
         return toolInstance;
     }
+    /**
+     * Checks if a tool with the given name is registered.
+     *
+     * @param toolName - The unique identifier of the tool to check.
+     * @returns `true` if the tool is registered, `false` otherwise.
+     */
+    hasTool(toolName) {
+        return toolName in this.registry;
+    }
     /**
      * Retrieves a registered tool by its name.
      * Logs a warning if the tool is not found.
@@ -27,7 +48,7 @@ export class KritzelToolRegistry {
      * @param toolName - The unique identifier of the tool to retrieve.
      * @returns The tool instance if found, or `null` if not registered.
      */
-    static getTool(toolName) {
+    getTool(toolName) {
         const toolInstance = this.registry[toolName];
         if (!toolInstance) {
             console.warn(`Unknown tool: ${toolName}`);
@@ -42,7 +63,7 @@ export class KritzelToolRegistry {
      * @param index - The zero-based index of the tool in the registry.
      * @returns The tool instance at the specified index, or `null` if the index is out of bounds.
      */
-    static getToolByIndex(index) {
+    getToolByIndex(index) {
         return Object.values(this.registry)[index] ?? null;
     }
 }

package/dist/collection/classes/tools/image-tool.class.js

@@ -1,7 +1,6 @@
 import { KritzelImage } from "../objects/image.class";
 import { KritzelBaseTool } from "./base-tool.class";
 import imageCompression from "browser-image-compression";
-import { KritzelToolRegistry } from "../registries/tool.registry";
 /**
  * Image tool for importing and placing images on the canvas.
  *
@@ -179,7 +178,7 @@ export class KritzelImageTool extends KritzelBaseTool {
             }
             this._core.addObject(image);
         });
-        this._core.store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
+        this._core.store.setState('activeTool', this._core.toolRegistry.getTool('selection'));
         this._core.selectObjects(images);
         this._core.engine.emitObjectsChange();
         this._core.engine.emitObjectsAdded(images);
@@ -189,6 +188,6 @@ export class KritzelImageTool extends KritzelBaseTool {
      * Switches back to the selection tool without adding any image.
      */
     handleCancel() {
-        this._core.store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
+        this._core.store.setState('activeTool', this._core.toolRegistry.getTool('selection'));
     }
 }

package/dist/collection/classes/tools/line-tool.class.js

@@ -1,7 +1,6 @@
 import { KritzelEventHelper } from "../../helpers/event.helper";
 import { KritzelLine } from "../objects/line.class";
 import { KritzelBaseTool } from "./base-tool.class";
-import { KritzelToolRegistry } from "../registries/tool.registry";
 import { KritzelSelectionGroup } from "../objects/selection-group.class";
 import { DEFAULT_COLOR_PALETTE } from "../../constants/color-palette.constants";
 /**
@@ -239,7 +238,7 @@ export class KritzelLineTool extends KritzelBaseTool {
         // Add the selection group
         this._core.addSelectionGroup(selectionGroup);
         // Switch to selection tool
-        this._core.store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
+        this._core.store.setState('activeTool', this._core.toolRegistry.getTool('selection'));
         // Rerender
         this._core.rerender();
     }

package/dist/collection/classes/tools/shape-tool.class.js

@@ -1,7 +1,6 @@
 import { KritzelShape } from "../objects/shape.class";
 import { KritzelBaseTool } from "./base-tool.class";
 import { KritzelEventHelper } from "../../helpers/event.helper";
-import { KritzelToolRegistry } from "../registries/tool.registry";
 import { ShapeType } from "../../enums/shape-type.enum";
 import { DEFAULT_COLOR_PALETTE } from "../../constants/color-palette.constants";
 /**
@@ -70,7 +69,7 @@ export class KritzelShapeTool extends KritzelBaseTool {
             }
             if (activeShape !== null && object instanceof KritzelShape === false) {
                 this._core.resetActiveShape();
-                this._core.store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
+                this._core.store.setState('activeTool', this._core.toolRegistry.getTool('selection'));
                 return;
             }
             if (KritzelEventHelper.isLeftClick(event) === false) {
@@ -95,7 +94,7 @@ export class KritzelShapeTool extends KritzelBaseTool {
             }
             if (activeShape !== null && object instanceof KritzelShape === false) {
                 this._core.resetActiveShape();
-                this._core.store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
+                this._core.store.setState('activeTool', this._core.toolRegistry.getTool('selection'));
                 return;
             }
             if (activePointers.length > 1) {
@@ -237,7 +236,7 @@ export class KritzelShapeTool extends KritzelBaseTool {
             this._core.engine.emitObjectsChange();
             this._core.engine.emitObjectsAdded([this.currentShape]);
             this._core.selectObjects([this.currentShape]);
-            this._core.store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
+            this._core.store.setState('activeTool', this._core.toolRegistry.getTool('selection'));
         }
         this.isDrawing = false;
         this._core.store.objects?.setActiveDrawingObject(null);

package/dist/collection/classes/tools/text-tool.class.js

@@ -1,7 +1,6 @@
 import { KritzelText } from "../objects/text.class";
 import { KritzelBaseTool } from "./base-tool.class";
 import { KritzelEventHelper } from "../../helpers/event.helper";
-import { KritzelToolRegistry } from "../registries/tool.registry";
 import { DEFAULT_COLOR_PALETTE } from "../../constants/color-palette.constants";
 /**
  * Text tool for creating and editing text objects on the canvas.
@@ -99,7 +98,7 @@ export class KritzelTextTool extends KritzelBaseTool {
             }
             if (activeText !== null && object instanceof KritzelText === false) {
                 this._core.resetActiveText();
-                this._core.store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
+                this._core.store.setState('activeTool', this._core.toolRegistry.getTool('selection'));
                 return;
             }
             if (KritzelEventHelper.isLeftClick(event) === false) {
@@ -136,7 +135,7 @@ export class KritzelTextTool extends KritzelBaseTool {
             }
             if (activeText !== null && object instanceof KritzelText === false) {
                 this._core.resetActiveText();
-                this._core.store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
+                this._core.store.setState('activeTool', this._core.toolRegistry.getTool('selection'));
                 return;
             }
             if (activePointers.length > 1) {

package/dist/collection/components/core/kritzel-editor/kritzel-editor.css

@@ -41,7 +41,6 @@ kritzel-controls.keyboard-open {
   display: flex;
   align-items: flex-start;
   gap: 8px;
-  z-index: 10000;
 }
 
 .top-right-buttons {
@@ -51,7 +50,6 @@ kritzel-controls.keyboard-open {
   display: flex;
   align-items: center;
   gap: 8px;
-  z-index: 10000;
 }
 
 .top-right-button {

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

@@ -5,11 +5,9 @@ import { KritzelTextTool } from "../../../classes/tools/text-tool.class";
 import { KritzelShapeTool } from "../../../classes/tools/shape-tool.class";
 import { KritzelSelectionBox } from "../../../classes/objects/selection-box.class";
 import { KritzelKeyHandler } from "../../../classes/handlers/key.handler";
-import { KritzelBaseTool } from "../../../classes/tools/base-tool.class";
 import { KritzelEraserTool } from "../../../classes/tools/eraser-tool.class";
 import { KritzelKeyboardHelper } from "../../../helpers/keyboard.helper";
 import { KritzelContextMenuHandler } from "../../../classes/handlers/context-menu.handler";
-import { KritzelToolRegistry } from "../../../classes/registries/tool.registry";
 import { KritzelEventHelper } from "../../../helpers/event.helper";
 import { KritzelClassHelper } from "../../../helpers/class.helper";
 import { ABSOLUTE_SCALE_MAX, ABSOLUTE_SCALE_MIN } from "../../../constants/engine.constants";
@@ -362,11 +360,22 @@ export class KritzelEngine {
      * @returns The registered tool instance, or `null` if registration failed.
      */
     async registerTool(toolName, toolClass, toolConfig) {
-        if (typeof toolClass !== 'function' || !(toolClass.prototype instanceof KritzelBaseTool)) {
+        if (typeof toolClass !== 'function') {
             console.error(`Failed to register tool "${toolName}": Tool class must be a constructor function`);
             return null;
         }
-        const registeredTool = KritzelToolRegistry.registerTool(toolName, toolClass, this.core);
+        // If a tool with this name is already registered, return the existing instance
+        // This avoids dual-package issues when tool classes are passed from external bundles
+        if (this.core.toolRegistry.hasTool(toolName)) {
+            const existingTool = this.core.toolRegistry.getTool(toolName);
+            if (toolConfig) {
+                Object.entries(toolConfig).forEach(([key, value]) => {
+                    existingTool[key] = value;
+                });
+            }
+            return existingTool;
+        }
+        const registeredTool = this.core.toolRegistry.registerTool(toolName, toolClass);
         if (toolConfig) {
             Object.entries(toolConfig).forEach(([key, value]) => {
                 registeredTool[key] = value;
@@ -644,7 +653,7 @@ export class KritzelEngine {
      * @param objects - The objects to select.
      */
     async selectObjects(objects) {
-        const selectionTool = KritzelToolRegistry.getTool('selection');
+        const selectionTool = this.core.toolRegistry.getTool('selection');
         if (!selectionTool) {
             return;
         }
@@ -655,7 +664,7 @@ export class KritzelEngine {
     }
     /** Selects all objects currently visible in the viewport. Switches to the selection tool automatically. */
     async selectAllObjectsInViewport() {
-        const selectionTool = KritzelToolRegistry.getTool('selection');
+        const selectionTool = this.core.toolRegistry.getTool('selection');
         if (!selectionTool) {
             return;
         }
@@ -1999,7 +2008,7 @@ export class KritzelEngine {
                     strokeWidth: data.indicatorStrokeWidth,
                 } }))));
         })()), this.core.store.state.isContextMenuVisible && (h("kritzel-context-menu", { class: "context-menu", ref: el => (this.contextMenuElement = el ?? null), items: this.core.store.state.contextMenuItems, objects: this.core.store.selectionGroup?.objects || [], style: {
-                position: 'fixed',
+                position: 'absolute',
                 left: `${this.core.store.state.contextMenuX}px`,
                 top: `${this.core.store.state.contextMenuY}px`,
                 zIndex: '10002',

package/dist/collection/components/ui/kritzel-controls/kritzel-controls.css

@@ -3,6 +3,7 @@
   flex-direction: column;
   user-select: none;
   max-width: 100%;
+  z-index: 1;
 }
 
 :host(.mobile) {
@@ -22,7 +23,7 @@
   border-radius: var(--kritzel-controls-border-radius, 16px);
   box-shadow: var(--kritzel-controls-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));
   border: var(--kritzel-controls-border, 1px solid #ebebeb);
-  z-index: 10000;
+  z-index: 1;
   position: relative;
   max-width: 100%;
   overflow: hidden;

package/dist/collection/components/ui/kritzel-controls/kritzel-controls.js

@@ -1,7 +1,4 @@
 import { h, Host } from "@stencil/core";
-import { KritzelBrushTool } from "../../../classes/tools/brush-tool.class";
-import { KritzelLineTool } from "../../../classes/tools/line-tool.class";
-import { KritzelShapeTool } from "../../../classes/tools/shape-tool.class";
 import { KritzelTextTool } from "../../../classes/tools/text-tool.class";
 import { KritzelSelectionTool } from "../../../classes/tools/selection-tool.class";
 import { KritzelDevicesHelper } from "../../../helpers/devices.helper";
@@ -22,6 +19,9 @@ export class KritzelControls {
     canScrollRight = false;
     needsScrolling = false;
     displayValues = null;
+    internalControls = [];
+    handleActiveToolChangeBound = this.handleActiveToolChange.bind(this);
+    handleSelectionChangeBound = this.handleSelectionChange.bind(this);
     handleKeyDown(event) {
         if (event.key === 'Escape') {
             event.preventDefault();
@@ -30,7 +30,7 @@ export class KritzelControls {
         }
     }
     async handleActiveToolChange(event) {
-        this.activeControl = this.controls.find(control => control.tool === event.detail) || null;
+        this.activeControl = this.internalControls.find(control => control.tool === event.detail) || null;
         if (this.activeControl?.tool) {
             this.updateDisplayValues(this.activeControl.tool);
         }
@@ -41,6 +41,11 @@ export class KritzelControls {
             this.updateDisplayValues(this.activeControl.tool);
         }
     }
+    async onControlsChange() {
+        if (this.kritzelEngine) {
+            await this.initializeTools();
+        }
+    }
     onThemeChange() {
         if (this.activeControl?.tool) {
             this.updateDisplayValues(this.activeControl.tool);
@@ -107,6 +112,12 @@ export class KritzelControls {
     componentDidRender() {
         this.updateScrollIndicators();
     }
+    disconnectedCallback() {
+        if (this.kritzelEngine) {
+            this.kritzelEngine.removeEventListener('activeToolChange', this.handleActiveToolChangeBound);
+            this.kritzelEngine.removeEventListener('objectsSelectionChange', this.handleSelectionChangeBound);
+        }
+    }
     updateScrollIndicators() {
         if (!this.toolsScrollRef)
             return;
@@ -131,16 +142,28 @@ export class KritzelControls {
         if (!this.kritzelEngine) {
             throw new Error('kritzel-engine not found in parent element.');
         }
+        this.kritzelEngine.addEventListener('activeToolChange', this.handleActiveToolChangeBound);
+        this.kritzelEngine.addEventListener('objectsSelectionChange', this.handleSelectionChangeBound);
     }
     async initializeTools() {
-        for (const c of this.controls) {
+        let hasDefault = false;
+        const newControls = this.controls.map(c => ({ ...c }));
+        for (const c of newControls) {
             if (c.type === 'tool' && c.tool) {
-                c.tool = await this.kritzelEngine.registerTool(c.name, c.tool, c.config);
+                let toolConstructor = c.tool;
+                if (typeof toolConstructor !== 'function') {
+                    toolConstructor = toolConstructor.constructor;
+                }
+                const registered = await this.kritzelEngine.registerTool(c.name, toolConstructor, c.config);
+                if (registered) {
+                    c.tool = registered;
+                }
             }
             if (c.type === 'tool' && c.isDefault && c.tool) {
                 await this.kritzelEngine.changeActiveTool(c.tool);
                 this.activeControl = c;
                 this.updateDisplayValues(c.tool);
+                hasDefault = true;
             }
             if (c.type === 'config') {
                 if (this.firstConfig === null) {
@@ -151,6 +174,16 @@ export class KritzelControls {
                 }
             }
         }
+        this.internalControls = newControls;
+        // If no tool is marked as default, activate the first tool control
+        if (!hasDefault) {
+            const firstTool = this.internalControls.find(c => c.type === 'tool' && c.tool);
+            if (firstTool) {
+                await this.kritzelEngine.changeActiveTool(firstTool.tool);
+                this.activeControl = firstTool;
+                this.updateDisplayValues(firstTool.tool);
+            }
+        }
     }
     async handleControlClick(control) {
         this.activeControl = control;
@@ -190,21 +223,20 @@ export class KritzelControls {
         await this.handleControlClick(control);
     }
     render() {
-        const hasConfigUI = this.activeControl?.tool instanceof KritzelBrushTool ||
-            this.activeControl?.tool instanceof KritzelTextTool ||
-            this.activeControl?.tool instanceof KritzelLineTool ||
-            this.activeControl?.tool instanceof KritzelShapeTool ||
-            (this.activeControl?.tool instanceof KritzelSelectionTool && this.activeControl.tool.hasSelection());
+        const activeToolConfig = this.activeControl?.tool
+            ? KritzelToolConfigHelper.getToolConfig(this.activeControl.tool)
+            : null;
+        const hasConfigUI = activeToolConfig !== null;
         // Separate tool controls from config control
-        const toolControls = this.controls.filter(c => c.type === 'tool' || c.type === 'separator');
-        const configControl = this.controls.find(c => c.type === 'config' && c.name === this.firstConfig?.name);
-        return (h(Host, { key: '93d08a3268edb67fc4cccb291b6e0aff6cf5a4bd', class: {
+        const toolControls = this.internalControls.filter(c => c.type === 'tool' || c.type === 'separator');
+        const configControl = this.internalControls.find(c => c.type === 'config' && c.name === this.firstConfig?.name);
+        return (h(Host, { key: '7f2a5fed45ac89b34a86b87552ffaa1b94f44d8b', class: {
                 mobile: this.isTouchDevice,
-            } }, this.isUtilityPanelVisible && (h("kritzel-utility-panel", { key: '8862ea7e524b3e23d87ffea2929e04df7231bb0c', style: {
+            } }, this.isUtilityPanelVisible && (h("kritzel-utility-panel", { key: '2dcbbe498bce0b59fbd225d103f2e322d3b7ff85', style: {
                 position: 'absolute',
                 bottom: '56px',
                 left: '12px',
-            }, undoState: this.undoState, onUndo: () => this.kritzelEngine?.undo(), onRedo: () => this.kritzelEngine?.redo(), onDelete: () => this.kritzelEngine?.delete() })), h("div", { key: '2ea2a41ba4cda77f5abde9231d293da181a2a568', class: "kritzel-controls" }, h("div", { key: '6bd4f6d930a0a51d5549b6dbae1e7be14cbe7822', class: { 'scroll-indicator-left': true, 'visible': this.canScrollLeft } }), h("div", { key: 'c712ca502a4ebd244394158b39391a49839bc386', class: "kritzel-tools-scroll", ref: el => (this.toolsScrollRef = el), onScroll: this.handleToolsScroll }, toolControls.map(control => {
+            }, undoState: this.undoState, onUndo: () => this.kritzelEngine?.undo(), onRedo: () => this.kritzelEngine?.redo(), onDelete: () => this.kritzelEngine?.delete() })), h("div", { key: '6431079040502a78f021c612a7e953b1349f319a', class: "kritzel-controls" }, h("div", { key: '6e0d6dce107cf6b54fb904809fd525ce3b2ae4f0', class: { 'scroll-indicator-left': true, 'visible': this.canScrollLeft } }), h("div", { key: '2686304ad10deac2d022e1deba19195587659d64', class: "kritzel-tools-scroll", ref: el => (this.toolsScrollRef = el), onScroll: this.handleToolsScroll }, toolControls.map(control => {
             // Check if this control has sub-options (split-button)
             if (control.subOptions?.length) {
                 const selectedSubOption = this.getSelectedSubOption(control);
@@ -234,10 +266,10 @@ export class KritzelControls {
                     'kritzel-control': true,
                     'selected': this.activeControl?.name === control?.name,
                 }, key: control.name, "data-testid": `tool-${control.name}`, onClick: _event => this.handleControlClick?.(control), "aria-label": control.name.charAt(0).toUpperCase() + control.name.slice(1) }, h("kritzel-icon", { name: control.icon })));
-        })), h("div", { key: '0d8ae76ea22cb0aea4f7971a17c787c722d1f476', class: { 'scroll-indicator-right': true, 'visible': this.canScrollRight && !(configControl && this.activeControl && hasConfigUI) } }), configControl && this.activeControl && (h("div", { class: {
+        })), h("div", { key: 'f4bcbc856f6e027cdb579356faf54288b43aa080', class: { 'scroll-indicator-right': true, 'visible': this.canScrollRight && !(configControl && this.activeControl && hasConfigUI) } }), configControl && this.activeControl && (h("div", { class: {
                 'kritzel-config-container': true,
                 'visible': hasConfigUI,
-            }, key: configControl.name }, h("div", { key: 'd3da3913362d96109f618c86bd8370f6253a1b7c', class: { 'config-gradient-left': true, 'visible': this.needsScrolling } }), h("kritzel-tooltip", { key: '26fed6901c67362ec0c18eacd23b48fff5a361ef', anchorElement: this.host.shadowRoot?.querySelector('.kritzel-config-container'), triggerElement: this.configTriggerRef }, h("kritzel-tool-config", { key: '0371c038859c0bc3c413b8c72a836d611da01608', tool: this.activeControl.tool, theme: this.theme, onToolChange: event => this.handleToolChange?.(event), onDisplayValuesChange: this.handleDisplayValuesChange, style: { width: '100%', height: '100%' } })), h("div", { key: 'b9bb29fc19ee335103ea050155f5e240f2ad2cd9', tabIndex: hasConfigUI ? 0 : -1, class: "kritzel-config", "data-testid": "tool-config", ref: el => {
+            }, key: configControl.name }, h("div", { key: '0646c98b32047f51841f75dd5fb57813ebb153f5', class: { 'config-gradient-left': true, 'visible': this.needsScrolling } }), h("kritzel-tooltip", { key: '0816b8d7ca55add3c6a81de788be3c61a8a814f2', anchorElement: this.host.shadowRoot?.querySelector('.kritzel-config-container'), triggerElement: this.configTriggerRef }, h("kritzel-tool-config", { key: '8f299593454e7855d83ad5d79b528940b2dcb202', tool: this.activeControl.tool, theme: this.theme, engine: this.kritzelEngine, onToolChange: event => this.handleToolChange?.(event), onDisplayValuesChange: this.handleDisplayValuesChange, style: { width: '100%', height: '100%' } })), h("div", { key: '8b2dc1dcc61df93a92cea8ba2aeb776e57965ab3', tabIndex: hasConfigUI ? 0 : -1, class: "kritzel-config", "data-testid": "tool-config", ref: el => {
                 if (el)
                     this.configTriggerRef = el;
             }, onKeyDown: event => {
@@ -246,7 +278,7 @@ export class KritzelControls {
                 }
             }, style: {
                 cursor: 'pointer',
-            } }, this.displayValues && (h("div", { key: '5918f90d824c41700c5dac4fca13cb8b47759473', class: "color-container" }, h("kritzel-color", { key: '08b7847f1d9117cec216979016d10d7b25076ecc', value: this.displayValues.color, theme: this.theme, size: 18, style: {
+            } }, this.displayValues && (h("div", { key: '1074fc05048aed92ec9d62e347822df0a57a80e4', class: "color-container" }, h("kritzel-color", { key: '222efa6883ccbc6c97d10360039a1315de7d6273', value: this.displayValues.color, theme: this.theme, size: 18, style: {
                 borderRadius: '50%',
                 border: 'none',
             } })))))))));
@@ -397,7 +429,8 @@ export class KritzelControls {
             "canScrollLeft": {},
             "canScrollRight": {},
             "needsScrolling": {},
-            "displayValues": {}
+            "displayValues": {},
+            "internalControls": {}
         };
     }
     static get events() {
@@ -442,6 +475,9 @@ export class KritzelControls {
     static get elementRef() { return "host"; }
     static get watchers() {
         return [{
+                "propName": "controls",
+                "methodName": "onControlsChange"
+            }, {
                 "propName": "theme",
                 "methodName": "onThemeChange"
             }];
@@ -453,18 +489,6 @@ export class KritzelControls {
                 "target": "window",
                 "capture": false,
                 "passive": false
-            }, {
-                "name": "activeToolChange",
-                "method": "handleActiveToolChange",
-                "target": "document",
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "objectsSelectionChange",
-                "method": "handleSelectionChange",
-                "target": "document",
-                "capture": false,
-                "passive": false
             }];
     }
 }

package/dist/collection/components/ui/kritzel-more-menu/kritzel-more-menu.css

@@ -1,5 +1,6 @@
 :host {
   display: inline-flex;
+  z-index: 1;
 }
 
 .more-menu-wrapper {

package/dist/collection/components/ui/kritzel-tool-config/kritzel-tool-config.js

@@ -35,9 +35,19 @@ export class KritzelToolConfig {
     }
     isExpanded = false;
     theme;
+    engine;
+    handleSelectionChangeBound = this.handleSelectionChange.bind(this);
     onThemeChange() {
         this.emitDisplayValues();
     }
+    handleEngineChange(newEngine, oldEngine) {
+        if (oldEngine) {
+            oldEngine.removeEventListener('objectsSelectionChange', this.handleSelectionChangeBound);
+        }
+        if (newEngine) {
+            newEngine.addEventListener('objectsSelectionChange', this.handleSelectionChangeBound);
+        }
+    }
     toolChange;
     displayValuesChange;
     config;
@@ -54,6 +64,11 @@ export class KritzelToolConfig {
             }
         }
     }
+    disconnectedCallback() {
+        if (this.engine) {
+            this.engine.removeEventListener('objectsSelectionChange', this.handleSelectionChangeBound);
+        }
+    }
     componentWillLoad() {
         this.config = KritzelToolConfigHelper.getToolConfig(this.tool);
         if (this.config) {
@@ -61,6 +76,9 @@ export class KritzelToolConfig {
             this.currentOpacity = this.tool[this.config.opacityProperty] ?? 1;
             this.emitDisplayValues();
         }
+        if (this.engine) {
+            this.engine.addEventListener('objectsSelectionChange', this.handleSelectionChangeBound);
+        }
     }
     emitDisplayValues() {
         if (!this.config)
@@ -269,6 +287,28 @@ export class KritzelToolConfig {
                 "setter": false,
                 "reflect": false,
                 "attribute": "theme"
+            },
+            "engine": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "HTMLElement",
+                    "resolved": "HTMLElement",
+                    "references": {
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
             }
         };
     }
@@ -334,15 +374,9 @@ export class KritzelToolConfig {
             }, {
                 "propName": "theme",
                 "methodName": "onThemeChange"
-            }];
-    }
-    static get listeners() {
-        return [{
-                "name": "objectsSelectionChange",
-                "method": "handleSelectionChange",
-                "target": "document",
-                "capture": false,
-                "passive": false
+            }, {
+                "propName": "engine",
+                "methodName": "handleEngineChange"
             }];
     }
 }

package/dist/collection/components/ui/kritzel-utility-panel/kritzel-utility-panel.css

@@ -9,7 +9,7 @@
   background-color: var(--kritzel-utility-panel-background-color, #e2e2e2);
   width: fit-content;
   user-select: none;
-  z-index: 10000;
+  z-index: 1;
 }
 
 .utility-button {

package/dist/collection/constants/version.js

@@ -3,4 +3,4 @@
  * This file is auto-generated by the version bump scripts.
  * Do not modify manually.
  */
-export const KRITZEL_VERSION = '0.3.1';
+export const KRITZEL_VERSION = '0.3.7';

package/dist/collection/helpers/tool-config.helper.js

@@ -5,10 +5,11 @@ import { KritzelTextTool } from "../classes/tools/text-tool.class";
 import { KritzelSelectionTool } from "../classes/tools/selection-tool.class";
 export class KritzelToolConfigHelper {
     static getToolConfig(tool) {
-        if (tool instanceof KritzelSelectionTool) {
+        const toolConstructorName = tool?.constructor?.name;
+        if (tool instanceof KritzelSelectionTool || toolConstructorName === 'KritzelSelectionTool') {
             return tool.getToolConfig();
         }
-        if (tool instanceof KritzelBrushTool) {
+        if (tool instanceof KritzelBrushTool || toolConstructorName === 'KritzelBrushTool') {
             return {
                 type: 'brush',
                 colorProperty: 'color',
@@ -20,7 +21,7 @@ export class KritzelToolConfigHelper {
                 ],
             };
         }
-        if (tool instanceof KritzelLineTool) {
+        if (tool instanceof KritzelLineTool || toolConstructorName === 'KritzelLineTool') {
             return {
                 type: 'line',
                 colorProperty: 'color',
@@ -33,7 +34,7 @@ export class KritzelToolConfigHelper {
                 ],
             };
         }
-        if (tool instanceof KritzelShapeTool) {
+        if (tool instanceof KritzelShapeTool || toolConstructorName === 'KritzelShapeTool') {
             return {
                 type: 'shape',
                 colorProperty: 'strokeColor',
@@ -46,7 +47,7 @@ export class KritzelToolConfigHelper {
                 ],
             };
         }
-        if (tool instanceof KritzelTextTool) {
+        if (tool instanceof KritzelTextTool || toolConstructorName === 'KritzelTextTool') {
             return {
                 type: 'text',
                 colorProperty: 'fontColor',

package/dist/collection/index.js

@@ -22,6 +22,7 @@ export * from './classes/tools/shape-tool.class';
 export * from './helpers/cursor.helper';
 export * from './classes/tools/selection-tool.class';
 export * from './classes/providers/sync/broadcast-sync-provider.class';
+export * from './classes/providers/sync/in-memory-sync-provider.class';
 export * from './classes/providers/sync/indexeddb-sync-provider.class';
 export * from './classes/providers/sync/websocket-sync-provider.class';
 export * from './classes/providers/sync/hocuspocus-sync-provider.class';