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

package/src/Map/Map.tsx

@@ -1,9 +1,10 @@
-import { Map as OlMap } from "ol";
+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, useRef } from "preact/hooks";
+import { useEffect, useMemo, useRef } from "preact/hooks";
 
 import useMapContext from "../utils/hooks/useMapContext";
 
@@ -12,19 +13,51 @@ export type RealtimeMapProps = JSX.HTMLAttributes<HTMLDivElement> &
 
 function Map({ children, ...props }: RealtimeMapProps) {
   const mapRef = useRef();
-  const {
-    center = "831634,5933959",
-    map,
-    maxzoom,
-    minzoom,
-    setMap,
-    zoom = "13",
-  } = useMapContext();
+  const { center, extent, map, maxextent, maxzoom, minzoom, setMap, zoom } =
+    useMapContext();
+
+  const view = useMemo(() => {
+    if (!maxextent) {
+      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: [], target: mapRef.current });
+      newMap = new OlMap({
+        controls: [],
+        // pixelRatio: 3,
+        target: mapRef.current,
+      });
       setMap(newMap);
     }
 
@@ -35,7 +68,19 @@ function Map({ children, ...props }: RealtimeMapProps) {
   }, [setMap]);
 
   useEffect(() => {
-    if (!map) {
+    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) => {

package/src/MobilityMap/MobilityMap.tsx

@@ -11,7 +11,7 @@ import {
 } from "mobility-toolbox-js/types";
 import { Map as OlMap } from "ol";
 import { memo } from "preact/compat";
-import { useEffect, useMemo, useState } from "preact/hooks";
+import { useEffect, useMemo, useRef, useState } from "preact/hooks";
 
 import BaseLayer from "../BaseLayer";
 import Copyright from "../Copyright";
@@ -41,8 +41,10 @@ export interface MobilityMapProps {
   apikey?: string;
   baselayer?: string;
   center?: string;
+  extent?: string;
   geolocation?: string;
   mapsurl?: string;
+  maxextent?: string;
   maxzoom?: string;
   minzoom?: string;
   mots?: string;
@@ -63,8 +65,10 @@ 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,
@@ -80,6 +84,7 @@ function MobilityMap({
   tenant = null,
   zoom = "13",
 }: MobilityMapProps) {
+  const eventNodeRef = useRef<HTMLDivElement>();
   const [baseLayer, setBaseLayer] = useState<MaplibreLayer>();
   const [isFollowing, setIsFollowing] = useState(false);
   const [isTracking, setIsTracking] = useState(false);
@@ -93,7 +98,7 @@ function MobilityMap({
 
   // TODO: this should be removed. The parent application should be responsible to do this
   // or we should find something that fit more usecases
-  const { x, y, z } = useUpdatePermalink(map, permalink === "true");
+  useUpdatePermalink(map, permalink === "true");
 
   const mapContextValue = useMemo(() => {
     return {
@@ -102,11 +107,13 @@ function MobilityMap({
       baselayer,
       baseLayer,
       center,
+      extent,
       geolocation,
       isFollowing,
       isTracking,
       map,
       mapsurl,
+      maxextent,
       maxzoom,
       minzoom,
       mots,
@@ -141,11 +148,13 @@ function MobilityMap({
     baselayer,
     baseLayer,
     center,
+    extent,
     geolocation,
     isFollowing,
     isTracking,
     map,
     mapsurl,
+    maxextent,
     maxzoom,
     minzoom,
     mots,
@@ -167,12 +176,14 @@ function MobilityMap({
   ]);
 
   useEffect(() => {
-    dispatchEvent(
+    eventNodeRef.current?.dispatchEvent(
       new MobilityEvent<MobilityMapProps>("mwc:attribute", {
         baselayer,
-        center: x && y ? `${x},${y}` : center,
+        center,
+        extent,
         geolocation,
         mapsurl,
+        maxextent,
         maxzoom,
         minzoom,
         mots,
@@ -184,14 +195,16 @@ function MobilityMap({
         realtimeurl,
         search,
         tenant,
-        zoom: z || zoom,
+        zoom,
       }),
     );
   }, [
     baselayer,
     center,
+    extent,
     geolocation,
     mapsurl,
+    maxextent,
     maxzoom,
     minzoom,
     mots,
@@ -204,9 +217,6 @@ function MobilityMap({
     search,
     tenant,
     zoom,
-    x,
-    y,
-    z,
   ]);
 
   return (
@@ -214,7 +224,10 @@ function MobilityMap({
       <style>{tailwind}</style>
       <style>{style}</style>
       <MapContext.Provider value={mapContextValue}>
-        <div className="relative size-full border font-sans @container/main">
+        <div
+          className="relative size-full border font-sans @container/main"
+          ref={eventNodeRef}
+        >
           <div className="relative flex size-full flex-col @lg/main:flex-row-reverse">
             <Map className="relative flex-1 overflow-visible ">
               <BaseLayer />

package/src/MobilityMap/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/RealtimeLayer/RealtimeLayer.tsx

@@ -16,7 +16,7 @@ import useMapContext from "../utils/hooks/useMapContext";
 
 const TRACKING_ZOOM = 16;
 
-export type RealtimeLayerProps = RealtimeLayerOptions;
+export type RealtimeLayerProps = RealtimeLayerOptions & Record<string, unknown>;
 
 function RealtimeLayer(props: RealtimeLayerProps) {
   const {

package/src/RvfButton/RvfButton.tsx

@@ -0,0 +1,45 @@
+import type { JSX, PreactDOMAttributes } from "preact";
+
+import { memo, useMemo } from "preact/compat";
+
+export type RvfButtonProps = {
+  selected?: boolean;
+  theme?: "primary" | "secondary";
+} & JSX.ButtonHTMLAttributes<HTMLButtonElement> &
+  PreactDOMAttributes;
+
+const baseClasses =
+  "flex h-8 md:h-9 lg:h-10 px-5 py-1.75 max-h-button items-center justify-center rounded-full border";
+
+export const themes = {
+  primary: {
+    classes:
+      "border-red bg-red text-white disabled:bg-lightgrey disabled:border-lightgrey hover:bg-darkred hover:border-darkred  active:bg-lightred active:border-lightred",
+    selectedClasses: "bg-darkred border-darkred",
+  },
+  secondary: {
+    classes:
+      "border border-current bg-white text-grey hover:text-red disabled:text-lightgrey active:text-lightred",
+    selectedClasses: "text-red",
+  },
+};
+
+function RvfButton({
+  children,
+  className,
+  selected = false,
+  theme = "secondary",
+  ...props
+}: RvfButtonProps) {
+  const classes = useMemo(() => {
+    return `${baseClasses} ${themes[theme].classes}  ${selected ? themes[theme].selectedClasses : ""} ${className || ""}`;
+  }, [className, selected, theme]);
+
+  return (
+    <button className={classes} {...props}>
+      {children}
+    </button>
+  );
+}
+
+export default memo(RvfButton);

package/src/RvfButton/index.tsx

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

package/src/RvfExportMenu/RvfExportMenu.tsx

@@ -0,0 +1,95 @@
+import type { JSX, PreactDOMAttributes } from "preact";
+
+import { memo, useId, useState } from "preact/compat";
+
+import Cancel from "../icons/Cancel";
+import RvfButton from "../RvfButton";
+import RvfIconButton from "../RvfIconButton";
+import exportPdf from "../utils/exportPdf";
+import useMapContext from "../utils/hooks/useMapContext";
+import useRvfContext from "../utils/hooks/useRvfContext";
+
+export type RvfExportMenuButtonProps = JSX.HTMLAttributes<HTMLDivElement> &
+  PreactDOMAttributes;
+
+const formats = ["A4", "A1", "A3", "A0"];
+
+function RvfExportMenu({ ...props }: RvfExportMenuButtonProps) {
+  const { setIsExportMenuOpen } = useRvfContext();
+  const { map } = useMapContext();
+  const [useMaxExtent, setUseMaxExtent] = useState(false);
+  const [format, setFormat] = useState<string>(formats[0]);
+  const checkboxId = useId();
+  const selectId = useId();
+  const [isExporting, setIsExporting] = useState(false);
+  const [isExportingError, setIsExportingError] = useState(false);
+  return (
+    <div {...props}>
+      <div className={"flex h-full flex-col gap-2 p-2"}>
+        {/* <!-- Header --> */}
+        <div className={"flex flex-row items-center justify-between gap-2"}>
+          <h1>Export </h1>
+          <RvfIconButton
+            onClick={() => {
+              setIsExportMenuOpen(false);
+            }}
+          >
+            <Cancel />
+          </RvfIconButton>
+        </div>
+        {/* <!-- Content --> */}
+        <div className="flex flex-1 flex-col gap-2">
+          <div className={"flex gap-2"}>
+            <input
+              checked={useMaxExtent}
+              id={checkboxId}
+              onChange={() => {
+                setUseMaxExtent(!useMaxExtent);
+              }}
+              type="checkbox"
+            />
+            <label htmlFor={checkboxId}>Ganze Region exportieren</label>
+          </div>
+          <div className={"flex gap-2"}>
+            <label htmlFor={selectId}>Format:</label>
+            <select
+              className={"w-24"}
+              id={selectId}
+              onChange={(evt) => {
+                setFormat((evt.target as HTMLSelectElement).value);
+              }}
+              value={format}
+            >
+              {formats.map((format) => {
+                return <option key={format}>{format}</option>;
+              })}
+            </select>
+          </div>
+        </div>
+        {/* <!-- Footer --> */}
+        <div>
+          <RvfButton
+            disabled={isExporting}
+            onClick={async () => {
+              setIsExportingError(false);
+              setIsExporting(true);
+              const result = await exportPdf(map, { format }, { useMaxExtent });
+              setTimeout(() => {
+                setIsExporting(false);
+                setIsExportingError(!result);
+              }, 1000);
+            }}
+          >
+            {isExporting
+              ? "Exporting..."
+              : isExportingError
+                ? "Error"
+                : "Download"}
+          </RvfButton>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default memo(RvfExportMenu);

package/src/RvfExportMenu/index.tsx

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

package/src/RvfExportMenuButton/RvfExportMenuButton.tsx

@@ -0,0 +1,27 @@
+import type { JSX, PreactDOMAttributes } from "preact";
+
+import { memo } from "preact/compat";
+import { useCallback } from "preact/hooks";
+
+import Download from "../icons/Download";
+import RvfIconButton from "../RvfIconButton";
+import useRvfContext from "../utils/hooks/useRvfContext";
+
+export type RvfExportMenuButtonProps = JSX.HTMLAttributes<HTMLButtonElement> &
+  PreactDOMAttributes;
+
+function RvfExportMenuButton({ ...props }: RvfExportMenuButtonProps) {
+  const { isExportMenuOpen, setIsExportMenuOpen } = useRvfContext();
+
+  const onClick = useCallback(() => {
+    setIsExportMenuOpen(!isExportMenuOpen);
+  }, [isExportMenuOpen, setIsExportMenuOpen]);
+
+  return (
+    <RvfIconButton {...props} onClick={onClick} selected={isExportMenuOpen}>
+      <Download />
+    </RvfIconButton>
+  );
+}
+
+export default memo(RvfExportMenuButton);

package/src/RvfExportMenuButton/index.tsx

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

package/src/RvfFeatureDetails/RvfFeatureDetails.tsx

@@ -0,0 +1,29 @@
+import type { JSX, PreactDOMAttributes } from "preact";
+
+import { memo } from "preact/compat";
+
+import useRvfContext from "../utils/hooks/useRvfContext";
+
+export type RvfFeatureDetailsProps = JSX.HTMLAttributes<HTMLDivElement> &
+  PreactDOMAttributes;
+
+function RvfFeatureDetails(props: RvfFeatureDetailsProps) {
+  const { selectedFeature } = useRvfContext();
+
+  return (
+    <div {...props}>
+      {Object.entries(selectedFeature.getProperties()).map(([key, value]) => {
+        return (
+          <div className="flex gap-2" key={key}>
+            <span>
+              <b>{key}:</b>
+            </span>
+            <div>{value}</div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+export default memo(RvfFeatureDetails);

package/src/RvfFeatureDetails/index.tsx

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

package/src/RvfIconButton/RvfIconButton.tsx

@@ -0,0 +1,35 @@
+import type { JSX, PreactDOMAttributes } from "preact";
+
+import { memo, SVGProps, useMemo } from "preact/compat";
+
+import { RvfButtonProps, themes } from "../RvfButton/RvfButton";
+
+export type RvfIconButtonProps = {
+  Icon?: (props: SVGProps<SVGSVGElement>) => preact.JSX.Element;
+} & JSX.ButtonHTMLAttributes<HTMLButtonElement> &
+  PreactDOMAttributes &
+  RvfButtonProps;
+
+const baseClasses =
+  "flex h-8 w-8 md:h-9 md:w-9 lg:w-10 lg:h-10 p-1.75 max-w-button max-h-button items-center justify-center rounded-full border";
+
+function RvfIconButton({
+  children,
+  className,
+  Icon,
+  selected = false,
+  theme = "secondary",
+  ...props
+}: RvfIconButtonProps) {
+  const classes = useMemo(() => {
+    return `${baseClasses} ${themes[theme].classes}  ${selected ? themes[theme].selectedClasses : ""} ${className || ""}`;
+  }, [className, selected, theme]);
+
+  return (
+    <button className={classes} {...props}>
+      {children || <Icon height={"100%"} width={"100%"} />}
+    </button>
+  );
+}
+
+export default memo(RvfIconButton);

package/src/RvfIconButton/index.tsx

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