Merge pull request #7358 from plotly/alex/zoombutton-axes

feat: New cartesian axis `modebardisable` attribute

Author: alexcjohnson

draftlogs/7358_add.md

@@ -0,0 +1 @@
+- Add modebardisable attribute to cartesian axes, to allow fine control over which buttons affect which axes [[#7358](https://github.com/plotly/plotly.js/pull/7358)]

src/components/modebar/buttons.js

@@ -256,12 +256,15 @@ function handleCartesian(gd, ev) {
         var mag = (val === 'in') ? 0.5 : 2;
         var r0 = (1 + mag) / 2;
         var r1 = (1 - mag) / 2;
-        var axName;
+        var axName, allowed;
 
         for(i = 0; i < axList.length; i++) {
             ax = axList[i];
+            allowed = ax.modebardisable === 'none' || ax.modebardisable.indexOf(
+                (val === 'auto' || val === 'reset') ? 'autoscale' : 'zoominout'
+            ) === -1;
 
-            if(!ax.fixedrange) {
+            if(allowed && !ax.fixedrange) {
                 axName = ax._name;
                 if(val === 'auto') {
                     aobj[axName + '.autorange'] = true;

src/components/modebar/manage.js

@@ -269,7 +269,8 @@ function areAllAxesFixed(fullLayout) {
     var axList = axisIds.list({_fullLayout: fullLayout}, null, true);
 
     for(var i = 0; i < axList.length; i++) {
-        if(!axList[i].fixedrange) {
+        var disabled = axList[i].modebardisable;
+        if(!axList[i].fixedrange && disabled !== 'autoscale+zoominout' && disabled !== 'zoominout+autoscale') {
             return false;
         }
     }

src/plots/cartesian/layout_attributes.js

@@ -389,6 +389,18 @@ module.exports = {
             'If true, then zoom is disabled.'
         ].join(' ')
     },
+    modebardisable: {
+        valType: 'flaglist',
+        flags: ['autoscale', 'zoominout'],
+        extras: ['none'],
+        dflt: 'none',
+        editType: 'modebar',
+        description: [
+            'Disables certain modebar buttons for this axis.',
+            '*autoscale* disables the autoscale buttons, *zoominout*',
+            'disables the zoom-in and zoom-out buttons.'
+        ].join(' ')
+    },
     insiderange: {
         valType: 'info_array',
         items: [

src/plots/cartesian/layout_defaults.js

@@ -338,6 +338,7 @@ module.exports = function supplyLayoutDefaults(layoutIn, layoutOut, fullData) {
         });
 
         coerce('fixedrange');
+        coerce('modebardisable');
 
         addMissingMatchedAxis();
 
@@ -366,6 +367,7 @@ module.exports = function supplyLayoutDefaults(layoutIn, layoutOut, fullData) {
         }
 
         coerce('fixedrange');
+        coerce('modebardisable');
     }
 
     for(i = 0; i < yNames.length; i++) {
@@ -378,6 +380,7 @@ module.exports = function supplyLayoutDefaults(layoutIn, layoutOut, fullData) {
         var fixedRangeDflt = getComponentMethod('rangeslider', 'isVisible')(anchoredAxis);
 
         coerce('fixedrange', fixedRangeDflt);
+        coerce('modebardisable');
     }
 
     // Finally, handle scale constraints and matching axes.

test/jasmine/tests/modebar_test.js

@@ -1193,6 +1193,62 @@ describe('ModeBar', function() {
                     assertRange('xaxis2', [-1, 4]);
                     assertRange('yaxis2', [0, 4]);
                 });
+
+                it('should respect modebardisable attribute', function(done) {
+                    Plotly.relayout(gd, {
+                        'xaxis.modebardisable': 'zoominout+autoscale',
+                        'xaxis2.modebardisable': 'zoominout',
+                        'yaxis.modebardisable': 'autoscale',
+                    }).then(function() {
+                        var buttonZoomIn = selectButton(modeBar, 'zoomIn2d');
+                        var buttonZoomOut = selectButton(modeBar, 'zoomOut2d');
+
+                        assertRange('xaxis', ['2016-01-01', '2016-04-01']);
+                        assertRange('yaxis', [1, 3]);
+                        assertRange('xaxis2', [-1, 4]);
+                        assertRange('yaxis2', [0, 4]);
+
+                        // xaxis and xaxis2 should not be affected by zoom in/out
+                        // yaxis and yaxis2 should be affected as in previous test
+                        buttonZoomIn.click();
+                        assertRange('xaxis', ['2016-01-01', '2016-04-01']);
+                        assertRange('yaxis', [1.5, 2.5]);
+                        assertRange('xaxis2', [-1, 4]);
+                        assertRange('yaxis2', [1, 3]);
+
+                        buttonZoomOut.click();
+                        assertRange('xaxis', ['2016-01-01', '2016-04-01']);
+                        assertRange('yaxis', [1, 3]);
+                        assertRange('xaxis2', [-1, 4]);
+                        assertRange('yaxis2', [0, 4]);
+
+                        return Plotly.relayout(gd, {
+                            'xaxis.range': ['2016-01-23 17:45', '2016-03-09 05:15'],
+                            'yaxis.range': [1.5, 2.5],
+                            'xaxis2.range': [0.25, 2.75],
+                            'yaxis2.range': [1, 3],
+                        });
+                    })
+                    .then(function() {
+                        var buttonAutoScale = selectButton(modeBar, 'autoScale2d');
+                        var buttonResetScale = selectButton(modeBar, 'resetScale2d');
+
+                        // xaxis and yaxis should not be affected by autorange
+                        // xaxis2 and yaxis2 should be affected as in previous test
+                        buttonAutoScale.click();
+                        assertRange('xaxis', ['2016-01-23 17:45', '2016-03-09 05:15']);
+                        assertRange('yaxis', [1.5, 2.5]);
+                        assertRange('xaxis2', [-0.5, 2.5]);
+                        assertRange('yaxis2', [0, 2.105263]);
+
+                        buttonResetScale.click();
+                        assertRange('xaxis', ['2016-01-23 17:45', '2016-03-09 05:15']);
+                        assertRange('yaxis', [1.5, 2.5]);
+                        assertRange('xaxis2', [-1, 4]);
+                        assertRange('yaxis2', [0, 4]);
+                    })
+                    .then(done, done.fail)
+                });
             });
 
             describe('buttons zoom2d, pan2d, select2d and lasso2d', function() {

test/plot-schema.json

@@ -13953,6 +13953,19 @@
       "allticks"
      ]
     },
+    "modebardisable": {
+     "description": "Disables certain modebar buttons for this axis. *autoscale* disables the autoscale buttons, *zoominout* disables the zoom-in and zoom-out buttons.",
+     "dflt": "none",
+     "editType": "modebar",
+     "extras": [
+      "none"
+     ],
+     "flags": [
+      "autoscale",
+      "zoominout"
+     ],
+     "valType": "flaglist"
+    },
     "nticks": {
      "description": "Specifies the maximum number of ticks for the particular axis. The actual number of ticks will be chosen automatically to be less than or equal to `nticks`. Has an effect only if `tickmode` is set to *auto*.",
      "dflt": 0,
@@ -15525,6 +15538,19 @@
       "allticks"
      ]
     },
+    "modebardisable": {
+     "description": "Disables certain modebar buttons for this axis. *autoscale* disables the autoscale buttons, *zoominout* disables the zoom-in and zoom-out buttons.",
+     "dflt": "none",
+     "editType": "modebar",
+     "extras": [
+      "none"
+     ],
+     "flags": [
+      "autoscale",
+      "zoominout"
+     ],
+     "valType": "flaglist"
+    },
     "nticks": {
      "description": "Specifies the maximum number of ticks for the particular axis. The actual number of ticks will be chosen automatically to be less than or equal to `nticks`. Has an effect only if `tickmode` is set to *auto*.",
      "dflt": 0,