From c63d7c4d3cfea4bb0c8e49b39965f2adbd644b5c Mon Sep 17 00:00:00 2001
From: Arturo Manzoli <arturomanzoli@gmail.com>
Date: Wed, 13 Nov 2024 06:37:30 -0300
Subject: [PATCH] Views: Mission-planning: Add context menu and mission editing

Signed-off-by: Arturo Manzoli <arturomanzoli@gmail.com>
---
 src/components/widgets/Map.vue                |    2 +-
 src/router/index.ts                           |    2 +-
 src/stores/mission.ts                         |   39 +-
 src/types/mission.ts                          |   72 ++
 src/views/MissionPlanning/ContextMenu.vue     |  260 ++++
 .../MissionPlanningView.vue                   | 1079 ++++++++++++++---
 .../MissionPlanning/ScanDirectionDial.vue     |  165 +++
 7 files changed, 1432 insertions(+), 187 deletions(-)
 create mode 100644 src/views/MissionPlanning/ContextMenu.vue
 rename src/views/{ => MissionPlanning}/MissionPlanningView.vue (50%)
 create mode 100644 src/views/MissionPlanning/ScanDirectionDial.vue

diff --git a/src/components/widgets/Map.vue b/src/components/widgets/Map.vue
index 8a277df99..40cb56a34 100644
--- a/src/components/widgets/Map.vue
+++ b/src/components/widgets/Map.vue
@@ -571,7 +571,7 @@ const topProgressBarDisplacement = computed(() => {
 })
 </script>
 
