kritzel-stencil 0.3.25 → 0.3.26

package/dist/collection/classes/handlers/line-handle.handler.js

@@ -47,6 +47,7 @@ export class KritzelLineHandleHandler extends KritzelBaseHandler {
         this.hasMoved = false;
         this.currentSnapTarget = null;
         this._core.anchorManager.clearSnapCandidate();
+        this._core.anchorManager.clearSnapPreviewCandidate();
     }
     /**
      * Handles pointer down events to initiate line handle dragging.
@@ -149,15 +150,19 @@ export class KritzelLineHandleHandler extends KritzelBaseHandler {
             const worldY = (clientY - this._core.store.state.translateY) / viewportScale;
             // Get other endpoint's anchor to prevent anchoring both to same object
             const otherAnchorId = line.endAnchor?.objectId;
+            const previewTarget = this._core.anchorManager.findSnapPreviewTarget(worldX, worldY, line.id, otherAnchorId);
             // Check for snap target
-            const snapTarget = this._core.anchorManager.findSnapTarget(worldX, worldY, line.id, otherAnchorId);
+            const snapTarget = this._core.anchorManager.findSnapTarget(worldX, worldY, line.id, otherAnchorId, event.pointerType);
             this.currentSnapTarget = snapTarget;
+            const otherEndpointWorld = this.lineLocalToWorld(line, this.initialEndX, this.initialEndY);
+            let controlWorld = undefined;
+            if (line.controlX !== undefined && line.controlY !== undefined) {
+                controlWorld = this.lineLocalToWorld(line, line.controlX, line.controlY);
+            }
             if (snapTarget) {
                 // Snap to target center - convert world coords to local
                 const localCoords = this.worldToLineLocal(line, snapTarget.centerX, snapTarget.centerY);
                 this.updateLineEndpoint(line, localCoords.x, localCoords.y, this.initialEndX, this.initialEndY);
-                // Get the other endpoint's world position for edge intersection calculation
-                const otherEndpointWorld = this.lineLocalToWorld(line, this.initialEndX, this.initialEndY);
                 // Calculate edge intersection point using AnchorManager to support curves
                 const targetObject = this._core.store.allNonSelectionObjects.find(obj => obj.id === snapTarget.objectId);
                 let edgeX;
@@ -171,30 +176,16 @@ export class KritzelLineHandleHandler extends KritzelBaseHandler {
                         t = clipInfo.t;
                     }
                 }
-                // Calculate control point in world coordinates if it exists
-                let controlWorld = undefined;
-                if (line.controlX !== undefined && line.controlY !== undefined) {
-                    controlWorld = this.lineLocalToWorld(line, line.controlX, line.controlY);
-                }
                 // Update snap indicator
-                this._core.anchorManager.setSnapCandidate({
-                    objectId: snapTarget.objectId,
-                    endpoint: 'start',
-                    centerX: snapTarget.centerX,
-                    centerY: snapTarget.centerY,
-                    lineEndpointX: otherEndpointWorld.x,
-                    lineEndpointY: otherEndpointWorld.y,
-                    controlX: controlWorld?.x,
-                    controlY: controlWorld?.y,
-                    t,
-                    edgeX,
-                    edgeY,
-                    lineStroke: KritzelColorHelper.resolveThemeColor(line.stroke),
-                    lineStrokeWidth: line.strokeWidth / line.scale,
-                    arrowOffset: line.hasStartArrow ? line.getArrowSize('start') / line.scale : undefined,
-                    arrowStyle: line.hasStartArrow ? line.arrows?.start?.style : undefined,
-                    arrowFill: line.hasStartArrow ? line.getArrowFill('start') : undefined,
-                });
+                this._core.anchorManager.setSnapPreviewCandidate(null);
+                this._core.anchorManager.setSnapCandidate(this.createIndicatorCandidate(line, 'start', snapTarget, otherEndpointWorld, controlWorld, { edgeX, edgeY, t }));
+            }
+            else if (previewTarget) {
+                const newStartX = this.initialStartX + localDx;
+                const newStartY = this.initialStartY + localDy;
+                this.updateLineEndpoint(line, newStartX, newStartY, this.initialEndX, this.initialEndY);
+                this._core.anchorManager.clearSnapCandidate();
+                this._core.anchorManager.setSnapPreviewCandidate(this.createIndicatorCandidate(line, 'start', previewTarget, otherEndpointWorld, controlWorld));
             }
             else {
                 // No snap - use regular position
@@ -203,6 +194,7 @@ export class KritzelLineHandleHandler extends KritzelBaseHandler {
                 this.updateLineEndpoint(line, newStartX, newStartY, this.initialEndX, this.initialEndY);
                 // Clear snap indicator
                 this._core.anchorManager.clearSnapCandidate();
+                this._core.anchorManager.clearSnapPreviewCandidate();
             }
         }
         else if (handleType === 'end') {
@@ -211,15 +203,19 @@ export class KritzelLineHandleHandler extends KritzelBaseHandler {
             const worldY = (clientY - this._core.store.state.translateY) / viewportScale;
             // Get other endpoint's anchor to prevent anchoring both to same object
             const otherAnchorId = line.startAnchor?.objectId;
+            const previewTarget = this._core.anchorManager.findSnapPreviewTarget(worldX, worldY, line.id, otherAnchorId);
             // Check for snap target
-            const snapTarget = this._core.anchorManager.findSnapTarget(worldX, worldY, line.id, otherAnchorId);
+            const snapTarget = this._core.anchorManager.findSnapTarget(worldX, worldY, line.id, otherAnchorId, event.pointerType);
             this.currentSnapTarget = snapTarget;
+            const otherEndpointWorld = this.lineLocalToWorld(line, this.initialStartX, this.initialStartY);
+            let controlWorld = undefined;
+            if (line.controlX !== undefined && line.controlY !== undefined) {
+                controlWorld = this.lineLocalToWorld(line, line.controlX, line.controlY);
+            }
             if (snapTarget) {
                 // Snap to target center - convert world coords to local
                 const localCoords = this.worldToLineLocal(line, snapTarget.centerX, snapTarget.centerY);
                 this.updateLineEndpoint(line, this.initialStartX, this.initialStartY, localCoords.x, localCoords.y);
-                // Get the other endpoint's world position for edge intersection calculation
-                const otherEndpointWorld = this.lineLocalToWorld(line, this.initialStartX, this.initialStartY);
                 // Calculate edge intersection point using AnchorManager to support curves
                 const targetObject = this._core.store.allNonSelectionObjects.find(obj => obj.id === snapTarget.objectId);
                 let edgeX;
@@ -233,30 +229,16 @@ export class KritzelLineHandleHandler extends KritzelBaseHandler {
                         t = clipInfo.t;
                     }
                 }
-                // Calculate control point in world coordinates if it exists
-                let controlWorld = undefined;
-                if (line.controlX !== undefined && line.controlY !== undefined) {
-                    controlWorld = this.lineLocalToWorld(line, line.controlX, line.controlY);
-                }
                 // Update snap indicator
-                this._core.anchorManager.setSnapCandidate({
-                    objectId: snapTarget.objectId,
-                    endpoint: 'end',
-                    centerX: snapTarget.centerX,
-                    centerY: snapTarget.centerY,
-                    lineEndpointX: otherEndpointWorld.x,
-                    lineEndpointY: otherEndpointWorld.y,
-                    controlX: controlWorld?.x,
-                    controlY: controlWorld?.y,
-                    t,
-                    edgeX,
-                    edgeY,
-                    lineStroke: KritzelColorHelper.resolveThemeColor(line.stroke),
-                    lineStrokeWidth: line.strokeWidth / line.scale,
-                    arrowOffset: line.hasEndArrow ? line.getArrowSize('end') / line.scale : undefined,
-                    arrowStyle: line.hasEndArrow ? line.arrows?.end?.style : undefined,
-                    arrowFill: line.hasEndArrow ? line.getArrowFill('end') : undefined,
-                });
+                this._core.anchorManager.setSnapPreviewCandidate(null);
+                this._core.anchorManager.setSnapCandidate(this.createIndicatorCandidate(line, 'end', snapTarget, otherEndpointWorld, controlWorld, { edgeX, edgeY, t }));
+            }
+            else if (previewTarget) {
+                const newEndX = this.initialEndX + localDx;
+                const newEndY = this.initialEndY + localDy;
+                this.updateLineEndpoint(line, this.initialStartX, this.initialStartY, newEndX, newEndY);
+                this._core.anchorManager.clearSnapCandidate();
+                this._core.anchorManager.setSnapPreviewCandidate(this.createIndicatorCandidate(line, 'end', previewTarget, otherEndpointWorld, controlWorld));
             }
             else {
                 // No snap - use regular position
@@ -265,9 +247,12 @@ export class KritzelLineHandleHandler extends KritzelBaseHandler {
                 this.updateLineEndpoint(line, this.initialStartX, this.initialStartY, newEndX, newEndY);
                 // Clear snap indicator
                 this._core.anchorManager.clearSnapCandidate();
+                this._core.anchorManager.clearSnapPreviewCandidate();
             }
         }
         else if (handleType === 'center') {
+            this._core.anchorManager.clearSnapPreviewCandidate();
+            this._core.anchorManager.clearSnapCandidate();
             const startControlX = this.initialControlX ?? (this.initialStartX + this.initialEndX) / 2;
             const startControlY = this.initialControlY ?? (this.initialStartY + this.initialEndY) / 2;
             const newControlX = startControlX + localDx * 2;
@@ -463,4 +448,26 @@ export class KritzelLineHandleHandler extends KritzelBaseHandler {
         }
         return null;
     }
+    createIndicatorCandidate(line, endpoint, target, otherEndpointWorld, controlWorld, clipInfo) {
+        return {
+            objectId: target.objectId,
+            endpoint,
+            centerX: target.centerX,
+            centerY: target.centerY,
+            lineEndpointX: otherEndpointWorld.x,
+            lineEndpointY: otherEndpointWorld.y,
+            controlX: controlWorld?.x,
+            controlY: controlWorld?.y,
+            t: clipInfo?.t,
+            edgeX: clipInfo?.edgeX,
+            edgeY: clipInfo?.edgeY,
+            lineStroke: KritzelColorHelper.resolveThemeColor(line.stroke),
+            lineStrokeWidth: line.strokeWidth / line.scale,
+            arrowOffset: endpoint === 'start'
+                ? (line.hasStartArrow ? line.getArrowSize('start') / line.scale : undefined)
+                : (line.hasEndArrow ? line.getArrowSize('end') / line.scale : undefined),
+            arrowStyle: endpoint === 'start' ? line.arrows?.start?.style : line.arrows?.end?.style,
+            arrowFill: endpoint === 'start' ? line.getArrowFill('start') : line.getArrowFill('end'),
+        };
+    }
 }

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

@@ -211,6 +211,7 @@ export class KritzelMoveHandler extends KritzelBaseHandler {
                 this._core.store.state.isDragging = false;
                 if (this.hasMoved) {
                     this._core.store.selectionGroup.persistChildren();
+                    this._core.store.selectionGroup.refreshObjectDimensions(undefined, false);
                     this._core.store.selectionGroup.update();
                     this._core.engine.emitObjectsChange();
                     this._core.store.state.hasObjectsChanged = true;
@@ -223,6 +224,7 @@ export class KritzelMoveHandler extends KritzelBaseHandler {
                 this._core.store.state.isDragging = false;
                 if (this.hasMoved) {
                     this._core.store.selectionGroup.persistChildren();
+                    this._core.store.selectionGroup.refreshObjectDimensions(undefined, false);
                     this._core.store.selectionGroup.update();
                     this._core.engine.emitObjectsChange();
                     this._core.store.state.hasObjectsChanged = true;

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

@@ -12,6 +12,10 @@ export class KritzelRotationHandler extends KritzelBaseHandler {
     rotation = 0;
     /** The rotation value of the selection group before the current rotation operation began. */
     initialSelectionGroupRotation = 0;
