@vcmap/ui 5.3.7 → 6.0.0-rc.10

package/src/application/VcsApp.vue

@@ -1,18 +1,18 @@
 <template>
-  <v-container class="fill-height pa-0" absolute fluid>
+  <v-container class="fill-height pa-0 vcs-app" absolute fluid>
     <VcsSplashScreen
       v-if="splashScreen"
-      v-model="splashScreenRef"
       :options="splashScreen"
-      :window-id="'splashScreen'"
+      v-model="splashScreenRef"
     ></VcsSplashScreen>
-    <VcsNavbar />
+    <VcsNavbar v-if="!config.hideHeader" />
     <VcsContainer :attribution-action="attributionAction" />
     <v-footer
+      v-if="showFooter"
+      app
       absolute
-      v-if="$vuetify.breakpoint.smAndUp"
-      min-height="22px"
-      class="d-flex gap-1 pa-0"
+      :height="footerHeight"
+      class="d-flex gc-1 pa-0"
     >
       <VcsPositionDisplay />
       <VcsTextPageFooter
@@ -25,8 +25,8 @@
         :text-page="dataProtection"
         :window-id="'dataProtectionWindow'"
       />
+      <v-spacer />
       <VcsAttributionsFooter
-        class="align-wrapper"
         :entries="attributionEntries"
         :attribution-action="attributionAction"
       />
@@ -35,28 +35,16 @@
 </template>
 
 <style scoped lang="scss">
-  ::v-deep .v-application--wrap {
+  :deep(.v-application--wrap) {
     min-height: fit-content;
   }
-  .align-wrapper {
-    position: absolute;
-    right: 0;
-    margin-right: 4px !important;
-  }
 </style>
 
 <script>
-  import {
-    computed,
-    getCurrentInstance,
-    onMounted,
-    onUnmounted,
-    provide,
-    ref,
-    watch,
-  } from 'vue';
+  import { computed, onMounted, onUnmounted, provide, watch, ref } from 'vue';
+  import { useDisplay } from 'vuetify';
   import { getVcsAppById, moduleIdSymbol } from '@vcmap/core';
-  import { VContainer, VFooter } from 'vuetify/lib';
+  import { VContainer, VFooter, VSpacer } from 'vuetify/components';
   import { getLogger } from '@vcsuite/logger';
   import VcsContainer from './VcsContainer.vue';
   import { ButtonLocation } from '../manager/navbarManager.js';
@@ -70,18 +58,53 @@
   import VcsSettings from './VcsSettings.vue';
   import { WindowSlot } from '../manager/window/windowManager.js';
   import CollectionManager from '../manager/collectionManager/CollectionManager.vue';
-  import { defaultPrimaryColor } from '../vuePlugins/vuetify.js';
+  import {
+    createVcsThemes,
+    setTheme,
+    useFontSize,
+  } from '../vuePlugins/vuetify.js';
   import VcsLegend from '../legend/VcsLegend.vue';
   import { getLegendEntries } from '../legend/legendHelper.js';
   import VcsAttributionsFooter from './VcsAttributionsFooter.vue';
   import VcsTextPageFooter from './VcsTextPageFooter.vue';
   import VcsSplashScreen from './VcsSplashScreen.vue';
-  import VcsCustomScreen from './VcsCustomScreen.vue';
+  import VcsTextPage from './VcsTextPage.vue';
   import VcsAttributions from './VcsAttributions.vue';
   import { getAttributions } from './attributionsHelper.js';
   import VcsDefaultLogoMobile from '../logo-mobile.svg';
   import VcsPositionDisplay from './VcsPositionDisplay.vue';
 
+  /**
+   * This helper checks the uiConfig and depending on the value will setup/teardown the providedSetupFunction
+   * @param {import("../vcsUiApp.js").default} app
+   * @param {(import("../vcsUiApp.js").default) => () => void} setupFunction
+   * @param {string} configOption parameter name of a uiConfig parameter, for example `app.uiConfig.config.hideContentTree`
+   * @returns {function():void} - cleanup function
+   */
+  export function setupUIConfigDependency(app, setupFunction, configOption) {
+    let destroyFunction = null;
+    function handler() {
+      if (!app.uiConfig.config[configOption] && !destroyFunction) {
+        destroyFunction = setupFunction(app);
+      } else if (app.uiConfig.config[configOption] && destroyFunction) {
+        destroyFunction();
+        destroyFunction = null;
+      }
+    }
+    handler();
+    const listeners = [
+      app.uiConfig.added.addEventListener(handler),
+      app.uiConfig.added.addEventListener(handler),
+    ];
+
+    return () => {
+      if (destroyFunction) {
+        destroyFunction();
+      }
+      listeners.forEach((cb) => cb());
+    };
+  }
+
   /**
    * You should call this function in the component providing the vcsUiApp to your
    * application in the components mounted hook. This will call VcsAppMounted on all plugins in the app
@@ -116,6 +139,7 @@
   /**
    * This helper function will add a map action button based on the default icons
    * to the apps NavbarManager. Furthermore, all maps on the app are synced for adding and removing.
+   * The buttons can be removed with the uiConfig hideMapButtons
    * @param {import("../vcsUiApp.js").default} app
    * @returns {function():void}
    */
@@ -224,6 +248,33 @@
       }
     };
 
