Flow

1<script lang="ts">
2	import type { Snippet } from 'svelte';
3	import { createRoundedPath } from './connectors';
4	import type { Connector, Orientation } from './types';
5	import { cn } from '$UTILS$';
6 
7	interface Props {
8		connectors: Connector[];
9		children?: Snippet;
10		cornerRadius?: number;
11		midOffset?: number;
12		arrowheadOffset?: number;
13		orientation?: Orientation;
14	}
15 
16	let {
17		connectors,
18		children,
19		cornerRadius,
20		midOffset,
21		arrowheadOffset,
22		orientation = 'vertical'
23	}: Props = $props();
24 
25	const markerId = $props.id();
26 
27	let orderedConnectors = $derived(
28		[...connectors].sort((a, b) => {
29			if (a.disabled && !b.disabled) return -1;
30			if (!a.disabled && b.disabled) return 1;
31			return 0;
32		})
33	);
34</script>
35 
36<svg width="100%" height="100%" aria-hidden="true" class="text-kumo-inactive overflow-visible">
37	<defs>
38		<marker
39			id={markerId}
40			markerWidth="8"
41			markerHeight="8"
42			refX="0"
43			refY="4"
44			orient="auto"
45			markerUnits="userSpaceOnUse"
46		>
47			<path
48				d="M 0,1.5 Q 0,0 1.5,0 Q 3.5,1 5.8,3.2 Q 6.5,4 5.8,4.8 Q 3.5,7 1.5,8 Q 0,8 0,6.5 Z"
49				fill="currentColor"
50				stroke="none"
51			/>
52		</marker>
53	</defs>
54 
55	{#each orderedConnectors as connector, index (`${connector.fromId ?? 'from'}-${connector.toId ?? 'to'}-${index}`)}
56		{let path = $state(createRoundedPath(connector, {
57			cornerRadius,
58			midOffset,
59			arrowheadOffset,
60			isBottom: connector.isBottom,
61			single: connector.single,
62			orientation
63		}))}
64		{let pathId =
65			$state(connector.fromId && connector.toId
66				? `${connector.fromId}-${connector.toId}`
67				: `path-${index}`)}
68 
69		<g class={cn(connector.disabled && 'opacity-40')}>
70			<path
71				d={path}
72				fill="none"
73				stroke="currentColor"
74				stroke-width="2"
75				marker-end={`url(#${markerId})`}
76				data-index={index}
77				data-testid={pathId}
78			/>
79		</g>
80	{/each}
81 
82	{@render children?.()}
83</svg>