@vcmap/ui 6.1.0-rc.6 → 6.1.0

package/src/application/VcsApp.vue

@@ -5,10 +5,11 @@
       :options="splashScreen"
       v-model="showSplashScreen"
     ></VcsSplashScreen>
-    <VcsNavbar v-if="!config.hideHeader" />
+    <VcsNavbar v-if="!config.hideHeader && smAndUp && !mobileLandscape" />
+    <VcsNavbarMobile v-if="!config.hideHeader && xs && !mobileLandscape" />
     <VcsContainer :attribution-action="attributionAction" />
     <v-footer
-      v-if="showFooter"
+      v-if="showFooter && !mobileLandscape"
       app
       absolute
       :height="footerHeight"
@@ -32,6 +33,9 @@
         :attribution-action="attributionAction"
       />
     </v-footer>
+    <p v-if="mobileLandscape" class="mobileRotatedWarning">
+      {{ $st('footer.mobile.rotationWarning') }}
+    </p>
   </v-container>
 </template>
 
@@ -39,6 +43,17 @@
   :deep(.v-application--wrap) {
     min-height: fit-content;
   }
+  .mobileRotatedWarning {
+    bottom: 0px;
+    z-index: 5;
+    position: fixed;
+    background-color: rgba(var(--v-theme-surface-light), 0.5);
+    color: rgb(var(--v-theme-on-surface));
+    backdrop-filter: blur(1px);
+    -webkit-backdrop-filter: blur(1px);
+    padding: 5px;
+    border-radius: 4px;
+  }
 </style>
 
 <script>
@@ -58,11 +73,13 @@
   import { ButtonLocation } from '../manager/navbarManager.js';
   import { vcsAppSymbol } from '../pluginHelper.js';
   import VcsNavbar from './VcsNavbar.vue';
+  import VcsNavbarMobile from './VcsNavbarMobile.vue';
   import {
     createLinkAction,
     createMapButtonAction,
     createToggleAction,
   } from '../actions/actionHelper.js';
+  import { setupDeepPicking } from '../actions/deepPickingAction.js';
   import VcsSettings from './VcsSettings.vue';
   import { WindowSlot } from '../manager/window/windowManager.js';
   import CollectionManager from '../manager/collectionManager/CollectionManager.vue';
@@ -70,20 +87,21 @@
     createVcsThemes,
     setTheme,
     useFontSize,
+    isMobileLandscape,
   } from '../vuePlugins/vuetify.js';
   import VcsLegend from '../legend/VcsLegend.vue';
   import { getLegendEntries } from '../legend/legendHelper.js';
   import VcsAttributionsFooter from './VcsAttributionsFooter.vue';
   import VcsObliqueFooter from './VcsObliqueFooter.vue';
   import VcsTextPageFooter from './VcsTextPageFooter.vue';
-  import VcsSplashScreen, { getSplashScreenHash } from './VcsSplashScreen.vue';
+  import VcsSplashScreen, {
+    shouldShowSplashSceen,
+  } from './VcsSplashScreen.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';
-  import { getFromLocalStorage, hideSplashScreenKey } from '../localStorage.js';
-  import { name as packageName } from '../../package.json';
 
   /**
    * This helper checks the uiConfig and depending on the value will setup/teardown the providedSetupFunction
@@ -188,6 +206,7 @@
         },
         vcsAppSymbol,
         ButtonLocation.MAP,
+        { mobile: true, tablet: true, desktop: true },
       );
       mapButtonActionDestroy[name] = () => {
         app.navbarManager.remove(`mapButton-${name}`);
@@ -257,16 +276,18 @@
           },
           vcsAppSymbol,
           ButtonLocation.CONTENT,
+          { mobile: true, tablet: true, desktop: true },
         );
       }
     };
-
+    const { xs } = useDisplay();
     let currentEntryLength = entries.length;
     const watchEntries = watch(entries, (newValue) => {
       if (
         app.uiConfig.config.openLegendOnAdd &&
         newValue.length > currentEntryLength &&
-        !app.windowManager.has(legendComponentId)
+        !app.windowManager.has(legendComponentId) &&
+        !xs.value
       ) {
         app.windowManager.add(
           {
@@ -373,6 +394,7 @@
         },
         vcsAppSymbol,
         ButtonLocation.MENU,
+        { mobile: true, tablet: true, desktop: true },
       );
       return () => {
         customScreenDestroy();
@@ -406,11 +428,11 @@
    * @returns {WatchStopHandle}
    */
   function setupSplashScreen(app) {
+    const { config, showSplashScreen } = app.uiConfig;
     function setupSplashScreenAction(moduleId) {
-      const { config, showSplashScreen } = app.uiConfig;
       const { splashScreen } = config;
       if (splashScreen && moduleId !== app.dynamicModuleId) {
-        showSplashScreen.value = true;
+        showSplashScreen.value = shouldShowSplashSceen(app);
       }
       if (splashScreen && splashScreen.menuEntry) {
         const splashScreenAction = {
@@ -428,6 +450,7 @@
           },
           vcsAppSymbol,
           ButtonLocation.MENU,
+          { mobile: true, tablet: true, desktop: true },
         );
       }
     }
