reverse null state

shuja-shah-dev · Jun 14, 2024 · 6f1b818 · 6f1b818
1 parent 7d99ee6
commit 6f1b818
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 15 deletions.
diff --git a/flask/Temp/temp_image.jpg b/flask/Temp/temp_image.jpg
diff --git a/flask/Temp/temp_image_1.jpg b/flask/Temp/temp_image_1.jpg
diff --git a/flask/Temp/temp_image_2.jpg b/flask/Temp/temp_image_2.jpg
diff --git a/flask/Temp/temp_image_3.jpg b/flask/Temp/temp_image_3.jpg
diff --git a/src/renderer/Flow.js b/src/renderer/Flow.js
@@ -605,22 +605,42 @@ function Flow({ projectType }) {
     setUserInput(input);
   };
 
+  const handleRemoveEdge = useCallback(
+    (id, source, target) => {
+      setEdges((prevEdges) => prevEdges.filter((edge) => edge.id !== id));
+
+
+      const targetNode = nodes.find((node) => node.id === target);
+
+      if (!targetNode) {
+        return;
+      }
+      if (targetNode.type === 'outputNode') {
+        setFinalResult(null);
+      }
+    },
+    [setEdges],
+  );
+
   return (
     <>
       <div
         style={{
           width: '100vw',
           height: '450px',
-          fontFamily: 'Gilroy'
+          fontFamily: 'Gilroy',
           // backgroundColor: '#000',
         }}
         className="border  border-black "
-
       >
         <ReactFlow
           nodes={nodes}
           onNodesChange={onNodesChange}
-          edges={edges}
+          // edges={edges}
+          edges={edges.map((edge) => ({
+            ...edge,
+            data: { ...edge.data, handleRemoveEdge },
+          }))}
           onEdgesChange={onEdgesChange}
           onConnect={onConnect}
           nodeTypes={nodeTypes}

diff --git a/src/utils/customEdge.jsx b/src/utils/customEdge.jsx
@@ -1,12 +1,7 @@
 /* eslint-disable react/button-has-type */
 import React from 'react';
 import PropTypes from 'prop-types';
-import {
-  BezierEdge,
-  EdgeLabelRenderer,
-  getBezierPath,
-  useReactFlow,
-} from 'reactflow';
+import { BezierEdge, EdgeLabelRenderer, getBezierPath } from 'reactflow';
 import { X } from 'react-bootstrap-icons'; // Keep this import if you want to use the X icon from react-bootstrap-icons
 
 function CustomEdge(props) {
@@ -18,10 +13,9 @@ function CustomEdge(props) {
     targetY,
     sourcePosition,
     targetPosition,
+    data,
   } = props;
 
-  const { setEdges } = useReactFlow();
-
   const [edgePath, labelX, labelY] = getBezierPath({
     sourceX,
     sourceY,
@@ -38,9 +32,14 @@ function CustomEdge(props) {
         <button
           aria-label="Delete Edge"
           className="absolute text-red-500 transform -translate-x-1/2 -translate-y-1/2 z-10"
-          style={{ transform: `translate(${labelX}px, ${labelY}px)`, pointerEvents: 'all' }}
+          style={{
+            transform: `translate(${labelX}px, ${labelY}px)`,
+            pointerEvents: 'all',
+          }}
           onClick={() => {
-            setEdges((prevEdges) => prevEdges.filter((edge) => edge.id !== id));
+            if (data && data.handleRemoveEdge) {
+              data.handleRemoveEdge(id, props.source, props.target);
+            }
           }}
         >
           <X />
@@ -56,8 +55,13 @@ CustomEdge.propTypes = {
   sourceY: PropTypes.number.isRequired,
   targetX: PropTypes.number.isRequired,
   targetY: PropTypes.number.isRequired,
-  sourcePosition: PropTypes.oneOf(['top', 'right', 'bottom', 'left']).isRequired,
-  targetPosition: PropTypes.oneOf(['top', 'right', 'bottom', 'left']).isRequired,
+  sourcePosition: PropTypes.oneOf(['top', 'right', 'bottom', 'left'])
+    .isRequired,
+  targetPosition: PropTypes.oneOf(['top', 'right', 'bottom', 'left'])
+    .isRequired,
+  data: PropTypes.shape({
+    handleRemoveEdge: PropTypes.func,
+  }),
 };
 
 export default CustomEdge;