@vcmap/ui 6.0.11 → 6.1.0-rc.1

package/src/init.d.ts

@@ -11,6 +11,12 @@ export default function initApp(mountTarget: string): Promise<import("@src/vcsUi
  * @returns {Promise<import("@src/vcsUiApp.js").default>}
  */
 export function initAppFromModule(mountTarget: string, configUrl?: string | undefined): Promise<import("@src/vcsUiApp.js").default>;
+/**
+ * Creates a module from a config object or a url
+ * @param {import("@vcmap/core").VcsModuleConfig|string} c
+ * @returns {Promise<import("@vcmap/core").VcsModule|null>}
+ */
+export function createModuleFromObjectOrUrl(c: import("@vcmap/core").VcsModuleConfig | string): Promise<import("@vcmap/core").VcsModule | null>;
 /**
  * Initializes app with a map config containing a set of config urls
  * @param {string} mountTarget

package/src/init.js

@@ -1,6 +1,7 @@
 import { createApp } from 'vue';
 import { check, is, maybe, oneOf, optional } from '@vcsuite/check';
 import { VcsModule } from '@vcmap/core';
+import { getLogger } from '@vcsuite/logger';
 import VcsAppComponentWrapper from './application/VcsAppWrapper.vue';
 import VcsUiApp from './vcsUiApp.js';
 import { createSafeI18n } from './vuePlugins/i18n.js';
@@ -76,6 +77,30 @@ export async function initAppFromModule(mountTarget, configUrl) {
   return app;
 }
 
+/**
+ * Creates a module from a config object or a url
+ * @param {import("@vcmap/core").VcsModuleConfig|string} c
+ * @returns {Promise<import("@vcmap/core").VcsModule|null>}
+ */
+export async function createModuleFromObjectOrUrl(c) {
+  if (is(c, Object)) {
+    if (!is(c, VcsUiAppConfigPattern)) {
+      getLogger('init').warning(
+        'Provided object is no valid VcsUiAppConfig',
+        c,
+      );
+    }
+    return new VcsModule(/** @type{import("@vcmap/core").VcsModuleConfig} */ c);
+  } else if (is(c, String)) {
+    const response = await fetch(c);
+    if (response.ok) {
+      const config = await response.json();
+      return new VcsModule(config);
+    }
+  }
+  return null;
+}
+
 /**
  * Initializes app with a map config containing a set of config urls
  * @param {string} mountTarget
@@ -95,20 +120,7 @@ export async function initAppFromAppConfig(mountTarget, appUrl) {
   check(appConfig.modules, [oneOf(String, Object)]);
 
   const modules = await Promise.all(
-    appConfig.modules.map(async (c) => {
-      if (is(c, VcsUiAppConfigPattern)) {
-        return new VcsModule(
-          /** @type{import("@vcmap/core").VcsModuleConfig} */ c,
-        );
-      } else if (is(c, String)) {
-        const response = await fetch(c);
-        if (response.ok) {
-          const config = await response.json();
-          return new VcsModule(config);
-        }
-      }
-      return null;
-    }),
+    appConfig.modules.map(createModuleFromObjectOrUrl),
   );
   // eslint-disable-next-line no-restricted-syntax
   for await (const module of modules) {

package/src/manager/window/WindowComponent.vue

@@ -27,7 +27,7 @@
     </div>
     <v-divider v-if="!windowState.hideHeader" />
     <div
-      class="overflow-x-hidden mb-1"
+      class="overflow-x-hidden overflow-y-auto mb-1 d-flex flex-grow-1 flex-column"
       :class="{
         rounded: !isDocked,
       }"

package/src/navigation/MapNavigation.vue

@@ -36,6 +36,15 @@
       <v-row justify="center" v-if="is3D && mdAndUp">
         <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,6 +395,7 @@
         if (homeDestroy) {
           homeDestroy();
         }
+        rotationDestroy();
         postRenderHandler();
         overviewMapListeners.forEach((cb) => cb());
         removeMovementDisabledListener();
@@ -346,7 +426,9 @@
         locatorAction: reactive(locatorAction),
         showOverviewButton,
         showLocatorButton,
+        hideRotationButton,
         homeAction,
+        rotationAction,
         movementApiCallsDisabled,
       };
     },

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

