Expression Nodes

Expression Nodes

Expression nodes are the building blocks of mathematical expressions and equations in OMD. They form a tree structure that represents the mathematical content.

Overview

OMD uses a node-based system where every mathematical element is represented as a node in an expression tree. This allows for powerful manipulation, simplification, and visualization of mathematical expressions.

Core Node Classes

omdNode

The abstract base class for all nodes in the expression tree.

See: omdNode API Documentation

omdEquationNode

Represents a complete mathematical equation with left side, right side, and equals sign.

Class: omdEquationNode extends omdNode

Static Methods

fromString(equationString)

Creates an equation node from a string representation.

import { omdEquationNode } from '@teachinglab/omd';

const equation = omdEquationNode.fromString('2x + 3 = 11');
  • Parameters:
    • equationString (string): The equation string (e.g., "2x + 4 = 10")
  • Returns: omdEquationNode
  • Throws: Error if string is not a valid equation

Properties

  • left (omdNode): The left side of the equation
  • right (omdNode): The right side of the equation
  • equalsSign (omdOperatorNode): The equals sign operator

Manipulation Methods

addToBothSides(value)

Returns a new equation with a value added to both sides.

const newEq = equation.addToBothSides(5);
  • Parameters:
    • value (number | object): Value to add
  • Returns: omdEquationNode

subtractFromBothSides(value)

Returns a new equation with a value subtracted from both sides.

const newEq = equation.subtractFromBothSides(3);
  • Parameters:
    • value (number | object): Value to subtract
  • Returns: omdEquationNode

multiplyBothSides(value)

Returns a new equation with both sides multiplied by a value.

const newEq = equation.multiplyBothSides(2);
  • Parameters:
    • value (number | object): Value to multiply by
  • Returns: omdEquationNode

divideBothSides(value)

Returns a new equation with both sides divided by a value.

const newEq = equation.divideBothSides(2);
  • Parameters:
    • value (number | object): Value to divide by
  • Returns: omdEquationNode

applyFunction(functionName)

Applies a function (e.g., sqrt, log) to both sides.

const newEq = equation.applyFunction('sqrt');
  • Parameters:
    • functionName (string): Name of function to apply
  • Returns: omdEquationNode

applyOperation(value, operation, side = 'both')

Applies an arithmetic operation to one or both sides.

const newEq = equation.applyOperation(5, 'add', 'left');
  • Parameters:
    • value (number | omdNode): Value to apply
    • operation (string): Operation type: 'add', 'subtract', 'multiply', or 'divide'
    • side (string): Side to apply to: 'left', 'right', or 'both' (default: 'both')
  • Returns: omdEquationNode

swapSides()

Swaps the left and right sides of the equation.

const swapped = equation.swapSides();
  • Returns: omdEquationNode

simplify()

Simplifies both sides using the simplification engine.

const result = equation.simplify();
// Returns: { success: boolean, newRoot: omdEquationNode, message: string }
  • Returns: Object with success, newRoot, and message properties

Utility Methods

clone()

Creates a deep clone of the equation node.

const copy = equation.clone();
  • Returns: omdEquationNode

toString()

Converts the equation to its string representation.

const str = equation.toString();
// Returns: "2x + 3 = 11"
  • Returns: string

evaluate(variables)

Evaluates both sides with given variable values.

const result = equation.evaluate({ x: 4 });
// Returns: { left: 11, right: 11 }
  • Parameters:
    • variables (object): Map of variable names to values
  • Returns: Object with left and right evaluated values

getLeft()

Returns the node representing the left side.

const leftSide = equation.getLeft();
  • Returns: omdNode

getRight()

Returns the node representing the right side.

const rightSide = equation.getRight();
  • Returns: omdNode

Styling Methods

setBackgroundStyle(style)

Configures background styling for the equation node.

equation.setBackgroundStyle({
    backgroundColor: '#E3F2FD',
    cornerRadius: 8,
    pill: true
});
  • Parameters:
    • style (object): Style properties (backgroundColor, cornerRadius, pill)

getEqualsAnchorX()

Returns the X-coordinate of the equals sign center (for alignment).

const anchorX = equation.getEqualsAnchorX();
  • Returns: number

getBackgroundPaddingX()

Returns the horizontal padding applied by background style.

const padding = equation.getBackgroundPaddingX();
  • Returns: number

Visualization Methods

renderTo(visualizationType, options)

Renders the equation to different visualization formats.

// Render to coordinate plane
const graphJSON = equation.renderTo('graph', {
    xMin: -10,
    xMax: 10,
    yMin: -10,
    yMax: 10
});

// Render to table
const tableJSON = equation.renderTo('table', {
    xMin: -5,
    xMax: 5,
    stepSize: 1
});

// Render to balance hanger
const hangerJSON = equation.renderTo('hanger');

// Render to tile equation
const tileJSON = equation.renderTo('tileequation');
  • Parameters:
    • visualizationType (string): Type of visualization: 'graph', 'table', 'hanger', or 'tileequation'
    • options (object): Configuration options specific to visualization type
  • Returns: JSON object for the visualization

