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

package/src/utils/exportPdf.ts

@@ -26,7 +26,7 @@ let multilineCopyright = false;
 const copyrightY = 0;
 
 // Ensure the font size fita with the image width.
-const decreaseFontSize = (destContext, maxWidth, copyright, scale) => {
+const decreaseFontSize = (destContext, maxWidth, copyright, scale = 1) => {
   const minFontSize = 8;
   let sizeMatch;
   let fontSize;
@@ -158,7 +158,6 @@ const drawText = (
     textBaseline?: CanvasTextBaseline;
   },
 ) => {
-  const scale = 1;
   const canvas = document.createElement("canvas");
   canvas.width = width;
   canvas.height = height;
@@ -174,7 +173,7 @@ const drawText = (
 
   ctx.fillStyle = fillStyle;
   ctx.font = font;
-  ctx.font = decreaseFontSize(ctx, canvas.width, text, scale);
+  ctx.font = decreaseFontSize(ctx, canvas.width, text);
   ctx.textAlign = textAlign;
   ctx.textBaseline = textBaseline;
 
@@ -462,15 +461,6 @@ const createMapToExport = async (
   const mapSize = size || map.getSize();
   const extentToFit = extent;
 
-  // We apply preserveDrawingBuffer=true to be able to export the canvas.
-  // layers.forEach((layer) => {
-  //   // @ts-expect-error - mapLibreMap is private
-  //   if (layer?.mapLibreMap as MaplibreGlMap) {
-  //     const opts = layer.get("mapLibreOptions");
-  //     opts.preserveDrawingBuffer = true;
-  //   }
-  // });
-
   // We create a temporary map.
   const div = document.createElement("div");
   div.style.width = `${mapSize[0]}px`;
@@ -490,6 +480,7 @@ const createMapToExport = async (
       projection: map.getView().getProjection(),
       zoom: map.getView().getZoom(),
       ...viewOptions,
+      // extent: extentToFit,
     }),
     ...mapOptions,
   });
@@ -514,15 +505,6 @@ const createMapToExport = async (
     });
   });
 
-  // We apply preserveDrawingBuffer=true to be able to export the canvas.
-  // layers.forEach((layer) => {
-  //   // @ts-expect-error - mapLibreMap is private
-  //   if (layer?.mapLibreMap as MaplibreGlMap) {
-  //     const opts = layer.get("mapLibreOptions");
-  //     opts.preserveDrawingBuffer = false;
-  //   }
-  // });
-
   return await promise;
 };
 
