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

@@ -68,38 +68,13 @@ function DraggableNode({className, children, nodeType, onDrop}: DraggableNodePro
   );
 }
 
-/**
+function addNode(nodeType: string, position: XYPosition) {
- * the DndToolbar defines how the drag and drop toolbar component works
+  const {setNodes} = useFlowStore.getState();
- * and includes the default onDrop behavior through handleNodeDrop
+  const nds = useFlowStore.getState().nodes;
- * @constructor
- */
-export function DndToolbar() {
-  const {screenToFlowPosition} = useReactFlow();
-  const {setNodes} = useReactFlow();
-
-  /**
-   * handleNodeDrop implements the default onDrop behavior
-   */
-  const handleNodeDrop = useCallback(
-    (nodeType: string, screenPosition: XYPosition) => {
-      const flow = document.querySelector('.react-flow');
-      const flowRect = flow?.getBoundingClientRect();
-      const isInFlow =
-        flowRect &&
-        screenPosition.x >= flowRect.left &&
-        screenPosition.x <= flowRect.right &&
-        screenPosition.y >= flowRect.top &&
-        screenPosition.y <= flowRect.bottom;
-
-      // Create a new node and add it to the flow
-      if (isInFlow) {
-        const position = screenToFlowPosition(screenPosition);
-
   const newNode = () => {
     switch (nodeType) {
       case "phase":
       {
-              const nds = useFlowStore.getState().nodes;
         const phaseNumber = nds.filter((node) => node.type === 'phase').length;
         return {
           id: `phase-${phaseNumber}`,
@@ -108,7 +83,6 @@ export function DndToolbar() {
           data: {label: `"new"`, number: phaseNumber},
         };
       }
-
       case "start":
         return {
           id: getId(),
@@ -125,7 +99,6 @@ export function DndToolbar() {
         };
       case "norm":
       {
-              const nds = useFlowStore.getState().nodes;
         const normNumber = nds.filter((node) => node.type === 'norm').length;
         return {
           id: `norm-${normNumber}`,
@@ -145,10 +118,37 @@ export function DndToolbar() {
     }
   }
 
-        setNodes((nds) => nds.concat(newNode()));
+  setNodes(nds.concat(newNode()));
+}
+
+/**
+ * the DndToolbar defines how the drag and drop toolbar component works
+ * and includes the default onDrop behavior through handleNodeDrop
+ * @constructor
+ */
+export function DndToolbar() {
+  const {screenToFlowPosition} = useReactFlow();
+  /**
+   * handleNodeDrop implements the default onDrop behavior
+   */
+  const handleNodeDrop = useCallback(
+    (nodeType: string, screenPosition: XYPosition) => {
+      const flow = document.querySelector('.react-flow');
+      const flowRect = flow?.getBoundingClientRect();
+      const isInFlow =
+        flowRect &&
+        screenPosition.x >= flowRect.left &&
+        screenPosition.x <= flowRect.right &&
+        screenPosition.y >= flowRect.top &&
+        screenPosition.y <= flowRect.bottom;
+
+      // Create a new node and add it to the flow
+      if (isInFlow) {
+        const position = screenToFlowPosition(screenPosition);
+        addNode(nodeType, position);
       }
     },
-    [setNodes, screenToFlowPosition],
+    [screenToFlowPosition],
   );
 
   return (