Add multiselect

package.json

@@ -93,6 +93,7 @@
     "ndarray-fill": "^1.0.2",
     "ndarray-homography": "^1.0.0",
     "ndarray-ops": "^1.2.2",
+    "polybooljs": "^1.2.0",
     "regl": "^1.3.0",
     "right-now": "^1.0.0",
     "robust-orientation": "^1.1.3",

src/lib/polygon.js

@@ -31,14 +31,17 @@ var polygon = module.exports = {};
  *          returns boolean: is pt inside the polygon (including on its edges)
  */
 polygon.tester = function tester(ptsIn) {
+    if(Array.isArray(ptsIn[0][0])) return polygon.multitester(ptsIn);
+
     var pts = ptsIn.slice(),
         xmin = pts[0][0],
         xmax = xmin,
         ymin = pts[0][1],
-        ymax = ymin;
+        ymax = ymin,
+        i;
 
     pts.push(pts[0]);
-    for(var i = 1; i < pts.length; i++) {
+    for(i = 1; i < pts.length; i++) {
         xmin = Math.min(xmin, pts[i][0]);
         xmax = Math.max(xmax, pts[i][0]);
         ymin = Math.min(ymin, pts[i][1]);
@@ -149,14 +152,69 @@ polygon.tester = function tester(ptsIn) {
         return crossings % 2 === 1;
     }
 
+    // detect if poly is degenerate
+    var degenerate = true;
+    var lastPt = pts[0];
+    for(i = 1; i < pts.length; i++) {
+        if(lastPt[0] !== pts[i][0] || lastPt[1] !== pts[i][1]) {
+            degenerate = false;
+            break;
+        }
+    }
+
     return {
         xmin: xmin,
         xmax: xmax,
         ymin: ymin,
         ymax: ymax,
         pts: pts,
         contains: isRect ? rectContains : contains,
-        isRect: isRect
+        isRect: isRect,
+        degenerate: degenerate
+    };
+};
+
+/**
+ * Test multiple polygons
+ */
+polygon.multitester = function multitester(list) {
+    var testers = [],
+        xmin = list[0][0][0],
+        xmax = xmin,
+        ymin = list[0][0][1],
+        ymax = ymin;
+
+    for(var i = 0; i < list.length; i++) {
+        var tester = polygon.tester(list[i]);
+        tester.subtract = list[i].subtract;
+        testers.push(tester);
+        xmin = Math.min(xmin, tester.xmin);
+        xmax = Math.max(xmax, tester.xmax);
+        ymin = Math.min(ymin, tester.ymin);
+        ymax = Math.max(ymax, tester.ymax);
+    }
+
+    function contains(pt, arg) {
+        var yes = false;
+        for(var i = 0; i < testers.length; i++) {
+            if(testers[i].contains(pt, arg)) {
+                // if contained by subtract polygon - exclude the point
+                yes = testers[i].subtract === false;
+            }
+        }
+
+        return yes;
+    }
+
+    return {
+        xmin: xmin,
+        xmax: xmax,
+        ymin: ymin,
+        ymax: ymax,
+        pts: [],
+        contains: contains,
+        isRect: false,
+        degenerate: false
     };
 };
 

src/plots/cartesian/dragbox.js

@@ -140,7 +140,10 @@ module.exports = function dragBox(gd, plotinfo, x, y, w, h, ns, ew) {
                 // to pan (or to zoom if it already is pan) on shift
                 if(e.shiftKey) {
                     if(dragModeNow === 'pan') dragModeNow = 'zoom';
-                    else dragModeNow = 'pan';
+                    else if(!isSelectOrLasso(dragModeNow)) dragModeNow = 'pan';
+                }
+                else if(e.ctrlKey) {
+                    dragModeNow = 'pan';
                 }
             }
             // all other draggers just pan
@@ -168,13 +171,31 @@ module.exports = function dragBox(gd, plotinfo, x, y, w, h, ns, ew) {
             else if(isSelectOrLasso(dragModeNow)) {
                 dragOptions.xaxes = xa;
                 dragOptions.yaxes = ya;
+
+                // take over selection polygons from prev mode, if any
+                if((e.shiftKey || e.altKey) && (plotinfo.selection && plotinfo.selection.polygons) && !dragOptions.polygons) {
+                    dragOptions.polygons = plotinfo.selection.polygons;
+                    dragOptions.mergedPolygons = plotinfo.selection.mergedPolygons;
+                }
+                // create new polygons, if shift mode
+                else if((!e.shiftKey && !e.altKey) || ((e.shiftKey || e.altKey) && !plotinfo.selection)) {
+                    plotinfo.selection = {};
+                    plotinfo.selection.polygons = dragOptions.polygons = [];
+                    plotinfo.selection.mergedPolygons = dragOptions.mergedPolygons = [];
+                }
+
                 prepSelect(e, startX, startY, dragOptions, dragModeNow);
             }
         }
     };
 
     dragElement.init(dragOptions);
 
+    // FIXME: this hack highlights selection once we enter select/lasso mode
+    if(isSelectOrLasso(gd._fullLayout.dragmode) && plotinfo.selection) {
+        showSelect(zoomlayer, dragOptions);
+    }
+
     var x0,
         y0,
         box,
@@ -526,6 +547,9 @@ module.exports = function dragBox(gd, plotinfo, x, y, w, h, ns, ew) {
         }
 
         updateSubplots([x0, y0, pw - dx, ph - dy]);
+
+        if(plotinfo.ondrag) plotinfo.ondrag.call([x0, y0, pw - dx, ph - dy]);
+
         ticksAndAnnotations(yActive, xActive);
     }
 
@@ -902,6 +926,31 @@ function clearSelect(zoomlayer) {
     zoomlayer.selectAll('.select-outline').remove();
 }
 
+function showSelect(zoomlayer, dragOptions) {
+    var outlines = zoomlayer.selectAll('path.select-outline').data([1, 2]),
+        plotinfo = dragOptions.plotinfo,
+        xaxis = plotinfo.xaxis,
+        yaxis = plotinfo.yaxis,
+        selection = plotinfo.selection,
+        polygons = selection.mergedPolygons,
+        xs = xaxis._offset,
+        ys = yaxis._offset,
+        paths = [];
+
+    for(var i = 0; i < polygons.length; i++) {
+        var ppts = polygons[i];
+        paths.push(ppts.join('L') + 'L' + ppts[0]);
+    }
+
+    if(paths.length) {
+        outlines.enter()
+            .append('path')
+            .attr('class', function(d) { return 'select-outline select-outline-' + d; })
+            .attr('transform', 'translate(' + xs + ', ' + ys + ')')
+            .attr('d', 'M' + paths.join('M') + 'Z');
+    }
+}
+
 function updateZoombox(zb, corners, box, path0, dimmed, lum) {
     zb.attr('d',
         path0 + 'M' + (box.l) + ',' + (box.t) + 'v' + (box.h) +
@@ -924,9 +973,7 @@ function removeZoombox(gd) {
 }
 
 function isSelectOrLasso(dragmode) {
-    var modes = ['lasso', 'select'];
-
-    return modes.indexOf(dragmode) !== -1;
+    return dragmode === 'lasso' || dragmode === 'select';
 }
 
 function xCorners(box, y0) {