@vcmap/ui 5.3.7 → 6.0.0-rc.10

package/src/manager/window/windowManager.js

@@ -2,7 +2,7 @@ import { computed, reactive, ref } from 'vue';
 import { VcsEvent } from '@vcmap/core';
 import { v4 as uuidv4 } from 'uuid';
 import { parseEnumValue } from '@vcsuite/parsers';
-import { check } from '@vcsuite/check';
+import { check, oneOf } from '@vcsuite/check';
 import { vcsAppSymbol } from '../../pluginHelper.js';
 
 /**
@@ -102,22 +102,53 @@ export function isSlotPosition(windowPosition) {
 }
 
 /**
- * @typedef {Object} WindowComponentOptions
+ * @typedef {{
+ *   id?: string,
+ *   parentId?: string,
+ *   component: import("vue").Component<T>,
+ *   headerComponent?: import("vue").Component<T>,
+ *   state? : WindowStateOptions,
+ *   position? : Partial<WindowPositionOptions>,
+ *   slot?: WindowSlot,
+ *   props?: T,
+ *   provides?: Record<string, unknown>
+ * }} WindowComponentOptions
+ * @template [T=any]
  * @property {string} [id] Optional ID, If not provided an uuid will be generated.
  * @property {string} [parentId] An optional ID of a parent window for 'dynamicChild' slot. Parent windows with slot dynamicRight are not supported.
- * @property {import("vue").Component} component Main Component which is shown below the header.
- * @property {import("vue").Component} [headerComponent] Replaces the Header Component.
- * @property {Partial<WindowState>} [state]
+ * @property {import("vue").Component<T, unknown, unknown>} component Main Component which is shown below the header.
+ * @property {import("vue").Component<T, unknown, unknown>} [headerComponent] Replaces the Header Component.
+ * @property {WindowStateOptions} [state]
  * @property {Partial<WindowPositionOptions>} [position] Will be merged with default position for slot
  * @property {WindowSlot} [slot]
- * @property {Object} [props]
+ * @property {T} [props]
  * @property {Object} [provides]
  */
 
+/**
+ * @typedef {T|import('vue').Ref<T>|import('vue').ComputedRef<T>} OptionsOrRef
+ * @template T
+ */
+
+/**
+ * @typedef {Object} WindowStateOptions
+ * @property {OptionsOrRef<boolean>} [hideHeader] be used to not show the header.
+ * @property {OptionsOrRef<boolean>} [hidePin] be used to not show the pin button.
+ * @property {OptionsOrRef<string|string[]>} [headerTitle] An optional translatable header. If an array is provided all elements are translated and joined afterward.
+ * @property {OptionsOrRef<string>} [headerIcon]
+ * @property {OptionsOrRef<Array<import("../../actions/actionHelper.js").VcsAction>>} [headerActions]
+ * @property {OptionsOrRef<number>} [headerActionsOverflow]
+ * @property {OptionsOrRef<string>} [infoUrl] An optional url referencing help or further information on the window's content.
+ * @property {OptionsOrRef<function():string>} [infoUrlCallback] An optional function returning an url referencing help or further information. Can be used for urls depending on the app's locale, e.g. app.getHelpUrl()
+ * @property {Record<string, string>} [styles] Can be used to add additional styles to the root WindowComponent. Use Vue Style Bindings Object Syntax https://vuejs.org/v2/guide/class-and-style.html
+ * @property {Array<string>|Record<string,string>} [classes] Can be used to add additional classes to the root WindowComponent. Use Vue Class Bindings Syntax https://vuejs.org/v2/guide/class-and-style.html
+ */
+
 /**
  * @typedef {Object} WindowState
  * @property {string} id
  * @property {string|vcsAppSymbol} owner Owner of the window, set by windowManager on add
+ * @property {string|undefined} parentId - the parent of this window
  * @property {boolean} [hideHeader] be used to not show the header.
  * @property {boolean} [hidePin] be used to not show the pin button.
  * @property {string|string[]} [headerTitle] An optional translatable header. If an array is provided all elements are translated and joined afterward.
@@ -132,17 +163,29 @@ export function isSlotPosition(windowPosition) {
  */
 
 /**
- * @typedef {Object} WindowComponent
+ * @typedef {{
+ *   id: string,
+ *   parentId?: string,
+ *   component: import("vue").Component<T, unknown, unknown>,
+ *   headerComponent?: import("vue").Component<T, unknown, unknown>,
+ *   state : Partial<WindowState>,
+ *   position : Partial<WindowPositionOptions>,
+ *   slot: WindowSlot,
+ *   props: T,
+ *   provides: Record<string, unknown>,
+ *   zIndex: import("vue").ComputedGetter<number>
+ * }} WindowComponent
+ * @template {Object} [T=Object]
  * @property {string} id
  * @property {string} [parentId]
- * @property {import("vue").Component} component
- * @property {import("vue").Component} [headerComponent]
+ * @property {import("vue").Component<T, unknown, unknown>} component
+ * @property {import("vue").Component<T, unknown, unknown>} [headerComponent]
  * @property {WindowState} state
  * @property {WindowPosition} [position]
  * @property {WindowPositionOptions} initialPositionOptions
  * @property {import("vue").Ref<WindowSlot>} slot
  * @property {WindowSlot} initialSlot
- * @property {Object} props
+ * @property {T} props
  * @property {Object} provides
  * @property {import("vue").ComputedGetter<number>} zIndex
  */
