@teachinglab/omd 0.7.4 → 0.7.6

package/canvas/tools/SelectTool.js

@@ -41,11 +41,13 @@ export class SelectTool extends Tool {
         /** @private - OMD dragging state */
         this.isDraggingOMD = false;
         this.draggedOMDElement = null;
+        this.selectedOMDElements = new Set();
 
         /** @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);
@@ -89,6 +91,7 @@ export class SelectTool extends Tool {
             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;
                 
@@ -98,12 +101,16 @@ export class SelectTool extends Tool {
                 }
                 return;
             } else {
-                // Clicking on a stroke segment - clear OMD selection and handle segment selection
-                this.resizeHandleManager.clearSelection();
+                // Clicking on a stroke segment
+                if (!event.shiftKey) {
+                    this.resizeHandleManager.clearSelection();
+                    this.selectedOMDElements.clear();
+                }
                 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) {
@@ -111,14 +118,33 @@ export class SelectTool extends Tool {
                 }
             }
         } else if (omdElement) {
-            // Clicking on an OMD visual - clear segment selection and select OMD
+            // Clicking on an OMD visual
+            
+            // Check if already selected
+            if (this.selectedOMDElements.has(omdElement)) {
+                // Already selected - prepare for drag
+                this.isDraggingOMD = true;
+                this.draggedOMDElement = omdElement; // Primary drag target
+                this.startPoint = { x: event.x, y: event.y };
+                
+                if (this.canvas.eventManager) {
+                    this.canvas.eventManager.isDrawing = true;
+                }
+                return;
+            }
+
+            // New selection
             if (!event.shiftKey) {
                 this.selectedSegments.clear();
                 this._clearSelectionVisuals();
+                this.selectedOMDElements.clear();
+                this.resizeHandleManager.clearSelection();
             }
+            
+            this.selectedOMDElements.add(omdElement);
             this.resizeHandleManager.selectElement(omdElement);
             
-            // CRITICAL: Start tracking for potential drag operation
+            // Start tracking for potential drag operation
             this.isDraggingOMD = true;
             this.draggedOMDElement = omdElement;
             this.startPoint = { x: event.x, y: event.y };
@@ -128,11 +154,32 @@ export class SelectTool extends Tool {
                 this.canvas.eventManager.isDrawing = true;
             }
             
-            // Don't start box selection - we're either resizing or will be dragging
             return;
         } else {
+            // Check if clicking inside existing selection bounds
+            const selectionBounds = this._getSelectionBounds();
+            if (selectionBounds && 
+                event.x >= selectionBounds.x && 
+                event.x <= selectionBounds.x + selectionBounds.width &&
+                event.y >= selectionBounds.y && 
+                event.y <= selectionBounds.y + selectionBounds.height) {
+                
+                // Drag the selection (strokes AND OMD elements)
+                this.isDraggingStrokes = true; // We reuse this flag for general dragging
+                this.isDraggingOMD = true;     // Also set this for OMD elements
+                this.hasSeparatedForDrag = false;
+                this.dragStartPoint = { x: event.x, y: event.y };
+                this.startPoint = { x: event.x, y: event.y }; // For OMD dragging
+                
+                if (this.canvas.eventManager) {
+                    this.canvas.eventManager.isDrawing = true;
+                }
+                return;
+            }
+
             // Clicking on empty space - clear all selections and start box selection
             this.resizeHandleManager.clearSelection();
+            this.selectedOMDElements.clear();
             this._startBoxSelection(event.x, event.y, event.shiftKey);
             
             // CRITICAL: Set startPoint AFTER _startBoxSelection so it doesn't get cleared!
@@ -156,10 +203,12 @@ export class SelectTool extends Tool {
             return;
         }
         
+        let handled = false;
+        
         // Handle OMD dragging if in progress
-        if (this.isDraggingOMD && this.draggedOMDElement) {
-            this._dragOMDElement(event.x, event.y);
-            return;
+        if (this.isDraggingOMD) {
+            this._dragOMDElements(event.x, event.y);
+            handled = true;
         }
 
         // Handle stroke dragging if in progress
@@ -167,32 +216,40 @@ export class SelectTool extends Tool {
             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);
+            if (dx !== 0 || dy !== 0) {
+                // 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) 
+                });
             }
-            
-            this.dragStartPoint = { x: event.x, y: event.y };
-            this._updateSegmentSelectionVisuals();
-            
-            // Emit event
-            this.canvas.emit('strokesMoved', { 
-                dx, dy, 
-                strokeIds: Array.from(movedStrokes) 
-            });
-            return;
+            handled = true;
         }
         
+        if (handled) return;
+        
         // Handle box selection if in progress
         if (!this.isSelecting || !this.selectionBox) return;
 
@@ -380,6 +437,7 @@ export class SelectTool extends Tool {
         this.selectedSegments.clear();
         
         // Clear OMD selection
+        this.selectedOMDElements.clear();
         this.resizeHandleManager.clearSelection();
         
         // Remove selection box if it exists
@@ -485,19 +543,97 @@ export class SelectTool extends Tool {
     }
 
     /**
-     * Drags the selected OMD element
+     * Gets the bounding box of the current selection (strokes + OMD).
+     * @private
+     * @returns {{x: number, y: number, width: number, height: number}|null}
+     */
+    _getSelectionBounds() {
+        let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+        let hasPoints = false;
+
+        // 1. Check strokes
+        if (this.selectedSegments.size > 0) {
+            for (const [strokeId, segmentSet] of this.selectedSegments.entries()) {
+                const stroke = this.canvas.strokes.get(strokeId);
+                if (!stroke || !stroke.points) continue;
+
+                for (const segmentIndex of segmentSet) {
+                    if (segmentIndex >= stroke.points.length - 1) continue;
+                    const p1 = stroke.points[segmentIndex];
+                    const p2 = stroke.points[segmentIndex + 1];
+                    
+                    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);
+                    hasPoints = true;
+                }
+            }
+        }
+
+        // 2. Check OMD elements
+        if (this.selectedOMDElements.size > 0) {
+            for (const element of this.selectedOMDElements) {
+                const bbox = this._getOMDElementBounds(element);
+                if (bbox) {
+                    minX = Math.min(minX, bbox.x);
+                    minY = Math.min(minY, bbox.y);
+                    maxX = Math.max(maxX, bbox.x + bbox.width);
+                    maxY = Math.max(maxY, bbox.y + bbox.height);
+                    hasPoints = true;
+                }
+            }
+        }
+
+        if (!hasPoints) return null;
+        
+        // Add padding to match the visual box
+        const padding = 8;
+        return {
+            x: minX - padding,
+            y: minY - padding,
+            width: (maxX + padding) - (minX - padding),
+            height: (maxY + padding) - (minY - padding)
+        };
+    }
+
+    /**
+     * Drags all selected OMD elements
      * @private
      * @param {number} x - Current pointer x coordinate
      * @param {number} y - Current pointer y coordinate
      */
