@vcmap/ui 5.0.0-rc.14 → 5.0.0-rc.16

package/src/application/VcsApp.vue

@@ -1,18 +1,29 @@
 <template>
   <v-container class="fill-height pa-0" absolute fluid>
-    <Navbar />
+    <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">
         <div v-else class="company-logo-mobile 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)"
+        small
+        class="z-index-1 mobile-attribution-btn"
+      />
       <VcsMap :map-id="mapId" />
       <MapNavigation />
       <ToolboxManagerComponent />
       <WindowManagerComponent />
+      <NotifierComponent />
     </v-container>
-    <v-footer absolute v-if="!$vuetify.breakpoint.xs">
-      {{ $t('footer.title') }}
+    <v-footer absolute v-if="$vuetify.breakpoint.smAndUp" min-height="22px">
+      <VcsAttributionsFooter :entries="attributionEntries" :attribution-action="attributionAction" />
     </v-footer>
   </v-container>
 </template>
@@ -26,7 +37,7 @@
   top: 48px;
   left: 0;
   right: 0;
-  bottom: 33px;
+  bottom: 22px;
 }
 
 .vcs-main-xs {
@@ -43,6 +54,12 @@
   z-index: 1;
 }
 
+.mobile-attribution-btn{
+  position: fixed;
+  right: 2px;
+  bottom: 56px;
+}
+
 </style>
 
 <script>
@@ -56,12 +73,14 @@
     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 VcsNavbar from './VcsNavbar.vue';
   import { createMapButtonAction, createToggleAction } from '../actions/actionHelper.js';
   import MapNavigation from '../navigation/mapNavigation.vue';
   import VcsSettings from './VcsSettings.vue';
