react-spatial 1.2.2 → 1.2.3-beta.3

package/components/CanvasSaveButton/CanvasSaveButton.js

@@ -1,237 +1,92 @@
-/* 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 = {
-  /**
-   * Automatically download the image saved.
-   */
+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";
+const propTypes = {
   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). */
+  format: PropTypes.oneOf(["image/jpeg", "image/png"]),
   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.
-   * This property must be used to export rotated map.
-   * If you don't need to export rotated map the extent property can be used as well.
-   * 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.
-   */
   scale: PropTypes.number,
-
-  /**
-   * Function called before the dowload process begins.
-   */
   onSaveStart: PropTypes.func,
-
-  /**
-   * 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)
-      },
-    }
-   */
-  extraData: PropTypes.object,
+  extraData: PropTypes.object
 };
-
-var defaultProps = {
+const defaultProps = {
   autoDownload: true,
   children: null,
   map: null,
-  format: 'image/png',
+  format: "image/png",
   extent: null,
   extraData: null,
   coordinates: null,
   scale: 1,
-  onSaveStart: function (map) {
+  onSaveStart: (map) => {
     return Promise.resolve(map);
   },
-  onSaveEnd: function () {},
+  onSaveEnd: () => {
+  }
 };
-
-/**
- * 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';
+class CanvasSaveButton extends PureComponent {
+  constructor(props) {
+    super(props);
+    const { format } = this.props;
+    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;
+  onClick(evt) {
+    const { map, onSaveStart, onSaveEnd, autoDownload } = this.props;
     if (window.navigator.msSaveBlob) {
-      // ie only
       evt.preventDefault();
       evt.stopPropagation();
     }
-    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);
-        });
+    onSaveStart(map).then((mapToExport) => {
+      return this.createCanvasImage(mapToExport || map).then((canvas) => {
+        if (autoDownload) {
+          this.downloadCanvasImage(canvas).then((blob) => {
+            onSaveEnd(mapToExport, canvas, blob);
+          });
+        } else {
+          onSaveEnd(mapToExport, canvas);
+        }
+      }).catch((err) => {
+        if (err) {
+          console.error(err);
+        }
+        onSaveEnd(mapToExport, err);
+      });
     });
-  };
-
-  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;
+  }
+  getDownloadImageName() {
+    return `${window.document.title.replace(/ /g, "_").toLowerCase()}.${this.fileExt}`;
+  }
+  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);
-
-      // eslint-disable-next-line no-param-reassign
+      fontSize = parseInt(sizeMatch[0].replace(sizeMatch[1], ""), 10);
       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
-    );
-
+    } 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;
+  }
+  drawTextBackground(destContext, textMeasure, textX, textY, padding, styleOptions = {}) {
+    const { width, height, actualBoundingBoxAscent } = textMeasure;
     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.fillStyle = "rgba(255,255,255,.8)";
+    if (typeof styleOptions === "object") {
+      Object.entries(styleOptions).forEach(([key, value]) => {
         destContext[key] = value;
       });
     }
-
-    /// draw background rect assuming height of font
     destContext.fillRect(
       textX - padding,
       textY - actualBoundingBoxAscent - padding,
@@ -239,66 +94,43 @@ var CanvasSaveButton = /*@__PURE__*/(function (PureComponent) {
       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;
-
+  }
+  drawCopyright(destContext, destCanvas, maxWidth) {
+    const { extraData, scale } = this.props;
+    const { text, font, fillStyle, background } = extraData.copyright;
+    let 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 = 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
+    destContext.fillStyle = fillStyle || "black";
+    let firstLine = copyright;
+    const wordNumber = copyright.split(" ").length;
     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
-        ) {
+      for (let i = 0; i < wordNumber; i += 1) {
+        firstLine = firstLine.substring(0, firstLine.lastIndexOf(" "));
+        if (destContext.measureText(firstLine).width * scale < maxWidth - this.padding) {
           break;
         }
       }
     }
-    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;
-
+    const secondLine = copyright.replace(firstLine, "");
+    const textX = this.padding;
+    let textMeasure = destContext.measureText(firstLine);
+    textMeasure.height = textMeasure.actualBoundingBoxAscent + textMeasure.actualBoundingBoxDescent;
+    let firstLineY = destCanvas.height / scale - this.padding;
+    const secondLineY = firstLineY;
+    const paddingBetweenLines = 3;
+    const paddingBackground = paddingBetweenLines / 2;
     if (secondLine) {
       firstLineY -= textMeasure.height + paddingBetweenLines;
     }
@@ -313,13 +145,9 @@ var CanvasSaveButton = /*@__PURE__*/(function (PureComponent) {
       );
     }
     destContext.fillText(firstLine, textX, firstLineY);
-
-    // Draw second line.
     if (secondLine) {
       textMeasure = destContext.measureText(secondLine);
-      textMeasure.height =
-        textMeasure.actualBoundingBoxAscent +
-        textMeasure.actualBoundingBoxDescent;
+      textMeasure.height = textMeasure.actualBoundingBoxAscent + textMeasure.actualBoundingBoxDescent;
       if (background) {
         this.drawTextBackground(
           destContext,
@@ -332,43 +160,28 @@ var CanvasSaveButton = /*@__PURE__*/(function (PureComponent) {
       }
       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';
+  }
+  drawElement(data, destCanvas, previousItemSize = [0, 0]) {
+    const destContext = destCanvas.getContext("2d");
+    const { scale } = this.props;
+    const { src, width, height, rotation } = data;
+    return new Promise((resolve) => {
+      const img = new Image();
+      img.crossOrigin = "Anonymous";
       img.src = src;
-      img.onload = function () {
+      img.onload = () => {
         destContext.save();
-        var elementWidth = (width || 80) * scale;
-        var elementHeight = (height || 80) * scale;
+        const elementWidth = (width || 80) * scale;
+        const elementHeight = (height || 80) * scale;
         destContext.translate(
-          destCanvas.width - 2 * this$1.padding - elementWidth / 2,
-          destCanvas.height -
-            2 * this$1.padding -
-            elementHeight / 2 -
-            previousItemSize[1]
+          destCanvas.width - 2 * this.padding - elementWidth / 2,
+          destCanvas.height - 2 * this.padding - elementHeight / 2 - previousItemSize[1]
         );
-
         if (rotation) {
-          var angle = typeof rotation === 'function' ? rotation() : rotation;
+          const angle = typeof rotation === "function" ? rotation() : rotation;
           destContext.rotate(angle * (Math.PI / 180));
         }
-
         destContext.drawImage(
           img,
           -elementWidth / 2,
@@ -377,99 +190,70 @@ var CanvasSaveButton = /*@__PURE__*/(function (PureComponent) {
           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 * this$1.padding,
-          elementHeight + 2 * this$1.padding ]);
+          elementWidth + 2 * this.padding,
+          elementHeight + 2 * this.padding
+        ]);
       };
-
-      img.onerror = function () {
+      img.onerror = () => {
         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;
-
+  }
+  calculatePixelsToExport(mapToExport) {
+    const { extent, coordinates } = this.props;
+    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.
-      (assign = coordinates, firstCoordinate = assign[0], oppositeCoordinate = assign[2]);
+      [firstCoordinate, , oppositeCoordinate] = coordinates;
     }
-
     if (firstCoordinate && oppositeCoordinate) {
-      var firstPixel = mapToExport.getPixelFromCoordinate(firstCoordinate);
-      var oppositePixel =
-        mapToExport.getPixelFromCoordinate(oppositeCoordinate);
-      var pixelTopLeft = [
+      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] ];
-      var pixelBottomRight = [
+        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] ];
-
+        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],
+        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];
+  }
+  createCanvasImage(mapToExport) {
+    const { extraData } = this.props;
+    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) {
-            // eslint-disable-next-line no-continue
             continue;
           }
-          var clip = this$1.calculatePixelsToExport(mapToExport) || {
+          const clip = this.calculatePixelsToExport(mapToExport) || {
             x: 0,
             y: 0,
             w: canvas.width,
-            h: canvas.height,
+            h: canvas.height
           };
-
           if (!destCanvas) {
-            destCanvas = document.createElement('canvas');
+            destCanvas = document.createElement("canvas");
             destCanvas.width = clip.w;
             destCanvas.height = clip.h;
-            destContext = destCanvas.getContext('2d');
+            destContext = destCanvas.getContext("2d");
           }
-
-          // Draw canvas to the canvas to export.
           destContext.drawImage(
             canvas,
             clip.x,
@@ -482,44 +266,27 @@ var CanvasSaveButton = /*@__PURE__*/(function (PureComponent) {
             destCanvas.height
           );
         }
-
-        // Custom info
-        var logoPromise = Promise.resolve();
+        let logoPromise = Promise.resolve();
         if (destContext && extraData && extraData.logo) {
-          logoPromise = this$1.drawElement(extraData.logo, destCanvas);
+          logoPromise = this.drawElement(extraData.logo, destCanvas);
         }
-
-        logoPromise.then(function (logoSize) {
-          if ( logoSize === void 0 ) logoSize = [0, 0];
-
-          // North arrow
-          var arrowPromise = Promise.resolve();
+        logoPromise.then((logoSize = [0, 0]) => {
+          let arrowPromise = Promise.resolve();
           if (destContext && extraData && extraData.northArrow) {
-            arrowPromise = this$1.drawElement(
-              Object.assign({}, {src: extraData.northArrow.circled
-                  ? NorthArrowCircle
-                  : NorthArrowSimple},
-                extraData.northArrow),
+            arrowPromise = this.drawElement(
+              {
+                src: extraData.northArrow.circled ? NorthArrowCircle : NorthArrowSimple,
+                ...extraData.northArrow
+              },
               destCanvas,
               logoSize
             );
           }
-
-          // 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);
+          arrowPromise.then((arrowSize = [0, 0]) => {
+            const widestElement = Math.max(logoSize[0], arrowSize[0]);
+            if (destContext && extraData && extraData.copyright && extraData.copyright.text) {
+              const maxWidth = widestElement ? destContext.canvas.width - widestElement : destContext.canvas.width;
+              this.drawCopyright(destContext, destCanvas, maxWidth);
             }
             resolve(destCanvas);
           });
@@ -527,42 +294,33 @@ var CanvasSaveButton = /*@__PURE__*/(function (PureComponent) {
       });
       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;
+  }
+  downloadCanvasImage(canvas) {
+    const promise = new Promise((resolve) => {
+      const { format } = this.props;
       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\"/>"));
+        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) {
-        // ie 11 and higher
-        var image;
+        let 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, this$1.getDownloadImageName());
+        window.navigator.msSaveBlob(blob, this.getDownloadImageName());
       } else {
-        canvas.toBlob(function (blob) {
-          var link = document.createElement('a');
-          link.download = this$1.getDownloadImageName();
+        canvas.toBlob((blob) => {
+          const link = document.createElement("a");
+          link.download = this.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);
@@ -570,16 +328,9 @@ var CanvasSaveButton = /*@__PURE__*/(function (PureComponent) {
       }
     });
     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;
-
+  }
+  render() {
+    const { children, ...other } = this.props;
     delete other.onSaveStart;
     delete other.onSaveEnd;
     delete other.extraData;
@@ -589,25 +340,20 @@ var CanvasSaveButton = /*@__PURE__*/(function (PureComponent) {
     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));
-
+    return /* @__PURE__ */ React.createElement("div", {
+      role: "button",
+      className: "rs-canvas-save-button",
+      tabIndex: 0,
+      ...other,
+      onClick: (e) => {
+        return this.onClick(e);
+      },
+      onKeyPress: (e) => {
+        return e.which === 13 && this.onClick(e);
+      }
+    }, children);
+  }
+}
 CanvasSaveButton.propTypes = propTypes;
 CanvasSaveButton.defaultProps = defaultProps;
-
 export default CanvasSaveButton;
-
-//# sourceMappingURL=CanvasSaveButton.js.map