javascript - Dagre 和 React-Flow 不会自动创建句柄（边缘源和目标）。（树可视化）

Question

我正在使用 Dagre 和 React-flow 创建组件树可视化，不幸的是我遇到了一些困难。边缘是正确的，都有正确的源和目标标识符，但是如果我不使用Handle提供的组件react-flow-renderer，将不会出现手柄（小点，边缘的连接点）。即使我设置元素targetPosition和sourcePosition. 我想el.targetPosition，el.sourcePosition什么也不做。下面的大部分实现来自 React-flow 官网，它们不使用Handle组件。句柄 ID 为空。

您还可以在下面找到快照。

1. 渲染元素

   {elements && (
   <ReactFlowProvider>
     <ReactFlow
       elements={elems}
       nodeTypes={{ reactComponent: ComponentNode }}
       onNodeMouseEnter={(_e, node) => highlightComponent(node, false)}
       onNodeMouseLeave={(_e, node) => removeHighlight(node)}
       onPaneClick={resetHighlight}
     >
   
     </ReactFlow>
   </ReactFlowProvider>
   

2. 其余代码

   const positionElements = (elements, dagreGraph, direction) => {
     return elements.forEach((el) => {
       if (isNode(el)) {
         if (direction === GraphLabels.topToBottom) {
           dagreGraph.setNode(el.id, {
            width: nodeWidth,
            height: baseNodeHeight + el.data.linesOfCode,
          });
        }
      } else {
        dagreGraph.setEdge(el.source, el.target);
      }
    });
   };
   
   
   export const getLayoutedElements = (elements, direction) => {
   const dagreGraph = new dagre.graphlib.Graph(); // building the graph
   dagreGraph.setDefaultEdgeLabel(() => ({}));
   dagreGraph.setGraph({ rankdir: direction });
   
   positionElements(elements, dagreGraph, direction);
   
   dagre.layout(dagreGraph);
   
   return elements.map((el) => {
    if (isNode(el)) {
      const nodeWithPosition = dagreGraph.node(el.id);
      Vertical scaling
      if (direction == GraphLabels.leftToRight) {
        do this.
      }
      if (direction == GraphLabels.topToBottom) {
        el.targetPosition = 'bottom';
        el.sourcePosition = 'top';
        el.position = {
          x: someValue,
          y: someOtherValue,
        };
      }
     }
   
    return el;
    });
   };