feat(svelte-flow): add setter to useNodes, useEdges and useViewport

2025-01-09 12:42:23 +01:00
parent b50b44164a
commit 3cbb117cf0
3 changed files with 30 additions and 24 deletions
@@ -3,30 +3,27 @@
 		BaseEdge,
 		EdgeLabelRenderer,
 		useEdges,
-		type EdgeProps,
-		getBezierPath
+		getBezierPath,
+		type EdgeProps
 	} from '@xyflow/svelte';
-	interface Props {
-		[key: string]: any
-	}

-	let { ...props }: Props = $props();
+	let { ...props }: EdgeProps = $props();

-	type $$Props = EdgeProps;
-
-	let [path, labelX, labelY] = $derived(getBezierPath({
-		sourceX: props.sourceX,
-		sourceY: props.sourceY,
-		targetX: props.targetX,
-		targetY: props.targetY,
-		sourcePosition: props.sourcePosition,
-		targetPosition: props.targetPosition
-	}));
+	let [path, labelX, labelY] = $derived(
+		getBezierPath({
+			sourceX: props.sourceX,
+			sourceY: props.sourceY,
+			targetX: props.targetX,
+			targetY: props.targetY,
+			sourcePosition: props.sourcePosition,
+			targetPosition: props.targetPosition
+		})
+	);

 	const edges = useEdges();

 	function onClick() {
-		edges.update((eds) => eds.filter((e) => e.id !== props.id));
+		edges.current = edges.current.filter((e) => e.id !== props.id);
 	}
 </script>

@@ -5,7 +5,7 @@
 		data = { label: 'Node' },
 		positionAbsoluteX = 0,
 		positionAbsoluteY = 0
-	}: NodeProps = $props();
+	}: NodeProps<BuiltInNode> = $props();
 </script>

 <div class="custom">