@geops/rvf-mobility-web-component 0.1.10 → 0.1.12

package/src/utils/exportPdf.ts

@@ -0,0 +1,657 @@
+import jsPDF, { jsPDFOptions } from "jspdf";
+import { CopyrightControl } from "mobility-toolbox-js/ol";
+import { Map } from "ol";
+import { Coordinate } from "ol/coordinate";
+import { Extent, getBottomRight, getTopLeft } from "ol/extent";
+import BaseLayer from "ol/layer/Base";
+import { MapOptions } from "ol/Map";
+import { Size } from "ol/size";
+import View, { ViewOptions } from "ol/View";
+
+import { RVF_EXTENT_3857 } from "./constants";
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const getMargin = (destCanvas) => {
+  const newMargin = destCanvas.width / 100; // 1% of the canvas width
+  return newMargin;
+};
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const getDefaultDownloadImageName = (format) => {
+  const fileExt = format === "image/jpeg" ? "jpg" : "png";
+  return `${window.document.title.replace(/ /g, "_").toLowerCase()}.${fileExt}`;
+};
+
+let multilineCopyright = false;
+const copyrightY = 0;
+
+// Ensure the font size fita with the image width.
+const decreaseFontSize = (destContext, maxWidth, copyright, scale = 1) => {
+  const minFontSize = 8;
+  let sizeMatch;
+  let fontSize;
+  do {
+    sizeMatch = destContext.font.match(/[0-9]+(?:\.[0-9]+)?(px)/i);
+    fontSize = parseInt(sizeMatch[0].replace(sizeMatch[1], ""), 10);
+
+    destContext.font = destContext.font.replace(fontSize, fontSize - 1);
+
+    multilineCopyright = false;
+
+    if (fontSize - 1 === minFontSize) {
+      multilineCopyright = true;
+    }
+  } while (
+    fontSize - 1 > minFontSize &&
+    destContext.measureText(copyright).width * scale > maxWidth
+  );
+
+  return destContext.font;
+};
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const drawTextBackground = (
+  destContext,
+  x,
+  y,
+  width,
+  height,
+  styleOptions = {},
+) => {
+  destContext.save();
+  // Dflt is a white background
+  destContext.fillStyle = "rgba(255,255,255,.8)";
+
+  // To simplify usability the user could pass a boolean to use only default values.
+  if (typeof styleOptions === "object") {
+    Object.entries(styleOptions).forEach(([key, value]) => {
+      destContext[key] = value;
+    });
+  }
+
+  /// draw background rect assuming height of font
+  destContext.fillRect(x, y, width, height);
+  destContext.restore();
+};
+
+export interface DrawCopyrightOptions {
+  background?: boolean;
+  fillStyle?: string;
+  font?: string;
+  margin?: number;
+  maxWidth?: number;
+  padding?: number;
+  placement?: Placement;
+  scale?: number;
+}
+
+export type Placement =
+  | "bottom-left"
+  | "bottom-right"
+  | "top-left"
+  | "top-right";
+
+// Remove all transparent pixels around the drawing
+const trimCanvas = (function () {
+  function rowBlank(imageData, width, y) {
+    for (let x = 0; x < width; ++x) {
+      if (imageData.data[y * width * 4 + x * 4 + 3] !== 0) {
+        return false;
+      }
+    }
+    return true;
+  }
+
+  function columnBlank(imageData, width, x, top, bottom) {
+    for (let y = top; y < bottom; ++y) {
+      if (imageData.data[y * width * 4 + x * 4 + 3] !== 0) {
+        return false;
+      }
+    }
+    return true;
+  }
+
+  return function (canvas) {
+    const ctx = canvas.getContext("2d");
+    const width = canvas.width;
+    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+    let bottom = imageData.height,
+      left = 0,
+      right = imageData.width,
+      top = 0;
+
+    while (top < bottom && rowBlank(imageData, width, top)) {
+      ++top;
+    }
+    while (bottom - 1 > top && rowBlank(imageData, width, bottom - 1)) {
+      --bottom;
+    }
+    while (left < right && columnBlank(imageData, width, left, top, bottom)) {
+      ++left;
+    }
+    while (
+      right - 1 > left &&
+      columnBlank(imageData, width, right - 1, top, bottom)
+    ) {
+      --right;
+    }
+
+    const trimmed = ctx.getImageData(left, top, right - left, bottom - top);
+    const copy = canvas.ownerDocument.createElement("canvas");
+    const copyCtx = copy.getContext("2d");
+    copy.width = trimmed.width;
+    copy.height = trimmed.height;
+    copyCtx.putImageData(trimmed, 0, 0);
+
+    return copy;
+  };
+})();
+
+const drawText = (
+  text: string,
+  width: number,
+  height: number,
+  contextProps: {
+    fillStyle?: string;
+    font?: string;
+    textAlign?: CanvasTextAlign;
+    textBaseline?: CanvasTextBaseline;
+  },
+) => {
+  const canvas = document.createElement("canvas");
+  canvas.width = width;
+  canvas.height = height;
+
+  const {
+    fillStyle = "black",
+    font = "12px Arial",
+    textAlign = "left",
+    textBaseline = "top",
+  } = contextProps;
+
+  const ctx = canvas.getContext("2d");
+
+  ctx.fillStyle = fillStyle;
+  ctx.font = font;
+  ctx.font = decreaseFontSize(ctx, canvas.width, text);
+  ctx.textAlign = textAlign;
+  ctx.textBaseline = textBaseline;
+
+  // We search if the display on 2 line is necessary
+  let firstLine = text;
+  let firstLineMetrics = ctx.measureText(firstLine);
+
+  // If the text is bigger than the max width we split it into 2 lines
+  if (multilineCopyright) {
+    const wordNumber = text.split(" ").length;
+    for (let i = 0; i < wordNumber; i += 1) {
+      // Stop removing word when fits within one line.
+      if (firstLineMetrics.width * scale < canvas.width) {
+        break;
+      }
+      firstLine = firstLine.substring(0, firstLine.lastIndexOf(" "));
+      firstLineMetrics = ctx.measureText(firstLine);
+    }
+  }
+
+  // Define second line if necessary
+  const secondLine = text.replace(firstLine, "").trim();
+
+  // At this point we know the number of lines to display.
+  let lines = [firstLine, secondLine].filter((l) => {
+    return !!l;
+  });
+
+  if (textBaseline === "bottom") {
+    lines = lines.reverse();
+  }
+
+  // Draw the elements on the canvas
+  const lineX = textAlign === "right" ? canvas.width : 0;
+  let lineY = textBaseline === "bottom" ? canvas.height : 0;
+
+  lines.forEach((line) => {
+    const { fontBoundingBoxAscent, fontBoundingBoxDescent } =
+      ctx.measureText(line);
+    const height = fontBoundingBoxAscent + fontBoundingBoxDescent;
+    ctx.fillText(line, lineX, lineY);
+
+    let delta = height;
+    if (textBaseline === "bottom") {
+      delta = -height;
+    }
+
+    lineY = lineY + delta;
+  });
+
+  const canvasTrim = trimCanvas(canvas);
+  return canvasTrim;
+};
+
+const drawCopyright = (
+  text: (() => string) | string,
+  destCanvas: HTMLCanvasElement,
+  options: DrawCopyrightOptions = {},
+) => {
+  const { fillStyle, font, margin = 10, placement = "bottom-left" } = options;
+  const [placementY, placementX] = placement.split("-");
+  const txt = typeof text === "function" ? text() : text;
+  const canvas = drawText(txt, destCanvas.width, destCanvas.height, {
+    fillStyle,
+    font,
+    textAlign: placementX as CanvasTextAlign,
+    textBaseline: placementY as CanvasTextBaseline,
+  });
+
+  let x = margin;
+  let y = margin;
+
+  if (placementX === "right") {
+    x = destCanvas.width - canvas.width - margin;
+  }
+  if (placementY === "bottom") {
+    y = destCanvas.height - canvas.height - margin;
+  }
+
+  destCanvas.getContext("2d").drawImage(canvas, x, y);
+};
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const drawElement = (
+  data: {
+    height?: number;
+    rotation?: (() => number) | number;
+    src: string;
+    width?: number;
+  },
+  destCanvas: HTMLCanvasElement,
+  scale: number,
+  margin: number,
+  padding: number,
+  previousItemSize = [0, 0],
+  side = "right",
+) => {
+  const destContext = destCanvas.getContext("2d");
+  const { height, rotation, src, width } = data;
+
+  return new Promise<number[] | undefined>((resolve) => {
+    const img = new Image();
+    img.crossOrigin = "Anonymous";
+    img.src = src;
+    img.onload = () => {
+      destContext.save();
+      const elementWidth = (width || 80) * scale;
+      const elementHeight = (height || 80) * scale;
+      const left =
+        side === "left"
+          ? margin + elementWidth / 2
+          : destCanvas.width - margin - elementWidth / 2;
+      const top =
+        (side === "left" && copyrightY
+          ? copyrightY - padding
+          : destCanvas.height) -
+        margin -
+        elementHeight / 2 -
+        previousItemSize[1];
+
+      destContext.translate(left, top);
+
+      if (rotation) {
+        const angle = typeof rotation === "function" ? rotation() : rotation;
+        destContext.rotate(angle * (Math.PI / 180));
+      }
+
+      destContext.drawImage(
+        img,
+        -elementWidth / 2,
+        -elementHeight / 2,
+        elementWidth,
+        elementHeight,
+      );
+      destContext.restore();
+
+      // Return the pixels width of the arrow and the margin right,
+      // that must not be occupied by the copyright.
+      resolve([elementWidth + 2 * padding, elementHeight + 2 * padding]);
+    };
+
+    img.onerror = () => {
+      resolve(undefined);
+    };
+  });
+};
+
+const calculatePixelsToExport = (map: Map, extent: Extent, coordinates) => {
+  let firstCoordinate;
+  let oppositeCoordinate;
+
+  if (extent) {
+    firstCoordinate = getTopLeft(extent);
+    oppositeCoordinate = getBottomRight(extent);
+  } else if (coordinates) {
+    // In case of coordinates coming from DragBox interaction:
+    //   firstCoordinate is the first coordinate drawn by the user.
+    //   oppositeCoordinate is the coordinate of the point dragged by the user.
+    [firstCoordinate, , oppositeCoordinate] = coordinates;
+  }
+
+  if (firstCoordinate && oppositeCoordinate) {
+    const firstPixel = map.getPixelFromCoordinate(firstCoordinate);
+    const oppositePixel = map.getPixelFromCoordinate(oppositeCoordinate);
+    const pixelTopLeft = [
+      firstPixel[0] <= oppositePixel[0] ? firstPixel[0] : oppositePixel[0],
+      firstPixel[1] <= oppositePixel[1] ? firstPixel[1] : oppositePixel[1],
+    ];
+    const pixelBottomRight = [
+      firstPixel[0] > oppositePixel[0] ? firstPixel[0] : oppositePixel[0],
+      firstPixel[1] > oppositePixel[1] ? firstPixel[1] : oppositePixel[1],
+    ];
+
+    return {
+      h: pixelBottomRight[1] - pixelTopLeft[1],
+      w: pixelBottomRight[0] - pixelTopLeft[0],
+      x: pixelTopLeft[0],
+      y: pixelTopLeft[1],
+    };
+  }
+  return null;
+};
+
+// Create an canvas from a map.
+const createCanvasImage = async (
+  map: Map,
+  extent?: Extent,
+  coordinates?: Coordinate[],
+): Promise<HTMLCanvasElement> => {
+  // Find all layer canvases and add it to dest canvas.
+  const canvases = map.getTargetElement().getElementsByTagName("canvas");
+
+  // Create the canvas to export with the good size.
+  let destCanvas: HTMLCanvasElement;
+  let destContext: CanvasRenderingContext2D;
+
+  // canvases is an HTMLCollection, we don't try to transform to array because some compilers like cra doesn't translate it right.
+  // eslint-disable-next-line @typescript-eslint/prefer-for-of
+  for (let i = 0; i < canvases.length; i += 1) {
+    const canvas = canvases[i];
+    if (!canvas.width || !canvas.height) {
+      continue;
+    }
+    const clip = calculatePixelsToExport(map, extent, coordinates) || {
+      h: canvas.height,
+      w: canvas.width,
+      x: 0,
+      y: 0,
+    };
+
+    if (!destCanvas) {
+      destCanvas = document.createElement("canvas");
+      destCanvas.width = clip.w;
+      destCanvas.height = clip.h;
+      destContext = destCanvas.getContext("2d");
+    }
+
+    // Draw canvas to the canvas to export.
+    destContext.drawImage(
+      canvas,
+      clip.x,
+      clip.y,
+      clip.w,
+      clip.h,
+      0,
+      0,
+      destCanvas.width,
+      destCanvas.height,
+    );
+  }
+
+  return destCanvas;
+};
+
+const downloadCanvasImage = async (
+  canvas: HTMLCanvasElement,
+  format = "image/png",
+  getDownloadImageName = (format: string) => {
+    return format.replace("/", ".");
+  },
+): Promise<boolean> => {
+  try {
+    // @ts-expect-error - msToBlob is not standard
+    if (window.navigator.msSaveBlob) {
+      // ie 11 and higher
+      let image;
+      try {
+        // @ts-expect-error - msToBlob is not standard
+        image = canvas.msToBlob();
+      } catch (error) {
+        console.error(error);
+      }
+      const blob = new Blob([image], {
+        type: format,
+      });
+      // @ts-expect-error - msSaveBlob is not standard
+      window.navigator.msSaveBlob(blob, getDownloadImageName(format));
+    } else {
+      canvas.toBlob((blob) => {
+        const link = document.createElement("a");
+        link.download = getDownloadImageName(format);
+        link.href = URL.createObjectURL(blob);
+        // append child to document for firefox to be able to download.
+        document.body.appendChild(link);
+        link.click();
+      }, format);
+    }
+
+    return true;
+  } catch (error) {
+    console.error(error);
+    return false;
+  }
+};
+
+// Create a map with the good pixel ratio and the good extent
+const createMapToExport = async (
+  map: Map,
+  layers: BaseLayer[],
+  extent?: Extent,
+  size?: Size,
+  mapOptions: MapOptions = {},
+  viewOptions: ViewOptions = {},
+): Promise<Map> => {
+  const mapSize = size || map.getSize();
+  const extentToFit = extent;
+
+  // We create a temporary map.
+  const div = document.createElement("div");
+  div.style.width = `${mapSize[0]}px`;
+  div.style.height = `${mapSize[1]}px`;
+  div.style.margin = `0 0 0 -50000px`; // we move the map to the left to be ensure it is hidden during export
+  document.body.style.overflow = "hidden";
+  div.style.position = "absolute";
+  div.style.top = "400px";
+  div.style.zIndex = "10000";
+  document.body.append(div);
+
+  const mapHd = new Map({
+    pixelRatio: window.devicePixelRatio,
+    target: div,
+    view: new View({
+      center: map.getView().getCenter(),
+      projection: map.getView().getProjection(),
+      zoom: map.getView().getZoom(),
+      ...viewOptions,
+      // extent: extentToFit,
+    }),
+    ...mapOptions,
+  });
+
+  if (extentToFit) {
+    mapHd.getView().fit(extentToFit);
+  }
+
+  mapHd.setLayers(layers);
+
+  // The following is a bit hackish I think it's because the RealtimeLayer is never considered as readyif there is not trajectories
+  const promise = new Promise<Map>((resolve) => {
+    // If nothing happens in 10 sec we try to produce a pdf
+    const timeout = window.setTimeout(() => {
+      resolve(mapHd);
+    }, 10000);
+
+    // rendercomplete is triggered when all the layers renderer have the property "ready" to true.
+    mapHd.once("rendercomplete", async () => {
+      clearTimeout(timeout);
+      resolve(mapHd);
+    });
+  });
+
+  return await promise;
+};
+
+// Sizes in pixel from a jspdf format
+export const sizesByFormat72Dpi: Record<string, number[]> = {
+  // https://www.din-formate.de/reihe-a-din-groessen-mm-pixel-dpi.html
+  A0: [3370, 2384],
+  A1: [2384, 1684],
+  A3: [1191, 842],
+  A4: [842, 595],
+};
+
+export interface CopyrightExportOptions {
+  margin?: number;
+  padding?: number;
+  placement?: "bottom-left" | "bottom-right" | "top-left" | "top-right";
+  text?: string;
+}
+
+export interface MapExportOptions {
+  copyrightOptions?: CopyrightExportOptions;
+  pixelRatio?: number;
+  text?: string;
+  useCopyright?: boolean;
+  useMaxExtent?: boolean;
+  usePlaceholder?: boolean;
+}
+
+async function exportPdf(
+  map: Map,
+  formatOptions: jsPDFOptions = {},
+  mapExportOptions: MapExportOptions = {},
+): Promise<boolean> {
+  const {
+    pixelRatio = 3,
+    useCopyright = true,
+    useMaxExtent = false,
+    usePlaceholder = true,
+  } = mapExportOptions;
+  const format = formatOptions?.format || "A4";
+  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();
+
+  // Save current pixel ratio
+  const actualPixelRatio = window.devicePixelRatio;
+
+  // Set pixel ratio for maplibre
+  Object.defineProperty(window, "devicePixelRatio", {
+    get() {
+      return pixelRatio;
+    },
+  });
+
+  // Create a shadow map during export process to avoid flickering
+  let placeholderCanvas: HTMLCanvasElement | undefined;
+  if (usePlaceholder) {
+    placeholderCanvas = await createCanvasImage(map);
+    placeholderCanvas.style.zIndex = "0";
+    placeholderCanvas.style.position = "absolute";
+    map
+      .getViewport()
+      .querySelector(".ol-layers")
+      .insertAdjacentElement("afterend", placeholderCanvas);
+  }
+
+  // Save current map state
+  const layers = [...map.getLayers().getArray()];
+
+  const copyrightText =
+    mapExportOptions?.copyrightOptions?.text ||
+    map
+      .getControls()
+      .getArray()
+      .find((control) => {
+        return control instanceof CopyrightControl;
+        // @ts-expect-error - element is private
+      })?.element?.textContent;
+
+  map.getLayers().clear();
+
+  // Creates a new map with proper size and extent
+  const mapToExport = await createMapToExport(map, layers, extent, size, {
+    pixelRatio: pixelRatio,
+  });
+
+  Object.defineProperty(window, "devicePixelRatio", {
+    get() {
+      return actualPixelRatio;
+    },
+  });
+
+  // Creates map canvas image
+  const canvas = await createCanvasImage(mapToExport);
+
+  // Clean up mapHd
+  mapToExport.getLayers().clear();
+  mapToExport.getTargetElement().remove();
+  mapToExport.setTarget(null);
+  mapToExport.dispose();
+
+  document.body.style.overflow = "auto";
+
+  // Reset map to previous state
+  map.setLayers(layers);
+
+  if (placeholderCanvas) {
+    map.once("rendercomplete", () => {
+      placeholderCanvas.remove();
+    });
+  }
+
+  // Add custom content
+  if (useCopyright) {
+    drawCopyright(copyrightText, canvas, {
+      ...(mapExportOptions?.copyrightOptions || {}),
+      font: (pixelRatio * 12).toString() + "px Arial",
+    });
+  }
+
+  // Transform to PDF
+  if (/^A[0-9]{1,2}/.test(format as string) || format?.length === 2) {
+    try {
+      const doc = new jsPDF({
+        orientation: "landscape",
+        unit: "pt",
+        ...formatOptions,
+      });
+
+      // Add canvas to PDF
+      doc.addImage(canvas, "JPEG", 0, 0, sizePt[0], sizePt[1]);
+
+      // Download the pdf
+      doc.save(`rvf-${new Date().toISOString().slice(0, 10)}.pdf`);
+    } catch (error) {
+      console.error(error);
+      return false;
+    }
+    return true;
+  } else {
+    // Download the canvas as image
+    return await downloadCanvasImage(canvas);
+  }
+}
+
+export default exportPdf;

