diff --git a/src/traces/image/plot.js b/src/traces/image/plot.js index 4c35540e5a6..45cca6ef363 100644 --- a/src/traces/image/plot.js +++ b/src/traces/image/plot.js @@ -26,8 +26,11 @@ module.exports = function plot(gd, plotinfo, cdimage, imageLayer) { var plotGroup = d3.select(this); var cd0 = cd[0]; var trace = cd0.trace; - var fastImage = supportsPixelatedImage && !trace._hasZ && trace._hasSource && xa.type === 'linear' && ya.type === 'linear'; - trace._fastImage = fastImage; + var realImage = ( + ((trace.zsmooth === 'fast') || (trace.zsmooth === false && supportsPixelatedImage)) && + !trace._hasZ && trace._hasSource && xa.type === 'linear' && ya.type === 'linear' + ); + trace._realImage = realImage; var z = cd0.z; var x0 = cd0.x0; @@ -73,7 +76,7 @@ module.exports = function plot(gd, plotinfo, cdimage, imageLayer) { } // Reduce image size when zoomed in to save memory - if(!fastImage) { + if(!realImage) { var extra = 0.5; // half the axis size left = Math.max(-extra * xa._length, left); right = Math.min((1 + extra) * xa._length, right); @@ -138,7 +141,7 @@ module.exports = function plot(gd, plotinfo, cdimage, imageLayer) { var style = (trace.zsmooth === false) ? constants.pixelatedStyle : ''; - if(fastImage) { + if(realImage) { var xRange = Lib.simpleMap(xa.range, xa.r2l); var yRange = Lib.simpleMap(ya.range, ya.r2l); @@ -194,7 +197,7 @@ module.exports = function plot(gd, plotinfo, cdimage, imageLayer) { canvas = drawMagnifiedPixelsOnCanvas(function(i, j) {return z[j][i];}); href = canvas.toDataURL('image/png'); } else if(trace._hasSource) { - if(fastImage) { + if(realImage) { href = trace.source; } else { var context = trace._canvas.el.getContext('2d'); diff --git a/test/image/baselines/image_source_axis_reverse_zsmooth.png b/test/image/baselines/image_source_axis_reverse_zsmooth.png new file mode 100644 index 00000000000..65e80641631 Binary files /dev/null and b/test/image/baselines/image_source_axis_reverse_zsmooth.png differ diff --git a/test/image/mocks/image_source_axis_reverse_zsmooth.json b/test/image/mocks/image_source_axis_reverse_zsmooth.json new file mode 100644 index 00000000000..e4b69c3dc33 --- /dev/null +++ b/test/image/mocks/image_source_axis_reverse_zsmooth.json @@ -0,0 +1,64 @@ +{ + "data": [ + { + "zsmooth": "fast", + "colormodel": "rgba", + "type": "image", + "source": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAlCAYAAAAA7LqSAAADmklEQVR4nO2XUWhTVxjHfyfdmKMN1oelK9QSLUVY2RWHrEKtLw66KQX30Ifpg0qxz31wb8O0UNjL1I3h09iDAy000D0Z0DJhEdslBXN7SwZBJmmbErKwNuU2UXDes4d4r700bib33KflD+Ge8+We78sv3/fdcy401VRTTTXVVFMIvxwnEhG5c97fP+lbLPARZHz8qBwY+AAA0zTp69MA/4B8cTo+flRq2n4MY42dMMFgEICRkZ+Uxw2odgigafudq2majn3nWLV8ATGMNdf44cPfd9lVyxeQwcF3MIw1gsEgY2OLzM9fYmDgPebnLzlQquVLj1y//pFcWan+R1eujLm+KxYTHDr0o/K4b6l2GI2efPnY3eTUqSMUiwmgBQDD+ANNC6sOCSgurUxmVAKUSpfp6tpHLJYiFksBL4AXaFr45Vy9lGUkkxmVhpEll9ukra1q6+raB+D68d3d76oK6ZKSjGQyozIWS5HLbVIujwCQyz0jHL4LVIHsT3f3r0xNfS3/zV8jUlpaNsT6eoS2tq/Q9TnSaZOZmRAzMyFKpcvo+hz5fEE5jGcQOxt2GeXzBQC2t6fY3p5y3bu+HnFsqmE8gdh9AThlZGtr67kzDoU6CIU6nPnGxioXLnzD0NCXLC7+rQTGE4jd3MePJ9H1OQBu3PjW2SO2tp6TTvfQ2dnhWjc9PSvs++2rVyl7aun6XTY2Vl22dLqHw4erp97Ozg6WlnqIRqfFqzVqIMADiL3x7cyGrb1733bGds8ArvK6f/+HRkPXVMNHhWj0pMzlNkkmw46tvT1NofAUTXtfPnnyrKbvgwf3yImJpPIznufSOns2C8Dt22EKhafMzq6KfL7XKpfZ1cStrUEeP/YasbY8Hd6KxS/kvXvfkc3eQdO+Z3j4kTh27BMrELCoVCpYlvUqkBBIKWltrb5cLSz8ojQrnpzZEOHwaYaHHwkAISSVSgWAlpYWDCMZMIxkwLIshBAIoXxTBzyA3Lr1p8xm7zA4+DnnzoUEwNWrnzkpEEKQSi04/peXFwMA5XKZoSGT8+c/tHZ7bVwNgcTjJQfixIl2AXDt2qeWlILe3iKAC8LW0lIicOZMdXzggNrDY90g8XhJPnjwswsCqiVlmn8hhETXf3ut38nJhC9vpXU5fR2ErWy2ws2by//pc2WlXE/YN9Ibg9gQ4fDpmhCgvlx8UTxekvF4qeYjJxLptyYmPq6reS9e7Kt7zf9C/wDLc4opp/2WUgAAAABJRU5ErkJggg==" + }, + { + "zsmooth": "fast", + "colormodel": "rgba", + "type": "image", + "xaxis": "x2", + "yaxis": "y2", + "source": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAlCAYAAAAA7LqSAAADmklEQVR4nO2XUWhTVxjHfyfdmKMN1oelK9QSLUVY2RWHrEKtLw66KQX30Ifpg0qxz31wb8O0UNjL1I3h09iDAy000D0Z0DJhEdslBXN7SwZBJmmbErKwNuU2UXDes4d4r700bib33KflD+Ge8+We78sv3/fdcy401VRTTTXVVFMIvxwnEhG5c97fP+lbLPARZHz8qBwY+AAA0zTp69MA/4B8cTo+flRq2n4MY42dMMFgEICRkZ+Uxw2odgigafudq2majn3nWLV8ATGMNdf44cPfd9lVyxeQwcF3MIw1gsEgY2OLzM9fYmDgPebnLzlQquVLj1y//pFcWan+R1eujLm+KxYTHDr0o/K4b6l2GI2efPnY3eTUqSMUiwmgBQDD+ANNC6sOCSgurUxmVAKUSpfp6tpHLJYiFksBL4AXaFr45Vy9lGUkkxmVhpEll9ukra1q6+raB+D68d3d76oK6ZKSjGQyozIWS5HLbVIujwCQyz0jHL4LVIHsT3f3r0xNfS3/zV8jUlpaNsT6eoS2tq/Q9TnSaZOZmRAzMyFKpcvo+hz5fEE5jGcQOxt2GeXzBQC2t6fY3p5y3bu+HnFsqmE8gdh9AThlZGtr67kzDoU6CIU6nPnGxioXLnzD0NCXLC7+rQTGE4jd3MePJ9H1OQBu3PjW2SO2tp6TTvfQ2dnhWjc9PSvs++2rVyl7aun6XTY2Vl22dLqHw4erp97Ozg6WlnqIRqfFqzVqIMADiL3x7cyGrb1733bGds8ArvK6f/+HRkPXVMNHhWj0pMzlNkkmw46tvT1NofAUTXtfPnnyrKbvgwf3yImJpPIznufSOns2C8Dt22EKhafMzq6KfL7XKpfZ1cStrUEeP/YasbY8Hd6KxS/kvXvfkc3eQdO+Z3j4kTh27BMrELCoVCpYlvUqkBBIKWltrb5cLSz8ojQrnpzZEOHwaYaHHwkAISSVSgWAlpYWDCMZMIxkwLIshBAIoXxTBzyA3Lr1p8xm7zA4+DnnzoUEwNWrnzkpEEKQSi04/peXFwMA5XKZoSGT8+c/tHZ7bVwNgcTjJQfixIl2AXDt2qeWlILe3iKAC8LW0lIicOZMdXzggNrDY90g8XhJPnjwswsCqiVlmn8hhETXf3ut38nJhC9vpXU5fR2ErWy2ws2by//pc2WlXE/YN9Ibg9gQ4fDpmhCgvlx8UTxekvF4qeYjJxLptyYmPq6reS9e7Kt7zf9C/wDLc4opp/2WUgAAAABJRU5ErkJggg==" + }, + { + "zsmooth": "fast", + "colormodel": "rgba", + "type": "image", + "xaxis": "x3", + "yaxis": "y3", + "source": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAlCAYAAAAA7LqSAAADmklEQVR4nO2XUWhTVxjHfyfdmKMN1oelK9QSLUVY2RWHrEKtLw66KQX30Ifpg0qxz31wb8O0UNjL1I3h09iDAy000D0Z0DJhEdslBXN7SwZBJmmbErKwNuU2UXDes4d4r700bib33KflD+Ge8+We78sv3/fdcy401VRTTTXVVFMIvxwnEhG5c97fP+lbLPARZHz8qBwY+AAA0zTp69MA/4B8cTo+flRq2n4MY42dMMFgEICRkZ+Uxw2odgigafudq2majn3nWLV8ATGMNdf44cPfd9lVyxeQwcF3MIw1gsEgY2OLzM9fYmDgPebnLzlQquVLj1y//pFcWan+R1eujLm+KxYTHDr0o/K4b6l2GI2efPnY3eTUqSMUiwmgBQDD+ANNC6sOCSgurUxmVAKUSpfp6tpHLJYiFksBL4AXaFr45Vy9lGUkkxmVhpEll9ukra1q6+raB+D68d3d76oK6ZKSjGQyozIWS5HLbVIujwCQyz0jHL4LVIHsT3f3r0xNfS3/zV8jUlpaNsT6eoS2tq/Q9TnSaZOZmRAzMyFKpcvo+hz5fEE5jGcQOxt2GeXzBQC2t6fY3p5y3bu+HnFsqmE8gdh9AThlZGtr67kzDoU6CIU6nPnGxioXLnzD0NCXLC7+rQTGE4jd3MePJ9H1OQBu3PjW2SO2tp6TTvfQ2dnhWjc9PSvs++2rVyl7aun6XTY2Vl22dLqHw4erp97Ozg6WlnqIRqfFqzVqIMADiL3x7cyGrb1733bGds8ArvK6f/+HRkPXVMNHhWj0pMzlNkkmw46tvT1NofAUTXtfPnnyrKbvgwf3yImJpPIznufSOns2C8Dt22EKhafMzq6KfL7XKpfZ1cStrUEeP/YasbY8Hd6KxS/kvXvfkc3eQdO+Z3j4kTh27BMrELCoVCpYlvUqkBBIKWltrb5cLSz8ojQrnpzZEOHwaYaHHwkAISSVSgWAlpYWDCMZMIxkwLIshBAIoXxTBzyA3Lr1p8xm7zA4+DnnzoUEwNWrnzkpEEKQSi04/peXFwMA5XKZoSGT8+c/tHZ7bVwNgcTjJQfixIl2AXDt2qeWlILe3iKAC8LW0lIicOZMdXzggNrDY90g8XhJPnjwswsCqiVlmn8hhETXf3ut38nJhC9vpXU5fR2ErWy2ws2by//pc2WlXE/YN9Ibg9gQ4fDpmhCgvlx8UTxekvF4qeYjJxLptyYmPq6reS9e7Kt7zf9C/wDLc4opp/2WUgAAAABJRU5ErkJggg==" + }, + { + "zsmooth": "fast", + "colormodel": "rgba", + "type": "image", + "xaxis": "x4", + "yaxis": "y4", + "source": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAlCAYAAAAA7LqSAAADmklEQVR4nO2XUWhTVxjHfyfdmKMN1oelK9QSLUVY2RWHrEKtLw66KQX30Ifpg0qxz31wb8O0UNjL1I3h09iDAy000D0Z0DJhEdslBXN7SwZBJmmbErKwNuU2UXDes4d4r700bib33KflD+Ge8+We78sv3/fdcy401VRTTTXVVFMIvxwnEhG5c97fP+lbLPARZHz8qBwY+AAA0zTp69MA/4B8cTo+flRq2n4MY42dMMFgEICRkZ+Uxw2odgigafudq2majn3nWLV8ATGMNdf44cPfd9lVyxeQwcF3MIw1gsEgY2OLzM9fYmDgPebnLzlQquVLj1y//pFcWan+R1eujLm+KxYTHDr0o/K4b6l2GI2efPnY3eTUqSMUiwmgBQDD+ANNC6sOCSgurUxmVAKUSpfp6tpHLJYiFksBL4AXaFr45Vy9lGUkkxmVhpEll9ukra1q6+raB+D68d3d76oK6ZKSjGQyozIWS5HLbVIujwCQyz0jHL4LVIHsT3f3r0xNfS3/zV8jUlpaNsT6eoS2tq/Q9TnSaZOZmRAzMyFKpcvo+hz5fEE5jGcQOxt2GeXzBQC2t6fY3p5y3bu+HnFsqmE8gdh9AThlZGtr67kzDoU6CIU6nPnGxioXLnzD0NCXLC7+rQTGE4jd3MePJ9H1OQBu3PjW2SO2tp6TTvfQ2dnhWjc9PSvs++2rVyl7aun6XTY2Vl22dLqHw4erp97Ozg6WlnqIRqfFqzVqIMADiL3x7cyGrb1733bGds8ArvK6f/+HRkPXVMNHhWj0pMzlNkkmw46tvT1NofAUTXtfPnnyrKbvgwf3yImJpPIznufSOns2C8Dt22EKhafMzq6KfL7XKpfZ1cStrUEeP/YasbY8Hd6KxS/kvXvfkc3eQdO+Z3j4kTh27BMrELCoVCpYlvUqkBBIKWltrb5cLSz8ojQrnpzZEOHwaYaHHwkAISSVSgWAlpYWDCMZMIxkwLIshBAIoXxTBzyA3Lr1p8xm7zA4+DnnzoUEwNWrnzkpEEKQSi04/peXFwMA5XKZoSGT8+c/tHZ7bVwNgcTjJQfixIl2AXDt2qeWlILe3iKAC8LW0lIicOZMdXzggNrDY90g8XhJPnjwswsCqiVlmn8hhETXf3ut38nJhC9vpXU5fR2ErWy2ws2by//pc2WlXE/YN9Ibg9gQ4fDpmhCgvlx8UTxekvF4qeYjJxLptyYmPq6reS9e7Kt7zf9C/wDLc4opp/2WUgAAAABJRU5ErkJggg==" + } + ], + "layout": { + "grid": { + "rows": 2, + "columns": 2, + "pattern": "independent" + }, + "width": 600, + "height": 600, + "margin": { + "t": 35, + "l": 35, + "b": 35, + "r": 35 + }, + "xaxis2": { + "autorange": "reversed" + }, + "yaxis3": { + "range": [ + "8", + "32" + ] + }, + "yaxis4": { + "autorange": true + }, + "xaxis4": { + "autorange": "reversed" + } + } +} diff --git a/test/jasmine/tests/image_test.js b/test/jasmine/tests/image_test.js index 5058443d91e..6bc780f47d6 100644 --- a/test/jasmine/tests/image_test.js +++ b/test/jasmine/tests/image_test.js @@ -410,7 +410,7 @@ describe('image plot', function() { var mockCopy = Lib.extendDeep({}, mock); Plotly.newPlot(gd, mockCopy) .then(function(gd) { - expect(gd.calcdata[0][0].trace._fastImage).toBeTruthy(); + expect(gd.calcdata[0][0].trace._realImage).toBeTruthy(); }) .then(done, done.fail); }); @@ -424,11 +424,11 @@ describe('image plot', function() { var mockCopy = Lib.extendDeep({}, mock); Plotly.newPlot(gd, mockCopy) .then(function(gd) { - expect(gd.calcdata[0][0].trace._fastImage).toBe(true); + expect(gd.calcdata[0][0].trace._realImage).toBe(true); return Plotly.relayout(gd, attr[0], attr[1]); }) .then(function(gd) { - expect(gd.calcdata[0][0].trace._fastImage).toBe(false, 'when ' + attr[0] + ' is ' + attr[1]); + expect(gd.calcdata[0][0].trace._realImage).toBe(false, 'when ' + attr[0] + ' is ' + attr[1]); }) .then(done, done.fail); }); diff --git a/test/jasmine/tests/mock_test.js b/test/jasmine/tests/mock_test.js index 3749ed5429e..2b41dcf51f2 100644 --- a/test/jasmine/tests/mock_test.js +++ b/test/jasmine/tests/mock_test.js @@ -655,6 +655,7 @@ var list = [ 'image_non_numeric', 'image_opacity', 'image_source_axis_reverse', + 'image_source_axis_reverse_zsmooth', 'image_with_gaps', 'image_with_heatmap', 'image_zmin_zmax', @@ -1746,6 +1747,7 @@ figs['image_colormodel'] = require('@mocks/image_colormodel'); figs['image_non_numeric'] = require('@mocks/image_non_numeric'); figs['image_opacity'] = require('@mocks/image_opacity'); figs['image_source_axis_reverse'] = require('@mocks/image_source_axis_reverse'); +figs['image_source_axis_reverse_zsmooth'] = require('@mocks/image_source_axis_reverse_zsmooth'); figs['image_with_gaps'] = require('@mocks/image_with_gaps'); figs['image_with_heatmap'] = require('@mocks/image_with_heatmap'); figs['image_zmin_zmax'] = require('@mocks/image_zmin_zmax');