@dative-gpi/foundation-shared-components 1.0.40 → 1.0.41

package/components/map/FSMap.vue

@@ -40,6 +40,7 @@
         <FSMapMarkerClusterGroup
           v-if="$props.locations"
           :expected-layers="$props.locations.length"
+          :disableClusteringAtZoom="defaultZoom"
           @update:bounds="(bounds) => locationGroupBounds = bounds"
         >
           <FSMapMarker
@@ -116,7 +117,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, onMounted, type Ref, provide, type PropType, ref, type StyleValue, watch } from "vue";
+import { computed, defineComponent, onMounted, type Ref, provide, type PropType, ref, type StyleValue, watch, onUnmounted } from "vue";
 
 import type {} from "leaflet.markercluster";
 import { map as createMap, control, tileLayer, latLngBounds, latLng, type LatLng, LatLngBounds, type FitBoundsOptions } from "leaflet";
@@ -240,10 +241,16 @@ export default defineComponent({
     const overlayHeight = ref<number>();
     const overlayWidth = ref<number>();
 
-    const defaultZoom = 15;
-    
     provide('map', map);
 
+    const defaultZoom = 16;
+    const mapResizeObserver = new ResizeObserver(() => {
+      if(!map.value) {
+        return;
+      }
+      map.value.invalidateSize();
+    });
+
     const mapLayers: MapLayer[] = [
       {
         name: "map",
@@ -306,20 +313,20 @@ export default defineComponent({
       return bounds as LatLngBounds;
     });
 
-    const calculateTargetPosition = (target: L.LatLng) => {
+    const calculateTargetPosition = (target: L.LatLng, zoom?: number) => {
       if(!map.value) {
         return target;
       }
-      const zoom = map.value.getZoom();
+      zoom = zoom ?? map.value.getZoom();
       const targetPoint = map.value.project(target, zoom).subtract([leftOffset.value / 2, -bottomOffset.value / 2]);
       return map.value.unproject(targetPoint, zoom);
     }
 
-    const panTo = (lat: number, lng: number) => {
+    const flyTo = (lat: number, lng: number, zoom: number = defaultZoom) => {
       if(!map.value) {
         return;
       }
-      map.value.panTo(calculateTargetPosition(latLng(lat, lng)));
+      map.value.flyTo(calculateTargetPosition(latLng(lat, lng), zoom), zoom);
     }
 
     const setView = (lat: number, lng: number, zoom: number) => {
@@ -376,8 +383,14 @@ export default defineComponent({
           return;
         }
 
-        panTo(e.latlng.lat, e.latlng.lng);
+        flyTo(e.latlng.lat, e.latlng.lng);
       });
+      
+      mapResizeObserver.observe(leafletContainer.value);
+    });
+
+    onUnmounted(() => {
+      mapResizeObserver.disconnect();
     });
 
     watch (() => props.center, (center) => {
@@ -395,7 +408,7 @@ export default defineComponent({
       if(!selectedLocation) {
         return;
       }
-      panTo(selectedLocation?.address.latitude, selectedLocation?.address.longitude);
+      flyTo(selectedLocation?.address.latitude, selectedLocation?.address.longitude);
     }, { immediate: true });
 
     watch(() => props.selectedAreaId, (selectedAreaId) => {
@@ -419,6 +432,7 @@ export default defineComponent({
 
     return {
       ColorEnum,
+      defaultZoom,
       leafletContainer,
       locationGroupBounds,
       overlayHeight,

package/components/map/FSMapFeatureGroup.vue

@@ -6,7 +6,7 @@
 import { inject, provide, ref, type Ref } from 'vue';
 
 import { type Map, FeatureGroup } from 'leaflet';
-import { INJECTION_FSMAP_MAP } from './keys';
+import { MAP } from './keys';
 
 export default {
   name: 'FSMapFeatureGroup',
@@ -18,7 +18,7 @@ export default {
     }
   },
   setup(props, { emit }) {
-    const map = inject<Ref<Map | null>>(INJECTION_FSMAP_MAP);
+    const map = inject<Ref<Map | null>>(MAP);
     let added = false;
     
     if(!map) {

package/components/map/FSMapMarker.vue

@@ -10,7 +10,7 @@ import { type Map, type DivIcon, divIcon, type LatLng, marker, type Marker, type
 import { useColors } from "../../composables";
 
 import { gpsMarkerHtml, locationMarkerHtml, pinMarkerHtml } from '../../utils/leafletMarkers';
-import { INJECTION_FSMAP_MAP, INJECTION_FSMAP_MARKERCLUSTERGROUP } from './keys';
+import { MAP, MARKERCLUSTERGROUP } from './keys';
 
 export default {
   name: 'FSMapMarker',
@@ -41,8 +41,8 @@ export default {
   },
   emits: ['click'],
   setup(props, { emit }) {
-    const map = inject<Ref<Map | null>>(INJECTION_FSMAP_MAP);
-    const markerClusterGroup = inject<Ref<MarkerClusterGroup | null>>(INJECTION_FSMAP_MARKERCLUSTERGROUP, ref(null));
+    const map = inject<Ref<Map | null>>(MAP);
+    const markerClusterGroup = inject<Ref<MarkerClusterGroup | null>>(MARKERCLUSTERGROUP, ref(null));
 
     const { getColors } = useColors();
 

package/components/map/FSMapMarkerClusterGroup.vue

@@ -8,7 +8,7 @@ import { inject, provide, ref, type Ref } from 'vue';
 import { type Map, MarkerClusterGroup, divIcon } from 'leaflet';
 
 import { clusterMarkerHtml } from '../../utils/leafletMarkers';
-import { INJECTION_FSMAP_MAP } from './keys';
+import { MAP } from './keys';
 
 export default {
   name: 'FSMapMarkerClusterGroup',
@@ -17,10 +17,15 @@ export default {
       type: Number,
       default: 0,
       required: false
+    },
+    disableClusteringAtZoom: {
+      type: Number,
+      default: 17,
+      required: false
     }
   },
   setup(props, { emit }) {
-    const map = inject<Ref<Map | null>>(INJECTION_FSMAP_MAP);
+    const map = inject<Ref<Map | null>>(MAP);
     let added = false;
     
     if(!map) {
@@ -34,7 +39,7 @@ export default {
     const markerClusterGroup = ref<MarkerClusterGroup>(new MarkerClusterGroup({
       spiderfyOnMaxZoom: false,
       showCoverageOnHover: false,
-      disableClusteringAtZoom: 17,
+      disableClusteringAtZoom: props.disableClusteringAtZoom,
       iconCreateFunction: function (cluster: any) {
         const size = 36;
 

package/components/map/FSMapOverlay.vue

@@ -133,4 +133,4 @@ export default defineComponent({
     };
   }
 });
-</script>
+</script>

package/components/map/FSMapPolygon.vue

@@ -8,7 +8,7 @@ import { inject, type PropType, onMounted, type Ref, watch, ref } from 'vue';
 import { type Map, type LatLng, type Polygon, type FeatureGroup, polygon } from 'leaflet';
 
 import { useColors } from "../../composables";
-import { INJECTION_FSMAP_FEATUREGROUP, INJECTION_FSMAP_MAP } from './keys';
+import { FEATUREGROUP, MAP } from './keys';
 
 export default {
   name: 'FSMapPolygon',
@@ -25,8 +25,8 @@ export default {
   },
   emits: ['click'],
   setup(props, { emit }) {
-    const map = inject<Ref<Map | null>>(INJECTION_FSMAP_MAP);
-    const featureGroup = inject<Ref<FeatureGroup | null>>(INJECTION_FSMAP_FEATUREGROUP, ref(null));
+    const map = inject<Ref<Map | null>>(MAP);
+    const featureGroup = inject<Ref<FeatureGroup | null>>(FEATUREGROUP, ref(null));
 
     const { getColors } = useColors();
 

package/components/map/FSMapTileLayer.vue

@@ -7,7 +7,7 @@ import { inject, type PropType, onMounted, type Ref, watch } from 'vue';
 
 import type { Map, Layer } from 'leaflet';
 
-import { INJECTION_FSMAP_MAP } from './keys';
+import { MAP } from './keys';
 
 export default {
   name: 'FSMapTileLayer',
@@ -18,7 +18,7 @@ export default {
     }
   },
   setup(props) {
-    const map = inject<Ref<Map | null>>(INJECTION_FSMAP_MAP);
+    const map = inject<Ref<Map | null>>(MAP);
 
     const lastLayer = props.layer;
 

package/components/map/keys.ts

@@ -1,4 +1,4 @@
-export const INJECTION_FSMAP_FEATUREGROUP = 'featureGroup';
-export const INJECTION_FSMAP_MAP = 'map';
-export const INJECTION_FSMAP_MARKERCLUSTERGROUP = 'markerClusterGroup';
+export const FEATUREGROUP = 'featureGroup';
+export const MAP = 'map';
+export const MARKERCLUSTERGROUP = 'markerClusterGroup';
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "1.0.40",
+  "version": "1.0.41",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "1.0.40",
-    "@dative-gpi/foundation-shared-services": "1.0.40"
+    "@dative-gpi/foundation-shared-domain": "1.0.41",
+    "@dative-gpi/foundation-shared-services": "1.0.41"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^0.0.75",
@@ -35,5 +35,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "a1e2c35d0e08ce37a05a56d7d7f0f477b935a645"
+  "gitHead": "508299773d7c9704b08daf80c858931aaa823326"
 }