Add survey generation functionality

[rafaellehmkuhl]

Kapture.2024-09-19.at.01.00.41.mp4

Fix #646

[ArturoManzoli]

Some points to improve:
1- The cursor when creating the survey polygon is a hand (grab), but a pointer or another type would be more fit to the task;

2- Is there a way to delete some added points? I accidentally added some unwanted ones on my tests;

3- An undo icon or CTRL+Z hotkey should be added. Sometimes I added some bizarre unintentional points and the polygon got very weird. I had to restart the task in order to get the polygon I wanted.

4- There was an odd issue with the 'distance-between-lines' number input. When I clicked the arrow to increase the value, it went full auto-mode all the way to the max value (video):

Screenshare.-.2024-09-20.10_05_27.AM.mp4

[rafaellehmkuhl]

Some points to improve: 1- The cursor when creating the survey polygon is a hand (grab), but a pointer or another type would be more fit to the task;

2- Is there a way to delete some added points? I accidentally added some unwanted ones on my tests;

3- An undo icon or CTRL+Z hotkey should be added. Sometimes I added some bizarre unintentional points and the polygon got very weird. I had to restart the task in order to get the polygon I wanted.

4- There was an odd issue with the 'distance-between-lines' number input. When I clicked the arrow to increase the value, it went full auto-mode all the way to the max value (video):

• Will do 1 and 2 immediately.
• Item 3 I think will be fulfilled with the delete functionality on item 2, right?
• About item 4, could you check if it's this was not something like a pressed enter button on your machine? I really tried to reproduce the problem here, but has no success, and there's nothing in the code that I can see that could create such a situation.

[ArturoManzoli]

Nice, I think the problem with the increasing values was indeed in my local browser.

I'll just suggest one more UX improvement:
With the 'X' icon permanently on the waypoint, it was a little confusing to the user what would happen if he touches it.

Try this implementation (video below), where the keyboard 'shift', when pressed, will swap the icon from the blue dot to the red X and will also change the function from drag to delete the survey point:

let isShiftPressed = false
let hoveredMarkers: L.Marker[] = [] 

window.addEventListener('keydown', (event) => {
  if (event.key === 'Shift') {
    isShiftPressed = true
    updateHoveredMarkers() 
  }
})

window.addEventListener('keyup', (event) => {
  if (event.key === 'Shift') {
    isShiftPressed = false
    updateHoveredMarkers() 
  }
})

const updateHoveredMarkers = (): void => {
  hoveredMarkers.forEach((marker) => {
    const icon = marker.getElement()?.querySelector('.delete-icon') as SVGGElement
    if (icon) {
      icon.style.display = isShiftPressed ? 'block' : 'none' // Show or hide the delete icon based on Shift key state
    }
  })
}

const addVertexAtEdge = (edgeIndex: number, latlng: L.LatLng): void => {
  surveyPolygonPoints.value.splice(edgeIndex + 1, 0, latlng)
  const newMarker = L.marker(latlng, {
    icon: customIcon,
    draggable: true,
  })
    .on('drag', () => {
      updatePolygon()
      createSurveyPath()
    })
    .on('mouseover', (event: L.LeafletEvent) => {
      const target = event.target as L.Marker
      hoveredMarkers.push(target) // Add marker to hovered list
      updateHoveredMarkers() // Check and update the icon when hovered
    })
    .on('mouseout', (event: L.LeafletEvent) => {
      const target = event.target as L.Marker
      const icon = target.getElement()?.querySelector('.delete-icon') as SVGGElement
      if (icon) icon.style.display = 'none'
      // Remove marker from hovered list when mouse leaves
      hoveredMarkers = hoveredMarkers.filter((m) => m !== target)
    })
    .on('click', (event: L.LeafletEvent) => {
      if (isShiftPressed) {
        const target = event.target as L.Marker
        const index = surveyPolygonMarkers.value.indexOf(target)
        if (index !== -1) {
          surveyPolygonPoints.value.splice(index, 1)
          surveyPolygonMarkers.value.splice(index, 1)
          target.remove()
          updatePolygon()
          updateEdgeMarkers()
          checkAndRemoveSurveyPath()
          createSurveyPath()
        }
      }
    })
    .addTo(planningMap.value!)
  surveyPolygonMarkers.value.splice(edgeIndex + 1, 0, newMarker)
  updatePolygon()
  updateEdgeMarkers()
  createSurveyPath()
}

