consolidated add, move, remove functions

web/src/components/CaseBuilder/CaseBuilder.tsx

@@ -12,8 +12,14 @@ import Footer from "./Footer";
 import React, { useState, useRef } from "react";
 import { defaultPlant, defaultProduct, defaultCenter } from "./defaults";
 import PipelineBlock from "./PipelineBlock";
-import '@xyflow/react/dist/style.css';
+import "@xyflow/react/dist/style.css";
-import { PlantNode, CenterNode, ProductNode, RELOGScenario} from "./CircularData";
+import {
+  PlantNode,
+  CenterNode,
+  ProductNode,
+  RELOGScenario,
+} from "./CircularData";
+import { idText } from "typescript";
 
 declare global {
   interface Window {
@@ -37,10 +43,7 @@ const CaseBuilder = () => {
   const onSave = () => {};
   const onLoad = () => {};
 
-
+  const nextNodePosition = (): [number, number] => {
-  
-
-  const randomPosition = (): [number,number] => {
     if (window.nextX === undefined) window.nextX = 15;
     if (window.nextY === undefined) window.nextY = 15;
 
@@ -48,87 +51,41 @@ const CaseBuilder = () => {
     if (window.nextY >= 500) {
       window.nextY = 15;
       window.nextX += 150;
-
     }
     return [window.nextX, window.nextY];
-
   };
 
-  const promptName = (prevData:RELOGScenario): string | undefined => {
+  const promptName = (): string | undefined => {
     const name = prompt("Name");
     if (!name || name.length === 0) return;
     return name;
-
   };
 
-  const onAddPlant = () => {
+  type EntityKey = "Plants" | "Products" | "Centers";
-    setScenario((prevData) => {
-      const name = promptName(prevData);
-      if (name ===undefined) return prevData;
-
-      const uid = `${name}-${nextUid.current++}`;
-      const [x,y] = randomPosition();
-      const newData: RELOGScenario = {
-         ...prevData,
-         Plants: {
-          ...prevData.Plants,
-          [uid]: {
-            ...defaultPlant,
-            x,
-            y,
-            name,
-            uid
-          }
-         }
-        };
-     return newData;
-    });
-  };
 
-  const onAddProduct = () => {
+  const onAddNode = (type: EntityKey) => {
     setScenario((prevData) => {
-      const name = promptName(prevData);
+      const name = promptName();
-      if (name ===undefined) return prevData;
+      if (!name) return prevData;
-      const uid = `${name}-${nextUid.current++}`;
+
-      const [x,y] = randomPosition();
+      const uid = `${name}-$${nextUid.current++}`;
-      const newData: RELOGScenario = {
+      const [x, y] = nextNodePosition();
-         ...prevData,
+
-         Products: {
+      let newNode;
-          ...prevData.Products,
+      if (type === "Plants") {
-          [uid]: {
+        newNode = { ...defaultPlant, uid, name, x, y };
-            ...defaultProduct,
+      } else if (type === "Products") {
-            x,
+        newNode = { ...defaultProduct, uid, name, x, y };
-            y,
+      } else {
-            name,
+        newNode = { ...defaultCenter, uid, name, x, y };
-            uid
-          }
       }
-        };
+      return {
-     return newData;
-    });
-
-  };
-
-  const onAddCenter = () => {
-    setScenario((prevData) => {
-      const name = promptName(prevData);
-      if (name ===undefined) return prevData;
-      const uid = `${name}-${nextUid.current++}`;
-      const [x,y] = randomPosition();
-      const newData: RELOGScenario = {
         ...prevData,
-         Centers: {
+        [type]: {
-          ...prevData.Centers,
+          ...prevData[type],
-          [uid]: {
+          [uid]: newNode,
-            ...defaultCenter,
+        },
-            x,
+      } as RELOGScenario;
-            y,
-            name,
-            uid
-          }
-         }
-        };
-     return newData;
     });
   };
 
@@ -147,47 +104,33 @@ const onSetCenterInput = (centerName: string, productName: string) => {
   };
 
   const onSetPlantInput = (plantName: string, productName: string) => {
-
     setScenario((prevData: RELOGScenario) => {
-
       const plant = prevData.Plants[plantName];
 
       if (!plant) return prevData;
 
       const updatedPlant: PlantNode = {
-
         ...plant,
 
         inputs: plant.inputs.includes(productName)
-
           ? plant.inputs
-
           : [...plant.inputs, productName],
-
       };
 
       return {
-
         ...prevData,
 
         plants: {
-
           ...prevData.Plants,
 
           [plantName]: updatedPlant,
-
         },
-
       };
-
     });
-
   };
 
-
-
   const onAddPlantOutput = (plantName: string, productName: string) => {
-  setScenario(prevData => {
+    setScenario((prevData) => {
       const plant = prevData.Plants[plantName];
       if (!plant) return prevData;
 
@@ -224,73 +167,36 @@ const onAddCenterOutput = (centerName: string, productName: string) => {
     });
   };
 
+  const onMoveNode = (type: EntityKey, id: string, x: number, y: number) => {
+    setScenario((prevData) => {
+      const nodesMap = prevData[type];
+      const node = nodesMap[id];
+      if (!node) return prevData;
 
-
-  const onMovePlant = (plantName: string, x: number, y: number) => {
-    setScenario((prevData: RELOGScenario): RELOGScenario => {
-      const newData: RELOGScenario ={ ...prevData};
-      if (!newData.Plants[plantName]) return prevData;
-      newData.Plants[plantName].x =x;
-      newData.Plants[plantName].y =y;
-      return newData;
-    });
-
-  };
-
-  const onMoveProduct = (productName: string, x: number, y: number) => {
-     setScenario((prevData: RELOGScenario): RELOGScenario => {
-      const newData: RELOGScenario ={ ...prevData};
-      const product = newData.Products[productName];
-      if (!product) return prevData;
-      product.x = x;
-      product.y =y;
-      return newData;
-    });
-
-  };
-
-  const onMoveCenter = (centerName: string, x: number, y: number) => {
-    setScenario((prev) => {
-      const center = prev.Centers[centerName];
-      if (!center) return prev;
       return {
-        ...prev,
+        ...prevData,
-        centers: {
+        [type]: {
-          ...prev.Centers,
+          ...nodesMap,
-          [centerName]: { ...center,x,y},
+          [id]: { ...node, x, y },
         },
-      };
+      } as RELOGScenario;
     });
   };
 
-  const onRemovePlant = (plantName: string) => {
+  const onRemoveNode = (type: EntityKey, id: string) => {
-    setScenario(prev => {
+    setScenario((prevData) => {
-      const next = { ...prev };
+      const nodesMap = { ...prevData[type] };
-      delete next.Plants[plantName];
+      delete nodesMap[id];
-
-      return next;
-    });
-  };
-   const onRemoveProduct = (productName: string) => {
-    setScenario(prev => {
-      const next = { ...prev };
-      delete next.Products[productName];
 
-      return next;
+      return {
-    });
+        ...prevData,
+        [type]: nodesMap,
       };
-
-   const onRemoveCenter = (centerName: string) => {
-    setScenario(prev => {
-      const next = { ...prev };
-      delete next.Centers[centerName];
-
-      return next;
     });
   };
 
   const onRenamePlant = (uniqueId: string, newName: string) => {
-    setScenario(prev => {
+    setScenario((prev) => {
       const plant = prev.Plants[uniqueId];
       if (!plant) return prev;
       const next = {
@@ -301,13 +207,11 @@ const onAddCenterOutput = (centerName: string, productName: string) => {
         },
       };
       return next;
-    
-
     });
   };
 
   const onRenameProduct = (uniqueId: string, newName: string) => {
-    setScenario(prev => {
+    setScenario((prev) => {
       const product = prev.Products[uniqueId];
       if (!product) return prev;
       const next = {
@@ -322,7 +226,7 @@ const onRenameProduct = (uniqueId: string, newName: string) => {
   };
 
   const onRenameCenter = (uniqueId: string, newName: string) => {
-    setScenario(prev => {
+    setScenario((prev) => {
       const center = prev.Centers[uniqueId];
       if (!center) return prev;
       const next = {
@@ -343,22 +247,22 @@ const onRenameCenter = (uniqueId: string, newName: string) => {
         <div id="contentBackground">
           <div id="content">
             <PipelineBlock
-            onAddPlant={onAddPlant}
+              onAddPlant={() => onAddNode("Plants")}
-            onAddProduct={onAddProduct}
+              onAddProduct={() => onAddNode("Products")}
-            onMovePlant={onMovePlant}
+              onMovePlant={(id, x, y) => onMoveNode("Plants", id, x, y)}
-            onMoveProduct={onMoveProduct}
+              onMoveProduct={(id, x, y) => onMoveNode("Products", id, x, y)}
               plants={scenario.Plants}
               products={scenario.Products}
               onSetPlantInput={onSetPlantInput}
               onAddPlantOutput={onAddPlantOutput}
-            onAddCenter= {onAddCenter}
+              onAddCenter={() => onAddNode("Centers")}
               onAddCenterInput={onSetCenterInput}
               onAddCenterOutput={onAddCenterOutput}
-            onMoveCenter={onMoveCenter}
+              onMoveCenter={(id, x, y) => onMoveNode("Centers", id, x, y)}
               centers={scenario.Centers}
-            onRemovePlant={onRemovePlant}
+              onRemovePlant={(id) => onRemoveNode("Plants", id)}
-            onRemoveProduct={onRemoveProduct}
+              onRemoveProduct={(id) => onRemoveNode("Products", id)}
-            onRemoveCenter={onRemoveCenter}
+              onRemoveCenter={(id) => onRemoveNode("Centers", id)}
               onRenamePlant={onRenamePlant}
               onRenameProduct={onRenameProduct}
               onRenameCenter={onRenameCenter}