weyne/DCSOlympus
1
0
Fork 0
mirror of https://github.com/Pax1601/DCSOlympus.git synced 2025-10-29 16:56:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #108 from Pax1601/75-at-mouse-coordinates-not-shown-in-panel

Browse Source 
75 at mouse coordinates not shown in panel
This commit is contained in:
Pax1601 2023-03-20 19:18:09 +01:00 committed by GitHub
commit 9f5ddf8f79
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 78 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
client/public/stylesheets/layout.css
View File

@ -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 );
}

16
client/public/stylesheets/mouseinfopanel.css
View File

@ -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%;
}

58
client/src/panels/mouseinfopanel.ts
View File

@ -72,6 +72,41 @@ export class MouseInfoPanel extends Panel {
el.dataset.distanceUnits = "nm";
}
}
const refMouseLat = <HTMLElement>document.getElementById( "ref-mouse-position-latitude" );
const mouseLat = <HTMLElement>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 = <HTMLElement>document.getElementById( "ref-mouse-position-longitude" );
const mouseLng = <HTMLElement>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)
@ -155,13 +190,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";
}
}
}

10
client/views/mouseinfopanel.ejs
View File

@ -4,23 +4,25 @@
<dl class="ol-data-grid">
<dt id="ref-measure-position" data-tooltip="CTRL-click on the map to activate the measuring tool."></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."></dt>
<dd id="unit-position" class="br-info" data-bearing="---" data-distance="---" data-distance-units="nm"></dd>
</dl>
</div>
<div>
<dl class="ol-data-grid">
<dt id="ref-bullseye-2" data-label="BE" data-coalition="blue"></dt>
<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-bearing="---" data-distance="---" data-distance-units="nm"></dd>
<dt id="ref-bullseye-1" data-label="BE" data-coalition="red"></dt>
<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-bearing="---" data-distance="---" data-distance-units="nm"></dd>
</dl>
</div>
<div>
<dl class="ol-data-grid">
<dt id="ref-mouse-position-latitude" data-label="N"></dt>
<dt id="ref-mouse-position-latitude" data-label="?"></dt>
<dd id="mouse-position-latitude" class="coordinates" data-dd="---" data-mm="---" data-ss="--" data-sss="--"></dd>
<dt id="ref-mouse-position-longitude" data-label="E"></dt>
<dt id="ref-mouse-position-longitude" data-label="?"></dt>
<dd id="mouse-position-longitude" class="coordinates" data-dd="---" data-mm="---" data-ss="--" data-sss="--"></dd>
</dl>
</div>