Added bootstrap support for FOR LOOP

src/components/flow/node/endloop.tsx

@@ -0,0 +1,58 @@
+import { XMarkIcon } from "@heroicons/react/24/outline";
+import { useState } from "react";
+import { NodeProps, Position, useEdges, useNodeId, useStore } from "reactflow";
+import CustomHandle from "../handler/test";
+
+const selector = (s: any) => ({
+  nodeInternals: s.nodeInternals,
+  edges: s.edges
+});
+
+export const EndLoopNode: React.FC<NodeProps> = ({ data, xPos, yPos }) => {
+  const [selected, setValueSelected] = useState({} as any);
+  const [open, setOpen] = useState(false);
+  const nodeId = useNodeId();
+  const useedges = useEdges();
+
+  const { nodeInternals } = useStore(selector);
+
+  const node = nodeInternals.get(nodeId);
+
+  return (
+    <>
+      <CustomHandle
+        type="target"
+        position={Position.Top}
+        connectionSize={1}
+        onConnect={(params) => console.log("handle onConnect", params)}
+        isConnectable={true}
+        isConnectableStart={false}
+      />
+      <div
+        className="relative rounded-full p-1 text-red-600 shadow-sm hover:shadow-md bg-red-100 font-bold"
+        onMouseOver={() => setOpen(true)}
+        onMouseOut={() => setOpen(false)}
+      >
+        <XMarkIcon width="20" height="20" className="self-center px-auto" />
+      </div>
+      <CustomHandle
+        id="continue"
+        type="source"
+        position={Position.Left}
+        connectionSize={1}
+        onConnect={(params) => console.log("handle onConnect", params)}
+        isConnectable={true}
+        isConnectableEnd={false}
+      />
+      <CustomHandle
+        id="end"
+        type="source"
+        position={Position.Bottom}
+        connectionSize={1}
+        onConnect={(params) => console.log("handle onConnect", params)}
+        isConnectable={true}
+        isConnectableEnd={false}
+      />
+    </>
+  );
+};

src/components/flow/node/loop.tsx

@@ -0,0 +1,48 @@
+import { useState } from "react";
+import { NodeProps, Position, useNodeId } from "reactflow";
+import CustomHandle from "../handler/test";
+
+export const LoopNode: React.FC<NodeProps> = ({ data, xPos, yPos }) => {
+  const [selected, setValueSelected] = useState({} as any);
+  const [open, setOpen] = useState(false);
+  const nodeId = useNodeId();
+  return (
+    <>
+      <CustomHandle
+        id="input"
+        type="target"
+        position={Position.Top}
+        connectionSize={1}
+        onConnect={(params) => console.log("handle onConnect", params)}
+        isConnectable={true}
+        isConnectableStart={false}
+      />
+      <div className="w-96 h-10 border-white bg-teal-100 rounded-lg shadow-sm hover:shadow-md">
+        <div className="self-center p-2 align-middle text-center ">
+          <h3 className=" text-ellipsis text-nowrap ">
+            [ Loop ] - {data?.payload?.name}
+          </h3>
+        </div>
+      </div>
+
+      <CustomHandle
+        id="continue"
+        type="target"
+        position={Position.Left}
+        connectionSize={1}
+        onConnect={(params) => console.log("handle onConnect", params)}
+        isConnectable={true}
+        isConnectableStart={false}
+      />
+
+      <CustomHandle
+        type="source"
+        position={Position.Bottom}
+        connectionSize={1}
+        onConnect={(params) => console.log("handle onConnect", params)}
+        isConnectable={true}
+        isConnectableEnd={false}
+      />
+    </>
+  );
+};

src/components/flow/node/new.tsx

@@ -17,8 +17,16 @@ const selector = (s: any) => ({
   edges: s.edges
 });
 
