@teachinglab/omd 0.2.6 → 0.2.8

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
         };
 
@@ -41,6 +42,19 @@ export class omdDisplay {
         this.svg.svgObject.style.overflow = 'hidden';
         this.container.appendChild(this.svg.svgObject);
 
+        // Create a dedicated content group we can translate to compensate for
+        // viewBox origin changes (so expanding the origin doesn't visually move content).
+        try {
+            const ns = 'http://www.w3.org/2000/svg';
+            this._contentGroup = document.createElementNS(ns, 'g');
+            this._contentGroup.setAttribute('id', 'omd-content-root');
+            this.svg.svgObject.appendChild(this._contentGroup);
+            this._contentOffsetX = 0;
+            this._contentOffsetY = 0;
+        } catch (e) {
+            this._contentGroup = null;
+        }
+
         // Handle resize
         if (window.ResizeObserver) {
             this.resizeObserver = new ResizeObserver(() => {
@@ -61,6 +75,324 @@ export class omdDisplay {
 
         // Reposition overlay toolbar (if any) on resize
         this._repositionOverlayToolbar();
+        if (this.options.debugExtents) this._drawDebugOverlays();
+    }
+
+    /**
+     * Ensure the internal SVG viewBox is at least as large as the provided content dimensions.
+     * This prevents clipping when content is larger than the current viewBox.
+     * @param {number} contentWidth
+     * @param {number} contentHeight
+     */
+    _ensureViewboxFits(contentWidth, contentHeight) {
+        // If caller provided just width/height, but we prefer extents, bail early
+        if (!this.node) return;
+        const pad = 10;
+
+        // Prefer DOM measured extents (accounts for strokes, transforms, children SVG geometry)
+        let ext = null;
+        try {
+            const collected = this._collectNodeExtents(this.node);
+            if (collected) {
+                ext = { minX: collected.minX, minY: collected.minY, maxX: collected.maxX, maxY: collected.maxY };
+            }
+        } catch (e) {
+            ext = null;
+        }
+        if (!ext) {
+            ext = this._computeNodeExtents(this.node);
+        }
+        if (!ext) return;
+
+        const minX = Math.floor(ext.minX - pad);
+        const minY = Math.floor(ext.minY - pad);
+        const maxX = Math.ceil(ext.maxX + pad);
+        const maxY = Math.ceil(ext.maxY + pad);
+
+        const curView = this.svg.svgObject.getAttribute('viewBox') || '';
+        let curX = 0, curY = 0, curW = 0, curH = 0;
+        if (curView) {
+            const parts = curView.split(/\s+/).map(Number).filter(n => !isNaN(n));
+            if (parts.length === 4) {
+                curX = parts[0];
+                curY = parts[1];
+                curW = parts[2];
+                curH = parts[3];
+            }
+        }
+
+        // To avoid shifting visible content, keep the current viewBox origin (curX,curY)
+        // and only expand width/height as needed. Changing the origin would change
+        // the mapping from SVG coordinates to screen coordinates and appear to move
+        // existing content.
+        const desiredX = curX;
+        const desiredY = curY;
+        const desiredRight = Math.max(curX + curW, maxX);
+        const desiredBottom = Math.max(curY + curH, maxY);
+        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}`);
+        }
+    }
+
+    /**
+     * Walk the node tree and compute absolute extents in SVG coordinates.
+     * Uses `xpos`/`ypos` and `width`/`height` properties; falls back to 0 when missing.
+     * @param {omdNode} root
+     * @returns {{minX:number,minY:number,maxX:number,maxY:number}}
+     */
+    _computeNodeExtents(root) {
+        if (!root) return null;
+        const visited = new Set();
+        const stack = [{ node: root, absX: root.xpos || 0, absY: root.ypos || 0 }];
+        let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+
+        while (stack.length) {
+            const { node, absX, absY } = stack.pop();
+            if (!node || visited.has(node)) continue;
+            visited.add(node);
+
+            const w = node.width || 0;
+            const h = node.height || 0;
+            const nx = absX;
+            const ny = absY;
+            minX = Math.min(minX, nx);
+            minY = Math.min(minY, ny);
+            maxX = Math.max(maxX, nx + w);
+            maxY = Math.max(maxY, ny + h);
+
+            // push children
+            if (Array.isArray(node.childList)) {
+                for (const c of node.childList) {
+                    if (!c) continue;
+                    const cx = (c.xpos || 0) + nx;
+                    const cy = (c.ypos || 0) + ny;
+                    stack.push({ node: c, absX: cx, absY: cy });
+                }
+            }
+            if (node.argumentNodeList) {
+                for (const val of Object.values(node.argumentNodeList)) {
+                    if (Array.isArray(val)) {
+                        for (const v of val) {
+                            if (!v) continue;
+                            const vx = (v.xpos || 0) + nx;
+                            const vy = (v.ypos || 0) + ny;
+                            stack.push({ node: v, absX: vx, absY: vy });
+                        }
+                    } else if (val) {
+                        const vx = (val.xpos || 0) + nx;
+                        const vy = (val.ypos || 0) + ny;
+                        stack.push({ node: val, absX: vx, absY: vy });
+                    }
+                }
+            }
+        }
+
+        if (minX === Infinity) return null;
+        return { minX, minY, maxX, maxY };
+    }
+
+    /**
+     * Collect extents for each node and return per-node list plus overall extents.
+     * Useful for debugging elements that extend outside parent coordinates.
+     * @param {omdNode} root
+     * @returns {{nodes:Array, minX:number, minY:number, maxX:number, maxY:number}}
+     */
+    _collectNodeExtents(root) {
+        if (!root) return null;
+        const visited = new Set();
+        const stack = [{ node: root, absX: root.xpos || 0, absY: root.ypos || 0, parent: null }];
+        const nodes = [];
+        let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+
+
+        while (stack.length) {
+            const { node, absX, absY, parent } = stack.pop();
+            if (!node || visited.has(node)) continue;
+            visited.add(node);
+
+            // Prefer DOM measurement if available for accuracy
+            let nx = absX;
+            let ny = absY;
+            let nminX = nx;
+            let nminY = ny;
+            let nmaxX = nx;
+            let nmaxY = ny;
+
+            try {
+                if (node.svgObject && typeof node.svgObject.getBBox === 'function' && typeof node.svgObject.getCTM === 'function') {
+                    const bbox = node.svgObject.getBBox();
+                    const ctm = node.svgObject.getCTM();
+                    // Transform all four bbox corners into root SVG coordinates
+                    const corners = [
+                        { x: bbox.x, y: bbox.y },
+                        { x: bbox.x + bbox.width, y: bbox.y },
+                        { x: bbox.x, y: bbox.y + bbox.height },
+                        { x: bbox.x + bbox.width, y: bbox.y + bbox.height }
+                    ];
+                    const tx = corners.map(p => ({
+                        x: ctm.a * p.x + ctm.c * p.y + ctm.e,
+                        y: ctm.b * p.x + ctm.d * p.y + ctm.f
+                    }));
+                    nminX = Math.min(...tx.map(t => t.x));
+                    nminY = Math.min(...tx.map(t => t.y));
+                    nmaxX = Math.max(...tx.map(t => t.x));
+                    nmaxY = Math.max(...tx.map(t => t.y));
+                    nx = nminX;
+                    ny = nminY;
+                } else {
+                    const w = node.width || 0;
+                    const h = node.height || 0;
+                    nx = absX;
+                    ny = absY;
+                    nminX = nx;
+                    nminY = ny;
+                    nmaxX = nx + w;
+                    nmaxY = ny + h;
+                }
+            } catch (e) {
+                const w = node.width || 0;
+                const h = node.height || 0;
+                nx = absX;
+                ny = absY;
+                nminX = nx;
+                nminY = ny;
+                nmaxX = nx + w;
+                nmaxY = ny + h;
+            }
+
+            nodes.push({ node, minX: nminX, minY: nminY, maxX: nmaxX, maxY: nmaxY, parent });
+
+            minX = Math.min(minX, nminX);
+            minY = Math.min(minY, nminY);
+            maxX = Math.max(maxX, nmaxX);
+            maxY = Math.max(maxY, nmaxY);
+
+            // push children
+            if (Array.isArray(node.childList)) {
+                for (const c of node.childList) {
+                    if (!c) continue;
+                    const cx = (c.xpos || 0) + nx;
+                    const cy = (c.ypos || 0) + ny;
+                    stack.push({ node: c, absX: cx, absY: cy, parent: node });
+                }
+            }
+            if (node.argumentNodeList) {
+                for (const val of Object.values(node.argumentNodeList)) {
+                    if (Array.isArray(val)) {
+                        for (const v of val) {
+                            if (!v) continue;
+                            const vx = (v.xpos || 0) + nx;
+                            const vy = (v.ypos || 0) + ny;
+                            stack.push({ node: v, absX: vx, absY: vy, parent: node });
+                        }
+                    } else if (val) {
+                        const vx = (val.xpos || 0) + nx;
+                        const vy = (val.ypos || 0) + ny;
+                        stack.push({ node: val, absX: vx, absY: vy, parent: node });
+                    }
+                }
+            }
+        }
+
+        if (minX === Infinity) return null;
+        return { nodes, minX, minY, maxX, maxY };
+    }
+
+    _clearDebugOverlays() {
+        if (!this.svg || !this.svg.svgObject) return;
+        const existing = this.svg.svgObject.querySelector('#omd-debug-overlays');
+        if (existing) existing.remove();
+    }
+
+    _drawDebugOverlays() {
+        if (!this.options.debugExtents) return;
+        if (!this.svg || !this.svg.svgObject || !this.node) return;
+
+        this._clearDebugOverlays();
+
+        const ns = 'http://www.w3.org/2000/svg';
+        const group = document.createElementNS(ns, 'g');
+        group.setAttribute('id', 'omd-debug-overlays');
+        group.setAttribute('pointer-events', 'none');
+
+        // overall node extents
+        const collected = this._collectNodeExtents(this.node);
+        if (!collected) return;
+
+        const { nodes, minX, minY, maxX, maxY } = collected;
+
+        // Draw content extents (blue dashed)
+        const contentRect = document.createElementNS(ns, 'rect');
+        contentRect.setAttribute('x', String(minX));
+        contentRect.setAttribute('y', String(minY));
+        contentRect.setAttribute('width', String(maxX - minX));
+        contentRect.setAttribute('height', String(maxY - minY));
+        contentRect.setAttribute('fill', 'none');
+        contentRect.setAttribute('stroke', 'blue');
+        contentRect.setAttribute('stroke-dasharray', '6 4');
+        contentRect.setAttribute('stroke-width', '0.8');
+        group.appendChild(contentRect);
+
+        // Draw viewBox rect (orange)
+        const curView = this.svg.svgObject.getAttribute('viewBox') || '';
+        if (curView) {
+            const parts = curView.split(/\s+/).map(Number).filter(n => !isNaN(n));
+            if (parts.length === 4) {
+                const [vx, vy, vw, vh] = parts;
+                const vbRect = document.createElementNS(ns, 'rect');
+                vbRect.setAttribute('x', String(vx));
+                vbRect.setAttribute('y', String(vy));
+                vbRect.setAttribute('width', String(vw));
+                vbRect.setAttribute('height', String(vh));
+                vbRect.setAttribute('fill', 'none');
+                vbRect.setAttribute('stroke', 'orange');
+                vbRect.setAttribute('stroke-width', '1');
+                vbRect.setAttribute('opacity', '0.9');
+                group.appendChild(vbRect);
+            }
+        }
+
+        // Per-node boxes: green if inside parent, red if overflowing parent bounds
+    const overflowing = [];
+    for (const item of nodes) {
+            const r = document.createElementNS(ns, 'rect');
+            r.setAttribute('x', String(item.minX));
+            r.setAttribute('y', String(item.minY));
+            r.setAttribute('width', String(Math.max(0, item.maxX - item.minX)));
+            r.setAttribute('height', String(Math.max(0, item.maxY - item.minY)));
+            r.setAttribute('fill', 'none');
+            r.setAttribute('stroke-width', '0.6');
+
+            let stroke = 'green';
+            if (item.parent) {
+                const pMinX = (item.parent.xpos || 0) + (item.parent._absX || 0);
+                const pMinY = (item.parent.ypos || 0) + (item.parent._absY || 0);
+                // fallback compute parent's absX/Y from nodes list if available
+                const parentEntry = nodes.find(n => n.node === item.parent);
+                const pminX = parentEntry ? parentEntry.minX : pMinX;
+                const pminY = parentEntry ? parentEntry.minY : pMinY;
+                const pmaxX = parentEntry ? parentEntry.maxX : pminX + (item.parent.width || 0);
+                const pmaxY = parentEntry ? parentEntry.maxY : pminY + (item.parent.height || 0);
+
+                if (item.minX < pminX || item.minY < pminY || item.maxX > pmaxX || item.maxY > pmaxY) {
+                    stroke = 'red';
+                    overflowing.push({ node: item.node, bounds: item });
+                }
+            }
+
+            r.setAttribute('stroke', stroke);
+            r.setAttribute('opacity', stroke === 'red' ? '0.9' : '0.6');
+            group.appendChild(r);
+        }
+
+        if (overflowing.length) {
+            console.warn('omdDisplay: debugExtents found overflowing nodes:', overflowing.map(o => ({ type: o.node?.type, bounds: o.bounds }))); 
+        }
+
+        this.svg.svgObject.appendChild(group);
     }
 
     centerNode() {
@@ -68,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;
@@ -75,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
@@ -120,24 +498,53 @@ 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;
         }
 
-        // Y is top margin; scaled content will grow downward
-        this.node.setPosition(x, this.options.topMargin);
+        // Decide whether positioning would move content outside container. If so,
+        // prefer expanding the SVG viewBox instead of moving nodes.
+        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;
+
+        if (willOverflowHoriz || willOverflowVert) {
+            // Set scale but do NOT reposition node (preserve its absolute positions).
+            if (this.node.setScale) this.node.setScale(scale);
+            // Expand viewBox to contain entire unscaled content so nothing is clipped.
+            this._ensureViewboxFits(contentWidth, contentHeight);
+            // Reposition overlay toolbar in case viewBox/container changed
+            this._repositionOverlayToolbar();
+
+            // If content still exceeds available height in the host, allow vertical scrolling
+            if (willOverflowVert) {
+                this.container.style.overflowY = 'auto';
+                this.container.style.overflowX = 'hidden';
+            } else {
+                this.container.style.overflow = 'hidden';
+            }
+            if (this.options.debugExtents) this._drawDebugOverlays();
+        } else {
+            // Y is top margin; scaled content will grow downward
+            this.node.setPosition(x, this.options.topMargin);
 
-        // Reposition overlay toolbar (if any)
-        this._repositionOverlayToolbar();
+            // Reposition overlay toolbar (if any)
+            this._repositionOverlayToolbar();
 
-        // If content still exceeds available height (even after scaling), enable container scroll
-        const totalNeededH = (contentHeight * scale) + (this.options.topMargin || 0) + (this.options.bottomMargin || 0);
-        if (totalNeededH > containerHeight) {
-            // Let the host scroll vertically; keep horizontal overflow hidden to avoid layout shift
-            this.container.style.overflowY = 'auto';
-            this.container.style.overflowX = 'hidden';
-        } else {
-            this.container.style.overflow = 'hidden';
+            // Ensure viewBox can contain the (unscaled) content to avoid clipping in some hosts
+            this._ensureViewboxFits(contentWidth, contentHeight);
+
+            if (totalNeededH > containerHeight) {
+                // Let the host scroll vertically; keep horizontal overflow hidden to avoid layout shift
+                this.container.style.overflowY = 'auto';
+                this.container.style.overflowX = 'hidden';
+            } else {
+                this.container.style.overflow = 'hidden';
+            }
+            if (this.options.debugExtents) this._drawDebugOverlays();
         }
     }
 
@@ -157,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;
                     }
                 }
 
@@ -204,6 +613,8 @@ export class omdDisplay {
         // Update container
         this.container.style.width = `${newWidth}px`;
         this.container.style.height = `${newHeight}px`;
+        if (this.options.debugExtents) this._drawDebugOverlays();
+        else this._clearDebugOverlays();
     }
 
     /**
@@ -214,7 +625,11 @@ export class omdDisplay {
     render(expression) {
         // Clear previous node
         if (this.node) {
-            this.svg.removeChild(this.node);
+            if (this._contentGroup && this.node && this.node.svgObject) {
+                this._contentGroup.removeChild(this.node.svgObject);
+            } else {
+                this.svg.removeChild(this.node);
+            }
         }
 
         // Create node from expression
@@ -223,18 +638,18 @@ export class omdDisplay {
                 // Multiple equations
                 const equationStrings = expression.split(';').filter(s => s.trim() !== '');
                 const steps = equationStrings.map(str => omdEquationNode.fromString(str));
-                this.node = new omdStepVisualizer(steps);
+                this.node = new omdStepVisualizer(steps, this.options.styling || {});
             } else {
                 // Single expression or equation
                 if (expression.includes('=')) {
                     const firstStep = omdEquationNode.fromString(expression);
-                    this.node = new omdStepVisualizer([firstStep]);
+                    this.node = new omdStepVisualizer([firstStep], this.options.styling || {});
                 } else {
                     // Create node directly from expression
                     const parsedAST = math.parse(expression);
                     const NodeClass = getNodeForAST(parsedAST);
                     const firstStep = new NodeClass(parsedAST);
-                    this.node = new omdStepVisualizer([firstStep]);
+                    this.node = new omdStepVisualizer([firstStep], this.options.styling || {});
                 }
             }
         } else {
@@ -249,14 +664,16 @@ export class omdDisplay {
             // Apply filtering based on filterLevel
             sequence.updateStepsVisibility(step => (step.stepMark ?? 0) === sequence.getFilterLevel());
         }
-        this.svg.addChild(this.node);
+        // Prefer appending the node's svgObject into our content group so DOM measurements are consistent
+        if (this._contentGroup && this.node && this.node.svgObject) {
+            try { this._contentGroup.appendChild(this.node.svgObject); } catch (e) { this.svg.addChild(this.node); }
+        } else {
+            this.svg.addChild(this.node);
+        }
 
         // 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
@@ -268,6 +685,14 @@ export class omdDisplay {
         // Ensure overlay toolbar is positioned initially
         this._repositionOverlayToolbar();
 
+    // Also ensure the viewBox is large enough to contain the node (avoid clipping)
+    const cw = (this.node && this.node.width) ? this.node.width : 0;
+    const ch = (this.node && this.node.height) ? this.node.height : 0;
+    this._ensureViewboxFits(cw, ch);
+
+        if (this.options.debugExtents) this._drawDebugOverlays();
+        else this._clearDebugOverlays();
+
         // Provide a default global refresh function if not present
         if (typeof window !== 'undefined' && !window.refreshDisplayAndFilters) {
             window.refreshDisplayAndFilters = () => {
@@ -282,7 +707,7 @@ export class omdDisplay {
                             sequence.updateStepsVisibility(step => (step.stepMark ?? 0) === 0);
                         }
                         if (typeof node.updateLayout === 'function') {
-                            node.updateLayout();
+                                node.updateLayout();
                         }
                     }
                     if (this.options.centerContent) {
@@ -303,7 +728,11 @@ export class omdDisplay {
      * @param {object} child - A jsvg node to add
      */
     addChild(child) {
-        this.svg.addChild(child);
+        if (this._contentGroup && child && child.svgObject) {
+            try { this._contentGroup.appendChild(child.svgObject); } catch (e) { this.svg.addChild(child); }
+        } else {
+            this.svg.addChild(child);
+        }
 
         if (this.options.centerContent) this.centerNode();
 
@@ -317,10 +746,16 @@ export class omdDisplay {
     removeChild(child) {
         if (!this.svg) return;
         try {
-            if (typeof this.svg.removeChild === 'function') {
+            if (child && child.svgObject) {
+                if (this._contentGroup && this._contentGroup.contains(child.svgObject)) {
+                    this._contentGroup.removeChild(child.svgObject);
+                } else if (this.svg.svgObject && this.svg.svgObject.contains(child.svgObject)) {
+                    this.svg.svgObject.removeChild(child.svgObject);
+                } else if (typeof this.svg.removeChild === 'function') {
+                    this.svg.removeChild(child);
+                }
+            } else if (typeof this.svg.removeChild === 'function') {
                 this.svg.removeChild(child);
-            } else if (child && child.svgObject && this.svg.svgObject && this.svg.svgObject.contains(child.svgObject)) {
-                this.svg.svgObject.removeChild(child.svgObject);
             }
         } catch (e) {
             // no-op
@@ -335,13 +770,21 @@ export class omdDisplay {
      */
     update(newNode) {
         if (this.node) {
-            this.svg.removeChild(this.node);
+            if (this._contentGroup && this.node && this.node.svgObject && this._contentGroup.contains(this.node.svgObject)) {
+                this._contentGroup.removeChild(this.node.svgObject);
+            } else if (typeof this.svg.removeChild === 'function') {
+                this.svg.removeChild(this.node);
+            }
         }
 
         this.node = newNode;
         this.node.setFontSize(this.options.fontSize);
         this.node.initialize();
-        this.svg.addChild(this.node);
+        if (this._contentGroup && this.node && this.node.svgObject) {
+            try { this._contentGroup.appendChild(this.node.svgObject); } catch (e) { this.svg.addChild(this.node); }
+        } else {
+            this.svg.addChild(this.node);
+        }
 
         if (this.options.centerContent) {
             this.centerNode();
@@ -350,36 +793,7 @@ export class omdDisplay {
         this._repositionOverlayToolbar();
     }
 
-    /**
-     * Gets the current node
-     * @returns {omdNode|null} The current node
-     */
-    getCurrentNode() {
-        return this.node;
-    }
-
-    /**
-     * Repositions overlay toolbar if current node supports it
-     * @private
-     */
-    _repositionOverlayToolbar() {
-        const rect = this.container.getBoundingClientRect();
-        const paddingTop = parseFloat(getComputedStyle(this.container).paddingTop || '0');
-        const paddingBottom = parseFloat(getComputedStyle(this.container).paddingBottom || '0');
-        const paddingLeft = parseFloat(getComputedStyle(this.container).paddingLeft || '0');
-        const paddingRight = parseFloat(getComputedStyle(this.container).paddingRight || '0');
-        const containerWidth = (rect.width - paddingLeft - paddingRight) || this.container.clientWidth || 0;
-        const containerHeight = (rect.height - paddingTop - paddingBottom) || this.container.clientHeight || 0;
-        const node = this.node;
-        if (!node) return;
-        const hasOverlayApi = typeof node.isToolbarOverlay === 'function' && typeof node.positionToolbarOverlay === 'function';
-        if (hasOverlayApi && node.isToolbarOverlay()) {
-            node.positionToolbarOverlay(containerWidth, containerHeight, 16);
-        }
-    }
-
     
-
     /**
      * Sets the font size
      * @param {number} size - The font size