@@ -267,9 +310,9 @@ class WindowManager {
     this.removed = new VcsEvent();
     /**
      * reactive ordered array of ids,
-     * @type {Array<string>}
+     * @type {import("vue").UnwrapRef<string[]>}
      */
-    this.componentIds = [];
+    this.componentIds = reactive([]);
     /**
      * reactive ordered array of ids, defining the zIndex of a component
      * @type {import("vue").Ref<Array<string>>}
@@ -540,7 +583,7 @@ class WindowManager {
    * @returns {WindowComponent}
    */
   add(windowComponentOptions, owner) {
-    check(owner, [String, vcsAppSymbol]);
+    check(owner, oneOf(String, vcsAppSymbol));
 
     if (
       windowComponentOptions.id &&
@@ -576,6 +619,7 @@ class WindowManager {
       ? [...(windowComponentOptions?.state?.classes ?? [])]
       : { ...windowComponentOptions?.state?.classes };
 
+    /** @type {WindowState} */
     const state = reactive({
       id,
       parentId,
@@ -724,7 +768,7 @@ class WindowManager {
    */
   addExternalIdToZIndex(id, owner) {
     check(id, String);
-    check(owner, [String, vcsAppSymbol]);
+    check(owner, oneOf(String, vcsAppSymbol));
 
     if (this.has(id)) {
       throw new Error(`Id ${id} already belongs to a window id`);

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

@@ -7,9 +7,9 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-}, {}, {}, {}, {
+}, any, any, {}, {
     emit(event: any, dir: any): void;
-}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     canEmit: {
         type: BooleanConstructor;
         default: boolean;
@@ -21,5 +21,5 @@ declare const _default: import("vue").DefineComponent<{
 }>>, {
     canEmit: boolean;
     hideTicks: boolean;
-}>;
+}, {}>;
 export default _default;

package/src/navigation/MapNavigation.vue

@@ -1,6 +1,7 @@
 <template>
   <v-container
-    :class="$vuetify.breakpoint.xs ? 'nav-container mobile' : 'nav-container'"
+    :class="xs ? 'nav-container mobile' : 'nav-container'"
+    class="map-navigation"
   >
     <v-row>
       <VcsCompass
@@ -12,7 +13,7 @@
     <v-row v-if="isOblique">
       <ObliqueRotation v-model="heading" :disabled="movementApiCallsDisabled" />
     </v-row>
-    <template v-if="$vuetify.breakpoint.mobile">
+    <template v-if="mobile">
       <v-row justify="center">
         <OrientationToolsButton
           v-if="showLocatorButton"
@@ -24,7 +25,7 @@
         ></OrientationToolsButton>
       </v-row>
     </template>
-    <template v-if="$vuetify.breakpoint.mdAndUp">
+    <template v-if="mdAndUp">
       <v-row justify="center">
         <VcsZoomButton
           @zoom-out="zoomOut()"
@@ -32,7 +33,7 @@
           :disabled="movementApiCallsDisabled"
         />
       </v-row>
-      <v-row justify="center" v-if="is3D && $vuetify.breakpoint.mdAndUp">
+      <v-row justify="center" v-if="is3D && mdAndUp">
         <TiltSlider v-model="tilt" :disabled="movementApiCallsDisabled" />
       </v-row>
       <v-row justify="center">
@@ -59,8 +60,10 @@
 
 <script>
   import { computed, inject, ref, reactive, onUnmounted } from 'vue';
-  import { ObliqueMap, CesiumMap } from '@vcmap/core';
-  import { VContainer, VRow } from 'vuetify/lib';
+  import { ObliqueMap, CesiumMap, ObliqueViewDirection } from '@vcmap/core';
+  import { VContainer, VRow } from 'vuetify/components';
+  import { useDisplay } from 'vuetify';
+  import { Math as CesiumMath } from '@vcmap-cesium/engine';
   import { createOverviewMapAction } from '../actions/actionHelper.js';
   import { createLocatorAction } from './locatorHelper.js';
   import {
@@ -183,6 +186,16 @@
     };
   }
 
+  /**
+   * @enum {number}
+   */
+  const directionToDegrees = {
+    [ObliqueViewDirection.NORTH]: 0,
+    [ObliqueViewDirection.EAST]: 90,
+    [ObliqueViewDirection.SOUTH]: 180,
+    [ObliqueViewDirection.WEST]: 270,
+  };
+
   export default {
     components: {
       OrientationToolsButton,
@@ -202,10 +215,16 @@
 
       const handleRenderEvent = ({ map }) => {
         viewMode.value = getViewModeForMap(map);
-        const vp = map.getViewpointSync();
-        if (vp) {
-          headingRef.value = vp.heading;
-          tiltRef.value = vp.pitch;
+        if (map instanceof ObliqueMap && map.currentImage) {
+          headingRef.value = map.currentImage.viewDirectionAngle
+            ? 90 - CesiumMath.toDegrees(map.currentImage.viewDirectionAngle)
+            : directionToDegrees[map.currentImage.viewDirection];
+        } else {
+          const vp = map.getViewpointSync();
+          if (vp) {
+            headingRef.value = vp.heading;
+            tiltRef.value = vp.pitch;
+          }
         }
       };
 
@@ -250,6 +269,25 @@
       const showOverviewButton = ref(
         app.overviewMap.map.layerCollection.size > 0,
       );
+
+      const handleOverviewMapActiveOnStartup = (item) => {
+        if (
+          item &&
+          item.name === 'overviewMapActiveOnStartup' &&
+          showOverviewButton.value &&
+          item.value &&
+          !overviewAction.active
+        ) {
+          overviewAction.callback();
+        }
+      };
+      handleOverviewMapActiveOnStartup(
+        app.uiConfig.getByKey('overviewMapActiveOnStartup'),
+      );
+      const uiConfigListener = app.uiConfig.added.addEventListener(
+        handleOverviewMapActiveOnStartup,
+      );
+
       // Locator
       const { action: locatorAction, destroy: destroyLocator } =
         createLocatorAction(app);
@@ -287,6 +325,7 @@
       const { action: homeAction, destroy: homeDestroy } = setupHomeButton(app);
 
       onUnmounted(() => {
+        uiConfigListener();
         if (overviewDestroy) {
           overviewDestroy();
         }
@@ -301,7 +340,12 @@
         removeMovementDisabledListener();
       });
 
+      const { xs, mdAndUp, mobile } = useDisplay();
+
       return {
+        xs,
+        mdAndUp,
+        mobile,
         viewMode,
         heading,
         tilt,
@@ -331,9 +375,12 @@
 <style lang="scss" scoped>
   .nav-container {
     position: absolute;
-    right: 2rem;
-    bottom: 1rem;
+    right: 26px;
+    // right: 26px --> the 2rem were 26px in the old map, now 32px ?Important?
+    bottom: 13px;
+    // bottom: 13px --> the 1rem were 13px in the old map, now 16px ?Important?
     width: unset;
+    padding: 12px;
     &.mobile {
       top: 1rem;
       right: 1rem;
@@ -341,7 +388,7 @@
     }
   }
   .nav-container > {
-    .row {
+    .v-row {
       margin-top: 15px;
       margin-bottom: 0;
     }

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

@@ -1,4 +1,7 @@
 declare const _default: import("vue").DefineComponent<{}, {
+    xs: import("vue").Ref<boolean>;
+    mdAndUp: import("vue").Ref<boolean>;
+    mobile: import("vue").ComputedRef<boolean>;
     viewMode: import("vue").Ref<string>;
     heading: import("vue").WritableComputedRef<number>;
     tilt: import("vue").WritableComputedRef<number>;
@@ -22,7 +25,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         /**
          * - callback function is triggered when the button is clicked
          */
-        callback: import("../actions/actionHelper.js").ActionCallback;
+        callback: import("../actions/actionHelper.js", { with: { "resolution-mode": "import" } }).ActionCallback;
         /**
          * - optional state of button. If active, button is rendered in primary color
          */
@@ -56,7 +59,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         /**
          * - callback function is triggered when the button is clicked
          */
-        callback: import("../actions/actionHelper.js").ActionCallback;
+        callback: import("../actions/actionHelper.js", { with: { "resolution-mode": "import" } }).ActionCallback;
         /**
          * - optional state of button. If active, button is rendered in primary color
          */
@@ -78,5 +81,5 @@ declare const _default: import("vue").DefineComponent<{}, {
     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<{}>>, {}>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 export default _default;

package/src/navigation/ObliqueRotation.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="d-inline-flex rounded vcs-oblique-orientation">
+  <div class="d-inline-flex rounded oblique-orientation">
     <div class="d-inline-flex rounded inner">
       <OrientationToolsButton
         @click="input(-90)"
@@ -31,7 +31,7 @@
     name: 'ObliqueRotation',
     components: { OrientationToolsButton },
     props: {
-      value: {
+      modelValue: {
         type: Number,
         required: true,
       },
@@ -43,38 +43,36 @@
     },
     methods: {
       input(rotation) {
-        let currentValue = this.value + rotation;
+        let currentValue = this.modelValue + rotation;
         if (currentValue > 360) {
           currentValue -= 360;
         } else if (currentValue < 0) {
           currentValue += 360;
         }
-        this.$emit('input', currentValue);
+        this.$emit('update:modelValue', currentValue);
       },
     },
   };
 </script>
 
 <style lang="scss" scoped>
-  .vcs-oblique-orientation {
+  .oblique-orientation {
     box-shadow: rgba(0, 0, 0, 0.15) 0 2px 2px 0;
     .inner {
       box-shadow: rgba(0, 0, 0, 0.25) 0 -2px 2px 0 inset;
     }
-    ::v-deep {
-      .btn-orientation-tools {
-        &:first-child {
-          box-shadow:
-            rgba(0, 0, 0, 0.25) 2px 2px 1px -2px,
-            rgba(0, 0, 0, 0.02) -3px 2px 2px 0,
-            rgba(0, 0, 0, 0.12) 0 1px 1px 0 !important;
-        }
-        &:last-child {
-          box-shadow:
-            rgba(0, 0, 0, 0.02) 1px 4px 1px -2px,
-            rgba(0, 0, 0, 0.02) 1px 2px 1px 0,
-            rgba(0, 0, 0, 0.1) 1px 1px 1px 0 !important;
-        }
+    :deep(.btn-orientation-tools) {
+      &:first-child {
+        box-shadow:
+          rgba(0, 0, 0, 0.25) 2px 2px 1px -2px,
+          rgba(0, 0, 0, 0.02) -3px 2px 2px 0,
+          rgba(0, 0, 0, 0.12) 0 1px 1px 0 !important;
+      }
+      &:last-child {
+        box-shadow:
+          rgba(0, 0, 0, 0.02) 1px 4px 1px -2px,
+          rgba(0, 0, 0, 0.02) 1px 2px 1px 0,
+          rgba(0, 0, 0, 0.1) 1px 1px 1px 0 !important;
       }
     }
   }

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

@@ -1,5 +1,5 @@
 declare const _default: import("vue").DefineComponent<{
-    value: {
+    modelValue: {
         type: NumberConstructor;
         required: true;
     };
@@ -8,10 +8,10 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
         required: false;
     };
-}, {}, {}, {}, {
+}, any, any, {}, {
     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<{
-    value: {
+}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
         type: NumberConstructor;
         required: true;
     };
@@ -22,5 +22,5 @@ declare const _default: import("vue").DefineComponent<{
     };
 }>>, {
     disabled: boolean;
-}>;
+}, {}>;
 export default _default;

package/src/navigation/OrientationToolsButton.vue

@@ -1,26 +1,24 @@
 <template>
-  <VcsTooltip :tooltip-position="tooltipPosition" :tooltip="tooltip">
-    <template #activator="{ on, attrs }">
-      <v-card
-        class="h-8 w-8 d-flex align-center justify-center text-center btn-orientation-tools"
-        v-bind="{ ...$attrs, ...attrs }"
-        v-on="{ ...$listeners, ...on }"
-      >
-        <v-icon size="16">{{ icon }}</v-icon>
-      </v-card>
-    </template>
-  </VcsTooltip>
+  <v-card
+    class="d-flex align-center justify-center text-center btn-orientation-tools orientation-tools-button"
+    v-bind="{ ...$attrs }"
+    :height="height"
+    :width="width"
+  >
+    <v-icon :size="iconSize">{{ icon }}</v-icon>
+    <v-tooltip
+      v-if="tooltip"
+      activator="parent"
+      :location="tooltipPosition"
+      :text="$st(tooltip)"
+    ></v-tooltip>
+  </v-card>
 </template>
-<style lang="scss" scoped>
-  .btn-orientation-tools {
-    &:before {
-      background-color: transparent !important;
-    }
-  }
-</style>
+<style lang="scss" scoped></style>
 <script>
-  import { VCard, VIcon } from 'vuetify/lib';
-  import VcsTooltip from '../components/notification/VcsTooltip.vue';
+  import { VCard, VIcon, VTooltip } from 'vuetify/components';
+  import { computed } from 'vue';
+  import { useFontSize, useIconSize } from '../vuePlugins/vuetify.js';
 
   /**
    * @description v-card with h & w 8. Requires an icon and binds all attributes & listeners to the v-card
@@ -31,9 +29,9 @@
   export default {
     name: 'OrientationToolsButton',
     components: {
-      VcsTooltip,
       VCard,
       VIcon,
+      VTooltip,
     },
     props: {
       icon: {
@@ -49,5 +47,23 @@
         default: 'left',
       },
     },
+    setup() {
+      const fontSize = useFontSize();
+
+      const iconSize = useIconSize();
+      const height = computed(() => {
+        return fontSize.value * 2.5;
+      });
+      // 32px
+      const width = computed(() => {
+        return fontSize.value * 2.5;
+      });
+
+      return {
+        iconSize,
+        height,
+        width,
+      };
+    },
   };
 </script>

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

@@ -11,7 +11,11 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: string;
     };
-}, {}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+}, {
+    iconSize: import("vue").ComputedRef<number>;
+    height: import("vue").ComputedRef<number>;
+    width: import("vue").ComputedRef<number>;
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     icon: {
         type: StringConstructor;
         required: true;
@@ -26,5 +30,5 @@ declare const _default: import("vue").DefineComponent<{
     };
 }>>, {
     tooltipPosition: string;
-}>;
+}, {}>;
 export default _default;