From ee93806e190de9ace5cde8800e856481f96ae838 Mon Sep 17 00:00:00 2001 From: Pax1601 Date: Mon, 2 Oct 2023 17:29:54 +0200 Subject: [PATCH] Multiple bugfixes --- .../public/stylesheets/panels/unitcontrol.css | 3 +- client/public/stylesheets/style/style.css | 11 ++- client/src/map/map.ts | 89 ++++++++++--------- .../map/markers/destinationpreviewHandle.ts | 19 ++++ client/src/panels/mouseinfopanel.ts | 10 ++- client/src/panels/unitcontrolpanel.ts | 3 +- client/views/other/dialogs.ejs | 8 +- 7 files changed, 91 insertions(+), 52 deletions(-) create mode 100644 client/src/map/markers/destinationpreviewHandle.ts diff --git a/client/public/stylesheets/panels/unitcontrol.css b/client/public/stylesheets/panels/unitcontrol.css index 4865cce6..0b74a2ff 100644 --- a/client/public/stylesheets/panels/unitcontrol.css +++ b/client/public/stylesheets/panels/unitcontrol.css @@ -231,6 +231,7 @@ body.feature-forceShowUnitControlPanel #unit-control-panel { #advanced-settings-dialog:not([data-show-tanker]) #tanker-checkbox, #advanced-settings-dialog:not([data-show-AWACS]) #AWACS-checkbox, #advanced-settings-dialog:not([data-show-TACAN]) #TACAN-options, -#advanced-settings-dialog:not([data-show-radio]) #radio-options { +#advanced-settings-dialog:not([data-show-radio]) #radio-options, +#advanced-settings-dialog:not([data-show-air-unit-checkboxes]) .air-unit-checkbox { display: none; } \ No newline at end of file diff --git a/client/public/stylesheets/style/style.css b/client/public/stylesheets/style/style.css index f2a0a198..70b77e82 100644 --- a/client/public/stylesheets/style/style.css +++ b/client/public/stylesheets/style/style.css @@ -1047,7 +1047,9 @@ nav.ol-panel> :last-child { } .ol-coalitionarea-handle-icon, -.ol-coalitionarea-middle-handle-icon { +.ol-coalitionarea-middle-handle-icon, +.ol-destination-preview-icon, +.ol-destination-preview-handle-icon { pointer-events: none; z-index: 9999; border-radius: 999px; @@ -1065,6 +1067,13 @@ nav.ol-panel> :last-child { height: 16px; } +.ol-destination-preview-handle-icon { + background-color: #247be2; + border: 2px solid white; + width: 18px; + height: 18px; +} + dl.ol-data-grid { align-items: center; display: flex; diff --git a/client/src/map/map.ts b/client/src/map/map.ts index 360281a6..30958ac6 100644 --- a/client/src/map/map.ts +++ b/client/src/map/map.ts @@ -21,6 +21,7 @@ import { AirbaseSpawnContextMenu } from "../contextmenus/airbasespawnmenu"; import { Popup } from "../popups/popup"; import { GestureHandling } from "leaflet-gesture-handling"; import { TouchBoxSelect } from "./touchboxselect"; +import { DestinationPreviewHandle } from "./markers/destinationpreviewHandle"; var hasTouchScreen = false; if ("maxTouchPoints" in navigator) @@ -67,6 +68,8 @@ export class Map extends L.Map { #targetCursor: TargetMarker = new TargetMarker(new L.LatLng(0, 0), { interactive: false }); #destinationPreviewCursors: DestinationPreviewMarker[] = []; #drawingCursor: DrawingCursor = new DrawingCursor(); + #destinationPreviewHandle: DestinationPreviewHandle = new DestinationPreviewHandle(new L.LatLng(0, 0)); + #destinationPreviewHandleLine: L.Polyline = new L.Polyline([], { color: "#000000", weight: 3, opacity: 0.5, smoothFactor: 1, dashArray: "4, 8" }); #longPressHandled: boolean = false; #longPressTimer: number = 0; @@ -133,6 +136,7 @@ export class Map extends L.Map { this.on("click", (e: any) => this.#onClick(e)); this.on("dblclick", (e: any) => this.#onDoubleClick(e)); this.on("zoomstart", (e: any) => this.#onZoomStart(e)); + 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("contextmenu", (e: any) => this.#onContextMenu(e)); @@ -141,6 +145,7 @@ export class Map extends L.Map { this.on('mousedown', (e: any) => this.#onMouseDown(e)); this.on('mouseup', (e: any) => this.#onMouseUp(e)); this.on('mousemove', (e: any) => this.#onMouseMove(e)); + this.on('drag', (e: any) => this.#onMouseMove(e)); this.on('keydown', (e: any) => this.#onKeyDown(e)); this.on('keyup', (e: any) => this.#onKeyUp(e)); @@ -523,36 +528,38 @@ export class Map extends L.Map { } this.hideMapContextMenu(); - if (this.#state === IDLE) { - if (this.#state == IDLE) { - this.showMapContextMenu(e.originalEvent.x, e.originalEvent.y, e.latlng); - var clickedCoalitionArea = null; + if (!this.#shiftKey) { + 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)) { - if (coalitionArea.getSelected()) - clickedCoalitionArea = coalitionArea; - else - this.getMapContextMenu().setCoalitionArea(coalitionArea); + /* 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)) { + if (coalitionArea.getSelected()) + clickedCoalitionArea = coalitionArea; + else + this.getMapContextMenu().setCoalitionArea(coalitionArea); + } } + if (clickedCoalitionArea) + this.showCoalitionAreaContextMenu(e.originalEvent.x, e.originalEvent.y, e.latlng, clickedCoalitionArea); } - if (clickedCoalitionArea) - this.showCoalitionAreaContextMenu(e.originalEvent.x, e.originalEvent.y, e.latlng, clickedCoalitionArea); } - } - else if (this.#state === MOVE_UNIT) { - if (!e.originalEvent.ctrlKey) { - getApp().getUnitsManager().selectedUnitsClearDestinations(); + else if (this.#state === MOVE_UNIT) { + if (!e.originalEvent.ctrlKey) { + getApp().getUnitsManager().selectedUnitsClearDestinations(); + } + getApp().getUnitsManager().selectedUnitsAddDestination(this.#computeDestinationRotation && this.#destinationRotationCenter != null ? this.#destinationRotationCenter : e.latlng, this.#shiftKey, this.#destinationGroupRotation) + + this.#destinationGroupRotation = 0; + this.#destinationRotationCenter = null; + this.#computeDestinationRotation = false; + } + else { + this.setState(IDLE); } - getApp().getUnitsManager().selectedUnitsAddDestination(this.#computeDestinationRotation && this.#destinationRotationCenter != null ? this.#destinationRotationCenter : e.latlng, this.#shiftKey, this.#destinationGroupRotation) - - this.#destinationGroupRotation = 0; - this.#destinationRotationCenter = null; - this.#computeDestinationRotation = false; - } - else { - this.setState(IDLE); } } @@ -586,7 +593,7 @@ export class Map extends L.Map { } this.#longPressTimer = window.setTimeout(() => { - if (e.originalEvent.button != 2 || e.originalEvent.ctrlKey) + if (e.originalEvent.button != 2 || e.originalEvent.ctrlKey || e.originalEvent.shiftKey) return; this.hideMapContextMenu(); @@ -684,11 +691,15 @@ export class Map extends L.Map { this.#isZooming = true; } + #onZoom(e: any) { + if (this.#centerUnit != null) + this.#panToUnit(this.#centerUnit); + } + #onZoomEnd(e: any) { this.#isZooming = false; } - #panToUnit(unit: Unit) { var unitPosition = new L.LatLng(unit.getPosition().lat, unit.getPosition().lng); this.setView(unitPosition, this.getZoom(), { animate: false }); @@ -727,7 +738,7 @@ export class Map extends L.Map { #showDestinationCursors() { const singleCursor = !this.#shiftKey; - const selectedUnitsCount = getApp().getUnitsManager().getSelectedUnits({ excludeHumans: false, onlyOnePerGroup: true }).length; + const selectedUnitsCount = getApp().getUnitsManager().getSelectedUnits({ excludeHumans: true, onlyOnePerGroup: true }).length; if (selectedUnitsCount > 0) { if (singleCursor && this.#destinationPreviewCursors.length != 1) { this.#hideDestinationCursors(); @@ -741,6 +752,9 @@ export class Map extends L.Map { this.#destinationPreviewCursors.splice(0, 1); } + this.#destinationPreviewHandleLine.addTo(this); + this.#destinationPreviewHandle.addTo(this); + while (this.#destinationPreviewCursors.length < selectedUnitsCount) { var cursor = new DestinationPreviewMarker(this.getMouseCoordinates(), { interactive: false }); cursor.addTo(this); @@ -762,6 +776,9 @@ export class Map extends L.Map { this.#destinationPreviewCursors[idx].setLatLng(this.#shiftKey ? latlng : this.getMouseCoordinates()); }) }; + + this.#destinationPreviewHandleLine.setLatLngs([groupLatLng, this.getMouseCoordinates()]); + this.#destinationPreviewHandle.setLatLng(this.getMouseCoordinates()); } #hideDestinationCursors() { @@ -771,22 +788,15 @@ export class Map extends L.Map { }) this.#destinationPreviewCursors = []; + this.#destinationPreviewHandleLine.removeFrom(this); + this.#destinationPreviewHandle.removeFrom(this); + /* Reset the variables used to compute the rotation of the group cursors */ this.#destinationGroupRotation = 0; this.#computeDestinationRotation = false; this.#destinationRotationCenter = null; } - #showTargetCursor() { - this.#hideTargetCursor(); - this.#targetCursor.addTo(this); - } - - #hideTargetCursor() { - this.#targetCursor.setLatLng(new L.LatLng(0, 0)); - this.removeLayer(this.#targetCursor); - } - #showDrawingCursor() { this.#hideDefaultCursor(); if (!this.hasLayer(this.#drawingCursor)) @@ -804,7 +814,6 @@ export class Map extends L.Map { if (this.#ctrlKey || this.#selecting) { /* Hide all non default cursors */ this.#hideDestinationCursors(); - this.#hideTargetCursor(); this.#hideDrawingCursor(); this.#showDefaultCursor(); @@ -812,13 +821,11 @@ export class Map extends L.Map { /* Hide all the unnecessary cursors depending on the active state */ if (this.#state !== IDLE) this.#hideDefaultCursor(); if (this.#state !== MOVE_UNIT) this.#hideDestinationCursors(); - //if (![BOMBING, CARPET_BOMBING, FIRE_AT_AREA].includes(this.#state)) this.#hideTargetCursor(); if (this.#state !== COALITIONAREA_DRAW_POLYGON) this.#hideDrawingCursor(); /* Show the active cursor depending on the active state */ if (this.#state === IDLE) this.#showDefaultCursor(); else if (this.#state === MOVE_UNIT) this.#showDestinationCursors(); - //else if ([BOMBING, CARPET_BOMBING, FIRE_AT_AREA].includes(this.#state)) this.#showTargetCursor(); else if (this.#state === COALITIONAREA_DRAW_POLYGON) this.#showDrawingCursor(); } } diff --git a/client/src/map/markers/destinationpreviewHandle.ts b/client/src/map/markers/destinationpreviewHandle.ts new file mode 100644 index 00000000..e6037edf --- /dev/null +++ b/client/src/map/markers/destinationpreviewHandle.ts @@ -0,0 +1,19 @@ +import { DivIcon, LatLng } from "leaflet"; +import { CustomMarker } from "../markers/custommarker"; + +export class DestinationPreviewHandle extends CustomMarker { + constructor(latlng: LatLng) { + super(latlng, {interactive: true, draggable: true}); + } + + createIcon() { + this.setIcon(new DivIcon({ + iconSize: [18, 18], + iconAnchor: [9, 9], + className: "leaflet-destination-preview-handle-marker", + })); + var el = document.createElement("div"); + el.classList.add("ol-destination-preview-handle-icon"); + this.getElement()?.appendChild(el); + } +} \ No newline at end of file diff --git a/client/src/panels/mouseinfopanel.ts b/client/src/panels/mouseinfopanel.ts index bec57566..ad24c24f 100644 --- a/client/src/panels/mouseinfopanel.ts +++ b/client/src/panels/mouseinfopanel.ts @@ -26,6 +26,7 @@ export class MouseInfoPanel extends Panel { getApp().getMap()?.on("click", (e: any) => this.#onMapClick(e)); getApp().getMap()?.on('zoom', (e: any) => this.#onZoom(e)); getApp().getMap()?.on('mousemove', (e: any) => this.#onMouseMove(e)); + getApp().getMap()?.on('drag', (e: any) => this.#onMouseMove(e)); document.addEventListener('unitsSelection', (e: CustomEvent) => this.#update()); document.addEventListener('clearSelection', () => this.#update()); @@ -107,14 +108,15 @@ export class MouseInfoPanel extends Panel { #drawMeasureLine() { var mouseLatLng = getApp().getMap().containerPointToLatLng(getApp().getMap().getMousePosition()); + const mousePosition = getApp().getMap().getMousePosition(); if (this.#measurePoint != null) { var points = [this.#measurePoint, mouseLatLng]; this.#measureLine.setLatLngs(points); var dist = distance(this.#measurePoint.lat, this.#measurePoint.lng, mouseLatLng.lat, mouseLatLng.lng); var bear = bearing(this.#measurePoint.lat, this.#measurePoint.lng, mouseLatLng.lat, mouseLatLng.lng); var startXY = getApp().getMap().latLngToContainerPoint(this.#measurePoint); - var dx = (getApp().getMap().getMousePosition().x - startXY.x); - var dy = (getApp().getMap().getMousePosition().y - startXY.y); + var dx = mousePosition.x - startXY.x; + var dy = mousePosition.y - startXY.y; var angle = Math.atan2(dy, dx); if (angle > Math.PI / 2) @@ -133,8 +135,8 @@ export class MouseInfoPanel extends Panel { let data = [`${bng}°`, `${str} ${unit}`]; this.#measureBox.innerText = data.join(" / "); - this.#measureBox.style.left = (getApp().getMap().getMousePosition().x + startXY.x) / 2 - this.#measureBox.offsetWidth / 2 + "px"; - this.#measureBox.style.top = (getApp().getMap().getMousePosition().y + startXY.y) / 2 - this.#measureBox.offsetHeight / 2 + "px"; + this.#measureBox.style.left = (mousePosition.x + startXY.x) / 2 - this.#measureBox.offsetWidth / 2 + "px"; + this.#measureBox.style.top = (mousePosition.y + startXY.y) / 2 - this.#measureBox.offsetHeight / 2 + "px"; this.#measureBox.style.rotate = angle + "rad"; } } diff --git a/client/src/panels/unitcontrolpanel.ts b/client/src/panels/unitcontrolpanel.ts index 4a1b0cbe..95475529 100644 --- a/client/src/panels/unitcontrolpanel.ts +++ b/client/src/panels/unitcontrolpanel.ts @@ -226,7 +226,7 @@ export class UnitControlPanel extends Panel { const TACANCallsignInput = this.#advancedSettingsDialog.querySelector("#tacan-callsign")?.querySelector("input") as HTMLInputElement; const radioMhzInput = this.#advancedSettingsDialog.querySelector("#radio-mhz")?.querySelector("input") as HTMLInputElement; const radioCallsignNumberInput = this.#advancedSettingsDialog.querySelector("#radio-callsign-number")?.querySelector("input") as HTMLInputElement; - + const unit = units[0]; const roles = aircraftDatabase.getByName(unit.getName())?.loadouts?.map((loadout) => {return loadout.roles}) const tanker = roles != undefined && Array.prototype.concat.apply([], roles)?.includes("Refueling"); @@ -236,6 +236,7 @@ export class UnitControlPanel extends Panel { /* Activate the correct options depending on unit type */ this.#advancedSettingsDialog.toggleAttribute("data-show-settings", !tanker && !AWACS); + this.#advancedSettingsDialog.toggleAttribute("data-show-air-unit-checkboxes", ["Aircraft", "Helicopter"].includes(units[0].getCategory())); this.#advancedSettingsDialog.toggleAttribute("data-show-tasking", tanker || AWACS); this.#advancedSettingsDialog.toggleAttribute("data-show-tanker", tanker); this.#advancedSettingsDialog.toggleAttribute("data-show-AWACS", AWACS); diff --git a/client/views/other/dialogs.ejs b/client/views/other/dialogs.ejs index 3615be2d..3e20be92 100644 --- a/client/views/other/dialogs.ejs +++ b/client/views/other/dialogs.ejs @@ -38,28 +38,28 @@
-
+
-
+
-
+
-
+