@geops/rvf-mobility-web-component 0.1.127 → 0.1.129

package/src/LinesNetworkPlanLayerHighlight/LinesNetworkPlanLayerHighlight.tsx

@@ -1,59 +0,0 @@
-import { MaplibreStyleLayer } from "mobility-toolbox-js/ol";
-import { memo } from "preact/compat";
-import { useEffect, useMemo } from "preact/hooks";
-
-import { LNP_GEOPS_FILTER_HIGHLIGHT } from "../utils/constants";
-import highlightLinesNetworkPlan from "../utils/highlightLinesNetworkPlan";
-import useMapContext from "../utils/hooks/useMapContext";
-
-import type { MaplibreStyleLayerOptions } from "mobility-toolbox-js/ol/layers/MaplibreStyleLayer";
-
-function LinesNetworkPlanLayerHighlight(props: MaplibreStyleLayerOptions) {
-  const { baseLayer, linesIds, map } = useMapContext();
-
-  const layer = useMemo(() => {
-    if (!baseLayer) {
-      return null;
-    }
-    return new MaplibreStyleLayer({
-      layersFilter: ({ metadata }) => {
-        return metadata?.["geops.filter"]?.startsWith(
-          LNP_GEOPS_FILTER_HIGHLIGHT,
-        );
-      },
-      maplibreLayer: baseLayer,
-      visible: false,
-      ...(props || {}),
-    });
-  }, [baseLayer, props]);
-
-  useEffect(() => {
-    if (!map || !layer) {
-      return;
-    }
-
-    map.addLayer(layer);
-    return () => {
-      map.removeLayer(layer);
-    };
-  }, [map, layer]);
-
-  useEffect(() => {
-    if (!layer || !baseLayer?.loaded) {
-      return;
-    }
-    if (linesIds?.length) {
-      highlightLinesNetworkPlan(linesIds, baseLayer);
-      layer.setVisible(true);
-    }
-    return () => {
-      layer?.setVisible(false);
-      // Reset the filter
-      highlightLinesNetworkPlan(undefined, baseLayer);
-    };
-  }, [baseLayer, baseLayer?.loaded, layer, linesIds]);
-
-  return null;
-}
-
-export default memo(LinesNetworkPlanLayerHighlight);

package/src/LinesNetworkPlanLayerHighlight/index.tsx

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

package/src/Map/Map.tsx

