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

Implemented basic Plugin handling

Browse Source
This commit is contained in:
Pax1601
2023-09-15 17:05:26 +02:00
parent ad06117b78
commit 588228c050
75 changed files with 1920 additions and 1657 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
client/src/panels/hotgrouppanel.ts
View File

@@ -1,4 +1,4 @@
import { getUnitsManager } from "..";
import { getApp } from "..";
import { Unit } from "../unit/unit";
import { Panel } from "./panel";
@@ -15,7 +15,7 @@ export class HotgroupPanel extends Panel {
refreshHotgroups() {
for (let hotgroup = 1; hotgroup <= 9; hotgroup++){
this.removeHotgroup(hotgroup);
if (getUnitsManager().getUnitsByHotgroup(hotgroup).length > 0)
if (getApp().getUnitsManager().getUnitsByHotgroup(hotgroup).length > 0)
this.addHotgroup(hotgroup);
}
@@ -32,7 +32,7 @@ export class HotgroupPanel extends Panel {
// Hotgroup unit count
var countDiv = document.createElement("div");
countDiv.innerText = `x${getUnitsManager().getUnitsByHotgroup(hotgroup).length}`;
countDiv.innerText = `x${getApp().getUnitsManager().getUnitsByHotgroup(hotgroup).length}`;
var el = document.createElement("div");
el.appendChild(hotgroupDiv);
@@ -43,15 +43,15 @@ export class HotgroupPanel extends Panel {
this.getElement().appendChild(el);
el.addEventListener("click", () => {
getUnitsManager().selectUnitsByHotgroup(hotgroup);
getApp().getUnitsManager().selectUnitsByHotgroup(hotgroup);
});
el.addEventListener("mouseover", () => {
getUnitsManager().getUnitsByHotgroup(hotgroup).forEach((unit: Unit) => unit.setHighlighted(true));
getApp().getUnitsManager().getUnitsByHotgroup(hotgroup).forEach((unit: Unit) => unit.setHighlighted(true));
});
el.addEventListener("mouseout", () => {
getUnitsManager().getUnitsByHotgroup(hotgroup).forEach((unit: Unit) => unit.setHighlighted(false));
getApp().getUnitsManager().getUnitsByHotgroup(hotgroup).forEach((unit: Unit) => unit.setHighlighted(false));
});
}

7
client/src/panels/logpanel.ts
View File

@@ -1,4 +1,5 @@
import { getMouseInfoPanel } from "..";
import { getApp } from "..";
import { MouseInfoPanel } from "./mouseinfopanel";
import { Panel } from "./panel";
export class LogPanel extends Panel {
@@ -37,7 +38,7 @@ export class LogPanel extends Panel {
});
const mouseInfoPanel = getMouseInfoPanel();
const mouseInfoPanel = getApp().getPanelsManager().get("mouseInfo") as MouseInfoPanel;
new ResizeObserver(() => this.#calculateHeight()).observe(mouseInfoPanel.getElement())
}
@@ -89,7 +90,7 @@ export class LogPanel extends Panel {
}
#calculateHeight() {
const mouseInfoPanel = getMouseInfoPanel();
const mouseInfoPanel = getApp().getPanelsManager().get("mouseInfo");
if (this.#open)
this.getElement().style.height = `${mouseInfoPanel.getElement().offsetTop - this.getElement().offsetTop - 10}px`;
else

40
client/src/panels/mouseinfopanel.ts
View File

@@ -1,5 +1,5 @@
import { Icon, LatLng, Marker, Polyline } from "leaflet";
import { getMap, getMissionHandler, getUnitsManager } from "..";
import { getApp } from "..";
import { distance, bearing, zeroAppend, mToNm, nmToFt } from "../other/utils";
import { Unit } from "../unit/unit";
import { Panel } from "./panel";
@@ -22,19 +22,19 @@ export class MouseInfoPanel extends Panel {
this.#measureBox.classList.add("ol-measure-box", "hide");
document.body.appendChild(this.#measureBox);
getMap()?.on("click", (e: any) => this.#onMapClick(e));
getMap()?.on('zoom', (e: any) => this.#onZoom(e));
getMap()?.on('mousemove', (e: any) => this.#onMouseMove(e));
getApp().getMap()?.on("click", (e: any) => this.#onMapClick(e));
getApp().getMap()?.on('zoom', (e: any) => this.#onZoom(e));
getApp().getMap()?.on('mousemove', (e: any) => this.#onMouseMove(e));
document.addEventListener('unitsSelection', (e: CustomEvent<Unit[]>) => this.#update());
document.addEventListener('clearSelection', () => this.#update());
}
#update() {
const mousePosition = getMap().getMouseCoordinates();
const mousePosition = getApp().getMap().getMouseCoordinates();
var selectedUnitPosition = null;
var selectedUnits = getUnitsManager().getSelectedUnits();
var selectedUnits = getApp().getUnitsManager().getSelectedUnits();
if (selectedUnits && selectedUnits.length == 1)
selectedUnitPosition = new LatLng(selectedUnits[0].getPosition().lat, selectedUnits[0].getPosition().lng);
@@ -44,7 +44,7 @@ export class MouseInfoPanel extends Panel {
this.getElement().querySelector(`#measuring-tool`)?.classList.toggle("hide", this.#measurePoint === null && selectedUnitPosition === null);
var bullseyes = getMissionHandler().getBullseyes();
var bullseyes = getApp().getMissionManager().getBullseyes();
for (let idx in bullseyes)
this.#drawMeasure(null, `bullseye-${idx}`, bullseyes[idx].getLatLng(), mousePosition);
@@ -61,19 +61,19 @@ export class MouseInfoPanel extends Panel {
this.#measureBox.classList.toggle("hide", false);
this.#measurePoint = e.latlng;
this.#measureMarker.setLatLng(e.latlng);
this.#measureMarker.addTo(getMap());
if (!getMap().hasLayer(this.#measureLine))
this.#measureLine.addTo(getMap());
this.#measureMarker.addTo(getApp().getMap());
if (!getApp().getMap().hasLayer(this.#measureLine))
this.#measureLine.addTo(getApp().getMap());
}
else {
this.#measureBox.classList.toggle("hide", true);
this.#measurePoint = null;
if (getMap().hasLayer(this.#measureMarker))
getMap().removeLayer(this.#measureMarker);
if (getApp().getMap().hasLayer(this.#measureMarker))
getApp().getMap().removeLayer(this.#measureMarker);
this.#measureLine.setLatLngs([]);
if (getMap().hasLayer(this.#measureLine))
getMap().removeLayer(this.#measureLine);
if (getApp().getMap().hasLayer(this.#measureLine))
getApp().getMap().removeLayer(this.#measureLine);
}
}
@@ -81,15 +81,15 @@ export class MouseInfoPanel extends Panel {
}
#drawMeasureLine() {
var mouseLatLng = getMap().containerPointToLatLng(getMap().getMousePosition());
var mouseLatLng = getApp().getMap().containerPointToLatLng(getApp().getMap().getMousePosition());
if (this.#measurePoint != null) {
var points = [this.#measurePoint, mouseLatLng];
this.#measureLine.setLatLngs(points);
var dist = distance(this.#measurePoint.lat, this.#measurePoint.lng, mouseLatLng.lat, mouseLatLng.lng);
var bear = bearing(this.#measurePoint.lat, this.#measurePoint.lng, mouseLatLng.lat, mouseLatLng.lng);
var startXY = getMap().latLngToContainerPoint(this.#measurePoint);
var dx = (getMap().getMousePosition().x - startXY.x);
var dy = (getMap().getMousePosition().y - startXY.y);
var startXY = getApp().getMap().latLngToContainerPoint(this.#measurePoint);
var dx = (getApp().getMap().getMousePosition().x - startXY.x);
var dy = (getApp().getMap().getMousePosition().y - startXY.y);
var angle = Math.atan2(dy, dx);
if (angle > Math.PI / 2)
@@ -108,8 +108,8 @@ export class MouseInfoPanel extends Panel {
let data = [`${bng}°`, `${str} ${unit}`];
this.#measureBox.innerText = data.join(" / ");
this.#measureBox.style.left = (getMap().getMousePosition().x + startXY.x) / 2 - this.#measureBox.offsetWidth / 2 + "px";
this.#measureBox.style.top = (getMap().getMousePosition().y + startXY.y) / 2 - this.#measureBox.offsetHeight / 2 + "px";
this.#measureBox.style.left = (getApp().getMap().getMousePosition().x + startXY.x) / 2 - this.#measureBox.offsetWidth / 2 + "px";
this.#measureBox.style.top = (getApp().getMap().getMousePosition().y + startXY.y) / 2 - this.#measureBox.offsetHeight / 2 + "px";
this.#measureBox.style.rotate = angle + "rad";
}
}

30
client/src/panels/panel.ts
View File

@@ -1,35 +1,31 @@
import { OlympusApp } from "../olympusapp";
import { PanelEventsManager } from "./paneleventsmanager";
export abstract class Panel {
#element: HTMLElement
#eventsManager!: PanelEventsManager;
#olympusApp!: OlympusApp;
constructor(ID: string, olympusApp?:OlympusApp ) {
constructor(ID: string) {
this.#element = <HTMLElement>document.getElementById(ID);
if ( olympusApp ) {
this.setOlympusApp( olympusApp );
}
this.#eventsManager = new PanelEventsManager();
}
show() {
this.#element.classList.toggle("hide", false);
this.getEventsManager()?.trigger( "show", {} );
this.getEventsManager()?.trigger("show", {});
}
hide() {
this.#element.classList.toggle("hide", true);
this.getEventsManager()?.trigger( "hide", {} );
this.getEventsManager()?.trigger("hide", {});
}
toggle() {
// Simple way to track if currently visible
if (this.getVisible())
this.hide();
else
else
this.show();
}
@@ -37,21 +33,11 @@ export abstract class Panel {
return this.#element;
}
getVisible(){
return (!this.getElement().classList.contains( "hide" ) );
getVisible() {
return (!this.getElement().classList.contains("hide"));
}
getEventsManager() {
return this.#eventsManager;
}
getOlympusApp() {
return this.#olympusApp;
}
setOlympusApp( olympusApp:OlympusApp ) {
this.#olympusApp = olympusApp;
this.#eventsManager = new PanelEventsManager( this.getOlympusApp() );
}
}

49
client/src/panels/paneleventsmanager.ts
View File

@@ -1,50 +1,29 @@
import { OlympusApp } from "../olympusapp";
import { EventsManager } from "../other/eventsmanager";
interface IListener {
callback: CallableFunction;
name?: string
}
export class PanelEventsManager extends EventsManager {
constructor( olympusApp:OlympusApp ) {
constructor() {
super();
super( olympusApp );
this.add( "hide", [] );
this.add( "show", [] );
this.add("hide", []);
this.add("show", []);
}
on( eventName:string, listener:IListener ) {
const event = this.get( eventName );
if ( !event ) {
throw new Error( `Event name "${eventName}" is not valid.` );
on(eventName: string, listener: Listener) {
const event = this.get(eventName);
if (!event) {
throw new Error(`Event name "${eventName}" is not valid.`);
}
this.get( eventName ).push({
this.get(eventName).push({
"callback": listener.callback
});
}
trigger( eventName:string, contextData:object ) {
const listeners = this.get( eventName );
if ( listeners ) {
listeners.forEach( ( listener:IListener ) => {
listener.callback( contextData );
trigger(eventName: string, contextData: object) {
const listeners = this.get(eventName);
if (listeners) {
listeners.forEach((listener: Listener) => {
listener.callback(contextData);
});
}
}
}

17
client/src/panels/panelsmanager.ts
View File

@@ -1,17 +0,0 @@
import { OlympusApp } from "../olympusapp";
import { Manager } from "../other/manager";
import { Panel } from "./panel";
export class PanelsManager extends Manager {
#panels: { [key:string]: Panel } = {}
constructor( olympusApp:OlympusApp ) {
super( olympusApp );
}
get( name:string ): Panel {
return super.get( name );
}
}

47
client/src/panels/unitcontrolpanel.ts
View File

@@ -1,5 +1,5 @@
import { SVGInjector } from "@tanem/svg-injector";
import { getUnitsManager } from "..";
import { getApp } from "..";
import { Dropdown } from "../controls/dropdown";
import { Slider } from "../controls/slider";
import { aircraftDatabase } from "../unit/databases/aircraftdatabase";
@@ -8,7 +8,6 @@ import { Panel } from "./panel";
import { Switch } from "../controls/switch";
import { ROEDescriptions, ROEs, altitudeIncrements, emissionsCountermeasures, emissionsCountermeasuresDescriptions, maxAltitudeValues, maxSpeedValues, minAltitudeValues, minSpeedValues, reactionsToThreat, reactionsToThreatDescriptions, speedIncrements } from "../constants/constants";
import { ftToM, knotsToMs, mToFt, msToKnots } from "../other/utils";
import { GeneralSettings, Radio, TACAN } from "../@types/unit";
export class UnitControlPanel extends Panel {
#altitudeSlider: Slider;
@@ -33,24 +32,24 @@ export class UnitControlPanel extends Panel {
super(ID);
/* Unit control sliders */
this.#altitudeSlider = new Slider("altitude-slider", 0, 100, "ft", (value: number) => { getUnitsManager().selectedUnitsSetAltitude(ftToM(value)); });
this.#altitudeTypeSwitch = new Switch("altitude-type-switch", (value: boolean) => { getUnitsManager().selectedUnitsSetAltitudeType(value? "ASL": "AGL"); });
this.#altitudeSlider = new Slider("altitude-slider", 0, 100, "ft", (value: number) => { getApp().getUnitsManager().selectedUnitsSetAltitude(ftToM(value)); });
this.#altitudeTypeSwitch = new Switch("altitude-type-switch", (value: boolean) => { getApp().getUnitsManager().selectedUnitsSetAltitudeType(value? "ASL": "AGL"); });
this.#speedSlider = new Slider("speed-slider", 0, 100, "kts", (value: number) => { getUnitsManager().selectedUnitsSetSpeed(knotsToMs(value)); });
this.#speedTypeSwitch = new Switch("speed-type-switch", (value: boolean) => { getUnitsManager().selectedUnitsSetSpeedType(value? "CAS": "GS"); });
this.#speedSlider = new Slider("speed-slider", 0, 100, "kts", (value: number) => { getApp().getUnitsManager().selectedUnitsSetSpeed(knotsToMs(value)); });
this.#speedTypeSwitch = new Switch("speed-type-switch", (value: boolean) => { getApp().getUnitsManager().selectedUnitsSetSpeedType(value? "CAS": "GS"); });
/* Option buttons */
// Reversing the ROEs so that the least "aggressive" option is always on the left
this.#optionButtons["ROE"] = ROEs.slice(0).reverse().map((option: string, index: number) => {
return this.#createOptionButton(option, `roe/${option.toLowerCase()}.svg`, ROEDescriptions.slice(0).reverse()[index], () => { getUnitsManager().selectedUnitsSetROE(option); });
return this.#createOptionButton(option, `roe/${option.toLowerCase()}.svg`, ROEDescriptions.slice(0).reverse()[index], () => { getApp().getUnitsManager().selectedUnitsSetROE(option); });
}).filter((button: HTMLButtonElement, index: number) => {return ROEs[index] !== "";});
this.#optionButtons["reactionToThreat"] = reactionsToThreat.map((option: string, index: number) => {
return this.#createOptionButton(option, `threat/${option.toLowerCase()}.svg`, reactionsToThreatDescriptions[index],() => { getUnitsManager().selectedUnitsSetReactionToThreat(option); });
return this.#createOptionButton(option, `threat/${option.toLowerCase()}.svg`, reactionsToThreatDescriptions[index],() => { getApp().getUnitsManager().selectedUnitsSetReactionToThreat(option); });
});
this.#optionButtons["emissionsCountermeasures"] = emissionsCountermeasures.map((option: string, index: number) => {
return this.#createOptionButton(option, `emissions/${option.toLowerCase()}.svg`, emissionsCountermeasuresDescriptions[index],() => { getUnitsManager().selectedUnitsSetEmissionsCountermeasures(option); });
return this.#createOptionButton(option, `emissions/${option.toLowerCase()}.svg`, emissionsCountermeasuresDescriptions[index],() => { getApp().getUnitsManager().selectedUnitsSetEmissionsCountermeasures(option); });
});
this.getElement().querySelector("#roe-buttons-container")?.append(...this.#optionButtons["ROE"]);
@@ -59,12 +58,12 @@ export class UnitControlPanel extends Panel {
/* On off switch */
this.#onOffSwitch = new Switch("on-off-switch", (value: boolean) => {
getUnitsManager().selectedUnitsSetOnOff(value);
getApp().getUnitsManager().selectedUnitsSetOnOff(value);
});
/* Follow roads switch */
this.#followRoadsSwitch = new Switch("follow-roads-switch", (value: boolean) => {
getUnitsManager().selectedUnitsSetFollowRoads(value);
getApp().getUnitsManager().selectedUnitsSetFollowRoads(value);
});
/* Advanced settings dialog */
@@ -84,7 +83,7 @@ export class UnitControlPanel extends Panel {
document.addEventListener("clearSelection", () => { this.hide() });
document.addEventListener("applyAdvancedSettings", () => {this.#applyAdvancedSettings();})
document.addEventListener("showAdvancedSettings", () => {
this.#updateAdvancedSettingsDialog(getUnitsManager().getSelectedUnits());
this.#updateAdvancedSettingsDialog(getApp().getUnitsManager().getSelectedUnits());
this.#advancedSettingsDialog.classList.remove("hide");
});
@@ -108,8 +107,8 @@ export class UnitControlPanel extends Panel {
}
addButtons() {
this.#units = getUnitsManager().getSelectedUnits();
this.#selectedUnitsTypes = getUnitsManager().getSelectedUnitsCategories();
this.#units = getApp().getUnitsManager().getSelectedUnits();
this.#selectedUnitsTypes = getApp().getUnitsManager().getSelectedUnitsCategories();
if (this.#units.length < 20) {
this.getElement().querySelector("#selected-units-container")?.replaceChildren(...this.#units.map((unit: Unit, index: number) => {
@@ -127,12 +126,12 @@ export class UnitControlPanel extends Panel {
button.addEventListener("click", ( ev:MouseEventInit ) => {
// Ctrl-click deselection
if ( ev.ctrlKey === true && ev.shiftKey === false && ev.altKey === false ) {
getUnitsManager().deselectUnit( unit.ID );
getApp().getUnitsManager().deselectUnit( unit.ID );
button.remove();
// Deselect all
} else {
getUnitsManager().deselectAllUnits();
getUnitsManager().selectUnit(unit.ID, true);
getApp().getUnitsManager().deselectAllUnits();
getApp().getUnitsManager().selectUnit(unit.ID, true);
}
});
return (button);
@@ -161,12 +160,12 @@ export class UnitControlPanel extends Panel {
if (this.#selectedUnitsTypes.length == 1) {
/* Flight controls */
var desiredAltitude = getUnitsManager().getSelectedUnitsVariable((unit: Unit) => {return unit.getDesiredAltitude()});
var desiredAltitudeType = getUnitsManager().getSelectedUnitsVariable((unit: Unit) => {return unit.getDesiredAltitudeType()});
var desiredSpeed = getUnitsManager().getSelectedUnitsVariable((unit: Unit) => {return unit.getDesiredSpeed()});
var desiredSpeedType = getUnitsManager().getSelectedUnitsVariable((unit: Unit) => {return unit.getDesiredSpeedType()});
var onOff = getUnitsManager().getSelectedUnitsVariable((unit: Unit) => {return unit.getOnOff()});
var followRoads = getUnitsManager().getSelectedUnitsVariable((unit: Unit) => {return unit.getFollowRoads()});
var desiredAltitude = getApp().getUnitsManager().getSelectedUnitsVariable((unit: Unit) => {return unit.getDesiredAltitude()});
var desiredAltitudeType = getApp().getUnitsManager().getSelectedUnitsVariable((unit: Unit) => {return unit.getDesiredAltitudeType()});
var desiredSpeed = getApp().getUnitsManager().getSelectedUnitsVariable((unit: Unit) => {return unit.getDesiredSpeed()});
var desiredSpeedType = getApp().getUnitsManager().getSelectedUnitsVariable((unit: Unit) => {return unit.getDesiredSpeedType()});
var onOff = getApp().getUnitsManager().getSelectedUnitsVariable((unit: Unit) => {return unit.getOnOff()});
var followRoads = getApp().getUnitsManager().getSelectedUnitsVariable((unit: Unit) => {return unit.getFollowRoads()});
this.#altitudeTypeSwitch.setValue(desiredAltitudeType != undefined? desiredAltitudeType == "ASL": undefined, false);
this.#speedTypeSwitch.setValue(desiredSpeedType != undefined? desiredSpeedType == "CAS": undefined, false);
@@ -328,7 +327,7 @@ export class UnitControlPanel extends Panel {
}
/* Send command and close */
var units = getUnitsManager().getSelectedUnits();
var units = getApp().getUnitsManager().getSelectedUnits();
if (units.length > 0)
units[0].setAdvancedOptions(isTanker, isAWACS, TACAN, radio, generalSettings);

1
client/src/panels/unitinfopanel.ts
View File

@@ -1,4 +1,3 @@
import { Ammo } from "../@types/unit";
import { aircraftDatabase } from "../unit/databases/aircraftdatabase";
import { Unit } from "../unit/unit";
import { Panel } from "./panel";