-    _dragOMDElement(x, y) {
-        if (!this.draggedOMDElement || !this.startPoint) return;
+    _dragOMDElements(x, y) {
+        if (!this.startPoint) return;
         
         const dx = x - this.startPoint.x;
         const dy = y - this.startPoint.y;
         
+        if (dx === 0 && dy === 0) return;
+
+        for (const element of this.selectedOMDElements) {
+            this._moveOMDElement(element, dx, dy);
+        }
+        
+        // Update start point for next move
+        this.startPoint = { x, y };
+        
+        // Update resize handles if we have a single selection
+        if (this.selectedOMDElements.size === 1) {
+            const element = this.selectedOMDElements.values().next().value;
+            this.resizeHandleManager.updateIfSelected(element);
+        }
+        
+        this._updateSegmentSelectionVisuals();
+    }
+
+    /**
+     * Moves a single OMD element
+     * @private
+     */
+    _moveOMDElement(element, dx, dy) {
         // Parse current transform
-        const currentTransform = this.draggedOMDElement.getAttribute('transform') || '';
+        const currentTransform = element.getAttribute('transform') || '';
         const translateMatch = currentTransform.match(/translate\(\s*([^,]+)\s*,\s*([^)]+)\s*\)/);
         const scaleMatch = currentTransform.match(/scale\(\s*([^,)]+)(?:\s*,\s*([^)]+))?\s*\)/);
         
@@ -517,13 +653,40 @@ export class SelectTool extends Tool {
             newTransform += ` scale(${scaleX}, ${scaleY})`;
         }
         
