@vcmap/ui 5.0.0-rc.24 → 5.0.0-rc.26

package/src/manager/window/WindowManager.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="{ 'win-container-mobile': $vuetify.breakpoint.xs }">
+  <div :class="{ 'win-container-mobile': addMobileClass }">
     <WindowComponent
       v-for="id in componentIds"
       :key="id"
@@ -34,21 +34,28 @@
 
 <style scoped lang="scss">
   .win-container-mobile {
-    position: absolute;
+    position: fixed;
+    bottom: 56px;
+    left: 0;
+    right: 0;
     z-index: 2;
-    width: 100%;
+    display: contents;
   }
   .win-container-mobile > {
     div {
       width: 100% !important;
+      max-width: 100% !important;
       inset: unset !important;
       border-radius: 0 !important;
+      overflow: auto;
+      bottom: 0 !important;
+      max-height: 50% !important;
     }
   }
 </style>
 
 <script>
-  import { computed, inject, onUnmounted, ref } from 'vue';
+  import { computed, getCurrentInstance, inject, onUnmounted, ref } from 'vue';
 
   import WindowComponent from './WindowComponent.vue';
   import WindowComponentHeader from './WindowComponentHeader.vue';
@@ -125,6 +132,15 @@
         moveWindow(id, translation, windowManager, targetSize.value);
       };
 
+      const componentIdRef = ref(componentIds);
+
+      const addMobileClass = computed(() => {
+        return (
+          getCurrentInstance().proxy.$vuetify.breakpoint.xs &&
+          componentIdRef.value.length > 0
+        );
+      });
+
       const setTargetSize = () => {
         targetSize.value = getTargetSize(app.maps.target);
       };
@@ -138,7 +154,7 @@
       });
 
       return {
-        componentIds: ref(componentIds),
+        componentIds: componentIdRef,
         getComponent: (id) => windowManager.get(id).component,
         getHeaderComponent: (id) =>
           windowManager.get(id).headerComponent || WindowComponentHeader,
@@ -155,6 +171,7 @@
         },
         bringWindowToTop,
         move,
+        addMobileClass,
       };
     },
   };

package/src/navigation/mapNavigation.vue

@@ -25,6 +25,7 @@
       </v-row>
       <v-row justify="center">
         <OrientationToolsButton
+          v-if="showOverviewButton"
           :icon="overviewAction.icon"
           :tooltip="overviewAction.title"
           :color="overviewAction.active ? 'primary' : undefined"
@@ -43,7 +44,10 @@
     createGoToViewpointAction,
     createOverviewMapAction,
   } from '../actions/actionHelper.js';
-  import { getWindowComponentOptions } from './overviewMap.js';
+  import {
+    getWindowComponentOptions,
+    overviewMapLayerSymbol,
+  } from './overviewMap.js';
   import VcsCompass from './vcsCompass.vue';
   import VcsZoomButton from './vcsZoomButton.vue';
   import TiltSlider from './tiltSlider.vue';
@@ -205,19 +209,40 @@
         },
       });
 
-      const { action, destroy } = createOverviewMapAction(
-        app.overviewMap,
-        getWindowComponentOptions(),
-        app.windowManager,
+      const { action: overviewAction, destroy: overviewDestroy } =
+        createOverviewMapAction(
+          app.overviewMap,
+          getWindowComponentOptions(),
+          app.windowManager,
+        );
+      const showOverviewButton = ref(
+        app.overviewMap.map.layerCollection.size > 0,
       );
+      const overviewMapListeners = [
+        app.overviewMap.map.layerCollection.added.addEventListener(() => {
+          showOverviewButton.value = true;
+        }),
+        app.overviewMap.map.layerCollection.removed.addEventListener(() => {
+          if (
+            [...app.overviewMap.map.layerCollection].filter(
+              (l) => !l[overviewMapLayerSymbol],
+            ).length < 1 &&
+            app.overviewMap.active
+          ) {
+            app.overviewMap.deactivate();
+            showOverviewButton.value = false;
+          }
+        }),
+      ];
 
       const { action: homeAction, destroy: homeDestroy } = setupHomeButton(app);
 
       onUnmounted(() => {
-        if (destroy) {
-          destroy();
+        if (overviewDestroy) {
+          overviewDestroy();
         }
         postRenderHandler();
+        overviewMapListeners.forEach((cb) => cb());
         homeDestroy();
       });
 
@@ -237,7 +262,8 @@
         zoomOut() {
           zoom(app.maps.activeMap, true);
         },
-        overviewAction: reactive(action),
+        overviewAction: reactive(overviewAction),
+        showOverviewButton,
         homeAction,
       };
     },