+    /** The X coordinate of the rotation pivot (group center) captured when rotation starts, in world space. */
+    initialCenterX = 0;
+    /** The Y coordinate of the rotation pivot (group center) captured when rotation starts, in world space. */
+    initialCenterY = 0;
     /**
      * Creates an instance of KritzelRotationHandler.
      * @param core - The KritzelCore instance that provides access to the store, engine, and other core functionalities.
@@ -26,6 +30,8 @@ export class KritzelRotationHandler extends KritzelBaseHandler {
     reset() {
         this.initialRotation = 0;
         this.rotation = 0;
+        this.initialCenterX = 0;
+        this.initialCenterY = 0;
     }
     /**
      * Handles the pointer down event to initiate a rotation operation.
@@ -45,6 +51,10 @@ export class KritzelRotationHandler extends KritzelBaseHandler {
                     const objectScale = selectionGroup.scale || 1;
                     const centerX = selectionGroup.translateX + selectionGroup.width / 2 / objectScale;
                     const centerY = selectionGroup.translateY + selectionGroup.height / 2 / objectScale;
+                    // Capture the pivot once so it stays fixed even if the bounding box grows
+                    // mid-rotation (e.g. a line anchored to an object outside the selection).
+                    this.initialCenterX = centerX;
+                    this.initialCenterY = centerY;
                     const cursorX = (clientX - this._core.store.state.translateX) / this._core.store.state.scale;
                     const cursorY = (clientY - this._core.store.state.translateY) / this._core.store.state.scale;
                     this.initialSelectionGroupRotation = selectionGroup.rotation;
@@ -68,6 +78,10 @@ export class KritzelRotationHandler extends KritzelBaseHandler {
                     const objectScale = selectionGroup.scale || 1;
                     const centerX = selectionGroup.translateX + selectionGroup.width / 2 / objectScale;
                     const centerY = selectionGroup.translateY + selectionGroup.height / 2 / objectScale;
+                    // Capture the pivot once so it stays fixed even if the bounding box grows
+                    // mid-rotation (e.g. a line anchored to an object outside the selection).
+                    this.initialCenterX = centerX;
+                    this.initialCenterY = centerY;
                     const cursorX = (clientX - this._core.store.state.translateX) / this._core.store.state.scale;
                     const cursorY = (clientY - this._core.store.state.translateY) / this._core.store.state.scale;
                     this.initialSelectionGroupRotation = selectionGroup.rotation;
@@ -92,9 +106,8 @@ export class KritzelRotationHandler extends KritzelBaseHandler {
             if (this._core.store.state.isRotating && selectionGroup) {
                 const clientX = event.clientX - this._core.store.offsetX;
                 const clientY = event.clientY - this._core.store.offsetY;
-                const objectScale = selectionGroup.scale || 1;
-                const groupCenterX = selectionGroup.translateX + selectionGroup.width / 2 / objectScale;
-                const groupCenterY = selectionGroup.translateY + selectionGroup.height / 2 / objectScale;
+                const groupCenterX = this.initialCenterX;
+                const groupCenterY = this.initialCenterY;
                 const cursorX = (clientX - this._core.store.state.translateX) / this._core.store.state.scale;
                 const cursorY = (clientY - this._core.store.state.translateY) / this._core.store.state.scale;
                 const currentRotation = Math.atan2(groupCenterY - cursorY, groupCenterX - cursorX);
@@ -112,9 +125,8 @@ export class KritzelRotationHandler extends KritzelBaseHandler {
             if (this._core.store.state.isRotating && selectionGroup) {
                 const clientX = Math.round(firstTouch.clientX - this._core.store.offsetX);
                 const clientY = Math.round(firstTouch.clientY - this._core.store.offsetY);
-                const objectScale = selectionGroup.scale || 1;
-                const groupCenterX = selectionGroup.translateX + selectionGroup.width / 2 / objectScale;
-                const groupCenterY = selectionGroup.translateY + selectionGroup.height / 2 / objectScale;
+                const groupCenterX = this.initialCenterX;
+                const groupCenterY = this.initialCenterY;
                 const cursorX = (clientX - this._core.store.state.translateX) / this._core.store.state.scale;
                 const cursorY = (clientY - this._core.store.state.translateY) / this._core.store.state.scale;
                 const currentRotation = Math.atan2(groupCenterY - cursorY, groupCenterX - cursorX);

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

@@ -143,6 +143,14 @@ export class KritzelAnchorManager {
             }
             this.snapEndpointToObject(line, entry.endpoint, objectId);
         }
+        const selectionGroup = this._core.store.selectionGroup;
+        if (!selectionGroup || !this._core.store.state.isDragging) {
+            return;
+        }
+        if (selectionGroup.hasExternalAnchoredLineConnections()) {
+            // Keep the local drag overlay aligned with reshaped anchored lines without spamming Yjs.
+            selectionGroup.refreshObjectDimensions(undefined, true);
+        }
     }
     /**
      * Snaps a line endpoint to an object's center position.
@@ -209,8 +217,25 @@ export class KritzelAnchorManager {
      * @param worldY - Y coordinate in world space
      * @param excludeLineId - ID of the line being edited (to exclude from snap targets)
      * @param otherEndpointAnchorId - ID of object anchored to the other endpoint (to prevent same-object anchoring)
+     * @param pointerType - The pointer type driving the drag interaction.
+     */
+    findSnapTarget(worldX, worldY, excludeLineId, otherEndpointAnchorId, pointerType = 'mouse') {
+        return this.findBestSnapTarget(worldX, worldY, excludeLineId, otherEndpointAnchorId, object => {
+            const snapRadius = this.getSnapRadius(object, pointerType);
+            const dx = worldX - object.centerX;
+            const dy = worldY - object.centerY;
+            const distanceToCenter = Math.sqrt(dx * dx + dy * dy);
+            return distanceToCenter <= snapRadius;
+        });
+    }
+    /**
+     * Finds the topmost anchorable object currently containing the dragged endpoint.
+     * Used to drive preview UI before an actual snap engages.
      */
