From 7bc7a49b42cf8bbc40acd3a1cbaf9b95b3ba106b Mon Sep 17 00:00:00 2001 From: Vishnu Date: Thu, 8 May 2025 19:08:57 +0530 Subject: [PATCH] refactor: Remove Html wrapper and integrate AssetDetailsCard into new RoboticArmContentUi and VehicleContentUi components --- .../instances/roboticArmInstances.tsx | 24 +-------- .../simulation/ui3d/RoboticArmContentUi.tsx | 34 ++++++++++++ .../simulation/ui3d/VehicleContentUi.tsx | 52 +++++++++++++++++++ .../vehicle/instances/vehicleInstances.tsx | 29 +---------- 4 files changed, 90 insertions(+), 49 deletions(-) create mode 100644 app/src/modules/simulation/ui3d/RoboticArmContentUi.tsx create mode 100644 app/src/modules/simulation/ui3d/VehicleContentUi.tsx diff --git a/app/src/modules/simulation/roboticArm/instances/roboticArmInstances.tsx b/app/src/modules/simulation/roboticArm/instances/roboticArmInstances.tsx index fb00e5a..f3ec98e 100644 --- a/app/src/modules/simulation/roboticArm/instances/roboticArmInstances.tsx +++ b/app/src/modules/simulation/roboticArm/instances/roboticArmInstances.tsx @@ -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) => ( <> - - - + ))} diff --git a/app/src/modules/simulation/ui3d/RoboticArmContentUi.tsx b/app/src/modules/simulation/ui3d/RoboticArmContentUi.tsx new file mode 100644 index 0000000..c85e387 --- /dev/null +++ b/app/src/modules/simulation/ui3d/RoboticArmContentUi.tsx @@ -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 = ({ roboticArm }) => { + return ( + + + + ); +}; + +export default RoboticArmContentUi; diff --git a/app/src/modules/simulation/ui3d/VehicleContentUi.tsx b/app/src/modules/simulation/ui3d/VehicleContentUi.tsx new file mode 100644 index 0000000..0173081 --- /dev/null +++ b/app/src/modules/simulation/ui3d/VehicleContentUi.tsx @@ -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 = ({ 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 ( + + + + ); +}; + +export default VehicleContentUi; diff --git a/app/src/modules/simulation/vehicle/instances/vehicleInstances.tsx b/app/src/modules/simulation/vehicle/instances/vehicleInstances.tsx index 8660f90..0ea7227 100644 --- a/app/src/modules/simulation/vehicle/instances/vehicleInstances.tsx +++ b/app/src/modules/simulation/vehicle/instances/vehicleInstances.tsx @@ -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) => ( <> - - - + ))}