wip

Author: SharglutDev

ui-manchette-with-spacetimechart/src/assets/sampleData.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+
+export type MenuItem = {
+  title: string;
+  icon: React.ReactNode;
+  onClick: (e: React.MouseEvent) => void;
+};
+
+type MenuProps = {
+  items: MenuItem[];
+};
+
+/**
+ * Example of waypoint menu that could be passed to the manchette as props
+ */
+const Menu = ({ items }: MenuProps) => (
+  <div className="menu">
+    {items.map(({ title, icon, onClick }) => (
+      <button key={title} type="button" className="menu-item" onClick={onClick}>
+        <span className="icon">{icon}</span>
+        <span>{title}</span>
+      </button>
+    ))}
+  </div>
+);
+
+export default Menu;

ui-manchette-with-spacetimechart/src/stories/Menu.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable import/no-unresolved */
-import React, { useRef } from 'react';
+import React, { useRef, useState } from 'react';
 
+import { EyeClosed, Telescope } from '@osrd-project/ui-icons';
 import { Manchette } from '@osrd-project/ui-manchette';
 import type { ProjectPathTrainResult, Waypoint } from '@osrd-project/ui-manchette/dist/types';
 import { PathLayer, SpaceTimeChart } from '@osrd-project/ui-spacetimechart';
@@ -10,6 +11,8 @@ import '@osrd-project/ui-core/dist/theme.css';
 import '@osrd-project/ui-manchette/dist/theme.css';
 import '@osrd-project/ui-manchette-with-spacetimechart/dist/theme.css';
 
+import Menu, { type MenuItem } from './Menu';
+import useElementInView from './useElementInView';
 import { SAMPLE_WAYPOINTS, SAMPLE_PATHS_DATA } from '../assets/sampleData';
 import useManchettesWithSpaceTimeChart from '../hooks/useManchetteWithSpaceTimeChart';
 
@@ -18,6 +21,7 @@ type ManchetteWithSpaceTimeWrapperProps = {
   projectPathTrainResult: ProjectPathTrainResult[];
   selectedTrain: number;
 };
