pepperplus/pepperplus-ui
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

refactor: reformated VisProgUI.tsx to be compliant with code standards

Browse Source 
some inline css was moved to VisProgUI.css

ref: N25B-114
This commit is contained in:
JGerla
2025-10-09 16:35:38 +02:00
parent d0451f1795
commit f6fcd20462
2 changed files with 112 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/pages/VisProgPage/visualProgrammingUI/VisProgUI.css
View File

@@ -1,3 +1,34 @@
/* 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;
margin-bottom: 0.5rem;
margin-top:auto;
width: 50%;
height:7%;
}
/* Node Styles */
.default-node {
padding: 10px 15px;
background-color: canvas;

150
src/pages/VisProgPage/visualProgrammingUI/VisProgUI.tsx
View File

@@ -1,22 +1,22 @@
import './VisProgUI.css'
import {
Background,
Controls,
Panel,
ReactFlow,
ReactFlowProvider,
MarkerType,
Background,
Controls,
Panel,
ReactFlow,
ReactFlowProvider,
MarkerType,
} from '@xyflow/react';
import '@xyflow/react/dist/style.css';
import {
StartNode,
EndNode,
PhaseNode,
NormNode
StartNode,
EndNode,
PhaseNode,
NormNode
} from './components/NodeDefinitions.tsx';
import { Sidebar } from './components/DragDropSidebar.tsx';
import {Sidebar} from './components/DragDropSidebar.tsx';
import useFlowStore from './VisProgStores.tsx';
import {useShallow} from 'zustand/react/shallow';
@@ -24,82 +24,94 @@ import type {FlowState} from './VisProgTypes.tsx';
// --| config starting params for flow |--
const nodeTypes = {
start: StartNode,
end: EndNode,
phase: PhaseNode,
norm: NormNode
/**
* contains the types of all nodes that are available in the editor
*/
const NODE_TYPES = {
start: StartNode,
end: EndNode,
phase: PhaseNode,
norm: NormNode
};
const defaultEdgeOptions = {
type: 'default',
markerEnd: {
type: MarkerType.ArrowClosed,
color: '#505050',
},
/**
* defines how the default edge looks inside the editor
*/
const DEFAULT_EDGE_OPTIONS = {
type: 'default',
markerEnd: {
type: MarkerType.ArrowClosed,
color: '#505050',
},
};
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
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 |--
const VisProgUI = ()=> {
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
const { nodes, edges, onNodesChange, onEdgesChange, onConnect, onReconnect, onReconnectStart, onReconnectEnd } = useFlowStore(
useShallow(selector),
);
return (
<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}
defaultEdgeOptions={defaultEdgeOptions}
nodeTypes={nodeTypes}
onNodesChange={onNodesChange}
onEdgesChange={onEdgesChange}
onReconnect={onReconnect}
onReconnectStart={onReconnectStart}
onReconnectEnd={onReconnectEnd}
onConnect={onConnect}
snapToGrid
fitView
proOptions={{hideAttribution: true }}
>
<Panel position="top-center" style={{marginInlineStart: 'auto', marginInlineEnd:'auto',backgroundColor: 'canvas' ,marginBottom: '0.5rem', marginTop:'auto', width: '50%', height:'7%'}}>
<Sidebar />
</Panel>
<Controls />
<Background />
</ReactFlow>
</div>
</div>
);
return (
<div className={'outer-editor-container'}>
<div className={'inner-editor-container'}>
<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={'dnd-panel'}>
<Sidebar/> {/* contains the drag and drop panel for nodes */}
</Panel>
<Controls/>
<Background/>
</ReactFlow>
</div>
</div>
);
};
/* --| Places the VisProgUI component inside a ReactFlowProvider
/**
* 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>
);
function VisualProgrammingUI() {
return (
<ReactFlowProvider>
<VisProgUI/>
</ReactFlowProvider>
);
}
export default VisualProgrammingUI;