Add and Remove corresponding classes to capture higher contrast/print friendly png and jpg exports (#2088)

* add and remove corrensponding class to capture better images (wip)

* pass class through exportAsPng and exportAsJpg directly

* pass classname from stacked plots into exportImageService

* Adding additional export styles

Fixes #2088
- WIP

* WIP export styles

Fixes #2080
- Styling WIP;
- Moved styles into plots-main.scss;
- Change to how plot hashes are rendered;

* add class before clone, because adding it on clone was not rendering new css styles

* Export styles

Fixes #2080
- Code indenting cleaned up;
- Additional styles for export;
- Added hide effects for .h-local-controls and unsynced state;

* Apply class to cloned element only

src/plugins/plot/src/services/ExportImageService.js

@@ -40,8 +40,8 @@ define(
          * @constructor
          */
         function ExportImageService(dialogService) {
-            this.exportCount = 0;
             this.dialogService = dialogService;
+            this.exportCount = 0;
         }
 
         /**
@@ -51,7 +51,8 @@ define(
          * @param {string} type of image to convert the element to.
          * @returns {promise}
          */
-        ExportImageService.prototype.renderElement = function (element, imageType, color) {
+        ExportImageService.prototype.renderElement = function (element, imageType, className) {
+
             var dialogService = this.dialogService,
                 dialog = dialogService.showBlockingMessage({
                     title: "Capturing...",
@@ -66,18 +67,18 @@ define(
                 mimeType = "image/jpeg";
             }
 
-            var exportId = 'export-element-' + this.exportCount;
-            this.exportCount++;
-            var oldId = element.id;
-            element.id = exportId;
+            if (className) {
+                var exportId = 'export-element-' + this.exportCount;
+                this.exportCount++;
+                var oldId = element.id;
+                element.id = exportId;
+            }
 
             return html2canvas(element, {
                 onclone: function (document) {
-                    // Make export style changes to cloned document so that
-                    // users don't see view flickering.
-                    var clonedElement = document.getElementById(exportId);
-                    if (clonedElement && color) {
-                        clonedElement.style.backgroundColor = color;
+                    if (className) {
+                        var clonedElement = document.getElementById(exportId);
+                        clonedElement.classList.add(className);
                     }
                     element.id = oldId;
                 }
@@ -107,10 +108,11 @@ define(
          * Takes a screenshot of a DOM node and exports to JPG.
          * @param {node} element to be exported
          * @param {string} filename the exported image
+         * @param {string} className to be added to element before capturing (optional)
          * @returns {promise}
          */
-        ExportImageService.prototype.exportJPG = function (element, filename, color) {
-            return this.renderElement(element, "jpg", color).then(function (img) {
+        ExportImageService.prototype.exportJPG = function (element, filename, className) {
+            return this.renderElement(element, "jpg", className).then(function (img) {
                 saveAs(img, filename);
             });
         };
@@ -119,10 +121,11 @@ define(
          * Takes a screenshot of a DOM node and exports to PNG.
          * @param {node} element to be exported
          * @param {string} filename the exported image
+         * @param {string} className to be added to element before capturing (optional)
          * @returns {promise}
          */
-        ExportImageService.prototype.exportPNG = function (element, filename, color) {
-            return this.renderElement(element, "png", color).then(function (img) {
+        ExportImageService.prototype.exportPNG = function (element, filename, className) {
+            return this.renderElement(element, "png", className).then(function (img) {
                 saveAs(img, filename);
             });
         };

src/plugins/plot/src/telemetry/PlotController.js

@@ -245,7 +245,7 @@ define([
      */
     PlotController.prototype.exportJPG = function () {
         this.hideExportButtons = true;
-        this.exportImageService.exportJPG(this.$element[0], 'plot.jpg', 'white')
+        this.exportImageService.exportJPG(this.$element[0], 'plot.jpg', 'export-plot')
             .finally(function () {
                 this.hideExportButtons = false;
             }.bind(this));
@@ -256,7 +256,7 @@ define([
      */
     PlotController.prototype.exportPNG = function () {
         this.hideExportButtons = true;
-        this.exportImageService.exportPNG(this.$element[0], 'plot.png', 'white')
+        this.exportImageService.exportPNG(this.$element[0], 'plot.png', 'export-plot')
             .finally(function () {
                 this.hideExportButtons = false;
             }.bind(this));

src/plugins/plot/src/telemetry/StackedPlotController.js

@@ -142,7 +142,7 @@ define([
 
     StackedPlotController.prototype.exportJPG = function () {
         this.hideExportButtons = true;
-        this.exportImageService.exportJPG(this.$element[0], 'stacked-plot.jpg')
+        this.exportImageService.exportJPG(this.$element[0], 'stacked-plot.jpg', 'export-plot')
             .finally(function () {
                 this.hideExportButtons = false;
             }.bind(this));
@@ -150,7 +150,7 @@ define([
 
     StackedPlotController.prototype.exportPNG = function () {
         this.hideExportButtons = true;
-        this.exportImageService.exportPNG(this.$element[0], 'stacked-plot.png')
+        this.exportImageService.exportPNG(this.$element[0], 'stacked-plot.png', 'export-plot')
             .finally(function () {
                 this.hideExportButtons = false;
             }.bind(this));