Merge branch 'dev' into refactor/node-encapsulation

src/pages/VisProgPage/visualProgrammingUI/nodes/GoalNode.tsx

@@ -0,0 +1,78 @@
+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';
+
+/**
+ * The default data dot a Goal node
+ * @param label: the label of this Goal
+ * @param droppable: whether this node is droppable from the drop bar (initialized as true)
+ * @param children: ID's of children of this node
+ */
+export type GoalNodeData = {
+  label: string;
+  droppable: boolean;
+  GoalList: string[];
+  hasReduce: boolean;
+};
+
+
+
+export type GoalNode = Node<GoalNodeData>
+
+
+export function GoalNodeCanConnect(connection: Connection | Edge): boolean {
+  return (connection != undefined);
+}
+
+/**
+ * Defines how a Goal node should be rendered
+ * @param props NodeProps, like id, label, children
+ * @returns React.JSX.Element
+ */
+export default function GoalNode(props: NodeProps<Node>) {
+  const label_input_id = `Goal_${props.id}_label_input`;
+  const data = props.data as GoalNodeData;
+  return (
+    <>
+      <Toolbar nodeId={props.id} allowDelete={true}/>
+      <div className={`${styles.defaultNode} ${styles.nodeGoal}`}>
+        <div className={"flex-row gap-sm"}>
+          <label htmlFor={label_input_id}></label>
+          {props.data.label as string}
+        </div>
+        {data.GoalList.map((Goal) => (<div>{Goal}</div>))}
+        <Handle type="target" position={Position.Right} id="phase"/>
+      </div>
+    </>
+  );
+}
+
+/**
+ * Reduces each Goal, including its children down into its relevant data.
+ * @param props: The Node Properties of this node.
+ */
+export function GoalReduce(node: Node, nodes: Node[]) {
+  // Replace this for nodes functionality
+  if (nodes.length <= -1) { 
+    console.warn("Impossible nodes length in GoalReduce") 
+  } 
+  const data = node.data as GoalNodeData;
+    return {
+      label: data.label,
+      list: data.GoalList,
+    }
+}
+
+export function GoalConnects(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")
+  }
+}