@geops/rvf-mobility-web-component 0.1.15 → 0.1.16

package/package.json

@@ -2,12 +2,13 @@
   "name": "@geops/rvf-mobility-web-component",
   "license": "UNLICENSED",
   "description": "Web components for rvf in the domains of mobility and logistics.",
-  "version": "0.1.15",
+  "version": "0.1.16",
   "homepage": "https://rvf-mobility-web-component-geops.vercel.app/",
   "type": "module",
   "main": "index.js",
   "dependencies": {
     "jspdf": "^2.5.2",
+    "lodash.debounce": "^4.0.8",
     "maplibre-gl": "^4.7.1",
     "mobility-toolbox-js": "3.1.1-beta.0",
     "ol": "^10.3.1",

package/src/RealtimeLayer/RealtimeLayer.tsx

@@ -7,6 +7,7 @@ import { memo } from "preact/compat";
 import { useEffect, useMemo } from "preact/hooks";
 
 import centerOnVehicle from "../utils/centerOnVehicle";
+import { RVF_LAYERS_NAMES } from "../utils/constants";
 import getDelayColorForVehicle from "../utils/getDelayColorForVehicle";
 import getDelayFontForVehicle from "../utils/getDelayFontForVehicle";
 import getDelayTextForVehicle from "../utils/getDelayTextForVehicle";
@@ -48,6 +49,7 @@ function RealtimeLayer(props: RealtimeLayerProps) {
             return mots.split(",") as RealtimeMot[];
           }
         : undefined,
+      name: RVF_LAYERS_NAMES.echtzeit,
       tenant,
       url: realtimeurl,
       zIndex: 1,

package/src/RvfExportMenu/RvfExportMenu.tsx

@@ -15,8 +15,10 @@ export type RvfExportMenuButtonProps = JSX.HTMLAttributes<HTMLDivElement> &
 
 const formats = ["A4", "A3", "A1", "A0"];
 
+let prevRealtimeLayerVisibility = false;
+
 function RvfExportMenu({ ...props }: RvfExportMenuButtonProps) {
-  const { map } = useMapContext();
+  const { map, realtimeLayer } = useMapContext();
   const [useMaxExtent, setUseMaxExtent] = useState(false);
   const [format, setFormat] = useState<string>(formats[0]);
   const checkboxId = useId();
@@ -64,12 +66,21 @@ function RvfExportMenu({ ...props }: RvfExportMenuButtonProps) {
               { format },
               {
                 onAfter: (map, layers) => {
+                  if (
+                    prevRealtimeLayerVisibility !== realtimeLayer.getVisible()
+                  ) {
+                    realtimeLayer.setVisible(prevRealtimeLayerVisibility);
+                  }
                   getAllLayers(layers).forEach((layer) => {
                     layer.set(LAYER_PROP_IS_EXPORTING, false);
                   });
                 },
 
                 onBefore: (map, layers) => {
+                  prevRealtimeLayerVisibility = realtimeLayer.getVisible();
+                  if (realtimeLayer.getVisible()) {
+                    realtimeLayer.setVisible(false);
+                  }
                   getAllLayers(layers).forEach((layer) => {
                     layer.set(LAYER_PROP_IS_EXPORTING, true);
                   });

package/src/RvfFeatureDetails/RvfFeatureDetails.tsx

@@ -3,16 +3,28 @@ import type { JSX, PreactDOMAttributes } from "preact";
 import { memo } from "preact/compat";
 
 import useRvfContext from "../utils/hooks/useRvfContext";
+import RvfSharedMobilityDetails from "./RvfSharedMobilityDetail";
 
 export type RvfFeatureDetailsProps = JSX.HTMLAttributes<HTMLDivElement> &
   PreactDOMAttributes;
 
+const getIsSharedMobility = (selectedFeature): boolean => {
+  const id =
+    selectedFeature.getId() || selectedFeature.get("features")[0].getId();
+  if (typeof id === "number") {
+    return !!selectedFeature.get("category");
+  } else if (typeof id === "string") {
+    return id.includes("sharing_stations") || id.includes("Vehicle");
+  }
+};
+
 function RvfFeatureDetails(props: RvfFeatureDetailsProps) {
   const { selectedFeature } = useRvfContext();
+  const isSharedMobility = getIsSharedMobility(selectedFeature);
 
-  return (
-    <div {...props}>
-      {Object.entries(selectedFeature.getProperties()).map(([key, value]) => {
+  const showDefaultData = () => {
+    return Object.entries(selectedFeature.getProperties()).map(
+      ([key, value]) => {
         return (
           <div className="flex gap-2" key={key}>
             <span>
@@ -21,7 +33,16 @@ function RvfFeatureDetails(props: RvfFeatureDetailsProps) {
             <div>{value}</div>
           </div>
         );
-      })}
+      },
+    );
+  };
+
+  return (
+    <div {...props}>
+      {isSharedMobility && (
+        <RvfSharedMobilityDetails selectedFeature={selectedFeature} />
+      )}
+      {!isSharedMobility && showDefaultData()}
     </div>
   );
 }

package/src/RvfFeatureDetails/RvfSharedMobilityDetail/FloatingVehiclesDetails/FloatingVehiclesDetails.tsx

@@ -0,0 +1,53 @@
+import { Feature } from "ol";
+
+import getLinkByDevice from "../../../utils/getLinkByDevice";
+
+export interface FloatingVehiclesDetailsProps {
+  features: Feature[];
+}
+
+function FloatingVehiclesDetails({ features }: FloatingVehiclesDetailsProps) {
+  const renderedDetails = features.map((feature, idx) => {
+    let vehicleNumber;
+    if (feature.get("feed_id") === "yoio_freiburg") {
+      vehicleNumber = feature.get("rental_uris_android").split("/").pop();
+    } else if (feature.get("feed_id") === "zeus_freiburg") {
+      const url = new URL(feature.get("rental_uris_web"));
+      vehicleNumber = new URLSearchParams(url.search).get("vehicle");
+    }
+
+    const scooterLink = getLinkByDevice(feature);
+    const availableDistanceString = feature
+      .get("current_range_meters")
+      .toLocaleString()
+      .replace(",", "'");
+
+    return (
+      <li className="p-1" key={idx}>
+        <a href={scooterLink} key={idx} rel="noreferrer" target="_blank">
+          {`${vehicleNumber} (${availableDistanceString} m)`}
+        </a>
+      </li>
+    );
+  });
+
+  return (
+    <div className="flex flex-col overflow-scroll">
+      {features.length} Fahrzeuge
+      <span className="text-lg text-grey">Fahrzeug mieten</span>
+      <ul className="h-screen list-disc overflow-scroll pl-4 underline underline-offset-2">
+        {renderedDetails}
+      </ul>
+      <a
+        className="mx-auto text-lg text-grey hover:text-red"
+        href={getLinkByDevice(features[0])}
+        rel="noreferrer"
+        target="_blank"
+      >
+        Über {features[0].get("feed_id").split("_")[0].toUpperCase()}
+      </a>
+    </div>
+  );
+}
+
+export default FloatingVehiclesDetails;

package/src/RvfFeatureDetails/RvfSharedMobilityDetail/FloatingVehiclesDetails/index.tsx

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

package/src/RvfFeatureDetails/RvfSharedMobilityDetail/RvfSharedMobilityDetails.tsx

@@ -0,0 +1,129 @@
+import { Feature } from "ol";
+import { useEffect, useState } from "preact/hooks";
+
+import callBike from "../../logos/callabike_logo.png";
+import flinkster from "../../logos/flinkster_logo.png";
+import grueneFlotteLogo from "../../logos/gruene_flotte_logo.png";
+import lastenVeloLogo from "../../logos/lasten_velo_freiburg.png";
+import freloLogo from "../../logos/logo_frelo_web_rgb.png";
+import naturEnergieLogo from "../../logos/natur_energie_logo.png";
+import yoioLogo from "../../logos/yoio_logo.png";
+import zeusLogo from "../../logos/zeus_logo.png";
+import { API_REQUEST_FEATURE_TYPE } from "../../utils/constants";
+import FloatingVehiclesDetails from "./FloatingVehiclesDetails";
+import StationDetails from "./StationDetails";
+
+export interface RvfSharedMobilityDetailsProps {
+  selectedFeature: Feature;
+}
+
+const logos = {
+  callabike_ice: callBike,
+  flinkster_carsharing: flinkster,
+  "gruene-flotte_freiburg": grueneFlotteLogo,
+  lastenvelo_fr: lastenVeloLogo,
+  naturenergie_sharing: naturEnergieLogo,
+  nextbike_df: freloLogo,
+  yoio_freiburg: yoioLogo,
+  zeus_freiburg: zeusLogo,
+};
+
+const categories = {
+  callabike_ice: "Bike Sharing",
+  flinkster_carsharing: "Car Sharing",
+  "gruene-flotte_freiburg": "Car Sharing",
+  lastenvelo_fr: "Cargo Bike Sharing",
+  naturenergie_sharing: "Car Sharing",
+  nextbike_df: "Bike Sharing",
+  yoio_freiburg: "E-Scooter",
+  zeus_freiburg: "E-Scooter",
+};
+
+function RvfSharedMobilityDetails({
+  selectedFeature,
+}: RvfSharedMobilityDetailsProps) {
+  const [features, setFeatures] = useState([]);
+  const isStationDetails =
+    !!selectedFeature.get("categories") ||
+    !selectedFeature.get("features")?.length;
+  const isFloatingVehicle = !!selectedFeature.get("features")?.length;
+
+  useEffect(() => {
+    const extent = selectedFeature.getGeometry().getExtent();
+    extent[0] = extent[0] - 2;
+    extent[1] = extent[1] - 2;
+    extent[2] = extent[2] + 2;
+    extent[3] = extent[3] + 2;
+    const categoryName = selectedFeature.get("category")?.toLowerCase();
+    let featureType;
+
+    if (categoryName) {
+      if (categoryName === "bike sharing") {
+        featureType = API_REQUEST_FEATURE_TYPE.stations.bike;
+      } else if (categoryName === "car sharing") {
+        featureType = API_REQUEST_FEATURE_TYPE.stations.car;
+      } else if (categoryName === "cargo bike sharing") {
+        featureType = API_REQUEST_FEATURE_TYPE.stations.cargoBike;
+      }
+
+      fetch(createRequestLink(featureType, extent))
+        .then((res) => {
+          return res.json();
+        })
+        .then((data) => {
+          selectedFeature.setProperties(data.features[0].properties);
+          setFeatures([selectedFeature]);
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    } else {
+      if (isFloatingVehicle) {
+        setFeatures(selectedFeature.get("features"));
+      } else {
+        setFeatures([selectedFeature]);
+      }
+    }
+  }, [selectedFeature, isFloatingVehicle]);
+
+  const createRequestLink = (name, extent) => {
+    return (
+      "https://api.mobidata-bw.de/geoserver/MobiData-BW/" +
+      name +
+      "/ows" +
+      "?service=WFS&" +
+      "version=1.1.0&request=GetFeature&typename=" +
+      "MobiData-BW:" +
+      name +
+      "&" +
+      "outputFormat=application/json&srsname=EPSG:3857&" +
+      "bbox=" +
+      extent.join(",") +
+      ",EPSG:3857"
+    );
+  };
+
+  return (
+    <div className="flex flex-col overflow-scroll px-2 pt-2">
+      <div className="flex items-center text-xl text-grey">
+        <img
+          alt="logo"
+          className="max-w-24"
+          src={logos[features[0]?.get("feed_id")]}
+        />
+        <span className="ml-4">
+          {selectedFeature.get("category") ||
+            categories[features[0]?.get("feed_id")]}
+        </span>
+      </div>
+      {features.length && isStationDetails && (
+        <StationDetails feature={features[0]} />
+      )}
+      {!!features[0]?.get("form_factor") && isFloatingVehicle && (
+        <FloatingVehiclesDetails features={features} />
+      )}
+    </div>
+  );
+}
+
+export default RvfSharedMobilityDetails;

package/src/RvfFeatureDetails/RvfSharedMobilityDetail/StationDetails/StationDetails.tsx

@@ -0,0 +1,24 @@
+import { Feature } from "ol";
+
+import getLinkByDevice from "../../../utils/getLinkByDevice";
+export interface StationDetailsProps {
+  feature: Feature;
+}
+
+function StationDetails({ feature }: StationDetailsProps) {
+  return (
+    <div className="flex flex-col">
+      {feature.get("num_vehicles_available")} Fahrzeuge
+      <a
+        className="mx-auto mt-[40%] rounded-xl border border-grey px-2 py-1 text-xl text-grey hover:border-red hover:text-red"
+        href={getLinkByDevice(feature)}
+        rel="noreferrer"
+        target="_blank"
+      >
+        Jetzt buchen
+      </a>
+    </div>
+  );
+}
+
+export default StationDetails;

package/src/RvfFeatureDetails/RvfSharedMobilityDetail/StationDetails/index.tsx

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

package/src/RvfFeatureDetails/RvfSharedMobilityDetail/index.tsx

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

package/src/RvfLineNetworkPlanLayer/RvfLineNetworkPlanLayer.tsx

@@ -3,6 +3,7 @@ import { MaplibreStyleLayerOptions } from "mobility-toolbox-js/ol/layers/Maplibr
 import { memo } from "preact/compat";
 import { useEffect, useMemo } from "preact/hooks";
 
+import { RVF_LAYERS_NAMES } from "../utils/constants";
 import useMapContext from "../utils/hooks/useMapContext";
 import useRvfContext from "../utils/hooks/useRvfContext";
 
@@ -21,6 +22,7 @@ function RvfLineNetworkPlanLayer(props: MaplibreStyleLayerOptions) {
       },
       maplibreLayer: baseLayer,
       minZoom: 10,
+      name: RVF_LAYERS_NAMES.liniennetz,
       ...(props || {}),
     });
   }, [baseLayer, props]);

package/src/RvfMobilityMap/RvfMobilityMap.tsx

@@ -39,6 +39,7 @@ import RvfLineNetworkPlanLayer from "../RvfLineNetworkPlanLayer";
 import Modal from "../RvfModal";
 import RvfOverlayHeader from "../RvfOverlayHeader";
 import RvfPoisLayer from "../RvfPoisLayer";
+import RvfSelectedFeatureHighlightLayer from "../RvfSelectedFeatureHighlightLayer";
 import RvfSellingPointsLayer from "../RvfSellingPointsLayer";
 import RvfShare from "../RvfShare";
 import RvfSharedMobilityLayerGroup from "../RvfSharedMobilityLayerGroup";
@@ -55,6 +56,7 @@ import StationsLayer from "../StationsLayer";
 import tailwind from "../style.css";
 import { RVF_EXTENT_3857 } from "../utils/constants";
 import { I18nContext } from "../utils/hooks/useI18n";
+import useInitialLayersVisiblity from "../utils/hooks/useInitialLayersVisiblity";
 import { MapContext } from "../utils/hooks/useMapContext";
 import { RvfContext } from "../utils/hooks/useRvfContext";
 import useUpdatePermalink from "../utils/hooks/useUpdatePermalink";
@@ -63,7 +65,13 @@ import MobilityEvent from "../utils/MobilityEvent";
 // @ts-expect-error bad type definition
 import style from "./index.css";
 
-export type RvfMobilityMapProps = { toolbar: string } & MobilityMapProps;
+export type RvfMobilityMapProps = {
+  layers: string; // list of visible layers on load
+  layertree: string;
+  print: string;
+  share: string;
+  toolbar: string;
+} & MobilityMapProps;
 
 const bbox = RVF_EXTENT_3857.join(",");
 
@@ -87,6 +95,8 @@ function RvfMobilityMap({
   center = null,
   extent = bbox,
   geolocation = "true",
+  layers = null,
+  layertree = "true",
   mapsurl = "https://maps.geops.io",
   maxextent = bbox,
   maxzoom = "20",
@@ -97,9 +107,11 @@ function RvfMobilityMap({
   notificationbeforelayerid = null,
   notificationurl = null,
   permalink = "false",
+  print = "true",
   realtime = "true",
   realtimeurl = "wss://api.geops.io/tracker-ws/v1/ws",
   search = "false",
+  share = "true",
   stopsurl = "https://api.geops.io/stops/v1/",
   tenant = null,
   toolbar = "true",
@@ -129,7 +141,42 @@ function RvfMobilityMap({
     useState<MaplibreStyleLayer>();
   const [sharedMobilityLayerGroup, setSharedMobilityLayerGroup] =
     useState<Group>();
-  const [hasToolbar] = useState<boolean>(toolbar === "true");
+
+  // Convert string boolean to boolean
+  const hasToolbar = useMemo(() => {
+    return toolbar === "true";
+  }, [toolbar]);
+
+  const hasLayerTree = useMemo(() => {
+    return layertree === "true";
+  }, [layertree]);
+
+  const hasRealtime = useMemo(() => {
+    return realtime === "true";
+  }, [realtime]);
+
+  const hasNotification = useMemo(() => {
+    return notification === "true";
+  }, [notification]);
+
+  const hasGeolocation = useMemo(() => {
+    return geolocation === "true";
+  }, [geolocation]);
+
+  const hasSearch = useMemo(() => {
+    return search === "true";
+  }, [search]);
+
+  const hasShare = useMemo(() => {
+    return share === "true";
+  }, [share]);
+
+  const hasPrint = useMemo(() => {
+    return print === "true";
+  }, [print]);
+
+  // Apply initial visibility of layers
+  useInitialLayersVisiblity(map, layers);
 
   // TODO: this should be removed. The parent application should be responsible to do this
   // or we should find something that fit more usecases
@@ -146,6 +193,7 @@ function RvfMobilityMap({
       geolocation,
       isFollowing,
       isTracking,
+      layers,
       map,
       mapsurl,
       maxextent,
@@ -190,6 +238,7 @@ function RvfMobilityMap({
     map,
     mapsurl,
     maxextent,
+    layers,
     maxzoom,
     minzoom,
     mots,
@@ -217,6 +266,8 @@ function RvfMobilityMap({
         center,
         extent,
         geolocation,
+        layers,
+        layertree,
         mapsurl,
         maxextent,
         maxzoom,
@@ -226,9 +277,11 @@ function RvfMobilityMap({
         notificationat,
         notificationbeforelayerid,
         notificationurl,
+        print,
         realtime,
         realtimeurl,
         search,
+        share,
         tenant,
         toolbar,
         zoom,
@@ -236,8 +289,10 @@ function RvfMobilityMap({
     );
   }, [
     baselayer,
+    layers,
     center,
     geolocation,
+    layertree,
     toolbar,
     mapsurl,
     maxzoom,
@@ -254,6 +309,8 @@ function RvfMobilityMap({
     zoom,
     extent,
     maxextent,
+    print,
+    share,
   ]);
 
   const rvfContextValue = useMemo(() => {
@@ -261,6 +318,7 @@ function RvfMobilityMap({
       isExportMenuOpen,
       isLayerTreeOpen,
       isShareMenuOpen,
+      layertree,
       lineNetworkPlanLayer,
       poisLayer,
       selectedFeature,
@@ -281,6 +339,7 @@ function RvfMobilityMap({
     };
   }, [
     isExportMenuOpen,
+    layertree,
     isLayerTreeOpen,
     isShareMenuOpen,
     lineNetworkPlanLayer,
@@ -399,8 +458,9 @@ function RvfMobilityMap({
               <Map className="relative flex-1 overflow-visible ">
                 <BaseLayer {...baseLayerProps} />
                 <SingleClickListener />
+                <RvfSelectedFeatureHighlightLayer />
 
-                {realtime === "true" && <RealtimeLayer title="Echtzeit" />}
+                {hasRealtime && <RealtimeLayer title="Echtzeit" />}
                 {
                   <StationsLayer
                     minZoom={10}
@@ -408,14 +468,14 @@ function RvfMobilityMap({
                     {...stationsLayerProps}
                   />
                 }
-                {notification === "true" && <NotificationLayer />}
+                {hasNotification && <NotificationLayer />}
+                <RvfTarifZonenLayer title="Tarifzonen" />
                 <RvfSellingPointsLayer isQueryable title="Verkaufsstellen" />
                 <RvfLineNetworkPlanLayer
                   isQueryable
                   minZoom={10}
                   title="Liniennetz"
                 />
-                <RvfTarifZonenLayer isQueryable title="Tarifzonen" />
                 <RvfPoisLayer title="POIs" />
                 <RvfSharedMobilityLayerGroup title="Shared Mobility" />
 
@@ -428,11 +488,11 @@ function RvfMobilityMap({
                 </div>
 
                 <div className="absolute right-2 top-2 z-10 flex flex-col gap-2">
-                  {geolocation === "true" && <GeolocationButton />}
-                  {!hasToolbar && <RvfExportMenuButton />}
+                  {hasGeolocation && <GeolocationButton />}
+                  {!hasToolbar && hasPrint && <RvfExportMenuButton />}
                 </div>
 
-                {search === "true" && (
+                {hasSearch && (
                   <div className="absolute left-2 right-12 top-2 z-10 flex max-h-[90%] min-w-64 max-w-96 flex-col">
                     <Search />
                   </div>
@@ -442,7 +502,7 @@ function RvfMobilityMap({
                   <RvfZoomButtons />
                 </div>
 
-                {!hasToolbar && (
+                {!hasToolbar && hasLayerTree && (
                   <RvfFloatingMenu
                     isOpen={isLayerTreeOpen}
                     onClick={onLayerTreeMenuClick}
@@ -453,10 +513,10 @@ function RvfMobilityMap({
                 )}
               </Map>
               <Overlay
-                className={"z-50"}
+                className={"z-50 bg-white"}
                 ScrollableHandlerProps={scrollableHandlerProps}
               >
-                {realtime === "true" && trainId && (
+                {hasRealtime && trainId && (
                   <>
                     <RvfOverlayHeader
                       onClose={() => {
@@ -486,21 +546,21 @@ function RvfMobilityMap({
                       }}
                       title="Informations"
                     ></RvfOverlayHeader>
-                    <RvfFeatureDetails className="relative flex flex-col gap-2 overflow-y-auto overflow-x-hidden  p-2" />
+                    <RvfFeatureDetails className="relative flex flex-col gap-2 overflow-y-auto overflow-x-hidden  px-2 pt-2" />
                   </>
                 )}
-                {hasToolbar && isExportMenuOpen && (
+                {hasToolbar && hasPrint && isExportMenuOpen && (
                   <>
                     <RvfOverlayHeader
                       onClose={() => {
                         setIsExportMenuOpen(false);
                       }}
-                      title="Export"
+                      title="Drücken"
                     ></RvfOverlayHeader>
-                    <RvfExportMenu className="relative flex flex-col gap-2 overflow-y-auto overflow-x-hidden  p-2" />
+                    <RvfExportMenu className="relative flex flex-col gap-8 overflow-y-auto overflow-x-hidden px-4 py-6" />
                   </>
                 )}
-                {hasToolbar && isLayerTreeOpen && (
+                {hasToolbar && hasLayerTree && isLayerTreeOpen && (
                   <>
                     <RvfOverlayHeader
                       onClose={() => {
@@ -508,33 +568,54 @@ function RvfMobilityMap({
                       }}
                       title="Layers"
                     ></RvfOverlayHeader>
-                    <Topics className="relative flex h-full flex-col overflow-y-auto overflow-x-hidden p-2" />
+                    <Topics className=" relative flex h-full flex-col overflow-y-auto overflow-x-hidden p-2" />
                   </>
                 )}
-                {hasToolbar && isShareMenuOpen && (
+                {hasToolbar && hasShare && isShareMenuOpen && (
                   <>
                     <RvfOverlayHeader
                       onClose={() => {
-                        setIsLayerTreeOpen(false);
+                        setIsShareMenuOpen(false);
                       }}
                       title="Share"
                     ></RvfOverlayHeader>
-                    <RvfShare className="relative flex h-full flex-col overflow-y-auto overflow-x-hidden p-2" />
+                    <RvfShare className="relative flex h-full flex-col gap-8 overflow-y-auto overflow-x-hidden px-4 py-6" />
                   </>
                 )}
               </Overlay>
 
               {hasToolbar && (
-                <div className={"overflow-x-hidden border-r"}>
-                  <RvfLayerTreeButton className={"border-none"} />
-                  <RvfExportMenuButton className={"border-none"} />
-                  <RvfShareMenuButton className={"border-none"} />
+                <div
+                  className={
+                    "z-[100] flex justify-around overflow-x-hidden border-t bg-white p-1 @lg/main:block @lg/main:border-r @lg/main:p-0 "
+                  }
+                >
+                  {hasLayerTree && (
+                    <RvfLayerTreeButton
+                      className={"border-none"}
+                      title="Layers"
+                    />
+                  )}
+
+                  {hasPrint && (
+                    <RvfExportMenuButton
+                      className={"border-none"}
+                      title="Drücken"
+                    />
+                  )}
+
+                  {hasShare && (
+                    <RvfShareMenuButton
+                      className={"border-none"}
+                      title="Share"
+                    />
+                  )}
                 </div>
               )}
 
-              {!hasToolbar && isExportMenuOpen && (
+              {!hasToolbar && hasPrint && isExportMenuOpen && (
                 <Modal onClose={onExportMenuClose}>
-                  <RvfExportMenu className="relative flex h-full flex-col overflow-y-auto  overflow-x-hidden" />
+                  <RvfExportMenu className="relative flex h-full flex-col overflow-y-auto  overflow-x-hidden p-2" />
                 </Modal>
               )}
             </div>

package/src/RvfOverlayHeader/RvfOverlayHeader.tsx

@@ -22,7 +22,7 @@ function RvfOverlayHeader({
   return (
     <div
       className={twMerge(
-        "flex flex-row items-center justify-between gap-2 p-2 border-b" +
+        "flex flex-row items-center justify-between gap-2 p-2 border-b pl-4" +
           (className || ""),
       )}
       {...props}