arm ui added

app/src/modules/simulation/roboticArm/roboticArm.tsx

@@ -2,9 +2,17 @@ import { useEffect } from "react";
 import RoboticArmInstances from "./instances/roboticArmInstances";
 import { useArmBotStore } from "../../../store/simulation/useArmBotStore";
 import { useFloorItems } from "../../../store/store";
+import { useSelectedEventData, useSelectedEventSphere } from "../../../store/simulation/useSimulationStore";
+import { useEventsStore } from "../../../store/simulation/useEventsStore";
+import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
+import ArmBotUI from "../ui/arm/armBotUI";
 
 function RoboticArm() {
     const { armBots, addArmBot, removeArmBot } = useArmBotStore();
+    const { addEvent } = useEventsStore();
+    const { selectedEventSphere } = useSelectedEventSphere();
+    const { selectedEventData } = useSelectedEventData();
+    const { isPlaying } = usePlayButtonStore();
     const { floorItems } = useFloorItems();
     const armBotStatusSample: RoboticArmEventSchema[] = [
         {
@@ -157,11 +165,17 @@ function RoboticArm() {
 
     useEffect(() => {
 
-    }, [armBots]);
+        console.log('isPlaying: ', isPlaying);
+        console.log('selectedEventData: ', selectedEventData);
+        console.log('selectedEventSphere: ', selectedEventSphere);
+    }, [selectedEventData, selectedEventSphere, isPlaying]);
 
     return (
         <>
             <RoboticArmInstances />
+            {selectedEventSphere && selectedEventData?.data.type === "roboticArm" && !isPlaying &&
+                < ArmBotUI />
+            }
         </>
     );
 }

app/src/modules/simulation/ui/arm/armBotUI.tsx

@@ -0,0 +1,155 @@
+import React from 'react'
+import PickDropPoints from './PickDropPoints';
+import { useSelectedEventData, useSelectedEventSphere } from '../../../../store/simulation/useSimulationStore';
+import { useArmBotStore } from '../../../../store/simulation/useArmBotStore';
+import useModuleStore from '../../../../store/useModuleStore';
+import { useGLTF } from '@react-three/drei';
+import armPick from "../../../../assets/gltf-glb/arm_ui_pick.glb";
+import armDrop from "../../../../assets/gltf-glb/arm_ui_drop.glb";
+import useDraggableGLTF from './useDraggableGLTF';
+import * as THREE from "three";
+import { useThree } from '@react-three/fiber';
+const ArmBotUI = () => {
+    console.log("called");
+    const { selectedEventSphere } = useSelectedEventSphere();
+    const { selectedEventData } = useSelectedEventData();
+    const { armBots, updateArmBot } = useArmBotStore();
+    const armUiPick = useGLTF(armPick) as any;
+    const { scene } = useThree();
+    const armUiDrop = useGLTF(armDrop) as any;
+
+    const getDefaultPositions = (modelUuid: string) => {
+        const modelData = getModelByUuid(modelUuid);
+        if (modelData) {
+          
+          const baseX = modelData.position?.[0] || 0;
+          const baseY = 2.6;
+          const baseZ = modelData.position?.[2] || 0;
+          return {
+            pick: [baseX, baseY, baseZ + 0.4],
+            drop: [baseX, baseY, baseZ - 1.2],
+            default: [baseX, baseY, baseZ - 1.5],
+          };
+        }
+        return {
+          pick: [0.5, 1.5, 0],
+          drop: [-0.5, 1.5, 0],
+          default: [0, 1.5, 0],
+        };
+      };
+      const getModelByUuid = (modelUuid: string) => {
+        try {
+          const modelsJson = localStorage.getItem("FloorItems");
+          if (modelsJson) {
+            const models = JSON.parse(modelsJson);
+            return models.find((m: any) => m.modeluuid === modelUuid);
+          }
+          const storeModels = (useModuleStore.getState() as any).models || [];
+          return storeModels.find((m: any) => m.modelUuid === modelUuid);
+        } catch (error) { }
+        return null;
+      };
+       const updatePointToState = (obj: THREE.Object3D) => {
+          const { modelUuid, pointUuid, actionType, actionUuid } = obj.userData;
+       
+          const newPosition = new THREE.Vector3();
+          obj.getWorldPosition(newPosition);
+          const worldPositionArray = newPosition.toArray();
+      
+          const armBot = armBots.find((a) => a.modelUuid === modelUuid);
+          if (!armBot) return;
+      
+          const updatedActions = armBot.point.actions.map((action: any) => {
+            if (action.actionUuid === actionUuid) {
+              const updatedProcess = { ...action.process };
+              
+              if (actionType === "pick") {
+                updatedProcess.startPoint = getLocalPosition(modelUuid, worldPositionArray);
+              }
+              if (actionType === "drop") {
+                updatedProcess.endPoint = getLocalPosition(modelUuid, worldPositionArray);
+              }
+              return {
+                ...action,
+                process: updatedProcess,
+              };
+            }
+            return action;
+          });
+      
+          updateArmBot(modelUuid, {
+            point: {
+              ...armBot.point,
+              actions: updatedActions,
+            },
+          });
+        };
+        function getLocalPosition(parentUuid: string, worldPosArray: [number, number, number] | null): [number, number, number] | null {
+            if (worldPosArray) {
+              const worldPos = new THREE.Vector3(...worldPosArray);
+              const localPos = worldPos.clone();
+        
+              const parentObject = scene.getObjectByProperty('uuid', parentUuid);
+              if (parentObject) {
+                parentObject.worldToLocal(localPos);
+                
+                return [localPos.x, localPos.y, localPos.z];
+              } else {
+                
+              }
+            }
+            return null;
+          }
+        const { handlePointerDown } = useDraggableGLTF(updatePointToState);
+    
+        return (
+            <>
+              {armBots.map((event: any) => {
+                const defaultPositions = getDefaultPositions(event.modelUuid);
+                const isSelected =
+                  selectedEventSphere?.userData?.modelUuid === event.modelUuid;
+          
+                return event.point.actions.map((action: any) => {
+                  if (action.actionType === "pickAndPlace") {
+                    const pickPosition = action.process.startPoint || defaultPositions.pick;
+                    const dropPosition = action.process.endPoint || defaultPositions.drop;
+          
+                    return (
+                      <React.Fragment key={action.actionUuid}>
+                        {/* Pick Point */}
+                        <PickDropPoints
+                          position={pickPosition}
+                          modelUuid={event.modelUuid}
+                          pointUuid={event.point.uuid}
+                          actionType="pick"
+                          actionUuid={action.actionUuid}
+                          gltfScene={armUiPick.scene}
+                          selectedPoint={selectedEventSphere}
+                          handlePointerDown={handlePointerDown}
+                          isSelected={isSelected}
+                        />
+          
+                        {/* Drop Point */}
+                        <PickDropPoints
+                          position={dropPosition}
+                          modelUuid={event.modelUuid}
+                          pointUuid={event.point.uuid}
+                          actionType="drop"
+                          actionUuid={action.actionUuid}
+                          gltfScene={armUiDrop.scene}
+                          selectedPoint={selectedEventSphere}
+                          handlePointerDown={handlePointerDown}
+                          isSelected={isSelected}
+                        />
+                      </React.Fragment>
+                    );
+                  }
+                  return null;
+                });
+              })}
+            </>
+          );
+          
+
+}
+export default ArmBotUI