@teachinglab/omd 0.2.5 → 0.2.7

package/omd/step-visualizer/omdStepVisualizer.js

@@ -15,9 +15,12 @@ import { jsvgLayoutGroup, jsvgEllipse, jsvgLine } from '@teachinglab/jsvg';
  * @extends omdEquationSequenceNode
  */
 export class omdStepVisualizer extends omdEquationSequenceNode {
-    constructor(steps) {
+    constructor(steps, styling = {}) {
         super(steps);
         
+        // Store styling options
+        this.styling = styling || {};
+        
         // Visual elements for step tracking
         this.stepDots = [];
         this.stepLines = [];
@@ -37,9 +40,32 @@ export class omdStepVisualizer extends omdEquationSequenceNode {
         
         this.addChild(this.visualContainer);
         this._initializeVisualElements();
+        
+        // Set default filter level to show only major steps (stepMark = 0)
+        // This ensures intermediate steps are hidden and expansion dots can be created
+        console.debug('Step visualizer: Setting default filter level to 0');
+        console.debug('Steps before filter:', this.steps.map(s => ({type: s.constructor.name, stepMark: s.stepMark, visible: s.visible})));
+        
+        if (this.setFilterLevel && typeof this.setFilterLevel === 'function') {
+            this.setFilterLevel(0);
+            console.debug('Steps after filter:', this.steps.map(s => ({type: s.constructor.name, stepMark: s.stepMark, visible: s.visible})));
+        } else {
+            console.debug('setFilterLevel method not available');
+        }
+        
         this.computeDimensions();
         this.updateLayout();
     }
+    
+    /**
+     * Sets the fixed position for the step visualizer
+     * @param {number} position - The x position from the left edge where the visualizer should be positioned
+     */
+    setFixedVisualizerPosition(position) {
+        if (this.layoutManager) {
+            this.layoutManager.setFixedVisualizerPosition(position);
+        }
+    }
 
     /**
      * Force rebuild visual container (dots/lines) from scratch
@@ -88,8 +114,9 @@ export class omdStepVisualizer extends omdEquationSequenceNode {
         const radius = getDotRadius(equation.stepMark ?? 0);
         const dot = new jsvgEllipse();
         dot.setWidthAndHeight(radius * 2, radius * 2);
-        dot.setFillColor(omdColor.stepColor);
-        dot.setStrokeColor(omdColor.stepColor);
+        const dotColor = this.styling.dotColor || omdColor.stepColor;
+        dot.setFillColor(dotColor);
+        dot.setStrokeColor(dotColor);
         dot.setStrokeWidth(this.lineWidth);
         dot.radius = radius;
         
@@ -114,7 +141,8 @@ export class omdStepVisualizer extends omdEquationSequenceNode {
      */
     _createStepLine(fromIndex, toIndex) {
         const line = new jsvgLine();
-        line.setStrokeColor(omdColor.stepColor);
+        const lineColor = this.styling.lineColor || omdColor.stepColor;
+        line.setStrokeColor(lineColor);
         line.setStrokeWidth(this.lineWidth);
         
         line.fromDotIndex = fromIndex;
@@ -151,30 +179,39 @@ export class omdStepVisualizer extends omdEquationSequenceNode {
      * Override addStep to update visual elements when new steps are added
      */
     addStep(step, options = {}) {
-        let createdDot=null;
+        // Call parent first to add the step properly
+        super.addStep(step, options);
+        
+        // Now create visual elements for equation nodes only
         if (step instanceof omdEquationNode) {
-            this.steps.push(step);
-            const equations = this.steps.filter(s => s instanceof omdEquationNode);
-            const newIndex = equations.length - 1;
-            this.steps.pop();
-            createdDot = this._createStepDot(step, newIndex);
-            step.findAllNodes().forEach(node => {
-                this.nodeToStepMap.set(node.id, newIndex);
-            });
+            // Find the actual index of this equation in the steps array
+            const equationIndex = this.steps.filter(s => s instanceof omdEquationNode).indexOf(step);
             
-            if (newIndex > 0) {
-                this._createStepLine(newIndex - 1, newIndex);
+            if (equationIndex >= 0) {
+                const createdDot = this._createStepDot(step, equationIndex);
+                
+                // Update the node to step mapping
+                step.findAllNodes().forEach(node => {
+                    this.nodeToStepMap.set(node.id, equationIndex);
+                });
+                
+                // Create connecting line if this isn't the first equation
+                if (equationIndex > 0) {
+                    this._createStepLine(equationIndex - 1, equationIndex);
+                }
+                
+                // After stepMark is set, adjust dot radius
+                if (createdDot) {
+                    const radius = getDotRadius(step.stepMark ?? 0);
+                    createdDot.setWidthAndHeight(radius * 2, radius * 2);
+                    createdDot.radius = radius;
+                }
             }
         }
         
-        super.addStep(step, options);
-
-        // after stepMark is set, adjust dot radius
-        if(createdDot){
-            const radius=getDotRadius(step.stepMark??0);
-            createdDot.setWidthAndHeight(radius*2,radius*2);
-            createdDot.radius=radius;
-        }
+        // Update layout after adding the step
+        this.computeDimensions();
+        this.updateLayout();
     }
     
     /**
@@ -191,11 +228,12 @@ export class omdStepVisualizer extends omdEquationSequenceNode {
         super.computeDimensions();
         this.sequenceWidth = this.width;
         
-        // Ensure stepDots is initialized before accessing its length
-        if (this.stepDots && this.stepDots.length > 0) {
+        // Set width to include the fixed visualizer position plus visualizer width
+        if (this.stepDots && this.stepDots.length > 0 && this.layoutManager) {
             const containerWidth = this.dotRadius * 3;
-            const visualWidth = this.visualSpacing + containerWidth;
-            this.setWidthAndHeight(this.width + visualWidth, this.height);
+            const fixedVisualizerPosition = this.layoutManager.fixedVisualizerPosition || 250;
+            const totalWidth = fixedVisualizerPosition + this.visualSpacing + containerWidth;
+            this.setWidthAndHeight(totalWidth, this.height);
         }
     }
     
@@ -203,14 +241,26 @@ export class omdStepVisualizer extends omdEquationSequenceNode {
      * Override updateLayout to update visual elements as well
      */
     updateLayout() {
+        console.debug('\n=== omdStepVisualizer.updateLayout START ===');
+        console.debug('Calling super.updateLayout()...');
         super.updateLayout();
         
         // Only update visual layout if layoutManager is initialized
         if (this.layoutManager) {
+            console.debug('LayoutManager found, updating visual elements...');
+            console.debug('Calling layoutManager.updateVisualLayout()...');
             this.layoutManager.updateVisualLayout();
+            
+            console.debug('Calling layoutManager.updateVisualVisibility()...');
             this.layoutManager.updateVisualVisibility();
+            
+            console.debug('Calling layoutManager.updateAllLinePositions()...');
             this.layoutManager.updateAllLinePositions();
+        } else {
+            console.debug('WARNING: LayoutManager not initialized!');
         }
+        
+        console.debug('=== omdStepVisualizer.updateLayout END ===\n');
     }
 
     /**
@@ -313,12 +363,18 @@ export class omdStepVisualizer extends omdEquationSequenceNode {
         this.activeDot = this.stepDots[dotIndex];
         
         const dot = this.stepDots[dotIndex];
-        dot.setFillColor(omdColor.explainColor);
-        dot.setStrokeColor(omdColor.explainColor);
+        const explainColor = this.styling.explainColor || omdColor.explainColor;
+        dot.setFillColor(explainColor);
+        dot.setStrokeColor(explainColor);
         
-        this.setLineAboveColor(dotIndex, omdColor.explainColor);
+        this.setLineAboveColor(dotIndex, this.styling.explainColor || omdColor.explainColor);
         this.textBoxManager.createTextBoxForDot(dotIndex);
+        
+        // Temporarily disable equation repositioning for simple dot state changes
+        const originalRepositioning = this.layoutManager.allowEquationRepositioning;
+        this.layoutManager.allowEquationRepositioning = false;
         this.layoutManager.updateVisualZOrder();
+        this.layoutManager.allowEquationRepositioning = originalRepositioning;
     }
     
     /**
@@ -329,14 +385,20 @@ export class omdStepVisualizer extends omdEquationSequenceNode {
         try {
             if (this.activeDotIndex !== -1) {
                 const dot = this.stepDots[this.activeDotIndex];
-                dot.setFillColor(omdColor.stepColor);
-                dot.setStrokeColor(omdColor.stepColor);
+                const dotColor = this.styling.dotColor || omdColor.stepColor;
+                dot.setFillColor(dotColor);
+                dot.setStrokeColor(dotColor);
                 
-                this.setLineAboveColor(this.activeDotIndex, omdColor.stepColor);
+                this.setLineAboveColor(this.activeDotIndex, this.styling.lineColor || omdColor.stepColor);
                 this.textBoxManager.removeTextBoxForDot(this.activeDotIndex);
                 
                 this.highlighting.clearHighlights();
+                
+                // Temporarily disable equation repositioning for simple dot state changes
+                const originalRepositioning = this.layoutManager.allowEquationRepositioning;
+                this.layoutManager.allowEquationRepositioning = false;
                 this.layoutManager.updateVisualZOrder();
+                this.layoutManager.allowEquationRepositioning = originalRepositioning;
             
                 this.activeDot = null;
                 this.activeDotIndex = -1;