fix: Center selected entity correctly based on whether the drawer is …

…open
mbta · Nov 20, 2023 · c8f1df8 · c8f1df8
1 parent def5364
commit c8f1df8
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 21 deletions.
diff --git a/assets/src/components/map/follower.tsx b/assets/src/components/map/follower.tsx
@@ -21,18 +21,24 @@ import { equalByElements } from "../../helpers/array"
 import { RecenterControl } from "./controls/recenterControl"
 import { defaultCenter } from "../map"
 
-export type UpdateMapFromPointsFn = (map: LeafletMap, points: LatLng[]) => void
+export type UpdateMapFromPointsFn = (
+  map: LeafletMap,
+  points: LatLng[],
+  shouldOffset: boolean
+) => void
 
 export interface FollowerProps {
   positions: LatLng[]
   onUpdate?: UpdateMapFromPointsFn
+  shouldOffset?: boolean
 }
 
 export const Follower = ({
   positions,
   onUpdate,
   isAnimatingFollowUpdate,
   shouldFollow = true,
+  shouldOffset = true,
 }: FollowerProps & InteractiveFollowState) => {
   const map = useMap()
   const [currentLatLngs, setCurrentLatLngs] = useState<LatLng[]>(positions)
@@ -48,9 +54,16 @@ export const Follower = ({
       if (isAnimatingFollowUpdate !== undefined) {
         isAnimatingFollowUpdate.current = true
       }
-      onUpdate?.(map, currentLatLngs)
+      onUpdate?.(map, currentLatLngs, shouldOffset)
     }
-  }, [map, shouldFollow, isAnimatingFollowUpdate, currentLatLngs, onUpdate])
+  }, [
+    map,
+    shouldFollow,
+    shouldOffset,
+    isAnimatingFollowUpdate,
+    currentLatLngs,
+    onUpdate,
+  ])
 
   return null
 }
@@ -61,7 +74,7 @@ export interface InteractiveFollowState {
   shouldFollow: boolean
   setShouldFollow: Dispatch<SetStateAction<boolean>>
 }
