@teachinglab/omd 0.7.20 → 0.7.21

package/package.json

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

package/src/omdExpression.js

@@ -8,6 +8,7 @@ import { omdNumber } from "./omdNumber.js";
 import { omdVariable } from "./omdVariable.js";
 import { omdMetaExpression } from "./omdMetaExpression.js"
 import { parseExpressionString } from "./omdUtils.js";
+import { getNodeForAST } from "../omd/core/omdUtilities.js";
 
 export class omdExpression extends omdMetaExpression
 {
@@ -21,6 +22,7 @@ export class omdExpression extends omdMetaExpression
         this.operatorSet = [];
         
         this.inset = 5;
+        this.expressionNode = null;
 
         this.expressionStack = new jsvgLayoutGroup();
         this.expressionStack.setPosition( this.inset, 0 );
@@ -28,15 +30,56 @@ export class omdExpression extends omdMetaExpression
         this.addChild( this.expressionStack );
     }
 
+    _renderWithExpressionNode(expressionString, fontSize) {
+        if (typeof math === 'undefined' || typeof math.parse !== 'function') {
+            throw new Error('math.js is required to parse expression strings');
+        }
+
+        const ast = math.parse(expressionString);
+        const NodeType = getNodeForAST(ast);
+        const exprNode = new NodeType(ast);
+
+        if (typeof fontSize === 'number' && exprNode.setFontSize) {
+            exprNode.setFontSize(fontSize);
+        }
+
+        if (exprNode.hideBackgroundByDefault) exprNode.hideBackgroundByDefault();
+        if (exprNode.computeDimensions) exprNode.computeDimensions();
+        if (exprNode.updateLayout) exprNode.updateLayout();
+
+        if (typeof this.expressionStack.removeAllChildren === 'function') {
+            this.expressionStack.removeAllChildren();
+        } else {
+            this.expressionStack.childList = [];
+        }
+        this.expressionStack.addChild(exprNode);
+        this.expressionStack.setSpacer(0);
+
+        this.expressionNode = exprNode;
+        this.updateLayout();
+    }
+
     loadFromJSON( data )
     {
         // Accept either structured object or a plain expression string
         if ( typeof data === 'string' ) {
+            try {
+                this._renderWithExpressionNode(data, data.fontSize);
+                return;
+            } catch (e) {
+                console.warn('⚠️ omdExpression math.js render failed, falling back to legacy parsing:', e?.message || e);
+            }
             const parsed = parseExpressionString(data);
             if ( parsed ) data = parsed;
         }
         // Handle object with 'expression' string property
         else if ( typeof data === 'object' && data.expression && typeof data.expression === 'string' ) {
+            try {
+                this._renderWithExpressionNode(data.expression, data.fontSize);
+                return;
+            } catch (e) {
+                console.warn('⚠️ omdExpression math.js render failed, falling back to legacy parsing:', e?.message || e);
+            }
              const parsed = parseExpressionString(data.expression);
              if ( parsed ) {
                  // Merge parsed data into data object
@@ -117,6 +160,24 @@ export class omdExpression extends omdMetaExpression
 
     updateLayout()
     {
+        if (this.expressionNode) {
+            const node = this.expressionNode;
+            if (node.computeDimensions) node.computeDimensions();
+            if (node.updateLayout) node.updateLayout();
+
+            this.expressionStack.doHorizontalLayout();
+            this.expressionStack.setPosition(this.inset, this.inset);
+
+            const W = node.width || this.expressionStack.width;
+            const H = node.height || this.expressionStack.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;
+            return;
+        }
+
         this.expressionStack.doHorizontalLayout();
 
         var W = this.expressionStack.width;