# OMD Documentation

# omdDisplay

A high-level component for displaying mathematical expressions or a series of equation steps. It handles rendering, automatic centering, scaling, and layout management within a given HTML container.

## Class Definition

    export class omdDisplay

## Constructor

### `new omdDisplay(container, [options])`

Creates a new `omdDisplay` instance.

- `container` (`HTMLElement`): The DOM element where the expression will be rendered.
- `options` (`object`, optional): Configuration options:
  - `fontSize` (`number`): Optional base font size in pixels. If omitted, the rendered node keeps its own font sizing. Parsed equation nodes default to their normal node font size.
  - `centerContent` (`boolean`): If `true`, the content is automatically centered within the container. Default: `true`.
  - `topMargin` (`number`): The top margin in pixels, used when centering content. Default: `40`.
  - `bottomMargin` (`number`): The bottom margin in pixels. Default: `16`.
  - `fitToContent` (`boolean`): If `true`, the SVG container will resize to tightly fit the content. Default: `false`.
  - `autoScale` (`boolean`): If `true`, content will automatically scale down to fit the container. Default: `true`.
  - `maxScale` (`number`): Maximum scale factor for `autoScale`. Default: `1` (no upscaling).
  - `edgePadding` (`number`): Horizontal padding for preserved equation-style panes. Default: `16`.
  - `contentPadding` (`number` | `object`): Explicit padding for compact visual output. Supports `{ top, right, bottom, left }`, `{ x, y }`, or a single number.
  - `fitPadding` (`number` | `object`): Backward-compatible alias for `contentPadding`.
  - `compactBleed` (`number` | `object`): Small default safety padding for compact visual output, preventing strokes, rounded clips, and antialiasing from being shaved off. Default: `2`.
  - `preserveContainerSize` (`boolean` | `'auto'` | `'width'` | `'height'` | `object`): If `true`, the SVG keeps at least the host container width and height. If `false`, the SVG shrinks to content. `'width'` fills the parent width while keeping natural content height, which is the default for responsive previews. `'auto'` preserves both axes for equation/stack layouts and compacts standalone visuals. Default: `'width'`.

## Public Methods

### `render(expression)`

Renders a mathematical expression or equation within the display. It intelligently handles different input types:

- If `expression` is a string containing semicolons (`;`), it's treated as a sequence of equations and rendered as an `omdStepVisualizer`.

- If `expression` is a string containing an equals sign (`=`), it's treated as an equation step.

- Otherwise, if `expression` is a string, it's parsed as a single mathematical expression.

- If `expression` is already an `omdNode` instance, it's rendered directly.

- `expression` (`string` | `omdNode` | `Array`): The mathematical expression string, a pre-existing node, or an array of string/node steps.

- Returns: `omdNode` - The root node of the rendered content.

### `update(newNode)`

Replaces the currently displayed node with a new one, applying the current font size and centering if enabled. The new node is initialized before being added to the display.

- `newNode` (`omdNode`): The new node to display.

### `getCurrentNode()`

Returns the node currently being displayed.

- Returns: `omdNode` | `null` - The current root node, or `null` if nothing is displayed.

### `centerNode()`

Manually triggers the centering and scaling logic for the current node. This is particularly useful for `omdEquationSequenceNode` instances to align them by their equals signs, and for ensuring content fits within the container based on `autoScale` and `maxScale` options.

### `fitToContent()`

Adjusts the SVG container's dimensions to tightly fit the rendered content. Use `contentPadding` when exported SVGs need extra breathing room.

### `setFontSize(size)`

Updates the base font size for the currently displayed node and for any future content rendered. This will trigger a re-layout and re-centering.

- `size` (`number`): The new font size in pixels.

### `setFont(fontFamily, fontWeight)`

Applies a specific font family and weight to all text elements within the rendered SVG. This setting is also stored for future content.

- `fontFamily` (`string`): CSS `font-family` string (e.g., `'"Shantell Sans", cursive'`).
- `fontWeight` (`string`, optional): CSS `font-weight` (e.g., `'400'`, `'bold'`). Default: `'400'`.

### `clear()`

Removes the current expression from the display.

### `destroy()`

Cleans up the component, removing all DOM elements and detaching the resize observer.

## Internal Methods

- `_setupSVG()`: Initializes the main SVG element, sets its viewBox, and attaches a `ResizeObserver` to the container.
- `_handleResize()`: Callback for the `ResizeObserver` that updates the SVG viewBox and re-centers the content on container resize.
- `_repositionOverlayToolbar()`: Positions any overlay toolbars associated with the current node (e.g., for interactive step visualizers).

↑ Top