From 542faf5ea9b961e2917b3357f1b56224c8ce0ea6 Mon Sep 17 00:00:00 2001 From: Jerald-Golden-B Date: Tue, 20 May 2025 18:17:06 +0530 Subject: [PATCH] feat: enhance PointsCreator to update backend with event data and refactor event handling logic --- .../events/points/creator/pointsCreator.tsx | 156 ++++++++++++------ app/src/store/simulation/useEventsStore.ts | 6 +- app/src/store/simulation/useProductStore.ts | 6 +- 3 files changed, 114 insertions(+), 54 deletions(-) diff --git a/app/src/modules/simulation/events/points/creator/pointsCreator.tsx b/app/src/modules/simulation/events/points/creator/pointsCreator.tsx index 05cfcf8..22ca63d 100644 --- a/app/src/modules/simulation/events/points/creator/pointsCreator.tsx +++ b/app/src/modules/simulation/events/points/creator/pointsCreator.tsx @@ -1,17 +1,22 @@ -import React, { useEffect, useRef, useState } from "react"; +import { useEffect, useRef, useState } from "react"; import * as THREE from "three"; import { useEventsStore } from "../../../../../store/simulation/useEventsStore"; +import { useProductStore } from "../../../../../store/simulation/useProductStore"; +import { useSelectedProduct } from "../../../../../store/simulation/useSimulationStore"; import useModuleStore, { useSubModuleStore } from "../../../../../store/useModuleStore"; import { TransformControls } from "@react-three/drei"; import { detectModifierKeys } from "../../../../../utils/shortcutkeys/detectModifierKeys"; import { useSelectedEventSphere, useSelectedEventData, } from "../../../../../store/simulation/useSimulationStore"; import { useThree } from "@react-three/fiber"; import { usePlayButtonStore } from "../../../../../store/usePlayButtonStore"; +import { upsertProductOrEventApi } from "../../../../../services/simulation/UpsertProductOrEventApi"; function PointsCreator() { const { gl, raycaster, scene, pointer, camera } = useThree(); const { subModule } = useSubModuleStore(); const { events, updatePoint, getPointByUuid, getEventByModelUuid } = useEventsStore(); + const { getEventByModelUuid: getEventByModelUuidFromProduct, updatePoint: updatePointFromProduct, getEventByModelUuid: getEventByModelUuidFromProduct2 } = useProductStore(); + const { selectedProduct } = useSelectedProduct(); const { activeModule } = useModuleStore(); const transformRef = useRef(null); const [transformMode, setTransformMode] = useState<"translate" | "rotate" | null>(null); @@ -20,6 +25,23 @@ function PointsCreator() { const { setSelectedEventData, clearSelectedEventData } = useSelectedEventData(); const { isPlaying } = usePlayButtonStore(); + const email = localStorage.getItem('email') + const organization = (email!.split("@")[1]).split(".")[0]; + + const updateBackend = ( + productName: string, + productId: string, + organization: string, + eventData: EventsSchema + ) => { + upsertProductOrEventApi({ + productName: productName, + productId: productId, + organization: organization, + eventDatas: eventData + }) + } + useEffect(() => { if (selectedEventSphere) { const eventData = getEventByModelUuid( @@ -68,11 +90,30 @@ function PointsCreator() { selectedEventSphere.position.y, selectedEventSphere.position.z, ]; - updatePoint( - selectedEventSphere.userData.modelUuid, - selectedEventSphere.userData.pointUuid, - point - ); + + const event = getEventByModelUuidFromProduct(selectedProduct.productId, selectedEventSphere.userData.modelUuid); + + if (event && selectedProduct.productId !== '') { + const updatedEvent = updatePointFromProduct( + selectedProduct.productId, + selectedEventSphere.userData.modelUuid, + selectedEventSphere.userData.pointUuid, + point + ) + if (updatedEvent) { + updatePoint( + selectedEventSphere.userData.modelUuid, + selectedEventSphere.userData.pointUuid, + point + ) + updateBackend( + selectedProduct.productName, + selectedProduct.productId, + organization, + updatedEvent + ); + } + } } }; @@ -126,14 +167,20 @@ function PointsCreator() { <> {events.map((event, index) => { - if (event.type === "transfer") { + const updatedEvent = selectedProduct.productId !== '' + ? getEventByModelUuidFromProduct2(selectedProduct.productId, event.modelUuid) + : null; + + const usedEvent = updatedEvent || event; + + if (usedEvent.type === "transfer") { return ( - {event.points.map((point, j) => ( + {usedEvent.points.map((point, j) => ( @@ -157,27 +204,28 @@ function PointsCreator() { ))} ); - } else if (event.type === "vehicle") { + } else if (usedEvent.type === "vehicle") { + const point = usedEvent.point; return ( (sphereRefs.current[event.point.uuid] = el!)} + uuid={point.uuid} + ref={(el) => (sphereRefs.current[point.uuid] = el!)} onClick={(e) => { e.stopPropagation(); setSelectedEventSphere( - sphereRefs.current[event.point.uuid] + sphereRefs.current[point.uuid] ); }} - position={new THREE.Vector3(...event.point.position)} + position={new THREE.Vector3(...point.position)} userData={{ - modelUuid: event.modelUuid, - pointUuid: event.point.uuid, + modelUuid: usedEvent.modelUuid, + pointUuid: point.uuid, }} > @@ -185,27 +233,28 @@ function PointsCreator() { ); - } else if (event.type === "roboticArm") { + } else if (usedEvent.type === "roboticArm") { + const point = usedEvent.point; return ( (sphereRefs.current[event.point.uuid] = el!)} + uuid={point.uuid} + ref={(el) => (sphereRefs.current[point.uuid] = el!)} onClick={(e) => { e.stopPropagation(); setSelectedEventSphere( - sphereRefs.current[event.point.uuid] + sphereRefs.current[point.uuid] ); }} - position={new THREE.Vector3(...event.point.position)} + position={new THREE.Vector3(...point.position)} userData={{ - modelUuid: event.modelUuid, - pointUuid: event.point.uuid, + modelUuid: usedEvent.modelUuid, + pointUuid: point.uuid, }} > @@ -213,27 +262,28 @@ function PointsCreator() { ); - } else if (event.type === "machine") { + } else if (usedEvent.type === "machine") { + const point = usedEvent.point; return ( (sphereRefs.current[event.point.uuid] = el!)} + uuid={point.uuid} + ref={(el) => (sphereRefs.current[point.uuid] = el!)} onClick={(e) => { e.stopPropagation(); setSelectedEventSphere( - sphereRefs.current[event.point.uuid] + sphereRefs.current[point.uuid] ); }} - position={new THREE.Vector3(...event.point.position)} + position={new THREE.Vector3(...point.position)} userData={{ - modelUuid: event.modelUuid, - pointUuid: event.point.uuid, + modelUuid: usedEvent.modelUuid, + pointUuid: point.uuid, }} > @@ -241,27 +291,28 @@ function PointsCreator() { ); - } else if (event.type === "storageUnit") { + } else if (usedEvent.type === "storageUnit") { + const point = usedEvent.point; return ( (sphereRefs.current[event.point.uuid] = el!)} + uuid={point.uuid} + ref={(el) => (sphereRefs.current[point.uuid] = el!)} onClick={(e) => { e.stopPropagation(); setSelectedEventSphere( - sphereRefs.current[event.point.uuid] + sphereRefs.current[point.uuid] ); }} - position={new THREE.Vector3(...event.point.position)} + position={new THREE.Vector3(...point.position)} userData={{ - modelUuid: event.modelUuid, - pointUuid: event.point.uuid, + modelUuid: usedEvent.modelUuid, + pointUuid: point.uuid, }} > @@ -274,6 +325,7 @@ function PointsCreator() { } })} + {selectedEventSphere && transformMode && ( - ) => void; + ) => EventsSchema | undefined; // Action-level actions addAction: ( @@ -101,17 +101,21 @@ export const useEventsStore = create()( }, updatePoint: (modelUuid, pointUuid, updates) => { + let updatedEvent: EventsSchema | undefined; set((state) => { const event = state.events.find(e => 'modelUuid' in e && e.modelUuid === modelUuid); if (event && 'points' in event) { const point = (event as ConveyorEventSchema).points.find(p => p.uuid === pointUuid); if (point) { Object.assign(point, updates); + updatedEvent = JSON.parse(JSON.stringify(event)); } } else if (event && 'point' in event && (event as any).point.uuid === pointUuid) { Object.assign((event as any).point, updates); + updatedEvent = JSON.parse(JSON.stringify(event)); } }); + return updatedEvent; }, // Action-level actions diff --git a/app/src/store/simulation/useProductStore.ts b/app/src/store/simulation/useProductStore.ts index e7d394a..27b908a 100644 --- a/app/src/store/simulation/useProductStore.ts +++ b/app/src/store/simulation/useProductStore.ts @@ -24,7 +24,7 @@ type ProductsStore = { modelUuid: string, pointUuid: string, updates: Partial - ) => void; + ) => EventsSchema | undefined; // Action-level actions addAction: ( @@ -195,6 +195,7 @@ export const useProductStore = create()( }, updatePoint: (productId, modelUuid, pointUuid, updates) => { + let updatedEvent: EventsSchema | undefined; set((state) => { const product = state.products.find(p => p.productId === productId); if (product) { @@ -203,12 +204,15 @@ export const useProductStore = create()( const point = (event as ConveyorEventSchema).points.find(p => p.uuid === pointUuid); if (point) { Object.assign(point, updates); + updatedEvent = JSON.parse(JSON.stringify(event)); } } else if (event && 'point' in event && (event as any).point.uuid === pointUuid) { Object.assign((event as any).point, updates); + updatedEvent = JSON.parse(JSON.stringify(event)); } } }); + return updatedEvent; }, // Action-level actions