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

Large rework of events and state

Browse Source
This commit is contained in:
Davide Passoni
2024-11-06 17:32:31 +01:00
parent 7f5873b5b8
commit 636803b2ac
57 changed files with 110475 additions and 119636 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/react/src/map/boxselect.ts
View File

@@ -14,7 +14,7 @@ export var BoxSelect = Handler.extend({
this._forceBoxSelect = false;
map.on("unload", this._destroy, this);
document.addEventListener("mapForceBoxSelect", (e) => {
document.addEventListener("forceboxselect", (e) => {
this._forceBoxSelect = true;
const originalEvent = (e as CustomEvent).detail;
this._onMouseDown(originalEvent);
@@ -23,12 +23,12 @@ export var BoxSelect = Handler.extend({
addHooks: function () {
DomEvent.on(this._container, "mousedown", this._onMouseDown, this);
DomEvent.on(this._container, "mapForceBoxSelect", this._onMouseDown, this);
DomEvent.on(this._container, "forceboxselect", this._onMouseDown, this);
},
removeHooks: function () {
DomEvent.off(this._container, "mousedown", this._onMouseDown, this);
DomEvent.off(this._container, "mapForceBoxSelect", this._onMouseDown, this);
DomEvent.off(this._container, "forceboxselect", this._onMouseDown, this);
},
moved: function () {

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

@@ -6,7 +6,7 @@ import { Coalition } from "../../types/types";
import * as turf from "@turf/turf";
import { CoalitionAreaSelectedEvent } from "../../events";
let totalAreas = 0;
let totalCircles = 0;
export class CoalitionCircle extends Circle {
#coalition: Coalition = "blue";
@@ -19,7 +19,7 @@ export class CoalitionCircle extends Circle {
constructor(latlng: LatLngExpression, options: CircleOptions) {
if (options === undefined) options = { radius: 0 };
totalAreas++;
totalCircles++;
options.bubblingMouseEvents = false;
options.interactive = false;
@@ -29,7 +29,7 @@ export class CoalitionCircle extends Circle {
super(latlng, options);
this.#setColors();
this.#labelText = `Circle ${totalAreas}`;
this.#labelText = `Circle ${totalCircles}`;
if ([BLUE_COMMANDER, RED_COMMANDER].includes(getApp().getMissionManager().getCommandModeOptions().commandMode))
this.setCoalition(getApp().getMissionManager().getCommandedCoalition());

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

@@ -7,7 +7,7 @@ import { Coalition } from "../../types/types";
import { polyCenter } from "../../other/utils";
import { CoalitionAreaSelectedEvent } from "../../events";
let totalAreas = 0;
let totalPolygons = 0;
export class CoalitionPolygon extends Polygon {
#coalition: Coalition = "blue";
@@ -22,7 +22,7 @@ export class CoalitionPolygon extends Polygon {
constructor(latlngs: LatLngExpression[] | LatLngExpression[][] | LatLngExpression[][][], options?: PolylineOptions) {
if (options === undefined) options = {};
totalAreas++;
totalPolygons++;
options.bubblingMouseEvents = false;
options.interactive = false;
@@ -32,7 +32,7 @@ export class CoalitionPolygon extends Polygon {
super(latlngs, options);
this.#setColors();
this.#labelText = `Polygon ${totalAreas}`;
this.#labelText = `Polygon ${totalPolygons}`;
if ([BLUE_COMMANDER, RED_COMMANDER].includes(getApp().getMissionManager().getCommandModeOptions().commandMode))
this.setCoalition(getApp().getMissionManager().getCommandedCoalition());

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

@@ -22,22 +22,30 @@ import {
} from "../constants/constants";
import { CoalitionPolygon } from "./coalitionarea/coalitionpolygon";
import { MapHiddenTypes, MapOptions } from "../types/types";
import { EffectRequestTable, SpawnRequestTable } from "../interfaces";
import { EffectRequestTable, OlympusConfig, SpawnRequestTable } from "../interfaces";
import { ContextAction } from "../unit/contextaction";
/* Stylesheets */
import "./markers/stylesheets/airbase.css";
import "./markers/stylesheets/bullseye.css";
import "./markers/stylesheets/units.css";
import "./map.css";
import "./stylesheets/map.css";
import { CoalitionCircle } from "./coalitionarea/coalitioncircle";
import { initDraggablePath } from "./coalitionarea/draggablepath";
import { faDrawPolygon, faHandPointer, faJetFighter, faMap } from "@fortawesome/free-solid-svg-icons";
import { ExplosionMarker } from "./markers/explosionmarker";
import { TextMarker } from "./markers/textmarker";
import { TargetMarker } from "./markers/targetmarker";
import { AppStateChangedEvent, CoalitionAreaSelectedEvent, ConfigLoadedEvent, HiddenTypesChangedEvent, MapOptionsChangedEvent, MapSourceChangedEvent } from "../events";
import {
AppStateChangedEvent,
CoalitionAreaSelectedEvent,
ConfigLoadedEvent,
ContextActionChangedEvent,
ContextActionSetChangedEvent,
HiddenTypesChangedEvent,
MapOptionsChangedEvent,
MapSourceChangedEvent,
} from "../events";
import { ContextActionSet } from "../unit/contextactionset";
/* Register the handler for the box selection */
@@ -167,9 +175,7 @@ export class Map extends L.Map {
this.on("dblclick", (e: any) => this.#onDoubleClick(e));
this.on("mouseup", (e: any) => this.#onMouseUp(e));
this.on("mousedown", (e: any) => this.#onMouseDown(e));
this.on("contextmenu", (e: any) => {
e.originalEvent.preventDefault();
});
this.on("contextmenu", (e: any) => e.originalEvent.preventDefault());
this.on("mousemove", (e: any) => this.#onMouseMove(e));
@@ -213,8 +219,7 @@ export class Map extends L.Map {
this.updateMinimap();
});
ConfigLoadedEvent.on(() => {
let config = getApp().getConfig();
ConfigLoadedEvent.on((config: OlympusConfig) => {
let layerSet = false;
/* First load the map mirrors */
@@ -349,66 +354,18 @@ export class Map extends L.Map {
setContextActionSet(contextActionSet: ContextActionSet | null) {
this.#contextActionSet = contextActionSet;
ContextActionSetChangedEvent.dispatch(this.#contextActionSet)
}
setContextAction(contextAction: ContextAction | null) {
this.#contextAction = contextAction;
}
#onStateChanged(state: OlympusState, subState: OlympusSubState) {
/* Operations to perform when leaving a state */
this.getSelectedCoalitionArea()?.setEditing(false);
this.#currentSpawnMarker?.removeFrom(this);
this.#currentSpawnMarker = null;
if (state !== OlympusState.UNIT_CONTROL) {
getApp().getUnitsManager().deselectAllUnits();
}
if (state !== OlympusState.DRAW || (state === OlympusState.DRAW && subState !== DrawSubState.EDIT)) {
this.deselectAllCoalitionAreas();
}
/* Operations to perform when entering a state */
if (state === OlympusState.IDLE) {
getApp().getUnitsManager()?.deselectAllUnits();
} else if (state === OlympusState.SPAWN) {
if (subState === SpawnSubState.SPAWN_UNIT) {
console.log(`Spawn request table:`);
console.log(this.#spawnRequestTable);
this.#currentSpawnMarker = new TemporaryUnitMarker(
new L.LatLng(0, 0),
this.#spawnRequestTable?.unit.unitType ?? "",
this.#spawnRequestTable?.coalition ?? "neutral"
);
this.#currentSpawnMarker.addTo(this);
} else if (subState === SpawnSubState.SPAWN_EFFECT) {
console.log(`Effect request table:`);
console.log(this.#effectRequestTable);
// TODO
//this.#currentEffectMarker = new TemporaryUnitMarker(new L.LatLng(0, 0), this.#spawnRequestTable?.unit.unitType ?? "", this.#spawnRequestTable?.coalition ?? "neutral")
//this.#currentEffectMarker.addTo(this);
}
} 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);
}
}
ContextActionChangedEvent.dispatch(this.#contextAction)
}
getCurrentControls() {
const touch = matchMedia("(hover: none)").matches;
return [];
// TODO
// TODO, is this a good idea? I never look at the thing
//if (getApp().getState() === IDLE) {
// return [
// {
@@ -624,6 +581,14 @@ export class Map extends L.Map {
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);
@@ -668,12 +633,9 @@ export class Map extends L.Map {
}
this.setView(bounds.getCenter(), 8);
this.updateMinimap();
const boundaries = this.#getMinimapBoundaries();
this.#miniMapPolyline.setLatLngs(boundaries[theatre as keyof typeof boundaries]);
this.setLayerName(this.#layerName);
}
@@ -763,14 +725,6 @@ export class Map extends L.Map {
return marker;
}
getSelectedCoalitionArea() {
const coalitionArea = this.#coalitionAreas.find((coalitionArea: CoalitionPolygon | CoalitionCircle) => {
return coalitionArea.getSelected();
});
return coalitionArea ?? null;
}
setOption(key, value) {
this.#options[key] = value;
MapOptionsChangedEvent.dispatch(this.#options);
@@ -851,6 +805,50 @@ 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;
if (state !== OlympusState.UNIT_CONTROL) getApp().getUnitsManager().deselectAllUnits();
if (state !== OlympusState.DRAW || (state === OlympusState.DRAW && subState !== DrawSubState.EDIT)) this.deselectAllCoalitionAreas();
/* Operations to perform when entering a state */
if (state === OlympusState.IDLE) {
getApp().getUnitsManager()?.deselectAllUnits();
} else if (state === OlympusState.SPAWN) {
if (subState === SpawnSubState.SPAWN_UNIT) {
console.log(`Spawn request table:`);
console.log(this.#spawnRequestTable);
this.#currentSpawnMarker = new TemporaryUnitMarker(
new L.LatLng(0, 0),
this.#spawnRequestTable?.unit.unitType ?? "",
this.#spawnRequestTable?.coalition ?? "neutral"
);
this.#currentSpawnMarker.addTo(this);
} else if (subState === SpawnSubState.SPAWN_EFFECT) {
console.log(`Effect request table:`);
console.log(this.#effectRequestTable);
// TODO add temporary effect marker
//this.#currentEffectMarker = new TemporaryUnitMarker(new L.LatLng(0, 0), this.#spawnRequestTable?.unit.unitType ?? "", this.#spawnRequestTable?.coalition ?? "neutral")
//this.#currentEffectMarker.addTo(this);
}
} 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) {
this.#isDragging = true;
}
@@ -1037,14 +1035,14 @@ export class Map extends L.Map {
if (!this.#isDragging && !this.#isZooming) {
this.deselectAllCoalitionAreas();
if (getApp().getState() === OlympusState.IDLE) {
if (e.type === "touchstart") document.dispatchEvent(new CustomEvent("mapForceBoxSelect", { detail: e }));
else document.dispatchEvent(new CustomEvent("mapForceBoxSelect", { detail: e.originalEvent }));
if (e.type === "touchstart") document.dispatchEvent(new CustomEvent("forceboxselect", { detail: e }));
else document.dispatchEvent(new CustomEvent("forceboxselect", { detail: e.originalEvent }));
} else if (getApp().getState() === OlympusState.UNIT_CONTROL) {
if (e.originalEvent.button === 2) {
document.dispatchEvent(new CustomEvent("showMapContextMenu", { detail: e }));
document.dispatchEvent(new CustomEvent("showMapContextMenu", { detail: e })); // TODP
} else {
if (e.type === "touchstart") document.dispatchEvent(new CustomEvent("mapForceBoxSelect", { detail: e }));
else document.dispatchEvent(new CustomEvent("mapForceBoxSelect", { detail: e.originalEvent }));
if (e.type === "touchstart") document.dispatchEvent(new CustomEvent("forceboxselect", { detail: e }));
else document.dispatchEvent(new CustomEvent("forceboxselect", { detail: e.originalEvent }));
}
}
}

4
frontend/react/src/map/markers/custommarker.ts
View File

@@ -1,6 +1,4 @@
import { DivIcon, Map, Marker } from "leaflet";
import { MarkerOptions } from "leaflet";
import { LatLngExpression } from "leaflet";
import { DivIcon, Map, Marker, MarkerOptions, LatLngExpression } from "leaflet";
export class CustomMarker extends Marker {
constructor(latlng: LatLngExpression, options?: MarkerOptions) {

2
frontend/react/src/map/markers/destinationpreviewHandle.ts
View File

@@ -1,5 +1,5 @@
import { DivIcon, LatLng } from "leaflet";
import { CustomMarker } from "../markers/custommarker";
import { CustomMarker } from "./custommarker";
export class DestinationPreviewHandle extends CustomMarker {
constructor(latlng: LatLng) {

65
frontend/react/src/map/markers/temporaryunitmarker.ts
View File

@@ -1,8 +1,8 @@
import { CustomMarker } from "./custommarker";
import { DivIcon, LatLng } from "leaflet";
import { SVGInjector } from "@tanem/svg-injector";
import { getMarkerCategoryByName, getUnitDatabaseByCategory } from "../../other/utils";
import { getApp } from "../../olympusapp";
import { UnitBlueprint } from "../../interfaces";
export class TemporaryUnitMarker extends CustomMarker {
#name: string;
@@ -36,42 +36,43 @@ export class TemporaryUnitMarker extends CustomMarker {
}
createIcon() {
const category = getMarkerCategoryByName(this.#name);
const databaseEntry = getUnitDatabaseByCategory(category)?.getByName(this.#name);
const blueprint = getApp().getUnitsManager().getDatabase().getByName(this.#name);
/* Set the icon */
var icon = new DivIcon({
className: "leaflet-unit-icon",
iconAnchor: [25, 25],
iconSize: [50, 50],
});
this.setIcon(icon);
if (blueprint) {
/* Set the icon */
var icon = new DivIcon({
className: "leaflet-unit-icon",
iconAnchor: [25, 25],
iconSize: [50, 50],
});
this.setIcon(icon);
var el = document.createElement("div");
el.classList.add("unit");
el.setAttribute("data-object", `unit-${category}`);
el.setAttribute("data-coalition", this.#coalition);
var el = document.createElement("div");
el.classList.add("unit");
el.setAttribute("data-object", `unit-${blueprint.category}`);
el.setAttribute("data-coalition", this.#coalition);
// Main icon
var unitIcon = document.createElement("div");
unitIcon.classList.add("unit-icon");
var img = document.createElement("img");
// Main icon
var unitIcon = document.createElement("div");
unitIcon.classList.add("unit-icon");
var img = document.createElement("img");
img.src = `/vite/images/units/${databaseEntry?.markerFile ?? category}.svg`;
img.onload = () => SVGInjector(img);
unitIcon.appendChild(img);
unitIcon.toggleAttribute("data-rotate-to-heading", false);
el.append(unitIcon);
img.src = `/vite/images/units/${blueprint.markerFile ?? blueprint.category}.svg`;
img.onload = () => SVGInjector(img);
unitIcon.appendChild(img);
unitIcon.toggleAttribute("data-rotate-to-heading", false);
el.append(unitIcon);
// Short label
if (category == "aircraft" || category == "helicopter") {
var shortLabel = document.createElement("div");
shortLabel.classList.add("unit-short-label");
shortLabel.innerText = databaseEntry?.shortLabel || "";
el.append(shortLabel);
// Short label
if (blueprint.category == "aircraft" || blueprint.category == "helicopter") {
var shortLabel = document.createElement("div");
shortLabel.classList.add("unit-short-label");
shortLabel.innerText = blueprint?.shortLabel || "";
el.append(shortLabel);
}
this.getElement()?.appendChild(el);
this.getElement()?.classList.add("ol-temporary-marker");
}
this.getElement()?.appendChild(el);
this.getElement()?.classList.add("ol-temporary-marker");
}
}

1
frontend/react/src/map/map.css → frontend/react/src/map/stylesheets/map.css
View File

@@ -1,6 +1,5 @@
:root {
/** Colours **/
/*** Coalition: neutral ***/
--primary-neutral: #949ba7;
--secondary-neutral-outline: #111111;