@vcmap/ui 6.0.14 → 6.1.0-rc.2

package/src/manager/window/WindowManager.vue

@@ -1,6 +1,8 @@
 <template>
   <div
-    :class="{ 'win-container-mobile': addMobileClass }"
+    :class="{
+      'win-container-mobile': addMobileClass,
+    }"
     class="window-manager"
   >
     <WindowComponent
@@ -126,13 +128,14 @@
           // do not clip balloons to target
           return windowComponent?.position;
         }
-
         return getPositionAppliedOnTarget(
           windowComponent?.position,
           targetSize.value,
           getPosition(parentComponent),
         );
       };
+      const display = useDisplay();
+
       /**
        * @param {string} id
        * @returns {import("vue").ComputedRef<Object>}
@@ -140,12 +143,14 @@
       const getStyles = (id) =>
         computed(() => {
           const windowComponent = windowManager.get(id);
+          const zIndexOffset = Number(display.sm.value); // add z-Index Offset for Tablet View to keep the windows above the detached Icon
           return {
-            zIndex: windowComponent.zIndex.value,
+            zIndex: windowComponent.zIndex.value + zIndexOffset,
             ...getPosition(windowComponent),
             ...(windowComponent?.state?.styles || {}),
           };
         });
+
       /**
        * @param {string} id
        */
@@ -163,11 +168,15 @@
         const position = getPosition(windowComponent);
         moveWindow(id, translation, windowManager, targetSize.value, position);
       };
-      const display = useDisplay();
+
       const addMobileClass = computed(() => {
         return display.xs.value && componentIds.length > 0;
       });
 
+      const addTabletClass = computed(() => {
+        return display.sm.value && componentIds.length > 0;
+      });
+
       const setTargetSize = () => {
         targetSize.value = getTargetSize(app.maps.target);
       };
@@ -199,6 +208,7 @@
         bringWindowToTop,
         move,
         addMobileClass,
+        addTabletClass,
       };
     },
   };

package/src/manager/window/WindowManager.vue.d.ts

@@ -15,5 +15,6 @@ declare const _default: import("vue").DefineComponent<{}, {
         dy: number;
     }) => void;
     addMobileClass: import("vue").ComputedRef<boolean>;
+    addTabletClass: import("vue").ComputedRef<boolean>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 export default _default;

package/src/navigation/MapNavigation.vue

@@ -25,7 +25,7 @@
         ></OrientationToolsButton>
       </v-row>
     </template>
-    <template v-if="mdAndUp">
+    <template v-if="smAndUp">
       <v-row justify="center">
         <VcsZoomButton
           @zoom-out="zoomOut()"
@@ -33,9 +33,18 @@
           :disabled="movementApiCallsDisabled"
         />
       </v-row>
-      <v-row justify="center" v-if="is3D && mdAndUp">
+      <v-row justify="center" v-if="is3D && smAndUp">
         <TiltSlider v-model="tilt" :disabled="movementApiCallsDisabled" />
       </v-row>
+      <v-row v-if="!hideRotationButton && is3D" justify="center">
+        <OrientationToolsButton
+          :icon="rotationAction.icon"
+          :tooltip="rotationAction.title"
+          :color="rotationAction.active ? 'primary' : undefined"
+          @click.stop="rotationAction.callback($event)"
+          :disabled="rotationAction.disabled"
+        />
+      </v-row>
       <v-row justify="center">
         <OrientationToolsButton
           v-if="homeAction.icon"
@@ -60,7 +69,13 @@
 
 <script>
   import { computed, inject, ref, reactive, onUnmounted } from 'vue';
-  import { ObliqueMap, CesiumMap, ObliqueViewDirection } from '@vcmap/core';
+  import {
+    ObliqueMap,
+    CesiumMap,
+    ObliqueViewDirection,
+    startRotation,
+    rotationMapControlSymbol,
+  } from '@vcmap/core';
   import { VContainer, VRow } from 'vuetify/components';
   import { useDisplay } from 'vuetify';
   import { Math as CesiumMath } from '@vcmap-cesium/engine';
@@ -125,6 +140,59 @@
     return { action, destroy: () => listener?.() };
   }
 
