使用鼠標調整 react-flow-renderer 中的組類型節點

Question

我想在單擊按鈕時添加子流（組類型節點），稍后用鼠標調整它的大小，並通過拖放在該組內添加節點。 我搜索了很多，但我發現你已經設置了parentNode of child 來執行此操作。

我希望通過鼠標拖放來實現所有這些。 免費版的React-flow-renderer可以嗎？

編輯

SandBox-> https://codesandbox.io/embed/headless-architecture-6xbzu9?fontsize=14&hidenavigation=1&theme=dark

下面我附上onDragEnd function.. 它有效但是當我將一個節點放入組內時，節點 position 發生變化並且它進入組外。 在移動組時，它與組一起移動，這意味着它的父級設置正確但 position 不正確。 嘗試設置手動 position 但仍然無法正常工作。

const handleDragEnd = useCallback(
(event: React.MouseEvent<Element>, node: Node) => {
  let groupNode: Node | undefined = undefined;
  if (node.type === ConstantsFlowChartNodeTypes.GROUP) return;
  nodes.map((nds: Node) => {
    if (nds.type === ConstantsFlowChartNodeTypes.GROUP) {
      console.log(
        nds.type,
        nds,
        nds.type === ConstantsFlowChartNodeTypes.GROUP
      );
      if (
        nds.position.x <= node.position.x &&
        nds.position.x + parseInt(nds.style?.width?.toString() || "0") >=
          node.position.x &&
        nds.position.y <= node.position.y &&
        nds.position.y + parseInt(nds.style?.height?.toString() || "0") >=
          node.position.y
      ) {
        groupNode = nds;
      }
    }
  });
  console.log(groupNode);
  if (groupNode) {
    const position = {
      x: event.clientX,
      y: event.clientY,
    };
    setNodes((prevNodes) => {
      return prevNodes.map((nds) => {
        nds.parentNode =
          nds.id === node.id ? groupNode?.id : nds.parentNode;
        // nds.positionAbsolute = position;
        console.log(event);
        return { ...nds };
      });
    });
  }
},
[]);

Answer 1

這是可能的！

如果我理解您的問題，您需要能夠在組之間拖放節點。
您可以在反應流中使用“onDragEnd”道具。 只需將 function 傳遞給它，而不是每當您在 canvas 中拖放某些東西時，它就會為您提供確切的拖放 position 並且通過一些計算，您可以找到拖動的父節點目標組的更新和

 function handleDragEnd (event, node) {
  // node contains the absolute the drop position
 }

<ReactFlow
 ...your props
 onDragEnd={handleDragEnd}
/>

Answer 2

為了解決您在刪除節點時 position 發生變化的問題，請將 reactflow 實例作為參數發送到 function。 然后你可以使用它，如拖放示例所示，如下所示：

 const position = reactFlowInstance.project({
    x: event.clientX - reactFlowBounds.left,
    y: event.clientY - reactFlowBounds.top,
  });

這有助於相對於 reactflow 實例設置 position。 或者

使用 dagre 或 elkjs 等布局庫以獲得更好的樹結構。 您可以在以下鏈接上查看該布局算法的示例

來到第 2 點：節點應該留在子流中我建議您使用自定義節點並使節點結構如下：

{
id: '4b1',
data: { label: 'Node B.A.1' },
position: { x: 20, y: 40 },
className: 'light',
parentNode: '4b',
extent: 'parent' // this property is important to make the node stay inside parent

}

如果您需要進一步的幫助，請隨時共享代碼沙箱鏈接，我也可以在那里向您展示。

Answer 3

所以在多次思考這個問題之后，我意識到，我實際上得到了 position 的mousePointer而不是實際的節點。 我有兩種情況要處理。

• 如果用戶將節點從組外拖到組內（子流），position 會是什么。
• 如果用戶將節點從組內部拖動到組外部（子流），position 將是什么。

從外到內組

nodeWithUpdatedPosition.position = {
            x: draggedNode.positionAbsolute?.x! - targetGroupNode.position.x,
            y: draggedNode.positionAbsolute?.y! - targetGroupNode.position.y,
          };

你必須減去 targetGroupNode 的targetGroupNode ，因為如果你將父節點添加到任何節點，它的 position 將相對於該組（targetGroupNode）意味着如果你給draggedNode position of {x:0, y:0}然后它將被放置在頂部targetGroupNode內的左角。 從positionAbsolute中減去將使 position 相對於groupNode 。

由內向外組

nodeWithUpdatedPosition.position = draggedNode.positionAbsolute!

這解決了與節點定位相關的所有問題。 即使用戶拖動、放大或縮小 canvas，它也能正常工作。

工作代碼沙箱

Answer 4

我正在嘗試做類似的事情，但是，當我創建節點然后創建一個組並將節點添加到組中時，無法再選擇和移動該節點。 它被阻止了。 您知道為什么會發生這種情況以及如何解決嗎？