imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

LLS: fix jumpy maximised map (#8387)

Browse source 
* 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>
This commit is contained in:
Kerry 2022-04-21 18:56:11 +02:00 • committed by GitHub
parent 86419b1925
commit 399ac618c7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 46 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/components/views/beacon/BeaconViewDialog.tsx
View file

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import React, { useState } from 'react';
import React, { useState, useRef } from 'react';
import { MatrixClient } from 'matrix-js-sdk/src/client';
import {
Beacon,
@ -56,6 +56,17 @@ const getBoundsCenter = (bounds: Bounds): string | undefined => {
});
};
const useInitialMapPosition = (liveBeacons: Beacon[], focusBeacon?: Beacon): {
bounds?: Bounds; centerGeoUri: string;
} => {
const bounds = useRef<Bounds | undefined>(getBeaconBounds(liveBeacons));
const centerGeoUri = useRef<string>(
focusBeacon?.latestLocationState?.uri ||
getBoundsCenter(bounds.current),
);
return { bounds: bounds.current, centerGeoUri: centerGeoUri.current };
};
/**
* Dialog to view live beacons maximised
*/
@ -69,8 +80,7 @@ const BeaconViewDialog: React.FC<IProps> = ({
const [isSidebarOpen, setSidebarOpen] = useState(false);
const bounds = getBeaconBounds(liveBeacons);
const centerGeoUri = focusBeacon?.latestLocationState?.uri || getBoundsCenter(bounds);
const { bounds, centerGeoUri } = useInitialMapPosition(liveBeacons, focusBeacon);
return (
<BaseDialog
@ -79,7 +89,7 @@ const BeaconViewDialog: React.FC<IProps> = ({
fixedWidth={false}
>
<MatrixClientContext.Provider value={matrixClient}>
{ !!bounds ? <Map
{ !!liveBeacons?.length ? <Map
id='mx_BeaconViewDialog'
bounds={bounds}
centerGeoUri={centerGeoUri}

2
src/components/views/location/Map.tsx
View file

@ -64,7 +64,7 @@ const useMapWithStyle = ({ id, centerGeoUri, onError, interactive, bounds }) =>
[bounds.west, bounds.south],
[bounds.east, bounds.north],
);
map.fitBounds(lngLatBounds, { padding: 100 });
map.fitBounds(lngLatBounds, { padding: 100, maxZoom: 15 });
} catch (error) {
logger.error('Invalid map bounds', error);
}