feat: Drawings added to sessiondata

frontend/react/src/map/coalitionarea/coalitionareamanager.ts

@@ -1,10 +1,11 @@
 import { LatLng, LeafletMouseEvent } from "leaflet";
 import { DrawSubState, OlympusState } from "../../constants/constants";
-import { AppStateChangedEvent, CoalitionAreasChangedEvent, CoalitionAreaSelectedEvent } from "../../events";
+import { AppStateChangedEvent, CoalitionAreaChangedEvent, CoalitionAreasChangedEvent, CoalitionAreaSelectedEvent, SessionDataLoadedEvent } from "../../events";
 import { getApp } from "../../olympusapp";
 import { areaContains } from "../../other/utils";
 import { CoalitionCircle } from "./coalitioncircle";
 import { CoalitionPolygon } from "./coalitionpolygon";
+import { SessionData } from "../../interfaces";
 
 export class CoalitionAreasManager {
   /* Coalition areas drawing */
@@ -37,6 +38,34 @@ export class CoalitionAreasManager {
         }
       }, 200);
     });
+
+    CoalitionAreaChangedEvent.on((area) => {
+      CoalitionAreasChangedEvent.dispatch(this.#areas);
+    });
+
+    SessionDataLoadedEvent.on((sessionData: SessionData) => {
+      /* Make a local copy */
+      const localSessionData = JSON.parse(JSON.stringify(sessionData)) as SessionData;
+      this.#areas.forEach((area) => this.deleteCoalitionArea(area));
+      localSessionData.coalitionAreas?.forEach((options) => {
+        if (options.type === 'circle') {
+          let newCircle = new CoalitionCircle(new LatLng(options.latlng.lat, options.latlng.lng), { radius: options.radius }, false);
+          newCircle.setCoalition(options.coalition);
+          newCircle.setLabelText(options.label);
+          newCircle.setSelected(false);
+          this.#areas.push(newCircle);
+        } else if (options.type === 'polygon') {
+          if (options.latlngs.length >= 3) {
+            let newPolygon = new CoalitionPolygon(options.latlngs.map((latlng) => new LatLng(latlng.lat, latlng.lng)), {}, false);
+            newPolygon.setCoalition(options.coalition);
+            newPolygon.setLabelText(options.label);
+            newPolygon.setSelected(false);
+            this.#areas.push(newPolygon);
+          }
+        }
+      });
+      CoalitionAreasChangedEvent.dispatch(this.#areas);
+    });
   }
 
   setSelectedArea(area: CoalitionCircle | CoalitionPolygon | null) {
@@ -118,4 +147,8 @@ export class CoalitionAreasManager {
       getApp().setState(OlympusState.DRAW, DrawSubState.EDIT);
     else getApp().setState(OlympusState.DRAW);
   }
+
+  getAreas() {
+    return this.#areas;
+  }
 }

frontend/react/src/map/coalitionarea/coalitioncircle.ts

@@ -4,19 +4,20 @@ import { CoalitionAreaHandle } from "./coalitionareahandle";
 import { BLUE_COMMANDER, RED_COMMANDER } from "../../constants/constants";
 import { Coalition } from "../../types/types";
 import * as turf from "@turf/turf";
-import { CoalitionAreaSelectedEvent } from "../../events";
+import { CoalitionAreaChangedEvent, CoalitionAreaSelectedEvent } from "../../events";
 
 let totalCircles = 0;
 
 export class CoalitionCircle extends Circle {
   #coalition: Coalition = "blue";
   #selected: boolean = true;
-  #creating: boolean = true;
+  #creating: boolean = false;
   #radiusHandle: CoalitionAreaHandle;
   #labelText: string;
   #label: Marker;
+  #updateTimeout: number | null = null;
 
-  constructor(latlng: LatLngExpression, options: CircleOptions) {
+  constructor(latlng: LatLngExpression, options: CircleOptions, creating = true) {
     if (options === undefined) options = { radius: 0 };
 
     totalCircles++;
@@ -30,6 +31,7 @@ export class CoalitionCircle extends Circle {
     this.#setColors();
 
     this.#labelText = `Circle ${totalCircles}`;
+    this.#creating = creating;
 
     if ([BLUE_COMMANDER, RED_COMMANDER].includes(getApp().getMissionManager().getCommandModeOptions().commandMode))
       this.setCoalition(getApp().getMissionManager().getCommandedCoalition());
@@ -37,6 +39,12 @@ export class CoalitionCircle extends Circle {
     this.on("drag", () => {
       this.#setRadiusHandle();
       this.#drawLabel();
+
+      if (this.#updateTimeout) window.clearTimeout(this.#updateTimeout);
+      this.#updateTimeout = window.setTimeout(() => {
+        CoalitionAreaChangedEvent.dispatch(this);
+        this.#updateTimeout = null;
+      }, 500);
     });
 
     getApp().getMap().addLayer(this);
@@ -45,6 +53,7 @@ export class CoalitionCircle extends Circle {
   setCoalition(coalition: Coalition) {
     this.#coalition = coalition;
     this.#setColors();
+    CoalitionAreaChangedEvent.dispatch(this);
   }
 
   getCoalition() {
@@ -91,18 +100,20 @@ export class CoalitionCircle extends Circle {
   setLabelText(labelText: string) {
     this.#labelText = labelText;
     this.#drawLabel();
+    CoalitionAreaChangedEvent.dispatch(this);
   }
 
   onAdd(map: Map): this {
     super.onAdd(map);
     this.#drawLabel();
+
     return this;
   }
 
   onRemove(map: Map): this {
     super.onRemove(map);
     this.#label?.removeFrom(map);
-    this.#radiusHandle.removeFrom(map);
+    this.#radiusHandle?.removeFrom(map);
     return this;
   }
 

frontend/react/src/map/coalitionarea/coalitionpolygon.ts

@@ -5,21 +5,22 @@ import { CoalitionAreaMiddleHandle } from "./coalitionareamiddlehandle";
 import { BLUE_COMMANDER, RED_COMMANDER } from "../../constants/constants";
 import { Coalition } from "../../types/types";
 import { polyCenter } from "../../other/utils";
-import { CoalitionAreaSelectedEvent } from "../../events";
+import { CoalitionAreaChangedEvent, CoalitionAreaSelectedEvent } from "../../events";
 
 let totalPolygons = 0;
 
 export class CoalitionPolygon extends Polygon {
   #coalition: Coalition = "blue";
   #selected: boolean = true;
-  #creating: boolean = true;
+  #creating: boolean = false;
   #handles: CoalitionAreaHandle[] = [];
   #middleHandles: CoalitionAreaMiddleHandle[] = [];
   #activeIndex: number = 0;
   #labelText: string;
   #label: Marker;
+  #updateTimeout: number | null = null;
 
-  constructor(latlngs: LatLngExpression[] | LatLngExpression[][] | LatLngExpression[][][], options?: PolylineOptions) {
+  constructor(latlngs: LatLngExpression[] | LatLngExpression[][] | LatLngExpression[][][], options?: PolylineOptions, creating = true) {
     if (options === undefined) options = {};
 
     totalPolygons++;
@@ -33,6 +34,7 @@ export class CoalitionPolygon extends Polygon {
     this.#setColors();
 
     this.#labelText = `Polygon ${totalPolygons}`;
+    this.#creating = creating;
 
     if ([BLUE_COMMANDER, RED_COMMANDER].includes(getApp().getMissionManager().getCommandModeOptions().commandMode))
       this.setCoalition(getApp().getMissionManager().getCommandedCoalition());
@@ -41,6 +43,12 @@ export class CoalitionPolygon extends Polygon {
       this.#setHandles();
       this.#setMiddleHandles();
       this.#drawLabel();
+
+      if (this.#updateTimeout) window.clearTimeout(this.#updateTimeout);
+      this.#updateTimeout = window.setTimeout(() => {
+        CoalitionAreaChangedEvent.dispatch(this);
+        this.#updateTimeout = null;
+      }, 500);
     });
 
     getApp().getMap().addLayer(this);
@@ -49,6 +57,7 @@ export class CoalitionPolygon extends Polygon {
   setCoalition(coalition: Coalition) {
     this.#coalition = coalition;
     this.#setColors();
+    CoalitionAreaChangedEvent.dispatch(this);
   }
 
   getCoalition() {
@@ -111,6 +120,7 @@ export class CoalitionPolygon extends Polygon {
   setLabelText(labelText: string) {
     this.#labelText = labelText;
     this.#drawLabel();
+    CoalitionAreaChangedEvent.dispatch(this);
   }
 
   onAdd(map: Map): this {
@@ -129,6 +139,13 @@ export class CoalitionPolygon extends Polygon {
   setLatLngs(latlngs: LatLngExpression[] | LatLngExpression[][] | LatLngExpression[][][]) {
     super.setLatLngs(latlngs);
     this.#drawLabel();
+
+    if (this.#updateTimeout) window.clearTimeout(this.#updateTimeout);
+    this.#updateTimeout = window.setTimeout(() => {
+      CoalitionAreaChangedEvent.dispatch(this);
+      this.#updateTimeout = null;
+    }, 500);
+
     return this;
   }
 

frontend/react/src/map/map.ts

@@ -24,6 +24,7 @@ import {
   ContextActions,
   SHORT_PRESS_MILLISECONDS,
   DEBOUNCE_MILLISECONDS,
+  DrawSubState,
 } from "../constants/constants";
 import { MapHiddenTypes, MapOptions } from "../types/types";
 import { EffectRequestTable, OlympusConfig, SpawnRequestTable } from "../interfaces";
@@ -806,6 +807,7 @@ export class Map extends L.Map {
     }
     this.getContainer().classList.remove(`explosion-cursor`);
     ["white", "blue", "red", "green", "orange"].forEach((color) => this.getContainer().classList.remove(`smoke-${color}-cursor`));
+    this.getContainer().classList.remove(`plus-cursor`);
 
     /* Operations to perform when entering a state */
     if (state === OlympusState.IDLE) {
@@ -832,7 +834,9 @@ export class Map extends L.Map {
     } else if (state === OlympusState.UNIT_CONTROL) {
       console.log(`Context action:`);
       console.log(this.#contextAction);
-    } 
+    } else if (state === OlympusState.DRAW) {
+      if (subState === DrawSubState.DRAW_CIRCLE || subState === DrawSubState.DRAW_POLYGON) this.getContainer().classList.add(`plus-cursor`);
+    }
   }
 
   #onDragStart(e: any) {
@@ -1064,6 +1068,15 @@ export class Map extends L.Map {
       this.#destinationRotation -= e.originalEvent.movementX;
     }
 
+    if (getApp().getState() === OlympusState.DRAW && (getApp().getSubState() === DrawSubState.NO_SUBSTATE || getApp().getSubState() === DrawSubState.EDIT)) {
+      getApp()
+        .getCoalitionAreasManager()
+        .getAreas()
+        .find((area) => areaContains(e.latlng, area))
+        ? this.getContainer()?.classList.add("pointer-cursor")
+        : this.getContainer()?.classList.remove("pointer-cursor");
+    }
+
     this.#moveDestinationPreviewMarkers();
   }
 

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

@@ -1,6 +1,6 @@
 .airbase-icon {
   align-items: center;
-  cursor: url("/images/cursors/pointer.svg"), auto;
+  cursor: url("/images/cursors/pointer.svg") 13 5, auto;
   display: flex;
   justify-content: center;
   position: relative;

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

@@ -1,6 +1,6 @@
 .bullseye-icon {
   align-items: center;
-  cursor: url("/images/cursors/pointer.svg"), auto;
+  cursor: url("/images/cursors/pointer.svg") 13 5, auto;
   display: flex;
   justify-content: center;
   position: relative;

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

@@ -1,6 +1,6 @@
 /*** Unit marker elements ***/
 [data-object|="unit"] {
-  cursor: url("/images/cursors/pointer.svg"), auto;
+  cursor: url("/images/cursors/pointer.svg") 13 5, auto;
   display: flex;
   height: 100%;
   justify-content: center;

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

@@ -99,6 +99,7 @@
 }
 
 .ol-coalitionarea-handle-icon {
+  cursor: url("/images/cursors/pointer.svg") 13 5, auto;
   background-color: #FFFFFFAA;
   width: 100%;
   height: 100%;
@@ -106,6 +107,7 @@
 }
 
 .ol-coalitionarea-middle-handle-icon {
+  cursor: url("/images/cursors/pointer.svg") 13 5, auto;
   background-color: #FFFFFFAA;
   width: 100%;
   height: 100%;
@@ -207,6 +209,14 @@ path.leaflet-interactive:focus {
   cursor: url("/images/cursors/simulate-fire-fight.svg"), auto !important;
 }
 
+.clone-cursor {
+  cursor: url("/images/cursors/clone.svg"), auto !important;
+}
+
+.plus-cursor {
+  cursor: url("/images/cursors/plus.svg"), auto !important;
+}
+
 #map-container.leaflet-grab {
   cursor: url("/images/cursors/grab.svg") 16 16, auto;
 }
@@ -237,4 +247,8 @@ path.leaflet-interactive:focus {
 
 #map-container .disable-pointer-events {
   pointer-events: none;
+}
+
+.pointer-cursor {
+  cursor: url("/images/cursors/pointer.svg") 13 5, auto !important;
 }