Merge pull request #4908 from 3liz/backport-4856-to-release_3_9

[Backport release_3_9] Fix expanded group as layer

assets/src/components/Treeview.js

@@ -66,7 +66,7 @@ export default class Treeview extends HTMLElement {
 
         this._symbolTemplate = symbol =>
             html`
-        <li class="symbol${this._isInScale(symbol) ? '' : ' not-in-scale'}${symbol.ruleKey && !symbol.checked ? ' not-visible' : ''}">
+        <li class="symbol ${symbol.type}${this._isInScale(symbol) ? '' : ' not-in-scale'}${symbol.ruleKey && !symbol.checked ? ' not-visible' : ''}">
             ${(symbol.childrenCount)
                 ? html`
                         <div class="expandable ${symbol.expanded ? 'expanded' : ''}" @click=${() => symbol.expanded = !symbol.expanded}></div>`

assets/src/modules/state/Layer.js

@@ -364,11 +364,22 @@ export class LayerItemState extends EventDispatcher {
                         type: 'layer.symbol.expanded.changed',
                         name: self.name,
                         title: evt.title,
-                        ruleKey: evt.ruleKey,
+                        symbolType: evt.symbolType,
                         expanded: evt.expanded,
                     });
                 }, 'symbol.expanded.changed');
             }
+        } else if (this.symbology instanceof LayerGroupSymbology) {
+            const self = this;
+            this.symbology.addListener(evt => {
+                self.dispatch({
+                    type: 'layer.symbol.expanded.changed',
+                    name: self.name,
+                    title: evt.title,
+                    symbolType: evt.symbolType,
+                    expanded: evt.expanded,
+                });
+            }, 'symbol.expanded.changed');
         }
         this.dispatch({
             type: this.mapType + '.symbology.changed',

assets/src/modules/state/MapLayer.js

@@ -67,6 +67,7 @@ export class MapItemState extends EventDispatcher {
                 this.dispatch.bind(this),
                 layerItemState.mapType + '.opacity.changed'
             );
+            layerItemState.addListener(this.dispatch.bind(this), 'layer.symbol.expanded.changed');
         } else {
             layerItemState.addListener(this.dispatch.bind(this), 'layer.visibility.changed');
             layerItemState.addListener(this.dispatch.bind(this), 'layer.symbology.changed');

assets/src/modules/state/Symbology.js

@@ -89,13 +89,20 @@ export class BaseObjectSymbology extends EventDispatcher {
 
     /**
      * Create a base symbology instance based on a node object provided by QGIS Server
-     * @param {object} node                                             - the QGIS node symbology
-     * @param {string} node.title                                       - the node title
+     * @param {object} node                 - the QGIS node symbology
+     * @param {string} node.title           - the node title
+     * @param {string} [node.type]          - the node type
      * @param {object} [requiredProperties] - the required properties definition
-     * @param {object} [optionalProperties]                          - the optional properties definition
+     * @param {object} [optionalProperties] - the optional properties definition
      */
-    constructor(node, requiredProperties = { 'title': { type: 'string' } }, optionalProperties = {}) {
-
+    constructor(node, requiredProperties = { 'title': { type: 'string' } }, optionalProperties = { 'type': { type: 'string' } })
+    {
+        if (!node.hasOwnProperty('type')) {
+            node.type = 'icon';
+        }
+        if (!optionalProperties.hasOwnProperty('type')) {
+            optionalProperties['type'] = { type: 'string' };
+        }
         if (!requiredProperties.hasOwnProperty('title')) {
             requiredProperties['title'] = { type: 'string' };
         }
@@ -104,6 +111,14 @@ export class BaseObjectSymbology extends EventDispatcher {
         applyConfig(this, node, requiredProperties, optionalProperties)
     }
 
+    /**
+     * The symbology type
+     * @type {string}
+     */
+    get type() {
+        return this._type;
+    }
+
     /**
      * The symbology title
      * @type {string}
@@ -121,16 +136,20 @@ export class BaseObjectSymbology extends EventDispatcher {
 export class BaseIconSymbology extends BaseObjectSymbology {
     /**
      * Create a base icon symbology instance based on a node object provided by QGIS Server
-     * @param {object} node                    - the QGIS node symbology
-     * @param {string} node.icon               - the png image in base64
-     * @param {string} node.title              - the node title
+     * @param {object} node                 - the QGIS node symbology
+     * @param {string} node.title           - the node title
+     * @param {string} [node.icon]          - the png image in base64
+     * @param {string} [node.type]          - the node type
      * @param {object} [requiredProperties] - the required properties definition
      * @param {object} [optionalProperties] - the optional properties definition
      */
-    constructor(node, requiredProperties={}, optionalProperties = {}) {
-
-        if (!requiredProperties.hasOwnProperty('icon')) {
-            requiredProperties['icon'] = { type: 'string' };
+    constructor(node, requiredProperties = { 'title': { type: 'string' } }, optionalProperties = { 'icon': { type: 'string' } })
+    {
+        if (!optionalProperties.hasOwnProperty('icon')) {
+            optionalProperties['icon'] = { type: 'string' };
+        }
+        if (!requiredProperties.hasOwnProperty('title')) {
+            requiredProperties['title'] = { type: 'string' };
         }
         // In case of RuleBasedRenderer the icon could be empty
         if (!node.hasOwnProperty('icon')) {
@@ -211,6 +230,9 @@ export class SymbolIconSymbology extends BaseIconSymbology {
      * @param {boolean} node.checked - the node is checked by default
      */
     constructor(node) {
+        if (!node.hasOwnProperty('type')) {
+            node.type = 'icon';
+        }
         super(node, symbolIconProperties, symbolIconOptionalProperties)
         this._childrenRules = []
     }
@@ -280,6 +302,9 @@ const symbolRuleOptionalProperties = Object.assign(
  */
 export class SymbolRuleSymbology extends SymbolIconSymbology {
     constructor(node) {
+        if (!node.hasOwnProperty('type')) {
+            node.type = 'rule';
+        }
         super(node, symbolRuleProperties, symbolRuleOptionalProperties)
         this._parentRule = null;
         this._childrenRules = [];
@@ -421,6 +446,36 @@ export class BaseSymbolsSymbology extends BaseObjectSymbology {
         for(const symbol of this._symbols) {
             this._icons.push(new iconClass(symbol));
         }
+
+        this._expanded = false;
+    }
+
+    /**
+     * Symbol item is expanded
+     * @type {boolean}
+     */
+    get expanded() {
+        return this._expanded;
+    }
+
+    /**
+     * Set symbol item is expanded
+     * @type {boolean}
+     */
+    set expanded(val) {
+        const newVal = convertBoolean(val);
+        if (this._expanded === newVal) {
+            return;
+        }
+
+        this._expanded = newVal;
+
+        this.dispatch({
+            type: 'symbol.expanded.changed',
+            title: this.title,
+            symbolType: this.type,
+            expanded: this.expanded
+        });
     }
 
     /**
@@ -621,7 +676,9 @@ export class LayerGroupSymbology extends BaseObjectSymbology {
         this._symbologyNodes = [];
         for(const node of this._nodes) {
             if (node.hasOwnProperty('symbols')) {
-                this._symbologyNodes.push(new BaseSymbolsSymbology(node));
+                const symbol = new BaseSymbolsSymbology(node);
+                symbol.addListener(this.dispatch.bind(this), 'symbol.expanded.changed');
+                this._symbologyNodes.push(symbol);
             } else if (node.hasOwnProperty('icon')) {
                 this._symbologyNodes.push(new BaseIconSymbology(node));
             }