resizable-node-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	ReactFlow,
17	ReactFlowProvider,
18} from "@xyflow/react";
19import { useCallback, useState } from "react";
20import { ResizableNode } from "@/registry/ui/flow/resizable-node";
21 
22const TextResizableNode = (props: NodeProps<Node>) => {
23	return (
24		<ResizableNode
25			selected={props.selected}
26			className="flex flex-col items-center justify-center p-4"
27		>
28			<span>{props.data.value as string}</span>
29		</ResizableNode>
30	);
31};
32 
33const nodeTypes: NodeTypes = {
34	"text-resizable-node": TextResizableNode,
35};
36 
37const initialNodes = [
38	{
39		id: "node-1",
40		type: "text-resizable-node",
41		position: { x: 0, y: 0 },
42		data: { value: "Try to resize me" },
43	},
44];
45 
46export default function ResizableNodeDemo() {
47	const [nodes, setNodes] = useState<Node[]>(initialNodes);
48	const [edges, setEdges] = useState([]);
49 
50	// Add default viewport configuration
51	const defaultViewport = { x: 100, y: 150, zoom: 1 };
52 
53	const onNodesChange = useCallback(
54		(changes: NodeChange<Node>[]) =>
55			setNodes((nds) => applyNodeChanges(changes, nds)),
56		[],
57	);
58	const onEdgesChange = useCallback(
59		(changes: EdgeChange<never>[]) =>
60			setEdges((eds) => applyEdgeChanges(changes, eds)),
61		[],
62	);
63	const onConnect = useCallback(
64		(connection: Connection) => setEdges((eds) => addEdge(connection, eds)),
65		[],
66	);
67 
68	return (
69		<div className="w-full h-full">
70			<ReactFlowProvider>
71				<ReactFlow
72					nodes={nodes}
73					edges={edges}
74					onNodesChange={onNodesChange}
75					onEdgesChange={onEdgesChange}
76					onConnect={onConnect}
77					nodeTypes={nodeTypes}
78					defaultViewport={defaultViewport}
79					/* fitView */
80				>
81					<Background />
82				</ReactFlow>
83			</ReactFlowProvider>
84		</div>
85	);
86}