@vcmap/ui 5.0.0-rc.9 → 5.0.1

package/src/actions/stateRefAction.js

@@ -1,4 +1,4 @@
-import { watch } from '@vue/composition-api';
+import { watch } from 'vue';
 import { check } from '@vcsuite/check';
 
 /**
@@ -22,7 +22,7 @@ const stateIconMap = {
 /**
  * Creates an action
  * @param {string} name
- * @param {import("@vue/composition-api").Ref<StateActionState>} stateRef
+ * @param {import("vue").Ref<StateActionState>} stateRef
  * @param {function():void} callback
  * @returns {{ action: VcsAction, destroy: function():void }}
  */
@@ -34,7 +34,6 @@ export function createStateRefAction(name, stateRef, callback) {
   const currentState = stateRef.value;
   const action = {
     name,
-    title: 'Activate', // XXX make reactive i18n key based on state
     icon: stateIconMap[currentState],
     callback,
   };

package/src/application/VcsApp.vue

@@ -1,49 +1,535 @@
 <template>
-  <v-app class="h-full" absolute>
-    <Navbar />
-    <v-main class="fill-height absolute">
-      <div v-if="$vuetify.breakpoint.smAndDown" class="company-logo-mobile" />
+  <v-container class="fill-height pa-0" absolute fluid>
+    <VcsNavbar />
+    <v-container
+      class="vcs-main pa-0"
+      :class="{ 'vcs-main-xs': $vuetify.breakpoint.xs }"
+      fluid
+      absolute
+    >
+      <template v-if="$vuetify.breakpoint.xs">
+        <img
+          v-if="mobileLogo"
+          :src="mobileLogo"
+          alt="Logo"
+          draggable="false"
+          class="mobile-logo"
+        />
+      </template>
+      <VcsButton
+        v-if="!$vuetify.breakpoint.smAndUp && $vuetify.breakpoint.mobile"
+        :key="attributionAction.name"
+        :tooltip="attributionAction.title"
+        :icon="attributionAction.icon"
+        :active="attributionAction.active"
+        @click.stop="attributionAction.callback($event)"
+        class="z-index-1 mobile-attribution-btn"
+      />
       <VcsMap :map-id="mapId" />
-      <MapNavigation />
+      <MapNavigation v-if="showMapNavigation" />
       <ToolboxManagerComponent />
       <WindowManagerComponent />
-    </v-main>
-    <v-footer app absolute v-if="$vuetify.breakpoint.mdAndUp">
-      footer
+      <NotifierComponent />
+    </v-container>
+    <v-footer absolute v-if="$vuetify.breakpoint.smAndUp" min-height="22px">
+      <VcsAttributionsFooter
+        :entries="attributionEntries"
+        :attribution-action="attributionAction"
+      />
     </v-footer>
-  </v-app>
+  </v-container>
 </template>
 
 <style scoped lang="scss">
-::v-deep .v-application--wrap {
-  min-height: fit-content;
-}
+  ::v-deep .v-application--wrap {
+    min-height: fit-content;
+  }
+  .vcs-main {
+    position: absolute;
+    top: 48px;
+    left: 0;
+    right: 0;
+    bottom: 22px;
+  }
+
+  .vcs-main-xs {
+    top: 0;
+    bottom: 56px;
+  }
+
+  .mobile-logo {
+    max-height: 40px;
+    max-width: 70px;
+    position: absolute;
+    top: 1rem;
+    left: 1rem;
+    z-index: 1;
+  }
+
+  .mobile-attribution-btn {
+    position: fixed;
+    right: 2px;
+    bottom: 36px;
+  }
 </style>
 
 <script>
   import { v4 as uuid } from 'uuid';
   import {
+    computed,
+    getCurrentInstance,
     onMounted,
     onUnmounted,
     provide,
-  } from '@vue/composition-api';
+    ref,
+    watch,
+  } from 'vue';
   import { getVcsAppById } from '@vcmap/core';
+  import { VContainer, VFooter } from 'vuetify/lib';
+  import { getLogger } from '@vcsuite/logger';
   import WindowManagerComponent from '../manager/window/WindowManager.vue';
   import ToolboxManagerComponent from '../manager/toolbox/ToolboxManager.vue';
   import { ButtonLocation } from '../manager/navbarManager.js';
   import { vcsAppSymbol } from '../pluginHelper.js';
   import VcsMap from './VcsMap.vue';
