104 lines
2.8 KiB
TypeScript
104 lines
2.8 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';
|
|
|
|
/**
|
|
* 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 normList: 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;
|
|
normList: 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 label_input_id = `Norm_${props.id}_label_input`;
|
|
const data = props.data as NormNodeData;
|
|
return (
|
|
<>
|
|
<Toolbar nodeId={props.id} allowDelete={true}/>
|
|
<div className={`${styles.defaultNode} ${styles.nodeNorm}`}>
|
|
<div className={"flex-row gap-sm"}>
|
|
<label htmlFor={label_input_id}></label>
|
|
{props.data.label as string}
|
|
</div>
|
|
<div>
|
|
<Norms id={props.id} list={data.normList}/>
|
|
</div>
|
|
|
|
<Handle type="target" position={Position.Right} id="phase"/>
|
|
</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 {
|
|
label: data.label,
|
|
list: data.normList,
|
|
}
|
|
}
|
|
|
|
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")
|
|
}
|
|
}
|
|
|
|
function Norms(props: { id: string; list: string[] }) {
|
|
const { id, list } = props;
|
|
return (
|
|
<>
|
|
<span> The norms that the robot will uphold:</span>
|
|
{
|
|
list.map((norm, idx) => {
|
|
return (
|
|
<div key={`${id}_${idx}`} className={"flex-row gap-md"}>
|
|
<TextField
|
|
value={norm}
|
|
setValue={() => { return; }}
|
|
/>
|
|
</div>
|
|
);
|
|
})
|
|
}
|
|
</>
|
|
);
|
|
} |