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

feat: Added allowDelete param to nodeToolbar

Browse Source 
allowDelete lets developers decide if  a nodetype should be deletable and if not it disables the delete button in the nodeToolbar

ref: N25B-114
This commit is contained in:
JGerla
2025-10-08 10:27:34 +02:00
parent 705ff3ff2b
commit 07e1d84a62
1 changed files with 18 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -17,13 +17,14 @@ type phaseNodeData = defaultNodeData & {
export type nodeData = defaultNodeData | startNodeData | phaseNodeData | endNodeData; export type nodeData = defaultNodeData | startNodeData | phaseNodeData | endNodeData;
// Node Toolbar definition // Node Toolbar definition, contains node delete functionality
type ToolbarProps= { type ToolbarProps= {
nodeId: string; nodeId: string;
allowDelete: boolean;
}; };
export function Toolbar({nodeId}:ToolbarProps) { export function Toolbar({nodeId, allowDelete}:ToolbarProps) {
const { setNodes, setEdges } = useReactFlow(); const { setNodes, setEdges } = useReactFlow();
const handleDelete = () => { const handleDelete = () => {
@@ -32,13 +33,15 @@ export function Toolbar({nodeId}:ToolbarProps) {
}; };
return ( return (
<NodeToolbar > <NodeToolbar >
<button className="Node-toolbar__deletebutton" onClick={handleDelete}>delete</button> <button className="Node-toolbar__deletebutton" onClick={handleDelete} disabled={!allowDelete}>delete</button>
</NodeToolbar>); </NodeToolbar>);
} }
// Definitions of Nodes // Definitions of Nodes
// Start Node definition:
type StartNodeProps = { type StartNodeProps = {
id: string; id: string;
data: startNodeData; data: startNodeData;
@@ -47,7 +50,7 @@ type StartNodeProps = {
export const StartNode= ({ id, data }: StartNodeProps) => { export const StartNode= ({ id, data }: StartNodeProps) => {
return ( return (
<> <>
<Toolbar nodeId={id} /> <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" />
@@ -56,6 +59,9 @@ export const StartNode= ({ id, data }: StartNodeProps) => {
); );
}; };
// End node definition:
type EndNodeProps = { type EndNodeProps = {
id: string; id: string;
data: endNodeData; data: endNodeData;
@@ -64,7 +70,7 @@ type EndNodeProps = {
export const EndNode= ({ id, data }: EndNodeProps) => { export const EndNode= ({ id, data }: EndNodeProps) => {
return ( return (
<> <>
<Toolbar nodeId={id}/> <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" />
@@ -74,6 +80,8 @@ export const EndNode= ({ id, data }: EndNodeProps) => {
}; };
// Phase node definition:
type PhaseNodeProps = { type PhaseNodeProps = {
id: string; id: string;
data: phaseNodeData; data: phaseNodeData;
@@ -82,7 +90,7 @@ type PhaseNodeProps = {
export const PhaseNode= ({ id, data }: PhaseNodeProps) => { export const PhaseNode= ({ id, data }: PhaseNodeProps) => {
return ( return (
<> <>
<Toolbar nodeId={id}/> <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" />
@@ -93,6 +101,9 @@ export const PhaseNode= ({ id, data }: PhaseNodeProps) => {
); );
}; };
// Norm node definition:
type NormNodeProps = { type NormNodeProps = {
id: string; id: string;
data: normNodeData; data: normNodeData;
@@ -101,7 +112,7 @@ type NormNodeProps = {
export const NormNode= ({ id, data }: NormNodeProps) => { export const NormNode= ({ id, data }: NormNodeProps) => {
return ( return (
<> <>
<Toolbar nodeId={id} /> <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" />