@@ -544,6 +526,8 @@ export interface CopyrightExportOptions {
 
 export interface MapExportOptions {
   copyrightOptions?: CopyrightExportOptions;
+  onAfter?: (map: Map, layers: BaseLayer[]) => void;
+  onBefore?: (map: Map, layers: BaseLayer[]) => void;
   pixelRatio?: number;
   text?: string;
   useCopyright?: boolean;
@@ -557,13 +541,19 @@ async function exportPdf(
   mapExportOptions: MapExportOptions = {},
 ): Promise<boolean> {
   const {
+    onAfter,
+    onBefore,
     pixelRatio = 3,
     useCopyright = true,
     useMaxExtent = false,
     usePlaceholder = true,
   } = mapExportOptions;
+
   const format = formatOptions?.format || "A4";
-  const size = sizesByFormat72Dpi[format as string] || (format as number[]);
+  const sizePt = sizesByFormat72Dpi[format as string] || (format as number[]);
+  const size = sizePt.map((n) => {
+    return (n * 96) / 72;
+  });
   const extent = useMaxExtent
     ? RVF_EXTENT_3857
     : map.getView().calculateExtent();
@@ -605,6 +595,9 @@ async function exportPdf(
 
   map.getLayers().clear();
 
+  // Hide/show some layer before export
+  onBefore?.(map, layers);
+
   // Creates a new map with proper size and extent
   const mapToExport = await createMapToExport(map, layers, extent, size, {
     pixelRatio: pixelRatio,
@@ -627,6 +620,9 @@ async function exportPdf(
 
   document.body.style.overflow = "auto";
 
+  // Undo what you have done on onBefore
+  onAfter?.(map, layers);
+
   // Reset map to previous state
   map.setLayers(layers);
 
@@ -640,26 +636,21 @@ async function exportPdf(
   if (useCopyright) {
     drawCopyright(copyrightText, canvas, {
       ...(mapExportOptions?.copyrightOptions || {}),
-      maxWidth: canvas.width / 2,
-      scale: pixelRatio,
+      font: (pixelRatio * 12).toString() + "px Arial",
     });
   }
 
   // Transform to PDF
   if (/^A[0-9]{1,2}/.test(format as string) || format?.length === 2) {
     try {
-      const size300Dpi = size.map((n) => {
-        return (n * 300) / 72;
-      });
       const doc = new jsPDF({
         orientation: "landscape",
         unit: "pt",
         ...formatOptions,
-        format: size300Dpi,
       });
 
       // Add canvas to PDF
-      doc.addImage(canvas, "JPEG", 0, 0, size300Dpi[0], size300Dpi[1]);
+      doc.addImage(canvas, "JPEG", 0, 0, sizePt[0], sizePt[1]);
 
       // Download the pdf
       doc.save(`rvf-${new Date().toISOString().slice(0, 10)}.pdf`);

package/src/utils/getAllLayers.ts

@@ -0,0 +1,25 @@
+import { Collection } from "ol";
+import BaseLayer from "ol/layer/Base";
+import Group from "ol/layer/Group";
+
+const getAllLayers = (
+  layersOrLayerGroup: BaseLayer[] | Collection<BaseLayer> | Group,
+) => {
+  const allLayers = [];
+  function addLayersFrom(layers: BaseLayer[] | Collection<BaseLayer>) {
+    layers.forEach(function (layer) {
+      if (layer instanceof Group) {
+        addLayersFrom((layer as Group).getLayers());
+      } else {
+        allLayers.push(layer);
+      }
+    });
+  }
+  addLayersFrom(
+    (layersOrLayerGroup as Group)?.getLayers?.() ||
+      (layersOrLayerGroup as BaseLayer[] | Collection<BaseLayer>),
+  );
+  return allLayers;
+};
+
+export default getAllLayers;

package/src/utils/hooks/useRvfContext.tsx

@@ -1,29 +1,62 @@
+import { MaplibreStyleLayer } from "mobility-toolbox-js/ol";
 import { Feature } from "ol";
+import { Group } from "ol/layer";
 import { createContext } from "preact";
 import { useContext } from "preact/hooks";
 
 export interface RvfContextType {
   isExportMenuOpen: boolean;
+  lineNetworkPlanLayer: MaplibreStyleLayer;
+  poisLayer: MaplibreStyleLayer;
   selectedFeature: Feature;
   selectedFeatures: Feature[];
+  sellingPointsLayer: MaplibreStyleLayer;
   setIsExportMenuOpen: (isOpen: boolean) => void;
+  setLineNetworkPlanLayer: (layer: MaplibreStyleLayer) => void;
+  setPoisLayer: (layer: MaplibreStyleLayer) => void;
   setSelectedFeature: (feature: Feature) => void;
   setSelectedFeatures: (features: Feature[]) => void;
+  setSellingPointsLayer: (layer: MaplibreStyleLayer) => void;
+  setSharedMobilityLayerGroup: (group: Group) => void;
+  setTarifZonenLayer: (layer: MaplibreStyleLayer) => void;
+  sharedMobilityLayerGroup: Group;
+  tarifZonenLayer: MaplibreStyleLayer;
 }
 
 export const RvfContext = createContext<RvfContextType>({
   isExportMenuOpen: false,
+  lineNetworkPlanLayer: null,
+  poisLayer: null,
   selectedFeature: null,
   selectedFeatures: [],
+  sellingPointsLayer: null,
   setIsExportMenuOpen: () => {
     console.warn("setIsExportMenuOpen is not implemented");
   },
+  setLineNetworkPlanLayer: () => {
+    console.warn("setLineNetworkPlanLayer is not implemented");
+  },
+  setPoisLayer: () => {
+    console.warn("setPoisLayer is not implemented");
+  },
+
   setSelectedFeature: () => {
     console.warn("setSelectedFeature is not implemented");
   },
   setSelectedFeatures: () => {
     console.warn("setSelectedFeatures is not implemented");
   },
+  setSellingPointsLayer: () => {
+    console.warn("setSellingPointsLayer is not implemented");
+  },
+  setSharedMobilityLayerGroup: () => {
+    console.warn("setSharedMobilityLayerGroup is not implemented");
+  },
+  setTarifZonenLayer: () => {
+    console.warn("setTarifZonenLayer is not implemented");
+  },
+  sharedMobilityLayerGroup: null,
+  tarifZonenLayer: null,
 });
 
 const useRvfContext = (): RvfContextType => {

package/tailwind.config.mjs

@@ -11,13 +11,13 @@ const getClamp = (min, max) => {
     min +
     "px + (" +
     max +
-    "-" +
+    " - " +
     min +
-    ") * (100vw - " +
+    ") * (100cqw - " +
     minScreenSize +
-    "px)/( " +
+    "px) / ( " +
     maxScreenSize +
-    "-" +
+    " - " +
     minScreenSize +
     ")), " +
     max +
@@ -25,6 +25,28 @@ const getClamp = (min, max) => {
   );
 };
 
+// const getClamp = (min, max) => {
+//   return (
+//     "clamp(" +
+//     min +
+//     "px, calc(" +
+//     min +
+//     "px + (" +
+//     max +
+//     "-" +
+//     min +
+//     ") * (100vw - " +
+//     minScreenSize +
+//     "px)/( " +
+//     maxScreenSize +
+//     "-" +
+//     minScreenSize +
+//     ")), " +
+//     max +
+//     "px )"
+//   );
+// };
+
 export default {
   plugins: [containerQueries],
   theme: {
@@ -39,14 +61,10 @@ export default {
         ultradarkgray: "#2D2D2C", // another grey with no name
         ultralightgrey: "#F5F5F5", // ultralight grey
       },
-      maxHeight: {
-        button: "40px",
-      },
-      maxWidth: {
-        button: "40px",
-      },
-      padding: {
-        1.75: "7px",
+      width: {
+        10: "40px", // for Route Schedule
+        8: "32px", // for Route Schedule
+        9: "36px", // for Route Schedule
       },
     },
     fontFamily: {
@@ -65,44 +83,7 @@ export default {
       lg: getClamp(19, 25), // H4
       sm: getClamp(13, 15), // small
       xl: getClamp(24, 31), // h3
+      xs: getClamp(13, 15), // small
     },
-    extend: {
-      colors: {
-        darkgray: "#464646", // dark grey
-        grey: "#7C7C7C", // grey
-        lightgrey: "#D0D0D0", // light grey
-        red: "#E3000B", // rvf rot
-        ultradarkgray: "#2D2D2C", // another grey with no name
-        ultralightgrey: "#F5F5F5", // ultralight grey
-      },
-      width: {
-        'largeMenu': '350px',
-        'mediumMenu': '300px',
-        'inputControl': '20px',
-        'check': '6px',
-        'innerControl': '12px',
-      },
-      height: {
-        'inputControl': '20px',
-        'innerControl': '12px',
-      },
-      maxWidth: {
-        'button': '40px'
-      },
-      maxHeight: {
-        'button': '40px'
-      },
-      padding: {
-        '1.75': '7px'
-      },
-      margin: {
-        '4px': '4px',
-        '7px': '7px'
-      },
-      screens: {
-        'medium': '577px',
-        'large': '993px'
-      }
-    }
   },
 };

package/src/LayerTree/TreeItem/TreeItem.tsx

@@ -1,145 +0,0 @@
-import type { JSX, PreactDOMAttributes } from "preact";
-
-import BaseLayer from "ol/layer/Base";
-import { SVGProps, useContext, useEffect, useState } from "preact/compat";
-
-import { LayersTreeDispatchContext } from "../layersTreeContext";
-import TreeItemContainer from "../TreeItemContainer";
-
-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,
-  Icon,
-  isCollapsedOnControlClick,
-  isControlChecked,
-  layer,
-  onIconClick,
-  selectionType,
-  title,
-}: TreeItemProps) {
-  const [isContainerVisible, setIsContainerVisible] = useState(true);
-  const dispatch = useContext(LayersTreeDispatchContext);
-
-  useEffect(() => {
-    if (isCollapsedOnControlClick) {
-      setIsContainerVisible(isControlChecked);
-    }
-  }, [isControlChecked, isCollapsedOnControlClick]);
-
-  const handleItemClick = () => {
-    setIsContainerVisible(!isContainerVisible);
-
-    if (isCollapsedOnControlClick && !isContainerVisible) {
-      if (selectionType === SelectionType.RADIO) {
-        dispatch({
-          payload: {
-            ...this["props"],
-            isControlChecked: true,
-          },
-          type: "SELECT_RADIO_ITEM",
-        });
-      }
-    }
-  };
-
-  const handleSelectionChange = (event) => {
-    console.log("TREE LAYER", layer);
-
-    if (selectionType === SelectionType.RADIO) {
-      dispatch({
-        payload: {
-          ...this["props"],
-          isControlChecked: event.target.checked,
-        },
-        type: "SELECT_RADIO_ITEM",
-      });
-    } else {
-      dispatch({
-        payload: {
-          ...this["props"],
-          isControlChecked: event.target.checked,
-        },
-        type: "SELECT_ITEM",
-      });
-    }
-  };
-
-  const arrowShowedClass = childItems.length > 0 ? "block" : "hidden";
-  const changeArrowClass = isContainerVisible
-    ? "border-l border-t"
-    : "border-b border-r";
-  const radioButtonClass =
-    "appearance-none w-inputControl h-inputControl border-2 border-grey rounded-full mr-2 peer";
-  const checkboxClass =
-    "appearance-none w-inputControl h-inputControl border-2 border-grey rounded mr-2 peer";
-
-  const innerCircle = (
-    <span className="pointer-events-none absolute ml-4px h-innerControl w-innerControl rounded-full peer-checked:bg-red" />
-  );
-  const checkSign = (
-    <span className="pointer-events-none absolute mb-px ml-7px hidden h-innerControl w-check rotate-45 border-b-2 border-r-2 border-grey peer-checked:block" />
-  );
-
-  const renderedLayers = childItems.map((item, idx) => {
-    return <TreeItem key={idx} {...item} />;
-  });
-
-  return (
-    <div className="flex flex-col pl-6">
-      <div className="flex h-8 cursor-pointer items-center">
-        <div className="relative flex items-center">
-          <input
-            checked={isControlChecked}
-            className={
-              selectionType === SelectionType.RADIO
-                ? radioButtonClass
-                : checkboxClass
-            }
-            onChange={handleSelectionChange}
-            type={selectionType}
-          />
-          {selectionType === SelectionType.RADIO ? innerCircle : checkSign}
-        </div>
-        <div
-          onClick={handleItemClick}
-          onKeyDown={handleItemClick}
-          role="button"
-          tabIndex={0}
-        >
-          <div className="flex items-center">
-            {title}
-            <div
-              className={`mb-0.5 ml-2 size-1.5 rotate-45 border-grey ${arrowShowedClass} ${changeArrowClass}`}
-            ></div>
-          </div>
-        </div>
-        <span>{Icon ? <Icon onClick={onIconClick} /> : null}</span>
-      </div>
-      <TreeItemContainer
-        className={isContainerVisible ? "block" : "hidden"}
-        selectionType={childItems[0]?.selectionType}
-      >
-        {renderedLayers}
-      </TreeItemContainer>
-    </div>
-  );
-}
-
-export default TreeItem;

package/src/LayerTree/TreeItemContainer/TreeItemContainer.tsx

@@ -1,16 +0,0 @@
-import { type JSX, type PreactDOMAttributes } from "preact";
-
-import { SelectionType } from "../TreeItem/TreeItem";
-
-export type TreeItemContainerProps = {
-  selectionType: SelectionType;
-} & JSX.HTMLAttributes<HTMLButtonElement> &
-  PreactDOMAttributes;
-
-function TreeItemContainer({ children, className }: TreeItemContainerProps) {
-  const classes = `flex flex-col ${className || ""}`;
-
-  return <div className={classes}>{children}</div>;
-}
-
-export default TreeItemContainer;

package/src/LayerTree/TreeItemContainer/index.tsx

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

package/src/LayerTree/index.tsx

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

package/src/TopicMenu/TopicMenu.tsx

@@ -1,143 +0,0 @@
-import { Map } from "ol";
-import { Group } from "ol/layer";
-
-import LayerTree from "../LayerTree";
-import { SelectionType } from "../LayerTree/TreeItem/TreeItem";
-
-function TopicMenu({ map }: { map: Map }) {
-  const layers = map
-    .getLayers()
-    .getArray()
-    .filter((layer) => {
-      return !layer.get("isNotInLayerTree");
-    })
-    .map((layer) => {
-      return {
-        childItems:
-          (layer as Group)
-            ?.getLayers?.()
-            .getArray()
-            .map((subLayer) => {
-              return {
-                childItems: [],
-                id: (Math.random() + 1).toString(36).substring(7),
-                isControlChecked: subLayer.getVisible(),
-                layer: subLayer,
-                selectionType: SelectionType.CHECKBOX,
-                title: subLayer.get("title"),
-              };
-            }) || [],
-        id: (Math.random() + 1).toString(36).substring(7),
-        isControlChecked: layer.getVisible(),
-        layer,
-        selectionType: SelectionType.CHECKBOX,
-        title: layer.get("title"),
-      };
-    });
-
-  // const readyLayers = [
-  //   {
-  //     childItems: layers.map((layer) => {
-  //       return {
-  //         ...layer,
-  //         id: (Math.random() + 1).toString(36).substring(7),
-  //       };
-  //     }),
-  //     id: (Math.random() + 1).toString(36).substring(7),
-  //     isCollapsedOnControlClick: true,
-  //     isControlChecked: true,
-  //     selectionType: SelectionType.RADIO,
-  //     title: "Topic 1",
-  //   },
-  // {
-  //   childItems: layers.map((layer) => {
-  //     return {
-  //       ...layer,
-  //       id: (Math.random() + 1).toString(36).substring(7),
-  //     };
-  //   }),
-  //   id: (Math.random() + 1).toString(36).substring(7),
-  //   isCollapsedOnControlClick: true,
-  //   selectionType: SelectionType.RADIO,
-  //   title: "Topic 2",
-  // },
-  // {
-  //   childItems: layers.map((layer) => {
-  //     return {
-  //       ...layer,
-  //       id: (Math.random() + 1).toString(36).substring(7),
-  //       isControlChecked: false,
-  //       selectionType: SelectionType.RADIO,
-  //     };
-  //   }),
-  //   id: (Math.random() + 1).toString(36).substring(7),
-  //   isCollapsedOnControlClick: true,
-  //   selectionType: SelectionType.RADIO,
-  //   title: "Topic 3",
-  // },
-  // ];
-
-  // readyLayers[0].childItems[0].childItems = layers.map((layer, idx) => {
-  //   return {
-  //     ...layer,
-  //     id: (Math.random() + 1).toString(36).substring(7),
-  //     isControlChecked: idx === 0,
-  //     selectionType: SelectionType.RADIO,
-  //   };
-  // });
-
-  // readyLayers[1].childItems[0].childItems = layers.map((layer, idx) => {
-  //   return {
-  //     ...layer,
-  //     id: (Math.random() + 1).toString(36).substring(7),
-  //     isControlChecked: idx === 0,
-  //     selectionType: SelectionType.RADIO,
-  //   };
-  // });
-
-  // readyLayers[0].childItems[1].childItems = layers.map((layer) => {
-  //   return {
-  //     ...layer,
-  //     id: (Math.random() + 1).toString(36).substring(7),
-  //     selectionType: SelectionType.CHECKBOX,
-  //   };
-  // });
-
-  // readyLayers[0].childItems[1].childItems[0].childItems = layers.map(
-  //   (layer) => {
-  //     return {
-  //       ...layer,
-  //       id: (Math.random() + 1).toString(36).substring(7),
-  //       selectionType: SelectionType.CHECKBOX,
-  //     };
-  //   },
-  // );
-
-  // readyLayers[2].childItems[0].childItems = layers.map((layer) => {
-  //   return {
-  //     ...layer,
-  //     id: (Math.random() + 1).toString(36).substring(7),
-  //     isControlChecked: false,
-  //     selectionType: SelectionType.RADIO,
-  //   };
-  // });
-
-  // readyLayers[2].childItems[1].childItems = layers.map((layer) => {
-  //   return {
-  //     ...layer,
-  //     id: (Math.random() + 1).toString(36).substring(7),
-  //     isControlChecked: false,
-  //     selectionType: SelectionType.RADIO,
-  //   };
-  // });
-
-  // console.log("READY LAYERS", readyLayers);
-
-  return (
-    <div className="max-h-80 overflow-scroll bg-white medium:w-largeMenu large:w-mediumMenu">
-      <LayerTree layers={layers} />
-    </div>
-  );
-}
-
-export default TopicMenu;

package/src/TopicMenu/index.tsx

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