pr fixes

CHANGELOG.md

@@ -5,5 +5,7 @@
 ### Added
 
 ### Changed
+- Values for "Height", "Angle", "Pitch", and coordinates are now input fields. Users can adjust values using arrow keys.
+- The range for height has been increased to 700'000m.
 
 ### Fixed

ui/locales/app.de.json

@@ -7,12 +7,13 @@
   "cam_lock_info_elevation": "Im Moment kann im 3D Viewer nur die Höhe verändert werden.",
   "cam_lock_info_move": "Im Moment kann im 3D Viewer nur die Position (s. Koordinaten) verändert werden.",
   "cam_lock_info_pitch": "Im Moment kann im 3D Viewer nur der Neigungswinkel verändert werden.",
-  "camera_position_angle_label": "Azimut<br>(°)",
+  "camera_position_angle_label": "Azimut",
   "camera_position_coordinates_label": "Koordinaten",
   "camera_position_coordinates_input_error": "Ungültige Koordinaten!",
   "camera_position_coordinates_system_label": "Koordinatensystem",
-  "camera_position_height_label": "Höhe<br>(m. ü. OKT)",
-  "camera_position_pitch_label": "Neigungswinkel<br>(°)",
+  "camera_position_height_label": "Höhe",
+  "camera_position_height_unit": "(m. ü. OKT)",
+  "camera_position_pitch_label": "Neigungswinkel",
   "cancel": "Abbrechen",
   "contact_mailto_text": "Kontakt",
   "created_on": "Erstellt am",

ui/locales/app.en.json

@@ -7,12 +7,13 @@
   "cam_lock_info_elevation": "In the 3D viewer currently you can only change the height.",
   "cam_lock_info_move": "In the 3D viewer currently you can only change the coordinates.",
   "cam_lock_info_pitch": "In the 3D viewer currently you can only change the pitch.",
-  "camera_position_angle_label": "Angle<br>(N±) (°)",
+  "camera_position_angle_label": "Angle(N±)",
   "camera_position_coordinates_label": "Coordinates",
   "camera_position_coordinates_input_error": "Invalid coordinates!",
   "camera_position_coordinates_system_label": "Coordinate system",
-  "camera_position_height_label": "Height<br>(m AGL)",
-  "camera_position_pitch_label": "Pitch<br>(°)",
+  "camera_position_height_label": "Height",
+  "camera_position_height_unit": "(m AGL)",
+  "camera_position_pitch_label": "Pitch",
   "cancel": "Cancel",
   "contact_mailto_text": "Contact",
   "created_on": "Created on",

ui/locales/app.fr.json

@@ -7,12 +7,13 @@
   "cam_lock_info_elevation": "Dans le viewer 3D, seule l'altitude peut être modifiée actuellement.",
   "cam_lock_info_move": "Dans le viewer 3D, seule la position (v. les coordonnées) peut être modifiée actuellement.",
   "cam_lock_info_pitch": "Dans le viewer 3D, seul l'angle peut être modifié actuellement.",
-  "camera_position_angle_label": "Angle<br>(°)",
+  "camera_position_angle_label": "Angle",
   "camera_position_coordinates_label": "Coordonnées",
   "camera_position_coordinates_input_error": "Coordonnées incorrectes!",
   "camera_position_coordinates_system_label": "Système de coordonnées",
-  "camera_position_height_label": "Altitude<br>(m AGL)",
-  "camera_position_pitch_label": "Inclinaison<br>(°)",
+  "camera_position_height_label": "Altitude",
+  "camera_position_height_unit": "(m AGL)",
+  "camera_position_pitch_label": "Inclinaison",
   "cancel": "Annuler",
   "contact_mailto_text": "Contact",
   "created_on": "Créé le",

ui/locales/app.it.json

@@ -7,12 +7,13 @@
   "cam_lock_info_elevation": "Nel visualizzatore 3D si può solo cambiare l'altitudine attualmente",
   "cam_lock_info_move": "Nel visualizzatore 3D si può solo cambiare la posizione attualmente",
   "cam_lock_info_pitch": "Nel visualizzatore 3D si può solo cambiare l'angolo attualmente",
