kritzel-stencil 0.3.24 → 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.
@@ -199,15 +207,35 @@ export class KritzelAnchorManager {
     // Snap Detection
     // ============================================
     /**
-     * Finds the nearest object that can be snapped to within the snap threshold.
+     * Finds an object that can be snapped to when the cursor is sufficiently close to its center.
+     * Snap is only triggered when the cursor is inside the object's bounds AND within 1/5 of the
+     * shorter side from the center, so snapping activates only as the user approaches the center
+     * and releases quickly as they move away.
      * Returns null if no suitable snap target is found.
      *
      * @param worldX - X coordinate in world space
      * @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) {
+    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.
+     */
+    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;
@@ -227,20 +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)) {
-                // If inside, 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.
@@ -251,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.
      *
@@ -259,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.
@@ -267,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
     // ============================================
@@ -320,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;
@@ -354,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;
@@ -386,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;
                 }
@@ -408,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/managers/clipboard.manager.js

@@ -103,6 +103,7 @@ export class KritzelClipboardManager {
      */
     regenerateIdsAndRemapAnchors(topLevel) {
         const all = [];
+        const hasOnlyTopLevelLines = topLevel.length > 0 && topLevel.every(object => KritzelClassHelper.isInstanceOf(object, 'KritzelLine'));
         const collect = (objects) => {
             for (const object of objects) {
                 all.push(object);
@@ -127,9 +128,15 @@ export class KritzelClipboardManager {
                 if (object.startAnchor && idMap.has(object.startAnchor.objectId)) {
                     object.startAnchor = { objectId: idMap.get(object.startAnchor.objectId) };
                 }
+                else if (hasOnlyTopLevelLines) {
+                    object.startAnchor = undefined;
+                }
                 if (object.endAnchor && idMap.has(object.endAnchor.objectId)) {
                     object.endAnchor = { objectId: idMap.get(object.endAnchor.objectId) };
                 }
+                else if (hasOnlyTopLevelLines) {
+                    object.endAnchor = undefined;
+                }
             }
         }
     }