实现自定义节点

鸿图的节点系统是基于 xyflow 的，开发者可以参考 xyflow 官方文档，实现自定义节点。下面以一个简单的节点为例，介绍如何实现自定义节点。

tsx

import BPHandle from "@/components/nodes/components/BPHandle";

const MyNode = ({ id, selected, data }: NodeProps) => {
  return (
    <div className={selected ? "node node-selected" : "node"}>
      <div className='node-header node-function-header'>
        <label htmlFor="text">我的自定义节点</label>
      </div>
      <div className='node-content'>
        <div className='node-flow'></div>
      </div>

      <BPHandle id={`handle-flow-in-${id}`} top={startingTopY} />
      <BPHandle id={`handle-flow-out-${id}`} top={startingTopY} />
    </div>
  );
}

实现自定义节点 ​

实现自定义节点