mirror of
https://github.com/Pax1601/DCSOlympus.git
synced 2025-10-29 16:56:34 +00:00
Custom formations
This commit is contained in:
@@ -1,8 +1,21 @@
|
||||
import { ContextMenu } from "./contextmenu";
|
||||
|
||||
export class UnitContextMenu extends ContextMenu {
|
||||
#callback: CallableFunction | null = null;
|
||||
|
||||
constructor(id: string) {
|
||||
super(id);
|
||||
|
||||
document.addEventListener("applyCustomFormation", () => {
|
||||
var dialog = document.getElementById("custom-formation-dialog");
|
||||
if (dialog)
|
||||
{
|
||||
dialog.classList.add("hide");
|
||||
}
|
||||
|
||||
if (this.#callback)
|
||||
this.#callback()
|
||||
})
|
||||
}
|
||||
|
||||
setOptions(options: {[key: string]: string}, callback: CallableFunction)
|
||||
|
||||
@@ -19,6 +19,7 @@ export class Map extends L.Map {
|
||||
#preventLeftClick: boolean = false;
|
||||
#leftClickTimer: number = 0;
|
||||
#lastMousePosition: L.Point = new L.Point(0, 0);
|
||||
#centerUnit: Unit | null = null;
|
||||
|
||||
#mapContextMenu: MapContextMenu = new MapContextMenu("map-contextmenu");
|
||||
#unitContextMenu: UnitContextMenu = new UnitContextMenu("unit-contextmenu");
|
||||
@@ -29,7 +30,7 @@ export class Map extends L.Map {
|
||||
constructor(ID: string) {
|
||||
/* Init the leaflet map */
|
||||
//@ts-ignore
|
||||
super(ID, { doubleClickZoom: false, zoomControl: false, boxZoom: false, boxSelect: true });
|
||||
super(ID, { doubleClickZoom: false, zoomControl: false, boxZoom: false, boxSelect: true, zoomAnimation: false });
|
||||
this.setView([37.23, -115.8], 12);
|
||||
|
||||
this.setLayer("ArcGIS Satellite");
|
||||
@@ -39,7 +40,9 @@ export class Map extends L.Map {
|
||||
|
||||
/* Register event handles */
|
||||
this.on("click", (e: any) => this.#onClick(e));
|
||||
this.on("dblclick", (e: any) => this.#onDoubleClick(e));
|
||||
this.on("dblclick", (e: any) => this.#onDoubleClick(e));
|
||||
this.on("zoomstart", (e: any) => this.#onZoom(e));
|
||||
this.on("drag", (e: any) => this.centerOnUnit(null));
|
||||
this.on("contextmenu", (e: any) => this.#onContextMenu(e));
|
||||
this.on('selectionend', (e: any) => this.#onSelectionEnd(e));
|
||||
this.on('mousedown', (e: any) => this.#onMouseDown(e));
|
||||
@@ -56,6 +59,11 @@ export class Map extends L.Map {
|
||||
document.body.toggleAttribute("data-hide-" + ev.detail.category);
|
||||
Object.values(getUnitsManager().getUnits()).forEach((unit: Unit) => unit.updateVisibility());
|
||||
});
|
||||
|
||||
document.addEventListener("unitUpdated", (ev: CustomEvent) => {
|
||||
if (this.#centerUnit != null && ev.detail == this.#centerUnit)
|
||||
this.#panToUnit(this.#centerUnit);
|
||||
});
|
||||
|
||||
this.#mapSourceDropdown = new Dropdown("map-type", (layerName: string) => this.setLayer(layerName), this.getLayers())
|
||||
}
|
||||
@@ -195,6 +203,18 @@ export class Map extends L.Map {
|
||||
//this.#aircraftSpawnMenu(e);
|
||||
}
|
||||
|
||||
centerOnUnit(ID: number | null){
|
||||
if (ID != null)
|
||||
{
|
||||
this.options.scrollWheelZoom = 'center';
|
||||
this.#centerUnit = getUnitsManager().getUnitByID(ID);
|
||||
}
|
||||
else {
|
||||
this.options.scrollWheelZoom = undefined;
|
||||
this.#centerUnit = null;
|
||||
}
|
||||
}
|
||||
|
||||
/* Event handlers */
|
||||
#onClick(e: any) {
|
||||
if (!this.#preventLeftClick) {
|
||||
@@ -256,4 +276,16 @@ export class Map extends L.Map {
|
||||
this.#lastMousePosition.x = e.originalEvent.x;
|
||||
this.#lastMousePosition.y = e.originalEvent.y;
|
||||
}
|
||||
|
||||
#onZoom(e: any)
|
||||
{
|
||||
if (this.#centerUnit != null)
|
||||
this.#panToUnit(this.#centerUnit);
|
||||
}
|
||||
|
||||
#panToUnit(unit: Unit)
|
||||
{
|
||||
var unitPosition = new L.LatLng(unit.getFlightData().latitude, unit.getFlightData().longitude);
|
||||
this.setView(unitPosition, this.getZoom(), {animate: false});
|
||||
}
|
||||
}
|
||||
|
||||
@@ -142,7 +142,6 @@ export class Unit extends Marker {
|
||||
}
|
||||
|
||||
setData(data: UpdateData) {
|
||||
document.dispatchEvent(new CustomEvent("unitUpdated", { detail: this }));
|
||||
var updateMarker = false;
|
||||
|
||||
if ((data.flightData.latitude != undefined && data.flightData.longitude != undefined && (this.getFlightData().latitude != data.flightData.latitude || this.getFlightData().longitude != data.flightData.longitude))
|
||||
@@ -212,6 +211,8 @@ export class Unit extends Marker {
|
||||
}
|
||||
else
|
||||
this.#clearPath();
|
||||
|
||||
document.dispatchEvent(new CustomEvent("unitUpdated", { detail: this }));
|
||||
}
|
||||
|
||||
getData() {
|
||||
@@ -413,11 +414,14 @@ export class Unit extends Marker {
|
||||
|
||||
#onContextMenu(e: any) {
|
||||
var options: {[key: string]: string} = {};
|
||||
|
||||
options["Center"] = `<div id="center-map">Center map</div>`;
|
||||
|
||||
if (getUnitsManager().getSelectedUnits().length > 0 && !(getUnitsManager().getSelectedUnits().includes(this)))
|
||||
{
|
||||
options = {
|
||||
'Attack': `<div id="attack">Attack</div>`,
|
||||
'Follow': `<div id="follow">Follow</div>`
|
||||
'Follow': `<div id="follow">Follow</div>`,
|
||||
}
|
||||
}
|
||||
else if ((getUnitsManager().getSelectedUnits().length > 0 && (getUnitsManager().getSelectedUnits().includes(this))) || getUnitsManager().getSelectedUnits().length == 0)
|
||||
@@ -433,18 +437,50 @@ export class Unit extends Marker {
|
||||
getMap().showUnitContextMenu(e);
|
||||
getMap().getUnitContextMenu().setOptions(options, (option: string) => {
|
||||
getMap().hideUnitContextMenu();
|
||||
this.#executeAction(option);
|
||||
this.#executeAction(e, option);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
#executeAction(action: string) {
|
||||
#executeAction(e: any, action: string) {
|
||||
if (action === "Center")
|
||||
getMap().centerOnUnit(this.ID);
|
||||
if (action === "Attack")
|
||||
getUnitsManager().selectedUnitsAttackUnit(this.ID);
|
||||
if (action === "Refuel")
|
||||
else if (action === "Refuel")
|
||||
getUnitsManager().selectedUnitsRefuel();
|
||||
if (action === "Follow")
|
||||
else if (action === "Follow")
|
||||
this.#showFollowOptions(e);
|
||||
}
|
||||
|
||||
#showFollowOptions(e: any) {
|
||||
var options: {[key: string]: string} = {};
|
||||
|
||||
options = {
|
||||
'Trail': `<div id="trail">Trail</div>`,
|
||||
'Echelon (LH)': `<div id="echelon-lh">Echelon (LH)</div>`,
|
||||
'Echelon (RH)': `<div id="echelon-rh">Echelon (RH)</div>`,
|
||||
'Line abreast': `<div id="line-abreast">Line abreast</div>`,
|
||||
'Front': `<div id="front">In front</div>`,
|
||||
'Custom': `<div id="custom">Custom</div>`
|
||||
}
|
||||
|
||||
getMap().getUnitContextMenu().setOptions(options, (option: string) => {
|
||||
getMap().hideUnitContextMenu();
|
||||
this.#applyFollowOptions(option);
|
||||
});
|
||||
getMap().showUnitContextMenu(e);
|
||||
}
|
||||
|
||||
#applyFollowOptions(action: string)
|
||||
{
|
||||
if (action === "Custom")
|
||||
{
|
||||
document.getElementById("custom-formation-dialog")?.classList.remove("hide");
|
||||
}
|
||||
else {
|
||||
getUnitsManager().selectedUnitsFollowUnit(this.ID);
|
||||
}
|
||||
}
|
||||
|
||||
#updateMarker() {
|
||||
|
||||
Reference in New Issue
Block a user