@@ -485,6 +508,7 @@
       },
       vcsAppSymbol,
       ButtonLocation.MENU,
+      { mobile: true, tablet: true, desktop: true },
     );
     return () => {
       app.navbarManager.remove(settingsComponentId);
@@ -514,6 +538,7 @@
       },
       vcsAppSymbol,
       ButtonLocation.MENU,
+      { mobile: true, tablet: true, desktop: true },
     );
   }
 
@@ -747,6 +772,7 @@
       VcsObliqueFooter,
       VcsSplashScreen,
       VcsNavbar,
+      VcsNavbarMobile,
       VContainer,
       VFooter,
       VSpacer,
@@ -789,6 +815,7 @@
       const destroyDisplayQualityListener = setupUiConfigDisplayQuality(app);
       const { attributionEntries, attributionAction, destroyAttributions } =
         setupAttributions(app);
+      const destroyDeepPicking = setupDeepPicking(app);
 
       let pluginMountedListener;
       onMounted(() => {
@@ -797,21 +824,14 @@
 
       function getSplashScreenConfig() {
         if (app.uiConfig.config.splashScreen) {
-          const config = app.uiConfig.getByKey('splashScreen');
-          const hash = getSplashScreenHash(app);
-          const moduleId = config[moduleIdSymbol];
-          const storedHash = getFromLocalStorage(
-            `${packageName}_${moduleId}`,
-            hideSplashScreenKey,
-          );
-          if (hash !== storedHash) {
-            return {
-              title: 'components.splashScreen.name',
-              tooltip: 'components.splashScreen.tooltip',
-              position: { width: '800px', height: '400px' },
-              ...app.uiConfig.config.splashScreen,
-            };
+          if (shouldShowSplashSceen(app)) {
+            showSplashScreen.value = true;
           }
+          return {
+            title: 'components.splashScreen.name',
+            tooltip: 'components.splashScreen.tooltip',
+            ...app.uiConfig.config.splashScreen,
+          };
         }
         return undefined;
       }
@@ -835,9 +855,13 @@
         destroyThemingListener();
         destroyDisplayQualityListener();
         destroyAttributions();
+        destroyDeepPicking();
       });
 
-      const { smAndUp } = useDisplay();
+      const { smAndUp, xs } = useDisplay();
+
+      const mobileLandscape = isMobileLandscape();
+
       const fontSize = useFontSize();
       const footerHeight = computed(() => {
         return Math.ceil(fontSize.value * 1.65);
@@ -879,6 +903,9 @@
         splashScreen,
         attributionEntries,
         attributionAction,
+        smAndUp,
+        xs,
+        mobileLandscape,
       };
     },
   };

package/src/application/VcsApp.vue.d.ts