+interface Option {
+  key: string;
+  label: string;
+  icon: any;
+}
+
+type MyObject = { [key: string]: () => any };
+
 export const NewNode: React.FC<NodeProps> = ({ data, xPos, yPos }) => {
-  let options = [
+  const options: Array<Option> = [
     {
       key: "loop",
       label: "Loop",
@@ -30,8 +38,8 @@ export const NewNode: React.FC<NodeProps> = ({ data, xPos, yPos }) => {
       icon: <HashtagIcon className="h-5 w-5 text-gray-400" />
     },
     {
-      key: "block",
-      label: "Block",
+      key: "assertion",
+      label: "Assertion",
       icon: <CodeBracketSquareIcon className="h-5 w-5 text-gray-400" />
     },
     {
@@ -72,7 +80,7 @@ export const NewNode: React.FC<NodeProps> = ({ data, xPos, yPos }) => {
     } else {
       graph.forEach((item) => {
         if (item.children != undefined && item.children.length >= 0) {
-          let result = findAddNode(
+          const result = findAddNode(
             item.children,
             node,
             execution_order,
@@ -82,9 +90,10 @@ export const NewNode: React.FC<NodeProps> = ({ data, xPos, yPos }) => {
         }
       });
     }
+    setOpen(false);
     return false;
   };
-  const getNewNode = {
+  const getNewNode: MyObject = {
     action_group: () => {
       return {
         id: uuidv4(),
@@ -98,15 +107,41 @@ export const NewNode: React.FC<NodeProps> = ({ data, xPos, yPos }) => {
       };
     },
 
+    assertion: () => {
+      return {
+        id: uuidv4(),
+        execution_order: data.execution_order,
+        kind: "Reference",
+        type_field: "Assertion",
+        reference: uuidv4(),
+        parent_id: data.parent_id,
+        case_id: data.case_id,
+        children: []
+      };
+    },
+
+    loop: () => {
+      return {
+        id: uuidv4(),
+        execution_order: data.execution_order,
+        kind: "SelfReference",
+        type_field: "Loop",
+        reference: null,
+        parent_id: data.parent_id,
+        case_id: data.case_id,
+        children: []
+      };
+    },
+
     ifcondition: () => {
-      let condition_id = uuidv4();
+      const condition_id = uuidv4();
       return {
         id: condition_id,
         execution_order: data.execution_order,
         kind: "SelfReference",
         type_field: "Condition",
         reference: null,
-        parent_id: null,
+        parent_id: data.parent_id,
         case_id: data.case_id,
         children: [
           {
@@ -134,8 +169,8 @@ export const NewNode: React.FC<NodeProps> = ({ data, xPos, yPos }) => {
     }
   };
 
-  const addNode = (option: any) => {
-    let newNode: any = getNewNode.ifcondition();
+  const addNode = (option: Option) => {
+    const newNode: any = getNewNode[option.key]();
     findAddNode(graph, newNode, data.execution_order);
     setGraph(graph);
     console.log(graph);

src/components/flow/workflow.tsx

@@ -1,7 +1,8 @@
 import ReactFlow, { Background, BackgroundVariant } from "reactflow";
 
+import { useEffect } from "react";
 import "reactflow/dist/style.css";
-import { flowStateSelector, useFlowStore } from "stores/flow.store";
+import { RFState, useFlowStore } from "stores/flow.store";
 import { shallow } from "zustand/shallow";
 import { DefaultEdge } from "./edge";
 import { NoEdge } from "./edge/no";
@@ -10,13 +11,17 @@ import { WorkflowForm } from "./form";
 import { StartNode } from "./node";
 import { ActionNode } from "./node/action";
 import { ConditionalNode } from "./node/condition";
+import { EndLoopNode } from "./node/endloop";
+import { LoopNode } from "./node/loop";
 import { NewNode } from "./node/new";
 
 const nodeTypes = {
   newNode: NewNode,
   startNode: StartNode,
   actionNode: ActionNode,
-  conditionalNode: ConditionalNode
+  conditionalNode: ConditionalNode,
+  loop: LoopNode,
+  endloop: EndLoopNode
 };
 
 const edgeTypes = {
@@ -35,21 +40,20 @@ export const Workflow: React.FC<WorkflowParam> = ({
   ...restProps
 }) => {
   const getLayoutedElements = (nodes: Array<any>, edges: Array<any>): any => {};
-  const {
-    nodes,
-    edges,
-    onNodesChange,
-    onEdgesChange,
-    onConnect,
-    setNodes,
-    setEdges,
-    rearrangeNodePosition
-  } = useFlowStore(flowStateSelector, shallow);
-  // useEffect(() => {
-  //   setNodes(nodes as any);
-  //   setEdges(edges as any);
-  // }, [nodes, edges]);
-  rearrangeNodePosition();
+  const { nodes, edges } = useFlowStore(
+    (state: RFState) => ({
+      nodes: state.nodes,
+      edges: state.edges
+    }),
+    shallow
+  );
+  // debugger;
+  useEffect(() => {
+    useFlowStore.getState().rearrangeNodePosition();
+    return () => {
+      useFlowStore.getState().reset();
+    };
+  }, []);
   return (
     <div className="flex h-dvh w-full flex-row">
       <div className="basis-3/4 border border-indigo-500/20">