@rural-environmental-registry/map_component 2.0.4 → 2.0.6

package/package.json

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

package/src/components/MapDPG.vue

@@ -46,7 +46,7 @@
 
 <script lang="ts" setup>
   import L from 'leaflet'
-  import { computed, ref } from 'vue'
+  import { computed, ref, shallowRef } from 'vue'
   import {
     DrawingEvent,
     GroupActionConfig,
@@ -133,7 +133,7 @@
     toggleMeasureArea: () => void
   }
 
-  const mapRef = ref<MapRef>()
+  const mapRef = shallowRef<MapRef>()
   const mapContainerRef = ref<HTMLElement | null>(null)
   const coordinatePanelRef = ref()
   const isLoading = ref<boolean>(false)

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

@@ -36,7 +36,7 @@
 <script lang="ts" setup>
   import { ElButton, ElMenu } from 'element-plus'
   import L from 'leaflet'
-  import { computed, nextTick, ref, watch } from 'vue'
+  import { computed, markRaw, nextTick, ref, shallowRef, toRaw, watch } from 'vue'
   import FontAwesomeIcon from '../fa-icon/FontAwesomeIcon.vue'
   import SectionMenu from './SectionMenu.vue'
   import {
@@ -89,8 +89,8 @@
   const props = defineProps<MenuProps>()
 
   const isMenuOpen = ref<boolean>(!!props.options?.defaultOpen)
-  const convertedLayers = ref<ConvertedLayers>({})
-  const convertedGeoJsonLayers = ref<ConvertedGeoJsonLayers>({})
+  const convertedLayers = shallowRef<ConvertedLayers>({})
+  const convertedGeoJsonLayers = shallowRef<ConvertedGeoJsonLayers>({})
   const internalEditingLayerKey = ref<string | null>(null)
   const internalSelectedSectionKey = ref<string | null>(null)
 
@@ -318,7 +318,7 @@
         initDefaultLayers()
       })
     },
-    { immediate: true, deep: true }
+    { immediate: true }
   )
 
   const onChildLayerChange = (layer: LayerData): void => {
@@ -389,13 +389,15 @@
 
     if (!layer.active) return
 
-    const wmsLayer = convertToWmsLayer(layer)
+    const wmsLayer = markRaw(convertToWmsLayer(layer))
     convertedLayers.value[layer.key] = wmsLayer
 
-    wmsLayer.addTo(props.map)
+    const rawMap = toRaw(props.map)
+    wmsLayer.addTo(rawMap)
 
-    if (props.layerControl) {
-      props.layerControl.addOverlay(wmsLayer, `${wmsLayer.options.attribution}`)
+    const rawLayerControl = props.layerControl ? toRaw(props.layerControl) : null
+    if (rawLayerControl) {
+      rawLayerControl.addOverlay(wmsLayer, `${wmsLayer.options.attribution}`)
     }
   }
 
@@ -403,8 +405,9 @@
     const wmsLayer = convertedLayers.value[layer.key]
     if (!wmsLayer) return
 
-    props.map.removeLayer(wmsLayer)
-    props.layerControl?.removeLayer(wmsLayer)
+    const rawMap = toRaw(props.map)
+    rawMap.removeLayer(wmsLayer)
+    toRaw(props.layerControl)?.removeLayer(wmsLayer)
 
     delete convertedLayers.value[layer.key]
   }
@@ -443,13 +446,15 @@
 
     if (!layer.active) return
 
-    const geoJsonLayer = convertToGeojsonLayer(layer)
+    const geoJsonLayer = markRaw(convertToGeojsonLayer(layer))
     convertedGeoJsonLayers.value[layer.key] = geoJsonLayer
 
-    geoJsonLayer.addTo(props.map)
+    const rawMap = toRaw(props.map)
+    geoJsonLayer.addTo(rawMap)
 
-    if (props.layerControl) {
-      props.layerControl.addOverlay(geoJsonLayer, `${geoJsonLayer.options.attribution}`)
+    const rawLayerControl = props.layerControl ? toRaw(props.layerControl) : null
+    if (rawLayerControl) {
+      rawLayerControl.addOverlay(geoJsonLayer, `${geoJsonLayer.options.attribution}`)
     }
   }
 
@@ -457,8 +462,9 @@
     const geoJsonLayer = convertedGeoJsonLayers.value[layer.key]
     if (!geoJsonLayer) return
 
-    props.map.removeLayer(geoJsonLayer)
-    props.layerControl?.removeLayer(geoJsonLayer)
+    const rawMap = toRaw(props.map)
+    rawMap.removeLayer(geoJsonLayer)
+    toRaw(props.layerControl)?.removeLayer(geoJsonLayer)
 
     delete convertedGeoJsonLayers.value[layer.key]
   }
@@ -508,4 +514,4 @@
       border-color: var(--mapa-base-white);
     }
   }
-</style>
+</style>