kritzel-stencil 0.1.73 → 0.1.75

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

@@ -156,6 +156,7 @@ export class KritzelSelectionHandler extends KritzelBaseHandler {
         this._core.store.state.isSelecting = false;
         this._core.store.state.objects.remove(o => o instanceof KritzelSelectionBox);
         this._core.store.setSelectionBox(null);
+        this._core.store.state.objects.clearLocalSelectionBox();
     }
     /**
      * Initiates a mouse-based selection by creating a selection box at the click position.
@@ -174,7 +175,7 @@ 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));
+        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.setSelectionBox(null);
         if (!isAdditive) {
             this._core.store.setSelectionGroup(null);
@@ -206,7 +207,7 @@ 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));
+        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.setSelectionBox(null);
         if (!isAdditive) {
             this._core.store.setSelectionGroup(null);
@@ -234,6 +235,12 @@ 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({
+                x: selectionBox.translateX,
+                y: selectionBox.translateY,
+                width: width / selectionBox.scale,
+                height: height / selectionBox.scale,
+            });
             if (width > 0 || height > 0) {
                 this.updateSelectedObjects();
             }
@@ -267,6 +274,12 @@ 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({
+                x: selectionBox.translateX,
+                y: selectionBox.translateY,
+                width: width / selectionBox.scale,
+                height: height / selectionBox.scale,
+            });
             if (width > 0 || height > 0) {
                 this.updateSelectedObjects();
             }

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

@@ -286,16 +286,22 @@ export class KritzelAnchorManager {
         if (!KritzelClassHelper.isInstanceOf(selectedObject, 'KritzelLine'))
             return null;
         const line = selectedObject;
-        const startAnchorViz = this.computeAnchorVisualization(line, 'start');
-        const endAnchorViz = this.computeAnchorVisualization(line, 'end');
+        const startAnchorVizRaw = this.computeAnchorVisualization(line, 'start');
+        const endAnchorVizRaw = this.computeAnchorVisualization(line, 'end');
+        const startAnchorViz = this.isFiniteAnchorVisualization(startAnchorVizRaw) ? startAnchorVizRaw : null;
+        const endAnchorViz = this.isFiniteAnchorVisualization(endAnchorVizRaw) ? endAnchorVizRaw : null;
         if (!startAnchorViz && !endAnchorViz)
             return null;
-        const scale = this._core.store.state.scale;
-        const lineStrokeWidth = line.strokeWidth / line.scale;
+        const scale = this.getSafeScale(this._core.store.state.scale);
+        const lineScale = this.getSafeScale(line.scale);
+        const lineStrokeWidth = line.strokeWidth / lineScale;
         const indicatorStrokeWidth = `${2 / scale}`;
         const dashLength = Math.max(lineStrokeWidth * 2, 4 / scale);
         const dashArray = `${dashLength} ${dashLength}`;
         const indicatorRadius = 8 / scale;
+        if (!this.areFiniteNumbers(lineStrokeWidth, dashLength, indicatorRadius)) {
+            return null;
+        }
         return {
             lineStrokeWidth,
             indicatorStrokeWidth,
@@ -317,31 +323,39 @@ export class KritzelAnchorManager {
         const snapCandidate = this.getSnapCandidate();
         if (!snapCandidate)
             return null;
-        const scale = this._core.store.state.scale;
+        if (!this.areFiniteNumbers(snapCandidate.centerX, snapCandidate.centerY, snapCandidate.lineEndpointX, snapCandidate.lineEndpointY)) {
+            return null;
+        }
+        const scale = this.getSafeScale(this._core.store.state.scale);
         const indicatorRadius = 8 / scale;
         const indicatorStrokeWidth = `${2 / scale}`;
-        const lineStrokeWidth = snapCandidate.lineStrokeWidth
-            ? `${snapCandidate.lineStrokeWidth}`
-            : `${4 / scale}`;
-        const lineStrokeWidthNum = snapCandidate.lineStrokeWidth || (4 / scale);
+        const lineStrokeWidthNum = this.areFiniteNumbers(snapCandidate.lineStrokeWidth) && snapCandidate.lineStrokeWidth > 0
+            ? snapCandidate.lineStrokeWidth
+            : (4 / scale);
+        const lineStrokeWidth = `${lineStrokeWidthNum}`;
         const dashLength = Math.max(lineStrokeWidthNum * 2, 4 / scale);
         const dashArray = `${dashLength} ${dashLength}`;
         const lineStroke = snapCandidate.lineStroke || '#000000';
-        let solidLineEndX = snapCandidate.edgeX;
-        let solidLineEndY = snapCandidate.edgeY;
+        let edgeX = this.areFiniteNumbers(snapCandidate.edgeX) ? snapCandidate.edgeX : undefined;
+        let edgeY = this.areFiniteNumbers(snapCandidate.edgeY) ? snapCandidate.edgeY : undefined;
+        let solidLineEndX = edgeX;
+        let solidLineEndY = edgeY;
         let arrowPoints;
-        if (snapCandidate.arrowOffset && snapCandidate.edgeX !== undefined && snapCandidate.edgeY !== undefined) {
-            const dx = snapCandidate.lineEndpointX - snapCandidate.edgeX;
-            const dy = snapCandidate.lineEndpointY - snapCandidate.edgeY;
+        const arrowOffset = this.areFiniteNumbers(snapCandidate.arrowOffset) && snapCandidate.arrowOffset > 0
+            ? snapCandidate.arrowOffset
+            : undefined;
+        if (arrowOffset !== undefined && edgeX !== undefined && edgeY !== undefined) {
+            const dx = snapCandidate.lineEndpointX - edgeX;
+            const dy = snapCandidate.lineEndpointY - edgeY;
             const length = Math.sqrt(dx * dx + dy * dy);
-            if (length > snapCandidate.arrowOffset) {
-                solidLineEndX = snapCandidate.edgeX + (dx / length) * snapCandidate.arrowOffset;
-                solidLineEndY = snapCandidate.edgeY + (dy / length) * snapCandidate.arrowOffset;
+            if (length > arrowOffset) {
+                solidLineEndX = edgeX + (dx / length) * arrowOffset;
+                solidLineEndY = edgeY + (dy / length) * arrowOffset;
             }
             // Calculate arrow head points
             // Direction from line endpoint to edge (arrow direction)
-            const arrowDx = snapCandidate.edgeX - snapCandidate.lineEndpointX;
-            const arrowDy = snapCandidate.edgeY - snapCandidate.lineEndpointY;
+            const arrowDx = edgeX - snapCandidate.lineEndpointX;
+            const arrowDy = edgeY - snapCandidate.lineEndpointY;
             const arrowLengthTotal = Math.sqrt(arrowDx * arrowDx + arrowDy * arrowDy);
             if (arrowLengthTotal > 0) {
                 const ux = arrowDx / arrowLengthTotal;
@@ -350,11 +364,11 @@ export class KritzelAnchorManager {
                 const px = -uy;
                 const py = ux;
                 // Arrow dimensions
-                const arrowLength = snapCandidate.arrowOffset;
+                const arrowLength = arrowOffset;
                 const arrowWidth = arrowLength; // 1:1 ratio
                 // Arrow tip at edge
-                const tipX = snapCandidate.edgeX;
-                const tipY = snapCandidate.edgeY;
+                const tipX = edgeX;
+                const tipY = edgeY;
                 // Arrow base
                 const baseX = tipX - ux * arrowLength;
                 const baseY = tipY - uy * arrowLength;
@@ -363,9 +377,31 @@ export class KritzelAnchorManager {
                 const leftY = baseY + py * arrowWidth / 2;
                 const rightX = baseX - px * arrowWidth / 2;
                 const rightY = baseY - py * arrowWidth / 2;
-                arrowPoints = `${tipX},${tipY} ${leftX},${leftY} ${rightX},${rightY}`;
+                if (this.areFiniteNumbers(tipX, tipY, leftX, leftY, rightX, rightY)) {
+                    arrowPoints = `${tipX},${tipY} ${leftX},${leftY} ${rightX},${rightY}`;
+                }
             }
         }
+        if (!this.areFiniteNumbers(indicatorRadius, lineStrokeWidthNum, dashLength)) {
+            return null;
+        }
+        const snapLinePath = (() => {
+            if (snapCandidate.controlX !== undefined &&
+                snapCandidate.controlY !== undefined &&
+                snapCandidate.t !== undefined &&
+                this.areFiniteNumbers(snapCandidate.controlX, snapCandidate.controlY, snapCandidate.t)) {
+                const startT = snapCandidate.endpoint === 'start' ? 1 - snapCandidate.t : snapCandidate.t;
+                // Ensure meaningful range
+                if (startT >= 1)
+                    return undefined;
+                const segment = this.extractQuadraticSegment({ x: snapCandidate.lineEndpointX, y: snapCandidate.lineEndpointY }, { x: snapCandidate.controlX, y: snapCandidate.controlY }, { x: snapCandidate.centerX, y: snapCandidate.centerY }, startT, 1);
+                if (!this.areFiniteNumbers(segment.start.x, segment.start.y, segment.control.x, segment.control.y, segment.end.x, segment.end.y)) {
+                    return undefined;
+                }
+                return `M ${segment.start.x} ${segment.start.y} Q ${segment.control.x} ${segment.control.y} ${segment.end.x} ${segment.end.y}`;
+            }
+            return undefined;
+        })();
         return {
             indicatorRadius,
             indicatorStrokeWidth,
@@ -376,27 +412,15 @@ export class KritzelAnchorManager {
             centerY: snapCandidate.centerY,
             lineEndpointX: snapCandidate.lineEndpointX,
             lineEndpointY: snapCandidate.lineEndpointY,
-            edgeX: snapCandidate.edgeX,
-            edgeY: snapCandidate.edgeY,
-            arrowOffset: snapCandidate.arrowOffset,
+            edgeX,
+            edgeY,
+            arrowOffset,
             arrowStyle: snapCandidate.arrowStyle,
             arrowFill: snapCandidate.arrowFill,
             solidLineEndX,
             solidLineEndY,
             arrowPoints,
-            snapLinePath: (() => {
-                if (snapCandidate.controlX !== undefined &&
-                    snapCandidate.controlY !== undefined &&
-                    snapCandidate.t !== undefined) {
-                    const startT = snapCandidate.endpoint === 'start' ? 1 - snapCandidate.t : snapCandidate.t;
-                    // Ensure meaningful range
-                    if (startT >= 1)
-                        return undefined;
-                    const segment = this.extractQuadraticSegment({ x: snapCandidate.lineEndpointX, y: snapCandidate.lineEndpointY }, { x: snapCandidate.controlX, y: snapCandidate.controlY }, { x: snapCandidate.centerX, y: snapCandidate.centerY }, startT, 1);
-                    return `M ${segment.start.x} ${segment.start.y} Q ${segment.control.x} ${segment.control.y} ${segment.end.x} ${segment.end.y}`;
-                }
-                return undefined;
-            })(),
+            snapLinePath,
         };
     }
     // ============================================
@@ -574,12 +598,19 @@ export class KritzelAnchorManager {
             return null;
         const centerX = targetObject.centerX;
         const centerY = targetObject.centerY;
+        if (!this.areFiniteNumbers(clipInfo.worldX, clipInfo.worldY, centerX, centerY)) {
+            return null;
+        }
+        const pathD = this.buildAnchorPath(line, endpoint, clipInfo, targetObject) ?? undefined;
+        if (pathD && !this.isFinitePathData(pathD)) {
+            return null;
+        }
         return {
             edgeX: clipInfo.worldX,
             edgeY: clipInfo.worldY,
             centerX,
             centerY,
-            pathD: this.buildAnchorPath(line, endpoint, clipInfo, targetObject) ?? undefined,
+            pathD,
         };
     }
     /**
@@ -1292,9 +1323,10 @@ export class KritzelAnchorManager {
         const sin = Math.sin(line.rotation);
         const rotatedX = (px - cx) * cos - (py - cy) * sin + cx;
         const rotatedY = (px - cx) * sin + (py - cy) * cos + cy;
+        const safeLineScale = this.getSafeScale(line.scale);
         return {
-            x: rotatedX / line.scale + line.translateX,
-            y: rotatedY / line.scale + line.translateY,
+            x: rotatedX / safeLineScale + line.translateX,
+            y: rotatedY / safeLineScale + line.translateY,
         };
     }
     /**
@@ -1308,8 +1340,9 @@ export class KritzelAnchorManager {
      * @returns Object with x and y coordinates in the line's local SVG space.
      */
     lineWorldToLocal(line, worldX, worldY) {
-        const dx = (worldX - line.translateX) * line.scale;
-        const dy = (worldY - line.translateY) * line.scale;
+        const safeLineScale = this.getSafeScale(line.scale);
+        const dx = (worldX - line.translateX) * safeLineScale;
+        const dy = (worldY - line.translateY) * safeLineScale;
         const cx = line.totalWidth / 2;
         const cy = line.totalHeight / 2;
         const cos = Math.cos(-line.rotation);
@@ -1321,6 +1354,30 @@ export class KritzelAnchorManager {
             y: rotatedY + line.y,
         };
     }
