@vcmap/ui 5.3.7 → 6.0.0-rc.10

package/src/navigation/TiltSlider.vue

@@ -1,95 +1,83 @@
 <template>
-  <VcsTooltip
-    :tooltip="$t('navigation.pitchTooltip', [Math.round(value)])"
-    tooltip-position="left"
+  <v-card
+    class="tilt-slider"
+    :width="minWidth"
+    :height="minHeight"
+    v-bind="props"
+    :disabled="disabled"
   >
-    <template #activator="{ on, attrs }">
-      <v-card class="w-8" v-on="on" v-bind="attrs" :disabled="disabled">
-        <v-slider
-          track-color="base lighten-3"
-          v-model="tilt"
-          :max="0"
-          :min="-90"
-          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 {
-    ::v-deep {
-      .v-slider {
-        min-height: 48px;
-        margin-top: 8px;
-        margin-bottom: 8px;
-      }
-      .v-slider__thumb {
-        cursor: pointer;
-        border-radius: 3px;
-        width: 16px;
-        height: 4px;
-        border: 0;
-        left: -8px;
-        &:before {
-          background-color: transparent;
-        }
-      }
+  .v-slider.v-input--vertical {
+    :deep(.v-slider-track__fill) {
+      width: 2px;
     }
-  }
-  .v-application .theme--light.vcs-slider {
-    ::v-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;
-        }
-      }
+    :deep(.v-slider-track__tick--first) {
+      bottom: 0;
+    }
+    :deep(.v-slider-track__tick--last) {
+      bottom: 100%;
     }
   }
-  .v-application .theme--dark.vcs-slider {
-    ::v-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;
-        }
-      }
+
+  .vcs-tilt-slider {
+    margin-top: 6px;
+    margin-bottom: 10px;
+    :deep(.v-slider-thumb__surface) {
+      border-radius: 3px;
+      width: 16px;
+      height: 4px;
+      margin-top: 10px;
+      box-shadow: none !important;
     }
   }
+  :deep(.v-slider-thumb__surface::before) {
+    --v-focus-opacity: 0;
+    --v-hover-opacity: 0;
+    --v-pressed-opacity: 0;
+  }
+
+  .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/lib';
-  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: {
-      value: {
+      modelValue: {
         type: Number,
         required: true,
       },
@@ -99,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.value),
+        localValue,
+        tickSize,
+        trackSize,
+        props,
+        minWidth,
+        minHeight,
       };
     },
-    watch: {
-      value() {
-        this.localValue = clamp(Math.round(this.value), -90, 0);
-      },
-    },
-    computed: {
-      tilt: {
-        get() {
-          return this.localValue;
-        },
-        set(value) {
-          if (value !== this.localValue) {
-            this.localValue = value;
-            this.$emit('input', value);
-          }
-        },
-      },
-    },
-  };
+  });
 </script>

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

@@ -1,5 +1,5 @@
 declare const _default: import("vue").DefineComponent<{
-    value: {
+    modelValue: {
         type: NumberConstructor;
         required: true;
     };
@@ -8,15 +8,18 @@ declare const _default: import("vue").DefineComponent<{
         required: false;
         default: boolean;
     };
-}, {}, {
-    localValue: number;
 }, {
-    tilt: {
-        get(): number;
-        set(value: any): void;
-    };
-}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
-    value: {
+    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;
     };
@@ -27,5 +30,5 @@ declare const _default: import("vue").DefineComponent<{
     };
 }>>, {
     disabled: boolean;
-}>;
+}, {}>;
 export default _default;

package/src/navigation/VcsCompass.vue

@@ -3,32 +3,34 @@
     :style="{
       transform: `rotate(${compassRotation}deg)`,
     }"
-    @click="$emit('input', 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"
+    @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"
     elevation="1"
+    :height="height"
+    :width="width"
   >
     <span>N</span>
     <MapNavCompass
-      class="position-absolute pos-a-0 primary--text"
+      class="position-absolute top-0 bottom-0 right-0 left-0 text-primary"
       @click="$event.stopPropagation()"
-      @direction-click="$emit('input', $event)"
+      @direction-click="$emit('update:modelValue', $event)"
       :can-emit="!disabled && (viewMode === '3d' || viewMode === 'oblique')"
       :hide-ticks="viewMode === 'oblique'"
     />
   </v-sheet>
 </template>
-
+<style lang="scss" scoped></style>
 <script>
   import { computed, ref } from 'vue';
 
-  import { VSheet } from 'vuetify/lib';
+  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 {
@@ -42,7 +44,7 @@
         type: String,
         required: true,
       },
