Change _convertAndFormatPCRS 'map' parameter to 'crs', since 'map'

often depends on the context environment being added to and having a
_map property, which may not be the case.

Uncomment playwright tests, need to see what's breaking without much
bandwidth here to run tests

Remove playwright retries, temporarily.

Revert moveend->map-movend change from 9e06492

Changes so we can all look at what's going on with mapFeature.test.js

Change expectation of DOM ordering of rendered <g> elements - should
move away from DOM order dependency in test entirely TBD.

Comment out continuous testing for now

Author: prushforth

package.json

@@ -32,7 +32,7 @@
     }
   ],
   "scripts": {
-    "test": "npx playwright test --retries=3",
+    "test": "npx playwright test",
     "jest": "jest --verbose --noStackTrace"
   },
   "devDependencies": {

src/map-feature.js

@@ -383,7 +383,10 @@ export class MapFeature extends HTMLElement {
             projection
           );
         }
-        let result = M._convertAndFormatPCRS(pcrsBound, map);
+        let result = Object.assign(
+          M._convertAndFormatPCRS(pcrsBound, map.options.crs),
+          { projection: map.options.projection }
+        );
         // memoize calculated result
         extentCache = result;
         return result;

src/mapml-viewer.js

@@ -109,13 +109,14 @@ export class MapViewer extends HTMLElement {
         map.getZoom(),
         map.options.projection
       );
-    let formattedExtent = M._convertAndFormatPCRS(pcrsBounds, map);
+    let formattedExtent = M._convertAndFormatPCRS(pcrsBounds, map.options.crs);
     if (map.getMaxZoom() !== Infinity) {
       formattedExtent.zoom = {
         minZoom: map.getMinZoom(),
         maxZoom: map.getMaxZoom()
       };
     }
