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

Added more functions to edit Coalition Areas

Browse Source
This commit is contained in:
Pax1601
2023-06-18 19:55:01 +02:00
parent ad3b1cb167
commit f9f02c3eb0
18 changed files with 3660 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
client/src/map/coalitionarea.ts
View File

@@ -1,20 +1,105 @@
import { LatLngExpression, Polygon, PolylineOptions } from "leaflet";
import { LatLng, LatLngExpression, Polygon, PolylineOptions } from "leaflet";
import { getMap } from "..";
import { DRAW_POLYGON } from "./map";
import { CoalitionAreaHandle } from "./coalitionareahandle";
export class CoalitionArea extends Polygon {
#coalition: string = "blue";
#selected: boolean = true;
#editing: boolean = true;
#handles: CoalitionAreaHandle[] = [];
constructor(latlngs: LatLngExpression[] | LatLngExpression[][] | LatLngExpression[][][], options?: PolylineOptions) {
if (options === undefined)
options = {};
options.bubblingMouseEvents = false;
super(latlngs, options);
this.on("click", (e: any) => {
if (!this.getSelected()) {
this.setSelected(true);
getMap().setState(DRAW_POLYGON);
}
else if (this.getEditing()) {
this.addLatLng(e.latlng);
this.addTemporaryLatLng(e.latlng);
}
});
this.on("contextmenu", (e: any) => {
getMap().showCoalitionAreaContextMenu(e, this);
})
if (!this.#editing)
getMap().showCoalitionAreaContextMenu(e, this);
else
this.setEditing(false);
});
this.#setColors();
}
setCoalition(coalition: string) {
this.setStyle({color: coalition, fillColor: coalition});
this.#coalition = coalition;
this.#setColors();
}
getCoalition() {
return this.#coalition;
}
setSelected(selected: boolean) {
this.#selected = selected;
this.#setColors();
this.#setHandles();
if (!selected)
this.setEditing(false);
}
getSelected() {
return this.#selected;
}
setEditing(editing: boolean) {
this.#editing = editing;
this.#setHandles();
}
getEditing() {
return this.#editing;
}
addTemporaryLatLng(latlng: LatLng) {
this.addLatLng(latlng);
}
moveTemporaryLatLng(latlng: LatLng) {
var latlngs = this.getLatLngs()[0] as LatLng[];
latlngs[latlngs.length - 1] = latlng;
this.setLatLngs(latlngs);
}
addLatLng(latlng: LatLngExpression | LatLngExpression[], latlngs?: LatLng[] | undefined): this {
super.addLatLng(latlng, latlngs)
this.#setHandles();
return this;
}
#setColors() {
this.setStyle({color: this.getSelected()? "white": this.#coalition, fillColor: this.#coalition});
}
#setHandles() {
this.#handles.forEach((handle: CoalitionAreaHandle) => handle.removeFrom(getMap()));
this.#handles = [];
var latlngs = this.getLatLngs()[0] as LatLng[];
latlngs.forEach((latlng: LatLng, idx: number) => {
const handle = new CoalitionAreaHandle(latlng);
handle.addTo(getMap());
handle.on("dragend", (e: any) => {
var latlngs = this.getLatLngs()[0] as LatLng[];
latlngs[idx] = e.latlng;
this.setLatLngs(latlngs);
});
this.#handles.push(handle);
});
}
}

19
client/src/map/coalitionareahandle.ts Normal file
View File

@@ -0,0 +1,19 @@
import { DivIcon, LatLng } from "leaflet";
import { CustomMarker } from "./custommarker";
export class CoalitionAreaHandle extends CustomMarker {
constructor(latlng: LatLng) {
super(latlng, {interactive: true, draggable: true});
}
createIcon() {
this.setIcon(new DivIcon({
iconSize: [52, 52],
iconAnchor: [26, 26],
className: "leaflet-target-marker",
}));
var el = document.createElement("div");
el.classList.add("ol-target-icon");
this.getElement()?.appendChild(el);
}
}

41
client/src/map/map.ts
View File

