@teachinglab/omd 0.3.7 → 0.3.9

package/src/omdEquation.js

@@ -1,157 +1,189 @@
-
-import { omdColor } from "./omdColor.js";
-import { jsvgLayoutGroup, jsvgGroup } from "@teachinglab/jsvg";
-import { omdOperator } from "./omdOperator.js";
-import { omdMetaExpression } from "./omdMetaExpression.js"
-import { omdTerm } from "./omdTerm.js";
-import { omdExpression } from "./omdExpression.js";
-import { omdVariable } from "./omdVariable.js";
-import { omdString } from "./omdString.js";
-import { omdNumber } from "./omdNumber.js";
-
-export class omdEquation extends omdMetaExpression
-{
-    constructor()
-    {
-        // initialization
-        super();
-
-        this.type = "omdPowerExpression";
-        
-        this.leftExpression = null;
-        this.rightExpression = null;
-        
-        this.centerEquation = true;
-        this.inset = 5;
-
-        this.equationStack = new jsvgLayoutGroup();
-        this.equationStack.setSpacer(-7);
-        this.addChild( this.equationStack );
-
-        this.leftHolder = new jsvgGroup();
-        this.equationStack.addChild( this.leftHolder );
-
-        this.equalSign = new omdOperator('=');
-        this.equationStack.addChild( this.equalSign );
-
-        this.rightHolder = new jsvgGroup();
-        this.equationStack.addChild( this.rightHolder );
-    }
-
-    // make an equation (x + 2) = (2x - 3)
-
-    loadFromJSON( data )
-    {
-        // If explicit left/right JSON provided, build them according to their omdType
-        if ( typeof data.leftExpression != "undefined" && data.leftExpression )
-        {
-            const left = data.leftExpression;
-            if ( left.omdType == "expression" ) this.leftExpression = new omdExpression();
-            else if ( left.omdType == "number" ) this.leftExpression = new omdNumber();
-            else if ( left.omdType == "variable" ) this.leftExpression = new omdVariable();
-            else if ( left.omdType == "term" ) this.leftExpression = new omdTerm();
-            else if ( left.omdType == "string" || typeof left == 'string' ) this.leftExpression = new omdString( typeof left == 'string' ? left : left.name || '' );
-
-            if (this.leftExpression && typeof this.leftExpression.loadFromJSON === 'function' && left && typeof left === 'object') {
-                this.leftExpression.loadFromJSON( left );
-            }
-
-            if (this.leftExpression) {
-                this.leftHolder.removeAllChildren();
-                this.leftHolder.addChild( this.leftExpression );
-            }
-        }
-
-        if ( typeof data.rightExpression != "undefined" && data.rightExpression )
-        {
-            const right = data.rightExpression;
-            if ( right.omdType == "expression" ) this.rightExpression = new omdExpression();
-            else if ( right.omdType == "number" ) this.rightExpression = new omdNumber();
-            else if ( right.omdType == "variable" ) this.rightExpression = new omdVariable();
-            else if ( right.omdType == "term" ) this.rightExpression = new omdTerm();
-            else if ( right.omdType == "string" || typeof right == 'string' ) this.rightExpression = new omdString( typeof right == 'string' ? right : right.name || '' );
-
-            if (this.rightExpression && typeof this.rightExpression.loadFromJSON === 'function' && right && typeof right === 'object') {
-                this.rightExpression.loadFromJSON( right );
-            }
-
-            if (this.rightExpression) {
-                this.rightHolder.removeAllChildren();
-                this.rightHolder.addChild( this.rightExpression );
-            }
-        }
-
-        // If no structured left/right provided but an `equation` string exists, parse it into simple string nodes
-        if ( (!this.leftExpression || !this.rightExpression) && typeof data.equation === 'string' ) {
-            const eq = data.equation || '';
-            const parts = eq.split('=');
-            const leftStr = (parts[0] || '').trim();
-            const rightStr = (parts[1] || '').trim();
-
-            if (!this.leftExpression) this.leftExpression = new omdString(leftStr || '');
-            if (!this.rightExpression) this.rightExpression = new omdString(rightStr || '');
-
-            if (this.leftExpression) {
-                this.leftHolder.removeAllChildren();
-                this.leftHolder.addChild(this.leftExpression);
-            }
-            if (this.rightExpression) {
-                this.rightHolder.removeAllChildren();
-                this.rightHolder.addChild(this.rightExpression);
-            }
-        }
-
-        // Guarded calls to hide backgrounds only when components exist
-        if (this.equalSign && typeof this.equalSign.hideBackgroundByDefault === 'function') this.equalSign.hideBackgroundByDefault();
-        if (this.leftExpression && typeof this.leftExpression.hideBackgroundByDefault === 'function') this.leftExpression.hideBackgroundByDefault();
-        if (this.rightExpression && typeof this.rightExpression.hideBackgroundByDefault === 'function') this.rightExpression.hideBackgroundByDefault();
-
-        this.centerEquation = false;
-        this.updateLayout();
-    }
-
-
-    setLeftAndRightExpressions( leftExp, rightExp )
-    {
-        this.leftExpression = leftExp;
-        this.leftHolder.removeAllChildren();
-        this.leftHolder.addChild( leftExp );
-
-        this.rightExpression = rightExp;
-        this.rightHolder.removeAllChildren();
-        this.rightHolder.addChild( rightExp );
-
-        this.equalSign.hideBackgroundByDefault();
-        this.leftExpression.hideBackgroundByDefault();
-        this.rightExpression.hideBackgroundByDefault();
-
-        this.updateLayout();
-    }
-
-    updateLayout()
-    {
-        this.leftHolder.setWidthAndHeight( this.leftExpression.width, this.leftExpression.height );
-        this.rightHolder.setWidthAndHeight( this.rightExpression.width, this.rightExpression.height );
-
-        this.equationStack.doHorizontalLayout();
-        this.equationStack.setPosition( this.inset, 0 );
-
-        var W = this.equationStack.width;
-        this.backRect.setWidthAndHeight( W + this.inset*2, 30 );
-
-        this.setWidthAndHeight( this.backRect.width, this.backRect.height );
-
-        // Set individual width/height properties and viewBox for API compatibility
-        this.width = this.backRect.width;
-        this.height = this.backRect.height;
-        this.svgObject.setAttribute('viewBox', `0 0 ${this.width} ${this.height}`);
-
-        if ( this.centerEquation )
-        {
-            var leftShift = this.leftExpression.width + this.equalSign.width*0.50;
-            this.backRect.setPosition( -1.0 * leftShift + this.inset/2, 0  );
-            this.equationStack.setPosition( -1.0 * leftShift + this.inset + this.inset/2, 0 );
-        }
-    }
-
+
+import { omdColor } from "./omdColor.js";
+import { jsvgLayoutGroup, jsvgGroup } from "@teachinglab/jsvg";
+import { omdOperator } from "./omdOperator.js";
+import { omdMetaExpression } from "./omdMetaExpression.js"
+import { omdTerm } from "./omdTerm.js";
+import { omdExpression } from "./omdExpression.js";
+import { omdVariable } from "./omdVariable.js";
+import { omdString } from "./omdString.js";
+import { omdNumber } from "./omdNumber.js";
+import { parseEquationString } from "./omdUtils.js";
+
+export class omdEquation extends omdMetaExpression
+{
+    constructor()
+    {
+        // initialization
+        super();
+
+        this.type = "omdPowerExpression";
+        
+        this.leftExpression = null;
+        this.rightExpression = null;
+        
+        this.centerEquation = true;
+        this.inset = 5;
+
+        this.equationStack = new jsvgLayoutGroup();
+        this.equationStack.setSpacer(-7);
+        this.addChild( this.equationStack );
+
+        this.leftHolder = new jsvgGroup();
+        this.equationStack.addChild( this.leftHolder );
+
+        this.equalSign = new omdOperator('=');
+        this.equationStack.addChild( this.equalSign );
+
+        this.rightHolder = new jsvgGroup();
+        this.equationStack.addChild( this.rightHolder );
+    }
+
+    // make an equation (x + 2) = (2x - 3)
+
+    loadFromJSON( data )
+    {
+        // Helper function to fix operator symbols in termsAndOpers arrays
+        function fixOperatorSymbols(expressionData) {
+            if (expressionData && expressionData.termsAndOpers && Array.isArray(expressionData.termsAndOpers)) {
+                expressionData.termsAndOpers.forEach(item => {
+                    if (item && item.omdType === 'operator' && item.symbol) {
+                        // Ensure operator symbols are correct
+                        if (item.symbol === '−') item.symbol = '-'; // Fix unicode minus
+                        if (item.symbol === '＋') item.symbol = '+'; // Fix unicode plus
+                    }
+                });
+            }
+            return expressionData;
+        }
+
+        // If explicit left/right JSON provided, build them according to their omdType
+        if ( typeof data.leftExpression != "undefined" && data.leftExpression )
+        {
+            let left = data.leftExpression;
+            // Fix operator symbols in left expression before processing
+            left = fixOperatorSymbols(left);
+            
+            if ( left.omdType == "expression" ) this.leftExpression = new omdExpression();
+            else if ( left.omdType == "number" ) this.leftExpression = new omdNumber();
+            else if ( left.omdType == "variable" ) this.leftExpression = new omdVariable();
+            else if ( left.omdType == "term" ) this.leftExpression = new omdTerm();
+            else if ( left.omdType == "string" || typeof left == 'string' ) this.leftExpression = new omdExpression();
+
+            if (this.leftExpression && typeof this.leftExpression.loadFromJSON === 'function' && left && typeof left === 'object') {
+                this.leftExpression.loadFromJSON( left );
+            }
+
+            if (this.leftExpression) {
+                this.leftHolder.removeAllChildren();
+                this.leftHolder.addChild( this.leftExpression );
+            }
+        }
+
+        if ( typeof data.rightExpression != "undefined" && data.rightExpression )
+        {
+            let right = data.rightExpression;
+            // Fix operator symbols in right expression before processing
+            right = fixOperatorSymbols(right);
+            
+            if ( right.omdType == "expression" ) this.rightExpression = new omdExpression();
+            else if ( right.omdType == "number" ) this.rightExpression = new omdNumber();
+            else if ( right.omdType == "variable" ) this.rightExpression = new omdVariable();
+            else if ( right.omdType == "term" ) this.rightExpression = new omdTerm();
+            else if ( right.omdType == "string" || typeof right == 'string' ) this.rightExpression = new omdExpression();
+
+            if (this.rightExpression && typeof this.rightExpression.loadFromJSON === 'function' && right && typeof right === 'object') {
+                this.rightExpression.loadFromJSON( right );
+            }
+
+            if (this.rightExpression) {
+                this.rightHolder.removeAllChildren();
+                this.rightHolder.addChild( this.rightExpression );
+            }
+        }
+
+        // If no structured left/right provided but an `equation` string exists, try to parse it into structured expressions
+        if ( (!this.leftExpression || !this.rightExpression) && typeof data.equation === 'string' ) {
+            const parsed = parseEquationString(data.equation);
+            if ( parsed ) {
+                if (!this.leftExpression) this.leftExpression = new omdExpression();
+                if (!this.rightExpression) this.rightExpression = new omdExpression();
+                // pass parsed structured JSON to expressions
+                if (this.leftExpression && typeof this.leftExpression.loadFromJSON === 'function') this.leftExpression.loadFromJSON(parsed.leftExpression);
+                if (this.rightExpression && typeof this.rightExpression.loadFromJSON === 'function') this.rightExpression.loadFromJSON(parsed.rightExpression);
+                this.leftHolder.removeAllChildren(); this.leftHolder.addChild(this.leftExpression);
+                this.rightHolder.removeAllChildren(); this.rightHolder.addChild(this.rightExpression);
+            } else {
+                // fallback: treat sides as plain strings
+                const parts = String(data.equation || '').split('=');
+                const leftStr = (parts[0] || '').trim();
+                const rightStr = (parts[1] || '').trim();
+                if (!this.leftExpression) this.leftExpression = new omdString(leftStr || '');
+                if (!this.rightExpression) this.rightExpression = new omdString(rightStr || '');
+                if (this.leftExpression && typeof this.leftExpression.loadFromJSON === 'function' && typeof leftStr === 'string') this.leftExpression.loadFromJSON(leftStr);
+                if (this.rightExpression && typeof this.rightExpression.loadFromJSON === 'function' && typeof rightStr === 'string') this.rightExpression.loadFromJSON(rightStr);
+                this.leftHolder.removeAllChildren(); this.leftHolder.addChild(this.leftExpression);
+                this.rightHolder.removeAllChildren(); this.rightHolder.addChild(this.rightExpression);
+            }
+        }
+
+        // Guarded calls to hide backgrounds only when components exist
+        if (this.equalSign && typeof this.equalSign.hideBackgroundByDefault === 'function') this.equalSign.hideBackgroundByDefault();
+        if (this.leftExpression && typeof this.leftExpression.hideBackgroundByDefault === 'function') this.leftExpression.hideBackgroundByDefault();
+        if (this.rightExpression && typeof this.rightExpression.hideBackgroundByDefault === 'function') this.rightExpression.hideBackgroundByDefault();
+
+        this.centerEquation = false;
+        this.updateLayout();
+    }
+
+
+    setLeftAndRightExpressions( leftExp, rightExp )
+    {
+        this.leftExpression = leftExp;
+        this.leftHolder.removeAllChildren();
+        this.leftHolder.addChild( leftExp );
+
+        this.rightExpression = rightExp;
+        this.rightHolder.removeAllChildren();
+        this.rightHolder.addChild( rightExp );
+
+        this.equalSign.hideBackgroundByDefault();
+        this.leftExpression.hideBackgroundByDefault();
+        this.rightExpression.hideBackgroundByDefault();
+
+        this.updateLayout();
+    }
+
+    updateLayout()
+    {
+        this.leftHolder.setWidthAndHeight( this.leftExpression.width, this.leftExpression.height );
+        this.rightHolder.setWidthAndHeight( this.rightExpression.width, this.rightExpression.height );
+
+        // Layout the horizontal equation stack and place it with both horizontal and vertical inset
+        this.equationStack.doHorizontalLayout();
+        // Position the stack inside the back rectangle using inset for both X and Y
+        this.equationStack.setPosition( this.inset, this.inset );
+
+        var W = this.equationStack.width;
+        var H = this.equationStack.height;
+
+        // Size backRect to include top/bottom inset so internal content has consistent padding
+        this.backRect.setWidthAndHeight( W + this.inset*2, H + this.inset*2 );
+
+        this.setWidthAndHeight( this.backRect.width, this.backRect.height );
+
+        // Set individual width/height properties and viewBox for API compatibility
+        this.width = this.backRect.width;
+        this.height = this.backRect.height;
+        this.svgObject.setAttribute('viewBox', `0 0 ${this.width} ${this.height}`);
+
+        if ( this.centerEquation )
+        {
+            var leftShift = this.leftExpression.width + this.equalSign.width*0.50;
+            // shift backRect and equationStack together but keep vertical inset
+            this.backRect.setPosition( -1.0 * leftShift + this.inset/2, 0 );
+            this.equationStack.setPosition( -1.0 * leftShift + this.inset + this.inset/2, this.inset );
+        }
+    }
+
 }

package/src/omdExpression.js

@@ -7,6 +7,7 @@ import { omdOperator } from "./omdOperator.js";
 import { omdNumber } from "./omdNumber.js";
 import { omdVariable } from "./omdVariable.js";
 import { omdMetaExpression } from "./omdMetaExpression.js"
+import { parseExpressionString } from "./omdUtils.js";
 
 export class omdExpression extends omdMetaExpression
 {
@@ -29,6 +30,12 @@ export class omdExpression extends omdMetaExpression
 
     loadFromJSON( data )
     {
+        // Accept either structured object or a plain expression string
+        if ( typeof data === 'string' ) {
+            const parsed = parseExpressionString(data);
+            if ( parsed ) data = parsed;
+        }
+
         if ( typeof data.termsAndOpers != "undefined" )
         {
             for( var i=0; i<data.termsAndOpers.length; i++ )

package/src/omdFunction.js

@@ -64,8 +64,9 @@ export class omdFunction extends omdMetaExpression
         
         // format the f(x) part on the left
         this.leftHolder.removeAllChildren();
-        var funcText = this.functionName + "(" + this.inputVariableArray[0] + ")";   // this should be refactored as a function call
-        this.leftExpression = new omdString(funcText);
+    var funcText = this.functionName + "(" + this.inputVariableArray[0] + ")";   // this should be refactored as a function call
+    this.leftExpression = new omdExpression();
+    this.leftExpression.loadFromJSON(funcText);
         this.leftHolder.addChild( this.leftExpression );
     
         this.updateLayout();
@@ -75,7 +76,8 @@ export class omdFunction extends omdMetaExpression
     {
         this.leftHolder.removeAllChildren();
         var funcText = funcName + "(" + funcVariable + ")";   // this should be refactored as a function call
-        this.leftExpression = new omdString(funcText);
+        this.leftExpression = new omdExpression();
+        this.leftExpression.loadFromJSON(funcText);
         this.leftHolder.addChild( this.leftExpression );
 
         this.rightExpresion = rightExp;