From dd33e8dc22f108b982b32798b11e34db439251ed Mon Sep 17 00:00:00 2001 From: yhy0217 Date: Fri, 27 Jan 2023 17:33:54 -0400 Subject: [PATCH 1/7] fix contextmenu wrapping and submenu displaying bugs add a test in mapContextMenu.test.js stop layermenu and contextmenu from showing up at the same time reorganize copy menu and modify tests modify tests to cope with the disabled back/forward btn extend wait time in tests remove querySelector, use this add locales for copying mapml/ext/loc Reverse erroneous conflict resolutions during rebase --- src/mapml/handlers/ContextMenu.js | 127 ++++++++------- src/mapml/options.js | 10 +- test/e2e/core/layerContextMenu.test.js | 12 -- test/e2e/core/mapContextMenu.test.js | 118 +++++++++++--- test/e2e/mapml-viewer/mapml-viewer.html | 2 +- .../mapml-viewer/viewerContextMenu.test.js | 148 +++++++++++------- 6 files changed, 262 insertions(+), 155 deletions(-) diff --git a/src/mapml/handlers/ContextMenu.js b/src/mapml/handlers/ContextMenu.js index fcbc3e9b3..268efb669 100644 --- a/src/mapml/handlers/ContextMenu.js +++ b/src/mapml/handlers/ContextMenu.js @@ -40,41 +40,16 @@ export var ContextMenu = L.Handler.extend({ popup:true, submenu:[ { - text:"tile", - callback:this._copyTile, + text: M.options.locale.cmCopyMapML, + callback:this._copyMapML, }, { - text:"tilematrix", - callback:this._copyTileMatrix, + text: M.options.locale.cmCopyExtent, + callback:this._copyExtent, }, { - spacer:"-", - }, - { - text:"map", - callback:this._copyMap, - }, - { - spacer:"-", - }, - { - text:"tcrs", - callback:this._copyTCRS, - }, - { - text:"pcrs", - callback:this._copyPCRS, - }, - { - text:"gcrs", - callback:this._copyGCRS, - }, - { - spacer:"-", - }, - { - text: M.options.locale.cmCopyAll, - callback:this._copyAllCoords, + text: M.options.locale.cmCopyLocation, + callback:this._copyLocation, } ] }, @@ -82,10 +57,6 @@ export var ContextMenu = L.Handler.extend({ text: M.options.locale.cmToggleDebug + " (D)", callback:this._toggleDebug, }, - { - text: M.options.locale.cmCopyMapML + " (M)", - callback:this._copyMapML, - }, { text: M.options.locale.cmPasteLayer + " (P)", callback:this._paste, @@ -96,15 +67,15 @@ export var ContextMenu = L.Handler.extend({ }, ]; + // setting the default cs for copying location and extent + // should be public as they are used in tests + this.defExtCS = M.options.defaultExtCoor; + this.defLocCS = M.options.defaultLocCoor; this._layerItems = [ { text: M.options.locale.lmZoomToLayer + " (Z)", callback:this._zoomToLayer }, - { - text: M.options.locale.lmCopyExtent + " (C)", - callback:this._copyLayerExtent - }, { text: M.options.locale.lmCopyLayer + " (L)", callback:this._copyLayer @@ -133,7 +104,6 @@ export var ContextMenu = L.Handler.extend({ this._items[6].el = this._createItem(this._container, this._items[6]); this._items[7].el = this._createItem(this._container, this._items[7]); this._items[8].el = this._createItem(this._container, this._items[8]); - this._items[9].el = this._createItem(this._container, this._items[9]); this._layerMenu = L.DomUtil.create("div", "mapml-contextmenu mapml-layer-menu", map._container); this._layerMenu.setAttribute('hidden', ''); @@ -188,13 +158,37 @@ export var ContextMenu = L.Handler.extend({ }, this); }, - _copyLayerExtent: function (e) { - let context = e instanceof KeyboardEvent ? this._map.contextMenu : this.contextMenu, - layerElem = context._layerClicked.layer._layerEl, - tL = layerElem.extent.topLeft.pcrs, - bR = layerElem.extent.bottomRight.pcrs; + _updateCS: function () { + if (this.defExtCS !== M.options.defaultExtCoor || this.defLocCS !== M.options.defaultLocCoor) { + this.defExtCS = M.options.defaultExtCoor; + this.defLocCS = M.options.defaultLocCoor; + } + }, - let data = ``; + _copyExtent: function (e) { + let context = e instanceof KeyboardEvent ? this._map.contextMenu : this.contextMenu, + coord = context.defExtCS? context.defExtCS.toLowerCase() : 'pcrs', + tL = e instanceof KeyboardEvent? this.extent.topLeft[coord] : this.options.mapEl.extent.topLeft[coord], + bR = e instanceof KeyboardEvent? this.extent.bottomRight[coord] : this.options.mapEl.extent.bottomRight[coord], + data = ""; + switch(coord) { + case 'MapML': + default: + if (coord === 'pcrs') { + data = ``; + } else if (coord === 'gcrs') { + data = ``; + } else if (coord === 'tcrs') { + data = ``; + } else if (coord === 'tilematrix') { + data = ``; + } else { + console.log('not support'); + } + break; + } context._copyData(data); }, @@ -272,10 +266,25 @@ export var ContextMenu = L.Handler.extend({ document.body.removeChild(el); }, + _copyLocation: function(e){ + const menu = this.contextMenu; + switch(menu.defLocCS.toLowerCase()) { + case 'tile': menu._copyTile.call(this, e); break; + case 'tilematrix': menu._copyTileMatrix.call(this, e); break; + case 'map': menu._copyMap.call(this, e); break; + case 'tcrs': menu._copyTCRS.call(this, e); break; + case 'pcrs': menu._copyPCRS.call(this, e); break; + case 'gcrs': + default: + menu._copyGCRS.call(this, e); + break; + } + }, + _copyGCRS: function(e){ let mapEl = this.options.mapEl, click = this.contextMenu._clickEvent; - this.contextMenu._copyData(`z:${mapEl.zoom}, lon :${click.latlng.lng.toFixed(6)}, lat:${click.latlng.lat.toFixed(6)}`); + this.contextMenu._copyData(`lon :${click.latlng.lng.toFixed(6)}, lat:${click.latlng.lat.toFixed(6)}`); }, _copyTCRS: function(e){ @@ -299,7 +308,7 @@ export var ContextMenu = L.Handler.extend({ point = mapEl._map.project(click.latlng), scale = mapEl._map.options.crs.scale(+mapEl.zoom), pcrs = mapEl._map.options.crs.transformation.untransform(point,scale); - this.contextMenu._copyData(`z:${mapEl.zoom}, easting:${pcrs.x.toFixed(2)}, northing:${pcrs.y.toFixed(2)}`); + this.contextMenu._copyData(`easting:${pcrs.x.toFixed(2)}, northing:${pcrs.y.toFixed(2)}`); }, _copyTile: function(e){ @@ -453,14 +462,16 @@ export var ContextMenu = L.Handler.extend({ this._showAtPoint(e.containerPoint, e, this._layerMenu); } else if(elem.classList.contains("leaflet-container") || elem.classList.contains("mapml-debug-extent") || elem.tagName === "path") { - this._layerClicked = undefined; + let layerList = this._map.options.mapEl.layers; + this._layerClicked = Array.from(layerList).find(el => el.checked); // the 'hidden' attribute must be removed before any attempt to get the size of container this._container.removeAttribute('hidden'); this._showAtPoint(e.containerPoint, e, this._container); + this._updateCS(); } if(e.originalEvent.button === 0 || e.originalEvent.button === -1){ this._keyboardEvent = true; - if(this._layerClicked){ + if(this._layerClicked.className.includes('mapml-layer-item')){ let activeEl = document.activeElement; this._elementInFocus = activeEl.shadowRoot.activeElement; this._layerMenuTabs = 1; @@ -587,7 +598,7 @@ export var ContextMenu = L.Handler.extend({ L.DomEvent.stop(e); this._focusOnLayerControl(); } - } else if(key !== 16 && key!== 9 && !(!this._layerClicked && key === 67) && path[0].innerText !== (M.options.locale.cmCopyCoords + " (C)")){ + } else if(key !== 16 && key!== 9 && !(!(this._layerClicked.className.includes('mapml-layer-item')) && key === 67) && path[0].innerText !== (M.options.locale.cmCopyCoords + " (C)")){ this._hide(); } switch(key){ @@ -600,13 +611,9 @@ export var ContextMenu = L.Handler.extend({ this._goBack(e); break; case 67: //C KEY - if(this._layerClicked){ - this._copyLayerExtent(e); - } else { - this._copyCoords({ - latlng:this._map.getCenter() - }); - } + this._copyCoords({ + latlng:this._map.getCenter() + }); break; case 68: //D KEY this._toggleDebug(e); @@ -618,7 +625,7 @@ export var ContextMenu = L.Handler.extend({ this._goForward(e); break; case 76: //L KEY - if(this._layerClicked) + if(this._layerClicked.className.includes('mapml-layer-item')) this._copyLayer(e); break; case 80: //P KEY @@ -634,7 +641,7 @@ export var ContextMenu = L.Handler.extend({ this._viewSource(e); break; case 90: //Z KEY - if(this._layerClicked) + if(this._layerClicked.className.includes('mapml-layer-item')) this._zoomToLayer(e); break; } diff --git a/src/mapml/options.js b/src/mapml/options.js index 131e62b8a..1d66db4ee 100644 --- a/src/mapml/options.js +++ b/src/mapml/options.js @@ -1,19 +1,21 @@ export var Options = { featureIndexOverlayOption: false, announceMovement: false, + defaultExtCoor: 'pcrs', + defaultLocCoor: 'gcrs', locale: { cmBack: "Back", cmForward: "Forward", cmReload: "Reload", cmToggleControls: "Toggle Controls", - cmCopyCoords: "Copy Coordinates", + cmCopyCoords: "Copy", + cmCopyMapML: "Map", + cmCopyExtent: "Extent", + cmCopyLocation: "Location", cmToggleDebug: "Toggle Debug Mode", - cmCopyMapML: "Copy MapML", cmPasteLayer: "Paste", cmViewSource: "View Map Source", - cmCopyAll: "All", lmZoomToLayer: "Zoom To Layer", - lmCopyExtent: "Copy Extent", lmCopyLayer: "Copy Layer", lcOpacity: "Opacity", btnZoomIn: "Zoom in", diff --git a/test/e2e/core/layerContextMenu.test.js b/test/e2e/core/layerContextMenu.test.js index a6ade23bd..01b834a9e 100644 --- a/test/e2e/core/layerContextMenu.test.js +++ b/test/e2e/core/layerContextMenu.test.js @@ -27,18 +27,6 @@ test.describe("Playwright Layer Context Menu Tests", () => { expect(menuDisplay).toEqual("block"); }); - test("Layer context menu copy layer extent", async () => { - await page.keyboard.press("c"); - await page.click("body > textarea#messageExtent"); - await page.keyboard.press("Control+v"); - const copyValue = await page.$eval( - "body > textarea#messageExtent", - (text) => text.value - ); - - expect(copyValue).toEqual(""); - }); - test("Layer context menu copy layer", async () => { await page.hover("div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div"); await page.click("div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div > section > div.leaflet-control-layers-overlays > fieldset:nth-child(1) > div:nth-child(1) > label > span", diff --git a/test/e2e/core/mapContextMenu.test.js b/test/e2e/core/mapContextMenu.test.js index 945d4fab3..944701595 100644 --- a/test/e2e/core/mapContextMenu.test.js +++ b/test/e2e/core/mapContextMenu.test.js @@ -15,6 +15,16 @@ let expectedFirstTCRS = [ { horizontal: 659, vertical: 730 }, { horizontal: 771.4482758620691, vertical: 753.8620689655173 }]; +// expected extent top-left and bottom-right values at different zoom levels +let expectedExtentPCRS_0 = [ + {horizontal: -9373489.01871137, vertical: 11303798.154262971}, + {horizontal: 9808841.01261536, vertical: -11714997.883329108} +]; +let expectedExtentPCRS_1 = [ + {horizontal: -5396793.565320458, vertical: 6520121.920243833}, + {horizontal: 5848020.590974525, vertical: -6973655.06731014} +]; + test.describe("Playwright Map Context Menu Tests", () => { let page; let context; @@ -57,7 +67,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("Copy Coordinates (C)"); + expect(name).toEqual("Copy (C)"); }); test("Submenu opens on C with focus on first item", async () => { @@ -68,7 +78,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("tile"); + expect(name).toEqual("Map"); }); test("Context menu displaying on map", async () => { @@ -221,31 +231,89 @@ test.describe("Playwright Map Context Menu Tests", () => { }); }); - test("Submenu, copy all coordinate systems using tab + enter to access", async () => { - await page.click("body > map"); - await page.keyboard.press("Shift+F10"); - - for (let i = 0; i < 3; i++) + test("Submenu, copy using tab + enter to access", async () => { + await page.reload(); + let expected = ""; + const currDefCS = await page.$eval( + "body > map", + (map) => ({ext: map._map.contextMenu.defExtCS, loc: map._map.contextMenu.defLocCS}) + ); + for (let i = 0; i < 4; i++) { + await page.click("body > map"); + // zoom in + if (i === 2) { + await page.keyboard.press('Tab'); + await page.keyboard.press('Enter'); + await page.waitForTimeout(1000); + await page.click("body > map"); + } + await page.keyboard.press("Shift+F10"); + // set cs to pcrs for copying extent test, gcrs for copying location test + await page.$eval( + "body > map", + (map) => { + map._map.contextMenu.defExtCS = 'pcrs'; + map._map.contextMenu.defLocCS = 'gcrs'; + } + ); await page.keyboard.press("Tab"); + if (i >= 2) { + for (let k = 0; k < 2; k++) { + await page.keyboard.press("Tab"); + } + } - await page.keyboard.press("Enter"); - await page.click("#mapml-copy-submenu > button:nth-child(10)"); + await page.keyboard.press("Enter"); - await page.click("body > textarea#coord"); - await page.keyboard.press("Control+v"); - const copyValue = await page.$eval( - "body > textarea#coord", - (text) => text.value + for (let j = 0; j < i; j++) { + if ((i === 2 && j === 1) || (i === 3 && j === 2)) { + break; + } + await page.keyboard.press("Tab"); + } + await page.keyboard.press("Enter"); + await page.click("body > textarea#coord"); + await page.keyboard.press("Control+v"); + const copyValue = await page.$eval( + "body > textarea#coord", + (text) => text.value + ); + switch(i) { + case 0: + expected = ` + + + + `; + break; + case 1: + // first test for copying extent (zoom = 0) + expected = ``; + break; + case 2: + // second test for copying extent (zoom = 1) + expected = ``; + break; + case 3: + expected = "lon :-92.062002, lat:46.922393"; + break; + } + expect(copyValue).toEqual(expected); + await page.locator("body > textarea#coord").fill(''); + }; + await page.$eval( + "body > map", + (map, currDefCS) => { + map._map.contextMenu.defExtCS = currDefCS.ext; + map._map.contextMenu.defLocCS = currDefCS.loc; + }, + currDefCS ); - let expected = "z:1\n"; - expected += "tile: i:30, j:50\n"; - expected += "tilematrix: column:6, row:6\n"; - expected += "map: i:250, j:300\n"; - expected += "tcrs: x:1566, y:1586\n"; - expected += "pcrs: easting:562957.94, northing:3641449.50\n"; - expected += "gcrs: lon :-62.729466, lat:80.881921"; - - expect(copyValue).toEqual(expected); }); test("Paste valid Layer to map", async () => { @@ -339,7 +407,7 @@ test.describe("Playwright Map Context Menu Tests", () => { expect(contextMenuSize.x <= mapSize.x && contextMenuSize.y <= mapSize.y).toBeTruthy(); // move the mouse from "copy" to another button in the main contextmenu - await contextMenu.hover(); + await page.hover("div > div.mapml-contextmenu > button:nth-child(6)"); const submenu = await page.locator('div > div#mapml-copy-submenu').first(); expect(await submenu.isVisible()).toBeTruthy(); await page.hover("div > div.mapml-contextmenu > button:nth-child(5)"); @@ -378,4 +446,4 @@ test.describe("Playwright Map Context Menu Tests", () => { expect(fwdBtn).toEqual(false); expect(reloadBtn).toEqual(false); }); -}); \ No newline at end of file +}); diff --git a/test/e2e/mapml-viewer/mapml-viewer.html b/test/e2e/mapml-viewer/mapml-viewer.html index 5b95311dd..3e1300ec8 100644 --- a/test/e2e/mapml-viewer/mapml-viewer.html +++ b/test/e2e/mapml-viewer/mapml-viewer.html @@ -37,7 +37,7 @@ - + diff --git a/test/e2e/mapml-viewer/viewerContextMenu.test.js b/test/e2e/mapml-viewer/viewerContextMenu.test.js index 409573a86..416843d91 100644 --- a/test/e2e/mapml-viewer/viewerContextMenu.test.js +++ b/test/e2e/mapml-viewer/viewerContextMenu.test.js @@ -15,6 +15,16 @@ let expectedFirstTCRS = [ { horizontal: 659, vertical: 730 }, { horizontal: 771.4482758620691, vertical: 753.8620689655173 }]; +// expected extent top-left and bottom-right value at different zoom levels (0 and 1) +let expectedExtentPCRS_0 = [ + {horizontal: -9373489.01871137, vertical: 11303798.154262971}, + {horizontal: 9808841.01261536, vertical: -11714997.883329108} +]; +let expectedExtentPCRS_1 = [ + {horizontal: -5396793.565320458, vertical: 6520121.920243833}, + {horizontal: 5848020.590974525, vertical: -6973655.06731014} +]; + test.describe("Playwright mapml-viewer Context Menu (and api) Tests", () => { let page; let context; @@ -49,7 +59,7 @@ test.describe("Playwright mapml-viewer Context Menu (and api) Tests", () => { const nameHandle = await page.evaluateHandle(name => name.outerText, resultHandle); let name = await nameHandle.jsonValue(); await nameHandle.dispose(); - expect(name).toEqual("Copy Coordinates (C)"); + expect(name).toEqual("Copy (C)"); }); @@ -72,7 +82,7 @@ test.describe("Playwright mapml-viewer Context Menu (and api) Tests", () => { const nameHandle = await page.evaluateHandle(name => name.outerText, resultHandle); let name = await nameHandle.jsonValue(); await nameHandle.dispose(); - expect(name).toEqual("tile"); + expect(name).toEqual("Map"); }); test("Context menu displaying on map", async () => { @@ -226,57 +236,89 @@ test.describe("Playwright mapml-viewer Context Menu (and api) Tests", () => { }); }); - test("Submenu, copy all coordinate systems using tab + enter to access", async () => { - await page.click("body > mapml-viewer"); - await page.keyboard.press("Shift+F10"); - for (let i = 0; i < 3; i++) - await page.keyboard.press("Tab"); - - await page.keyboard.press("Enter"); - - await page.click("#mapml-copy-submenu > button:nth-child(10)"); - - await page.click("body > textarea"); - await page.keyboard.press("Control+v"); - const copyValue = await page.$eval( - "body > textarea", - (text) => text.value - ); - let expected = "z:1\n"; - expected += "tile: i:30, j:50\n"; - expected += "tilematrix: column:6, row:6\n"; - expected += "map: i:250, j:300\n"; - expected += "tcrs: x:1566, y:1586\n"; - expected += "pcrs: easting:562957.94, northing:3641449.50\n"; - expected += "gcrs: lon :-62.729466, lat:80.881921"; - - expect(copyValue).toEqual(expected); - }); - - test("Submenu, copy all coordinate systems", async () => { - await page.click("body > mapml-viewer"); - await page.keyboard.press("Shift+F10"); - await page.keyboard.press("c"); - - await page.click("#mapml-copy-submenu > button:nth-child(10)"); - - await page.click("body > textarea"); - await page.keyboard.press("Control+a"); - await page.keyboard.press("Backspace"); - await page.keyboard.press("Control+v"); - const copyValue = await page.$eval( - "body > textarea", - (text) => text.value + test("Submenu, copy using tab + enter to access", async () => { + await page.reload(); + let expected = ""; + const currDefCS = await page.$eval( + "body > mapml-viewer", + (map) => ({ext: map._map.contextMenu.defExtCS, loc: map._map.contextMenu.defLocCS}) ); - let expected = "z:1\n"; - expected += "tile: i:30, j:50\n"; - expected += "tilematrix: column:6, row:6\n"; - expected += "map: i:250, j:300\n"; - expected += "tcrs: x:1566, y:1586\n"; - expected += "pcrs: easting:562957.94, northing:3641449.50\n"; - expected += "gcrs: lon :-62.729466, lat:80.881921"; - - expect(copyValue).toEqual(expected); + // set cs to pcrs for copying extent test, gcrs for copying location test + for (let i = 0; i < 4; i++) { + await page.click("body > mapml-viewer"); + // zoom in + if (i === 2) { + await page.keyboard.press('Tab'); + await page.keyboard.press('Enter'); + await page.waitForTimeout(1000); + await page.click("body > mapml-viewer"); + } + await page.keyboard.press("Shift+F10"); + await page.$eval( + "body > mapml-viewer", + (map) => { + map._map.contextMenu.defExtCS = 'pcrs'; + map._map.contextMenu.defLocCS = 'gcrs'; + } + ) + await page.keyboard.press("Tab"); + if (i >= 2) { + for (let k = 0; k < 2; k++) { + await page.keyboard.press("Tab"); + } + } + + await page.keyboard.press("Enter"); + + for (let j = 0; j < i; j++) { + if ((i === 2 && j === 1) || (i === 3 && j === 2)) { + break; + } + await page.keyboard.press("Tab"); + } + await page.keyboard.press("Enter"); + await page.click("body > textarea#coord"); + await page.keyboard.press("Control+v"); + const copyValue = await page.$eval( + "body > textarea#coord", + (text) => text.value + ); + switch(i) { + case 0: + expected = ` + + + + `; + break; + case 1: + // first test for copying extent (zoom = 0) + expected = ``; + break; + case 2: + // second test for copying extent (zoom = 1) + expected = ``; + break; + case 3: + expected = "lon :-92.062002, lat:46.922393"; + break; + } + expect(copyValue).toEqual(expected); + await page.locator("body > textarea#coord").fill(''); + } + await page.$eval( + "body > mapml-viewer", + (map, currDefCS) => { + map._map.contextMenu.defExtCS = currDefCS.ext; + map._map.contextMenu.defLocCS = currDefCS.loc; + }, + currDefCS + ) }); test("Context menu, All buttons enabled when fwd and back history present", async () => { @@ -311,4 +353,4 @@ test.describe("Playwright mapml-viewer Context Menu (and api) Tests", () => { expect(fwdBtn).toEqual(false); expect(reloadBtn).toEqual(false); }); -}); \ No newline at end of file +}); From 41eca0f0a80e3e3bd2b61da481b0532eb7894ca9 Mon Sep 17 00:00:00 2001 From: Peter Rushforth Date: Tue, 7 Feb 2023 20:51:43 -0500 Subject: [PATCH 2/7] Reorganize context menu - tests will break --- src/mapml/handlers/ContextMenu.js | 50 +++++++++++++++++-------------- 1 file changed, 28 insertions(+), 22 deletions(-) diff --git a/src/mapml/handlers/ContextMenu.js b/src/mapml/handlers/ContextMenu.js index 268efb669..57a99eaf8 100644 --- a/src/mapml/handlers/ContextMenu.js +++ b/src/mapml/handlers/ContextMenu.js @@ -6,6 +6,8 @@ to deal in the Software without restriction, including without limitation the ri and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. */ +/* global M */ + export var ContextMenu = L.Handler.extend({ _touchstart: L.Browser.msPointer ? 'MSPointerDown' : L.Browser.pointer ? 'pointerdown' : 'touchstart', @@ -16,22 +18,18 @@ export var ContextMenu = L.Handler.extend({ this._items = [ { text: M.options.locale.cmBack + " (B)", - callback:this._goBack, + callback:this._goBack }, { text: M.options.locale.cmForward + " (F)", - callback:this._goForward, + callback:this._goForward }, { text: M.options.locale.cmReload + " (R)", - callback:this._reload, - }, - { - spacer:"-", + callback:this._reload }, { - text: M.options.locale.cmToggleControls + " (T)", - callback:this._toggleControls, + spacer:"-" }, { text: M.options.locale.cmCopyCoords + " (C)", @@ -41,30 +39,36 @@ export var ContextMenu = L.Handler.extend({ submenu:[ { text: M.options.locale.cmCopyMapML, - callback:this._copyMapML, + callback:this._copyMapML }, { text: M.options.locale.cmCopyExtent, - callback:this._copyExtent, + callback:this._copyExtent }, { text: M.options.locale.cmCopyLocation, - callback:this._copyLocation, + callback:this._copyLocation } ] }, { - text: M.options.locale.cmToggleDebug + " (D)", - callback:this._toggleDebug, + text: M.options.locale.cmPasteLayer + " (P)", + callback:this._paste }, { - text: M.options.locale.cmPasteLayer + " (P)", - callback:this._paste, + spacer:"-" }, { - text: M.options.locale.cmViewSource + " (V)", - callback:this._viewSource, + text: M.options.locale.cmToggleControls + " (T)", + callback:this._toggleControls + }, { + text: M.options.locale.cmToggleDebug + " (D)", + callback:this._toggleDebug }, + { + text: M.options.locale.cmViewSource + " (V)", + callback:this._viewSource + } ]; // setting the default cs for copying location and extent @@ -79,7 +83,7 @@ export var ContextMenu = L.Handler.extend({ { text: M.options.locale.lmCopyLayer + " (L)", callback:this._copyLayer - }, + } ]; this._mapMenuVisible = false; this._keyboardEvent = false; @@ -87,7 +91,7 @@ export var ContextMenu = L.Handler.extend({ this._container = L.DomUtil.create("div", "mapml-contextmenu", map._container); this._container.setAttribute('hidden', ''); - for (let i = 0; i < 6; i++) { + for (let i = 0; i < 5; i++) { this._items[i].el = this._createItem(this._container, this._items[i]); } @@ -97,13 +101,15 @@ export var ContextMenu = L.Handler.extend({ this._clickEvent = null; - for(let i =0;i Date: Tue, 7 Feb 2023 21:41:04 -0500 Subject: [PATCH 3/7] Fix tests, still a few to fix --- test/e2e/mapml-viewer/mapml-viewer.test.js | 6 ++++-- test/e2e/mapml-viewer/viewerContextMenu.test.js | 17 +++++++++-------- 2 files changed, 13 insertions(+), 10 deletions(-) diff --git a/test/e2e/mapml-viewer/mapml-viewer.test.js b/test/e2e/mapml-viewer/mapml-viewer.test.js index 30b4baacc..baa2fd316 100644 --- a/test/e2e/mapml-viewer/mapml-viewer.test.js +++ b/test/e2e/mapml-viewer/mapml-viewer.test.js @@ -112,9 +112,11 @@ test.describe("Playwright mapml-viewer Element Tests", () => { let children = await page.$eval(".leaflet-top.leaflet-right", (div) => div.childElementCount); expect(children).toEqual(0); await page.click("body > mapml-viewer", { button: "right" }); - await page.click("div > div.mapml-contextmenu > button:nth-child(5)"); + // toggle controls + await page.click(".mapml-contextmenu > button:nth-of-type(6)"); await page.click("body > mapml-viewer", { button: "right" }); - await page.click("div > div.mapml-contextmenu > button:nth-child(5)"); + // toggle controls + await page.click(".mapml-contextmenu > button:nth-of-type(6)"); children = await page.$eval(".leaflet-top.leaflet-right", (div) => div.childElementCount); expect(children).toEqual(0); diff --git a/test/e2e/mapml-viewer/viewerContextMenu.test.js b/test/e2e/mapml-viewer/viewerContextMenu.test.js index 416843d91..0eb39b6da 100644 --- a/test/e2e/mapml-viewer/viewerContextMenu.test.js +++ b/test/e2e/mapml-viewer/viewerContextMenu.test.js @@ -30,6 +30,7 @@ test.describe("Playwright mapml-viewer Context Menu (and api) Tests", () => { let context; test.beforeAll(async () => { context = await chromium.launchPersistentContext(''); + await context.grantPermissions(["clipboard-read", "clipboard-write"]); page = context.pages().find((page) => page.url() === 'about:blank') || await context.newPage(); page = await context.newPage(); await page.goto("mapml-viewer.html"); @@ -48,7 +49,7 @@ test.describe("Playwright mapml-viewer Context Menu (and api) Tests", () => { const nameHandle = await page.evaluateHandle(name => name.outerText, resultHandle); let name = await nameHandle.jsonValue(); await nameHandle.dispose(); - expect(name).toEqual("Toggle Controls (T)"); + expect(name).toEqual("Copy (C)"); }); test("Context menu tab goes to next item", async () => { @@ -59,7 +60,7 @@ test.describe("Playwright mapml-viewer Context Menu (and api) Tests", () => { const nameHandle = await page.evaluateHandle(name => name.outerText, resultHandle); let name = await nameHandle.jsonValue(); await nameHandle.dispose(); - expect(name).toEqual("Copy (C)"); + expect(name).toEqual("Paste (P)"); }); @@ -71,7 +72,7 @@ test.describe("Playwright mapml-viewer Context Menu (and api) Tests", () => { const nameHandle = await page.evaluateHandle(name => name.outerText, resultHandle); let name = await nameHandle.jsonValue(); await nameHandle.dispose(); - expect(name).toEqual("Toggle Controls (T)"); + expect(name).toEqual("Copy (C)"); }); test("Submenu opens on C with focus on first item", async () => { @@ -176,7 +177,7 @@ test.describe("Playwright mapml-viewer Context Menu (and api) Tests", () => { ); await page.click("body > mapml-viewer", { button: "right" }); - await page.click("div > div.mapml-contextmenu > button:nth-child(5)"); + await page.click("div > div.mapml-contextmenu > button:nth-of-type(6)"); const controlsOff = await page.$eval( "div > div.leaflet-control-container > div.leaflet-top.leaflet-left", @@ -194,7 +195,7 @@ test.describe("Playwright mapml-viewer Context Menu (and api) Tests", () => { ); await page.click("body > mapml-viewer", { button: "right" }); - await page.click("div > div.mapml-contextmenu > button:nth-child(5)"); + await page.click("div > div.mapml-contextmenu > button:nth-of-type(6)"); const controlsOff = await page.$eval( "div > div.leaflet-control-container > div.leaflet-top.leaflet-left", @@ -238,7 +239,7 @@ test.describe("Playwright mapml-viewer Context Menu (and api) Tests", () => { test("Submenu, copy using tab + enter to access", async () => { await page.reload(); - let expected = ""; + let expected = ""; const currDefCS = await page.$eval( "body > mapml-viewer", (map) => ({ext: map._map.contextMenu.defExtCS, loc: map._map.contextMenu.defLocCS}) @@ -260,7 +261,7 @@ test.describe("Playwright mapml-viewer Context Menu (and api) Tests", () => { map._map.contextMenu.defExtCS = 'pcrs'; map._map.contextMenu.defLocCS = 'gcrs'; } - ) + ); await page.keyboard.press("Tab"); if (i >= 2) { for (let k = 0; k < 2; k++) { @@ -318,7 +319,7 @@ test.describe("Playwright mapml-viewer Context Menu (and api) Tests", () => { map._map.contextMenu.defLocCS = currDefCS.loc; }, currDefCS - ) + ); }); test("Context menu, All buttons enabled when fwd and back history present", async () => { From 8611ae8f2289ddbcf29483bab277e44dd09f7eca Mon Sep 17 00:00:00 2001 From: yhy0217 Date: Wed, 8 Feb 2023 11:58:04 -0500 Subject: [PATCH 4/7] modify tests and menu styling things --- src/mapml/handlers/ContextMenu.js | 16 +- test/e2e/core/mapContextMenu.test.js | 187 +++++++++------- .../mapml-viewer/viewerContextMenu.test.js | 208 ++++++++++++------ 3 files changed, 257 insertions(+), 154 deletions(-) diff --git a/src/mapml/handlers/ContextMenu.js b/src/mapml/handlers/ContextMenu.js index 57a99eaf8..209587112 100644 --- a/src/mapml/handlers/ContextMenu.js +++ b/src/mapml/handlers/ContextMenu.js @@ -603,8 +603,8 @@ export var ContextMenu = L.Handler.extend({ if(this._layerMenuTabs === 0 || this._layerMenuTabs === 4 || key === 27){ L.DomEvent.stop(e); this._focusOnLayerControl(); - } - } else if(key !== 16 && key!== 9 && !(!(this._layerClicked.className.includes('mapml-layer-item')) && key === 67) && path[0].innerText !== (M.options.locale.cmCopyCoords + " (C)")){ + } + } else if(key !== 16 && key!== 9 && !(!(this._layerClicked.className.includes('mapml-layer-item')) && key === 67) && (path[0].innerText !== (M.options.locale.cmCopyCoords + " (C)") || key === 27)){ this._hide(); } switch(key){ @@ -673,16 +673,8 @@ export var ContextMenu = L.Handler.extend({ menu.style.right = 'auto'; } - // height difference between the main contextmenu and submenu - const heightDiff = 73; - if (click.containerPoint.y + menuHeight + heightDiff > mapSize.y) { - menu.style.top = 'auto'; - // to make submenu show completely when clicking at the bottom of the map - menu.style.bottom = 32 + 'px'; - } else { - menu.style.top = 100 + 'px'; - menu.style.bottom = 'auto'; - } + menu.style.top = 100 - 22 + 'px'; + menu.style.bottom = 'auto'; if(this._keyboardEvent)menu.firstChild.focus(); }, diff --git a/test/e2e/core/mapContextMenu.test.js b/test/e2e/core/mapContextMenu.test.js index 944701595..cc0c126f3 100644 --- a/test/e2e/core/mapContextMenu.test.js +++ b/test/e2e/core/mapContextMenu.test.js @@ -28,6 +28,7 @@ let expectedExtentPCRS_1 = [ test.describe("Playwright Map Context Menu Tests", () => { let page; let context; + let currExtCS, currLocCS; test.beforeAll(async () => { context = await chromium.launchPersistentContext(''); await context.grantPermissions(["clipboard-read", "clipboard-write"]); @@ -56,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("Toggle Controls (T)"); + expect(name).toEqual("Copy (C)"); }); test("Context menu tab goes to next item", async () => { @@ -67,7 +68,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("Copy (C)"); + expect(name).toEqual("Paste (P)"); }); test("Submenu opens on C with focus on first item", async () => { @@ -172,7 +173,7 @@ test.describe("Playwright Map Context Menu Tests", () => { ); await page.click("body > map", { button: "right" }); - await page.click("div > div.mapml-contextmenu > button:nth-child(5)"); + await page.click("div > div.mapml-contextmenu > button:nth-of-type(6)"); const controlsOff = await page.$eval( "div > div.leaflet-control-container > div.leaflet-top.leaflet-left", @@ -190,7 +191,7 @@ test.describe("Playwright Map Context Menu Tests", () => { ); await page.click("body > map", { button: "right" }); - await page.click("div > div.mapml-contextmenu > button:nth-child(5)"); + await page.click("div > div.mapml-contextmenu > button:nth-of-type(6)"); const controlsOff = await page.$eval( "div > div.leaflet-control-container > div.leaflet-top.leaflet-left", @@ -231,56 +232,20 @@ test.describe("Playwright Map Context Menu Tests", () => { }); }); - test("Submenu, copy using tab + enter to access", async () => { + test("Submenu, copy map (MapML)", async () => { await page.reload(); - let expected = ""; - const currDefCS = await page.$eval( - "body > map", - (map) => ({ext: map._map.contextMenu.defExtCS, loc: map._map.contextMenu.defLocCS}) + await page.click("body > map"); + await page.keyboard.press("Shift+F10"); + await page.keyboard.press("Enter"); + await page.keyboard.press("Enter"); + + await page.click("body > textarea#coord"); + await page.keyboard.press("Control+v"); + const copyValue = await page.$eval( + "body > textarea#coord", + (text) => text.value ); - for (let i = 0; i < 4; i++) { - await page.click("body > map"); - // zoom in - if (i === 2) { - await page.keyboard.press('Tab'); - await page.keyboard.press('Enter'); - await page.waitForTimeout(1000); - await page.click("body > map"); - } - await page.keyboard.press("Shift+F10"); - // set cs to pcrs for copying extent test, gcrs for copying location test - await page.$eval( - "body > map", - (map) => { - map._map.contextMenu.defExtCS = 'pcrs'; - map._map.contextMenu.defLocCS = 'gcrs'; - } - ); - await page.keyboard.press("Tab"); - if (i >= 2) { - for (let k = 0; k < 2; k++) { - await page.keyboard.press("Tab"); - } - } - - await page.keyboard.press("Enter"); - - for (let j = 0; j < i; j++) { - if ((i === 2 && j === 1) || (i === 3 && j === 2)) { - break; - } - await page.keyboard.press("Tab"); - } - await page.keyboard.press("Enter"); - await page.click("body > textarea#coord"); - await page.keyboard.press("Control+v"); - const copyValue = await page.$eval( - "body > textarea#coord", - (text) => text.value - ); - switch(i) { - case 0: - expected = ` + const expected = ` `; - break; - case 1: - // first test for copying extent (zoom = 0) - expected = ``; - break; - case 2: - // second test for copying extent (zoom = 1) - expected = ``; - break; - case 3: - expected = "lon :-92.062002, lat:46.922393"; - break; - } - expect(copyValue).toEqual(expected); - await page.locator("body > textarea#coord").fill(''); - }; + expect(copyValue).toEqual(expected); + await page.locator("body > textarea#coord").fill(''); + }); + + test("Submenu, copy extent with zoom level = 0", async () => { + currExtCS = await page.$eval( + "body > map", + (map) => (map._map.contextMenu.defExtCS) + ); + // set cs to pcrs for copying extent test + await page.$eval( + "body > map", + (map) => {map._map.contextMenu.defExtCS = 'pcrs';} + ); + await page.click("body > map"); + await page.keyboard.press("Shift+F10"); + await page.keyboard.press("Enter"); + await page.keyboard.press("Tab"); + await page.keyboard.press("Enter"); + + await page.click("body > textarea#coord"); + await page.keyboard.press("Control+v"); + const copyValue = await page.$eval( + "body > textarea#coord", + (text) => text.value + ); + const expected = ``; + expect(copyValue).toEqual(expected); + await page.locator("body > textarea#coord").fill(''); + }); + + test("Submenu, copy extent with zoom level = 1", async () => { + // zoom in + await page.click("body > map"); + await page.keyboard.press('Tab'); + await page.keyboard.press('Enter'); + await page.waitForTimeout(1000); + + await page.click("body > map"); + await page.keyboard.press("Shift+F10"); + await page.keyboard.press("Tab"); + await page.keyboard.press("Tab"); + await page.keyboard.press("Enter"); + await page.keyboard.press("Tab"); + await page.keyboard.press("Enter"); + + await page.click("body > textarea#coord"); + await page.keyboard.press("Control+v"); + const copyValue = await page.$eval( + "body > textarea#coord", + (text) => text.value + ); + const expected = ``; + expect(copyValue).toEqual(expected); + await page.locator("body > textarea#coord").fill(''); + await page.$eval( + "body > map", + (map, currExtCS) => { + map._map.contextMenu.defExtCS = currExtCS; + }, + currExtCS + ); + }); + + test("Submenu, copy location", async () => { + currLocCS = await page.$eval( + "body > map", + (map) => (map._map.contextMenu.defLocCS) + ) + // set cs to pcrs for copying location test + await page.$eval( + "body > map", + (map) => {map._map.contextMenu.defLocCS = 'gcrs';} + ); + await page.click("body > map"); + await page.keyboard.press("Shift+F10"); + await page.keyboard.press("Tab"); + await page.keyboard.press("Tab"); + await page.keyboard.press("Enter"); + await page.keyboard.press("Tab"); + await page.keyboard.press("Tab"); + await page.keyboard.press("Enter"); + await page.click("body > textarea#coord"); + await page.keyboard.press("Control+v"); + const copyValue = await page.$eval( + "body > textarea#coord", + (text) => text.value + ); + const expected = "lon :-92.062002, lat:46.922393"; + expect(copyValue).toEqual(expected); + await page.locator("body > textarea#coord").fill(''); await page.$eval( "body > map", - (map, currDefCS) => { - map._map.contextMenu.defExtCS = currDefCS.ext; - map._map.contextMenu.defLocCS = currDefCS.loc; + (map, currLocCS) => { + map._map.contextMenu.defLocCS = currLocCS; }, - currDefCS + currLocCS ); }); @@ -407,10 +446,10 @@ test.describe("Playwright Map Context Menu Tests", () => { expect(contextMenuSize.x <= mapSize.x && contextMenuSize.y <= mapSize.y).toBeTruthy(); // move the mouse from "copy" to another button in the main contextmenu - await page.hover("div > div.mapml-contextmenu > button:nth-child(6)"); + await page.hover("div > div.mapml-contextmenu > button:nth-of-type(4)"); const submenu = await page.locator('div > div#mapml-copy-submenu').first(); expect(await submenu.isVisible()).toBeTruthy(); - await page.hover("div > div.mapml-contextmenu > button:nth-child(5)"); + await page.hover("div > div.mapml-contextmenu > button:nth-of-type(5)"); expect(await submenu.isHidden()).toBeTruthy(); }); diff --git a/test/e2e/mapml-viewer/viewerContextMenu.test.js b/test/e2e/mapml-viewer/viewerContextMenu.test.js index 0eb39b6da..dc75e5c21 100644 --- a/test/e2e/mapml-viewer/viewerContextMenu.test.js +++ b/test/e2e/mapml-viewer/viewerContextMenu.test.js @@ -28,6 +28,7 @@ let expectedExtentPCRS_1 = [ test.describe("Playwright mapml-viewer Context Menu (and api) Tests", () => { let page; let context; + let currExtCS, currLocCS; test.beforeAll(async () => { context = await chromium.launchPersistentContext(''); await context.grantPermissions(["clipboard-read", "clipboard-write"]); @@ -237,56 +238,20 @@ test.describe("Playwright mapml-viewer Context Menu (and api) Tests", () => { }); }); - test("Submenu, copy using tab + enter to access", async () => { + test("Submenu, copy map (MapML)", async () => { await page.reload(); - let expected = ""; - const currDefCS = await page.$eval( - "body > mapml-viewer", - (map) => ({ext: map._map.contextMenu.defExtCS, loc: map._map.contextMenu.defLocCS}) - ); - // set cs to pcrs for copying extent test, gcrs for copying location test - for (let i = 0; i < 4; i++) { - await page.click("body > mapml-viewer"); - // zoom in - if (i === 2) { - await page.keyboard.press('Tab'); - await page.keyboard.press('Enter'); - await page.waitForTimeout(1000); - await page.click("body > mapml-viewer"); - } - await page.keyboard.press("Shift+F10"); - await page.$eval( - "body > mapml-viewer", - (map) => { - map._map.contextMenu.defExtCS = 'pcrs'; - map._map.contextMenu.defLocCS = 'gcrs'; - } - ); - await page.keyboard.press("Tab"); - if (i >= 2) { - for (let k = 0; k < 2; k++) { - await page.keyboard.press("Tab"); - } - } - - await page.keyboard.press("Enter"); + await page.click("body > mapml-viewer"); + await page.keyboard.press("Shift+F10"); + await page.keyboard.press("Enter"); + await page.keyboard.press("Enter"); - for (let j = 0; j < i; j++) { - if ((i === 2 && j === 1) || (i === 3 && j === 2)) { - break; - } - await page.keyboard.press("Tab"); - } - await page.keyboard.press("Enter"); - await page.click("body > textarea#coord"); - await page.keyboard.press("Control+v"); - const copyValue = await page.$eval( - "body > textarea#coord", - (text) => text.value - ); - switch(i) { - case 0: - expected = ` + await page.click("body > textarea#coord"); + await page.keyboard.press("Control+v"); + const copyValue = await page.$eval( + "body > textarea#coord", + (text) => text.value + ); + const expected = ` `; - break; - case 1: - // first test for copying extent (zoom = 0) - expected = ``; - break; - case 2: - // second test for copying extent (zoom = 1) - expected = ``; - break; - case 3: - expected = "lon :-92.062002, lat:46.922393"; - break; - } - expect(copyValue).toEqual(expected); - await page.locator("body > textarea#coord").fill(''); - } + expect(copyValue).toEqual(expected); + await page.locator("body > textarea#coord").fill(''); + }); + + test("Submenu, copy extent with zoom level = 0", async () => { + currExtCS = await page.$eval( + "body > mapml-viewer", + (map) => (map._map.contextMenu.defExtCS) + ); + // set cs to pcrs for copying extent test await page.$eval( "body > mapml-viewer", - (map, currDefCS) => { - map._map.contextMenu.defExtCS = currDefCS.ext; - map._map.contextMenu.defLocCS = currDefCS.loc; + (map) => {map._map.contextMenu.defExtCS = 'pcrs';} + ); + await page.click("body > mapml-viewer"); + await page.keyboard.press("Shift+F10"); + await page.keyboard.press("Enter"); + await page.keyboard.press("Tab"); + await page.keyboard.press("Enter"); + + await page.click("body > textarea#coord"); + await page.keyboard.press("Control+v"); + const copyValue = await page.$eval( + "body > textarea#coord", + (text) => text.value + ); + const expected = ``; + expect(copyValue).toEqual(expected); + await page.locator("body > textarea#coord").fill(''); + }); + + test("Submenu, copy extent with zoom level = 1", async () => { + // zoom in + await page.click("body > mapml-viewer"); + await page.keyboard.press('Tab'); + await page.keyboard.press('Enter'); + await page.waitForTimeout(1000); + + await page.click("body > mapml-viewer"); + await page.keyboard.press("Shift+F10"); + await page.keyboard.press("Tab"); + await page.keyboard.press("Tab"); + await page.keyboard.press("Enter"); + await page.keyboard.press("Tab"); + await page.keyboard.press("Enter"); + + await page.click("body > textarea#coord"); + await page.keyboard.press("Control+v"); + const copyValue = await page.$eval( + "body > textarea#coord", + (text) => text.value + ); + const expected = ``; + expect(copyValue).toEqual(expected); + await page.locator("body > textarea#coord").fill(''); + await page.$eval( + "body > mapml-viewer", + (map, currExtCS) => { + map._map.contextMenu.defExtCS = currExtCS; }, - currDefCS + currExtCS + ); + }); + + test("Submenu, copy location", async () => { + currLocCS = await page.$eval( + "body > mapml-viewer", + (map) => (map._map.contextMenu.defLocCS) + ) + // set cs to pcrs for copying location test + await page.$eval( + "body > mapml-viewer", + (map) => {map._map.contextMenu.defLocCS = 'gcrs';} + ); + await page.click("body > mapml-viewer"); + await page.keyboard.press("Shift+F10"); + await page.keyboard.press("Tab"); + await page.keyboard.press("Tab"); + await page.keyboard.press("Enter"); + await page.keyboard.press("Tab"); + await page.keyboard.press("Tab"); + await page.keyboard.press("Enter"); + await page.click("body > textarea#coord"); + await page.keyboard.press("Control+v"); + const copyValue = await page.$eval( + "body > textarea#coord", + (text) => text.value + ); + const expected = "lon :-92.062002, lat:46.922393"; + expect(copyValue).toEqual(expected); + await page.locator("body > textarea#coord").fill(''); + await page.$eval( + "body > mapml-viewer", + (map, currLocCS) => { + map._map.contextMenu.defLocCS = currLocCS; + }, + currLocCS ); }); @@ -354,4 +393,37 @@ test.describe("Playwright mapml-viewer Context Menu (and api) Tests", () => { expect(fwdBtn).toEqual(false); expect(reloadBtn).toEqual(false); }); + + test("Context menu, click at margin and move mouse out when submenu is visible", async () => { + // click at the right-bottom margin of map + await page.mouse.wheel(0, 200); + await page.waitForTimeout(200); + await page.click("body > mapml-viewer", { + button: 'right', + position: {x: 495, y: 580} + }); + const contextMenu = await page.locator('div > div.mapml-contextmenu').first(); + expect(await contextMenu.isVisible()).toBeTruthy(); + const mapSize = await page.$eval( + "body > mapml-viewer", + (map) => { return {x: map.width, y: map.height} } + ); + const contextMenuSize = await page.$eval( + "div > div.mapml-contextmenu", + (menu) => { + return { + x: menu.offsetWidth + menu.getBoundingClientRect().left, + y: menu.offsetHeight + menu.getBoundingClientRect().top + } + } + ); + expect(contextMenuSize.x <= mapSize.x && contextMenuSize.y <= mapSize.y).toBeTruthy(); + + // move the mouse from "copy" to another button in the main contextmenu + await page.hover("div > div.mapml-contextmenu > button:nth-of-type(4)"); + const submenu = await page.locator('div > div#mapml-copy-submenu').first(); + expect(await submenu.isVisible()).toBeTruthy(); + await page.hover("div > div.mapml-contextmenu > button:nth-of-type(5)"); + expect(await submenu.isHidden()).toBeTruthy(); + }); }); From 7d54ee96f1cbe85ded6354f34beb40d79d8be2e0 Mon Sep 17 00:00:00 2001 From: yhy0217 Date: Thu, 9 Feb 2023 16:55:14 -0500 Subject: [PATCH 5/7] format codes --- src/mapml/handlers/ContextMenu.js | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/src/mapml/handlers/ContextMenu.js b/src/mapml/handlers/ContextMenu.js index 209587112..e71d6095c 100644 --- a/src/mapml/handlers/ContextMenu.js +++ b/src/mapml/handlers/ContextMenu.js @@ -183,13 +183,11 @@ export var ContextMenu = L.Handler.extend({ if (coord === 'pcrs') { data = ``; } else if (coord === 'gcrs') { - data = ``; + data = ``; } else if (coord === 'tcrs') { - data = ``; + data = ``; } else if (coord === 'tilematrix') { - data = ``; + data = ``; } else { console.log('not support'); } @@ -461,7 +459,9 @@ export var ContextMenu = L.Handler.extend({ let elem = e.originalEvent.target; if(elem.closest("fieldset")){ elem = elem.closest("fieldset"); - elem = (elem.className === "mapml-layer-extent") ? elem.closest("fieldset").parentNode.parentNode.parentNode.querySelector("span") : elem.querySelector("span"); + elem = (elem.className === "mapml-layer-extent") ? + elem.closest("fieldset").parentNode.parentNode.parentNode.querySelector("span") : + elem.querySelector("span"); if(!elem.layer.validProjection) return; this._layerClicked = elem; this._layerMenu.removeAttribute('hidden'); @@ -604,7 +604,9 @@ export var ContextMenu = L.Handler.extend({ L.DomEvent.stop(e); this._focusOnLayerControl(); } - } else if(key !== 16 && key!== 9 && !(!(this._layerClicked.className.includes('mapml-layer-item')) && key === 67) && (path[0].innerText !== (M.options.locale.cmCopyCoords + " (C)") || key === 27)){ + } else if(key !== 16 && key!== 9 && + !(!(this._layerClicked.className.includes('mapml-layer-item')) && key === 67) && + (path[0].innerText !== (M.options.locale.cmCopyCoords + " (C)") || key === 27)){ this._hide(); } switch(key){ From e4e2b0c583413e0ced0ad5246db64d8a79c949e4 Mon Sep 17 00:00:00 2001 From: yhy0217 Date: Fri, 10 Feb 2023 10:52:00 -0500 Subject: [PATCH 6/7] truncate PCRS values to integers --- src/mapml/handlers/ContextMenu.js | 4 ++-- test/e2e/core/mapContextMenu.test.js | 8 ++++---- test/e2e/mapml-viewer/viewerContextMenu.test.js | 8 ++++---- 3 files changed, 10 insertions(+), 10 deletions(-) diff --git a/src/mapml/handlers/ContextMenu.js b/src/mapml/handlers/ContextMenu.js index e71d6095c..d2bf313b7 100644 --- a/src/mapml/handlers/ContextMenu.js +++ b/src/mapml/handlers/ContextMenu.js @@ -181,7 +181,7 @@ export var ContextMenu = L.Handler.extend({ case 'MapML': default: if (coord === 'pcrs') { - data = ``; + data = ``; } else if (coord === 'gcrs') { data = ``; } else if (coord === 'tcrs') { @@ -312,7 +312,7 @@ export var ContextMenu = L.Handler.extend({ point = mapEl._map.project(click.latlng), scale = mapEl._map.options.crs.scale(+mapEl.zoom), pcrs = mapEl._map.options.crs.transformation.untransform(point,scale); - this.contextMenu._copyData(`easting:${pcrs.x.toFixed(2)}, northing:${pcrs.y.toFixed(2)}`); + this.contextMenu._copyData(`easting:${Math.trunc(pcrs.x)}, northing:${Math.trunc(pcrs.y)}`); }, _copyTile: function(e){ diff --git a/test/e2e/core/mapContextMenu.test.js b/test/e2e/core/mapContextMenu.test.js index cc0c126f3..bd23d4974 100644 --- a/test/e2e/core/mapContextMenu.test.js +++ b/test/e2e/core/mapContextMenu.test.js @@ -17,12 +17,12 @@ let expectedFirstTCRS = [ // expected extent top-left and bottom-right values at different zoom levels let expectedExtentPCRS_0 = [ - {horizontal: -9373489.01871137, vertical: 11303798.154262971}, - {horizontal: 9808841.01261536, vertical: -11714997.883329108} + {horizontal: -9373489, vertical: 11303798}, + {horizontal: 9808841, vertical: -11714997} ]; let expectedExtentPCRS_1 = [ - {horizontal: -5396793.565320458, vertical: 6520121.920243833}, - {horizontal: 5848020.590974525, vertical: -6973655.06731014} + {horizontal: -5396793, vertical: 6520121}, + {horizontal: 5848020, vertical: -6973655} ]; test.describe("Playwright Map Context Menu Tests", () => { diff --git a/test/e2e/mapml-viewer/viewerContextMenu.test.js b/test/e2e/mapml-viewer/viewerContextMenu.test.js index dc75e5c21..4f6de7f8b 100644 --- a/test/e2e/mapml-viewer/viewerContextMenu.test.js +++ b/test/e2e/mapml-viewer/viewerContextMenu.test.js @@ -17,12 +17,12 @@ let expectedFirstTCRS = [ // expected extent top-left and bottom-right value at different zoom levels (0 and 1) let expectedExtentPCRS_0 = [ - {horizontal: -9373489.01871137, vertical: 11303798.154262971}, - {horizontal: 9808841.01261536, vertical: -11714997.883329108} + {horizontal: -9373489, vertical: 11303798}, + {horizontal: 9808841, vertical: -11714997} ]; let expectedExtentPCRS_1 = [ - {horizontal: -5396793.565320458, vertical: 6520121.920243833}, - {horizontal: 5848020.590974525, vertical: -6973655.06731014} + {horizontal: -5396793, vertical: 6520121}, + {horizontal: 5848020, vertical: -6973655} ]; test.describe("Playwright mapml-viewer Context Menu (and api) Tests", () => { From 308ca9e197f827cbd9e901afad6e74a1a2a6fd5c Mon Sep 17 00:00:00 2001 From: yhy0217 Date: Fri, 10 Feb 2023 11:44:27 -0500 Subject: [PATCH 7/7] do rounding instead of truncation --- src/mapml/handlers/ContextMenu.js | 4 ++-- test/e2e/core/mapContextMenu.test.js | 6 +++--- test/e2e/mapml-viewer/viewerContextMenu.test.js | 6 +++--- 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/mapml/handlers/ContextMenu.js b/src/mapml/handlers/ContextMenu.js index d2bf313b7..be76c0d9b 100644 --- a/src/mapml/handlers/ContextMenu.js +++ b/src/mapml/handlers/ContextMenu.js @@ -181,7 +181,7 @@ export var ContextMenu = L.Handler.extend({ case 'MapML': default: if (coord === 'pcrs') { - data = ``; + data = ``; } else if (coord === 'gcrs') { data = ``; } else if (coord === 'tcrs') { @@ -312,7 +312,7 @@ export var ContextMenu = L.Handler.extend({ point = mapEl._map.project(click.latlng), scale = mapEl._map.options.crs.scale(+mapEl.zoom), pcrs = mapEl._map.options.crs.transformation.untransform(point,scale); - this.contextMenu._copyData(`easting:${Math.trunc(pcrs.x)}, northing:${Math.trunc(pcrs.y)}`); + this.contextMenu._copyData(`easting:${Math.round(pcrs.x)}, northing:${Math.round(pcrs.y)}`); }, _copyTile: function(e){ diff --git a/test/e2e/core/mapContextMenu.test.js b/test/e2e/core/mapContextMenu.test.js index bd23d4974..725b82c85 100644 --- a/test/e2e/core/mapContextMenu.test.js +++ b/test/e2e/core/mapContextMenu.test.js @@ -18,11 +18,11 @@ let expectedFirstTCRS = [ // expected extent top-left and bottom-right values at different zoom levels let expectedExtentPCRS_0 = [ {horizontal: -9373489, vertical: 11303798}, - {horizontal: 9808841, vertical: -11714997} + {horizontal: 9808841, vertical: -11714998} ]; let expectedExtentPCRS_1 = [ - {horizontal: -5396793, vertical: 6520121}, - {horizontal: 5848020, vertical: -6973655} + {horizontal: -5396794, vertical: 6520122}, + {horizontal: 5848021, vertical: -6973655} ]; test.describe("Playwright Map Context Menu Tests", () => { diff --git a/test/e2e/mapml-viewer/viewerContextMenu.test.js b/test/e2e/mapml-viewer/viewerContextMenu.test.js index 4f6de7f8b..46c0b55e3 100644 --- a/test/e2e/mapml-viewer/viewerContextMenu.test.js +++ b/test/e2e/mapml-viewer/viewerContextMenu.test.js @@ -18,11 +18,11 @@ let expectedFirstTCRS = [ // expected extent top-left and bottom-right value at different zoom levels (0 and 1) let expectedExtentPCRS_0 = [ {horizontal: -9373489, vertical: 11303798}, - {horizontal: 9808841, vertical: -11714997} + {horizontal: 9808841, vertical: -11714998} ]; let expectedExtentPCRS_1 = [ - {horizontal: -5396793, vertical: 6520121}, - {horizontal: 5848020, vertical: -6973655} + {horizontal: -5396794, vertical: 6520122}, + {horizontal: 5848021, vertical: -6973655} ]; test.describe("Playwright mapml-viewer Context Menu (and api) Tests", () => {