kritzel-stencil 0.1.78 → 0.1.80

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

@@ -10,8 +10,8 @@ import { KritzelBaseHandler } from "./base.handler";
  * via shift/ctrl modifiers.
  */
 export class KritzelSelectionHandler extends KritzelBaseHandler {
-    startX;
-    startY;
+    startX = 0;
+    startY = 0;
     touchStartX = 0;
     touchStartY = 0;
     touchStartTimeout = null;
@@ -89,7 +89,10 @@ export class KritzelSelectionHandler extends KritzelBaseHandler {
             const moveThreshold = 5;
             if ((moveDeltaX > moveThreshold || moveDeltaY > moveThreshold) && this._core.store.state.isSelecting) {
                 this.updateTouchSelection();
-                clearTimeout(this._core.store.state.longTouchTimeout);
+                const timeout = this._core.store.state.longTouchTimeout;
+                if (timeout) {
+                    globalThis.clearTimeout?.(timeout);
+                }
             }
         }
     }
@@ -154,9 +157,9 @@ export class KritzelSelectionHandler extends KritzelBaseHandler {
      */
     removeSelectionBox() {
         this._core.store.state.isSelecting = false;
-        this._core.store.state.objects.remove(o => o instanceof KritzelSelectionBox);
+        this._core.store.objects.remove(o => o instanceof KritzelSelectionBox);
         this._core.store.setSelectionBox(null);
-        this._core.store.state.objects.clearLocalSelectionBox();
+        this._core.store.objects.clearLocalSelectionBox();
     }
     /**
      * Initiates a mouse-based selection by creating a selection box at the click position.
@@ -175,12 +178,12 @@ export class KritzelSelectionHandler extends KritzelBaseHandler {
         selectionBox.translateX = this.startX;
         selectionBox.translateY = this.startY;
         this._core.store.state.isSelecting = true;
-        this._core.store.state.objects.remove(o => o instanceof KritzelSelectionBox || (!isAdditive && o instanceof KritzelSelectionGroup && (o.userId == null || o.userId === this._core.user?.id)));
+        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);
         if (!isAdditive) {
             this._core.store.setSelectionGroup(null);
         }
-        this._core.store.state.objects.insert(selectionBox);
+        this._core.store.objects.insert(selectionBox);
         this._core.store.setSelectionBox(selectionBox);
     }
     /**
@@ -207,12 +210,12 @@ export class KritzelSelectionHandler extends KritzelBaseHandler {
         selectionBox.translateX = this.startX;
         selectionBox.translateY = this.startY;
         this._core.store.state.isSelecting = true;
-        this._core.store.state.objects.remove(o => o instanceof KritzelSelectionBox || (!isAdditive && o instanceof KritzelSelectionGroup && (o.userId == null || o.userId === this._core.user?.id)));
+        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);
         if (!isAdditive) {
             this._core.store.setSelectionGroup(null);
         }
-        this._core.store.state.objects.insert(selectionBox);
+        this._core.store.objects.insert(selectionBox);
         this._core.store.setSelectionBox(selectionBox);
     }
     /**
@@ -235,7 +238,7 @@ export class KritzelSelectionHandler extends KritzelBaseHandler {
             selectionBox.height = height;
             selectionBox.translateX = Math.min(currentX, this.startX);
             selectionBox.translateY = Math.min(currentY, this.startY);
-            this._core.store.state.objects.setLocalSelectionBox({
+            this._core.store.objects.setLocalSelectionBox({
                 x: selectionBox.translateX,
                 y: selectionBox.translateY,
                 width: width / selectionBox.scale,
@@ -274,7 +277,7 @@ export class KritzelSelectionHandler extends KritzelBaseHandler {
             selectionBox.height = height;
             selectionBox.translateX = Math.min(currentX, this.startX);
             selectionBox.translateY = Math.min(currentY, this.startY);
-            this._core.store.state.objects.setLocalSelectionBox({
+            this._core.store.objects.setLocalSelectionBox({
                 x: selectionBox.translateX,
                 y: selectionBox.translateY,
                 width: width / selectionBox.scale,
@@ -314,9 +317,9 @@ export class KritzelSelectionHandler extends KritzelBaseHandler {
             y: minY,
             z: selectionBox.scale,
             width: maxX - minX,
-            height: maxY - minY
+            height: maxY - minY,
         };
-        const candidates = this._core.store.state.objects.query(selectionBounds);
+        const candidates = this._core.store.objects.query(selectionBounds);
         // Track newly selected objects for efficient comparison
         const newlySelectedObjects = new Set();
         // Only test candidates that overlap the bounding box
@@ -348,7 +351,9 @@ export class KritzelSelectionHandler extends KritzelBaseHandler {
         const selectedObject = this.getTopmostHitObject(event);
         const isAdditive = event.shiftKey || event.ctrlKey;
         this.clearSelectionPreview();
-        this.addObjectToSelectionGroup(selectedObject, isAdditive);
+        if (selectedObject) {
+            this.addObjectToSelectionGroup(selectedObject, isAdditive);
+        }
         this.removeSelectionBox();
     }
     /**
@@ -431,7 +436,7 @@ export class KritzelSelectionHandler extends KritzelBaseHandler {
             return;
         }
         // Build parent group lookup map ONCE - O(g * c) instead of O(n * g * c)
-        const allGroups = this._core.store.state.objects.filter(obj => obj.__class__ === 'KritzelGroup');
+        const allGroups = this._core.store.objects.filter(obj => obj.__class__ === 'KritzelGroup');
         const childToParentMap = new Map();
         for (const group of allGroups) {
             for (const childId of group.childIds) {

package/dist/collection/classes/managers/anchor.manager.js

@@ -61,7 +61,7 @@ export class KritzelAnchorManager {
         // Snap the endpoint to the target's center
         this.snapEndpointToObject(line, endpoint, targetObjectId);
         // Persist the change
-        this._core.store.state.objects.update(line);
+        this._core.store.objects.update(line);
     }
     /**
      * Removes an anchor from a line endpoint.
@@ -440,7 +440,7 @@ export class KritzelAnchorManager {
             // Update the line to persist the change
             const line = this.getLineById(entry.lineId);
             if (line) {
-                this._core.store.state.objects.update(line);
+                this._core.store.objects.update(line);
             }
         }
         // Remove the object from the index
@@ -542,7 +542,7 @@ export class KritzelAnchorManager {
      * @returns The KritzelLine object if found and is a line, null otherwise.
      */
     getLineById(lineId) {
-        const objects = this._core.store.state.objects.filter(o => o.id === lineId);
+        const objects = this._core.store.objects.filter(o => o.id === lineId);
         if (objects.length === 0) {
             return null;
         }
@@ -556,7 +556,7 @@ export class KritzelAnchorManager {
      * @returns The KritzelBaseObject if found, null otherwise.
      */
     getObjectById(objectId) {
-        const objects = this._core.store.state.objects.filter(o => o.id === objectId);
+        const objects = this._core.store.objects.filter(o => o.id === objectId);
         return objects.length > 0 ? objects[0] : null;
     }
     /**

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

@@ -208,7 +208,7 @@ export class KritzelBaseObject {
         const object = new KritzelBaseObject();
         object._core = core;
         object.zIndex = core.store.currentZIndex;
-        object.workspaceId = core.store.state.activeWorkspace.id;
+        object.workspaceId = core.store.activeWorkspace.id;
         object.userId = core.user?.id;
         return object;
     }
@@ -276,7 +276,7 @@ export class KritzelBaseObject {
      * Triggers a re-render of the object in the canvas.
      */
     update() {
-        this._core.store.state.objects.update(this);
+        this._core.store.objects.update(this);
     }
     /**
      * Moves the object based on the delta between start and end coordinates.
@@ -291,7 +291,7 @@ export class KritzelBaseObject {
         const deltaY = (startY - endY) / this._core.store.state.scale;
         this.translateX += deltaX;
         this.translateY += deltaY;
-        this._core.store.state.objects.update(this);
+        this._core.store.objects.update(this);
     }
     /**
      * Resizes the object to new dimensions and position.
@@ -310,7 +310,7 @@ export class KritzelBaseObject {
         this.height = height;
         this.translateX = x;
         this.translateY = y;
-        this._core.store.state.objects.update(this);
+        this._core.store.objects.update(this);
         // Update any lines that are anchored to this object (after position is updated)
         this._core.anchorManager.updateAnchorsForObject(this.id);
     }
@@ -320,7 +320,7 @@ export class KritzelBaseObject {
      */
     rotate(value) {
         this.rotation = value;
-        this._core.store.state.objects.update(this);
+        this._core.store.objects.update(this);
     }
     /**
      * Creates a shallow clone of this object with the same ID.
@@ -425,6 +425,6 @@ export class KritzelBaseObject {
     updatePosition(x, y) {
         this.translateX = x;
         this.translateY = y;
-        this._core.store.state.objects.update(this);
+        this._core.store.objects.update(this);
     }
 }

package/dist/collection/classes/objects/custom-element.class.js

@@ -48,7 +48,7 @@ export class KritzelCustomElement extends KritzelBaseObject {
         const object = new KritzelCustomElement(config);
         object._core = core;
         object.id = object.generateId();
-        object.workspaceId = core.store.state.activeWorkspace.id;
+        object.workspaceId = core.store.activeWorkspace.id;
         object.userId = core.user?.id;
         return object;
     }
@@ -94,7 +94,7 @@ export class KritzelCustomElement extends KritzelBaseObject {
             this.element.style.height = `${height}px`;
         }
         // Update to sync changes to y.js and propagate to other tabs
-        this._core.store.state.objects.update(this);
+        this._core.store.objects.update(this);
     }
     /**
      * Creates a deep copy of this custom element.

package/dist/collection/classes/objects/group.class.js

@@ -47,7 +47,7 @@ export class KritzelGroup extends KritzelBaseObject {
         }
         return this.childIds
             .map(id => {
-            const found = this._core.store.state.objects.filter(obj => obj.id === id);
+            const found = this._core.store.objects.filter(obj => obj.id === id);
             return found.length > 0 ? found[0] : null;
         })
             .filter((obj) => obj !== null);
@@ -69,7 +69,7 @@ export class KritzelGroup extends KritzelBaseObject {
         const group = new KritzelGroup();
         group._core = core;
         group.id = group.generateId();
-        group.workspaceId = core.store.state.activeWorkspace.id;
+        group.workspaceId = core.store.activeWorkspace.id;
         group.userId = core.user?.id;
         group.scale = core.store.state.scale;
         group.zIndex = core.store.currentZIndex;
@@ -102,7 +102,7 @@ export class KritzelGroup extends KritzelBaseObject {
      * @returns The parent KritzelGroup if found, or null if the object is not a child of any group.
      */
     static findParentGroup(core, objectId) {
-        const allGroups = core.store.state.objects
+        const allGroups = core.store.objects
             .filter(obj => obj.__class__ === 'KritzelGroup');
         for (const group of allGroups) {
             if (group.childIds.includes(objectId)) {
@@ -288,8 +288,8 @@ export class KritzelGroup extends KritzelBaseObject {
         const deltaY = (startY - endY) / this._core.store.state.scale;
         this.translateX += deltaX;
         this.translateY += deltaY;
-        this._core.store.state.objects.transaction(() => {
-            this._core.store.state.objects.update(this);
+        this._core.store.objects.transaction(() => {
+            this._core.store.objects.update(this);
             this.children.forEach(child => {
                 child.move(startX, startY, endX, endY);
                 // Update any lines anchored to this child
@@ -327,7 +327,7 @@ export class KritzelGroup extends KritzelBaseObject {
         const sin = Math.sin(-rotation);
         const cosR = Math.cos(rotation);
         const sinR = Math.sin(rotation);
-        this._core.store.state.objects.transaction(() => {
+        this._core.store.objects.transaction(() => {
             this.children.forEach(child => {
                 // Calculate child center
                 const childCenterX = child.translateX + child.totalWidth / 2 / child.scale;
@@ -365,7 +365,7 @@ export class KritzelGroup extends KritzelBaseObject {
             });
             this.refreshBoundingBox();
             this.captureChildSnapshots();
-            this._core.store.state.objects.update(this);
+            this._core.store.objects.update(this);
         });
     }
     /**
@@ -381,8 +381,8 @@ export class KritzelGroup extends KritzelBaseObject {
         const angle = value - this.snapshotRotation;
         const cos = Math.cos(angle);
         const sin = Math.sin(angle);
-        this._core.store.state.objects.transaction(() => {
-            this._core.store.state.objects.update(this);
+        this._core.store.objects.transaction(() => {
+            this._core.store.objects.update(this);
             this.children.forEach(child => {
                 const unchangedSnapshot = this.unchangedChildSnapshots.get(child.id);
                 if (!unchangedSnapshot)
@@ -508,7 +508,7 @@ export class KritzelGroup extends KritzelBaseObject {
      * Triggers synchronization with y.js for collaborative editing.
      */
     update() {
-        this._core.store.state.objects.update(this);
+        this._core.store.objects.update(this);
     }
     /**
      * Updates the workspace ID for this group and all its children recursively.

package/dist/collection/classes/objects/image.class.js

@@ -39,7 +39,7 @@ export class KritzelImage extends KritzelBaseObject {
         const object = new KritzelImage();
         object._core = core;
         object.id = object.generateId();
-        object.workspaceId = core.store.state.activeWorkspace.id;
+        object.workspaceId = core.store.activeWorkspace.id;
         object.userId = core.user?.id;
         object.x = 0;
         object.y = 0;
@@ -68,7 +68,7 @@ export class KritzelImage extends KritzelBaseObject {
         this.translateX = x;
         this.translateY = y;
         // Update to sync changes to y.js and propagate to other tabs
-        this._core.store.state.objects.update(this);
+        this._core.store.objects.update(this);
     }
     /**
      * Creates a KritzelImage from a URL, handling image loading and dimension calculation.

package/dist/collection/classes/objects/line.class.js

@@ -79,7 +79,7 @@ export class KritzelLine extends KritzelBaseObject {
         const object = new KritzelLine();
         object._core = core;
         object.id = object.generateId();
-        object.workspaceId = core.store.state.activeWorkspace.id;
+        object.workspaceId = core.store.activeWorkspace.id;
         object.userId = core.user?.id;
         object.options = options;
         object.startX = options?.startX ?? 0;
@@ -135,7 +135,7 @@ export class KritzelLine extends KritzelBaseObject {
         this.translateY = y;
         this._adjustedPoints = null;
         this._clipInfo = null;
-        this._core.store.state.objects.update(this);
+        this._core.store.objects.update(this);
         // Update anchors after the line is updated
         this._core.anchorManager.updateAnchorsForObject(this.id);
         if (this.startAnchor) {
@@ -154,7 +154,7 @@ export class KritzelLine extends KritzelBaseObject {
         this.rotation = value;
         this._adjustedPoints = null;
         this._clipInfo = null;
-        this._core.store.state.objects.update(this);
+        this._core.store.objects.update(this);
     }
     /**
      * Moves the line by calculating the delta between start and end positions.
@@ -178,7 +178,7 @@ export class KritzelLine extends KritzelBaseObject {
         }
         this._adjustedPoints = null;
         this._clipInfo = null;
-        this._core.store.state.objects.update(this);
+        this._core.store.objects.update(this);
     }
     /**
      * Tests if a point intersects with the line within the stroke tolerance.
@@ -305,7 +305,7 @@ export class KritzelLine extends KritzelBaseObject {
         this.translateY = y;
         this._adjustedPoints = null;
         this._clipInfo = null;
-        this._core.store.state.objects.update(this);
+        this._core.store.objects.update(this);
     }
     /**
      * Updates a specific endpoint of the line (start or end).
@@ -363,7 +363,7 @@ export class KritzelLine extends KritzelBaseObject {
         // Clear cached adjusted points
         this._adjustedPoints = null;
         this._clipInfo = null;
-        this._core.store.state.objects.update(this);
+        this._core.store.objects.update(this);
     }
     /**
      * Updates the control point for a quadratic Bezier curve.
@@ -413,7 +413,7 @@ export class KritzelLine extends KritzelBaseObject {
         // Clear cached adjusted points
         this._adjustedPoints = null;
         this._clipInfo = null;
-        this._core.store.state.objects.update(this);
+        this._core.store.objects.update(this);
     }
     /**
      * Computes the line endpoints in world coordinates, accounting for rotation,

package/dist/collection/classes/objects/path.class.js

@@ -61,7 +61,7 @@ export class KritzelPath extends KritzelBaseObject {
         const object = new KritzelPath();
         object._core = core;
         object.id = object.generateId();
-        object.workspaceId = core.store.state.activeWorkspace.id;
+        object.workspaceId = core.store.activeWorkspace.id;
         object.userId = core.user?.id;
         object.options = options;
         object.points = options?.points ?? [];
@@ -119,7 +119,7 @@ export class KritzelPath extends KritzelBaseObject {
         this.translateX = x;
         this.translateY = y;
         this._adjustedPoints = null;
-        this._core.store.state.objects.update(this);
+        this._core.store.objects.update(this);
     }
     /**
      * Rotates the path by the specified angle.
@@ -129,7 +129,7 @@ export class KritzelPath extends KritzelBaseObject {
     rotate(value) {
         this.rotation = value;
         this._adjustedPoints = null;
-        this._core.store.state.objects.update(this);
+        this._core.store.objects.update(this);
     }
     /**
      * Moves the path by calculating the delta between start and end positions.
@@ -145,7 +145,7 @@ export class KritzelPath extends KritzelBaseObject {
         this.translateX += deltaX;
         this.translateY += deltaY;
         this._adjustedPoints = null;
-        this._core.store.state.objects.update(this);
+        this._core.store.objects.update(this);
     }
     /**
      * Tests whether a point intersects with the path's stroke.
@@ -240,7 +240,7 @@ export class KritzelPath extends KritzelBaseObject {
         this.translateX = x;
         this.translateY = y;
         this._adjustedPoints = null;
-        this._core.store.state.objects.update(this);
+        this._core.store.objects.update(this);
     }
     /**
      * Lifecycle hook called after properties have been updated.

package/dist/collection/classes/objects/selection-box.class.js

@@ -18,7 +18,7 @@ export class KritzelSelectionBox extends KritzelBaseObject {
         const object = new KritzelSelectionBox();
         object._core = core;
         object.id = object.generateId();
-        object.workspaceId = core.store.state.activeWorkspace.id;
+        object.workspaceId = core.store.activeWorkspace.id;
         object.userId = core.user?.id;
         object.scale = core.store.state.scale;
         object.zIndex = 99999;

package/dist/collection/classes/objects/selection-group.class.js

@@ -21,10 +21,10 @@ export class KritzelSelectionGroup extends KritzelBaseObject {
     snapshotTranslateX = 0;
     snapshotTranslateY = 0;
     clientId;
-    minX;
-    maxX;
-    minY;
-    maxY;
+    minX = 0;
+    maxX = 0;
+    minY = 0;
+    maxY = 0;
     // Selection styling properties
     handleColor;
     handleStrokeColor;
@@ -64,7 +64,7 @@ export class KritzelSelectionGroup extends KritzelBaseObject {
             return this._cachedObjects;
         }
         const idSet = new Set(this._objectIds);
-        const foundObjects = this._core.store.state.objects.filter(obj => idSet.has(obj.id));
+        const foundObjects = this._core.store.objects.filter(obj => idSet.has(obj.id));
         // Preserve the original order from objectIds
         const objectMap = new Map(foundObjects.map(obj => [obj.id, obj]));
         this._cachedObjects = this._objectIds
@@ -91,9 +91,9 @@ export class KritzelSelectionGroup extends KritzelBaseObject {
         const object = new KritzelSelectionGroup();
         object._core = core;
         object.id = object.generateId();
-        object.workspaceId = core.store.state.activeWorkspace.id;
+        object.workspaceId = core.store.activeWorkspace.id;
         object.userId = core.user?.id;
-        object.clientId = core.store.state.objects?.localClientId ?? undefined;
+        object.clientId = core.store.objects?.localClientId ?? undefined;
         object.scale = core.store.state.scale;
         object.zIndex = 99999;
         // Initialize styling with theme-aware defaults
@@ -232,7 +232,7 @@ export class KritzelSelectionGroup extends KritzelBaseObject {
         });
         this.translateX = x;
         this.translateY = y;
-        this._core.store.state.objects.update(this);
+        this._core.store.objects.update(this);
     }
     /**
      * Capture snapshots of current object states for undo/redo operations
@@ -309,7 +309,7 @@ export class KritzelSelectionGroup extends KritzelBaseObject {
         // Only update the selection group itself
         // Child objects are already updated during move/resize/rotate operations
         // Updating them again here would create redundant y.js updates
-        this._core.store.state.objects.update(this);
+        this._core.store.objects.update(this);
     }
     /**
      * Moves the selection group and all its contained objects by calculating the delta from drag coordinates.
@@ -325,8 +325,8 @@ export class KritzelSelectionGroup extends KritzelBaseObject {
         const deltaY = (startY - endY) / this._core.store.state.scale;
         this.translateX += deltaX;
         this.translateY += deltaY;
-        this._core.store.state.objects.transaction(() => {
-            this._core.store.state.objects.update(this);
+        this._core.store.objects.transaction(() => {
+            this._core.store.objects.update(this);
             const children = this.objects;
             for (const obj of children) {
                 obj.move(startX, startY, endX, endY);
@@ -369,7 +369,7 @@ export class KritzelSelectionGroup extends KritzelBaseObject {
         const sin = Math.sin(-rotation);
         const cosR = Math.cos(rotation);
         const sinR = Math.sin(rotation);
-        this._core.store.state.objects.transaction(() => {
+        this._core.store.objects.transaction(() => {
             // Cache objects once to avoid repeated getter calls during resize
             const children = this.objects;
             children.forEach(child => {
@@ -421,7 +421,7 @@ export class KritzelSelectionGroup extends KritzelBaseObject {
             // Note: Don't capture new snapshots here - we need to preserve the original snapshots
             // until the transform operation is complete to avoid compounding errors during drag
             this.refreshObjectDimensions(children);
-            this._core.store.state.objects.update(this);
+            this._core.store.objects.update(this);
         });
     }
     /**
@@ -439,9 +439,9 @@ export class KritzelSelectionGroup extends KritzelBaseObject {
         const sin = Math.sin(angle);
         // Cache objects once to avoid repeated getter calls during rotation
         const children = this.objects;
-        this._core.store.state.objects.transaction(() => {
+        this._core.store.objects.transaction(() => {
             // Update the SelectionGroup itself to propagate rotation to other tabs
-            this._core.store.state.objects.update(this);
+            this._core.store.objects.update(this);
             const childCount = children.length;
             for (const child of children) {
                 const unchangedSnapshot = this.unchangedObjectSnapshots.get(child.id);
@@ -538,7 +538,7 @@ export class KritzelSelectionGroup extends KritzelBaseObject {
             this.translateY = cy - (this.height / this.scale + 2 * this.padding) / 2;
         }
         if (!skipPersist) {
-            this._core.store.state.objects.update(this);
+            this._core.store.objects.update(this);
         }
     }
     /**