src/visualProgrammingUI/components/NodeDefinitions.tsx

@@ -1,4 +1,4 @@
-import { Handle, Position } from '@xyflow/react';
+import {Handle, NodeToolbar, Position, useReactFlow} from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
 import '../VisProgUI.css';
 
@@ -16,12 +16,37 @@ type phaseNodeData = defaultNodeData & {
 
 export type nodeData = defaultNodeData | startNodeData | phaseNodeData | endNodeData;
 
+// Node Toolbar definition
+
+type ToolbarProps= {
+    nodeId: string;
+};
+
+export function Toolbar({nodeId}:ToolbarProps) {
+    const { setNodes, setEdges } = useReactFlow();
+
+    const handleDelete = () => {
+        setNodes((nds) => nds.filter((n) => n.id !== nodeId));
+        setEdges((eds) => eds.filter((e) => e.source !== nodeId && e.target !== nodeId));
+    };
+    return (
+        <NodeToolbar >
+            <button className="Node-toolbar__deletebutton" onClick={handleDelete}>delete</button>
+        </NodeToolbar>);
+}
+
+
 // Definitions of Nodes
 
+type StartNodeProps = {
+    id: string;
+    data: startNodeData;
+};
 
-export const StartNode= ({ data } : {data : startNodeData}) => {
+export const StartNode= ({ id, data }: StartNodeProps) => {
     return (
         <>
+            <Toolbar nodeId={id} />
             <div className="default-node">
                 <div> data test {data.label} </div>
                 <Handle type="source" position={Position.Right} id="start" />
@@ -30,10 +55,15 @@ export const StartNode= ({ data } : {data : startNodeData}) => {
     );
 };
 
+type EndNodeProps = {
+    id: string;
+    data: endNodeData;
+};
 
-export const EndNode= ({ data } : {data : endNodeData}) => {
+export const EndNode= ({ id, data }: EndNodeProps) => {
     return (
         <>
+            <Toolbar nodeId={id}/>
             <div className="default-node">
                 <div> {data.label} </div>
                 <Handle type="target" position={Position.Left} id="end" />
@@ -42,9 +72,16 @@ export const EndNode= ({ data } : {data : endNodeData}) => {
     );
 };
 
-export const PhaseNode= ({ data } : {data : phaseNodeData}) => {
+
+type PhaseNodeProps = {
+    id: string;
+    data: phaseNodeData;
+};
+
+export const PhaseNode= ({ id, data }: PhaseNodeProps) => {
     return (
         <>
+            <Toolbar nodeId={id}/>
             <div className="default-node">
                 <div> phase {data.number} {data.label} </div>
                 <Handle type="target" position={Position.Left} id="target" />
@@ -53,3 +90,4 @@ export const PhaseNode= ({ data } : {data : phaseNodeData}) => {
         </>
     );
 };
+