@@ -55,7 +55,7 @@ export class Map extends L.Map {
#destinationGroupRotation: number = 0;
#computeDestinationRotation: boolean = false;
#destinationRotationCenter: L.LatLng | null = null;
#polygons: CoalitionArea[] = [];
#coalitionAreas: CoalitionArea[] = [];
#mapContextMenu: MapContextMenu = new MapContextMenu("map-contextmenu");
#unitContextMenu: UnitContextMenu = new UnitContextMenu("unit-contextmenu");
@@ -175,16 +175,19 @@ export class Map extends L.Map {
if (this.#state === IDLE) {
this.#resetDestinationMarkers();
this.#resetTargetMarker();
this.#deselectCoalitionAreas();
this.#showCursor();
}
else if (this.#state === MOVE_UNIT) {
this.#resetTargetMarker();
this.#deselectCoalitionAreas();
this.#createDestinationMarkers();
if (this.#destinationPreviewMarkers.length > 0)
this.#hideCursor();
}
else if ([BOMBING, CARPET_BOMBING, FIRE_AT_AREA].includes(this.#state)) {
this.#resetDestinationMarkers();
this.#deselectCoalitionAreas();
this.#createTargetMarker();
this.#hideCursor();
}
@@ -193,8 +196,8 @@ export class Map extends L.Map {
this.#resetTargetMarker();
this.#showCursor();
//@ts-ignore draggable option added by plugin
this.#polygons.push(new CoalitionArea([]));
this.#polygons[this.#polygons.length - 1].addTo(this);
this.#coalitionAreas.push(new CoalitionArea([]));
this.#coalitionAreas[this.#coalitionAreas.length - 1].addTo(this);
}
document.dispatchEvent(new CustomEvent("mapStateChanged"));
}
@@ -394,6 +397,10 @@ export class Map extends L.Map {
}
}
getSelectedCoalitionArea() {
return this.#coalitionAreas.find((area: CoalitionArea) => {return area.getSelected()});
}
/* Event handlers */
#onClick(e: any) {
if (!this.#preventLeftClick) {
@@ -402,7 +409,14 @@ export class Map extends L.Map {
}
else if (this.#state === DRAW_POLYGON) {
this.#polygons[this.#polygons.length - 1].addLatLng(e.latlng);
/* This gets only called to create the first point of the area. All other points are added by the area itself */
if (this.getSelectedCoalitionArea()?.getEditing()) {
this.getSelectedCoalitionArea()?.addLatLng(e.latlng);
this.getSelectedCoalitionArea()?.addTemporaryLatLng(e.latlng);
}
else {
this.getSelectedCoalitionArea()?.setSelected(false);
}
}
else {
this.setState(IDLE);
@@ -448,17 +462,6 @@ export class Map extends L.Map {
}
}
#executeAction(e: any, action: string) {
if (action === "bomb")
getUnitsManager().selectedUnitsBombPoint(this.getMouseCoordinates());
else if (action === "carpet-bomb")
getUnitsManager().selectedUnitsCarpetBomb(this.getMouseCoordinates());
else if (action === "building-bomb")
getUnitsManager().selectedUnitsBombBuilding(this.getMouseCoordinates());
else if (action === "fire-at-area")
getUnitsManager().selectedUnitsFireAtArea(this.getMouseCoordinates());
}
#onSelectionEnd(e: any) {
clearTimeout(this.#leftClickTimer);
this.#preventLeftClick = true;
@@ -497,6 +500,10 @@ export class Map extends L.Map {
else if ([BOMBING, CARPET_BOMBING, FIRE_AT_AREA].includes(this.#state)) {
this.#targetMarker.setLatLng(this.getMouseCoordinates());
}
else if (this.#state === DRAW_POLYGON) {
if (this.getSelectedCoalitionArea()?.getEditing())
this.getSelectedCoalitionArea()?.moveTemporaryLatLng(e.latlng);
}
}
#onZoom(e: any) {
@@ -569,6 +576,10 @@ export class Map extends L.Map {
this.removeLayer(this.#targetMarker);
}
#deselectCoalitionAreas() {
this.getSelectedCoalitionArea()?.setSelected(false);
}
#showCursor() {
document.getElementById(this.#ID)?.classList.remove("hidden-cursor");
}