Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Disable Back, Forward, Reload when not possible #739

Merged
merged 3 commits into from
Feb 3, 2023
Merged

Disable Back, Forward, Reload when not possible #739

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8a7342a
Disable Back, Forward, Reload when not possible + update tests
AliyanH Feb 2, 2023
df32e41
Add disabled contextmenu items' test
AliyanH Feb 3, 2023
e8c3783
Update history stack to overwrite forward history when history changed
AliyanH Feb 3, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 30 additions & 0 deletions src/mapml-viewer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -537,6 +537,20 @@ export class MapViewer extends HTMLElement {
};
this._historyIndex++;
this._history.splice(this._historyIndex, 0, location);
// Remove future history and overwrite it when map pan/zoom while inside history
if (this._historyIndex + 1 !== this._history.length) {
this._history.length = this._historyIndex + 1;
}
if (this._historyIndex === 0) {
// when at initial state of map, disable back, forward, and reload items
this._map.contextMenu._items[0].el.el.disabled = true; // back contextmenu item
this._map.contextMenu._items[1].el.el.disabled = true; // forward contextmenu item
this._map.contextMenu._items[2].el.el.disabled = true; // reload contextmenu item
} else {
this._map.contextMenu._items[0].el.el.disabled = false; // back contextmenu item
this._map.contextMenu._items[1].el.el.disabled = true; // forward contextmenu item
this._map.contextMenu._items[2].el.el.disabled = false; // reload contextmenu item
}
}

