From 79f0827b39f9acb100276e59d2d54370618a4bbb Mon Sep 17 00:00:00 2001
From: JGerla <jgerla61@gmail.com>
Date: Wed, 1 Oct 2025 10:55:24 +0200
Subject: [PATCH] feat: created new nodes and a default nodeType

added a type for defaultNodeData, this can house common data that all nodes should have. the other types can build on this defaultData. Also added an endNode and phaseNode to NodeDefinitions.tsx, together with a nodeData type for each new node type.

ref: N25B-114
---
 src/visualProgrammingUI/VisProgUI.tsx         | 18 +++++---
 .../components/NodeDefinitions.tsx            | 41 +++++++++++++++++--
 2 files changed, 49 insertions(+), 10 deletions(-)

diff --git a/src/visualProgrammingUI/VisProgUI.tsx b/src/visualProgrammingUI/VisProgUI.tsx
index ae526c6..48c987f 100644
--- a/src/visualProgrammingUI/VisProgUI.tsx
+++ b/src/visualProgrammingUI/VisProgUI.tsx
@@ -17,28 +17,34 @@ import {
     type Connection,
 } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
-import StartNode from "./components/NodeDefinitions.tsx";
+import {
+    StartNode,
+    EndNode,
+    PhaseNode
+} from "./components/NodeDefinitions.tsx";
 
 const nodeTypes = {
-    startNode: StartNode,
+    start: StartNode,
+    end: EndNode,
+    phase: PhaseNode,
 };
 
 const initialNodes = [
     {
         id: 'start',
-        type: 'startNode',
+        type: 'start',
         position: {x: 0, y: 0},
         data: {label: 'start'}
     },
     {
         id: 'genericPhase',
-        type: 'default',
+        type: 'phase',
         position: {x: 0, y: 150},
-        data: {label: 'Generic Phase'},
+        data: {label: 'Generic Phase', number: 1},
     },
     {
         id: 'end',
-        type: 'output',
+        type: 'end',
         position: {x: 0, y: 300},
         data: {label: 'End'}
     }
diff --git a/src/visualProgrammingUI/components/NodeDefinitions.tsx b/src/visualProgrammingUI/components/NodeDefinitions.tsx
index e9fc0b9..99ad1da 100644
--- a/src/visualProgrammingUI/components/NodeDefinitions.tsx
+++ b/src/visualProgrammingUI/components/NodeDefinitions.tsx
@@ -4,7 +4,17 @@ import '../VisProgUI.css';
 
 // Datatypes for NodeTypes
 
-type startNodeData = { label: string; };
+type defaultNodeData = {
+    label: string;
+};
+
+type startNodeData = defaultNodeData;
+type endNodeData = defaultNodeData;
+type phaseNodeData = defaultNodeData & {
+    number: number;
+};
+
+export type nodeData = defaultNodeData | startNodeData | phaseNodeData | endNodeData;
 
 // Definitions of Nodes
 
@@ -12,11 +22,34 @@ type startNodeData = { label: string; };
 export const StartNode= ({ data } : {data : startNodeData}) => {
     return (
         <>
-            <div>
-                <div className="default-node"> data test {data.label} </div>
+            <div className="default-node">
+                <div> data test {data.label} </div>
                 <Handle type="source" position={Position.Right} id="start" />
             </div>
         </>
     );
 };
-export default StartNode;
\ No newline at end of file
+
+
+export const EndNode= ({ data } : {data : endNodeData}) => {
+    return (
+        <>
+            <div className="default-node">
+                <div> {data.label} </div>
+                <Handle type="target" position={Position.Left} id="end" />
+            </div>
+        </>
+    );
+};
+
+export const PhaseNode= ({ data } : {data : phaseNodeData}) => {
+    return (
+        <>
+            <div className="default-node">
+                <div> phase {data.number} {data.label} </div>
+                <Handle type="target" position={Position.Left} id="target" />
+                <Handle type="source" position={Position.Right} id="source" />
+            </div>
+        </>
+    );
+};