节点搜索

🌐 Node Search

一个可用于在流程中搜索节点的搜索栏组件。

🌐 A search bar component that can be used to search for nodes in the flow.

它使用了来自 shadcn ui 的 Command 组件。

🌐 It uses the Command component from shadcn ui .

默认情况下，它会检查节点标签中是否包含小写字符串，并在选中节点时选择该节点并调整视图以适应节点。你可以通过传入自定义的 onSearch 函数来覆盖此行为。你还可以覆盖默认的 onSelectNode 函数，以在选中节点时自定义行为。

🌐 By default, it will check for lowercase string inclusion in the node’s label, and select the node and fit the view to the node when it is selected. You can override this behavior by passing a custom onSearch function. You can also override the default onSelectNode function to customize the behavior when a node is selected.

Dependencies:

@xyflow/react cmdk shadcn/ui/command

安装

在安装组件之前，务必遵循先决条件。


npx shadcn@latest add https://ui.reactflow.dev/node-search


pnpm dlx shadcn@latest add https://ui.reactflow.dev/node-search


yarn dlx shadcn@latest add https://ui.reactflow.dev/node-search


bun x shadcn@latest add https://ui.reactflow.dev/node-search

用法

1. Connect the component with your React Flow application.


import { NodeSearch } from "@/registry/components/node-search/";
import { Background, Node, Panel, ReactFlow } from "@xyflow/react";
 
type NodeData = {
  label: string;
};
 
const graphSize = 20;
 
const initNodes: Node<NodeData>[] = Array.from(
  { length: graphSize },
  (_, index) => {
    // Calculate grid dimensions (aim for roughly square grid)
    const cols = Math.ceil(Math.sqrt(graphSize));
    const rows = Math.ceil(graphSize / cols);
 
    // Calculate position in grid
    const col = index % cols;
    const row = Math.floor(index / cols);
 
    // Grid spacing
    const spacing = 200;
    const startX = 100;
    const startY = 100;
 
    return {
      id: `node-${index}`,
      data: { label: `Node ${index}` },
      position: {
        x: startX + col * spacing,
        y: startY + row * spacing,
      },
    };
  },
);
 
export default function App() {
  return (
    <div className="h-full w-full">
      <ReactFlow defaultNodes={initNodes} defaultEdges={[]} fitView>
        <Background />
        <Panel
          className="flex gap-1 rounded-md bg-primary-foreground p-1 text-foreground"
          position="top-left"
        >
          <NodeSearch />
        </Panel>
      </ReactFlow>
    </div>
  );
}