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 +65 -65
1 changed files with 65 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit bd5887ed9f - Show all commits

28
src/pages/VisProgPage/visualProgrammingUI/components/NodeDefinitions.tsx
View File

@@ -19,20 +19,20 @@ export type nodeData = defaultNodeData | startNodeData | phaseNodeData | endNode
// Node Toolbar definition, contains node delete functionality // Node Toolbar definition, contains node delete functionality
type ToolbarProps= { type ToolbarProps = {
nodeId: string; nodeId: string;
allowDelete: boolean; allowDelete: boolean;
}; };
export function Toolbar({nodeId, allowDelete}:ToolbarProps) { export function Toolbar({nodeId, allowDelete}: ToolbarProps) {
const { setNodes, setEdges } = useReactFlow(); const {setNodes, setEdges} = useReactFlow();
const handleDelete = () => { const handleDelete = () => {
setNodes((nds) => nds.filter((n) => n.id !== nodeId)); setNodes((nds) => nds.filter((n) => n.id !== nodeId));
setEdges((eds) => eds.filter((e) => e.source !== nodeId && e.target !== nodeId)); setEdges((eds) => eds.filter((e) => e.source !== nodeId && e.target !== nodeId));
}; };
return ( return (
<NodeToolbar > <NodeToolbar>
<button className="Node-toolbar__deletebutton" onClick={handleDelete} disabled={!allowDelete}>delete</button> <button className="Node-toolbar__deletebutton" onClick={handleDelete} disabled={!allowDelete}>delete</button>
</NodeToolbar>); </NodeToolbar>);
} }
@@ -47,13 +47,13 @@ type StartNodeProps = {
data: startNodeData; data: startNodeData;
}; };
export const StartNode= ({ id, data }: StartNodeProps) => { export const StartNode = ({id, data}: StartNodeProps) => {
return ( return (
<> <>
<Toolbar nodeId={id} allowDelete={false}/> <Toolbar nodeId={id} allowDelete={false}/>
<div className="default-node__start"> <div className="default-node__start">
<div> data test {data.label} </div> <div> data test {data.label} </div>
<Handle type="source" position={Position.Right} id="start" /> <Handle type="source" position={Position.Right} id="start"/>
</div> </div>
</> </>
); );
@@ -67,13 +67,13 @@ type EndNodeProps = {
data: endNodeData; data: endNodeData;
}; };
export const EndNode= ({ id, data }: EndNodeProps) => { export const EndNode = ({id, data}: EndNodeProps) => {
return ( return (
<> <>
<Toolbar nodeId={id} allowDelete={false}/> <Toolbar nodeId={id} allowDelete={false}/>
<div className="default-node__end"> <div className="default-node__end">
<div> {data.label} </div> <div> {data.label} </div>
<Handle type="target" position={Position.Left} id="end" /> <Handle type="target" position={Position.Left} id="end"/>
</div> </div>
</> </>
); );
@@ -87,15 +87,15 @@ type PhaseNodeProps = {
data: phaseNodeData; data: phaseNodeData;
}; };
export const PhaseNode= ({ id, data }: PhaseNodeProps) => { export const PhaseNode = ({id, data}: PhaseNodeProps) => {
return ( return (
<> <>
<Toolbar nodeId={id} allowDelete={true}/> <Toolbar nodeId={id} allowDelete={true}/>
<div className="default-node__phase"> <div className="default-node__phase">
<div> phase {data.number} {data.label} </div> <div> phase {data.number} {data.label} </div>
<Handle type="target" position={Position.Left} id="target" /> <Handle type="target" position={Position.Left} id="target"/>
<Handle type="target" position={Position.Bottom } id="norms" /> <Handle type="target" position={Position.Bottom} id="norms"/>
<Handle type="source" position={Position.Right} id="source" /> <Handle type="source" position={Position.Right} id="source"/>
</div> </div>
</> </>
); );
@@ -109,13 +109,13 @@ type NormNodeProps = {
data: normNodeData; data: normNodeData;
}; };
export const NormNode= ({ id, data }: NormNodeProps) => { export const NormNode = ({id, data}: NormNodeProps) => {
return ( return (
<> <>
<Toolbar nodeId={id} allowDelete={true}/> <Toolbar nodeId={id} allowDelete={true}/>
<div className="default-node__norm"> <div className="default-node__norm">
<div> Norm {data.label} </div> <div> Norm {data.label} </div>
<Handle type="source" position={Position.Right} id="NormSource" /> <Handle type="source" position={Position.Right} id="NormSource"/>
</div> </div>
</> </>
); );