@geogirafe/lib-geoportal 1.2.0-dev.2845070426 → 1.2.0-dev.2847659248

package/components/map-2d/component.d.ts

@@ -120,6 +120,7 @@ export default class Map2dComponent extends GirafeHTMLElement {
     onChangeOrder: () => void;
     private reorderLayers;
     private onChangeLayerOpacity;
+    private setOpacityRecursively;
     private onChangeBasemapOpacity;
     /**
      * Change filter configuration on layer (only LayerWMS are affected)

package/components/map-2d/component.js

@@ -660,10 +660,25 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
         else if (layerInfos instanceof LayerOsm) {
             this.osmManager.changeOpacity(layerInfos);
         }
+        else if (layerInfos instanceof GroupLayer) {
+            this.context.stateManager.batchChanges(() => {
+                this.setOpacityRecursively(layerInfos.opacity, layerInfos);
+            });
+        }
         else {
             console.warn(`Changing opacity for layer ${layerInfos.name} of type ${typeof layerInfos} not supported`);
         }
     }
+    setOpacityRecursively(opacity, layer) {
+        if (layer instanceof Layer) {
+            layer.opacity = opacity;
+        }
+        else if (layer instanceof GroupLayer) {
+            for (const childLayer of layer.children) {
+                this.setOpacityRecursively(opacity, childLayer);
+            }
+        }
+    }
     onChangeBasemapOpacity(basemap) {
         applyOpacityToLayers(basemap.opacity, basemap.layersList, (layer) => this.onChangeLayerOpacity(layer));
     }

package/components/treeview/tools/treeviewelement.d.ts

@@ -10,6 +10,7 @@ export default abstract class TreeViewElement extends GirafeHTMLElement {
     constructor(layer: BaseLayer, name: string);
     protected connectedCallback(): void;
     render(): void;
+    protected isSameLayerObject(layer: BaseLayer): boolean;
     private highlight;
     refreshRender(): void;
     refreshRender(layer?: BaseLayer): void;
@@ -22,6 +23,7 @@ export default abstract class TreeViewElement extends GirafeHTMLElement {
     private setDragStyle;
     getButtonClass(button: string): string;
     protected createTimeRestrictionTooltip(layer: TimeAwareLayer): void;
+    protected createOpacityTooltip(): void;
     protected removeFromParent(): void;
     private static removeLayerFromParent;
 }

package/components/treeview/tools/treeviewelement.js

@@ -6,6 +6,8 @@ import tippy from 'tippy.js';
 import TimeRestrictionComponent from '../../timerestriction/component.js';
 import LayerWms from '../../../models/layers/layerwms.js';
 import Layer from '../../../models/layers/layer.js';
+import Grouplayer from '../../../models/layers/grouplayer.js';
+import LayerGroup from 'ol/layer/Group.js';
 export default class TreeViewElement extends GirafeHTMLElement {
     dragManager;
     layer;
@@ -31,11 +33,16 @@ export default class TreeViewElement extends GirafeHTMLElement {
             this.createTimeRestrictionTooltip(this.layer);
         }
         this.subscribe(/layers\.layersList\..*\.isHighlighted/, (_oldValue, newValue, layer) => {
-            if (newValue && layer === this.layer) {
+            if (!this.isSameLayerObject(layer))
+                return;
+            if (newValue) {
                 this.highlight();
             }
         });
     }
+    isSameLayerObject(layer) {
+        return layer === this.layer;
+    }
     highlight() {
         this.header.scrollIntoView({
             behavior: 'smooth',
@@ -117,7 +124,14 @@ export default class TreeViewElement extends GirafeHTMLElement {
                 }
                 return 'hidden';
             case 'opacity':
-                if (!this.layer.inactive && this.layer instanceof Layer) {
+                if (this.layer.inactive) {
+                    return 'hidden';
+                }
+                if (this.layer instanceof Layer) {
+                    return this.layer.opacity < 1 ? activeButtonClasses : buttonClasses;
+                }
+                // Allow opacity on group-layer of the 1st level only.
+                if (this.layer instanceof Grouplayer && this.layer.isFirstLevelGroup()) {
                     return this.layer.opacity < 1 ? activeButtonClasses : buttonClasses;
                 }
                 return 'hidden';
@@ -181,6 +195,36 @@ export default class TreeViewElement extends GirafeHTMLElement {
             }
         });
     }
+    createOpacityTooltip() {
+        if (!(this.layer instanceof Layer || (this.layer instanceof Grouplayer && this.layer.isFirstLevelGroup()))) {
+            console.warn('Opacity tooltip can only be created for Layer or 1st level LayerGroup');
+            return;
+        }
+        const layer = this.layer || LayerGroup;
+        const el = this.shadow.getElementById('opacity');
+        if (!el) {
+            return;
+        }
+        tippy(el, {
+            trigger: 'click',
+            arrow: true,
+            interactive: true,
+            theme: 'light',
+            placement: 'right',
+            content: (_reference) => {
+                const slider = document.createElement('input');
+                slider.type = 'range';
+                slider.className = 'gg-range';
+                slider.min = '0';
+                slider.max = '20';
+                slider.value = (layer.opacity * 20).toString();
+                slider.oninput = () => {
+                    layer.opacity = Number.parseInt(slider.value) / 20;
+                };
+                return slider;
+            }
+        });
+    }
     removeFromParent() {
         TreeViewElement.removeLayerFromParent(this.layer, this.state);
     }

package/components/treeview/treeviewgroup/component.js

@@ -13,7 +13,7 @@ header{border-top:1px solid #ddd;align-items:center;height:2rem;display:flex}.to
 .hidden{display:none!important}.gg-rotate90{transform:rotate(90deg)}.gg-rotate180{transform:rotate(180deg)}.gg-rotate270{transform:rotate(270deg)}img{filter:var(--svg-filter)}img.legend-image{filter:var(--svg-map-filter);background:var(--svg-legend-bkg)}div{scrollbar-width:thin}a,a:visited{color:var(--link-color)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes spin-wait{0%{transform:rotate(0)}7%{transform:rotate(360deg)}to{transform:rotate(360deg)}}.gg-spin{animation-name:spin;animation-duration:2s;animation-timing-function:linear;animation-iteration-count:infinite}.gg-spin-wait{animation-name:spin-wait;animation-duration:10s;animation-timing-function:linear;animation-iteration-count:infinite}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-thumb{background:#999}button,input,select,textarea{font:inherit}.gg-button,.gg-select,.gg-input,.gg-textarea{background-color:var(--bkg-color);color:var(--text-color);border:var(--app-standard-border);box-sizing:border-box;cursor:pointer;border-radius:3px;outline:0;margin:0;padding:0 0 0 .5rem;display:inline-block}.gg-label{background-color:var(--bkg-color);color:var(--text-color);border:none;align-items:center;margin:0;padding:0;display:flex}.gg-button,.gg-select,.gg-input,.gg-label{min-height:calc(var(--app-standard-height) / 1.5)}.gg-textarea{max-height:initial;resize:vertical;height:6rem;padding:.5rem;line-height:1.3rem}.gg-input{cursor:text}.gg-checkbox{accent-color:var(--text-color);cursor:pointer;width:1.2rem}.gg-range{accent-color:var(--text-color)}.gg-button{padding:0 .5rem}.gg-button.active{border:solid 1px var(--text-color-grad1);background-color:var(--bkg-color-grad2)}.gg-button:disabled{background-color:var(--bkg-color-grad1);color:var(--text-color-grad2);cursor:not-allowed;border:none}.gg-button:disabled img{filter:opacity(.6)}.gg-input:disabled,.gg-select:disabled,.gg-textarea:disabled{background-color:var(--bkg-color-grad1);color:var(--text-color-grad2);cursor:not-allowed}.gg-button>img{vertical-align:middle}.gg-icon-button{color:var(--text-color);cursor:pointer;background-color:#0000;border:none;flex-direction:column;justify-content:center;align-items:center;padding:0;display:flex}.gg-icon{justify-content:center;align-items:center;display:flex}.gg-big,.gg-big-withtext{min-width:var(--app-standard-height);min-height:var(--app-standard-height);max-height:var(--app-standard-height)}.gg-big img,.gg-big-withtext img{width:calc(var(--app-standard-height) - 1.5rem);margin:0}.gg-big-withtext span{font-variant:small-caps;padding:0 1rem;font-size:.9rem}.gg-medium,.gg-medium-withtext{min-width:calc(var(--app-standard-height) / 1.2);min-height:calc(var(--app-standard-height) / 1.2);max-height:calc(var(--app-standard-height) / 1.2);flex-direction:row}.gg-medium img{width:calc(var(--app-standard-height) / 2.4);margin:0}.gg-medium-withtext img{width:calc(var(--app-standard-height) / 2.4);margin-left:.5rem}.gg-medium-withtext span{padding:0 1rem 0 .5rem;font-size:.9rem}.gg-small,.gg-small-withtext{min-width:calc(var(--app-standard-height) / 2);min-height:calc(var(--app-standard-height) / 2);max-height:calc(var(--app-standard-height) / 2);flex-direction:row}.gg-small img{width:calc(var(--app-standard-height) / 3);margin:0}.gg-small-withtext img{width:calc(var(--app-standard-height) / 3);margin-left:.5rem}.gg-small-withtext span{padding:0 .5rem 0 .3rem;font-size:.9rem}.gg-button:hover:not(:disabled),.gg-select:hover:not(:disabled),.gg-input:hover:not(:disabled),.gg-textarea:hover:not(:disabled),.gg-icon-button:hover:not(:disabled){background-color:var(--bkg-color-grad1)}.gg-opacity{opacity:.5}.gg-opacity:hover{opacity:1;background-color:#0000}.gg-tabs{cursor:pointer;grid-auto-flow:column;padding-bottom:1rem;font-size:1rem;display:grid}.gg-tab{border:none;border-bottom:var(--app-standard-border);cursor:pointer;color:var(--text-color);background:0 0;padding:.5rem}.gg-tab.active{border-bottom:solid 1px var(--text-color)}.girafe-button-big,.girafe-button-large,.girafe-button-small,.girafe-button-tiny{color:var(--text-color);background-color:#0000;border:none;flex-direction:column;display:flex}.girafe-button-big:hover,.girafe-button-large:hover,.girafe-button-small:hover,.girafe-button-tiny:hover{background-color:var(--bkg-color-grad1);cursor:pointer}.girafe-button-big.dark,.girafe-button-large.dark,.girafe-button-small.dark,.girafe-button-tiny.dark{background-color:var(--bkg-color);filter:invert()}.girafe-button-big{width:var(--app-standard-height);height:var(--app-standard-height);align-items:center;padding:1rem}.girafe-button-big img{overflow:hidden}.girafe-button-large{flex-direction:row}.girafe-button-large img{height:2rem;margin:.3rem}.girafe-button-large span{height:2rem;margin:.3rem;line-height:2rem}.girafe-button-small{min-width:calc(var(--app-standard-height) / 2);height:calc(var(--app-standard-height) / 2);align-items:center;padding:.5rem}.girafe-button-small img{overflow:hidden}.girafe-button-small span{text-align:left;text-overflow:ellipsis;width:100%;overflow:hidden}.girafe-button-tiny{align-items:center;width:1rem;height:1rem;padding:0}.girafe-button-tiny img{overflow:hidden}.girafe-onboarding-theme{background-color:var(--bkg-color)!important;color:var(--text-color)!important}.girafe-onboarding-theme button{background-color:var(--bkg-color)!important;color:var(--text-color)!important;text-shadow:none!important}.girafe-onboarding-theme button.driver-popover-close-btn{z-index:10000}.tippy-box{background-color:var(--bkg-color)!important;border:var(--app-standard-border)!important}.tippy-content{color:var(--text-color)!important}.tippy-arrow{color:var(--bkg-color)!important}.tippy-box[data-theme~=error]{background-color:var(--error-color);white-space:pre-line}div.tippy-box[data-theme=image-popup]{border:var(--app-standard-border)!important;& div.tippy-content{background-color:var(--bkg-color)!important;& img{max-width:20rem;max-height:20rem}}& div.tippy-arrow{color:var(--bkg-color)!important}}
 </style>
 <style>${this.customStyle}</style>
-<link rel="stylesheet" href="lib/tippy.js/tippy.css"><link rel="stylesheet" href="lib/tippy.js/backdrop.css"><link rel="stylesheet" href="lib/tippy.js/border.css"><link rel="stylesheet" href="lib/tippy.js/svg-arrow.css"><div id="container"><header><button class="gg-icon-button gg-small gg-opacity" tip="Expand / Collapse" onclick="${() => this.layer.isExpanded = !this.layer.isExpanded}"><img class="${this.layer.isExpanded ? 'gg-rotate90 gg-caret' : 'gg-caret'}" alt="Expand/Collapse button" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8bWFzayBpZD0ibWFzazBfMTM2XzY5NTIiIHN0eWxlPSJtYXNrLXR5cGU6YWxwaGEiIG1hc2tVbml0cz0idXNlclNwYWNlT25Vc2UiIHg9IjAiIHk9IjAiIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCI+CiAgPHJlY3Qgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiBmaWxsPSIjRDlEOUQ5Ii8+CiAgPC9tYXNrPgogIDxnIG1hc2s9InVybCgjbWFzazBfMTM2XzY5NTIpIj4KICA8cGF0aCBkPSJNMTAuNSAxNi4zQzEwLjM2NjcgMTYuMyAxMC4yNSAxNi4yNTQyIDEwLjE1IDE2LjE2MjVDMTAuMDUgMTYuMDcwOCAxMCAxNS45NSAxMCAxNS44VjguMjAwMDFDMTAgOC4wNTAwMSAxMC4wNSA3LjkyOTE4IDEwLjE1IDcuODM3NTFDMTAuMjUgNy43NDU4NSAxMC4zNjY3IDcuNzAwMDEgMTAuNSA3LjcwMDAxQzEwLjUzMzMgNy43MDAwMSAxMC42NSA3Ljc1MDAxIDEwLjg1IDcuODUwMDFMMTQuNDc1IDExLjQ3NUMxNC41NTgzIDExLjU1ODMgMTQuNjE2NyAxMS42NDE3IDE0LjY1IDExLjcyNUMxNC42ODMzIDExLjgwODMgMTQuNyAxMS45IDE0LjcgMTJDMTQuNyAxMi4xIDE0LjY4MzMgMTIuMTkxNyAxNC42NSAxMi4yNzVDMTQuNjE2NyAxMi4zNTgzIDE0LjU1ODMgMTIuNDQxNyAxNC40NzUgMTIuNTI1TDEwLjg1IDE2LjE1QzEwLjggMTYuMiAxMC43NDU4IDE2LjIzNzUgMTAuNjg3NSAxNi4yNjI1QzEwLjYyOTIgMTYuMjg3NSAxMC41NjY3IDE2LjMgMTAuNSAxNi4zWiIgZmlsbD0iIzFDMUIxRiIvPgogIDwvZz4KPC9zdmc+CiAg"></button> <button class="${this.layer.activeState === 'on' ? 'gg-icon-button gg-small gg-selected' : 'gg-icon-button gg-small gg-opacity'}" tip="Activate / Deactivate" onclick="${() => this.toggle()}"><img class="${this.layer.activeState === 'on' ? 'gg-checkbox' : 'hidden'}" alt="Expand/Collapse button" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj48IS0tIUZvbnQgQXdlc29tZSBGcmVlIDYuNi4wIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlL2ZyZWUgQ29weXJpZ2h0IDIwMjQgRm9udGljb25zLCBJbmMuLS0+PHBhdGggZD0iTTY0IDMyQzI4LjcgMzIgMCA2MC43IDAgOTZMMCA0MTZjMCAzNS4zIDI4LjcgNjQgNjQgNjRsMzIwIDBjMzUuMyAwIDY0LTI4LjcgNjQtNjRsMC0zMjBjMC0zNS4zLTI4LjctNjQtNjQtNjRMNjQgMzJ6TTMzNyAyMDlMMjA5IDMzN2MtOS40IDkuNC0yNC42IDkuNC0zMy45IDBsLTY0LTY0Yy05LjQtOS40LTkuNC0yNC42IDAtMzMuOXMyNC42LTkuNCAzMy45IDBsNDcgNDdMMzAzIDE3NWM5LjQtOS40IDI0LjYtOS40IDMzLjkgMHM5LjQgMjQuNiAwIDMzLjl6Ii8+PC9zdmc+"> <img class="${this.layer.activeState === 'semi' ? 'gg-checkbox' : 'hidden'}" alt="Expand/Collapse button" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj48IS0tIUZvbnQgQXdlc29tZSBGcmVlIDYuNi4wIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlL2ZyZWUgQ29weXJpZ2h0IDIwMjQgRm9udGljb25zLCBJbmMuLS0+PHBhdGggZD0iTTY0IDgwYy04LjggMC0xNiA3LjItMTYgMTZsMCAzMjBjMCA4LjggNy4yIDE2IDE2IDE2bDMyMCAwYzguOCAwIDE2LTcuMiAxNi0xNmwwLTMyMGMwLTguOC03LjItMTYtMTYtMTZMNjQgODB6TTAgOTZDMCA2MC43IDI4LjcgMzIgNjQgMzJsMzIwIDBjMzUuMyAwIDY0IDI4LjcgNjQgNjRsMCAzMjBjMCAzNS4zLTI4LjcgNjQtNjQgNjRMNjQgNDgwYy0zNS4zIDAtNjQtMjguNy02NC02NEwwIDk2ek0zMzcgMjA5TDIwOSAzMzdjLTkuNCA5LjQtMjQuNiA5LjQtMzMuOSAwbC02NC02NGMtOS40LTkuNC05LjQtMjQuNiAwLTMzLjlzMjQuNi05LjQgMzMuOSAwbDQ3IDQ3TDMwMyAxNzVjOS40LTkuNCAyNC42LTkuNCAzMy45IDBzOS40IDI0LjYgMCAzMy45eiIvPjwvc3ZnPg=="> <img class="${this.layer.activeState === 'off' ? 'gg-checkbox' : 'hidden'}" alt="Expand/Collapse button" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj48IS0tIUZvbnQgQXdlc29tZSBGcmVlIDYuNi4wIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlL2ZyZWUgQ29weXJpZ2h0IDIwMjQgRm9udGljb25zLCBJbmMuLS0+PHBhdGggZD0iTTM4NCA4MGM4LjggMCAxNiA3LjIgMTYgMTZsMCAzMjBjMCA4LjgtNy4yIDE2LTE2IDE2TDY0IDQzMmMtOC44IDAtMTYtNy4yLTE2LTE2TDQ4IDk2YzAtOC44IDcuMi0xNiAxNi0xNmwzMjAgMHpNNjQgMzJDMjguNyAzMiAwIDYwLjcgMCA5NkwwIDQxNmMwIDM1LjMgMjguNyA2NCA2NCA2NGwzMjAgMGMzNS4zIDAgNjQtMjguNyA2NC02NGwwLTMyMGMwLTM1LjMtMjguNy02NC02NC02NEw2NCAzMnoiLz48L3N2Zz4="></button> <button class="${this.layer.hasError ? 'gg-icon-button gg-small gg-opacity' : 'hidden'}" tip="Error on layer"><img alt="Error on layer" src="icons/error.svg"></button><div class="label-container"><button class="${this.layer.activeState === 'on' ? 'gg-icon-button gg-small gg-selected' : 'gg-icon-button gg-small gg-opacity'}" onclick="${() => this.toggle()}"><span i18n="${this.layer.name}" class="gg-tree-label">${this.layer.name}</span></button></div><div><button id="timeRestriction" class="${this.getButtonClass('timeRestriction')}" tip="Define time restriction on group"><img alt="Define time restriction on group" src="icons/clock.svg"></button></div><button class="${this.layer.hasMetadata ? 'metadata gg-icon-button gg-small gg-opacity tool' : 'hidden'}" tip="Show metadata" onclick="${() => this.showMetadata()}"><img alt="Remove theme" src="icons/info.svg"></button> <button id="drag-button" class="${this.getButtonClass('draggable')}" tip="Move"><img alt="Move layer" src="icons/drag.svg"></button> <button class="${this.getButtonClass('removable')}" tip="Remove group" onclick="${() => this.deleteGroup()}"><img alt="Remove group" src="icons/trash.svg"></button></header><div class="${(this.layer.isExpanded && this.layer.isVisible ? 'children' : 'hidden')}">${this.sortedChildren().filter(layer => layer.isVisible).map(layer => (layer instanceof GroupLayer) ? uHtmlFor(layer, layer.treeItemId) `<girafe-tree-view-group groupid="${layer.treeItemId}"></girafe-tree-view-group>` : uHtmlFor(layer, layer.treeItemId) `<girafe-tree-view-item layerid="${layer.treeItemId}"></girafe-tree-view-item>`)}</div></div>
+<link rel="stylesheet" href="lib/tippy.js/tippy.css"><link rel="stylesheet" href="lib/tippy.js/backdrop.css"><link rel="stylesheet" href="lib/tippy.js/border.css"><link rel="stylesheet" href="lib/tippy.js/svg-arrow.css"><div id="container"><header><button class="gg-icon-button gg-small gg-opacity" tip="Expand / Collapse" onclick="${() => this.layer.isExpanded = !this.layer.isExpanded}"><img class="${this.layer.isExpanded ? 'gg-rotate90 gg-caret' : 'gg-caret'}" alt="Expand/Collapse button" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8bWFzayBpZD0ibWFzazBfMTM2XzY5NTIiIHN0eWxlPSJtYXNrLXR5cGU6YWxwaGEiIG1hc2tVbml0cz0idXNlclNwYWNlT25Vc2UiIHg9IjAiIHk9IjAiIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCI+CiAgPHJlY3Qgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiBmaWxsPSIjRDlEOUQ5Ii8+CiAgPC9tYXNrPgogIDxnIG1hc2s9InVybCgjbWFzazBfMTM2XzY5NTIpIj4KICA8cGF0aCBkPSJNMTAuNSAxNi4zQzEwLjM2NjcgMTYuMyAxMC4yNSAxNi4yNTQyIDEwLjE1IDE2LjE2MjVDMTAuMDUgMTYuMDcwOCAxMCAxNS45NSAxMCAxNS44VjguMjAwMDFDMTAgOC4wNTAwMSAxMC4wNSA3LjkyOTE4IDEwLjE1IDcuODM3NTFDMTAuMjUgNy43NDU4NSAxMC4zNjY3IDcuNzAwMDEgMTAuNSA3LjcwMDAxQzEwLjUzMzMgNy43MDAwMSAxMC42NSA3Ljc1MDAxIDEwLjg1IDcuODUwMDFMMTQuNDc1IDExLjQ3NUMxNC41NTgzIDExLjU1ODMgMTQuNjE2NyAxMS42NDE3IDE0LjY1IDExLjcyNUMxNC42ODMzIDExLjgwODMgMTQuNyAxMS45IDE0LjcgMTJDMTQuNyAxMi4xIDE0LjY4MzMgMTIuMTkxNyAxNC42NSAxMi4yNzVDMTQuNjE2NyAxMi4zNTgzIDE0LjU1ODMgMTIuNDQxNyAxNC40NzUgMTIuNTI1TDEwLjg1IDE2LjE1QzEwLjggMTYuMiAxMC43NDU4IDE2LjIzNzUgMTAuNjg3NSAxNi4yNjI1QzEwLjYyOTIgMTYuMjg3NSAxMC41NjY3IDE2LjMgMTAuNSAxNi4zWiIgZmlsbD0iIzFDMUIxRiIvPgogIDwvZz4KPC9zdmc+CiAg"></button> <button class="${this.layer.activeState === 'on' ? 'gg-icon-button gg-small gg-selected' : 'gg-icon-button gg-small gg-opacity'}" tip="Activate / Deactivate" onclick="${() => this.toggle()}"><img class="${this.layer.activeState === 'on' ? 'gg-checkbox' : 'hidden'}" alt="Expand/Collapse button" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj48IS0tIUZvbnQgQXdlc29tZSBGcmVlIDYuNi4wIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlL2ZyZWUgQ29weXJpZ2h0IDIwMjQgRm9udGljb25zLCBJbmMuLS0+PHBhdGggZD0iTTY0IDMyQzI4LjcgMzIgMCA2MC43IDAgOTZMMCA0MTZjMCAzNS4zIDI4LjcgNjQgNjQgNjRsMzIwIDBjMzUuMyAwIDY0LTI4LjcgNjQtNjRsMC0zMjBjMC0zNS4zLTI4LjctNjQtNjQtNjRMNjQgMzJ6TTMzNyAyMDlMMjA5IDMzN2MtOS40IDkuNC0yNC42IDkuNC0zMy45IDBsLTY0LTY0Yy05LjQtOS40LTkuNC0yNC42IDAtMzMuOXMyNC42LTkuNCAzMy45IDBsNDcgNDdMMzAzIDE3NWM5LjQtOS40IDI0LjYtOS40IDMzLjkgMHM5LjQgMjQuNiAwIDMzLjl6Ii8+PC9zdmc+"> <img class="${this.layer.activeState === 'semi' ? 'gg-checkbox' : 'hidden'}" alt="Expand/Collapse button" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj48IS0tIUZvbnQgQXdlc29tZSBGcmVlIDYuNi4wIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlL2ZyZWUgQ29weXJpZ2h0IDIwMjQgRm9udGljb25zLCBJbmMuLS0+PHBhdGggZD0iTTY0IDgwYy04LjggMC0xNiA3LjItMTYgMTZsMCAzMjBjMCA4LjggNy4yIDE2IDE2IDE2bDMyMCAwYzguOCAwIDE2LTcuMiAxNi0xNmwwLTMyMGMwLTguOC03LjItMTYtMTYtMTZMNjQgODB6TTAgOTZDMCA2MC43IDI4LjcgMzIgNjQgMzJsMzIwIDBjMzUuMyAwIDY0IDI4LjcgNjQgNjRsMCAzMjBjMCAzNS4zLTI4LjcgNjQtNjQgNjRMNjQgNDgwYy0zNS4zIDAtNjQtMjguNy02NC02NEwwIDk2ek0zMzcgMjA5TDIwOSAzMzdjLTkuNCA5LjQtMjQuNiA5LjQtMzMuOSAwbC02NC02NGMtOS40LTkuNC05LjQtMjQuNiAwLTMzLjlzMjQuNi05LjQgMzMuOSAwbDQ3IDQ3TDMwMyAxNzVjOS40LTkuNCAyNC42LTkuNCAzMy45IDBzOS40IDI0LjYgMCAzMy45eiIvPjwvc3ZnPg=="> <img class="${this.layer.activeState === 'off' ? 'gg-checkbox' : 'hidden'}" alt="Expand/Collapse button" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj48IS0tIUZvbnQgQXdlc29tZSBGcmVlIDYuNi4wIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlL2ZyZWUgQ29weXJpZ2h0IDIwMjQgRm9udGljb25zLCBJbmMuLS0+PHBhdGggZD0iTTM4NCA4MGM4LjggMCAxNiA3LjIgMTYgMTZsMCAzMjBjMCA4LjgtNy4yIDE2LTE2IDE2TDY0IDQzMmMtOC44IDAtMTYtNy4yLTE2LTE2TDQ4IDk2YzAtOC44IDcuMi0xNiAxNi0xNmwzMjAgMHpNNjQgMzJDMjguNyAzMiAwIDYwLjcgMCA5NkwwIDQxNmMwIDM1LjMgMjguNyA2NCA2NCA2NGwzMjAgMGMzNS4zIDAgNjQtMjguNyA2NC02NGwwLTMyMGMwLTM1LjMtMjguNy02NC02NC02NEw2NCAzMnoiLz48L3N2Zz4="></button> <button class="${this.layer.hasError ? 'gg-icon-button gg-small gg-opacity' : 'hidden'}" tip="Error on layer"><img alt="Error on layer" src="icons/error.svg"></button><div class="label-container"><button class="${this.layer.activeState === 'on' ? 'gg-icon-button gg-small gg-selected' : 'gg-icon-button gg-small gg-opacity'}" onclick="${() => this.toggle()}"><span i18n="${this.layer.name}" class="gg-tree-label">${this.layer.name}</span></button></div><button id="opacity" class="${this.getButtonClass('opacity')}" tip="Control opacity"><img alt="Control opacity" src="icons/opacity.svg"></button><div><button id="timeRestriction" class="${this.getButtonClass('timeRestriction')}" tip="Define time restriction on group"><img alt="Define time restriction on group" src="icons/clock.svg"></button></div><button class="${this.layer.hasMetadata ? 'metadata gg-icon-button gg-small gg-opacity tool' : 'hidden'}" tip="Show metadata" onclick="${() => this.showMetadata()}"><img alt="Remove theme" src="icons/info.svg"></button> <button id="drag-button" class="${this.getButtonClass('draggable')}" tip="Move"><img alt="Move layer" src="icons/drag.svg"></button> <button class="${this.getButtonClass('removable')}" tip="Remove group" onclick="${() => this.deleteGroup()}"><img alt="Remove group" src="icons/trash.svg"></button></header><div class="${(this.layer.isExpanded && this.layer.isVisible ? 'children' : 'hidden')}">${this.sortedChildren().filter(layer => layer.isVisible).map(layer => (layer instanceof GroupLayer) ? uHtmlFor(layer, layer.treeItemId) `<girafe-tree-view-group groupid="${layer.treeItemId}"></girafe-tree-view-group>` : uHtmlFor(layer, layer.treeItemId) `<girafe-tree-view-item layerid="${layer.treeItemId}"></girafe-tree-view-item>`)}</div></div>
 ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
     };
     layer;
@@ -31,16 +31,36 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
         super.render();
     }
     registerEvents() {
-        this.subscribe(/layers\.layersList\..*\.isExpanded/, (_oldValue, _newValue, group) => this.refreshRender(group));
-        this.subscribe(/layers\.layersList\..*\.activeState/, (_oldValue, _newValue, group) => this.refreshRender(group));
-        this.subscribe(/layers\.layersList\..*\.children/, (_oldValue, _newValue, group) => this.refreshRender(group));
+        this.subscribe(/layers\.layersList\..*\.isExpanded/, (_oldValue, _newValue, group) => {
+            if (!this.isSameLayerObject(group))
+                return;
+            this.refreshRender(group);
+        });
+        this.subscribe(/layers\.layersList\..*\.activeState/, (_oldValue, _newValue, group) => {
+            if (!this.isSameLayerObject(group))
+                return;
+            this.refreshRender(group);
+        });
+        this.subscribe(/layers\.layersList\..*\.children/, (_oldValue, _newValue, group) => {
+            if (!this.isSameLayerObject(group))
+                return;
+            this.refreshRender(group);
+        });
         this.subscribe(/layers\.layersList\..*\.order/, (_oldValue, _newValue, layer) => {
+            // Don't check for same object here to affect all moved items.
             this.refreshRender(layer);
             this.refreshRender(layer.parent);
         });
         this.subscribe(/layers\.layersList\..*\.timeRestriction/, (_old, _new, layer) => {
+            if (!this.isSameLayerObject(layer))
+                return;
             this.refreshRender(layer);
         });
+        this.subscribe(/layers\.layersList\..*\.opacity/, (_oldValue, _newValue, group) => {
+            if (!this.isSameLayerObject(group))
+                return;
+            this.refreshRender(group);
+        });
         this.subscribe('treeview.renderEnabled', () => {
             this.refreshRender();
         });
@@ -48,6 +68,7 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
     connectedCallback() {
         super.connectedCallback();
         this.render();
+        this.createOpacityTooltip();
         super.girafeTranslate();
         this.registerEvents();
     }

package/components/treeview/treeviewitem/component.d.ts

@@ -18,7 +18,6 @@ declare class TreeViewItemComponent extends TreeViewElement {
     private setWmsLegend;
     setWmtsLegend(): void;
     getCrossOrigin(url: string | null): "anonymous" | "use-credentials";
-    createOpacityTooltip(): void;
     createFilterTooltip(): void;
     registerEvents(): void;
     refreshLegendsAndStyle(): void;
@@ -29,5 +28,11 @@ declare class TreeViewItemComponent extends TreeViewElement {
     convertToDrawing(): void;
     deleteLayer(): void;
     protected connectedCallback(): void;
+    /**
+     * Update the opacity slider value by changing the instance of the tippy tooltip.
+     * This is needed when the opacity of the layer group changes.
+     * @private
+     */
+    private updateOpacitySlider;
 }
 export default TreeViewItemComponent;

