@geops/rvf-mobility-web-component 0.1.58 → 0.1.60

package/package.json

@@ -2,7 +2,7 @@
   "name": "@geops/rvf-mobility-web-component",
   "license": "UNLICENSED",
   "description": "Web components for rvf in the domains of mobility and logistics.",
-  "version": "0.1.58",
+  "version": "0.1.60",
   "homepage": "https://rvf-mobility-web-component-geops.vercel.app/",
   "type": "module",
   "main": "index.js",

package/src/ExportMenu/ExportMenu.tsx

@@ -6,6 +6,7 @@ import Select from "../ui/Select";
 import { LAYER_PROP_IS_EXPORTING, MAX_EXTENT } from "../utils/constants";
 import exportPdf from "../utils/exportPdf";
 import getAllLayers from "../utils/getAllLayers";
+import useI18n from "../utils/hooks/useI18n";
 import useMapContext from "../utils/hooks/useMapContext";
 
 import type { HTMLAttributes, PreactDOMAttributes } from "preact";
@@ -25,6 +26,7 @@ function ExportMenu({ ...props }: ExportMenuButtonProps) {
   const selectId = useId();
   const [isExporting, setIsExporting] = useState(false);
   const [isExportingError, setIsExportingError] = useState(false);
+  const { t } = useI18n();
   return (
     <div {...props}>
       {/* <!-- Content --> */}
@@ -37,10 +39,10 @@ function ExportMenu({ ...props }: ExportMenuButtonProps) {
               return setUseMaxExtent(!useMaxExtent);
             }}
           />
-          <label htmlFor={checkboxId}>Ganze Region exportieren</label>
+          <label htmlFor={checkboxId}>{t("export_all_region")}</label>
         </div>
         <div className={"flex flex-wrap items-center gap-2"}>
-          <label htmlFor={selectId}>Format:</label>
+          <label htmlFor={selectId}>{t("export_format_title")}:</label>
           <Select
             className={"w-24"}
             id={selectId}
@@ -102,10 +104,10 @@ function ExportMenu({ ...props }: ExportMenuButtonProps) {
         >
           {/* eslint-disable-next-line no-nested-ternary */}
           {isExporting
-            ? "Exporting..."
+            ? t("exporting")
             : isExportingError
-              ? "Error"
-              : "Download"}
+              ? t("error")
+              : t("download")}
         </Button>
       </div>
     </div>

package/src/ExportMenuButton/ExportMenuButton.tsx

@@ -3,6 +3,7 @@ import { useCallback } from "preact/hooks";
 
 import Download from "../icons/Download";
 import IconButton from "../ui/IconButton";
+import useI18n from "../utils/hooks/useI18n";
 import useMapContext from "../utils/hooks/useMapContext";
 
 import type { IconButtonProps } from "../ui/IconButton/IconButton";
@@ -11,13 +12,19 @@ export type ExportMenuButtonProps = IconButtonProps;
 
 function ExportMenuButton({ ...props }: ExportMenuButtonProps) {
   const { isExportMenuOpen, setIsExportMenuOpen } = useMapContext();
+  const { t } = useI18n();
 
   const onClick = useCallback(() => {
     setIsExportMenuOpen(!isExportMenuOpen);
   }, [isExportMenuOpen, setIsExportMenuOpen]);
 
   return (
-    <IconButton {...props} onClick={onClick} selected={isExportMenuOpen}>
+    <IconButton
+      title={t("print_menu_title")}
+      {...props}
+      onClick={onClick}
+      selected={isExportMenuOpen}
+    >
       <Download />
     </IconButton>
   );

package/src/GeolocationButton/GeolocationButton.tsx

@@ -6,18 +6,19 @@ import { useEffect, useMemo } from "preact/hooks";
 
 import GeolocationIcon from "../icons/Geolocation";
 import IconButton from "../ui/IconButton";
+import useI18n from "../utils/hooks/useI18n";
 import useMapContext from "../utils/hooks/useMapContext";
 
-import type { JSX, PreactDOMAttributes } from "preact";
+import type { IconButtonProps } from "../ui/IconButton/IconButton";
 
-export type GeolocationButtonProps = JSX.HTMLAttributes<HTMLButtonElement> &
-  PreactDOMAttributes;
+export type GeolocationButtonProps = IconButtonProps;
 
 const TRACKING_ZOOM = 16;
 
 function GeolocationButton({ ...props }: GeolocationButtonProps) {
   const mapContext = useMapContext();
   const { isTracking, map, setIsTracking } = mapContext;
+  const { t } = useI18n();
 
   const geolocation = useMemo(() => {
     return new Geolocation();
@@ -62,6 +63,11 @@ function GeolocationButton({ ...props }: GeolocationButtonProps) {
       onClick={() => {
         return setIsTracking(!isTracking);
       }}
+      title={
+        isTracking
+          ? t("geolocation_button_title_off")
+          : t("geolocation_button_title_on")
+      }
       {...props}
       selected={isTracking}
     >

package/src/LayerTree/TreeItem/TreeItem.tsx

@@ -5,6 +5,7 @@ import ArrowDown from "../../icons/ArrowDown";
 import ArrowUp from "../../icons/ArrowUp";
 import minusGrey from "../../icons/Minus/minus.svg";
 import Checkbox from "../../ui/Checkbox";
+import useI18n from "../../utils/hooks/useI18n";
 // import RvfRadioButton from "../../RvfRadioButton";
 import { LayersTreeDispatchContext } from "../layersTreeContext";
 
@@ -46,6 +47,7 @@ function TreeItem({
   const dispatch = useContext(LayersTreeDispatchContext);
   const inputId = useId();
   const buttonId = useId();
+  const { t } = useI18n();
 
   useEffect(() => {
     if (isCollapsedOnControlClick) {
@@ -127,7 +129,7 @@ function TreeItem({
           className={`flex-1 cursor-pointer`}
           htmlFor={renderedLayers.length > 0 ? buttonId : inputId}
         >
-          {title}
+          {typeof title === "string" ? t(title) : title}
         </label>
         {renderedLayers.length > 0 && (
           <button

package/src/LayerTreeButton/LayerTreeButton.tsx

@@ -3,22 +3,28 @@ import { useCallback } from "preact/hooks";
 
 import Stack from "../icons/Stack";
 import IconButton from "../ui/IconButton";
+import useI18n from "../utils/hooks/useI18n";
 import useMapContext from "../utils/hooks/useMapContext";
 
-import type { HTMLAttributes, PreactDOMAttributes } from "preact";
+import type { IconButtonProps } from "../ui/IconButton/IconButton";
 
-export type LayerTreeButtonProps = HTMLAttributes<HTMLButtonElement> &
-  PreactDOMAttributes;
+export type LayerTreeButtonProps = IconButtonProps;
 
 function LayerTreeButton({ ...props }: LayerTreeButtonProps) {
   const { isLayerTreeOpen, setIsLayerTreeOpen } = useMapContext();
+  const { t } = useI18n();
 
   const onClick = useCallback(() => {
     setIsLayerTreeOpen(!isLayerTreeOpen);
   }, [isLayerTreeOpen, setIsLayerTreeOpen]);
 
   return (
-    <IconButton {...props} onClick={onClick} selected={isLayerTreeOpen}>
+    <IconButton
+      title={t("layertree_menu_title")}
+      {...props}
+      onClick={onClick}
+      selected={isLayerTreeOpen}
+    >
       <Stack />
     </IconButton>
   );

package/src/LayerTreeMenu/LayerTreeMenu.tsx

@@ -5,7 +5,7 @@ import { memo, useEffect, useMemo, useState } from "preact/compat";
 
 import LayerTree from "../LayerTree";
 import { SelectionType } from "../LayerTree/TreeItem";
-import { LAYERS_TITLES } from "../utils/constants";
+import useLayersConfig from "../utils/hooks/useLayersConfig";
 import useMapContext from "../utils/hooks/useMapContext";
 
 import type { Group } from "ol/layer";
@@ -13,6 +13,7 @@ import type BaseLayer from "ol/layer/Base";
 import type { HTMLAttributes, PreactDOMAttributes } from "preact";
 
 import type { LayerTreeProps } from "../LayerTree/LayerTree";
+import type { LayerConfig } from "../utils/hooks/useLayersConfig";
 
 export interface LayerTreeConfig {
   childItems: LayerTreeConfig[];
@@ -31,27 +32,36 @@ export type LayerTreeMenuProps = HTMLAttributes<HTMLDivElement> &
 const getConfigForLayer = (
   layer: BaseLayer,
   revision: number,
+  layersConfig: Record<string, LayerConfig> = {},
 ): LayerTreeConfig => {
+  const defaultTitle = layersConfig[layer.get("name")]?.title || "";
+  const customTitleFunction = layer.get("layerTreeTitle");
+  let title = defaultTitle;
+  if (typeof customTitleFunction === "function") {
+    title = customTitleFunction(title);
+  }
+
   return {
     childItems:
       (layer as Group)
         ?.getLayers?.()
         .getArray()
         .map((subLayer) => {
-          return getConfigForLayer(subLayer, revision);
+          return getConfigForLayer(subLayer, revision, layersConfig);
         }) || [],
     id: getUid(layer),
     isControlChecked: layer.getVisible(),
     layer,
     revision,
     selectionType: SelectionType.CHECKBOX,
-    title: layer.get("title") || LAYERS_TITLES[layer.get("name")],
+    title,
   };
 };
 
 function LayerTreeMenu(props: LayerTreeMenuProps) {
   const { map } = useMapContext();
   const [revision, setRevision] = useState(0);
+  const layersConfig = useLayersConfig();
 
   const layers: LayerTreeConfig[] = useMemo(() => {
     const config =
@@ -59,10 +69,10 @@ function LayerTreeMenu(props: LayerTreeMenuProps) {
         ?.getLayers()
         .getArray()
         .map((layer) => {
-          return getConfigForLayer(layer, revision);
+          return getConfigForLayer(layer, revision, layersConfig);
         }) || [];
     return config;
-  }, [map, revision]);
+  }, [layersConfig, map, revision]);
 
   // Force update of config when a layers`s visibility changes progammatically
   useEffect(() => {

package/src/LinesNetworkPlanLayer/LinesNetworkPlanLayer.tsx

@@ -15,10 +15,13 @@ function LinesNetworkPlanLayer(props: MaplibreStyleLayerOptions) {
       return null;
     }
     return new MaplibreStyleLayer({
-      layersFilter: ({ metadata }) => {
+      layersFilter: ({ metadata, source }) => {
         return (
+          metadata?.["geops.filter"] === "lnp" ||
+          metadata?.["general.filter"] === "lnp" ||
           metadata?.["rvf.filter"] === "netzplan_lines" ||
-          metadata?.["rvf.filter"] === "netzplan_stations"
+          metadata?.["rvf.filter"] === "netzplan_stations" ||
+          source === "network_plans"
         );
       },
       maplibreLayer: baseLayer,

package/src/MapDispatchEvents/MapDispatchEvents.tsx

@@ -64,6 +64,13 @@ function MapDispatchEvents({
     const json = selectedFeature
       ? geojson.writeFeatureObject(selectedFeature)
       : null;
+
+    // When the ol feature is a cluster
+    if (json?.properties?.features?.length > 0) {
+      json.properties.features = json.properties.features.map((feature) => {
+        return geojson.writeFeatureObject(feature);
+      });
+    }
     dispatchEvent(node, "mwc:selectedfeature", json);
   }, [node, selectedFeature]);
 

package/src/MapLayout/MapLayout.tsx

@@ -0,0 +1,176 @@
+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 *:pointer-events-auto">
+        {hasToolbar && (
+          <div
+            className={
+              "relative z-10 w-fit rounded-2xl bg-black/10 p-0 backdrop-blur-sm"
+            }
+          >
+            <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"
+                  : "",
+              )}
+            >
+              {hasPrint && <ExportMenuButton />}
+              {hasShare && <ShareMenuButton />}
+              {hasLayerTree && <LayerTreeButton />}
+              {hasSearch && <SearchButton />}
+            </div>
+
+            {hasSearch && (
+              <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
+                  className={
+                    "border-grey @container m-0 h-[48px] gap-4 rounded-2xl border p-2 px-4 text-base @sm/main:rounded-l-none @sm/main:rounded-r-2xl"
+                  }
+                  // inputClassName="h-6 text-base"
+                  inputContainerClassName="border-none"
+                  resultClassName="text-base  **:hover:cursor-pointer p-2"
+                  resultsContainerClassName="@container rounded-b-2xl max-h-[200px] overflow-y-auto border border-t-0 "
+                  withResultsClassName="text-base !rounded-b-none"
+                />
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* Desktop (>= lg) */}
+        {isOverlayOpen && (
+          <div
+            className={twMerge(
+              "flex w-0 flex-1 flex-col overflow-hidden rounded-2xl @lg:min-w-80",
+            )}
+            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

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