@geops/rvf-mobility-web-component 0.1.60 → 0.1.62

package/src/LinesNetworkPlanLayerHighlight/LinesNetworkPlanLayerHighlight.tsx

@@ -0,0 +1,88 @@
+import { MaplibreStyleLayer } from "mobility-toolbox-js/ol";
+import { memo } from "preact/compat";
+import { useEffect, useMemo } from "preact/hooks";
+
+import {
+  LNP_GEOPS_FILTER_HIGHLIGHT,
+  LNP_LINE_ID_PROP,
+} from "../utils/constants";
+import highlightLinesNetworkPlan from "../utils/highlightLinesNetworkPlan";
+import useMapContext from "../utils/hooks/useMapContext";
+
+import type { MaplibreStyleLayerOptions } from "mobility-toolbox-js/ol/layers/MaplibreStyleLayer";
+
+function LinesNetworkPlanLayerHighlight(props: MaplibreStyleLayerOptions) {
+  const {
+    baseLayer,
+    featuresInfos,
+    lines,
+    linesIds,
+    linesNetworkPlanLayer,
+    map,
+    setLinesIds,
+  } = useMapContext();
+
+  const layer = useMemo(() => {
+    if (!baseLayer) {
+      return null;
+    }
+    return new MaplibreStyleLayer({
+      layersFilter: ({ metadata }) => {
+        return metadata?.["geops.filter"]?.startsWith(
+          LNP_GEOPS_FILTER_HIGHLIGHT,
+        );
+      },
+      maplibreLayer: baseLayer,
+      ...(props || {}),
+    });
+  }, [baseLayer, props]);
+
+  useEffect(() => {
+    if (!map || !layer) {
+      return;
+    }
+
+    map.addLayer(layer);
+    return () => {
+      map.removeLayer(layer);
+    };
+  }, [map, layer]);
+
+  useEffect(() => {
+    if (!layer || !featuresInfos?.length || !linesNetworkPlanLayer) {
+      return;
+    }
+    const features =
+      featuresInfos.find((featuresInfo) => {
+        return featuresInfo.layer === linesNetworkPlanLayer;
+      })?.features || [];
+
+    const ids = [
+      ...new Set(
+        (features || []).map((f) => {
+          return f.get(LNP_LINE_ID_PROP) as string;
+        }),
+      ),
+    ];
+    setLinesIds(ids);
+  }, [featuresInfos, layer, linesNetworkPlanLayer, setLinesIds]);
+
+  useEffect(() => {
+    if (!layer || !baseLayer?.loaded) {
+      return;
+    }
+    if (linesIds?.length) {
+      highlightLinesNetworkPlan(linesIds, baseLayer);
+      layer.setVisible(true);
+    }
+    return () => {
+      layer?.setVisible(false);
+      // Reset the filter
+      highlightLinesNetworkPlan(undefined, baseLayer);
+    };
+  }, [baseLayer, baseLayer?.loaded, layer, lines, linesIds]);
+
+  return null;
+}
+
+export default memo(LinesNetworkPlanLayerHighlight);

package/src/LinesNetworkPlanLayerHighlight/index.tsx

@@ -0,0 +1 @@
+export { default } from "./LinesNetworkPlanLayerHighlight";

package/src/MapDispatchEvents/MapDispatchEvents.tsx

