From e098ffebd6c3d2ec8c819d7cd6a41d137eb6c928 Mon Sep 17 00:00:00 2001
From: JGerla <jgerla61@gmail.com>
Date: Tue, 30 Sep 2025 16:13:48 +0200
Subject: [PATCH] feat: added a custom start node

Defined a basic start node; it does not contain any further functionality but does provide a basis for implementing future custom nodes.

ref: N25B-114
---
 src/main.tsx                                  |  2 +-
 .../VisProgUI.css                             |  0
 .../VisProgUI.tsx                             | 27 ++++++++++++++++---
 .../components/StartNode.tsx                  | 15 +++++++++++
 4 files changed, 40 insertions(+), 4 deletions(-)
 rename src/{VisualProgrammingUI => visualProgrammingUI}/VisProgUI.css (100%)
 rename src/{VisualProgrammingUI => visualProgrammingUI}/VisProgUI.tsx (79%)
 create mode 100644 src/visualProgrammingUI/components/StartNode.tsx

diff --git a/src/main.tsx b/src/main.tsx
index 9d67972..c2e7460 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -2,7 +2,7 @@ import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import './index.css'
 import App from './App.tsx'
-import VisualProgrammingUI from "./VisualProgrammingUI/VisProgUI.tsx";
+import VisualProgrammingUI from "./visualProgrammingUI/VisProgUI.tsx";
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
diff --git a/src/VisualProgrammingUI/VisProgUI.css b/src/visualProgrammingUI/VisProgUI.css
similarity index 100%
rename from src/VisualProgrammingUI/VisProgUI.css
rename to src/visualProgrammingUI/VisProgUI.css
diff --git a/src/VisualProgrammingUI/VisProgUI.tsx b/src/visualProgrammingUI/VisProgUI.tsx
similarity index 79%
rename from src/VisualProgrammingUI/VisProgUI.tsx
rename to src/visualProgrammingUI/VisProgUI.tsx
index 0df6a4c..d71af49 100644
--- a/src/VisualProgrammingUI/VisProgUI.tsx
+++ b/src/visualProgrammingUI/VisProgUI.tsx
@@ -17,13 +17,33 @@ import {
     type Connection,
 } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
+import StartNode from './components/StartNode.tsx';
 
+const nodeTypes = {
+    startNode: StartNode,
+};
 
 const initialNodes = [
-    {id: 'n1', position: {x: 0, y: 0}, data: {label: 'Start'}},
-    {id: 'n2', position: {x: 0, y: 100}, data: {label: 'End'}},
+    {
+        id: 'start',
+        type: 'startNode',
+        position: {x: 0, y: 0},
+        data: {label: 'Start'},
+    },
+    {
+        id: 'genericPhase',
+        type: 'default',
+        position: {x: 0, y: 150},
+        data: {label: 'Generic Phase'},
+    },
+    {
+        id: 'end',
+        type: 'output',
+        position: {x: 0, y: 300},
+        data: {label: 'End'}
+    }
 ];
-const initialEdges = [{id: 'n1-n2', source: 'n1', target: 'n2'}];
+const initialEdges = [{id: 'start-end', source: 'start', target: 'end'}];
 
 const defaultEdgeOptions = {
     type: 'floating',
@@ -70,6 +90,7 @@ const VisualProgrammingUI = ()=>  {
                 defaultEdgeOptions={defaultEdgeOptions}
                 onNodesChange={onNodesChange}
                 onEdgesChange={onEdgesChange}
+                nodeTypes={nodeTypes}
                 snapToGrid
                 onReconnect={onReconnect}
                 onReconnectStart={onReconnectStart}
diff --git a/src/visualProgrammingUI/components/StartNode.tsx b/src/visualProgrammingUI/components/StartNode.tsx
new file mode 100644
index 0000000..d92ede1
--- /dev/null
+++ b/src/visualProgrammingUI/components/StartNode.tsx
@@ -0,0 +1,15 @@
+import { Handle, Position } from '@xyflow/react';
+import '@xyflow/react/dist/style.css';
+
+// @ts-ignore
+export const StartNode = ({ data }) => {
+    return (
+        <>
+            <div>
+                <div style={{ padding: '10px 20px', backgroundColor: 'white', outlineStyle: 'solid', borderRadius: '5pt', outlineWidth: '1pt'}}> data test {data.label} </div>
+                <Handle type="source" position={Position.Right} id="start" />
+            </div>
+        </>
+    );
+};
+export default StartNode;
\ No newline at end of file