124 lines
2.9 KiB
TypeScript
124 lines
2.9 KiB
TypeScript
import {Handle, NodeToolbar, Position} from '@xyflow/react';
|
|
import '@xyflow/react/dist/style.css';
|
|
import styles from '../../VisProg.module.css';
|
|
import useFlowStore from "../VisProgStores.tsx";
|
|
|
|
// Contains the datatypes for the data inside our NodeTypes
|
|
// this has to be improved or adapted to suit our implementation for computing the graph
|
|
// into a format that is useful for the Control Backend
|
|
|
|
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 {deleteNode} = useFlowStore();
|
|
|
|
const deleteParentNode = ()=> {
|
|
deleteNode(nodeId);
|
|
}
|
|
return (
|
|
<NodeToolbar>
|
|
<button className="Node-toolbar__deletebutton" onClick={deleteParentNode} 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={styles.defaultNodeStart}>
|
|
<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={styles.defaultNodeEnd}>
|
|
<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={styles.defaultNodePhase}>
|
|
<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={styles.defaultNodeNorm}>
|
|
<div> Norm {data.label} </div>
|
|
<Handle type="source" position={Position.Right} id="NormSource"/>
|
|
</div>
|
|
</>
|
|
);
|
|
}; |