Enhance TriggerConnector and VehicleUI components: improve event handling by resetting firstSelectedPoint on invalid intersections, refine intersection checks, and streamline state updates in VehicleUI. Integrate backend updates for vehicle actions and ensure consistent rotation handling.

app/src/modules/simulation/triggers/connector/triggerConnector.tsx

@@ -185,6 +185,11 @@ function TriggerConnector() {
             const modelUuid = currentObject.userData.modelUuid;
             const pointUuid = currentObject.userData.pointUuid;
 
+            if (firstSelectedPoint && firstSelectedPoint.pointUuid === pointUuid) {
+                setFirstSelectedPoint(null);
+                return;
+            }
+
             if (selectedProduct && getIsEventInProduct(selectedProduct.productId, modelUuid)) {
 
                 const point = getPointByUuid(
@@ -341,8 +346,9 @@ function TriggerConnector() {
                     !intersect.object.name.includes("Roof") &&
                     !intersect.object.name.includes("agv-collider") &&
                     !intersect.object.name.includes("MeasurementReference") &&
-                    !intersect.object.userData.isPathObject &&
+                    !intersect.object.parent?.name.includes("Zone") &&
-                    !(intersect.object.type === "GridHelper")
+                    !(intersect.object.type === "GridHelper") &&
+                    !(intersect.object.type === "Line2")
             );
 
             let point: THREE.Vector3 | null = null;
@@ -355,10 +361,19 @@ function TriggerConnector() {
             }
 
             const sphereIntersects = raycaster.intersectObjects(scene.children, true).filter((intersect) => intersect.object.name === ('Event-Sphere'));
+
+            if (sphereIntersects.length > 0 && sphereIntersects[0].object.uuid === firstSelectedPoint.pointUuid) {
+                setHelperLineColor('red');
+                setCurrentLine(null);
+                return;
+            }
+
             const startPoint = getWorldPositionFromScene(firstSelectedPoint.pointUuid);
 
             if (point && startPoint) {
-
+                if (sphereIntersects.length > 0) {
+                    point = sphereIntersects[0].object.getWorldPosition(new THREE.Vector3());
+                }
                 const distance = startPoint.distanceTo(point);
                 const heightFactor = Math.max(0.5, distance * 0.2);
                 const midPoint = new THREE.Vector3(
@@ -367,17 +382,15 @@ function TriggerConnector() {
                     (startPoint.z + point.z) / 2
                 );
 
+                const endPoint = point;
+
                 setCurrentLine({
                     start: startPoint,
                     mid: midPoint,
-                    end: point,
+                    end: endPoint,
                 });
 
-                if (sphereIntersects.length > 0) {
+                setHelperLineColor(sphereIntersects.length > 0 ? "#6cf542" : "red");
-                    setHelperLineColor("#6cf542");
-                } else {
-                    setHelperLineColor("red");
-                }
             } else {
                 setCurrentLine(null);
             }

app/src/modules/simulation/ui/vehicle/vehicleUI.tsx

@@ -1,12 +1,16 @@
 import React, { useEffect, useRef, useState } from 'react';
+import * as Types from "../../../../types/world/worldTypes";
 import startPoint from "../../../../assets/gltf-glb/arrow_green.glb";
-import startEnd from "../../../../assets/gltf-glb/arrow_red.glb";
 import * as THREE from "three";
+import startEnd from "../../../../assets/gltf-glb/arrow_red.glb";
 import { useGLTF } from '@react-three/drei';
 import { useFrame, useThree } from '@react-three/fiber';
 import { useSelectedEventSphere, useIsDragging, useIsRotating } from '../../../../store/simulation/useSimulationStore';
 import { useVehicleStore } from '../../../../store/simulation/useVehicleStore';
-import * as Types from "../../../../types/world/worldTypes";
+import { useProductStore } from '../../../../store/simulation/useProductStore';
+import { useSelectedProduct } from '../../../../store/simulation/useSimulationStore';
+import { upsertProductOrEventApi } from '../../../../services/simulation/UpsertProductOrEventApi';
+
 const VehicleUI = () => {
     const { scene: startScene } = useGLTF(startPoint) as any;
     const { scene: endScene } = useGLTF(startEnd) as any;
@@ -14,7 +18,9 @@ const VehicleUI = () => {
     const endMarker = useRef<THREE.Group>(null);
     const prevMousePos = useRef({ x: 0, y: 0 });
     const { selectedEventSphere } = useSelectedEventSphere();
-    const { vehicles, updateVehicle } = useVehicleStore();
+    const { selectedProduct } = useSelectedProduct();
+    const { getVehicleById } = useVehicleStore();
+    const { updateEvent } = useProductStore();
     const [startPosition, setStartPosition] = useState<[number, number, number]>([0, 0, 0]);
     const [endPosition, setEndPosition] = useState<[number, number, number]>([0, 0, 0]);
     const [startRotation, setStartRotation] = useState<[number, number, number]>([0, 0, 0]);
@@ -26,55 +32,46 @@ const VehicleUI = () => {
     const state: Types.ThreeState = useThree();
     const controls: any = state.controls;
 
+    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) return;
-        const selectedVehicle = vehicles.find(
+        const selectedVehicle = getVehicleById(selectedEventSphere.userData.modelUuid);
-            (vehicle: any) => vehicle.modelUuid === selectedEventSphere.userData.modelUuid
-        );
 
         if (selectedVehicle?.point?.action) {
             const { pickUpPoint, unLoadPoint } = selectedVehicle.point.action;
 
             if (pickUpPoint) {
-                const pickupPosition = new THREE.Vector3(
+                setStartPosition([pickUpPoint.position.x, 0, pickUpPoint.position.z]);
-                    pickUpPoint.position.x,
+                setStartRotation([pickUpPoint.rotation.x, pickUpPoint.rotation.y, pickUpPoint.rotation.z]);
-                    pickUpPoint.position.y,
-                    pickUpPoint.position.z
-                );
-                const pickupRotation = new THREE.Vector3(
-                    pickUpPoint.rotation.x,
-                    pickUpPoint.rotation.y,
-                    pickUpPoint.rotation.z
-                );
-                pickupPosition.y = 0;
-                setStartPosition([pickupPosition.x, 0, pickupPosition.z]);
-                setStartRotation([pickupRotation.x, pickupRotation.y, pickupRotation.z]);
             } else {
                 const defaultLocal = new THREE.Vector3(0, 0, 1.5);
                 const defaultWorld = selectedEventSphere.localToWorld(defaultLocal);
-                defaultWorld.y = 0;
                 setStartPosition([defaultWorld.x, 0, defaultWorld.z]);
                 setStartRotation([0, 0, 0]);
             }
 
             if (unLoadPoint) {
-                const unLoadPosition = new THREE.Vector3(
+                setEndPosition([unLoadPoint.position.x, 0, unLoadPoint.position.z]);
-                    unLoadPoint.position.x,
+                setEndRotation([unLoadPoint.rotation.x, unLoadPoint.rotation.y, unLoadPoint.rotation.z]);
-                    unLoadPoint.position.y,
-                    unLoadPoint.position.z
-                );
-                const unLoadRotation = new THREE.Vector3(
-                    unLoadPoint.rotation.x,
-                    unLoadPoint.rotation.y,
-                    unLoadPoint.position.z
-                );
-                unLoadPosition.y = 0; // Force y to 0
-                setEndPosition([unLoadPosition.x, 0, unLoadPosition.z]);
-                setEndRotation([unLoadRotation.x, unLoadRotation.y, unLoadRotation.z]);
             } else {
                 const defaultLocal = new THREE.Vector3(0, 0, -1.5);
                 const defaultWorld = selectedEventSphere.localToWorld(defaultLocal);
-                defaultWorld.y = 0; // Force y to 0
                 setEndPosition([defaultWorld.x, 0, defaultWorld.z]);
                 setEndRotation([0, 0, 0]);
             }
@@ -87,7 +84,6 @@ const VehicleUI = () => {
         const intersects = raycaster.ray.intersectPlane(plane.current, intersectPoint);
 
         if (intersects) {
-            intersectPoint.y = 0; // Force y to 0
             if (isDragging === "start") {
                 setStartPosition([intersectPoint.x, 0, intersectPoint.z]);
             }
@@ -108,12 +104,12 @@ const VehicleUI = () => {
 
         if (marker) {
             const rotationSpeed = 10;
-            marker.rotation.y += deltaX * rotationSpeed;
             if (isRotating === 'start') {
-                setStartRotation([marker.rotation.x, marker.rotation.y, marker.rotation.z])
+                const y = startRotation[1] + deltaX * rotationSpeed;
+                setStartRotation([0, y, 0]);
             } else {
-
+                const y = endRotation[1] + deltaX * rotationSpeed;
-                setEndRotation([marker.rotation.x, marker.rotation.y, marker.rotation.z])
+                setEndRotation([0, y, 0]);
             }
         }
     });
@@ -142,43 +138,34 @@ const VehicleUI = () => {
         setIsRotating(null);
 
         if (selectedEventSphere?.userData.modelUuid) {
-            const updatedVehicle = vehicles.find(
+            const updatedVehicle = getVehicleById(selectedEventSphere.userData.modelUuid);
-                (vehicle) => vehicle.modelUuid === selectedEventSphere.userData.modelUuid
-            );
 
             if (updatedVehicle) {
-                updateVehicle(selectedEventSphere.userData.modelUuid, {
+                const event = updateEvent(selectedProduct.productId, selectedEventSphere.userData.modelUuid, {
                     point: {
                         ...updatedVehicle.point,
                         action: {
                             ...updatedVehicle.point?.action,
                             pickUpPoint: {
-                                position: {
+                                position: { x: startPosition[0], y: startPosition[1], z: startPosition[2], },
-                                    x: startPosition[0],
+                                rotation: { x: 0, y: startRotation[1], z: 0, },
-                                    y: startPosition[1],
-                                    z: startPosition[2],
-                                },
-                                rotation: {
-                                    x: startRotation[0],
-                                    y: startRotation[1],
-                                    z: startRotation[2],
-                                },
                             },
                             unLoadPoint: {
-                                position: {
+                                position: { x: endPosition[0], y: endPosition[1], z: endPosition[2], },
-                                    x: endPosition[0],
+                                rotation: { x: 0, y: endRotation[1], z: 0, },
-                                    y: endPosition[1],
-                                    z: endPosition[2],
-                                },
-                                rotation: {
-                                    x: endRotation[0],
-                                    y: endRotation[1],
-                                    z: endRotation[2],
-                                },
                             },
                         },
                     },
-                });
+                })
+
+                if (event) {
+                    updateBackend(
+                        selectedProduct.productName,
+                        selectedProduct.productId,
+                        organization,
+                        event
+                    );
+                }
             }
         }
     };
@@ -208,6 +195,7 @@ const VehicleUI = () => {
                     object={startScene}
                     ref={startMarker}
                     position={startPosition}
+                    rotation={startRotation}
                     onPointerDown={(e: any) => {
                         e.stopPropagation();
                         handlePointerDown(e, "start", "start");
@@ -224,6 +212,7 @@ const VehicleUI = () => {
                     object={endScene}
                     ref={endMarker}
                     position={endPosition}
+                    rotation={endRotation}
                     onPointerDown={(e: any) => {
                         e.stopPropagation();
                         handlePointerDown(e, "end", "end");