See: omdEquationNode Full API Documentation

Expression Component Nodes

omdConstantNode

Represents numeric constants.

import { omdConstantNode } from '@teachinglab/omd';

const constant = new omdConstantNode(ast);

See: omdConstantNode API Documentation

omdVariableNode

Represents algebraic variables.

import { omdVariableNode } from '@teachinglab/omd';

const variable = new omdVariableNode(ast);

See: omdVariableNode API Documentation

omdOperatorNode

Represents mathematical operators (+, -, ×, ÷, =).

import { omdOperatorNode } from '@teachinglab/omd';

const operator = new omdOperatorNode(ast);

See: omdOperatorNode API Documentation

omdBinaryExpressionNode

Represents binary operations (addition, subtraction, multiplication, division).

import { omdBinaryExpressionNode } from '@teachinglab/omd';

const binaryExpr = new omdBinaryExpressionNode(ast);

See: omdBinaryExpressionNode API Documentation

omdUnaryExpressionNode

Represents unary operations (negation).

import { omdUnaryExpressionNode } from '@teachinglab/omd';

const unaryExpr = new omdUnaryExpressionNode(ast);

See: omdUnaryExpressionNode API Documentation

omdPowerNode

Represents exponentiation (x²).

import { omdPowerNode } from '@teachinglab/omd';

const power = new omdPowerNode(ast);

See: omdPowerNode API Documentation

omdRationalNode

Represents fractions and rational numbers.

import { omdRationalNode } from '@teachinglab/omd';

const rational = new omdRationalNode(ast);

See: omdRationalNode API Documentation

omdSqrtNode

Represents square root expressions.

import { omdSqrtNode } from '@teachinglab/omd';

const sqrt = new omdSqrtNode(ast);

See: omdSqrtNode API Documentation

omdFunctionNode

Represents mathematical functions (sin, cos, log, etc.).

import { omdFunctionNode } from '@teachinglab/omd';

const func = new omdFunctionNode(ast);

See: omdFunctionNode API Documentation

omdParenthesisNode

Represents expressions enclosed in parentheses.

import { omdParenthesisNode } from '@teachinglab/omd';

const paren = new omdParenthesisNode(ast);

See: omdParenthesisNode API Documentation

Container Nodes

omdGroupNode

A container for grouping related nodes.

import { omdGroupNode } from '@teachinglab/omd';

const group = new omdGroupNode(ast);

See: omdGroupNode API Documentation

omdEquationSequenceNode

A container for displaying step-by-step equation solutions.

import { omdEquationSequenceNode } from '@teachinglab/omd';

const sequence = new omdEquationSequenceNode();
sequence.addChild(equation1);
sequence.addChild(equation2);

See: omdEquationSequenceNode API Documentation

Node Tree Structure

Nodes are organized in a tree structure:

omdEquationNode
├── left (omdNode)
│   └── omdBinaryExpressionNode
│       ├── left (omdConstantNode: 2)
│       ├── operator (omdOperatorNode: +)
│       └── right (omdConstantNode: 3)
├── equalsSign (omdOperatorNode: =)
└── right (omdNode)
    └── omdConstantNode: 11

Working with Expression Trees

Creating Nodes from Strings

The simplest way to create nodes is from strings:

import { omdEquationNode } from '@teachinglab/omd';

const equation = omdEquationNode.fromString('2x + 3 = 11');

Manipulating Nodes

Nodes can be manipulated to perform mathematical operations:

// Start with: 2x + 3 = 11
const step1 = equation.subtractFromBothSides(3);
// Result: 2x = 8

const step2 = step1.divideBothSides(2);
// Result: x = 4

Traversing the Tree

Nodes can be traversed to analyze structure:

const leftSide = equation.getLeft();
const rightSide = equation.getRight();

console.log(equation.toString()); // "2x + 3 = 11"

Evaluating Expressions

Nodes can be evaluated with variable values:

const result = equation.evaluate({ x: 4 });
console.log(result); // { left: 11, right: 11 }

Common Patterns

Creating a Step-by-Step Solution

import { omdEquationNode, omdEquationStack } from '@teachinglab/omd';

const original = omdEquationNode.fromString('2x + 3 = 11');
const step1 = original.subtractFromBothSides(3);
const step2 = step1.divideBothSides(2);

const steps = [original, step1, step2];
const stack = new omdEquationStack(steps);

Simplifying Expressions

const equation = omdEquationNode.fromString('2x + 3x = 10');
const result = equation.simplify();

if (result.success) {
    console.log(result.newRoot.toString()); // "5x = 10"
}

Rendering to Visualizations

const equation = omdEquationNode.fromString('y = x^2 - 4');

// Render to graph
const graphData = equation.renderTo('graph', {
    xMin: -10,
    xMax: 10,
    yMin: -10,
    yMax: 10
});

// Render to table
const tableData = equation.renderTo('table', {
    xMin: -5,
    xMax: 5,
    stepSize: 1
});

See Also