map/print.js

  1. 'use strict';
  3. // ugly way to add rgbcolor to global scope so it can be used by canvg inside the viewer; this is done because canvg uses UMD loader and has rgbcolor as internal dependency; there is no elegant way around it; another approach would be to clone canvg and change its loader;
  4. window.RGBColor = require('rgbcolor');
  5. const canvg = require('canvg-origin');
  6. const shared = require('../shared.js')();
  8. const XML_ATTRIBUTES = {
  9.     xmlns: 'http://www.w3.org/2000/svg',
  10.     'xmlns:xlink': 'http://www.w3.org/1999/xlink',
  11.     version: '1.1'
  12. };
  14. /**
  15.   * The `mapPrint` module provides map print and export image related functions.
  16.   *
  17.   * This module exports an object with the following functions
  18.   * - `printMap`
  19.   *
  20.   * NOTE: unit tests might be difficult to implement as DOM is required...
  21.   */
  23. /**
  24. * Generate the image from the esri print task
  25. *
  26. * @param {Object} esriBundle bundle of API classes
  27. * @param {Object} map esri map object
  28. * @param {Object} options options for the print task
  29. *                           url - for the esri geometry server
  30. *                           format - output format
  31. *                           width - target image height if different from default
  32. *                           height - target image width if different from default
  33. * @return {Promise} resolving when the print task created the image
  34. *                           resolve with a "response: { url: value }" where url is the path
  35. *                           for the print task export image
  36. */
  37. function generateServerImage(esriBundle, map, options) {
  38.     // create esri print object with url to print server
  39.     const printTask = esriBundle.PrintTask(options.url, { async: true });
  40.     const printParams = new esriBundle.PrintParameters();
  41.     const printTemplate = new esriBundle.PrintTemplate();
  43.     // each layout has an mxd with that name on the server. We can modify and add new layout (mxd)
  44.     // we only support MAP_ONLY for now. See https://github.com/fgpv-vpgf/fgpv-vpgf/issues/1160
  45.     printTemplate.layout = 'MAP_ONLY';
  47.     // only use when layout is MAP_ONLY
  48.     printTemplate.exportOptions = {
  49.         height: options.height || map.height,
  50.         width: options.width || map.width,
  51.         dpi: 96
  52.     };
  54.     // pdf | png32 | png8 | jpg | gif | eps | svg | svgz
  55.     printTemplate.format = options.format;
  56.     printTemplate.showAttribution = false;
  58.     // define whether the printed map should preserve map scale or map extent.
  59.     // if true, the printed map will use the outScale property or default to the scale of the input map.
  60.     // if false, the printed map will use the same extent as the input map and thus scale might change.
  61.     // we always use false because the output image needs to be of the same extent as the size might be different
  62.     // we fit the image later because trying to fit the image with canvg when we add user added
  63.     // layer is tricky!
  64.     printTemplate.preserveScale = false;
  66.     // set map and template
  67.     printParams.map = map;
  68.     printParams.template = printTemplate;
  70.     // need to hide svg layers since we can generate an image for them locally
  71.     const svgLayers = hideLayers(map);
  73.     const printPromise = new Promise((resolve, reject) => {
  74.         // can be use to debug print task. Gives parameters to call directly the print task from it's interface
  75.         // http://resources.arcgis.com/en/help/rest/apiref/exportwebmap_spec.html
  76.         // http://snipplr.com/view/72400/sample-json-representation-of-an-esri-web-map-for-export-web-map-task
  77.         // const mapJSON = printTask._getPrintDefinition(map, printParams);
  78.         // console.log(JSON.stringify(mapJSON));
  80.         // TODO: catch esriJobFailed. it does not trigger the complete or the error event. Need a way to catch it!
  81.         // execute the print task
  82.         printTask.execute(printParams,
  83.             response =>
  84.                 resolve(shared.convertImageToCanvas(response.url)),
  85.             error =>
  86.                 reject(error)
  87.         );
  88.     });
  90.     // show user added previously visible for canvg to create canvas
  91.     showLayers(svgLayers);
  93.     return printPromise;
  94. }
  96. /**
  97. * Set svg-based layer visibility to false to avoid CORS error
  98. *
  99. * @param {Object} map esri map object
  100. * @return {Array} layer array of layers where visibility is true
  101. */
  102. function hideLayers(map) {
  103.     return map.graphicsLayerIds
  104.         .map(layerId => map.getLayer(layerId))
  105.         .filter(layer => layer.visible)
  106.         .map(layer => {
  107.             layer.setVisibility(false);
  108.             return layer;
  109.         });
  110. }
  112. /**
  113. * Set user added layer visibility to true for those whoe where visible
  114. *
  115. * @param {Array} layers array of graphic layers to set visibility to true
  116. */
  117. function showLayers(layers) {
  118.     layers.forEach((layer) => layer.setVisibility(true));
  119. }
  121. /**
  122. * Create a canvas from the user added layers (svg tag)
  123. *
  124. * @param {Object} map esri map object
  125. * @param {Object} options [optional = null] { width, height } values; needed to get canvas of a size different from default
  126. *                           width {Number}
  127. *                           height {Number}
  128. * @param {Object} canvas [optional = null] canvas to draw the image upon; if not supplied, a new canvas will be made
  129. * @return {Promise} resolving when the canvas have been created
  130. *                           resolve with a canvas element with user added layer on it
  131. */
  132. function generateLocalCanvas(map, options = null, canvas = null) {
  133.     canvas = canvas || document.createElement('canvas');  // create canvas element
  135.     // find esri map's svg node
  136.     // check if xmlns prefixes are set - they aren't; add them
  137.     // without correct prefixes, Firefox and IE refuse to render svg onto the canvas; Chrome works;
  138.     // related issues: fgpv-vpgf/fgpv-vpgf#1324, fgpv-vpgf/fgpv-vpgf#1307, fgpv-vpgf/fgpv-vpgf#1306
  139.     const svgNode = document.getElementById(`esri\.Map_${map.id.split('_')[1]}_gc`);
  140.     if (!svgNode.getAttribute('xmlns')) {
  141.         Object.entries(XML_ATTRIBUTES).forEach(([key, value]) =>
  142.             svgNode.setAttribute(key, value));
  143.     }
  145.     let originalOptions;
  146.     if (options) {
  147.         originalOptions = resizeSVGElement(svgNode, options);
  148.     }
  150.     const generationPromise = new Promise((resolve, reject) => {
  151.         // parse the svg
  152.         // convert svg text to canvas and stuff it into canvas canvas dom node
  154.         // wrapping in try/catch since canvg has NO error handling; not sure what errors this can catch though
  155.         try {
  156.             // convert svg to text (use map id to select the svg container), then render svgxml back to canvas
  157.             canvg(canvas, svgNode.outerHTML, {
  158.                 useCORS: true,
  159.                 ignoreAnimation: true,
  160.                 ignoreMouse: true,
  161.                 renderCallback: () => {
  162.                     if (options) {
  163.                         resizeSVGElement(svgNode, originalOptions.originalSize, originalOptions.originalViewbox);
  164.                     }
  166.                     resolve(canvas);
  167.                 }
  168.             });
  169.         } catch (error) {
  170.             reject(error);
  171.         }
  172.     });
  174.     return generationPromise;
  176.     /**
  177.      * Scales up or down the specified svg element. To scale it, we need to set the viewbox to the current size and change the size of the element itself.
  178.      * @function resizeSVGElement
  179.      * @private
  180.      * @param {Object} element target svg element to be resized
  181.      * @param {Object} targetSize object with target sizes in the form of { width, height }
  182.      *                           width {Number}
  183.      *                           height {Number}
  184.      * @param {Object} targetViewbox [optional = null] target viewbox sizes in the form of { minX, minY, width, height }; if not specified, the original size will be used as the viewbox
  185.      *                           minX {Number}
  186.      *                           minxY {Number}
  187.      *                           width {Number}
  188.      *                           height {Number}
  189.      * @return {Object} returns original size and viewbox of the svg element in the form of { originalSize: { width, height }, originalViewbox: { minX, minY, width, height } }; can be used to restore the element to its original state
  190.      *                          originalSize:
  191.      *                              width {Number}
  192.      *                              height {Number}
  193.      *                          originalViewbox:
  194.      *                              minX {Number}
  195.      *                              minxY {Number}
  196.      *                              width {Number}
  197.      *                              height {Number}
  198.      */
  199.     function resizeSVGElement(element, targetSize, targetViewbox = null) {
  201.         const originalSize = {
  202.             width: element.width.baseVal.value,
  203.             height: element.height.baseVal.value
  204.         };
  206.         // get the current viewbox sizes
  207.         // if the viewbox is not defined, the viewbox is assumed to have the same dimensions as the svg element
  208.         // getAttribute('viewBox') returns a string in the form '{minx} {miny} {width} {height}'
  209.         // setAttribute('viewBox') accepts a string in the same form
  210.         const [ovMinX, ovMinY, ovWidth, ovHeight] =
  211.             (element.getAttribute('viewBox') || `0 0 ${originalSize.width} ${originalSize.height}`).split(' ');
  213.         const originalViewbox = {
  214.             minX: ovMinX,
  215.             minY: ovMinY,
  216.             width: ovWidth,
  217.             height: ovHeight
  218.         };
  220.         // set the width/height of the svg element to the target values
  221.         element.setAttribute('width', targetSize.width);
  222.         element.setAttribute('height', targetSize.height);
  224.         // set the viewbox width/height of the svg element to the target values; or the values of the original viewbox (if the viewbox wasn't defined before, it is now)
  225.         element.setAttribute('viewBox', [
  226.             (targetViewbox || originalViewbox).minX,
  227.             (targetViewbox || originalViewbox).minY,
  228.             (targetViewbox || originalViewbox).width,
  229.             (targetViewbox || originalViewbox).height
  230.         ].join(' '));
  232.         return {
  233.             originalSize,
  234.             originalViewbox
  235.         };
  236.     }
  237. }
  239. // Print map related modules
  240. module.exports = (esriBundle) => {
  241.     return {
  242.         printLocal: (map, options) => generateLocalCanvas(map, options),
  243.         printServer: (map, options) => generateServerImage(esriBundle, map, options)
  244.     };
  245. };