@@ -1,166 +0,0 @@
-import { Map as OlMap, View } from "ol";
-import { unByKey } from "ol/Observable";
-import { memo } from "preact/compat";
-import { useEffect, useMemo, useRef } from "preact/hooks";
-
-import useInitialPermalink from "../utils/hooks/useInitialPermalink";
-import useMapContext from "../utils/hooks/useMapContext";
-
-// @ts-expect-error bad type definition
-import olStyle from "ol/ol.css";
-
-import type { JSX, PreactDOMAttributes } from "preact";
-
-import type { MobilityMapProps } from "../MobilityMap/MobilityMap";
-
-export type RealtimeMapProps = JSX.HTMLAttributes<HTMLDivElement> &
-  PreactDOMAttributes;
-
-function Map({ children, ...props }: RealtimeMapProps) {
-  const mapRef = useRef();
-  const { center, extent, map, maxextent, maxzoom, minzoom, setMap, zoom } =
-    useMapContext();
-
-  const propsFromPermalinkRef = useRef<null | Partial<MobilityMapProps>>(
-    useInitialPermalink(),
-  );
-
-  const view = useMemo(() => {
-    if (!maxextent) {
-      if (maxextent === "") {
-        return new View();
-      }
-      return;
-    }
-    const bbox = maxextent.split(",").map((c) => {
-      return parseFloat(c);
-    });
-    return new View({
-      constrainOnlyCenter: false, // allow to have the same value as extent and max extent
-      extent: bbox,
-      showFullExtent: true,
-    });
-  }, [maxextent]);
-
-  useEffect(() => {
-    if (!map || !view) {
-      return;
-    }
-    const key = map.on("change:view", (evt) => {
-      const oldView = evt.oldValue;
-      if (oldView) {
-        view.setMinZoom(oldView.getMinZoom());
-        view.setMaxZoom(oldView.getMaxZoom());
-        view.setCenter(oldView.getCenter());
-        view.setZoom(oldView.getZoom());
-      }
-    });
-    map.setView(view);
-
-    return () => {
-      unByKey(key);
-    };
-  }, [map, view]);
-
-  useEffect(() => {
-    let newMap: OlMap;
-    if (mapRef.current) {
-      newMap = new OlMap({
-        controls: [],
-        // pixelRatio: 3,
-        target: mapRef.current,
-      });
-      setMap(newMap);
-    }
-
-    return () => {
-      newMap?.setTarget(undefined);
-      setMap();
-    };
-  }, [setMap]);
-
-  useEffect(() => {
-    if (!map || !extent) {
-      return;
-    }
-    const bbox = extent.split(",").map((c) => {
-      return parseFloat(c);
-    });
-
-    if (bbox) {
-      map.getView().fit(bbox);
-    }
-  }, [map, extent]);
-
-  useEffect(() => {
-    if (!map || !center) {
-      return;
-    }
-    const [x, y] = center.split(",").map((c) => {
-      return parseFloat(c);
-    });
-    if (x && y) {
-      map.getView().setCenter([x, y]);
-    }
-  }, [map, center]);
-
-  useEffect(() => {
-    if (!map) {
-      return;
-    }
-    const number = parseFloat(zoom);
-    if (number) {
-      map.getView().setZoom(number);
-    }
-  }, [map, zoom]);
-
-  useEffect(() => {
-    if (!map) {
-      return;
-    }
-    const number = parseFloat(maxzoom);
-    if (number) {
-      map.getView().setMaxZoom(number);
-    }
-  }, [map, maxzoom]);
-
-  useEffect(() => {
-    if (!map) {
-      return;
-    }
-    const number = parseFloat(minzoom);
-    if (number) {
-      map.getView().setMinZoom(number);
-    }
-  }, [map, minzoom]);
-
-  // Apply permalink parameters when the view is set after that the default attribute is set
-  // Order of useEffect is important here.
-  // This use effect should be called only when the view is set
-  useEffect(() => {
-    const curr = propsFromPermalinkRef.current;
-    const mapView = map?.getView();
-    if (mapView && curr.center) {
-      mapView.setCenter(
-        curr.center.split(",").map((c) => {
-          return parseFloat(c);
-        }),
-      );
-    }
-
-    if (mapView && curr.zoom) {
-      mapView.setZoom(parseFloat(curr.zoom));
-    }
-  }, [map]);
-
-  return (
-    <>
-      <style>{olStyle}</style>
-      <div ref={mapRef} {...props}>
-        {children}
-      </div>
-    </>
-  );
-}
-
-export default memo(Map);

package/src/Map/index.tsx

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

package/src/MapDispatchEvents/MapDispatchEvents.tsx

@@ -1,87 +0,0 @@
-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;
-
-    // When the ol feature is a cluster
-    if (json?.properties?.clusterLeaves?.length > 0) {
-      json.properties.clusterLeaves = json.properties.clusterLeaves.map(
-        (feature) => {
-          return geojson.writeFeatureObject(feature);
-        },
-      );
-    }
-    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

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

package/src/MapLayout/MapLayout.tsx

