# OMD Documentation

# omdVariableNode

Represents a variable (like `x`, `y`, `a`, `b`) in mathematical expressions. This node handles the visual representation of variables, their evaluation, and conversion to math.js AST.

## Class Definition

    export class omdVariableNode extends omdLeafNode

## Constructor

### `new omdVariableNode(nodeData)`

Creates a new `omdVariableNode` instance.

- `nodeData` (`object` | `string`): The AST node data (from math.js, typically a `SymbolNode` with a `name` property) or the variable name as a string (e.g., `"x"`). The constructor extracts the variable `name` and creates the `textElement` for display.

## Static Methods

### `fromName(name)`

Creates a variable node directly from a given name string. This is a convenience method for creating simple variable nodes without needing to construct a full AST object.

- `name` (`string`): The variable name (e.g., `"x"`, `"theta"`).
- Returns: `omdVariableNode` - A new instance of `omdVariableNode`.

## Public Properties

- `name` (`string`): The name of the variable (e.g., `'x'`, `'y'`, `'theta'`).
- `type` (`string`): Always `"omdVariableNode"`.
- `textElement` (`jsvgTextLine`): The internal `jsvgTextLine` instance that displays the variable name.

## Public Methods

### `computeDimensions()`

Calculates the dimensions of the node based on its text content, adding a small amount of padding around the variable name to improve visual spacing.

- Overrides: `omdLeafNode.computeDimensions()`.

### `updateLayout()`

Updates the layout of the node. This method primarily calls the superclass's `updateLayout`.

- Overrides: `omdLeafNode.updateLayout()`.

### `toMathJSNode()`

Converts the `omdVariableNode` to a math.js-compatible AST format. It creates a `SymbolNode` with the variable's `name`, `id`, and `provenance`.

- Returns: `object` - A math.js-compatible AST node with `type: "SymbolNode"` and `name` set to the variable name. The returned object also includes `id`, `provenance`, and a `clone` method for compatibility.

### `highlight(color)`

Applies a highlight to the node's background and sets the variable's text color to white for better contrast. This method respects the `isExplainHighlighted` lock.

- `color` (`string`): The color of the highlight.

### `clearProvenanceHighlights()`

Clears any provenance-related highlights from the node and resets the variable's text color to its default (black).

### `toString()`

Converts the variable node to its string representation, which is simply its `name`.

- Returns: `string` - The variable name.

### `evaluate(variables)`

Evaluates the variable by looking up its value in the provided `variables` map. If the variable is not defined in the map, it throws an error.

- `variables` (`object`): A map of variable names to their numeric values.
- Returns: `number` - The value of the variable.
- Throws: `Error` if the variable is not defined in the map.

## Internal Methods

- `parseName(nodeData)`: Extracts the variable name from the constructor's `nodeData`. It handles both string input and AST objects with a `name` property.
- `parseType()`: Sets the node's type. Always returns `"variable"`.

## Examples

#### Creating Variables

    import { omdVariableNode } from '@teachinglab/omd';
    import * as math from 'mathjs';

    // From a name string
    const nodeX = omdVariableNode.fromName('x');
    const nodeTheta = omdVariableNode.fromName('θ');

    // From AST data (e.g., from math.js parse result)
    const astNode = math.parse('y');
    const nodeY = new omdVariableNode(astNode);

    // Direct string name (less common, but supported)
    const nodeZ = new omdVariableNode('z');

#### Rendering Variables

    import { omdVariableNode } from '@teachinglab/omd';
    // import { jsvgContainer } from '@teachinglab/jsvg'; // if rendering directly

    const node = omdVariableNode.fromName('x');
    node.setFontSize(24);
    node.initialize(); // Computes dimensions and layout

    // To render, typically add to a parent node or an omdDisplay
    // const svgContainer = new jsvgContainer();
    // svgContainer.addChild(node);
    // document.body.appendChild(svgContainer.svgObject);

## See Also

- `omdLeafNode` - Parent class.
- `omdNode` - Base class.
- `omdConstantNode` - For numeric values.

↑ Top