added avg paths

app/src/components/ui/Tools.tsx

@@ -32,7 +32,10 @@ import {
   useTransformMode,
 } from "../../store/store";
 import useToggleStore from "../../store/useUIToggleStore";
-import { use3DWidget, useFloatingWidget } from "../../store/useDroppedObjectsStore";
+import {
+  use3DWidget,
+  useFloatingWidget,
+} from "../../store/useDroppedObjectsStore";
 
 const Tools: React.FC = () => {
   const { templates } = useTemplateStore();
@@ -47,8 +50,8 @@ const Tools: React.FC = () => {
   const { isPlaying, setIsPlaying } = usePlayButtonStore();
   const { addTemplate } = useTemplateStore();
   const { selectedZone } = useSelectedZoneStore();
-  const { floatingWidget } = useFloatingWidget()
+  const { floatingWidget } = useFloatingWidget();
-  const { widgets3D } = use3DWidget()
+  const { widgets3D } = use3DWidget();
 
   // wall options
   const { toggleView, setToggleView } = useToggleView();
@@ -71,7 +74,7 @@ const Tools: React.FC = () => {
         : true
     );
   }, []);
-  useEffect(() => { }, [activeModule]);
+  useEffect(() => {}, [activeModule]);
   useEffect(() => {
     setActiveTool(activeSubTool);
     setActiveSubTool(activeSubTool);
@@ -213,7 +216,8 @@ const Tools: React.FC = () => {
               <div className="activeDropicon">
                 {activeSubTool == "cursor" && (
                   <div
-                    className={`tool-button ${activeTool === "cursor" ? "active" : ""
+                    className={`tool-button ${
+                      activeTool === "cursor" ? "active" : ""
                     }`}
                     onClick={() => {
                       setActiveTool("cursor");
@@ -224,7 +228,8 @@ const Tools: React.FC = () => {
                 )}
                 {activeSubTool == "free-hand" && (
                   <div
-                    className={`tool-button ${activeTool === "free-hand" ? "active" : ""
+                    className={`tool-button ${
+                      activeTool === "free-hand" ? "active" : ""
                     }`}
                     onClick={() => {
                       setActiveTool("free-hand");
@@ -235,7 +240,8 @@ const Tools: React.FC = () => {
                 )}
                 {activeSubTool == "delete" && (
                   <div
-                    className={`tool-button ${activeTool === "delete" ? "active" : ""
+                    className={`tool-button ${
+                      activeTool === "delete" ? "active" : ""
                     }`}
                     onClick={() => {
                       setActiveTool("delete");
@@ -308,7 +314,8 @@ const Tools: React.FC = () => {
                 <div className="split"></div>
                 <div className="draw-tools">
                   <div
-                    className={`tool-button ${activeTool === "draw-wall" ? "active" : ""
+                    className={`tool-button ${
+                      activeTool === "draw-wall" ? "active" : ""
                     }`}
                     onClick={() => {
                       setActiveTool("draw-wall");
@@ -318,7 +325,8 @@ const Tools: React.FC = () => {
                     <WallIcon isActive={activeTool === "draw-wall"} />
                   </div>
                   <div
-                    className={`tool-button ${activeTool === "draw-zone" ? "active" : ""
+                    className={`tool-button ${
+                      activeTool === "draw-zone" ? "active" : ""
                     }`}
                     onClick={() => {
                       setActiveTool("draw-zone");
@@ -328,7 +336,8 @@ const Tools: React.FC = () => {
                     <ZoneIcon isActive={activeTool === "draw-zone"} />
                   </div>
                   <div
-                    className={`tool-button ${activeTool === "draw-aisle" ? "active" : ""
+                    className={`tool-button ${
+                      activeTool === "draw-aisle" ? "active" : ""
                     }`}
                     onClick={() => {
                       setActiveTool("draw-aisle");
@@ -338,7 +347,8 @@ const Tools: React.FC = () => {
                     <AsileIcon isActive={activeTool === "draw-aisle"} />
                   </div>
                   <div
-                    className={`tool-button ${activeTool === "draw-floor" ? "active" : ""
+                    className={`tool-button ${
+                      activeTool === "draw-floor" ? "active" : ""
                     }`}
                     onClick={() => {
                       setActiveTool("draw-floor");
@@ -355,7 +365,8 @@ const Tools: React.FC = () => {
                 <div className="split"></div>
                 <div className="draw-tools">
                   <div
-                    className={`tool-button ${activeTool === "measure" ? "active" : ""
+                    className={`tool-button ${
+                      activeTool === "measure" ? "active" : ""
                     }`}
                     onClick={() => {
                       setActiveTool("measure");
@@ -372,7 +383,8 @@ const Tools: React.FC = () => {
                 <div className="split"></div>
                 <div className="draw-tools">
                   <div
-                    className={`tool-button ${activeTool === "pen" ? "active" : ""
+                    className={`tool-button ${
+                      activeTool === "pen" ? "active" : ""
                     }`}
                     onClick={() => {
                       setActiveTool("pen");
@@ -390,16 +402,14 @@ const Tools: React.FC = () => {
                   <div
                     className={`tool-button`}
                     onClick={() => {
-
                       handleSaveTemplate({
                         addTemplate,
                         floatingWidget,
                         widgets3D,
                         selectedZone,
                         templates,
-                      })
+                      });
-                    }
+                    }}
-                    }
                   >
                     <SaveTemplateIcon isActive={false} />
                   </div>
@@ -409,7 +419,8 @@ const Tools: React.FC = () => {
             <div className="split"></div>
             <div className="general-options">
               <div
-                className={`tool-button ${activeTool === "comment" ? "active" : ""
+                className={`tool-button ${
+                  activeTool === "comment" ? "active" : ""
                 }`}
                 onClick={() => {
                   setActiveTool("comment");
@@ -419,10 +430,12 @@ const Tools: React.FC = () => {
               </div>
               {toggleThreeD && (
                 <div
-                  className={`tool-button ${activeTool === "play" ? "active" : ""
+                  className={`tool-button ${
+                    activeTool === "play" ? "active" : ""
                   }`}
                   onClick={() => {
                     setIsPlaying(!isPlaying);
+                    setActiveTool("play");
                   }}
                 >
                   <PlayIcon isActive={activeTool === "play"} />
@@ -433,14 +446,19 @@ const Tools: React.FC = () => {
               <>
                 <div className="split"></div>
                 <div
-                  className={`toggle-threed-button${toggleThreeD ? " toggled" : ""
+                  className={`toggle-threed-button${
+                    toggleThreeD ? " toggled" : ""
                   }`}
                   onClick={toggleSwitch}
                 >
-                  <div className={`toggle-option${!toggleThreeD ? " active" : ""}`}>
+                  <div
+                    className={`toggle-option${!toggleThreeD ? " active" : ""}`}
+                  >
                     2d
                   </div>
-                  <div className={`toggle-option${toggleThreeD ? " active" : ""}`}>
+                  <div
+                    className={`toggle-option${toggleThreeD ? " active" : ""}`}
+                  >
                     3d
                   </div>
                 </div>

app/src/modules/builder/agv/agv.tsx

@@ -5,22 +5,83 @@ import * as THREE from "three";
 import * as Types from "../../../types/world/worldTypes";
 import PathNavigator from "./pathNavigator";
 import NavMeshDetails from "./navMeshDetails";
+import {
+  useSelectedActionSphere,
+  useSimulationPaths,
+} from "../../../store/store";
 
-const Agv = ({ lines, plane }: { lines: Types.RefLines; plane: Types.RefMesh; }) => {
+const Agv = ({
-  const pathPoints = useMemo(() => [
+  lines,
-    [
+  plane,
-      { x: 8.477161935339709, y: 0, z: 17.41343083550102 },
+}: {
-      { x: 9.175416491482693, y: 0, z: -12.361001232663693 },
+  lines: Types.RefLines;
+  plane: Types.RefMesh;
+}) => {
+  const [pathPoints, setPathPoints] = useState<
+    {
+      uuid: string;
+      points: { x: number; y: number; z: number }[];
+    }[]
+  >([]);
+  const { simulationPaths } = useSimulationPaths();
+  const { selectedActionSphere } = useSelectedActionSphere();
+  useEffect(() => {
+    if (!Array.isArray(simulationPaths)) {
+    } else {
+      let agvModels = simulationPaths.filter(
+        (val: any) => val.modelName === "agv"
+      );
+
+      let findMesh = agvModels.filter(
+        (val: any) =>
+          val.modeluuid === selectedActionSphere?.path?.modeluuid &&
+          val.type === "Vehicle"
+      );
+
+      const result =
+        findMesh.length > 0 &&
+        findMesh[0].type === "Vehicle" &&
+        typeof findMesh[0].point?.actions.start === "object" &&
+        typeof findMesh[0].point?.actions.end === "object" &&
+        "x" in findMesh[0].point.actions.start &&
+        "y" in findMesh[0].point.actions.start &&
+        "x" in findMesh[0].point.actions.end &&
+        "y" in findMesh[0].point.actions.end
+          ? [
+              {
+                uuid: findMesh[0].modeluuid, // Ensure it's a number
+
+                points: [
+                  {
+                    x: findMesh[0].position[0],
+                    y: findMesh[0].position[1],
+                    z: findMesh[0].position[2],
+                  },
+                  {
+                    x: findMesh[0].point.actions.start.x,
+                    y: 0,
+                    z: findMesh[0].point.actions.start.y,
+                  },
+                  {
+                    x: findMesh[0].point.actions.end.x,
+                    y: 0,
+                    z: findMesh[0].point.actions.end.y,
+                  },
                 ],
-    // [
+              },
-    //   { x: 13.508213355232144, y: 0, z: -15.456970649652018 },
+            ]
-    //   { x: -30.464866520869617, y: 0, z: 9.779806557688929 },
+          : [];
-    // ],
+      if (result.length > 0) {
-    [
+        setPathPoints((prev) => {
-      { x: 16.792040856420844, y: 0, z: 15.86281907549489 },
+          const existingUUIDs = new Set(prev.map((item) => item.uuid));
-      { x: -42.77173264503395, y: 0, z: -15.821322764400804 },
+          const newItems = result.filter(
-    ],
+            (item) => !existingUUIDs.has(item.uuid)
-  ], []);
+          );
+          return [...prev, ...newItems];
+        });
+      }
+    }
+  }, [simulationPaths, selectedActionSphere]);
 
   let groupRef = useRef() as Types.RefGroup;
   const [navMesh, setNavMesh] = useState();
@@ -35,7 +96,12 @@ const Agv = ({ lines, plane }: { lines: Types.RefLines; plane: Types.RefMesh; })
         plane={plane}
       />
       {pathPoints.map((pair, i) => (
-        <PathNavigator navMesh={navMesh} selectedPoints={pair} key={i} />
+        <PathNavigator
+          navMesh={navMesh}
+          selectedPoints={pair.points}
+          id={pair.uuid}
+          key={i}
+        />
       ))}
       <group ref={groupRef} visible={false} name="Meshes"></group>
     </>

app/src/modules/builder/agv/navMeshDetails.tsx

@@ -35,10 +35,14 @@ export default function NavMeshDetails({
         const [positions, indices] = getPositionsAndIndices(meshes);
 
         const cs = 0.25;
-        const ch = 0.5;
+        const ch = 0.69;
         const walkableRadius = 0.5;
 
-        const { success, navMesh } = generateSoloNavMesh(positions, indices, { cs, ch, walkableRadius: Math.round(walkableRadius / ch), });
+        const { success, navMesh } = generateSoloNavMesh(positions, indices, {
+          cs,
+          ch,
+          walkableRadius: Math.round(walkableRadius / ch),
+        });
 
         if (!success || !navMesh) {
           return;
@@ -49,7 +53,7 @@ export default function NavMeshDetails({
         const debugDrawer = new DebugDrawer();
         debugDrawer.drawNavMesh(navMesh);
         // scene.add(debugDrawer);
-      } catch (error) { }
+      } catch (error) {}
     };
 
     initializeNavigation();

app/src/modules/builder/agv/pathNavigator.tsx

@@ -1,43 +1,34 @@
 import React, { useEffect, useState, useRef } from "react";
 import * as THREE from "three";
-import { useFrame } from "@react-three/fiber";
+import { useFrame, useThree } from "@react-three/fiber";
 import { NavMeshQuery } from "@recast-navigation/core";
 import { Line } from "@react-three/drei";
+import { useTh } from "leva/dist/declarations/src/styles";
+import { useActiveTool } from "../../../store/store";
 
 // Define interface for props
 interface PathNavigatorProps {
   navMesh: any;
   selectedPoints: any;
+  id: string;
 }
 
 export default function PathNavigator({
   navMesh,
   selectedPoints,
+  id,
 }: PathNavigatorProps) {
   const [path, setPath] = useState<[number, number, number][]>([]);
   const progressRef = useRef(0);
+  const distancesRef = useRef<number[]>([]);
+  const totalDistanceRef = useRef(0);
+  const currentSegmentIndex = useRef(0);
+  const { scene } = useThree();
+  const { activeTool } = useActiveTool();
+  const [startPoint, setStartPoint] = useState(new THREE.Vector3());
   const meshRef = useRef<THREE.Mesh | null>(null);
-
   useEffect(() => {
-    if (selectedPoints.length === 2 && navMesh) {
+    if (!scene || !id || path.length < 2) return;
-      const [start, end] = selectedPoints;
-      if (!start || !end) return;
-
-      const navMeshQuery = new NavMeshQuery(navMesh);
-
-      const { path: computedPath } = navMeshQuery.computePath(start, end);
-
-      if (computedPath.length > 0) {
-        setPath(computedPath.map(({ x, y, z }) => [x, y + 0.1, z]));
-        progressRef.current = 0;
-      }
-    }
-  }, [selectedPoints, navMesh]);
-
-  useFrame((_, delta) => {
-    if (path.length > 1 && meshRef.current) {
-      const speed = 3;
-      progressRef.current += delta * speed;
 
     let totalDistance = 0;
     const distances: number[] = [];
@@ -49,50 +40,110 @@ export default function PathNavigator({
       totalDistance += segmentDistance;
     }
 
+    distancesRef.current = distances;
+    totalDistanceRef.current = totalDistance;
+    progressRef.current = 0; // Reset progress when the path changes
+  }, [path]);
+  useEffect(() => {
+    if (!navMesh || selectedPoints.length === 0) return;
+
+    // Flatten the selectedPoints array into a single list of points
+    const allPoints = selectedPoints.flat();
+
+    // Compute paths between consecutive points
+    const computedPath: [number, number, number][] = [];
+    for (let i = 0; i < allPoints.length - 1; i++) {
+      const start = allPoints[i];
+      setStartPoint(
+        new THREE.Vector3(allPoints[0].x, allPoints[0].y, allPoints[0].z)
+      );
+
+      const end = allPoints[i + 1];
+
+      try {
+        const navMeshQuery = new NavMeshQuery(navMesh);
+        const { path: segmentPath } = navMeshQuery.computePath(start, end);
+
+        if (segmentPath && segmentPath.length > 0) {
+          computedPath.push(
+            ...segmentPath.map(({ x, y, z }): [number, number, number] => [
+              x,
+              y + 0.1,
+              z,
+            ])
+          );
+        }
+      } catch (error) {}
+    }
+
+    // Set the full computed path
+
+    if (computedPath.length > 0) {
+      setPath(computedPath);
+      currentSegmentIndex.current = 0; // Reset to the first segment
+    }
+  }, [selectedPoints, navMesh, path]);
+
+  useFrame((_, delta) => {
+    if (!scene || !id || path.length < 2) return;
+
+    // Find the object in the scene
+    const findObject = scene.getObjectByProperty("uuid", id);
+    if (activeTool === "play") {
+      if (!findObject) return;
+
+      const speed = 5;
+      progressRef.current += delta * speed;
+
       let coveredDistance = progressRef.current;
       let accumulatedDistance = 0;
       let index = 0;
 
+      // Determine the current segment of the path
       while (
-        index < distances.length &&
+        index < distancesRef.current.length &&
-        coveredDistance > accumulatedDistance + distances[index]
+        coveredDistance > accumulatedDistance + distancesRef.current[index]
       ) {
-        accumulatedDistance += distances[index];
+        accumulatedDistance += distancesRef.current[index];
         index++;
       }
 
-      if (index < distances.length) {
+      // If the object has reached the end of the path, stop moving
+      if (index >= distancesRef.current.length) {
+        progressRef.current = totalDistanceRef.current;
+        return;
+      }
+
+      // Interpolate position within the current segment
       const start = new THREE.Vector3(...path[index]);
       const end = new THREE.Vector3(...path[index + 1]);
-        const segmentDistance = distances[index];
+      const segmentDistance = distancesRef.current[index];
 
       const t = (coveredDistance - accumulatedDistance) / segmentDistance;
-        const position = start.clone().lerp(end, t); // Use clone() to avoid mutating the original vector
+      const position = start.clone().lerp(end, t);
-        meshRef.current.position.copy(position);
+      findObject.position.copy(position);
 
-        const direction = new THREE.Vector3()
+      // Rotate the object to face the direction of movement
-          .subVectors(end, start)
+      const direction = new THREE.Vector3().subVectors(end, start).normalize();
-          .normalize();
       const targetQuaternion = new THREE.Quaternion().setFromUnitVectors(
-          new THREE.Vector3(0, 0, 1),
+        new THREE.Vector3(0, 0, 1), // Assuming forward direction is (0, 0, 1)
         direction
       );
-        meshRef.current.quaternion.slerp(targetQuaternion, 0.1);
+      findObject.quaternion.slerp(targetQuaternion, 0.1); // Smoothly interpolate rotation
-      } else {
+    } else if (activeTool === "cursor") {
-        progressRef.current = totalDistance;
+      findObject?.position.copy(startPoint);
-      }
     }
   });
 
   return (
     <>
-      {/* {path.length > 0 && <Line points={path} color="blue" lineWidth={3} />} */}
+      {path.length > 0 && <Line points={path} color="blue" lineWidth={3} />}
-      {path.length > 0 && (
+      {/* {path.length > 0 && (
         <mesh ref={meshRef} position={path.length > 0 ? path[0] : [0, 0.1, 0]}>
           <boxGeometry args={[1, 1, 1]} />
           <meshNormalMaterial />
         </mesh>
-      )}
+      )} */}
     </>
   );
 }

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

@@ -52,6 +52,7 @@ import Layer2DVisibility from "../../builder/geomentries/layers/layer2DVisibilit
 import DrieHtmlTemp from "../mqttTemp/drieHtmlTemp";
 import ZoneGroup from "../../builder/groups/zoneGroup";
 import Agv from "../../builder/agv/agv";
+import useModuleStore from "../../../store/useModuleStore";
 
 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.
@@ -120,6 +121,7 @@ export default function World() {
   const { updateScene, setUpdateScene } = useUpdateScene();
   const { walls, setWalls } = useWalls();
   const { refTextupdate, setRefTextUpdate } = useRefTextUpdate();
+  const { activeModule } = useModuleStore();
 
   // const loader = new GLTFLoader();
   // const dracoLoader = new DRACOLoader();
@@ -359,8 +361,7 @@ export default function World() {
       />
 
       {/* <DrieHtmlTemp itemsGroup={itemsGroup} /> */}
-
+      {activeModule === "simulation" && <Agv lines={lines} plane={plane} />}
-      <Agv lines={lines} plane={plane} />
     </>
   );
 }

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

@@ -1,20 +1,37 @@
-import * as THREE from 'three';
+import * as THREE from "three";
-import * as Types from '../../../types/world/worldTypes';
+import * as Types from "../../../types/world/worldTypes";
-import { useRef, useState, useEffect, useMemo } from 'react';
+import { useRef, useState, useEffect, useMemo } from "react";
-import { Sphere, TransformControls } from '@react-three/drei';
+import { Sphere, TransformControls } from "@react-three/drei";
-import { useEditingPoint, useEyeDropMode, useIsConnecting, usePreviewPosition, useRenderDistance, useSelectedActionSphere, useSelectedPath, useSimulationPaths } from '../../../store/store';
+import {
-import { useFrame, useThree } from '@react-three/fiber';
+  useEditingPoint,
-import { useSubModuleStore } from '../../../store/useModuleStore';
+  useEyeDropMode,
+  useIsConnecting,
+  usePreviewPosition,
+  useRenderDistance,
+  useSelectedActionSphere,
+  useSelectedPath,
+  useSimulationPaths,
+} from "../../../store/store";
+import { useFrame, useThree } from "@react-three/fiber";
+import { useSubModuleStore } from "../../../store/useModuleStore";
 
-function PathCreation({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObject<THREE.Group> }) {
+function PathCreation({
+  pathsGroupRef,
+}: {
+  pathsGroupRef: React.MutableRefObject<THREE.Group>;
+}) {
   const { renderDistance } = useRenderDistance();
   const { setSubModule } = useSubModuleStore();
-    const { setSelectedActionSphere, selectedActionSphere } = useSelectedActionSphere();
+  const { setSelectedActionSphere, selectedActionSphere } =
+    useSelectedActionSphere();
   const { eyeDropMode, setEyeDropMode } = useEyeDropMode();
   const { editingPoint, setEditingPoint } = useEditingPoint();
   const { previewPosition, setPreviewPosition } = usePreviewPosition();
   const { raycaster, camera, pointer, gl } = useThree();
-    const plane = useMemo(() => new THREE.Plane(new THREE.Vector3(0, 1, 0), 0), []);
+  const plane = useMemo(
+    () => new THREE.Plane(new THREE.Vector3(0, 1, 0), 0),
+    []
+  );
   const { setSelectedPath } = useSelectedPath();
   const { simulationPaths, setSimulationPaths } = useSimulationPaths();
   const { isConnecting } = useIsConnecting();
@@ -23,28 +40,32 @@ function PathCreation({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObject
   const sphereRefs = useRef<{ [key: string]: THREE.Mesh }>({});
   const isMovingRef = useRef(false);
   const transformRef = useRef<any>(null);
-    const [transformMode, setTransformMode] = useState<'translate' | 'rotate' | null>(null);
+  const [transformMode, setTransformMode] = useState<
+    "translate" | "rotate" | null
+  >(null);
 
   useEffect(() => {
     setTransformMode(null);
     const handleKeyDown = (e: KeyboardEvent) => {
       if (!selectedActionSphere) return;
-            if (e.key === 'g') {
+      if (e.key === "g") {
-                setTransformMode(prev => prev === 'translate' ? null : 'translate');
+        setTransformMode((prev) => (prev === "translate" ? null : "translate"));
       }
-            if (e.key === 'r') {
+      if (e.key === "r") {
-                setTransformMode(prev => prev === 'rotate' ? null : 'rotate');
+        setTransformMode((prev) => (prev === "rotate" ? null : "rotate"));
       }
     };
 
-        window.addEventListener('keydown', handleKeyDown);
+    window.addEventListener("keydown", handleKeyDown);
-        return () => window.removeEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
   }, [selectedActionSphere]);
 
   useFrame(() => {
-        Object.values(groupRefs.current).forEach(group => {
+    Object.values(groupRefs.current).forEach((group) => {
       if (group) {
-                const distance = new THREE.Vector3(...group.position.toArray()).distanceTo(camera.position);
+        const distance = new THREE.Vector3(
+          ...group.position.toArray()
+        ).distanceTo(camera.position);
         group.visible = distance <= renderDistance;
       }
     });
@@ -70,7 +91,7 @@ function PathCreation({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObject
                     selectedActionSphere.point.rotation.x,
                     selectedActionSphere.point.rotation.y,
                     selectedActionSphere.point.rotation.z,
-                                ]
+                  ],
                 }
               : point
           ),
@@ -101,7 +122,6 @@ function PathCreation({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObject
     const canvasElement = gl.domElement;
     canvasElement.tabIndex = 0;
 
-
     const onPointerDown = () => {
       isMovingRef.current = false;
     };
@@ -111,7 +131,12 @@ function PathCreation({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObject
     };
 
     const onPointerUp = (event: PointerEvent) => {
-            if (!isMovingRef.current && eyeDropMode && event.button === 0 && previewPosition) {
+      if (
+        !isMovingRef.current &&
+        eyeDropMode &&
+        event.button === 0 &&
+        previewPosition
+      ) {
         event.preventDefault();
         if (editingPoint) {
           handlePointUpdate(editingPoint, previewPosition.x, previewPosition.y);
@@ -134,11 +159,18 @@ function PathCreation({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObject
     };
   }, [eyeDropMode, editingPoint, previewPosition]);
 
-    const handlePointUpdate = (pointType: 'start' | 'end', x: number, z: number) => {
+  const handlePointUpdate = (
+    pointType: "start" | "end",
+    x: number,
+    z: number
+  ) => {
     if (!selectedActionSphere?.point?.uuid) return;
 
     const updatedPaths = simulationPaths.map((path) => {
-            if (path.type === "Vehicle" && path.point.uuid === selectedActionSphere.point.uuid) {
+      if (
+        path.type === "Vehicle" &&
+        path.point.uuid === selectedActionSphere.point.uuid
+      ) {
         return {
           ...path,
           point: {
@@ -148,10 +180,10 @@ function PathCreation({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObject
               [pointType]: {
                 ...path.point.actions[pointType],
                 x: x,
-                                y: z
+                y: z,
-                            }
+              },
-                        }
+            },
-                    }
+          },
         };
       }
       return path;
@@ -161,30 +193,35 @@ function PathCreation({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObject
   };
 
   return (
-        <group name='simulation-simulationPaths-group' ref={pathsGroupRef}>
+    <group name="simulation-simulationPaths-group" ref={pathsGroupRef}>
       {simulationPaths.map((path) => {
-                if (path.type === 'Conveyor') {
+        if (path.type === "Conveyor") {
-                    const points = path.points.map(point => new THREE.Vector3(...point.position));
+          const points = path.points.map(
+            (point) => new THREE.Vector3(...point.position)
+          );
 
           return (
             <group
               name={`${path.modeluuid}-event-path`}
               key={path.modeluuid}
-                            ref={el => (groupRefs.current[path.modeluuid] = el!)}
+              ref={(el) => (groupRefs.current[path.modeluuid] = el!)}
               position={path.position}
               rotation={path.rotation}
               onClick={(e) => {
                 if (isConnecting || eyeDropMode) return;
                 e.stopPropagation();
-                                setSelectedPath({ path, group: groupRefs.current[path.modeluuid] });
+                setSelectedPath({
+                  path,
+                  group: groupRefs.current[path.modeluuid],
+                });
                 setSelectedActionSphere(null);
                 setTransformMode(null);
-                                setSubModule('mechanics');
+                setSubModule("mechanics");
               }}
               onPointerMissed={() => {
                 if (eyeDropMode) return;
                 setSelectedPath(null);
-                                setSubModule('properties');
+                setSubModule("properties");
               }}
             >
               {path.points.map((point, index) => (
@@ -193,63 +230,89 @@ function PathCreation({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObject
                   uuid={point.uuid}
                   position={point.position}
                   args={[0.15, 32, 32]}
-                                    name='events-sphere'
+                  name="events-sphere"
-                                    ref={el => (sphereRefs.current[point.uuid] = el!)}
+                  ref={(el) => (sphereRefs.current[point.uuid] = el!)}
                   onClick={(e) => {
                     if (isConnecting || eyeDropMode) return;
                     e.stopPropagation();
                     setSelectedActionSphere({
                       path,
-                                            point: sphereRefs.current[point.uuid]
+                      point: sphereRefs.current[point.uuid],
                     });
-                                        setSubModule('mechanics');
+                    setSubModule("mechanics");
                     setSelectedPath(null);
                   }}
                   userData={{ point, path }}
                   onPointerMissed={() => {
                     if (eyeDropMode) return;
-                                        setSubModule('properties');
+                    setSubModule("properties");
                     setSelectedActionSphere(null);
                   }}
                 >
                   <meshStandardMaterial
-                                        color={index === 0 ? 'orange' : index === path.points.length - 1 ? 'blue' : 'green'}
+                    color={
+                      index === 0
+                        ? "orange"
+                        : index === path.points.length - 1
+                        ? "blue"
+                        : "green"
+                    }
                   />
                 </Sphere>
               ))}
 
               {points.slice(0, -1).map((point, index) => {
                 const nextPoint = points[index + 1];
-                                const segmentCurve = new THREE.CatmullRomCurve3([point, nextPoint]);
+                const segmentCurve = new THREE.CatmullRomCurve3([
-                                const tubeGeometry = new THREE.TubeGeometry(segmentCurve, 20, 0.1, 16, false);
+                  point,
+                  nextPoint,
+                ]);
+                const tubeGeometry = new THREE.TubeGeometry(
+                  segmentCurve,
+                  20,
+                  0.1,
+                  16,
+                  false
+                );
 
                 return (
-                                    <mesh name='event-connection-tube' key={`tube-${index}`} geometry={tubeGeometry}>
+                  <mesh
-                                        <meshStandardMaterial transparent opacity={0.9} color="red" />
+                    name="event-connection-tube"
+                    key={`tube-${index}`}
+                    geometry={tubeGeometry}
+                  >
+                    <meshStandardMaterial
+                      transparent
+                      opacity={0.9}
+                      color="red"
+                    />
                   </mesh>
                 );
               })}
             </group>
           );
-                } else if (path.type === 'Vehicle') {
+        } else if (path.type === "Vehicle") {
           return (
             <group
               name={`${path.modeluuid}-vehicle-path`}
               key={path.modeluuid}
-                            ref={el => (groupRefs.current[path.modeluuid] = el!)}
+              ref={(el) => (groupRefs.current[path.modeluuid] = el!)}
               position={path.position}
               onClick={(e) => {
                 if (isConnecting || eyeDropMode) return;
                 e.stopPropagation();
-                                setSelectedPath({ path, group: groupRefs.current[path.modeluuid] });
+                setSelectedPath({
+                  path,
+                  group: groupRefs.current[path.modeluuid],
+                });
                 setSelectedActionSphere(null);
                 setTransformMode(null);
-                                setSubModule('mechanics');
+                setSubModule("mechanics");
               }}
               onPointerMissed={() => {
                 if (eyeDropMode) return;
                 setSelectedPath(null);
-                                setSubModule('properties');
+                setSubModule("properties");
               }}
             >
               <Sphere
@@ -257,22 +320,22 @@ function PathCreation({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObject
                 uuid={path.point.uuid}
                 position={path.point.position}
                 args={[0.15, 32, 32]}
-                                name='events-sphere'
+                name="events-sphere"
-                                ref={el => (sphereRefs.current[path.point.uuid] = el!)}
+                ref={(el) => (sphereRefs.current[path.point.uuid] = el!)}
                 onClick={(e) => {
                   if (isConnecting || eyeDropMode) return;
                   e.stopPropagation();
                   setSelectedActionSphere({
                     path,
-                                        point: sphereRefs.current[path.point.uuid]
+                    point: sphereRefs.current[path.point.uuid],
                   });
-                                    setSubModule('mechanics');
+                  setSubModule("mechanics");
                   setSelectedPath(null);
                 }}
                 userData={{ point: path.point, path }}
                 onPointerMissed={() => {
                   if (eyeDropMode) return;
-                                    setSubModule('properties');
+                  setSubModule("properties");
                   setSelectedActionSphere(null);
                 }}
               >

app/src/modules/simulation/simulation.tsx

@@ -1,11 +1,16 @@
-import { useState, useEffect, useRef, useMemo } from 'react';
+import { useState, useEffect, useRef, useMemo } from "react";
-import { useSelectedActionSphere, useSelectedPath, useSimulationPaths } from '../../store/store';
+import {
-import * as THREE from 'three';
+  useSelectedActionSphere,
-import Behaviour from './behaviour/behaviour';
+  useSelectedPath,
-import PathCreation from './path/pathCreation';
+  useSimulationPaths,
-import PathConnector from './path/pathConnector';
+} from "../../store/store";
-import useModuleStore from '../../store/useModuleStore';
+import * as THREE from "three";
-import ProcessContainer from './process/processContainer';
+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";
 
 function Simulation() {
   const { activeModule } = useModuleStore();
@@ -29,15 +34,15 @@ function Simulation() {
   //     }
   // }, [selectedPath]);
 
-
   return (
     <>
       <Behaviour />
-            {activeModule === 'simulation' && (
+      {activeModule === "simulation" && (
         <>
           <PathCreation pathsGroupRef={pathsGroupRef} />
           <PathConnector pathsGroupRef={pathsGroupRef} />
           <ProcessContainer />
+          {/* <Agv /> */}
         </>
       )}
     </>