Merge pull request #1073 from Pax1601/drawings-refinements

Drawings refinements

frontend/react/src/constants/constants.ts

@@ -419,6 +419,7 @@ export const MAP_OPTIONS_DEFAULTS: MapOptions = {
   hideChromeWarning: false,
   hideSecureWarning: false,
   showMissionDrawings: false,
+  showMissionNavpoints: false,
   clusterGroundUnits: true,
   showUnitCallsigns: true,
 };

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

@@ -714,6 +714,7 @@ export class DrawingsManager {
 
     MapOptionsChangedEvent.on((mapOptions: MapOptions) => {
       this.#drawingsContainer.setVisibility(mapOptions.showMissionDrawings);
+      this.#navpointsContainer.setVisibility(mapOptions.showMissionNavpoints);
     });
 
     SessionDataLoadedEvent.on((sessionData) => {
@@ -724,6 +725,7 @@ export class DrawingsManager {
         if (this.#sessionDataNavpoints["Navpoints"]) this.#navpointsContainer.fromJSON(this.#sessionDataNavpoints["Navpoints"]);
       }
       this.#drawingsContainer.setVisibility(getApp().getMap().getOptions().showMissionDrawings);
+      this.#navpointsContainer.setVisibility(getApp().getMap().getOptions().showMissionNavpoints);
     });
   }
 

frontend/react/src/types/types.ts

@@ -31,6 +31,7 @@ export type MapOptions = {
   hideChromeWarning: boolean;
   hideSecureWarning: boolean;
   showMissionDrawings: boolean;
+  showMissionNavpoints: boolean;
   clusterGroundUnits: boolean;
   showUnitCallsigns: boolean;
 };

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

@@ -170,7 +170,7 @@ export function DrawingMenu(props: { open: boolean; onClose: () => void }) {
                     onClick={() => {
                       const latLng = drawing.getLayer()["getLatLng"] && drawing.getLayer()["getLatLng"]();
                       const bounds = drawing.getLayer()["getBounds"] && drawing.getLayer()["getBounds"]();
-                      latLng && getApp().getMap().setView(latLng, 14);
+                      latLng && getApp().getMap().setView(latLng, 10);
                       bounds && getApp().getMap().fitBounds(bounds);
                     }}
                   />

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

@@ -1,21 +1,17 @@
+import { faCompass } from "@fortawesome/free-regular-svg-icons";
+import { faCamera, faDrawPolygon, faFlag, faObjectGroup, faSkull, faTriangleExclamation, faVolumeHigh, faWifi } from "@fortawesome/free-solid-svg-icons";
 import React, { useEffect, useRef, useState } from "react";
-import { OlRoundStateButton, OlStateButton, OlLockStateButton } from "../components/olstatebutton";
+import { FaCheck, FaRedo, FaSpinner } from "react-icons/fa";
-import { faSkull, faCamera, faFlag, faVolumeHigh, faDrawPolygon, faTriangleExclamation, faWifi, faObjectGroup } from "@fortawesome/free-solid-svg-icons";
-import { OlDropdownItem, OlDropdown } from "../components/oldropdown";
-import { OlLabelToggle } from "../components/ollabeltoggle";
-import { getApp, IP, VERSION } from "../../olympusapp";
-import {
-  olButtonsVisibilityAirbase,
-  olButtonsVisibilityAircraft,
-  olButtonsVisibilityDcs,
-  olButtonsVisibilityGroundunit,
-  olButtonsVisibilityGroundunitSam,
-  olButtonsVisibilityHelicopter,
-  olButtonsVisibilityHuman,
-  olButtonsVisibilityNavyunit,
-  olButtonsVisibilityOlympus,
-} from "../components/olicons";
 import { FaChevronLeft, FaChevronRight, FaFloppyDisk } from "react-icons/fa6";
+import {
+  AudioManagerState,
+  BLUE_COMMANDER,
+  COMMAND_MODE_OPTIONS_DEFAULTS,
+  GAME_MASTER,
+  MAP_HIDDEN_TYPES_DEFAULTS,
+  MAP_OPTIONS_DEFAULTS,
+  RED_COMMANDER,
+} from "../../constants/constants";
 import {
   AudioManagerStateChangedEvent,
   CommandModeOptionsChangedEvent,
@@ -28,21 +24,23 @@ import {
   SessionDataLoadedEvent,
   SessionDataSavedEvent,
 } from "../../events";
-import {
-  AudioManagerState,
-  BLUE_COMMANDER,
-  COMMAND_MODE_OPTIONS_DEFAULTS,
-  GAME_MASTER,
-  LoginSubState,
-  MAP_HIDDEN_TYPES_DEFAULTS,
-  MAP_OPTIONS_DEFAULTS,
-  OlympusState,
-  RED_COMMANDER,
-} from "../../constants/constants";
 import { OlympusConfig } from "../../interfaces";
-import { FaCheck, FaRedo, FaSpinner } from "react-icons/fa";
+import { getApp, IP, VERSION } from "../../olympusapp";
+import { OlDropdown, OlDropdownItem } from "../components/oldropdown";
 import { OlExpandingTooltip } from "../components/olexpandingtooltip";
-import { stat } from "fs";
+import {
+  olButtonsVisibilityAirbase,
+  olButtonsVisibilityAircraft,
+  olButtonsVisibilityDcs,
+  olButtonsVisibilityGroundunit,
+  olButtonsVisibilityGroundunitSam,
+  olButtonsVisibilityHelicopter,
+  olButtonsVisibilityHuman,
+  olButtonsVisibilityNavyunit,
+  olButtonsVisibilityOlympus,
+} from "../components/olicons";
+import { OlLabelToggle } from "../components/ollabeltoggle";
+import { OlLockStateButton, OlRoundStateButton, OlStateButton } from "../components/olstatebutton";
 
 export function Header() {
   const [mapHiddenTypes, setMapHiddenTypes] = useState(MAP_HIDDEN_TYPES_DEFAULTS);
@@ -267,13 +265,9 @@ export function Header() {
             <span className="my-auto text-nowrap font-bold">Game Master</span>
             {enabledCommandModes.length > 0 && (
               <>
-                {loadingNewCommandMode ? (
+                {loadingNewCommandMode ? <FaSpinner className={`
-                  <FaSpinner
+                  my-auto ml-2 animate-spin text-white
-                    className={`my-auto ml-2 animate-spin text-white`}
+                `} /> : <FaRedo className={`my-auto ml-2 text-gray-200`} />}
-                  />
-                ) : (
-                  <FaRedo className={`my-auto ml-2 text-gray-200`} />
-                )}
               </>
             )}
           </div>
@@ -299,9 +293,9 @@ export function Header() {
             {enabledCommandModes.length > 0 && (
               <>
                 {loadingNewCommandMode ? (
-                  <FaSpinner
+                  <FaSpinner className={`
-                    className={`my-auto ml-2 animate-spin text-gray-200`}
+                    my-auto ml-2 animate-spin text-gray-200
-                  />
+                  `} />
                 ) : (
                   <FaRedo className={`my-auto ml-2 text-gray-200`} />
                 )}
@@ -330,9 +324,9 @@ export function Header() {
             {enabledCommandModes.length > 0 && (
               <>
                 {loadingNewCommandMode ? (
-                  <FaSpinner
+                  <FaSpinner className={`
-                    className={`my-auto ml-2 animate-spin text-gray-200`}
+                    my-auto ml-2 animate-spin text-gray-200
-                  />
+                  `} />
                 ) : (
                   <FaRedo className={`my-auto ml-2 text-gray-200`} />
                 )}
@@ -367,9 +361,11 @@ export function Header() {
             onClick={() => {
               audioState === AudioManagerState.RUNNING ? getApp().getAudioManager().stop() : getApp().getAudioManager().start();
             }}
-            className={audioState === AudioManagerState.ERROR ? `
+            className={
-              animate-pulse !border-red-500 !text-red-500
+              audioState === AudioManagerState.ERROR
-            ` : ""}
+                ? `animate-pulse !border-red-500 !text-red-500`
+                : ""
+            }
             tooltip={() => (
               <OlExpandingTooltip
                 title="Enable/disable audio"
@@ -472,6 +468,19 @@ export function Header() {
               />
             )}
           />
+          <OlRoundStateButton
+            icon={faCompass}
+            checked={mapOptions.showMissionNavpoints}
+            onClick={() => {
+              getApp().getMap().setOption("showMissionNavpoints", !mapOptions.showMissionNavpoints);
+            }}
+            tooltip={() => (
+              <OlExpandingTooltip
+                title="Hide/Show mission Navpoints"
+                content="To filter the visibile Navpoints and change their opacity, use the Navpoints section of the Mission Drawings menu on the left sidebar."
+              />
+            )}
+          />
           <OlRoundStateButton
             onClick={() => getApp().getMap().setOption("showUnitsEngagementRings", !mapOptions.showUnitsEngagementRings)}
             checked={mapOptions.showUnitsEngagementRings}