ui-manchette: fix waypoint menu positioning

- Move the menu next to its related waypoint so it can always be positioned relatively to it
- To keep osrd-ui as neutral as possible, the menu has no styles, they need to be passed by props

Signed-off-by: SharglutDev <[email protected]>

Author: SharglutDev

ui-manchette/src/components/Manchette.tsx

@@ -5,11 +5,11 @@ import cx from 'classnames';
 
 import { INITIAL_OP_LIST_HEIGHT, MAX_ZOOM_Y, MIN_ZOOM_Y } from './consts';
 import OperationalPointList from './OperationalPointList';
-import type { StyledOperationalPointType } from '../types';
+import type { StyledOperationalPointType, WaypointMenuData } from '../types';
 
 type ManchetteProps = {
   operationalPoints: StyledOperationalPointType[];
-  activeOperationalPointId?: string;
+  waypointMenuData: WaypointMenuData;
   zoomYIn: () => void;
   zoomYOut: () => void;
   resetZoom: () => void;
@@ -26,10 +26,9 @@ const Manchette = ({
   resetZoom,
   yZoom = 1,
   operationalPoints,
-  activeOperationalPointId,
+  waypointMenuData,
   isProportional = true,
   toggleMode,
-  children,
 }: ManchetteProps) => (
   <div className="manchette-container">
     <div
@@ -38,9 +37,8 @@ const Manchette = ({
     >
       <OperationalPointList
         operationalPoints={operationalPoints}
-        activeOperationalPointId={activeOperationalPointId}
+        waypointMenuData={waypointMenuData}
       />
-      {children}
     </div>
     <div className="manchette-actions">
       <div className="zoom-buttons">

ui-manchette/src/components/OperationalPoint.tsx

@@ -2,18 +2,23 @@ import React, { useRef } from 'react';
 
 import cx from 'classnames';
 
-import { type StyledOperationalPointType } from '../types';
+import type { WaypointMenuItem, StyledOperationalPointType } from '../types';
 import '@osrd-project/ui-core/dist/theme.css';
 import { positionMmToKm } from '../utils';
+import WaypointMenu from './WaypointMenu';
 
 type OperationalPointProps = {
   operationalPoint: StyledOperationalPointType;
   isActive: boolean;
+  waypointMenuItems?: WaypointMenuItem[];
+  waypointMenuClassName?: string;
 };
 
 const OperationalPoint = ({
   operationalPoint: { extensions, id, position, display, onClick },
   isActive,
+  waypointMenuItems,
+  waypointMenuClassName,
 }: OperationalPointProps) => {
   const opRef = useRef<HTMLDivElement>(null);
 
@@ -27,7 +32,7 @@ const OperationalPoint = ({
       id={id}
       ref={opRef}
       onClick={() => {
-        if (onClick) onClick(id, opRef.current);
+        if (onClick) onClick(`${id}-${position}`); // to handle waypoints with same id
       }}
     >
       <div className="op-position justify-self-start text-end">{positionMmToKm(position)}</div>
@@ -39,6 +44,9 @@ const OperationalPoint = ({
 
       <div className="op-type"></div>
       <div className="op-separator"></div>
+      {isActive && waypointMenuItems && (
+        <WaypointMenu items={waypointMenuItems} className={waypointMenuClassName} />
+      )}
     </div>
   );
 };

ui-manchette/src/components/OperationalPointList.tsx

@@ -1,16 +1,16 @@
 import React from 'react';
 
 import OperationalPoint from './OperationalPoint';
-import { type StyledOperationalPointType } from '../types';
+import type { WaypointMenuData, StyledOperationalPointType } from '../types';
 
 type OperationalPointListProps = {
   operationalPoints: StyledOperationalPointType[];
-  activeOperationalPointId?: string;
+  waypointMenuData: WaypointMenuData;
 };
 
 const OperationalPointList = ({
   operationalPoints,
-  activeOperationalPointId,
+  waypointMenuData: { activeOperationalPointId, waypointMenuItems, waypointMenuClassName },
 }: OperationalPointListProps) => (
   <div className="operational-point-list ">
     {operationalPoints.map((op) => (
@@ -19,7 +19,12 @@ const OperationalPointList = ({
         className="operational-point-wrapper flex flex-col justify-start"
         style={op.styles}
       >
-        <OperationalPoint operationalPoint={op} isActive={activeOperationalPointId === op.id} />
+        <OperationalPoint
+          operationalPoint={op}
+          isActive={activeOperationalPointId === `${op.id}-${op.position}`}
+          waypointMenuItems={waypointMenuItems}
+          waypointMenuClassName={waypointMenuClassName}
+        />
       </div>
     ))}
   </div>

ui-manchette/src/components/WaypointMenu.tsx

@@ -0,0 +1,33 @@
+import React, { type HTMLAttributes } from 'react';
+
+import { type WaypointMenuItem } from '../types';
+
+type WaypointMenuProps = HTMLAttributes<unknown> & {
+  items: WaypointMenuItem[];
+};
+
+/**
+ * An optional menu to handle some actions when clicking on a waypoint
+ *
+ * The menu doesn't have any styles by default so the user can customize it as needed
+ *
+ * Styles need to be send from the application with props
+ */
+const WaypointMenu = ({ items, className }: WaypointMenuProps) => (
+  <div className={className}>
+    {items.map(({ title, icon, onClick }) => (
+      <button
+        key={title}
+        type="button"
+        onClick={(e) => {
+          onClick(e);
+        }}
+      >
+        <span>{icon}</span>
+        <span>{title}</span>
+      </button>
+    ))}
+  </div>
+);
+
+export default WaypointMenu;

ui-manchette/src/stories/Manchette.stories.tsx

@@ -1,16 +1,15 @@
-import React, { useRef, useState } from 'react';
+import React, { useState } from 'react';
 
 import '@osrd-project/ui-core/dist/theme.css';
 import '@osrd-project/ui-manchette/dist/theme.css';
 import { EyeClosed, Telescope } from '@osrd-project/ui-icons';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { SAMPLE_PATH_PROPERTIES_DATA } from './assets/sampleData';
-import Menu, { type MenuItem } from './components/Menu';
 import Manchette from '../components/Manchette';
-import { type StyledOperationalPointType } from '../types';
+import type { WaypointMenuItem, StyledOperationalPointType } from '../types';
 
-const OperationalPointListData: StyledOperationalPointType[] =
+const operationalPointListData: StyledOperationalPointType[] =
   SAMPLE_PATH_PROPERTIES_DATA.operational_points?.map((op) => ({ ...op, display: true })) ?? [];
 
 const meta: Meta<typeof Manchette> = {
@@ -33,59 +32,47 @@ const meta: Meta<typeof Manchette> = {
 };
 
 const ManchetteWithWaypointMenu = () => {
-  const [menuPosition, setMenuPosition] = useState<{ top: number; left: number } | null>(null);
   const [activeOperationalPointId, setActiveOperationalPointId] = useState<string>();
 
-  const menuRef = useRef<HTMLDivElement>(null);
-
-  const menuItems: MenuItem[] = [
+  const menuItems: WaypointMenuItem[] = [
     {
       title: 'Action 1',
       icon: <EyeClosed />,
-      onClick: () => {
-        setMenuPosition(null);
+      onClick: (e: React.MouseEvent) => {
+        e.stopPropagation();
         setActiveOperationalPointId(undefined);
       },
     },
     {
       title: 'Action 2',
       icon: <Telescope />,
-      onClick: () => {
-        setMenuPosition(null);
+      onClick: (e: React.MouseEvent) => {
+        e.stopPropagation();
         setActiveOperationalPointId(undefined);
       },
     },
   ];
 
-  const handleWaypointClick = (id: string, ref: HTMLDivElement | null) => {
-    if (!ref) return;
-    const position = ref.getBoundingClientRect();
-    setMenuPosition({ top: position.bottom - 2, left: position.left });
+  const handleWaypointClick = (id: string) => {
     setActiveOperationalPointId(id);
   };
 
   return (
     <Manchette
-      operationalPoints={OperationalPointListData.map((op) => ({
+      operationalPoints={operationalPointListData.map((op) => ({
         ...op,
-        onClick: (id, ref) => {
-          handleWaypointClick(id, ref);
-        },
+        onClick: handleWaypointClick,
       }))}
       zoomYIn={() => {}}
       zoomYOut={() => {}}
       resetZoom={() => {}}
       toggleMode={() => {}}
-      activeOperationalPointId={activeOperationalPointId}
-    >
-      {menuPosition && (
-        <Menu
-          menuRef={menuRef}
-          items={menuItems}
-          style={{ width: '305px', top: menuPosition.top, left: menuPosition.left }}
-        />
-      )}
-    </Manchette>
+      waypointMenuData={{
+        activeOperationalPointId,
+        waypointMenuItems: menuItems,
+        waypointMenuClassName: 'menu',
+      }}
+    />
   );
 };
 
@@ -94,7 +81,7 @@ type Story = StoryObj<typeof ManchetteWithWaypointMenu>;
 
 export const Default: Story = {
   args: {
-    operationalPoints: OperationalPointListData,
+    operationalPoints: operationalPointListData,
   },
 };
 

ui-manchette/src/stories/components/Menu.tsx

@@ -2,6 +2,5 @@
 @import 'tailwindcss/components';
 @import 'tailwindcss/utilities';
 @import 'manchette.css';
-@import 'menu.css';
 @import 'operational-point.css';
 @import 'operational-point-list.css';

ui-manchette/src/styles/main.css

@@ -1,5 +1,44 @@
 .manchette-container {
+  .menu {
+    position: absolute;
+    z-index: 10;
+    @apply bg-grey-5;
+    width: 305px;
+    top: 30px;
+    left: 0;
+    border: 0.0625rem solid #b6b2af;
+    border-radius: 0.5rem;
+    box-shadow:
+      0 0.375rem 1.3125rem -0.3125rem rgba(101, 169, 232, 0.341810533216783),
+      0 1rem 1.875rem -0.3125rem rgba(0, 0, 0, 0.2),
+      0 0.1875rem 0.3125rem -0.125rem rgba(0, 0, 0, 0.1),
+      inset 0 0 0 0.0625rem #ffffff;
+
+    /* .menu-item { */
+    button {
+      width: 100%;
+      height: 2.75rem;
+      font-size: 0.875rem;
+      display: flex;
+      align-items: center;
+
+      &:not(:first-child) {
+        border-top: 0.0625rem solid #ffffff;
+      }
+
+      &:not(:only-of-type, :last-child) {
+        border-bottom: 0.0625rem solid #d3d1cf;
+      }
+
+      /* .icon { */
+      span:first-child {
+        @apply text-primary-40;
+        padding-inline: 1rem;
+      }
+    }
+  }
   .manchette-actions {
+    z-index: 11;
     align-items: center;
     background-color: rgba(250, 249, 245, 0.6);
     border-top: solid 1px;
@@ -16,7 +55,6 @@
     backdrop-filter: blur(8px);
     -webkit-backdrop-filter: blur(8px);
 
-
     .zoom-buttons {
       display: flex;
       align-items: center;

ui-manchette/src/styles/manchette.css

@@ -51,7 +51,19 @@ export type OperationalPointType = ArrayElement<PathProperties['operational_poin
 export type StyledOperationalPointType = OperationalPointType & {
   styles?: CSSProperties;
   display?: boolean;
-  onClick?: (opId: string, opRef: HTMLDivElement | null) => void;
+  onClick?: (opId: string) => void;
+};
+
+export type WaypointMenuData = {
+  activeOperationalPointId?: string;
+  waypointMenuItems?: WaypointMenuItem[];
+  waypointMenuClassName?: string;
+};
+
+export type WaypointMenuItem = {
+  title: string;
+  icon: React.ReactNode;
+  onClick: (e: React.MouseEvent) => void;
 };
 
 export type ProjectPathTrainResult = {