@rural-environmental-registry/map_component 2.0.3 → 2.0.5

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.3",
+  "version": "2.0.5",
   "description": "Map component for Vue.js applications",
   "main": "dist/index.mjs",
   "module": "dist/index.mjs",

package/src/components/map/LeafletMap.vue

@@ -7,7 +7,7 @@
 
 <script setup lang="ts">
   import L from 'leaflet'
-  import { nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
+  import { nextTick, onBeforeUnmount, onMounted, shallowRef } from 'vue'
   import DrawingControlHandler from '../../handlers/drawingControl'
   import MapHandler from '../../handlers/mapHandler'
   import { DEFAULT_MAP_OPTIONS } from '../../handlers/constants'
@@ -45,9 +45,9 @@
 
   const props = defineProps<MapProps>()
 
-  const map = ref<L.Map>()
-  const layerControl = ref<L.Control.Layers>()
-  const drawItemsGroup = ref<L.FeatureGroup>()
+  const map = shallowRef<L.Map>()
+  const layerControl = shallowRef<L.Control.Layers>()
+  const drawItemsGroup = shallowRef<L.FeatureGroup>()
 
   let mapHandlerInstance: MapHandler | null = null
   let mapToolsHandler: MapToolsHandler | null = null

package/src/components/menu/LayerMenu.vue

@@ -318,7 +318,7 @@
         initDefaultLayers()
       })
     },
-    { immediate: true, deep: true }
+    { immediate: true }
   )
 
   const onChildLayerChange = (layer: LayerData): void => {
@@ -358,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({
@@ -502,4 +508,4 @@
       border-color: var(--mapa-base-white);
     }
   }
-</style>
+</style>

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/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'