Early preview version...
npm install svelte-flow-diagramEarly preview version...
- svelte components as diagram nodes
- mousewheel zoom
- space to drag around
``bash`
npm i svelte-flow-diagram
> The best way is to check out the example index route.
> Data passed to data will react to changes.props
> Currently, is only intended to be used for initial/static properties.uuid
> The of each node is available to the "content component" as a prop.
`svelte
`
| 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 |
| 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;
}
| name | payload | description |
| ---------------- | :------: | ----------------------------------------- |
| hoverConnection | { uuid } | Is fired when hovering over a connection. |
| selectConnection | { uuid } | Is fired when selecting a connection. |
`bash`
npm run dev
`bash`
npm run package
`bash``
npm run publish