@geops/rvf-mobility-web-component 0.1.10 → 0.1.11

package/src/RvfMobilityMap/index.css

@@ -1,13 +0,0 @@
-::-webkit-scrollbar {
-  width: 3px;
-  height: 3px;
-}
-
-::-webkit-scrollbar-thumb {
-  background: lightgray;
-  z-index: 5;
-}
-
-::-webkit-scrollbar-track {
-  background: transparent;
-}

package/src/RvfModal/RvfModal.tsx

@@ -0,0 +1,52 @@
+import { JSX, PreactDOMAttributes } from "preact";
+import { memo } from "preact/compat";
+import { useEffect, useState } from "preact/hooks";
+
+export type ModalProps = {
+  onClose: () => void;
+} & JSX.HTMLAttributes<HTMLDialogElement> &
+  PreactDOMAttributes;
+
+function RvfModal({ children, onClose, ...props }: ModalProps) {
+  const [node, setNode] = useState<HTMLDialogElement>();
+  let hasChildren = !!children;
+  if (Array.isArray(children)) {
+    hasChildren =
+      children?.length &&
+      (children || []).find((c) => {
+        return !!c;
+      });
+  }
+
+  useEffect(() => {
+    node?.addEventListener("close", onClose);
+    return () => {
+      node?.removeEventListener("close", onClose);
+    };
+  }, [node, onClose]);
+
+  if (!hasChildren) {
+    return null;
+  }
+
+  return (
+    <dialog
+      className={
+        "absolute inset-0 z-50 flex size-full items-center justify-center bg-transparent"
+      }
+      ref={(n) => {
+        setNode(n);
+        n?.focus();
+      }}
+      {...props}
+    >
+      <button
+        className="absolute inset-0 z-0 size-full bg-black/60"
+        onClick={onClose}
+      ></button>
+      <div className="z-10 h-3/4 w-1/2 bg-white">{children}</div>
+    </dialog>
+  );
+}
+
+export default memo(RvfModal);

package/src/RvfModal/index.tsx

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

package/src/RvfPoisLayer/RvfPoisLayer.tsx

@@ -0,0 +1,39 @@
+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 useMapContext from "../utils/hooks/useMapContext";
+
+function RvfPoisLayer(props: MaplibreStyleLayerOptions) {
+  const { baseLayer, map } = useMapContext();
+
+  const layer = useMemo(() => {
+    if (!baseLayer) {
+      return null;
+    }
+    return new MaplibreStyleLayer({
+      layersFilter: ({ metadata }) => {
+        return metadata?.["mapset.filter"] === "mapset_poi";
+      },
+      maplibreLayer: baseLayer,
+      visible: false,
+      ...(props || {}),
+    });
+  }, [baseLayer, props]);
+
+  useEffect(() => {
+    if (!map || !layer) {
+      return;
+    }
+
+    map.addLayer(layer);
+    return () => {
+      map.removeLayer(layer);
+    };
+  }, [map, layer]);
+
+  return null; // <RegisterForSelectFeaturesOnClick />;
+}
+
+export default memo(RvfPoisLayer);

package/src/RvfPoisLayer/index.tsx

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

package/src/RvfSharedMobilityLayerGroup/RvfSharedMobilityLayerGroup.tsx

