refactor: defaults should be in their own file, respecting eslint/ react standards. all tests fail, obviously.

ref: N25B-294

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

@@ -0,0 +1,84 @@
+import {
+  NodeToolbar} from '@xyflow/react';
+import '@xyflow/react/dist/style.css';
+import styles from '../../VisProg.module.css';
+import useFlowStore from "../VisProgStores.tsx";
+
+//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();
+
+  const deleteParentNode = ()=> {
+    deleteNode(nodeId);
+  }
+  return (
+    <NodeToolbar>
+      <button className="Node-toolbar__deletebutton" onClick={deleteParentNode} disabled={!allowDelete}>delete</button>
+    </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>
+  )
+}
+