Added Basic flow for the application

src/components/flow/components/new.tsx

@@ -23,6 +23,11 @@ export const New: React.FC<any> = () => {
       key: "block",
       label: "Block",
       icon: <CodeBracketSquareIcon className="h-5 w-5 text-gray-400" />
+    },
+    {
+      key: "action_group",
+      label: "Action group",
+      icon: <CodeBracketSquareIcon className="h-5 w-5 text-gray-400" />
     }
   ];
   const [open, setOpen] = useState(false);
@@ -47,7 +52,7 @@ export const New: React.FC<any> = () => {
           onMouseOver={() => setOpen(true)}
           onMouseOut={() => setOpen(false)}
           className={
-            "absolute z-10000 mt-1 max-h-56 w-40 -left-16 overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
+            "absolute z-50 mt-1 max-h-56 w-40 -left-16 overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
           }
         >
           {options.map((item) => (

src/components/flow/edge/general.tsx

@@ -10,7 +10,7 @@ import {
   BaseEdge,
   EdgeLabelRenderer,
   EdgeProps,
-  getSmoothStepPath
+  getStraightPath
 } from "reactflow";
 
 // export default function CustomEdge() {
@@ -41,16 +41,14 @@ export const DefaultEdge: React.FC<EdgeProps> = ({
     }
   ];
   const [open, setOpen] = useState(false);
-  const [edgePath, labelX, labelY] = getSmoothStepPath({
+  const [edgePath, labelX, labelY] = getStraightPath({
     sourceX,
     sourceY,
     targetX,
-    targetY,
-    sourcePosition,
-    targetPosition
+    targetY
+    // sourcePosition,
+    // targetPosition
   });
-  console.log("edgePath", edgePath);
-  console.log("edgePath", `M`);
 
   return (
     <>

src/components/flow/edge/no.tsx

@@ -7,7 +7,6 @@ import {
 } from "reactflow";
 import { New } from "../components";
 
-// export default function CustomEdge() {
 export const NoEdge: React.FC<EdgeProps> = ({
   id,
   sourceX,
@@ -34,9 +33,8 @@ export const NoEdge: React.FC<EdgeProps> = ({
         <div
           style={{
             position: "absolute",
-            transform: `translate(-50%, -50%) translate(${targetX}px,${
-              sourceY + 40
-            }px)`,
+            transform: `translate(-50%, -50%) translate(${targetX}px,${sourceY + 40
+              }px)`,
             fontSize: 12,
             // everything inside EdgeLabelRenderer has no pointer events by default
             // if you have an interactive element, set pointer-events: all

src/components/flow/flow.tsx

@@ -154,7 +154,7 @@ let initNode = [
   },
   {
     id: "2",
-    // type: "actionNode",
+    type: "actionNode",
     position: {
       x: 0,
       y: 0
@@ -165,14 +165,47 @@ let initNode = [
   },
   {
     id: "3",
-    // type: "actionNode",
+    type: "actionNode",
     position: {
       x: 0,
       y: 0
     },
     data: {
       label: "actionNode 3"
     }
+  },
+  {
+    id: "4",
+    type: "conditionalNode",
+    position: {
+      x: 0,
+      y: 0
+    },
+    data: {
+      label: "actionNode 4"
+    }
+  },
+  {
+    id: "5",
+    type: "actionNode",
+    position: {
+      x: 0,
+      y: 0
+    },
+    data: {
+      label: "actionNode 5"
+    }
+  },
+  {
+    id: "6",
+    type: "actionNode",
+    position: {
+      x: 0,
+      y: 0
+    },
+    data: {
+      label: "actionNode 6 he how are you"
+    }
   }
 ];
 
@@ -191,6 +224,28 @@ let initEdge = [
 
     target: "3",
     source: "1"
+  },
+  {
+    id: "3->4",
+    type: "defaultE",
+
+    target: "4",
+    source: "3"
+  },
+  {
+    id: "4->5",
+    type: "yes",
+    target: "5",
+    sourceHandle: "yes",
+    source: "4"
+  },
+  {
+    id: "4->6",
+    type: "no",
+    sourceHandle: "no",
+
+    target: "6",
+    source: "4"
   }
 ];
 
@@ -216,10 +271,7 @@ export default function RFlow() {
       rankdir: "TB",
       ranker: "network-simplex",
       marginx: 30,
-      marginy: 30
-      //   height: 2000,
-      //   width: 2000,
-      //   align: "UL"
+      marginy: 20
     });
 
     const nodeWidth = 400;
@@ -230,10 +282,11 @@ export default function RFlow() {
     };
 
     nodes.forEach((node) => {
-      //   let t: string = node["type"];
-      //   let s: any = sizeMatrix[t] || { width: 172, height: 36 };
-      //   console.log("result", s);
-      dagreGraph.setNode(node.id, { width: nodeWidth, height: nodeHeight });
+      let t: string = node["type"];
+      let s: any = sizeMatrix[t] || { width: 172, height: 36 };
+      console.log("currect value of the width and height ", t, " - ", s);
+      s = { width: nodeWidth, height: nodeHeight };
+      dagreGraph.setNode(node.id, s);
     });
 
     edges.forEach((edge) => {

src/components/flow/node/action.tsx

@@ -19,7 +19,7 @@ export const ActionNode: React.FC<NodeProps> = ({ data, xPos, yPos }) => {
       />
       <div className="h-10 w-44 border-white bg-indigo-400 rounded-lg shadow-sm hover:shadow-md">
         <div className="self-center p-2 align-middle text-center">
-          [ {data?.payload?.type_field} ]
+          [ {data.label} ]{/* [ {data?.payload?.type_field} ] */}
         </div>
       </div>
 

src/components/flow/node/new.tsx

@@ -30,6 +30,11 @@ export const NewNode: React.FC<NodeProps> = ({ data, xPos, yPos }) => {
       key: "block",
       label: "Block",
       icon: <CodeBracketSquareIcon className="h-5 w-5 text-gray-400" />
+    },
+    {
+      key: "action_group",
+      label: "Action group",
+      icon: <CodeBracketSquareIcon className="h-5 w-5 text-gray-400" />
     }
   ];
   const [selected, setValueSelected] = useState({} as any);

src/index.css

@@ -2,3 +2,8 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+
+.react-flow__nodes {
+    z-index: -5 !important;
+}