+  /**
+   * @description Creates a rotate-around-center action to continuously rotate the viewpoint around the current map center at a specified speed. The action can be toggled on or off.
+   * @param {import("@src/vcsUiApp.js").default} app - The app instance containing the active map.
+   * @param {import("vue").ComputedRef<number>} defaultTimePerRotation - A computed property representing the time it takes to complete one rotation. The value should be a number representing seconds per rotation. Default is 60 seconds per rotation.
+   * @returns {{ action: import("vue").Reactive<VcsAction>, destroy: function():void }} - Returns the rotation action and a destroy method to stop the rotation listener if active.
+   */
+  function setupRotationButton(app, defaultTimePerRotation) {
+    let stopRotation;
+    const action = reactive({
+      name: 'rotate-action',
+      title: 'navigation.rotateButton',
+      icon: '$vcsView360',
+      active: false,
+      callback: async () => {
+        if (action.active) {
+          if (stopRotation) {
+            stopRotation();
+          } else {
+            app.maps.resetExclusiveMapControls();
+          }
+        } else {
+          stopRotation = await startRotation(
+            app,
+            undefined,
+            defaultTimePerRotation.value,
+          );
+        }
+      },
+    });
+
+    const rotationListener =
+      app.maps.exclusiveMapControlsChanged.addEventListener((eventData) => {
+        const { options, id } = eventData;
+        action.active =
+          id === rotationMapControlSymbol &&
+          options.keyEvents === true &&
+          options.apiCalls === true &&
+          options.pointerEvents === true;
+        action.disabled =
+          id !== rotationMapControlSymbol &&
+          options.keyEvents === true &&
+          options.apiCalls === true &&
+          options.pointerEvents === true;
+      });
+    return {
+      action,
+      destroy: () => {
+        stopRotation?.();
+        rotationListener();
+      },
+    };
+  }
+
   /**
    * @enum {string}
    */
@@ -306,6 +374,17 @@
 
       const { action: homeAction, destroy: homeDestroy } = setupHomeButton(app);
 
+      const defaultTimePerRotation = computed(() => {
+        return app.uiConfig.config?.timePerRotation;
+      });
+
+      const { action: rotationAction, destroy: rotationDestroy } =
+        setupRotationButton(app, defaultTimePerRotation);
+
+      const hideRotationButton = computed(() => {
+        return app.uiConfig.config?.hideRotationButton;
+      });
+
       onUnmounted(() => {
         if (overviewDestroy) {
           overviewDestroy();
@@ -316,16 +395,17 @@
         if (homeDestroy) {
           homeDestroy();
         }
+        rotationDestroy();
         postRenderHandler();
         overviewMapListeners.forEach((cb) => cb());
         removeMovementDisabledListener();
       });
 
-      const { xs, mdAndUp, mobile } = useDisplay();
+      const { xs, mobile, smAndUp } = useDisplay();
 
       return {
         xs,
-        mdAndUp,
+        smAndUp,
         mobile,
         viewMode,
         heading,
@@ -346,7 +426,9 @@
         locatorAction: reactive(locatorAction),
         showOverviewButton,
         showLocatorButton,
+        hideRotationButton,
         homeAction,
+        rotationAction,
         movementApiCallsDisabled,
       };
     },

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

