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) => {
-        handleActionUpdate({ start: uuid });
+    const handleStartPointChange = React.useCallback((position: { x: number, y: number }) => {
     }, [handleActionUpdate]);
 
-    const handleEndPointChange = React.useCallback((uuid: string) => {
-        handleActionUpdate({ end: uuid });
+    const handleEndPointChange = React.useCallback((position: { x: number, y: number }) => {
     }, [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
-                                key={`start-${selectedPoint.uuid}`}
+                            <PositionInput
                                 label="Start Point"
-                                defaultOption={selectedPoint.actions.start || "Select start point"}
-                                options={connectedPointUuids}
-                                onSelect={handleStartPointChange}
+                                onChange={() => { }}
+                                disabled={true}
+                                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
-                                key={`end-${selectedPoint.uuid}`}
+                            <PositionInput
                                 label="End Point"
-                                defaultOption={selectedPoint.actions.end || "Select end point"}
-                                options={connectedPointUuids}
-                                onSelect={handleEndPointChange}
+                                onChange={() => { }}
+                                disabled={true}
+                                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)}