-
00:00
-
24:00
-
-
- {process.map((item, index) => (
-
-
+
+
+
+
+
- ))}
+
+
23 April ,25
+
04:41 PM
+
+
+
+
+ {intervals.map((label, index) => {
+ const segmentProgress = (index / totalSegments) * 100;
+ const isFilled = progress >= segmentProgress;
+ return (
+
+
+ {index < intervals.length - 1 && (
+ = ((index + 1) / totalSegments) * 100
+ ? "filled"
+ : ""
+ }`}
+ >
+ )}
+
+ );
+ })}
+
+
+
+
+
+
+
+
+
0.5X
+
+
+
+
+
+
+
+
+
+
+
+
+
+
4x
+
+ {subModule === "analysis" && (
+
+
00:00
+
24:00
+
+
+ {process.map((item, index) => (
+
+ ))}
+
+
+
+ )}
-
+
+
);
};
diff --git a/app/src/modules/builder/IntialLoad/loadInitialFloorItems.ts b/app/src/modules/builder/IntialLoad/loadInitialFloorItems.ts
index a351d73..eab6e3e 100644
--- a/app/src/modules/builder/IntialLoad/loadInitialFloorItems.ts
+++ b/app/src/modules/builder/IntialLoad/loadInitialFloorItems.ts
@@ -8,7 +8,6 @@ import * as Types from "../../../types/world/worldTypes";
import { initializeDB, retrieveGLTF, storeGLTF } from '../../../utils/indexDB/idbUtils';
import { getCamera } from '../../../services/factoryBuilder/camera/getCameraApi';
import { getFloorAssets } from '../../../services/factoryBuilder/assest/floorAsset/getFloorItemsApi';
-import PointsCalculator from '../../simulation/events/points/functions/pointsCalculator';
async function loadInitialFloorItems(
itemsGroup: Types.RefGroup,
@@ -72,7 +71,7 @@ async function loadInitialFloorItems(
// Check Three.js Cache
const cachedModel = THREE.Cache.get(item.modelfileID!);
if (cachedModel) {
- // console.log(`[Cache] Fetching ${item.modelName}`);
+ //
processLoadedModel(cachedModel.scene.clone(), item, itemsGroup, setFloorItems, addEvent);
modelsLoaded++;
checkLoadingCompletion(modelsLoaded, modelsToLoad, dracoLoader, resolve);
@@ -82,7 +81,7 @@ async function loadInitialFloorItems(
// Check IndexedDB
const indexedDBModel = await retrieveGLTF(item.modelfileID!);
if (indexedDBModel) {
- // console.log(`[IndexedDB] Fetching ${item.modelName}`);
+ //
const blobUrl = URL.createObjectURL(indexedDBModel);
loader.load(blobUrl, (gltf) => {
URL.revokeObjectURL(blobUrl);
@@ -103,7 +102,7 @@ async function loadInitialFloorItems(
}
// Fetch from Backend
- // console.log(`[Backend] Fetching ${item.modelName}`);
+ //
const modelUrl = `${url_Backend_dwinzo}/api/v2/AssetFile/${item.modelfileID!}`;
loader.load(modelUrl, async (gltf) => {
const modelBlob = await fetch(modelUrl).then((res) => res.blob());
@@ -121,7 +120,7 @@ async function loadInitialFloorItems(
);
});
} else {
- // console.log(`Item ${item.modelName} is not near`);
+ //
setFloorItems((prevItems) => [
...(prevItems || []),
{
@@ -187,7 +186,7 @@ function processLoadedModel(
},
]);
- if (item.eventData.type === "vehicle") {
+ if (item.eventData.type === "Vehicle") {
const vehicleEvent: VehicleEventSchema = {
modelUuid: item.modelUuid,
modelName: item.modelName,
@@ -202,11 +201,11 @@ function processLoadedModel(
rotation: [item.eventData.point?.rotation[0] || 0, item.eventData.point?.rotation[1] || 0, item.eventData.point?.rotation[2] || 0],
action: {
actionUuid: THREE.MathUtils.generateUUID(),
- actionName: "Vehicle Action",
+ actionName: "Action 1",
actionType: "travel",
unLoadDuration: 5,
loadCapacity: 10,
- steeringAngle:0,
+ steeringAngle: 0,
pickUpPoint: null,
unLoadPoint: null,
triggers: []
@@ -254,7 +253,7 @@ function processLoadedModel(
rotation: [item.eventData.point?.rotation[0] || 0, item.eventData.point?.rotation[1] || 0, item.eventData.point?.rotation[2] || 0],
action: {
actionUuid: THREE.MathUtils.generateUUID(),
- actionName: "Process Action",
+ actionName: "Action 1",
actionType: "process",
processTime: 10,
swapMaterial: "material-id",
@@ -279,11 +278,11 @@ function processLoadedModel(
actions: [
{
actionUuid: THREE.MathUtils.generateUUID(),
- actionName: "Pick and Place",
+ actionName: "Action 1",
actionType: "pickAndPlace",
process: {
- startPoint: [0, 0, 0],
- endPoint: [0, 0, 0]
+ startPoint: null,
+ endPoint: null
},
triggers: []
}
diff --git a/app/src/modules/builder/geomentries/assets/addAssetModel.ts b/app/src/modules/builder/geomentries/assets/addAssetModel.ts
index c718ec3..6e978dc 100644
--- a/app/src/modules/builder/geomentries/assets/addAssetModel.ts
+++ b/app/src/modules/builder/geomentries/assets/addAssetModel.ts
@@ -186,22 +186,59 @@ async function handleModelLoad(
state: "idle",
type: 'transfer',
speed: 1,
- points: data.points.map((point: THREE.Vector3, index: number) => ({
- uuid: THREE.MathUtils.generateUUID(),
- position: [point.x, point.y, point.z],
- rotation: [0, 0, 0],
- action: {
- actionUuid: THREE.MathUtils.generateUUID(),
- actionName: `Action ${index}`,
- actionType: 'default',
- material: 'Default Material',
- delay: 0,
- spawnInterval: 5,
- spawnCount: 1,
- triggers: []
+ points: data.points.map((point: THREE.Vector3, index: number) => {
+ const triggers: TriggerSchema[] = [];
+
+ if (data.points && index < data.points.length - 1) {
+ triggers.push({
+ triggerUuid: THREE.MathUtils.generateUUID(),
+ triggerName: `Trigger 1`,
+ triggerType: "onComplete",
+ delay: 0,
+ triggeredAsset: {
+ triggeredModel: {
+ modelName: newFloorItem.modelName,
+ modelUuid: newFloorItem.modelUuid
+ },
+ triggeredPoint: {
+ pointName: `Point`,
+ pointUuid: ""
+ },
+ triggeredAction: {
+ actionName: `Action 1`,
+ actionUuid: ""
+ }
+ }
+ });
}
- }))
+
+ return {
+ uuid: THREE.MathUtils.generateUUID(),
+ position: [point.x, point.y, point.z],
+ rotation: [0, 0, 0],
+ action: {
+ actionUuid: THREE.MathUtils.generateUUID(),
+ actionName: `Action 1`,
+ actionType: 'default',
+ material: 'Default Material',
+ delay: 0,
+ spawnInterval: 5,
+ spawnCount: 1,
+ triggers: triggers
+ }
+ };
+ })
};
+
+ for (let i = 0; i < ConveyorEvent.points.length - 1; i++) {
+ const currentPoint = ConveyorEvent.points[i];
+ const nextPoint = ConveyorEvent.points[i + 1];
+
+ if (currentPoint.action.triggers.length > 0) {
+ currentPoint.action.triggers[0].triggeredAsset!.triggeredPoint!.pointUuid = nextPoint.uuid;
+ currentPoint.action.triggers[0].triggeredAsset!.triggeredAction!.actionUuid = nextPoint.action.actionUuid;
+ }
+ }
addEvent(ConveyorEvent);
eventData.points = ConveyorEvent.points.map(point => ({
uuid: point.uuid,
@@ -228,7 +265,7 @@ async function handleModelLoad(
actionType: "travel",
unLoadDuration: 5,
loadCapacity: 10,
- steeringAngle:0,
+ steeringAngle: 0,
pickUpPoint: null,
unLoadPoint: null,
triggers: []
diff --git a/app/src/modules/builder/geomentries/assets/assetManager.ts b/app/src/modules/builder/geomentries/assets/assetManager.ts
index 5f7798e..889d905 100644
--- a/app/src/modules/builder/geomentries/assets/assetManager.ts
+++ b/app/src/modules/builder/geomentries/assets/assetManager.ts
@@ -18,7 +18,7 @@ export default async function assetManager(
const taskId = ++currentTaskId; // Increment taskId for each call
activePromises.set(taskId, true); // Mark task as active
- // console.log("Received message from worker:", data);
+ //
if (data.toRemove.length > 0) {
data.toRemove.forEach((uuid: string) => {
@@ -58,7 +58,7 @@ export default async function assetManager(
// Check Three.js Cache
const cachedModel = THREE.Cache.get(item.modelfileID!);
if (cachedModel) {
- // console.log(`[Cache] Fetching ${item.modelName}`);
+ //
processLoadedModel(cachedModel.scene.clone(), item, itemsGroup, resolve);
return;
}
@@ -66,7 +66,7 @@ export default async function assetManager(
// Check IndexedDB
const indexedDBModel = await retrieveGLTF(item.modelfileID!);
if (indexedDBModel) {
- // console.log(`[IndexedDB] Fetching ${item.modelName}`);
+ //
const blobUrl = URL.createObjectURL(indexedDBModel);
loader.load(
blobUrl,
@@ -86,7 +86,7 @@ export default async function assetManager(
}
// Fetch from Backend
- // console.log(`[Backend] Fetching ${item.modelName}`);
+ //
loader.load(
modelUrl,
async (gltf) => {
@@ -114,14 +114,14 @@ export default async function assetManager(
const existingModel = itemsGroup?.current?.getObjectByProperty("uuid", item.modelUuid);
if (existingModel) {
- // console.log(`Model ${item.modelName} already exists in the scene.`);
+ //
resolve();
return;
}
const model = gltf;
model.uuid = item.modelUuid;
- model.userData = { name: item.modelName, modelId: item.modelfileID, modelUuid: item.modelUuid };
+ model.userData = { name: item.modelName, modelId: item.modelfileID, modelUuid: item.modelUuid, eventData: item.eventData };
model.scale.set(...CONSTANTS.assetConfig.defaultScaleBeforeGsap);
model.position.set(...item.position);
model.rotation.set(item.rotation.x, item.rotation.y, item.rotation.z);
diff --git a/app/src/modules/scene/controls/selectionControls/moveControls.tsx b/app/src/modules/scene/controls/selectionControls/moveControls.tsx
index d371806..5b33c14 100644
--- a/app/src/modules/scene/controls/selectionControls/moveControls.tsx
+++ b/app/src/modules/scene/controls/selectionControls/moveControls.tsx
@@ -1,7 +1,7 @@
import * as THREE from "three";
-import { useEffect, useMemo, useRef } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
import { useFrame, useThree } from "@react-three/fiber";
-import { useFloorItems, useSelectedAssets, useSocketStore, useToggleView } from "../../../../store/store";
+import { useFloorItems, useSelectedAssets, useSocketStore, useStartSimulation, useToggleView } from "../../../../store/store";
// import { setFloorItemApi } from '../../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi';
import { toast } from "react-toastify";
import * as Types from "../../../../types/world/worldTypes";
@@ -9,6 +9,8 @@ import { detectModifierKeys } from "../../../../utils/shortcutkeys/detectModifie
import { useEventsStore } from "../../../../store/simulation/useEventsStore";
import { useProductStore } from "../../../../store/simulation/useProductStore";
import { useSelectedProduct } from "../../../../store/simulation/useSimulationStore";
+import { upsertProductOrEventApi } from "../../../../services/simulation/UpsertProductOrEventApi";
+import { snapControls } from "../../../../utils/handleSnap";
function MoveControls({ movedObjects, setMovedObjects, itemsGroupRef, copiedObjects, setCopiedObjects, pastedObjects, setpastedObjects, duplicatedObjects, setDuplicatedObjects, selectionGroup, rotatedObjects, setRotatedObjects, boundingBoxRef }: any) {
const { camera, controls, gl, scene, pointer, raycaster } = useThree();
@@ -16,9 +18,28 @@ function MoveControls({ movedObjects, setMovedObjects, itemsGroupRef, copiedObje
const { toggleView } = useToggleView();
const { selectedAssets, setSelectedAssets } = useSelectedAssets();
+ const { selectedProduct } = useSelectedProduct();
const { floorItems, setFloorItems } = useFloorItems();
const { socket } = useSocketStore();
const itemsData = useRef
([]);
+ const [keyEvent, setKeyEvent] = useState<"Ctrl" | "Shift" | "Ctrl+Shift" | "">("")
+
+ const email = localStorage.getItem('email')
+ const organization = (email!.split("@")[1]).split(".")[0];
+
+ const updateBackend = (
+ productName: string,
+ productId: string,
+ organization: string,
+ eventData: EventsSchema
+ ) => {
+ upsertProductOrEventApi({
+ productName: productName,
+ productId: productId,
+ organization: organization,
+ eventDatas: eventData
+ })
+ }
useEffect(() => {
if (!camera || !scene || toggleView || !itemsGroupRef.current) return;
@@ -35,6 +56,15 @@ function MoveControls({ movedObjects, setMovedObjects, itemsGroupRef, copiedObje
const onPointerMove = () => {
isMoving = true;
};
+ const onKeyUp = (event: KeyboardEvent) => {
+ // When any modifier is released, reset snap
+ const isModifierKey =
+ event.key === "Control" || event.key === "Shift";
+
+ if (isModifierKey) {
+ setKeyEvent("");
+ }
+ };
const onPointerUp = (event: PointerEvent) => {
if (!isMoving && movedObjects.length > 0 && event.button === 0) {
@@ -56,18 +86,28 @@ function MoveControls({ movedObjects, setMovedObjects, itemsGroupRef, copiedObje
setMovedObjects([]);
itemsData.current = [];
}
+ setKeyEvent("")
};
const onKeyDown = (event: KeyboardEvent) => {
const keyCombination = detectModifierKeys(event);
if (pastedObjects.length > 0 || duplicatedObjects.length > 0 || rotatedObjects.length > 0) return;
+
+ if (keyCombination === "Ctrl" || keyCombination === "Ctrl+Shift" || keyCombination === "Shift") {
+ // update state here
+ setKeyEvent(keyCombination)
+ } else {
+ setKeyEvent("")
+ }
+
if (keyCombination === "G") {
if (selectedAssets.length > 0) {
moveAssets();
itemsData.current = floorItems.filter((item: { modelUuid: string }) => selectedAssets.some((asset: any) => asset.uuid === item.modelUuid));
}
}
+
if (keyCombination === "ESCAPE") {
event.preventDefault();
@@ -90,6 +130,7 @@ function MoveControls({ movedObjects, setMovedObjects, itemsGroupRef, copiedObje
canvasElement.addEventListener("pointermove", onPointerMove);
canvasElement.addEventListener("pointerup", onPointerUp);
canvasElement.addEventListener("keydown", onKeyDown);
+ canvasElement?.addEventListener("keyup", onKeyUp);
}
return () => {
@@ -97,12 +138,11 @@ function MoveControls({ movedObjects, setMovedObjects, itemsGroupRef, copiedObje
canvasElement.removeEventListener("pointermove", onPointerMove);
canvasElement.removeEventListener("pointerup", onPointerUp);
canvasElement.removeEventListener("keydown", onKeyDown);
+ canvasElement?.removeEventListener("keyup", onKeyUp);
};
- }, [camera, controls, scene, toggleView, selectedAssets, socket, floorItems, pastedObjects, duplicatedObjects, movedObjects, rotatedObjects]);
+ }, [camera, controls, scene, toggleView, selectedAssets, socket, floorItems, pastedObjects, duplicatedObjects, movedObjects, rotatedObjects, keyEvent]);
- const gridSize = 0.25;
- const moveSpeed = 0.25;
- const isGridSnap = false;
+ let moveSpeed = keyEvent === "Ctrl" || "Ctrl+Shift" ? 1 : 0.25;
useFrame(() => {
if (movedObjects.length > 0) {
@@ -113,10 +153,17 @@ function MoveControls({ movedObjects, setMovedObjects, itemsGroupRef, copiedObje
if (point) {
let targetX = point.x;
let targetZ = point.z;
+ if (keyEvent === "Ctrl") {
+ targetX = snapControls(targetX, "Ctrl");
+ targetZ = snapControls(targetZ, "Ctrl");
+ } else if (keyEvent === "Ctrl+Shift") {
+ targetX = snapControls(targetX, "Ctrl+Shift");
+ targetZ = snapControls(targetZ, "Ctrl+Shift");
+ } else if (keyEvent === "Shift") {
+ targetX = snapControls(targetX, "Shift");
+ targetZ = snapControls(targetZ, "Shift");
+ } else {
- if (isGridSnap) {
- targetX = Math.round(point.x / gridSize) * gridSize;
- targetZ = Math.round(point.z / gridSize) * gridSize;
}
const position = new THREE.Vector3();
@@ -190,10 +237,21 @@ function MoveControls({ movedObjects, setMovedObjects, itemsGroupRef, copiedObje
})
}
if (productData) {
- useProductStore.getState().updateEvent(useSelectedProduct.getState().selectedProduct.productId, obj.userData.modelUuid, {
+ const event = 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],
})
+
+ if (event) {
+ updateBackend(
+ selectedProduct.productName,
+ selectedProduct.productId,
+ organization,
+ event
+ );
+ }
+
+ newFloorItem.eventData = eventData;
}
}
@@ -203,9 +261,6 @@ function MoveControls({ movedObjects, setMovedObjects, itemsGroupRef, copiedObje
return updatedItems;
});
- const email = localStorage.getItem("email");
- const organization = email ? email.split("@")[1].split(".")[0] : "default";
-
//REST
// await setFloorItemApi(
@@ -253,6 +308,7 @@ function MoveControls({ movedObjects, setMovedObjects, itemsGroupRef, copiedObje
setMovedObjects([]);
setRotatedObjects([]);
setSelectedAssets([]);
+ setKeyEvent("")
}
return null;
diff --git a/app/src/modules/scene/controls/selectionControls/rotateControls.tsx b/app/src/modules/scene/controls/selectionControls/rotateControls.tsx
index 08667b4..58dab0c 100644
--- a/app/src/modules/scene/controls/selectionControls/rotateControls.tsx
+++ b/app/src/modules/scene/controls/selectionControls/rotateControls.tsx
@@ -8,6 +8,7 @@ import * as Types from "../../../../types/world/worldTypes";
import { useEventsStore } from "../../../../store/simulation/useEventsStore";
import { useProductStore } from "../../../../store/simulation/useProductStore";
import { useSelectedProduct } from "../../../../store/simulation/useSimulationStore";
+import { upsertProductOrEventApi } from "../../../../services/simulation/UpsertProductOrEventApi";
function RotateControls({ rotatedObjects, setRotatedObjects, movedObjects, setMovedObjects, itemsGroupRef, copiedObjects, setCopiedObjects, pastedObjects, setpastedObjects, duplicatedObjects, setDuplicatedObjects, selectionGroup, boundingBoxRef }: any) {
const { camera, controls, gl, scene, pointer, raycaster } = useThree();
@@ -15,10 +16,28 @@ function RotateControls({ rotatedObjects, setRotatedObjects, movedObjects, setMo
const { toggleView } = useToggleView();
const { selectedAssets, setSelectedAssets } = useSelectedAssets();
+ const { selectedProduct } = useSelectedProduct();
const { floorItems, setFloorItems } = useFloorItems();
const { socket } = useSocketStore();
const itemsData = useRef([]);
+ const email = localStorage.getItem('email')
+ const organization = (email!.split("@")[1]).split(".")[0];
+
+ const updateBackend = (
+ productName: string,
+ productId: string,
+ organization: string,
+ eventData: EventsSchema
+ ) => {
+ upsertProductOrEventApi({
+ productName: productName,
+ productId: productId,
+ organization: organization,
+ eventDatas: eventData
+ })
+ }
+
const prevPointerPosition = useRef(null);
useEffect(() => {
@@ -190,10 +209,21 @@ function RotateControls({ rotatedObjects, setRotatedObjects, movedObjects, setMo
})
}
if (productData) {
- useProductStore.getState().updateEvent(useSelectedProduct.getState().selectedProduct.productId, obj.userData.modelUuid, {
+ const event = 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],
})
+
+ if (event) {
+ updateBackend(
+ selectedProduct.productName,
+ selectedProduct.productId,
+ organization,
+ event
+ );
+ }
+
+ newFloorItem.eventData = eventData;
}
}
@@ -203,9 +233,6 @@ function RotateControls({ rotatedObjects, setRotatedObjects, movedObjects, setMo
return updatedItems;
});
- const email = localStorage.getItem("email");
- const organization = email ? email.split("@")[1].split(".")[0] : "default";
-
//REST
// await setFloorItemApi(
diff --git a/app/src/modules/simulation/events/points/creator/pointsCreator.tsx b/app/src/modules/simulation/events/points/creator/pointsCreator.tsx
index c6ec316..0ed7e13 100644
--- a/app/src/modules/simulation/events/points/creator/pointsCreator.tsx
+++ b/app/src/modules/simulation/events/points/creator/pointsCreator.tsx
@@ -1,28 +1,36 @@
import React, { useEffect, useRef, useState } from "react";
import * as THREE from "three";
import { useEventsStore } from "../../../../../store/simulation/useEventsStore";
-import useModuleStore from "../../../../../store/useModuleStore";
+import useModuleStore, { useSubModuleStore } from "../../../../../store/useModuleStore";
import { TransformControls } from "@react-three/drei";
import { detectModifierKeys } from "../../../../../utils/shortcutkeys/detectModifierKeys";
import {
useSelectedEventSphere,
useSelectedEventData,
+ useIsDragging,
+ useIsRotating,
} from "../../../../../store/simulation/useSimulationStore";
+import { useThree } from "@react-three/fiber";
function PointsCreator() {
+ const { gl, raycaster, scene, pointer, camera } = useThree();
+ const { subModule } = useSubModuleStore();
const { events, updatePoint, getPointByUuid, getEventByModelUuid } = useEventsStore();
const { activeModule } = useModuleStore();
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 { selectedEventData, setSelectedEventData, clearSelectedEventData } = useSelectedEventData();
+ const { selectedEventData,setSelectedEventData, clearSelectedEventData } = useSelectedEventData();
+ const { isDragging } = useIsDragging();
+ const { isRotating } = useIsRotating();
useEffect(() => {
if (selectedEventSphere) {
const eventData = getEventByModelUuid(
selectedEventSphere.userData.modelUuid
);
+
if (eventData) {
setSelectedEventData(eventData, selectedEventSphere.userData.pointUuid);
} else {
@@ -72,6 +80,53 @@ function PointsCreator() {
}
};
+ useEffect(() => {
+ const canvasElement = gl.domElement;
+
+ let drag = false;
+ let isMouseDown = false;
+
+ const onMouseDown = () => {
+ isMouseDown = true;
+ drag = false;
+ };
+
+ const onMouseUp = () => {
+ if (selectedEventSphere && !drag) {
+ raycaster.setFromCamera(pointer, camera);
+ const intersects = raycaster
+ .intersectObjects(scene.children, true)
+ .filter(
+ (intersect) =>
+ intersect.object.name === ('Event-Sphere')
+ );
+ if (intersects.length === 0) {
+ clearSelectedEventSphere();
+ setTransformMode(null);
+ }
+ }
+ }
+
+ const onMouseMove = () => {
+ if (isMouseDown) {
+ drag = true;
+ }
+ };
+
+ if (subModule === 'mechanics') {
+ canvasElement.addEventListener("mousedown", onMouseDown);
+ canvasElement.addEventListener("mouseup", onMouseUp);
+ canvasElement.addEventListener("mousemove", onMouseMove);
+ }
+
+ return () => {
+ canvasElement.removeEventListener("mousedown", onMouseDown);
+ canvasElement.removeEventListener("mouseup", onMouseUp);
+ canvasElement.removeEventListener("mousemove", onMouseMove);
+ };
+
+ }, [gl, subModule, selectedEventSphere]);
+
return (
<>
{activeModule === "simulation" && (
@@ -80,7 +135,10 @@ function PointsCreator() {
{events.map((event, i) => {
if (event.type === "transfer") {
return (
-
+
{event.points.map((point, j) => (
{
if (selectedEventData?.data.type !== 'vehicle') {
- clearSelectedEventSphere();
+ // 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 }}
+ userData={{
+ modelUuid: event.modelUuid,
+ pointUuid: point.uuid,
+ }}
>
@@ -111,7 +171,10 @@ function PointsCreator() {
);
} else if (event.type === "vehicle") {
return (
-
+
{
- 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 }}
+ userData={{
+ modelUuid: event.modelUuid,
+ pointUuid: event.point.uuid,
+ }}
>
@@ -137,7 +198,10 @@ function PointsCreator() {
);
} else if (event.type === "roboticArm") {
return (
-
+
{
- 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 }}
+ userData={{
+ modelUuid: event.modelUuid,
+ pointUuid: event.point.uuid,
+ }}
>
@@ -163,7 +228,10 @@ function PointsCreator() {
);
} else if (event.type === "machine") {
return (
-
+
{
- clearSelectedEventSphere();
+ // 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 }}
+ userData={{
+ modelUuid: event.modelUuid,
+ pointUuid: event.point.uuid,
+ }}
>
@@ -208,4 +278,4 @@ function PointsCreator() {
);
}
-export default PointsCreator;
+export default PointsCreator;
\ No newline at end of file
diff --git a/app/src/modules/simulation/machine/instances/animator/machineAnimator.tsx b/app/src/modules/simulation/machine/instances/animator/machineAnimator.tsx
new file mode 100644
index 0000000..6ef2b0e
--- /dev/null
+++ b/app/src/modules/simulation/machine/instances/animator/machineAnimator.tsx
@@ -0,0 +1,102 @@
+import { useFrame } from '@react-three/fiber';
+import React, { useEffect, useRef } from 'react';
+import { useMachineStore } from '../../../../../store/simulation/useMachineStore';
+import { useAnimationPlaySpeed, usePauseButtonStore, usePlayButtonStore, useResetButtonStore } from '../../../../../store/usePlayButtonStore';
+
+
+interface MachineAnimatorProps {
+ currentPhase: string;
+ handleCallBack: () => void;
+ reset: () => void;
+ machineStatus: (modelId: string, status: string) => void;
+ processingTime: number;
+ machineUuid: string
+}
+
+const MachineAnimator = ({ currentPhase, handleCallBack, processingTime, machineUuid, machineStatus, reset }: MachineAnimatorProps) => {
+ const animationStarted = useRef(false);
+ const isPausedRef = useRef(false);
+ const startTimeRef = useRef(0);
+ const animationFrameId = useRef(null);
+ const pauseTimeRef = useRef(null);
+ const { isPaused } = usePauseButtonStore();
+ const { removeCurrentAction } = useMachineStore();
+ const { isReset, setReset } = useResetButtonStore();
+ const { isPlaying } = usePlayButtonStore();
+ const { speed } = useAnimationPlaySpeed();
+ const isPlayingRef = useRef(false);
+ const isResetRef = useRef(false)
+
+
+ useEffect(() => {
+ isPausedRef.current = isPaused;
+ }, [isPaused]);
+ useEffect(() => {
+ isPlayingRef.current = isPlaying;
+ }, [isPlaying]);
+ useEffect(() => {
+ isResetRef.current = isReset;
+ }, [isReset]);
+
+
+ useEffect(() => {
+
+ if (isReset || !isPlaying) {
+ reset();
+ setReset(false);
+ startTimeRef.current = 0;
+ isPausedRef.current = false;
+ pauseTimeRef.current = 0;
+ animationFrameId.current = null;
+ animationStarted.current = false;
+ removeCurrentAction(machineUuid)
+ }
+ }, [isReset, isPlaying])
+
+ useEffect(() => {
+ if (currentPhase === 'processing' && !animationStarted.current && machineUuid) {
+ animationStarted.current = true;
+ startTimeRef.current = performance.now();
+ animationFrameId.current = requestAnimationFrame(step);
+ }
+ }, [currentPhase]);
+
+ function step(time: number) {
+ if (!isPausedRef.current || !isResetRef.current) {
+ if (animationFrameId.current) {
+ cancelAnimationFrame(animationFrameId.current);
+ animationFrameId.current = null;
+ }
+ if (isPausedRef.current) {
+ if (!pauseTimeRef.current) {
+ pauseTimeRef.current = performance.now();
+ }
+ animationFrameId.current = requestAnimationFrame(step);
+ return;
+ }
+
+ if (pauseTimeRef.current) {
+ const pauseDuration = performance.now() - pauseTimeRef.current;
+ startTimeRef.current += pauseDuration;
+ pauseTimeRef.current = null;
+ }
+
+ const elapsed = time - startTimeRef.current;
+ const processedTime = processingTime * 1000;
+ if (elapsed < processedTime) {
+ machineStatus(machineUuid, "Machine is currently processing the task");
+ animationFrameId.current = requestAnimationFrame(step);
+ } else {
+ removeCurrentAction(machineUuid);
+ animationStarted.current = false;
+ handleCallBack();
+
+ }
+ }
+ }
+
+
+ return null;
+}
+
+export default MachineAnimator;
diff --git a/app/src/modules/simulation/machine/instances/machineInstance/machineInstance.tsx b/app/src/modules/simulation/machine/instances/machineInstance/machineInstance.tsx
index edb825f..714bcdb 100644
--- a/app/src/modules/simulation/machine/instances/machineInstance/machineInstance.tsx
+++ b/app/src/modules/simulation/machine/instances/machineInstance/machineInstance.tsx
@@ -1,8 +1,65 @@
-import React from 'react'
+import React, { useEffect, useRef, useState } from 'react'
+import { useMachineStore } from '../../../../../store/simulation/useMachineStore';
+import { usePlayButtonStore } from '../../../../../store/usePlayButtonStore';
+import MachineAnimator from '../animator/machineAnimator';
+
+function MachineInstance({ machineDetail }: any) {
+ const [currentPhase, setCurrentPhase] = useState('idle');
+ let isIncrememtable = useRef(true);
+ const { isPlaying } = usePlayButtonStore();
+ const { machines, addCurrentAction, setMachineState, setMachineActive } = useMachineStore();
+
+ const reset = () => {
+ setMachineState(machineDetail.modelUuid, 'idle');
+ setMachineActive(machineDetail.modelUuid, false);
+ isIncrememtable.current = true;
+ setCurrentPhase("idle");
+ }
+ const increment = () => {
+ if (isIncrememtable.current) {
+ addCurrentAction(machineDetail.modelUuid, "machine-action-2468-1357-8024")
+ isIncrememtable.current = false;
+ }
+ }
+ function machineStatus(modelId: string, status: string) {
+ // console.log(`${modelId} , ${status}`);
+
+ }
+
+ useEffect(() => {
+ if (isPlaying) {
+ if (!machineDetail.isActive && machineDetail.state === "idle" && currentPhase == "idle" && !machineDetail.currentAction) {
+ setTimeout(() => {
+ increment();
+ }, 2000);
+ machineStatus(machineDetail.modelUuid, 'Machine is idle and waiting for next instruction.')
+ } else if (!machineDetail.isActive && machineDetail.state === "idle" && currentPhase == "idle" && machineDetail.currentAction) {
+ setCurrentPhase("processing");
+ setMachineState(machineDetail.modelUuid, 'running');
+ setMachineActive(machineDetail.modelUuid, true);
+ machineStatus(machineDetail.modelUuid, "Machine started processing")
+ }
+ } else {
+ reset();
+ }
+ }, [currentPhase, isPlaying, machines])
+
+ function handleCallBack() {
+ if (currentPhase == "processing") {
+ setMachineState(machineDetail.modelUuid, 'idle');
+ setMachineActive(machineDetail.modelUuid, false);
+ setCurrentPhase("idle")
+ isIncrememtable.current = true;
+ machineStatus(machineDetail.modelUuid, "Machine has completed the processing")
+ }
+ }
+ // console.log('currentPhase: ', currentPhase);
+
+
-function MachineInstance() {
return (
<>
+
)
}
diff --git a/app/src/modules/simulation/machine/instances/machineInstances.tsx b/app/src/modules/simulation/machine/instances/machineInstances.tsx
index b0c2c9f..8536cac 100644
--- a/app/src/modules/simulation/machine/instances/machineInstances.tsx
+++ b/app/src/modules/simulation/machine/instances/machineInstances.tsx
@@ -1,11 +1,14 @@
import React from 'react'
import MachineInstance from './machineInstance/machineInstance'
+import { useMachineStore } from '../../../../store/simulation/useMachineStore';
function MachineInstances() {
+ const { machines } = useMachineStore();
return (
<>
-
-
+ {machines.map((val: MachineStatus) => (
+
+ ))}
)
diff --git a/app/src/modules/simulation/machine/machine.tsx b/app/src/modules/simulation/machine/machine.tsx
index 32c3b8e..3d24f61 100644
--- a/app/src/modules/simulation/machine/machine.tsx
+++ b/app/src/modules/simulation/machine/machine.tsx
@@ -1,7 +1,49 @@
-import React from 'react'
+import React, { useEffect } from 'react'
import MachineInstances from './instances/machineInstances'
+import { useMachineStore } from '../../../store/simulation/useMachineStore'
+import { useSelectedProduct } from '../../../store/simulation/useSimulationStore';
function Machine() {
+ const { addMachine, addCurrentAction, removeMachine, machines } = useMachineStore();
+ const { selectedProduct } = useSelectedProduct();
+
+ const machineSample: MachineEventSchema[] = [
+ {
+ modelUuid: "machine-1234-5678-9012",
+ modelName: "CNC Milling Machine",
+ position: [10, 0, 5],
+ rotation: [0, 0, 0],
+ state: "idle",
+ type: "machine",
+ point: {
+ uuid: "machine-point-9876-5432-1098",
+ position: [10, 0.5, 5.2],
+ rotation: [0, 0, 0],
+ action: {
+ actionUuid: "machine-action-2468-1357-8024",
+ actionName: "Metal Processing",
+ actionType: "process",
+ processTime: 10,
+ swapMaterial: "steel",
+ triggers: []
+ }
+ }
+ }
+ ];
+
+ useEffect(() => {
+ removeMachine(machineSample[0].modelUuid);
+ addMachine(selectedProduct.productId, machineSample[0]);
+
+ // addCurrentAction(machineSample[0].modelUuid, machineSample[0].point.action.actionUuid);
+ }, [])
+
+
+ useEffect(() => {
+
+ // console.log('machines: ', machines);
+ }, [machines])
+
return (
<>
diff --git a/app/src/modules/simulation/products/events/addOrRemoveEventsInProducts.tsx b/app/src/modules/simulation/products/events/addOrRemoveEventsInProducts.tsx
index 9eececc..715aa37 100644
--- a/app/src/modules/simulation/products/events/addOrRemoveEventsInProducts.tsx
+++ b/app/src/modules/simulation/products/events/addOrRemoveEventsInProducts.tsx
@@ -53,7 +53,17 @@ function AddOrRemoveEventsInProducts() {
const canvasElement = gl.domElement;
if (!canvasElement) return;
- let intersects = raycaster.intersectObjects(scene.children, true);
+ const intersects = raycaster
+ .intersectObjects(scene.children, true)
+ .filter(
+ (intersect) =>
+ !intersect.object.name.includes("Roof") &&
+ !intersect.object.name.includes("MeasurementReference") &&
+ !intersect.object.name.includes("agv-collider") &&
+ !(intersect.object.type === "GridHelper") &&
+ !(intersect.object?.parent?.name.includes('zones')) &&
+ !(intersect.object?.parent?.name.includes('Zone'))
+ );
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;
@@ -116,6 +126,7 @@ function AddOrRemoveEventsInProducts() {
};
}, [gl, subModule, selectedProduct, selectedAsset]);
+
return (
<>
)
diff --git a/app/src/modules/simulation/products/products.tsx b/app/src/modules/simulation/products/products.tsx
index ee1ac42..921dd96 100644
--- a/app/src/modules/simulation/products/products.tsx
+++ b/app/src/modules/simulation/products/products.tsx
@@ -7,7 +7,7 @@ import { upsertProductOrEventApi } from '../../../services/simulation/UpsertProd
import { getAllProductsApi } from '../../../services/simulation/getallProductsApi';
function Products() {
- const { products, addProduct, setProducts } = useProductStore();
+ const { addProduct, setProducts } = useProductStore();
const { setSelectedProduct } = useSelectedProduct();
useEffect(() => {
@@ -27,9 +27,6 @@ function Products() {
})
}, [])
- useEffect(() => {
- }, [])
-
return (
<>
diff --git a/app/src/modules/simulation/roboticArm/instances/animator/roboticArmAnimator.tsx b/app/src/modules/simulation/roboticArm/instances/animator/roboticArmAnimator.tsx
index c82b73d..10f90bf 100644
--- a/app/src/modules/simulation/roboticArm/instances/animator/roboticArmAnimator.tsx
+++ b/app/src/modules/simulation/roboticArm/instances/animator/roboticArmAnimator.tsx
@@ -1,68 +1,220 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react'
-import { useArmBotStore } from '../../../../../store/simulation/useArmBotStore';
-import { useFrame, useThree } from '@react-three/fiber';
-import * as THREE from "three"
-import { usePlayButtonStore } from '../../../../../store/usePlayButtonStore';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { useFrame } from '@react-three/fiber';
+import * as THREE from 'three';
+import { Line } from '@react-three/drei';
+import {
+ useAnimationPlaySpeed,
+ usePauseButtonStore,
+ usePlayButtonStore,
+ useResetButtonStore
+} from '../../../../../store/usePlayButtonStore';
-function RoboticArmAnimator({ armUuid, HandleCallback, currentPhase, ikSolver, targetBone, robot, logStatus, groupRef, processes, armBotCurveRef, path }: any) {
- const { armBots } = useArmBotStore();
- const { scene } = useThree();
- const restSpeed = 0.1;
- const restPosition = new THREE.Vector3(0, 1, -1.6);
- const initialCurveRef = useRef(null);
- const initialStartPositionRef = useRef(null);
- const [initialProgress, setInitialProgress] = useState(0);
- const [progress, setProgress] = useState(0);
- const [needsInitialMovement, setNeedsInitialMovement] = useState(true);
- const [isInitializing, setIsInitializing] = useState(true);
- const { isPlaying } = usePlayButtonStore();
- const statusRef = useRef("idle");
- // Create a ref for initialProgress
- const initialProgressRef = useRef(0);
+function RoboticArmAnimator({
+ HandleCallback,
+ restPosition,
+ ikSolver,
+ targetBone,
+ armBot,
+ logStatus,
+ path
+}: any) {
+ const progressRef = useRef(0);
+ const curveRef = useRef(null);
const [currentPath, setCurrentPath] = useState<[number, number, number][]>([]);
+ const [circlePoints, setCirclePoints] = useState<[number, number, number][]>([]);
+ const [customCurvePoints, setCustomCurvePoints] = useState(null);
+ // Zustand stores
+ const { isPlaying } = usePlayButtonStore();
+ const { isPaused } = usePauseButtonStore();
+ const { isReset } = useResetButtonStore();
+ const { speed } = useAnimationPlaySpeed();
+
+ // Update path state whenever `path` prop changes
useEffect(() => {
-
- setCurrentPath(path)
- }, [path])
+ setCurrentPath(path);
+ }, [path]);
+ // Reset logic when `isPlaying` changes
useEffect(() => {
+ if (!isPlaying) {
+ setCurrentPath([]);
+ curveRef.current = null;
+ }
+ }, [isPlaying]);
- }, [currentPath])
+ // Handle circle points based on armBot position
+ useEffect(() => {
+ const points = generateRingPoints(1.6, 64)
+ setCirclePoints(points);
+ }, [armBot.position]);
+
+ function generateRingPoints(radius: any, segments: any) {
+ const points: [number, number, number][] = [];
+ for (let i = 0; i < segments; i++) {
+ // Calculate angle for current segment
+ const angle = (i / segments) * Math.PI * 2;
+ // Calculate x and z coordinates (y remains the same for a flat ring)
+ const x = Math.cos(angle) * radius;
+ const z = Math.sin(angle) * radius;
+ points.push([x, 1.5, z]);
+ }
+ return points;
+ }
+
+ const findNearestIndex = (nearestPoint: [number, number, number], points: [number, number, number][], epsilon = 1e-6) => {
+ for (let i = 0; i < points.length; i++) {
+ const [x, y, z] = points[i];
+ if (
+ Math.abs(x - nearestPoint[0]) < epsilon &&
+ Math.abs(y - nearestPoint[1]) < epsilon &&
+ Math.abs(z - nearestPoint[2]) < epsilon
+ ) {
+ return i; // Found the matching index
+ }
+ }
+ return -1; // Not found
+ };
+
+
+ // Handle nearest points and final path (including arc points)
+ useEffect(() => {
+ if (circlePoints.length > 0 && currentPath.length > 0) {
+ const start = currentPath[0];
+ const end = currentPath[currentPath.length - 1];
+
+ const raisedStart = [start[0], start[1] + 0.5, start[2]] as [number, number, number];
+ const raisedEnd = [end[0], end[1] + 0.5, end[2]] as [number, number, number];
+
+ const findNearest = (target: [number, number, number]) => {
+ return circlePoints.reduce((nearest, point) => {
+ const distance = Math.hypot(
+ target[0] - point[0],
+ target[1] - point[1],
+ target[2] - point[2]
+ );
+ const nearestDistance = Math.hypot(
+ target[0] - nearest[0],
+ target[1] - nearest[1],
+ target[2] - nearest[2]
+ );
+ return distance < nearestDistance ? point : nearest;
+ }, circlePoints[0]);
+ };
+
+ const nearestToStart = findNearest(raisedStart);
+
+ const nearestToEnd = findNearest(raisedEnd);
+
+ const indexOfNearestStart = findNearestIndex(nearestToStart, circlePoints);
+
+ const indexOfNearestEnd = findNearestIndex(nearestToEnd, circlePoints);
+
+ // Find clockwise and counter-clockwise distances
+ const clockwiseDistance = (indexOfNearestEnd - indexOfNearestStart + 64) % 64;
+
+ const counterClockwiseDistance = (indexOfNearestStart - indexOfNearestEnd + 64) % 64;
+
+ const clockwiseIsShorter = clockwiseDistance <= counterClockwiseDistance;
+
+ // Collect arc points between start and end
+ let arcPoints: [number, number, number][] = [];
+
+ if (clockwiseIsShorter) {
+ if (indexOfNearestStart <= indexOfNearestEnd) {
+ arcPoints = circlePoints.slice(indexOfNearestStart, indexOfNearestEnd + 1);
+ } else {
+ // Wrap around
+ arcPoints = [
+ ...circlePoints.slice(indexOfNearestStart, 64),
+ ...circlePoints.slice(0, indexOfNearestEnd + 1)
+ ];
+ }
+ } else {
+ if (indexOfNearestStart >= indexOfNearestEnd) {
+ for (let i = indexOfNearestStart; i !== (indexOfNearestEnd - 1 + 64) % 64; i = (i - 1 + 64) % 64) {
+ arcPoints.push(circlePoints[i]);
+ }
+ } else {
+ for (let i = indexOfNearestStart; i !== (indexOfNearestEnd - 1 + 64) % 64; i = (i - 1 + 64) % 64) {
+ arcPoints.push(circlePoints[i]);
+ }
+ }
+ }
+
+ // Continue your custom path logic
+ const pathVectors = [
+ new THREE.Vector3(start[0], start[1], start[2]), // start
+ new THREE.Vector3(raisedStart[0], raisedStart[1], raisedStart[2]), // lift up
+ new THREE.Vector3(nearestToStart[0], raisedStart[1], nearestToStart[2]), // move to arc start
+ ...arcPoints.map(point => new THREE.Vector3(point[0], raisedStart[1], point[2])),
+ new THREE.Vector3(nearestToEnd[0], raisedEnd[1], nearestToEnd[2]), // move from arc end
+ new THREE.Vector3(raisedEnd[0], raisedEnd[1], raisedEnd[2]), // lowered end
+ new THREE.Vector3(end[0], end[1], end[2]) // end
+ ];
+
+ const customCurve = new THREE.CatmullRomCurve3(pathVectors, false, 'centripetal', 1);
+ const generatedPoints = customCurve.getPoints(100);
+ setCustomCurvePoints(generatedPoints);
+ }
+ }, [circlePoints, currentPath]);
+
+ // Frame update for animation
useFrame((_, delta) => {
- if (!ikSolver || !currentPath || currentPath.length === 0) return;
+ if (!ikSolver) return;
- const bone = ikSolver.mesh.skeleton.bones.find(
- (b: any) => b.name === targetBone
- );
+ const bone = ikSolver.mesh.skeleton.bones.find((b: any) => b.name === targetBone);
if (!bone) return;
- // Ensure currentPath is a valid array of 3D points, create a CatmullRomCurve3 from it
- const curve = new THREE.CatmullRomCurve3(
- currentPath.map(point => new THREE.Vector3(point[0], point[1], point[2]))
- );
+ if (isPlaying) {
+ if (!isPaused && customCurvePoints && currentPath.length > 0) {
+ const curvePoints = customCurvePoints;
+ const speedAdjustedProgress = progressRef.current + (speed * armBot.speed);
+ const index = Math.floor(speedAdjustedProgress);
+ if (index >= curvePoints.length) {
+ // Reached the end of the curve
+ HandleCallback();
+ setCurrentPath([]);
+ curveRef.current = null;
+ progressRef.current = 0;
+ } else {
+ const point = curvePoints[index];
+ bone.position.copy(point);
+ progressRef.current = speedAdjustedProgress;
+ }
+ } else if (isPaused) {
+ logStatus(armBot.modelUuid, 'Simulation Paused');
+ }
- const next = initialProgressRef.current + delta * 0.5;
- if (next >= 1) {
- // bone.position.copy(restPosition);
- HandleCallback(); // Call the callback when the path is completed
- initialProgressRef.current = 0; // Set ref to 1 when done
- } else {
- const point = curve.getPoint(next); // Get the interpolated point from the curve
- bone.position.copy(point); // Update the bone position along the curve
- initialProgressRef.current = next; // Update progress
+ ikSolver.update();
+ } else if (!isPlaying && currentPath.length === 0) {
+ // Not playing anymore, reset to rest
+ bone.position.copy(restPosition);
+ ikSolver.update();
}
-
- ikSolver.update();
});
-
return (
- <>
- )
+ <>
+ {customCurvePoints && currentPath && isPlaying && (
+
+ [p.x, p.y, p.z] as [number, number, number])}
+ color="green"
+ lineWidth={5}
+ dashed={false}
+ />
+
+ )}
+
+
+
+
+
+ );
}
-export default RoboticArmAnimator;
\ No newline at end of file
+export default RoboticArmAnimator;
diff --git a/app/src/modules/simulation/roboticArm/instances/armInstance/roboticArmInstance.tsx b/app/src/modules/simulation/roboticArm/instances/armInstance/roboticArmInstance.tsx
index 6bde587..9199ede 100644
--- a/app/src/modules/simulation/roboticArm/instances/armInstance/roboticArmInstance.tsx
+++ b/app/src/modules/simulation/roboticArm/instances/armInstance/roboticArmInstance.tsx
@@ -1,61 +1,141 @@
import React, { useEffect, useRef, useState } from 'react'
import IKInstance from '../ikInstance/ikInstance';
import RoboticArmAnimator from '../animator/roboticArmAnimator';
-import { usePlayButtonStore } from '../../../../../store/usePlayButtonStore';
+import { usePauseButtonStore, usePlayButtonStore, useResetButtonStore } from '../../../../../store/usePlayButtonStore';
import { useArmBotStore } from '../../../../../store/simulation/useArmBotStore';
import armModel from "../../../../../assets/gltf-glb/rigged/ik_arm_4.glb";
import { useThree } from "@react-three/fiber";
import { useFloorItems } from '../../../../../store/store';
import useModuleStore from '../../../../../store/useModuleStore';
-import { Vector3 } from "three";
import * as THREE from "three";
+import { useSelectedAction, useSelectedProduct } from '../../../../../store/simulation/useSimulationStore';
+import { useProductStore } from '../../../../../store/simulation/useProductStore';
-interface Process {
- triggerId: string;
- startPoint?: Vector3;
- endPoint?: Vector3;
- speed: number;
-}
-function RoboticArmInstance({ robot }: { robot: ArmBotStatus }) {
+function RoboticArmInstance({ armBot }: { armBot: ArmBotStatus }) {
- const { isPlaying } = usePlayButtonStore();
const [currentPhase, setCurrentPhase] = useState<(string)>("init");
- const { scene } = useThree();
- const targetBone = "Target";
- const { activeModule } = useModuleStore();
- const [ikSolver, setIkSolver] = useState(null);
- const { addCurrentAction, setArmBotActive, setArmBotState, removeCurrentAction } = useArmBotStore();
- const { floorItems } = useFloorItems();
- const groupRef = useRef(null);
- const [processes, setProcesses] = useState([]);
- const [armBotCurvePoints, setArmBotCurvePoints] = useState({ start: [], end: [] })
- const restPosition = new THREE.Vector3(0, 1, -1.6);
- let armBotCurveRef = useRef(null)
const [path, setPath] = useState<[number, number, number][]>([]);
+ const [ikSolver, setIkSolver] = useState(null);
+ const { scene } = useThree();
+ const restPosition = new THREE.Vector3(0, 1.75, -1.6);
+ const targetBone = "Target";
+ const groupRef = useRef(null);
+ const pauseTimeRef = useRef(null);
+ const isPausedRef = useRef(false);
+ let startTime: number;
+ //zustand
+ const { addCurrentAction, setArmBotActive, setArmBotState, removeCurrentAction } = useArmBotStore();
+ const { products, getActionByUuid } = useProductStore();
+ const { selectedProduct } = useSelectedProduct();
+ const { floorItems } = useFloorItems();
+ const { activeModule } = useModuleStore();
+ const { isPlaying } = usePlayButtonStore();
+ const { isReset, setReset } = useResetButtonStore();
+ const { isPaused } = usePauseButtonStore();
+ const { selectedAction } = useSelectedAction();
+
+ function firstFrame() {
+ startTime = performance.now();
+ step();
+ }
+ function step() {
+ if (isPausedRef.current) {
+ if (!pauseTimeRef.current) {
+ pauseTimeRef.current = performance.now();
+ }
+ requestAnimationFrame(() => step());
+ return;
+ }
+ if (pauseTimeRef.current) {
+ const pauseDuration = performance.now() - pauseTimeRef.current;
+ startTime += pauseDuration;
+ pauseTimeRef.current = null;
+ }
+ const elapsedTime = performance.now() - startTime;
+ if (elapsedTime < 1500) {
+ // Wait until 1500ms has passed
+ requestAnimationFrame(step);
+ return;
+ }
+ if (currentPhase === "picking") {
+
+ setArmBotActive(armBot.modelUuid, true);
+ setArmBotState(armBot.modelUuid, "running");
+ setCurrentPhase("start-to-end");
+ startTime = 0
+ const startPoint = armBot.point.actions[0].process.startPoint;
+ const endPoint = armBot.point.actions[0].process.endPoint;
+ if (startPoint && endPoint) {
+ let curve = createCurveBetweenTwoPoints(
+ new THREE.Vector3(startPoint[0], startPoint[1], startPoint[2]),
+ new THREE.Vector3(endPoint[0], endPoint[1], endPoint[2]));
+ if (curve) {
+ logStatus(armBot.modelUuid, "picking the object");
+ setPath(curve.points.map(point => [point.x, point.y, point.z]))
+ }
+ }
+ logStatus(armBot.modelUuid, "Moving armBot from start point to end position.")
+ } else if (currentPhase === "dropping") {
+
+ setArmBotActive(armBot.modelUuid, true);
+ setArmBotState(armBot.modelUuid, "running");
+ setCurrentPhase("end-to-rest");
+ startTime = 0;
+ const endPoint = armBot.point.actions[0].process.endPoint;
+ if (endPoint) {
+
+ let curve = createCurveBetweenTwoPoints(new THREE.Vector3(endPoint[0], endPoint[1], endPoint[2]), restPosition);
+ if (curve) {
+ logStatus(armBot.modelUuid, "dropping the object");
+ setPath(curve.points.map(point => [point.x, point.y, point.z]));
+ }
+ }
+ logStatus(armBot.modelUuid, "Moving armBot from end point to rest position.")
+ }
+
+ }
+ useEffect(() => {
+ isPausedRef.current = isPaused;
+ }, [isPaused]);
useEffect(() => {
- let armItems = floorItems?.filter((val: any) =>
- 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);
- if (targetMesh) {
- targetMesh.visible = activeModule !== "simulation"
- }
+ const targetMesh = scene?.getObjectByProperty("uuid", armBot.modelUuid);
+
+ if (targetMesh) {
+ targetMesh.visible = activeModule !== "simulation"
}
+
const targetBones = ikSolver?.mesh.skeleton.bones.find(
(b: any) => b.name === targetBone
);
+ if (isReset) {
+ logStatus(armBot.modelUuid, "Simulation Play Reset Successfully")
+ removeCurrentAction(armBot.modelUuid)
+ setArmBotActive(armBot.modelUuid, true)
+ setArmBotState(armBot.modelUuid, "running")
+ setCurrentPhase("init-to-rest");
+ isPausedRef.current = false
+ pauseTimeRef.current = null
+ isPausedRef.current = false
+ startTime = 0
+ if (targetBones) {
+ let curve = createCurveBetweenTwoPoints(targetBones.position, targetBones.position)
+ if (curve) {
+ setPath(curve.points.map(point => [point.x, point.y, point.z]));
+ }
+ }
+ setReset(false);
+ logStatus(armBot.modelUuid, "Moving armBot from initial point to rest position.")
+ }
if (isPlaying) {
- //Moving armBot from initial point to rest position.
- if (!robot?.isActive && robot?.state == "idle" && currentPhase == "init") {
- setArmBotActive(robot.modelUuid, true)
- setArmBotState(robot.modelUuid, "running")
+ //Moving armBot from initial point to rest position.
+ if (!armBot?.isActive && armBot?.state == "idle" && currentPhase == "init") {
+
+ setArmBotActive(armBot.modelUuid, true)
+ setArmBotState(armBot.modelUuid, "running")
setCurrentPhase("init-to-rest");
if (targetBones) {
let curve = createCurveBetweenTwoPoints(targetBones.position, restPosition)
@@ -63,21 +143,26 @@ function RoboticArmInstance({ robot }: { robot: ArmBotStatus }) {
setPath(curve.points.map(point => [point.x, point.y, point.z]));
}
}
- logStatus(robot.modelUuid, "Moving armBot from initial point to rest position.")
+ logStatus(armBot.modelUuid, "Moving armBot from initial point to rest position.")
}
//Waiting for trigger.
- else if (robot && !robot.isActive && robot.state === "idle" && currentPhase === "rest" && !robot.currentAction) {
- logStatus(robot.modelUuid, "Waiting to trigger CurrentAction")
- setTimeout(() => {
- addCurrentAction(robot.modelUuid, 'action-003');
+ else if (armBot && !armBot.isActive && armBot.state === "idle" && currentPhase === "rest" && !armBot.currentAction) {
+ logStatus(armBot.modelUuid, "Waiting to trigger CurrentAction")
+ const timeoutId = setTimeout(() => {
+ addCurrentAction(armBot.modelUuid, selectedAction?.actionId);
+ console.log('selectedAction?.actionId: ', selectedAction?.actionId);
}, 3000);
+ return () => clearTimeout(timeoutId);
}
- else if (robot && !robot.isActive && robot.state === "idle" && currentPhase === "rest" && robot.currentAction) {
- if (robot.currentAction) {
- setArmBotActive(robot.modelUuid, true);
- setArmBotState(robot.modelUuid, "running");
+ else if (armBot && !armBot.isActive && armBot.state === "idle" && currentPhase === "rest" && armBot.currentAction) {
+ if (armBot.currentAction) {
+
+ setArmBotActive(armBot.modelUuid, true);
+ setArmBotState(armBot.modelUuid, "running");
setCurrentPhase("rest-to-start");
- const startPoint = robot.point.actions[0].process.startPoint;
+ let actiondata = getActionByUuid(selectedProduct.productId, selectedAction.actionId)
+ console.log('actiondata: ', actiondata);
+ const startPoint = armBot.point.actions[0].process.startPoint;
if (startPoint) {
let curve = createCurveBetweenTwoPoints(restPosition, new THREE.Vector3(startPoint[0], startPoint[1], startPoint[2]));
if (curve) {
@@ -85,105 +170,109 @@ function RoboticArmInstance({ robot }: { robot: ArmBotStatus }) {
}
}
}
- logStatus(robot.modelUuid, "Moving armBot from rest point to start position.")
+ logStatus(armBot.modelUuid, "Moving armBot from rest point to start position.")
}
- else if (robot && !robot.isActive && robot.state === "idle" && currentPhase === "picking" && robot.currentAction) {
- setArmBotActive(robot.modelUuid, true);
- setArmBotState(robot.modelUuid, "running");
- setCurrentPhase("start-to-end");
- const startPoint = robot.point.actions[0].process.startPoint;
- const endPoint = robot.point.actions[0].process.endPoint;
- if (startPoint && endPoint) {
- let curve = createCurveBetweenTwoPoints(
- new THREE.Vector3(startPoint[0], startPoint[1], startPoint[2]),
- new THREE.Vector3(endPoint[0], endPoint[1], endPoint[2])
- );
- if (curve) {
- setTimeout(() => {
- logStatus(robot.modelUuid, "picking the object");
- setPath(curve.points.map(point => [point.x, point.y, point.z]));
- }, 1500)
- }
- }
- logStatus(robot.modelUuid, "Moving armBot from start point to end position.")
+ else if (armBot && !armBot.isActive && armBot.state === "idle" && currentPhase === "picking" && armBot.currentAction) {
+ requestAnimationFrame(firstFrame);
+ // setArmBotActive(armBot.modelUuid, true);
+ // setArmBotState(armBot.modelUuid, "running");
+ // setCurrentPhase("start-to-end");
+ // const startPoint = armBot.point.actions[0].process.startPoint;
+ // const endPoint = armBot.point.actions[0].process.endPoint;
+ // if (startPoint && endPoint) {
+ // let curve = createCurveBetweenTwoPoints(
+ // new THREE.Vector3(startPoint[0], startPoint[1], startPoint[2]),
+ // new THREE.Vector3(endPoint[0], endPoint[1], endPoint[2]));
+ // if (curve) {
+ // setTimeout(() => {
+ // logStatus(armBot.modelUuid, "picking the object");
+ // setPath(curve.points.map(point => [point.x, point.y, point.z]));
+ // }, 1500)
+ // }
+ // }
+ // logStatus(armBot.modelUuid, "Moving armBot from start point to end position.")
}
- else if (robot && !robot.isActive && robot.state === "idle" && currentPhase === "dropping" && robot.currentAction) {
- setArmBotActive(robot.modelUuid, true);
- setArmBotState(robot.modelUuid, "running");
- setCurrentPhase("end-to-rest");
- const endPoint = robot.point.actions[0].process.endPoint;
- if (endPoint) {
- let curve = createCurveBetweenTwoPoints(new THREE.Vector3(endPoint[0], endPoint[1], endPoint[2]), restPosition
- );
- if (curve) {
- setTimeout(() => {
- logStatus(robot.modelUuid, "dropping the object");
- setPath(curve.points.map(point => [point.x, point.y, point.z]));
- }, 1500)
- }
- }
- logStatus(robot.modelUuid, "Moving armBot from end point to rest position.")
+ else if (armBot && !armBot.isActive && armBot.state === "idle" && currentPhase === "dropping" && armBot.currentAction) {
+ requestAnimationFrame(firstFrame);
+ // setArmBotActive(armBot.modelUuid, true);
+ // setArmBotState(armBot.modelUuid, "running");
+ // setCurrentPhase("end-to-rest");
+ // const endPoint = armBot.point.actions[0].process.endPoint;
+ // if (endPoint) {
+ // let curve = createCurveBetweenTwoPoints(new THREE.Vector3(endPoint[0], endPoint[1], endPoint[2]), restPosition);
+ // if (curve) {
+ // setTimeout(() => {
+ // logStatus(armBot.modelUuid, "dropping the object");
+ // setPath(curve.points.map(point => [point.x, point.y, point.z]));
+ // }, 1500)
+ // }
+ // }
+ // logStatus(armBot.modelUuid, "Moving armBot from end point to rest position.")
}
+ } else {
+ logStatus(armBot.modelUuid, "Simulation Play Stopped")
+ setArmBotActive(armBot.modelUuid, false)
+ setArmBotState(armBot.modelUuid, "idle")
+ setCurrentPhase("init");
+ setPath([])
+ removeCurrentAction(armBot.modelUuid)
+
}
- }, [currentPhase, robot, isPlaying, ikSolver])
+ }, [currentPhase, armBot, isPlaying, ikSolver, isReset])
function createCurveBetweenTwoPoints(p1: any, p2: any) {
const mid = new THREE.Vector3().addVectors(p1, p2).multiplyScalar(0.5);
- mid.y += 0.5;
-
+ // mid.y += 0.5;
const points = [p1, mid, p2];
return new THREE.CatmullRomCurve3(points);
}
const HandleCallback = () => {
- if (robot.isActive && robot.state == "running" && currentPhase == "init-to-rest") {
- logStatus(robot.modelUuid, "Callback triggered: rest");
- setArmBotActive(robot.modelUuid, false)
- setArmBotState(robot.modelUuid, "idle")
+ if (armBot.isActive && armBot.state == "running" && currentPhase == "init-to-rest") {
+ logStatus(armBot.modelUuid, "Callback triggered: rest");
+ setArmBotActive(armBot.modelUuid, false)
+ setArmBotState(armBot.modelUuid, "idle")
setCurrentPhase("rest");
setPath([])
}
- else if (robot.isActive && robot.state == "running" && currentPhase == "rest-to-start") {
- logStatus(robot.modelUuid, "Callback triggered: pick.");
- setArmBotActive(robot.modelUuid, false)
- setArmBotState(robot.modelUuid, "idle")
+ else if (armBot.isActive && armBot.state == "running" && currentPhase == "rest-to-start") {
+ logStatus(armBot.modelUuid, "Callback triggered: pick.");
+ setArmBotActive(armBot.modelUuid, false)
+ setArmBotState(armBot.modelUuid, "idle")
setCurrentPhase("picking");
setPath([])
}
- else if (robot.isActive && robot.state == "running" && currentPhase == "start-to-end") {
- logStatus(robot.modelUuid, "Callback triggered: drop.");
- setArmBotActive(robot.modelUuid, false)
- setArmBotState(robot.modelUuid, "idle")
+ else if (armBot.isActive && armBot.state == "running" && currentPhase == "start-to-end") {
+ logStatus(armBot.modelUuid, "Callback triggered: drop.");
+ setArmBotActive(armBot.modelUuid, false)
+ setArmBotState(armBot.modelUuid, "idle")
setCurrentPhase("dropping");
setPath([])
}
- else if (robot.isActive && robot.state == "running" && currentPhase == "end-to-rest") {
- logStatus(robot.modelUuid, "Callback triggered: rest, cycle completed.");
- setArmBotActive(robot.modelUuid, false)
- setArmBotState(robot.modelUuid, "idle")
+ else if (armBot.isActive && armBot.state == "running" && currentPhase == "end-to-rest") {
+ logStatus(armBot.modelUuid, "Callback triggered: rest, cycle completed.");
+ setArmBotActive(armBot.modelUuid, false)
+ setArmBotState(armBot.modelUuid, "idle")
setCurrentPhase("rest");
setPath([])
- removeCurrentAction(robot.modelUuid)
+ removeCurrentAction(armBot.modelUuid)
}
}
const logStatus = (id: string, status: string) => {
- // console.log(id + "," + status);
- console.log( status);
+ //
+
}
return (
<>
-
-
-
+
+
)
}
-export default RoboticArmInstance;
\ No newline at end of file
+export default RoboticArmInstance;
diff --git a/app/src/modules/simulation/roboticArm/instances/ikInstance/ikInstance.tsx b/app/src/modules/simulation/roboticArm/instances/ikInstance/ikInstance.tsx
index 645cbb5..e692ca5 100644
--- a/app/src/modules/simulation/roboticArm/instances/ikInstance/ikInstance.tsx
+++ b/app/src/modules/simulation/roboticArm/instances/ikInstance/ikInstance.tsx
@@ -3,20 +3,19 @@ import * as THREE from "three";
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { clone } from "three/examples/jsm/utils/SkeletonUtils";
-import { useFrame, useLoader, useThree } from "@react-three/fiber";
+import { useLoader, useThree } from "@react-three/fiber";
import { CCDIKSolver, CCDIKHelper, } from "three/examples/jsm/animation/CCDIKSolver";
+import { TransformControls } from '@react-three/drei';
+
type IKInstanceProps = {
modelUrl: string;
ikSolver: any;
setIkSolver: any
- robot: any;
- groupRef: React.RefObject;
- processes: any;
- setArmBotCurvePoints: any
+ armBot: any;
+ groupRef: any;
};
-function IKInstance({ modelUrl, setIkSolver, ikSolver, robot, groupRef, processes, setArmBotCurvePoints }: IKInstanceProps) {
-
- const { scene } = useThree();
+function IKInstance({ modelUrl, setIkSolver, ikSolver, armBot, groupRef }: IKInstanceProps) {
+ const { scene } = useThree()
const gltf = useLoader(GLTFLoader, modelUrl, (loader) => {
const draco = new DRACOLoader();
draco.setDecoderPath("https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/libs/draco/");
@@ -25,6 +24,8 @@ function IKInstance({ modelUrl, setIkSolver, ikSolver, robot, groupRef, processe
const cloned = useMemo(() => clone(gltf?.scene), [gltf]);
const targetBoneName = "Target";
const skinnedMeshName = "link_0";
+ const [selectedArm, setSelectedArm] = useState();
+
useEffect(() => {
if (!gltf) return;
const OOI: any = {};
@@ -66,15 +67,19 @@ function IKInstance({ modelUrl, setIkSolver, ikSolver, robot, groupRef, processe
setIkSolver(solver);
const helper = new CCDIKHelper(OOI.Skinned_Mesh, iks, 0.05)
+ // groupRef.current.add(helper);
- // scene.add(helper)
+ setSelectedArm(OOI.Target_Bone);
+ scene.add(helper)
}, [gltf]);
return (
<>
-
+ {
+ setSelectedArm(groupRef.current?.getObjectByName(targetBoneName))
+ }}>
+ {/* {selectedArm && } */}
)
}
diff --git a/app/src/modules/simulation/roboticArm/instances/roboticArmInstances.tsx b/app/src/modules/simulation/roboticArm/instances/roboticArmInstances.tsx
index 1089fa5..0acc1d9 100644
--- a/app/src/modules/simulation/roboticArm/instances/roboticArmInstances.tsx
+++ b/app/src/modules/simulation/roboticArm/instances/roboticArmInstances.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
import RoboticArmInstance from './armInstance/roboticArmInstance';
import { useArmBotStore } from '../../../../store/simulation/useArmBotStore';
@@ -8,9 +7,8 @@ function RoboticArmInstances() {
return (
<>
{armBots?.map((robot: ArmBotStatus) => (
-
+
))}
-
)
}
diff --git a/app/src/modules/simulation/roboticArm/roboticArm.tsx b/app/src/modules/simulation/roboticArm/roboticArm.tsx
index 69e6da0..2cb9ea6 100644
--- a/app/src/modules/simulation/roboticArm/roboticArm.tsx
+++ b/app/src/modules/simulation/roboticArm/roboticArm.tsx
@@ -2,18 +2,26 @@ import { useEffect } from "react";
import RoboticArmInstances from "./instances/roboticArmInstances";
import { useArmBotStore } from "../../../store/simulation/useArmBotStore";
import { useFloorItems } from "../../../store/store";
+import { useSelectedEventData, useSelectedEventSphere, useSelectedProduct } from "../../../store/simulation/useSimulationStore";
+import { useProductStore } from "../../../store/simulation/useProductStore";
+import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
+import ArmBotUI from "../ui/arm/armBotUI";
function RoboticArm() {
- const { armBots, addArmBot, removeArmBot } = useArmBotStore();
+ const { armBots, addArmBot, clearArmBots } = useArmBotStore();
+ const { products, getProductById } = useProductStore();
+ const { selectedProduct } = useSelectedProduct();
+ const { selectedEventSphere } = useSelectedEventSphere();
+ const { selectedEventData } = useSelectedEventData();
+ const { isPlaying } = usePlayButtonStore();
const { floorItems } = useFloorItems();
-
const armBotStatusSample: RoboticArmEventSchema[] = [
{
state: "idle",
- modelUuid: "3abf5d46-b59e-4e6b-9c02-a4634b64b82d",
+ modelUuid: "8790b4d5-fb6e-49e0-8161-04945fe3fdc4",
modelName: "ArmBot-X200",
- position: [0.20849215906958463, 0, 0.32079278127773675],
+ position: [4.317833205016363, 0, -3.2829924989068715],
rotation: [-1.3768690876192207e-15, 1.4883085074751308, 1.5407776675834467e-15],
type: "roboticArm",
speed: 1.5,
@@ -29,19 +37,9 @@ function RoboticArm() {
process: {
startPoint: [-1, 2, 1],
endPoint: [-2, 1, -1],
+ // startPoint: [-2, 1, -1],
+ // endPoint: [-1, 2, 1],
},
- // process: {
- // "startPoint": [
- // 0.37114476008711866,
- // 1.9999999999999998,
- // 1.8418816116721384
- // ],
- // "endPoint": [
- // -0.42197069459490777,
- // 1,
- // -3.159515927851809
- // ]
- // },
triggers: [
{
triggerUuid: "trigger-001",
@@ -95,7 +93,7 @@ function RoboticArm() {
position: [95.94347308985614, 0, 6.742905194869091],
rotation: [0, 0, 0],
type: "roboticArm",
- speed: 1.5,
+ speed: 0.1,
point: {
uuid: "point-123",
position: [0, 1.5, 0],
@@ -106,8 +104,10 @@ function RoboticArm() {
actionName: "Pick Component",
actionType: "pickAndPlace",
process: {
- startPoint: [2.52543010919071, 0, 8.433681161200905],
- endPoint: [95.3438373267953, 0, 9.0279187421610025],
+ // startPoint: [2.52543010919071, 0, 8.433681161200905],
+ // endPoint: [95.3438373267953, 0, 9.0279187421610025],
+ startPoint: null,
+ endPoint: null,
},
triggers: [
{
@@ -158,20 +158,32 @@ function RoboticArm() {
];
useEffect(() => {
-
- removeArmBot(armBotStatusSample[0].modelUuid);
- addArmBot('123', armBotStatusSample[0]);
- // addArmBot('123', armBotStatusSample[1]);
- // addCurrentAction('armbot-xyz-001', 'action-001');
- }, []);
+ if (selectedProduct.productId) {
+ const product = getProductById(selectedProduct.productId);
+ if (product) {
+ clearArmBots();
+ product.eventDatas.forEach(events => {
+ if (events.type === 'roboticArm') {
+ addArmBot(selectedProduct.productId, events);
+ }
+ });
+ }
+ }
+ }, [selectedProduct, products]);
useEffect(() => {
-
- }, [armBots]);
+ }, [armBots])
+
+ useEffect(() => {
+
+ }, [selectedEventData, selectedEventSphere, isPlaying]);
return (
<>
+ {selectedEventSphere && selectedEventData?.data.type === "roboticArm" &&
+ < ArmBotUI />
+ }
);
}
diff --git a/app/src/modules/simulation/simulation.tsx b/app/src/modules/simulation/simulation.tsx
index 5ca0ec5..efacd53 100644
--- a/app/src/modules/simulation/simulation.tsx
+++ b/app/src/modules/simulation/simulation.tsx
@@ -23,20 +23,20 @@ function Simulation() {
}, [events])
useEffect(() => {
- // console.log('products: ', products);
+ console.log('products: ', products);
}, [products])
return (
<>
+
+
{activeModule === 'simulation' &&
<>
-
-
diff --git a/app/src/modules/simulation/triggers/connector/triggerConnector.tsx b/app/src/modules/simulation/triggers/connector/triggerConnector.tsx
index efefa0c..f9fc30f 100644
--- a/app/src/modules/simulation/triggers/connector/triggerConnector.tsx
+++ b/app/src/modules/simulation/triggers/connector/triggerConnector.tsx
@@ -1,5 +1,5 @@
import { useEffect, useRef, useState } from "react";
-import { useThree } from "@react-three/fiber";
+import { useFrame, useThree } from "@react-three/fiber";
import * as THREE from "three";
import { useSubModuleStore } from "../../../../store/useModuleStore";
import { useSelectedAsset } from "../../../../store/simulation/useSimulationStore";
@@ -7,21 +7,28 @@ 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";
+import { QuadraticBezierLine } from "@react-three/drei";
+import { upsertProductOrEventApi } from "../../../../services/simulation/UpsertProductOrEventApi";
+import { useDeleteTool } from "../../../../store/store";
interface ConnectionLine {
id: string;
- start: THREE.Vector3;
- end: THREE.Vector3;
- mid: THREE.Vector3;
+ startPointUuid: string;
+ endPointUuid: string;
trigger: TriggerSchema;
}
function TriggerConnector() {
- const { gl, raycaster, scene } = useThree();
+ const { gl, raycaster, scene, pointer, camera } = useThree();
const { subModule } = useSubModuleStore();
- const { products, getPointByUuid, getIsEventInProduct, getActionByUuid, addTrigger, addEvent, getEventByModelUuid } = useProductStore();
+ const { products, getPointByUuid, getIsEventInProduct, getActionByUuid, addTrigger, removeTrigger, addEvent, getEventByModelUuid, getProductById } = useProductStore();
const { selectedAsset, clearSelectedAsset } = useSelectedAsset();
const { selectedProduct } = useSelectedProduct();
+ const [hoveredLineKey, setHoveredLineKey] = useState(null);
+ const groupRefs = useRef>({});
+ const [helperlineColor, setHelperLineColor] = useState("red");
+ const [currentLine, setCurrentLine] = useState<{ start: THREE.Vector3; end: THREE.Vector3; mid: THREE.Vector3; } | null>(null);
+ const { deleteTool } = useDeleteTool();
const [firstSelectedPoint, setFirstSelectedPoint] = useState<{
productId: string;
@@ -32,52 +39,99 @@ function TriggerConnector() {
const [connections, setConnections] = useState([]);
+ const email = localStorage.getItem('email')
+ const organization = (email!.split("@")[1]).split(".")[0];
+
+ const updateBackend = (
+ productName: string,
+ productId: string,
+ organization: string,
+ eventData: EventsSchema
+ ) => {
+ upsertProductOrEventApi({
+ productName: productName,
+ productId: productId,
+ organization: organization,
+ eventDatas: eventData
+ })
+ }
+
useEffect(() => {
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
- );
+ const product = getProductById(selectedProduct.productId);
+ if (!product || products.length === 0) return;
- 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
- });
- }
- }
+ product.eventDatas.forEach(event => {
+ // Handle Conveyor points
+ if (event.type === "transfer" && 'points' in event) {
+ event.points.forEach(point => {
+ if (point.action?.triggers) {
+ point.action.triggers.forEach(trigger => {
+ if (trigger.triggeredAsset && trigger.triggeredAsset.triggeredPoint) {
+ newConnections.push({
+ id: `${point.uuid}-${trigger.triggeredAsset.triggeredPoint.pointUuid}-${trigger.triggerUuid}`,
+ startPointUuid: point.uuid,
+ endPointUuid: trigger.triggeredAsset.triggeredPoint.pointUuid,
+ trigger
+ });
+ }
+ });
+ }
+ });
+ }
+ // Handle Vehicle point
+ else if (event.type === "vehicle" && 'point' in event) {
+ const point = event.point;
+ if (point.action?.triggers) {
+ point.action.triggers.forEach(trigger => {
+ if (trigger.triggeredAsset && trigger.triggeredAsset.triggeredPoint) {
+ newConnections.push({
+ id: `${point.uuid}-${trigger.triggeredAsset.triggeredPoint.pointUuid}-${trigger.triggerUuid}`,
+ startPointUuid: point.uuid,
+ endPointUuid: trigger.triggeredAsset.triggeredPoint.pointUuid,
+ trigger
});
}
});
}
- });
+ }
+ // Handle Robotic Arm points
+ else if (event.type === "roboticArm" && 'point' in event) {
+ const point = event.point;
+ point.actions?.forEach(action => {
+ action.triggers?.forEach(trigger => {
+ if (trigger.triggeredAsset && trigger.triggeredAsset.triggeredPoint) {
+ newConnections.push({
+ id: `${point.uuid}-${trigger.triggeredAsset.triggeredPoint.pointUuid}-${trigger.triggerUuid}`,
+ startPointUuid: point.uuid,
+ endPointUuid: trigger.triggeredAsset.triggeredPoint.pointUuid,
+ trigger
+ });
+ }
+ });
+ });
+ }
+ // Handle Machine point
+ else if (event.type === "machine" && 'point' in event) {
+ const point = event.point;
+ if (point.action?.triggers) {
+ point.action.triggers.forEach(trigger => {
+ if (trigger.triggeredAsset && trigger.triggeredAsset.triggeredPoint) {
+ newConnections.push({
+ id: `${point.uuid}-${trigger.triggeredAsset.triggeredPoint.pointUuid}-${trigger.triggerUuid}`,
+ startPointUuid: point.uuid,
+ endPointUuid: trigger.triggeredAsset.triggeredPoint.pointUuid,
+ trigger
+ });
+ }
+ });
+ }
+ }
});
setConnections(newConnections);
- }, [products]);
-
- useEffect(() => {
- console.log('connections: ', connections);
- }, connections)
+ }, [products, selectedProduct.productId]);
useEffect(() => {
const canvasElement = gl.domElement;
@@ -111,15 +165,31 @@ function TriggerConnector() {
if (drag) return;
evt.preventDefault();
- const intersects = raycaster.intersectObjects(scene.children, true);
- if (intersects.length === 0) return;
+ const intersects = raycaster
+ .intersectObjects(scene.children, true)
+ .filter(
+ (intersect) =>
+ intersect.object.name === ('Event-Sphere')
+ );
+ if (intersects.length === 0) {
+ setFirstSelectedPoint(null);
+ return;
+ };
const currentObject = intersects[0].object;
- if (!currentObject || currentObject.name !== 'Event-Sphere') return;
+ if (!currentObject || currentObject.name !== 'Event-Sphere') {
+ setFirstSelectedPoint(null);
+ return;
+ };
const modelUuid = currentObject.userData.modelUuid;
const pointUuid = currentObject.userData.pointUuid;
+ if (firstSelectedPoint && firstSelectedPoint.pointUuid === pointUuid) {
+ setFirstSelectedPoint(null);
+ return;
+ }
+
if (selectedProduct && getIsEventInProduct(selectedProduct.productId, modelUuid)) {
const point = getPointByUuid(
@@ -128,7 +198,12 @@ function TriggerConnector() {
pointUuid
);
- if (!point) return;
+ const event = getEventByModelUuid(selectedProduct.productId, modelUuid);
+
+ if (!point || !event) {
+ setFirstSelectedPoint(null);
+ return;
+ };
let actionUuid: string | undefined;
if ('action' in point && point.action) {
@@ -152,12 +227,12 @@ function TriggerConnector() {
delay: 0,
triggeredAsset: {
triggeredModel: {
- modelName: currentObject.parent?.parent?.name || 'Unknown',
+ modelName: event.modelName || 'Unknown',
modelUuid: modelUuid
},
triggeredPoint: {
- pointName: currentObject.name,
- pointUuid: pointUuid
+ pointName: 'Point',
+ pointUuid: point.uuid
},
triggeredAction: actionUuid ? {
actionName: getActionByUuid(selectedProduct.productId, actionUuid)?.actionName || 'Action',
@@ -167,7 +242,16 @@ function TriggerConnector() {
};
if (firstSelectedPoint.actionUuid) {
- addTrigger(firstSelectedPoint.actionUuid, trigger);
+ const event = addTrigger(selectedProduct.productId, firstSelectedPoint.actionUuid, trigger);
+
+ if (event) {
+ updateBackend(
+ selectedProduct.productName,
+ selectedProduct.productId,
+ organization,
+ event
+ );
+ }
}
setFirstSelectedPoint(null);
}
@@ -184,7 +268,12 @@ function TriggerConnector() {
pointUuid
);
- if (!point) return;
+ const event = getEventByModelUuid(selectedProduct.productId, modelUuid);
+
+ if (!point || !event) {
+ setFirstSelectedPoint(null);
+ return;
+ };
let actionUuid: string | undefined;
if ('action' in point && point.action) {
@@ -200,12 +289,12 @@ function TriggerConnector() {
delay: 0,
triggeredAsset: {
triggeredModel: {
- modelName: currentObject.parent?.parent?.name || 'Unknown',
+ modelName: event.modelName || 'Unknown',
modelUuid: modelUuid
},
triggeredPoint: {
- pointName: currentObject.name,
- pointUuid: pointUuid
+ pointName: 'Point',
+ pointUuid: point.uuid
},
triggeredAction: actionUuid ? {
actionName: getActionByUuid(selectedProduct.productId, actionUuid)?.actionName || 'Action',
@@ -215,13 +304,24 @@ function TriggerConnector() {
};
if (firstSelectedPoint.actionUuid) {
- addTrigger(firstSelectedPoint.actionUuid, trigger);
+ const event = addTrigger(selectedProduct.productId, firstSelectedPoint.actionUuid, trigger);
+
+ if (event) {
+ updateBackend(
+ selectedProduct.productName,
+ selectedProduct.productId,
+ organization,
+ event
+ );
+ }
}
setFirstSelectedPoint(null);
+ } else if (firstSelectedPoint) {
+ setFirstSelectedPoint(null);
}
};
- if (subModule === 'simulations') {
+ if (subModule === 'simulations' && !deleteTool) {
canvasElement.addEventListener("mousedown", onMouseDown);
canvasElement.addEventListener("mouseup", onMouseUp);
canvasElement.addEventListener("mousemove", onMouseMove);
@@ -235,11 +335,149 @@ function TriggerConnector() {
canvasElement.removeEventListener('contextmenu', handleRightClick);
};
- }, [gl, subModule, selectedProduct, firstSelectedPoint]);
+ }, [gl, subModule, selectedProduct, firstSelectedPoint, deleteTool]);
+
+
+ useFrame(() => {
+ if (firstSelectedPoint) {
+ raycaster.setFromCamera(pointer, camera);
+ const intersects = raycaster.intersectObjects(scene.children, true).filter(
+ (intersect) =>
+ !intersect.object.name.includes("Roof") &&
+ !intersect.object.name.includes("agv-collider") &&
+ !intersect.object.name.includes("MeasurementReference") &&
+ !intersect.object.parent?.name.includes("Zone") &&
+ !(intersect.object.type === "GridHelper") &&
+ !(intersect.object.type === "Line2")
+ );
+
+ let point: THREE.Vector3 | null = null;
+
+ if (intersects.length > 0) {
+ point = intersects[0].point;
+ if (point.y < 0.05) {
+ point = new THREE.Vector3(point.x, 0.05, point.z);
+ }
+ }
+
+ const sphereIntersects = raycaster.intersectObjects(scene.children, true).filter((intersect) => intersect.object.name === ('Event-Sphere'));
+
+ if (sphereIntersects.length > 0 && sphereIntersects[0].object.uuid === firstSelectedPoint.pointUuid) {
+ setHelperLineColor('red');
+ setCurrentLine(null);
+ return;
+ }
+
+ const startPoint = getWorldPositionFromScene(firstSelectedPoint.pointUuid);
+
+ if (point && startPoint) {
+ if (sphereIntersects.length > 0) {
+ point = sphereIntersects[0].object.getWorldPosition(new THREE.Vector3());
+ }
+ const distance = startPoint.distanceTo(point);
+ const heightFactor = Math.max(0.5, distance * 0.2);
+ const midPoint = new THREE.Vector3(
+ (startPoint.x + point.x) / 2,
+ Math.max(startPoint.y, point.y) + heightFactor,
+ (startPoint.z + point.z) / 2
+ );
+
+ const endPoint = point;
+
+ setCurrentLine({
+ start: startPoint,
+ mid: midPoint,
+ end: endPoint,
+ });
+
+ setHelperLineColor(sphereIntersects.length > 0 ? "#6cf542" : "red");
+ } else {
+ setCurrentLine(null);
+ }
+ } else {
+ setCurrentLine(null);
+ }
+
+ })
+
+ const getWorldPositionFromScene = (pointUuid: string): THREE.Vector3 | null => {
+ const pointObj = scene.getObjectByProperty("uuid", pointUuid);
+ if (!pointObj) return null;
+
+ const worldPosition = new THREE.Vector3();
+ pointObj.getWorldPosition(worldPosition);
+ return worldPosition;
+ };
+
+ const removeConnection = (connection: ConnectionLine) => {
+ if (connection.trigger.triggerUuid) {
+ const event = removeTrigger(selectedProduct.productId, connection.trigger.triggerUuid);
+ if (event) {
+ updateBackend(
+ selectedProduct.productName,
+ selectedProduct.productId,
+ organization,
+ event
+ );
+ }
+ }
+ };
return (
- <>
-
+
+ {connections.map((connection) => {
+ const startPoint = getWorldPositionFromScene(connection.startPointUuid);
+ const endPoint = getWorldPositionFromScene(connection.endPointUuid);
+
+ if (!startPoint || !endPoint) return null;
+
+ const distance = startPoint.distanceTo(endPoint);
+ const heightFactor = Math.max(0.5, distance * 0.2);
+ const midPoint = new THREE.Vector3(
+ (startPoint.x + endPoint.x) / 2,
+ Math.max(startPoint.y, endPoint.y) + heightFactor,
+ (startPoint.z + endPoint.z) / 2
+ );
+
+ return (
+ (groupRefs.current[connection.id] = el!)}
+ start={startPoint.toArray()}
+ end={endPoint.toArray()}
+ mid={midPoint.toArray()}
+ color={deleteTool && hoveredLineKey === connection.id ? "red" : "#42a5f5"}
+ lineWidth={4}
+ dashed={deleteTool && hoveredLineKey === connection.id ? false : true}
+ dashSize={0.75}
+ dashScale={20}
+ onPointerOver={() => setHoveredLineKey(connection.id)}
+ onPointerOut={() => setHoveredLineKey(null)}
+ onClick={() => {
+ if (deleteTool) {
+ setHoveredLineKey(null);
+ setCurrentLine(null);
+ removeConnection(connection);
+ }
+ }}
+ userData={connection.trigger}
+ />
+ );
+ })}
+
+ {currentLine && (
+
+ )}
+
);
}
diff --git a/app/src/modules/simulation/ui/arm/PickDropPoints.tsx b/app/src/modules/simulation/ui/arm/PickDropPoints.tsx
index 4544a46..c44eee8 100644
--- a/app/src/modules/simulation/ui/arm/PickDropPoints.tsx
+++ b/app/src/modules/simulation/ui/arm/PickDropPoints.tsx
@@ -9,7 +9,7 @@ interface PickDropProps {
actionType: "pick" | "drop";
actionUuid: string;
gltfScene: THREE.Group;
- selectedPoint: THREE.Mesh | null;
+
handlePointerDown: (e: ThreeEvent) => void;
isSelected: boolean;
}
@@ -21,12 +21,10 @@ const PickDropPoints: React.FC = ({
actionType,
actionUuid,
gltfScene,
- selectedPoint,
handlePointerDown,
isSelected,
}) => {
const groupRef = useRef(null);
-
return (
= ({
: new THREE.Vector3(0, 0, 0)
}
onPointerDown={(e) => {
- e.stopPropagation(); // Important to prevent event bubbling
+
+ e.stopPropagation(); // Prevent event bubbling
if (!isSelected) return;
handlePointerDown(e);
}}
userData={{ modelUuid, pointUuid, actionType, actionUuid }}
>
{
+ const cloned = gltfScene.clone();
+ cloned.traverse((child: any) => {
+ if (child.isMesh) {
+ child.userData = { modelUuid, pointUuid, actionType, actionUuid };
+ }
+ });
+ return cloned;
+ })()}
+ position={[0, 0, 0]}
scale={[0.5, 0.5, 0.5]}
/>
diff --git a/app/src/modules/simulation/ui/arm/armBotUI.tsx b/app/src/modules/simulation/ui/arm/armBotUI.tsx
new file mode 100644
index 0000000..8a2d18f
--- /dev/null
+++ b/app/src/modules/simulation/ui/arm/armBotUI.tsx
@@ -0,0 +1,190 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { useSelectedAction, useSelectedEventData, useSelectedEventSphere, useSelectedProduct } from '../../../../store/simulation/useSimulationStore';
+import { useArmBotStore } from '../../../../store/simulation/useArmBotStore';
+import { useGLTF } from '@react-three/drei';
+import { useThree } from '@react-three/fiber';
+import { useProductStore } from '../../../../store/simulation/useProductStore';
+import PickDropPoints from './PickDropPoints';
+import useDraggableGLTF from './useDraggableGLTF';
+import * as THREE from 'three';
+
+import armPick from "../../../../assets/gltf-glb/arm_ui_pick.glb";
+import armDrop from "../../../../assets/gltf-glb/arm_ui_drop.glb";
+import useModuleStore from '../../../../store/useModuleStore';
+
+type Positions = {
+ pick: [number, number, number];
+ drop: [number, number, number];
+ default: [number, number, number];
+};
+
+const ArmBotUI = () => {
+ const { getEventByModelUuid } = useProductStore();
+ const { selectedEventData } = useSelectedEventData();
+ const { selectedProduct } = useSelectedProduct();
+ const { armBots, updateStartPoint, updateEndPoint } = useArmBotStore();
+ const { scene } = useThree();
+ const { selectedAction } = useSelectedAction();
+
+ const armUiPick = useGLTF(armPick) as any;
+ const armUiDrop = useGLTF(armDrop) as any;
+
+ const [startPosition, setStartPosition] = useState<[number, number, number]>([0, 0, 0]);
+ const [endPosition, setEndPosition] = useState<[number, number, number]>([0, 0, 0]);
+ const [selectedArmBotData, setSelectedArmBotData] = useState(null);
+
+ // Fetch and setup selected ArmBot data
+ useEffect(() => {
+ if (selectedEventData?.data.type === "roboticArm") {
+ const selectedArmBot = getEventByModelUuid(selectedProduct.productId, selectedEventData.data.modelUuid);
+
+ if (selectedArmBot?.type === "roboticArm") {
+ setSelectedArmBotData(selectedArmBot);
+ const defaultPositions = getDefaultPositions(selectedArmBot.modelUuid);
+ const matchingAction = armBots?.flatMap((robot: ArmBotStatus) => robot.point.actions)
+ .find((action) => action.actionUuid === selectedAction.actionId);
+ if (matchingAction) {
+ const startPoint = matchingAction.process.startPoint;
+ const pickPosition = (!startPoint || (Array.isArray(startPoint) && startPoint.every(v => v === 0)))
+ ? defaultPositions.pick
+ : startPoint;
+
+ const endPoint = matchingAction.process.endPoint;
+ const dropPosition = (!endPoint || (Array.isArray(endPoint) && endPoint.every(v => v === 0)))
+ ? defaultPositions.drop
+ : endPoint;
+
+ setStartPosition(pickPosition);
+ setEndPosition(dropPosition);
+ }
+ }
+ }
+ }, [selectedEventData, selectedProduct, getEventByModelUuid, selectedAction]);
+
+
+ function getDefaultPositions(modelUuid: string): Positions {
+ const modelData = getEventByModelUuid(selectedProduct.productId, modelUuid);
+
+ if (modelData?.type === "roboticArm") {
+ const baseX = modelData.point.position?.[0] || 0;
+ const baseY = modelData.point.position?.[1] || 0;;
+ const baseZ = modelData.point.position?.[2] || 0;
+ return {
+ pick: [baseX, baseY, baseZ + 0.5],
+ drop: [baseX, baseY, baseZ - 0.5],
+ default: [baseX, baseY, baseZ],
+ };
+ }
+
+ return {
+ pick: [0.5, 1.5, 0],
+ drop: [-0.5, 1.5, 0],
+ default: [0, 1.5, 0],
+ };
+ }
+
+ function getLocalPosition(parentUuid: string, worldPosArray: [number, number, number] | null): [number, number, number] | null {
+ if (worldPosArray) {
+ const worldPos = new THREE.Vector3(...worldPosArray);
+ const parentObject = scene.getObjectByProperty('uuid', parentUuid);
+
+ if (parentObject) {
+ const localPos = worldPos.clone();
+ parentObject.worldToLocal(localPos);
+ return [localPos.x, localPos.y, localPos.z];
+ }
+ }
+ return null;
+ }
+
+ const updatePointToState = (obj: THREE.Object3D) => {
+ const { modelUuid, actionType, actionUuid } = obj.userData;
+ const newPosition = new THREE.Vector3();
+ obj.getWorldPosition(newPosition);
+ const worldPositionArray = newPosition.toArray() as [number, number, number];
+
+ if (selectedEventData?.data.type === "roboticArm") {
+ const selectedArmBot = getEventByModelUuid(selectedProduct.productId, selectedEventData.data.modelUuid);
+
+ const armBot = selectedArmBot?.modelUuid === modelUuid ? selectedArmBot : null;
+ if (!armBot) return;
+
+ if (armBot.type === "roboticArm") {
+ armBot?.point?.actions?.map((action: any) => {
+ if (action.actionUuid === actionUuid) {
+ const updatedProcess = { ...action.process };
+
+ if (actionType === "pick") {
+ updatedProcess.startPoint = getLocalPosition(modelUuid, worldPositionArray);
+ setStartPosition(updatedProcess.startPoint)
+ updateStartPoint(modelUuid, actionUuid, updatedProcess.startPoint);
+ } else if (actionType === "drop") {
+ updatedProcess.endPoint = getLocalPosition(modelUuid, worldPositionArray);
+ setEndPosition(updatedProcess.endPoint)
+ updateEndPoint(modelUuid, actionUuid, updatedProcess.endPoint);
+ }
+ return {
+ ...action,
+ process: updatedProcess,
+ };
+ }
+ return action;
+ });
+
+ }
+ }
+ }
+
+ useEffect(() => {
+
+
+ }, [armBots])
+
+ const { handlePointerDown } = useDraggableGLTF(updatePointToState);
+
+ if (!selectedArmBotData || !Array.isArray(selectedArmBotData.point?.actions)) {
+ return null; // avoid rendering if no data yet
+ }
+ return (
+ <>
+ {selectedArmBotData.point.actions.map((action: any) => {
+ if (action.actionUuid === selectedAction.actionId) {
+ return (
+
+
+
+
+
+
+ );
+ } else {
+ return null; // important! must return something
+ }
+ })}
+
+ );
+
+};
+
+export default ArmBotUI;
diff --git a/app/src/modules/simulation/ui/arm/useDraggableGLTF.ts b/app/src/modules/simulation/ui/arm/useDraggableGLTF.ts
index b7e9272..e450bfd 100644
--- a/app/src/modules/simulation/ui/arm/useDraggableGLTF.ts
+++ b/app/src/modules/simulation/ui/arm/useDraggableGLTF.ts
@@ -1,11 +1,11 @@
-import { useRef } from "react";
+import { useRef, useState } 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 { camera, gl, controls } = useThree();
const activeObjRef = useRef(null);
const planeRef = useRef(
new THREE.Plane(new THREE.Vector3(0, 1, 0), 0)
@@ -15,6 +15,7 @@ export default function useDraggableGLTF(onUpdate: OnUpdateCallback) {
const raycaster = new THREE.Raycaster();
const pointer = new THREE.Vector2();
+ const [objectWorldPos, setObjectWorldPos] = useState(new THREE.Vector3());
const handlePointerDown = (e: ThreeEvent) => {
e.stopPropagation();
@@ -33,10 +34,10 @@ export default function useDraggableGLTF(onUpdate: OnUpdateCallback) {
activeObjRef.current = obj;
initialPositionRef.current.copy(obj.position);
+
// Get world position
- const objectWorldPos = new THREE.Vector3();
- obj.getWorldPosition(objectWorldPos);
+ setObjectWorldPos(obj.getWorldPosition(objectWorldPos));
// Set plane at the object's Y level
planeRef.current.set(new THREE.Vector3(0, 1, 0), -objectWorldPos.y);
@@ -61,52 +62,56 @@ export default function useDraggableGLTF(onUpdate: OnUpdateCallback) {
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);
+ 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();
-
+
+ // OnPointerDown
+ initialPositionRef.current.copy(objectWorldPos);
+
+ // OnPointerMove
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
- );
+ const { x: initialX, y: initialY } = initialPositionRef.current;
+ const { x: objectX, z: objectZ } = objectWorldPos;
+
+ const deltaX = intersection.x - initialX;
+
+ targetPosition.set(objectX, initialY + deltaX, objectZ);
} 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);
};
@@ -126,6 +131,3 @@ export default function useDraggableGLTF(onUpdate: OnUpdateCallback) {
return { handlePointerDown };
}
-
-
-
diff --git a/app/src/modules/simulation/ui/vehicle/vehicleUI.tsx b/app/src/modules/simulation/ui/vehicle/vehicleUI.tsx
index 5dec724..2a124cd 100644
--- a/app/src/modules/simulation/ui/vehicle/vehicleUI.tsx
+++ b/app/src/modules/simulation/ui/vehicle/vehicleUI.tsx
@@ -1,12 +1,16 @@
import React, { useEffect, useRef, useState } from 'react';
+import * as Types from "../../../../types/world/worldTypes";
import startPoint from "../../../../assets/gltf-glb/arrow_green.glb";
-import startEnd from "../../../../assets/gltf-glb/arrow_red.glb";
import * as THREE from "three";
+import startEnd from "../../../../assets/gltf-glb/arrow_red.glb";
import { useGLTF } from '@react-three/drei';
import { useFrame, useThree } from '@react-three/fiber';
-import { useSelectedEventSphere } from '../../../../store/simulation/useSimulationStore';
+import { useSelectedEventSphere, useIsDragging, useIsRotating } from '../../../../store/simulation/useSimulationStore';
import { useVehicleStore } from '../../../../store/simulation/useVehicleStore';
-import * as Types from "../../../../types/world/worldTypes";
+import { useProductStore } from '../../../../store/simulation/useProductStore';
+import { useSelectedProduct } from '../../../../store/simulation/useSimulationStore';
+import { upsertProductOrEventApi } from '../../../../services/simulation/UpsertProductOrEventApi';
+
const VehicleUI = () => {
const { scene: startScene } = useGLTF(startPoint) as any;
const { scene: endScene } = useGLTF(startEnd) as any;
@@ -14,67 +18,60 @@ const VehicleUI = () => {
const endMarker = useRef(null);
const prevMousePos = useRef({ x: 0, y: 0 });
const { selectedEventSphere } = useSelectedEventSphere();
- const { vehicles, updateVehicle } = useVehicleStore();
+ const { selectedProduct } = useSelectedProduct();
+ const { getVehicleById } = useVehicleStore();
+ const { updateEvent } = useProductStore();
const [startPosition, setStartPosition] = useState<[number, number, number]>([0, 0, 0]);
const [endPosition, setEndPosition] = useState<[number, number, number]>([0, 0, 0]);
const [startRotation, setStartRotation] = useState<[number, number, number]>([0, 0, 0]);
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 { isDragging, setIsDragging } = useIsDragging();
+ const { isRotating, setIsRotating } = useIsRotating();
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;
+ const email = localStorage.getItem('email')
+ const organization = (email!.split("@")[1]).split(".")[0];
+
+ const updateBackend = (
+ productName: string,
+ productId: string,
+ organization: string,
+ eventData: EventsSchema
+ ) => {
+ upsertProductOrEventApi({
+ productName: productName,
+ productId: productId,
+ organization: organization,
+ eventDatas: eventData
+ })
+ }
+
useEffect(() => {
if (!selectedEventSphere) return;
- const selectedVehicle = vehicles.find(
- (vehicle: any) => vehicle.modelUuid === selectedEventSphere.userData.modelUuid
- );
+ const selectedVehicle = getVehicleById(selectedEventSphere.userData.modelUuid);
if (selectedVehicle?.point?.action) {
const { pickUpPoint, unLoadPoint } = selectedVehicle.point.action;
if (pickUpPoint) {
- const pickupPosition = new THREE.Vector3(
- pickUpPoint.position.x,
- pickUpPoint.position.y,
- pickUpPoint.position.z
- );
- const pickupRotation = new THREE.Vector3(
- pickUpPoint.rotation.x,
- pickUpPoint.rotation.y,
- pickUpPoint.rotation.z
- );
- pickupPosition.y = 0;
- setStartPosition([pickupPosition.x, 0, pickupPosition.z]);
- setStartRotation([pickupRotation.x, pickupRotation.y, pickupRotation.z]);
+ setStartPosition([pickUpPoint.position.x, 0, pickUpPoint.position.z]);
+ setStartRotation([pickUpPoint.rotation.x, pickUpPoint.rotation.y, pickUpPoint.rotation.z]);
} else {
const defaultLocal = new THREE.Vector3(0, 0, 1.5);
const defaultWorld = selectedEventSphere.localToWorld(defaultLocal);
- defaultWorld.y = 0;
setStartPosition([defaultWorld.x, 0, defaultWorld.z]);
setStartRotation([0, 0, 0]);
}
if (unLoadPoint) {
- const unLoadPosition = new THREE.Vector3(
- unLoadPoint.position.x,
- unLoadPoint.position.y,
- unLoadPoint.position.z
- );
- const unLoadRotation = new THREE.Vector3(
- unLoadPoint.rotation.x,
- unLoadPoint.rotation.y,
- unLoadPoint.position.z
- );
- unLoadPosition.y = 0; // Force y to 0
- setEndPosition([unLoadPosition.x, 0, unLoadPosition.z]);
- setEndRotation([unLoadRotation.x, unLoadRotation.y, unLoadRotation.z]);
+ setEndPosition([unLoadPoint.position.x, 0, unLoadPoint.position.z]);
+ setEndRotation([unLoadPoint.rotation.x, unLoadPoint.rotation.y, unLoadPoint.rotation.z]);
} else {
const defaultLocal = new THREE.Vector3(0, 0, -1.5);
const defaultWorld = selectedEventSphere.localToWorld(defaultLocal);
- defaultWorld.y = 0; // Force y to 0
setEndPosition([defaultWorld.x, 0, defaultWorld.z]);
setEndRotation([0, 0, 0]);
}
@@ -87,7 +84,6 @@ const VehicleUI = () => {
const intersects = raycaster.ray.intersectPlane(plane.current, intersectPoint);
if (intersects) {
- intersectPoint.y = 0; // Force y to 0
if (isDragging === "start") {
setStartPosition([intersectPoint.x, 0, intersectPoint.z]);
}
@@ -108,12 +104,12 @@ const VehicleUI = () => {
if (marker) {
const rotationSpeed = 10;
- marker.rotation.y += deltaX * rotationSpeed;
if (isRotating === 'start') {
- setStartRotation([marker.rotation.x, marker.rotation.y, marker.rotation.z])
+ const y = startRotation[1] + deltaX * rotationSpeed;
+ setStartRotation([0, y, 0]);
} else {
-
- setEndRotation([marker.rotation.x, marker.rotation.y, marker.rotation.z])
+ const y = endRotation[1] + deltaX * rotationSpeed;
+ setEndRotation([0, y, 0]);
}
}
});
@@ -142,43 +138,34 @@ const VehicleUI = () => {
setIsRotating(null);
if (selectedEventSphere?.userData.modelUuid) {
- const updatedVehicle = vehicles.find(
- (vehicle) => vehicle.modelUuid === selectedEventSphere.userData.modelUuid
- );
+ const updatedVehicle = getVehicleById(selectedEventSphere.userData.modelUuid);
if (updatedVehicle) {
- updateVehicle(selectedEventSphere.userData.modelUuid, {
+ const event = updateEvent(selectedProduct.productId, selectedEventSphere.userData.modelUuid, {
point: {
...updatedVehicle.point,
action: {
...updatedVehicle.point?.action,
pickUpPoint: {
- position: {
- x: startPosition[0],
- y: startPosition[1],
- z: startPosition[2],
- },
- rotation: {
- x: startRotation[0],
- y: startRotation[1],
- z: startRotation[2],
- },
+ position: { x: startPosition[0], y: startPosition[1], z: startPosition[2], },
+ rotation: { x: 0, y: startRotation[1], z: 0, },
},
unLoadPoint: {
- position: {
- x: endPosition[0],
- y: endPosition[1],
- z: endPosition[2],
- },
- rotation: {
- x: endRotation[0],
- y: endRotation[1],
- z: endRotation[2],
- },
+ position: { x: endPosition[0], y: endPosition[1], z: endPosition[2], },
+ rotation: { x: 0, y: endRotation[1], z: 0, },
},
},
},
- });
+ })
+
+ if (event) {
+ updateBackend(
+ selectedProduct.productName,
+ selectedProduct.productId,
+ organization,
+ event
+ );
+ }
}
}
};
@@ -208,6 +195,7 @@ const VehicleUI = () => {
object={startScene}
ref={startMarker}
position={startPosition}
+ rotation={startRotation}
onPointerDown={(e: any) => {
e.stopPropagation();
handlePointerDown(e, "start", "start");
@@ -224,6 +212,7 @@ const VehicleUI = () => {
object={endScene}
ref={endMarker}
position={endPosition}
+ rotation={endRotation}
onPointerDown={(e: any) => {
e.stopPropagation();
handlePointerDown(e, "end", "end");
diff --git a/app/src/modules/simulation/vehicle/instances/animator/vehicleAnimator.tsx b/app/src/modules/simulation/vehicle/instances/animator/vehicleAnimator.tsx
index 2f0b235..aeadc4b 100644
--- a/app/src/modules/simulation/vehicle/instances/animator/vehicleAnimator.tsx
+++ b/app/src/modules/simulation/vehicle/instances/animator/vehicleAnimator.tsx
@@ -11,7 +11,7 @@ interface VehicleAnimatorProps {
reset: () => void;
currentPhase: string;
agvUuid: number;
- agvDetail: any;
+ agvDetail: VehicleStatus;
}
function VehicleAnimator({ path, handleCallBack, currentPhase, agvUuid, agvDetail, reset }: VehicleAnimatorProps) {
@@ -25,14 +25,14 @@ function VehicleAnimator({ path, handleCallBack, currentPhase, agvUuid, agvDetai
const completedRef = useRef(false);
const isPausedRef = useRef(false);
const pauseTimeRef = useRef(null);
+ const [progress, setProgress] = useState(0);
const [restRotation, setRestingRotation] = useState(true);
const [currentPath, setCurrentPath] = useState<[number, number, number][]>([]);
- const [progress, setProgress] = useState(0);
const { scene } = useThree();
let startTime: 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 };
+ let objectRotation = (agvDetail.point?.action?.pickUpPoint?.rotation || { x: 0, y: 0, z: 0 }) as { x: number; y: number; z: number } | undefined;
useEffect(() => {
@@ -66,11 +66,12 @@ function VehicleAnimator({ path, handleCallBack, currentPhase, agvUuid, agvDetai
setReset(false);
setRestingRotation(true);
decrementVehicleLoad(agvDetail.modelUuid, 0);
+ isPausedRef.current = false;
+ pauseTimeRef.current = 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);
+ object.rotation.set(agvDetail.rotation[0], agvDetail.rotation[1], agvDetail.rotation[2]);
}
}
}, [isReset, isPlaying])
@@ -132,7 +133,7 @@ function VehicleAnimator({ path, handleCallBack, currentPhase, agvUuid, agvDetai
}
if (progressRef.current >= totalDistance) {
- if (restRotation) {
+ if (restRotation && objectRotation) {
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);
diff --git a/app/src/modules/simulation/vehicle/instances/instance/vehicleInstance.tsx b/app/src/modules/simulation/vehicle/instances/instance/vehicleInstance.tsx
index 6a81d3a..412a4ba 100644
--- a/app/src/modules/simulation/vehicle/instances/instance/vehicleInstance.tsx
+++ b/app/src/modules/simulation/vehicle/instances/instance/vehicleInstance.tsx
@@ -30,7 +30,8 @@ function VehicleInstance({ agvDetail }: any) {
);
function vehicleStatus(modelId: string, status: string) {
- // console.log(`${modelId} , ${status});
+ // console.log(`${modelId} , ${status}`);
+
}
// Function to reset everything
@@ -44,7 +45,7 @@ function VehicleInstance({ agvDetail }: any) {
const increment = () => {
if (isIncrememtable.current) {
- incrementVehicleLoad(agvDetail.modelUuid, 2);
+ incrementVehicleLoad(agvDetail.modelUuid, 10);
isIncrememtable.current = false;
}
}
@@ -69,6 +70,7 @@ function VehicleInstance({ agvDetail }: any) {
increment();
}, 5000);
+
if (agvDetail.currentLoad === agvDetail.point.action.loadCapacity) {
const toDrop = computePath(
agvDetail.point.action.pickUpPoint.position,
diff --git a/app/src/modules/simulation/vehicle/instances/vehicleInstances.tsx b/app/src/modules/simulation/vehicle/instances/vehicleInstances.tsx
index 91111cf..fcc840d 100644
--- a/app/src/modules/simulation/vehicle/instances/vehicleInstances.tsx
+++ b/app/src/modules/simulation/vehicle/instances/vehicleInstances.tsx
@@ -9,10 +9,8 @@ function VehicleInstances() {
return (
<>
- {vehicles.map((val: any, i: any) =>
-
-
-
+ {vehicles.map((val: VehicleStatus) =>
+
)}
diff --git a/app/src/modules/simulation/vehicle/vehicles.tsx b/app/src/modules/simulation/vehicle/vehicles.tsx
index 7badec5..3fbc8ef 100644
--- a/app/src/modules/simulation/vehicle/vehicles.tsx
+++ b/app/src/modules/simulation/vehicle/vehicles.tsx
@@ -1,220 +1,48 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect } 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 { useSelectedEventData, useSelectedEventSphere, useSelectedProduct } from "../../../store/simulation/useSimulationStore";
import VehicleUI from "../ui/vehicle/vehicleUI";
import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
-function Vehicles() {
+import { useProductStore } from "../../../store/simulation/useProductStore";
- const { vehicles, addVehicle } = useVehicleStore();
+function Vehicles() {
+ const { products, getProductById } = useProductStore();
+ const { selectedProduct } = useSelectedProduct();
+ const { vehicles, addVehicle, clearvehicles } = useVehicleStore();
const { selectedEventSphere } = useSelectedEventSphere();
const { selectedEventData } = useSelectedEventData();
- const { floorItems } = useFloorItems();
const { isPlaying } = usePlayButtonStore();
- const [vehicleStatusSample, setVehicleStatusSample] = useState<
- VehicleEventSchema[]
- >([
- {
- modelUuid: "9356f710-4727-4b50-bdb2-9c1e747ecc74",
- modelName: "AGV",
- position: [97.9252965204558, 0, 37.96138815638661],
- 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: { 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: [
- {
- triggerUuid: "trig-001",
- triggerName: "Start Travel",
- triggerType: "onComplete",
- 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: "b06960bb-3d2e-41f7-a646-335f389c68b4",
- modelName: "AGV",
- position: [89.61609306554463, 0, 33.634136622267356],
- 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: "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);
+ if (selectedProduct.productId) {
+ const product = getProductById(selectedProduct.productId);
+ if (product) {
+ clearvehicles();
+ product.eventDatas.forEach(events => {
+ if (events.type === 'vehicle') {
+ addVehicle(selectedProduct.productId, events);
+ }
+ });
+ }
+ }
+ }, [selectedProduct, products]);
+
+ useEffect(() => {
+ //
}, [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;
-
-
-
+export default Vehicles;
\ No newline at end of file
diff --git a/app/src/modules/visualization/RealTimeVisulization.tsx b/app/src/modules/visualization/RealTimeVisulization.tsx
index caf37a1..a8f44b4 100644
--- a/app/src/modules/visualization/RealTimeVisulization.tsx
+++ b/app/src/modules/visualization/RealTimeVisulization.tsx
@@ -66,8 +66,7 @@ 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();
@@ -76,8 +75,6 @@ const RealTimeVisulization: React.FC = () => {
const { setSelectedChartId } = useWidgetStore();
const [waitingPanels, setWaitingPanels] = useState(null);
- console.log("waitingPanels: ", waitingPanels);
-
OuterClick({
contextClassName: [
"chart-container",
@@ -145,109 +142,109 @@ const RealTimeVisulization: React.FC = () => {
});
}, [selectedZone]);
- const handleDrop = async (event: React.DragEvent) => {
- event.preventDefault();
- try {
- const email = localStorage.getItem("email") ?? "";
- const organization = email?.split("@")[1]?.split(".")[0];
+ // const handleDrop = async (event: React.DragEvent) => {
+ // event.preventDefault();
+ // try {
+ // const email = localStorage.getItem("email") ?? "";
+ // const organization = email?.split("@")[1]?.split(".")[0];
- const data = event.dataTransfer.getData("text/plain");
- if (widgetSubOption === "3D") return;
- if (!data || selectedZone.zoneName === "") return;
+ // const data = event.dataTransfer.getData("text/plain");
+ // if (widgetSubOption === "3D") return;
+ // if (!data || selectedZone.zoneName === "") return;
- const droppedData = JSON.parse(data);
- const canvasElement = document.getElementById("real-time-vis-canvas");
- if (!canvasElement) throw new Error("Canvas element not found");
+ // const droppedData = JSON.parse(data);
+ // const canvasElement = document.getElementById("real-time-vis-canvas");
+ // if (!canvasElement) throw new Error("Canvas element not found");
- const rect = canvasElement.getBoundingClientRect();
- const relativeX = event.clientX - rect.left;
- const relativeY = event.clientY - rect.top;
+ // const rect = canvasElement.getBoundingClientRect();
+ // const relativeX = event.clientX - rect.left;
+ // const relativeY = event.clientY - rect.top;
- // Widget dimensions
- const widgetWidth = droppedData.width ?? 125;
- const widgetHeight = droppedData.height ?? 100;
+ // // Widget dimensions
+ // const widgetWidth = droppedData.width ?? 125;
+ // const widgetHeight = droppedData.height ?? 100;
- // Center the widget at cursor
- const centerOffsetX = widgetWidth / 2;
- const centerOffsetY = widgetHeight / 2;
+ // // Center the widget at cursor
+ // const centerOffsetX = widgetWidth / 2;
+ // const centerOffsetY = widgetHeight / 2;
- const adjustedX = relativeX - centerOffsetX;
- const adjustedY = relativeY - centerOffsetY;
+ // const adjustedX = relativeX - centerOffsetX;
+ // const adjustedY = relativeY - centerOffsetY;
- const finalPosition = determinePosition(rect, adjustedX, adjustedY);
- const [activeProp1, activeProp2] = getActiveProperties(finalPosition);
+ // const finalPosition = determinePosition(rect, adjustedX, adjustedY);
+ // const [activeProp1, activeProp2] = getActiveProperties(finalPosition);
- let finalY = 0;
- let finalX = 0;
+ // let finalY = 0;
+ // let finalX = 0;
- if (activeProp1 === "top") {
- finalY = adjustedY;
- } else {
- finalY = rect.height - (adjustedY + widgetHeight);
- }
+ // if (activeProp1 === "top") {
+ // finalY = adjustedY;
+ // } else {
+ // finalY = rect.height - (adjustedY + widgetHeight);
+ // }
- if (activeProp2 === "left") {
- finalX = adjustedX;
- } else {
- finalX = rect.width - (adjustedX + widgetWidth);
- }
+ // if (activeProp2 === "left") {
+ // finalX = adjustedX;
+ // } else {
+ // finalX = rect.width - (adjustedX + widgetWidth);
+ // }
- // Clamp to boundaries
- finalX = Math.max(0, Math.min(rect.width - widgetWidth, finalX));
- finalY = Math.max(0, Math.min(rect.height - widgetHeight, finalY));
+ // // Clamp to boundaries
+ // finalX = Math.max(0, Math.min(rect.width - widgetWidth, finalX));
+ // finalY = Math.max(0, Math.min(rect.height - widgetHeight, finalY));
- const boundedPosition = {
- ...finalPosition,
- [activeProp1]: finalY,
- [activeProp2]: finalX,
- [activeProp1 === "top" ? "bottom" : "top"]: "auto",
- [activeProp2 === "left" ? "right" : "left"]: "auto",
- };
+ // const boundedPosition = {
+ // ...finalPosition,
+ // [activeProp1]: finalY,
+ // [activeProp2]: finalX,
+ // [activeProp1 === "top" ? "bottom" : "top"]: "auto",
+ // [activeProp2 === "left" ? "right" : "left"]: "auto",
+ // };
- const newObject = {
- ...droppedData,
- id: generateUniqueId(),
- position: boundedPosition,
- };
+ // const newObject = {
+ // ...droppedData,
+ // id: generateUniqueId(),
+ // position: boundedPosition,
+ // };
- const existingZone =
- useDroppedObjectsStore.getState().zones[selectedZone.zoneName];
- if (!existingZone) {
- useDroppedObjectsStore
- .getState()
- .setZone(selectedZone.zoneName, selectedZone.zoneId);
- }
+ // const existingZone =
+ // useDroppedObjectsStore.getState().zones[selectedZone.zoneName];
+ // if (!existingZone) {
+ // useDroppedObjectsStore
+ // .getState()
+ // .setZone(selectedZone.zoneName, selectedZone.zoneId);
+ // }
- const addFloatingWidget = {
- organization,
- widget: newObject,
- zoneId: selectedZone.zoneId,
- };
+ // const addFloatingWidget = {
+ // organization,
+ // widget: newObject,
+ // zoneId: selectedZone.zoneId,
+ // };
- if (visualizationSocket) {
- visualizationSocket.emit("v2:viz-float:add", addFloatingWidget);
- }
+ // if (visualizationSocket) {
+ // visualizationSocket.emit("v2:viz-float:add", addFloatingWidget);
+ // }
- useDroppedObjectsStore
- .getState()
- .addObject(selectedZone.zoneName, newObject);
+ // useDroppedObjectsStore
+ // .getState()
+ // .addObject(selectedZone.zoneName, newObject);
- const droppedObjectsStore = useDroppedObjectsStore.getState();
- const currentZone = droppedObjectsStore.zones[selectedZone.zoneName];
+ // const droppedObjectsStore = useDroppedObjectsStore.getState();
+ // const currentZone = droppedObjectsStore.zones[selectedZone.zoneName];
- if (currentZone && currentZone.zoneId === selectedZone.zoneId) {
- console.log(
- `Objects for Zone ${selectedZone.zoneId}:`,
- currentZone.objects
- );
- setFloatingWidget(currentZone.objects);
- } else {
- console.warn("Zone not found or zoneId mismatch");
- }
- } catch (error) {
- console.error("Error in handleDrop:", error);
- }
- };
+ // if (currentZone && currentZone.zoneId === selectedZone.zoneId) {
+ // console.log(
+ // `Objects for Zone ${selectedZone.zoneId}:`,
+ // currentZone.objects
+ // );
+ // setFloatingWidget(currentZone.objects);
+ // } else {
+ // console.warn("Zone not found or zoneId mismatch");
+ // }
+ // } catch (error) {
+ // console.error("Error in handleDrop:", error);
+ // }
+ // };
useEffect(() => {
const handleClickOutside = (event: MouseEvent) => {
@@ -304,16 +301,7 @@ const RealTimeVisulization: React.FC = () => {
}
`}
-
+
{openConfirmationPopup && (
@@ -324,20 +312,6 @@ const RealTimeVisulization: React.FC = () => {
/>
)}
-
handleDrop(event)}
- onDragOver={(event) => event.preventDefault()}
- >
-
-
{activeModule === "visualization" && selectedZone.zoneName !== "" && (
)}
diff --git a/app/src/modules/visualization/functions/handleUiDrop.ts b/app/src/modules/visualization/functions/handleUiDrop.ts
new file mode 100644
index 0000000..a70742e
--- /dev/null
+++ b/app/src/modules/visualization/functions/handleUiDrop.ts
@@ -0,0 +1,122 @@
+import { generateUniqueId } from "../../../functions/generateUniqueId";
+import { useDroppedObjectsStore } from "../../../store/visualization/useDroppedObjectsStore";
+import { determinePosition } from "./determinePosition";
+import { getActiveProperties } from "./getActiveProperties";
+
+interface HandleDropProps {
+ widgetSubOption: any;
+ visualizationSocket: any;
+ selectedZone: any;
+ setFloatingWidget: (value: any) => void;
+ event: React.DragEvent
+}
+
+export const createHandleDrop = ({
+ widgetSubOption,
+ visualizationSocket,
+ selectedZone,
+ setFloatingWidget,
+ event,
+}: HandleDropProps) => {
+ event.preventDefault();
+ try {
+ const email = localStorage.getItem("email") ?? "";
+ const organization = email?.split("@")[1]?.split(".")[0];
+
+ const data = event.dataTransfer.getData("text/plain");
+ if (widgetSubOption === "3D") return;
+ if (!data || selectedZone.zoneName === "") return;
+
+ const droppedData = JSON.parse(data);
+ const canvasElement = document.getElementById("real-time-vis-canvas");
+ if (!canvasElement) throw new Error("Canvas element not found");
+
+ const rect = canvasElement.getBoundingClientRect();
+ const relativeX = event.clientX - rect.left;
+ const relativeY = event.clientY - rect.top;
+
+ // Widget dimensions
+ const widgetWidth = droppedData.width ?? 125;
+ const widgetHeight = droppedData.height ?? 100;
+
+ // Center the widget at cursor
+ const centerOffsetX = widgetWidth / 2;
+ const centerOffsetY = widgetHeight / 2;
+
+ const adjustedX = relativeX - centerOffsetX;
+ const adjustedY = relativeY - centerOffsetY;
+
+ const finalPosition = determinePosition(rect, adjustedX, adjustedY);
+ const [activeProp1, activeProp2] = getActiveProperties(finalPosition);
+
+ let finalY = 0;
+ let finalX = 0;
+
+ if (activeProp1 === "top") {
+ finalY = adjustedY;
+ } else {
+ finalY = rect.height - (adjustedY + widgetHeight);
+ }
+
+ if (activeProp2 === "left") {
+ finalX = adjustedX;
+ } else {
+ finalX = rect.width - (adjustedX + widgetWidth);
+ }
+
+ // Clamp to boundaries
+ finalX = Math.max(0, Math.min(rect.width - widgetWidth, finalX));
+ finalY = Math.max(0, Math.min(rect.height - widgetHeight, finalY));
+
+ const boundedPosition = {
+ ...finalPosition,
+ [activeProp1]: finalY,
+ [activeProp2]: finalX,
+ [activeProp1 === "top" ? "bottom" : "top"]: "auto",
+ [activeProp2 === "left" ? "right" : "left"]: "auto",
+ };
+
+ const newObject = {
+ ...droppedData,
+ id: generateUniqueId(),
+ position: boundedPosition,
+ };
+
+ const existingZone =
+ useDroppedObjectsStore.getState().zones[selectedZone.zoneName];
+ if (!existingZone) {
+ useDroppedObjectsStore
+ .getState()
+ .setZone(selectedZone.zoneName, selectedZone.zoneId);
+ }
+
+ const addFloatingWidget = {
+ organization,
+ widget: newObject,
+ zoneId: selectedZone.zoneId,
+ };
+
+ if (visualizationSocket) {
+ visualizationSocket.emit("v2:viz-float:add", addFloatingWidget);
+ }
+
+ useDroppedObjectsStore
+ .getState()
+ .addObject(selectedZone.zoneName, newObject);
+
+ const droppedObjectsStore = useDroppedObjectsStore.getState();
+ const currentZone = droppedObjectsStore.zones[selectedZone.zoneName];
+
+ if (currentZone && currentZone.zoneId === selectedZone.zoneId) {
+ console.log(
+ `Objects for Zone ${selectedZone.zoneId}:`,
+ currentZone.objects
+ );
+ setFloatingWidget(currentZone.objects);
+ } else {
+ console.warn("Zone not found or zoneId mismatch");
+ }
+ } catch (error) {
+ console.error("Error in handleDrop:", error);
+ }
+};
diff --git a/app/src/pages/Project.tsx b/app/src/pages/Project.tsx
index bdefb8b..17a6315 100644
--- a/app/src/pages/Project.tsx
+++ b/app/src/pages/Project.tsx
@@ -13,6 +13,7 @@ import {
useWallItems,
useZones,
useLoadingProgress,
+ useWidgetSubOption,
} from "../store/store";
import { useNavigate } from "react-router-dom";
import { usePlayButtonStore } from "../store/usePlayButtonStore";
@@ -22,12 +23,19 @@ import SimulationPlayer from "../components/ui/simulation/simulationPlayer";
import KeyPressListener from "../utils/shortcutkeys/handleShortcutKeys";
import { useSelectedUserStore } from "../store/useCollabStore";
import FollowPerson from "../components/templates/FollowPerson";
-import ProductionCapacity from "../components/ui/analysis/ProductionCapacity";
-import ThroughputSummary from "../components/ui/analysis/ThroughputSummary";
-import ROISummary from "../components/ui/analysis/ROISummary";
+import Scene from "../modules/scene/scene";
+import { createHandleDrop } from "../modules/visualization/functions/handleUiDrop";
+import { useSelectedZoneStore } from "../store/visualization/useZoneStore";
+import { useFloatingWidget } from "../store/visualization/useDroppedObjectsStore";
+import { useLogger } from "../components/ui/log/LoggerContext";
+import RenderOverlay from "../components/templates/Overlay";
+import LogList from "../components/ui/log/LogList";
+import Footer from "../components/footer/Footer";
const Project: React.FC = () => {
let navigate = useNavigate();
+ const echo = useLogger();
+
const { activeModule, setActiveModule } = useModuleStore();
const { loadingProgress } = useLoadingProgress();
const { setUserName } = useUserName();
@@ -50,42 +58,79 @@ const Project: React.FC = () => {
setOrganization(Organization);
setUserName(name);
}
+ echo.info("Log in success full");
} else {
navigate("/");
}
+ // eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
- const { isPlaying } = usePlayButtonStore();
+ // global store
const { toggleThreeD } = useThreeDStore();
+
+ // simulation store
+ const { isPlaying } = usePlayButtonStore();
+
+ // collaboration store
const { selectedUser } = useSelectedUserStore();
+ const { isLogListVisible } = useLogger();
+
+ // real-time visualization store
+ const { widgetSubOption } = useWidgetSubOption();
+ const { visualizationSocket } = useSocketStore();
+ const { selectedZone } = useSelectedZoneStore();
+ const { setFloatingWidget } = useFloatingWidget();
return (
- {/*
*/}
-
- {loadingProgress > 0 &&
}
- {!isPlaying && (
+ {!selectedUser && (
<>
- {toggleThreeD &&
}
-
-
+
+ {loadingProgress > 0 &&
}
+ {!isPlaying && (
+ <>
+ {toggleThreeD &&
}
+
+
+
+ )}
+
+ {activeModule === "market" &&
}
+ {activeModule !== "market" &&
}
+ {isPlaying && activeModule === "simulation" &&
}
)}
- {/*
-
- */}
- {activeModule === "market" &&
}
-
- {activeModule !== "market" &&
}
- {isPlaying && activeModule === "simulation" &&
}
- {/* {
} */}
+
+ createHandleDrop({
+ widgetSubOption,
+ visualizationSocket,
+ selectedZone,
+ setFloatingWidget,
+ event,
+ })
+ }
+ onDragOver={(event) => event.preventDefault()}
+ >
+
+
{selectedUser &&
}
+ {isLogListVisible && (
+
+
+
+ )}
+