@teachinglab/omd 0.7.3 → 0.7.4

package/canvas/tools/SelectTool.js

@@ -41,6 +41,11 @@ export class SelectTool extends Tool {
         /** @private - OMD dragging state */
         this.isDraggingOMD = false;
         this.draggedOMDElement = null;
+
+        /** @private - Stroke dragging state */
+        this.isDraggingStrokes = false;
+        this.dragStartPoint = null;
+        this.potentialDeselect = null;
         
         // Initialize resize handle manager for OMD visuals
         this.resizeHandleManager = new ResizeHandleManager(canvas);
@@ -78,9 +83,33 @@ export class SelectTool extends Tool {
         }
 
         if (segmentSelection) {
-            // Clicking on a stroke segment - clear OMD selection and handle segment selection
-            this.resizeHandleManager.clearSelection();
-            this._handleSegmentClick(segmentSelection, event.shiftKey);
+            // Check if already selected
+            const isSelected = this._isSegmentSelected(segmentSelection);
+
+            if (isSelected) {
+                // Already selected - prepare for drag, but don't deselect yet
+                this.isDraggingStrokes = true;
+                this.dragStartPoint = { x: event.x, y: event.y };
+                this.potentialDeselect = segmentSelection;
+                
+                // Set isDrawing so we get pointermove events
+                if (this.canvas.eventManager) {
+                    this.canvas.eventManager.isDrawing = true;
+                }
+                return;
+            } else {
+                // Clicking on a stroke segment - clear OMD selection and handle segment selection
+                this.resizeHandleManager.clearSelection();
+                this._handleSegmentClick(segmentSelection, event.shiftKey);
+                
+                // Prepare for drag immediately after selection
+                this.isDraggingStrokes = true;
+                this.dragStartPoint = { x: event.x, y: event.y };
+                
+                if (this.canvas.eventManager) {
+                    this.canvas.eventManager.isDrawing = true;
+                }
+            }
         } else if (omdElement) {
             // Clicking on an OMD visual - clear segment selection and select OMD
             if (!event.shiftKey) {
@@ -132,6 +161,37 @@ export class SelectTool extends Tool {
             this._dragOMDElement(event.x, event.y);
             return;
         }
+
+        // Handle stroke dragging if in progress
+        if (this.isDraggingStrokes && this.dragStartPoint) {
+            const dx = event.x - this.dragStartPoint.x;
+            const dy = event.y - this.dragStartPoint.y;
+            
+            if (dx === 0 && dy === 0) return;
+            
+            // If we moved, it's a drag, so cancel potential deselect
+            this.potentialDeselect = null;
+            
+            // Move all selected strokes
+            const movedStrokes = new Set();
+            for (const [strokeId, _] of this.selectedSegments) {
+                const stroke = this.canvas.strokes.get(strokeId);
+                if (stroke) {
+                    stroke.move(dx, dy);
+                    movedStrokes.add(strokeId);
+                }
+            }
+            
+            this.dragStartPoint = { x: event.x, y: event.y };
+            this._updateSegmentSelectionVisuals();
+            
+            // Emit event
+            this.canvas.emit('strokesMoved', { 
+                dx, dy, 
+                strokeIds: Array.from(movedStrokes) 
+            });
+            return;
+        }
         
         // Handle box selection if in progress
         if (!this.isSelecting || !this.selectionBox) return;
@@ -164,6 +224,23 @@ export class SelectTool extends Tool {
             }
             return;
         }
+
+        // Handle stroke drag completion
+        if (this.isDraggingStrokes) {
+            if (this.potentialDeselect) {
+                // We clicked a selected segment but didn't drag -> toggle selection
+                this._handleSegmentClick(this.potentialDeselect, event.shiftKey);
+                this.potentialDeselect = null;
+            }
+            
+            this.isDraggingStrokes = false;
+            this.dragStartPoint = null;
+            
+            if (this.canvas.eventManager) {
+                this.canvas.eventManager.isDrawing = false;
+            }
+            return;
+        }
         
         // Handle box selection completion
         if (this.isSelecting) {
@@ -396,6 +473,17 @@ export class SelectTool extends Tool {
         return selected;
     }
 
+    /**
+     * Checks if a segment is currently selected.
+     * @private
+     * @param {{strokeId: string, segmentIndex: number}} selection - The selection to check.
+     * @returns {boolean}
+     */
+    _isSegmentSelected({ strokeId, segmentIndex }) {
+        const segmentSet = this.selectedSegments.get(strokeId);
+        return segmentSet ? segmentSet.has(segmentIndex) : false;
+    }
+
     /**
      * Drags the selected OMD element
      * @private

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teachinglab/omd",
-  "version": "0.7.3",
+  "version": "0.7.4",
   "description": "omd",
   "main": "./index.js",
   "module": "./index.js",