Refactor multiple components: streamline action handling in ActionsList, RoboticArmMechanics, and Trigger; update vehicle and robotic arm data management in Products and Vehicles; unify action naming in loadInitialFloorItems, copyPasteControls, and duplicationControls; enhance ArmBotUI with selected event sphere integration.

This commit is contained in:
Jerald-Golden-B 2025-05-03 12:25:10 +05:30
parent 52c6017649
commit 75699e7199
12 changed files with 102 additions and 95 deletions

View File

@ -36,7 +36,7 @@ const ActionsList: React.FC<ActionsListProps> = ({
const handleRenameAction = (newName: string) => {
if (!selectedAction.actionId) return;
const event = renameAction(selectedProduct.productId, selectedAction.actionId, newName);
setSelectedAction(selectedAction.actionId, newName);
if (event) {
upsertProductOrEventApi({
productName: selectedProduct.productName,

View File

@ -14,7 +14,7 @@ function RoboticArmMechanics() {
const [activeOption, setActiveOption] = useState<"default" | "pickAndPlace">("default");
const [selectedPointData, setSelectedPointData] = useState<RoboticArmPointSchema | undefined>();
const { selectedEventData } = useSelectedEventData();
const { getPointByUuid, getEventByModelUuid, updateEvent, updateAction, addAction, removeAction } = useProductStore();
const { getPointByUuid, getEventByModelUuid, getActionByUuid, updateEvent, updateAction, addAction, removeAction } = useProductStore();
const { selectedProduct } = useSelectedProduct();
const { selectedAction, setSelectedAction, clearSelectedAction } = useSelectedAction();
@ -28,20 +28,28 @@ function RoboticArmMechanics() {
selectedEventData.data.modelUuid,
selectedEventData.selectedPoint
) as RoboticArmPointSchema | undefined;
if (point?.actions) {
setSelectedPointData(point);
setActiveOption(point.actions[0].actionType as "default" | "pickAndPlace");
if (point.actions.length > 0 && !selectedAction.actionId) {
setSelectedAction(
point.actions[0].actionUuid,
point.actions[0].actionName
);
const action = getActionByUuid(selectedProduct.productId, selectedAction.actionId) as RoboticArmPointSchema["actions"][0] | undefined;
if (action) {
if (point?.actions) {
setSelectedPointData(point);
if (point.actions.length > 0 && action) {
setActiveOption(action.actionType as "default" | "pickAndPlace");
setSelectedAction(selectedAction.actionId, selectedAction.actionName);
}
}
} else {
if (point?.actions) {
setSelectedPointData(point);
if (point.actions.length > 0) {
setActiveOption(point.actions[0].actionType as "default" | "pickAndPlace");
setSelectedAction(point.actions[0].actionUuid, point.actions[0].actionName);
}
}
}
} else {
clearSelectedAction();
}
}, [clearSelectedAction, getPointByUuid, selectedAction.actionId, selectedEventData, selectedProduct, setSelectedAction,]);
}, [selectedAction, selectedEventData, selectedProduct]);
const updateBackend = (
productName: string,
@ -280,7 +288,7 @@ function RoboticArmMechanics() {
/>
</div>
<div className="tirgger">
<Trigger selectedPointData={selectedPointData as any} type= {'RoboticArm'} />
<Trigger selectedPointData={selectedPointData as any} type={'RoboticArm'} />
</div>
</div>
)}

View File

@ -20,7 +20,7 @@ type TriggerProps = {
const Trigger = ({ selectedPointData, type }: TriggerProps) => {
const [currentAction, setCurrentAction] = useState<string | undefined>();
const { selectedProduct } = useSelectedProduct();
const { getActionByUuid, addTrigger, removeTrigger, updateTrigger, renameTrigger, getProductById } = useProductStore();
const { getActionByUuid, getEventByModelUuid, getPointByUuid, addTrigger, removeTrigger, updateTrigger, renameTrigger, getProductById } = useProductStore();
const [triggers, setTriggers] = useState<TriggerSchema[]>([]);
const [selectedTrigger, setSelectedTrigger] = useState<TriggerSchema | undefined>();
const [activeOption, setActiveOption] = useState<"onComplete" | "onStart" | "onStop" | "delay" | "onError">("onComplete");
@ -107,14 +107,14 @@ 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: "" };
const triggeredModel = getEventByModelUuid(selectedProduct.productId, selectedTrigger?.triggeredAsset?.triggeredModel?.modelUuid || "");
const triggeredPoint = getPointByUuid(selectedProduct.productId, triggeredModel?.modelUuid || '', selectedTrigger?.triggeredAsset?.triggeredPoint?.pointUuid || "");
const triggeredAction = getActionByUuid(selectedProduct.productId, selectedTrigger?.triggeredAsset?.triggeredAction?.actionUuid || '');
const modelOptions = getProductById(selectedProduct.productId)?.eventDatas || [];
const pointOptions: PointsScheme[] = useMemo(() => {
if (!triggeredModel.modelUuid) return [];
if (!triggeredModel) return [];
const model = modelOptions.find(m => m.modelUuid === triggeredModel.modelUuid);
if (!model) return [];
@ -125,11 +125,11 @@ const Trigger = ({ selectedPointData, type }: TriggerProps) => {
return [(model as VehicleEventSchema | RoboticArmEventSchema | MachineEventSchema | StorageEventSchema).point];
}
return [];
}, [triggeredModel.modelUuid, modelOptions]);
}, [triggeredModel, modelOptions]);
const actionOptions: any = useMemo(() => {
if (!triggeredPoint.pointUuid) return [];
const point = pointOptions.find((p) => p.uuid === triggeredPoint.pointUuid);
if (!triggeredPoint) return [];
const point = pointOptions.find((p) => p.uuid === triggeredPoint.uuid);
if (!point) return [];
if ('action' in point) {
@ -140,7 +140,7 @@ const Trigger = ({ selectedPointData, type }: TriggerProps) => {
return typedPoint.actions;
}
return [];
}, [triggeredPoint.pointUuid, pointOptions]);
}, [triggeredPoint, pointOptions]);
const handleModelSelect = (option: string, triggerUuid: string) => {
if (!selectedProduct) return;
@ -296,19 +296,19 @@ const Trigger = ({ selectedPointData, type }: TriggerProps) => {
<div className="trigger-options">
<LabledDropdown
label="Triggered Object"
defaultOption={triggeredModel.modelName}
defaultOption={triggeredModel?.modelName || ""}
options={[...modelOptions.map((option) => (option.modelName))]}
onSelect={(option) => { handleModelSelect(option, selectedTrigger.triggerUuid) }}
/>
<LabledDropdown
label="Triggered Point"
defaultOption={triggeredPoint.pointName}
options={[...pointOptions.map((option) => (`Point ${option.uuid.slice(0, 5)}`))]}
defaultOption={`Point ${triggeredPoint?.uuid.slice(0, 4)}`}
options={[...pointOptions.map((option) => (`Point ${option.uuid.slice(0, 4)}`))]}
onSelect={(option) => { handlePointSelect(option, selectedTrigger.triggerUuid) }}
/>
<LabledDropdown
label="Triggered Action"
defaultOption={triggeredAction.actionName}
defaultOption={triggeredAction?.actionName || ''}
options={[...actionOptions.map((option: any) => (option.actionName))]}
onSelect={(option) => { handleActionSelect(option, selectedTrigger.triggerUuid) }}
/>

View File

@ -228,7 +228,7 @@ function processLoadedModel(
rotation: [point.rotation[0], point.rotation[1], point.rotation[2]],
action: {
actionUuid: THREE.MathUtils.generateUUID(),
actionName: `Action ${index + 1}`,
actionName: `Action 1`,
actionType: 'default',
material: 'Default material',
delay: 0,

View File

@ -173,7 +173,7 @@ const CopyPasteControls = ({ itemsGroupRef, copiedObjects, setCopiedObjects, pas
rotation: [point.rotation[0], point.rotation[1], point.rotation[2]],
action: {
actionUuid: THREE.MathUtils.generateUUID(),
actionName: `Action ${index}`,
actionName: `Action 1`,
actionType: 'default',
material: 'Default Material',
delay: 0,

View File

@ -151,7 +151,7 @@ const DuplicationControls = ({ itemsGroupRef, duplicatedObjects, setDuplicatedOb
rotation: [point.rotation[0], point.rotation[1], point.rotation[2]],
action: {
actionUuid: THREE.MathUtils.generateUUID(),
actionName: `Action ${index}`,
actionName: `Action 1`,
actionType: 'default',
material: 'Default Material',
delay: 0,

View File

@ -19,7 +19,7 @@ function PointsCreator() {
const [transformMode, setTransformMode] = useState<"translate" | "rotate" | null>(null);
const sphereRefs = useRef<{ [key: string]: THREE.Mesh }>({});
const { selectedEventSphere, setSelectedEventSphere, clearSelectedEventSphere, } = useSelectedEventSphere();
const { selectedEventData, setSelectedEventData, clearSelectedEventData } = useSelectedEventData();
const { setSelectedEventData, clearSelectedEventData } = useSelectedEventData();
useEffect(() => {
if (selectedEventSphere) {
@ -120,7 +120,8 @@ function PointsCreator() {
return (
<group
key={i}
position={new THREE.Vector3(...event.position)}
position={event.position}
rotation={event.rotation}
>
{event.points.map((point, j) => (
<mesh
@ -150,7 +151,8 @@ function PointsCreator() {
return (
<group
key={i}
position={new THREE.Vector3(...event.position)}
position={event.position}
rotation={event.rotation}
>
<mesh
name="Event-Sphere"
@ -177,7 +179,8 @@ function PointsCreator() {
return (
<group
key={i}
position={new THREE.Vector3(...event.position)}
position={event.position}
rotation={event.rotation}
>
<mesh
name="Event-Sphere"
@ -204,7 +207,8 @@ function PointsCreator() {
return (
<group
key={i}
position={new THREE.Vector3(...event.position)}
position={event.position}
rotation={event.rotation}
>
<mesh
name="Event-Sphere"

View File

@ -5,10 +5,14 @@ import { useSelectedProduct } from '../../../store/simulation/useSimulationStore
import AddOrRemoveEventsInProducts from './events/addOrRemoveEventsInProducts';
import { upsertProductOrEventApi } from '../../../services/simulation/UpsertProductOrEventApi';
import { getAllProductsApi } from '../../../services/simulation/getallProductsApi';
import { useVehicleStore } from '../../../store/simulation/useVehicleStore';
import { useArmBotStore } from '../../../store/simulation/useArmBotStore';
function Products() {
const { addProduct, setProducts } = useProductStore();
const { setSelectedProduct } = useSelectedProduct();
const { products, getProductById, addProduct, setProducts } = useProductStore();
const { selectedProduct, setSelectedProduct } = useSelectedProduct();
const { addVehicle, clearvehicles } = useVehicleStore();
const { addArmBot, clearArmBots } = useArmBotStore();
useEffect(() => {
const email = localStorage.getItem('email')
@ -27,6 +31,34 @@ function Products() {
})
}, [])
useEffect(() => {
if (selectedProduct.productId) {
const product = getProductById(selectedProduct.productId);
if (product) {
clearvehicles();
product.eventDatas.forEach(events => {
if (events.type === 'vehicle') {
addVehicle(selectedProduct.productId, events);
}
});
}
}
}, [selectedProduct, products]);
useEffect(() => {
if (selectedProduct.productId) {
const product = getProductById(selectedProduct.productId);
if (product) {
clearArmBots();
product.eventDatas.forEach(events => {
if (events.type === 'roboticArm') {
addArmBot(selectedProduct.productId, events);
}
});
}
}
}, [selectedProduct, products]);
return (
<>

View File

@ -1,46 +1,27 @@
import { useEffect } from "react";
import RoboticArmInstances from "./instances/roboticArmInstances";
import { useArmBotStore } from "../../../store/simulation/useArmBotStore";
import { useSelectedEventData, useSelectedEventSphere, useSelectedProduct } from "../../../store/simulation/useSimulationStore";
import { useProductStore } from "../../../store/simulation/useProductStore";
import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
import { useSelectedEventData, useSelectedEventSphere } from "../../../store/simulation/useSimulationStore";
import ArmBotUI from "../ui/arm/armBotUI";
function RoboticArm() {
const { armBots, addArmBot, clearArmBots } = useArmBotStore();
const { products, getProductById } = useProductStore();
const { selectedProduct } = useSelectedProduct();
const { armBots } = useArmBotStore();
const { selectedEventSphere } = useSelectedEventSphere();
const { selectedEventData } = useSelectedEventData();
const { isPlaying } = usePlayButtonStore();
useEffect(() => {
if (selectedProduct.productId) {
const product = getProductById(selectedProduct.productId);
if (product) {
clearArmBots();
product.eventDatas.forEach(events => {
if (events.type === 'roboticArm') {
addArmBot(selectedProduct.productId, events);
}
});
}
}
}, [selectedProduct, products]);
useEffect(() => {
// console.log('armBots: ', armBots);
}, [armBots])
useEffect(() => {
}, [selectedEventData, selectedEventSphere, isPlaying]);
return (
<>
<RoboticArmInstances />
{selectedEventSphere && selectedEventData?.data.type === "roboticArm" &&
< ArmBotUI />
}
</>
);
}

View File

@ -1,5 +1,5 @@
import React, { useEffect, useState } from 'react';
import { useSelectedAction, useSelectedEventData, useSelectedProduct } from '../../../../store/simulation/useSimulationStore';
import { useSelectedAction, useSelectedEventData, useSelectedEventSphere, useSelectedProduct } from '../../../../store/simulation/useSimulationStore';
import { useGLTF } from '@react-three/drei';
import { useThree } from '@react-three/fiber';
import { useProductStore } from '../../../../store/simulation/useProductStore';
@ -19,7 +19,7 @@ type Positions = {
const ArmBotUI = () => {
const { getEventByModelUuid, updateAction, getActionByUuid } = useProductStore();
const { selectedEventData } = useSelectedEventData();
const { selectedEventSphere } = useSelectedEventSphere();
const { selectedProduct } = useSelectedProduct();
const { scene } = useThree();
const { selectedAction } = useSelectedAction();
@ -50,14 +50,14 @@ const ArmBotUI = () => {
// Fetch and setup selected ArmBot data
useEffect(() => {
if (selectedEventData?.data.type === "roboticArm") {
const selectedArmBot = getEventByModelUuid(selectedProduct.productId, selectedEventData.data.modelUuid);
if (selectedEventSphere) {
const selectedArmBot = getEventByModelUuid(selectedProduct.productId, selectedEventSphere.userData.modelUuid);
if (selectedArmBot?.type === "roboticArm") {
setSelectedArmBotData(selectedArmBot);
const defaultPositions = getDefaultPositions(selectedArmBot.modelUuid);
const matchingAction = getActionByUuid(selectedProduct.productId, selectedAction.actionId);
if (matchingAction) {
if (matchingAction && (matchingAction as RoboticArmPointSchema["actions"][0]).process) {
const startPoint = (matchingAction as RoboticArmPointSchema["actions"][0]).process.startPoint;
const pickPosition = (!startPoint || (Array.isArray(startPoint) && startPoint.every(v => v === 0)))
? defaultPositions.pick
@ -73,8 +73,7 @@ const ArmBotUI = () => {
}
}
}
}, [selectedEventData, selectedProduct, getEventByModelUuid, selectedAction]);
}, [selectedEventSphere, selectedProduct, getEventByModelUuid, selectedAction]);
function getDefaultPositions(modelUuid: string): Positions {
const modelData = getEventByModelUuid(selectedProduct.productId, modelUuid);
@ -117,8 +116,8 @@ const ArmBotUI = () => {
obj.getWorldPosition(newPosition);
const worldPositionArray = newPosition.toArray() as [number, number, number];
if (selectedEventData?.data.type === "roboticArm") {
const selectedArmBot = getEventByModelUuid(selectedProduct.productId, selectedEventData.data.modelUuid);
if (selectedEventSphere) {
const selectedArmBot = getEventByModelUuid(selectedProduct.productId, selectedEventSphere.userData.modelUuid);
const armBot = selectedArmBot?.modelUuid === modelUuid ? selectedArmBot : null;
if (!armBot) return;

View File

@ -15,7 +15,7 @@ interface VehicleAnimatorProps {
}
function VehicleAnimator({ path, handleCallBack, currentPhase, agvUuid, agvDetail, reset }: VehicleAnimatorProps) {
const { decrementVehicleLoad } = useVehicleStore();
const { decrementVehicleLoad, getVehicleById } = useVehicleStore();
const { isPaused } = usePauseButtonStore();
const { isPlaying } = usePlayButtonStore();
const { speed } = useAnimationPlaySpeed();
@ -34,7 +34,6 @@ function VehicleAnimator({ path, handleCallBack, currentPhase, agvUuid, agvDetai
let coveredDistance = progressRef.current;
let objectRotation = (agvDetail.point?.action?.pickUpPoint?.rotation || { x: 0, y: 0, z: 0 }) as { x: number; y: number; z: number } | undefined;
useEffect(() => {
if (currentPhase === 'stationed-pickup' && path.length > 0) {
setCurrentPath(path);
@ -69,9 +68,10 @@ function VehicleAnimator({ path, handleCallBack, currentPhase, agvUuid, agvDetai
isPausedRef.current = false;
pauseTimeRef.current = 0;
const object = scene.getObjectByProperty('uuid', agvUuid);
if (object) {
object.position.set(agvDetail.position[0], agvDetail.position[1], agvDetail.position[2]);
object.rotation.set(agvDetail.rotation[0], agvDetail.rotation[1], agvDetail.rotation[2]);
const vehicle = getVehicleById(agvDetail.modelUuid);
if (object && vehicle) {
object.position.set(vehicle.position[0], vehicle.position[1], vehicle.position[2]);
object.rotation.set(vehicle.rotation[0], vehicle.rotation[1], vehicle.rotation[2]);
}
}
}, [isReset, isPlaying])

View File

@ -1,35 +1,18 @@
import React, { useEffect } from "react";
import { useEffect } from "react";
import VehicleInstances from "./instances/vehicleInstances";
import { useVehicleStore } from "../../../store/simulation/useVehicleStore";
import { useSelectedEventData, useSelectedEventSphere, useSelectedProduct } from "../../../store/simulation/useSimulationStore";
import { useSelectedEventData, useSelectedEventSphere } from "../../../store/simulation/useSimulationStore";
import VehicleUI from "../ui/vehicle/vehicleUI";
import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
import { useProductStore } from "../../../store/simulation/useProductStore";
function Vehicles() {
const { products, getProductById } = useProductStore();
const { selectedProduct } = useSelectedProduct();
const { vehicles, addVehicle, clearvehicles } = useVehicleStore();
const { vehicles } = useVehicleStore();
const { selectedEventSphere } = useSelectedEventSphere();
const { selectedEventData } = useSelectedEventData();
const { isPlaying } = usePlayButtonStore();
useEffect(() => {
if (selectedProduct.productId) {
const product = getProductById(selectedProduct.productId);
if (product) {
clearvehicles();
product.eventDatas.forEach(events => {
if (events.type === 'vehicle') {
addVehicle(selectedProduct.productId, events);
}
});
}
}
}, [selectedProduct, products]);
useEffect(() => {
//
// console.log('vehicles: ', vehicles);
}, [vehicles])
return (