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

package/src/GeolocationButton/GeolocationButton.tsx

@@ -1,31 +1,14 @@
-import type { JSX, PreactDOMAttributes } from "preact";
-
-import { Feature, Geolocation } from "ol";
-import { Point } from "ol/geom";
-import VectorLayer from "ol/layer/Vector";
+import { Geolocation } from "ol";
 import { unByKey } from "ol/Observable";
 import { fromLonLat } from "ol/proj";
-import VectorSource from "ol/source/Vector";
-import { Icon, Style } from "ol/style";
+import { memo } from "preact/compat";
 import { useEffect, useMemo } from "preact/hooks";
 
 import GeolocationIcon from "../icons/Geolocation";
-// @ts-expect-error - svg file not handled by vite
-import locationSvg from "../icons/Geolocation/location.svg";
-import RvfIconButton from "../RvfIconButton";
+import IconButton from "../ui/IconButton";
 import useMapContext from "../utils/hooks/useMapContext";
 
-const point = new Point([0, 0]);
-const feature = new Feature(point);
-const layer = new VectorLayer({
-  source: new VectorSource({ features: [feature] }),
-  style: new Style({
-    image: new Icon({
-      anchor: [0.5, 1],
-      src: locationSvg,
-    }),
-  }),
-});
+import type { JSX, PreactDOMAttributes } from "preact";
 
 export type GeolocationButtonProps = JSX.HTMLAttributes<HTMLButtonElement> &
   PreactDOMAttributes;
@@ -53,7 +36,6 @@ function GeolocationButton({ ...props }: GeolocationButtonProps) {
           const coord = fromLonLat(position, "EPSG:3857");
           map.getView().setZoom(TRACKING_ZOOM);
           map.getView().setCenter(coord);
-          point.setCoordinates(coord);
         }
       }),
       // then we only center the map.
@@ -62,7 +44,6 @@ function GeolocationButton({ ...props }: GeolocationButtonProps) {
         if (evt.target.getPosition()) {
           const coord = fromLonLat(position, "EPSG:3857");
           map.getView().setCenter(coord);
-          point.setCoordinates(coord);
         }
       }),
     ];
@@ -74,25 +55,20 @@ function GeolocationButton({ ...props }: GeolocationButtonProps) {
 
   useEffect(() => {
     geolocation.setTracking(isTracking);
-    if (isTracking) {
-      layer.setMap(map);
-    }
-    return () => {
-      layer.setMap(null);
-    };
   }, [map, geolocation, isTracking]);
 
   return (
-    <RvfIconButton
-      className={isTracking ? "animate-pulse" : ""}
+    <IconButton
+      // @ts-expect-error - onClick exists
       onClick={() => {
-        setIsTracking(!isTracking);
+        return setIsTracking(!isTracking);
       }}
       {...props}
+      selected={isTracking}
     >
-      <GeolocationIcon />
-    </RvfIconButton>
+      <GeolocationIcon className={isTracking ? "animate-pulse" : ""} />
+    </IconButton>
   );
 }
 
-export default GeolocationButton;
+export default memo(GeolocationButton);

package/src/GeolocationButton/index.tsx

@@ -1 +1 @@
-export { default } from "./GeolocationButton";
+export { default } from "../RvfGeolocationButton";

package/src/Map/Map.tsx

@@ -1,13 +1,15 @@
 import { Map as OlMap, View } from "ol";
 import { unByKey } from "ol/Observable";
-// @ts-expect-error bad type definition
-import olStyle from "ol/ol.css";
-import { JSX, PreactDOMAttributes } from "preact";
 import { memo } from "preact/compat";
 import { useEffect, useMemo, useRef } from "preact/hooks";
 
 import useMapContext from "../utils/hooks/useMapContext";
 
+// @ts-expect-error bad type definition
+import olStyle from "ol/ol.css";
+
+import type { JSX, PreactDOMAttributes } from "preact";
+
 export type RealtimeMapProps = JSX.HTMLAttributes<HTMLDivElement> &
   PreactDOMAttributes;
 

