src/visualProgrammingUI/components/NodeDefinitions.tsx

@@ -17,13 +17,14 @@ type phaseNodeData = defaultNodeData & {
 
 export type nodeData = defaultNodeData | startNodeData | phaseNodeData | endNodeData;
 
-// Node Toolbar definition
+// Node Toolbar definition, contains node delete functionality
 
 type ToolbarProps= {
     nodeId: string;
+    allowDelete: boolean;
 };
 
-export function Toolbar({nodeId}:ToolbarProps) {
+export function Toolbar({nodeId, allowDelete}:ToolbarProps) {
     const { setNodes, setEdges } = useReactFlow();
 
     const handleDelete = () => {
@@ -32,13 +33,15 @@ export function Toolbar({nodeId}:ToolbarProps) {
     };
     return (
         <NodeToolbar >
-            <button className="Node-toolbar__deletebutton" onClick={handleDelete}>delete</button>
+            <button className="Node-toolbar__deletebutton" onClick={handleDelete} disabled={!allowDelete}>delete</button>
         </NodeToolbar>);
 }
 
 
 // Definitions of Nodes
 
+// Start Node definition:
+
 type StartNodeProps = {
     id: string;
     data: startNodeData;
@@ -47,7 +50,7 @@ type StartNodeProps = {
 export const StartNode= ({ id, data }: StartNodeProps) => {
     return (
         <>
-            <Toolbar nodeId={id} />
+            <Toolbar nodeId={id} allowDelete={false}/>
             <div className="default-node__start">
                 <div> data test {data.label} </div>
                 <Handle type="source" position={Position.Right} id="start" />
@@ -56,6 +59,9 @@ export const StartNode= ({ id, data }: StartNodeProps) => {
     );
 };
 
+
+// End node definition:
+
 type EndNodeProps = {
     id: string;
     data: endNodeData;
@@ -64,7 +70,7 @@ type EndNodeProps = {
 export const EndNode= ({ id, data }: EndNodeProps) => {
     return (
         <>
-            <Toolbar nodeId={id}/>
+            <Toolbar nodeId={id} allowDelete={false}/>
             <div className="default-node__end">
                 <div> {data.label} </div>
                 <Handle type="target" position={Position.Left} id="end" />
@@ -74,6 +80,8 @@ export const EndNode= ({ id, data }: EndNodeProps) => {
 };
 
 
+// Phase node definition:
+
 type PhaseNodeProps = {
     id: string;
     data: phaseNodeData;
@@ -82,7 +90,7 @@ type PhaseNodeProps = {
 export const PhaseNode= ({ id, data }: PhaseNodeProps) => {
     return (
         <>
-            <Toolbar nodeId={id}/>
+            <Toolbar nodeId={id} allowDelete={true}/>
             <div className="default-node__phase">
                 <div> phase {data.number} {data.label} </div>
                 <Handle type="target" position={Position.Left} id="target" />
@@ -93,6 +101,9 @@ export const PhaseNode= ({ id, data }: PhaseNodeProps) => {
     );
 };
 
+
+// Norm node definition:
+
 type NormNodeProps = {
     id: string;
     data: normNodeData;
@@ -101,7 +112,7 @@ type NormNodeProps = {
 export const NormNode= ({ id, data }: NormNodeProps) => {
     return (
         <>
-            <Toolbar nodeId={id} />
+            <Toolbar nodeId={id} allowDelete={true}/>
             <div className="default-node__norm">
                 <div> Norm {data.label} </div>
                 <Handle type="source" position={Position.Right} id="NormSource" />