diff --git a/client/package-lock.json b/client/package-lock.json index e627bd43..2fc981a0 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -8,6 +8,7 @@ "name": "DCSOlympus", "version": "v0.3.0-alpha", "dependencies": { + "@types/formatcoords": "^1.1.0", "@types/geojson": "^7946.0.10", "@types/leaflet": "^1.9.0", "@types/svg-injector": "^0.0.29", @@ -15,6 +16,7 @@ "debug": "~2.6.9", "ejs": "^3.1.8", "express": "~4.16.1", + "formatcoords": "^1.1.3", "leaflet": "^1.9.3", "leaflet-control-mini-map": "^0.4.0", "leaflet.nauticscale": "^1.1.0", @@ -1835,6 +1837,11 @@ "tslib": "^2.5.0" } }, + "node_modules/@types/formatcoords": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@types/formatcoords/-/formatcoords-1.1.0.tgz", + "integrity": "sha512-T20OHYACraNS/xCoBEmvtUYLc/eYjXaGGDpPFVAyuwarE9KHSGX8DVb3KNBKZ5RQz7fB7qXazZj13520eDSODw==" + }, "node_modules/@types/geojson": { "version": "7946.0.10", "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.10.tgz", @@ -3395,6 +3402,11 @@ "is-callable": "^1.1.3" } }, + "node_modules/formatcoords": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/formatcoords/-/formatcoords-1.1.3.tgz", + "integrity": "sha512-Ittg5/AsYFCOtcFGPLSmVpP56a8Ionmv4Ys69UmCAdvBnqVzvVVbkZMnjWEmXrZvnmoGQE8YI3RhnxbMQFdYSw==" + }, "node_modules/forwarded": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz", @@ -6964,6 +6976,11 @@ "tslib": "^2.5.0" } }, + "@types/formatcoords": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@types/formatcoords/-/formatcoords-1.1.0.tgz", + "integrity": "sha512-T20OHYACraNS/xCoBEmvtUYLc/eYjXaGGDpPFVAyuwarE9KHSGX8DVb3KNBKZ5RQz7fB7qXazZj13520eDSODw==" + }, "@types/geojson": { "version": "7946.0.10", "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.10.tgz", @@ -8266,6 +8283,11 @@ "is-callable": "^1.1.3" } }, + "formatcoords": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/formatcoords/-/formatcoords-1.1.3.tgz", + "integrity": "sha512-Ittg5/AsYFCOtcFGPLSmVpP56a8Ionmv4Ys69UmCAdvBnqVzvVVbkZMnjWEmXrZvnmoGQE8YI3RhnxbMQFdYSw==" + }, "forwarded": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz", diff --git a/client/package.json b/client/package.json index 9f2fec90..5030d648 100644 --- a/client/package.json +++ b/client/package.json @@ -10,6 +10,7 @@ "watch": "watchify .\\src\\index.ts --debug -o .\\public\\javascripts\\bundle.js -t [ babelify --global true --presets [ @babel/preset-env ] --extensions '.js'] -p [ tsify --noImplicitAny ]" }, "dependencies": { + "@types/formatcoords": "^1.1.0", "@types/geojson": "^7946.0.10", "@types/leaflet": "^1.9.0", "@types/svg-injector": "^0.0.29", @@ -17,6 +18,7 @@ "debug": "~2.6.9", "ejs": "^3.1.8", "express": "~4.16.1", + "formatcoords": "^1.1.3", "leaflet": "^1.9.3", "leaflet-control-mini-map": "^0.4.0", "leaflet.nauticscale": "^1.1.0", diff --git a/client/public/stylesheets/panels/mouseinfo.css b/client/public/stylesheets/panels/mouseinfo.css index e32f4540..df33c28b 100644 --- a/client/public/stylesheets/panels/mouseinfo.css +++ b/client/public/stylesheets/panels/mouseinfo.css @@ -99,7 +99,7 @@ } .coordinates::after { - content: attr(data-dd) "\00b0 " attr(data-mm) "'" attr(data-ss) "." attr(data-sss) '"' attr(data-label); + content: attr(data-value); font-weight: bold; font-size: 13px; overflow: hidden; diff --git a/client/src/panels/mouseinfopanel.ts b/client/src/panels/mouseinfopanel.ts index 81ef04e6..b5e7e8eb 100644 --- a/client/src/panels/mouseinfopanel.ts +++ b/client/src/panels/mouseinfopanel.ts @@ -3,6 +3,7 @@ import { getMap, getMissionData, getUnitsManager } from ".."; import { distance, bearing, zeroAppend, mToNm, nmToFt } from "../other/utils"; import { Unit } from "../units/unit"; import { Panel } from "./panel"; +import formatcoords from "formatcoords"; export class MouseInfoPanel extends Panel { #measureMarker: Marker; @@ -48,8 +49,10 @@ export class MouseInfoPanel extends Panel { this.#drawMeasure(null, `bullseye-${idx}`, bullseyes[idx].getLatLng(), mousePosition); /* Draw coordinates */ - this.#drawCoordinates("ref-mouse-position-latitude", "mouse-position-latitude", mousePosition.lat, ["N", "S"]); - this.#drawCoordinates("ref-mouse-position-longitude", "mouse-position-longitude", mousePosition.lng, ["E", "W"]); + 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]); } #onMapClick(e: any) { @@ -153,19 +156,12 @@ export class MouseInfoPanel extends Panel { } } - #drawCoordinates(imgId: string, textId: string, value: number, prefixes: string[]) { + #drawCoordinates(imgId: string, textId: string, value: string) { const el = this.getElement().querySelector(`#${textId}`) as HTMLElement; const img = this.getElement().querySelector(`#${imgId}`) as HTMLElement; - if (img && el) { - let matches = String(value).match(/^\-?(\d+)\.(\d{2})(\d{2})(\d{2})/); - if (matches && matches.length) { - el.dataset.dd = matches[1]; - el.dataset.mm = matches[2]; - el.dataset.ss = matches[3]; - el.dataset.sss = matches[4]; - } - img.dataset.label = (value < 0) ? prefixes[1] : prefixes[0]; + el.dataset.value = value.substring(1); + img.dataset.label = value[0]; } } diff --git a/client/tsconfig.json b/client/tsconfig.json index a4c40980..c293f5f2 100644 --- a/client/tsconfig.json +++ b/client/tsconfig.json @@ -34,7 +34,8 @@ "types": [ "leaflet", "geojson", - "node" + "node", + "formatcoords" ], /* Specify type package names to be included without being referenced in a source file. */ // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */ // "moduleSuffixes": [], /* List of file name suffixes to search when resolving a module. */