package/components/treeview/treeviewitem/component.js

@@ -1,3 +1,9 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 import { html as uHtml } from 'uhtml';
 // SPDX-License-Identifier: Apache-2.0
 import tippy from 'tippy.js';
@@ -9,6 +15,7 @@ import TreeViewElement from '../tools/treeviewelement.js';
 import { isSnappableLayer } from '../../../models/layers/snappablelayer.js';
 import WmsLegendHelper from '../../../tools/wms/wmslegendhelper.js';
 import LayerDrawing from '../../../models/layers/layerdrawing.js';
+import { UsedInTemplateOnly } from '../../../decorators.js';
 class TreeViewItemComponent extends TreeViewElement {
     templateUrl = null;
     styleUrls = null;
@@ -50,7 +57,7 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
         this.layer = layer;
     }
     render() {
-        // If we come from a html element, the layer was not defined in the constructor
+        // If we come from an HTML element, the layer was not defined in the constructor
         // And we have to set the layer using the id passed to the layerid attribute
         const layerId = this.getAttribute('layerid');
         if (layerId) {
@@ -102,29 +109,6 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
         const hostname = new URL(url).hostname;
         return this.state.oauth.audience.includes(hostname) ? 'use-credentials' : 'anonymous';
     }
-    createOpacityTooltip() {
-        const el = this.shadow.getElementById('opacity');
-        if (!el) {
-            return;
-        }
-        tippy(el, {
-            trigger: 'click',
-            arrow: true,
-            interactive: true,
-            theme: 'light',
-            placement: 'right',
-            content: (_reference) => {
-                const slider = document.createElement('input');
-                slider.type = 'range';
-                slider.className = 'gg-range';
-                slider.min = '0';
-                slider.max = '20';
-                slider.value = (this.layer.opacity * 20).toString();
-                slider.oninput = () => (this.layer.opacity = Number.parseInt(slider.value) / 20);
-                return slider;
-            }
-        });
-    }
     createFilterTooltip() {
         const el = this.shadow.getElementById('filter');
         if (!el) {
@@ -145,23 +129,53 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
     }
     registerEvents() {
         this.subscribe(/layers\..*\.isLegendExpanded/, (_oldValue, _newValue, layer) => {
+            if (!this.isSameLayerObject(layer))
+                return;
             this.refreshLegendsAndStyle();
             this.refreshRender(layer);
         });
         this.subscribe(/layers\.layersList\..*\.activeState/, (_oldValue, _newValue, layer) => {
+            if (!this.isSameLayerObject(layer))
+                return;
             this.refreshLegendsAndStyle();
             this.refreshRender(layer);
         });
-        this.subscribe(/layers\.layersList\..*\.hasError/, (_oldValue, _newValue, layer) => this.refreshRender(layer));
-        this.subscribe(/layers\.layersList\..*\.errorMessage/, (_oldValue, _newValue, layer) => this.refreshRender(layer));
-        this.subscribe(/layers\.layersList\..*\.filter/, (_oldValue, _newValue, layer) => this.refreshRender(layer));
-        this.subscribe(/layers\.layersList\..*\.snapActive/, (_oldValue, _newValue, layer) => this.refreshRender(layer));
+        this.subscribe(/layers\.layersList\..*\.hasError/, (_oldValue, _newValue, layer) => {
+            if (!this.isSameLayerObject(layer))
+                return;
+            this.refreshRender(layer);
+        });
+        this.subscribe(/layers\.layersList\..*\.errorMessage/, (_oldValue, _newValue, layer) => {
+            if (!this.isSameLayerObject(layer))
+                return;
+            this.refreshRender(layer);
+        });
+        this.subscribe(/layers\.layersList\..*\.filter/, (_oldValue, _newValue, layer) => {
+            if (!this.isSameLayerObject(layer))
+                return;
+            this.refreshRender(layer);
+        });
+        this.subscribe(/layers\.layersList\..*\.snapActive/, (_oldValue, _newValue, layer) => {
+            if (!this.isSameLayerObject(layer))
+                return;
+            this.refreshRender(layer);
+        });
         this.subscribe(/layers\.layersList\..*\.timeRestriction/, (_old, _new, layer) => {
-            if (layer === this.layer || layer === this.layer.parent)
+            if (this.isSameLayerObject(layer) || layer === this.layer.parent) {
                 this.refreshRender(this.layer);
+            }
+        });
+        this.subscribe(/layers\.layersList\..*\.opacity/, (_oldValue, _newValue, layer) => {
+            if (!this.isSameLayerObject(layer))
+                return;
+            this.refreshRender(layer);
+            this.updateOpacitySlider();
+        });
+        this.subscribe(/layers\.layersList\..*\.swiped/, (_oldValue, _newValue, layer) => {
+            if (!this.isSameLayerObject(layer))
+                return;
+            this.refreshRender(layer);
         });
-        this.subscribe(/layers\.layersList\..*\.opacity/, (_oldValue, _newValue, layer) => this.refreshRender(layer));
-        this.subscribe(/layers\.layersList\..*\.swiped/, (_oldValue, _newValue, layer) => this.refreshRender(layer));
         this.subscribe('treeview.advanced', () => this.refreshRender(this.layer));
         this.subscribe('position', () => this.refreshLegendsAndStyle());
     }
@@ -247,5 +261,23 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
         this.render();
         this.registerEvents();
     }
+    /**
+     * Update the opacity slider value by changing the instance of the tippy tooltip.
+     * This is needed when the opacity of the layer group changes.
+     * @private
+     */
+    updateOpacitySlider() {
+        const el = this.shadow.getElementById('opacity');
+        if (!el) {
+            return;
+        }
+        el._tippy.props.content.value = (this.layer.opacity * 20).toString();
+    }
 }