@@ -0,0 +1,88 @@
+import type { Options } from "ol/layer/Group";
+
+import { Group, Vector } from "ol/layer";
+import { memo } from "preact/compat";
+import { useEffect, useMemo } from "preact/hooks";
+
+import createMobiDataBwWfsLayer from "../utils/createMobiDataBwWfsLayer";
+import useMapContext from "../utils/hooks/useMapContext";
+
+function RvfSharedMobilityLayerGroup(props: Options & Record<string, unknown>) {
+  const { map } = useMapContext();
+
+  const group = useMemo(() => {
+    const sharingStationsBicycle = createMobiDataBwWfsLayer(
+      "sharing_stations_bicycle",
+      "red",
+    );
+    sharingStationsBicycle.set("title", "Stations Bicycle");
+
+    const sharingStationsCar = createMobiDataBwWfsLayer(
+      "sharing_stations_car",
+      "blue",
+    );
+    sharingStationsCar.set("title", "Stations Car");
+
+    const sharingStationsCargoBicycle = createMobiDataBwWfsLayer(
+      "sharing_stations_cargo_bicycle",
+      "green",
+    );
+    sharingStationsCargoBicycle.set("title", "Stations Cargo Bicycle");
+
+    const sharingStationsScooterStanding = createMobiDataBwWfsLayer(
+      "sharing_stations_scooters_standing",
+      "purple",
+    );
+    sharingStationsScooterStanding.set("title", "Stations Scooter");
+
+    const sharingVehicles = createMobiDataBwWfsLayer(
+      "sharing_vehicles",
+      "orange",
+    );
+    sharingVehicles.set("title", "Free Floating");
+    console.log("ici");
+    return new Group({
+      layers: [
+        sharingStationsBicycle,
+        sharingStationsCar,
+        sharingStationsCargoBicycle,
+        sharingStationsScooterStanding,
+        sharingVehicles,
+      ],
+      ...props,
+    });
+  }, [props]);
+
+  // Reload features every minute
+  useEffect(() => {
+    const interval = window.setInterval(() => {
+      group.getLayers().forEach((layer: Vector) => {
+        // @ts-expect-error - private property
+        layer.getSource().loadedExtentsRtree_.clear();
+        layer.getSource().clear(true);
+        layer.getSource().changed();
+      });
+    }, 60000);
+    return () => {
+      window.clearInterval(interval);
+    };
+  }, [group]);
+
+  useEffect(() => {
+    if (!map || !group) {
+      return;
+    }
+    map.on("moveend", () => {
+      console.log("ZOOM", map.getView().getZoom());
+    });
+
+    map.addLayer(group);
+
+    return () => {
+      map.removeLayer(group);
+    };
+  });
+
+  return null;
+}
+export default memo(RvfSharedMobilityLayerGroup);

package/src/RvfSharedMobilityLayerGroup/index.tsx

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

package/src/RvfSingleClickListener/RvfSingleClickListener.tsx

