editable-handle-demo

1"use client";
2 
3import "@xyflow/react/dist/style.css";
4 
5import {
6	addEdge,
7	applyEdgeChanges,
8	applyNodeChanges,
9	Background,
10	type Connection,
11	type EdgeChange,
12	type Node,
13	type NodeChange,
14	type NodeProps,
15	type NodeTypes,
16	Position,
17	ReactFlow,
18	ReactFlowProvider,
19	useUpdateNodeInternals,
20} from "@xyflow/react";
21import { nanoid } from "nanoid";
22import { useCallback, useState } from "react";
23import { Button } from "@/components/ui/button";
24import {
25	EditableHandle,
26	EditableHandleDialog,
27} from "@/registry/ui/flow/editable-handle";
28 
29const DynamicHandlesNode = ({ id }: NodeProps<Node>) => {
30	const updateNodeInternals = useUpdateNodeInternals();
31	const [handles, setHandles] = useState<
32		{ id: string; name: string; description?: string }[]
33	>([
34		{
35			id: "1",
36			name: "input1",
37			description: "Input 1 description",
38		},
39	]);
40 
41	const handleCreate = useCallback(
42		(name: string, description?: string) => {
43			console.log("New handle", name, description);
44			const newHandle = {
45				id: `handle-${nanoid()}`,
46				name,
47				description,
48			};
49			setHandles((prev) => [...prev, newHandle]);
50			updateNodeInternals(id);
51			return true;
52		},
53		[id, updateNodeInternals],
54	);
55 
56	const handleUpdate = useCallback(
57		(handleId: string, newName: string, newDescription?: string) => {
58			setHandles((prev) =>
59				prev.map((handle) =>
60					handle.id === handleId
61						? {
62								...handle,
63								name: newName,
64								description: newDescription,
65							}
66						: handle,
67				),
68			);
69			return true;
70		},
71		[],
72	);
73 
74	const handleDelete = useCallback(
75		(handleId: string) => {
76			setHandles((prev) =>
77				prev.filter((handle) => handle.id !== handleId),
78			);
79			updateNodeInternals(id);
80		},
81		[id, updateNodeInternals],
82	);
83 
84	return (
85		<div className="py-4 border rounded-lg bg-background w-[300px]">
86			<h2 className="text-lg font-semibold mb-4 px-4">
87				Node with dynamic Handles
88			</h2>
89 
90			<EditableHandleDialog
91				variant="create"
92				label=""
93				onSave={handleCreate}
94				onCancel={() => {}}
95				align="start"
96			>
97				<Button variant="outline" size="sm" className="h-8 ml-4">
98					Create New Handle
99				</Button>
100			</EditableHandleDialog>
101 
102			<div className="mt-4 space-y-2">
103				{handles.map((handle) => (
104					<div key={handle.id} className="flex items-center gap-2">
105						<EditableHandle
106							nodeId={id}
107							handleId={handle.id}
108							name={handle.name}
109							description={handle.description}
110							type="target"
111							position={Position.Left}
112// … truncated