@teachinglab/omd 0.2.6 → 0.2.8

package/omd/step-visualizer/omdStepVisualizerLayout.js

@@ -1,6 +1,7 @@
 import { omdEquationNode } from '../nodes/omdEquationNode.js';
 import { omdColor } from '../../src/omdColor.js';
-import { jsvgLine } from '@teachinglab/jsvg';
+import { jsvgLine, jsvgEllipse } from '@teachinglab/jsvg';
+import { getDotRadius } from '../config/omdConfigManager.js';
 
 /**
  * Handles visual layout, positioning, and visibility management for step visualizations
@@ -8,22 +9,66 @@ import { jsvgLine } from '@teachinglab/jsvg';
 export class omdStepVisualizerLayout {
     constructor(stepVisualizer) {
         this.stepVisualizer = stepVisualizer;
+        this.expansionDots = []; // Small dots that show/hide hidden steps
+        this.fixedVisualizerPosition = 250; // Fixed position for the step visualizer from left edge
+        this.allowEquationRepositioning = true; // Flag to control when equations can be repositioned
+    }
+
+    /**
+     * 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) {
+        // Only update if position actually changes
+        if (this.fixedVisualizerPosition !== position) {
+            this.fixedVisualizerPosition = position;
+            // Trigger a layout update if the visualizer is already initialized
+            if (this.stepVisualizer && this.stepVisualizer.stepDots.length > 0) {
+                this.updateVisualLayout(true); // Allow repositioning for position changes
+            }
+        }
     }
 
     /**
      * Updates the layout of visual elements relative to the sequence
+     * @param {boolean} allowRepositioning - Whether to allow equation repositioning (default: false)
      */
