Create map-extent, map-input, map-link (#887)

* initial map-input setup

* implement Classes for different types of map-input types

* Update map-input implementation + Add support for tilematrix type=locataion Class

* initial map-link setup

* Make map-input.connectedCallback async, await on extent.whenReady()
for setup

* Update version to 0.12.0 in package.json

* migrating extent initialization from MapMLLayer to map-extent.js

* updating and adding and removing layer control extent HTML
current problem is that this._layerControlHTML is not connected
when disconnecting the map-extent from the DOM (manually), so unable 
to hide/unhide the extents' root fieldset line 620 map-extent.js

* map-extent hidden API

* map-extent Get checkbox working via API map-extent.checked. Change TemplatedLayer and related child layer types.

* Fix TemplatedFeaturesLayer checking/unchecking behaviour.
Prevent excessive disconnection / reconnection of layers and map-extents
when clicking on layer control entries, by upping the 'moving' px 
threshold and calculating if the entry has changed position through
the dragging event (do disconnect/reconnect) or not (do not do dis/re).

In map-feature, look for data-moving on layer or map-extent element,
regardless of whether it's a local or remote layer (light dom vs shadow
dom).

* Set 'Sub-layer' as default label attribute, add to options messages
Synchronize opacity attribute, property and slider in layer control
(note: works slightly differently than layer.opacity, which doesn't 
"sprout" the opacity attribute when set via layer control)
Fix bug when setting map-extent.hidden in shadow dom of layer element

* Move/ refactor MapMLLayer._setLayerElExtent into layer.js layer-.extent
/layer-._calculateExtent(). To Do: make it efficient / memoize extent
value until extent actually changes.

* Fix bug in _calculateExtent, add whenReady() to layer.zoomTo

* get tests configured with new map-extent attributes.
Get rid of (some) use of live map tiles from NRCan.
Add temporary todo list of still-failing tests

* Fix a test done with map-extent hidden attribute implemented via CE

* Make opacity work the same in map-extent as it does in layer.  This is
the documented behaviour too.

* Make layer-.extent (layer-._calculateExtent()) memoized

* Get map-extent label API working

*  fix/refactor query map-extents

* avoid remote map-feature (in mapml) triggering MapFeature connectedCallback twice when it is parsed in form of text/html

* Fix remote queryable layer with hidden extent not queryable.

* Re-write AnnounceMovement.js totalBounds event handler to use
layer-.extent.  Create extent.getBounds() function which may be better
written as a util function, since it's Leaflet specific.

* create layer-.whenElemsReady method to check if the children elems of layer- are ready, create Util.extentToBounds for announcemovement

* refactor debugMode, totalLayerBounds, AnnounceMovement

* Get debugMode.test.js working

* featureIndexOverlayResults needs to be in slowMo to work reliably
WIP: Add data-testid to multipleExtents.test fixture.  Update playwright
to use locators, locator assertions.  Note that I don't believe the 
layer bounds were ever being rendered by the debugOverlay, only a 
duplicate of the map-link at the map-extent level, which seemed to be
that of the layer-, but was only a duplicate due to misuse of layerBounds
at the map-extent level. To be discussed with team.  Note that current 
failing test fails due to the map extent in the layer control not being
correctly disabled, even though (I believe) the <map-extent> is 
disabled (has disabled attribute, at least).

* WIP on multiple extents test semantics in-progress elimination of MapMLLayer._properties._mapExtents.

* Refactor layer.js._calculateExtent into 
layer.js.extent + MapMLLayer._calculateBounds + map-extent.js._calculateBounds

Fix problem with MapMLLayer._calculateExtent that wasn't calculating the
zoom bounds properly.  Problem visible on main when clicking on Finland
or Sweden in Arctic SDI.

Add some guard conditions to AnnounceMovement.totalBounds, which was
firing too early in the map's life cycle and was causing issues with
layers and descendant elements being not ready.

Make layer.whenReady() a bit stronger, by determining if the shadowroot
is ready too, which may head off some timing problems.