-    findSnapTarget(worldX, worldY, excludeLineId, otherEndpointAnchorId) {
+    findSnapPreviewTarget(worldX, worldY, excludeLineId, otherEndpointAnchorId) {
+        return this.findBestSnapTarget(worldX, worldY, excludeLineId, otherEndpointAnchorId, () => true);
+    }
+    findBestSnapTarget(worldX, worldY, excludeLineId, otherEndpointAnchorId, predicate) {
         let bestTarget = null;
         let highestZIndex = -Infinity;
         const objects = this._core.store.allNonSelectionObjects;
@@ -230,28 +255,30 @@ export class KritzelAnchorManager {
             // Check if point is inside the object's rotated polygon
             const polygon = object.rotatedPolygon;
             const points = [polygon.topLeft, polygon.topRight, polygon.bottomRight, polygon.bottomLeft];
-            if (KritzelGeometryHelper.isPointInPolygon({ x: worldX, y: worldY }, points)) {
-                // Only snap when the cursor is near the object's center (within 1/5 of the shorter side)
-                const snapRadius = Math.min(object.width, object.height) / 5;
-                const dx = worldX - object.centerX;
-                const dy = worldY - object.centerY;
-                const distanceToCenter = Math.sqrt(dx * dx + dy * dy);
-                if (distanceToCenter > snapRadius) {
-                    continue;
-                }
-                // If inside and close enough to center, check if this object is "above" the current best target
-                if (object.zIndex > highestZIndex) {
-                    highestZIndex = object.zIndex;
-                    bestTarget = {
-                        objectId: object.id,
-                        centerX: object.centerX,
-                        centerY: object.centerY,
-                    };
-                }
+            if (!KritzelGeometryHelper.isPointInPolygon({ x: worldX, y: worldY }, points)) {
+                continue;
+            }
+            if (!predicate(object)) {
+                continue;
+            }
+            if (object.zIndex > highestZIndex) {
+                highestZIndex = object.zIndex;
+                bestTarget = {
+                    objectId: object.id,
+                    centerX: object.centerX,
+                    centerY: object.centerY,
+                };
             }
         }
         return bestTarget;
     }
+    getSnapRadius(object, pointerType) {
+        const baseRadius = Math.min(object.width, object.height) / 5;
+        if (pointerType === 'touch' || pointerType === 'pen') {
+            return Math.max(baseRadius * 1.75, 24 / this.getSafeScale(this._core.store.state.scale));
+        }
+        return baseRadius;
+    }
     /**
      * Sets the current snap candidate for visual feedback during line endpoint dragging.
      * Updates the store state and triggers a rerender to show the snap indicator.
@@ -262,6 +289,17 @@ export class KritzelAnchorManager {
         this._core.store.state.snapCandidate = candidate;
         this._core.rerender();
     }
+    /**
+     * Sets the current snap preview candidate for early visual feedback during line dragging.
+     * Preview state must remain separate from active snap state so line clipping and anchor
+     * commit semantics only react to actual snaps.
+     *
+     * @param candidate - The preview candidate object, or null to clear.
+     */
+    setSnapPreviewCandidate(candidate) {
+        this._core.store.state.snapPreviewCandidate = candidate;
+        this._core.rerender();
+    }
     /**
      * Gets the current snap candidate from the store state.
      *
@@ -270,6 +308,14 @@ export class KritzelAnchorManager {
     getSnapCandidate() {
         return this._core.store.state.snapCandidate ?? null;
     }
+    /**
+     * Gets the current snap preview candidate from the store state.
+     *
+     * @returns The current preview candidate if one exists, null otherwise.
+     */
+    getSnapPreviewCandidate() {
+        return this._core.store.state.snapPreviewCandidate ?? null;
+    }
     /**
      * Clears the snap candidate from the store state and triggers a rerender.
      * Should be called when snapping is cancelled or completed.
@@ -278,6 +324,13 @@ export class KritzelAnchorManager {
         this._core.store.state.snapCandidate = null;
         this._core.rerender();
     }
+    /**
+     * Clears the snap preview candidate from the store state and triggers a rerender.
+     */
+    clearSnapPreviewCandidate() {
+        this._core.store.state.snapPreviewCandidate = null;
+        this._core.rerender();
+    }
     // ============================================
     // Render Data
     // ============================================
@@ -331,33 +384,43 @@ export class KritzelAnchorManager {
      *          or null if there's no active snap candidate.
      */
     getSnapIndicatorRenderData() {
-        const snapCandidate = this.getSnapCandidate();
-        if (!snapCandidate)
+        return this.getIndicatorRenderDataForCandidate(this.getSnapCandidate());
+    }
+    /**
+     * Gets render data for snap preview visualization.
+     *
+     * @returns SnapIndicatorRenderData for the active preview candidate, or null if none exists.
+     */
+    getSnapPreviewRenderData() {
+        return this.getIndicatorRenderDataForCandidate(this.getSnapPreviewCandidate());
+    }
+    getIndicatorRenderDataForCandidate(candidate) {
+        if (!candidate)
             return null;
-        if (!this.areFiniteNumbers(snapCandidate.centerX, snapCandidate.centerY, snapCandidate.lineEndpointX, snapCandidate.lineEndpointY)) {
+        if (!this.areFiniteNumbers(candidate.centerX, candidate.centerY, candidate.lineEndpointX, candidate.lineEndpointY)) {
             return null;
         }
         const scale = this.getSafeScale(this._core.store.state.scale);
         const indicatorRadius = 8 / scale;
         const indicatorStrokeWidth = `${2 / scale}`;
-        const lineStrokeWidthNum = this.areFiniteNumbers(snapCandidate.lineStrokeWidth) && snapCandidate.lineStrokeWidth > 0
-            ? snapCandidate.lineStrokeWidth
+        const lineStrokeWidthNum = this.areFiniteNumbers(candidate.lineStrokeWidth) && candidate.lineStrokeWidth > 0
+            ? candidate.lineStrokeWidth
             : (4 / scale);
         const lineStrokeWidth = `${lineStrokeWidthNum}`;
         const dashLength = Math.max(lineStrokeWidthNum * 2, 4 / scale);
         const dashArray = `${dashLength} ${dashLength}`;
-        const lineStroke = snapCandidate.lineStroke || '#000000';
-        let edgeX = this.areFiniteNumbers(snapCandidate.edgeX) ? snapCandidate.edgeX : undefined;
-        let edgeY = this.areFiniteNumbers(snapCandidate.edgeY) ? snapCandidate.edgeY : undefined;
+        const lineStroke = candidate.lineStroke || '#000000';
+        let edgeX = this.areFiniteNumbers(candidate.edgeX) ? candidate.edgeX : undefined;
+        let edgeY = this.areFiniteNumbers(candidate.edgeY) ? candidate.edgeY : undefined;
         let solidLineEndX = edgeX;
         let solidLineEndY = edgeY;
         let arrowPoints;
-        const arrowOffset = this.areFiniteNumbers(snapCandidate.arrowOffset) && snapCandidate.arrowOffset > 0
-            ? snapCandidate.arrowOffset
+        const arrowOffset = this.areFiniteNumbers(candidate.arrowOffset) && candidate.arrowOffset > 0
+            ? candidate.arrowOffset
             : undefined;
         if (arrowOffset !== undefined && edgeX !== undefined && edgeY !== undefined) {
-            const dx = snapCandidate.lineEndpointX - edgeX;
-            const dy = snapCandidate.lineEndpointY - edgeY;
+            const dx = candidate.lineEndpointX - edgeX;
+            const dy = candidate.lineEndpointY - edgeY;
             const length = Math.sqrt(dx * dx + dy * dy);
             if (length > arrowOffset) {
                 solidLineEndX = edgeX + (dx / length) * arrowOffset;
@@ -365,8 +428,8 @@ export class KritzelAnchorManager {
             }
             // Calculate arrow head points
             // Direction from line endpoint to edge (arrow direction)
-            const arrowDx = edgeX - snapCandidate.lineEndpointX;
-            const arrowDy = edgeY - snapCandidate.lineEndpointY;
+            const arrowDx = edgeX - candidate.lineEndpointX;
+            const arrowDy = edgeY - candidate.lineEndpointY;
             const arrowLengthTotal = Math.sqrt(arrowDx * arrowDx + arrowDy * arrowDy);
             if (arrowLengthTotal > 0) {
                 const ux = arrowDx / arrowLengthTotal;
@@ -397,15 +460,15 @@ export class KritzelAnchorManager {
             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;
+            if (candidate.controlX !== undefined &&
+                candidate.controlY !== undefined &&
+                candidate.t !== undefined &&
+                this.areFiniteNumbers(candidate.controlX, candidate.controlY, candidate.t)) {
+                const startT = candidate.endpoint === 'start' ? 1 - candidate.t : candidate.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);
+                const segment = this.extractQuadraticSegment({ x: candidate.lineEndpointX, y: candidate.lineEndpointY }, { x: candidate.controlX, y: candidate.controlY }, { x: candidate.centerX, y: candidate.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;
                 }
@@ -419,15 +482,15 @@ export class KritzelAnchorManager {
             lineStrokeWidth,
             dashArray,
             lineStroke,
-            centerX: snapCandidate.centerX,
-            centerY: snapCandidate.centerY,
-            lineEndpointX: snapCandidate.lineEndpointX,
-            lineEndpointY: snapCandidate.lineEndpointY,
+            centerX: candidate.centerX,
+            centerY: candidate.centerY,
+            lineEndpointX: candidate.lineEndpointX,
+            lineEndpointY: candidate.lineEndpointY,
             edgeX,
             edgeY,
             arrowOffset,
-            arrowStyle: snapCandidate.arrowStyle,
-            arrowFill: snapCandidate.arrowFill,
+            arrowStyle: candidate.arrowStyle,
+            arrowFill: candidate.arrowFill,
             solidLineEndX,
             solidLineEndY,
             arrowPoints,

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

@@ -39,6 +39,8 @@ export class KritzelSelectionGroup extends KritzelBaseObject {
     _lastChildPersistTime = 0;
     /** Minimum interval (ms) between child Yjs persists during drag */
     static CHILD_PERSIST_THROTTLE_MS = 100;
+    /** Ignore tiny floating-point diffs when comparing refreshed bounds */
+    static DIMENSION_EPSILON = 0.001;
     /**
      * Gets the array of object IDs contained in this selection group.
      * @returns Array of string IDs for the selected objects
@@ -412,6 +414,30 @@ export class KritzelSelectionGroup extends KritzelBaseObject {
             }
         });
     }
+    /**
+     * Returns true when the selection contains a line anchored to an object
+     * that is not part of this selection group.
+     */
+    hasExternalAnchoredLineConnections(cachedObjects) {
+        const children = cachedObjects ?? this.objects;
+        if (children.length === 0) {
+            return false;
+        }
+        const selectedIds = new Set(children.map(child => child.id));
+        for (const child of children) {
+            if (!KritzelClassHelper.isInstanceOf(child, 'KritzelLine')) {
+                continue;
+            }
+            const line = child;
+            if (line.startAnchor && !selectedIds.has(line.startAnchor.objectId)) {
+                return true;
+            }
+            if (line.endAnchor && !selectedIds.has(line.endAnchor.objectId)) {
+                return true;
+            }
+        }
+        return false;
+    }
     /**
      * Resizes the selection group and scales all contained objects proportionally.
      * Uses snapshot values to avoid compounding errors during continuous drag operations.
@@ -504,8 +530,13 @@ export class KritzelSelectionGroup extends KritzelBaseObject {
      */
     rotate(value) {
         this.rotation = value;
-        const centerX = this.translateX + this.totalWidth / 2 / this.scale;
-        const centerY = this.translateY + this.totalHeight / 2 / this.scale;
+        // Use the snapshot center as the rotation pivot rather than the live center.
+        // refreshObjectDimensions() below can grow the box when an anchored line is pinned
+        // to an external object; keeping the pivot fixed prevents the children from drifting.
+        const snapshotTotalWidth = this.snapshotWidth + this.padding * 2;
+        const snapshotTotalHeight = this.snapshotHeight + this.padding * 2;
+        const centerX = this.snapshotTranslateX + snapshotTotalWidth / 2 / this.scale;
+        const centerY = this.snapshotTranslateY + snapshotTotalHeight / 2 / this.scale;
         const angle = value - this.snapshotRotation;
         const cos = Math.cos(angle);
         const sin = Math.sin(angle);
@@ -527,6 +558,31 @@ export class KritzelSelectionGroup extends KritzelBaseObject {
                 child.translateY = centerY + rotatedY - child.totalHeight / 2 / child.scale;
                 child.rotate(childCount === 1 ? value : unchangedSnapshot.rotation + angle);
             }
+            // Re-sync any anchored lines so their stored geometry follows the rotated objects
+            // (including lines anchored to an object outside this selection), then grow the
+            // selection box to enclose the reshaped lines. Rotation sets state.isRotating
+            // rather than state.isDragging, so the refresh must be triggered explicitly here.
+            const anchorTargetIds = new Set();
+            for (const child of children) {
+                anchorTargetIds.add(child.id);
+                if (KritzelClassHelper.isInstanceOf(child, 'KritzelLine')) {
+                    const line = child;
+                    if (line.startAnchor)
+                        anchorTargetIds.add(line.startAnchor.objectId);
+                    if (line.endAnchor)
+                        anchorTargetIds.add(line.endAnchor.objectId);
+                }
+            }
+            let hasAnchoredLines = false;
+            for (const targetId of anchorTargetIds) {
+                if (this._core.anchorManager.getLinesAnchoredTo(targetId).length > 0) {
+                    hasAnchoredLines = true;
+                    this._core.anchorManager.updateAnchorsForObject(targetId);
+                }
+            }
+            if (hasAnchoredLines) {
+                this.refreshObjectDimensions(children);
+            }
         });
     }
     /**
@@ -556,6 +612,16 @@ export class KritzelSelectionGroup extends KritzelBaseObject {
      * @param skipPersist If true, only updates local state without persisting to Yjs (used during undo/redo)
      */
     refreshObjectDimensions(cachedObjects, skipPersist = false) {
+        const previous = {
+            minX: this.minX,
+            minY: this.minY,
+            maxX: this.maxX,
+            maxY: this.maxY,
+            width: this.width,
+            height: this.height,
+            translateX: this.translateX,
+            translateY: this.translateY,
+        };
         const children = cachedObjects ?? this.objects;
         if (children.length === 1) {
             const obj = children[0];
@@ -609,9 +675,18 @@ export class KritzelSelectionGroup extends KritzelBaseObject {
             this.translateX = cx - (this.width / this.scale + 2 * this.padding) / 2;
             this.translateY = cy - (this.height / this.scale + 2 * this.padding) / 2;
         }
-        if (!skipPersist) {
+        const hasChanged = Math.abs(this.minX - previous.minX) > KritzelSelectionGroup.DIMENSION_EPSILON ||
+            Math.abs(this.minY - previous.minY) > KritzelSelectionGroup.DIMENSION_EPSILON ||
+            Math.abs(this.maxX - previous.maxX) > KritzelSelectionGroup.DIMENSION_EPSILON ||
+            Math.abs(this.maxY - previous.maxY) > KritzelSelectionGroup.DIMENSION_EPSILON ||
+            Math.abs(this.width - previous.width) > KritzelSelectionGroup.DIMENSION_EPSILON ||
+            Math.abs(this.height - previous.height) > KritzelSelectionGroup.DIMENSION_EPSILON ||
+            Math.abs(this.translateX - previous.translateX) > KritzelSelectionGroup.DIMENSION_EPSILON ||
+            Math.abs(this.translateY - previous.translateY) > KritzelSelectionGroup.DIMENSION_EPSILON;
+        if (!skipPersist && hasChanged) {
             this._core.store.objects.update(this);
         }
+        return hasChanged;
     }
     /**
      * Calculates the horizontal offset from the group's center to an object's center using snapshot data.
@@ -621,7 +696,7 @@ export class KritzelSelectionGroup extends KritzelBaseObject {
      */
     getOffsetXToCenterFromSnapshot(snapshot) {
         const objCenterX = snapshot.translateX + snapshot.totalWidth / snapshot.scale / 2;
-        const groupCenterX = this.translateX + this.totalWidth / this.scale / 2;
+        const groupCenterX = this.snapshotTranslateX + (this.snapshotWidth + this.padding * 2) / this.scale / 2;
         return objCenterX - groupCenterX;
     }
     /**
@@ -632,7 +707,7 @@ export class KritzelSelectionGroup extends KritzelBaseObject {
      */
     getOffsetYToCenterFromSnapshot(snapshot) {
         const objCenterY = snapshot.translateY + snapshot.totalHeight / snapshot.scale / 2;
-        const groupCenterY = this.translateY + this.totalHeight / this.scale / 2;
+        const groupCenterY = this.snapshotTranslateY + (this.snapshotHeight + this.padding * 2) / this.scale / 2;
         return objCenterY - groupCenterY;
     }
     /**