# OMD Documentation

# omdEquationStack

A renderable component that bundles a sequence of mathematical equations with optional UI controls (toolbar). It extends `jsvgGroup` and acts as a node that can be rendered by an `omdDisplay`.

## Class Definition

    import { omdEquationStack } from './omd/core/omdEquationStack.js';

## Constructor

### `new omdEquationStack(steps, options)`

Creates a new `omdEquationStack` instance.

- `steps` (`Array<omdNode>`, optional): An initial array of equation steps. Default: empty array.
- `options` (`object`, optional): Configuration options:
  - `toolbar` (`boolean` | `object`): If `true`, creates a toolbar for equation operations. Can also be an object for more granular control:
    - `enabled` (`boolean`): Whether the toolbar is enabled. Default: `false`.
    - `position` (`string`): Where the toolbar should be positioned (`'bottom'`, `'overlay-bottom'`). Default: `'bottom'`.
    - `showUndoButton` (`boolean`): Whether to show an undo button. Default: `false`.
    - `onUndo` (`function`): Custom undo handler. If not provided, it attempts to call `window.onOMDToolbarUndo`.
    - `overlayPadding` (`number`): Padding from the bottom edge when `position` is `'overlay-bottom'`. Default: `34`.
  - `stepVisualizer` (`boolean`): If `true`, the underlying sequence will be an `omdStepVisualizer` instead of a plain `omdEquationSequenceNode`. Default: `false`.
  - `styling` (`object`): Styling options for the equation stack:
    - `equationBackground` (`object`): Default background style for equation steps (e.g., `{ backgroundColor: '#f0f0f0', cornerRadius: 8, pill: true }`).

## Public Properties

- `sequence` (`omdEquationSequenceNode` | `omdStepVisualizer`): The underlying sequence component that manages the equation steps.
- `toolbar` (`omdToolbar` | `undefined`): The toolbar component instance, if enabled.
- `layoutGroup` (`jsvgLayoutGroup`): The internal layout container that arranges the sequence and toolbar vertically.
- `options` (`object`): The merged configuration options passed to the constructor.
- `overlayPadding` (`number`): The calculated padding for the toolbar when it's in an overlay position.

## Public Methods

### `updateLayout()`

Updates the layout and positioning of internal components. This method ensures the sequence and toolbar are correctly arranged and that the toolbar is horizontally centered if it's in-flow.

### `getSequence()`

Returns the underlying sequence instance (either `omdEquationSequenceNode` or `omdStepVisualizer`).

- Returns: `omdEquationSequenceNode` | `omdStepVisualizer`.

### `getToolbar()`

Returns the toolbar instance, if one was created during construction.

- Returns: `omdToolbar` | `undefined`.

### `getOverlayPadding()`

Returns the padding value used for positioning the toolbar when it's in an overlay mode.

- Returns: `number`.

### `getToolbarVisualHeight()`

Returns the unscaled visual height of the toolbar's background element, if the toolbar is present.

- Returns: `number`.

### `isToolbarOverlay()`

Checks if the toolbar is configured to be overlaid at the bottom of the container.

- Returns: `boolean`.

### `positionToolbarOverlay(containerWidth, containerHeight, padding)`

Positions the toolbar overlay at the bottom center of the container. This method is typically called by the `omdDisplay` to ensure the toolbar remains visible and correctly placed even when the main content scales.

- `containerWidth` (`number`): The width of the parent container.
- `containerHeight` (`number`): The height of the parent container.
- `padding` (`number`, optional): Padding from the bottom edge. Default: `16`.

### `undoLastOperation()`

Removes the last equation step and any preceding operation display node from the sequence. This method also triggers a re-layout and updates any associated step visualizer.

- Returns: `boolean` - `true` if an operation was successfully undone, `false` otherwise.

## Usage

The `omdEquationStack` component is a complete equation solving interface that combines an equation sequence with an optional toolbar. It automatically handles layout and positioning.

    import { omdDisplay } from 'omd';
    import { omdEquationStack } from 'omd';
    import { omdEquationNode } from 'omd';

    // Create display
    const container = document.getElementById('math-display');
    const display = new omdDisplay(container);

    // Create equation steps
    const steps = [
        omdEquationNode.fromString('2x + 3 = 11'),
        omdEquationNode.fromString('2x = 8'),
        omdEquationNode.fromString('x = 4')
    ];

    // Basic equation stack with toolbar
    const stack = new omdEquationStack(steps, {
        toolbar: true
    });

    // Render the stack
    display.render(stack);

    // Alternative: Create with step visualizer and custom toolbar options
    const stackWithVisualizer = new omdEquationStack(steps, {
        toolbar: {
            enabled: true,
            showUndoButton: true,
            position: 'overlay-bottom'
        },
        stepVisualizer: true,
        styling: {
            equationBackground: {
                backgroundColor: '#e0f7fa',
                cornerRadius: 10,
                pill: true
            }
        }
    });

    display.render(stackWithVisualizer);

## Integration

The equation stack integrates seamlessly with the step visualizer:

    import { omdEquationStack } from 'omd';
    import { omdEquationNode } from 'omd';
    import { omdDisplay } from 'omd';

    // Create steps for a more complex equation
    const steps = [
        omdEquationNode.fromString('x/2 + 3 = 7'),
        omdEquationNode.fromString('x/2 = 4'),
        omdEquationNode.fromString('x = 8')
    ];

    // Enable step visualizer with highlighting
    const stack = new omdEquationStack(steps, {
        toolbar: true,
        stepVisualizer: true
    });

    // Render in display
    const container = document.getElementById('equation-display');
    const display = new omdDisplay(container);
    display.render(stack);

    // Access the visualizer for programmatic control
    const visualizer = stack.getSequence();
    // visualizer.nextStep(); // Progress through solution steps if interactive

## Layout Behavior

The equation stack automatically manages its internal layout:

- The sequence is positioned at the top
- The toolbar (if present) is centered below the sequence
- Layout updates automatically when content changes

    // Create a stack and let it handle layout automatically
    const stack = new omdEquationStack(steps, { toolbar: true });

    // Manual layout update (rarely needed)
    stack.updateLayout();

    // Access components
    const sequence = stack.getSequence();
    const toolbar = stack.getToolbar();

### See Also

- `omdEquationSequenceNode`
- `omdStepVisualizer`
- `omdToolbar`
- `jsvgGroup`

↑ Top