리액트플로우

import React, { useState, useEffect } from 'react';

import ReactFlow, {

  addEdge,

  MiniMap,

  Controls,

  Background,

  applyNodeChanges,

  applyEdgeChanges,

  Node,

  Edge,

  Connection,

  NodeChange,

  EdgeChange,

} from 'reactflow';

import 'reactflow/dist/style.css';

 

const initialNodes: Node[] = [

  {

    id: '1',

    type: 'input',

    data: { label: 'Node 1' },

    position: { x: 250, y: 5 },

  },

  // ...other nodes

];

 

const initialEdges: Edge[] = [

  { id: 'e1-2', source: '1', target: '2', animated: true },

  // ...other edges

];

 

const App: React.FC = () => {

  const [nodes, setNodes] = useState<Node[]>(initialNodes);

  const [edges, setEdges] = useState<Edge[]>(initialEdges);

  const [selectedNode, setSelectedNode] = useState<Node | null>(null);

 

  const onNodesChange = (changes: NodeChange[]) => {

    setNodes((nds) => {

      const updatedNodes = applyNodeChanges(changes, nds);

      if (selectedNode) {

        const updatedSelectedNode = updatedNodes.find(node => node.id === selectedNode.id) || null;

        setSelectedNode(updatedSelectedNode);

      }

      return updatedNodes;

    });

  };

 

  const onEdgesChange = (changes: EdgeChange[]) => setEdges((eds) => applyEdgeChanges(changes, eds));

  const onConnect = (params: Connection) => setEdges((eds) => addEdge(params, eds));

 

  const onNodeClick = (_event: React.MouseEvent, node: Node) => {

    setSelectedNode(node);

  };

 

  const handleSidebarChange = (event: React.ChangeEvent<HTMLInputElement>) => {

    const { name, value } = event.target;

    if (selectedNode) {

      const updatedNode = {

        ...selectedNode,

        data: { ...selectedNode.data, [name]: value },

      };

 

      setSelectedNode(updatedNode);

 

      setNodes((nds) =>

        nds.map((node) => (node.id === selectedNode.id ? updatedNode : node))

      );

    }

  };

 

  return (

    <div style={{ display: 'flex', height: '100vh' }}>

      <div style={{ width: '70%' }}>

        <ReactFlow

          nodes={nodes}

          edges={edges}

          onNodesChange={onNodesChange}

          onEdgesChange={onEdgesChange}

          onConnect={onConnect}

          onNodeClick={onNodeClick}

          fitView

        >

          <MiniMap />

          <Controls />

          <Background />

        </ReactFlow>

      </div>

      <div style={{ width: '30%', padding: '10px', borderLeft: '1px solid #ddd' }}>

        {selectedNode && (

          <div>

            <h3>Node Details</h3>

            <label>

              Label:

              <input

                type="text"

                name="label"

                value={selectedNode.data.label}

                onChange={handleSidebarChange}

              />

            </label>

          </div>

        )}

      </div>

    </div>

  );

};

 

export default App;