-  import Navbar from './Navbar.vue';
-  import { createMapButtonAction } from '../actions/actionHelper.js';
-  import MapNavigation from '../navigation/mapNavigation.vue';
+  import VcsNavbar from './VcsNavbar.vue';
+  import {
+    createLinkAction,
+    createMapButtonAction,
+    createToggleAction,
+  } from '../actions/actionHelper.js';
+  import MapNavigation from '../navigation/MapNavigation.vue';
+  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 VcsLegend from '../legend/VcsLegend.vue';
+  import { getLegendEntries } from '../legend/legendHelper.js';
+  import VcsAttributionsFooter from './VcsAttributionsFooter.vue';
+  import VcsButton from '../components/buttons/VcsButton.vue';
+  import VcsAttributions from './VcsAttributions.vue';
+  import { getAttributions } from './attributionsHelper.js';
+  import NotifierComponent from '../notifier/NotifierComponent.vue';
+  import VcsDefaultLogoMobile from '../logo-mobile.svg';
+
+  /**
+   * 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
+   * and add a listener to call. Returns a destroy hook to stop listening to the added event. If you use the VcsApp
+   * component, do not call this function, since the component will do this for you.
+   * @param {VcsUiApp} app
+   * @returns {function():void}
+   */
+  export function setupPluginMountedListeners(app) {
+    /**
+     * wrapped execution of onVcsAppMounted hook
+     * @param {VcsPlugin} plugin
+     */
+    function onVcsAppMounted(plugin) {
+      if (plugin.onVcsAppMounted) {
+        try {
+          plugin.onVcsAppMounted(app);
+        } catch (e) {
+          getLogger('VcsUiApp').error(
+            `Error in plugin ${plugin.name} onVcsAppMounted hook`,
+            e,
+          );
+        }
+      }
+    }
 
+    [...app.plugins].forEach(onVcsAppMounted);
+
+    return app.plugins.added.addEventListener(onVcsAppMounted);
+  }
+
+  /**
+   * 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.
+   * @param {VcsUiApp} app
+   * @returns {function():void}
+   */
+  export function setupMapNavbar(app) {
+    const iconMap = {
+      OpenlayersMap: '$vcs2d',
+      CesiumMap: '$vcs3d',
+      ObliqueMap: '$vcsObliqueView',
+    };
+    const mapBtnWeight = {
+      OpenlayersMap: 3,
+      CesiumMap: 2,
+      ObliqueMap: 1,
+    };
+
+    const mapButtonActionDestroy = {};
+    const setupMap = ({ className, name }) => {
+      if (mapButtonActionDestroy[name]) {
+        mapButtonActionDestroy[name]();
+      }
+      const { action, destroy } = createMapButtonAction(
+        {
+          name,
+          icon: iconMap[className],
+          title: `navbar.maps.${className}`,
+        },
+        name,
+        app.maps,
+      );
+      app.navbarManager.add(
+        {
+          id: `mapButton-${name}`,
+          action,
+          weight: mapBtnWeight[className],
+        },
+        vcsAppSymbol,
+        ButtonLocation.MAP,
+      );
+      mapButtonActionDestroy[name] = () => {
+        app.navbarManager.remove(`mapButton-${name}`);
+        destroy();
+      };
+    };
+    [...app.maps].forEach(setupMap);
+    const mapAddedListener = app.maps.added.addEventListener(setupMap);
+
+    const mapRemovedListener = app.maps.removed.addEventListener(({ name }) => {
+      if (mapButtonActionDestroy[name]) {
+        mapButtonActionDestroy[name]();
+        delete mapButtonActionDestroy[name];
+      }
+    });
+
+    return () => {
+      mapAddedListener();
+      mapRemovedListener();
+      Object.values(mapButtonActionDestroy).forEach((cb) => cb());
+    };
+  }
+
+  /**
+   * This helper function will add a legend action button to the apps NavbarManager TOOL location, if legend entries are available.
+   * Watches number of legend entries.
+   * @param {VcsUiApp} app
+   * @returns {function():void}
+   */
+  export function setupLegendWindow(app) {
+    const { entries, destroy } = getLegendEntries(app);
+
+    const { action: legendAction, destroy: legendDestroy } = createToggleAction(
+      {
+        name: 'legendToggle',
+        icon: '$vcsLegend',
+        title: 'legend.tooltip',
+      },
+      {
+        id: 'legend',
+        component: VcsLegend,
+        state: {
+          headerTitle: 'legend.title',
+          headerIcon: '$vcsLegend',
+          infoUrl: app.getHelpUrlCallback(
+            '/components/contentspace.html#id_legend',
+          ),
+        },
+        slot: WindowSlot.DYNAMIC_RIGHT,
+        props: { entries },
+      },
+      app.windowManager,
+      vcsAppSymbol,
+    );
+
+    /**
+     * Adds a legend button, if not existing
+     */
+    const addLegend = () => {
+      if (!app.navbarManager.has('legend')) {
+        app.navbarManager.add(
+          {
+            id: 'legend',
+            action: legendAction,
+          },
+          vcsAppSymbol,
+          ButtonLocation.CONTENT,
+        );
+      }
+    };
+
+    /**
+     * Handles legend button and window.
+     * Adds a button, if legend definitions are available or removes legend otherwise.
+     */
+    const handleLegend = () => {
+      const layersWithLegend = [...app.layers].filter(
+        (layer) => layer.style?.properties?.legend ?? layer.properties?.legend,
+      );
+      const stylesWithLegend = [...app.styles].filter(
+        (style) => style?.properties?.legend,
+      );
+      if (layersWithLegend < 1 && stylesWithLegend < 1) {
+        app.navbarManager.remove('legend');
+        app.windowManager.remove('legend');
+      }
+    };
+
+    const listeners = [
+      app.layers.added.addEventListener((layer) => {
+        if (layer.style?.properties?.legend ?? layer.properties?.legend) {
+          addLegend();
+        }
+      }),
+      app.styles.added.addEventListener((style) => {
+        if (style?.properties?.legend) {
+          addLegend();
+        }
+      }),
+      app.layers.removed.addEventListener(handleLegend),
+      app.styles.removed.addEventListener(handleLegend),
+    ];
+
+    return () => {
+      destroy();
+      legendDestroy();
+      listeners.forEach((cb) => cb());
+    };
+  }
+
+  /**
+   * This helper function will add a settings action button to the apps NavbarManager MENU location.
+   * @param {VcsUiApp} app
+   * @returns {function():void}
+   */
+  export function setupSettingsWindow(app) {
+    const { action: settingsAction, destroy: settingsDestroy } =
+      createToggleAction(
+        {
+          name: 'settings.title',
+          icon: 'mdi-cog',
+          title: 'settings.tooltip',
+        },
+        {
+          id: 'settingsId',
+          component: VcsSettings,
+          state: { headerIcon: 'mdi-cog', headerTitle: 'settings.title' },
+          slot: WindowSlot.DYNAMIC_RIGHT,
+        },
+        app.windowManager,
+        vcsAppSymbol,
+      );
+    app.navbarManager.add(
+      {
+        id: 'settingsToggle',
+        action: settingsAction,
+      },
+      vcsAppSymbol,
+      ButtonLocation.MENU,
+    );
+    return () => {
+      settingsDestroy();
+    };
+  }
+
+  /**
+   * This helper function will add a help action button referencing VC Map help page to the apps NavbarManager MENU location.
+   * @param {VcsUiApp} app
+   */
+  export function setupHelpButton(app) {
+    const helpAction = createLinkAction(
+      {
+        name: 'help.title',
+        title: 'help.tooltip',
+        icon: '$vcsHelp',
+      },
+      app.getHelpUrlCallback(),
+    );
+    app.navbarManager.add(
+      {
+        id: 'helpButton',
+        action: helpAction,
+      },
+      vcsAppSymbol,
+      ButtonLocation.MENU,
+    );
+  }
+
+  /**
+   * 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.
+   * @param {VcsUiApp} app
+   * @returns {function():void}
+   */
+  export function setupCategoryManagerWindow(app) {
+    const id = 'category-manager';
+    const { action: categoryManagerAction, destroy } = createToggleAction(
+      {
+        name: id,
+        icon: '$vcsComponents',
+        title: 'categoryManager.tooltip',
+      },
+      {
+        id,
+        state: {
+          headerTitle: 'categoryManager.title',
+          headerIcon: '$vcsComponents',
+          infoUrl: app.getHelpUrlCallback(
+            '/components/contentspace.html#id_myWorkspace',
+          ),
+        },
+        component: CollectionManager,
+        provides: {
+          collectionManager: app.categoryManager,
+        },
+        slot: WindowSlot.DYNAMIC_LEFT,
+      },
+      app.windowManager,
+      vcsAppSymbol,
+    );
+
+    const setupCategories = () => {
+      if (app.categoryManager.componentIds.length > 0) {
+        if (!app.navbarManager.has(id)) {
+          app.navbarManager.add(
+            { id, action: categoryManagerAction },
+            vcsAppSymbol,
+            ButtonLocation.CONTENT,
+          );
+        }
+      } else {
+        app.windowManager.remove(id);
+        app.navbarManager.remove(id);
+      }
+    };
+    const addedListener =
+      app.categoryManager.added.addEventListener(setupCategories);
+    const removedListener =
+      app.categoryManager.removed.addEventListener(setupCategories);
+    setupCategories();
+
+    return () => {
+      destroy();
+      addedListener();
+      removedListener();
+    };
+  }
+
+  /**
+   * This helper sets up a listener to sync the theming relevant keys from the {@see UiConfigObject}
+   * with a given vuetify instance. Use this helper, if you do not use the VcsApp component and wish to evaluate
+   * the theming keys. Returns a function to stop syncing.
+   * Also adds a watcher to vuetify theme, which triggers themeChanged event on the VcsUiApp.
+   * @param {VcsUiApp} app
+   * @param {import("vuetify").Framework} vuetify
+   * @returns {function():void} - call to stop syncing
+   */
+  export function setupUiConfigTheming(app, vuetify) {
+    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();
+        }
+      }),
+    ];
+    const stopWatching = watch(
+      () => vuetify.theme.dark,
+      () => app.themeChanged.raiseEvent(),
+    );
+
+    return () => {
+      listeners.forEach((cb) => {
+        cb();
+      });
+      listeners.splice(0);
+      stopWatching();
+    };
+  }
+
+  /**
+   * This helper gets attributions of all active maps, layers and oblique collections and returns an array of entries.
+   * It also returns a attributionAction to toggle the attributions window and a destroy function.
+   * @param {VcsUiApp} app
+   * @returns {{attributionEntries: import("vue").Ref<Array<AttributionEntry>>, attributionAction: VcsAction, destroyAttributions: function():void}}
+   */
+  export function setupAttributions(app) {
+    const { entries, destroy } = getAttributions(app);
+
+    const { action: attributionAction, destroy: attributionDestroy } =
+      createToggleAction(
+        {
+          name: 'attributionToggle',
+          icon: 'mdi-chevron-double-right',
+          title: 'footer.attributions.tooltip',
+        },
+        {
+          id: 'attribution',
+          component: VcsAttributions,
+          state: {
+            headerTitle: 'footer.attributions.title',
+            headerIcon: 'mdi-copyright',
+          },
+          slot: WindowSlot.DYNAMIC_RIGHT,
+          props: { entries },
+        },
+        app.windowManager,
+        vcsAppSymbol,
+      );
+
+    return {
+      attributionEntries: entries,
+      attributionAction,
+      destroyAttributions: () => {
+        destroy();
+        attributionDestroy();
+      },
+    };
+  }
+
+  export function setupMapNavigation(app) {
+    const showMapNavigation = ref(false);
+
+    const listeners = [
+      app.maps.added.addEventListener(() => {
+        showMapNavigation.value = true;
+      }),
+      app.maps.removed.addEventListener(() => {
+        if (app.maps.size < 1) {
+          showMapNavigation.value = false;
+        }
+      }),
+    ];
+
+    return {
+      showMapNavigation,
+      destroy: () => {
+        listeners.forEach((cb) => cb());
+      },
+    };
+  }
+
+  /**
+   * @description The base component to setup the entire application. To embed the VcsApp, use this component.
+   * @vue-prop {string} appId - the id of the app to inject. this will setup listeners on the app to call vcsAppMounted on plugins
+   * @vue-provide
+   */
   export default {
     components: {
+      VcsButton,
+      VcsAttributionsFooter,
       MapNavigation,
-      Navbar,
+      VcsNavbar,
       VcsMap,
       WindowManagerComponent,
       ToolboxManagerComponent,
+      VContainer,
+      VFooter,
+      NotifierComponent,
     },
     props: {
       appId: {
@@ -54,101 +540,55 @@
     setup(props) {
       const id = uuid();
       const mapId = `mapCollection-${id}`;
+      /** @type {VcsUiApp} */
       const app = getVcsAppById(props.appId);
       provide('vcsApp', app);
 
-      const iconMap = {
-        OpenlayersMap: '$vcs2d',
-        CesiumMap: '$vcs3d',
-        ObliqueMap: '$vcsObliqueView',
-      };
-
-      const mapButtonActionDestroy = {};
-
-      const setupMap = ({ className, name }) => {
-        if (mapButtonActionDestroy[name]) {
-          mapButtonActionDestroy[name]();
-        }
-        const { action, destroy } = createMapButtonAction(
-          {
-            name,
-            icon: iconMap[className],
-            title: `Activate ${ name}`,
-          },
-          name,
-          app.maps,
-        );
-        app.navbarManager.add(
-          {
-            id: `mapButton-${name}`,
-            action,
-          },
-          vcsAppSymbol,
-          ButtonLocation.MAP,
-        );
-        mapButtonActionDestroy[name] = () => {
-          app.navbarManager.remove(`mapButton-${name}`);
-          destroy();
-        };
-      };
-
-      [...app.maps].forEach(setupMap);
-      const mapAddedDestroy = app.maps.added.addEventListener(setupMap);
-
-      const mapRemovedDestroy = app.maps.removed.addEventListener(({ name }) => {
-        if (mapButtonActionDestroy[name]) {
-          mapButtonActionDestroy[name]();
-          delete mapButtonActionDestroy[name];
-        }
-      });
-
-      let pluginAdded;
-      const pluginRemoved = app.plugins.removed.addEventListener(async (plugin) => {
-        app.windowManager.removeOwner(plugin.name);
-        app.navbarManager.removeOwner(plugin.name);
-        app.toolboxManager.removeOwner(plugin.name);
-      });
+      const mapNavbarListener = setupMapNavbar(app);
+      const legendDestroy = setupLegendWindow(app);
+      const settingsDestroy = setupSettingsWindow(app);
+      setupHelpButton(app);
+      const destroyComponentsWindow = setupCategoryManagerWindow(app);
+      const destroyThemingListener = setupUiConfigTheming(
+        app,
+        getCurrentInstance().proxy.$vuetify,
+      );
+      const { attributionEntries, attributionAction, destroyAttributions } =
+        setupAttributions(app);
+      const { showMapNavigation, destroy: destroyMapNavigationListener } =
+        setupMapNavigation(app);
 
+      let pluginMountedListener;
       onMounted(() => {
-        pluginAdded = app.plugins.added.addEventListener((plugin) => {
-          app.windowManager.removeOwner(plugin.name);
-          app.navbarManager.removeOwner(plugin.name);
-          app.toolboxManager.removeOwner(plugin.name);
-          if (plugin.onVcsAppMounted) {
-            plugin.onVcsAppMounted(app);
-          }
-        });
-        [...app.plugins].forEach((plugin) => {
-          if (plugin.onVcsAppMounted) {
-            plugin.onVcsAppMounted(app);
-          }
-        });
+        pluginMountedListener = setupPluginMountedListeners(app);
         app.maps.setTarget(mapId);
+        app.mounted.raiseEvent(mapId);
       });
 
       onUnmounted(() => {
-        if (mapAddedDestroy) {
-          mapAddedDestroy();
-        }
-        if (mapRemovedDestroy) {
-          mapRemovedDestroy();
+        if (pluginMountedListener) {
+          pluginMountedListener();
         }
-        if (pluginAdded) {
-          pluginAdded();
-        }
-        if (pluginRemoved) {
-          pluginRemoved();
-        }
-        Object.values(mapButtonActionDestroy).forEach(cb => cb());
+        mapNavbarListener();
+        legendDestroy();
+        settingsDestroy();
+        destroyComponentsWindow();
+        destroyThemingListener();
+        destroyAttributions();
+        destroyMapNavigationListener();
       });
 
       return {
         mapId,
-      };
-    },
-    provide() {
-      return {
-        language: window.navigator.language.split('-')[0],
+        mobileLogo: computed(
+          () =>
+            app.uiConfig.config.value.mobileLogo ??
+            app.uiConfig.config.value.logo ??
+            VcsDefaultLogoMobile,
+        ),
+        attributionEntries,
+        attributionAction,
+        showMapNavigation,
       };
     },
   };