From c8f1df8fc75fb4904b02db51765dbad8dcfd39d7 Mon Sep 17 00:00:00 2001 From: Josh Larson Date: Mon, 20 Nov 2023 11:08:51 -0500 Subject: [PATCH] fix: Center selected entity correctly based on whether the drawer is open --- assets/src/components/map/follower.tsx | 47 +++++++++++++------- assets/src/components/mapPage.tsx | 1 + assets/src/components/mapPage/mapDisplay.tsx | 23 +++++++--- 3 files changed, 50 insertions(+), 21 deletions(-) diff --git a/assets/src/components/map/follower.tsx b/assets/src/components/map/follower.tsx index 084f3616ad..769471d140 100644 --- a/assets/src/components/map/follower.tsx +++ b/assets/src/components/map/follower.tsx @@ -21,11 +21,16 @@ 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 = ({ @@ -33,6 +38,7 @@ export const Follower = ({ onUpdate, isAnimatingFollowUpdate, shouldFollow = true, + shouldOffset = true, }: FollowerProps & InteractiveFollowState) => { const map = useMap() const [currentLatLngs, setCurrentLatLngs] = useState(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> } -// 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 -) => ( - <> - - props.setShouldFollow(true)} - /> - -) +) => { + return ( + <> + + 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 index 23af43b7af..8789608118 100644 --- a/assets/src/components/mapPage.tsx +++ b/assets/src/components/mapPage.tsx @@ -340,6 +340,7 @@ const MapPage = (): ReactElement => { setFollowerShouldSetZoomLevel(false) }) } + shouldOffset={searchOpen} /> diff --git a/assets/src/components/mapPage/mapDisplay.tsx b/assets/src/components/mapPage/mapDisplay.tsx index f1b8b6d73f..7b8b19c704 100644 --- a/assets/src/components/mapPage/mapDisplay.tsx +++ b/assets/src/components/mapPage/mapDisplay.tsx @@ -236,6 +236,7 @@ const SelectedVehicleDataLayers = ({ stops, useCurrentZoom, onInterruptFollower, + shouldOffset, }: { vehicleOrGhost: Vehicle | Ghost | null routePatterns: ByRoutePatternId | null @@ -243,6 +244,7 @@ const SelectedVehicleDataLayers = ({ 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,6 +414,7 @@ const SelectionLayers = ({ initializeRouteFollowerEnabled, vehicleUseCurrentZoom, onInterruptVehicleFollower, + shouldOffset, }: { selectedEntity: SelectedEntity | null selectVehicle: (vehicleOrGhost: Vehicle | Ghost) => void @@ -419,6 +422,7 @@ const SelectionLayers = ({ 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} /> void @@ -648,6 +657,7 @@ const MapDisplay = ({ initializeRouteFollowerEnabled?: boolean vehicleUseCurrentZoom?: boolean onInterruptVehicleFollower?: () => void + shouldOffset?: boolean }) => { const [ { @@ -671,10 +681,12 @@ const MapDisplay = ({ tileType={tileType} > {(open, setOpen) => (