feat: implemented map toolbar

frontend/react/src/map/boxselect.ts

@@ -46,7 +46,7 @@ export var BoxSelect = Handler.extend({
   },
 
   _onMouseDown: function (e: any) {
-    if (this._map.getEnableSelection() && e.button == 0) {
+    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();

frontend/react/src/map/map.ts

@@ -53,7 +53,9 @@ import {
   MapOptionsChangedEvent,
   MapSourceChangedEvent,
   MouseMovedEvent,
+  PasteEnabledChangedEvent,
   SelectionClearedEvent,
+  SelectionEnabledChangedEvent,
   SpawnContextMenuRequestEvent,
   StarredSpawnsChangedEvent,
   UnitDeselectedEvent,
@@ -113,7 +115,8 @@ export class Map extends L.Map {
   #lastMouseCoordinates: L.LatLng = new L.LatLng(0, 0);
   #previousZoom: number = 0;
   #keepRelativePositions: boolean = false;
-  #enableSelection: boolean = false;
+  #selectionEnabled: boolean = false;
+  #pasteEnabled: boolean = false;
 
   /* Camera control plugin */
   #slaveDCSCamera: boolean = false;
@@ -363,10 +366,10 @@ export class Map extends L.Map {
         shiftKey: false,
         ctrlKey: false,
       })
-      .addShortcut("toggleEnableSelection", {
+      .addShortcut("toggleSelectionEnabled", {
         label: "Toggle box selection",
-        keyUpCallback: () => this.setEnableSelection(false),
-        keyDownCallback: () => this.setEnableSelection(true),
+        keyUpCallback: () => this.setSelectionEnabled(false),
+        keyDownCallback: () => this.setSelectionEnabled(true),
         code: "ShiftLeft",
         altKey: false,
         ctrlKey: false,
@@ -755,12 +758,22 @@ export class Map extends L.Map {
     return this.#keepRelativePositions;
   }
 
-  setEnableSelection(enableSelection: boolean) {
-    this.#enableSelection = enableSelection;
+  setSelectionEnabled(selectionEnabled: boolean) {
+    this.#selectionEnabled = selectionEnabled;
+    SelectionEnabledChangedEvent.dispatch(selectionEnabled)
   }
 
-  getEnableSelection() {
-    return this.#enableSelection;
+  getSelectionEnabled() {
+    return this.#selectionEnabled;
+  }
+
+  setPasteEnabled(pasteEnabled: boolean) {
+    this.#pasteEnabled = pasteEnabled;
+    PasteEnabledChangedEvent.dispatch(pasteEnabled)
+  }
+
+  getPasteEnabled() {
+    return this.#pasteEnabled;
   }
 
   increaseCameraZoom() {
@@ -805,8 +818,12 @@ export class Map extends L.Map {
     this.#currentSpawnMarker = null;
     this.#currentEffectMarker?.removeFrom(this);
     this.#currentEffectMarker = null;
-    this.setContextAction(null);
-    if (state !== OlympusState.UNIT_CONTROL) getApp().getUnitsManager().deselectAllUnits();
+    
+    if (state !== OlympusState.UNIT_CONTROL) {
+      getApp().getUnitsManager().deselectAllUnits();
+      this.setContextAction(null);
+      this.setContextActionSet(null);
+    }
     if (state !== OlympusState.DRAW || (state === OlympusState.DRAW && subState !== DrawSubState.EDIT)) this.deselectAllCoalitionAreas();
     this.getContainer().classList.remove(`explosion-cursor`);
     ["white", "blue", "red", "green", "orange"].forEach((color) => this.getContainer().classList.remove(`smoke-${color}-cursor`));
@@ -908,6 +925,10 @@ export class Map extends L.Map {
         if (!this.#isSelecting) {
           console.log(`Left short click at ${e.latlng}`);
 
+          if (this.#pasteEnabled) {
+            getApp().getUnitsManager().paste(e.latlng)
+          }
+
           /* Execute the short click action */
           if (getApp().getState() === OlympusState.IDLE) {
             /* Do nothing */
@@ -1023,6 +1044,10 @@ export class Map extends L.Map {
             }
             getApp().setState(OlympusState.JTAC);
             this.#drawIPToTargetLine();
+          } else if (getApp().getState() === OlympusState.UNIT_CONTROL) {
+            if (this.#contextAction !== null) this.executeContextAction(null, e.latlng, e.originalEvent);
+            else if (getApp().getSubState() === NO_SUBSTATE) getApp().setState(OlympusState.IDLE);
+            else getApp().setState(OlympusState.UNIT_CONTROL);
           } else {
             if (getApp().getSubState() === NO_SUBSTATE) getApp().setState(OlympusState.IDLE);
             else getApp().setState(OlympusState.UNIT_CONTROL);
@@ -1041,8 +1066,7 @@ export class Map extends L.Map {
       SpawnContextMenuRequestEvent.dispatch(e.latlng);
       getApp().setState(OlympusState.SPAWN_CONTEXT);
     } else if (getApp().getState() === OlympusState.UNIT_CONTROL) {
-      if (this.#contextAction !== null) this.executeContextAction(null, e.latlng, e.originalEvent);
-      else this.executeDefaultContextAction(null, e.latlng, e.originalEvent);
+      this.executeDefaultContextAction(null, e.latlng, e.originalEvent);
     }
   }
 
@@ -1062,6 +1086,8 @@ export class Map extends L.Map {
 
     if (this.#debounceTimeout) window.clearTimeout(this.#debounceTimeout);
 
+    this.setPasteEnabled(false);
+
     if (getApp().getSubState() === NO_SUBSTATE) getApp().setState(OlympusState.IDLE);
     else getApp().setState(getApp().getState());
   }

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

@@ -172,9 +172,10 @@
 
 /*** Cursors ***/
 [data-is-dead],
-[data-object|="unit-missile"],
-[data-object|="unit-bomb"] {
-  cursor: default;
+[data-object|="unit-missile"] *,
+[data-object|="unit-bomb"] *{
+  pointer-events: none;
+
 }
 
 /*** Labels ***/