@geops/rvf-mobility-web-component 0.1.64 → 0.1.65

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.64",
+  "version": "0.1.65",
   "homepage": "https://rvf-mobility-web-component-geops.vercel.app/",
   "type": "module",
   "main": "index.js",
@@ -11,23 +11,23 @@
     "graphql-request": "^7.1.2",
     "jspdf": "^3.0.3",
     "lodash.debounce": "^4.0.8",
-    "maplibre-gl": "^5.8.0",
-    "mobility-toolbox-js": "3.4.4-beta.0",
+    "maplibre-gl": "^5.9.0",
+    "mobility-toolbox-js": "3.4.4",
     "ol": "^10.6.1",
     "preact": "^10.27.2",
     "preact-custom-element": "^4.5.1",
     "react": "npm:@preact/compat@^18.3.1",
     "react-dom": "npm:@preact/compat@^18.3.1",
     "react-icons": "^5.5.0",
-    "react-spatial": "^2.0.0",
+    "react-spatial": "^2.0.1",
     "rosetta": "^1.1.0"
   },
   "devDependencies": {
     "@commitlint/cli": "^20.1.0",
     "@commitlint/config-conventional": "^20.0.0",
-    "@eslint/js": "^9.36.0",
-    "@geops/eslint-config-react": "^1.5.0",
-    "@tailwindcss/cli": "^4.1.13",
+    "@eslint/js": "^9.37.0",
+    "@geops/eslint-config-react": "^1.6.0-beta.1",
+    "@tailwindcss/cli": "^4.1.14",
     "@tailwindcss/container-queries": "^0.1.1",
     "@testing-library/preact": "^3.2.4",
     "@types/geojson": "^7946.0.16",
@@ -37,7 +37,7 @@
     "concurrently": "^9.2.1",
     "esbuild": "^0.25.10",
     "esbuild-sass-plugin": "^3.3.1",
-    "eslint": "^9.36.0",
+    "eslint": "^9.37.0",
     "eslint-plugin-tailwindcss": "^4.0.0-beta.0",
     "fixpack": "^4.0.0",
     "generact": "^0.4.0",
@@ -46,16 +46,16 @@
     "jest-canvas-mock": "^2.5.2",
     "jest-environment-jsdom": "^30.2.0",
     "jest-preset-preact": "^4.1.1",
-    "next": "15.5.2",
+    "next": "15.5.5",
     "preact-render-to-string": "^6.6.2",
     "prettier": "^3.6.2",
     "prettier-plugin-tailwindcss": "^0.6.14",
     "standard-version": "^9.5.0",
     "tailwind-merge": "^3.3.1",
-    "tailwindcss": "^4.1.13",
-    "ts-jest": "^29.4.4",
+    "tailwindcss": "^4.1.14",
+    "ts-jest": "^29.4.5",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.45.0"
+    "typescript-eslint": "^8.46.1"
   },
   "scripts": {
     "build": "yarn build:css && yarn build:js && cp index*.js* doc/public/",

package/src/BaseLayer/BaseLayer.tsx

@@ -9,7 +9,13 @@ import type { MaplibreLayerOptions } from "mobility-toolbox-js/ol/layers/Maplibr
 export type BaseLayerProps = MaplibreLayerOptions;
 
 function BaseLayer(props: BaseLayerProps) {
-  const { apikey, baselayer, map, mapsurl, setBaseLayer } = useMapContext();
+  const { apikey, baselayer, hasPrint, hasShare, map, mapsurl, setBaseLayer } =
+    useMapContext();
+
+  // For printing purpose and bild saving purpose otherwise can be false.
+  const preserveDrawingBuffer = useMemo(() => {
+    return hasShare || hasPrint;
+  }, [hasShare, hasPrint]);
 
   const layer = useMemo(() => {
     if (!baselayer || !apikey) {
@@ -20,9 +26,19 @@ function BaseLayer(props: BaseLayerProps) {
       style: baselayer,
       url: mapsurl,
       zIndex: 0,
+
       ...(props || {}),
+      mapLibreOptions: {
+        // For printing purpose
+        maxCanvasSize: [20000, 20000], // remove 4096 limitations
+        ...(props?.mapLibreOptions || {}),
+        canvasContextAttributes: {
+          preserveDrawingBuffer: preserveDrawingBuffer,
+          ...(props?.mapLibreOptions?.canvasContextAttributes || {}),
+        },
+      },
     });
-  }, [baselayer, apikey, props, mapsurl]);
+  }, [baselayer, apikey, mapsurl, props, preserveDrawingBuffer]);
 
   useEffect(() => {
     setBaseLayer(layer);

package/src/Copyright/Copyright.tsx

@@ -7,11 +7,11 @@ import useMapContext from "../utils/hooks/useMapContext";
 import style from "./index.css";
 
 import type { CopyrightControlOptions } from "mobility-toolbox-js/ol/controls/CopyrightControl";
-import type { JSX, PreactDOMAttributes } from "preact";
+import type { HTMLAttributes, PreactDOMAttributes } from "preact";
 
 export type CopyrightProps = {
   options?: CopyrightControlOptions;
-} & JSX.HTMLAttributes<HTMLDivElement> &
+} & HTMLAttributes<HTMLDivElement> &
   PreactDOMAttributes;
 
 function Copyright({ options, ...props }: CopyrightProps) {

package/src/Copyright/index.tsx

@@ -1 +1 @@
-export { default } from "./Copyright";
+export { default } from "../RvfCopyright";

package/src/LinesNetworkPlanLayerHighlight/LinesNetworkPlanLayerHighlight.tsx

@@ -33,6 +33,7 @@ function LinesNetworkPlanLayerHighlight(props: MaplibreStyleLayerOptions) {
         );
       },
       maplibreLayer: baseLayer,
+      visible: false,
       ...(props || {}),
     });
   }, [baseLayer, props]);

