@dative-gpi/foundation-shared-components 1.0.155 → 1.0.156

package/components/map/FSMap.vue

@@ -28,7 +28,8 @@
 
     <FSMapLayerButton
       v-if="$props.allowedLayers?.length && $props.allowedLayers.length > 1"
-      :layers="mapLayers.filter((layer) => $props.allowedLayers?.includes(layer.name) ?? true)"
+      :disabled="$props.disabled"
+      :layers="layers.filter((layer) => $props.allowedLayers?.includes(layer.name) ?? true)"
       :modelValue="$props.currentLayer"
       @update:model-value="$emit('update:currentLayer', $event)"
     />
@@ -39,6 +40,7 @@
     >
       <FSButton
         v-if="$props.showMyLocation"
+        :disabled="$props.disabled"
         icon="mdi-crosshairs-gps"
         color="primary"
         variant="full"
@@ -53,12 +55,14 @@
           gap="0"
         >
           <FSButton
+            :disabled="$props.disabled"
             class="fs-map-zoom-plus-button"
             icon="mdi-plus"
             @click="() => map!.zoomIn()"
             :border="false"
           />
           <FSButton
+            :disabled="$props.disabled"
             class="fs-map-zoom-minus-button"
             icon="mdi-minus"
             @click="() => map!.zoomOut()"
@@ -92,12 +96,10 @@
 import { computed, defineComponent, onMounted, type Ref, provide, type PropType, ref, type StyleValue, watch, onUnmounted, markRaw } from "vue";
 
 import type {} from "leaflet.markercluster";
-import { map as createMap, control, tileLayer, latLngBounds, latLng, type LatLng, type FitBoundsOptions, type ZoomPanOptions, type LatLngBounds } from "leaflet";
+import { map as createMap, control, latLngBounds, latLng, type LatLng, type FitBoundsOptions, type ZoomPanOptions, type LatLngBounds } from "leaflet";
 
-import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
-
-import { useBreakpoints, useColors, useSlots } from "../../composables";
-import { ColorEnum, MapLayers, MapOverlayPositions, type MapLayer } from "../../models";
+import { useBreakpoints, useColors, useMapLayers, useSlots } from "../../composables";
+import { ColorEnum, MapLayers, MapOverlayPositions } from "../../models";
 
 import FSMapLayerButton from "./FSMapLayerButton.vue";
 import FSMapOverlay from "./FSMapOverlay.vue";