-      value: {
+      modelValue: {
         type: Number,
         default: 0,
       },
@@ -53,15 +55,26 @@
       },
     },
     setup(props) {
-      const rotationValue = ref(props.value);
+      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: {
-      value(newValue, oldValue) {
+      modelValue(newValue, oldValue) {
         let diff = newValue - oldValue;
         if (diff > 180) {
           diff -= 360;

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

@@ -3,7 +3,7 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         required: true;
     };
-    value: {
+    modelValue: {
         type: NumberConstructor;
         default: number;
     };
@@ -13,14 +13,16 @@ declare const _default: import("vue").DefineComponent<{
         required: false;
     };
 }, {
-    rotationValue: any;
+    rotationValue: import("vue").Ref<number>;
     compassRotation: import("vue").ComputedRef<number>;
-}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    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;
         required: true;
     };
-    value: {
+    modelValue: {
         type: NumberConstructor;
         default: number;
     };
@@ -30,7 +32,7 @@ declare const _default: import("vue").DefineComponent<{
         required: false;
     };
 }>>, {
-    value: number;
     disabled: boolean;
-}>;
+    modelValue: number;
+}, {}>;
 export default _default;

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')"
@@ -45,20 +45,18 @@
     .inner {
       box-shadow: rgba(0, 0, 0, 0.25) 0 0 10px 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.08) 1px 0 0 0,
-            rgba(0, 0, 0, 0.05) -1px 1px 1px 1px !important;
-        }
-        &:last-child {
-          box-shadow:
-            rgba(0, 0, 0, 0.25) -2px 3px 1px -2px,
-            rgba(0, 0, 0, 0.08) 1px 4px 2px 0,
-            rgba(0, 0, 0, 0.05) -1px 1px 1px 1px !important;
-        }
+    :deep(.btn-orientation-tools) {
+      &:first-child {
+        box-shadow:
+          rgba(0, 0, 0, 0.25) -2px 2px 1px -2px,
+          rgba(0, 0, 0, 0.08) 1px 0 0 0,
+          rgba(0, 0, 0, 0.05) -1px 1px 1px 1px !important;
+      }
+      &:last-child {
+        box-shadow:
+          rgba(0, 0, 0, 0.25) -2px 3px 1px -2px,
+          rgba(0, 0, 0, 0.08) 1px 4px 2px 0,
+          rgba(0, 0, 0, 0.05) -1px 1px 1px 1px !important;
       }
     }
   }

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

@@ -4,7 +4,7 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-}, {}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+}, any, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     disabled: {
         required: false;
         type: BooleanConstructor;
@@ -12,5 +12,5 @@ declare const _default: import("vue").DefineComponent<{
     };
 }>>, {
     disabled: boolean;
-}>;
+}, {}>;
 export default _default;

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.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.d.ts

@@ -128,7 +128,7 @@ declare class OverviewMap {
      * Is passed a {@link InteractionEvent} as its only argument
      * @type {import("@vcmap/core").VcsEvent<import("@vcmap/core").InteractionEvent>}
      */
-    get mapClicked(): import("@vcmap/core/dist/src/vcsEvent.js").default<import("@vcmap/core").InteractionEvent>;
+    get mapClicked(): import("@vcmap/core").VcsEvent<import("@vcmap/core").InteractionEvent>;
     /**
      * @private
      */

package/src/navigation/overviewMap.js

@@ -140,7 +140,7 @@ class OverviewMap {
     this._obliqueSelectedImageLayer = null;
 
     const primary =
-      app.uiConfig.config.value.primaryColor ?? getDefaultPrimaryColor();
+      app.uiConfig.config.primaryColor ?? getDefaultPrimaryColor(app);
     const fillColor = Color.fromCssColorString('#EDEDED');
 
     /**
@@ -180,7 +180,7 @@ class OverviewMap {
      * @type {import("@vcmap/core").VectorStyleItem}
      */
     this.cameraIconStyle = new VectorStyleItem({
-      image: getCameraIcon(getDefaultPrimaryColor()),
+      image: getCameraIcon(getDefaultPrimaryColor(this._app)),
     });
 
     /**
@@ -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) {
@@ -289,7 +292,7 @@ class OverviewMap {
    * @private
    */
   _updatePrimaryColor() {
-    const color = getColorByKey('primary');
+    const color = getColorByKey(this._app, 'primary');
     this.obliqueSelectedStyle?.stroke?.setColor(color);
     this._obliqueSelectedImageLayer?.forceRedraw?.();
     const rotation = this.cameraIconStyle.image.getRotation();

package/src/notifier/NotifierComponent.vue

@@ -1,32 +1,32 @@
 <template>
-  <div>
+  <div class="notifier-component">
     <v-snackbar
-      dark
       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] }}
       </v-icon>
       <span class="snack-title">{{
-        $t(notification.title || defaultTitle[notification.type])
+        $st(notification.title || defaultTitle[notification.type])
       }}</span>
-      <template #action="{ attrs }">
+      <template #actions="{ props }">
         <VcsButton
           icon="mdi-close"
-          v-bind="attrs"
+          v-bind="props"
           @click="notification.open = false"
         />
       </template>
-      <span>{{ $t(notification.message) }}</span>
+      <span>{{ $st(notification.message) }}</span>
     </v-snackbar>
   </div>
 </template>
 
 <script>
-  import { VSnackbar, VIcon } from 'vuetify/lib';
+  import { VSnackbar, VIcon } from 'vuetify/components';
   import { inject } from 'vue';
   import VcsButton from '../components/buttons/VcsButton.vue';
   import { NotificationType } from './notifier.js';
@@ -64,23 +64,23 @@
 </script>
 
 <style lang="scss" scoped>
-  .v-snack {
-    ::v-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;
-        }
-      }
-      .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>

package/src/notifier/NotifierComponent.vue.d.ts

@@ -6,5 +6,5 @@ declare const _default: import("vue").DefineComponent<{}, {
     defaultTitle: {
         [x: string]: string;
     };
-}, {}, {}, {}, 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/notifier/notifier.d.ts

@@ -18,7 +18,8 @@ export type Notification = {
     type: NotificationType;
     title?: string | undefined;
     timeout: number;
-    open: import("vue").Ref<boolean>;
+    openRef: import("vue").Ref<boolean>;
+    open: typeof open;
     close: () => void;
 };
 /**