selection on scatter points

Author: alexcjohnson

src/plots/cartesian/select.js

@@ -9,9 +9,13 @@
 
 'use strict';
 var polygon = require('../../lib/polygon');
+var axes = require('./axes');
 var filteredPolygon = polygon.filter;
+var polygonTester = polygon.tester;
 var BENDPX = 1.5; // max pixels off straight before a line counts as bent
 
+function getAxId(ax) { return ax._id; }
+
 module.exports = function prepSelect(e, startX, startY, dragOptions, mode) {
     var plot = dragOptions.plotinfo.plot,
         dragBBox = dragOptions.element.getBoundingClientRect(),
@@ -21,7 +25,10 @@ module.exports = function prepSelect(e, startX, startY, dragOptions, mode) {
         y1 = y0,
         path0 = 'M' + x0 + ',' + y0,
         pw = dragOptions.xaxes[0]._length,
-        ph = dragOptions.yaxes[0]._length;
+        ph = dragOptions.yaxes[0]._length,
+        xAxisIds = dragOptions.xaxes.map(getAxId),
+        yAxisIds = dragOptions.yaxes.map(getAxId);
+
     if(mode === 'lasso') {
         var pts = filteredPolygon([[x0, y0]], BENDPX);
     }
@@ -33,28 +40,63 @@ module.exports = function prepSelect(e, startX, startY, dragOptions, mode) {
         .attr('class', function(d) { return 'select-outline select-outline-' + d; })
         .attr('d', path0 + 'Z');
 
+    // find the traces to search for selection points
+    var searchTraces = [],
+        gd = dragOptions.gd,
+        i,
+        cd,
+        trace,
+        searchInfo,
+        selection = [];
+    for(i = 0; i < gd.calcdata.length; i++) {
+        cd = gd.calcdata[i];
+        trace = cd[0].trace;
+        if(!trace._module || !trace._module.selectPoints) continue;
+
+        if(xAxisIds.indexOf(trace.xaxis) === -1) continue;
+        if(yAxisIds.indexOf(trace.yaxis) === -1) continue;
+
+        searchTraces.push({
+            selectPoints: trace._module.selectPoints,
+            cd: cd,
+            xaxis: axes.getFromId(gd, trace.xaxis),
+            yaxis: axes.getFromId(gd, trace.yaxis)
+        });
+    }
+
     dragOptions.moveFn = function(dx0, dy0) {
+        var poly;
         x1 = Math.max(0, Math.min(pw, dx0 + x0));
         y1 = Math.max(0, Math.min(ph, dy0 + y0));
 
         if(mode === 'select') {
+            poly = polygonTester([[x0, y0], [x0, y1], [x1, y1], [x1, y0]]);
             outlines.attr('d', path0 + 'H' + x1 + 'V' + y1 + 'H' + x0 + 'Z');
         }
         else if(mode === 'lasso') {
             pts.addPt([x1, y1]);
-            outlines.attr('d', 'M' + pts.filtered.join('L'));
+            poly = polygonTester(pts.filtered);
+            outlines.attr('d', 'M' + pts.filtered.join('L') + 'Z');
         }
 
-        // TODO - actual selection and dimming!
+        selection = [];
+        for(i = 0; i < searchTraces.length; i++) {
+            searchInfo = searchTraces[i];
+            [].push.apply(selection, searchInfo.selectPoints(searchInfo, poly));
+        }
+        dragOptions.gd.emit('plotly_selecting', {points: selection});
     };
 
     dragOptions.doneFn = function(dragged, numclicks) {
         if(!dragged && numclicks === 2) dragOptions.doubleclick();
         else {
-            // TODO - select event
+            dragOptions.gd.emit('plotly_selected', {points: selection});
         }
         outlines.remove();
-        // TODO - remove dimming
+        for(i = 0; i < searchTraces.length; i++) {
+            searchInfo = searchTraces[i];
+            searchInfo.selectPoints(searchInfo, false);
+        }
     };
 };
 

src/traces/scatter/index.js

@@ -458,6 +458,8 @@ scatter.plot = function(gd, plotinfo, cdscatter) {
             line = trace.line;
         if(trace.visible !== true) return;
 
+        d[0].node = this; // store node for tweaking by selectPoints
+
         scatter.arraysToCalcdata(d);
 
         if(!scatter.hasLines(trace) && trace.fill==='none') return;
@@ -855,3 +857,53 @@ scatter.hoverPoints = function(pointData, xval, yval, hovermode) {
 
     return [pointData];
 };
+
+var DESELECTDIM = 0.2;
+
+scatter.selectPoints = function(searchInfo, polygon) {
+    var cd = searchInfo.cd,
+        xa = searchInfo.xaxis,
+        ya = searchInfo.yaxis,
+        selection = [],
+        curveNumber = cd[0].trace.index,
+        marker = cd[0].trace.marker,
+        i,
+        di,
+        x,
+        y;
+
+    if(!marker) return; // TODO: include text and/or lines?
+
+    var opacity = Array.isArray(marker.opacity) ? 1 : marker.opacity;
+
+    if(polygon === false) { // clear selection
+        for(i = 0; i < cd.length; i++) cd[i].dim = 0;
+    }
+    else {
+        for(i = 0; i < cd.length; i++) {
+            di = cd[i];
+            x = xa.c2p(di.x);
+            y = ya.c2p(di.y);
+            if(polygon.contains([x, y])) {
+                selection.push({
+                    curveNumber: curveNumber,
+                    pointNumber: i,
+                    x: di.x,
+                    y: di.y
+                });
+                di.dim = 0;
+            }
+            else di.dim = 1;
+        }
+    }
+
+    // do the dimming here, as well as returning the selection
+    // The logic here duplicates Drawing.pointStyle, but I don't want
+    // d.dim in pointStyle in case something goes wrong with selection.
+    d3.select(cd[0].node).selectAll('path.point')
+        .style('opacity', function(d) {
+            return ((d.mo+1 || opacity+1) - 1) * (d.dim ? DESELECTDIM : 1);
+        });
+
+    return selection;
+};