Skip to content

Commit 36a571f

Browse files
monferamonfera
committed
#30a panning test on WebGL canvas; adding the DIV update for scene2d
1 parent 2626b16 commit 36a571f

File tree

3 files changed

+96
-16
lines changed

3 files changed

+96
-16
lines changed

‎src/plots/gl2d/scene2d.js

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -270,12 +270,22 @@ proto.updateFx = function(options) {
270270
};
271271

272272
var relayoutCallback = function(scene) {
273-
var update = {};
273+
274+
var update = {},
275+
xrange = scene.xaxis.range,
276+
yrange = scene.yaxis.range;
277+
278+
// Update the layout on the DIV
279+
scene.graphDiv.layout.xaxis.range = xrange.slice(0);
280+
scene.graphDiv.layout.yaxis.range = yrange.slice(0);
281+
282+
// Make a meaningful value to be passed on to the possible 'plotly_relayout' subscriber(s)
274283
update[scene.id] = { // scene.camera has no many useful projection or scale information
275284
lastInputTime: scene.camera.lastInputTime, // helps determine which one is the latest input (if async)
276-
xrange: scene.xaxis.range.slice(0),
277-
yrange: scene.yaxis.range.slice(0)
285+
xrange: xrange.slice(0),
286+
yrange: yrange.slice(0)
278287
};
288+
279289
scene.graphDiv.emit('plotly_relayout', update);
280290
};
281291

‎test/jasmine/tests/gl_plot_interact_test.js

