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.
This commit is contained in:
parent
a3b48d12c1
commit
fb9e507f4f
|
|
@ -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.type === "GridHelper")
|
||||
!intersect.object.parent?.name.includes("Zone") &&
|
||||
!(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("#6cf542");
|
||||
} else {
|
||||
setHelperLineColor("red");
|
||||
}
|
||||
setHelperLineColor(sphereIntersects.length > 0 ? "#6cf542" : "red");
|
||||
} else {
|
||||
setCurrentLine(null);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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(
|
||||
(vehicle: any) => vehicle.modelUuid === selectedEventSphere.userData.modelUuid
|
||||
);
|
||||
const selectedVehicle = getVehicleById(selectedEventSphere.userData.modelUuid);
|
||||
|
||||
if (selectedVehicle?.point?.action) {
|
||||
const { pickUpPoint, unLoadPoint } = selectedVehicle.point.action;
|
||||
|
||||
if (pickUpPoint) {
|
||||
const pickupPosition = new THREE.Vector3(
|
||||
pickUpPoint.position.x,
|
||||
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]);
|
||||
setStartPosition([pickUpPoint.position.x, 0, pickUpPoint.position.z]);
|
||||
setStartRotation([pickUpPoint.rotation.x, pickUpPoint.rotation.y, pickUpPoint.rotation.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(
|
||||
unLoadPoint.position.x,
|
||||
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]);
|
||||
setEndPosition([unLoadPoint.position.x, 0, unLoadPoint.position.z]);
|
||||
setEndRotation([unLoadPoint.rotation.x, unLoadPoint.rotation.y, unLoadPoint.rotation.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 {
|
||||
|
||||
setEndRotation([marker.rotation.x, marker.rotation.y, marker.rotation.z])
|
||||
const y = endRotation[1] + deltaX * rotationSpeed;
|
||||
setEndRotation([0, y, 0]);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
@ -142,43 +138,34 @@ const VehicleUI = () => {
|
|||
setIsRotating(null);
|
||||
|
||||
if (selectedEventSphere?.userData.modelUuid) {
|
||||
const updatedVehicle = vehicles.find(
|
||||
(vehicle) => vehicle.modelUuid === selectedEventSphere.userData.modelUuid
|
||||
);
|
||||
const updatedVehicle = getVehicleById(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: {
|
||||
x: startPosition[0],
|
||||
y: startPosition[1],
|
||||
z: startPosition[2],
|
||||
},
|
||||
rotation: {
|
||||
x: startRotation[0],
|
||||
y: startRotation[1],
|
||||
z: startRotation[2],
|
||||
},
|
||||
position: { x: startPosition[0], y: startPosition[1], z: startPosition[2], },
|
||||
rotation: { x: 0, y: startRotation[1], z: 0, },
|
||||
},
|
||||
unLoadPoint: {
|
||||
position: {
|
||||
x: endPosition[0],
|
||||
y: endPosition[1],
|
||||
z: endPosition[2],
|
||||
},
|
||||
rotation: {
|
||||
x: endRotation[0],
|
||||
y: endRotation[1],
|
||||
z: endRotation[2],
|
||||
},
|
||||
position: { x: endPosition[0], y: endPosition[1], z: endPosition[2], },
|
||||
rotation: { x: 0, y: endRotation[1], z: 0, },
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
})
|
||||
|
||||
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");
|
||||
|
|
|
|||
Loading…
Reference in New Issue