@geops/rvf-mobility-web-component 0.1.56 → 0.1.57

package/src/utils/hooks/useMapContext.tsx

@@ -5,9 +5,11 @@ import { useContext } from "preact/hooks";
 import type {
   MaplibreLayer,
   MaplibreStyleLayer,
+  MocoLayer,
   RealtimeLayer,
 } from "mobility-toolbox-js/ol";
 import type {
+  LayerGetFeatureInfoResponse,
   RealtimeStation,
   RealtimeStationId,
   RealtimeStopSequence,
@@ -20,23 +22,66 @@ import type { MobilityMapProps } from "../../MobilityMap/MobilityMap";
 
 export type MapContextType = {
   baseLayer: MaplibreLayer;
+  featuresInfos: LayerGetFeatureInfoResponse[];
+  featuresInfosHovered: LayerGetFeatureInfoResponse[];
+  hasDetails: boolean;
+  hasGeolocation: boolean;
+  hasLayerTree: boolean;
+  hasLnp: boolean;
+  hasNotification: boolean;
+  hasPermalink: boolean;
+  hasPrint: boolean;
+  hasRealtime: boolean;
+  hasSearch: boolean;
+  hasShare: boolean;
+  hasStations: boolean;
+  hasToolbar: boolean;
   isEmbed: boolean;
+  isExportMenuOpen: boolean;
   isFollowing: boolean;
+  isLayerTreeOpen: boolean;
+  isOverlayOpen: boolean;
+  isSearchOpen: boolean;
+  isShareMenuOpen: boolean;
   isTracking: boolean;
-  layers: string;
+  linesNetworkPlanLayer: MaplibreStyleLayer;
   map: Map;
+  notificationsLayer?: MocoLayer;
   permalinkUrlSearchParams: URLSearchParams;
   previewNotifications?: SituationType[];
-  queryablelayers: string;
   realtimeLayer: RealtimeLayer;
   selectedFeature: Feature;
   selectedFeatures: Feature[];
   setBaseLayer: (baseLayer: MaplibreLayer) => void;
+  setFeaturesInfos: (featuresInfos: LayerGetFeatureInfoResponse[]) => void;
+  setFeaturesInfosHovered: (
+    featuresInfos: LayerGetFeatureInfoResponse[],
+  ) => void;
+  setHasDetails: (hasDetails: boolean) => void;
+  setHasGeolocation: (hasGeolocation: boolean) => void;
+  setHasLayerTree: (hasLayerTree: boolean) => void;
+  setHasLnp: (hasLnp: boolean) => void;
+  setHasNotification: (hasNotification: boolean) => void;
+  setHasPermalink: (hasPermalink: boolean) => void;
+  setHasPrint: (hasPrint: boolean) => void;
+  setHasRealtime: (hasRealtime: boolean) => void;
+  setHasSearch: (hasSearch: boolean) => void;
+  setHasShare: (hasShare: boolean) => void;
+  setHasStations: (hasStations: boolean) => void;
+  setHasToolbar: (hasToolbar: boolean) => void;
+  setIsEmbed: (isEmbed: boolean) => void;
+  setIsExportMenuOpen: (isExportMenuOpen: boolean) => void;
   setIsFollowing: (isFollowing: boolean) => void;
+  setIsLayerTreeOpen: (isLayerTreeOpen: boolean) => void;
+  setIsOverlayOpen: (isOverlayOpen: boolean) => void;
+  setIsSearchOpen: (isSearchOpen: boolean) => void;
+  setIsShareMenuOpen: (isShareMenuOpen: boolean) => void;
   setIsTracking: (isTracking: boolean) => void;
+  setLinesNetworkPlanLayer: (layer?: MaplibreStyleLayer) => void;
   setMap: (map?: Map) => void;
+  setNotificationsLayer: (notificationsLayer?: MocoLayer) => void;
   setPermalinkUrlSearchParams: (
-    permalinkUrlSearchParams: URLSearchParams,
+    setPermalinkUrlSearchParams: URLSearchParams,
   ) => void;
   setPreviewNotifications: (setPreviewNotifications?: SituationType[]) => void;
   setRealtimeLayer: (realtimeLayer?: RealtimeLayer) => void;
@@ -55,19 +100,33 @@ export type MapContextType = {
 } & MobilityMapProps;
 
 export const MapContext = createContext<MapContextType>({
+  hasDetails: false,
+  hasGeolocation: false,
+  hasLayerTree: false,
+  hasLnp: false,
+  hasNotification: false,
+  hasPermalink: false,
+  hasPrint: false,
+  hasRealtime: false,
+  hasSearch: false,
+  hasShare: false,
+  hasStations: false,
+  hasToolbar: true,
   isEmbed: false,
+  isExportMenuOpen: false,
   isFollowing: false,
+  isLayerTreeOpen: false,
+  isOverlayOpen: false,
+  isSearchOpen: false,
+  isShareMenuOpen: false,
   isTracking: false,
-  layers: null,
-  map: null,
-  previewNotifications: null,
-  queryablelayers: null,
-  realtimeLayer: null,
   selectedFeatures: [],
   setBaseLayer: (baseLayer?: MaplibreLayer) => {},
   setIsFollowing: (isFollowing: boolean) => {},
   setIsTracking: (isTracking: boolean) => {},
+  setLinesNetworkPlanLayer: (linesNetworkPlanLayer: MaplibreStyleLayer) => {},
   setMap: (map?: Map) => {},
+  setNotificationsLayer: (notificationsLayer?: MocoLayer) => {},
   setPermalinkUrlSearchParams: (
     permalinkUrlSearchParams: URLSearchParams,
   ) => {},

package/src/utils/hooks/useRvfContext.tsx

@@ -3,27 +3,12 @@ import { createContext } from "preact";
 import { useContext } from "preact/hooks";
 
 import type { MaplibreStyleLayer } from "mobility-toolbox-js/ol";
-import type { Feature } from "ol";
 import type { Group } from "ol/layer";
 
 export interface RvfContextType {
-  isExportMenuOpen: boolean;
-  isLayerTreeOpen: boolean;
-  isSearchOpen: boolean;
-  isShareMenuOpen: boolean;
-  lineNetworkPlanLayer: MaplibreStyleLayer;
   poisLayer: MaplibreStyleLayer;
-  selectedFeature: Feature;
-  selectedFeatures: Feature[];
   sellingPointsLayer: MaplibreStyleLayer;
-  setIsExportMenuOpen: (isOpen: boolean) => void;
-  setIsLayerTreeOpen: (isOpen: boolean) => void;
-  setIsSearchOpen: (isOpen: boolean) => void;
-  setIsShareMenuOpen: (isOpen: boolean) => void;
-  setLineNetworkPlanLayer: (layer: MaplibreStyleLayer) => void;
   setPoisLayer: (layer: MaplibreStyleLayer) => void;
-  setSelectedFeature: (feature: Feature) => void;
-  setSelectedFeatures: (features: Feature[]) => void;
   setSellingPointsLayer: (layer: MaplibreStyleLayer) => void;
   setSharedMobilityLayerGroup: (group: Group) => void;
   setTarifZonenLayer: (layer: MaplibreStyleLayer) => void;
@@ -32,40 +17,11 @@ export interface RvfContextType {
 }
 
 export const RvfContext = createContext<RvfContextType>({
-  isExportMenuOpen: false,
-  isLayerTreeOpen: false,
-  isSearchOpen: false,
-  isShareMenuOpen: false,
-  lineNetworkPlanLayer: null,
   poisLayer: null,
-  selectedFeature: null,
-  selectedFeatures: [],
   sellingPointsLayer: null,
-  setIsExportMenuOpen: () => {
-    console.warn("setIsExportMenuOpen is not implemented");
-  },
-  setIsLayerTreeOpen: () => {
-    console.warn("setIsLayerTreeOpen is not implemented");
-  },
-  setIsSearchOpen: () => {
-    console.warn("setIsSearchOpen is not implemented");
-  },
-  setIsShareMenuOpen: () => {
-    console.warn("setIsShareMenuOpen is not implemented");
-  },
-  setLineNetworkPlanLayer: () => {
-    console.warn("setLineNetworkPlanLayer is not implemented");
-  },
   setPoisLayer: () => {
     console.warn("setPoisLayer is not implemented");
   },
-  setSelectedFeature: () => {
-    console.warn("setSelectedFeature is not implemented");
-  },
-  setSelectedFeatures: () => {
-    console.warn("setSelectedFeatures is not implemented");
-  },
-
   setSellingPointsLayer: () => {
     console.warn("setSellingPointsLayer is not implemented");
   },

package/src/NotificationLayer/index.tsx

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

package/src/RvfEmbedNavigation/DragPanWarning.ts

@@ -1,124 +0,0 @@
-import { Control } from "ol/control";
-import { DragPan } from "ol/interaction";
-import { unByKey } from "ol/Observable";
-
-import type { Map, MapBrowserEvent } from "ol";
-import type { Options } from "ol/control/Control";
-import type { EventsKey } from "ol/events";
-
-type DragPanWarningOptions = {
-  className?: string;
-} & Options;
-
-class DragPanWarning extends Control {
-  dragPan?: DragPan;
-
-  icon: HTMLDivElement;
-
-  onPointerDragRef?: EventsKey;
-
-  text: HTMLParagraphElement;
-
-  constructor(options: DragPanWarningOptions = {}) {
-    const element = document.createElement("div");
-    element.className =
-      options.className !== undefined
-        ? options.className
-        : "ol-drag-pan-warning";
-    element.style.display = "none";
-    element.style.pointerEvents = "auto";
-
-    super({
-      element,
-      render: options.render,
-      target: options.target,
-    });
-
-    this.icon = document.createElement("div");
-    this.icon.className = `${element.className}-icon`;
-
-    // sbb icons: sbb/two-finger-tap-large.svg';
-    this.icon.innerHTML = `
-      <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
-        <path fill="none" stroke="currentColor" stroke-width="2" d="M22.999,25 L22.997,13.002 C22.997,11.896 23.893,11 24.999,11 C26.105,11 27.001,11.896 27.001,13.002 L26.999,26.002 M31,25.003 C31,23.897 31.896,23.001 33.002,23.001 C34.11,23.001 35.006,23.897 35.006,25.003 C35.006,25.003 35,26.125 35,32.001 C35,37.875 33.2,41.001 33.2,41.001 L19,41.001 C19,41.001 12.21,29.483 11.586,28.419 C10.962,27.355 10.804,26.369 11.586,25.587 C12.37,24.805 13.636,24.805 14.418,25.587 L18.998,30.169 L19,30.169 L19,25.001 L18.996,15.003 C18.996,13.897 19.894,13.001 21,13.001 C22.106,13.001 23.002,13.897 23.002,15.003 L23,26.015 M26.9942,22.997 C26.9942,21.891 27.8902,20.995 28.9962,20.995 C30.1042,20.995 31.0002,21.891 31.0002,22.997 L31.0002,26.001 M30,16.3046 C30.632,15.3606 31,14.2246 31,13.0006 C31,9.6846 28.314,7.0006 25,7.0006 C23.208,7.0006 21.616,7.8026 20.518,9.0486 C17.432,9.2986 15,11.8506 15,15.0006 C15,16.2166 15.368,17.3426 15.988,18.2866"/>
-      </svg>
-    `;
-    this.element.appendChild(this.icon);
-
-    this.text = document.createElement("p");
-    this.text.className = `${element.className}-text`;
-    this.text.innerHTML = "Benutzen Sie 2 Finger um die Karte zu bedienen.";
-    this.element.appendChild(this.text);
-
-    this.dragPan = undefined;
-    this.onPointerDragRef = undefined;
-    this.onPointerDrag = this.onPointerDrag.bind(this);
-    this.onTouchEnd = this.onTouchEnd.bind(this);
-  }
-
-  onPointerDrag(event: MapBrowserEvent<PointerEvent>) {
-    // Show the warning on next pointerdrag events.
-    if (event.activePointers?.length !== 1) {
-      return true;
-    }
-    this.element.style.display = "flex";
-    document.addEventListener("touchend", this.onTouchEnd, { once: true });
-    return false;
-  }
-
-  onTouchEnd() {
-    unByKey(this.onPointerDragRef);
-    this.element.style.display = "none";
-  }
-
-  setMap(map: Map) {
-    super.setMap(map);
-    document.removeEventListener("touchend", this.onTouchEnd);
-    unByKey(this.onPointerDragRef);
-
-    if (map) {
-      const viewport = map.getViewport();
-
-      // We allow default scroll behavior for touch events.
-      viewport.style.touchAction = "pan-x pan-y";
-
-      // Deactivate drag pan only on touch events.
-      this.dragPan = map
-        .getInteractions()
-        .getArray()
-        .find((interaction) => {
-          return interaction instanceof DragPan;
-        });
-
-      if (!this.dragPan) {
-        console.error(
-          "Impossible to find the DragPan interaction, DragPanWarning will not work as expected.",
-        );
-        return;
-      }
-
-      this.listenerKeys.push(
-        // @ts-expect-error - we need to listen to pointerdown events
-        map.on("pointerdown", (evt: MapBrowserEvent<PointerEvent>) => {
-          document.removeEventListener("touchend", this.onTouchEnd);
-
-          if (
-            evt.originalEvent.pointerType !== "touch" ||
-            // @ts-expect-error - condition_ is a private method
-            !this.dragPan?.condition_(evt)
-          ) {
-            this.element.style.display = "none";
-            return true;
-          }
-
-          this.onPointerDragRef = map.on("pointerdrag", this.onPointerDrag);
-
-          return true;
-        }),
-      );
-      this.element.addEventListener("click", this.onTouchEnd);
-    }
-  }
-}
-
-export default DragPanWarning;

package/src/RvfEmbedNavigation/RvfEmbedNavigation.tsx

@@ -1,51 +0,0 @@
-import { MouseWheelZoom } from "ol/interaction";
-import { useEffect, useState } from "preact/hooks";
-
-import useMapContext from "../utils/hooks/useMapContext";
-
-import DragPanWarning from "./DragPanWarning";
-
-function RvfEmbedNavigation() {
-  const { map } = useMapContext();
-  const [target, setTarget] = useState(null);
-
-  useEffect(() => {
-    let dragPanWarningControl = null;
-
-    if (!map || !target) {
-      return;
-    }
-    // Deactivates mouse wheel zoom
-    map.getInteractions().forEach((interaction) => {
-      if (interaction instanceof MouseWheelZoom) {
-        interaction.setActive(false);
-      }
-    });
-
-    dragPanWarningControl = new DragPanWarning({ target: target });
-    map.addControl(dragPanWarningControl);
-
-    return () => {
-      if (dragPanWarningControl) {
-        map.removeControl(dragPanWarningControl);
-      }
-
-      // Deactivates mouse wheel zoom
-      map.getInteractions().forEach((interaction) => {
-        if (interaction instanceof MouseWheelZoom) {
-          interaction.setActive(true);
-        }
-      });
-    };
-  }, [map, target]);
-
-  return (
-    <div
-      ref={(node) => {
-        return setTarget(node);
-      }}
-    ></div>
-  );
-}
-
-export default RvfEmbedNavigation;

package/src/RvfEmbedNavigation/index.js

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

package/src/RvfExportMenu/index.tsx

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

package/src/RvfExportMenuButton/index.tsx

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

package/src/RvfFloatingMenu/RvfFloatingMenu.tsx

@@ -1,44 +0,0 @@
-import ArrowDown from "../icons/ArrowDown";
-import ArrowUp from "../icons/ArrowUp";
-import useMapContext from "../utils/hooks/useMapContext";
-
-import type { JSX, PreactDOMAttributes } from "preact";
-
-export type RvfFloatingMenuProps = {
-  isOpen: boolean;
-  onClick: () => void;
-} & JSX.HTMLAttributes<HTMLDivElement> &
-  PreactDOMAttributes;
-
-function RvfFloatingMenu({
-  children,
-  isOpen,
-  onClick,
-  title,
-}: RvfFloatingMenuProps) {
-  const { map } = useMapContext();
-
-  if (!map) {
-    return null;
-  }
-
-  return (
-    <div className="pointer-events-none absolute top-2 bottom-8 left-2 z-10 flex flex-col overflow-hidden rounded-lg">
-      <div className="border-grey pointer-events-auto max-h-full w-48 rounded-lg border bg-white shadow-lg @lg/main:w-52">
-        <button
-          className="flex w-full items-center justify-between px-2 py-1.5 font-bold"
-          onClick={onClick}
-        >
-          {title} {isOpen ? <ArrowDown /> : <ArrowUp />}
-        </button>
-        {!isOpen && (
-          <div className="flex h-[calc(100%-39px)] w-full flex-1 flex-col overflow-y-auto">
-            {children}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
-
-export default RvfFloatingMenu;

package/src/RvfFloatingMenu/index.tsx

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

package/src/RvfLayerTreeButton/index.tsx

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

package/src/RvfLineNetworkPlanLayer/index.tsx

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

package/src/RvfPermalink/RvfPermalink.tsx

@@ -1,18 +0,0 @@
-import RvfInputCopy from "../RvfInputCopy";
-
-import type { JSX, PreactDOMAttributes } from "preact";
-
-function RvfPermalink({
-  ...props
-}: JSX.HTMLAttributes<HTMLDivElement> & PreactDOMAttributes) {
-  return (
-    <div {...props}>
-      <RvfInputCopy value={window?.location.href} />
-      <p className="py-2">
-        Sie können auch den Link aus der Adresszeile des Browsers kopieren.
-      </p>
-    </div>
-  );
-}
-
-export default RvfPermalink;

package/src/RvfPermalink/index.tsx

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

package/src/RvfSearchButton/index.tsx

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

package/src/RvfShare/RvfPermalinkButton/index.tsx

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

package/src/RvfShare/index.tsx

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

package/src/RvfShareMenuButton/index.tsx

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

package/src/RvfTopics/index.tsx

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

package/src/RvfZoomButtons/index.tsx

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