@elixpo/lixsketch 4.6.2 → 5.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elixpo/lixsketch",
-  "version": "4.6.2",
+  "version": "5.4.0",
   "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,81 @@ 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;
+    // 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);
+}
+
+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();
@@ -236,9 +311,18 @@ 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) => {
+    _stopAutoScroll();
     if (isSquareToolActive) {
         handleMouseUpRect(e);
     } else if (isArrowToolActive) {
@@ -318,6 +402,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 +442,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 +458,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

@@ -1423,14 +1423,19 @@ function handleMultiSelectionMouseDown(e) {
         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;
+            let clickedOnSelectedShape = null;
             for (const shape of multiSelection.selectedShapes) {
                 if (shape.contains && shape.contains(x, y)) {
-                    clickedOnSelectedShape = true;
+                    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);
                 return true;
             }

package/src/shapes/FreehandStroke.js

@@ -339,7 +339,9 @@ 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
@@ -436,22 +438,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) {