From d0451f1795d0013b9888992321e06991cca9169a Mon Sep 17 00:00:00 2001 From: JGerla Date: Wed, 8 Oct 2025 16:37:59 +0200 Subject: [PATCH] style: updated comments and changed order of lines and fixed general inconsistencies in code-style ref: N25B-114 --- .../visualProgrammingUI/VisProgUI.tsx | 19 ++++++++----------- 1 file changed, 8 insertions(+), 11 deletions(-) diff --git a/src/pages/VisProgPage/visualProgrammingUI/VisProgUI.tsx b/src/pages/VisProgPage/visualProgrammingUI/VisProgUI.tsx index 8c449c5..323ad2f 100644 --- a/src/pages/VisProgPage/visualProgrammingUI/VisProgUI.tsx +++ b/src/pages/VisProgPage/visualProgrammingUI/VisProgUI.tsx @@ -1,13 +1,12 @@ import './VisProgUI.css' - import { Background, Controls, + Panel, ReactFlow, ReactFlowProvider, MarkerType, - Panel, } from '@xyflow/react'; import '@xyflow/react/dist/style.css'; import { @@ -15,17 +14,16 @@ import { EndNode, PhaseNode, NormNode -} from "./components/NodeDefinitions.tsx"; +} from './components/NodeDefinitions.tsx'; import { Sidebar } from './components/DragDropSidebar.tsx'; -import useFlowStore from "./VisProgStores.tsx"; -import {useShallow} from "zustand/react/shallow"; -import type {FlowState} from "./VisProgTypes.tsx"; +import useFlowStore from './VisProgStores.tsx'; +import {useShallow} from 'zustand/react/shallow'; +import type {FlowState} from './VisProgTypes.tsx'; // --| config starting params for flow |-- - const nodeTypes = { start: StartNode, end: EndNode, @@ -67,9 +65,9 @@ const VisProgUI = ()=> { nodes={nodes} edges={edges} defaultEdgeOptions={defaultEdgeOptions} + nodeTypes={nodeTypes} onNodesChange={onNodesChange} onEdgesChange={onEdgesChange} - nodeTypes={nodeTypes} onReconnect={onReconnect} onReconnectStart={onReconnectStart} onReconnectEnd={onReconnectEnd} @@ -85,16 +83,15 @@ const VisProgUI = ()=> { - - ); }; + /* --| 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, + * 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(){