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

style: reformated NodeDefinitions.tsx to be compliant with code standards

Browse Source 
ref: N25B-114
This commit is contained in:
JGerla
2025-10-09 17:00:16 +02:00
parent ece94b0b02
commit bd5887ed9f
1 changed files with 65 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -5,36 +5,36 @@ import '../VisProgUI.css';
// Datatypes for NodeTypes // Datatypes for NodeTypes
type defaultNodeData = { type defaultNodeData = {
label: string; label: string;
}; };
type startNodeData = defaultNodeData; type startNodeData = defaultNodeData;
type endNodeData = defaultNodeData; type endNodeData = defaultNodeData;
type normNodeData = defaultNodeData; type normNodeData = defaultNodeData;
type phaseNodeData = defaultNodeData & { type phaseNodeData = defaultNodeData & {
number: number; number: number;
}; };
export type nodeData = defaultNodeData | startNodeData | phaseNodeData | endNodeData; export type nodeData = defaultNodeData | startNodeData | phaseNodeData | endNodeData;
// 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>);
} }
@@ -43,80 +43,80 @@ export function Toolbar({nodeId, allowDelete}:ToolbarProps) {
// Start Node definition: // Start Node definition:
type StartNodeProps = { type StartNodeProps = {
id: string; id: string;
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>
</> </>
); );
}; };
// End node definition: // End node definition:
type EndNodeProps = { type EndNodeProps = {
id: string; id: string;
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>
</> </>
); );
}; };
// Phase node definition: // Phase node definition:
type PhaseNodeProps = { type PhaseNodeProps = {
id: string; id: string;
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>
</> </>
); );
}; };
// Norm node definition: // Norm node definition:
type NormNodeProps = { type NormNodeProps = {
id: string; id: string;
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>
</> </>
); );
}; };