@teachinglab/omd 0.6.7 → 0.7.1

package/README.md

@@ -1,4 +1,4 @@
-# OMD (On-screen Math Display)
+# OMD (Open Math Display)
 
 > A JavaScript library for creating interactive mathematical interfaces in web applications
 

package/canvas/core/omdCanvas.js

@@ -204,6 +204,10 @@ export class omdCanvas {
     addStroke(stroke) {
         const id = `stroke_${++this.strokeCounter}`;
         stroke.id = id;
+        if (stroke.element) {
+            stroke.element.setAttribute('data-stroke-id', id);
+            stroke.element.id = id;
+        }
         this.strokes.set(id, stroke);
         this.drawingLayer.appendChild(stroke.element);
         

package/canvas/features/resizeHandleManager.js

@@ -37,6 +37,10 @@ export class ResizeHandleManager {
         if (!element || !element.classList.contains('omd-item')) {
             return;
         }
+
+        if (element?.dataset?.locked === 'true') {
+            return;
+        }
         
         this.selectedElement = element;
         this._createSelectionBorder();

package/canvas/tools/SelectTool.js

@@ -72,7 +72,10 @@ export class SelectTool extends Tool {
         }
 
         const segmentSelection = this._findSegmentAtPoint(event.x, event.y);
-        const omdElement = this._findOMDElementAtPoint(event.x, event.y);
+        let omdElement = this._findOMDElementAtPoint(event.x, event.y);
+        if (omdElement?.dataset?.locked === 'true') {
+            omdElement = null;
+        }
 
         if (segmentSelection) {
             // Clicking on a stroke segment - clear OMD selection and handle segment selection
@@ -473,8 +476,11 @@ export class SelectTool extends Tool {
         
         // Check all OMD items in the layer
         const omdItems = omdLayer.querySelectorAll('.omd-item');
-        
+
         for (const item of omdItems) {
+            if (item?.dataset?.locked === 'true') {
+                continue;
+            }
             try {
                 // Get the bounding box of the item
                 const bbox = item.getBBox();

package/canvas/ui/toolbar.js

@@ -11,6 +11,9 @@ export class Toolbar {
         this.buttons = new Map();
         this.activeButton = null;
         this.omdColor = omdColor; // Use omdColor for consistent styling
+        this.toolbarWidth = 64;
+        this.toolbarHeight = 28;
+        this.customPosition = null;
         
         
         
@@ -44,8 +47,7 @@ export class Toolbar {
         
         
     // Initial size, will be updated after buttons are created
-    this.background.setWidthAndHeight(100, 54);
-    this.background.setCornerRadius(27); // Pill shape
+    this._setToolbarSize(this.toolbarWidth, this.toolbarHeight);
     this.background.setFillColor(this.omdColor.mediumGray); // Modern dark, semi-transparent
         
         
@@ -58,7 +60,7 @@ export class Toolbar {
         
         
         // Position the toolbar at bottom center
-        this._updatePosition();``
+        this._updatePosition();
         
     // Add to main SVG so it is rendered
     this.canvas.svg.appendChild(this.toolbarGroup.svgObject);
@@ -70,16 +72,12 @@ export class Toolbar {
      */
     _updatePosition() {
     const canvasRect = this.canvas.container.getBoundingClientRect();
-    const toolbarWidth = this.background.width;
-    const toolbarHeight = this.background.height;
+    const toolbarWidth = this.toolbarWidth;
+    const toolbarHeight = this.toolbarHeight;
             // Bottom center, 24px from bottom
         const x = (canvasRect.width - toolbarWidth) / 2;
         const y = canvasRect.height - toolbarHeight - 24;
-        
-        // Ensure toolbar stays within canvas bounds
-        const clampedX = Math.max(0, Math.min(x, canvasRect.width - toolbarWidth));
-        const clampedY = Math.max(0, Math.min(y, canvasRect.height - toolbarHeight));
-    this.toolbarGroup.setPosition(x, y);
+        this._applyPosition(x, y);
         
         // Debug the SVG object
         
@@ -88,14 +86,7 @@ export class Toolbar {
         this.toolbarGroup.svgObject.style.pointerEvents = 'auto';
         
         // Fix the viewBox to include the toolbar position
-        const bgWidth = this.background.width;
-        const bgHeight = this.background.height;
-        const viewBoxX = x;
-        const viewBoxY = y;
-        const viewBoxWidth = Math.max(500, x + bgWidth);
-        const viewBoxHeight = Math.max(500, y + bgHeight);
-        
-        this.toolbarGroup.svgObject.setAttribute('viewBox', `${viewBoxX} ${viewBoxY} ${viewBoxWidth} ${viewBoxHeight}`);
+        this._updateViewBox(x, y);
         
         // Don't set x/y attributes - let setPosition handle it via transform
         // this.toolbarGroup.svgObject.setAttribute('x', x);
@@ -109,9 +100,9 @@ export class Toolbar {
     _createToolButtons() {
         const tools = this.canvas.toolManager.getAllToolMetadata();
         
-        const buttonSize = 48;
-        const spacing = 8;
-        const padding = 6;
+        const buttonSize = 24;
+        const spacing = 4;
+        const padding = 4;
         let xPos = padding;
         const yPos = padding;
         tools.forEach(toolMeta => {
@@ -124,8 +115,7 @@ export class Toolbar {
         // Remove last spacing
         const totalWidth = xPos - spacing + padding;
         const totalHeight = buttonSize + 2 * padding;
-        this.background.setWidthAndHeight(totalWidth, totalHeight);
-        this.background.setCornerRadius(totalHeight / 2);
+        this._setToolbarSize(totalWidth, totalHeight);
         // Reposition after sizing
         this._updatePosition();
         
@@ -215,6 +205,33 @@ export class Toolbar {
             this.activeButton = null;
         }
     }
+
+    _setToolbarSize(width, height) {
+        this.toolbarWidth = width;
+        this.toolbarHeight = height;
+        this.background.setWidthAndHeight(width, height);
+        this.background.setCornerRadius(height / 2);
+    }
+
+    _applyPosition(x, y) {
+        const canvasRect = this.canvas.container.getBoundingClientRect();
+        const clampedX = Math.max(0, Math.min(x, canvasRect.width - this.toolbarWidth));
+        const clampedY = Math.max(0, Math.min(y, canvasRect.height - this.toolbarHeight));
+        this.customPosition = { x: clampedX, y: clampedY };
+        this.toolbarGroup.setPosition(clampedX, clampedY);
+        this._updateViewBox(clampedX, clampedY);
+    }
+
+    _updateViewBox(x, y) {
+        this.toolbarGroup.svgObject.setAttribute('viewBox', `${x} ${y} ${this.toolbarWidth} ${this.toolbarHeight}`);
+    }
+
+    setBoundaryPosition(lineY) {
+        const canvasRect = this.canvas.container.getBoundingClientRect();
+        const x = (canvasRect.width - this.toolbarWidth) / 2;
+        const y = lineY - this.toolbarHeight;
+        this._applyPosition(x, y);
+    }
     
     /**
      * Add custom button to toolbar

package/docs/api/index.md

@@ -1,6 +1,6 @@
 # OMD Library Entry Point
 
-This module (`omd/core/index.js`) serves as the main entry point for the OMD (On-screen Math Display) library. It re-exports all core classes, visualization components, and utility functions, making them easily accessible from a single import.
+This module (`omd/core/index.js`) serves as the main entry point for the OMD (Open Math Display) library. It re-exports all core classes, visualization components, and utility functions, making them easily accessible from a single import.
 
 ## Overview
 

package/docs/api-reference.md

@@ -1,6 +1,6 @@
 # OMD Library API Reference
 
-> This is the complete API reference for the OMD (On-screen Math Display) library. Use the table of contents below to navigate to the detailed documentation for each module and class.
+> This is the complete API reference for the OMD (Open Math Display) library. Use the table of contents below to navigate to the detailed documentation for each module and class.
 
 ---
 

package/docs/index.html

@@ -244,7 +244,7 @@
 <body>
     <div class="header">
         <h1>OMD Library Documentation</h1>
-        <p>On-screen Math Display - Interactive Mathematical Expression Rendering</p>
+        <p>Open Math Display - Interactive Mathematical Expression Rendering</p>
         <span class="version-badge">v1.0.0</span>
     </div>
 
@@ -304,7 +304,7 @@
         <main class="content">
             <section id="overview">
                 <h2>Overview</h2>
-                <p>OMD (On-screen Math Display) is a powerful JavaScript library for rendering and manipulating mathematical expressions. It provides a flexible and intuitive API for creating interactive math visualizations.</p>
+                <p>OMD (Open Math Display) is a powerful JavaScript library for rendering and manipulating mathematical expressions. It provides a flexible and intuitive API for creating interactive math visualizations.</p>
 
                 <div class="quick-links">
                     <a href="../examples/index.html" class="quick-link">

package/docs/index.md

@@ -1,6 +1,6 @@
 # OMD Documentation
 
-Welcome to the On-screen Math Display (OMD) documentation.
+Welcome to the Open Math Display (OMD) documentation.
 
 ## Getting Started
 

package/index.js

@@ -1,7 +1,7 @@
 /**
  * OMD Library - Main Entry Point
  * 
- * This is the main entry point for the OMD (On-screen Math Display) library.
+ * This is the main entry point for the OMD (Open Math Display) library.
  * It exports all core OMD components and visualization tools from a single endpoint.
  * 
  * Usage:
@@ -29,6 +29,7 @@ export { EventManager } from './canvas/events/eventManager.js';
 
 // Export utility components
 export { omdNodeOverlay, omdNodeOverlayPresets } from './omd/utils/omdNodeOverlay.js';
+export { omdTranscriptionService } from './omd/utils/omdTranscriptionService.js';
 
 // Re-export the most commonly used components for easy access
 export { omdTable } from './src/omdTable.js';
@@ -77,4 +78,4 @@ export default {
         const { omdDisplay } = await import('./omd/core/index.js');
         return new omdDisplay(container);
     }
-}; 
+};

package/jsvg/jsvgComponents.js

@@ -1,4 +1,5 @@
 import { jsvgGroup, jsvgRect, jsvgTextLine, jsvgImage, jsvgClipMask } from './jsvg.js';
+export * from './jsvg.js';
 
 // ================ jsvgButton ================================= //
 
@@ -355,4 +356,4 @@ export class jsvgScrollbox extends jsvgGroup
         }
     }
 
-}
+}

package/npm-docs/README.md

@@ -1,4 +1,4 @@
-# OMD (On-screen Math Display)
+# OMD (Open Math Display)
 
 > A JavaScript library for creating interactive mathematical interfaces in web applications
 

package/npm-docs/api/api-reference.md

@@ -1,6 +1,6 @@
 # OMD Library API Reference
 
-> This is the complete API reference for the OMD (On-screen Math Display) library. Use the table of contents below to navigate to the detailed documentation for each module and class.
+> This is the complete API reference for the OMD (Open Math Display) library. Use the table of contents below to navigate to the detailed documentation for each module and class.
 
 ---
 

package/npm-docs/api/index.md

@@ -1,6 +1,6 @@
 # OMD Library Entry Point
 
-This module (`omd/core/index.js`) serves as the main entry point for the OMD (On-screen Math Display) library. It re-exports all core classes, visualization components, and utility functions, making them easily accessible from a single import.
+This module (`omd/core/index.js`) serves as the main entry point for the OMD (Open Math Display) library. It re-exports all core classes, visualization components, and utility functions, making them easily accessible from a single import.
 
 ## Overview
 

package/npm-docs/guides/getting-started.md

@@ -1,6 +1,6 @@
 # Getting Started with OMD
 
-This guide will help you install and start using OMD (On-screen Math Display) in your project.
+This guide will help you install and start using OMD (Open Math Display) in your project.
 
 ## Installation
 

package/npm-docs/json-schemas.md

@@ -460,54 +460,39 @@ Tabular data display with customizable styling.
 
 #### `omdEquation`
 
-Complete mathematical equations with left and right sides.
+Complete mathematical equations. The visual component now uses the same math.js-powered parser and renderer as the interactive core (functions, rationals, roots, etc.).
 
-**Schema (String Form):**
+**Preferred schema (string form):**
 ```json
 {
-  "equation": "2x + 3 = 11"
+  "equation": "sin(x) + 2 = 3"
 }
 ```
 
-**Schema (Structured Form):**
+**Structured fallback (legacy):**
 ```typescript
 {
-  leftExpression: Expression | string,
-  rightExpression: Expression | string,
-  equation?: string
+  leftExpression?: Expression | string,
+  rightExpression?: Expression | string,
+  equation: string
 }
 ```
 
 **Examples:**
 ```json
-{
-  "equation": "2x + 3 = 11"
-}
+{ "equation": "sin(x) + 2 = 3" }
 ```
-
 ```json
-{
-  "leftExpression": {
-    "termsAndOpers": [
-      { "omdType": "term", "coefficient": 2, "variable": "x" },
-      { "omdType": "operator", "operator": "+" },
-      { "omdType": "number", "value": 3 }
-    ]
-  },
-  "rightExpression": {
-    "omdType": "number",
-    "value": 11
-  }
-}
+{ "equation": "(x^2 + 3x - 4)/(2x) = 5" }
 ```
 
 **Usage:**
 ```javascript
-// Simple string form
+// Preferred string form (math.js parsing)
 const eq = new omdEquation();
-eq.loadFromJSON({ equation: '2x + 3 = 11' });
+eq.loadFromJSON({ equation: 'sqrt(x+1) = 4', fontSize: 32 });
 
-// Structured form
+// Legacy structured form (if you already have parsed pieces)
 eq.loadFromJSON({
   leftExpression: { omdType: 'term', coefficient: 2, variable: 'x' },
   rightExpression: { omdType: 'number', value: 11 }

package/omd/core/omdEquationStack.js

@@ -240,7 +240,7 @@ export class omdEquationStack extends jsvgGroup {
         const effectivePadding = (typeof padding === 'number') ? padding : this.overlayPadding;
 
         // Compute top-left of toolbar in container coordinates using UN-SCALED toolbar size
-        // because we counter-scale the toolbar by 1/s to keep constant on-screen size.
+        // because we counter-scale the toolbar by 1/s to keep constant Open size.
         let containerX = (containerWidth - toolbarWidth) / 2;
         let containerY = containerHeight - toolbarHeight - effectivePadding;
         // Snap to integer pixels to avoid subpixel jitter when scaling
@@ -259,7 +259,7 @@ export class omdEquationStack extends jsvgGroup {
         const svgViewBox = rootSVG?.getAttribute?.('viewBox') || 'unknown';
         
         
-        // Counter-scale the toolbar so it remains a constant on-screen size
+        // Counter-scale the toolbar so it remains a constant Open size
         if (typeof toolbarGroup.setScale === 'function') {
             toolbarGroup.setScale(1 / s);
         }
@@ -287,7 +287,7 @@ export class omdEquationStack extends jsvgGroup {
      * @param {number} [opts.offsetX=0] - Horizontal offset in screen pixels (positive -> right)
      * @param {number} [opts.offsetY=0] - Vertical offset in screen pixels (positive -> down)
      * @param {number} [opts.padding=16] - Padding from edges when computing anchor
-     * @param {boolean} [opts.counterScale=true] - Whether to counter-scale the child to keep constant on-screen size
+     * @param {boolean} [opts.counterScale=true] - Whether to counter-scale the child to keep constant Open size
      * @param {boolean} [opts.addToStack=true] - Whether to add the child to this stack's children (default true)
      * @param {{x:number,y:number}|null} [opts.customCoords=null] - If anchor==='custom', use these screen coords
      * @returns {object|null} The child or null if not applicable
@@ -352,7 +352,7 @@ export class omdEquationStack extends jsvgGroup {
         const x = (containerX - stackX) / s;
         const y = (containerY - stackY) / s;
 
-        // Optionally counter-scale child to keep constant on-screen size
+        // Optionally counter-scale child to keep constant Open size
         if (counterScale && child && typeof child.setScale === 'function') {
             try { child.setScale(1 / s); } catch (_) {}
         }

package/omd/display/omdDisplay.js

@@ -55,6 +55,8 @@ export class omdDisplay {
         const height = this.container.offsetHeight || 600;
 
         this.svg.setViewbox(width, height);
+        this.svg.svgObject.style.width = '100%';
+        this.svg.svgObject.style.height = '100%';
         this.svg.svgObject.style.verticalAlign = "middle";
         // Enable internal scrolling via native SVG scrolling if content overflows
         this.svg.svgObject.style.overflow = 'hidden';
@@ -768,18 +770,7 @@ export class omdDisplay {
     render(expression) {
         // Clear previous node
         if (this.node) {
-            if (this._contentGroup && this.node && this.node.svgObject) {
-                try {
-                    if (this.node.svgObject.parentNode === this._contentGroup) {
-                        this._contentGroup.removeChild(this.node.svgObject);
-                    }
-                } catch (e) {
-                    // Fallback to svg remove
-                    this.svg.removeChild(this.node);
-                }
-            } else {
-                this.svg.removeChild(this.node);
-            }
+            this.removeChild(this.node);
         }
 
         // Create node from expression
@@ -992,7 +983,7 @@ export class omdDisplay {
      */
     clear() {
         if (this.node) {
-            this.svg.removeChild(this.node);
+            this.removeChild(this.node);
             this.node = null;
         }
     }

package/omd/display/omdToolbar.js

@@ -165,7 +165,7 @@ export class omdToolbar {
         }
 
         if (popupGroup) {
-            // Attach to toolbar group so it inherits toolbar counter-scaling (keeps constant on-screen size)
+            // Attach to toolbar group so it inherits toolbar counter-scaling (keeps constant Open size)
             this.elements.toolbarGroup.addChild(popupGroup);
             this.state.activePopup = { type: popupType, group: popupGroup };
             // Ensure the toolbar and popup are on top of all siblings inside the SVG

package/omd/nodes/omdFunctionNode.js

@@ -100,6 +100,7 @@ export class omdFunctionNode extends omdNode {
         // Calculate dimensions using getTextBounds for consistency
         const ratio = fontSize / this.getRootFontSize();
         const spacing = 2 * ratio;
+        const parenSpacing = 2 * ratio; // Spacing between function name and opening parenthesis
         
         const functionNameBounds = getTextBounds(this.functionName, fontSize);
         const openParenBounds = getTextBounds('(', fontSize);
@@ -117,7 +118,7 @@ export class omdFunctionNode extends omdNode {
             }
         });
         
-        const totalWidth = functionNameBounds.width + openParenBounds.width + totalArgWidth + closeParenBounds.width + (spacing * 2);
+        const totalWidth = functionNameBounds.width + parenSpacing + openParenBounds.width + totalArgWidth + closeParenBounds.width + (spacing * 2);
         const totalHeight = Math.max(maxArgHeight, functionNameBounds.height, openParenBounds.height, closeParenBounds.height) + 4 * ratio;
         
         this.setWidthAndHeight(totalWidth, totalHeight);
@@ -132,6 +133,7 @@ export class omdFunctionNode extends omdNode {
         const argFontSize = fontSize * 5/6;
         const ratio = fontSize / this.getRootFontSize();
         const spacing = 2 * ratio;
+        const parenSpacing = 2 * ratio; // Spacing between function name and opening parenthesis
         
         let currentX = 0;
         const textY = this.height / 2;
@@ -140,6 +142,8 @@ export class omdFunctionNode extends omdNode {
         this.functionNameElement.setPosition(currentX, textY);
         currentX += getTextBounds(this.functionName, fontSize).width;
         
+        currentX += parenSpacing;
+
         // Position opening parenthesis
         this.openParenElement.setPosition(currentX, textY);
         currentX += getTextBounds('(', fontSize).width;

package/package.json

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

package/readme.html

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>OMD (On-screen Math Display) - OMD Documentation</title>
+    <title>OMD (Open Math Display) - OMD Documentation</title>
     <style>
         body {
             font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
@@ -145,7 +145,7 @@
     </div>
     
     <div class="content">
-        <h1 id="omd-on-screen-math-display">OMD (On-screen Math Display)</h1>
+        <h1 id="omd-on-screen-math-display">OMD (Open Math Display)</h1>
 <blockquote>
 <p>A JavaScript library for creating interactive mathematical interfaces in web applications</p>
 </blockquote>

package/src/index.js

@@ -26,6 +26,12 @@ export { omdFunction } from './omdFunction.js';
 export { omdApp } from './omdApp.js';
 export { omdAppCanvas } from './omdAppCanvas.js';
 export { omd } from './omd.js';
+export { omdDisplay } from '../omd/display/omdDisplay.js';
+export { omdEquationNode } from '../omd/nodes/omdEquationNode.js';
+export { omdEquationStack } from '../omd/core/omdEquationStack.js';
+export { omdEquationSequenceNode } from '../omd/nodes/omdEquationSequenceNode.js';
+export { omdConstantNode } from '../omd/nodes/omdConstantNode.js';
+export { omdNodeOverlay, omdNodeOverlayPresets } from '../omd/utils/omdNodeOverlay.js';
 
 // OMD Utilities and Helpers
 export { omdColor } from './omdColor.js';
@@ -73,6 +79,11 @@ export default {
     app: {
         omdApp: () => import('./omdApp.js').then(m => m.omdApp),
         omdAppCanvas: () => import('./omdAppCanvas.js').then(m => m.omdAppCanvas),
-        omd: () => import('./omd.js').then(m => m.omd)
+        omd: () => import('./omd.js').then(m => m.omd),
+        async createDisplay(container) {
+            const { omdDisplay } = await import('../omd/core/index.js');
+            return new omdDisplay(container);
+        }
     }
-}; 
+}; 
+// Force reload

package/src/json-schemas.md

@@ -677,9 +677,16 @@ This document provides schemas and examples for the `loadFromJSON` method used i
 
 ## 20. `omdEquation`
 
-`omdEquation` represents a mathematical equation, such as "x + 2 = 5".
+`omdEquation` represents a mathematical equation and now uses the same math.js-powered parser/renderer as the interactive core (functions, rationals, roots, etc.).
 
-### Schema
+### Preferred schema (string form)
+```json
+{
+  "equation": "sin(x) + 2 = 3"
+}
+```
+
+### Structured fallback (legacy)
 ```json
 {
   "leftExpression": "object",
@@ -688,11 +695,10 @@ This document provides schemas and examples for the `loadFromJSON` method used i
 }
 ```
 
-### Example
+### Examples
 ```json
-{
-  "leftExpression": { "omdType": "term", "coefficient": 1, "variable": "x", "exponent": 1 },
-  "rightExpression": { "omdType": "number", "value": 5 },
-  "equation": "x + 2 = 5"
-}
-```
+{ "equation": "sin(x) + 2 = 3" }
+```
+```json
+{ "equation": "(x^2 + 3x - 4)/(2x) = 5" }
+```

package/src/omdEquation.js

@@ -9,6 +9,7 @@ import { omdVariable } from "./omdVariable.js";
 import { omdString } from "./omdString.js";
 import { omdNumber } from "./omdNumber.js";
 import { parseEquationString } from "./omdUtils.js";
+import { omdEquationNode } from "../omd/nodes/omdEquationNode.js";
 
 export class omdEquation extends omdMetaExpression
 {
@@ -37,12 +38,24 @@ export class omdEquation extends omdMetaExpression
 
         this.rightHolder = new jsvgGroup();
         this.equationStack.addChild( this.rightHolder );
+
+        this.equationNode = null;
     }
 
     // make an equation (x + 2) = (2x - 3)
 
     loadFromJSON( data )
     {
+        // Prefer math.js parsing into omdEquationNode for richer rendering (functions, rationals, roots)
+        if (typeof data.equation === 'string' && data.equation.trim()) {
+            try {
+                this._renderWithEquationNode(data.equation, data.fontSize);
+                return;
+            } catch (e) {
+                console.warn('⚠️ omdEquation math.js render failed, falling back to legacy parsing:', e?.message || e);
+            }
+        }
+
         // Helper function to fix operator symbols in termsAndOpers arrays
         function fixOperatorSymbols(expressionData) {
             if (expressionData && expressionData.termsAndOpers && Array.isArray(expressionData.termsAndOpers)) {
@@ -136,6 +149,37 @@ export class omdEquation extends omdMetaExpression
         this.updateLayout();
     }
 
+    _renderWithEquationNode(equationString, fontSize) {
+        if (typeof math === 'undefined' || typeof math.parse !== 'function') {
+            throw new Error('math.js is required to parse equation strings');
+        }
+
+        const eqNode = omdEquationNode.fromString(equationString);
+        if (typeof fontSize === 'number' && eqNode.setFontSize) {
+            eqNode.setFontSize(fontSize);
+        }
+
+        if (eqNode.hideBackgroundByDefault) eqNode.hideBackgroundByDefault();
+        if (eqNode.computeDimensions) eqNode.computeDimensions();
+        if (eqNode.updateLayout) eqNode.updateLayout();
+
+        // Clear the legacy stack and render just the parsed node
+        if (typeof this.equationStack.removeAllChildren === 'function') {
+            this.equationStack.removeAllChildren();
+        } else {
+            this.equationStack.childList = [];
+        }
+        this.equationStack.addChild(eqNode);
+        this.equationStack.setSpacer(0);
+
+        this.equationNode = eqNode;
+        this.leftExpression = null;
+        this.rightExpression = null;
+
+        this.centerEquation = false;
+        this.updateLayout();
+    }
+
 
     setLeftAndRightExpressions( leftExp, rightExp )
     {
@@ -156,6 +200,25 @@ export class omdEquation extends omdMetaExpression
 
     updateLayout()
     {
+        if (this.equationNode) {
+            const node = this.equationNode;
+            if (node.computeDimensions) node.computeDimensions();
+            if (node.updateLayout) node.updateLayout();
+
+            this.equationStack.doHorizontalLayout();
+            this.equationStack.setPosition(this.inset, this.inset);
+
+            const W = node.width || this.equationStack.width;
+            const H = node.height || this.equationStack.height;
+
+            this.backRect.setWidthAndHeight( W + this.inset*2, H + this.inset*2 );
+            this.setWidthAndHeight( this.backRect.width, this.backRect.height );
+            this.width = this.backRect.width;
+            this.height = this.backRect.height;
+            this.svgObject.setAttribute('viewBox', `0 0 ${this.width} ${this.height}`);
+            return;
+        }
+
         this.leftHolder.setWidthAndHeight( this.leftExpression.width, this.leftExpression.height );
         this.rightHolder.setWidthAndHeight( this.rightExpression.width, this.rightExpression.height );
 
@@ -186,4 +249,4 @@ export class omdEquation extends omdMetaExpression
         }
     }
 
-}
+}

package/README.old.md

@@ -1,138 +0,0 @@
-# OMD (On-screen Math Display)
-
-OMD is a JavaScript library for creating interactive mathematical interfaces in web applications. Build everything from simple equation displays to complex step-by-step solution systems with rich visual feedback and user interaction.
-
-![OMD Demo](https://i.imgur.com/CdtEi33.png)
-
-## Features
-
-### **Interactive Math Rendering**
-- High-quality SVG-based mathematical notation
-- Real-time expression manipulation and visualization
-- Automatic layout and alignment for complex equations
-
-### **Step-by-Step Solutions**
-- Visual step tracking with detailed explanations
-- Simplification engine with rule-based transformations
-- Provenance tracking for highlighting related elements
-
-### **Rich UI Components**
-- Built-in toolbar for common mathematical operations
-- Drag & drop interface for intuitive manipulation
-- Customizable canvas for multi-expression layouts
-
-### **Educational Features**
-- Interactive learning experiences
-- Progressive step revelation
-- Visual operation feedback and highlighting
-
-## Installation
-
-### npm
-```bash
-npm install @teachinglab/omd
-```
-
-## Basic Usage
-```javascript
-import { omdDisplay } from '@teachinglab/omd';
-
-// Create a math display
-const container = document.getElementById('math-container');
-const display = new omdDisplay(container);
-
-// Render an equation
-display.render('2x + 3 = 11');
-```
-
-### Step-by-Step Solutions
-```javascript
-import { omdEquationStack, omdEquationNode } from '@teachinglab/omd';
-
-// Create solution steps
-const steps = [
-    omdEquationNode.fromString('2x + 3 = 11'),
-    omdEquationNode.fromString('2x = 8'),
-    omdEquationNode.fromString('x = 4')
-];
-
-// Create interactive equation stack
-const stack = new omdEquationStack(steps, {
-    toolbar: true,
-    stepVisualizer: true
-});
-
-display.render(stack);
-```
-
-## Core Concepts
-
-### **Nodes** - Building Blocks
-Every mathematical element is a node in an expression tree:
-- `omdEquationNode` - Complete equations (e.g., `2x + 3 = 11`)
-- `omdConstantNode` - Numbers (e.g., `5`, `3.14`)
-- `omdVariableNode` - Variables (e.g., `x`, `y`)
-- `omdBinaryExpressionNode` - Operations (e.g., `+`, `-`, `*`, `/`)
-
-### **Sequences** - Solution Steps
-Group related equations for step-by-step solving:
-```javascript
-const sequence = new omdEquationSequenceNode([
-    equation1, equation2, equation3
-]);
-```
-
-### **Display** - Rendering Engine
-Handles layout, centering, and visualization:
-```javascript
-const display = new omdDisplay(container, {
-    fontSize: 36,
-    centerContent: true
-});
-```
-
-## Interactive Examples
-
-Explore OMD's capabilities with our comprehensive examples:
-
-| Category | Example | Description |
-|----------|---------|-------------|
-| **Getting Started** | [Minimal](examples/minimal.html) | Basic equation rendering |
-| | [Simple Usage](examples/simple-usage.html) | Interactive features |
-| **Advanced** | [Expression Playground](examples/expression-playground.html) | Full manipulation interface |
-| | [Drag & Drop](examples/drag-and-drop-playground.html) | Intuitive interaction |
-| **Educational** | [Worked Solutions](examples/worked-solution.html) | Step-by-step solving |
-| | [Kids Interactive](examples/kids-interactive.html) | Child-friendly interface |
-| **Components** | [Equation Stack](examples/equation-stack-test.html) | Stacked equations |
-| | [Canvas Demo](examples/canvas-multiple-nodes.html) | Multi-expression layouts |
-
-**[Browse All Examples](examples/index.html)**
-
-## Documentation
-
-| Resource | Description |
-|----------|-------------|
-| **[API Reference](docs/api-reference.md)** | Complete component documentation |
-| **[User Guide](docs/user-guide.md)** | Getting started and tutorials |
-
-
-## Architecture
-
-```
-OMD Library Structure
-├── Display Layer (omdDisplay)
-├── Node System (Expression tree components)
-├── UI Components (Toolbar, Step visualizer)
-├── Core Systems (Simplification, Layout)
-└── Utilities (Configuration, Helpers)
-```
-
-## Dependencies
-
-- **JSVG** - High-performance SVG rendering
-- **math.js** - Mathematical expression parsing
-- **Modern Browser** - ES6 modules, SVG support
-
----
-
-**Ready to get started?** Check out our [examples](examples/index.html) or dive into the [documentation](docs/api-reference.md)!