@@ -1,172 +0,0 @@
-import { memo } from "preact/compat";
-import { twMerge } from "tailwind-merge";
-
-import Copyright from "../Copyright";
-import EmbedNavigation from "../EmbedNavigation";
-import ExportMenuButton from "../ExportMenuButton";
-import GeolocationButton from "../GeolocationButton";
-import LayerTreeButton from "../LayerTreeButton";
-import Map from "../Map";
-import Overlay from "../Overlay";
-import OverlayContent from "../OverlayContent";
-import ScaleLine from "../ScaleLine";
-import Search from "../Search";
-import SearchButton from "../SearchButton";
-import ShareMenuButton from "../ShareMenuButton";
-import useMapContext from "../utils/hooks/useMapContext";
-import ZoomButtons from "../ZoomButtons";
-
-import type { HTMLAttributes } from "preact";
-
-const scrollableHandlerProps = {
-  style: { width: "calc(100% - 60px)" },
-};
-
-function MapLayout({
-  className,
-  ...props
-}: { className?: string } & HTMLAttributes<HTMLDivElement>) {
-  const {
-    hasDetails,
-    hasGeolocation,
-    hasLayerTree,
-    hasPrint,
-    hasRealtime,
-    hasSearch,
-    hasShare,
-    hasToolbar,
-    isEmbed,
-    isOverlayOpen,
-    isSearchOpen,
-  } = useMapContext();
-
-  return (
-    <div
-      className={twMerge(
-        "relative flex size-full flex-col @lg/main:flex-row-reverse",
-        className,
-      )}
-      {...props}
-    >
-      <Map className="relative flex-1 overflow-visible">
-        {isEmbed && <EmbedNavigation />}
-
-        <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 bottom-10 z-10 flex flex-col justify-between gap-2">
-          <ZoomButtons />
-        </div>
-
-        {hasGeolocation && (
-          <div className="absolute top-2 right-2 z-10 flex flex-col gap-2">
-            <GeolocationButton />
-          </div>
-        )}
-
-        {!hasToolbar && hasSearch && (
-          <div
-            className={twMerge(
-              "absolute top-2 right-2 left-2 z-10 max-w-96",
-              isOverlayOpen && "@lg:left-84",
-            )}
-          >
-            <Search />
-          </div>
-        )}
-      </Map>
-
-      <div className="pointer-events-none absolute top-2 bottom-2 left-2 z-10 flex flex-col gap-2">
-        {hasToolbar && (
-          <div
-            className={
-              "pointer-events-none relative z-10 w-fit rounded-2xl bg-black/10 p-0 backdrop-blur-sm *:pointer-events-auto"
-            }
-          >
-            <div
-              className={twMerge(
-                "border-grey relative z-10 flex h-[48px] gap-[1px] overflow-hidden rounded-2xl border",
-                "*:size-[46px] *:rounded-none *:border-none",
-                "*:first:!rounded-l-2xl",
-                "*:last:!rounded-r-2xl",
-                isSearchOpen
-                  ? "@sm:rounded-r-none @sm:border-r-0 @sm:*:last:!rounded-r-none @sm:*:last:border-r-0"
-                  : "",
-              )}
-            >
-              {hasLayerTree && <LayerTreeButton />}
-              {hasPrint && <ExportMenuButton />}
-              {hasShare && <ShareMenuButton />}
-              {hasSearch && <SearchButton />}
-            </div>
-
-            {hasSearch && isSearchOpen && (
-              <div
-                className={twMerge(
-                  "absolute top-14 left-0 z-5 w-0 p-0 opacity-0 transition-all @sm:top-0 @sm:left-[calc(100%-47px)]",
-                  isSearchOpen ? "w-64 opacity-100" : "",
-                )}
-              >
-                <Search
-                  autofocus
-                  className={
-                    "@container @sm/main:gap-4 @sm/main:rounded-l-none @sm/main:rounded-r-2xl"
-                  }
-                />
-              </div>
-            )}
-          </div>
-        )}
-
-        {/* Desktop (>= lg) */}
-        {isOverlayOpen && (
-          <div
-            className={twMerge(
-              "flex w-0 flex-1 flex-col overflow-hidden rounded-2xl @lg:min-w-[320px]",
-            )}
-            style={{ containerType: "normal" }}
-          >
-            <Overlay
-              className={
-                "border-grey @container/overlay pointer-events-auto relative hidden flex-col overflow-hidden rounded-2xl border bg-white text-base shadow-lg @lg:flex"
-              }
-              ScrollableHandlerProps={scrollableHandlerProps}
-            >
-              <OverlayContent
-                hasDetails={hasDetails}
-                hasLayerTree={hasLayerTree}
-                hasPrint={hasPrint}
-                hasRealtime={hasRealtime}
-                hasSearch={false}
-                hasShare={hasShare}
-              />
-            </Overlay>
-          </div>
-        )}
-      </div>
-
-      {/* Mobile (< lg) */}
-      {isOverlayOpen && (
-        <Overlay
-          className={
-            "absolute bottom-0 z-20 flex max-h-[70%] min-h-[75px] w-full flex-col border-t bg-white @lg:hidden"
-          }
-          ScrollableHandlerProps={scrollableHandlerProps}
-        >
-          <OverlayContent
-            hasDetails={hasDetails}
-            hasLayerTree={hasLayerTree}
-            hasPrint={hasPrint}
-            hasRealtime={hasRealtime}
-            hasSearch={false}
-            hasShare={hasShare}
-          />
-        </Overlay>
-      )}
-    </div>
-  );
-}
-
-export default memo(MapLayout);

