Merge pull request #7164 from plotly/alex/fake-selections

fix to allow you to add fake selections

Author: archmoj

draftlogs/7164_fix.md

@@ -0,0 +1 @@
+- Allow null or broken selection objects without throwing an error [[#7164](https://github.com/plotly/plotly.js/pull/7164)]

src/components/selections/select.js

@@ -182,6 +182,7 @@ function prepSelect(evt, startX, startY, dragOptions, mode) {
             for(var q = 0; q < selections.length; q++) {
                 var s = fullLayout.selections[q];
                 if(
+                    !s ||
                     s.xref !== xRef ||
                     s.yref !== yRef
                 ) {

test/jasmine/tests/select_test.js

@@ -75,7 +75,7 @@ function assertSelectionNodes(cornerCnt, outlineCnt, _msg) {
 }
 
 var selectingCnt, selectingData, selectedCnt, selectedData, deselectCnt, doubleClickData;
-var selectedPromise, deselectPromise, clickedPromise;
+var selectedPromise, deselectPromise, clickedPromise, relayoutPromise;
 
 function resetEvents(gd) {
     selectingCnt = 0;
@@ -125,6 +125,12 @@ function resetEvents(gd) {
             resolve();
         });
     });
+
+    relayoutPromise = new Promise(function(resolve) {
+        gd.on('plotly_relayout', function() {
+            resolve();
+        });
+    });
 }
 
 function assertEventCounts(selecting, selected, deselect, msg) {
@@ -1035,6 +1041,100 @@ describe('Test select box and lasso in general:', function() {
         });
     });
 
+    describe('select / deselect with fake selections', function() {
+        var gd;
+        beforeEach(function(done) {
+            gd = createGraphDiv();
+
+            var mockCopy = Lib.extendDeep({}, mock);
+            mockCopy.layout.dragmode = 'select';
+            mockCopy.layout.hovermode = 'closest';
+            mockCopy.layout.selections = [null];
+            addInvisible(mockCopy);
+
+            _newPlot(gd, mockCopy.data, mockCopy.layout)
+                .then(done);
+        });
+
+        it('should trigger selecting/selected/deselect events', function(done) {
+            resetEvents(gd);
+
+            drag(selectPath);
+
+            selectedPromise.then(function() {
+                expect(selectedCnt).toBe(1, 'with the correct selected count');
+                assertEventData(selectedData.points, [{
+                    curveNumber: 0,
+                    pointNumber: 0,
+                    pointIndex: 0,
+                    x: 0.002,
+                    y: 16.25
+                }, {
+                    curveNumber: 0,
+                    pointNumber: 1,
+                    pointIndex: 1,
+                    x: 0.004,
+                    y: 12.5
+                }], 'with the correct selected points (2)');
+                assertRange(selectedData.range, {
+                    x: [0.002000, 0.0046236],
+                    y: [0.10209191961595454, 24.512223978291406]
+                }, 'with the correct selected range');
+
+                return doubleClick(250, 200);
+            })
+            .then(deselectPromise)
+            .then(function() {
+                expect(doubleClickData).toBe(null, 'with the correct deselect data');
+            })
+            .then(done, done.fail);
+        });
+
+        it('should handle add/sub selection', function(done) {
+            resetEvents(gd);
+            expect(gd.layout.selections.length).toBe(1);
+
+            drag([[193, 193], [213, 193]], {shiftKey: true})
+
+            selectedPromise.then(function() {
+                expect(selectedCnt).toBe(1, 'with the correct selected count');
+                assertEventData(selectedData.points, [{
+                    curveNumber: 0,
+                    pointNumber: 4,
+                    pointIndex: 4,
+                    x: 0.013,
+                    y: 6.875
+                }], 'with the correct selected points (1)');
+            })
+            .then(function() {
+                // this is not working here, but it works in the test dashboard, not sure why
+                // but at least this test shows us that no errors are thrown.
+                // expect(gd.layout.selections.length).toBe(2, 'fake selection is still there');
+
+                resetEvents(gd);
+
+                return doubleClick(250, 200);
+            })
+            .then(relayoutPromise)
+            .then(function() {
+                expect(gd.layout.selections.length).toBe(0, 'fake selection is cleared');
+                expect(doubleClickData).toBe(null, 'with the correct deselect data');
+            })
+            .then(done, done.fail);
+        });
+
+        it('should clear fake selections on doubleclick', function(done) {
+            resetEvents(gd);
+
+            doubleClick(250, 200);
+
+            relayoutPromise.then(function() {
+                expect(gd.layout.selections.length).toBe(0, 'fake selections are cleared');
+            })
+            .then(done, done.fail);
+        });
+    });
+
     describe('lasso events', function() {
         var mockCopy = Lib.extendDeep({}, mock);
         mockCopy.layout.dragmode = 'lasso';