horizontal and vertical select boxes

Author: alexcjohnson

src/plots/cartesian/select.js

@@ -10,12 +10,14 @@
 'use strict';
 
 var polygon = require('../../lib/polygon');
+var color = require('../../components/color');
 
 var axes = require('./axes');
 var constants = require('./constants');
 
 var filteredPolygon = polygon.filter;
 var polygonTester = polygon.tester;
+var MINDRAG = constants.MINDRAG;
 
 function getAxId(ax) { return ax._id; }
 
@@ -43,6 +45,16 @@ module.exports = function prepSelect(e, startX, startY, dragOptions, mode) {
         .attr('class', function(d) { return 'select-outline select-outline-' + d; })
         .attr('d', path0 + 'Z');
 
+    var corners = plot.append('path')
+        .attr('class', 'zoombox-corners')
+        .style({
+            fill: color.background,
+            stroke: color.defaultLine,
+            'stroke-width': 1
+        })
+        .attr('d','M0,0Z');
+
+
     // find the traces to search for selection points
     var searchTraces = [],
         gd = dragOptions.gd,
@@ -73,9 +85,35 @@ module.exports = function prepSelect(e, startX, startY, dragOptions, mode) {
         x1 = Math.max(0, Math.min(pw, dx0 + x0));
         y1 = Math.max(0, Math.min(ph, dy0 + y0));
 
+        var dx = Math.abs(x1 - x0),
+            dy = Math.abs(y1 - 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');
+            if(dy < Math.min(dx * 0.6, MINDRAG)) {
+                // horizontal motion: make a vertical box
+                poly = polygonTester([[x0, 0], [x0, ph], [x1, ph], [x1, 0]]);
+                // extras to guide users in keeping a straight selection
+                corners.attr('d', 'M' + poly.xmin + ',' + (y0 - MINDRAG) +
+                    'h-4v' + (2 * MINDRAG) + 'h4Z' +
+                    'M' + poly.xmax + ',' + (y0 - MINDRAG) +
+                    'h4v' + (2 * MINDRAG) + 'h-4Z');
+
+            }
+            else if(dx < Math.min(dy * 0.6, MINDRAG)) {
+                // vertical motion: make a horizontal box
+                poly = polygonTester([[0, y0], [0, y1], [pw, y1], [pw, y0]]);
+                corners.attr('d', 'M' + (x0 - MINDRAG) + ',' + poly.ymin +
+                    'v-4h' + (2 * MINDRAG) + 'v4Z' +
+                    'M' + (x0 - MINDRAG) + ',' + poly.ymax +
+                    'v4h' + (2 * MINDRAG) + 'v-4Z');
+            }
+            else {
+                // diagonal motion
+                poly = polygonTester([[x0, y0], [x0, y1], [x1, y1], [x1, y0]]);
+                corners.attr('d','M0,0Z');
+            }
+            outlines.attr('d', 'M' + poly.xmin + ',' + poly.ymin +
+                'H' + poly.xmax + 'V' + poly.ymax + 'H' + poly.xmin + 'Z');
         }
         else if(mode === 'lasso') {
             pts.addPt([x1, y1]);
@@ -99,6 +137,7 @@ module.exports = function prepSelect(e, startX, startY, dragOptions, mode) {
             dragOptions.gd.emit('plotly_selected', eventData);
         }
         outlines.remove();
+        corners.remove();
         for(i = 0; i < searchTraces.length; i++) {
             searchInfo = searchTraces[i];
             searchInfo.selectPoints(searchInfo, false);