react-spatial 2.0.0-beta.1 → 2.0.0-beta.2

package/components/CanvasSaveButton/CanvasSaveButton.js

@@ -1,36 +1,26 @@
-/* eslint-disable no-param-reassign */
-function objectWithoutProperties (obj, exclude) { var target = {}; for (var k in obj) if (Object.prototype.hasOwnProperty.call(obj, k) && exclude.indexOf(k) === -1) target[k] = obj[k]; return target; }
-import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
-import OLMap from 'ol/Map';
-import { getTopLeft, getBottomRight } from 'ol/extent';
-import NorthArrowSimple from '../../images/northArrow.url.svg';
-import NorthArrowCircle from '../../images/northArrowCircle.url.svg';
-
-var propTypes = {
+import { getBottomRight, getTopLeft } from "ol/extent";
+import OLMap from "ol/Map";
+import PropTypes from "prop-types";
+import React, { useCallback } from "react";
+import NorthArrowSimple from "../../images/northArrow.url.svg";
+import NorthArrowCircle from "../../images/northArrowCircle.url.svg";
+const extraDataImgPropType = PropTypes.shape({
+  circled: PropTypes.bool,
+  height: PropTypes.number,
+  rotation: PropTypes.oneOfType([PropTypes.number, PropTypes.func]),
+  src: PropTypes.string,
+  width: PropTypes.number
+});
+const CanvasPatternType = typeof CanvasPattern === "undefined" ? Function : CanvasPattern;
+const propTypes = {
   /**
    * Automatically download the image saved.
    */
   autoDownload: PropTypes.bool,
-
   /**
    * Children content of the button.
    */
   children: PropTypes.node,
-
-  /**
-   * Output format of the image.
-   */
-  format: PropTypes.oneOf(['image/jpeg', 'image/png']),
-
-  /** An  [ol/map](https://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html). */
-  map: PropTypes.instanceOf(OLMap),
-
-  /**
-   * Extent for the export. If no extent is given, the whole map is exported.
-   */
-  extent: PropTypes.arrayOf(PropTypes.number),
-
   /**
    * Array of 4 [ol/Coordinate](https://openlayers.org/en/latest/apidoc/module-ol_coordinate.html#~Coordinate).
    * If no coordinates and no extent are given, the whole map is exported.
@@ -39,575 +29,463 @@ var propTypes = {
    * If extent is specified, coordinates property is ignored.
    */
   coordinates: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.number)),
-
   /**
-   * Scale the map for better quality. Possible values: 1, 2 or 3.
-   * WARNING: The tiled layer with a WMTS or XYZ source must provides an url
-   * for each scale in the config file.
+   * Extent for the export. If no extent is given, the whole map is exported.
    */
-  scale: PropTypes.number,
-
+  extent: PropTypes.arrayOf(PropTypes.number),
   /**
-   * Function called before the dowload process begins.
+     * Extra data, such as copyright, north arrow configuration.
+     * All extra data is optional.
+     *
+     * Example 1:
+     *
+      {
+        copyright: {
+          text: 'Example copyright', // Copyright text or function
+          font: '10px Arial', // Font, default is '12px Arial'
+          fillStyle: 'blue', // Fill style, default is 'black'
+        },
+        northArrow,  // True if the north arrow
+                     // should be placed with default configuration
+                     // (default image, rotation=0, circled=false)
+      }
+     * Example 2:
+     *
+      {
+        northArrow: {
+          src: NorthArrowCustom,
+          width: 60, // Width in px, default is 80
+          height: 100, // Height in px, default is 80
+          rotation: 25, // Absolute rotation in degrees as number or function
+  
+        }
+      }
+     * Example 3:
+     *
+      {
+        copyright: {
+          text: () => { // Copyright as function
+            return this.copyright;
+          },
+        },
+        northArrow: {
+          rotation: () => { // Rotation as function
+            return NorthArrow.radToDeg(this.map.getView().getRotation());
+          },
+          circled, // Display circle around the north arrow (Does not work for custom src)
+        },
+      }
+     */
+  extraData: PropTypes.shape({
+    copyright: PropTypes.shape({
+      background: PropTypes.bool,
+      fillStyle: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.instanceOf(CanvasPatternType)
+      ]),
+      font: PropTypes.string,
+      maxWidth: PropTypes.number,
+      paddingBackground: PropTypes.number,
+      paddingBottom: PropTypes.number,
+      text: PropTypes.oneOfType([PropTypes.string, PropTypes.func])
+    }),
+    logo: extraDataImgPropType,
+    northArrow: extraDataImgPropType,
+    qrCode: extraDataImgPropType
+  }),
+  /**
+   * Output format of the image.
    */
