@geops/rvf-mobility-web-component 0.1.46 → 0.1.47-beta.0

package/src/RvfSingleClickListener/RvfSingleClickListener.tsx

@@ -1,8 +1,5 @@
-import { GeoJSONSource } from "maplibre-gl";
-import { Feature, MapBrowserEvent } from "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";
@@ -11,12 +8,16 @@ 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 +31,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 +63,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,15 +74,16 @@ function SingleClickListener() {
           ? "pointer"
           : "default";
     },
-    [realtimeLayer, stationsLayer, tenant],
+    [queryablelayers, realtimeLayer, stationsLayer, tenant],
   );
 
   const onSingleClick = useCallback(
-    async (evt: MapBrowserEvent<PointerEvent>) => {
-      if (!baseLayer.mapLibreMap) {
+    (evt: MapBrowserEvent<PointerEvent>) => {
+      if (!baseLayer?.mapLibreMap) {
         return;
       }
       const [realtimeFeature] = evt.map.getFeaturesAtPixel(evt.pixel, {
+        hitTolerance: 5,
         layerFilter: (l) => {
           return l === realtimeLayer;
         },
@@ -114,22 +115,26 @@ function SingleClickListener() {
 
       // Send all the features under the cursor
       const features = evt.map.getFeaturesAtPixel(evt.pixel, {
+        hitTolerance: 5,
         layerFilter: (l) => {
-          return l.get("isQueryable");
+          console.log(queryablelayers);
+          return queryablelayers
+            ? queryablelayers.split(",").includes(l.get("name"))
+            : l.get("isQueryable");
         },
       }) as Feature[];
 
       // Append more infos about the features
-      const addMoreData = async (features) => {
-        for (const feature of features) {
+      const addMoreData = async (featuress) => {
+        for (const feature of featuress) {
           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)) || [];
+              (await baseLayer.mapLibreMap
+                .getSource<GeoJSONSource>(sourceId)
+                ?.getClusterLeaves(clusterId, 1000, 0)) || [];
 
             feature.set(
               "features",
@@ -151,23 +156,32 @@ function SingleClickListener() {
             );
           }
         }
-        evt.map.getTargetElement().dispatchEvent(
-          new MobilityEvent("singleclick", {
-            ...evt,
-            features: geojson.writeFeaturesObject(features),
-            lonlat: toLonLat(evt.coordinate),
-          }),
-        );
+        // evt.map.getTargetElement().dispatchEvent(
+        //   new MobilityEvent("singleclick", {
+        //     ...evt,
+        //     features: geojson.writeFeaturesObject(features),
+        //     lonlat: toLonLat(evt.coordinate),
+        //   }),
+        // );
 
         if (newStationId || newTrainId || !features.length) {
           setSelectedFeature(null);
           setSelectedFeatures([]);
         } else {
           setSelectedFeatures(features);
-          setSelectedFeature(features[0]);
+
+          // We prioritize some layers like the notification one over the others
+          const notificationFeature = features.find((feat) => {
+            return feat.get("severity");
+          });
+          if (notificationFeature) {
+            setSelectedFeature(notificationFeature);
+          } else {
+            setSelectedFeature(features[0]);
+          }
         }
       };
-      addMoreData(features);
+      void addMoreData(features);
     },
     [
       baseLayer?.mapLibreMap,
@@ -178,6 +192,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]);