From a10c113c423eee093fcc3a1673ce1772ebd69bda Mon Sep 17 00:00:00 2001 From: Pax1601 Date: Wed, 30 Aug 2023 09:10:42 +0200 Subject: [PATCH] Right click long press menu completed --- client/src/controls/dropdown.ts | 8 +-- client/src/map/map.ts | 118 +++++++++++++++++--------------- 2 files changed, 65 insertions(+), 61 deletions(-) diff --git a/client/src/controls/dropdown.ts b/client/src/controls/dropdown.ts index e02b611b..0b1b9d58 100644 --- a/client/src/controls/dropdown.ts +++ b/client/src/controls/dropdown.ts @@ -14,13 +14,9 @@ export class Dropdown { this.#defaultValue = this.#value.innerText; this.#callback = callback; - if (options != null) { - this.setOptions(options); - } + if (options != null) this.setOptions(options); - this.#value.addEventListener("click", (ev) => { - this.#toggle(); - }); + this.#value.addEventListener("click", (ev) => { this.#toggle(); }); document.addEventListener("click", (ev) => { if (!(this.#value.contains(ev.target as Node) || this.#options.contains(ev.target as Node) || this.#element.contains(ev.target as Node))) { diff --git a/client/src/map/map.ts b/client/src/map/map.ts index cfd3edc9..6dfd0222 100644 --- a/client/src/map/map.ts +++ b/client/src/map/map.ts @@ -54,7 +54,8 @@ export class Map extends L.Map { #targetCursor: TargetMarker = new TargetMarker(new L.LatLng(0, 0), { interactive: false }); #destinationPreviewCursors: DestinationPreviewMarker[] = []; #drawingCursor: DrawingCursor = new DrawingCursor(); - #longPressCounter: number = 0; + #longPressHandled: boolean = false; + #longPressTimer: number = 0; #mapContextMenu: MapContextMenu = new MapContextMenu("map-contextmenu"); #unitContextMenu: UnitContextMenu = new UnitContextMenu("unit-contextmenu"); @@ -134,7 +135,6 @@ export class Map extends L.Map { } }); - document.addEventListener("toggleCoalitionAreaDraw", (ev: CustomEventInit) => { this.getMapContextMenu().hide(); this.deselectAllCoalitionAreas(); @@ -466,14 +466,19 @@ export class Map extends L.Map { } #onContextMenu(e: any) { + /* A long press will show the point action context menu */ + window.clearInterval(this.#longPressTimer); + if (this.#longPressHandled) { + this.#longPressHandled = false; + return; + } + this.hideMapContextMenu(); - - var isLongPress = (new Date().getTime()) - this.#longPressCounter > 250; - if (this.#state === IDLE) { if (this.#state == IDLE) { this.showMapContextMenu(e.originalEvent.x, e.originalEvent.y, e.latlng); var clickedCoalitionArea = null; + /* Coalition areas are ordered in the #coalitionAreas array according to their zindex. Select the upper one */ for (let coalitionArea of this.#coalitionAreas) { if (coalitionArea.getBounds().contains(e.latlng)) { @@ -488,53 +493,11 @@ export class Map extends L.Map { } } else if (this.#state === MOVE_UNIT) { - if (isLongPress) { - var options: { [key: string]: { text: string, tooltip: string } } = {}; - const selectedUnits = getUnitsManager().getSelectedUnits(); - const selectedUnitTypes = getUnitsManager().getSelectedUnitsTypes(); - - if (selectedUnitTypes.length === 1 && ["Aircraft", "Helicopter"].includes(selectedUnitTypes[0])) { - if (selectedUnits.every((unit: Unit) => { return unit.canFulfillRole(["CAS", "Strike"]) })) { - options["bomb"] = { text: "Precision bombing", tooltip: "Precision bombing of a specific point" }; - options["carpet-bomb"] = { text: "Carpet bombing", tooltip: "Carpet bombing close to a point" }; - } else { - getInfoPopup().setText(`Selected units can not perform point actions.`); - } - } - else if (selectedUnitTypes.length === 1 && ["GroundUnit", "NavyUnit"].includes(selectedUnitTypes[0])) { - if (selectedUnits.every((unit: Unit) => { return ["Gun Artillery", "Rocket Artillery", "Infantry", "IFV", "Tank", "Cruiser", "Destroyer", "Frigate"].includes(unit.getType()) })) - options["fire-at-area"] = { text: "Fire at area", tooltip: "Fire at a large area" }; - else - getInfoPopup().setText(`Selected units can not perform point actions.`); - } - else { - getInfoPopup().setText(`Multiple unit types selected, no common actions available.`); - } - - if (Object.keys(options).length > 0) { - this.showUnitContextMenu(e.originalEvent.x, e.originalEvent.y, e.latlng); - this.getUnitContextMenu().setOptions(options, (option: string) => { - this.hideUnitContextMenu(); - if (option === "bomb") { - getUnitsManager().getSelectedUnits().length > 0 ? this.setState(MOVE_UNIT) : this.setState(IDLE); - getUnitsManager().selectedUnitsBombPoint(this.getMouseCoordinates()); - } - else if (option === "carpet-bomb") { - getUnitsManager().getSelectedUnits().length > 0 ? this.setState(MOVE_UNIT) : this.setState(IDLE); - getUnitsManager().selectedUnitsCarpetBomb(this.getMouseCoordinates()); - } - else if (option === "fire-at-area") { - getUnitsManager().getSelectedUnits().length > 0 ? this.setState(MOVE_UNIT) : this.setState(IDLE); - getUnitsManager().selectedUnitsFireAtArea(this.getMouseCoordinates()); - } - }); - } - } else { - if (!e.originalEvent.ctrlKey) { - getUnitsManager().selectedUnitsClearDestinations(); - } - getUnitsManager().selectedUnitsAddDestination(this.#computeDestinationRotation && this.#destinationRotationCenter != null ? this.#destinationRotationCenter : e.latlng, this.#shiftKey, this.#destinationGroupRotation) + if (!e.originalEvent.ctrlKey) { + getUnitsManager().selectedUnitsClearDestinations(); } + getUnitsManager().selectedUnitsAddDestination(this.#computeDestinationRotation && this.#destinationRotationCenter != null ? this.#destinationRotationCenter : e.latlng, this.#shiftKey, this.#destinationGroupRotation) + this.#destinationGroupRotation = 0; this.#destinationRotationCenter = null; this.#computeDestinationRotation = false; @@ -573,7 +536,55 @@ export class Map extends L.Map { } } - this.#longPressCounter = new Date().getTime(); + this.#longPressTimer = window.setTimeout(() => { + if (e.originalEvent.button != 2) + return; + + this.hideMapContextMenu(); + this.#longPressHandled = true; + + var options: { [key: string]: { text: string, tooltip: string } } = {}; + const selectedUnits = getUnitsManager().getSelectedUnits(); + const selectedUnitTypes = getUnitsManager().getSelectedUnitsTypes(); + + if (selectedUnitTypes.length === 1 && ["Aircraft", "Helicopter"].includes(selectedUnitTypes[0])) { + if (selectedUnits.every((unit: Unit) => { return unit.canFulfillRole(["CAS", "Strike"]) })) { + options["bomb"] = { text: "Precision bombing", tooltip: "Precision bombing of a specific point" }; + options["carpet-bomb"] = { text: "Carpet bombing", tooltip: "Carpet bombing close to a point" }; + } else { + getInfoPopup().setText(`Selected units can not perform point actions.`); + } + } + else if (selectedUnitTypes.length === 1 && ["GroundUnit", "NavyUnit"].includes(selectedUnitTypes[0])) { + if (selectedUnits.every((unit: Unit) => { return ["Gun Artillery", "Rocket Artillery", "Infantry", "IFV", "Tank", "Cruiser", "Destroyer", "Frigate"].includes(unit.getType()) })) + options["fire-at-area"] = { text: "Fire at area", tooltip: "Fire at a large area" }; + else + getInfoPopup().setText(`Selected units can not perform point actions.`); + } + else { + getInfoPopup().setText(`Multiple unit types selected, no common actions available.`); + } + + if (Object.keys(options).length > 0) { + this.showUnitContextMenu(e.originalEvent.x, e.originalEvent.y, e.latlng); + this.getUnitContextMenu().setOptions(options, (option: string) => { + this.hideUnitContextMenu(); + if (option === "bomb") { + getUnitsManager().getSelectedUnits().length > 0 ? this.setState(MOVE_UNIT) : this.setState(IDLE); + getUnitsManager().selectedUnitsBombPoint(this.getMouseCoordinates()); + } + else if (option === "carpet-bomb") { + getUnitsManager().getSelectedUnits().length > 0 ? this.setState(MOVE_UNIT) : this.setState(IDLE); + getUnitsManager().selectedUnitsCarpetBomb(this.getMouseCoordinates()); + } + else if (option === "fire-at-area") { + getUnitsManager().getSelectedUnits().length > 0 ? this.setState(MOVE_UNIT) : this.setState(IDLE); + getUnitsManager().selectedUnitsFireAtArea(this.getMouseCoordinates()); + } + }); + } + }, 150); + this.#longPressHandled = false; } #onMouseUp(e: any) { @@ -591,9 +602,6 @@ export class Map extends L.Map { this.#destinationGroupRotation = -bearing(this.#destinationRotationCenter.lat, this.#destinationRotationCenter.lng, this.getMouseCoordinates().lat, this.getMouseCoordinates().lng); this.#updateDestinationCursors(); } - //else if ([BOMBING, CARPET_BOMBING, FIRE_AT_AREA].includes(this.#state)) { - // this.#targetCursor.setLatLng(this.getMouseCoordinates()); - //} else if (this.#state === COALITIONAREA_DRAW_POLYGON) { this.#drawingCursor.setLatLng(e.latlng); /* Update the polygon being drawn with the current position of the mouse cursor */