const addSurveyPoint = (e: L.LeafletMouseEvent): void => {
  if (!isCreatingSurvey.value) return
  const newPoint = e.latlng
  surveyPolygonPoints.value.push(newPoint)
  const marker = L.marker(newPoint, {
    icon: customIcon,
    draggable: true,
  })
    .on('drag', (event: L.LeafletEvent) => {
      if (!isShiftPressed) { // Allow dragging only when Shift is not pressed
        const target = event.target as L.Marker
        const index = surveyPolygonMarkers.value.indexOf(target)
        if (index !== -1) {
          surveyPolygonPoints.value[index] = target.getLatLng()
        }
        updatePolygon()
        updateEdgeMarkers()
        createSurveyPath()
      }
    })
    .on('mouseover', (event: L.LeafletEvent) => {
      const target = event.target as L.Marker
      hoveredMarkers.push(target) // Add marker to hovered list
      updateHoveredMarkers() // Check and update the icon when hovered
    })
    .on('mouseout', (event: L.LeafletMouseEvent) => {
      const target = event.target as L.Marker
      const icon = target.getElement()?.querySelector('.delete-icon') as SVGGElement
      if (icon) icon.style.display = 'none'
      // Remove marker from hovered list when mouse leaves
      hoveredMarkers = hoveredMarkers.filter((m) => m !== target)
    })
    .on('click', (event: L.LeafletMouseEvent) => {
      if (isShiftPressed) {
        const target = event.target as L.Marker
        const index = surveyPolygonMarkers.value.indexOf(target)
        if (index !== -1) {
          surveyPolygonPoints.value.splice(index, 1)
          surveyPolygonMarkers.value.splice(index, 1)
          target.remove()
          updatePolygon()
          updateEdgeMarkers()
          checkAndRemoveSurveyPath()
          createSurveyPath()
        }
      }
    })
    .addTo(planningMap.value!)
  surveyPolygonMarkers.value.push(marker)
  updatePolygon()
  updateEdgeMarkers()
  createSurveyPath()
}

Screenshare.-.2024-09-20.2_25_36.PM.mp4

[rafaellehmkuhl]

Nice, I think the problem with the increasing values was indeed in my local browser.

I'll just suggest one more UX improvement: With the 'X' icon permanently on the waypoint, it was a little confusing to the user what would happen if he touches it.

Try this implementation (video below), where the keyboard 'shift', when pressed, will swap the icon from the blue dot to the red X and will also change the function from drag to delete the survey point:

Humnnn.....

I get the problem. The user will not know that they can drag the marker or if it will just be deleted, although dragging markers is very conventional.

On the other hand, I don't much like the shift approach as the user has to find out that they have this shift functionality, and it's also not mobile-friendly.

I'm thinking about opening a small popup that has the delete button when the user hovers or clicks the marker. What do you think?

[ArturoManzoli]

I'm thinking about opening a small popup that has the delete button when the user hovers or clicks the marker. What do you think?

Sounds very good. Some design software like the Autodesk Inventor and Fusion use this approach. It can vary from a single popup icon to a very complete list of actions.

[rafaellehmkuhl]

I'm thinking about opening a small popup that has the delete button when the user hovers or clicks the marker. What do you think?

Sounds very good. Some design software like the Autodesk Inventor and Fusion use this approach. It can vary from a single popup icon to a very complete list of actions.

Done!