npm - @vcmap/ui - Versions diffs - 5.0.0-rc.23 → 5.0.0-rc.24 - Mend

@vcmap/ui 5.0.0-rc.23 → 5.0.0-rc.24

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (417) hide show

package/src/navigation/mapNavigation.vue CHANGED Viewed

@@ -1,24 +1,16 @@
 <template>
-  <v-container :class="$vuetify.breakpoint.xs ? 'nav-container mobile' : 'nav-container'">
+  <v-container
+    :class="$vuetify.breakpoint.xs ? 'nav-container mobile' : 'nav-container'"
+  >
     <v-row>
-      <VcsCompass
-        :view-mode="viewMode"
-        v-model="heading"
-      />
+      <VcsCompass :view-mode="viewMode" v-model="heading" />
     </v-row>
-    <v-row
-      v-if="isOblique"
-    >
-      <ObliqueRotation
-        v-model="heading"
-      />
+    <v-row v-if="isOblique">
+      <ObliqueRotation v-model="heading" />
     </v-row>
     <template v-if="$vuetify.breakpoint.mdAndUp">
       <v-row justify="center">
-        <VcsZoomButton
-          @zoom-out="zoomOut()"
-          @zoom-in="zoomIn()"
-        />
+        <VcsZoomButton @zoom-out="zoomOut()" @zoom-in="zoomIn()" />
       </v-row>
       <v-row justify="center" v-if="is3D && $vuetify.breakpoint.mdAndUp">
         <TiltSlider v-model="tilt" />
@@ -44,12 +36,13 @@
 </template>
 <script>
-  import {
-    computed, inject, ref, reactive, onUnmounted,
-  } from 'vue';
+  import { computed, inject, ref, reactive, onUnmounted } from 'vue';
   import { ObliqueMap, CesiumMap } from '@vcmap/core';
   import { VContainer, VRow } from 'vuetify/lib';
-  import { createGoToViewpointAction, createOverviewMapAction } from '../actions/actionHelper.js';
+  import {
+    createGoToViewpointAction,
+    createOverviewMapAction,
+  } from '../actions/actionHelper.js';
   import { getWindowComponentOptions } from './overviewMap.js';
   import VcsCompass from './vcsCompass.vue';
   import VcsZoomButton from './vcsZoomButton.vue';
