Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit c25484b

Browse files
lvltelvlte
committedApr 27, 2023
Refactor: pixelated image rendering (2)
- fix circular dependency (introduced in previous commit) - move css constants into `src/constants/pixelated_image` - move support function into `src/lib/supports_pixelated_image`
1 parent 6fb171f commit c25484b

File tree

5 files changed

+79
-61
lines changed

5 files changed

+79
-61
lines changed
 

‎src/constants/pixelated_image.js

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
'use strict';
2+
3+
// Pixelated image rendering
4+
// The actual CSS declaration is prepended with fallbacks for older browsers.
5+
// NB. IE's `-ms-interpolation-mode` works only with <img> not with SVG <image>
6+
// https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering
7+
// https://caniuse.com/?search=image-rendering
8+
// http://phrogz.net/tmp/canvas_image_zoom.html
9+
10+
exports.CSS_DECLARATIONS = [
11+
['image-rendering', 'optimizeSpeed'],
12+
['image-rendering', '-moz-crisp-edges'],
13+
['image-rendering', '-o-crisp-edges'],
14+
['image-rendering', '-webkit-optimize-contrast'],
15+
['image-rendering', 'optimize-contrast'],
16+
['image-rendering', 'crisp-edges'],
17+
['image-rendering', 'pixelated']
18+
];
19+
20+
exports.STYLE = exports.CSS_DECLARATIONS.map(function(d) {
21+
return d.join(': ') + '; ';
22+
}).join('');

‎src/lib/index.js

Lines changed: 0 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1426,59 +1426,3 @@ lib.getPositionFromD3Event = function() {
14261426
];
14271427
}
14281428
};
1429-
1430-
// Pixelated image rendering
1431-
// The actual CSS declaration is prepended with fallbacks for older browsers.
1432-
// NB. IE's `-ms-interpolation-mode` works only with <img> not with SVG <image>
1433-
// https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering
1434-
// https://caniuse.com/?search=image-rendering
1435-
// http://phrogz.net/tmp/canvas_image_zoom.html
1436-
var PIXELATED_IMAGE_DECLARATIONS = [
1437-
['image-rendering', 'optimizeSpeed'],
1438-
['image-rendering', '-moz-crisp-edges'],
1439-
['image-rendering', '-o-crisp-edges'],
1440-
['image-rendering', '-webkit-optimize-contrast'],
1441-
['image-rendering', 'optimize-contrast'],
1442-
['image-rendering', 'crisp-edges'],
1443-
['image-rendering', 'pixelated']
1444-
];
1445-
1446-
lib.PIXELATED_IMAGE_STYLE = PIXELATED_IMAGE_DECLARATIONS.map(function(d) {
1447-
return d.join(': ') + '; ';
1448-
}).join('');
1449-
1450-
var _supportsPixelated = null;
1451-
1452-
/**
1453-
* Check browser support for pixelated image rendering
1454-
*
1455-
* @return {boolean}
1456-
*/
1457-
lib.supportsPixelatedImage = function() {
1458-
if(_supportsPixelated !== null) { // only run the feature detection once
1459-
return _supportsPixelated;
1460-
}
1461-
if(lib.isIE()) {
1462-
_supportsPixelated = false;
1463-
} else {
1464-
var declarations = Array.from(PIXELATED_IMAGE_DECLARATIONS).reverse();
1465-
var supports = window.CSS && window.CSS.supports || window.supportsCSS;
1466-
if(typeof supports === 'function') {
1467-
_supportsPixelated = declarations.some(function(d) {
1468-
return supports.apply(null, d);
1469-
});
1470-
} else {
1471-
var Drawing = require('../components/drawing');
1472-
var image3 = Drawing.tester.append('image');
1473-
var cStyles = window.getComputedStyle(image3.node());
1474-
image3.attr('style', lib.PIXELATED_IMAGE_STYLE);
1475-
_supportsPixelated = declarations.some(function(d) {
1476-
var value = d[1];
1477-
return cStyles.imageRendering === value ||
1478-
cStyles.imageRendering === value.toLowerCase();
1479-
});
1480-
image3.remove();
1481-
}
1482-
}
1483-
return _supportsPixelated;
1484-
};

‎src/lib/supports_pixelated_image.js

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
'use strict';
2+
3+
var constants = require('../constants/pixelated_image');
4+
var Drawing = require('../components/drawing');
5+
var Lib = require('../lib');
6+
7+
var _supportsPixelated = null;
8+
9+
/**
10+
* Check browser support for pixelated image rendering
11+
*
12+
* @return {boolean}
13+
*/
14+
function supportsPixelatedImage() {
15+
if(_supportsPixelated !== null) { // only run the feature detection once
16+
return _supportsPixelated;
17+
}
18+
if(Lib.isIE()) {
19+
_supportsPixelated = false;
20+
} else {
21+
var declarations = Array.from(constants.CSS_DECLARATIONS).reverse();
22+
var supports = window.CSS && window.CSS.supports || window.supportsCSS;
23+
if(typeof supports === 'function') {
24+
_supportsPixelated = declarations.some(function(d) {
25+
return supports.apply(null, d);
26+
});
27+
} else {
28+
var image3 = Drawing.tester.append('image');
29+
var cStyles = window.getComputedStyle(image3.node());
30+
image3.attr('style', constants.STYLE);
31+
_supportsPixelated = declarations.some(function(d) {
32+
var value = d[1];
33+
return cStyles.imageRendering === value ||
34+
cStyles.imageRendering === value.toLowerCase();
35+
});
36+
image3.remove();
37+
}
38+
}
39+
return _supportsPixelated;
40+
}
41+
42+
module.exports = supportsPixelatedImage;