package/src/MapDispatchEvents/MapDispatchEvents.tsx

@@ -0,0 +1,78 @@
+import { GeoJSON } from "ol/format";
+import { memo } from "preact/compat";
+import { useEffect } from "preact/hooks";
+
+import useMapContext from "../utils/hooks/useMapContext";
+import MobilityEvent from "../utils/MobilityEvent";
+
+import type { MapBrowserEvent } from "ol";
+
+import type { MobilityMapProps } from "../MobilityMap/MobilityMap";
+import type { MobilityEventType } from "../utils/MobilityEvent";
+
+const dispatchEvent = (
+  node: HTMLElement | null,
+  eventType: MobilityEventType,
+  eventData: unknown,
+) => {
+  node?.dispatchEvent(
+    new MobilityEvent(eventType, eventData, { bubbles: true }),
+  );
+};
+
+const geojson = new GeoJSON();
+
+/**
+ * This component is responsible to dispatch events listenable for the window outside the web component.
+ *
+ * @example
+ * const wc = document.getElementById("my-web-component");
+ * wc.addEventListener("mwc:singleclick", (event) => {
+ *   console.log(event.data);
+ * });
+ *
+ * @param param0 - Props for the component
+ * @returns JSX.Element | null
+ */
+
+function MapDispatchEvents({
+  node,
+  wcAttributes,
+}: {
+  node: HTMLDivElement | null;
+  wcAttributes: MobilityMapProps;
+}) {
+  const { map, permalinkUrlSearchParams, selectedFeature } = useMapContext();
+
+  // Send events when one of the web component attributes changes
+  useEffect(() => {
+    dispatchEvent(node, "mwc:attribute", wcAttributes);
+  }, [node, wcAttributes]);
+
+  // Send events when we click on the map
+  useEffect(() => {
+    map?.on("singleclick", (event: MapBrowserEvent) => {
+      dispatchEvent(node, "mwc:singleclick", {
+        coordinate: event.coordinate,
+        pixel: event.pixel,
+      });
+    });
+  }, [node, map]);
+
+  // Send events when the selected feature changes
+  useEffect(() => {
+    const json = selectedFeature
+      ? geojson.writeFeatureObject(selectedFeature)
+      : null;
+    dispatchEvent(node, "mwc:selectedfeature", json);
+  }, [node, selectedFeature]);
+
+  // Send current map state using URL Search parameters
+  useEffect(() => {
+    dispatchEvent(node, "mwc:permalink", permalinkUrlSearchParams?.toString());
+  }, [node, permalinkUrlSearchParams]);
+
+  return null;
+}
+
+export default memo(MapDispatchEvents);

package/src/MapDispatchEvents/index.tsx

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

package/src/MobilityMap/MobilityMap.tsx

@@ -1,24 +1,15 @@
-import {
-  MaplibreLayer,
-  MaplibreStyleLayer,
-  RealtimeLayer as MbtRealtimeLayer,
-} from "mobility-toolbox-js/ol";
-import {
-  RealtimeStation,
-  RealtimeStationId,
-  RealtimeStopSequence,
-  RealtimeTrainId,
-} from "mobility-toolbox-js/types";
-import { Map as OlMap } from "ol";
 import { memo } from "preact/compat";
-import { useEffect, useMemo, useRef, useState } from "preact/hooks";
+import { useMemo, useRef, useState } from "preact/hooks";
 
 import BaseLayer from "../BaseLayer";
 import Copyright from "../Copyright";
+import EmbedNavigation from "../EmbedNavigation";
 import GeolocationButton from "../GeolocationButton";
 import Map from "../Map";
+import MapDispatchEvents from "../MapDispatchEvents";
 import NotificationLayer from "../NotificationLayer";
 import Overlay from "../Overlay";
+import Permalink from "../Permalink";
 import RealtimeLayer from "../RealtimeLayer";
 import RouteSchedule from "../RouteSchedule";
 import ScaleLine from "../ScaleLine";
