src/pages/VisProgPage/VisProg.module.css

@@ -1,4 +1,129 @@
-button.reset:hover {
-  background-color: yellow;
+/* editor UI */
+
+.outer-editor-container {
+    margin-inline: auto;
+    display: flex;
+    justify-self: center;
+    padding: 10px;
+    align-items: center;
+    width: 80vw;
+    height: 80vh;
+}
+
+.inner-editor-container {
+    outline-style: solid;
+    border-radius: 10pt;
+    width: 90%;
+    height: 100%;
+}
+
+
+
+
+
+.dnd-panel {
+    margin-inline-start: auto;
+    margin-inline-end: auto;
+    background-color: canvas;
+    align-content: center;
+    margin-bottom: 0.5rem;
+    margin-top:auto;
+    width: 50%;
+    height:7%;
+}
+
+.inner-dnd-panel {
+    outline: 2.5pt solid black;
+    border-radius: 0 0 5pt 5pt;
+    border-color: dimgrey;
+    background-color: canvas;
+    align-items: center;
+}
+
+.dnd-node-container {
+    background-color: canvas;
+    justify-content: center;
+}
+
+/* Node Styles */
+
+.default-node {
+    padding: 10px 15px;
+    background-color: canvas;
+    border-radius: 5pt;
+    outline: black solid 2pt;
+    filter: drop-shadow(0 0 0.75rem black);
+}
+
+.default-node-norm {
+    padding: 10px 15px;
+    background-color: canvas;
+    border-radius: 5pt;
+    outline: forestgreen solid 2pt;
+    filter: drop-shadow(0 0 0.25rem forestgreen);
+}
+
+.default-node-phase {
+    padding: 10px 15px;
+    background-color: canvas;
+    border-radius: 5pt;
+    outline: dodgerblue solid 2pt;
+    filter: drop-shadow(0 0 0.25rem dodgerblue);
+}
+
+.default-node-start {
+    padding: 10px 15px;
+    background-color: canvas;
+    border-radius: 5pt;
+    outline: orange solid 2pt;
+    filter: drop-shadow(0 0 0.25rem orange);
+}
+
+.default-node-end {
+    padding: 10px 15px;
+    background-color: canvas;
+    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);
 }
 

src/pages/VisProgPage/VisProg.tsx

@@ -1,14 +1,137 @@
-import VisProgUI from "./visualProgrammingUI/VisProgUI.tsx";
+import {
+  Background,
+  Controls,
+  Panel,
+  ReactFlow,
+  ReactFlowProvider,
+  MarkerType,
+} from '@xyflow/react';
+import '@xyflow/react/dist/style.css';
+import {useShallow} from 'zustand/react/shallow';
+
+import {
+  StartNode,
+  EndNode,
+  PhaseNode,
+  NormNode
+} from './visualProgrammingUI/components/NodeDefinitions.tsx';
+import {DndToolbar} from './visualProgrammingUI/components/DragDropSidebar.tsx';
+import useFlowStore from './visualProgrammingUI/VisProgStores.tsx';
+import type {FlowState} from './visualProgrammingUI/VisProgTypes.tsx';
+import styles from './VisProg.module.css'
+
+// --| config starting params for flow |--
+
+/**
+ * contains the types of all nodes that are available in the editor
+ */
+const NODE_TYPES = {
+  start: StartNode,
+  end: EndNode,
+  phase: PhaseNode,
+  norm: NormNode
+};
+
+/**
+ * defines how the default edge looks inside the editor
+ */
+const DEFAULT_EDGE_OPTIONS = {
+  type: 'default',
+  markerEnd: {
+    type: MarkerType.ArrowClosed,
+    color: '#505050',
+  },
+};
 
 
-//this is your css file where you can style your buttons and such
-//you can still use css parts from App.css, but also overwrite them
+/**
+ * defines what functions in the FlowState store map to which names,
+ * @param state
+ */
+const selector = (state: FlowState) => ({
+  nodes: state.nodes,
+  edges: state.edges,
+  onNodesChange: state.onNodesChange,
+  onEdgesChange: state.onEdgesChange,
+  onConnect: state.onConnect,
+  onReconnectStart: state.onReconnectStart,
+  onReconnectEnd: state.onReconnectEnd,
+  onReconnect: state.onReconnect
+});
+
+// --| define ReactFlow editor |--
+
+/**
+ * Defines the ReactFlow visual programming editor component
+ * any implementations of editor logic should be encapsulated where possible
+ * so the Component definition stays as readable as possible
+ * @constructor
+ */
+const VisProgUI = () => {
+  const {
+    nodes, edges,
+    onNodesChange,
+    onEdgesChange,
+    onConnect,
+    onReconnect,
+    onReconnectStart,
+    onReconnectEnd
+  } = useFlowStore(useShallow(selector)); // instructs the editor to use the corresponding functions from the FlowStore
+
+  return (
+    <div className={styles.outerEditorContainer}>
+      <div className={styles.innerEditorContainer}>
+        <ReactFlow
+          nodes={nodes}
+          edges={edges}
+          defaultEdgeOptions={DEFAULT_EDGE_OPTIONS}
+          nodeTypes={NODE_TYPES}
+          onNodesChange={onNodesChange}
+          onEdgesChange={onEdgesChange}
+          onReconnect={onReconnect}
+          onReconnectStart={onReconnectStart}
+          onReconnectEnd={onReconnectEnd}
+          onConnect={onConnect}
+          snapToGrid
+          fitView
+          proOptions={{hideAttribution: true}}
+        >
+          <Panel position="top-center" className={styles.dndPanel}>
+            <DndToolbar/> {/* contains the drag and drop panel for nodes */}
+          </Panel>
+          <Controls/>
+          <Background/>
+        </ReactFlow>
+      </div>
+    </div>
+  );
+};
 
 
+/**
+ * Places the VisProgUI component inside a ReactFlowProvider
+ *
+ * Wrapping the editor component inside a ReactFlowProvider
+ * allows us to access and interact with the components inside the editor, outside the editor definition,
+ * thus facilitating the addition of node specific functions inside their node definitions
+ */
+function VisualProgrammingUI() {
+  return (
+    <ReactFlowProvider>
+      <VisProgUI/>
+    </ReactFlowProvider>
+  );
+}
+
+/**
+ * houses the entire page, so also UI elements
+ * that are not a part of the Visual Programming UI
+ * @constructor
+ */
 function VisProgPage() {
   return (
     <>
-      <VisProgUI/>
+      <VisualProgrammingUI/>
     </>
   )
 }