-  "camera_position_angle_label": "Angolo<br>(°)",
+  "camera_position_angle_label": "Angolo",
   "camera_position_coordinates_label": "Coordinate",
   "camera_position_coordinates_input_error": "Coordinate non valide!",
   "camera_position_coordinates_system_label": "Sistema di coordinate",
-  "camera_position_height_label": "Altitudine<br>(m AGL)",
-  "camera_position_pitch_label": "Inclinazione<br>(°)",
+  "camera_position_height_label": "Altitudine",
+  "camera_position_height_unit": "(m AGL)",
+  "camera_position_pitch_label": "Inclinazione",
   "cancel": "Annullare",
   "contact_mailto_text": "Contatto",
   "created_on": "Creato lo",

ui/src/constants.ts

@@ -3,7 +3,7 @@ import {Cartesian3, Color, ColorBlendMode, Math as CMath, Rectangle, ShadowMode,
 export {LayerType, DEFAULT_LAYER_OPACITY} from './layertree';
 
 
-export const SWITZERLAND_BOUNDS_WGS84 = [5.140242, 45.398181, 11.47757, 48.230651];
+export const SWITZERLAND_BOUNDS_WGS84 = [4.54249, 44.61921, 12.67250, 48.45365];
 export const SWITZERLAND_BOUNDS_LV95 = [2370000, 945000, 2987000, 1380000];
 
 export const SWITZERLAND_RECTANGLE = Rectangle.fromDegrees(...SWITZERLAND_BOUNDS_WGS84);

ui/src/elements/ngm-cam-configuration.ts

@@ -25,7 +25,6 @@ import './ngm-cam-coordinates';
 import NavToolsStore from '../store/navTools';
 import {dragArea} from './helperElements';
 import './ngm-minimap';
-import {unsafeHTML} from 'lit/directives/unsafe-html.js';
 import {CoordinateWithCrs} from './ngm-cam-coordinates';
 
 export type LockType = '' | 'elevation' | 'angle' | 'pitch' | 'move';
@@ -75,18 +74,18 @@ export class NgmCamConfiguration extends LitElementI18n {
   @state()
   accessor lockType: LockType = '';
   // always use the 'de-CH' locale to always have the simple tick as thousands separator
-  private integerFormat = new Intl.NumberFormat('de-CH', {
+  private readonly integerFormat = new Intl.NumberFormat('de-CH', {
     maximumFractionDigits: 1
   });
-  private timeOut: null | NodeJS.Timeout = null;
+  private timeout: null | NodeJS.Timeout = null;
   private handler: ScreenSpaceEventHandler | undefined;
   private lockMove = false;
-  private lockMoveStartPosition: Cartesian2 = new Cartesian2();
-  private lockMovePosition: Cartesian2 = new Cartesian2();
+  private readonly lockMoveStartPosition: Cartesian2 = new Cartesian2();
+  private readonly lockMovePosition: Cartesian2 = new Cartesian2();
   private removeOnTick: Event.RemoveCallback | undefined;
-  private configurations = [
+  private readonly configurations = [
     {
-      label: () => i18next.t('camera_position_height_label'),
+      label: () => html`${i18next.t('camera_position_height_label')}<br>${i18next.t('camera_position_height_unit')}`,
       iconClass: () => classMap({'ngm-cam-h-icon': true, 'ngm-active-icon': this.lockType === 'elevation'}),
       minValue: 0,
       maxValue: 1,
@@ -100,8 +99,8 @@ export class NgmCamConfiguration extends LitElementI18n {
       getValueLabel: () => `${this.integerFormat.format(this.elevation)} m`,
       onSliderChange: (evt) => this.updateHeight(valueToHeight(Number(evt.target.value))),
       onInputChange: (evt) => {
-        if (this.timeOut) {
-          clearTimeout(this.timeOut);
+        if (this.timeout) {
+          clearTimeout(this.timeout);
         }
         let value = Number(evt.target.value);
         if (value < -ABSOLUTE_ELEVATION_MIN) {
@@ -110,15 +109,15 @@ export class NgmCamConfiguration extends LitElementI18n {
         if (value > ABSOLUTE_ELEVATION_MAX) {
           value = ABSOLUTE_ELEVATION_MAX;
         }
-        this.timeOut = setTimeout(() => {
+        this.timeout = setTimeout(() => {
           this.updateHeight(value);
-          this.timeOut = null;
+          this.timeout = null;
         }, 300);
       },
       lock: () => this.toggleLock('elevation')
     },
     {
-      label: () => i18next.t('camera_position_angle_label'),
+      label: () => html`${i18next.t('camera_position_angle_label')}<br>(°)`,
       iconClass: () => classMap({'ngm-cam-d-icon': true, 'ngm-active-icon': this.lockType === 'angle'}),
       minValue: 0,
       maxValue: 359,
@@ -130,7 +129,7 @@ export class NgmCamConfiguration extends LitElementI18n {
       lock: () => this.toggleLock('angle')
     },
     {
-      label: () => i18next.t('camera_position_pitch_label'),
+      label: () => html`${i18next.t('camera_position_pitch_label')}<br>(°)`,
       iconClass: () => classMap({'ngm-cam-t-icon': true, 'ngm-active-icon': this.lockType === 'pitch'}),
       minValue: -90,
       maxValue: 90,
@@ -326,7 +325,7 @@ export class NgmCamConfiguration extends LitElementI18n {
             <div class=${c.iconClass()} title=${i18next.t('cam_lock')} @click=${c.lock}></div>
             <div class="ngm-cam-conf-slider">
               <div>
-                <label>${unsafeHTML(c.label())}</label>
+                <label>${c.label()}</label>
                 <input style="border: none;padding: 0; width: 50%; background-color: unset; justify-items: end"
                    type="number"
                       min="${c.minInputValue ?? c.minValue}"
@@ -350,7 +349,7 @@ export class NgmCamConfiguration extends LitElementI18n {
         <div>
           <div class="ngm-cam-icon ${classMap({'ngm-active-icon': this.lockType === 'move'})}"
                @click=${() => this.toggleLock('move')}></div>
-          <ngm-cam-coordinates @onCoordinatesChanged="${this.updateCoordinates}" .coordinates=${this.coordinates}></ngm-cam-coordinates>
+          <ngm-cam-coordinates @coordinates-changed="${this.updateCoordinates}" .coordinates=${this.coordinates}></ngm-cam-coordinates>
         </div>
       </div>
       ${dragArea}

ui/src/elements/ngm-cam-coordinates.ts

@@ -73,7 +73,7 @@ export class NgmCamCoordinates extends LitElementI18n {
     super.updated(changedProperties);
   }
 
-  validateCoordinates() {
+  updateCoordinates() {
     const coords = this.coordsInput.value.replace(/['`’´]/g, '').split(', ').map(c => parseFloat(c));
     const text = i18next.t('camera_position_coordinates_input_error');
     if (isNaN(coords[0]) || isNaN(coords[1])) {
@@ -88,7 +88,7 @@ export class NgmCamCoordinates extends LitElementI18n {
       showSnackbarError(text);
       return;
     }
-    this.dispatchEvent(new CustomEvent<CoordinateWithCrs>('onCoordinatesChanged', {
+    this.dispatchEvent(new CustomEvent<CoordinateWithCrs>('coordinates-changed', {
       detail: {
         long: coords[0],
         lat: coords[1],
@@ -97,7 +97,7 @@ export class NgmCamCoordinates extends LitElementI18n {
   }
 
   render() {
-    if (!this.coordinates || !this.coordinates[this.key]) {
+    if (!this.coordinates ?? !this.coordinates[this.key]) {
       return '';
     }
     const c = this.coordinates[this.key];
@@ -118,8 +118,8 @@ export class NgmCamCoordinates extends LitElementI18n {
         <input class="ngm-coords ngm-coords-input"
                  type="text"
                  .value=${c[0] + ', ' + c[1]}
-                 @blur="${this.validateCoordinates}"
-                 @keydown="${(e) => { if (e.key === 'Enter') this.validateCoordinates(); }}"
+                 @blur="${this.updateCoordinates}"
+                 @keydown="${(e) => { if (e.key === 'Enter') this.updateCoordinates(); }}"
           />
       </div>
     `;