From 5e5ee30b8f34559a2bc4158ee9518aa63ef21871 Mon Sep 17 00:00:00 2001 From: MarcoJayUsai Date: Mon, 11 Nov 2024 18:56:29 +0100 Subject: [PATCH 1/7] feat(mouse info panel): added selected unit coordinates displaying The coordinates are only shown if one unit has been selected. --- .../public/stylesheets/panels/mouseinfo.css | 19 ++++++ frontend/server/views/panels/mouseinfo.ejs | 37 +++++++++++ frontend/website/src/panels/mouseinfopanel.ts | 66 ++++++++++++++++++- 3 files changed, 120 insertions(+), 2 deletions(-) diff --git a/frontend/server/public/stylesheets/panels/mouseinfo.css b/frontend/server/public/stylesheets/panels/mouseinfo.css index c82b25e4..384933cc 100644 --- a/frontend/server/public/stylesheets/panels/mouseinfo.css +++ b/frontend/server/public/stylesheets/panels/mouseinfo.css @@ -107,4 +107,23 @@ #coordinates-tool[data-location-system="MGRS"] [data-location-system="MGRS"], #coordinates-tool[data-location-system="UTM"] [data-location-system="UTM"] { display:flex; +} + +/* Unit Coordinates */ +#unit-coordinates .elevation::after { + content: attr(data-value) +} + +#unit-coordinates[data-location-system] [data-location-system] { + display:none; +} + +#unit-coordinates[data-location-system="LatLng"] [data-location-system="LatLng"], +#unit-coordinates[data-location-system="MGRS"] [data-location-system="MGRS"], +#unit-coordinates[data-location-system="UTM"] [data-location-system="UTM"] { + display:flex; +} + +#unit-coordinates-title { + font-size: 10px; } \ No newline at end of file diff --git a/frontend/server/views/panels/mouseinfo.ejs b/frontend/server/views/panels/mouseinfo.ejs index 990258e7..a9ac7410 100644 --- a/frontend/server/views/panels/mouseinfo.ejs +++ b/frontend/server/views/panels/mouseinfo.ejs @@ -60,4 +60,41 @@ + Selected Unit Coordinates: + +
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+
+ \ No newline at end of file diff --git a/frontend/website/src/panels/mouseinfopanel.ts b/frontend/website/src/panels/mouseinfopanel.ts index 82dba41e..0f8bfd48 100644 --- a/frontend/website/src/panels/mouseinfopanel.ts +++ b/frontend/website/src/panels/mouseinfopanel.ts @@ -5,9 +5,11 @@ import { Unit } from "../unit/unit"; import { Panel } from "./panel"; import formatcoords from "formatcoords"; import { MGRS_PRECISION_100M, MGRS_PRECISION_10KM, MGRS_PRECISION_10M, MGRS_PRECISION_1KM, MGRS_PRECISION_1M } from "../constants/constants"; +import { log } from "console"; export class MouseInfoPanel extends Panel { #coordinatesElement:HTMLElement; + #unitCoordinatesElement:HTMLElement; #locationSystems = [ "LatLng", "MGRS", "UTM" ]; #measureMarker: Marker; #measurePoint: LatLng | null = null; @@ -18,6 +20,9 @@ export class MouseInfoPanel extends Panel { #selectedMGRSPrecisionIndex = 3; #selectedLocationSystemIndex = 0; #elevationRequest: XMLHttpRequest | null = null; + #unitElevationRequest: XMLHttpRequest | null = null; + #unitElevation: any = null; + constructor(ID: string) { super( ID ); @@ -38,6 +43,7 @@ export class MouseInfoPanel extends Panel { document.addEventListener('clearSelection', () => this.#update()); this.#coordinatesElement = this.getElement().querySelector( '#coordinates-tool' ); + this.#unitCoordinatesElement = this.getElement().querySelector( '#unit-coordinates' ); this.#coordinatesElement.addEventListener( "click", ( ev:MouseEvent ) => { this.#changeLocationSystem(); @@ -79,9 +85,18 @@ export class MouseInfoPanel extends Panel { const mousePosition = getApp().getMap().getMouseCoordinates(); var selectedUnitPosition = null; + var selectedUnits = getApp().getUnitsManager().getSelectedUnits(); - if (selectedUnits && selectedUnits.length == 1) + if (selectedUnits && selectedUnits.length == 1) { + this.getElement().querySelector(`#unit-coordinates`)?.classList.remove('hide'); + this.getElement().querySelector(`#unit-coordinates-title`)?.classList.remove('hide'); selectedUnitPosition = new LatLng(selectedUnits[0].getPosition().lat, selectedUnits[0].getPosition().lng); + } else { + selectedUnitPosition = null; + this.#unitElevation = null; + this.getElement().querySelector(`#unit-coordinates`)?.classList.add('hide'); + this.getElement().querySelector(`#unit-coordinates-title`)?.classList.add('hide'); + } /* Draw measures from selected unit, from pin location, and from bullseyes */ this.#drawMeasure("ref-measure-position", "measure-position", this.#measurePoint, mousePosition); @@ -110,6 +125,24 @@ export class MouseInfoPanel extends Panel { this.#drawCoordinates("ref-mouse-position-longitude", "mouse-position-longitude", coordString.split(" ")[1]); } + /* Draw selected unit coordinates */ + if (selectedUnitPosition) { + var unitCoords = formatcoords(selectedUnitPosition.lat, selectedUnitPosition.lng); + var unitCoordString = unitCoords.format('XDDMMss', {decimalPlaces: 4}); + + if ( this.#getLocationSystem() === "MGRS" ) { + const mgrs = latLngToMGRS( selectedUnitPosition.lat, selectedUnitPosition.lng, this.#MGRSPrecisions[ this.#selectedMGRSPrecisionIndex ] ); + this.#drawCoordinates("ref-unit-position-mgrs", "unit-position-mgrs", "M"+mgrs.groups.join(" ") ); + } else if ( this.#getLocationSystem() === "UTM" ) { + const utm = latLngToUTM( selectedUnitPosition.lat, selectedUnitPosition.lng ); + this.#drawCoordinates("ref-unit-position-utm-northing", "unit-position-utm-northing", "N"+utm.northing); + this.#drawCoordinates("ref-unit-position-utm-easting", "unit-position-utm-easting", "E"+utm.easting); + } else { + this.#drawCoordinates("ref-unit-position-latitude", "unit-position-latitude", unitCoordString.split(" ")[0]); + this.#drawCoordinates("ref-unit-position-longitude", "unit-position-longitude", unitCoordString.split(" ")[1]); + } + } + /* Get the ground elevation from the server endpoint */ if (this.#elevationRequest == null) { this.#elevationRequest = new XMLHttpRequest(); @@ -133,6 +166,35 @@ export class MouseInfoPanel extends Panel { this.#elevationRequest.onabort = () => {this.#elevationRequest = null;} this.#elevationRequest.send(); } + + /* Get the ground elevation from the server endpoint for the unit */ + if (this.#unitElevationRequest == null && this.#unitElevation == null && selectedUnitPosition !== null) { + + this.#unitElevationRequest = new XMLHttpRequest(); + this.#unitElevationRequest.open('GET', `api/elevation/${selectedUnitPosition.lat}/${selectedUnitPosition.lng}`, true); + this.#unitElevationRequest.timeout = 500; // ms + this.#unitElevationRequest.responseType = 'json'; + this.#unitElevationRequest.onload = () => { + var status = this.#unitElevationRequest?.status; + if (status === 200) { + this.#unitElevation = this.#unitElevationRequest?.response; + + const el = this.getElement().querySelector(`#unit-position-elevation`) as HTMLElement; + try { + el.dataset.value = `${Math.floor(mToFt(parseFloat(this.#unitElevation)))} ft`; + } catch { + el.dataset.value = `N/A`; + } + } else { + this.#unitElevation = null; + } + this.#unitElevationRequest = null; + }; + this.#unitElevationRequest.ontimeout = () => {this.#unitElevationRequest = null;} + this.#unitElevationRequest.onerror = () => {this.#unitElevationRequest = null;} + this.#unitElevationRequest.onabort = () => {this.#unitElevationRequest = null;} + this.#unitElevationRequest.send(); + } } #onMapClick(e: any) { @@ -273,10 +335,10 @@ export class MouseInfoPanel extends Panel { } this.#coordinatesElement.setAttribute( "data-location-system", this.#getLocationSystem() ); + this.#unitCoordinatesElement.setAttribute( "data-location-system", this.#getLocationSystem() ); this.#update(); } - #getLocationSystem() { const x = this.#locationSystems; const y = this.#selectedLocationSystemIndex; From e2732036292c2b450318e5f7b58764999976aa2c Mon Sep 17 00:00:00 2001 From: MarcoJayUsai Date: Sat, 16 Nov 2024 18:33:59 +0100 Subject: [PATCH 2/7] feat(map): selected unit coordinates panel moved to top; coords are now copy-able --- .../public/stylesheets/panels/mouseinfo.css | 49 ++++++++++++- frontend/server/views/panels/mouseinfo.ejs | 70 ++++++++++--------- frontend/website/src/panels/mouseinfopanel.ts | 65 +++++++++++++++-- 3 files changed, 145 insertions(+), 39 deletions(-) diff --git a/frontend/server/public/stylesheets/panels/mouseinfo.css b/frontend/server/public/stylesheets/panels/mouseinfo.css index 384933cc..2917847e 100644 --- a/frontend/server/public/stylesheets/panels/mouseinfo.css +++ b/frontend/server/public/stylesheets/panels/mouseinfo.css @@ -124,6 +124,53 @@ display:flex; } -#unit-coordinates-title { +#unit-coordinates-container { + box-sizing: border-box; + background-color: var(--background-steel); + border-radius: var(--border-radius-sm); + box-shadow: 0px 2px 5px #000A; + padding: 10px; + position: absolute; + top: -48px; + right: 0; + display: flex; + flex-direction: column; + align-items: center; + gap: 0px; + transition: all 200ms ease-in-out; +} + +#unit-coordinates-container[data-open="true"] { + gap: 4px; + top: -140px; +} + +#unit-coordinates-container > #unit-coordinates { + width: 170px; + height: 0; + padding: 0 6px; + overflow: hidden; + flex-grow: 1; + transition: all 200ms ease-in-out; +} + +#unit-coordinates-container[data-open="true"] > #unit-coordinates { + height: 90px; + padding: 6px; +} + +#unit-coordinates-container > #unit-coordinates-toggle { font-size: 10px; + flex-shrink: 1; + cursor: pointer; +} + +#unit-coordinates-container > #unit-coordinates-toggle> #unit-coordinates-toggle-icon::after { + margin-top: 8px; + font-size: 12px; + content: "↑"; +} + +#unit-coordinates-container[data-open="true"] > #unit-coordinates-toggle > #unit-coordinates-toggle-icon::after { + content: "↓"; } \ No newline at end of file diff --git a/frontend/server/views/panels/mouseinfo.ejs b/frontend/server/views/panels/mouseinfo.ejs index a9ac7410..20981dec 100644 --- a/frontend/server/views/panels/mouseinfo.ejs +++ b/frontend/server/views/panels/mouseinfo.ejs @@ -60,40 +60,44 @@ - Selected Unit Coordinates: - -
- -
-
-
-
- -
-
-
-
- -
-
-
-
- -
-
-
-
- -
-
-
-
- -
-
-
-
+
+
+ +
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+
+ +
+ Unit Coordinates
diff --git a/frontend/website/src/panels/mouseinfopanel.ts b/frontend/website/src/panels/mouseinfopanel.ts index 0f8bfd48..1b3a0d05 100644 --- a/frontend/website/src/panels/mouseinfopanel.ts +++ b/frontend/website/src/panels/mouseinfopanel.ts @@ -22,6 +22,7 @@ export class MouseInfoPanel extends Panel { #elevationRequest: XMLHttpRequest | null = null; #unitElevationRequest: XMLHttpRequest | null = null; #unitElevation: any = null; + #updateInterval: any = null; constructor(ID: string) { @@ -43,7 +44,6 @@ export class MouseInfoPanel extends Panel { document.addEventListener('clearSelection', () => this.#update()); this.#coordinatesElement = this.getElement().querySelector( '#coordinates-tool' ); - this.#unitCoordinatesElement = this.getElement().querySelector( '#unit-coordinates' ); this.#coordinatesElement.addEventListener( "click", ( ev:MouseEvent ) => { this.#changeLocationSystem(); @@ -79,6 +79,63 @@ export class MouseInfoPanel extends Panel { }, "code": "Period" }); + + /* Selected unit coordinates panel interaction */ + this.#unitCoordinatesElement = this.getElement().querySelector( '#unit-coordinates' ); + + const unitCoordsToggleEl = this.getElement().querySelector('#unit-coordinates-toggle'); + const unitCoordsContainer = this.getElement().querySelector('#unit-coordinates-container'); + unitCoordsToggleEl.addEventListener("click", (ev: MouseEvent) => { + if (unitCoordsContainer.getAttribute('data-open') === 'true') { + unitCoordsContainer.setAttribute('data-open', 'false'); + } else { + unitCoordsContainer.setAttribute('data-open', 'true'); + } + }); + + /* Let's update selected unit coordinates every second, useful for moving units */ + this.#updateInterval = setInterval(() => { + var selectedUnits = getApp().getUnitsManager().getSelectedUnits(); + if (selectedUnits && selectedUnits.length == 1) { + this.#update() + } else { + } + }, 1000); + + /* Let's make coordinates copy-able */ + this.#listenForCopyableElements(); + } + + #listenForCopyableElements() { + const copyableElements = document.getElementsByClassName('copyable'); + + for (const element of copyableElements) { + element.addEventListener('click', (ev) => { + if (!ev.target) return; + + const el = ev.target as HTMLElement; + + let text = null; + + if (el.innerText !== "") { + text = el.innerText; + } + + if (el.getAttribute('data-value')) { + text = el.getAttribute('data-value'); + } + + if (!text) return; + + navigator.clipboard.writeText(text) + .then(() => { + console.log('Testo copiato negli appunti!'); + }) + .catch(err => { + console.error('Errore nel copiare:', err); + }); + }); + } } #update() { @@ -88,14 +145,12 @@ export class MouseInfoPanel extends Panel { var selectedUnits = getApp().getUnitsManager().getSelectedUnits(); if (selectedUnits && selectedUnits.length == 1) { - this.getElement().querySelector(`#unit-coordinates`)?.classList.remove('hide'); - this.getElement().querySelector(`#unit-coordinates-title`)?.classList.remove('hide'); + this.getElement().querySelector(`#unit-coordinates-container`)?.classList.remove('hide'); selectedUnitPosition = new LatLng(selectedUnits[0].getPosition().lat, selectedUnits[0].getPosition().lng); } else { selectedUnitPosition = null; this.#unitElevation = null; - this.getElement().querySelector(`#unit-coordinates`)?.classList.add('hide'); - this.getElement().querySelector(`#unit-coordinates-title`)?.classList.add('hide'); + this.getElement().querySelector(`#unit-coordinates-container`)?.classList.add('hide'); } /* Draw measures from selected unit, from pin location, and from bullseyes */ From b61289d99664c5ab44127bd335b14a77f8a5a438 Mon Sep 17 00:00:00 2001 From: MarcoJayUsai Date: Wed, 20 Nov 2024 11:27:40 +0100 Subject: [PATCH 3/7] fix(mouseinfopanel): switched to right mouse button to copy coordinates, added tip --- frontend/server/views/panels/mouseinfo.ejs | 8 +++----- .../website/plugins/controltips/src/controltipsplugin.ts | 5 +++++ frontend/website/src/panels/mouseinfopanel.ts | 2 +- 3 files changed, 9 insertions(+), 6 deletions(-) diff --git a/frontend/server/views/panels/mouseinfo.ejs b/frontend/server/views/panels/mouseinfo.ejs index 20981dec..fd4ca53c 100644 --- a/frontend/server/views/panels/mouseinfo.ejs +++ b/frontend/server/views/panels/mouseinfo.ejs @@ -88,11 +88,9 @@
-
-
-
-
-
+
+
+
diff --git a/frontend/website/plugins/controltips/src/controltipsplugin.ts b/frontend/website/plugins/controltips/src/controltipsplugin.ts index 4d2bfe4d..f68f7add 100644 --- a/frontend/website/plugins/controltips/src/controltipsplugin.ts +++ b/frontend/website/plugins/controltips/src/controltipsplugin.ts @@ -204,6 +204,11 @@ export class ControlTipsPlugin implements OlympusPlugin { "key": `Period`, "action": "Increase precision", "mouseoverSelector": `#coordinates-tool[data-location-system="MGRS"], #coordinates-tool[data-location-system="MGRS"] *` + }, + { + "key": `Mouse2`, + "action": "Copy to clipboard", + "mouseoverSelector": `#unit-coordinates-container > #unit-coordinates > .mouse-tool-item > .copyable` } ] }, diff --git a/frontend/website/src/panels/mouseinfopanel.ts b/frontend/website/src/panels/mouseinfopanel.ts index 1b3a0d05..4431d378 100644 --- a/frontend/website/src/panels/mouseinfopanel.ts +++ b/frontend/website/src/panels/mouseinfopanel.ts @@ -110,7 +110,7 @@ export class MouseInfoPanel extends Panel { const copyableElements = document.getElementsByClassName('copyable'); for (const element of copyableElements) { - element.addEventListener('click', (ev) => { + element.addEventListener('contextmenu', (ev) => { if (!ev.target) return; const el = ev.target as HTMLElement; From 2cadebcabdcb73b928b25156fc9f3cde80acffd4 Mon Sep 17 00:00:00 2001 From: MarcoJayUsai Date: Wed, 20 Nov 2024 11:43:10 +0100 Subject: [PATCH 4/7] feat(map): click selected unit coordinates panel will now change location system --- frontend/server/public/stylesheets/panels/mouseinfo.css | 1 + .../website/plugins/controltips/src/controltipsplugin.ts | 5 +++++ frontend/website/src/panels/mouseinfopanel.ts | 8 +++++++- 3 files changed, 13 insertions(+), 1 deletion(-) diff --git a/frontend/server/public/stylesheets/panels/mouseinfo.css b/frontend/server/public/stylesheets/panels/mouseinfo.css index 2917847e..d9cbd47d 100644 --- a/frontend/server/public/stylesheets/panels/mouseinfo.css +++ b/frontend/server/public/stylesheets/panels/mouseinfo.css @@ -115,6 +115,7 @@ } #unit-coordinates[data-location-system] [data-location-system] { + cursor:pointer; display:none; } diff --git a/frontend/website/plugins/controltips/src/controltipsplugin.ts b/frontend/website/plugins/controltips/src/controltipsplugin.ts index f68f7add..2c1850da 100644 --- a/frontend/website/plugins/controltips/src/controltipsplugin.ts +++ b/frontend/website/plugins/controltips/src/controltipsplugin.ts @@ -205,6 +205,11 @@ export class ControlTipsPlugin implements OlympusPlugin { "action": "Increase precision", "mouseoverSelector": `#coordinates-tool[data-location-system="MGRS"], #coordinates-tool[data-location-system="MGRS"] *` }, + { + "key": `Mouse1 or Z`, + "action": "Change location system", + "mouseoverSelector": "#unit-coordinates *" + }, { "key": `Mouse2`, "action": "Copy to clipboard", diff --git a/frontend/website/src/panels/mouseinfopanel.ts b/frontend/website/src/panels/mouseinfopanel.ts index 4431d378..b1db15bd 100644 --- a/frontend/website/src/panels/mouseinfopanel.ts +++ b/frontend/website/src/panels/mouseinfopanel.ts @@ -83,6 +83,12 @@ export class MouseInfoPanel extends Panel { /* Selected unit coordinates panel interaction */ this.#unitCoordinatesElement = this.getElement().querySelector( '#unit-coordinates' ); + this.#unitCoordinatesElement.addEventListener( "click", ( ev:MouseEvent ) => { + console.log('cliccato elemento unit coordinates'); + + this.#changeLocationSystem(); + }); + const unitCoordsToggleEl = this.getElement().querySelector('#unit-coordinates-toggle'); const unitCoordsContainer = this.getElement().querySelector('#unit-coordinates-container'); unitCoordsToggleEl.addEventListener("click", (ev: MouseEvent) => { @@ -129,7 +135,7 @@ export class MouseInfoPanel extends Panel { navigator.clipboard.writeText(text) .then(() => { - console.log('Testo copiato negli appunti!'); + //console.log('Testo copiato negli appunti!'); }) .catch(err => { console.error('Errore nel copiare:', err); From 6bb150a41ca23a81abbba08a16e42d18d30bcef9 Mon Sep 17 00:00:00 2001 From: MarcoJayUsai Date: Wed, 20 Nov 2024 12:50:56 +0100 Subject: [PATCH 5/7] feat(map): added selected air units FL in unit coordinates panel; added new coordinates system --- .../public/stylesheets/panels/mouseinfo.css | 2 + frontend/server/views/panels/mouseinfo.ejs | 20 ++++ frontend/website/src/panels/mouseinfopanel.ts | 107 +++++++++--------- 3 files changed, 74 insertions(+), 55 deletions(-) diff --git a/frontend/server/public/stylesheets/panels/mouseinfo.css b/frontend/server/public/stylesheets/panels/mouseinfo.css index d9cbd47d..657a86b9 100644 --- a/frontend/server/public/stylesheets/panels/mouseinfo.css +++ b/frontend/server/public/stylesheets/panels/mouseinfo.css @@ -104,6 +104,7 @@ } #coordinates-tool[data-location-system="LatLng"] [data-location-system="LatLng"], +#coordinates-tool[data-location-system="LatLngDec"] [data-location-system="LatLngDec"], #coordinates-tool[data-location-system="MGRS"] [data-location-system="MGRS"], #coordinates-tool[data-location-system="UTM"] [data-location-system="UTM"] { display:flex; @@ -120,6 +121,7 @@ } #unit-coordinates[data-location-system="LatLng"] [data-location-system="LatLng"], +#unit-coordinates[data-location-system="LatLngDec"] [data-location-system="LatLngDec"], #unit-coordinates[data-location-system="MGRS"] [data-location-system="MGRS"], #unit-coordinates[data-location-system="UTM"] [data-location-system="UTM"] { display:flex; diff --git a/frontend/server/views/panels/mouseinfo.ejs b/frontend/server/views/panels/mouseinfo.ejs index fd4ca53c..78b96cbd 100644 --- a/frontend/server/views/panels/mouseinfo.ejs +++ b/frontend/server/views/panels/mouseinfo.ejs @@ -42,6 +42,16 @@
+
+
+
+
+ +
+
+
+
+
@@ -77,6 +87,16 @@
+ +
+
+
+
+ +
+
+
+
diff --git a/frontend/website/src/panels/mouseinfopanel.ts b/frontend/website/src/panels/mouseinfopanel.ts index b1db15bd..8c72b18d 100644 --- a/frontend/website/src/panels/mouseinfopanel.ts +++ b/frontend/website/src/panels/mouseinfopanel.ts @@ -10,7 +10,7 @@ import { log } from "console"; export class MouseInfoPanel extends Panel { #coordinatesElement:HTMLElement; #unitCoordinatesElement:HTMLElement; - #locationSystems = [ "LatLng", "MGRS", "UTM" ]; + #locationSystems = [ "LatLng", "MGRS", "UTM", "LatLngDec" ]; #measureMarker: Marker; #measurePoint: LatLng | null = null; #measureIcon: Icon; @@ -20,8 +20,6 @@ export class MouseInfoPanel extends Panel { #selectedMGRSPrecisionIndex = 3; #selectedLocationSystemIndex = 0; #elevationRequest: XMLHttpRequest | null = null; - #unitElevationRequest: XMLHttpRequest | null = null; - #unitElevation: any = null; #updateInterval: any = null; @@ -40,8 +38,20 @@ export class MouseInfoPanel extends Panel { 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()); + document.addEventListener('unitsSelection', (e: CustomEvent) => { + /* Let's update selected unit coordinates every second, useful for moving units */ + this.#updateInterval = setInterval(() => { + var selectedUnits = getApp().getUnitsManager().getSelectedUnits(); + if (selectedUnits && selectedUnits.length == 1) { + this.#update() + } + }, 1000); + this.#update() + }); + document.addEventListener('clearSelection', () => { + clearInterval(this.#updateInterval) + this.#update() + }); this.#coordinatesElement = this.getElement().querySelector( '#coordinates-tool' ); @@ -84,8 +94,6 @@ export class MouseInfoPanel extends Panel { this.#unitCoordinatesElement = this.getElement().querySelector( '#unit-coordinates' ); this.#unitCoordinatesElement.addEventListener( "click", ( ev:MouseEvent ) => { - console.log('cliccato elemento unit coordinates'); - this.#changeLocationSystem(); }); @@ -99,14 +107,7 @@ export class MouseInfoPanel extends Panel { } }); - /* Let's update selected unit coordinates every second, useful for moving units */ - this.#updateInterval = setInterval(() => { - var selectedUnits = getApp().getUnitsManager().getSelectedUnits(); - if (selectedUnits && selectedUnits.length == 1) { - this.#update() - } else { - } - }, 1000); + /* Let's make coordinates copy-able */ this.#listenForCopyableElements(); @@ -147,15 +148,17 @@ export class MouseInfoPanel extends Panel { #update() { const mousePosition = getApp().getMap().getMouseCoordinates(); - var selectedUnitPosition = null; + let selectedUnitPosition = null; + let selectedUnitElevation = null; var selectedUnits = getApp().getUnitsManager().getSelectedUnits(); if (selectedUnits && selectedUnits.length == 1) { this.getElement().querySelector(`#unit-coordinates-container`)?.classList.remove('hide'); selectedUnitPosition = new LatLng(selectedUnits[0].getPosition().lat, selectedUnits[0].getPosition().lng); + selectedUnitElevation = selectedUnits[0].getPosition().alt; } else { selectedUnitPosition = null; - this.#unitElevation = null; + selectedUnitElevation = null; this.getElement().querySelector(`#unit-coordinates-container`)?.classList.add('hide'); } @@ -173,6 +176,7 @@ export class MouseInfoPanel extends Panel { /* Draw coordinates */ var coords = formatcoords(mousePosition.lat, mousePosition.lng); var coordString = coords.format('XDDMMss', {decimalPlaces: 4}); + let decCoordsString = coords.format('XDDm', {decimalPlaces: 3}); if ( this.#getLocationSystem() === "MGRS" ) { const mgrs = latLngToMGRS( mousePosition.lat, mousePosition.lng, this.#MGRSPrecisions[ this.#selectedMGRSPrecisionIndex ] ); @@ -181,7 +185,11 @@ export class MouseInfoPanel extends Panel { const utm = latLngToUTM( mousePosition.lat, mousePosition.lng ); this.#drawCoordinates("ref-mouse-position-utm-northing", "mouse-position-utm-northing", "N"+utm.northing); this.#drawCoordinates("ref-mouse-position-utm-easting", "mouse-position-utm-easting", "E"+utm.easting); - } else { + } else if (this.#getLocationSystem() === "LatLngDec") { + this.#drawCoordinates("ref-mouse-position-latitude-dec", "mouse-position-latitude-dec", decCoordsString.split(" ")[0]); + this.#drawCoordinates("ref-mouse-position-longitude-dec", "mouse-position-longitude-dec", decCoordsString.split(" ")[1]); + } + else { this.#drawCoordinates("ref-mouse-position-latitude", "mouse-position-latitude", coordString.split(" ")[0]); this.#drawCoordinates("ref-mouse-position-longitude", "mouse-position-longitude", coordString.split(" ")[1]); } @@ -189,19 +197,37 @@ export class MouseInfoPanel extends Panel { /* Draw selected unit coordinates */ if (selectedUnitPosition) { var unitCoords = formatcoords(selectedUnitPosition.lat, selectedUnitPosition.lng); - var unitCoordString = unitCoords.format('XDDMMss', {decimalPlaces: 4}); + var unitCoordString = unitCoords.format('XDDMMss', { decimalPlaces: 4 }); + let decCoordsString = unitCoords.format('XDDm', { decimalPlaces: 3 }); - if ( this.#getLocationSystem() === "MGRS" ) { - const mgrs = latLngToMGRS( selectedUnitPosition.lat, selectedUnitPosition.lng, this.#MGRSPrecisions[ this.#selectedMGRSPrecisionIndex ] ); - this.#drawCoordinates("ref-unit-position-mgrs", "unit-position-mgrs", "M"+mgrs.groups.join(" ") ); - } else if ( this.#getLocationSystem() === "UTM" ) { - const utm = latLngToUTM( selectedUnitPosition.lat, selectedUnitPosition.lng ); - this.#drawCoordinates("ref-unit-position-utm-northing", "unit-position-utm-northing", "N"+utm.northing); - this.#drawCoordinates("ref-unit-position-utm-easting", "unit-position-utm-easting", "E"+utm.easting); + if (this.#getLocationSystem() === "MGRS") { + const mgrs = latLngToMGRS(selectedUnitPosition.lat, selectedUnitPosition.lng, this.#MGRSPrecisions[this.#selectedMGRSPrecisionIndex]); + this.#drawCoordinates("ref-unit-position-mgrs", "unit-position-mgrs", "M" + mgrs.groups.join(" ")); + } else if (this.#getLocationSystem() === "UTM") { + const utm = latLngToUTM(selectedUnitPosition.lat, selectedUnitPosition.lng); + this.#drawCoordinates("ref-unit-position-utm-northing", "unit-position-utm-northing", "N" + utm.northing); + this.#drawCoordinates("ref-unit-position-utm-easting", "unit-position-utm-easting", "E" + utm.easting); + } else if (this.#getLocationSystem() === "LatLngDec") { + this.#drawCoordinates("ref-unit-position-latitude-dec", "unit-position-latitude-dec", decCoordsString.split(" ")[0]); + this.#drawCoordinates("ref-unit-position-longitude-dec", "unit-position-longitude-dec", decCoordsString.split(" ")[1]); } else { this.#drawCoordinates("ref-unit-position-latitude", "unit-position-latitude", unitCoordString.split(" ")[0]); this.#drawCoordinates("ref-unit-position-longitude", "unit-position-longitude", unitCoordString.split(" ")[1]); } + + const unitElevationElement = this.getElement().querySelector(`#unit-position-elevation`) as HTMLElement; + let displayedHeight = "0"; + + switch (selectedUnits[0].getCategory()) { + case 'Aircraft': + displayedHeight = "FL" + zeroAppend(Math.floor(mToFt(selectedUnitElevation as number) / 100), 3); + break; + default: + displayedHeight = Math.floor(mToFt(selectedUnitElevation as number)) + " ft" + break; + } + + unitElevationElement.dataset.value = displayedHeight; } /* Get the ground elevation from the server endpoint */ @@ -227,35 +253,6 @@ export class MouseInfoPanel extends Panel { this.#elevationRequest.onabort = () => {this.#elevationRequest = null;} this.#elevationRequest.send(); } - - /* Get the ground elevation from the server endpoint for the unit */ - if (this.#unitElevationRequest == null && this.#unitElevation == null && selectedUnitPosition !== null) { - - this.#unitElevationRequest = new XMLHttpRequest(); - this.#unitElevationRequest.open('GET', `api/elevation/${selectedUnitPosition.lat}/${selectedUnitPosition.lng}`, true); - this.#unitElevationRequest.timeout = 500; // ms - this.#unitElevationRequest.responseType = 'json'; - this.#unitElevationRequest.onload = () => { - var status = this.#unitElevationRequest?.status; - if (status === 200) { - this.#unitElevation = this.#unitElevationRequest?.response; - - const el = this.getElement().querySelector(`#unit-position-elevation`) as HTMLElement; - try { - el.dataset.value = `${Math.floor(mToFt(parseFloat(this.#unitElevation)))} ft`; - } catch { - el.dataset.value = `N/A`; - } - } else { - this.#unitElevation = null; - } - this.#unitElevationRequest = null; - }; - this.#unitElevationRequest.ontimeout = () => {this.#unitElevationRequest = null;} - this.#unitElevationRequest.onerror = () => {this.#unitElevationRequest = null;} - this.#unitElevationRequest.onabort = () => {this.#unitElevationRequest = null;} - this.#unitElevationRequest.send(); - } } #onMapClick(e: any) { From f00fce7fe72c075259e868a29cffd40023390952 Mon Sep 17 00:00:00 2001 From: MarcoJayUsai Date: Fri, 22 Nov 2024 15:10:44 +0100 Subject: [PATCH 6/7] fix(selected unit coords): added minutes indication in latlngdec coordinates format In the coordinates panel, a lat lng with decimal minutes would appear without the ending " ' " character. --- frontend/website/src/panels/mouseinfopanel.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/frontend/website/src/panels/mouseinfopanel.ts b/frontend/website/src/panels/mouseinfopanel.ts index 8c72b18d..c36ac803 100644 --- a/frontend/website/src/panels/mouseinfopanel.ts +++ b/frontend/website/src/panels/mouseinfopanel.ts @@ -186,8 +186,8 @@ export class MouseInfoPanel extends Panel { this.#drawCoordinates("ref-mouse-position-utm-northing", "mouse-position-utm-northing", "N"+utm.northing); this.#drawCoordinates("ref-mouse-position-utm-easting", "mouse-position-utm-easting", "E"+utm.easting); } else if (this.#getLocationSystem() === "LatLngDec") { - this.#drawCoordinates("ref-mouse-position-latitude-dec", "mouse-position-latitude-dec", decCoordsString.split(" ")[0]); - this.#drawCoordinates("ref-mouse-position-longitude-dec", "mouse-position-longitude-dec", decCoordsString.split(" ")[1]); + this.#drawCoordinates("ref-mouse-position-latitude-dec", "mouse-position-latitude-dec", decCoordsString.split(" ")[0] + "'"); + this.#drawCoordinates("ref-mouse-position-longitude-dec", "mouse-position-longitude-dec", decCoordsString.split(" ")[1] + "'"); } else { this.#drawCoordinates("ref-mouse-position-latitude", "mouse-position-latitude", coordString.split(" ")[0]); @@ -208,8 +208,8 @@ export class MouseInfoPanel extends Panel { this.#drawCoordinates("ref-unit-position-utm-northing", "unit-position-utm-northing", "N" + utm.northing); this.#drawCoordinates("ref-unit-position-utm-easting", "unit-position-utm-easting", "E" + utm.easting); } else if (this.#getLocationSystem() === "LatLngDec") { - this.#drawCoordinates("ref-unit-position-latitude-dec", "unit-position-latitude-dec", decCoordsString.split(" ")[0]); - this.#drawCoordinates("ref-unit-position-longitude-dec", "unit-position-longitude-dec", decCoordsString.split(" ")[1]); + this.#drawCoordinates("ref-unit-position-latitude-dec", "unit-position-latitude-dec", decCoordsString.split(" ")[0] + "'"); + this.#drawCoordinates("ref-unit-position-longitude-dec", "unit-position-longitude-dec", decCoordsString.split(" ")[1] + "'"); } else { this.#drawCoordinates("ref-unit-position-latitude", "unit-position-latitude", unitCoordString.split(" ")[0]); this.#drawCoordinates("ref-unit-position-longitude", "unit-position-longitude", unitCoordString.split(" ")[1]); From 8b5df691eca2354c696dc85deeba4eee327fe871 Mon Sep 17 00:00:00 2001 From: MarcoJayUsai Date: Fri, 22 Nov 2024 15:14:57 +0100 Subject: [PATCH 7/7] fix(selected unit coords): failsafe in case of absence of the navigator element --- frontend/website/src/panels/mouseinfopanel.ts | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/frontend/website/src/panels/mouseinfopanel.ts b/frontend/website/src/panels/mouseinfopanel.ts index c36ac803..dc71a5a0 100644 --- a/frontend/website/src/panels/mouseinfopanel.ts +++ b/frontend/website/src/panels/mouseinfopanel.ts @@ -116,6 +116,8 @@ export class MouseInfoPanel extends Panel { #listenForCopyableElements() { const copyableElements = document.getElementsByClassName('copyable'); + // TODO: copy all the coordinates and elevation instead of copying only lat, lng or elevation. + for (const element of copyableElements) { element.addEventListener('contextmenu', (ev) => { if (!ev.target) return; @@ -134,12 +136,14 @@ export class MouseInfoPanel extends Panel { if (!text) return; + if(!navigator || !navigator.clipboard) return; + navigator.clipboard.writeText(text) .then(() => { - //console.log('Testo copiato negli appunti!'); + // Text copied to clipboard. TODO: add a toast or alert for this event. }) .catch(err => { - console.error('Errore nel copiare:', err); + console.error('An error occurred while copying text to clipboard: ', err); }); }); }