@@ -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/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/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) {

package/src/uiConfig.d.ts

@@ -15,6 +15,9 @@ export type SplashScreen = {
     name?: string | undefined;
     checkBoxText?: string | undefined;
     buttonTitle?: string | undefined;
+    secondaryButtonTitle?: string | undefined;
+    exitCallbackOptions?: import("./callback/vcsCallback.js").VcsCallbackOptions[] | undefined;
+    secondaryCallbackOptions?: import("./callback/vcsCallback.js").VcsCallbackOptions[] | undefined;
     menuEntry?: boolean | undefined;
     acceptInput?: boolean | undefined;
     position?: {
@@ -92,6 +95,14 @@ export type UiConfigObject = {
      * - an optional flag whether to show the Locator in the map.
      */
     showLocator?: boolean | undefined;
+    /**
+     * - an optional flag to hide the Rotator in the map.
+     */
+    hideRotationButton?: boolean | undefined;
+    /**
+     * - an optional flag that describes the time per rotation in seconds.
+     */
+    timePerRotation?: number | undefined;
     /**
      * - can be used to hide the default Header of the map
      */
@@ -178,6 +189,9 @@ export type UiConfigObject = {
  * @property {string} [name]
  * @property {string} [checkBoxText]
  * @property {string} [buttonTitle]
+ * @property {string} [secondaryButtonTitle]
+ * @property {Array<import("./callback/vcsCallback.js").VcsCallbackOptions>} [exitCallbackOptions]
+ * @property {Array<import("./callback/vcsCallback.js").VcsCallbackOptions>} [secondaryCallbackOptions]
  * @property {boolean} [menuEntry]
  * @property {boolean} [acceptInput]
  * @property {Object} [position]
@@ -211,6 +225,8 @@ export type UiConfigObject = {
  * @property {string} [favicon] - the favicon to set
  * @property {string} [headerTitle] - the title to display in the tab of the browser
  * @property {boolean} [showLocator] - an optional flag whether to show the Locator in the map.
+ * @property {boolean} [hideRotationButton] - an optional flag to hide the Rotator in the map.
+ * @property {number} [timePerRotation] - an optional flag that describes the time per rotation in seconds.
  * @property {boolean} [hideHeader] - can be used to hide the default Header of the map
  * @property {boolean} [hideSearch] - can be used to hide the integrated Search bar
  * @property {boolean} [hideMapButtons] - can be used to hide the default Map Buttons
@@ -345,6 +361,13 @@ declare class UiConfig extends Collection<UiConfigurationItem<unknown>> {
             readonly name?: string | undefined;
             readonly checkBoxText?: string | undefined;
             readonly buttonTitle?: string | undefined;
+            readonly secondaryButtonTitle?: string | undefined;
+            readonly exitCallbackOptions?: readonly {
+                readonly type: string;
+            }[] | undefined;
+            readonly secondaryCallbackOptions?: readonly {
+                readonly type: string;
+            }[] | undefined;
             readonly menuEntry?: boolean | undefined;
             readonly acceptInput?: boolean | undefined;
             readonly position?: {
@@ -417,6 +440,14 @@ declare class UiConfig extends Collection<UiConfigurationItem<unknown>> {
          * - an optional flag whether to show the Locator in the map.
          */
         readonly showLocator?: boolean | undefined;
+        /**
+         * - an optional flag to hide the Rotator in the map.
+         */
+        readonly hideRotationButton?: boolean | undefined;
+        /**
+         * - an optional flag that describes the time per rotation in seconds.
+         */
+        readonly timePerRotation?: number | undefined;
         /**
          * - can be used to hide the default Header of the map
          */

package/src/uiConfig.js

@@ -24,6 +24,9 @@ import { reactive, readonly } from 'vue';
  * @property {string} [name]
  * @property {string} [checkBoxText]
  * @property {string} [buttonTitle]
+ * @property {string} [secondaryButtonTitle]
+ * @property {Array<import("./callback/vcsCallback.js").VcsCallbackOptions>} [exitCallbackOptions]
+ * @property {Array<import("./callback/vcsCallback.js").VcsCallbackOptions>} [secondaryCallbackOptions]
  * @property {boolean} [menuEntry]
  * @property {boolean} [acceptInput]
  * @property {Object} [position]
@@ -59,6 +62,8 @@ import { reactive, readonly } from 'vue';
  * @property {string} [favicon] - the favicon to set
  * @property {string} [headerTitle] - the title to display in the tab of the browser
  * @property {boolean} [showLocator] - an optional flag whether to show the Locator in the map.
+ * @property {boolean} [hideRotationButton] - an optional flag to hide the Rotator in the map.
+ * @property {number} [timePerRotation] - an optional flag that describes the time per rotation in seconds.
  * @property {boolean} [hideHeader] - can be used to hide the default Header of the map
  * @property {boolean} [hideSearch] - can be used to hide the integrated Search bar
  * @property {boolean} [hideMapButtons] - can be used to hide the default Map Buttons

package/src/vuePlugins/vuetify.js

@@ -89,6 +89,7 @@ export function createVcsThemes(options, primaryColor) {
         'hover-opacity': 0.16,
         'high-emphasis-opacity': 1,
         'medium-emphasis-opacity': 1,
+        'list-item-subtitle-opacity': 0.6,
         'vcs-font-size': '13px',
         'vcs-font-family': 'Titillium Web',
         ...options?.light?.variables,
@@ -119,6 +120,7 @@ export function createVcsThemes(options, primaryColor) {
         'hover-opacity': 0.16,
         'high-emphasis-opacity': 1,
         'medium-emphasis-opacity': 1,
+        'list-item-subtitle-opacity': 0.6,
         'vcs-font-size': '13px',
         'vcs-font-family': 'Titillium Web',
         ...options?.dark?.variables,