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

refactor: Remove Html wrapper and integrate AssetDetailsCard into new RoboticArmContentUi and VehicleContentUi components

This commit is contained in:
Vishnu 2025-05-08 19:08:57 +05:30
parent 1c0b09acb1
commit 7bc7a49b42
4 changed files with 90 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
app/src/modules/simulation/roboticArm/instances/roboticArmInstances.tsx
View File

@ -1,8 +1,6 @@
import RoboticArmInstance from "./armInstance/roboticArmInstance";
import { useArmBotStore } from "../../../../store/simulation/useArmBotStore";
import { Html } from "@react-three/drei";
import AssetDetailsCard from "../../../../components/ui/simulation/AssetDetailsCard";
import { Vector3 } from "three";
import RoboticArmContentUi from "../../ui3d/RoboticArmContentUi";
function RoboticArmInstances() {
const { armBots } = useArmBotStore();
@ -12,25 +10,7 @@ function RoboticArmInstances() {
{armBots?.map((robot: ArmBotStatus) => (
<>
<RoboticArmInstance key={robot.modelUuid} armBot={robot} />
<Html
// data
position={
new Vector3(
robot.position[0],
robot.point.position[1],
robot.position[2]
)
}
// class none
// other
zIndexRange={[1, 0]}
prepend
sprite
center
distanceFactor={20}
>
<AssetDetailsCard name={robot.modelName} status={robot.state} />
</Html>
<RoboticArmContentUi roboticArm={robot}/>
</>
))}
</>

34
app/src/modules/simulation/ui3d/RoboticArmContentUi.tsx Normal file
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 VehicleContentUiProps = {
roboticArm: ArmBotStatus;
};
const RoboticArmContentUi: React.FC<VehicleContentUiProps> = ({ roboticArm }) => {
return (
<Html
// data
position={
new Vector3(
roboticArm.position[0],
roboticArm.point.position[1],
roboticArm.position[2]
)
}
// class none
// other
zIndexRange={[1, 0]}
prepend
sprite
center
distanceFactor={20}
>
<AssetDetailsCard name={roboticArm.modelName} status={roboticArm.state} />
</Html>
);
};
export default RoboticArmContentUi;

52
app/src/modules/simulation/ui3d/VehicleContentUi.tsx Normal file
View File

@ -0,0 +1,52 @@
import { Html } from "@react-three/drei";
import { Object3D, Vector3 } from "three";
import AssetDetailsCard from "../../../components/ui/simulation/AssetDetailsCard";
import { useFrame, useThree } from "@react-three/fiber";
import { useState } from "react";
type VehicleContentUiProps = {
vehicle: VehicleStatus;
};
const VehicleContentUi: React.FC<VehicleContentUiProps> = ({ vehicle }) => {
const { scene } = useThree();
const [htmlPosition, setHtmlPosition] = useState<[number, number, number]>([
0, 0, 0,
]);
const offset = new Vector3(0, 0.85, 0);
useFrame(() => {
const agvModel = scene.getObjectByProperty(
"uuid",
vehicle.modelUuid
) as Object3D;
if (agvModel) {
const worldPosition = offset.clone().applyMatrix4(agvModel.matrixWorld);
setHtmlPosition([worldPosition.x, worldPosition.y, worldPosition.z]);
}
});
return (
<Html
// data
position={
new Vector3(htmlPosition[0], vehicle.point.position[1], htmlPosition[2])
}
// class none
// other
zIndexRange={[1, 0]}
prepend
sprite
center
distanceFactor={20}
>
<AssetDetailsCard
name={vehicle.modelName}
status={vehicle.state}
count={vehicle.currentLoad}
totalCapacity={vehicle.point.action.loadCapacity}
/>
</Html>
);
};
export default VehicleContentUi;

29
app/src/modules/simulation/vehicle/instances/vehicleInstances.tsx
View File

@ -1,9 +1,7 @@
import React from "react";
import VehicleInstance from "./instance/vehicleInstance";
import { useVehicleStore } from "../../../../store/simulation/useVehicleStore";
import { Html } from "@react-three/drei";
import { Vector3 } from "three";
import AssetDetailsCard from "../../../../components/ui/simulation/AssetDetailsCard";
import VehicleContentUi from "../../ui3d/VehicleContentUi";
function VehicleInstances() {
const { vehicles } = useVehicleStore();
@ -13,30 +11,7 @@ function VehicleInstances() {
{vehicles.map((vehicle: VehicleStatus) => (
<>
<VehicleInstance agvDetail={vehicle} key={vehicle.modelUuid} />
<Html
// data
position={
new Vector3(
vehicle.position[0],
vehicle.point.position[1],
vehicle.position[2]
)
}
// class none
// other
zIndexRange={[1, 0]}
prepend
sprite
center
distanceFactor={20}
>
<AssetDetailsCard
name={vehicle.modelName}
status={vehicle.state}
count={vehicle.currentLoad}
totalCapacity={vehicle.point.action.loadCapacity}
/>
</Html>
<VehicleContentUi vehicle={vehicle} key={`${vehicle.modelUuid}-ui`} />
</>
))}
</>