feat(flowManagerStore.ts): add flowManagerStore to manage nodes and edges in reactflow

The flowManagerStore.ts file is added to the src/frontend/src/stores directory. This file contains the implementation of a custom store called RFState, which manages the state of nodes and edges in a reactflow component. The store provides various functions and callbacks to manipulate and update the nodes and edges.

The RFState interface defines the structure of the store, including the nodes and edges arrays, as well as callbacks for handling changes to nodes and edges.

The useStore hook is created using the create function from the zustand library. It initializes the store with an empty nodes and edges array, and defines callbacks for handling changes to nodes, edges, and connections.

The setEdges and setNodes functions are used to update the nodes and edges arrays in the store.

The deleteNode function removes a node from the nodes array and any associated edges from the edges array.

The deleteEdge function removes an edge from the edges array.

This store can be used in components to access and manipulate the nodes and edges in a reactflow component.

src/frontend/src/stores/flowManagerStore.ts

@@ -0,0 +1,62 @@
+import {
+  Connection,
+  Edge,
+  EdgeChange,
+  Node,
+  NodeChange,
+  OnConnect,
+  OnEdgesChange,
+  OnNodesChange,
+  addEdge,
+  applyEdgeChanges,
+  applyNodeChanges,
+} from "reactflow";
+import { create } from "zustand";
+
+type RFState = {
+  nodes: Node[];
+  edges: Edge[];
+  onNodesChange: OnNodesChange;
+  onEdgesChange: OnEdgesChange;
+  onConnect: OnConnect;
+  setEdges: (edges: Edge[]) => void;
+  setNodes: (nodes: Node[]) => void;
+  deleteNode: (nodeId: string) => void;
+  deleteEdge: (edgeId: string) => void;
+};
+
+// this is our useStore hook that we can use in our components to get parts of the store and call actions
+const useStore = create<RFState>((set, get) => ({
+  nodes: [],
+  edges: [],
+  onNodesChange: (changes: NodeChange[]) => {
+    set({
+      nodes: applyNodeChanges(changes, get().nodes),
+    });
+  },
+  onEdgesChange: (changes: EdgeChange[]) => {
+    set({
+      edges: applyEdgeChanges(changes, get().edges),
+    });
+  },
+  onConnect: (connection: Connection) => {
+    set({
+      edges: addEdge(connection, get().edges),
+    });
+  },
+  setEdges: (edges) => set({ edges }),
+  setNodes: (nodes) => set({ nodes }),
+  deleteNode: (nodeId) => {
+    set({
+      nodes: get().nodes.filter((node) => node.id !== nodeId),
+      edges: get().edges.filter((edge) => edge.source !== nodeId),
+    });
+  },
+  deleteEdge: (edgeId) => {
+    set({
+      edges: get().edges.filter((edge) => edge.id !== edgeId),
+    });
+  },
+}));
+
+export default useStore;