@teachinglab/omd 0.2.7 → 0.2.9

package/canvas/drawing/stroke.js

@@ -1,5 +1,5 @@
 import { BoundingBox } from '../utils/boundingBox.js';
-
+import { jsvgPath } from '@teachinglab/jsvg';
 /**
  * Represents a drawing stroke made up of connected points
  */

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
         };
 
@@ -27,6 +28,13 @@ export class omdDisplay {
         this.svg = new jsvgContainer();
         this.node = null;
 
+        // Internal guards to prevent recursive resize induced growth
+        this._suppressResizeObserver = false; // When true, _handleResize is a no-op
+        this._lastViewbox = null;             // Cache last applied viewBox string
+        this._lastContentExtents = null;      // Cache last measured content extents to detect real growth
+        this._viewboxLocked = false;          // When true, suppress micro growth adjustments
+        this._viewboxLockThreshold = 8;       // Require at least 8px growth once locked
+
         // Set up the SVG
         this._setupSVG();
     }
@@ -64,8 +72,13 @@ export class omdDisplay {
     }
 
     _handleResize() {
+        if (this._suppressResizeObserver) return; // Prevent re-entrant resize loops
         const width = this.container.offsetWidth;
         const height = this.container.offsetHeight;
+        // Skip if size unchanged; avoids loops where internal changes trigger observer without real container delta
+        if (this._lastContainerWidth === width && this._lastContainerHeight === height) return;
+        this._lastContainerWidth = width;
+        this._lastContainerHeight = height;
         this.svg.setViewbox(width, height);
 
         if (this.options.centerContent && this.node) {
@@ -131,8 +144,50 @@ export class omdDisplay {
         const desiredW = Math.max(curW, desiredRight - desiredX);
         const desiredH = Math.max(curH, desiredBottom - desiredY);
 
-        if (desiredW !== curW || desiredH !== curH) {
-            this.svg.svgObject.setAttribute('viewBox', `${desiredX} ${desiredY} ${desiredW} ${desiredH}`);
+        // Guard: If the desired size change is negligible (< 0.5px), skip.
+        const widthDelta = Math.abs(desiredW - curW);
+        const heightDelta = Math.abs(desiredH - curH);
+
+        // Safety cap to avoid runaway expansion due to logic errors.
+        const MAX_DIM = 10000; // arbitrary large but finite limit
+        if (desiredW > MAX_DIM || desiredH > MAX_DIM) {
+            console.warn('omdDisplay: viewBox growth capped to prevent runaway expansion', desiredW, desiredH);
+            return;
+        }
+
+        if (widthDelta < 0.5 && heightDelta < 0.5) return;
+
+        // Detect repeated growth with identical content extents (suggests feedback loop)
+        const curExtSignature = `${minX},${minY},${maxX},${maxY}`;
+        if (this._lastContentExtents === curExtSignature && heightDelta > 0 && desiredH > curH) {
+            return; // content unchanged, skip
+        }
+
+        // If locked, only allow substantial growth
+        if (this._viewboxLocked) {
+            const growW = desiredW - curW;
+            const growH = desiredH - curH;
+            if (growW < this._viewboxLockThreshold && growH < this._viewboxLockThreshold) {
+                return; // ignore micro growth attempts
+            }
+        }
+
+        const newViewBox = `${desiredX} ${desiredY} ${desiredW} ${desiredH}`;
+        if (this._lastViewbox === newViewBox) return;
+
+        this._suppressResizeObserver = true;
+        try {
+            this.svg.svgObject.setAttribute('viewBox', newViewBox);
+        } finally {
+            // Allow ResizeObserver events after microtask; use timeout to defer
+            setTimeout(() => { this._suppressResizeObserver = false; }, 0);
+        }
+        this._lastViewbox = newViewBox;
+        this._lastContentExtents = curExtSignature;
+
+        // Lock if the growth applied was small; prevents future tiny increments
+        if (heightDelta < 2 && widthDelta < 2 && !this._viewboxLocked) {
+            this._viewboxLocked = true;
         }
     }
 
@@ -396,9 +451,28 @@ export class omdDisplay {
 
     centerNode() {
         if (!this.node) return;
+        if (!this._centerCallCount) this._centerCallCount = 0;
+        this._centerCallCount++;
+        if (this._centerCallCount > 500) {
+            console.warn('omdDisplay: excessive centerNode calls detected; halting further centering to prevent loop');
+            return;
+        }
         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,14 +480,18 @@ 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;
                 }
                 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);
                     }
                 }
             }
@@ -422,22 +500,45 @@ export class omdDisplay {
         // 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);
+            }
+
+            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;
+            } 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;
             }
-            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,19 +552,27 @@ 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;
         const willOverflowVert = totalNeededH > containerHeight;
 
+        // Avoid looping if content dimension signature hasn't changed
+        const contentSig = `${contentWidth}x${contentHeight}x${scale}`;
+        if (this._lastCenterSignature === contentSig && !willOverflowHoriz && !willOverflowVert) {
+            // Only update position; skip expensive ensureViewboxFits
+            if (this.node.setPosition) this.node.setPosition(x, this.options.topMargin);
+            return;
+        }
+
         if (willOverflowHoriz || willOverflowVert) {
             // Set scale but do NOT reposition node (preserve its absolute positions).
             if (this.node.setScale) this.node.setScale(scale);
@@ -499,6 +608,8 @@ export class omdDisplay {
             }
             if (this.options.debugExtents) this._drawDebugOverlays();
         }
+
+        this._lastCenterSignature = contentSig;
     }
 
     fitToContent() {
@@ -517,15 +628,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 +737,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
@@ -834,4 +944,12 @@ export class omdDisplay {
             node.positionToolbarOverlay(containerWidth, containerHeight, padding);
         }
     }
+
+    /**
+     * Public API: returns the currently rendered root node (could be a step visualizer, sequence, or plain node)
+     * @returns {object|null}
+     */
+    getCurrentNode() {
+        return this.node;
+    }
 }

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
         };
     }