Refactor AssetProperties layout, enhance PositionInput component with optional properties, and implement new asset event fetching logic

app/src/components/layout/sidebarRight/customInput/PositionInputs.tsx

@@ -1,23 +1,32 @@
 import React from "react";
+import { EyeDroperIcon } from "../../../icons/ExportCommonIcons";
 
 interface PositionInputProps {
+  label?: string; // Optional label for the input
   onChange: (value: string) => void; // Callback for value change
   placeholder?: string; // Optional placeholder
   type?: string; // Input type (e.g., text, number, email)
   value1?: number;
   value2?: number;
+  disabled?: boolean; // Optional disabled property
+  isEyedrop?: boolean; // Optional eyedrop property
+  handleEyeDropClick?: () => void; // Optional function for eye drop click
 }
 
 const PositionInput: React.FC<PositionInputProps> = ({
   onChange,
+  label = "Position", // Default label
   placeholder = "Enter value", // Default placeholder
   type = "number", // Default type
   value1 = "number",
   value2 = "number",
+  disabled = false, // Default disabled value
+  isEyedrop = false, // Default isEyedrop value
+  handleEyeDropClick = () => { }, // Default function for eye drop click
 }) => {
   return (
     <div className="custom-input-container">
-      <div className="header">Position</div>
+      <div className="header">{label}</div>
       <div className="inputs-container">
         <div className="input-container">
           <div className="custom-input-label">X : </div>
@@ -26,7 +35,8 @@ const PositionInput: React.FC<PositionInputProps> = ({
             type={type}
             onChange={(e) => onChange(e.target.value)}
             placeholder={placeholder}
-            value={value2}
+            value={value1}
+            disabled={disabled} // Apply disabled prop
           />
         </div>
         <div className="input-container">
@@ -36,10 +46,16 @@ const PositionInput: React.FC<PositionInputProps> = ({
             type={type}
             onChange={(e) => onChange(e.target.value)}
             placeholder={placeholder}
-            value={value1}
+            value={value2}
+            disabled={disabled} // Apply disabled prop
           />
         </div>
       </div>
+      {isEyedrop && (
+        <div className="eye-picker-button" onClick={handleEyeDropClick}>
+          <EyeDroperIcon isActive={false} />
+        </div>
+      )}
     </div>
   );
 };

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

@@ -1,13 +1,16 @@
 import React, { useRef, useMemo } from "react";
 import { InfoIcon } from "../../../icons/ExportCommonIcons";
 import InputWithDropDown from "../../../ui/inputs/InputWithDropDown";
-import { useSelectedActionSphere, useSimulationPaths } from "../../../../store/store";
+import { useEditingPoint, useEyeDropMode, usePreviewPosition, useSelectedActionSphere, useSimulationPaths } from "../../../../store/store";
 import * as Types from '../../../../types/world/worldTypes';
-import LabledDropdown from "../../../ui/inputs/LabledDropdown";
+import PositionInput from "../customInput/PositionInputs";
 
 const VehicleMechanics: React.FC = () => {
     const { selectedActionSphere } = useSelectedActionSphere();
     const { simulationPaths, setSimulationPaths } = useSimulationPaths();
+    const { eyeDropMode, setEyeDropMode } = useEyeDropMode();
+    const { editingPoint, setEditingPoint } = useEditingPoint();
+    const { previewPosition, setPreviewPosition } = usePreviewPosition();
 
     const propertiesContainerRef = useRef<HTMLDivElement>(null);
 
@@ -59,12 +62,10 @@ const VehicleMechanics: React.FC = () => {
         setSimulationPaths(updatedPaths);
     }, [selectedActionSphere?.point?.uuid, simulationPaths, setSimulationPaths]);
 
-    const handleStartPointChange = React.useCallback((uuid: string) => {
+    const handleStartPointChange = React.useCallback((position: { x: number, y: number }) => {
-        handleActionUpdate({ start: uuid });
     }, [handleActionUpdate]);
 
-    const handleEndPointChange = React.useCallback((uuid: string) => {
+    const handleEndPointChange = React.useCallback((position: { x: number, y: number }) => {
-        handleActionUpdate({ end: uuid });
     }, [handleActionUpdate]);
 
     const handleHitCountChange = React.useCallback((hitCount: number) => {
@@ -94,6 +95,16 @@ const VehicleMechanics: React.FC = () => {
         setSimulationPaths(updatedPaths);
     }, [selectedActionSphere?.point?.uuid, simulationPaths, setSimulationPaths]);
 
+    const handleStartEyeDropClick = () => {
+        setEditingPoint('start');
+        setEyeDropMode(true);
+    };
+
+    const handleEndEyeDropClick = () => {
+        setEditingPoint('end');
+        setEyeDropMode(true);
+    };
+
     return (
         <div className="machine-mechanics-container" key={selectedPoint?.uuid}>
             <div className="machine-mechanics-header">
@@ -106,20 +117,49 @@ const VehicleMechanics: React.FC = () => {
 
                     {selectedPoint && (
                         <>
-                            <LabledDropdown
+                            <PositionInput
-                                key={`start-${selectedPoint.uuid}`}
                                 label="Start Point"
-                                defaultOption={selectedPoint.actions.start || "Select start point"}
+                                onChange={() => { }}
-                                options={connectedPointUuids}
+                                disabled={true}
-                                onSelect={handleStartPointChange}
+                                value1={
+                                    editingPoint === 'start' && previewPosition
+                                        ? parseFloat(previewPosition.x.toFixed(4))
+                                        : selectedPoint.actions.start && 'x' in selectedPoint.actions.start
+                                            ? parseFloat(selectedPoint.actions.start.x.toFixed(4))
+                                            : 0
+                                }
+                                value2={
+                                    editingPoint === 'start' && previewPosition
+                                        ? parseFloat(previewPosition.y.toFixed(4))
+                                        : selectedPoint.actions.start && 'y' in selectedPoint.actions.start
+                                            ? parseFloat(selectedPoint.actions.start.y.toFixed(4))
+                                            : 0
+                                }
+
+                                isEyedrop={true}
+                                handleEyeDropClick={handleStartEyeDropClick}
                             />
 
-                            <LabledDropdown
+                            <PositionInput
-                                key={`end-${selectedPoint.uuid}`}
                                 label="End Point"
-                                defaultOption={selectedPoint.actions.end || "Select end point"}
+                                onChange={() => { }}
-                                options={connectedPointUuids}
+                                disabled={true}
-                                onSelect={handleEndPointChange}
+                                value1={
+                                    editingPoint === 'end' && previewPosition
+                                        ? parseFloat(previewPosition.x.toFixed(4))
+                                        : selectedPoint.actions.end && 'x' in selectedPoint.actions.end
+                                            ? parseFloat(selectedPoint.actions.end.x.toFixed(4))
+                                            : 0
+                                }
+                                value2={
+                                    editingPoint === 'end' && previewPosition
+                                        ? parseFloat(previewPosition.y.toFixed(4))
+                                        : selectedPoint.actions.end && 'y' in selectedPoint.actions.end
+                                            ? parseFloat(selectedPoint.actions.end.y.toFixed(4))
+                                            : 0
+                                }
+                                isEyedrop={true}
+                                handleEyeDropClick={handleEndEyeDropClick}
                             />
 
                             <InputWithDropDown

app/src/components/layout/sidebarRight/properties/AssetProperties.tsx

@@ -55,8 +55,6 @@ const AssetProperties: React.FC = () => {
       {/* Name */}
       <div className="header">{selectedFloorItem.userData.name}</div>
 
-      <div className="split"></div>
-
       <PositionInput
         onChange={() => {}}
         value1={xValue.toFixed(5)}

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

@@ -42,6 +42,8 @@ const SelectionControls: React.FC = () => {
         itemsGroupRef.current = itemsGroup;
 
         let isSelecting = false;
+        let isRightClick = false;
+        let rightClickMoved = false;
         let isCtrlSelecting = false;
 
         const helper = new SelectionHelper(gl);
@@ -52,16 +54,23 @@ const SelectionControls: React.FC = () => {
         }
 
         const onPointerDown = (event: PointerEvent) => {
-            if (event.button !== 0) return
+            if (event.button === 2) {
-            isSelecting = false;
+                isRightClick = true;
-            isCtrlSelecting = event.ctrlKey;
+                rightClickMoved = false;
-            if (event.ctrlKey && duplicatedObjects.length === 0) {
+            } else if (event.button === 0) {
-                if (controls) (controls as any).enabled = false;
+                isSelecting = false;
-                selectionBox.startPoint.set(pointer.x, pointer.y, 0);
+                isCtrlSelecting = event.ctrlKey;
+                if (event.ctrlKey && duplicatedObjects.length === 0) {
+                    if (controls) (controls as any).enabled = false;
+                    selectionBox.startPoint.set(pointer.x, pointer.y, 0);
+                }
             }
         };
 
         const onPointerMove = (event: PointerEvent) => {
+            if (isRightClick) {
+                rightClickMoved = true;
+            }
             isSelecting = true;
             if (helper.isDown && event.ctrlKey && duplicatedObjects.length === 0 && isCtrlSelecting) {
                 selectionBox.endPoint.set(pointer.x, pointer.y, 0);
@@ -69,6 +78,14 @@ const SelectionControls: React.FC = () => {
         };
 
         const onPointerUp = (event: PointerEvent) => {
+            if (event.button === 2) {
+                isRightClick = false;
+                if (!rightClickMoved) {
+                    clearSelection();
+                }
+                return;
+            }
+
             if (isSelecting && isCtrlSelecting) {
                 isCtrlSelecting = false;
                 isSelecting = false;
@@ -94,10 +111,13 @@ const SelectionControls: React.FC = () => {
             }
         };
 
+
         const onContextMenu = (event: MouseEvent) => {
             event.preventDefault();
-            clearSelection();
+            if (!rightClickMoved) {
-        }
+                clearSelection();
+            }
+        };
 
         if (!toggleView && activeModule === "builder") {
             helper.enabled = true;

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

@@ -2,16 +2,22 @@ import { useFloorItems, useSimulationPaths } from '../../../store/store';
 import * as THREE from 'three';
 import * as Types from '../../../types/world/worldTypes';
 import { useEffect } from 'react';
+import { getAssetEventType } from '../../../services/simulation/getAssetEventType';
 
 function Behaviour() {
     const { setSimulationPaths } = useSimulationPaths();
     const { floorItems } = useFloorItems();
 
     useEffect(() => {
+        const email = localStorage.getItem('email')
+        const organization = (email!.split("@")[1]).split(".")[0];
         const newPaths: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema)[] = [];
 
         floorItems.forEach((item: Types.FloorItemType) => {
             if (item.modelfileID === "672a090f80d91ac979f4d0bd") {
+                // getAssetEventType(item.modelfileID, organization).then((res) => {
+                //     console.log('res: ', res);
+                // });
                 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);
@@ -67,7 +73,7 @@ function Behaviour() {
                     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 },
+                        actions: { uuid: THREE.MathUtils.generateUUID(), name: 'Action 1', type: 'Start', start: {}, hitCount: 1, end: {}, buffer: 0 },
                         connections: { source: { pathUUID: item.modeluuid, pointUUID: pointUUID }, targets: [] },
                         speed: 2,
                     },

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

@@ -96,24 +96,16 @@ function PathConnector({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObjec
                     };
                     const existingTargets = path.point.connections.targets || [];
 
-                    // Check if we're trying to add a connection to a Conveyor
+                    // Check if target is a Conveyor
                     const toPath = simulationPaths.find(p => p.modeluuid === toPathUUID);
-                    const isConnectingToConveyor = toPath?.type === 'Conveyor';
+                    if (toPath?.type !== 'Conveyor') {
-
+                        console.log("Vehicle can only connect to Conveyors");
-                    // Count existing connections
-                    if (existingTargets.length >= 2) {
-                        console.log("Vehicle can have maximum 2 connections");
                         return path;
                     }
 
-                    // Check if we already have a Conveyor connection and trying to add another
+                    // Check if already has a connection
-                    const hasConveyorConnection = existingTargets.some(target => {
+                    if (existingTargets.length >= 1) {
-                        const targetPath = simulationPaths.find(p => p.modeluuid === target.pathUUID);
+                        console.log("Vehicle can have only one connection");
-                        return targetPath?.type === 'Conveyor';
-                    });
-
-                    if (hasConveyorConnection && isConnectingToConveyor) {
-                        console.log("Vehicle can only have one connection to a Conveyor");
                         return path;
                     }
 
@@ -141,24 +133,16 @@ function PathConnector({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObjec
                     };
                     const existingTargets = path.point.connections.targets || [];
 
-                    // Check if we're receiving a connection from a Conveyor
+                    // Check if source is a Conveyor
                     const fromPath = simulationPaths.find(p => p.modeluuid === fromPathUUID);
-                    const isConnectingFromConveyor = fromPath?.type === 'Conveyor';
+                    if (fromPath?.type !== 'Conveyor') {
-
+                        console.log("Vehicle can only connect to Conveyors");
-                    // Count existing connections
-                    if (existingTargets.length >= 2) {
-                        console.log("Vehicle can have maximum 2 connections");
                         return path;
                     }
 
-                    // Check if we already have a Conveyor connection and trying to add another
+                    // Check if already has a connection
-                    const hasConveyorConnection = existingTargets.some(target => {
+                    if (existingTargets.length >= 1) {
-                        const targetPath = simulationPaths.find(p => p.modeluuid === target.pathUUID);
+                        console.log("Vehicle can have only one connection");
-                        return targetPath?.type === 'Conveyor';
-                    });
-
-                    if (hasConveyorConnection && isConnectingFromConveyor) {
-                        console.log("Vehicle can only have one connection to a Conveyor");
                         return path;
                     }
 
@@ -212,6 +196,7 @@ function PathConnector({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObjec
                 drag = true;
             }
         };
+
         const onContextMenu = (evt: MouseEvent) => {
             evt.preventDefault();
             if (drag || evt.button === 0) return;
@@ -282,7 +267,16 @@ function PathConnector({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObjec
                             return;
                         }
 
-                        // For Vehicles, skip the "already connected" check since they can have multiple connections
+                        // For Vehicles, check if they're already connected to anything
+                        if (intersected.userData.path.type === 'Vehicle') {
+                            const vehicleConnections = intersected.userData.path.point.connections.targets.length;
+                            if (vehicleConnections >= 1) {
+                                console.log("Vehicle can only have one connection");
+                                return;
+                            }
+                        }
+
+                        // For non-Vehicle paths, check if already connected
                         if (intersected.userData.path.type !== 'Vehicle') {
                             const isAlreadyConnected = simulationPaths.some(path => {
                                 if (path.type === 'Conveyor') {
@@ -300,48 +294,14 @@ function PathConnector({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObjec
                             }
                         }
 
-                        // Check vehicle connection limits
-                        const checkVehicleConnections = (pathUUID: string) => {
-                            const path = simulationPaths.find(p => p.modeluuid === pathUUID);
-                            if (path?.type === 'Vehicle') {
-                                return path.point.connections.targets.length >= 2;
-                            }
-                            return false;
-                        };
-
                         if (firstSelected) {
-                            // Check if either selected point is from a Vehicle with max connections
+                            // Check if trying to connect Vehicle to non-Conveyor
-                            if (checkVehicleConnections(firstSelected.pathUUID) ||
+                            if ((firstPath?.type === 'Vehicle' && secondPath?.type !== 'Conveyor') ||
-                                checkVehicleConnections(pathUUID)) {
+                                (secondPath?.type === 'Vehicle' && firstPath?.type !== 'Conveyor')) {
-                                console.log("Vehicle already has maximum connections");
+                                console.log("Vehicle can only connect to Conveyors");
                                 return;
                             }
 
-                            // Check if we're trying to add a second Conveyor connection to a Vehicle
-                            if (firstPath?.type === 'Vehicle' && secondPath?.type === 'Conveyor') {
-                                const hasConveyorConnection = firstPath.point.connections.targets.some(target => {
-                                    const targetPath = simulationPaths.find(p => p.modeluuid === target.pathUUID);
-                                    return targetPath?.type === 'Conveyor';
-                                });
-
-                                if (hasConveyorConnection) {
-                                    console.log("Vehicle can only have one connection to a Conveyor");
-                                    return;
-                                }
-                            }
-
-                            if (secondPath?.type === 'Vehicle' && firstPath?.type === 'Conveyor') {
-                                const hasConveyorConnection = secondPath.point.connections.targets.some(target => {
-                                    const targetPath = simulationPaths.find(p => p.modeluuid === target.pathUUID);
-                                    return targetPath?.type === 'Conveyor';
-                                });
-
-                                if (hasConveyorConnection) {
-                                    console.log("Vehicle can only have one connection to a Conveyor");
-                                    return;
-                                }
-                            }
-
                             // Prevent same-path connections
                             if (firstSelected.pathUUID === pathUUID) {
                                 console.log("Cannot connect spheres on the same path.");
@@ -478,28 +438,19 @@ function PathConnector({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObjec
                         return false;
                     });
 
-                // Check vehicle connection limits
+                // Check vehicle connection rules
                 const isVehicleAtMaxConnections = pathData.type === 'Vehicle' &&
-                    pathData.point.connections.targets.length >= 2;
+                    pathData.point.connections.targets.length >= 1;
-
+                const isVehicleConnectingToNonConveyor =
-                const isVehicleConveyorConflict =
+                    (firstPath?.type === 'Vehicle' && secondPath?.type !== 'Conveyor') ||
-                    (firstPath?.type === 'Vehicle' && secondPath?.type === 'Conveyor' &&
+                    (secondPath?.type === 'Vehicle' && firstPath?.type !== 'Conveyor');
-                        firstPath.point.connections.targets.some(t => {
-                            const targetPath = simulationPaths.find(p => p.modeluuid === t.pathUUID);
-                            return targetPath?.type === 'Conveyor';
-                        })) ||
-                    (secondPath?.type === 'Vehicle' && firstPath?.type === 'Conveyor' &&
-                        secondPath.point.connections.targets.some(t => {
-                            const targetPath = simulationPaths.find(p => p.modeluuid === t.pathUUID);
-                            return targetPath?.type === 'Conveyor';
-                        }));
 
                 if (
                     !isDuplicateConnection &&
                     !isVehicleToVehicle &&
                     !isNonVehicleAlreadyConnected &&
                     !isVehicleAtMaxConnections &&
-                    !isVehicleConveyorConflict &&
+                    !isVehicleConnectingToNonConveyor &&
                     firstSelected.sphereUUID !== sphereUUID &&
                     firstSelected.pathUUID !== pathUUID &&
                     (firstSelected.isCorner || isConnectable)

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

@@ -1,8 +1,8 @@
 import * as THREE from 'three';
 import * as Types from '../../../types/world/worldTypes';
-import { useRef, useState, useEffect } from 'react';
+import { useRef, useState, useEffect, useMemo } from 'react';
 import { Sphere, TransformControls } from '@react-three/drei';
-import { useIsConnecting, useRenderDistance, useSelectedActionSphere, useSelectedPath, useSimulationPaths } from '../../../store/store';
+import { useEditingPoint, useEyeDropMode, useIsConnecting, usePreviewPosition, useRenderDistance, useSelectedActionSphere, useSelectedPath, useSimulationPaths } from '../../../store/store';
 import { useFrame, useThree } from '@react-three/fiber';
 import { useSubModuleStore } from '../../../store/useModuleStore';
 
@@ -10,13 +10,18 @@ function PathCreation({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObject
     const { renderDistance } = useRenderDistance();
     const { setSubModule } = useSubModuleStore();
     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 { setSelectedPath } = useSelectedPath();
     const { simulationPaths, setSimulationPaths } = useSimulationPaths();
     const { isConnecting } = useIsConnecting();
-    const { camera } = useThree();
+    
-
     const groupRefs = useRef<{ [key: string]: THREE.Group }>({});
     const sphereRefs = useRef<{ [key: string]: THREE.Mesh }>({});
+    const isMovingRef = useRef(false);
     const transformRef = useRef<any>(null);
     const [transformMode, setTransformMode] = useState<'translate' | 'rotate' | null>(null);
 
@@ -77,6 +82,83 @@ function PathCreation({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObject
         setSimulationPaths(updatedPaths);
     };
 
+    useFrame(() => {
+        if (eyeDropMode) {
+            raycaster.setFromCamera(pointer, camera);
+            const intersectionPoint = new THREE.Vector3();
+            const point = raycaster.ray.intersectPlane(plane, intersectionPoint);
+
+            if (point) {
+                setPreviewPosition({ x: point.x, y: point.z });
+            }
+        } else {
+            setPreviewPosition(null);
+        }
+    });
+
+    useEffect(() => {
+        if (!camera) return;
+        const canvasElement = gl.domElement;
+        canvasElement.tabIndex = 0;
+
+
+        const onPointerDown = () => {
+            isMovingRef.current = false;
+        };
+
+        const onPointerMove = () => {
+            isMovingRef.current = true;
+        };
+
+        const onPointerUp = (event: PointerEvent) => {
+            if (!isMovingRef.current && eyeDropMode && event.button === 0 && previewPosition) {
+                event.preventDefault();
+                if (editingPoint) {
+                    handlePointUpdate(editingPoint, previewPosition.x, previewPosition.y);
+                    setEditingPoint(null);
+                    setEyeDropMode(false);
+                }
+            }
+        };
+
+        if (eyeDropMode) {
+            canvasElement.addEventListener("pointerdown", onPointerDown);
+            canvasElement.addEventListener("pointermove", onPointerMove);
+            canvasElement.addEventListener("pointerup", onPointerUp);
+        }
+
+        return () => {
+            canvasElement.removeEventListener("pointerdown", onPointerDown);
+            canvasElement.removeEventListener("pointermove", onPointerMove);
+            canvasElement.removeEventListener("pointerup", onPointerUp);
+        };
+    }, [eyeDropMode, editingPoint, previewPosition]);
+
+    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) {
+                return {
+                    ...path,
+                    point: {
+                        ...path.point,
+                        actions: {
+                            ...path.point.actions,
+                            [pointType]: {
+                                ...path.point.actions[pointType],
+                                x: x,
+                                y: z
+                            }
+                        }
+                    }
+                };
+            }
+            return path;
+        });
+
+        setSimulationPaths(updatedPaths);
+    };
 
     return (
         <group name='simulation-simulationPaths-group' ref={pathsGroupRef}>
@@ -92,7 +174,7 @@ function PathCreation({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObject
                             position={path.assetPosition}
                             rotation={path.assetRotation}
                             onClick={(e) => {
-                                if (isConnecting) return;
+                                if (isConnecting || eyeDropMode) return;
                                 e.stopPropagation();
                                 setSelectedPath({ path, group: groupRefs.current[path.modeluuid] });
                                 setSelectedActionSphere(null);
@@ -100,6 +182,7 @@ function PathCreation({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObject
                                 setSubModule('mechanics');
                             }}
                             onPointerMissed={() => {
+                                if (eyeDropMode) return;
                                 setSelectedPath(null);
                                 setSubModule('properties');
                             }}
@@ -113,7 +196,7 @@ function PathCreation({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObject
                                     name='events-sphere'
                                     ref={el => (sphereRefs.current[point.uuid] = el!)}
                                     onClick={(e) => {
-                                        if (isConnecting) return;
+                                        if (isConnecting || eyeDropMode) return;
                                         e.stopPropagation();
                                         setSelectedActionSphere({
                                             path,
@@ -124,6 +207,7 @@ function PathCreation({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObject
                                     }}
                                     userData={{ point, path }}
                                     onPointerMissed={() => {
+                                        if (eyeDropMode) return;
                                         setSubModule('properties');
                                         setSelectedActionSphere(null);
                                     }}
@@ -155,7 +239,7 @@ function PathCreation({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObject
                             ref={el => (groupRefs.current[path.modeluuid] = el!)}
                             position={path.assetPosition}
                             onClick={(e) => {
-                                if (isConnecting) return;
+                                if (isConnecting || eyeDropMode) return;
                                 e.stopPropagation();
                                 setSelectedPath({ path, group: groupRefs.current[path.modeluuid] });
                                 setSelectedActionSphere(null);
@@ -163,6 +247,7 @@ function PathCreation({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObject
                                 setSubModule('mechanics');
                             }}
                             onPointerMissed={() => {
+                                if (eyeDropMode) return;
                                 setSelectedPath(null);
                                 setSubModule('properties');
                             }}
@@ -175,7 +260,7 @@ function PathCreation({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObject
                                 name='events-sphere'
                                 ref={el => (sphereRefs.current[path.point.uuid] = el!)}
                                 onClick={(e) => {
-                                    if (isConnecting) return;
+                                    if (isConnecting || eyeDropMode) return;
                                     e.stopPropagation();
                                     setSelectedActionSphere({
                                         path,
@@ -186,6 +271,7 @@ function PathCreation({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObject
                                 }}
                                 userData={{ point: path.point, path }}
                                 onPointerMissed={() => {
+                                    if (eyeDropMode) return;
                                     setSubModule('properties');
                                     setSelectedActionSphere(null);
                                 }}

app/src/modules/simulation/simulation.tsx

@@ -1,6 +1,5 @@
-import { useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useRef, useMemo } from 'react';
 import { useSelectedActionSphere, useSelectedPath, useSimulationPaths } from '../../store/store';
-import { useThree } from '@react-three/fiber';
 import * as THREE from 'three';
 import Behaviour from './behaviour/behaviour';
 import PathCreation from './path/pathCreation';
@@ -29,9 +28,10 @@ function Simulation() {
     //     }
     // }, [selectedPath]);
 
+
     return (
         <>
-            <Behaviour/>
+            <Behaviour />
             {activeModule === 'simulation' && (
                 <>
                     <PathCreation pathsGroupRef={pathsGroupRef} />

app/src/services/simulation/getAssetEventType.ts

@@ -0,0 +1,26 @@
+let url_Backend_dwinzo = `http://${process.env.REACT_APP_TEST}`;
+
+export const getAssetEventType = async (modelId: string, organization: string) => {
+    try {
+        const response = await fetch(`${url_Backend_dwinzo}/api/v2/pointData/${modelId}/${organization}`, {
+            method: "GET",
+            headers: {
+                "Content-Type": "application/json",
+            },
+        });
+
+        if (!response.ok) {
+            throw new Error("Failed to fetch model event type");
+        }
+
+        const result = await response.json();
+        console.log('result: ', result);
+        return result;
+    } catch (error) {
+        if (error instanceof Error) {
+            throw new Error(error.message);
+        } else {
+            throw new Error("An unknown error occurred");
+        }
+    }
+};

app/src/store/store.ts

@@ -348,10 +348,30 @@ export const useStartSimulation = create<any>((set: any) => ({
   startSimulation: false,
   setStartSimulation: (x: any) => set({ startSimulation: x }),
 }));
+
+export const useEyeDropMode = create<any>((set: any) => ({
+  eyeDropMode: false,
+  setEyeDropMode: (x: any) => set({ eyeDropMode: x }),
+}));
+
+export const useEditingPoint = create<any>((set: any) => ({
+  editingPoint: false,
+  setEditingPoint: (x: any) => set({ editingPoint: x }),
+}));
+
+export const usePreviewPosition = create<{
+  previewPosition: { x: number; y: number } | null;
+  setPreviewPosition: (position: { x: number; y: number } | null) => void;
+}>((set) => ({
+  previewPosition: null,
+  setPreviewPosition: (position) => set({ previewPosition: position }),
+}));
+
 export const usezoneTarget = create<any>((set: any) => ({
   zoneTarget: [],
   setZoneTarget: (x: any) => set({ zoneTarget: x }),
 }));
+
 export const usezonePosition = create<any>((set: any) => ({
   zonePosition: [],
   setZonePosition: (x: any) => set({ zonePosition: x }),
@@ -371,6 +391,7 @@ export const useAsset3dWidget = create<any>((set: any) => ({
   widgetSelect: "",
   setWidgetSelect: (x: any) => set({ widgetSelect: x }),
 }));
+
 export const useWidgetSubOption = create<any>((set: any) => ({
   widgetSubOption: "2D",
   setWidgetSubOption: (x: any) => set({ widgetSubOption: x }),

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

@@ -310,7 +310,7 @@ interface VehicleEventsSchema {
     point: {
         uuid: string;
         position: [number, number, number];
-        actions: { uuid: string; name: string; type: string; start: string, hitCount: number, end: string, buffer: number };
+        actions: { uuid: string; name: string; type: string; start: { x: number, y: number } | {}, hitCount: number, end: { x: number, y: number } | {}, buffer: number };
         connections: { source: { pathUUID: string; pointUUID: string }; targets: { pathUUID: string; pointUUID: string }[] };
         speed: number;
     };