@@ -64,7 +85,19 @@ const ManchetteWithSpaceTimeChartWrapper = ({
style={{ height: `${heightOfManchetteWithSpaceTimeChart}px` }}
onScroll={handleScroll}
>
-
+
+ {waypointMenuData.menuPosition && (
+
+ )}
+
,
+ filteredWaypoints?: OperationalPoint[],
+ setFilteredWaypoints?: (waypoints: OperationalPoint[]) => void
+) => {
+ const { t } = useTranslation('simulation');
+
+ const [menuPosition, setMenuPosition] = useState<{ top: number; left: number }>();
+ const [activeOperationalPointId, setActiveOperationalPointId] = useState();
+
+ const menuRef = useRef(null);
+
+ const closeMenu = () => {
+ setMenuPosition(undefined);
+ setActiveOperationalPointId(undefined);
+ };
+
+ useOutsideClick(menuRef, closeMenu);
+ useModalFocusTrap(menuRef, closeMenu);
+
+ const menuItems: OSRDMenuItem[] = [
+ {
+ title: t('waypointMenu.hide'),
+ icon: ,
+ onClick: () => {
+ setMenuPosition(undefined);
+ setActiveOperationalPointId(undefined);
+ if (filteredWaypoints && setFilteredWaypoints) {
+ setFilteredWaypoints(
+ filteredWaypoints.filter((waypoint) => waypoint.id !== activeOperationalPointId)
+ );
+ }
+ },
+ },
+ ];
+
+ const handleWaypointClick = (id: string, ref: HTMLDivElement | null) => {
+ if (!ref || !manchetteWrapperRef.current) return;
+ const position = ref.getBoundingClientRect();
+ const manchetteWrapperPosition = manchetteWrapperRef.current.getBoundingClientRect();
+
+ // The position of the clicked waypoint is relative to the viewport so we need to
+ // substract the position of the manchetteWrapper to get the accurate position
+ setMenuPosition({
+ top:
+ position.bottom -
+ manchetteWrapperPosition.top +
+ SPACETIME_CHART_HEADER_HEIGHT -
+ WAYPOINT_MENU_OFFSET,
+ left: position.left - manchetteWrapperPosition.left,
+ });
+ setActiveOperationalPointId(id);
+ };
+
+ return { menuRef, menuPosition, menuItems, activeOperationalPointId, handleWaypointClick };
+};
+
+export default useWaypointMenu;
diff --git a/front/src/styles/scss/common/components/_manchetteWithSpaceTimeChart.scss b/front/src/styles/scss/common/components/_manchetteWithSpaceTimeChart.scss
index 7dc48d8a2e4..57c609958bb 100644
--- a/front/src/styles/scss/common/components/_manchetteWithSpaceTimeChart.scss
+++ b/front/src/styles/scss/common/components/_manchetteWithSpaceTimeChart.scss
@@ -37,6 +37,17 @@
.manchette {
overflow-y: auto;
overflow-x: hidden;
+
+ // TODO : remove this two styles when https://github.com/OpenRailAssociation/osrd-ui/issues/654 is fixed
+ .op {
+ height: 2rem;
+ line-height: 1.5rem;
+ padding-block: 0.1875rem 0.3125rem;
+
+ &::after {
+ bottom: 0.9844rem;
+ }
+ }
}
.space-time-chart-container {