-  onSaveStart: PropTypes.func,
-
+  format: PropTypes.oneOf(["image/jpeg", "image/png"]),
+  /**
+   * Return the file name of the image to download.
+   */
+  getDownloadImageName: PropTypes.func,
+  /** An  [ol/map](https://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html). */
+  map: PropTypes.instanceOf(OLMap),
+  /**
+   * Space (in pixels) between the border of the canvas and the elements.
+   * Default to 1% of the canvas width.
+   */
+  margin: PropTypes.number,
   /**
    * Function called after the dowload process ends.
    *
    * @param {object} error Error message the process fails.
    */
   onSaveEnd: PropTypes.func,
-
   /**
-   * Extra data, such as copyright, north arrow configuration.
-   * All extra data is optional.
-   *
-   * Example 1:
-   *
-    {
-      copyright: {
-        text: 'Example copyright', // Copyright text or function
-        font: '10px Arial', // Font, default is '12px Arial'
-        fillStyle: 'blue', // Fill style, default is 'black'
-      },
-      northArrow,  // True if the north arrow
-                   // should be placed with default configuration
-                   // (default image, rotation=0, circled=False)
-    }
-   * Example 2:
-   *
-    {
-      northArrow: {
-        src: NorthArrowCustom,
-        width: 60, // Width in px, default is 80
-        height: 100, // Height in px, default is 80
-        rotation: 25, // Absolute rotation in degrees as number or function
-
-      }
-    }
-   * Example 3:
-   *
-    {
-      copyright: {
-        text: () => { // Copyright as function
-          return this.copyright;
-        },
-      },
-      northArrow: {
-        rotation: () => { // Rotation as function
-          return NorthArrow.radToDeg(this.map.getView().getRotation());
-        },
-        circled, // Display circle around the north arrow (Does not work for custom src)
-      },
-    }
+   * Function called before the dowload process begins.
+   */
+  onSaveStart: PropTypes.func,
+  /**
+   * Space (in pixels) between elements.
+   * Default to 5px.
    */
-  extraData: PropTypes.object,
+  padding: PropTypes.number,
+  /**
+   * Scale the map for better quality. Possible values: 1, 2 or 3.
+   * WARNING: The tiled layer with a WMTS or XYZ source must provides an url
+   * for each scale in the config file.
+   */
+  scale: PropTypes.number
 };
