svelte-flow-diagram v0.12.0

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

Props

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

Development

Run test app

npm run dev

Build package

npm run package

Publish package

npm run publish