@teachinglab/omd 0.2.7 → 0.2.8

package/canvas/ui/toolbar.js

@@ -60,21 +60,6 @@ export class Toolbar {
         
     // Add to main SVG so it is rendered
     this.canvas.svg.appendChild(this.toolbarGroup.svgObject);
-        
-        
-        // Check if the SVG is actually in the DOM
-        setTimeout(() => {
-            
-            
-            // Check the actual SVG content
-            console.log('Toolbar SVG innerHTML:', this.toolbarGroup.svgObject.innerHTML);
-            console.log('Background SVG object:', this.background.svgObject);
-            console.log('Background SVG innerHTML:', this.background.svgObject.outerHTML);
-            
-            // Check if the background is visible
-            console.log('Background fill color:', this.background.svgObject.getAttribute('fill'));
-            console.log('Background width/height:', this.background.svgObject.getAttribute('width'), this.background.svgObject.getAttribute('height'));
-        }, 100);
     }
     
     /**

package/omd/core/omdEquationStack.js

@@ -34,7 +34,9 @@ export class omdEquationStack extends jsvgGroup {
 
         // The sequence is the core. If a visualizer is needed, that's our sequence.
         if (options.stepVisualizer) {
-            this.sequence = new omdStepVisualizer(steps, this.stylingOptions || {});
+            // Pass through step visualizer styling options
+            const stepVisualizerStyling = this.stylingOptions?.stepVisualizer || {};
+            this.sequence = new omdStepVisualizer(steps, stepVisualizerStyling);
         } else {
             this.sequence = new omdEquationSequenceNode(steps);
         }
@@ -44,6 +46,13 @@ export class omdEquationStack extends jsvgGroup {
             this.sequence.setDefaultEquationBackground(this.stylingOptions.equationBackground);
         }
 
+        // Apply step visualizer background styling if provided
+        if (options.stepVisualizer && this.stylingOptions?.stepVisualizerBackground) {
+            if (typeof this.sequence.setBackgroundStyle === 'function') {
+                this.sequence.setBackgroundStyle(this.stylingOptions.stepVisualizerBackground);
+            }
+        }
+
         // If a toolbar is needed, create it.
         if (this.toolbarOptions?.enabled) {
             // Default undo: call global hook if provided
@@ -508,7 +517,7 @@ export class omdEquationStack extends jsvgGroup {
             }
             if (seq.layoutManager) {
                 try {
-                    seq.layoutManager.updateVisualLayout();
+                    seq.layoutManager.updateVisualLayout(true); // Allow repositioning for equation stack changes
                     seq.layoutManager.updateVisualVisibility();
                     seq.layoutManager.updateAllLinePositions();
                 } catch (_) {}

package/omd/display/omdDisplay.js

@@ -20,6 +20,7 @@ export class omdDisplay {
             autoScale: true,      // Automatically scale content to fit container
             maxScale: 1,          // Do not upscale beyond 1 by default
             edgePadding: 16,      // Horizontal padding from edges when scaling
+            autoCloseStepVisualizer: true, // Close active step visualizer text boxes before autoscale to avoid shrink
             ...options
         };
 
@@ -399,6 +400,19 @@ export class omdDisplay {
         const containerWidth = this.container.offsetWidth || 0;
         const containerHeight = this.container.offsetHeight || 0;
 
+        // Early auto-close of step visualizer UI before measuring dimensions to avoid transient height inflation
+        if (this.options.autoCloseStepVisualizer && this.node) {
+            try {
+                if (typeof this.node.forceCloseAll === 'function') {
+                    this.node.forceCloseAll();
+                } else if (typeof this.node.closeAllTextBoxes === 'function') {
+                    this.node.closeAllTextBoxes();
+                } else if (typeof this.node.closeActiveDot === 'function') {
+                    this.node.closeActiveDot();
+                }
+            } catch (e) { /* no-op */ }
+        }
+
         // Determine actual content size (prefer sequence/current step when available)
         let contentWidth = this.node.width || 0;
         let contentHeight = this.node.height || 0;
