# Types

Import these from `@grafloria/renderer`.

## Types

### `BackendMode`

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

```ts
type BackendMode = 'svg' | 'canvas';
```

### `CanvasHazard`

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

Why canvas mode would take something away from this particular diagram, right now.

```ts
type CanvasHazard =

  | 'a11y-active'

  | 'focus-inside'

  | 'foreign-object';
```

### `DrawCall`

One recorded paint operation, with the state that produced it.

```ts
type DrawCall =
  | {
      op: 'fill';
      path: PathCmd[];
      fillStyle: unknown;
      globalAlpha: number;
      transform: Matrix;
      filter?: string;
    }
  | {
      op: 'stroke';
      path: PathCmd[];
      strokeStyle: unknown;
      lineWidth: number;
      lineDash: number[];
      globalAlpha: number;
      transform: Matrix;
      filter?: string;
    }
  | { op: 'clip'; path: PathCmd[]; transform: Matrix }
  | {
      op: 'fillText';
      text: string;
      x: number;
      y: number;
      font: string;
      fillStyle: unknown;
      textAlign: CanvasTextAlign;
      textBaseline: CanvasTextBaseline;
      globalAlpha: number;
      transform: Matrix;
    }
  | { op: 'clearRect'; x: number; y: number; w: number; h: number; transform: Matrix }
  | {
      op: 'fillRect';
      x: number;
      y: number;
      w: number;
      h: number;
      fillStyle: unknown;
      transform: Matrix;
    }
  | { op: 'save' }
  | { op: 'restore' }
  | { op: 'setTransform'; transform: Matrix };
```

**Properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `op` | `'fill'` |  |  |

### `HitKind`

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

What a hit region belongs to.

```ts
type HitKind = 'node' | 'link' | 'port' | 'other';
```

### `PathCmd`

```ts
type PathCmd =
  | { op: 'M'; x: number; y: number }
  | { op: 'L'; x: number; y: number }
  | { op: 'C'; x1: number; y1: number; x2: number; y2: number; x: number; y: number }
  | { op: 'Q'; x1: number; y1: number; x: number; y: number }
  | { op: 'Z' };
```

**Properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `op` | `'M'` |  |  |