pepperplus/pepperplus-ui
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix: edge-disconnections-are-not-reflected-in-reduced-program

Browse Source
This commit is contained in:
Gerla, J. (Justin)
2025-12-14 21:56:18 +00:00
committed by JobvAlewijk
parent 8149d67491
commit 58ab95eee1
15 changed files with 639 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
src/pages/VisProgPage/visualProgrammingUI/VisProgStores.tsx
View File

@@ -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";
@@ -71,10 +76,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.
@@ -82,32 +102,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); }
},
/**
@@ -116,6 +120,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: () => {
@@ -128,11 +148,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 });
},