Stop bouncing when hovering over list item that isn't visible on the map

This commit is contained in:
Timothy Armes
2023-07-20 12:25:17 +02:00
parent 6cd1df40aa
commit 88efe4bbf9
+38 -50
View File
@@ -111,12 +111,6 @@ export default function TournamentMap() {
const groupedTournaments = groupBy(filteredTournaments, (t) => t.groupId); const groupedTournaments = groupBy(filteredTournaments, (t) => t.groupId);
useEffect(() => {
if (hoveredListTournamentId === null) {
stopBouncingMarkers();
}
}, [hoveredListTournamentId]);
const center: LatLngLiteral = { lat: 47.0844, lng: 2.3964 }; const center: LatLngLiteral = { lat: 47.0844, lng: 2.3964 };
const onScrollToTable = () => { const onScrollToTable = () => {
@@ -129,51 +123,53 @@ export default function TournamentMap() {
const tournament = filteredTournaments.find( const tournament = filteredTournaments.find(
(t) => t.id === hoveredListTournamentId, (t) => t.id === hoveredListTournamentId,
); );
if (!tournament) return false;
const markerRef = markerRefs.current[tournament.groupId]; if (tournament) {
if (markerRef) { const markerRef = markerRefs.current[tournament.groupId];
if (clusterRef.current) { if (markerRef) {
const visibleMarker = clusterRef.current.getVisibleParent( if (clusterRef.current) {
markerRef.getMarker(), const visibleMarker = clusterRef.current.getVisibleParent(
); markerRef.getMarker(),
if (!visibleMarker) return; );
if (!visibleMarker) return;
// @ts-ignore // @ts-ignore
if (visibleMarker.__proto__ === L.MarkerCluster.prototype) { if (visibleMarker.__proto__ === L.MarkerCluster.prototype) {
// This is a cluster icon, we expand it. // This is a cluster icon, we expand it.
const clusterMarker = visibleMarker as L.MarkerCluster; const clusterMarker = visibleMarker as L.MarkerCluster;
if ( if (
expandedClusterMarkerRef.current && expandedClusterMarkerRef.current &&
expandedClusterMarkerRef.current !== clusterMarker expandedClusterMarkerRef.current !== clusterMarker
) { ) {
expandedClusterMarkerRef.current.unspiderfy(); expandedClusterMarkerRef.current.unspiderfy();
}
clusterMarker.spiderfy();
// Sometimes there marker that's still bouncing from the last time the group was expanded.
// We stop it quickly.
setTimeout(() => {
stopBouncingMarkers();
}, 50);
} else {
// This is a standard marker, we bounce it.
const marker = visibleMarker as BouncingMarker;
if (!marker.isBouncing()) {
stopBouncingMarkers();
markerRef.bounce();
}
} }
clusterMarker.spiderfy(); return true;
// Sometimes there marker that's still bouncing from the last time the group was expanded.
// We stop it quickly.
setTimeout(() => {
stopBouncingMarkers();
}, 50);
} else {
// This is a standard marker, we bounce it.
const marker = visibleMarker as BouncingMarker;
if (!marker.isBouncing()) {
stopBouncingMarkers();
markerRef.bounce();
}
} }
return true;
} }
} }
} }
stopBouncingMarkers();
return false; return false;
}, [filteredTournaments, hoveredListTournamentId]); }, [filteredTournaments, hoveredListTournamentId]);
@@ -273,15 +269,7 @@ export default function TournamentMap() {
const markers = useMemo( const markers = useMemo(
() => () =>
Object.values(groupedTournaments).map((tournamentGroup) => { Object.values(groupedTournaments).map((tournamentGroup) => {
const { groupId, timeControl } = tournamentGroup[0]; const { groupId } = tournamentGroup[0];
const colours = {
[TimeControl.Classic]: "green",
[TimeControl.Rapid]: "blue",
[TimeControl.Blitz]: "yellow",
[TimeControl.Other]: "red",
};
return ( return (
<TournamentMarker <TournamentMarker
ref={(ref) => { ref={(ref) => {