@@ -70,6 +89,11 @@
   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';
 
   /**
    * You should call this function in the component providing the vcsUiApp to your
@@ -80,17 +104,23 @@
    * @returns {function():void}
    */
   export function setupPluginMountedListeners(app) {
-    [...app.plugins].forEach((plugin) => {
+    /**
+     * wrapped execution of onVcsAppMounted hook
+     * @param {VcsPlugin} plugin
+     */
+    function onVcsAppMounted(plugin) {
       if (plugin.onVcsAppMounted) {
-        plugin.onVcsAppMounted(app);
+        try {
+          plugin.onVcsAppMounted(app);
+        } catch (e) {
+          getLogger('VcsUiApp').error(`Error in plugin ${plugin.name} onVcsAppMounted hook`, e);
+        }
       }
-    });
+    }
 
-    return app.plugins.added.addEventListener((plugin) => {
-      if (plugin.onVcsAppMounted) {
-        plugin.onVcsAppMounted(app);
-      }
-    });
+    [...app.plugins].forEach(onVcsAppMounted);
+
+    return app.plugins.added.addEventListener(onVcsAppMounted);
   }
 
   /**
@@ -178,10 +208,10 @@
 
     /**
      * adds or removes the legend button, depending on the number of entries
-     * @param {import("vue").Reactive<{string,LegendEntry}>} newEntries
+     * @param {Array<LegendEntry>} newEntries
      */
     const handleLegendButton = (newEntries) => {
-      if (Object.keys(newEntries).length > 0) {
+      if (newEntries.length > 0) {
         if (!app.navbarManager.has('legend')) {
           app.navbarManager.add(
             {
@@ -197,7 +227,7 @@
         app.windowManager.remove('legend');
       }
     };
-    handleLegendButton(entries);
+    handleLegendButton(entries.value);
 
     const stopWatching = watch(
       entries,
@@ -329,6 +359,45 @@
     };
   }
 
+  /**
+   * 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();
+      },
+    };
+  }
+
   /**
    * 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
@@ -336,11 +405,16 @@
    */
   export default {
     components: {
+      VcsButton,
+      VcsAttributionsFooter,
       MapNavigation,
-      Navbar,
+      VcsNavbar,
       VcsMap,
       WindowManagerComponent,
       ToolboxManagerComponent,
+      VContainer,
+      VFooter,
+      NotifierComponent,
     },
     props: {
       appId: {
@@ -360,6 +434,7 @@
       const settingsDestroy = setupSettingsWindow(app);
       const destroyComponentsWindow = setupComponentsWindow(app);
       const destroyThemingListener = setupUiConfigTheming(app, getCurrentInstance().proxy.$vuetify);
+      const { attributionEntries, attributionAction, destroyAttributions } = setupAttributions(app);
 
       let pluginMountedListener;
       onMounted(() => {
@@ -376,11 +451,14 @@
         settingsDestroy();
         destroyComponentsWindow();
         destroyThemingListener();
+        destroyAttributions();
       });
 
       return {
         mapId,
         mobileLogo: computed(() => app.uiConfig.config.value.mobileLogo ?? app.uiConfig.config.value.logo),
+        attributionEntries,
+        attributionAction,
       };
     },
   };

package/src/application/VcsAttributions.vue

@@ -0,0 +1,63 @@
+<template>
+  <v-list>
+    <v-list-item v-for="({key, title, attributions}) in entries" :key="key">
+      <v-list-item-content>
+        <v-list-item-title>{{ $t(title) }}</v-list-item-title>
+        <v-list-item-subtitle
+          v-for="attribution in attributions"
+          :key="attribution.provider"
+          :title="`${$t(attribution.provider)} ${attribution.year}`"
+        >
+          <a
+            :href="attribution.url"
+            target="_blank"
+            class="text--secondary"
+          >
+            {{ $t(attribution.provider) }} {{ attribution.year }}
+          </a>
+        </v-list-item-subtitle>
+      </v-list-item-content>
+    </v-list-item>
+  </v-list>
+</template>
+
+<style lang="scss" scoped>
+
+  ::v-deep {
+    a:before {
+      content: '\00a9\00a0'
+    }
+  }
+
+</style>
+
+<script >
+  import {
+    VList,
+    VListItem,
+    VListItemContent,
+    VListItemTitle,
+    VListItemSubtitle,
+  } from 'vuetify/lib';
+
+  /**
+   * Lists attributions of maps, layers and oblique collections
+   * @vue-prop {import("vue").Ref<Array<AttributionEntry>} entries - array with one entry per active VcsObject
+   */
+  export default {
+    name: 'VcsAttributions',
+    components: {
+      VList,
+      VListItem,
+      VListItemContent,
+      VListItemTitle,
+      VListItemSubtitle,
+    },
+    props: {
+      entries: {
+        type: Object,
+        default: () => {},
+      },
+    },
+  };
+</script>

package/src/application/VcsAttributionsFooter.vue

@@ -0,0 +1,87 @@
+<template>
+  <span class="attribution-wrap">
+    <span v-for="attribution in mergedAttributions" class="attribution-span" :key="attribution.provider">
+      <a
+        :href="attribution.url"
+        target="_blank"
+        class="text--secondary"
+      >{{ $t(attribution.provider) }} <span>{{ attribution.years }}</span></a>
+    </span>
+    <VcsButton
+      class="d-flex text--secondary"
+      small
+      :key="attributionAction.name"
+      :tooltip="attributionAction.title"
+      :icon="attributionAction.icon"
+      :active="attributionAction.active"
+      @click.stop="attributionAction.callback($event)"
+    />
+  </span>
+</template>
+
+<style lang="scss" scoped>
+  .attribution-wrap{
+    white-space: nowrap;
+    margin-right: 40px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    .vcs-button-wrap{
+      position: absolute;
+      right: 4px;
+      bottom: 3px;
+    }
+  }
+  a:before {
+    content: '\00a9\00a0';
+  }
+  .attribution-span {
+    font-size: smaller;
+    &:before {
+      content: '\00a0\007c\00a0';
+    }
+    &:first-child::before{
+      content: '';
+    }
+    span{
+      font-size: inherit;
+    }
+  }
+
+</style>
+
+<script >
+
+  import { computed } from 'vue';
+  import { mergeAttributions } from './attributionsHelper.js';
+  import VcsButton from '../components/buttons/VcsButton.vue';
+
+  /**
+   * Lists attributions of maps, layers and oblique collections within the footer
+   * @vue-prop {import("vue").Ref<Array<AttributionEntry>} entries - array with one entry per active VcsObject
+   * @vue-prop {VcsAction} attributionAction - action to open attribution window
+   * @vue-computed {Array<{provider: string, years: string, url: URL}>} mergedAttributions - array with one entry per provider
+   */
+  export default {
+    name: 'VcsAttributionsFooter',
+    components: {
+      VcsButton,
+    },
+    props: {
+      entries: {
+        type: Array,
+        required: true,
+      },
+      attributionAction: {
+        type: Object,
+        required: true,
+      },
+    },
+    setup(props) {
+      const mergedAttributions = computed(() => mergeAttributions(props.entries));
+      return {
+        mergedAttributions,
+      };
+    },
+  };
+</script>

package/src/application/{Navbar.vue → VcsNavbar.vue}

@@ -86,6 +86,17 @@
                   :show-icon="true"
                 />
               </v-menu>
+              <VcsButton
+                class="d-flex"
+                v-if="searchAction"
+                large
+                :key="searchAction.name"
+                :tooltip="searchAction.title"
+                :icon="searchAction.icon"
+                :active="searchAction.active"
+                @click.stop="searchAction.callback($event)"
+                v-bind="{...$attrs}"
+              />
               <v-menu
                 offset-y
                 v-if="menuActions.length > 0"
@@ -124,15 +135,30 @@
 </style>
 
 <script>
-  import { inject, ref, computed } from 'vue';
+  import { inject, ref, computed, onUnmounted } from 'vue';
+  import {
+    VCol, VContainer, VDivider, VMenu, VRow, VToolbar, VToolbarItems,
+  } from 'vuetify/lib';
   import { ButtonLocation, getActionsByLocation } from '../manager/navbarManager.js';
   import VcsActionButtonList from '../components/buttons/VcsActionButtonList.vue';
   import VcsActionList from '../components/lists/VcsActionList.vue';
   import VcsButton from '../components/buttons/VcsButton.vue';
+  import { createSearchButtonAction } from '../actions/actionHelper.js';
 
   export default {
     name: 'VcsNavbar',
-    components: { VcsActionButtonList, VcsActionList, VcsButton },
+    components: {
+      VcsActionButtonList,
+      VcsActionList,
+      VcsButton,
+      VToolbar,
+      VContainer,
+      VRow,
+      VCol,
+      VToolbarItems,
+      VDivider,
+      VMenu,
+    },
     setup() {
       const app = inject('vcsApp');
 
@@ -142,12 +168,19 @@
         () => getActionsByLocation(buttonComponents.value, location, [...app.plugins].map(p => p.name)),
       );
 
+      const { searchAction, destroy: destroySearchAction } = createSearchButtonAction(app);
+
+      onUnmounted(() => {
+        destroySearchAction();
+      });
+
       return {
         mapActions: getActions(ButtonLocation.MAP),
         contentActions: getActions(ButtonLocation.CONTENT),
         toolActions: getActions(ButtonLocation.TOOL),
         projectActions: getActions(ButtonLocation.PROJECT),
         shareActions: getActions(ButtonLocation.SHARE),
+        searchAction,
         menuActions: getActions(ButtonLocation.MENU),
         config: app.uiConfig.config,
       };

package/src/application/VcsSettings.vue

@@ -34,6 +34,7 @@
   import {
     ref, inject, onUnmounted, getCurrentInstance, computed,
   } from 'vue';
+  import { VCol, VContainer, VRow } from 'vuetify/lib';
   import VcsLabel from '../components/form-inputs-controls/VcsLabel.vue';
   import VcsSelect from '../components/form-inputs-controls/VcsSelect.vue';
 
@@ -42,6 +43,9 @@
     components: {
       VcsSelect,
       VcsLabel,
+      VContainer,
+      VRow,
+      VCol,
     },
     setup() {
       const app = inject('vcsApp');

package/src/application/attributionsHelper.js

@@ -0,0 +1,150 @@
+import { ref } from 'vue';
+import { ObliqueMap } from '@vcmap/core';
+
+/**
+ * @typedef {Object} Attribution.Options
+ * @property {string} provider - name of the data provider
+ * @property {number} [year] - year of dataset
+ * @property {URL} url - link to data provider
+ */
+
+/**
+ * @typedef {Object} AttributionEntry
+ * @property {string} key - name of the VcsObject the attribution applies to
+ * @property {string} title - title of the VcsObject the attribution applies to
+ * @property {Attribution.Options|Array<Attribution.Options>} attributions - attributions of a map, layer or oblique collection
+ */
+
+/**
+ * merges attribution entries of same providers
+ * @param {Array<AttributionEntry>} entries
+ * @returns {Array<{provider: string, years: string, url: URL}>}
+ */
+export function mergeAttributions(entries) {
+  const providers = {};
+  entries.forEach(({ attributions }) => {
+    attributions.forEach(({ provider, year, url }) => {
+      const providerObject = providers[provider];
+      if (providerObject) {
+        if (year) {
+          const index = providerObject.years.indexOf(year);
+          if (url && index === -1) {
+            if (providerObject.years.every(y => Number(y) < Number(year))) {
+              providerObject.url = url;
+            }
+            if (year) {
+              const set = new Set([...providerObject.years, Number(year)]);
+              providerObject.years = [...set].sort((a, b) => a - b);
+            }
+          }
+        }
+      } else {
+        providers[provider] = {
+          years: year ? [Number(year)] : [],
+          url,
+        };
+      }
+    });
+  });
+  return Object.keys(providers).map(provider => ({
+    provider,
+    years: providers[provider].years.join(', '),
+    url: providers[provider].url,
+  }));
+}
+
+/**
+ * Gets attributions of all active maps, layers and oblique collections and returns an array of entries.
+ * Each entry is defined by a key derived from the object's className and name, and it's associated attributions.
+ * Listens to state changes of maps, layers and oblique collections and synchronizes the entries array correspondingly.
+ * Returns a destroy function to clear listeners.
+ * @param {import("ui").VcsUiApp} app
+ * @returns {{entries: import("vue").Ref<Array<AttributionEntry>>, destroy: function():void}}
+ */
+export function getAttributions(app) {
+  /**
+   * @type {import("vue").Ref<Array<AttributionEntry>>}
+   */
+  const entries = ref([]);
+  /**
+   * @type {function():void}
+   */
+  let obliqueListener = () => {};
+
+  /**
+   * Adds an entry for an object using a combination of the object's className and name as key.
+   * @param {import("@vcmap/core").VcsMap|import("@vcmap/core").Layer|import("@vcmap/core").ObliqueCollection} object
+   */
+  function addAttributions(object) {
+    const { attributions } = object.properties;
+    if (!attributions) { return; }
+    const key = `${object.className}_${object.name}`;
+    const idx = entries.value.findIndex(e => e.key === key);
+    if (idx < 0) {
+      entries.value.push({
+        key,
+        title: object.properties?.title ?? `${object.className}: ${object.name}`,
+        attributions: Array.isArray(attributions) ? attributions : [attributions],
+      });
+    }
+  }
+
+  /**
+   * @param {import("@vcmap/core").VcsMap|import("@vcmap/core").Layer|import("@vcmap/core").ObliqueCollection} object
+   */
+  function removeAttributions(object) {
+    const idx = entries.value.findIndex(e => e.key === `${object.className}_${object.name}`);
+    if (idx >= 0) {
+      entries.value.splice(idx, 1);
+    }
+  }
+
+  /**
+   * adds or removes a AttributionEntry on layer state changes
+   * @param {import("@vcmap/core").VcsMap|import("@vcmap/core").Layer|import("@vcmap/core").ObliqueCollection} object
+   */
+  function syncAttributions(object) {
+    if (object?.properties?.attributions === undefined) { return; }
+    if (object.active || object.loaded) {
+      addAttributions(object);
+    } else {
+      removeAttributions(object);
+    }
+  }
+
+  /**
+   *
+   * @param {import("@vcmap/core").VcsMap} map
+   */
+  function initAttributions(map) {
+    if (!map) { return; }
+    obliqueListener();
+    entries.value.splice(0);
+    syncAttributions(map);
+    [...map.layerCollection].forEach((layer) => {
+      if (layer.isSupported(map)) {
+        syncAttributions(layer);
+      }
+    });
+    if (map instanceof ObliqueMap) {
+      syncAttributions(map.collection);
+      obliqueListener = map.collectionChanged.addEventListener(syncAttributions);
+    }
+  }
+
+  const listeners = [
+    app.maps.mapActivated.addEventListener(initAttributions),
+    app.layers.stateChanged.addEventListener(syncAttributions),
+    app.layers.removed.addEventListener(removeAttributions),
+    app.maps.removed.addEventListener(removeAttributions),
+  ];
+
+  initAttributions(app.maps.activeMap);
+
+  const destroy = () => {
+    listeners.forEach(cb => cb());
+    obliqueListener();
+  };
+
+  return { entries, destroy };
+}

package/src/application/vcsAppWrapper.vue

@@ -5,6 +5,7 @@
 </template>
 
 <script>
+  import { VApp } from 'vuetify/lib';
   import VcsApp from './VcsApp.vue';
 
   /**
@@ -21,7 +22,10 @@
         required: true,
       },
     },
-    components: { VcsApp },
+    components: {
+      VcsApp,
+      VApp,
+    },
   };
 </script>
 

package/src/components/buttons/VcsActionButtonList.vue

@@ -38,6 +38,7 @@
 </style>
 <script>
 
+  import { VIcon, VMenu, VSpacer } from 'vuetify/lib';
   import VcsButton from './VcsButton.vue';
   import VcsActionList, { validateActions } from '../lists/VcsActionList.vue';
 
@@ -54,7 +55,13 @@
    */
   export default {
     name: 'VcsActionButtonList',
-    components: { VcsActionList, VcsButton },
+    components: {
+      VcsActionList,
+      VcsButton,
+      VMenu,
+      VIcon,
+      VSpacer,
+    },
     props: {
       actions: {
         type: Array,

package/src/components/buttons/VcsButton.vue

@@ -94,6 +94,7 @@
 </style>
 
 <script>
+  import { VBtn, VIcon } from 'vuetify/lib';
   import VcsBadge from '../notification/VcsBadge.vue';
   import VcsTooltip from '../notification/VcsTooltip.vue';
 
@@ -118,7 +119,12 @@
    */
   export default {
     name: 'VcsButton',
-    components: { VcsTooltip, VcsBadge },
+    components: {
+      VcsTooltip,
+      VcsBadge,
+      VBtn,
+      VIcon,
+    },
     inheritAttrs: false,
     props: {
       active: {