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

feat: modified css styling for nodes to have different colors per type

Browse Source 
updated the nodes to have a different colour per NodeType, so it is easier to see what nodes are of what type in the graph.

ref: N25B-114
This commit is contained in:
JGerla
2025-10-02 12:43:44 +02:00
parent 7780878447
commit 70ebb16359
3 changed files with 44 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/visualProgrammingUI/components/NodeDefinitions.tsx
View File

@@ -48,7 +48,7 @@ export const StartNode= ({ id, data }: StartNodeProps) => {
return (
<>
<Toolbar nodeId={id} />
<div className="default-node">
<div className="default-node__start">
<div> data test {data.label} </div>
<Handle type="source" position={Position.Right} id="start" />
</div>
@@ -65,7 +65,7 @@ export const EndNode= ({ id, data }: EndNodeProps) => {
return (
<>
<Toolbar nodeId={id}/>
<div className="default-node">
<div className="default-node__end">
<div> {data.label} </div>
<Handle type="target" position={Position.Left} id="end" />
</div>
@@ -83,7 +83,7 @@ export const PhaseNode= ({ id, data }: PhaseNodeProps) => {
return (
<>
<Toolbar nodeId={id}/>
<div className="default-node">
<div className="default-node__phase">
<div> phase {data.number} {data.label} </div>
<Handle type="target" position={Position.Left} id="target" />
<Handle type="target" position={Position.Bottom } id="norms" />
@@ -102,7 +102,7 @@ export const NormNode= ({ id, data }: NormNodeProps) => {
return (
<>
<Toolbar nodeId={id} />
<div className="default-node">
<div className="default-node__norm">
<div> Norm {data.label} </div>
<Handle type="source" position={Position.Right} id="NormSource" />
</div>