diff --git a/src/traces/scattergl/select.js b/src/traces/scattergl/select.js index 93a5972a5ba..6cd16c34a49 100644 --- a/src/traces/scattergl/select.js +++ b/src/traces/scattergl/select.js @@ -5,6 +5,8 @@ var styleTextSelection = require('./edit_style').styleTextSelection; module.exports = function select(searchInfo, selectionTester) { var cd = searchInfo.cd; + var xa = searchInfo.xaxis; + var ya = searchInfo.yaxis; var selection = []; var trace = cd[0].trace; var stash = cd[0].t; @@ -33,8 +35,8 @@ module.exports = function select(searchInfo, selectionTester) { els.push(i); selection.push({ pointNumber: i, - x: x[i], - y: y[i] + x: xa.c2d(x[i]), + y: ya.c2d(y[i]) }); } else { unels.push(i); diff --git a/test/jasmine/tests/scattergl_select_test.js b/test/jasmine/tests/scattergl_select_test.js index af2bb572000..44dfb38a34c 100644 --- a/test/jasmine/tests/scattergl_select_test.js +++ b/test/jasmine/tests/scattergl_select_test.js @@ -349,6 +349,53 @@ describe('Test gl2d lasso/select:', function() { }) .then(done, done.fail); }); + + ['x', 'y'].forEach(function(ax) { + [ + ['linear', [1, 2, 3]], + ['log', [1, 2, 3]], + ['category', ['A', 'B', 'C']], + ['date', ['1900-01-01', '2000-01-01', '2100-01-01']] + ].forEach(function(test) { + var axType = test[0]; + + it('@gl should return the same eventData as scatter on ' + axType + ' ' + ax + ' axis', function(done) { + var _mock = { + data: [{type: 'scatter', x: [1, 2, 3], y: [6, 5, 4]}], + layout: {dragmode: 'select', width: 400, height: 400, xaxis: {}, yaxis: {}} + }; + _mock.data[0][ax] = test[1]; + _mock.layout[ax + 'axis'].type = axType; + gd = createGraphDiv(); + var scatterEventData = {}; + var selectPath = [[150, 150], [250, 250]]; + + Plotly.newPlot(gd, _mock) + .then(delay(20)) + .then(function() { + expect(gd._fullLayout[ax + 'axis'].type).toEqual(test[0]); + return select(gd, selectPath); + }) + .then(delay(20)) + .then(function(eventData) { + scatterEventData = eventData; + // Make sure we selected a point + expect(eventData.points.length).toBe(1); + return Plotly.restyle(gd, 'type', 'scattergl'); + }) + .then(delay(20)) + .then(function() { + expect(gd._fullLayout[ax + 'axis'].type).toEqual(test[0]); + return select(gd, selectPath); + }) + .then(delay(20)) + .then(function(eventData) { + assertEventData(eventData, scatterEventData); + }) + .then(done, done.fail); + }); + }); + }); }); describe('Test displayed selections:', function() { diff --git a/test/jasmine/tests/scatterpolargl_test.js b/test/jasmine/tests/scatterpolargl_test.js index d591ea13740..2e440456878 100644 --- a/test/jasmine/tests/scatterpolargl_test.js +++ b/test/jasmine/tests/scatterpolargl_test.js @@ -2,10 +2,12 @@ var Plotly = require('@lib/index'); var Lib = require('@src/lib'); var ScatterPolarGl = require('@src/traces/scatterpolargl'); +var d3Select = require('../../strict-d3').select; var d3SelectAll = require('../../strict-d3').selectAll; var createGraphDiv = require('../assets/create_graph_div'); var destroyGraphDiv = require('../assets/destroy_graph_div'); +var delay = require('../assets/delay'); var mouseEvent = require('../assets/mouse_event'); var readPixel = require('../assets/read_pixel'); @@ -13,6 +15,31 @@ var customAssertions = require('../assets/custom_assertions'); var assertHoverLabelContent = customAssertions.assertHoverLabelContent; var checkTextTemplate = require('../assets/check_texttemplate'); +function drag(gd, path) { + var len = path.length; + var el = d3Select(gd).select('rect.nsewdrag').node(); + var opts = {element: el}; + + Lib.clearThrottle(); + mouseEvent('mousemove', path[0][0], path[0][1], opts); + mouseEvent('mousedown', path[0][0], path[0][1], opts); + + path.slice(1, len).forEach(function(pt) { + Lib.clearThrottle(); + mouseEvent('mousemove', pt[0], pt[1], opts); + }); + + mouseEvent('mouseup', path[len - 1][0], path[len - 1][1], opts); +} + +function select(gd, path) { + return new Promise(function(resolve, reject) { + gd.once('plotly_selected', resolve); + setTimeout(function() { reject('did not trigger *plotly_selected*');}, 200); + drag(gd, path); + }); +} + describe('Test scatterpolargl hover:', function() { var gd; @@ -132,6 +159,18 @@ describe('Test scatterpolargl interactions:', function() { .reduce(function(acc, v) { return acc + v; }, 0); } + function assertEventData(actual, expected) { + expect(actual.points.length).toBe(expected.points.length); + + expected.points.forEach(function(e, i) { + var a = actual.points[i]; + if(a) { + expect(a.r).toBe(e.r, 'r'); + expect(a.theta).toBe(e.theta, 'theta'); + } + }); + } + it('@gl should be able to toggle from svg to gl', function(done) { gd = createGraphDiv(); @@ -258,6 +297,50 @@ describe('Test scatterpolargl interactions:', function() { }) .then(done, done.fail); }); + + ['r', 'theta'].forEach(function(ax) { + [ + ['linear', [0, 180]], + ['category', ['A', 'B']], + ].forEach(function(test) { + var axType = test[0]; + var axNames = {'r': 'radialaxis', 'theta': 'angularaxis'}; + it('@gl should return the same eventData as scatter on ' + axType + ' ' + ax + ' axis', function(done) { + var _mock = { + data: [{type: 'scatterpolar', r: [5, 10], theta: [0, 180]}], + layout: {dragmode: 'select', width: 400, height: 400} + }; + _mock.data[0][ax] = test[1]; + gd = createGraphDiv(); + var scatterpolarEventData = {}; + var selectPath = [[185, 150], [400, 250]]; + + Plotly.newPlot(gd, _mock) + .then(delay(20)) + .then(function() { + expect(gd._fullLayout.polar[axNames[ax]].type).toEqual(test[0]); + return select(gd, selectPath); + }) + .then(delay(20)) + .then(function(eventData) { + scatterpolarEventData = eventData; + // Make sure we selected a point + expect(eventData.points.length).toBe(1); + return Plotly.restyle(gd, 'type', 'scatterpolargl'); + }) + .then(delay(20)) + .then(function() { + expect(gd._fullLayout.polar[axNames[ax]].type).toEqual(test[0]); + return select(gd, selectPath); + }) + .then(delay(20)) + .then(function(eventData) { + assertEventData(eventData, scatterpolarEventData); + }) + .then(done, done.fail); + }); + }); + }); }); describe('Test scatterpolargl autorange:', function() {