Update src/App.js

src/App.js

@@ -1,97 +1,49 @@
-import React, { useState, useRef, useCallback } from 'react';
+import React, { useCallback } from 'react';
 import ReactFlow, {
   ReactFlowProvider,
-  addEdge,
   useNodesState,
   useEdgesState,
-  Controls,
+  useReactFlow,
 } from 'reactflow';
-import 'reactflow/dist/style.css';
-
-import Sidebar from './Sidebar';
 
-import './index.css';
-
-const initialNodes = [
-  {
-    id: '1',
-    type: 'input',
-    data: { label: 'input node' },
-    position: { x: 250, y: 5 },
-  },
-];
+import { initialNodes, initialEdges } from './nodes-edges.js';
+import 'reactflow/dist/style.css';
 
-let id = 0;
-const getId = () => `dndnode_${id++}`;
+const getLayoutedElements = (nodes, edges) => {
+  return { nodes, edges };
+};
 
-const DnDFlow = () => {
-  const reactFlowWrapper = useRef(null);
+const LayoutFlow = () => {
+  const { fitView } = useReactFlow();
   const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
-  const [edges, setEdges, onEdgesChange] = useEdgesState([]);
-  const [reactFlowInstance, setReactFlowInstance] = useState(null);
-
-  const onConnect = useCallback(
-    (params) => setEdges((eds) => addEdge(params, eds)),
-    [],
-  );
+  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
 
-  const onDragOver = useCallback((event) => {
-    event.preventDefault();
-    event.dataTransfer.dropEffect = 'move';
-  }, []);
+  const onLayout = useCallback(() => {
+    const layouted = getLayoutedElements(nodes, edges);
 
-  const onDrop = useCallback(
-    (event) => {
-      event.preventDefault();
+    setNodes([...layouted.nodes]);
+    setEdges([...layouted.edges]);
 
-      const type = event.dataTransfer.getData('application/reactflow');
-
-      // check if the dropped element is valid
-      if (typeof type === 'undefined' || !type) {
-        return;
-      }
-
-      // reactFlowInstance.project was renamed to reactFlowInstance.screenToFlowPosition
-      // and you don't need to subtract the reactFlowBounds.left/top anymore
-      // details: https://reactflow.dev/whats-new/2023-11-10
-      const position = reactFlowInstance.screenToFlowPosition({
-        x: event.clientX,
-        y: event.clientY,
-      });
-      const newNode = {
-        id: getId(),
-        type,
-        position,
-        data: { label: `${type} node` },
-      };
-
-      setNodes((nds) => nds.concat(newNode));
-    },
-    [reactFlowInstance],
-  );
+    window.requestAnimationFrame(() => {
+      fitView();
+    });
+  }, [nodes, edges]);
 
   return (
-    <div className="dndflow">
-      <ReactFlowProvider>
-        <div className="reactflow-wrapper" ref={reactFlowWrapper}>
-          <ReactFlow
-            nodes={nodes}
-            edges={edges}
-            onNodesChange={onNodesChange}
-            onEdgesChange={onEdgesChange}
-            onConnect={onConnect}
-            onInit={setReactFlowInstance}
-            onDrop={onDrop}
-            onDragOver={onDragOver}
-            fitView
-          >
-            <Controls />
-          </ReactFlow>
-        </div>
-        <Sidebar />
-      </ReactFlowProvider>
-    </div>
+    <ReactFlow
+      nodes={nodes}
+      edges={edges}
+      onNodesChange={onNodesChange}
+      onEdgesChange={onEdgesChange}
+      fitView
+    />
   );
 };
 
-export default DnDFlow;
+export default function () {
+  return (
+    <ReactFlowProvider>
+      <LayoutFlow />
+    </ReactFlowProvider>
+  );
+}