From 6aa64946a15ca6c12b6f5a51f42e996c73003949 Mon Sep 17 00:00:00 2001 From: yhy0217 Date: Tue, 24 Jan 2023 15:48:24 -0400 Subject: [PATCH 1/5] prevent the default scrolling event of spacebar when focus is on map --- src/mapml-viewer.js | 2 ++ src/web-map.js | 2 ++ test/e2e/mapml-viewer/mapml-viewer.test.js | 16 ++++++++++++++++ test/e2e/web-map/map.test.js | 16 ++++++++++++++++ 4 files changed, 36 insertions(+) diff --git a/src/mapml-viewer.js b/src/mapml-viewer.js index c19d815c2..b5b58e930 100644 --- a/src/mapml-viewer.js +++ b/src/mapml-viewer.js @@ -355,6 +355,8 @@ export class MapViewer extends HTMLElement { (layer) => { M._pasteLayer(document.activeElement, layer); }); + } else if (e.keyCode === 32 && document.activeElement.nodeName === "MAPML-VIEWER") { + e.preventDefault(); }}); this.parentElement.addEventListener('mousedown', function (e) { if(document.activeElement.nodeName === "MAPML-VIEWER"){ diff --git a/src/web-map.js b/src/web-map.js index 324efe12f..44347ba87 100644 --- a/src/web-map.js +++ b/src/web-map.js @@ -396,6 +396,8 @@ export class WebMap extends HTMLMapElement { (layer) => { M._pasteLayer(document.activeElement.parentElement, layer); }); + } else if (e.keyCode === 32 && document.activeElement.nodeName === "DIV") { + e.preventDefault(); } }); this.parentElement.addEventListener('mousedown', function (e) { diff --git a/test/e2e/mapml-viewer/mapml-viewer.test.js b/test/e2e/mapml-viewer/mapml-viewer.test.js index 8b7fe94f6..e06c511e9 100644 --- a/test/e2e/mapml-viewer/mapml-viewer.test.js +++ b/test/e2e/mapml-viewer/mapml-viewer.test.js @@ -177,4 +177,20 @@ test.describe("Playwright mapml-viewer Element Tests", () => { ); expect(layerCount).toEqual(3); }); + + test("Press spacebar when focus is on map", async () => { + await page.click("body > textarea"); + const pos = await page.$eval( + "body > mapml-viewer", + () => window.pageYOffset + ) + await page.click("body > mapml-viewer"); + await page.keyboard.press('Space'); + await page.waitForTimeout(300); + const currPos = await page.$eval( + "body > mapml-viewer", + () => window.pageYOffset + ); + expect(currPos).toEqual(pos); + }); }); \ No newline at end of file diff --git a/test/e2e/web-map/map.test.js b/test/e2e/web-map/map.test.js index 7698b53e2..b78ee2f42 100644 --- a/test/e2e/web-map/map.test.js +++ b/test/e2e/web-map/map.test.js @@ -71,4 +71,20 @@ test.describe("Playwright web-map Element Tests", () => { ); expect(layerCount).toEqual(3); }); + + test("Press spacebar when focus is on map", async () => { + await page.click("body > textarea"); + const pos = await page.$eval( + "body > map", + () => window.pageYOffset + ) + await page.click("body > map"); + await page.keyboard.press('Space'); + await page.waitForTimeout(300); + const currPos = await page.$eval( + "body > map", + () => window.pageYOffset + ); + expect(currPos).toEqual(pos); + }); }); \ No newline at end of file From f81681f957c056db0d14dab994b4a9d79dca1fd1 Mon Sep 17 00:00:00 2001 From: AliyanH Date: Tue, 24 Jan 2023 16:03:37 -0500 Subject: [PATCH 2/5] update keydown event listener and fix query handler bug --- src/mapml-viewer.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/mapml-viewer.js b/src/mapml-viewer.js index b5b58e930..f7800bef8 100644 --- a/src/mapml-viewer.js +++ b/src/mapml-viewer.js @@ -347,16 +347,17 @@ export class MapViewer extends HTMLElement { } }); // pasting layer-, links and geojson using Ctrl+V - this.parentElement.addEventListener('keydown', function (e) { - if(e.keyCode === 86 && e.ctrlKey && document.activeElement.nodeName === "MAPML-VIEWER"){ + this.addEventListener('keydown', function (e) { + if(e.keyCode === 86 && e.ctrlKey){ navigator.clipboard .readText() .then( (layer) => { - M._pasteLayer(document.activeElement, layer); + M._pasteLayer(this, layer); }); - } else if (e.keyCode === 32 && document.activeElement.nodeName === "MAPML-VIEWER") { + } else if (e.keyCode === 32) { e.preventDefault(); + this._map.fire('keypress', {originalEvent: e}); }}); this.parentElement.addEventListener('mousedown', function (e) { if(document.activeElement.nodeName === "MAPML-VIEWER"){ From 47234fdf628bdf88bbf78f2dc73faaefbdfbc23c Mon Sep 17 00:00:00 2001 From: AliyanH Date: Tue, 24 Jan 2023 17:37:27 -0500 Subject: [PATCH 3/5] update spacebar test --- test/e2e/mapml-viewer/mapml-viewer.test.js | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/test/e2e/mapml-viewer/mapml-viewer.test.js b/test/e2e/mapml-viewer/mapml-viewer.test.js index e06c511e9..e02b0746f 100644 --- a/test/e2e/mapml-viewer/mapml-viewer.test.js +++ b/test/e2e/mapml-viewer/mapml-viewer.test.js @@ -179,11 +179,9 @@ test.describe("Playwright mapml-viewer Element Tests", () => { }); test("Press spacebar when focus is on map", async () => { - await page.click("body > textarea"); - const pos = await page.$eval( - "body > mapml-viewer", - () => window.pageYOffset - ) + // scroll to the top + await page.mouse.wheel(0,-1000); + await page.waitForTimeout(300); await page.click("body > mapml-viewer"); await page.keyboard.press('Space'); await page.waitForTimeout(300); @@ -191,6 +189,6 @@ test.describe("Playwright mapml-viewer Element Tests", () => { "body > mapml-viewer", () => window.pageYOffset ); - expect(currPos).toEqual(pos); + expect(currPos).toEqual(0); }); -}); \ No newline at end of file +}); From 73fe1b28e9b85272f7de7e061ab9b1507c362da4 Mon Sep 17 00:00:00 2001 From: yhy0217 Date: Wed, 25 Jan 2023 11:17:49 -0400 Subject: [PATCH 4/5] update web-map.js and the tests for web-map with the changes --- src/web-map.js | 7 ++++--- test/e2e/web-map/map.test.js | 10 ++++------ 2 files changed, 8 insertions(+), 9 deletions(-) diff --git a/src/web-map.js b/src/web-map.js index 44347ba87..d7a73c4f4 100644 --- a/src/web-map.js +++ b/src/web-map.js @@ -389,15 +389,16 @@ export class WebMap extends HTMLMapElement { }); // pasting layer-, links and geojson using Ctrl+V this.parentElement.addEventListener('keydown', function (e) { - if(e.keyCode === 86 && e.ctrlKey && document.activeElement.nodeName === "DIV"){ + if(e.keyCode === 86 && e.ctrlKey){ navigator.clipboard .readText() .then( (layer) => { - M._pasteLayer(document.activeElement.parentElement, layer); + M._pasteLayer(this.parentElement, layer); }); - } else if (e.keyCode === 32 && document.activeElement.nodeName === "DIV") { + } else if (e.keyCode === 32) { e.preventDefault(); + this._map.fire('keypress', {originalEvent: e}); } }); this.parentElement.addEventListener('mousedown', function (e) { diff --git a/test/e2e/web-map/map.test.js b/test/e2e/web-map/map.test.js index b78ee2f42..9421a7914 100644 --- a/test/e2e/web-map/map.test.js +++ b/test/e2e/web-map/map.test.js @@ -73,11 +73,9 @@ test.describe("Playwright web-map Element Tests", () => { }); test("Press spacebar when focus is on map", async () => { - await page.click("body > textarea"); - const pos = await page.$eval( - "body > map", - () => window.pageYOffset - ) + // scroll to the top + await page.mouse.wheel(0, -1000); + await page.waitForTimeout(300); await page.click("body > map"); await page.keyboard.press('Space'); await page.waitForTimeout(300); @@ -85,6 +83,6 @@ test.describe("Playwright web-map Element Tests", () => { "body > map", () => window.pageYOffset ); - expect(currPos).toEqual(pos); + expect(currPos).toEqual(0); }); }); \ No newline at end of file From 697d384dc2d407c1a3764a6d6b1b842e62814807 Mon Sep 17 00:00:00 2001 From: yhy0217 Date: Wed, 25 Jan 2023 11:46:13 -0400 Subject: [PATCH 5/5] small fix in web-map.js --- src/web-map.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/web-map.js b/src/web-map.js index d7a73c4f4..4d5bc6c88 100644 --- a/src/web-map.js +++ b/src/web-map.js @@ -388,13 +388,13 @@ export class WebMap extends HTMLMapElement { } }); // pasting layer-, links and geojson using Ctrl+V - this.parentElement.addEventListener('keydown', function (e) { + this.addEventListener('keydown', function (e) { if(e.keyCode === 86 && e.ctrlKey){ navigator.clipboard .readText() .then( (layer) => { - M._pasteLayer(this.parentElement, layer); + M._pasteLayer(this, layer); }); } else if (e.keyCode === 32) { e.preventDefault();