diff --git a/client/package-lock.json b/client/package-lock.json index 4758f253..99053e59 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -25,7 +25,6 @@ "@turf/turf": "^6.5.0", "@types/formatcoords": "^1.1.0", "@types/geojson": "^7946.0.10", - "@types/gtag.js": "^0.0.12", "@types/leaflet": "^1.9.0", "@types/node": "^18.16.1", "@types/sortablejs": "^1.15.0", @@ -36,6 +35,7 @@ "cp": "^0.2.0", "esmify": "^2.1.1", "formatcoords": "^1.1.3", + "geodesy": "^1.1.2", "leaflet": "^1.9.3", "leaflet-control-mini-map": "^0.4.0", "leaflet-path-drag": "*", @@ -48,6 +48,7 @@ "typedoc": "^0.24.8", "typedoc-umlclass": "^0.7.1", "typescript": "^4.9.4", + "usng.js": "^0.4.5", "watchify": "^4.0.0" } }, @@ -3544,12 +3545,6 @@ "integrity": "sha512-Nmh0K3iWQJzniTuPRcJn5hxXkfB1T1pgB89SBig5PlJQU5yocazeu4jATJlaA0GYFKWMqDdvYemoSnF2pXgLVA==", "dev": true }, - "node_modules/@types/gtag.js": { - "version": "0.0.12", - "resolved": "https://registry.npmjs.org/@types/gtag.js/-/gtag.js-0.0.12.tgz", - "integrity": "sha512-YQV9bUsemkzG81Ea295/nF/5GijnD2Af7QhEofh7xu+kvCN6RdodgNwwGWXB5GMI3NoyvQo0odNctoH/qLMIpg==", - "dev": true - }, "node_modules/@types/leaflet": { "version": "1.9.0", "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.9.0.tgz", @@ -5454,6 +5449,12 @@ "node": ">=6.9.0" } }, + "node_modules/geodesy": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/geodesy/-/geodesy-1.1.2.tgz", + "integrity": "sha512-E9SJT90FU+jloMUllVlBxO/nhExNKdlu7BCrzfxtbzg2E6gU0Go3RFTUd3Ag1mEUVRrCsAnhLZQ756H3Uc6RLw==", + "dev": true + }, "node_modules/geojson-equality": { "version": "0.1.6", "resolved": "https://registry.npmjs.org/geojson-equality/-/geojson-equality-0.1.6.tgz", @@ -6436,9 +6437,9 @@ "dev": true }, "node_modules/nodemon": { - "version": "2.0.20", - "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-2.0.20.tgz", - "integrity": "sha512-Km2mWHKKY5GzRg6i1j5OxOHQtuvVsgskLfigG25yTtbyfRGn/GNvIbRyOf1PSCKJ2aT/58TiuUsuOU5UToVViw==", + "version": "2.0.22", + "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-2.0.22.tgz", + "integrity": "sha512-B8YqaKMmyuCO7BowF1Z1/mkPqLk6cs/l63Ojtd6otKjMx47Dq1utxfRxcavH1I7VSaL8n5BUaoutadnsX3AAVQ==", "dev": true, "dependencies": { "chokidar": "^3.5.2", @@ -6488,9 +6489,9 @@ "dev": true }, "node_modules/nodemon/node_modules/semver": { - "version": "5.7.1", - "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz", - "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==", + "version": "5.7.2", + "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz", + "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==", "dev": true, "bin": { "semver": "bin/semver" @@ -7207,9 +7208,9 @@ } }, "node_modules/semver": { - "version": "6.3.0", - "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", - "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", + "version": "6.3.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz", + "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==", "dev": true, "bin": { "semver": "bin/semver.js" @@ -8033,6 +8034,15 @@ "integrity": "sha512-RofWgt/7fL5wP1Y7fxE7/EmTLzQVnB0ycyibJ0OOHIlJqTNzglYFxVwETOcIoJqJmpDXJ9xImDv+Fq34F/d4Dw==", "dev": true }, + "node_modules/usng.js": { + "version": "0.4.5", + "resolved": "https://registry.npmjs.org/usng.js/-/usng.js-0.4.5.tgz", + "integrity": "sha512-JTJcFFDy/JqA5iiU8DqMOV5gJiL3ZdXH0hCKYaRMDbbredhFna5Ok4C1YDFU07mTGAgm+5FzHaaOzQnO/3BzWQ==", + "dev": true, + "bin": { + "usng-cli": "bin/cli.js" + } + }, "node_modules/util": { "version": "0.12.5", "resolved": "https://registry.npmjs.org/util/-/util-0.12.5.tgz", diff --git a/client/package.json b/client/package.json index 28f5f8fd..6363c7a1 100644 --- a/client/package.json +++ b/client/package.json @@ -28,7 +28,6 @@ "@turf/turf": "^6.5.0", "@types/formatcoords": "^1.1.0", "@types/geojson": "^7946.0.10", - "@types/gtag.js": "^0.0.12", "@types/leaflet": "^1.9.0", "@types/node": "^18.16.1", "@types/sortablejs": "^1.15.0", @@ -39,6 +38,7 @@ "cp": "^0.2.0", "esmify": "^2.1.1", "formatcoords": "^1.1.3", + "geodesy": "^1.1.2", "leaflet": "^1.9.3", "leaflet-control-mini-map": "^0.4.0", "leaflet-path-drag": "*", @@ -51,6 +51,7 @@ "typedoc": "^0.24.8", "typedoc-umlclass": "^0.7.1", "typescript": "^4.9.4", + "usng.js": "^0.4.5", "watchify": "^4.0.0" } } diff --git a/client/plugins/controltips/index.js b/client/plugins/controltips/index.js index 4acea1ed..2153ddef 100644 --- a/client/plugins/controltips/index.js +++ b/client/plugins/controltips/index.js @@ -59,7 +59,7 @@ class ControlTipsPlugin { __classPrivateFieldSet(this, _ControlTipsPlugin_cursorIsHoveringOverUnit, false, "f"); __classPrivateFieldGet(this, _ControlTipsPlugin_instances, "m", _ControlTipsPlugin_updateTips).call(this); }); - document.addEventListener("unitSelection", (ev) => { + document.addEventListener("unitsSelection", (ev) => { __classPrivateFieldGet(this, _ControlTipsPlugin_instances, "m", _ControlTipsPlugin_updateTips).call(this); }); document.addEventListener("mapVisibilityOptionsChanged", () => { @@ -183,6 +183,26 @@ _ControlTipsPlugin_element = new WeakMap(), _ControlTipsPlugin_app = new WeakMap "key": `Mouse2`, "action": "Set Neutral", "mouseoverSelector": "#coalition-switch .ol-switch-fill" + }, + { + "key": `Mouse1`, + "action": "Toggle time display", + "mouseoverSelector": "#connection-status-panel[data-is-connected] #connection-status-message abbr" + }, + { + "key": `Mouse1 or Z`, + "action": "Change location system", + "mouseoverSelector": "#coordinates-tool, #coordinates-tool *" + }, + { + "key": `Comma`, + "action": "Decrease precision", + "mouseoverSelector": `#coordinates-tool[data-location-system="MGRS"], #coordinates-tool[data-location-system="MGRS"] *` + }, + { + "key": `Period`, + "action": "Increase precision", + "mouseoverSelector": `#coordinates-tool[data-location-system="MGRS"], #coordinates-tool[data-location-system="MGRS"] *` } ] }, @@ -325,7 +345,7 @@ _ControlTipsPlugin_element = new WeakMap(), _ControlTipsPlugin_app = new WeakMap return false; } } - if (tipsIncludesActiveMouseover && typeof tip.mouseoverSelector !== "string" && !__classPrivateFieldGet(this, _ControlTipsPlugin_mouseoverElement, "f").matches(tip.mouseoverSelector)) { + if (tipsIncludesActiveMouseover && (typeof tip.mouseoverSelector !== "string" || !__classPrivateFieldGet(this, _ControlTipsPlugin_mouseoverElement, "f").matches(tip.mouseoverSelector))) { return false; } if (!tipsIncludesActiveMouseover && typeof tip.mouseoverSelector === "string") { diff --git a/client/plugins/controltips/src/controltipsplugin.ts b/client/plugins/controltips/src/controltipsplugin.ts index 20f9ab1d..b50a1ee2 100644 --- a/client/plugins/controltips/src/controltipsplugin.ts +++ b/client/plugins/controltips/src/controltipsplugin.ts @@ -189,6 +189,26 @@ export class ControlTipsPlugin implements OlympusPlugin { "key": `Mouse2`, "action": "Set Neutral", "mouseoverSelector": "#coalition-switch .ol-switch-fill" + }, + { + "key": `Mouse1`, + "action": "Toggle time display", + "mouseoverSelector": "#connection-status-panel[data-is-connected] #connection-status-message abbr" + }, + { + "key": `Mouse1 or Z`, + "action": "Change location system", + "mouseoverSelector": "#coordinates-tool, #coordinates-tool *" + }, + { + "key": `Comma`, + "action": "Decrease precision", + "mouseoverSelector": `#coordinates-tool[data-location-system="MGRS"], #coordinates-tool[data-location-system="MGRS"] *` + }, + { + "key": `Period`, + "action": "Increase precision", + "mouseoverSelector": `#coordinates-tool[data-location-system="MGRS"], #coordinates-tool[data-location-system="MGRS"] *` } ] }, @@ -347,7 +367,7 @@ export class ControlTipsPlugin implements OlympusPlugin { } } - if ( tipsIncludesActiveMouseover && typeof tip.mouseoverSelector !== "string" && !this.#mouseoverElement.matches( tip.mouseoverSelector ) ) { + if ( tipsIncludesActiveMouseover && ( typeof tip.mouseoverSelector !== "string" || !this.#mouseoverElement.matches( tip.mouseoverSelector ) ) ) { return false; } diff --git a/client/public/stylesheets/layout/layout.css b/client/public/stylesheets/layout/layout.css index f8c4609d..2dadac0d 100644 --- a/client/public/stylesheets/layout/layout.css +++ b/client/public/stylesheets/layout/layout.css @@ -1,3 +1,7 @@ +:root { + --right-panel-width:190px; +} + /* Page style */ #map-container { height: 100%; @@ -68,7 +72,7 @@ font-size: 12px; position: absolute; right: 10px; - width: 180px; + width: var( --right-panel-width ); z-index: 9999; } @@ -80,7 +84,7 @@ position: absolute; right: 10px; row-gap: 10px; - width: 180px; + width: var( --right-panel-width ); z-index: 9999; } diff --git a/client/public/stylesheets/panels/connectionstatus.css b/client/public/stylesheets/panels/connectionstatus.css index 989ae9f4..b20cd4ec 100644 --- a/client/public/stylesheets/panels/connectionstatus.css +++ b/client/public/stylesheets/panels/connectionstatus.css @@ -22,6 +22,7 @@ } #connection-status-panel .time-display { + cursor:pointer; display:none; font-weight: bold; text-decoration: none; diff --git a/client/public/stylesheets/panels/mouseinfo.css b/client/public/stylesheets/panels/mouseinfo.css index 905c26ba..bff03071 100644 --- a/client/public/stylesheets/panels/mouseinfo.css +++ b/client/public/stylesheets/panels/mouseinfo.css @@ -1,9 +1,116 @@ -#mouse-info-panel>* { +#mouse-info-panel .mouse-tool { background-color: var(--background-grey); border-radius: var(--border-radius-sm); + display:flex; + flex-flow:column wrap; + row-gap: 4px; padding: 6px; } +#mouse-info-panel .mouse-tool .mouse-tool-item { + align-items: center; + display:flex; + flex-flow: row nowrap; + justify-content: space-between; +} + + +#mouse-info-panel svg { + padding: 3px; + height: 100%; + width: 100%; +} + +#mouse-info-panel svg > * { + fill: black; + stroke: black; +} + +#mouse-info-panel .mouse-tool .mouse-tool-item > * { + width:fit-content; +} + +#mouse-info-panel .mouse-tool .mouse-tool-item > *:last-child { + text-align: right; + width:100%; +} + +#mouse-info-panel .svg-icon, #mouse-info-panel .mouse-tool .mouse-tool-item :first-child { + align-items: center; + background-color: white; + border-radius: var(--border-radius-sm); + color: var(--background-steel); + display: flex; + font-size: 15.6px; + font-weight: bolder; + height: 22px; + justify-content: center; + text-transform: uppercase; + width: 22px; +} + +#mouse-info-panel .mouse-tool .mouse-tool-item [data-label]::after { + border-radius: var(--border-radius-sm); + content: attr(data-label); +} + + +#mouse-info-panel .mouse-tool .mouse-tool-item :last-child { + color: var(--background-offwhite); + font-weight: bold; + font-size: 13px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + width:fit-content; +} + + +/* Bullseye info */ + +#mouse-info-panel .mouse-tool .mouse-tool-item [data-label][data-coalition="blue"] { + background-color: var(--primary-blue); +} + +#mouse-info-panel .mouse-tool .mouse-tool-item [data-label][data-coalition="red"] { + background-color: var(--primary-red); +} + +.br-info::after { + content: attr(data-bearing) '\00B0 / ' attr(data-distance) " " attr(data-distance-units); +} + +.br-info[data-coalition="blue"]::after { + color: var(--primary-blue) +} + +.br-info[data-coalition="red"]::after { + color: var(--primary-red) +} + +.br-info[data-message]::after { + content: attr(data-message); +} + + +/* Coordinates */ +#coordinates-tool .elevation::after { + content: attr(data-value) +} + +#coordinates-tool[data-location-system] [data-location-system] { + cursor:pointer; + display:none; +} + +#coordinates-tool[data-location-system="LatLng"] [data-location-system="LatLng"], +#coordinates-tool[data-location-system="MGRS"] [data-location-system="MGRS"], +#coordinates-tool[data-location-system="UTM"] [data-location-system="UTM"] { + display:flex; +} + + +/* #mouse-info-panel dl { margin-bottom: 4px; row-gap: 5px; @@ -14,7 +121,7 @@ width: 30%; } -#mouse-info-panel dt::after { +#mouse-info-panel dt::after, #coordinates-tool [data-label] { align-items: center; background-color: white; border-radius: var(--border-radius-sm); @@ -30,6 +137,11 @@ width: 16px; } +#coordinates-tool [data-label] { + height:24px; + width:24px; +} + #mouse-info-panel #measuring-tool dt { height: 24px; width: 24px; @@ -48,7 +160,7 @@ stroke: black; } -#mouse-info-panel dt[data-label]::after { +#mouse-info-panel [data-label]::after { content: attr(data-label); } @@ -60,7 +172,7 @@ background-color: var(--primary-red); } -#mouse-info-panel dt[data-tooltip]:hover::before { +#mouse-info-panel [data-tooltip]:hover::before { background-color: var(--background-grey); border-radius: 5px; content: attr(data-tooltip); @@ -72,8 +184,30 @@ white-space: nowrap; } -#mouse-info-panel dd { - width: 70%; +#coordinates-tool[data-location-system] [data-location-system] { + display:none; + flex-direction: column; +} + +#coordinates-tool[data-location-system="LatLng"] [data-location-system="LatLng"], +#coordinates-tool[data-location-system="MGRS"] [data-location-system="MGRS"] { + display:flex; +} + +#coordinates-tool > * > * { + align-items: center; + display:flex; + flex-flow: row nowrap; +} + +#coordinates-tool > * > * > * { + display:table-cell; + width:fit-content; +} + +#coordinates-tool > * > * > :last-child { + text-align: right; + width:100%; } .br-info::after { @@ -116,4 +250,4 @@ text-overflow: ellipsis; white-space: nowrap; color: var(--background-offwhite); -} \ No newline at end of file +} */ \ No newline at end of file diff --git a/client/src/constants/constants.ts b/client/src/constants/constants.ts index 62071065..4063750c 100644 --- a/client/src/constants/constants.ts +++ b/client/src/constants/constants.ts @@ -202,4 +202,10 @@ export enum DataIndexes { isLeader, operateAs, endOfData = 255 -}; \ No newline at end of file +}; + +export const MGRS_PRECISION_10KM = 2; +export const MGRS_PRECISION_1KM = 3; +export const MGRS_PRECISION_100M = 4; +export const MGRS_PRECISION_10M = 5; +export const MGRS_PRECISION_1M = 6; \ No newline at end of file diff --git a/client/src/other/utils.ts b/client/src/other/utils.ts index aeb3b5a3..d946de45 100644 --- a/client/src/other/utils.ts +++ b/client/src/other/utils.ts @@ -10,6 +10,9 @@ import { Dropdown } from "../controls/dropdown"; import { navyUnitDatabase } from "../unit/databases/navyunitdatabase"; import { DateAndTime, UnitBlueprint } from "../interfaces"; +// comment +const usng = require( "usng.js" ); + export function bearing(lat1: number, lon1: number, lat2: number, lon2: number) { const φ1 = deg2rad(lat1); // φ, λ in radians const φ2 = deg2rad(lat2); @@ -158,6 +161,49 @@ export function editDistance(s1: string, s2: string) { return costs[s2.length]; } +export type MGRS = { + bandLetter: string, + columnLetter: string, + easting: string, + groups: string[], + northing: string, + precision: number, + rowLetter: string, + string: string, + zoneNumber: string +} + +export function latLngToMGRS( lat:number, lng:number, precision:number = 4 ): MGRS | false { + + if ( precision < 0 || precision > 6 ) { + console.error( "latLngToMGRS: precision must be a number >= 0 and <= 6. Given precision: " + precision ); + return false; + } + + const mgrs = new usng.Converter().LLtoMGRS( lat, lng, precision ); + const match = mgrs.match( new RegExp( `^(\\d{2})([A-Z])([A-Z])([A-Z])(\\d+)$` ) ); + const easting = match[5].substr(0,match[5].length/2); + const northing = match[5].substr(match[5].length/2); + + let output:MGRS = { + bandLetter: match[2], + columnLetter: match[3], + groups: [ match[1] + match[2], match[3] + match[4], easting, northing ], + easting: easting, + northing: northing, + precision: precision, + rowLetter: match[4], + string: match[0], + zoneNumber: match[1] + } + + return output; +} + +export function latLngToUTM( lat:number, lng:number ) { + return new usng.Converter().LLtoUTM( lat, lng ); +} + export function latLngToMercator(lat: number, lng: number): {x: number, y: number} { var rMajor = 6378137; //Equatorial Radius, WGS84 var shift = Math.PI * rMajor; diff --git a/client/src/panels/mouseinfopanel.ts b/client/src/panels/mouseinfopanel.ts index ad24c24f..82dba41e 100644 --- a/client/src/panels/mouseinfopanel.ts +++ b/client/src/panels/mouseinfopanel.ts @@ -1,16 +1,22 @@ import { Icon, LatLng, Marker, Polyline } from "leaflet"; import { getApp } from ".."; -import { distance, bearing, zeroAppend, mToNm, nmToFt, mToFt } from "../other/utils"; +import { distance, bearing, zeroAppend, mToNm, nmToFt, mToFt, latLngToMGRS, MGRS, latLngToUTM, latLngToMercator } from "../other/utils"; 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"; export class MouseInfoPanel extends Panel { + #coordinatesElement:HTMLElement; + #locationSystems = [ "LatLng", "MGRS", "UTM" ]; #measureMarker: Marker; #measurePoint: LatLng | null = null; #measureIcon: Icon; #measureLine: Polyline = new Polyline([], { color: '#2d3e50', weight: 3, opacity: 0.5, smoothFactor: 1, interactive: false }); #measureBox: HTMLElement; + #MGRSPrecisions = [ MGRS_PRECISION_10KM, MGRS_PRECISION_1KM, MGRS_PRECISION_100M, MGRS_PRECISION_10M, MGRS_PRECISION_1M ]; + #selectedMGRSPrecisionIndex = 3; + #selectedLocationSystemIndex = 0; #elevationRequest: XMLHttpRequest | null = null; constructor(ID: string) { @@ -30,6 +36,43 @@ export class MouseInfoPanel extends Panel { document.addEventListener('unitsSelection', (e: CustomEvent) => this.#update()); document.addEventListener('clearSelection', () => this.#update()); + + this.#coordinatesElement = this.getElement().querySelector( '#coordinates-tool' ); + + this.#coordinatesElement.addEventListener( "click", ( ev:MouseEvent ) => { + this.#changeLocationSystem(); + }); + + getApp().getShortcutManager().addKeyboardShortcut( "switchMapLocationSystem", { + "callback": ( ev:KeyboardEvent ) => { + this.#changeLocationSystem(); + }, + "code": "KeyZ" + }).addKeyboardShortcut( "decreaseMGRSPrecision", { + "callback": ( ev:KeyboardEvent ) => { + if ( this.#getLocationSystem() !== "MGRS" ) { + return; + } + + if ( this.#selectedMGRSPrecisionIndex > 0 ) { + this.#selectedMGRSPrecisionIndex--; + this.#update(); + } + }, + "code": "Comma" + }).addKeyboardShortcut( "increaseMGRSPrecision", { + "callback": ( ev:KeyboardEvent ) => { + if ( this.#getLocationSystem() !== "MGRS" ) { + return; + } + + if ( this.#selectedMGRSPrecisionIndex < this.#MGRSPrecisions.length - 1 ) { + this.#selectedMGRSPrecisionIndex++; + this.#update(); + } + }, + "code": "Period" + }); } #update() { @@ -44,7 +87,8 @@ export class MouseInfoPanel extends Panel { this.#drawMeasure("ref-measure-position", "measure-position", this.#measurePoint, mousePosition); this.#drawMeasure("ref-unit-position", "unit-position", selectedUnitPosition, mousePosition); - this.getElement().querySelector(`#measuring-tool`)?.classList.toggle("hide", this.#measurePoint === null && selectedUnitPosition === null); + this.getElement().querySelector(`#measuring-tool`)?.classList.toggle("hide", this.#measurePoint === null); + this.getElement().querySelector(`#unit-bullseye-tool`)?.classList.toggle("hide", selectedUnitPosition === null); var bullseyes = getApp().getMissionManager().getBullseyes(); for (let idx in bullseyes) @@ -53,8 +97,18 @@ export class MouseInfoPanel extends Panel { /* Draw coordinates */ var coords = formatcoords(mousePosition.lat, mousePosition.lng); var coordString = coords.format('XDDMMss', {decimalPlaces: 4}); - this.#drawCoordinates("ref-mouse-position-latitude", "mouse-position-latitude", coordString.split(" ")[0]); - this.#drawCoordinates("ref-mouse-position-longitude", "mouse-position-longitude", coordString.split(" ")[1]); + + if ( this.#getLocationSystem() === "MGRS" ) { + const mgrs = latLngToMGRS( mousePosition.lat, mousePosition.lng, this.#MGRSPrecisions[ this.#selectedMGRSPrecisionIndex ] ); + this.#drawCoordinates("ref-mouse-position-mgrs", "mouse-position-mgrs", "M"+mgrs.groups.join(" ") ); + } else if ( this.#getLocationSystem() === "UTM" ) { + 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 { + this.#drawCoordinates("ref-mouse-position-latitude", "mouse-position-latitude", coordString.split(" ")[0]); + this.#drawCoordinates("ref-mouse-position-longitude", "mouse-position-longitude", coordString.split(" ")[1]); + } /* Get the ground elevation from the server endpoint */ if (this.#elevationRequest == null) { @@ -186,8 +240,8 @@ export class MouseInfoPanel extends Panel { const el = this.getElement().querySelector(`#${textID}`) as HTMLElement; const img = this.getElement().querySelector(`#${imgID}`) as HTMLElement; if (img && el) { - el.dataset.value = value.substring(1); - img.dataset.label = value[0]; + el.innerText = value.substring(1); + img.innerText = value[0]; } } @@ -209,4 +263,24 @@ export class MouseInfoPanel extends Panel { return [zeroAppend(strVal, 3, decimal), unit]; } + + #changeLocationSystem() { + + if ( this.#selectedLocationSystemIndex < this.#locationSystems.length - 1 ) { + this.#selectedLocationSystemIndex++; + } else { + this.#selectedLocationSystemIndex = 0; + } + + this.#coordinatesElement.setAttribute( "data-location-system", this.#getLocationSystem() ); + this.#update(); + } + + + #getLocationSystem() { + const x = this.#locationSystems; + const y = this.#selectedLocationSystemIndex; + const z = this.#locationSystems[ this.#selectedLocationSystemIndex ]; + return this.#locationSystems[this.#selectedLocationSystemIndex]; + } } diff --git a/client/views/panels/mouseinfo.ejs b/client/views/panels/mouseinfo.ejs index 79557502..990258e7 100644 --- a/client/views/panels/mouseinfo.ejs +++ b/client/views/panels/mouseinfo.ejs @@ -1,36 +1,63 @@
-
-
-
- -
-
-
- -
-
-
+
+
+
+
+
-
-
-
-
-
-
-
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+
\ No newline at end of file