ReactFlow样式优化——多个句柄

官方文档或者网上的博客中关于react-flow-renderer的多个句柄都没有对应的具体实例。只能自食其力。

官网中提到多个句柄需要自定义节点。其中一个Handle为一个句柄。
1.图中的情况就是5个句柄，那么显示与隐藏怎么判断呢？
通过类名，增加一个隐藏的类，设置border和background为transparent。
2.样式写出来了，接下来就是处理保存信息，以便于下次打开布局依旧如此。
句柄的上下左右是通过edges中的sourceHandle和targetHandle，再次打开处理数据时要记得一定要把这两个属性也放进去，不然默认为左侧入口
3.数据也处理完了，接下来就是控制鼠标点击出现入口节点，鼠标弹起控制入口节点消失。那么这里你可能会遇到一个问题，如果给每个节点一个onMouseDown和onMouseUp那么不仅操作范围变小了，而且连线连到一半（图2的情况）松手，入口节点不会消失。这里就使用了文档中的onConnectStart和onConnectEnd方法

<ReactFlow
        elements={elements}
        nodeTypes={nodeTypes}
        edgeTypes={edgeTypes}
        onConnect={onConnect}
        onLoad={onLoad}
        onDrop={onDrop}
        onConnectStart={onConnectStart}
        onConnectEnd={onConnectEnd}
        onDragOver={onDragOver}
        fitView
      >
        <Controls />
      </ReactFlow>

这里我结合了React的Hook，useContext 传递数据。

总结：这一套的工作流交互相比于只有左右句柄和上下句柄的交互更加人性化，可以尝试。