package/src/utils/hooks/useRvfContext.tsx

@@ -0,0 +1,37 @@
+import { Feature } from "ol";
+import { createContext } from "preact";
+import { useContext } from "preact/hooks";
+
+export interface RvfContextType {
+  isExportMenuOpen: boolean;
+  selectedFeature: Feature;
+  selectedFeatures: Feature[];
+  setIsExportMenuOpen: (isOpen: boolean) => void;
+  setSelectedFeature: (feature: Feature) => void;
+  setSelectedFeatures: (features: Feature[]) => void;
+}
+
+export const RvfContext = createContext<RvfContextType>({
+  isExportMenuOpen: false,
+  selectedFeature: null,
+  selectedFeatures: [],
+  setIsExportMenuOpen: () => {
+    console.warn("setIsExportMenuOpen is not implemented");
+  },
+  setSelectedFeature: () => {
+    console.warn("setSelectedFeature is not implemented");
+  },
+  setSelectedFeatures: () => {
+    console.warn("setSelectedFeatures is not implemented");
+  },
+});
+
+const useRvfContext = (): RvfContextType => {
+  const context = useContext<RvfContextType>(RvfContext);
+  if (!context) {
+    throw new Error("useRvfContext must be used within a ContextProvider");
+  }
+  return context;
+};
+
+export default useRvfContext;