@vcmap/ui 5.2.4 → 5.3.0

package/src/components/icons/+all.js

@@ -24,6 +24,7 @@ import CompassIcon from './CompassIcon.vue';
 import ComponentsIcon from './ComponentsIcon.vue';
 import ComponentsPlusIcon from './ComponentsPlusIcon.vue';
 import ConeIcon from './ConeIcon.vue';
+import CrosshairIcon from './CrosshairIcon.vue';
 import DimensionsHouseIcon from './DimensionsHouseIcon.vue';
 import EditIcon from './EditIcon.vue';
 import EditVerticesIcon from './EditVerticesIcon.vue';
@@ -218,6 +219,9 @@ const IconMap = {
   cone: {
     component: ConeIcon,
   },
+  crosshair: {
+    component: CrosshairIcon,
+  },
   dimensionsHouse: {
     component: DimensionsHouseIcon,
   },

package/src/components/icons/CrosshairIcon.vue

@@ -0,0 +1,33 @@
+<template>
+  <svg
+    id="CrosshairIcon"
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+  >
+    <g id="Gruppe_877" transform="translate(-2408 -282)">
+      <circle
+        id="Ellipse_100"
+        cx="3"
+        cy="3"
+        r="3"
+        transform="translate(2412.979 286.953)"
+        fill="currentColor"
+      />
+      <path
+        fill="currentColor"
+        id="Pfad_445"
+        d="M15.316,7.359l-1.36-.008A6,6,0,0,0,8.666,2.062V.73a.666.666,0,0,0-1.332,0V2.062a6,6,0,0,0-5.29,5.289L.683,7.359a.666.666,0,0,0,0,1.331s0,0,0-.015l1.355-.007a6,6,0,0,0,5.289,5.3v1.361a.666.666,0,0,0,1.332,0V13.965a6,6,0,0,0,5.289-5.3l1.354.007c0,.015,0,.015,0,.015a.666.666,0,0,0,0-1.331ZM8,12.673a4.66,4.66,0,1,1,4.663-4.66A4.666,4.666,0,0,1,8,12.673Z"
+        transform="translate(2407.979 281.936)"
+      />
+    </g>
+    <rect
+      id="size"
+      width="16"
+      height="16"
+      transform="translate(0 0)"
+      fill="none"
+    />
+  </svg>
+</template>

package/src/components/icons/CrosshairIcon.vue.d.ts

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

package/src/i18n/de.d.ts

@@ -46,6 +46,12 @@ declare namespace messages {
         let pitchTooltip: string;
         let overviewMapTooltip: string;
         let homeButton: string;
+        namespace locator {
+            let errorAccess: string;
+            let errorCurrentPosition: string;
+            let errorConnection: string;
+            let errorPosition: string;
+        }
     }
     export namespace categoryManager {
         let title_5: string;
@@ -147,9 +153,17 @@ declare namespace messages {
             export { _export as export };
             export let exportPath: string;
         }
-        export namespace viewpoint {
+        export namespace splashScreen {
             let name_2: string;
             export { name_2 as name };
+        }
+        export namespace customScreen {
+            let name_3: string;
+            export { name_3 as name };
+        }
+        export namespace viewpoint {
+            let name_4: string;
+            export { name_4 as name };
             let title_7: string;
             export { title_7 as title };
             let titlePlaceholder_1: string;
@@ -250,16 +264,25 @@ declare namespace messages {
         let tooltip_3: string;
         export { tooltip_3 as tooltip };
         export let languageSelector: string;
-        export namespace theme {
+        export namespace displayQuality {
             let title_10: string;
             export { title_10 as title };
+            export namespace level {
+                let low: string;
+                let medium: string;
+                let high: string;
+            }
+        }
+        export namespace theme {
+            let title_11: string;
+            export { title_11 as title };
             export let dark: string;
             export let light: string;
         }
     }
     export namespace help_1 {
-        let title_11: string;
-        export { title_11 as title };
+        let title_12: string;
+        export { title_12 as title };
         let tooltip_4: string;
         export { tooltip_4 as tooltip };
     }
@@ -269,8 +292,8 @@ declare namespace messages {
         let deactivateToolTitle: string;
     }
     export namespace legend {
-        let title_12: string;
-        export { title_12 as title };
+        let title_13: string;
+        export { title_13 as title };
         let tooltip_5: string;
         export { tooltip_5 as tooltip };
         let empty_2: string;
@@ -279,8 +302,8 @@ declare namespace messages {
         export let defaultLabelText: string;
     }
     export namespace search_1 {
-        let title_13: string;
-        export { title_13 as title };
+        let title_14: string;
+        export { title_14 as title };
         let tooltip_6: string;
         export { tooltip_6 as tooltip };
         export let select: string;
@@ -296,31 +319,31 @@ declare namespace messages {
         export let miscellaneous: string;
     }
     export namespace footer {
-        let title_14: string;
-        export { title_14 as title };
+        let title_15: string;
+        export { title_15 as title };
         export namespace attributions {
-            let title_15: string;
-            export { title_15 as title };
+            let title_16: string;
+            export { title_16 as title };
             let tooltip_7: string;
             export { tooltip_7 as tooltip };
             let empty_3: string;
             export { empty_3 as empty };
         }
         export namespace imprint {
-            let title_16: string;
-            export { title_16 as title };
+            let title_17: string;
+            export { title_17 as title };
             let tooltip_8: string;
             export { tooltip_8 as tooltip };
         }
         export namespace dataProtection {
-            let title_17: string;
-            export { title_17 as title };
+            let title_18: string;
+            export { title_18 as title };
             let tooltip_9: string;
             export { tooltip_9 as tooltip };
         }
         export namespace positionDisplay {
-            let title_18: string;
-            export { title_18 as title };
+            let title_19: string;
+            export { title_19 as title };
             let projection_1: string;
             export { projection_1 as projection };
         }

package/src/i18n/de.js

@@ -42,6 +42,14 @@ const messages = {
     pitchTooltip: 'Kameraneigung: {0}°',
     overviewMapTooltip: 'Übersichtskarte',
     homeButton: 'Zur Startansicht springen',
+    locator: {
+      errorAccess: 'Der Zugriff auf Ihre Position wurde verweigert.',
+      errorCurrentPosition:
+        'Ihre momentane Position konnte leider nicht erfasst werden.',
+      errorConnection:
+        'Während dem ermitteln Ihrer Position wurde die Verbindung verloren',
+      errorPosition: 'Ihre Position kann leider nicht erfasst werden',
+    },
   },
   categoryManager: {
     title: 'Mein Arbeitsbereich',
@@ -136,6 +144,12 @@ const messages = {
       export: 'Flug exportieren',
       exportPath: 'Flugpfad exportieren',
     },
+    splashScreen: {
+      name: 'Splash Screen',
+    },
+    customScreen: {
+      name: 'Benutzerdefinierter Screen',
+    },
     viewpoint: {
       name: 'Name (ID)',
       title: 'Titel',
@@ -227,6 +241,14 @@ const messages = {
     title: 'Einstellungen',
     tooltip: 'Einstellungen',
     languageSelector: 'Sprache',
+    displayQuality: {
+      title: 'Anzeigequalität',
+      level: {
+        low: 'Niedrige',
+        medium: 'Mittlere',
+        high: 'Hohe',
+      },
+    },
     theme: {
       title: 'Farbschema',
       dark: 'Dunkel',

package/src/i18n/en.d.ts

@@ -46,6 +46,12 @@ declare namespace messages {
         let pitchTooltip: string;
         let overviewMapTooltip: string;
         let homeButton: string;
+        namespace locator {
+            let errorAccess: string;
+            let errorCurrentPosition: string;
+            let errorConnection: string;
+            let errorPosition: string;
+        }
     }
     export namespace categoryManager {
         let title_5: string;
@@ -147,9 +153,17 @@ declare namespace messages {
             export { _export as export };
             export let exportPath: string;
         }
-        export namespace viewpoint {
+        export namespace splashScreen {
             let name_2: string;
             export { name_2 as name };
+        }
+        export namespace customScreen {
+            let name_3: string;
+            export { name_3 as name };
+        }
+        export namespace viewpoint {
+            let name_4: string;
+            export { name_4 as name };
             let title_7: string;
             export { title_7 as title };
             let titlePlaceholder_1: string;
@@ -250,16 +264,25 @@ declare namespace messages {
         let tooltip_3: string;
         export { tooltip_3 as tooltip };
         export let languageSelector: string;
-        export namespace theme {
+        export namespace displayQuality {
             let title_10: string;
             export { title_10 as title };
+            export namespace level {
+                let low: string;
+                let medium: string;
+                let high: string;
+            }
+        }
+        export namespace theme {
+            let title_11: string;
+            export { title_11 as title };
             export let dark: string;
             export let light: string;
         }
     }
     export namespace help_1 {
-        let title_11: string;
-        export { title_11 as title };
+        let title_12: string;
+        export { title_12 as title };
         let tooltip_4: string;
         export { tooltip_4 as tooltip };
     }
@@ -269,8 +292,8 @@ declare namespace messages {
         let deactivateToolTitle: string;
     }
     export namespace legend {
-        let title_12: string;
-        export { title_12 as title };
+        let title_13: string;
+        export { title_13 as title };
         let tooltip_5: string;
         export { tooltip_5 as tooltip };
         let empty_2: string;
@@ -279,8 +302,8 @@ declare namespace messages {
         export let defaultLabelText: string;
     }
     export namespace search_1 {
-        let title_13: string;
-        export { title_13 as title };
+        let title_14: string;
+        export { title_14 as title };
         let tooltip_6: string;
         export { tooltip_6 as tooltip };
         export let select: string;
@@ -296,31 +319,31 @@ declare namespace messages {
         export let miscellaneous: string;
     }
     export namespace footer {
-        let title_14: string;
-        export { title_14 as title };
+        let title_15: string;
+        export { title_15 as title };
         export namespace attributions {
-            let title_15: string;
-            export { title_15 as title };
+            let title_16: string;
+            export { title_16 as title };
             let tooltip_7: string;
             export { tooltip_7 as tooltip };
             let empty_3: string;
             export { empty_3 as empty };
         }
         export namespace imprint {
-            let title_16: string;
-            export { title_16 as title };
+            let title_17: string;
+            export { title_17 as title };
             let tooltip_8: string;
             export { tooltip_8 as tooltip };
         }
         export namespace dataProtection {
-            let title_17: string;
-            export { title_17 as title };
+            let title_18: string;
+            export { title_18 as title };
             let tooltip_9: string;
             export { tooltip_9 as tooltip };
         }
         export namespace positionDisplay {
-            let title_18: string;
-            export { title_18 as title };
+            let title_19: string;
+            export { title_19 as title };
             let projection_1: string;
             export { projection_1 as projection };
         }

package/src/i18n/en.js

@@ -42,6 +42,14 @@ const messages = {
     pitchTooltip: 'Camera pitch: {0}°',
     overviewMapTooltip: 'Show overview map',
     homeButton: 'Go to home view',
+    locator: {
+      errorAccess: 'Access to your location has been denied',
+      errorCurrentPosition:
+        'Unfortunately, your current position could not be recorded',
+      errorConnection:
+        'The connection was lost while your position was being determined',
+      errorPosition: 'Unfortunately, your position cannot be recorded',
+    },
   },
   categoryManager: {
     title: 'My Workspace',
@@ -136,6 +144,12 @@ const messages = {
       export: 'Export flight',
       exportPath: 'Export flight path',
     },
+    splashScreen: {
+      name: 'Splash Screen',
+    },
+    customScreen: {
+      name: 'Custom Screen',
+    },
     viewpoint: {
       name: 'Name (ID)',
       title: 'Title',
@@ -227,6 +241,14 @@ const messages = {
     title: 'Settings',
     tooltip: 'Configure settings',
     languageSelector: 'Language',
+    displayQuality: {
+      title: 'Display Settings',
+      level: {
+        low: 'Low',
+        medium: 'Medium',
+        high: 'High',
+      },
+    },
     theme: {
       title: 'Color theme',
       dark: 'Dark',

package/src/navigation/MapNavigation.vue

@@ -3,17 +3,37 @@
     :class="$vuetify.breakpoint.xs ? 'nav-container mobile' : 'nav-container'"
   >
     <v-row>
-      <VcsCompass :view-mode="viewMode" v-model="heading" />
+      <VcsCompass
+        :view-mode="viewMode"
+        v-model="heading"
+        :disabled="movementApiCallsDisabled"
+      />
     </v-row>
     <v-row v-if="isOblique">
-      <ObliqueRotation v-model="heading" />
+      <ObliqueRotation v-model="heading" :disabled="movementApiCallsDisabled" />
     </v-row>
+    <template v-if="$vuetify.breakpoint.mobile">
+      <v-row justify="center">
+        <OrientationToolsButton
+          v-if="showLocatorButton"
+          :icon="locatorAction.icon"
+          :tooltip="locatorAction.title"
+          :color="locatorAction.active ? 'primary' : undefined"
+          @click.stop="locatorAction.callback($event)"
+          :disabled="movementApiCallsDisabled"
+        ></OrientationToolsButton>
+      </v-row>
+    </template>
     <template v-if="$vuetify.breakpoint.mdAndUp">
       <v-row justify="center">
-        <VcsZoomButton @zoom-out="zoomOut()" @zoom-in="zoomIn()" />
+        <VcsZoomButton
+          @zoom-out="zoomOut()"
+          @zoom-in="zoomIn()"
+          :disabled="movementApiCallsDisabled"
+        />
       </v-row>
       <v-row justify="center" v-if="is3D && $vuetify.breakpoint.mdAndUp">
-        <TiltSlider v-model="tilt" />
+        <TiltSlider v-model="tilt" :disabled="movementApiCallsDisabled" />
       </v-row>
       <v-row justify="center">
         <OrientationToolsButton
@@ -21,6 +41,7 @@
           :icon="homeAction.icon"
           :tooltip="homeAction.title"
           @click.stop="homeAction.callback($event)"
+          :disabled="movementApiCallsDisabled"
         />
       </v-row>
       <v-row justify="center">
@@ -41,6 +62,7 @@
   import { ObliqueMap, CesiumMap } from '@vcmap/core';
   import { VContainer, VRow } from 'vuetify/lib';
   import { createOverviewMapAction } from '../actions/actionHelper.js';
+  import { createLocatorAction } from './locatorHelper.js';
   import {
     getWindowComponentOptions,
     overviewMapLayerSymbol,
@@ -137,6 +159,30 @@
     await map.gotoViewpoint(viewpoint);
   }
 
+  /**
+   * @param {import("@src/vcsUiApp.js").default} app
+   * @param {import("vue").Ref} isDisabled
+   * @returns {() => void}
+   */
+  function setupMovementDisabledListener(app, isDisabled) {
+    let movementDisabledListener = () => {};
+    const mapActivatedListener = app.maps.mapActivated.addEventListener(
+      (map) => {
+        movementDisabledListener();
+        isDisabled.value = map.movementApiCallsDisabled;
+        movementDisabledListener = map.movementDisabledChanged.addEventListener(
+          (mapControlOptions) => {
+            isDisabled.value = mapControlOptions.apiCalls;
+          },
+        );
+      },
+    );
+    return () => {
+      movementDisabledListener();
+      mapActivatedListener();
+    };
+  }
+
   export default {
     components: {
       OrientationToolsButton,
@@ -204,6 +250,15 @@
       const showOverviewButton = ref(
         app.overviewMap.map.layerCollection.size > 0,
       );
+      // Locator
+      const { action: locatorAction, destroy: destroyLocator } =
+        createLocatorAction(app);
+
+      const showLocatorButton = ref(true);
+      if (app.uiConfig.getByKey('showLocator')?.value === false) {
+        showLocatorButton.value = false;
+      }
+
       const overviewMapListeners = [
         app.overviewMap.map.layerCollection.added.addEventListener(() => {
           showOverviewButton.value = true;
@@ -221,17 +276,29 @@
         }),
       ];
 
+      const movementApiCallsDisabled = ref(
+        !!app.maps.activeMap?.movementApiCallsDisabled,
+      );
+      const removeMovementDisabledListener = setupMovementDisabledListener(
+        app,
+        movementApiCallsDisabled,
+      );
+
       const { action: homeAction, destroy: homeDestroy } = setupHomeButton(app);
 
       onUnmounted(() => {
         if (overviewDestroy) {
           overviewDestroy();
         }
+        if (destroyLocator) {
+          destroyLocator();
+        }
         if (homeDestroy) {
           homeDestroy();
         }
         postRenderHandler();
         overviewMapListeners.forEach((cb) => cb());
+        removeMovementDisabledListener();
       });
 
       return {
@@ -251,8 +318,11 @@
           zoom(app.maps.activeMap, true);
         },
         overviewAction: reactive(overviewAction),
+        locatorAction: reactive(locatorAction),
         showOverviewButton,
+        showLocatorButton,
         homeAction,
+        movementApiCallsDisabled,
       };
     },
   };

package/src/navigation/MapNavigation.vue.d.ts

@@ -40,7 +40,43 @@ declare const _default: import("vue").DefineComponent<{}, {
          */
         disabled?: boolean | undefined;
     };
+    locatorAction: {
+        /**
+         * - reactive and translatable name rendered in overflow
+         */
+        name: string;
+        /**
+         * - reactive and translatable title rendered as tooltip
+         */
+        title?: string | undefined;
+        /**
+         * - icon rendered on the button. If no icon provided, item is rendered in overflow
+         */
+        icon?: string | undefined;
+        /**
+         * - callback function is triggered when the button is clicked
+         */
+        callback: import("../actions/actionHelper.js").ActionCallback;
+        /**
+         * - optional state of button. If active, button is rendered in primary color
+         */
+        active?: boolean | undefined;
+        /**
+         * - optional hasUpdate of button. If true, a yellow notification is rendered next to the button
+         */
+        hasUpdate?: boolean | undefined;
+        /**
+         * - optional background state. If active and background, button is rendered in primary color outlined
+         */
+        background?: boolean | undefined;
+        /**
+         * - optional flag to indicate that the action is disabled
+         */
+        disabled?: boolean | undefined;
+    };
     showOverviewButton: import("vue").Ref<boolean>;
+    showLocatorButton: import("vue").Ref<boolean>;
     homeAction: any;
+    movementApiCallsDisabled: import("vue").Ref<boolean>;
 }, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
 export default _default;

package/src/navigation/ObliqueRotation.vue

@@ -6,12 +6,14 @@
         icon="$vcsRotateLeft"
         tooltip="navigation.obliqueLeftTooltip"
         elevation="0"
+        :disabled="disabled"
       />
       <OrientationToolsButton
         @click="input(90)"
         icon="$vcsRotateRight"
         tooltip="navigation.obliqueRightTooltip"
         elevation="0"
+        :disabled="disabled"
       />
     </div>
   </div>
@@ -22,6 +24,7 @@
 
   /**
    * @vue-prop {number} value - the current heading
+   * @vue-prop {boolean} disabled - whether ObliqueRotation should be disabled
    * @vue-event {number} input
    */
   export default {
@@ -32,6 +35,11 @@
         type: Number,
         required: true,
       },
+      disabled: {
+        type: Boolean,
+        default: false,
+        required: false,
+      },
     },
     methods: {
       input(rotation) {

package/src/navigation/ObliqueRotation.vue.d.ts

@@ -3,6 +3,11 @@ declare const _default: import("vue").DefineComponent<{
         type: NumberConstructor;
         required: true;
     };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+        required: false;
+    };
 }, {}, {}, {}, {
     input(rotation: any): void;
 }, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
@@ -10,5 +15,12 @@ declare const _default: import("vue").DefineComponent<{
         type: NumberConstructor;
         required: true;
     };
-}>>, {}>;
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+        required: false;
+    };
+}>>, {
+    disabled: boolean;
+}>;
 export default _default;

package/src/navigation/TiltSlider.vue

@@ -4,7 +4,7 @@
     tooltip-position="left"
   >
     <template #activator="{ on, attrs }">
-      <v-card class="w-8" v-on="on" v-bind="attrs">
+      <v-card class="w-8" v-on="on" v-bind="attrs" :disabled="disabled">
         <v-slider
           track-color="base lighten-3"
           v-model="tilt"
@@ -13,6 +13,7 @@
           vertical
           hide-details
           class="vcs-slider"
+          v-bind="{ ...$attrs }"
         />
       </v-card>
     </template>
@@ -77,6 +78,7 @@
   /**
    * @description A vertical slider from 0 to -90. pass value with v-model
    * @vue-prop {number} value
+   * @vue-prop {boolean} disabled - whether tilt slider should be disabled
    * @vue-event {number} input
    */
   export default {
@@ -91,6 +93,11 @@
         type: Number,
         required: true,
       },
+      disabled: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
     },
     data() {
       return {