thallada/modmapper-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Prevent multiplying click handlers

Browse Source
This commit is contained in:
Tyler Hallada 2022-01-23 18:29:30 -05:00
parent c5b2ede9d2
commit c031524bd4
1 changed files with 100 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

191
components/Map.tsx
View File

@ -272,102 +272,111 @@ 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) => {
const features = e.features; console.log("click");
if (singleClickTimeout) return; const features = e.features;
singleClickTimeout = setTimeout(() => { if (singleClickTimeout) return;
singleClickTimeout = null; singleClickTimeout = setTimeout(() => {
if (features && features[0]) { singleClickTimeout = null;
const cell: [number, number] = [ if (features && features[0]) {
features[0].properties!.cellX, console.log("timeout");
features[0].properties!.cellY, const cell: [number, number] = [
]; features[0].properties!.cellX,
map.current.removeFeatureState({ source: "grid-source" }); features[0].properties!.cellY,
map.current.setFeatureState( ];
{ map.current.removeFeatureState({ source: "grid-source" });
source: "grid-source", map.current.setFeatureState(
id: features[0].id,
},
{
selected: true,
}
);
setSelectedCell(cell);
map.current.resize();
var zoom = map.current.getZoom();
var viewportNW = map.current.project([-180, 85.051129]);
var cellSize = Math.pow(2, zoom + 2);
const x = features[0].properties!.x;
const y = features[0].properties!.y;
let nw = map.current.unproject([
x * cellSize + viewportNW.x,
y * cellSize + viewportNW.y,
]);
let ne = map.current.unproject([
x * cellSize + viewportNW.x + cellSize,
y * cellSize + viewportNW.y,
]);
let se = map.current.unproject([
x * cellSize + viewportNW.x + cellSize,
y * cellSize + viewportNW.y + cellSize,
]);
let sw = map.current.unproject([
x * cellSize + viewportNW.x,
y * cellSize + viewportNW.y + cellSize,
]);
const selectedCellLines: GeoJSON.FeatureCollection<
GeoJSON.Geometry,
GeoJSON.GeoJsonProperties
> = {
type: "FeatureCollection",
features: [
{ {
type: "Feature", source: "grid-source",
geometry: { id: features[0].id,
type: "LineString",
coordinates: [
[nw.lng, nw.lat],
[ne.lng, ne.lat],
[se.lng, se.lat],
[sw.lng, sw.lat],
[nw.lng, nw.lat],
],
},
properties: { x: x, y: y },
}, },
], {
}; selected: true,
}
);
setSelectedCell(cell);
map.current.resize();
if (map.current.getLayer("selected-cell-layer")) { var zoom = map.current.getZoom();
map.current.removeLayer("selected-cell-layer"); var viewportNW = map.current.project([-180, 85.051129]);
} var cellSize = Math.pow(2, zoom + 2);
if (map.current.getSource("selected-cell-source")) { const x = features[0].properties!.x;
map.current.removeSource("selected-cell-source"); const y = features[0].properties!.y;
} let nw = map.current.unproject([
map.current.addSource("selected-cell-source", { x * cellSize + viewportNW.x,
type: "geojson", y * cellSize + viewportNW.y,
data: selectedCellLines, ]);
}); let ne = map.current.unproject([
map.current.addLayer({ x * cellSize + viewportNW.x + cellSize,
id: "selected-cell-layer", y * cellSize + viewportNW.y,
type: "line", ]);
source: "selected-cell-source", let se = map.current.unproject([
paint: { x * cellSize + viewportNW.x + cellSize,
"line-color": "blue", y * cellSize + viewportNW.y + cellSize,
"line-width": 3, ]);
}, let sw = map.current.unproject([
}); x * cellSize + viewportNW.x,
} y * cellSize + viewportNW.y + cellSize,
}, 400); ]);
}); const selectedCellLines: GeoJSON.FeatureCollection<
GeoJSON.Geometry,
GeoJSON.GeoJsonProperties
> = {
type: "FeatureCollection",
features: [
{
type: "Feature",
geometry: {
type: "LineString",
coordinates: [
[nw.lng, nw.lat],
[ne.lng, ne.lat],
[se.lng, se.lat],
[sw.lng, sw.lat],
[nw.lng, nw.lat],
],
},
properties: { x: x, y: y },
},
],
};
map.current.on("dblclick", "grid-layer", (e) => { if (map.current.getLayer("selected-cell-layer")) {
if (singleClickTimeout) clearTimeout(singleClickTimeout); map.current.removeLayer("selected-cell-layer");
singleClickTimeout = null; }
if (map.current.getSource("selected-cell-source")) {
map.current.removeSource("selected-cell-source");
}
map.current.addSource("selected-cell-source", {
type: "geojson",
data: selectedCellLines,
});
map.current.addLayer({
id: "selected-cell-layer",
type: "line",
source: "selected-cell-source",
paint: {
"line-color": "blue",
"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);
}
}
}, 200);
});
map.current.on("dblclick", "grid-layer", (e) => {
if (singleClickTimeout) clearTimeout(singleClickTimeout);
singleClickTimeout = null;
});
}); });
}, [setSelectedCell, data]); }, [setSelectedCell, data]);