LLS: fix jumpy maximised map (#8387)

* add maxzoom to map fit bounds

Signed-off-by: Kerry Archibald <kerrya@element.io>

* take snapshot of bounds at center on dialog open

Signed-off-by: Kerry Archibald <kerrya@element.io>

test/components/views/beacon/BeaconViewDialog-test.tsx

@@ -24,6 +24,7 @@ import {
     RoomMember,
     getBeaconInfoIdentifier,
 } from 'matrix-js-sdk/src/matrix';
+import maplibregl from 'maplibre-gl';
 
 import BeaconViewDialog from '../../../../src/components/views/beacon/BeaconViewDialog';
 import {
@@ -58,6 +59,8 @@ describe('<BeaconViewDialog />', () => {
         getVisibleRooms: jest.fn().mockReturnValue([]),
     });
 
+    const mockMap = new maplibregl.Map();
+
     // make fresh rooms every time
     // as we update room state
     const setupRoom = (stateEvents: MatrixEvent[] = []): Room => {
@@ -88,6 +91,8 @@ describe('<BeaconViewDialog />', () => {
 
     beforeEach(() => {
         jest.spyOn(OwnBeaconStore.instance, 'getLiveBeaconIds').mockRestore();
+
+        jest.clearAllMocks();
     });
 
     it('renders a map with markers', () => {
@@ -151,6 +156,31 @@ describe('<BeaconViewDialog />', () => {
         expect(component.find('BeaconMarker').length).toEqual(2);
     });
 
+    it('does not update bounds or center on changing beacons', () => {
+        const room = setupRoom([defaultEvent]);
+        const beacon = room.currentState.beacons.get(getBeaconInfoIdentifier(defaultEvent));
+        beacon.addLocations([location1]);
+        const component = getComponent();
+        expect(component.find('BeaconMarker').length).toEqual(1);
+
+        const anotherBeaconEvent = makeBeaconInfoEvent(bobId,
+            roomId,
+            { isLive: true },
+            '$bob-room1-1',
+        );
+
+        act(() => {
+            // emits RoomStateEvent.BeaconLiveness
+            room.currentState.setStateEvents([anotherBeaconEvent]);
+        });
+
+        component.setProps({});
+
+        // two markers now!
+        expect(mockMap.setCenter).toHaveBeenCalledTimes(1);
+        expect(mockMap.fitBounds).toHaveBeenCalledTimes(1);
+    });
+
     it('renders a fallback when no live beacons remain', () => {
         const onFinished = jest.fn();
         const room = setupRoom([defaultEvent]);

test/components/views/location/Map-test.tsx

@@ -125,7 +125,7 @@ describe('<Map />', () => {
             const bounds = { north: 51, south: 50, east: 42, west: 41 };
             getComponent({ bounds });
             expect(mockMap.fitBounds).toHaveBeenCalledWith(new maplibregl.LngLatBounds([bounds.west, bounds.south],
-                [bounds.east, bounds.north]), { padding: 100 });
+                [bounds.east, bounds.north]), { padding: 100, maxZoom: 15 });
         });
 
         it('handles invalid bounds', () => {