lasso and selectbox skeleton

Author: alexcjohnson

src/components/modebar/buttons.js

@@ -121,6 +121,24 @@ modeBarButtons.pan2d = {
     click: handleCartesian
 };
 
+modeBarButtons.select2d = {
+    name: 'select2d',
+    title: 'Box Select',
+    attr: 'dragmode',
+    val: 'select',
+    icon: Icons.question, // TODO
+    click: handleCartesian
+};
+
+modeBarButtons.lasso2d = {
+    name: 'lasso2d',
+    title: 'Lasso Select',
+    attr: 'dragmode',
+    val: 'lasso',
+    icon: Icons.question, // TODO
+    click: handleCartesian
+};
+
 modeBarButtons.zoomIn2d = {
     name: 'zoomIn2d',
     title: 'Zoom in',
@@ -179,6 +197,13 @@ modeBarButtons.hoverCompareCartesian = {
     click: handleCartesian
 };
 
+var DRAGCURSORS = {
+    pan: 'move',
+    zoom: 'crosshair',
+    select: 'crosshair',
+    lasso: 'crosshair' // TODO: better cursors for select and lasso?
+};
+
 function handleCartesian(gd, ev) {
     var button = ev.currentTarget,
         astr = button.getAttribute('data-attr'),
@@ -230,7 +255,7 @@ function handleCartesian(gd, ev) {
             if(fullLayout._hasCartesian) {
                 Plotly.Fx.setCursor(
                     fullLayout._paper.select('.nsewdrag'),
-                    {pan:'move', zoom:'crosshair'}[val]
+                    DRAGCURSORS[val]
                 );
             }
             Plotly.Fx.supplyLayoutDefaults(gd.layout, fullLayout, gd._fullData);

src/components/modebar/manage.js

@@ -102,7 +102,7 @@ function getButtonGroups(fullLayout, buttonsToRemove, buttonsToAdd) {
         allAxesFixed = areAllAxesFixed(fullLayout);
 
     if((hasCartesian || hasGL2D) && !allAxesFixed) {
-        addGroup(['zoom2d', 'pan2d']);
+        addGroup(['zoom2d', 'pan2d', 'select2d', 'lasso2d']);
         addGroup(['zoomIn2d', 'zoomOut2d', 'autoScale2d', 'resetScale2d']);
     }
 

src/css/_drag.scss

@@ -0,0 +1,12 @@
+.select-outline {
+    fill: none;
+    stroke-width: 1;
+    shape-rendering: crispEdges;
+}
+.select-outline-1 {
+    stroke: white;
+}
+.select-outline-2 {
+    stroke: black;
+    stroke-dasharray: 2px 2px;
+}

src/css/style.scss

@@ -6,5 +6,6 @@
     @import "cursor.scss";
     @import "modebar.scss";
     @import "tooltip.scss";
+    @import "drag.scss";
 }
 @import "notifier.scss";

src/plots/cartesian/graph_interact.js

@@ -14,14 +14,15 @@ var d3 = require('d3');
 var tinycolor = require('tinycolor2');
 var isNumeric = require('fast-isnumeric');
 var Events = require('../../lib/events');
+var prepSelect = require('./select');
 
 var fx = module.exports = {};
 
 fx.layoutAttributes = {
     dragmode: {
         valType: 'enumerated',
         role: 'info',
-        values: ['zoom', 'pan', 'orbit', 'turntable'],
+        values: ['zoom', 'pan', 'select', 'lasso', 'orbit', 'turntable'],
         description: 'Determines the mode of drag interactions.'
     },
     hovermode: {
@@ -1370,16 +1371,39 @@ function dragBox(gd, plotinfo, x, y, w, h, ns, ew) {
 
     var dragOptions = {
         element: dragger,
+        gd: gd,
+        plotinfo: plotinfo,
+        xaxes: xa,
+        yaxes: ya,
+        doubleclick: doubleClick,
         prepFn: function(e, startX, startY) {
-            if(ns+ew==='nsew' && ((fullLayout.dragmode==='zoom') ?
-                !e.shiftKey : e.shiftKey)) {
+            var dragModeNow = gd._fullLayout.dragmode;
+            if(ns + ew === 'nsew') {
+                // main dragger handles all drag modes, and changes
+                // to pan (or to zoom if it already is pan) on shift
+                if(e.shiftKey) {
+                    if(dragModeNow === 'pan') dragModeNow = 'zoom';
+                    else dragModeNow = 'pan';
+                }
+            }
+            // all other draggers just pan
+            else dragModeNow = 'pan';
+
+            if(dragModeNow === 'lasso') dragOptions.minDrag = 1;
+            else dragOptions.minDrag = undefined;
+
+            if(dragModeNow === 'zoom') {
                 dragOptions.moveFn = zoomMove;
                 dragOptions.doneFn = zoomDone;
                 zoomPrep(e, startX, startY);
-            } else {
+            }
+            else if(dragModeNow === 'pan') {
                 dragOptions.moveFn = plotDrag;
                 dragOptions.doneFn = dragDone;
             }
+            else if(dragModeNow === 'select' || dragModeNow === 'lasso') {
+                prepSelect(e, startX, startY, dragOptions, dragModeNow);
+            }
         }
     };
 
@@ -2003,9 +2027,11 @@ fx.dragElement = function(options) {
 
     function onMove(e) {
         var dx = e.clientX - startX,
-            dy = e.clientY - startY;
-        if(Math.abs(dx)<fx.MINDRAG) dx = 0;
-        if(Math.abs(dy)<fx.MINDRAG) dy = 0;
+            dy = e.clientY - startY,
+            minDrag = options.minDrag || fx.MINDRAG;
+
+        if(Math.abs(dx) < minDrag) dx = 0;
+        if(Math.abs(dy) < minDrag) dy = 0;
         if(dx||dy) gd._dragged = true;
 
         if(options.moveFn) options.moveFn(dx, dy, gd._dragged);

src/plots/cartesian/lasso.js

@@ -0,0 +1,22 @@
+/**
+* Copyright 2012-2015, 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';
+
+module.exports = function prepLasso(e, startX, startY, dragOptions) {
+    console.log('lasso start', e, startX, startY, dragOptions);
+
+    dragOptions.moveFn = function(dx0, dy0) {
+        console.log('lasso move', dx0, dy0);
+    };
+
+    dragOptions.doneFn = function(dragged, numclicks) {
+        console.log('lasso done', dragged, numclicks);
+    };
+};

src/plots/cartesian/select.js

@@ -0,0 +1,58 @@
+/**
+* Copyright 2012-2015, 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';
+
+module.exports = function prepSelect(e, startX, startY, dragOptions, mode) {
+    console.log('select start', e, startX, startY, dragOptions, mode);
+    var plot = dragOptions.plotinfo.plot,
+        dragBBox = dragOptions.element.getBoundingClientRect(),
+        x0 = startX - dragBBox.left,
+        y0 = startY - dragBBox.top,
+        x1 = x0,
+        y1 = y0,
+        path0 = 'M' + x0 + ',' + y0,
+        pw = dragOptions.xaxes[0]._length,
+        ph = dragOptions.yaxes[0]._length,
+        pts = [[x0, y0]],
+        outlines = plot.selectAll('path.select-outline').data([1,2]);
+
+    // TODO initial dimming of selectable points
+
+    outlines.enter()
+        .append('path')
+        .attr('class', function(d) { return 'select-outline select-outline-' + d; })
+        .attr('d', path0 + 'Z');
+
+    dragOptions.moveFn = function(dx0, dy0) {
+        console.log('select move', dx0, dy0);
+        x1 = Math.max(0, Math.min(pw, dx0 + x0));
+        y1 = Math.max(0, Math.min(ph, dy0 + y0));
+
+        if(mode === 'select') {
+            outlines.attr('d', path0 + 'H' + x1 + 'V' + y1 + 'H' + x0 + 'Z');
+        }
+        else {
+            pts.push([x1, y1]); // TODO: filter this down to something reasonable
+            outlines.attr('d', 'M' + pts.join('L'));
+        }
+
+        // TODO - actual selection and dimming!
+    };
+
+    dragOptions.doneFn = function(dragged, numclicks) {
+        console.log('select done', dragged, numclicks);
+        if(!dragged && numclicks === 2) dragOptions.doubleclick();
+        else {
+            // TODO - select event
+        }
+        outlines.remove();
+        // TODO - remove dimming
+    };
+};