Lines changed: 76 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -213,13 +213,14 @@ describe('Test gl plot interactions', function() {
213213

214214
describe('gl2d plots', function() {
215215
var mock = require('@mocks/gl2d_10.json'),
216-
relayoutCallback;
216+
modeBar, relayoutCallback;
217217

218218
beforeEach(function(done) {
219219
gd = createGraphDiv();
220220

221221
Plotly.plot(gd, mock.data, mock.layout).then(function() {
222222

223+
modeBar = gd._fullLayout._modeBar;
223224
relayoutCallback = jasmine.createSpy('relayoutCallback');
224225

225226
gd.on('plotly_relayout', relayoutCallback);
@@ -235,18 +236,85 @@ describe('Test gl plot interactions', function() {
235236

236237
it('should respond to drag interactions', function(done) {
237238

238-
var sceneTarget = gd.querySelector('.plot-container .gl-container canvas');
239+
jasmine.addMatchers(customMatchers);
240+
241+
var precision = 5;
242+
243+
var buttonPan = selectButton(modeBar, 'pan2d');
244+
245+
var originalX = [-0.022068095838587643, 5.022068095838588];
246+
var originalY = [-0.21331533513634046, 5.851205650049042];
247+
248+
var newX = [-0.23224043715846995,4.811895754518705];
249+
var newY = [-1.2962655110623016,4.768255474123081];
239250

240-
// Drag scene
241-
sceneTarget.dispatchEvent(new MouseEvent('mousedown', {x: 0, y: 0}));
242-
sceneTarget.dispatchEvent(new MouseEvent('mousemove', { x: 100, y: 100}));
243-
sceneTarget.dispatchEvent(new MouseEvent('mouseup', { x: 100, y: 100}));
251+
expect(gd.layout.xaxis.range).toBeCloseToArray(originalX, precision);
252+
expect(gd.layout.yaxis.range).toBeCloseToArray(originalY, precision);
253+
254+
// Switch to pan mode
255+
expect(buttonPan.isActive()).toBe(false); // initially, zoom is active
256+
buttonPan.click();
257+
expect(buttonPan.isActive()).toBe(true); // switched on dragmode
258+
259+
// Switching mode must not change visible range
260+
expect(gd.layout.xaxis.range).toBeCloseToArray(originalX, precision);
261+
expect(gd.layout.yaxis.range).toBeCloseToArray(originalY, precision);
244262

245263
setTimeout(function() {
246264

247-
expect(relayoutCallback).toHaveBeenCalledTimes(1);
265+
mouseEvent('mousemove', 200, 200);
248266

249-
done();
267+
relayoutCallback.calls.reset();
268+
269+
// Drag scene along the X axis
270+
271+
mouseEvent('mousemove', 220, 200, {buttons: 1});
272+
273+
expect(gd.layout.xaxis.range).toBeCloseToArray(newX, precision);
274+
expect(gd.layout.yaxis.range).toBeCloseToArray(originalY, precision);
275+
276+
// Drag scene back along the X axis
277+
278+
mouseEvent('mousemove', 200, 200, {buttons: 1});
279+
280+
expect(gd.layout.xaxis.range).toBeCloseToArray(originalX, precision);
281+
expect(gd.layout.yaxis.range).toBeCloseToArray(originalY, precision);
282+
283+
// Drag scene along the Y axis
284+
285+
mouseEvent('mousemove', 200, 150, {buttons: 1});
286+
287+
expect(gd.layout.xaxis.range).toBeCloseToArray(originalX, precision);
288+
expect(gd.layout.yaxis.range).toBeCloseToArray(newY, precision);
289+
290+
// Drag scene back along the Y axis
291+
292+
mouseEvent('mousemove', 200, 200, {buttons: 1});
293+
294+
expect(gd.layout.xaxis.range).toBeCloseToArray(originalX, precision);
295+
expect(gd.layout.yaxis.range).toBeCloseToArray(originalY, precision);
296+
297+
// Drag scene along both the X and Y axis
298+
299+
mouseEvent('mousemove', 220, 150, {buttons: 1});
300+
301+
expect(gd.layout.xaxis.range).toBeCloseToArray(newX, precision);
302+
expect(gd.layout.yaxis.range).toBeCloseToArray(newY, precision);
303+
304+
// Drag scene back along the X and Y axis
305+
306+
mouseEvent('mousemove', 200, 200, {buttons: 1});
307+
308+
expect(gd.layout.xaxis.range).toBeCloseToArray(originalX, precision);
309+
expect(gd.layout.yaxis.range).toBeCloseToArray(originalY, precision);
310+
311+
setTimeout(function() {
312+
313+
expect(relayoutCallback).toHaveBeenCalledTimes(6); // X and back; Y and back; XY and back
314+
315+
done();
316+
317+
}, MODEBAR_DELAY);
250318

251319
}, MODEBAR_DELAY);
252320
});
@@ -391,7 +459,6 @@ describe('Test gl plot interactions', function() {
391459
sceneTarget = gd.querySelector('.svg-container .gl-container #scene canvas'),
392460
sceneTarget2 = gd.querySelector('.svg-container .gl-container #scene2 canvas');
393461

394-
395462
expect(sceneLayout.camera.eye)
396463
.toEqual({x: 0.1, y: 0.1, z: 1});
397464
expect(sceneLayout2.camera.eye)

‎test/jasmine/tests/plot_interact_test.js

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -180,6 +180,9 @@ describe('Test plot structure', function() {
180180
var originalX = [-0.6225,5.5];
181181
var originalY = [-1.6340975059013805,7.166241526218911];
182182

183+
var newX = [-2.0255729166666665,4.096927083333333];
184+
var newY = [-0.3769062155984817,8.42343281652181];
185+
183186
expect(gd.layout.xaxis.range).toBeCloseToArray(originalX, precision);
184187
expect(gd.layout.yaxis.range).toBeCloseToArray(originalY, precision);
185188

@@ -203,7 +206,7 @@ describe('Test plot structure', function() {
203206
mouseEvent('mousemove', 220, 150);
204207
mouseEvent('mouseup', 220, 150);
205208

206-
expect(gd.layout.xaxis.range).toBeCloseToArray([-2.0255729166666665,4.096927083333333], precision);
209+
expect(gd.layout.xaxis.range).toBeCloseToArray(newX, precision);
207210
expect(gd.layout.yaxis.range).toBeCloseToArray(originalY, precision);
208211

209212
// Drag scene back along the X axis (not from the same starting point but same X delta)
@@ -222,7 +225,7 @@ describe('Test plot structure', function() {
222225
mouseEvent('mouseup', 110, 190);
223226

224227
expect(gd.layout.xaxis.range).toBeCloseToArray(originalX, precision);
225-
expect(gd.layout.yaxis.range).toBeCloseToArray([-0.3769062155984817,8.42343281652181], precision);
228+
expect(gd.layout.yaxis.range).toBeCloseToArray(newY, precision);
226229

227230
// Drag scene back along the Y axis (not from the same starting point but same Y delta)
228231

@@ -239,8 +242,8 @@ describe('Test plot structure', function() {
239242
mouseEvent('mousemove', 220, 190);
240243
mouseEvent('mouseup', 220, 190);
241244

242-
expect(gd.layout.xaxis.range).toBeCloseToArray([-2.0255729166666665,4.096927083333333], precision);
243-
expect(gd.layout.yaxis.range).toBeCloseToArray([-0.3769062155984817,8.42343281652181], precision);
245+
expect(gd.layout.xaxis.range).toBeCloseToArray(newX, precision);
246+
expect(gd.layout.yaxis.range).toBeCloseToArray(newY, precision);
244247

245248
// Drag scene back along the X and Y axis (not from the same starting point but same delta vector)
246249

0 commit comments

Comments
 (0)