Merge pull request #4313 from plotly/image-constrain

image: constrain axes to domain, apply defaults whenever an image is present

Author: antoinerg

src/plots/cartesian/constraints.js

@@ -21,6 +21,7 @@ exports.handleConstraintDefaults = function(containerIn, containerOut, coerce, o
     var allAxisIds = opts.allAxisIds;
     var layoutOut = opts.layoutOut;
     var scaleanchorDflt = opts.scaleanchorDflt;
+    var constrainDflt = opts.constrainDflt;
     var constraintGroups = layoutOut._axisConstraintGroups;
     var matchGroups = layoutOut._axisMatchGroups;
     var axId = containerOut._id;
@@ -31,7 +32,7 @@ exports.handleConstraintDefaults = function(containerIn, containerOut, coerce, o
 
     // coerce the constraint mechanics even if this axis has no scaleanchor
     // because it may be the anchor of another axis.
-    var constrain = coerce('constrain');
+    var constrain = coerce('constrain', constrainDflt);
     Lib.coerce(containerIn, containerOut, {
         constraintoward: {
             valType: 'enumerated',

src/plots/cartesian/layout_defaults.js

@@ -41,8 +41,7 @@ module.exports = function supplyLayoutDefaults(layoutIn, layoutOut, fullData) {
     var yaMustDisplay = {};
     var yaMustNotReverse = {};
     var yaMayReverse = {};
-    var yaMustNotScaleanchor = {};
-    var yaMayScaleanchor = {};
+    var axHasImage = {};
     var outerTicks = {};
     var noGrids = {};
     var i, j;
@@ -80,17 +79,13 @@ module.exports = function supplyLayoutDefaults(layoutIn, layoutOut, fullData) {
             } else {
                 if(yaName) yaMayHide[yaName] = true;
             }
-            yaMustNotScaleanchor[yaName] = true;
         } else if(trace.type === 'image') {
-            if(yaName) {
-                yaMayReverse[yaName] = true;
-                yaMayScaleanchor[yaName] = true;
-            }
+            if(yaName) axHasImage[yaName] = true;
+            if(xaName) axHasImage[xaName] = true;
         } else {
             if(yaName) {
                 yaMustDisplay[yaName] = true;
                 yaMustNotReverse[yaName] = true;
-                yaMustNotScaleanchor[yaName] = true;
             }
 
             if(!traceIs(trace, 'carpet') || (trace.type === 'carpet' && !trace._cheater)) {
@@ -201,7 +196,11 @@ module.exports = function supplyLayoutDefaults(layoutIn, layoutOut, fullData) {
             (axLetter === 'y' && !yaMustDisplay[axName] && yaMayHide[axName]);
 
         var reverseDflt =
-            (axLetter === 'y' && !yaMustNotReverse[axName] && yaMayReverse[axName]);
+            (axLetter === 'y' &&
+              (
+                (!yaMustNotReverse[axName] && yaMayReverse[axName]) ||
+                axHasImage[axName]
+              ));
 
         var defaultOptions = {
             letter: axLetter,
@@ -303,16 +302,21 @@ module.exports = function supplyLayoutDefaults(layoutIn, layoutOut, fullData) {
         axLayoutIn = layoutIn[axName];
         axLayoutOut = layoutOut[axName];
 
-        var scaleanchorDflt = null;
-        if(axLetter === 'y' && !axLayoutIn.hasOwnProperty('scaleanchor') &&
-              !yaMustNotScaleanchor[axName] && yaMayScaleanchor[axName]
-        ) {
+        var scaleanchorDflt;
+        if(axLetter === 'y' && !axLayoutIn.hasOwnProperty('scaleanchor') && axHasImage[axName]) {
             scaleanchorDflt = axLayoutOut.anchor;
-        }
+        } else {scaleanchorDflt = undefined;}
+
+        var constrainDflt;
+        if(!axLayoutIn.hasOwnProperty('constrain') && axHasImage[axName]) {
+            constrainDflt = 'domain';
+        } else {constrainDflt = undefined;}
+
         handleConstraintDefaults(axLayoutIn, axLayoutOut, coerce, {
             allAxisIds: allAxisIds,
             layoutOut: layoutOut,
-            scaleanchorDflt: scaleanchorDflt
+            scaleanchorDflt: scaleanchorDflt,
+            constrainDflt: constrainDflt
         });
     }
 

src/traces/image/index.js

@@ -25,9 +25,10 @@ module.exports = {
     meta: {
         description: [
             'Display an image, i.e. data on a 2D regular raster.',
-            'If only images are displayed in a subplot,',
-            'the y axis will be reversed (ie. `autorange: \'reversed\'`)',
-            'and it will have the same scale as the x axis (ie. `scaleanchor: \'x\,`)',
+            'By default, when an image is displayed in a subplot,',
+            'its y axis will be reversed (ie. `autorange: \'reversed\'`),',
+            'constrained to the domain (ie. `constrain: \'domain\'`)',
+            'and it will have the same scale as its x axis (ie. `scaleanchor: \'x\,`)',
             'in order for pixels to be rendered as squares.'
         ].join(' ')
     }

test/image/baselines/image_axis_reverse.png

@@ -116,11 +116,19 @@ describe('image smart layout defaults', function() {
         expect(gd._fullLayout.yaxis.autorange).toBe('reversed');
     });
 
-    it('should NOT reverse yaxis if another trace is present', function() {
+    it('should reverse yaxis even if another trace is present', function() {
         gd = {};
         gd.data = [{type: 'image', z: [[[255, 0, 0]]]}, {type: 'scatter', y: [5, 3, 2]}];
         supplyAllDefaults(gd);
-        expect(gd._fullLayout.yaxis.autorange).not.toBe('reversed');
+        expect(gd._fullLayout.yaxis.autorange).toBe('reversed');
+    });
+
+    it('should NOT reverse yaxis if it\'s already defined', function() {
+        gd = {};
+        gd.data = [{type: 'image', z: [[[255, 0, 0]]]}];
+        gd.layout = {yaxis: {autorange: false}};
+        supplyAllDefaults(gd);
+        expect(gd._fullLayout.yaxis.autorange).toBe(false);
     });
 
     it('should set scaleanchor to make square pixels if only images are present', function() {
@@ -130,19 +138,43 @@ describe('image smart layout defaults', function() {
         expect(gd._fullLayout.yaxis.scaleanchor).toBe('x');
     });
 
-    it('should NOT set scaleanchor if another trace is present', function() {
+    it('should set scaleanchor even if another trace is present', function() {
         gd = {};
         gd.data = [{type: 'image', z: [[[255, 0, 0]]]}, {type: 'scatter', y: [5, 3, 2]}];
         supplyAllDefaults(gd);
-        expect(gd._fullLayout.yaxis.scaleanchor).toBe(undefined);
+        expect(gd._fullLayout.yaxis.scaleanchor).toBe('x');
     });
 
     it('should NOT set scaleanchor if it\'s already defined', function() {
-        gd.data = [{type: 'image', z: [[[255, 0, 0]]]}, {type: 'scatter', y: [5, 3, 2]}];
+        gd.data = [{type: 'image', z: [[[255, 0, 0]]]}];
         gd.layout = {yaxis: {scaleanchor: 'x3'}};
         supplyAllDefaults(gd);
         expect(gd._fullLayout.yaxis.scaleanchor).toBe(undefined);
     });
+
+    it('should constrain axes to domain if only images are present', function() {
+        gd = {};
+        gd.data = [{type: 'image', z: [[[255, 0, 0]]]}];
+        supplyAllDefaults(gd);
+        expect(gd._fullLayout.xaxis.constrain).toBe('domain');
+        expect(gd._fullLayout.yaxis.constrain).toBe('domain');
+    });
+
+    it('should constrain axes to domain even if another trace is present', function() {
+        gd = {};
+        gd.data = [{type: 'image', z: [[[255, 0, 0]]]}, {type: 'scatter', y: [5, 3, 2]}];
+        supplyAllDefaults(gd);
+        expect(gd._fullLayout.xaxis.constrain).toBe('domain');
+        expect(gd._fullLayout.yaxis.constrain).toBe('domain');
+    });
+
+    it('should NOT constrain axes to domain if it\'s already defined', function() {
+        gd.data = [{type: 'image', z: [[[255, 0, 0]]]}];
+        gd.layout = {yaxis: {constrain: false}, xaxis: {constrain: false}};
+        supplyAllDefaults(gd);
+        expect(gd._fullLayout.xaxis.constrain).toBe('range');
+        expect(gd._fullLayout.yaxis.constrain).toBe('range');
+    });
 });
 
 describe('image plot', function() {
@@ -489,7 +521,7 @@ describe('image hover:', function() {
                 zmax: [1, 1, 1],
                 text: [['A', 'B', 'C'], ['D', 'E', 'F']],
                 hovertemplate: '%{text}<extra></extra>'
-            }], layout: {width: 400, height: 400}};
+            }], layout: {width: 400, height: 400, yaxis: {constrain: 'range'}}};
 
             Plotly.newPlot(gd, mockCopy)
             .then(function() {_hover(140, 180);})