Prevent multiplying click handlers

This commit is contained in:
Tyler Hallada 2022-01-23 18:29:30 -05:00
parent c5b2ede9d2
commit c031524bd4

View File

@ -272,15 +272,16 @@ const Map: React.FC = () => {
map.current.addControl(new mapboxgl.FullscreenControl()); map.current.addControl(new mapboxgl.FullscreenControl());
map.current.addControl(new mapboxgl.NavigationControl()); map.current.addControl(new mapboxgl.NavigationControl());
});
let singleClickTimeout: NodeJS.Timeout | null = null; let singleClickTimeout: NodeJS.Timeout | null = null;
map.current.on("click", "grid-layer", (e) => { map.current.on("click", "grid-layer", (e) => {
console.log("click");
const features = e.features; const features = e.features;
if (singleClickTimeout) return; if (singleClickTimeout) return;
singleClickTimeout = setTimeout(() => { singleClickTimeout = setTimeout(() => {
singleClickTimeout = null; singleClickTimeout = null;
if (features && features[0]) { if (features && features[0]) {
console.log("timeout");
const cell: [number, number] = [ const cell: [number, number] = [
features[0].properties!.cellX, features[0].properties!.cellX,
features[0].properties!.cellY, features[0].properties!.cellY,
@ -361,14 +362,22 @@ const Map: React.FC = () => {
"line-width": 3, "line-width": 3,
}, },
}); });
const bounds = map.current.getBounds();
console.log(bounds);
if (!bounds.contains(nw) || !bounds.contains(se)) {
console.log("out of viewport, panning");
map.current.panTo(nw);
} }
}, 400); }
}, 200);
}); });
map.current.on("dblclick", "grid-layer", (e) => { map.current.on("dblclick", "grid-layer", (e) => {
if (singleClickTimeout) clearTimeout(singleClickTimeout); if (singleClickTimeout) clearTimeout(singleClickTimeout);
singleClickTimeout = null; singleClickTimeout = null;
}); });
});
}, [setSelectedCell, data]); }, [setSelectedCell, data]);
return ( return (