From cbdc017f465fe9f90bb294f71b6b6c1a60479071 Mon Sep 17 00:00:00 2001 From: Mojtaba Samimi Date: Fri, 15 Jul 2022 09:23:20 -0400 Subject: [PATCH 1/3] emit selection events in drawmode when selection change --- src/components/selections/select.js | 20 +++++++++++++------- 1 file changed, 13 insertions(+), 7 deletions(-) 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); } From 09f43a9737696e709a7a8c98092b06e01127af9c Mon Sep 17 00:00:00 2001 From: Mojtaba Samimi Date: Fri, 15 Jul 2022 10:31:10 -0400 Subject: [PATCH 2/3] draft log for PR 6262 --- draftlogs/6262_fix.md | 1 + 1 file changed, 1 insertion(+) create mode 100644 draftlogs/6262_fix.md 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)] From 16461df60c69124ff9e3031ea79a3d234d91127f Mon Sep 17 00:00:00 2001 From: Mojtaba Samimi Date: Fri, 15 Jul 2022 11:23:41 -0400 Subject: [PATCH 3/3] test eventdata for selections edits on various dragmodes --- test/jasmine/tests/draw_newselection_test.js | 77 ++++++++++++++++++++ 1 file changed, 77 insertions(+) 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); + }); + }); +});