@@ -63,7 +56,12 @@
    * @returns {{action: import("vue").Reactive<{}>, destroy: function():void}}
    */
   function setupHomeButton(app) {
-    const initialAction = { icon: undefined, title: undefined, active: undefined, callback: undefined };
+    const initialAction = {
+      icon: undefined,
+      title: undefined,
+      active: undefined,
+      callback: undefined,
+    };
     const action = reactive({ ...initialAction });
     /**
      * Gets the starting viewpoint of the last added module, where a startingViewpointName was defined
@@ -73,7 +71,10 @@
       let viewpoint = null;
       for (let idx = app.modules.length - 1; idx >= 0; idx--) {
         const { startingViewpointName } = app.modules[idx].config;
-        if (startingViewpointName && app.viewpoints.hasKey(startingViewpointName)) {
+        if (
+          startingViewpointName &&
+          app.viewpoints.hasKey(startingViewpointName)
+        ) {
           viewpoint = app.viewpoints.getByKey(startingViewpointName);
           break;
         }
@@ -81,16 +82,19 @@
       if (!viewpoint) {
         Object.assign(action, { ...initialAction });
       } else {
-        Object.assign(action, createGoToViewpointAction(
-          {
-            name: 'home-action',
-            title: 'navigation.homeButton',
-            icon: '$vcsHomePoint',
-          },
-          viewpoint,
-          app.viewpoints,
-          app.maps,
-        ));
+        Object.assign(
+          action,
+          createGoToViewpointAction(
+            {
+              name: 'home-action',
+              title: 'navigation.homeButton',
+              icon: '$vcsHomePoint',
+            },
+            viewpoint,
+            app.viewpoints,
+            app.maps,
+          ),
+        );
       }
     };
@@ -99,7 +103,9 @@
       app.moduleRemoved.addEventListener(updateStartingViewpoint),
     ];
-    const destroy = () => { listener.forEach(cb => cb()); };
+    const destroy = () => {
+      listener.forEach((cb) => cb());
+    };
     return { action, destroy };
   }
@@ -167,12 +173,15 @@
         }
       };
-      const postRenderHandler = app.maps.postRender.addEventListener(handleRenderEvent);
+      const postRenderHandler =
+        app.maps.postRender.addEventListener(handleRenderEvent);
       if (app.maps.activeMap) {
         handleRenderEvent({ map: app.maps.activeMap });
       }
       const heading = computed({
-        get() { return headingRef.value; },
+        get() {
+          return headingRef.value;
+        },
         async set(headingValue) {
           let vp;
           if (viewMode.value === OrientationToolsViewMode.OBLIQUE) {
@@ -186,7 +195,9 @@
       });
       const tilt = computed({
-        get() { return tiltRef.value; },
+        get() {
+          return tiltRef.value;
+        },
         set(tiltValue) {
           const vp = app.maps.activeMap.getViewpointSync(); // XXX make async and debounce
           vp.pitch = tiltValue;
@@ -214,10 +225,18 @@
         viewMode,
         heading,
         tilt,
-        is3D: computed(() => viewMode.value === OrientationToolsViewMode.THREE_D),
-        isOblique: computed(() => viewMode.value === OrientationToolsViewMode.OBLIQUE),
-        zoomIn() { zoom(app.maps.activeMap); }, // debounce?
-        zoomOut() { zoom(app.maps.activeMap, true); },
+        is3D: computed(
+          () => viewMode.value === OrientationToolsViewMode.THREE_D,
+        ),
+        isOblique: computed(
+          () => viewMode.value === OrientationToolsViewMode.OBLIQUE,
+        ),
+        zoomIn() {
+          zoom(app.maps.activeMap);
+        }, // debounce?
+        zoomOut() {
+          zoom(app.maps.activeMap, true);
+        },
         overviewAction: reactive(action),
         homeAction,
       };
@@ -231,7 +250,7 @@
     right: 2rem;
     bottom: 1rem;
     width: unset;
-    &.mobile{
+    &.mobile {
       top: 1rem;
       right: 1rem;
       bottom: auto;

package/src/navigation/obliqueRotation.vue CHANGED Viewed

@@ -50,20 +50,18 @@
 <style lang="scss" scoped>
   .vcs-oblique-orientation {
     box-shadow: rgba(0, 0, 0, 0.15) 0 2px 2px 0;
-    .inner{
+    .inner {
       box-shadow: rgba(0, 0, 0, 0.25) 0 -2px 2px 0 inset;
     }
     ::v-deep {
-      .btn-orientation-tools{
-        &:first-child{
+      .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;
+            rgba(0, 0, 0, 0.02) -3px 2px 2px 0, rgba(0, 0, 0, 0.12) 0 1px 1px 0 !important;
         }
-        &:last-child{
+        &: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;
+            rgba(0, 0, 0, 0.02) 1px 2px 1px 0, rgba(0, 0, 0, 0.1) 1px 1px 1px 0 !important;
         }
       }
     }

package/src/navigation/orientationToolsButton.vue CHANGED Viewed

@@ -1,25 +1,22 @@
 <template>
-  <VcsTooltip
-    :tooltip-position="tooltipPosition"
-    :tooltip="tooltip"
-  >
+  <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 v-text="icon" size="16" />
+        <v-icon size="16">{{ icon }}</v-icon>
       </v-card>
     </template>
   </VcsTooltip>
 </template>
 <style lang="scss" scoped>
-.btn-orientation-tools{
-  &:before{
-    background-color: transparent !important;
+  .btn-orientation-tools {
+    &:before {
+      background-color: transparent !important;
+    }
   }
-}
 </style>
 <script>
   import { VCard, VIcon } from 'vuetify/lib';

package/src/navigation/overviewMap.js CHANGED Viewed

@@ -20,7 +20,10 @@ import VectorSource from 'ol/source/Vector.js';
 import { Icon } from 'ol/style.js';
 import { WindowSlot } from '../manager/window/windowManager.js';
 import OverviewMapClickedInteraction from './overviewMapClickedInteraction.js';
-import { getDefaultPrimaryColor, getColorByKey } from '../vuePlugins/vuetify.js';
+import {
+  getDefaultPrimaryColor,
+  getColorByKey,
+} from '../vuePlugins/vuetify.js';
 import { vcsAppSymbol } from '../pluginHelper.js';
 import VcsMap from '../application/VcsMap.vue';
@@ -52,7 +55,27 @@ export function getWindowComponentOptions() {
  */
 function getCameraIcon(color) {
   return {
-    src: `data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Asvg%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22121.58616%22%20height%3D%2274.204994%22%20viewBox%3D%220%200%2032.169671%2019.633405%22%20version%3D%221.1%22%20id%3D%22svg216%22%3E%3Cdefs%20id%3D%22defs213%22%3E%3ClinearGradient%20id%3D%221-0%22%20x1%3D%2240.529999%22%20y1%3D%2248.970001%22%20x2%3D%2240.529999%22%20y2%3D%220.25%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22${encodeURIComponent(color)}%22%20id%3D%22stop399%22%2F%3E%3Cstop%20offset%3D%22.46%22%20stop-color%3D%22${encodeURIComponent(color)}%22%20stop-opacity%3D%22.60%22%20id%3D%22stop401%22%2F%3E%3Cstop%20offset%3D%22.65%22%20stop-color%3D%22${encodeURIComponent(color)}%22%20stop-opacity%3D%22.40%22%20id%3D%22stop403%22%2F%3E%3Cstop%20offset%3D%22.83%22%20stop-color%3D%22${encodeURIComponent(color)}%22%20stop-opacity%3D%22.20%22%20id%3D%22stop405%22%2F%3E%3Cstop%20offset%3D%22.89%22%20stop-color%3D%22${encodeURIComponent(color)}%22%20stop-opacity%3D%22.15%22%20id%3D%22stop407%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22transparent%22%20stop-opacity%3D%220%22%20id%3D%22stop409%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%222-9%22%20x1%3D%2240.529999%22%20y1%3D%2249.369999%22%20x2%3D%2240.529999%22%20y2%3D%220%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%22.24%22%20stop-color%3D%22${encodeURIComponent(color)}%22%20id%3D%22stop412%22%2F%3E%3Cstop%20offset%3D%22.38%22%20stop-color%3D%22${encodeURIComponent(color)}%22%20stop-opacity%3D%22.93%22%20id%3D%22stop414%22%2F%3E%3Cstop%20offset%3D%22.57%22%20stop-color%3D%22${encodeURIComponent(color)}%22%20stop-opacity%3D%22.70%22%20id%3D%22stop416%22%2F%3E%3Cstop%20offset%3D%22.78%22%20stop-color%3D%22${encodeURIComponent(color)}%22%20stop-opacity%3D%22.38%22%20id%3D%22stop418%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22transparent%22%20stop-opacity%3D%220%22%20id%3D%22stop420%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cg%20id%3D%22layer1%22%20transform%3D%22translate(5.3616118%2C3.2722342)%22%3E%3Cpolygon%20points%3D%220.53%2C0.25%2040.53%2C48.97%2080.53%2C0.25%20%22%20fill%3D%22url(%231)%22%20stroke%3D%22url(%232)%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%220.5px%22%20id%3D%22polygon425%22%20style%3D%22fill%3Aurl(%231-0)%3Bstroke%3Aurl(%232-9)%22%20transform%3D%22matrix(0.396875%2C0%2C0%2C0.396875%2C-5.3621201%2C-3.2722342)%22%2F%3E%3Ccircle%20cx%3D%2210.723224%22%20cy%3D%2213.781484%22%20r%3D%222.3812499%22%20fill%3D%22${encodeURIComponent(color)}%22%20stroke%3D%22%23ffffff%22%20stroke-miterlimit%3D%2210%22%20id%3D%22circle427%22%20style%3D%22stroke-width%3A0.396874%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E`,
+    src: `data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Asvg%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22121.58616%22%20height%3D%2274.204994%22%20viewBox%3D%220%200%2032.169671%2019.633405%22%20version%3D%221.1%22%20id%3D%22svg216%22%3E%3Cdefs%20id%3D%22defs213%22%3E%3ClinearGradient%20id%3D%221-0%22%20x1%3D%2240.529999%22%20y1%3D%2248.970001%22%20x2%3D%2240.529999%22%20y2%3D%220.25%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22${encodeURIComponent(
+      color,
+    )}%22%20id%3D%22stop399%22%2F%3E%3Cstop%20offset%3D%22.46%22%20stop-color%3D%22${encodeURIComponent(
+      color,
+    )}%22%20stop-opacity%3D%22.60%22%20id%3D%22stop401%22%2F%3E%3Cstop%20offset%3D%22.65%22%20stop-color%3D%22${encodeURIComponent(
+      color,
+    )}%22%20stop-opacity%3D%22.40%22%20id%3D%22stop403%22%2F%3E%3Cstop%20offset%3D%22.83%22%20stop-color%3D%22${encodeURIComponent(
+      color,
+    )}%22%20stop-opacity%3D%22.20%22%20id%3D%22stop405%22%2F%3E%3Cstop%20offset%3D%22.89%22%20stop-color%3D%22${encodeURIComponent(
+      color,
+    )}%22%20stop-opacity%3D%22.15%22%20id%3D%22stop407%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22transparent%22%20stop-opacity%3D%220%22%20id%3D%22stop409%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%222-9%22%20x1%3D%2240.529999%22%20y1%3D%2249.369999%22%20x2%3D%2240.529999%22%20y2%3D%220%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%22.24%22%20stop-color%3D%22${encodeURIComponent(
+      color,
+    )}%22%20id%3D%22stop412%22%2F%3E%3Cstop%20offset%3D%22.38%22%20stop-color%3D%22${encodeURIComponent(
+      color,
+    )}%22%20stop-opacity%3D%22.93%22%20id%3D%22stop414%22%2F%3E%3Cstop%20offset%3D%22.57%22%20stop-color%3D%22${encodeURIComponent(
+      color,
+    )}%22%20stop-opacity%3D%22.70%22%20id%3D%22stop416%22%2F%3E%3Cstop%20offset%3D%22.78%22%20stop-color%3D%22${encodeURIComponent(
+      color,
+    )}%22%20stop-opacity%3D%22.38%22%20id%3D%22stop418%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22transparent%22%20stop-opacity%3D%220%22%20id%3D%22stop420%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cg%20id%3D%22layer1%22%20transform%3D%22translate(5.3616118%2C3.2722342)%22%3E%3Cpolygon%20points%3D%220.53%2C0.25%2040.53%2C48.97%2080.53%2C0.25%20%22%20fill%3D%22url(%231)%22%20stroke%3D%22url(%232)%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%220.5px%22%20id%3D%22polygon425%22%20style%3D%22fill%3Aurl(%231-0)%3Bstroke%3Aurl(%232-9)%22%20transform%3D%22matrix(0.396875%2C0%2C0%2C0.396875%2C-5.3621201%2C-3.2722342)%22%2F%3E%3Ccircle%20cx%3D%2210.723224%22%20cy%3D%2213.781484%22%20r%3D%222.3812499%22%20fill%3D%22${encodeURIComponent(
+      color,
+    )}%22%20stroke%3D%22%23ffffff%22%20stroke-miterlimit%3D%2210%22%20id%3D%22circle427%22%20style%3D%22stroke-width%3A0.396874%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E`,
     color,
   };
 }
@@ -111,22 +134,10 @@ class OverviewMap {
      */
     this._obliqueSelectedImageLayer = null;
-    const primary = app.uiConfig.config.value.primaryColor ?? getDefaultPrimaryColor();
+    const primary =
+      app.uiConfig.config.value.primaryColor ?? getDefaultPrimaryColor();
     const fillColor = Color.fromCssColorString('#EDEDED');
-    /**
-     * @type {VectorStyleItem}
-     */
-    this.obliqueUnselectedStyle = new VectorStyleItem({
-      fill: {
-        color: fillColor.withAlpha(0.1).toCssColorString(),
-      },
-      stroke: {
-        color: primary,
-        width: 1,
-      },
-    });
     /**
      * @type {VectorStyleItem}
      */
@@ -228,7 +239,9 @@ class OverviewMap {
           this._map.layerCollection.remove(clone);
         }
       }),
