# Types

Import these from `@grafloria/engine`.

## Types

### `Alignment`

Also has every member of `String`, listed on its own entry.

```ts
type Alignment = 'left' | 'right' | 'top' | 'bottom' | 'center';
```

### `DiagramEventType`

Also has every member of `String`, listed on its own entry.

```ts
type DiagramEventType = typeof DiagramEventTypes[keyof typeof DiagramEventTypes];
```

### `Direction`

Also has every member of `String`, listed on its own entry.

```ts
type Direction = 'horizontal' | 'vertical' | 'both';
```

### `EventHandler`

```ts
type EventHandler<T = any> = (event: DiagramEvent<T>) => void;
```

### `LayoutConfig`

Also has every member of `FlexboxLayoutConfig`, listed on its own entry.

Union type for all layout configurations

```ts
type LayoutConfig = FlexboxLayoutConfig | GridLayoutConfig;
```

### `LayoutType`

Also has every member of `String`, listed on its own entry.

Layout type for containers

```ts
type LayoutType = 'none' | 'flexbox' | 'grid';
```

### `LinkLabelSlot`

Also has every member of `String`, listed on its own entry.

The three label SLOTS along an edge (ngx-vflow ships exactly
these). A slot is shorthand for a `position`: start = 0.12, center = 0.5,
end = 0.88 — pulled off the very endpoints so a slot label never sits under
an arrowhead. An explicit `position` still wins.

```ts
type LinkLabelSlot = 'start' | 'center' | 'end';
```

### `LODFeature`

Also has every member of `String`, listed on its own entry.

A visual feature that a {@link LODTier} may gate on. Renderers ask
`diagram.shouldRender(feature, lod)` instead of hardcoding zoom breakpoints.

THE ECONOMIC FEATURES. Everything above the divider gates a
DECORATION: dropping it removes a few attributes or a child VNode at the very
end of the pipeline, and the work that produced them ran anyway. That made LOD
cosmetic, not economic: a 10k-node zoom-out frame took 63 SECONDS because the
renderer was still routing every edge around every obstacle to place lines
whose detours were sub-pixel on screen.

The three below gate WORK, not paint. They are what makes a far-zoom frame
actually cheap, and they are the reason `LODFeature` is worth having at all.

```ts
type LODFeature =

  | 'labels'
  | 'icons'
  | 'borders'
  | 'shadows'
  | 'ports'
  | 'decorations'
  | 'handles'

  | 'routing'

  | 'link-detail'

  | 'gradients';
```

### `LODLevel`

Also has every member of `String`, listed on its own entry.

Level of Detail tier name.

Widened from the fixed `'high' | 'medium' | 'low'` union to
`string` so apps can register their own tiers through {@link LODConfig}. The
three built-in tiers keep those exact names, so every historical
`lod === 'high'` / `lod !== 'low'` style check keeps working unchanged.

```ts
type LODLevel = string;
```

### `NodeSelectionLook`

Also has every member of `String`, listed on its own entry.

How a selected node shows it is selected.
- `'both'` (default): the body takes the theme's selected colours AND a ring
  is drawn 3px outside it.
- `'border'`: only the node's own border changes (the selected colour, 2px);
  its fill stays and no ring is drawn — the card look.
- `'ring'`: only the ring; the body keeps its own paint.

```ts
type NodeSelectionLook = 'both' | 'border' | 'ring';
```

### `RoutingStrategy`

Also has every member of `String`, listed on its own entry.

```ts
type RoutingStrategy = 'direct' | 'orthogonal' | 'smooth' | 'smart';
```