diff --git a/draftlogs/6262_fix.md b/draftlogs/6262_fix.md new file mode 100644 index 00000000000..082e522ecf1 --- /dev/null +++ b/draftlogs/6262_fix.md @@ -0,0 +1 @@ + - Emit selection event in shape drawing `dragmode`s when an existing selection modified [[#6262](https://github.com/plotly/plotly.js/pull/6262)] diff --git a/src/components/selections/select.js b/src/components/selections/select.js index 1ec463183b4..e6d2e140deb 100644 --- a/src/components/selections/select.js +++ b/src/components/selections/select.js @@ -451,7 +451,9 @@ function prepSelect(evt, startX, startY, dragOptions, mode) { dragOptions.doneFnCompleted(selection); } - emitSelected(gd, eventData); + if(isSelectMode) { + emitSelected(gd, eventData); + } }).catch(Lib.error); }; } @@ -673,15 +675,23 @@ function coerceSelectionsCache(evt, gd, dragOptions) { } } +function hasActiveShape(gd) { + return gd._fullLayout._activeShapeIndex >= 0; +} + +function hasActiveSelection(gd) { + return gd._fullLayout._activeSelectionIndex >= 0; +} + function clearSelectionsCache(dragOptions, immediateSelect) { var dragmode = dragOptions.dragmode; var plotinfo = dragOptions.plotinfo; var gd = dragOptions.gd; - if(gd._fullLayout._activeShapeIndex >= 0) { + if(hasActiveShape(gd)) { gd._fullLayout._deactivateShape(gd); } - if(gd._fullLayout._activeSelectionIndex >= 0) { + if(hasActiveSelection(gd)) { gd._fullLayout._deactivateSelection(gd); } @@ -1503,13 +1513,10 @@ function getFillRangeItems(dragOptions) { } function emitSelecting(gd, eventData) { - if(drawMode(gd._fullLayout.dragmode)) return; gd.emit('plotly_selecting', eventData); } function emitSelected(gd, eventData) { - if(drawMode(gd._fullLayout.dragmode)) return; - if(eventData) { eventData.selections = (gd.layout || {}).selections || []; } @@ -1518,7 +1525,6 @@ function emitSelected(gd, eventData) { } function emitDeselect(gd) { - if(drawMode(gd._fullLayout.dragmode)) return; gd.emit('plotly_deselect', null); } diff --git a/test/jasmine/tests/draw_newselection_test.js b/test/jasmine/tests/draw_newselection_test.js index c1af5200788..1ab1625cfbe 100644 --- a/test/jasmine/tests/draw_newselection_test.js +++ b/test/jasmine/tests/draw_newselection_test.js @@ -651,3 +651,80 @@ describe('Activate and edit selections', function() { .then(done, done.fail); }); }); + + +describe('emit plotly_selected event on editing selections in various dragmodes', function() { + var gd; + + beforeEach(function() { + gd = createGraphDiv(); + }); + + afterEach(destroyGraphDiv); + + ['zoom', 'pan', 'drawrect', 'drawclosedpath', 'drawcircle'].forEach(function(dragmode) { + it('get eventData for editing selections using ' + dragmode + ' dragmode', function(done) { + var fig = { + data: [ + { + x: [0, 1, 2], + y: [1, 2, 3] + } + ], + layout: { + width: 800, + height: 600, + margin: { + t: 100, + b: 50, + l: 100, + r: 50 + }, + selections: [{ x0: 0.5, x1: 1.5, y0: 1.5, y1: 2.5}], + dragmode: dragmode + } + }; + + var range; + var points; + var lassoPoints; + var selections; + + Plotly.newPlot(gd, fig) + + .then(function() { + gd.on('plotly_selected', function(d) { + lassoPoints = d.lassoPoints; + range = d.range; + points = d.points; + selections = d.selections; + }); + }) + + .then(function() { click(400, 300); }) // activate selection + .then(function() { drag([[400, 300], [600, 100]]); }) // move selection + .then(function() { + expect(range).not.toBeUndefined(); + expect(range.x).toBeCloseToArray([1.1926580086580088, 2.1926580086580088], 3); + expect(range.y).toBeCloseToArray([2.5062641509433967, 3.5062641509433967], 3); + + expect(lassoPoints).toBeUndefined(); + + expect(points).not.toBeUndefined(); + expect(points.length).toEqual(1); + expect(points[0].fullData).not.toBeUndefined(); + expect(points[0].data).not.toBeUndefined(); + expect(points[0].data.selectedpoints).toEqual([2]); + + expect(selections).not.toBeUndefined(); + expect(selections.length).toEqual(1); + expect(selections[0]).not.toBeUndefined(); + expect(selections[0].x0).toBeCloseTo(1.1926580086580088, 3); + expect(selections[0].x1).toBeCloseTo(2.1926580086580088, 3); + expect(selections[0].y0).toBeCloseTo(2.5062641509433967, 3); + expect(selections[0].y1).toBeCloseTo(3.5062641509433967, 3); + }) + .then(done, done.fail); + }); + }); +});