refactor: Improve code readability and consistency in PointsCreator component; streamline JSX structure and enhance key usage in event mapping
This commit is contained in:
@@ -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}
|
||||||
>
|
>
|
||||||
|
|||||||
Reference in New Issue
Block a user