* WIP on multiple extents test semantics. 

* get rid of layerControl._validateInput, make layer- and map-extent elements create and update the layerControl by themselves when needed; move the logic of creating layer-'s layerControlHTML from MapMLLayer.js to layer-.js

* Upgrade playwright to 1.39.0
Update multipleExtents.test.js

* WIP: refactor to get rid of _properties._mapExtents, make layer- and map-extent handle their own layerControlHTML (create and update), fix bugs showing up in experiments

* add event listener on layer- to listen to layer- checked property changes, when it is changed trigger the _handlechange method of mapExtent to ensure the mapExtent._templatedLayer can be added to / removed from the map properly

* remove trailing '/' from from xmlns links

* Init checkbox defaultChecked for map-extent, layer-

* get rid of MapMLLayer._validateExtent, add projection check in mapExtent._validateDisabled, create .catch for use cases of mapExtent.whenReady(), handle the timing issue of projection change

* clean up the templatedTileLayer._container when the templatedTileLayer is removed, to fix the bug that the templated tiles cannot be rendered properly when zoom level is changed before it is readded to the map

* Add rejection to map-extent, map-input in the case of the element being
disconnected while waiting for whenReady. This can happen during API usage
for example, when changing the map projection soon after map creation, 
resulting in the connectedCallbacks being called and attributeChangedCallbacks
being called but the element is disconnected before that cycle can complete.
Added the rejection in this case so that it is clear what happens.

Added conditional enabling of announceMovement handler after projection
change on mapml-viewer, because it should only be enabled when the 
setting calls for it to be so (otherwise errors can occur during the
totalBounds method of the handler, due to nothing being ready).

* Make it so that createLayerControlHTML works unconditionally, was 
causing issues when the layer was re-initialized due to changeprojection
event happening during initialization.

* Enable <select> as a control in <map-extent>, which will break keyboard
tests, possibly others, because tab order to get to the select will be
different.

* get layer and extent layer control disabled properly + move over code for map-extent.createLayerControlExtentHTML to a seperate supporting file

* update Gruntfile

* grouping the radio buttons of styles in layerControl based on an unique identifier, to fix the bug that style does not have a default selection

* invoke mapExtent.handlechange when the map projection is changed to make sure templatedLayers are properly added to the map; remove the map-change event listener of layer- after the map-extent is disconnected

* Workaround leaflet bug when changing map.options.crs #2553

* Make map-input.connectedCallback async, await on extent.whenReady()
for setup

* WIP on map-extent Get checkbox working via API map-extent.checked. Change TemplatedLayer and related child layer types.

* Upgrade playwright to 1.39.0
Update multipleExtents.test.js

* get rid of layerControl._validateInput, make layer- and map-extent elements create and update the layerControl by themselves when needed; move the logic of creating layer-'s layerControlHTML from MapMLLayer.js to layer-.js

* WIP: refactor to get rid of _properties._mapExtents, make layer- and map-extent handle their own layerControlHTML (create and update), fix bugs showing up in experiments

* add event listener on layer- to listen to layer- checked property changes, when it is changed trigger the _handlechange method of mapExtent to ensure the mapExtent._templatedLayer can be added to / removed from the map properly

* remove trailing '/' from from xmlns links

* get rid of MapMLLayer._validateExtent, add projection check in mapExtent._validateDisabled, create .catch for use cases of mapExtent.whenReady(), handle the timing issue of projection change

* Init checkbox defaultChecked for map-extent, layer-

* clean up the templatedTileLayer._container when the templatedTileLayer is removed, to fix the bug that the templated tiles cannot be rendered properly when zoom level is changed before it is readded to the map

* Add rejection to map-extent, map-input in the case of the element being
disconnected while waiting for whenReady. This can happen during API usage
for example, when changing the map projection soon after map creation, 
resulting in the connectedCallbacks being called and attributeChangedCallbacks
being called but the element is disconnected before that cycle can complete.
Added the rejection in this case so that it is clear what happens.

