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

package/src/navigation/overviewMap.js

@@ -13,6 +13,8 @@ import {
   deserializeLayer,
   maxZIndex,
   CesiumMap,
+  PanoramaMap,
+  PanoramaImageSelection,
 } from '@vcmap/core';
 import Point from 'ol/geom/Point.js';
 import Feature from 'ol/Feature.js';
@@ -20,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}
@@ -87,6 +64,12 @@ function getCameraIcon(color) {
   };
 }
 
+/**
+ * panorama behavior
+ * 1. in panorama, only allow clicking on a footprint
+ * 2. in other maps, if you click directly on a panorama footprint, switch maps and go to image (same as clicking on the footprint in the main map)
+ */
+
 /**
  * A 2D OverviewMap for cesium, openlayers and oblique map.
  * Baselayers are added to the OverviewMap using `showInOverviewMap` flag within the properties bag of a layer configuration.
@@ -104,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,
     });
 
     /**
@@ -198,14 +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(this._panoramaImageSelection);
 
     /**
      *
@@ -253,6 +244,8 @@ class OverviewMap {
             this._map.layerCollection.remove(clone);
             this._map.layerCollection.add(clone, idx);
           }
+        } else if (layer.className === 'PanoramaDatasetLayer') {
+          this._map.layerCollection.add(layer);
         }
       }),
       this._app.maps.layerCollection.removed.addEventListener((layer) => {
@@ -266,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;
   }
 
   /**
@@ -306,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
@@ -337,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();
@@ -348,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);
@@ -362,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;
   }
 
   /**
@@ -389,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),
@@ -553,6 +571,10 @@ class OverviewMap {
    * @private
    */
   _addNavigationListener(activeMap) {
+    if (activeMap instanceof PanoramaMap) {
+      return () => {};
+    }
+
     return this._mapClicked.addEventListener((e) => {
       const vp = activeMap.getViewpointSync();
       const newPosition = Projection.mercatorToWgs84(e.positionOrPixel);
@@ -661,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;

package/src/search/ResultsComponent.vue

@@ -64,8 +64,15 @@
         }));
       });
       const selectedRef = ref([]);
-      /** @type {import("@src/vcsUiApp.js").default} */
+      /** @type {import("../vcsUiApp.js").default} */
       const app = inject('vcsApp');
