chore: merge current dev into this branche

ref: N25B-189

src/pages/VisProgPage/visualProgrammingUI/components/DragDropSidebar.tsx

@@ -11,6 +11,8 @@ import {
 } from 'react';
 import useFlowStore from "../VisProgStores.tsx";
 import styles from "../../VisProg.module.css"
+import type {AppNode, PhaseNode, NormNode} from "../VisProgTypes.tsx";
+
 
 
 /**
@@ -68,28 +70,45 @@ function DraggableNode({className, children, nodeType, onDrop}: DraggableNodePro
 // eslint-disable-next-line react-refresh/only-export-components
 export function addNode(nodeType: string, position: XYPosition) {
   const {setNodes} = useFlowStore.getState();
-  const nds = useFlowStore.getState().nodes;
+  const nds : AppNode[] = useFlowStore.getState().nodes;
   const newNode = () => {
     switch (nodeType) {
       case "phase":
       {
-        const phaseNumber = nds.filter((node) => node.type === 'phase').length;
-        return {
+        const phaseNodes= nds.filter((node) => node.type === 'phase');
+        let phaseNumber;
+        if (phaseNodes.length > 0) {
+          const finalPhaseId : number = +(phaseNodes[phaseNodes.length - 1].id.split('-')[1]);
+          phaseNumber = finalPhaseId + 1;
+        } else {
+          phaseNumber = 1;
+        }
+        const phaseNode : PhaseNode = {
           id: `phase-${phaseNumber}`,
           type: nodeType,
           position,
           data: {label: 'new', number: phaseNumber},
-        };
+        }
+        return phaseNode;
       }
       case "norm":
       {
-        const normNumber = nds.filter((node) => node.type === 'norm').length;
-        return {
+        const normNodes= nds.filter((node) => node.type === 'norm');
+        let normNumber
+        if (normNodes.length > 0) {
+          const finalNormId : number = +(normNodes[normNodes.length - 1].id.split('-')[1]);
+          normNumber = finalNormId + 1;
+        } else {
+          normNumber = 1;
+        }
+
+        const normNode : NormNode = {
           id: `norm-${normNumber}`,
           type: nodeType,
           position,
-          data: {label: `new norm node`},
-        };
+          data: {label: `new norm node`, value: "Pepper should be formal"},
+        }
+        return normNode;
       }
       default: {
         throw new Error(`Node ${nodeType} not found`);

src/pages/VisProgPage/visualProgrammingUI/components/NodeDefinitions.tsx

@@ -1,32 +1,37 @@
-import {Handle, NodeToolbar, Position} from '@xyflow/react';
+import {
+  Handle,
+  type NodeProps,
+  NodeToolbar,
+  Position
+} from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
 import styles from '../../VisProg.module.css';
 import useFlowStore from "../VisProgStores.tsx";
+import type {
+  StartNode,
+  EndNode,
+  PhaseNode,
+  NormNode
+} from "../VisProgTypes.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
+//Toolbar definitions
 
 type ToolbarProps = {
   nodeId: string;
   allowDelete: boolean;
 };
 
+
+/**
+ * Node Toolbar definition:
+ * handles: node deleting functionality
+ * can be added to any custom node component as a React component
+ *
+ * @param {string} nodeId
+ * @param {boolean} allowDelete
+ * @returns {React.JSX.Element}
+ * @constructor
+ */
 export function Toolbar({nodeId, allowDelete}: ToolbarProps) {
   const {deleteNode} = useFlowStore();
 
@@ -39,21 +44,72 @@ export function Toolbar({nodeId, allowDelete}: ToolbarProps) {
     </NodeToolbar>);
 }
 
+// Renaming component
+
+/**
+ * Adds a component that can be used to edit a node's label entry inside its Data
+ * can be added to any custom node that has a label inside its Data
+ *
+ * @param {string} nodeLabel
+ * @param {string} nodeId
+ * @returns {React.JSX.Element}
+ * @constructor
+ */
+export function EditableName({nodeLabel = "new node", nodeId} : { nodeLabel : string, nodeId: string}) {
+  const {updateNodeData} = useFlowStore();
+
+  const updateData  = (event: React.FocusEvent<HTMLInputElement>) => {
+    const input = event.target.value;
+    updateNodeData(nodeId, {label: input});
+    event.currentTarget.setAttribute("readOnly", "true");
+    window.getSelection()?.empty();
+    event.currentTarget.classList.replace("nodrag", "drag"); // enable dragging of the node with cursor on the input box
+  };
+
+  const updateOnEnter = (event: React.KeyboardEvent<HTMLInputElement>) => { if (event.key === "Enter") (event.target as HTMLInputElement).blur(); };
+
+  const enableEditing = (event: React.MouseEvent<HTMLInputElement>) => {
+    if(event.currentTarget.hasAttribute("readOnly")) {
+      event.currentTarget.removeAttribute("readOnly"); // enable editing
+      event.currentTarget.select(); // select the text input
+      window.getSelection()?.collapseToEnd(); // move the caret to the end of the current value
+      event.currentTarget.classList.replace("drag", "nodrag"); // disable dragging using input box
+    }
+  }
+
+  return (
+    <div className={styles.NodeTextBar }>
+      <label>name: </label>
+      <input
+        className={`drag ${styles.nodeTextInput}`} // prevents dragging the component when user has focused the text input
+        type={"text"}
+        defaultValue={nodeLabel}
+        onKeyDown={updateOnEnter}
+        onBlur={updateData}
+        onClick={enableEditing}
+        maxLength={25}
+        readOnly
+      />
+    </div>
+  )
+}
+
 
 // Definitions of Nodes
 
