kritzel-stencil 0.3.22 → 0.3.24

package/dist/collection/classes/core/core.class.js

@@ -186,6 +186,7 @@ export class KritzelCore {
         this._clipboardManager = new KritzelClipboardManager(this);
         this._toolRegistry = new KritzelToolRegistry(this);
         this._assetResolver = new KritzelAssetResolver();
+        this._assetResolver.setShowInfo(this._store.state.debugInfo?.showAssetResolverInfo ?? false);
     }
     /**
      * Gets the asset resolver responsible for storing and resolving
@@ -557,6 +558,10 @@ export class KritzelCore {
                 this.removeObject(child);
             });
         }
+        // Unmount custom elements before removal
+        if (KritzelClassHelper.isInstanceOf(object, 'KritzelCustomElement')) {
+            object.unmount();
+        }
         // Handle anchor cleanup
         if (KritzelClassHelper.isInstanceOf(object, 'KritzelLine')) {
             // If removing a line, clean up its anchor index entries
@@ -597,21 +602,84 @@ export class KritzelCore {
      * @param selectionGroup - The selection group to add
      */
     addSelectionGroup(selectionGroup) {
-        this.removeSelectionGroup();
+        this.removeLocalSelectionGroups();
         this.removeSelectionBox();
+        for (const object of selectionGroup.objects ?? []) {
+            if (KritzelClassHelper.isInstanceOf(object, 'KritzelCustomElement')) {
+                const customElementObject = object;
+                if (typeof customElementObject.setIsInteractive === 'function') {
+                    customElementObject.setIsInteractive(true);
+                }
+                else {
+                    customElementObject.isInteractive = true;
+                }
+            }
+        }
         this._store.objects.insert(selectionGroup);
         this._store.setSelectionGroup(selectionGroup);
         this._kritzelEngine.triggerSelectionChange();
     }
