ReactFlowでClickしたNodeの子Nodeに影響を与える

公開

2024-04-12

文章量

約333字

2or3

フォロー

何をしたいのか

方法

自分で実装する

3, 4の実装

説明

まとめ

Tech

何をしたいのか

Accordionを閉じたときに一緒に親子関係のNodeも一緒にHiddenにしたかった

方法

お金をはらう
ReactFlow Proならできます

　　　　　　　　　　　　　　　　　　　　　Collapse前

　　　　　　　　　　　　　　　　　　　　　Collapse後

自分で実装する

全く同じものではないですがもちろん自分で実装することもできます。大雑把には以下のような方法で実現できます。

Material UIなどのAccordion ComponentでNodeを囲う

https://mui.com/material-ui/react-accordion/

紐づくNodeのparent-idに1で作成したNodeIdをいれる

https://reactflow.dev/api-reference/types/node#parent-id

AccordionのonClick Eventで子Nodeのhidden attributeを更新する
onNodeChangeでnodeをrenderingする

3, 4の実装

（Accordionの実装はしてない）

import React, { useCallback, useEffect } from 'react';
import ReactFlow, {
  MiniMap,
  Controls,
  Background,
  useNodesState,
  useEdgesState,
  addEdge,
} from 'reactflow';
 
import 'reactflow/dist/style.css';
 
const initialNodes = [
  { id: '1', position: { x: 250, y: 50 }, data: { label: '1' } },
  { id: '2', position: { x: 0, y: 100 }, data: { label: '2' }, parentId: '1' },
  { id: '3', position: { x: 200, y: 100 }, data: { label: '3' }, parentId: '1' },
  { id: '4', position: { x: 650, y: 150 }, data: { label: '4' } },
];
const initialEdges = [
  { id: 'e1-2', source: '1', target: '2' },
  { id: 'e1-3', source: '1', target: '3' },
  { id: 'e1-4', source: '1', target: '4' },
];
 
export default function App() {
  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
 
  const onConnect = useCallback(
    (params) => setEdges((eds) => addEdge(params, eds)),
    [setEdges],
  );

  const hideNode = useCallback(
    (event, selectedNode) => {
      nodes.filter((node) => (node?.parentId === selectedNode.id)).map((node) => node.hidden = true)
      onNodesChange(nodes)
    },
    [nodes]
  );
  
  return (
    <div style={{ width: '100vw', height: '100vh' }}>
      <ReactFlow
        nodes={nodes}
        edges={edges}
        onNodesChange={onNodesChange}
        onEdgesChange={onEdgesChange}
        onConnect={onConnect}
        onNodeClick={hideNode}
      >
        <Controls />
        <MiniMap />
        <Background variant="dots" gap={12} size={1} />
      </ReactFlow>
    </div>
  );
}

説明

初期Node

親Node・・・id:1
子Node・・・id:2, 3
独立したNode・・・id:4

初期Edge

id:1 - id:2
id:1 - id:3
id:1 - id:4

初期状態

Clickされたときにhiddenにする関数

すべてのNodeからparentIdがClickされたNodeのIdと一致したもののhiddenプロパティをtrueにする
onNodesChangeでrenderingする

  const hideNode = useCallback(
    (event, selectedNode) => {
      nodes.filter((node) => (node?.parentId === selectedNode.id)).map((node) => node.hidden = true)
      onNodesChange(nodes)
    },
    [nodes]
  );

React FlowのonNodeClick Event Handlerに↑の関数を設定する

（Accordionの場合にはAccordion componentのonClick Event）

      <ReactFlow
        nodes={nodes}
        edges={edges}
        onNodesChange={onNodesChange}
        onEdgesChange={onEdgesChange}
        onConnect={onConnect}
        onNodeClick={hideNode}
      >