refactor: moved visualProgrammingUI into page folder

BREAKING: moved directory visualProgrammingUI and contents into VisProgPage

ref: N25B-114

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

@@ -0,0 +1,122 @@
+import {Handle, NodeToolbar, Position, useReactFlow} from '@xyflow/react';
+import '@xyflow/react/dist/style.css';
+import '../VisProgUI.css';
+
+// Datatypes for NodeTypes
+
+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
+
+type ToolbarProps= {
+    nodeId: string;
+    allowDelete: boolean;
+};
+
+export function Toolbar({nodeId, allowDelete}:ToolbarProps) {
+    const { setNodes, setEdges } = useReactFlow();
+
+    const handleDelete = () => {
+        setNodes((nds) => nds.filter((n) => n.id !== nodeId));
+        setEdges((eds) => eds.filter((e) => e.source !== nodeId && e.target !== nodeId));
+    };
+    return (
+        <NodeToolbar >
+            <button className="Node-toolbar__deletebutton" onClick={handleDelete} disabled={!allowDelete}>delete</button>
+        </NodeToolbar>);
+}
+
+
+// Definitions of Nodes
+
+// Start Node definition:
+
+type StartNodeProps = {
+    id: string;
+    data: startNodeData;
+};
+
+export const StartNode= ({ id, data }: StartNodeProps) => {
+    return (
+        <>
+            <Toolbar nodeId={id} allowDelete={false}/>
+            <div className="default-node__start">
+                <div> data test {data.label} </div>
+                <Handle type="source" position={Position.Right} id="start" />
+            </div>
+        </>
+    );
+};
+
+
+// End node definition:
+
+type EndNodeProps = {
+    id: string;
+    data: endNodeData;
+};
+
+export const EndNode= ({ id, data }: EndNodeProps) => {
+    return (
+        <>
+            <Toolbar nodeId={id} allowDelete={false}/>
+            <div className="default-node__end">
+                <div> {data.label} </div>
+                <Handle type="target" position={Position.Left} id="end" />
+            </div>
+        </>
+    );
+};
+
+
+// Phase node definition:
+
+type PhaseNodeProps = {
+    id: string;
+    data: phaseNodeData;
+};
+
+export const PhaseNode= ({ id, data }: PhaseNodeProps) => {
+    return (
+        <>
+            <Toolbar nodeId={id} allowDelete={true}/>
+            <div className="default-node__phase">
+                <div> phase {data.number} {data.label} </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" />
+            </div>
+        </>
+    );
+};
+
+
+// Norm node definition:
+
+type NormNodeProps = {
+    id: string;
+    data: normNodeData;
+};
+
+export const NormNode= ({ id, data }: NormNodeProps) => {
+    return (
+        <>
+            <Toolbar nodeId={id} allowDelete={true}/>
+            <div className="default-node__norm">
+                <div> Norm {data.label} </div>
+                <Handle type="source" position={Position.Right} id="NormSource" />
+            </div>
+        </>
+    );
+};