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:
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) => { const handleRenameAction = (newName: string) => {
if (!selectedAction.actionId) return; if (!selectedAction.actionId) return;
const event = renameAction(selectedProduct.productId, selectedAction.actionId, newName); const event = renameAction(selectedProduct.productId, selectedAction.actionId, newName);
setSelectedAction(selectedAction.actionId, newName);
if (event) { if (event) {
upsertProductOrEventApi({ upsertProductOrEventApi({
productName: selectedProduct.productName, productName: selectedProduct.productName,

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@@ -5,10 +5,14 @@ import { useSelectedProduct } from '../../../store/simulation/useSimulationStore
import AddOrRemoveEventsInProducts from './events/addOrRemoveEventsInProducts'; import AddOrRemoveEventsInProducts from './events/addOrRemoveEventsInProducts';
import { upsertProductOrEventApi } from '../../../services/simulation/UpsertProductOrEventApi'; import { upsertProductOrEventApi } from '../../../services/simulation/UpsertProductOrEventApi';
import { getAllProductsApi } from '../../../services/simulation/getallProductsApi'; import { getAllProductsApi } from '../../../services/simulation/getallProductsApi';
import { useVehicleStore } from '../../../store/simulation/useVehicleStore';
import { useArmBotStore } from '../../../store/simulation/useArmBotStore';
function Products() { function Products() {
const { addProduct, setProducts } = useProductStore(); const { products, getProductById, addProduct, setProducts } = useProductStore();
const { setSelectedProduct } = useSelectedProduct(); const { selectedProduct, setSelectedProduct } = useSelectedProduct();
const { addVehicle, clearvehicles } = useVehicleStore();
const { addArmBot, clearArmBots } = useArmBotStore();
useEffect(() => { useEffect(() => {
const email = localStorage.getItem('email') 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 ( return (
<> <>

View File

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

View File

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

View File

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

View File

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