From 189cdb16f5a60c109238674b6a0075bc37651935 Mon Sep 17 00:00:00 2001 From: vladyslavtk Date: Thu, 4 Jul 2024 16:36:56 +0300 Subject: [PATCH 1/2] Move minimap to camera configuration panel --- ui/src/elements/ngm-cam-configuration.ts | 2 + ui/src/elements/ngm-minimap.ts | 38 ++--- ui/src/elements/ngm-nadir-view.ts | 200 ----------------------- ui/src/ngm-app.ts | 8 - ui/src/style/icons.css | 9 - ui/src/style/ngm-minimap.css | 26 +-- 6 files changed, 19 insertions(+), 264 deletions(-) delete mode 100644 ui/src/elements/ngm-nadir-view.ts diff --git a/ui/src/elements/ngm-cam-configuration.ts b/ui/src/elements/ngm-cam-configuration.ts index 0874b20c2..23a8a6d9a 100644 --- a/ui/src/elements/ngm-cam-configuration.ts +++ b/ui/src/elements/ngm-cam-configuration.ts @@ -20,6 +20,7 @@ import {classMap} from 'lit/directives/class-map.js'; import './ngm-cam-coordinates'; import NavToolsStore from '../store/navTools'; import {dragArea} from './helperElements'; +import './ngm-minimap'; export type LockType = '' | 'elevation' | 'angle' | 'pitch' | 'move'; @@ -276,6 +277,7 @@ export class NgmCamConfiguration extends LitElementI18n {
this.dispatchEvent(new CustomEvent('close'))}>
+ ${this.configurations.map(c => html`
diff --git a/ui/src/elements/ngm-minimap.ts b/ui/src/elements/ngm-minimap.ts index 24450f32a..9590abf66 100644 --- a/ui/src/elements/ngm-minimap.ts +++ b/ui/src/elements/ngm-minimap.ts @@ -3,23 +3,19 @@ import {customElement, property, state} from 'lit/decorators.js'; import {Rectangle, Math as CesiumMath, Cartesian3} from 'cesium'; import {styleMap} from 'lit/directives/style-map.js'; import {MINIMAP_EXTENT} from '../constants'; -import draggable from './draggable'; -import './ngm-nadir-view'; -import i18next from 'i18next'; import {LitElementI18n} from '../i18n'; import NavToolsStore from '../store/navTools'; import type {Interactable} from '@interactjs/types'; import type {Event, Viewer} from 'cesium'; -import {dragArea} from './helperElements'; import {classMap} from 'lit/directives/class-map.js'; // calculate difference between minimap extent and container const width = CesiumMath.toRadians(MINIMAP_EXTENT[2] - MINIMAP_EXTENT[0]); const height = CesiumMath.toRadians(MINIMAP_EXTENT[3] - MINIMAP_EXTENT[1]); -const west = CesiumMath.toRadians(MINIMAP_EXTENT[0]) - width / 228 * 12; -const south = CesiumMath.toRadians(MINIMAP_EXTENT[1]) - height / 99 * 24; -const east = CesiumMath.toRadians(MINIMAP_EXTENT[2]) + width / 228 * 12; -const north = CesiumMath.toRadians(MINIMAP_EXTENT[3]) + height / 99 * 36; +const west = CesiumMath.toRadians(MINIMAP_EXTENT[0]); +const south = CesiumMath.toRadians(MINIMAP_EXTENT[1]); +const east = CesiumMath.toRadians(MINIMAP_EXTENT[2]); +const north = CesiumMath.toRadians(MINIMAP_EXTENT[3]); @customElement('ngm-minimap') export class NgmMinimap extends LitElementI18n { @@ -87,7 +83,7 @@ export class NgmMinimap extends LitElementI18n { }; } - handleNadirToggle() { + private toggleNadirStatus() { this.nadirViewActive = !this.nadirViewActive; } @@ -105,6 +101,13 @@ export class NgmMinimap extends LitElementI18n { this.left = (lon - MINIMAP_EXTENT[0]) / (MINIMAP_EXTENT[2] - MINIMAP_EXTENT[0]); this.bottom = (lat - MINIMAP_EXTENT[1]) / (MINIMAP_EXTENT[3] - MINIMAP_EXTENT[1]); this.heading = this.viewer.scene.camera.heading - 1.57; + + const nadirView = CesiumMath.equalsEpsilon(this.viewer.scene.camera.pitch, -CesiumMath.PI_OVER_TWO, CesiumMath.EPSILON1); + if (this.nadirViewActive && !nadirView) { + this.toggleNadirStatus(); + } else if (!this.nadirViewActive && nadirView) { + this.toggleNadirStatus(); + } } moveCamera(evtX: number, evtY: number, evtType: string) { @@ -120,8 +123,8 @@ export class NgmMinimap extends LitElementI18n { } // calculate left, bottom percentage from event const boundingRect = this.getBoundingClientRect(); - const x = evtType === 'mousemove' ? evtX + Math.sin(camera.heading) * 12 : evtX; - const y = evtType === 'mousemove' ? evtY - Math.cos(camera.heading) * 12 : evtY; + const x = evtType === 'mousemove' ? evtX + Math.sin(camera.heading) : evtX; + const y = evtType === 'mousemove' ? evtY - Math.cos(camera.heading) : evtY; const left = (x - boundingRect.left) / (boundingRect.right - boundingRect.left); const bottom = (y - boundingRect.bottom) / (boundingRect.top - boundingRect.bottom); @@ -131,13 +134,6 @@ export class NgmMinimap extends LitElementI18n { camera.position = Cartesian3.fromRadians(lon, lat, camera.positionCartographic.height); } - connectedCallback() { - draggable(this, { - allowFrom: '.drag-handle' - }); - super.connectedCallback(); - } - onIconPress(evt) { NavToolsStore.hideTargetPoint(); this.moveCamera(evt.x, evt.y, 'mousemove'); @@ -146,18 +142,12 @@ export class NgmMinimap extends LitElementI18n { render() { return html` -
- ${i18next.t('minimap_orientation')} -
this.dispatchEvent(new CustomEvent('close'))}>
-
-
- ${dragArea} `; } diff --git a/ui/src/elements/ngm-nadir-view.ts b/ui/src/elements/ngm-nadir-view.ts deleted file mode 100644 index 066ce2753..000000000 --- a/ui/src/elements/ngm-nadir-view.ts +++ /dev/null @@ -1,200 +0,0 @@ -import {customElement, property, state} from 'lit/decorators.js'; -import {html} from 'lit'; - -import {LitElementI18n} from '../i18n.js'; -import {updateHeightForCartesianPositions} from '../cesiumutils'; - -import {Math as CesiumMath, Cartesian3} from 'cesium'; -import {styleMap} from 'lit/directives/style-map.js'; -import type {Event, Viewer} from 'cesium'; -import {getTargetParam} from '../permalink'; -import NavToolsStore from '../store/navTools'; - -@customElement('ngm-nadir-view') -export class NgmNadirView extends LitElementI18n { - @property({type: Object}) - accessor viewer: Viewer | null = null; - @state() - accessor unlistenPostRender: Event.RemoveCallback | null = null; - @state() - accessor northActive = false; - @state() - accessor nadirActive = false; - @state() - accessor pitch: number | undefined = undefined; - @state() - accessor height: number | undefined = undefined; - @state() - accessor heading: number | undefined = undefined; - @state() - accessor position: Cartesian3 | undefined = undefined; - @state() - accessor currentHeading = 0; - - updated() { - if (this.viewer && !this.unlistenPostRender) { - this.unlistenPostRender = this.viewer.scene.postRender.addEventListener(() => this.updateFromCamera()); - } - } - - disconnectedCallback() { - if (this.unlistenPostRender) { - this.unlistenPostRender(); - } - super.disconnectedCallback(); - } - - get compassStyle() { - const angle = Math.round(this.currentHeading * 180 / Math.PI); - return { - 'background-color': this.northActive && (angle === 0 || angle === 360) ? '#FFFFFF' : 'var(--ngm-interaction)', - }; - } - - get nadirCameraStyle() { - const pitch = this.viewer!.scene.camera.pitch; - const isNadirPitch = CesiumMath.equalsEpsilon(pitch, -CesiumMath.PI_OVER_TWO, CesiumMath.EPSILON1); - return { - 'background-color': this.nadirActive && isNadirPitch ? '#FFFFFF' : 'var(--ngm-interaction)', - }; - } - - private toggleNadirStatus() { - this.nadirActive = !this.nadirActive; - this.dispatchEvent(new CustomEvent('nadirToggled')); - } - - - updateFromCamera() { - if (!this.viewer) return; - this.currentHeading = this.viewer.scene.camera.heading; - const nadirView = CesiumMath.equalsEpsilon(this.viewer.scene.camera.pitch, -CesiumMath.PI_OVER_TWO, CesiumMath.EPSILON1); - if (this.nadirActive && !nadirView) { - this.height = undefined; - this.toggleNadirStatus(); - } else if (!this.nadirActive && nadirView) { - this.toggleNadirStatus(); - } - const angle = Math.round(this.currentHeading * 180 / Math.PI); - if (this.northActive && !(angle === 0 || angle === 360)) { - this.height = undefined; - this.northActive = false; - } - } - - toggleNadir() { - if (!this.viewer) return; - const camera = this.viewer.scene.camera; - - if (this.nadirActive) { - this.viewer.camera.setView({ - destination: this.position, - orientation: { - heading: camera.heading, - pitch: this.pitch, - roll: 0.0 - } - }); - - if (this.height !== undefined) { - NavToolsStore.setCameraHeight(this.height); - } - this.height = undefined; - } else { - if (this.viewer.scene.cameraUnderground) { - this.height = camera.positionCartographic.height; - NavToolsStore.setCameraHeight(10000); - } - - const targetPoint = getTargetParam(); - if (targetPoint) { - this.position = Cartesian3.clone(camera.positionWC, new Cartesian3()); - updateHeightForCartesianPositions([targetPoint], camera.positionCartographic.height, undefined, true); - } - - this.pitch = camera.pitch; - if (!this.heading) this.heading = camera.heading; - - this.viewer.camera.setView({ - destination: targetPoint, - orientation: { - heading: camera.heading, - pitch: CesiumMath.toRadians(-90), - roll: 0.0 - } - }); - - this.toggleNadirStatus(); - } - } - - toggleNorth() { - if (!this.viewer) return; - const camera = this.viewer.scene.camera; - - if (this.northActive) { - this.viewer.camera.setView({ - destination: this.position, - orientation: { - heading: this.heading, - pitch: camera.pitch, - roll: 0.0 - } - }); - - if (this.height !== undefined) { - NavToolsStore.setCameraHeight(this.height); - } - this.height = undefined; - } else { - if (this.viewer.scene.cameraUnderground) { - this.height = camera.positionCartographic.height; - NavToolsStore.setCameraHeight(10000); - } - - if (!this.pitch) this.pitch = camera.pitch; - this.heading = camera.heading; - const targetPoint = getTargetParam(); - if (targetPoint) { - this.position = Cartesian3.clone(camera.positionWC, new Cartesian3()); - updateHeightForCartesianPositions([targetPoint], camera.positionCartographic.height, undefined, true); - } - this.viewer.camera.setView({ - destination: targetPoint, - orientation: { - heading: 0, - pitch: camera.pitch, - roll: 0.0 - } - }); - } - - this.northActive = !this.northActive; - } - - render() { - if (this.viewer) { - return html` -
-
-
-
-
-
-
-
-
-
-
-
- `; - } else { - return html``; - } - } - - createRenderRoot() { - // no shadow dom - return this; - } -} diff --git a/ui/src/ngm-app.ts b/ui/src/ngm-app.ts index 7ba464a09..a6c97514f 100644 --- a/ui/src/ngm-app.ts +++ b/ui/src/ngm-app.ts @@ -8,7 +8,6 @@ import './elements/ngm-auth'; import './elements/ngm-tracking-consent'; import './elements/ngm-cursor-information'; import './elements/ngm-nav-tools'; -import './elements/ngm-minimap'; import './elements/ngm-cam-configuration'; import './elements/ngm-height-slider'; import './toolbox/ngm-topo-profile-modal'; @@ -87,8 +86,6 @@ export class NgmApp extends LitElementI18n { @state() accessor slicer_: Slicer | undefined; @state() - accessor showMinimap = false; - @state() accessor showCamConfig = false; @state() accessor showMobileSearch = false; @@ -429,8 +426,6 @@ export class NgmApp extends LitElementI18n {
-
this.showMinimap = !this.showMinimap}>
@@ -467,9 +462,6 @@ export class NgmApp extends LitElementI18n { @togglecamconfig=${() => this.showCamConfig = !this.showCamConfig} @axisstate=${evt => this.showAxisOnMap = evt.detail.showAxis}> - this.showMinimap = false}> - Date: Thu, 4 Jul 2024 16:45:10 +0300 Subject: [PATCH 2/2] remove unused --- ui/src/elements/ngm-minimap.ts | 3 --- 1 file changed, 3 deletions(-) diff --git a/ui/src/elements/ngm-minimap.ts b/ui/src/elements/ngm-minimap.ts index 9590abf66..d748e7ab3 100644 --- a/ui/src/elements/ngm-minimap.ts +++ b/ui/src/elements/ngm-minimap.ts @@ -9,9 +9,6 @@ import type {Interactable} from '@interactjs/types'; import type {Event, Viewer} from 'cesium'; import {classMap} from 'lit/directives/class-map.js'; -// calculate difference between minimap extent and container -const width = CesiumMath.toRadians(MINIMAP_EXTENT[2] - MINIMAP_EXTENT[0]); -const height = CesiumMath.toRadians(MINIMAP_EXTENT[3] - MINIMAP_EXTENT[1]); const west = CesiumMath.toRadians(MINIMAP_EXTENT[0]); const south = CesiumMath.toRadians(MINIMAP_EXTENT[1]); const east = CesiumMath.toRadians(MINIMAP_EXTENT[2]);