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

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';
@@ -87,6 +89,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.
@@ -206,6 +214,9 @@ class OverviewMap {
     this._eventHandler = new EventHandler();
     const overviewMapClickedInteraction = new OverviewMapClickedInteraction();
     this._eventHandler.addPersistentInteraction(overviewMapClickedInteraction);
+    this._eventHandler.addPersistentInteraction(
+      new PanoramaImageSelection(this._app.maps),
+    );
 
     /**
      *
@@ -253,6 +264,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) => {
@@ -553,6 +566,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);

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
  */