@@ -26,64 +17,40 @@ import Search from "../Search";
 import SingleClickListener from "../SingleClickListener/SingleClickListener";
 import Station from "../Station";
 import StationsLayer from "../StationsLayer";
-// @ts-expect-error bad type definition
-import tailwind from "../style.css";
 import { I18nContext } from "../utils/hooks/useI18n";
 import { MapContext } from "../utils/hooks/useMapContext";
-import useUpdatePermalink from "../utils/hooks/useUpdatePermalink";
 import i18n from "../utils/i18n";
-import MobilityEvent from "../utils/MobilityEvent";
+import WindowMessageListener from "../WindowMessageListener";
+
+import MobilityMapAttributes from "./MobilityMapAttributes";
+
+// @ts-expect-error bad type definition
+import tailwind from "../style.css";
 // @ts-expect-error bad type definition
 import style from "./index.css";
-// Notificationurl example: https://mobility-web-component-tmp.vercel.app/geops-mobility?notificationurl=https%3A%2F%2Fmoco.geops.io%2Fapi%2Fv1%2Fexport%2Fnotification%2F%3Fsso_config%3Dsob&geolocation=false&realtime=false&search=false&notificationat=2024-01-25T22%3A59%3A00Z
 
-export interface MobilityMapProps {
-  apikey?: string;
-  baselayer?: string;
-  center?: string;
-  extent?: string;
-  geolocation?: string;
-  mapsurl?: string;
-  maxextent?: string;
-  maxzoom?: string;
-  minzoom?: string;
-  mots?: string;
-  notification?: string;
-  notificationat?: string; // 2024-01-25T22:59:00Z
-  notificationbeforelayerid?: string;
-  notificationurl?: string; // https://moco.geops.io/api/v1/
-  permalink?: string;
-  realtime?: string;
-  realtimeurl?: string;
-  search?: string;
-  stopsurl?: string;
-  tenant?: string;
-  zoom?: string;
-}
+import type {
+  MaplibreLayer,
+  MaplibreStyleLayer,
+  RealtimeLayer as MbtRealtimeLayer,
+} from "mobility-toolbox-js/ol";
+import type {
+  RealtimeStation,
+  RealtimeStationId,
+  RealtimeStopSequence,
+  RealtimeTrainId,
+  SituationType,
+} from "mobility-toolbox-js/types";
+import type { Feature, Map as OlMap } from "ol";
 