-    updateVisualLayout() {
+    updateVisualLayout(allowRepositioning = false) {
+        
+        
+        
+        
         if (this.stepVisualizer.stepDots.length === 0) return;
         
-        // Position visual container to the right of the sequence
-        // Add extra offset based on equation background padding (if any)
-        const baseRight = (this.stepVisualizer.sequenceWidth || this.stepVisualizer.width);
-        // Use EFFECTIVE padding (after pill clamping) to avoid overlap when pills are wider
+        // Calculate the total width needed for equations (including any padding)
+        const baseEquationWidth = (this.stepVisualizer.sequenceWidth || this.stepVisualizer.width);
         const extraPaddingX = this._getMaxEquationEffectivePaddingX();
-        const visualX = baseRight + this.stepVisualizer.visualSpacing + extraPaddingX;
+        const totalEquationWidth = baseEquationWidth + extraPaddingX;
+        
+        // Position visual container at a fixed position
+        const visualX = this.fixedVisualizerPosition;
         this.stepVisualizer.visualContainer.setPosition(visualX, 0);
         
+        // Only reposition equations if explicitly allowed (not during simple dot clicks)
+        if (this.allowEquationRepositioning && allowRepositioning) {
+            
+            // Calculate how much space is available for equations before the visualizer
+            const availableEquationSpace = this.fixedVisualizerPosition - this.stepVisualizer.visualSpacing;
+            
+            // If equations are too wide, shift them left to fit
+            let equationOffsetX = 0;
+            if (totalEquationWidth > availableEquationSpace) {
+                equationOffsetX = availableEquationSpace - totalEquationWidth;
+                
+            }
+            
+            // Apply the offset to equation positioning
+            this._adjustEquationPositions(equationOffsetX);
+        } else {
+            
+            
+        }
+        
         // Position dots based on visible equations
         const visibleSteps = this.stepVisualizer.steps.filter(s => s.visible !== false);
         let currentY = 0;
@@ -61,6 +106,11 @@ export class omdStepVisualizerLayout {
         let containerWidth = this.stepVisualizer.dotRadius * 3;
         let containerHeight = this.stepVisualizer.height;
         
+        // Store the original height before expansion for autoscale calculations
+        if (!this.stepVisualizer.sequenceHeight) {
+            this.stepVisualizer.sequenceHeight = containerHeight;
+        }
+        
         const textBoxes = this.stepVisualizer.textBoxManager.getStepTextBoxes();
         if (textBoxes.length > 0) {
             const textBoxWidth = 280;
@@ -88,6 +138,37 @@ export class omdStepVisualizerLayout {
         
         this.stepVisualizer.visualContainer.setWidthAndHeight(containerWidth, containerHeight);
         this.updateVisualZOrder();
+        
+        // Position expansion dots after main dots are positioned
+        this._positionExpansionDots();
+    }
+
+    /**
+     * Adjusts the horizontal position of all equations by the specified offset
+     * @private
+     */
+    _adjustEquationPositions(offsetX) {
+        if (offsetX === 0) return; // No adjustment needed
+        
+        const sv = this.stepVisualizer;
+        
+        // Adjust position of all steps (equations and operation display nodes)
+        sv.steps.forEach(step => {
+            if (step && step.setPosition) {
+                const currentX = step.xpos || 0;
+                const currentY = step.ypos || 0;
+                step.setPosition(currentX + offsetX, currentY);
+                
+                // Also adjust operation display nodes if they exist
+                if (step.operationDisplayNode && step.operationDisplayNode.setPosition) {
+                    const opCurrentX = step.operationDisplayNode.xpos || 0;
+                    const opCurrentY = step.operationDisplayNode.ypos || 0;
+                    step.operationDisplayNode.setPosition(opCurrentX + offsetX, opCurrentY);
+                }
+            }
+        });
+        
+        
     }
 
     /**
@@ -157,6 +238,16 @@ export class omdStepVisualizerLayout {
                 }
             }
         });
+
+        // Expansion dots on top of regular dots (z-index 4)
+        this.expansionDots.forEach(dot => {
+            if (dot && dot.svgObject) {
+                dot.svgObject.style.zIndex = '4';
+                if (dot.parentNode !== this.stepVisualizer.visualContainer) {
+                    this.stepVisualizer.visualContainer.addChild(dot);
+                }
+            }
+        });
     }
 
     /**
@@ -177,20 +268,33 @@ export class omdStepVisualizerLayout {
      * Updates visibility of visual elements based on equation visibility
      */
     updateVisualVisibility() {
+        
         const sv = this.stepVisualizer;
 
-        // Update dot visibility first, which is the source of truth
-        sv.stepDots.forEach(dot => {
+        // Update dot visibility and color first, which is the source of truth
+        const dotColor = sv.styling?.dotColor || omdColor.stepColor;
+        
+        
+        sv.stepDots.forEach((dot, index) => {
             if (dot.equationRef && dot.equationRef.visible !== false) {
+                dot.setFillColor(dotColor);
+                dot.setStrokeColor(dotColor);
                 dot.show();
                 dot.visible = true; // Use the dot's own visibility property
+                
             } else {
                 dot.hide();
                 dot.visible = false;
+                
             }
         });
 
+        // Clear existing expansion dots
+        
+        this._clearExpansionDots();
+
         // Remove all old lines from the container and the array
+        
         sv.stepLines.forEach(line => {
             // Remove the line if it is currently a child of the visualContainer
             if (line.parent === sv.visualContainer) {
@@ -201,24 +305,37 @@ export class omdStepVisualizerLayout {
 
         // Get the dots that are currently visible
         const visibleDots = sv.stepDots.filter(dot => dot.visible);
+        
 
         // Re-create connecting lines only between the visible dots
+        
         for (let i = 0; i < visibleDots.length - 1; i++) {
             const fromDot = visibleDots[i];
             const toDot = visibleDots[i + 1];
 
             const line = new jsvgLine();
-            line.setStrokeColor(omdColor.stepColor);
-            line.setStrokeWidth(sv.lineWidth);
+            const lineColor = sv.styling?.lineColor || omdColor.stepColor;
+            line.setStrokeColor(lineColor);
+            line.setStrokeWidth(sv.styling?.lineWidth || sv.lineWidth);
             line.fromDotIndex = sv.stepDots.indexOf(fromDot);
             line.toDotIndex = sv.stepDots.indexOf(toDot);
 
             sv.visualContainer.addChild(line);
             sv.stepLines.push(line);
         }
+        
 
         // After creating the lines, update their positions
         this.updateAllLinePositions();
+
+        // Create expansion dots for dots that have hidden steps before them
+        
+        this._createExpansionDots();
+        
+        
+        this._positionExpansionDots();
+        
+        
     }
 
     /**
@@ -242,4 +359,530 @@ export class omdStepVisualizerLayout {
             dot.svgObject.onclick = null;
         }
     }
+
+    /**
+     * Clears all expansion dots
+     * @private
+     */
+    _clearExpansionDots() {
+        this.expansionDots.forEach(dot => {
+            if (dot.parentNode === this.stepVisualizer.visualContainer) {
+                this.stepVisualizer.visualContainer.removeChild(dot);
+            }
+        });
+        this.expansionDots = [];
+    }
+
+    /**
+     * Creates expansion dots for visible dots that have hidden steps before them
+     * @private
+     */
+    _createExpansionDots() {
+        
+        const sv = this.stepVisualizer;
+        const allDots = sv.stepDots;
+        const visibleDots = sv.stepDots.filter(dot => dot.visible);
+        
+        
+        
+        // Debug all steps and their properties
+        
+        sv.steps.forEach((step, i) => {
+            if (step && (step instanceof omdEquationNode || step.constructor.name === 'omdEquationNode')) {
+                
+            } else {
+                
+            }
+        });
+        
+        // Debug all dots and their properties
+        
+        allDots.forEach((dot, i) => {
+            if (dot && dot.equationRef) {
+                
+            } else {
+                
+            }
+        });
+        
+        
+        
+        // Check for hidden intermediate steps between consecutive visible major steps (stepMark = 0)
+        const visibleMajorSteps = [];
+        sv.steps.forEach((step, stepIndex) => {
+            if (step && (step instanceof omdEquationNode || step.constructor.name === 'omdEquationNode')) {
+                if (step.stepMark === 0 && step.visible === true) {
+                    visibleMajorSteps.push(stepIndex);
+                    
+                }
+            }
+        });
+        
+        
+        
+        // Check between consecutive visible major steps for hidden intermediate steps
+        for (let i = 1; i < visibleMajorSteps.length; i++) {
+            const previousMajorStepIndex = visibleMajorSteps[i - 1];
+            const currentMajorStepIndex = visibleMajorSteps[i];
+            
+            
+            
+            // Count hidden intermediate steps between these major steps
+            let hiddenIntermediateCount = 0;
+            for (let j = previousMajorStepIndex + 1; j < currentMajorStepIndex; j++) {
+                const step = sv.steps[j];
+                if (step && (step instanceof omdEquationNode || step.constructor.name === 'omdEquationNode')) {
+                    if (step.stepMark > 0 && step.visible === false) {
+                        hiddenIntermediateCount++;
+                        
+                    }
+                }
+            }
+            
+            
+            
+            if (hiddenIntermediateCount > 0) {
+                
+                // Find the dot for the current major step to position the expansion dot above it
+                const currentMajorStep = sv.steps[currentMajorStepIndex];
+                const currentDotIndex = sv.stepDots.findIndex(dot => dot.equationRef === currentMajorStep);
+                
+                if (currentDotIndex >= 0) {
+                    // Find the position in the visible dots array
+                    const visibleDotIndex = i; // i is the position in visibleMajorSteps array
+                    
+                    const expansionDot = this._createSingleExpansionDot(visibleDotIndex, previousMajorStepIndex, hiddenIntermediateCount);
+                    expansionDot.majorStepIndex = currentMajorStepIndex; // Store for reference
+                    this.expansionDots.push(expansionDot);
+                    sv.visualContainer.addChild(expansionDot);
+                    
+                } else {
+                    
+                }
+            } else {
+                
+            }
+        }
+        
+        
+        // Also create collapse dots for expanded sequences
+        this._createCollapseDots();
+        
+        
+        
+    }
+
+    /**
+     * Counts intermediate steps (stepMark > 0) between two visible dots
+     * @private
+     */
+    _countIntermediateStepsBetween(fromDotIndex, toDotIndex) {
+        const sv = this.stepVisualizer;
+        let count = 0;
+        
+        // Get the equation references for the from and to dots
+        const fromEquation = sv.stepDots[fromDotIndex]?.equationRef;
+        const toEquation = sv.stepDots[toDotIndex]?.equationRef;
+        
+        if (!fromEquation || !toEquation) {
+            
+            return 0;
+        }
+        
+        // Find the step indices in the main steps array
+        const fromStepIndex = sv.steps.indexOf(fromEquation);
+        const toStepIndex = sv.steps.indexOf(toEquation);
+        
+        
+        
+        // Count intermediate steps between these two major steps
+        for (let i = fromStepIndex + 1; i < toStepIndex; i++) {
+            const step = sv.steps[i];
+            if (step && (step instanceof omdEquationNode || step.constructor.name === 'omdEquationNode')) {
+                // Count intermediate steps (stepMark > 0) that are currently hidden
+                if (step.stepMark !== undefined && step.stepMark > 0 && step.visible === false) {
+                    
+                    count++;
+                }
+            }
+        }
+        
+        
+        return count;
+    }
+
+    /**
+     * Counts hidden steps between two step indices (legacy method for backward compatibility)
+     * @private
+     */
+    _countHiddenStepsBetween(fromIndex, toIndex) {
+        return this._countIntermediateStepsBetween(fromIndex, toIndex);
+    }
+
+    /**
+     * Creates a single expansion dot
+     * @private
+     */
+    _createSingleExpansionDot(currentStepIndex, previousStepIndex, hiddenCount) {
+        
+        const sv = this.stepVisualizer;
+        const baseRadius = sv.styling?.dotRadius || getDotRadius(0);
+        const expansionRadius = Math.max(3, baseRadius * (sv.styling?.expansionDotScale || 0.4));
+        
+        
+        
+        const expansionDot = new jsvgEllipse();
+        expansionDot.setWidthAndHeight(expansionRadius * 2, expansionRadius * 2);
+        
+        // Use same color as regular dots from styling
+        const dotColor = sv.styling?.dotColor || omdColor.stepColor;
+        
+        expansionDot.setFillColor(dotColor);
+        expansionDot.setStrokeColor(dotColor);
+        expansionDot.setStrokeWidth(sv.styling?.dotStrokeWidth || 1);
+        
+        // Store metadata
+        expansionDot.isExpansionDot = true;
+        expansionDot.currentStepIndex = currentStepIndex;
+        expansionDot.previousStepIndex = previousStepIndex;
+        expansionDot.hiddenCount = hiddenCount;
+        expansionDot.radius = expansionRadius;
+        
+        
+        // Make it clickable
+        expansionDot.svgObject.style.cursor = "pointer";
+        expansionDot.svgObject.onclick = (event) => {
+            try {
+                
+                this._handleExpansionDotClick(expansionDot);
+                event.stopPropagation();
+            } catch (error) {
+                console.error('Error in expansion dot click handler:', error);
+            }
+        };
+        
+        
+        
+        
+        return expansionDot;
+    }
+
+    /**
+     * Positions expansion dots above their corresponding main dots
+     * @private
+     */
+    _positionExpansionDots() {
+        
+        const sv = this.stepVisualizer;
+        
+        
+        
+        this.expansionDots.forEach((expansionDot, index) => {
+            
+            let targetDot;
+            
+            if (expansionDot.isCollapseDot) {
+                
+                // For collapse dots, use the currentStepIndex which points to the dot index
+                const dotIndex = expansionDot.currentStepIndex;
+                targetDot = sv.stepDots[dotIndex];
+                
+            } else {
+                
+                // For expansion dots, we need to find the actual visible dot that corresponds to the major step
+                const majorStepIndex = expansionDot.majorStepIndex;
+                const majorStep = sv.steps[majorStepIndex];
+                
+                if (majorStep) {
+                    // Find the dot that corresponds to this major step
+                    const dotIndex = sv.stepDots.findIndex(dot => dot.equationRef === majorStep);
+                    targetDot = sv.stepDots[dotIndex];
+                    
+                } else {
+                    
+                }
+            }
+            
+            if (targetDot && targetDot.visible) {
+                const offsetY = -(expansionDot.radius * 2 + 8); // Position above main dot
+                const newX = targetDot.xpos;
+                const newY = targetDot.ypos + offsetY;
+                
+                expansionDot.setPosition(newX, newY);
+                
+            } else {
+                
+            }
+        });
+        
+        
+    }
+
+    /**
+     * Creates collapse dots for expanded sequences
+     * @private
+     */
+    _createCollapseDots() {
+        
+        const sv = this.stepVisualizer;
+        const allDots = sv.stepDots;
+        
+        
+        
+        // Group visible intermediate steps by their consecutive sequences
+        const intermediateGroups = [];
+        let currentGroup = [];
+        
+        allDots.forEach((dot, index) => {
+            if (dot && dot.visible && dot.equationRef) {
+                const stepMark = dot.equationRef.stepMark;
+                
+                
+                if (stepMark !== undefined && stepMark > 0) {
+                    currentGroup.push(index);
+                    
+                } else if (currentGroup.length > 0) {
+                    // We hit a major step, so end the current group
+                    intermediateGroups.push([...currentGroup]);
+                    
+                    currentGroup = [];
+                }
+            } else if (currentGroup.length > 0) {
+                // We hit a non-visible dot, so end the current group
+                intermediateGroups.push([...currentGroup]);
+                
+                currentGroup = [];
+            }
+        });
+        
+        // Don't forget the last group if it exists
+        if (currentGroup.length > 0) {
+            intermediateGroups.push([...currentGroup]);
+            
+        }
+        
+        
+        
+        // Create a collapse dot for each group
+        intermediateGroups.forEach((group, groupIndex) => {
+            if (group.length > 0) {
+                
+                
+                // Find the major step that comes after the last intermediate step in this group
+                const lastIntermediateIndex = group[group.length - 1];
+                const lastIntermediateDot = sv.stepDots[lastIntermediateIndex];
+                const lastIntermediateStep = lastIntermediateDot.equationRef;
+                const lastIntermediateStepIndex = sv.steps.indexOf(lastIntermediateStep);
+                
+                
+                
+                // Find the next major step (stepMark = 0) after the intermediate steps
+                let majorStepAfterIndex = -1;
+                for (let i = lastIntermediateStepIndex + 1; i < sv.steps.length; i++) {
+                    const step = sv.steps[i];
+                    if (step && (step instanceof omdEquationNode || step.constructor.name === 'omdEquationNode')) {
+                        if (step.stepMark === 0 && step.visible === true) {
+                            majorStepAfterIndex = i;
+                            
+                            break;
+                        }
+                    }
+                }
+                
+                if (majorStepAfterIndex >= 0) {
+                    // Find the dot index for this major step
+                    const majorStepAfter = sv.steps[majorStepAfterIndex];
+                    const majorDotIndex = sv.stepDots.findIndex(dot => dot.equationRef === majorStepAfter);
+                    
+                    if (majorDotIndex >= 0) {
+                        
+                        
+                        const collapseDot = this._createSingleExpansionDot(majorDotIndex, -1, group.length);
+                        collapseDot.isCollapseDot = true;
+                        collapseDot.intermediateSteps = group;
+                        collapseDot.groupIndex = groupIndex; // Store group reference
+                        this.expansionDots.push(collapseDot);
+                        sv.visualContainer.addChild(collapseDot);
+                        
+                    } else {
+                        
+                    }
+                } else {
+                    
+                }
+            }
+        });
+        
+        
+    }
+
+    /**
+     * Handles clicking on an expansion dot to toggle hidden steps
+     * @private
+     */
+    _handleExpansionDotClick(expansionDot) {
+        const sv = this.stepVisualizer;
+        
+        if (expansionDot.isCollapseDot) {
+            // Handle collapse dot click - hide only the specific group of intermediate steps
+            
+            
+            // Hide only the intermediate steps in this specific group
+            const intermediateSteps = expansionDot.intermediateSteps || [];
+            
+            
+            intermediateSteps.forEach(dotIndex => {
+                const dot = sv.stepDots[dotIndex];
+                if (dot && dot.equationRef) {
+                    
+                    this._hideStep(dot.equationRef);
+                    
+                    // Also hide the corresponding dot
+                    dot.hide();
+                    dot.visible = false;
+                    
+                }
+            });
+            
+            // Remove any lines that connect to the hidden dots
+            
+            this._removeLinesToHiddenDots();
+            
+            
+        } else {
+            // Handle expansion dot click - show steps between the major steps
+            const { majorStepIndex, previousStepIndex } = expansionDot;
+            
+            
+            
+            // Remove this expansion dot immediately since we're expanding
+            
+            if (expansionDot.parentNode === sv.visualContainer) {
+                sv.visualContainer.removeChild(expansionDot);
+            }
+            const dotIndex = this.expansionDots.indexOf(expansionDot);
+            if (dotIndex >= 0) {
+                this.expansionDots.splice(dotIndex, 1);
+                
+            }
+            
+            // Show all intermediate steps between the previous and current major steps
+            for (let i = previousStepIndex + 1; i < majorStepIndex; i++) {
+                const step = sv.steps[i];
+                if (step && (step instanceof omdEquationNode || step.constructor.name === 'omdEquationNode')) {
+                    if (step.stepMark > 0) {
+                        
+                        this._showStep(step);
+                        
+                        // Also show the corresponding dot
+                        const stepDotIndex = sv.stepDots.findIndex(dot => dot.equationRef === step);
+                        if (stepDotIndex >= 0) {
+                            const stepDot = sv.stepDots[stepDotIndex];
+                            stepDot.show();
+                            stepDot.visible = true;
+                            
+                        }
+                    }
+                }
+            }
+            
+            
+        }
+        
+        // Force a complete refresh of the visualizer to clean up artifacts and rebuild lines
+        sv.rebuildVisualizer();
+    }
+
+    /**
+     * Properly hides a step and all its child elements
+     * @private
+     */
+    _hideStep(step) {
+        step.visible = false;
+        if (step.svgObject) {
+            step.svgObject.style.display = 'none';
+        }
+        
+        // Also hide operation display nodes if they exist
+        if (step.operationDisplayNode) {
+            step.operationDisplayNode.visible = false;
+            if (step.operationDisplayNode.svgObject) {
+                step.operationDisplayNode.svgObject.style.display = 'none';
+            }
+        }
+        
+        // Hide any child nodes recursively
+        if (step.children && Array.isArray(step.children)) {
+            step.children.forEach(child => {
+                if (child) {
+                    this._hideStep(child);
+                }
+            });
+        }
+    }
+
+    /**
+     * Properly shows a step and all its child elements
+     * @private
+     */
+    _showStep(step) {
+        step.visible = true;
+        if (step.svgObject) {
+            step.svgObject.style.display = '';
+        }
+        
+        // Also show operation display nodes if they exist
+        if (step.operationDisplayNode) {
+            step.operationDisplayNode.visible = true;
+            if (step.operationDisplayNode.svgObject) {
+                step.operationDisplayNode.svgObject.style.display = '';
+            }
+        }
+        
+        // Show any child nodes recursively
+        if (step.children && Array.isArray(step.children)) {
+            step.children.forEach(child => {
+                if (child) {
+                    this._showStep(child);
+                }
+            });
+        }
+    }
+
+    /**
+     * Removes lines that connect to hidden dots
+     * @private
+     */
+    _removeLinesToHiddenDots() {
+        const sv = this.stepVisualizer;
+        
+        
+        // Get lines that connect to hidden dots
+        const linesToRemove = [];
+        sv.stepLines.forEach((line, lineIndex) => {
+            const fromDot = sv.stepDots[line.fromDotIndex];
+            const toDot = sv.stepDots[line.toDotIndex];
+            
+            if ((fromDot && !fromDot.visible) || (toDot && !toDot.visible)) {
+                
+                linesToRemove.push(line);
+            }
+        });
+        
+        // Remove the problematic lines
+        
+        linesToRemove.forEach(line => {
+            if (line.parent === sv.visualContainer) {
+                sv.visualContainer.removeChild(line);
+                
+            }
+            const lineIndex = sv.stepLines.indexOf(line);
+            if (lineIndex >= 0) {
+                sv.stepLines.splice(lineIndex, 1);
+                
+            }
+        });
+        
+        
+    }
 }