Merge pull request #2801 from plotly/scattergl-select-after-resize-fix

Use updated fullLayout._size in scene.clear

Author: etpinard

src/traces/scattergl/index.js

@@ -188,7 +188,6 @@ function sceneOptions(gd, subplot, trace, positions, x, y) {
 // make sure scene exists on subplot, return it
 function sceneUpdate(gd, subplot) {
     var scene = subplot._scene;
-    var fullLayout = gd._fullLayout;
 
     var resetOpts = {
         // number of traces in subplot, since scene:subplot → 1:1
@@ -290,8 +289,8 @@ function sceneUpdate(gd, subplot) {
             scene.dirty = false;
         };
 
-        // make sure canvas is clear
         scene.clear = function clear() {
+            var fullLayout = gd._fullLayout;
             var vpSize = fullLayout._size;
             var width = fullLayout.width;
             var height = fullLayout.height;

test/jasmine/tests/gl2d_click_test.js

@@ -17,6 +17,7 @@ var click = require('../assets/timed_click');
 var hover = require('../assets/hover');
 var delay = require('../assets/delay');
 var mouseEvent = require('../assets/mouse_event');
+var readPixel = require('../assets/read_pixel');
 
 // contourgl is not part of the dist plotly.js bundle initially
 Plotly.register([
@@ -901,4 +902,63 @@ describe('@noCI @gl Test gl2d lasso/select:', function() {
         .catch(failTest)
         .then(done);
     });
+
+    it('should work after a width/height relayout', function(done) {
+        gd = createGraphDiv();
+
+        var w = 500;
+        var h = 500;
+        var w2 = 800;
+        var h2 = 600;
+        var pad = 20;
+
+        function _read(query) {
+            var canvas = gd.querySelector(query);
+            return readPixel(canvas, 0, 0, gd.layout.width, gd.layout.height)
+                .reduce(function(acc, v) { return acc + v; }, 0);
+        }
+
+        function readContext() { return _read('.gl-canvas-context'); }
+
+        function readFocus() { return _read('.gl-canvas-focus'); }
+
+        Plotly.plot(gd, [{
+            type: 'scattergl',
+            mode: 'markers',
+            y: [2, 1, 2]
+        }], {
+            dragmode: 'select',
+            margin: {t: 0, b: 0, l: 0, r: 0},
+            width: w, height: h
+        })
+        .then(delay(100))
+        .then(function() {
+            expect(readContext()).toBeGreaterThan(1e4, 'base context');
+            expect(readFocus()).toBe(0, 'base focus');
+        })
+        .then(function() { return select([[pad, pad], [w - pad, h - pad]]); })
+        .then(function() {
+            expect(readContext()).toBe(0, 'select context');
+            expect(readFocus()).toBeGreaterThan(1e4, 'select focus');
+        })
+        .then(function() {
+            return Plotly.update(gd,
+                {selectedpoints: null},
+                {width: w2, height: h2}
+            );
+        })
+        .then(function() {
+            expect(readContext()).toBeGreaterThan(1e4, 'update context');
+            expect(readFocus()).toBe(0, 'update focus');
+        })
+        .then(function() { return select([[pad, pad], [w2 - pad, h2 - pad]]); })
+        .then(function() {
+            // make sure full w2/h2 context canvas is cleared!
+            // from https://github.com/plotly/plotly.js/issues/2731<Paste>
+            expect(readContext()).toBe(0, 'update+select context');
+            expect(readFocus()).toBeGreaterThan(1e4, 'update+select focus');
+        })
+        .catch(failTest)
+        .then(done);
+    });
 });