@vcmap/ui 5.2.4 → 5.3.1

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

@@ -0,0 +1,36 @@
+declare const _default: import("vue").DefineComponent<{
+    value: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    options: {
+        type: ObjectConstructor;
+        required: true;
+    };
+}, {
+    localValue: any;
+    exitScreen: () => void;
+    splashScreenText: import("vue").ComputedRef<string>;
+    splashScreenCheckboxText: import("vue").ComputedRef<string>;
+    checkBox: import("vue").Ref<boolean>;
+    acceptInput: any;
+    buttonTitle: any;
+    position: import("vue").ComputedRef<{
+        width: any;
+        height: any;
+        maxWidth: any;
+        maxHeight: any;
+    }>;
+}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    value: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    options: {
+        type: ObjectConstructor;
+        required: true;
+    };
+}>>, {
+    value: boolean;
+}>;
+export default _default;

package/src/application/markdownHelper.js

@@ -1,12 +1,30 @@
 import { marked } from 'marked';
 import DOMPurify from 'dompurify';
 
+// Create a custom renderer
+const renderer = new marked.Renderer();
+
+renderer.link = (href, title, text) => {
+  const target = '_blank';
+  const titleAttr = title ? ` title="${title}"` : '';
+  return `<a href="${href}" target="${target}"${titleAttr}>${text}</a>`;
+};
+
+// Set options for marked to use the custom renderer
+marked.setOptions({
+  renderer,
+  breaks: true, // Enable line breaks
+});
+
 /**
  * @param {string} content
  * @returns {string}
  */
 export function parseAndSanitizeMarkdown(content) {
-  return DOMPurify.sanitize(marked(content));
+  // First, convert the Markdown to HTML using marked
+  const html = marked(content);
+  // Then sanitize the HTML using DOMPurify
+  return DOMPurify.sanitize(html, { ADD_ATTR: ['target'] });
 }
 
 /**

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,19 @@ 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 let checkBoxText: string;
+            export let buttonTitle: string;
+        }
+        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 +266,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 +294,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 +304,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 +321,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,15 @@ const messages = {
       export: 'Flug exportieren',
       exportPath: 'Flugpfad exportieren',
     },
+    splashScreen: {
+      name: 'Splash Screen',
+      checkBoxText:
+        'Bitte akzeptieren sie die [Bedingungen](https://vc.systems/) um Fortzufahren',
+      buttonTitle: 'Weiter',
+    },
+    customScreen: {
+      name: 'Benutzerdefinierter Screen',
+    },
     viewpoint: {
       name: 'Name (ID)',
       title: 'Titel',
@@ -227,6 +244,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,19 @@ 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 let checkBoxText: string;
+            export let buttonTitle: string;
+        }
+        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 +266,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 +294,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 +304,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 +321,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,15 @@ const messages = {
       export: 'Export flight',
       exportPath: 'Export flight path',
     },
+    splashScreen: {
+      name: 'Splash Screen',
+      checkBoxText:
+        'Please accept the [Conditions](https://vc.systems/) to continue',
+      buttonTitle: 'Continue',
+    },
+    customScreen: {
+      name: 'Custom Screen',
+    },
     viewpoint: {
       name: 'Name (ID)',
       title: 'Title',
@@ -227,6 +244,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;