Mission-planning: Add survey polygon dragging

Signed-off-by: Arturo Manzoli <[email protected]>

src/views/MissionPlanningView.vue

@@ -400,6 +400,10 @@ const surveys = ref<Survey[]>([])
 const canUndo = ref<Record<string, boolean>>({})
 const undoIsInProgress = ref(false)
 const lastSurveyState = ref<Record<string, SurveyPolygon>>({})
+const isDragging = ref(false)
+let dragStartLatLng: L.LatLng | null = null
+let polygonLatLngsAtDragStart: L.LatLng[] = []
+let ignoreNextClick = false
 
 const enableUndoForCurrentSurvey = computed(() => {
   return (
@@ -456,6 +460,70 @@ const updateConfirmButtonPosition = (): void => {
   }
 }
 
+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()
@@ -845,6 +913,7 @@ const clearSurveyPath = (): void => {
     surveyPathLayer.value = null
   }
   if (surveyPolygonLayer.value) {
+    disablePolygonDragging()
     planningMap.value?.removeLayer(surveyPolygonLayer.value as unknown as L.Layer)
     surveyPolygonLayer.value = null
   }
@@ -887,6 +956,8 @@ const updatePolygon = (): void => {
       weight: 3,
       className: 'survey-polygon',
     }).addTo(toRaw(planningMap.value)!)
+
+    enablePolygonDragging()
   }
   updateSurveyMarkersPositions()
 }
@@ -1311,6 +1382,8 @@ const undoGenerateWaypoints = (): void => {
     className: 'survey-polygon',
   }).addTo(planningMap.value!)
 
+  enablePolygonDragging()
+
   delete lastSurveyState.value[surveyId]
   delete canUndo.value[surveyId]
   isCreatingSurvey.value = true
@@ -1381,6 +1454,10 @@ onMounted(() => {
 
 const onMapClick = (e: L.LeafletMouseEvent): void => {
   hideContextMenu()
+  if (ignoreNextClick) {
+    ignoreNextClick = false
+    return
+  }
 
   if (isCreatingSurvey.value) {
     addSurveyPoint(e.latlng)