diff --git a/app/src/modules/scene/controls/selectionControls/copyPasteControls.tsx b/app/src/modules/scene/controls/selectionControls/copyPasteControls.tsx
index 9ca4dd0..fa6ec16 100644
--- a/app/src/modules/scene/controls/selectionControls/copyPasteControls.tsx
+++ b/app/src/modules/scene/controls/selectionControls/copyPasteControls.tsx
@@ -6,6 +6,7 @@ import { toast } from "react-toastify";
// import { setFloorItemApi } from '../../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi';
import * as Types from "../../../../types/world/worldTypes";
import { detectModifierKeys } from "../../../../utils/shortcutkeys/detectModifierKeys";
+import { useEventsStore } from "../../../../store/simulation/useEventsStore";
const CopyPasteControls = ({ itemsGroupRef, copiedObjects, setCopiedObjects, pastedObjects, setpastedObjects, selectionGroup, setDuplicatedObjects, movedObjects, setMovedObjects, rotatedObjects, setRotatedObjects, boundingBoxRef }: any) => {
const { camera, controls, gl, scene, pointer, raycaster } = useThree();
@@ -13,7 +14,8 @@ const CopyPasteControls = ({ itemsGroupRef, copiedObjects, setCopiedObjects, pas
const { selectedAssets, setSelectedAssets } = useSelectedAssets();
const plane = useMemo(() => new THREE.Plane(new THREE.Vector3(0, 1, 0), 0), []);
const { floorItems, setFloorItems } = useFloorItems();
- const { socket } = useSocketStore()
+ const { socket } = useSocketStore();
+ const { addEvent } = useEventsStore();
useEffect(() => {
if (!camera || !scene || toggleView) return;
@@ -138,55 +140,252 @@ const CopyPasteControls = ({ itemsGroupRef, copiedObjects, setCopiedObjects, pas
if (itemsGroupRef.current) {
const newFloorItem: Types.FloorItemType = {
- modeluuid: obj.uuid,
- modelname: obj.userData.name,
+ modelUuid: obj.uuid,
+ modelName: obj.userData.name,
modelfileID: obj.userData.modelId,
position: [worldPosition.x, worldPosition.y, worldPosition.z],
rotation: { x: obj.rotation.x, y: obj.rotation.y, z: obj.rotation.z, },
isLocked: false,
- isVisible: true
- };
-
- setFloorItems((prevItems: Types.FloorItems) => {
- const updatedItems = [...(prevItems || []), newFloorItem];
- localStorage.setItem("FloorItems", JSON.stringify(updatedItems));
- return updatedItems;
- });
-
- const email = localStorage.getItem("email");
- const organization = email ? email.split("@")[1].split(".")[0] : "default";
-
- //REST
-
- // await setFloorItemApi(
- // organization,
- // obj.uuid,
- // obj.userData.name,
- // [worldPosition.x, worldPosition.y, worldPosition.z],
- // { "x": obj.rotation.x, "y": obj.rotation.y, "z": obj.rotation.z },
- // obj.userData.modelId,
- // false,
- // true,
- // );
-
- //SOCKET
-
- const data = {
- organization,
- modeluuid: newFloorItem.modeluuid,
- modelname: newFloorItem.modelname,
- modelfileID: newFloorItem.modelfileID,
- position: newFloorItem.position,
- rotation: { x: obj.rotation.x, y: obj.rotation.y, z: obj.rotation.z },
- isLocked: false,
isVisible: true,
- socketId: socket.id,
};
- socket.emit("v2:model-asset:add", data);
+ let updatedEventData = null;
+ if (obj.userData.eventData) {
+ updatedEventData = JSON.parse(JSON.stringify(obj.userData.eventData));
+ updatedEventData.modelUuid = newFloorItem.modelUuid;
- obj.userData.modeluuid = newFloorItem.modeluuid;
- itemsGroupRef.current.add(obj);
+ const eventData: any = {
+ type: obj.userData.eventData.type,
+ };
+
+ if (obj.userData.eventData.type === "Conveyor") {
+ const ConveyorEvent: ConveyorEventSchema = {
+ modelUuid: newFloorItem.modelUuid,
+ modelName: newFloorItem.modelName,
+ position: newFloorItem.position,
+ rotation: [newFloorItem.rotation.x, newFloorItem.rotation.y, newFloorItem.rotation.z],
+ state: "idle",
+ type: 'transfer',
+ speed: 1,
+ points: updatedEventData.points.map((point: any, index: number) => ({
+ uuid: THREE.MathUtils.generateUUID(),
+ position: [point.position[0], point.position[1], point.position[2]],
+ rotation: [point.rotation[0], point.rotation[1], point.rotation[2]],
+ action: {
+ actionUuid: THREE.MathUtils.generateUUID(),
+ actionName: `Action ${index}`,
+ actionType: 'default',
+ material: 'Default Material',
+ delay: 0,
+ spawnInterval: 5,
+ spawnCount: 1,
+ triggers: []
+ }
+ }))
+ };
+ addEvent(ConveyorEvent);
+ eventData.points = ConveyorEvent.points.map(point => ({
+ uuid: point.uuid,
+ position: point.position,
+ rotation: point.rotation
+ }));
+
+ } else if (obj.userData.eventData.type === "Vehicle") {
+ const vehicleEvent: VehicleEventSchema = {
+ modelUuid: newFloorItem.modelUuid,
+ modelName: newFloorItem.modelName,
+ position: newFloorItem.position,
+ rotation: [newFloorItem.rotation.x, newFloorItem.rotation.y, newFloorItem.rotation.z],
+ state: "idle",
+ type: "vehicle",
+ speed: 1,
+ point: {
+ uuid: THREE.MathUtils.generateUUID(),
+ position: [updatedEventData.point.position[0], updatedEventData.point.position[1], updatedEventData.point.position[2]],
+ rotation: [updatedEventData.point.rotation[0], updatedEventData.point.rotation[1], updatedEventData.point.rotation[2]],
+ action: {
+ actionUuid: THREE.MathUtils.generateUUID(),
+ actionName: "Action 1",
+ actionType: "travel",
+ unLoadDuration: 5,
+ loadCapacity: 10,
+ steeringAngle: 0,
+ pickUpPoint: null,
+ unLoadPoint: null,
+ triggers: []
+ }
+ }
+ };
+ addEvent(vehicleEvent);
+ eventData.point = {
+ uuid: vehicleEvent.point.uuid,
+ position: vehicleEvent.point.position,
+ rotation: vehicleEvent.point.rotation
+ };
+
+ } else if (obj.userData.eventData.type === "ArmBot") {
+ const roboticArmEvent: RoboticArmEventSchema = {
+ modelUuid: newFloorItem.modelUuid,
+ modelName: newFloorItem.modelName,
+ position: newFloorItem.position,
+ rotation: [newFloorItem.rotation.x, newFloorItem.rotation.y, newFloorItem.rotation.z],
+ state: "idle",
+ type: "roboticArm",
+ speed: 1,
+ point: {
+ uuid: THREE.MathUtils.generateUUID(),
+ position: [updatedEventData.point.position[0], updatedEventData.point.position[1], updatedEventData.point.position[2]],
+ rotation: [updatedEventData.point.rotation[0], updatedEventData.point.rotation[1], updatedEventData.point.rotation[2]],
+ actions: [
+ {
+ actionUuid: THREE.MathUtils.generateUUID(),
+ actionName: "Action 1",
+ actionType: "pickAndPlace",
+ process: {
+ startPoint: null,
+ endPoint: null
+ },
+ triggers: []
+ }
+ ]
+ }
+ };
+ addEvent(roboticArmEvent);
+ eventData.point = {
+ uuid: roboticArmEvent.point.uuid,
+ position: roboticArmEvent.point.position,
+ rotation: roboticArmEvent.point.rotation
+ };
+
+ } else if (obj.userData.eventData.type === "StaticMachine") {
+ const machineEvent: MachineEventSchema = {
+ modelUuid: newFloorItem.modelUuid,
+ modelName: newFloorItem.modelName,
+ position: newFloorItem.position,
+ rotation: [newFloorItem.rotation.x, newFloorItem.rotation.y, newFloorItem.rotation.z],
+ state: "idle",
+ type: "machine",
+ point: {
+ uuid: THREE.MathUtils.generateUUID(),
+ position: [updatedEventData.point.position[0], updatedEventData.point.position[1], updatedEventData.point.position[2]],
+ rotation: [updatedEventData.point.rotation[0], updatedEventData.point.rotation[1], updatedEventData.point.rotation[2]],
+ action: {
+ actionUuid: THREE.MathUtils.generateUUID(),
+ actionName: "Action 1",
+ actionType: "process",
+ processTime: 10,
+ swapMaterial: "Default Material",
+ triggers: []
+ }
+ }
+ };
+ addEvent(machineEvent);
+ eventData.point = {
+ uuid: machineEvent.point.uuid,
+ position: machineEvent.point.position,
+ rotation: machineEvent.point.rotation
+ };
+ }
+
+ obj.userData.eventData = eventData;
+
+ newFloorItem.eventData = eventData;
+
+
+ setFloorItems((prevItems: Types.FloorItems) => {
+ const updatedItems = [...(prevItems || []), newFloorItem];
+ localStorage.setItem("FloorItems", JSON.stringify(updatedItems));
+ return updatedItems;
+ });
+
+ const email = localStorage.getItem("email");
+ const organization = email ? email.split("@")[1].split(".")[0] : "default";
+
+ //REST
+
+ // await setFloorItemApi(
+ // organization,
+ // obj.uuid,
+ // obj.userData.name,
+ // [worldPosition.x, worldPosition.y, worldPosition.z],
+ // { "x": obj.rotation.x, "y": obj.rotation.y, "z": obj.rotation.z },
+ // obj.userData.modelId,
+ // false,
+ // true,
+ // );
+
+ //SOCKET
+
+ const data = {
+ organization,
+ modelUuid: newFloorItem.modelUuid,
+ modelName: newFloorItem.modelName,
+ modelfileID: newFloorItem.modelfileID,
+ position: newFloorItem.position,
+ rotation: { x: obj.rotation.x, y: obj.rotation.y, z: obj.rotation.z },
+ isLocked: false,
+ isVisible: true,
+ socketId: socket.id,
+ eventData: eventData,
+ };
+
+ socket.emit("v2:model-asset:add", data);
+
+ obj.userData = {
+ name: newFloorItem.modelName,
+ modelId: newFloorItem.modelfileID,
+ modelUuid: newFloorItem.modelUuid,
+ };
+
+ itemsGroupRef.current.add(obj);
+
+ } else {
+ setFloorItems((prevItems: Types.FloorItems) => {
+ const updatedItems = [...(prevItems || []), newFloorItem];
+ localStorage.setItem("FloorItems", JSON.stringify(updatedItems));
+ return updatedItems;
+ });
+
+ const email = localStorage.getItem("email");
+ const organization = email ? email.split("@")[1].split(".")[0] : "default";
+
+ //REST
+
+ // await setFloorItemApi(
+ // organization,
+ // obj.uuid,
+ // obj.userData.name,
+ // [worldPosition.x, worldPosition.y, worldPosition.z],
+ // { "x": obj.rotation.x, "y": obj.rotation.y, "z": obj.rotation.z },
+ // obj.userData.modelId,
+ // false,
+ // true,
+ // );
+
+ //SOCKET
+
+ const data = {
+ organization,
+ modelUuid: newFloorItem.modelUuid,
+ modelName: newFloorItem.modelName,
+ modelfileID: newFloorItem.modelfileID,
+ position: newFloorItem.position,
+ rotation: { x: obj.rotation.x, y: obj.rotation.y, z: obj.rotation.z },
+ isLocked: false,
+ isVisible: true,
+ socketId: socket.id,
+ };
+
+ socket.emit("v2:model-asset:add", data);
+
+ obj.userData = {
+ name: newFloorItem.modelName,
+ modelId: newFloorItem.modelfileID,
+ modelUuid: newFloorItem.modelUuid,
+ };
+
+ itemsGroupRef.current.add(obj);
+ }
}
});
@@ -205,7 +404,7 @@ const CopyPasteControls = ({ itemsGroupRef, copiedObjects, setCopiedObjects, pas
setSelectedAssets([]);
}
- return null; // No visible output, but the component handles copy-paste functionality
+ return null;
};
export default CopyPasteControls;
\ No newline at end of file
diff --git a/app/src/modules/scene/controls/selectionControls/duplicationControls.tsx b/app/src/modules/scene/controls/selectionControls/duplicationControls.tsx
index 39c3e49..ffe560c 100644
--- a/app/src/modules/scene/controls/selectionControls/duplicationControls.tsx
+++ b/app/src/modules/scene/controls/selectionControls/duplicationControls.tsx
@@ -7,6 +7,7 @@ import { toast } from "react-toastify";
import * as Types from "../../../../types/world/worldTypes";
import { setFloorItemApi } from "../../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi";
import { detectModifierKeys } from "../../../../utils/shortcutkeys/detectModifierKeys";
+import { useEventsStore } from "../../../../store/simulation/useEventsStore";
const DuplicationControls = ({ itemsGroupRef, duplicatedObjects, setDuplicatedObjects, setpastedObjects, selectionGroup, movedObjects, setMovedObjects, rotatedObjects, setRotatedObjects, boundingBoxRef }: any) => {
const { camera, controls, gl, scene, pointer, raycaster } = useThree();
@@ -15,6 +16,7 @@ const DuplicationControls = ({ itemsGroupRef, duplicatedObjects, setDuplicatedOb
const plane = useMemo(() => new THREE.Plane(new THREE.Vector3(0, 1, 0), 0), []);
const { floorItems, setFloorItems } = useFloorItems();
const { socket } = useSocketStore();
+ const { addEvent } = useEventsStore();
useEffect(() => {
if (!camera || !scene || toggleView) return;
@@ -116,55 +118,252 @@ const DuplicationControls = ({ itemsGroupRef, duplicatedObjects, setDuplicatedOb
if (itemsGroupRef.current) {
const newFloorItem: Types.FloorItemType = {
- modeluuid: obj.uuid,
- modelname: obj.userData.name,
+ modelUuid: obj.uuid,
+ modelName: obj.userData.name,
modelfileID: obj.userData.modelId,
position: [worldPosition.x, worldPosition.y, worldPosition.z],
rotation: { x: obj.rotation.x, y: obj.rotation.y, z: obj.rotation.z, },
isLocked: false,
- isVisible: true
- };
-
- setFloorItems((prevItems: Types.FloorItems) => {
- const updatedItems = [...(prevItems || []), newFloorItem];
- localStorage.setItem("FloorItems", JSON.stringify(updatedItems));
- return updatedItems;
- });
-
- const email = localStorage.getItem("email");
- const organization = email ? email.split("@")[1].split(".")[0] : "default";
-
- //REST
-
- // await setFloorItemApi(
- // organization,
- // obj.uuid,
- // obj.userData.name,
- // [worldPosition.x, worldPosition.y, worldPosition.z],
- // { "x": obj.rotation.x, "y": obj.rotation.y, "z": obj.rotation.z },
- // obj.userData.modelId,
- // false,
- // true,
- // );
-
- //SOCKET
-
- const data = {
- organization,
- modeluuid: newFloorItem.modeluuid,
- modelname: newFloorItem.modelname,
- modelfileID: newFloorItem.modelfileID,
- position: newFloorItem.position,
- rotation: { x: obj.rotation.x, y: obj.rotation.y, z: obj.rotation.z },
- isLocked: false,
isVisible: true,
- socketId: socket.id,
};
- socket.emit("v2:model-asset:add", data);
+ let updatedEventData = null;
+ if (obj.userData.eventData) {
+ updatedEventData = JSON.parse(JSON.stringify(obj.userData.eventData));
+ updatedEventData.modelUuid = newFloorItem.modelUuid;
- obj.userData.modeluuid = newFloorItem.modeluuid;
- itemsGroupRef.current.add(obj);
+ const eventData: any = {
+ type: obj.userData.eventData.type,
+ };
+
+ if (obj.userData.eventData.type === "Conveyor") {
+ const ConveyorEvent: ConveyorEventSchema = {
+ modelUuid: newFloorItem.modelUuid,
+ modelName: newFloorItem.modelName,
+ position: newFloorItem.position,
+ rotation: [newFloorItem.rotation.x, newFloorItem.rotation.y, newFloorItem.rotation.z],
+ state: "idle",
+ type: 'transfer',
+ speed: 1,
+ points: updatedEventData.points.map((point: any, index: number) => ({
+ uuid: THREE.MathUtils.generateUUID(),
+ position: [point.position[0], point.position[1], point.position[2]],
+ rotation: [point.rotation[0], point.rotation[1], point.rotation[2]],
+ action: {
+ actionUuid: THREE.MathUtils.generateUUID(),
+ actionName: `Action ${index}`,
+ actionType: 'default',
+ material: 'Default Material',
+ delay: 0,
+ spawnInterval: 5,
+ spawnCount: 1,
+ triggers: []
+ }
+ }))
+ };
+ addEvent(ConveyorEvent);
+ eventData.points = ConveyorEvent.points.map(point => ({
+ uuid: point.uuid,
+ position: point.position,
+ rotation: point.rotation
+ }));
+
+ } else if (obj.userData.eventData.type === "Vehicle") {
+ const vehicleEvent: VehicleEventSchema = {
+ modelUuid: newFloorItem.modelUuid,
+ modelName: newFloorItem.modelName,
+ position: newFloorItem.position,
+ rotation: [newFloorItem.rotation.x, newFloorItem.rotation.y, newFloorItem.rotation.z],
+ state: "idle",
+ type: "vehicle",
+ speed: 1,
+ point: {
+ uuid: THREE.MathUtils.generateUUID(),
+ position: [updatedEventData.point.position[0], updatedEventData.point.position[1], updatedEventData.point.position[2]],
+ rotation: [updatedEventData.point.rotation[0], updatedEventData.point.rotation[1], updatedEventData.point.rotation[2]],
+ action: {
+ actionUuid: THREE.MathUtils.generateUUID(),
+ actionName: "Action 1",
+ actionType: "travel",
+ unLoadDuration: 5,
+ loadCapacity: 10,
+ steeringAngle: 0,
+ pickUpPoint: null,
+ unLoadPoint: null,
+ triggers: []
+ }
+ }
+ };
+ addEvent(vehicleEvent);
+ eventData.point = {
+ uuid: vehicleEvent.point.uuid,
+ position: vehicleEvent.point.position,
+ rotation: vehicleEvent.point.rotation
+ };
+
+ } else if (obj.userData.eventData.type === "ArmBot") {
+ const roboticArmEvent: RoboticArmEventSchema = {
+ modelUuid: newFloorItem.modelUuid,
+ modelName: newFloorItem.modelName,
+ position: newFloorItem.position,
+ rotation: [newFloorItem.rotation.x, newFloorItem.rotation.y, newFloorItem.rotation.z],
+ state: "idle",
+ type: "roboticArm",
+ speed: 1,
+ point: {
+ uuid: THREE.MathUtils.generateUUID(),
+ position: [updatedEventData.point.position[0], updatedEventData.point.position[1], updatedEventData.point.position[2]],
+ rotation: [updatedEventData.point.rotation[0], updatedEventData.point.rotation[1], updatedEventData.point.rotation[2]],
+ actions: [
+ {
+ actionUuid: THREE.MathUtils.generateUUID(),
+ actionName: "Action 1",
+ actionType: "pickAndPlace",
+ process: {
+ startPoint: null,
+ endPoint: null
+ },
+ triggers: []
+ }
+ ]
+ }
+ };
+ addEvent(roboticArmEvent);
+ eventData.point = {
+ uuid: roboticArmEvent.point.uuid,
+ position: roboticArmEvent.point.position,
+ rotation: roboticArmEvent.point.rotation
+ };
+
+ } else if (obj.userData.eventData.type === "StaticMachine") {
+ const machineEvent: MachineEventSchema = {
+ modelUuid: newFloorItem.modelUuid,
+ modelName: newFloorItem.modelName,
+ position: newFloorItem.position,
+ rotation: [newFloorItem.rotation.x, newFloorItem.rotation.y, newFloorItem.rotation.z],
+ state: "idle",
+ type: "machine",
+ point: {
+ uuid: THREE.MathUtils.generateUUID(),
+ position: [updatedEventData.point.position[0], updatedEventData.point.position[1], updatedEventData.point.position[2]],
+ rotation: [updatedEventData.point.rotation[0], updatedEventData.point.rotation[1], updatedEventData.point.rotation[2]],
+ action: {
+ actionUuid: THREE.MathUtils.generateUUID(),
+ actionName: "Action 1",
+ actionType: "process",
+ processTime: 10,
+ swapMaterial: "Default Material",
+ triggers: []
+ }
+ }
+ };
+ addEvent(machineEvent);
+ eventData.point = {
+ uuid: machineEvent.point.uuid,
+ position: machineEvent.point.position,
+ rotation: machineEvent.point.rotation
+ };
+ }
+
+ obj.userData.eventData = eventData;
+
+ newFloorItem.eventData = eventData;
+
+
+ setFloorItems((prevItems: Types.FloorItems) => {
+ const updatedItems = [...(prevItems || []), newFloorItem];
+ localStorage.setItem("FloorItems", JSON.stringify(updatedItems));
+ return updatedItems;
+ });
+
+ const email = localStorage.getItem("email");
+ const organization = email ? email.split("@")[1].split(".")[0] : "default";
+
+ //REST
+
+ // await setFloorItemApi(
+ // organization,
+ // obj.uuid,
+ // obj.userData.name,
+ // [worldPosition.x, worldPosition.y, worldPosition.z],
+ // { "x": obj.rotation.x, "y": obj.rotation.y, "z": obj.rotation.z },
+ // obj.userData.modelId,
+ // false,
+ // true,
+ // );
+
+ //SOCKET
+
+ const data = {
+ organization,
+ modelUuid: newFloorItem.modelUuid,
+ modelName: newFloorItem.modelName,
+ modelfileID: newFloorItem.modelfileID,
+ position: newFloorItem.position,
+ rotation: { x: obj.rotation.x, y: obj.rotation.y, z: obj.rotation.z },
+ isLocked: false,
+ isVisible: true,
+ socketId: socket.id,
+ eventData: eventData,
+ };
+
+ socket.emit("v2:model-asset:add", data);
+
+ obj.userData = {
+ name: newFloorItem.modelName,
+ modelId: newFloorItem.modelfileID,
+ modelUuid: newFloorItem.modelUuid,
+ };
+
+ itemsGroupRef.current.add(obj);
+
+ } else {
+ setFloorItems((prevItems: Types.FloorItems) => {
+ const updatedItems = [...(prevItems || []), newFloorItem];
+ localStorage.setItem("FloorItems", JSON.stringify(updatedItems));
+ return updatedItems;
+ });
+
+ const email = localStorage.getItem("email");
+ const organization = email ? email.split("@")[1].split(".")[0] : "default";
+
+ //REST
+
+ // await setFloorItemApi(
+ // organization,
+ // obj.uuid,
+ // obj.userData.name,
+ // [worldPosition.x, worldPosition.y, worldPosition.z],
+ // { "x": obj.rotation.x, "y": obj.rotation.y, "z": obj.rotation.z },
+ // obj.userData.modelId,
+ // false,
+ // true,
+ // );
+
+ //SOCKET
+
+ const data = {
+ organization,
+ modelUuid: newFloorItem.modelUuid,
+ modelName: newFloorItem.modelName,
+ modelfileID: newFloorItem.modelfileID,
+ position: newFloorItem.position,
+ rotation: { x: obj.rotation.x, y: obj.rotation.y, z: obj.rotation.z },
+ isLocked: false,
+ isVisible: true,
+ socketId: socket.id,
+ };
+
+ socket.emit("v2:model-asset:add", data);
+
+ obj.userData = {
+ name: newFloorItem.modelName,
+ modelId: newFloorItem.modelfileID,
+ modelUuid: newFloorItem.modelUuid,
+ };
+
+ itemsGroupRef.current.add(obj);
+ }
}
});
@@ -183,7 +382,7 @@ const DuplicationControls = ({ itemsGroupRef, duplicatedObjects, setDuplicatedOb
setSelectedAssets([]);
}
- return null; // This component does not render any UI
+ return null;
};
export default DuplicationControls;
\ No newline at end of file
diff --git a/app/src/modules/scene/controls/selectionControls/moveControls.tsx b/app/src/modules/scene/controls/selectionControls/moveControls.tsx
index 2cde3e4..d371806 100644
--- a/app/src/modules/scene/controls/selectionControls/moveControls.tsx
+++ b/app/src/modules/scene/controls/selectionControls/moveControls.tsx
@@ -1,11 +1,14 @@
import * as THREE from "three";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useMemo, useRef } from "react";
import { useFrame, useThree } from "@react-three/fiber";
import { useFloorItems, useSelectedAssets, useSocketStore, useToggleView } from "../../../../store/store";
// import { setFloorItemApi } from '../../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi';
import { toast } from "react-toastify";
import * as Types from "../../../../types/world/worldTypes";
import { detectModifierKeys } from "../../../../utils/shortcutkeys/detectModifierKeys";
+import { useEventsStore } from "../../../../store/simulation/useEventsStore";
+import { useProductStore } from "../../../../store/simulation/useProductStore";
+import { useSelectedProduct } from "../../../../store/simulation/useSimulationStore";
function MoveControls({ movedObjects, setMovedObjects, itemsGroupRef, copiedObjects, setCopiedObjects, pastedObjects, setpastedObjects, duplicatedObjects, setDuplicatedObjects, selectionGroup, rotatedObjects, setRotatedObjects, boundingBoxRef }: any) {
const { camera, controls, gl, scene, pointer, raycaster } = useThree();
@@ -62,7 +65,7 @@ function MoveControls({ movedObjects, setMovedObjects, itemsGroupRef, copiedObje
if (keyCombination === "G") {
if (selectedAssets.length > 0) {
moveAssets();
- itemsData.current = floorItems.filter((item: { modeluuid: string }) => selectedAssets.some((asset: any) => asset.uuid === item.modeluuid));
+ itemsData.current = floorItems.filter((item: { modelUuid: string }) => selectedAssets.some((asset: any) => asset.uuid === item.modelUuid));
}
}
if (keyCombination === "ESCAPE") {
@@ -148,7 +151,7 @@ function MoveControls({ movedObjects, setMovedObjects, itemsGroupRef, copiedObje
const moveAssets = () => {
- const updatedItems = floorItems.filter((item: { modeluuid: string }) => !selectedAssets.some((asset: any) => asset.uuid === item.modeluuid));
+ const updatedItems = floorItems.filter((item: { modelUuid: string }) => !selectedAssets.some((asset: any) => asset.uuid === item.modelUuid));
setFloorItems(updatedItems);
setMovedObjects(selectedAssets);
selectedAssets.forEach((asset: any) => { selectionGroup.current.attach(asset); });
@@ -167,8 +170,8 @@ function MoveControls({ movedObjects, setMovedObjects, itemsGroupRef, copiedObje
if (itemsGroupRef.current) {
const newFloorItem: Types.FloorItemType = {
- modeluuid: obj.uuid,
- modelname: obj.userData.name,
+ modelUuid: obj.uuid,
+ modelName: obj.userData.name,
modelfileID: obj.userData.modelId,
position: [worldPosition.x, worldPosition.y, worldPosition.z],
rotation: { x: obj.rotation.x, y: obj.rotation.y, z: obj.rotation.z, },
@@ -176,6 +179,24 @@ function MoveControls({ movedObjects, setMovedObjects, itemsGroupRef, copiedObje
isVisible: true
};
+ if (obj.userData.eventData) {
+ const eventData = useEventsStore.getState().getEventByModelUuid(obj.userData.modelUuid);
+ const productData = useProductStore.getState().getEventByModelUuid(useSelectedProduct.getState().selectedProduct.productId, obj.userData.modelUuid);
+
+ if (eventData) {
+ useEventsStore.getState().updateEvent(obj.userData.modelUuid, {
+ position: [worldPosition.x, worldPosition.y, worldPosition.z],
+ rotation: [obj.rotation.x, obj.rotation.y, obj.rotation.z],
+ })
+ }
+ if (productData) {
+ useProductStore.getState().updateEvent(useSelectedProduct.getState().selectedProduct.productId, obj.userData.modelUuid, {
+ position: [worldPosition.x, worldPosition.y, worldPosition.z],
+ rotation: [obj.rotation.x, obj.rotation.y, obj.rotation.z],
+ })
+ }
+ }
+
setFloorItems((prevItems: Types.FloorItems) => {
const updatedItems = [...(prevItems || []), newFloorItem];
localStorage.setItem("FloorItems", JSON.stringify(updatedItems));
@@ -202,8 +223,8 @@ function MoveControls({ movedObjects, setMovedObjects, itemsGroupRef, copiedObje
const data = {
organization,
- modeluuid: newFloorItem.modeluuid,
- modelname: newFloorItem.modelname,
+ modelUuid: newFloorItem.modelUuid,
+ modelName: newFloorItem.modelName,
modelfileID: newFloorItem.modelfileID,
position: newFloorItem.position,
rotation: { x: obj.rotation.x, y: obj.rotation.y, z: obj.rotation.z },
@@ -234,7 +255,7 @@ function MoveControls({ movedObjects, setMovedObjects, itemsGroupRef, copiedObje
setSelectedAssets([]);
}
- return null; // No need to return anything, as this component is used for its side effects
+ return null;
}
export default MoveControls
\ No newline at end of file
diff --git a/app/src/modules/scene/controls/selectionControls/rotateControls.tsx b/app/src/modules/scene/controls/selectionControls/rotateControls.tsx
index 5dfaf08..08667b4 100644
--- a/app/src/modules/scene/controls/selectionControls/rotateControls.tsx
+++ b/app/src/modules/scene/controls/selectionControls/rotateControls.tsx
@@ -1,11 +1,13 @@
import * as THREE from "three";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useMemo, useRef } from "react";
import { useFrame, useThree } from "@react-three/fiber";
import { useFloorItems, useSelectedAssets, useSocketStore, useToggleView } from "../../../../store/store";
// import { setFloorItemApi } from '../../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi';
import { toast } from "react-toastify";
import * as Types from "../../../../types/world/worldTypes";
-import { setFloorItemApi } from "../../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi";
+import { useEventsStore } from "../../../../store/simulation/useEventsStore";
+import { useProductStore } from "../../../../store/simulation/useProductStore";
+import { useSelectedProduct } from "../../../../store/simulation/useSimulationStore";
function RotateControls({ rotatedObjects, setRotatedObjects, movedObjects, setMovedObjects, itemsGroupRef, copiedObjects, setCopiedObjects, pastedObjects, setpastedObjects, duplicatedObjects, setDuplicatedObjects, selectionGroup, boundingBoxRef }: any) {
const { camera, controls, gl, scene, pointer, raycaster } = useThree();
@@ -62,7 +64,7 @@ function RotateControls({ rotatedObjects, setRotatedObjects, movedObjects, setMo
if (event.key.toLowerCase() === "r") {
if (selectedAssets.length > 0) {
rotateAssets();
- itemsData.current = floorItems.filter((item: { modeluuid: string }) => selectedAssets.some((asset: any) => asset.uuid === item.modeluuid));
+ itemsData.current = floorItems.filter((item: { modelUuid: string }) => selectedAssets.some((asset: any) => asset.uuid === item.modelUuid));
}
}
if (event.key.toLowerCase() === "escape") {
@@ -126,7 +128,7 @@ function RotateControls({ rotatedObjects, setRotatedObjects, movedObjects, setMo
});
const rotateAssets = () => {
- const updatedItems = floorItems.filter((item: { modeluuid: string }) => !selectedAssets.some((asset: any) => asset.uuid === item.modeluuid));
+ const updatedItems = floorItems.filter((item: { modelUuid: string }) => !selectedAssets.some((asset: any) => asset.uuid === item.modelUuid));
setFloorItems(updatedItems);
const box = new THREE.Box3();
@@ -168,8 +170,8 @@ function RotateControls({ rotatedObjects, setRotatedObjects, movedObjects, setMo
if (itemsGroupRef.current) {
const newFloorItem: Types.FloorItemType = {
- modeluuid: obj.uuid,
- modelname: obj.userData.name,
+ modelUuid: obj.uuid,
+ modelName: obj.userData.name,
modelfileID: obj.userData.modelId,
position: [worldPosition.x, worldPosition.y, worldPosition.z],
rotation: { x: obj.rotation.x, y: obj.rotation.y, z: obj.rotation.z, },
@@ -177,6 +179,24 @@ function RotateControls({ rotatedObjects, setRotatedObjects, movedObjects, setMo
isVisible: true
};
+ if (obj.userData.eventData) {
+ const eventData = useEventsStore.getState().getEventByModelUuid(obj.userData.modelUuid);
+ const productData = useProductStore.getState().getEventByModelUuid(useSelectedProduct.getState().selectedProduct.productId, obj.userData.modelUuid);
+
+ if (eventData) {
+ useEventsStore.getState().updateEvent(obj.userData.modelUuid, {
+ position: [worldPosition.x, worldPosition.y, worldPosition.z],
+ rotation: [obj.rotation.x, obj.rotation.y, obj.rotation.z],
+ })
+ }
+ if (productData) {
+ useProductStore.getState().updateEvent(useSelectedProduct.getState().selectedProduct.productId, obj.userData.modelUuid, {
+ position: [worldPosition.x, worldPosition.y, worldPosition.z],
+ rotation: [obj.rotation.x, obj.rotation.y, obj.rotation.z],
+ })
+ }
+ }
+
setFloorItems((prevItems: Types.FloorItems) => {
const updatedItems = [...(prevItems || []), newFloorItem];
localStorage.setItem("FloorItems", JSON.stringify(updatedItems));
@@ -203,8 +223,8 @@ function RotateControls({ rotatedObjects, setRotatedObjects, movedObjects, setMo
const data = {
organization,
- modeluuid: newFloorItem.modeluuid,
- modelname: newFloorItem.modelname,
+ modelUuid: newFloorItem.modelUuid,
+ modelName: newFloorItem.modelName,
modelfileID: newFloorItem.modelfileID,
position: newFloorItem.position,
rotation: { x: obj.rotation.x, y: obj.rotation.y, z: obj.rotation.z },
@@ -235,7 +255,7 @@ function RotateControls({ rotatedObjects, setRotatedObjects, movedObjects, setMo
setSelectedAssets([]);
}
- return null; // No need to return anything, as this component is used for its side effects
+ return null;
}
export default RotateControls
\ No newline at end of file
diff --git a/app/src/modules/scene/controls/selectionControls/selectionControls.tsx b/app/src/modules/scene/controls/selectionControls/selectionControls.tsx
index 49b86d2..33a35c9 100644
--- a/app/src/modules/scene/controls/selectionControls/selectionControls.tsx
+++ b/app/src/modules/scene/controls/selectionControls/selectionControls.tsx
@@ -14,6 +14,8 @@ import CopyPasteControls from "./copyPasteControls";
import MoveControls from "./moveControls";
import RotateControls from "./rotateControls";
import useModuleStore from "../../../../store/useModuleStore";
+import { useEventsStore } from "../../../../store/simulation/useEventsStore";
+import { useProductStore } from "../../../../store/simulation/useProductStore";
const SelectionControls: React.FC = () => {
const { camera, controls, gl, scene, pointer } = useThree();
@@ -206,7 +208,7 @@ const SelectionControls: React.FC = () => {
const storedItems = JSON.parse(localStorage.getItem("FloorItems") || "[]");
const selectedUUIDs = selectedAssets.map((mesh: THREE.Object3D) => mesh.uuid);
- const updatedStoredItems = storedItems.filter((item: { modeluuid: string }) => !selectedUUIDs.includes(item.modeluuid));
+ const updatedStoredItems = storedItems.filter((item: { modelUuid: string }) => !selectedUUIDs.includes(item.modelUuid));
localStorage.setItem("FloorItems", JSON.stringify(updatedStoredItems));
selectedAssets.forEach((selectedMesh: THREE.Object3D) => {
@@ -218,13 +220,16 @@ const SelectionControls: React.FC = () => {
const data = {
organization: organization,
- modeluuid: selectedMesh.uuid,
- modelname: selectedMesh.userData.name,
+ modelUuid: selectedMesh.uuid,
+ modelName: selectedMesh.userData.name,
socketId: socket.id,
};
socket.emit("v2:model-asset:delete", data);
+ useEventsStore.getState().removeEvent(selectedMesh.uuid);
+ useProductStore.getState().deleteEvent(selectedMesh.uuid);
+
selectedMesh.traverse((child: THREE.Object3D) => {
if (child instanceof THREE.Mesh) {
if (child.geometry) child.geometry.dispose();
@@ -243,7 +248,7 @@ const SelectionControls: React.FC = () => {
itemsGroupRef.current?.remove(selectedMesh);
});
- const updatedItems = floorItems.filter((item: { modeluuid: string }) => !selectedUUIDs.includes(item.modeluuid));
+ const updatedItems = floorItems.filter((item: { modelUuid: string }) => !selectedUUIDs.includes(item.modelUuid));
setFloorItems(updatedItems);
}
toast.success("Selected models removed!");
diff --git a/app/src/modules/simulation/events/points/creator/pointsCreator.tsx b/app/src/modules/simulation/events/points/creator/pointsCreator.tsx
index c5025dd..c6ec316 100644
--- a/app/src/modules/simulation/events/points/creator/pointsCreator.tsx
+++ b/app/src/modules/simulation/events/points/creator/pointsCreator.tsx
@@ -1,10 +1,13 @@
-import React, { useEffect, useRef, useState } from 'react';
-import * as THREE from 'three';
-import { useEventsStore } from '../../../../../store/simulation/useEventsStore';
-import useModuleStore from '../../../../../store/useModuleStore';
-import { TransformControls } from '@react-three/drei';
-import { detectModifierKeys } from '../../../../../utils/shortcutkeys/detectModifierKeys';
-import { useSelectedEventSphere, useSelectedEventData } from '../../../../../store/simulation/useSimulationStore';
+import React, { useEffect, useRef, useState } from "react";
+import * as THREE from "three";
+import { useEventsStore } from "../../../../../store/simulation/useEventsStore";
+import useModuleStore from "../../../../../store/useModuleStore";
+import { TransformControls } from "@react-three/drei";
+import { detectModifierKeys } from "../../../../../utils/shortcutkeys/detectModifierKeys";
+import {
+ useSelectedEventSphere,
+ useSelectedEventData,
+} from "../../../../../store/simulation/useSimulationStore";
function PointsCreator() {
const { events, updatePoint, getPointByUuid, getEventByModelUuid } = useEventsStore();
@@ -12,8 +15,8 @@ function PointsCreator() {
const transformRef = useRef
(null);
const [transformMode, setTransformMode] = useState<"translate" | "rotate" | null>(null);
const sphereRefs = useRef<{ [key: string]: THREE.Mesh }>({});
- const { selectedEventSphere, setSelectedEventSphere, clearSelectedEventSphere } = useSelectedEventSphere();
- const { setSelectedEventData, clearSelectedEventData } = useSelectedEventData();
+ const { selectedEventSphere, setSelectedEventSphere, clearSelectedEventSphere, } = useSelectedEventSphere();
+ const { selectedEventData, setSelectedEventData, clearSelectedEventData } = useSelectedEventData();
useEffect(() => {
if (selectedEventSphere) {
@@ -47,37 +50,57 @@ function PointsCreator() {
}, [selectedEventSphere]);
const updatePointToState = (selectedEventSphere: THREE.Mesh) => {
- let point = JSON.parse(JSON.stringify(getPointByUuid(selectedEventSphere.userData.modelUuid, selectedEventSphere.userData.pointUuid)));
+ let point = JSON.parse(
+ JSON.stringify(
+ getPointByUuid(
+ selectedEventSphere.userData.modelUuid,
+ selectedEventSphere.userData.pointUuid
+ )
+ )
+ );
if (point) {
- point.position = [selectedEventSphere.position.x, selectedEventSphere.position.y, selectedEventSphere.position.z];
- updatePoint(selectedEventSphere.userData.modelUuid, selectedEventSphere.userData.pointUuid, point)
+ point.position = [
+ selectedEventSphere.position.x,
+ selectedEventSphere.position.y,
+ selectedEventSphere.position.z,
+ ];
+ updatePoint(
+ selectedEventSphere.userData.modelUuid,
+ selectedEventSphere.userData.pointUuid,
+ point
+ );
}
- }
+ };
return (
<>
- {activeModule === 'simulation' &&
+ {activeModule === "simulation" && (
<>
-
+
{events.map((event, i) => {
- if (event.type === 'transfer') {
+ if (event.type === "transfer") {
return (
-
+
{event.points.map((point, j) => (
(sphereRefs.current[point.uuid] = el!)}
onClick={(e) => {
e.stopPropagation();
- setSelectedEventSphere(sphereRefs.current[point.uuid]);
+ setSelectedEventSphere(
+ sphereRefs.current[point.uuid]
+ );
}}
onPointerMissed={() => {
- clearSelectedEventSphere();
+ if (selectedEventData?.data.type !== 'vehicle') {
+ clearSelectedEventSphere();
+ }
setTransformMode(null);
}}
key={`${i}-${j}`}
position={new THREE.Vector3(...point.position)}
+ // rotation={new THREE.Euler(...point.rotation)}
userData={{ modelUuid: event.modelUuid, pointUuid: point.uuid }}
>
@@ -86,22 +109,25 @@ function PointsCreator() {
))}
);
- } else if (event.type === 'vehicle') {
+ } else if (event.type === "vehicle") {
return (
-
+
(sphereRefs.current[event.point.uuid] = el!)}
onClick={(e) => {
e.stopPropagation();
- setSelectedEventSphere(sphereRefs.current[event.point.uuid]);
+ setSelectedEventSphere(
+ sphereRefs.current[event.point.uuid]
+ );
}}
onPointerMissed={() => {
clearSelectedEventSphere();
setTransformMode(null);
}}
position={new THREE.Vector3(...event.point.position)}
+ // rotation={new THREE.Euler(...event.point.rotation)}
userData={{ modelUuid: event.modelUuid, pointUuid: event.point.uuid }}
>
@@ -109,22 +135,25 @@ function PointsCreator() {
);
- } else if (event.type === 'roboticArm') {
+ } else if (event.type === "roboticArm") {
return (
-
+
(sphereRefs.current[event.point.uuid] = el!)}
onClick={(e) => {
e.stopPropagation();
- setSelectedEventSphere(sphereRefs.current[event.point.uuid]);
+ setSelectedEventSphere(
+ sphereRefs.current[event.point.uuid]
+ );
}}
onPointerMissed={() => {
clearSelectedEventSphere();
setTransformMode(null);
}}
position={new THREE.Vector3(...event.point.position)}
+ // rotation={new THREE.Euler(...event.point.rotation)}
userData={{ modelUuid: event.modelUuid, pointUuid: event.point.uuid }}
>
@@ -132,22 +161,25 @@ function PointsCreator() {
);
- } else if (event.type === 'machine') {
+ } else if (event.type === "machine") {
return (
-
+
(sphereRefs.current[event.point.uuid] = el!)}
onClick={(e) => {
e.stopPropagation();
- setSelectedEventSphere(sphereRefs.current[event.point.uuid]);
+ setSelectedEventSphere(
+ sphereRefs.current[event.point.uuid]
+ );
}}
onPointerMissed={() => {
clearSelectedEventSphere();
setTransformMode(null);
}}
position={new THREE.Vector3(...event.point.position)}
+ // rotation={new THREE.Euler(...event.point.rotation)}
userData={{ modelUuid: event.modelUuid, pointUuid: event.point.uuid }}
>
@@ -160,11 +192,18 @@ function PointsCreator() {
}
})}
- {(selectedEventSphere && transformMode) &&
- { updatePointToState(selectedEventSphere) }} />
- }
+ {selectedEventSphere && transformMode && (
+ {
+ updatePointToState(selectedEventSphere);
+ }}
+ />
+ )}
- }
+ )}
);
}
diff --git a/app/src/modules/simulation/events/points/functions/handleAddEventToProduct.ts b/app/src/modules/simulation/events/points/functions/handleAddEventToProduct.ts
index 7943c1c..9928578 100644
--- a/app/src/modules/simulation/events/points/functions/handleAddEventToProduct.ts
+++ b/app/src/modules/simulation/events/points/functions/handleAddEventToProduct.ts
@@ -1,28 +1,38 @@
+import { upsertProductOrEventApi } from "../../../../../services/simulation/UpsertProductOrEventApi";
+
interface HandleAddEventToProductParams {
- selectedAsset: any; // Replace `any` with specific type if you have it
- addEvent: (productId: string, asset: any) => void;
+ event: EventsSchema | undefined;
+ addEvent: (productId: string, event: EventsSchema) => void;
selectedProduct: {
productId: string;
productName: string;
- // Add other fields if needed
- };
- clearSelectedAsset: () => void;
+ }
+ clearSelectedAsset?: () => void;
}
export const handleAddEventToProduct = ({
- selectedAsset,
+ event,
addEvent,
selectedProduct,
- clearSelectedAsset,
+ clearSelectedAsset
}: HandleAddEventToProductParams) => {
- console.log('selectedProduct: ', selectedProduct);
- if (selectedAsset) {
- addEvent(selectedProduct.productId, selectedAsset);
- // upsertProductOrEventApi({
- // productName: selectedProduct.productName,
- // productId: selectedProduct.productId,
- // eventDatas: selectedAsset
- // });
- clearSelectedAsset();
+ if (event && selectedProduct.productId) {
+ addEvent(selectedProduct.productId, event);
+
+ const email = localStorage.getItem('email')
+ const organization = (email!.split("@")[1]).split(".")[0];
+
+ upsertProductOrEventApi({
+ productName: selectedProduct.productName,
+ productId: selectedProduct.productId,
+ organization: organization,
+ eventDatas: event
+ }).then((data) => {
+ // console.log(data);
+ })
+
+ if (clearSelectedAsset) {
+ clearSelectedAsset();
+ }
}
};
diff --git a/app/src/modules/simulation/products/products.tsx b/app/src/modules/simulation/products/products.tsx
index 38175e2..ee1ac42 100644
--- a/app/src/modules/simulation/products/products.tsx
+++ b/app/src/modules/simulation/products/products.tsx
@@ -7,28 +7,27 @@ import { upsertProductOrEventApi } from '../../../services/simulation/UpsertProd
import { getAllProductsApi } from '../../../services/simulation/getallProductsApi';
function Products() {
- const { products, addProduct } = useProductStore();
+ const { products, addProduct, setProducts } = useProductStore();
const { setSelectedProduct } = useSelectedProduct();
useEffect(() => {
- if (products.length === 0) {
- const id = THREE.MathUtils.generateUUID();
- const name = 'Product 1';
- addProduct(name, id);
- // upsertProductOrEventApi({ productName: name, productId: id }).then((data) => {
- // console.log('data: ', data);
- // });
- setSelectedProduct(id, name);
- }
- }, [products])
+ const email = localStorage.getItem('email')
+ const organization = (email!.split("@")[1]).split(".")[0];
+ getAllProductsApi(organization).then((data) => {
+ if (data.length === 0) {
+ const id = THREE.MathUtils.generateUUID();
+ const name = 'Product 1';
+ addProduct(name, id);
+ upsertProductOrEventApi({ productName: name, productId: id, organization: organization })
+ setSelectedProduct(id, name);
+ } else {
+ setProducts(data);
+ setSelectedProduct(data[0].productId, data[0].productName);
+ }
+ })
+ }, [])
useEffect(() => {
- // const email = localStorage.getItem('email')
- // const organization = (email!.split("@")[1]).split(".")[0];
- // console.log(organization);
- // getAllProductsApi(organization).then((data) => {
- // console.log('data: ', data);
- // })
}, [])
return (
diff --git a/app/src/modules/simulation/roboticArm/instances/armInstance/roboticArmInstance.tsx b/app/src/modules/simulation/roboticArm/instances/armInstance/roboticArmInstance.tsx
index 3fe8af1..6bde587 100644
--- a/app/src/modules/simulation/roboticArm/instances/armInstance/roboticArmInstance.tsx
+++ b/app/src/modules/simulation/roboticArm/instances/armInstance/roboticArmInstance.tsx
@@ -36,12 +36,12 @@ function RoboticArmInstance({ robot }: { robot: ArmBotStatus }) {
useEffect(() => {
let armItems = floorItems?.filter((val: any) =>
- val.modeluuid === "3abf5d46-b59e-4e6b-9c02-a4634b64b82d"
+ val.modelUuid === "3abf5d46-b59e-4e6b-9c02-a4634b64b82d"
);
// Get the first matching item
let armItem = armItems?.[0];
if (armItem) {
- const targetMesh = scene?.getObjectByProperty("uuid", armItem.modeluuid);
+ const targetMesh = scene?.getObjectByProperty("uuid", armItem.modelUuid);
if (targetMesh) {
targetMesh.visible = activeModule !== "simulation"
}
diff --git a/app/src/modules/simulation/triggers/connector/triggerConnector.tsx b/app/src/modules/simulation/triggers/connector/triggerConnector.tsx
index f836ea4..efefa0c 100644
--- a/app/src/modules/simulation/triggers/connector/triggerConnector.tsx
+++ b/app/src/modules/simulation/triggers/connector/triggerConnector.tsx
@@ -1,19 +1,85 @@
-import { useEffect } from "react";
+import { useEffect, useRef, useState } from "react";
import { useThree } from "@react-three/fiber";
+import * as THREE from "three";
import { useSubModuleStore } from "../../../../store/useModuleStore";
import { useSelectedAsset } from "../../../../store/simulation/useSimulationStore";
import { useProductStore } from "../../../../store/simulation/useProductStore";
+import { useEventsStore } from "../../../../store/simulation/useEventsStore";
import { useSelectedProduct } from "../../../../store/simulation/useSimulationStore";
+import { handleAddEventToProduct } from "../../events/points/functions/handleAddEventToProduct";
+
+interface ConnectionLine {
+ id: string;
+ start: THREE.Vector3;
+ end: THREE.Vector3;
+ mid: THREE.Vector3;
+ trigger: TriggerSchema;
+}
function TriggerConnector() {
const { gl, raycaster, scene } = useThree();
const { subModule } = useSubModuleStore();
- const { getPointByUuid, getIsEventInProduct } = useProductStore();
+ const { products, getPointByUuid, getIsEventInProduct, getActionByUuid, addTrigger, addEvent, getEventByModelUuid } = useProductStore();
const { selectedAsset, clearSelectedAsset } = useSelectedAsset();
const { selectedProduct } = useSelectedProduct();
- useEffect(() => {
+ const [firstSelectedPoint, setFirstSelectedPoint] = useState<{
+ productId: string;
+ modelUuid: string;
+ pointUuid: string;
+ actionUuid?: string;
+ } | null>(null);
+ const [connections, setConnections] = useState([]);
+
+ useEffect(() => {
+ const newConnections: ConnectionLine[] = [];
+
+ products.forEach(product => {
+ product.eventDatas.forEach(event => {
+ if ('points' in event) {
+ event.points.forEach(point => {
+ if ('action' in point && point.action?.triggers) {
+ point.action.triggers.forEach(trigger => {
+ if (trigger.triggeredAsset) {
+ const targetPoint = getPointByUuid(
+ product.productId,
+ trigger.triggeredAsset.triggeredModel.modelUuid,
+ trigger.triggeredAsset.triggeredPoint.pointUuid
+ );
+
+ if (targetPoint) {
+ const startPos = new THREE.Vector3(...point.position);
+ const endPos = new THREE.Vector3(...targetPoint.position);
+ const midPos = new THREE.Vector3()
+ .addVectors(startPos, endPos)
+ .multiplyScalar(0.5)
+ .add(new THREE.Vector3(0, 2, 0));
+
+ newConnections.push({
+ id: `${point.uuid}-${targetPoint.uuid}-${trigger.triggerUuid}`,
+ start: startPos,
+ end: endPos,
+ mid: midPos,
+ trigger
+ });
+ }
+ }
+ });
+ }
+ });
+ }
+ });
+ });
+
+ setConnections(newConnections);
+ }, [products]);
+
+ useEffect(() => {
+ console.log('connections: ', connections);
+ }, connections)
+
+ useEffect(() => {
const canvasElement = gl.domElement;
let drag = false;
@@ -44,37 +110,114 @@ function TriggerConnector() {
const handleRightClick = (evt: MouseEvent) => {
if (drag) return;
evt.preventDefault();
- const canvasElement = gl.domElement;
- if (!canvasElement) return;
- let intersects = raycaster.intersectObjects(scene.children, true);
- if (intersects.length > 0 && intersects[0]?.object?.parent?.parent?.position && intersects[0]?.object?.parent?.parent?.scale && intersects[0]?.object?.parent?.parent?.rotation) {
- let currentObject = intersects[0].object;
+ const intersects = raycaster.intersectObjects(scene.children, true);
+ if (intersects.length === 0) return;
- if (currentObject && currentObject.name === 'Event-Sphere') {
+ const currentObject = intersects[0].object;
+ if (!currentObject || currentObject.name !== 'Event-Sphere') return;
- const isInProduct = getIsEventInProduct(
- selectedProduct.productId,
- currentObject.userData.modelUuid
- );
+ const modelUuid = currentObject.userData.modelUuid;
+ const pointUuid = currentObject.userData.pointUuid;
- // You left Here
+ if (selectedProduct && getIsEventInProduct(selectedProduct.productId, modelUuid)) {
- if (isInProduct) {
+ const point = getPointByUuid(
+ selectedProduct.productId,
+ modelUuid,
+ pointUuid
+ );
- const event = getPointByUuid(
- selectedProduct.productId,
- currentObject.userData.modelUuid,
- currentObject.userData.pointUuid
- );
- console.log('event: ', event);
- } else {
+ if (!point) return;
- }
+ let actionUuid: string | undefined;
+ if ('action' in point && point.action) {
+ actionUuid = point.action.actionUuid;
+ } else if ('actions' in point && point.actions.length === 1) {
+ actionUuid = point.actions[0].actionUuid;
}
- } else {
+ if (!firstSelectedPoint) {
+ setFirstSelectedPoint({
+ productId: selectedProduct.productId,
+ modelUuid,
+ pointUuid,
+ actionUuid
+ });
+ } else {
+ const trigger: TriggerSchema = {
+ triggerUuid: THREE.MathUtils.generateUUID(),
+ triggerName: `Trigger ${firstSelectedPoint.pointUuid.slice(0, 4)} → ${pointUuid.slice(0, 4)}`,
+ triggerType: "onComplete",
+ delay: 0,
+ triggeredAsset: {
+ triggeredModel: {
+ modelName: currentObject.parent?.parent?.name || 'Unknown',
+ modelUuid: modelUuid
+ },
+ triggeredPoint: {
+ pointName: currentObject.name,
+ pointUuid: pointUuid
+ },
+ triggeredAction: actionUuid ? {
+ actionName: getActionByUuid(selectedProduct.productId, actionUuid)?.actionName || 'Action',
+ actionUuid: actionUuid
+ } : null
+ }
+ };
+ if (firstSelectedPoint.actionUuid) {
+ addTrigger(firstSelectedPoint.actionUuid, trigger);
+ }
+ setFirstSelectedPoint(null);
+ }
+ } else if (!getIsEventInProduct(selectedProduct.productId, modelUuid) && firstSelectedPoint) {
+ handleAddEventToProduct({
+ event: useEventsStore.getState().getEventByModelUuid(modelUuid),
+ addEvent,
+ selectedProduct,
+ })
+
+ const point = getPointByUuid(
+ selectedProduct.productId,
+ modelUuid,
+ pointUuid
+ );
+
+ if (!point) return;
+
+ let actionUuid: string | undefined;
+ if ('action' in point && point.action) {
+ actionUuid = point.action.actionUuid;
+ } else if ('actions' in point && point.actions.length === 1) {
+ actionUuid = point.actions[0].actionUuid;
+ }
+
+ const trigger: TriggerSchema = {
+ triggerUuid: THREE.MathUtils.generateUUID(),
+ triggerName: `Trigger ${firstSelectedPoint.pointUuid.slice(0, 4)} → ${pointUuid.slice(0, 4)}`,
+ triggerType: "onComplete",
+ delay: 0,
+ triggeredAsset: {
+ triggeredModel: {
+ modelName: currentObject.parent?.parent?.name || 'Unknown',
+ modelUuid: modelUuid
+ },
+ triggeredPoint: {
+ pointName: currentObject.name,
+ pointUuid: pointUuid
+ },
+ triggeredAction: actionUuid ? {
+ actionName: getActionByUuid(selectedProduct.productId, actionUuid)?.actionName || 'Action',
+ actionUuid: actionUuid
+ } : null
+ }
+ };
+
+ if (firstSelectedPoint.actionUuid) {
+ addTrigger(firstSelectedPoint.actionUuid, trigger);
+ }
+ setFirstSelectedPoint(null);
}
};
@@ -92,12 +235,12 @@ function TriggerConnector() {
canvasElement.removeEventListener('contextmenu', handleRightClick);
};
- }, [gl, subModule]);
+ }, [gl, subModule, selectedProduct, firstSelectedPoint]);
return (
<>
- )
+ );
}
-export default TriggerConnector
\ No newline at end of file
+export default TriggerConnector;
\ No newline at end of file
diff --git a/app/src/modules/simulation/ui/vehicle/useDraggableGLTF.ts b/app/src/modules/simulation/ui/vehicle/useDraggableGLTF.ts
new file mode 100644
index 0000000..b7e9272
--- /dev/null
+++ b/app/src/modules/simulation/ui/vehicle/useDraggableGLTF.ts
@@ -0,0 +1,131 @@
+import { useRef } from "react";
+import * as THREE from "three";
+import { ThreeEvent, useThree } from "@react-three/fiber";
+
+type OnUpdateCallback = (object: THREE.Object3D) => void;
+
+export default function useDraggableGLTF(onUpdate: OnUpdateCallback) {
+ const { camera, gl, controls, scene } = useThree();
+ const activeObjRef = useRef(null);
+ const planeRef = useRef(
+ new THREE.Plane(new THREE.Vector3(0, 1, 0), 0)
+ );
+ const offsetRef = useRef(new THREE.Vector3());
+ const initialPositionRef = useRef(new THREE.Vector3());
+
+ const raycaster = new THREE.Raycaster();
+ const pointer = new THREE.Vector2();
+
+ const handlePointerDown = (e: ThreeEvent) => {
+ e.stopPropagation();
+
+ let obj: THREE.Object3D | null = e.object;
+
+ // Traverse up until we find modelUuid in userData
+ while (obj && !obj.userData?.modelUuid) {
+ obj = obj.parent;
+ }
+
+ if (!obj) return;
+
+ // Disable orbit controls while dragging
+ if (controls) (controls as any).enabled = false;
+
+ activeObjRef.current = obj;
+ initialPositionRef.current.copy(obj.position);
+
+ // Get world position
+ const objectWorldPos = new THREE.Vector3();
+ obj.getWorldPosition(objectWorldPos);
+
+ // Set plane at the object's Y level
+ planeRef.current.set(new THREE.Vector3(0, 1, 0), -objectWorldPos.y);
+
+ // Convert pointer to NDC
+ const rect = gl.domElement.getBoundingClientRect();
+ pointer.x = ((e.clientX - rect.left) / rect.width) * 2 - 1;
+ pointer.y = -((e.clientY - rect.top) / rect.height) * 2 + 1;
+
+ // Raycast to intersection
+ raycaster.setFromCamera(pointer, camera);
+ const intersection = new THREE.Vector3();
+ raycaster.ray.intersectPlane(planeRef.current, intersection);
+
+ // Calculate offset
+ offsetRef.current.copy(objectWorldPos).sub(intersection);
+
+ // Start listening for drag
+ gl.domElement.addEventListener("pointermove", handlePointerMove);
+ gl.domElement.addEventListener("pointerup", handlePointerUp);
+ };
+
+ const handlePointerMove = (e: PointerEvent) => {
+ if (!activeObjRef.current) return;
+
+ // Check if Shift key is pressed
+ const isShiftKeyPressed = e.shiftKey;
+
+ // Get the mouse position relative to the canvas
+ const rect = gl.domElement.getBoundingClientRect();
+ pointer.x = ((e.clientX - rect.left) / rect.width) * 2 - 1;
+ pointer.y = -((e.clientY - rect.top) / rect.height) * 2 + 1;
+
+ // Update raycaster to point to the mouse position
+ raycaster.setFromCamera(pointer, camera);
+
+ // Create a vector to store intersection point
+ const intersection = new THREE.Vector3();
+ const intersects = raycaster.ray.intersectPlane(planeRef.current, intersection);
+ if (!intersects) return;
+
+ // Add offset for dragging
+ intersection.add(offsetRef.current);
+ console.log('intersection: ', intersection);
+
+ // Get the parent's world matrix if exists
+ const parent = activeObjRef.current.parent;
+ const targetPosition = new THREE.Vector3();
+
+ if (isShiftKeyPressed) {
+ console.log('isShiftKeyPressed: ', isShiftKeyPressed);
+ // For Y-axis only movement, maintain original X and Z
+ console.log('initialPositionRef: ', initialPositionRef);
+ console.log('intersection.y: ', intersection);
+ targetPosition.set(
+ initialPositionRef.current.x,
+ intersection.y,
+ initialPositionRef.current.z
+ );
+ } else {
+ // For free movement
+ targetPosition.copy(intersection);
+ }
+
+ // Convert world position to local if object is nested inside a parent
+ if (parent) {
+ parent.worldToLocal(targetPosition);
+ }
+
+ // Update object position
+ activeObjRef.current.position.copy(targetPosition);
+ };
+
+ const handlePointerUp = () => {
+ if (controls) (controls as any).enabled = true;
+
+ if (activeObjRef.current) {
+ // Pass the updated position to the onUpdate callback to persist it
+ onUpdate(activeObjRef.current);
+ }
+
+ gl.domElement.removeEventListener("pointermove", handlePointerMove);
+ gl.domElement.removeEventListener("pointerup", handlePointerUp);
+
+ activeObjRef.current = null;
+ };
+
+ return { handlePointerDown };
+}
+
+
+
diff --git a/app/src/modules/simulation/ui/vehicle/vehicleUI.tsx b/app/src/modules/simulation/ui/vehicle/vehicleUI.tsx
new file mode 100644
index 0000000..5dec724
--- /dev/null
+++ b/app/src/modules/simulation/ui/vehicle/vehicleUI.tsx
@@ -0,0 +1,243 @@
+import React, { useEffect, useRef, useState } from 'react';
+import startPoint from "../../../../assets/gltf-glb/arrow_green.glb";
+import startEnd from "../../../../assets/gltf-glb/arrow_red.glb";
+import * as THREE from "three";
+import { useGLTF } from '@react-three/drei';
+import { useFrame, useThree } from '@react-three/fiber';
+import { useSelectedEventSphere } from '../../../../store/simulation/useSimulationStore';
+import { useVehicleStore } from '../../../../store/simulation/useVehicleStore';
+import * as Types from "../../../../types/world/worldTypes";
+const VehicleUI = () => {
+ const { scene: startScene } = useGLTF(startPoint) as any;
+ const { scene: endScene } = useGLTF(startEnd) as any;
+ const startMarker = useRef(null);
+ const endMarker = useRef(null);
+ const prevMousePos = useRef({ x: 0, y: 0 });
+ const { selectedEventSphere } = useSelectedEventSphere();
+ const { vehicles, updateVehicle } = useVehicleStore();
+ 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]);
+ const [endRotation, setEndRotation] = useState<[number, number, number]>([0, 0, 0]);
+ const [isDragging, setIsDragging] = useState<"start" | "end" | null>(null);
+ const [isRotating, setIsRotating] = useState<"start" | "end" | null>(null);
+ const { raycaster } = useThree();
+ const plane = useRef(new THREE.Plane(new THREE.Vector3(0, 1, 0), 0));
+ const state: Types.ThreeState = useThree();
+ const controls: any = state.controls;
+
+ useEffect(() => {
+ if (!selectedEventSphere) return;
+ const selectedVehicle = vehicles.find(
+ (vehicle: any) => vehicle.modelUuid === 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]);
+ } 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]);
+ } 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]);
+ }
+ }
+ }, [selectedEventSphere]);
+
+ useFrame(() => {
+ if (!isDragging) return;
+ const intersectPoint = new THREE.Vector3();
+ 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]);
+ }
+ if (isDragging === "end") {
+ setEndPosition([intersectPoint.x, 0, intersectPoint.z]);
+ }
+ }
+ });
+
+ useFrame((state) => {
+ if (!isRotating) return;
+
+ const currentPointerX = state.pointer.x;
+ const deltaX = currentPointerX - prevMousePos.current.x;
+ prevMousePos.current.x = currentPointerX;
+
+ const marker = isRotating === "start" ? startMarker.current : endMarker.current;
+
+ if (marker) {
+ const rotationSpeed = 10;
+ marker.rotation.y += deltaX * rotationSpeed;
+ if (isRotating === 'start') {
+ setStartRotation([marker.rotation.x, marker.rotation.y, marker.rotation.z])
+ } else {
+
+ setEndRotation([marker.rotation.x, marker.rotation.y, marker.rotation.z])
+ }
+ }
+ });
+
+
+ const handlePointerDown = (e: any, state: "start" | "end", rotation: "start" | "end") => {
+
+ if (e.object.name === "handle") {
+ const normalizedX = (e.clientX / window.innerWidth) * 2 - 1;
+ const normalizedY = -(e.clientY / window.innerHeight) * 2 + 1;
+ prevMousePos.current = { x: normalizedX, y: normalizedY };
+ setIsRotating(rotation);
+ if (controls) controls.enabled = false;
+ setIsDragging(null);
+
+ } else {
+ setIsDragging(state);
+ setIsRotating(null);
+ if (controls) controls.enabled = false;
+ }
+ };
+
+ const handlePointerUp = () => {
+ controls.enabled = true;
+ setIsDragging(null);
+ setIsRotating(null);
+
+ if (selectedEventSphere?.userData.modelUuid) {
+ const updatedVehicle = vehicles.find(
+ (vehicle) => vehicle.modelUuid === selectedEventSphere.userData.modelUuid
+ );
+
+ if (updatedVehicle) {
+ updateVehicle(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],
+ },
+ },
+ unLoadPoint: {
+ position: {
+ x: endPosition[0],
+ y: endPosition[1],
+ z: endPosition[2],
+ },
+ rotation: {
+ x: endRotation[0],
+ y: endRotation[1],
+ z: endRotation[2],
+ },
+ },
+ },
+ },
+ });
+ }
+ }
+ };
+
+ useEffect(() => {
+ const handleGlobalPointerUp = () => {
+ setIsDragging(null);
+ setIsRotating(null);
+ if (controls) controls.enabled = true;
+ handlePointerUp();
+ };
+
+ if (isDragging || isRotating) {
+ window.addEventListener("pointerup", handleGlobalPointerUp);
+ }
+
+ return () => {
+ window.removeEventListener("pointerup", handleGlobalPointerUp);
+ };
+ }, [isDragging, isRotating, startPosition, startRotation, endPosition, endRotation]);
+
+ return (
+ startPosition.length > 0 && endPosition.length > 0 ? (
+
+ {
+ e.stopPropagation();
+ handlePointerDown(e, "start", "start");
+ }}
+ onPointerMissed={() => {
+ controls.enabled = true;
+ setIsDragging(null);
+ setIsRotating(null);
+ }}
+ />
+
+ {
+ e.stopPropagation();
+ handlePointerDown(e, "end", "end");
+ }}
+ onPointerMissed={() => {
+ controls.enabled = true;
+ setIsDragging(null);
+ setIsRotating(null);
+ }}
+ />
+
+ ) : null
+ );
+}
+export default VehicleUI;
+
+
diff --git a/app/src/modules/simulation/vehicle/instances/animator/vehicleAnimator.tsx b/app/src/modules/simulation/vehicle/instances/animator/vehicleAnimator.tsx
index a8cfc39..2f0b235 100644
--- a/app/src/modules/simulation/vehicle/instances/animator/vehicleAnimator.tsx
+++ b/app/src/modules/simulation/vehicle/instances/animator/vehicleAnimator.tsx
@@ -1,9 +1,8 @@
import { useEffect, useRef, useState } from 'react'
import { useFrame, useThree } from '@react-three/fiber';
-import { useFloorItems } from '../../../../../store/store';
import * as THREE from 'three';
import { Line } from '@react-three/drei';
-import { useAnimationPlaySpeed, usePauseButtonStore, useResetButtonStore } from '../../../../../store/usePlayButtonStore';
+import { useAnimationPlaySpeed, usePauseButtonStore, usePlayButtonStore, useResetButtonStore } from '../../../../../store/usePlayButtonStore';
import { useVehicleStore } from '../../../../../store/simulation/useVehicleStore';
interface VehicleAnimatorProps {
@@ -16,27 +15,35 @@ interface VehicleAnimatorProps {
}
function VehicleAnimator({ path, handleCallBack, currentPhase, agvUuid, agvDetail, reset }: VehicleAnimatorProps) {
- const { decrementVehicleLoad, vehicles } = useVehicleStore();
+ const { decrementVehicleLoad } = useVehicleStore();
const { isPaused } = usePauseButtonStore();
+ const { isPlaying } = usePlayButtonStore();
const { speed } = useAnimationPlaySpeed();
- const { isReset } = useResetButtonStore();
- const [restRotation, setRestingRotation] = useState(true);
- const [progress, setProgress] = useState(0);
- const [currentPath, setCurrentPath] = useState<[number, number, number][]>([]);
- const { scene } = useThree();
+ const { isReset, setReset } = useResetButtonStore();
const progressRef = useRef(0);
const movingForward = useRef(true);
const completedRef = useRef(false);
+ const isPausedRef = useRef(false);
+ const pauseTimeRef = useRef(null);
+ const [restRotation, setRestingRotation] = useState(true);
+ const [currentPath, setCurrentPath] = useState<[number, number, number][]>([]);
+ const [progress, setProgress] = useState(0);
+ const { scene } = useThree();
let startTime: number;
- let pausedTime: number;
let fixedInterval: number;
+ let coveredDistance = progressRef.current;
+ let objectRotation = (agvDetail.point?.action?.pickUpPoint?.rotation || { x: 0, y: 0, z: 0 }) as { x: number; y: number; z: number };
+
useEffect(() => {
if (currentPhase === 'stationed-pickup' && path.length > 0) {
setCurrentPath(path);
+ objectRotation = agvDetail.point.action?.pickUpPoint?.rotation
} else if (currentPhase === 'pickup-drop' && path.length > 0) {
+ objectRotation = agvDetail.point.action?.unLoadPoint?.rotation
setCurrentPath(path);
} else if (currentPhase === 'drop-pickup' && path.length > 0) {
+ objectRotation = agvDetail.point.action?.pickUpPoint?.rotation
setCurrentPath(path);
}
}, [currentPhase, path]);
@@ -45,122 +52,42 @@ function VehicleAnimator({ path, handleCallBack, currentPhase, agvUuid, agvDetai
setProgress(0);
completedRef.current = false;
}, [currentPath]);
- // useEffect(() => {
- // console.log('isReset: ', isReset);
- // if (isReset) {
- // reset();
- // setCurrentPath([]);
- // setProgress(0);
- // completedRef.current = false;
- // decrementVehicleLoad(agvDetail.modelUuid, 0)
- // }
- // }, [isReset])
- // useFrame((_, delta) => {
- // const object = scene.getObjectByProperty('uuid', agvUuid);
- // if (!object || currentPath.length < 2) return;
- // if (isPaused) return;
-
- // let totalDistance = 0;
- // const distances = [];
-
- // for (let i = 0; i < currentPath.length - 1; i++) {
- // const start = new THREE.Vector3(...currentPath[i]);
- // const end = new THREE.Vector3(...currentPath[i + 1]);
- // const segmentDistance = start.distanceTo(end);
- // distances.push(segmentDistance);
- // totalDistance += segmentDistance;
- // }
-
- // let coveredDistance = progressRef.current;
- // let accumulatedDistance = 0;
- // let index = 0;
-
- // while (
- // index < distances.length &&
- // coveredDistance > accumulatedDistance + distances[index]
- // ) {
- // accumulatedDistance += distances[index];
- // index++;
- // }
-
- // if (index < distances.length) {
- // const start = new THREE.Vector3(...currentPath[index]);
- // const end = new THREE.Vector3(...currentPath[index + 1]);
- // const segmentDistance = distances[index];
-
- // const currentDirection = new THREE.Vector3().subVectors(end, start).normalize();
- // const targetAngle = Math.atan2(currentDirection.x, currentDirection.z);
- // const rotationSpeed = 2.0;
- // const currentAngle = object.rotation.y;
-
- // let angleDifference = targetAngle - currentAngle;
- // if (angleDifference > Math.PI) angleDifference -= 2 * Math.PI;
- // if (angleDifference < -Math.PI) angleDifference += 2 * Math.PI;
-
- // const maxRotationStep = rotationSpeed * delta;
- // object.rotation.y += Math.sign(angleDifference) * Math.min(Math.abs(angleDifference), maxRotationStep);
-
- // const isAligned = Math.abs(angleDifference) < 0.01;
-
- // if (isAligned) {
- // progressRef.current += delta * (speed * agvDetail.speed);
- // coveredDistance = progressRef.current;
-
- // const t = (coveredDistance - accumulatedDistance) / segmentDistance;
- // const position = start.clone().lerp(end, t);
- // object.position.copy(position);
- // }
- // }
-
- // if (progressRef.current >= totalDistance) {
- // if (restRotation) {
- // const targetQuaternion = new THREE.Quaternion().setFromEuler(new THREE.Euler(0, 0, 0));
- // object.quaternion.slerp(targetQuaternion, delta * 2);
- // const angleDiff = object.quaternion.angleTo(targetQuaternion);
- // if (angleDiff < 0.01) {
- // let objectRotation = agvDetail.point.rotation
- // object.rotation.set(objectRotation[0], objectRotation[1], objectRotation[2]);
- // setRestingRotation(false);
- // }
- // return;
- // }
- // }
-
- // if (progressRef.current >= totalDistance) {
- // setRestingRotation(true);
- // progressRef.current = 0;
- // movingForward.current = !movingForward.current;
- // setCurrentPath([]);
- // handleCallBack();
- // if (currentPhase === 'pickup-drop') {
- // requestAnimationFrame(firstFrame);
- // }
- // }
- // });
useEffect(() => {
- if (isReset) {
+ if (isReset || !isPlaying) {
reset();
setCurrentPath([]);
setProgress(0);
- progressRef.current = 0;
completedRef.current = false;
movingForward.current = true;
- setRestingRotation(false);
+ progressRef.current = 0;
+ startTime = 0;
+ coveredDistance = 0;
+ setReset(false);
+ setRestingRotation(true);
decrementVehicleLoad(agvDetail.modelUuid, 0);
+ const object = scene.getObjectByProperty('uuid', agvUuid);
+ console.log('currentPhase: ', currentPhase);
+ if (object) {
+ object.position.set(agvDetail.position[0], agvDetail.position[1], agvDetail.position[2]);
+ object.rotation.set(objectRotation.x, objectRotation.y, objectRotation.z);
+ }
}
- }, [isReset]);
+ }, [isReset, isPlaying])
+
+ useEffect(() => {
+ isPausedRef.current = isPaused;
+ }, [isPaused]);
useFrame((_, delta) => {
- // If reset is active, don't run anything in frame
- if (isReset) return;
-
const object = scene.getObjectByProperty('uuid', agvUuid);
if (!object || currentPath.length < 2) return;
if (isPaused) return;
let totalDistance = 0;
const distances = [];
+ let accumulatedDistance = 0;
+ let index = 0;
for (let i = 0; i < currentPath.length - 1; i++) {
const start = new THREE.Vector3(...currentPath[i]);
@@ -170,10 +97,6 @@ function VehicleAnimator({ path, handleCallBack, currentPhase, agvUuid, agvDetai
totalDistance += segmentDistance;
}
- let coveredDistance = progressRef.current;
- let accumulatedDistance = 0;
- let index = 0;
-
while (index < distances.length && coveredDistance > accumulatedDistance + distances[index]) {
accumulatedDistance += distances[index];
index++;
@@ -186,17 +109,16 @@ function VehicleAnimator({ path, handleCallBack, currentPhase, agvUuid, agvDetai
const currentDirection = new THREE.Vector3().subVectors(end, start).normalize();
const targetAngle = Math.atan2(currentDirection.x, currentDirection.z);
+
+ const rotationSpeed = speed;
const currentAngle = object.rotation.y;
let angleDifference = targetAngle - currentAngle;
if (angleDifference > Math.PI) angleDifference -= 2 * Math.PI;
if (angleDifference < -Math.PI) angleDifference += 2 * Math.PI;
- const rotationSpeed = 2.0;
const maxRotationStep = rotationSpeed * delta;
- const rotationStep = Math.sign(angleDifference) * Math.min(Math.abs(angleDifference), maxRotationStep);
- object.rotation.y += rotationStep;
-
+ object.rotation.y += Math.sign(angleDifference) * Math.min(Math.abs(angleDifference), maxRotationStep);
const isAligned = Math.abs(angleDifference) < 0.01;
if (isAligned) {
@@ -211,43 +133,63 @@ function VehicleAnimator({ path, handleCallBack, currentPhase, agvUuid, agvDetai
if (progressRef.current >= totalDistance) {
if (restRotation) {
- const targetQuaternion = new THREE.Quaternion().setFromEuler(new THREE.Euler(0, 0, 0));
+ const targetQuaternion = new THREE.Quaternion().setFromEuler(new THREE.Euler(objectRotation.x, objectRotation.y, objectRotation.z));
object.quaternion.slerp(targetQuaternion, delta * 2);
const angleDiff = object.quaternion.angleTo(targetQuaternion);
if (angleDiff < 0.01) {
- const objectRotation = agvDetail.point.rotation;
- object.rotation.set(objectRotation[0], objectRotation[1], objectRotation[2]);
+ object.rotation.set(objectRotation.x, objectRotation.y, objectRotation.z);
setRestingRotation(false);
}
- } else {
- setRestingRotation(true);
- progressRef.current = 0;
- movingForward.current = !movingForward.current;
- setCurrentPath([]);
- handleCallBack();
- if (currentPhase === 'pickup-drop') {
- requestAnimationFrame(firstFrame);
- }
+ return;
+ }
+ }
+
+ if (progressRef.current >= totalDistance) {
+ setRestingRotation(true);
+ progressRef.current = 0;
+ movingForward.current = !movingForward.current;
+ setCurrentPath([]);
+ handleCallBack();
+ if (currentPhase === 'pickup-drop') {
+ requestAnimationFrame(firstFrame);
}
}
});
function firstFrame() {
- const unLoadDuration = agvDetail.point.action.unLoadDuration;
const droppedMaterial = agvDetail.currentLoad;
- fixedInterval = (unLoadDuration / droppedMaterial) * 1000;
startTime = performance.now();
step(droppedMaterial);
}
function step(droppedMaterial: number) {
- const elapsedTime = (performance.now() - startTime) * speed;
+ if (isPausedRef.current) {
+ if (!pauseTimeRef.current) {
+ pauseTimeRef.current = performance.now();
+ }
+ requestAnimationFrame(() => step(droppedMaterial));
+ return;
+ }
+
+ if (pauseTimeRef.current) {
+ const pauseDuration = performance.now() - pauseTimeRef.current;
+ startTime += pauseDuration;
+ pauseTimeRef.current = null;
+ }
+
+ const elapsedTime = performance.now() - startTime;
+ const unLoadDuration = agvDetail.point.action.unLoadDuration;
+ fixedInterval = ((unLoadDuration / agvDetail.currentLoad) * (1000 / speed));
+
if (elapsedTime >= fixedInterval) {
let droppedMat = droppedMaterial - 1;
decrementVehicleLoad(agvDetail.modelUuid, 1);
- if (droppedMat === 0) return;
- startTime = performance.now();
- requestAnimationFrame(() => step(droppedMat));
+ if (droppedMat > 0) {
+ startTime = performance.now();
+ requestAnimationFrame(() => step(droppedMat));
+ } else {
+ return;
+ }
} else {
requestAnimationFrame(() => step(droppedMaterial));
}
diff --git a/app/src/modules/simulation/vehicle/instances/instance/vehicleInstance.tsx b/app/src/modules/simulation/vehicle/instances/instance/vehicleInstance.tsx
index a7a41d3..6a81d3a 100644
--- a/app/src/modules/simulation/vehicle/instances/instance/vehicleInstance.tsx
+++ b/app/src/modules/simulation/vehicle/instances/instance/vehicleInstance.tsx
@@ -1,18 +1,18 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
import VehicleAnimator from '../animator/vehicleAnimator';
import * as THREE from 'three';
import { NavMeshQuery } from '@recast-navigation/core';
import { useNavMesh } from '../../../../../store/store';
-import { usePlayButtonStore, useResetButtonStore } from '../../../../../store/usePlayButtonStore';
+import { usePlayButtonStore } from '../../../../../store/usePlayButtonStore';
import { useVehicleStore } from '../../../../../store/simulation/useVehicleStore';
function VehicleInstance({ agvDetail }: any) {
const { navMesh } = useNavMesh();
- const { isPlaying, setIsPlaying } = usePlayButtonStore();
- const { isReset } = useResetButtonStore();
+ const { isPlaying } = usePlayButtonStore();
const { vehicles, setVehicleActive, setVehicleState, incrementVehicleLoad } = useVehicleStore();
const [currentPhase, setCurrentPhase] = useState('stationed');
const [path, setPath] = useState<[number, number, number][]>([]);
+ let isIncrememtable = useRef(true);
const computePath = useCallback(
(start: any, end: any) => {
@@ -20,7 +20,7 @@ function VehicleInstance({ agvDetail }: any) {
const navMeshQuery = new NavMeshQuery(navMesh);
const { path: segmentPath } = navMeshQuery.computePath(start, end);
return (
- segmentPath?.map(({ x, y, z }) => [x, y + 0.1, z] as [number, number, number]) || []
+ segmentPath?.map(({ x, y, z }) => [x, 0, z] as [number, number, number]) || []
);
} catch {
return [];
@@ -29,77 +29,92 @@ function VehicleInstance({ agvDetail }: any) {
[navMesh]
);
- function vehicleStatus(modelid: string, status: string) {
- // console.log(`AGV ${modelid}: ${status}`);
+ function vehicleStatus(modelId: string, status: string) {
+ // console.log(`${modelId} , ${status});
}
+
+ // Function to reset everything
function reset() {
+ setCurrentPhase('stationed');
setVehicleActive(agvDetail.modelUuid, false);
setVehicleState(agvDetail.modelUuid, 'idle');
setPath([]);
- setCurrentPhase('stationed')
+ }
+
+ const increment = () => {
+ if (isIncrememtable.current) {
+
+ incrementVehicleLoad(agvDetail.modelUuid, 2);
+ isIncrememtable.current = false;
+ }
}
useEffect(() => {
if (isPlaying) {
+
if (!agvDetail.isActive && agvDetail.state === 'idle' && currentPhase === 'stationed') {
const toPickupPath = computePath(
- new THREE.Vector3(agvDetail.position[0], agvDetail.position[1], agvDetail.position[2]),
- agvDetail.point.action.pickUpPoint
+ new THREE.Vector3(agvDetail?.position[0], agvDetail?.position[1], agvDetail?.position[2]),
+ agvDetail?.point?.action?.pickUpPoint?.position
);
setPath(toPickupPath);
- setVehicleActive(agvDetail.modelUuid, true);
- setVehicleState(agvDetail.modelUuid, 'running');
setCurrentPhase('stationed-pickup');
+ setVehicleState(agvDetail.modelUuid, 'running');
+ setVehicleActive(agvDetail.modelUuid, true);
vehicleStatus(agvDetail.modelUuid, 'Started from station, heading to pickup');
return;
} else if (!agvDetail.isActive && agvDetail.state === 'idle' && currentPhase === 'picking') {
setTimeout(() => {
- incrementVehicleLoad(agvDetail.modelUuid, 2);
+ increment();
}, 5000);
if (agvDetail.currentLoad === agvDetail.point.action.loadCapacity) {
const toDrop = computePath(
- agvDetail.point.action.pickUpPoint,
- agvDetail.point.action.unLoadPoint
+ agvDetail.point.action.pickUpPoint.position,
+ agvDetail.point.action.unLoadPoint.position
);
setPath(toDrop);
- setVehicleActive(agvDetail.modelUuid, true);
- setVehicleState(agvDetail.modelUuid, 'running');
setCurrentPhase('pickup-drop');
+ setVehicleState(agvDetail.modelUuid, 'running');
+ setVehicleActive(agvDetail.modelUuid, true);
vehicleStatus(agvDetail.modelUuid, 'Started from pickup point, heading to drop point');
}
} else if (!agvDetail.isActive && agvDetail.state === 'idle' && currentPhase === 'dropping' && agvDetail.currentLoad === 0) {
const dropToPickup = computePath(
- agvDetail.point.action.unLoadPoint,
- agvDetail.point.action.pickUpPoint
+ agvDetail.point.action.unLoadPoint.position,
+ agvDetail.point.action.pickUpPoint.position
);
setPath(dropToPickup);
- setVehicleActive(agvDetail.modelUuid, true);
- setVehicleState(agvDetail.modelUuid, 'running');
setCurrentPhase('drop-pickup');
+ setVehicleState(agvDetail.modelUuid, 'running');
+ setVehicleActive(agvDetail.modelUuid, true);
vehicleStatus(agvDetail.modelUuid, 'Started from dropping point, heading to pickup point');
+
+ isIncrememtable.current = true;
}
+ } else {
+ reset()
}
- }, [vehicles, currentPhase, path, isPlaying, isReset]);
+ }, [vehicles, currentPhase, path, isPlaying]);
function handleCallBack() {
if (currentPhase === 'stationed-pickup') {
- setVehicleActive(agvDetail.modelUuid, false);
- setVehicleState(agvDetail.modelUuid, 'idle');
setCurrentPhase('picking');
+ setVehicleState(agvDetail.modelUuid, 'idle');
+ setVehicleActive(agvDetail.modelUuid, false);
vehicleStatus(agvDetail.modelUuid, 'Reached pickup point, waiting for material');
setPath([]);
} else if (currentPhase === 'pickup-drop') {
- setVehicleActive(agvDetail.modelUuid, false);
- setVehicleState(agvDetail.modelUuid, 'idle');
setCurrentPhase('dropping');
+ setVehicleState(agvDetail.modelUuid, 'idle');
+ setVehicleActive(agvDetail.modelUuid, false);
vehicleStatus(agvDetail.modelUuid, 'Reached drop point');
setPath([]);
} else if (currentPhase === 'drop-pickup') {
- setVehicleActive(agvDetail.modelUuid, false);
- setVehicleState(agvDetail.modelUuid, 'idle');
setCurrentPhase('picking');
+ setVehicleState(agvDetail.modelUuid, 'idle');
+ setVehicleActive(agvDetail.modelUuid, false);
setPath([]);
vehicleStatus(agvDetail.modelUuid, 'Reached pickup point again, cycle complete');
}
diff --git a/app/src/modules/simulation/vehicle/instances/vehicleInstances.tsx b/app/src/modules/simulation/vehicle/instances/vehicleInstances.tsx
index 2a0070b..91111cf 100644
--- a/app/src/modules/simulation/vehicle/instances/vehicleInstances.tsx
+++ b/app/src/modules/simulation/vehicle/instances/vehicleInstances.tsx
@@ -3,12 +3,16 @@ import VehicleInstance from './instance/vehicleInstance'
import { useVehicleStore } from '../../../../store/simulation/useVehicleStore'
function VehicleInstances() {
+
const { vehicles } = useVehicleStore();
+
return (
<>
{vehicles.map((val: any, i: any) =>
+
+
)}
diff --git a/app/src/modules/simulation/vehicle/vehicles.tsx b/app/src/modules/simulation/vehicle/vehicles.tsx
index eaf12a3..7badec5 100644
--- a/app/src/modules/simulation/vehicle/vehicles.tsx
+++ b/app/src/modules/simulation/vehicle/vehicles.tsx
@@ -1,15 +1,21 @@
-import React, { useEffect } from 'react'
-import VehicleInstances from './instances/vehicleInstances';
-import { useVehicleStore } from '../../../store/simulation/useVehicleStore';
-import { useFloorItems } from '../../../store/store';
-
+import React, { useEffect, useState } from "react";
+import VehicleInstances from "./instances/vehicleInstances";
+import { useVehicleStore } from "../../../store/simulation/useVehicleStore";
+import { useFloorItems } from "../../../store/store";
+import { useSelectedEventData, useSelectedEventSphere } from "../../../store/simulation/useSimulationStore";
+import VehicleUI from "../ui/vehicle/vehicleUI";
+import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
function Vehicles() {
const { vehicles, addVehicle } = useVehicleStore();
-
+ const { selectedEventSphere } = useSelectedEventSphere();
+ const { selectedEventData } = useSelectedEventData();
const { floorItems } = useFloorItems();
+ const { isPlaying } = usePlayButtonStore();
- const vehicleStatusSample: VehicleEventSchema[] = [
+ const [vehicleStatusSample, setVehicleStatusSample] = useState<
+ VehicleEventSchema[]
+ >([
{
modelUuid: "9356f710-4727-4b50-bdb2-9c1e747ecc74",
modelName: "AGV",
@@ -28,6 +34,7 @@ function Vehicles() {
actionType: "travel",
unLoadDuration: 10,
loadCapacity: 2,
+ steeringAngle:0,
pickUpPoint: { position: { x: 98.71483985219794, y: 0, z: 28.66321267938962 }, rotation: { x: 0, y: 0, z: 0 } },
unLoadPoint: { position: { x: 105.71483985219794, y: 0, z: 28.66321267938962 }, rotation: { x: 0, y: 0, z: 0 } },
triggers: [
@@ -71,8 +78,9 @@ function Vehicles() {
actionType: "travel",
unLoadDuration: 10,
loadCapacity: 2,
- pickUpPoint: { position: { x: 90, y: 0, z: 28 }, rotation: { x: 0, y: 0, z: 0 } },
- unLoadPoint: { position: { x: 20, y: 0, z: 10 }, rotation: { x: 0, y: 0, z: 0 } },
+ steeringAngle:0,
+ pickUpPoint: null,
+ unLoadPoint: null,
triggers: [
{
triggerUuid: "trig-001",
@@ -96,68 +104,117 @@ function Vehicles() {
}
}
},
- {
- modelUuid: "e729a4f1-11d2-4778-8d6a-468f1b4f6b79",
- modelName: "forklift",
- position: [98.85729337188162, 0, 38.36616546567653],
- rotation: [0, 0, 0],
- state: "idle",
- type: "vehicle",
- speed: 2.5,
- point: {
- uuid: "point-789",
- position: [0, 1, 0],
- rotation: [0, 0, 0],
- action: {
- actionUuid: "action-456",
- actionName: "Deliver to Zone A",
- actionType: "travel",
- unLoadDuration: 15,
- loadCapacity: 5,
- pickUpPoint: { position: { x: 98.71483985219794, y: 0, z: 28.66321267938962 }, rotation: { x: 0, y: 0, z: 0 } },
- unLoadPoint: { position: { x: 20, y: 0, z: 10 }, rotation: { x: 0, y: 0, z: 0 } },
- triggers: [
- {
- triggerUuid: "trig-001",
- triggerName: "Start Travel",
- triggerType: "onStart",
- delay: 0,
- triggeredAsset: {
- triggeredModel: { modelName: "ArmBot-X", modelUuid: "arm-001" },
- triggeredPoint: { pointName: "Pickup Arm Point", pointUuid: "arm-point-01" },
- triggeredAction: { actionName: "Grab Widget", actionUuid: "grab-001" }
- }
- },
- {
- triggerUuid: "trig-002",
- triggerName: "Complete Travel",
- triggerType: "onComplete",
- delay: 2,
- triggeredAsset: null
- }
- ]
- }
- }
- }
- ];
-
-
- useEffect(() => {
- addVehicle('123', vehicleStatusSample[0]);
- // addVehicle('123', vehicleStatusSample[1]);
- // addVehicle('123', vehicleStatusSample[2]);
- }, [])
-
+ // {
+ // modelUuid: "cd7d0584-0684-42b4-b051-9e882c1914aa",
+ // modelName: "AGV",
+ // position: [105.90938758014703, 0, 31.584209911095215],
+ // rotation: [0, 0, 0],
+ // state: "idle",
+ // type: "vehicle",
+ // speed: 2.5,
+ // point: {
+ // uuid: "point-789",
+ // position: [0, 1, 0],
+ // rotation: [0, 0, 0],
+ // action: {
+ // actionUuid: "action-456",
+ // actionName: "Deliver to Zone A",
+ // actionType: "travel",
+ // unLoadDuration: 10,
+ // loadCapacity: 2,
+ // steeringAngle:0,
+ // pickUpPoint: null,
+ // unLoadPoint: null,
+ // triggers: [
+ // {
+ // triggerUuid: "trig-001",
+ // triggerName: "Start Travel",
+ // triggerType: "onStart",
+ // delay: 0,
+ // triggeredAsset: {
+ // triggeredModel: { modelName: "ArmBot-X", modelUuid: "arm-001" },
+ // triggeredPoint: { pointName: "Pickup Arm Point", pointUuid: "arm-point-01" },
+ // triggeredAction: { actionName: "Grab Widget", actionUuid: "grab-001" }
+ // }
+ // },
+ // {
+ // triggerUuid: "trig-002",
+ // triggerName: "Complete Travel",
+ // triggerType: "onComplete",
+ // delay: 2,
+ // triggeredAsset: null
+ // }
+ // ]
+ // }
+ // }
+ // },
+ // {
+ // modelUuid: "e729a4f1-11d2-4778-8d6a-468f1b4f6b79",
+ // modelName: "forklift",
+ // position: [98.85729337188162, 0, 38.36616546567653],
+ // rotation: [0, 0, 0],
+ // state: "idle",
+ // type: "vehicle",
+ // speed: 2.5,
+ // point: {
+ // uuid: "point-789",
+ // position: [0, 1, 0],
+ // rotation: [0, 0, 0],
+ // action: {
+ // actionUuid: "action-456",
+ // actionName: "Deliver to Zone A",
+ // actionType: "travel",
+ // unLoadDuration: 15,
+ // loadCapacity: 5,
+ // steeringAngle:0,
+ // pickUpPoint: null,
+ // unLoadPoint: null,
+ // triggers: [
+ // {
+ // triggerUuid: "trig-001",
+ // triggerName: "Start Travel",
+ // triggerType: "onStart",
+ // delay: 0,
+ // triggeredAsset: {
+ // triggeredModel: { modelName: "ArmBot-X", modelUuid: "arm-001" },
+ // triggeredPoint: { pointName: "Pickup Arm Point", pointUuid: "arm-point-01" },
+ // triggeredAction: { actionName: "Grab Widget", actionUuid: "grab-001" }
+ // }
+ // },
+ // {
+ // triggerUuid: "trig-002",
+ // triggerName: "Complete Travel",
+ // triggerType: "onComplete",
+ // delay: 2,
+ // triggeredAsset: null
+ // }
+ // ]
+ // }
+ // }
+ // }
+ ]);
useEffect(() => {
// console.log('vehicles: ', vehicles);
}, [vehicles])
+ useEffect(() => {
+ addVehicle("123", vehicleStatusSample[0]);
+ addVehicle('123', vehicleStatusSample[1]);
+ // addVehicle('123', vehicleStatusSample[2]);
+ }, []);
+
return (
<>
+ {selectedEventSphere && selectedEventData?.data.type === "vehicle" && !isPlaying &&
+ < VehicleUI />
+ }
- )
+ );
}
-export default Vehicles;
\ No newline at end of file
+export default Vehicles;
+
+
+
diff --git a/app/src/modules/visualization/RealTimeVisulization.tsx b/app/src/modules/visualization/RealTimeVisulization.tsx
index 05f7371..caf37a1 100644
--- a/app/src/modules/visualization/RealTimeVisulization.tsx
+++ b/app/src/modules/visualization/RealTimeVisulization.tsx
@@ -11,10 +11,7 @@ import {
useDroppedObjectsStore,
useFloatingWidget,
} from "../../store/visualization/useDroppedObjectsStore";
-import {
- useSocketStore,
- useWidgetSubOption,
-} from "../../store/store";
+import { useSocketStore, useWidgetSubOption } from "../../store/store";
import { getZone2dData } from "../../services/visulization/zone/getZoneData";
import { generateUniqueId } from "../../functions/generateUniqueId";
import { determinePosition } from "./functions/determinePosition";
@@ -69,13 +66,17 @@ const RealTimeVisulization: React.FC = () => {
const { selectedZone, setSelectedZone } = useSelectedZoneStore();
const { setRightSelect } = useRightSelected();
- const { editWidgetOptions, setEditWidgetOptions } = useEditWidgetOptionsStore();
+ const { editWidgetOptions, setEditWidgetOptions } =
+ useEditWidgetOptionsStore();
const { rightClickSelected, setRightClickSelected } = useRightClickSelected();
const [openConfirmationPopup, setOpenConfirmationPopup] = useState(false);
const { setFloatingWidget } = useFloatingWidget();
const { widgetSubOption } = useWidgetSubOption();
const { visualizationSocket } = useSocketStore();
const { setSelectedChartId } = useWidgetStore();
+ const [waitingPanels, setWaitingPanels] = useState(null);
+
+ console.log("waitingPanels: ", waitingPanels);
OuterClick({
contextClassName: [
@@ -377,6 +378,8 @@ const RealTimeVisulization: React.FC = () => {
setHiddenPanels={setHiddenPanels}
selectedZone={selectedZone}
setSelectedZone={setSelectedZone}
+ waitingPanels={waitingPanels}
+ setWaitingPanels={setWaitingPanels}
/>
)}
@@ -385,6 +388,7 @@ const RealTimeVisulization: React.FC = () => {
setSelectedZone={setSelectedZone}
hiddenPanels={hiddenPanels}
setZonesData={setZonesData}
+ waitingPanels={waitingPanels}
/>
)}
diff --git a/app/src/modules/visualization/widgets/panel/AddButtons.tsx b/app/src/modules/visualization/widgets/panel/AddButtons.tsx
index 4877824..6968c2e 100644
--- a/app/src/modules/visualization/widgets/panel/AddButtons.tsx
+++ b/app/src/modules/visualization/widgets/panel/AddButtons.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
import {
CleanPannel,
EyeIcon,
@@ -6,8 +6,6 @@ import {
} from "../../../../components/icons/RealTimeVisulationIcons";
import { AddIcon } from "../../../../components/icons/ExportCommonIcons";
import { useSocketStore } from "../../../../store/store";
-import { clearPanel } from "../../../../services/visulization/zone/clearPanel";
-import { lockPanel } from "../../../../services/visulization/zone/lockPanel";
// Define the type for `Side`
type Side = "top" | "bottom" | "left" | "right";
@@ -57,6 +55,8 @@ interface ButtonsProps {
>;
hiddenPanels: HiddenPanels; // Updated prop type
setHiddenPanels: React.Dispatch>; // Updated prop type
+ waitingPanels: any;
+ setWaitingPanels: any;
}
const AddButtons: React.FC = ({
@@ -64,6 +64,8 @@ const AddButtons: React.FC = ({
setSelectedZone,
setHiddenPanels,
hiddenPanels,
+ waitingPanels,
+ setWaitingPanels,
}) => {
const { visualizationSocket } = useSocketStore();
@@ -174,65 +176,62 @@ const AddButtons: React.FC = ({
// Function to handle "+" button click
const handlePlusButtonClick = async (side: Side) => {
+ const zoneId = selectedZone.zoneId;
+
if (selectedZone.activeSides.includes(side)) {
- console.log("open");
- // Panel already exists: Remove widgets from that side and update activeSides
- const email = localStorage.getItem("email") || "";
- const organization = email?.split("@")[1]?.split(".")[0]; // Fallback value
+ // Already active: Schedule removal
- // Remove all widgets associated with the side and update active sides
- const cleanedWidgets = selectedZone.widgets.filter(
- (widget) => widget.panel !== side
- );
- const newActiveSides = selectedZone.activeSides.filter((s) => s !== side);
+ setWaitingPanels(side); // Mark as waiting
- const updatedZone = {
- ...selectedZone,
- widgets: cleanedWidgets,
- activeSides: newActiveSides,
- panelOrder: newActiveSides,
- };
+ setTimeout(() => {
+ console.log("Removing after wait...");
- let deletePanel = {
- organization: organization,
- panelName: side,
- zoneId: selectedZone.zoneId,
- };
- if (visualizationSocket) {
- visualizationSocket.emit("v2:viz-panel:delete", deletePanel);
- }
- setSelectedZone(updatedZone);
-
- if (hiddenPanels[selectedZone.zoneId]?.includes(side)) {
- setHiddenPanels((prev) => ({
- ...prev,
- [selectedZone.zoneId]: prev[selectedZone.zoneId].filter(
- (s) => s !== side
- ),
- }));
- }
-
- // if(hiddenPanels[selectedZone.zoneId].includes(side))
-
- // API call to delete the panel
- // try {
- // const response = await deletePanelApi(selectedZone.zoneId, side, organization);
- //
- // if (response.message === "Panel deleted successfully") {
- // } else {
- //
- // }
- // } catch (error) {
- //
- // }
- } else {
- // Panel does not exist: Create panel
- try {
- // Get email and organization safely with a default fallback
const email = localStorage.getItem("email") || "";
- const organization = email?.split("@")[1]?.split(".")[0];
+ const organization = email?.split("@")[1]?.split(".")[0] || "";
+
+ // Remove widgets for that side
+ const cleanedWidgets = selectedZone.widgets.filter(
+ (widget) => widget.panel !== side
+ );
+ const newActiveSides = selectedZone.activeSides.filter(
+ (s) => s !== side
+ );
+
+ const updatedZone = {
+ ...selectedZone,
+ widgets: cleanedWidgets,
+ activeSides: newActiveSides,
+ panelOrder: newActiveSides,
+ };
+
+ const deletePanel = {
+ organization,
+ panelName: side,
+ zoneId,
+ };
+
+ if (visualizationSocket) {
+ visualizationSocket.emit("v2:viz-panel:delete", deletePanel);
+ }
+
+ setSelectedZone(updatedZone);
+
+ if (hiddenPanels[zoneId]?.includes(side)) {
+ setHiddenPanels((prev) => ({
+ ...prev,
+ [zoneId]: prev[zoneId].filter((s) => s !== side),
+ }));
+ }
+
+ // Remove from waiting state
+ setWaitingPanels(null);
+ }, 500); // Wait for 2 seconds
+ } else {
+ // Panel does not exist: Add it
+ try {
+ const email = localStorage.getItem("email") || "";
+ const organization = email?.split("@")[1]?.split(".")[0] || "";
- // Prevent duplicate side entries
const newActiveSides = selectedZone.activeSides.includes(side)
? [...selectedZone.activeSides]
: [...selectedZone.activeSides, side];
@@ -242,32 +241,31 @@ const AddButtons: React.FC = ({
activeSides: newActiveSides,
panelOrder: newActiveSides,
};
- let addPanel = {
- organization: organization,
- zoneId: selectedZone.zoneId,
+
+ const addPanel = {
+ organization,
+ zoneId,
panelOrder: newActiveSides,
};
+
if (visualizationSocket) {
visualizationSocket.emit("v2:viz-panel:add", addPanel);
}
- setSelectedZone(updatedZone);
- // API call to create panels
- // const response = await panelData(organization, selectedZone.zoneId, newActiveSides);
- //
- // if (response.message === "Panels created successfully") {
- // } else {
- //
- // }
- } catch (error) {}
+ setSelectedZone(updatedZone);
+ } catch (error) {
+ console.error("Error adding panel:", error);
+ }
}
};
+
return (
<>
{(["top", "right", "bottom", "left"] as Side[]).map((side) => (
{/* "+" Button */}
+