@@ -0,0 +1,137 @@
+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 useMapContext from "../utils/hooks/useMapContext";
+import useRvfContext from "../utils/hooks/useRvfContext";
+import MobilityEvent from "../utils/MobilityEvent";
+
+const geojson = new GeoJSON();
+
+function SingleClickListener() {
+  const {
+    map,
+    realtimeLayer,
+    setStationId,
+    setTrainId,
+    stationId,
+    stationsLayer,
+    tenant,
+    trainId,
+  } = useMapContext();
+  const { setSelectedFeature, setSelectedFeatures } = useRvfContext();
+
+  const onPointerMove = useCallback(
+    async (evt: MapBrowserEvent<PointerEvent>) => {
+      const [realtimeFeature] = evt.map.getFeaturesAtPixel(evt.pixel, {
+        layerFilter: (l) => {
+          return l === realtimeLayer;
+        },
+      });
+      realtimeLayer?.highlight(realtimeFeature as Feature);
+
+      const stationsFeatures = evt.map.getFeaturesAtPixel(evt.pixel, {
+        layerFilter: (l) => {
+          return l === stationsLayer;
+        },
+      });
+
+      const [stationFeature] = stationsFeatures.filter((feat) => {
+        return feat.get("tralis_network")?.includes(tenant);
+      });
+
+      evt.map.getTargetElement().style.cursor =
+        realtimeFeature || stationFeature ? "pointer" : "default";
+    },
+    [realtimeLayer, stationsLayer, tenant],
+  );
+
+  const onSingleClick = useCallback(
+    async (evt: MapBrowserEvent<PointerEvent>) => {
+      const [realtimeFeature] = evt.map.getFeaturesAtPixel(evt.pixel, {
+        layerFilter: (l) => {
+          return l === realtimeLayer;
+        },
+      });
+
+      const stationsFeatures = evt.map.getFeaturesAtPixel(evt.pixel, {
+        layerFilter: (l) => {
+          return l === stationsLayer;
+        },
+      });
+      const [stationFeature] = stationsFeatures.filter((feat) => {
+        return feat.get("tralis_network")?.includes(tenant);
+      });
+
+      const newStationId = stationFeature?.get("uid");
+
+      const newTrainId = realtimeFeature?.get("train_id");
+
+      if (newStationId && stationId !== newStationId) {
+        setStationId(newStationId);
+        setTrainId(null);
+      } else if (newTrainId && newTrainId !== trainId) {
+        setTrainId(realtimeFeature.get("train_id"));
+        setStationId(null);
+      } else {
+        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[];
+      evt.map.getTargetElement().dispatchEvent(
+        new MobilityEvent("singleclick", {
+          ...evt,
+          features: geojson.writeFeaturesObject(features),
+          lonlat: toLonLat(evt.coordinate),
+        }),
+      );
+      // feature.get("form_factor"); //free float
+      // feature.get("num_vehicles_available"); // wfs livedata
+      // feature.get("provider_name"); // station sharing
+
+      if (newStationId || newTrainId || !features.length) {
+        setSelectedFeature(null);
+        setSelectedFeatures([]);
+      } else {
+        setSelectedFeatures(features);
+        setSelectedFeature(features[0]);
+      }
+    },
+    [
+      stationId,
+      trainId,
+      realtimeLayer,
+      stationsLayer,
+      tenant,
+      setStationId,
+      setTrainId,
+      setSelectedFeature,
+      setSelectedFeatures,
+    ],
+  );
+
+  useEffect(() => {
+    const key = map?.on("singleclick", onSingleClick);
+    return () => {
+      unByKey(key);
+    };
+  }, [map, onSingleClick]);
+
+  useEffect(() => {
+    const key = map?.on("pointermove", onPointerMove);
+    return () => {
+      unByKey(key);
+    };
+  }, [map, onPointerMove]);
+
+  return null;
+}
+export default SingleClickListener;

package/src/RvfSingleClickListener/index.tsx

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

package/src/RvfZoomButtons/RvfZoomButtons.tsx

@@ -1,9 +1,10 @@
+import { unByKey } from "ol/Observable";
 import { memo } from "preact/compat";
-import { useState } from "preact/hooks";
+import { useCallback, useEffect, useState } from "preact/hooks";
 
 import Minus from "../icons/Minus";
 import Plus from "../icons/Plus";
-import RvfButton from "../RvfButton";
+import RvfIconButton from "../RvfIconButton";
 import useMapContext from "../utils/hooks/useMapContext";
 
 function RvfZoomButtons() {
@@ -11,50 +12,56 @@ function RvfZoomButtons() {
   const [isZoomInDisabled, setIsZoomInDisabled] = useState(false);
   const [isZoomOutDisabled, setIsZoomOutDisabled] = useState(false);
 
-  const handleZoomIn = () => {
-    const view = map.getView();
-    const zoom = view.getZoom();
-    const maxzoom = view.getMaxZoom();
-    const minzoom = view.getMinZoom();
-
-    if (maxzoom && zoom === Number(maxzoom)) {
-      setIsZoomInDisabled(true);
+  const handleZoomIn = useCallback(() => {
+    if (!map?.getView()) {
       return;
     }
-
+    const view = map.getView();
+    const zoom = view.getZoom();
     view.setZoom(zoom + 1);
+  }, [map]);
 
-    if (!minzoom || view.getZoom() > Number(minzoom)) {
-      setIsZoomOutDisabled(false);
+  const handleZoomOut = useCallback(() => {
+    if (!map?.getView()) {
+      return;
     }
-  };
-
-  const handleZoomOut = () => {
     const view = map.getView();
     const zoom = view.getZoom();
-    const maxzoom = view.getMaxZoom();
-    const minzoom = view.getMinZoom();
+    view.setZoom(zoom - 1);
+  }, [map]);
 
-    if (minzoom && zoom === Number(minzoom)) {
-      setIsZoomOutDisabled(true);
-      return;
-    }
+  useEffect(() => {
+    const key = map?.on("moveend", () => {
+      const view = map.getView();
+      const zoom = view.getZoom();
+      const maxzoom = view.getMaxZoom();
+      const minzoom = view.getMinZoom();
 
-    view.setZoom(zoom - 1);
+      if (maxzoom && zoom === Number(maxzoom)) {
+        setIsZoomInDisabled(true);
+      } else {
+        setIsZoomInDisabled(false);
+      }
 
-    if (!maxzoom || view.getZoom() < Number(maxzoom)) {
-      setIsZoomInDisabled(false);
-    }
-  };
+      if (minzoom && zoom === Number(minzoom)) {
+        setIsZoomOutDisabled(true);
+      } else {
+        setIsZoomOutDisabled(false);
+      }
+    });
+    return () => {
+      unByKey(key);
+    };
+  }, [map]);
 
   return (
     <>
-      <RvfButton
+      <RvfIconButton
         disabled={isZoomInDisabled}
         Icon={Plus}
         onClick={handleZoomIn}
       />
-      <RvfButton
+      <RvfIconButton
         disabled={isZoomOutDisabled}
         Icon={Minus}
         onClick={handleZoomOut}

package/src/Search/Search.tsx

@@ -1,3 +1,6 @@
+import { memo } from "preact/compat";
+import { useCallback } from "preact/hooks";
+
 import StopsSearch from "../StopsSearch";
 import centerOnStation from "../utils/centerOnStation";
 import useMapContext from "../utils/hooks/useMapContext";
@@ -5,14 +8,13 @@ import useMapContext from "../utils/hooks/useMapContext";
 function Search() {
   const { apikey, map, stopsurl } = useMapContext();
 
-  return (
-    <StopsSearch
-      apikey={apikey}
-      onselect={(selected) => {
-        return centerOnStation(selected, map);
-      }}
-      url={stopsurl}
-    />
+  const onSelect = useCallback(
+    (selected) => {
+      return centerOnStation(selected, map);
+    },
+    [map],
   );
+
+  return <StopsSearch apikey={apikey} onselect={onSelect} url={stopsurl} />;
 }
-export default Search;
+export default memo(Search);

package/src/SingleClickListener/index.tsx

@@ -1 +1 @@
-export { default } from "./SingleClickListener";
+export { default } from "../RvfSingleClickListener";

package/src/StationsLayer/StationsLayer.tsx

@@ -31,7 +31,6 @@ function StationsLayer(props: MaplibreStyleLayerOptions) {
 
     return () => {
       map.removeLayer(layer);
-      layer.detachFromMap();
     };
   }, [map, setStationsLayer, layer]);
 

package/src/StopsSearch/StopsSearch.tsx

@@ -18,7 +18,7 @@ import tailwind from "../style.css";
 import i18n from "../utils/i18n";
 import MobilityEvent from "../utils/MobilityEvent";
 
-export type SearchProps = {
+export type MobilityStopsSearchProps = {
   apikey: string;
   bbox?: string;
   countrycode?: string;
@@ -58,13 +58,45 @@ function StopsSearch({
   prefagencies,
   reflocation,
   url = "https://api.geops.io/stops/v1/",
-}: SearchProps) {
+}: MobilityStopsSearchProps) {
   const { t } = i18n;
   const [query, setQuery] = useState("");
   const [selectedStation, setSelectedStation] = useState<StationFeature>();
   const [results, setResults] = useState<StopsResponse["features"]>(undefined);
   const myRef = useRef<HTMLDivElement>();
 
+  useEffect(() => {
+    myRef.current?.dispatchEvent(
+      new MobilityEvent<MobilityStopsSearchProps>("mwc:attribute", {
+        apikey,
+        bbox,
+        countrycode,
+        event,
+        field,
+        limit,
+        mots,
+        onselect,
+        params,
+        prefagencies,
+        reflocation,
+        url,
+      }),
+    );
+  }, [
+    apikey,
+    bbox,
+    countrycode,
+    event,
+    field,
+    limit,
+    mots,
+    onselect,
+    params,
+    prefagencies,
+    reflocation,
+    url,
+  ]);
+
   const api: StopsAPI = useMemo(() => {
     return new StopsAPI({ apiKey: apikey, url: url });
   }, [apikey, url]);
@@ -78,9 +110,9 @@ function StopsSearch({
           bubbles: true,
         },
       );
-      if (myRef.current) {
-        myRef.current.dispatchEvent(customEvt);
-      }
+
+      myRef.current?.dispatchEvent(customEvt);
+
       if (onselect && typeof onselect === "function") {
         onselect(station);
       }
@@ -208,7 +240,7 @@ function StopsSearch({
         </div>
       </div>
 
-      <div className="mt-[-4px] flex grow overflow-auto rounded-md rounded-t-none bg-white shadow">
+      <div className="-mt-4px flex grow overflow-auto rounded-md rounded-t-none bg-white shadow">
         {results && results.length === 0 && (
           <div
             className={