package/src/navigation/overviewMap.js

@@ -27,6 +27,8 @@ import {
 import { vcsAppSymbol } from '../pluginHelper.js';
 import VcsMap from '../application/VcsMap.vue';
 
+export const overviewMapLayerSymbol = Symbol('overviewMapLayerSymbol');
+
 /**
  * @returns {WindowComponentOptions}
  */
@@ -331,7 +333,7 @@ class OverviewMap {
     const { activeMap } = this._app.maps;
     if (activeMap instanceof ObliqueMap) {
       await this._initializeForOblique(activeMap);
-    } else {
+    } else if (activeMap) {
       await this._initializePostRenderHandler(activeMap);
     }
   }
@@ -496,6 +498,7 @@ class OverviewMap {
       style: obliqueTileStyle,
       zIndex: 1,
     });
+    this._obliqueTileLayer[overviewMapLayerSymbol] = true;
 
     const obliqueImageStyle = new VectorStyleItem({});
     obliqueImageStyle.style = (feature) => {
@@ -509,10 +512,12 @@ class OverviewMap {
       projection: mercatorProjection.toJSON(),
       style: obliqueImageStyle,
     });
+    this._obliqueImageLayer[overviewMapLayerSymbol] = true;
     this._obliqueSelectedImageLayer = new VectorLayer({
       projection: mercatorProjection.toJSON(),
       style: this.obliqueSelectedStyle,
     });
+    this._obliqueSelectedImageLayer[overviewMapLayerSymbol] = true;
     this._map.layerCollection.add(this._obliqueImageLayer);
     this._map.layerCollection.add(this._obliqueSelectedImageLayer);
     this._map.layerCollection.add(this._obliqueTileLayer);
@@ -540,6 +545,7 @@ class OverviewMap {
         projection: mercatorProjection.toJSON(),
         zIndex: 50,
       });
+      this._cameraIconLayer[overviewMapLayerSymbol] = true;
       this._map.layerCollection.add(this._cameraIconLayer);
     }
   }

package/src/notifier/notifierComponent.vue

@@ -16,7 +16,6 @@
       <template #action="{ attrs }">
         <VcsButton
           icon="mdi-close"
-          small
           v-bind="attrs"
           @click="notification.open = false"
         />

package/src/pluginHelper.js

@@ -85,6 +85,11 @@ export async function loadPlugin(name, config) {
     // early escape to bypass module loading for testing, see VcsUiApp.spec.js
     return null;
   }
+  if (config.version) {
+    const moduleUrl = new URL(module, window.location.href);
+    moduleUrl.searchParams.set('version', config.version);
+    module = moduleUrl.toString();
+  }
 
   // if (!context.security.isTrustedUrl(module)) { XXX missing pipeline security
   //   getLogger().warning(`suppressed loading of insecure plugin ${module}`);

package/src/search/resultItem.vue

@@ -13,7 +13,6 @@
       :actions="item.actions"
       :block-overflow="true"
       :overflow-count="2"
-      small
       right
     />
   </div>

package/src/search/searchComponent.vue

@@ -17,13 +17,11 @@
     <v-divider class="mt-1 base darken-1" v-if="!!results.length" />
     <ResultsComponent :query="query" :results="results" />
     <v-divider v-if="!!results.length" />
-    <VcsButton
-      v-if="!!results.length"
-      class="d-flex pt-1 px-1 justify-end"
-      @click="zoomToAll"
-    >
-      {{ $t('search.zoomToAll') }}
-    </VcsButton>
+    <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>
   </v-sheet>
 </template>
 
