@geops/rvf-mobility-web-component 0.1.127-beta.1 → 0.1.127-beta.2

package/src/utils/exportPdf.ts

@@ -1,671 +0,0 @@
-import jsPDF from "jspdf";
-import { CopyrightControl } from "mobility-toolbox-js/ol";
-import { Map } from "ol";
-import { getBottomRight, getTopLeft } from "ol/extent";
-import View from "ol/View";
-
-import { EXPORT_PREFIX } from "./constants";
-
-import type { jsPDFOptions } from "jspdf";
-import type { Coordinate } from "ol/coordinate";
-import type { Extent } from "ol/extent";
-import type BaseLayer from "ol/layer/Base";
-import type { MapOptions } from "ol/Map";
-import type { Size } from "ol/size";
-import type { ViewOptions } from "ol/View";
-
-// 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.
-      // Wher comes the scale from?
-      // if (firstLineMetrics.width * (scale ?? 1) < canvas.width) {
-      if (firstLineMetrics.width * 1 < 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 heightt = fontBoundingBoxAscent + fontBoundingBoxDescent;
-    ctx.fillText(line, lineX, lineY);
-
-    let delta = heightt;
-    if (textBaseline === "bottom") {
-      delta = -heightt;
-    }
-
-    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 = (
-  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 Promise.resolve(destCanvas);
-};
-
-const downloadCanvasImage = (
-  canvas: HTMLCanvasElement,
-  format = "image/png",
-  getDownloadImageName = (formatImage: string) => {
-    return formatImage.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 Promise.resolve(true);
-  } catch (error) {
-    console.error(error);
-    return Promise.resolve(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", () => {
-      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;
-  maxExtent?: number[];
-  onAfter?: (map: Map, layers: BaseLayer[]) => void;
-  onBefore?: (map: Map, layers: BaseLayer[]) => void;
-  pixelRatio?: number;
-  text?: string;
-  useCopyright?: boolean;
-  usePlaceholder?: boolean;
-}
-
-async function exportPdf(
-  map: Map,
-  formatOptions: jsPDFOptions = {},
-  mapExportOptions: MapExportOptions = {},
-): Promise<boolean> {
-  const {
-    maxExtent,
-    onAfter,
-    onBefore,
-    pixelRatio = 3,
-    useCopyright = true,
-    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 = maxExtent;
-
-  // 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();
-
-  // 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,
-  });
-  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);
-
-  // Undo what you have done on onBefore
-  onAfter?.(map, 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(`${EXPORT_PREFIX}-${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/fullTrajectoryStyle.ts

@@ -1,53 +0,0 @@
-import { Circle, Fill, Stroke, Style } from "ol/style";
-
-import getBgColor from "./getBgColor";
-
-import type { FeatureLike } from "ol/Feature";
-
-const borderStyle = new Style({
-  image: new Circle({
-    fill: new Fill({
-      color: "#000000",
-    }),
-    radius: 5,
-  }),
-  stroke: new Stroke({
-    color: "#000000",
-    width: 6,
-  }),
-  zIndex: 2,
-});
-
-const fullTrajectoryStyle = (feature: FeatureLike): Style[] => {
-  let lineColor = "#ffffff"; // white
-
-  const type = feature.get("type");
-  let stroke = feature.get("stroke");
-
-  if (stroke && stroke[0] !== "#") {
-    stroke = `#${stroke}`;
-  }
-  lineColor = stroke || getBgColor(type, { name: feature.get("line_name") });
-
-  // Don't allow white lines, use red instead.
-  lineColor = /#ffffff/i.test(lineColor) ? "#ff0000" : lineColor;
-
-  const style = [
-    borderStyle,
-    new Style({
-      image: new Circle({
-        fill: new Fill({
-          color: lineColor,
-        }),
-        radius: 4,
-      }),
-      stroke: new Stroke({
-        color: lineColor,
-        width: 4,
-      }),
-      zIndex: 3,
-    }),
-  ];
-  return style;
-};
-export default fullTrajectoryStyle;