-// Gathers all state needed for the Follower to be able to display it's state
+// Gathers all state needed for the Follower to be able to display its state
 // as well as support turning off when interrupted
 
 export const useInteractiveFollowerState = (
@@ -136,16 +149,18 @@ export const StatefulInteractiveFollower = (props: FollowerProps) => {
 
 export const RecenterControlWithInterruptibleFollower = (
   props: InterruptibleFollowerProps
-) => (
-  <>
-    <InterruptibleFollower {...props} />
-    <RecenterControl
-      position="topright"
-      active={props.shouldFollow}
-      onActivate={() => props.setShouldFollow(true)}
-    />
-  </>
-)
+) => {
+  return (
+    <>
+      <InterruptibleFollower {...props} />
+      <RecenterControl
+        position="topright"
+        active={props.shouldFollow}
+        onActivate={() => props.setShouldFollow(true)}
+      />
+    </>
+  )
+}
 // #endregion Follower Variants
 
 // #region Follower Update Functions
@@ -181,7 +196,7 @@ export const usePickerContainerFollowerFn = () => {
 
 export const drawerOffsetAutoCenter =
   (useCurrentZoom: boolean): UpdateMapFromPointsFn =>
-  (map, points) => {
+  (map, points, shouldOffset) => {
     if (points.length === 0) {
       // If there are no points, blink to default center
       map.setView(defaultCenter, 13, { animate: false })
@@ -200,7 +215,7 @@ export const drawerOffsetAutoCenter =
     // In this case, we get the top left of the inner bounds by padding the left
     // with the distance from the right side of the VPC to the left side of the
     // map container
-    const topLeft = new Point(445, 0)
+    const topLeft = new Point(shouldOffset ? 445 : 0, 0)
 
     if (points.length === 1) {
       const currentZoom = map.getZoom()

diff --git a/assets/src/components/mapPage.tsx b/assets/src/components/mapPage.tsx
@@ -340,6 +340,7 @@ const MapPage = (): ReactElement<HTMLDivElement> => {
                 setFollowerShouldSetZoomLevel(false)
               })
             }
+            shouldOffset={searchOpen}
           />
         </div>
       </div>

diff --git a/assets/src/components/mapPage/mapDisplay.tsx b/assets/src/components/mapPage/mapDisplay.tsx
@@ -236,13 +236,15 @@ const SelectedVehicleDataLayers = ({
   stops,
   useCurrentZoom,
   onInterruptFollower,
+  shouldOffset,
 }: {
   vehicleOrGhost: Vehicle | Ghost | null
   routePatterns: ByRoutePatternId<RoutePattern> | null
   selectVehicle: (vehicleOrGhost: Vehicle | Ghost) => void
   stops: Stop[]
   useCurrentZoom: boolean
   onInterruptFollower?: () => void
+  shouldOffset: boolean
 }) => {
   const position =
     (selectedVehicleOrGhost &&
@@ -328,6 +330,7 @@ const SelectedVehicleDataLayers = ({
           onInterruptFollower?.()
           followerState.setShouldFollow(...args)
         }}
+        shouldOffset={shouldOffset}
       />
     </>
   )
@@ -360,7 +363,6 @@ const SelectedRouteDataLayers = ({
   const routePatternStopIdSet = new Set(
     (selectedRoutePattern?.shape?.stops || []).map((s) => s.id)
   )
-
   return (
     <>
       {selectedRoutePattern && (
@@ -412,13 +414,15 @@ const SelectionLayers = ({
   initializeRouteFollowerEnabled,
   vehicleUseCurrentZoom,
   onInterruptVehicleFollower,
+  shouldOffset,
 }: {
   selectedEntity: SelectedEntity | null
   selectVehicle: (vehicleOrGhost: Vehicle | Ghost) => void
   fetchedSelectedLocation: LocationSearchResult | null
   initializeRouteFollowerEnabled: boolean
   vehicleUseCurrentZoom: boolean
   onInterruptVehicleFollower?: () => void
+  shouldOffset: boolean
 }) => {
   const liveSelectedEntity: LiveSelectedEntity | null = useLiveSelectedEntity(
     selectedEntity,
@@ -443,6 +447,7 @@ const SelectionLayers = ({
           stops={stops}
           useCurrentZoom={vehicleUseCurrentZoom}
           onInterruptFollower={onInterruptVehicleFollower}
+          shouldOffset={shouldOffset}
         />
       )
     case SelectedEntityType.RoutePattern:
@@ -571,6 +576,7 @@ const DataLayers = ({
   initializeRouteFollowerEnabled,
   vehicleUseCurrentZoom,
   onInterruptVehicleFollower,
+  shouldOffset,
 }: {
   selectedEntity: SelectedEntity | null
   setSelection: (selectedEntity: SelectedEntity | null) => void
@@ -579,6 +585,7 @@ const DataLayers = ({
   initializeRouteFollowerEnabled: boolean
   vehicleUseCurrentZoom: boolean
   onInterruptVehicleFollower?: () => void
+  shouldOffset: boolean
 }): JSX.Element => {
   const streetViewActive = useContext(StreetViewModeEnabledContext)
 
@@ -622,6 +629,7 @@ const DataLayers = ({
         initializeRouteFollowerEnabled={initializeRouteFollowerEnabled}
         vehicleUseCurrentZoom={vehicleUseCurrentZoom}
         onInterruptVehicleFollower={onInterruptVehicleFollower}
+        shouldOffset={shouldOffset}
       />
       <PullbackVehiclesLayer
         pullbackLayerEnabled={pullbackLayerEnabled}
@@ -640,6 +648,7 @@ const MapDisplay = ({
   streetViewInitiallyEnabled = false,
   initializeRouteFollowerEnabled = true,
   vehicleUseCurrentZoom = true,
+  shouldOffset = true,
 }: {
   selectedEntity: SelectedEntity | null
   setSelection: (selectedEntity: SelectedEntity | null) => void
@@ -648,6 +657,7 @@ const MapDisplay = ({
   initializeRouteFollowerEnabled?: boolean
   vehicleUseCurrentZoom?: boolean
   onInterruptVehicleFollower?: () => void
+  shouldOffset?: boolean
 }) => {
   const [
     {
@@ -671,10 +681,12 @@ const MapDisplay = ({
       tileType={tileType}
     >
       <MapSafeAreaContext.Provider
-        value={{
-          paddingTopLeft: [445, 54],
-          paddingBottomRight: [50, 20],
-        }}
+        value={
+          {
+            // paddingTopLeft: [445, 54],
+            // paddingBottomRight: [50, 20],
+          }
+        }
       >
         <DataLayers
           setSelection={setSelection}
@@ -684,6 +696,7 @@ const MapDisplay = ({
           initializeRouteFollowerEnabled={initializeRouteFollowerEnabled}
           vehicleUseCurrentZoom={vehicleUseCurrentZoom}
           onInterruptVehicleFollower={onInterruptVehicleFollower}
+          shouldOffset={shouldOffset}
         />
         <LayersControlState>
           {(open, setOpen) => (