-<style>
+<style scoped>
 .page-base {
   min-height: 100vh;
   display: flex;
diff --git a/src/router/index.ts b/src/router/index.ts
index 8600bf11e..3a0224e06 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,7 +1,7 @@
 import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
 
 import AboutViewVue from '../views/AboutView.vue'
-import MissionPlanningView from '../views/MissionPlanningView.vue'
+import MissionPlanningView from '../views/MissionPlanning/MissionPlanningView.vue'
 import WidgetsView from '../views/WidgetsView.vue'
 
 const router = createRouter({
diff --git a/src/stores/mission.ts b/src/stores/mission.ts
index dd6f2a3fe..61de87c26 100644
--- a/src/stores/mission.ts
+++ b/src/stores/mission.ts
@@ -1,4 +1,5 @@
 import { useStorage } from '@vueuse/core'
+import { Path } from 'leaflet'
 import { defineStore } from 'pinia'
 import { reactive, ref, watch } from 'vue'
 
@@ -7,7 +8,7 @@ import { useBlueOsStorage } from '@/composables/settingsSyncer'
 import { askForUsername } from '@/composables/usernamePrompDialog'
 import { eventCategoriesDefaultMapping } from '@/libs/slide-to-confirm'
 import { reloadCockpit } from '@/libs/utils'
-import type { Waypoint, WaypointCoordinates } from '@/types/mission'
+import type { Survey, Waypoint, WaypointCoordinates } from '@/types/mission'
 
 import { useMainVehicleStore } from './mainVehicle'
 
@@ -30,6 +31,28 @@ export const useMissionStore = defineStore('mission', () => {
 
   const currentPlanningWaypoints = reactive<Waypoint[]>([])
 
+  const surveys = reactive<Survey[]>([])
+
+  const paths = reactive<Path[]>([])
+
+  const addSurvey = (survey: Survey): void => {
+    surveys.push(survey)
+  }
+
+  const updateSurvey = (id: string, updatedSurvey: Partial<Survey>): void => {
+    const index = surveys.findIndex((s) => s.id === id)
+    if (index !== -1) {
+      surveys[index] = { ...surveys[index], ...updatedSurvey }
+    }
+  }
+
+  const removeSurvey = (id: string): void => {
+    const index = surveys.findIndex((s) => s.id === id)
+    if (index !== -1) {
+      surveys.splice(index, 1)
+    }
+  }
+
   const moveWaypoint = (id: string, newCoordinates: WaypointCoordinates): void => {
     const waypoint = currentPlanningWaypoints.find((w) => w.id === id)
     if (waypoint === undefined) {
@@ -89,6 +112,14 @@ export const useMissionStore = defineStore('mission', () => {
     { immediate: true }
   )
 
+  const clearWaypoints = (): void => {
+    currentPlanningWaypoints.splice(0)
+  }
+
+  const clearPaths = (): void => {
+    paths.splice(0)
+  }
+
   return {
     username,
     lastConnectedUser,
@@ -101,5 +132,11 @@ export const useMissionStore = defineStore('mission', () => {
     slideEventsCategoriesRequired,
     moveWaypoint,
     clearMission,
+    surveys,
+    addSurvey,
+    updateSurvey,
+    removeSurvey,
+    clearWaypoints,
+    clearPaths,
   }
 })
diff --git a/src/types/mission.ts b/src/types/mission.ts
index 66b0e9f94..d1177146a 100644
--- a/src/types/mission.ts
+++ b/src/types/mission.ts
@@ -21,6 +21,7 @@ export type Waypoint = {
    * Unique identification for the waypoint.
    */
   id: string
+
   /**
    * Geographical coordinates of the waypoint in the following format: [latitude, longitude].
    */
@@ -79,6 +80,77 @@ export type CockpitMission = {
   waypoints: Waypoint[]
 }
 
+/**
+ * Survey object that contains the information about the survey to be performed.
+ */
+export interface Survey {
+  /**
+   * Unique identification for the survey.
+   */
+  id: string
+  /**
+   * Coordinates of the polygon that will be surveyed.
+   */
+  polygonCoordinates: WaypointCoordinates[]
+  /**
+   * Density of the scan.
+   */
+  distanceBetweenLines: number
+  /**
+   * Angle of the survey lines.
+   */
+  surveyLinesAngle: number
+  /**
+   * Executable mission waypoints.
+   */
+  waypoints: Waypoint[]
+}
+
+/**
+ * Last state of the survey.
+ */
+export interface SurveyState {
+  /**
+   * Coordinates of the waypoints
+   */
+  polygonCoordinates: WaypointCoordinates[]
+  /**
+   * Waypoints of the survey.
+   */
+  waypoints: Waypoint[]
+  /**
+   * Density of the scan.
+   */
+  distanceBetweenLines: number
+  /**
+   *  Angle of the survey lines.
+   */
+  surveyLinesAngle: number
+}
+
+export type SurveyPolygon = {
+  /**
+   * The coordinates of the polygon that will be surveyed.
+   */
+  polygonPositions: L.LatLng[]
+  /**
+   * The markers that represent the polygon vertices.
+   */
+  polygonMarkers: L.Marker[]
+  /**
+   * The markers that represent the polygon edges.
+   */
+  edgeMarkers: L.Marker[]
+  /**
+   * Density of the scan.
+   */
+  distanceBetweenLines: number
+  /**
+   * Angle of the survey lines.
+   */
+  surveyLinesAngle: number
+}
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const instanceOfCockpitMission = (maybeMission: any): maybeMission is CockpitMission => {
   const requiredKeys = ['version', 'settings', 'waypoints']
diff --git a/src/views/MissionPlanning/ContextMenu.vue b/src/views/MissionPlanning/ContextMenu.vue
new file mode 100644
index 000000000..54be29355
--- /dev/null
+++ b/src/views/MissionPlanning/ContextMenu.vue
@@ -0,0 +1,260 @@
+<template>
+  <div
+    v-if="visible"
+    :style="{ top: `${position.y}px`, left: `${position.x}px` }"
+    class="context-menu absolute flex justify-center items-center z-[1000] text-white rounded-lg w-auto h-auto"
+  >
+    <div v-if="selectedSurveyId" class="relative orbit-container">
+      <div class="central-element flex justify-start items-start">
+        <WindDirectionDial :angle="angle" auto-update :polygon-state="false" />
+      </div>
+
+      <div id="button-1" class="orbit-button orbit-button-1">
+        <v-btn
+          v-tooltip="
+            missionStore.surveys.length === 0 && missionStore.currentPlanningWaypoints.length === 0
+              ? 'Create survey'
+              : 'Add survey'
+          "
+          :style="[
+            interfaceStore.globalGlassMenuStyles,
+            {
+              borderColor: isCreatingSurvey ? '#FFFF0022' : interfaceStore.globalGlassMenuStyles.backgroundColor,
+              backgroundColor: '#333333EE',
+            },
+          ]"
+          variant="elevated"
+          icon="mdi-transit-connection-variant"
+          rounded="full"
+          size="x-small"
+          color="#FFFFFF22"
+          class="text-[12px] rotate-[145deg]"
+          @click="toggleSurvey"
+        ></v-btn>
+      </div>
+
+      <div id="button-2" class="orbit-button orbit-button-2">
+        <v-btn
+          v-tooltip="
+            missionStore.surveys.length === 0 && missionStore.currentPlanningWaypoints.length === 0
+              ? 'Create simple path'
+              : 'Add simple path'
+          "
+          :style="[
+            interfaceStore.globalGlassMenuStyles,
+            {
+              borderColor: isCreatingSimpleMission ? '#FFFF0022' : interfaceStore.globalGlassMenuStyles.backgroundColor,
+              backgroundColor: '#333333EE',
+            },
+          ]"
+          variant="elevated"
+          icon="mdi-vector-polyline"
+          rounded="full"
+          size="x-small"
+          color="#FFFFFF22"
+          class="text-[13px] rotate-[170deg]"
+          @click="toggleSimpleMission"
+        ></v-btn>
+      </div>
+      <div v-if="missionStore.surveys.length === 1" id="button-3" class="orbit-button orbit-button-3">
+        <v-btn
+          v-tooltip="`Edit survey's polygon`"
+          variant="elevated"
+          icon="mdi-pencil"
+          :style="{ backgroundColor: '#333333EE' }"
+          rounded="full"
+          :disabled="undoIsInProgress"
+          size="x-small"
+          color="#FFFFFF22"
+          class="text-[13px] rotate-[220deg]"
+          @click="undoGenerateWaypoints"
+        ></v-btn>
+      </div>
+      <div
+        v-tooltip="'Delete survey'"
+        class="absolute text-[14px] mt-[10px] ml-[85px] bg-transparent rounded-full cursor-pointer elevation-4"
+        variant="text"
+        @click="deleteSelectedSurvey"
+      >
+        <v-icon color="white" class="border-2 rounded-full bg-red">mdi-close</v-icon>
+      </div>
+    </div>
+    <div
+      v-else
+      class="flex flex-col rounded-md"
+      :style="[interfaceStore.globalGlassMenuStyles, { background: '#333333EE', border: '1px solid #FFFFFF44' }]"
+    >
+      <v-list-item class="flex items-center gap-x-2 pb-2" @click="handleToggleSurvey">
+        <v-icon
+          variant="text"
+          icon="mdi-transit-connection-variant"
+          rounded="full"
+          size="x-small"
+          color="white"
+          class="text-[16px]"
+        ></v-icon>
+        <span class="text-white text-sm ml-4">{{
+          isCreatingSurvey
+            ? 'Close survey creation'
+            : missionStore.surveys.length === 0
+            ? 'Create survey'
+            : 'Add survey'
+        }}</span>
+      </v-list-item>
+      <v-divider />
+      <v-list-item class="flex items-center gap-x-2 pb-2" @click="handleToggleSimpleMission">
+        <v-icon
+          variant="text"
+          icon="mdi-vector-polyline"
+          rounded="full"
+          size="x-small"
+          color="white"
+          class="text-[16px]"
+        ></v-icon>
+        <span class="text-white text-sm ml-4">{{
+          isCreatingSimpleMission
+            ? 'Close simple path creation'
+            : missionStore.surveys.length === 0
+            ? 'Create simple path'
+            : 'Add simple path'
+        }}</span>
+      </v-list-item>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, defineEmits, defineProps, inject } from 'vue'
+
+import { useAppInterfaceStore } from '@/stores/appInterface'
+import { useMissionStore } from '@/stores/mission'
+
+import WindDirectionDial from './ScanDirectionDial.vue'
+
+const missionStore = useMissionStore()
+const interfaceStore = useAppInterfaceStore()
+
+/* eslint-disable jsdoc/require-jsdoc */
+const props = defineProps<{
+  visible: boolean
+  position: {
+    x: number
+    y: number
+  }
+  selectedSurveyId: string | undefined
+}>()
+/* eslint-enable jsdoc/require-jsdoc */
+
+const emit = defineEmits(['close'])
+
+const toggleSurvey = inject<() => void>('toggleSurvey')
+const toggleSimpleMission = inject<() => void>('toggleSimpleMission')
+const isCreatingSimpleMission = inject<boolean>('isCreatingSimpleMission')
+const isCreatingSurvey = inject<boolean>('isCreatingSurvey')
+const undoIsInProgress = inject<boolean>('undoIsInProgress')
+const undoGenerateWaypoints = inject<() => void>('undoGenerateWaypoints')
+const deleteSelectedSurvey = inject<() => void>('deleteSelectedSurvey')
+
+const angle = computed(
+  () => missionStore.surveys.find((survey) => survey.id === props.selectedSurveyId)?.surveyLinesAngle
+)
+
+const handleToggleSurvey = (): void => {
+  toggleSurvey && toggleSurvey()
+  emit('close')
+}
+
+const handleToggleSimpleMission = (): void => {
+  toggleSimpleMission && toggleSimpleMission()
+  emit('close')
+}
+</script>
+
+<style scoped>
+.context-menu {
+  transform-origin: center;
+  opacity: 0;
+  animation: bloom 0.3s ease-out forwards;
+}
+
+@keyframes bloom {
+  0% {
+    transform: scale(0.15);
+    opacity: 0;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+.orbit-container {
+  position: relative;
+  width: 80px;
+  height: 80px;
+}
+
+.central-element {
+  position: relative;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.orbit-button {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform-origin: center;
+  opacity: 0;
+}
+
+/* Orbit animations for buttons */
+.orbit-button-1 {
+  animation: orbit-1 0.5s ease-out forwards;
+}
+
+.orbit-button-2 {
+  animation: orbit-2 0.4s ease-out forwards;
+  animation-delay: 0.2s;
+}
+
+.orbit-button-3 {
+  animation: orbit-3 0.3s ease-out forwards;
+  animation-delay: 0.4s;
+}
+
+/* Keyframe animations */
+@keyframes orbit-1 {
+  0% {
+    transform: translate(-50%, -50%) rotate(0deg) translateX(0);
+    opacity: 0;
+  }
+  100% {
+    transform: translate(-50%, -50%) rotate(-500deg) translateX(90px);
+    opacity: 1;
+  }
+}
+
+@keyframes orbit-2 {
+  0% {
+    transform: translate(-50%, -50%) rotate(0deg) translateX(0);
+    opacity: 0;
+  }
+  100% {
+    transform: translate(-50%, -50%) rotate(-541deg) translateX(90px);
+    opacity: 1;
+  }
+}
+
+@keyframes orbit-3 {
+  0% {
+    transform: translate(-50%, -50%) rotate(0deg) translateX(0);
+    opacity: 0;
+  }
+  100% {
+    transform: translate(-50%, -50%) rotate(-580deg) translateX(90px);
+    opacity: 1;
+  }
+}
+</style>
diff --git a/src/views/MissionPlanningView.vue b/src/views/MissionPlanning/MissionPlanningView.vue
similarity index 50%
rename from src/views/MissionPlanningView.vue
rename to src/views/MissionPlanning/MissionPlanningView.vue
index 2af360dc8..5958d4ae7 100644
--- a/src/views/MissionPlanningView.vue
+++ b/src/views/MissionPlanning/MissionPlanningView.vue
@@ -1,6 +1,48 @@
 <template>
   <div class="mission-planning">
-    <div id="planningMap" ref="planningMap" />
+    <div id="planningMap" ref="planningMap" class="relative" />
+    <div
+      v-if="isCreatingSurvey && surveyPolygonVertexesPositions.length >= 3"
+      v-tooltip="'Generate waypoints'"
+      :style="confirmButtonStyle"
+      class="absolute text-[22px] bg-transparent rounded-full cursor-pointer elevation-4"
+      variant="text"
+      @click="generateWaypointsFromSurvey"
+    >
+      <v-icon color="green" class="border-2 rounded-full bg-white">mdi-check-circle</v-icon>
+    </div>
+    <div
+      v-if="isCreatingSurvey && surveyPolygonVertexesPositions.length >= 3"
+      v-tooltip="'Scan density'"
+      :style="confirmButtonStyle"
+      class="absolute mt-[73px] ml-[10px] rounded-lg elevation-4"
+      variant="text"
+    >
+      <input
+        v-model.number="distanceBetweenSurveyLines"
+        class="rounded-lg bg-[#333333EE] text-white w-12 pl-2 pa-0"
+        type="number"
+        min="1"
+      />
+    </div>
+    <div
+      v-if="isCreatingSurvey && surveyPolygonVertexesPositions.length >= 3"
+      v-tooltip="'Clear survey'"
+      :style="confirmButtonStyle"
+      class="absolute text-[14px] mt-[130px] ml-[3px] bg-transparent rounded-full cursor-pointer elevation-4"
+      variant="text"
+      @click="clearSurveyCreation"
+    >
+      <v-icon color="white" class="border-2 rounded-full bg-red">mdi-close</v-icon>
+    </div>
+    <div
+      v-if="isCreatingSurvey && surveyPolygonVertexesPositions.length >= 3"
+      :style="confirmButtonStyle"
+      class="absolute central-element flex justify-start items-start mt-12 -ml-[80px]"
+    >
+      <WindDirectionDial v-model:angle="surveyLinesAngle" polygon-state auto-update />
+    </div>
+
     <div
       v-show="!interfaceStore.isMainMenuVisible"
       class="absolute flex flex-col left-10 rounded-[10px]"
@@ -24,21 +66,20 @@
         <button
           v-if="!isCreatingSurvey && !isCreatingSimpleMission"
           :class="{ ' elevation-4': isCreatingSimpleMission }"
-          class="h-auto py-2 px-2 m-2 font-medium text-md rounded-md elevation-1 bg-[#FFFFFF33] hover:bg-[#FFFFFF44] transition-colors duration-200"
+          class="h-auto py-2 px-2 m-2 mb-3 font-medium text-md rounded-md elevation-1 bg-[#FFFFFF33] hover:bg-[#FFFFFF44] transition-colors duration-200"
           @click="toggleSimpleMission"
         >
-          {{ missionStore.currentPlanningWaypoints.length > 0 ? 'ADD MISSION' : 'CREATE MISSION' }}
+          {{ missionStore.currentPlanningWaypoints.length > 0 ? 'ADD SIMPLE PATH' : 'CREATE SIMPLE PATH' }}
         </button>
-        <v-divider v-if="!isCreatingSimpleMission" class="my-2" />
         <div v-if="isCreatingSurvey" class="flex flex-col">
-          <p class="m-1 overflow-visible text-sm text-slate-200">Distance between lines (m)</p>
+          <p class="m-1 overflow-visible text-sm text-slate-200">Scan density (m)</p>
           <input
             v-model.number="distanceBetweenSurveyLines"
             class="px-2 py-1 m-1 mx-5 rounded-sm bg-[#FFFFFF22]"
             type="number"
             min="1"
           />
-          <p class="m-1 overflow-visible text-sm text-slate-200">Lines angle (degrees)</p>
+          <p class="m-1 overflow-visible text-sm text-slate-200">Scanning angle (deg)</p>
           <input
             v-model.number="surveyLinesAngle"
             class="px-2 py-1 m-1 mx-5 rounded-sm bg-[#FFFFFF22]"
@@ -97,20 +138,14 @@
           </select>
           <p class="m-1 overflow-visible mt-2 text-sm text-slate-200">Default cruise speed (m/s)</p>
           <input v-model="defaultCruiseSpeed" class="px-2 py-1 mt-1 mb-2 mx-5 rounded-sm bg-[#FFFFFF22]" />
-          <v-divider class="my-2" />
-          <button
-            :disabled="missionStore.currentPlanningWaypoints.length < 2"
-            class="bg-[#FFFFFF33] hover:bg-[#FFFFFF44] text-[12px] mx-8 py-2 rounded-sm my-2"
-            :class="{ 'bg-[#FFFFFF11] text-[#FFFFFF22]': missionStore.currentPlanningWaypoints.length < 2 }"
-            @click="toggleSimpleMission"
-          >
-            ADD TO MISSION
-          </button>
+          <div class="flex w-full justify-end">
+            <v-btn variant="text" size="small" @click="toggleSimpleMission"> close </v-btn>
+          </div>
+          <v-divider class="mt-2 mb-1" />
         </div>
-
         <div>
-          <div class="flex justify-end mt-2 mb-2">
-            <v-tooltip location="top" text="Save mission to file">
+          <div class="flex justify-end mb-1">
+            <v-tooltip location="top" text="Save paths to file">
               <template v-if="missionStore.currentPlanningWaypoints.length > 0" #activator="{ props }">
                 <v-btn
                   v-bind="props"
@@ -123,7 +158,7 @@
               </template>
             </v-tooltip>
             <v-divider v-if="missionStore.currentPlanningWaypoints.length > 0" vertical />
-            <v-tooltip location="top" text="Load mission from file">
+            <v-tooltip location="top" text="Load vehicle path from file">
               <template #activator="{ props }">
                 <label v-bind="props">
                   <input type="file" accept=".cmp" hidden @change="(e) => loadMissionFromFile(e)" />
@@ -162,30 +197,44 @@
       </div>
     </div>
     <div
-      v-if="missionStore.currentPlanningWaypoints.length > 0"
-      class="absolute flex flex-col right-8 m-4 p-2 rounded-[16px] max-h-[70%] w-52"
+      v-if="selectedSurvey && selectedSurvey.waypoints.length > 0"
+      class="absolute right-8 m-4 rounded-[16px] max-h-[70%] w-52 overflow-y-auto"
       :style="interfaceStore.globalGlassMenuStyles"
     >
-      <div class="flex flex-col w-full h-full p-2 overflow-y-auto">
-        <p v-if="missionStore.currentPlanningWaypoints.length === 0" class="text-lg text-center text-slate-100">
-          No waypoints added to the mission.
-        </p>
-        <div v-for="(waypoint, index) in missionStore.currentPlanningWaypoints" :key="waypoint.id">
-          <div class="flex w-full items-center justify-between px-1">
-            <div>
-              <p class="text-base text-slate-100">Waypoint {{ index }} ({{ waypoint.type }})</p>
-              <p class="text-sm text-slate-200">Altitude: {{ waypoint.altitude }} m</p>
+      <ExpansiblePanel
+        no-bottom-divider
+        no-top-divider
+        compact
+        class="flex ex-col w-full max-h-[69%] p-2 overflow-y-auto"
+      >
+        <template #title
+          ><p class="flex w-full justify-center">{{ selectedSurvey?.waypoints.length }} Waypoints:</p></template
+        >
+        <template #content>
+          <p v-if="selectedSurvey?.waypoints.length === 0" class="text-lg text-center text-slate-100">
+            No waypoints added to the mission.
+          </p>
+          <div
+            v-for="(waypoint, index) in selectedSurvey?.waypoints"
+            :key="waypoint.id"
+            class="flex flex-col h-full overflow-y-auto"
+          >
+            <div class="flex w-full items-center justify-between px-1">
+              <div>
+                <p class="text-base text-slate-100">Waypoint {{ index }} ({{ waypoint.type }})</p>
+                <p class="text-sm text-slate-200">Altitude: {{ waypoint.altitude }} m</p>
+              </div>
+              <button class="flex items-center justify-center w-6 h-6 m-2 rounded-sm" @click="removeWaypoint(waypoint)">
+                <v-icon>mdi-delete</v-icon>
+              </button>
             </div>
-            <button class="flex items-center justify-center w-6 h-6 m-2 rounded-sm" @click="removeWaypoint(waypoint)">
-              <v-icon>mdi-delete</v-icon>
-            </button>
+            <div
+              v-if="selectedSurvey && index !== selectedSurvey.waypoints.length - 1"
+              class="w-full h-px my-3 bg-[#FFFFFF33]"
+            />
           </div>
-          <div
-            v-if="index !== missionStore.currentPlanningWaypoints.length - 1"
-            class="w-full h-px my-3 bg-[#FFFFFF33]"
-          />
-        </div>
-      </div>
+        </template>
+      </ExpansiblePanel>
     </div>
     <v-tooltip location="top center" text="Home position is currently undefined" :disabled="Boolean(home)">
       <template #activator="{ props: tooltipProps }">
@@ -237,6 +286,13 @@
       Uploading mission to vehicle...
     </p>
   </div>
+
+  <ContextMenu
+    :visible="contextMenuVisible"
+    :position="contextMenuPosition"
+    :selected-survey-id="selectedSurvey?.id"
+    @close="contextMenuVisible = false"
+  />
 </template>
 
 <script setup lang="ts">
@@ -244,12 +300,14 @@ import 'leaflet/dist/leaflet.css'
 
 import { useWindowSize } from '@vueuse/core'
 import { saveAs } from 'file-saver'
-import L, { type LatLngTuple, Map, Marker } from 'leaflet'
+import L, { type LatLngTuple, LeafletMouseEvent, Map, Marker, Polygon } from 'leaflet'
 import { v4 as uuid } from 'uuid'
 import type { Ref } from 'vue'
-import { computed, onMounted, onUnmounted, ref, toRaw, watch } from 'vue'
+import { computed, nextTick, onMounted, onUnmounted, provide, ref, toRaw, watch } from 'vue'
 
+import ExpansiblePanel from '@/components/ExpansiblePanel.vue'
 import { useInteractionDialog } from '@/composables/interactionDialog'
+import { useSnackbar } from '@/composables/snackbar'
 import { TargetFollower, WhoToFollow } from '@/libs/utils-map'
 import { generateSurveyPath } from '@/libs/utils-map'
 import { useAppInterfaceStore } from '@/stores/appInterface'
@@ -262,9 +320,13 @@ import {
   type WaypointCoordinates,
   AltitudeReferenceType,
   instanceOfCockpitMission,
+  Survey,
+  SurveyPolygon,
   WaypointType,
 } from '@/types/mission'
 
+import ContextMenu from './ContextMenu.vue'
+import WindDirectionDial from './ScanDirectionDial.vue'
 const missionStore = useMissionStore()
 const vehicleStore = useMainVehicleStore()
 const interfaceStore = useAppInterfaceStore()
@@ -272,6 +334,7 @@ const widgetStore = useWidgetManagerStore()
 const { height: windowHeight } = useWindowSize()
 
 const { showDialog } = useInteractionDialog()
+const { showSnackbar } = useSnackbar()
 
 const clearMissionOnVehicle = (): void => {
   vehicleStore.clearMissions()
@@ -283,9 +346,11 @@ const calculatedHeight = computed(() => {
 
 const uploadingMission = ref(false)
 const missionUploadProgress = ref(0)
+
 const uploadMissionToVehicle = async (): Promise<void> => {
   uploadingMission.value = true
   missionUploadProgress.value = 0
+
   const loadingCallback = async (loadingPerc: number): Promise<void> => {
     missionUploadProgress.value = loadingPerc
   }
@@ -314,21 +379,391 @@ const defaultCruiseSpeed = ref(1)
 const currentWaypointAltitudeRefType = ref<AltitudeReferenceType>(AltitudeReferenceType.RELATIVE_TO_HOME)
 const waypointMarkers = ref<{ [id: string]: Marker }>({})
 const isCreatingSimpleMission = ref(false)
+const selectedSurveyId = ref(missionStore.surveys[0]?.id || '')
+const selectedSurvey = computed(() => {
+  return missionStore.surveys.find((survey) => survey.id === selectedSurveyId.value)
+})
+const surveyPolygonLayers = ref<{ [key: string]: Polygon }>({})
+const contextMenuVisible = ref(false)
+const contextMenuPosition = ref({ x: 0, y: 0 })
+const isCreatingSurvey = ref(false)
+const surveyPolygonVertexesPositions = ref<L.LatLng[]>([])
+const surveyPolygonVertexesMarkers = ref<L.Marker[]>([])
+const rawDistanceBetweenSurveyLines = ref(10)
+const rawSurveyLinesAngle = ref(0)
+const existingWaypoints = ref<Waypoint[]>([])
+const surveyWaypoints = ref<Waypoint[]>([])
+const confirmButtonStyle = ref<Record<string, string>>({})
+const isDragging = ref(false)
+let dragStartLatLng: L.LatLng | null = null
+let polygonLatLngsAtDragStart: L.LatLng[] = []
+let ignoreNextClick = false
+const canUndo = ref<Record<string, boolean>>({})
+const undoIsInProgress = ref(false)
+const lastSurveyState = ref<Record<string, SurveyPolygon>>({})
+const lastSelectedSurveyId = ref('')
+
+const onPolygonMouseDown = (event: L.LeafletMouseEvent): void => {
+  isDragging.value = true
+  dragStartLatLng = event.latlng
+  polygonLatLngsAtDragStart = surveyPolygonVertexesPositions.value.map((latlng) => latlng.clone())
+  planningMap.value?.dragging.disable()
+
+  planningMap.value?.on('mousemove', onPolygonMouseMove)
+  planningMap.value?.on('mouseup', onPolygonMouseUp)
+
+  L.DomEvent.stopPropagation(event.originalEvent)
+  L.DomEvent.preventDefault(event.originalEvent)
+}
+
+const onPolygonMouseUp = (event: L.LeafletMouseEvent): void => {
+  isDragging.value = false
+  dragStartLatLng = null
+  polygonLatLngsAtDragStart = []
+  planningMap.value?.dragging.enable()
+
+  planningMap.value?.off('mousemove', onPolygonMouseMove)
+  planningMap.value?.off('mouseup', onPolygonMouseUp)
+
+  ignoreNextClick = true
+
+  L.DomEvent.stopPropagation(event.originalEvent)
+  L.DomEvent.preventDefault(event.originalEvent)
+}
+
+const onPolygonMouseMove = (event: L.LeafletMouseEvent): void => {
+  if (!isDragging.value || !dragStartLatLng) return
+
+  const latDiff = event.latlng.lat - dragStartLatLng.lat
+  const lngDiff = event.latlng.lng - dragStartLatLng.lng
+
+  surveyPolygonVertexesPositions.value = polygonLatLngsAtDragStart.map((latlng) =>
+    L.latLng(latlng.lat + latDiff, latlng.lng + lngDiff)
+  )
+
+  surveyPolygonLayer.value?.setLatLngs(surveyPolygonVertexesPositions.value)
+  surveyPolygonVertexesMarkers.value.forEach((marker, index) => {
+    marker.setLatLng(surveyPolygonVertexesPositions.value[index])
+  })
+
+  updateSurveyEdgeAddMarkers()
+  createSurveyPath()
+  updateConfirmButtonPosition()
+
+  L.DomEvent.stopPropagation(event.originalEvent)
+  L.DomEvent.preventDefault(event.originalEvent)
+}
+
+const enablePolygonDragging = (): void => {
+  if (surveyPolygonLayer.value) {
+    surveyPolygonLayer.value.off('mousedown', onPolygonMouseDown)
+    surveyPolygonLayer.value.on('mousedown', onPolygonMouseDown)
+  }
+}
+
+const disablePolygonDragging = (): void => {
+  if (surveyPolygonLayer.value) {
+    surveyPolygonLayer.value.off('mousedown', onPolygonMouseDown)
+  }
+}
+
+const showContextMenu = (event: LeafletMouseEvent): void => {
+  if (isCreatingSurvey.value) return
+  event.originalEvent.preventDefault()
+  contextMenuPosition.value = {
+    x: event.originalEvent.clientX,
+    y: event.originalEvent.clientY,
+  }
+  contextMenuVisible.value = true
+}
+
+const hideContextMenu = (): void => {
+  contextMenuVisible.value = false
+}
+
+const handleKeyDown = (event: KeyboardEvent): void => {
+  if (event.key === 'Escape' && isCreatingSurvey.value) {
+    clearSurveyCreation()
+  }
+  if (event.key === 'Enter' && isCreatingSurvey.value) {
+    generateWaypointsFromSurvey()
+  }
+  if (
+    event.ctrlKey &&
+    event.key.toLowerCase() === 'z' &&
+    canUndo.value[selectedSurveyId.value] &&
+    !undoIsInProgress.value
+  ) {
+    undoGenerateWaypoints()
+    event.preventDefault()
+  }
+}
+
+const clearSurveyCreation = (): void => {
+  clearSurveyPath()
+  isCreatingSurvey.value = false
+  lastSurveyState.value = {}
+  canUndo.value = {}
+}
+
+onMounted(() => {
+  window.addEventListener('keydown', handleKeyDown)
+})
+
+onMounted(async () => {
+  await nextTick()
+  if (planningMap.value) {
+    planningMap.value?.on('click', () => {
+      selectedSurveyId.value = ''
+    })
+    planningMap.value.on('contextmenu', showContextMenu)
+    planningMap.value.on('click', hideContextMenu)
+  }
+})
+
+const addSurveyPolygonToMap = (survey: Survey): void => {
+  if (!planningMap.value) return
+
+  const surveyPolygonLayer = L.polygon(
+    survey.polygonCoordinates.map((coord) => [coord[0], coord[1]]),
+    {
+      color: survey.id === selectedSurveyId.value ? '#FFD700' : '#3B82F6',
+      fillColor: survey.id === selectedSurveyId.value ? '#FFD700' : '#60A5FA',
+      fillOpacity: 0.2,
+      weight: 3,
+      className: 'survey-polygon',
+    }
+  ).addTo(planningMap.value)
+
+  surveyPolygonLayers.value[survey.id] = surveyPolygonLayer
+
+  surveyPolygonLayer.on('click', (event: LeafletMouseEvent) => {
+    if (isCreatingSimpleMission.value) return
+    selectedSurveyId.value = survey.id
+    lastSelectedSurveyId.value = survey.id
+    L.DomEvent.stopPropagation(event)
+  })
+
+  surveyPolygonLayer.on('contextmenu', (event: LeafletMouseEvent) => {
+    if (selectedSurveyId.value !== survey.id && !isCreatingSimpleMission.value) {
+      selectedSurveyId.value = survey.id
+      lastSelectedSurveyId.value = survey.id
+    }
+
+    L.DomEvent.stopPropagation(event.originalEvent)
+    L.DomEvent.preventDefault(event.originalEvent)
+
+    showContextMenu(event)
+  })
+
+  let pressTimer: number | null = null
+  const LONG_PRESS_DURATION = 500
+
+  const handleTouchStart = (event: TouchEvent): void => {
+    if (isCreatingSimpleMission.value) return
+
+    event.preventDefault()
+
+    pressTimer = window.setTimeout(() => {
+      if (selectedSurveyId.value !== survey.id) {
+        selectedSurveyId.value = survey.id
+      }
+      const touch = event.touches[0]
+      const x = touch.clientX
+      const y = touch.clientY
+
+      contextMenuPosition.value = { x, y }
+      contextMenuVisible.value = true
+    }, LONG_PRESS_DURATION)
+  }
+
+  const handleTouchEnd = (): void => {
+    if (pressTimer) {
+      clearTimeout(pressTimer)
+      pressTimer = null
+    }
+  }
+
+  surveyPolygonLayer.on('touchstart', handleTouchStart as any) // eslint-disable @typescript-eslint/no-explicit-any
+  surveyPolygonLayer.on('touchend', handleTouchEnd)
+  surveyPolygonLayer.on('touchcancel', handleTouchEnd)
+}
+
+watch(
+  () => missionStore.surveys.slice(),
+  (newSurveys) => {
+    Object.values(surveyPolygonLayers.value).forEach((layer) => {
+      planningMap.value?.removeLayer(layer)
+    })
+    surveyPolygonLayers.value = {}
+
+    newSurveys.forEach((survey) => {
+      addSurveyPolygonToMap(survey)
+    })
+  },
+  { immediate: true }
+)
+
+watch(selectedSurveyId, (newId, oldId) => {
+  if (oldId && surveyPolygonLayers.value[oldId]) {
+    surveyPolygonLayers.value[oldId].setStyle({
+      color: '#3B82F6',
+      fillColor: '#60A5FA',
+    })
+  }
+
+  if (newId && surveyPolygonLayers.value[newId]) {
+    surveyPolygonLayers.value[newId].setStyle({
+      color: '#FFD700',
+      fillColor: '#FFD700',
+    })
+  }
+})
+
+onUnmounted(() => {
+  window.removeEventListener('keydown', handleKeyDown)
+  Object.values(surveyPolygonLayers.value).forEach((layer) => {
+    layer.off('click')
+    planningMap.value?.removeLayer(layer)
+  })
+  surveyPolygonLayers.value = {}
+})
+
+const regenerateSurveyWaypoints = (angle?: number): void => {
+  if (!selectedSurvey.value) {
+    showSnackbar({ variant: 'error', message: 'No survey selected.', duration: 2000 })
+    return
+  }
+
+  // Remove old waypoint markers
+  selectedSurvey.value.waypoints.forEach((waypoint) => {
+    const marker = waypointMarkers.value[waypoint.id]
+    if (marker) {
+      planningMap.value?.removeLayer(marker)
+      delete waypointMarkers.value[waypoint.id]
+    }
+  })
+
+  // Generate new waypoints based on the adjusted angle
+  const adjustedAngle = 90 - (angle || selectedSurvey.value.surveyLinesAngle)
+  const continuousPath = generateSurveyPath(
+    selectedSurvey.value.polygonCoordinates.map((coord) => L.latLng(coord[0], coord[1])),
+    selectedSurvey.value.distanceBetweenLines,
+    adjustedAngle
+  )
+
+  if (!continuousPath.length) {
+    showSnackbar({
+      message: 'No valid path could be generated. Try adjusting the angle or distance between lines.',
+      closeButton: true,
+      duration: 2000,
+    })
+    return
+  }
+
+  // Create new waypoints without assigning numbers yet
+  const newWaypoints: Waypoint[] = continuousPath.map((latLng: L.LatLng) => ({
+    id: uuid(),
+    coordinates: [latLng.lat, latLng.lng],
+    altitude: currentWaypointAltitude.value,
+    type: currentWaypointType.value,
+    altitudeReferenceType: currentWaypointAltitudeRefType.value,
+  }))
+
+  // Find the starting index of the old waypoints in the mission's waypoint list
+  const firstOldWaypointIndex = missionStore.currentPlanningWaypoints.findIndex(
+    (wp) => wp.id === selectedSurvey.value!.waypoints[0].id
+  )
+
+  if (firstOldWaypointIndex === -1) {
+    showSnackbar({ variant: 'error', message: 'Failed to find old waypoints.', duration: 2000 })
+    return
+  }
+
+  // Replace old waypoints with new ones at the same position
+  missionStore.currentPlanningWaypoints.splice(
+    firstOldWaypointIndex,
+    selectedSurvey.value.waypoints.length,
+    ...newWaypoints
+  )
+
+  // Update the selected survey with new waypoints and angle
+  selectedSurvey.value.waypoints = newWaypoints
+  selectedSurvey.value.surveyLinesAngle = angle || selectedSurvey.value.surveyLinesAngle
+  missionStore.updateSurvey(selectedSurveyId.value, { ...selectedSurvey.value })
+
+  // Add markers for the new waypoints
+  newWaypoints.forEach((waypoint) => addWaypointMarker(waypoint))
+
+  // Re-number all waypoints to maintain sequential order
+  reNumberWaypoints()
+
+  showSnackbar({ variant: 'success', message: 'Waypoints regenerated with new angle.', duration: 1000 })
+}
+
+const addWaypointMarker = (waypoint: Waypoint): void => {
+  if (!planningMap.value) return
+
+  const newMarker = L.marker(waypoint.coordinates, { draggable: true })
+
+  newMarker.on('drag', () => {
+    const latlng = newMarker.getLatLng()
+    missionStore.moveWaypoint(waypoint.id, [latlng.lat, latlng.lng])
+  })
+
+  newMarker.on('dragend', () => {
+    const latlng = newMarker.getLatLng()
+    missionStore.moveWaypoint(waypoint.id, [latlng.lat, latlng.lng])
+  })
+
+  newMarker.on('contextmenu', () => {
+    removeWaypoint(waypoint)
+  })
+
+  const markerIcon = L.divIcon({
+    className: 'marker-icon',
+    iconSize: [16, 16],
+    iconAnchor: [8, 8],
+  })
+  newMarker.setIcon(markerIcon)
+
+  const markerTooltip = L.tooltip({
+    content: '', // Will be updated in reNumberWaypoints()
+    permanent: true,
+    direction: 'center',
+    className: 'waypoint-tooltip',
+    opacity: 1,
+  })
+  newMarker.bindTooltip(markerTooltip)
+
+  newMarker.addTo(planningMap.value)
+  waypointMarkers.value[waypoint.id] = newMarker
+}
 
 const toggleSimpleMission = (): void => {
+  if (isCreatingSurvey.value) {
+    isCreatingSurvey.value = false
+  }
   if (isCreatingSimpleMission.value) {
     isCreatingSimpleMission.value = false
     return
   }
   isCreatingSimpleMission.value = true
+  hideContextMenu()
 }
 
 const toggleSurvey = (): void => {
+  if (isCreatingSimpleMission.value) {
+    isCreatingSimpleMission.value = false
+  }
   if (isCreatingSurvey.value) {
     isCreatingSurvey.value = false
+    lastSurveyState.value = {}
+    canUndo.value = {}
     return
   }
   isCreatingSurvey.value = true
+  hideContextMenu()
 }
 
 const targetFollower = new TargetFollower(
@@ -346,8 +781,11 @@ const goHome = async (): Promise<void> => {
 
 watch(mapCenter, (newCenter, oldCenter) => {
   if (newCenter.toString() === oldCenter.toString()) return
-  planningMap.value?.panTo(newCenter as LatLngTuple)
+  if (planningMap.value && planningMap.value.panTo) {
+    planningMap.value.panTo(newCenter as LatLngTuple)
+  }
 })
+
 watch(zoom, (newZoom, oldZoom) => {
   if (newZoom === oldZoom) return
   planningMap.value?.setZoom(zoom.value)
@@ -359,44 +797,26 @@ const addWaypoint = (
   type: WaypointType,
   altitudeReferenceType: AltitudeReferenceType
 ): void => {
-  if (planningMap.value === undefined) throw new Error('Map not yet defined')
-
-  const waypointId = uuid()
-  const waypoint: Waypoint = { id: waypointId, coordinates, altitude, type, altitudeReferenceType }
+  if (!isDragging.value) {
+    if (planningMap.value === undefined) throw new Error('Map not yet defined')
 
-  missionStore.currentPlanningWaypoints.push(waypoint)
+    const waypointId = uuid()
 
-  const newMarker = L.marker(coordinates, { draggable: true })
-  // @ts-ignore - onMove is a valid LeafletMouseEvent
-  newMarker.on('move', (e: L.LeafletMouseEvent) => {
-    missionStore.moveWaypoint(waypointId, [e.latlng.lat, e.latlng.lng])
-  })
-  newMarker.on('contextmenu', () => {
-    removeWaypoint(waypoint)
-  })
+    const waypoint: Waypoint = {
+      id: waypointId,
+      coordinates,
+      altitude,
+      type,
+      altitudeReferenceType,
+      // 'number' will be assigned in reNumberWaypoints()
+    }
 
-  const markerIcon = L.divIcon({
-    className: 'marker-icon',
-    iconSize: [16, 16],
-    iconAnchor: [8, 8],
-  })
-  newMarker.setIcon(markerIcon)
-  const markerTooltip = L.tooltip({
-    content: `${missionStore.currentPlanningWaypoints.length}`,
-    permanent: true,
-    direction: 'center',
-    className: 'waypoint-tooltip',
-    opacity: 1,
-  })
-  newMarker.bindTooltip(markerTooltip)
-  planningMap.value.addLayer(newMarker)
-  waypointMarkers.value[waypointId] = newMarker
+    missionStore.currentPlanningWaypoints.push(waypoint)
 
-  const existingWaypointsCount = missionStore.currentPlanningWaypoints.length
+    addWaypointMarker(waypoint)
 
-  if (existingWaypointsCount > 1) {
-    const previousWaypoint = missionStore.currentPlanningWaypoints[existingWaypointsCount - 2]
-    addWaypointConnection(previousWaypoint, waypoint)
+    // Re-number waypoints after adding a new one
+    reNumberWaypoints()
   }
 }
 
@@ -427,11 +847,19 @@ const saveMissionToFile = async (): Promise<void> => {
   saveAs(blob, 'mission_plan.cmp')
 }
 
+const reNumberWaypoints = (): void => {
+  missionStore.currentPlanningWaypoints.forEach((wp, index) => {
+    const marker = waypointMarkers.value[wp.id]
+    if (marker) {
+      marker.getTooltip()?.setContent(`${index + 1}`)
+    }
+  })
+}
+
 const loadMissionFromFile = async (e: Event): Promise<void> => {
   const reader = new FileReader()
-  reader.onload = (event: Event) => {
-    // @ts-ignore: We know the event type and need refactor of the event typing
-    const contents = event.target.result
+  reader.onload = (event: ProgressEvent<FileReader>) => {
+    const contents = event.target?.result as string
     const maybeMission = JSON.parse(contents)
     if (!instanceOfCockpitMission(maybeMission)) {
       showDialog({ variant: 'error', message: 'Invalid mission file.', timer: 3000 })
@@ -443,22 +871,21 @@ const loadMissionFromFile = async (e: Event): Promise<void> => {
     currentWaypointAltitude.value = maybeMission['settings']['currentWaypointAltitude']
     currentWaypointAltitudeRefType.value = maybeMission['settings']['currentWaypointAltitudeRefType']
     defaultCruiseSpeed.value = maybeMission['settings']['defaultCruiseSpeed']
-    maybeMission['waypoints'].forEach((w: Waypoint) => {
-      addWaypoint(w.coordinates, w.altitude, w.type, w.altitudeReferenceType)
+    maybeMission.waypoints.forEach((w: Waypoint) => {
+      const waypoint: Waypoint = {
+        ...w,
+        id: uuid(),
+      }
+      missionStore.currentPlanningWaypoints.push(waypoint)
+      addWaypointMarker(waypoint)
     })
   }
-  // @ts-ignore: We know the event type and need refactor of the event typing
-  reader.readAsText(e.target.files[0])
+  const input = e.target as HTMLInputElement
+  if (input.files && input.files[0]) {
+    reader.readAsText(input.files[0])
+  }
 }
 
-const isCreatingSurvey = ref(false)
-const surveyPolygonVertexesPositions = ref<L.LatLng[]>([])
-const surveyPolygonVertexesMarkers = ref<L.Marker[]>([])
-const rawDistanceBetweenSurveyLines = ref(10)
-const rawSurveyLinesAngle = ref(0)
-const existingWaypoints = ref<Waypoint[]>([])
-const surveyWaypoints = ref<Waypoint[]>([])
-
 // Distance between lines in the survey path
 const distanceBetweenSurveyLines = computed({
   get: () => Math.max(1, rawDistanceBetweenSurveyLines.value),
@@ -480,6 +907,7 @@ const clearSurveyPath = (): void => {
     surveyPathLayer.value = null
   }
   if (surveyPolygonLayer.value) {
+    disablePolygonDragging()
     planningMap.value?.removeLayer(surveyPolygonLayer.value as unknown as L.Layer)
     surveyPolygonLayer.value = null
   }
@@ -512,6 +940,7 @@ const updateSurveyMarkersPositions = (): void => {
 
 const updatePolygon = (): void => {
   surveyPolygonVertexesPositions.value = surveyPolygonVertexesMarkers.value.map((marker) => marker.getLatLng())
+
   if (surveyPolygonLayer.value) {
     surveyPolygonLayer.value.setLatLngs(surveyPolygonVertexesPositions.value)
   } else if (surveyPolygonVertexesPositions.value.length >= 3) {
@@ -522,7 +951,10 @@ const updatePolygon = (): void => {
       weight: 3,
       className: 'survey-polygon',
     }).addTo(toRaw(planningMap.value)!)
+
+    enablePolygonDragging()
   }
+
   updateSurveyMarkersPositions()
 }
 
@@ -539,10 +971,11 @@ const createSurveyPath = (): void => {
   }
 
   try {
+    const adjustedAngle = 90 - surveyLinesAngle.value
     const continuousPath = generateSurveyPath(
       surveyPolygonVertexesPositions.value,
       distanceBetweenSurveyLines.value,
-      surveyLinesAngle.value
+      adjustedAngle
     )
 
     if (continuousPath.length === 0) {
@@ -573,7 +1006,6 @@ const createSurveyPath = (): void => {
   }
 }
 
-// Watch for changes in distanceBetweenSurveyLines and surveyLinesAngle
 watch([distanceBetweenSurveyLines, surveyLinesAngle], () => createSurveyPath())
 
 const surveyEdgeAddMarkers: L.Marker[] = []
@@ -593,11 +1025,11 @@ const updateSurveyEdgeAddMarkers = (): void => {
       const surveyEdgeAddMarker = L.marker(middle, {
         icon: L.divIcon({
           html: `
-            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" style="display: block;">
-              <circle cx="10" cy="10" r="9" fill="white" stroke="#3B82F6" stroke-width="2"/>
-              <path d="M10 5V15M5 10H15" stroke="#3B82F6" stroke-width="2"/>
-            </svg>
-          `,
+              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" style="display: block;">
+                <circle cx="10" cy="10" r="9" fill="white" stroke="#3B82F6" stroke-width="2"/>
+                <path d="M10 5V15M5 10H15" stroke="#3B82F6" stroke-width="2"/>
+              </svg>
+            `,
           className: 'edge-marker',
           iconSize: [20, 20],
           iconAnchor: [10, 10],
@@ -622,19 +1054,19 @@ const addSurveyPoint = (latlng: L.LatLng, edgeIndex: number | undefined = undefi
   const newMarker = L.marker(latlng, {
     icon: L.divIcon({
       html: `
-        <div class="survey-vertex-icon">
-          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <circle cx="12" cy="12" r="5" fill="#3B82F6" stroke="white" stroke-width="2"/>
-          </svg>
-          <div class="delete-popup" style="display: none;">
-            <button class="delete-button">
-              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path d="M2 4h12M4 4v10a2 2 0 002 2h4a2 2 0 002-2V4M6 4V2h4v2" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-              </svg>
-            </button>
+          <div class="survey-vertex-icon">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <circle cx="12" cy="12" r="5" fill="#3B82F6" stroke="white" stroke-width="2"/>
+            </svg>
+            <div class="delete-popup" style="display: none;">
+              <button class="delete-button">
+                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M2 4h12M4 4v10a2 2 0 002 2h4a2 2 0 002-2V4M6 4V2h4v2" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>
+              </button>
+            </div>
           </div>
-        </div>
-      `,
+        `,
       className: 'custom-div-icon',
       iconSize: [24, 24],
       iconAnchor: [12, 12],
@@ -683,7 +1115,60 @@ const addSurveyPoint = (latlng: L.LatLng, edgeIndex: number | undefined = undefi
   createSurveyPath()
 }
 
-// Save existing waypoints so they won't be reprocessed and will be connected to the new survey
+const calculateBottomRightCorner = (points: L.LatLng[]): L.LatLng | null => {
+  if (points.length === 0) return null
+
+  let bottomRightWaypoint = points[0]
+
+  points.forEach((point) => {
+    if (point.lat <= bottomRightWaypoint.lat && point.lng >= bottomRightWaypoint.lng) {
+      bottomRightWaypoint = point
+    }
+  })
+
+  return bottomRightWaypoint
+}
+
+const updateConfirmButtonPosition = (): void => {
+  if (!planningMap.value) return
+
+  if (isCreatingSurvey.value && surveyPolygonVertexesPositions.value.length >= 3) {
+    const position = calculateBottomRightCorner(surveyPolygonVertexesPositions.value)
+    if (position) {
+      const point = planningMap.value.latLngToContainerPoint(position)
+
+      confirmButtonStyle.value = {
+        left: `${point.x + 62}px`,
+        top: `${point.y + 62}px`,
+      }
+    }
+  } else {
+    confirmButtonStyle.value = { display: 'none' }
+  }
+}
+
+watch(
+  [surveyPolygonVertexesPositions, isCreatingSurvey],
+  () => {
+    updateConfirmButtonPosition()
+  },
+  { immediate: true, deep: true }
+)
+
+onUnmounted(async () => {
+  await nextTick()
+  if (planningMap.value) {
+    setTimeout(() => {
+      planningMap.value?.invalidateSize()
+    }, 100)
+    planningMap.value.off()
+    planningMap.value.remove()
+    planningMap.value = undefined
+  }
+  targetFollower.disableAutoUpdate()
+  missionStore.clearMission()
+})
+
 watch(isCreatingSurvey, (isCreatingNow) => {
   if (isCreatingNow) {
     existingWaypoints.value = [...missionStore.currentPlanningWaypoints]
@@ -694,102 +1179,189 @@ watch(isCreatingSurvey, (isCreatingNow) => {
 })
 
 const generateWaypointsFromSurvey = (): void => {
-  if (!surveyPathLayer.value) {
-    showDialog({ variant: 'error', message: 'No survey path to generate waypoints from.', timer: 3000 })
+  if (!surveyPolygonVertexesPositions.value.length) {
+    console.log('No survey polygon defined.')
     return
   }
 
-  const surveyLatLngs = surveyPathLayer.value.getLatLngs()
-  if (!Array.isArray(surveyLatLngs) || surveyLatLngs.length === 0) {
-    showDialog({ variant: 'error', message: 'Invalid survey path.', timer: 3000 })
+  const newSurveyId = uuid()
+
+  lastSurveyState.value[newSurveyId] = {
+    polygonPositions: [...surveyPolygonVertexesPositions.value],
+    polygonMarkers: [...(surveyPolygonVertexesMarkers.value as L.Marker<any>[])],
+    edgeMarkers: [...(surveyEdgeAddMarkers as L.Marker<any>[])],
+    distanceBetweenLines: distanceBetweenSurveyLines.value,
+    surveyLinesAngle: surveyLinesAngle.value,
+  }
+  canUndo.value[newSurveyId] = true
+
+  const polygonCoordinates: WaypointCoordinates[] = surveyPolygonVertexesPositions.value.map((latLng) => [
+    latLng.lat,
+    latLng.lng,
+  ])
+
+  // Generate new waypoints
+  const adjustedAngle = 90 - surveyLinesAngle.value
+  const continuousPath = generateSurveyPath(
+    surveyPolygonVertexesPositions.value,
+    distanceBetweenSurveyLines.value,
+    adjustedAngle
+  )
+
+  if (!continuousPath.length) {
+    showDialog({
+      variant: 'error',
+      message: 'No valid path could be generated. Try adjusting the angle or distance between lines.',
+      timer: 3000,
+    })
     return
   }
 
-  surveyWaypoints.value = []
-  // @ts-ignore: L.LatLng is not assignable to LatLngTuple
-  surveyLatLngs.flat().forEach((latLng: L.LatLng, index: number) => {
-    const waypointId = uuid()
-    const waypoint: Waypoint = {
-      id: waypointId,
-      coordinates: [latLng.lat, latLng.lng],
-      altitude: currentWaypointAltitude.value,
-      type: WaypointType.PASS_BY,
-      altitudeReferenceType: currentWaypointAltitudeRefType.value,
-    }
-    surveyWaypoints.value.push(waypoint)
-    addWaypoint(waypoint.coordinates, waypoint.altitude, waypoint.type, waypoint.altitudeReferenceType)
+  const newSurveyWaypoints: Waypoint[] = continuousPath.map((latLng: L.LatLng) => ({
+    id: uuid(),
+    coordinates: [latLng.lat, latLng.lng],
+    altitude: currentWaypointAltitude.value,
+    type: currentWaypointType.value,
+    altitudeReferenceType: currentWaypointAltitudeRefType.value,
+  }))
+
+  // Decide the insertion index for the new waypoints
+  const insertionIndex = missionStore.currentPlanningWaypoints.length
+
+  // Insert new waypoints into missionStore.currentPlanningWaypoints
+  missionStore.currentPlanningWaypoints.splice(insertionIndex, 0, ...newSurveyWaypoints)
+
+  // Create new survey object
+  const newSurvey: Survey = {
+    id: newSurveyId,
+    polygonCoordinates: polygonCoordinates,
+    distanceBetweenLines: distanceBetweenSurveyLines.value,
+    surveyLinesAngle: surveyLinesAngle.value,
+    waypoints: newSurveyWaypoints,
+  }
+  missionStore.addSurvey(newSurvey)
+  selectedSurveyId.value = newSurvey.id
+
+  // Add new waypoint markers
+  newSurveyWaypoints.forEach((waypoint) => addWaypointMarker(waypoint))
+
+  clearSurveyPath()
+  isCreatingSurvey.value = false
+  if (undoIsInProgress.value) {
+    undoAndRegenerateAllSurveys()
+    setTimeout(() => {
+      undoIsInProgress.value = false
+    }, 1000)
+  }
+
+  // Re-number all waypoints to maintain sequential order
+  reNumberWaypoints()
+
+  showSnackbar({ variant: 'success', message: 'Waypoints generated from survey path.', duration: 1000 })
+}
+
+const undoGenerateWaypoints = (): void => {
+  if (undoIsInProgress.value) return
+  contextMenuVisible.value = false
+  undoIsInProgress.value = true
+  const surveyId = selectedSurveyId.value
+  if (!surveyId || !canUndo.value[surveyId] || !lastSurveyState.value[surveyId]) {
+    showSnackbar({ variant: 'error', message: 'Nothing to undo.', duration: 2000 })
+    return
+  }
+
+  if (selectedSurvey.value) {
+    selectedSurvey.value.waypoints.forEach((waypoint) => {
+      const index = missionStore.currentPlanningWaypoints.findIndex((wp) => wp.id === waypoint.id)
+      if (index !== -1) {
+        missionStore.currentPlanningWaypoints.splice(index, 1)
+      }
+
+      const marker = waypointMarkers.value[waypoint.id]
+      if (marker) {
+        planningMap.value?.removeLayer(marker)
+        delete waypointMarkers.value[waypoint.id]
+      }
+    })
+  }
 
-    // Connects existing waypoints to the new survey
-    if (index > 0) {
-      const previousWaypoint = surveyWaypoints.value[index - 1]
-      addWaypointConnection(previousWaypoint, waypoint)
+  planningMap.value?.eachLayer((layer) => {
+    if (layer instanceof L.Polyline && layer.options.className === 'waypoint-connection') {
+      planningMap.value?.removeLayer(layer)
     }
   })
 
-  // Also connects existing waypoints to the new survey
-  if (existingWaypoints.value.length > 0 && surveyWaypoints.value.length > 0) {
-    const lastExistingWaypoint = existingWaypoints.value[existingWaypoints.value.length - 1]
-    const firstNewWaypoint = surveyWaypoints.value[0]
-    addWaypointConnection(lastExistingWaypoint, firstNewWaypoint)
+  const index = missionStore.surveys.findIndex((survey) => survey.id === surveyId)
+  if (index !== -1) {
+    missionStore.surveys.splice(index, 1)
   }
+  selectedSurveyId.value = ''
 
-  missionStore.currentPlanningWaypoints = [...existingWaypoints.value, ...surveyWaypoints.value]
+  const surveyState = lastSurveyState.value[surveyId]
+  surveyPolygonVertexesPositions.value = surveyState.polygonPositions
+  surveyPolygonVertexesMarkers.value = []
 
-  // Remove survey path and polygon
-  clearSurveyPath()
-  isCreatingSurvey.value = false
+  surveyState.polygonMarkers.forEach((marker) => {
+    marker.addTo(planningMap.value!)
+    surveyPolygonVertexesMarkers.value.push(marker)
+  })
 
-  showDialog({ variant: 'success', message: 'Waypoints generated from survey path.', timer: 1000 })
-}
+  surveyEdgeAddMarkers.length = 0
+  surveyState.edgeMarkers.forEach((marker) => {
+    marker.addTo(planningMap.value!)
+    surveyEdgeAddMarkers.push(marker)
+  })
 
-// Helper function to connect two waypoints with a polyline
-const addWaypointConnection = (fromWaypoint: Waypoint, toWaypoint: Waypoint): void => {
-  const polyline = L.polyline([fromWaypoint.coordinates, toWaypoint.coordinates], {
+  surveyPolygonLayer.value = L.polygon(surveyPolygonVertexesPositions.value, {
     color: '#3B82F6',
+    fillColor: '#60A5FA',
+    fillOpacity: 0.2,
     weight: 3,
-    opacity: 0.8,
-    className: 'waypoint-connection',
-  })
-  planningMap.value?.addLayer(polyline)
+    className: 'survey-polygon',
+  }).addTo(planningMap.value!)
+
+  surveyLinesAngle.value = surveyState.surveyLinesAngle
+  distanceBetweenSurveyLines.value = surveyState.distanceBetweenLines
+
+  enablePolygonDragging()
+
+  delete lastSurveyState.value[surveyId]
+  delete canUndo.value[surveyId]
+  isCreatingSurvey.value = true
+
+  createSurveyPath()
+  showSnackbar({ variant: 'success', message: 'Undo successful.', duration: 1000 })
 }
 
 onMounted(async () => {
-  const osm = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
-    maxZoom: 19,
-    attribution: '© OpenStreetMap',
-  })
   const esri = L.tileLayer(
     'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
-    { maxZoom: 19, attribution: '© Esri World Imagery' }
+    { maxZoom: 22, maxNativeZoom: 19, attribution: '© Esri World Imagery' }
   )
 
+  const osm = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+    maxZoom: 22,
+    maxNativeZoom: 19,
+    attribution: '© OpenStreetMap',
+  })
+
+  planningMap.value = L.map('planningMap', { layers: [esri] }).setView(mapCenter.value as LatLngTuple, zoom.value)
+
+  planningMap.value.zoomControl.setPosition('bottomright')
+
   const baseMaps = {
     'OpenStreetMap': osm,
     'Esri World Imagery': esri,
   }
 
-  planningMap.value = L.map('planningMap', { layers: [osm, esri] }).setView(mapCenter.value as LatLngTuple, zoom.value)
-  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-    maxZoom: 19,
-    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
-  }).addTo(planningMap.value)
-  planningMap.value.zoomControl.setPosition('bottomright')
+  L.control.layers(baseMaps).addTo(planningMap.value)
 
-  planningMap.value.on('moveend', () => {
-    if (planningMap.value === undefined) return
-    let { lat, lng } = planningMap.value.getCenter()
-    if (lat && lng) {
-      mapCenter.value = [lat, lng]
+  planningMap.value.on('click', (e: L.LeafletMouseEvent) => {
+    if (ignoreNextClick) {
+      ignoreNextClick = false
+      return
     }
-  })
-  planningMap.value.on('zoomend', () => {
-    if (planningMap.value === undefined) return
-    zoom.value = planningMap.value?.getZoom() ?? mapCenter.value
-  })
 
-  await goHome()
-
-  planningMap.value.on('click', (e) => {
     if (isCreatingSurvey.value) {
       addSurveyPoint(e.latlng)
     } else if (isCreatingSimpleMission.value) {
@@ -802,12 +1374,118 @@ onMounted(async () => {
     }
   })
 
-  const layerControl = L.control.layers(baseMaps)
-  planningMap.value.addControl(layerControl)
+  planningMap.value.on('move', updateConfirmButtonPosition)
+  planningMap.value.on('zoom', updateConfirmButtonPosition)
+
+  planningMap.value.on('moveend', () => {
+    if (planningMap.value) {
+      const { lat, lng } = planningMap.value.getCenter()
+      mapCenter.value = [lat, lng]
+    }
+  })
+
+  planningMap.value.on('zoomend', () => {
+    if (planningMap.value) {
+      zoom.value = planningMap.value.getZoom()
+    }
+  })
+
+  await goHome()
 
   targetFollower.enableAutoUpdate()
 })
 
+const deleteSelectedSurvey = (): void => {
+  const surveyId = selectedSurveyId.value
+  if (!surveyId) {
+    showSnackbar({ variant: 'error', message: 'No survey selected to delete.', duration: 2000 })
+    return
+  }
+
+  const surveyIndex = missionStore.surveys.findIndex((s) => s.id === surveyId)
+  if (surveyIndex === -1) {
+    showSnackbar({ variant: 'error', message: 'Selected survey does not exist.', duration: 2000 })
+    return
+  }
+
+  const polygonLayer = surveyPolygonLayers.value[surveyId]
+  if (polygonLayer) {
+    planningMap.value?.removeLayer(polygonLayer)
+    delete surveyPolygonLayers.value[surveyId]
+  }
+
+  clearSurveyVertexMarkers()
+
+  const waypointsToRemove = missionStore.surveys[surveyIndex].waypoints
+  waypointsToRemove.forEach((waypoint) => {
+    const waypointIndex = missionStore.currentPlanningWaypoints.findIndex((wp) => wp.id === waypoint.id)
+    if (waypointIndex !== -1) {
+      missionStore.currentPlanningWaypoints.splice(waypointIndex, 1)
+    }
+    const waypointMarker = waypointMarkers.value[waypoint.id]
+    if (waypointMarker) {
+      planningMap.value?.removeLayer(waypointMarker)
+      delete waypointMarkers.value[waypoint.id]
+    }
+  })
+
+  surveyEdgeAddMarkers.forEach((marker) => marker.remove())
+  surveyEdgeAddMarkers.length = 0
+
+  missionStore.surveys.splice(surveyIndex, 1)
+
+  if (selectedSurveyId.value === surveyId) {
+    selectedSurveyId.value = missionStore.surveys.length > 0 ? missionStore.surveys[0].id : ''
+  }
+
+  if (lastSurveyState.value[surveyId]) {
+    delete lastSurveyState.value[surveyId]
+  }
+  if (canUndo.value[surveyId]) {
+    delete canUndo.value[surveyId]
+  }
+
+  undoAndRegenerateAllSurveys()
+
+  showSnackbar({ variant: 'success', message: 'Survey deleted.', duration: 2000 })
+  hideContextMenu()
+}
+
+const undoAndRegenerateAllSurveys = (): void => {
+  const startIndex = missionStore.surveys.findIndex((survey) => survey.id === selectedSurveyId.value)
+
+  if (startIndex === -1) {
+    console.error('Selected survey not found in the mission store.')
+    return
+  }
+
+  missionStore.surveys.forEach((survey) => {
+    selectedSurveyId.value = survey.id
+    setTimeout(() => {
+      undoGenerateWaypoints()
+      generateWaypointsFromSurvey()
+    }, 200)
+  })
+}
+
+const clearSurveyVertexMarkers = (): void => {
+  surveyPolygonVertexesMarkers.value.forEach((marker) => marker.remove())
+  surveyPolygonVertexesMarkers.value = []
+}
+
+provide('regenerateSurveyWaypoints', regenerateSurveyWaypoints)
+provide('toggleSimpleMission', toggleSimpleMission)
+provide('toggleSurvey', toggleSurvey)
+provide('isCreatingSimpleMission', isCreatingSimpleMission)
+provide('isCreatingSurvey', isCreatingSurvey)
+provide('selectedSurveyId', selectedSurveyId)
+provide('surveyLinesAngle', (angle: number) => {
+  surveyLinesAngle.value = angle
+})
+provide('undoIsInProgress', undoIsInProgress)
+provide('undoGenerateWaypoints', undoGenerateWaypoints)
+provide('deleteSelectedSurvey', deleteSelectedSurvey)
+
 onUnmounted(() => {
   targetFollower.disableAutoUpdate()
   missionStore.clearMission()
@@ -872,14 +1550,35 @@ watch(planningMap, (newMap, oldMap) => {
   }
 })
 
-const missionWaypointsPolyline = ref()
-watch(missionStore.currentPlanningWaypoints, (newWaypoints) => {
-  if (planningMap.value === undefined) throw new Error('Map not yet defined')
-  if (missionWaypointsPolyline.value === undefined) {
-    missionWaypointsPolyline.value = L.polyline(newWaypoints.map((w) => w.coordinates)).addTo(planningMap.value)
-  }
-  missionWaypointsPolyline.value.setLatLngs(newWaypoints.map((w) => w.coordinates))
-})
+const missionWaypointsPolyline = ref<L.Polyline | undefined>()
+
+watch(
+  () => missionStore.currentPlanningWaypoints.map((w) => w.coordinates),
+  (newCoordinates) => {
+    if (!planningMap.value) {
+      return
+    }
+
+    if (missionWaypointsPolyline.value === undefined) {
+      if (newCoordinates.length > 0) {
+        missionWaypointsPolyline.value = L.polyline(newCoordinates, {
+          color: '#3B82F6',
+          weight: 3,
+          opacity: 0.8,
+          className: 'mission-waypoints-polyline',
+        }).addTo(planningMap.value!)
+      }
+    } else {
+      if (newCoordinates.length > 0) {
+        missionWaypointsPolyline.value.setLatLngs(newCoordinates)
+      } else {
+        planningMap.value!.removeLayer(missionWaypointsPolyline.value)
+        missionWaypointsPolyline.value = undefined
+      }
+    }
+  },
+  { immediate: true, deep: true }
+)
 
 // Try to update home position based on browser geolocation
 navigator?.geolocation?.watchPosition(
@@ -1026,4 +1725,16 @@ watch([home, planningMap], async () => {
   align-items: center;
   justify-content: center;
 }
+
+.confirm-button {
+  position: relative;
+  top: 0;
+  right: 0;
+  cursor: pointer;
+  transition: transform 0.2s ease;
+}
+
+.confirm-button:hover svg {
+  transform: scale(1.1);
+}
 </style>
diff --git a/src/views/MissionPlanning/ScanDirectionDial.vue b/src/views/MissionPlanning/ScanDirectionDial.vue
new file mode 100644
index 000000000..d81075cf3
--- /dev/null
+++ b/src/views/MissionPlanning/ScanDirectionDial.vue
@@ -0,0 +1,165 @@
+<template>
+  <div class="rounded-full transition-width bg-[#333333EE]" :class="hovering ? 'w-[180px]' : 'w-[80px]'">
+    <div class="relative flex items-start justify-start">
+      <div class="dial-container">
+        <div class="compass">
+          <div class="wind-direction-dial-container" @mousedown="startDrag">
+            <div class="dial-arrow" :style="{ transform: `rotate(${rotationAngle}deg)` }">
+              <v-icon class="text-[90px] scale-x-[.4]">mdi-arrow-up-thin</v-icon>
+            </div>
+          </div>
+
+          <p class="absolute top-0 left-[33px] text-[15px] pointer-events-none text-[#FFFFFF99]">N</p>
+          <p class="absolute top-[25px] right-1 text-[16px] pointer-events-none text-[#FFFFFF99]">E</p>
+          <p class="absolute bottom-0 left-[33px] pointer-events-none text-[#FFFFFF99]">S</p>
+          <p class="absolute top-[25px] left-1 text-[15px] pointer-events-none text-[#FFFFFF99]">W</p>
+        </div>
+      </div>
+      <div class="w-[150px] ml-auto">
+        <div v-show="hovering" class="flex flex-col items-center justify-center text-white mr-[14px] mt-[10px]">
+          <p class="text-xs -mb-1">Scan</p>
+          <p class="text-xs -mb-1">Direction</p>
+          <p class="font-bold text-[30px] text-center text-[#FFFF00]">
+            {{ getCardinalDirection(rotationAngle || 0) }}
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { inject, onUnmounted, ref, watch } from 'vue'
+
+/* eslint-disable jsdoc/require-jsdoc */
+const props = defineProps<{
+  autoUpdate?: boolean
+  angle: number | undefined
+  polygonState: boolean
+}>()
+/* eslint-enable jsdoc/require-jsdoc */
+
+const rotationAngle = ref(props.angle)
+const hovering = ref(false)
+const polygonStateEdit = ref(props.polygonState || false)
+
+watch(
+  () => props.angle,
+  (newAngle) => {
+    rotationAngle.value = newAngle
+  }
+)
+
+const regenerateSurveyWaypoints = inject<(angle?: number) => void>('regenerateSurveyWaypoints')
+const surveyLinesAngle = inject<(angle: number) => void>('surveyLinesAngle')
+
+const startDrag = (event: MouseEvent): void => {
+  hovering.value = true
+  event.preventDefault()
+  const target = event.currentTarget as HTMLElement
+  const rect = target.getBoundingClientRect()
+
+  const handleDrag = (moveEvent: MouseEvent): void => {
+    const centerX = rect.left + rect.width / 2
+    const centerY = rect.top + rect.height / 2
+    const dx = moveEvent.clientX - centerX
+    const dy = moveEvent.clientY - centerY
+    let angle = (Math.atan2(dy, dx) * 180) / Math.PI
+    angle = (angle + 360 + 90) % 360
+
+    rotationAngle.value = angle
+  }
+
+  const stopDrag = (): void => {
+    hovering.value = false
+    document.removeEventListener('mousemove', handleDrag)
+    document.removeEventListener('mouseup', stopDrag)
+    if (props.autoUpdate && regenerateSurveyWaypoints && !polygonStateEdit.value) {
+      regenerateSurveyWaypoints(rotationAngle.value)
+    }
+    if (polygonStateEdit.value && surveyLinesAngle) {
+      surveyLinesAngle(rotationAngle.value || 0)
+    }
+  }
+
+  document.addEventListener('mousemove', handleDrag)
+  document.addEventListener('mouseup', stopDrag)
+}
+
+const getCardinalDirection = (angle: number): string => {
+  const directions = [
+    'N',
+    'NNE',
+    'NE',
+    'ENE',
+    'E',
+    'ESE',
+    'SE',
+    'SSE',
+    'S',
+    'SSW',
+    'SW',
+    'WSW',
+    'W',
+    'WNW',
+    'NW',
+    'NNW',
+    'N',
+  ]
+  const normalizedAngle = (((angle + 180) % 360) + 360) % 360
+  const index = Math.round(normalizedAngle / 22.5)
+  return directions[index]
+}
+
+onUnmounted(() => {
+  document.removeEventListener('mousemove', startDrag)
+  document.removeEventListener('mouseup', startDrag)
+  hovering.value = false
+})
+</script>
+
+<style scoped>
+.overlay {
+  z-index: 100;
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+}
+
+.transition-width {
+  transition: width 0.2s ease-in-out;
+  animation-delay: 1s;
+}
+
+.dial-container {
+  display: flex;
+  align-items: start;
+  position: relative;
+}
+
+.compass {
+  position: relative;
+  width: 80px;
+  height: 80px;
+  border: 1px solid #ffffff22;
+  border-radius: 50%;
+  cursor: grab;
+}
+
+.wind-direction-dial-container {
+  position: relative;
+  width: 80px;
+  height: 80px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  user-select: none;
+}
+
+.dial-arrow {
+  color: #ffff00;
+  position: absolute;
+  margin-top: -5px;
+  margin-left: -5px;
+  transform-origin: center;
+}
+</style>