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

package/package.json

@@ -2,21 +2,23 @@
   "name": "@geops/rvf-mobility-web-component",
   "license": "UNLICENSED",
   "description": "Web components for rvf in the domains of mobility and logistics.",
-  "version": "0.1.13",
+  "version": "0.1.14",
   "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",
+    "mobility-toolbox-js": "3.1.1-beta.0",
     "ol": "^10.3.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",
     "react-icons": "^5.4.0",
-    "rosetta": "^1.1.0"
+    "react-spatial": "^1.12.2",
+    "rosetta": "^1.1.0",
+    "tailwind-merge": "^2.6.0"
   },
   "devDependencies": {
     "@commitlint/cli": "^19.6.1",

package/src/RvfButton/RvfButton.tsx

@@ -1,6 +1,7 @@
 import type { JSX, PreactDOMAttributes } from "preact";
 
 import { memo, useMemo } from "preact/compat";
+import { twMerge } from "tailwind-merge";
 
 export type RvfButtonProps = {
   selected?: boolean;
@@ -9,7 +10,7 @@ export type RvfButtonProps = {
   PreactDOMAttributes;
 
 const baseClasses =
-  "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";
+  "flex  gap-2 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-left rounded-full border font-semibold text-button";
 
 export const themes = {
   primary: {
@@ -32,7 +33,9 @@ function RvfButton({
   ...props
 }: RvfButtonProps) {
   const classes = useMemo(() => {
-    return `${baseClasses} ${themes[theme].classes}  ${selected ? themes[theme].selectedClasses : ""} ${className || ""}`;
+    return twMerge(
+      `${baseClasses} ${themes[theme].classes}  ${selected ? themes[theme].selectedClasses : ""} ${className || ""}`,
+    );
   }, [className, selected, theme]);
 
   return (

package/src/RvfCheckbox/RvfCheckbox.tsx

@@ -1,20 +1,26 @@
 import type { JSX } from "preact";
 
 import { memo } from "preact/compat";
+import { twMerge } from "tailwind-merge";
 
 // @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>;
+export type RvfCheckboxProps = {
+  checkedIconUrl?: string;
+} & JSX.InputHTMLAttributes<HTMLInputElement>;
 
 function RvfCheckbox({ className, ...props }: RvfCheckboxProps) {
+  const checkedIconUrl = props.checkedIconUrl || ok;
   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}`}
+      className={twMerge(`
+        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.checked && !props.disabled
+            ? `url('` + checkedIconUrl + `')`
+            : "",
       }}
       {...props}
       type="checkbox"

package/src/RvfExportMenu/RvfExportMenu.tsx

@@ -2,16 +2,13 @@ import type { JSX, PreactDOMAttributes } from "preact";
 
 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;
@@ -19,7 +16,6 @@ export type RvfExportMenuButtonProps = JSX.HTMLAttributes<HTMLDivElement> &
 const formats = ["A4", "A3", "A1", "A0"];
 
 function RvfExportMenu({ ...props }: RvfExportMenuButtonProps) {
-  const { setIsExportMenuOpen } = useRvfContext();
   const { map } = useMapContext();
   const [useMaxExtent, setUseMaxExtent] = useState(false);
   const [format, setFormat] = useState<string>(formats[0]);
@@ -29,85 +25,71 @@ function RvfExportMenu({ ...props }: RvfExportMenuButtonProps) {
   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"}>
-          <span className={"font-bold"}>Drucken </span>
-          <RvfIconButton
-            className={"!size-[32px]"}
-            onClick={() => {
-              setIsExportMenuOpen(false);
+      {/* <!-- Content --> */}
+      <div className="flex flex-1 flex-col gap-2">
+        <div className={"flex flex-wrap items-center gap-2"}>
+          <RvfCheckbox
+            checked={useMaxExtent}
+            id={checkboxId}
+            onChange={() => {
+              return setUseMaxExtent(!useMaxExtent);
             }}
-          >
-            <Cancel />
-          </RvfIconButton>
-        </div>
-        {/* <!-- Content --> */}
-        <div className="flex flex-1 flex-col gap-2">
-          <div className={"flex flex-wrap items-center gap-2"}>
-            <RvfCheckbox
-              checked={useMaxExtent}
-              id={checkboxId}
-              onChange={() => {
-                return setUseMaxExtent(!useMaxExtent);
-              }}
-            />
-            <label htmlFor={checkboxId}>Ganze Region exportieren</label>
-          </div>
-          <div className={"flex flex-wrap items-center gap-2"}>
-            <label htmlFor={selectId}>Format:</label>
-            <RvfSelect
-              className={"w-24"}
-              id={selectId}
-              onChange={(evt) => {
-                setFormat((evt.target as HTMLSelectElement).value);
-              }}
-            >
-              {formats.map((format) => {
-                return <option key={format}>{format}</option>;
-              })}
-            </RvfSelect>
-          </div>
+          />
+          <label htmlFor={checkboxId}>Ganze Region exportieren</label>
         </div>
-        {/* <!-- Footer --> */}
-        <div>
-          <RvfButton
-            disabled={isExporting}
-            onClick={async () => {
-              setIsExportingError(false);
-              setIsExporting(true);
-              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);
-              }, 1000);
+        <div className={"flex flex-wrap items-center gap-2"}>
+          <label htmlFor={selectId}>Format:</label>
+          <RvfSelect
+            className={"w-24"}
+            id={selectId}
+            onChange={(evt) => {
+              setFormat((evt.target as HTMLSelectElement).value);
             }}
           >
-            {isExporting
-              ? "Exporting..."
-              : isExportingError
-                ? "Error"
-                : "Download"}
-          </RvfButton>
+            {formats.map((format) => {
+              return <option key={format}>{format}</option>;
+            })}
+          </RvfSelect>
         </div>
       </div>
+      {/* <!-- Footer --> */}
+      <div>
+        <RvfButton
+          disabled={isExporting}
+          onClick={async () => {
+            setIsExportingError(false);
+            setIsExporting(true);
+            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);
+            }, 1000);
+          }}
+        >
+          {isExporting
+            ? "Exporting..."
+            : isExportingError
+              ? "Error"
+              : "Download"}
+        </RvfButton>
+      </div>
     </div>
   );
 }

package/src/RvfFloatingMenu/RvfFloatingMenu.tsx

@@ -32,7 +32,7 @@ function RvfFloatingMenu({
           {title} {isOpen ? <ArrowDown /> : <ArrowUp />}
         </button>
         {!isOpen && (
-          <div className="flex h-[calc(100%-39px)] w-full flex-1 overflow-y-auto">
+          <div className="flex h-[calc(100%-39px)] w-full flex-1 flex-col overflow-y-auto">
             {children}
           </div>
         )}

package/src/RvfIconButton/RvfIconButton.tsx

@@ -1,6 +1,7 @@
 import type { JSX, PreactDOMAttributes } from "preact";
 
 import { memo, SVGProps, useMemo } from "preact/compat";
+import { twMerge } from "tailwind-merge";
 
 import { RvfButtonProps, themes } from "../RvfButton/RvfButton";
 
@@ -22,7 +23,9 @@ function RvfIconButton({
   ...props
 }: RvfIconButtonProps) {
   const classes = useMemo(() => {
-    return `${baseClasses} ${themes[theme].classes}  ${selected ? themes[theme].selectedClasses : ""} ${className || ""}`;
+    return twMerge(
+      `${baseClasses} ${themes[theme].classes}  ${selected ? themes[theme].selectedClasses : ""} ${className || ""}`,
+    );
   }, [className, selected, theme]);
 
   return (

package/src/RvfInputCopy/RvfInputCopy.tsx

@@ -0,0 +1,57 @@
+import type { JSX, PreactDOMAttributes } from "preact";
+
+import { useRef, useState } from "preact/hooks";
+
+import Copy from "../icons/Copy";
+import RvfIconButton from "../RvfIconButton";
+
+function RvfInputCopy(props: JSX.InputHTMLAttributes & PreactDOMAttributes) {
+  const [positionTooltip, setPositionTooltip] = useState<DOMRect>();
+  const [isTooptipShowed, setIsTooltipShowed] = useState(false);
+  const inputRef = useRef(null);
+
+  const handleCopyClick = (event) => {
+    setPositionTooltip(event.currentTarget.getBoundingClientRect());
+    navigator.clipboard.writeText(window?.location.href).then(() => {
+      setIsTooltipShowed(true);
+      setTimeout(() => {
+        setIsTooltipShowed(false);
+      }, 1000);
+    });
+    inputRef.current.select();
+  };
+
+  const handleInputFocus = () => {
+    inputRef.current.select();
+  };
+
+  return (
+    <div className="flex items-center text-grey">
+      <input
+        className="h-7 w-full rounded-sm rounded-r-none border border-r-0 border-current p-1 leading-4 outline-none"
+        onFocus={handleInputFocus}
+        readOnly
+        ref={inputRef}
+        type="text"
+        {...props}
+      />
+      <RvfIconButton
+        className="!size-7 rounded-l-none rounded-r-sm border-current"
+        onClick={handleCopyClick}
+      >
+        <Copy />
+      </RvfIconButton>
+      <div
+        className={`fixed rounded-md bg-grey p-1 text-sm text-white ${isTooptipShowed ? "block" : "hidden"}`}
+        style={{
+          left: positionTooltip?.left - 30,
+          top: positionTooltip?.top - 40,
+        }}
+      >
+        Link kopiert!
+      </div>
+    </div>
+  );
+}
+
+export default RvfInputCopy;

package/src/RvfInputCopy/index.tsx

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

package/src/RvfLayerTree/TreeItem/TreeItem.tsx

@@ -11,6 +11,7 @@ import {
 
 import ArrowDown from "../../icons/ArrowDown";
 import ArrowUp from "../../icons/ArrowUp";
+import minusGrey from "../../icons/Minus/minus-grey.svg";
 import RvfCheckbox from "../../RvfCheckbox";
 import RvfRadioButton from "../../RvfRadioButton";
 import { LayersTreeDispatchContext } from "../layersTreeContext";
@@ -88,6 +89,23 @@ function TreeItem({
     return null;
   }
 
+  const isMiddleState = () => {
+    if (childItems.length > 0) {
+      const checkedItems = childItems.filter((item) => {
+        return item.isControlChecked;
+      });
+      if (checkedItems.length === childItems.length) {
+        return false;
+      }
+
+      return childItems.some((item) => {
+        return item.isControlChecked;
+      });
+    }
+
+    return false;
+  };
+
   return (
     <div>
       <div className="flex items-center gap-2 border-b py-2 pr-1">
@@ -100,6 +118,8 @@ function TreeItem({
         ) : (
           <RvfCheckbox
             checked={isControlChecked}
+            checkedIconUrl={isMiddleState() ? minusGrey : null}
+            className={isMiddleState() ? "bg-[length:18px]" : ""}
             id={inputId}
             onChange={handleSelectionChange}
           />

package/src/RvfLayerTreeButton/RvfLayerTreeButton.tsx

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

package/src/RvfLayerTreeButton/index.tsx

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

package/src/RvfLineNetworkPlanLayer/RvfLineNetworkPlanLayer.tsx

@@ -16,11 +16,8 @@ function RvfLineNetworkPlanLayer(props: MaplibreStyleLayerOptions) {
     }
     return new MaplibreStyleLayer({
       isQueryable: true,
-      layersFilter: ({ metadata, source }) => {
-        return (
-          metadata?.["rvf.filter"] === "netowrk_plans" ||
-          source === "network_plans"
-        );
+      layersFilter: ({ metadata }) => {
+        return metadata?.["rvf.filter"] === "netzplan_lines";
       },
       maplibreLayer: baseLayer,
       minZoom: 10,