Added conditional enabling of announceMovement handler after projection
change on mapml-viewer, because it should only be enabled when the 
setting calls for it to be so (otherwise errors can occur during the
totalBounds method of the handler, due to nothing being ready).

* Make it so that createLayerControlHTML works unconditionally, was 
causing issues when the layer was re-initialized due to changeprojection
event happening during initialization.

* Enable <select> as a control in <map-extent>, which will break keyboard
tests, possibly others, because tab order to get to the select will be
different.
WIP / to do: disable the extent controls, italicize the text labels for them

* get layer and extent layer control disabled properly + move over code for map-extent.createLayerControlExtentHTML to a seperate supporting file

* update Gruntfile

* grouping the radio buttons of styles in layerControl based on an unique identifier, to fix the bug that style does not have a default selection

* invoke mapExtent.handlechange when the map projection is changed to make sure templatedLayers are properly added to the map; remove the map-change event listener of layer- after the map-extent is disconnected

* Workaround leaflet bug when changing map.options.crs #2553

* Workaround leaflet bug when changing map.options.crs #2553 part deux

* Make opacity implementation the same for both layer- and map-extent
Fix incorrect reference to _propertiesGroupAnatomy for map-extent 
(it's a property of parent layer element), it's the root fieldset that
contains the individual map-extent fieldsets.
Change class on map-extent's <details> for opacity from `mapml-layer-item-details`
 to `mapml-layer-item-opacity mapml-control-layers`

Fix checked attribute for layer test failure

* add the setTimeout for the layer-._validateDisable back, to make sure the validateDisabled happen after the moveend so that the result for validation is correct

* Sync mapml-viewer -> web-map.js

* Enable layer-.whenReady to handle fetch errors without waiting for the
full 5s timeout.

* Get tests working

* Remove .only from some tests preventing full suite from running

* sync multipleExtents tests with PR

* Fix markup in mapSpan.html

* fix failing test; migrate map-meta[name] from remote mapml to the shadowroot of layer-, make the staticTileLayer read zoom bounds from map-meta instead of map-tile, add whenReady in MapInput.attributechangecallback

* fix the typo from map-meta[name=projection] to map-meta[name=zoom]; do L.extend on this.options instead of on the local options var

* add settimeout in debugoverlay._addbounds to delay the function call until the layer.layerbounds / layer.extentbounds are ready after layer-.checked attribute is changed, modify the test to adapt the changes

* sync mapml-viewer test with web-map

* add constants.js to dist and import it in map-extent.js, remove unused import for constant.js and some unused variables in other files

* Projection change test when following link to layer with default bounds
based on the name, 
('Debug components update with projection changes')
this test may need revisiting; the only thing that
is tested is that the map bounds changes when the link is loaded to
replace the current layer.  To me it seems that the test is failing
silently on main tbd

* make the minzoom and maxzoom of staticTileLayer read from map-meta instead of being calculated the map-tile zoom attribute; prettier formatting for projectionchange.test; enable ci testing

* Add whenReady().then().catch() blocks to layer-.attributeChangedCallback
usage. Lack of catch processing led to slow processing when pasting an
invalid / unavailable link onto the map.

* Set --workers=1 for playwright testing, be kind to github actions

* add slowmo to the debugmode.test, history.test

* add slowmo to a few tests to get GitHub CI testing pass

* change the returned format of the zoom getter of mapmlviewer from String to Number, update tests accordingly; some prettier formatting for tms and clientTemplatedTileLayer tests

* change map lat, lon, width and height getters to return a Number instead of String, update tests

* add waitfortimeout for flaky tests to pass GitHub CI testing

* Return number for layer-, map-extent.opacity, 
mapml-viewer.width, .height, .lat, .lon.  Amend tests to enforce this.

* move dist to right place for grunt web-map-doc

* Bundle everything possible into mapml.js, use M. to access global symbols

* initialize this._opacity of layer- and map-extent with the attribute value (if exists) or 1.0 as default; add waitfortimeout and slowmo to fix flaky tests

* Add tests for map-extent attribute api. Fix bug in same.

* Add test for template feature being disabled when going out of bounds

* Change class on opacity details/summary for map-extent layer control

---------

Co-authored-by: AliyanH <aliyanulhaq@gmail.com>
Co-authored-by: prushfor <prushfor@L-BSC-A146390.nrn.nrcan.gc.ca>
Co-authored-by: Aliyan Haq <55751566+AliyanH@users.noreply.github.com>
Co-authored-by: yhy0217 <yhy0218th@gmail.com>

Author: 4 people

Gruntfile.js

@@ -25,10 +25,11 @@ module.exports = function(grunt) {
           'dist/mapml.js':        ['<%= rollup.main.dest %>'],
           'dist/web-map.js':      ['src/web-map.js'],
           'dist/mapml-viewer.js': ['src/mapml-viewer.js'],
-          'dist/DOMTokenList.js': ['src/mapml/utils/DOMTokenList.js'],
           'dist/map-caption.js':  ['src/map-caption.js'],
           'dist/map-feature.js':  ['src/map-feature.js'],
           'dist/map-extent.js':   ['src/map-extent.js'],
+          'dist/map-input.js':    ['src/map-input.js'],
+          'dist/map-link.js':    ['src/map-link.js'],
           'dist/map-area.js':     ['src/map-area.js'],
           'dist/layer.js':        ['src/layer.js'],
           'dist/leaflet.js':      ['dist/leaflet-src.js',
@@ -159,7 +160,7 @@ module.exports = function(grunt) {
           {
             expand: true,
             src: ['dist/*'],
-            dest: '../web-map-doc'
+            dest: '../web-map-doc/static'
           }
         ]
       }

index.html

@@ -23,7 +23,7 @@
          /* Responsive map. */ 
           max-width: 100%;  
 
-         /* Full viewport. */ 
+         /* Full viewport. */
           width: 100%;  
           height: 100%;  
 
@@ -72,56 +72,64 @@
      </noscript> 
   </head>
   <body>
-<mapml-viewer projection="OSMTILE" zoom="10" lon="-75.7" lat="45.4" controls="">
-  <layer- label="OpenStreetMap" src="https://maps4html.org/web-map-doc/demo/data/osm.mapml" checked=""></layer->
-  
-  <layer- label="Polygon" checked>
-    <map-meta name="projection" content="OSMTILE"></map-meta>
-    <map-meta name="zoom" content="min=10,max=11"></map-meta>
-    <map-feature zoom="10">
-      <map-featurecaption>Click me!</map-featurecaption>
-      <!-- Setting the geometry coordinates to gcrs, as the default is pcrs -->
-      <map-geometry>
-        <map-a href="#15, -75.699, 45.420">
-          <map-polygon class="polygon">
-            <map-coordinates>-75.8242035 45.3526278 -75.6793213 45.4572409 -75.5680847 45.4692806 -75.6092834 45.4215881 -75.5756378 45.3810901 -75.7946777 45.3120804</map-coordinates>
-          </map-polygon>
-        </map-a>
-      </map-geometry>
-      <map-properties></map-properties>
-    </map-feature>
-  </layer->
-
- <layer- label="Points" checked>
-    <map-meta name="projection" content="OSMTILE"></map-meta>
-    <map-meta name="zoom" content="min=14,max=24"></map-meta>
-    <map-feature>
-      <map-featurecaption>Point 1</map-featurecaption>
-      <map-geometry>
-        <map-point class="point">
-          <map-coordinates>-75.6978285 45.4202251</map-coordinates>
-        </map-point>
-      </map-geometry>
-      <map-properties></map-properties>
-    </map-feature>
-    <map-feature>
-      <map-featurecaption>Point 2</map-featurecaption>
-      <map-geometry>
-        <map-point class="point">
-          <map-coordinates>-75.7002854 45.4199465</map-coordinates>
-        </map-point>
-      </map-geometry>
-      <map-properties></map-properties>
-    </map-feature>
-    <map-feature>
-      <map-featurecaption>point 3</map-featurecaption>
-      <map-geometry>
-        <map-point class="point">
-          <map-coordinates>-75.6984723 45.4179207</map-coordinates>
-        </map-point>
-      </map-geometry>
-      <map-properties></map-properties>
-    </map-feature>
-  </layer->
-</mapml-viewer>  </body>
+    
+    <mapml-viewer projection="OSMTILE" zoom="14" lat="45.406314" lon="-75.6883335" controls controlslist="geolocation">
+      <layer- data-testid="osm-layer" label="OpenStreetMap" checked >
+<map-extent data-testid="osm-extent" units="OSMTILE" label="foo" checked="checked" >
+      <map-input name="z" type="zoom" value="18" min="0" max="18"></map-input>
+      <map-input name="x" type="location" units="tilematrix" axis="column" min="0" max="262144"></map-input>
+      <map-input name="y" type="location" units="tilematrix" axis="row" min="0" max="262144"></map-input>
+      <map-link rel="tile" tref="https://tile.openstreetmap.org/{z}/{x}/{y}.png"></map-link>
+    </map-extent>
+      </layer->
+<!--      <layer- data-testid="rest-layer" id="restaurant" label="Mexican restaurants" src="../shared/restaurants/mexican.mapml" checked>-->
+<!--        <map-meta name="cs" content="gcrs" ></map-meta>
+        <map-meta name="extent" content="top-left-easting=-8433179, top-left-northing=5689316, bottom-right-easting=-8420968, bottom-right-northing=5683139"></map-meta>
+        <map-feature zoom="18" id="restaurant_polygon.2" class="restaurant_polygon">
+          <map-featurecaption>Banditos</map-featurecaption>
+            <map-geometry>
+              <map-point>
+                  <map-coordinates>-75.689609 45.405803</map-coordinates>
+              </map-point>
+            </map-geometry>
+            <map-properties>
+                <table>
+                    <thead>
+                        <tr>
+                            <th role="columnheader" scope="col">Property name</th>
+                            <th role="columnheader" scope="col">Property value</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <th scope="row">addr_house</th>
+                            <td itemprop="addr_house">683</td>
+                        </tr>
+                        <tr>
+                            <th scope="row">addr_stree</th>
+                            <td itemprop="addr_stree">Bank Street</td>
+                        </tr>
+                        <tr>
+                            <th scope="row">amenity</th>
+                            <td itemprop="amenity">restaurant</td>
+                        </tr>
+                        <tr>
+                            <th scope="row">building</th>
+                            <td itemprop="building">commercial</td>
+                        </tr>
+                        <tr>
+                            <th scope="row">name</th>
+                            <td itemprop="name">Banditos</td>
+                        </tr>
+                        <tr>
+                            <th scope="row">cuisine</th>
+                            <td itemprop="cuisine">mexican</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </map-properties>
+        </map-feature>-->
+      </layer->
+    </mapml-viewer>
+  </body>
 </html>

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@maps4html/web-map-custom-element",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "description": "web-map customized built-in HTML <map> or custom <mapml-viewer>",
   "keywords": [
     "mapml-viewer",
@@ -32,10 +32,11 @@
     }
   ],
   "scripts": {
-    "test": "npx playwright test --retries=3",
+    "test": "npx playwright test --retries=3 --workers=1",
     "jest": "jest --verbose --noStackTrace"
   },
   "devDependencies": {
+    "@playwright/test": "^1.39.0",
     "diff": "^5.1.0",
     "express": "^4.17.1",
     "grunt": "^1.4.0",
@@ -56,8 +57,7 @@
     "leaflet": "^1.9.4",
     "leaflet.locatecontrol": "^0.79.0",
     "path": "^0.12.7",
-    "@playwright/test": "^1.35.1",
-    "playwright": "^1.35.1",
+    "playwright": "^1.39.0",
     "proj4": "^2.6.2",
     "proj4leaflet": "^1.0.2",
     "rollup": "^2.23.1"