Custom formations

This commit is contained in:
Pax1601
2023-04-17 18:01:23 +02:00
parent 77d39c17b8
commit be69aeb69e
16 changed files with 1194 additions and 36 deletions

View File

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

View File

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

View File

@@ -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() {