‎src/traces/heatmap/plot.js

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@ var makeColorScaleFuncFromTrace = require('../../components/colorscale').makeCol
1515
var xmlnsNamespaces = require('../../constants/xmlns_namespaces');
1616
var alignmentConstants = require('../../constants/alignment');
1717
var LINE_SPACING = alignmentConstants.LINE_SPACING;
18+
var supportsPixelatedImage = require('../../lib/supports_pixelated_image');
19+
var PIXELATED_IMAGE_STYLE = require('../../constants/pixelated_image').STYLE;
1820

1921
var labelClass = 'heatmap-label';
2022

@@ -112,7 +114,7 @@ module.exports = function(gd, plotinfo, cdheatmaps, heatmapLayer) {
112114
var drawingMethod = 'default';
113115
if(zsmooth) {
114116
drawingMethod = zsmooth === 'best' ? 'smooth' : 'fast';
115-
} else if(trace._islinear && xGap === 0 && yGap === 0 && Lib.supportsPixelatedImage()) {
117+
} else if(trace._islinear && xGap === 0 && yGap === 0 && supportsPixelatedImage()) {
116118
drawingMethod = 'fast';
117119
}
118120

@@ -137,13 +139,19 @@ module.exports = function(gd, plotinfo, cdheatmaps, heatmapLayer) {
137139
var isOffScreen = (imageWidth <= 0 || imageHeight <= 0);
138140

139141
if(isOffScreen) {
142+
// console.log('isOffScreen', drawingMethod);
143+
140144
var noImage = plotGroup.selectAll('image').data([]);
141145
noImage.exit().remove();
142146

143147
removeLabels(plotGroup);
144148
return;
145149
}
146150

151+
// console.log('drawingMethod', drawingMethod);
152+
// console.log(left, right);
153+
154+
147155
// generate image data
148156

149157
var canvasW, canvasH;
@@ -362,7 +370,7 @@ module.exports = function(gd, plotinfo, cdheatmaps, heatmapLayer) {
362370
});
363371

364372
if(drawingMethod === 'fast' && !zsmooth) {
365-
image3.attr('style', Lib.PIXELATED_IMAGE_STYLE);
373+
image3.attr('style', PIXELATED_IMAGE_STYLE);
366374
}
367375

368376
removeLabels(plotGroup);

‎src/traces/image/plot.js

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,19 +5,21 @@ var Lib = require('../../lib');
55
var strTranslate = Lib.strTranslate;
66
var xmlnsNamespaces = require('../../constants/xmlns_namespaces');
77
var constants = require('./constants');
8+
var supportsPixelatedImage = require('../../lib/supports_pixelated_image');
9+
var PIXELATED_IMAGE_STYLE = require('../../constants/pixelated_image').STYLE;
810

911
module.exports = function plot(gd, plotinfo, cdimage, imageLayer) {
1012
var xa = plotinfo.xaxis;
1113
var ya = plotinfo.yaxis;
1214

13-
var supportsPixelatedImage = !gd._context._exportedPlot && Lib.supportsPixelatedImage();
15+
var supportsPixelated = !gd._context._exportedPlot && supportsPixelatedImage();
1416

1517
Lib.makeTraceGroups(imageLayer, cdimage, 'im').each(function(cd) {
1618
var plotGroup = d3.select(this);
1719
var cd0 = cd[0];
1820
var trace = cd0.trace;
1921
var realImage = (
20-
((trace.zsmooth === 'fast') || (trace.zsmooth === false && supportsPixelatedImage)) &&
22+
((trace.zsmooth === 'fast') || (trace.zsmooth === false && supportsPixelated)) &&
2123
!trace._hasZ && trace._hasSource && xa.type === 'linear' && ya.type === 'linear'
2224
);
2325
trace._realImage = realImage;
@@ -129,7 +131,7 @@ module.exports = function plot(gd, plotinfo, cdimage, imageLayer) {
129131

130132
image3.exit().remove();
131133

132-
var style = (trace.zsmooth === false) ? Lib.PIXELATED_IMAGE_STYLE : '';
134+
var style = (trace.zsmooth === false) ? PIXELATED_IMAGE_STYLE : '';
133135

134136
if(realImage) {
135137
var xRange = Lib.simpleMap(xa.range, xa.r2l);

0 commit comments

Comments
 (0)
Please sign in to comment.