More WIP

Maps4HTML · Mar 22, 2024 · b820e2c · b820e2c
1 parent cf0eabb
commit b820e2c
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 18 deletions.
diff --git a/src/map-extent.js b/src/map-extent.js
@@ -262,6 +262,11 @@ export class MapExtent extends HTMLElement {
     // this._layerControlHTML is the fieldset for the extent in the LayerControl
     this._layerControlHTML = this._createLayerControlExtentHTML();
     this._calculateBounds();
+    // instead of children using parents' whenReady which can be cyclic,
+    // when this element is ready, run stuff that is only available after
+    // initialization
+    this._runMutationObserver(this.children);
+    // make sure same thing happens when children are added
     this._bindMutationObserver();
   }
   /*
@@ -290,6 +295,16 @@ export class MapExtent extends HTMLElement {
         this._validateDisabled();
       });
     };
+    const _addStylesheetLink = (mapLink) => {
+      this.whenReady().then(() => {
+        this._extentLayer.appendStyleLink(mapLink);
+      });
+    };
+    const _addStyleElement = (mapStyle) => {
+      this.whenReady().then(() => {
+        this._extentLayer.appendStyleElement(mapStyle);
+      });
+    };
     for (let i = 0; i < elementsGroup.length; ++i) {
       let element = elementsGroup[i];
       switch (element.nodeName) {
@@ -303,7 +318,14 @@ export class MapExtent extends HTMLElement {
           }
           break;
         case 'MAP-LINK':
-        // might need this in future, among others
+          if (element.link && !element.link.isConnected)
+            _addStylesheetLink(element);
+          break;
+        case 'MAP-STYLE':
+          if (element.styleElement && !element.styleElement.isConnected) {
+            _addStyleElement(element);
+          }
+          break;
         default:
           break;
       }

diff --git a/test/e2e/core/styleParsing.html b/test/e2e/core/styleParsing.html
@@ -22,7 +22,7 @@
 <body>
   <map data-testid="map1" is="web-map" projection="CBMTILE" zoom="2" lat="45.5052040" lon="-75.2202344" controls>
 
-    <layer- label="Arizona" checked>
+    <layer- data-testid="arizona" label="Arizona" checked>
       <map-meta name="projection" content="CBMTILE"></map-meta>
       <map-meta name="zoom" content="min=0,max=5,value=0"></map-meta>
       <map-meta name="extent"

diff --git a/test/e2e/core/styleParsing.test.js b/test/e2e/core/styleParsing.test.js
@@ -21,22 +21,31 @@ test.describe('Style Parsed and Implemented Test', () => {
   });
 
   //tests using the 1st map in the page
-  test('CSS within html page added to inorder to overlay-pane container', async () => {
-    const firstMap = page.getByTestId('map1');
-
-    const styleContent = await page.$eval(
-      'css=div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-overlay-pane > div',
-      (styleE) => styleE.innerHTML
-    );
-    await expect(styleContent.indexOf('first')).toBeLessThan(
-      styleContent.indexOf('.second')
-    );
-    await expect(styleContent.indexOf('.second')).toBeLessThan(
-      styleContent.indexOf('.third')
-    );
-    await expect(styleContent.indexOf('.third')).toBeLessThan(
-      styleContent.indexOf('fourth')
-    );
+  test.only('CSS within html page added to inorder to overlay-pane container', async () => {
+    const arizona = page.getByTestId('arizona');
+    const ids = await arizona.evaluate((layer) => {
+      const elementSequence = layer.querySelectorAll(
+        'map-link[rel=stylesheet],map-style'
+      );
+      let ids = '';
+      for (let i = 0; i < elementSequence.length; i++)
+        ids +=
+          elementSequence[i].getAttribute('id') +
+          (i < elementSequence.length - 1 ? ',' : '');
+      return ids;
+    });
+    const renderedIds = await arizona.evaluate((layer) => {
+      const elementSequence = layer._layer._container.querySelectorAll(
+        'link[rel=stylesheet],style'
+      );
+      let ids = '';
+      for (let i = 0; i < elementSequence.length; i++)
+        ids +=
+          elementSequence[i].getAttribute('id') +
+          (i < elementSequence.length - 1 ? ',' : '');
+      return ids;
+    });
+    expect(ids).toEqual(renderedIds);
   });
 
   test('CSS from a retrieved MapML file added inorder inside templated-layer container', async () => {