+    let currentEntryLength = entries.length;
+    const watchEntries = watch(entries, (newValue) => {
+      if (
+        app.uiConfig.config.openLegendOnAdd &&
+        newValue.length > currentEntryLength &&
+        !app.windowManager.has('legend')
+      ) {
+        app.windowManager.add(
+          {
+            id: 'legend',
+            component: VcsLegend,
+            state: {
+              headerTitle: 'legend.title',
+              headerIcon: '$vcsLegend',
+              infoUrl: app.getHelpUrlCallback(
+                '/components/contentspace.html#id_legend',
+              ),
+            },
+            slot: WindowSlot.DYNAMIC_RIGHT,
+            props: { entries },
+          },
+          vcsAppSymbol,
+        );
+      }
+      currentEntryLength = newValue.length;
+    });
+
     /**
      * Handles legend button and window.
      * Adds a button, if legend definitions are available or removes legend otherwise.
@@ -238,8 +289,11 @@
       if (layersWithLegend < 1 && stylesWithLegend < 1) {
         app.navbarManager.remove('legend');
         app.windowManager.remove('legend');
+      } else {
+        addLegend();
       }
     };
+    handleLegend();
 
     const listeners = [
       app.layers.added.addEventListener((layer) => {
@@ -257,6 +311,9 @@
     ];
 
     return () => {
+      watchEntries();
+      app.navbarManager.remove('legend');
+      app.windowManager.remove('legend');
       destroy();
       legendDestroy();
       listeners.forEach((cb) => cb());
@@ -270,7 +327,7 @@
    */
   function setupCustomScreen(app) {
     function setupCustomScreenAction() {
-      const { customScreen } = app.uiConfig.config.value;
+      const { customScreen } = app.uiConfig.config;
       const { action: customScreenAction, destroy: customScreenDestroy } =
         createToggleAction(
           {
@@ -280,7 +337,7 @@
           },
           {
             id: 'customScreenId',
-            component: VcsCustomScreen,
+            component: VcsTextPage,
             state: {
               headerIcon: customScreen.icon,
               headerTitle: customScreen.name,
@@ -308,7 +365,7 @@
     }
     let customScreen;
     const stopCustomScreenWatcher = watch(
-      () => app.uiConfig.config.value.customScreen,
+      () => app.uiConfig.config.customScreen,
       (newCustomScreen) => {
         if (app.navbarManager.has('customScreenToggle')) {
           app.navbarManager.remove('customScreenToggle');
@@ -334,37 +391,51 @@
    */
   function setupSplashScreen(app, splashScreenRef) {
     function setupSplashScreenAction() {
-      const { splashScreen } = app.uiConfig.config.value;
-      const splashScreenAction = {
-        name: splashScreen.name || 'components.splashScreen.name',
-        icon: splashScreen.icon || 'mdi-alert-box',
-        title: splashScreen.title,
-        callback() {
-          splashScreenRef.value = !splashScreenRef.value;
-        },
-      };
-      app.navbarManager.add(
-        {
-          id: 'splashScreenToggle',
-          action: splashScreenAction,
-        },
-        vcsAppSymbol,
-        ButtonLocation.MENU,
-      );
+      const { splashScreen } = app.uiConfig.config;
+      if (splashScreen) {
+        splashScreenRef.value = true;
+      }
+      if (splashScreen && splashScreen.menuEntry) {
+        const splashScreenAction = {
+          name: splashScreen.name || 'components.splashScreen.name',
+          icon: splashScreen.icon || 'mdi-alert-box',
+          title: splashScreen.title,
+          callback() {
+            splashScreenRef.value = !splashScreenRef.value;
+          },
+        };
+        app.navbarManager.add(
+          {
+            id: 'splashScreenToggle',
+            action: splashScreenAction,
+          },
+          vcsAppSymbol,
+          ButtonLocation.MENU,
+        );
+      }
     }
-
-    return watch(
-      () => app.uiConfig.config.value.splashScreen,
-      (newSplashScreen) => {
+    setupSplashScreenAction();
+    const removeAddedListener = app.uiConfig.added.addEventListener((item) => {
+      if (item.name === 'splashScreen') {
         if (app.navbarManager.has('splashScreenToggle')) {
           app.navbarManager.remove('splashScreenToggle');
         }
-        if (newSplashScreen && newSplashScreen.menuEntry) {
-          setupSplashScreenAction();
+        setupSplashScreenAction();
+      }
+    });
+    const removeRemovedListener = app.uiConfig.removed.addEventListener(
+      (item) => {
+        if (item.name === 'splashScreen') {
+          if (app.navbarManager.has('splashScreenToggle')) {
+            app.navbarManager.remove('splashScreenToggle');
+          }
         }
       },
-      { immediate: true },
     );
+    return () => {
+      removeAddedListener();
+      removeRemovedListener();
+    };
   }
   /**
    * This helper function will add a settings action button to the apps NavbarManager MENU location.
@@ -372,6 +443,7 @@
    * @returns {function():void}
    */
   export function setupSettingsWindow(app) {
+    const settingsWindowId = 'vcsSettings';
     const { action: settingsAction, destroy: settingsDestroy } =
       createToggleAction(
         {
@@ -380,7 +452,7 @@
           title: 'settings.tooltip',
         },
         {
-          id: 'settingsId',
+          id: settingsWindowId,
           component: VcsSettings,
           state: { headerIcon: 'mdi-cog', headerTitle: 'settings.title' },
           slot: WindowSlot.DYNAMIC_RIGHT,
@@ -390,13 +462,15 @@
       );
     app.navbarManager.add(
       {
-        id: 'settingsToggle',
+        id: settingsWindowId,
         action: settingsAction,
       },
       vcsAppSymbol,
       ButtonLocation.MENU,
     );
     return () => {
+      app.navbarManager.remove(settingsWindowId);
+      app.windowManager.remove(settingsWindowId);
       settingsDestroy();
     };
   }
@@ -424,6 +498,11 @@
     );
   }
 
+  /**
+   * @type {string}
+   */
+  export const categoryManagerWindowId = 'category-manager';
+
   /**
    * This helper function will add a category manager button to the navbar. The category Manager
    * will only be shown if there is at least one category under management in the categoryManager.
@@ -431,15 +510,14 @@
    * @returns {function():void}
    */
   export function setupCategoryManagerWindow(app) {
-    const id = 'category-manager';
     const { action: categoryManagerAction, destroy } = createToggleAction(
       {
-        name: id,
+        name: categoryManagerWindowId,
         icon: '$vcsComponents',
         title: 'categoryManager.tooltip',
       },
       {
-        id,
+        id: categoryManagerWindowId,
         state: {
           headerTitle: 'categoryManager.title',
           headerIcon: '$vcsComponents',
@@ -465,9 +543,9 @@
      * @param {import("../manager/collectionManager/collectionComponentClass.js").default} collectionComponent
      */
     function handleAdded(collectionComponent) {
-      if (!app.navbarManager.has(id)) {
+      if (!app.navbarManager.has(categoryManagerWindowId)) {
         app.navbarManager.add(
-          { id, action: categoryManagerAction },
+          { id: categoryManagerWindowId, action: categoryManagerAction },
           vcsAppSymbol,
           ButtonLocation.CONTENT,
         );
@@ -476,7 +554,7 @@
         collectionComponent.id,
         collectionComponent.collection.added.addEventListener((item) => {
           if (
-            !app.windowManager.has(id) &&
+            !app.windowManager.has(categoryManagerWindowId) &&
             item[moduleIdSymbol] === app.dynamicModuleId
           ) {
             categoryManagerAction.hasUpdate = true;
@@ -495,8 +573,8 @@
       collectionListeners.delete(collectionComponent.id);
 
       if (!app.categoryManager.componentIds.length) {
-        app.windowManager.remove(id);
-        app.navbarManager.remove(id);
+        app.windowManager.remove(categoryManagerWindowId);
+        app.navbarManager.remove(categoryManagerWindowId);
         categoryManagerAction.hasUpdate = false;
       }
     }
@@ -513,13 +591,15 @@
 
     const windowListener = app.windowManager.added.addEventListener(
       (windowComponent) => {
-        if (windowComponent.id === id) {
+        if (windowComponent.id === categoryManagerWindowId) {
           categoryManagerAction.hasUpdate = false;
         }
       },
     );
 
     return () => {
+      app.windowManager.remove(categoryManagerWindowId);
+      app.navbarManager.remove(categoryManagerWindowId);
       destroy();
       addedListener();
       removedListener();
@@ -534,28 +614,25 @@
    * the theming keys. Returns a function to stop syncing.
    * Also adds a watcher to vuetify theme, which triggers themeChanged event on the VcsUiApp.
    * @param {import("../vcsUiApp.js").default} app
-   * @param {import("vuetify").Framework} vuetify
    * @returns {function():void} - call to stop syncing
    */
-  export function setupUiConfigTheming(app, vuetify) {
+  export function setupUiConfigTheming(app) {
+    function updateTheme(item) {
+      if (item.name === 'primaryColor' || item.name === 'vuetifyTheme') {
+        const mergedThemes = createVcsThemes(
+          app.uiConfig.getByKey('vuetifyTheme')?.value,
+          app.uiConfig.getByKey('primaryColor')?.value,
+        );
+        setTheme(app.vuetify, mergedThemes);
+        app.themeChanged.raiseEvent();
+      }
+    }
     const listeners = [
-      app.uiConfig.added.addEventListener((item) => {
-        if (item.name === 'primaryColor') {
-          vuetify.theme.themes.dark.primary = item.value?.dark || item.value;
-          vuetify.theme.themes.light.primary = item.value?.light || item.value;
-          app.themeChanged.raiseEvent();
-        }
-      }),
-      app.uiConfig.removed.addEventListener((item) => {
-        if (item.name === 'primaryColor') {
-          vuetify.theme.themes.dark.primary = defaultPrimaryColor.dark;
-          vuetify.theme.themes.light.primary = defaultPrimaryColor.light;
-          app.themeChanged.raiseEvent();
-        }
-      }),
+      app.uiConfig.added.addEventListener(updateTheme),
+      app.uiConfig.removed.addEventListener(updateTheme),
     ];
     const stopWatching = watch(
-      () => vuetify.theme.dark,
+      () => app.vuetify.theme.current.value.dark,
       () => app.themeChanged.raiseEvent(),
     );
 
@@ -650,6 +727,7 @@
       VcsNavbar,
       VContainer,
       VFooter,
+      VSpacer,
     },
     props: {
       appId: {
@@ -661,18 +739,31 @@
       /** @type {import("../vcsUiApp.js").default} */
       const app = getVcsAppById(props.appId);
       provide('vcsApp', app);
-      const mapNavbarListener = setupMapNavbar(app);
-      const legendDestroy = setupLegendWindow(app);
-      const settingsDestroy = setupSettingsWindow(app);
+      const mapNavbarListener = setupUIConfigDependency(
+        app,
+        setupMapNavbar,
+        'hideMapButtons',
+      );
+      const legendDestroy = setupUIConfigDependency(
+        app,
+        setupLegendWindow,
+        'hideLegend',
+      );
+      const settingsDestroy = setupUIConfigDependency(
+        app,
+        setupSettingsWindow,
+        'hideSettings',
+      );
       const stopCustomScreen = setupCustomScreen(app);
       const splashScreenRef = ref(true);
       const stopSplashScreen = setupSplashScreen(app, splashScreenRef);
       setupHelpButton(app);
-      const destroyComponentsWindow = setupCategoryManagerWindow(app);
-      const destroyThemingListener = setupUiConfigTheming(
+      const destroyMyWorkspace = setupUIConfigDependency(
         app,
-        getCurrentInstance().proxy.$vuetify,
+        setupCategoryManagerWindow,
+        'hideMyWorkspace',
       );
+      const destroyThemingListener = setupUiConfigTheming(app);
       const destroyDisplayQualityListener = setupUiConfigDisplayQuality(app);
       const { attributionEntries, attributionAction, destroyAttributions } =
         setupAttributions(app);
@@ -691,42 +782,53 @@
         settingsDestroy();
         stopCustomScreen();
         stopSplashScreen();
-        destroyComponentsWindow();
+        destroyMyWorkspace();
         destroyThemingListener();
-        destroyAttributions();
         destroyDisplayQualityListener();
+        destroyAttributions();
+      });
+
+      const { smAndUp } = useDisplay();
+      const fontSize = useFontSize();
+      const footerHeight = computed(() => {
+        return Math.ceil(fontSize.value * 1.65);
       });
 
       return {
+        config: app.uiConfig.config,
+        showFooter: computed(() => {
+          return !app.uiConfig.config.hideFooter && smAndUp.value;
+        }),
+        footerHeight,
         mobileLogo: computed(
           () =>
-            app.uiConfig.config.value.mobileLogo ??
-            app.uiConfig.config.value.logo ??
+            app.uiConfig.config.mobileLogo ??
+            app.uiConfig.config.logo ??
             VcsDefaultLogoMobile,
         ),
         imprint: computed(() => {
-          if (app.uiConfig.config.value.imprint) {
+          if (app.uiConfig.config.imprint) {
             return {
               title: 'footer.imprint.title',
               tooltip: 'footer.imprint.tooltip',
-              ...app.uiConfig.config.value.imprint,
+              ...app.uiConfig.config.imprint,
             };
           }
           return undefined;
         }),
         dataProtection: computed(() => {
-          if (app.uiConfig.config.value.dataProtection) {
+          if (app.uiConfig.config.dataProtection) {
             return {
               title: 'footer.dataProtection.title',
               tooltip: 'footer.dataProtection.tooltip',
-              ...app.uiConfig.config.value.dataProtection,
+              ...app.uiConfig.config.dataProtection,
             };
           }
           return undefined;
         }),
         splashScreenRef,
         splashScreen: computed(() => {
-          if (app.uiConfig.config.value.splashScreen) {
+          if (app.uiConfig.config.splashScreen) {
             return {
               title: 'components.splashScreen.name',
               tooltip: 'components.splashScreen.tooltip',
@@ -734,7 +836,7 @@
                 width: '800px',
                 height: '400px',
               },
-              ...app.uiConfig.config.value.splashScreen,
+              ...app.uiConfig.config.splashScreen,
             };
           }
           return undefined;