@teachinglab/omd 0.6.2 → 0.6.3

package/omd/core/omdEquationStack.js

@@ -123,6 +123,65 @@ export class omdEquationStack extends jsvgGroup {
         this.height = this.layoutGroup.height;
     }
 
+    /**
+     * Initializes the stack and its underlying sequence.
+     */
+    initialize() {
+        if (this.sequence && typeof this.sequence.initialize === 'function') {
+            this.sequence.initialize();
+        } else if (this.sequence) {
+            if (typeof this.sequence.computeDimensions === 'function') {
+                this.sequence.computeDimensions();
+            }
+            if (typeof this.sequence.updateLayout === 'function') {
+                this.sequence.updateLayout();
+            }
+        }
+        this.updateLayout();
+    }
+
+    /**
+     * Propagates font size changes to the underlying sequence and recomputes layout.
+     * @param {number} fontSize
+     */
+    setFontSize(fontSize) {
+        if (this.sequence && typeof this.sequence.setFontSize === 'function') {
+            this.sequence.setFontSize(fontSize);
+        }
+        this.updateLayout();
+    }
+
+    /**
+     * Delegate to close the currently active step visualizer dot (if present).
+     */
+    closeActiveDot() {
+        if (this.sequence && typeof this.sequence.closeActiveDot === 'function') {
+            this.sequence.closeActiveDot();
+        }
+    }
+
+    /**
+     * Delegate to close all step visualizer text boxes (if present).
+     */
+    closeAllTextBoxes() {
+        if (this.sequence && typeof this.sequence.closeAllTextBoxes === 'function') {
+            this.sequence.closeAllTextBoxes();
+        } else if (this.sequence && typeof this.sequence.closeActiveDot === 'function') {
+            this.sequence.closeActiveDot();
+        }
+    }
+
+    /**
+     * Delegate to force close all step visualizer UI (if present).
+     */
+    forceCloseAll() {
+        if (this.sequence && typeof this.sequence.forceCloseAll === 'function') {
+            this.sequence.forceCloseAll();
+        } else {
+            this.closeAllTextBoxes();
+        }
+    }
+
     /**
      * Returns the underlying sequence instance.
      * @returns {omdEquationSequenceNode|omdStepVisualizer} The managed sequence instance.
@@ -544,4 +603,4 @@ export class omdEquationStack extends jsvgGroup {
     getSvg() {
         return this.svgObject;
     }
-} 
+} 

package/omd/display/omdDisplay.js

@@ -1,4 +1,5 @@
 import { omdEquationNode } from '../nodes/omdEquationNode.js';
+import { omdEquationStack } from '../core/omdEquationStack.js';
 import { omdStepVisualizer } from '../step-visualizer/omdStepVisualizer.js';
 import { getNodeForAST } from '../core/omdUtilities.js';
 import { jsvgContainer } from '@teachinglab/jsvg';
@@ -11,6 +12,13 @@ import { jsvgContainer } from '@teachinglab/jsvg';
 export class omdDisplay {
     constructor(container, options = {}) {
         this.container = container;
+        const {
+            stepVisualizer = false,
+            stackOptions = null,
+            math: mathInstance = (typeof window !== 'undefined' && window.math) ? window.math : null,
+            ...otherOptions
+        } = options || {};
+
         this.options = {
             fontSize: 32,
             centerContent: true,
@@ -21,7 +29,10 @@ export class omdDisplay {
             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
+            stepVisualizer,
+            stackOptions,
+            math: mathInstance,
+            ...otherOptions
         };
 
         // Create SVG container
@@ -612,6 +623,74 @@ export class omdDisplay {
         this._lastCenterSignature = contentSig;
     }
 
+    _getMathInstance() {
+        if (this.options.math) {
+            return this.options.math;
+        }
+        if (typeof window !== 'undefined' && window.math) {
+            return window.math;
+        }
+        return null;
+    }
+
+    _createNodeFromSegment(segment, mathLib) {
+        try {
+            if (segment.includes('=')) {
+                return omdEquationNode.fromString(segment);
+            }
+
+            if (!mathLib || typeof mathLib.parse !== 'function') {
+                throw new Error('math.js parser is unavailable');
+            }
+
+            const ast = mathLib.parse(segment);
+            const NodeClass = getNodeForAST(ast);
+            return new NodeClass(ast);
+        } catch (error) {
+            const reason = error?.message || String(error);
+            throw new Error(`Failed to parse expression "${segment}": ${reason}`, { cause: error });
+        }
+    }
+
+    _createNodesFromString(expressionString) {
+        const segments = (expressionString || '')
+            .split(';')
+            .map(segment => segment.trim())
+            .filter(Boolean);
+
+        if (!segments.length) {
+            throw new Error('omdDisplay.render() received an empty expression string.');
+        }
+
+        const mathLib = this._getMathInstance();
+        return segments.map(segment => this._createNodeFromSegment(segment, mathLib));
+    }
+
+    _buildStackOptions() {
+        const baseOptions = {};
+        if (typeof this.options.stepVisualizer === 'boolean') {
+            baseOptions.stepVisualizer = this.options.stepVisualizer;
+        }
+        if (this.options.styling) {
+            baseOptions.styling = this.options.styling;
+        }
+        if (Object.prototype.hasOwnProperty.call(this.options, 'toolbar')) {
+            baseOptions.toolbar = this.options.toolbar;
+        }
+
+        if (this.options.stackOptions && typeof this.options.stackOptions === 'object') {
+            return { ...baseOptions, ...this.options.stackOptions };
+        }
+        return baseOptions;
+    }
+
+    _createStackFromSteps(steps) {
+        if (!steps || !steps.length) {
+            throw new Error('omdDisplay.render() received no steps to render.');
+        }
+        return new omdEquationStack(steps, this._buildStackOptions());
+    }
+
     fitToContent() {
         if (!this.node) {
             return;
@@ -705,29 +784,25 @@ export class omdDisplay {
 
         // Create node from expression
         if (typeof expression === 'string') {
-            if (expression.includes(';')) {
-                // Multiple equations
-                const equationStrings = expression.split(';').filter(s => s.trim() !== '');
-                const steps = equationStrings.map(str => omdEquationNode.fromString(str));
-                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.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.options.styling || {});
+            const steps = this._createNodesFromString(expression);
+            this.node = this._createStackFromSteps(steps);
+        } else if (Array.isArray(expression)) {
+            const steps = expression.flatMap(item => {
+                if (typeof item === 'string') {
+                    return this._createNodesFromString(item);
                 }
-            }
+                return item;
+            }).filter(Boolean);
+            this.node = this._createStackFromSteps(steps);
         } else {
             // Assume it's already a node
             this.node = expression;
         }
 
+        if (!this.node) {
+            throw new Error('omdDisplay.render() was unable to create a node from the provided expression.');
+        }
+
         // Initialize and render
         const sequence = this.node.getSequence ? this.node.getSequence() : null;
         if (sequence) {
@@ -967,4 +1042,4 @@ export class omdDisplay {
     getSVG() {
         return this.svg.svgObject;
     }
-}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teachinglab/omd",
-  "version": "0.6.2",
+  "version": "0.6.3",
   "description": "omd",
   "main": "./index.js",
   "module": "./index.js",