@@ -1,6 +1,6 @@
 declare const _default: import("vue").DefineComponent<{}, {
     xs: import("vue").Ref<boolean>;
-    mdAndUp: import("vue").Ref<boolean>;
+    smAndUp: import("vue").Ref<boolean>;
     mobile: import("vue").ComputedRef<boolean>;
     viewMode: import("vue").Ref<string>;
     heading: import("vue").WritableComputedRef<number>;
@@ -79,7 +79,9 @@ declare const _default: import("vue").DefineComponent<{}, {
     };
     showOverviewButton: import("vue").Ref<boolean>;
     showLocatorButton: import("vue").Ref<boolean>;
+    hideRotationButton: import("vue").ComputedRef<boolean | undefined>;
     homeAction: any;
+    rotationAction: any;
     movementApiCallsDisabled: import("vue").Ref<boolean>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 export default _default;

package/src/navigation/overviewMap.d.ts

@@ -53,6 +53,12 @@ declare class OverviewMap {
      * @type {VectorStyleItem}
      */
     obliqueSelectedStyle: VectorStyleItem;
+    /**
+     * A factor by which to multiply the distance of the viewpoint of the overviewMap.
+     * @type {number}
+     * @private
+     */
+    private _scaleFactor;
     /**
      * A factor by witch to multiply the resolution when zooming to a single oblique image.
      * @type {number}

package/src/navigation/overviewMap.js

@@ -157,6 +157,13 @@ class OverviewMap {
       },
     });
 
+    /**
+     * A factor by which to multiply the distance of the viewpoint of the overviewMap.
+     * @type {number}
+     * @private
+     */
+    this._scaleFactor = 1;
+
     /**
      * A factor by witch to multiply the resolution when zooming to a single oblique image.
      * @type {number}
@@ -262,13 +269,17 @@ class OverviewMap {
       () => [
         this._app.uiConfig.config.hideMapNavigation,
         this._app.uiConfig.config.overviewMapActiveOnStartup,
+        this._app.uiConfig.config.overviewMapScaleFactor,
       ],
-      async ([hide, activeOnStartup]) => {
+      async ([hide, activeOnStartup, scaleFactor]) => {
         if (activeOnStartup && !hide && !this._active) {
           await this.activate();
         } else if (hide && this._active) {
           await this.deactivate();
         }
+        if (scaleFactor) {
+          this._scaleFactor = scaleFactor;
+        }
       },
     );
   }
@@ -482,6 +493,7 @@ class OverviewMap {
 
         const vp = Viewpoint.createViewpointFromExtent(extent);
         vp.distance /= this._obliqueResolutionFactor;
+        vp.distance *= this._scaleFactor;
         this._map.gotoViewpoint(vp);
       }
     }
@@ -632,6 +644,7 @@ class OverviewMap {
       viewpoint.groundPosition = null;
       viewpoint.distance = distance * 4;
     }
+    viewpoint.distance *= this._scaleFactor;
     this._map.gotoViewpoint(viewpoint);
   }
 

package/src/pluginHelper.d.ts

@@ -15,13 +15,6 @@ export function getPluginAssetUrl(app: import("@src/vcsUiApp.js").default, plugi
  * @returns {boolean}
  */
 export function isValidPackageName(name: string): boolean;
-/**
- * joins pathname and moduleUrl.
- * @param {string} pathname will remove filenames with extension or add a trailing slash if missing
- * @param {string} module relative url to the module
- * @returns {string}
- */
-export function getModuleUrl(pathname: string, module: string): string;
 /**
  * @param {string} name
  * @param {T} config

package/src/pluginHelper.js

@@ -82,23 +82,6 @@ export function isValidPackageName(name) {
   );
 }
 
-/**
- * joins pathname and moduleUrl.
- * @param {string} pathname will remove filenames with extension or add a trailing slash if missing
- * @param {string} module relative url to the module
- * @returns {string}
- */
-export function getModuleUrl(pathname, module) {
-  const pathNameParts = pathname.split('/');
-  if (pathNameParts.at(-1).includes('.')) {
-    pathNameParts.pop();
-  } else if (pathNameParts.at(-1) === '') {
-    pathNameParts.pop();
-  }
-  const pathName = pathNameParts.join('/');
-  return `${pathName}/${module}`;
-}
-
 /**
  * @param {string} name
  * @param {T} config
@@ -110,7 +93,10 @@ export async function loadPlugin(name, config) {
   let module = config.entry;
 
   if (!/^(https?:\/\/|\/)/.test(module)) {
-    module = `${window.location.origin}${getModuleUrl(window.location.pathname, module)}`;
+    module = `${window.location.origin}${window.location.pathname.replace(
+      /\/?$/,
+      '/',
+    )}${module}`;
   } else if (module === '_dev') {
     module = `/${name}.js`;
   } else if (module === 'http://localhost/_test') {

package/src/search/ResultItem.vue

@@ -10,9 +10,6 @@
         <span v-html="marked" />
       </v-list-item-title>
     </template>
-    <v-tooltip activator="parent">
-      {{ $st('search.select') }}
-    </v-tooltip>
     <template #append>
       <VcsActionButtonList
         v-if="hasActions"
@@ -26,12 +23,7 @@
 
 <script>
   import { computed } from 'vue';
-  import {
-    VIcon,
-    VListItem,
-    VListItemTitle,
-    VTooltip,
-  } from 'vuetify/components';
+  import { VIcon, VListItem, VListItemTitle } from 'vuetify/components';
   import DOMPurify from 'dompurify';
   import VcsActionButtonList from '../components/buttons/VcsActionButtonList.vue';
   import { markText } from './markText.js';
@@ -50,7 +42,6 @@
       VIcon,
       VListItem,
       VListItemTitle,
-      VTooltip,
     },
     props: {
       query: {

package/src/search/ResultsComponent.vue

@@ -7,7 +7,10 @@
       :item="item"
       :query="query"
       class="cursor-pointer"
-      :class="{ 'vcs-search-result-border': index < items.length - 1 }"
+      :class="{
+        'vcs-search-result-border': index < items.length - 1,
+        selected: index === selectedIndex,
+      }"
       v-for="(item, index) in items"
       :key="index"
       :value="item.value"
@@ -41,6 +44,10 @@
         type: Array,
         required: true,
       },
+      selectedIndex: {
+        type: Number,
+        default: -1,
+      },
     },
     setup(props) {
       const items = computed(() => {
@@ -100,4 +107,7 @@
     border-bottom: thin solid;
     border-color: rgb(var(--v-theme-base-lighten-2));
   }
+  .selected {
+    background-color: rgb(var(--v-theme-base-lighten-4));
+  }
 </style>

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

@@ -7,6 +7,10 @@ declare const _default: import("vue").DefineComponent<{
         type: ArrayConstructor;
         required: true;
     };
+    selectedIndex: {
+        type: NumberConstructor;
+        default: number;
+    };
 }, {
     items: import("vue").ComputedRef<any[]>;
     highlighted: import("vue").WritableComputedRef<never[]>;
@@ -19,7 +23,12 @@ declare const _default: import("vue").DefineComponent<{
         type: ArrayConstructor;
         required: true;
     };
+    selectedIndex: {
+        type: NumberConstructor;
+        default: number;
+    };
 }>>, {
     query: string;
+    selectedIndex: number;
 }, {}>;
 export default _default;

package/src/search/SearchComponent.vue

@@ -10,20 +10,33 @@
         :loading="searching"
         clearable
         :placeholder="$t('search.placeholder')"
-        v-model.trim="query"
+        v-model="query"
         @keydown.enter="search"
-        @input="reset"
+        @keydown.down.stop.prevent="selectSuggestion(1)"
+        @keydown.up.stop.prevent="selectSuggestion(-1)"
+        @input="onInput"
         @click:clear="reset"
       />
     </span>
-    <v-divider class="mt-1 base-darken-1" v-if="!!results.length" />
-    <ResultsComponent :query="query" :results="results" />
-    <v-divider v-if="!!results.length" />
-    <div v-if="!!results.length" class="d-flex px-2 pt-2 pb-1 justify-end">
-      <VcsFormButton @click="zoomToAll" variant="outlined">
-        {{ $t('search.zoomToAll') }}
-      </VcsFormButton>
-    </div>
+    <template v-if="results.length > 0">
+      <v-divider class="mt-1 base-darken-1" />
+      <ResultsComponent :query="query" :results="results" />
+      <v-divider />
+      <div class="d-flex px-2 pt-2 pb-1 justify-end">
+        <VcsFormButton @click="zoomToAll" variant="outlined">
+          {{ $t('search.zoomToAll') }}
+        </VcsFormButton>
+      </div>
+    </template>
+    <template v-else-if="suggestions.length > 0">
+      <v-divider class="mt-1 base-darken-1" />
+      <ResultsComponent
+        class="suggestions"
+        :results="suggestions"
+        :query="query"
+        :selected-index="selectedSuggestion"
+      />
+    </template>
   </v-sheet>
 </template>
 
@@ -31,14 +44,20 @@
   :deep(.v-field .v-field__outline *) {
     border-color: transparent !important;
   }
+
   .user-select-none {
     user-select: none;
   }
+
+  .suggestions {
+    font-style: italic;
+  }
 </style>
 
 <script>
   import { inject, onUnmounted, ref, computed } from 'vue';
   import { getLogger } from '@vcsuite/logger';
+  import { v4 as uuid } from 'uuid';
   import { VSheet, VDivider, VIcon } from 'vuetify/components';
   import VcsTextField from '../components/form-inputs-controls/VcsTextField.vue';
   import ResultsComponent from './ResultsComponent.vue';
@@ -62,26 +81,63 @@
       /** @type {import("@src/vcsUiApp.js").default} */
       const app = inject('vcsApp');
       const searching = ref(false);
+      const suggesting = ref('');
       const query = ref(null);
       const suggestions = ref([]);
+      const selectedSuggestion = ref(-1);
       const results = app.search.currentResults;
+      let queryPreSuggestion = '';
+
+      let suggestionTimeout;
+
+      const onInput = () => {
+        app.search.clearResults();
+        const trimmedInput = query.value?.trim() ?? '';
+        if (trimmedInput.length > 0) {
+          const requestId = uuid();
+          if (suggestionTimeout) {
+            clearTimeout(suggestionTimeout);
+          }
+          suggestionTimeout = setTimeout(() => {
+            suggesting.value = requestId;
+            queryPreSuggestion = trimmedInput;
+            selectedSuggestion.value = -1;
+            app.search.suggest(trimmedInput).then((s) => {
+              if (suggesting.value === requestId) {
+                suggestions.value = s;
+                suggesting.value = '';
+              }
+            });
+          }, 200);
+        } else {
+          selectedSuggestion.value = -1;
+          suggesting.value = '';
+          suggestions.value = [];
+          queryPreSuggestion = '';
+        }
+      };
 
       const reset = () => {
         app.search.clearResults();
+        selectedSuggestion.value = -1;
+        suggesting.value = '';
         suggestions.value = [];
+        queryPreSuggestion = '';
       };
 
       const clear = () => {
         reset();
         searching.value = false;
+        suggestions.value = [];
         query.value = null;
+        queryPreSuggestion = '';
       };
 
       const search = async () => {
         reset();
         searching.value = true;
         try {
-          await app.search.search(query.value);
+          await app.search.search(query.value.trim());
         } catch (e) {
           getLogger('Search').error(e);
         }
@@ -109,6 +165,27 @@
         search,
         zoomToAll,
         searchIconSize,
+        suggestions: computed(() =>
+          suggestions.value.map((s) => ({
+            title: s,
+            clicked() {
+              query.value = s;
+              search();
+            },
+          })),
+        ),
+        selectedSuggestion,
+        onInput,
+        selectSuggestion(value) {
+          const newSelection = selectedSuggestion.value + value;
+          if (newSelection > -1 && newSelection < suggestions.value?.length) {
+            selectedSuggestion.value = newSelection;
+            query.value = suggestions.value[newSelection];
+          } else {
+            selectedSuggestion.value = -1;
+            query.value = queryPreSuggestion;
+          }
+        },
       };
     },
   };

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

