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: Aligned orbits representation, added visibility option

Browse Source
This commit is contained in:
Davide Passoni
2025-02-26 12:05:59 +01:00
parent c7ff73f8a6
commit 8aac6b7d7e
10 changed files with 193 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,7 +1,7 @@
import { DivIcon, LatLng } from "leaflet";
import { CustomMarker } from "../markers/custommarker";
export class CoalitionAreaHandle extends CustomMarker {
export class DraggableHandle extends CustomMarker {
constructor(latlng: LatLng) {
super(latlng, { interactive: true, draggable: true });
@@ -15,11 +15,11 @@ export class CoalitionAreaHandle extends CustomMarker {
new DivIcon({
iconSize: [24, 24],
iconAnchor: [12, 12],
className: "leaflet-coalitionarea-handle-marker",
className: "leaflet-draggable-handle-marker",
})
);
var el = document.createElement("div");
el.classList.add("ol-coalitionarea-handle-icon");
el.classList.add("ol-draggable-handle-icon");
this.getElement()?.appendChild(el);
}
}

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

@@ -1,6 +1,6 @@
import { LatLngExpression, Map, Circle, DivIcon, Marker, CircleOptions, LatLng } from "leaflet";
import { getApp } from "../../olympusapp";
import { CoalitionAreaHandle } from "./coalitionareahandle";
import { DraggableHandle } from "./coalitionareahandle";
import { BLUE_COMMANDER, colors, RED_COMMANDER } from "../../constants/constants";
import { Coalition } from "../../types/types";
import * as turf from "@turf/turf";
@@ -12,7 +12,7 @@ export class CoalitionCircle extends Circle {
#coalition: Coalition = "blue";
#selected: boolean = true;
#creating: boolean = false;
#radiusHandle: CoalitionAreaHandle;
#radiusHandle: DraggableHandle;
#labelText: string;
#label: Marker;
#updateTimeout: number | null = null;
@@ -140,7 +140,7 @@ export class CoalitionCircle extends Circle {
if (this.#selected) {
const dest = turf.destination(turf.point([this.getLatLng().lng, this.getLatLng().lat]), this.getRadius() / 1000, 0);
this.#radiusHandle = new CoalitionAreaHandle(new LatLng(dest.geometry.coordinates[1], dest.geometry.coordinates[0]));
this.#radiusHandle = new DraggableHandle(new LatLng(dest.geometry.coordinates[1], dest.geometry.coordinates[0]));
this.#radiusHandle.addTo(getApp().getMap());
this.#radiusHandle.on("drag", (e: any) => {
this.setRadius(this.getLatLng().distanceTo(e.latlng));

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

@@ -1,6 +1,6 @@
import { LatLng, LatLngExpression, Map, Point, Polygon, PolylineOptions, DivIcon, Marker } from "leaflet";
import { getApp } from "../../olympusapp";
import { CoalitionAreaHandle } from "./coalitionareahandle";
import { DraggableHandle } from "./coalitionareahandle";
import { CoalitionAreaMiddleHandle } from "./coalitionareamiddlehandle";
import { BLUE_COMMANDER, colors, RED_COMMANDER } from "../../constants/constants";
import { Coalition } from "../../types/types";
@@ -13,7 +13,7 @@ export class CoalitionPolygon extends Polygon {
#coalition: Coalition = "blue";
#selected: boolean = true;
#creating: boolean = false;
#handles: CoalitionAreaHandle[] = [];
#handles: DraggableHandle[] = [];
#middleHandles: CoalitionAreaMiddleHandle[] = [];
#activeIndex: number = 0;
#labelText: string;
@@ -132,7 +132,7 @@ export class CoalitionPolygon extends Polygon {
onRemove(map: Map): this {
super.onRemove(map);
this.#label?.removeFrom(map);
this.#handles.concat(this.#middleHandles).forEach((handle: CoalitionAreaHandle | CoalitionAreaMiddleHandle) => handle.removeFrom(map));
this.#handles.concat(this.#middleHandles).forEach((handle: DraggableHandle | CoalitionAreaMiddleHandle) => handle.removeFrom(map));
return this;
}
@@ -161,13 +161,13 @@ export class CoalitionPolygon extends Polygon {
}
#setHandles() {
this.#handles.forEach((handle: CoalitionAreaHandle) => handle.removeFrom(getApp().getMap()));
this.#handles.forEach((handle: DraggableHandle) => handle.removeFrom(getApp().getMap()));
this.#handles = [];
if (this.getSelected()) {
var latlngs = this.getLatLngs()[0] as LatLng[];
latlngs.forEach((latlng: LatLng, idx: number) => {
/* Add the polygon vertex handle (for moving the vertex) */
const handle = new CoalitionAreaHandle(latlng);
const handle = new DraggableHandle(latlng);
handle.addTo(getApp().getMap());
handle.on("drag", (e: any) => {
var latlngs = this.getLatLngs()[0] as LatLng[];