+__decorate([
+    UsedInTemplateOnly()
+], TreeViewItemComponent.prototype, "hasLegend", null);
+__decorate([
+    UsedInTemplateOnly()
+], TreeViewItemComponent.prototype, "getCrossOrigin", null);
 export default TreeViewItemComponent;

package/components/treeview/treeviewtheme/component.js

@@ -1,9 +1,6 @@
 import { htmlFor as uHtmlFor } from 'uhtml/keyed';
 import { html as uHtml } from 'uhtml';
 import TreeViewGroupElement from '../tools/treeviewgroupelement.js';
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore This import is not used in the typescript file but needed in the HTML Template
-// Cannot use <ts-expect-error> here because after the build-lib, the error disappear
 import GroupLayer from '../../../models/layers/grouplayer.js';
 class TreeViewThemeComponent extends TreeViewGroupElement {
     templateUrl = null;
@@ -35,14 +32,29 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
         super.render();
     }
     registerEvents() {
-        this.subscribe(/layers\.layersList\..*\.isExpanded/, (_oldValue, _newValue, theme) => this.refreshRender(theme));
-        this.subscribe(/layers\.layersList\..*\.activeState/, (_oldValue, _newValue, theme) => this.refreshRender(theme));
+        this.subscribe(/layers\.layersList\..*\.isExpanded/, (_oldValue, _newValue, theme) => {
+            if (!this.isSameLayerObject(theme))
+                return;
+            this.refreshRender(theme);
+        });
+        this.subscribe(/layers\.layersList\..*\.activeState/, (_oldValue, _newValue, theme) => {
+            if (!this.isSameLayerObject(theme))
+                return;
+            this.refreshRender(theme);
+        });
         this.subscribe(/layers\.layersList\..*\.children/, (_oldValue, _newValue, group) => {
+            if (!this.isSameLayerObject(group))
+                return;
             this.refreshRender(group);
             this.refreshRender(group.parent);
         });
-        this.subscribe(/layers\.layersList\..*\.filter/, (_oldValue, _newValue, layer) => this.refreshRender(layer));
+        this.subscribe(/layers\.layersList\..*\.filter/, (_oldValue, _newValue, theme) => {
+            if (!this.isSameLayerObject(theme))
+                return;
+            this.refreshRender(theme);
+        });
         this.subscribe(/layers\.layersList\..*\.order/, (_oldValue, _newValue, layer) => {
+            // Don't check for same object here to affect all moved items.
             this.refreshRender(layer);
             this.refreshRender(layer.parent);
         });

package/models/layers/grouplayer.d.ts

@@ -16,6 +16,7 @@ declare class GroupLayer extends BaseLayer implements ILayerWithTime {
     isExpanded: boolean;
     _isMixed?: boolean;
     activeState: 'on' | 'off' | 'semi';
+    opacity: number;
     timeOptions?: ITimeOptions;
     timeAttribute?: string;
     timeRestriction?: string;
@@ -27,6 +28,7 @@ declare class GroupLayer extends BaseLayer implements ILayerWithTime {
     get semiActive(): boolean;
     get hasTimeRestriction(): boolean;
     get hasGrandChildren(): boolean;
+    isFirstLevelGroup(): boolean;
     setDefaultTimeRestriction(): void;
     /**
      * Checks if all the children are LayerWms with the same ogcServer, opacity

package/models/layers/grouplayer.js

@@ -3,20 +3,21 @@ import BaseLayer from './baselayer.js';
 import LayerTimeFormatter from '../../tools/time/layertimeformatter.js';
 import LayerWms from './layerwms.js';
 /*
- * This class is a used in the state of the application, which will be accessed behind a javascript proxy.
+ * This class is used in the state of the application, which will be accessed behind a JavaScript proxy.
  * This means that each modification made to its properties must come from outside,
- * because they have to be made through the proxy, so that the modification can be listen.
- * Therefore, this class must not contain any method which is updating a value directly
- * For example, any method doing <this.xxx = value> is forbidden here, because the modification be known from the proxy
+ * because they have to be made through the proxy, so that the modification can be listened to.
+ * Therefore, this class must not contain any method updating a value directly
+ * For example, any method doing <this.xxx = value> is forbidden here, because the modification is known from the proxy
  */
 class GroupLayer extends BaseLayer {
     isExclusiveGroup;
     isExpanded;
     _isMixed;
     activeState = 'off';
+    opacity = 1; // Only used on first level groups.
     timeOptions;
     timeAttribute;
-    timeRestriction;
+    timeRestriction; // Only used on first level groups.
     children = [];
     constructor(id, name, order, options) {
         super(id, name, order, options);
@@ -41,6 +42,7 @@ class GroupLayer extends BaseLayer {
         const clonedObject = new GroupLayer(this.id, this.name, this.order, options);
         clonedObject.activeState = this.activeState;
         clonedObject.timeRestriction = this.timeRestriction;
+        clonedObject.opacity = this.opacity;
         // Clone children
         for (const child of this.children) {
             try {
@@ -74,6 +76,9 @@ class GroupLayer extends BaseLayer {
         }
         return false;
     }
+    isFirstLevelGroup() {
+        return !(this.parent instanceof GroupLayer);
+    }
     setDefaultTimeRestriction() {
         if (this.timeOptions) {
             const timeFormatter = new LayerTimeFormatter(this.timeOptions);

package/models/layers/layer.js

@@ -1,11 +1,11 @@
 // SPDX-License-Identifier: Apache-2.0
 import BaseLayer from './baselayer.js';
 /*
- * This class is a used in the state of the application, which will be accessed behind a javascript proxy.
+ * This class is used in the state of the application, which will be accessed behind a JavaScript proxy.
  * This means that each modification made to its properties must come from outside,
- * because they have to be made through the proxy, so that the modification can be listen.
- * Therefore, this class must not contain any method which is updating a value directly
- * For example, any method doing <this.xxx = value> is forbidden here, because the modification be known from the proxy
+ * because they have to be made through the proxy, so that the modification can be listened to.
+ * Therefore, this class must not contain any method updating a value directly
+ * For example, any method doing <this.xxx = value> is forbidden here, because the modification is known from the proxy
  */
 class Layer extends BaseLayer {
     activeState = 'off';

package/models/layers/layerwms.js

@@ -11,7 +11,7 @@ import { BrainIgnore } from '../../tools/state/brain/decorators.js';
  * This class is used in the state of the application, which will be accessed behind a JavaScript proxy.
  * This means that each modification made to its properties must come from outside,
  * because they have to be made through the proxy, so that the modification can be listened to.
- * Therefore, this class must not contain any method which is updating a value directly.
+ * Therefore, this class must not contain any method updating a value directly.
  * For example, any method doing <this.xxx = value> is forbidden here because the modification must be known from the proxy
  */
 class LayerWms extends Layer {

package/package.json

@@ -5,7 +5,7 @@
     "name": "GeoGirafe PSC",
     "url": "https://doc.geogirafe.org"
   },
-  "version": "1.2.0-dev.2845070426",
+  "version": "1.2.0-dev.2847659248",
   "type": "module",
   "engines": {
     "node": ">=20.19.0"

package/templates/public/about.json

@@ -1 +1 @@
-{"version":"1.2.0-dev.2845070426", "build":"2845070426", "date":"13/09/2026"}
+{"version":"1.2.0-dev.2847659248", "build":"2847659248", "date":"14/09/2026"}

package/tools/wms/wmsclient.js

@@ -177,8 +177,11 @@ export default class WmsClient {
         this.manageLayerOptions(layerWms);
     }
     manageLayerOptions(layerWms) {
+        if (layerWms.activeState === 'off') {
+            return;
+        }
         if (!this.layerExists(layerWms)) {
-            throw new Error('Cannot change filter for this layer: it does not exist');
+            throw new Error(`Cannot change filter for layer ${layerWms.name}: it does not exist`);
         }
         const isBasemapLayer = layerWms.treeItemId in this.basemapLayers;
         const isLayerIndependent = layerWms.treeItemId in this.independentLayers;