fixup! ui-manchette: fix waypoint menu positioning

Author: SharglutDev

ui-manchette-with-spacetimechart/src/stories/base-with-waypoint-menu.stories.tsx

@@ -36,9 +36,7 @@ const ManchetteWithSpaceTimeWrapper = ({
   const manchetteWithSpaceTimeChartRef = useRef<HTMLDivElement>(null);
   // Allow us to compute the position of the menu in Manchette component
   const manchetteWithSpaceTimeCharWrappertRef = useRef<HTMLDivElement>(null);
-  const [activeWaypointRef, setActiveWaypointPointRef] =
-    useState<React.RefObject<HTMLDivElement>>();
-  // Allow us now which waypoint has been clicked and change its style
+  // Allow us to know which waypoint has been clicked and change its style
   const [activeWaypointId, setActiveWaypointId] = useState<string>();
 
   const menuItems: MenuItem[] = [
@@ -47,7 +45,6 @@ const ManchetteWithSpaceTimeWrapper = ({
       icon: <EyeClosed />,
       onClick: (e: React.MouseEvent) => {
         e.stopPropagation();
-        setActiveWaypointPointRef(undefined);
         setActiveWaypointId(undefined);
       },
     },
@@ -56,18 +53,13 @@ const ManchetteWithSpaceTimeWrapper = ({
       icon: <Telescope />,
       onClick: (e: React.MouseEvent) => {
         e.stopPropagation();
-        setActiveWaypointPointRef(undefined);
         setActiveWaypointId(undefined);
       },
     },
   ];
 
-  const handleWaypointClick = (
-    waypointId: string,
-    waypointRef: React.RefObject<HTMLDivElement>
-  ) => {
+  const handleWaypointClick = (waypointId: string) => {
     setActiveWaypointId(waypointId);
-    setActiveWaypointPointRef(waypointRef);
   };
 
   const { manchetteProps, spaceTimeChartProps, handleScroll } = useManchettesWithSpaceTimeChart(
@@ -102,7 +94,6 @@ const ManchetteWithSpaceTimeWrapper = ({
           waypointMenuData={{
             menu: <Menu items={menuItems} />,
             activeWaypointId,
-            activeWaypointRef,
             manchetteWrapperRef: manchetteWithSpaceTimeCharWrappertRef,
           }}
         />

ui-manchette/src/components/Manchette.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useLayoutEffect, useRef, useState } from 'react';
 
 import { ZoomIn, ZoomOut } from '@osrd-project/ui-icons';
 import cx from 'classnames';
@@ -7,9 +7,6 @@ import { INITIAL_OP_LIST_HEIGHT, MAX_ZOOM_Y, MIN_ZOOM_Y } from './consts';
 import WaypointList from './WaypointList';
 import type { InteractiveWaypoint, WaypointMenuData } from '../types';
 
-const WAYPOINT_MENU_LEFT_OFFSET = 8;
-const WAYPOINT_MENU_TOP_OFFSET = -2;
-
 type ManchetteProps = {
   waypoints: InteractiveWaypoint[];
   waypointMenuData?: WaypointMenuData;
@@ -36,33 +33,34 @@ const Manchette = ({
   height = INITIAL_OP_LIST_HEIGHT,
 }: ManchetteProps) => {
   const [menuPosition, setMenuPosition] = useState<number>();
+  const activeWaypointRef = useRef<HTMLDivElement>(null);
 
   // Allow to track the menu position after we might have scrolled in the page
-  useEffect(() => {
+  useLayoutEffect(() => {
     const manchetteWrapperPosition =
       waypointMenuData?.manchetteWrapperRef?.current?.getBoundingClientRect().top;
-    const waypointPosition =
-      waypointMenuData?.activeWaypointRef?.current?.getBoundingClientRect().top;
+    const waypointPosition = activeWaypointRef?.current?.getBoundingClientRect().top;
 
     if (!manchetteWrapperPosition || !waypointPosition) {
       setMenuPosition(undefined);
     } else {
-      setMenuPosition(window.scrollY * 2 + manchetteWrapperPosition + waypointPosition);
+      setMenuPosition(waypointPosition - manchetteWrapperPosition);
     }
   }, [waypointMenuData]);
 
   return (
     <div className="manchette-container">
-      {waypointMenuData?.menu && menuPosition && (
-        <div
-          className="menu-wrapper"
-          style={{ top: menuPosition + WAYPOINT_MENU_TOP_OFFSET, left: WAYPOINT_MENU_LEFT_OFFSET }}
-        >
+      {waypointMenuData?.menu && waypointMenuData.activeWaypointId && (
+        <div className="menu-wrapper" style={{ top: menuPosition }}>
           {waypointMenuData.menu}
         </div>
       )}
       <div className="bg-white-100 border-r border-grey-30" style={{ minHeight: `${height}px` }}>
-        <WaypointList waypoints={waypoints} activeWaypointId={waypointMenuData?.activeWaypointId} />
+        <WaypointList
+          waypoints={waypoints}
+          activeWaypointId={waypointMenuData?.activeWaypointId}
+          activeWaypointRef={activeWaypointRef}
+        />
         {children}
       </div>
       <div className="manchette-actions">

ui-manchette/src/components/Waypoint.tsx

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import React from 'react';
 
 import cx from 'classnames';
 
@@ -8,36 +8,37 @@ import { positionMmToKm } from '../utils';
 
 type WaypointProps = {
   waypoint: InteractiveWaypoint;
+  nameRef?: React.RefObject<HTMLDivElement>;
   isActive: boolean;
   isMenuActive?: boolean;
 };
 
 const Waypoint = ({
   waypoint: { name, secondaryCode, id, position, display, onClick },
+  nameRef,
   isActive,
   isMenuActive,
 }: WaypointProps) => {
-  const waypointRef = useRef<HTMLDivElement>(null);
-
   if (!display) return null;
 
   return (
     <div
-      ref={waypointRef}
       className={cx('flex waypoint items-baseline', {
         'waypoint-active': isActive,
         'menu-active': isMenuActive,
       })}
       id={id}
       onClick={() => {
-        if (onClick && !isMenuActive) onClick(id, waypointRef);
+        if (onClick && !isMenuActive) onClick(id);
       }}
     >
       <div className="waypoint-position justify-self-start text-end">
         {positionMmToKm(position)}
       </div>
 
-      <div className="waypoint-name mx-2 justify-self-start">{name}</div>
+      <div ref={nameRef} className="waypoint-name mx-2 justify-self-start">
+        {name}
+      </div>
       <div className="waypoint-separator"></div>
       <div className="waypoint-ch font-mono justify-self-end">{secondaryCode}</div>
       <div className="waypoint-separator"></div>

ui-manchette/src/components/WaypointList.tsx

@@ -6,9 +6,10 @@ import type { InteractiveWaypoint } from '../types';
 type WaypointListProps = {
   waypoints: InteractiveWaypoint[];
   activeWaypointId?: string;
+  activeWaypointRef?: React.RefObject<HTMLDivElement>;
 };
 
-const WaypointList = ({ waypoints, activeWaypointId }: WaypointListProps) => (
+const WaypointList = ({ waypoints, activeWaypointId, activeWaypointRef }: WaypointListProps) => (
   <div className="waypoint-list ">
     {waypoints.map((waypoint) => (
       <div
@@ -18,6 +19,7 @@ const WaypointList = ({ waypoints, activeWaypointId }: WaypointListProps) => (
       >
         <Waypoint
           waypoint={waypoint}
+          nameRef={activeWaypointId === waypoint.id ? activeWaypointRef : undefined}
           isActive={activeWaypointId === waypoint.id}
           isMenuActive={!!activeWaypointId}
         />

ui-manchette/src/styles/manchette.css

@@ -2,6 +2,8 @@
   .menu-wrapper {
     position: absolute;
     z-index: 12;
+    left: 8px;
+    margin-top: 28px;
   }
 
   .manchette-actions {

ui-manchette/src/types.ts

@@ -10,13 +10,12 @@ export type Waypoint = {
 export type InteractiveWaypoint = Waypoint & {
   styles?: CSSProperties;
   display?: boolean;
-  onClick?: (waypointId: string, waypointRef: React.RefObject<HTMLDivElement>) => void;
+  onClick?: (waypointId: string) => void;
 };
 
 export type WaypointMenuData = {
   menu: React.ReactNode;
   activeWaypointId?: string;
-  activeWaypointRef?: React.RefObject<HTMLDivElement>;
   manchetteWrapperRef: React.RefObject<HTMLDivElement>;
 };