From fd4758ab09c2aea610780fac4eb54a7295c75028 Mon Sep 17 00:00:00 2001 From: A-Behairi Date: Wed, 18 Oct 2023 13:31:02 +0200 Subject: [PATCH 01/27] fix: fix double click on draw; close #256; --- elements/drawtools/src/main.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/elements/drawtools/src/main.ts b/elements/drawtools/src/main.ts index 69cb9c057..e239db826 100644 --- a/elements/drawtools/src/main.ts +++ b/elements/drawtools/src/main.ts @@ -52,6 +52,7 @@ export class EOxDrawTools extends LitElement { this._eoxMap.addDraw(this._layerId, { id: "drawInteraction", type: "Polygon", + stopClick:true }); // @ts-ignore this._draw = this._eoxMap.interactions["drawInteraction"] as Draw; From e1fe90d1909ea6896b72b70518c87616aebb8525 Mon Sep 17 00:00:00 2001 From: A-Behairi Date: Thu, 19 Oct 2023 09:54:07 +0200 Subject: [PATCH 02/27] fix: text on styled icons on safari --- elements/layercontrol/src/components/layerTools.js | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/elements/layercontrol/src/components/layerTools.js b/elements/layercontrol/src/components/layerTools.js index 1ab4effad..eaa3b5cf7 100644 --- a/elements/layercontrol/src/components/layerTools.js +++ b/elements/layercontrol/src/components/layerTools.js @@ -1,4 +1,4 @@ -import { LitElement, html } from "lit"; +import { LitElement, html, nothing } from "lit"; import { unsafeHTML } from "lit/directives/unsafe-html.js"; import { map } from "lit/directives/map.js"; import { when } from "lit/directives/when.js"; @@ -90,12 +90,14 @@ export class EOxLayerControlLayerTools extends LitElement { ); }} > - x + ${this.unstyled ? "x" : nothing} `; _sortButton = html` - + `; createRenderRoot() { @@ -145,7 +147,9 @@ export class EOxLayerControlLayerTools extends LitElement { ${map( this._parseTools(this.tools), (tool) => html` - + ` )} From 438b5dac1f33041aa13bb9e17ae1a2bb6d4d4005 Mon Sep 17 00:00:00 2001 From: A-Behairi Date: Thu, 19 Oct 2023 11:52:12 +0200 Subject: [PATCH 03/27] fix: hover effect on icons --- utils/styles/button.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/utils/styles/button.ts b/utils/styles/button.ts index 2afbe8e4d..bc24ce1e7 100644 --- a/utils/styles/button.ts +++ b/utils/styles/button.ts @@ -26,7 +26,7 @@ button { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } -button:hover:not([disabled]) { +button:hover:not([disabled]):not(.icon) { box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); background: var(--primary-color-hover); } From d7f28776771404b2c0f90e84633a417fcff846c6 Mon Sep 17 00:00:00 2001 From: A-Behairi Date: Thu, 19 Oct 2023 12:03:06 +0200 Subject: [PATCH 04/27] fix: layercontrol mobile sorting --- elements/layercontrol/src/helpers.js | 36 ---------------------------- 1 file changed, 36 deletions(-) diff --git a/elements/layercontrol/src/helpers.js b/elements/layercontrol/src/helpers.js index 207bcaef5..96c30f3fd 100644 --- a/elements/layercontrol/src/helpers.js +++ b/elements/layercontrol/src/helpers.js @@ -10,7 +10,6 @@ export const createSortable = (element, layers, that) => { /** * @type {any[]} */ - let childNodes = []; /** @type HTMLElement & {_sortable: import("sortablejs")}*/ ( element )._sortable = Sortable.create(element, { @@ -19,41 +18,6 @@ export const createSortable = (element, layers, that) => { swapThreshold: 0.5, animation: 150, easing: "cubic-bezier(1, 0, 0, 1)", - onStart: (e) => { - // https://github.com/SortableJS/Sortable/issues/546 - const node = e.item; - // Remember the list of child nodes when drag started. - childNodes = Array.prototype.slice.call(node.parentNode.childNodes); - // Filter out the 'sortable-fallback' element used on mobile/old browsers. - childNodes = childNodes.filter( - (node) => - node.nodeType != Node.ELEMENT_NODE || - !node.classList.contains("sortable-fallback") - ); - }, - onEnd: (e) => { - // Undo DOM changes by re-adding all children in their original order. - const node = e.item; - const parentNode = node.parentNode; - for (const childNode of childNodes) { - parentNode.appendChild(childNode); - } - if (e.oldIndex == e.newIndex) return; - // Then move the element using your own logic. - // automatically dispatches "sort" event - const layer = layers.getArray().find( - (l) => - // @ts-ignore - l.ol_uid === - /** @type Element & {layer: import("ol/layer").Layer} */ ( - e.item.querySelector("eox-layercontrol-layer") - // @ts-ignore - ).layer.ol_uid - ); - layers.remove(layer); - layers.insertAt(layers.getLength() - e.newIndex, layer); - that.requestUpdate(); - }, }); }; From 48ebba9e1941beee35243a642431fca1e334984d Mon Sep 17 00:00:00 2001 From: A-Behairi Date: Thu, 19 Oct 2023 14:07:01 +0200 Subject: [PATCH 05/27] chore: clean up --- elements/layercontrol/src/components/layerList.js | 2 +- elements/layercontrol/src/helpers.js | 4 +--- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/elements/layercontrol/src/components/layerList.js b/elements/layercontrol/src/components/layerList.js index fa363a4ed..78304a480 100644 --- a/elements/layercontrol/src/components/layerList.js +++ b/elements/layercontrol/src/components/layerList.js @@ -66,7 +66,7 @@ export class EOxLayerControlLayerList extends LitElement { this.requestUpdate(); this.dispatchEvent(new CustomEvent("changed", { bubbles: true })); }); - createSortable(this.renderRoot.querySelector("ul"), this.layers, this); + createSortable(this.renderRoot.querySelector("ul")); } createRenderRoot() { diff --git a/elements/layercontrol/src/helpers.js b/elements/layercontrol/src/helpers.js index 96c30f3fd..338ce7ae2 100644 --- a/elements/layercontrol/src/helpers.js +++ b/elements/layercontrol/src/helpers.js @@ -3,10 +3,8 @@ import Sortable from "sortablejs"; /** * * @param {HTMLElement} element - * @param {import("ol").Collection} layers - * @param {import("lit").LitElement} that */ -export const createSortable = (element, layers, that) => { +export const createSortable = (element) => { /** * @type {any[]} */ From a9cef85d76bfce9e4847f329310e6430cb35f254 Mon Sep 17 00:00:00 2001 From: A-Behairi Date: Mon, 23 Oct 2023 09:34:02 +0200 Subject: [PATCH 06/27] fix: layers sort --- .../layercontrol/src/components/layerList.js | 4 ++-- elements/layercontrol/src/helpers.js | 20 ++++++++++++++++++- 2 files changed, 21 insertions(+), 3 deletions(-) diff --git a/elements/layercontrol/src/components/layerList.js b/elements/layercontrol/src/components/layerList.js index 78304a480..1f1808708 100644 --- a/elements/layercontrol/src/components/layerList.js +++ b/elements/layercontrol/src/components/layerList.js @@ -58,7 +58,7 @@ export class EOxLayerControlLayerList extends LitElement { this.unstyled = false; } - updated() { + firstUpdated() { if (!this.layers) { return; } @@ -66,7 +66,7 @@ export class EOxLayerControlLayerList extends LitElement { this.requestUpdate(); this.dispatchEvent(new CustomEvent("changed", { bubbles: true })); }); - createSortable(this.renderRoot.querySelector("ul")); + createSortable(this.renderRoot.querySelector("ul"), this.layers); } createRenderRoot() { diff --git a/elements/layercontrol/src/helpers.js b/elements/layercontrol/src/helpers.js index 338ce7ae2..7bcbe7690 100644 --- a/elements/layercontrol/src/helpers.js +++ b/elements/layercontrol/src/helpers.js @@ -3,8 +3,9 @@ import Sortable from "sortablejs"; /** * * @param {HTMLElement} element + * @param {import("ol").Collection} layers */ -export const createSortable = (element) => { +export const createSortable = (element, layers) => { /** * @type {any[]} */ @@ -16,6 +17,23 @@ export const createSortable = (element) => { swapThreshold: 0.5, animation: 150, easing: "cubic-bezier(1, 0, 0, 1)", + onSort:(e)=>{ + if (e.newIndex > e.oldIndex) { + e.from.removeChild(e.item) + } + const layer = layers.getArray().find( + (l) => + // @ts-ignore + l.ol_uid === + /** @type Element & {layer: import("ol/layer").Layer} */ ( + e.item.querySelector("eox-layercontrol-layer") + // @ts-ignore + ).layer.ol_uid + ); + layers.remove(layer); + layers.insertAt(layers.getLength() - e.newIndex, layer); + + } }); }; From ed5a9c723dd31a3c837f1ae0cc08c819f29152b3 Mon Sep 17 00:00:00 2001 From: A-Behairi Date: Mon, 23 Oct 2023 09:36:27 +0200 Subject: [PATCH 07/27] chore: fix format --- elements/layercontrol/src/helpers.js | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/elements/layercontrol/src/helpers.js b/elements/layercontrol/src/helpers.js index 7bcbe7690..162cb6f1c 100644 --- a/elements/layercontrol/src/helpers.js +++ b/elements/layercontrol/src/helpers.js @@ -17,11 +17,11 @@ export const createSortable = (element, layers) => { swapThreshold: 0.5, animation: 150, easing: "cubic-bezier(1, 0, 0, 1)", - onSort:(e)=>{ + onSort: (e) => { if (e.newIndex > e.oldIndex) { - e.from.removeChild(e.item) + e.from.removeChild(e.item); } - const layer = layers.getArray().find( + const layer = layers.getArray().find( (l) => // @ts-ignore l.ol_uid === @@ -32,8 +32,7 @@ export const createSortable = (element, layers) => { ); layers.remove(layer); layers.insertAt(layers.getLength() - e.newIndex, layer); - - } + }, }); }; From a335c2adfa14989006edb7ec02637fbabca43751 Mon Sep 17 00:00:00 2001 From: A-Behairi Date: Mon, 30 Oct 2023 13:19:34 +0100 Subject: [PATCH 08/27] fix: layercontrol tests --- elements/layercontrol/src/components/layerList.js | 8 +++++--- elements/layercontrol/src/helpers.js | 3 --- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/elements/layercontrol/src/components/layerList.js b/elements/layercontrol/src/components/layerList.js index 1f1808708..c62c5b54e 100644 --- a/elements/layercontrol/src/components/layerList.js +++ b/elements/layercontrol/src/components/layerList.js @@ -59,14 +59,16 @@ export class EOxLayerControlLayerList extends LitElement { } firstUpdated() { + createSortable(this.renderRoot.querySelector("ul"), this.layers); + } + + updated(){ if (!this.layers) { - return; + return } this.layers.on("change:length", () => { - this.requestUpdate(); this.dispatchEvent(new CustomEvent("changed", { bubbles: true })); }); - createSortable(this.renderRoot.querySelector("ul"), this.layers); } createRenderRoot() { diff --git a/elements/layercontrol/src/helpers.js b/elements/layercontrol/src/helpers.js index 162cb6f1c..555fc42ab 100644 --- a/elements/layercontrol/src/helpers.js +++ b/elements/layercontrol/src/helpers.js @@ -18,9 +18,6 @@ export const createSortable = (element, layers) => { animation: 150, easing: "cubic-bezier(1, 0, 0, 1)", onSort: (e) => { - if (e.newIndex > e.oldIndex) { - e.from.removeChild(e.item); - } const layer = layers.getArray().find( (l) => // @ts-ignore From 1880b3dd0d1db74dac052c027a37abe30dde96f0 Mon Sep 17 00:00:00 2001 From: A-Behairi Date: Mon, 30 Oct 2023 13:35:14 +0100 Subject: [PATCH 09/27] chore: fix formatting --- elements/layercontrol/src/components/layerList.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/elements/layercontrol/src/components/layerList.js b/elements/layercontrol/src/components/layerList.js index c62c5b54e..d77d8a3d3 100644 --- a/elements/layercontrol/src/components/layerList.js +++ b/elements/layercontrol/src/components/layerList.js @@ -61,10 +61,10 @@ export class EOxLayerControlLayerList extends LitElement { firstUpdated() { createSortable(this.renderRoot.querySelector("ul"), this.layers); } - - updated(){ + + updated() { if (!this.layers) { - return + return; } this.layers.on("change:length", () => { this.dispatchEvent(new CustomEvent("changed", { bubbles: true })); From 6781e9588f4a02a22f07680c95ad2996fe1889be Mon Sep 17 00:00:00 2001 From: A-Behairi Date: Mon, 30 Oct 2023 15:49:19 +0100 Subject: [PATCH 10/27] fix: update layers list after layers length change --- elements/layercontrol/src/components/layerList.js | 1 + elements/layercontrol/src/helpers.js | 3 +++ 2 files changed, 4 insertions(+) diff --git a/elements/layercontrol/src/components/layerList.js b/elements/layercontrol/src/components/layerList.js index d77d8a3d3..6d04c4e84 100644 --- a/elements/layercontrol/src/components/layerList.js +++ b/elements/layercontrol/src/components/layerList.js @@ -67,6 +67,7 @@ export class EOxLayerControlLayerList extends LitElement { return; } this.layers.on("change:length", () => { + this.requestUpdate(); this.dispatchEvent(new CustomEvent("changed", { bubbles: true })); }); } diff --git a/elements/layercontrol/src/helpers.js b/elements/layercontrol/src/helpers.js index 555fc42ab..162cb6f1c 100644 --- a/elements/layercontrol/src/helpers.js +++ b/elements/layercontrol/src/helpers.js @@ -18,6 +18,9 @@ export const createSortable = (element, layers) => { animation: 150, easing: "cubic-bezier(1, 0, 0, 1)", onSort: (e) => { + if (e.newIndex > e.oldIndex) { + e.from.removeChild(e.item); + } const layer = layers.getArray().find( (l) => // @ts-ignore From 87df123f4fd95293fe27267f4dfcbd73bb2632e4 Mon Sep 17 00:00:00 2001 From: A-Behairi Date: Thu, 2 Nov 2023 18:27:07 +0100 Subject: [PATCH 11/27] chore: add style override property --- elements/layercontrol/src/main.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/elements/layercontrol/src/main.js b/elements/layercontrol/src/main.js index b4a4bc269..64a853262 100644 --- a/elements/layercontrol/src/main.js +++ b/elements/layercontrol/src/main.js @@ -38,6 +38,7 @@ export class EOxLayerControl extends LitElement { titleProperty: { attribute: "title-property", type: String }, tools: { attribute: false }, unstyled: { type: Boolean }, + styleOverride: { type: String }, }; constructor() { @@ -74,6 +75,8 @@ export class EOxLayerControl extends LitElement { * Render the element without additional styles */ this.unstyled = false; + + this.styleOverride = ``; } updated() { @@ -91,6 +94,7 @@ export class EOxLayerControl extends LitElement { ${when( this.map, From 36ed4a0af550e5ed6b0fed600ee40adf6ae32c03 Mon Sep 17 00:00:00 2001 From: A-Behairi Date: Mon, 6 Nov 2023 10:08:51 +0100 Subject: [PATCH 12/27] fix: map reassignment --- elements/layercontrol/src/main.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/elements/layercontrol/src/main.js b/elements/layercontrol/src/main.js index 8b93165db..88ea42fb7 100644 --- a/elements/layercontrol/src/main.js +++ b/elements/layercontrol/src/main.js @@ -90,7 +90,7 @@ export class EOxLayerControl extends LitElement { * @type Element & { map: import("ol").Map } */ const foundElement = document.querySelector(this.for); - if (foundElement) { + if (foundElement && foundElement?.map !== this.map) { this.map = foundElement.map; } } From 3e64ece3c31c9363ef5b0eb624ea9c9a9b3802b4 Mon Sep 17 00:00:00 2001 From: A-Behairi Date: Mon, 6 Nov 2023 10:46:23 +0100 Subject: [PATCH 13/27] chore: update mockLayer --- elements/layercontrol/test/_mockMap.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/elements/layercontrol/test/_mockMap.js b/elements/layercontrol/test/_mockMap.js index e0c9abc49..cc26fff9e 100644 --- a/elements/layercontrol/test/_mockMap.js +++ b/elements/layercontrol/test/_mockMap.js @@ -56,6 +56,12 @@ class MockCollection { }; layers = []; on = (event, fun) => (this.events = { [event]: fun }); + un = (event, fun) => { + if(this.events[event] == fun){ + delete this.events[event] + } + }; + hasListener = (event) => event in this.events pop() { this.layers.pop(); this.events["change:length"](); From 249613cdd76721e75a9430f6558085f33e4ca46d Mon Sep 17 00:00:00 2001 From: A-Behairi Date: Mon, 6 Nov 2023 10:49:13 +0100 Subject: [PATCH 14/27] chore: layer unlisten on update --- .../layercontrol/src/components/layerList.js | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/elements/layercontrol/src/components/layerList.js b/elements/layercontrol/src/components/layerList.js index 8e09322ab..06fd33a6d 100644 --- a/elements/layercontrol/src/components/layerList.js +++ b/elements/layercontrol/src/components/layerList.js @@ -64,7 +64,15 @@ export class EOxLayerControlLayerList extends LitElement { this.noShadow = true; } + #handleLayersChangeLength = () => { + this.requestUpdate(); + this.dispatchEvent(new CustomEvent("changed", { bubbles: true })); + }; + firstUpdated() { + if (!this.layers) { + return; + } createSortable(this.renderRoot.querySelector("ul"), this.layers); } @@ -72,10 +80,10 @@ export class EOxLayerControlLayerList extends LitElement { if (!this.layers) { return; } - this.layers.on("change:length", () => { - this.requestUpdate(); - this.dispatchEvent(new CustomEvent("changed", { bubbles: true })); - }); + if (this.layers.hasListener("change:length")) { + this.layers?.un("change:length", this.#handleLayersChangeLength); + } + this.layers.on("change:length", this.#handleLayersChangeLength); } createRenderRoot() { From 6b463fe2f9aab5742f80113c90ae999c1343906d Mon Sep 17 00:00:00 2001 From: A-Behairi Date: Mon, 6 Nov 2023 10:49:28 +0100 Subject: [PATCH 15/27] chore: format --- elements/layercontrol/test/_mockMap.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/elements/layercontrol/test/_mockMap.js b/elements/layercontrol/test/_mockMap.js index cc26fff9e..b38850a64 100644 --- a/elements/layercontrol/test/_mockMap.js +++ b/elements/layercontrol/test/_mockMap.js @@ -57,11 +57,11 @@ class MockCollection { layers = []; on = (event, fun) => (this.events = { [event]: fun }); un = (event, fun) => { - if(this.events[event] == fun){ - delete this.events[event] + if (this.events[event] == fun) { + delete this.events[event]; } }; - hasListener = (event) => event in this.events + hasListener = (event) => event in this.events; pop() { this.layers.pop(); this.events["change:length"](); From 086e910f78b2d9771765656dfa98c54c3aecb549 Mon Sep 17 00:00:00 2001 From: A-Behairi Date: Thu, 23 Nov 2023 10:25:21 +0100 Subject: [PATCH 16/27] fix: nodes sort manipulation --- elements/layercontrol/src/helpers.js | 25 ++++++++++++++++++++++--- 1 file changed, 22 insertions(+), 3 deletions(-) diff --git a/elements/layercontrol/src/helpers.js b/elements/layercontrol/src/helpers.js index 7d91248e2..28a310f27 100644 --- a/elements/layercontrol/src/helpers.js +++ b/elements/layercontrol/src/helpers.js @@ -9,6 +9,7 @@ export const createSortable = (element, layers) => { /** * @type {any[]} */ + let childNodes = []; /** @type HTMLElement & {_sortable: import("sortablejs")}*/ ( element )._sortable = Sortable.create(element, { @@ -17,10 +18,28 @@ export const createSortable = (element, layers) => { swapThreshold: 0.5, animation: 150, easing: "cubic-bezier(1, 0, 0, 1)", - onSort: (e) => { - if (e.newIndex > e.oldIndex) { - e.from.removeChild(e.item); + onStart: (e) => { + // https://github.com/SortableJS/Sortable/issues/546 + const node = e.item; + // Remember the list of child nodes when drag started. + childNodes = Array.prototype.slice.call(node.parentNode.childNodes); + // Filter out the 'sortable-fallback' element used on mobile/old browsers. + childNodes = childNodes.filter( + (node) => + node.nodeType != Node.ELEMENT_NODE || + !node.classList.contains("sortable-fallback") + ); + }, + onEnd: (e) => { + // Undo DOM changes by re-adding all children in their original order. + const node = e.item; + const parentNode = node.parentNode; + for (const childNode of childNodes) { + parentNode.appendChild(childNode); } + if (e.oldIndex == e.newIndex) return; + // Then move the element using your own logic. + // automatically dispatches "sort" event const layer = layers.getArray().find( (l) => // @ts-ignore From 42a6bd87db01f00f6df92dbe353da41f320800ae Mon Sep 17 00:00:00 2001 From: A-Behairi Date: Mon, 27 Nov 2023 15:19:42 +0100 Subject: [PATCH 17/27] fix: list rerender and update --- .../layercontrol/src/components/layerList.js | 108 +++++++++--------- elements/layercontrol/src/helpers.js | 4 +- 2 files changed, 57 insertions(+), 55 deletions(-) diff --git a/elements/layercontrol/src/components/layerList.js b/elements/layercontrol/src/components/layerList.js index 1952e0178..39bd23b35 100644 --- a/elements/layercontrol/src/components/layerList.js +++ b/elements/layercontrol/src/components/layerList.js @@ -1,10 +1,10 @@ import { LitElement, html } from "lit"; import { when } from "lit/directives/when.js"; -import { keyed } from "lit/directives/keyed.js"; +import { repeat } from "lit/directives/repeat.js"; import { createSortable, getLayerType } from "../helpers"; import "./layer"; import "./layerGroup"; - +import _debounce from "lodash.debounce"; /** * Display of a list of layers * @@ -71,15 +71,18 @@ export class EOxLayerControlLayerList extends LitElement { } #handleLayersChangeLength = () => { + this.#debHandleLayersChangeLength(); + }; + #debHandleLayersChangeLength = _debounce(() => { this.requestUpdate(); this.dispatchEvent(new CustomEvent("changed", { bubbles: true })); - }; + }, 50); firstUpdated() { if (!this.layers) { return; } - createSortable(this.renderRoot.querySelector("ul"), this.layers); + createSortable(this.renderRoot.querySelector("ul"), this.layers, this); } updated() { @@ -106,57 +109,54 @@ export class EOxLayerControlLayerList extends LitElement { ${when( this.layers, () => html` - ${this.layers - .getArray() - .filter( - (l) => - !l.get("layerControlHide") && !l.get("layerControlOptional") - ) - .reverse() - .map((layer) => - keyed( - layer.get(this.idProperty), - html` -
  • - ${ - /** @type {import("ol/layer").Group} */ (layer) - .getLayers - ? html` - this.requestUpdate()} - > - - ` - : html` - { - this.requestUpdate(); - }} - > - ` - } -
    • - ` + ${repeat( + this.layers + .getArray() + .filter( + (l) => + !l.get("layerControlHide") && !l.get("layerControlOptional") ) - )} + .reverse(), + (layer) => layer, + (layer) => html` +
  • + ${ + /** @type {import("ol/layer").Group} */ (layer).getLayers + ? html` + this.requestUpdate()} + > + + ` + : html` + { + this.requestUpdate(); + }} + > + ` + } +
    • + ` + )} ` )} diff --git a/elements/layercontrol/src/helpers.js b/elements/layercontrol/src/helpers.js index 28a310f27..a31479571 100644 --- a/elements/layercontrol/src/helpers.js +++ b/elements/layercontrol/src/helpers.js @@ -4,8 +4,9 @@ import Sortable from "sortablejs"; * * @param {HTMLElement} element * @param {import("ol").Collection} layers + * @param {import("lit").LitElement} that */ -export const createSortable = (element, layers) => { +export const createSortable = (element, layers,that) => { /** * @type {any[]} */ @@ -51,6 +52,7 @@ export const createSortable = (element, layers) => { ); layers.remove(layer); layers.insertAt(layers.getLength() - e.newIndex, layer); + that.requestUpdate() }, }); }; From 870cfb88d75abceb1118a982ed27757d0c2a1b22 Mon Sep 17 00:00:00 2001 From: A-Behairi Date: Mon, 27 Nov 2023 17:16:19 +0100 Subject: [PATCH 18/27] fix: sort layers containing optional flag --- elements/layercontrol/src/components/optionalList.js | 2 ++ elements/layercontrol/src/helpers.js | 4 ++-- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/elements/layercontrol/src/components/optionalList.js b/elements/layercontrol/src/components/optionalList.js index ca221e7f7..49cda16cb 100644 --- a/elements/layercontrol/src/components/optionalList.js +++ b/elements/layercontrol/src/components/optionalList.js @@ -89,6 +89,8 @@ export class EOxLayerControlOptionalList extends LitElement { // TODO always set the new layer at the first position selectedLayer?.set("layerControlOptional", false); selectedLayer?.setVisible(true); + const removed = this.layers.remove(selectedLayer); + this.layers.insertAt(this.layers.getLength(), removed); this.dispatchEvent(new CustomEvent("changed", { bubbles: true })); this.renderRoot.parentNode .querySelectorAll("eox-layercontrol-layer-list") diff --git a/elements/layercontrol/src/helpers.js b/elements/layercontrol/src/helpers.js index a31479571..bfad39eaf 100644 --- a/elements/layercontrol/src/helpers.js +++ b/elements/layercontrol/src/helpers.js @@ -6,7 +6,7 @@ import Sortable from "sortablejs"; * @param {import("ol").Collection} layers * @param {import("lit").LitElement} that */ -export const createSortable = (element, layers,that) => { +export const createSortable = (element, layers, that) => { /** * @type {any[]} */ @@ -52,7 +52,7 @@ export const createSortable = (element, layers,that) => { ); layers.remove(layer); layers.insertAt(layers.getLength() - e.newIndex, layer); - that.requestUpdate() + that.requestUpdate(); }, }); }; From 0259b699da99dc65db86275797ed35e2d4eaba9a Mon Sep 17 00:00:00 2001 From: A-Behairi Date: Mon, 27 Nov 2023 17:19:52 +0100 Subject: [PATCH 19/27] Revert "fix: sort layers containing optional flag" This reverts commit 870cfb88d75abceb1118a982ed27757d0c2a1b22. --- elements/layercontrol/src/components/optionalList.js | 2 -- elements/layercontrol/src/helpers.js | 4 ++-- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/elements/layercontrol/src/components/optionalList.js b/elements/layercontrol/src/components/optionalList.js index 49cda16cb..ca221e7f7 100644 --- a/elements/layercontrol/src/components/optionalList.js +++ b/elements/layercontrol/src/components/optionalList.js @@ -89,8 +89,6 @@ export class EOxLayerControlOptionalList extends LitElement { // TODO always set the new layer at the first position selectedLayer?.set("layerControlOptional", false); selectedLayer?.setVisible(true); - const removed = this.layers.remove(selectedLayer); - this.layers.insertAt(this.layers.getLength(), removed); this.dispatchEvent(new CustomEvent("changed", { bubbles: true })); this.renderRoot.parentNode .querySelectorAll("eox-layercontrol-layer-list") diff --git a/elements/layercontrol/src/helpers.js b/elements/layercontrol/src/helpers.js index bfad39eaf..a31479571 100644 --- a/elements/layercontrol/src/helpers.js +++ b/elements/layercontrol/src/helpers.js @@ -6,7 +6,7 @@ import Sortable from "sortablejs"; * @param {import("ol").Collection} layers * @param {import("lit").LitElement} that */ -export const createSortable = (element, layers, that) => { +export const createSortable = (element, layers,that) => { /** * @type {any[]} */ @@ -52,7 +52,7 @@ export const createSortable = (element, layers, that) => { ); layers.remove(layer); layers.insertAt(layers.getLength() - e.newIndex, layer); - that.requestUpdate(); + that.requestUpdate() }, }); }; From b10b7eba9442fff0d573a17ebf8f35239fc876df Mon Sep 17 00:00:00 2001 From: A-Behairi Date: Tue, 28 Nov 2023 11:00:05 +0100 Subject: [PATCH 20/27] fix: sort layers containing optional layers --- .../layercontrol/src/components/layerList.js | 20 +++++++++++++++---- .../src/components/optionalList.js | 17 ++++++++++++++++ elements/layercontrol/src/helpers.js | 4 ++-- 3 files changed, 35 insertions(+), 6 deletions(-) diff --git a/elements/layercontrol/src/components/layerList.js b/elements/layercontrol/src/components/layerList.js index 39bd23b35..a591de4cd 100644 --- a/elements/layercontrol/src/components/layerList.js +++ b/elements/layercontrol/src/components/layerList.js @@ -78,6 +78,20 @@ export class EOxLayerControlLayerList extends LitElement { this.dispatchEvent(new CustomEvent("changed", { bubbles: true })); }, 50); + /** + * EOxLayerControlLayer & EOxLayerControlLayerGroup changed event handler + * @param {CustomEvent} e + **/ + #handleLayerChanged = (e) => { + if (e.detail) { + const removed = this.layers.remove(e.detail); + if (removed) { + this.layers.insertAt(0, removed); + } + } + this.requestUpdate(); + }; + firstUpdated() { if (!this.layers) { return; @@ -135,7 +149,7 @@ export class EOxLayerControlLayerList extends LitElement { .showLayerZoomState=${this.showLayerZoomState} .tools=${this.tools} .unstyled=${this.unstyled} - @changed=${() => this.requestUpdate()} + @changed=${this.#handleLayerChanged} > ` @@ -148,9 +162,7 @@ export class EOxLayerControlLayerList extends LitElement { .showLayerZoomState=${this.showLayerZoomState} .tools=${this.tools} .unstyled=${this.unstyled} - @changed=${() => { - this.requestUpdate(); - }} + @changed=${this.#handleLayerChanged} > ` } diff --git a/elements/layercontrol/src/components/optionalList.js b/elements/layercontrol/src/components/optionalList.js index ca221e7f7..7ce8cc089 100644 --- a/elements/layercontrol/src/components/optionalList.js +++ b/elements/layercontrol/src/components/optionalList.js @@ -45,6 +45,23 @@ export class EOxLayerControlOptionalList extends LitElement { return this.noShadow ? this : super.createRenderRoot(); } + firstUpdated() { + const arr = this.layers.getArray(); + let i = 0; + while (i < arr.length) { + if ( + arr[i].get("layerControlHide") || + arr[i].get("layerControlOptional") + ) { + const removed = this.layers.remove(arr[i]); + if (removed) { + this.layers.insertAt(0, removed); + } + } + i++; + } + } + render() { return html` diff --git a/elements/layercontrol/src/helpers.js b/elements/layercontrol/src/helpers.js index a31479571..bfad39eaf 100644 --- a/elements/layercontrol/src/helpers.js +++ b/elements/layercontrol/src/helpers.js @@ -6,7 +6,7 @@ import Sortable from "sortablejs"; * @param {import("ol").Collection} layers * @param {import("lit").LitElement} that */ -export const createSortable = (element, layers,that) => { +export const createSortable = (element, layers, that) => { /** * @type {any[]} */ @@ -52,7 +52,7 @@ export const createSortable = (element, layers,that) => { ); layers.remove(layer); layers.insertAt(layers.getLength() - e.newIndex, layer); - that.requestUpdate() + that.requestUpdate(); }, }); }; From aa0c59239275bba3b1e53b76f21323766d52784c Mon Sep 17 00:00:00 2001 From: A-Behairi Date: Tue, 28 Nov 2023 12:58:56 +0100 Subject: [PATCH 21/27] fix: added opt layer to the top --- elements/layercontrol/src/components/layerList.js | 5 ++++- elements/layercontrol/src/components/optionalList.js | 7 +++++++ 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/elements/layercontrol/src/components/layerList.js b/elements/layercontrol/src/components/layerList.js index a591de4cd..ca9feb281 100644 --- a/elements/layercontrol/src/components/layerList.js +++ b/elements/layercontrol/src/components/layerList.js @@ -83,7 +83,10 @@ export class EOxLayerControlLayerList extends LitElement { * @param {CustomEvent} e **/ #handleLayerChanged = (e) => { - if (e.detail) { + if ( + e.detail && + (e.detail.get("layerControlHide") || e.detail.get("layerControlOptional")) + ) { const removed = this.layers.remove(e.detail); if (removed) { this.layers.insertAt(0, removed); diff --git a/elements/layercontrol/src/components/optionalList.js b/elements/layercontrol/src/components/optionalList.js index 7ce8cc089..7b014f8d5 100644 --- a/elements/layercontrol/src/components/optionalList.js +++ b/elements/layercontrol/src/components/optionalList.js @@ -46,6 +46,9 @@ export class EOxLayerControlOptionalList extends LitElement { } firstUpdated() { + if (!this.layers) { + return; + } const arr = this.layers.getArray(); let i = 0; while (i < arr.length) { @@ -106,6 +109,10 @@ export class EOxLayerControlOptionalList extends LitElement { // TODO always set the new layer at the first position selectedLayer?.set("layerControlOptional", false); selectedLayer?.setVisible(true); + const removed = this.layers.remove(selectedLayer); + if (removed) { + this.layers.insertAt(this.layers.getLength(), removed); + } this.dispatchEvent(new CustomEvent("changed", { bubbles: true })); this.renderRoot.parentNode .querySelectorAll("eox-layercontrol-layer-list") From e4021bd0a1904e566f0deda0186a02a5c13431a8 Mon Sep 17 00:00:00 2001 From: A-Behairi Date: Tue, 28 Nov 2023 13:07:01 +0100 Subject: [PATCH 22/27] fix: added functions to mockCollection --- elements/layercontrol/test/_mockMap.js | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/elements/layercontrol/test/_mockMap.js b/elements/layercontrol/test/_mockMap.js index ace9b7805..e40adb6f2 100644 --- a/elements/layercontrol/test/_mockMap.js +++ b/elements/layercontrol/test/_mockMap.js @@ -72,6 +72,27 @@ class MockCollection { this.layers.push(new MockLayer(newLayer)); this.events["change:length"](); } + remove(layer) { + layer = new MockLayer(layer); + const i = this.layers.indexOf(layer); + if (i) { + this.layers.splice(i, 1); + return layer; + } else { + return undefined; + } + } + insertAt(index, layer) { + layer = new MockLayer(layer); + this.layers = [ + ...this.layers.slice(0, index), + layer, + ...this.layers.slice(index), + ]; + } + getLength(){ + return this.layers.length + } } export class MockMap extends HTMLElement { From d13c0546cd3c29fd91d15d5a958d4702de2dea2e Mon Sep 17 00:00:00 2001 From: A-Behairi Date: Tue, 28 Nov 2023 13:11:29 +0100 Subject: [PATCH 23/27] chore: fomat --- elements/layercontrol/test/_mockMap.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/elements/layercontrol/test/_mockMap.js b/elements/layercontrol/test/_mockMap.js index e40adb6f2..e9026edee 100644 --- a/elements/layercontrol/test/_mockMap.js +++ b/elements/layercontrol/test/_mockMap.js @@ -90,8 +90,8 @@ class MockCollection { ...this.layers.slice(index), ]; } - getLength(){ - return this.layers.length + getLength() { + return this.layers.length; } } From 3e5bda35e2c168c4b97b51a961633a22ece92d37 Mon Sep 17 00:00:00 2001 From: A-Behairi Date: Tue, 28 Nov 2023 17:49:17 +0100 Subject: [PATCH 24/27] fix: reordering optional & hidden layers --- .../layercontrol/src/components/layerList.js | 29 +++++++++++++++++++ .../src/components/optionalList.js | 24 --------------- elements/layercontrol/test/_mockMap.js | 12 ++++++++ 3 files changed, 41 insertions(+), 24 deletions(-) diff --git a/elements/layercontrol/src/components/layerList.js b/elements/layercontrol/src/components/layerList.js index ca9feb281..5cc022495 100644 --- a/elements/layercontrol/src/components/layerList.js +++ b/elements/layercontrol/src/components/layerList.js @@ -95,10 +95,39 @@ export class EOxLayerControlLayerList extends LitElement { this.requestUpdate(); }; + /** + * + * @param {import("ol/events/Event").default & {key:string}} e + */ + #handleHiddenLayerChange = (e) => { + const layer = e.target; + if (layer.get(e.key)) { + //changes the layer index so it doesn't exist mid sort + const removed = this.layers.remove(layer); + if (removed) { + this.layers.insertAt(0, removed); + } + console.log("hidden"); + } else if (layer.get(e.key) === false) { + //set shown layer on top + const removed = this.layers.remove(layer); + if (removed) { + this.layers.insertAt(this.layers.getLength(), removed); + } + console.log("shown"); + } + }; + firstUpdated() { if (!this.layers) { return; } + this.layers.forEach((layer) => { + //@ts-ignore + layer.on("change:layerControlOptional", this.#handleHiddenLayerChange); + //@ts-ignore + layer.on("change:layerControlHide", this.#handleHiddenLayerChange); + }); createSortable(this.renderRoot.querySelector("ul"), this.layers, this); } diff --git a/elements/layercontrol/src/components/optionalList.js b/elements/layercontrol/src/components/optionalList.js index 7b014f8d5..ca221e7f7 100644 --- a/elements/layercontrol/src/components/optionalList.js +++ b/elements/layercontrol/src/components/optionalList.js @@ -45,26 +45,6 @@ export class EOxLayerControlOptionalList extends LitElement { return this.noShadow ? this : super.createRenderRoot(); } - firstUpdated() { - if (!this.layers) { - return; - } - const arr = this.layers.getArray(); - let i = 0; - while (i < arr.length) { - if ( - arr[i].get("layerControlHide") || - arr[i].get("layerControlOptional") - ) { - const removed = this.layers.remove(arr[i]); - if (removed) { - this.layers.insertAt(0, removed); - } - } - i++; - } - } - render() { return html` @@ -109,10 +89,6 @@ export class EOxLayerControlOptionalList extends LitElement { // TODO always set the new layer at the first position selectedLayer?.set("layerControlOptional", false); selectedLayer?.setVisible(true); - const removed = this.layers.remove(selectedLayer); - if (removed) { - this.layers.insertAt(this.layers.getLength(), removed); - } this.dispatchEvent(new CustomEvent("changed", { bubbles: true })); this.renderRoot.parentNode .querySelectorAll("eox-layercontrol-layer-list") diff --git a/elements/layercontrol/test/_mockMap.js b/elements/layercontrol/test/_mockMap.js index e9026edee..5d23a59fb 100644 --- a/elements/layercontrol/test/_mockMap.js +++ b/elements/layercontrol/test/_mockMap.js @@ -41,6 +41,15 @@ class MockLayer { this.visible = visible; } visible = true; + events = { + ["change"]: () => undefined, + }; + on = (event, fun) => (this.events = { [event]: fun }); + un = (event, fun) => { + if (this.events[event] == fun) { + delete this.events[event]; + } + }; } class MockCollection { @@ -93,6 +102,9 @@ class MockCollection { getLength() { return this.layers.length; } + forEach(func) { + this.layers.forEach(func); + } } export class MockMap extends HTMLElement { From ac4ab75fe313bb3d3b7371f29c76400491bcb5e9 Mon Sep 17 00:00:00 2001 From: silvester-pari Date: Wed, 29 Nov 2023 09:44:44 +0100 Subject: [PATCH 25/27] fix: loop through layers and remove/add via index --- elements/layercontrol/src/helpers.js | 35 ++++++++++++++++++++++---- elements/layercontrol/test/_mockMap.js | 3 +++ 2 files changed, 33 insertions(+), 5 deletions(-) diff --git a/elements/layercontrol/src/helpers.js b/elements/layercontrol/src/helpers.js index bfad39eaf..7707fdc98 100644 --- a/elements/layercontrol/src/helpers.js +++ b/elements/layercontrol/src/helpers.js @@ -3,10 +3,10 @@ import Sortable from "sortablejs"; /** * * @param {HTMLElement} element - * @param {import("ol").Collection} layers + * @param {import("ol").Collection} collection * @param {import("lit").LitElement} that */ -export const createSortable = (element, layers, that) => { +export const createSortable = (element, collection, that) => { /** * @type {any[]} */ @@ -41,7 +41,8 @@ export const createSortable = (element, layers, that) => { if (e.oldIndex == e.newIndex) return; // Then move the element using your own logic. // automatically dispatches "sort" event - const layer = layers.getArray().find( + const layers = collection.getArray(); + const layer = layers.find( (l) => // @ts-ignore l.ol_uid === @@ -50,8 +51,32 @@ export const createSortable = (element, layers, that) => { // @ts-ignore ).layer.ol_uid ); - layers.remove(layer); - layers.insertAt(layers.getLength() - e.newIndex, layer); + const numberOfHiddenLayers = layers.filter( + (l) => l.get("layerControlHide") || l.get("layerControlOptional") + ).length; + const target = + layers[layers.length - 1 - e.newIndex - numberOfHiddenLayers]; + let draggedIndex; + let dropIndex; + // remove dragged layer from collection + for ( + draggedIndex = layers.length - 1; + draggedIndex > -1; + draggedIndex-- + ) { + if (layers[draggedIndex] == layer) { + collection.removeAt(draggedIndex); + break; + } + } + // re-add dragged layer at position of layer that has beend dropped on + for (dropIndex = layers.length - 1; dropIndex > -1; dropIndex--) { + if (layers[dropIndex] === target) { + if (draggedIndex > dropIndex) collection.insertAt(dropIndex, layer); + else collection.insertAt(dropIndex + 1, layer); + break; + } + } that.requestUpdate(); }, }); diff --git a/elements/layercontrol/test/_mockMap.js b/elements/layercontrol/test/_mockMap.js index 5d23a59fb..c19964ff9 100644 --- a/elements/layercontrol/test/_mockMap.js +++ b/elements/layercontrol/test/_mockMap.js @@ -91,6 +91,9 @@ class MockCollection { return undefined; } } + removeAt(index) { + this.layers = [...this.layers.slice(index)]; + } insertAt(index, layer) { layer = new MockLayer(layer); this.layers = [ From 1ac40b298cf38d54753d91dd2d43d8d3e4333c5d Mon Sep 17 00:00:00 2001 From: silvester-pari Date: Wed, 29 Nov 2023 13:40:03 +0100 Subject: [PATCH 26/27] chore(deps): add lodash debounce package --- elements/layercontrol/package.json | 3 ++- package-lock.json | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/elements/layercontrol/package.json b/elements/layercontrol/package.json index ffe82a127..f58ebec62 100644 --- a/elements/layercontrol/package.json +++ b/elements/layercontrol/package.json @@ -32,6 +32,7 @@ }, "dependencies": { "dayjs": "^1.11.8", - "lit": "^3.0.2" + "lit": "^3.0.2", + "lodash.debounce": "^4.0.8" } } diff --git a/package-lock.json b/package-lock.json index fd17c386c..3f8967060 100644 --- a/package-lock.json +++ b/package-lock.json @@ -128,7 +128,8 @@ "version": "0.11.1", "dependencies": { "dayjs": "^1.11.8", - "lit": "^3.0.2" + "lit": "^3.0.2", + "lodash.debounce": "^4.0.8" }, "devDependencies": { "@eox/eslint-config": "^1.0.0", From 603dd94ba5d7007917fb6790434031aab4617ca5 Mon Sep 17 00:00:00 2001 From: silvester-pari Date: Wed, 29 Nov 2023 13:53:39 +0100 Subject: [PATCH 27/27] chore: remove code not needed with new approach --- .../layercontrol/src/components/layerList.js | 55 ++----------------- 1 file changed, 4 insertions(+), 51 deletions(-) diff --git a/elements/layercontrol/src/components/layerList.js b/elements/layercontrol/src/components/layerList.js index 5cc022495..01d2b1342 100644 --- a/elements/layercontrol/src/components/layerList.js +++ b/elements/layercontrol/src/components/layerList.js @@ -78,57 +78,10 @@ export class EOxLayerControlLayerList extends LitElement { this.dispatchEvent(new CustomEvent("changed", { bubbles: true })); }, 50); - /** - * EOxLayerControlLayer & EOxLayerControlLayerGroup changed event handler - * @param {CustomEvent} e - **/ - #handleLayerChanged = (e) => { - if ( - e.detail && - (e.detail.get("layerControlHide") || e.detail.get("layerControlOptional")) - ) { - const removed = this.layers.remove(e.detail); - if (removed) { - this.layers.insertAt(0, removed); - } - } - this.requestUpdate(); - }; - - /** - * - * @param {import("ol/events/Event").default & {key:string}} e - */ - #handleHiddenLayerChange = (e) => { - const layer = e.target; - if (layer.get(e.key)) { - //changes the layer index so it doesn't exist mid sort - const removed = this.layers.remove(layer); - if (removed) { - this.layers.insertAt(0, removed); - } - console.log("hidden"); - } else if (layer.get(e.key) === false) { - //set shown layer on top - const removed = this.layers.remove(layer); - if (removed) { - this.layers.insertAt(this.layers.getLength(), removed); - } - console.log("shown"); - } - }; - firstUpdated() { - if (!this.layers) { - return; + if (this.layers) { + createSortable(this.renderRoot.querySelector("ul"), this.layers, this); } - this.layers.forEach((layer) => { - //@ts-ignore - layer.on("change:layerControlOptional", this.#handleHiddenLayerChange); - //@ts-ignore - layer.on("change:layerControlHide", this.#handleHiddenLayerChange); - }); - createSortable(this.renderRoot.querySelector("ul"), this.layers, this); } updated() { @@ -181,7 +134,7 @@ export class EOxLayerControlLayerList extends LitElement { .showLayerZoomState=${this.showLayerZoomState} .tools=${this.tools} .unstyled=${this.unstyled} - @changed=${this.#handleLayerChanged} + @changed=${() => this.requestUpdate()} > ` @@ -194,7 +147,7 @@ export class EOxLayerControlLayerList extends LitElement { .showLayerZoomState=${this.showLayerZoomState} .tools=${this.tools} .unstyled=${this.unstyled} - @changed=${this.#handleLayerChanged} + @changed=${() => this.requestUpdate()} > ` }