fix(core): recover globe pointer zoom anchors

Author: charlieforward9

modules/core/src/controllers/globe-controller.ts

@@ -175,7 +175,7 @@ class GlobeState extends MapState {
   }): MapState {
     const state = this.getState();
     const {startZoom} = state;
-    let {startZoomLngLat} = state;
+    const initialStartZoomLngLat = state.startZoomLngLat as [number, number] | undefined;
     const hasZoomStart = startZoom !== null && startZoom !== undefined;
     const startZoomValue = hasZoomStart ? startZoom : this.getViewportProps().zoom;
     const zoom = this._constrainZoom(startZoomValue + Math.log2(scale));
@@ -184,9 +184,10 @@ class GlobeState extends MapState {
       return this._getUpdatedState({zoom});
     }
 
-    if (!startZoomLngLat && !hasZoomStart) {
-      startZoomLngLat = this._unprojectZoomAnchor(startPos) || this._unprojectZoomAnchor(pos);
-    }
+    const startZoomLngLat =
+      initialStartZoomLngLat ??
+      this._unprojectZoomAnchor(startPos) ??
+      this._unprojectZoomAnchor(pos);
 
     if (!startZoomLngLat) {
       return this._getUpdatedState({zoom});
@@ -195,6 +196,7 @@ class GlobeState extends MapState {
     const zoomedViewport = this.makeViewport({...this.getViewportProps(), zoom});
     return this._getUpdatedState({
       zoom,
+      ...(hasZoomStart && !initialStartZoomLngLat ? {startZoomLngLat} : {}),
       ...this._panByZoomAnchor(zoomedViewport, startZoomLngLat, pos)
     });
   }

test/modules/core/controllers/view-states.spec.ts

@@ -8,6 +8,7 @@ import {
   OrbitController,
   FirstPersonController,
   _GlobeController as GlobeController,
+  _GlobeViewport as GlobeViewport,
   OrbitViewport,
   OrthographicController,
   Viewport
@@ -173,6 +174,36 @@ test('GlobeViewState', () => {
   expect(viewportProps.zoom > 12, 'small bounds#zoom is adjusted').toBeTruthy();
 });
 
+test('GlobeViewState recovers pointer anchored zoom when zoomStart misses the globe', () => {
+  const GlobeViewState = new GlobeController({} as any).ControllerState;
+  const makeViewport = (props: any) => new GlobeViewport(props);
+
+  const pos: [number, number] = [500, 300];
+  const missedStartPos: [number, number] = [0, 0];
+  const startProps = {
+    width: 800,
+    height: 600,
+    longitude: 0,
+    latitude: 0,
+    zoom: 2,
+    zoomAround: 'pointer',
+    makeViewport
+  };
+  const anchor = makeViewport(startProps).unproject(pos);
+  const zoomed = new GlobeViewState(startProps)
+    .zoomStart({pos: missedStartPos})
+    .zoom({pos, scale: 1.25})
+    .getViewportProps();
+  const anchorPosition = makeViewport(zoomed).project(anchor);
+
+  expect(
+    makeViewport(startProps).isPointOnGlobe(missedStartPos),
+    'test starts outside the globe surface'
+  ).toBe(false);
+  expect(anchorPosition[0], 'recovered pointer anchor keeps cursor x fixed').toBeCloseTo(pos[0]);
+  expect(anchorPosition[1], 'recovered pointer anchor keeps cursor y fixed').toBeCloseTo(pos[1]);
+});
+
 test('OrbitViewState', () => {
   const OrbitViewState = new OrbitController({} as any).ControllerState;
   const makeViewport = (props: any) => new OrbitViewport(props);