/**
Expand All @@ -547,8 +561,14 @@ export class MapViewer extends HTMLElement {
let curr = history[this._historyIndex];

if(this._historyIndex > 0){
this._map.contextMenu._items[1].el.el.disabled = false; // forward contextmenu item
this._historyIndex--;
let prev = history[this._historyIndex];
// Disable back, reload contextmenu item when at the end of history
if (this._historyIndex === 0) {
this._map.contextMenu._items[0].el.el.disabled = true; // back contextmenu item
this._map.contextMenu._items[2].el.el.disabled = true; // reload contextmenu item
}

if(prev.zoom !== curr.zoom){
this._traversalCall = 2; // allows the next 2 moveends to be ignored from history
Expand All @@ -574,8 +594,14 @@ export class MapViewer extends HTMLElement {
let history = this._history;
let curr = history[this._historyIndex];
if(this._historyIndex < history.length - 1){
this._map.contextMenu._items[0].el.el.disabled = false; // back contextmenu item
this._map.contextMenu._items[2].el.el.disabled = false; // reload contextmenu item
this._historyIndex++;
let next = history[this._historyIndex];
// disable forward contextmenu item, when at the end of forward history
if (this._historyIndex + 1 === this._history.length) {
this._map.contextMenu._items[1].el.el.disabled = true; // forward contextmenu item
}

if(next.zoom !== curr.zoom){
this._traversalCall = 2; // allows the next 2 moveends to be ignored from history
Expand Down Expand Up @@ -606,6 +632,10 @@ export class MapViewer extends HTMLElement {
y:mapLocation.y,
};

this._map.contextMenu._items[0].el.el.disabled = true; // back contextmenu item
this._map.contextMenu._items[1].el.el.disabled = true; // forward contextmenu item
this._map.contextMenu._items[2].el.el.disabled = true; // reload contextmenu item

this._history = [initialLocation];
this._historyIndex = 0;

Expand Down
2 changes: 1 addition & 1 deletion src/mapml/handlers/ContextMenu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -466,7 +466,7 @@ export var ContextMenu = L.Handler.extend({
this._layerMenuTabs = 1;
this._layerMenu.firstChild.focus();
} else {
this._container.firstChild.focus();
this._container.querySelectorAll("button:not([disabled])")[0].focus();
}

}
Expand Down
30 changes: 30 additions & 0 deletions src/web-map.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -578,6 +578,20 @@ export class WebMap extends HTMLMapElement {
};
this._historyIndex++;
this._history.splice(this._historyIndex, 0, location);
// Remove future history and overwrite it when map pan/zoom while inside history
if (this._historyIndex + 1 !== this._history.length) {
this._history.length = this._historyIndex + 1;
}
if (this._historyIndex === 0) {
// when at initial state of map, disable back, forward, and reload items
this._map.contextMenu._items[0].el.el.disabled = true; // back contextmenu item
this._map.contextMenu._items[1].el.el.disabled = true; // forward contextmenu item
this._map.contextMenu._items[2].el.el.disabled = true; // reload contextmenu item
} else {
this._map.contextMenu._items[0].el.el.disabled = false; // back contextmenu item
this._map.contextMenu._items[1].el.el.disabled = true; // forward contextmenu item
this._map.contextMenu._items[2].el.el.disabled = false; // reload contextmenu item
}
}

/**
Expand All @@ -588,8 +602,14 @@ export class WebMap extends HTMLMapElement {
let curr = history[this._historyIndex];

if(this._historyIndex > 0){
this._map.contextMenu._items[1].el.el.disabled = false; // forward contextmenu item
this._historyIndex--;
let prev = history[this._historyIndex];
// Disable back, reload contextmenu item when at the end of history
if (this._historyIndex === 0) {
this._map.contextMenu._items[0].el.el.disabled = true; // back contextmenu item
this._map.contextMenu._items[2].el.el.disabled = true; // reload contextmenu item
}

if(prev.zoom !== curr.zoom){
this._traversalCall = 2; // allows the next 2 moveends to be ignored from history
Expand All @@ -615,8 +635,14 @@ export class WebMap extends HTMLMapElement {
let history = this._history;
let curr = history[this._historyIndex];
if(this._historyIndex < history.length - 1){
this._map.contextMenu._items[0].el.el.disabled = false; // back contextmenu item
this._map.contextMenu._items[2].el.el.disabled = false; // reload contextmenu item
this._historyIndex++;
let next = history[this._historyIndex];
// disable forward contextmenu item, when at the end of forward history
if (this._historyIndex + 1 === this._history.length) {
this._map.contextMenu._items[1].el.el.disabled = true; // forward contextmenu item
}

if(next.zoom !== curr.zoom){
this._traversalCall = 2; // allows the next 2 moveends to be ignored from history
Expand Down Expand Up @@ -647,6 +673,10 @@ export class WebMap extends HTMLMapElement {
y:mapLocation.y,
};

this._map.contextMenu._items[0].el.el.disabled = true; // back contextmenu item
this._map.contextMenu._items[1].el.el.disabled = true; // forward contextmenu item
this._map.contextMenu._items[2].el.el.disabled = true; // reload contextmenu item

this._history = [initialLocation];
this._historyIndex = 0;

Expand Down
92 changes: 66 additions & 26 deletions test/e2e/core/mapContextMenu.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ test.describe("Playwright Map Context Menu Tests", () => {
const nameHandle = await page.evaluateHandle(name => name.outerText, resultHandle);
let name = await nameHandle.jsonValue();
await nameHandle.dispose();
expect(name).toEqual("Back (B)");
expect(name).toEqual("Toggle Controls (T)");
});

test("Context menu tab goes to next item", async () => {
Expand All @@ -57,7 +57,7 @@ test.describe("Playwright Map Context Menu Tests", () => {
const nameHandle = await page.evaluateHandle(name => name.outerText, resultHandle);
let name = await nameHandle.jsonValue();
await nameHandle.dispose();
expect(name).toEqual("Forward (F)");
expect(name).toEqual("Copy Coordinates (C)");
});

test("Submenu opens on C with focus on first item", async () => {
Expand Down Expand Up @@ -100,21 +100,24 @@ test.describe("Playwright Map Context Menu Tests", () => {
expect(extent.topLeft.tilematrix[0]).toEqual(expectedFirstTileMatrix[0]);
expect(extent.topLeft.tcrs[0]).toEqual(expectedFirstTCRS[0]);
});
test("Context menu, back item at intial location", async () => {
test("Context menu, back and reload item at initial location disabled", async () => {
await page.click("body > map", { button: "right" });
await page.click("div > div.mapml-contextmenu > button:nth-child(1)");
await page.waitForTimeout(1000);
const extent = await page.$eval(
"body > map",
(map) => map.extent
const backBtn = await page.$eval(
"div > div.mapml-contextmenu > button:nth-child(1)",
(btn) => btn.disabled
);
const fwdBtn = await page.$eval(
"div > div.mapml-contextmenu > button:nth-child(2)",
(btn) => btn.disabled
);
const reloadBtn = await page.$eval(
"div > div.mapml-contextmenu > button:nth-child(3)",
(btn) => btn.disabled
);

expect(extent.projection).toEqual("CBMTILE");
expect(extent.zoom).toEqual({ minZoom: 0, maxZoom: 25 });
expect(extent.topLeft.pcrs).toEqual(expectedPCRS[0]);
expect(extent.topLeft.gcrs).toEqual(expectedGCRS[0]);
expect(extent.topLeft.tilematrix[0]).toEqual(expectedFirstTileMatrix[0]);
expect(extent.topLeft.tcrs[0]).toEqual(expectedFirstTCRS[0]);
expect(backBtn).toEqual(true);
expect(fwdBtn).toEqual(false);
expect(reloadBtn).toEqual(true);
});
test("Context menu, forward item", async () => {
await page.click("body > map", { button: "right" });
Expand All @@ -131,20 +134,24 @@ test.describe("Playwright Map Context Menu Tests", () => {
expect(extent.topLeft.tilematrix[0]).toEqual(expectedFirstTileMatrix[1]);
expect(extent.topLeft.tcrs[0]).toEqual(expectedFirstTCRS[1]);
});
test("Context menu, forward item at most recent location", async () => {
test("Context menu, forward item at most recent location disabled", async () => {
await page.click("body > map", { button: "right" });
await page.click("div > div.mapml-contextmenu > button:nth-child(2)");
await page.waitForTimeout(1000);
const extent = await page.$eval(
"body > map",
(map) => map.extent
const backBtn = await page.$eval(
"div > div.mapml-contextmenu > button:nth-child(1)",
(btn) => btn.disabled
);
const fwdBtn = await page.$eval(
"div > div.mapml-contextmenu > button:nth-child(2)",
(btn) => btn.disabled
);
const reloadBtn = await page.$eval(
"div > div.mapml-contextmenu > button:nth-child(3)",
(btn) => btn.disabled
);

expect(extent.zoom).toEqual({ minZoom: 0, maxZoom: 25 });
expect(extent.topLeft.pcrs).toEqual(expectedPCRS[1]);
expect(extent.topLeft.gcrs).toEqual(expectedGCRS[1]);
expect(extent.topLeft.tilematrix[0]).toEqual(expectedFirstTileMatrix[1]);
expect(extent.topLeft.tcrs[0]).toEqual(expectedFirstTCRS[1]);
expect(backBtn).toEqual(false);
expect(fwdBtn).toEqual(true);
expect(reloadBtn).toEqual(false);
});

test.describe("Context Menu, Toggle Controls ", () => {
Expand Down Expand Up @@ -218,7 +225,7 @@ test.describe("Playwright Map Context Menu Tests", () => {
await page.click("body > map");
await page.keyboard.press("Shift+F10");

for (let i = 0; i < 4; i++)
for (let i = 0; i < 3; i++)
await page.keyboard.press("Tab");

await page.keyboard.press("Enter");
Expand Down Expand Up @@ -338,4 +345,37 @@ test.describe("Playwright Map Context Menu Tests", () => {
await page.hover("div > div.mapml-contextmenu > button:nth-child(5)");
expect(await submenu.isHidden()).toBeTruthy();
});

test("Context menu, All buttons enabled when fwd and back history present", async () => {
await page.click("body > map");
await page.$eval(
"body > map",
(map) => map.zoomTo(81, -63, 3)
);
await page.waitForTimeout(1000);
await page.$eval(
"body > map",
(map) => map.zoomTo(81, -63, 5)
);
await page.waitForTimeout(1000);
await page.click("body > map", { button: "right" });
await page.click("div > div.mapml-contextmenu > button:nth-child(1)");
await page.click("body > map", { button: "right" });
const backBtn = await page.$eval(
"div > div.mapml-contextmenu > button:nth-child(1)",
(btn) => btn.disabled
);
const fwdBtn = await page.$eval(
"div > div.mapml-contextmenu > button:nth-child(2)",
(btn) => btn.disabled
);
const reloadBtn = await page.$eval(
"div > div.mapml-contextmenu > button:nth-child(3)",
(btn) => btn.disabled
);

expect(backBtn).toEqual(false);
expect(fwdBtn).toEqual(false);
expect(reloadBtn).toEqual(false);
});
});
2 changes: 1 addition & 1 deletion test/e2e/mapml-viewer/mapml-viewer.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -170,7 +170,7 @@ test.describe("Playwright mapml-viewer Element Tests", () => {

await page.click("body > mapml-viewer");
await page.keyboard.press('Control+v');
await page.waitForTimeout(500);
await page.waitForTimeout(1000);
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Change to fix flakiness, progresses #729.

const layerCount = await page.$eval(
"body > mapml-viewer",
(map) => map.layers.length
Expand Down
Loading