Make nodes editable: norms, goals and keyword triggers

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

@@ -11,7 +11,7 @@ import {
 } from 'react';
 import useFlowStore from "../VisProgStores.tsx";
 import styles from "../../VisProg.module.css"
-import type {AppNode, PhaseNode, NormNode} from "../VisProgTypes.tsx";
+import type {AppNode, PhaseNode, NormNode, GoalNode, TriggerNode} from "../VisProgTypes.tsx";
 
 
 
@@ -106,10 +106,48 @@ export function addNode(nodeType: string, position: XYPosition) {
           id: `norm-${normNumber}`,
           type: nodeType,
           position,
-          data: {label: `new norm node`, value: "Pepper should be formal"},
+          data: {label: `new norm node`, value: ""},
         }
         return normNode;
       }
+      case "goal":
+      {
+        const goalNodes= nds.filter((node) => node.type === 'goal');
+        let goalNumber
+        if (goalNodes.length > 0) {
+          const finalGoalId : number = +(goalNodes[goalNodes.length - 1].id.split('-')[1]);
+          goalNumber = finalGoalId + 1;
+        } else {
+          goalNumber = 1;
+        }
+
+        const goalNode : GoalNode = {
+          id: `goal-${goalNumber}`,
+          type: nodeType,
+          position,
+          data: {label: `new goal node`, description: "", achieved: false},
+        }
+        return goalNode;
+      }
+      case "trigger":
+      {
+        const triggerNodes= nds.filter((node) => node.type === 'trigger');
+        let triggerNumber
+        if (triggerNodes.length > 0) {
+          const finalGoalId : number = +(triggerNodes[triggerNodes.length - 1].id.split('-')[1]);
+          triggerNumber = finalGoalId + 1;
+        } else {
+          triggerNumber = 1;
+        }
+
+        const triggerNode : TriggerNode = {
+          id: `trigger-${triggerNumber}`,
+          type: nodeType,
+          position,
+          data: {label: `new trigger node`, type: "keywords", value: []},
+        }
+        return triggerNode;
+      }
       default: {
         throw new Error(`Node ${nodeType} not found`);
       }
@@ -161,6 +199,12 @@ export function DndToolbar() {
         <DraggableNode className={styles.draggableNodeNorm} nodeType="norm" onDrop={handleNodeDrop}>
           norm Node
         </DraggableNode>
+        <DraggableNode className={styles.draggableNodeGoal} nodeType="goal" onDrop={handleNodeDrop}>
+          goal Node
+        </DraggableNode>
+        <DraggableNode className={styles.draggableNodeTrigger} nodeType="trigger" onDrop={handleNodeDrop}>
+          trigger Node
+        </DraggableNode>
       </div>
     </div>
   );

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

@@ -11,8 +11,9 @@ import type {
   StartNode,
   EndNode,
   PhaseNode,
-  NormNode
+  NormNode, GoalNode
 } from "../VisProgTypes.tsx";
+import {TextField} from "../../../../components/TextField.tsx";
 
 //Toolbar definitions
 
@@ -44,56 +45,6 @@ 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
 