+    /**
+     * Returns whether the provided selection group belongs to the local user context.
+     * Local groups are either explicitly owned by the current user or have no user ID.
+     */
+    isLocalSelectionGroup(selectionGroup) {
+        const localUserId = this._user?.id;
+        return localUserId == null || selectionGroup.userId === localUserId || selectionGroup.userId == null;
+    }
+    /**
+     * Applies deselection teardown side effects to a selection group before removal.
+     */
+    teardownSelectionGroup(selectionGroup) {
+        selectionGroup.deselectAllChildren?.();
+        for (const object of selectionGroup.objects ?? []) {
+            if (KritzelClassHelper.isInstanceOf(object, 'KritzelCustomElement')) {
+                const customElementObject = object;
+                if (typeof customElementObject.setIsInteractive === 'function') {
+                    customElementObject.setIsInteractive(false);
+                }
+                else {
+                    customElementObject.isInteractive = false;
+                }
+            }
+        }
+    }
+    /**
+     * Removes all local selection groups from the store, including orphaned groups
+     * that are no longer referenced by store.selectionGroup.
+     * @returns True when at least one local selection group was removed
+     */
+    removeLocalSelectionGroups() {
+        const allSelectionGroupsInStore = this._store.objects
+            .allObjects()
+            .filter((object) => {
+            return object instanceof KritzelSelectionGroup || KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionGroup');
+        });
+        const allLocalSelectionGroups = allSelectionGroupsInStore.filter(selectionGroup => this.isLocalSelectionGroup(selectionGroup));
+        const currentSelectionGroup = this._store.selectionGroup;
+        if (currentSelectionGroup &&
+            this.isLocalSelectionGroup(currentSelectionGroup) &&
+            !allLocalSelectionGroups.some(group => group.id === currentSelectionGroup.id)) {
+            allLocalSelectionGroups.push(currentSelectionGroup);
+        }
+        if (allLocalSelectionGroups.length === 0) {
+            return false;
+        }
+        for (const selectionGroup of allLocalSelectionGroups) {
+            this.teardownSelectionGroup(selectionGroup);
+        }
+        const localSelectionGroupIds = new Set(allLocalSelectionGroups.map(group => group.id));
+        this._store.objects.remove(object => localSelectionGroupIds.has(object.id));
+        this._store.setSelectionGroup(null);
+        return true;
+    }
     /**
      * Removes the current selection group from the canvas.
      * Clears the cached reference and triggers the selection change event.
      */
     removeSelectionGroup() {
-        const selectionGroup = this._store.selectionGroup;
-        if (selectionGroup) {
-            this._store.objects.remove(object => object.id === selectionGroup.id);
-            this._store.setSelectionGroup(null);
+        const removedAnySelectionGroup = this.removeLocalSelectionGroups();
+        if (removedAnySelectionGroup) {
             this._kritzelEngine.triggerSelectionChange();
         }
     }
@@ -915,6 +983,11 @@ export class KritzelCore {
             (o instanceof KritzelSelectionGroup && (localUserId == null || o.userId === localUserId || o.userId == null)));
         this._store.setSelectionBox(null);
         this._store.setSelectionGroup(null);
+        for (const object of this._store.allNonSelectionObjects) {
+            if (object.isSelected) {
+                object.isSelected = false;
+            }
+        }
         this._store.state.isSelecting = false;
         this._store.state.isResizeHandleSelected = false;
         this._store.state.isRotationHandleSelected = false;
@@ -1077,6 +1150,11 @@ export class KritzelCore {
             // During selection phase (no group yet), hide UI for KritzelLine objects
             return !(object instanceof KritzelLine);
         }
+        // Once a local selection group exists, only the selection-group object
+        // should render group UI (children remain selected but don't render handles).
+        if (!(object instanceof KritzelSelectionGroup) || object.id !== selectionGroup.id) {
+            return false;
+        }
         // Show UI if selection contains more than one object
         if (selectionGroup.objects.length > 1) {
             return true;

package/dist/collection/classes/core/store.class.js

@@ -4,6 +4,7 @@ import { KritzelText } from "../objects/text.class";
 import { KritzelShape } from "../objects/shape.class";
 import { KritzelPath } from "../objects/path.class";
 import { KritzelLine } from "../objects/line.class";
+import { KritzelClassHelper } from "../../helpers/class.helper";
 import { KritzelObjectMap } from "../structures/object-map.structure";
 /**
  * Central state management store for the Kritzel engine.
@@ -222,6 +223,14 @@ export class KritzelStore {
         const activeShapes = this.objects.filter(o => o instanceof KritzelShape && o.isEditing);
         return activeShapes.length > 0 ? activeShapes[0] : null;
     }
+    /**
+     * Gets the currently selected custom element whose focused descendant is an input-like element.
+     * @returns The interactive custom element with focused input-like content, or null if none matches
+     */
+    get activeInteractiveCustomElement() {
+        const interactiveCustomElement = this.selectedObjects.find(object => KritzelClassHelper.isInstanceOf(object, 'KritzelCustomElement') && object.hasFocusedInputElement());
+        return interactiveCustomElement ?? null;
+    }
     /**
      * Gets the path currently being drawn (not yet completed).
      * @returns The incomplete path object, or null if no path is being drawn

package/dist/collection/classes/handlers/key.handler.js

@@ -129,7 +129,7 @@ export class KritzelKeyHandler extends KritzelBaseHandler {
         // of running global canvas shortcuts. Escape is the one exception — it
         // still runs through the shortcut system so it can collapse the text
         // selection (handled inside the shortcut's action).
-        if ((this._core.store.activeText || this._core.store.activeShape) && event.key !== 'Escape') {
+        if ((this._core.store.activeText || this._core.store.activeShape || this._core.store.activeInteractiveCustomElement) && event.key !== 'Escape') {
             return;
         }
         const shortcut = this.shortcuts.find(s => s.key === event.key && !!s.ctrl === event.ctrlKey && !!s.shift === event.shiftKey && (!s.condition || s.condition(this._core)));

package/dist/collection/classes/handlers/selection.handler.js

@@ -178,10 +178,9 @@ export class KritzelSelectionHandler extends KritzelBaseHandler {
         selectionBox.translateX = this.startX;
         selectionBox.translateY = this.startY;
         this._core.store.state.isSelecting = true;
-        this._core.store.objects.remove(o => o instanceof KritzelSelectionBox || (!isAdditive && o instanceof KritzelSelectionGroup && (o.userId == null || o.userId === this._core.user?.id)));
-        this._core.store.setSelectionBox(null);
+        this._core.removeSelectionBox();
         if (!isAdditive) {
-            this._core.store.setSelectionGroup(null);
+            this._core.removeSelectionGroup();
         }
         this._core.store.objects.insert(selectionBox);
         this._core.store.setSelectionBox(selectionBox);
@@ -210,10 +209,9 @@ export class KritzelSelectionHandler extends KritzelBaseHandler {
         selectionBox.translateX = this.startX;
         selectionBox.translateY = this.startY;
         this._core.store.state.isSelecting = true;
-        this._core.store.objects.remove(o => o instanceof KritzelSelectionBox || (!isAdditive && o instanceof KritzelSelectionGroup && (o.userId == null || o.userId === this._core.user?.id)));
-        this._core.store.setSelectionBox(null);
+        this._core.removeSelectionBox();
         if (!isAdditive) {
-            this._core.store.setSelectionGroup(null);
+            this._core.removeSelectionGroup();
         }
         this._core.store.objects.insert(selectionBox);
         this._core.store.setSelectionBox(selectionBox);
@@ -383,8 +381,11 @@ export class KritzelSelectionHandler extends KritzelBaseHandler {
      */
     clearSelectionPreview() {
         // Only clear previously tracked selected objects - O(k) instead of O(n)
+        const selectedGroupIds = new Set(this._core.store.selectionGroup?.objectIds ?? []);
         for (const obj of this._previouslySelectedObjects) {
-            obj.isSelected = false;
+            if (!selectedGroupIds.has(obj.id)) {
+                obj.isSelected = false;
+            }
         }
         this._previouslySelectedObjects.clear();
     }
@@ -403,7 +404,11 @@ export class KritzelSelectionHandler extends KritzelBaseHandler {
         // Resolve child objects to their parent groups
         const parentGroup = KritzelGroup.findParentGroup(this._core, object.id);
         const objectToSelect = parentGroup || object;
-        objectToSelect.isSelected = false;
+        // When the click resolves to a parent group, clear the child's own flag so
+        // it does not linger as selected and re-select the group on the next interaction.
+        if (parentGroup) {
+            object.isSelected = false;
+        }
         const existingGroup = this._core.store.selectionGroup;
         if (shiftKey && existingGroup) {
             existingGroup.addOrRemove(objectToSelect);
@@ -448,9 +453,16 @@ export class KritzelSelectionHandler extends KritzelBaseHandler {
         const resolvedObjects = new Map();
         for (const obj of selectedObjects) {
             const parentGroup = childToParentMap.get(obj.id);
-            const toSelect = parentGroup || obj;
-            resolvedObjects.set(toSelect.id, toSelect);
-            obj.isSelected = false;
+            if (parentGroup) {
+                // The child was selected (e.g. via marquee preview) but selection is
+                // represented by its parent group. Clear the child's flag so it does
+                // not linger as selected and re-select the group on the next interaction.
+                obj.isSelected = false;
+                resolvedObjects.set(parentGroup.id, parentGroup);
+            }
+            else {
+                resolvedObjects.set(obj.id, obj);
+            }
         }
         const unrolledObjects = Array.from(resolvedObjects.values());
         const filteredObjects = this.filterDescendantsOfSelectedGroups(unrolledObjects);
@@ -458,12 +470,16 @@ export class KritzelSelectionHandler extends KritzelBaseHandler {
         if (shiftKey && existingGroup) {
             existingGroup.addObjects(filteredObjects);
             this.removeDescendantsOfSelectedGroups(existingGroup);
+            this._previouslySelectedObjects.clear();
             this._core.rerender();
         }
         else {
             // Create selection group and set all IDs at once (no per-item refresh)
             const selectionGroup = KritzelSelectionGroup.create(this._core);
             selectionGroup.objectIds = filteredObjects.map(o => o.id);
+            filteredObjects.forEach(obj => {
+                obj.isSelected = true;
+            });
             // Only refresh dimensions and capture snapshots ONCE at the end - O(n) instead of O(n²)
             if (selectionGroup.length === 1) {
                 selectionGroup.rotation = selectionGroup.objects[0].rotation;
@@ -472,6 +488,7 @@ export class KritzelSelectionHandler extends KritzelBaseHandler {
             selectionGroup.refreshObjectDimensions();
             selectionGroup.isSelected = true;
             this._core.addSelectionGroup(selectionGroup);
+            this._previouslySelectedObjects.clear();
             this._core.rerender();
         }
     }

package/dist/collection/classes/objects/base-object.class.js

@@ -36,7 +36,8 @@ export class KritzelBaseObject {
     isMounted = false;
     isEditable = false;
     isInteractive = false;
-    isDebugInfoVisible = false;
+    isResizable = true;
+    isRotatable = true;
     /**
      * Gets the total width of the object including padding.
      * @returns The width plus double the padding value
@@ -344,21 +345,24 @@ export class KritzelBaseObject {
         Object.assign(copiedObject, this);
         copiedObject.id = this.generateId();
         copiedObject.isMounted = false;
+        copiedObject.isSelected = false;
+        copiedObject.isHovered = false;
+        copiedObject.isInteractive = false;
+        copiedObject.resizing = false;
+        copiedObject.markedForRemoval = false;
+        copiedObject.isVisible = true;
         return copiedObject;
     }
     /**
      * Serializes the object to a plain JavaScript object for persistence.
      * Excludes internal references (_core, _elementRef) and computed properties.
-     * DOM elements are cloned if present.
+     * Subclasses should override to handle domain-specific serialization (e.g., HTML elements).
      * @returns A serializable object containing all persistent properties
      */
     serialize() {
-        const { _core, _elementRef, element, totalWidth, totalHeight, ...remainingProps } = this;
-        const clonedProps = structuredClone(remainingProps);
-        if (element && typeof element === 'object' && 'nodeType' in element && element.nodeType === 1) {
-            clonedProps.element = element.cloneNode(true);
-        }
-        return clonedProps;
+        const { _core, _elementRef, element, totalWidth, totalHeight, isSelected, isHovered, isMounted, isInteractive, resizing, markedForRemoval, isVisible, ...remainingProps } = this;
+        // No longer clone raw elements—let subclasses handle serializable payloads
+        return structuredClone(remainingProps);
     }
     /**
      * Restores the object's state from a serialized plain object.
@@ -369,6 +373,14 @@ export class KritzelBaseObject {
      */
     deserialize(object) {
         Object.assign(this, object);
+        // Selection/interactivity state is transient UI state and must not survive revival.
+        this.isSelected = false;
+        this.isHovered = false;
+        this.isMounted = false;
+        this.isInteractive = false;
+        this.resizing = false;
+        this.markedForRemoval = false;
+        this.isVisible = true;
         return this;
     }
     /**