From 5033cccda0ed78943eb989c466f5e5820ac757e7 Mon Sep 17 00:00:00 2001 From: PeekabooSteam Date: Mon, 20 Mar 2023 14:20:42 +0000 Subject: [PATCH 1/2] Selected unit measurement now works. --- client/public/stylesheets/layout.css | 6 ++++- client/public/stylesheets/mouseinfopanel.css | 16 ++++++++++---- client/src/panels/mouseinfopanel.ts | 23 +++++++++++++++++--- client/views/mouseinfopanel.ejs | 6 +++-- 4 files changed, 41 insertions(+), 10 deletions(-) diff --git a/client/public/stylesheets/layout.css b/client/public/stylesheets/layout.css index 53a9863c..b66681af 100644 --- a/client/public/stylesheets/layout.css +++ b/client/public/stylesheets/layout.css @@ -72,10 +72,14 @@ dl.ol-data-grid dd { margin-left: auto; } -.br-info[data-bearing][data-distance][data-distance-units]::after { +.br-info::after { content: attr( data-bearing ) '\00B0 / ' attr( data-distance ) attr( data-distance-units ); } +.br-info[data-message]::after { + content: attr( data-message ); +} + .coordinates::after { content: attr( data-dd ) "\00b0 " attr( data-mm ) "'" attr( data-ss ) "." attr( data-sss ) '"' attr( data-label ); } diff --git a/client/public/stylesheets/mouseinfopanel.css b/client/public/stylesheets/mouseinfopanel.css index c571e514..fe8030a3 100644 --- a/client/public/stylesheets/mouseinfopanel.css +++ b/client/public/stylesheets/mouseinfopanel.css @@ -25,7 +25,7 @@ #mouse-info-panel dt { height:20px; - width:40%; + width:30%; } #mouse-info-panel dt::after { @@ -44,12 +44,20 @@ width:16px; } -#mouse-info-panel dt#ref-measure-position::after { +#mouse-info-panel dt#ref-unit-position::after { background-image: url( "/images/icons/ruler.svg" ); background-position: 50% 50%; background-repeat: no-repeat; background-size:16px 16px; - content: " "; + content: ""; +} + +#mouse-info-panel dt#ref-measure-position::after { + background-image: url( "/images/pin.png" ); + background-position: 50% 50%; + background-repeat: no-repeat; + background-size:16px 16px; + content: ""; } @@ -79,5 +87,5 @@ } #mouse-info-panel dd { - width:60%; + width:70%; } \ No newline at end of file diff --git a/client/src/panels/mouseinfopanel.ts b/client/src/panels/mouseinfopanel.ts index cd76e7d9..ef7a9656 100644 --- a/client/src/panels/mouseinfopanel.ts +++ b/client/src/panels/mouseinfopanel.ts @@ -155,13 +155,30 @@ export class MouseInfoPanel extends Panel { #onUnitsSelection(units: Unit[]) { - if (units.length == 1) - this.getElement().querySelector(`#unit-position`)?.classList.toggle("hide", false); + const pos = this.getElement().querySelector(`#unit-position`); + + if ( units.length > 1 ) { + pos?.setAttribute( "data-message", "(multiple units)" ); + } else { + pos?.removeAttribute( "data-message" ); + } + } #onClearSelection() { this.#measureBox.classList.toggle("hide", true); - this.getElement().querySelector(`#unit-position`)?.classList.toggle("hide", true); + + const pos = this.getElement().querySelector(`#unit-position`); + + + if ( pos instanceof HTMLElement ) { + pos?.removeAttribute( "data-message" ); + + pos.dataset.bearing = "---"; + pos.dataset.distance = "---"; + pos.dataset.distanceUnits = "nm"; + + } } } diff --git a/client/views/mouseinfopanel.ejs b/client/views/mouseinfopanel.ejs index 935e1694..40d96ec7 100644 --- a/client/views/mouseinfopanel.ejs +++ b/client/views/mouseinfopanel.ejs @@ -4,14 +4,16 @@
+
+
-
+
-
+
From dd7d54603f992931c6f2993076fc7922a27430bc Mon Sep 17 00:00:00 2001 From: PeekabooSteam Date: Mon, 20 Mar 2023 16:25:24 +0000 Subject: [PATCH 2/2] Mouse co-ordinates work; N/S and E/W are not negative. --- client/src/panels/mouseinfopanel.ts | 35 +++++++++++++++++++++++++++++ client/views/mouseinfopanel.ejs | 4 ++-- 2 files changed, 37 insertions(+), 2 deletions(-) diff --git a/client/src/panels/mouseinfopanel.ts b/client/src/panels/mouseinfopanel.ts index ef7a9656..023ca085 100644 --- a/client/src/panels/mouseinfopanel.ts +++ b/client/src/panels/mouseinfopanel.ts @@ -72,6 +72,41 @@ export class MouseInfoPanel extends Panel { el.dataset.distanceUnits = "nm"; } } + + const refMouseLat = document.getElementById( "ref-mouse-position-latitude" ); + const mouseLat = document.getElementById( "mouse-position-latitude" ); + + if ( refMouseLat && mouseLat ) { + + let matches = String( mousePosition.lat ).match( /^\-?(\d+)\.(\d{2})(\d{2})(\d{2})/ ); + + if ( matches && matches.length ) { + mouseLat.dataset.dd = matches[1]; + mouseLat.dataset.mm = matches[2]; + mouseLat.dataset.ss = matches[3]; + mouseLat.dataset.sss = matches[4]; + } + + refMouseLat.dataset.label = ( mousePosition.lat < 0 ) ? "S" : "N"; + + } + + const refMouseLng = document.getElementById( "ref-mouse-position-longitude" ); + const mouseLng = document.getElementById( "mouse-position-longitude" ); + + if ( refMouseLng && mouseLng ) { + + let matches = String( mousePosition.lng ).match( /^\-?(\d+)\.(\d{2})(\d{2})(\d{2})/ ); + + if ( matches && matches.length ) { + mouseLng.dataset.dd = matches[1]; + mouseLng.dataset.mm = matches[2]; + mouseLng.dataset.ss = matches[3]; + mouseLng.dataset.sss = matches[4]; + } + + refMouseLng.dataset.label = ( mousePosition.lng < 0 ) ? "W" : "E"; + } } #onMapClick(e: any) diff --git a/client/views/mouseinfopanel.ejs b/client/views/mouseinfopanel.ejs index 40d96ec7..ecf62d24 100644 --- a/client/views/mouseinfopanel.ejs +++ b/client/views/mouseinfopanel.ejs @@ -20,9 +20,9 @@
-
+
-
+