+    formattedExtent.projection = this.projection;
     return formattedExtent;
   }
   get static() {

src/mapml/features/path.js

@@ -75,11 +75,16 @@ export var Path = L.Path.extend({
         nextLayer = this.options._leafletLayer._layerEl.nextElementSibling;
       while (nextLayer && onTop) {
         if (nextLayer.tagName && nextLayer.tagName.toUpperCase() === 'LAYER-')
-          onTop = !(nextLayer.checked && nextLayer._layer.queryable);
+          onTop = !(
+            nextLayer.checked &&
+            nextLayer._layer &&
+            nextLayer._layer.queryable
+          );
         nextLayer = nextLayer.nextElementSibling;
       }
       if (onTop && dragStart) {
-        //M._handleLink gets called twice, once in the target phase on the path element, then in the bubble phase on the g element
+        //M._handleLink gets called twice, once in the target phase on the path
+        //element, then in the bubble phase on the g element
         //Using stopPropagation leaves the mouse in the mousedown state
         if (e.eventPhase === Event.BUBBLING_PHASE) return;
         let dist = Math.sqrt(

src/mapml/handlers/AnnounceMovement.js

@@ -5,7 +5,7 @@ export var AnnounceMovement = L.Handler.extend({
       layerremove: this.totalBounds
     });
 
-    this._map.on('moveend', this.announceBounds, this._map.options.mapEl);
+    this._map.on('map-moveend', this.announceBounds);
     this._map.dragging._draggable.addEventListener('dragstart', this.dragged);
     this._map.options.mapEl.addEventListener(
       'mapfocused',
@@ -18,7 +18,7 @@ export var AnnounceMovement = L.Handler.extend({
       layerremove: this.totalBounds
     });
 
-    this._map.off('moveend', this.announceBounds, this._map.options.mapEl);
+    this._map.off('map-moveend', this.announceBounds);
     this._map.dragging._draggable.removeEventListener(
       'dragstart',
       this.dragged

src/mapml/handlers/QueryHandler.js

@@ -16,7 +16,7 @@ export var QueryHandler = L.Handler.extend({
     // work backwards in document order (top down)
     for (var l = layers.length - 1; l >= 0; l--) {
       var mapmlLayer = layers[l]._layer;
-      if (layers[l].checked && mapmlLayer.queryable) {
+      if (layers[l].checked && mapmlLayer && mapmlLayer.queryable) {
         return mapmlLayer;
       }
     }
@@ -253,7 +253,7 @@ export var QueryHandler = L.Handler.extend({
     }
     function displayFeaturesPopup(features, loc) {
       if (features.length === 0) return;
-      let f = M.featureLayer(null, {
+      let f = M.featureLayer(features, {
         // pass the vector layer a renderer of its own, otherwise leaflet
         // puts everything into the overlayPane
         renderer: M.featureRenderer(),

src/mapml/layers/MapMLLayer.js

@@ -395,7 +395,7 @@ export var MapMLLayer = L.Layer.extend({
     if (bounds) {
       //assigns the formatted extent object to .extent and spreads the zoom ranges to .extent also
       this._layerEl.extent = Object.assign(
-        M._convertAndFormatPCRS(bounds, this._map),
+        M._convertAndFormatPCRS(bounds, this._properties.crs),
         { zoom: zoomBounds }
       );
     }

src/mapml/utils/Util.js

@@ -3,25 +3,19 @@ import { FALLBACK_CS, FALLBACK_PROJECTION } from './Constants';
 export var Util = {
   // _convertAndFormatPCRS returns the converted CRS and formatted pcrsBounds in gcrs, pcrs, tcrs, and tilematrix. Used for setting extent for the map and layer (map.extent, layer.extent).
   // _convertAndFormatPCRS: L.Bounds, _map -> {...}
-  _convertAndFormatPCRS: function (pcrsBounds, map) {
-    if (!pcrsBounds || !map) return {};
+  _convertAndFormatPCRS: function (pcrsBounds, crs) {
+    if (!pcrsBounds || !crs) return {};
 
     let tcrsTopLeft = [],
       tcrsBottomRight = [],
       tileMatrixTopLeft = [],
       tileMatrixBottomRight = [],
-      tileSize = map.options.crs.options.crs.tile.bounds.max.y;
+      tileSize = crs.options.crs.tile.bounds.max.y;
 
-    for (let i = 0; i < map.options.crs.options.resolutions.length; i++) {
-      let scale = map.options.crs.scale(i),
-        minConverted = map.options.crs.transformation.transform(
-          pcrsBounds.min,
-          scale
-        ),
-        maxConverted = map.options.crs.transformation.transform(
-          pcrsBounds.max,
-          scale
-        );
+    for (let i = 0; i < crs.options.resolutions.length; i++) {
+      let scale = crs.scale(i),
+        minConverted = crs.transformation.transform(pcrsBounds.min, scale),
+        maxConverted = crs.transformation.transform(pcrsBounds.max, scale);
 
       tcrsTopLeft.push({
         horizontal: minConverted.x,
@@ -44,8 +38,8 @@ export var Util = {
     }
 
     //converts the gcrs, I believe it can take any number values from -inf to +inf
-    let unprojectedMin = map.options.crs.unproject(pcrsBounds.min),
-      unprojectedMax = map.options.crs.unproject(pcrsBounds.max);
+    let unprojectedMin = crs.unproject(pcrsBounds.min),
+      unprojectedMax = crs.unproject(pcrsBounds.max);
 
     let gcrs = {
       topLeft: {
@@ -83,8 +77,7 @@ export var Util = {
         tilematrix: tileMatrixBottomRight,
         gcrs: gcrs.bottomRight,
         pcrs: pcrs.bottomRight
-      },
-      projection: map.options.projection
+      }
     };
   },
 
@@ -533,14 +526,12 @@ export var Util = {
           newLayer = true;
       }
       if (!link.inPlace && newLayer)
-        layer.whenReady().then(() => {
-          if (zoomTo)
-            layer.parentElement.zoomTo(+zoomTo.lat, +zoomTo.lng, +zoomTo.z);
-          else layer.zoomTo();
+        if (zoomTo)
+          layer.parentElement.zoomTo(+zoomTo.lat, +zoomTo.lng, +zoomTo.z);
+        else layer.zoomTo();
 
-          if (opacity) layer.opacity = opacity;
-          map.getContainer().focus();
-        });
+      if (opacity) layer.opacity = opacity;
+      map.getContainer().focus();
     } else if (zoomTo && !link.inPlace && justPan) {
       leafletLayer._map.options.mapEl.zoomTo(
         +zoomTo.lat,

src/web-map.js

@@ -113,13 +113,14 @@ export class WebMap extends HTMLMapElement {
         map.getZoom(),
         map.options.projection
       );
-    let formattedExtent = M._convertAndFormatPCRS(pcrsBounds, map);
+    let formattedExtent = M._convertAndFormatPCRS(pcrsBounds, map.options.crs);
     if (map.getMaxZoom() !== Infinity) {
       formattedExtent.zoom = {
         minZoom: map.getMinZoom(),
         maxZoom: map.getMaxZoom()
       };
     }
+    formattedExtent.projection = this.projection;
     return formattedExtent;
   }
   get static() {

test/e2e/core/layerContextMenu.test.js

@@ -65,7 +65,7 @@ test.describe('Playwright Layer Context Menu Tests', () => {
     );
 
     expect(copyLayer).toEqual(
-      '<layer- label="CBMT - INLINE" checked="">\n      <map-link rel="license" title="Testing Inc."></map-link>\n      <map-extent units="CBMTILE" hidden="">\n        <map-input name="zoomLevel" type="zoom" value="3" min="0" max="3"></map-input>\n        <map-input name="row" type="location" axis="row" units="tilematrix" min="14" max="21"></map-input>\n        <map-input name="col" type="location" axis="column" units="tilematrix" min="14" max="19"></map-input>\n        <map-link rel="tile" tref="http://localhost:30001/data/cbmt/{zoomLevel}/c{col}_r{row}.png"></map-link>\n      </map-extent>\n    </layer->'
+      '<layer- label="CBMT - INLINE" checked="">\n      <map-link rel="license" title="Testing Inc."></map-link>\n      <map-extent units="CBMTILE" hidden="" checked="">\n        <map-input name="zoomLevel" type="zoom" value="3" min="0" max="3"></map-input>\n        <map-input name="row" type="location" axis="row" units="tilematrix" min="14" max="21"></map-input>\n        <map-input name="col" type="location" axis="column" units="tilematrix" min="14" max="19"></map-input>\n        <map-link rel="tile" tref="http://localhost:30001/data/cbmt/{zoomLevel}/c{col}_r{row}.png"></map-link>\n      </map-extent>\n    </layer->'
     );
   });