From 1f6bf6092780b04098c72c621e7c56baddb18389 Mon Sep 17 00:00:00 2001
From: vcoppe <vianney.coppe@gmail.com>
Date: Mon, 5 Aug 2024 16:31:47 +0200
Subject: [PATCH] show anchor point dialog also on contextmenu, closes #33

---
 .../toolbar/tools/routing/RoutingControls.ts  | 23 ++++++++++++-------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/website/src/lib/components/toolbar/tools/routing/RoutingControls.ts b/website/src/lib/components/toolbar/tools/routing/RoutingControls.ts
index c0d50319..b7e9a0fd 100644
--- a/website/src/lib/components/toolbar/tools/routing/RoutingControls.ts
+++ b/website/src/lib/components/toolbar/tools/routing/RoutingControls.ts
@@ -28,6 +28,7 @@ export class RoutingControls {
     popup: mapboxgl.Popup;
     popupElement: HTMLElement;
     temporaryAnchor: AnchorWithMarker;
+    lastDragEvent = 0;
     fileUnsubscribe: () => void = () => { };
     unsubscribes: Function[] = [];
 
@@ -162,27 +163,35 @@ export class RoutingControls {
             inZoom: false
         };
 
-        let lastDragEvent = 0;
         marker.on('dragstart', (e) => {
-            lastDragEvent = Date.now();
+            this.lastDragEvent = Date.now();
             setGrabbingCursor();
             element.classList.remove('cursor-pointer');
             element.classList.add('cursor-grabbing');
         });
         marker.on('dragend', (e) => {
-            lastDragEvent = Date.now();
+            this.lastDragEvent = Date.now();
             resetCursor();
             element.classList.remove('cursor-grabbing');
             element.classList.add('cursor-pointer');
             this.moveAnchor(anchor);
         });
-        marker.getElement().addEventListener('click', (e) => {
+        let handleAnchorClick = this.handleClickForAnchor(anchor, marker);
+        marker.getElement().addEventListener('click', handleAnchorClick);
+        marker.getElement().addEventListener('contextmenu', handleAnchorClick);
+
+        return anchor;
+    }
+
+    handleClickForAnchor(anchor: Anchor, marker: mapboxgl.Marker) {
+        return (e: any) => {
+            e.preventDefault();
             e.stopPropagation();
             if (marker === this.temporaryAnchor.marker) {
                 return;
             }
 
-            if (Date.now() - lastDragEvent < 100) { // Prevent click event during drag
+            if (Date.now() - this.lastDragEvent < 100) { // Prevent click event during drag
                 return;
             }
 
@@ -213,9 +222,7 @@ export class RoutingControls {
                 this.popupElement.removeEventListener('delete', deleteThisAnchor);
                 this.popupElement.removeEventListener('change-start', startLoopAtThisAnchor);
             });
-        });
-
-        return anchor;
+        };
     }
 
     toggleAnchorsForZoomLevelAndBounds() { // Show markers only if they are in the current zoom level and bounds