@teachinglab/omd 0.7.3 → 0.7.5

package/canvas/tools/SelectTool.js

@@ -41,6 +41,12 @@ 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;
+        this.hasSeparatedForDrag = false;
         
         // Initialize resize handle manager for OMD visuals
         this.resizeHandleManager = new ResizeHandleManager(canvas);
@@ -78,9 +84,35 @@ 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.hasSeparatedForDrag = false;
+                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.hasSeparatedForDrag = false;
+                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 +164,43 @@ 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;
+
+            // Separate selected parts if needed
+            if (!this.hasSeparatedForDrag) {
+                this._separateSelectedParts();
+                this.hasSeparatedForDrag = true;
+            }
+            
+            // 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 +233,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 +482,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
@@ -687,9 +784,12 @@ export class SelectTool extends Tool {
             selectionLayer.removeChild(selectionLayer.firstChild);
         }
 
-        // Add highlights for currently selected segments
-        let highlightCount = 0;
-        
+        if (this.selectedSegments.size === 0) return;
+
+        let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+        let hasSelection = false;
+
+        // Calculate bounding box of all selected segments
         for (const [strokeId, segmentSet] of this.selectedSegments.entries()) {
             const stroke = this.canvas.strokes.get(strokeId);
             if (!stroke || !stroke.points) continue;
@@ -700,24 +800,43 @@ export class SelectTool extends Tool {
                 const p1 = stroke.points[segmentIndex];
                 const p2 = stroke.points[segmentIndex + 1];
                 
-                // Create highlight element
-                const highlight = document.createElementNS('http://www.w3.org/2000/svg', 'line');
-                highlight.setAttribute('x1', p1.x);
-                highlight.setAttribute('y1', p1.y);
-                highlight.setAttribute('x2', p2.x);
-                highlight.setAttribute('y2', p2.y);
-                highlight.setAttribute('stroke', omdColor.hiliteColor);
-                highlight.setAttribute('stroke-width', '4');
-                highlight.setAttribute('stroke-opacity', '0.8');
-                highlight.setAttribute('stroke-linecap', 'round');
-                highlight.style.pointerEvents = 'none';
-                highlight.classList.add('selection-highlight');
-                
-                selectionLayer.appendChild(highlight);
-                highlightCount++;
+                minX = Math.min(minX, p1.x, p2.x);
+                minY = Math.min(minY, p1.y, p2.y);
+                maxX = Math.max(maxX, p1.x, p2.x);
+                maxY = Math.max(maxY, p1.y, p2.y);
+                hasSelection = true;
             }
         }
-        
+
+        if (!hasSelection) return;
+
+        // Add padding
+        const padding = 8;
+        minX -= padding;
+        minY -= padding;
+        maxX += padding;
+        maxY += padding;
+
+        const width = maxX - minX;
+        const height = maxY - minY;
+
+        // Create bounding box element
+        const box = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+        box.setAttribute('x', minX);
+        box.setAttribute('y', minY);
+        box.setAttribute('width', width);
+        box.setAttribute('height', height);
+        box.setAttribute('fill', 'none');
+        box.setAttribute('stroke', '#007bff'); // Selection color
+        box.setAttribute('stroke-width', '1.5');
+        box.setAttribute('stroke-dasharray', '6, 4'); // Dotted/Dashed
+        box.setAttribute('stroke-opacity', '0.6'); // Light
+        box.setAttribute('rx', '8'); // Rounded corners
+        box.setAttribute('ry', '8');
+        box.style.pointerEvents = 'none';
+        box.classList.add('selection-bounds');
+        
+        selectionLayer.appendChild(box);
     }
 
     /**
@@ -837,6 +956,66 @@ export class SelectTool extends Tool {
         });
     }
 
+    /**
+     * Separates selected segments into new strokes so they can be moved independently.
+     * @private
+     */
+    _separateSelectedParts() {
+        const newSelection = new Map();
+        const strokesToProcess = Array.from(this.selectedSegments.entries());
+
+        for (const [strokeId, selectedIndices] of strokesToProcess) {
+            const stroke = this.canvas.strokes.get(strokeId);
+            if (!stroke || !stroke.points || stroke.points.length < 2) continue;
+
+            const totalSegments = stroke.points.length - 1;
+            
+            // If fully selected, just keep it as is
+            if (selectedIndices.size === totalSegments) {
+                newSelection.set(strokeId, selectedIndices);
+                continue;
+            }
+
+            // It's a partial selection - we need to split
+            const sortedSelectedIndices = Array.from(selectedIndices).sort((a, b) => a - b);
+            
+            // Determine unselected indices
+            const unselectedIndices = [];
+            for (let i = 0; i < totalSegments; i++) {
+                if (!selectedIndices.has(i)) {
+                    unselectedIndices.push(i);
+                }
+            }
+
+            // Group segments
+            const selectedGroups = this._groupConsecutiveSegments(sortedSelectedIndices);
+            const unselectedGroups = this._groupConsecutiveSegments(unselectedIndices);
+
+            // Create new strokes for selected parts
+            selectedGroups.forEach(group => {
+                const newStroke = this._createStrokeFromSegments(stroke, group);
+                if (newStroke) {
+                    // Add to new selection (all segments selected)
+                    const newIndices = new Set();
+                    for (let i = 0; i < newStroke.points.length - 1; i++) {
+                        newIndices.add(i);
+                    }
+                    newSelection.set(newStroke.id, newIndices);
+                }
+            });
+
+            // Create new strokes for unselected parts (don't add to selection)
+            unselectedGroups.forEach(group => {
+                this._createStrokeFromSegments(stroke, group);
+            });
+
+            // Remove original stroke
+            this.canvas.removeStroke(strokeId);
+        }
+
+        this.selectedSegments = newSelection;
+    }
+
     /**
      * Groups consecutive segment indices into separate arrays.
      * @private
@@ -870,9 +1049,10 @@ export class SelectTool extends Tool {
     /**
      * Creates a new stroke from a group of segment indices.
      * @private
+     * @returns {Stroke|null} The newly created stroke
      */
     _createStrokeFromSegments(originalStroke, segmentIndices) {
-        if (segmentIndices.length === 0) return;
+        if (segmentIndices.length === 0) return null;
         
         // Collect points for the new stroke
         const newPoints = [];
@@ -886,7 +1066,7 @@ export class SelectTool extends Tool {
         }
         
         // Only create stroke if we have at least 2 points
-        if (newPoints.length < 2) return;
+        if (newPoints.length < 2) return null;
         
         // Create new stroke with same properties
         const newStroke = new Stroke({
@@ -903,6 +1083,7 @@ export class SelectTool extends Tool {
         
         newStroke.finish();
         this.canvas.addStroke(newStroke);
+        return newStroke;
     }
 
 }

package/package.json

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