Svelte Flow Diagram

Early preview version...

Features

- svelte components as diagram nodes
- mousewheel zoom
- space to drag around

Install

``bash
npm i svelte-flow-diagram
`

Usage

> The best way is to check out the example index route.

$3

> Data passed to data will react to changes.
> Currently, props is only intended to be used for initial/static properties.
> The uuid of each node is available to the "content component" as a prop.

`svelte



`

$3

| name | description |
| ---------------- | --------------------------------------------------- |
| insertNode | insert a node |
| removeNode | remove a node (also removes associated connections) |
| addConnection | add a connection |
| removeConnection | remove a connection |
| clear | clears the diagram |
| setNodeData | update the data of the given node |
| setNodePosition | update the position of the given node |

$3

| name | default | description |
| ------------------ | :-----: | -------------------------------------------- |
| nodes | {} | All of the nodes |
| connections | {} | All of the connections |
| zoomLevel | 1 | Zoom in or out; 1 => 100% |
| connectionRenderer | {} | Change the appearance of connections |
| zoomMin | 0.1 | minimal zoom level |
| zoomMax | 5 | maximal zoom level |
| zoomStep | 0.1 | increase/decrease zoom by this much per step |

#### ConnectionRenderer

The connection line can be manipulated for the following states:

`ts
interface ConnectionRenderer {
default?: (context: CanvasRenderingContext2D) => void;
hovered?: (context: CanvasRenderingContext2D) => void;
selected?: (context: CanvasRenderingContext2D) => void;
creating?: (context: CanvasRenderingContext2D) => void;
}
`

$3

| name | payload | description |
| ---------------- | :------: | ----------------------------------------- |
| hoverConnection | { uuid } | Is fired when hovering over a connection. |
| selectConnection | { uuid } | Is fired when selecting a connection. |

Development

$3

`bash
npm run dev
`

$3

`bash
npm run package
`

$3

`bash
npm run publish
``