refactor: Improve code readability and consistency in PointsCreator component; streamline JSX structure and enhance key usage in event mapping

This commit is contained in:
2025-05-03 18:16:31 +05:30
parent e39da61ed8
commit ae9c2fda66

View File

@@ -15,13 +15,21 @@ import { useThree } from "@react-three/fiber";
function PointsCreator() {
const { gl, raycaster, scene, pointer, camera } = useThree();
const { subModule } = useSubModuleStore();
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 { selectedEventData, setSelectedEventData, clearSelectedEventData } = useSelectedEventData();
const {
selectedEventSphere,
setSelectedEventSphere,
clearSelectedEventSphere,
} = useSelectedEventSphere();
const { setSelectedEventData, clearSelectedEventData } =
useSelectedEventData();
useEffect(() => {
if (selectedEventSphere) {
@@ -128,11 +136,11 @@ function PointsCreator() {
{activeModule === "simulation" && (
<>
<group name="EventPointsGroup">
{events.map((event, i) => {
{events.map((event, index) => {
if (event.type === "transfer") {
return (
<group
key={i}
key={`${index}-${event.modelUuid}`}
position={event.position}
rotation={event.rotation}
>
@@ -147,7 +155,7 @@ function PointsCreator() {
sphereRefs.current[point.uuid]
);
}}
key={`${i}-${j}`}
key={`${index}-${point.uuid}`}
position={new THREE.Vector3(...point.position)}
userData={{
modelUuid: event.modelUuid,
@@ -163,7 +171,7 @@ function PointsCreator() {
} else if (event.type === "vehicle") {
return (
<group
key={i}
key={`${index}-${event.modelUuid}`}
position={event.position}
rotation={event.rotation}
>
@@ -191,7 +199,7 @@ function PointsCreator() {
} else if (event.type === "roboticArm") {
return (
<group
key={i}
key={`${index}-${event.modelUuid}`}
position={event.position}
rotation={event.rotation}
>
@@ -219,7 +227,7 @@ function PointsCreator() {
} else if (event.type === "machine") {
return (
<group
key={i}
key={`${index}-${event.modelUuid}`}
position={event.position}
rotation={event.rotation}
>