-
-var defaultProps = {
-  autoDownload: true,
-  children: null,
-  map: null,
-  format: 'image/png',
-  extent: null,
-  extraData: null,
-  coordinates: null,
-  scale: 1,
-  onSaveStart: function (map) {
-    return Promise.resolve(map);
-  },
-  onSaveEnd: function () {},
+const getMargin = (destCanvas) => {
+  const newMargin = destCanvas.width / 100;
+  return newMargin;
 };
-
-/**
- * The CanvasSaveButton component creates a button to save
- * an [ol/map](https://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html)
- * canvas as an image.
- */
-var CanvasSaveButton = /*@__PURE__*/(function (PureComponent) {
-  function CanvasSaveButton(props) {
-    PureComponent.call(this, props);
-    var ref = this.props;
-    var format = ref.format;
-    this.fileExt = format === 'image/jpeg' ? 'jpg' : 'png';
-    this.padding = 5;
-  }
-
-  if ( PureComponent ) CanvasSaveButton.__proto__ = PureComponent;
-  CanvasSaveButton.prototype = Object.create( PureComponent && PureComponent.prototype );
-  CanvasSaveButton.prototype.constructor = CanvasSaveButton;
-
-  CanvasSaveButton.prototype.onClick = function onClick (evt) {
-    var this$1 = this;
-
-    var ref = this.props;
-    var map = ref.map;
-    var onSaveStart = ref.onSaveStart;
-    var onSaveEnd = ref.onSaveEnd;
-    var autoDownload = ref.autoDownload;
-    if (window.navigator.msSaveBlob) {
-      // ie only
-      evt.preventDefault();
-      evt.stopPropagation();
+const getDefaultDownloadImageName = (format) => {
+  const fileExt = format === "image/jpeg" ? "jpg" : "png";
+  return `${window.document.title.replace(/ /g, "_").toLowerCase()}.${fileExt}`;
+};
+let multilineCopyright = false;
+let copyrightY = 0;
+const decreaseFontSize = (destContext, maxWidth, copyright, scale) => {
+  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;
     }
-    onSaveStart(map).then(function (mapToExport) {
-      return this$1.createCanvasImage(mapToExport || map)
-        .then(function (canvas) {
-          if (autoDownload) {
-            this$1.downloadCanvasImage(canvas).then(function (blob) {
-              onSaveEnd(mapToExport, canvas, blob);
-            });
-          } else {
-            onSaveEnd(mapToExport, canvas);
-          }
-        })
-        .catch(function (err) {
-          if (err) {
-            // eslint-disable-next-line no-console
-            console.error(err);
-          }
-          onSaveEnd(mapToExport, err);
-        });
+  } while (fontSize - 1 > minFontSize && destContext.measureText(copyright).width * scale > maxWidth);
+  return destContext.font;
+};
+const drawTextBackground = (destContext, x, y, width, height, styleOptions = {}) => {
+  destContext.save();
+  destContext.fillStyle = "rgba(255,255,255,.8)";
+  if (typeof styleOptions === "object") {
+    Object.entries(styleOptions).forEach(([key, value]) => {
+      destContext[key] = value;
     });
-  };
-
-  CanvasSaveButton.prototype.getDownloadImageName = function getDownloadImageName () {
-    return (
-      "" + (window.document.title.replace(/ /g, '_').toLowerCase()) +
-      "." + (this.fileExt)
-    );
-  };
-
-  // Ensure the font size fita with the image width.
-  CanvasSaveButton.prototype.decreaseFontSize = function decreaseFontSize (destContext, maxWidth, copyright, scale) {
-    var minFontSize = 8;
-    var sizeMatch;
-    var fontSize;
-    do {
-      sizeMatch = destContext.font.match(/[0-9]+(?:\.[0-9]+)?(px)/i);
-      fontSize = parseInt(sizeMatch[0].replace(sizeMatch[1], ''), 10);
-
-      // eslint-disable-next-line no-param-reassign
-      destContext.font = destContext.font.replace(fontSize, fontSize - 1);
-
-      if (fontSize - 1 === minFontSize) {
-        this.multilineCopyright = true;
-      }
-    } while (
-      fontSize - 1 > minFontSize &&
-      destContext.measureText(copyright).width * scale > maxWidth
-    );
-
-    return destContext.font;
-  };
-
-  // eslint-disable-next-line class-methods-use-this
-  CanvasSaveButton.prototype.drawTextBackground = function drawTextBackground (
-    destContext,
-    textMeasure,
-    textX,
-    textY,
-    padding,
-    styleOptions
-  ) {
-    if ( styleOptions === void 0 ) styleOptions = {};
-
-    /// get width of text
-    var width = textMeasure.width;
-    var height = textMeasure.height;
-    var actualBoundingBoxAscent = textMeasure.actualBoundingBoxAscent;
-    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(function (ref) {
-        var key = ref[0];
-        var value = ref[1];
-
-        destContext[key] = value;
-      });
-    }
-
-    /// draw background rect assuming height of font
-    destContext.fillRect(
-      textX - padding,
-      textY - actualBoundingBoxAscent - padding,
-      width + padding * 2,
-      height + padding * 2
-    );
-    destContext.restore();
-  };
-
-  CanvasSaveButton.prototype.drawCopyright = function drawCopyright (destContext, destCanvas, maxWidth) {
-    var ref = this.props;
-    var extraData = ref.extraData;
-    var scale = ref.scale;
-    var ref$1 = extraData.copyright;
-    var text = ref$1.text;
-    var font = ref$1.font;
-    var fillStyle = ref$1.fillStyle;
-    var background = ref$1.background;
-    var copyright = typeof text === 'function' ? text() : text;
-
-    if (Array.isArray(copyright)) {
-      copyright = copyright.join();
-    }
-
-    destContext.save();
-    destContext.scale(scale, scale);
-    destContext.font = font || '12px Arial';
-    destContext.font = this.decreaseFontSize(
-      destContext,
-      maxWidth - this.padding,
-      copyright,
-      scale
-    );
-
-    destContext.scale(scale, scale);
-    destContext.fillStyle = fillStyle || 'black';
-
-    // We search if the display on 2 line is necessary
-    var firstLine = copyright;
-    var wordNumber = copyright.split(' ').length;
-
-    // If the text is bigger than the max width we split itinto 2 lines
-    if (this.multilineCopyright) {
-      for (var i = 0; i < wordNumber; i += 1) {
-        firstLine = firstLine.substring(0, firstLine.lastIndexOf(' '));
-        // Stop removing word when fits within one line.
-        if (
-          destContext.measureText(firstLine).width * scale <
-          maxWidth - this.padding
-        ) {
-          break;
-        }
+  }
+  destContext.fillRect(x, y, width, height);
+  destContext.restore();
+};
+const drawCopyright = (destContext, destCanvas, maxWidth, extraData, scale, margin, padding) => {
+  const { background, fillStyle, font, text } = extraData.copyright;
+  const { paddingBackground = 2, paddingBottom = padding } = extraData.copyright;
+  let copyright = typeof text === "function" ? text() : text?.trim();
+  if (Array.isArray(copyright)) {
+    copyright = copyright.join();
+  }
+  destContext.save();
+  destContext.scale(scale, scale);
+  destContext.font = font || "12px Arial";
+  destContext.font = decreaseFontSize(destContext, maxWidth, copyright, scale);
+  destContext.textBaseline = "bottom";
+  destContext.scale(scale, scale);
+  destContext.fillStyle = fillStyle || "black";
+  let firstLine = copyright;
+  let firstLineMetrics = destContext.measureText(firstLine);
+  if (multilineCopyright) {
+    const wordNumber = copyright.split(" ").length;
+    for (let i = 0; i < wordNumber; i += 1) {
+      if (firstLineMetrics.width * scale < maxWidth) {
+        break;
       }
+      firstLine = firstLine.substring(0, firstLine.lastIndexOf(" "));
+      firstLineMetrics = destContext.measureText(firstLine);
     }
-    var secondLine = copyright.replace(firstLine, '');
-
-    // Draw first line (line break isn't supported for fillText).
-    var textX = this.padding;
-    var textMeasure = destContext.measureText(firstLine);
-    textMeasure.height =
-      textMeasure.actualBoundingBoxAscent +
-      textMeasure.actualBoundingBoxDescent;
-    var firstLineY = destCanvas.height / scale - this.padding;
-    var secondLineY = firstLineY;
-    var paddingBetweenLines = 3;
-    var paddingBackground = paddingBetweenLines / 2;
-
-    if (secondLine) {
-      firstLineY -= textMeasure.height + paddingBetweenLines;
-    }
+  }
+  const secondLine = copyright.replace(firstLine, "").trim();
+  const lines = [firstLine, secondLine].filter((l) => !!l).reverse();
+  let lineX = margin;
+  let lineY = destCanvas.height - paddingBottom;
+  lines.forEach((line) => {
+    const { fontBoundingBoxAscent, fontBoundingBoxDescent, width } = destContext.measureText(line);
+    const height = fontBoundingBoxAscent + fontBoundingBoxDescent;
+    let lineTop = lineY - height;
     if (background) {
-      this.drawTextBackground(
+      const backgroundX = margin;
+      lineTop -= paddingBackground * 2;
+      drawTextBackground(
         destContext,
-        textMeasure,
-        textX,
-        firstLineY,
-        paddingBackground,
+        backgroundX,
+        lineTop,
+        width + paddingBackground * 2,
+        height + paddingBackground * 2,
         background
       );
+      lineX += paddingBackground;
+      lineY -= paddingBackground;
     }
-    destContext.fillText(firstLine, textX, firstLineY);
-
-    // Draw second line.
-    if (secondLine) {
-      textMeasure = destContext.measureText(secondLine);
-      textMeasure.height =
-        textMeasure.actualBoundingBoxAscent +
-        textMeasure.actualBoundingBoxDescent;
-      if (background) {
-        this.drawTextBackground(
-          destContext,
-          textMeasure,
-          textX,
-          secondLineY,
-          paddingBackground,
-          background
-        );
+    destContext.fillText(line, lineX, lineY);
+    lineY = lineTop;
+  });
+  copyrightY = lineY;
+  destContext.restore();
+};
+const drawElement = (data, destCanvas, scale, margin, padding, previousItemSize = [0, 0], side = "right") => {
+  const destContext = destCanvas.getContext("2d");
+  const { height, rotation, src, width } = data;
+  return new Promise((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.fillText(secondLine, textX, secondLineY);
-    }
-
-    destContext.restore();
-  };
-
-  CanvasSaveButton.prototype.drawElement = function drawElement (data, destCanvas, previousItemSize) {
-    var this$1 = this;
-    if ( previousItemSize === void 0 ) previousItemSize = [0, 0];
-
-    var destContext = destCanvas.getContext('2d');
-    var ref = this.props;
-    var scale = ref.scale;
-    var src = data.src;
-    var width = data.width;
-    var height = data.height;
-    var rotation = data.rotation;
-
-    return new Promise(function (resolve) {
-      var img = new Image();
-      img.crossOrigin = 'Anonymous';
-      img.src = src;
-      img.onload = function () {
-        destContext.save();
-        var elementWidth = (width || 80) * scale;
-        var elementHeight = (height || 80) * scale;
-        destContext.translate(
-          destCanvas.width - 2 * this$1.padding - elementWidth / 2,
-          destCanvas.height -
-            2 * this$1.padding -
-            elementHeight / 2 -
-            previousItemSize[1]
-        );
-
-        if (rotation) {
-          var angle = typeof rotation === 'function' ? rotation() : rotation;
-          destContext.rotate(angle * (Math.PI / 180));
+      destContext.drawImage(
+        img,
+        -elementWidth / 2,
+        -elementHeight / 2,
+        elementWidth,
+        elementHeight
+      );
+      destContext.restore();
+      resolve([elementWidth + 2 * padding, elementHeight + 2 * padding]);
+    };
+    img.onerror = () => {
+      resolve();
+    };
+  });
+};
+const calculatePixelsToExport = (mapToExport, extent, coordinates) => {
+  let firstCoordinate;
+  let oppositeCoordinate;
+  if (extent) {
+    firstCoordinate = getTopLeft(extent);
+    oppositeCoordinate = getBottomRight(extent);
+  } else if (coordinates) {
+    [firstCoordinate, , oppositeCoordinate] = coordinates;
+  }
+  if (firstCoordinate && oppositeCoordinate) {
+    const firstPixel = mapToExport.getPixelFromCoordinate(firstCoordinate);
+    const oppositePixel = mapToExport.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;
+};
+const createCanvasImage = (mapToExport, extraData, scale, extent, coordinates, margin, padding) => {
+  return new Promise((resolve) => {
+    mapToExport.once("rendercomplete", () => {
+      const canvases = mapToExport.getTargetElement().getElementsByTagName("canvas");
+      let destCanvas;
+      let destContext;
+      for (let i = 0; i < canvases.length; i += 1) {
+        const canvas = canvases[i];
+        if (!canvas.width || !canvas.height) {
+          continue;
+        }
+        const clip = calculatePixelsToExport(
+          mapToExport,
+          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");
         }
-
         destContext.drawImage(
-          img,
-          -elementWidth / 2,
-          -elementHeight / 2,
-          elementWidth,
-          elementHeight
+          canvas,
+          clip.x,
+          clip.y,
+          clip.w,
+          clip.h,
+          0,
+          0,
+          destCanvas.width,
+          destCanvas.height
         );
-        destContext.restore();
-
-        // Return the pixels width of the arrow and the margin right,
-        // that must not be occupied by the copyright.
-        resolve([
-          elementWidth + 2 * this$1.padding,
-          elementHeight + 2 * this$1.padding ]);
-      };
-
-      img.onerror = function () {
-        resolve();
-      };
-    });
-  };
-
-  CanvasSaveButton.prototype.calculatePixelsToExport = function calculatePixelsToExport (mapToExport) {
-    var assign;
-
-    var ref = this.props;
-    var extent = ref.extent;
-    var coordinates = ref.coordinates;
-    var firstCoordinate;
-    var 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.
-      (assign = coordinates, firstCoordinate = assign[0], oppositeCoordinate = assign[2]);
-    }
-
-    if (firstCoordinate && oppositeCoordinate) {
-      var firstPixel = mapToExport.getPixelFromCoordinate(firstCoordinate);
-      var oppositePixel =
-        mapToExport.getPixelFromCoordinate(oppositeCoordinate);
-      var pixelTopLeft = [
-        firstPixel[0] <= oppositePixel[0] ? firstPixel[0] : oppositePixel[0],
-        firstPixel[1] <= oppositePixel[1] ? firstPixel[1] : oppositePixel[1] ];
-      var pixelBottomRight = [
-        firstPixel[0] > oppositePixel[0] ? firstPixel[0] : oppositePixel[0],
-        firstPixel[1] > oppositePixel[1] ? firstPixel[1] : oppositePixel[1] ];
-
-      return {
-        x: pixelTopLeft[0],
-        y: pixelTopLeft[1],
-        w: pixelBottomRight[0] - pixelTopLeft[0],
-        h: pixelBottomRight[1] - pixelTopLeft[1],
-      };
-    }
-    return null;
-  };
-
-  CanvasSaveButton.prototype.createCanvasImage = function createCanvasImage (mapToExport) {
-    var this$1 = this;
-
-    var ref = this.props;
-    var extraData = ref.extraData;
-
-    return new Promise(function (resolve) {
-      mapToExport.once('rendercomplete', function () {
-        // Find all layer canvases and add it to dest canvas.
-        var canvases = mapToExport
-          .getTargetElement()
-          .getElementsByTagName('canvas');
-
-        // Create the canvas to export with the good size.
-        var destCanvas;
-        var destContext;
-
-        // canvases is an HTMLCollection, we don't try to transform to array because some compilers like cra doesn't translate it right.
-        for (var i = 0; i < canvases.length; i += 1) {
-          var canvas = canvases[i];
-          if (!canvas.width || !canvas.height) {
-            // eslint-disable-next-line no-continue
-            continue;
-          }
-          var clip = this$1.calculatePixelsToExport(mapToExport) || {
-            x: 0,
-            y: 0,
-            w: canvas.width,
-            h: canvas.height,
-          };
-
-          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
+      }
+      margin = margin || getMargin(destCanvas);
+      let logoPromise = Promise.resolve();
+      if (destContext && extraData && extraData.logo) {
+        logoPromise = drawElement(
+          extraData.logo,
+          destCanvas,
+          scale,
+          margin,
+          padding
+        );
+      }
+      logoPromise.then((logoSize = [0, 0]) => {
+        let arrowPromise = Promise.resolve();
+        if (destContext && extraData && extraData.northArrow) {
+          arrowPromise = drawElement(
+            {
+              src: extraData.northArrow.circled ? NorthArrowCircle : NorthArrowSimple,
+              ...extraData.northArrow
+            },
+            destCanvas,
+            scale,
+            margin,
+            padding,
+            logoSize
           );
         }
-
-        // Custom info
-        var logoPromise = Promise.resolve();
-        if (destContext && extraData && extraData.logo) {
-          logoPromise = this$1.drawElement(extraData.logo, destCanvas);
-        }
-
-        logoPromise.then(function (logoSize) {
-          if ( logoSize === void 0 ) logoSize = [0, 0];
-
-          // North arrow
-          var arrowPromise = Promise.resolve();
-          if (destContext && extraData && extraData.northArrow) {
-            arrowPromise = this$1.drawElement(
-              Object.assign({}, {src: extraData.northArrow.circled
-                  ? NorthArrowCircle
-                  : NorthArrowSimple},
-                extraData.northArrow),
+        arrowPromise.then((arrowSize = [0, 0]) => {
+          const widestElement = Math.max(logoSize[0], arrowSize[0]);
+          if (destContext && extraData && extraData.copyright && extraData.copyright.text) {
+            const maxWidth = extraData.copyright.maxWidth || (widestElement ? destContext.canvas.width - widestElement - margin : destContext.canvas.width);
+            drawCopyright(
+              destContext,
+              destCanvas,
+              maxWidth,
+              extraData,
+              scale,
+              margin,
+              padding
+            );
+          }
+          let qrCodePromise = Promise.resolve();
+          if (destContext && extraData && extraData.qrCode) {
+            qrCodePromise = drawElement(
+              extraData.qrCode,
               destCanvas,
-              logoSize
+              scale,
+              margin,
+              padding,
+              void 0,
+              "left"
             );
           }
-
-          // Copyright
-          arrowPromise.then(function (arrowSize) {
-            if ( arrowSize === void 0 ) arrowSize = [0, 0];
-
-            var widestElement = Math.max(logoSize[0], arrowSize[0]);
-            if (
-              destContext &&
-              extraData &&
-              extraData.copyright &&
-              extraData.copyright.text
-            ) {
-              var maxWidth = widestElement
-                ? destContext.canvas.width - widestElement
-                : destContext.canvas.width;
-              this$1.drawCopyright(destContext, destCanvas, maxWidth);
-            }
-            resolve(destCanvas);
+          qrCodePromise.then(() => {
+            return resolve(destCanvas);
           });
         });
       });
-      mapToExport.renderSync();
     });
-  };
-
-  CanvasSaveButton.prototype.downloadCanvasImage = function downloadCanvasImage (canvas) {
-    var this$1 = this;
-
-    // Use blob for large images
-    var promise = new Promise(function (resolve) {
-      var ref = this$1.props;
-      var format = ref.format;
-      if (/msie (9|10)/gi.test(window.navigator.userAgent.toLowerCase())) {
-        // ie 9 and 10
-        var url = canvas.toDataURL(format);
-        var w = window.open('about:blank', '');
-        w.document.write(("<img src=\"" + url + "\" alt=\"from canvas\"/>"));
-        resolve(url);
+    mapToExport.renderSync();
+  });
+};
+const downloadCanvasImage = (canvas, format, getDownloadImageName) => {
+  const promise = new Promise((resolve) => {
+    if (/msie (9|10)/gi.test(window.navigator.userAgent.toLowerCase())) {
+      const url = canvas.toDataURL(format);
+      const w = window.open("about:blank", "");
+      w.document.write(`<img src="${url}" alt="from canvas"/>`);
+      resolve(url);
+    }
+    if (window.navigator.msSaveBlob) {
+      let image;
+      try {
+        image = canvas.msToBlob();
+      } catch (e) {
+        console.log(e);
       }
-      if (window.navigator.msSaveBlob) {
-        // ie 11 and higher
-        var image;
-        try {
-          image = canvas.msToBlob();
-        } catch (e) {
-          // eslint-disable-next-line no-console
-          console.log(e);
-        }
-        var blob = new Blob([image], {
-          type: format,
-        });
+      const blob = new Blob([image], {
+        type: format
+      });
+      resolve(blob);
+      window.navigator.msSaveBlob(blob, getDownloadImageName(format));
+    } else {
+      canvas.toBlob((blob) => {
+        const link = document.createElement("a");
+        link.download = getDownloadImageName(format);
+        link.href = URL.createObjectURL(blob);
+        document.body.appendChild(link);
+        link.click();
         resolve(blob);
-        window.navigator.msSaveBlob(blob, this$1.getDownloadImageName());
-      } else {
-        canvas.toBlob(function (blob) {
-          var link = document.createElement('a');
-          link.download = this$1.getDownloadImageName();
-          link.href = URL.createObjectURL(blob);
-          // append child to document for firefox to be able to download.
-          document.body.appendChild(link);
-          link.click();
-          resolve(blob);
-        }, format);
+      }, format);
+    }
+  });
+  return promise;
+};
+function CanvasSaveButton({
+  autoDownload = true,
+  children = null,
+  coordinates = null,
+  extent = null,
+  extraData = null,
+  format = "image/png",
+  getDownloadImageName = getDefaultDownloadImageName,
+  map = null,
+  margin = null,
+  onSaveEnd = () => {
+  },
+  onSaveStart = (mapp) => {
+    return Promise.resolve(mapp);
+  },
+  padding = 5,
+  scale = 1
+}) {
+  const onClick = useCallback(
+    (evt) => {
+      if (window.navigator.msSaveBlob) {
+        evt.preventDefault();
+        evt.stopPropagation();
       }
-    });
-    return promise;
-  };
-
-  CanvasSaveButton.prototype.render = function render () {
-    var this$1 = this;
-
-    var ref = this.props;
-    var children = ref.children;
-    var rest = objectWithoutProperties( ref, ["children"] );
-    var other = rest;
-
-    delete other.onSaveStart;
-    delete other.onSaveEnd;
-    delete other.extraData;
-    delete other.extent;
-    delete other.format;
-    delete other.map;
-    delete other.coordinates;
-    delete other.autoDownload;
-    delete other.scale;
-
-    return (
-      React.createElement( 'div', Object.assign({},
-        { role: "button", className: "rs-canvas-save-button", tabIndex: 0 }, other, { onClick: function (e) {
-          return this$1.onClick(e);
-        }, onKeyPress: function (e) {
-          return e.which === 13 && this$1.onClick(e);
-        } }),
-        children
-      )
-    );
-  };
-
-  return CanvasSaveButton;
-}(PureComponent));
-
+      multilineCopyright = false;
+      copyrightY = 0;
+      onSaveStart(map).then((mapToExport) => {
+        return createCanvasImage(
+          mapToExport || map,
+          extraData,
+          scale,
+          extent,
+          coordinates,
+          margin,
+          padding
+        ).then((canvas) => {
+          if (autoDownload) {
+            downloadCanvasImage(canvas, format, getDownloadImageName).then(
+              (blob) => {
+                onSaveEnd(mapToExport, canvas, blob);
+              }
+            );
+          } else {
+            onSaveEnd(mapToExport, canvas);
+          }
+        }).catch((err) => {
+          if (err) {
+            console.error(err);
+          }
+          onSaveEnd(mapToExport, err);
+        });
+      });
+    },
+    [
+      autoDownload,
+      coordinates,
+      extent,
+      extraData,
+      format,
+      map,
+      margin,
+      onSaveEnd,
+      onSaveStart,
+      padding,
+      scale,
+      getDownloadImageName
+    ]
+  );
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, React.Children.map(children, (child) => {
+    return React.cloneElement(child, { onClick });
+  }));
+}
 CanvasSaveButton.propTypes = propTypes;
-CanvasSaveButton.defaultProps = defaultProps;
-
 export default CanvasSaveButton;
-
-//# sourceMappingURL=CanvasSaveButton.js.map