feat: completed measure handling

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

@@ -0,0 +1,57 @@
+import { DivIcon, LatLngExpression, Map, MarkerOptions } from "leaflet";
+import { CustomMarker } from "./custommarker";
+import { SVGInjector } from "@tanem/svg-injector";
+
+export class MeasureEndMarker extends CustomMarker {
+  #rotationAngle: number = 0;
+
+  constructor(latlng: LatLngExpression, options?: MarkerOptions) {
+    super(latlng, options);
+    this.options.interactive = true;
+    this.options.draggable = true;
+    this.setZIndexOffset(9999);
+  }
+
+  createIcon() {
+    this.setIcon(
+      new DivIcon({
+        iconSize: [32, 32],
+        iconAnchor: [16, 16],
+        className: "leaflet-measure-end-marker",
+      })
+    );
+    var el = document.createElement("div");
+    el.classList.add("ol-measure-end-icon");
+    var img = document.createElement("img");
+    img.src = "images/markers/measure-end.svg";
+    img.onload = () => {
+      SVGInjector(img);
+      this.#applyRotation();
+    }
+    el.appendChild(img);
+    this.getElement()?.appendChild(el);
+  }
+
+  setRotationAngle(angle: number) {
+    this.#rotationAngle = angle;
+    this.#applyRotation();
+  }
+
+  getRotationAngle() {
+    return this.#rotationAngle;
+  }
+
+  onAdd(map: Map): this {
+    super.onAdd(map);
+    this.#applyRotation();
+    return this;
+  }
+
+  #applyRotation() {
+    const element = this.getElement();
+    if (element) {
+      const svg = element.querySelector("svg");
+      if (svg) svg.style.transform = `rotate(${this.#rotationAngle - Math.PI / 2}rad)`;
+    }
+  }
+}

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

@@ -2,9 +2,7 @@ import { Marker, LatLng, DivIcon, Map } from "leaflet";
 
 export class MeasureMarker extends Marker {
   #textValue: string;
-  #isEditable: boolean = false;
   #rotationAngle: number; // Rotation angle in radians
-  #previousValue: string;
 
   onValueUpdated: (value: number) => void = () => {};
   onDeleteButtonClicked: () => void = () => {};
@@ -56,9 +54,7 @@ export class MeasureMarker extends Marker {
    */
   setRotationAngle(angle: number) {
     this.#rotationAngle = angle;
-    if (!this.#isEditable) {
-      this.#updateRotation();
-    }
+    this.#updateRotation();
   }
 
   /**

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

@@ -0,0 +1,30 @@
+import { DivIcon, LatLngExpression, MarkerOptions } from "leaflet";
+import { CustomMarker } from "./custommarker";
+import { SVGInjector } from "@tanem/svg-injector";
+
+export class MeasureStartMarker extends CustomMarker {
+
+  constructor(latlng: LatLngExpression,  options?: MarkerOptions) {
+    super(latlng, options);
+    this.options.interactive = true;
+    this.options.draggable = true;
+    this.setZIndexOffset(9999);
+  }
+
+  createIcon() {
+    this.setIcon(
+      new DivIcon({
+        iconSize: [32, 32],
+        iconAnchor: [16, 16],
+        className: "leaflet-measure-start-marker",
+      })
+    );
+    var el = document.createElement("div");
+    el.classList.add("ol-measure-start-icon");
+    var img = document.createElement("img");
+    img.src = "images/markers/measure-start.svg";
+    img.onload = () => SVGInjector(img);
+    el.appendChild(img);
+    this.getElement()?.appendChild(el);
+  }
+}

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

@@ -26,7 +26,7 @@ export class SmokeMarker extends CustomMarker {
     );
     var el = document.createElement("div");
     el.classList.add("ol-smoke-icon");
-    el.setAttribute("data-color", this.#color);
+    el.style.fill = this.#color;
     var img = document.createElement("img");
     img.src = "images/markers/smoke.svg";
     img.onload = () => SVGInjector(img);

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

@@ -6,6 +6,7 @@
   position: relative;
   width: 40px;
   height: 40px;
+  filter: drop-shadow( 3px 3px 3px rgba(0, 0, 0, .4));
 }
 
 .airbase-icon svg {

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

@@ -7,6 +7,7 @@
   width: 100%;
   height: 100%;
   fill: white;
+  filter: drop-shadow( 3px 3px 3px rgba(0, 0, 0, .4));
 }
 
 .bullseye-icon[data-coalition="red"] svg * {

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

@@ -4,23 +4,36 @@
   display: flex !important;
   justify-content: center;
   align-items: center;
+  filter: drop-shadow( 3px 3px 3px rgba(0, 0, 0, .4));
+  width: fit-content !important;
+  height: fit-content !important;
+  margin: 0 !important;
+  translate: -50% -50%;
 }
 
 /* Container for the measure marker content */
 .leaflet-measure-marker .container {
-  min-width: 150px;
   transform-origin: center;
-  background-color: var(--background-steel);
-  color: white;
+  background-color: white;
+  color: #272727;
   border-radius: 999px;
   font-size: 13px;
   align-content: center;
   border: 2px solid transparent;
+  padding: 4px;
 }
 
 /* Text inside the measure marker */
 .leaflet-measure-marker .text {
-  margin-left: 12px;
+  display: block;
   margin-top: auto;
   margin-bottom: auto;
+  font-weight: bolder;
+  text-wrap: nowrap;
+  padding-left: 5px;
+  padding-right: 5px;
 }
+
+.leaflet-measure-start-marker, .leaflet-measure-end-marker {
+  filter: drop-shadow( 3px 3px 3px rgba(0, 0, 0, .4));
+}

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

@@ -6,6 +6,7 @@
   justify-content: center;
   position: relative;
   width: 100%;
+  filter: drop-shadow( 3px 3px 3px rgba(0, 0, 0, .4));
 }
 
 [data-object|="unit"].attack-cursor {