import React, { useRef, useMemo } from "react"; import { InfoIcon } from "../../../icons/ExportCommonIcons"; import InputWithDropDown from "../../../ui/inputs/InputWithDropDown"; import { useEditingPoint, useEyeDropMode, usePreviewPosition, useSelectedActionSphere, useSimulationPaths } from "../../../../store/store"; import * as Types from '../../../../types/world/worldTypes'; import PositionInput from "../customInput/PositionInputs"; import { setEventApi } from "../../../../services/factoryBuilder/assest/floorAsset/setEventsApt"; 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(null); const { selectedPoint, connectedPointUuids } = useMemo(() => { if (!selectedActionSphere?.points?.uuid) return { selectedPoint: null, connectedPointUuids: [] }; const vehiclePaths = simulationPaths.filter( (path): path is Types.VehicleEventsSchema => path.type === "Vehicle" ); const points = vehiclePaths.find( (path) => path.points.uuid === selectedActionSphere.points.uuid )?.points; if (!points) return { selectedPoint: null, connectedPointUuids: [] }; const connectedUuids: string[] = []; if (points.connections?.targets) { points.connections.targets.forEach(target => { connectedUuids.push(target.pointUUID); }); } return { selectedPoint: points, connectedPointUuids: connectedUuids }; }, [selectedActionSphere, simulationPaths]); const updateBackend = async (updatedPath: Types.VehicleEventsSchema | undefined) => { if (!updatedPath) return; const email = localStorage.getItem("email"); const organization = email ? email.split("@")[1].split(".")[0] : ""; await setEventApi( organization, updatedPath.modeluuid, { type: "Vehicle", points: updatedPath.points } ); } const handleActionUpdate = React.useCallback((updatedAction: Partial) => { if (!selectedActionSphere?.points?.uuid) return; const updatedPaths = simulationPaths.map((path) => { if (path.type === "Vehicle" && path.points.uuid === selectedActionSphere.points.uuid) { return { ...path, points: { ...path.points, actions: { ...path.points.actions, ...updatedAction } } }; } return path; }); const updatedPath = updatedPaths.find( (path): path is Types.VehicleEventsSchema => path.type === "Vehicle" && path.points.uuid === selectedActionSphere.points.uuid ); updateBackend(updatedPath); setSimulationPaths(updatedPaths); }, [selectedActionSphere?.points?.uuid, simulationPaths, setSimulationPaths]); const handleHitCountChange = React.useCallback((hitCount: number) => { handleActionUpdate({ hitCount }); }, [handleActionUpdate]); const handleBufferChange = React.useCallback((buffer: number) => { handleActionUpdate({ buffer }); }, [handleActionUpdate]); const handleSpeedChange = React.useCallback((speed: number) => { if (!selectedActionSphere?.points?.uuid) return; const updatedPaths = simulationPaths.map((path) => { if (path.type === "Vehicle" && path.points.uuid === selectedActionSphere.points.uuid) { return { ...path, points: { ...path.points, speed: speed } }; } return path; }); const updatedPath = updatedPaths.find( (path): path is Types.VehicleEventsSchema => path.type === "Vehicle" && path.points.uuid === selectedActionSphere.points.uuid ); updateBackend(updatedPath); setSimulationPaths(updatedPaths); }, [selectedActionSphere?.points?.uuid, simulationPaths, setSimulationPaths]); const handleStartEyeDropClick = () => { setEditingPoint('start'); setEyeDropMode(true); }; const handleEndEyeDropClick = () => { setEditingPoint('end'); setEyeDropMode(true); }; return (
{selectedActionSphere?.path?.modelName || "Vehicle point not found"}
Vehicle Properties
{selectedPoint && ( <> { }} 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} /> { }} 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} /> handleHitCountChange(parseInt(value))} /> handleBufferChange(parseInt(value))} /> handleSpeedChange(parseFloat(value))} /> )}
Configure vehicle's movement and interaction properties.
); }; export default React.memo(VehicleMechanics);