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

feat: Updated editor layout to make use of ReactFlow Panel Components

Browse Source 
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
This commit is contained in:
JGerla
2025-10-08 12:10:22 +02:00
parent 987b5efc3e
commit 59a38a3a12
3 changed files with 53 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/visualProgrammingUI/VisProgUI.tsx
View File

@@ -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 />