@teachinglab/omd 0.1.0

package/omd/nodes/omdEquationNode.js

@@ -0,0 +1,1223 @@
+import { omdNode } from "./omdNode.js";
+import { getNodeForAST } from "../core/omdUtilities.js";
+import { omdOperatorNode } from "./omdOperatorNode.js";
+import { omdBinaryExpressionNode } from "./omdBinaryExpressionNode.js";
+import { omdConstantNode } from "./omdConstantNode.js";
+import { omdParenthesisNode } from "./omdParenthesisNode.js";
+import { omdRationalNode } from "./omdRationalNode.js";
+import { omdFunctionNode } from "./omdFunctionNode.js";
+import { omdUnaryExpressionNode } from './omdUnaryExpressionNode.js';
+
+/**
+ * @global {math} math - The global math.js instance.
+ */
+
+export class omdEquationNode extends omdNode {
+    constructor(ast) {
+        super(ast);
+        this.type = "omdEquationNode";
+
+        const type = ast.type || ast.mathjs;
+
+        if (type === "AssignmentNode") {
+            const LeftNodeType = getNodeForAST(ast.object);
+            this.left = new LeftNodeType(ast.object);
+
+            const RightNodeType = getNodeForAST(ast.value);
+            this.right = new RightNodeType(ast.value);
+
+            this.argumentNodeList.left = this.left;
+            this.argumentNodeList.right = this.right;
+
+        } else if (ast.args && ast.args.length === 2) { // Fallback for other potential structures
+            const LeftNodeType = getNodeForAST(ast.args[0]);
+            this.left = new LeftNodeType(ast.args[0]);
+
+            const RightNodeType = getNodeForAST(ast.args[1]);
+            this.right = new RightNodeType(ast.args[1]);
+
+            // Ensure argumentNodeList is populated for replacement machinery
+            this.argumentNodeList.left = this.left;
+            this.argumentNodeList.right = this.right;
+        } else {
+            // Create dummy nodes to prevent further errors
+            this.left = new omdNode({ type: 'SymbolNode', name: 'error' });
+            this.right = new omdNode({ type: 'SymbolNode', name: 'error' });
+            this.argumentNodeList.left = this.left;
+            this.argumentNodeList.right = this.right;
+        }
+
+        this.equalsSign = new omdOperatorNode({ type: "OperatorNode", op: "=" });
+
+        this.addChild(this.left);
+        this.addChild(this.equalsSign);
+        this.addChild(this.right);
+
+        // Optional background style configuration
+        this._backgroundStyle = null; // { backgroundColor, cornerRadius, pill }
+    }
+
+    computeDimensions() {
+        this.left.computeDimensions();
+        this.equalsSign.computeDimensions();
+        this.right.computeDimensions();
+
+        const spacing = 8 * this.getFontSize() / this.getRootFontSize();
+        let totalWidth = this.left.width + this.equalsSign.width + this.right.width + (spacing * 2);
+        const contentHeight = Math.max(this.left.height, this.equalsSign.height, this.right.height);
+        const { padX, padY } = this._getEffectivePadding(contentHeight);
+        const maxHeight = contentHeight + (padY * 2);
+        totalWidth += (padX * 2);
+
+        this.setWidthAndHeight(totalWidth, maxHeight);
+    }
+
+    updateLayout() {
+        // Keep argumentNodeList synchronized for replacement machinery
+        this.argumentNodeList = { left: this.left, right: this.right };
+
+        const spacing = 8 * this.getFontSize() / this.getRootFontSize();
+
+        const maxBaseline = Math.max(
+            this.left.getAlignmentBaseline(),
+            this.equalsSign.getAlignmentBaseline(),
+            this.right.getAlignmentBaseline()
+        );
+
+        // Optional background padding offset (reuse effective padding)
+        const contentHeight2 = Math.max(this.left.height, this.equalsSign.height, this.right.height);
+        let { padX, padY } = this._getEffectivePadding(contentHeight2);
+
+        let x = padX;
+
+        // Position left node
+        this.left.updateLayout();
+        this.left.setPosition(x, padY + (maxBaseline - this.left.getAlignmentBaseline()));
+        x += this.left.width + spacing;
+
+        // Position equals sign
+        this.equalsSign.updateLayout();
+        this.equalsSign.setPosition(x, padY + (maxBaseline - this.equalsSign.getAlignmentBaseline()));
+        x += this.equalsSign.width + spacing;
+
+        // Position right node
+        this.right.updateLayout();
+        this.right.setPosition(x, padY + (maxBaseline - this.right.getAlignmentBaseline()));
+
+        // Recompute overall dimensions now that children are positioned (handles tall nodes like rationals)
+        this.computeDimensions();
+
+        // Apply configured background styling after layout to ensure correct dimensions
+        if (this._backgroundStyle) {
+            const { backgroundColor, cornerRadius, pill } = this._backgroundStyle;
+            if (backgroundColor) {
+                this.backRect.setFillColor(backgroundColor);
+                this.backRect.setOpacity(1.0);
+                this.defaultOpaqueBack = true;
+            }
+            if (pill === true) {
+                // Pill shape: half the height
+                const radius = Math.max(0, Math.floor(this.height / 2));
+                this.backRect.setCornerRadius(radius);
+                // Also apply pill corners to all descendant nodes so their backgrounds don't show square edges
+                this._applyPillToDescendants();
+            } else if (typeof cornerRadius === 'number') {
+                this.backRect.setCornerRadius(cornerRadius);
+            }
+
+            // Make all descendant backgrounds match the equation background color
+            if (backgroundColor) {
+                this._matchChildBackgrounds(backgroundColor);
+            }
+        }
+
+        // Ensure the background rectangle always matches the current equation size
+        if (this.backRect && (this.width || this.height)) {
+            this.backRect.setWidthAndHeight(this.width, this.height);
+        }
+
+        // Final pass: center content visually within backRect
+        const minTop2 = Math.min(this.left.ypos, this.equalsSign.ypos, this.right.ypos);
+        const maxBottom2 = Math.max(
+            this.left.ypos + this.left.height,
+            this.equalsSign.ypos + this.equalsSign.height,
+            this.right.ypos + this.right.height
+        );
+        const topPad = minTop2;
+        const bottomPad = Math.max(0, (this.height || 0) - maxBottom2);
+        let deltaY2 = (topPad - bottomPad) / 2 - (0.06 * this.getFontSize());
+        if (Math.abs(deltaY2) > 0.01) {
+            this.left.setPosition(this.left.xpos, this.left.ypos - deltaY2);
+            this.equalsSign.setPosition(this.equalsSign.xpos, this.equalsSign.ypos - deltaY2);
+            this.right.setPosition(this.right.xpos, this.right.ypos - deltaY2);
+        }
+    }
+
+    /**
+     * Computes effective padding taking into account defaults, user overrides, and pill radius clamping.
+     * @param {number} contentHeight
+     * @returns {{padX:number,padY:number}}
+     */
+    _getEffectivePadding(contentHeight) {
+        const ratio = this.getFontSize() / this.getRootFontSize();
+        const baseX = 2 * ratio;
+        const baseY = 2 * ratio;
+        const pad = this._backgroundStyle?.padding;
+        let padX = (typeof pad === 'number' ? pad : pad?.x) ?? baseX;
+        let padY = (typeof pad === 'number' ? pad : pad?.y) ?? baseY;
+        if (this._backgroundStyle?.pill === true) {
+            const radius = Math.ceil((contentHeight + 2 * padY) / 2);
+            if (padX < radius) padX = radius;
+        }
+        return { padX, padY };
+    }
+
+    /**
+     * Applies pill-shaped corner radius to all descendant nodes' backgrounds.
+     * Ensures child nodes don't show square corners when the parent equation uses a pill.
+     * @private
+     */
+    _applyPillToDescendants() {
+        const visited = new Set();
+        const stack = Array.isArray(this.childList) ? [...this.childList] : [];
+        while (stack.length) {
+            const node = stack.pop();
+            if (!node || visited.has(node)) continue;
+            visited.add(node);
+
+            if (node !== this && node.backRect && typeof node.backRect.setCornerRadius === 'function') {
+                const h = typeof node.height === 'number' && node.height > 0 ? node.height : 0;
+                const r = Math.max(0, Math.floor(h / 2));
+                node.backRect.setCornerRadius(r);
+            }
+
+            if (Array.isArray(node.childList)) {
+                for (const c of node.childList) stack.push(c);
+            }
+            if (node.argumentNodeList && typeof node.argumentNodeList === 'object') {
+                for (const val of Object.values(node.argumentNodeList)) {
+                    if (Array.isArray(val)) {
+                        val.forEach(v => v && stack.push(v));
+                    } else if (val) {
+                        stack.push(val);
+                    }
+                }
+            }
+        }
+    }
+
+    /**
+     * Creates a value node from a number or a Math.js AST object.
+     * @param {number|object} value - The value to convert.
+     * @returns {omdNode} The corresponding OMD node.
+     * @private
+     */
+    _createNodeFromValue(value) {
+        if (typeof value === 'number') {
+            const node = new omdConstantNode({ value });
+            node.initialize(); // Constants need initialization to compute dimensions
+            return node;
+        }
+        if (typeof value === 'object' && value !== null) { // It's a mathjs AST
+            const NodeClass = getNodeForAST(value);
+            const node = new NodeClass(value);
+            // Most non-leaf nodes have initialize, but we call it just in case
+            if (typeof node.initialize === 'function') {
+                node.initialize();
+            }
+            return node;
+        }
+        return null;
+    }
+
+    /**
+     * Applies an operation to both sides of the equation.
+     * @param {number|object} value - The value to apply.
+     * @param {string} op - The operator symbol (e.g., '+', '-', '*', '/').
+     * @param {string} fn - The function name for the AST (e.g., 'add', 'subtract').
+     * @returns {omdEquationNode} A new equation node with the operation applied.
+     * @private
+     */
+    _applyOperation(value, op, fn) {
+        const valueNode = this._createNodeFromValue(value);
+        if (!valueNode) return this; // Return original if value is invalid
+
+        // Determine if we need to wrap sides in parentheses for correct precedence
+        const leftSideNeedsParens = this._needsParenthesesForOperation(this.left, op);
+        const rightSideNeedsParens = this._needsParenthesesForOperation(this.right, op);
+
+        // Wrap sides in parentheses if needed
+        const leftOperand = leftSideNeedsParens ? 
+            { type: 'ParenthesisNode', content: this.left.toMathJSNode() } : 
+            this.left.toMathJSNode();
+        const rightOperand = rightSideNeedsParens ? 
+            { type: 'ParenthesisNode', content: this.right.toMathJSNode() } : 
+            this.right.toMathJSNode();
+
+        const newLeftAst = { type: 'OperatorNode', op, fn, args: [leftOperand, valueNode.toMathJSNode()] };
+        const newRightAst = { type: 'OperatorNode', op, fn, args: [rightOperand, valueNode.toMathJSNode()] };
+        
+        let newLeft, newRight;
+
+        if (op === '/') {
+            newLeft = new omdRationalNode(newLeftAst);
+            newRight = new omdRationalNode(newRightAst);
+        } else {
+            newLeft = new omdBinaryExpressionNode(newLeftAst);
+            newRight = new omdBinaryExpressionNode(newRightAst);
+        }
+        
+        const newEquationAst = {
+            type: 'AssignmentNode',
+            object: newLeft.toMathJSNode(),
+            index: null,
+            value: newRight.toMathJSNode()
+        };
+
+        const newEquation = new omdEquationNode(newEquationAst);
+        newEquation.setFontSize(this.getFontSize());
+        
+        // Establish provenance tracking from original equation to new equation
+        newEquation.provenance.push(this.id);
+        
+        // Establish granular provenance: left side to left side, right side to right side
+        if (newEquation.left && this.left) {
+            this._establishGranularProvenance(newEquation.left, this.left, value, fn);
+        }
+        if (newEquation.right && this.right) {
+            this._establishGranularProvenance(newEquation.right, this.right, value, fn);
+        }
+        
+        newEquation.initialize();
+        return newEquation;
+    }
+
+    /**
+     * Determines if a node needs parentheses when used as an operand with the given operation.
+     * This ensures correct operator precedence.
+     * @param {omdNode} node - The node to check
+     * @param {string} operation - The operation that will be applied ('*', '/', '+', '-')
+     * @returns {boolean} True if parentheses are needed
+     * @private
+     */
+    _needsParenthesesForOperation(node, operation) {
+        // If the node is not a binary expression, no parentheses needed
+        if (!node || node.type !== 'omdBinaryExpressionNode') {
+            return false;
+        }
+
+        // Define operator precedence (higher number = higher precedence)
+        const precedence = {
+            '+': 1,
+            '-': 1,
+            '*': 2,
+            '/': 2,
+            '^': 3
+        };
+
+        // Get the operation of the existing node
+        let existingOp = node.operation;
+        if (typeof existingOp === 'object' && existingOp && existingOp.name) {
+            existingOp = existingOp.name;
+        }
+        if (node.astNodeData && node.astNodeData.op) {
+            existingOp = node.astNodeData.op;
+        }
+
+        // Convert operation names to symbols if needed
+        const opMap = {
+            'add': '+',
+            'subtract': '-',
+            'multiply': '*',
+            'divide': '/',
+            'pow': '^'
+        };
+        
+        const currentOpSymbol = opMap[existingOp] || existingOp;
+        const newOpSymbol = opMap[operation] || operation;
+
+        // If we can't determine the precedence, be safe and add parentheses
+        if (!precedence[currentOpSymbol] || !precedence[newOpSymbol]) {
+            return true;
+        }
+
+        // Need parentheses if the existing operation has lower precedence than the new operation
+        // For example: (x + 2) * 3 needs parentheses, but x * 2 + 3 doesn't need them around x * 2
+        return precedence[currentOpSymbol] < precedence[newOpSymbol];
+    }
+
+    /**
+     * Returns a new equation with a value added to both sides.
+     * @param {number|object} value - The value to add.
+     */
+    addToBothSides(value) {
+        return this._applyOperation(value, '+', 'add');
+    }
+
+    /**
+     * Returns a new equation with a value subtracted from both sides.
+     * @param {number|object} value - The value to subtract.
+     */
+    subtractFromBothSides(value) {
+        return this._applyOperation(value, '-', 'subtract');
+    }
+
+    /**
+     * Returns a new equation with both sides multiplied by a value.
+     * @param {number|object} value - The value to multiply by.
+     * @param {string} [operationDisplayId] - Optional ID of the operation display for provenance tracking.
+     */
+    multiplyBothSides(value, operationDisplayId) {
+        return this._applyOperation(value, '*', 'multiply', operationDisplayId);
+    }
+
+    /**
+     * Returns a new equation with both sides divided by a value.
+     * @param {number|object} value - The value to divide by.
+     */
+    divideBothSides(value) {
+        return this._applyOperation(value, '/', 'divide');
+    }
+
+
+
+    /**
+     * Establishes granular provenance tracking between new and original nodes
+     * This handles equation operations like "multiply both sides" by linking the new expression to the original
+     * @param {omdNode} newNode - The new node being created (the result of the operation)
+     * @param {omdNode} originalNode - The original node being transformed
+     * @param {number|Object} operationValue - The value used in the operation
+     * @param {string} operation - The operation being performed ('add', 'subtract', 'multiply', 'divide')
+     * @private
+     */
+    _establishGranularProvenance(newNode, originalNode, operationValue, operation) {
+        if (!newNode || !originalNode) return;
+        
+        // Ensure newNode has a provenance array
+        if (!newNode.provenance) {
+            newNode.provenance = [];
+        }
+        
+        // For equation operations, we want to establish provenance between corresponding parts
+        if (operation === 'divide') {
+            // For division operations like (2x)/2 = x, check if we can simplify
+            if (originalNode.type === 'omdBinaryExpressionNode' && 
+                this._isMultiplicationOperation(originalNode)) {
+                
+                // Check if the operation value matches one of the factors
+                const leftIsConstant = originalNode.left.isConstant();
+                const rightIsConstant = originalNode.right.isConstant();
+                
+                // Convert operationValue to number if it's an object
+                const opValue = (typeof operationValue === 'object' && operationValue.getValue) ? 
+                               operationValue.getValue() : operationValue;
+                
+                if (leftIsConstant && originalNode.left.getValue() === opValue) {
+                    // Dividing by the left factor, so result should trace to right factor
+                    this._copyProvenanceStructure(newNode, originalNode.right);
+                } else if (rightIsConstant && originalNode.right.getValue() === opValue) {
+                    // Dividing by the right factor, so result should trace to left factor
+                    this._copyProvenanceStructure(newNode, originalNode.left);
+                } else {
+                    // Not a simple factor division, link to the whole expression
+                    this._copyProvenanceStructure(newNode, originalNode);
+                }
+            } else {
+                // Not a multiplication, link to the whole original
+                this._copyProvenanceStructure(newNode, originalNode);
+            }
+        } 
+        else if (operation === 'multiply') {
+            // For multiplication operations like x * 2 = 2x
+            // The new expression should trace back to the original expression
+            this._copyProvenanceStructure(newNode, originalNode);
+            
+            // Also establish provenance for the binary expression structure
+            if (newNode.type === 'omdBinaryExpressionNode') {
+                // Link the left operand (which should be the original expression) to the original
+                if (newNode.left) {
+                    this._copyProvenanceStructure(newNode.left, originalNode);
+                }
+                // The right operand is the operation value, no additional provenance needed
+            }
+        }
+        else if (operation === 'add' || operation === 'subtract') {
+            // For addition/subtraction, the new binary expression's provenance should
+            // link to the original expression, but we should handle operands separately
+            // to avoid incorrect linking of the added/subtracted value.
+            newNode.provenance.push(originalNode.id);
+
+            if (newNode.type === 'omdBinaryExpressionNode') {
+                // Link the left operand (the original side of the equation) to the original node structure.
+                if (newNode.left) {
+                    this._copyProvenanceStructure(newNode.left, originalNode);
+                }
+                // The right operand is the new value being added/subtracted - preserve its provenance
+                // for proper highlighting when constants are combined later
+                // (Don't clear provenance - let it maintain its own identity for combination rules)
+            }
+        }
+        else {
+            // For any other operations, link to the whole original expression
+            this._copyProvenanceStructure(newNode, originalNode);
+        }
+    }
+
+    /**
+     * Helper method to check if a node represents a multiplication operation
+     * @param {omdNode} node - The node to check
+     * @returns {boolean} True if it's a multiplication operation
+     * @private
+     */
+    _isMultiplicationOperation(node) {
+        if (node.type !== 'omdBinaryExpressionNode') return false;
+        
+        const op = node.operation;
+        return op === 'multiply' || 
+               (typeof op === 'object' && op && op.name === 'multiply') ||
+               (node.op && node.op.opName === '*');
+    }
+
+    /**
+     * Copies the provenance structure from source to target, maintaining granularity
+     * @param {omdNode} target - The node to set provenance on
+     * @param {omdNode} source - The node to copy provenance from
+     * @private
+     */
+    _copyProvenanceStructure(target, source) {
+        if (!target || !source) return;
+        
+        // Initialize provenance array if it doesn't exist
+        if (!target.provenance) {
+            target.provenance = [];
+        }
+        
+        // If the source has its own provenance, copy it
+        if (source.provenance && source.provenance.length > 0) {
+            // Create a Set to track unique IDs we've already processed
+            const processedIds = new Set(target.provenance);
+            
+            // Process each provenance ID from source
+            source.provenance.forEach(id => {
+                if (!processedIds.has(id)) {
+                    processedIds.add(id);
+                    target.provenance.push(id);
+                }
+            });
+        }
+        
+        // Add the source's own ID if not already present
+        if (!target.provenance.includes(source.id)) {
+            target.provenance.push(source.id);
+        }
+        
+        // If both nodes have the same structure, recursively copy provenance
+        if (target.type === source.type) {
+            if (target.argumentNodeList && source.argumentNodeList) {
+                for (const key of Object.keys(source.argumentNodeList)) {
+                    const targetChild = target.argumentNodeList[key];
+                    const sourceChild = source.argumentNodeList[key];
+                    
+                    if (targetChild && sourceChild) {
+                        if (Array.isArray(targetChild) && Array.isArray(sourceChild)) {
+                            // Handle array of children
+                            for (let i = 0; i < Math.min(targetChild.length, sourceChild.length); i++) {
+                                if (targetChild[i] && sourceChild[i]) {
+                                    this._copyProvenanceStructure(targetChild[i], sourceChild[i]);
+                                }
+                            }
+                        } else {
+                            // Handle single child node
+                            this._copyProvenanceStructure(targetChild, sourceChild);
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+
+    /**
+     * Creates an omdEquationNode instance from a string.
+     * @param {string} equationString - The string to parse (e.g., "2x+4=10").
+     * @returns {omdEquationNode} A new instance of omdEquationNode.
+     */
+    static fromString(equationString) {
+        if (!equationString.includes('=')) {
+            throw new Error("Input string is not a valid equation.");
+        }
+
+        const parts = equationString.split('=');
+        if (parts.length > 2) {
+            throw new Error("Equation can only have one '=' sign.");
+        }
+
+        const left = parts[0].trim();
+        const right = parts[1].trim();
+
+        if (!left || !right) {
+            throw new Error("Equation must have a left and a right side.");
+        }
+
+        // Manually construct an AST-like object that the constructor can understand.
+        const ast = {
+            type: "AssignmentNode",
+            object: math.parse(left),
+            value: math.parse(right),
+            // Add a clone method so it behaves like a real math.js node for our system.
+            clone: function () {
+                return {
+                    type: this.type,
+                    object: this.object.clone(),
+                    value: this.value.clone(),
+                    clone: this.clone
+                };
+            }
+        };
+
+        return new omdEquationNode(ast);
+    }
+
+    clone() {
+        // Create a clone from a deep-copied AST. This creates a node tree
+        // with the exact structure needed for simplification.
+        const newAstNodeData = JSON.parse(JSON.stringify(this.astNodeData));
+        const clone = new omdEquationNode(newAstNodeData);
+
+        // Recursively fix the provenance chain for the new clone.
+        clone._syncProvenanceFrom(this);
+        
+        clone.setFontSize(this.getFontSize());
+
+        // Ensure argumentNodeList exists on clone for replacement machinery
+        clone.argumentNodeList = { left: clone.left, right: clone.right };
+
+        return clone;
+    }
+
+    /**
+     * Overrides default deselect behavior for equations inside a calculation.
+     * @param {omdNode} root - The root of the deselection event.
+     */
+    deselect(root) {
+        if (!(root instanceof omdNode)) root = this;
+
+        if (this === root && this.parent instanceof omdNode) {
+            this.parent.select(root);
+        }
+
+        this.backRect.setFillColor(omdColor.lightGray);
+        if (this.defaultOpaqueBack == false) {
+            this.backRect.setOpacity(0.01);
+        }
+
+        this.childList.forEach((child) => {
+            if (child !== root && child instanceof omdNode) {
+                child.deselect(root);
+            }
+        });
+    }
+
+    /**
+     * Converts the omdEquationNode to a math.js AST node.
+     * @returns {Object} A math.js-compatible AST node.
+     */
+    toMathJSNode() {
+        let astNode;
+
+        // Get fresh AST representations from children to ensure parentheses and other
+        // structural elements are properly preserved
+        if (this.astNodeData.type === "AssignmentNode") {
+            astNode = {
+                type: 'AssignmentNode',
+                object: this.left.toMathJSNode(),
+                value: this.right.toMathJSNode(),
+                id: this.id,
+                provenance: this.provenance
+            };
+        } else {
+            astNode = {
+                type: 'OperatorNode', op: '=', fn: 'equal',
+                args: [this.left.toMathJSNode(), this.right.toMathJSNode()],
+                id: this.id,
+                provenance: this.provenance
+            };
+        }
+        
+        // Add a clone method to maintain compatibility with math.js's expectations.
+        astNode.clone = function() {
+            const clonedNode = { ...this };
+            if (this.object) clonedNode.object = this.object.clone();
+            if (this.value) clonedNode.value = this.value.clone();
+            if (this.args) clonedNode.args = this.args.map(arg => arg.clone());
+            return clonedNode;
+        };
+        return astNode;
+    }
+
+    /**
+     * Applies a function to both sides of the equation
+     * @param {string} functionName - The name of the function to apply
+     * @returns {omdEquationNode} A new equation with the function applied to both sides
+     */
+    applyFunction(functionName) {
+        const leftWithFunction = this._createFunctionNode(functionName, this.left);
+        const rightWithFunction = this._createFunctionNode(functionName, this.right);
+        
+        const newEquation = this._createNewEquation(leftWithFunction, rightWithFunction);
+        newEquation.provenance.push(this.id);
+        
+        return newEquation;
+    }
+
+    /**
+     * Creates a function node wrapping the given argument
+     * @param {string} functionName - The function name
+     * @param {omdNode} argument - The argument to wrap
+     * @returns {omdNode} The function node
+     * @private
+     */
+    _createFunctionNode(functionName, argument) {
+        // Create a math.js AST for the function
+        const functionAst = {
+            type: 'FunctionNode',
+            fn: { type: 'SymbolNode', name: functionName },
+            args: [argument.toMathJSNode()]
+        };
+        
+        // Use the already imported getNodeForAST function
+        const NodeClass = getNodeForAST(functionAst);
+        const functionNode = new NodeClass(functionAst);
+        functionNode.setFontSize(this.getFontSize());
+        return functionNode;
+    }
+
+    /**
+     * Creates a new equation from left and right sides
+     * @param {omdNode} left - The left side
+     * @param {omdNode} right - The right side
+     * @returns {omdEquationNode} The new equation
+     * @private
+     */
+    _createNewEquation(left, right) {
+        const newAst = {
+            type: "AssignmentNode",
+            object: left.toMathJSNode(),
+            value: right.toMathJSNode(),
+            clone: function () {
+                return {
+                    type: this.type,
+                    object: this.object.clone(),
+                    value: this.value.clone(),
+                    clone: this.clone
+                };
+            }
+        };
+        
+        return new omdEquationNode(newAst);
+    }
+
+    /**
+     * Apply an operation to one or both sides of the equation
+     * @param {number|omdNode} value - The value to apply
+     * @param {string} operation - 'add', 'subtract', 'multiply', or 'divide'
+     * @param {string} side - 'left', 'right', or 'both' (default: 'both')
+     * @returns {omdEquationNode} New equation with operation applied
+     */
+    applyOperation(value, operation, side = 'both') {
+        // Map operation names to operators and function names
+        const operationMap = {
+            'add': { op: '+', fn: 'add' },
+            'subtract': { op: '-', fn: 'subtract' },
+            'multiply': { op: '*', fn: 'multiply' },
+            'divide': { op: '/', fn: 'divide' }
+        };
+        
+        const opInfo = operationMap[operation];
+        if (!opInfo) {
+            throw new Error(`Unknown operation: ${operation}`);
+        }
+        
+        // Handle different side options
+        if (side === 'both') {
+            // Use existing methods for both sides
+            return this._applyOperation(value, opInfo.op, opInfo.fn);
+        }
+        
+        // For single side operations, we need to create the new equation manually
+        const valueNode = this._createNodeFromValue(value);
+        if (!valueNode) {
+            throw new Error("Invalid value provided");
+        }
+        
+        // Create new AST for the specified side
+        let newLeftAst, newRightAst;
+        
+        if (side === 'left') {
+            // Apply operation to left side only
+            const leftNeedsParens = this._needsParenthesesForOperation(this.left, opInfo.op);
+            const leftOperand = leftNeedsParens ?
+                { type: 'ParenthesisNode', content: this.left.toMathJSNode() } :
+                this.left.toMathJSNode();
+                
+            newLeftAst = { type: 'OperatorNode', op: opInfo.op, fn: opInfo.fn, args: [leftOperand, valueNode.toMathJSNode()] };
+            newRightAst = this.right.toMathJSNode();
+        } else if (side === 'right') {
+            // Apply operation to right side only
+            const rightNeedsParens = this._needsParenthesesForOperation(this.right, opInfo.op);
+            const rightOperand = rightNeedsParens ?
+                { type: 'ParenthesisNode', content: this.right.toMathJSNode() } :
+                this.right.toMathJSNode();
+                
+            newLeftAst = this.left.toMathJSNode();
+            newRightAst = { type: 'OperatorNode', op: opInfo.op, fn: opInfo.fn, args: [rightOperand, valueNode.toMathJSNode()] };
+        } else {
+            throw new Error(`Invalid side: ${side}. Must be 'left', 'right', or 'both'`);
+        }
+        
+        // Create nodes from ASTs
+        let newLeft, newRight;
+        
+        if (side === 'left' && opInfo.op === '/') {
+            newLeft = new omdRationalNode(newLeftAst);
+            newRight = getNodeForAST(newRightAst) === omdNode ? this.right : new (getNodeForAST(newRightAst))(newRightAst);
+        } else if (side === 'right' && opInfo.op === '/') {
+            newLeft = getNodeForAST(newLeftAst) === omdNode ? this.left : new (getNodeForAST(newLeftAst))(newLeftAst);
+            newRight = new omdRationalNode(newRightAst);
+        } else if (side === 'left') {
+            newLeft = new omdBinaryExpressionNode(newLeftAst);
+            newRight = getNodeForAST(newRightAst) === omdNode ? this.right : new (getNodeForAST(newRightAst))(newRightAst);
+        } else {
+            newLeft = getNodeForAST(newLeftAst) === omdNode ? this.left : new (getNodeForAST(newLeftAst))(newLeftAst);
+            newRight = new omdBinaryExpressionNode(newRightAst);
+        }
+        
+        // Create new equation
+        const newEquationAst = {
+            type: 'AssignmentNode',
+            object: newLeft.toMathJSNode(),
+            value: newRight.toMathJSNode()
+        };
+        
+        const newEquation = new omdEquationNode(newEquationAst);
+        newEquation.setFontSize(this.getFontSize());
+        newEquation.provenance.push(this.id);
+        
+        // Initialize to compute dimensions
+        newEquation.initialize();
+        
+        return newEquation;
+    }
+
+    /**
+     * Swap left and right sides of the equation
+     * @returns {omdEquationNode} New equation with sides swapped
+     */
+    swapSides() {
+        const newEquation = this.clone();
+        [newEquation.left, newEquation.right] = [newEquation.right, newEquation.left];
+        
+        // Update the AST for consistency
+        [newEquation.astNodeData.object, newEquation.astNodeData.value] = 
+        [newEquation.astNodeData.value, newEquation.astNodeData.object];
+        
+        newEquation.provenance.push(this.id);
+        
+        // This is a layout change, not a mathematical simplification, so no need for granular provenance
+        newEquation.initialize();
+        return newEquation;
+    }
+
+    /**
+     * Returns a string representation of the equation
+     * @returns {string} The equation as a string
+     */
+    toString() {
+        return `${this.left.toString()} = ${this.right.toString()}`;
+    }
+
+    /**
+     * Configure equation background styling. Defaults remain unchanged if not provided.
+     * @param {{ backgroundColor?: string, cornerRadius?: number, pill?: boolean }} style
+     */
+    setBackgroundStyle(style = {}) {
+        this._backgroundStyle = { ...(this._backgroundStyle || {}), ...style };
+        // If layout already computed, re-apply immediately
+        if (this.backRect && (this.width || this.height)) {
+            this.updateLayout();
+        }
+    }
+
+    /**
+     * Returns the horizontal anchor X for the equals sign center relative to this node's origin.
+     * Accounts for background padding and internal spacing.
+     * @returns {number}
+     */
+    getEqualsAnchorX() {
+        const spacing = 8 * this.getFontSize() / this.getRootFontSize();
+        // Use EFFECTIVE padding so pill clamping and tall nodes are accounted for
+        const contentHeight = Math.max(this.left?.height || 0, this.equalsSign?.height || 0, this.right?.height || 0);
+        const { padX } = this._getEffectivePadding(contentHeight);
+        // Anchor at center of equals sign
+        return padX + this.left.width + spacing + (this.equalsSign?.width || 0) / 2;
+    }
+
+    /**
+     * Returns the X padding applied by background style
+     * @returns {number}
+     */
+    getBackgroundPaddingX() {
+        const pad = this._backgroundStyle?.padding;
+        return pad == null ? 0 : (typeof pad === 'number' ? pad : (pad.x ?? 0));
+    }
+
+    /**
+     * Returns the effective horizontal padding used in layout, including pill clamping
+     * @returns {number}
+     */
+    getEffectiveBackgroundPaddingX() {
+        const contentHeight = Math.max(this.left?.height || 0, this.equalsSign?.height || 0, this.right?.height || 0);
+        const { padX } = this._getEffectivePadding(contentHeight);
+        return padX;
+    }
+
+    /**
+     * Hides the backgrounds of all child nodes (descendants), preserving only this node's background.
+     * @private
+     */
+    _matchChildBackgrounds(color) {
+        const visited = new Set();
+        const stack = Array.isArray(this.childList) ? [...this.childList] : [];
+        while (stack.length) {
+            const node = stack.pop();
+            if (!node || visited.has(node)) continue;
+            visited.add(node);
+
+            if (node !== this && node.backRect) {
+                node.backRect.setFillColor(color);
+                node.backRect.setOpacity(1.0);
+            }
+
+            if (Array.isArray(node.childList)) {
+                for (const c of node.childList) stack.push(c);
+            }
+            if (node.argumentNodeList && typeof node.argumentNodeList === 'object') {
+                for (const val of Object.values(node.argumentNodeList)) {
+                    if (Array.isArray(val)) {
+                        val.forEach(v => v && stack.push(v));
+                    } else if (val) {
+                        stack.push(val);
+                    }
+                }
+            }
+        }
+    }
+
+    /**
+     * Evaluates the equation by evaluating both sides and checking for equality.
+     * @param {Object} variables - A map of variable names to their numeric values.
+     * @returns {Object} An object containing the evaluated left and right sides.
+     */
+    evaluate(variables = {}) {
+        const leftValue = this.left.evaluate(variables);
+        const rightValue = this.right.evaluate(variables);
+
+        return { left: leftValue, right: rightValue };
+    }
+        /**
+     * Renders the equation to different visualization formats
+     * @param {string} visualizationType - "graph" | "table" | "hanger"
+     * @param {Object} options - Optional configuration
+     * @param {string} options.side - "both" (default), "left", or "right"
+     * @param {number} options.xMin - Domain min for x (default: -10)
+     * @param {number} options.xMax - Domain max for x (default: 10)
+     * @param {number} options.yMin - Range min for y (graph only, default: -10)
+     * @param {number} options.yMax - Range max for y (graph only, default: 10)
+     * @param {number} options.stepSize - Step size for table (default: 1)
+     * @returns {Object} JSON per schemas in src/json-schemas.md
+     */
+    renderTo(visualizationType, options = {}) {
+        // Set default options
+        const defaultOptions = {
+            side: "both",
+            xMin: -10,
+            xMax: 10,
+            yMin: -10,
+            yMax: 10,
+            stepSize: 1
+        };
+        const mergedOptions = { ...defaultOptions, ...options };
+
+        switch (visualizationType.toLowerCase()) {
+            case 'graph':
+                return this._renderToGraph(mergedOptions);
+            case 'table':
+                return this._renderToTable(mergedOptions);
+            case 'hanger':
+                return this._renderToHanger();
+            case 'tileequation': {
+                const leftExpr = this.getLeft().toString();
+                const rightExpr = this.getRight().toString();
+                const eqString = `${leftExpr}=${rightExpr}`;
+                // Colors/options passthrough
+                const plusColor = mergedOptions.plusColor || '#79BBFD';
+                const equalsColor = mergedOptions.equalsColor || '#FF6B6B';
+                const xPillColor = mergedOptions.xPillColor; // optional
+                const tileBgColor = mergedOptions.tileBackgroundColor; // optional
+                const dotColor = mergedOptions.dotColor; // optional
+                const tileSize = mergedOptions.tileSize || 28;
+                const dotsPerColumn = mergedOptions.dotsPerColumn || 10;
+                return {
+                    omdType: 'tileEquation',
+                    equation: eqString,
+                    tileSize,
+                    dotsPerColumn,
+                    plusColor,
+                    equalsColor,
+                    xPill: xPillColor ? { color: xPillColor } : undefined,
+                    numberTileDefaults: {
+                        backgroundColor: tileBgColor,
+                        dotColor
+                    }
+                };
+            }
+            default:
+                throw new Error(`Unknown visualization type: ${visualizationType}. Supported types are: graph, table, hanger`);
+        }
+    }
+
+    /**
+     * Gets the left side of the equation
+     * @returns {omdNode} The left side node
+     */
+    getLeft() {
+        return this.left;
+    }
+
+    /**
+     * Gets the right side of the equation
+     * @returns {omdNode} The right side node
+     */
+    getRight() {
+        return this.right;
+    }
+
+    /**
+     * Generates JSON configuration for coordinate plane graph visualization
+     * @param {Object} options - Configuration options
+     * @returns {Object} JSON configuration for omdCoordinatePlane
+     * @private
+     */
+    _renderToGraph(options) {
+        const leftExpr = this._normalizeExpressionString(this.getLeft().toString());
+        const rightExpr = this._normalizeExpressionString(this.getRight().toString());
+
+        let graphEquations = [];
+        if (options.side === 'left') {
+            graphEquations = [{ equation: `y = ${leftExpr}`, domain: { min: options.xMin, max: options.xMax }, color: 'blue', strokeWidth: 2 }];
+        } else if (options.side === 'right') {
+            graphEquations = [{ equation: `y = ${rightExpr}`, domain: { min: options.xMin, max: options.xMax }, color: 'red', strokeWidth: 2 }];
+        } else {
+            // both: plot left and right as two functions; intersection corresponds to equality
+            graphEquations = [
+                { equation: `y = ${leftExpr}`, domain: { min: options.xMin, max: options.xMax }, color: 'blue', strokeWidth: 2 },
+                { equation: `y = ${rightExpr}`, domain: { min: options.xMin, max: options.xMax }, color: 'red', strokeWidth: 2 }
+            ];
+        }
+
+        return {
+            omdType: "coordinatePlane",
+            xMin: options.xMin,
+            xMax: options.xMax,
+            yMin: options.yMin,
+            yMax: options.yMax,
+            // Allow caller to override visual settings via options
+            xLabel: (options.xLabel !== undefined) ? options.xLabel : "x",
+            yLabel: (options.yLabel !== undefined) ? options.yLabel : "y",
+            size: (options.size !== undefined) ? options.size : "medium",
+            tickInterval: (options.tickInterval !== undefined) ? options.tickInterval : 1,
+            forceAllTickLabels: (options.forceAllTickLabels !== undefined) ? options.forceAllTickLabels : true,
+            showTickLabels: (options.showTickLabels !== undefined) ? options.showTickLabels : true,
+            graphEquations,
+            lineSegments: [],
+            dotValues: [],
+            shapeSet: []
+        };
+    }
+
+    /**
+     * Generates JSON configuration for table visualization
+     * @param {Object} options - Configuration options
+     * @returns {Object} JSON configuration for omdTable
+     * @private
+     */
+    _renderToTable(options) {
+        // Single side: let omdTable generate rows from equation
+        if (options.side === 'left') {
+            const expr = this._normalizeExpressionString(this.getLeft().toString());
+            return {
+                omdType: "table",
+                title: `Function Table: y = ${expr}`,
+                headers: ["x", "y"],
+                equation: `y = ${expr}`,
+                xMin: options.xMin,
+                xMax: options.xMax,
+                stepSize: options.stepSize
+            };
+        } else if (options.side === 'right') {
+            const expr = this._normalizeExpressionString(this.getRight().toString());
+            return {
+                omdType: "table",
+                title: `Function Table: y = ${expr}`,
+                headers: ["x", "y"],
+                equation: `y = ${expr}`,
+                xMin: options.xMin,
+                xMax: options.xMax,
+                stepSize: options.stepSize
+            };
+        }
+
+        // Both sides: compute data for x, left(x), right(x)
+        const leftSide = this.getLeft();
+        const rightSide = this.getRight();
+        const leftLabel = leftSide.toString();
+        const rightLabel = rightSide.toString();
+
+        const headers = ["x", leftLabel, rightLabel];
+        const data = [];
+        const start = options.xMin;
+        const end = options.xMax;
+        const step = options.stepSize || 1;
+        for (let x = start; x <= end; x += step) {
+            try {
+                const l = leftSide.evaluate({ x });
+                const r = rightSide.evaluate({ x });
+                if (isFinite(l) && isFinite(r)) {
+                    data.push([x, Number(l), Number(r)]);
+                }
+            } catch (_) {
+                // Skip points that fail to evaluate
+            }
+        }
+
+        return {
+            omdType: "table",
+            title: `Equation Table: ${this.toString()}`,
+            headers,
+            data
+        };
+    }
+
+    /**
+     * Generates table for a single side of the equation
+     * @param {omdNode} side - The side to render
+     * @param {string} title - Title for the table
+     * @returns {Object} JSON configuration for omdTable
+     * @private
+     */
+    _renderSingleSideTable(side, title, options = {}) {
+        const expression = this._normalizeExpressionString(side.toString());
+        return {
+            omdType: "table",
+            title: `${title}: ${expression}`,
+            headers: ["x", "y"],
+            equation: `y = ${expression}`,
+            xMin: options.xMin ?? -5,
+            xMax: options.xMax ?? 5,
+            stepSize: options.stepSize ?? 1
+        };
+    }
+
+    /**
+     * Generates JSON configuration for balance hanger visualization
+     * @returns {Object} JSON configuration for omdBalanceHanger
+     * @private
+     */
+    _renderToHanger() {
+        // Convert equation sides to hanger representation
+        const leftValues = this._convertToHangerValues(this.getLeft());
+        const rightValues = this._convertToHangerValues(this.getRight());
+        
+        return {
+            omdType: "balanceHanger",
+            leftValues: leftValues,
+            rightValues: rightValues,
+            tilt: "none" // Equations should be balanced by definition
+        };
+    }
+
+    /**
+     * Normalizes an expression string for evaluation/graphing
+     * - Inserts '*' between number-variable and variable-number
+     * @param {string} expr
+     * @returns {string}
+     * @private
+     */
+    _normalizeExpressionString(expr) {
+        if (!expr || typeof expr !== 'string') return String(expr || '');
+        return expr
+            .replace(/(\d)([a-zA-Z])/g, '$1*$2')
+            .replace(/([a-zA-Z])(\d)/g, '$1*$2');
+    }
+
+    /**
+     * Converts an equation side to balance hanger values (simple array of values)
+     * @param {omdNode} node - The node to convert
+     * @returns {Array} Array of simple values for the hanger
+     * @private
+     */
+    _convertToHangerValues(node) {
+        const values = [];
+        
+        // Handle different node types
+        if (node.type === 'omdConstantNode') {
+            // Add the constant value
+            const value = node.getValue();
+            if (value !== 0) {
+                values.push(value);
+            }
+        } else if (node.type === 'omdVariableNode') {
+            // Add variable name
+            values.push(node.name || "x");
+        } else if (node.type === 'omdBinaryExpressionNode') {
+            // Handle binary expressions by recursively processing operands
+            const leftValues = this._convertToHangerValues(node.left);
+            const rightValues = this._convertToHangerValues(node.right);
+            
+            // For addition, combine values
+            if (node.operation === 'add' || node.operation === 'plus') {
+                values.push(...leftValues, ...rightValues);
+            } 
+            // For multiplication, handle special cases
+            else if (node.operation === 'multiply') {
+                // Check if one operand is a constant (coefficient)
+                if (node.left.type === 'omdConstantNode' && node.right.type === 'omdVariableNode') {
+                    const coefficient = Math.abs(node.left.getValue());
+                    const varName = node.right.name || "x";
+                    // Add multiple instances of the variable
+                    for (let i = 0; i < coefficient; i++) {
+                        values.push(varName);
+                    }
+                } else if (node.right.type === 'omdConstantNode' && node.left.type === 'omdVariableNode') {
+                    const coefficient = Math.abs(node.right.getValue());
+                    const varName = node.left.name || "x";
+                    // Add multiple instances of the variable
+                    for (let i = 0; i < coefficient; i++) {
+                        values.push(varName);
+                    }
+                } else {
+                    // For other multiplications, treat as a single expression
+                    values.push(node.toString());
+                }
+            } else {
+                // For other operations, treat as a single expression
+                values.push(node.toString());
+            }
+        } else {
+            // For any other node types, treat as expression string
+            values.push(node.toString());
+        }
+        
+        return values;
+    }   
+}