Dwinzo-Beta/Dwinzo_dev
4
0
Fork 3
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Vishnu
2025-05-03 18:16:31 +05:30
parent e39da61ed8
commit ae9c2fda66
1 changed files with 155 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

302
app/src/modules/simulation/events/points/creator/pointsCreator.tsx
View File

@@ -13,15 +13,23 @@ import {
import { useThree } from "@react-three/fiber"; 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 } =
const { activeModule } = useModuleStore(); useEventsStore();
const transformRef = useRef<any>(null); const { activeModule } = useModuleStore();
const [transformMode, setTransformMode] = useState<"translate" | "rotate" | null>(null); const transformRef = useRef<any>(null);
const sphereRefs = useRef<{ [key: string]: THREE.Mesh }>({}); const [transformMode, setTransformMode] = useState<
const { selectedEventSphere, setSelectedEventSphere, clearSelectedEventSphere, } = useSelectedEventSphere(); "translate" | "rotate" | null
const { selectedEventData, setSelectedEventData, clearSelectedEventData } = useSelectedEventData(); >(null);
const sphereRefs = useRef<{ [key: string]: THREE.Mesh }>({});
const {
selectedEventSphere,
setSelectedEventSphere,
clearSelectedEventSphere,
} = useSelectedEventSphere();
const { setSelectedEventData, clearSelectedEventData } =
useSelectedEventData();
useEffect(() => { useEffect(() => {
if (selectedEventSphere) { if (selectedEventSphere) {
@@ -123,146 +131,146 @@ function PointsCreator() {
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, [gl, subModule, selectedEventSphere]); }, [gl, subModule, selectedEventSphere]);
return ( return (
<>
{activeModule === "simulation" && (
<> <>
{activeModule === "simulation" && ( <group name="EventPointsGroup">
<> {events.map((event, index) => {
<group name="EventPointsGroup"> if (event.type === "transfer") {
{events.map((event, i) => { return (
if (event.type === "transfer") { <group
return ( key={`${index}-${event.modelUuid}`}
<group position={event.position}
key={i} rotation={event.rotation}
position={event.position} >
rotation={event.rotation} {event.points.map((point, j) => (
> <mesh
{event.points.map((point, j) => ( name="Event-Sphere"
<mesh uuid={point.uuid}
name="Event-Sphere" ref={(el) => (sphereRefs.current[point.uuid] = el!)}
uuid={point.uuid} onClick={(e) => {
ref={(el) => (sphereRefs.current[point.uuid] = el!)} e.stopPropagation();
onClick={(e) => { setSelectedEventSphere(
e.stopPropagation(); sphereRefs.current[point.uuid]
setSelectedEventSphere( );
sphereRefs.current[point.uuid] }}
); key={`${index}-${point.uuid}`}
}} position={new THREE.Vector3(...point.position)}
key={`${i}-${j}`} userData={{
position={new THREE.Vector3(...point.position)} modelUuid: event.modelUuid,
userData={{ pointUuid: point.uuid,
modelUuid: event.modelUuid, }}
pointUuid: point.uuid, >
}} <sphereGeometry args={[0.1, 16, 16]} />
> <meshStandardMaterial color="orange" />
<sphereGeometry args={[0.1, 16, 16]} /> </mesh>
<meshStandardMaterial color="orange" /> ))}
</mesh> </group>
))} );
</group> } else if (event.type === "vehicle") {
); return (
} else if (event.type === "vehicle") { <group
return ( key={`${index}-${event.modelUuid}`}
<group position={event.position}
key={i} rotation={event.rotation}
position={event.position} >
rotation={event.rotation} <mesh
> name="Event-Sphere"
<mesh uuid={event.point.uuid}
name="Event-Sphere" ref={(el) => (sphereRefs.current[event.point.uuid] = el!)}
uuid={event.point.uuid} onClick={(e) => {
ref={(el) => (sphereRefs.current[event.point.uuid] = el!)} e.stopPropagation();
onClick={(e) => { setSelectedEventSphere(
e.stopPropagation(); sphereRefs.current[event.point.uuid]
setSelectedEventSphere( );
sphereRefs.current[event.point.uuid] }}
); position={new THREE.Vector3(...event.point.position)}
}} userData={{
position={new THREE.Vector3(...event.point.position)} modelUuid: event.modelUuid,
userData={{ pointUuid: event.point.uuid,
modelUuid: event.modelUuid, }}
pointUuid: event.point.uuid, >
}} <sphereGeometry args={[0.1, 16, 16]} />
> <meshStandardMaterial color="blue" />
<sphereGeometry args={[0.1, 16, 16]} /> </mesh>
<meshStandardMaterial color="blue" /> </group>
</mesh> );
</group> } else if (event.type === "roboticArm") {
); return (
} else if (event.type === "roboticArm") { <group
return ( key={`${index}-${event.modelUuid}`}
<group position={event.position}
key={i} rotation={event.rotation}
position={event.position} >
rotation={event.rotation} <mesh
> name="Event-Sphere"
<mesh uuid={event.point.uuid}
name="Event-Sphere" ref={(el) => (sphereRefs.current[event.point.uuid] = el!)}
uuid={event.point.uuid} onClick={(e) => {
ref={(el) => (sphereRefs.current[event.point.uuid] = el!)} e.stopPropagation();
onClick={(e) => { setSelectedEventSphere(
e.stopPropagation(); sphereRefs.current[event.point.uuid]
setSelectedEventSphere( );
sphereRefs.current[event.point.uuid] }}
); position={new THREE.Vector3(...event.point.position)}
}} userData={{
position={new THREE.Vector3(...event.point.position)} modelUuid: event.modelUuid,
userData={{ pointUuid: event.point.uuid,
modelUuid: event.modelUuid, }}
pointUuid: event.point.uuid, >
}} <sphereGeometry args={[0.1, 16, 16]} />
> <meshStandardMaterial color="green" />
<sphereGeometry args={[0.1, 16, 16]} /> </mesh>
<meshStandardMaterial color="green" /> </group>
</mesh> );
</group> } else if (event.type === "machine") {
); return (
} else if (event.type === "machine") { <group
return ( key={`${index}-${event.modelUuid}`}
<group position={event.position}
key={i} rotation={event.rotation}
position={event.position} >
rotation={event.rotation} <mesh
> name="Event-Sphere"
<mesh uuid={event.point.uuid}
name="Event-Sphere" ref={(el) => (sphereRefs.current[event.point.uuid] = el!)}
uuid={event.point.uuid} onClick={(e) => {
ref={(el) => (sphereRefs.current[event.point.uuid] = el!)} e.stopPropagation();
onClick={(e) => { setSelectedEventSphere(
e.stopPropagation(); sphereRefs.current[event.point.uuid]
setSelectedEventSphere( );
sphereRefs.current[event.point.uuid] }}
); position={new THREE.Vector3(...event.point.position)}
}} userData={{
position={new THREE.Vector3(...event.point.position)} modelUuid: event.modelUuid,
userData={{ pointUuid: event.point.uuid,
modelUuid: event.modelUuid, }}
pointUuid: event.point.uuid, >
}} <sphereGeometry args={[0.1, 16, 16]} />
> <meshStandardMaterial color="purple" />
<sphereGeometry args={[0.1, 16, 16]} /> </mesh>
<meshStandardMaterial color="purple" /> </group>
</mesh> );
</group> } else {
); return null;
} else { }
return null; })}
} </group>
})} {selectedEventSphere && transformMode && (
</group> <TransformControls
{selectedEventSphere && transformMode && ( ref={transformRef}
<TransformControls object={selectedEventSphere}
ref={transformRef} mode={transformMode}
object={selectedEventSphere} onMouseUp={(e) => {
mode={transformMode} updatePointToState(selectedEventSphere);
onMouseUp={(e) => { }}
updatePointToState(selectedEventSphere); />
}} )}
/>
)}
</>
)}
</> </>
); )}
</>
);
} }
export default PointsCreator; export default PointsCreator;