Added ability to box select with long press

frontend/react/src/map/boxselect.ts

@@ -14,19 +14,21 @@ export var BoxSelect = Handler.extend({
     this._forceBoxSelect = false;
     map.on("unload", this._destroy, this);
 
-    document.addEventListener("mapForceBoxSelect", () => {
+    document.addEventListener("mapForceBoxSelect", (e) => {
       this._forceBoxSelect = true;
+      const originalEvent = (e as CustomEvent).detail;
+      this._onMouseDown(originalEvent);
     });
   },
 
   addHooks: function () {
     DomEvent.on(this._container, "mousedown", this._onMouseDown, this);
-    DomEvent.on(this._container, "touchstart", this._onMouseDown, this);
+    DomEvent.on(this._container, "mapForceBoxSelect", this._onMouseDown, this);
   },
 
   removeHooks: function () {
     DomEvent.off(this._container, "mousedown", this._onMouseDown, this);
-    DomEvent.off(this._container, "touchstart", this._onMouseDown, this);
+    DomEvent.off(this._container, "mapForceBoxSelect", this._onMouseDown, this);
   },
 
   moved: function () {

frontend/react/src/map/map.ts

@@ -95,6 +95,8 @@ export class Map extends L.Map {
   #theatre: string = "";
   #waitingForDoubleClick: boolean = false;
   #doubleClickTimer: number = 0;
+  #longPressTimer: number = 0;
+  #dragging: boolean = false;
 
   /**
    *
@@ -138,9 +140,12 @@ export class Map extends L.Map {
     this.on("zoom", (e: any) => this.#onZoom(e));
     this.on("zoomend", (e: any) => this.#onZoomEnd(e));
     this.on("drag", (e: any) => this.centerOnUnit(null));
+    this.on("dragstart", (e: any) => this.#onDragStart());
+    this.on("dragend", (e: any) => this.#onDragEnd(null));
     this.on("contextmenu", (e: any) => this.#onContextMenu(e));
     this.on("selectionstart", (e: any) => this.#onSelectionStart(e));
     this.on("selectionend", (e: any) => this.#onSelectionEnd(e));
+    this.on("mouseup", (e: any) => this.#onMouseUp(e));
     this.on("mousedown", (e: any) => this.#onMouseDown(e));
     this.on("mousemove", (e: any) => this.#onMouseMove(e));
     this.on("keydown", (e: any) => this.#onKeyDown(e));
@@ -149,6 +154,9 @@ export class Map extends L.Map {
       if (this.#slaveDCSCamera) this.#broadcastPosition();
     });
 
+    L.DomEvent.on(this.getContainer(), "touchstart", this.#onMouseDown, this);
+    L.DomEvent.on(this.getContainer(), "touchend", this.#onMouseUp, this);
+
     /* Event listeners */
     document.addEventListener("hiddenTypesChanged", (ev: CustomEventInit) => {
       Object.values(getApp().getUnitsManager().getUnits()).forEach(
@@ -735,7 +743,8 @@ export class Map extends L.Map {
       /* Still waiting so no doubleclick; do the click action */
       if (this.#waitingForDoubleClick) {
         if (!this.#preventLeftClick) {
-          this.hideAllContextMenus();
+
+          /* Execute the short click action */
           if (this.#state === IDLE) {
             this.deselectAllCoalitionAreas();
           } else if (this.#state === SPAWN_UNIT) {
@@ -791,6 +800,14 @@ export class Map extends L.Map {
 
   #onContextMenu(e: any) {}
 
+  #onDragStart(e: any) {
+    this.#dragging = true;
+  }
+
+  #onDragEnd(e: any) {
+    this.#dragging = false;
+  }
+
   #onSelectionStart(e: any) {
     this.#selecting = true;
   }
@@ -806,7 +823,19 @@ export class Map extends L.Map {
     document.dispatchEvent(new CustomEvent("mapSelectionEnd"));
   }
 
-  #onMouseDown(e: any) {}
+  #onMouseUp(e: any) {
+    window.clearTimeout(this.#longPressTimer);
+  }
+
+  #onMouseDown(e: any) {
+    this.#longPressTimer = window.setTimeout(()=> {
+      if (!this.#dragging)
+        if (e.type === "touchstart")
+          document.dispatchEvent(new CustomEvent("mapForceBoxSelect", {detail: e}));
+        else
+          document.dispatchEvent(new CustomEvent("mapForceBoxSelect", {detail: e.originalEvent}));
+    }, 500);
+  }
 
   #onMouseMove(e: any) {
     this.#lastMousePosition.x = e.originalEvent.x;

frontend/react/src/ui/panels/sidebar.tsx

@@ -7,9 +7,7 @@ import {
   faEllipsisV,
   faCog,
   faQuestionCircle,
-  faPlusSquare,
-  faBox,
-  faObjectGroup,
+  faPlusSquare
 } from "@fortawesome/free-solid-svg-icons";
 import { EventsConsumer } from "../../eventscontext";
 import { StateConsumer } from "../../statecontext";
@@ -73,16 +71,6 @@ export function SideBar() {
                     icon={faPencil}
                     tooltip="Hide/show drawing menu"
                   ></OlStateButton>
-                  <OlStateButton
-                    onClick={() => {
-                      document.dispatchEvent(
-                        new CustomEvent("mapForceBoxSelect")
-                      );
-                    }}
-                    checked={appState.mapBoxSelection}
-                    icon={faObjectGroup}
-                    tooltip="Enable box selection on the map"
-                  ></OlStateButton>
                 </div>
               </div>
               <div className="flex w-16 flex-wrap content-end justify-center p-4">

frontend/react/src/ui/panels/unitmousecontrolbar.tsx

@@ -117,6 +117,9 @@ export function UnitMouseControlBar(props: {}) {
                             });
                           } else {
                             setActiveContextAction(null);
+                            getApp().getMap().setState(CONTEXT_ACTION, {
+                              contextAction: null,
+                            });
                           }
                         }
                       }}

frontend/react/src/unit/unit.ts

@@ -1218,10 +1218,9 @@ export abstract class Unit extends CustomMarker {
   }
 
   updatePathFromMarkers() {
-    var path: any = {};
+    var path: any = [];
     this.#pathMarkers.forEach((marker) => {
       path[Object.keys(path).length.toString()] = marker.getLatLng();
-      console.log(marker.getLatLng());
     });
     getApp().getServerManager().addDestination(this.ID, path);
   }
@@ -1818,8 +1817,12 @@ export abstract class Unit extends CustomMarker {
           icon: pathIcon,
           draggable: true,
         }).addTo(getApp().getMap());
+        marker.on("dragstart", (event) => {
+          event.target.options["freeze"] = true;
+        })
         marker.on("dragend", (event) => {
           this.updatePathFromMarkers();
+          event.target.options["freeze"] = false;
         });
         this.#pathMarkers.push(marker);
       }
@@ -1835,10 +1838,13 @@ export abstract class Unit extends CustomMarker {
       /* Update the position of the existing markers (to avoid creating markers uselessly) */
       for (let WP in this.#activePath) {
         var destination = this.#activePath[WP];
-        this.#pathMarkers[parseInt(WP)].setLatLng([
-          destination.lat,
-          destination.lng,
-        ]);
+        var frozen = this.#pathMarkers[parseInt(WP)].options["freeze"];
+        if (!this.#pathMarkers[parseInt(WP)].options["freeze"]) {
+          this.#pathMarkers[parseInt(WP)].setLatLng([
+            destination.lat,
+            destination.lng,
+          ]);
+        }
         points.push(new LatLng(destination.lat, destination.lng));
         this.#pathPolyline.setLatLngs(points);
       }