@vcmap/ui 6.0.0-rc.1 → 6.0.0-rc.10

package/src/navigation/MapNavigation.vue

@@ -1,5 +1,8 @@
 <template>
-  <v-container :class="xs ? 'nav-container mobile' : 'nav-container'">
+  <v-container
+    :class="xs ? 'nav-container mobile' : 'nav-container'"
+    class="map-navigation"
+  >
     <v-row>
       <VcsCompass
         :view-mode="viewMode"
@@ -57,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 {
@@ -182,6 +186,16 @@
     };
   }
 
+  /**
+   * @enum {number}
+   */
+  const directionToDegrees = {
+    [ObliqueViewDirection.NORTH]: 0,
+    [ObliqueViewDirection.EAST]: 90,
+    [ObliqueViewDirection.SOUTH]: 180,
+    [ObliqueViewDirection.WEST]: 270,
+  };
+
   export default {
     components: {
       OrientationToolsButton,
@@ -201,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;
+          }
         }
       };
 
@@ -249,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);
@@ -286,6 +325,7 @@
       const { action: homeAction, destroy: homeDestroy } = setupHomeButton(app);
 
       onUnmounted(() => {
+        uiConfigListener();
         if (overviewDestroy) {
           overviewDestroy();
         }
@@ -335,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;
@@ -345,7 +388,7 @@
     }
   }
   .nav-container > {
-    .row {
+    .v-row {
       margin-top: 15px;
       margin-bottom: 0;
     }

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)"
@@ -56,7 +56,7 @@
 </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;

package/src/navigation/OrientationToolsButton.vue

@@ -1,31 +1,24 @@
 <template>
-  <VcsTooltip :tooltip-position="tooltipPosition" :tooltip="tooltip">
-    <template #activator="{ props }">
-      <v-card
-        class="h-8 w-8 d-flex align-center justify-center text-center btn-orientation-tools"
-        v-bind="{ ...$attrs, ...props }"
-      >
-        <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;
-    }
-  }
-  .h-8 {
-    height: 32px;
-  }
-  .w-8 {
-    width: 32px;
-  }
-</style>
+<style lang="scss" scoped></style>
 <script>