src/pages/VisProgPage/visualProgrammingUI/VisProgUI.module.css

@@ -1,128 +0,0 @@
-/* editor UI */
-
-.outer-editor-container {
-    margin-inline: auto;
-    display: flex;
-    justify-self: center;
-    padding: 10px;
-    align-items: center;
-    width: 80vw;
-    height: 80vh;
-}
-
-.inner-editor-container {
-    outline-style: solid;
-    border-radius: 10pt;
-    width: 90%;
-    height: 100%;
-}
-
-
-
-
-
-.dnd-panel {
-    margin-inline-start: auto;
-    margin-inline-end: auto;
-    background-color: canvas;
-    align-content: center;
-    margin-bottom: 0.5rem;
-    margin-top:auto;
-    width: 50%;
-    height:7%;
-}
-
-.inner-dnd-panel {
-    outline: 2.5pt solid black;
-    border-radius: 0 0 5pt 5pt;
-    border-color: dimgrey;
-    background-color: canvas;
-    align-items: center;
-}
-
-.dnd-node-container {
-    background-color: canvas;
-    justify-content: center;
-}
-
-/* Node Styles */
-
-.default-node {
-    padding: 10px 15px;
-    background-color: canvas;
-    border-radius: 5pt;
-    outline: black solid 2pt;
-    filter: drop-shadow(0 0 0.75rem black);
-}
-
-.default-node-norm {
-    padding: 10px 15px;
-    background-color: canvas;
-    border-radius: 5pt;
-    outline: forestgreen solid 2pt;
-    filter: drop-shadow(0 0 0.25rem forestgreen);
-}
-
-.default-node-phase {
-    padding: 10px 15px;
-    background-color: canvas;
-    border-radius: 5pt;
-    outline: dodgerblue solid 2pt;
-    filter: drop-shadow(0 0 0.25rem dodgerblue);
-}
-
-.default-node-start {
-    padding: 10px 15px;
-    background-color: canvas;
-    border-radius: 5pt;
-    outline: orange solid 2pt;
-    filter: drop-shadow(0 0 0.25rem orange);
-}
-
-.default-node-end {
-    padding: 10px 15px;
-    background-color: canvas;
-    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);
-}

src/pages/VisProgPage/visualProgrammingUI/VisProgUI.tsx

