feat: Refactor PointsCreator component for improved readability and maintainability

app/src/modules/simulation/events/points/creator/pointsCreator.tsx

@@ -1,28 +1,38 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from "react";
-import * as THREE from 'three';
+import * as THREE from "three";
-import { useEventsStore } from '../../../../../store/simulation/useEventsStore';
+import { useEventsStore } from "../../../../../store/simulation/useEventsStore";
-import useModuleStore from '../../../../../store/useModuleStore';
+import useModuleStore from "../../../../../store/useModuleStore";
-import { TransformControls } from '@react-three/drei';
+import { TransformControls } from "@react-three/drei";
-import { detectModifierKeys } from '../../../../../utils/shortcutkeys/detectModifierKeys';
+import { detectModifierKeys } from "../../../../../utils/shortcutkeys/detectModifierKeys";
-import { useSelectedEventSphere, useSelectedEventData } from '../../../../../store/simulation/useSimulationStore';
+import {
+  useSelectedEventSphere,
+  useSelectedEventData,
+} from "../../../../../store/simulation/useSimulationStore";
 
 function PointsCreator() {
-    const { events, updatePoint, getPointByUuid, getEventByModelUuid } = useEventsStore();
+  const { events, updatePoint, getPointByUuid, getEventByModelUuid } =
+    useEventsStore();
   const { activeModule } = useModuleStore();
   const transformRef = useRef<any>(null);
-    const [transformMode, setTransformMode] = useState<"translate" | "rotate" | null>(null);
+  const [transformMode, setTransformMode] = useState<
+    "translate" | "rotate" | null
+  >(null);
   const sphereRefs = useRef<{ [key: string]: THREE.Mesh }>({});
-    const { selectedEventSphere, setSelectedEventSphere, clearSelectedEventSphere } = useSelectedEventSphere();
+  const {
-    const { setSelectedEventData, clearSelectedEventData } = useSelectedEventData();
+    selectedEventSphere,
+    setSelectedEventSphere,
+    clearSelectedEventSphere,
+  } = useSelectedEventSphere();
+  const { setSelectedEventData, clearSelectedEventData } =
+    useSelectedEventData();
 
   useEffect(() => {
     if (selectedEventSphere) {
-            const eventData = getEventByModelUuid(selectedEventSphere.userData.modelUuid);
+      const eventData = getEventByModelUuid(
-            if (eventData) {
+        selectedEventSphere.userData.modelUuid
-                setSelectedEventData(
-                    eventData,
-                    selectedEventSphere.userData.pointUuid
       );
+      if (eventData) {
+        setSelectedEventData(eventData, selectedEventSphere.userData.pointUuid);
       } else {
         clearSelectedEventData();
       }
@@ -48,30 +58,50 @@ function PointsCreator() {
   }, [selectedEventSphere]);
 
   const updatePointToState = (selectedEventSphere: THREE.Mesh) => {
-        let point = JSON.parse(JSON.stringify(getPointByUuid(selectedEventSphere.userData.modelUuid, selectedEventSphere.userData.pointUuid)));
+    let point = JSON.parse(
+      JSON.stringify(
+        getPointByUuid(
+          selectedEventSphere.userData.modelUuid,
+          selectedEventSphere.userData.pointUuid
+        )
+      )
+    );
     if (point) {
-            point.position = [selectedEventSphere.position.x, selectedEventSphere.position.y, selectedEventSphere.position.z];
+      point.position = [
-            updatePoint(selectedEventSphere.userData.modelUuid, selectedEventSphere.userData.pointUuid, point)
+        selectedEventSphere.position.x,
-        }
+        selectedEventSphere.position.y,
+        selectedEventSphere.position.z,
+      ];
+      updatePoint(
+        selectedEventSphere.userData.modelUuid,
+        selectedEventSphere.userData.pointUuid,
+        point
+      );
     }
+  };
 
   return (
     <>
-            {activeModule === 'simulation' &&
+      {activeModule === "simulation" && (
         <>
-                    <group name='EventPointsGroup' >
+          <group name="EventPointsGroup">
             {events.map((event, i) => {
-                            if (event.type === 'transfer') {
+              if (event.type === "transfer") {
                 return (
-                                    <group key={i} position={new THREE.Vector3(...event.position)}>
+                  <group
+                    key={i}
+                    position={new THREE.Vector3(...event.position)}
+                  >
                     {event.points.map((point, j) => (
                       <mesh
-                                                name='Event-Sphere'
+                        name="Event-Sphere"
                         uuid={point.uuid}
                         ref={(el) => (sphereRefs.current[point.uuid] = el!)}
                         onClick={(e) => {
                           e.stopPropagation();
-                                                    setSelectedEventSphere(sphereRefs.current[point.uuid]);
+                          setSelectedEventSphere(
+                            sphereRefs.current[point.uuid]
+                          );
                         }}
                         onPointerMissed={() => {
                           clearSelectedEventSphere();
@@ -79,7 +109,10 @@ function PointsCreator() {
                         }}
                         key={`${i}-${j}`}
                         position={new THREE.Vector3(...point.position)}
-                                                userData={{ modelUuid: event.modelUuid, pointUuid: point.uuid }}
+                        userData={{
+                          modelUuid: event.modelUuid,
+                          pointUuid: point.uuid,
+                        }}
                       >
                         <sphereGeometry args={[0.1, 16, 16]} />
                         <meshStandardMaterial color="orange" />
@@ -87,85 +120,116 @@ function PointsCreator() {
                     ))}
                   </group>
                 );
-                            } else if (event.type === 'vehicle') {
+              } else if (event.type === "vehicle") {
                 return (
-                                    <group key={i} position={new THREE.Vector3(...event.position)}>
+                  <group
+                    key={i}
+                    position={new THREE.Vector3(...event.position)}
+                  >
                     <mesh
-                                            name='Event-Sphere'
+                      name="Event-Sphere"
                       uuid={event.point.uuid}
                       ref={(el) => (sphereRefs.current[event.point.uuid] = el!)}
                       onClick={(e) => {
                         e.stopPropagation();
-                                                setSelectedEventSphere(sphereRefs.current[event.point.uuid]);
+                        setSelectedEventSphere(
+                          sphereRefs.current[event.point.uuid]
+                        );
                       }}
                       onPointerMissed={() => {
                         clearSelectedEventSphere();
                         setTransformMode(null);
                       }}
                       position={new THREE.Vector3(...event.point.position)}
-                                            userData={{ modelUuid: event.modelUuid, pointUuid: event.point.uuid }}
+                      userData={{
+                        modelUuid: event.modelUuid,
+                        pointUuid: event.point.uuid,
+                      }}
                     >
                       <sphereGeometry args={[0.1, 16, 16]} />
                       <meshStandardMaterial color="blue" />
                     </mesh>
                   </group>
                 );
-                            } else if (event.type === 'roboticArm') {
+              } else if (event.type === "machine") {
                 return (
-                                    <group key={i} position={new THREE.Vector3(...event.position)}>
+                  <group
-                                        <mesh
+                    key={i}
-                                            name='Event-Sphere'
+                    position={new THREE.Vector3(...event.position)}
-                                            uuid={event.point.uuid}
-                                            ref={(el) => (sphereRefs.current[event.point.uuid] = el!)}
-                                            onClick={(e) => {
-                                                e.stopPropagation();
-                                                setSelectedEventSphere(sphereRefs.current[event.point.uuid]);
-                                            }}
-                                            onPointerMissed={() => {
-                                                clearSelectedEventSphere();
-                                                setTransformMode(null);
-                                            }}
-                                            position={new THREE.Vector3(...event.point.position)}
-                                            userData={{ modelUuid: event.modelUuid, pointUuid: event.point.uuid }}
                   >
-                                            <sphereGeometry args={[0.1, 16, 16]} />
-                                            <meshStandardMaterial color="green" />
-                                        </mesh>
-                                    </group>
-                                );
-                            } else if (event.type === 'machine') {
-                                return (
-                                    <group key={i} position={new THREE.Vector3(...event.position)}>
                     <mesh
-                                            name='Event-Sphere'
+                      name="Event-Sphere"
                       uuid={event.point.uuid}
                       ref={(el) => (sphereRefs.current[event.point.uuid] = el!)}
                       onClick={(e) => {
                         e.stopPropagation();
-                                                setSelectedEventSphere(sphereRefs.current[event.point.uuid]);
+                        setSelectedEventSphere(
+                          sphereRefs.current[event.point.uuid]
+                        );
                       }}
                       onPointerMissed={() => {
                         clearSelectedEventSphere();
                         setTransformMode(null);
                       }}
                       position={new THREE.Vector3(...event.point.position)}
-                                            userData={{ modelUuid: event.modelUuid, pointUuid: event.point.uuid }}
+                      userData={{
+                        modelUuid: event.modelUuid,
+                        pointUuid: event.point.uuid,
+                      }}
                     >
                       <sphereGeometry args={[0.1, 16, 16]} />
                       <meshStandardMaterial color="purple" />
                     </mesh>
                   </group>
                 );
+              } else if (event.type === "roboticArm") {
+                return (
+                  <group
+                    key={i}
+                    position={new THREE.Vector3(...event.position)}
+                  >
+                    <mesh
+                      name="Event-Sphere"
+                      uuid={event.point.uuid}
+                      ref={(el) => (sphereRefs.current[event.point.uuid] = el!)}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        setSelectedEventSphere(
+                          sphereRefs.current[event.point.uuid]
+                        );
+                      }}
+                      onPointerMissed={() => {
+                        clearSelectedEventSphere();
+                        setTransformMode(null);
+                      }}
+                      position={new THREE.Vector3(...event.point.position)}
+                      userData={{
+                        modelUuid: event.modelUuid,
+                        pointUuid: event.point.uuid,
+                      }}
+                    >
+                      <sphereGeometry args={[0.1, 16, 16]} />
+                      <meshStandardMaterial color="green" />
+                    </mesh>
+                  </group>
+                );
               } else {
                 return null;
               }
             })}
           </group>
-                    {(selectedEventSphere && transformMode) &&
+          {selectedEventSphere && transformMode && (
-                        <TransformControls ref={transformRef} object={selectedEventSphere} mode={transformMode} onMouseUp={(e) => { updatePointToState(selectedEventSphere) }} />
+            <TransformControls
-                    }
+              ref={transformRef}
+              object={selectedEventSphere}
+              mode={transformMode}
+              onMouseUp={(e) => {
+                updatePointToState(selectedEventSphere);
+              }}
+            />
+          )}
         </>
-            }
+      )}
     </>
   );
 }