@vcmap/ui 5.0.0-rc.8 → 5.0.0

package/src/application/VcsAppWrapper.vue

@@ -0,0 +1,32 @@
+<template>
+  <v-app>
+    <VcsApp :app-id="appId" />
+  </v-app>
+</template>
+
+<script>
+  import { VApp } from 'vuetify/lib';
+  import VcsApp from './VcsApp.vue';
+
+  /**
+   * @description This component wraps the {@see VcsApp} component in a
+   * v-app tag to ensure vuetify functionality. If you provide your own vuetify app,
+   * do NOT use this wrapper, but use {@see VcsApp} directly, since you may only use v-app once.
+   * @vue-prop {string} appId - the app to wrap. will be passed to the VcsApp component
+   */
+  export default {
+    name: 'VcsAppWrapper',
+    props: {
+      appId: {
+        type: String,
+        required: true,
+      },
+    },
+    components: {
+      VcsApp,
+      VApp,
+    },
+  };
+</script>
+
+<style scoped></style>

package/src/application/VcsAttributions.vue

@@ -0,0 +1,83 @@
+<template>
+  <v-sheet>
+    <v-list v-if="entries.length" class="px-2">
+      <v-list-item
+        v-for="{ key, title, attributions } in entries"
+        :key="key"
+        class="px-0"
+      >
+        <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">
+              {{ $t(attribution.provider) }} {{ attribution.year }}
+            </a>
+          </v-list-item-subtitle>
+        </v-list-item-content>
+      </v-list-item>
+    </v-list>
+    <v-sheet v-else class="ma-2">
+      {{ $t('footer.attributions.empty') }}
+    </v-sheet>
+  </v-sheet>
+</template>
+
+<style lang="scss" scoped>
+  @import '../styles/shades.scss';
+
+  .theme--light {
+    a {
+      color: map-get($shades, 'black');
+    }
+  }
+  .theme--dark {
+    a {
+      color: map-get($shades, 'white');
+    }
+  }
+  a {
+    &:hover {
+      color: var(--v-primary-base);
+    }
+    &:before {
+      content: '\00a9';
+    }
+  }
+</style>
+
+<script>
+  import {
+    VList,
+    VListItem,
+    VListItemContent,
+    VListItemTitle,
+    VListItemSubtitle,
+    VSheet,
+  } from 'vuetify/lib';
+
+  /**
+   * @description 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,
+      VSheet,
+    },
+    props: {
+      entries: {
+        type: Object,
+        default: () => {},
+      },
+    },
+  };
+</script>

package/src/application/VcsAttributionsFooter.vue

@@ -0,0 +1,83 @@
+<template>
+  <span class="d-inline-block text-truncate mr-10 attribution-wrap">
+    <span
+      v-for="attribution in mergedAttributions"
+      class="attribution-span"
+      :key="attribution.provider"
+    >
+      <a :href="attribution.url" target="_blank"
+        >{{ $t(attribution.provider) }} <span>{{ attribution.years }}</span>
+      </a>
+    </span>
+    <VcsButton
+      class="d-flex"
+      :key="attributionAction.name"
+      :tooltip="attributionAction.title"
+      :icon="attributionAction.icon"
+      :active="attributionAction.active"
+      :disabled="attributionAction.disabled"
+      @click.stop="attributionAction.callback($event)"
+    />
+  </span>
+</template>
+
+<style lang="scss" scoped>
+  .attribution-wrap .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';
+
+  /**
+   * @description 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/VcsMap.vue

@@ -1,9 +1,15 @@
 <template>
-  <div :id="mapId" />
+  <div
+    :id="mapId"
+    @click.right.stop="
+      (e) => {
+        e.preventDefault();
+      }
+    "
+  />
 </template>
 
 <style lang="scss" scoped>
-
   ::v-deep {
     .mapElement {
       position: absolute;
@@ -14,6 +20,15 @@
       overflow: hidden; /* Fix for iFrame content */
     }
 