-        this.draggedOMDElement.setAttribute('transform', newTransform);
-        
-        // Update start point for next move
-        this.startPoint = { x, y };
-        
-        // Update resize handles if element is selected
-        this.resizeHandleManager.updateIfSelected(this.draggedOMDElement);
+        element.setAttribute('transform', newTransform);
+    }
+    
+    /**
+     * Gets the bounds of an OMD element including transform
+     * @private
+     */
+    _getOMDElementBounds(item) {
+        try {
+            const bbox = item.getBBox();
+            const transform = item.getAttribute('transform') || '';
+            let offsetX = 0, offsetY = 0, scaleX = 1, scaleY = 1;
+            
+            const translateMatch = transform.match(/translate\(\s*([^,]+)\s*,\s*([^)]+)\s*\)/);
+            if (translateMatch) {
+                offsetX = parseFloat(translateMatch[1]) || 0;
+                offsetY = parseFloat(translateMatch[2]) || 0;
+            }
+            
+            const scaleMatch = transform.match(/scale\(\s*([^,)]+)(?:\s*,\s*([^)]+))?\s*\)/);
+            if (scaleMatch) {
+                scaleX = parseFloat(scaleMatch[1]) || 1;
+                scaleY = scaleMatch[2] ? parseFloat(scaleMatch[2]) : scaleX;
+            }
+            
+            return {
+                x: offsetX + (bbox.x * scaleX),
+                y: offsetY + (bbox.y * scaleY),
+                width: bbox.width * scaleX,
+                height: bbox.height * scaleY
+            };
+        } catch (e) {
+            return null;
+        }
     }
     
     /**
@@ -702,6 +865,7 @@ export class SelectTool extends Tool {
         const height = parseFloat(this.selectionBox.getAttribute('height'));
         const selectionBounds = new BoundingBox(x, y, width, height);
 
+        // 1. Select strokes
         for (const [id, stroke] of this.canvas.strokes) {
             if (!stroke.points || stroke.points.length < 2) continue;
             for (let i = 0; i < stroke.points.length - 1; i++) {
@@ -715,6 +879,36 @@ export class SelectTool extends Tool {
                 }
             }
         }
+
+        // 2. Select OMD elements
+        const omdLayer = this.canvas.drawingLayer?.querySelector('.omd-layer');
+        if (omdLayer) {
+             const omdItems = omdLayer.querySelectorAll('.omd-item');
+             for (const item of omdItems) {
+                 if (item?.dataset?.locked === 'true') continue;
+                 
+                 const itemBounds = this._getOMDElementBounds(item);
+                 if (itemBounds) {
+                     // Check intersection
+                     const intersects = !(itemBounds.x > x + width || 
+                                        itemBounds.x + itemBounds.width < x || 
+                                        itemBounds.y > y + height || 
+                                        itemBounds.y + itemBounds.height < y);
+                     
+                     if (intersects) {
+                         this.selectedOMDElements.add(item);
+                     }
+                 }
+             }
+        }
+        
+        // Update resize handles
+        if (this.selectedOMDElements.size === 1 && this.selectedSegments.size === 0) {
+             this.resizeHandleManager.selectElement(this.selectedOMDElements.values().next().value);
+        } else {
+             this.resizeHandleManager.clearSelection();
+        }
+
         this._updateSegmentSelectionVisuals();
     }
 
@@ -775,37 +969,26 @@ export class SelectTool extends Tool {
             selectionLayer.removeChild(selectionLayer.firstChild);
         }
 
-        // Add highlights for currently selected segments
-        let highlightCount = 0;
-        
-        for (const [strokeId, segmentSet] of this.selectedSegments.entries()) {
-            const stroke = this.canvas.strokes.get(strokeId);
-            if (!stroke || !stroke.points) continue;
+        const bounds = this._getSelectionBounds();
+        if (!bounds) return;
 
-            for (const segmentIndex of segmentSet) {
-                if (segmentIndex >= stroke.points.length - 1) continue;
-                
-                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++;
-            }
-        }
-        
+        // Create bounding box element
+        const box = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+        box.setAttribute('x', bounds.x);
+        box.setAttribute('y', bounds.y);
+        box.setAttribute('width', bounds.width);
+        box.setAttribute('height', bounds.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);
     }
 
     /**
@@ -819,12 +1002,13 @@ export class SelectTool extends Tool {
     }
 
     /**
-     * Selects all segments on the canvas.
+     * Selects all segments and OMD elements on the canvas.
      * @private
      */
     _selectAllSegments() {
         // Clear current selection
         this.selectedSegments.clear();
+        this.selectedOMDElements.clear();
         
         let totalSegments = 0;
         
@@ -843,6 +1027,17 @@ export class SelectTool extends Tool {
             }
         }
         
