@geops/rvf-mobility-web-component 0.1.46 → 0.1.47

package/src/RvfSingleClickListener/RvfSingleClickListener.tsx

@@ -1,22 +1,28 @@
-import { GeoJSONSource } from "maplibre-gl";
-import { Feature, MapBrowserEvent } from "ol";
+import { getFeatureInfoAtCoordinate } from "mobility-toolbox-js/ol";
 import { GeoJSON } from "ol/format";
 import { unByKey } from "ol/Observable";
-import { toLonLat } from "ol/proj";
 import { useCallback, useEffect } from "preact/hooks";
 
-import { PROVIDER_LOGOS_BY_FEED_ID } from "../utils/constants";
+import {
+  LAYER_NAME_REALTIME,
+  LAYER_NAME_STATIONS,
+  PROVIDER_LOGOS_BY_FEED_ID,
+} from "../utils/constants";
 import useMapContext from "../utils/hooks/useMapContext";
 import useRvfContext from "../utils/hooks/useRvfContext";
 import MobilityEvent from "../utils/MobilityEvent";
 import { fetchSharingStation } from "../utils/sharingGraphqlUtils";
 
+import type { GeoJSONSource } from "maplibre-gl";
+import type { Feature, MapBrowserEvent } from "ol";
+
 const geojson = new GeoJSON();
 
