Merge pull request #1098 from Pax1601/feature/navpoints-custom-icons

Feature/navpoints custom icons

frontend/react/public/images/markers/navpoint-tgt.svg

@@ -0,0 +1,4 @@
+<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+    <rect x="48" y="10" width="4" height="80" fill="white"/>
+    <rect x="10" y="48" width="80" height="4" fill="white"/>
+</svg>

frontend/react/public/images/markers/navpoint.svg

@@ -0,0 +1,3 @@
+<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <polygon points="100,10 10,190 190,190" fill="white" />
+</svg>

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

@@ -1,9 +1,10 @@
 import { decimalToRGBA } from "../../other/utils";
 import { getApp } from "../../olympusapp";
-import { DrawingsInitEvent, DrawingsUpdatedEvent, MapOptionsChangedEvent, SessionDataLoadedEvent } from "../../events";
+import { CommandModeOptionsChangedEvent, DrawingsInitEvent, DrawingsUpdatedEvent, MapOptionsChangedEvent, SessionDataLoadedEvent } from "../../events";
 import { MapOptions } from "../../types/types";
 import { Circle, DivIcon, Layer, LayerGroup, layerGroup, Marker, Polygon, Polyline } from "leaflet";
 import { NavpointMarker } from "../markers/navpointmarker";
