feat: Implement ArmBot simulation with IK animation and event handling

- Added ArmBot component to manage ArmBot instances in the simulation.
- Created ArmBotInstances component to render individual ArmBot models.
- Developed IKAnimationController for handling inverse kinematics during animations.
- Introduced IkInstances component to load and manage IK-enabled arm models.
- Defined simulation types for ArmBot events and connections in TypeScript.
- Enhanced type definitions for better clarity and maintainability.

app/src/components/layout/sidebarLeft/Assets.tsx

@@ -133,7 +133,6 @@ const Assets: React.FC = () => {
     } else {
       try {
         const res = await getCategoryAsset(asset);
-        console.log('res: ', res);
         setCategoryAssets(res);
         setFiltereredAssets(res);
       } catch (error) {}

app/src/components/layout/sidebarRight/mechanics/ArmBotMechanics.tsx

@@ -2,7 +2,7 @@ import React, { useRef, useMemo, useCallback, useState } from "react";
 import { InfoIcon, AddIcon, RemoveIcon, ResizeHeightIcon } from "../../../icons/ExportCommonIcons";
 import InputWithDropDown from "../../../ui/inputs/InputWithDropDown";
 import { useSelectedActionSphere, useSimulationStates, useSocketStore } from "../../../../store/store";
-import * as Types from '../../../../types/world/worldTypes';
+import * as SimulationTypes from '../../../../types/simulation';
 import LabledDropdown from "../../../ui/inputs/LabledDropdown";
 import { handleResize } from "../../../../functions/handleResizePannel";
 
@@ -34,7 +34,7 @@ const ArmBotMechanics: React.FC = () => {
         if (!selectedActionSphere?.points?.uuid) return [];
 
         const armBotPaths = simulationStates.filter(
-            (path): path is Types.ArmBotEventsSchema => path.type === "ArmBot"
+            (path): path is SimulationTypes.ArmBotEventsSchema => path.type === "ArmBot"
         );
 
         const currentPoint = armBotPaths.find(
@@ -54,7 +54,7 @@ const ArmBotMechanics: React.FC = () => {
             let points: { uuid: string; position: [number, number, number] }[] = [];
 
             if (connectedModel.type === "Conveyor") {
-                const conveyor = connectedModel as Types.ConveyorEventsSchema;
+                const conveyor = connectedModel as SimulationTypes.ConveyorEventsSchema;
 
                 const connectedPointUUIDs = currentPoint?.connections?.targets
                     .filter(t => t.modelUUID === connectedModel.modeluuid)
@@ -72,7 +72,7 @@ const ArmBotMechanics: React.FC = () => {
                 triggers = conveyor.points.flatMap(p => p.triggers?.filter(t => t.isUsed) || []);
             }
             else if (connectedModel.type === "StaticMachine") {
-                const staticMachine = connectedModel as Types.StaticMachineEventsSchema;
+                const staticMachine = connectedModel as SimulationTypes.StaticMachineEventsSchema;
 
                 points = [{
                     uuid: staticMachine.points.uuid,
@@ -128,7 +128,7 @@ const ArmBotMechanics: React.FC = () => {
         if (!selectedActionSphere?.points?.uuid) return { selectedPoint: null };
 
         const armBotPaths = simulationStates.filter(
-            (path): path is Types.ArmBotEventsSchema => path.type === "ArmBot"
+            (path): path is SimulationTypes.ArmBotEventsSchema => path.type === "ArmBot"
         );
 
         const points = armBotPaths.find(
@@ -140,7 +140,7 @@ const ArmBotMechanics: React.FC = () => {
         };
     }, [selectedActionSphere, simulationStates]);
 
-    const updateBackend = async (updatedPath: Types.ArmBotEventsSchema | undefined) => {
+    const updateBackend = async (updatedPath: SimulationTypes.ArmBotEventsSchema | undefined) => {
         if (!updatedPath) return;
         const email = localStorage.getItem("email");
         const organization = email ? email.split("@")[1].split(".")[0] : "";
@@ -150,12 +150,11 @@ const ArmBotMechanics: React.FC = () => {
             modeluuid: updatedPath.modeluuid,
             eventData: { type: "ArmBot", points: updatedPath.points }
         }
-        console.log('data: ', data);
 
         socket.emit('v2:model-asset:updateEventData', data);
     }
 
-    const handleActionUpdate = useCallback((updatedAction: Partial<Types.ArmBotEventsSchema['points']['actions']>) => {
+    const handleActionUpdate = useCallback((updatedAction: Partial<SimulationTypes.ArmBotEventsSchema['points']['actions']>) => {
         if (!selectedActionSphere?.points?.uuid || !selectedPoint) return;
 
         const updatedPaths = simulationStates.map((path) => {
@@ -175,7 +174,7 @@ const ArmBotMechanics: React.FC = () => {
         });
 
         const updatedPath = updatedPaths.find(
-            (path): path is Types.ArmBotEventsSchema =>
+            (path): path is SimulationTypes.ArmBotEventsSchema =>
                 path.type === "ArmBot" &&
                 path.points.uuid === selectedActionSphere.points.uuid
         );
@@ -188,7 +187,7 @@ const ArmBotMechanics: React.FC = () => {
         handleActionUpdate({ speed });
     }, [handleActionUpdate]);
 
-    const handleProcessChange = useCallback((processes: Types.ArmBotEventsSchema['points']['actions']['processes']) => {
+    const handleProcessChange = useCallback((processes: SimulationTypes.ArmBotEventsSchema['points']['actions']['processes']) => {
         handleActionUpdate({ processes });
     }, [handleActionUpdate]);
 

app/src/components/layout/sidebarRight/mechanics/ConveyorMechanics.tsx

@@ -17,7 +17,7 @@ import {
     useSocketStore,
 } from "../../../../store/store";
 import * as THREE from "three";
-import * as Types from "../../../../types/world/worldTypes";
+import * as SimulationTypes from "../../../../types/simulation";
 import InputToggle from "../../../ui/inputs/InputToggle";
 import { setFloorItemApi } from "../../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi";
 import { setEventApi } from "../../../../services/factoryBuilder/assest/floorAsset/setEventsApt";
@@ -36,13 +36,13 @@ const ConveyorMechanics: React.FC = () => {
         if (!selectedActionSphere) return null;
         return simulationStates
             .filter(
-                (path): path is Types.ConveyorEventsSchema => path.type === "Conveyor"
+                (path): path is SimulationTypes.ConveyorEventsSchema => path.type === "Conveyor"
             )
             .flatMap((path) => path.points)
             .find((point) => point.uuid === selectedActionSphere.points.uuid);
     }, [selectedActionSphere, simulationStates]);
 
-    const updateBackend = async (updatedPath: Types.ConveyorEventsSchema | undefined) => {
+    const updateBackend = async (updatedPath: SimulationTypes.ConveyorEventsSchema | undefined) => {
         if (!updatedPath) return;
         const email = localStorage.getItem("email");
         const organization = email ? email.split("@")[1].split(".")[0] : "";
@@ -93,7 +93,7 @@ const ConveyorMechanics: React.FC = () => {
         });
 
         const updatedPath = updatedPaths.find(
-            (path): path is Types.ConveyorEventsSchema =>
+            (path): path is SimulationTypes.ConveyorEventsSchema =>
                 path.type === "Conveyor" &&
                 path.points.some(
                     (point) => point.uuid === selectedActionSphere.points.uuid
@@ -126,7 +126,7 @@ const ConveyorMechanics: React.FC = () => {
         );
 
         const updatedPath = updatedPaths.find(
-            (path): path is Types.ConveyorEventsSchema =>
+            (path): path is SimulationTypes.ConveyorEventsSchema =>
                 path.type === "Conveyor" &&
                 path.points.some(
                     (point) => point.uuid === selectedActionSphere.points.uuid
@@ -174,7 +174,7 @@ const ConveyorMechanics: React.FC = () => {
         );
 
         const updatedPath = updatedPaths.find(
-            (path): path is Types.ConveyorEventsSchema =>
+            (path): path is SimulationTypes.ConveyorEventsSchema =>
                 path.type === "Conveyor" &&
                 path.points.some(
                     (point) => point.uuid === selectedActionSphere.points.uuid
@@ -188,7 +188,7 @@ const ConveyorMechanics: React.FC = () => {
         if (selectedItem?.type === "action" && selectedItem.item.uuid === uuid) {
             const updatedAction = updatedPaths
                 .filter(
-                    (path): path is Types.ConveyorEventsSchema => path.type === "Conveyor"
+                    (path): path is SimulationTypes.ConveyorEventsSchema => path.type === "Conveyor"
                 )
                 .flatMap((path) => path.points)
                 .find((p) => p.uuid === selectedActionSphere.points.uuid)
@@ -229,7 +229,7 @@ const ConveyorMechanics: React.FC = () => {
         );
 
         const updatedPath = updatedPaths.find(
-            (path): path is Types.ConveyorEventsSchema =>
+            (path): path is SimulationTypes.ConveyorEventsSchema =>
                 path.type === "Conveyor" &&
                 path.points.some(
                     (point) => point.uuid === selectedActionSphere.points.uuid
@@ -273,7 +273,7 @@ const ConveyorMechanics: React.FC = () => {
         );
 
         const updatedPath = updatedPaths.find(
-            (path): path is Types.ConveyorEventsSchema =>
+            (path): path is SimulationTypes.ConveyorEventsSchema =>
                 path.type === "Conveyor" &&
                 path.points.some(
                     (point) => point.uuid === selectedActionSphere.points.uuid
@@ -311,7 +311,7 @@ const ConveyorMechanics: React.FC = () => {
         );
 
         const updatedPath = updatedPaths.find(
-            (path): path is Types.ConveyorEventsSchema =>
+            (path): path is SimulationTypes.ConveyorEventsSchema =>
                 path.type === "Conveyor" &&
                 path.points.some(
                     (point) => point.uuid === selectedActionSphere.points.uuid
@@ -330,7 +330,7 @@ const ConveyorMechanics: React.FC = () => {
         );
 
         const updatedPath = updatedPaths.find(
-            (path): path is Types.ConveyorEventsSchema =>
+            (path): path is SimulationTypes.ConveyorEventsSchema =>
                 path.type === "Conveyor" &&
                 path.modeluuid === selectedPath.path.modeluuid
         );
@@ -367,7 +367,7 @@ const ConveyorMechanics: React.FC = () => {
         );
 
         const updatedPath = updatedPaths.find(
-            (path): path is Types.ConveyorEventsSchema =>
+            (path): path is SimulationTypes.ConveyorEventsSchema =>
                 path.type === "Conveyor" &&
                 path.points.some(
                     (point) => point.uuid === selectedActionSphere.points.uuid
@@ -400,7 +400,7 @@ const ConveyorMechanics: React.FC = () => {
         );
 
         const updatedPath = updatedPaths.find(
-            (path): path is Types.ConveyorEventsSchema =>
+            (path): path is SimulationTypes.ConveyorEventsSchema =>
                 path.type === "Conveyor" &&
                 path.points.some(
                     (point) => point.uuid === selectedActionSphere.points.uuid
@@ -435,7 +435,7 @@ const ConveyorMechanics: React.FC = () => {
         );
 
         const updatedPath = updatedPaths.find(
-            (path): path is Types.ConveyorEventsSchema =>
+            (path): path is SimulationTypes.ConveyorEventsSchema =>
                 path.type === "Conveyor" &&
                 path.points.some(
                     (point) => point.uuid === selectedActionSphere.points.uuid
@@ -479,7 +479,7 @@ const ConveyorMechanics: React.FC = () => {
         );
 
         const updatedPath = updatedPaths.find(
-            (path): path is Types.ConveyorEventsSchema =>
+            (path): path is SimulationTypes.ConveyorEventsSchema =>
                 path.type === "Conveyor" &&
                 path.points.some(
                     (point) => point.uuid === selectedActionSphere.points.uuid
@@ -525,7 +525,7 @@ const ConveyorMechanics: React.FC = () => {
         );
 
         const updatedPath = updatedPaths.find(
-            (path): path is Types.ConveyorEventsSchema =>
+            (path): path is SimulationTypes.ConveyorEventsSchema =>
                 path.type === "Conveyor" &&
                 path.points.some(
                     (point) => point.uuid === selectedActionSphere.points.uuid
@@ -571,7 +571,7 @@ const ConveyorMechanics: React.FC = () => {
         );
 
         const updatedPath = updatedPaths.find(
-            (path): path is Types.ConveyorEventsSchema =>
+            (path): path is SimulationTypes.ConveyorEventsSchema =>
                 path.type === "Conveyor" &&
                 path.points.some(
                     (point) => point.uuid === selectedActionSphere.points.uuid

app/src/components/layout/sidebarRight/mechanics/StaticMachineMechanics.tsx

@@ -2,7 +2,7 @@ import React, { useRef, useMemo, useCallback } from "react";
 import { InfoIcon } from "../../../icons/ExportCommonIcons";
 import InputWithDropDown from "../../../ui/inputs/InputWithDropDown";
 import { useSelectedActionSphere, useSimulationStates, useSocketStore } from "../../../../store/store";
-import * as Types from '../../../../types/world/worldTypes';
+import * as SimulationTypes from '../../../../types/simulation';
 import LabledDropdown from "../../../ui/inputs/LabledDropdown";
 import { setEventApi } from "../../../../services/factoryBuilder/assest/floorAsset/setEventsApt";
 
@@ -17,7 +17,7 @@ const StaticMachineMechanics: React.FC = () => {
         if (!selectedActionSphere?.points?.uuid) return { selectedPoint: null, connectedPointUuids: [] };
 
         const staticMachinePaths = simulationStates.filter(
-            (path): path is Types.StaticMachineEventsSchema => path.type === "StaticMachine"
+            (path): path is SimulationTypes.StaticMachineEventsSchema => path.type === "StaticMachine"
         );
 
         const points = staticMachinePaths.find(
@@ -39,7 +39,7 @@ const StaticMachineMechanics: React.FC = () => {
         };
     }, [selectedActionSphere, simulationStates]);
 
-    const updateBackend = async (updatedPath: Types.StaticMachineEventsSchema | undefined) => {
+    const updateBackend = async (updatedPath: SimulationTypes.StaticMachineEventsSchema | undefined) => {
         if (!updatedPath) return;
         const email = localStorage.getItem("email");
         const organization = email ? email.split("@")[1].split(".")[0] : "";
@@ -59,7 +59,7 @@ const StaticMachineMechanics: React.FC = () => {
         socket.emit('v2:model-asset:updateEventData', data);
     }
 
-    const handleActionUpdate = useCallback((updatedAction: Partial<Types.StaticMachineEventsSchema['points']['actions']>) => {
+    const handleActionUpdate = useCallback((updatedAction: Partial<SimulationTypes.StaticMachineEventsSchema['points']['actions']>) => {
         if (!selectedActionSphere?.points?.uuid) return;
 
         const updatedPaths = simulationStates.map((path) => {
@@ -79,7 +79,7 @@ const StaticMachineMechanics: React.FC = () => {
         });
 
         const updatedPath = updatedPaths.find(
-            (path): path is Types.StaticMachineEventsSchema =>
+            (path): path is SimulationTypes.StaticMachineEventsSchema =>
                 path.type === "StaticMachine" &&
                 path.points.uuid === selectedActionSphere.points.uuid
         );
@@ -96,7 +96,7 @@ const StaticMachineMechanics: React.FC = () => {
         handleActionUpdate({ material });
     }, [handleActionUpdate]);
 
-    const handleTriggerChange = useCallback((updatedTrigger: Partial<Types.StaticMachineEventsSchema['points']['triggers']>) => {
+    const handleTriggerChange = useCallback((updatedTrigger: Partial<SimulationTypes.StaticMachineEventsSchema['points']['triggers']>) => {
         if (!selectedActionSphere?.points?.uuid) return;
 
         const updatedPaths = simulationStates.map((path) => {
@@ -116,7 +116,7 @@ const StaticMachineMechanics: React.FC = () => {
         });
 
         const updatedPath = updatedPaths.find(
-            (path): path is Types.StaticMachineEventsSchema =>
+            (path): path is SimulationTypes.StaticMachineEventsSchema =>
                 path.type === "StaticMachine" &&
                 path.points.uuid === selectedActionSphere.points.uuid
         );

app/src/components/layout/sidebarRight/mechanics/VehicleMechanics.tsx

@@ -2,7 +2,7 @@ import React, { useRef, useMemo } from "react";
 import { InfoIcon } from "../../../icons/ExportCommonIcons";
 import InputWithDropDown from "../../../ui/inputs/InputWithDropDown";
 import { useEditingPoint, useEyeDropMode, usePreviewPosition, useSelectedActionSphere, useSimulationStates, useSocketStore } from "../../../../store/store";
-import * as Types from '../../../../types/world/worldTypes';
+import * as SimulationTypes from '../../../../types/simulation';
 import PositionInput from "../customInput/PositionInputs";
 import { setEventApi } from "../../../../services/factoryBuilder/assest/floorAsset/setEventsApt";
 import LabeledButton from "../../../ui/inputs/LabledButton";
@@ -21,7 +21,7 @@ const VehicleMechanics: React.FC = () => {
         if (!selectedActionSphere?.points?.uuid) return { selectedPoint: null, connectedPointUuids: [] };
 
         const vehiclePaths = simulationStates.filter(
-            (path): path is Types.VehicleEventsSchema => path.type === "Vehicle"
+            (path): path is SimulationTypes.VehicleEventsSchema => path.type === "Vehicle"
         );
 
         const points = vehiclePaths.find(
@@ -43,7 +43,7 @@ const VehicleMechanics: React.FC = () => {
         };
     }, [selectedActionSphere, simulationStates]);
 
-    const updateBackend = async (updatedPath: Types.VehicleEventsSchema | undefined) => {
+    const updateBackend = async (updatedPath: SimulationTypes.VehicleEventsSchema | undefined) => {
         if (!updatedPath) return;
         const email = localStorage.getItem("email");
         const organization = email ? email.split("@")[1].split(".")[0] : "";
@@ -64,7 +64,7 @@ const VehicleMechanics: React.FC = () => {
 
     }
 
-    const handleActionUpdate = React.useCallback((updatedAction: Partial<Types.VehicleEventsSchema['points']['actions']>) => {
+    const handleActionUpdate = React.useCallback((updatedAction: Partial<SimulationTypes.VehicleEventsSchema['points']['actions']>) => {
         if (!selectedActionSphere?.points?.uuid) return;
 
         const updatedPaths = simulationStates.map((path) => {
@@ -84,7 +84,7 @@ const VehicleMechanics: React.FC = () => {
         });
 
         const updatedPath = updatedPaths.find(
-            (path): path is Types.VehicleEventsSchema =>
+            (path): path is SimulationTypes.VehicleEventsSchema =>
                 path.type === "Vehicle" &&
                 path.points.uuid === selectedActionSphere.points.uuid
         );
@@ -118,7 +118,7 @@ const VehicleMechanics: React.FC = () => {
         });
 
         const updatedPath = updatedPaths.find(
-            (path): path is Types.VehicleEventsSchema =>
+            (path): path is SimulationTypes.VehicleEventsSchema =>
                 path.type === "Vehicle" &&
                 path.points.uuid === selectedActionSphere.points.uuid
         );
@@ -145,7 +145,7 @@ const VehicleMechanics: React.FC = () => {
         });
 
         const updatedPath = updatedPaths.find(
-            (path): path is Types.VehicleEventsSchema =>
+            (path): path is SimulationTypes.VehicleEventsSchema =>
                 path.type === "Vehicle" &&
                 path.points.uuid === selectedActionSphere.points.uuid
         );

app/src/modules/builder/geomentries/assets/addAssetModel.ts

@@ -5,6 +5,7 @@ import { toast } from 'react-toastify';
 import TempLoader from './tempLoader';
 import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
 import * as Types from "../../../../types/world/worldTypes";
+import * as SimulationTypes from "../../../../types/simulation";
 import { retrieveGLTF, storeGLTF } from '../../../../utils/indexDB/idbUtils';
 // import { setFloorItemApi } from '../../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi';
 import { Socket } from 'socket.io-client';
@@ -136,7 +137,7 @@ async function handleModelLoad(
         tempLoader.current = undefined;
     }
 
-    const newFloorItem: Types.EventData = {
+    const newFloorItem: SimulationTypes.EventData = {
         modeluuid: model.uuid,
         modelname: selectedItem.name,
         modelfileID: selectedItem.id,
@@ -150,12 +151,11 @@ async function handleModelLoad(
     const organization = email ? email.split("@")[1].split(".")[0] : "";
 
     getAssetEventType(selectedItem.id, organization).then(async (res) => {
-        console.log('res: ', res);
 
         if (res.type === "Conveyor") {
             const pointUUIDs = res.points.map(() => THREE.MathUtils.generateUUID());
 
-            const backendEventData: Extract<Types.EventData['eventData'], { type: 'Conveyor' }> = {
+            const backendEventData: Extract<SimulationTypes.EventData['eventData'], { type: 'Conveyor' }> = {
                 type: 'Conveyor',
                 points: res.points.map((point: any, index: number) => ({
                     uuid: pointUUIDs[index],
@@ -220,9 +220,9 @@ async function handleModelLoad(
             eventData.position = newFloorItem.position;
             eventData.rotation = [model.rotation.x, model.rotation.y, model.rotation.z];
 
-            setSimulationStates((prevEvents: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema | Types.ArmBotEventsSchema)[]) => [
+            setSimulationStates((prevEvents: (SimulationTypes.ConveyorEventsSchema | SimulationTypes.VehicleEventsSchema | SimulationTypes.StaticMachineEventsSchema | SimulationTypes.ArmBotEventsSchema)[]) => [
                 ...(prevEvents || []),
-                eventData as Types.ConveyorEventsSchema
+                eventData as SimulationTypes.ConveyorEventsSchema
             ]);
 
             console.log('data: ', data);
@@ -232,7 +232,7 @@ async function handleModelLoad(
 
             const pointUUID = THREE.MathUtils.generateUUID();
 
-            const backendEventData: Extract<Types.EventData['eventData'], { type: 'Vehicle' }> = {
+            const backendEventData: Extract<SimulationTypes.EventData['eventData'], { type: 'Vehicle' }> = {
                 type: "Vehicle",
                 points: {
                     uuid: pointUUID,
@@ -284,9 +284,9 @@ async function handleModelLoad(
                 return updatedItems;
             });
 
-            setSimulationStates((prevEvents: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema | Types.ArmBotEventsSchema)[]) => [
+            setSimulationStates((prevEvents: (SimulationTypes.ConveyorEventsSchema | SimulationTypes.VehicleEventsSchema | SimulationTypes.StaticMachineEventsSchema | SimulationTypes.ArmBotEventsSchema)[]) => [
                 ...(prevEvents || []),
-                eventData as Types.VehicleEventsSchema
+                eventData as SimulationTypes.VehicleEventsSchema
             ]);
 
             socket.emit("v2:model-asset:add", data);
@@ -295,7 +295,7 @@ async function handleModelLoad(
 
             const pointUUID = THREE.MathUtils.generateUUID();
 
-            const backendEventData: Extract<Types.EventData['eventData'], { type: 'StaticMachine' }> = {
+            const backendEventData: Extract<SimulationTypes.EventData['eventData'], { type: 'StaticMachine' }> = {
                 type: "StaticMachine",
                 points: {
                     uuid: pointUUID,
@@ -348,9 +348,9 @@ async function handleModelLoad(
                 return updatedItems;
             });
 
-            setSimulationStates((prevEvents: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema | Types.ArmBotEventsSchema)[]) => [
+            setSimulationStates((prevEvents: (SimulationTypes.ConveyorEventsSchema | SimulationTypes.VehicleEventsSchema | SimulationTypes.StaticMachineEventsSchema | SimulationTypes.ArmBotEventsSchema)[]) => [
                 ...(prevEvents || []),
-                eventData as Types.StaticMachineEventsSchema
+                eventData as SimulationTypes.StaticMachineEventsSchema
             ]);
 
             socket.emit("v2:model-asset:add", data);
@@ -359,7 +359,7 @@ async function handleModelLoad(
 
             const pointUUID = THREE.MathUtils.generateUUID();
 
-            const backendEventData: Extract<Types.EventData['eventData'], { type: 'ArmBot' }> = {
+            const backendEventData: Extract<SimulationTypes.EventData['eventData'], { type: 'ArmBot' }> = {
                 type: "ArmBot",
                 points: {
                     uuid: pointUUID,
@@ -412,9 +412,9 @@ async function handleModelLoad(
                 return updatedItems;
             });
 
-            setSimulationStates((prevEvents: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema | Types.ArmBotEventsSchema)[]) => [
+            setSimulationStates((prevEvents: (SimulationTypes.ConveyorEventsSchema | SimulationTypes.VehicleEventsSchema | SimulationTypes.StaticMachineEventsSchema | SimulationTypes.ArmBotEventsSchema)[]) => [
                 ...(prevEvents || []),
-                eventData as Types.ArmBotEventsSchema
+                eventData as SimulationTypes.ArmBotEventsSchema
             ]);
 
             socket.emit("v2:model-asset:add", data);
@@ -455,7 +455,6 @@ async function handleModelLoad(
                 return updatedItems;
             });
 
-            console.log('data: ', data);
             socket.emit("v2:model-asset:add", data);
         }
 

app/src/modules/builder/geomentries/assets/deleteFloorItems.ts

@@ -2,6 +2,7 @@ import { toast } from 'react-toastify';
 import * as THREE from 'three';
 
 import * as Types from "../../../../types/world/worldTypes";
+import * as SimulationTypes from "../../../../types/simulation";
 // import { deleteFloorItem } from '../../../../services/factoryBuilder/assest/floorAsset/deleteFloorItemApi';
 import { Socket } from 'socket.io-client';
 import { getFloorAssets } from '../../../../services/factoryBuilder/assest/floorAsset/getFloorItemsApi';
@@ -76,7 +77,7 @@ async function DeleteFloorItems(
             }
             setFloorItems(updatedItems);
 
-            setSimulationStates((prevEvents: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema)[]) => {
+            setSimulationStates((prevEvents: (SimulationTypes.ConveyorEventsSchema | SimulationTypes.VehicleEventsSchema | SimulationTypes.StaticMachineEventsSchema | SimulationTypes.ArmBotEventsSchema)[]) => {
                 const updatedEvents = (prevEvents || []).filter(event => event.modeluuid !== removedItem.modeluuid);
                 return updatedEvents;
             });

app/src/modules/builder/groups/floorItemsGroup.tsx

@@ -313,7 +313,7 @@ const FloorItemsGroup = ({ itemsGroup, hoveredDeletableFloorItem, AttachedObject
 
     useFrame(() => {
         if (controls)
-            assetVisibility(itemsGroup, state.camera.position, renderDistance);
+            // assetVisibility(itemsGroup, state.camera.position, renderDistance);
         if (deleteTool && activeModule === "builder") {
             DeletableHoveredFloorItems(state, itemsGroup, hoveredDeletableFloorItem, setDeletableFloorItem);
         } else if (!deleteTool) {

app/src/modules/collaboration/collabCams.tsx

@@ -26,12 +26,7 @@ const CamModelsGroup = () => {
   loader.setDRACOLoader(dracoLoader);
 
   const [cams, setCams] = useState<any[]>([]);
-  const [models, setModels] = useState<
+  const [models, setModels] = useState<Record<string, { targetPosition: THREE.Vector3; targetRotation: THREE.Euler }>>({});
-    Record<
-      string,
-      { targetPosition: THREE.Vector3; targetRotation: THREE.Euler }
-    >
-  >({});
 
   const dedupeCams = (cams: any[]) => {
     const seen = new Set();

app/src/modules/scene/IntialLoad/loadInitialFloorItems.ts

@@ -5,6 +5,7 @@ import * as THREE from 'three';
 import * as CONSTANTS from '../../../types/world/worldConstants';
 import { toast } from 'react-toastify';
 import * as Types from "../../../types/world/worldTypes";
+import * as SimulationTypes from "../../..//types/simulation";
 import { initializeDB, retrieveGLTF, storeGLTF } from '../../../utils/indexDB/idbUtils';
 import { getCamera } from '../../../services/factoryBuilder/camera/getCameraApi';
 import { getFloorAssets } from '../../../services/factoryBuilder/assest/floorAsset/getFloorItemsApi';
@@ -12,7 +13,7 @@ import { getFloorAssets } from '../../../services/factoryBuilder/assest/floorAss
 async function loadInitialFloorItems(
     itemsGroup: Types.RefGroup,
     setFloorItems: Types.setFloorItemSetState,
-    setSimulationStates: (paths: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema | Types.ArmBotEventsSchema)[]) => void
+    setSimulationStates: (paths: (SimulationTypes.ConveyorEventsSchema | SimulationTypes.VehicleEventsSchema | SimulationTypes.StaticMachineEventsSchema | SimulationTypes.ArmBotEventsSchema)[]) => void
 ): Promise<void> {
     if (!itemsGroup.current) return;
     let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_MARKETPLACE_URL}`;
@@ -26,7 +27,7 @@ async function loadInitialFloorItems(
     if (items.message === "floorItems not found") return;
 
     if (items) {
-        const storedFloorItems: Types.EventData[] = items;
+        const storedFloorItems: SimulationTypes.EventData[] = items;
         const loader = new GLTFLoader();
         const dracoLoader = new DRACOLoader();
 
@@ -150,10 +151,10 @@ async function loadInitialFloorItems(
 
 function processLoadedModel(
     gltf: any,
-    item: Types.EventData,
+    item: SimulationTypes.EventData,
     itemsGroup: Types.RefGroup,
     setFloorItems: Types.setFloorItemSetState,
-    setSimulationStates: (paths: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema | Types.ArmBotEventsSchema)[]) => void
+    setSimulationStates: (paths: (SimulationTypes.ConveyorEventsSchema | SimulationTypes.VehicleEventsSchema | SimulationTypes.StaticMachineEventsSchema | SimulationTypes.ArmBotEventsSchema)[]) => void
 ) {
     const model = gltf;
     model.uuid = item.modeluuid;
@@ -196,7 +197,7 @@ function processLoadedModel(
     gsap.to(model.scale, { x: 1, y: 1, z: 1, duration: 1.5, ease: 'power2.out' });
 }
 
-function processEventData(item: Types.EventData, setSimulationStates: any) {
+function processEventData(item: SimulationTypes.EventData, setSimulationStates: any) {
 
     if (item.eventData?.type === 'Conveyor') {
 
@@ -206,9 +207,9 @@ function processEventData(item: Types.EventData, setSimulationStates: any) {
         data.position = item.position;
         data.rotation = [item.rotation.x, item.rotation.y, item.rotation.z];
 
-        setSimulationStates((prevEvents: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema | Types.ArmBotEventsSchema)[]) => [
+        setSimulationStates((prevEvents: (SimulationTypes.ConveyorEventsSchema | SimulationTypes.VehicleEventsSchema | SimulationTypes.StaticMachineEventsSchema | SimulationTypes.ArmBotEventsSchema)[]) => [
             ...(prevEvents || []),
-            data as Types.ConveyorEventsSchema
+            data as SimulationTypes.ConveyorEventsSchema
         ]);
 
     } else if (item.eventData?.type === 'Vehicle') {
@@ -219,22 +220,23 @@ function processEventData(item: Types.EventData, setSimulationStates: any) {
         data.position = item.position;
         data.rotation = [item.rotation.x, item.rotation.y, item.rotation.z];
 
-        setSimulationStates((prevEvents: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema | Types.ArmBotEventsSchema)[]) => [
+        setSimulationStates((prevEvents: (SimulationTypes.ConveyorEventsSchema | SimulationTypes.VehicleEventsSchema | SimulationTypes.StaticMachineEventsSchema | SimulationTypes.ArmBotEventsSchema)[]) => [
             ...(prevEvents || []),
-            data as Types.VehicleEventsSchema
+            data as SimulationTypes.VehicleEventsSchema
         ]);
 
     } else if (item.eventData?.type === 'StaticMachine') {
 
         const data: any = item.eventData;
+        item.eventData.points.position = [0, 1.5, 1]
         data.modeluuid = item.modeluuid;
         data.modelName = item.modelname;
         data.position = item.position;
         data.rotation = [item.rotation.x, item.rotation.y, item.rotation.z];
 
-        setSimulationStates((prevEvents: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema | Types.ArmBotEventsSchema)[]) => [
+        setSimulationStates((prevEvents: (SimulationTypes.ConveyorEventsSchema | SimulationTypes.VehicleEventsSchema | SimulationTypes.StaticMachineEventsSchema | SimulationTypes.ArmBotEventsSchema)[]) => [
             ...(prevEvents || []),
-            data as Types.StaticMachineEventsSchema
+            data as SimulationTypes.StaticMachineEventsSchema
         ]);
 
     } else if (item.eventData?.type === 'ArmBot') {
@@ -245,9 +247,9 @@ function processEventData(item: Types.EventData, setSimulationStates: any) {
         data.position = item.position;
         data.rotation = [item.rotation.x, item.rotation.y, item.rotation.z];
 
-        setSimulationStates((prevEvents: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema | Types.ArmBotEventsSchema)[]) => [
+        setSimulationStates((prevEvents: (SimulationTypes.ConveyorEventsSchema | SimulationTypes.VehicleEventsSchema | SimulationTypes.StaticMachineEventsSchema | SimulationTypes.ArmBotEventsSchema)[]) => [
             ...(prevEvents || []),
-            data as Types.ArmBotEventsSchema
+            data as SimulationTypes.ArmBotEventsSchema
         ]);
 
     }

app/src/modules/scene/controls/selection/copyPasteControls.tsx

@@ -5,6 +5,7 @@ import { useFloorItems, useSelectedAssets, useSimulationStates, useSocketStore,
 import { toast } from "react-toastify";
 // import { setFloorItemApi } from '../../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi';
 import * as Types from "../../../../types/world/worldTypes";
+import * as SimulationTypes from "../../../../types/simulation";
 import { detectModifierKeys } from "../../../../utils/shortcutkeys/detectModifierKeys";
 
 const CopyPasteControls = ({ itemsGroupRef, copiedObjects, setCopiedObjects, pastedObjects, setpastedObjects, selectionGroup, setDuplicatedObjects, movedObjects, setMovedObjects, rotatedObjects, setRotatedObjects, boundingBoxRef }: any) => {
@@ -154,7 +155,7 @@ const CopyPasteControls = ({ itemsGroupRef, copiedObjects, setCopiedObjects, pas
                     return updatedItems;
                 });
 
-                let eventData: Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema | Types.ArmBotEventsSchema | undefined = simulationStates.find((events) => events.modeluuid === obj.userData.modeluuid);
+                let eventData: SimulationTypes.ConveyorEventsSchema | SimulationTypes.VehicleEventsSchema | SimulationTypes.StaticMachineEventsSchema | SimulationTypes.ArmBotEventsSchema | undefined = simulationStates.find((events) => events.modeluuid === obj.userData.modeluuid);
 
                 const email = localStorage.getItem("email");
                 const organization = email ? email.split("@")[1].split(".")[0] : "default";
@@ -162,7 +163,7 @@ const CopyPasteControls = ({ itemsGroupRef, copiedObjects, setCopiedObjects, pas
                     if (eventData.type === 'Conveyor' && eventData) {
                         const createConveyorPoint = (index: number) => {
                             const pointUUID = THREE.MathUtils.generateUUID();
-                            const hasActions = (eventData as Types.ConveyorEventsSchema)?.points[index].actions.length > 0;
+                            const hasActions = (eventData as SimulationTypes.ConveyorEventsSchema)?.points[index].actions.length > 0;
 
                             const defaultAction = {
                                 uuid: THREE.MathUtils.generateUUID(),
@@ -176,15 +177,15 @@ const CopyPasteControls = ({ itemsGroupRef, copiedObjects, setCopiedObjects, pas
 
                             return {
                                 uuid: pointUUID,
-                                position: (eventData as Types.ConveyorEventsSchema)?.points[index].position,
+                                position: (eventData as SimulationTypes.ConveyorEventsSchema)?.points[index].position,
-                                rotation: (eventData as Types.ConveyorEventsSchema)?.points[index].rotation,
+                                rotation: (eventData as SimulationTypes.ConveyorEventsSchema)?.points[index].rotation,
                                 actions: hasActions
-                                    ? (eventData as Types.ConveyorEventsSchema)?.points[index].actions.map(action => ({
+                                    ? (eventData as SimulationTypes.ConveyorEventsSchema)?.points[index].actions.map(action => ({
                                         ...action,
                                         uuid: THREE.MathUtils.generateUUID()
                                     }))
                                     : [defaultAction],
-                                triggers: (eventData as Types.ConveyorEventsSchema)?.points[index].triggers.map(trigger => ({
+                                triggers: (eventData as SimulationTypes.ConveyorEventsSchema)?.points[index].triggers.map(trigger => ({
                                     ...trigger,
                                     uuid: THREE.MathUtils.generateUUID()
                                 })),
@@ -202,7 +203,7 @@ const CopyPasteControls = ({ itemsGroupRef, copiedObjects, setCopiedObjects, pas
                                 createConveyorPoint(1),  // middlePoint
                                 createConveyorPoint(2)   // point2
                             ],
-                            speed: (eventData as Types.ConveyorEventsSchema)?.speed
+                            speed: (eventData as SimulationTypes.ConveyorEventsSchema)?.speed
                         };
 
                         //REST
@@ -240,9 +241,9 @@ const CopyPasteControls = ({ itemsGroupRef, copiedObjects, setCopiedObjects, pas
                         newEventData.position = newFloorItem.position;
                         newEventData.rotation = [obj.rotation.x, obj.rotation.y, obj.rotation.z];
 
-                        setSimulationStates((prevEvents: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema | Types.ArmBotEventsSchema)[]) => [
+                        setSimulationStates((prevEvents: (SimulationTypes.ConveyorEventsSchema | SimulationTypes.VehicleEventsSchema | SimulationTypes.StaticMachineEventsSchema | SimulationTypes.ArmBotEventsSchema)[]) => [
                             ...(prevEvents || []),
-                            newEventData as Types.ConveyorEventsSchema
+                            newEventData as SimulationTypes.ConveyorEventsSchema
                         ]);
 
                         socket.emit("v2:model-asset:add", data);
@@ -250,7 +251,7 @@ const CopyPasteControls = ({ itemsGroupRef, copiedObjects, setCopiedObjects, pas
                     } else if (eventData.type === 'Vehicle' && eventData) {
                         const createVehiclePoint = () => {
                             const pointUUID = THREE.MathUtils.generateUUID();
-                            const vehiclePoint = (eventData as Types.VehicleEventsSchema)?.points;
+                            const vehiclePoint = (eventData as SimulationTypes.VehicleEventsSchema)?.points;
                             const hasActions = vehiclePoint?.actions !== undefined;
 
                             const defaultAction = {
@@ -321,9 +322,9 @@ const CopyPasteControls = ({ itemsGroupRef, copiedObjects, setCopiedObjects, pas
                         newEventData.position = newFloorItem.position;
                         newEventData.rotation = [obj.rotation.x, obj.rotation.y, obj.rotation.z];
 
-                        setSimulationStates((prevEvents: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema | Types.ArmBotEventsSchema)[]) => [
+                        setSimulationStates((prevEvents: (SimulationTypes.ConveyorEventsSchema | SimulationTypes.VehicleEventsSchema | SimulationTypes.StaticMachineEventsSchema | SimulationTypes.ArmBotEventsSchema)[]) => [
                             ...(prevEvents || []),
-                            newEventData as Types.VehicleEventsSchema
+                            newEventData as SimulationTypes.VehicleEventsSchema
                         ]);
 
                         socket.emit("v2:model-asset:add", data);
@@ -331,7 +332,7 @@ const CopyPasteControls = ({ itemsGroupRef, copiedObjects, setCopiedObjects, pas
                     } else if (eventData.type === 'StaticMachine' && eventData) {
                         const createStaticMachinePoint = () => {
                             const pointUUID = THREE.MathUtils.generateUUID();
-                            const vehiclePoint = (eventData as Types.StaticMachineEventsSchema)?.points;
+                            const vehiclePoint = (eventData as SimulationTypes.StaticMachineEventsSchema)?.points;
                             const hasActions = vehiclePoint?.actions !== undefined;
 
                             const defaultAction = {
@@ -399,9 +400,9 @@ const CopyPasteControls = ({ itemsGroupRef, copiedObjects, setCopiedObjects, pas
                         newEventData.position = newFloorItem.position;
                         newEventData.rotation = [obj.rotation.x, obj.rotation.y, obj.rotation.z];
 
-                        setSimulationStates((prevEvents: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema | Types.ArmBotEventsSchema)[]) => [
+                        setSimulationStates((prevEvents: (SimulationTypes.ConveyorEventsSchema | SimulationTypes.VehicleEventsSchema | SimulationTypes.StaticMachineEventsSchema | SimulationTypes.ArmBotEventsSchema)[]) => [
                             ...(prevEvents || []),
-                            newEventData as Types.StaticMachineEventsSchema
+                            newEventData as SimulationTypes.StaticMachineEventsSchema
                         ]);
 
                         socket.emit("v2:model-asset:add", data);
@@ -409,7 +410,7 @@ const CopyPasteControls = ({ itemsGroupRef, copiedObjects, setCopiedObjects, pas
                     } else if (eventData.type === 'ArmBot' && eventData) {
                         const createArmBotPoint = () => {
                             const pointUUID = THREE.MathUtils.generateUUID();
-                            const vehiclePoint = (eventData as Types.ArmBotEventsSchema)?.points;
+                            const vehiclePoint = (eventData as SimulationTypes.ArmBotEventsSchema)?.points;
                             const hasActions = vehiclePoint?.actions !== undefined;
 
                             const defaultAction = {
@@ -481,9 +482,9 @@ const CopyPasteControls = ({ itemsGroupRef, copiedObjects, setCopiedObjects, pas
                         newEventData.position = newFloorItem.position;
                         newEventData.rotation = [obj.rotation.x, obj.rotation.y, obj.rotation.z];
 
-                        setSimulationStates((prevEvents: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema | Types.ArmBotEventsSchema)[]) => [
+                        setSimulationStates((prevEvents: (SimulationTypes.ConveyorEventsSchema | SimulationTypes.VehicleEventsSchema | SimulationTypes.StaticMachineEventsSchema | SimulationTypes.ArmBotEventsSchema)[]) => [
                             ...(prevEvents || []),
-                            newEventData as Types.ArmBotEventsSchema
+                            newEventData as SimulationTypes.ArmBotEventsSchema
                         ]);
 
                         socket.emit("v2:model-asset:add", data);

app/src/modules/scene/controls/selection/duplicationControls.tsx

@@ -5,6 +5,7 @@ import { useFloorItems, useSelectedAssets, useSimulationStates, useSocketStore,
 import { toast } from "react-toastify";
 // import { setFloorItemApi } from '../../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi';
 import * as Types from "../../../../types/world/worldTypes";
+import * as SimulationTypes from "../../../../types/simulation";
 import { setFloorItemApi } from "../../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi";
 import { detectModifierKeys } from "../../../../utils/shortcutkeys/detectModifierKeys";
 
@@ -40,11 +41,11 @@ const DuplicationControls = ({ itemsGroupRef, duplicatedObjects, setDuplicatedOb
         };
 
         const onKeyDown = (event: KeyboardEvent) => {
-                const keyCombination = detectModifierKeys(event);
+            const keyCombination = detectModifierKeys(event);
 
-                if (keyCombination === "Ctrl+D" && selectedAssets.length > 0 && duplicatedObjects.length === 0 && movedObjects.length === 0 && rotatedObjects.length === 0) {
+            if (keyCombination === "Ctrl+D" && selectedAssets.length > 0 && duplicatedObjects.length === 0 && movedObjects.length === 0 && rotatedObjects.length === 0) {
-                    duplicateSelection();
+                duplicateSelection();
-                }
+            }
         };
 
         if (!toggleView) {
@@ -132,7 +133,7 @@ const DuplicationControls = ({ itemsGroupRef, duplicatedObjects, setDuplicatedOb
                     return updatedItems;
                 });
 
-                let eventData: Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema | Types.ArmBotEventsSchema | undefined = simulationStates.find((events) => events.modeluuid === obj.userData.modeluuid);
+                let eventData: SimulationTypes.ConveyorEventsSchema | SimulationTypes.VehicleEventsSchema | SimulationTypes.StaticMachineEventsSchema | SimulationTypes.ArmBotEventsSchema | undefined = simulationStates.find((events) => events.modeluuid === obj.userData.modeluuid);
 
                 const email = localStorage.getItem("email");
                 const organization = email ? email.split("@")[1].split(".")[0] : "default";
@@ -141,7 +142,7 @@ const DuplicationControls = ({ itemsGroupRef, duplicatedObjects, setDuplicatedOb
                     if (eventData.type === 'Conveyor' && eventData) {
                         const createConveyorPoint = (index: number) => {
                             const pointUUID = THREE.MathUtils.generateUUID();
-                            const hasActions = (eventData as Types.ConveyorEventsSchema)?.points[index].actions.length > 0;
+                            const hasActions = (eventData as SimulationTypes.ConveyorEventsSchema)?.points[index].actions.length > 0;
 
                             const defaultAction = {
                                 uuid: THREE.MathUtils.generateUUID(),
@@ -155,15 +156,15 @@ const DuplicationControls = ({ itemsGroupRef, duplicatedObjects, setDuplicatedOb
 
                             return {
                                 uuid: pointUUID,
-                                position: (eventData as Types.ConveyorEventsSchema)?.points[index].position,
+                                position: (eventData as SimulationTypes.ConveyorEventsSchema)?.points[index].position,
-                                rotation: (eventData as Types.ConveyorEventsSchema)?.points[index].rotation,
+                                rotation: (eventData as SimulationTypes.ConveyorEventsSchema)?.points[index].rotation,
                                 actions: hasActions
-                                    ? (eventData as Types.ConveyorEventsSchema)?.points[index].actions.map(action => ({
+                                    ? (eventData as SimulationTypes.ConveyorEventsSchema)?.points[index].actions.map(action => ({
                                         ...action,
                                         uuid: THREE.MathUtils.generateUUID()
                                     }))
                                     : [defaultAction],
-                                triggers: (eventData as Types.ConveyorEventsSchema)?.points[index].triggers.map(trigger => ({
+                                triggers: (eventData as SimulationTypes.ConveyorEventsSchema)?.points[index].triggers.map(trigger => ({
                                     ...trigger,
                                     uuid: THREE.MathUtils.generateUUID()
                                 })),
@@ -181,7 +182,7 @@ const DuplicationControls = ({ itemsGroupRef, duplicatedObjects, setDuplicatedOb
                                 createConveyorPoint(1),
                                 createConveyorPoint(2)
                             ],
-                            speed: (eventData as Types.ConveyorEventsSchema)?.speed
+                            speed: (eventData as SimulationTypes.ConveyorEventsSchema)?.speed
                         };
 
                         //REST
@@ -219,9 +220,9 @@ const DuplicationControls = ({ itemsGroupRef, duplicatedObjects, setDuplicatedOb
                         newEventData.position = newFloorItem.position;
                         newEventData.rotation = [obj.rotation.x, obj.rotation.y, obj.rotation.z];
 
-                        setSimulationStates((prevEvents: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema | Types.ArmBotEventsSchema)[]) => [
+                        setSimulationStates((prevEvents: (SimulationTypes.ConveyorEventsSchema | SimulationTypes.VehicleEventsSchema | SimulationTypes.StaticMachineEventsSchema | SimulationTypes.ArmBotEventsSchema)[]) => [
                             ...(prevEvents || []),
-                            newEventData as Types.ConveyorEventsSchema
+                            newEventData as SimulationTypes.ConveyorEventsSchema
                         ]);
 
                         socket.emit("v2:model-asset:add", data);
@@ -229,7 +230,7 @@ const DuplicationControls = ({ itemsGroupRef, duplicatedObjects, setDuplicatedOb
                     } else if (eventData.type === 'Vehicle' && eventData) {
                         const createVehiclePoint = () => {
                             const pointUUID = THREE.MathUtils.generateUUID();
-                            const vehiclePoint = (eventData as Types.VehicleEventsSchema)?.points;
+                            const vehiclePoint = (eventData as SimulationTypes.VehicleEventsSchema)?.points;
                             const hasActions = vehiclePoint?.actions !== undefined;
 
                             const defaultAction = {
@@ -300,9 +301,9 @@ const DuplicationControls = ({ itemsGroupRef, duplicatedObjects, setDuplicatedOb
                         newEventData.position = newFloorItem.position;
                         newEventData.rotation = [obj.rotation.x, obj.rotation.y, obj.rotation.z];
 
-                        setSimulationStates((prevEvents: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema | Types.ArmBotEventsSchema)[]) => [
+                        setSimulationStates((prevEvents: (SimulationTypes.ConveyorEventsSchema | SimulationTypes.VehicleEventsSchema | SimulationTypes.StaticMachineEventsSchema | SimulationTypes.ArmBotEventsSchema)[]) => [
                             ...(prevEvents || []),
-                            newEventData as Types.VehicleEventsSchema
+                            newEventData as SimulationTypes.VehicleEventsSchema
                         ]);
 
                         socket.emit("v2:model-asset:add", data);
@@ -310,7 +311,7 @@ const DuplicationControls = ({ itemsGroupRef, duplicatedObjects, setDuplicatedOb
                     } else if (eventData.type === 'StaticMachine' && eventData) {
                         const createStaticMachinePoint = () => {
                             const pointUUID = THREE.MathUtils.generateUUID();
-                            const vehiclePoint = (eventData as Types.StaticMachineEventsSchema)?.points;
+                            const vehiclePoint = (eventData as SimulationTypes.StaticMachineEventsSchema)?.points;
                             const hasActions = vehiclePoint?.actions !== undefined;
 
                             const defaultAction = {
@@ -378,9 +379,9 @@ const DuplicationControls = ({ itemsGroupRef, duplicatedObjects, setDuplicatedOb
                         newEventData.position = newFloorItem.position;
                         newEventData.rotation = [obj.rotation.x, obj.rotation.y, obj.rotation.z];
 
-                        setSimulationStates((prevEvents: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema | Types.ArmBotEventsSchema)[]) => [
+                        setSimulationStates((prevEvents: (SimulationTypes.ConveyorEventsSchema | SimulationTypes.VehicleEventsSchema | SimulationTypes.StaticMachineEventsSchema | SimulationTypes.ArmBotEventsSchema)[]) => [
                             ...(prevEvents || []),
-                            newEventData as Types.StaticMachineEventsSchema
+                            newEventData as SimulationTypes.StaticMachineEventsSchema
                         ]);
 
                         socket.emit("v2:model-asset:add", data);
@@ -388,7 +389,7 @@ const DuplicationControls = ({ itemsGroupRef, duplicatedObjects, setDuplicatedOb
                     } else if (eventData.type === 'ArmBot' && eventData) {
                         const createArmBotPoint = () => {
                             const pointUUID = THREE.MathUtils.generateUUID();
-                            const vehiclePoint = (eventData as Types.ArmBotEventsSchema)?.points;
+                            const vehiclePoint = (eventData as SimulationTypes.ArmBotEventsSchema)?.points;
                             const hasActions = vehiclePoint?.actions !== undefined;
 
                             const defaultAction = {
@@ -460,9 +461,9 @@ const DuplicationControls = ({ itemsGroupRef, duplicatedObjects, setDuplicatedOb
                         newEventData.position = newFloorItem.position;
                         newEventData.rotation = [obj.rotation.x, obj.rotation.y, obj.rotation.z];
 
-                        setSimulationStates((prevEvents: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema | Types.ArmBotEventsSchema)[]) => [
+                        setSimulationStates((prevEvents: (SimulationTypes.ConveyorEventsSchema | SimulationTypes.VehicleEventsSchema | SimulationTypes.StaticMachineEventsSchema | SimulationTypes.ArmBotEventsSchema)[]) => [
                             ...(prevEvents || []),
-                            newEventData as Types.ArmBotEventsSchema
+                            newEventData as SimulationTypes.ArmBotEventsSchema
                         ]);
 
                         socket.emit("v2:model-asset:add", data);

app/src/modules/scene/controls/selection/moveControls.tsx

@@ -5,6 +5,7 @@ import { useFloorItems, useSelectedAssets, useSimulationStates, useSocketStore,
 // import { setFloorItemApi } from '../../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi';
 import { toast } from "react-toastify";
 import * as Types from "../../../../types/world/worldTypes";
+import * as SimulationTypes from "../../../../types/simulation";
 import { detectModifierKeys } from "../../../../utils/shortcutkeys/detectModifierKeys";
 
 function MoveControls({ movedObjects, setMovedObjects, itemsGroupRef, copiedObjects, setCopiedObjects, pastedObjects, setpastedObjects, duplicatedObjects, setDuplicatedObjects, selectionGroup, rotatedObjects, setRotatedObjects, boundingBoxRef }: any) {
@@ -183,7 +184,7 @@ function MoveControls({ movedObjects, setMovedObjects, itemsGroupRef, copiedObje
                     return updatedItems;
                 });
 
-                let eventData: Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema | Types.ArmBotEventsSchema | undefined = simulationStates.find((events) => events.modeluuid === obj.userData.modeluuid);
+                let eventData: SimulationTypes.ConveyorEventsSchema | SimulationTypes.VehicleEventsSchema | SimulationTypes.StaticMachineEventsSchema | SimulationTypes.ArmBotEventsSchema | undefined = simulationStates.find((events) => events.modeluuid === obj.userData.modeluuid);
 
                 const email = localStorage.getItem("email");
                 const organization = email ? email.split("@")[1].split(".")[0] : "default";
@@ -194,7 +195,7 @@ function MoveControls({ movedObjects, setMovedObjects, itemsGroupRef, copiedObje
                         const backendEventData = {
                             type: 'Conveyor',
                             points: eventData.points,
-                            speed: (eventData as Types.ConveyorEventsSchema)?.speed
+                            speed: (eventData as SimulationTypes.ConveyorEventsSchema)?.speed
                         };
 
                         //REST
@@ -232,7 +233,7 @@ function MoveControls({ movedObjects, setMovedObjects, itemsGroupRef, copiedObje
                         newEventData.position = newFloorItem.position;
                         newEventData.rotation = [obj.rotation.x, obj.rotation.y, obj.rotation.z];
 
-                        setSimulationStates((prevEvents: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema | Types.ArmBotEventsSchema)[]) => {
+                        setSimulationStates((prevEvents: (SimulationTypes.ConveyorEventsSchema | SimulationTypes.VehicleEventsSchema | SimulationTypes.StaticMachineEventsSchema | SimulationTypes.ArmBotEventsSchema)[]) => {
                             const updatedEvents = (prevEvents || []).map(event =>
                                 event.modeluuid === newFloorItem.modeluuid
                                     ? { ...event, ...newEventData }
@@ -284,7 +285,7 @@ function MoveControls({ movedObjects, setMovedObjects, itemsGroupRef, copiedObje
                         newEventData.position = newFloorItem.position;
                         newEventData.rotation = [obj.rotation.x, obj.rotation.y, obj.rotation.z];
 
-                        setSimulationStates((prevEvents: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema | Types.ArmBotEventsSchema)[]) => {
+                        setSimulationStates((prevEvents: (SimulationTypes.ConveyorEventsSchema | SimulationTypes.VehicleEventsSchema | SimulationTypes.StaticMachineEventsSchema | SimulationTypes.ArmBotEventsSchema)[]) => {
                             const updatedEvents = (prevEvents || []).map(event =>
                                 event.modeluuid === newFloorItem.modeluuid
                                     ? { ...event, ...newEventData }
@@ -337,7 +338,7 @@ function MoveControls({ movedObjects, setMovedObjects, itemsGroupRef, copiedObje
                         newEventData.position = newFloorItem.position;
                         newEventData.rotation = [obj.rotation.x, obj.rotation.y, obj.rotation.z];
 
-                        setSimulationStates((prevEvents: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema | Types.ArmBotEventsSchema)[]) => {
+                        setSimulationStates((prevEvents: (SimulationTypes.ConveyorEventsSchema | SimulationTypes.VehicleEventsSchema | SimulationTypes.StaticMachineEventsSchema | SimulationTypes.ArmBotEventsSchema)[]) => {
                             const updatedEvents = (prevEvents || []).map(event =>
                                 event.modeluuid === newFloorItem.modeluuid
                                     ? { ...event, ...newEventData }
@@ -390,7 +391,7 @@ function MoveControls({ movedObjects, setMovedObjects, itemsGroupRef, copiedObje
                         newEventData.position = newFloorItem.position;
                         newEventData.rotation = [obj.rotation.x, obj.rotation.y, obj.rotation.z];
 
-                        setSimulationStates((prevEvents: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema | Types.ArmBotEventsSchema)[]) => {
+                        setSimulationStates((prevEvents: (SimulationTypes.ConveyorEventsSchema | SimulationTypes.VehicleEventsSchema | SimulationTypes.StaticMachineEventsSchema | SimulationTypes.ArmBotEventsSchema)[]) => {
                             const updatedEvents = (prevEvents || []).map(event =>
                                 event.modeluuid === newFloorItem.modeluuid
                                     ? { ...event, ...newEventData }

app/src/modules/scene/controls/selection/rotateControls.tsx

@@ -5,6 +5,7 @@ import { useFloorItems, useSelectedAssets, useSimulationStates, useSocketStore,
 // import { setFloorItemApi } from '../../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi';
 import { toast } from "react-toastify";
 import * as Types from "../../../../types/world/worldTypes";
+import * as SimulationTypes from "../../../../types/simulation";
 import { setFloorItemApi } from "../../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi";
 
 function RotateControls({ rotatedObjects, setRotatedObjects, movedObjects, setMovedObjects, itemsGroupRef, copiedObjects, setCopiedObjects, pastedObjects, setpastedObjects, duplicatedObjects, setDuplicatedObjects, selectionGroup, boundingBoxRef }: any) {
@@ -184,7 +185,7 @@ function RotateControls({ rotatedObjects, setRotatedObjects, movedObjects, setMo
                     return updatedItems;
                 });
 
-                let eventData: Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema | Types.ArmBotEventsSchema | undefined = simulationStates.find((events) => events.modeluuid === obj.userData.modeluuid);
+                let eventData: SimulationTypes.ConveyorEventsSchema | SimulationTypes.VehicleEventsSchema | SimulationTypes.StaticMachineEventsSchema | SimulationTypes.ArmBotEventsSchema | undefined = simulationStates.find((events) => events.modeluuid === obj.userData.modeluuid);
 
                 const email = localStorage.getItem("email");
                 const organization = email ? email.split("@")[1].split(".")[0] : "default";
@@ -195,7 +196,7 @@ function RotateControls({ rotatedObjects, setRotatedObjects, movedObjects, setMo
                         const backendEventData = {
                             type: 'Conveyor',
                             points: eventData.points,
-                            speed: (eventData as Types.ConveyorEventsSchema)?.speed
+                            speed: (eventData as SimulationTypes.ConveyorEventsSchema)?.speed
                         };
 
                         // REST
@@ -233,7 +234,7 @@ function RotateControls({ rotatedObjects, setRotatedObjects, movedObjects, setMo
                         newEventData.position = newFloorItem.position;
                         newEventData.rotation = [obj.rotation.x, obj.rotation.y, obj.rotation.z];
 
-                        setSimulationStates((prevEvents: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema | Types.ArmBotEventsSchema)[]) => {
+                        setSimulationStates((prevEvents: (SimulationTypes.ConveyorEventsSchema | SimulationTypes.VehicleEventsSchema | SimulationTypes.StaticMachineEventsSchema | SimulationTypes.ArmBotEventsSchema)[]) => {
                             const updatedEvents = (prevEvents || []).map(event =>
                                 event.modeluuid === newFloorItem.modeluuid
                                     ? { ...event, ...newEventData }
@@ -286,7 +287,7 @@ function RotateControls({ rotatedObjects, setRotatedObjects, movedObjects, setMo
                         newEventData.position = newFloorItem.position;
                         newEventData.rotation = [obj.rotation.x, obj.rotation.y, obj.rotation.z];
 
-                        setSimulationStates((prevEvents: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema | Types.ArmBotEventsSchema)[]) => {
+                        setSimulationStates((prevEvents: (SimulationTypes.ConveyorEventsSchema | SimulationTypes.VehicleEventsSchema | SimulationTypes.StaticMachineEventsSchema | SimulationTypes.ArmBotEventsSchema)[]) => {
                             const updatedEvents = (prevEvents || []).map(event =>
                                 event.modeluuid === newFloorItem.modeluuid
                                     ? { ...event, ...newEventData }
@@ -339,7 +340,7 @@ function RotateControls({ rotatedObjects, setRotatedObjects, movedObjects, setMo
                         newEventData.position = newFloorItem.position;
                         newEventData.rotation = [obj.rotation.x, obj.rotation.y, obj.rotation.z];
 
-                        setSimulationStates((prevEvents: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema | Types.ArmBotEventsSchema)[]) => {
+                        setSimulationStates((prevEvents: (SimulationTypes.ConveyorEventsSchema | SimulationTypes.VehicleEventsSchema | SimulationTypes.StaticMachineEventsSchema | SimulationTypes.ArmBotEventsSchema)[]) => {
                             const updatedEvents = (prevEvents || []).map(event =>
                                 event.modeluuid === newFloorItem.modeluuid
                                     ? { ...event, ...newEventData }
@@ -392,7 +393,7 @@ function RotateControls({ rotatedObjects, setRotatedObjects, movedObjects, setMo
                         newEventData.position = newFloorItem.position;
                         newEventData.rotation = [obj.rotation.x, obj.rotation.y, obj.rotation.z];
 
-                        setSimulationStates((prevEvents: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema | Types.ArmBotEventsSchema)[]) => {
+                        setSimulationStates((prevEvents: (SimulationTypes.ConveyorEventsSchema | SimulationTypes.VehicleEventsSchema | SimulationTypes.StaticMachineEventsSchema | SimulationTypes.ArmBotEventsSchema)[]) => {
                             const updatedEvents = (prevEvents || []).map(event =>
                                 event.modeluuid === newFloorItem.modeluuid
                                     ? { ...event, ...newEventData }

app/src/modules/scene/controls/selection/selectionControls.tsx

@@ -8,6 +8,7 @@ import BoundingBox from "./boundingBoxHelper";
 import { toast } from "react-toastify";
 // import { deleteFloorItem } from '../../../../services/factoryBuilder/assest/floorAsset/deleteFloorItemApi';
 import * as Types from "../../../../types/world/worldTypes";
+import * as SimulationTypes from "../../../../types/simulation";
 
 import DuplicationControls from "./duplicationControls";
 import CopyPasteControls from "./copyPasteControls";
@@ -245,7 +246,7 @@ const SelectionControls: React.FC = () => {
                     }
                 });
 
-                setSimulationStates((prevEvents: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema | Types.ArmBotEventsSchema)[]) => {
+                setSimulationStates((prevEvents: (SimulationTypes.ConveyorEventsSchema | SimulationTypes.VehicleEventsSchema | SimulationTypes.StaticMachineEventsSchema | SimulationTypes.ArmBotEventsSchema)[]) => {
                     const updatedEvents = (prevEvents || []).filter(event => event.modeluuid !== selectedMesh.uuid);
                     return updatedEvents;
                 });

app/src/modules/scene/world/world.tsx

@@ -55,7 +55,6 @@ import DrieHtmlTemp from "../mqttTemp/drieHtmlTemp";
 import ZoneGroup from "../../builder/groups/zoneGroup";
 import useModuleStore from "../../../store/useModuleStore";
 import NavMeshCreator from "../../builder/agv/navMeshCreator";
-import ArmReplace from "../../simulation/ik/ArmReplace";
 
 export default function World() {
   const state = useThree<Types.ThreeState>(); // Importing the state from the useThree hook, which contains the scene, camera, and other Three.js elements.
@@ -110,8 +109,7 @@ export default function World() {
 
   const cursorPosition = new THREE.Vector3(); // 3D vector for storing the cursor position.
 
-  const [selectedItemsIndex, setSelectedItemsIndex] =
+  const [selectedItemsIndex, setSelectedItemsIndex] = useState<Types.Number | null>(null); // State for tracking the index of the selected item.
-    useState<Types.Number | null>(null); // State for tracking the index of the selected item.
   const { activeLayer, setActiveLayer } = useActiveLayer(); // State that changes based on which layer the user chooses in Layers.jsx.
   const { toggleView, setToggleView } = useToggleView(); // State for toggling between 2D and 3D.
   const { toolMode, setToolMode } = useToolMode();
@@ -371,9 +369,6 @@ export default function World() {
 
       <NavMeshCreator lines={lines} />
 
-      {/* replacing exsisting arms with rigged ones */}
-      <ArmReplace />
-
     </>
   );
 }

app/src/modules/simulation/armbot/ArmBot.tsx

@@ -0,0 +1,62 @@
+import React, { useEffect, useState } from "react";
+import { useThree } from "@react-three/fiber";
+import useModuleStore from "../../../store/useModuleStore";
+import { useSimulationStates } from "../../../store/store";
+import * as SimulationTypes from '../../../types/simulation';
+import { ArmbotInstances } from "./ArmBotInstances";
+
+interface ArmBotState {
+    uuid: string;
+    position: [number, number, number];
+    rotation: [number, number, number];
+    status: string;
+    material: string;
+    triggerId: string;
+    connections: any
+}
+
+const ArmBot: React.FC = () => {
+    const { activeModule } = useModuleStore();
+    const { scene } = useThree();
+    const { simulationStates } = useSimulationStates();
+    const [armBots, setArmBots] = useState<ArmBotState[]>([]);
+
+    useEffect(() => {
+        const filtered = simulationStates.filter((s): s is SimulationTypes.ArmBotEventsSchema => s.type === "ArmBot");
+        const initialStates: ArmBotState[] = filtered.map(bot => ({
+            uuid: bot.modeluuid,
+            position: bot.position,
+            rotation: bot.rotation,
+            status: "idle",
+            material: "default",
+            triggerId: '',
+            connections: bot.points.connections
+        }));
+        setArmBots(initialStates);
+    }, [simulationStates]);
+
+    useEffect(() => {
+        armBots.forEach((bot) => {
+            const object = scene.getObjectByProperty("uuid", bot.uuid);
+            if (object) {
+                object.visible = activeModule !== "simulation";
+            }
+        });
+    }, [scene, activeModule, armBots]);
+
+    return (
+        <>
+            {activeModule === "simulation" &&
+                armBots.map((bot, i) => (
+                    <ArmbotInstances
+                        key={i}
+                        index={i}
+                        armBot={bot}
+                        setArmBots={setArmBots}
+                    />
+                ))}
+        </>
+    );
+};
+
+export default ArmBot;

app/src/modules/simulation/armbot/ArmBotInstances.tsx

@@ -0,0 +1,25 @@
+import IkInstances from "./IkInstances";
+import armModel from "../../../assets/gltf-glb/rigged/ik_arm_4.glb";
+
+interface ArmBotState {
+    uuid: string;
+    position: [number, number, number];
+    rotation: [number, number, number];
+    status: string;
+    material: string;
+    triggerId: string;
+    connections: any
+}
+
+interface ArmbotInstancesProps {
+    index: number;
+    armBot: ArmBotState;
+    setArmBots: (armBots: ArmBotState[]) => void;
+}
+
+export const ArmbotInstances: React.FC<ArmbotInstancesProps> = ({ index, armBot, setArmBots }) => {
+
+    return (
+        <IkInstances key={index} modelUrl={armModel} position={armBot.position} rotation={armBot.rotation} />
+    );
+};

app/src/modules/simulation/armbot/IKAnimationController.tsx

@@ -0,0 +1,101 @@
+import { useEffect, useMemo, useState } from "react";
+import { useFrame } from "@react-three/fiber";
+import * as THREE from "three";
+
+const IKAnimationController = ({
+    ikSolver,
+    process,
+    selectedTrigger,
+    targetBoneName,
+}: {
+    ikSolver: any;
+    process: {
+        trigger: string;
+        start: THREE.Vector3;
+        end: THREE.Vector3;
+        speed: number;
+    }[];
+    selectedTrigger: string;
+    targetBoneName: string;
+}) => {
+    const [progress, setProgress] = useState(0);
+    const restSpeed = 0.1;
+
+    useEffect(() => {
+        setProgress(0);
+    }, [selectedTrigger]);
+
+    const processedCurves = useMemo(() => {
+        const restPosition = new THREE.Vector3(0.2, 2.3, 1.6);
+        return process.map((p) => {
+            const mid = new THREE.Vector3(
+                (p.start.x + p.end.x) / 1,
+                Math.max(p.start.y, p.end.y) + 0.8,
+                (p.start.z + p.end.z) / 0.9
+            );
+            const points = [
+                restPosition.clone(),
+                p.start.clone(),
+                mid.clone(),
+                p.end.clone(),
+                restPosition.clone(),
+            ];
+            const curve = new THREE.CatmullRomCurve3(points);
+            const restToStartDist = points[0].distanceTo(points[1]);
+            const startToEndDist = points[1].distanceTo(points[3]);
+            const endToRestDist = points[3].distanceTo(points[4]);
+
+            const totalDist = restToStartDist + startToEndDist + endToRestDist;
+            const restToStartRange = [0, restToStartDist / totalDist];
+            const startToEndRange = [
+                restToStartRange[1],
+                restToStartRange[1] + startToEndDist / totalDist,
+            ];
+            const endToRestRange = [startToEndRange[1], 1];
+
+            return {
+                trigger: p.trigger,
+                curve,
+                speed: p.speed,
+                restToStartRange,
+                startToEndRange,
+                endToRestRange,
+            };
+        });
+    }, [process]);
+
+    const activeCurve = useMemo(() => {
+        return processedCurves.find((c) => c.trigger === selectedTrigger);
+    }, [processedCurves, selectedTrigger]);
+
+    useFrame((_, delta) => {
+        if (!ikSolver || !activeCurve) return;
+
+        const { curve, speed, startToEndRange } = activeCurve;
+        const targetBone = ikSolver.mesh.skeleton.bones.find(
+            (b: any) => b.name === targetBoneName
+        );
+        if (!targetBone) return;
+
+        let currentSpeed = restSpeed;
+        if (progress >= startToEndRange[0] && progress < startToEndRange[1]) {
+            currentSpeed = speed;
+        }
+
+        setProgress((prev) => {
+            const next = prev + delta * currentSpeed;
+            if (next >= 1) {
+                targetBone.position.copy(curve.getPoint(1));
+                return 1;
+            }
+            targetBone.position.copy(curve.getPoint(next));
+            return next;
+        });
+
+        ikSolver.update();
+    });
+
+    return null;
+};
+
+export default IKAnimationController;

app/src/modules/simulation/armbot/IkInstances.tsx

@@ -0,0 +1,128 @@
+import * as THREE from "three";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useLoader } from "@react-three/fiber";
+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 { CCDIKSolver, CCDIKHelper, } from "three/examples/jsm/animation/CCDIKSolver";
+import IKAnimationController from "./IKAnimationController";
+
+const IkInstances = ({ modelUrl, position, rotation }: { modelUrl: string; position: [number, number, number]; rotation: [number, number, number]; }) => {
+    const [ikSolver, setIkSolver] = useState<any>(null);
+    const [selectedTrigger, setSelectedTrigger] = useState<string>("idle");
+    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/"
+        );
+        loader.setDRACOLoader(draco);
+    });
+    const cloned = useMemo(() => clone(gltf.scene), [gltf]);
+    const groupRef = useRef<any>(null);
+    const [selectedArm, setSelectedArm] = useState<THREE.Group>();
+    const targetBoneName = "Target";
+    const skinnedMeshName = "link_0";
+
+    const process = useMemo(() => [
+        {
+            trigger: "Trigger1",
+            start: new THREE.Vector3(-0.75, 1.5, -2.2),
+            end: new THREE.Vector3(0, 1.2, 2.2),
+            speed: 0.25,
+        },
+        {
+            trigger: "Trigger2",
+            start: new THREE.Vector3(0, 1.2, 2.2),
+            end: new THREE.Vector3(0.75, 1.5, -2.2),
+            speed: 0.22,
+        }
+    ], []);
+
+    useEffect(() => {
+        if (!gltf) return;
+        const OOI: any = {};
+        cloned.traverse((n: any) => {
+            if (n.name === targetBoneName) OOI.Target_Bone = n;
+            if (n.name === skinnedMeshName) OOI.Skinned_Mesh = n;
+        });
+
+        if (!OOI.Target_Bone || !OOI.Skinned_Mesh) return;
+
+        const iks = [
+            {
+                target: 7,
+                effector: 6,
+                links: [
+                    {
+                        index: 5,
+                        enabled: true,
+                        rotationMin: new THREE.Vector3(-Math.PI / 2, 0, 0),
+                        rotationMax: new THREE.Vector3(Math.PI / 2, 0, 0),
+                    },
+                    {
+                        index: 4,
+                        enabled: true,
+                        rotationMin: new THREE.Vector3(-Math.PI / 2, 0, 0),
+                        rotationMax: new THREE.Vector3(0, 0, 0),
+                    },
+                    {
+                        index: 3,
+                        enabled: true,
+                        rotationMin: new THREE.Vector3(0, 0, 0),
+                        rotationMax: new THREE.Vector3(2, 0, 0),
+                    },
+                    { index: 1, enabled: true, limitation: new THREE.Vector3(0, 1, 0) },
+                    { index: 0, enabled: false, limitation: new THREE.Vector3(0, 0, 0) },
+                ],
+            },
+        ];
+
+        const solver = new CCDIKSolver(OOI.Skinned_Mesh, iks);
+        setIkSolver(solver);
+
+        const helper = new CCDIKHelper(OOI.Skinned_Mesh, iks, 0.05);
+        // groupRef.current.add(helper);
+
+    }, [gltf]);
+
+    useEffect(() => {
+        const triggers = ['Trigger1', 'Trigger2'];
+        let index = 0;
+
+        const cycleTriggers = setInterval(() => {
+            setSelectedTrigger(triggers[index]);
+            index = (index + 1) % triggers.length;
+        }, 10000);
+
+        return () => clearInterval(cycleTriggers);
+    }, []);
+
+    return (
+        <>
+            <group
+                ref={groupRef}
+                onClick={(e) => {
+                    e.stopPropagation();
+                    setSelectedArm(groupRef.current?.getObjectByName(targetBoneName))
+                }}
+            >
+                <primitive
+                    object={cloned}
+                    position={position}
+                    rotation={rotation}
+                    scale={[1, 1, 1]}
+                    name={`arm-bot`}
+                />
+            </group>
+            <IKAnimationController
+                ikSolver={ikSolver}
+                process={process}
+                selectedTrigger={selectedTrigger}
+                targetBoneName={targetBoneName}
+            />
+            {/* {selectedArm && <TransformControls object={selectedArm} />} */}
+        </>
+    );
+};
+
+export default IkInstances;

app/src/modules/simulation/behaviour/behaviour.tsx

@@ -1,88 +0,0 @@
-import { useFloorItems, useSimulationStates } from '../../../store/store';
-import * as THREE from 'three';
-import * as Types from '../../../types/world/worldTypes';
-import { useEffect } from 'react';
-
-function Behaviour() {
-    const { setSimulationStates } = useSimulationStates();
-    const { floorItems } = useFloorItems();
-
-    useEffect(() => {
-        const newPaths: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema)[] = [];
-
-        // floorItems.forEach((item: Types.FloorItemType) => {
-        //     if (item.modelfileID === "672a090f80d91ac979f4d0bd") {
-        //         const point1Position = new THREE.Vector3(0, 0.85, 2.2);
-        //         const middlePointPosition = new THREE.Vector3(0, 0.85, 0);
-        //         const point2Position = new THREE.Vector3(0, 0.85, -2.2);
-                
-        //         const point1UUID = THREE.MathUtils.generateUUID();
-        //         const middlePointUUID = THREE.MathUtils.generateUUID();
-        //         const point2UUID = THREE.MathUtils.generateUUID();
-                
-        //         const newPath: Types.ConveyorEventsSchema = {
-        //             modeluuid: item.modeluuid,
-        //             modelName: item.modelname,
-        //             type: 'Conveyor',
-        //             points: [
-        //                 {
-        //                     uuid: point1UUID,
-        //                     position: [point1Position.x, point1Position.y, point1Position.z],
-        //                     rotation: [0, 0, 0],
-        //                     actions: [{ uuid: THREE.MathUtils.generateUUID(), name: 'Action 1', type: 'Inherit', material: 'Inherit', delay: 'Inherit', spawnInterval: 'Inherit', isUsed: true }],
-        //                     triggers: [],
-        //                     connections: { source: { modelUUID: item.modeluuid, pointUUID: point1UUID }, targets: [] },
-        //                 },
-        //                 {
-        //                     uuid: middlePointUUID,
-        //                     position: [middlePointPosition.x, middlePointPosition.y, middlePointPosition.z],
-        //                     rotation: [0, 0, 0],
-        //                     actions: [{ uuid: THREE.MathUtils.generateUUID(), name: 'Action 1', type: 'Inherit', material: 'Inherit', delay: 'Inherit', spawnInterval: 'Inherit', isUsed: true }],
-        //                     triggers: [],
-        //                     connections: { source: { modelUUID: item.modeluuid, pointUUID: middlePointUUID }, targets: [] },
-        //                 },
-        //                 {
-        //                     uuid: point2UUID,
-        //                     position: [point2Position.x, point2Position.y, point2Position.z],
-        //                     rotation: [0, 0, 0],
-        //                     actions: [{ uuid: THREE.MathUtils.generateUUID(), name: 'Action 1', type: 'Inherit', material: 'Inherit', delay: 'Inherit', spawnInterval: 'Inherit', isUsed: true }],
-        //                     triggers: [],
-        //                     connections: { source: { modelUUID: item.modeluuid, pointUUID: point2UUID }, targets: [] },
-        //                 },
-        //             ],
-        //             position: [...item.position],
-        //             rotation: [item.rotation.x, item.rotation.y, item.rotation.z],
-        //             speed: 'Inherit',
-        //         };
-
-        //         newPaths.push(newPath);
-        //     } else if (item.modelfileID === "67e3da19c2e8f37134526e6a") {
-        //         const pointUUID = THREE.MathUtils.generateUUID();
-        //         const pointPosition = new THREE.Vector3(0, 1.3, 0);
-
-        //         const newVehiclePath: Types.VehicleEventsSchema = {
-        //             modeluuid: item.modeluuid,
-        //             modelName: item.modelname,
-        //             type: 'Vehicle',
-        //             point: {
-        //                 uuid: pointUUID,
-        //                 position: [pointPosition.x, pointPosition.y, pointPosition.z],
-        //                 actions: { uuid: THREE.MathUtils.generateUUID(), name: 'Action 1', type: 'Start', start: {}, hitCount: 1, end: {}, buffer: 0 },
-        //                 connections: { source: { modelUUID: item.modeluuid, pointUUID: pointUUID }, targets: [] },
-        //                 speed: 2,
-        //             },
-        //             position: [...item.position],
-        //         };
-
-        //         newPaths.push(newVehiclePath);
-        //     }
-        // });
-
-        // setSimulationStates(newPaths);
-        // console.log('floorItems: ', floorItems);
-    }, [floorItems]);
-
-    return null;
-}
-
-export default Behaviour;

app/src/modules/simulation/ik/ArmReplace.tsx

@@ -1,56 +0,0 @@
-import React, { useEffect } from "react";
-import { useThree } from "@react-three/fiber";
-
-// store
-import useModuleStore from "../../../store/useModuleStore";
-
-// functions
-import { findLinkObjects } from "./functions/findLinkObjects";
-// components
-import { MultiGLTFInstances } from "./MultiGLTFInstances";
-
-// impory model from model folder
-import armModel from "../../../assets/gltf-glb/rigged/ik_arm_4.glb";
-
-// Main component to include the logic
-const ArmReplace: React.FC = () => {
-  const { activeModule } = useModuleStore();
-
-  const { scene } = useThree(); // Access the Three.js scene from the React Fiber context
-
-  // State to store positions, rotations, and count
-  const [positions, setPositions] = React.useState<[number, number, number][]>(
-    []
-  );
-  const [rotations, setRotations] = React.useState<[number, number, number][]>(
-    []
-  );
-  const [count, setCount] = React.useState<string[]>([]);
-
-  useEffect(() => {
-    // Call the function to find objects and update states
-    findLinkObjects(
-      scene,
-      setPositions,
-      setRotations,
-      setCount,
-      activeModule === "simulation" ? false : true
-    );
-  }, [scene, activeModule]); // Re-run this effect if the scene changes or activeModule changes
-
-  return (
-    <>
-      {useModuleStore.getState().activeModule === "simulation" &&
-        count.map((_, i: number) => (
-          <MultiGLTFInstances
-            index={i}
-            modelUrl={armModel}
-            position={positions[i]}
-            rotation={rotations[i]}
-          />
-        ))}
-    </>
-  );
-};
-
-export default ArmReplace;

app/src/modules/simulation/ik/MultiGLTFInstances.tsx

@@ -1,43 +0,0 @@
-import { useLoader } from "@react-three/fiber";
-import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
-import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
-import { clone } from "three/examples/jsm/utils/SkeletonUtils";
-
-interface MultiGLTFInstancesProps {
-  index: number;
-  modelUrl: string;
-  position: [number, number, number];
-  rotation: [number, number, number];
-}
-
-export const MultiGLTFInstances: React.FC<MultiGLTFInstancesProps> = ({
-  index,
-  modelUrl,
-  position,
-  rotation,
-}) => {
-  // Load GLTF model with DRACO loader for compression
-  const originalGltf = useLoader(GLTFLoader, modelUrl, (loader) => {
-    const draco = new DRACOLoader();
-    draco.setDecoderPath(
-      "https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/libs/draco/"
-    );
-    loader.setDRACOLoader(draco);
-  });
-
-  // Clone the model for independent transformations
-  const cloned = clone(originalGltf.scene);
-
-  // Render the cloned model
-  return (
-    <mesh>
-      <primitive
-        name="rigged_arm"
-        key={index}
-        object={cloned}
-        position={position}
-        rotation={rotation}
-      />
-    </mesh>
-  );
-};

app/src/modules/simulation/ik/functions/findLinkObjects.ts

@@ -1,43 +0,0 @@
-import { Object3D, Vector3 } from "three";
-
-// Function to find objects named 'link_0' and update positions, rotations, and count
-export const findLinkObjects = (
-  scene: Object3D,
-  setPositions: React.Dispatch<
-    React.SetStateAction<[number, number, number][]>
-  >,
-  setRotations: React.Dispatch<
-    React.SetStateAction<[number, number, number][]>
-  >,
-  setCount: React.Dispatch<React.SetStateAction<string[]>>,
-  visibility: boolean
-) => {
-  const positions: [number, number, number][] = [];
-  const rotations: [number, number, number][] = [];
-  const count: string[] = [];
-  let i = 0;
-
-  scene.traverse((object) => {
-    if (object.name === "link_0") {
-      if (object.parent && object.type !== "SkinnedMesh") {
-        // count
-        count[i] = object.uuid;
-        i++;
-        // Save the position and rotation of the parent object
-        const { x: px, y: py, z: pz } = object.parent.position;
-        positions.push([px, py, pz]);
-
-        const { x: rx, y: ry, z: rz } = object.parent.rotation;
-        rotations.push([rx, ry, rz]);
-
-        // Change visibility of the object
-        object.visible = visibility;
-      }
-    }
-  });
-
-  // Update the state with the collected positions, rotations, and count
-  setPositions(positions);
-  setRotations(rotations);
-  setCount(count);
-};

app/src/modules/simulation/path/pathConnector.tsx

@@ -2,6 +2,7 @@ import { useFrame, useThree } from '@react-three/fiber';
 import React, { useEffect, useRef, useState } from 'react';
 import * as THREE from 'three';
 import * as Types from '../../../types/world/worldTypes';
+import * as SimulationTypes from '../../../types/simulation';
 import { QuadraticBezierLine } from '@react-three/drei';
 import { useDeleteTool, useIsConnecting, useRenderDistance, useSimulationStates, useSocketStore } from '../../../store/store';
 import useModuleStore from '../../../store/useModuleStore';
@@ -339,7 +340,7 @@ function PathConnector({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObjec
         updateBackend(updatedPathDetails);
     };
 
-    const updateBackend = async (updatedPaths: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema | Types.ArmBotEventsSchema)[]) => {
+    const updateBackend = async (updatedPaths: (SimulationTypes.ConveyorEventsSchema | SimulationTypes.VehicleEventsSchema | SimulationTypes.StaticMachineEventsSchema | SimulationTypes.ArmBotEventsSchema)[]) => {
         if (updatedPaths.length === 0) return;
         const email = localStorage.getItem("email");
         const organization = email ? email.split("@")[1].split(".")[0] : "";
@@ -852,11 +853,11 @@ function PathConnector({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObjec
         }
     });
 
-    const removeConnections = (connection1: { model: string; point: string }, connection2: { model: string; point: string }) => {
+    const removeConnection = (connection1: { model: string; point: string }, connection2: { model: string; point: string }) => {
         const updatedStates = simulationStates.map(state => {
             // Handle Conveyor (which has multiple points)
             if (state.type === 'Conveyor') {
-                const updatedConveyor: Types.ConveyorEventsSchema = {
+                const updatedConveyor: SimulationTypes.ConveyorEventsSchema = {
                     ...state,
                     points: state.points.map(point => {
                         // Check if this point is either connection1 or connection2
@@ -887,7 +888,7 @@ function PathConnector({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObjec
                 if ((state.modeluuid === connection1.model && state.points.uuid === connection1.point) ||
                     (state.modeluuid === connection2.model && state.points.uuid === connection2.point)) {
 
-                    const updatedVehicle: Types.VehicleEventsSchema = {
+                    const updatedVehicle: SimulationTypes.VehicleEventsSchema = {
                         ...state,
                         points: {
                             ...state.points,
@@ -913,7 +914,7 @@ function PathConnector({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObjec
                 if ((state.modeluuid === connection1.model && state.points.uuid === connection1.point) ||
                     (state.modeluuid === connection2.model && state.points.uuid === connection2.point)) {
 
-                    const updatedStaticMachine: Types.StaticMachineEventsSchema = {
+                    const updatedStaticMachine: SimulationTypes.StaticMachineEventsSchema = {
                         ...state,
                         points: {
                             ...state.points,
@@ -939,7 +940,7 @@ function PathConnector({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObjec
                 if ((state.modeluuid === connection1.model && state.points.uuid === connection1.point) ||
                     (state.modeluuid === connection2.model && state.points.uuid === connection2.point)) {
 
-                    const updatedArmBot: Types.ArmBotEventsSchema = {
+                    const updatedArmBot: SimulationTypes.ArmBotEventsSchema = {
                         ...state,
                         points: {
                             ...state.points,
@@ -1030,10 +1031,11 @@ function PathConnector({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObjec
                                                 const connection1 = { model: path.modeluuid, point: point.uuid }
                                                 const connection2 = { model: target.modelUUID, point: target.pointUUID }
 
-                                                removeConnections(connection1, connection2)
+                                                removeConnection(connection1, connection2)
 
                                             }
                                         }}
+                                        depthWrite={false}
                                         userData={target}
                                     />
                                 );
@@ -1082,9 +1084,10 @@ function PathConnector({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObjec
                                             const connection1 = { model: path.modeluuid, point: path.points.uuid }
                                             const connection2 = { model: target.modelUUID, point: target.pointUUID }
 
-                                            removeConnections(connection1, connection2)
+                                            removeConnection(connection1, connection2)
                                         }
                                     }}
+                                    depthWrite={false}
                                     userData={target}
                                 />
                             );
@@ -1135,10 +1138,11 @@ function PathConnector({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObjec
                                             const connection1 = { model: path.modeluuid, point: path.points.uuid }
                                             const connection2 = { model: target.modelUUID, point: target.pointUUID }
 
-                                            removeConnections(connection1, connection2)
+                                            removeConnection(connection1, connection2)
 
                                         }
                                     }}
+                                    depthWrite={false}
                                     userData={target}
                                 />
                             );
@@ -1160,6 +1164,7 @@ function PathConnector({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObjec
                     dashed
                     dashSize={1}
                     dashScale={20}
+                    depthWrite={false}
                 />
             )}
         </group>

app/src/modules/simulation/path/pathCreation.tsx

@@ -1,5 +1,5 @@
 import * as THREE from "three";
-import * as Types from "../../../types/world/worldTypes";
+import * as SimulationTypes from "../../../types/simulation";
 import { useRef, useState, useEffect, useMemo } from "react";
 import { Sphere, TransformControls } from "@react-three/drei";
 import {
@@ -94,7 +94,7 @@ function PathCreation({ pathsGroupRef, }: { pathsGroupRef: React.MutableRefObjec
 			} else {
 				return path;
 			}
-		}) as Types.ConveyorEventsSchema[];
+		}) as SimulationTypes.ConveyorEventsSchema[];
 
 		const updatedPath = updatedPaths.find(
 			(path) => path.type === "Conveyor" && path.points.some((point) => point.uuid === selectedActionSphere.points.uuid)
@@ -161,7 +161,7 @@ function PathCreation({ pathsGroupRef, }: { pathsGroupRef: React.MutableRefObjec
 		};
 	}, [eyeDropMode, editingPoint, previewPosition]);
 
-	const updateBackend = async (updatedPath: Types.VehicleEventsSchema | undefined) => {
+	const updateBackend = async (updatedPath: SimulationTypes.VehicleEventsSchema | undefined) => {
 		if (!updatedPath) return;
 		const email = localStorage.getItem("email");
 		const organization = email ? email.split("@")[1].split(".")[0] : "";
@@ -191,7 +191,7 @@ function PathCreation({ pathsGroupRef, }: { pathsGroupRef: React.MutableRefObjec
 			return path;
 		});
 
-		const updatedPath = updatedPaths.find((path): path is Types.VehicleEventsSchema => path.type === "Vehicle" && path.points.uuid === selectedActionSphere.points.uuid);
+		const updatedPath = updatedPaths.find((path): path is SimulationTypes.VehicleEventsSchema => path.type === "Vehicle" && path.points.uuid === selectedActionSphere.points.uuid);
 		updateBackend(updatedPath);
 
 		setSimulationStates(updatedPaths);
@@ -282,6 +282,7 @@ function PathCreation({ pathsGroupRef, }: { pathsGroupRef: React.MutableRefObjec
 							key={path.modeluuid}
 							ref={(el) => (groupRefs.current[path.modeluuid] = el!)}
 							position={path.position}
+							rotation={path.rotation}
 							onClick={(e) => {
 								if (isConnecting || eyeDropMode) return;
 								e.stopPropagation();
@@ -335,6 +336,7 @@ function PathCreation({ pathsGroupRef, }: { pathsGroupRef: React.MutableRefObjec
 							key={path.modeluuid}
 							ref={(el) => (groupRefs.current[path.modeluuid] = el!)}
 							position={path.position}
+							rotation={path.rotation}
 							onClick={(e) => {
 								if (isConnecting || eyeDropMode) return;
 								e.stopPropagation();
@@ -388,6 +390,7 @@ function PathCreation({ pathsGroupRef, }: { pathsGroupRef: React.MutableRefObjec
 							key={path.modeluuid}
 							ref={(el) => (groupRefs.current[path.modeluuid] = el!)}
 							position={path.position}
+							rotation={path.rotation}
 							onClick={(e) => {
 								if (isConnecting || eyeDropMode) return;
 								e.stopPropagation();

app/src/modules/simulation/process/processCreator.tsx

@@ -458,7 +458,7 @@ import { useThree } from "@react-three/fiber";
 import {
   ConveyorEventsSchema,
   VehicleEventsSchema,
-} from "../../../types/world/worldTypes";
+} from "../../../types/simulation";
 import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
 
 // Type definitions

app/src/modules/simulation/simulation.tsx

@@ -1,16 +1,11 @@
-import { useState, useEffect, useRef, useMemo } from "react";
+import { useState, useRef } from "react";
-import {
-  useSelectedActionSphere,
-  useSelectedPath,
-  useSimulationStates,
-} from "../../store/store";
 import * as THREE from "three";
-import Behaviour from "./behaviour/behaviour";
 import PathCreation from "./path/pathCreation";
 import PathConnector from "./path/pathConnector";
 import useModuleStore from "../../store/useModuleStore";
 import ProcessContainer from "./process/processContainer";
 import Agv from "../builder/agv/agv";
+import ArmBot from "./armbot/ArmBot";
 
 function Simulation() {
   const { activeModule } = useModuleStore();
@@ -21,24 +16,28 @@ function Simulation() {
 
   return (
     <>
-      <Behaviour />
       {activeModule === "simulation" && (
         <>
           <PathCreation pathsGroupRef={pathsGroupRef} />
+
           <PathConnector pathsGroupRef={pathsGroupRef} />
+
           <ProcessContainer
             processes={processes}
             setProcesses={setProcesses}
             agvRef={agvRef}
             MaterialRef={MaterialRef}
           />
+
           <Agv
             processes={processes}
             agvRef={agvRef}
             MaterialRef={MaterialRef}
           />
+
         </>
       )}
+      <ArmBot />
     </>
   );
 }

app/src/pages/Project.tsx

@@ -26,7 +26,7 @@ import KeyPressListener from "../utils/shortcutkeys/handleShortcutKeys";
 
 const Project: React.FC = () => {
   let navigate = useNavigate();
-  const { activeModule } = useModuleStore();
+  const { activeModule, setActiveModule } = useModuleStore();
   const { loadingProgress } = useLoadingProgress();
   const { setUserName } = useUserName();
   const { setOrganization } = useOrganization();
@@ -38,6 +38,7 @@ const Project: React.FC = () => {
     setFloorItems([]);
     setWallItems([]);
     setZones([]);
+    setActiveModule('builder')
     const email = localStorage.getItem("email");
     if (email) {
       const Organization = email!.split("@")[1].split(".")[0];

app/src/store/store.ts

@@ -1,500 +1,479 @@
 import * as THREE from "three";
 import * as Types from "../types/world/worldTypes";
+import * as SimulationTypes from "../types/simulation";
 import { create } from "zustand";
 import { io } from "socket.io-client";
 
 export const useSocketStore = create<any>((set: any, get: any) => ({
-  socket: null,
+    socket: null,
-  initializeSocket: (email: string, organization: string) => {
+    initializeSocket: (email: string, organization: string) => {
-    const existingSocket = get().socket;
+        const existingSocket = get().socket;
-    if (existingSocket) {
+        if (existingSocket) {
-      return;
+            return;
-    }
+        }
 
-    const socket = io(
+        const socket = io(
-      `http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/Builder`,
+            `http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/Builder`,
-      {
+            {
-        reconnection: true,
+                reconnection: true,
-        auth: { email, organization },
+                auth: { email, organization },
-      }
+            }
-    );
+        );
 
-    const visualizationSocket = io(
+        const visualizationSocket = io(
-      `http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/Visualization`,
+            `http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/Visualization`,
-      {
+            {
-        reconnection: true,
+                reconnection: true,
-        auth: { email, organization },
+                auth: { email, organization },
-      }
+            }
-    );
+        );
 
-    set({ socket, visualizationSocket });
+        set({ socket, visualizationSocket });
-  },
+    },
-  disconnectSocket: () => {
+    disconnectSocket: () => {
-    set((state: any) => {
+        set((state: any) => {
-      state.socket?.disconnect();
+            state.socket?.disconnect();
-      state.visualizationSocket?.disconnect();
+            state.visualizationSocket?.disconnect();
-      return { socket: null };
+            return { socket: null };
-    });
+        });
-  },
+    },
 }));
 
 export const useLoadingProgress = create<{
-  loadingProgress: number;
+    loadingProgress: number;
-  setLoadingProgress: (x: number) => void;
+    setLoadingProgress: (x: number) => void;
 }>((set) => ({
-  loadingProgress: 1,
+    loadingProgress: 1,
-  setLoadingProgress: (x: number) => set({ loadingProgress: x }),
+    setLoadingProgress: (x: number) => set({ loadingProgress: x }),
 }));
 
 export const useOrganization = create<any>((set: any) => ({
-  organization: "",
+    organization: "",
-  setOrganization: (x: any) => set(() => ({ organization: x })),
+    setOrganization: (x: any) => set(() => ({ organization: x })),
 }));
 
 export const useToggleView = create<any>((set: any) => ({
-  toggleView: false,
+    toggleView: false,
-  setToggleView: (x: any) => set(() => ({ toggleView: x })),
+    setToggleView: (x: any) => set(() => ({ toggleView: x })),
 }));
 
 export const useUpdateScene = create<any>((set: any) => ({
-  updateScene: false,
+    updateScene: false,
-  setUpdateScene: (x: any) => set(() => ({ updateScene: x })),
+    setUpdateScene: (x: any) => set(() => ({ updateScene: x })),
 }));
 
 export const useWalls = create<any>((set: any) => ({
-  walls: [],
+    walls: [],
-  setWalls: (x: any) => set(() => ({ walls: x })),
+    setWalls: (x: any) => set(() => ({ walls: x })),
 }));
 
 export const useZones = create<any>((set: any) => ({
-  zones: [],
+    zones: [],
-  setZones: (callback: any) =>
+    setZones: (callback: any) =>
-    set((state: any) => ({
+        set((state: any) => ({
-      zones: typeof callback === "function" ? callback(state.zones) : callback,
+            zones: typeof callback === "function" ? callback(state.zones) : callback,
-    })),
+        })),
 }));
 
 interface ZonePointsState {
-  zonePoints: THREE.Vector3[];
+    zonePoints: THREE.Vector3[];
-  setZonePoints: (points: THREE.Vector3[]) => void;
+    setZonePoints: (points: THREE.Vector3[]) => void;
 }
 
 export const useZonePoints = create<ZonePointsState>((set) => ({
-  zonePoints: [],
+    zonePoints: [],
-  setZonePoints: (points) => set({ zonePoints: points }),
+    setZonePoints: (points) => set({ zonePoints: points }),
 }));
 
 export const useSelectedItem = create<any>((set: any) => ({
-  selectedItem: { name: "", id: "" },
+    selectedItem: { name: "", id: "" },
-  setSelectedItem: (x: any) => set(() => ({ selectedItem: x })),
+    setSelectedItem: (x: any) => set(() => ({ selectedItem: x })),
 }));
 
 export const useSelectedAssets = create<any>((set: any) => ({
-  selectedAssets: [],
+    selectedAssets: [],
-  setSelectedAssets: (x: any) => set(() => ({ selectedAssets: x })),
+    setSelectedAssets: (x: any) => set(() => ({ selectedAssets: x })),
 }));
 
 export const useLayers = create<any>((set: any) => ({
-  Layers: 1,
+    Layers: 1,
-  setLayers: (x: any) => set(() => ({ Layers: x })),
+    setLayers: (x: any) => set(() => ({ Layers: x })),
 }));
 
 export const useCamPosition = create<any>((set: any) => ({
-  camPosition: { x: undefined, y: undefined, z: undefined },
+    camPosition: { x: undefined, y: undefined, z: undefined },
-  setCamPosition: (newCamPosition: any) => set({ camPosition: newCamPosition }),
+    setCamPosition: (newCamPosition: any) => set({ camPosition: newCamPosition }),
 }));
 
 export const useMenuVisible = create<any>((set: any) => ({
-  menuVisible: false,
+    menuVisible: false,
-  setMenuVisible: (x: any) => set(() => ({ menuVisible: x })),
+    setMenuVisible: (x: any) => set(() => ({ menuVisible: x })),
 }));
 
 export const useDeleteTool = create<any>((set: any) => ({
-  deleteTool: false,
+    deleteTool: false,
-  setDeleteTool: (x: any) => set(() => ({ deleteTool: x })),
+    setDeleteTool: (x: any) => set(() => ({ deleteTool: x })),
 }));
 
 export const useToolMode = create<any>((set: any) => ({
-  toolMode: null,
+    toolMode: null,
-  setToolMode: (x: any) => set(() => ({ toolMode: x })),
+    setToolMode: (x: any) => set(() => ({ toolMode: x })),
 }));
 
 export const useNewLines = create<any>((set: any) => ({
-  newLines: [],
+    newLines: [],
-  setNewLines: (x: any) => set(() => ({ newLines: x })),
+    setNewLines: (x: any) => set(() => ({ newLines: x })),
 }));
 
 export const useDeletedLines = create<any>((set: any) => ({
-  deletedLines: [],
+    deletedLines: [],
-  setDeletedLines: (x: any) => set(() => ({ deletedLines: x })),
+    setDeletedLines: (x: any) => set(() => ({ deletedLines: x })),
 }));
 
 export const useMovePoint = create<any>((set: any) => ({
-  movePoint: false,
+    movePoint: false,
-  setMovePoint: (x: any) => set(() => ({ movePoint: x })),
+    setMovePoint: (x: any) => set(() => ({ movePoint: x })),
 }));
 
 export const useTransformMode = create<any>((set: any) => ({
-  transformMode: null,
+    transformMode: null,
-  setTransformMode: (x: any) => set(() => ({ transformMode: x })),
+    setTransformMode: (x: any) => set(() => ({ transformMode: x })),
 }));
 
 export const useDeletePointOrLine = create<any>((set: any) => ({
-  deletePointOrLine: false,
+    deletePointOrLine: false,
-  setDeletePointOrLine: (x: any) => set(() => ({ deletePointOrLine: x })),
+    setDeletePointOrLine: (x: any) => set(() => ({ deletePointOrLine: x })),
 }));
 
 export const useFloorItems = create<any>((set: any) => ({
-  floorItems: null,
+    floorItems: null,
-  setFloorItems: (callback: any) =>
+    setFloorItems: (callback: any) =>
-    set((state: any) => ({
+        set((state: any) => ({
-      floorItems:
+            floorItems:
-        typeof callback === "function" ? callback(state.floorItems) : callback,
+                typeof callback === "function" ? callback(state.floorItems) : callback,
-    })),
+        })),
 }));
 
 export const useWallItems = create<any>((set: any) => ({
-  wallItems: [],
+    wallItems: [],
-  setWallItems: (callback: any) =>
+    setWallItems: (callback: any) =>
-    set((state: any) => ({
+        set((state: any) => ({
-      wallItems:
+            wallItems:
-        typeof callback === "function" ? callback(state.wallItems) : callback,
+                typeof callback === "function" ? callback(state.wallItems) : callback,
-    })),
+        })),
 }));
 
 export const useSelectedWallItem = create<any>((set: any) => ({
-  selectedWallItem: null,
+    selectedWallItem: null,
-  setSelectedWallItem: (x: any) => set(() => ({ selectedWallItem: x })),
+    setSelectedWallItem: (x: any) => set(() => ({ selectedWallItem: x })),
 }));
 
 export const useSelectedFloorItem = create<any>((set: any) => ({
-  selectedFloorItem: null,
+    selectedFloorItem: null,
-  setSelectedFloorItem: (x: any) => set(() => ({ selectedFloorItem: x })),
+    setSelectedFloorItem: (x: any) => set(() => ({ selectedFloorItem: x })),
 }));
 
 export const useDeletableFloorItem = create<any>((set: any) => ({
-  deletableFloorItem: null,
+    deletableFloorItem: null,
-  setDeletableFloorItem: (x: any) => set(() => ({ deletableFloorItem: x })),
+    setDeletableFloorItem: (x: any) => set(() => ({ deletableFloorItem: x })),
 }));
 
 export const useSetScale = create<any>((set: any) => ({
-  scale: null,
+    scale: null,
-  setScale: (x: any) => set(() => ({ scale: x })),
+    setScale: (x: any) => set(() => ({ scale: x })),
 }));
 
 export const useRoofVisibility = create<any>((set: any) => ({
-  roofVisibility: false,
+    roofVisibility: false,
-  setRoofVisibility: (x: any) => set(() => ({ roofVisibility: x })),
+    setRoofVisibility: (x: any) => set(() => ({ roofVisibility: x })),
 }));
 
 export const useWallVisibility = create<any>((set: any) => ({
-  wallVisibility: false,
+    wallVisibility: false,
-  setWallVisibility: (x: any) => set(() => ({ wallVisibility: x })),
+    setWallVisibility: (x: any) => set(() => ({ wallVisibility: x })),
 }));
 
 export const useShadows = create<any>((set: any) => ({
-  shadows: false,
+    shadows: false,
-  setShadows: (x: any) => set(() => ({ shadows: x })),
+    setShadows: (x: any) => set(() => ({ shadows: x })),
 }));
 
 export const useSunPosition = create<any>((set: any) => ({
-  sunPosition: { x: undefined, y: undefined, z: undefined },
+    sunPosition: { x: undefined, y: undefined, z: undefined },
-  setSunPosition: (newSuntPosition: any) =>
+    setSunPosition: (newSuntPosition: any) =>
-    set({ sunPosition: newSuntPosition }),
+        set({ sunPosition: newSuntPosition }),
 }));
 
 export const useRemoveLayer = create<any>((set: any) => ({
-  removeLayer: false,
+    removeLayer: false,
-  setRemoveLayer: (x: any) => set(() => ({ removeLayer: x })),
+    setRemoveLayer: (x: any) => set(() => ({ removeLayer: x })),
 }));
 
 export const useRemovedLayer = create<any>((set: any) => ({
-  removedLayer: null,
+    removedLayer: null,
-  setRemovedLayer: (x: any) => set(() => ({ removedLayer: x })),
+    setRemovedLayer: (x: any) => set(() => ({ removedLayer: x })),
 }));
 
 export const useActiveLayer = create<any>((set: any) => ({
-  activeLayer: 1,
+    activeLayer: 1,
-  setActiveLayer: (x: any) => set({ activeLayer: x }),
+    setActiveLayer: (x: any) => set({ activeLayer: x }),
 }));
 
 interface RefTextUpdateState {
-  refTextupdate: number;
+    refTextupdate: number;
-  setRefTextUpdate: (
+    setRefTextUpdate: (
-    callback: (currentValue: number) => number | number
+        callback: (currentValue: number) => number | number
-  ) => void;
+    ) => void;
 }
 
 export const useRefTextUpdate = create<RefTextUpdateState>((set) => ({
-  refTextupdate: -1000,
+    refTextupdate: -1000,
-  setRefTextUpdate: (callback) =>
+    setRefTextUpdate: (callback) =>
-    set((state) => ({
+        set((state) => ({
-      refTextupdate:
+            refTextupdate:
-        typeof callback === "function"
+                typeof callback === "function"
-          ? callback(state.refTextupdate)
+                    ? callback(state.refTextupdate)
-          : callback,
+                    : callback,
-    })),
+        })),
 }));
 
 export const useResetCamera = create<any>((set: any) => ({
-  resetCamera: false,
+    resetCamera: false,
-  setResetCamera: (x: any) => set({ resetCamera: x }),
+    setResetCamera: (x: any) => set({ resetCamera: x }),
 }));
 
 export const useAddAction = create<any>((set: any) => ({
-  addAction: null,
+    addAction: null,
-  setAddAction: (x: any) => set({ addAction: x }),
+    setAddAction: (x: any) => set({ addAction: x }),
 }));
 
 export const useActiveTool = create<any>((set: any) => ({
-  activeTool: "cursor",
+    activeTool: "cursor",
-  setActiveTool: (x: any) => set({ activeTool: x }),
+    setActiveTool: (x: any) => set({ activeTool: x }),
 }));
 
 export const useActiveSubTool = create<any>((set: any) => ({
-  activeSubTool: "cursor",
+    activeSubTool: "cursor",
-  setActiveSubTool: (x: any) => set({ activeSubTool: x }),
+    setActiveSubTool: (x: any) => set({ activeSubTool: x }),
 }));
 
 export const use2DUndoRedo = create<any>((set: any) => ({
-  is2DUndoRedo: null,
+    is2DUndoRedo: null,
-  set2DUndoRedo: (x: any) => set({ is2DUndoRedo: x }),
+    set2DUndoRedo: (x: any) => set({ is2DUndoRedo: x }),
 }));
 
 export const useElevation = create<any>((set: any) => ({
-  elevation: 45,
+    elevation: 45,
-  setElevation: (x: any) => set({ elevation: x }),
+    setElevation: (x: any) => set({ elevation: x }),
 }));
 
 export const useAzimuth = create<any>((set: any) => ({
-  azimuth: -160,
+    azimuth: -160,
-  setAzimuth: (x: any) => set({ azimuth: x }),
+    setAzimuth: (x: any) => set({ azimuth: x }),
 }));
 
 export const useRenderDistance = create<any>((set: any) => ({
-  renderDistance: 40,
+    renderDistance: 40,
-  setRenderDistance: (x: any) => set({ renderDistance: x }),
+    setRenderDistance: (x: any) => set({ renderDistance: x }),
 }));
 
 export const useCamMode = create<any>((set: any) => ({
-  camMode: "ThirdPerson",
+    camMode: "ThirdPerson",
-  setCamMode: (x: any) => set({ camMode: x }),
+    setCamMode: (x: any) => set({ camMode: x }),
 }));
 
 export const useUserName = create<any>((set: any) => ({
-  userName: "",
+    userName: "",
-  setUserName: (x: any) => set({ userName: x }),
+    setUserName: (x: any) => set({ userName: x }),
 }));
 
 export const useObjectPosition = create<any>((set: any) => ({
-  objectPosition: { x: undefined, y: undefined, z: undefined },
+    objectPosition: { x: undefined, y: undefined, z: undefined },
-  setObjectPosition: (newObjectPosition: any) =>
+    setObjectPosition: (newObjectPosition: any) =>
-    set({ objectPosition: newObjectPosition }),
+        set({ objectPosition: newObjectPosition }),
 }));
 
 export const useObjectScale = create<any>((set: any) => ({
-  objectScale: { x: undefined, y: undefined, z: undefined },
+    objectScale: { x: undefined, y: undefined, z: undefined },
-  setObjectScale: (newObjectScale: any) => set({ objectScale: newObjectScale }),
+    setObjectScale: (newObjectScale: any) => set({ objectScale: newObjectScale }),
 }));
 
 export const useObjectRotation = create<any>((set: any) => ({
-  objectRotation: { x: undefined, y: undefined, z: undefined },
+    objectRotation: { x: undefined, y: undefined, z: undefined },
-  setObjectRotation: (newObjectRotation: any) =>
+    setObjectRotation: (newObjectRotation: any) =>
-    set({ objectRotation: newObjectRotation }),
+        set({ objectRotation: newObjectRotation }),
 }));
 
 export const useDrieTemp = create<any>((set: any) => ({
-  drieTemp: undefined,
+    drieTemp: undefined,
-  setDrieTemp: (x: any) => set({ drieTemp: x }),
+    setDrieTemp: (x: any) => set({ drieTemp: x }),
 }));
 
 export const useActiveUsers = create<any>((set: any) => ({
-  activeUsers: [],
+    activeUsers: [],
-  setActiveUsers: (callback: (prev: any[]) => any[] | any[]) =>
+    setActiveUsers: (callback: (prev: any[]) => any[] | any[]) =>
-    set((state: { activeUsers: any[] }) => ({
+        set((state: { activeUsers: any[] }) => ({
-      activeUsers:
+            activeUsers:
-        typeof callback === "function" ? callback(state.activeUsers) : callback,
+                typeof callback === "function" ? callback(state.activeUsers) : callback,
-    })),
+        })),
 }));
 
 export const useDrieUIValue = create<any>((set: any) => ({
-  drieUIValue: { touch: null, temperature: null, humidity: null },
+    drieUIValue: { touch: null, temperature: null, humidity: null },
 
-  setDrieUIValue: (x: any) =>
+    setDrieUIValue: (x: any) =>
-    set((state: any) => ({ drieUIValue: { ...state.drieUIValue, ...x } })),
+        set((state: any) => ({ drieUIValue: { ...state.drieUIValue, ...x } })),
 
-  setTouch: (value: any) =>
+    setTouch: (value: any) =>
-    set((state: any) => ({
+        set((state: any) => ({
-      drieUIValue: { ...state.drieUIValue, touch: value },
+            drieUIValue: { ...state.drieUIValue, touch: value },
-    })),
+        })),
-  setTemperature: (value: any) =>
+    setTemperature: (value: any) =>
-    set((state: any) => ({
+        set((state: any) => ({
-      drieUIValue: { ...state.drieUIValue, temperature: value },
+            drieUIValue: { ...state.drieUIValue, temperature: value },
-    })),
+        })),
-  setHumidity: (value: any) =>
+    setHumidity: (value: any) =>
-    set((state: any) => ({
+        set((state: any) => ({
-      drieUIValue: { ...state.drieUIValue, humidity: value },
+            drieUIValue: { ...state.drieUIValue, humidity: value },
-    })),
+        })),
 }));
 
 export const useDrawMaterialPath = create<any>((set: any) => ({
-  drawMaterialPath: false,
+    drawMaterialPath: false,
-  setDrawMaterialPath: (x: any) => set({ drawMaterialPath: x }),
+    setDrawMaterialPath: (x: any) => set({ drawMaterialPath: x }),
 }));
 
 export const useSelectedActionSphere = create<any>((set: any) => ({
-  selectedActionSphere: undefined,
+    selectedActionSphere: undefined,
-  setSelectedActionSphere: (x: any) => set({ selectedActionSphere: x }),
+    setSelectedActionSphere: (x: any) => set({ selectedActionSphere: x }),
 }));
 
 export const useSelectedPath = create<any>((set: any) => ({
-  selectedPath: undefined,
+    selectedPath: undefined,
-  setSelectedPath: (x: any) => set({ selectedPath: x }),
+    setSelectedPath: (x: any) => set({ selectedPath: x }),
 }));
 
 interface SimulationPathsStore {
-  simulationStates: (
+    simulationStates: (SimulationTypes.ConveyorEventsSchema | SimulationTypes.VehicleEventsSchema | SimulationTypes.StaticMachineEventsSchema | SimulationTypes.ArmBotEventsSchema)[];
-    | Types.ConveyorEventsSchema
+    setSimulationStates: (
-    | Types.VehicleEventsSchema
+        paths: (| SimulationTypes.ConveyorEventsSchema | SimulationTypes.VehicleEventsSchema | SimulationTypes.StaticMachineEventsSchema | SimulationTypes.ArmBotEventsSchema)[]
-    | Types.StaticMachineEventsSchema
+            | ((prev: (| SimulationTypes.ConveyorEventsSchema | SimulationTypes.VehicleEventsSchema | SimulationTypes.StaticMachineEventsSchema | SimulationTypes.ArmBotEventsSchema)[])
-    | Types.ArmBotEventsSchema
+                => (| SimulationTypes.ConveyorEventsSchema | SimulationTypes.VehicleEventsSchema | SimulationTypes.StaticMachineEventsSchema | SimulationTypes.ArmBotEventsSchema)[])
-  )[];
+    ) => void;
-  setSimulationStates: (
-    paths:
-      | (
-          | Types.ConveyorEventsSchema
-          | Types.VehicleEventsSchema
-          | Types.StaticMachineEventsSchema
-          | Types.ArmBotEventsSchema
-        )[]
-      | ((
-          prev: (
-            | Types.ConveyorEventsSchema
-            | Types.VehicleEventsSchema
-            | Types.StaticMachineEventsSchema
-            | Types.ArmBotEventsSchema
-          )[]
-        ) => (
-          | Types.ConveyorEventsSchema
-          | Types.VehicleEventsSchema
-          | Types.StaticMachineEventsSchema
-          | Types.ArmBotEventsSchema
-        )[])
-  ) => void;
 }
 
 export const useSimulationStates = create<SimulationPathsStore>((set) => ({
-  simulationStates: [],
+    simulationStates: [],
-  setSimulationStates: (paths) =>
+    setSimulationStates: (paths) =>
-    set((state) => ({
+        set((state) => ({
-      simulationStates:
+            simulationStates:
-        typeof paths === "function" ? paths(state.simulationStates) : paths,
+                typeof paths === "function" ? paths(state.simulationStates) : paths,
-    })),
+        })),
 }));
 
 export const useNavMesh = create<any>((set: any) => ({
-  navMesh: null,
+    navMesh: null,
-  setNavMesh: (x: any) => set({ navMesh: x }),
+    setNavMesh: (x: any) => set({ navMesh: x }),
 }));
 
 export const useIsConnecting = create<any>((set: any) => ({
-  isConnecting: false,
+    isConnecting: false,
-  setIsConnecting: (x: any) => set({ isConnecting: x }),
+    setIsConnecting: (x: any) => set({ isConnecting: x }),
 }));
 
 export const useStartSimulation = create<any>((set: any) => ({
-  startSimulation: false,
+    startSimulation: false,
-  setStartSimulation: (x: any) => set({ startSimulation: x }),
+    setStartSimulation: (x: any) => set({ startSimulation: x }),
 }));
 
 export const useEyeDropMode = create<any>((set: any) => ({
-  eyeDropMode: false,
+    eyeDropMode: false,
-  setEyeDropMode: (x: any) => set({ eyeDropMode: x }),
+    setEyeDropMode: (x: any) => set({ eyeDropMode: x }),
 }));
 
 export const useEditingPoint = create<any>((set: any) => ({
-  editingPoint: false,
+    editingPoint: false,
-  setEditingPoint: (x: any) => set({ editingPoint: x }),
+    setEditingPoint: (x: any) => set({ editingPoint: x }),
 }));
 
 export const usePreviewPosition = create<{
-  previewPosition: { x: number; y: number } | null;
+    previewPosition: { x: number; y: number } | null;
-  setPreviewPosition: (position: { x: number; y: number } | null) => void;
+    setPreviewPosition: (position: { x: number; y: number } | null) => void;
 }>((set) => ({
-  previewPosition: null,
+    previewPosition: null,
-  setPreviewPosition: (position) => set({ previewPosition: position }),
+    setPreviewPosition: (position) => set({ previewPosition: position }),
 }));
 
 export const usezoneTarget = create<any>((set: any) => ({
-  zoneTarget: [],
+    zoneTarget: [],
-  setZoneTarget: (x: any) => set({ zoneTarget: x }),
+    setZoneTarget: (x: any) => set({ zoneTarget: x }),
 }));
 
 export const usezonePosition = create<any>((set: any) => ({
-  zonePosition: [],
+    zonePosition: [],
-  setZonePosition: (x: any) => set({ zonePosition: x }),
+    setZonePosition: (x: any) => set({ zonePosition: x }),
 }));
 
 interface EditPositionState {
-  Edit: boolean;
+    Edit: boolean;
-  setEdit: (value: boolean) => void;
+    setEdit: (value: boolean) => void;
 }
 
 export const useEditPosition = create<EditPositionState>((set) => ({
-  Edit: false,
+    Edit: false,
-  setEdit: (value) => set({ Edit: value }), // Properly updating the state
+    setEdit: (value) => set({ Edit: value }), // Properly updating the state
 }));
 
 export const useAsset3dWidget = create<any>((set: any) => ({
-  widgetSelect: "",
+    widgetSelect: "",
-  setWidgetSelect: (x: any) => set({ widgetSelect: x }),
+    setWidgetSelect: (x: any) => set({ widgetSelect: x }),
 }));
 
 export const useWidgetSubOption = create<any>((set: any) => ({
-  widgetSubOption: "2D",
+    widgetSubOption: "2D",
-  setWidgetSubOption: (x: any) => set({ widgetSubOption: x }),
+    setWidgetSubOption: (x: any) => set({ widgetSubOption: x }),
 }));
 export const useLimitDistance = create<any>((set: any) => ({
-  limitDistance: true,
+    limitDistance: true,
-  setLimitDistance: (x: any) => set({ limitDistance: x }),
+    setLimitDistance: (x: any) => set({ limitDistance: x }),
 }));
 
 export const useTileDistance = create<any>((set: any) => ({
-  gridValue: { size: 300, divisions: 75 },
+    gridValue: { size: 300, divisions: 75 },
-  planeValue: { height: 300, width: 300 },
+    planeValue: { height: 300, width: 300 },
 
-  setGridValue: (value: any) =>
+    setGridValue: (value: any) =>
-    set((state: any) => ({
+        set((state: any) => ({
-      gridValue: { ...state.gridValue, ...value },
+            gridValue: { ...state.gridValue, ...value },
-    })),
+        })),
 
-  setPlaneValue: (value: any) =>
+    setPlaneValue: (value: any) =>
-    set((state: any) => ({
+        set((state: any) => ({
-      planeValue: { ...state.planeValue, ...value },
+            planeValue: { ...state.planeValue, ...value },
-    })),
+        })),
 }));
 
 export const usePlayAgv = create<any>((set, get) => ({
-  PlayAgv: [],
+    PlayAgv: [],
-  setPlayAgv: (updateFn: (prev: any[]) => any[]) =>
+    setPlayAgv: (updateFn: (prev: any[]) => any[]) =>
-    set({ PlayAgv: updateFn(get().PlayAgv) }),
+        set({ PlayAgv: updateFn(get().PlayAgv) }),
 }));
 // Define the Asset type
 type Asset = {
-  id: string;
+    id: string;
-  name: string;
+    name: string;
-  position?: [number, number, number]; // Optional: 3D position
+    position?: [number, number, number]; // Optional: 3D position
-  rotation?: { x: number; y: number; z: number }; // Optional: Euler rotation
+    rotation?: { x: number; y: number; z: number }; // Optional: Euler rotation
 };
 
 // Zustand store type
 type ZoneAssetState = {
-  zoneAssetId: Asset | null;
+    zoneAssetId: Asset | null;
-  setZoneAssetId: (asset: Asset | null) => void;
+    setZoneAssetId: (asset: Asset | null) => void;
 };
 
 // Zustand store
 export const useZoneAssetId = create<ZoneAssetState>((set) => ({
-  zoneAssetId: null,
+    zoneAssetId: null,
-  setZoneAssetId: (asset) => set({ zoneAssetId: asset }),
+    setZoneAssetId: (asset) => set({ zoneAssetId: asset }),
 }));

app/src/types/simulation.d.ts

@@ -0,0 +1,163 @@
+
+interface PathConnection {
+    fromModelUUID: string;
+    fromUUID: string;
+    toConnections: {
+        toModelUUID: string;
+        toUUID: string;
+    }[];
+}
+
+interface ConnectionStore {
+    connections: PathConnection[];
+    setConnections: (connections: PathConnection[]) => void;
+    addConnection: (newConnection: PathConnection) => void;
+    removeConnection: (fromUUID: string, toUUID: string) => void;
+}
+
+interface ConveyorEventsSchema {
+    modeluuid: string;
+    modelName: string;
+    type: "Conveyor";
+    points: {
+        uuid: string;
+        position: [number, number, number];
+        rotation: [number, number, number];
+        actions: { uuid: string; name: string; type: string; material: string; delay: number | string; spawnInterval: number | string; isUsed: boolean; }[] | [];
+        triggers: { uuid: string; name: string; type: string; isUsed: boolean; bufferTime: number; }[] | [];
+        connections: {
+            source: { modelUUID: string; pointUUID: string };
+            targets: { modelUUID: string; pointUUID: string }[];
+        };
+    }[];
+    position: [number, number, number];
+    rotation: [number, number, number];
+    speed: number | string;
+}
+
+interface VehicleEventsSchema {
+    modeluuid: string;
+    modelName: string;
+    type: "Vehicle";
+    points: {
+        uuid: string;
+        position: [number, number, number];
+        rotation: [number, number, number];
+        actions: { uuid: string; name: string; type: string; start: { x: number; y: number } | {}; hitCount: number; end: { x: number; y: number } | {}; buffer: number; };
+        connections: {
+            source: { modelUUID: string; pointUUID: string };
+            targets: { modelUUID: string; pointUUID: string }[];
+        };
+        speed: number;
+        isPlaying: boolean;
+    };
+
+    position: [number, number, number];
+    rotation: [number, number, number];
+}
+
+interface StaticMachineEventsSchema {
+    modeluuid: string;
+    modelName: string;
+    type: "StaticMachine";
+    points: {
+        uuid: string;
+        position: [number, number, number];
+        rotation: [number, number, number];
+        actions: { uuid: string; name: string; buffer: number | string; material: string; isUsed: boolean; };
+        triggers: { uuid: string; name: string; type: string };
+        connections: {
+            source: { modelUUID: string; pointUUID: string };
+            targets: { modelUUID: string; pointUUID: string }[];
+        };
+    };
+    position: [number, number, number];
+    rotation: [number, number, number];
+}
+
+interface ArmBotEventsSchema {
+    modeluuid: string;
+    modelName: string;
+    type: "ArmBot";
+    points: {
+        uuid: string;
+        position: [number, number, number];
+        rotation: [number, number, number];
+        actions: { uuid: string; name: string; speed: number; processes: { triggerId: string; startPoint: string; endPoint: string }[]; };
+        triggers: { uuid: string; name: string; type: string };
+        connections: {
+            source: { modelUUID: string; pointUUID: string };
+            targets: { modelUUID: string; pointUUID: string }[];
+        };
+    };
+    position: [number, number, number];
+    rotation: [number, number, number];
+}
+
+export type EventData = {
+    modeluuid: string;
+    modelname: string;
+    position: [number, number, number];
+    rotation: { x: number; y: number; z: number };
+    modelfileID: string;
+    isLocked: boolean;
+    isVisible: boolean;
+    eventData?:
+    | {
+        type: "Conveyor";
+        points: {
+            uuid: string;
+            position: [number, number, number];
+            rotation: [number, number, number];
+            actions: { uuid: string; name: string; type: string; material: string; delay: number | string; spawnInterval: number | string; isUsed: boolean; }[] | [];
+            triggers: { uuid: string; name: string; type: string; isUsed: boolean; bufferTime: number; }[] | [];
+            connections: {
+                source: { modelUUID: string; pointUUID: string };
+                targets: { modelUUID: string; pointUUID: string }[];
+            };
+        }[];
+        speed: number | string;
+    }
+    | {
+        type: "Vehicle";
+        points: {
+            uuid: string;
+            position: [number, number, number];
+            rotation: [number, number, number];
+            actions: { uuid: string; name: string; type: string; start: { x: number; y: number } | {}; hitCount: number; end: { x: number; y: number } | {}; buffer: number; };
+            connections: {
+                source: { modelUUID: string; pointUUID: string };
+                targets: { modelUUID: string; pointUUID: string }[];
+            };
+            speed: number;
+        };
+    }
+    | {
+        type: "StaticMachine";
+        points: {
+            uuid: string;
+            position: [number, number, number];
+            rotation: [number, number, number];
+            actions: { uuid: string; name: string; buffer: number; material: string; };
+            triggers: { uuid: string; name: string; type: string };
+            connections: {
+                source: { modelUUID: string; pointUUID: string };
+                targets: { modelUUID: string; pointUUID: string }[];
+            };
+        };
+    }
+    | {
+        type: "ArmBot";
+        points: {
+            uuid: string;
+            position: [number, number, number];
+            rotation: [number, number, number];
+            actions: { uuid: string; name: string; speed: number; processes: { triggerId: string; startPoint: string; endPoint: string; }[]; };
+            triggers: { uuid: string; name: string; type: string };
+            connections: {
+                source: { modelUUID: string; pointUUID: string };
+                targets: { modelUUID: string; pointUUID: string }[];
+            };
+        };
+    };
+};

app/src/types/world/worldTypes.d.ts

@@ -47,9 +47,7 @@ export type Shape = THREE.Shape;
 export type IntersectionEvent = THREE.Intersection;
 
 // Array type for intersections with objects in the scene
-export type IntersectsType = THREE.Intersection<
+export type IntersectsType = THREE.Intersection<THREE.Object3D<THREE.Object3DEventMap>>[];
-  THREE.Object3D<THREE.Object3DEventMap>
->[];
 
 // Event type for mesh interactions
 export type MeshEvent = IntersectionEvent<MouseEvent>;
@@ -107,9 +105,7 @@ export type NumberArray = number[];
 export type RefRaycaster = React.MutableRefObject<THREE.Raycaster>;
 
 // Camera reference, supporting both perspective and basic cameras
-export type RefCamera = React.MutableRefObject<
+export type RefCamera = React.MutableRefObject<THREE.Camera | THREE.PerspectiveCamera>;
-  THREE.Camera | THREE.PerspectiveCamera
->;
 
 /** Three.js Root State Management **/
 
@@ -134,11 +130,11 @@ export type Lines = Array<Line>;
 
 // Defines a wall with its geometry, position, rotation, material, and layer information
 export type Wall = [
-  THREE.ExtrudeGeometry,
+    THREE.ExtrudeGeometry,
-  [number, number, number],
+    [number, number, number],
-  [number, number, number],
+    [number, number, number],
-  string,
+    string,
-  number
+    number
 ];
 
 // Collection of walls, useful in scene construction
@@ -148,18 +144,10 @@ export type Walls = Array<Wall>;
 export type RefWalls = React.MutableRefObject<Walls>;
 
 // Room type, containing coordinates and layer metadata for spatial management
-export type Rooms = Array<{
+export type Rooms = Array<{ coordinates: Array<{ position: THREE.Vector3; uuid: string }>; layer: number; }>;
-  coordinates: Array<{ position: THREE.Vector3; uuid: string }>;
-  layer: number;
-}>;
 
 // Reference for room objects, enabling updates within React components
-export type RefRooms = React.MutableRefObject<
+export type RefRooms = React.MutableRefObject<Array<{ coordinates: Array<{ position: THREE.Vector3; uuid: string }>; layer: number; }>>;
-  Array<{
-    coordinates: Array<{ position: THREE.Vector3; uuid: string }>;
-    layer: number;
-  }>
->;
 
 // Reference for lines, supporting React-based state changes
 export type RefLines = React.MutableRefObject<Lines>;
@@ -182,10 +170,10 @@ export type RefOnlyFloorLines = React.MutableRefObject<OnlyFloorLines>;
 
 // Structure for representing GeoJSON lines, integrating external data sources
 export type GeoJsonLine = {
-  line: any;
+    line: any;
-  uuids: [string, string];
+    uuids: [string, string];
-  layer: number;
+    layer: number;
-  type: string;
+    type: string;
 };
 
 /** State Management Types for React Components **/
@@ -201,67 +189,59 @@ export type RefTubeGeometry = React.MutableRefObject<THREE.TubeGeometry | null>;
 
 // Type for individual items placed on the floor, with positioning and rotation metadata
 export type FloorItemType = {
-  modeluuid: string;
+    modeluuid: string;
-  modelname: string;
+    modelname: string;
-  position: [number, number, number];
+    position: [number, number, number];
-  rotation: { x: number; y: number; z: number };
+    rotation: { x: number; y: number; z: number };
-  modelfileID: string;
+    modelfileID: string;
-  isLocked: boolean;
+    isLocked: boolean;
-  isVisible: boolean;
+    isVisible: boolean;
 };
 
 // Array of floor items for managing multiple objects on the floor
 export type FloorItems = Array<FloorItemType>;
 
 // Dispatch type for setting floor item state in React
-export type setFloorItemSetState = React.Dispatch<
+export type setFloorItemSetState = React.Dispatch<React.SetStateAction<FloorItems | null | undefined>>;
-  React.SetStateAction<FloorItems | null | undefined>
->;
 
 /** Asset Configuration for Loading and Positioning **/
 
 // Configuration for assets, allowing model URLs, scaling, positioning, and types
 interface AssetConfiguration {
-  modelUrl: string;
+    modelUrl: string;
-  scale?: [number, number, number];
+    scale?: [number, number, number];
-  csgscale?: [number, number, number];
+    csgscale?: [number, number, number];
-  csgposition?: [number, number, number];
+    csgposition?: [number, number, number];
-  positionY?: (intersectionPoint: { point: THREE.Vector3 }) => number;
+    positionY?: (intersectionPoint: { point: THREE.Vector3 }) => number;
-  type?: "Fixed-Move" | "Free-Move";
+    type?: "Fixed-Move" | "Free-Move";
 }
 
 // Collection of asset configurations, keyed by unique identifiers
-export type AssetConfigurations = {
+export type AssetConfigurations = { [key: string]: AssetConfiguration; };
-  [key: string]: AssetConfiguration;
-};
 
 /** Wall Item Configuration **/
 
 // Configuration for wall items, including model, scale, position, and rotation
 interface WallItem {
-  type: "Fixed-Move" | "Free-Move" | undefined;
+    type: "Fixed-Move" | "Free-Move" | undefined;
-  model?: THREE.Group;
+    model?: THREE.Group;
-  modeluuid?: string;
+    modeluuid?: string;
-  modelname?: string;
+    modelname?: string;
-  scale?: [number, number, number];
+    scale?: [number, number, number];
-  csgscale?: [number, number, number];
+    csgscale?: [number, number, number];
-  csgposition?: [number, number, number];
+    csgposition?: [number, number, number];
-  position?: [number, number, number];
+    position?: [number, number, number];
-  quaternion?: Types.QuaternionType;
+    quaternion?: Types.QuaternionType;
 }
 
 // Collection of wall items, allowing for multiple items in a scene
 export type wallItems = Array<WallItem>;
 
 // Dispatch for setting wall item state in React
-export type setWallItemSetState = React.Dispatch<
+export type setWallItemSetState = React.Dispatch<React.SetStateAction<WallItem[]>>;
-  React.SetStateAction<WallItem[]>
->;
 
 // Dispatch for setting vector3 state in React
-export type setVector3State = React.Dispatch<
+export type setVector3State = React.Dispatch<React.SetStateAction<THREE.Vector3>>;
-  React.SetStateAction<THREE.Vector3>
->;
 
 // Dispatch for setting euler state in React
 export type setEulerState = React.Dispatch<React.SetStateAction<THREE.Euler>>;
@@ -274,245 +254,8 @@ export type RefWallItems = React.MutableRefObject<WallItem[]>;
 // State management for selecting, removing, and indexing wall items
 export type setRemoveLayerSetState = (layer: number | null) => void;
 export type setSelectedWallItemSetState = (item: THREE.Object3D | null) => void;
-export type setSelectedFloorItemSetState = (
+export type setSelectedFloorItemSetState = (item: THREE.Object3D | null) => void;
-  item: THREE.Object3D | null
-) => void;
 export type setSelectedItemsIndexSetState = (index: number | null) => void;
 
 export type RefCSM = React.MutableRefObject<CSM>;
-export type RefCSMHelper = React.MutableRefObject<CSMHelper>;
+export type RefCSMHelper = React.MutableRefObject<CSMHelper>;
-
-interface PathConnection {
-  fromModelUUID: string;
-  fromUUID: string;
-  toConnections: {
-    toModelUUID: string;
-    toUUID: string;
-  }[];
-}
-
-interface ConnectionStore {
-  connections: PathConnection[];
-  setConnections: (connections: PathConnection[]) => void;
-  addConnection: (newConnection: PathConnection) => void;
-  removeConnection: (fromUUID: string, toUUID: string) => void;
-}
-
-interface ConveyorEventsSchema {
-  modeluuid: string;
-  modelName: string;
-  type: "Conveyor";
-  points: {
-    uuid: string;
-    position: [number, number, number];
-    rotation: [number, number, number];
-    actions:
-      | {
-          uuid: string;
-          name: string;
-          type: string;
-          material: string;
-          delay: number | string;
-          spawnInterval: number | string;
-          isUsed: boolean;
-        }[]
-      | [];
-    triggers:
-      | {
-          uuid: string;
-          name: string;
-          type: string;
-          isUsed: boolean;
-          bufferTime: number;
-        }[]
-      | [];
-    connections: {
-      source: { modelUUID: string; pointUUID: string };
-      targets: { modelUUID: string; pointUUID: string }[];
-    };
-  }[];
-  position: [number, number, number];
-  rotation: [number, number, number];
-  speed: number | string;
-}
-
-interface VehicleEventsSchema {
-  modeluuid: string;
-  modelName: string;
-  type: "Vehicle";
-  points: {
-    uuid: string;
-    position: [number, number, number];
-    actions: {
-      uuid: string;
-      name: string;
-      type: string;
-      start: { x: number; y: number } | {};
-      hitCount: number;
-      end: { x: number; y: number } | {};
-      buffer: number;
-    };
-    connections: {
-      source: { modelUUID: string; pointUUID: string };
-      targets: { modelUUID: string; pointUUID: string }[];
-    };
-    speed: number;
-    isPlaying: boolean;
-  };
-
-  position: [number, number, number];
-}
-
-interface StaticMachineEventsSchema {
-  modeluuid: string;
-  modelName: string;
-  type: "StaticMachine";
-  points: {
-    uuid: string;
-    position: [number, number, number];
-    actions: {
-      uuid: string;
-      name: string;
-      buffer: number | string;
-      material: string;
-      isUsed: boolean;
-    };
-    triggers: { uuid: string; name: string; type: string };
-    connections: {
-      source: { modelUUID: string; pointUUID: string };
-      targets: { modelUUID: string; pointUUID: string }[];
-    };
-  };
-  position: [number, number, number];
-}
-
-interface ArmBotEventsSchema {
-  modeluuid: string;
-  modelName: string;
-  type: "ArmBot";
-  points: {
-    uuid: string;
-    position: [number, number, number];
-    actions: {
-      uuid: string;
-      name: string;
-      speed: number;
-      processes: { triggerId: string; startPoint: string; endPoint: string }[];
-    };
-    triggers: { uuid: string; name: string; type: string };
-    connections: {
-      source: { modelUUID: string; pointUUID: string };
-      targets: { modelUUID: string; pointUUID: string }[];
-    };
-  };
-  position: [number, number, number];
-}
-
-export type EventData = {
-  modeluuid: string;
-  modelname: string;
-  position: [number, number, number];
-  rotation: { x: number; y: number; z: number };
-  modelfileID: string;
-  isLocked: boolean;
-  isVisible: boolean;
-  eventData?:
-    | {
-        type: "Conveyor";
-        points: {
-          uuid: string;
-          position: [number, number, number];
-          rotation: [number, number, number];
-          actions:
-            | {
-                uuid: string;
-                name: string;
-                type: string;
-                material: string;
-                delay: number | string;
-                spawnInterval: number | string;
-                isUsed: boolean;
-              }[]
-            | [];
-          triggers:
-            | {
-                uuid: string;
-                name: string;
-                type: string;
-                isUsed: boolean;
-                bufferTime: number;
-              }[]
-            | [];
-          connections: {
-            source: { modelUUID: string; pointUUID: string };
-            targets: { modelUUID: string; pointUUID: string }[];
-          };
-        }[];
-        speed: number | string;
-      }
-    | {
-        type: "Vehicle";
-        points: {
-          uuid: string;
-          position: [number, number, number];
-          rotation: [number, number, number];
-          actions: {
-            uuid: string;
-            name: string;
-            type: string;
-            start: { x: number; y: number } | {};
-            hitCount: number;
-            end: { x: number; y: number } | {};
-            buffer: number;
-          };
-          connections: {
-            source: { modelUUID: string; pointUUID: string };
-            targets: { modelUUID: string; pointUUID: string }[];
-          };
-          speed: number;
-        };
-      }
-    | {
-        type: "StaticMachine";
-        points: {
-          uuid: string;
-          position: [number, number, number];
-          rotation: [number, number, number];
-          actions: {
-            uuid: string;
-            name: string;
-            buffer: number;
-            material: string;
-          };
-          triggers: { uuid: string; name: string; type: string };
-          connections: {
-            source: { modelUUID: string; pointUUID: string };
-            targets: { modelUUID: string; pointUUID: string }[];
-          };
-        };
-      }
-    | {
-        type: "ArmBot";
-        points: {
-          uuid: string;
-          position: [number, number, number];
-          rotation: [number, number, number];
-          actions: {
-            uuid: string;
-            name: string;
-            speed: number;
-            processes: {
-              triggerId: string;
-              startPoint: string;
-              endPoint: string;
-            }[];
-          };
-          triggers: { uuid: string; name: string; type: string };
-          connections: {
-            source: { modelUUID: string; pointUUID: string };
-            targets: { modelUUID: string; pointUUID: string }[];
-          };
-        };
-      };
-};
-