speed up dragbox

- replace indexOf with hash objects lookups
- add 'svg' and 'draggedPts' trace module categories
- speed up updateSubplots (called on pan and scroll) by
  splitting it into splom, scattergl, svg and draggedPts blocks,
  (draggedPts is very slow, svg can be slow at 50x50)
- ... some scope variable clean up

Author: etpinard

src/plot_api/subroutines.js

@@ -179,7 +179,7 @@ exports.lsInner = function(gd) {
                 .append('rect');
         });
 
-        plotClip.select('rect').attr({
+        plotinfo.clipRect = plotClip.select('rect').attr({
             width: xa._length,
             height: ya._length
         });

src/plots/cartesian/dragbox.js

@@ -233,7 +233,7 @@ module.exports = function transitionAxes(gd, newLayout, transitionOpts, makeOnCo
         var plotDx = xa2._offset - fracDx,
             plotDy = ya2._offset - fracDy;
 
-        fullLayout._defs.select('#' + subplot.clipId + '> rect')
+        subplot.clipRect
             .call(Drawing.setTranslate, clipDx, clipDy)
             .call(Drawing.setScale, 1 / xScaleFactor, 1 / yScaleFactor);
 

src/plots/cartesian/transition_axes.js

@@ -27,7 +27,7 @@ Bar.selectPoints = require('./select');
 Bar.moduleType = 'trace';
 Bar.name = 'bar';
 Bar.basePlotModule = require('../../plots/cartesian');
-Bar.categories = ['cartesian', 'bar', 'oriented', 'markerColorscale', 'errorBarsOK', 'showLegend'];
+Bar.categories = ['cartesian', 'svg', 'bar', 'oriented', 'markerColorscale', 'errorBarsOK', 'showLegend', 'draggedPts'];
 Bar.meta = {
     description: [
         'The data visualized by the span of the bars is set in `y`',

src/traces/bar/index.js

@@ -24,7 +24,7 @@ Box.selectPoints = require('./select');
 Box.moduleType = 'trace';
 Box.name = 'box';
 Box.basePlotModule = require('../../plots/cartesian');
-Box.categories = ['cartesian', 'symbols', 'oriented', 'box-violin', 'showLegend'];
+Box.categories = ['cartesian', 'svg', 'symbols', 'oriented', 'box-violin', 'showLegend', 'draggedPts'];
 Box.meta = {
     description: [
         'In vertical (horizontal) box plots,',

src/traces/box/index.js

@@ -14,7 +14,7 @@ module.exports = {
     moduleType: 'trace',
     name: 'candlestick',
     basePlotModule: require('../../plots/cartesian'),
-    categories: ['cartesian', 'showLegend', 'candlestick'],
+    categories: ['cartesian', 'svg', 'showLegend', 'candlestick'],
     meta: {
         description: [
             'The candlestick is a style of financial chart describing',

src/traces/candlestick/index.js

@@ -20,7 +20,7 @@ Carpet.animatable = true;
 Carpet.moduleType = 'trace';
 Carpet.name = 'carpet';
 Carpet.basePlotModule = require('../../plots/cartesian');
-Carpet.categories = ['cartesian', 'carpet', 'carpetAxis', 'notLegendIsolatable'];
+Carpet.categories = ['cartesian', 'svg', 'carpet', 'carpetAxis', 'notLegendIsolatable'];
 Carpet.meta = {
     description: [
         'The data describing carpet axis layout is set in `y` and (optionally)',

src/traces/carpet/index.js

@@ -22,7 +22,7 @@ Contour.hoverPoints = require('./hover');
 Contour.moduleType = 'trace';
 Contour.name = 'contour';
 Contour.basePlotModule = require('../../plots/cartesian');
-Contour.categories = ['cartesian', '2dMap', 'contour', 'showLegend'];
+Contour.categories = ['cartesian', 'svg', '2dMap', 'contour', 'showLegend'];
 Contour.meta = {
     description: [
         'The data from which contour lines are computed is set in `z`.',

src/traces/contour/index.js

@@ -20,7 +20,7 @@ ContourCarpet.style = require('../contour/style');
 ContourCarpet.moduleType = 'trace';
 ContourCarpet.name = 'contourcarpet';
 ContourCarpet.basePlotModule = require('../../plots/cartesian');
-ContourCarpet.categories = ['cartesian', 'carpet', 'contour', 'symbols', 'showLegend', 'hasLines', 'carpetDependent'];
+ContourCarpet.categories = ['cartesian', 'svg', 'carpet', 'contour', 'symbols', 'showLegend', 'hasLines', 'carpetDependent'];
 ContourCarpet.meta = {
     hrName: 'contour_carpet',
     description: [

src/traces/contourcarpet/index.js

@@ -22,7 +22,7 @@ Heatmap.hoverPoints = require('./hover');
 Heatmap.moduleType = 'trace';
 Heatmap.name = 'heatmap';
 Heatmap.basePlotModule = require('../../plots/cartesian');
-Heatmap.categories = ['cartesian', '2dMap'];
+Heatmap.categories = ['cartesian', 'svg', '2dMap'];
 Heatmap.meta = {
     description: [
         'The data that describes the heatmap value-to-color mapping',