@@ -406,38 +420,71 @@ export class omdDisplay {
             const seq = this.node.getSequence();
             if (seq) {
                 if (seq.width && seq.height) {
-                    contentWidth = seq.width;
-                    contentHeight = seq.height;
+                    // For step visualizers, use sequenceWidth/Height instead of total dimensions to exclude visualizer elements from autoscale
+                    contentWidth = seq.sequenceWidth || seq.width;
+                    contentHeight = seq.sequenceHeight || seq.height;
+                    console.log('omdDisplay: Using sequence dimensions for autoscale - sequenceWidth:', seq.sequenceWidth, 'sequenceHeight:', seq.sequenceHeight, 'width:', seq.width, 'height:', seq.height, 'contentWidth:', contentWidth, 'contentHeight:', contentHeight);
                 }
                 if (seq.getCurrentStep) {
                     const step = seq.getCurrentStep();
                     if (step && step.width && step.height) {
-                        contentWidth = Math.max(contentWidth, step.width);
-                        contentHeight = Math.max(contentHeight, step.height);
+                        // For step visualizers, prioritize sequenceWidth/Height for dimension calculations
+                        const stepWidth = seq.sequenceWidth || step.width;
+                        const stepHeight = seq.sequenceHeight || step.height;
+                        contentWidth = Math.max(contentWidth, stepWidth);
+                        contentHeight = Math.max(contentHeight, stepHeight);
+                        console.log('omdDisplay: Considering step dimensions - stepWidth:', stepWidth, 'stepHeight:', stepHeight, 'finalContentWidth:', contentWidth, 'finalContentHeight:', contentHeight);
                     }
                 }
             }
         }
