@teachinglab/omd 0.2.7 → 0.2.9

package/omd/step-visualizer/omdStepVisualizer.js

@@ -18,16 +18,19 @@ export class omdStepVisualizer extends omdEquationSequenceNode {
     constructor(steps, styling = {}) {
         super(steps);
         
-        // Store styling options
-        this.styling = styling || {};
+        // Store styling options with defaults
+        this.styling = this._mergeWithDefaults(styling || {});
         
         // Visual elements for step tracking
         this.stepDots = [];
         this.stepLines = [];
         this.visualContainer = new jsvgLayoutGroup();
-        this.dotRadius = getDotRadius(0);
-        this.lineWidth = 2;
-        this.visualSpacing = 30;
+        
+        // Use styling values for these properties
+        this.dotRadius = this.styling.dotRadius;
+        this.lineWidth = this.styling.lineWidth;
+        this.visualSpacing = this.styling.visualSpacing;
+        
         this.activeDotIndex = -1;
         this.dotsClickable = true;
         this.nodeToStepMap = new Map();
@@ -35,7 +38,10 @@ export class omdStepVisualizer extends omdEquationSequenceNode {
         // Highlighting system
         this.stepVisualizerHighlights = new Set();
         this.highlighting = new omdStepVisualizerHighlighting(this);
-        this.textBoxManager = new omdStepVisualizerTextBoxes(this, this.highlighting);
+        
+        // Pass textbox options through styling parameter
+        const textBoxOptions = this.styling.textBoxOptions || {};
+        this.textBoxManager = new omdStepVisualizerTextBoxes(this, this.highlighting, textBoxOptions);
         this.layoutManager = new omdStepVisualizerLayout(this);
         
         this.addChild(this.visualContainer);
@@ -43,19 +49,288 @@ export class omdStepVisualizer extends omdEquationSequenceNode {
         
         // 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();
     }
+
+    /**
+     * Public: programmatically toggle a dot (simulate user click behavior)
+     * @param {number} dotIndex
+     */
+    toggleDot(dotIndex) {
+        if (typeof dotIndex !== 'number') return;
+        if (dotIndex < 0 || dotIndex >= this.stepDots.length) return;
+        const dot = this.stepDots[dotIndex];
+        this._handleDotClick(dot, dotIndex);
+    }
+
+    /**
+     * Public: close currently active dot textbox if any
+     */
+    closeActiveDot() {
+        // Always clear all boxes to be safe (even if activeDotIndex already reset)
+        try {
+            const before = this.textBoxManager?.stepTextBoxes?.length || 0;
+            this._clearActiveDot();
+            if (this.textBoxManager && typeof this.textBoxManager.clearAllTextBoxes === 'function') {
+                this.textBoxManager.clearAllTextBoxes();
+            }
+            const after = this.textBoxManager?.stepTextBoxes?.length || 0;
+        } catch (e) { /* no-op */ }
+    }
+
+    /**
+     * Public: close all text boxes (future-proof; currently only one can be active)
+     */
+    closeAllTextBoxes() {
+        this.closeActiveDot();
+    }
+
+    /**
+     * Public: force close EVERYTHING related to active explanation UI
+     */
+    forceCloseAll() {
+        this.closeActiveDot();
+    }
+    
+    /**
+     * Merges user styling with default styling options
+     * @param {Object} userStyling - User-provided styling options
+     * @returns {Object} Merged styling object with defaults
+     * @private
+     */
+    _mergeWithDefaults(userStyling) {
+        const defaults = {
+            // Dot styling
+            dotColor: omdColor.stepColor,
+            dotRadius: getDotRadius(0),
+            dotStrokeWidth: 2,
+            activeDotColor: omdColor.explainColor,
+            expansionDotScale: 0.4,
+            
+            // Line styling
+            lineColor: omdColor.stepColor,
+            lineWidth: 2,
+            activeLineColor: omdColor.explainColor,
+            
+            // Colors
+            explainColor: omdColor.explainColor,
+            highlightColor: omdColor.hiliteColor,
+            
+            // Layout
+            visualSpacing: 30,
+            fixedVisualizerPosition: 250,
+            dotVerticalOffset: 15,
+            
+            // Text boxes
+            textBoxOptions: {
+                backgroundColor: omdColor.white,
+                borderColor: 'none',
+                borderWidth: 1,
+                borderRadius: 5,
+                padding: 8, // Minimal padding for tight fit
+                fontSize: 14,
+                fontFamily: 'Albert Sans, Arial, sans-serif',
+                maxWidth: 300, // More reasonable width for compact layout
+                dropShadow: true
+                // Removed zIndex and position from defaults - these should only apply to container
+            },
+            
+            // Visual effects
+            enableAnimations: true,
+            hoverEffects: true,
+            
+            // Background styling (inherited from equation styling)
+            backgroundColor: null,
+            cornerRadius: null,
+            pill: null
+        };
+        
+        return this._deepMerge(defaults, userStyling);
+    }
+    
+    /**
+     * Deep merge two objects
+     * @param {Object} target - Target object
+     * @param {Object} source - Source object
+     * @returns {Object} Merged object
+     * @private
+     */
+    _deepMerge(target, source) {
+        const result = { ...target };
+        
+        for (const key in source) {
+            if (source.hasOwnProperty(key)) {
+                if (typeof source[key] === 'object' && source[key] !== null && !Array.isArray(source[key])) {
+                    result[key] = this._deepMerge(result[key] || {}, source[key]);
+                } else {
+                    result[key] = source[key];
+                }
+            }
+        }
+        
+        return result;
+    }
+    
+    /**
+     * Updates the styling options and applies them to existing visual elements
+     * @param {Object} newStyling - New styling options to apply
+     */
+    setStyling(newStyling) {
+        this.styling = this._mergeWithDefaults({ ...this.styling, ...newStyling });
+        
+        // Update instance properties that are used elsewhere
+        this.dotRadius = this.styling.dotRadius;
+        this.lineWidth = this.styling.lineWidth;
+        this.visualSpacing = this.styling.visualSpacing;
+        
+        this._applyStylingToExistingElements();
+        
+        // Update layout spacing if changed
+        if (newStyling.visualSpacing !== undefined) {
+            this.visualSpacing = this.styling.visualSpacing;
+        }
+        if (newStyling.fixedVisualizerPosition !== undefined && this.layoutManager) {
+            this.layoutManager.setFixedVisualizerPosition(this.styling.fixedVisualizerPosition);
+        }
+        
+        // Refresh layout and visual elements
+        this.updateLayout();
+    }
+    
+    /**
+     * Gets the current styling options
+     * @returns {Object} Current styling configuration
+     */
+    getStyling() {
+        return { ...this.styling };
+    }
+    
+    /**
+     * Sets a specific styling property
+     * @param {string} property - The property to set (supports dot notation like 'textBoxOptions.backgroundColor')
+     * @param {any} value - The value to set
+     */
+    setStyleProperty(property, value) {
+        const keys = property.split('.');
+        const lastKey = keys.pop();
+        const target = keys.reduce((obj, key) => {
+            if (!obj[key]) obj[key] = {};
+            return obj[key];
+        }, this.styling);
+        
+        target[lastKey] = value;
+        
+        // Update instance properties if they were changed
+        if (property === 'dotRadius') this.dotRadius = value;
+        if (property === 'lineWidth') this.lineWidth = value;
+        if (property === 'visualSpacing') this.visualSpacing = value;
+        if (property === 'fixedVisualizerPosition' && this.layoutManager) {
+            this.layoutManager.setFixedVisualizerPosition(value);
+        }
+        
+        this._applyStylingToExistingElements();
+        this.updateLayout();
+    }
+    
+    /**
+     * Gets a specific styling property
+     * @param {string} property - The property to get (supports dot notation)
+     * @returns {any} The property value
+     */
+    getStyleProperty(property) {
+        return property.split('.').reduce((obj, key) => obj?.[key], this.styling);
+    }
+    
+    /**
+     * Applies current styling to all existing visual elements
+     * @private
+     */
+    _applyStylingToExistingElements() {
+        // Update dots
+        this.stepDots.forEach((dot, index) => {
+            if (dot && dot.equationRef) {
+                const isActive = this.activeDotIndex === index;
+                const color = isActive ? this.styling.activeDotColor : this.styling.dotColor;
+                dot.setFillColor(color);
+                dot.setStrokeColor(color);
+                dot.setStrokeWidth(this.styling.dotStrokeWidth);
+                
+                // Update radius based on step mark
+                const stepMark = dot.equationRef.stepMark ?? 0;
+                const radius = this.styling.dotRadius || getDotRadius(stepMark);
+                dot.setWidthAndHeight(radius * 2, radius * 2);
+                dot.radius = radius;
+            }
+        });
+        
+        // Update lines
+        this.stepLines.forEach((line, index) => {
+            if (line) {
+                const isActive = this.activeDotIndex >= 0 && 
+                    (line.toDotIndex === this.activeDotIndex || line.fromDotIndex === this.activeDotIndex);
+                const color = isActive ? this.styling.activeLineColor : this.styling.lineColor;
+                line.setStrokeColor(color);
+                line.setStrokeWidth(this.styling.lineWidth);
+            }
+        });
+        
+        // Update expansion dots
+        if (this.layoutManager && this.layoutManager.expansionDots) {
+            this.layoutManager.expansionDots.forEach(expansionDot => {
+                if (expansionDot) {
+                    const baseRadius = this.styling.dotRadius || getDotRadius(0);
+                    const radius = Math.max(3, baseRadius * this.styling.expansionDotScale);
+                    expansionDot.setWidthAndHeight(radius * 2, radius * 2);
+                    expansionDot.radius = radius;
+                    expansionDot.setFillColor(this.styling.dotColor);
+                    expansionDot.setStrokeColor(this.styling.dotColor);
+                }
+            });
+        }
+        
+        // Update text box styling if manager exists
+        if (this.textBoxManager && typeof this.textBoxManager.updateStyling === 'function') {
+            this.textBoxManager.updateStyling(this.styling.textBoxOptions);
+        }
+    }
+    
+    /**
+     * Sets the visual background style (inherits from equation styling)
+     * @param {Object} style - Background style options
+     */
+    setBackgroundStyle(style = {}) {
+        this.styling.backgroundColor = style.backgroundColor || this.styling.backgroundColor;
+        this.styling.cornerRadius = style.cornerRadius || this.styling.cornerRadius;
+        this.styling.pill = style.pill !== undefined ? style.pill : this.styling.pill;
+        
+        // Apply to equation background if this step visualizer has equation styling
+        if (typeof this.setDefaultEquationBackground === 'function') {
+            this.setDefaultEquationBackground(style);
+        }
+    }
+    
+    /**
+     * Gets the current background style
+     * @returns {Object} Current background style
+     */
+    getBackgroundStyle() {
+        return {
+            backgroundColor: this.styling.backgroundColor,
+            cornerRadius: this.styling.cornerRadius,
+            pill: this.styling.pill
+        };
+    }
     
     /**
      * Sets the fixed position for the step visualizer
@@ -103,7 +378,7 @@ export class omdStepVisualizer extends omdEquationSequenceNode {
         });
         
         this.layoutManager.updateVisualZOrder();
-        this.layoutManager.updateVisualLayout();
+        this.layoutManager.updateVisualLayout(true); 
     }
     
     /**
@@ -111,13 +386,14 @@ export class omdStepVisualizer extends omdEquationSequenceNode {
      * @private
      */
     _createStepDot(equation, index) {
-        const radius = getDotRadius(equation.stepMark ?? 0);
+        const stepMark = equation.stepMark ?? 0;
+        const radius = this.styling.dotRadius || getDotRadius(stepMark);
         const dot = new jsvgEllipse();
         dot.setWidthAndHeight(radius * 2, radius * 2);
-        const dotColor = this.styling.dotColor || omdColor.stepColor;
+        const dotColor = this.styling.dotColor;
         dot.setFillColor(dotColor);
         dot.setStrokeColor(dotColor);
-        dot.setStrokeWidth(this.lineWidth);
+        dot.setStrokeWidth(this.styling.dotStrokeWidth);
         dot.radius = radius;
         
         dot.equationRef = equation;
@@ -141,9 +417,9 @@ export class omdStepVisualizer extends omdEquationSequenceNode {
      */
     _createStepLine(fromIndex, toIndex) {
         const line = new jsvgLine();
-        const lineColor = this.styling.lineColor || omdColor.stepColor;
+        const lineColor = this.styling.lineColor;
         line.setStrokeColor(lineColor);
-        line.setStrokeWidth(this.lineWidth);
+        line.setStrokeWidth(this.styling.lineWidth);
         
         line.fromDotIndex = fromIndex;
         line.toDotIndex = toIndex;
@@ -226,7 +502,9 @@ export class omdStepVisualizer extends omdEquationSequenceNode {
      */
     computeDimensions() {
         super.computeDimensions();
+        // Store original dimensions before visualizer expansion
         this.sequenceWidth = this.width;
+        this.sequenceHeight = this.height;
         
         // Set width to include the fixed visualizer position plus visualizer width
         if (this.stepDots && this.stepDots.length > 0 && this.layoutManager) {
@@ -241,26 +519,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.updateVisualLayout(true); // Allow repositioning for main layout updates
+            
+            
             this.layoutManager.updateVisualVisibility();
             
-            console.debug('Calling layoutManager.updateAllLinePositions()...');
+            
             this.layoutManager.updateAllLinePositions();
         } else {
-            console.debug('WARNING: LayoutManager not initialized!');
+            
         }
         
-        console.debug('=== omdStepVisualizer.updateLayout END ===\n');
+        
     }
 
     /**
@@ -363,11 +641,11 @@ export class omdStepVisualizer extends omdEquationSequenceNode {
         this.activeDot = this.stepDots[dotIndex];
         
         const dot = this.stepDots[dotIndex];
-        const explainColor = this.styling.explainColor || omdColor.explainColor;
+        const explainColor = this.styling.activeDotColor;
         dot.setFillColor(explainColor);
         dot.setStrokeColor(explainColor);
         
-        this.setLineAboveColor(dotIndex, this.styling.explainColor || omdColor.explainColor);
+        this.setLineAboveColor(dotIndex, this.styling.activeLineColor);
         this.textBoxManager.createTextBoxForDot(dotIndex);
         
         // Temporarily disable equation repositioning for simple dot state changes
@@ -380,16 +658,20 @@ export class omdStepVisualizer extends omdEquationSequenceNode {
     /**
      * Clears the currently active dot
      * @private
+     */
+        /**
+     * Clears the currently active dot
+     * @private
      */
     _clearActiveDot() {
         try {
             if (this.activeDotIndex !== -1) {
                 const dot = this.stepDots[this.activeDotIndex];
-                const dotColor = this.styling.dotColor || omdColor.stepColor;
+                const dotColor = this.styling.dotColor;
                 dot.setFillColor(dotColor);
                 dot.setStrokeColor(dotColor);
                 
-                this.setLineAboveColor(this.activeDotIndex, this.styling.lineColor || omdColor.stepColor);
+                this.setLineAboveColor(this.activeDotIndex, this.styling.lineColor);
                 this.textBoxManager.removeTextBoxForDot(this.activeDotIndex);
                 
                 this.highlighting.clearHighlights();