Fix: Edges not changing on change in position of node handles

mahesh-gfx · Aug 19, 2024 · 91683b8 · 91683b8
1 parent 368bc8c
commit 91683b8
Show file tree

Hide file tree

Showing 5 changed files with 159 additions and 114 deletions.
diff --git a/packages/frontend/src/App.tsx b/packages/frontend/src/App.tsx
@@ -19,6 +19,7 @@ import UserMenu from "./components/UserMenu";
 import WorkflowOptions from "./components/WorkflowOptions";
 import { WorkflowProvider } from "./context/WorkflowContext";
 import { StyledEngineProvider } from "@mui/material/styles";
+import { ReactFlowProvider } from "reactflow";
 
 const App: React.FC = () => {
   useEffect(() => {
@@ -28,34 +29,36 @@ const App: React.FC = () => {
   return (
     <StyledEngineProvider injectFirst>
       {" "}
-      <WorkflowProvider>
-        <Router>
-          <div className="App">
-            <HeaderWithConditionalComponent />
-            <Routes>
-              <Route
-                path="/"
-                element={
-                  <ProtectedRoute>
-                    <Dashboard />
-                  </ProtectedRoute>
-                }
-              />
-              <Route
-                path="/workflow/:id"
-                element={
-                  <ProtectedRoute>
-                    <WorkflowCanvas />
-                  </ProtectedRoute>
-                }
-              />
-              <Route path="/login" element={<Login />} />
-              <Route path="/register" element={<Register />} />
-              <Route path="*" element={<Navigate to="/" replace />} />
-            </Routes>
-          </div>
-        </Router>
-      </WorkflowProvider>
+      <ReactFlowProvider>
+        <WorkflowProvider>
+          <Router>
+            <div className="App">
+              <HeaderWithConditionalComponent />
+              <Routes>
+                <Route
+                  path="/"
+                  element={
+                    <ProtectedRoute>
+                      <Dashboard />
+                    </ProtectedRoute>
+                  }
+                />
+                <Route
+                  path="/workflow/:id"
+                  element={
+                    <ProtectedRoute>
+                      <WorkflowCanvas />
+                    </ProtectedRoute>
+                  }
+                />
+                <Route path="/login" element={<Login />} />
+                <Route path="/register" element={<Register />} />
+                <Route path="*" element={<Navigate to="/" replace />} />
+              </Routes>
+            </div>
+          </Router>
+        </WorkflowProvider>
+      </ReactFlowProvider>
     </StyledEngineProvider>
   );
 };

diff --git a/packages/frontend/src/components/WorkflowCanvas.tsx b/packages/frontend/src/components/WorkflowCanvas.tsx
@@ -1,10 +1,5 @@
 import React, { useEffect, useContext } from "react";
-import ReactFlow, {
-  ReactFlowProvider,
-  Controls,
-  Background,
-  MiniMap,
-} from "reactflow";
+import ReactFlow, { Controls, Background, MiniMap } from "reactflow";
 import "reactflow/dist/style.css";
 import NodePanel from "./NodePanel";
 import NodeConfigPopup from "./NodeConfigPopup";
@@ -43,6 +38,7 @@ const WorkflowCanvas: React.FC = () => {
     setExecutionStatus,
     onNodesDelete,
     transformEdges,
+    onNodeDragStop,
   }: any = useContext(WorkflowContext);
 
   //useEffects
@@ -75,88 +71,85 @@ const WorkflowCanvas: React.FC = () => {
   }, []);
 
   return (
-    <ReactFlowProvider>
-      <div style={{ height: "600px" }} ref={reactFlowWrapper}>
-        <ReactFlow
-          nodes={nodes}
-          edges={edges}
-          onNodesChange={onNodesChange}
-          onEdgesChange={onEdgesChange}
-          onConnect={onConnect}
-          onInit={setReactFlowInstance}
-          onDrop={onDrop}
-          onDragOver={onDragOver}
-          onNodeDoubleClick={onNodeDoubleClick}
-          nodeTypes={nodeTypes}
-          edgeTypes={edgeTypes}
-          fitView
-          connectionLineStyle={connectionLineStyle}
-          onNodesDelete={onNodesDelete}
-        >
-          <Controls position="top-right" />
-          <Background />
-          <MiniMap position="bottom-right" />
-        </ReactFlow>
-        <NodePanel nodeTypes={nodeDefinitions} onDragStart={onDragStart} />
-        <div
-          style={{
-            display: "flex",
-            position: "fixed",
-            top: "20px",
-            right: "20px",
-            gap: "10px",
-          }}
-        ></div>
-        {selectedNode &&
-          selectedNode.type &&
-          nodeDefinitions[selectedNode.type] && (
-            <NodeConfigPopup
-              node={selectedNode}
-              nodeDefinition={
-                nodeDefinitions[
-                  selectedNode.type as keyof typeof nodeDefinitions
-                ]
-              }
-              onClose={() => setSelectedNode(null)}
-              onUpdate={(nodeId, newData) => {
-                setNodes((nds: any) =>
-                  nds.map((node: any) =>
-                    node.id === nodeId
-                      ? {
-                          ...node,
-                          data: {
-                            ...node.data,
-                            properties: {
-                              ...node.data.properties,
-                              ...newData.properties,
-                            },
-                          },
-                        }
-                      : node
-                  )
-                );
-              }}
-            />
-          )}
-        {executionStatus && (
-          <PopupMessage
-            message={executionStatus}
-            type={
-              executionErrors
-                ? "error"
-                : executionStatus.includes("completed successfully")
-                ? "success"
-                : "loading"
+    <div style={{ height: "600px" }} ref={reactFlowWrapper}>
+      <ReactFlow
+        nodes={nodes}
+        edges={edges}
+        onNodesChange={onNodesChange}
+        onEdgesChange={onEdgesChange}
+        onConnect={onConnect}
+        onInit={setReactFlowInstance}
+        onDrop={onDrop}
+        onDragOver={onDragOver}
+        onNodeDoubleClick={onNodeDoubleClick}
+        onNodeDragStop={onNodeDragStop}
+        nodeTypes={nodeTypes}
+        edgeTypes={edgeTypes}
+        fitView
+        connectionLineStyle={connectionLineStyle}
+        onNodesDelete={onNodesDelete}
+      >
+        <Controls position="top-right" />
+        <Background />
+        <MiniMap position="bottom-right" />
+      </ReactFlow>
+      <NodePanel nodeTypes={nodeDefinitions} onDragStart={onDragStart} />
+      <div
+        style={{
+          display: "flex",
+          position: "fixed",
+          top: "20px",
+          right: "20px",
+          gap: "10px",
+        }}
+      ></div>
+      {selectedNode &&
+        selectedNode.type &&
+        nodeDefinitions[selectedNode.type] && (
+          <NodeConfigPopup
+            node={selectedNode}
+            nodeDefinition={
+              nodeDefinitions[selectedNode.type as keyof typeof nodeDefinitions]
             }
-            onClose={() => {
-              setExecutionStatus(null);
-              if (!executionErrors) {
-              }
+            onClose={() => setSelectedNode(null)}
+            onUpdate={(nodeId, newData) => {
+              setNodes((nds: any) =>
+                nds.map((node: any) =>
+                  node.id === nodeId
+                    ? {
+                        ...node,
+                        data: {
+                          ...node.data,
+                          properties: {
+                            ...node.data.properties,
+                            ...newData.properties,
+                          },
+                        },
+                      }
+                    : node
+                )
+              );
             }}
           />
         )}
-      </div>
-    </ReactFlowProvider>
+      {executionStatus && (
+        <PopupMessage
+          message={executionStatus}
+          type={
+            executionErrors
+              ? "error"
+              : executionStatus.includes("completed successfully")
+              ? "success"
+              : "loading"
+          }
+          onClose={() => {
+            setExecutionStatus(null);
+            if (!executionErrors) {
+            }
+          }}
+        />
+      )}
+    </div>
   );
 };
 

diff --git a/packages/frontend/src/components/handle/CustomHandle.tsx b/packages/frontend/src/components/handle/CustomHandle.tsx
@@ -0,0 +1,20 @@
+import React, { useEffect } from "react";
+import { Handle, Position, useUpdateNodeInternals } from "reactflow";
+
+const CustomHandle = ({ nodeId, type, position, style }: any) => {
+  const updateNodeInternals = useUpdateNodeInternals();
+  useEffect(() => {
+    updateNodeInternals(nodeId);
+  }, [position]);
+  return (
+    <Handle
+      type={type}
+      position={position}
+      style={{
+        ...style,
+      }}
+    />
+  );
+};
+
+export default CustomHandle;
diff --git a/packages/frontend/src/components/nodes/DefaultNode.tsx b/packages/frontend/src/components/nodes/DefaultNode.tsx
@@ -4,6 +4,7 @@ import { useContext, useEffect } from "react";
 import { Handle, Position, useReactFlow } from "reactflow";
 import { WorkflowContext } from "../../context/WorkflowContext";
 import { camelCaseToTitleCase } from "@data-viz-tool/shared";
+import CustomHandle from "../handle/CustomHandle";
 
 const DefaultNode = ({ id, data, def, type, children }: any) => {
   const { deleteNodeById, edges, setEdges } = useContext(WorkflowContext);
@@ -57,7 +58,8 @@ const DefaultNode = ({ id, data, def, type, children }: any) => {
       }}
     >
       {def.inputs.map((input: any, index: any) => (
-        <Handle
+        <CustomHandle
+          nodeId={id}
           key={`input-${index}`}
           type="target"
           position={calculateHandlePosition(id, "target")}
@@ -125,7 +127,8 @@ const DefaultNode = ({ id, data, def, type, children }: any) => {
         </div>
       )}
       {def.outputs.map((output: any, index: any) => (
-        <Handle
+        <CustomHandle
+          nodeId={id}
           key={`output-${index}`}
           type="source"
           position={calculateHandlePosition(id, "source")}

diff --git a/packages/frontend/src/context/WorkflowContext.tsx b/packages/frontend/src/context/WorkflowContext.tsx
@@ -17,6 +17,7 @@ import {
   ReactFlowInstance,
   Edge,
   getConnectedEdges,
+  useUpdateNodeInternals,
 } from "reactflow";
 import "reactflow/dist/style.css";
 import {
@@ -92,6 +93,7 @@ const WorkflowProvider = ({ children }: any) => {
   const [executionStatus, setExecutionStatus] = useState<string | null>(null);
   const [workflowId, setWorkflowId] = useState<string>("");
   const [NodeConfigModalIsOpen, setNodeConfigModalIsOpen] = useState(false);
+  const updateNodeInternals = useUpdateNodeInternals();
 
   const openModal = () => {
     setNodeConfigModalIsOpen(true);
@@ -139,6 +141,7 @@ const WorkflowProvider = ({ children }: any) => {
   );
 
   const onDragOver = useCallback((event: React.DragEvent) => {
+    console.log("Dragover...");
     event.preventDefault();
     event.dataTransfer.dropEffect = "move";
   }, []);
@@ -408,6 +411,28 @@ const WorkflowProvider = ({ children }: any) => {
     });
   };
 
+  const getNodeById = useCallback(
+    (nodeId: string) => {
+      const node = nodes.find((node) => node.id === nodeId);
+      if (!node) {
+        console.warn(`Node with ID ${nodeId} not found.`);
+        return null;
+      }
+      return node;
+    },
+    [nodes]
+  );
+
+  const onNodeDragStop = (event: Event, node: any) => {
+    console.log("On node drag stop: ", event, node);
+    // const updatedEdges = edges.map((edge: any) => {
+    //   return {
+    //     ...edge,
+    //   };
+    // });
+    // setEdges(updatedEdges); // Trigger re-render of edges with updated handles
+  };
+
   return (
     <WorkflowContext.Provider
       value={{
@@ -456,6 +481,7 @@ const WorkflowProvider = ({ children }: any) => {
         NodeConfigModalIsOpen,
         openModal,
         closeModal,
+        onNodeDragStop,
       }}
     >
       {children}