From 59a38a3a129136d279171e3a2e5efdbd6e071a50 Mon Sep 17 00:00:00 2001
From: JGerla <jgerla61@gmail.com>
Date: Wed, 8 Oct 2025 12:10:22 +0200
Subject: [PATCH] feat: Updated editor layout to make use of ReactFlow Panel
 Components

moved the draggable node collection inside the editor and attached it to a panel component inside the editor.

also modified the css by creating seperate classes for the draggable nodes inside the ui element

ref: N25B-114
---
 src/visualProgrammingUI/VisProgUI.css         | 40 +++++++++++++++++++
 src/visualProgrammingUI/VisProgUI.tsx         |  6 +--
 .../components/DragDropSidebar.tsx            | 18 +++++----
 3 files changed, 53 insertions(+), 11 deletions(-)

diff --git a/src/visualProgrammingUI/VisProgUI.css b/src/visualProgrammingUI/VisProgUI.css
index 099f977..936f478 100644
--- a/src/visualProgrammingUI/VisProgUI.css
+++ b/src/visualProgrammingUI/VisProgUI.css
@@ -36,4 +36,44 @@
     border-radius: 5pt;
     outline: red solid 2pt;
     filter: drop-shadow(0 0 0.25rem red);
+}
+
+.draggable-node {
+    padding: 3px 10px;
+    background-color: canvas;
+    border-radius: 5pt;
+    outline: black solid 2pt;
+    filter: drop-shadow(0 0 0.75rem black);
+}
+
+.draggable-node__norm {
+    padding: 3px 10px;
+    background-color: canvas;
+    border-radius: 5pt;
+    outline: forestgreen solid 2pt;
+    filter: drop-shadow(0 0 0.25rem forestgreen);
+}
+
+.draggable-node__phase {
+    padding: 3px 10px;
+    background-color: canvas;
+    border-radius: 5pt;
+    outline: dodgerblue solid 2pt;
+    filter: drop-shadow(0 0 0.25rem dodgerblue);
+}
+
+.draggable-node__start {
+    padding: 3px 10px;
+    background-color: canvas;
+    border-radius: 5pt;
+    outline: orange solid 2pt;
+    filter: drop-shadow(0 0 0.25rem orange);
+}
+
+.draggable-node__end {
+    padding: 3px 10px;
+    background-color: canvas;
+    border-radius: 5pt;
+    outline: red solid 2pt;
+    filter: drop-shadow(0 0 0.25rem red);
 }
\ No newline at end of file
diff --git a/src/visualProgrammingUI/VisProgUI.tsx b/src/visualProgrammingUI/VisProgUI.tsx
index 4e912c6..3fb2d52 100644
--- a/src/visualProgrammingUI/VisProgUI.tsx
+++ b/src/visualProgrammingUI/VisProgUI.tsx
@@ -104,8 +104,8 @@ const VisProgUI = ()=>  {
     }, [setEdges]);
 
     return (
-        <div style={{marginInline: 'auto',display: 'flex',justifySelf: 'center', padding:'10px', alignItems: 'center', width: '80vw', height: '60vh'}}>
-            <div style={{outlineStyle: 'solid', borderRadius: '10pt', marginInline: '1em',width: '70%', height:'100%' }}>
+        <div style={{marginInline: 'auto',display: 'flex',justifySelf: 'center', padding:'10px', alignItems: 'center', width: '80vw', height: '80vh'}}>
+            <div style={{outlineStyle: 'solid', borderRadius: '10pt',width: '90%', height:'100%' }}>
                 <ReactFlow
                     nodes={nodes}
                     edges={edges}
@@ -121,7 +121,7 @@ const VisProgUI = ()=>  {
                     fitView
                     proOptions={{hideAttribution: true }}
                 >
-                    <Panel position="center-right" style={{marginInlineStart: 'auto', marginInlineEnd:'0.5em',backgroundColor: 'canvas' ,marginBottom: 'auto', marginTop:'auto', width: '20%'}}>
+                    <Panel position="top-center" style={{marginInlineStart: 'auto', marginInlineEnd:'auto',backgroundColor: 'canvas' ,marginBottom: '0.5rem', marginTop:'auto', width: '50%', height:'7%'}}>
                         <Sidebar />
                     </Panel>
                     <Controls />
diff --git a/src/visualProgrammingUI/components/DragDropSidebar.tsx b/src/visualProgrammingUI/components/DragDropSidebar.tsx
index e0f590a..f1dc7d1 100644
--- a/src/visualProgrammingUI/components/DragDropSidebar.tsx
+++ b/src/visualProgrammingUI/components/DragDropSidebar.tsx
@@ -48,7 +48,7 @@ function DraggableNode({ className, children, nodeType, onDrop }: DraggableNodeP
     });
 
     return (
-        <div className={className === "default" ? "default-node" :  "default-node" + "__" + className} ref={draggableRef}>
+        <div className={className === "default" ? "draggable-node" :  "draggable-node" + "__" + className} ref={draggableRef}>
             {children}
         </div>
     );
@@ -120,16 +120,18 @@ export function Sidebar() {
     );
 
     return (
-        <aside style={{padding: '10px 10px',outline: '2.5pt solid black',borderRadius: '5pt', borderColor:'dimgrey',  display:'flex', flexDirection: 'column', gap: '1rem'}}>
+        <aside style={{padding: '10px 10px',outline: '2.5pt solid black',borderRadius: '0pt 0pt 5pt 5pt', borderColor:'dimgrey', backgroundColor:'canvas',  display:'flex', flexDirection: 'column', gap: '1rem'}}>
             <div className="description">
                 You can drag these nodes to the pane to create new nodes.
             </div>
-            <DraggableNode className="phase" nodeType="phase" onDrop={handleNodeDrop}>
-                phase Node
-            </DraggableNode>
-            <DraggableNode className="norm" nodeType="norm" onDrop={handleNodeDrop}>
-                norm Node
-            </DraggableNode>
+            <div className="DraggableNodeContainer" style={{backgroundColor:'canvas', display: 'flex', flexDirection: 'row', gap: '1rem', justifyContent: 'center'}}>
+                <DraggableNode className="phase" nodeType="phase" onDrop={handleNodeDrop}>
+                    phase Node
+                </DraggableNode>
+                <DraggableNode className="norm" nodeType="norm" onDrop={handleNodeDrop}>
+                    norm Node
+                </DraggableNode>
+            </div>
         </aside>
     );
 }
\ No newline at end of file