add lasso/select dragmode support to box traces

- use pts array of object to determine which box points
  are inside selection polygon
- use index field (from Box.calc) to match each selected box point
  to underlying x/y input value.
- dim point node opacity upon selection

Author: etpinard

src/traces/box/index.js

@@ -19,6 +19,7 @@ Box.setPositions = require('./set_positions');
 Box.plot = require('./plot');
 Box.style = require('./style');
 Box.hoverPoints = require('./hover');
+Box.selectPoints = require('./select');
 
 Box.moduleType = 'trace';
 Box.name = 'box';

src/traces/box/plot.js

@@ -48,6 +48,7 @@ module.exports = function plot(gd, plotinfo, cdbox) {
         var cd0 = d[0];
         var t = cd0.t;
         var trace = cd0.trace;
+        var sel = cd0.node3 = d3.select(this);
 
         var group = (fullLayout.boxmode === 'group' && gd.numboxes > 1);
         // box half width
@@ -80,7 +81,7 @@ module.exports = function plot(gd, plotinfo, cdbox) {
         seed();
 
         // boxes and whiskers
-        d3.select(this).selectAll('path.box')
+        sel.selectAll('path.box')
             .data(Lib.identity)
             .enter().append('path')
             .style('vector-effect', 'non-scaling-stroke')
@@ -99,6 +100,7 @@ module.exports = function plot(gd, plotinfo, cdbox) {
                         Math.min(q1, q3) + 1, Math.max(q1, q3) - 1),
                     lf = valAxis.c2p(trace.boxpoints === false ? d.min : d.lf, true),
                     uf = valAxis.c2p(trace.boxpoints === false ? d.max : d.uf, true);
+
                 if(trace.orientation === 'h') {
                     d3.select(this).attr('d',
                         'M' + m + ',' + pos0 + 'V' + pos1 + // median line
@@ -118,7 +120,7 @@ module.exports = function plot(gd, plotinfo, cdbox) {
 
         // draw points, if desired
         if(trace.boxpoints) {
-            d3.select(this).selectAll('g.points')
+            sel.selectAll('g.points')
                 // since box plot points get an extra level of nesting, each
                 // box needs the trace styling info
                 .data(function(d) {
@@ -212,9 +214,10 @@ module.exports = function plot(gd, plotinfo, cdbox) {
                 .classed('point', true)
                 .call(Drawing.translatePoints, xa, ya);
         }
+
         // draw mean (and stdev diamond) if desired
         if(trace.boxmean) {
-            d3.select(this).selectAll('path.mean')
+            sel.selectAll('path.mean')
                 .data(Lib.identity)
                 .enter().append('path')
                 .attr('class', 'mean')

src/traces/box/select.js

@@ -0,0 +1,57 @@
+/**
+* Copyright 2012-2017, Plotly, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+
+'use strict';
+
+var DESELECTDIM = require('../../constants/interactions').DESELECTDIM;
+
+module.exports = function selectPoints(searchInfo, polygon) {
+    var cd = searchInfo.cd;
+    var xa = searchInfo.xaxis;
+    var ya = searchInfo.yaxis;
+    var trace = cd[0].trace;
+    var node3 = cd[0].node3;
+    var selection = [];
+    var i, j;
+
+    if(trace.visible !== true) return [];
+
+    if(polygon === false) {
+        for(i = 0; i < cd.length; i++) {
+            for(j = 0; j < (cd[i].pts || []).length; j++) {
+                // clear selection
+                cd[i].pts[j].dim = 0;
+            }
+        }
+    } else {
+        for(i = 0; i < cd.length; i++) {
+            for(j = 0; j < (cd[i].pts || []).length; j++) {
+                var pt = cd[i].pts[j];
+                var x = xa.c2p(pt.x);
+                var y = ya.c2p(pt.y);
+
+                if(polygon.contains([x, y])) {
+                    selection.push({
+                        pointNumber: pt.i,
+                        x: pt.x,
+                        y: pt.y
+                    });
+                    pt.dim = 0;
+                } else {
+                    pt.dim = 1;
+                }
+            }
+        }
+    }
+
+    node3.selectAll('.point').style('opacity', function(d) {
+        return d.dim ? DESELECTDIM : 1;
+    });
+
+    return selection;
+};

test/jasmine/tests/select_test.js

@@ -848,7 +848,60 @@ describe('Test select box and lasso per trace:', function() {
                     ]);
                     assertRanges([[1.66, 3.59], [0.69, 2.17]]);
                 },
-                null, BOXEVENTS, 'bar select'
+                null, BOXEVENTS, 'histogram select'
+            );
+        })
+        .catch(fail)
+        .then(done);
+    });
+
+    it('should work for box traces', function(done) {
+        var assertPoints = makeAssertPoints(['curveNumber', 'y']);
+        var assertRanges = makeAssertRanges();
+        var assertLassoPoints = makeAssertLassoPoints();
+
+        var fig = Lib.extendDeep({}, require('@mocks/box_grouped'));
+        fig.data.forEach(function(trace) {
+            trace.boxpoints = 'all';
+        });
+        fig.layout.dragmode = 'lasso';
+        fig.layout.width = 600;
+        fig.layout.height = 500;
+        addInvisible(fig);
+
+        Plotly.plot(gd, fig)
+        .then(function() {
+            return _run(
+                [[200, 200], [400, 200], [400, 350], [200, 350], [200, 200]],
+                function() {
+                    assertPoints([
+                        [0, 0.2], [0, 0.3], [0, 0.5], [0, 0.7],
+                        [1, 0.2], [1, 0.5], [1, 0.7], [1, 0.7],
+                        [2, 0.3], [2, 0.6], [2, 0.6]
+                    ]);
+                    assertLassoPoints([
+                        ['day 1', 'day 2', 'day 2', 'day 1', 'day 1'],
+                        [0.71, 0.71, 0.1875, 0.1875, 0.71]
+                    ]);
+                },
+                null, LASSOEVENTS, 'box lasso'
+            );
+        })
+        .then(function() {
+            return Plotly.relayout(gd, 'dragmode', 'select');
+        })
+        .then(function() {
+            return _run(
+                [[200, 200], [400, 350]],
+                function() {
+                    assertPoints([
+                        [0, 0.2], [0, 0.3], [0, 0.5], [0, 0.7],
+                        [1, 0.2], [1, 0.5], [1, 0.7], [1, 0.7],
+                        [2, 0.3], [2, 0.6], [2, 0.6]
+                    ]);
+                    assertRanges([['day 1', 'day 2'], [0.1875, 0.71]]);
+                },
+                null, BOXEVENTS, 'box select'
             );
         })
         .catch(fail)