Refactor: pixelated image rendering

- move style and support function into `src/lib`
- make heatmap and image trace use the same base

Author: lvlte

src/lib/index.js

@@ -1426,3 +1426,59 @@ lib.getPositionFromD3Event = function() {
         ];
     }
 };
+
+// Pixelated image rendering
+// The actual CSS declaration is prepended with fallbacks for older browsers.
+// NB. IE's `-ms-interpolation-mode` works only with <img> not with SVG <image>
+// https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering
+// https://caniuse.com/?search=image-rendering
+// http://phrogz.net/tmp/canvas_image_zoom.html
+var PIXELATED_IMAGE_DECLARATIONS = [
+    ['image-rendering', 'optimizeSpeed'],
+    ['image-rendering', '-moz-crisp-edges'],
+    ['image-rendering', '-o-crisp-edges'],
+    ['image-rendering', '-webkit-optimize-contrast'],
+    ['image-rendering', 'optimize-contrast'],
+    ['image-rendering', 'crisp-edges'],
+    ['image-rendering', 'pixelated']
+];
+
+lib.PIXELATED_IMAGE_STYLE = PIXELATED_IMAGE_DECLARATIONS.map(function(d) {
+    return d.join(': ') + '; ';
+}).join('');
+
+var _supportsPixelated = null;
+
+/**
+ * Check browser support for pixelated image rendering
+ *
+ * @return {boolean}
+ */
+lib.supportsPixelatedImage = function() {
+    if(_supportsPixelated !== null) { // only run the feature detection once
+        return _supportsPixelated;
+    }
+    if(lib.isIE()) {
+        _supportsPixelated = false;
+    } else {
+        var declarations = Array.from(PIXELATED_IMAGE_DECLARATIONS).reverse();
+        var supports = window.CSS && window.CSS.supports || window.supportsCSS;
+        if(typeof supports === 'function') {
+            _supportsPixelated = declarations.some(function(d) {
+                return supports.apply(null, d);
+            });
+        } else {
+            var Drawing = require('../components/drawing');
+            var image3 = Drawing.tester.append('image');
+            var cStyles = window.getComputedStyle(image3.node());
+            image3.attr('style', lib.PIXELATED_IMAGE_STYLE);
+            _supportsPixelated = declarations.some(function(d) {
+                var value = d[1];
+                return cStyles.imageRendering === value ||
+                       cStyles.imageRendering === value.toLowerCase();
+            });
+            image3.remove();
+        }
+    }
+    return _supportsPixelated;
+};

src/traces/heatmap/plot.js

@@ -18,50 +18,6 @@ var LINE_SPACING = alignmentConstants.LINE_SPACING;
 
 var labelClass = 'heatmap-label';
 
-// Pixelated image rendering
-// The actual declaration is prepended with fallbacks for older browsers.
-// https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering
-// https://caniuse.com/?search=image-rendering
-var pixelatedImageCSS = [
-    'image-rendering: optimizeSpeed',
-    'image-rendering: -moz-crisp-edges',
-    'image-rendering: -o-crisp-edges',
-    'image-rendering: -webkit-optimize-contrast',
-    'image-rendering: optimize-contrast',
-    'image-rendering: crisp-edges',
-    'image-rendering: pixelated'
-];
-
-var _supportsPixelated = null;
-function supportsPixelatedImage() {
-    if(_supportsPixelated !== null) { // only run the feature detection once
-        return _supportsPixelated;
-    }
-    if(Lib.isIE()) {
-        // `-ms-interpolation-mode` works only with <img> not with SVG <image>
-        _supportsPixelated = false;
-    } else {
-        var declarations = Array.from(pixelatedImageCSS).reverse();
-        var supports = window.CSS && window.CSS.supports || window.supportsCSS;
-        if(typeof supports === 'function') {
-            _supportsPixelated = declarations.some(function(d) {
-                return supports.apply(null, d.split(': '));
-            });
-        } else {
-            var image3 = Drawing.tester.append('image');
-            var cStyles = window.getComputedStyle(image3.node());
-            image3.attr('style', pixelatedImageCSS.join('; ') + ';');
-            _supportsPixelated = declarations.some(function(d) {
-                var value = d.split(': ')[1];
-                return cStyles.imageRendering === value ||
-                       cStyles.imageRendering === value.toLowerCase();
-            });
-            image3.remove();
-        }
-    }
-    return _supportsPixelated;
-}
-
 function selectLabels(plotGroup) {
     return plotGroup.selectAll('g.' + labelClass);
 }
@@ -156,7 +112,7 @@ module.exports = function(gd, plotinfo, cdheatmaps, heatmapLayer) {
         var drawingMethod = 'default';
         if(zsmooth) {
             drawingMethod = zsmooth === 'best' ? 'smooth' : 'fast';
-        } else if(trace._islinear && xGap === 0 && yGap === 0 && supportsPixelatedImage()) {
+        } else if(trace._islinear && xGap === 0 && yGap === 0 && Lib.supportsPixelatedImage()) {
             drawingMethod = 'fast';
         }
 
@@ -406,7 +362,7 @@ module.exports = function(gd, plotinfo, cdheatmaps, heatmapLayer) {
         });
 
         if(drawingMethod === 'fast' && !zsmooth) {
-            image3.attr('style', pixelatedImageCSS.join('; ') + ';');
+            image3.attr('style', Lib.PIXELATED_IMAGE_STYLE);
         }
 
         removeLabels(plotGroup);

src/traces/image/constants.js

@@ -47,18 +47,5 @@ module.exports = {
             },
             suffix: ['°', '%', '%', '']
         }
-    },
-    // For pixelated image rendering
-    // http://phrogz.net/tmp/canvas_image_zoom.html
-    // https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering
-    pixelatedStyle: [
-        'image-rendering: optimizeSpeed',
-        'image-rendering: -moz-crisp-edges',
-        'image-rendering: -o-crisp-edges',
-        'image-rendering: -webkit-optimize-contrast',
-        'image-rendering: optimize-contrast',
-        'image-rendering: crisp-edges',
-        'image-rendering: pixelated',
-        ''
-    ].join('; ')
+    }
 };

src/traces/image/plot.js

@@ -6,13 +6,11 @@ var strTranslate = Lib.strTranslate;
 var xmlnsNamespaces = require('../../constants/xmlns_namespaces');
 var constants = require('./constants');
 
-var unsupportedBrowsers = Lib.isIOS() || Lib.isSafari() || Lib.isIE();
-
 module.exports = function plot(gd, plotinfo, cdimage, imageLayer) {
     var xa = plotinfo.xaxis;
     var ya = plotinfo.yaxis;
 
-    var supportsPixelatedImage = !(unsupportedBrowsers || gd._context._exportedPlot);
+    var supportsPixelatedImage = !gd._context._exportedPlot && Lib.supportsPixelatedImage();
 
     Lib.makeTraceGroups(imageLayer, cdimage, 'im').each(function(cd) {
         var plotGroup = d3.select(this);
@@ -131,7 +129,7 @@ module.exports = function plot(gd, plotinfo, cdimage, imageLayer) {
 
         image3.exit().remove();
 
-        var style = (trace.zsmooth === false) ? constants.pixelatedStyle : '';
+        var style = (trace.zsmooth === false) ? Lib.PIXELATED_IMAGE_STYLE : '';
 
         if(realImage) {
             var xRange = Lib.simpleMap(xa.range, xa.r2l);