+        // Select all OMD elements
+        const omdLayer = this.canvas.drawingLayer?.querySelector('.omd-layer');
+        if (omdLayer) {
+             const omdItems = omdLayer.querySelectorAll('.omd-item');
+             for (const item of omdItems) {
+                 if (item?.dataset?.locked !== 'true') {
+                     this.selectedOMDElements.add(item);
+                 }
+             }
+        }
+        
         // Update visuals
         this._updateSegmentSelectionVisuals();
         
@@ -854,42 +1049,55 @@ export class SelectTool extends Tool {
     }
 
     /**
-     * Deletes all currently selected segments efficiently.
+     * Deletes all currently selected items (segments and OMD elements).
      * @private
      */
     _deleteSelectedSegments() {
-        if (this.selectedSegments.size === 0) return;
+        let changed = false;
 
-        // Process each stroke that has selected segments
-        const strokesToProcess = Array.from(this.selectedSegments.entries());
-        
-        for (const [strokeId, segmentIndices] of strokesToProcess) {
-            const stroke = this.canvas.strokes.get(strokeId);
-            if (!stroke || !stroke.points || stroke.points.length < 2) continue;
+        // Delete OMD elements
+        if (this.selectedOMDElements.size > 0) {
+            for (const element of this.selectedOMDElements) {
+                element.remove();
+            }
+            this.selectedOMDElements.clear();
+            this.resizeHandleManager.clearSelection();
+            changed = true;
+        }
 
-            const sortedIndices = Array.from(segmentIndices).sort((a, b) => a - b);
+        if (this.selectedSegments.size > 0) {
+            // Process each stroke that has selected segments
+            const strokesToProcess = Array.from(this.selectedSegments.entries());
             
-            // If all or most segments are selected, just delete the whole stroke
-            const totalSegments = stroke.points.length - 1;
-            const selectedCount = sortedIndices.length;
-            
-            if (selectedCount >= totalSegments * 0.8) {
-                // Delete entire stroke
-                this.canvas.removeStroke(strokeId);
-                continue;
-            }
+            for (const [strokeId, segmentIndices] of strokesToProcess) {
+                const stroke = this.canvas.strokes.get(strokeId);
+                if (!stroke || !stroke.points || stroke.points.length < 2) continue;
 
-            // Split the stroke, keeping only unselected segments
-            this._splitStrokeKeepingUnselected(stroke, sortedIndices);
+                const sortedIndices = Array.from(segmentIndices).sort((a, b) => a - b);
+                
+                // If all or most segments are selected, just delete the whole stroke
+                const totalSegments = stroke.points.length - 1;
+                const selectedCount = sortedIndices.length;
+                
+                if (selectedCount >= totalSegments * 0.8) {
+                    // Delete entire stroke
+                    this.canvas.removeStroke(strokeId);
+                    continue;
+                }
+
+                // Split the stroke, keeping only unselected segments
+                this._splitStrokeKeepingUnselected(stroke, sortedIndices);
+            }
+            changed = true;
         }
 
-        // Clear selection and update UI
-        this.clearSelection();
-        
-        // Emit deletion event
-        this.canvas.emit('segmentsDeleted', { 
-            strokesAffected: strokesToProcess.length 
-        });
+        if (changed) {
+            // Clear selection and update UI
+            this.clearSelection();
+            
+            // Emit deletion event
+            this.canvas.emit('selectionDeleted');
+        }
     }
 
     /**
@@ -925,6 +1133,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
@@ -958,9 +1226,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 = [];
@@ -974,7 +1243,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({
@@ -991,6 +1260,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.4",
+  "version": "0.7.6",
   "description": "omd",
   "main": "./index.js",
   "module": "./index.js",