+        console.log('omdDisplay: Final content dimensions for autoscale - width:', contentWidth, 'height:', contentHeight);
 
         // Compute scale to keep within bounds
         let scale = 1;
         if (this.options.autoScale && contentWidth > 0 && contentHeight > 0) {
-            const hPad = this.options.edgePadding || 0;
-            const vPadTop = this.options.topMargin || 0;
-            const vPadBottom = this.options.bottomMargin || 0;
-            // Reserve extra space for overlay toolbar if needed
-            let reserveBottom = vPadBottom;
-            if (this.node && typeof this.node.isToolbarOverlay === 'function' && this.node.isToolbarOverlay()) {
-                const tH = (typeof this.node.getToolbarVisualHeight === 'function') ? this.node.getToolbarVisualHeight() : 0;
-                reserveBottom += (tH + (this.node.getOverlayPadding ? this.node.getOverlayPadding() : 16));
+            // Optionally close any open step visualizer textbox to prevent transient height expansion
+            if (this.options.autoCloseStepVisualizer && this.node) {
+                try {
+                    if (typeof this.node.closeActiveDot === 'function') {
+                        this.node.closeActiveDot();
+                    } else if (typeof this.node.closeAllTextBoxes === 'function') {
+                        this.node.closeAllTextBoxes();
+                    }
+                } catch (e) { /* no-op */ }
+            }
+            // Detect step visualizer directly on node (getSequence returns underlying sequence only)
+            let hasStepVisualizer = false;
+            if (this.node) {
+                const ctorName = this.node.constructor?.name;
+                hasStepVisualizer = (ctorName === 'omdStepVisualizer') || this.node.type === 'omdStepVisualizer' || (typeof omdStepVisualizer !== 'undefined' && this.node instanceof omdStepVisualizer);
+                console.log('omdDisplay: Step visualizer detection (node) ctor:', ctorName, 'type:', this.node.type, 'detected:', hasStepVisualizer);
+            }
+
+            if (hasStepVisualizer) {
+                // Preserve existing scale if already set on node; otherwise lock to 1.
+                const existingScale = (this.node && typeof this.node.scale === 'number') ? this.node.scale : undefined;
+                scale = (existingScale && existingScale > 0) ? existingScale : 1;
+                console.log('omdDisplay: Step visualizer detected - locking scale at', scale);
+            } else {
+                const hPad = this.options.edgePadding || 0;
+                const vPadTop = this.options.topMargin || 0;
+                const vPadBottom = this.options.bottomMargin || 0;
+                // Reserve extra space for overlay toolbar if needed
+                let reserveBottom = vPadBottom;
+                if (this.node && typeof this.node.isToolbarOverlay === 'function' && this.node.isToolbarOverlay()) {
+                    const tH = (typeof this.node.getToolbarVisualHeight === 'function') ? this.node.getToolbarVisualHeight() : 0;
+                    reserveBottom += (tH + (this.node.getOverlayPadding ? this.node.getOverlayPadding() : 16));
+                }
+                const availW = Math.max(0, containerWidth - hPad * 2);
+                const availH = Math.max(0, containerHeight - (vPadTop + reserveBottom));
+                const sx = availW > 0 ? (availW / contentWidth) : 1;
+                const sy = availH > 0 ? (availH / contentHeight) : 1;
+                const maxScale = (typeof this.options.maxScale === 'number') ? this.options.maxScale : 1;
+                scale = Math.min(sx, sy, maxScale);
+                if (!isFinite(scale) || scale <= 0) scale = 1;
+                console.log('omdDisplay: Autoscale calculation - availW:', availW, 'availH:', availH, 'contentW:', contentWidth, 'contentH:', contentHeight, 'scale:', scale);
             }
-            const availW = Math.max(0, containerWidth - hPad * 2);
-            const availH = Math.max(0, containerHeight - (vPadTop + reserveBottom));
-            const sx = availW > 0 ? (availW / contentWidth) : 1;
-            const sy = availH > 0 ? (availH / contentHeight) : 1;
-            const maxScale = (typeof this.options.maxScale === 'number') ? this.options.maxScale : 1;
-            scale = Math.min(sx, sy, maxScale);
-            if (!isFinite(scale) || scale <= 0) scale = 1;
         }
 
         // Apply scale
@@ -451,14 +498,14 @@ export class omdDisplay {
             const screenCenterX = containerWidth / 2;
             x = screenCenterX - (this.node.alignPointX * scale);
         } else {
-            const scaledWidth = (this.node.width || contentWidth) * scale;
+            const scaledWidth = contentWidth * scale;
             x = (containerWidth - scaledWidth) / 2;
         }
 
         // Decide whether positioning would move content outside container. If so,
         // prefer expanding the SVG viewBox instead of moving nodes.
-        const scaledWidthFinal = (this.node.width || contentWidth) * scale;
-        const scaledHeightFinal = (this.node.height || contentHeight) * scale;
+        const scaledWidthFinal = contentWidth * scale;
+        const scaledHeightFinal = contentHeight * scale;
         const totalNeededH = scaledHeightFinal + (this.options.topMargin || 0) + (this.options.bottomMargin || 0);
 
         const willOverflowHoriz = scaledWidthFinal > containerWidth;
@@ -517,15 +564,17 @@ export class omdDisplay {
         if (this.node.getSequence) {
             const sequence = this.node.getSequence();
             if (sequence && sequence.width && sequence.height) {
-                sequenceWidth = sequence.width;
-                sequenceHeight = sequence.height;
+                // For step visualizers, use sequenceWidth/Height instead of total dimensions to exclude visualizer elements from autoscale
+                sequenceWidth = sequence.sequenceWidth || sequence.width;
+                sequenceHeight = sequence.sequenceHeight || sequence.height;
 
                 // Check current step dimensions too
                 if (sequence.getCurrentStep) {
                     const currentStep = sequence.getCurrentStep();
                     if (currentStep && currentStep.width && currentStep.height) {
-                        stepWidth = currentStep.width;
-                        stepHeight = currentStep.height;
+                        // For step visualizers, prioritize sequenceWidth/Height for dimension calculations
+                        stepWidth = sequence.sequenceWidth || currentStep.width;
+                        stepHeight = sequence.sequenceHeight || currentStep.height;
                     }
                 }
 
@@ -624,10 +673,7 @@ export class omdDisplay {
 
         // Apply any stored font settings
         if (this.options.fontFamily) {
-            // Small delay to ensure SVG elements are fully rendered
-            setTimeout(() => {
                 this.setFont(this.options.fontFamily, this.options.fontWeight || '400');
-            }, 10);
         }
 
         // Only use fitToContent for tight sizing when explicitly requested

package/omd/nodes/omdEquationNode.js

@@ -1005,7 +1005,7 @@ _propagateBackgroundStyle(style, visited = new Set()) {
             case 'table':
                 return this._renderToTable(mergedOptions);
             case 'hanger':
-                return this._renderToHanger();
+                return this._renderToHanger(mergedOptions);
             case 'tileequation': {
                 const leftExpr = this.getLeft().toString();
                 const rightExpr = this.getRight().toString();
@@ -1089,6 +1089,11 @@ _propagateBackgroundStyle(style, visited = new Set()) {
             tickInterval: (options.tickInterval !== undefined) ? options.tickInterval : 1,
             forceAllTickLabels: (options.forceAllTickLabels !== undefined) ? options.forceAllTickLabels : true,
             showTickLabels: (options.showTickLabels !== undefined) ? options.showTickLabels : true,
+            // Background customization options
+            backgroundColor: (options.backgroundColor !== undefined) ? options.backgroundColor : undefined,
+            backgroundCornerRadius: (options.backgroundCornerRadius !== undefined) ? options.backgroundCornerRadius : undefined,
+            backgroundOpacity: (options.backgroundOpacity !== undefined) ? options.backgroundOpacity : undefined,
+            showBackground: (options.showBackground !== undefined) ? options.showBackground : undefined,
             graphEquations,
             lineSegments: [],
             dotValues: [],
@@ -1113,7 +1118,17 @@ _propagateBackgroundStyle(style, visited = new Set()) {
                 equation: `y = ${expr}`,
                 xMin: options.xMin,
                 xMax: options.xMax,
-                stepSize: options.stepSize
+                stepSize: options.stepSize,
+                // Background customization options
+                backgroundColor: (options.backgroundColor !== undefined) ? options.backgroundColor : undefined,
+                backgroundCornerRadius: (options.backgroundCornerRadius !== undefined) ? options.backgroundCornerRadius : undefined,
+                backgroundOpacity: (options.backgroundOpacity !== undefined) ? options.backgroundOpacity : undefined,
+                showBackground: (options.showBackground !== undefined) ? options.showBackground : undefined,
+                // Alternating row color options
+                alternatingRowColors: (options.alternatingRowColors !== undefined) ? options.alternatingRowColors : undefined,
+                evenRowColor: (options.evenRowColor !== undefined) ? options.evenRowColor : undefined,
+                oddRowColor: (options.oddRowColor !== undefined) ? options.oddRowColor : undefined,
+                alternatingRowOpacity: (options.alternatingRowOpacity !== undefined) ? options.alternatingRowOpacity : undefined
             };
         } else if (options.side === 'right') {
             const expr = this._normalizeExpressionString(this.getRight().toString());
@@ -1124,7 +1139,17 @@ _propagateBackgroundStyle(style, visited = new Set()) {
                 equation: `y = ${expr}`,
                 xMin: options.xMin,
                 xMax: options.xMax,
-                stepSize: options.stepSize
+                stepSize: options.stepSize,
+                // Background customization options
+                backgroundColor: (options.backgroundColor !== undefined) ? options.backgroundColor : undefined,
+                backgroundCornerRadius: (options.backgroundCornerRadius !== undefined) ? options.backgroundCornerRadius : undefined,
+                backgroundOpacity: (options.backgroundOpacity !== undefined) ? options.backgroundOpacity : undefined,
+                showBackground: (options.showBackground !== undefined) ? options.showBackground : undefined,
+                // Alternating row color options
+                alternatingRowColors: (options.alternatingRowColors !== undefined) ? options.alternatingRowColors : undefined,
+                evenRowColor: (options.evenRowColor !== undefined) ? options.evenRowColor : undefined,
+                oddRowColor: (options.oddRowColor !== undefined) ? options.oddRowColor : undefined,
+                alternatingRowOpacity: (options.alternatingRowOpacity !== undefined) ? options.alternatingRowOpacity : undefined
             };
         }
 
@@ -1155,7 +1180,17 @@ _propagateBackgroundStyle(style, visited = new Set()) {
             omdType: "table",
             title: `Equation Table: ${this.toString()}`,
             headers,
-            data
+            data,
+            // Background customization options
+            backgroundColor: (options.backgroundColor !== undefined) ? options.backgroundColor : undefined,
+            backgroundCornerRadius: (options.backgroundCornerRadius !== undefined) ? options.backgroundCornerRadius : undefined,
+            backgroundOpacity: (options.backgroundOpacity !== undefined) ? options.backgroundOpacity : undefined,
+            showBackground: (options.showBackground !== undefined) ? options.showBackground : undefined,
+            // Alternating row color options
+            alternatingRowColors: (options.alternatingRowColors !== undefined) ? options.alternatingRowColors : undefined,
+            evenRowColor: (options.evenRowColor !== undefined) ? options.evenRowColor : undefined,
+            oddRowColor: (options.oddRowColor !== undefined) ? options.oddRowColor : undefined,
+            alternatingRowOpacity: (options.alternatingRowOpacity !== undefined) ? options.alternatingRowOpacity : undefined
         };
     }
 
@@ -1184,7 +1219,7 @@ _propagateBackgroundStyle(style, visited = new Set()) {
      * @returns {Object} JSON configuration for omdBalanceHanger
      * @private
      */
-    _renderToHanger() {
+    _renderToHanger(options = {}) {
         // Convert equation sides to hanger representation
         const leftValues = this._convertToHangerValues(this.getLeft());
         const rightValues = this._convertToHangerValues(this.getRight());
@@ -1193,7 +1228,12 @@ _propagateBackgroundStyle(style, visited = new Set()) {
             omdType: "balanceHanger",
             leftValues: leftValues,
             rightValues: rightValues,
-            tilt: "none" // Equations should be balanced by definition
+            tilt: "none", // Equations should be balanced by definition
+            // Background customization options
+            backgroundColor: (options.backgroundColor !== undefined) ? options.backgroundColor : undefined,
+            backgroundCornerRadius: (options.backgroundCornerRadius !== undefined) ? options.backgroundCornerRadius : undefined,
+            backgroundOpacity: (options.backgroundOpacity !== undefined) ? options.backgroundOpacity : undefined,
+            showBackground: (options.showBackground !== undefined) ? options.showBackground : undefined
         };
     }