weyne/DCSOlympus
1
0
Fork 0
mirror of https://github.com/Pax1601/DCSOlympus.git synced 2025-10-29 16:56:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(navpoints): added header button to quick toggle navpoints drawing

Browse Source
This commit is contained in:
MarcoJayUsai 2025-03-28 19:21:59 +01:00
parent 0558227ce6
commit 3814052fd9
4 changed files with 58 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/react/src/constants/constants.ts
View File

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

2
frontend/react/src/map/drawings/drawingsmanager.ts
View File

@ -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);
});
}

1
frontend/react/src/types/types.ts
View File

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

99
frontend/react/src/ui/panels/header.tsx
View File

@ -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 { 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 { FaCheck, FaRedo, FaSpinner } from "react-icons/fa";
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,
@ -27,21 +23,23 @@ import {
SessionDataChangedEvent,
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);
@ -251,13 +249,9 @@ export function Header() {
<span className="my-auto text-nowrap font-bold">Game Master</span>
{enabledCommandModes.length > 0 && (
<>
{loadingNewCommandMode ? (
<FaSpinner
className={`my-auto ml-2 animate-spin text-white`}
/>
) : (
<FaRedo className={`my-auto ml-2 text-gray-200`} />
)}
{loadingNewCommandMode ? <FaSpinner className={`
my-auto ml-2 animate-spin text-white
`} /> : <FaRedo className={`my-auto ml-2 text-gray-200`} />}
</>
)}
</div>
@ -283,9 +277,9 @@ export function Header() {
{enabledCommandModes.length > 0 && (
<>
{loadingNewCommandMode ? (
<FaSpinner
className={`my-auto ml-2 animate-spin text-gray-200`}
/>
<FaSpinner className={`
my-auto ml-2 animate-spin text-gray-200
`} />
) : (
<FaRedo className={`my-auto ml-2 text-gray-200`} />
)}
@ -314,9 +308,9 @@ export function Header() {
{enabledCommandModes.length > 0 && (
<>
{loadingNewCommandMode ? (
<FaSpinner
className={`my-auto ml-2 animate-spin text-gray-200`}
/>
<FaSpinner className={`
my-auto ml-2 animate-spin text-gray-200
`} />
) : (
<FaRedo className={`my-auto ml-2 text-gray-200`} />
)}
@ -351,9 +345,11 @@ export function Header() {
onClick={() => {
audioState === AudioManagerState.RUNNING ? getApp().getAudioManager().stop() : getApp().getAudioManager().start();
}}
className={audioState === AudioManagerState.ERROR ? `
animate-pulse !border-red-500 !text-red-500
` : ""}
className={
audioState === AudioManagerState.ERROR
? `animate-pulse !border-red-500 !text-red-500`
: ""
}
tooltip={() => (
<OlExpandingTooltip
title="Enable/disable audio"
@ -455,6 +451,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}