+
 const DEFAULT_HEIGHT = 561;
 
 const ManchetteWithSpaceTimeWrapper = ({
@@ -26,6 +30,45 @@ const ManchetteWithSpaceTimeWrapper = ({
   selectedTrain,
 }: ManchetteWithSpaceTimeWrapperProps) => {
   const manchetteWithSpaceTimeChartRef = useRef<HTMLDivElement>(null);
+
+  const [activeWaypointIndex, setActiveWaypointPointIndex] = useState<number>();
+  const [observerData, setObserverData] = useState<{
+    waypointRef: React.RefObject<HTMLDivElement>;
+    waypointsContainerRef: React.RefObject<HTMLDivElement>;
+  }>();
+
+  const isElementInView = useElementInView(
+    observerData?.waypointRef,
+    observerData?.waypointsContainerRef
+  );
+
+  const menuItems: MenuItem[] = [
+    {
+      title: 'Action 1',
+      icon: <EyeClosed />,
+      onClick: (e: React.MouseEvent) => {
+        e.stopPropagation();
+        setActiveWaypointPointIndex(undefined);
+      },
+    },
+    {
+      title: 'Action 2',
+      icon: <Telescope />,
+      onClick: (e: React.MouseEvent) => {
+        e.stopPropagation();
+        setActiveWaypointPointIndex(undefined);
+      },
+    },
+  ];
+
+  const handleWaypointClick = (
+    waypointIndex: number,
+    waypointRef: React.RefObject<HTMLDivElement>,
+    waypointsContainerRef: React.RefObject<HTMLDivElement>
+  ) => {
+    setActiveWaypointPointIndex(waypointIndex);
+    setObserverData({ waypointRef, waypointsContainerRef });
+  };
   const { manchetteProps, spaceTimeChartProps, handleScroll } = useManchettesWithSpaceTimeChart(
     waypoints,
     projectPathTrainResult,
@@ -45,7 +88,18 @@ const ManchetteWithSpaceTimeWrapper = ({
         style={{ height: `${DEFAULT_HEIGHT}px` }}
         onScroll={handleScroll}
       >
-        <Manchette {...manchetteProps} />
+        <Manchette
+          {...manchetteProps}
+          waypoints={manchetteProps.waypoints.map((op) => ({
+            ...op,
+            onClick: handleWaypointClick,
+          }))}
+          waypointMenuData={{
+            activeWaypointIndex,
+            menu: <Menu items={menuItems} />,
+            isWaypointInView: isElementInView,
+          }}
+        />
         <div
           className="space-time-chart-container w-full sticky"
           style={{ bottom: 0, left: 0, top: 2, height: `${DEFAULT_HEIGHT - 6}px` }}

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

@@ -0,0 +1,35 @@
+import { useState, useEffect, type RefObject } from 'react';
+
+const useElementInView = <T extends HTMLElement>(
+  ref?: RefObject<T>,
+  containerRef?: RefObject<HTMLElement>,
+  options: IntersectionObserverInit = { threshold: 1, rootMargin: '0px' }
+): boolean => {
+  const [isInView, setIsInView] = useState(false);
+
+  useEffect(() => {
+    const currentRef = ref?.current;
+    const root = containerRef?.current || null;
+
+    if (!currentRef) return;
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        console.log('entry', entry);
+        setIsInView(entry.isIntersecting);
+      },
+      {
+        ...options,
+        root,
+      }
+    );
+
+    observer.observe(currentRef);
+
+    return () => observer.disconnect();
+  }, [ref, containerRef, options]);
+
+  return isInView;
+};
+
+export default useElementInView;

ui-manchette-with-spacetimechart/src/stories/useElementInView.ts

@@ -10,16 +10,20 @@ type WaypointProps = {
   waypoint: InteractiveWaypoint;
   isActive: boolean;
   waypointMenu?: React.ReactNode;
+  waypointsContainerRef: React.RefObject<HTMLDivElement>;
+  isWaypointInView?: boolean;
   index: number;
 };
 
 const Waypoint = ({
   waypoint: { name, secondaryCode, id, position, display, onClick },
   isActive,
   waypointMenu,
+  waypointsContainerRef,
+  isWaypointInView,
   index,
 }: WaypointProps) => {
-  const opRef = useRef<HTMLDivElement>(null);
+  const waypointRef = useRef<HTMLDivElement>(null);
 
   if (!display) return null;
 
@@ -29,9 +33,9 @@ const Waypoint = ({
         'menu-active': isActive,
       })}
       id={id}
-      ref={opRef}
+      ref={waypointRef}
       onClick={() => {
-        if (onClick) onClick(index);
+        if (onClick) onClick(index, waypointRef, waypointsContainerRef);
       }}
     >
       <div className="waypoint-position justify-self-start text-end">
@@ -45,7 +49,7 @@ const Waypoint = ({
 
       <div className="waypoint-type"></div>
       <div className="waypoint-separator"></div>
-      {waypointMenu && isActive && waypointMenu}
+      {waypointMenu && isActive && isWaypointInView && waypointMenu}
     </div>
   );
 };

ui-manchette/src/components/Waypoint.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef } from 'react';
 
 import Waypoint from './Waypoint';
 import type { WaypointMenuData, InteractiveWaypoint } from '../types';
@@ -8,23 +8,29 @@ type WaypointListProps = {
   waypointMenuData?: WaypointMenuData;
 };
 
-const WaypointList = ({ waypoints, waypointMenuData }: WaypointListProps) => (
-  <div className="waypoint-list ">
-    {waypoints.map((waypoint, index) => (
-      <div
-        key={waypoint.id}
-        className="waypoint-wrapper flex flex-col justify-start"
-        style={waypoint.styles}
-      >
-        <Waypoint
-          waypoint={waypoint}
-          isActive={waypointMenuData?.activeWaypointIndex === index}
-          waypointMenu={waypointMenuData?.menu}
-          index={index}
-        />
-      </div>
-    ))}
-  </div>
-);
+const WaypointList = ({ waypoints, waypointMenuData }: WaypointListProps) => {
+  const waypointsContainerRef = useRef<HTMLDivElement>(null);
+
+  return (
+    <div ref={waypointsContainerRef} className="waypoint-list ">
+      {waypoints.map((waypoint, index) => (
+        <div
+          key={waypoint.id}
+          className="waypoint-wrapper flex flex-col justify-start"
+          style={waypoint.styles}
+        >
+          <Waypoint
+            waypoint={waypoint}
+            isActive={waypointMenuData?.activeWaypointIndex === index}
+            waypointMenu={waypointMenuData?.menu}
+            waypointsContainerRef={waypointsContainerRef}
+            isWaypointInView={waypointMenuData?.isWaypointInView}
+            index={index}
+          />
+        </div>
+      ))}
+    </div>
+  );
+};
 
 export default WaypointList;

ui-manchette/src/components/WaypointList.tsx

@@ -5,9 +5,10 @@ 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_WAYPOINTS } from './assets/sampleData';
+import { SAMPLE_LONG, SAMPLE_WAYPOINTS } from './assets/sampleData';
 import Menu, { type MenuItem } from './components/Menu';
 import Manchette from '../components/Manchette';
+import useElementInView from './components/useElementInView';
 
 const meta: Meta<typeof Manchette> = {
   component: Manchette,
@@ -30,7 +31,17 @@ const meta: Meta<typeof Manchette> = {
 
 const ManchetteWithWaypointMenu = () => {
   const [activeWaypointIndex, setActiveWaypointPointIndex] = useState<number>();
+  const [observerData, setObserverData] = useState<{
+    waypointRef: React.RefObject<HTMLDivElement>;
+    waypointsContainerRef: React.RefObject<HTMLDivElement>;
+  }>();
 
+  const isElementInView = useElementInView(
+    observerData?.waypointRef,
+    observerData?.waypointsContainerRef
+  );
+
+  console.log('isElementInView', isElementInView);
   const menuItems: MenuItem[] = [
     {
       title: 'Action 1',
@@ -50,13 +61,23 @@ const ManchetteWithWaypointMenu = () => {
     },
   ];
 
-  const handleWaypointClick = (waypointIndex: number) => {
+  const handleWaypointClick = (
+    waypointIndex: number,
+    waypointRef: React.RefObject<HTMLDivElement>,
+    waypointsContainerRef: React.RefObject<HTMLDivElement>
+  ) => {
     setActiveWaypointPointIndex(waypointIndex);
+    setObserverData({ waypointRef, waypointsContainerRef });
   };
 
+  const isLastWaypoint =
+    activeWaypointIndex !== undefined &&
+    SAMPLE_WAYPOINTS.length - activeWaypointIndex <= 3 &&
+    SAMPLE_WAYPOINTS.length * 32 >= 561;
+
   return (
     <Manchette
-      waypoints={SAMPLE_WAYPOINTS.map((waypoint) => ({
+      waypoints={SAMPLE_LONG.map((waypoint) => ({
         ...waypoint,
         display: true,
         onClick: handleWaypointClick,
@@ -67,7 +88,8 @@ const ManchetteWithWaypointMenu = () => {
       toggleMode={() => {}}
       waypointMenuData={{
         activeWaypointIndex,
-        menu: <Menu items={menuItems} />,
+        isWaypointInView: isElementInView,
+        menu: <Menu items={menuItems} menuOnTop={isLastWaypoint} />,
       }}
     />
   );