@@ -130,6 +132,11 @@ export default defineComponent({
       required: false,
       default: '100%'
     },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     grayscale: {
       type: Boolean,
       required: false,
@@ -175,22 +182,20 @@ export default defineComponent({
       required: false,
       default: () => [MapLayers.Map, MapLayers.Imagery]
     },
-    dirtyZoom: {
+    zoom: {
       type: Number,
       required: false,
       default: 16
     }
   },
-  emits: ["update:modelValue", "update:selectedLocationId", "update:selectedAreaId", 'update:overlayMode', 'update:currentLayer', "click:latlng"],
+  emits: ['update:overlayMode', 'update:currentLayer', "click:latlng", "update:zoom", "update:center"],
   setup(props, { emit }) {
-    const { $tr } = useTranslationsProvider();
+    const { layers } = useMapLayers();
     const { isExtraSmall } = useBreakpoints();
     const { getColors } = useColors();
     const { slots } = useSlots();
 
     const leafletContainer = ref<HTMLElement>();
-    const locationGroupBounds = ref<LatLngBounds>();
-    const areaGroupBounds = ref<LatLngBounds>();
     const gpsPosition : Ref<LatLng | null> = ref(null);
     const map: Ref<L.Map | null> = ref(null);
     const overlayHeight = ref<number>();
@@ -198,7 +203,6 @@ export default defineComponent({
 
     provide('map', map);
 
-    const defaultZoom = ref(props.dirtyZoom);
     const mapResizeObserver = new ResizeObserver(() => {
       if(!map.value) {
         return;
@@ -206,53 +210,6 @@ export default defineComponent({
       map.value.invalidateSize();
     });
 
-    const mapLayers: MapLayer[] = [
-      {
-        name: MapLayers.Map,
-        label: $tr("ui.map-layer.map", "Map"),
-        image: new URL("../../assets/images/map/map.png", import.meta.url).href,
-        layers: [
-          tileLayer(`https://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}&key=${import.meta.env.VITE_GOOGLE_MAPS_API_KEY ?? ""}`, {
-            maxZoom: 22,
-            subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
-            attribution: '© Google Map Data',
-            className: 'fs-map-tile-base-layer'
-          })
-        ]
-      },
-      {
-        name: MapLayers.Imagery,
-        label: $tr("ui.map-layer.imagery", "Imagery"),
-        image: new URL("../../assets/images/map/imagery.png", import.meta.url).href,
-        layers: [
-          tileLayer(`https://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}&key=${import.meta.env.VITE_GOOGLE_MAPS_API_KEY ?? ""}`, {
-            maxZoom: 22,
-            subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
-            attribution: '© Google Map Data',
-            className: 'fs-map-tile-base-layer'
-          })
-        ]
-      },
-      {
-        name: MapLayers.Snow,
-        label: $tr("ui.map-layer.snow", "Snow ski map"),
-        image: new URL("../../assets/images/map/snow.png", import.meta.url).href,
-        layers: [
-          tileLayer(`https://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}&key=${import.meta.env.VITE_GOOGLE_MAPS_API_KEY ?? ""}`, {
-            maxZoom: 22,
-            subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
-            attribution: '© Google Map Data',
-            className: 'fs-map-tile-base-layer fs-map-tile-grayscale-layer'
-          }),
-          tileLayer(`https://tiles.opensnowmap.org/pistes/{z}/{x}/{y}.png`, {
-            maxZoom: 18,
-            attribution: 'Map data: &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors & ODbL, &copy; <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
-            className: 'fs-map-tile-base-layer'
-          })
-        ]
-      }
-    ];
-
     const bottomOffset = computed(() => {
       if (props.overlayMode !== MapOverlayPositions.Expand && overlayHeight.value && isExtraSmall.value) {
         return overlayHeight.value;
@@ -276,7 +233,7 @@ export default defineComponent({
     }));
 
     const actualLayer = computed(() => {
-      return mapLayers.find((mapLayer) => mapLayer.name === props.currentLayer)?.layers ?? mapLayers[0].layers;
+      return layers.find((mapLayer) => mapLayer.name === props.currentLayer)?.layers ?? layers[0].layers;
     });
 
     const overlaySlots = computed(() => {
@@ -295,7 +252,7 @@ export default defineComponent({
       return map.value.unproject(targetPoint, zoom);
     }
 
-    const flyTo = (lat: number, lng: number, zoom: number = defaultZoom.value, options?: ZoomPanOptions) => {
+    const flyTo = (lat: number, lng: number, zoom: number, options?: ZoomPanOptions) => {
       if(!map.value) {
         return;
       }
@@ -316,7 +273,6 @@ export default defineComponent({
       } else {
         map.value.flyTo(calculateTargetPosition(latLng(lat, lng), zoom), zoom, options);
       }
-      
     }
 
     const setView = (lat: number, lng: number, zoom: number) => {
@@ -329,13 +285,13 @@ export default defineComponent({
     const fitBounds = (bounds: LatLngBounds, options?: FitBoundsOptions) => {
       if (!map.value) {return;}
       const paddingTopLeft: [number, number] = [
-        leftOffset.value,
-        0
+        leftOffset.value + 24,
+        24
       ];
 
       const paddingBottomRight: [number, number] = [
-        0,
-        bottomOffset.value
+        24,
+        bottomOffset.value + 24
       ];
       const paddingOptions = {
         paddingTopLeft,
@@ -353,14 +309,16 @@ export default defineComponent({
 
       const mapOptions = {
         zoomControl: false,
-        scrollWheelZoom: props.enableScrollWheelZoom,
+        scrollWheelZoom: props.enableScrollWheelZoom && !props.disabled,
+        dragging: !props.disabled,
+        doubleClickZoom: false,
         minZoom: 2,
         maxZoom: 22,
         maxBounds: latLngBounds(latLng(-90, -180), latLng(90, 180)),
         maxBoundsViscosity: 1.0,
-        zoom: defaultZoom.value,
+        zoom: props.zoom,
         center: props.center ? latLng(props.center[0], props.center[1]) : latLng(48.85782, 2.29521)
-      };
+      } satisfies L.MapOptions;
 
       map.value = markRaw(createMap(leafletContainer.value, mapOptions));
       
@@ -368,6 +326,21 @@ export default defineComponent({
         emit('click:latlng', e.latlng);
       });
 
+      map.value.on('zoomend', () => {
+        if(!map.value) {
+          return;
+        }
+        emit('update:zoom', map.value.getZoom());
+      });
+
+      map.value.on('moveend', () => {
+        if(!map.value) {
+          return;
+        }
+        const center = map.value.getCenter();
+        emit('update:center', [center.lat, center.lng]);
+      });
+
       map.value.attributionControl.remove();
       control.attribution({ position: 'bottomleft' }).addTo(map.value);
 
@@ -382,7 +355,7 @@ export default defineComponent({
           return;
         }
 
-        flyTo(e.latlng.lat, e.latlng.lng);
+        flyTo(e.latlng.lat, e.latlng.lng, 14);
       });
       
       mapResizeObserver.observe(leafletContainer.value);
@@ -392,38 +365,69 @@ export default defineComponent({
       mapResizeObserver.disconnect();
     });
 
-    watch ([() => props.center, () => map.value], () => {
-      if(!map.value || !props.center) {
+    watch ([() => props.center, () => props.zoom], ([newCenter, newZoom], [oldCenter, oldZoom]) => {
+      if(!map.value || !props.center || !newCenter) {
         return;
       }
-      setView(props.center[0], props.center[1], defaultZoom.value);
+
+      if(map.value.getZoom() === newZoom && map.value.getCenter().equals(latLng(newCenter[0], newCenter[1]))) {
+        return;
+      }
+
+      if((newCenter[0] !== oldCenter?.[0] || newCenter[1] !== oldCenter?.[1]) && newZoom !== oldZoom) {
+        setView(newCenter[0], newCenter[1], newZoom);
+      }
+      else if ((newCenter[0] !== oldCenter?.[0] || newCenter[1] !== oldCenter?.[1])) {
+        setView(newCenter[0], newCenter[1], map.value.getZoom());
+      }
+      else if(newZoom !== oldZoom) {
+        map.value.setZoom(newZoom);
+      }
     }, { immediate: true });
 
     watch([() => props.bounds, () => map.value], () => {
       if(!map.value || !props.bounds) {
         return;
       }
-      fitBounds(props.bounds, { maxZoom: defaultZoom.value });
+
+      //console.log("Bounds changed", props.bounds);
+      fitBounds(props.bounds, { maxZoom: 14 });
     });
 
-    watch(() => props.dirtyZoom, (newZoom) => {
-      defaultZoom.value = newZoom;
-      if(map.value) {
-        map.value.setZoom(newZoom);
+    watch(() => props.enableScrollWheelZoom, (newValue) => {
+      if(!map.value) {
+        return;
+      }
+      if(newValue) {
+        map.value.scrollWheelZoom.enable();
+      } else {
+        map.value.scrollWheelZoom.disable();
+      }
+    }, { immediate: true });
+
+    watch(() => props.disabled, (newValue) => {
+      if(!map.value) {
+        return;
+      }
+      if(newValue) {
+        map.value.dragging.disable();
+        map.value.scrollWheelZoom.disable();
+      } else {
+        map.value.dragging.enable();
+        if(props.enableScrollWheelZoom) {
+          map.value.scrollWheelZoom.enable();
+        }
       }
     }, { immediate: true });
 
     return {
       ColorEnum,
-      defaultZoom,
       leafletContainer,
-      locationGroupBounds,
       overlayHeight,
       overlayWidth,
-      areaGroupBounds,
       map,
       actualLayer,
-      mapLayers,
+      layers,
       gpsPosition,
       style,
       overlaySlots

package/components/map/FSMapFeatureGroup.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script lang="ts">
-import { inject, provide, ref, type Ref } from 'vue';
+import { inject, provide, ref, type Ref, onUnmounted } from 'vue';
 
 import { type Map, FeatureGroup } from 'leaflet';
 import { MAP } from './keys';
@@ -46,6 +46,12 @@ export default {
         emit("update:bounds", featureGroup.value.getBounds());
       }
     });
+
+    onUnmounted(() => {
+      if (map.value && map.value.hasLayer(featureGroup.value as unknown as FeatureGroup)) {
+        map.value.removeLayer(featureGroup.value as unknown as FeatureGroup);
+      }
+    });
   }
 };
 </script>

package/components/map/FSMapLayerButton.vue

@@ -4,6 +4,7 @@
     icon="mdi-layers-outline"
     :elevation="true"
     @click="dialog = true"
+    v-bind="$attrs"
   />
   <FSDialog
     v-model="dialog"

package/components/map/FSMapMarker.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script lang="ts">
-import { inject, type PropType, onMounted, type Ref, watch, ref } from 'vue';
+import { inject, type PropType, onMounted, type Ref, watch, ref, onUnmounted } from 'vue';
 
 import { type Map, type DivIcon, divIcon, type LatLng, marker, type Marker, type MarkerClusterGroup } from 'leaflet';
 
@@ -112,9 +112,24 @@ export default {
       }
     };
 
-    onMounted(updateMarker);
+    onMounted(() => {
+      updateMarker();
+    });
 
-    watch(() => [props.variant, props.color, props.latlng, props.selected], updateMarker);
+    onUnmounted(() => {
+      if(lastMarker.value && map.value) {
+        if(markerClusterGroup && markerClusterGroup.value) {
+          markerClusterGroup.value.removeLayer(lastMarker.value as Marker);
+        } else {
+          map.value.removeLayer(lastMarker.value as Marker);
+        }
+      }
+      lastMarker.value = null;
+    })
+
+    watch([() => props.variant, () => props.color, () => props.latlng?.lat, () => props.latlng?.lng, () => props.selected],
+          updateMarker,
+    );
   }
 };
 </script>

package/components/map/FSMapMarkerClusterGroup.vue

@@ -3,9 +3,9 @@
 </template>
 
 <script lang="ts">
-import { inject, provide, ref, type Ref } from 'vue';
+import { inject, provide, ref, type Ref, onUnmounted } from 'vue';
 
-import { type Map, MarkerClusterGroup, divIcon } from 'leaflet';
+import { LatLngBounds, type Map, MarkerClusterGroup, divIcon } from 'leaflet';
 
 import { clusterMarkerHtml } from '../../utils/leafletMarkers';
 import { MAP } from './keys';
@@ -54,17 +54,39 @@ export default {
 
     provide('markerClusterGroup', markerClusterGroup);
 
-    markerClusterGroup.value.on("layeradd", () => {
-      if(!map.value) {
+    const handleLayerChange = () => {
+      if (!map.value) {
         return;
       }
-
       const layers = markerClusterGroup.value.getLayers();
-
-      if(layers.length === props.expectedLayers && !added) {
+      if (layers.length === props.expectedLayers && !added) {
         markerClusterGroup.value.addTo(map.value);
         added = true;
-        emit("update:bounds", markerClusterGroup.value.getBounds());
+      }
+
+      if (layers.length === 0 && added) {
+        map.value.removeLayer(markerClusterGroup.value as unknown as L.Layer);
+        added = false;
+      }
+
+      const bounds = new LatLngBounds([]);
+      for (const layer of layers as any[]) {
+        if (layer.getBounds) {
+          bounds.extend(layer.getBounds());
+        } else if (layer.getLatLng) {
+          bounds.extend(layer.getLatLng());
+        }
+      }
+
+      emit("update:bounds", layers.length > 0 ? bounds : null);
+    };
+
+    markerClusterGroup.value.on("layeradd", handleLayerChange);
+    markerClusterGroup.value.on("layerremove", handleLayerChange);
+
+    onUnmounted(() => {
+      if (map.value && map.value.hasLayer(markerClusterGroup.value as unknown as L.Layer)) {
+        map.value.removeLayer(markerClusterGroup.value as unknown as L.Layer);
       }
     });
   }

package/components/map/FSMapPolygon.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script lang="ts">
-import { inject, type PropType, onMounted, type Ref, watch, ref } from 'vue';
+import { inject, type PropType, onMounted, type Ref, watch, ref, onUnmounted } from 'vue';
 
 import { type Map, type LatLng, type Polygon, type FeatureGroup, polygon } from 'leaflet';
 
@@ -75,7 +75,19 @@ export default {
 
     onMounted(updatePolygon);
 
-    watch(() => [props.color, props.latlngs], updatePolygon);
+    onUnmounted(() => {
+      if (lastPolygon.value) {
+        if (featureGroup?.value) {
+          featureGroup.value.removeLayer(lastPolygon.value);
+        } else if (map.value?.hasLayer(lastPolygon.value)) {
+          map.value.removeLayer(lastPolygon.value);
+        }
+        lastPolygon.value = null;
+      }
+    });
+
+
+    watch([() => props.color, () => props.latlngs], updatePolygon);
   }
 };
 </script>

package/components/map/FSMapTileLayer.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script lang="ts">
-import { inject, type PropType, onMounted, type Ref, watch } from 'vue';
+import { inject, type PropType, onMounted, type Ref, watch, onUnmounted } from 'vue';
 
 import type { Map, Layer } from 'leaflet';
 
@@ -50,6 +50,17 @@ export default {
 
     onMounted(updateLayer);
 
+    onUnmounted(() => {
+      if (lastLayers && map.value) {
+        lastLayers.forEach(layer => {
+          if (map.value.hasLayer(layer)) {
+            map.value.removeLayer(layer);
+          }
+        });
+        lastLayers = [];
+      }
+    });
+
     watch(() => props.layers, updateLayer);
   }
 };

package/composables/index.ts

@@ -4,6 +4,7 @@ export * from "./useBreakpoints";
 export * from "./useColors";
 export * from "./useDebounce";
 export * from "./useMagicFieldProvider";
+export * from "./useMapLayers";
 export * from "./useRules";
 export * from "./useSlots";
 export * from "./useTables";

package/composables/useMapLayers.ts

@@ -0,0 +1,62 @@
+import { tileLayer } from 'leaflet';
+
+import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
+
+import { MapLayers } from '@dative-gpi/foundation-shared-components/models';
+
+export const useMapLayers = () => {
+  const { $tr } = useTranslationsProvider();
+
+  const apiKey = import.meta.env.VITE_GOOGLE_MAPS_API_KEY ?? "";
+
+  const layers = [
+    {
+      name: MapLayers.Map,
+      label: $tr("ui.map-layer.map", "Map"),
+      image: new URL("../../assets/images/map/map.png", import.meta.url).href,
+      layers: [
+        tileLayer(`https://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}&key=${apiKey}`, {
+          maxZoom: 22,
+          subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
+          attribution: '© Google Map Data',
+          className: 'fs-map-tile-base-layer'
+        })
+      ]
+    },
+    {
+      name: MapLayers.Imagery,
+      label: $tr("ui.map-layer.imagery", "Imagery"),
+      image: new URL("../../assets/images/map/imagery.png", import.meta.url).href,
+      layers: [
+        tileLayer(`https://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}&key=${apiKey}`, {
+          maxZoom: 22,
+          subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
+          attribution: '© Google Map Data',
+          className: 'fs-map-tile-base-layer'
+        })
+      ]
+    },
+    {
+      name: MapLayers.Snow,
+      label: $tr("ui.map-layer.snow", "Snow ski map"),
+      image: new URL("../../assets/images/map/snow.png", import.meta.url).href,
+      layers: [
+        tileLayer(`https://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}&key=${apiKey}`, {
+          maxZoom: 22,
+          subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
+          attribution: '© Google Map Data',
+          className: 'fs-map-tile-base-layer fs-map-tile-grayscale-layer'
+        }),
+        tileLayer(`https://tiles.opensnowmap.org/pistes/{z}/{x}/{y}.png`, {
+          maxZoom: 18,
+          attribution: 'Map data: &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors & ODbL, &copy; <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
+          className: 'fs-map-tile-base-layer'
+        })
+      ]
+    }
+  ];
+
+  return {
+    layers
+  };
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "1.0.155",
+  "version": "1.0.156",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "1.0.155",
-    "@dative-gpi/foundation-shared-services": "1.0.155"
+    "@dative-gpi/foundation-shared-domain": "1.0.156",
+    "@dative-gpi/foundation-shared-services": "1.0.156"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^1.0.0",
@@ -35,5 +35,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "1cec447dda0a3f4af92ee9e6457134a5b4cf64e1"
+  "gitHead": "d67f90e266b8ae583f46c82aec2dbd381c5d3629"
 }