DBC22-6116: fixed anchored centering on various cases

Author: ray-oxd

src/frontend/src/Components/map/Map.js

@@ -204,7 +204,7 @@ export default function DriveBCMap(props) {
   const [clickedFeature, setClickedFeature] = useState();
   const [staleLinkMessage, setStaleLinkMessage] = useState();
   const clickedFeatureRef = useRef();
-  const updateClickedFeature = feature => {
+  const updateClickedFeature = (feature, center=true) => {
     // Remove highlight from feature on click
     if (feature && feature instanceof Feature && feature.get('highlight')) {
       // Remove highlight from feature
@@ -218,7 +218,10 @@ export default function DriveBCMap(props) {
 
     clickedFeatureRef.current = feature;
     setClickedFeature(feature);
-    updatePosition(feature);
+
+    if (center) {
+      updatePosition(feature);
+    }
   };
 
   const handleSetShowRouteObjs = (value) => {
@@ -373,11 +376,24 @@ export default function DriveBCMap(props) {
         geometry = feature.getProperties().altFeature.getGeometry(); // use the point feature's geometry
       }
 
-      if (mousePointXClicked < 390) {
+      // Center if panel from bottom or clicked within 390px from left of the screen
+      if (mousePointXClicked < 390 || smallScreen) {
         const zoom = mapView.current.getZoom();
         const coords = geometry.flatCoordinates;
-        if (smallScreen) {
-          setZoomPanAnchored(mapRef, mapView, zoom, coords);
+        const mapWidth = mapRef.current?.getSize()?.[0] ?? 0;
+
+        // Use anchored pan if panel from bottom or screen smaller than 1000px
+        const shouldUseAnchoredPan = mapWidth < 1000 || smallScreen;
+
+        // Center on top half of the screen, if panel open from bottom
+        const anchorYFraction = !viewportLargeScreen || isCamDetail ? 0.25 : 0.5;
+
+        // Center on right side of screen minus 390px panel, if panel open from left
+        const anchorXFraction = anchorYFraction !== 0.25 ? (((mapWidth-390)/2) + 390) / mapWidth : 0.5;
+
+        if (shouldUseAnchoredPan) {
+          setZoomPanAnchored(mapRef, mapView, zoom, coords, anchorXFraction, anchorYFraction);
+
         } else {
           setZoomPan(mapView, zoom, coords);
         }

src/frontend/src/Components/map/handlers/click.js

@@ -233,14 +233,16 @@ const camClickHandler = (
   feature.set('clicked', true, true);
   feature.set('unread', false);
 
-  updateClickedFeature(feature);
-
   if (isCamDetail) {
+    // Do not auto center on feature on cam details page
+    updateClickedFeature(feature, false);
+
     if (feature.get('focusCamera')) {
       const zoom = feature.get('zoom');
       const pan = feature.get('pan');
 
       const nearbyCount = getVisibleNearbyObjectsCount(mapContext, feature);
+
       setZoomPan(
         mapView,
         zoom ? zoom : getDefaultZoom(nearbyCount),
@@ -255,6 +257,9 @@ const camClickHandler = (
     }
 
     updateReferenceFeature(feature);
+
+  } else {
+    updateClickedFeature(feature);
   }
 };
 

src/frontend/src/Components/map/helpers/map.js

@@ -65,9 +65,15 @@ export const setZoomPan = (mapView, zoom, panCoords) => {
   mapView.current.animate(args);
 };
 
-// Same as setZoomPan but places `coordinate` at a pixel anchor (default: horizontal center,
-// upper quarter) so the point stays visible above a bottom sheet on mobile.
-export const setZoomPanAnchored = (mapRef, mapView, zoom, coordinate, anchorYFraction = 0.25) => {
+// Used when we want to center on somewhere that's not the actual center
+export const setZoomPanAnchored = (
+  mapRef,
+  mapView,
+  zoom,
+  coordinate,
+  anchorXFraction,
+  anchorYFraction
+) => {
   if (!mapView.current || !mapRef.current) {
     return;
   }
@@ -79,7 +85,7 @@ export const setZoomPanAnchored = (mapRef, mapView, zoom, coordinate, anchorYFra
   }
 
   const view = mapView.current;
-  const position = [size[0] / 2, size[1] * anchorYFraction];
+  const position = [size[0] * anchorXFraction, size[1] * anchorYFraction];
   const prevCenter = view.getCenter().slice();
   view.centerOn(coordinate, size, position);
   const targetCenter = view.getCenter().slice();