sync pan/scroll interactions into user/full layout

- and emit mocked `plotly_relayout` event on mouseup - I chose to not call Plotly.relayout directly for performance reasons.
plotly · etpinard · Sep 28, 2017 · Sep 21, 2017 · Sep 21, 2017 · Sep 21, 2017
commit 9faa1b17bf4c0340f9a4fc0d3ae3bf8052397bd6
diff --git a/src/plots/geo/zoom.js b/src/plots/geo/zoom.js
@@ -10,41 +10,66 @@
 'use strict';
 
 var d3 = require('d3');
+var Lib = require('../../lib');
 
-var radians = Math.PI / 180,
-    degrees = 180 / Math.PI,
-    zoomstartStyle = { cursor: 'pointer' },
-    zoomendStyle = { cursor: 'auto' };
-
+var radians = Math.PI / 180;
+var degrees = 180 / Math.PI;
+var zoomstartStyle = {cursor: 'pointer'};
+var zoomendStyle = {cursor: 'auto'};
 
 function createGeoZoom(geo, geoLayout) {
+    var projection = geo.projection;
     var zoomConstructor;
 
-    if(geoLayout._isScoped) zoomConstructor = zoomScoped;
-    else if(geoLayout._clipAngle) zoomConstructor = zoomClipped;
-    else zoomConstructor = zoomNonClipped;
+    if(geoLayout._isScoped) {
+        zoomConstructor = zoomScoped;
+    } else if(geoLayout._isClipped) {
+        zoomConstructor = zoomClipped;
+    } else {
+        zoomConstructor = zoomNonClipped;
+    }
 
     // TODO add a conic-specific zoom
 
-    return zoomConstructor(geo, geoLayout.projection);
+    return zoomConstructor(geo, projection);
 }
 
 module.exports = createGeoZoom;
 
 // common to all zoom types
-function initZoom(projection, projLayout) {
-    var fullScale = projLayout._fullScale;
-
+function initZoom(geo, projection) {
     return d3.behavior.zoom()
         .translate(projection.translate())
-        .scale(projection.scale())
-        .scaleExtent([0.5 * fullScale, 100 * fullScale]);
+        .scale(projection.scale());
+}
+
+// sync zoom updates with user & full layout
+function sync(geo, projection, cb) {
+    var id = geo.id;
+    var gd = geo.graphDiv;
+    var userOpts = gd.layout[id];
+    var fullOpts = gd._fullLayout[id];
+
+    var eventData = {};
+
+    function set(propStr, val) {
+        var fullNp = Lib.nestedProperty(fullOpts, propStr);
+
+        if(fullNp.get() !== val) {
+            fullNp.set(val);
+            Lib.nestedProperty(userOpts, propStr).set(val);
+            eventData[id + '.' + propStr] = val;
+        }
+    }
+
+    cb(set);
+    set('projection.scale', projection.scale() / geo.fitScale);
+    gd.emit('plotly_relayout', eventData);
 }
 
 // zoom for scoped projections
-function zoomScoped(geo, projLayout) {
-    var projection = geo.projection,
-        zoom = initZoom(projection, projLayout);
+function zoomScoped(geo, projection) {
+    var zoom = initZoom(geo, projection);
 
     function handleZoomstart() {
         d3.select(this).style(zoomstartStyle);
@@ -54,12 +79,19 @@ function zoomScoped(geo, projLayout) {
         projection
             .scale(d3.event.scale)
             .translate(d3.event.translate);
-
         geo.render();
     }
 
+    function syncCb(set) {
+        var center = projection.invert(geo.midPt);
+
+        set('center.lon', center[0]);
+        set('center.lat', center[1]);
+    }
+
     function handleZoomend() {
         d3.select(this).style(zoomendStyle);
+        sync(geo, projection, syncCb);
     }
 
     zoom
@@ -71,9 +103,8 @@ function zoomScoped(geo, projLayout) {
 }
 
 // zoom for non-clipped projections
-function zoomNonClipped(geo, projLayout) {
-    var projection = geo.projection,
-        zoom = initZoom(projection, projLayout);
+function zoomNonClipped(geo, projection) {
+    var zoom = initZoom(geo, projection);
 
     var INSIDETOLORANCEPXS = 2;
 
@@ -108,7 +139,6 @@ function zoomNonClipped(geo, projLayout) {
         }
 
         projection.scale(d3.event.scale);
-
         projection.translate([translate0[0], d3.event.translate[1]]);
 
         if(!zoomPoint) {
@@ -127,10 +157,16 @@ function zoomNonClipped(geo, projLayout) {
 
     function handleZoomend() {
         d3.select(this).style(zoomendStyle);
+        sync(geo, projection, syncCb);
+    }
+
+    function syncCb(set) {
+        var rotate = projection.rotate();
+        var center = projection.invert(geo.midPt);
 
-        // or something like
-        // http://www.jasondavies.com/maps/gilbert/
-        // ... a little harder with multiple base layers
+        set('projection.rotation.lon', -rotate[0]);
+        set('center.lon', center[0]);
+        set('center.lat', center[1]);
     }
 
     zoom
@@ -143,10 +179,9 @@ function zoomNonClipped(geo, projLayout) {
 
 // zoom for clipped projections
 // inspired by https://www.jasondavies.com/maps/d3.geo.zoom.js
-function zoomClipped(geo, projLayout) {
-    var projection = geo.projection,
-        view = {r: projection.rotate(), k: projection.scale()},
-        zoom = initZoom(projection, projLayout),
+function zoomClipped(geo, projection) {
+    var view = {r: projection.rotate(), k: projection.scale()},
+        zoom = initZoom(geo, projection),
         event = d3_eventDispatch(zoom, 'zoomstart', 'zoom', 'zoomend'),
         zooming = 0,
         zoomOn = zoom.on;
@@ -179,7 +214,6 @@ function zoomClipped(geo, projLayout) {
             // if not, don't do anything new but scale
             // if it is, then we can assume between will exist below
             // so we don't need the 'bank' function, whatever that is.
-            // TODO: is this right?
             else if(position(projection, mouse1)) {
                 // go back to original projection temporarily
                 // except for scale... that's kind of independent?
@@ -212,6 +246,7 @@ function zoomClipped(geo, projLayout) {
         d3.select(this).style(zoomendStyle);
         zoomOn.call(zoom, 'zoom', null);
         zoomended(event.of(this, arguments));
+        sync(geo, projection, syncCb);
     })
     .on('zoom.redraw', function() {
         geo.render();
@@ -229,6 +264,12 @@ function zoomClipped(geo, projLayout) {
         if(!--zooming) dispatch({type: 'zoomend'});
     }
 
+    function syncCb(set) {
+        var _rotate = projection.rotate();
+        set('projection.rotation.lon', -_rotate[0]);
+        set('projection.rotation.lat', -_rotate[1]);
+    }
+
     return d3.rebind(zoom, event, 'on');
 }