fixup! ui-manchette: fix waypoint menu positioning

Author: SharglutDev

ui-manchette/src/components/Manchette.tsx

@@ -9,7 +9,7 @@ import type { StyledOperationalPointType, WaypointMenuData } from '../types';
 
 type ManchetteProps = {
   operationalPoints: StyledOperationalPointType[];
-  waypointMenuData: WaypointMenuData;
+  waypointMenuData?: WaypointMenuData;
   zoomYIn: () => void;
   zoomYOut: () => void;
   resetZoom: () => void;

ui-manchette/src/components/OperationalPoint.tsx

@@ -12,13 +12,15 @@ type OperationalPointProps = {
   isActive: boolean;
   waypointMenuItems?: WaypointMenuItem[];
   waypointMenuClassName?: string;
+  index: number;
 };
 
 const OperationalPoint = ({
   operationalPoint: { extensions, id, position, display, onClick },
   isActive,
   waypointMenuItems,
   waypointMenuClassName,
+  index,
 }: OperationalPointProps) => {
   const opRef = useRef<HTMLDivElement>(null);
 
@@ -32,7 +34,7 @@ const OperationalPoint = ({
       id={id}
       ref={opRef}
       onClick={() => {
-        if (onClick) onClick(`${id}-${position}`); // to handle waypoints with same id
+        if (onClick) onClick(index);
       }}
     >
       <div className="op-position justify-self-start text-end">{positionMmToKm(position)}</div>

ui-manchette/src/components/OperationalPointList.tsx

@@ -5,25 +5,26 @@ import type { WaypointMenuData, StyledOperationalPointType } from '../types';
 
 type OperationalPointListProps = {
   operationalPoints: StyledOperationalPointType[];
-  waypointMenuData: WaypointMenuData;
+  waypointMenuData?: WaypointMenuData;
 };
 
 const OperationalPointList = ({
   operationalPoints,
-  waypointMenuData: { activeOperationalPointId, waypointMenuItems, waypointMenuClassName },
+  waypointMenuData,
 }: OperationalPointListProps) => (
   <div className="operational-point-list ">
-    {operationalPoints.map((op) => (
+    {operationalPoints.map((op, index) => (
       <div
         key={op.id}
         className="operational-point-wrapper flex flex-col justify-start"
         style={op.styles}
       >
         <OperationalPoint
           operationalPoint={op}
-          isActive={activeOperationalPointId === `${op.id}-${op.position}`}
-          waypointMenuItems={waypointMenuItems}
-          waypointMenuClassName={waypointMenuClassName}
+          isActive={waypointMenuData?.activeWaypointIndex === index}
+          waypointMenuItems={waypointMenuData?.waypointMenuItems}
+          waypointMenuClassName={waypointMenuData?.waypointMenuClassName}
+          index={index}
         />
       </div>
     ))}

ui-manchette/src/components/WaypointMenu.tsx

@@ -15,9 +15,9 @@ type WaypointMenuProps = HTMLAttributes<unknown> & {
  */
 const WaypointMenu = ({ items, className }: WaypointMenuProps) => (
   <div className={className}>
-    {items.map(({ title, icon, onClick }) => (
+    {items.map(({ title, icon, onClick }, index) => (
       <button
-        key={title}
+        key={index}
         type="button"
         onClick={(e) => {
           onClick(e);

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

@@ -32,29 +32,29 @@ const meta: Meta<typeof Manchette> = {
 };
 
 const ManchetteWithWaypointMenu = () => {
-  const [activeOperationalPointId, setActiveOperationalPointId] = useState<string>();
+  const [activeWaypointIndex, setActiveWaypointPointIndex] = useState<number>();
 
   const menuItems: WaypointMenuItem[] = [
     {
       title: 'Action 1',
       icon: <EyeClosed />,
       onClick: (e: React.MouseEvent) => {
         e.stopPropagation();
-        setActiveOperationalPointId(undefined);
+        setActiveWaypointPointIndex(undefined);
       },
     },
     {
       title: 'Action 2',
       icon: <Telescope />,
       onClick: (e: React.MouseEvent) => {
         e.stopPropagation();
-        setActiveOperationalPointId(undefined);
+        setActiveWaypointPointIndex(undefined);
       },
     },
   ];
 
-  const handleWaypointClick = (id: string) => {
-    setActiveOperationalPointId(id);
+  const handleWaypointClick = (waypointIndex: number) => {
+    setActiveWaypointPointIndex(waypointIndex);
   };
 
   return (
@@ -68,7 +68,7 @@ const ManchetteWithWaypointMenu = () => {
       resetZoom={() => {}}
       toggleMode={() => {}}
       waypointMenuData={{
-        activeOperationalPointId,
+        activeWaypointIndex,
         waypointMenuItems: menuItems,
         waypointMenuClassName: 'menu',
       }}

ui-manchette/src/types.ts

@@ -51,11 +51,11 @@ export type OperationalPointType = ArrayElement<PathProperties['operational_poin
 export type StyledOperationalPointType = OperationalPointType & {
   styles?: CSSProperties;
   display?: boolean;
-  onClick?: (opId: string) => void;
+  onClick?: (opIndex: number) => void;
 };
 
 export type WaypointMenuData = {
-  activeOperationalPointId?: string;
+  activeWaypointIndex?: number;
   waypointMenuItems?: WaypointMenuItem[];
   waypointMenuClassName?: string;
 };