-function SingleClickListener() {
+function SingleClickListener({ eventNode }: { eventNode: HTMLElement }) {
   const {
     baseLayer,
     map,
+    queryablelayers,
     realtimeLayer,
     setStationId,
     setTrainId,
@@ -30,22 +36,19 @@ function SingleClickListener() {
 
   // Send the selctedFEature to the parent window
   useEffect(() => {
-    if (!map) {
-      return;
-    }
-
-    map.getTargetElement().dispatchEvent(
-      new MobilityEvent("selectedfeature", {
+    eventNode?.dispatchEvent(
+      new MobilityEvent("mwc:selectedfeature", {
         feature: selectedFeature
           ? geojson.writeFeatureObject(selectedFeature)
           : null,
       }),
     );
-  }, [map, selectedFeature]);
+  }, [eventNode, selectedFeature]);
 
   const onPointerMove = useCallback(
-    async (evt: MapBrowserEvent<PointerEvent>) => {
+    (evt: MapBrowserEvent<PointerEvent>) => {
       const [realtimeFeature] = evt.map.getFeaturesAtPixel(evt.pixel, {
+        hitTolerance: 5,
         layerFilter: (l) => {
           return l === realtimeLayer;
         },
@@ -65,7 +68,9 @@ function SingleClickListener() {
       // Send all the features under the cursor
       const features = evt.map.getFeaturesAtPixel(evt.pixel, {
         layerFilter: (l) => {
-          return l.get("isQueryable");
+          return queryablelayers
+            ? queryablelayers.split(",").includes(l.get("name"))
+            : l.get("isQueryable");
         },
       }) as Feature[];
 
@@ -74,19 +79,21 @@ function SingleClickListener() {
           ? "pointer"
           : "default";
     },
-    [realtimeLayer, stationsLayer, tenant],
+    [queryablelayers, realtimeLayer, stationsLayer, tenant],
   );
 
   const onSingleClick = useCallback(
     async (evt: MapBrowserEvent<PointerEvent>) => {
-      if (!baseLayer.mapLibreMap) {
+      if (!baseLayer?.mapLibreMap) {
         return;
       }
       const [realtimeFeature] = evt.map.getFeaturesAtPixel(evt.pixel, {
+        hitTolerance: 5,
         layerFilter: (l) => {
           return l === realtimeLayer;
         },
-      });
+      }) as Feature[];
+      realtimeFeature?.set("layerName", LAYER_NAME_REALTIME);
 
       const stationsFeatures = evt.map.getFeaturesAtPixel(evt.pixel, {
         layerFilter: (l) => {
@@ -95,7 +102,8 @@ function SingleClickListener() {
       });
       const [stationFeature] = stationsFeatures.filter((feat) => {
         return feat.get("tralis_network")?.includes(tenant);
-      });
+      }) as Feature[];
+      stationFeature?.set("layerName", LAYER_NAME_STATIONS);
 
       const newStationId = stationFeature?.get("uid");
 
@@ -113,61 +121,87 @@ function SingleClickListener() {
       }
 
       // Send all the features under the cursor
-      const features = evt.map.getFeaturesAtPixel(evt.pixel, {
-        layerFilter: (l) => {
-          return l.get("isQueryable");
-        },
-      }) as Feature[];
+      // const features = evt.map.getFeaturesAtPixel(evt.pixel, {
+      //   hitTolerance: 5,
+      //   layerFilter: (l) => {
+      //     console.log(queryablelayers);
+      //     return queryablelayers
+      //       ? queryablelayers.split(",").includes(l.get("name"))
+      //       : l.get("isQueryable");
+      //   },
+      // }) as Feature[];
+
+      const queryableLayers = evt.map.getAllLayers().filter((l) => {
+        return queryablelayers
+          ? queryablelayers.split(",").includes(l.get("name"))
+          : l.get("isQueryable");
+      });
+      const featuresInfos = await getFeatureInfoAtCoordinate(
+        evt.coordinate,
+        queryableLayers,
+        5,
+        true,
+      );
+
+      // Set the layerName as property of the feature
+      featuresInfos.forEach((f) => {
+        f.features.forEach((feat) => {
+          feat.set("layerName", f.layer.get("name"));
+        });
+      });
+
+      const features = featuresInfos.flatMap((f) => {
+        return f.features;
+      });
 
       // Append more infos about the features
-      const addMoreData = async (features) => {
-        for (const feature of features) {
-          const clusterId = feature.get("cluster_id");
-          if (clusterId) {
-            const vtFeat = feature.get("vectorTileFeature");
-            const sourceId = vtFeat.layer.source;
-            const leaves =
-              (await (
-                baseLayer.mapLibreMap.getSource(sourceId) as GeoJSONSource
-              )?.getClusterLeaves(clusterId, 1000, 0)) || [];
-
-            feature.set(
-              "features",
-              leaves.map((l) => {
-                return geojson.readFeature(l);
-              }),
-            );
-          }
-
-          // Sharing station
-          const sharingStationId = selectedFeature?.get("station_id");
-          if (sharingStationId) {
-            const sharingStationInfo =
-              await fetchSharingStation(sharingStationId);
-            selectedFeature.setProperties(sharingStationInfo);
-            selectedFeature.set(
-              "provider_logo",
-              PROVIDER_LOGOS_BY_FEED_ID[selectedFeature?.get("feed_id")],
-            );
-          }
+      for (const feature of features) {
+        const clusterId = feature.get("cluster_id");
+        if (clusterId) {
+          const vtFeat = feature.get("vectorTileFeature");
+          const sourceId = vtFeat.layer.source;
+          const leaves =
+            (await baseLayer.mapLibreMap
+              .getSource<GeoJSONSource>(sourceId)
+              ?.getClusterLeaves(clusterId, 1000, 0)) || [];
+
+          feature.set(
+            "features",
+            leaves.map((l) => {
+              return geojson.readFeature(l);
+            }),
+          );
+        }
+
+        // Sharing station
+        const sharingStationId = selectedFeature?.get("station_id");
+        if (sharingStationId) {
+          const sharingStationInfo =
+            await fetchSharingStation(sharingStationId);
+          selectedFeature.setProperties(sharingStationInfo);
+          selectedFeature.set(
+            "provider_logo",
+            PROVIDER_LOGOS_BY_FEED_ID[selectedFeature?.get("feed_id")],
+          );
         }
-        evt.map.getTargetElement().dispatchEvent(
-          new MobilityEvent("singleclick", {
-            ...evt,
-            features: geojson.writeFeaturesObject(features),
-            lonlat: toLonLat(evt.coordinate),
-          }),
-        );
-
-        if (newStationId || newTrainId || !features.length) {
-          setSelectedFeature(null);
-          setSelectedFeatures([]);
+      }
+
+      if (newStationId || newTrainId || !features.length) {
+        setSelectedFeature(null);
+        setSelectedFeatures([]);
+      } else {
+        setSelectedFeatures(features);
+
+        // We prioritize some layers like the notification one over the others
+        const notificationFeature = features.find((feat) => {
+          return feat.get("situation");
+        });
+        if (notificationFeature) {
+          setSelectedFeature(notificationFeature);
         } else {
-          setSelectedFeatures(features);
           setSelectedFeature(features[0]);
         }
-      };
-      addMoreData(features);
+      }
     },
     [
       baseLayer?.mapLibreMap,
@@ -178,6 +212,7 @@ function SingleClickListener() {
       tenant,
       setStationId,
       setTrainId,
+      queryablelayers,
       selectedFeature,
       setSelectedFeature,
       setSelectedFeatures,

package/src/RvfTarifZonenLayer/RvfTarifZonenLayer.tsx

@@ -1,5 +1,4 @@
 import { MaplibreStyleLayer } from "mobility-toolbox-js/ol";
-import { MaplibreStyleLayerOptions } from "mobility-toolbox-js/ol/layers/MaplibreStyleLayer";
 import { memo } from "preact/compat";
 import { useEffect, useMemo } from "preact/hooks";
 
@@ -7,6 +6,8 @@ import { RVF_LAYERS_NAMES } from "../utils/constants";
 import useMapContext from "../utils/hooks/useMapContext";
 import useRvfContext from "../utils/hooks/useRvfContext";
 
+import type { MaplibreStyleLayerOptions } from "mobility-toolbox-js/ol/layers/MaplibreStyleLayer";
+
 function RvfTarifZonenLayer(props: MaplibreStyleLayerOptions) {
   const { baseLayer, map } = useMapContext();
   const { setTarifZonenLayer } = useRvfContext();

package/src/RvfTopics/RvfTopics.tsx

@@ -1,8 +1,5 @@
 import { getUid } from "ol";
-import { Group } from "ol/layer";
-import BaseLayer from "ol/layer/Base";
 import { unByKey } from "ol/Observable";
-import { JSX, PreactDOMAttributes } from "preact";
 import { memo, useEffect, useMemo, useState } from "preact/compat";
 
 import RvfLayerTree from "../RvfLayerTree";
@@ -10,6 +7,10 @@ import { SelectionType } from "../RvfLayerTree/TreeItem/TreeItem";
 import getLayersAsFlatArray from "../utils/getLayersAsFlatArray";
 import useMapContext from "../utils/hooks/useMapContext";
 
+import type { Group } from "ol/layer";
+import type BaseLayer from "ol/layer/Base";
+import type { JSX, PreactDOMAttributes } from "preact";
+
 export interface RvfLayerTreeConfig {
   childItems: RvfLayerTreeConfig[];
   id: string;
@@ -62,8 +63,8 @@ function RvfTopics(props: RvfTopicsProps) {
   // Force update of config when a layers`s visibility changes progammatically
   useEffect(() => {
     const keys = [];
-    const layers = getLayersAsFlatArray(map.getLayers().getArray());
-    layers.forEach((layer) => {
+    const layerss = getLayersAsFlatArray(map.getLayers().getArray());
+    layerss.forEach((layer) => {
       const key = layer.on("change:visible", () => {
         setRevision((prev) => {
           return prev + 1;

package/src/RvfZoomButtons/RvfZoomButtons.tsx

@@ -4,7 +4,7 @@ import { useCallback, useEffect, useState } from "preact/hooks";
 
 import Minus from "../icons/Minus";
 import Plus from "../icons/Plus";
-import RvfIconButton from "../RvfIconButton";
+import IconButton from "../ui/IconButton";
 import useMapContext from "../utils/hooks/useMapContext";
 
 function RvfZoomButtons() {
@@ -56,12 +56,12 @@ function RvfZoomButtons() {
 
   return (
     <>
-      <RvfIconButton
+      <IconButton
         disabled={isZoomInDisabled}
         Icon={Plus}
         onClick={handleZoomIn}
       />
-      <RvfIconButton
+      <IconButton
         disabled={isZoomOutDisabled}
         Icon={Minus}
         onClick={handleZoomOut}

package/src/ScaleLine/ScaleLine.tsx

@@ -1,13 +1,14 @@
-import ScaleLineControl, {
-  Options as ScaleLineOptions,
-} from "ol/control/ScaleLine";
-import { JSX, PreactDOMAttributes } from "preact";
+import ScaleLineControl from "ol/control/ScaleLine";
 import { useEffect, useMemo, useState } from "preact/hooks";
 
 import useMapContext from "../utils/hooks/useMapContext";
+
 // @ts-expect-error bad type definition
 import style from "./index.css";
 
+import type { Options as ScaleLineOptions } from "ol/control/ScaleLine";
+import type { JSX, PreactDOMAttributes } from "preact";
+
 type ScaleLineProps = {
   options?: ScaleLineOptions;
 } & JSX.HTMLAttributes<HTMLDivElement> &

package/src/ScrollableHandler/ScrollableHandler.tsx

@@ -1,6 +1,7 @@
-import { JSX, PreactDOMAttributes } from "preact";
 import { useEffect, useState } from "preact/hooks";
 
+import type { JSX, PreactDOMAttributes } from "preact";
+
 export type ScrollableHandlerProps = JSX.HTMLAttributes<HTMLDivElement> &
   PreactDOMAttributes;
 

package/src/ScrollableHandler/index.tsx

@@ -1 +1 @@
-export { default } from "./ScrollableHandler";
+export { default, ScrollableHandlerProps } from "./ScrollableHandler";

package/src/SingleClickListener/SingleClickListener.tsx

@@ -1,13 +1,17 @@
-import { Feature, MapBrowserEvent } from "ol";
 import { unByKey } from "ol/Observable";
 import { useCallback, useEffect } from "preact/hooks";
 
 import useMapContext from "../utils/hooks/useMapContext";
 
+import type { Feature, MapBrowserEvent } from "ol";
+
 function SingleClickListener() {
   const {
     map,
+    // queryablelayers,
     realtimeLayer,
+    setSelectedFeature,
+    setSelectedFeatures,
     setStationId,
     setTrainId,
     stationId,
@@ -17,8 +21,9 @@ function SingleClickListener() {
   } = useMapContext();
 
   const onPointerMove = useCallback(
-    async (evt: MapBrowserEvent<PointerEvent>) => {
+    (evt: MapBrowserEvent<PointerEvent>) => {
       const [realtimeFeature] = evt.map.getFeaturesAtPixel(evt.pixel, {
+        hitTolerance: 5,
         layerFilter: (l) => {
           return l === realtimeLayer;
         },
@@ -35,15 +40,35 @@ function SingleClickListener() {
         return feat.get("tralis_network")?.includes(tenant);
       });
 
+      // Send all the features under the cursor
+      const features = evt.map.getFeaturesAtPixel(evt.pixel, {
+        layerFilter: (l) => {
+          return l.get("isQueryable");
+        },
+      }) as Feature[];
+
       evt.map.getTargetElement().style.cursor =
-        realtimeFeature || stationFeature ? "pointer" : "default";
+        realtimeFeature || stationFeature || features?.length
+          ? "pointer"
+          : "default";
     },
     [realtimeLayer, stationsLayer, tenant],
   );
 
   const onSingleClick = useCallback(
-    async (evt: MapBrowserEvent<PointerEvent>) => {
+    (evt: MapBrowserEvent<PointerEvent>) => {
+      // const qeryableLayers = queryablelayers?.split(",");
+      // const featuress = evt.map.getFeaturesAtPixel(evt.pixel, {
+      //   layerFilter: (l) => {
+      //     return qeryableLayers
+      //       ? queryablelayers.includes(l.get("name"))
+      //       : true;
+      //   },
+      // });
+      // console.log("featursss", featuress);
+
       const [realtimeFeature] = evt.map.getFeaturesAtPixel(evt.pixel, {
+        hitTolerance: 5,
         layerFilter: (l) => {
           return l === realtimeLayer;
         },
@@ -72,8 +97,24 @@ function SingleClickListener() {
         setTrainId(null);
         setStationId(null);
       }
+
+      // Send all the features under the cursor
+      const features = evt.map.getFeaturesAtPixel(evt.pixel, {
+        layerFilter: (l) => {
+          return l.get("isQueryable");
+        },
+      }) as Feature[];
+
+      if (newStationId || newTrainId || !features.length) {
+        setSelectedFeature(null);
+        setSelectedFeatures([]);
+      } else {
+        setSelectedFeatures(features);
+        setSelectedFeature(features[0]);
+      }
     },
     [
+      // queryablelayers,
       stationId,
       trainId,
       realtimeLayer,
@@ -81,6 +122,8 @@ function SingleClickListener() {
       tenant,
       setStationId,
       setTrainId,
+      setSelectedFeature,
+      setSelectedFeatures,
     ],
   );
 

package/src/Station/Station.tsx

@@ -1,7 +1,4 @@
-import type { JSX, PreactDOMAttributes } from "preact";
-
 import { debounceDeparturesMessages } from "mobility-toolbox-js/ol";
-import { RealtimeDeparture } from "mobility-toolbox-js/types";
 import { memo } from "preact/compat";
 import { useEffect, useRef, useState } from "preact/hooks";
 
@@ -9,6 +6,9 @@ import Departure from "../Departure";
 import StationHeader from "../StationHeader";
 import useMapContext from "../utils/hooks/useMapContext";
 
+import type { RealtimeDeparture } from "mobility-toolbox-js/types";
+import type { JSX, PreactDOMAttributes } from "preact";
+
 export type StationProps = JSX.HTMLAttributes<HTMLDivElement> &
   PreactDOMAttributes;
 
@@ -24,8 +24,8 @@ function Station(props: StationProps) {
     }
 
     const onMessage = debounceDeparturesMessages(
-      (departures: RealtimeDeparture[]) => {
-        setDepartures(departures);
+      (newDepartures: RealtimeDeparture[]) => {
+        setDepartures(newDepartures);
         return null;
       },
       false,

package/src/StationName/StationName.tsx

@@ -1,8 +1,8 @@
-import type { JSX, PreactDOMAttributes } from "preact";
-
-import { RealtimeStation } from "mobility-toolbox-js/types";
 import { memo } from "preact/compat";
 
+import type { RealtimeStation } from "mobility-toolbox-js/types";
+import type { JSX, PreactDOMAttributes } from "preact";
+
 export type StationNameProps = {
   station: RealtimeStation;
 } & JSX.HTMLAttributes<HTMLDivElement> &

package/src/StationServices/StationServices.tsx

@@ -1,6 +1,3 @@
-import type { JSX, PreactDOMAttributes } from "preact";
-
-import { RealtimeStation } from "mobility-toolbox-js/types";
 import { memo } from "preact/compat";
 
 import Airport from "../icons/Airport";
@@ -12,6 +9,9 @@ import Police from "../icons/Police";
 import WaitingAreas from "../icons/WaitingAreas";
 import WheelChair from "../icons/WheelChair";
 
+import type { RealtimeStation } from "mobility-toolbox-js/types";
+import type { JSX, PreactDOMAttributes } from "preact";
+
 export type StationServicesProps = {
   accessibility?: boolean;
   airport?: boolean;

package/src/StationsLayer/StationsLayer.tsx

@@ -1,12 +1,13 @@
 import { MaplibreStyleLayer } from "mobility-toolbox-js/ol";
-import { MaplibreStyleLayerOptions } from "mobility-toolbox-js/ol/layers/MaplibreStyleLayer";
 import { memo } from "preact/compat";
 import { useEffect, useMemo } from "preact/hooks";
 
-import { RVF_LAYERS_NAMES } from "../utils/constants";
+import { LAYER_NAME_STATIONS } from "../utils/constants";
 import useMapContext from "../utils/hooks/useMapContext";
 
-function StationsLayer(props: MaplibreStyleLayerOptions) {
+import type { MaplibreStyleLayerOptions } from "mobility-toolbox-js/ol";
+
+function StationsLayer(props: Partial<MaplibreStyleLayerOptions>) {
   const { baseLayer, map, setStationsLayer } = useMapContext();
 
   const layer = useMemo(() => {
@@ -18,7 +19,7 @@ function StationsLayer(props: MaplibreStyleLayerOptions) {
         return metadata?.["general.filter"] === "stations";
       },
       maplibreLayer: baseLayer,
-      name: RVF_LAYERS_NAMES.haltestellen,
+      name: LAYER_NAME_STATIONS,
       ...(props || {}),
     });
   }, [baseLayer, props]);