@vcmap/ui 6.0.0-rc.8 → 6.0.0

package/src/navigation/MapNavCompass.vue

@@ -1,151 +1,172 @@
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="58"
-    height="58"
-    viewBox="0 0 58 58"
-  >
-    <g id="Group_1654" data-name="Group 1654" transform="translate(24)">
-      <path
-        :class="canEmit ? 'cursor-pointer' : ''"
-        id="north_arrow"
-        data-name="Polygon 14"
-        d="M4,0,8,13H0Z"
-        transform="translate(1)"
-        fill="currentColor"
-        @click="emit($event, 0)"
-      />
-      <path
-        :class="canEmit ? 'cursor-pointer' : ''"
-        id="south_arrow"
-        data-name="Polygon 17"
-        d="M4,0,8,13H0Z"
-        transform="translate(9 58) rotate(180)"
-        fill="rgba(88,88,88,0.51)"
-        @click="emit($event, 180)"
-      />
-    </g>
-    <g
-      id="Group_1653"
-      data-name="Group 1653"
-      transform="translate(0 33) rotate(-90)"
-    >
-      <path
-        :class="canEmit ? 'cursor-pointer' : ''"
-        id="west_arrow"
-        data-name="Polygon 14"
-        d="M4,0,8,13H0Z"
-        fill="rgba(88,88,88,0.51)"
-        @click="emit($event, 270)"
-      />
-      <path
-        :class="canEmit ? 'cursor-pointer' : ''"
-        id="east_arrow"
-        data-name="Polygon 17"
-        d="M4,0,8,13H0Z"
-        transform="translate(8 58) rotate(180)"
-        fill="rgba(88,88,88,0.51)"
-        @click="emit($event, 90)"
-      />
-    </g>
-    <g
-      id="Group_1672"
-      data-name="Group 1672"
-      transform="translate(1)"
-      v-if="!hideTicks"
-    >
-      <line
-        id="Line_289-2"
-        data-name="Line 289"
-        x2="6.079"
-        transform="translate(3.751 15) rotate(30)"
-        fill="none"
-        stroke="#707070"
-        stroke-linecap="round"
-        stroke-width="1"
-      />
-      <line
-        id="Line_290-2"
-        data-name="Line 290"
-        x2="4.665"
-        transform="translate(48.208 40.667) rotate(30)"
-        fill="none"
-        stroke="#707070"
-        stroke-linecap="round"
-        stroke-width="1"
-      />
-      <line
-        id="Line_289-4"
-        data-name="Line 289"
-        x2="6.079"
-        transform="translate(14 53.249) rotate(-60)"
-        fill="none"
-        stroke="#707070"
-        stroke-linecap="round"
-        stroke-width="1"
-      />
-      <line
-        id="Line_290-3"
-        data-name="Line 290"
-        x2="4.665"
-        transform="translate(39.668 8.792) rotate(-60)"
-        fill="none"
-        stroke="#707070"
-        stroke-linecap="round"
-        stroke-width="1"
-      />
-      <line
-        id="Line_289-5"
-        data-name="Line 289"
-        x2="6.079"
-        transform="translate(14 4.751) rotate(60)"
-        fill="none"
-        stroke="#707070"
-        stroke-linecap="round"
-        stroke-width="1"
-      />
-      <line
-        id="Line_290-4"
-        data-name="Line 290"
-        x2="4.665"
-        transform="translate(39.667 49.208) rotate(60)"
-        fill="none"
-        stroke="#707070"
-        stroke-linecap="round"
-        stroke-width="1"
-      />
-      <line
-        id="Line_289-6"
-        data-name="Line 289"
-        x2="6.079"
-        transform="translate(3.752 43) rotate(-30)"
-        fill="none"
-        stroke="#707070"
-        stroke-linecap="round"
-        stroke-width="1"
-      />
-      <line
-        id="Line_290-5"
-        data-name="Line 290"
-        x2="4.665"
-        transform="translate(48.209 17.333) rotate(-30)"
-        fill="none"
-        stroke="#707070"
-        stroke-linecap="round"
-        stroke-width="1"
-      />
-    </g>
-  </svg>
+  <span>
+    <v-tooltip location="start" target="parent" :disabled="!canEmit">
+      <template #activator="{ props }">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="58"
+          height="58"
+          viewBox="0 0 58 58"
+        >
+          <g
+            id="Group_1654"
+            data-name="Group 1654"
+            transform="translate(24)"
+            v-bind="props"
+          >
+            <path
+              :class="canEmit ? 'cursor-pointer hover' : ''"
+              id="north_arrow"
+              data-name="Polygon 14"
+              d="M4,0,8,13H0Z"
+              transform="translate(1)"
+              fill="currentColor"
+              @click="emit($event, 0)"
+              @mouseenter="alignment = 'alignNorth'"
+            />
+            <path
+              :class="canEmit ? 'cursor-pointer hover' : ''"
+              id="south_arrow"
+              data-name="Polygon 17"
+              d="M4,0,8,13H0Z"
+              transform="translate(9 58) rotate(180)"
+              fill="rgba(88,88,88,0.51)"
+              @click="emit($event, 180)"
+              @mouseenter="alignment = 'alignSouth'"
+            />
+          </g>
+          <g
+            id="Group_1653"
+            data-name="Group 1653"
+            transform="translate(0 33) rotate(-90)"
+            v-bind="props"
+          >
+            <path
+              :class="canEmit ? 'cursor-pointer hover' : ''"
+              id="west_arrow"
+              data-name="Polygon 14"
+              d="M4,0,8,13H0Z"
+              fill="rgba(88,88,88,0.51)"
+              @click="emit($event, 270)"
+              @mouseenter="alignment = 'alignWest'"
+            />
+            <path
+              :class="canEmit ? 'cursor-pointer hover' : ''"
+              id="east_arrow"
+              data-name="Polygon 17"
+              d="M4,0,8,13H0Z"
+              transform="translate(8 58) rotate(180)"
+              fill="rgba(88,88,88,0.51)"
+              @click="emit($event, 90)"
+              @mouseenter="alignment = 'alignEast'"
+            />
+          </g>
+          <g
+            id="Group_1672"
+            data-name="Group 1672"
+            transform="translate(1)"
+            v-if="!hideTicks"
+          >
+            <line
+              id="Line_289-2"
+              data-name="Line 289"
+              x2="6.079"
+              transform="translate(3.751 15) rotate(30)"
+              fill="none"
+              stroke="#707070"
+              stroke-linecap="round"
+              stroke-width="1"
+            />
+            <line
+              id="Line_290-2"
+              data-name="Line 290"
+              x2="4.665"
+              transform="translate(48.208 40.667) rotate(30)"
+              fill="none"
+              stroke="#707070"
+              stroke-linecap="round"
+              stroke-width="1"
+            />
+            <line
+              id="Line_289-4"
+              data-name="Line 289"
+              x2="6.079"
+              transform="translate(14 53.249) rotate(-60)"
+              fill="none"
+              stroke="#707070"
+              stroke-linecap="round"
+              stroke-width="1"
+            />
+            <line
+              id="Line_290-3"
+              data-name="Line 290"
+              x2="4.665"
+              transform="translate(39.668 8.792) rotate(-60)"
+              fill="none"
+              stroke="#707070"
+              stroke-linecap="round"
+              stroke-width="1"
+            />
+            <line
+              id="Line_289-5"
+              data-name="Line 289"
+              x2="6.079"
+              transform="translate(14 4.751) rotate(60)"
+              fill="none"
+              stroke="#707070"
+              stroke-linecap="round"
+              stroke-width="1"
+            />
+            <line
+              id="Line_290-4"
+              data-name="Line 290"
+              x2="4.665"
+              transform="translate(39.667 49.208) rotate(60)"
+              fill="none"
+              stroke="#707070"
+              stroke-linecap="round"
+              stroke-width="1"
+            />
+            <line
+              id="Line_289-6"
+              data-name="Line 289"
+              x2="6.079"
+              transform="translate(3.752 43) rotate(-30)"
+              fill="none"
+              stroke="#707070"
+              stroke-linecap="round"
+              stroke-width="1"
+            />
+            <line
+              id="Line_290-5"
+              data-name="Line 290"
+              x2="4.665"
+              transform="translate(48.209 17.333) rotate(-30)"
+              fill="none"
+              stroke="#707070"
+              stroke-linecap="round"
+              stroke-width="1"
+            />
+          </g>
+        </svg>
+      </template>
+      <span>{{ $st(`navigation.compass.${alignment}`) }}</span>
+    </v-tooltip>
+  </span>
 </template>
 
 <script>
