2025-03-29 07:28:54 +00:00
|
|
|
import React, { useRef, useMemo } from "react";
|
|
|
|
import { InfoIcon } from "../../../icons/ExportCommonIcons";
|
2025-03-28 13:40:49 +00:00
|
|
|
import InputWithDropDown from "../../../ui/inputs/InputWithDropDown";
|
|
|
|
import EyeDropInput from "../../../ui/inputs/EyeDropInput";
|
2025-03-29 07:28:54 +00:00
|
|
|
import { useSelectedActionSphere, useSimulationPaths } from "../../../../store/store";
|
2025-03-28 13:40:49 +00:00
|
|
|
import * as Types from '../../../../types/world/worldTypes';
|
|
|
|
|
|
|
|
const VehicleMechanics: React.FC = () => {
|
|
|
|
const { selectedActionSphere } = useSelectedActionSphere();
|
|
|
|
const { simulationPaths, setSimulationPaths } = useSimulationPaths();
|
|
|
|
|
2025-03-29 07:28:54 +00:00
|
|
|
const propertiesContainerRef = useRef<HTMLDivElement>(null);
|
2025-03-28 13:40:49 +00:00
|
|
|
|
|
|
|
const selectedPoint = useMemo(() => {
|
2025-03-29 07:28:54 +00:00
|
|
|
if (!selectedActionSphere?.point?.uuid) return null;
|
2025-03-28 13:40:49 +00:00
|
|
|
|
2025-03-29 07:28:54 +00:00
|
|
|
const vehiclePaths = simulationPaths.filter(
|
|
|
|
(path): path is Types.VehicleEventsSchema => path.type === "Vehicle"
|
|
|
|
);
|
|
|
|
|
|
|
|
return vehiclePaths.find(
|
|
|
|
(path) => path.point.uuid === selectedActionSphere.point.uuid
|
|
|
|
)?.point;
|
|
|
|
}, [selectedActionSphere, simulationPaths, selectedActionSphere?.point?.uuid]);
|
|
|
|
|
|
|
|
const handleActionUpdate = React.useCallback((updatedAction: Partial<Types.VehicleEventsSchema['point']['actions']>) => {
|
|
|
|
if (!selectedActionSphere?.point?.uuid) return;
|
2025-03-28 13:40:49 +00:00
|
|
|
|
|
|
|
const updatedPaths = simulationPaths.map((path) => {
|
2025-03-29 07:28:54 +00:00
|
|
|
if (path.type === "Vehicle" && path.point.uuid === selectedActionSphere.point.uuid) {
|
2025-03-28 13:40:49 +00:00
|
|
|
return {
|
|
|
|
...path,
|
2025-03-29 07:28:54 +00:00
|
|
|
point: {
|
|
|
|
...path.point,
|
|
|
|
actions: {
|
|
|
|
...path.point.actions,
|
|
|
|
...updatedAction
|
2025-03-28 13:40:49 +00:00
|
|
|
}
|
2025-03-29 07:28:54 +00:00
|
|
|
}
|
2025-03-28 13:40:49 +00:00
|
|
|
};
|
|
|
|
}
|
|
|
|
return path;
|
|
|
|
});
|
|
|
|
|
|
|
|
setSimulationPaths(updatedPaths);
|
2025-03-29 07:28:54 +00:00
|
|
|
}, [selectedActionSphere?.point?.uuid, simulationPaths, setSimulationPaths]);
|
2025-03-28 13:40:49 +00:00
|
|
|
|
2025-03-29 07:28:54 +00:00
|
|
|
const handleStartPositionChange = React.useCallback((position: string) => {
|
|
|
|
handleActionUpdate({ start: position });
|
|
|
|
}, [handleActionUpdate]);
|
2025-03-28 13:40:49 +00:00
|
|
|
|
2025-03-29 07:28:54 +00:00
|
|
|
const handleEndPositionChange = React.useCallback((position: string) => {
|
|
|
|
handleActionUpdate({ end: position });
|
|
|
|
}, [handleActionUpdate]);
|
2025-03-28 13:40:49 +00:00
|
|
|
|
2025-03-29 07:28:54 +00:00
|
|
|
const handleHitCountChange = React.useCallback((hitCount: number) => {
|
|
|
|
handleActionUpdate({ hitCount });
|
|
|
|
}, [handleActionUpdate]);
|
2025-03-28 13:40:49 +00:00
|
|
|
|
2025-03-29 07:28:54 +00:00
|
|
|
const handleBufferChange = React.useCallback((buffer: number) => {
|
|
|
|
handleActionUpdate({ buffer });
|
|
|
|
}, [handleActionUpdate]);
|
2025-03-28 13:40:49 +00:00
|
|
|
|
2025-03-29 07:28:54 +00:00
|
|
|
const handleSpeedChange = React.useCallback((speed: number) => {
|
2025-03-29 08:16:31 +00:00
|
|
|
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,
|
|
|
|
speed: speed
|
|
|
|
}
|
|
|
|
};
|
|
|
|
}
|
|
|
|
return path;
|
|
|
|
});
|
|
|
|
|
|
|
|
setSimulationPaths(updatedPaths);
|
2025-03-29 07:28:54 +00:00
|
|
|
}, [selectedActionSphere?.point?.uuid, simulationPaths, setSimulationPaths]);
|
2025-03-28 13:40:49 +00:00
|
|
|
|
|
|
|
return (
|
2025-03-29 07:28:54 +00:00
|
|
|
<div className="machine-mechanics-container" key={selectedPoint?.uuid}>
|
2025-03-28 13:40:49 +00:00
|
|
|
<div className="machine-mechanics-header">
|
2025-03-29 07:28:54 +00:00
|
|
|
{selectedActionSphere?.path?.modelName || "Vehicle point not found"}
|
2025-03-28 13:40:49 +00:00
|
|
|
</div>
|
|
|
|
|
|
|
|
<div className="machine-mechanics-content-container">
|
2025-03-29 07:28:54 +00:00
|
|
|
<div className="selected-properties-container" ref={propertiesContainerRef}>
|
|
|
|
<div className="properties-header">Vehicle Properties</div>
|
2025-03-28 13:40:49 +00:00
|
|
|
|
2025-03-29 07:28:54 +00:00
|
|
|
{selectedPoint && (
|
|
|
|
<>
|
|
|
|
<EyeDropInput
|
|
|
|
key={`start-${selectedPoint.uuid}`}
|
|
|
|
label="Start Position"
|
|
|
|
value={selectedPoint.actions.start}
|
|
|
|
onChange={handleStartPositionChange}
|
|
|
|
/>
|
2025-03-28 13:40:49 +00:00
|
|
|
|
2025-03-29 07:28:54 +00:00
|
|
|
<EyeDropInput
|
|
|
|
key={`end-${selectedPoint.uuid}`}
|
|
|
|
label="End Position"
|
|
|
|
value={selectedPoint.actions.end}
|
|
|
|
onChange={handleEndPositionChange}
|
|
|
|
/>
|
2025-03-28 13:40:49 +00:00
|
|
|
|
2025-03-29 07:28:54 +00:00
|
|
|
<InputWithDropDown
|
|
|
|
key={`hitcount-${selectedPoint.uuid}`}
|
|
|
|
label="Hit Count"
|
|
|
|
value={selectedPoint.actions.hitCount.toString()}
|
|
|
|
onChange={(value) => handleHitCountChange(parseInt(value))}
|
|
|
|
/>
|
2025-03-28 13:40:49 +00:00
|
|
|
|
2025-03-29 07:28:54 +00:00
|
|
|
<InputWithDropDown
|
|
|
|
key={`buffer-${selectedPoint.uuid}`}
|
|
|
|
label="Buffer Time"
|
|
|
|
value={selectedPoint.actions.buffer.toString()}
|
|
|
|
onChange={(value) => handleBufferChange(parseInt(value))}
|
|
|
|
/>
|
2025-03-28 13:40:49 +00:00
|
|
|
|
|
|
|
<InputWithDropDown
|
2025-03-29 07:28:54 +00:00
|
|
|
key={`speed-${selectedPoint.uuid}`}
|
|
|
|
label="Vehicle Speed"
|
|
|
|
value={selectedPoint.speed.toString()}
|
2025-03-28 13:40:49 +00:00
|
|
|
onChange={(value) => handleSpeedChange(parseFloat(value))}
|
|
|
|
/>
|
2025-03-29 07:28:54 +00:00
|
|
|
</>
|
2025-03-28 13:40:49 +00:00
|
|
|
)}
|
2025-03-29 07:28:54 +00:00
|
|
|
|
2025-03-28 13:40:49 +00:00
|
|
|
</div>
|
2025-03-29 07:28:54 +00:00
|
|
|
|
2025-03-28 13:40:49 +00:00
|
|
|
<div className="footer">
|
|
|
|
<InfoIcon />
|
2025-03-29 07:28:54 +00:00
|
|
|
Configure vehicle's movement and interaction properties.
|
2025-03-28 13:40:49 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
2025-03-29 07:28:54 +00:00
|
|
|
export default React.memo(VehicleMechanics);
|