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 ability to box select with long press

Browse Source
This commit is contained in:
Pax1601
2024-07-07 19:10:02 +02:00
parent fbc22676c5
commit 1dceb0b421
5 changed files with 52 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@@ -95,6 +95,8 @@ export class Map extends L.Map {
#theatre: string = "";
#waitingForDoubleClick: boolean = false;
#doubleClickTimer: number = 0;
#longPressTimer: number = 0;
#dragging: boolean = false;
/**
*
@@ -138,9 +140,12 @@ export class Map extends L.Map {
this.on("zoom", (e: any) => this.#onZoom(e));
this.on("zoomend", (e: any) => this.#onZoomEnd(e));
this.on("drag", (e: any) => this.centerOnUnit(null));
this.on("dragstart", (e: any) => this.#onDragStart());
this.on("dragend", (e: any) => this.#onDragEnd(null));
this.on("contextmenu", (e: any) => this.#onContextMenu(e));
this.on("selectionstart", (e: any) => this.#onSelectionStart(e));
this.on("selectionend", (e: any) => this.#onSelectionEnd(e));
this.on("mouseup", (e: any) => this.#onMouseUp(e));
this.on("mousedown", (e: any) => this.#onMouseDown(e));
this.on("mousemove", (e: any) => this.#onMouseMove(e));
this.on("keydown", (e: any) => this.#onKeyDown(e));
@@ -149,6 +154,9 @@ export class Map extends L.Map {
if (this.#slaveDCSCamera) this.#broadcastPosition();
});
L.DomEvent.on(this.getContainer(), "touchstart", this.#onMouseDown, this);
L.DomEvent.on(this.getContainer(), "touchend", this.#onMouseUp, this);
/* Event listeners */
document.addEventListener("hiddenTypesChanged", (ev: CustomEventInit) => {
Object.values(getApp().getUnitsManager().getUnits()).forEach(
@@ -735,7 +743,8 @@ export class Map extends L.Map {
/* Still waiting so no doubleclick; do the click action */
if (this.#waitingForDoubleClick) {
if (!this.#preventLeftClick) {
this.hideAllContextMenus();
/* Execute the short click action */
if (this.#state === IDLE) {
this.deselectAllCoalitionAreas();
} else if (this.#state === SPAWN_UNIT) {
@@ -791,6 +800,14 @@ export class Map extends L.Map {
#onContextMenu(e: any) {}
#onDragStart(e: any) {
this.#dragging = true;
}
#onDragEnd(e: any) {
this.#dragging = false;
}
#onSelectionStart(e: any) {
this.#selecting = true;
}
@@ -806,7 +823,19 @@ export class Map extends L.Map {
document.dispatchEvent(new CustomEvent("mapSelectionEnd"));
}
#onMouseDown(e: any) {}
#onMouseUp(e: any) {
window.clearTimeout(this.#longPressTimer);
}
#onMouseDown(e: any) {
this.#longPressTimer = window.setTimeout(()=> {
if (!this.#dragging)
if (e.type === "touchstart")
document.dispatchEvent(new CustomEvent("mapForceBoxSelect", {detail: e}));
else
document.dispatchEvent(new CustomEvent("mapForceBoxSelect", {detail: e.originalEvent}));
}, 500);
}
#onMouseMove(e: any) {
this.#lastMousePosition.x = e.originalEvent.x;