@dative-gpi/foundation-shared-components 0.0.214 → 0.0.215

package/components/map/FSMap.vue

@@ -1,6 +1,7 @@
 <template>
   <FSCard
     :width="$props.width"
+    :style="style"
     v-bind="$attrs"
   >
     <FSCol
@@ -12,6 +13,7 @@
         v-if="$slots['leftoverlay-header'] || $slots['leftoverlay-body']"
         :mode="$props.overlayMode"
         :height="$props.height"
+        :mapId="mapId"
         @update:mode="$emit('update:overlayMode', $event)"
       >
         <template
@@ -39,9 +41,7 @@
           @click="editingLocation = true"
         />
       </FSRow>
-      <FSCol
-        :style="style"
-      >
+      <FSCol>
         <div
           class="fs-leaflet-container"
           :id="mapId"
@@ -129,7 +129,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, onMounted, type PropType, ref, watch } from "vue";
+import { computed, defineComponent, onMounted, onUnmounted, type PropType, ref, watch } from "vue";
 
 import * as L from "leaflet";
 import "leaflet.markercluster";
@@ -139,7 +139,7 @@ import { type Address, type FSArea } from '@dative-gpi/foundation-shared-domain/
 
 import { clusterMarker, locationMarker, myLocationMarker } from "../../utils";
 import { ColorEnum, type FSLocation, type MapLayer } from "../../models";
-import { useColors, useAddress } from "../../composables";
+import { useColors, useAddress, useBreakpoints } from "../../composables";
 
 import FSMapEditPointAddressOverlay from "./FSMapEditPointAddressOverlay.vue";
 import FSMapLayerButton from "./FSMapLayerButton.vue";