+import { BLUE_COMMANDER, GAME_MASTER, NONE, RED_COMMANDER } from "../../constants/constants";
 
 export abstract class DCSDrawing {
   #name: string;
@@ -459,7 +460,7 @@ export class DCSNavpoint extends DCSDrawing {
   constructor(drawingData, parent) {
     super(drawingData, parent);
 
-    this.#point = new NavpointMarker([drawingData.lat, drawingData.lng], drawingData.callsignStr, drawingData.comment);
+    this.#point = new NavpointMarker([drawingData.lat, drawingData.lng], drawingData.callsignStr, drawingData.comment, drawingData.tag);
 
     this.setVisibility(true);
   }
@@ -527,7 +528,9 @@ export class DCSDrawingsContainer {
   initFromData(drawingsData) {
     let hasContainers = false;
     Object.keys(drawingsData).forEach((layerName: string) => {
-      if (drawingsData[layerName]["name"] === undefined && drawingsData[layerName]["callsignStr"] === undefined) {
+      const layerIsAContainer = drawingsData[layerName]["name"] === undefined && drawingsData[layerName]["callsignStr"] === undefined;
+      const layerIsNotEmpty = Object.keys(drawingsData[layerName]).length > 0;
+      if (layerIsAContainer && layerIsNotEmpty) {
         const newContainer = new DCSDrawingsContainer(layerName, this);
         this.addSubContainer(newContainer);
         newContainer.initFromData(drawingsData[layerName]);
@@ -579,15 +582,12 @@ export class DCSDrawingsContainer {
       else this.addDrawing(newDrawing);
     });
 
-    if (othersContainer.getDrawings().length === 0) this.removeSubContainer(othersContainer); // Remove empty container
+    if (othersContainer.getDrawings().length === 0) {
+      this.removeSubContainer(othersContainer); // Remove empty container 
+      // FIXME: it's not working for main containers.
+    }
   }
 
-  // initNavpoints(drawingsData) {
-  //   const newContainer = new DCSDrawingsContainer('Navpoints', this);
-  //   this.addSubContainer(newContainer);
-  //   newContainer.initFromData(drawingsData);
-  // }
-
   getLayerGroup() {
     return this.#layerGroup;
   }
@@ -705,6 +705,7 @@ export class DrawingsManager {
   #sessionDataDrawings = {};
   #sessionDataNavpoints = {};
   #initialized: boolean = false;
+  #hiddenContainers: Record<string, { parent: DCSDrawingsContainer, container: DCSDrawingsContainer }> = {};
 
   constructor() {
     const drawingsLayerGroup = new LayerGroup();
@@ -727,6 +728,13 @@ export class DrawingsManager {
       this.#drawingsContainer.setVisibility(getApp().getMap().getOptions().showMissionDrawings);
       this.#navpointsContainer.setVisibility(getApp().getMap().getOptions().showMissionNavpoints);
     });
+
+    CommandModeOptionsChangedEvent.on((commandOptions) => {
+      if (commandOptions.commandMode !== GAME_MASTER) {
+        this.restrictCoalitionLayers(commandOptions.commandMode)
+      }
+      this.restoreHiddenLayers(commandOptions.commandMode);
+    })
   }
 
   initDrawings(data: { drawings: Record<string, Record<string, any>> }): boolean {
@@ -747,6 +755,53 @@ export class DrawingsManager {
     }
   }
 
+  private restrictContainer(containerName: string, targetContainer: any, hiddenKey: string) {
+    const container = targetContainer.getSubContainers().find(c => c.getName().toLowerCase() === containerName.toLowerCase());
+    if (container) {
+      this.#hiddenContainers[hiddenKey] = {
+        parent: container['#parent'],
+        container: container
+      };
+      container.setVisibility(false);
+      targetContainer.removeSubContainer(container);
+    }
+  }
+
+  restrictCoalitionLayers(playerRole: string) {
+    if (playerRole === RED_COMMANDER) {
+      this.restrictContainer('Blue', this.#drawingsContainer, 'blue_drawings');
+      this.restrictContainer('blue', this.#navpointsContainer, 'blue_navpoints');
+    } else {
+      this.restrictContainer('Red', this.#drawingsContainer, 'red_drawings');
+      this.restrictContainer('red', this.#navpointsContainer, 'red_navpoints');
+    }
+  }
+
+  private restoreContainer(key: string, targetContainer: any) {
+    if (this.#hiddenContainers[key]) {
+      console.log('this.#hiddenContainers[key] esiste ', this.#hiddenContainers);
+
+      const container = this.#hiddenContainers[key].container;
+      targetContainer.addSubContainer(container);
+      container.setVisibility(true);
+    }
+  }
+
+  restoreHiddenLayers(playerRole: string) {
+    console.log('--- restoring hidden layers for role ', playerRole);
+
+    const roleContainers: Record<string, string[]> = {
+      [RED_COMMANDER]: ['red_drawings', 'red_navpoints'],
+      [BLUE_COMMANDER]: ['blue_drawings', 'blue_navpoints'],
+      [GAME_MASTER]: ['red_drawings', 'red_navpoints', 'blue_drawings', 'blue_navpoints']
+    };
+
+    roleContainers[playerRole]?.forEach((key) => {
+      const targetContainer = key.includes('drawings') ? this.#drawingsContainer : this.#navpointsContainer;
+      this.restoreContainer(key, targetContainer);
+    });
+  }
+
   getDrawingsContainer() {
     return this.#drawingsContainer;
   }

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

@@ -1,14 +1,35 @@
 import { DivIcon, LatLngExpression, MarkerOptions } from "leaflet";
 import { CustomMarker } from "./custommarker";
+import { SVGInjector } from "@tanem/svg-injector";
 
 export class NavpointMarker extends CustomMarker {
   #callsignStr: string;
   #comment: string;
+  #tag: string;
 
-  constructor(latlng: LatLngExpression, callsignStr: string, comment?: string) {
+  constructor(latlng: LatLngExpression, callsignStr: string, comment: string, tag: string) {
     super(latlng, { interactive: false, draggable: false });
     this.#callsignStr = callsignStr;
     comment ? this.#comment = comment : null;
+    tag ? this.#tag = tag : null;
+  }
+
+  private getImage() {
+    switch (this.#tag) {
+      case 'TGT':
+        return 'images/markers/navpoint-tgt.svg'
+      default:
+        return 'images/markers/navpoint.svg'
+    }
+  }
+
+  private getSize() {
+    switch (this.#tag) {
+      case 'TGT':
+        return '20px'
+      default:
+        return '8px'
+    }
   }
 
   createIcon() {
@@ -16,7 +37,7 @@ export class NavpointMarker extends CustomMarker {
     let icon = new DivIcon({
       className: "leaflet-navpoint-icon",
       iconAnchor: [0, 0],
-      iconSize: [50, 50],
+      iconSize: [2, 2],
     });
     this.setIcon(icon);
 
@@ -26,6 +47,14 @@ export class NavpointMarker extends CustomMarker {
     // Main icon
     let pointIcon = document.createElement("div");
     pointIcon.classList.add("navpoint-icon");
+    var img = document.createElement("img");
+    img.src = this.getImage();
+    img.onload = () => {
+      SVGInjector(img);
+    };
+    img.style.width = this.getSize();
+    img.style.height = this.getSize();
+    pointIcon.appendChild(img);
     el.append(pointIcon);
 
     // Label

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

@@ -5,11 +5,7 @@
     gap: 10px;
 }
 .ol-navpoint-marker>.navpoint>.navpoint-icon {
-    height: 8px;
-    width: 8px;
-    background: white;
-    flex: none;
-    transform: rotate3d(0, 0, 1, 45deg);
+    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 1));
 }
 
 .ol-navpoint-marker>.navpoint>.navpoint-main-label {
@@ -17,6 +13,8 @@
     flex-direction: column;
     font-size: 10px;
     color: white;
+    text-shadow: -1px -1px 2px rgb(113, 113, 113), 1px -1px 2px rgb(113, 113, 113), -1px 1px 2px rgb(113, 113, 113), 1px 1px 2px rgb(113, 113, 113);
+
 }
 
 .ol-navpoint-marker .navpoint-comment-box {
@@ -24,4 +22,6 @@
     font-style: italic;
     color: white;
     max-width: 50px;
+    text-shadow: -1px -1px 2px rgb(113, 113, 113), 1px -1px 2px rgb(113, 113, 113), -1px 1px 2px rgb(113, 113, 113), 1px 1px 2px rgb(113, 113, 113);
+
 }