mirror of
https://github.com/Pax1601/DCSOlympus.git
synced 2025-10-29 16:56:34 +00:00
Merge pull request #443 from Pax1601/427-toggle-mouse-info-format-latlng-grid-decimals
Can now get LatLng, MGRS and UTM location data
This commit is contained in:
Pax1601
GitHub
commit
746617deb0
42
client/package-lock.json
generated
42
client/package-lock.json
generated
@ -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",
|
||||
|
||||
@ -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"
|
||||
}
|
||||
}
|
||||
|
||||
@ -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") {
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -22,6 +22,7 @@
|
||||
}
|
||||
|
||||
#connection-status-panel .time-display {
|
||||
cursor:pointer;
|
||||
display:none;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
|
||||
@ -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);
|
||||
}
|
||||
} */
|
||||
@ -202,4 +202,10 @@ export enum DataIndexes {
|
||||
isLeader,
|
||||
operateAs,
|
||||
endOfData = 255
|
||||
};
|
||||
};
|
||||
|
||||
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;
|
||||
@ -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;
|
||||
|
||||
@ -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<Unit[]>) => this.#update());
|
||||
document.addEventListener('clearSelection', () => this.#update());
|
||||
|
||||
this.#coordinatesElement = <HTMLElement>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 = <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];
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,36 +1,63 @@
|
||||
<div id="mouse-info-panel" class="ol-panel" oncontextmenu="return false;">
|
||||
|
||||
<div id="measuring-tool" class="hide">
|
||||
<dl class="ol-data-grid">
|
||||
<dt id="ref-measure-position" data-tooltip="CTRL-click on the map to activate the measuring tool">
|
||||
<img src="/resources/theme/images/icons/pin.svg" inject-svg>
|
||||
</dt>
|
||||
<dd id="measure-position" class="br-info" data-bearing="---" data-distance="---" data-distance-units="NM"></dd>
|
||||
<dt id="ref-unit-position" data-tooltip="Bearing/range from selected unit">
|
||||
<img src="/resources/theme/images/icons/plane.svg" inject-svg>
|
||||
</dt>
|
||||
<dd id="unit-position" class="br-info" data-bearing="---" data-distance="---" data-distance-units="NM"></dd>
|
||||
</dl>
|
||||
<div id="measuring-tool" class="mouse-tool hide">
|
||||
<div class="mouse-tool-item">
|
||||
<div id="ref-measure-position" class="svg-icon"><img src="/resources/theme/images/icons/pin.svg" inject-svg></div>
|
||||
<div id="measure-position" class="br-info" data-bearing="---" data-distance="---" data-distance-units="NM"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="bullseyes-tool">
|
||||
<dl class="ol-data-grid">
|
||||
<dt id="ref-bullseye-2" data-tooltip="Bearing/range from this bullseye" data-label="BE" data-coalition="blue"></dt>
|
||||
<dd id="bullseye-2" class="br-info" data-coalition="blue" data-bearing="---" data-distance="---" data-distance-units="NM"></dd>
|
||||
<dt id="ref-bullseye-1" data-tooltip="Bearing/range from this bullseye" data-label="BE" data-coalition="red"></dt>
|
||||
<dd id="bullseye-1" class="br-info" data-coalition="red" data-bearing="---" data-distance="---" data-distance-units="NM"></dd>
|
||||
</dl>
|
||||
<div id="unit-bullseye-tool" class="mouse-tool hide">
|
||||
<div class="mouse-tool-item">
|
||||
<div id="ref-unit-position" class="svg-icon" data-tooltip="Bearing/range from selected unit"><img src="/resources/theme/images/icons/plane.svg" inject-svg></div>
|
||||
<div id="unit-position" class="br-info" data-bearing="---" data-distance="---" data-distance-units="NM"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="bullseyes-tool" class="mouse-tool">
|
||||
<div class="mouse-tool-item">
|
||||
<div id="ref-bullseye-2" data-tooltip="Bearing/range from this bullseye" data-label="BE" data-coalition="blue"></div>
|
||||
<div id="bullseye-2" class="br-info" data-coalition="blue" data-bearing="---" data-distance="---" data-distance-units="NM"></div>
|
||||
</div>
|
||||
<div class="mouse-tool-item">
|
||||
<div id="ref-bullseye-1" data-tooltip="Bearing/range from this bullseye" data-label="BE" data-coalition="red"></div>
|
||||
<div id="bullseye-1" class="br-info" data-coalition="red" data-bearing="---" data-distance="---" data-distance-units="NM"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="coordinates-tool">
|
||||
<dl class="ol-data-grid">
|
||||
<dt id="ref-mouse-position-latitude" data-label="?"></dt>
|
||||
<dd id="mouse-position-latitude" class="coordinates"></dd>
|
||||
<dt id="ref-mouse-position-longitude" data-label="?"></dt>
|
||||
<dd id="mouse-position-longitude" class="coordinates"></dd>
|
||||
<dt id="ref-mouse-position-elevation" data-label="H"></dt>
|
||||
<dd id="mouse-position-elevation" class="elevation" data-value="---"></dd>
|
||||
</dl>
|
||||
<div id="coordinates-tool" class="mouse-tool" data-location-system="LatLng">
|
||||
|
||||
<div class="mouse-tool-item" data-location-system="MGRS">
|
||||
<div id="ref-mouse-position-mgrs"></div>
|
||||
<div id="mouse-position-mgrs" class="coordinates"></div>
|
||||
</div>
|
||||
|
||||
<div class="mouse-tool-item" data-location-system="LatLng">
|
||||
<div id="ref-mouse-position-latitude" data-location-system="LatLng"></div>
|
||||
<div id="mouse-position-latitude" class="coordinates" data-location-system="LatLng"></div>
|
||||
</div>
|
||||
|
||||
<div class="mouse-tool-item" data-location-system="LatLng">
|
||||
<div id="ref-mouse-position-longitude" data-location-system="LatLng"></div>
|
||||
<div id="mouse-position-longitude" class="coordinates" data-location-system="LatLng"></div>
|
||||
</div>
|
||||
|
||||
<div class="mouse-tool-item" data-location-system="UTM">
|
||||
<div id="ref-mouse-position-utm-northing" data-location-system="UTM"></div>
|
||||
<div id="mouse-position-utm-northing" class="coordinates" data-location-system="UTM"></div>
|
||||
</div>
|
||||
|
||||
<div class="mouse-tool-item" data-location-system="UTM">
|
||||
<div id="ref-mouse-position-utm-easting" data-location-system="UTM"></div>
|
||||
<div id="mouse-position-utm-easting" class="coordinates" data-location-system="UTM"></div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="mouse-tool-item">
|
||||
<div id="ref-mouse-position-elevation" data-label="H"></div>
|
||||
<div id="mouse-position-elevation" class="elevation" data-value="---"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
Loading…
x
Reference in New Issue
Block a user