@vcmap/ui 6.0.0-rc.9 → 6.0.0

package/src/legend/legendHelper.js

@@ -170,7 +170,7 @@ export function getLegendEntries(app) {
    */
   function syncLayerLegendEntries(layer) {
     removeEntryForLayer(layer);
-    if (layer.active) {
+    if (layer.active && layer.isSupported(app.maps.activeMap)) {
       const key = layer.name;
       const title = layer.properties.title || layer.name;
       const legend =
@@ -187,6 +187,10 @@ export function getLegendEntries(app) {
     }
   }
 
+  const destroyMapListener = app.maps.mapActivated.addEventListener(() =>
+    [...app.layers].forEach(syncLayerLegendEntries),
+  );
+
   const destroyChangedListener = app.layers.stateChanged.addEventListener(
     syncLayerLegendEntries,
   );
@@ -196,6 +200,7 @@ export function getLegendEntries(app) {
   [...app.layers].forEach(syncLayerLegendEntries);
 
   const destroy = () => {
+    destroyMapListener();
     destroyChangedListener();
     destroyRemovedListener();
     Object.values(styleChangedListener).forEach((cb) => cb());

package/src/manager/collectionManager/collectionComponentClass.js

@@ -321,6 +321,7 @@ class CollectionComponentClass {
         [...this.selection.value].forEach((listItem) => {
           this._collection.remove(this._collection.getByKey(listItem.name));
         });
+        this.selection.value = [];
       },
     });
     this._destroyBulkDelete = destroy;
@@ -513,10 +514,9 @@ class CollectionComponentClass {
     });
     if (index > -1) {
       const listItem = this._listItems.value[index];
-      const selectionIdx = this.selection.value.indexOf(listItem);
-      if (selectionIdx > -1) {
-        this.selection.value.splice(selectionIdx, 1);
-      }
+      this.selection.value = this.selection.value.filter(
+        (i) => i.name !== listItem.name,
+      );
       destroyListItem(this._listItems.value[index]);
       this._listItems.value.splice(index, 1);
     }

package/src/manager/collectionManager/editorCollectionComponentClass.js

@@ -218,9 +218,11 @@ export function makeEditorCollectionComponentClass(
   );
 
   const itemRemovedListener =
-    editorCollectionComponent.collection.removed.addEventListener(
-      closeEditorWindow,
-    );
+    editorCollectionComponent.collection.removed.addEventListener((item) => {
+      if (predicate(item)) {
+        closeEditorWindow(item);
+      }
+    });
 
   editorCollectionComponent.addItemMapping({
     predicate,

package/src/manager/toolbox/GroupToolboxComponent.vue

@@ -34,7 +34,12 @@
               :icon="action.icon"
               :disabled="action.disabled"
               :active="action.active"
-              @click="action.callback($event)"
+              @click.stop="
+                () => {
+                  $emit('click', $event);
+                  action.callback($event);
+                }
+              "
               v-bind="{ ...$attrs }"
             />
           </div>

package/src/manager/toolbox/SelectToolboxComponent.vue

@@ -11,7 +11,12 @@
       :active="group.action.active"
       :disabled="group.action.disabled"
       :background="group.action.background"
-      @click="group.action.callback($event)"
+      @click.stop="
+        () => {
+          $emit('click', $event);
+          group.action.callback($event);
+        }
+      "
       v-bind="{ ...$attrs }"
       class="vcs-toolbox-action-selected"
       :min-width="32"
@@ -39,7 +44,6 @@
       <v-toolbar
         class="vcs-toolbox-2 mx-auto marginToTop rounded-b elevation-4 opacity-80 px-1"
         :height="toolboxHeight"
-        dense
       >
         <v-toolbar-items class="w-100">
           <div class="d-flex align-center justify-space-between gc-1 w-100">

package/src/manager/toolbox/ToolboxManagerComponent.vue

@@ -20,11 +20,13 @@
           v-if="group.type === ToolboxType.GROUP"
           :group="group"
           @toggle="openGroup"
+          @click="bringToTop"
         />
         <ToolboxActionSelect
           v-else-if="group.type === ToolboxType.SELECT"
           :group="group"
           @toggle="openGroup"
+          @click="bringToTop"
         />
         <VcsToolButton
           v-else
@@ -33,7 +35,10 @@
           :active="group.action.active"
           :background="group.action.background"
           :disabled="group.action.disabled"
-          @click.stop="group.action.callback($event)"
+          @click.stop="
+            bringToTop();
+            group.action.callback($event);
+          "
           v-bind="{ ...$attrs }"
         />
       </div>
@@ -149,7 +154,7 @@
       const toolboxToggleAction = {
         name: 'toolboxToggleAction',
         icon: '$vcsTools',
-        title: 'Toolbox',
+        title: 'toolbox.title',
         active: true,
         callback() {
           this.active = !this.active;

package/src/manager/window/WindowComponentHeader.vue

@@ -145,7 +145,7 @@
           ? createLinkAction(
               {
                 name: 'info',
-                title: 'content.infoAction.title',
+                title: 'content.helpAction.title',
                 icon: '$vcsHelp',
               },
               props.windowState.infoUrl || props.windowState.infoUrlCallback,

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/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
          */