From f7ab1d641f981cd3f6cd3d92351bd1adf701e297 Mon Sep 17 00:00:00 2001
From: Francesco Boccacci <boccacci.francesco@gmail.com>
Date: Thu, 1 Feb 2024 09:28:28 +0100
Subject: [PATCH] Add shortcut links within catalog layers context menu (layers
 and project settings) (#392)

* Create CatalogProjectContextMenu.vue and use common directive click-outside-context-menu.js

* Add CatalogProjectContextMenu.vue and use common showContextMenu on CatalogTristateTree.vue

* Set common css/less rules from catalog-context-menu

* extract event listeners from `components/Catalog.vue`)

* sort attributes

make it more clear that is a for..loop

* vertical indentation

* missing yoda

* Update CatalogLayerContextMenu.vue

* exctract predicates

* Update CatalogProjectContextMenu.vue

* Update CatalogTristateTree.vue

* remove tautology

* shorten directive name (ref: `v-click-outside`)

* function name

* qgis icon

* fix duplicate const variable

* missing file

* update since tags

* add `edit_url` and `layers_url` links

* hide context menu items on empty config

---------

Co-authored-by: Raruto <Raruto@users.noreply.github.com>
---
 src/assets/style/less/g3w-catalog.less        |   4 +-
 .../less/g3w-skins/blue/g3w-catalog.less      |   2 +-
 .../less/g3w-skins/green/g3w-catalog.less     |   3 +-
 .../less/g3w-skins/purple/g3w-catalog.less    |   3 +-
 .../style/less/g3w-skins/red/g3w-catalog.less |   3 +-
 .../less/g3w-skins/yellow/g3w-catalog.less    |   3 +-
 src/components/Catalog.vue                    | 201 +++++++-----
 src/components/CatalogLayerContextMenu.vue    | 286 ++++++++++--------
 src/components/CatalogProjectContextMenu.vue  | 143 +++++++++
 src/components/CatalogTristateTree.vue        | 188 +++++++-----
 src/components/index.js                       |   5 +
 src/directives/v-click-outside.js             |  21 ++
 src/index.prod.js                             |   2 +
 13 files changed, 580 insertions(+), 284 deletions(-)
 create mode 100644 src/components/CatalogProjectContextMenu.vue
 create mode 100644 src/directives/v-click-outside.js

diff --git a/src/assets/style/less/g3w-catalog.less b/src/assets/style/less/g3w-catalog.less
index e42ea68d5..aa1cfb43f 100644
--- a/src/assets/style/less/g3w-catalog.less
+++ b/src/assets/style/less/g3w-catalog.less
@@ -294,7 +294,7 @@ Licensed under MIT
   }
 }
 
-#layer-menu {
+.catalog-context-menu {
   background: #FAFAFA;
   border: 1px solid #BDBDBD;
   border-radius: 3px;
@@ -392,7 +392,7 @@ Licensed under MIT
       border:0;
     }
   }