@@ -7,5 +7,12 @@ declare const _default: import("vue").DefineComponent<{}, {
     search: () => Promise<void>;
     zoomToAll: () => void;
     searchIconSize: import("vue").ComputedRef<number>;
+    suggestions: import("vue").ComputedRef<{
+        title: never;
+        clicked(): void;
+    }[]>;
+    selectedSuggestion: import("vue").Ref<number>;
+    onInput: () => void;
+    selectSuggestion(value: any): void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 export default _default;

package/src/search/markText.d.ts

@@ -4,7 +4,7 @@
  * @returns {string}
  */
 export function markText(text: string, query: string): string;
-export type Block = {
+export type BlockIndices = {
     start: number;
     end: number;
 };

package/src/search/markText.js

@@ -1,12 +1,12 @@
 /**
- * @typedef {Object} Block
+ * @typedef {Object} BlockIndices
  * @property {number} start
  * @property {number} end
  */
 
 /**
- * @param {Block[]} blocks
- * @param {Block} candidate
+ * @param {BlockIndices[]} blocks
+ * @param {BlockIndices} candidate
  * @returns {boolean}
  */
 function isBlockWithinBlocks(blocks, candidate) {
@@ -18,7 +18,7 @@ function isBlockWithinBlocks(blocks, candidate) {
 /**
  * @param {string} text
  * @param {RegExp} partial
- * @param {Block[]} blocks
+ * @param {BlockIndices[]} blocks
  */
 function addPartialBlocks(text, partial, blocks) {
   let match;

package/src/search/search.d.ts

@@ -25,6 +25,9 @@ export type SearchImpl = {
      */
     name: string;
     search: (arg0: string) => Promise<Array<ResultItem>>;
+    /**
+     * - optional, provides suggestions for autocomplete.
+     */
     suggest?: ((arg0: string) => Promise<Array<string>>) | undefined;
     /**
      * - should abort any ongoing requests to search or suggest without throwing an error

package/src/search/search.js

@@ -35,8 +35,8 @@ import { getViewpointFromFeature } from '../actions/actionHelper.js';
  * @typedef {Object} SearchImpl
  * @property {string} name Name of the implementation. Must be unique, best practice is to prefix with your plugin name to ensure uniqueness or use a uuid.
  * @property {function(string):Promise<Array<ResultItem>>} search
- * @property {function(string):Promise<Array<string>>} [suggest] // XXX currently not implemented in UI at Beta state
- * @property{function():void} abort - should abort any ongoing requests to search or suggest without throwing an error
+ * @property {function(string):Promise<Array<string>>} [suggest] - optional, provides suggestions for autocomplete.
+ * @property {function():void} abort - should abort any ongoing requests to search or suggest without throwing an error
  * @property {function():void} destroy
  */
 
@@ -257,6 +257,7 @@ class Search extends IndexedCollection {
    * @returns {Promise<Array<string>>}
    */
   async suggest(q) {
+    this.clearResults();
     const promises = await Promise.allSettled(
       [...this._array].map((impl) => {
         if (impl.suggest) {