@teachinglab/omd 0.7.2 → 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/canvas/ui/toolbar.js

@@ -198,13 +198,13 @@ export class Toolbar {
     _updateActiveButton(toolName) {
         // Reset all buttons
         this.buttons.forEach(button => {
-            button.setFillColor('white');
+            button.setFillColor(this.omdColor.lightGray);
         });
         
         // Highlight active button
         const activeButton = this.buttons.get(toolName);
         if (activeButton) {
-            activeButton.setFillColor(this.omdColor.lightGray);
+            activeButton.setFillColor('white');
             this.activeButton = activeButton;
         } else {
             this.activeButton = null;

package/package.json

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

package/src/omdExpression.js

@@ -35,6 +35,14 @@ export class omdExpression extends omdMetaExpression
             const parsed = parseExpressionString(data);
             if ( parsed ) data = parsed;
         }
+        // Handle object with 'expression' string property
+        else if ( typeof data === 'object' && data.expression && typeof data.expression === 'string' ) {
+             const parsed = parseExpressionString(data.expression);
+             if ( parsed ) {
+                 // Merge parsed data into data object
+                 data = { ...data, ...parsed };
+             }
+        }
 
         if ( typeof data.termsAndOpers != "undefined" )
         {
@@ -73,6 +81,14 @@ export class omdExpression extends omdMetaExpression
                     this.operatorSet.push( P );
                     this.expressionStack.addChild( P );
                 }
+                else if ( elem.omdType == "string" )
+                {
+                    // Fallback for string tokens - treat as term with variable name
+                    var T = new omdTerm(1, elem.name, 1);
+                    T.hideBackgroundByDefault();
+                    this.termSet.push( T );
+                    this.expressionStack.addChild( T );
+                }
             }
         }
 
@@ -108,9 +124,10 @@ export class omdExpression extends omdMetaExpression
 
         this.setWidthAndHeight( this.backRect.width, this.backRect.height );
 
-        // Set individual width/height properties and viewBox for API compatibility
+        // Set individual width/height properties
         this.width = this.backRect.width;
         this.height = this.backRect.height;
-        this.svgObject.setAttribute('viewBox', `0 0 ${this.width} ${this.height}`);
+        // Removed viewBox setting as it is not valid for 'g' elements and can cause rendering issues
+        // this.svgObject.setAttribute('viewBox', `0 0 ${this.width} ${this.height}`);
     }
 }