pepperplus-ui/src/visualProgrammingUI/components/NodeDefinitions.tsx

import {Handle, NodeToolbar, Position, useReactFlow} from '@xyflow/react';
import '@xyflow/react/dist/style.css';
import '../VisProgUI.css';

// Datatypes for NodeTypes

type defaultNodeData = {
    label: string;
};

type startNodeData = defaultNodeData;
type endNodeData = defaultNodeData;
type normNodeData = defaultNodeData;
type phaseNodeData = defaultNodeData & {
    number: number;
};

export type nodeData = defaultNodeData | startNodeData | phaseNodeData | endNodeData;

// Node Toolbar definition, contains node delete functionality

type ToolbarProps= {
    nodeId: string;
    allowDelete: boolean;
};

export function Toolbar({nodeId, allowDelete}:ToolbarProps) {
    const { setNodes, setEdges } = useReactFlow();

    const handleDelete = () => {
        setNodes((nds) => nds.filter((n) => n.id !== nodeId));
        setEdges((eds) => eds.filter((e) => e.source !== nodeId && e.target !== nodeId));
    };
    return (
        <NodeToolbar >
            <button className="Node-toolbar__deletebutton" onClick={handleDelete} disabled={!allowDelete}>delete</button>
        </NodeToolbar>);
}


// Definitions of Nodes

// Start Node definition:

type StartNodeProps = {
    id: string;
    data: startNodeData;
};

export const StartNode= ({ id, data }: StartNodeProps) => {
    return (
        <>
            <Toolbar nodeId={id} allowDelete={false}/>
            <div className="default-node__start">
                <div> data test {data.label} </div>
                <Handle type="source" position={Position.Right} id="start" />
            </div>
        </>
    );
};


// End node definition:

type EndNodeProps = {
    id: string;
    data: endNodeData;
};

export const EndNode= ({ id, data }: EndNodeProps) => {
    return (
        <>
            <Toolbar nodeId={id} allowDelete={false}/>
            <div className="default-node__end">
                <div> {data.label} </div>
                <Handle type="target" position={Position.Left} id="end" />
            </div>
        </>
    );
};


// Phase node definition:

type PhaseNodeProps = {
    id: string;
    data: phaseNodeData;
};

export const PhaseNode= ({ id, data }: PhaseNodeProps) => {
    return (
        <>
            <Toolbar nodeId={id} allowDelete={true}/>
            <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" />
                <Handle type="source" position={Position.Right} id="source" />
            </div>
        </>
    );
};


// Norm node definition:

type NormNodeProps = {
    id: string;
    data: normNodeData;
};

export const NormNode= ({ id, data }: NormNodeProps) => {
    return (
        <>
            <Toolbar nodeId={id} allowDelete={true}/>
            <div className="default-node__norm">
                <div> Norm {data.label} </div>
                <Handle type="source" position={Position.Right} id="NormSource" />
            </div>
        </>
    );
};