# Interfaces B–R

Import these from `@grafloria/engine`.

## Interfaces

### `BoundingBox`

```ts
interface BoundingBox
```

**Properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `left` | `number` |  |  |
| `top` | `number` |  |  |
| `right` | `number` |  |  |
| `bottom` | `number` |  |  |
| `width` | `number` |  |  |
| `height` | `number` |  |  |

### `ClipboardEvent`

```ts
interface ClipboardEvent
```

**Properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `nodeCount` | `number` |  |  |
| `linkCount` | `number` |  |  |
| `groupCount` | `number` |  |  |
| `operation` | `'copy' \| 'paste' \| 'duplicate'` |  |  |

### `CommandEvent`

```ts
interface CommandEvent
```

**Properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `commandName` | `string` |  |  |
| `commandId` | `string` |  |  |
| `success?` | `boolean` |  |  |
| `error?` | `string` |  |  |

### `DiagramEvent`

```ts
interface DiagramEvent<T = any>
```

**Properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `type` | `string` |  |  |
| `timestamp` | `number` |  |  |
| `data` | `T` |  |  |
| `source?` | `string` |  |  |
| `preventDefault?` | `() => void` |  |  |
| `stopPropagation?` | `() => void` |  |  |

### `EntityWithLOD`

Entity with Level of Detail information

```ts
interface EntityWithLOD<T>
```

**Properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `entity` | `T` |  |  |
| `lod` | `LODLevel` |  |  |

### `EventSubscription`

```ts
interface EventSubscription
```

**Properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `unsubscribe` | `() => void` |  |  |

### `FlexboxLayoutConfig`

Flexbox container configuration
Maps directly to CSS Flexbox properties

```ts
interface FlexboxLayoutConfig
```

**Properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `direction` | `'row' \| 'column' \| 'row-reverse' \| 'column-reverse'` |  | Main axis direction |
| `wrap` | `'nowrap' \| 'wrap' \| 'wrap-reverse'` |  | Whether items wrap to multiple lines |
| `justifyContent` | `'start' \| 'center' \| 'end' \| 'space-between' \| 'space-around' \| 'space-evenly'` |  | Main axis alignment |
| `alignItems` | `'start' \| 'center' \| 'end' \| 'stretch' \| 'baseline'` |  | Cross axis alignment |
| `alignContent` | `'start' \| 'center' \| 'end' \| 'space-between' \| 'space-around' \| 'stretch'` |  | Multi-line cross axis alignment |
| `gap` | `number \| { row: number; column: number }` |  | Gap between items (px) |
| `padding?` | `number \| { top: number; right: number; bottom: number; left: number }` |  | Padding inside container (px) |
| `columns?` | `number` |  | Column-based layout (like Bootstrap 12-column grid) |

### `FlexItemConfig`

Flexbox item configuration
Applied to nodes inside a flexbox container

```ts
interface FlexItemConfig
```

**Properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `order?` | `number` |  | Display order (default: 0) |
| `flexGrow?` | `number` |  | Growth factor (default: 0) |
| `flexShrink?` | `number` |  | Shrink factor (default: 1) |
| `flexBasis?` | `number \| 'auto'` |  | Base size before growing/shrinking (default: 'auto') |
| `alignSelf?` | `'auto' \| 'start' \| 'center' \| 'end' \| 'stretch' \| 'baseline'` |  | Override container's align-items for this item |

### `GradientStop`

```ts
interface GradientStop
```

**Properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `offset` | `number` |  |  |
| `color` | `string` |  |  |
| `opacity?` | `number` |  |  |

### `GridItemConfig`

Grid item configuration
Applied to nodes inside a grid container

```ts
interface GridItemConfig
```

**Properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `columnStart?` | `number \| 'auto'` |  | Starting column line (1-based or 'auto') |
| `columnEnd?` | `number \| 'auto'` |  | Ending column line (1-based or 'auto') |
| `rowStart?` | `number \| 'auto'` |  | Starting row line (1-based or 'auto') |
| `rowEnd?` | `number \| 'auto'` |  | Ending row line (1-based or 'auto') |
| `gridArea?` | `string` |  | Named grid area to place item in |
| `justifySelf?` | `'auto' \| 'start' \| 'center' \| 'end' \| 'stretch'` |  | Override container's justify-items for this item |
| `alignSelf?` | `'auto' \| 'start' \| 'center' \| 'end' \| 'stretch'` |  | Override container's align-items for this item |

### `GridLayoutConfig`

Grid container configuration
Maps directly to CSS Grid properties

```ts
interface GridLayoutConfig
```

**Properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `templateColumns` | `string` |  | Column track definitions (e.g., "repeat(3, 1fr)", "100px 200px auto") |
| `templateRows` | `string` |  | Row track definitions |
| `templateAreas?` | `string[]` |  | Named grid areas |
| `columnGap` | `number` |  | Gap between columns (px) |
| `rowGap` | `number` |  | Gap between rows (px) |
| `autoFlow` | `'row' \| 'column' \| 'dense'` |  | Auto-placement algorithm |
| `autoColumns?` | `string` |  | Auto-generated column size |
| `autoRows?` | `string` |  | Auto-generated row size |
| `justifyItems?` | `'start' \| 'center' \| 'end' \| 'stretch'` |  | Horizontal alignment of items within cells |
| `alignItems?` | `'start' \| 'center' \| 'end' \| 'stretch'` |  | Vertical alignment of items within cells |
| `justifyContent?` | `'start' \| 'center' \| 'end' \| 'space-between' \| 'space-around' \| 'space-evenly'` |  | Horizontal alignment of grid within container |
| `alignContent?` | `'start' \| 'center' \| 'end' \| 'space-between' \| 'space-around' \| 'space-evenly'` |  | Vertical alignment of grid within container |
| `padding?` | `number \| { top: number; right: number; bottom: number; left: number }` |  | Padding inside container (px) |

### `GroupEvent`

```ts
interface GroupEvent
```

**Properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `groupId` | `string` |  |  |
| `group?` | `any` |  |  |

### `JumpPointConfig`

```ts
interface JumpPointConfig
```

**Properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `enabled` | `boolean` |  |  |
| `size?` | `number` |  |  |
| `style?` | `'arc' \| 'gap' \| 'bridge'` |  |  |
| `detectMode?` | `'all' \| 'perpendicular' \| 'threshold'` |  |  |
| `threshold?` | `number` |  |  |

### `LabelStyle`

```ts
interface LabelStyle
```

**Properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `fontSize?` | `number` |  |  |
| `fontFamily?` | `string` |  |  |
| `color?` | `string` |  |  |
| `background?` | `string` |  |  |
| `padding?` | `number` |  |  |
| `borderRadius?` | `number` |  |  |
| `fontWeight?` | `'normal' \| 'bold' \| '100' \| '200' \| '300' \| '400' \| '500' \| '600' \| '700' \| '800' \| '900'` |  |  |
| `fontStyle?` | `'normal' \| 'italic' \| 'oblique'` |  |  |
| `textDecoration?` | `'none' \| 'underline' \| 'overline' \| 'line-through'` |  |  |
| `border?` | `string` |  |  |
| `borderWidth?` | `number` |  |  |
| `shadow?` | `Shadow` |  |  |
| `opacity?` | `number` |  |  |
| `lineHeight?` | `number` |  |  |

### `LayoutEvent`

```ts
interface LayoutEvent
```

**Properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `groupId` | `string` |  |  |
| `type` | `'flexbox' \| 'grid' \| 'none'` |  |  |
| `config?` | `any` |  |  |

### `LinearGradient`

```ts
interface LinearGradient
```

**Properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `type` | `'linear'` |  |  |
| `x1` | `number` |  |  |
| `y1` | `number` |  |  |
| `x2` | `number` |  |  |
| `y2` | `number` |  |  |
| `stops` | `GradientStop[]` |  |  |