+    .overviewMapElement {
+      position: absolute;
+      top: 3px;
+      bottom: 3px;
+      left: 3px;
+      right: 3px;
+      overflow: hidden; /* Fix for iFrame content */
+    }
+
     .cesium-widget,
     .cesium-widget canvas {
       width: 100%;
@@ -21,11 +36,13 @@
       touch-action: none;
     }
   }
-
 </style>
 
-<script >
-
+<script>
+  /**
+   * @description Wrapper component for a VcsMap providing the map element.
+   * @vue-prop {string} mapId - The id of the map, which is rendered in the map element's canvas
+   */
   export default {
     name: 'VcsMap',
     props: {

package/src/application/VcsNavbar.vue

@@ -0,0 +1,217 @@
+<template>
+  <v-toolbar
+    absolute
+    dense
+    elevation="0"
+    :height="$vuetify.breakpoint.xs ? '56px' : '48px'"
+    :bottom="$vuetify.breakpoint.xs ? 'bottom' : undefined"
+    width="100%"
+  >
+    <v-container fluid class="pa-0">
+      <v-row no-gutters class="align-center">
+        <v-col>
+          <v-toolbar-items>
+            <div class="d-flex">
+              <VcsActionButtonList
+                :actions="mapActions"
+                :overflow-count="3"
+                button="VcsToolButton"
+              />
+              <v-divider
+                v-if="
+                  mapActions.length > 0 &&
+                  (contentActions.length > 0 || toolActions.length > 0)
+                "
+                class="mx-2"
+                vertical
+                inset
+              />
+              <VcsActionButtonList
+                :actions="contentActions"
+                :overflow-count="$vuetify.breakpoint.xs ? 3 : 4"
+                button="VcsToolButton"
+              />
+              <v-divider
+                v-if="contentActions.length > 0 && toolActions.length > 0"
+                class="mx-2 base lighten-2"
+                vertical
+                inset
+              />
+              <VcsActionButtonList
+                :actions="toolActions"
+                v-if="$vuetify.breakpoint.mdAndUp"
+                button="VcsToolButton"
+              />
+            </div>
+          </v-toolbar-items>
+        </v-col>
+        <v-col class="d-flex justify-center">
+          <div class="d-flex align-center">
+            <template v-if="!$vuetify.breakpoint.xs">
+              <img class="logo" :src="logo" draggable="false" alt="Logo" />
+            </template>
+            <div
+              v-if="$vuetify.breakpoint.mdAndUp && config.appTitle"
+              class="ml-4"
+            >
+              {{ $t(config.appTitle) }}
+            </div>
+          </div>
+        </v-col>
+        <v-col class="align-content-end d-flex justify-end">
+          <v-toolbar-items v-if="$vuetify.breakpoint.mdAndUp">
+            <div class="d-flex">
+              <VcsActionButtonList
+                :actions="projectActions"
+                button="VcsToolButton"
+              />
+              <v-divider
+                v-if="projectActions.length > 0 && menuActions.length > 0"
+                vertical
+                inset
+                class="mx-2"
+              />
+
+              <v-menu offset-y v-if="shareActions.length > 0">
+                <template #activator="{ on, attrs }">
+                  <VcsToolButton
+                    v-bind="attrs"
+                    v-on="on"
+                    tooltip="navbar.share.tooltip"
+                    icon="$vcsShare"
+                  />
+                </template>
+                <VcsActionList
+                  :actions="shareActions"
+                  tooltip-position="left"
+                  :show-icon="true"
+                />
+              </v-menu>
+              <VcsToolButton
+                class="d-flex"
+                v-if="searchAction"
+                :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">
+                <template #activator="{ on, attrs }">
+                  <VcsToolButton
+                    v-bind="attrs"
+                    v-on="on"
+                    tooltip="navbar.menu.tooltip"
+                    icon="$vcsMenu"
+                  />
+                </template>
+                <VcsActionList
+                  :actions="menuActions"
+                  tooltip-position="left"
+                  :show-icon="true"
+                />
+              </v-menu>
+            </div>
+          </v-toolbar-items>
+        </v-col>
+      </v-row>
+    </v-container>
+  </v-toolbar>
+</template>
+
+<style lang="scss" scoped>
+  .v-toolbar__items > div {
+    gap: 8px;
+  }
+  .logo {
+    max-height: 36px;
+    margin: 0 auto;
+  }
+  .v-toolbar.v-toolbar--bottom {
+    bottom: 0;
+    position: fixed;
+  }
+</style>
+
+<script>
+  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 VcsToolButton from '../components/buttons/VcsToolButton.vue';
+  import { createSearchButtonAction } from '../actions/actionHelper.js';
+  import VcsDefaultLogo from '../logo.svg';
+
+  /**
+   * @description The menu bar of a VcsMap application.
+   * Consists of six sections, where buttons can be placed at.
+   * Renders a centered logo and or title.
+   */
+  export default {
+    name: 'VcsNavbar',
+    components: {
+      VcsActionButtonList,
+      VcsActionList,
+      VcsToolButton,
+      VToolbar,
+      VContainer,
+      VRow,
+      VCol,
+      VToolbarItems,
+      VDivider,
+      VMenu,
+    },
+    setup() {
+      const app = inject('vcsApp');
+
+      const navbarButtonIds = ref(app.navbarManager.componentIds);
+      const buttonComponents = computed(() =>
+        navbarButtonIds.value.map((id) => app.navbarManager.get(id)),
+      );
+      const getActions = (location) =>
+        computed(() =>
+          getActionsByLocation(
+            buttonComponents.value,
+            location,
+            [...app.plugins].map((p) => p.name),
+          ),
+        );
+
+      const logo = computed(() => {
+        return app.uiConfig.config.value.logo ?? VcsDefaultLogo;
+      });
+
+      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,
+        logo,
+      };
+    },
+  };
+</script>

package/src/application/VcsSettings.vue

@@ -0,0 +1,98 @@
+<template>
+  <v-container class="px-1 py-0">
+    <v-row no-gutters>
+      <v-col>
+        <VcsLabel html-for="settingsLanguageSelect">
+          {{ $t('settings.languageSelector') }}
+        </VcsLabel>
+      </v-col>
+      <v-col>
+        <VcsSelect
+          id="settingsLanguageSelect"
+          :items="languages"
+          v-model="language"
+        />
+      </v-col>
+    </v-row>
+    <v-row no-gutters>
+      <v-col>
+        <VcsLabel html-for="settingsLanguageSelect">
+          {{ $t('settings.theme.title') }}
+        </VcsLabel>
+      </v-col>
+      <v-col>
+        <VcsRadio
+          dense
+          :items="[
+            { label: 'settings.theme.light', value: false },
+            { label: 'settings.theme.dark', value: true },
+          ]"
+          v-model="$vuetify.theme.dark"
+          row
+        />
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script>
+  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';
+  import VcsRadio from '../components/form-inputs-controls/VcsRadio.vue';
+
+  /**
+   * @description The settings window of a VcsMap application
+   */
+  export default {
+    name: 'VcsSettings',
+    components: {
+      VcsSelect,
+      VcsRadio,
+      VcsLabel,
+      VContainer,
+      VRow,
+      VCol,
+    },
+    setup() {
+      const app = inject('vcsApp');
+      const languages = ref([]);
+      const localLanguage = ref('');
+      const language = computed({
+        get() {
+          return localLanguage.value;
+        },
+        set(value) {
+          app.locale = value;
+        },
+      });
+      const vm = getCurrentInstance().proxy;
+      const setupI18n = () => {
+        languages.value = [...vm.$i18n.availableLocales];
+        if (!languages.value.includes(localLanguage.value)) {
+          localLanguage.value = languages.value[0];
+        }
+      };
+      setupI18n();
+      const setLocale = () => {
+        localLanguage.value = app.locale;
+      };
+      setLocale();
+      const localeChangedListener =
+        app.localeChanged.addEventListener(setLocale);
+      const addedListener = app.i18n.added.addEventListener(setupI18n);
+      const removedListener = app.i18n.removed.addEventListener(setupI18n);
+
+      onUnmounted(() => {
+        localeChangedListener();
+        addedListener();
+        removedListener();
+      });
+      return {
+        language,
+        languages,
+      };
+    },
+  };
+</script>