@@ -247,6 +247,7 @@ export default defineComponent({
     const { $tr } = useTranslationsProvider();
     const { reverseSearch } = useAddress();
     const { getColors } = useColors();
+    const { isExtraSmall } = useBreakpoints();
 
     const LL = window.L;
 
@@ -254,6 +255,9 @@ export default defineComponent({
     const innerModelValue = ref(props.modelValue);
     const editingLocation = ref(false);
     const fullScreen = ref(false);
+    const leftOverlayHeight = ref<number>();
+    const leftOverlayWidth = ref<number>();
+    const resizeObserver = ref<ResizeObserver | null>(null);
 
     const mapId = `map-${Math.random().toString(36).substring(7)}`;
     const defaultZoom = 15;
@@ -266,19 +270,6 @@ export default defineComponent({
     let map: L.Map;
     let markerLayerGroup: L.FeatureGroup | any;
 
-    if (props.editable) {
-      markerLayerGroup = new LL.FeatureGroup();
-    }
-    else {
-      markerLayerGroup = new LL.MarkerClusterGroup({
-        spiderfyOnMaxZoom: false,
-        showCoverageOnHover: false,
-        disableClusteringAtZoom: 17,
-        iconCreateFunction: function (cluster: any) {
-          return clusterMarker(cluster.getChildCount());
-        }
-      });
-    }
     const mapLayers: MapLayer[] = [
       {
         name: "map",
@@ -302,11 +293,29 @@ export default defineComponent({
       }
     ];
 
+    const bottomMargin = computed(() => {
+      let margin = 0;
+      if (props.overlayMode !== 'expand' && leftOverlayHeight.value && isExtraSmall.value) {
+        margin += leftOverlayHeight.value;
+      }
+      return margin;
+    });
+
+    const leftMargin = computed(() => {
+      let margin = 0;
+      if (leftOverlayWidth.value && !isExtraSmall.value) {
+        margin += leftOverlayWidth.value;
+      }
+      return margin;
+    });
+
     const style = computed((): { [key: string]: string | undefined } => {
       return {
         "--fs-map-location-pin-color": getColors(ColorEnum.Primary).base,
+        "--fs-map-mylocation-pin-color": getColors(ColorEnum.Primary).base,
         "--fs-map-mylocation-pin-color-alpha": getColors(ColorEnum.Primary).base + "50",
         "--fs-map-leaflet-container-height": props.height as string,
+        "--fs-map-leaflet-bottom-overlay-margin": `${bottomMargin.value}px`,
         "--fs-map-container-grayscale": props.grayscale ? '0.9' : '0'
       };
     });
@@ -314,7 +323,7 @@ export default defineComponent({
     const displayLocations = () => {
       markerLayerGroup.clearLayers();
       innerModelValue.value.forEach((location) => {
-        const icon = locationMarker(location.icon, getColors(location.color).base);
+        const icon = locationMarker(location.icon, getColors(location.color).base, L);
         const marker = LL.marker([location.address.latitude, location.address.longitude], { icon }).addTo(markerLayerGroup);
         markers[location.id] = marker;
         marker.on('click', () => emit('update:selectedLocationId', location.id));
@@ -351,6 +360,19 @@ export default defineComponent({
     };
 
     const initMap = () => {
+      if (props.editable) {
+        markerLayerGroup = new LL.FeatureGroup();
+      }
+      else {
+        markerLayerGroup = new LL.MarkerClusterGroup({
+          spiderfyOnMaxZoom: false,
+          showCoverageOnHover: false,
+          disableClusteringAtZoom: 17,
+          iconCreateFunction: function (cluster: any) {
+            return clusterMarker(cluster.getChildCount(), L);
+          }
+        });
+      }
       const mapOptions = {
         zoomControl: false,
         scrollWheelZoom: props.enableScrollWheelZoom,
@@ -392,7 +414,7 @@ export default defineComponent({
         return;
       }
       modifyLocationAddress(props.selectedLocationId, address);
-      map.panTo([address.latitude, address.longitude]);
+      map.panTo(calculateTargetPosition(new L.LatLng(address.latitude, address.longitude)));
     };
 
     const onNewCoordEntered = async (lat: number, lng: number) => {
@@ -425,13 +447,18 @@ export default defineComponent({
       }
       map.locate();
       map.on('locationfound', (e: L.LocationEvent) => {
-        map.panTo(e.latlng);
-        const icon = myLocationMarker();
+        map.panTo(calculateTargetPosition(e.latlng));
+        const icon = myLocationMarker(L);
         myLocationLayerGroup.clearLayers();
         LL.marker(e.latlng, { icon }).addTo(myLocationLayerGroup);
       });
     };
 
+    const calculateTargetPosition = (target: L.LatLng, zoom: number = map.getZoom()) => {
+      const targetPoint = map.project(target, zoom).subtract([leftMargin.value / 2, -bottomMargin.value / 2]);
+      return map.unproject(targetPoint, zoom);
+    }
+
     const onCancel = () => {
       editingLocation.value = false;
       innerModelValue.value = props.modelValue;
@@ -443,7 +470,7 @@ export default defineComponent({
         map.fitBounds(markerLayerGroup.getBounds(), { maxZoom: defaultZoom });
       }
       else {
-        map.panTo([props.center[0], props.center[1]]);
+        map.panTo(calculateTargetPosition(new L.LatLng(props.center[0], props.center[1])), { animate: false });
       }
       if (props.modelValue.length > 1) {
         emit('update:selectedLocationId', null);
@@ -460,7 +487,7 @@ export default defineComponent({
         map.fitBounds(markerLayerGroup.getBounds(), { maxZoom: defaultZoom });
       }
       else {
-        map.flyTo([props.center[0], props.center[1]], map.getZoom() ?? defaultZoom, { animate: false });
+        map.panTo(calculateTargetPosition(new L.LatLng(props.center[0], props.center[1])), { animate: false });
       }
       if (props.modelValue.length > 1) {
         emit('update:selectedLocationId', null);
@@ -472,6 +499,29 @@ export default defineComponent({
       if (props.selectedLocationId && props.modelValue.length === 1) {
         editingLocation.value = true;
       }
+
+      resizeObserver.value = new ResizeObserver(entries => {
+        entries.forEach((entry) => {
+          if (entry.target.id === `left-overlay-${mapId}`) {
+            leftOverlayWidth.value = entry.contentRect.width;
+          }
+          if(entry.target.id === `left-overlay-mobile-${mapId}`) {
+            leftOverlayHeight.value = entry.contentRect.height;
+          }
+        });
+      });
+      if (document.querySelector(`#left-overlay-mobile-${mapId}`)) {
+        resizeObserver.value.observe(document.querySelector(`#left-overlay-mobile-${mapId}`)!);
+      }
+      if (document.querySelector(`#left-overlay-${mapId}`)) {
+        resizeObserver.value.observe(document.querySelector(`#left-overlay-${mapId}`)!);
+      }
+    });
+
+    onUnmounted((): void => {
+      if (resizeObserver.value) {
+        resizeObserver.value.disconnect();
+      }
     });
 
     watch(() => innerModelValue.value, () => {
@@ -488,7 +538,7 @@ export default defineComponent({
       });
 
       const marker = markers[props.selectedLocationId];
-      map.flyTo(marker.getLatLng(), 17, { animate: false });
+      map.flyTo(calculateTargetPosition(marker.getLatLng(), 17), 17, { animate: false });
       marker.getElement()?.classList.add('fs-map-location-selected');
     })
 
@@ -507,10 +557,11 @@ export default defineComponent({
     });
 
     return {
-      innerSelectedLayer,
+      bottomMargin,
       editingLocation,
-      innerModelValue,
       fullScreen,
+      innerModelValue,
+      innerSelectedLayer,
       mapLayers,
       mapId,
       style,

package/components/map/FSMapLayerButton.vue

@@ -7,20 +7,24 @@
   <FSDialog
     v-model="dialog"
     title="Select Layers"
-    width="460px"
+    width="442px"
   >
     <template
       v-slot:body
     >
-      <FSImageCard
-        v-for="layer in layers"
-        :variant="modelValue === layer.name ? 'full' : 'background'"
-        :color="modelValue === layer.name ? 'primary' : 'light'"
-        :label="layer.label"
-        :src="layer.image"
-        :key="layer.name"
-        @click="onLayerClick(layer.name)"
-      />
+      <FSRow
+        align="center-center"
+      >
+        <FSImageCard
+          v-for="layer in layers"
+          :variant="modelValue === layer.name ? 'full' : 'background'"
+          :color="modelValue === layer.name ? 'primary' : 'light'"
+          :label="layer.label"
+          :src="layer.image"
+          :key="layer.name"
+          @click="onLayerClick(layer.name)"
+        />
+      </FSRow>
     </template>
   </FSDialog> 
 </template>
@@ -33,13 +37,15 @@ import { type MapLayer } from "../../models";
 import FSImageCard from "../FSImageCard.vue";
 import FSButton from "../FSButton.vue";
 import FSDialog from "../FSDialog.vue";
+import FSRow from "../FSRow.vue";
 
 export default defineComponent({
   name: "FSMapLayerButton",
   components: {
     FSImageCard,
     FSButton,
-    FSDialog
+    FSDialog,
+    FSRow
   },
   props: {
     layers: {

package/components/map/FSMapOverlay.vue

@@ -1,6 +1,7 @@
 <template>
   <FSCol
-    v-if="isExtraSmall"
+    v-show="isExtraSmall"
+    :id="`left-overlay-mobile-${$props.mapId}`"
     :height="$props.mode === 'expand' ? '100%' : ($props.mode === 'half' ? '50%' : 'hug')"
     :style="style"
     class="fs-map-overlay-left-mobile"
@@ -49,7 +50,9 @@
     </FSCard>
   </FSCol>
   <FSCol
-    v-else
+    v-show="!isExtraSmall"
+    :style="style"
+    :id="`left-overlay-${$props.mapId}`"
     class="fs-map-overlay-left"
     width="hug"
     gap="2px"
@@ -60,7 +63,7 @@
       :border="false"
     >
       <FSCol
-        :height="`calc(${$props.height} - 40px)`"
+        class="fs-map-overlay-left-content"
       >
         <slot
           name="leftoverlay-header"
@@ -101,6 +104,10 @@ export default defineComponent({
       type: String as PropType<"collapse" | "half" | "expand">,
       required: false,
       default: "collapse"
+    },
+    mapId: {
+      type: String,
+      required: true
     }
   },
   components: {
@@ -120,11 +127,13 @@ export default defineComponent({
     const style = computed((): { [key: string]: string | null | undefined } => {
       if (props.mode === "expand") {
         return {
+          "--fs-map-overlay-max-height": `calc(${props.height} - 40px)`,
           "--fs-map-overlay-card-height": "95%",
         };
       }
       else {
         return {
+          "--fs-map-overlay-max-height": `calc(${props.height} - 40px)`,
           "--fs-map-overlay-card-height": "100%",
         };
       }

package/package.json

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

package/styles/components/fs_map.scss

@@ -9,14 +9,6 @@
     filter: grayscale(var(--fs-map-container-grayscale));
   }
 
-  .fs-map-overlay-left {
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 950;
-    margin: 4px;
-  }
-
   .fs-map-overlay-edit-button {
     position: absolute;
     top: 0;
@@ -46,7 +38,7 @@
       bottom: 100%;
       right: 0;
       z-index: 1001;
-      margin-bottom: 8px;
+      margin-bottom: calc(var(--fs-map-leaflet-bottom-overlay-margin) + 8px);
 
       button.fs-map-zoom-plus > * {
         border-bottom-left-radius: 0 !important;
@@ -65,10 +57,11 @@
 
   .fs-map-mylocation {
     border: 3px solid white;
+    background-color: var(--fs-map-mylocation-pin-color);
     border-radius: 100%;
-    animation: fs-map-shadow 1.4s linear infinite;
+    animation: fs-map-shadow-mylocation 1.4s linear infinite;
 
-    @keyframes fs-map-shadow {
+    @keyframes fs-map-shadow-mylocation {
       0% {
         box-shadow: 0 0 0px 0px var(--fs-map-mylocation-pin-color-alpha);
       }
@@ -108,9 +101,9 @@
   }
 
   .fs-map-location-selected > div {
-    animation: fs-map-shadow 1.4s linear infinite;
+    animation: fs-map-shadow-location 1.4s linear infinite;
 
-    @keyframes fs-map-shadow {
+    @keyframes fs-map-shadow-location {
       0% {
         box-shadow: 0 0 0px 0px var(--fs-map-mylocation-pin-color-alpha);
       }

package/styles/components/fs_map_overlay.scss

@@ -1,3 +1,15 @@
+.fs-map-overlay-left {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 950;
+  margin: 4px;
+
+  .fs-map-overlay-left-content {
+    max-height: var(--fs-map-overlay-max-height);
+  }
+}
+
 .fs-map-overlay-left-mobile {
   position: absolute;
   bottom: 0;

package/utils/leafletMarkers.ts

@@ -1,11 +1,7 @@
-import L from 'leaflet';
-
-export const locationMarker = (icon: string, color: string, size = 36) => {
+export const locationMarker = (icon: string, color: string, L: any, size = 36) => {
   const iconHtml = `
   <div style="--fs-map-mylocation-pin-color-alpha:${color}50;--fs-map-location-pin-color: ${color}">
-    <div class="fs-map-location-pin">
-      <i class="${icon} mdi v-icon notranslate v-theme--DefaultTheme fs-icon" aria-hidden="true" style="--fs-icon-font-size: 22px;" />
-    </div>
+    <i class="${icon} mdi notranslate v-theme--DefaultTheme fs-icon" aria-hidden="true" style="--fs-icon-font-size: 22px;" />
   </div>`;
 
   return L.divIcon({
@@ -16,7 +12,7 @@ export const locationMarker = (icon: string, color: string, size = 36) => {
   });
 }
 
-export const clusterMarker = (label: string, size = 36) => {
+export const clusterMarker = (label: string, L: any, size = 36) => {
   const iconHtml = `
   <div class="fs-map-cluster">
     <span>${label}</span>
@@ -30,7 +26,7 @@ export const clusterMarker = (label: string, size = 36) => {
   })
 }
 
-export const myLocationMarker = (size = 16) => {
+export const myLocationMarker = (L: any, size = 16) => {
   const iconHtml = `<div class="fs-map-mylocation-pin" />`;
 
   return L.divIcon({