@@ -148,11 +99,25 @@ export const EndNodeComponent = ({id, data}: NodeProps<EndNode>) => {
  * @constructor
  */
 export const PhaseNodeComponent = ({id, data}: NodeProps<PhaseNode>) => {
+  const {updateNodeData} = useFlowStore();
+
+  const updateLabel = (value: string) => updateNodeData(id, {...data, label: value});
+
+  const label_input_id = `phase_${id}_label_input`;
+
   return (
     <>
       <Toolbar nodeId={id} allowDelete={true}/>
       <div className={`${styles.defaultNode} ${styles.nodePhase}`}>
-        <EditableName nodeLabel={data.label} nodeId={id}/>
+        <div className={"flex-row gap-sm"}>
+          <label htmlFor={label_input_id}>Name:</label>
+          <TextField
+            id={label_input_id}
+            value={data.label}
+            setValue={updateLabel}
+            placeholder={"Phase ..."}
+          />
+        </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"/>
@@ -167,17 +132,69 @@ export const PhaseNodeComponent = ({id, data}: NodeProps<PhaseNode>) => {
  *
  * @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.defaultNode} ${styles.nodeNorm}`}>
-        <EditableName nodeLabel={data.label} nodeId={id}/>
-        <Handle type="source" position={Position.Right} id="NormSource"/>
+  const {updateNodeData} = useFlowStore();
+
+  const text_input_id = `norm_${id}_text_input`;
+
+  const setValue = (value: string) => {
+    updateNodeData(id, {value: value});
+  }
+
+  return <>
+    <Toolbar nodeId={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.value}
+          setValue={(val) => setValue(val)}
+          placeholder={"Pepper should ..."}
+        />
       </div>
-    </>
-  );
-};
+      <Handle type="source" position={Position.Right} id="NormSource"/>
+    </div>
+  </>;
+};
+
+export const GoalNodeComponent = ({id, data}: NodeProps<GoalNode>) => {
+  const {updateNodeData} = useFlowStore();
+
+  const text_input_id = `goal_${id}_text_input`;
+  const checkbox_id = `goal_${id}_checkbox`;
+
+  const setDescription = (value: string) => {
+    updateNodeData(id, {...data, description: value});
+  }
+
+  const setAchieved = (value: boolean) => {
+    updateNodeData(id, {...data, achieved: value});
+  }
+
+  return <>
+    <Toolbar nodeId={id} allowDelete={true}/>
+    <div className={`${styles.defaultNode} ${styles.nodeGoal} flex-col gap-sm`}>
+      <div className={"flex-row gap-md"}>
+        <label htmlFor={text_input_id}>Goal:</label>
+        <TextField
+          id={text_input_id}
+          value={data.description}
+          setValue={(val) => setDescription(val)}
+          placeholder={"To ..."}
+        />
+      </div>
+      <div className={"flex-row gap-md align-center"}>
+        <label htmlFor={checkbox_id}>Achieved:</label>
+        <input
+          id={checkbox_id}
+          type={"checkbox"}
+          value={data.achieved ? "checked" : ""}
+          onChange={(e) => setAchieved(e.target.checked)}
+        />
+      </div>
+      <Handle type="source" position={Position.Right} id="GoalSource"/>
+    </div>
+  </>;
+}

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

@@ -0,0 +1,121 @@
+import {Handle, type NodeProps, Position} from "@xyflow/react";
+import type {TriggerNode} from "../VisProgTypes.tsx";
+import useFlowStore from "../VisProgStores.tsx";
+import styles from "../../VisProg.module.css";
+import {RealtimeTextField, TextField} from "../../../../components/TextField.tsx";
+import {Toolbar} from "./NodeDefinitions.tsx";
+import {useState} from "react";
+import duplicateIndices from "../../../../utils/duplicateIndices.ts";
+
+export type EmotionTriggerNodeProps = {
+  type: "emotion";
+  value: string;
+}
+
+type Keyword = { id: string, keyword: string };
+
+export type KeywordTriggerNodeProps = {
+  type: "keywords";
+  value: Keyword[];
+}
+
+export type TriggerNodeProps = EmotionTriggerNodeProps | KeywordTriggerNodeProps;
+
+function KeywordAdder({ addKeyword }: { addKeyword: (keyword: string) => void }) {
+  const [input, setInput] = useState("");
+
+  const text_input_id = "keyword_adder_input";
+
+  return <div className={"flex-row gap-md"}>
+    <label htmlFor={text_input_id}>New Keyword:</label>
+    <RealtimeTextField
+      id={text_input_id}
+      value={input}
+      setValue={setInput}
+      onCommit={() => {
+        if (!input) return;
+        addKeyword(input);
+        setInput("");
+      }}
+      placeholder={"..."}
+      className={"flex-1"}
+    />
+  </div>;
+}
+
+function Keywords({
+  keywords,
+  setKeywords,
+}: {
+  keywords: Keyword[];
+  setKeywords: (keywords: Keyword[]) => void;
+}) {
+  type Interpolatable = string | number | boolean | bigint | null | undefined;
+
+  const inputElementId = (id: Interpolatable) => `keyword_${id}_input`;
+
+  /** Indices of duplicates in the keyword array. */
+  const [duplicates, setDuplicates] = useState<number[]>([]);
+
+  function replace(id: string, value: string) {
+    value = value.trim();
+    const newKeywords = value === ""
+      ? keywords.filter((kw) => kw.id != id)
+      : keywords.map((kw) => kw.id === id ? {...kw, keyword: value} : kw);
+    setKeywords(newKeywords);
+    setDuplicates(duplicateIndices(newKeywords.map((kw) => kw.keyword)));
+  }
+
+  function add(value: string) {
+    value = value.trim();
+    if (value === "") return;
+    const newKeywords = [...keywords, {id: crypto.randomUUID(), keyword: value}];
+    setKeywords(newKeywords);
+    setDuplicates(duplicateIndices(newKeywords.map((kw) => kw.keyword)));
+  }
+
+  return <>
+    <span>Triggers when {keywords.length <= 1 ? "the keyword is" : "all keywords are"} spoken.</span>
+    {[...keywords].map(({id, keyword}, index) => {
+      return <div key={id} className={"flex-row gap-md"}>
+        <label htmlFor={inputElementId(id)}>Keyword:</label>
+        <TextField
+          id={inputElementId(id)}
+          value={keyword}
+          setValue={(val) => replace(id, val)}
+          placeholder={"..."}
+          className={"flex-1"}
+          invalid={duplicates.includes(index)}
+        />
+      </div>;
+    })}
+    <KeywordAdder addKeyword={add} />
+  </>;
+}
+
+export default function TriggerNodeComponent({
+  id,
+  data,
+}: NodeProps<TriggerNode>) {
+  const {updateNodeData} = useFlowStore();
+
+  const setKeywords = (keywords: Keyword[]) => {
+    updateNodeData(id, {...data, value: keywords});
+  }
+
+  return <>
+    <Toolbar nodeId={id} allowDelete={true}/>
+    <div className={`${styles.defaultNode} ${styles.nodeTrigger} flex-col gap-sm`}>
+      {data.type === "emotion" && (
+        <div className={"flex-row gap-md"}>Emotion?</div>
+      )}
+      {data.type === "keywords" && (
+        <Keywords
+          keywords={data.value}
+          setKeywords={setKeywords}
+        />
+      )}
+      <Handle type="source" position={Position.Right} id="TriggerSource"/>
+    </div>
+  </>;
+}