+    getSafeScale(scale) {
+        if (Number.isFinite(scale) && Math.abs(scale) > 1e-6) {
+            return scale;
+        }
+        return 1;
+    }
+    areFiniteNumbers(...values) {
+        return values.every(value => value !== undefined && Number.isFinite(value));
+    }
+    isFiniteAnchorVisualization(visualization) {
+        if (!visualization) {
+            return false;
+        }
+        if (!this.areFiniteNumbers(visualization.edgeX, visualization.edgeY, visualization.centerX, visualization.centerY)) {
+            return false;
+        }
+        if (visualization.pathD && !this.isFinitePathData(visualization.pathD)) {
+            return false;
+        }
+        return true;
+    }
+    isFinitePathData(pathD) {
+        return !pathD.includes('Infinity') && !pathD.includes('NaN');
+    }
     /**
      * Checks if an object can be used as an anchor target.
      * Excludes selection-related objects (SelectionBox, SelectionGroup) and

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

@@ -28,6 +28,7 @@ export class KritzelBaseObject {
     rotation = 0;
     markedForRemoval = false;
     zIndex = 0;
+    userId;
     /** Whether the object is currently visible on the canvas */
     isVisible = true;
     isSelected = false;
@@ -208,6 +209,7 @@ export class KritzelBaseObject {
         object._core = core;
         object.zIndex = core.store.currentZIndex;
         object.workspaceId = core.store.state.activeWorkspace.id;
+        object.userId = core.user?.id;
         return object;
     }
     /**

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

@@ -49,6 +49,7 @@ export class KritzelCustomElement extends KritzelBaseObject {
         object._core = core;
         object.id = object.generateId();
         object.workspaceId = core.store.state.activeWorkspace.id;
+        object.userId = core.user?.id;
         return object;
     }
     /**

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

@@ -70,6 +70,7 @@ export class KritzelGroup extends KritzelBaseObject {
         group._core = core;
         group.id = group.generateId();
         group.workspaceId = core.store.state.activeWorkspace.id;
+        group.userId = core.user?.id;
         group.scale = core.store.state.scale;
         group.zIndex = core.store.currentZIndex;
         return group;

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

@@ -40,6 +40,7 @@ export class KritzelImage extends KritzelBaseObject {
         object._core = core;
         object.id = object.generateId();
         object.workspaceId = core.store.state.activeWorkspace.id;
+        object.userId = core.user?.id;
         object.x = 0;
         object.y = 0;
         object.translateX = 0;

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

@@ -80,6 +80,7 @@ export class KritzelLine extends KritzelBaseObject {
         object._core = core;
         object.id = object.generateId();
         object.workspaceId = core.store.state.activeWorkspace.id;
+        object.userId = core.user?.id;
         object.options = options;
         object.startX = options?.startX ?? 0;
         object.startY = options?.startY ?? 0;

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

@@ -62,6 +62,7 @@ export class KritzelPath extends KritzelBaseObject {
         object._core = core;
         object.id = object.generateId();
         object.workspaceId = core.store.state.activeWorkspace.id;
+        object.userId = core.user?.id;
         object.options = options;
         object.points = options?.points ?? [];
         object.translateX = options?.translateX ?? 0;

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

@@ -19,6 +19,7 @@ export class KritzelSelectionBox extends KritzelBaseObject {
         object._core = core;
         object.id = object.generateId();
         object.workspaceId = core.store.state.activeWorkspace.id;
+        object.userId = core.user?.id;
         object.scale = core.store.state.scale;
         object.zIndex = 99999;
         object.backgroundColor = { light: 'rgba(0, 122, 255, 0.2)', dark: 'rgba(0, 122, 255, 0.2)' };

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

@@ -24,6 +24,10 @@ export class KritzelSelectionGroup extends KritzelBaseObject {
     maxX;
     minY;
     maxY;
+    // Selection styling properties
+    handleColor;
+    handleStrokeColor;
+    handleSize = 6;
     /**
      * Gets the array of object IDs contained in this selection group.
      * @returns Array of string IDs for the selected objects
@@ -78,6 +82,7 @@ export class KritzelSelectionGroup extends KritzelBaseObject {
     /**
      * Factory method to create a new KritzelSelectionGroup instance.
      * Initializes the selection group with default properties and associates it with the core instance.
+     * Default styling uses values from the theme system (selection section).
      * @param core - The KritzelCore instance to associate with this selection group
      * @returns A new KritzelSelectionGroup instance configured with default settings
      */