-// Start Node definition:
-
-type StartNodeProps = {
-  id: string;
-  data: startNodeData;
-};
-
-export const StartNode = ({id, data}: StartNodeProps) => {
+/**
+ * Start Node definition:
+ *
+ * @param {string} id
+ * @param {defaultNodeData} data
+ * @returns {React.JSX.Element}
+ * @constructor
+ */
+export const StartNodeComponent = ({id, data}: NodeProps<StartNode>) => {
   return (
     <>
       <Toolbar nodeId={id} allowDelete={false}/>
-      <div className={styles.defaultNodeStart}>
+      <div className={`${styles.defaultNode} ${styles.nodeStart}`}>
         <div> data test {data.label} </div>
         <Handle type="source" position={Position.Right} id="start"/>
       </div>
@@ -62,18 +118,19 @@ export const StartNode = ({id, data}: StartNodeProps) => {
 };
 
 
-// End node definition:
-
-type EndNodeProps = {
-  id: string;
-  data: endNodeData;
-};
-
-export const EndNode = ({id, data}: EndNodeProps) => {
+/**
+ * End node definition:
+ *
+ * @param {string} id
+ * @param {defaultNodeData} data
+ * @returns {React.JSX.Element}
+ * @constructor
+ */
+export const EndNodeComponent = ({id, data}: NodeProps<EndNode>) => {
   return (
     <>
       <Toolbar nodeId={id} allowDelete={false}/>
-      <div className={styles.defaultNodeEnd}>
+      <div className={`${styles.defaultNode} ${styles.nodeEnd}`}>
         <div> {data.label} </div>
         <Handle type="target" position={Position.Left} id="end"/>
       </div>
@@ -82,19 +139,20 @@ export const EndNode = ({id, data}: EndNodeProps) => {
 };
 
 
-// Phase node definition:
-
-type PhaseNodeProps = {
-  id: string;
-  data: phaseNodeData;
-};
-
-export const PhaseNode = ({id, data}: PhaseNodeProps) => {
+/**
+ * Phase node definition:
+ *
+ * @param {string} id
+ * @param {defaultNodeData & {number: number}} data
+ * @returns {React.JSX.Element}
+ * @constructor
+ */
+export const PhaseNodeComponent = ({id, data}: NodeProps<PhaseNode>) => {
   return (
     <>
       <Toolbar nodeId={id} allowDelete={true}/>
-      <div className={styles.defaultNodePhase}>
-        <div> phase {data.number} {data.label} </div>
+      <div className={`${styles.defaultNode} ${styles.nodePhase}`}>
+        <EditableName nodeLabel={data.label} nodeId={id}/>
         <Handle type="target" position={Position.Left} id="target"/>
         <Handle type="target" position={Position.Bottom} id="norms"/>
         <Handle type="source" position={Position.Right} id="source"/>
@@ -104,19 +162,20 @@ export const PhaseNode = ({id, data}: PhaseNodeProps) => {
 };
 
 
-// Norm node definition:
-
-type NormNodeProps = {
-  id: string;
-  data: normNodeData;
-};
-
-export const NormNode = ({id, data}: NormNodeProps) => {
+/**
+ * Norm node definition:
+ *
+ * @param {string} id
+ * @param {defaultNodeData & {value: string}} data
+ * @returns {React.JSX.Element}
+ * @constructor
+ */
+export const NormNodeComponent = ({id, data}: NodeProps<NormNode>) => {
   return (
     <>
       <Toolbar nodeId={id} allowDelete={true}/>
-      <div className={styles.defaultNodeNorm}>
-        <div> Norm {data.label} </div>
+      <div className={`${styles.defaultNode} ${styles.nodeNorm}`}>
+        <EditableName nodeLabel={data.label} nodeId={id}/>
         <Handle type="source" position={Position.Right} id="NormSource"/>
       </div>
     </>