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: Created coalitionareamanager, fixed areas creation and management

Browse Source
This commit is contained in:
Davide Passoni
2024-12-18 17:50:11 +01:00
parent 416f0d3e36
commit ffeecfbf9e
9 changed files with 364 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
frontend/react/src/map/coalitionarea/coalitionareamanager.ts Normal file
View File

@@ -0,0 +1,121 @@
import { LatLng, LeafletMouseEvent } from "leaflet";
import { DrawSubState, OlympusState } from "../../constants/constants";
import { AppStateChangedEvent, CoalitionAreasChangedEvent, CoalitionAreaSelectedEvent } from "../../events";
import { getApp } from "../../olympusapp";
import { areaContains } from "../../other/utils";
import { CoalitionCircle } from "./coalitioncircle";
import { CoalitionPolygon } from "./coalitionpolygon";
export class CoalitionAreasManager {
/* Coalition areas drawing */
#areas: (CoalitionPolygon | CoalitionCircle)[] = [];
#selectedArea: CoalitionCircle | CoalitionPolygon | null = null;
constructor() {
AppStateChangedEvent.on((state, subState) => {
/* State changes can't happen inside a AppStateChanged handler. Use a timeout */
window.setTimeout(() => {
this.getSelectedArea()?.setCreating(false);
if (state !== OlympusState.DRAW || (state === OlympusState.DRAW && subState === DrawSubState.NO_SUBSTATE)) {
this.setSelectedArea(null);
} else {
/* If we are editing but no area is selected, revert to no substate */
if (subState === DrawSubState.EDIT && this.getSelectedArea() === null) getApp().setState(OlympusState.DRAW);
else {
/* Handle creation of new area */
let newArea: CoalitionCircle | CoalitionPolygon | null = null;
if (subState == DrawSubState.DRAW_POLYGON) newArea = new CoalitionPolygon([]);
else if (subState === DrawSubState.DRAW_CIRCLE) newArea = new CoalitionCircle(new LatLng(0, 0), { radius: 1000 });
if (newArea) {
this.setSelectedArea(newArea);
this.#areas.push(newArea);
CoalitionAreasChangedEvent.dispatch(this.#areas);
}
}
}
}, 200);
});
}
setSelectedArea(area: CoalitionCircle | CoalitionPolygon | null) {
this.#selectedArea?.setSelected(this.#selectedArea === area);
area?.setSelected(true);
this.#selectedArea = area;
CoalitionAreaSelectedEvent.dispatch(area);
}
deleteCoalitionArea(area: CoalitionPolygon | CoalitionCircle) {
if (!this.#areas.includes(area)) return;
if (area === this.getSelectedArea()) this.setSelectedArea(null);
this.#areas.splice(this.#areas.indexOf(area), 1);
if (getApp().getMap().hasLayer(area)) getApp().getMap().removeLayer(area);
CoalitionAreasChangedEvent.dispatch(this.#areas);
}
moveAreaUp(area: CoalitionPolygon | CoalitionCircle) {
if (!this.#areas.includes(area)) return;
const idx = this.#areas.indexOf(area);
if (idx === 0) return;
this.#areas.forEach((coalitionArea) => getApp().getMap().removeLayer(coalitionArea));
this.#areas.splice(this.#areas.indexOf(area), 1);
this.#areas = [...this.#areas.slice(0, idx - 1), area, ...this.#areas.slice(idx - 1)];
this.#areas.forEach((coalitionArea) => getApp().getMap().addLayer(coalitionArea));
CoalitionAreasChangedEvent.dispatch(this.#areas);
}
moveCoalitionAreaDown(area: CoalitionPolygon | CoalitionCircle) {
if (!this.#areas.includes(area)) return;
const idx = this.#areas.indexOf(area);
if (idx === this.#areas.length - 1) return;
this.#areas.forEach((coalitionArea) => getApp().getMap().removeLayer(coalitionArea));
this.#areas.splice(this.#areas.indexOf(area), 1);
this.#areas = [...this.#areas.slice(0, idx + 1), area, ...this.#areas.slice(idx + 1)];
this.#areas.forEach((coalitionArea) => getApp().getMap().addLayer(coalitionArea));
CoalitionAreasChangedEvent.dispatch(this.#areas);
}
getSelectedArea() {
return this.#areas.find((coalitionArea: CoalitionPolygon | CoalitionCircle) => coalitionArea.getSelected()) ?? null;
}
onLeftShortClick(e: LeafletMouseEvent) {
const selectedArea = this.getSelectedArea();
if (getApp().getSubState() === DrawSubState.DRAW_POLYGON) {
if (selectedArea && selectedArea instanceof CoalitionPolygon) selectedArea.addTemporaryLatLng(e.latlng);
} else if (getApp().getSubState() === DrawSubState.DRAW_CIRCLE) {
if (selectedArea && selectedArea instanceof CoalitionCircle) {
if (selectedArea.getLatLng().lat == 0 && selectedArea.getLatLng().lng == 0) selectedArea.setLatLng(e.latlng);
getApp().setState(OlympusState.DRAW, DrawSubState.EDIT);
}
} else {
let wasAreaSelected = this.getSelectedArea() !== null;
this.setSelectedArea(null);
for (let idx = 0; idx < this.#areas.length; idx++) {
if (areaContains(e.latlng, this.#areas[idx])) {
this.setSelectedArea(this.#areas[idx]);
getApp().setState(OlympusState.DRAW, DrawSubState.EDIT);
break;
}
}
if (this.getSelectedArea() === null) getApp().setState(wasAreaSelected ? OlympusState.DRAW : OlympusState.IDLE);
}
}
onDoubleClick(e: LeafletMouseEvent) {
if (getApp().getSubState() === DrawSubState.DRAW_CIRCLE || getApp().getSubState() === DrawSubState.DRAW_POLYGON)
getApp().setState(OlympusState.DRAW, DrawSubState.EDIT);
else getApp().setState(OlympusState.DRAW);
}
}

13
frontend/react/src/map/coalitionarea/coalitionareamiddlehandle.ts
View File

@@ -1,9 +1,20 @@
import { DivIcon, LatLng } from "leaflet";
import { DivIcon, DomEvent, LatLng } from "leaflet";
import { CustomMarker } from "../markers/custommarker";
export class CoalitionAreaMiddleHandle extends CustomMarker {
constructor(latlng: LatLng) {
super(latlng, { interactive: true, draggable: false });
this.on("mousedown", (e: any) => {
DomEvent.stop(e);
DomEvent.preventDefault(e);
e.originalEvent.stopImmediatePropagation();
});
this.on("mouseup", (e: any) => {
DomEvent.stop(e);
DomEvent.preventDefault(e);
e.originalEvent.stopImmediatePropagation();
});
}
createIcon() {

31
frontend/react/src/map/coalitionarea/coalitioncircle.ts
View File

@@ -11,7 +11,7 @@ let totalCircles = 0;
export class CoalitionCircle extends Circle {
#coalition: Coalition = "blue";
#selected: boolean = true;
#editing: boolean = true;
#creating: boolean = true;
#radiusHandle: CoalitionAreaHandle;
#labelText: string;
#label: Marker;
@@ -39,9 +39,7 @@ export class CoalitionCircle extends Circle {
this.#drawLabel();
});
this.on("remove", () => {
this.#label.removeFrom(this._map);
});
getApp().getMap().addLayer(this);
}
setCoalition(coalition: Coalition) {
@@ -70,13 +68,16 @@ export class CoalitionCircle extends Circle {
return this.#selected;
}
setEditing(editing: boolean) {
this.#editing = editing;
setCreating(creating: boolean) {
this.#creating = creating;
this.#setRadiusHandle();
/* Remove areas with less than 2 vertexes */
if (this.getLatLng().lat === 0 && this.getLatLng().lng === 0) getApp().getCoalitionAreasManager().deleteCoalitionArea(this);
}
getEditing() {
return this.#editing;
getCreating() {
return this.#creating;
}
setOpacity(opacity: number) {
@@ -92,9 +93,16 @@ export class CoalitionCircle extends Circle {
this.#drawLabel();
}
onAdd(map: Map): this {
super.onAdd(map);
this.#drawLabel();
return this;
}
onRemove(map: Map): this {
super.onRemove(map);
this.#radiusHandle.removeFrom(getApp().getMap());
this.#label?.removeFrom(map);
this.#radiusHandle.removeFrom(map);
return this;
}
@@ -130,9 +138,8 @@ export class CoalitionCircle extends Circle {
}
#drawLabel() {
if (this.#label) {
this.#label.removeFrom(this._map);
}
this.#label?.removeFrom(this._map);
this.#label = new Marker(this.getLatLng(), {
icon: new DivIcon({
className: "label",

30
frontend/react/src/map/coalitionarea/coalitionpolygon.ts
View File

@@ -12,7 +12,7 @@ let totalPolygons = 0;
export class CoalitionPolygon extends Polygon {
#coalition: Coalition = "blue";
#selected: boolean = true;
#editing: boolean = true;
#creating: boolean = true;
#handles: CoalitionAreaHandle[] = [];
#middleHandles: CoalitionAreaMiddleHandle[] = [];
#activeIndex: number = 0;
@@ -43,9 +43,7 @@ export class CoalitionPolygon extends Polygon {
this.#drawLabel();
});
this.on("remove", () => {
this.#label?.removeFrom(this._map);
});
getApp().getMap().addLayer(this);
}
setCoalition(coalition: Coalition) {
@@ -63,12 +61,12 @@ export class CoalitionPolygon extends Polygon {
this.#setHandles();
this.#drawLabel();
this.setOpacity(selected ? 1 : 0.5);
if (!this.getSelected() && this.getEditing()) {
if (!this.getSelected() && this.getCreating()) {
/* Remove the vertex we were working on */
var latlngs = this.getLatLngs()[0] as LatLng[];
latlngs.splice(this.#activeIndex, 1);
this.setLatLngs(latlngs);
this.setEditing(false);
this.setCreating(false);
}
if (selected) CoalitionAreaSelectedEvent.dispatch(this);
@@ -81,17 +79,17 @@ export class CoalitionPolygon extends Polygon {
return this.#selected;
}
setEditing(editing: boolean) {
this.#editing = editing;
setCreating(creating: boolean) {
this.#creating = creating;
this.#setHandles();
var latlngs = this.getLatLngs()[0] as LatLng[];
/* Remove areas with less than 2 vertexes */
if (latlngs.length <= 2) getApp().getMap().deleteCoalitionArea(this);
if (latlngs.length <= 2) getApp().getCoalitionAreasManager().deleteCoalitionArea(this);
}
getEditing() {
return this.#editing;
getCreating() {
return this.#creating;
}
addTemporaryLatLng(latlng: LatLng) {
@@ -115,9 +113,16 @@ export class CoalitionPolygon extends Polygon {
this.#drawLabel();
}
onAdd(map: Map): this {
super.onAdd(map);
this.#drawLabel();
return this;
}
onRemove(map: Map): this {
super.onRemove(map);
this.#handles.concat(this.#middleHandles).forEach((handle: CoalitionAreaHandle | CoalitionAreaMiddleHandle) => handle.removeFrom(getApp().getMap()));
this.#label?.removeFrom(map);
this.#handles.concat(this.#middleHandles).forEach((handle: CoalitionAreaHandle | CoalitionAreaMiddleHandle) => handle.removeFrom(map));
return this;
}
@@ -176,7 +181,6 @@ export class CoalitionPolygon extends Polygon {
const middleHandle = new CoalitionAreaMiddleHandle(middleLatLng);
middleHandle.addTo(getApp().getMap());
middleHandle.on("click", (e: any) => {
getApp().getMap().preventClicks();
this.#activeIndex = idx - 1;
this.addTemporaryLatLng(middleLatLng);
});

82
frontend/react/src/map/map.ts
View File

@@ -17,7 +17,6 @@ import {
OlympusSubState,
NO_SUBSTATE,
SpawnSubState,
DrawSubState,
JTACSubState,
UnitControlSubState,
ContextActionTarget,
@@ -26,7 +25,6 @@ import {
SHORT_PRESS_MILLISECONDS,
DEBOUNCE_MILLISECONDS,
} from "../constants/constants";
import { CoalitionPolygon } from "./coalitionarea/coalitionpolygon";
import { MapHiddenTypes, MapOptions } from "../types/types";
import { EffectRequestTable, OlympusConfig, SpawnRequestTable } from "../interfaces";
import { ContextAction } from "../unit/contextaction";
@@ -36,7 +34,6 @@ import "./markers/stylesheets/airbase.css";
import "./markers/stylesheets/bullseye.css";
import "./markers/stylesheets/units.css";
import "./stylesheets/map.css";
import { CoalitionCircle } from "./coalitionarea/coalitioncircle";
import { initDraggablePath } from "./coalitionarea/draggablepath";
import { ExplosionMarker } from "./markers/explosionmarker";
@@ -44,7 +41,6 @@ import { TextMarker } from "./markers/textmarker";
import { TargetMarker } from "./markers/targetmarker";
import {
AppStateChangedEvent,
CoalitionAreaSelectedEvent,
ConfigLoadedEvent,
ContextActionChangedEvent,
ContextActionSetChangedEvent,
@@ -128,9 +124,6 @@ export class Map extends L.Map {
#bradcastPositionXmlHttp: XMLHttpRequest | null = null;
#cameraZoomRatio: number = 1.0;
/* Coalition areas drawing */
#coalitionAreas: (CoalitionPolygon | CoalitionCircle)[] = [];
/* Units movement */
#destinationPreviewMarkers: { [key: number]: TemporaryUnitMarker | TargetMarker } = {};
#destinationRotation: number = 0;
@@ -300,7 +293,7 @@ export class Map extends L.Map {
window.addEventListener("blur", () => {
this.setSelectionEnabled(false);
this.setPasteEnabled(false);
})
});
/* Pan interval */
this.#panInterval = window.setInterval(() => {
@@ -604,27 +597,6 @@ export class Map extends L.Map {
ContextActionChangedEvent.dispatch(this.#contextAction);
}
deselectAllCoalitionAreas() {
if (this.getSelectedCoalitionArea() !== null) {
CoalitionAreaSelectedEvent.dispatch(null);
this.#coalitionAreas.forEach((coalitionArea: CoalitionPolygon | CoalitionCircle) => coalitionArea.setSelected(false));
}
}
deleteCoalitionArea(coalitionArea: CoalitionPolygon | CoalitionCircle) {
if (this.#coalitionAreas.includes(coalitionArea)) this.#coalitionAreas.splice(this.#coalitionAreas.indexOf(coalitionArea), 1);
if (this.hasLayer(coalitionArea)) this.removeLayer(coalitionArea);
}
getSelectedCoalitionArea() {
const coalitionArea = this.#coalitionAreas.find((coalitionArea: CoalitionPolygon | CoalitionCircle) => {
return coalitionArea.getSelected();
});
return coalitionArea ?? null;
}
setHiddenType(key: string, value: boolean) {
this.#hiddenTypes[key] = value;
HiddenTypesChangedEvent.dispatch(this.#hiddenTypes);
@@ -765,7 +737,7 @@ export class Map extends L.Map {
setSelectionEnabled(selectionEnabled: boolean) {
this.#selectionEnabled = selectionEnabled;
SelectionEnabledChangedEvent.dispatch(selectionEnabled)
SelectionEnabledChangedEvent.dispatch(selectionEnabled);
}
getSelectionEnabled() {
@@ -774,7 +746,7 @@ export class Map extends L.Map {
setPasteEnabled(pasteEnabled: boolean) {
this.#pasteEnabled = pasteEnabled;
PasteEnabledChangedEvent.dispatch(pasteEnabled)
PasteEnabledChangedEvent.dispatch(pasteEnabled);
}
getPasteEnabled() {
@@ -822,18 +794,16 @@ export class Map extends L.Map {
/* Event handlers */
#onStateChanged(state: OlympusState, subState: OlympusSubState) {
/* Operations to perform when leaving a state */
this.getSelectedCoalitionArea()?.setEditing(false);
this.#currentSpawnMarker?.removeFrom(this);
this.#currentSpawnMarker = null;
this.#currentEffectMarker?.removeFrom(this);
this.#currentEffectMarker = null;
if (state !== OlympusState.UNIT_CONTROL) {
getApp().getUnitsManager().deselectAllUnits();
this.setContextAction(null);
this.setContextActionSet(null);
}
if (state !== OlympusState.DRAW || (state === OlympusState.DRAW && subState !== DrawSubState.EDIT)) this.deselectAllCoalitionAreas();
this.getContainer().classList.remove(`explosion-cursor`);
["white", "blue", "red", "green", "orange"].forEach((color) => this.getContainer().classList.remove(`smoke-${color}-cursor`));
@@ -862,17 +832,7 @@ export class Map extends L.Map {
} else if (state === OlympusState.UNIT_CONTROL) {
console.log(`Context action:`);
console.log(this.#contextAction);
} else if (state === OlympusState.DRAW) {
if (subState == DrawSubState.DRAW_POLYGON) {
this.#coalitionAreas.push(new CoalitionPolygon([]));
this.#coalitionAreas[this.#coalitionAreas.length - 1].addTo(this);
this.#coalitionAreas[this.#coalitionAreas.length - 1].setSelected(true);
} else if (subState === DrawSubState.DRAW_CIRCLE) {
this.#coalitionAreas.push(new CoalitionCircle(new L.LatLng(0, 0), { radius: 1000 }));
this.#coalitionAreas[this.#coalitionAreas.length - 1].addTo(this);
this.#coalitionAreas[this.#coalitionAreas.length - 1].setSelected(true);
}
}
}
}
#onDragStart(e: any) {
@@ -935,7 +895,7 @@ export class Map extends L.Map {
console.log(`Left short click at ${e.latlng}`);
if (this.#pasteEnabled) {
getApp().getUnitsManager().paste(e.latlng)
getApp().getUnitsManager().paste(e.latlng);
}
/* Execute the short click action */
@@ -982,27 +942,7 @@ export class Map extends L.Map {
}
}
} else if (getApp().getState() === OlympusState.DRAW) {
if (getApp().getSubState() === DrawSubState.DRAW_POLYGON) {
const selectedArea = this.getSelectedCoalitionArea();
if (selectedArea && selectedArea instanceof CoalitionPolygon) {
selectedArea.addTemporaryLatLng(e.latlng);
}
} else if (getApp().getSubState() === DrawSubState.DRAW_CIRCLE) {
const selectedArea = this.getSelectedCoalitionArea();
if (selectedArea && selectedArea instanceof CoalitionCircle) {
if (selectedArea.getLatLng().lat == 0 && selectedArea.getLatLng().lng == 0) selectedArea.setLatLng(e.latlng);
getApp().setState(OlympusState.DRAW, DrawSubState.EDIT);
}
} else if (getApp().getSubState() == DrawSubState.NO_SUBSTATE) {
this.deselectAllCoalitionAreas();
for (let idx = 0; idx < this.#coalitionAreas.length; idx++) {
if (areaContains(e.latlng, this.#coalitionAreas[idx])) {
this.#coalitionAreas[idx].setSelected(true);
getApp().setState(OlympusState.DRAW, DrawSubState.EDIT);
break;
}
}
}
getApp().getCoalitionAreasManager().onLeftShortClick(e);
} else if (getApp().getState() === OlympusState.JTAC) {
// TODO less redundant way to do this
if (getApp().getSubState() === JTACSubState.SELECT_TARGET) {
@@ -1097,8 +1037,12 @@ export class Map extends L.Map {
this.setPasteEnabled(false);
if (getApp().getSubState() === NO_SUBSTATE) getApp().setState(OlympusState.IDLE);
else getApp().setState(getApp().getState());
if (getApp().getState() === OlympusState.DRAW) {
getApp().getCoalitionAreasManager().onDoubleClick(e);
} else {
if (getApp().getSubState() === NO_SUBSTATE) getApp().setState(OlympusState.IDLE);
else getApp().setState(getApp().getState());
}
}
#onMouseMove(e: any) {