react flow 实用记录

1. 设置默认边节点为自己定义节点

      <ReactFlow
        defaultEdgeOptions={{ type: 'buttonEdge' }}
      >
        <Background />
        <Controls />
      </ReactFlow>

how to set default edge type when using typescript #1355

2. 给自定义node动态添加handle锚点

const CategorizeHandle = ({ top, right, text, idx }: IProps) => {
  return (
    <Handle
      type="source"
      position={Position.Right}
      id={`CategorizeHandle${idx}`}
      isConnectable
      style={{
        ...DEFAULT_HANDLE_STYLE,
        top: `${top}%`,
        right: `${right}%`,
        background: 'red',
      }}
    >
      <span className={styles.categorizeAnchorPointText}>{text}</span>
    </Handle>
  );
};

连接动态锚点到另一个节点，报错
[React Flow]: Couldn't create edge for source handle id: "CategorizeHandle1", edge id: reactflow__edge-Categorize:TangyWorldsRelateCategorizeHandle1-Generate:AllHotelsTelld. Help: https://reactflow.dev/error#008

点击报错链接查看文档，也没解决我的问题，还是调试吧，使用chrome devtools的

可以看出新增锚点的id并没有出现在sourceHandleBounds.source中，
在issue里找到了思路，dynamic handle #4306 根据文档 useUpdateNodeInternals在新增锚点的函数中加入updateNodeInternals(id);,可以成功连线了，如下图

3. 非拖拽方式建立连接线不会触发OnConnect钩子

页面上有个下拉框，选择不同的target则当前节点跟所选的节点连线，这个时候并不会触发OnConnect钩子，道理应该跟 setFieldsValue 不会触发 onFieldsChange 和 onValuesChange？一样，为了防止死循环的问题。

      addEdge: (connection: Connection) => {
        set({
          edges: addEdge(connection, get().edges),
        });
        get().deletePreviousEdgeOfClassificationNode(connection);
      },

4. 禁用部分节点的局部的拖拽功能

Disable dragging when hovering on a node in Reactflow该条是禁用所有节点的拖拽，那怎么禁用部分节点的局部拖拽？比如下面的输入框需要选中文本，而不是拖动节点。

解决办法：
Drag Handle

5. 复制粘贴节点

Copy / Paste Nodes and Edges #1020

6. 将其他算子拖拽到group算子内

子节点的坐标是相对于group节点的

参考：
Updating parentNode property in Subflow causes positioning issues with node #3965

7. sub flow 内的边无法选中

如图，无法选中，在非sub flow是可以被选中的

解决办法：
In Sub Flows inside the Edge Connections is not selecting or Clickable. #3498 将边z-index设置为1。

7. 限制节点的锚点Handle只能出不能进

      <Handle
        type="source"
        position={Position.Right}
        isConnectable={isConnectable}
        className={styles.handle}
        style={RightHandleStyle}
      ></Handle>

这么写了，以为可以只出不进，但是实际既可以进也可以出，加上isConnectableEnd={false}就可以只出不进了。