Svelte Flow Diagram

Early preview version...

Features

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

Install

npm i svelte-flow-diagram

Usage

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

Example

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.

<script>
	import { Diagram } from 'svelte-flow-diagram';

	let diagram;

	// add a node
	diagram.insertNode({
		uuid: 'test-uuid-1', // optional, gets generated when omitted
		data: { ... }, // optional data
		components: {
			content: { component: MyNodeComponent, props: { ... } },
			connectors: {
				input: { component: MyInputConnector },
				output: { component: MyOutputConnector }
			}
		},
		inputNames: ['in'],
		outputNames: ['out'],
		position: { x: 200, y: 100 }
	});

    	// add another node
	diagram.insertNode({
		uuid: 'test-uuid-2', // optional, gets generated when omitted
		data: { ... }, // optional data
		components: {
			content: { component: MyNodeComponent, props: { ... } },
			connectors: {
				input: { component: MyInputConnector },
				output: { component: MyOutputConnector }
			}
		},
		inputNames: ['in'],
		outputNames: ['out'],
		position: { x: 400, y: 100 }
	});

    	// add a connection
	diagram.addConnection({
		uuid: 'test-connection', // optional, gets generated when omitted
		from: {
			name: 'out',
			uuid: 'test-uuid-1'
		},
		to: {
			name: 'in',
			uuid: 'test-uuid-2'
		}
	});
</script>

<Diagram bind:this={diagram} />

Methods

| 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 |

Props

| 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:

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

Optional Events

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

Development

Run test app

npm run dev

Build package

npm run package

Publish package

npm run publish