-  import { VCard, VIcon } from 'vuetify/components';
-  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
@@ -36,9 +29,9 @@
   export default {
     name: 'OrientationToolsButton',
     components: {
-      VcsTooltip,
       VCard,
       VIcon,
+      VTooltip,
     },
     props: {
       icon: {
@@ -54,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;
     };
-}, any, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, 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;

package/src/navigation/TiltSlider.vue

@@ -1,89 +1,80 @@
 <template>
-  <VcsTooltip
-    :tooltip="$t('navigation.pitchTooltip', [Math.round(modelValue)])"
-    tooltip-position="left"
+  <v-card
+    class="tilt-slider"
+    :width="minWidth"
+    :height="minHeight"
+    v-bind="props"
+    :disabled="disabled"
   >
-    <template #activator="{ props }">
-      <v-card class="w-8" v-bind="props" :disabled="disabled">
-        <v-slider
-          track-color="base lighten-3"
-          v-model="tilt"
-          :max="0"
-          :min="-90"
-          direction="vertical"
-          hide-details
-          class="vcs-slider"
-          v-bind="{ ...$attrs }"
-        />
-      </v-card>
-    </template>
-  </VcsTooltip>
+    <v-slider
+      :track-size="trackSize"
+      :tick-size="tickSize"
+      :track-color="'base-lighten-3'"
+      thumb-color="base-darken-4"
+      track-fill-color="'base-darken-4'"
+      :max="0"
+      :min="-90"
+      direction="vertical"
+      hide-details
+      class="vcs-tilt-slider"
+      v-bind="{ ...$attrs }"
+      v-model="localValue"
+    ></v-slider>
+    <v-tooltip
+      activator="parent"
+      location="left"
+      :text="$st('navigation.pitchTooltip', [Math.round(localValue)])"
+    ></v-tooltip>
+  </v-card>
 </template>
+
 <style lang="scss" scoped>
-  @import '../styles/shades.scss';
-  .vcs-slider {
-    :deep(.v-slider) {
-      min-height: 48px;
-      margin-top: 8px;
-      margin-bottom: 8px;
+  .v-slider.v-input--vertical {
+    :deep(.v-slider-track__fill) {
+      width: 2px;
+    }
+    :deep(.v-slider-track__tick--first) {
+      bottom: 0;
     }
-    :deep(.v-slider__thumb) {
-      cursor: pointer;
+    :deep(.v-slider-track__tick--last) {
+      bottom: 100%;
+    }
+  }
+
+  .vcs-tilt-slider {
+    margin-top: 6px;
+    margin-bottom: 10px;
+    :deep(.v-slider-thumb__surface) {
       border-radius: 3px;
       width: 16px;
       height: 4px;
-      border: 0;
-      left: -8px;
-      &:before {
-        background-color: transparent;
-      }
-    }
-  }
-  .v-application .theme--light.vcs-slider {
-    :deep(.v-slider) {
-      .v-slider__track-container {
-        .v-slider__track-fill {
-          background-color: map-get($shades, 'black') !important;
-        }
-      }
-      .v-slider__thumb {
-        background-color: map-get($shades, 'black') !important;
-      }
+      margin-top: 10px;
+      box-shadow: none !important;
     }
   }
-  .v-application .theme--dark.vcs-slider {
-    :deep(.v-slider) {
-      .v-slider__track-container {
-        .v-slider__track-fill {
-          background-color: map-get($shades, 'white') !important;
-        }
-      }
-      .v-slider__thumb {
-        background-color: map-get($shades, 'white') !important;
-      }
-    }
+  :deep(.v-slider-thumb__surface::before) {
+    --v-focus-opacity: 0;
+    --v-hover-opacity: 0;
+    --v-pressed-opacity: 0;
   }
-  .w-8 {
-    width: 32px;
+
+  .v-input--vertical :deep(.v-input__control) {
+    min-height: calc(var(--v-vcs-font-size) * 4);
   }
 </style>
+
 <script>
-  import { clamp } from 'ol/math.js';
-  import { VCard, VSlider } from 'vuetify/components';
-  import VcsTooltip from '../components/notification/VcsTooltip.vue';
+  import { computed, defineComponent } from 'vue';
+  import { VCard, VSlider, VTooltip } from 'vuetify/components';
+  import { useFontSize } from '../vuePlugins/vuetify.js';
+  import { useProxiedAtomicModel } from '../components/modelHelper.js';
 
-  /**
-   * @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 {
+  export default defineComponent({
     name: 'TiltSlider',
     components: {
-      VcsTooltip,
       VCard,
       VSlider,
+      VTooltip,
     },
     props: {
       modelValue: {
@@ -96,28 +87,31 @@
         default: false,
       },
     },
-    data() {
+    setup(props, { emit }) {
+      const fontSize = useFontSize();
+      const trackSize = computed(() => {
+        return Math.floor((fontSize.value + 3) / 6);
+      });
+      const tickSize = computed(() => {
+        return trackSize.value * 2;
+      });
+      const minWidth = computed(() => {
+        return fontSize.value * 2.5;
+      });
+      const minHeight = computed(() => {
+        return fontSize.value * 5;
+      });
+
+      const localValue = useProxiedAtomicModel(props, 'modelValue', emit);
+
       return {
-        localValue: Math.round(this.modelValue),
+        localValue,
+        tickSize,
+        trackSize,
+        props,
+        minWidth,
+        minHeight,
       };
     },
-    watch: {
-      modelValue() {
-        this.localValue = clamp(Math.round(this.modelValue), -90, 0);
-      },
-    },
-    computed: {
-      tilt: {
-        get() {
-          return this.localValue;
-        },
-        set(value) {
-          if (value !== this.localValue) {
-            this.localValue = value;
-            this.$emit('update:modelValue', value);
-          }
-        },
-      },
-    },
-  };
+  });
 </script>

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

@@ -8,14 +8,17 @@ declare const _default: import("vue").DefineComponent<{
         required: false;
         default: boolean;
     };
-}, any, {
-    localValue: number;
 }, {
-    tilt: {
-        get(): number;
-        set(value: any): void;
-    };
-}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    localValue: import("vue").Ref<any>;
+    tickSize: import("vue").ComputedRef<number>;
+    trackSize: import("vue").ComputedRef<number>;
+    props: import("@vue/shared").LooseRequired<{
+        readonly disabled: boolean;
+        readonly modelValue: number;
+    } & {}>;
+    minWidth: import("vue").ComputedRef<number>;
+    minHeight: import("vue").ComputedRef<number>;
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         type: NumberConstructor;
         required: true;

package/src/navigation/VcsCompass.vue

@@ -4,8 +4,10 @@
       transform: `rotate(${compassRotation}deg)`,
     }"
     @click="$emit('update:modelValue', 0)"
-    class="h-16 w-16 d-flex flex-column justify-center align-center position-relative rounded-circle user-select-none transition-transform-200-ease"
+    class="d-flex flex-column justify-center align-center position-relative rounded-circle user-select-none transition-transform-200-ease vcs-compass"
     elevation="1"
+    :height="height"
+    :width="width"
   >
     <span>N</span>
     <MapNavCompass
@@ -17,25 +19,18 @@
     />
   </v-sheet>
 </template>
-<style lang="scss" scoped>
-  .h-16 {
-    height: 64px;
-  }
-  .w-16 {
-    width: 64px;
-  }
-</style>
+<style lang="scss" scoped></style>
 <script>
   import { computed, ref } from 'vue';
 
   import { VSheet } from 'vuetify/components';
   import MapNavCompass from './MapNavCompass.vue';
+  import { useFontSize } from '../vuePlugins/vuetify.js';
 
   /**
    * @description Compass component to be shown on the map.
    * @vue-prop {OrientationToolsViewMode}  viewMode  - Mode of the map. Defines the behaviour of the compass.
-   * @vue-prop {number}                     value     - Number of degrees of the compass rotation.
-   * @vue-event {number} input
+   * @vue-prop {number}                     modelValue     - Number of degrees of the compass rotation.
    * @vue-prop {boolean} disabled - whether compass should be disabled
    */
   export default {
@@ -62,9 +57,20 @@
     setup(props) {
       const rotationValue = ref(props.modelValue);
 
+      const fontSize = useFontSize();
+      const height = computed(() => {
+        return fontSize.value * 5;
+      });
+
+      const width = computed(() => {
+        return fontSize.value * 5;
+      });
+
       return {
         rotationValue,
         compassRotation: computed(() => -1 * rotationValue.value),
+        height,
+        width,
       };
     },
     watch: {

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

@@ -15,6 +15,8 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     rotationValue: import("vue").Ref<number>;
     compassRotation: 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<{
     viewMode: {
         type: StringConstructor;

package/src/navigation/VcsZoomButton.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="rounded vcs-navigation-zoom">
+  <div class="rounded vcs-navigation-zoom vcs-zoom-button">
     <div class="rounded inner">
       <OrientationToolsButton
         @click="$emit('zoom-in')"

package/src/navigation/locatorHelper.js

@@ -5,8 +5,6 @@ import {
   Projection,
   VectorLayer,
   VectorStyleItem,
-  ensureFeatureAbsolute,
-  CesiumMap,
 } from '@vcmap/core';
 import { Circle, Point } from 'ol/geom';
 import { Feature } from 'ol';
@@ -24,7 +22,7 @@ import { getDefaultPrimaryColor } from '../vuePlugins/vuetify.js';
  */
 function getColor(opacity, app) {
   return Color.fromCssColorString(
-    app.uiConfig.config.value.primaryColor ?? getDefaultPrimaryColor(app),
+    app.uiConfig.config.primaryColor ?? getDefaultPrimaryColor(app),
   )
     .withAlpha(opacity)
     .toCssColorString();
@@ -34,9 +32,9 @@ function getColor(opacity, app) {
  * Place a location point and accuracy circle on the map.
  * @param {import("@vcmap/core").VectorLayer} layer The OpenLayers layer to add the features to.
  * @param {GeolocationCoordinates} point The point object containing longitude, latitude, and accuracy.
- * @param {import("../vcsUiApp.js").default} app
+ * @returns {Promise<void>}
  */
-async function placeLocationInMap(layer, point, app) {
+async function placeLocationInMap(layer, point) {
   layer.removeFeaturesById(['_tooltipLocationPoint']);
   layer.removeFeaturesById(['_tooltipLocationCircle']);
 
@@ -49,15 +47,12 @@ async function placeLocationInMap(layer, point, app) {
   });
   feature.setId('_tooltipLocationPoint');
 
-  if (app.maps.activeMap instanceof CesiumMap) {
-    await ensureFeatureAbsolute(feature, layer, app.maps.activeMap);
-  }
-
   const accuracyCircle = new Feature({
     geometry: new Circle(
       Projection.wgs84ToMercator([point.longitude, point.latitude]),
       point.accuracy,
     ),
+    olcs_altitudeMode: 'clampToGround',
   });
   accuracyCircle.setId('_tooltipLocationCircle');
   layer.addFeatures([accuracyCircle, feature]);
@@ -202,18 +197,6 @@ export function createLocatorAction(app) {
     style,
   });
 
-  const mapChangedListener = app.maps.mapActivated.addEventListener(
-    async (map) => {
-      if (map instanceof CesiumMap) {
-        const locatorFeature = vectorLayer.getFeatureById(
-          '_tooltipLocationPoint',
-        );
-        if (locatorFeature) {
-          await ensureFeatureAbsolute(locatorFeature, vectorLayer, map);
-        }
-      }
-    },
-  );
   markVolatile(vectorLayer);
   app.layers.add(vectorLayer);
 
@@ -283,7 +266,6 @@ export function createLocatorAction(app) {
   };
   const destroy = () => {
     destroyLayer();
-    mapChangedListener();
     themeListener();
     style.destroy();
     state.coordinates = undefined;

package/src/navigation/overviewMap.js

@@ -140,7 +140,7 @@ class OverviewMap {
     this._obliqueSelectedImageLayer = null;
 
     const primary =
-      app.uiConfig.config.value.primaryColor ?? getDefaultPrimaryColor(app);
+      app.uiConfig.config.primaryColor ?? getDefaultPrimaryColor(app);
     const fillColor = Color.fromCssColorString('#EDEDED');
 
     /**
@@ -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/notifier/NotifierComponent.vue

@@ -1,10 +1,11 @@
 <template>
-  <div>
+  <div class="notifier-component">
     <v-snackbar
       v-for="notification in notifications"
       :key="notification.id"
       v-model="notification.open"
       :timeout="notification.timeout"
+      class="vcs-notifier"
     >
       <v-icon :color="notification.type">
         {{ icon[notification.type] }}
@@ -63,21 +64,23 @@
 </script>
 
 <style lang="scss" scoped>
-  .v-snack {
-    :deep(.v-snack__content) {
-      display: grid;
-      gap: 8px 4px;
-      grid-template-columns: 20px auto;
-      .v-icon {
-        grid-row-start: 1;
-        grid-row-end: 3;
-        align-self: start;
-        font-size: 17px;
-      }
-    }
-    :deep(.v-snack__action) {
-      align-self: flex-start;
-      margin-top: 4px;
+  .vcs-notifier {
+    opacity: 0.95;
+  }
+  :deep(.v-snackbar__content) {
+    display: grid;
+    padding: 8px 8px;
+    gap: 8px 4px;
+    grid-template-columns: 20px auto;
+    .v-icon {
+      grid-row-start: 1;
+      grid-row-end: 3;
+      align-self: start;
+      font-size: var(--v-vcs-font-size);
     }
   }
+  :deep(.v-snackbar__actions) {
+    align-self: flex-start;
+    margin-top: 4px;
+  }
 </style>