Trigger initial zoom event to set minscale

plotly · camdecoster · Oct 5, 2020 · Oct 26, 2020 · Oct 26, 2020 · Oct 26, 2020
commit 29b4316ed781bf93f17a9b34ff529e7acbfd2781
diff --git a/src/plots/geo/geo.js b/src/plots/geo/geo.js
@@ -484,7 +484,11 @@ proto.updateFx = function(fullLayout, geoLayout) {
 
     if(dragMode === 'pan') {
         bgRect.node().onmousedown = null;
-        bgRect.call(createGeoZoom(_this, geoLayout));
+        const zoom = createGeoZoom(_this, geoLayout)
+        bgRect.call(zoom);
+        // TODO: Figure out how to restrict when this transition occurs. Or is it a no-op if nothing has changed?
+        // Trigger transition to handle if minscale attribute isn't 0
+        zoom.event(bgRect.transition())
         bgRect.on('dblclick.zoom', zoomReset);
         if(!gd._context._scrollZoom.geo) {
             bgRect.on('wheel.zoom', null);
@@ -709,14 +713,15 @@ function getProjection(geoLayout) {
 
     projection.precision(constants.precision);
 
-    // https://github.com/d3/d3-zoom/blob/master/README.md#zoom_scaleExtent
-    projection.scaleExtent = function() {
-        var minscale = projLayout.minscale;
-        var maxscale = projLayout.maxscale;
-        if(maxscale === -1) maxscale = Infinity;
-        return [100 * minscale, 100 * maxscale];
+    // https://d3js.org/d3-zoom#zoom_scaleExtent
+    projection.scaleExtent = () => {
+        let { minscale, maxscale } = projLayout;
+        maxscale = maxscale === -1 ? Infinity : maxscale;
+        const max = Math.max(minscale, maxscale);
+        const min = Math.min(minscale, maxscale);
+        return [100 * min, 100 * max];
     };
-
+    
     if(geoLayout._isSatellite) {
         projection.tilt(projLayout.tilt).distance(projLayout.distance);
     }

diff --git a/src/plots/geo/zoom.js b/src/plots/geo/zoom.js
@@ -133,16 +133,21 @@ function zoomNonClipped(geo, projection) {
     function handleZoomstart() {
         d3.select(this).style(zoomstartStyle);
 
-        mouse0 = d3.mouse(this);
+        const { bottom, left, right, top } = this.getBoundingClientRect()
+        mouse0 = d3.event.sourceEvent
+            ? d3.mouse(this)
+            : [(left + right) / 2, (bottom + top) / 2];
         rotate0 = projection.rotate();
         translate0 = projection.translate();
         lastRotate = rotate0;
         zoomPoint = position(mouse0);
     }
 
     function handleZoom() {
-        mouse1 = d3.mouse(this);
-
+        const { bottom, left, right, top } = this.getBoundingClientRect()
+        mouse1 = d3.event.sourceEvent
+            ? d3.mouse(this)
+            : [(left + right) / 2, (bottom + top) / 2];
         if(outside(mouse0)) {
             zoom.scale(projection.scale());
             zoom.translate(projection.translate());
@@ -211,7 +216,10 @@ function zoomClipped(geo, projection) {
     zoom.on('zoomstart', function() {
         d3.select(this).style(zoomstartStyle);
 
-        var mouse0 = d3.mouse(this);
+        const { bottom, left, right, top } = this.getBoundingClientRect()
+        let mouse0 = d3.event.sourceEvent
+            ? d3.mouse(this)
+            : [(left + right) / 2, (bottom + top) / 2];
         var rotate0 = projection.rotate();
         var lastRotate = rotate0;
         var translate0 = projection.translate();
@@ -220,7 +228,10 @@ function zoomClipped(geo, projection) {
         zoomPoint = position(projection, mouse0);
 
         zoomOn.call(zoom, 'zoom', function() {
-            var mouse1 = d3.mouse(this);
+            const { bottom, left, right, top } = this.getBoundingClientRect()
+            let mouse1 = d3.event.sourceEvent
+                ? d3.mouse(this)
+                : [(left + right) / 2, (bottom + top) / 2];
 
             projection.scale(view.k = d3.event.scale);