@@ -86,8 +91,15 @@ export class KritzelSelectionGroup extends KritzelBaseObject {
         object._core = core;
         object.id = object.generateId();
         object.workspaceId = core.store.state.activeWorkspace.id;
+        object.userId = core.user?.id;
         object.scale = core.store.state.scale;
         object.zIndex = 99999;
+        // Initialize styling with theme-aware defaults
+        object.borderColor = { light: '#007AFF', dark: '#0A84FF' };
+        object.borderWidth = 2;
+        object.handleColor = { light: '#ffffff', dark: '#1a1a1a' };
+        object.handleStrokeColor = { light: '#007AFF', dark: '#0A84FF' };
+        object.handleSize = 6;
         return object;
     }
     /**
@@ -253,7 +265,7 @@ export class KritzelSelectionGroup extends KritzelBaseObject {
      * @returns A serializable object representation of the selection group
      */
     serialize() {
-        const { _core, _elementRef, element, totalWidth, totalHeight, unchangedObjectSnapshots, _cachedObjects, _cachedObjectIdsHash, snapshotWidth, snapshotHeight, snapshotTranslateX, snapshotTranslateY, ...remainingProps } = this;
+        const { _core, _elementRef, element, totalWidth, totalHeight, unchangedObjectSnapshots, _cachedObjects, _cachedObjectIdsHash, snapshotWidth, snapshotHeight, snapshotTranslateX, snapshotTranslateY, snapshotRotation, ...remainingProps } = this;
         const clonedProps = structuredClone(remainingProps);
         // Ensure objectIds is serialized with the correct key name (getter returns _objectIds)
         clonedProps.objectIds = this.objectIds;

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

@@ -100,6 +100,7 @@ export class KritzelShape extends KritzelBaseObject {
         object._core = core;
         object.id = object.generateId();
         object.workspaceId = core.store.state.activeWorkspace.id;
+        object.userId = core.user?.id;
         object.x = config?.x ?? 0;
         object.y = config?.y ?? 0;
         object.translateX = config?.translateX ?? 0;

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

@@ -116,6 +116,7 @@ export class KritzelText extends KritzelBaseObject {
         object._core = core;
         object.id = object.generateId();
         object.workspaceId = core.store.state.activeWorkspace.id;
+        object.userId = core.user?.id;
         object.fontSize = fontSize;
         object.fontFamily = fontFamily;
         object.translateX = 0;

package/dist/collection/classes/providers/broadcast-sync-provider.class.js

@@ -6,6 +6,7 @@ import * as decoding from "lib0/decoding";
  * This is a lightweight alternative to y-webrtc for browser-tab-only sync
  */
 export class BroadcastSyncProvider {
+    type = 'local';
     doc;
     channel;
     _synced = false;
@@ -87,6 +88,10 @@ export class BroadcastSyncProvider {
     disconnect() {
         // BroadcastChannel doesn't have explicit disconnect
     }
+    async reconnect() {
+        this.disconnect();
+        return this.connect();
+    }
     destroy() {
         this.doc.off('update', this.handleDocUpdate);
         this.channel.close();