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

2025-04-14 18:31:39 +05:30
parent 5219d545b8
commit d60d9812e4
1 changed files with 606 additions and 723 deletions
--- a/app/src/modules/scene/controls/selection/selectionControls.tsx
+++ b/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 {
-  useFloorItems,
-  useSelectedAssets,
-  useSimulationStates,
-  useSocketStore,
-  useToggleView,
-} from "../../../../store/store";
+import { 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(
-    () => new SelectionBox(camera, scene),
-    [camera, scene]
-  );
+    const selectionBox = useMemo(() => 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 (
-        helper.isDown &&
-        event.ctrlKey &&
-        duplicatedObjects.length === 0 &&
-        isCtrlSelecting
-      ) {
+            if (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 (
-        !isSelecting &&
-        selectedAssets.length > 0 &&
-        ((pastedObjects.length === 0 &&
-          duplicatedObjects.length === 0 &&
-          movedObjects.length === 0 &&
-          rotatedObjects.length === 0) ||
-          event.button !== 0)
-      ) {
+            } else if (!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 (
-      pastedObjects.length === 0 &&
-      duplicatedObjects.length === 0 &&
-      movedObjects.length === 0 &&
-      rotatedObjects.length === 0
-    ) {
+        if (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) => {
-      updatedSelections.has(obj)
-        ? updatedSelections.delete(obj)
-        : updatedSelections.add(obj);
-    });
+        Objects.forEach((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 (
-    updatedPaths: (
-      | SimulationTypes.ConveyorEventsSchema
-      | SimulationTypes.VehicleEventsSchema
-      | SimulationTypes.StaticMachineEventsSchema
-      | SimulationTypes.ArmBotEventsSchema
-    )[]
-  ) => {
+    const updateBackend = async (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(
-            point.connections?.source?.modelUUID
-          );
-          const targetMatch = point.connections?.targets?.some((target: any) =>
-            modelUUIDs.includes(target.modelUUID)
-          );
+                    const sourceMatch = modelUUIDs.includes(point.connections?.source?.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) =>
-          modelUUIDs.includes(target.modelUUID)
-        );
+                const targetMatch = targets.some((target: any) => 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) =>
-          modelUUIDs.includes(target.modelUUID)
-        );
+                const targetMatch = targets.some((target: any) => 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(
-          state.points.connections?.source?.modelUUID
-        );
+                const sourceMatch = modelUUIDs.includes(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(
-              (target: any) => !modelUUIDs.includes(target.modelUUID)
-            );
+                        state.points.connections.targets.filter((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(
-        localStorage.getItem("FloorItems") || "[]"
-      );
-      const selectedUUIDs = selectedAssets.map(
-        (mesh: THREE.Object3D) => mesh.uuid
-      );
+            const storedItems = JSON.parse(localStorage.getItem("FloorItems") || "[]");
+            const selectedUUIDs = selectedAssets.map((mesh: THREE.Object3D) => mesh.uuid);

-      const updatedStoredItems = storedItems.filter(
-        (item: { modeluuid: string }) => !selectedUUIDs.includes(item.modeluuid)
-      );
+            const updatedStoredItems = storedItems.filter((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(
-          (
-            prevEvents: (
-              | SimulationTypes.ConveyorEventsSchema
-              | SimulationTypes.VehicleEventsSchema
-              | SimulationTypes.StaticMachineEventsSchema
-              | SimulationTypes.ArmBotEventsSchema
-            )[]
-          ) => {
+                setSimulationStates((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}
-        setMovedObjects={setMovedObjects}
-        itemsGroupRef={itemsGroupRef}
-        copiedObjects={copiedObjects}
-        setCopiedObjects={setCopiedObjects}
-        pastedObjects={pastedObjects}
-        setpastedObjects={setpastedObjects}
-        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}
-      />
+
+            <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} />
+
+            <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} />
        </>
    );
 };