Fix clearing map selected cells between pages
Also limits fitBounds zooming to selecting mods or plugins only.
This commit is contained in:
parent
68796f6f9c
commit
daa4d3c039
@ -138,7 +138,7 @@ const Map: React.FC = () => {
|
|||||||
);
|
);
|
||||||
|
|
||||||
const selectCells = useCallback(
|
const selectCells = useCallback(
|
||||||
(cells: { x: number; y: number }[]) => {
|
(cells: { x: number; y: number }[], { fitCells } = { fitCells: false }) => {
|
||||||
if (!map.current) return;
|
if (!map.current) return;
|
||||||
if (map.current && !map.current.getSource("grid-source")) return;
|
if (map.current && !map.current.getSource("grid-source")) return;
|
||||||
|
|
||||||
@ -168,50 +168,52 @@ const Map: React.FC = () => {
|
|||||||
visited[id] = true;
|
visited[id] = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
let bounds: mapboxgl.LngLatBounds | null = null;
|
if (fitCells) {
|
||||||
const fitBounds = () => {
|
let bounds: mapboxgl.LngLatBounds | null = null;
|
||||||
const zoom = map.current.getZoom();
|
const fitBounds = () => {
|
||||||
const viewportNW = map.current.project([-180, 85.051129]);
|
const zoom = map.current.getZoom();
|
||||||
const cellSize = Math.pow(2, zoom + 2);
|
const viewportNW = map.current.project([-180, 85.051129]);
|
||||||
|
const cellSize = Math.pow(2, zoom + 2);
|
||||||
|
|
||||||
for (const cell of cells) {
|
for (const cell of cells) {
|
||||||
const x = cell.x + 57;
|
const x = cell.x + 57;
|
||||||
const y = 50 - cell.y;
|
const y = 50 - cell.y;
|
||||||
let ne = map.current.unproject([
|
let ne = map.current.unproject([
|
||||||
x * cellSize + viewportNW.x + cellSize,
|
x * cellSize + viewportNW.x + cellSize,
|
||||||
y * cellSize + viewportNW.y,
|
y * cellSize + viewportNW.y,
|
||||||
]);
|
]);
|
||||||
let sw = map.current.unproject([
|
let sw = map.current.unproject([
|
||||||
x * cellSize + viewportNW.x,
|
x * cellSize + viewportNW.x,
|
||||||
y * cellSize + viewportNW.y + cellSize,
|
y * cellSize + viewportNW.y + cellSize,
|
||||||
]);
|
]);
|
||||||
if (bounds) {
|
|
||||||
bounds.extend(new mapboxgl.LngLatBounds(sw, ne));
|
|
||||||
} else {
|
|
||||||
bounds = new mapboxgl.LngLatBounds(sw, ne);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
requestAnimationFrame(() => {
|
|
||||||
if (map.current) {
|
|
||||||
map.current.resize();
|
|
||||||
if (bounds) {
|
if (bounds) {
|
||||||
map.current.fitBounds(bounds, { padding: 40 });
|
bounds.extend(new mapboxgl.LngLatBounds(sw, ne));
|
||||||
|
} else {
|
||||||
|
bounds = new mapboxgl.LngLatBounds(sw, ne);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const bearing = map.current.getBearing();
|
requestAnimationFrame(() => {
|
||||||
const pitch = map.current.getPitch();
|
if (map.current) {
|
||||||
// This logic breaks with camera rotation / pitch
|
map.current.resize();
|
||||||
if (bearing !== 0 || pitch !== 0) {
|
if (bounds) {
|
||||||
map.current.easeTo({ bearing: 0, pitch: 0, duration: 300 });
|
map.current.fitBounds(bounds, { padding: 40 });
|
||||||
setTimeout(() => {
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const bearing = map.current.getBearing();
|
||||||
|
const pitch = map.current.getPitch();
|
||||||
|
// This logic breaks with camera rotation / pitch
|
||||||
|
if (bearing !== 0 || pitch !== 0) {
|
||||||
|
map.current.easeTo({ bearing: 0, pitch: 0, duration: 300 });
|
||||||
|
setTimeout(() => {
|
||||||
|
fitBounds();
|
||||||
|
}, 300);
|
||||||
|
} else {
|
||||||
fitBounds();
|
fitBounds();
|
||||||
}, 300);
|
}
|
||||||
} else {
|
|
||||||
fitBounds();
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
[map]
|
[map]
|
||||||
@ -280,14 +282,14 @@ const Map: React.FC = () => {
|
|||||||
selectedCell.x !== cell.x ||
|
selectedCell.x !== cell.x ||
|
||||||
selectedCell.y !== cell.y
|
selectedCell.y !== cell.y
|
||||||
) {
|
) {
|
||||||
// clearSelectedCells();
|
clearSelectedCells();
|
||||||
selectCell(cell);
|
selectCell(cell);
|
||||||
}
|
}
|
||||||
} else if (router.query.mod && typeof router.query.mod === "string") {
|
} else if (router.query.mod && typeof router.query.mod === "string") {
|
||||||
if (selectedCells) {
|
if (selectedCells) {
|
||||||
clearSelectedCell();
|
clearSelectedCell();
|
||||||
setSidebarOpen(true);
|
setSidebarOpen(true);
|
||||||
selectCells(selectedCells);
|
selectCells(selectedCells, { fitCells: true });
|
||||||
} else {
|
} else {
|
||||||
// TODO: this is so spaghetti
|
// TODO: this is so spaghetti
|
||||||
clearSelectedCell();
|
clearSelectedCell();
|
||||||
@ -311,12 +313,21 @@ const Map: React.FC = () => {
|
|||||||
cellSet.add(cell.x + cell.y * 1000);
|
cellSet.add(cell.x + cell.y * 1000);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
selectCells(cells);
|
selectCells(cells, { fitCells: true });
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
} else if (plugins && plugins.length > 0 && pluginsPending === 0) {
|
} else {
|
||||||
clearSelectedCells();
|
clearSelectedCells();
|
||||||
clearSelectedCell();
|
clearSelectedCell();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (
|
||||||
|
plugins &&
|
||||||
|
plugins.length > 0 &&
|
||||||
|
pluginsPending === 0 &&
|
||||||
|
!router.query.mod &&
|
||||||
|
!router.query.plugin
|
||||||
|
) {
|
||||||
const cells = plugins.reduce(
|
const cells = plugins.reduce(
|
||||||
(acc: { x: number; y: number }[], plugin: PluginFile) => {
|
(acc: { x: number; y: number }[], plugin: PluginFile) => {
|
||||||
if (plugin.enabled && plugin.parsed) {
|
if (plugin.enabled && plugin.parsed) {
|
||||||
@ -337,9 +348,6 @@ const Map: React.FC = () => {
|
|||||||
[]
|
[]
|
||||||
);
|
);
|
||||||
selectCells(cells);
|
selectCells(cells);
|
||||||
} else {
|
|
||||||
clearSelectedCells();
|
|
||||||
clearSelectedCell();
|
|
||||||
}
|
}
|
||||||
}, [
|
}, [
|
||||||
selectedCell,
|
selectedCell,
|
||||||
|
Loading…
Reference in New Issue
Block a user