Refactor SelectionControls component for improved readability and maintainability; consolidate event handlers and state management, and enhance selection logic.

app/src/modules/scene/controls/selection/selectionControls.tsx

@@ -3,13 +3,7 @@ import { useEffect, useMemo, useRef, useState } from "react";
 import { SelectionBox } from "three/examples/jsm/interactive/SelectionBox";
 import { SelectionHelper } from "./selectionHelper";
 import { useFrame, useThree } from "@react-three/fiber";
-import {
+import { useFloorItems, useSelectedAssets, useSimulationStates, useSocketStore, useToggleView, } from "../../../../store/store";
-  useFloorItems,
-  useSelectedAssets,
-  useSimulationStates,
-  useSocketStore,
-  useToggleView,
-} from "../../../../store/store";
 import BoundingBox from "./boundingBoxHelper";
 import { toast } from "react-toastify";
 // import { deleteFloorItem } from '../../../../services/factoryBuilder/assest/floorAsset/deleteFloorItemApi';
@@ -33,17 +27,12 @@ const SelectionControls: React.FC = () => {
     const [rotatedObjects, setRotatedObjects] = useState<THREE.Object3D[]>([]);
     const [copiedObjects, setCopiedObjects] = useState<THREE.Object3D[]>([]);
     const [pastedObjects, setpastedObjects] = useState<THREE.Object3D[]>([]);
-  const [duplicatedObjects, setDuplicatedObjects] = useState<THREE.Object3D[]>(
+    const [duplicatedObjects, setDuplicatedObjects] = useState<THREE.Object3D[]>([]);
-    []
-  );
     const boundingBoxRef = useRef<THREE.Mesh>();
     const { floorItems, setFloorItems } = useFloorItems();
     const { activeModule } = useModuleStore();
     const { socket } = useSocketStore();
-  const selectionBox = useMemo(
+    const selectionBox = useMemo(() => new SelectionBox(camera, scene), [camera, scene]);
-    () => new SelectionBox(camera, scene),
-    [camera, scene]
-  );
 
     useEffect(() => {
         if (!camera || !scene || toggleView) return;
@@ -85,12 +74,7 @@ const SelectionControls: React.FC = () => {
                 rightClickMoved = true;
             }
             isSelecting = true;
-      if (
+            if (helper.isDown && event.ctrlKey && duplicatedObjects.length === 0 && isCtrlSelecting) {
-        helper.isDown &&
-        event.ctrlKey &&
-        duplicatedObjects.length === 0 &&
-        isCtrlSelecting
-      ) {
                 selectionBox.endPoint.set(pointer.x, pointer.y, 0);
             }
         };
@@ -110,15 +94,7 @@ const SelectionControls: React.FC = () => {
                 if (event.ctrlKey && duplicatedObjects.length === 0) {
                     selectAssets();
                 }
-      } else if (
+            } else if (!isSelecting && selectedAssets.length > 0 && ((pastedObjects.length === 0 && duplicatedObjects.length === 0 && movedObjects.length === 0 && rotatedObjects.length === 0) || event.button !== 0)) {
-        !isSelecting &&
-        selectedAssets.length > 0 &&
-        ((pastedObjects.length === 0 &&
-          duplicatedObjects.length === 0 &&
-          movedObjects.length === 0 &&
-          rotatedObjects.length === 0) ||
-          event.button !== 0)
-      ) {
                 clearSelection();
                 helper.enabled = true;
                 isCtrlSelecting = false;
@@ -170,21 +146,7 @@ const SelectionControls: React.FC = () => {
             helper.enabled = false;
             helper.dispose();
         };
-  }, [
+    }, [camera, controls, scene, toggleView, selectedAssets, copiedObjects, pastedObjects, duplicatedObjects, movedObjects, socket, floorItems, rotatedObjects, activeModule,]);
-    camera,
-    controls,
-    scene,
-    toggleView,
-    selectedAssets,
-    copiedObjects,
-    pastedObjects,
-    duplicatedObjects,
-    movedObjects,
-    socket,
-    floorItems,
-    rotatedObjects,
-    activeModule,
-  ]);
 
     useEffect(() => {
         if (activeModule !== "builder") {
@@ -193,12 +155,7 @@ const SelectionControls: React.FC = () => {
     }, [activeModule]);
 
     useFrame(() => {
-    if (
+        if (pastedObjects.length === 0 && duplicatedObjects.length === 0 && movedObjects.length === 0 && rotatedObjects.length === 0) {
-      pastedObjects.length === 0 &&
-      duplicatedObjects.length === 0 &&
-      movedObjects.length === 0 &&
-      rotatedObjects.length === 0
-    ) {
             selectionGroup.current.position.set(0, 0, 0);
         }
     });
@@ -227,11 +184,7 @@ const SelectionControls: React.FC = () => {
         }
 
         const updatedSelections = new Set(selectedAssets);
-    Objects.forEach((obj) => {
+        Objects.forEach((obj) => { updatedSelections.has(obj) ? updatedSelections.delete(obj) : updatedSelections.add(obj); });
-      updatedSelections.has(obj)
-        ? updatedSelections.delete(obj)
-        : updatedSelections.add(obj);
-    });
 
         const selected = Array.from(updatedSelections);
 
@@ -246,19 +199,13 @@ const SelectionControls: React.FC = () => {
         setDuplicatedObjects([]);
         setSelectedAssets([]);
     };
-  const updateBackend = async (
+    const updateBackend = async (updatedPaths: (SimulationTypes.ConveyorEventsSchema | SimulationTypes.VehicleEventsSchema | SimulationTypes.StaticMachineEventsSchema | SimulationTypes.ArmBotEventsSchema)[]) => {
-    updatedPaths: (
-      | SimulationTypes.ConveyorEventsSchema
-      | SimulationTypes.VehicleEventsSchema
-      | SimulationTypes.StaticMachineEventsSchema
-      | SimulationTypes.ArmBotEventsSchema
-    )[]
-  ) => {
         if (updatedPaths.length === 0) return;
         const email = localStorage.getItem("email");
         const organization = email ? email.split("@")[1].split(".")[0] : "";
 
         updatedPaths.forEach(async (updatedPath) => {
+
             if (updatedPath.type === "Conveyor") {
                 // await setEventApi(
                 //   organization,
@@ -277,7 +224,9 @@ const SelectionControls: React.FC = () => {
                 };
 
                 socket.emit("v2:model-asset:updateEventData", data);
+
             } else if (updatedPath.type === "Vehicle") {
+
                 // await setEventApi(
                 //     organization,
                 //     updatedPath.modeluuid,
@@ -291,7 +240,9 @@ const SelectionControls: React.FC = () => {
                 };
 
                 socket.emit("v2:model-asset:updateEventData", data);
+
             } else if (updatedPath.type === "StaticMachine") {
+
                 // await setEventApi(
                 //     organization,
                 //     updatedPath.modeluuid,
@@ -305,7 +256,9 @@ const SelectionControls: React.FC = () => {
                 };
 
                 socket.emit("v2:model-asset:updateEventData", data);
+
             } else if (updatedPath.type === "ArmBot") {
+
                 // await setEventApi(
                 //     organization,
                 //     updatedPath.modeluuid,
@@ -320,8 +273,10 @@ const SelectionControls: React.FC = () => {
 
                 socket.emit("v2:model-asset:updateEventData", data);
             }
+
         });
     };
+
     //   const removeConnection = (modelUUID: any) => {
     //
     //     const removedPath = simulationStates?.flatMap((state) => {
@@ -438,6 +393,7 @@ const SelectionControls: React.FC = () => {
     //
     //     return removedPath;
     //   };
+
     const removeConnection = (modelUUIDs: any[]) => {
         const removedPath = simulationStates?.flatMap((state: any) => {
             let shouldInclude = false;
@@ -445,12 +401,8 @@ const SelectionControls: React.FC = () => {
             // Conveyor type
             if (state.type === "Conveyor") {
                 state.points.forEach((point: any) => {
-          const sourceMatch = modelUUIDs.includes(
+                    const sourceMatch = modelUUIDs.includes(point.connections?.source?.modelUUID);
-            point.connections?.source?.modelUUID
+                    const targetMatch = point.connections?.targets?.some((target: any) => modelUUIDs.includes(target.modelUUID));
-          );
-          const targetMatch = point.connections?.targets?.some((target: any) =>
-            modelUUIDs.includes(target.modelUUID)
-          );
 
                     if (sourceMatch) {
                         point.connections.source = {};
@@ -467,9 +419,7 @@ const SelectionControls: React.FC = () => {
             // Vehicle & StaticMachine types
             if (state.type === "Vehicle") {
                 const targets = state.points?.connections?.targets || [];
-        const targetMatch = targets.some((target: any) =>
+                const targetMatch = targets.some((target: any) => modelUUIDs.includes(target.modelUUID));
-          modelUUIDs.includes(target.modelUUID)
-        );
 
                 if (targetMatch) {
                     state.points.connections.targets = [];
@@ -478,9 +428,7 @@ const SelectionControls: React.FC = () => {
             }
             if (state.type === "StaticMachine") {
                 const targets = state.points?.connections?.targets || [];
-        const targetMatch = targets.some((target: any) =>
+                const targetMatch = targets.some((target: any) => modelUUIDs.includes(target.modelUUID));
-          modelUUIDs.includes(target.modelUUID)
-        );
 
                 if (targetMatch) {
                     state.points.connections.targets = [];
@@ -490,9 +438,7 @@ const SelectionControls: React.FC = () => {
 
             // ArmBot type
             if (state.type === "ArmBot") {
-        const sourceMatch = modelUUIDs.includes(
+                const sourceMatch = modelUUIDs.includes(state.points.connections?.source?.modelUUID);
-          state.points.connections?.source?.modelUUID
-        );
 
                 const targetMatch = state.points.connections?.targets?.some(
                     (target: any) => modelUUIDs.includes(target.modelUUID)
@@ -536,9 +482,7 @@ const SelectionControls: React.FC = () => {
 
                 if (targetMatch) {
                     state.points.connections.targets =
-            state.points.connections.targets.filter(
+                        state.points.connections.targets.filter((target: any) => !modelUUIDs.includes(target.modelUUID));
-              (target: any) => !modelUUIDs.includes(target.modelUUID)
-            );
                     shouldInclude = true;
                 }
 
@@ -569,16 +513,10 @@ const SelectionControls: React.FC = () => {
             const email = localStorage.getItem("email");
             const organization = email!.split("@")[1].split(".")[0];
 
-      const storedItems = JSON.parse(
+            const storedItems = JSON.parse(localStorage.getItem("FloorItems") || "[]");
-        localStorage.getItem("FloorItems") || "[]"
+            const selectedUUIDs = selectedAssets.map((mesh: THREE.Object3D) => mesh.uuid);
-      );
-      const selectedUUIDs = selectedAssets.map(
-        (mesh: THREE.Object3D) => mesh.uuid
-      );
 
-      const updatedStoredItems = storedItems.filter(
+            const updatedStoredItems = storedItems.filter((item: { modeluuid: string }) => !selectedUUIDs.includes(item.modeluuid));
-        (item: { modeluuid: string }) => !selectedUUIDs.includes(item.modeluuid)
-      );
             localStorage.setItem("FloorItems", JSON.stringify(updatedStoredItems));
 
             selectedAssets.forEach((selectedMesh: THREE.Object3D) => {
@@ -612,15 +550,7 @@ const SelectionControls: React.FC = () => {
                     }
                 });
 
-        setSimulationStates(
+                setSimulationStates((prevEvents: (| SimulationTypes.ConveyorEventsSchema | SimulationTypes.VehicleEventsSchema | SimulationTypes.StaticMachineEventsSchema | SimulationTypes.ArmBotEventsSchema)[]) => {
-          (
-            prevEvents: (
-              | SimulationTypes.ConveyorEventsSchema
-              | SimulationTypes.VehicleEventsSchema
-              | SimulationTypes.StaticMachineEventsSchema
-              | SimulationTypes.ArmBotEventsSchema
-            )[]
-          ) => {
                     const updatedEvents = (prevEvents || []).filter(
                         (event) => event.modeluuid !== selectedMesh.uuid
                     );
@@ -633,6 +563,7 @@ const SelectionControls: React.FC = () => {
 
             const allUUIDs = selectedAssets.map((val: any) => val.uuid);
             removeConnection(allUUIDs);
+
             //   const removedPath = simulationStates?.flatMap((path: any) => {
             //     let shouldInclude = false;
 
@@ -692,62 +623,14 @@ const SelectionControls: React.FC = () => {
                     <BoundingBox boundingBoxRef={boundingBoxRef} />
                 </group>
             </group>
-      <MoveControls
+
-        movedObjects={movedObjects}
+            <MoveControls movedObjects={movedObjects} setMovedObjects={setMovedObjects} itemsGroupRef={itemsGroupRef} copiedObjects={copiedObjects} setCopiedObjects={setCopiedObjects} pastedObjects={pastedObjects} setpastedObjects={setpastedObjects} duplicatedObjects={duplicatedObjects} setDuplicatedObjects={setDuplicatedObjects} rotatedObjects={rotatedObjects} setRotatedObjects={setRotatedObjects} selectionGroup={selectionGroup} boundingBoxRef={boundingBoxRef} />
-        setMovedObjects={setMovedObjects}
+
-        itemsGroupRef={itemsGroupRef}
+            <RotateControls rotatedObjects={rotatedObjects} setRotatedObjects={setRotatedObjects} movedObjects={movedObjects} setMovedObjects={setMovedObjects} itemsGroupRef={itemsGroupRef} copiedObjects={copiedObjects} setCopiedObjects={setCopiedObjects} pastedObjects={pastedObjects} setpastedObjects={setpastedObjects} duplicatedObjects={duplicatedObjects} setDuplicatedObjects={setDuplicatedObjects} selectionGroup={selectionGroup} boundingBoxRef={boundingBoxRef} />
-        copiedObjects={copiedObjects}
+
-        setCopiedObjects={setCopiedObjects}
+            <DuplicationControls itemsGroupRef={itemsGroupRef} duplicatedObjects={duplicatedObjects} setDuplicatedObjects={setDuplicatedObjects} setpastedObjects={setpastedObjects} selectionGroup={selectionGroup} movedObjects={movedObjects} setMovedObjects={setMovedObjects} rotatedObjects={rotatedObjects} setRotatedObjects={setRotatedObjects} boundingBoxRef={boundingBoxRef} />
-        pastedObjects={pastedObjects}
+
-        setpastedObjects={setpastedObjects}
+            <CopyPasteControls itemsGroupRef={itemsGroupRef} copiedObjects={copiedObjects} setCopiedObjects={setCopiedObjects} pastedObjects={pastedObjects} setpastedObjects={setpastedObjects} selectionGroup={selectionGroup} setDuplicatedObjects={setDuplicatedObjects} movedObjects={movedObjects} setMovedObjects={setMovedObjects} rotatedObjects={rotatedObjects} setRotatedObjects={setRotatedObjects} boundingBoxRef={boundingBoxRef} />
-        duplicatedObjects={duplicatedObjects}
-        setDuplicatedObjects={setDuplicatedObjects}
-        rotatedObjects={rotatedObjects}
-        setRotatedObjects={setRotatedObjects}
-        selectionGroup={selectionGroup}
-        boundingBoxRef={boundingBoxRef}
-      />
-      <RotateControls
-        rotatedObjects={rotatedObjects}
-        setRotatedObjects={setRotatedObjects}
-        movedObjects={movedObjects}
-        setMovedObjects={setMovedObjects}
-        itemsGroupRef={itemsGroupRef}
-        copiedObjects={copiedObjects}
-        setCopiedObjects={setCopiedObjects}
-        pastedObjects={pastedObjects}
-        setpastedObjects={setpastedObjects}
-        duplicatedObjects={duplicatedObjects}
-        setDuplicatedObjects={setDuplicatedObjects}
-        selectionGroup={selectionGroup}
-        boundingBoxRef={boundingBoxRef}
-      />
-      <DuplicationControls
-        itemsGroupRef={itemsGroupRef}
-        duplicatedObjects={duplicatedObjects}
-        setDuplicatedObjects={setDuplicatedObjects}
-        setpastedObjects={setpastedObjects}
-        selectionGroup={selectionGroup}
-        movedObjects={movedObjects}
-        setMovedObjects={setMovedObjects}
-        rotatedObjects={rotatedObjects}
-        setRotatedObjects={setRotatedObjects}
-        boundingBoxRef={boundingBoxRef}
-      />
-      <CopyPasteControls
-        itemsGroupRef={itemsGroupRef}
-        copiedObjects={copiedObjects}
-        setCopiedObjects={setCopiedObjects}
-        pastedObjects={pastedObjects}
-        setpastedObjects={setpastedObjects}
-        selectionGroup={selectionGroup}
-        setDuplicatedObjects={setDuplicatedObjects}
-        movedObjects={movedObjects}
-        setMovedObjects={setMovedObjects}
-        rotatedObjects={rotatedObjects}
-        setRotatedObjects={setRotatedObjects}
-        boundingBoxRef={boundingBoxRef}
-      />
         </>
     );
 };