From 5a16488777dcc5d6eebf41e9b0113a3e9752b11f Mon Sep 17 00:00:00 2001 From: mo-martinwilson Date: Tue, 26 Nov 2024 11:33:08 +0000 Subject: [PATCH 1/8] formatting in l-tile-layer-wms.js --- src/l-tile-layer-wms.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/l-tile-layer-wms.js b/src/l-tile-layer-wms.js index 7baafbb..db10e36 100644 --- a/src/l-tile-layer-wms.js +++ b/src/l-tile-layer-wms.js @@ -47,16 +47,16 @@ class LTileLayerWMS extends LLayer { }; // Pane options - const paneOptions = {} + const paneOptions = {}; // Support parent element if (this.parentElement.tagName.toLowerCase() === "l-pane") { - paneOptions["pane"] = this.parentElement.getAttribute("name") + paneOptions["pane"] = this.parentElement.getAttribute("name"); } this.layer = tileLayer.wms(urlTemplate, { ...standardOptions, ...nonStandardOptions(), - ...paneOptions + ...paneOptions, }); const event = new CustomEvent(layerConnected, { detail: { name, layer: this.layer }, From 8bac5894f2af597d7ad31c9eda61c5ceef4bd7c9 Mon Sep 17 00:00:00 2001 From: mo-martinwilson Date: Tue, 26 Nov 2024 11:33:37 +0000 Subject: [PATCH 2/8] add "options" to observedAttributes in l-tile-layer-wms.js --- src/l-tile-layer-wms.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/l-tile-layer-wms.js b/src/l-tile-layer-wms.js index db10e36..0b95df6 100644 --- a/src/l-tile-layer-wms.js +++ b/src/l-tile-layer-wms.js @@ -5,6 +5,10 @@ import { layerConnected } from "./events.js"; import { htmlAttribute, optional, parse, partial } from "./parse.js"; class LTileLayerWMS extends LLayer { + static get observedAttributes() { + return ["options"]; + } + constructor() { super(); this.layer = null; From 58ec1f4fa34eabb971f95668dd9ce8cd3f054643 Mon Sep 17 00:00:00 2001 From: mo-martinwilson Date: Tue, 26 Nov 2024 11:34:23 +0000 Subject: [PATCH 3/8] add initLayer to l-tile-layer-wms.js --- src/l-tile-layer-wms.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/l-tile-layer-wms.js b/src/l-tile-layer-wms.js index 0b95df6..da59573 100644 --- a/src/l-tile-layer-wms.js +++ b/src/l-tile-layer-wms.js @@ -15,6 +15,11 @@ class LTileLayerWMS extends LLayer { } connectedCallback() { + this.initLayer(); + } + + + initLayer() { const urlTemplate = parse(htmlAttribute("url-template"), this); const name = this.getAttribute("name"); From 0f7c43e7fea2acbadd1cca88dd4e26b5cad88d55 Mon Sep 17 00:00:00 2001 From: mo-martinwilson Date: Tue, 26 Nov 2024 11:34:57 +0000 Subject: [PATCH 4/8] add reloadLayer and attributeChangedCallback --- src/l-tile-layer-wms.js | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/src/l-tile-layer-wms.js b/src/l-tile-layer-wms.js index da59573..5cbd327 100644 --- a/src/l-tile-layer-wms.js +++ b/src/l-tile-layer-wms.js @@ -18,6 +18,13 @@ class LTileLayerWMS extends LLayer { this.initLayer(); } + attributeChangedCallback(name, oldValue, newValue) { + if (name === "options" && oldValue !== newValue) { + if (this.isConnected) { + this.reloadLayer(); + } + } + } initLayer() { const urlTemplate = parse(htmlAttribute("url-template"), this); @@ -73,5 +80,13 @@ class LTileLayerWMS extends LLayer { }); this.dispatchEvent(event); } + + reloadLayer() { + if (this.layer) { + this.layer.remove(); + } + this.initLayer(); + } } + export default LTileLayerWMS; From 7b80c2e1f3c32025eeaa2423b74ae95b7807c925 Mon Sep 17 00:00:00 2001 From: mo-martinwilson Date: Tue, 26 Nov 2024 11:36:13 +0000 Subject: [PATCH 5/8] add a test that tests the layer reloads when updating the options string --- src/l-tile-layer-wms.test.js | 38 ++++++++++++++++++++++++++++++++++++ 1 file changed, 38 insertions(+) diff --git a/src/l-tile-layer-wms.test.js b/src/l-tile-layer-wms.test.js index 001946b..4a8684b 100644 --- a/src/l-tile-layer-wms.test.js +++ b/src/l-tile-layer-wms.test.js @@ -91,3 +91,41 @@ it("should handle invalid JSON in the options attribute gracefully", () => { const expected = tileLayer.wms(urlTemplate, { layers: "example layer ere" }); expect(actual).toEqual(expected); }); + +it("should reload the layer when the options attribute changes", async () => { + const urlTemplate = "http://example.com/wms"; + const initialOptions = JSON.stringify({ height: 101, bbox: "coords ere" }); + const updatedOptions = JSON.stringify({ height: 202, bbox: "new coords" }); + + const el = document.createElement("l-tile-layer-wms"); + el.setAttribute("url-template", urlTemplate); + el.setAttribute("layers", "example layer ere"); + el.setAttribute("options", initialOptions); + + let promise = new Promise((resolve) => { + el.addEventListener(layerConnected, (ev) => { + resolve(ev.detail); + }); + }); + + document.body.appendChild(el); + + // Wait for the initial layer to be created + let detail = await promise; + expect(detail.layer.options.height).toBe(101); + expect(detail.layer.options.bbox).toBe("coords ere"); + + // Change the options attribute + promise = new Promise((resolve) => { + el.addEventListener(layerConnected, (ev) => { + resolve(ev.detail); + }); + }); + el.setAttribute("options", updatedOptions); + + // Wait for the layer to reload + detail = await promise; + expect(detail.layer.options.height).toBe(202); + expect(detail.layer.options.bbox).toBe("new coords"); +}); + From 6556fa03fadc2d50eefaddaacf498462e3d9a3e9 Mon Sep 17 00:00:00 2001 From: mo-martinwilson Date: Tue, 26 Nov 2024 11:54:33 +0000 Subject: [PATCH 6/8] add layerConnectedEventEmittedCount to the options attribute test --- src/l-tile-layer-wms.test.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/l-tile-layer-wms.test.js b/src/l-tile-layer-wms.test.js index 4a8684b..7ccb574 100644 --- a/src/l-tile-layer-wms.test.js +++ b/src/l-tile-layer-wms.test.js @@ -102,8 +102,10 @@ it("should reload the layer when the options attribute changes", async () => { el.setAttribute("layers", "example layer ere"); el.setAttribute("options", initialOptions); + let layerConnectedEventEmittedCount = 0; let promise = new Promise((resolve) => { el.addEventListener(layerConnected, (ev) => { + layerConnectedEventEmittedCount += 1; resolve(ev.detail); }); }); @@ -121,11 +123,13 @@ it("should reload the layer when the options attribute changes", async () => { resolve(ev.detail); }); }); + + // Update the options attribute el.setAttribute("options", updatedOptions); // Wait for the layer to reload detail = await promise; expect(detail.layer.options.height).toBe(202); expect(detail.layer.options.bbox).toBe("new coords"); + expect(layerConnectedEventEmittedCount).toBe(2); // initial layer creation + reload }); - From 7d6035fb8adc825a3de9fe7f7f1b831c5bed6dd5 Mon Sep 17 00:00:00 2001 From: mo-martinwilson Date: Tue, 26 Nov 2024 11:59:59 +0000 Subject: [PATCH 7/8] add test that the layer does not reload when a different attribute is changed --- src/l-tile-layer-wms.test.js | 34 ++++++++++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/src/l-tile-layer-wms.test.js b/src/l-tile-layer-wms.test.js index 7ccb574..8663534 100644 --- a/src/l-tile-layer-wms.test.js +++ b/src/l-tile-layer-wms.test.js @@ -133,3 +133,37 @@ it("should reload the layer when the options attribute changes", async () => { expect(detail.layer.options.bbox).toBe("new coords"); expect(layerConnectedEventEmittedCount).toBe(2); // initial layer creation + reload }); + +it("should not reload the layer when non-options attributes are changed", async () => { + const urlTemplate = "http://example.com/wms"; + const initialOptions = JSON.stringify({ height: 101, bbox: "coords ere" }); + + const el = document.createElement("l-tile-layer-wms"); + el.setAttribute("url-template", urlTemplate); + el.setAttribute("layers", "example layer ere"); + el.setAttribute("options", initialOptions); + + let layerConnectedEventEmittedCount = 0; + let promise = new Promise((resolve) => { + el.addEventListener(layerConnected, (ev) => { + layerConnectedEventEmittedCount += 1; + resolve(ev.detail); + }); + }); + + document.body.appendChild(el); + + // Wait for the initial layer to be created + let detail = await promise; + expect(detail.layer.options.height).toBe(101); + expect(detail.layer.options.bbox).toBe("coords ere"); + + // Update the a different attribute to options + el.setAttribute("a-different-attribute", "with different value"); + + // Give the layer a chance to reload + detail = await promise; + expect(detail.layer.options.height).toBe(101); + expect(detail.layer.options.bbox).toBe("coords ere"); + expect(layerConnectedEventEmittedCount).toBe(1); // initial layer creation only +}); From 49ba39a597432aed25b014ff633125bd268656e0 Mon Sep 17 00:00:00 2001 From: andrewgryan Date: Wed, 27 Nov 2024 13:21:33 +0000 Subject: [PATCH 8/8] Release 0.13.3 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 268025a..64a9a09 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "leaflet-html", "type": "module", - "version": "0.13.2", + "version": "0.13.3", "description": "Leaflet maps expressed in HTML suitable for HTMX", "keywords": [ "leaflet",