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

feat: enhance PointsCreator to update backend with event data and refactor event handling logic

This commit is contained in:
Jerald-Golden-B 2025-05-20 18:17:06 +05:30
parent 292ea0dbc2
commit 542faf5ea9
3 changed files with 114 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

156
app/src/modules/simulation/events/points/creator/pointsCreator.tsx
View File

@ -1,17 +1,22 @@
import React, { useEffect, useRef, useState } from "react"; import { useEffect, useRef, useState } from "react";
import * as THREE from "three"; import * as THREE from "three";
import { useEventsStore } from "../../../../../store/simulation/useEventsStore"; 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 useModuleStore, { useSubModuleStore } from "../../../../../store/useModuleStore";
import { TransformControls } from "@react-three/drei"; import { TransformControls } from "@react-three/drei";
import { detectModifierKeys } from "../../../../../utils/shortcutkeys/detectModifierKeys"; import { detectModifierKeys } from "../../../../../utils/shortcutkeys/detectModifierKeys";
import { useSelectedEventSphere, useSelectedEventData, } from "../../../../../store/simulation/useSimulationStore"; import { useSelectedEventSphere, useSelectedEventData, } from "../../../../../store/simulation/useSimulationStore";
import { useThree } from "@react-three/fiber"; import { useThree } from "@react-three/fiber";
import { usePlayButtonStore } from "../../../../../store/usePlayButtonStore"; import { usePlayButtonStore } from "../../../../../store/usePlayButtonStore";
import { upsertProductOrEventApi } from "../../../../../services/simulation/UpsertProductOrEventApi";
function PointsCreator() { function PointsCreator() {
const { gl, raycaster, scene, pointer, camera } = useThree(); const { gl, raycaster, scene, pointer, camera } = useThree();
const { subModule } = useSubModuleStore(); const { subModule } = useSubModuleStore();
const { events, updatePoint, getPointByUuid, getEventByModelUuid } = useEventsStore(); const { events, updatePoint, getPointByUuid, getEventByModelUuid } = useEventsStore();
const { getEventByModelUuid: getEventByModelUuidFromProduct, updatePoint: updatePointFromProduct, getEventByModelUuid: getEventByModelUuidFromProduct2 } = useProductStore();
const { selectedProduct } = useSelectedProduct();
const { activeModule } = useModuleStore(); const { activeModule } = useModuleStore();
const transformRef = useRef<any>(null); const transformRef = useRef<any>(null);
const [transformMode, setTransformMode] = useState<"translate" | "rotate" | null>(null); const [transformMode, setTransformMode] = useState<"translate" | "rotate" | null>(null);
@ -20,6 +25,23 @@ function PointsCreator() {
const { setSelectedEventData, clearSelectedEventData } = useSelectedEventData(); const { setSelectedEventData, clearSelectedEventData } = useSelectedEventData();
const { isPlaying } = usePlayButtonStore(); 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(() => { useEffect(() => {
if (selectedEventSphere) { if (selectedEventSphere) {
const eventData = getEventByModelUuid( const eventData = getEventByModelUuid(
@ -68,11 +90,30 @@ function PointsCreator() {
selectedEventSphere.position.y, selectedEventSphere.position.y,
selectedEventSphere.position.z, selectedEventSphere.position.z,
]; ];
updatePoint(
selectedEventSphere.userData.modelUuid, const event = getEventByModelUuidFromProduct(selectedProduct.productId, selectedEventSphere.userData.modelUuid);
selectedEventSphere.userData.pointUuid,
point 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() {
<> <>
<group name="EventPointsGroup" visible={!isPlaying}> <group name="EventPointsGroup" visible={!isPlaying}>
{events.map((event, index) => { {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 ( return (
<group <group
key={`${index}-${event.modelUuid}`} key={`${index}-${usedEvent.modelUuid}`}
position={event.position} position={usedEvent.position}
rotation={event.rotation} rotation={usedEvent.rotation}
> >
{event.points.map((point, j) => ( {usedEvent.points.map((point, j) => (
<mesh <mesh
name="Event-Sphere" name="Event-Sphere"
uuid={point.uuid} uuid={point.uuid}
@ -147,7 +194,7 @@ function PointsCreator() {
key={`${index}-${point.uuid}`} key={`${index}-${point.uuid}`}
position={new THREE.Vector3(...point.position)} position={new THREE.Vector3(...point.position)}
userData={{ userData={{
modelUuid: event.modelUuid, modelUuid: usedEvent.modelUuid,
pointUuid: point.uuid, pointUuid: point.uuid,
}} }}
> >
@ -157,27 +204,28 @@ function PointsCreator() {
))} ))}
</group> </group>
); );
} else if (event.type === "vehicle") { } else if (usedEvent.type === "vehicle") {
const point = usedEvent.point;
return ( return (
<group <group
key={`${index}-${event.modelUuid}`} key={`${index}-${usedEvent.modelUuid}`}
position={event.position} position={usedEvent.position}
rotation={event.rotation} rotation={usedEvent.rotation}
> >
<mesh <mesh
name="Event-Sphere" name="Event-Sphere"
uuid={event.point.uuid} uuid={point.uuid}
ref={(el) => (sphereRefs.current[event.point.uuid] = el!)} ref={(el) => (sphereRefs.current[point.uuid] = el!)}
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
setSelectedEventSphere( setSelectedEventSphere(
sphereRefs.current[event.point.uuid] sphereRefs.current[point.uuid]
); );
}} }}
position={new THREE.Vector3(...event.point.position)} position={new THREE.Vector3(...point.position)}
userData={{ userData={{
modelUuid: event.modelUuid, modelUuid: usedEvent.modelUuid,
pointUuid: event.point.uuid, pointUuid: point.uuid,
}} }}
> >
<sphereGeometry args={[0.1, 16, 16]} /> <sphereGeometry args={[0.1, 16, 16]} />
@ -185,27 +233,28 @@ function PointsCreator() {
</mesh> </mesh>
</group> </group>
); );
} else if (event.type === "roboticArm") { } else if (usedEvent.type === "roboticArm") {
const point = usedEvent.point;
return ( return (
<group <group
key={`${index}-${event.modelUuid}`} key={`${index}-${usedEvent.modelUuid}`}
position={event.position} position={usedEvent.position}
rotation={event.rotation} rotation={usedEvent.rotation}
> >
<mesh <mesh
name="Event-Sphere" name="Event-Sphere"
uuid={event.point.uuid} uuid={point.uuid}
ref={(el) => (sphereRefs.current[event.point.uuid] = el!)} ref={(el) => (sphereRefs.current[point.uuid] = el!)}
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
setSelectedEventSphere( setSelectedEventSphere(
sphereRefs.current[event.point.uuid] sphereRefs.current[point.uuid]
); );
}} }}
position={new THREE.Vector3(...event.point.position)} position={new THREE.Vector3(...point.position)}
userData={{ userData={{
modelUuid: event.modelUuid, modelUuid: usedEvent.modelUuid,
pointUuid: event.point.uuid, pointUuid: point.uuid,
}} }}
> >
<sphereGeometry args={[0.1, 16, 16]} /> <sphereGeometry args={[0.1, 16, 16]} />
@ -213,27 +262,28 @@ function PointsCreator() {
</mesh> </mesh>
</group> </group>
); );
} else if (event.type === "machine") { } else if (usedEvent.type === "machine") {
const point = usedEvent.point;
return ( return (
<group <group
key={`${index}-${event.modelUuid}`} key={`${index}-${usedEvent.modelUuid}`}
position={event.position} position={usedEvent.position}
rotation={event.rotation} rotation={usedEvent.rotation}
> >
<mesh <mesh
name="Event-Sphere" name="Event-Sphere"
uuid={event.point.uuid} uuid={point.uuid}
ref={(el) => (sphereRefs.current[event.point.uuid] = el!)} ref={(el) => (sphereRefs.current[point.uuid] = el!)}
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
setSelectedEventSphere( setSelectedEventSphere(
sphereRefs.current[event.point.uuid] sphereRefs.current[point.uuid]
); );
}} }}
position={new THREE.Vector3(...event.point.position)} position={new THREE.Vector3(...point.position)}
userData={{ userData={{
modelUuid: event.modelUuid, modelUuid: usedEvent.modelUuid,
pointUuid: event.point.uuid, pointUuid: point.uuid,
}} }}
> >
<sphereGeometry args={[0.1, 16, 16]} /> <sphereGeometry args={[0.1, 16, 16]} />
@ -241,27 +291,28 @@ function PointsCreator() {
</mesh> </mesh>
</group> </group>
); );
} else if (event.type === "storageUnit") { } else if (usedEvent.type === "storageUnit") {
const point = usedEvent.point;
return ( return (
<group <group
key={`${index}-${event.modelUuid}`} key={`${index}-${usedEvent.modelUuid}`}
position={event.position} position={usedEvent.position}
rotation={event.rotation} rotation={usedEvent.rotation}
> >
<mesh <mesh
name="Event-Sphere" name="Event-Sphere"
uuid={event.point.uuid} uuid={point.uuid}
ref={(el) => (sphereRefs.current[event.point.uuid] = el!)} ref={(el) => (sphereRefs.current[point.uuid] = el!)}
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
setSelectedEventSphere( setSelectedEventSphere(
sphereRefs.current[event.point.uuid] sphereRefs.current[point.uuid]
); );
}} }}
position={new THREE.Vector3(...event.point.position)} position={new THREE.Vector3(...point.position)}
userData={{ userData={{
modelUuid: event.modelUuid, modelUuid: usedEvent.modelUuid,
pointUuid: event.point.uuid, pointUuid: point.uuid,
}} }}
> >
<sphereGeometry args={[0.1, 16, 16]} /> <sphereGeometry args={[0.1, 16, 16]} />
@ -274,6 +325,7 @@ function PointsCreator() {
} }
})} })}
</group> </group>
{selectedEventSphere && transformMode && ( {selectedEventSphere && transformMode && (
<TransformControls <TransformControls
ref={transformRef} ref={transformRef}

6
app/src/store/simulation/useEventsStore.ts
View File

@ -16,7 +16,7 @@ type EventsStore = {
modelUuid: string, modelUuid: string,
pointUuid: string, pointUuid: string,
updates: Partial<ConveyorPointSchema | VehiclePointSchema | RoboticArmPointSchema | MachinePointSchema | StoragePointSchema> updates: Partial<ConveyorPointSchema | VehiclePointSchema | RoboticArmPointSchema | MachinePointSchema | StoragePointSchema>
) => void; ) => EventsSchema | undefined;
// Action-level actions // Action-level actions
addAction: ( addAction: (
@ -101,17 +101,21 @@ export const useEventsStore = create<EventsStore>()(
}, },
updatePoint: (modelUuid, pointUuid, updates) => { updatePoint: (modelUuid, pointUuid, updates) => {
let updatedEvent: EventsSchema | undefined;
set((state) => { set((state) => {
const event = state.events.find(e => 'modelUuid' in e && e.modelUuid === modelUuid); const event = state.events.find(e => 'modelUuid' in e && e.modelUuid === modelUuid);
if (event && 'points' in event) { if (event && 'points' in event) {
const point = (event as ConveyorEventSchema).points.find(p => p.uuid === pointUuid); const point = (event as ConveyorEventSchema).points.find(p => p.uuid === pointUuid);
if (point) { if (point) {
Object.assign(point, updates); Object.assign(point, updates);
updatedEvent = JSON.parse(JSON.stringify(event));
} }
} else if (event && 'point' in event && (event as any).point.uuid === pointUuid) { } else if (event && 'point' in event && (event as any).point.uuid === pointUuid) {
Object.assign((event as any).point, updates); Object.assign((event as any).point, updates);
updatedEvent = JSON.parse(JSON.stringify(event));
} }
}); });
return updatedEvent;
}, },
// Action-level actions // Action-level actions

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

@ -24,7 +24,7 @@ type ProductsStore = {
modelUuid: string, modelUuid: string,
pointUuid: string, pointUuid: string,
updates: Partial<ConveyorPointSchema | VehiclePointSchema | RoboticArmPointSchema | MachinePointSchema | StoragePointSchema> updates: Partial<ConveyorPointSchema | VehiclePointSchema | RoboticArmPointSchema | MachinePointSchema | StoragePointSchema>
) => void; ) => EventsSchema | undefined;
// Action-level actions // Action-level actions
addAction: ( addAction: (
@ -195,6 +195,7 @@ export const useProductStore = create<ProductsStore>()(
}, },
updatePoint: (productId, modelUuid, pointUuid, updates) => { updatePoint: (productId, modelUuid, pointUuid, updates) => {
let updatedEvent: EventsSchema | undefined;
set((state) => { set((state) => {
const product = state.products.find(p => p.productId === productId); const product = state.products.find(p => p.productId === productId);
if (product) { if (product) {
@ -203,12 +204,15 @@ export const useProductStore = create<ProductsStore>()(
const point = (event as ConveyorEventSchema).points.find(p => p.uuid === pointUuid); const point = (event as ConveyorEventSchema).points.find(p => p.uuid === pointUuid);
if (point) { if (point) {
Object.assign(point, updates); Object.assign(point, updates);
updatedEvent = JSON.parse(JSON.stringify(event));
} }
} else if (event && 'point' in event && (event as any).point.uuid === pointUuid) { } else if (event && 'point' in event && (event as any).point.uuid === pointUuid) {
Object.assign((event as any).point, updates); Object.assign((event as any).point, updates);
updatedEvent = JSON.parse(JSON.stringify(event));
} }
} }
}); });
return updatedEvent;
}, },
// Action-level actions // Action-level actions