87 lines
2.3 KiB
Svelte
87 lines
2.3 KiB
Svelte
<script lang="ts">
|
|
import { writable } from 'svelte/store';
|
|
import { SvelteFlow, Controls, Background, BackgroundVariant, Position, type Node, type Edge } from '@xyflow/svelte';
|
|
|
|
import '@xyflow/svelte/dist/style.css';
|
|
|
|
const nodes = writable<Node[]>([
|
|
{
|
|
id: '0',
|
|
position: { x: 0, y: 150 },
|
|
data: { label: 'Node 0' },
|
|
sourcePosition: Position.Right,
|
|
targetPosition: Position.Left,
|
|
size: {
|
|
width: 100,
|
|
height: 40,
|
|
},
|
|
handles: [
|
|
{ type: 'source', x: 100, y: 20, position: Position.Right },
|
|
{ type: 'target', x: 0, y: 20, position: Position.Left },
|
|
],
|
|
},
|
|
{
|
|
id: 'A',
|
|
position: { x: 250, y: 0 },
|
|
data: { label: 'A' },
|
|
sourcePosition: Position.Right,
|
|
targetPosition: Position.Left,
|
|
size: {
|
|
width: 100,
|
|
height: 40,
|
|
},
|
|
handles: [
|
|
{ type: 'source', x: 100, y: 20, position: Position.Right },
|
|
{ type: 'target', x: 0, y: 20, position: Position.Left },
|
|
],
|
|
},
|
|
{
|
|
id: 'B',
|
|
position: { x: 250, y: 150 },
|
|
data: { label: 'B' },
|
|
sourcePosition: Position.Right,
|
|
targetPosition: Position.Left,
|
|
size: {
|
|
width: 100,
|
|
height: 40,
|
|
},
|
|
handles: [
|
|
{ type: 'source', x: 100, y: 20, position: Position.Right },
|
|
{ type: 'target', x: 0, y: 20, position: Position.Left },
|
|
],
|
|
},
|
|
{
|
|
id: 'C',
|
|
position: { x: 250, y: 300 },
|
|
data: { label: 'C' },
|
|
sourcePosition: Position.Right,
|
|
targetPosition: Position.Left,
|
|
size: {
|
|
width: 100,
|
|
height: 40,
|
|
},
|
|
handles: [
|
|
{ type: 'source', x: 100, y: 20, position: Position.Right },
|
|
{ type: 'target', x: 0, y: 20, position: Position.Left },
|
|
],
|
|
},
|
|
]);
|
|
|
|
const edges = writable<Edge[]>([
|
|
{ id: '0A', source: '0', target: 'A', animated: true },
|
|
{ id: '0B', source: '0', target: 'B', animated: true },
|
|
{ id: '0C', source: '0', target: 'C', animated: true },
|
|
]);
|
|
|
|
const defaultEdgeOptions = {
|
|
animated: true,
|
|
};
|
|
</script>
|
|
|
|
<div style="height: 400px; width: 700px;">
|
|
<SvelteFlow {nodes} {edges} fitView {defaultEdgeOptions} width={700} height={400}>
|
|
<Controls />
|
|
<Background variant={BackgroundVariant.Dots} />
|
|
</SvelteFlow>
|
|
</div>
|