package/src/Map/Map.tsx

@@ -3,6 +3,7 @@ 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
@@ -10,6 +11,8 @@ 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;
 
@@ -18,6 +21,10 @@ function Map({ children, ...props }: RealtimeMapProps) {
   const { center, extent, map, maxextent, maxzoom, minzoom, setMap, zoom } =
     useMapContext();
 
+  const propsFromPermalinkRef = useRef<null | Partial<MobilityMapProps>>(
+    useInitialPermalink(),
+  );
+
   const view = useMemo(() => {
     if (!maxextent) {
       if (maxextent === "") {
@@ -67,7 +74,7 @@ function Map({ children, ...props }: RealtimeMapProps) {
     }
 
     return () => {
-      newMap?.setTarget();
+      newMap?.setTarget(undefined);
       setMap();
     };
   }, [setMap]);
@@ -127,6 +134,25 @@ function Map({ children, ...props }: RealtimeMapProps) {
     }
   }, [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>

package/src/MapLayout/MapLayout.tsx

@@ -128,7 +128,7 @@ function MapLayout({
         {isOverlayOpen && (
           <div
             className={twMerge(
-              "flex w-0 flex-1 flex-col overflow-hidden rounded-2xl @lg:min-w-80",
+              "flex w-0 flex-1 flex-col overflow-hidden rounded-2xl @lg:min-w-[320px]",
             )}
             style={{ containerType: "normal" }}
           >

package/src/MapLayout/index.tsx

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

package/src/MobilityMap/MobilityMap.tsx

@@ -16,7 +16,6 @@ import SingleClickListener from "../SingleClickListener";
 import StationsLayer from "../StationsLayer";
 import { I18nContext } from "../utils/hooks/useI18n";
 import useInitialLayersVisiblity from "../utils/hooks/useInitialLayersVisiblity";
-import useInitialPermalink from "../utils/hooks/useInitialPermalink";
 import { MapContext } from "../utils/hooks/useMapContext";
 import i18n from "../utils/i18n";
 import WindowMessageListener from "../WindowMessageListener";
@@ -103,10 +102,10 @@ function MobilityMap(props: MobilityMapProps) {
   const [previewNotifications, setPreviewNotifications] =
     useState<SituationType[]>();
 
-  const { lang, layers, lines } = props;
+  const { lang, layers, lines, permalinktemplate } = props;
 
   // Apply initial visibility of layers
-  useInitialLayersVisiblity(map, layers);
+  useInitialLayersVisiblity(map, layers, permalinktemplate);
 
   // Object representing all the web-component attributes and the map context values.
   const mapContextValue = useMemo(() => {
@@ -329,6 +328,8 @@ function MobilityMap(props: MobilityMapProps) {
   );
 }
 
+const MemoMobilityMap = memo(MobilityMap);
+
 // We creates a wrapper to inject the default props values from MobilityMapAttributes.
 const defaultProps: Partial<MobilityMapProps> = {};
 Object.entries(MobilityMapAttributes).forEach(([key]) => {
@@ -336,14 +337,7 @@ Object.entries(MobilityMapAttributes).forEach(([key]) => {
 });
 
 function MobilityMapWithDefaultProps(props: MobilityMapProps) {
-  // Apply initial value from permalink, only x,y,z
-  const { permalinktemplate } = props;
-  const { permalinktemplate: defaultPermalinkTemplate } = defaultProps;
-  const propsFromPermalink = useInitialPermalink(
-    permalinktemplate || defaultPermalinkTemplate,
-  );
-
-  return <MobilityMap {...defaultProps} {...props} {...propsFromPermalink} />;
+  return <MemoMobilityMap {...defaultProps} {...props} />;
 }
 
 export default memo(MobilityMapWithDefaultProps);

package/src/MobilityMap/MobilityMapAttributes.ts

@@ -173,9 +173,11 @@ where:
   mainlink: {
     description:
       "A link displayed on bottom left of the map.  The link can be a template, for example  you can use {{x}} {{y}} {{z}} to insert the current position of the map in the url.<br/>Ex: http://mywebsite/mypage#map/{{x}}/{{y}}/{{z}}.",
+    public: true,
   },
   mainlinktitle: {
     description: "A title for the mainlink, used as tooltip.",
+    public: true,
   },
   mapset: {
     defaultValue: "false",
@@ -184,6 +186,7 @@ where:
     type: "boolean",
   },
   mapsetbbox: {
+    defaultValue: MAX_EXTENT.join(","),
     description:
       "The BBOX to constrain the boundary of the mapset layer in EPSG:3857 coordinates. Mandatory for mapset layer. <br/>Ex: 831634,5933959,940649,6173660 .",
     public: false,
@@ -193,9 +196,9 @@ where:
     public: false,
   },
   mapsettenants: {
-    defaultValue: "geopstest",
+    defaultValue: "rvf",
     description: `The ${geopsMapsetApiLink} tenant to get the mapset from.`,
-    public: true,
+    public: false,
   },
   mapseturl: {
     defaultValue: "https://editor.mapset.io/api/v1",
@@ -252,14 +255,14 @@ where:
   permalink: {
     defaultValue: "false",
     description:
-      "Update some url parameters x,y,z,layers to the current window location. These parameters are used to store the current state of the map. They will be used on page load to configure the web-component.",
-    public: false,
+      "if true, the current browser window url will be updated automatically with the parameters defined in the `permalinktemplate` attribute.",
+    public: true,
     type: "boolean",
   },
   permalinktemplate: {
     defaultValue: "#map/{{x}}/{{y}}/{{z}}",
     description: `A template string to read the current browser url. Hash (starting with #) and URL search parameters (starting with ?) are supported.<br/>
-     The template supports {{x}}, {{y}}, {{z}} variables.<br/> 
+     The template supports {{x}}, {{y}}, {{z}} and {{layers}} variables.<br/>
      Ex: "?x={{x}}&y={{y}}&z={{z}}" or "#map/{{x}}/{{y}}/{{z}}" .`,
     public: true,
   },

package/src/NotificationDetails/NotificationDetails.tsx

@@ -235,65 +235,83 @@ function NotificationDetails({
                     );
                   },
                 )}
-                <div
-                  className="mt-4"
-                  dangerouslySetInnerHTML={{
-                    __html:
-                      textualContent?.description || t("no_details_available"),
-                  }}
-                />
-                {!!textualContentMultilingual?.infoLinks?.length && (
-                  <div className="mt-4">
-                    {textualContentMultilingual.infoLinks.map(
-                      ({ label, uri }) => {
-                        const title = label[locale()] || label.de || uri;
-                        return (
-                          <Link href={uri} key={uri} title={title}>
-                            {title}
-                          </Link>
-                        );
-                      },
-                    )}
-                  </div>
-                )}
-                {!!pubLines?.length && (
-                  <div className="mt-4">
-                    <div className={"font-bold"}>{t("affected_lines")}:</div>
-                    <div className={"flex flex-wrap gap-1 text-sm"}>
-                      {pubLines?.map((name) => {
-                        return (
-                          <div
-                            className={
-                              "rounded-md bg-black px-2 py-1 font-bold text-white"
-                            }
-                            key={name}
-                          >
-                            {name}
-                          </div>
-                        );
-                      })}
+                <div className={"my-4 flex flex-col gap-4"}>
+                  <div
+                    dangerouslySetInnerHTML={{
+                      __html:
+                        textualContent?.description ||
+                        t("no_details_available"),
+                    }}
+                  />
+                  {!!textualContentMultilingual?.images?.length && (
+                    <div className="flex flex-wrap gap-2">
+                      {textualContentMultilingual.images.map(
+                        ({ image: { absoluteUrl, label } }) => {
+                          return (
+                            <img
+                              alt={label}
+                              key={absoluteUrl + label}
+                              src={absoluteUrl}
+                              title={label}
+                            />
+                          );
+                        },
+                      )}
                     </div>
-                  </div>
-                )}
-                {!!stations?.length && (
-                  <div className="mt-4">
-                    <div className={"font-bold"}>{t("affected_stops")}:</div>
-                    <div className={"flex flex-wrap gap-1 text-sm"}>
-                      {stations.map((name) => {
-                        return (
-                          <div
-                            className={
-                              "rounded-md bg-black px-2 py-1 font-bold text-white"
-                            }
-                            key={name}
-                          >
-                            {name}
-                          </div>
-                        );
-                      })}
+                  )}
+                  {!!textualContentMultilingual?.infoLinks?.length && (
+                    <div>
+                      {textualContentMultilingual.infoLinks.map(
+                        ({ label, uri }) => {
+                          const title = label[locale()] || label.de || uri;
+                          return (
+                            <Link href={uri} key={uri} title={title}>
+                              {title}
+                            </Link>
+                          );
+                        },
+                      )}
                     </div>
-                  </div>
-                )}
+                  )}
+                  {!!pubLines?.length && (
+                    <div>
+                      <div className={"font-bold"}>{t("affected_lines")}:</div>
+                      <div className={"flex flex-wrap gap-1 text-sm"}>
+                        {pubLines?.map((name) => {
+                          return (
+                            <div
+                              className={
+                                "rounded-md bg-black px-2 py-1 font-bold text-white"
+                              }
+                              key={name}
+                            >
+                              {name}
+                            </div>
+                          );
+                        })}
+                      </div>
+                    </div>
+                  )}
+                  {!!stations?.length && (
+                    <div>
+                      <div className={"font-bold"}>{t("affected_stops")}:</div>
+                      <div className={"flex flex-wrap gap-1 text-sm"}>
+                        {stations.map((name) => {
+                          return (
+                            <div
+                              className={
+                                "rounded-md bg-black px-2 py-1 font-bold text-white"
+                              }
+                              key={name}
+                            >
+                              {name}
+                            </div>
+                          );
+                        })}
+                      </div>
+                    </div>
+                  )}
+                </div>
               </div>
             );
           },

package/src/Permalink/Permalink.tsx

@@ -6,8 +6,8 @@ import { useCallback, useEffect } from "preact/hooks";
 
 import { LAYER_PROP_IS_EXPORTING } from "../utils/constants";
 import getPermalinkParameters from "../utils/getPermalinkParameters";
-// import getLayersAsFlatArray from "../getLayersAsFlatArray";
 import useMapContext from "../utils/hooks/useMapContext";
+import usePermalink from "../utils/hooks/usePermalink";
 
 import type { Map } from "ol";
 import type { EventsKey } from "ol/events";
@@ -20,6 +20,9 @@ import type { EventsKey } from "ol/events";
 const Permalink = ({ replaceState = false }: { replaceState?: boolean }) => {
   const { map, setPermalinkUrlSearchParams } = useMapContext();
 
+  const permalink = usePermalink();
+
+  // Update the search parameters when the map moves
   const updatePermalink = useCallback(
     (currentMap: Map) => {
       // No update when exporting
@@ -28,15 +31,23 @@ const Permalink = ({ replaceState = false }: { replaceState?: boolean }) => {
       }
       const currentUrlParams = new URLSearchParams(window.location.search);
       const urlParams = getPermalinkParameters(currentMap, currentUrlParams);
-      urlParams.set("permalink", "true");
       setPermalinkUrlSearchParams(urlParams);
-      if (replaceState) {
-        window.history.replaceState(null, null, `?${urlParams.toString()}`);
-      }
     },
-    [map, replaceState, setPermalinkUrlSearchParams],
+    [map, setPermalinkUrlSearchParams],
   );
 
+  // Replace the window url when permalink changes
+  useEffect(() => {
+    if (
+      replaceState &&
+      permalink &&
+      permalink !== window.location.href &&
+      !permalink.includes(encodeURIComponent("{{"))
+    ) {
+      window.history.replaceState(null, null, permalink);
+    }
+  }, [map, permalink, replaceState]);
+
   useEffect(() => {
     let moveEndKey: EventsKey;
     let loadEndKey: EventsKey;

package/src/PermalinkInput/PermalinkInput.tsx

@@ -2,6 +2,7 @@ import { memo } from "preact/compat";
 
 import InputCopy from "../ui/InputCopy";
 import useI18n from "../utils/hooks/useI18n";
+import usePermalink from "../utils/hooks/usePermalink";
 
 import type { HTMLAttributes, PreactDOMAttributes } from "preact";
 
@@ -19,9 +20,11 @@ function PermalinkInput({
   ...props
 }: PermalinkInputProps) {
   const { t } = useI18n();
+  const permalink = usePermalink();
+
   return (
     <div {...props}>
-      <InputCopy value={window?.location.href} {...inputProps} />
+      <InputCopy value={permalink} {...inputProps} readonly={true} />
       <p className="py-2">{t("permalink_input_hint")}</p>
     </div>
   );

package/src/RealtimeLayer/index.tsx

@@ -1 +1 @@
-export { default } from "./RealtimeLayer";
+export { default } from "../RvfRealtimeLayer";

package/src/RvfCopyright/RvfCopyright.tsx

@@ -0,0 +1,32 @@
+import Copyright from "../Copyright/Copyright";
+
+import type { CopyrightProps } from "../Copyright/Copyright";
+
+const format = (copyrights) => {
+  const newCopyrights = [];
+  let alreadyAGeopsLink = false;
+  copyrights.forEach((copyright) => {
+    if (/geops/i.test(copyright)) {
+      // Hack until all geOps tiles are the same
+      // Currently there is some geops.com or geops.ch links
+      if (!alreadyAGeopsLink) {
+        alreadyAGeopsLink = true;
+        newCopyrights.push(copyright);
+      }
+    } else if (!/(sbb|rvf)/i.test(copyright)) {
+      newCopyrights.push(copyright);
+    }
+  });
+
+  return newCopyrights.join(" | ");
+};
+
+const options = {
+  format,
+};
+
+function RvfCopyright(props: CopyrightProps) {
+  return <Copyright options={options} {...props} />;
+}
+
+export default RvfCopyright;

package/src/RvfCopyright/index.tsx

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

package/src/RvfInputCopy/RvfInputCopy.tsx

@@ -1,37 +1,47 @@
-import { useRef, useState } from "preact/hooks";
+import { useId, useState } from "preact/hooks";
 
 import Copy from "../icons/Copy";
 import IconButton from "../ui/IconButton";
+import useI18n from "../utils/hooks/useI18n";
 
 import type { JSX, PreactDOMAttributes } from "preact";
 
 function RvfInputCopy(props: JSX.InputHTMLAttributes & PreactDOMAttributes) {
+  const { t } = useI18n();
   const [positionTooltip, setPositionTooltip] = useState<DOMRect>();
   const [isTooptipShowed, setIsTooltipShowed] = useState(false);
-  const inputRef = useRef(null);
+  const inputId = useId();
+  const [node, setNode] = useState<HTMLDivElement | null>(null);
 
   const handleCopyClick = (event) => {
     setPositionTooltip(event.currentTarget.getBoundingClientRect());
-    void navigator.clipboard.writeText(window?.location.href).then(() => {
+    const input: HTMLInputElement | null = node.querySelector(`#${inputId}`);
+    void navigator.clipboard.writeText(input?.value).then(() => {
       setIsTooltipShowed(true);
       setTimeout(() => {
         setIsTooltipShowed(false);
       }, 1000);
     });
-    inputRef.current.select();
+    input?.select();
   };
 
   const handleInputFocus = () => {
-    inputRef.current.select();
+    const input: HTMLInputElement | null = node.querySelector(`#${inputId}`);
+    input?.select();
   };
 
   return (
-    <div className="text-grey flex items-center">
+    <div
+      className="text-grey flex items-center"
+      ref={(elt) => {
+        setNode(elt);
+      }}
+    >
       <input
         className="h-7 w-full rounded-sm rounded-r-none border border-r-0 border-current p-1 leading-4 outline-none"
+        id={inputId}
         onFocus={handleInputFocus}
         readOnly
-        ref={inputRef}
         type="text"
         {...props}
       />
@@ -48,7 +58,7 @@ function RvfInputCopy(props: JSX.InputHTMLAttributes & PreactDOMAttributes) {
           top: positionTooltip?.top - 40,
         }}
       >
-        Link kopiert!
+        {t("input_copy_success")}
       </div>
     </div>
   );