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