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

Keep plugin conflict outlines while selecting a cell

Browse Source
This commit is contained in:
Tyler Hallada 2022-03-17 01:22:17 -04:00
parent 914fbbb540
commit 1d40fb16df
1 changed files with 33 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
components/Map.tsx
View File

@ -84,7 +84,7 @@ const Map: React.FC = () => {
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;
map.current.removeFeatureState({ source: "grid-source" }); // map.current.removeFeatureState({ source: "grid-source" });
map.current.setFeatureState( map.current.setFeatureState(
{ {
source: "grid-source", source: "grid-source",
@ -95,7 +95,7 @@ const Map: React.FC = () => {
} }
); );
map.current.removeFeatureState({ source: "selected-cell-source" }); map.current.removeFeatureState({ source: "selected-cell-source" });
map.current.removeFeatureState({ source: "conflicted-cell-source" }); // map.current.removeFeatureState({ source: "conflicted-cell-source" });
map.current.setFeatureState( map.current.setFeatureState(
{ {
source: "selected-cell-source", source: "selected-cell-source",
@ -103,7 +103,7 @@ const Map: React.FC = () => {
}, },
{ {
cellSelected: true, cellSelected: true,
modSelected: false, // modSelected: false,
} }
); );
requestAnimationFrame(() => map.current && map.current.resize()); requestAnimationFrame(() => map.current && map.current.resize());
@ -148,19 +148,18 @@ const Map: React.FC = () => {
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;
map.current.removeFeatureState({ source: "selected-cell-source" }); map.current.removeFeatureState({ source: "selected-cells-source" });
map.current.removeFeatureState({ source: "conflicted-cell-source" }); map.current.removeFeatureState({ source: "conflicted-cell-source" });
const visited: { [id: number]: boolean } = {}; const visited: { [id: number]: boolean } = {};
for (let cell of cells) { for (let cell of cells) {
const id = (cell.x + 57) * 1000 + 50 - cell.y; const id = (cell.x + 57) * 1000 + 50 - cell.y;
map.current.setFeatureState( map.current.setFeatureState(
{ {
source: "selected-cell-source", source: "selected-cells-source",
id, id,
}, },
{ {
modSelected: true, modSelected: true,
cellSelected: false,
} }
); );
map.current.setFeatureState( map.current.setFeatureState(
@ -239,7 +238,7 @@ const Map: React.FC = () => {
if (map.current) map.current.removeFeatureState({ source: "grid-source" }); if (map.current) map.current.removeFeatureState({ source: "grid-source" });
if (map.current) { if (map.current) {
map.current.removeFeatureState({ source: "selected-cell-source" }); map.current.removeFeatureState({ source: "selected-cell-source" });
map.current.removeFeatureState({ source: "conflicted-cell-source" }); // map.current.removeFeatureState({ source: "conflicted-cell-source" });
} }
requestAnimationFrame(() => { requestAnimationFrame(() => {
if (map.current) map.current.resize(); if (map.current) map.current.resize();
@ -250,7 +249,7 @@ const Map: React.FC = () => {
setSelectedCells(null); setSelectedCells(null);
dispatch(setFetchedPlugin(undefined)); dispatch(setFetchedPlugin(undefined));
if (map.current) { if (map.current) {
map.current.removeFeatureState({ source: "selected-cell-source" }); map.current.removeFeatureState({ source: "selected-cells-source" });
map.current.removeFeatureState({ source: "conflicted-cell-source" }); map.current.removeFeatureState({ source: "conflicted-cell-source" });
} }
requestAnimationFrame(() => { requestAnimationFrame(() => {
@ -287,7 +286,7 @@ 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") {
@ -672,19 +671,17 @@ const Map: React.FC = () => {
} }
} }
map.current.addSource("selected-cell-source", { map.current.addSource("selected-cells-source", {
type: "geojson", type: "geojson",
data: selectedCellLines, data: selectedCellLines,
}); });
map.current.addLayer({ map.current.addLayer({
id: "selected-cell-layer", id: "selected-cells-layer",
type: "line", type: "line",
source: "selected-cell-source", source: "selected-cells-source",
paint: { paint: {
"line-color": [ "line-color": [
"case", "case",
["boolean", ["feature-state", "cellSelected"], false],
"blue",
["boolean", ["feature-state", "modSelected"], false], ["boolean", ["feature-state", "modSelected"], false],
"purple", "purple",
"transparent", "transparent",
@ -767,6 +764,28 @@ const Map: React.FC = () => {
}, },
}); });
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": [
"case",
["boolean", ["feature-state", "cellSelected"], false],
"blue",
"transparent",
],
"line-width": 3,
},
layout: {
"line-join": "round",
},
});
const fullscreenControl = new mapboxgl.FullscreenControl(); const fullscreenControl = new mapboxgl.FullscreenControl();
(fullscreenControl as unknown as { _container: HTMLElement })._container = (fullscreenControl as unknown as { _container: HTMLElement })._container =
mapWrapper.current; mapWrapper.current;