@vcmap/ui 6.2.0-rc.2 → 6.2.0-rc.3

package/src/i18n/en.d.ts

@@ -293,6 +293,12 @@ declare namespace messages {
             let _export: string;
             export { _export as export };
             export let exportPath: string;
+            export namespace record {
+                let standard: string;
+                let high: string;
+                let inProgress: string;
+                let success: string;
+            }
         }
         export namespace splashScreen {
             let name_3: string;
@@ -378,6 +384,12 @@ declare namespace messages {
             export let modifyHeader: string;
             export let modifyInfo: string;
             export let styleHeader: string;
+            export namespace position {
+                let x_1: string;
+                export { x_1 as x };
+                export let y: string;
+                export let z: string;
+            }
             export namespace snapping {
                 let title_14: string;
                 export { title_14 as title };
@@ -457,9 +469,10 @@ declare namespace messages {
             let title_16: string;
             export { title_16 as title };
             export namespace level {
-                let low: string;
-                let medium: string;
-                let high: string;
+                export let low: string;
+                export let medium: string;
+                let high_1: string;
+                export { high_1 as high };
             }
         }
         export namespace theme {
@@ -565,10 +578,11 @@ declare namespace messages {
         }
     }
     export namespace notification {
-        let error: string;
-        let warning: string;
-        let information: string;
-        let success: string;
+        export let error: string;
+        export let warning: string;
+        export let information: string;
+        let success_1: string;
+        export { success_1 as success };
     }
     export namespace datePicker {
         let today: string;

package/src/i18n/en.js

@@ -175,6 +175,12 @@ const messages = {
       zoom: 'Zoom to extent',
       export: 'Export flight',
       exportPath: 'Export flight path',
+      record: {
+        standard: 'Record standard resolution flight',
+        high: 'Record high resolution flight',
+        inProgress: 'Recording in progress',
+        success: 'Recording successful, the download will start shortly',
+      },
     },
     splashScreen: {
       name: 'Splash Screen',
@@ -248,6 +254,11 @@ const messages = {
       modifyInfo:
         'For modifying the selected feature(s), click on one of the icons in the header above.',
       styleHeader: 'Style',
+      position: {
+        x: 'Position X',
+        y: 'Position Y',
+        z: 'Position Z',
+      },
       snapping: {
         title: 'Snapping',
         help: 'Snapping can be temporarily disabled by holding the CTRL key.',

package/src/navigation/MapNavigation.vue

@@ -66,10 +66,10 @@
       <v-row justify="center">
         <OrientationToolsButton
           v-if="showOverviewButton"
-          :icon="overviewAction.icon"
-          :tooltip="overviewAction.title"
-          :color="overviewAction.active ? 'primary' : undefined"
-          @click.stop="overviewAction.callback($event)"
+          icon="$vcsMap"
+          tooltip="navigation.overviewMapTooltip"
+          :color="overviewMapState ? 'primary' : undefined"
+          @click.stop="toggleOverviewMap"
         />
       </v-row>
     </template>
@@ -89,12 +89,8 @@
   import { VContainer, VRow } from 'vuetify/components';
   import { useDisplay } from 'vuetify';
   import { Math as CesiumMath } from '@vcmap-cesium/engine';
-  import { createOverviewMapAction } from '../actions/actionHelper.js';
   import { createLocatorAction } from './locatorHelper.js';
-  import {
-    getWindowComponentOptions,
-    overviewMapLayerSymbol,
-  } from './overviewMap.js';
+  import { overviewMapLayerSymbol } from './overviewMap.js';
   import VcsCompass from './VcsCompass.vue';
   import VcsZoomButton from './VcsZoomButton.vue';
   import TiltSlider from './TiltSlider.vue';
@@ -372,23 +368,16 @@
         },
       });
 
-      const { action: overviewAction, destroy: overviewDestroy } =
-        createOverviewMapAction(
-          app.overviewMap,
-          getWindowComponentOptions(),
-          app.windowManager,
-        );
       const showOverviewButton = ref(
         app.overviewMap.map.layerCollection.size > 0,
       );
-
-      // Locator
-      const { action: locatorAction, destroy: destroyLocator } =
-        createLocatorAction(app);
-
-      const showLocatorButton = computed(() => {
-        return app.uiConfig.config.showLocator ?? true;
-      });
+      const toggleOverviewMap = async () => {
+        if (app.overviewMap.currentState.value) {
+          app.overviewMap.deactivate();
+        } else {
+          await app.overviewMap.activate();
+        }
+      };
 
       const overviewMapListeners = [
         app.overviewMap.map.layerCollection.added.addEventListener(() => {
@@ -407,6 +396,14 @@
         }),
       ];
 
+      // Locator
+      const { action: locatorAction, destroy: destroyLocator } =
+        createLocatorAction(app);
+
+      const showLocatorButton = computed(() => {
+        return app.uiConfig.config.showLocator ?? true;
+      });
+
       const movementApiCallsDisabled = ref(
         !!app.maps.activeMap?.movementApiCallsDisabled,
       );
@@ -429,9 +426,6 @@
       });
 
       onUnmounted(() => {
-        if (overviewDestroy) {
-          overviewDestroy();
-        }
         if (destroyLocator) {
           destroyLocator();
         }
@@ -468,7 +462,6 @@
         zoomOut() {
           zoom(app.maps.activeMap, true);
         },
-        overviewAction: reactive(overviewAction),
         locatorAction: reactive(locatorAction),
         showOverviewButton,
         showLocatorButton,
@@ -477,6 +470,8 @@
         rotationAction,
         movementApiCallsDisabled,
         mobileLandscape,
+        overviewMapState: app.overviewMap.currentState,
+        toggleOverviewMap,
       };
     },
   };

package/src/navigation/MapNavigation.vue.d.ts

@@ -10,40 +10,6 @@ declare const _default: import("vue").DefineComponent<{}, {
     isPanorama: import("vue").ComputedRef<boolean>;
     zoomIn(): void;
     zoomOut(): void;
-    overviewAction: {
-        /**
-         * - reactive and translatable name rendered in overflow
-         */
-        name: string;
-        /**
-         * - reactive and translatable title rendered as tooltip
-         */
-        title?: string | undefined;
-        /**
-         * - icon rendered on the button. If no icon provided, item is rendered in overflow
-         */
-        icon?: string | undefined;
-        /**
-         * - callback function is triggered when the button is clicked
-         */
-        callback: import("../actions/actionHelper.js", { with: { "resolution-mode": "import" } }).ActionCallback;
-        /**
-         * - optional state of button. If active, button is rendered in primary color
-         */
-        active?: boolean | undefined;
-        /**
-         * - optional hasUpdate of button. If true, a yellow notification is rendered next to the button
-         */
-        hasUpdate?: boolean | undefined;
-        /**
-         * - optional background state. If active and background, button is rendered in primary color outlined
-         */
-        background?: boolean | undefined;
-        /**
-         * - optional flag to indicate that the action is disabled
-         */
-        disabled?: boolean | undefined;
-    };
     locatorAction: {
         /**
          * - reactive and translatable name rendered in overflow
@@ -85,5 +51,7 @@ declare const _default: import("vue").DefineComponent<{}, {
     rotationAction: any;
     movementApiCallsDisabled: import("vue").Ref<boolean>;
     mobileLandscape: import("vue").ComputedRef<boolean>;
+    overviewMapState: import("vue").ComputedRef<boolean>;
+    toggleOverviewMap: () => Promise<void>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 export default _default;

package/src/navigation/overviewMap.d.ts

@@ -1,8 +1,4 @@
-/**
- * @returns {import("../manager/window/windowManager.js").WindowComponentOptions}
- */
-export function getWindowComponentOptions(): import("../manager/window/windowManager.js").WindowComponentOptions;
-export const overviewMapWindowId: "overview-map-container";
+export const overviewMapContainerId: "overview-map-container";
 export const overviewMapLayerSymbol: unique symbol;
 export default OverviewMap;
 /**
@@ -26,7 +22,7 @@ declare class OverviewMap {
      */
     private _app;
     /**
-     * @type {boolean}
+     * @type {import("vue").Ref<boolean>}
      * @private
      */
     private _active;
@@ -91,6 +87,11 @@ declare class OverviewMap {
      * @type {number}
      */
     minimumHeight: number;
+    /**
+     * Handles image selection on panorama features
+     * @type {import("@vcmap/core").PanoramaImageSelection}
+     */
+    _panoramaImageSelection: import("@vcmap/core").PanoramaImageSelection;
     /**
      * Handles the events from the overview map.
      * @type {EventHandler}
@@ -123,7 +124,11 @@ declare class OverviewMap {
      * @private
      */
     private _collectionListeners;
-    _uiConfigWatcher: import("vue").WatchStopHandle;
+    _uiConfigWatchers: import("vue").WatchStopHandle[];
+    /**
+     * @type {import("vue").ComputedRef<boolean>}
+     */
+    currentState: import("vue").ComputedRef<boolean>;
     /**
      * @type {boolean}
      */
@@ -136,6 +141,10 @@ declare class OverviewMap {
      * @type {EventHandler|null}
      */
     get eventHandler(): EventHandler | null;
+    /**
+     * @type {import("@vcmap/core").PanoramaImageSelection}
+     */
+    get panoramaImageSelection(): PanoramaImageSelection;
     /**
      * An event which is triggered whenever the overview map is clicked.
      * Is passed a {@link InteractionEvent} as its only argument
@@ -158,7 +167,7 @@ declare class OverviewMap {
      */
     activate(): Promise<void>;
     /**
-     * closes window and clears all listeners
+     * clears all listeners
      */
     deactivate(): void;
     /**
@@ -211,3 +220,4 @@ declare class OverviewMap {
 import { VectorStyleItem } from '@vcmap/core';
 import { OpenlayersMap } from '@vcmap/core';
 import { EventHandler } from '@vcmap/core';
+import { PanoramaImageSelection } from '@vcmap/core';

package/src/navigation/overviewMap.js

@@ -22,41 +22,16 @@ import { Math as CesiumMath, Color, Cartographic } from '@vcmap-cesium/engine';
 import { unByKey } from 'ol/Observable.js';
 import VectorSource from 'ol/source/Vector.js';
 import { Icon } from 'ol/style.js';
-import { watch } from 'vue';
-import { WindowSlot } from '../manager/window/windowManager.js';
+import { computed, nextTick, ref, watch } from 'vue';
 import OverviewMapClickedInteraction from './overviewMapClickedInteraction.js';
 import {
   getDefaultPrimaryColor,
   getColorByKey,
 } from '../vuePlugins/vuetify.js';
-import { vcsAppSymbol } from '../pluginHelper.js';
-import VcsMap from '../application/VcsMap.vue';
 
-export const overviewMapWindowId = 'overview-map-container';
+export const overviewMapContainerId = 'overview-map-container';
 export const overviewMapLayerSymbol = Symbol('overviewMapLayerSymbol');
 
-/**
- * @returns {import("../manager/window/windowManager.js").WindowComponentOptions}
- */
-export function getWindowComponentOptions() {
-  return {
-    component: VcsMap,
-    props: { mapId: 'overview-map-container' },
-    slot: WindowSlot.DETACHED,
-    id: overviewMapWindowId,
-    state: {
-      hideHeader: true,
-      classes: ['overview-map'],
-    },
-    position: {
-      right: '100px',
-      bottom: '25px',
-      width: '300px',
-      height: '240px',
-    },
-  };
-}
-
 /**
  * @param {string} color
  * @returns {import("ol/style/Icon").Options}
@@ -112,17 +87,17 @@ class OverviewMap {
     this._app = app;
 
     /**
-     * @type {boolean}
+     * @type {import("vue").Ref<boolean>}
      * @private
      */
-    this._active = false;
+    this._active = ref(false);
 
     /**
      * @type {import("@vcmap/core").OpenlayersMap||null}
      * @private
      */
     this._map = new OpenlayersMap({
-      target: 'overview-map-container',
+      target: overviewMapContainerId,
     });
 
     /**
@@ -206,17 +181,22 @@ class OverviewMap {
      */
     this.minimumHeight = 150;
 
+    const overviewMapClickedInteraction = new OverviewMapClickedInteraction();
+
+    /**
+     * Handles image selection on panorama features
+     * @type {import("@vcmap/core").PanoramaImageSelection}
+     */
+    this._panoramaImageSelection = new PanoramaImageSelection(this._app.maps);
+
     /**
      * Handles the events from the overview map.
      * @type {EventHandler}
      * @private
      */
     this._eventHandler = new EventHandler();
-    const overviewMapClickedInteraction = new OverviewMapClickedInteraction();
     this._eventHandler.addPersistentInteraction(overviewMapClickedInteraction);
-    this._eventHandler.addPersistentInteraction(
-      new PanoramaImageSelection(this._app.maps),
-    );
+    this._eventHandler.addPersistentInteraction(this._panoramaImageSelection);
 
     /**
      *
@@ -279,30 +259,50 @@ class OverviewMap {
       ),
     ];
 
-    this._uiConfigWatcher = watch(
-      () => [
-        this._app.uiConfig.config.hideMapNavigation,
-        this._app.uiConfig.config.overviewMapActiveOnStartup,
-        this._app.uiConfig.config.overviewMapScaleFactor,
-      ],
-      async ([hide, activeOnStartup, scaleFactor]) => {
-        if (activeOnStartup && !hide && !this._active) {
-          await this.activate();
-        } else if (hide && this._active) {
-          this.deactivate();
-        }
-        if (scaleFactor) {
-          this._scaleFactor = scaleFactor;
-        }
-      },
-    );
+    this._uiConfigWatchers = [
+      watch(
+        () => this._app.uiConfig.config.hideMapNavigation,
+        (hide) => {
+          if (hide && this._active.value) {
+            this.deactivate();
+          }
+        },
+      ),
+      watch(
+        () => this._app.uiConfig.config.overviewMapActiveOnStartup,
+        async (activeOnStartup) => {
+          if (
+            activeOnStartup &&
+            !this._active.value &&
+            !this._app.uiConfig.config.hideMapNavigation
+          ) {
+            await this.activate();
+          } else if (!activeOnStartup && this._active.value) {
+            this.deactivate();
+          }
+        },
+      ),
+      watch(
+        () => this._app.uiConfig.config.overviewMapScaleFactor,
+        (scaleFactor) => {
+          if (scaleFactor) {
+            this._scaleFactor = scaleFactor;
+          }
+        },
+      ),
+    ];
+
+    /**
+     * @type {import("vue").ComputedRef<boolean>}
+     */
+    this.currentState = computed(() => this._active.value);
   }
 
   /**
    * @type {boolean}
    */
   get active() {
-    return this._active;
+    return this._active.value;
   }
 
   /**
@@ -319,6 +319,13 @@ class OverviewMap {
     return this._eventHandler;
   }
 
+  /**
+   * @type {import("@vcmap/core").PanoramaImageSelection}
+   */
+  get panoramaImageSelection() {
+    return this._panoramaImageSelection;
+  }
+
   /**
    * An event which is triggered whenever the overview map is clicked.
    * Is passed a {@link InteractionEvent} as its only argument
@@ -350,9 +357,9 @@ class OverviewMap {
    */
   async _activate() {
     await this._map.activate();
-    this._map.setTarget('overview-map-container');
+    this._map.setTarget(overviewMapContainerId);
     this._map.target?.firstChild?.classList?.add('overviewMapElement');
-    if (!this._active) {
+    if (!this._active.value) {
       this._mapActivatedListener = this._app.maps.mapActivated.addEventListener(
         () => {
           this._clearListeners();
@@ -361,7 +368,8 @@ class OverviewMap {
         },
       );
     }
-    this._active = true;
+    this._active.value = true;
+    await nextTick();
     const { activeMap } = this._app.maps;
     if (activeMap instanceof ObliqueMap) {
       await this._initializeForOblique(activeMap);
@@ -375,23 +383,20 @@ class OverviewMap {
    * @returns {Promise<void>}
    */
   async activate() {
-    if (!this._app.windowManager.has(overviewMapWindowId)) {
-      this._app.windowManager.add(getWindowComponentOptions(), vcsAppSymbol);
-    }
     await this._activate();
   }
 
   /**
-   * closes window and clears all listeners
+   * clears all listeners
    */
   deactivate() {
-    this._app.windowManager.remove(overviewMapWindowId);
+    this.map.deactivate();
     this._clearListeners();
     if (this._mapActivatedListener) {
       this._mapActivatedListener();
       this._mapActivatedListener = null;
     }
-    this._active = false;
+    this._active.value = false;
   }
 
   /**
@@ -402,8 +407,8 @@ class OverviewMap {
   async _initializePostRenderHandler(map) {
     if (!this._cameraIconLayer) {
       this._setupCameraIconLayer();
-      this._syncCameraViewAndFeature();
     }
+    this._syncCameraViewAndFeature();
     const navRemover = this._addNavigationListener(map);
     const prRemover = map.postRender.addEventListener(
       this._syncCameraViewAndFeature.bind(this),
@@ -678,7 +683,7 @@ class OverviewMap {
     this._clearListeners();
     this._collectionListeners.forEach((cb) => cb());
     this._collectionListeners = [];
-    this._uiConfigWatcher();
+    this._uiConfigWatchers.forEach((cb) => cb());
     if (this._mapPointerListener) {
       this._mapPointerListener();
       this._mapPointerListener = null;