Merge remote-tracking branch 'origin/dev' into feat/save-load-nodes

src/pages/VisProgPage/VisProg.tsx

@@ -8,31 +8,15 @@ import {
 } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
 import {useShallow} from 'zustand/react/shallow';
-
-import {
-  StartNodeComponent,
-  EndNodeComponent,
-  PhaseNodeComponent,
-  NormNodeComponent
-} from './visualProgrammingUI/components/NodeDefinitions.tsx';
 import {DndToolbar} from './visualProgrammingUI/components/DragDropSidebar.tsx';
-import graphReducer from "./visualProgrammingUI/GraphReducer.ts";
 import useFlowStore from './visualProgrammingUI/VisProgStores.tsx';
 import type {FlowState} from './visualProgrammingUI/VisProgTypes.tsx';
 import styles from './VisProg.module.css'
+import { NodeReduces, NodeTypes } from './visualProgrammingUI/NodeRegistry.ts';
 import SaveLoadPanel from './visualProgrammingUI/components/SaveLoadPanel.tsx';
 
 // --| config starting params for flow |--
 
-/**
- * contains the types of all nodes that are available in the editor
- */
-const NODE_TYPES = {
-  start: StartNodeComponent,
-  end: EndNodeComponent,
-  phase: PhaseNodeComponent,
-  norm: NormNodeComponent
-};
 
 /**
  * defines how the default edge looks inside the editor
@@ -81,38 +65,37 @@ const VisProgUI = () => {
   } = 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 */}
+    <div className={`${styles.innerEditorContainer} round-lg border-lg`}>
+      <ReactFlow
+        nodes={nodes}
+        edges={edges}
+        defaultEdgeOptions={DEFAULT_EDGE_OPTIONS}
+        nodeTypes={NodeTypes}
+        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>
           <Panel position = "bottom-left" className={styles.saveLoadPanel}>
             <SaveLoadPanel></SaveLoadPanel>
-            </Panel>
-          <Controls/>
-          <Background/>
-        </ReactFlow>
-      </div>
+          </Panel>
+        <Controls/>
+        <Background/>
+      </ReactFlow>
     </div>
   );
 };
 
 
+
 /**
  * Places the VisProgUI component inside a ReactFlowProvider
  *
@@ -132,6 +115,20 @@ function VisualProgrammingUI() {
 function runProgram() {
   const program = graphReducer();
   console.log(program);
+  console.log(JSON.stringify(program, null, 2));
+}
+
+/**
+ * Reduces the graph into its phases' information and recursively calls their reducing function
+ */ 
+function graphReducer() {
+  const { nodes } = useFlowStore.getState();
+  return nodes
+    .filter((n) => n.type == 'phase')
+    .map((n) => {
+      const reducer = NodeReduces['phase'];
+      return reducer(n, nodes)
+    }); 
 }
 
 /**
@@ -148,4 +145,4 @@ function VisProgPage() {
   )
 }
 
-export default VisProgPage
+export default VisProgPage