adapt dragbox logic for axis breaks

Author: etpinard

src/plots/cartesian/dragbox.js

@@ -986,10 +986,20 @@ function zoomAxRanges(axList, r0Fraction, r1Fraction, updates, linkedAxes) {
         var axi = axList[i];
         if(axi.fixedrange) continue;
 
-        var axRangeLinear0 = axi._rl[0];
-        var axRangeLinearSpan = axi._rl[1] - axRangeLinear0;
-        updates[axi._name + '.range[0]'] = axi.l2r(axRangeLinear0 + axRangeLinearSpan * r0Fraction);
-        updates[axi._name + '.range[1]'] = axi.l2r(axRangeLinear0 + axRangeLinearSpan * r1Fraction);
+        if(axi.breaks) {
+            if(axi._id.charAt(0) === 'y') {
+                updates[axi._name + '.range[0]'] = axi.l2r(axi.p2l((1 - r0Fraction) * axi._length));
+                updates[axi._name + '.range[1]'] = axi.l2r(axi.p2l((1 - r1Fraction) * axi._length));
+            } else {
+                updates[axi._name + '.range[0]'] = axi.l2r(axi.p2l(r0Fraction * axi._length));
+                updates[axi._name + '.range[1]'] = axi.l2r(axi.p2l(r1Fraction * axi._length));
+            }
+        } else {
+            var axRangeLinear0 = axi._rl[0];
+            var axRangeLinearSpan = axi._rl[1] - axRangeLinear0;
+            updates[axi._name + '.range[0]'] = axi.l2r(axRangeLinear0 + axRangeLinearSpan * r0Fraction);
+            updates[axi._name + '.range[1]'] = axi.l2r(axRangeLinear0 + axRangeLinearSpan * r1Fraction);
+        }
     }
 
     // zoom linked axes about their centers
@@ -1003,10 +1013,17 @@ function dragAxList(axList, pix) {
     for(var i = 0; i < axList.length; i++) {
         var axi = axList[i];
         if(!axi.fixedrange) {
-            axi.range = [
-                axi.l2r(axi._rl[0] - pix / axi._m),
-                axi.l2r(axi._rl[1] - pix / axi._m)
-            ];
+            if(axi.breaks) {
+                axi.range = [
+                    axi.l2r(axi._rl[0] - (axi.p2l(pix) - axi.p2l(0))),
+                    axi.l2r(axi._rl[1] - (axi.p2l(axi._length + pix) - axi.p2l(axi._length)))
+                ];
+            } else {
+                axi.range = [
+                    axi.l2r(axi._rl[0] - pix / axi._m),
+                    axi.l2r(axi._rl[1] - pix / axi._m)
+                ];
+            }
         }
     }
 }

test/jasmine/tests/cartesian_interact_test.js

@@ -2029,6 +2029,70 @@ describe('axis zoom/pan and main plot zoom', function() {
         .catch(failTest)
         .then(done);
     });
+
+    describe('with axis breaks', function() {
+        it('should compute correct range updates - x-axis case', function(done) {
+            function _assert(msg, xrng) {
+                expect(gd.layout.xaxis.range).toBeCloseToArray(xrng, 2, 'xrng - ' + msg);
+            }
+
+            Plotly.plot(gd, [{
+                mode: 'lines',
+                x: [0, 10, 50, 90, 100, 150, 190, 200]
+            }], {
+                xaxis: {
+                    breaks: [
+                        {bounds: [11, 89]},
+                        {bounds: [101, 189]}
+                    ]
+                },
+                dragmode: 'zoom'
+            })
+            .then(function() { _assert('base', [0, 200]); })
+            .then(doDrag('xy', 'nsew', 50, 0))
+            // x range would be ~ [100, 118] w/o breaks
+            .then(function() { _assert('after x-only zoombox', [95, 98.148]); })
+            .then(doDblClick('xy', 'nsew'))
+            .then(function() { _assert('back to base', [0, 200]); })
+            .then(function() { return Plotly.relayout(gd, 'dragmode', 'pan'); })
+            .then(doDrag('xy', 'nsew', 50, 0))
+            // x range would be ~ [-18, 181] w/o breaks
+            .then(function() { _assert('after x-only pan', [-3.148, 196.851]); })
+            .catch(failTest)
+            .then(done);
+        });
+
+        it('should compute correct range updates - y-axis case', function(done) {
+            function _assert(msg, yrng) {
+                expect(gd.layout.yaxis.range).toBeCloseToArray(yrng, 2, 'yrng - ' + msg);
+            }
+
+            Plotly.plot(gd, [{
+                mode: 'lines',
+                y: [0, 10, 50, 90, 100, 150, 190, 200]
+            }], {
+                yaxis: {
+                    breaks: [
+                        {bounds: [11, 89]},
+                        {bounds: [101, 189]}
+                    ]
+                },
+                dragmode: 'zoom'
+            })
+            .then(function() { _assert('base', [-1.888, 201.888]); })
+            .then(doDrag('xy', 'nsew', 0, 50))
+            // y range would be ~ [62, 100] w/o breaks
+            .then(function() { _assert('after y-only zoombox', [10.004, 95.00]); })
+            .then(doDblClick('xy', 'nsew'))
+            .then(function() { _assert('back to base', [-1.888, 201.888]); })
+            .then(function() { return Plotly.relayout(gd, 'dragmode', 'pan'); })
+            .then(doDrag('xy', 'nsew', 0, 50))
+            // y range would be ~ [35, 239] w/o breaks
+            .then(function() { _assert('after y-only pan', [5.106, 208.884]); })
+            .catch(failTest)
+            .then(done);
+        });
+    });
 });
 
 describe('Event data:', function() {