From 97b8def346ad4296428c5f34ac2b548999b51809 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89tienne=20T=C3=A9treault-Pinard?= Date: Tue, 10 Jul 2018 13:48:27 -0400 Subject: [PATCH] fix #2731 - use updated fullLayout._size in scene.clear - such that after relayout edits that do not trigger a recalc, selection can properly clear the canvas. --- src/traces/scattergl/index.js | 3 +- test/jasmine/tests/gl2d_click_test.js | 60 +++++++++++++++++++++++++++ 2 files changed, 61 insertions(+), 2 deletions(-) diff --git a/src/traces/scattergl/index.js b/src/traces/scattergl/index.js index f5d7611da36..ab398fa97a9 100644 --- a/src/traces/scattergl/index.js +++ b/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; diff --git a/test/jasmine/tests/gl2d_click_test.js b/test/jasmine/tests/gl2d_click_test.js index 59e5d55f4bc..f5fb50e9018 100644 --- a/test/jasmine/tests/gl2d_click_test.js +++ b/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 + expect(readContext()).toBe(0, 'update+select context'); + expect(readFocus()).toBeGreaterThan(1e4, 'update+select focus'); + }) + .catch(failTest) + .then(done); + }); });