### `LinkAnimation`

```ts
interface LinkAnimation
```

**Properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `type` | `'marching-ants' \| 'flow' \| 'pulse' \| 'dash-flow' \| 'none'` |  |  |
| `duration?` | `number` |  |  |
| `dashOffset?` | `number` |  |  |
| `speed?` | `'slow' \| 'normal' \| 'fast'` |  |  |
| `direction?` | `'forward' \| 'reverse'` |  |  |

### `LinkEvent`

```ts
interface LinkEvent
```

**Properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `linkId` | `string` |  |  |
| `link?` | `any` |  |  |

### `LinkState`

```ts
interface LinkState
```

**Properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `selected` | `boolean` |  |  |
| `hovered` | `boolean` |  |  |
| `highlighted` | `boolean` |  |  |
| `animated?` | `boolean` |  |  |

### `LODConfig`

A declarative, per-diagram Level-of-Detail policy. Replaces the hardcoded
zoom breakpoints and per-tier feature gates that used to live inside
DiagramModel.

```ts
interface LODConfig
```

**Properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `tiers` | `LODTier[]` |  |  |

### `LODTier`

One rung of a Level-of-Detail policy.

```ts
interface LODTier
```

**Properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `name` | `string` |  | Tier name — returned by `getLODLevel()` and used as the render LOD key. |
| `minZoom` | `number` |  | Inclusive lower zoom bound. The active tier for a given zoom is the highest-`minZoom` tier whose `minZoom <= zoom`. |
| `features` | `Set<LODFeature>` |  | The set of features that render at this tier. |

### `Marker`

```ts
interface Marker
```

**Properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `type` | `'arrow' \| 'circle' \| 'square' \| 'custom'` |  |  |
| `position` | `number` |  |  |
| `size?` | `number` |  |  |
| `color?` | `string` |  |  |

### `ModeEvent`

```ts
interface ModeEvent
```

**Properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `mode` | `'design' \| 'runtime' \| 'readonly'` |  |  |
| `previousMode?` | `'design' \| 'runtime' \| 'readonly'` |  |  |
| `reason?` | `string` |  |  |

### `NodeBehavior`

```ts
interface NodeBehavior
```

**Properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `selectable` | `boolean` |  |  |
| `draggable` | `boolean` |  |  |
| `resizable` | `boolean` |  |  |
| `rotatable` | `boolean` |  |  |
| `deletable` | `boolean` |  |  |
| `editable` | `boolean` |  |  |
| `connectable` | `boolean` |  |  |
| `groupable` | `boolean` |  |  |
| `cloneable` | `boolean` |  |  |
| `dragHandler?` | `{ isDragHandler: boolean; dragChildren?: boolean; }` |  |  |

### `NodeEvent`

```ts
interface NodeEvent
```

**Properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `nodeId` | `string` |  |  |
| `node?` | `any` |  |  |

### `NodeState`

```ts
interface NodeState
```

**Properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `visible` | `boolean` |  |  |
| `locked` | `boolean` |  |  |
| `selected` | `boolean` |  |  |
| `hovered` | `boolean` |  |  |
| `highlighted?` | `boolean` |  | Draw attention to the node without selecting it (search hits, traversal highlights, "related" emphasis). Independent of `selected`; when both are set, `selected` wins in the renderer's state precedence. |
| `focused` | `boolean` |  |  |
| `expanded` | `boolean` |  |  |
| `enabled` | `boolean` |  |  |
| `error?` | `string` |  |  |
| `warning?` | `string` |  |  |
| `status?` | `'idle' \| 'pending' \| 'running' \| 'completed' \| 'error' \| 'warning'` |  |  |
| `animateStatus?` | `boolean` |  |  |

### `ParallelLinkConfig`

Auto-separation of PARALLEL links (two or more links between
the same pair of nodes). Without it, ERD / BPMN / state-machine diagrams stack
every relationship between the same two entities on top of each other.

