Refactor MachineInstances component: enhance rendering logic by adding MachineContentUi and improving structure; create MachineContentUi component for better separation of concerns.

This commit is contained in:
Vishnu 2025-05-09 13:48:39 +05:30
parent dd5f7faf34
commit ffb65b3369
3 changed files with 52 additions and 15 deletions

View File

@ -1,17 +1,20 @@
import React from 'react'
import MachineInstance from './machineInstance/machineInstance'
import { useMachineStore } from '../../../../store/simulation/useMachineStore';
import React from "react";
import MachineInstance from "./machineInstance/machineInstance";
import { useMachineStore } from "../../../../store/simulation/useMachineStore";
import MachineContentUi from "../../ui3d/MachineContentUi";
function MachineInstances() {
const { machines } = useMachineStore();
return (
<>
{machines.map((machine: MachineStatus) => (
<MachineInstance key={machine.modelUuid} machineDetail={machine} />
<React.Fragment key={machine.modelUuid}>
<MachineInstance machineDetail={machine} />
<MachineContentUi machine={machine} />
</React.Fragment>
))}
</>
)
);
}
export default MachineInstances
export default MachineInstances;

View File

@ -0,0 +1,34 @@
import { Html } from "@react-three/drei";
import React from "react";
import AssetDetailsCard from "../../../components/ui/simulation/AssetDetailsCard";
import { Vector3 } from "three";
type MachineContentUiProps = {
machine: MachineStatus;
};
const MachineContentUi: React.FC<MachineContentUiProps> = ({ machine }) => {
return (
<Html
// data
position={
new Vector3(
machine.position[0],
machine.point.position[1],
machine.position[2]
)
}
// class none
// other
zIndexRange={[1, 0]}
prepend
sprite
center
distanceFactor={20}
>
<AssetDetailsCard name={machine.modelName} status={machine.state} />
</Html>
);
};
export default MachineContentUi;

View File

@ -3,11 +3,11 @@ import React from "react";
import AssetDetailsCard from "../../../components/ui/simulation/AssetDetailsCard";
import { Vector3 } from "three";
type VehicleContentUiProps = {
type RoboticArmContentUiProps = {
roboticArm: ArmBotStatus;
};
const RoboticArmContentUi: React.FC<VehicleContentUiProps> = ({ roboticArm }) => {
const RoboticArmContentUi: React.FC<RoboticArmContentUiProps> = ({ roboticArm }) => {
return (
<Html
// data