@elixpo/lixsketch 4.6.3 → 5.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elixpo/lixsketch",
-  "version": "4.6.3",
+  "version": "5.4.1",
   "description": "Open-source SVG whiteboard engine with hand-drawn aesthetics — the core of LixSketch",
   "type": "module",
   "main": "src/index.js",

package/src/core/EventDispatcher.js

@@ -14,6 +14,94 @@ import { handleMultiSelectionMouseDown, handleMultiSelectionMouseMove, handleMul
 import { handleMouseDownIcon, handleMouseMoveIcon, handleMouseUpIcon } from '../tools/iconTool.js';
 import { handleCodeMouseDown, handleCodeMouseMove, handleCodeMouseUp } from '../tools/codeTool.js';
 
+// === Auto-scroll when dragging near viewport edges ===
+const EDGE_THRESHOLD = 40; // px from edge to start scrolling
+const SCROLL_SPEED = 8;    // base px per frame (scaled by zoom)
+let _autoScrollRAF = null;
+
+function _autoScroll(e) {
+    if (!(e.buttons & 1)) { _stopAutoScroll(); return; } // no primary button
+    if (typeof currentViewBox === 'undefined' || typeof currentZoom === 'undefined') return;
+    if (typeof isPanning !== 'undefined' && isPanning) return; // don't fight pan tool
+    if (typeof isPanningToolActive !== 'undefined' && isPanningToolActive) return;
+
+    const rect = svg.getBoundingClientRect();
+    const mx = e.clientX - rect.left;
+    const my = e.clientY - rect.top;
+
+    let dx = 0, dy = 0;
+    if (mx < EDGE_THRESHOLD) dx = -SCROLL_SPEED * (1 - mx / EDGE_THRESHOLD);
+    else if (mx > rect.width - EDGE_THRESHOLD) dx = SCROLL_SPEED * (1 - (rect.width - mx) / EDGE_THRESHOLD);
+    if (my < EDGE_THRESHOLD) dy = -SCROLL_SPEED * (1 - my / EDGE_THRESHOLD);
+    else if (my > rect.height - EDGE_THRESHOLD) dy = SCROLL_SPEED * (1 - (rect.height - my) / EDGE_THRESHOLD);
+
+    // Also scroll when cursor is outside the canvas entirely
+    if (e.clientX < rect.left) dx = -SCROLL_SPEED;
+    else if (e.clientX > rect.right) dx = SCROLL_SPEED;
+    if (e.clientY < rect.top) dy = -SCROLL_SPEED;
+    else if (e.clientY > rect.bottom) dy = SCROLL_SPEED;
+
+    if (dx === 0 && dy === 0) { _stopAutoScroll(); return; }
+
+    // Scale speed inversely with zoom so scrolling feels consistent
+    const scale = 1 / currentZoom;
+    currentViewBox.x += dx * scale;
+    currentViewBox.y += dy * scale;
+    svg.setAttribute('viewBox', `${currentViewBox.x} ${currentViewBox.y} ${currentViewBox.width} ${currentViewBox.height}`);
+    if (typeof freehandCanvas !== 'undefined' && freehandCanvas !== svg) {
+        freehandCanvas.setAttribute('viewBox', `${currentViewBox.x} ${currentViewBox.y} ${currentViewBox.width} ${currentViewBox.height}`);
+    }
+}
+
+function _startAutoScroll() {
+    if (_autoScrollRAF) return;
+    const tick = () => {
+        if (_lastDragEvent) _autoScroll(_lastDragEvent);
+        _autoScrollRAF = requestAnimationFrame(tick);
+    };
+    _autoScrollRAF = requestAnimationFrame(tick);
+}
+
+function _stopAutoScroll() {
+    if (_autoScrollRAF) {
+        cancelAnimationFrame(_autoScrollRAF);
+        _autoScrollRAF = null;
+    }
+    _lastDragEvent = null;
+}
+
+let _lastDragEvent = null;
+let _documentDragActive = false;
+
+function _onDocumentDragMove(e) {
+    _lastDragEvent = e;
+    // Clamp mouse coordinates to SVG bounds before forwarding to tool handlers,
+    // so getSVGCoordsFromMouse doesn't produce extreme values when cursor is outside.
+    const rect = svg.getBoundingClientRect();
+    const clampedX = Math.max(rect.left, Math.min(rect.right, e.clientX));
+    const clampedY = Math.max(rect.top, Math.min(rect.bottom, e.clientY));
+    const clampedEvent = new MouseEvent(e.type, {
+        clientX: clampedX,
+        clientY: clampedY,
+        buttons: e.buttons,
+        button: e.button,
+        ctrlKey: e.ctrlKey,
+        shiftKey: e.shiftKey,
+        altKey: e.altKey,
+        metaKey: e.metaKey,
+    });
+    handleMainMouseMove(clampedEvent);
+}
+
+function _onDocumentDragUp(e) {
+    _stopAutoScroll();
+    document.removeEventListener('mousemove', _onDocumentDragMove);
+    document.removeEventListener('mouseup', _onDocumentDragUp);
+    _documentDragActive = false;
+    // Finalize the operation
+    handleMainMouseUp(e);
+}
+
 const handleMainMouseDown = (e) => {
     // Safety: remove any stray selection rectangle from a previous interrupted drag
     removeMultiSelectionRect();
@@ -156,6 +244,14 @@ const handleMainMouseDown = (e) => {
 };
 
 const handleMainMouseMove = (e) => {
+    // Auto-scroll when dragging near/past viewport edges (checked first so early returns don't skip it)
+    if (e.buttons & 1) {
+        _lastDragEvent = e;
+        _startAutoScroll();
+    } else {
+        _stopAutoScroll();
+    }
+
     if (isSquareToolActive) {
         handleMouseMoveRect(e);
     } else if (isArrowToolActive) {
@@ -239,6 +335,7 @@ const handleMainMouseMove = (e) => {
 };
 
 const handleMainMouseUp = (e) => {
+    _stopAutoScroll();
     if (isSquareToolActive) {
         handleMouseUpRect(e);
     } else if (isArrowToolActive) {
@@ -318,6 +415,21 @@ const handleMainMouseUp = (e) => {
 };
 
 const handleMainMouseLeave = (e) => {
+    // If the user is still holding the primary button (dragging outside the canvas),
+    // keep auto-scrolling and don't finalize the operation yet.
+    if (e.buttons & 1) {
+        _lastDragEvent = e;
+        _startAutoScroll();
+
+        // Listen on document to continue receiving move events outside the SVG
+        if (!_documentDragActive) {
+            _documentDragActive = true;
+            document.addEventListener('mousemove', _onDocumentDragMove);
+            document.addEventListener('mouseup', _onDocumentDragUp);
+        }
+        return;
+    }
+
     // Stop all active drawing tools when pointer leaves the canvas
 
     // Fire mouseUp for whichever tool is active to finalize/cancel the operation
@@ -343,6 +455,15 @@ const handleMainMouseLeave = (e) => {
 
 let _boundSvg = null;
 
+function _onMouseEnter(e) {
+    // Cursor re-entered the SVG — stop document-level tracking, SVG handles events again
+    if (_documentDragActive) {
+        document.removeEventListener('mousemove', _onDocumentDragMove);
+        document.removeEventListener('mouseup', _onDocumentDragUp);
+        _documentDragActive = false;
+    }
+}
+
 function initEventDispatcher(svgEl) {
     if (_boundSvg) cleanupEventDispatcher();
     const target = svgEl || svg;
@@ -350,15 +471,23 @@ function initEventDispatcher(svgEl) {
     target.addEventListener('mousemove', handleMainMouseMove);
     target.addEventListener('mouseup', handleMainMouseUp);
     target.addEventListener('mouseleave', handleMainMouseLeave);
+    target.addEventListener('mouseenter', _onMouseEnter);
     _boundSvg = target;
 }
 
 function cleanupEventDispatcher() {
+    _stopAutoScroll();
+    if (_documentDragActive) {
+        document.removeEventListener('mousemove', _onDocumentDragMove);
+        document.removeEventListener('mouseup', _onDocumentDragUp);
+        _documentDragActive = false;
+    }
     if (_boundSvg) {
         _boundSvg.removeEventListener('mousedown', handleMainMouseDown);
         _boundSvg.removeEventListener('mousemove', handleMainMouseMove);
         _boundSvg.removeEventListener('mouseup', handleMainMouseUp);
         _boundSvg.removeEventListener('mouseleave', handleMainMouseLeave);
+        _boundSvg.removeEventListener('mouseenter', _onMouseEnter);
         _boundSvg = null;
     }
 }

package/src/core/Selection.js

@@ -151,10 +151,10 @@ function isShapeInSelectionRect(shape, selectionBounds) {
             break;
         case 'freehandStroke':
             shapeBounds = {
-                x: shape.boundingBox.x,
-                y: shape.boundingBox.y,
-                width: shape.boundingBox.width,
-                height: shape.boundingBox.height
+                x: shape.x,
+                y: shape.y,
+                width: shape.width,
+                height: shape.height
             };
             break;
         case 'text':
@@ -389,10 +389,10 @@ class MultiSelection {
                 };
             case 'freehandStroke':
                 return {
-                    x: shape.boundingBox.x,
-                    y: shape.boundingBox.y,
-                    width: shape.boundingBox.width,
-                    height: shape.boundingBox.height
+                    x: shape.x,
+                    y: shape.y,
+                    width: shape.width,
+                    height: shape.height
                 };
             case 'text':
                 const textElement = shape.group ? shape.group.querySelector('text') : null;
@@ -728,7 +728,7 @@ class MultiSelection {
                             shape.updateBoundingBox();
                         }
 
-                        const boundingBox = shape.boundingBox || this.getShapeBounds(shape);
+                        const boundingBox = this.getShapeBounds(shape);
 
                         shapeData = {
                             x: boundingBox.x || 0,
@@ -1360,6 +1360,8 @@ createRotatedControls(angleDiff = 0) {
             if (typeof shape.finalizeMove === 'function') {
                 shape.finalizeMove();
             }
+            // Restore isSelected flag (startDrag's removeSelection clears it)
+            shape.isSelected = true;
         });
 
         this.initialPositions.clear();
@@ -1367,6 +1369,9 @@ createRotatedControls(angleDiff = 0) {
         // Push undo for all moved shapes
         this._pushUndoForAll();
 
+        // Refresh bounds and controls after finalizeMove may have changed positions
+        this.updateControls();
+
         if (typeof svg !== 'undefined') {
             svg.style.cursor = 'default';
         }
@@ -1420,23 +1425,26 @@ function handleMultiSelectionMouseDown(e) {
             return true;
         }
 
-        if (multiSelection.isPointInBounds(x, y)) {
-            // Only start drag if clicking on a shape that's part of the selection
-            // This allows clicking through empty areas of the selection rectangle
-            let clickedOnSelectedShape = false;
-            for (const shape of multiSelection.selectedShapes) {
-                if (shape.contains && shape.contains(x, y)) {
-                    clickedOnSelectedShape = true;
-                    break;
-                }
+        // Check if clicking on any shape that's part of the selection
+        let clickedOnSelectedShape = null;
+        for (const shape of multiSelection.selectedShapes) {
+            if (shape.contains && shape.contains(x, y)) {
+                clickedOnSelectedShape = shape;
+                break;
             }
-            if (clickedOnSelectedShape) {
-                multiSelection.startDrag(e);
+        }
+        if (clickedOnSelectedShape) {
+            // Ctrl+Click: toggle shape out of multi-selection
+            if (e.ctrlKey || e.metaKey) {
+                multiSelection.removeShape(clickedOnSelectedShape);
                 return true;
             }
-            // Click was in bounds but not on a selected shape — fall through
-            // to allow clicking on other shapes or starting a new selection
+            multiSelection.startDrag(e);
+            return true;
         }
+
+        // If click is within the selection bounds but not on a shape,
+        // fall through to allow clicking on other shapes or starting a new selection
     }
 
     // Check if clicking on individual shape anchors - let them handle it
@@ -1496,6 +1504,12 @@ function handleMultiSelectionMouseDown(e) {
             return true;
         }
 
+        // If the clicked shape is part of the multi-selection, start dragging instead of clearing
+        if (multiSelection.selectedShapes.size > 1 && multiSelection.selectedShapes.has(clickedShape)) {
+            multiSelection.startDrag(e);
+            return true;
+        }
+
         // If it's the same shape that's already selected, let individual handlers manage it
         if (currentShape === clickedShape) {
             // Clear any other multi-selected shapes so only this one remains selected

package/src/shapes/Arrow.js

@@ -418,6 +418,37 @@ class Arrow {
         };
     }
 
+    _updateAnchorPositions() {
+        if (!this.anchors || this.anchors.length === 0) return;
+
+        const anchorSize = 5 / currentZoom;
+        let anchorPositions = [this.startPoint, this.endPoint];
+
+        if (this.arrowCurved === "curved" && this.controlPoint1 && this.controlPoint2) {
+            const midOnCurve = this.getCubicBezierPoint(0.5);
+            anchorPositions.push(midOnCurve);
+        } else if (this.arrowCurved === "elbow") {
+            const elbowXVal = this.elbowX !== null ? this.elbowX : (this.startPoint.x + this.endPoint.x) / 2;
+            const midY = (this.startPoint.y + this.endPoint.y) / 2;
+            anchorPositions.push({ x: elbowXVal, y: midY });
+        } else {
+            // straight — offset end anchor past arrowhead
+            const arrowAngle = Math.atan2(this.endPoint.y - this.startPoint.y, this.endPoint.x - this.startPoint.x);
+            const arrowHeadClearance = this.arrowHeadLength + anchorSize - 10;
+            anchorPositions[1] = {
+                x: this.endPoint.x + arrowHeadClearance * Math.cos(arrowAngle),
+                y: this.endPoint.y + arrowHeadClearance * Math.sin(arrowAngle)
+            };
+        }
+
+        anchorPositions.forEach((point, index) => {
+            if (this.anchors[index]) {
+                this.anchors[index].setAttribute('cx', point.x);
+                this.anchors[index].setAttribute('cy', point.y);
+            }
+        });
+    }
+
     _updateLabelElement() {
         if (!this.label) {
             if (this.labelElement && this.labelElement.parentNode === this.group) {
@@ -1633,6 +1664,7 @@ static getFrameAttachmentPoint(point, frame, tolerance = 20) {
     this._updatePathElement();
     this._updateHitArea();
     this._updateLabelElement();
+    this._updateAnchorPositions();
 
     // Only update frame containment if we're actively dragging the shape itself
     // and not being moved by a parent frame

package/src/shapes/FreehandStroke.js

@@ -63,11 +63,14 @@ class FreehandStroke {
         this.group = document.createElementNS('http://www.w3.org/2000/svg', 'g');
         this.anchors = [];
         this.rotationAnchor = null;
+        this.rotationLine = null;
         this.selectionPadding = 8;
         this.selectionOutline = null;
         this.boundingBox = { x: 0, y: 0, width: 0, height: 0 };
         this.shapeName = "freehandStroke";
-        
+        this._moveOffsetX = 0;
+        this._moveOffsetY = 0;
+
         // Frame attachment properties
         this.parentFrame = null;
         
@@ -76,25 +79,25 @@ class FreehandStroke {
     }
 
     // Add position and dimension properties for frame compatibility
+    // Getters include pending move offset so callers see the visual position
     get x() {
-        return this.boundingBox.x;
+        return this.boundingBox.x + (this._moveOffsetX || 0);
     }
-    
+
     set x(value) {
-        const dx = value - this.boundingBox.x;
-        const dy = 0;
-        this.points = this.points.map(point => [point[0] + dx, point[1] + dy, point[2] || 0.5]);
-        this.boundingBox.x = value;
+        const dx = value - this.boundingBox.x - (this._moveOffsetX || 0);
+        this.points = this.points.map(point => [point[0] + dx, point[1], point[2] || 0.5]);
+        this.boundingBox.x = value - (this._moveOffsetX || 0);
     }
-    
+
     get y() {
-        return this.boundingBox.y;
+        return this.boundingBox.y + (this._moveOffsetY || 0);
     }
-    
+
     set y(value) {
-        const dy = value - this.boundingBox.y;
+        const dy = value - this.boundingBox.y - (this._moveOffsetY || 0);
         this.points = this.points.map(point => [point[0], point[1] + dy, point[2] || 0.5]);
-        this.boundingBox.y = value;
+        this.boundingBox.y = value - (this._moveOffsetY || 0);
     }
     
     get width() {
@@ -339,16 +342,10 @@ class FreehandStroke {
         // Accumulate offset for transform-based movement (avoids full path rebuild)
         this._moveOffsetX = (this._moveOffsetX || 0) + dx;
         this._moveOffsetY = (this._moveOffsetY || 0) + dy;
-        const rot = this.rotation ? `rotate(${this.rotation} ${this._rotCenterX || 0} ${this._rotCenterY || 0})` : '';
+        const centerX = this.boundingBox.x + this.boundingBox.width / 2;
+        const centerY = this.boundingBox.y + this.boundingBox.height / 2;
+        const rot = this.rotation ? `rotate(${this.rotation} ${centerX} ${centerY})` : '';
         this.group.setAttribute('transform', `translate(${this._moveOffsetX}, ${this._moveOffsetY}) ${rot}`);
-
-        // Only update frame containment if we're actively dragging the shape itself
-        // and not being moved by a parent frame
-        if (isDraggingStroke && !this.isBeingMovedByFrame) {
-            this.updateFrameContainment();
-        }
-
-        this.updateAttachedArrows();
     }
 
     // Call after drag ends to bake the offset into actual point coordinates
@@ -364,37 +361,9 @@ class FreehandStroke {
     }
 
     updateAttachedArrows() {
-        updateArrowsForShape(this);
-    }
-
-    updateFrameContainment() {
-        // Don't update if we're being moved by a frame
-        if (this.isBeingMovedByFrame) return;
-        
-        let targetFrame = null;
-        
-        // Find which frame this shape is over
-        shapes.forEach(shape => {
-            if (shape.shapeName === 'frame' && shape.isShapeInFrame(this)) {
-                targetFrame = shape;
-            }
-        });
-        
-        // If we have a parent frame and we're being dragged, temporarily remove clipping
-        if (this.parentFrame && isDraggingStroke) {
-            this.parentFrame.temporarilyRemoveFromFrame(this);
+        if (typeof window.__updateArrowsForShape === 'function') {
+            window.__updateArrowsForShape(this);
         }
-        
-        // Update frame highlighting
-        if (hoveredFrameStroke && hoveredFrameStroke !== targetFrame) {
-            hoveredFrameStroke.removeHighlight();
-        }
-        
-        if (targetFrame && targetFrame !== hoveredFrameStroke) {
-            targetFrame.highlightFrame();
-        }
-        
-        hoveredFrameStroke = targetFrame;
     }
 
     selectStroke() {
@@ -423,11 +392,15 @@ class FreehandStroke {
         if (this.rotationAnchor && this.rotationAnchor.parentNode === this.group) {
             this.group.removeChild(this.rotationAnchor);
         }
+        if (this.rotationLine && this.rotationLine.parentNode === this.group) {
+            this.group.removeChild(this.rotationLine);
+        }
         if (this.selectionOutline && this.selectionOutline.parentNode === this.group) {
             this.group.removeChild(this.selectionOutline);
         }
         this.anchors = [];
         this.rotationAnchor = null;
+        this.rotationLine = null;
         this.selectionOutline = null;
         this.isSelected = false;
     }
@@ -436,22 +409,26 @@ class FreehandStroke {
     updateSidebar() {}
 
     contains(x, y) {
-        // Simple bounding box check
-        const centerX = this.boundingBox.x + this.boundingBox.width / 2;
-        const centerY = this.boundingBox.y + this.boundingBox.height / 2;
-        
+        // Account for pending move offset (during drag, points aren't updated yet)
+        const ox = this._moveOffsetX || 0;
+        const oy = this._moveOffsetY || 0;
+        const bbX = this.boundingBox.x + ox;
+        const bbY = this.boundingBox.y + oy;
+        const centerX = bbX + this.boundingBox.width / 2;
+        const centerY = bbY + this.boundingBox.height / 2;
+
         // Adjust for rotation
         const dx = x - centerX;
         const dy = y - centerY;
-        
+
         const angleRad = -this.rotation * Math.PI / 180;
         const rotatedX = dx * Math.cos(angleRad) - dy * Math.sin(angleRad) + centerX;
         const rotatedY = dx * Math.sin(angleRad) + dy * Math.cos(angleRad) + centerY;
-        
-        return rotatedX >= this.boundingBox.x && 
-               rotatedX <= this.boundingBox.x + this.boundingBox.width &&
-               rotatedY >= this.boundingBox.y && 
-               rotatedY <= this.boundingBox.y + this.boundingBox.height;
+
+        return rotatedX >= bbX &&
+               rotatedX <= bbX + this.boundingBox.width &&
+               rotatedY >= bbY &&
+               rotatedY <= bbY + this.boundingBox.height;
     }
 
   isNearAnchor(x, y) {
@@ -459,10 +436,14 @@ class FreehandStroke {
     const buffer = 10;
     const anchorSize = 10 / currentZoom;
 
+    // Account for pending move offset
+    const ox = this._moveOffsetX || 0;
+    const oy = this._moveOffsetY || 0;
+
     // Transform the input coordinates to account for rotation
-    const centerX = this.boundingBox.x + this.boundingBox.width / 2;
-    const centerY = this.boundingBox.y + this.boundingBox.height / 2;
-    
+    const centerX = this.boundingBox.x + ox + this.boundingBox.width / 2;
+    const centerY = this.boundingBox.y + oy + this.boundingBox.height / 2;
+
     // Rotate the mouse coordinates to the shape's local coordinate system
     const angleRad = -this.rotation * Math.PI / 180;
     const dx = x - centerX;
@@ -471,8 +452,8 @@ class FreehandStroke {
     const localY = dx * Math.sin(angleRad) + dy * Math.cos(angleRad) + centerY;
 
     // Check resize anchors in local space
-    const expandedX = this.boundingBox.x - this.selectionPadding;
-    const expandedY = this.boundingBox.y - this.selectionPadding;
+    const expandedX = this.boundingBox.x + ox - this.selectionPadding;
+    const expandedY = this.boundingBox.y + oy - this.selectionPadding;
     const expandedWidth = this.boundingBox.width + 2 * this.selectionPadding;
     const expandedHeight = this.boundingBox.height + 2 * this.selectionPadding;
     
@@ -618,6 +599,7 @@ class FreehandStroke {
     rotationLine.setAttribute('stroke-dasharray', '2 2');
     rotationLine.setAttribute('style', 'pointer-events: none;');
     this.group.appendChild(rotationLine);
+    this.rotationLine = rotationLine;
 
     // Show sidebar when anchors are added (when shape is selected)
     disableAllSideBars();

package/src/tools/freehandTool.js

@@ -4,6 +4,9 @@ import { pushCreateAction, pushDeleteAction, pushOptionsChangeAction, pushTransf
 import { updateAttachedArrows as updateArrowsForShape, cleanupAttachments } from './arrowTool.js';
 import { calculateSnap, clearSnapGuides } from '../core/SnapGuides.js';
 
+// Expose updateArrowsForShape globally so FreehandStroke.updateAttachedArrows() can call it
+// (FreehandStroke.js is a separate module and cannot import freehandTool's local bindings)
+window.__updateArrowsForShape = updateArrowsForShape;
 
 const strokeColors = document.querySelectorAll(".strokeColors span");
 const strokeThicknesses = document.querySelectorAll(".strokeThickness span");
@@ -80,6 +83,31 @@ function getSvgPathFromStroke(stroke) {
     return pathData.join(' ');
 }
 
+// Frame containment check for a freehand stroke during drag.
+// Lives here (not in FreehandStroke.js) because it needs isDraggingStroke & hoveredFrameStroke.
+function updateFrameContainmentForStroke(shape) {
+    if (shape.isBeingMovedByFrame) return;
+
+    let targetFrame = null;
+    shapes.forEach(s => {
+        if (s.shapeName === 'frame' && s.isShapeInFrame(shape)) {
+            targetFrame = s;
+        }
+    });
+
+    if (shape.parentFrame && isDraggingStroke) {
+        shape.parentFrame.temporarilyRemoveFromFrame(shape);
+    }
+
+    if (hoveredFrameStroke && hoveredFrameStroke !== targetFrame) {
+        hoveredFrameStroke.removeHighlight();
+    }
+    if (targetFrame && targetFrame !== hoveredFrameStroke) {
+        targetFrame.highlightFrame();
+    }
+    hoveredFrameStroke = targetFrame;
+}
+
 // Delete functionality
 function deleteCurrentShape() {
     if (currentShape && currentShape.shapeName === 'freehandStroke') {
@@ -304,6 +332,14 @@ function handleMouseMove(e) {
         startX = x;
         startY = y;
 
+        // Frame containment update (must live here where isDraggingStroke is in scope)
+        if (!currentShape.isBeingMovedByFrame) {
+            updateFrameContainmentForStroke(currentShape);
+        }
+
+        // Update arrows attached to this shape
+        currentShape.updateAttachedArrows();
+
         // Snap guides
         if (window.__sketchStoreApi && window.__sketchStoreApi.getState().snapToObjects) {
             const snap = calculateSnap(currentShape, e.shiftKey, e.clientX, e.clientY);
@@ -334,7 +370,7 @@ function handleMouseUp(e) {
         if (currentStroke && currentStroke.points.length >= 2) {
             currentStroke.draw(); // Redraw with final smoothing
             pushCreateAction(currentStroke);
-            
+
             // Check for frame containment and track attachment
             const finalFrame = hoveredFrameStroke;
             if (finalFrame) {
@@ -342,6 +378,12 @@ function handleMouseUp(e) {
                 // Track the attachment for undo
                 pushFrameAttachmentAction(finalFrame, currentStroke, 'attach', null);
             }
+
+            // Auto-select the drawn stroke and switch to selection tool
+            const drawnShape = currentStroke;
+            if (window.__sketchStoreApi) window.__sketchStoreApi.setActiveTool('select', { afterDraw: true });
+            currentShape = drawnShape;
+            currentShape.selectStroke();
         } else if (currentStroke) {
             // Remove strokes that are too small
             shapes.pop();
@@ -349,13 +391,13 @@ function handleMouseUp(e) {
                 currentStroke.group.parentNode.removeChild(currentStroke.group);
             }
         }
-        
+
         // Clear frame highlighting
         if (hoveredFrameStroke) {
             hoveredFrameStroke.removeHighlight();
             hoveredFrameStroke = null;
         }
-        
+
         currentStroke = null;
     }