Files
pepperplus-ui/src/pages/VisProgPage/visualProgrammingUI/nodes/NormNode.tsx

92 lines
2.5 KiB
TypeScript

import {
Handle,
type NodeProps,
Position,
type Connection,
type Edge,
type Node,
} from '@xyflow/react';
import { Toolbar } from '../components/NodeComponents';
import styles from '../../VisProg.module.css';
import { TextField } from '../../../../components/TextField';
import useFlowStore from '../VisProgStores';
/**
* The default data dot a phase node
* @param label: the label of this phase
* @param droppable: whether this node is droppable from the drop bar (initialized as true)
* @param norm: list of strings of norms for this node
* @param hasReduce: whether this node has reducing functionality (true by default)
*/
export type NormNodeData = {
label: string;
droppable: boolean;
norm: string;
hasReduce: boolean;
};
export type NormNode = Node<NormNodeData>
export function NormNodeCanConnect(connection: Connection | Edge): boolean {
return (connection != undefined);
}
/**
* Defines how a Norm node should be rendered
* @param props NodeProps, like id, label, children
* @returns React.JSX.Element
*/
export default function NormNode(props: NodeProps<Node>) {
const data = props.data as NormNodeData;
const {updateNodeData} = useFlowStore();
const text_input_id = `norm_${props.id}_text_input`;
const setValue = (value: string) => {
updateNodeData(props.id, {norm: value});
}
return <>
<Toolbar nodeId={props.id} allowDelete={true}/>
<div className={`${styles.defaultNode} ${styles.nodeNorm}`}>
<div className={"flex-row gap-sm"}>
<label htmlFor={text_input_id}>Norm :</label>
<TextField
id={text_input_id}
value={data.norm}
setValue={(val) => setValue(val)}
placeholder={"Pepper should ..."}
/>
</div>
<Handle type="source" position={Position.Right} id="norms"/>
</div>
</>;
};
/**
* Reduces each Norm, including its children down into its relevant data.
* @param props: The Node Properties of this node.
*/
export function NormReduce(node: Node, nodes: Node[]) {
// Replace this for nodes functionality
if (nodes.length <= -1) {
console.warn("Impossible nodes length in NormReduce")
}
const data = node.data as NormNodeData;
return {
id: node.id,
label: data.label,
norm: data.norm,
}
}
export function NormConnects(thisNode: Node, otherNode: Node, isThisSource: boolean) {
// Replace this for connection logic
if (thisNode == undefined && otherNode == undefined && isThisSource == false) {
console.warn("Impossible node connection called in EndConnects")
}
}