Merge branch 'dev' into feat/basic-belief-nodes

src/pages/VisProgPage/visualProgrammingUI/VisProgStores.tsx

@@ -9,7 +9,12 @@ import {
   type XYPosition,
 } from '@xyflow/react';
 import type { FlowState } from './VisProgTypes';
-import { NodeDefaults, NodeConnects, NodeDeletes } from './NodeRegistry';
+import {
+  NodeDefaults,
+  NodeConnections as NodeCs,
+  NodeDisconnections as NodeDs,
+  NodeDeletes
+} from './NodeRegistry';
 import { UndoRedo } from "./EditorUndoRedo.ts";
 
 
@@ -73,10 +78,25 @@ const useFlowStore = create<FlowState>(UndoRedo((set, get) => ({
    */
   onNodesChange: (changes) => set({nodes: applyNodeChanges(changes, get().nodes)}),
 
+  onEdgesDelete: (edges) => {
+
+    // we make sure any affected nodes get updated to reflect removal of edges
+    edges.forEach((edge) => {
+        const nodes = get().nodes;
+
+        const sourceNode = nodes.find((n) => n.id == edge.source);
+        const targetNode = nodes.find((n) => n.id == edge.target);
+
+        if (sourceNode) { NodeDs.Sources[sourceNode.type as keyof typeof NodeDs.Sources](sourceNode, edge.target); }
+        if (targetNode) { NodeDs.Targets[targetNode.type as keyof typeof NodeDs.Targets](targetNode, edge.source); }
+      });
+  },
   /**
    * Handles changes to edges triggered by ReactFlow.
    */
-  onEdgesChange: (changes) => set({ edges: applyEdgeChanges(changes, get().edges) }),
+  onEdgesChange: (changes) => {
+    set({ edges: applyEdgeChanges(changes, get().edges) })
+  },
 
   /**
    * Handles creating a new connection between nodes.
@@ -84,32 +104,16 @@ const useFlowStore = create<FlowState>(UndoRedo((set, get) => ({
    */
   onConnect: (connection) => {
     get().pushSnapshot();
+    set({edges: addEdge(connection, get().edges)});
 
-    const edges = addEdge(connection, get().edges);
+    // We make sure to perform any required data updates on the newly connected nodes
     const nodes = get().nodes;
-    // connection has: { source, sourceHandle, target, targetHandle }
-    // Let's find the source and target ID's.
+
     const sourceNode = nodes.find((n) => n.id == connection.source);
     const targetNode = nodes.find((n) => n.id == connection.target);
 
-    // In case the nodes weren't found, return basic functionality.
-    if ( sourceNode == undefined
-      || targetNode == undefined
-      || sourceNode.type == undefined
-      || targetNode.type == undefined
-    ){
-      set({ nodes, edges });
-      return;
-    }
-
-    // We should find out how their data changes by calling their respective functions.
-    const sourceConnectFunction = NodeConnects[sourceNode.type as keyof typeof NodeConnects]
-    const targetConnectFunction = NodeConnects[targetNode.type as keyof typeof NodeConnects]
-
-    // We're going to have to update their data based on how they want to update it.
-    sourceConnectFunction(sourceNode, targetNode, true)
-    targetConnectFunction(targetNode, sourceNode, false)
-    set({ nodes, edges });
+    if (sourceNode) { NodeCs.Sources[sourceNode.type as keyof typeof NodeCs.Sources](sourceNode, connection.target); }
+    if (targetNode) { NodeCs.Targets[targetNode.type as keyof typeof NodeCs.Targets](targetNode, connection.source); }
   },
 
   /**
@@ -118,6 +122,22 @@ const useFlowStore = create<FlowState>(UndoRedo((set, get) => ({
   onReconnect: (oldEdge, newConnection) => {
     get().edgeReconnectSuccessful = true;
     set({ edges: reconnectEdge(oldEdge, newConnection, get().edges) });
+
+    // We make sure to perform any required data updates on the newly reconnected nodes
+    const nodes = get().nodes;
+
+    const oldSourceNode = nodes.find((n) => n.id == oldEdge.source)!;
+    const oldTargetNode = nodes.find((n) => n.id == oldEdge.target)!;
+    const newSourceNode = nodes.find((n) => n.id == newConnection.source)!;
+    const newTargetNode = nodes.find((n) => n.id == newConnection.target)!;
+
+    if (oldSourceNode === newSourceNode && oldTargetNode === newTargetNode) return;
+
+    NodeCs.Sources[newSourceNode.type as keyof typeof NodeCs.Sources](newSourceNode, newConnection.target);
+    NodeCs.Targets[newTargetNode.type as keyof typeof NodeCs.Targets](newTargetNode, newConnection.source);
+
+    NodeDs.Sources[oldSourceNode.type as keyof typeof NodeDs.Sources](oldSourceNode, oldEdge.target);
+    NodeDs.Targets[oldTargetNode.type as keyof typeof NodeDs.Targets](oldTargetNode, oldEdge.source);
   },
 
   onReconnectStart: () => {
@@ -130,11 +150,21 @@ const useFlowStore = create<FlowState>(UndoRedo((set, get) => ({
    * if it is not reconnected to a node after detaching it
    *
    * @param _evt - the event
-   * @param {{id: string}} edge - the described edge
+   * @param edge - the described edge
    */
   onReconnectEnd: (_evt, edge) => {
     if (!get().edgeReconnectSuccessful) {
+      // delete the edge from the flowState
       set({ edges: get().edges.filter((e) => e.id !== edge.id) });
+
+      // update node data to reflect the dropped edge
+      const nodes = get().nodes;
+
+      const sourceNode = nodes.find((n) => n.id == edge.source)!;
+      const targetNode = nodes.find((n) => n.id == edge.target)!;
+
+      NodeDs.Sources[sourceNode.type as keyof typeof NodeDs.Sources](sourceNode, edge.target);
+      NodeDs.Targets[targetNode.type as keyof typeof NodeDs.Targets](targetNode, edge.source);
     }
     set({ edgeReconnectSuccessful: true });
   },