Allow to retain current selection with pressing Shift key [1852]

Author: rmoestl

src/plots/cartesian/dragbox.js

@@ -218,7 +218,7 @@ function makeDragBox(gd, plotinfo, x, y, w, h, ns, ew) {
 
         if(isMainDrag) {
             var clickHandler = obtainClickHandler();
-            clickHandler(gd, numClicks);
+            clickHandler(gd, numClicks, evt);
         }
         // Allow manual editing of range bounds through an input field
         // TODO consider extracting that to a method for clarity

src/plots/cartesian/select.js

@@ -323,7 +323,7 @@ function prepSelect(e, startX, startY, dragOptions, mode) {
             }
             else {
                 // TODO What to do with the code below because we now have behavior for a single click
-                selectOnClick(gd, numClicks);
+                selectOnClick(gd, numClicks, evt);
 
                 // TODO: remove in v2 - this was probably never intended to work as it does,
                 // but in case anyone depends on it we don't want to break it now.
@@ -358,7 +358,7 @@ function prepSelect(e, startX, startY, dragOptions, mode) {
 // ----------------
 // TODO handle clearing selection when no point is clicked (based on hoverData)
 // TODO do we have to consider multiple traces?
-function selectOnClick(gd, numClicks) {
+function selectOnClick(gd, numClicks, evt) {
     var calcData = gd.calcdata[0];
 
     var hoverData = gd._hoverdata;
@@ -371,10 +371,11 @@ function selectOnClick(gd, numClicks) {
         var trace = calcData[0].trace;
         var hoverDatum = hoverData[0];
 
+        var retainCurrentSelection = evt.shiftKey;
         var pointAlreadySelected = isPointAlreadySelected(trace, hoverDatum.pointNumber);
         var traceSelection = pointAlreadySelected ?
-          trace._module.deselectPoint(calcData, hoverDatum) :
-          trace._module.selectPoint(calcData, hoverDatum);
+          trace._module.deselectPoint(calcData, hoverDatum, retainCurrentSelection) :
+          trace._module.selectPoint(calcData, hoverDatum, retainCurrentSelection);
         var searchInfo =
           _createSearchInfo(trace._module, calcData, hoverDatum.xaxis, hoverDatum.yaxis);
         var selection = fillSelectionItem(traceSelection, searchInfo);

src/traces/scatter/select.js

@@ -46,31 +46,37 @@ function selectPoints(searchInfo, polygon) {
     return selection;
 }
 
-function selectPoint(calcData, hoverDataItem) {
-    return _togglePointSelectedState(calcData, hoverDataItem, true);
+function selectPoint(calcData, hoverDataItem, retain) {
+    return _togglePointSelectedState(calcData, hoverDataItem, true, retain);
 }
 
-function deselectPoint(calcData, hoverDataItem) {
-    return _togglePointSelectedState(calcData, hoverDataItem, false);
+function deselectPoint(calcData, hoverDataItem, retain) {
+    return _togglePointSelectedState(calcData, hoverDataItem, false, retain);
 }
 
-function _togglePointSelectedState(calcData, hoverDataItem, selected) {
+function _togglePointSelectedState(calcData, hoverDataItem, selected, retain) {
     var selection = [];
     var selectedPointNumber = hoverDataItem.pointNumber;
     var cdItem = calcData[selectedPointNumber];
 
-    _clearSelection(calcData);
+    if(!retain) _clearSelection(calcData);
 
     if(selected) {
         cdItem.selected = 1;
-        selection.push(_newSelectionItem(
-          selectedPointNumber,
-          hoverDataItem.xaxis.c2d(cdItem.x),
-          hoverDataItem.yaxis.c2d(cdItem.y)));
     } else {
         cdItem.selected = 0;
     }
 
+    for(var i = 0; i < calcData.length; i++) {
+        cdItem = calcData[i];
+        if(cdItem.selected === 1) {
+            selection.push(_newSelectionItem(
+              i,
+              hoverDataItem.xaxis.c2d(cdItem.x),
+              hoverDataItem.yaxis.c2d(cdItem.y)));
+        }
+    }
+
     return selection;
 }