fixup and 🔒 cliponaxis: false pan interactions

etpinard · etpinard · commit b9513a223964 · 2018-02-16T18:04:05.000-05:00
diff --git a/src/components/drawing/index.js b/src/components/drawing/index.js
@@ -103,7 +103,7 @@ drawing.hideOutsideRangePoint = function(d, sel, xa, ya, xcalendar, ycalendar) {
 drawing.hideOutsideRangePoints = function(traceGroups, subplot, selector) {
     if(!subplot._hasClipOnAxisFalse) return;
 
-    selector = selector || '.point,textpoint';
+    selector = selector || '.point,.textpoint';
 
     var xa = subplot.xaxis;
     var ya = subplot.yaxis;
diff --git a/test/jasmine/tests/cartesian_interact_test.js b/test/jasmine/tests/cartesian_interact_test.js
@@ -14,6 +14,9 @@ var doubleClick = require('../assets/double_click');
 var getNodeCoords = require('../assets/get_node_coords');
 var delay = require('../assets/delay');
 
+var customAssertions = require('../assets/custom_assertions');
+var assertNodeDisplay = customAssertions.assertNodeDisplay;
+
 var MODEBAR_DELAY = 500;
 
 describe('zoom box element', function() {
@@ -62,7 +65,6 @@ describe('zoom box element', function() {
 
 
 describe('main plot pan', function() {
-
     var gd, modeBar, relayoutCallback;
 
     beforeEach(function() {
@@ -183,6 +185,93 @@ describe('main plot pan', function() {
         .catch(failTest)
         .then(done);
     });
+
+    it('should show/hide `cliponaxis: false` pts according to range', function(done) {
+        function _assert(markerDisplay, textDisplay, barTextDisplay) {
+            var gd3 = d3.select(gd);
+
+            assertNodeDisplay(
+                gd3.select('.scatterlayer').selectAll('.point'),
+                markerDisplay,
+                'marker pts'
+            );
+            assertNodeDisplay(
+                gd3.select('.scatterlayer').selectAll('.textpoint'),
+                textDisplay,
+                'text pts'
+            );
+            assertNodeDisplay(
+                gd3.select('.barlayer').selectAll('.bartext'),
+                barTextDisplay,
+                'bar text'
+            );
+        }
+
+        function _run(p0, p1, markerDisplay, textDisplay, barTextDisplay) {
+            mouseEvent('mousedown', p0[0], p0[1]);
+            mouseEvent('mousemove', p1[0], p1[1]);
+
+            _assert(markerDisplay, textDisplay, barTextDisplay);
+
+            mouseEvent('mouseup', p1[0], p1[1]);
+        }
+
+        Plotly.newPlot(gd, [{
+            mode: 'markers+text',
+            x: [1, 2, 3],
+            y: [1, 2, 3],
+            text: ['a', 'b', 'c'],
+            cliponaxis: false
+        }, {
+            type: 'bar',
+            x: [1, 2, 3],
+            y: [1, 2, 3],
+            text: ['a', 'b', 'c'],
+            textposition: 'outside',
+            cliponaxis: false
+        }], {
+            xaxis: {range: [0, 4]},
+            yaxis: {range: [0, 4]},
+            width: 500,
+            height: 500,
+            dragmode: 'pan'
+        })
+        .then(function() {
+            _assert(
+                [null, null, null],
+                [null, null, null],
+                [null, null, null]
+            );
+        })
+        .then(function() {
+            _run(
+                [250, 250], [250, 150],
+                [null, null, 'none'],
+                [null, null, 'none'],
+                [null, null, 'none']
+            );
+            expect(gd._fullLayout.yaxis.range[1]).toBeLessThan(3);
+        })
+        .then(function() {
+            _run(
+                [250, 250], [150, 250],
+                ['none', null, 'none'],
+                ['none', null, 'none'],
+                ['none', null, 'none']
+            );
+            expect(gd._fullLayout.xaxis.range[0]).toBeGreaterThan(1);
+        })
+        .then(function() {
+            _run(
+                [250, 250], [350, 350],
+                [null, null, null],
+                [null, null, null],
+                [null, null, null]
+            );
+        })
+        .catch(failTest)
+        .then(done);
+    });
 });
 
 describe('axis zoom/pan and main plot zoom', function() {
