@elixpo/lixsketch 5.4.0 → 5.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elixpo/lixsketch",
-  "version": "5.4.0",
+  "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

@@ -75,9 +75,22 @@ let _documentDragActive = false;
 
 function _onDocumentDragMove(e) {
     _lastDragEvent = e;
-    // Also forward the move to the main handler so the tool keeps updating
-    // (the SVG won't receive mousemove while cursor is outside it)
-    handleMainMouseMove(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) {
@@ -231,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) {
@@ -311,14 +332,6 @@ const handleMainMouseMove = (e) => {
             handleCodeMouseMove(e);
         }
     }
-
-    // Auto-scroll when dragging near/past viewport edges
-    if (e.buttons & 1) {
-        _lastDragEvent = e;
-        _startAutoScroll();
-    } else {
-        _stopAutoScroll();
-    }
 };
 
 const handleMainMouseUp = (e) => {

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,28 +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 = null;
-            for (const shape of multiSelection.selectedShapes) {
-                if (shape.contains && shape.contains(x, y)) {
-                    clickedOnSelectedShape = shape;
-                    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) {
-                // Ctrl+Click: toggle shape out of multi-selection
-                if (e.ctrlKey || e.metaKey) {
-                    multiSelection.removeShape(clickedOnSelectedShape);
-                    return true;
-                }
-                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
@@ -1501,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() {
@@ -343,14 +346,6 @@ class FreehandStroke {
         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
@@ -366,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);
-        }
-        
-        // Update frame highlighting
-        if (hoveredFrameStroke && hoveredFrameStroke !== targetFrame) {
-            hoveredFrameStroke.removeHighlight();
+        if (typeof window.__updateArrowsForShape === 'function') {
+            window.__updateArrowsForShape(this);
         }
-        
-        if (targetFrame && targetFrame !== hoveredFrameStroke) {
-            targetFrame.highlightFrame();
-        }
-        
-        hoveredFrameStroke = targetFrame;
     }
 
     selectStroke() {
@@ -425,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;
     }
@@ -465,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;
@@ -477,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;
     
@@ -624,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;
     }