@@ -51,11 +49,11 @@
   import { VSheet, VDivider, VIcon } from 'vuetify/lib';
   import VcsTextField from '../components/form-inputs-controls/VcsTextField.vue';
   import ResultsComponent from './resultsComponent.vue';
-  import VcsButton from '../components/buttons/VcsButton.vue';
+  import VcsFormButton from '../components/buttons/VcsFormButton.vue';
 
   export default {
     components: {
-      VcsButton,
+      VcsFormButton,
       ResultsComponent,
       VcsTextField,
       VSheet,

package/src/styles/_theming.scss

@@ -1,19 +1,3 @@
-:root {
-  --vcs-primary-logo: url('../assets/logo.svg');
-  --vcs-mobile-logo: url('../assets/logo-mobile.svg');
-}
-
-.company-logo {
-  background-image: var(--vcs-primary-logo);
-  height: 36px;
-  width: 151px;
-}
-.company-logo-mobile {
-  background-image: var(--vcs-mobile-logo);
-  height: 40px;
-  width: 70px;
-}
-
 .v-application .base {
   background-color: var(--v-base-base) !important;
   border-color: var(--v-base-base) !important;

package/src/styles/_typography.scss

@@ -1,4 +1,4 @@
-@use 'variables' as *;
+@import 'vcsFont.scss';
 
 .v-application {
   h1,
@@ -14,7 +14,7 @@
   .caption,
   .tooltip,
   p {
-    font-size: $font-size;
+    font-size: $vcs-font-size;
     &:not(.v-icon) {
       font-family: 'Titillium Web', sans-serif !important;
     }

package/src/styles/main.scss

@@ -7,6 +7,14 @@
 @import './vcsFont';
 @import './vcsGrid';
 
+/* latin-ext */
+@font-face {
+  font-family: 'Titillium Web';
+  font-style: normal;
+  font-weight: 400;
+  src: url(./assets/font/TitilliumWeb-Regular.woff2) format('woff2');
+}
+
 html.vcs-ui {
   overflow-x: hidden !important;
   overflow-y: hidden !important;

package/src/styles/vcsFont.scss

@@ -1,23 +1,2 @@
-/* latin-ext */
-@font-face {
-  font-family: 'Titillium Web';
-  font-style: normal;
-  font-weight: 400;
-  src: url(../assets/font/TitilliumWeb-Regular.woff2) format('woff2');
-  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
-    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Titillium Web';
-  font-style: normal;
-  font-weight: 400;
-  src: url(../assets/font/TitilliumWeb-Regular.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
-    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
-    U+FEFF, U+FFFD;
-}
-
-// fonts
+// fontSize
 $vcs-font-size: 13px;
-// header

package/src/vcsUiApp.js

@@ -10,6 +10,7 @@ import {
   Viewpoint,
   volatileModuleId,
   VcsEvent,
+  getObjectFromClassRegistry,
 } from '@vcmap/core';
 import { getLogger as getLoggerByName } from '@vcsuite/logger';
 import {
@@ -27,14 +28,19 @@ import { createContentTreeCollection } from './contentTree/contentTreeCollection
 import { contentTreeClassRegistry } from './contentTree/contentTreeItem.js';
 import OverviewMap from './navigation/overviewMap.js';
 import I18nCollection from './i18n/i18nCollection.js';
-import CategoryManager from './manager/categoryManager/categoryManager.js';
+import CategoryManager from './manager/collectionManager/categoryManager.js';
 import ContextMenuManager from './manager/contextMenu/contextMenuManager.js';
-import FeatureInfo from './featureInfo/featureInfo.js';
+import FeatureInfo, {
+  featureInfoClassRegistry,
+} from './featureInfo/featureInfo.js';
 import UiConfig from './uiConfig.js';
 import { createEmptyState, getStateFromURL } from './state.js';
 import { version } from '../package.json';
 import Search from './search/search.js';
 import Notifier from './notifier/notifier.js';
+import AbstractFeatureInfoView from './featureInfo/abstractFeatureInfoView.js';
+import { createVueI18n, setupI18n } from './vuePlugins/i18n.js';
+import { callbackClassRegistry } from './callback/vcsCallback.js';
 
 /**
  * @typedef {import("@vcmap/core").VcsModuleConfig} VcsUiModuleConfig
@@ -176,7 +182,15 @@ class VcsUiApp extends VcsApp {
     ];
 
     /**
-     * @type {OverrideClassRegistry<ContentTreeItem>}
+     * @type {OverrideClassRegistry<VcsCallbackItem>}
+     * @private
+     */
+    this._callbackClassRegistry = new OverrideClassRegistry(
+      callbackClassRegistry,
+    );
+
+    /**
+     * @type {import("@vcmap/core").OverrideClassRegistry<ContentTreeItem>}
      * @private
      */
     this._contentTreeClassRegistry = new OverrideClassRegistry(
@@ -212,10 +226,24 @@ class VcsUiApp extends VcsApp {
      */
     this._uiConfig = new UiConfig(() => this.dynamicModuleId);
     /**
-     * @type {FeatureInfo}
+     * @type {import("@vcmap/core").OverrideClassRegistry<AbstractFeatureInfoView>}
+     * @private
+     */
+    this._featureInfoClassRegistry = new OverrideClassRegistry(
+      featureInfoClassRegistry,
+    );
+    /**
+     * @type {import("@vcmap/core").OverrideCollection<AbstractFeatureInfoView>}
      * @private
      */
-    this._featureInfo = new FeatureInfo(this);
+    this._featureInfo = makeOverrideCollection(
+      new FeatureInfo(this),
+      () => this.dynamicModuleId,
+      null,
+      (config) =>
+        getObjectFromClassRegistry(this._featureInfoClassRegistry, config),
+      AbstractFeatureInfoView,
+    );
 
     /**
      * @type {OverviewMap}
@@ -229,6 +257,19 @@ class VcsUiApp extends VcsApp {
      */
     this._i18n = new I18nCollection(() => this.dynamicModuleId);
 
+    /**
+     *
+     * @type {import("vue-i18n").VueI18n}
+     * @private
+     */
+    this._vueI18n = createVueI18n();
+    /**
+     *
+     * @type {function(): void}
+     * @private
+     */
+    this._vueI18nDestroy = setupI18n(this);
+
     /**
      * @type {CategoryManager}
      * @private
@@ -283,13 +324,29 @@ class VcsUiApp extends VcsApp {
   }
 
   /**
-   * @type {OverrideClassRegistry<ContentTreeItem>}
+   * @type {import("@vcmap/core").OverrideClassRegistry<VcsCallback>}
+   * @readonly
+   */
+  get callbackClassRegistry() {
+    return this._callbackClassRegistry;
+  }
+
+  /**
+   * @type {import("@vcmap/core").OverrideClassRegistry<ContentTreeItem>}
    * @readonly
    */
   get contentTreeClassRegistry() {
     return this._contentTreeClassRegistry;
   }
 
+  /**
+   * @type {import("@vcmap/core").OverrideClassRegistry<AbstractFeatureInfoView>}
+   * @readonly
+   */
+  get featureInfoClassRegistry() {
+    return this._featureInfoClassRegistry;
+  }
+
   /**
    * @returns {ToolboxManager}
    * @readonly
@@ -338,6 +395,14 @@ class VcsUiApp extends VcsApp {
     return this._i18n;
   }
 
+  /**
+   * @returns {import("vue-i18n").VueI18n}
+   * @readonly
+   */
+  get vueI18n() {
+    return this._vueI18n;
+  }
+
   /**
    * @returns {CategoryManager}
    * @readonly
@@ -483,10 +548,7 @@ class VcsUiApp extends VcsApp {
     await super._parseModule(module);
     await this._contentTree.parseItems(config.contentTree, module._id);
     await this._uiConfig.parseItems(config.uiConfig, module._id);
-    await this._featureInfo.collection.parseItems(
-      config.featureInfo,
-      module._id,
-    );
+    await this._featureInfo.parseItems(config.featureInfo, module._id);
   }
 
   /**
@@ -553,7 +615,7 @@ class VcsUiApp extends VcsApp {
   serializeModule(moduleId) {
     const config = super.serializeModule(moduleId);
     config.uiConfig = this._uiConfig.serializeModule(moduleId);
-    config.featureInfo = this._featureInfo.collection.serializeModule(moduleId);
+    config.featureInfo = this._featureInfo.serializeModule(moduleId);
     config.i18n = this._i18n.serializeModule(moduleId);
     config.plugins = this._plugins.serializeModule(moduleId);
     return config;
@@ -570,7 +632,7 @@ class VcsUiApp extends VcsApp {
       this._plugins.removeModule(moduleId),
       this._i18n.removeModule(moduleId),
       this._contentTree.removeModule(moduleId),
-      this._featureInfo.collection.removeModule(moduleId),
+      this._featureInfo.removeModule(moduleId),
       this._uiConfig.removeModule(moduleId),
     ]);
   }
@@ -593,7 +655,9 @@ class VcsUiApp extends VcsApp {
     destroyCollection(this._contentTree);
     destroyCollection(this._i18n);
     destroyCollection(this._search);
+    this._vueI18nDestroy();
     this._contentTreeClassRegistry.destroy();
+    this._featureInfoClassRegistry.destroy();
     this._featureInfo.destroy();
     this._uiConfig.destroy();
     super.destroy();

package/src/vuePlugins/i18n.js

@@ -9,10 +9,10 @@ Vue.use(VueI18n);
 
 /**
  * creates a new VueI18n Instance.
- * @returns {VueI18n}
+ * @returns {import("vue-i18n").VueI18n}
  */
 export function createVueI18n() {
-  const i18n = new VueI18n({
+  return new VueI18n({
     locale: 'en',
     silentFallbackWarn: true,
     silentTranslationWarn: true,
@@ -22,44 +22,43 @@ export function createVueI18n() {
     },
     postTranslation: (val, key) => (typeof val === 'string' ? val : key),
   });
-  return i18n;
 }
 
 /**
- * sets the messages to the given I18n Instance;
- * @param {Object} messages
- * @param {VueI18n} i18n
+ * sets the messages to the app's I18n Instance;
+ * @param {VcsUiApp} app
  */
-function setI18n(messages, i18n) {
-  i18n.availableLocales.forEach((locale) => {
-    i18n.setLocaleMessage(locale, undefined);
-  });
-  Object.entries(messages).forEach(([locale, localeMessages]) => {
-    i18n.setLocaleMessage(locale, localeMessages);
+function setI18nMessages(app) {
+  app.vueI18n.availableLocales.forEach((locale) => {
+    app.vueI18n.setLocaleMessage(locale, undefined);
   });
+  Object.entries(app.i18n.getMergedMessages()).forEach(
+    ([locale, localeMessages]) => {
+      app.vueI18n.setLocaleMessage(locale, localeMessages);
+    },
+  );
 }
 
 /**
  * @param {VcsUiApp} app
- * @param {VueI18n} i18n
  * @returns {function():void} returns a destroy function
  */
-export function setupI18n(app, i18n) {
+export function setupI18n(app) {
   const defaultMessages = { name: 'default', en, de };
   defaultMessages[i18nPluginSymbol] = vcsAppSymbol;
   app.i18n.add(defaultMessages);
 
-  setI18n(app.i18n.getMergedMessages(), i18n);
-  i18n.locale = app.locale;
+  setI18nMessages(app);
+  app.vueI18n.locale = app.locale;
   const destroyFunctions = [
     app.i18n.added.addEventListener(() => {
-      setI18n(app.i18n.getMergedMessages(), i18n);
+      setI18nMessages(app);
     }),
     app.i18n.removed.addEventListener(() => {
-      setI18n(app.i18n.getMergedMessages(), i18n);
+      setI18nMessages(app);
     }),
     app.localeChanged.addEventListener((locale) => {
-      i18n.locale = locale;
+      app.vueI18n.locale = locale;
     }),
   ];
   return function tearDownI18nSetup() {

package/src/vuePlugins/vuetify.js

@@ -1,4 +1,3 @@
-import '@mdi/font/css/materialdesignicons.css';
 import Vue from 'vue';
 import Vuetify from 'vuetify/lib';
 import { genVariations } from 'vuetify/lib/services/theme/utils.js';