From d29c4ce48a43ded8615ec7debe174f4691151afd Mon Sep 17 00:00:00 2001 From: Jerald-Golden-B Date: Sat, 3 May 2025 10:28:59 +0530 Subject: [PATCH] Refactor Trigger component: remove console logs and clean up unused code in Trigger and RoboticArm components; update ArmBotUI to improve state management and backend integration; fix typo in useProductStore comments. --- .../eventProperties/trigger/Trigger.tsx | 2 - .../simulation/roboticArm/roboticArm.tsx | 143 ------- .../modules/simulation/ui/arm/armBotUI.tsx | 352 ++++++++++-------- app/src/store/simulation/useProductStore.ts | 2 +- 4 files changed, 193 insertions(+), 306 deletions(-) diff --git a/app/src/components/layout/sidebarRight/properties/eventProperties/trigger/Trigger.tsx b/app/src/components/layout/sidebarRight/properties/eventProperties/trigger/Trigger.tsx index f48f875..306865f 100644 --- a/app/src/components/layout/sidebarRight/properties/eventProperties/trigger/Trigger.tsx +++ b/app/src/components/layout/sidebarRight/properties/eventProperties/trigger/Trigger.tsx @@ -110,8 +110,6 @@ const Trigger = ({ selectedPointData, type }: TriggerProps) => { const triggeredModel = selectedTrigger?.triggeredAsset?.triggeredModel || { modelName: "Select Model", modelUuid: "" }; const triggeredPoint = selectedTrigger?.triggeredAsset?.triggeredPoint || { pointName: "Select Point", pointUuid: "" }; const triggeredAction = selectedTrigger?.triggeredAsset?.triggeredAction || { actionName: "Select Action", actionUuid: "" }; - console.log('selectedTrigger: ', selectedTrigger); - console.log('triggeredAction: ', triggeredAction); const modelOptions = getProductById(selectedProduct.productId)?.eventDatas || []; diff --git a/app/src/modules/simulation/roboticArm/roboticArm.tsx b/app/src/modules/simulation/roboticArm/roboticArm.tsx index 2cb9ea6..446d1b0 100644 --- a/app/src/modules/simulation/roboticArm/roboticArm.tsx +++ b/app/src/modules/simulation/roboticArm/roboticArm.tsx @@ -1,7 +1,6 @@ import { useEffect } from "react"; import RoboticArmInstances from "./instances/roboticArmInstances"; import { useArmBotStore } from "../../../store/simulation/useArmBotStore"; -import { useFloorItems } from "../../../store/store"; import { useSelectedEventData, useSelectedEventSphere, useSelectedProduct } from "../../../store/simulation/useSimulationStore"; import { useProductStore } from "../../../store/simulation/useProductStore"; import { usePlayButtonStore } from "../../../store/usePlayButtonStore"; @@ -14,148 +13,6 @@ function RoboticArm() { const { selectedEventSphere } = useSelectedEventSphere(); const { selectedEventData } = useSelectedEventData(); const { isPlaying } = usePlayButtonStore(); - const { floorItems } = useFloorItems(); - - const armBotStatusSample: RoboticArmEventSchema[] = [ - { - state: "idle", - modelUuid: "8790b4d5-fb6e-49e0-8161-04945fe3fdc4", - modelName: "ArmBot-X200", - position: [4.317833205016363, 0, -3.2829924989068715], - rotation: [-1.3768690876192207e-15, 1.4883085074751308, 1.5407776675834467e-15], - type: "roboticArm", - speed: 1.5, - point: { - uuid: "point-123", - position: [0, 2.6, 0], - rotation: [0, 0, 0], - actions: [ - { - actionUuid: "action-003", - actionName: "Pick Component", - actionType: "pickAndPlace", - process: { - startPoint: [-1, 2, 1], - endPoint: [-2, 1, -1], - // startPoint: [-2, 1, -1], - // endPoint: [-1, 2, 1], - }, - triggers: [ - { - triggerUuid: "trigger-001", - triggerName: "Start Trigger", - triggerType: "onStart", - delay: 0, - triggeredAsset: { - triggeredModel: { - modelName: "Conveyor A1", - modelUuid: "conveyor-01", - }, - triggeredPoint: { - pointName: "Start Point", - pointUuid: "conveyor-01-point-001", - }, - triggeredAction: { - actionName: "Move Forward", - actionUuid: "conveyor-action-01", - }, - }, - }, - { - triggerUuid: "trigger-002", - triggerName: "Complete Trigger", - triggerType: "onComplete", - delay: 0, - triggeredAsset: { - triggeredModel: { - modelName: "StaticMachine B2", - modelUuid: "machine-02", - }, - triggeredPoint: { - pointName: "Receive Point", - pointUuid: "machine-02-point-001", - }, - triggeredAction: { - actionName: "Process Part", - actionUuid: "machine-action-01", - }, - }, - }, - ], - }, - ], - }, - }, - { - state: "idle", - modelUuid: "armbot-xyz-002", - modelName: "ArmBot-X200", - position: [95.94347308985614, 0, 6.742905194869091], - rotation: [0, 0, 0], - type: "roboticArm", - speed: 0.1, - point: { - uuid: "point-123", - position: [0, 1.5, 0], - rotation: [0, 0, 0], - actions: [ - { - actionUuid: "action-001", - actionName: "Pick Component", - actionType: "pickAndPlace", - process: { - // startPoint: [2.52543010919071, 0, 8.433681161200905], - // endPoint: [95.3438373267953, 0, 9.0279187421610025], - startPoint: null, - endPoint: null, - }, - triggers: [ - { - triggerUuid: "trigger-001", - triggerName: "Start Trigger", - triggerType: "onStart", - delay: 0, - triggeredAsset: { - triggeredModel: { - modelName: "Conveyor A1", - modelUuid: "conveyor-01", - }, - triggeredPoint: { - pointName: "Start Point", - pointUuid: "conveyor-01-point-001", - }, - triggeredAction: { - actionName: "Move Forward", - actionUuid: "conveyor-action-01", - }, - }, - }, - { - triggerUuid: "trigger-002", - triggerName: "Complete Trigger", - triggerType: "onComplete", - delay: 0, - triggeredAsset: { - triggeredModel: { - modelName: "StaticMachine B2", - modelUuid: "machine-02", - }, - triggeredPoint: { - pointName: "Receive Point", - pointUuid: "machine-02-point-001", - }, - triggeredAction: { - actionName: "Process Part", - actionUuid: "machine-action-01", - }, - }, - }, - ], - }, - ], - }, - }, - ]; useEffect(() => { if (selectedProduct.productId) { diff --git a/app/src/modules/simulation/ui/arm/armBotUI.tsx b/app/src/modules/simulation/ui/arm/armBotUI.tsx index 8a2d18f..01e631e 100644 --- a/app/src/modules/simulation/ui/arm/armBotUI.tsx +++ b/app/src/modules/simulation/ui/arm/armBotUI.tsx @@ -1,5 +1,5 @@ -import React, { useCallback, useEffect, useState } from 'react'; -import { useSelectedAction, useSelectedEventData, useSelectedEventSphere, useSelectedProduct } from '../../../../store/simulation/useSimulationStore'; +import React, { useEffect, useState } from 'react'; +import { useSelectedAction, useSelectedEventData, useSelectedProduct } from '../../../../store/simulation/useSimulationStore'; import { useArmBotStore } from '../../../../store/simulation/useArmBotStore'; import { useGLTF } from '@react-three/drei'; import { useThree } from '@react-three/fiber'; @@ -10,180 +10,212 @@ import * as THREE from 'three'; import armPick from "../../../../assets/gltf-glb/arm_ui_pick.glb"; import armDrop from "../../../../assets/gltf-glb/arm_ui_drop.glb"; -import useModuleStore from '../../../../store/useModuleStore'; +import { upsertProductOrEventApi } from '../../../../services/simulation/UpsertProductOrEventApi'; type Positions = { - pick: [number, number, number]; - drop: [number, number, number]; - default: [number, number, number]; + pick: [number, number, number]; + drop: [number, number, number]; + default: [number, number, number]; }; const ArmBotUI = () => { - const { getEventByModelUuid } = useProductStore(); - const { selectedEventData } = useSelectedEventData(); - const { selectedProduct } = useSelectedProduct(); - const { armBots, updateStartPoint, updateEndPoint } = useArmBotStore(); - const { scene } = useThree(); - const { selectedAction } = useSelectedAction(); + const { getEventByModelUuid, updateAction } = useProductStore(); + const { selectedEventData } = useSelectedEventData(); + const { selectedProduct } = useSelectedProduct(); + const { armBots } = useArmBotStore(); + const { scene } = useThree(); + const { selectedAction } = useSelectedAction(); - const armUiPick = useGLTF(armPick) as any; - const armUiDrop = useGLTF(armDrop) as any; + const armUiPick = useGLTF(armPick) as any; + const armUiDrop = useGLTF(armDrop) as any; - const [startPosition, setStartPosition] = useState<[number, number, number]>([0, 0, 0]); - const [endPosition, setEndPosition] = useState<[number, number, number]>([0, 0, 0]); - const [selectedArmBotData, setSelectedArmBotData] = useState(null); + const [startPosition, setStartPosition] = useState<[number, number, number] | null>([0, 0, 0]); + const [endPosition, setEndPosition] = useState<[number, number, number] | null>([0, 0, 0]); + const [selectedArmBotData, setSelectedArmBotData] = useState(null); - // Fetch and setup selected ArmBot data - useEffect(() => { - if (selectedEventData?.data.type === "roboticArm") { - const selectedArmBot = getEventByModelUuid(selectedProduct.productId, selectedEventData.data.modelUuid); + const email = localStorage.getItem('email') + const organization = (email!.split("@")[1]).split(".")[0]; - if (selectedArmBot?.type === "roboticArm") { - setSelectedArmBotData(selectedArmBot); - const defaultPositions = getDefaultPositions(selectedArmBot.modelUuid); - const matchingAction = armBots?.flatMap((robot: ArmBotStatus) => robot.point.actions) - .find((action) => action.actionUuid === selectedAction.actionId); - if (matchingAction) { - const startPoint = matchingAction.process.startPoint; - const pickPosition = (!startPoint || (Array.isArray(startPoint) && startPoint.every(v => v === 0))) - ? defaultPositions.pick - : startPoint; - - const endPoint = matchingAction.process.endPoint; - const dropPosition = (!endPoint || (Array.isArray(endPoint) && endPoint.every(v => v === 0))) - ? defaultPositions.drop - : endPoint; - - setStartPosition(pickPosition); - setEndPosition(dropPosition); - } - } - } - }, [selectedEventData, selectedProduct, getEventByModelUuid, selectedAction]); - - - function getDefaultPositions(modelUuid: string): Positions { - const modelData = getEventByModelUuid(selectedProduct.productId, modelUuid); - - if (modelData?.type === "roboticArm") { - const baseX = modelData.point.position?.[0] || 0; - const baseY = modelData.point.position?.[1] || 0;; - const baseZ = modelData.point.position?.[2] || 0; - return { - pick: [baseX, baseY, baseZ + 0.5], - drop: [baseX, baseY, baseZ - 0.5], - default: [baseX, baseY, baseZ], - }; + const updateBackend = ( + productName: string, + productId: string, + organization: string, + eventData: EventsSchema + ) => { + upsertProductOrEventApi({ + productName: productName, + productId: productId, + organization: organization, + eventDatas: eventData + }) } - return { - pick: [0.5, 1.5, 0], - drop: [-0.5, 1.5, 0], - default: [0, 1.5, 0], - }; - } + // Fetch and setup selected ArmBot data + useEffect(() => { + if (selectedEventData?.data.type === "roboticArm") { + const selectedArmBot = getEventByModelUuid(selectedProduct.productId, selectedEventData.data.modelUuid); - function getLocalPosition(parentUuid: string, worldPosArray: [number, number, number] | null): [number, number, number] | null { - if (worldPosArray) { - const worldPos = new THREE.Vector3(...worldPosArray); - const parentObject = scene.getObjectByProperty('uuid', parentUuid); + if (selectedArmBot?.type === "roboticArm") { + setSelectedArmBotData(selectedArmBot); + const defaultPositions = getDefaultPositions(selectedArmBot.modelUuid); + const matchingAction = armBots?.flatMap((robot: ArmBotStatus) => robot.point.actions) + .find((action) => action.actionUuid === selectedAction.actionId); + if (matchingAction) { + const startPoint = matchingAction.process.startPoint; + const pickPosition = (!startPoint || (Array.isArray(startPoint) && startPoint.every(v => v === 0))) + ? defaultPositions.pick + : startPoint; - if (parentObject) { - const localPos = worldPos.clone(); - parentObject.worldToLocal(localPos); - return [localPos.x, localPos.y, localPos.z]; - } - } - return null; - } + const endPoint = matchingAction.process.endPoint; + const dropPosition = (!endPoint || (Array.isArray(endPoint) && endPoint.every(v => v === 0))) + ? defaultPositions.drop + : endPoint; - const updatePointToState = (obj: THREE.Object3D) => { - const { modelUuid, actionType, actionUuid } = obj.userData; - const newPosition = new THREE.Vector3(); - obj.getWorldPosition(newPosition); - const worldPositionArray = newPosition.toArray() as [number, number, number]; - - if (selectedEventData?.data.type === "roboticArm") { - const selectedArmBot = getEventByModelUuid(selectedProduct.productId, selectedEventData.data.modelUuid); - - const armBot = selectedArmBot?.modelUuid === modelUuid ? selectedArmBot : null; - if (!armBot) return; - - if (armBot.type === "roboticArm") { - armBot?.point?.actions?.map((action: any) => { - if (action.actionUuid === actionUuid) { - const updatedProcess = { ...action.process }; - - if (actionType === "pick") { - updatedProcess.startPoint = getLocalPosition(modelUuid, worldPositionArray); - setStartPosition(updatedProcess.startPoint) - updateStartPoint(modelUuid, actionUuid, updatedProcess.startPoint); - } else if (actionType === "drop") { - updatedProcess.endPoint = getLocalPosition(modelUuid, worldPositionArray); - setEndPosition(updatedProcess.endPoint) - updateEndPoint(modelUuid, actionUuid, updatedProcess.endPoint); + setStartPosition(pickPosition); + setEndPosition(dropPosition); + } } - return { - ...action, - process: updatedProcess, - }; - } - return action; - }); - - } - } - } - - useEffect(() => { - - - }, [armBots]) - - const { handlePointerDown } = useDraggableGLTF(updatePointToState); - - if (!selectedArmBotData || !Array.isArray(selectedArmBotData.point?.actions)) { - return null; // avoid rendering if no data yet - } - return ( - <> - {selectedArmBotData.point.actions.map((action: any) => { - if (action.actionUuid === selectedAction.actionId) { - return ( - - - - - - - ); - } else { - return null; // important! must return something } - })} - - ); + }, [selectedEventData, selectedProduct, getEventByModelUuid, selectedAction, armBots]); + + + function getDefaultPositions(modelUuid: string): Positions { + const modelData = getEventByModelUuid(selectedProduct.productId, modelUuid); + + if (modelData?.type === "roboticArm") { + const baseX = modelData.point.position?.[0] || 0; + const baseY = modelData.point.position?.[1] || 0;; + const baseZ = modelData.point.position?.[2] || 0; + return { + pick: [baseX, baseY, baseZ + 0.5], + drop: [baseX, baseY, baseZ - 0.5], + default: [baseX, baseY, baseZ], + }; + } + + return { + pick: [0.5, 1.5, 0], + drop: [-0.5, 1.5, 0], + default: [0, 1.5, 0], + }; + } + + function getLocalPosition(parentUuid: string, worldPosArray: [number, number, number] | null): [number, number, number] | null { + if (worldPosArray) { + const worldPos = new THREE.Vector3(...worldPosArray); + const parentObject = scene.getObjectByProperty('uuid', parentUuid); + + if (parentObject) { + const localPos = worldPos.clone(); + parentObject.worldToLocal(localPos); + return [localPos.x, localPos.y, localPos.z]; + } + } + return null; + } + + const updatePointToState = (obj: THREE.Object3D) => { + const { modelUuid, actionType, actionUuid } = obj.userData; + const newPosition = new THREE.Vector3(); + obj.getWorldPosition(newPosition); + const worldPositionArray = newPosition.toArray() as [number, number, number]; + + if (selectedEventData?.data.type === "roboticArm") { + const selectedArmBot = getEventByModelUuid(selectedProduct.productId, selectedEventData.data.modelUuid); + + const armBot = selectedArmBot?.modelUuid === modelUuid ? selectedArmBot : null; + if (!armBot) return; + + if (armBot.type === "roboticArm") { + armBot?.point?.actions?.map((action) => { + if (action.actionUuid === actionUuid) { + const updatedProcess = { ...action.process }; + + if (actionType === "pick") { + updatedProcess.startPoint = getLocalPosition(modelUuid, worldPositionArray); + setStartPosition(updatedProcess.startPoint) + + } else if (actionType === "drop") { + updatedProcess.endPoint = getLocalPosition(modelUuid, worldPositionArray); + setEndPosition(updatedProcess.endPoint) + } + + const event = updateAction(selectedProduct.productId, + actionUuid, + { + actionUuid: action.actionUuid, + process: updatedProcess, + } + ) + + if (event) { + updateBackend( + selectedProduct.productName, + selectedProduct.productId, + organization, + event + ); + } + return { + ...action, + process: updatedProcess, + }; + } + return action; + }); + + } + } + } + + const { handlePointerDown } = useDraggableGLTF(updatePointToState); + + if (!selectedArmBotData || !Array.isArray(selectedArmBotData.point?.actions)) { + return null; // avoid rendering if no data yet + } + return ( + <> + {selectedArmBotData.point.actions.map((action: any) => { + if (action.actionUuid === selectedAction.actionId) { + return ( + + + {startPosition && endPosition && ( + <> + + + + )} + + + ); + } else { + return null; // important! must return something + } + })} + + ); }; diff --git a/app/src/store/simulation/useProductStore.ts b/app/src/store/simulation/useProductStore.ts index 8b83cdd..3fbaa76 100644 --- a/app/src/store/simulation/useProductStore.ts +++ b/app/src/store/simulation/useProductStore.ts @@ -40,7 +40,7 @@ type ProductsStore = { updates: Partial ) => EventsSchema | undefined; - // Trigger-level actions + // Trigger-level actionss addTrigger: ( productId: string, actionUuid: string,