mirror of
https://github.com/TheRealOwenRees/echecsfrance.git
synced 2026-07-23 04:26:57 +00:00
Stop bouncing when hovering over list item that isn't visible on the map
This commit is contained in:
@@ -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) => {
|
||||||
|
|||||||
Reference in New Issue
Block a user