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

@@ -5,36 +5,36 @@ import '../VisProgUI.css';
 // Datatypes for NodeTypes
 
 type defaultNodeData = {
-    label: string;
+  label: string;
 };
 
 type startNodeData = defaultNodeData;
 type endNodeData = defaultNodeData;
 type normNodeData = defaultNodeData;
 type phaseNodeData = defaultNodeData & {
-    number: number;
+  number: number;
 };
 
 export type nodeData = defaultNodeData | startNodeData | phaseNodeData | endNodeData;
 
 // Node Toolbar definition, contains node delete functionality
 
-type ToolbarProps= {
-    nodeId: string;
-    allowDelete: boolean;
+type ToolbarProps = {
+  nodeId: string;
+  allowDelete: boolean;
 };
 
-export function Toolbar({nodeId, allowDelete}:ToolbarProps) {
-    const { setNodes, setEdges } = useReactFlow();
+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>);
+  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>);
 }
 
 
@@ -43,80 +43,80 @@ export function Toolbar({nodeId, allowDelete}:ToolbarProps) {
 // Start Node definition:
 
 type StartNodeProps = {
-    id: string;
-    data: startNodeData;
+  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>
-        </>
-    );
+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;
+  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>
-        </>
-    );
+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;
+  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>
-        </>
-    );
+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;
+  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>
-        </>
-    );
+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>
+    </>
+  );
 };