Merge branch 'v2' of https://github.com/Pax1601/DCSOlympus into v2

frontend/react/src/map/drawings/drawingsmanager.ts

@@ -7,10 +7,12 @@ import { Circle, DivIcon, Layer, LayerGroup, layerGroup, Marker, Polygon, Polyli
 export abstract class DCSDrawing {
   #name: string;
   #parent: DCSDrawingsContainer;
+  #weight: number;
 
   constructor(drawingData, parent: DCSDrawingsContainer) {
     this.#name = drawingData["name"];
     this.#parent = parent;
+    this.setWeight(drawingData);
   }
 
   getName() {
@@ -29,6 +31,26 @@ export abstract class DCSDrawing {
     };
   }
 
+  setWeight(drawingData) {
+    if (!drawingData.thickness) {
+      return;
+    }
+
+    this.#weight = drawingData.thickness * 0.5;
+
+    if (this.#weight === 0) {
+      this.#weight = 0.1;
+    }
+
+    if (this.#weight > 1) {
+      this.#weight = 1;
+    }
+  }
+
+  getWeight() {
+    return this.#weight;
+  }
+
   abstract getLayer(): Layer;
   abstract setOpacity(opacity: number): void;
   abstract getOpacity(): number;
@@ -101,12 +123,19 @@ export class DCSPolygon extends DCSDrawing {
           fillColor: `${decimalToRGBA(drawingData.fillColorString)}`,
           opacity: 1,
           fillOpacity: 1,
-          weight: 1,
+          weight: this.getWeight(),
           dashArray: dashArray,
         });
         break;
 
       case "arrow":
+        let weight = this.getWeight();
+        
+        if (!weight || weight < 1) {
+          weight = 1;
+        }
+
+
         const arrowBounds = [
           [drawingData.points["1"].lat, drawingData.points["1"].lng],
           [drawingData.points["2"].lat, drawingData.points["2"].lng],
@@ -123,7 +152,7 @@ export class DCSPolygon extends DCSDrawing {
           fillColor: `${decimalToRGBA(drawingData.fillColorString)}`,
           opacity: 1,
           fillOpacity: 1,
-          weight: 1,
+          weight: weight,
           dashArray,
         });
         break;
@@ -180,7 +209,7 @@ export class DCSPolygon extends DCSDrawing {
           fillColor: `${decimalToRGBA(drawingData.fillColorString)}`,
           opacity: 1,
           fillOpacity: 1,
-          weight: 1,
+          weight: this.getWeight(),
           dashArray: dashArray,
         });
         break;
@@ -230,7 +259,7 @@ export class DCSPolygon extends DCSDrawing {
           fillColor: `${decimalToRGBA(drawingData.fillColorString)}`,
           opacity: 1,
           fillOpacity: 1,
-          weight: drawingData.thickness,
+          weight: this.getWeight(),
           dashArray: dashArray,
         });
 
@@ -242,11 +271,12 @@ export class DCSPolygon extends DCSDrawing {
           fillColor: `${decimalToRGBA(drawingData.fillColorString)}`,
           opacity: 1,
           fillOpacity: 1,
-          weight: drawingData.thickness,
+          weight: this.getWeight(),
           dashArray: dashArray,
         });
         break;
-      default:
+      
+        default:
         break;
     }
 
@@ -297,7 +327,7 @@ export class DCSLine extends DCSDrawing {
 
     this.#line = new Polyline(points, {
       color: `${decimalToRGBA(drawingData.colorString)}`,
-      weight: drawingData.thickness,
+      weight: this.getWeight(),
       dashArray: dashArray,
     });
 

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

@@ -66,7 +66,7 @@ export function DrawingMenu(props: { open: boolean; onClose: () => void }) {
   function renderDrawingsContainerControls(container: DCSDrawingsContainer) {
     if (container.hasSearchString(searchString)) {
       return (
-        <div className="ml-2 flex flex-col gap-2">
+        <div className="ml-2 flex flex-col gap-2" key={container.getGuid()}>
           <div className="flex flex-col gap-2">
             <div className="flex justify-between gap-2">
               <FaChevronRight
@@ -116,10 +116,10 @@ export function DrawingMenu(props: { open: boolean; onClose: () => void }) {
           </div>
           {openContainers.includes(container) && container.getSubContainers().map((container) => renderDrawingsContainerControls(container))}
           {openContainers.includes(container) &&
-            container.getDrawings().map((drawing) => {
+            container.getDrawings().map((drawing, index) => {
               if (drawing instanceof DCSEmptyLayer) return <></>;
               return (
-                <div className="ml-4 flex justify-start gap-2">
+                <div className="ml-4 flex justify-start gap-2" key={index}>
                   <FontAwesomeIcon
                     icon={drawing.getVisibility() ? faEye : faEyeSlash}
                     className={`