From 1dceb0b421a85f89436cd34e096a91da10ee8a53 Mon Sep 17 00:00:00 2001 From: Pax1601 Date: Sun, 7 Jul 2024 19:10:02 +0200 Subject: [PATCH] Added ability to box select with long press --- frontend/react/src/map/boxselect.ts | 8 +++-- frontend/react/src/map/map.ts | 33 +++++++++++++++++-- frontend/react/src/ui/panels/sidebar.tsx | 14 +------- .../src/ui/panels/unitmousecontrolbar.tsx | 3 ++ frontend/react/src/unit/unit.ts | 18 ++++++---- 5 files changed, 52 insertions(+), 24 deletions(-) diff --git a/frontend/react/src/map/boxselect.ts b/frontend/react/src/map/boxselect.ts index cc54d58a..37a4b655 100644 --- a/frontend/react/src/map/boxselect.ts +++ b/frontend/react/src/map/boxselect.ts @@ -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 () { diff --git a/frontend/react/src/map/map.ts b/frontend/react/src/map/map.ts index 3a730862..fb8e46fe 100644 --- a/frontend/react/src/map/map.ts +++ b/frontend/react/src/map/map.ts @@ -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; diff --git a/frontend/react/src/ui/panels/sidebar.tsx b/frontend/react/src/ui/panels/sidebar.tsx index 4ec83051..0cf62d6f 100644 --- a/frontend/react/src/ui/panels/sidebar.tsx +++ b/frontend/react/src/ui/panels/sidebar.tsx @@ -7,9 +7,7 @@ import { faEllipsisV, faCog, faQuestionCircle, - faPlusSquare, - faBox, - faObjectGroup, + faPlusSquare } from "@fortawesome/free-solid-svg-icons"; import { EventsConsumer } from "../../eventscontext"; import { StateConsumer } from "../../statecontext"; @@ -73,16 +71,6 @@ export function SideBar() { icon={faPencil} tooltip="Hide/show drawing menu" > - { - document.dispatchEvent( - new CustomEvent("mapForceBoxSelect") - ); - }} - checked={appState.mapBoxSelection} - icon={faObjectGroup} - tooltip="Enable box selection on the map" - >
diff --git a/frontend/react/src/ui/panels/unitmousecontrolbar.tsx b/frontend/react/src/ui/panels/unitmousecontrolbar.tsx index 1fc00bd8..cf1e56e3 100644 --- a/frontend/react/src/ui/panels/unitmousecontrolbar.tsx +++ b/frontend/react/src/ui/panels/unitmousecontrolbar.tsx @@ -117,6 +117,9 @@ export function UnitMouseControlBar(props: {}) { }); } else { setActiveContextAction(null); + getApp().getMap().setState(CONTEXT_ACTION, { + contextAction: null, + }); } } }} diff --git a/frontend/react/src/unit/unit.ts b/frontend/react/src/unit/unit.ts index 01a405d9..24412215 100644 --- a/frontend/react/src/unit/unit.ts +++ b/frontend/react/src/unit/unit.ts @@ -1218,10 +1218,9 @@ export abstract class Unit extends CustomMarker { } updatePathFromMarkers() { - var path: any = {}; + var path: any = []; this.#pathMarkers.forEach((marker) => { path[Object.keys(path).length.toString()] = marker.getLatLng(); - console.log(marker.getLatLng()); }); getApp().getServerManager().addDestination(this.ID, path); } @@ -1818,8 +1817,12 @@ export abstract class Unit extends CustomMarker { icon: pathIcon, draggable: true, }).addTo(getApp().getMap()); + marker.on("dragstart", (event) => { + event.target.options["freeze"] = true; + }) marker.on("dragend", (event) => { this.updatePathFromMarkers(); + event.target.options["freeze"] = false; }); this.#pathMarkers.push(marker); } @@ -1835,10 +1838,13 @@ export abstract class Unit extends CustomMarker { /* Update the position of the existing markers (to avoid creating markers uselessly) */ for (let WP in this.#activePath) { var destination = this.#activePath[WP]; - this.#pathMarkers[parseInt(WP)].setLatLng([ - destination.lat, - destination.lng, - ]); + var frozen = this.#pathMarkers[parseInt(WP)].options["freeze"]; + if (!this.#pathMarkers[parseInt(WP)].options["freeze"]) { + this.#pathMarkers[parseInt(WP)].setLatLng([ + destination.lat, + destination.lng, + ]); + } points.push(new LatLng(destination.lat, destination.lng)); this.#pathPolyline.setLatLngs(points); }