+  import { ref } from 'vue';
+  import { VTooltip } from 'vuetify/components';
+
   /**
-   * @description The compass with ticks along the border
+   * @description The compass with ticks along the border and alignment tooltips on arrows.
    * @vue-prop {boolean} [canEmit=true] - whether to emit click events on cardinal direction arrows or not
    * @vue-prop {boolean} [hideTicks=false] - hide ticks on navigation rose
    * @vue-event {HTMLEvent} direction-click - raised when a cardinal direction arrow is clicked
    */
   export default {
+    components: { VTooltip },
     props: {
       canEmit: {
         type: Boolean,
@@ -165,6 +186,9 @@
         }
       },
     },
+    setup() {
+      return { alignment: ref('') };
+    },
   };
 </script>
 
@@ -174,8 +198,10 @@
     height: 85%;
     margin: 7.5%;
   }
-
-  svg path:hover {
+  svg g:focus {
+    outline: none;
+  }
+  .hover:hover {
     fill: var(--v-primary-lighten1) !important;
   }
 </style>

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

@@ -7,7 +7,9 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-}, any, any, {}, {
+}, {
+    alignment: import("vue").Ref<string>;
+}, any, {}, {
     emit(event: any, dir: any): void;
 }, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     canEmit: {

package/src/navigation/MapNavigation.vue

@@ -60,9 +60,10 @@
 
 <script>
   import { computed, inject, ref, reactive, onUnmounted } from 'vue';
-  import { ObliqueMap, CesiumMap } from '@vcmap/core';
+  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 {
@@ -185,6 +186,16 @@
     };
   }
 
