refactor: moved delete logic out of the toolbar declaration and into the FlowStore.

BREAKING: changed type of FlowState

ref: N25B-114
This commit is contained in:
JGerla
2025-10-25 16:58:23 +02:00
parent c8484d28e5
commit 8c698d1f8e
3 changed files with 14 additions and 7 deletions

View File

@@ -1,6 +1,7 @@
import {Handle, NodeToolbar, Position, useReactFlow} from '@xyflow/react';
import {Handle, NodeToolbar, Position} from '@xyflow/react';
import '@xyflow/react/dist/style.css';
import styles from '../../VisProg.module.css';
import useFlowStore from "../VisProgStores.tsx";
// Contains the datatypes for the data inside our NodeTypes
// this has to be improved or adapted to suit our implementation for computing the graph
@@ -27,15 +28,14 @@ type ToolbarProps = {
};
export function Toolbar({nodeId, allowDelete}: ToolbarProps) {
const {setNodes, setEdges} = useReactFlow();
const {deleteNode} = useFlowStore();
const handleDelete = () => {
setNodes((nds) => nds.filter((n) => n.id !== nodeId));
setEdges((eds) => eds.filter((e) => e.source !== nodeId && e.target !== nodeId));
};
const deleteParentNode = ()=> {
deleteNode(nodeId);
}
return (
<NodeToolbar>
<button className="Node-toolbar__deletebutton" onClick={handleDelete} disabled={!allowDelete}>delete</button>
<button className="Node-toolbar__deletebutton" onClick={deleteParentNode} disabled={!allowDelete}>delete</button>
</NodeToolbar>);
}