-      this._app.themeChanged.addEventListener(this._updatePrimaryColor.bind(this)),
+      this._app.themeChanged.addEventListener(
+        this._updatePrimaryColor.bind(this),
+      ),
     ];
   }
@@ -269,15 +282,14 @@ class OverviewMap {
    */
   _updatePrimaryColor() {
     const color = getColorByKey('primary');
-    this.obliqueUnselectedStyle?.stroke?.setColor(color);
     this.obliqueSelectedStyle?.stroke?.setColor(color);
-    this._obliqueTileLayer?.forceRedraw?.();
-    this._obliqueImageLayer?.forceRedraw?.();
     this._obliqueSelectedImageLayer?.forceRedraw?.();
     const rotation = this.cameraIconStyle.image.getRotation();
     this.cameraIconStyle.image = new Icon(getCameraIcon(color));
     this.cameraIconStyle.image.setRotation(rotation);
-    this._cameraIconLayer?.getFeatureById('cameraFeature')?.setStyle(this.cameraIconStyle.style);
+    this._cameraIconLayer
+      ?.getFeatureById('cameraFeature')
+      ?.setStyle(this.cameraIconStyle.style);
   }
   /**
@@ -288,9 +300,10 @@ class OverviewMap {
     const overviewMapClickedInteraction = new OverviewMapClickedInteraction();
     this._mapClicked = overviewMapClickedInteraction.mapClicked;
     this._eventHandler.addPersistentInteraction(overviewMapClickedInteraction);
-    this._mapPointerListener = this._map.pointerInteractionEvent.addEventListener((e) => {
-      this._eventHandler.handleMapEvent(e);
-    });
+    this._mapPointerListener =
+      this._map.pointerInteractionEvent.addEventListener((e) => {
+        this._eventHandler.handleMapEvent(e);
+      });
   }
   /**
@@ -306,11 +319,13 @@ class OverviewMap {
     this._map.setTarget('overview-map-container');
     this._map.target?.firstChild?.classList?.add('overviewMapElement');
     if (!this._active) {
-      this._mapActivatedListener = this._app.maps.mapActivated.addEventListener(() => {
-        this._clearListeners();
-        this._cachedViewpoint = null;
-        this._activate();
-      });
+      this._mapActivatedListener = this._app.maps.mapActivated.addEventListener(
+        () => {
+          this._clearListeners();
+          this._cachedViewpoint = null;
+          this._activate();
+        },
+      );
     }
     this._active = true;
     const { activeMap } = this._app.maps;
@@ -356,7 +371,9 @@ class OverviewMap {
       this._syncCameraViewAndFeature();
     }
     const navRemover = this._addNavigationListener(map);
-    const prRemover = map.postRender.addEventListener(this._syncCameraViewAndFeature.bind(this));
+    const prRemover = map.postRender.addEventListener(
+      this._syncCameraViewAndFeature.bind(this),
+    );
     const cleanupTasks = () => {
       prRemover();
       navRemover();
@@ -379,8 +396,10 @@ class OverviewMap {
       if (e.feature) {
         const id = e.feature.getId().toString();
         if (this._obliqueTileLayer.getFeatureById(id)) {
-          const image = await obliqueMap.collection
-            .loadImageForCoordinate(e.positionOrPixel, this._obliqueViewDirection);
+          const image = await obliqueMap.collection.loadImageForCoordinate(
+            e.positionOrPixel,
+            this._obliqueViewDirection,
+          );
           if (image) {
             await obliqueMap.setImageByName(image.name);
           }
@@ -392,8 +411,12 @@ class OverviewMap {
     const listeners = [
       mapClickedListener,
-      obliqueMap.imageChanged.addEventListener(this._obliqueImageChange.bind(this)),
-      obliqueMap.collectionChanged.addEventListener(this._obliqueCollectionChanged.bind(this)),
+      obliqueMap.imageChanged.addEventListener(
+        this._obliqueImageChange.bind(this),
+      ),
+      obliqueMap.collectionChanged.addEventListener(
+        this._obliqueCollectionChanged.bind(this),
+      ),
     ];
     const prUnKey = this._map.olMap.once('postrender', () => {
@@ -406,7 +429,9 @@ class OverviewMap {
       this._obliqueImageLayer.deactivate();
       this._obliqueSelectedImageLayer.deactivate();
       unByKey(prUnKey);
-      listeners.forEach((l) => { l(); });
+      listeners.forEach((l) => {
+        l();
+      });
     };
     this._listeners.push(cleanupTasks);
     await this._obliqueTileLayer.activate();
@@ -455,10 +480,13 @@ class OverviewMap {
    * @private
    */
   _setupObliqueLayers() {
+    const almostTransparentStyle = new VectorStyleItem({
+      fill: { color: 'rgba(0, 0, 0, 0.000001)' },
+    });
     const obliqueTileStyle = new VectorStyleItem({});
     obliqueTileStyle.style = (feature) => {
       if (feature.get('state') === DataState.PENDING) {
-        return /** @type {ol/style/Style} */ (this.obliqueUnselectedStyle.style);
+        return almostTransparentStyle.style;
       }
       return emptyStyle;
     };
@@ -472,7 +500,7 @@ class OverviewMap {
     const obliqueImageStyle = new VectorStyleItem({});
     obliqueImageStyle.style = (feature) => {
       if (feature.get('viewDirection') === this._obliqueViewDirection) {
-        return this.obliqueUnselectedStyle.style;
+        return almostTransparentStyle.style;
       }
       return emptyStyle;
     };
@@ -522,7 +550,11 @@ class OverviewMap {
    */
   _syncCameraViewAndFeature() {
     const viewpoint = this._app.maps.activeMap?.getViewpointSync();
-    if (!viewpoint || !viewpoint.isValid() || viewpoint.equals(this._cachedViewpoint)) {
+    if (
+      !viewpoint ||
+      !viewpoint.isValid() ||
+      viewpoint.equals(this._cachedViewpoint)
+    ) {
       return;
     }
     this._cachedViewpoint = viewpoint.clone();
@@ -569,13 +601,13 @@ class OverviewMap {
    * @private
    */
   _clearListeners() {
-    this._listeners.forEach(cb => cb());
+    this._listeners.forEach((cb) => cb());
     this._listeners.splice(0);
   }
   destroy() {
     this._clearListeners();
-    this._collectionListeners.forEach(cb => cb());
+    this._collectionListeners.forEach((cb) => cb());
     this._collectionListeners = [];
     if (this._mapPointerListener) {
       this._mapPointerListener();
@@ -607,7 +639,6 @@ class OverviewMap {
       this._eventHandler.destroy();
     }
     this.cameraIconStyle.destroy();
-    this.obliqueUnselectedStyle.destroy();
     this.obliqueSelectedStyle.destroy();
     this._cachedViewpoint = null;
     this._mapClicked = null;

package/src/navigation/overviewMapClickedInteraction.js CHANGED Viewed

@@ -1,4 +1,9 @@
-import { VcsEvent, EventType, ModificationKeyType, AbstractInteraction } from '@vcmap/core';
+import {
+  VcsEvent,
+  EventType,
+  ModificationKeyType,
+  AbstractInteraction,
+} from '@vcmap/core';
 /**
  * @class

package/src/navigation/tiltSlider.vue CHANGED Viewed

@@ -4,11 +4,7 @@
     tooltip-position="left"
   >
     <template #activator="{ on, attrs }">
-      <v-card
-        class="w-8"
-        v-on="on"
-        v-bind="attrs"
-      >
+      <v-card class="w-8" v-on="on" v-bind="attrs">
         <v-slider
           track-color="base lighten-3"
           v-model="tilt"
@@ -24,21 +20,21 @@
 </template>
 <style lang="scss" scoped>
   @import '../styles/shades.scss';
-  .vcs-slider{
+  .vcs-slider {
     ::v-deep {
       .v-slider {
         min-height: 48px;
         margin-top: 8px;
         margin-bottom: 8px;
       }
-      .v-slider__thumb{
+      .v-slider__thumb {
         cursor: pointer;
         border-radius: 3px;
         width: 16px;
         height: 4px;
         border: 0;
         left: -8px;
-        &:before{
+        &:before {
           background-color: transparent;
         }
       }
@@ -47,7 +43,7 @@
   .v-application .theme--light.vcs-slider {
     ::v-deep {
       .v-slider {
-        .v-slider__track-container{
+        .v-slider__track-container {
           .v-slider__track-fill {
             background-color: map-get($shades, 'black') !important;
           }
@@ -61,7 +57,7 @@
   .v-application .theme--dark.vcs-slider {
     ::v-deep {
       .v-slider {
-        .v-slider__track-container{
+        .v-slider__track-container {
           .v-slider__track-fill {
             background-color: map-get($shades, 'white') !important;
           }

package/src/navigation/vcsCompass.vue CHANGED Viewed

@@ -4,14 +4,7 @@
       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
-      "
+    class="h-16 w-16 d-flex flex-column justify-center align-center position-relative rounded-circle user-select-none transition-transform-200-ease"
     elevation="1"
   >
     <span>N</span>
@@ -25,7 +18,6 @@
   </v-sheet>
 </template>
 <script>
   import { computed, ref } from 'vue';

package/src/navigation/vcsZoomButton.vue CHANGED Viewed

@@ -30,24 +30,23 @@
   };
 </script>
 <style lang="scss" scoped>
-.vcs-navigation-zoom {
-  box-shadow: rgba(0, 0, 0, 0.1) 0 2px 2px 0;
-  .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;
+  .vcs-navigation-zoom {
+    box-shadow: rgba(0, 0, 0, 0.1) 0 2px 2px 0;
+    .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;
+        }
       }
     }
   }
-}
 </style>

package/src/notifier/notifier.js CHANGED Viewed

@@ -36,22 +36,29 @@ export const NotificationType = {
  * @returns {Notification}
  */
 function createNotification(options, notifier) {
-  const {
-    type,
-    title,
-    message,
-    timeout,
-  } = options;
+  const { type, title, message, timeout } = options;
   const id = uuidv4();
   const open = ref(true);
   return {
-    get id() { return id; },
-    get type() { return type; },
-    get title() { return title; },
-    get message() { return message; },
-    get timeout() { return timeout ?? 5000; },
-    get open() { return open; },
+    get id() {
+      return id;
+    },
+    get type() {
+      return type;
+    },
+    get title() {
+      return title;
+    },
+    get message() {
+      return message;
+    },
+    get timeout() {
+      return timeout ?? 5000;
+    },
+    get open() {
+      return open;
+    },
     set open(value) {
       open.value = value?.value ?? value; // when used as a v-model, this is set as a boolean
       if (!open.value) {
@@ -105,7 +112,9 @@ class Notifier {
    */
   remove(notification) {
     // reassign to trigger update
-    this._notifications.value = this._notifications.value.filter(n => n !== notification);
+    this._notifications.value = this._notifications.value.filter(
+      (n) => n !== notification,
+    );
   }
   /**