package/src/MapLayout/index.tsx

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

package/src/MapsetLayer/MapsetLayer.tsx

@@ -1,111 +0,0 @@
-import { MapsetLayer as MtbMapsetLayer } from "mobility-toolbox-js/ol";
-import { unByKey } from "ol/Observable";
-import { memo } from "preact/compat";
-import { useEffect, useMemo } from "preact/hooks";
-
-import { LAYER_NAME_MAPSET } from "../utils/constants";
-import useMapContext from "../utils/hooks/useMapContext";
-
-import type { MapsetLayerOptions } from "mobility-toolbox-js/ol";
-import type { Feature } from "ol";
-import type { EventTypes } from "ol/Observable";
-
-export const isFeatureOutsideZoomLimit = (feature, map) => {
-  const zoom = map?.getView()?.getZoom();
-  const minZoom = feature.get("minZoom");
-  const maxZoom = feature.get("maxZoom");
-  return minZoom > zoom || zoom > maxZoom;
-};
-
-function MapsetLayer(props?: Partial<MapsetLayerOptions>) {
-  const {
-    apikey,
-    baseLayer,
-    map,
-    mapsetplanid,
-    mapsettags,
-    mapsettenants,
-    mapsettimestamp,
-    mapseturl,
-    setMapsetLayer,
-  } = useMapContext();
-
-  const layer = useMemo(() => {
-    if (!baseLayer || !map) {
-      return null;
-    }
-
-    return new MtbMapsetLayer({
-      apiKey: apikey,
-      name: LAYER_NAME_MAPSET,
-      planId: mapsetplanid ?? undefined,
-      tags: mapsettags?.split(",").map((t) => {
-        return t.trim();
-      }),
-      tenants: mapsettenants?.split(",").map((t) => {
-        return t.trim();
-      }),
-      timestamp: mapsettimestamp, // Load only standard plan
-      url: mapseturl,
-      ...(props || {}),
-    });
-  }, [
-    baseLayer,
-    map,
-    apikey,
-    mapseturl,
-    mapsetplanid,
-    mapsettags,
-    mapsettenants,
-    mapsettimestamp,
-    props,
-  ]);
-
-  useEffect(() => {
-    setMapsetLayer?.(layer);
-  }, [layer, setMapsetLayer, map]);
-
-  useEffect(() => {
-    if (!map || !layer) {
-      return;
-    }
-    map.addLayer(layer);
-
-    return () => {
-      map.removeLayer(layer);
-    };
-  }, [map, layer]);
-
-  // Apply feature's minzoom and maxzoom to its style
-  // TODO should be done by the mapset layer itself
-  useEffect(() => {
-    let key = null;
-    if (layer) {
-      key = layer.on("updatefeatures" as EventTypes, () => {
-        const features = layer.getSource()?.getFeatures();
-        if (!features?.length) {
-          return;
-        }
-        features.forEach((feature) => {
-          const styleFunction = feature.getStyleFunction();
-          if (styleFunction) {
-            (feature as Feature).setStyle((feat, resolution) => {
-              if (isFeatureOutsideZoomLimit(feat, layer.getMapInternal())) {
-                return null;
-              }
-              return styleFunction(feature, resolution);
-            });
-          }
-        });
-      });
-    }
-
-    return () => {
-      unByKey(key);
-    };
-  }, [layer]);
-
-  return null;
-}
-
-export default memo(MapsetLayer);

package/src/MapsetLayer/index.tsx

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