+  /**
+   * @enum {number}
+   */
+  const directionToDegrees = {
+    [ObliqueViewDirection.NORTH]: 0,
+    [ObliqueViewDirection.EAST]: 90,
+    [ObliqueViewDirection.SOUTH]: 180,
+    [ObliqueViewDirection.WEST]: 270,
+  };
+
   export default {
     components: {
       OrientationToolsButton,
@@ -204,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;
+          }
         }
       };
 

package/src/navigation/VcsCompass.vue

@@ -2,9 +2,10 @@
   <v-sheet
     :style="{
       transform: `rotate(${compassRotation}deg)`,
+      transition: 'transform 0.2s ease',
     }"
     @click="$emit('update:modelValue', 0)"
-    class="d-flex flex-column justify-center align-center position-relative rounded-circle user-select-none transition-transform-200-ease vcs-compass"
+    class="d-flex flex-column justify-center align-center position-relative rounded-circle user-select-none vcs-compass"
     elevation="1"
     :height="height"
     :width="width"

package/src/navigation/overviewMap.js

@@ -232,7 +232,10 @@ class OverviewMap {
     this._collectionListeners = [
       this._app.maps.layerCollection.added.addEventListener((layer) => {
         if (layer.properties.showInOverviewMap) {
-          const clone = deserializeLayer(this._app, layer.toJSON());
+          const clone = deserializeLayer(this._app, {
+            ...layer.toJSON(),
+            mapNames: [this._map.name],
+          });
           clone.activate();
           const idx = this._map.layerCollection.indexOf(clone);
           if (idx < 0) {

package/src/obliqueFallbackWarnings.d.ts

@@ -0,0 +1,5 @@
+/**
+ * @param {import("./vcsUiApp.js").default} app
+ * @returns {() => void}
+ */
+export default function createObliqueFallbackWarnings(app: import("./vcsUiApp.js").default): () => void;

package/src/obliqueFallbackWarnings.js

@@ -0,0 +1,54 @@
+import { ObliqueMap } from '@vcmap/core';
+import { NotificationType } from './notifier/notifier.js';
+
+function createNotification(app) {
+  app.notifier.add({
+    title: 'navigation.obliqueFallback.title',
+    type: NotificationType.WARNING,
+    message: 'navigation.obliqueFallback.message',
+  });
+}
+
+/**
+ * @param {import("./vcsUiApp.js").default} app
+ * @returns {() => void}
+ */
+export default function createObliqueFallbackWarnings(app) {
+  const fallbackMapEventListener =
+    app.maps.fallbackMapActivated.addEventListener(() => {
+      createNotification(app);
+    });
+
+  const mapListeners = new Map();
+  const setMapListener = (map) => {
+    mapListeners.set(
+      map,
+      map.failedToSetCollection.addEventListener(() => {
+        createNotification(app);
+      }),
+    );
+  };
+
+  app.maps.getByType(ObliqueMap.className).forEach(setMapListener);
+
+  const mapAddedListener = app.maps.added.addEventListener((map) => {
+    if (map instanceof ObliqueMap) {
+      setMapListener(map);
+    }
+  });
+
+  const mapRemovedListener = app.maps.removed.addEventListener((map) => {
+    mapListeners.get(map)?.();
+    mapListeners.delete(map);
+  });
+
+  return () => {
+    fallbackMapEventListener();
+    mapAddedListener();
+    mapRemovedListener();
+    [...mapListeners.values()].forEach((cb) => {
+      cb();
+    });
+    mapListeners.clear();
+  };
+}

package/src/styles/main.scss

@@ -1,5 +1,5 @@
-@import './typography';
-@import './vcsList';
+@use './typography';
+@use './vcsList';
 
 /* latin-ext */
 @font-face {

package/src/uiConfig.d.ts

@@ -56,6 +56,10 @@ export type UiConfigObject = {
      * - mouse event, when position display is updated. Either 'click' (default) or 'move'.
      */
     positionDisplayEventType?: string | undefined;
+    /**
+     * - A template for rendering information of the current image in oblique mode, e.g. '{{ name }}' printing the image's name
+     */
+    obliqueFooterTemplate?: string | undefined;
     /**
      * - an optional URL to a help landing page
      */
@@ -128,10 +132,18 @@ export type UiConfigObject = {
      * - can be used to hide the settings Window
      */
     hideSettings?: boolean | undefined;
+    /**
+     * - can be used to hide the oblique name in the footer
+     */
+    hideObliqueFooter?: boolean | undefined;
     /**
      * - can be used to activate the overviewMap on startup
      */
     overviewMapActiveOnStartup?: boolean | undefined;
+    /**
+     * - can be used to activate a contentTree on startup
+     */
+    contentTreeActiveOnStartup?: boolean | undefined;
     /**
      * - the display quality settings
      */
@@ -190,6 +202,7 @@ export type UiConfigObject = {
  * @property {string} [primaryColor] - an optional primary color to use in all themes, can be overwritten by `vuetifyTheme`
  * @property {boolean} [startingFeatureInfo] - an optional flag whether to activate feature info on startup (default active)
  * @property {string} [positionDisplayEventType] - mouse event, when position display is updated. Either 'click' (default) or 'move'.
+ * @property {string} [obliqueFooterTemplate] - A template for rendering information of the current image in oblique mode, e.g. '{{ name }}' printing the image's name
  * @property {string} [helpBaseUrl='https://help.vc.systems/'] - an optional URL to a help landing page
  * @property {TextPageType} [imprint] - an option imprint, will show a link in the footer. Default title is 'footer.imprint.title'.
  * @property {TextPageType} [dataProtection] - an option dataProtection, will show a link in the footer. Default title is 'footer.dataProtection.title'.
@@ -208,7 +221,9 @@ export type UiConfigObject = {
  * @property {boolean} [hideContentTree] - can be used to hide the contentTree
  * @property {boolean} [hideLegend] - can be used to hide the legend
  * @property {boolean} [hideSettings] - can be used to hide the settings Window
+ * @property {boolean} [hideObliqueFooter] - can be used to hide the oblique name in the footer
  * @property {boolean} [overviewMapActiveOnStartup] - can be used to activate the overviewMap on startup
+ * @property {boolean} [contentTreeActiveOnStartup] - can be used to activate a contentTree on startup
  * @property {import("@vcmap/core").DisplayQualityOptions} [displayQuality] - the display quality settings
  * @property {import("./vuetifyPlugins/vuetify.js").VcsThemes} [vuetifyTheme] - Vuetify Theming, also see vuetify configuraton https://vuetifyjs.com/en/features/theme/
  * @property {boolean} [openLegendOnAdd] - open the legend window, if new layer has a config
@@ -266,6 +281,10 @@ declare class UiConfig extends Collection<UiConfigurationItem<unknown>> {
          * - mouse event, when position display is updated. Either 'click' (default) or 'move'.
          */
         readonly positionDisplayEventType?: string | undefined;
+        /**
+         * - A template for rendering information of the current image in oblique mode, e.g. '{{ name }}' printing the image's name
+         */
+        readonly obliqueFooterTemplate?: string | undefined;
         /**
          * - an optional URL to a help landing page
          */
@@ -438,10 +457,18 @@ declare class UiConfig extends Collection<UiConfigurationItem<unknown>> {
          * - can be used to hide the settings Window
          */
         readonly hideSettings?: boolean | undefined;
+        /**
+         * - can be used to hide the oblique name in the footer
+         */
+        readonly hideObliqueFooter?: boolean | undefined;
         /**
          * - can be used to activate the overviewMap on startup
          */
         readonly overviewMapActiveOnStartup?: boolean | undefined;
+        /**
+         * - can be used to activate a contentTree on startup
+         */
+        readonly contentTreeActiveOnStartup?: boolean | undefined;
         /**
          * - the display quality settings
          */
@@ -456,6 +483,7 @@ declare class UiConfig extends Collection<UiConfigurationItem<unknown>> {
                 readonly fogScreenSpaceErrorFactor?: number | undefined;
                 readonly resolutionScale?: number | undefined;
                 readonly layerSSEFactor?: number | undefined;
+                readonly msaa?: 1 | 2 | 4 | 8 | undefined;
             } | undefined;
             readonly medium?: {
                 readonly sse?: number | undefined;
@@ -465,6 +493,7 @@ declare class UiConfig extends Collection<UiConfigurationItem<unknown>> {
                 readonly fogScreenSpaceErrorFactor?: number | undefined;
                 readonly resolutionScale?: number | undefined;
                 readonly layerSSEFactor?: number | undefined;
+                readonly msaa?: 1 | 2 | 4 | 8 | undefined;
             } | undefined;
             readonly high?: {
                 readonly sse?: number | undefined;
@@ -474,6 +503,7 @@ declare class UiConfig extends Collection<UiConfigurationItem<unknown>> {
                 readonly fogScreenSpaceErrorFactor?: number | undefined;
                 readonly resolutionScale?: number | undefined;
                 readonly layerSSEFactor?: number | undefined;
+                readonly msaa?: 1 | 2 | 4 | 8 | undefined;
             } | undefined;
         } | undefined;
         /**

package/src/uiConfig.js

@@ -50,6 +50,7 @@ import { reactive, readonly } from 'vue';
  * @property {string} [primaryColor] - an optional primary color to use in all themes, can be overwritten by `vuetifyTheme`
  * @property {boolean} [startingFeatureInfo] - an optional flag whether to activate feature info on startup (default active)
  * @property {string} [positionDisplayEventType] - mouse event, when position display is updated. Either 'click' (default) or 'move'.
+ * @property {string} [obliqueFooterTemplate] - A template for rendering information of the current image in oblique mode, e.g. '{{ name }}' printing the image's name
  * @property {string} [helpBaseUrl='https://help.vc.systems/'] - an optional URL to a help landing page
  * @property {TextPageType} [imprint] - an option imprint, will show a link in the footer. Default title is 'footer.imprint.title'.
  * @property {TextPageType} [dataProtection] - an option dataProtection, will show a link in the footer. Default title is 'footer.dataProtection.title'.
@@ -68,7 +69,9 @@ import { reactive, readonly } from 'vue';
  * @property {boolean} [hideContentTree] - can be used to hide the contentTree
  * @property {boolean} [hideLegend] - can be used to hide the legend
  * @property {boolean} [hideSettings] - can be used to hide the settings Window
+ * @property {boolean} [hideObliqueFooter] - can be used to hide the oblique name in the footer
  * @property {boolean} [overviewMapActiveOnStartup] - can be used to activate the overviewMap on startup
+ * @property {boolean} [contentTreeActiveOnStartup] - can be used to activate a contentTree on startup
  * @property {import("@vcmap/core").DisplayQualityOptions} [displayQuality] - the display quality settings
  * @property {import("./vuetifyPlugins/vuetify.js").VcsThemes} [vuetifyTheme] - Vuetify Theming, also see vuetify configuraton https://vuetifyjs.com/en/features/theme/
  * @property {boolean} [openLegendOnAdd] - open the legend window, if new layer has a config