@rural-environmental-registry/map_component 2.0.2 → 2.0.4

package/dist/types/index.d.ts

@@ -1,4 +1,4 @@
-import { MapOptions, Layer, PathOptions, ControlOptions, ControlPosition } from 'leaflet';
+import { MapOptions, Layer, PathOptions, ControlOptions, ControlPosition, LatLngBoundsExpression } from 'leaflet';
 import { GeoJsonObject } from 'geojson';
 import { PM } from '@geoman-io/leaflet-geoman-free';
 export type FaIconName = 'check' | 'xmark' | 'chevron-right' | 'chevron-left' | 'terminal' | 'file-lines' | 'upload' | 'pencil' | 'trash' | 'chevron-down' | 'eye' | 'eye-slash' | 'circle-info' | 'circle-exclamation' | 'triangle-exclamation' | 'circle-check' | 'circle-xmark' | 'ban' | 'lock' | 'unlock' | 'thumbtack' | 'thumb-tack' | 'map-pin';
@@ -97,6 +97,7 @@ export type LayerData = {
     transparent?: boolean;
     geojson?: GeoJsonObject | GeoJsonObject[];
     cqlFilter?: string;
+    bounds?: LatLngBoundsExpression;
     options?: Record<string, unknown>;
     mapSource?: 'wms' | 'geojson' | 'none' | 'consumer';
     actions?: LayerActionConfig[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rural-environmental-registry/map_component",
-  "version": "2.0.2",
+  "version": "2.0.4",
   "description": "Map component for Vue.js applications",
   "main": "dist/index.mjs",
   "module": "dist/index.mjs",

package/src/components/menu/LayerMenu.vue

@@ -223,8 +223,11 @@
   ): { sectionKey: string; layer: LayerData } | null => {
     for (const section of normalizedSections.value) {
       for (const group of section.groups) {
-        const layer = group.layers?.find((item) => item.key === layerKey)
-        if (layer) return { sectionKey: section.key, layer }
+        let found: LayerData | undefined
+        walkMenuLayers(group.layers, (layer) => {
+          if (!found && layer.key === layerKey) found = layer
+        })
+        if (found) return { sectionKey: section.key, layer: found }
       }
     }
     return null
@@ -355,11 +358,17 @@
   }
 
   const convertToWmsLayer = (layer: LayerData): L.TileLayer => {
-    const wmsLayer = L.tileLayer.wms(layer.baseUrl ?? '', {
+    const wmsOptions: L.WMSOptions = {
       layers: layer.layers,
       format: layer.format || 'image/png',
       transparent: layer.transparent
-    })
+    }
+
+    if (layer.bounds) {
+      wmsOptions.bounds = L.latLngBounds(layer.bounds)
+    }
+
+    const wmsLayer = L.tileLayer.wms(layer.baseUrl ?? '', wmsOptions)
 
     if (layer?.cqlFilter && layer.cqlFilter.length > 0) {
       wmsLayer.setParams({

package/src/components/menu/ParentMenu.vue

@@ -57,7 +57,34 @@
         class="parent-menu-subgroup-accordion"
       >
         <template #title>
-          <div class="parent-menu-subgroup-title">{{ child.name }}</div>
+          <div class="parent-menu-row parent-menu-subgroup-row">
+            <div class="parent-menu-subgroup-title">{{ child.name }}</div>
+            <span
+              v-if="showSubgroupVisibilityControl(child)"
+              class="visibility-control"
+            >
+              <button
+                v-if="visibilityMode === 'eye'"
+                type="button"
+                class="visibility-eye-button"
+                :aria-label="
+                  isSubgroupActive(child) ? subgroupHideLabel(child) : subgroupShowLabel(child)
+                "
+                :title="
+                  isSubgroupActive(child) ? subgroupHideLabel(child) : subgroupShowLabel(child)
+                "
+                @click.stop="toggleSubgroupVisibility(idx, !isSubgroupActive(child))"
+              >
+                <FontAwesomeIcon
+                  :iconName="isSubgroupActive(child) ? 'eye' : 'eye-slash'"
+                />
+              </button>
+              <ElDivider
+                class="divider-bar"
+                direction="vertical"
+              />
+            </span>
+          </div>
         </template>
         <ChildMenu
           v-for="(nested, nestedIdx) in child.children || []"
@@ -237,7 +264,21 @@
 
   const toggleableLayers = computed(() => collectToggleableLeaves(childrenLayers.value))
 
-  const toggleVisibleAllLayers = (): void => {
+  const showSubgroupVisibilityControl = (subgroup: LayerData): boolean => {
+    if (props.visibilityMode === 'eye') return subgroup.visibility?.show !== false
+    return false
+  }
+
+  const subgroupShowLabel = (subgroup: LayerData): string =>
+    subgroup.visibility?.labelShow ?? showLabel.value
+
+  const subgroupHideLabel = (subgroup: LayerData): string =>
+    subgroup.visibility?.labelHide ?? hideLabel.value
+
+  const isSubgroupActive = (subgroup: LayerData): boolean =>
+    collectToggleableLeaves(subgroup.children || []).some((layer) => layer.active)
+
+  const emitGroupLayersToggle = (): void => {
     if (props.persist) {
       toggleableLayers.value.forEach((layer: LayerData) => setHistory(layer))
     }
@@ -248,6 +289,30 @@
     })
   }
 
+  const toggleSubgroupVisibility = (subgroupIdx: number, active: boolean): void => {
+    const subgroup = childrenLayers.value[subgroupIdx]
+    if (!subgroup || !isMenuSubgroup(subgroup)) return
+
+    const updatedChildren = (subgroup.children || []).map((child) => ({
+      ...child,
+      active
+    }))
+
+    childrenLayers.value[subgroupIdx] = {
+      ...subgroup,
+      children: updatedChildren
+    }
+
+    if (props.persist) {
+      updatedChildren.forEach((layer) => setHistory(layer))
+    }
+
+    emit('onGroupLayerToggle', {
+      ...props.groupData,
+      layers: childrenLayers.value
+    })
+  }
+
   const allLayersActive = computed<boolean>({
     get: () => toggleableLayers.value.some((layer: LayerData) => layer.active),
     set: (active: boolean) => {
@@ -262,7 +327,7 @@
         return { ...layer, active }
       })
 
-      toggleVisibleAllLayers()
+      emitGroupLayersToggle()
     }
   })
 
@@ -431,7 +496,12 @@
     background-color: transparent !important;
   }
 
+  .parent-menu .parent-menu-subgroup-row {
+    align-items: center;
+  }
+
   .parent-menu .parent-menu-subgroup-title {
+    flex: 1;
     font-size: var(--mapa-fs-12);
     font-weight: 700;
     line-height: 150%;

package/src/components/menu/SectionMenu.vue

@@ -148,7 +148,8 @@
   import {
     resolveEditControlAction,
     resolveLayerActions,
-    resolveLayerMetrics
+    resolveLayerMetrics,
+    walkMenuLayers
   } from '../../utils/layersConfigNormalizer'
 
   const DEFAULT_ACTION_STYLE: Required<LayerActionStyle> = {
@@ -226,8 +227,11 @@
   ): { layer: LayerData; group: GroupLayerData } | null => {
     if (!layerKey || !section.value) return null
     for (const group of section.value.groups) {
-      const layer = group.layers?.find((item) => item.key === layerKey)
-      if (layer) return { layer, group }
+      let found: LayerData | undefined
+      walkMenuLayers(group.layers, (layer) => {
+        if (!found && layer.key === layerKey) found = layer
+      })
+      if (found) return { layer: found, group }
     }
     return null
   }

package/src/types/index.ts

@@ -1,4 +1,11 @@
-import { MapOptions, Layer, PathOptions, ControlOptions, ControlPosition } from 'leaflet'
+import {
+  MapOptions,
+  Layer,
+  PathOptions,
+  ControlOptions,
+  ControlPosition,
+  LatLngBoundsExpression
+} from 'leaflet'
 import { GeoJsonObject } from 'geojson'
 
 // @ts-ignore
@@ -139,6 +146,7 @@ export type LayerData = {
   transparent?: boolean
   geojson?: GeoJsonObject | GeoJsonObject[]
   cqlFilter?: string
+  bounds?: LatLngBoundsExpression
   options?: Record<string, unknown>
 
   mapSource?: 'wms' | 'geojson' | 'none' | 'consumer'