fix: buttons and actions no longer getting stuck

fix: context menu resizes if accordion is opened
feat: added expanding descriptions for context actions

frontend/react/src/map/boxselect.ts

@@ -12,7 +12,6 @@ export var BoxSelect = Handler.extend({
     this._map = map;
     this._container = map.getContainer();
     this._pane = map.getPanes().overlayPane;
-    this._resetStateTimeout = 0;
     map.on("unload", this._destroy, this);
   },
 
@@ -34,23 +33,12 @@ export var BoxSelect = Handler.extend({
   },
 
   _resetState: function () {
-    this._resetStateTimeout = 0;
     this._moved = false;
   },
 
-  _clearDeferredResetState: function () {
-    if (this._resetStateTimeout !== 0) {
-      clearTimeout(this._resetStateTimeout);
-      this._resetStateTimeout = 0;
-    }
-  },
-
   _onMouseDown: function (e: any) {
     if (this._map.getSelectionEnabled() && e.button == 0) {
-      // Clear the deferred resetState if it hasn't executed yet, otherwise it
-      // will interrupt the interaction and orphan a box element in the container.
-      this._clearDeferredResetState();
-      this._resetState();
+      if (this._moved) this._finish();
 
       DomUtil.disableImageDrag();
       this._map.dragging.disable();
@@ -66,7 +54,7 @@ export var BoxSelect = Handler.extend({
           touchmove: this._onMouseMove,
           touchend: this._onMouseUp,
           mousemove: this._onMouseMove,
-          mouseup: this._onMouseUp
+          mouseup: this._onMouseUp,
         },
         this
       );
@@ -76,20 +64,10 @@ export var BoxSelect = Handler.extend({
   },
 
   _onMouseUp: function (e: any) {
-    if (e.button !== 0) {
-      return;
-    }
-
-    this._finish();
-
-    if (!this._moved) {
-      return;
-    }
-    // Postpone to next JS tick so internal click event handling
-    // still see it as "moved".
-    window.setTimeout(Util.bind(this._resetState, this), 0);
+    if (e.button !== 0) return;
+    window.setTimeout(Util.bind(this._finish, this), 0);
+    if (!this._moved) return;
     var bounds = new LatLngBounds(this._map.containerPointToLatLng(this._startPoint), this._map.containerPointToLatLng(this._point));
-
     this._map.fire("selectionend", { selectionBounds: bounds });
   },
 
@@ -141,5 +119,7 @@ export var BoxSelect = Handler.extend({
       },
       this
     );
+
+    this._resetState();
   },
 });

frontend/react/src/map/map.ts

@@ -297,6 +297,11 @@ export class Map extends L.Map {
     ContextActionChangedEvent.on((contextAction) => this.#updateDestinationPreviewMarkers());
     MapOptionsChangedEvent.on((mapOptions) => this.#moveDestinationPreviewMarkers());
 
+    window.addEventListener("blur", () => {
+      this.setSelectionEnabled(false);
+      this.setPasteEnabled(false);
+    })
+
     /* Pan interval */
     this.#panInterval = window.setInterval(() => {
       if (this.#panUp || this.#panDown || this.#panRight || this.#panLeft)
@@ -806,6 +811,10 @@ export class Map extends L.Map {
     return this.#contextAction;
   }
 
+  getDefaultContextAction() {
+    return this.#contextActionSet?.getDefaultContextAction();
+  }
+
   executeDefaultContextAction(targetUnit: Unit | null, targetPosition: L.LatLng | null, originalEvent?: MouseEvent) {
     this.#contextActionSet?.getDefaultContextAction()?.executeCallback(targetUnit, targetPosition, originalEvent);
   }

frontend/react/src/map/markers/custommarker.ts

@@ -1,8 +1,16 @@
 import { DivIcon, Map, Marker, MarkerOptions, LatLngExpression } from "leaflet";
+import { SelectionEnabledChangedEvent } from "../../events";
 
 export class CustomMarker extends Marker {
   constructor(latlng: LatLngExpression, options?: MarkerOptions) {
     super(latlng, options);
+
+    SelectionEnabledChangedEvent.on((enabled) => {
+      const el = this.getElement();
+      if (el === undefined) return;
+      if (enabled) el.classList.add("disable-pointer-events");
+      else el.classList.remove("disable-pointer-events");
+    });
   }
 
   onAdd(map: Map): this {

frontend/react/src/map/markers/stylesheets/airbase.css

@@ -32,3 +32,7 @@
 [data-awacs-mode] .airbase-icon svg * {
   fill: transparent !important;
 }
+
+#map-container .leaflet-airbase-marker.airbase-disable-pointer-events {
+  pointer-events: none;
+}

frontend/react/src/map/stylesheets/map.css

@@ -234,3 +234,7 @@ path.leaflet-interactive:focus {
 .smoke-orange-cursor {
   cursor: url("/images/cursors/smoke-orange.svg"), auto !important;
 }
+
+#map-container .disable-pointer-events {
+  pointer-events: none;
+}