@@ -1,126 +0,0 @@
-import {
-  Background,
-  Controls,
-  Panel,
-  ReactFlow,
-  ReactFlowProvider,
-  MarkerType,
-} from '@xyflow/react';
-import '@xyflow/react/dist/style.css';
-import {useShallow} from 'zustand/react/shallow';
-
-import {
-  StartNode,
-  EndNode,
-  PhaseNode,
-  NormNode
-} from './components/NodeDefinitions.tsx';
-import {DndToolbar} from './components/DragDropSidebar.tsx';
-import useFlowStore from './VisProgStores.tsx';
-import type {FlowState} from './VisProgTypes.tsx';
-import styles from './VisProgUI.module.css'
-
-// --| config starting params for flow |--
-
-/**
- * contains the types of all nodes that are available in the editor
- */
-const NODE_TYPES = {
-  start: StartNode,
-  end: EndNode,
-  phase: PhaseNode,
-  norm: NormNode
-};
-
-/**
- * defines how the default edge looks inside the editor
- */
-const DEFAULT_EDGE_OPTIONS = {
-  type: 'default',
-  markerEnd: {
-    type: MarkerType.ArrowClosed,
-    color: '#505050',
-  },
-};
-
-
-/**
- * defines what functions in the FlowState store map to which names,
- * @param state
- */
-const selector = (state: FlowState) => ({
-  nodes: state.nodes,
-  edges: state.edges,
-  onNodesChange: state.onNodesChange,
-  onEdgesChange: state.onEdgesChange,
-  onConnect: state.onConnect,
-  onReconnectStart: state.onReconnectStart,
-  onReconnectEnd: state.onReconnectEnd,
-  onReconnect: state.onReconnect
-});
-
-// --| define ReactFlow editor |--
-
-/**
- * Defines the ReactFlow visual programming editor component
- * any implementations of editor logic should be encapsulated where possible
- * so the Component definition stays as readable as possible
- * @constructor
- */
-const VisProgUI = () => {
-  const {
-    nodes, edges,
-    onNodesChange,
-    onEdgesChange,
-    onConnect,
-    onReconnect,
-    onReconnectStart,
-    onReconnectEnd
-  } = useFlowStore(useShallow(selector)); // instructs the editor to use the corresponding functions from the FlowStore
-
-  return (
-    <div className={styles.outerEditorContainer}>
-      <div className={styles.innerEditorContainer}>
-        <ReactFlow
-          nodes={nodes}
-          edges={edges}
-          defaultEdgeOptions={DEFAULT_EDGE_OPTIONS}
-          nodeTypes={NODE_TYPES}
-          onNodesChange={onNodesChange}
-          onEdgesChange={onEdgesChange}
-          onReconnect={onReconnect}
-          onReconnectStart={onReconnectStart}
-          onReconnectEnd={onReconnectEnd}
-          onConnect={onConnect}
-          snapToGrid
-          fitView
-          proOptions={{hideAttribution: true}}
-        >
-          <Panel position="top-center" className={styles.dndPanel}>
-            <DndToolbar/> {/* contains the drag and drop panel for nodes */}
-          </Panel>
-          <Controls/>
-          <Background/>
-        </ReactFlow>
-      </div>
-    </div>
-  );
-};
-
-
-/**
- * Places the VisProgUI component inside a ReactFlowProvider
- *
- * Wrapping the editor component inside a ReactFlowProvider
- * allows us to access and interact with the components inside the editor, outside the editor definition,
- * thus facilitating the addition of node specific functions inside their node definitions
- */
-function VisualProgrammingUI() {
-  return (
-    <ReactFlowProvider>
-      <VisProgUI/>
-    </ReactFlowProvider>
-  );
-}
-
-export default VisualProgrammingUI;

src/pages/VisProgPage/visualProgrammingUI/components/DragDropSidebar.tsx

@@ -9,7 +9,7 @@ import {
   useRef,
   useState
 } from 'react';
-import styles from "../VisProgUI.module.css"
+import styles from "../../VisProg.module.css"
 
 // Is used to make sure each subsequent node gets a unique id, so the ReactFlow implementation
 // can distinguish between different nodes.

src/pages/VisProgPage/visualProgrammingUI/components/NodeDefinitions.tsx

@@ -1,6 +1,6 @@
 import {Handle, NodeToolbar, Position, useReactFlow} from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
-import styles from '../VisProgUI.module.css';
+import styles from '../../VisProg.module.css';
 
 // Contains the datatypes for the data inside our NodeTypes
 // this has to be improved or adapted to suit our implementation for computing the graph