-function MobilityMap({
-  apikey = null,
-  baselayer = "travic_v2",
-  center = "831634,5933959",
-  extent = null,
-  geolocation = "true",
-  mapsurl = "https://maps.geops.io",
-  maxextent = null,
-  maxzoom = null,
-  minzoom = null,
-  mots = null,
-  notification = "false",
-  notificationat = null,
-  notificationbeforelayerid = null,
-  notificationurl = "https://moco.geops.io/api/v1/",
-  permalink = "false",
-  realtime = "true",
-  realtimeurl = "wss://api.geops.io/tracker-ws/v1/ws",
-  search = "true",
-  stopsurl = "https://api.geops.io/stops/v1/",
-  tenant = null,
-  zoom = "13",
-}: MobilityMapProps) {
+import type { MobilityMapAttributeName } from "./MobilityMapAttributes";
+
+export type MobilityMapProps = Record<
+  MobilityMapAttributeName,
+  null | string | undefined
+>;
+
+function MobilityMap(props: MobilityMapProps) {
   const eventNodeRef = useRef<HTMLDivElement>();
   const [baseLayer, setBaseLayer] = useState<MaplibreLayer>();
   const [isFollowing, setIsFollowing] = useState(false);
@@ -95,40 +62,73 @@ function MobilityMap({
   const [map, setMap] = useState<OlMap>();
   const [stationId, setStationId] = useState<RealtimeStationId>();
   const [trainId, setTrainId] = useState<RealtimeTrainId>();
+  const [selectedFeature, setSelectedFeature] = useState<Feature>(null);
+  const [selectedFeatures, setSelectedFeatures] = useState<Feature[]>([]);
+  const [permalinkUrlSearchParams, setPermalinkUrlSearchParams] =
+    useState<URLSearchParams>();
+
+  const [previewNotifications, setPreviewNotifications] =
+    useState<SituationType[]>();
 
-  // TODO: this should be removed. The parent application should be responsible to do this
-  // or we should find something that fit more usecases
-  useUpdatePermalink(map, permalink === "true");
+  const {
+    embed,
+    geolocation,
+    notification,
+    permalink,
+    realtime,
+    search,
+    tenant,
+  } = props;
+
+  const hasRealtime = useMemo(() => {
+    return realtime === "true";
+  }, [realtime]);
 
+  const hasNotification = useMemo(() => {
+    return notification === "true" || !!previewNotifications;
+  }, [notification, previewNotifications]);
+
+  const hasGeolocation = useMemo(() => {
+    return geolocation === "true";
+  }, [geolocation]);
+
+  const hasPermalink = useMemo(() => {
+    return permalink === "true";
+  }, [permalink]);
+
+  const hasSearch = useMemo(() => {
+    return search === "true";
+  }, [search]);
+
+  const isEmbed = useMemo(() => {
+    return embed === "true";
+  }, [embed]);
+
+  // Object representing all the web-component attributes and the map context values.
   const mapContextValue = useMemo(() => {
     return {
-      // MobilityMapProps && MapContextProps
-      apikey,
-      baselayer,
+      // MobilityMapProps
+      ...props,
+      // MapContextProps
       baseLayer,
-      center,
-      extent,
-      geolocation,
+      isEmbed,
       isFollowing,
       isTracking,
       map,
-      mapsurl,
-      maxextent,
-      maxzoom,
-      minzoom,
-      mots,
-      notification,
-      notificationat,
-      notificationbeforelayerid,
-      notificationurl,
-      permalink,
+      permalinkUrlSearchParams,
+      previewNotifications,
       realtimeLayer,
-      realtimeurl,
+      selectedFeature,
+      selectedFeatures,
       setBaseLayer,
       setIsFollowing,
       setIsTracking,
       setMap,
+      setPermalinkUrlSearchParams,
+      setPreviewNotifications,
       setRealtimeLayer,
+      setSelectedFeature,
+      setSelectedFeatures,
       setStation,
       setStationId,
       setStationsLayer,
@@ -138,85 +138,25 @@ function MobilityMap({
       stationId,
       stationsLayer,
       stopSequence,
-      stopsurl,
-      tenant,
       trainId,
-      zoom,
     };
   }, [
-    apikey,
-    baselayer,
+    props,
     baseLayer,
-    center,
-    extent,
-    geolocation,
+    isEmbed,
     isFollowing,
     isTracking,
     map,
-    mapsurl,
-    maxextent,
-    maxzoom,
-    minzoom,
-    mots,
-    notification,
-    notificationat,
-    notificationbeforelayerid,
-    notificationurl,
-    permalink,
+    permalinkUrlSearchParams,
+    previewNotifications,
     realtimeLayer,
-    realtimeurl,
+    selectedFeature,
+    selectedFeatures,
     station,
     stationId,
     stationsLayer,
     stopSequence,
-    stopsurl,
-    tenant,
     trainId,
-    zoom,
-  ]);
-
-  useEffect(() => {
-    eventNodeRef.current?.dispatchEvent(
-      new MobilityEvent<MobilityMapProps>("mwc:attribute", {
-        baselayer,
-        center,
-        extent,
-        geolocation,
-        mapsurl,
-        maxextent,
-        maxzoom,
-        minzoom,
-        mots,
-        notification,
-        notificationat,
-        notificationbeforelayerid,
-        notificationurl,
-        realtime,
-        realtimeurl,
-        search,
-        tenant,
-        zoom,
-      }),
-    );
-  }, [
-    baselayer,
-    center,
-    extent,
-    geolocation,
-    mapsurl,
-    maxextent,
-    maxzoom,
-    minzoom,
-    mots,
-    notification,
-    notificationat,
-    notificationurl,
-    notificationbeforelayerid,
-    realtime,
-    realtimeurl,
-    search,
-    tenant,
-    zoom,
   ]);
 
   return (
@@ -224,26 +164,31 @@ function MobilityMap({
       <style>{tailwind}</style>
       <style>{style}</style>
       <MapContext.Provider value={mapContextValue}>
+        <Permalink replaceState={hasPermalink} />
+        <MapDispatchEvents node={eventNodeRef.current} wcAttributes={props} />
+        <WindowMessageListener eventNode={eventNodeRef.current} />
         <div
-          className="relative size-full border font-sans @container/main"
+          className="@container/main relative size-full border font-sans"
           ref={eventNodeRef}
         >
           <div className="relative flex size-full flex-col @lg/main:flex-row-reverse">
-            <Map className="relative flex-1 overflow-visible ">
+            <Map className="relative flex-1 overflow-visible">
               <BaseLayer />
               <SingleClickListener />
-              {realtime === "true" && <RealtimeLayer />}
+              <EmbedNavigation />
+
+              {hasNotification && <NotificationLayer />}
+              {hasRealtime && <RealtimeLayer />}
               {tenant && <StationsLayer />}
-              {notification === "true" && <NotificationLayer />}
               <div className="absolute inset-x-2 bottom-2 z-10 flex items-end justify-between gap-2 text-[10px]">
                 <ScaleLine className="bg-slate-50/70" />
                 <Copyright className="bg-slate-50/70" />
               </div>
-              <div className="absolute right-2 top-2 z-10 flex flex-col gap-2">
-                {geolocation === "true" && <GeolocationButton />}
+              <div className="absolute top-2 right-2 z-10 flex">
+                {hasGeolocation && <GeolocationButton />}
               </div>
-              {search === "true" && (
-                <div className="absolute left-2 right-12 top-2 z-10 flex max-h-[90%] min-w-64 max-w-96 flex-col">
+              {hasSearch && (
+                <div className="absolute top-2 right-12 left-2 z-10 flex max-h-[90%] max-w-96 min-w-64 flex-col">
                   <Search />
                 </div>
               )}
@@ -255,11 +200,11 @@ function MobilityMap({
                 style: { width: "calc(100% - 60px)" },
               }}
             >
-              {realtime === "true" && trainId && (
-                <RouteSchedule className="relative overflow-y-auto  overflow-x-hidden" />
+              {hasRealtime && trainId && (
+                <RouteSchedule className="relative overflow-x-hidden overflow-y-auto" />
               )}
               {tenant && stationId && (
-                <Station className="relative overflow-y-auto  overflow-x-hidden" />
+                <Station className="relative overflow-x-hidden overflow-y-auto" />
               )}
             </Overlay>
           </div>
@@ -269,4 +214,14 @@ function MobilityMap({
   );
 }
 
-export default memo(MobilityMap);
+// We creates a wrapper to inject the default props values from MobilityMapAttributes.
+const defaultProps = {};
+Object.entries(MobilityMapAttributes).forEach(([key]) => {
+  defaultProps[key] = MobilityMapAttributes[key].defaultValue || null;
+});
+
+function MobilityMapWithDefaultProps(props: MobilityMapProps) {
+  return <MobilityMap {...defaultProps} {...props} />;
+}
+
+export default memo(MobilityMapWithDefaultProps);

package/src/MobilityMap/MobilityMapAttributes.test.ts

@@ -0,0 +1,21 @@
+import attributes from "./MobilityMapAttributes";
+
+describe("MobilityMapAttributes", () => {
+  Object.entries(attributes).forEach(([key, value]) => {
+    test(`${key} has a description`, () => {
+      expect(value.description).toBeDefined();
+    });
+
+    if (value.type === "boolean") {
+      test(`${key} has a defaultValue for boolean`, () => {
+        expect(value.defaultValue).toMatch(/^(true|false)$/);
+      });
+    }
+
+    if (value.defaultValue === "true" || value.defaultValue === "false") {
+      test(`${key} is boolean when defaultValue is true or false`, () => {
+        expect(value.type).toBe("boolean");
+      });
+    }
+  });
+});