Merge pull request #2030 from plotly/geo-refactor+lasso

Geo refactor and lasso/select-box selections

Author: etpinard

src/components/annotations/draw.js

@@ -194,7 +194,7 @@ function drawRaw(gd, options, index, subplotId, xa, ya) {
 
     var isSizeConstrained = options.width || options.height;
 
-    var annTextClip = fullLayout._defs.select('.clips')
+    var annTextClip = fullLayout._topclips
         .selectAll('#' + annClipID)
         .data(isSizeConstrained ? [0] : []);
 

src/components/fx/layout_defaults.js

@@ -29,11 +29,17 @@ module.exports = function supplyLayoutDefaults(layoutIn, layoutOut, fullData) {
 
     coerce('hovermode', hovermodeDflt);
 
-    // if only mapbox subplots is present on graph,
+    // if only mapbox or geo subplots is present on graph,
     // reset 'zoom' dragmode to 'pan' until 'zoom' is implemented,
     // so that the correct modebar button is active
-    if(layoutOut._has('mapbox') && layoutOut._basePlotModules.length === 1 &&
-       layoutOut.dragmode === 'zoom') {
+    var hasMapbox = layoutOut._has('mapbox');
+    var hasGeo = layoutOut._has('geo');
+    var len = layoutOut._basePlotModules.length;
+
+    if(layoutOut.dragmode === 'zoom' && (
+        ((hasMapbox || hasGeo) && len === 1) ||
+        (hasMapbox && hasGeo && len === 2)
+    )) {
         layoutOut.dragmode = 'pan';
     }
 };

src/components/modebar/buttons.js

@@ -446,23 +446,24 @@ modeBarButtons.hoverClosestGeo = {
 };
 
 function handleGeo(gd, ev) {
-    var button = ev.currentTarget,
-        attr = button.getAttribute('data-attr'),
-        val = button.getAttribute('data-val') || true,
-        fullLayout = gd._fullLayout,
-        geoIds = Plots.getSubplotIds(fullLayout, 'geo');
+    var button = ev.currentTarget;
+    var attr = button.getAttribute('data-attr');
+    var val = button.getAttribute('data-val') || true;
+    var fullLayout = gd._fullLayout;
+    var geoIds = Plots.getSubplotIds(fullLayout, 'geo');
 
     for(var i = 0; i < geoIds.length; i++) {
-        var geo = fullLayout[geoIds[i]]._subplot;
+        var id = geoIds[i];
+        var geoLayout = fullLayout[id];
 
         if(attr === 'zoom') {
-            var scale = geo.projection.scale();
+            var scale = geoLayout.projection.scale;
             var newScale = (val === 'in') ? 2 * scale : 0.5 * scale;
-            geo.projection.scale(newScale);
-            geo.zoom.scale(newScale);
-            geo.render();
+
+            Plotly.relayout(gd, id + '.projection.scale', newScale);
+        } else if(attr === 'reset') {
+            resetView(gd, 'geo');
         }
-        else if(attr === 'reset') geo.zoomReset();
     }
 }
 
@@ -535,8 +536,8 @@ modeBarButtons.resetViews = {
         button.setAttribute('data-attr', 'resetLastSave');
         handleCamera3d(gd, ev);
 
-        // N.B handleCamera3d also triggers a replot for
-        // geo subplots.
+        resetView(gd, 'geo');
+        resetView(gd, 'mapbox');
     }
 };
 
@@ -581,22 +582,26 @@ modeBarButtons.resetViewMapbox = {
     attr: 'reset',
     icon: Icons.home,
     click: function(gd) {
-        var fullLayout = gd._fullLayout;
-        var subplotIds = Plots.getSubplotIds(fullLayout, 'mapbox');
-        var aObj = {};
-
-        for(var i = 0; i < subplotIds.length; i++) {
-            var id = subplotIds[i];
-            var subplotObj = fullLayout[id]._subplot;
-            var viewInitial = subplotObj.viewInitial;
-            var viewKeys = Object.keys(viewInitial);
-
-            for(var j = 0; j < viewKeys.length; j++) {
-                var key = viewKeys[j];
-                aObj[id + '.' + key] = viewInitial[key];
-            }
-        }
-
-        Plotly.relayout(gd, aObj);
+        resetView(gd, 'mapbox');
     }
 };
+
+function resetView(gd, subplotType) {
+    var fullLayout = gd._fullLayout;
+    var subplotIds = Plots.getSubplotIds(fullLayout, subplotType);
+    var aObj = {};
+
+    for(var i = 0; i < subplotIds.length; i++) {
+        var id = subplotIds[i];
+        var subplotObj = fullLayout[id]._subplot;
+        var viewInitial = subplotObj.viewInitial;
+        var viewKeys = Object.keys(viewInitial);
+
+        for(var j = 0; j < viewKeys.length; j++) {
+            var key = viewKeys[j];
+            aObj[id + '.' + key] = viewInitial[key];
+        }
+    }
+
+    Plotly.relayout(gd, aObj);
+}

src/components/modebar/manage.js

@@ -71,16 +71,16 @@ module.exports = function manageModeBar(gd) {
 
 // logic behind which buttons are displayed by default
 function getButtonGroups(gd, buttonsToRemove, buttonsToAdd) {
-    var fullLayout = gd._fullLayout,
-        fullData = gd._fullData;
+    var fullLayout = gd._fullLayout;
+    var fullData = gd._fullData;
 
-    var hasCartesian = fullLayout._has('cartesian'),
-        hasGL3D = fullLayout._has('gl3d'),
-        hasGeo = fullLayout._has('geo'),
-        hasPie = fullLayout._has('pie'),
-        hasGL2D = fullLayout._has('gl2d'),
-        hasTernary = fullLayout._has('ternary'),
-        hasMapbox = fullLayout._has('mapbox');
+    var hasCartesian = fullLayout._has('cartesian');
+    var hasGL3D = fullLayout._has('gl3d');
+    var hasGeo = fullLayout._has('geo');
+    var hasPie = fullLayout._has('pie');
+    var hasGL2D = fullLayout._has('gl2d');
+    var hasTernary = fullLayout._has('ternary');
+    var hasMapbox = fullLayout._has('mapbox');
 
     var groups = [];
 
@@ -112,18 +112,13 @@ function getButtonGroups(gd, buttonsToRemove, buttonsToAdd) {
         addGroup(['hoverClosest3d']);
     }
 
-    if(hasGeo) {
-        addGroup(['zoomInGeo', 'zoomOutGeo', 'resetGeo']);
-        addGroup(['hoverClosestGeo']);
-    }
-
     var allAxesFixed = areAllAxesFixed(fullLayout),
         dragModeGroup = [];
 
     if(((hasCartesian || hasGL2D) && !allAxesFixed) || hasTernary) {
         dragModeGroup = ['zoom2d', 'pan2d'];
     }
-    if(hasMapbox) {
+    if(hasMapbox || hasGeo) {
         dragModeGroup = ['pan2d'];
     }
     if(isSelectable(fullData)) {
@@ -138,18 +133,17 @@ function getButtonGroups(gd, buttonsToRemove, buttonsToAdd) {
 
     if(hasCartesian && hasPie) {
         addGroup(['toggleHover']);
-    }
-    else if(hasGL2D) {
+    } else if(hasGL2D) {
         addGroup(['hoverClosestGl2d']);
-    }
-    else if(hasCartesian) {
+    } else if(hasCartesian) {
         addGroup(['toggleSpikelines', 'hoverClosestCartesian', 'hoverCompareCartesian']);
-    }
-    else if(hasPie) {
+    } else if(hasPie) {
         addGroup(['hoverClosestPie']);
-    }
-    else if(hasMapbox) {
+    } else if(hasMapbox) {
         addGroup(['resetViewMapbox', 'toggleHover']);
+    } else if(hasGeo) {
+        addGroup(['zoomInGeo', 'zoomOutGeo', 'resetGeo']);
+        addGroup(['hoverClosestGeo']);
     }
 
     return appendButtonsToGroups(groups, buttonsToAdd);

src/lib/array_to_calc_item.js

@@ -54,70 +54,50 @@ exports.calcTraceToLineCoords = function(calcTrace) {
  *
  * @param {array} coords
  *  results form calcTraceToLineCoords
- * @param {object} trace
- *  (optional) full trace object to be added on to output
- *
  * @return {object} out
  *  GeoJSON object
  *
  */
-exports.makeLine = function(coords, trace) {
-    var out = {};
-
+exports.makeLine = function(coords) {
     if(coords.length === 1) {
-        out = {
+        return {
             type: 'LineString',
             coordinates: coords[0]
         };
-    }
-    else {
-        out = {
+    } else {
+        return {
             type: 'MultiLineString',
             coordinates: coords
         };
     }
-
-    if(trace) out.trace = trace;
-
-    return out;
 };
 
 /**
  * Make polygon ('Polygon' or 'MultiPolygon') GeoJSON
  *
  * @param {array} coords
  *  results form calcTraceToLineCoords
- * @param {object} trace
- *  (optional) full trace object to be added on to output
- *
  * @return {object} out
  *  GeoJSON object
  */
-exports.makePolygon = function(coords, trace) {
-    var out = {};
-
+exports.makePolygon = function(coords) {
     if(coords.length === 1) {
-        out = {
+        return {
             type: 'Polygon',
             coordinates: coords
         };
-    }
-    else {
+    } else {
         var _coords = new Array(coords.length);
 
         for(var i = 0; i < coords.length; i++) {
             _coords[i] = [coords[i]];
         }
 
-        out = {
+        return {
             type: 'MultiPolygon',
             coordinates: _coords
         };
     }
-
-    if(trace) out.trace = trace;
-
-    return out;
 };
 
 /**

src/lib/geojson_utils.js

@@ -2748,8 +2748,8 @@ Plotly.purge = function purge(gd) {
 // makePlotFramework: Create the plot container and axes
 // -------------------------------------------------------
 function makePlotFramework(gd) {
-    var gd3 = d3.select(gd),
-        fullLayout = gd._fullLayout;
+    var gd3 = d3.select(gd);
+    var fullLayout = gd._fullLayout;
 
     // Plot container
     fullLayout._container = gd3.selectAll('.plot-container').data([0]);
@@ -2795,9 +2795,15 @@ function makePlotFramework(gd) {
     fullLayout._defs = fullLayout._paper.append('defs')
         .attr('id', 'defs-' + fullLayout._uid);
 
+    fullLayout._clips = fullLayout._defs.append('g')
+        .classed('clips', true);
+
     fullLayout._topdefs = fullLayout._toppaper.append('defs')
         .attr('id', 'topdefs-' + fullLayout._uid);
 
+    fullLayout._topclips = fullLayout._topdefs.append('g')
+        .classed('clips', true);
+
     fullLayout._bgLayer = fullLayout._paper.append('g')
         .classed('bglayer', true);
 

src/plot_api/plot_api.js

@@ -151,8 +151,7 @@ exports.lsInner = function(gd) {
         // Clip so that data only shows up on the plot area.
         plotinfo.clipId = 'clip' + fullLayout._uid + subplot + 'plot';
 
-        var plotClip = fullLayout._defs.selectAll('g.clips')
-            .selectAll('#' + plotinfo.clipId)
+        var plotClip = fullLayout._clips.selectAll('#' + plotinfo.clipId)
             .data([0]);
 
         plotClip.enter().append('clipPath')
@@ -490,28 +489,15 @@ exports.doTicksRelayout = function(gd) {
 
 exports.doModeBar = function(gd) {
     var fullLayout = gd._fullLayout;
-    var subplotIds, subplotObj, i;
 
     ModeBar.manage(gd);
     initInteractions(gd);
 
-    subplotIds = Plots.getSubplotIds(fullLayout, 'gl3d');
-    for(i = 0; i < subplotIds.length; i++) {
-        subplotObj = fullLayout[subplotIds[i]]._scene;
-        subplotObj.updateFx(fullLayout.dragmode, fullLayout.hovermode);
+    for(var i = 0; i < fullLayout._basePlotModules.length; i++) {
+        var updateFx = fullLayout._basePlotModules[i].updateFx;
+        if(updateFx) updateFx(fullLayout);
     }
 
-    subplotIds = Plots.getSubplotIds(fullLayout, 'gl2d');
-    for(i = 0; i < subplotIds.length; i++) {
-        subplotObj = fullLayout._plots[subplotIds[i]]._scene2d;
-        subplotObj.updateFx(fullLayout.dragmode);
-    }
-
-    subplotIds = Plots.getSubplotIds(fullLayout, 'mapbox');
-    for(i = 0; i < subplotIds.length; i++) {
-        subplotObj = fullLayout[subplotIds[i]]._subplot;
-        subplotObj.updateFx(fullLayout);
-    }
 
     return Plots.previousPromises(gd);
 };