# OMD Documentation

# Equation & Expression Display Components

These four components render mathematical notation as SVG. Each is instantiated with `new <ClassName>()` and populated via `loadFromJSON(...)`.

    import { omdEquation, omdExpression, omdEquationStack, omdEquationWork } from '@teachinglab/omd';

## Table of Contents

- omdExpression
- omdEquation
- omdEquationStack
- omdEquationWork
- Shared Background Methods

## omdExpression

Renders a single math expression (no equals sign).

### loadFromJSON

Accepts a plain string or a JSON object.

String shorthand:

    const expr = new omdExpression();
    expr.loadFromJSON('3*x + 2');

Object form:

    expr.loadFromJSON({
      expression: '3*x + 2',
      fontSize: 24,
      backgroundColor: '#FFFFFF'
    });

### Fields (object form)

Name | Type | Required | Default | Description
--- | --- | --- | --- | ---
`expression` | `string` | Yes | — | The math expression to render.
`fontSize` | `number` | No | `20` | Font size in pixels.
`backgroundColor` | `string` | No | `#EEEEEE` | Background card color (hex or CSS color).

## omdEquation

Renders a complete equation that includes an equals sign.

### loadFromJSON

Accepts a plain string or a JSON object.

String shorthand:

    const eq = new omdEquation();
    eq.loadFromJSON('2*x + 3 = 7');

Object form:

    eq.loadFromJSON({
      equation: '2*x + 3 = 7',
      fontSize: 24,
      backgroundColor: '#FFFFFF'
    });

### Fields (object form)

Name | Type | Required | Default | Description
--- | --- | --- | --- | ---
`equation` | `string` | Yes | — | The full equation string, must contain `=`.
`fontSize` | `number` | No | `20` | Font size in pixels.
`backgroundColor` | `string` | No | `#EEEEEE` | Background card color (hex or CSS color).

## omdEquationStack

Stacks multiple equations vertically, aligned on the equals sign. Takes an array of `omdEquationNode` instances in the constructor — there is no `loadFromJSON`.

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

    const stack = new omdEquationStack([
        omdEquationNode.fromString('2*x + 3 = 11'),
        omdEquationNode.fromString('2*x = 8'),
        omdEquationNode.fromString('x = 4'),
    ]);

### Constructor

    new omdEquationStack(steps, options)

Parameter | Type | Description
--- | --- | ---
`steps` | `omdEquationNode[]` | Ordered equation nodes to display. Use `omdEquationNode.fromString('...')` to create each one.
`options.styling.equationBackground` | `string` | Optional background color applied to each equation.

## omdEquationWork

Displays step-by-step equation solving work. Rows are rendered in order and can include equations, operation annotations, plain expressions, text labels, and divider lines.

### loadFromJSON

    const work = new omdEquationWork();
    work.loadFromJSON({
      rows: [
        { kind: 'equation', left: '2*x + 3', right: '7' },
        { kind: 'operation', left: '+(-3)', right: '+(-3)' },
        { kind: 'line' },
        { kind: 'equation', left: '2*x', right: '4' },
        { kind: 'equation', left: 'x', right: '2' }
      ],
      fontSize: 20,
      rowGap: 8,
      equationColor: '#222222'
    });

### Row Types

Each row object requires a `kind` field.

#### `equation`

Renders a full equation split into left, optional center, and right columns.

Field | Type | Required | Default | Description
--- | --- | --- | --- | ---
`kind` | `'equation'` | Yes | — | Row type identifier.
`left` | `string` | No | — | Expression left of the equals sign.
`right` | `string` | No | — | Expression right of the equals sign.
`center` | `string` | No | — | Center column content (e.g., the `=` or a connector).
`color` | `string` | No | — | Color applied to the entire row.
`leftColor` | `string` | No | — | Color applied to the left expression only.
`rightColor` | `string` | No | — | Color applied to the right expression only.
`drawLineBefore` | `boolean` | No | `false` | Draw a horizontal divider above this row.
`drawLineAfter` | `boolean` | No | `false` | Draw a horizontal divider below this row.

#### `operation`

Renders an annotation row describing the operation applied to both sides (e.g., "+3 on both sides").

Field | Type | Required | Default | Description
--- | --- | --- | --- | ---
`kind` | `'operation'` | Yes | — | Row type identifier.
`left` | `string` | No | — | Annotation for the left side.
`right` | `string` | No | — | Annotation for the right side.
`center` | `string` | No | — | Center column annotation.

#### `expression`

Renders a standalone expression spanning all columns.

Field | Type | Required | Default | Description
--- | --- | --- | --- | ---
`kind` | `'expression'` | Yes | — | Row type identifier.
`text` | `string` | Yes | — | The expression string to render.

#### `text`

Renders a plain text label spanning all columns.

Field | Type | Required | Default | Description
--- | --- | --- | --- | ---
`kind` | `'text'` | Yes | — | Row type identifier.
`text` | `string` | Yes | — | The text to display.

#### `line`

Renders a horizontal divider line.

Field | Type | Required | Default | Description
--- | --- | --- | --- | ---
`kind` | `'line'` | Yes | — | Row type identifier. No other fields.

### Style Options

These top-level fields in the `loadFromJSON` object control the overall layout and appearance.

Name | Type | Required | Default | Description
--- | --- | --- | --- | ---
`fontSize` | `number` | No | `20` | Font size in pixels for all rows.
`fontFamily` | `string` | No | — | CSS font family string.
`fontWeight` | `string | number` | No | — | CSS font weight.
`rowGap` | `number` | No | — | Vertical spacing between rows in pixels.
`columnGap` | `number` | No | — | Horizontal spacing between columns in pixels.
`paddingX` | `number` | No | — | Horizontal padding around the component.
`paddingY` | `number` | No | — | Vertical padding around the component.
`rowHeightMultiplier` | `number` | No | — | Scales row height relative to font size.
`lineColor` | `string` | No | — | Color of divider lines.
`lineStrokeWidth` | `number` | No | — | Stroke width of divider lines.
`equationColor` | `string` | No | — | Default color for `equation` rows.
`operationColor` | `string` | No | — | Default color for `operation` rows.
`textColor` | `string` | No | — | Default color for `text` rows.
`drawLineBeforeRows` | `number[]` | No | — | Array of row indexes that should have a divider drawn above them.
`drawLineAfterRows` | `number[]` | No | — | Array of row indexes that should have a divider drawn below them.

## Shared Background Methods

All four components expose the same three background helper methods.

### `setBackgroundColor(color)`

Sets the background card color.

    eq.setBackgroundColor('#FFFFFF');

Parameter | Type | Description
--- | --- | ---
`color` | `string` | Any valid CSS color or hex string. Default is `#EEEEEE`.

### `hideBackgroundByDefault()`

Makes the background transparent so the component renders without a card.

    eq.hideBackgroundByDefault();

### `hideChildBackgrounds()`

Hides the individual term-level backgrounds so all terms share one unified card. This is called automatically on load and does not normally need to be called manually.

    eq.hideChildBackgrounds();

↑ Top