Merge pull request #154 from plotly/lasso

Lasso & rectangular selections

Author: alexcjohnson

.agignore

@@ -0,0 +1 @@
+dist

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.selectbox,
+    click: handleCartesian
+};
+
+modeBarButtons.lasso2d = {
+    name: 'lasso2d',
+    title: 'Lasso Select',
+    attr: 'dragmode',
+    val: 'lasso',
+    icon: Icons.lasso,
+    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'
+};
+
 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

@@ -10,6 +10,7 @@
 'use strict';
 
 var Plotly = require('../../plotly');
+var scatterSubTypes = require('../../traces/scatter/subtypes');
 
 var createModeBar = require('./');
 var modeBarButtons = require('./buttons');
@@ -57,7 +58,7 @@ module.exports = function manageModeBar(gd) {
     }
     else {
         buttonGroups = getButtonGroups(
-            fullLayout,
+            gd,
             context.modeBarButtonsToRemove,
             context.modeBarButtonsToAdd
         );
@@ -68,8 +69,12 @@ module.exports = function manageModeBar(gd) {
 };
 
 // logic behind which buttons are displayed by default
-function getButtonGroups(fullLayout, buttonsToRemove, buttonsToAdd) {
-    var groups = [];
+function getButtonGroups(gd, buttonsToRemove, buttonsToAdd) {
+    var fullLayout = gd._fullLayout,
+        fullData = gd._fullData,
+        groups = [],
+        i,
+        trace;
 
     function addGroup(newGroup) {
         var out = [];
@@ -99,10 +104,40 @@ function getButtonGroups(fullLayout, buttonsToRemove, buttonsToAdd) {
 
     var hasCartesian = fullLayout._hasCartesian,
         hasGL2D = fullLayout._hasGL2D,
-        allAxesFixed = areAllAxesFixed(fullLayout);
+        allAxesFixed = areAllAxesFixed(fullLayout),
+        dragModeGroup = [];
+
+    if((hasCartesian || hasGL2D) && !allAxesFixed) {
+        dragModeGroup = ['zoom2d', 'pan2d'];
+    }
+    if(hasCartesian) {
+        // look for traces that support selection
+        // to be updated as we add more selectPoints handlers
+        var selectable = false;
+        for(i = 0; i < fullData.length; i++) {
+            if(selectable) break;
+            trace = fullData[i];
+            if(!trace._module || !trace._module.selectPoints) continue;
+
+            if(trace.type === 'scatter') {
+                if(scatterSubTypes.hasMarkers(trace) || scatterSubTypes.hasText(trace)) {
+                    selectable = true;
+                }
+            }
+            // assume that in general if the trace module has selectPoints,
+            // then it's selectable. Scatter is an exception to this because it must
+            // have markers or text, not just be a scatter type.
+            else selectable = true;
+        }
+
+        if(selectable) {
+            dragModeGroup.push('select2d');
+            dragModeGroup.push('lasso2d');
+        }
+    }
+    if(dragModeGroup.length) addGroup(dragModeGroup);
 
     if((hasCartesian || hasGL2D) && !allAxesFixed) {
-        addGroup(['zoom2d', 'pan2d']);
         addGroup(['zoomIn2d', 'zoomOut2d', 'autoScale2d', 'resetScale2d']);
     }
 
@@ -119,7 +154,7 @@ function getButtonGroups(fullLayout, buttonsToRemove, buttonsToAdd) {
     // append buttonsToAdd to the groups
     if(buttonsToAdd.length) {
         if(Array.isArray(buttonsToAdd[0])) {
-            for(var i = 0; i < buttonsToAdd.length; i++) {
+            for(i = 0; i < buttonsToAdd.length; i++) {
                 groups.push(buttonsToAdd[i]);
             }
         }

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/fonts/ploticon/_ploticon.scss

@@ -41,3 +41,5 @@
 .ploticon-movie:before { content: '\e80e'; } /* '' */
 .ploticon-question:before { content: '\e80f'; } /* '' */
 .ploticon-disk:before { content: '\e810'; } /* '' */
+.ploticon-lasso:before { content: '\e811'; } /* '' */
+.ploticon-selectbox:before { content: '\e812'; } /* '' */

src/fonts/ploticon/config.json

@@ -1462,6 +1462,26 @@
         "movie"
       ]
     },
+    {
+      "uid": "11aaeff1fa846b5a34638dbb78619c59",
+      "css": "lasso",
+      "code": 59409,
+      "src": "custom_icons",
+      "selected": true,
+      "svg": {
+        "path": "M1018.2 311.9C981.8 105 727.8-23.6 450.2 25.7 172.6 74-22.5 281.9 13.9 488.7 23.6 545.6 50.4 597 90 639.9 77.2 706.3 100.8 777.1 157.6 823.2 191.9 851 232.6 863.9 272.2 865L216.5 934.6 216.5 934.6C215.4 935.7 214.4 936.8 213.3 937.8 202.6 951.8 204.7 972.1 217.6 982.9 231.5 993.6 251.9 991.4 262.6 978.6 263.7 977.5 264.7 976.4 264.7 974.3L264.7 974.3 378.3 833.9C394.4 823.2 409.4 810.3 423.4 794.2 426.6 791 428.7 786.7 430.9 783.5 479.1 785.6 530.5 783.5 582 773.8 859.6 725.6 1054.7 518.8 1018.2 311.9ZM394.4 691.3C314 677.4 245.4 643.1 197.2 594.9 239 553.1 305.5 547.7 352.6 586.3 385.9 612 399.8 651.7 394.4 691.3ZM206.9 765.3C187.6 749.2 173.6 727.8 168.3 705.3 217.6 737.4 276.5 759.9 341.9 772.8 300.1 798.5 246.5 797.4 206.9 765.3ZM567 690.2C532.7 696.7 498.4 698.8 465.2 697.7 472.7 635.6 449.1 570.2 396.6 528.4 323.7 469.5 221.9 473.7 153.3 532.7 143.6 513.4 137.2 493 132.9 471.6 105 313 254 155.4 466.2 117.9S872.5 177.9 900.3 335.5C928.2 494.1 779.2 652.7 567 690.2Z",
+        "width": 1031
+      },
+      "search": [
+        "lasso"
+      ]
+    },
+    {
+      "uid": "8ce732688587909ad0a9d8323eaca8ad",
+      "css": "selectbox",
+      "code": 59410,
+      "src": "fontelico"
+    },
     {
       "uid": "9d3d9d6ce1ec63eaa26281e6162853c9",
       "css": "camera-retro",