widgets: map: implement measuring tool

Signed-off-by: Arturo Manzoli <arturomanzoli@gmail.com>

Author: ArturoManzoli

src/components/widgets/Map.vue

@@ -34,7 +34,7 @@
           <v-btn
             v-if="showButtons"
             v-bind="tooltipProps"
-            class="absolute right-[194px] w-[140px] mb-[13px] bottom-button bg-slate-50 text-[12px] font-bold"
+            class="absolute right-[235px] w-[140px] mb-[13px] bottom-button bg-slate-50 text-[12px] font-bold"
             elevation="4"
             text="Edit mission"
             append-icon="mdi-map-marker-radius-outline"
@@ -86,6 +86,9 @@
         </template>
       </v-tooltip>
     </div>
+    <div v-show="showButtons">
+      <MeasurementTool ref="measurementToolRef" v-model:is-active="isMeasurementMode" :zoom="zoom" />
+    </div>
   </div>
   <ContextMenu
     ref="contextMenuRef"
@@ -201,9 +204,11 @@ import blueboatMarkerImage from '@/assets/blueboat-marker.png'
 import brov2MarkerImage from '@/assets/brov2-marker.png'
 import genericVehicleMarkerImage from '@/assets/generic-vehicle-marker.png'
 import GlobalOriginDialog from '@/components/GlobalOriginDialog.vue'
+import MeasurementTool from '@/components/mission-planning/MeasurementTool.vue'
 import MissionChecklist from '@/components/MissionChecklist.vue'
 import PoiManager from '@/components/poi/PoiManager.vue'
 import { useInteractionDialog } from '@/composables/interactionDialog'
+import { setMapLayer } from '@/composables/map/useMapLayer'
 import { openSnackbar } from '@/composables/snackbar'
 import { MavCmd, MavType } from '@/libs/connection/m2r/messages/mavlink2rest-enum'
 import { datalogger, DatalogVariable } from '@/libs/sensors-logging'
@@ -262,6 +267,8 @@ let seamarksSaveBtn: HTMLAnchorElement | undefined
 const downloadMenuOpen = ref(false)
 const missionItemsInVehicle = ref<Waypoint[]>([])
 const missionSeqToMarkerSeq = shallowRef<Record<number, number>>({})
+const isMeasurementMode = ref(false)
+const measurementToolRef = ref<InstanceType<typeof MeasurementTool> | null>(null)
 
 const glassMenuCssVars = computed(() => ({
   '--glass-background': interfaceStore.globalGlassMenuStyles.backgroundColor,
@@ -626,6 +633,15 @@ onMounted(async () => {
 
   map.value.on('click', (event: LeafletMouseEvent) => {
     clickedLocation.value = [event.latlng.lat, event.latlng.lng]
+    if (isMeasurementMode.value && measurementToolRef.value) {
+      measurementToolRef.value.handleMapClick(event)
+    }
+  })
+
+  map.value.on('mousemove', (event: LeafletMouseEvent) => {
+    if (isMeasurementMode.value && measurementToolRef.value) {
+      measurementToolRef.value.handleMapMouseMove(event)
+    }
   })
 
   // Update center value after panning
@@ -733,6 +749,7 @@ onMounted(async () => {
   }
 
   mapReady.value = true
+  setMapLayer(map.value)
 
   if (missionStore.followVehicleOnMap === true) {
     targetFollower.follow(WhoToFollow.VEHICLE)
@@ -995,6 +1012,12 @@ watch(
   }
 )
 
+watch(isMeasurementMode, (isActive) => {
+  if (!map.value) return
+  const container = map.value.getContainer()
+  container.style.cursor = isActive ? 'crosshair' : ''
+})
+
 // - disable auto update for target follower
 // - remove event listeners
 onBeforeUnmount(() => {
@@ -1016,6 +1039,7 @@ onBeforeUnmount(() => {
     downloadMissionFromVehicle: async () => Promise.resolve(),
     clearMapDrawing: async () => Promise.resolve(),
   })
+  setMapLayer(undefined)
 })
 
 // Pan when variables change
@@ -1561,6 +1585,9 @@ const onGlobalOriginSet = (latitude: number, longitude: number): void => {
 
 const onKeydown = (event: KeyboardEvent): void => {
   if (event.key === 'Escape') {
+    if (isMeasurementMode.value) {
+      isMeasurementMode.value = false
+    }
     hideContextMenuAndMarker()
     return
   }
@@ -2000,7 +2027,7 @@ watch(
   position: absolute;
   bottom: v-bind('bottomButtonsDisplacement');
   margin-bottom: 12px;
-  right: 340px; /* Position to the left of the buttons */
+  right: 378px; /* Position to the left of the buttons */
   background: rgba(255, 255, 255, 0.8);
   border-radius: 1px;
   padding: 6px 6px;