@@ -66,10 +66,12 @@ function MapDispatchEvents({
       : null;
 
     // When the ol feature is a cluster
-    if (json?.properties?.features?.length > 0) {
-      json.properties.features = json.properties.features.map((feature) => {
-        return geojson.writeFeatureObject(feature);
-      });
+    if (json?.properties?.clusterLeaves?.length > 0) {
+      json.properties.clusterLeaves = json.properties.clusterLeaves.map(
+        (feature) => {
+          return geojson.writeFeatureObject(feature);
+        },
+      );
     }
     dispatchEvent(node, "mwc:selectedfeature", json);
   }, [node, selectedFeature]);

package/src/MapLayout/MapLayout.tsx

@@ -78,11 +78,11 @@ function MapLayout({
         )}
       </Map>
 
-      <div className="pointer-events-none absolute top-2 bottom-2 left-2 z-10 flex flex-col gap-2 *:pointer-events-auto">
+      <div className="pointer-events-none absolute top-2 bottom-2 left-2 z-10 flex flex-col gap-2">
         {hasToolbar && (
           <div
             className={
-              "relative z-10 w-fit rounded-2xl bg-black/10 p-0 backdrop-blur-sm"
+              "pointer-events-none relative z-10 w-fit rounded-2xl bg-black/10 p-0 backdrop-blur-sm *:pointer-events-auto"
             }
           >
             <div

package/src/MapsetLayer/MapsetLayer.tsx

@@ -0,0 +1,116 @@
+import { MapsetLayer as MtbMapsetLayer } from "mobility-toolbox-js/ol";
+import { unByKey } from "ol/Observable";
+import { transformExtent } from "ol/proj";
+import { memo } from "preact/compat";
+import { useEffect, useMemo } from "preact/hooks";
+
+import { LAYER_NAME_MAPSET } from "../utils/constants";
+import useMapContext from "../utils/hooks/useMapContext";
+
+import type { MapsetLayerOptions } from "mobility-toolbox-js/ol";
+
+let moveEndTimeout: ReturnType<typeof setTimeout>;
+
+function MapsetLayer(props?: Partial<MapsetLayerOptions>) {
+  const {
+    apikey,
+    baseLayer,
+    map,
+    mapsetbbox,
+    mapsetplanid,
+    mapsettenants,
+    mapseturl,
+    setMapsetLayer,
+  } = useMapContext();
+
+  const layer = useMemo(() => {
+    if (!baseLayer || !map) {
+      return null;
+    }
+    return new MtbMapsetLayer({
+      apiKey: apikey,
+      bbox:
+        mapsetbbox?.split(",").map((coord) => {
+          return Number(coord.trim());
+        }) ||
+        transformExtent(
+          map.getView()?.calculateExtent(map.getSize()),
+          "EPSG:3857",
+          "EPSG:4326",
+        ),
+      mapseturl: mapseturl || undefined,
+      name: LAYER_NAME_MAPSET,
+      planId: mapsetplanid ?? undefined,
+      tenants: mapsettenants?.split(",").map((t) => {
+        return t.trim();
+      }),
+      zoom: map.getView().getZoom(),
+      ...(props || {}),
+    });
+  }, [
+    apikey,
+    baseLayer,
+    map,
+    mapsetbbox,
+    mapsettenants,
+    mapsetplanid,
+    mapseturl,
+    props,
+  ]);
+
+  useEffect(() => {
+    setMapsetLayer?.(layer);
+  }, [layer, setMapsetLayer, map]);
+
+  useEffect(() => {
+    if (!map || !layer) {
+      return;
+    }
+    map.addLayer(layer);
+
+    return () => {
+      map.removeLayer(layer);
+    };
+  }, [map, layer]);
+
+  useEffect(() => {
+    const view = map?.getView();
+    if (!view || !layer) {
+      return;
+    }
+    const handleMoveEnd = () => {
+      if (mapsetplanid || !layer.get("visible")) {
+        return;
+      }
+      clearTimeout(moveEndTimeout);
+      moveEndTimeout = setTimeout(() => {
+        const currentBbox = transformExtent(
+          view.calculateExtent(map.getSize()),
+          "EPSG:3857",
+          "EPSG:4326",
+        );
+        layer.bbox = currentBbox;
+        layer.zoom = view.getZoom();
+      }, 100);
+    };
+
+    const listeners = [
+      layer.on("change:visible", () => {
+        if (layer.get("visible")) {
+          handleMoveEnd();
+        }
+      }),
+      view.on("change:center", handleMoveEnd),
+      view.on("change:resolution", handleMoveEnd),
+    ];
+
+    return () => {
+      clearTimeout(moveEndTimeout);
+      unByKey(listeners);
+    };
+  }, [map, layer, mapsetplanid]);
+
+  return null;
+}
+
+export default memo(MapsetLayer);

package/src/MapsetLayer/index.tsx

@@ -0,0 +1 @@
+export { default } from "./MapsetLayer";

package/src/MobilityMap/MobilityMap.tsx

@@ -5,8 +5,10 @@ import BaseLayer from "../BaseLayer";
 import FeaturesInfosListener from "../FeaturesInfosListener";
 import LayoutState from "../LayoutState";
 import LinesNetworkPlanLayer from "../LinesNetworkPlanLayer";
+import LinesNetworkPlanLayerHighlight from "../LinesNetworkPlanLayerHighlight";
 import MapDispatchEvents from "../MapDispatchEvents";
 import MapLayout from "../MapLayout";
+import MapsetLayer from "../MapsetLayer";
 import NotificationsLayer from "../NotificationsLayer";
 import Permalink from "../Permalink";
 import RealtimeLayer from "../RealtimeLayer";
@@ -26,11 +28,12 @@ import tailwind from "../style.css";
 // @ts-expect-error bad type definition
 import style from "./index.css";
 
+import type { MapsetLayer as MtbMapsetLayer } from "mobility-toolbox-js/ol";
 import type {
   MaplibreLayer,
   MaplibreStyleLayer,
-  RealtimeLayer as MbtRealtimeLayer,
   MocoLayer,
+  RealtimeLayer as MtbRealtimeLayer,
 } from "mobility-toolbox-js/ol";
 import type {
   LayerGetFeatureInfoResponse,
@@ -58,6 +61,7 @@ function MobilityMap(props: MobilityMapProps) {
   const [hasGeolocation, setHasGeolocation] = useState<boolean>(false);
   const [hasLnp, setHasLnp] = useState<boolean>(false);
   const [hasDetails, setHasDetails] = useState<boolean>(false);
+  const [hasMapset, setHasMapset] = useState<boolean>(false);
   const [hasNotification, setHasNotification] = useState<boolean>(false);
   const [hasPermalink, setHasPermalink] = useState<boolean>(false);
   const [hasPrint, setHasPrint] = useState<boolean>(false);
@@ -75,13 +79,16 @@ function MobilityMap(props: MobilityMapProps) {
   const [stopSequence, setStopSequence] = useState<RealtimeStopSequence>();
   const [stationsLayer, setStationsLayer] = useState<MaplibreStyleLayer>();
   const [station, setStation] = useState<RealtimeStation>();
-  const [realtimeLayer, setRealtimeLayer] = useState<MbtRealtimeLayer>();
+  const [realtimeLayer, setRealtimeLayer] = useState<MtbRealtimeLayer>();
   const [notificationsLayer, setNotificationsLayer] = useState<MocoLayer>();
+  const [mapsetLayer, setMapsetLayer] = useState<MtbMapsetLayer>();
   const [linesNetworkPlanLayer, setLinesNetworkPlanLayer] =
     useState<MaplibreStyleLayer>();
   const [map, setMap] = useState<OlMap>();
   const [stationId, setStationId] = useState<RealtimeStationId>();
   const [trainId, setTrainId] = useState<RealtimeTrainId>();
+  const [linesIds, setLinesIds] = useState<string[]>();
+
   const [featuresInfos, setFeaturesInfos] = useState<
     LayerGetFeatureInfoResponse[]
   >([]);
@@ -96,7 +103,7 @@ function MobilityMap(props: MobilityMapProps) {
   const [previewNotifications, setPreviewNotifications] =
     useState<SituationType[]>();
 
-  const { lang, layers } = props;
+  const { lang, layers, lines } = props;
 
   // Apply initial visibility of layers
   useInitialLayersVisiblity(map, layers);
@@ -114,6 +121,7 @@ function MobilityMap(props: MobilityMapProps) {
       hasGeolocation,
       hasLayerTree,
       hasLnp,
+      hasMapset,
       hasNotification,
       hasPermalink,
       hasPrint,
@@ -130,8 +138,10 @@ function MobilityMap(props: MobilityMapProps) {
       isSearchOpen,
       isShareMenuOpen,
       isTracking,
+      linesIds,
       linesNetworkPlanLayer,
       map,
+      mapsetLayer,
       notificationsLayer,
       permalinkUrlSearchParams,
       previewNotifications,
@@ -145,6 +155,7 @@ function MobilityMap(props: MobilityMapProps) {
       setHasGeolocation,
       setHasLayerTree,
       setHasLnp,
+      setHasMapset,
       setHasNotification,
       setHasPermalink,
       setHasPrint,
@@ -161,8 +172,10 @@ function MobilityMap(props: MobilityMapProps) {
       setIsSearchOpen,
       setIsShareMenuOpen,
       setIsTracking,
+      setLinesIds,
       setLinesNetworkPlanLayer,
       setMap,
+      setMapsetLayer,
       setNotificationsLayer,
       setPermalinkUrlSearchParams,
       setPreviewNotifications,
@@ -186,16 +199,17 @@ function MobilityMap(props: MobilityMapProps) {
     featuresInfos,
     featuresInfosHovered,
     hasDetails,
-    hasStations,
     hasGeolocation,
     hasLayerTree,
     hasLnp,
+    hasMapset,
     hasNotification,
     hasPermalink,
     hasPrint,
     hasRealtime,
     hasSearch,
     hasShare,
+    hasStations,
     hasToolbar,
     isEmbed,
     isExportMenuOpen,
@@ -205,8 +219,10 @@ function MobilityMap(props: MobilityMapProps) {
     isSearchOpen,
     isShareMenuOpen,
     isTracking,
+    linesIds,
     linesNetworkPlanLayer,
     map,
+    mapsetLayer,
     notificationsLayer,
     permalinkUrlSearchParams,
     previewNotifications,
@@ -224,6 +240,10 @@ function MobilityMap(props: MobilityMapProps) {
     i18n.locale(lang);
   }, [lang]);
 
+  useEffect(() => {
+    setLinesIds(lines?.split(","));
+  }, [lines]);
+
   return (
     <I18nContext.Provider value={i18n}>
       {/* There is a bug in tailwindcss@4 , variables are not imported in the shadow dom
@@ -294,6 +314,8 @@ function MobilityMap(props: MobilityMapProps) {
         {hasRealtime && <RealtimeLayer />}
         {hasStations && <StationsLayer />}
         {hasLnp && <LinesNetworkPlanLayer />}
+        {hasLnp && <LinesNetworkPlanLayerHighlight />}
+        {hasMapset && <MapsetLayer />}
 
         {/* Layout  */}
         <div
@@ -321,7 +343,7 @@ function MobilityMapWithDefaultProps(props: MobilityMapProps) {
     permalinktemplate || defaultPermalinkTemplate,
   );
 
-  return <MobilityMap {...defaultProps} {...propsFromPermalink} {...props} />;
+  return <MobilityMap {...defaultProps} {...props} {...propsFromPermalink} />;
 }
 
 export default memo(MobilityMapWithDefaultProps);

package/src/MobilityMap/MobilityMapAttributes.test.ts

@@ -18,4 +18,42 @@ describe("MobilityMapAttributes", () => {
       });
     }
   });
+
+  describe("default values are set correctly", () => {
+    test("apiKey attribute is properly set", () => {
+      expect(attributes.apikey.defaultValue).toBe(
+        "5cc87b12d7c5370001c1d655820abcc37dfd4d968d7bab5b2a74a935",
+      );
+    });
+
+    test("baselayer attribute is properly set", () => {
+      expect(attributes.baselayer.defaultValue).toBe("de.rvf_moco");
+    });
+
+    test("lang attribute is properly set", () => {
+      expect(attributes.lang.defaultValue).toBe("de");
+    });
+
+    test("notificationtenant attribute is properly set", () => {
+      expect(attributes.notificationtenant.defaultValue).toBe("rvf");
+    });
+
+    test("maxextent attribute is properly set", () => {
+      expect(attributes.maxextent.defaultValue).toBe(
+        "834896.1809495519,6057089.852937808,940649.6972031617,6173660.451962929",
+      );
+    });
+
+    test("permalinktemplate attribute is properly set", () => {
+      expect(attributes.permalinktemplate.defaultValue).toBe(
+        "#map/{{x}}/{{y}}/{{z}}",
+      );
+    });
+
+    test("realtimebboxparameters attribute is properly set", () => {
+      expect(attributes.realtimebboxparameters.defaultValue).toBe(
+        "line_tags=RVF",
+      );
+    });
+  });
 });