The links in a pair are fanned out symmetrically around the un-separated
route: with 2 links and spacing 16 the offsets are -8 and +8; with 3 they are
-16, 0, +16. Direction of the fan is the left/right normal of the source →
target vector, so both directions of a bidirectional pair fan consistently.

```ts
interface ParallelLinkConfig
```

**Properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `enabled?` | `boolean` |  | Turn separation off for this link (it stays on the un-separated route). |
| `spacing?` | `number` |  | Distance between adjacent links in the group, in px. Default 16. |
| `offset?` | `number` |  | Extra offset added on top of the computed fan offset (px, signed). Lets an author nudge one member of a bundle without touching the others. |

### `Path`

```ts
interface Path
```

**Properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `points` | `Point[]` |  |  |
| `segments` | `PathSegment[]` |  |  |

### `PathSegment`

```ts
interface PathSegment
```

**Properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `type` | `'move' \| 'line' \| 'curve' \| 'arc'` |  |  |
| `from` | `Point` |  |  |
| `to` | `Point` |  |  |
| `control1?` | `Point` |  |  |
| `control2?` | `Point` |  |  |
| `radius?` | `number` |  |  |

### `Pattern`

```ts
interface Pattern
```

**Properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `type` | `'dots' \| 'lines' \| 'grid' \| 'hatch' \| 'crosshatch'` |  |  |
| `color?` | `string` |  |  |
| `backgroundColor?` | `string` |  |  |
| `size?` | `number` |  |  |
| `spacing?` | `number` |  |  |

### `Plugin`

```ts
interface Plugin
```

**Properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `metadata` | `PluginMetadata` |  |  |

**Members**

- `install(context: PluginContext): void | Promise<void>`
- `uninstall?(context: PluginContext): void | Promise<void>`
- `onActivate?(context: PluginContext): void`
- `onDeactivate?(context: PluginContext): void`

### `PluginConfig`

```ts
interface PluginConfig
```

**Properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `enabled` | `boolean` |  |  |
| `config?` | `Record<string, any>` |  |  |

### `PluginContext`

```ts
interface PluginContext
```

**Properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `engine` | `any` |  |  |
| `eventBus` | `any` |  |  |
| `config` | `Record<string, any>` |  |  |

### `PluginMetadata`

```ts
interface PluginMetadata
```

**Properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `name` | `string` |  |  |
| `version` | `string` |  |  |
| `author?` | `string` |  |  |
| `description?` | `string` |  |  |
| `dependencies?` | `string[]` |  |  |

### `PluginRegistry`

```ts
interface PluginRegistry
```

**Members**

- `register(plugin: Plugin): void`
- `unregister(pluginName: string): void`
- `get(pluginName: string): Plugin | undefined`
- `has(pluginName: string): boolean`
- `list(): PluginMetadata[]`

### `Point`

```ts
interface Point
```

**Properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `x` | `number` |  |  |
| `y` | `number` |  |  |
| `z?` | `number` |  |  |

### `PortAlignment`

```ts
interface PortAlignment
```

**Properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `side` | `'left' \| 'right' \| 'top' \| 'bottom'` |  |  |
| `offset` | `number` |  |  |

### `PortPosition`

```ts
interface PortPosition
```

**Properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `x` | `number` |  |  |
| `y` | `number` |  |  |

### `RadialGradient`

```ts
interface RadialGradient
```

**Properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `type` | `'radial'` |  |  |
| `cx` | `number` |  |  |
| `cy` | `number` |  |  |
| `r` | `number` |  |  |
| `stops` | `GradientStop[]` |  |  |

### `Rectangle`

Rectangle defined by position and size
Used for viewport queries and spatial indexing

```ts
interface Rectangle
```

**Properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `x` | `number` |  |  |
| `y` | `number` |  |  |
| `width` | `number` |  |  |
| `height` | `number` |  |  |