@@ -112,6 +112,10 @@ declare const _default: import("vue").DefineComponent<{
          * - an optional flag whether to activate feature info on startup (default active)
          */
         readonly startingFeatureInfo?: boolean | undefined;
+        /**
+         * - an optional flag whether to enable deep picking via right click context menu (default active)
+         */
+        readonly enableDeepPicking?: boolean | undefined;
         /**
          * - mouse event, when position display is updated. Either 'click' (default) or 'move'.
          */
@@ -447,16 +451,19 @@ declare const _default: import("vue").DefineComponent<{
          * Whether to display a checkbox allowing the user not to see the SplashScreen again. This parameter is relative to moduleId and configuration; the SplashScreen will be shown again in case of any change.
          */
         enableDontShowAgain?: boolean | undefined;
-        position: {
+        position?: {
             readonly width?: string | undefined;
             readonly height?: string | undefined;
             readonly maxHeight?: string | undefined;
             readonly maxWidth?: string | undefined;
-        };
+        } | undefined;
         tooltip: string;
     } | undefined>;
     attributionEntries: import("vue").Ref<import("./attributionsHelper.js", { with: { "resolution-mode": "import" } }).AttributionEntry[]>;
     attributionAction: import("../actions/actionHelper.js", { with: { "resolution-mode": "import" } }).VcsAction;
+    smAndUp: import("vue").Ref<boolean>;
+    xs: import("vue").Ref<boolean>;
+    mobileLandscape: import("vue").ComputedRef<boolean>;
 }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     appId: {
         type: StringConstructor;

package/src/application/VcsAttributionsFooter.vue

@@ -15,6 +15,7 @@
     </div>
     <VcsButton
       class="flex-shrink-0"
+      :data-action-name="attributionAction.name"
       :key="attributionAction.name"
       :tooltip="attributionAction.title"
       :icon="attributionAction.icon"

package/src/application/VcsContainer.vue

@@ -3,9 +3,9 @@
     class="vcs-container pa-0"
     :class="{
       'vcs-container-xs': xs,
-      'with-header': !config.hideHeader,
-      'without-header': config.hideHeader,
-      'without-footer': config.hideFooter,
+      'with-header': !config.hideHeader && !mobileLandscape,
+      'without-header': config.hideHeader || mobileLandscape,
+      'without-footer': config.hideFooter || mobileLandscape,
     }"
     fluid
     absolute
@@ -20,18 +20,19 @@
         :class="{ 'mobile-logo': sm }"
       />
     </template>
-    <!--VcsButton
-      v-if="!$vuetify.breakpoint.smAndUp && $vuetify.breakpoint.mobile"
+    <VcsButton
+      v-if="!smAndUp"
+      :data-action-name="attributionAction.name"
       :key="attributionAction.name"
       :tooltip="attributionAction.title"
-      :icon="attributionAction.icon"
+      icon="mdi-copyright"
       :active="attributionAction.active"
       @click.stop="attributionAction.callback($event)"
       class="z-index-1 mobile-attribution-btn"
-    /-->
+    />
     <PanelManagerComponent />
-    <ToolboxManagerComponent v-if="!config.hideToolbox" />
-    <WindowManagerComponent />
+    <ToolboxManagerComponent v-if="!config.hideToolbox && !mobileLandscape" />
+    <WindowManagerComponent v-if="!mobileLandscape" />
     <NotifierComponent />
   </v-container>
 </template>
