Add Custom Line

frontend/src/components/Edges/Custom.js

@@ -18,7 +18,6 @@ export default function CustomEdge({
   targetY,
   sourcePosition,
   targetPosition,
-  style = {},
   markerEnd,
   data
 }) {
@@ -41,7 +40,7 @@ export default function CustomEdge({
     <>
       <path
         id={id}
-        style={style}
+        style={{stroke : "#00FF4A", strokeWidth : "6"}}
         className="react-flow__edge-path"
         d={edgePath}
         markerEnd={markerEnd}

frontend/src/components/Edges/CustomLine.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { getBezierPath } from 'react-flow-renderer';
+
+const CustomLine = ({
+  sourceX,
+  sourceY,
+  sourcePosition,
+  targetX,
+  targetY,
+  targetPosition,
+  connectionLineType,
+  connectionLineStyle,
+}) => {
+
+    const edgePath = getBezierPath({
+        sourceX,
+        sourceY,
+        sourcePosition,
+        targetX,
+        targetY,
+        targetPosition,
+    });
+  return (
+    <g>
+      <path
+        fill="none"
+        stroke="#00FF4A"
+        strokeWidth={7}
+        className="animated"
+        d={edgePath}
+      />
+    </g>
+  );
+};
+
+export default CustomLine;

frontend/src/components/ReactFlow/ReactFlowEnv.js

@@ -12,6 +12,7 @@ import ReactFlow, { Background,
 import React ,{ useState, useCallback, useRef, useEffect } from 'react';
 import Navbar from '../Navagation/navbar';
 import CustomEdge from '../Edges/Custom'
+import CustomLine from "../Edges/CustomLine.js";
 import { useThemeDetector } from '../../helper/visual'
 import {CgMoreVerticalAlt} from 'react-icons/cg'
 import {BsFillEraserFill} from 'react-icons/bs' 
@@ -165,7 +166,7 @@ export default function ReactEnviorment() {
           <ReactFlowProvider>
           <Navbar onDelete={deleteNodeContains} colour={JSON.parse(localStorage.getItem('colour'))} emoji={JSON.parse(localStorage.getItem('emoji'))}/>
             <div className="h-screen w-screen" ref={reactFlowWrapper}>
-              <ReactFlow nodes={nodes} edges={edges} nodeTypes={NODE} edgeTypes={EDGE} onNodesChange={onNodesChange} onNodesDelete={deleteNode} onEdgesChange={onEdgesChange} onEdgeUpdate={onEdgeUpdate} onConnect={onConnect} onDragOver={onDragOver} onDrop={onDrop} onInit={setReactFlowInstance}  fitView>
+              <ReactFlow nodes={nodes} edges={edges} nodeTypes={NODE} edgeTypes={EDGE} onNodesChange={onNodesChange} onNodesDelete={deleteNode} onEdgesChange={onEdgesChange} onEdgeUpdate={onEdgeUpdate} onConnect={onConnect} onDragOver={onDragOver} onDrop={onDrop} onInit={setReactFlowInstance} connectionLineComponent={CustomLine} fitView>
                 <Background variant='dots' size={1} className=" bg-white dark:bg-neutral-800"/>
                 <Controls/>
               </ReactFlow>