-  #layer-menu {
+  .catalog-context-menu {
     .wms-url-tooltip {
       .tooltip-inner {
         min-width: 200px;
diff --git a/src/assets/style/less/g3w-skins/blue/g3w-catalog.less b/src/assets/style/less/g3w-skins/blue/g3w-catalog.less
index 991e4f375..367f2cf11 100644
--- a/src/assets/style/less/g3w-skins/blue/g3w-catalog.less
+++ b/src/assets/style/less/g3w-skins/blue/g3w-catalog.less
@@ -22,7 +22,7 @@
     }
   }
 
-  #layer-menu {
+  .catalog-context-menu {
     li {
       &.title {
         border-bottom-color: @light-blue !important;
diff --git a/src/assets/style/less/g3w-skins/green/g3w-catalog.less b/src/assets/style/less/g3w-skins/green/g3w-catalog.less
index f81d52781..5e3da8915 100644
--- a/src/assets/style/less/g3w-skins/green/g3w-catalog.less
+++ b/src/assets/style/less/g3w-skins/green/g3w-catalog.less
@@ -22,8 +22,7 @@
     }
   }
 
-
-  #layer-menu {
+  .catalog-context-menu {
     li {
       &.title {
         border-bottom-color: @green !important;
diff --git a/src/assets/style/less/g3w-skins/purple/g3w-catalog.less b/src/assets/style/less/g3w-skins/purple/g3w-catalog.less
index 858433b94..452dc2888 100644
--- a/src/assets/style/less/g3w-skins/purple/g3w-catalog.less
+++ b/src/assets/style/less/g3w-skins/purple/g3w-catalog.less
@@ -22,8 +22,7 @@
     }
   }
 
-
-  #layer-menu {
+  .catalog-context-menu {
     li {
       &.title {
         border-bottom-color: @purple !important;
diff --git a/src/assets/style/less/g3w-skins/red/g3w-catalog.less b/src/assets/style/less/g3w-skins/red/g3w-catalog.less
index 6dfacaf04..755ee99c4 100644
--- a/src/assets/style/less/g3w-skins/red/g3w-catalog.less
+++ b/src/assets/style/less/g3w-skins/red/g3w-catalog.less
@@ -22,8 +22,7 @@
     }
   }
 
-
-  #layer-menu {
+  .catalog-context-menu {
     li {
       &.title {
         border-bottom-color: @red !important;
diff --git a/src/assets/style/less/g3w-skins/yellow/g3w-catalog.less b/src/assets/style/less/g3w-skins/yellow/g3w-catalog.less
index aa530bdca..8919d6c6d 100644
--- a/src/assets/style/less/g3w-skins/yellow/g3w-catalog.less
+++ b/src/assets/style/less/g3w-skins/yellow/g3w-catalog.less
@@ -22,8 +22,7 @@
     }
   }
 
-
-  #layer-menu {
+  .catalog-context-menu {
     li {
       &.title {
         border-bottom-color: @yellow !important;
diff --git a/src/components/Catalog.vue b/src/components/Catalog.vue
index 57f71567e..d507ec8dd 100644
--- a/src/components/Catalog.vue
+++ b/src/components/Catalog.vue
@@ -9,39 +9,49 @@
 
     <div class="tabbable-line">
 
+      <!-- TAB MENU (header) -->
       <ul class="nav nav-tabs catalalog-nav-tabs" role="tablist" @click.capture="delegationClickEventTab">
-        <li v-if="hasLayers" role="presentation"  :class="{ active: ('layers' === activeTab && 'hasLayers') }">
+        <li v-if="hasLayers" role="presentation"  :class="{ active: ('layers' === activeTab) }">
           <a href="#layers" aria-controls="layers" role="tab" data-toggle="tab" data-i18n="tree" v-t="'data'"></a>
         </li>
-        <li v-if="state.external.wms.length" role="presentation"  :class="{ active: ('externalwms' === activeTab) }">
+        <li v-if="state.external.wms.length" role="presentation" :class="{ active: ('externalwms' === activeTab) }">
           <a href="#externalwms" aria-controls="externalwms" role="tab" data-toggle="tab" data-i18n="externalwms" v-t="'externalwms'"></a>
         </li>
         <li v-if="hasBaseLayers" role="presentation" :class="{ active: ('baselayers' === activeTab) }" >
           <a href="#baselayers" aria-controls="baselayers" role="tab" data-toggle="tab" data-i18n="baselayers" v-t="'baselayers'"></a>
         </li>
-        <li v-if="showlegend && ('tab' === legend.place)" role="presentation" :class="{ active: ('legend' === activeTab) }">
+        <li v-if="'tab' === legend.place && showlegend" role="presentation" :class="{ active: ('legend' === activeTab) }">
           <a href="#legend" aria-controls="legend" role="tab" data-toggle="tab" data-i18n="legend" v-t="'legend'"></a>
         </li>
       </ul>
 
+      <!-- TAB MENU (content) -->
       <div class="tab-content catalog-tab-content">
 
         <bar-loader :loading="loading" />
 
-        <div role="tabpanel" class="tab-pane" :class="{ active: ('layers' === activeTab && 'hasLayers') }" id="layers">
+        <div id="layers" role="tabpanel" class="tab-pane" :class="{ active: ('layers' === activeTab) }">
+
           <helpdiv message="catalog_items.helptext" />
 
+          <!-- TOOLBAR -->
           <div v-if="showTocTools" id="g3w-catalog-toc-layers-toolbar" style="margin: 2px;">
-            <changemapthemes
+            <change-map-themes-component
               :key="project.state.gid"
               :map_themes="project.state.map_themes"
               @change-map-theme="changeMapTheme"
             />
           </div>
 
-          <ul v-for="_layerstree in state.layerstrees" :key="_layerstree.storeid" class="tree-root root project-root">
+          <!-- LAYER TREES -->
+          <ul
+            v-for="_layerstree in state.layerstrees"
+            :key="_layerstree.storeid"
+            class="tree-root root project-root"
+          >
             <tristate-tree
               v-for="layerstree in _layerstree.tree"
+              :key="layerstree.id"
               :highlightlayers="state.highlightlayers"
               :layerstree="layerstree"
               class="item"
@@ -50,45 +60,57 @@
               :legendplace="legend.place"
               :parent_mutually_exclusive="false"
               :storeid="_layerstree.storeid"
-              :key="layerstree.id"
             />
           </ul>
 
+          <!-- EXTERNAL VECTOR LAYER -->
           <ul v-if="state.external.vector.length" class="g3w-external_layers-group">
             <tristate-tree
               v-for="layerstree in state.external.vector"
-              :externallayers="state.external.vector"
-              :layerstree="layerstree" class="item"
               :key="layerstree.id"
+              :externallayers="state.external.vector"
+              :layerstree="layerstree"
+              class="item"
             />
           </ul>
 
+          <!-- GROUP OF LAYERS -->
           <ul v-for="layersgroup in state.layersgroups">
             <layers-group :layersgroup="layersgroup" />
           </ul>
 
         </div>
 
+        <!-- EXTERNAL WMS LAYER -->
         <div v-if="state.external.wms.length" id="externalwms" role="tabpanel" class="tab-pane" :class="{ active: ('externalwms' === activeTab) }">
           <ul class="g3w-external_wms_layers-group">
             <tristate-tree
               v-for="layerstree in state.external.wms"
+              :key="layerstree.id"
               :externallayers="state.external.wms"
               :layerstree="layerstree"
               class="item"
-              :key="layerstree.id"
             />
           </ul>
         </div>
 
-        <div v-if="hasBaseLayers" class="tab-pane baselayers" id="baselayers" role="tabpanel" :class="{ active: ('baselayers' === activeTab || !hasLayers) }">
-          <ul id="baselayers-content" :class="{'mobile': isMobile()}" :style="{gridTemplateColumns: `repeat(auto-fill, minmax(${ baselayers.length > 4 ? 80 : 120 }px, 1fr))`}">
-            <li v-if="!baselayer.fixed" v-for="baselayer in baselayers" :key="baselayer.title">
+        <!-- BASE LAYERS -->
+        <div v-if="hasBaseLayers" id="baselayers" role="tabpanel" class="tab-pane baselayers" :class="{ active: ('baselayers' === activeTab || !hasLayers) }">
+          <ul
+            id="baselayers-content"
+            :class="{'mobile': isMobile()}"
+            :style="{ gridTemplateColumns: `repeat(auto-fill, minmax(${baselayers.length > 4 ? 80 : 120}px, 1fr))` }"
+          >
+            <li
+              v-if="!baselayer.fixed"
+              v-for="baselayer in baselayers"
+              :key="baselayer.title"
+            >
               <img
                 :src="getSrcBaseLayerImage(baselayer)"
                 @click.stop="setBaseLayer(baselayer.id)"
                 class="img-responsive img-thumbnail baselayer"
-                :style="{ opacity: (baselayer.id === currentBaseLayer ? 1 : 0.5) }"
+                :style="{opacity: currentBaseLayer === baselayer.id ? 1 : 0.5}"
               >
               <div class="baseselayer-text text-center">{{ baselayer.title }}</div>
             </li>
@@ -96,29 +118,33 @@
               <img
                 :src="getSrcBaseLayerImage(null)"
                 class="img-responsive img-thumbnail baselayer"
-                :style="{opacity: (null === currentBaseLayer ? 1 : 0.5) }"
+                :style="{ opacity: currentBaseLayer === null ? 1 : 0.5 }"
               >
               <div class="baseselayer-text text-center" v-t="'nobaselayer'"></div>
             </li>
           </ul>
         </div>
 
+        <!-- TODO: add description -->
         <layerslegend
           v-if="'tab' === legend.place"
           v-for="_layerstree in state.layerstrees"
-          @showlegend="showLegend"
+          :key="_layerstree.id"
           :legend="legend"
           :active="'legend' === activeTab"
           :layerstree="_layerstree"
-          :key="_layerstree.id"
+          @showlegend="showLegend"
         />
+
       </div>
 
     </div>
 
-    <cataloglayercontextmenu :external="state.external"/>
+    <catalog-layer-context-menu :external="state.external" />
 
-</div>
+    <catalog-project-context-menu />
+
+  </div>
 </template>
 
 <script>
@@ -126,6 +152,7 @@ import { MAP_SETTINGS } from 'app/constant';
 import { CatalogEventBus as VM } from 'app/eventbus';
 import ChangeMapThemesComponent from 'components/CatalogChangeMapThemes.vue';
 import CatalogLayerContextMenu from 'components/CatalogLayerContextMenu.vue';
+import CatalogProjectContextMenu from 'components/CatalogProjectContextMenu.vue';
 import CatalogLayersStoresRegistry from 'store/catalog-layers';
 import ApplicationService from 'services/application';
 import ControlsRegistry from 'store/map-controls';
@@ -151,18 +178,18 @@ export default {
   },
 
   components: {
-    'changemapthemes':          ChangeMapThemesComponent,
-    'cataloglayercontextmenu':  CatalogLayerContextMenu
+    ChangeMapThemesComponent,
+    CatalogLayerContextMenu,
+    CatalogProjectContextMenu,
   },
 
   computed: {
 
     /**
-     * Whether to show group toolbar 
+     * @returns {boolean} whether to show group toolbar
      */
     showTocTools() {
-      const { map_themes = [] } = this.project.state;
-      return map_themes.length > 1;
+      return (this.project.state.map_themes || []).length > 1;
     },
 
     project() {
@@ -189,12 +216,11 @@ export default {
 
   },
 
-
   methods: {
 
     /**
-     * Change view 
-     * 
+     * Change view
+     *
      * @fires CatalogEventBus~layer-change-style
      */
     async changeMapTheme(map_theme) {
@@ -204,7 +230,7 @@ export default {
       const changes = (await this.$options.service.changeMapTheme(map_theme)).layers;
       const layers  = Object.keys(changes).filter(id => changes[id].style);
       const styles  = (await this.project.getMapThemeFromThemeName(map_theme)).styles;
-      
+
       // clear categories
       layers.forEach(id => {
         if (!changes[id].visible) {
@@ -257,62 +283,43 @@ export default {
       return customimage ? image : `${GUI.getResourcesUrl()}images/${image}`;
     },
 
-  },
-
-  watch: {
-
-    /**
-     * Listen external wms change. If remove all layer nee to set active the project or default tab 
-     */
-    'state.external.wms'(newlayers, oldlayers) {
-      if (oldlayers && 0 === newlayers.length) {
-        this.activeTab = this.project.state.catalog_tab || DEFAULT_ACTIVE_TAB;
-      }
-    },
-
-    'state.prstate.currentProject': {
-      async handler(project, oldproject) {
-        const activeTab = project.state.catalog_tab || DEFAULT_ACTIVE_TAB;
-        this.loading = 'baselayers' === activeTab;
-        await this.$nextTick();
-        setTimeout(() => {
-          this.loading = false;
-          this.activeTab = activeTab;
-        }, ('baselayers' === activeTab) ? 500 : 0)
-      },
-      immediate: false
-    },
-
-  },
-
-  created() {
-    this.layerpositions = MAP_SETTINGS.LAYER_POSITIONS.getPositions();
-
     /**
      * @TODO add description
+     *
+     * @since 3.10.0
      */
-    VM.$on('unselectionlayer', (storeid, layerstree) => {
+    onUnSelectionLayer(storeid, layerstree) {
       GUI.getService('queryresults').removeFromSelection(layerstree, storeid);
-    });
+    },
 
     /**
      * @TODO add description
+     *
+     * @since 3.10.0
      */
-     VM.$on('activefiltertokenlayer', async (storeid, layerstree) => {
+    async onActiveFilterTokenLayer(storeid, layerstree) {
       layerstree.filter.active = await CatalogLayersStoresRegistry.getLayersStore(storeid).getLayerById(layerstree.id).toggleFilterToken();
-    });
+    },
 
     /**
      * Handle visibilty change on legend item
+     *
+     * @fires MapService~cataloglayervisible
+     *
+     * @since 3.10.0
      */
-     VM.$on('treenodevisible', layer => {
+    onTreeNodeVisible(layer) {
       GUI.getService('map').emit('cataloglayervisible', layer);
-    });
+    },
 
     /**
      * Handle legend item select (single mouse click ?)
+     *
+     * @fires MapService~cataloglayerselected
+     *
+     * @since 3.10.0
      */
-     VM.$on('treenodeselected', function (storeid, node) {
+    onTreeNodeSelected(storeid, node) {
       let layer = CatalogLayersStoresRegistry.getLayersStore(storeid).getLayerById(node.id);
       // emit signal of select layer from catalog
       if (!layer.isSelected()) {
@@ -323,12 +330,14 @@ export default {
         // emit signal of select layer from catalog
         GUI.getService('map').emit('cataloglayerselected', layer);
       });
-    });
+    },
 
     /**
      * Handle temporary external layer add
+     *
+     * @since 3.10.0
      */
-    VM.$on('treenodeexternalselected', layer => {
+    onTreeNodeExternalSelected(layer) {
       GUI
         .getService('catalog')
         .setSelectedExternalLayer({ layer, type: 'vector', selected: !layer.selected})
@@ -338,20 +347,68 @@ export default {
             CatalogLayersStoresRegistry.getLayersStores().forEach(layer => { layer.selectLayer(null, false); });
           }
         });
-    });
-
+    },
 
     /**
      * @TODO add description
+     *
+     * @listens ol.interaction~propertychange
+     *
+     * @since 3.10.0
      */
-    ControlsRegistry.onafter('registerControl', (id, control) => {
+    onRegisterControl(id, control) {
       if ('querybbox' === id) {
         control.getInteraction().on('propertychange', evt => {
           if ('active' === evt.key) this.state.highlightlayers = !evt.oldValue;
         })
       }
-    });
+    },
+
+  },
+
+  watch: {
+
+    /**
+     * Listen external wms change. If remove all layer nee to set active the project or default tab
+     */
+    'state.external.wms'(newlayers, oldlayers) {
+      if (oldlayers && 0 === newlayers.length) {
+        this.activeTab = this.project.state.catalog_tab || DEFAULT_ACTIVE_TAB;
+      }
+    },
+
+    'state.prstate.currentProject': {
+      async handler(project, oldproject) {
+        const activeTab = project.state.catalog_tab || DEFAULT_ACTIVE_TAB;
+        this.loading = 'baselayers' === activeTab;
+        await this.$nextTick();
+        setTimeout(() => {
+          this.loading = false;
+          this.activeTab = activeTab;
+        }, ('baselayers' === activeTab) ? 500 : 0)
+      },
+      immediate: false
+    },
+
+  },
+
+  /**
+   * @listens CatalogEventBus~unselectionlayer
+   * @listens CatalogEventBus~activefiltertokenlayer
+   * @listens CatalogEventBus~treenodevisible
+   * @listens CatalogEventBus~treenodeselected
+   * @listens CatalogEventBus~treenodeexternalselected
+   * @listens ControlsRegistry~registerControl
+   */
+  created() {
+    this.layerpositions = MAP_SETTINGS.LAYER_POSITIONS.getPositions();
 
+    VM.$on('unselectionlayer',         this.onUnSelectionLayer);
+    VM.$on('activefiltertokenlayer',   this.onActiveFilterTokenLayer);
+    VM.$on('treenodevisible',          this.onTreeNodeVisible);
+    VM.$on('treenodeselected',         this.onTreeNodeSelected);
+    VM.$on('treenodeexternalselected', this.onTreeNodeExternalSelected);
+    ControlsRegistry.onafter('registerControl',     this.onRegisterControl);
   },
 
   beforeMount() {
diff --git a/src/components/CatalogLayerContextMenu.vue b/src/components/CatalogLayerContextMenu.vue
index e17d797f4..c38bf7508 100644
--- a/src/components/CatalogLayerContextMenu.vue
+++ b/src/components/CatalogLayerContextMenu.vue
@@ -6,21 +6,27 @@
 <template>
 
   <ul v-if="layerMenu.show"
-    id="layer-menu"
+    id="layer-context-menu"
     ref="layer-menu"
-    v-click-outside-layer-menu="closeLayerMenu"
+    class="catalog-context-menu"
+    v-click-outside="closeLayerMenu"
     tabindex="-1"
-    :style="{top: layerMenu.top + 'px', left: layerMenu.left + 'px' }"
+    :style="{
+      top: layerMenu.top + 'px',
+      left: layerMenu.left + 'px',
+    }"
   >
 
     <!-- Item Title -->
     <li class="title">
       <div>{{ layerMenu.layer.title}}</div>
-      <div style="font-weight: normal; font-size: 0.8em">{{ getGeometryType(layerMenu.layer.id, layerMenu.layer.external) }}</div>
+      <div style="font-weight: normal; font-size: 0.8em">
+        {{ getGeometryType(layerMenu.layer.id, layerMenu.layer.external) }}
+      </div>
     </li>
 
-    <!-- Chane z-index of ol layer. On top or button -->
-    <li v-if="!layerMenu.layer.projectLayer">
+    <!-- Change z-index of ol layer. On top or button -->
+    <li v-if="isExternalLayer(layerMenu.layer)">
       <div style="display: flex; justify-content: space-between; align-items: center">
         <layerspositions
           @layer-position-change="changeLayerMapPosition({position:$event, layer: layerMenu.layer})"
@@ -43,7 +49,10 @@
       <div
         v-show="layerMenu.metadatainfoMenu.show"
         style="position:fixed; background-color: #FFFFFF; color:#000000; padding-left: 0; border-radius: 0 3px 3px 0;"
-        :style="{ top: layerMenu.metadatainfoMenu.top + 'px', left: `${layerMenu.metadatainfoMenu.left+1}px` }"
+        :style="{
+          top:   layerMenu.metadatainfoMenu.top       + 'px',
+          left: (layerMenu.metadatainfoMenu.left + 1) + 'px',
+        }"
       >
         <div
           class="layer-menu-metadata-info"
@@ -56,8 +65,8 @@
     <!-- Styles menu -->
     <li
       v-if             = "canShowStylesMenu(layerMenu.layer)"
-      @mouseleave.self = "showSubMenuContext({ menu: 'stylesMenu', evt: $event, bool: false })"
-      @mouseover.self  = "showSubMenuContext({ menu: 'stylesMenu', evt: $event, bool: true })"
+      @mouseleave.self = "showStylesMenu(false, $event)"
+      @mouseover.self  = "showStylesMenu(true, $event)"
       class            = "menu-icon"
     >
       <span
@@ -77,20 +86,18 @@
         v-show="layerMenu.stylesMenu.show"
         style="position:fixed; padding-left: 0; background-color: #FFFFFF; color:#000000"
         :style="{
-          top: layerMenu.stylesMenu.top + 'px',
-          left: `${layerMenu.stylesMenu.left}px`,
+          top:       layerMenu.stylesMenu.top       + 'px',
+          left:      layerMenu.stylesMenu.left      + 'px',
           maxHeight: layerMenu.stylesMenu.maxHeight + 'px',
-          overflowY: layerMenu.stylesMenu.overflowY }"
+          overflowY: layerMenu.stylesMenu.overflowY,
+        }"
       >
         <li
           v-for="(style, index) in layerMenu.layer.styles"
-          :key="style.name"
           @click.stop="setCurrentLayerStyle(index)"
+          :key="style.name"
         >
-          <span
-            v-if="style.current"
-            style="font-size: 0.8em;" :class="g3wtemplate.getFontClass('circle')">
-          </span>
+          <span v-if="style.current" style="font-size: 0.8em;" :class="g3wtemplate.getFontClass('circle')"></span>
           <span>{{ getStyleName(style) }}</span>
         </li>
       </ul>
@@ -126,8 +133,8 @@
 
     <!-- Attribute Table -->
     <li
-      v-if="layerMenu.layer.openattributetable"
-      @click.prevent.stop="showAttributeTable(layerMenu.layer.id)"
+      v-if                = "canOpenAttributeTable(layerMenu.layer)"
+      @click.prevent.stop = "showAttributeTable(layerMenu.layer.id)"
     >
       <bar-loader :loading="layerMenu.loading.data_table" />
       <span
@@ -160,14 +167,15 @@
         style="position:fixed"
         :style="{
           top: layerMenu.colorMenu.top + 'px',
-          left: layerMenu.colorMenu.left + 'px' }"
+          left: layerMenu.colorMenu.left + 'px',
+        }"
       >
         <li style="padding:0;">
           <chrome-picker
             ref="color_picker"
+            v-model="layerMenu.colorMenu.color"
             @click.prevent.stop=""
             @hook:beforeDestroy="onbeforeDestroyChangeColor"
-            v-model="layerMenu.colorMenu.color"
             @input="onChangeColor"
             style="width: 100%"
           />
@@ -228,7 +236,7 @@
           class="item-text"
           v-t="'sdk.catalog.menu.setwmsopacity'">
         </span>
-        <span style="font-weight: bold; margin-left: 5px;">{{layerMenu.layer.opacity}}</span>
+        <span style="font-weight: bold; margin-left: 5px;">{{ layerMenu.layer.opacity }}</span>
       </div>
       <range
         :value="layerMenu.layer.opacity"
@@ -237,7 +245,8 @@
         :step="0.1"
         :sync="true"
         @changed="_hideMenu"
-        @change-range="setWMSOpacity" />
+        @change-range="setWMSOpacity"
+      />
     </li>
 
     <!-- Download as GeoTIFF -->
@@ -446,16 +455,16 @@
             class="item-text catalog-menu-wms skin-tooltip-top"
             data-toggle="tooltip"
             data-container="body"
-            v-t-tooltip="'sdk.catalog.menu.wms.copy'">WMS URL
-          </span>
+            v-t-tooltip="'sdk.catalog.menu.wms.copy'"
+          >WMS URL</span>
           <span
             class="bold catalog-menu-wms wms-url-tooltip skin-tooltip-top skin-color-dark"
             :class="g3wtemplate.getFontClass('eye')"
             data-placement="top"
             data-toggle="tooltip"
             data-container="body"
-            :title="getWmsUrl(layerMenu.layer.id)">
-            </span>
+            :title="getWmsUrl(layerMenu.layer.id)"
+          ></span>
         </div>
       </div>
     </li>
@@ -477,20 +486,35 @@
             class="item-text catalog-menu-wms skin-tooltip-top"
             data-toggle="tooltip"
             data-container="body"
-            v-t-tooltip="'sdk.catalog.menu.wms.copy'">WFS URL
-          </span>
+            v-t-tooltip="'sdk.catalog.menu.wms.copy'"
+          >WFS URL</span>
           <span
             class="bold catalog-menu-wms wms-url-tooltip skin-tooltip-top skin-color-dark"
             :class="g3wtemplate.getFontClass('eye')"
             data-placement="top"
             data-toggle="tooltip"
             data-container="body"
-            :title="getWfsUrl(layerMenu.layer.id)">
-            </span>
+            :title="getWfsUrl(layerMenu.layer.id)"
+          ></span>
         </div>
       </div>
     </li>
 
+    <!-- Click to open G3W-ADMIN's project layers page -->
+    <li v-if="layers_url">
+      <div>
+        <!-- TODO: g3wtemplate.getFontClass('qgis') -->
+        <span class="menu-icon skin-color-dark">
+          <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 32 32" style="height: 14px; vertical-align: -1.5px; fill: currentColor;">
+            <path d="m17.61 17.63 4.36-.02-4-3.98h-4.36v4l4 4.45z"/>
+            <path d="m31.61 27.22-7.62-7.6-4.38.01v4.33l7.24 7.67h4.76z"/>
+            <path d="M18 25.18c-.68.16-1.17.2-1.9.2a9.77 9.77 0 0 1-9.68-9.88c0-5.57 4.4-9.78 9.68-9.78s9.48 4.2 9.48 9.78c0 .91-.15 1.96-.36 2.8l4.88 4.65a15 15 0 0 0 1.95-7.48C32.05 6.87 25.19.44 16 .44 6.86.44 0 6.84 0 15.47c0 8.68 6.86 15.2 16 15.2 2.36 0 4.23-.3 6.2-1.1L18 25.18z"/>
+          </svg>
+        </span>
+        <b><a :href="layers_url" target="_blank" style="color: initial">Layers settings</a></b>
+      </div>
+    </li>
+
   </ul>
 </template>
 
@@ -517,11 +541,13 @@
 
   export default {
     name: 'Cataloglayermenu',
+
     props: {
       external: {
         type: Object
       }
     },
+
     data() {
       return {
         layerMenu: {
@@ -539,14 +565,14 @@
             gpkg: false,
             xls: false
           },
-          //colorMenu
+          // colorMenu
           colorMenu: {
             show: false,
             top:0,
             left:0,
             color: null
           },
-          //styleMenu
+          // styleMenu
           stylesMenu: {
             show: false,
             top:0,
@@ -562,53 +588,35 @@
             style: null,
             default: null
           },
-          //metadataInfo
+          // metadataInfo
           metadatainfoMenu: {
             show: false,
             top:0,
             left:0
-          }
-        }
-      }
+          },
+        },
+      };
+    },
+
+    computed: {
+      layers_url() {
+        return ApplicationService.getCurrentProject().getState().layers_url;
+      },
     },
+
     components: {
       'chrome-picker':        ChromeComponent,
       'layer-opacity-picker': LayerOpacityPicker,
     },
-    directives: {
 
-      /**
-       * Create a vue directive for handling click outside contextmenu element
-       */
-      'click-outside-layer-menu': {
-        bind(el, binding, vnode) {
-          this.event = (event) => {
-            // skip if clicked element is a child of context menu
-            if (el === event.target || el.contains(event.target)) {
-              return;
-            }
-            event.stopPropagation();
-            vnode.context[binding.expression](event);
-          };
-          document.body.addEventListener('click', this.event, true)
-        },
-        unbind(el) {
-          document.body.removeEventListener('click', this.event, true)
-        }
-      }
-      
-    },
     methods: {
 
       /**
        * @TODO find out a better way to handle this, eg:
        *       using only the `showSubMenuContext()` method
        */
-      addLayerMenuItem(item={}) {
-        this.layerMenu = ({
-          ...this.layerMenu,
-          ...item
-        });
+      addLayerMenuItem(item = {}) {
+        this.layerMenu = ({ ...this.layerMenu, ...item });
       },
 
       /**
@@ -642,9 +650,6 @@
         menu.show = false;
       },
 
-      /**
-       *
-      */
       onbeforeDestroyChangeColor() {
         this.$refs.color_picker.$off();
       },
@@ -699,13 +704,11 @@
       },
 
       getWmsUrl(layerId) {
-        const originalLayer = CatalogLayersStoresRegistry.getLayerById(layerId);
-        return originalLayer.getCatalogWmsUrl();
+        return CatalogLayersStoresRegistry.getLayerById(layerId).getCatalogWmsUrl();
       },
 
       getWfsUrl(layerId) {
-        const originalLayer = CatalogLayersStoresRegistry.getLayerById(layerId);
-        return originalLayer.getCatalogWfsUrl();
+        return CatalogLayersStoresRegistry.getLayerById(layerId).getCatalogWfsUrl();
       },
 
       copyUrl({evt, layerId, type}={}) {
@@ -811,25 +814,17 @@
       },
 
       changeLayerMapPosition({position, layer}) {
-        const mapService = GUI.getService('map');
         const changed = layer.position !== position;
         if (changed) {
           layer.position = position;
-          mapService.changeLayerMapPosition({
-            id: layer.id,
-            position
-          });
-          changed && this._hideMenu();
+          GUI.getService('map').changeLayerMapPosition({ id: layer.id, position });
+          this._hideMenu();
         }
       },
 
       setWMSOpacity({id=this.layerMenu.layer.id, value:opacity}) {
         this.layerMenu.layer.opacity = opacity;
-        const mapService = GUI.getService('map');
-        mapService.changeLayerOpacity({
-          id,
-          opacity
-        });
+        GUI.getService('map').changeLayerOpacity({ id, opacity });
       },
 
       /**
@@ -862,7 +857,7 @@
 
       getGeometryType(layerId, external=false) {
         let geometryType;
-        if (external){
+        if (external) {
           const layer = this.external.vector.find(layer => layer.id === layerId);
           if (layer) geometryType = layer.geometryType;
         } else {
@@ -893,33 +888,31 @@
       async downloadExternalShapefile(layer) {
         const EPSG4326 = 'EPSG:4326';
         this.layerMenu.loading.shp = true;
-        const mapService = GUI.getService('map');
-        const vectorLayer = mapService.getLayerByName(layer.name);
-        const GeoJSONFormat = new ol.format.GeoJSON();
-        let features = vectorLayer.getSource().getFeatures();
-        if (layer.crs !== EPSG4326){
+        let features = GUI.getService('map').getLayerByName(layer.name).getSource().getFeatures();
+        if (EPSG4326 !== layer.crs) {
           features = features.map(feature => {
             const clonefeature = feature.clone();
             clonefeature.getGeometry().transform(layer.crs, EPSG4326);
             return clonefeature;
           })
         }
-        const GeoJSONFile = GeoJSONFormat.writeFeaturesObject(features, {
-          featureProjection: EPSG4326
-        });
         const name = layer.name.split(`.${layer.type}`)[0];
-        shpwrite.download(GeoJSONFile,{
-          folder: name,
-          types: {
-            point:name,
-            mulipoint: name,
-            polygon: name,
-            multipolygon: name,
-            line: name,
-            polyline: name,
-            multiline: name
+        shpwrite.download(
+          // GeoJSONFile
+          (new ol.format.GeoJSON()).writeFeaturesObject(features, { featureProjection: EPSG4326 }),
+          {
+            folder:         name,
+            types: {
+              point:        name,
+              mulipoint:    name,
+              polygon:      name,
+              multipolygon: name,
+              line:         name,
+              polyline:     name,
+              multiline:    name,
+            }
           }
-        });
+        );
         await this.$nextTick();
         this.layerMenu.loading.shp = false;
         this._hideMenu();
@@ -930,24 +923,20 @@
         GUI.closeContent();
         const layer = CatalogLayersStoresRegistry.getLayerById(layerId);
         this.layerMenu.loading.data_table = true;
-        const tableContent = new TableComponent({
-          layer,
-          formatter: 1
-        });
+        const tableContent = new TableComponent({ layer, formatter: 1 });
         tableContent.on('show', () => {
-          this.isMobile() && GUI.hideSidebar();
+          if (this.isMobile()) {
+            GUI.hideSidebar();
+          }
           this.layerMenu.loading.data_table = false;
           this._hideMenu();
         });
-        tableContent.show({
-          title: layer.getName()
-        });
+        tableContent.show({ title: layer.getName() });
       },
 
       startEditing() {
         let layer;
-        const catallogLayersStores = CatalogLayersStoresRegistry.getLayersStores();
-        catallogLayersStores.forEach(layerStore => {
+        CatalogLayersStoresRegistry.getLayersStores().forEach(layerStore => {
           layer = layerStore.getLayerById(this.layerMenu.layer.id);
           if (layer) {
             layer.getLayerForEditing();
@@ -963,11 +952,13 @@
             this.layerMenu.stylesMenu.style = style.name;
             changed = !style.current;
             style.current = true;
-          } else style.current = false;
+          } else {
+            style.current = false;
+          }
         });
         if (changed) {
           const layerId = this.layerMenu.layer.id;
-          const layer = CatalogLayersStoresRegistry.getLayerById(this.layerMenu.layer.id);
+          const layer = CatalogLayersStoresRegistry.getLayerById(layerId);
           if (layer) {
             VM.$emit('layer-change-style', {
               layerId,
@@ -1050,7 +1041,18 @@
         menu.show = bool;
       },
 
-      //showmetadatainfo
+      /**
+       * Context menu: toggle "styles" submenu handling its correct horizontal and vertical alignment
+       * 
+       * @since 3.10.0
+       */
+      async showStylesMenu(bool, evt) {
+        this.showSubMenuContext({ bool, evt, menu: this.layerMenu.stylesMenu });
+      },
+
+      /**
+       * Show metadata info
+       */
       async showMetadataInfo(bool, evt) {
         if (bool) {
           const elem = $(evt.target);
@@ -1071,13 +1073,47 @@
         this.layerMenu.colorMenu.show = bool;
       },
 
+      /**
+       * @since 3.10.0
+       */
+      async onShowLayerContextMenu (layerstree, evt) {
+        this._hideMenu();
+        await this.$nextTick();
+        this.layerMenu.left = evt.x;
+        this.layerMenu.name = layerstree.name;
+        this.layerMenu.layer = layerstree;
+        this.layerMenu.show = true;
+        this.layerMenu.colorMenu.color = layerstree.color;
+        await this.$nextTick();
+        this.layerMenu.top = $(evt.target).offset().top - $(this.$refs['layer-menu']).height() + ($(evt.target).height()/ 2);
+        $('.catalog-menu-wms[data-toggle="tooltip"]').tooltip();
+      },
+
+      /**
+       * @since 3.10.0
+       */
+      canOpenAttributeTable(layer) {
+        return layer.openattributetable;
+      },
+
+      /**
+       * @since 3.10.0
+       */
+      isExternalLayer(layer) {
+        return !layer.projectLayer
+      },
+
       /**
        * Get category style name eventually suffixed by "(default)" string
        * 
        * @since 3.8.0
        */
       getStyleName(style) {
-        return style.name + (style.name === this.layerMenu.layer.defaultstyle && this.layerMenu.layer.styles.length > 1 ? ` (${t('default')})` : '');
+        return style.name + (
+          style.name === this.layerMenu.layer.defaultstyle && this.layerMenu.layer.styles.length > 1
+            ? ` (${t('default')})`
+            : ''
+          );
       },
 
       /**
@@ -1126,19 +1162,13 @@
 
     },
 
+    /**
+     * @listens CatalogEventBus~show-layer-context-menu
+     * @listens CatalogEventBus~hide-layer-context-menu
+     */
     created() {
-      VM.$on('showmenulayer', async (layerstree, evt) => {
-        this._hideMenu();
-        await this.$nextTick();
-        this.layerMenu.left = evt.x;
-        this.layerMenu.name = layerstree.name;
-        this.layerMenu.layer = layerstree;
-        this.layerMenu.show = true;
-        this.layerMenu.colorMenu.color = layerstree.color;
-        await this.$nextTick();
-        this.layerMenu.top = $(evt.target).offset().top - $(this.$refs['layer-menu']).height() + ($(evt.target).height()/ 2);
-        $('.catalog-menu-wms[data-toggle="tooltip"]').tooltip();
-      });
+      VM.$on('show-layer-context-menu', this.onShowLayerContextMenu );
+      VM.$on('hide-layer-context-menu', this._hideMenu)
     },
 
   };
diff --git a/src/components/CatalogProjectContextMenu.vue b/src/components/CatalogProjectContextMenu.vue
new file mode 100644
index 000000000..4bb07dc90
--- /dev/null
+++ b/src/components/CatalogProjectContextMenu.vue
@@ -0,0 +1,143 @@
+<!--
+  @file
+  @since 3.10.0
+-->
+
+<template>
+
+  <ul v-if="edit_url && menu.show"
+    id="project-context-menu"
+    ref="project-context-menu"
+    class="catalog-context-menu"
+    v-click-outside="closeLayerMenu"
+    tabindex="-1"
+    :style="{
+      top: menu.top + 'px',
+      left: menu.left + 'px'
+    }"
+  >
+
+    <!-- Item Title -->
+    <li class="title">
+      <div>G3W-ADMIN {{ menu.title}}</div>
+    </li>
+
+    <!-- Click to open G3W-ADMIN's project page -->
+    <li>
+      <div>
+        <!-- TODO: g3wtemplate.getFontClass('qgis') -->
+        <span class="menu-icon skin-color-dark">
+          <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 32 32" style="height: 14px; vertical-align: -1.5px; fill: currentColor;">
+            <path d="m17.61 17.63 4.36-.02-4-3.98h-4.36v4l4 4.45z"/>
+            <path d="m31.61 27.22-7.62-7.6-4.38.01v4.33l7.24 7.67h4.76z"/>
+            <path d="M18 25.18c-.68.16-1.17.2-1.9.2a9.77 9.77 0 0 1-9.68-9.88c0-5.57 4.4-9.78 9.68-9.78s9.48 4.2 9.48 9.78c0 .91-.15 1.96-.36 2.8l4.88 4.65a15 15 0 0 0 1.95-7.48C32.05 6.87 25.19.44 16 .44 6.86.44 0 6.84 0 15.47c0 8.68 6.86 15.2 16 15.2 2.36 0 4.23-.3 6.2-1.1L18 25.18z"/>
+          </svg>
+        </span>
+        <b><a :href="edit_url" target="_blank" style="color: initial">Project settings</a></b>
+      </div>
+    </li>
+
+  </ul>
+</template>
+
+<script>
+  import ProjectsRegistry          from 'store/projects';
+  import { CatalogEventBus as VM } from 'app/eventbus';
+  import ApplicationService        from 'services/application';
+
+  // const { t } = require('core/i18n/i18n.service');
+
+  // const OFFSETMENU = {
+  //   top: 50,
+  //   left: 15
+  // };
+
+  export default {
+    name: 'CatalogProjectmenu',
+
+    props: {
+      external: {
+        type: Object
+      }
+    },
+
+    data() {
+      return {
+        menu: {
+          title: ProjectsRegistry.getCurrentProject().getName(),
+          show: false,
+          top:0,
+          left:0,
+          //layers
+          layers: {
+            show: false,
+            top:0,
+            left:0
+          }
+        }
+      }
+    },
+
+    computed: {
+
+      edit_url() {
+        return ApplicationService.getCurrentProject().getState().edit_url;
+      },
+
+    },
+  
+    methods: {
+
+      _hideMenu() {
+        this.menu.show = false;
+      },
+
+      closeLayerMenu() {
+        this._hideMenu();
+      },
+
+      showAdminLayers() {
+        console.log('qui')
+      },
+
+      async onShowProjectContextMenu(evt) {
+        this._hideMenu();
+        await this.$nextTick();
+        this.menu.left = evt.x;
+        this.menu.show = true;
+        await this.$nextTick();
+        this.menu.top = $(evt.target).offset().top - $(this.$refs['project-context-menu']).height() + ($(evt.target).height() / 2);
+      },
+
+    },
+
+    /**
+     * @listens CatalogEventBus~show-project-context-menu
+     * @listens CatalogEventBus~hide-project-context-menu
+     */
+    created() {
+      VM.$on('show-project-context-menu', this.onShowProjectContextMenu);
+      VM.$on('hide-project-context-menu', this._hideMenu);
+    }
+  };
+</script>
+<style scoped>
+  #project-context-menu {
+    background: #FAFAFA;
+    border: 1px solid #BDBDBD;
+    border-radius: 3px;
+    display: block;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    position: fixed;
+    min-width: 150px;
+    z-index: 999999;
+    color:#000000;
+    outline: none;
+  }
+
+  li .item-text{
+    font-weight: bold;
+  }
+</style>
diff --git a/src/components/CatalogTristateTree.vue b/src/components/CatalogTristateTree.vue
index 80445796c..9c96de450 100644
--- a/src/components/CatalogTristateTree.vue
+++ b/src/components/CatalogTristateTree.vue
@@ -7,7 +7,7 @@
 
   <li
     class="tree-item"
-    @contextmenu.prevent.stop="showLayerMenu(layerstree, $event)"
+    @contextmenu.prevent.stop="showContextMenu"
     @click.stop="onTreeItemClick"
     :style="{
       marginLeft: !isGroup ? '5px' : '0'
@@ -24,7 +24,7 @@
       style="padding-right: 2px;"
       :class="[
         { bold : isGroup },
-         g3wtemplate.getFontClass(layerstree.expanded ? 'caret-down' : 'caret-right')
+        g3wtemplate.getFontClass(layerstree.expanded ? 'caret-down' : 'caret-right')
       ]"
       @click.stop="expandCollapse"
       class="root collapse-expande-collapse-icon"
@@ -226,11 +226,11 @@
 </template>
 
 <script>
-import LayerLegend from 'components/CatalogLayerLegend.vue';
-import { CatalogEventBus as VM } from 'app/eventbus';
+import LayerLegend                 from 'components/CatalogLayerLegend.vue';
+import { CatalogEventBus as VM }   from 'app/eventbus';
 import CatalogLayersStoresRegistry from 'store/catalog-layers';
-import ClickMixin from 'mixins/click';
-import GUI from 'services/gui';
+import ClickMixin                  from 'mixins/click';
+import GUI                         from 'services/gui';
 
 const { downloadFile } = require('utils');
 
@@ -408,97 +408,110 @@ export default {
       }
     },
 
+  },
+
+  methods: {
+
     /**
      * Handle change checked property of group
      *
-     * @param group
+     * @param {boolean} group.checked
+     * @param {uknown}  group.parentGroup
+     * @param {uknown}  group.nodes
      */
     handleGroupChecked(group) {
-      let { checked, parentGroup, nodes } = group;
+      let {
+        checked,
+        parentGroup,
+        nodes
+      } = group;
+    
       const setAllLayersVisible = ({nodes, visible}) => {
         nodes.forEach(node => {
-          if (undefined !== node.id) {
-            if (node.parentGroup.checked && node.checked) {
-              CatalogLayersStoresRegistry.getLayerById(node.id).setVisible(visible);
-            }
-          } else {
+          if (undefined === node.id) {
             setAllLayersVisible({ nodes: node.nodes, visible: visible && node.checked });
+          } else if (node.parentGroup.checked && node.checked) {
+            CatalogLayersStoresRegistry.getLayerById(node.id).setVisible(visible);
           }
         });
       };
-      if (checked) {
-        const visible = parentGroup ? parentGroup.checked : true;
-        if (parentGroup && parentGroup.mutually_exclusive) {
-          parentGroup.nodes.forEach(node => {
-            node.checked = node.groupId === group.groupId;
-            if (node.checked) {
-              setAllLayersVisible({ nodes: node.nodes, visible });
-            }
-          });
-        } else {
-          setAllLayersVisible({ nodes, visible });
-        }
-        while (parentGroup) {
-          parentGroup.checked = parentGroup.root || parentGroup.checked;
-          parentGroup = parentGroup.parentGroup
-        }
-      } else {
+
+      if (!checked) {
         nodes.forEach(node => {
-          if (undefined !== node.id) {
-            if (node.checked) {
-              CatalogLayersStoresRegistry.getLayerById(node.id).setVisible(false);
-            }
-          } else {
+          if (undefined === node.id) {
             setAllLayersVisible({ nodes: node.nodes, visible: false });
+          } else if (node.checked) {
+            CatalogLayersStoresRegistry.getLayerById(node.id).setVisible(false);
           }
         });
+        return; // NB exit early!
+      }
+
+      const visible = parentGroup ? parentGroup.checked : true;
+      if (false === (parentGroup && parentGroup.mutually_exclusive)) {
+        setAllLayersVisible({ nodes, visible });
+      } else {
+        parentGroup.nodes.forEach(node => {
+          node.checked = node.groupId === group.groupId;
+          if (node.checked) {
+            setAllLayersVisible({ nodes: node.nodes, visible });
+          }
+        });
+      }
+      while (parentGroup) {
+        parentGroup.checked = parentGroup.root || parentGroup.checked;
+        parentGroup = parentGroup.parentGroup
       }
+
     },
 
     /**
      * Handle changing checked property of layer
      *
-     * @param {{ checked: boolean, id: string, disabled: boolean, projectLayer: boolean, parentGroup: uknown }} layerObject
+     * @param {boolean} layer.checked
+     * @param {string}  layer.id
+     * @param {boolean} layer.disabled
+     * @param {boolean} layer.projectLayer
+     * @param {uknown}  layer.parentGroup
      */
-    handleLayerChecked(layerObject) {
+    handleLayerChecked(layer) {
       let {
         checked,
         id,
-        disabled,
+        // disabled,
         projectLayer=false,
         parentGroup
-      } = layerObject;
+      } = layer;
 
       // case external layer (eg. temporary layer through `addlayerscontrol`)
       if (!projectLayer) {
         // update `layer.visible` property
-        layerObject.visible = checked;
+        layer.visible = checked;
         GUI.getService('map').changeLayerVisibility({ id, visible: checked });
+        return;  // NB exit early!
       }
 
       // case project layer (eg. qgis layer)
-      else {
-        const layer = CatalogLayersStoresRegistry.getLayerById(id);
-        if (checked) {
-          const visible = layer.setVisible(!disabled);
-          /**
-           * @TODO is it necessary to emit the `layer-change-style` event here?
-           */
-          // if (visible && 'toc' === this.legendplace) {
-          //  setTimeout(() => VM.$emit('layer-change-style', { layerId: id }));
-          // }
-          if (parentGroup.mutually_exclusive) {
-            parentGroup.nodes.forEach(node => node.checked = node.id === id);
-          }
-          while (parentGroup) {
-            parentGroup.checked = true;
-            parentGroup = parentGroup.parentGroup;
-          }
-        } else {
-          layer.setVisible(false);
+      layer = CatalogLayersStoresRegistry.getLayerById(id);
+      if (checked) {
+        // const visible = layer.setVisible(!disabled);
+        /**
+         * @TODO is it necessary to emit the `layer-change-style` event here?
+         */
+        // if (visible && 'toc' === this.legendplace) {
+        //  setTimeout(() => VM.$emit('layer-change-style', { layerId: id }));
+        // }
+        if (parentGroup.mutually_exclusive) {
+          parentGroup.nodes.forEach(node => node.checked = node.id === id);
         }
-        VM.$emit('treenodevisible', layer);
+        while (parentGroup) {
+          parentGroup.checked = true;
+          parentGroup = parentGroup.parentGroup;
+        }
+      } else {
+        layer.setVisible(false);
       }
+      VM.$emit('treenodevisible', layer);
 
     },
 
@@ -511,10 +524,16 @@ export default {
       CatalogLayersStoresRegistry.getLayerById(layerstree.id).saveFilter();
     },
 
+    /**
+     * @fires CatalogEventBus~activefiltertokenlayer
+     */
     toggleFilterLayer() {
       VM.$emit('activefiltertokenlayer', this.storeid, this.layerstree);
     },
 
+    /**
+     * @fires CatalogEventBus~unselectionlayer
+     */
     clearSelection() {
       VM.$emit('unselectionlayer', this.storeid, this.layerstree);
     },
@@ -549,15 +568,17 @@ export default {
     /**
      * @TODO refactor this, almost the Same as `CatalogLayerContextMenu.vue::zoomToLayer(layer)`
      *
-     * @since v3.8
+     * @since 3.10.0
      */
-    zoomToLayer(layer) {
-      GUI
-        .getService('map')
-        .goToBBox(
-          [layer.bbox.minx, layer.bbox.miny, layer.bbox.maxx, layer.bbox.maxy],
-          layer.epsg
-        );
+    maybeZoomToLayer(layer) {
+      if (this.canZoom(this.layerstree)) {
+        GUI
+          .getService('map')
+          .goToBBox(
+            [layer.bbox.minx, layer.bbox.miny, layer.bbox.maxx, layer.bbox.maxy],
+            layer.epsg
+          );
+      }
     },
 
     /**
@@ -580,7 +601,7 @@ export default {
      onTreeItemClick() {
       this.handleClick({
         '1': () => !this.isTable && !this.isGroup && this.select(),
-        '2': () => !this.isTable && this.canZoom(this.layerstree) && this.zoomToLayer(this.layerstree)
+        '2': () => !this.isTable && this.maybeZoomToLayer(this.layerstree)
       }, this);
     },
 
@@ -600,20 +621,41 @@ export default {
       GUI.getService('map').removeExternalLayer(name, wms);
     },
 
-    showLayerMenu(layerstree, evt) {
+    /**
+     * @param evt
+     * 
+     * @fires CatalogEventBus~hide-layer-context-menu
+     * @fires CatalogEventBus~hide-project-context-menu
+     * @fires CatalogEventBus~show-layer-context-menu
+     * @fires CatalogEventBus~show-project-context-menu
+     * 
+     * @since 3.10.0
+     */
+    showContextMenu(evt) {
       if (
         !this.isGroup &&
         (this.layerstree.openattributetable || this.layerstree.downloadable || this.layerstree.geolayer || this.layerstree.external)
       ) {
-        VM.$emit('showmenulayer', layerstree, evt);
+        VM.$emit('hide-project-context-menu');
+        VM.$emit('show-layer-context-menu', this.layerstree, evt);
+      } else if (this.isGroup && true === this.layerstree.root) {
+        VM.$emit('hide-layer-context-menu');
+        VM.$emit('show-project-context-menu', evt);
       }
     },
 
   },
 
+  /**
+   * Inizialize layer (disable, visible etc..)
+   */
   created() {
-    // just firs time
-    this.init();
+    if (this.isGroup && !this.layerstree.checked) {
+      this.handleGroupChecked(this.layerstree);
+    }
+    if (this.isGroup && !this.root && this.parent_mutually_exclusive && !this.layerstree.mutually_exclusive) {
+      this.layerstree.nodes.forEach(node => { node.id && (node.uncheckable = true); })
+    }
   },
 
   async mounted() {
diff --git a/src/components/index.js b/src/components/index.js
index 5c3e74ec6..73d76c798 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -3,6 +3,7 @@ import C3XYLine from './C3XYLine.vue';
 import Catalog from './Catalog.vue';
 import CatalogChangeMapThemes from './CatalogChangeMapThemes.vue';
 import CatalogLayerContextMenu from './CatalogLayerContextMenu.vue';
+import CatalogProjectContextMenu from './CatalogProjectContextMenu.vue';
 import CatalogLayerLegend from './CatalogLayerLegend.vue';
 import CatalogLayersGroup from './CatalogLayersGroup.vue';
 import CatalogLayersLegendItems from './CatalogLayersLegendItems.vue';
@@ -120,6 +121,10 @@ export {
   Catalog,
   CatalogChangeMapThemes,
   CatalogLayerContextMenu,
+  /**
+   * @since 3.10.0
+   */
+  CatalogProjectContextMenu,
   CatalogLayerLegend,
   CatalogLayersGroup,
   CatalogLayersLegendItems,
diff --git a/src/directives/v-click-outside.js b/src/directives/v-click-outside.js
new file mode 100644
index 000000000..30c1d3f04
--- /dev/null
+++ b/src/directives/v-click-outside.js
@@ -0,0 +1,21 @@
+/**
+ * @file
+ * @since 3.10.0 
+ */
+
+export default  {
+  bind(el, binding, vnode) {
+    this.event = (event) => {
+      // skip if clicked element is a child of element
+      if (el === event.target || el.contains(event.target)) {
+        return;
+      }
+      event.stopPropagation();
+      vnode.context[binding.expression](event);
+    };
+    document.body.addEventListener('click', this.event, true)
+  },
+  unbind() {
+    document.body.removeEventListener('click', this.event, true)
+  }
+}
\ No newline at end of file
diff --git a/src/index.prod.js b/src/index.prod.js
index c92e8f3b1..8e5199876 100644
--- a/src/index.prod.js
+++ b/src/index.prod.js
@@ -59,6 +59,7 @@ import vTPlugin from 'directives/v-t-plugin';
 import vPlugins from 'directives/v-plugins';
 import vOnline from 'directives/v-online';
 import vDownload from 'directives/v-download';
+import vClickOutside from 'directives/v-click-outside'
 
 // constants
 import { FONT_AWESOME_ICONS } from 'app/constant';
@@ -116,6 +117,7 @@ Vue.directive("t-plugin", vTPlugin);
 Vue.directive("plugins", vPlugins);
 Vue.directive("online", vOnline);
 Vue.directive("download", vDownload);
+Vue.directive("click-outside", vClickOutside);
 
 
 /**