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

package/input.css

@@ -35,14 +35,8 @@ html {
   h4 {
     @apply text-lg;
   }
-  button {
+  /* button {
     @apply text-button font-semibold;
-  }
-}
-
-.button-map {
-  @apply bg-blue-500 text-white;
-  background: lightgray;
-  z-index: 5;
+  } */
 }
 

package/package.json

@@ -2,16 +2,16 @@
   "name": "@geops/rvf-mobility-web-component",
   "license": "UNLICENSED",
   "description": "Web components for rvf in the domains of mobility and logistics.",
-  "version": "0.1.11",
+  "version": "0.1.13",
   "homepage": "https://rvf-mobility-web-component-geops.vercel.app/",
   "type": "module",
   "main": "index.js",
   "dependencies": {
     "jspdf": "^2.5.2",
     "maplibre-gl": "^4.7.1",
-    "mobility-toolbox-js": "3.1.0-beta.2",
+    "mobility-toolbox-js": "3.1.0",
     "ol": "^10.3.1",
-    "preact": "^10.25.1",
+    "preact": "^10.25.4",
     "preact-custom-element": "^4.3.0",
     "react": "npm:@preact/compat@^18.3.1",
     "react-dom": "npm:@preact/compat@^18.3.1",
@@ -19,24 +19,24 @@
     "rosetta": "^1.1.0"
   },
   "devDependencies": {
-    "@commitlint/cli": "^19.6.0",
+    "@commitlint/cli": "^19.6.1",
     "@commitlint/config-conventional": "^19.6.0",
-    "@eslint/js": "^9.16.0",
+    "@eslint/js": "^9.17.0",
     "@tailwindcss/container-queries": "^0.1.1",
     "@testing-library/preact": "^3.2.4",
-    "@types/geojson": "^7946.0.14",
+    "@types/geojson": "^7946.0.15",
     "@types/jest": "^29.5.14",
     "@types/preact-custom-element": "^4.0.4",
-    "concurrently": "^9.1.0",
-    "esbuild": "^0.24.0",
+    "concurrently": "^9.1.2",
+    "esbuild": "^0.24.2",
     "esbuild-sass-plugin": "^3.3.1",
-    "eslint": "^9.16.0",
+    "eslint": "^9.17.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
-    "eslint-plugin-perfectionist": "^4.2.0",
+    "eslint-plugin-perfectionist": "^4.5.0",
     "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-react": "^7.37.2",
-    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
+    "eslint-plugin-react": "^7.37.3",
+    "eslint-plugin-react-hooks": "^5.1.0",
     "eslint-plugin-tailwindcss": "^3.17.5",
     "fixpack": "^4.0.0",
     "generact": "^0.4.0",
@@ -46,13 +46,13 @@
     "jest-environment-jsdom": "^29.7.0",
     "jest-preset-preact": "^4.1.1",
     "next": "15.0.3",
-    "preact-render-to-string": "^6.5.11",
+    "preact-render-to-string": "^6.5.12",
     "prettier": "^3.4.2",
     "standard-version": "^9.5.0",
-    "tailwindcss": "^3.4.16",
+    "tailwindcss": "^3.4.17",
     "ts-jest": "^29.2.5",
     "typescript": "^5.7.2",
-    "typescript-eslint": "^8.17.0"
+    "typescript-eslint": "^8.19.0"
   },
   "scripts": {
     "build": "yarn build:css && yarn build:js",

package/scripts/build.mjs

@@ -1,15 +1,15 @@
-/* eslint-disable import/no-extraneous-dependencies */
 import * as esbuild from "esbuild";
 import { sassPlugin } from "esbuild-sass-plugin";
 
 await esbuild.build({
-  entryPoints: ["./src/index.js"],
   bundle: true,
-  minify: true,
+  entryPoints: ["./src/index.js"],
   external: ["mapbox-gl"],
   loader: {
     ".png": "dataurl",
+    ".svg": "dataurl",
   },
+  minify: true,
   outfile: "index.js",
   plugins: [sassPlugin({ type: "css-text" })],
   sourcemap: false,

package/scripts/dev.mjs

@@ -1,4 +1,3 @@
-/* eslint-disable import/no-extraneous-dependencies */
 import * as esbuild from "esbuild";
 import { sassPlugin } from "esbuild-sass-plugin";
 
@@ -8,6 +7,7 @@ const ctx = await esbuild.context({
   external: ["mapbox-gl"],
   loader: {
     ".png": "dataurl",
+    ".svg": "dataurl",
   },
   outfile: "index.js",
   plugins: [sassPlugin({ type: "css-text" })],
@@ -19,6 +19,8 @@ const { host, port } = await ctx.serve({
 });
 
 await ctx.watch();
+
+// eslint-disable-next-line no-undef
 console.log(
   `watching... and running at ${
     host === "0.0.0.0" ? "http://localhost" : host

package/src/BaseLayer/BaseLayer.tsx

@@ -1,34 +1,42 @@
 import { MaplibreLayer } from "mobility-toolbox-js/ol";
 import { MaplibreLayerOptions } from "mobility-toolbox-js/ol/layers/MaplibreLayer";
-import { Layer } from "ol/layer";
 import { memo } from "preact/compat";
-import { useEffect } from "preact/hooks";
+import { useEffect, useMemo } from "preact/hooks";
 
 import useMapContext from "../utils/hooks/useMapContext";
 
-function BaseLayer(props: MaplibreLayerOptions) {
+export type BaseLayerProps = MaplibreLayerOptions;
+
+function BaseLayer(props: BaseLayerProps) {
   const { apikey, baselayer, map, mapsurl, setBaseLayer } = useMapContext();
-  useEffect(() => {
-    if (!map || !baselayer || !apikey) {
+
+  const layer = useMemo(() => {
+    if (!baselayer || !apikey) {
       return;
     }
-    const layer = new MaplibreLayer({
+    return new MaplibreLayer({
       apiKey: apikey,
       style: baselayer,
       url: mapsurl,
+      zIndex: 0,
       ...(props || {}),
     });
-    const baseLayer = layer as unknown as Layer;
+  }, [baselayer, apikey, props, mapsurl]);
 
-    // TODO: find why the setZIndex is not found
-    baseLayer.setZIndex(0);
-    map.addLayer(baseLayer);
+  useEffect(() => {
     setBaseLayer(layer);
+  }, [layer, setBaseLayer]);
+
+  useEffect(() => {
+    if (!map || !layer) {
+      return;
+    }
+    map.addLayer(layer);
 
     return () => {
-      map?.removeLayer(baseLayer);
+      map.removeLayer(layer);
     };
-  }, [map, baselayer, apikey, setBaseLayer, props, mapsurl]);
+  }, [map, layer]);
 
   return null;
 }

package/src/RealtimeLayer/RealtimeLayer.tsx

@@ -50,6 +50,7 @@ function RealtimeLayer(props: RealtimeLayerProps) {
         : undefined,
       tenant,
       url: realtimeurl,
+      zIndex: 1,
       ...props,
       styleOptions: {
         getDelayColor: getDelayColorForVehicle,
@@ -61,8 +62,6 @@ function RealtimeLayer(props: RealtimeLayerProps) {
       },
     });
 
-    layer.setZIndex(1);
-
     return layer;
   }, [apikey, mots, realtimeurl, tenant, props]);
 

package/src/RouteSchedule/RouteSchedule.tsx

@@ -24,8 +24,10 @@ function RouteSchedule(props: RouteScheduleProps) {
       }
       const nextStation = elt.querySelector("[data-station-passed=false]");
       if (nextStation) {
-        nextStation.scrollIntoView({
+        // We use scrollTo avoid scrolling the entire window.
+        (nextStation.parentNode as Element).scrollTo({
           behavior: "smooth",
+          top: (nextStation as HTMLElement).offsetTop || 0,
         });
       }
       clearInterval(interval);

package/src/RouteStop/RouteStop.tsx

@@ -110,7 +110,7 @@ function RouteStop({
             <RouteStopTime className="ml-4 flex w-10 shrink-0 flex-col justify-center text-xs" />
             <RouteStopDelay className="flex w-8 shrink-0 flex-col justify-center text-[0.6rem]" />
             <RouteStopProgress className="relative flex w-8 shrink-0 items-center" />
-            <RouteStopStation className="flex grow flex-col items-start justify-center pr-2 text-sm font-medium" />
+            <RouteStopStation className="flex grow flex-col items-start justify-center pr-2" />
           </>
         )}
       </button>

package/src/RvfButton/RvfButton.tsx

@@ -9,12 +9,12 @@ export type RvfButtonProps = {
   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";
+  "flex text-[14px] @sm/main:text-[16px] @md/main:text-[18px] h-[32px] @sm/main:h-[36px] @md/main:h-[40px] px-[22px] @sm/main:px-[22.5px] @md/main:px-[27.5px] pt-[7px] pb-[5px] @sm/main:pt-[8px] @sm/main:pb-[6px] @md/main:pt-[8.5px] @md/main:pb-[6.5px]  items-center justify-center rounded-full border font-semibold text-button";
 
 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",
+      "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: {

package/src/RvfCheckbox/RvfCheckbox.tsx

@@ -0,0 +1,25 @@
+import type { JSX } from "preact";
+
+import { memo } from "preact/compat";
+
+// @ts-expect-error - required for htm to resolve the JSX pragma
+import ok from "../icons/Ok/ok-grey.svg";
+
+export type RvfCheckboxProps = {} & JSX.InputHTMLAttributes<HTMLInputElement>;
+
+function RvfCheckbox({ className, ...props }: RvfCheckboxProps) {
+  return (
+    <input
+      className={`
+        box-border size-[20px] flex-none cursor-pointer appearance-none rounded border-2 border-grey bg-white bg-contain bg-center text-grey disabled:cursor-default disabled:border-lightgrey ${className}`}
+      style={{
+        backgroundImage:
+          props.checked && !props.disabled ? `url('` + ok + `')` : "",
+      }}
+      {...props}
+      type="checkbox"
+    />
+  );
+}
+
+export default memo(RvfCheckbox);

package/src/RvfCheckbox/index.tsx

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

package/src/RvfExportMenu/RvfExportMenu.tsx

@@ -4,15 +4,19 @@ import { memo, useId, useState } from "preact/compat";
 
 import Cancel from "../icons/Cancel";
 import RvfButton from "../RvfButton";
+import RvfCheckbox from "../RvfCheckbox";
 import RvfIconButton from "../RvfIconButton";
+import RvfSelect from "../RvfSelect";
+import { LAYER_PROP_IS_EXPORTING } from "../utils/constants";
 import exportPdf from "../utils/exportPdf";
+import getAllLayers from "../utils/getAllLayers";
 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"];
+const formats = ["A4", "A3", "A1", "A0"];
 
 function RvfExportMenu({ ...props }: RvfExportMenuButtonProps) {
   const { setIsExportMenuOpen } = useRvfContext();
@@ -28,8 +32,9 @@ function RvfExportMenu({ ...props }: RvfExportMenuButtonProps) {
       <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>
+          <span className={"font-bold"}>Drucken </span>
           <RvfIconButton
+            className={"!size-[32px]"}
             onClick={() => {
               setIsExportMenuOpen(false);
             }}
@@ -39,31 +44,29 @@ function RvfExportMenu({ ...props }: RvfExportMenuButtonProps) {
         </div>
         {/* <!-- Content --> */}
         <div className="flex flex-1 flex-col gap-2">
-          <div className={"flex gap-2"}>
-            <input
+          <div className={"flex flex-wrap items-center gap-2"}>
+            <RvfCheckbox
               checked={useMaxExtent}
               id={checkboxId}
               onChange={() => {
-                setUseMaxExtent(!useMaxExtent);
+                return setUseMaxExtent(!useMaxExtent);
               }}
-              type="checkbox"
             />
             <label htmlFor={checkboxId}>Ganze Region exportieren</label>
           </div>
-          <div className={"flex gap-2"}>
+          <div className={"flex flex-wrap items-center gap-2"}>
             <label htmlFor={selectId}>Format:</label>
-            <select
+            <RvfSelect
               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>
+            </RvfSelect>
           </div>
         </div>
         {/* <!-- Footer --> */}
@@ -73,7 +76,24 @@ function RvfExportMenu({ ...props }: RvfExportMenuButtonProps) {
             onClick={async () => {
               setIsExportingError(false);
               setIsExporting(true);
-              const result = await exportPdf(map, { format }, { useMaxExtent });
+              const result = await exportPdf(
+                map,
+                { format },
+                {
+                  onAfter: (map, layers) => {
+                    getAllLayers(layers).forEach((layer) => {
+                      layer.set(LAYER_PROP_IS_EXPORTING, false);
+                    });
+                  },
+
+                  onBefore: (map, layers) => {
+                    getAllLayers(layers).forEach((layer) => {
+                      layer.set(LAYER_PROP_IS_EXPORTING, true);
+                    });
+                  },
+                  useMaxExtent,
+                },
+              );
               setTimeout(() => {
                 setIsExporting(false);
                 setIsExportingError(!result);

package/src/RvfFloatingMenu/RvfFloatingMenu.tsx

@@ -0,0 +1,44 @@
+import type { JSX, PreactDOMAttributes } from "preact";
+
+import ArrowDown from "../icons/ArrowDown";
+import ArrowUp from "../icons/ArrowUp";
+import useMapContext from "../utils/hooks/useMapContext";
+
+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 bottom-8 left-2 top-2 z-10 flex flex-col overflow-hidden rounded-lg">
+      <div className="pointer-events-auto max-h-full w-48 rounded-lg border border-grey 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 overflow-y-auto">
+            {children}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default RvfFloatingMenu;

package/src/RvfFloatingMenu/index.tsx

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

package/src/RvfIconButton/RvfIconButton.tsx

@@ -11,7 +11,7 @@ export type RvfIconButtonProps = {
   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";
+  "flex  size-[32px] @sm/main:size-[36px] @md/main:size-[40px] p-[7px] items-center justify-center rounded-full border";
 
 function RvfIconButton({
   children,

package/src/{LayerTree/LayerTree.tsx → RvfLayerTree/RvfLayerTree.tsx}

@@ -1,3 +1,5 @@
+import { JSX, PreactDOMAttributes } from "preact";
+import { memo } from "preact/compat";
 import { useEffect, useReducer } from "preact/hooks";
 
 import {
@@ -6,39 +8,30 @@ import {
 } from "./layersTreeContext";
 import layersTreeReducer from "./layersTreeReducer";
 import TreeItem, { TreeItemProps } from "./TreeItem/TreeItem";
-import TreeItemContainer from "./TreeItemContainer";
 
-export interface LayerTreeProps {
+export type RvfLayerTreeProps = {
   layers: TreeItemProps[];
-}
+} & JSX.HTMLAttributes<HTMLDivElement> &
+  PreactDOMAttributes;
 
-function LayerTree({ layers }: LayerTreeProps) {
+function RvfLayerTree({ layers, ...props }: RvfLayerTreeProps) {
   const [tree, dispatch] = useReducer(layersTreeReducer, layers);
 
   useEffect(() => {
     dispatch({ payload: layers, type: "INIT" });
-    console.log("INIT", layers);
   }, [layers]);
 
-  const renderedLayers = layers.map((item, idx) => {
-    return (
-      <div className="border-b border-grey" key={idx}>
-        <TreeItem {...item} />
-      </div>
-    );
-  });
-
   return (
     <LayersTreeContext.Provider value={tree}>
       <LayersTreeDispatchContext.Provider value={dispatch}>
-        <div className="flex flex-col">
-          <TreeItemContainer selectionType={tree[0]?.selectionType}>
-            {renderedLayers}
-          </TreeItemContainer>
+        <div {...props}>
+          {layers.map((item) => {
+            return <TreeItem className="w-full" key={item.id} {...item} />;
+          })}
         </div>
       </LayersTreeDispatchContext.Provider>
     </LayersTreeContext.Provider>
   );
 }
 
-export default LayerTree;
+export default memo(RvfLayerTree);

package/src/RvfLayerTree/TreeItem/TreeItem.tsx

@@ -0,0 +1,130 @@
+import type { JSX, PreactDOMAttributes } from "preact";
+
+import BaseLayer from "ol/layer/Base";
+import {
+  SVGProps,
+  useContext,
+  useEffect,
+  useId,
+  useState,
+} from "preact/compat";
+
+import ArrowDown from "../../icons/ArrowDown";
+import ArrowUp from "../../icons/ArrowUp";
+import RvfCheckbox from "../../RvfCheckbox";
+import RvfRadioButton from "../../RvfRadioButton";
+import { LayersTreeDispatchContext } from "../layersTreeContext";
+
+export enum SelectionType {
+  CHECKBOX = "checkbox",
+  RADIO = "radio",
+}
+
+export type TreeItemProps = {
+  childItems: TreeItemProps[];
+  Icon?: (props: SVGProps<SVGSVGElement>) => preact.JSX.Element;
+  id: string;
+  isCollapsedOnControlClick?: boolean;
+  isControlChecked?: boolean;
+  layer?: BaseLayer;
+  onIconClick?: () => void;
+  selectionType: SelectionType;
+  title: string;
+} & JSX.HTMLAttributes<HTMLButtonElement> &
+  PreactDOMAttributes;
+
+function TreeItem({
+  childItems,
+  isCollapsedOnControlClick,
+  isControlChecked,
+  layer,
+  selectionType,
+  title,
+}: TreeItemProps) {
+  const [isContainerVisible, setIsContainerVisible] = useState(true);
+  const dispatch = useContext(LayersTreeDispatchContext);
+  const inputId = useId();
+  const buttonId = useId();
+
+  useEffect(() => {
+    if (isCollapsedOnControlClick) {
+      setIsContainerVisible(isControlChecked);
+    }
+  }, [isControlChecked, isCollapsedOnControlClick, layer]);
+
+  const handleItemClick = () => {
+    setIsContainerVisible(!isContainerVisible);
+
+    if (isCollapsedOnControlClick && !isContainerVisible) {
+      dispatch({
+        payload: {
+          ...this["props"],
+          isControlChecked: true,
+        },
+        type: "SELECT_ITEM",
+      });
+    }
+  };
+
+  const handleSelectionChange = (event) => {
+    dispatch({
+      payload: {
+        ...this["props"],
+        isControlChecked: event.target.checked,
+      },
+      type: "SELECT_ITEM",
+    });
+  };
+
+  const renderedLayers = childItems
+    .filter(({ title }) => {
+      return !!title;
+    })
+    .map((item, idx) => {
+      return <TreeItem key={idx} {...item} />;
+    });
+
+  if (!title) {
+    return null;
+  }
+
+  return (
+    <div>
+      <div className="flex items-center gap-2 border-b py-2 pr-1">
+        {selectionType === SelectionType.RADIO ? (
+          <RvfRadioButton
+            checked={isControlChecked}
+            id={inputId}
+            onChange={handleSelectionChange}
+          />
+        ) : (
+          <RvfCheckbox
+            checked={isControlChecked}
+            id={inputId}
+            onChange={handleSelectionChange}
+          />
+        )}
+        <label
+          className={`flex-1 cursor-pointer`}
+          htmlFor={renderedLayers.length > 0 ? buttonId : inputId}
+        >
+          {title}
+        </label>
+        {renderedLayers.length > 0 && (
+          <button
+            className={`flex cursor-pointer items-center gap-2`}
+            id={buttonId}
+            onClick={handleItemClick}
+          >
+            {isContainerVisible ? <ArrowUp /> : <ArrowDown />}
+          </button>
+        )}
+      </div>
+      {isContainerVisible && renderedLayers.length > 0 && (
+        <div className="pl-6">{renderedLayers}</div>
+      )}
+    </div>
+  );
+}
+
+export default TreeItem;

package/src/RvfLayerTree/index.tsx

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

package/src/{LayerTree → RvfLayerTree}/layersTreeReducer.ts

@@ -10,8 +10,6 @@ const initTree = (tree) => {
   initializedTree.childItems = tree;
   mapNode(initializedTree.childItems, initializedTree);
 
-  console.log("initializedTree", initializedTree);
-
   return initializedTree;
 };
 
@@ -109,6 +107,7 @@ const updateRadioChildNodes = (parent) => {
 const updateCheckboxChildNodes = (parent) => {
   for (const child of parent.childItems) {
     child.isControlChecked = parent.isControlChecked;
+    child.layer.setVisible(child.isControlChecked);
 
     if (child.childItems.length) {
       updateChildNodes(child);
@@ -146,8 +145,6 @@ function layersTreeReducer(state = ROOT, action) {
       return initTree(action.payload);
     case "SELECT_ITEM":
       return setNewControlCheckedStatus(state, action.payload);
-    case "SELECT_RADIO_ITEM":
-      return setNewControlCheckedStatus(state, action.payload);
     default:
       return state;
   }