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

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.

This commit is contained in:
Jerald-Golden-B 2025-05-03 10:28:59 +05:30
parent 9233bb97c8
commit d29c4ce48a
4 changed files with 193 additions and 306 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/src/components/layout/sidebarRight/properties/eventProperties/trigger/Trigger.tsx
View File

@ -110,8 +110,6 @@ const Trigger = ({ selectedPointData, type }: TriggerProps) => {
const triggeredModel = selectedTrigger?.triggeredAsset?.triggeredModel || { modelName: "Select Model", modelUuid: "" }; const triggeredModel = selectedTrigger?.triggeredAsset?.triggeredModel || { modelName: "Select Model", modelUuid: "" };
const triggeredPoint = selectedTrigger?.triggeredAsset?.triggeredPoint || { pointName: "Select Point", pointUuid: "" }; const triggeredPoint = selectedTrigger?.triggeredAsset?.triggeredPoint || { pointName: "Select Point", pointUuid: "" };
const triggeredAction = selectedTrigger?.triggeredAsset?.triggeredAction || { actionName: "Select Action", actionUuid: "" }; const triggeredAction = selectedTrigger?.triggeredAsset?.triggeredAction || { actionName: "Select Action", actionUuid: "" };
console.log('selectedTrigger: ', selectedTrigger);
console.log('triggeredAction: ', triggeredAction);
const modelOptions = getProductById(selectedProduct.productId)?.eventDatas || []; const modelOptions = getProductById(selectedProduct.productId)?.eventDatas || [];

143
app/src/modules/simulation/roboticArm/roboticArm.tsx
View File

@ -1,7 +1,6 @@
import { useEffect } from "react"; import { useEffect } from "react";
import RoboticArmInstances from "./instances/roboticArmInstances"; import RoboticArmInstances from "./instances/roboticArmInstances";
import { useArmBotStore } from "../../../store/simulation/useArmBotStore"; import { useArmBotStore } from "../../../store/simulation/useArmBotStore";
import { useFloorItems } from "../../../store/store";
import { useSelectedEventData, useSelectedEventSphere, useSelectedProduct } from "../../../store/simulation/useSimulationStore"; import { useSelectedEventData, useSelectedEventSphere, useSelectedProduct } from "../../../store/simulation/useSimulationStore";
import { useProductStore } from "../../../store/simulation/useProductStore"; import { useProductStore } from "../../../store/simulation/useProductStore";
import { usePlayButtonStore } from "../../../store/usePlayButtonStore"; import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
@ -14,148 +13,6 @@ function RoboticArm() {
const { selectedEventSphere } = useSelectedEventSphere(); const { selectedEventSphere } = useSelectedEventSphere();
const { selectedEventData } = useSelectedEventData(); const { selectedEventData } = useSelectedEventData();
const { isPlaying } = usePlayButtonStore(); 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(() => { useEffect(() => {
if (selectedProduct.productId) { if (selectedProduct.productId) {

352
app/src/modules/simulation/ui/arm/armBotUI.tsx
View File

@ -1,5 +1,5 @@
import React, { useCallback, useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { useSelectedAction, useSelectedEventData, useSelectedEventSphere, useSelectedProduct } from '../../../../store/simulation/useSimulationStore'; import { useSelectedAction, useSelectedEventData, useSelectedProduct } from '../../../../store/simulation/useSimulationStore';
import { useArmBotStore } from '../../../../store/simulation/useArmBotStore'; import { useArmBotStore } from '../../../../store/simulation/useArmBotStore';
import { useGLTF } from '@react-three/drei'; import { useGLTF } from '@react-three/drei';
import { useThree } from '@react-three/fiber'; 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 armPick from "../../../../assets/gltf-glb/arm_ui_pick.glb";
import armDrop from "../../../../assets/gltf-glb/arm_ui_drop.glb"; import armDrop from "../../../../assets/gltf-glb/arm_ui_drop.glb";
import useModuleStore from '../../../../store/useModuleStore'; import { upsertProductOrEventApi } from '../../../../services/simulation/UpsertProductOrEventApi';
type Positions = { type Positions = {
pick: [number, number, number]; pick: [number, number, number];
drop: [number, number, number]; drop: [number, number, number];
default: [number, number, number]; default: [number, number, number];
}; };
const ArmBotUI = () => { const ArmBotUI = () => {
const { getEventByModelUuid } = useProductStore(); const { getEventByModelUuid, updateAction } = useProductStore();
const { selectedEventData } = useSelectedEventData(); const { selectedEventData } = useSelectedEventData();
const { selectedProduct } = useSelectedProduct(); const { selectedProduct } = useSelectedProduct();
const { armBots, updateStartPoint, updateEndPoint } = useArmBotStore(); const { armBots } = useArmBotStore();
const { scene } = useThree(); const { scene } = useThree();
const { selectedAction } = useSelectedAction(); const { selectedAction } = useSelectedAction();
const armUiPick = useGLTF(armPick) as any; const armUiPick = useGLTF(armPick) as any;
const armUiDrop = useGLTF(armDrop) as any; const armUiDrop = useGLTF(armDrop) as any;
const [startPosition, setStartPosition] = useState<[number, number, number]>([0, 0, 0]); const [startPosition, setStartPosition] = useState<[number, number, number] | null>([0, 0, 0]);
const [endPosition, setEndPosition] = useState<[number, number, number]>([0, 0, 0]); const [endPosition, setEndPosition] = useState<[number, number, number] | null>([0, 0, 0]);
const [selectedArmBotData, setSelectedArmBotData] = useState<any>(null); const [selectedArmBotData, setSelectedArmBotData] = useState<any>(null);
// Fetch and setup selected ArmBot data const email = localStorage.getItem('email')
useEffect(() => { const organization = (email!.split("@")[1]).split(".")[0];
if (selectedEventData?.data.type === "roboticArm") {
const selectedArmBot = getEventByModelUuid(selectedProduct.productId, selectedEventData.data.modelUuid);
if (selectedArmBot?.type === "roboticArm") { const updateBackend = (
setSelectedArmBotData(selectedArmBot); productName: string,
const defaultPositions = getDefaultPositions(selectedArmBot.modelUuid); productId: string,
const matchingAction = armBots?.flatMap((robot: ArmBotStatus) => robot.point.actions) organization: string,
.find((action) => action.actionUuid === selectedAction.actionId); eventData: EventsSchema
if (matchingAction) { ) => {
const startPoint = matchingAction.process.startPoint; upsertProductOrEventApi({
const pickPosition = (!startPoint || (Array.isArray(startPoint) && startPoint.every(v => v === 0))) productName: productName,
? defaultPositions.pick productId: productId,
: startPoint; organization: organization,
eventDatas: eventData
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],
};
} }
return { // Fetch and setup selected ArmBot data
pick: [0.5, 1.5, 0], useEffect(() => {
drop: [-0.5, 1.5, 0], if (selectedEventData?.data.type === "roboticArm") {
default: [0, 1.5, 0], const selectedArmBot = getEventByModelUuid(selectedProduct.productId, selectedEventData.data.modelUuid);
};
}
function getLocalPosition(parentUuid: string, worldPosArray: [number, number, number] | null): [number, number, number] | null { if (selectedArmBot?.type === "roboticArm") {
if (worldPosArray) { setSelectedArmBotData(selectedArmBot);
const worldPos = new THREE.Vector3(...worldPosArray); const defaultPositions = getDefaultPositions(selectedArmBot.modelUuid);
const parentObject = scene.getObjectByProperty('uuid', parentUuid); 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 endPoint = matchingAction.process.endPoint;
const localPos = worldPos.clone(); const dropPosition = (!endPoint || (Array.isArray(endPoint) && endPoint.every(v => v === 0)))
parentObject.worldToLocal(localPos); ? defaultPositions.drop
return [localPos.x, localPos.y, localPos.z]; : endPoint;
}
}
return null;
}
const updatePointToState = (obj: THREE.Object3D) => { setStartPosition(pickPosition);
const { modelUuid, actionType, actionUuid } = obj.userData; setEndPosition(dropPosition);
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);
} }
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 (
<React.Fragment key={action.actionUuid}>
<group
position={new THREE.Vector3(...selectedArmBotData.position)}
rotation={new THREE.Euler(...selectedArmBotData.rotation)}
>
<PickDropPoints
position={startPosition}
modelUuid={selectedArmBotData.modelUuid}
pointUuid={selectedArmBotData.point.uuid}
actionType="pick"
actionUuid={action.actionUuid}
gltfScene={armUiPick.scene}
handlePointerDown={handlePointerDown}
isSelected={true}
/>
<PickDropPoints
position={endPosition}
modelUuid={selectedArmBotData.modelUuid}
pointUuid={selectedArmBotData.point.uuid}
actionType="drop"
actionUuid={action.actionUuid}
gltfScene={armUiDrop.scene}
handlePointerDown={handlePointerDown}
isSelected={true}
/>
</group>
</React.Fragment>
);
} 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 (
<React.Fragment key={action.actionUuid}>
<group
position={new THREE.Vector3(...selectedArmBotData.position)}
rotation={new THREE.Euler(...selectedArmBotData.rotation)}
>
{startPosition && endPosition && (
<>
<PickDropPoints
position={startPosition}
modelUuid={selectedArmBotData.modelUuid}
pointUuid={selectedArmBotData.point.uuid}
actionType="pick"
actionUuid={action.actionUuid}
gltfScene={armUiPick.scene}
handlePointerDown={handlePointerDown}
isSelected={true}
/>
<PickDropPoints
position={endPosition}
modelUuid={selectedArmBotData.modelUuid}
pointUuid={selectedArmBotData.point.uuid}
actionType="drop"
actionUuid={action.actionUuid}
gltfScene={armUiDrop.scene}
handlePointerDown={handlePointerDown}
isSelected={true}
/>
</>
)}
</group>
</React.Fragment>
);
} else {
return null; // important! must return something
}
})}
</>
);
}; };

2
app/src/store/simulation/useProductStore.ts
View File

@ -40,7 +40,7 @@ type ProductsStore = {
updates: Partial<ConveyorPointSchema['action'] | VehiclePointSchema['action'] | RoboticArmPointSchema['actions'][0] | MachinePointSchema['action'] | StoragePointSchema['action']> updates: Partial<ConveyorPointSchema['action'] | VehiclePointSchema['action'] | RoboticArmPointSchema['actions'][0] | MachinePointSchema['action'] | StoragePointSchema['action']>
) => EventsSchema | undefined; ) => EventsSchema | undefined;
// Trigger-level actions // Trigger-level actionss
addTrigger: ( addTrigger: (
productId: string, productId: string,
actionUuid: string, actionUuid: string,