+
+      const selectedIndex = items.value.findIndex(
+        (r) => r.feature === app.featureInfo.selectedFeature,
+      );
+      if (selectedIndex !== -1) {
+        selectedRef.value = [selectedIndex];
+      }
       const selectedListener = app.featureInfo.featureChanged.addEventListener(
         (feature) => {
           if (selectedRef.value.length > 0) {

package/src/search/SearchComponent.vue

@@ -61,7 +61,7 @@
 </template>
 
 <script>
-  import { inject, onUnmounted, ref, computed } from 'vue';
+  import { inject, ref, computed } from 'vue';
   import { getLogger } from '@vcsuite/logger';
   import { v4 as uuid } from 'uuid';
   import { VSheet, VDivider, VIcon, VRow, VCol } from 'vuetify/components';
@@ -87,11 +87,11 @@
       VCol,
     },
     setup() {
-      /** @type {import("@src/vcsUiApp.js").default} */
+      /** @type {import("../vcsUiApp.js").default} */
       const app = inject('vcsApp');
       const searching = ref(false);
       const suggesting = ref('');
-      const query = ref(null);
+      const { query } = app.search;
       const suggestions = ref([]);
       const selectedSuggestion = ref(-1);
       const results = app.search.currentResults;
@@ -143,15 +143,6 @@
         showSelectedOnly.value = false;
       };
 
-      const clear = () => {
-        reset();
-        searching.value = false;
-        suggestions.value = [];
-        query.value = null;
-        queryPreSuggestion = '';
-        showSelectedOnly.value = false;
-      };
-
       const search = async () => {
         reset();
         searching.value = true;
@@ -167,10 +158,6 @@
         app.search.zoomToAll();
       };
 
-      onUnmounted(() => {
-        clear();
-      });
-
       const fontSize = useFontSize();
       const searchIconSize = computed(() => {
         return fontSize.value + 11;
@@ -182,7 +169,6 @@
         searching,
         results,
         reset,
-        clear,
         search,
         zoomToAll,
         searchIconSize,

package/src/search/SearchComponent.vue.d.ts

@@ -1,11 +1,10 @@
 declare const _default: import("vue").DefineComponent<{}, {
     showSelectedOnly: import("vue").Ref<boolean>;
     xs: import("vue").Ref<boolean>;
-    query: import("vue").Ref<null>;
+    query: import("vue").Ref<string>;
     searching: import("vue").Ref<boolean>;
     results: import("vue").Ref<import("./search.js", { with: { "resolution-mode": "import" } }).ResultItem[]>;
     reset: () => void;
-    clear: () => void;
     search: () => Promise<void>;
     zoomToAll: () => void;
     searchIconSize: import("vue").ComputedRef<number>;

package/src/search/search.d.ts

@@ -49,6 +49,11 @@ declare class Search extends IndexedCollection<SearchImpl> {
      * @private
      */
     private _app;
+    /**
+     * @type {import("vue").Ref<string>}
+     * @private
+     */
+    private _query;
     /**
      * An event triggered every time the currentResults array changes,
      * either by a new search providing the new results or
@@ -79,6 +84,10 @@ declare class Search extends IndexedCollection<SearchImpl> {
      * @type {import("@vcmap/core").VcsEvent<Array<ResultItem>>}
      */
     get resultsChanged(): VcsEvent<ResultItem[]>;
+    /**
+     * @type {import("vue").Ref<string>}
+     */
+    get query(): import("vue").Ref<string>;
     /**
      * @type {import("vue").Ref<Array<ResultItem>>}
      */
@@ -126,6 +135,10 @@ add(item: SearchImpl, owner: string | symbol, index?: number | undefined): void;
      * Clears the results and aborts running request
      */
     clearResults(): void;
+    /**
+     * Clears the search query, the results and aborts running request
+     */
+    clearSearch(): void;
 }
 import { IndexedCollection } from '@vcmap/core';
 import { VcsEvent } from '@vcmap/core';

package/src/search/search.js

@@ -9,7 +9,7 @@ import {
   VectorStyleItem,
   Viewpoint,
 } from '@vcmap/core';
-import { shallowRef } from 'vue';
+import { ref, shallowRef } from 'vue';
 import { check, oneOf } from '@vcsuite/check';
 import { Icon } from 'ol/style.js';
 import { getLogger } from '@vcsuite/logger';
@@ -113,6 +113,12 @@ class Search extends IndexedCollection {
      */
     this._app = app;
 
+    /**
+     * @type {import("vue").Ref<string>}
+     * @private
+     */
+    this._query = ref('');
+
     /**
      * An event triggered every time the currentResults array changes,
      * either by a new search providing the new results or
@@ -150,6 +156,12 @@ class Search extends IndexedCollection {
     return this._resultsChanged;
   }
 
+  /**
+   * @type {import("vue").Ref<string>}
+   */
+  get query() {
+    return this._query;
+  }
   /**
    * @type {import("vue").Ref<Array<ResultItem>>}
    */
@@ -309,6 +321,14 @@ class Search extends IndexedCollection {
     }
   }
 
+  /**
+   * Clears the search query, the results and aborts running request
+   */
+  clearSearch() {
+    this.clearResults();
+    this._query.value = '';
+  }
+
   /**
    * @inheritDoc
    */

package/src/uiConfig.d.ts

@@ -199,6 +199,10 @@ export type UiConfigObject = {
      * - open the legend window, if new layer has a config
      */
     openLegendOnAdd?: boolean | undefined;
+    /**
+     * - automatically close the legend window, if no layer has a config
+     */
+    autoCloseLegend?: boolean | undefined;
     /**
      * - can be used to apply a scale factor to the overviewMap
      */
@@ -287,6 +291,7 @@ export type UiConfigObject = {
  * @property {import("@vcmap/core").DisplayQualityOptions} [displayQuality] - the display quality settings
  * @property {import("./vuetifyPlugins/vuetify.js").VcsThemes} [vuetifyTheme] - Vuetify Theming, also see vuetify configuraton https://vuetifyjs.com/en/features/theme/
  * @property {boolean} [openLegendOnAdd] - open the legend window, if new layer has a config
+ * @property {boolean} [autoCloseLegend] - automatically close the legend window, if no layer has a config
  * @property {number} [overviewMapScaleFactor] - can be used to apply a scale factor to the overviewMap
  */
 /**
@@ -627,6 +632,10 @@ declare class UiConfig extends Collection<UiConfigurationItem<unknown>> {
          * - open the legend window, if new layer has a config
          */
         readonly openLegendOnAdd?: boolean | undefined;
+        /**
+         * - automatically close the legend window, if no layer has a config
+         */
+        readonly autoCloseLegend?: boolean | undefined;
         /**
          * - can be used to apply a scale factor to the overviewMap
          */

package/src/uiConfig.js

@@ -88,6 +88,7 @@ import { reactive, readonly, ref } from 'vue';
  * @property {import("@vcmap/core").DisplayQualityOptions} [displayQuality] - the display quality settings
  * @property {import("./vuetifyPlugins/vuetify.js").VcsThemes} [vuetifyTheme] - Vuetify Theming, also see vuetify configuraton https://vuetifyjs.com/en/features/theme/
  * @property {boolean} [openLegendOnAdd] - open the legend window, if new layer has a config
+ * @property {boolean} [autoCloseLegend] - automatically close the legend window, if no layer has a config
  * @property {number} [overviewMapScaleFactor] - can be used to apply a scale factor to the overviewMap
  */