@@ -55,7 +56,7 @@
 
   .vcs-container-xs.with-header {
     top: 0;
-    bottom: 56px;
+    bottom: calc(var(--v-vcs-font-size) * 3 + 10px);
   }
   .vcs-container-xs.without-header {
     top: 0;
@@ -72,8 +73,23 @@
   }
   .mobile-attribution-btn {
     position: fixed;
-    right: 2px;
-    bottom: 36px;
+    right: 32px;
+    bottom: 67px;
+    background-color: rgba(var(--v-theme-surface-light), 0.5);
+    color: rgb(var(--v-theme-on-surface));
+    backdrop-filter: blur(1px);
+    -webkit-backdrop-filter: blur(1px);
+    padding: 6px !important;
+    padding-bottom: 7px !important;
+    border-radius: 4px;
+    height: 35px !important;
+    width: 35px !important;
+    font-size: 20px !important;
+    justify-content: center;
+    align-items: center;
+  }
+  ::v-deep(.mobile-attribution-btn span i) {
+    font-size: calc(var(--v-vcs-font-size) + 13px) !important;
   }
   .z-index-1 {
     z-index: 1;
@@ -84,11 +100,13 @@
   import { computed, inject } from 'vue';
   import { useDisplay } from 'vuetify';
   import { VContainer } from 'vuetify/components';
+  import VcsButton from '../components/buttons/VcsButton.vue';
   import PanelManagerComponent from '../manager/panel/PanelManagerComponent.vue';
   import WindowManagerComponent from '../manager/window/WindowManager.vue';
   import ToolboxManagerComponent from '../manager/toolbox/ToolboxManagerComponent.vue';
   import NotifierComponent from '../notifier/NotifierComponent.vue';
   import VcsDefaultLogoMobile from '../logo-mobile.svg';
+  import { isMobileLandscape } from '../vuePlugins/vuetify.js';
 
   /**
    * @description The main container with map canvas
@@ -101,6 +119,7 @@
       ToolboxManagerComponent,
       VContainer,
       NotifierComponent,
+      VcsButton,
     },
     props: {
       attributionAction: {
@@ -111,12 +130,16 @@
     setup() {
       /** @type {import("../vcsUiApp.js").default} */
       const app = inject('vcsApp');
-      const { smAndDown, xs, sm } = useDisplay();
+      const { smAndDown, xs, sm, smAndUp, mobile } = useDisplay();
+      const mobileLandscape = isMobileLandscape();
       return {
         config: app.uiConfig.config,
         smAndDown,
         xs,
         sm,
+        smAndUp,
+        mobile,
+        mobileLandscape,
         mobileLogo: computed(
           () =>
             app.uiConfig.config.mobileLogo ??

package/src/application/VcsContainer.vue.d.ts

@@ -26,6 +26,10 @@ declare const _default: import("vue").DefineComponent<{
          * - an optional flag whether to activate feature info on startup (default active)
          */
         readonly startingFeatureInfo?: boolean | undefined;
+        /**
+         * - an optional flag whether to enable deep picking via right click context menu (default active)
+         */
+        readonly enableDeepPicking?: boolean | undefined;
         /**
          * - mouse event, when position display is updated. Either 'click' (default) or 'move'.
          */
@@ -294,6 +298,9 @@ declare const _default: import("vue").DefineComponent<{
     smAndDown: import("vue").Ref<boolean>;
     xs: import("vue").Ref<boolean>;
     sm: import("vue").Ref<boolean>;
+    smAndUp: import("vue").Ref<boolean>;
+    mobile: import("vue").ComputedRef<boolean>;
+    mobileLandscape: import("vue").ComputedRef<boolean>;
     mobileLogo: import("vue").ComputedRef<any>;
 }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     attributionAction: {

package/src/application/VcsMobileMenuList.vue

@@ -0,0 +1,111 @@
+<script setup>
+  import { inject } from 'vue';
+  import { VDivider, VList, VListItem } from 'vuetify/components';
+  import {
+    ButtonLocation,
+    deviceSymbol,
+    getActionsByLocation,
+  } from '../manager/navbarManager.js';
+  import VcsTextPageFooter from './VcsTextPageFooter.vue';
+  import { getDataProtection, getImprint } from './uiConfigHelper.js';
+  import { toolboxComponentId } from '../manager/toolbox/ToolboxManagerComponent.vue';
+
+  const app = inject('vcsApp');
+
+  const mobileButtonComponents = app.navbarManager.componentIds
+    .map((id) => app.navbarManager.get(id))
+    .filter((buttonComponent) => {
+      return buttonComponent[deviceSymbol].mobile;
+    });
+
+  // Actions from the content overflow are put in Menu
+  const contentOverflowActions = getActionsByLocation(
+    mobileButtonComponents,
+    ButtonLocation.CONTENT,
+    [...app.plugins].map((p) => p.name),
+  )?.slice(2);
+
+  const toolboxToggleAction = app.navbarManager.get(toolboxComponentId).action;
+
+  const toolboxOverflowActions = getActionsByLocation(
+    mobileButtonComponents,
+    ButtonLocation.TOOL,
+    [...app.plugins].map((p) => p.name),
+  )?.filter((action) => action.name !== toolboxToggleAction.name);
+
+  const mobileMenuActions = [
+    ...getActionsByLocation(
+      mobileButtonComponents,
+      ButtonLocation.MENU,
+      [...app.plugins].map((p) => p.name),
+    ),
+    ...getActionsByLocation(
+      mobileButtonComponents,
+      ButtonLocation.SHARE,
+      [...app.plugins].map((p) => p.name),
+    ),
+    ...getActionsByLocation(
+      mobileButtonComponents,
+      ButtonLocation.PROJECT,
+      [...app.plugins].map((p) => p.name),
+    ),
+    ...toolboxOverflowActions,
+    ...contentOverflowActions,
+  ];
+
+  const dataProtection = getDataProtection(app.uiConfig?.config);
+  const imprint = getImprint(app.uiConfig?.config);
+</script>
+
+<template>
+  <v-list>
+    <div v-for="action in mobileMenuActions" :key="action.name">
+      <v-list-item
+        @click="action.callback()"
+        :data-action-name="action.name"
+        :title="$t(action.name)"
+        :prepend-icon="action.icon"
+      >
+      </v-list-item>
+      <v-divider></v-divider>
+    </div>
+    <template v-if="imprint">
+      <v-list-item v-if="imprint">
+        <VcsTextPageFooter
+          class="plainStyle"
+          :text-page="imprint"
+          :window-id="'imprintWindow'"
+        />
+      </v-list-item>
+      <v-divider></v-divider>
+    </template>
+    <template v-if="dataProtection">
+      <v-list-item v-if="dataProtection">
+        <VcsTextPageFooter
+          class="plainStyle"
+          :text-page="dataProtection"
+          :window-id="'dataProtectionWindow'"
+        />
+      </v-list-item>
+    </template>
+  </v-list>
+</template>
+
+<style scoped lang="scss">
+  .plainStyle {
+    font-family: var(--v-vcs-font-family), sans-serif !important;
+    font-size: var(--v-vcs-font-size) !important;
+  }
+  ::v-deep(.text-page-footer) {
+    font-size: var(--v-vcs-font-size) !important;
+    text-decoration: none !important;
+
+    a {
+      color: var(--v-text-color);
+      text-decoration: none !important;
+    }
+  }
+  ::v-deep(.v-list-item__prepend) {
+    display: block !important;
+  }
+</style>

package/src/application/VcsMobileMenuList.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+export default _default;

package/src/application/VcsNavbar.vue

@@ -85,6 +85,7 @@
                       v-bind="props"
                       tooltip="navbar.share.tooltip"
                       icon="$vcsShare"
+                      id="vcs-navbar-share-menu-activator"
                     />
                   </template>
                   <VcsActionList
@@ -96,6 +97,7 @@
                 <VcsToolButton
                   class="d-flex"
                   v-if="searchAction"
+                  :data-action-name="searchAction.name"
                   :key="searchAction.name"
                   :tooltip="searchAction.title"
                   :icon="searchAction.icon"
@@ -108,6 +110,7 @@
                     <VcsToolButton
                       v-bind="props"
                       tooltip="navbar.menu.tooltip"
+                      id="vcs-navbar-burger-menu-activator"
                       icon="$vcsMenu"
                     />
                   </template>
@@ -154,6 +157,7 @@
   } from 'vuetify/components';
   import {
     ButtonLocation,
+    deviceSymbol,
     getActionsByLocation,
   } from '../manager/navbarManager.js';
   import VcsActionButtonList from '../components/buttons/VcsActionButtonList.vue';
@@ -185,8 +189,18 @@
     setup() {
       const app = inject('vcsApp');
 
+      const { xs, mdAndUp, smAndDown, smAndUp, sm } = useDisplay();
+
       const buttonComponents = computed(() =>
-        app.navbarManager.componentIds.map((id) => app.navbarManager.get(id)),
+        app.navbarManager.componentIds
+          .map((id) => app.navbarManager.get(id))
+          .filter((buttonComponent) => {
+            if (sm.value) {
+              return buttonComponent[deviceSymbol].tablet;
+            } else {
+              return buttonComponent[deviceSymbol].desktop;
+            }
+          }),
       );
       const getActions = (location) =>
         computed(() =>
@@ -208,8 +222,6 @@
         destroySearchAction();
       });
 
-      const { xs, mdAndUp, smAndDown, smAndUp } = useDisplay();
-
       const density = computed(() => {
         return xs.value ? 'comfortable' : 'compact';
       });