add printToPDF renderer logic for plotly-graph

- when *batik* option isn't defined, use win.webContents.printToPDF
- step-by-step:
  + use svg image string to render image in DOM
  + call window.getSelection.selectAllChidren to grab only img div
  + call printToPDF on img div

Author: etpinard

bin/plotly-graph-exporter_electron.js

@@ -45,7 +45,7 @@ getStdin().then((txt) => {
         mapboxAccessToken: argv['mapbox-access-token'],
         mathjax: argv.mathjax,
         topojson: argv.topojson,
-        batik: argv.batik || path.join(__dirname, '..', 'build', 'batik-1.7', 'batik-rasterizer.jar'),
+        batik: argv.batik,
         format: argv.format,
         scale: argv.scale,
         width: argv.width,

src/component/plotly-graph/convert.js

@@ -32,46 +32,58 @@ function convert (info, opts, reply) {
     reply(errorCode, result)
   }
 
+  const toBuffer = () => {
+    const body = result.body = Buffer.from(imgData, 'base64')
+    result.bodyLength = result.head['Content-Length'] = body.length
+    return done()
+  }
+
+  const convertSVG = () => {
+    const batik = opts.batik instanceof Batik
+      ? opts.batik
+      : new Batik(opts.batik)
+
+    batik.convertSVG(imgData, {format: format}, (err, buf) => {
+      if (err) {
+        errorCode = 530
+        result.error = err
+        return done()
+      }
+
+      result.bodyLength = result.head['Content-Length'] = buf.length
+      result.body = buf
+      return done()
+    })
+  }
+
+  // TODO
+  const pdf2eps = () => {}
+
   // TODO
-  // - should pdf and eps format be part of a streambed-only component?
-  // - should we use batik for that or something?
   // - is the 'encoded' option still relevant?
 
   switch (format) {
     case 'png':
     case 'jpeg':
     case 'webp':
-      const body = result.body = Buffer.from(imgData, 'base64')
-      result.bodyLength = result.head['Content-Length'] = body.length
-      return done()
+      return toBuffer()
     case 'svg':
       // see http://stackoverflow.com/a/12205668/800548
       result.body = imgData
       result.bodyLength = encodeURI(imgData).split(/%..|./).length - 1
       return done()
     case 'pdf':
+      if (opts.batik) {
+        return convertSVG()
+      } else {
+        return toBuffer()
+      }
     case 'eps':
-      if (!opts.batik) {
-        errorCode = 530
-        result.error = new Error('path to batik-rasterizer jar not given')
-        return done()
+      if (opts.batik) {
+        return convertSVG()
+      } else {
+        return pdf2eps()
       }
-
-      const batik = opts.batik instanceof Batik
-        ? opts.batik
-        : new Batik(opts.batik)
-
-      batik.convertSVG(info.imgData, {format: format}, (err, buf) => {
-        if (err) {
-          errorCode = 530
-          result.error = err
-          return done()
-        }
-
-        result.bodyLength = result.head['Content-Length'] = buf.length
-        result.body = buf
-        done()
-      })
   }
 }
 

src/component/plotly-graph/render.js

@@ -1,7 +1,8 @@
 /* global Plotly:false */
 
-const cst = require('./constants')
 const semver = require('semver')
+const remote = require('../../util/remote')
+const cst = require('./constants')
 
 /**
  * @param {object} info : info object
@@ -12,6 +13,7 @@ const semver = require('semver')
  *  - scale
  * @param {object} opts : component options
  *  - mapboxAccessToken
+ *  - batik
  * @param {function} sendToMain
  *  - errorCode
  *  - result
@@ -40,26 +42,34 @@ function render (info, opts, sendToMain) {
   // - figure out if we still need this:
   //   https://github.com/plotly/streambed/blob/7311d4386d80d45999797e87992f43fb6ecf48a1/image_server/server_app/main.js#L224-L229
   // - increase pixel ratio images (scale up here, scale down in convert) ??
+  //   + scale down using https://github.com/oliver-moran/jimp ??
   // - does webp (via batik) support transparency now?
 
+  const PDF_OR_EPS = (format === 'pdf' || format === 'eps')
+  const PRINT_TO_PDF = PDF_OR_EPS && !opts.batik
+
   const imgOpts = {
-    format: (format === 'pdf' || format === 'eps') ? 'svg' : format,
+    format: PDF_OR_EPS ? 'svg' : format,
     width: info.scale * info.width,
     height: info.scale * info.height,
     // return image data w/o the leading 'data:image' spec
-    imageDataOnly: true,
+    imageDataOnly: !PRINT_TO_PDF,
     // blend jpeg background color as jpeg does not support transparency
     setBackground: format === 'jpeg' ? 'opaque' : ''
   }
 
   let promise
 
   if (semver.gte(Plotly.version, '1.30.0')) {
-    promise = Plotly.toImage({
-      data: figure.data,
-      layout: figure.layout,
-      config: config
-    }, imgOpts)
+    promise = Plotly
+      .toImage({data: figure.data, layout: figure.layout, config: config}, imgOpts)
+      .then((imgData) => {
+        if (PRINT_TO_PDF) {
+          return toPDF(imgData, imgOpts)
+        } else {
+          return imgData
+        }
+      })
   } else if (semver.gte(Plotly.version, '1.11.0')) {
     const gd = document.createElement('div')
 
@@ -69,13 +79,20 @@ function render (info, opts, sendToMain) {
       .then((imgData) => {
         Plotly.purge(gd)
 
-        switch (imgOpts.format) {
+        switch (format) {
           case 'png':
           case 'jpeg':
           case 'webp':
             return imgData.replace(cst.imgPrefix.base64, '')
           case 'svg':
-            return decodeURIComponent(imgData.replace(cst.imgPrefix.svg, ''))
+            return decodeSVG(imgData)
+          case 'pdf':
+          case 'eps':
+            if (PRINT_TO_PDF) {
+              return toPDF(imgData, imgOpts, info)
+            } else {
+              return decodeSVG(imgData)
+            }
         }
       })
   } else {
@@ -95,4 +112,59 @@ function render (info, opts, sendToMain) {
   })
 }
 
+function decodeSVG (imgData) {
+  return window.decodeURIComponent(imgData.replace(cst.imgPrefix.svg, ''))
+}
+
+/**
+ * See https://github.com/electron/electron/blob/master/docs/api/web-contents.md#contentsprinttopdfoptions-callback
+ * for other available options
+ */
+function toPDF (imgData, imgOpts, info) {
+  const win = remote.getCurrentWindow()
+
+  // TODO
+  // - how to (robustly) get pixel to microns (for pageSize) conversion factor
+  // - this work great, except runner app can't get all pdf to generate
+  //   when parallelLimit > 1 ???
+  //   + figure out why???
+  //   + maybe restrict that in coerce-opts?
+  const printOpts = {
+    marginsType: 1,
+    printSelectionOnly: true,
+    pageSize: {
+      width: (imgOpts.width) / 0.0035,
+      height: (imgOpts.height) / 0.0035
+    }
+  }
+
+  return new Promise((resolve, reject) => {
+    const div = document.createElement('div')
+    const img = document.createElement('img')
+
+    document.body.appendChild(div)
+    div.appendChild(img)
+
+    img.addEventListener('load', () => {
+      window.getSelection().selectAllChildren(div)
+
+      win.webContents.printToPDF(printOpts, (err, pdfData) => {
+        document.body.removeChild(div)
+
+        if (err) {
+          return reject(new Error('electron print to PDF error'))
+        }
+        return resolve(pdfData)
+      })
+    })
+
+    img.addEventListener('error', () => {
+      document.body.removeChild(div)
+      return reject(new Error('image failed to load'))
+    })
+
+    img.src = imgData
+  })
+}
+
 module.exports = render