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

feat: added ReactFlow-based node graph #11

Merged
j.gerla merged 68 commits from feat/visual-programming-interface into dev 2025-10-28 11:59:03 +00:00
Conversation 43 Commits 68 Files Changed 16 +7 -5
2 changed files with 7 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 0a4a3fb46c - Show all commits

10
src/visualProgrammingUI/VisProgUI.css
View File

@@ -1,6 +1,6 @@
.default-node { .default-node {
padding: 10px 15px; padding: 10px 15px;
background-color: white; background-color: canvas;
border-radius: 5pt; border-radius: 5pt;
outline: black solid 2pt; outline: black solid 2pt;
filter: drop-shadow(0 0 0.75rem black); filter: drop-shadow(0 0 0.75rem black);
@@ -8,7 +8,7 @@
.default-node__norm { .default-node__norm {
padding: 10px 15px; padding: 10px 15px;
background-color: white; background-color: canvas;
border-radius: 5pt; border-radius: 5pt;
outline: forestgreen solid 2pt; outline: forestgreen solid 2pt;
filter: drop-shadow(0 0 0.25rem forestgreen); filter: drop-shadow(0 0 0.25rem forestgreen);
@@ -16,7 +16,7 @@
.default-node__phase { .default-node__phase {
padding: 10px 15px; padding: 10px 15px;
background-color: white; background-color: canvas;
border-radius: 5pt; border-radius: 5pt;
outline: dodgerblue solid 2pt; outline: dodgerblue solid 2pt;
filter: drop-shadow(0 0 0.25rem dodgerblue); filter: drop-shadow(0 0 0.25rem dodgerblue);
@@ -24,7 +24,7 @@
.default-node__start { .default-node__start {
padding: 10px 15px; padding: 10px 15px;
background-color: white; background-color: canvas;
border-radius: 5pt; border-radius: 5pt;
outline: orange solid 2pt; outline: orange solid 2pt;
filter: drop-shadow(0 0 0.25rem orange); filter: drop-shadow(0 0 0.25rem orange);
@@ -32,7 +32,7 @@
.default-node__end { .default-node__end {
padding: 10px 15px; padding: 10px 15px;
background-color: white; background-color: canvas;
border-radius: 5pt; border-radius: 5pt;
outline: red solid 2pt; outline: red solid 2pt;
filter: drop-shadow(0 0 0.25rem red); filter: drop-shadow(0 0 0.25rem red);

2
src/visualProgrammingUI/VisProgUI.tsx
View File

@@ -13,6 +13,7 @@ import {
useEdgesState, useEdgesState,
reconnectEdge, reconnectEdge,
addEdge, addEdge,
MiniMap,
MarkerType, MarkerType,
type Edge, type Edge,
type Connection, type Connection,
@@ -110,6 +111,7 @@ const VisProgUI = ()=> {
proOptions={{hideAttribution: true }} proOptions={{hideAttribution: true }}
> >
<Controls /> <Controls />
<MiniMap />
<Background /> <Background />
</ReactFlow> </ReactFlow>
</div> </div>