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

package/src/manager/window/WindowManager.vue

@@ -1,18 +1,16 @@
 <template>
-  <div
-    :class="{ 'win-container-mobile' : $vuetify.breakpoint.xs }"
-  >
+  <div :class="{ 'win-container-mobile': $vuetify.breakpoint.xs }">
     <WindowComponent
-      v-for="(id, zIndex) in componentIds"
+      v-for="id in componentIds"
       :key="id"
       :window-state="getState(id)"
       :slot-window="getSlot(id)"
-      :z-index="zIndex"
+      :z-index="getComponent(id).zIndex"
       @moved="move(id, $event)"
-      @click="clicked(id)"
-      :style="getStyles(id, zIndex).value"
+      @mousedown="bringWindowToTop(id)"
+      :style="getStyles(id).value"
       :class="getState(id).classes"
-      :is-on-top="isOnTop(zIndex)"
+      :is-on-top="isOnTop(id)"
     >
       <component
         :is="getComponent(id)"
@@ -23,7 +21,7 @@
         <component
           :is="getHeaderComponent(id)"
           :window-state="getState(id)"
-          :is-on-top="isOnTop(zIndex)"
+          :is-on-top="isOnTop(id)"
           :slot-window="getSlot(id)"
           v-bind="getProps(id)"
           @close="close(id)"
@@ -41,13 +39,12 @@
     width: 100%;
   }
   .win-container-mobile > {
-    div{
+    div {
       width: 100% !important;
       inset: unset !important;
       border-radius: 0 !important;
     }
   }
-
 </style>
 
 <script>
@@ -55,7 +52,11 @@
 
   import WindowComponent from './WindowComponent.vue';
   import WindowComponentHeader from './WindowComponentHeader.vue';
-  import { applyPositionOnTarget, getTargetSize, moveWindow } from './windowHelper.js';
+  import {
+    applyPositionOnTarget,
+    getTargetSize,
+    moveWindow,
+  } from './windowHelper.js';
 
   /**
    * WindowManager rendering all registered WindowComponents
@@ -84,32 +85,35 @@
         return windowManager.get(id)?.props ?? {};
       };
       /**
-       * @param {number} zIndex
+       * @param {string} id
        * @returns {boolean}
        */
-      const isOnTop = (zIndex) => {
-        return zIndex === componentIds.length - 1;
+      const isOnTop = (id) => {
+        return windowManager.get(id)?.zIndex.value === componentIds.length - 1;
       };
       /**
        * @param {string} id
-       * @param {number} zIndex
        * @returns {import("vue").ComputedRef<Object>}
        */
-      const getStyles = (id, zIndex) => computed(() => {
-        const windowComponent = windowManager.get(id);
-        const state = windowComponent?.state;
-        const position = applyPositionOnTarget(windowComponent?.position, targetSize.value);
-        return {
-          zIndex,
-          ...position,
-          ...(state.styles || {}),
-        };
-      });
+      const getStyles = (id) =>
+        computed(() => {
+          const windowComponent = windowManager.get(id);
+          const state = windowComponent?.state;
+          const position = applyPositionOnTarget(
+            windowComponent?.position,
+            targetSize.value,
+          );
+          return {
+            zIndex: windowComponent.zIndex.value,
+            ...position,
+            ...(state.styles || {}),
+          };
+        });
       /**
        * @param {string} id
        */
-      const clicked = (id) => {
-        if (windowManager.has(id)) {
+      const bringWindowToTop = (id) => {
+        if (windowManager.has(id) && !isOnTop(id)) {
           windowManager.bringWindowToTop(id);
         }
       };
@@ -125,7 +129,8 @@
         targetSize.value = getTargetSize(app.maps.target);
       };
       window.addEventListener('resize', setTargetSize);
-      const setTargetDestroy = app.maps.mapActivated.addEventListener(setTargetSize);
+      const setTargetDestroy =
+        app.maps.mapActivated.addEventListener(setTargetSize);
 
       onUnmounted(() => {
         window.removeEventListener('resize', setTargetSize);
@@ -134,16 +139,21 @@
 
       return {
         componentIds: ref(componentIds),
-        getComponent: id => windowManager.get(id).component,
-        getHeaderComponent: id => windowManager.get(id).headerComponent || WindowComponentHeader,
+        getComponent: (id) => windowManager.get(id).component,
+        getHeaderComponent: (id) =>
+          windowManager.get(id).headerComponent || WindowComponentHeader,
         getStyles,
         getState,
         getProps,
         isOnTop,
-        getSlot: id => windowManager.get(id).slot,
-        close: (id) => { windowManager.remove(id); },
-        pin: (id) => { windowManager.pinWindow(id); },
-        clicked,
+        getSlot: (id) => windowManager.get(id).slot,
+        close: (id) => {
+          windowManager.remove(id);
+        },
+        pin: (id) => {
+          windowManager.pinWindow(id);
+        },
+        bringWindowToTop,
         move,
       };
     },

package/src/manager/window/windowHelper.js

@@ -51,7 +51,12 @@ export function getTargetSize(target) {
  * @param {WindowAlignment} [alignment=WindowAlignment.TOP_LEFT]
  * @returns {WindowPositionOptions}
  */
-export function getWindowPositionOptions(x, y, target, alignment = WindowAlignment.TOP_LEFT) {
+export function getWindowPositionOptions(
+  x,
+  y,
+  target,
+  alignment = WindowAlignment.TOP_LEFT,
+) {
   const targetSize = getTargetSize(target);
   if (!targetSize) {
     return { left: x, top: y };
@@ -61,11 +66,11 @@ export function getWindowPositionOptions(x, y, target, alignment = WindowAlignme
   if (alignment === WindowAlignment.TOP_LEFT) {
     return { left: x - left, top: y - top };
   } else if (alignment === WindowAlignment.TOP_RIGHT) {
-    return { right: (left + width) - x, top: y - top };
+    return { right: left + width - x, top: y - top };
   } else if (alignment === WindowAlignment.BOTTOM_LEFT) {
-    return { left: x - left, bottom: (height + top) - y };
+    return { left: x - left, bottom: height + top - y };
   }
-  return { right: (left + width) - x, bottom: (height + top) - y };
+  return { right: left + width - x, bottom: height + top - y };
 }
 
 /**
@@ -75,17 +80,25 @@ export function getWindowPositionOptions(x, y, target, alignment = WindowAlignme
  * @param {WindowAlignment} [alignment]
  * @returns {WindowPositionOptions}
  */
-export function getWindowPositionOptionsFromMapEvent(windowPosition, target, alignment) {
+export function getWindowPositionOptionsFromMapEvent(
+  windowPosition,
+  target,
+  alignment,
+) {
   const targetSize = getTargetSize(target);
   if (!targetSize) {
     return { left: windowPosition.x, top: windowPosition.y };
   }
 
   const { left, top } = targetSize;
-  return getWindowPositionOptions(windowPosition.x + left, windowPosition.y + top, target, alignment);
+  return getWindowPositionOptions(
+    windowPosition.x + left,
+    windowPosition.y + top,
+    target,
+    alignment,
+  );
 }
 
-
 /**
  * Fits a window aligned top left, so it fits into the parent. This will change the alignment to be bottom or right depending
  * on if the window would not fit into the parent.
@@ -127,13 +140,24 @@ export function getFittedWindowPositionOptions(x, y, width, height, target) {
  * @param {HTMLElement} target - the map's target { @link @import("@vcmap/core").MapCollection }
  * @returns {WindowPositionOptions}
  */
-export function getFittedWindowPositionOptionsFromMapEvent(windowPosition, width, height, target) {
+export function getFittedWindowPositionOptionsFromMapEvent(
+  windowPosition,
+  width,
+  height,
+  target,
+) {
   const targetSize = getTargetSize(target);
   if (!targetSize) {
     return { left: windowPosition.x, top: windowPosition.y };
   }
   const { left, top } = targetSize;
-  return getFittedWindowPositionOptions(windowPosition.x + left, windowPosition.y + top, width, height, target);
+  return getFittedWindowPositionOptions(
+    windowPosition.x + left,
+    windowPosition.y + top,
+    width,
+    height,
+    target,
+  );
 }
 
 /**
@@ -148,7 +172,9 @@ export function posToNumber(pos, key, targetSize) {
     if (pos.match(/^-?\d+\.?\d*px$/)) {
       return parseInt(pos, 10);
     } else if (targetSize && pos.match(/^-?\d+\.?\d*%$/)) {
-      const scalar = ['bottom', 'top', 'height', 'maxHeight'].includes(key) ? targetSize?.height : targetSize?.width;
+      const scalar = ['bottom', 'top', 'height', 'maxHeight'].includes(key)
+        ? targetSize?.height
+        : targetSize?.width;
       return (parseInt(pos, 10) / 100) * scalar;
     }
     return undefined;
@@ -166,7 +192,9 @@ export function posToPercent(pos, key, targetSize) {
   if (!targetSize) {
     return undefined;
   }
-  const scalar = ['bottom', 'top', 'height', 'maxHeight'].includes(key) ? targetSize.height : targetSize.width;
+  const scalar = ['bottom', 'top', 'height', 'maxHeight'].includes(key)
+    ? targetSize.height
+    : targetSize.width;
   return `${((pos / scalar) * 100).toFixed(0)}%`;
 }
 
@@ -204,7 +232,11 @@ export function updateWindowPosition(previous, update, targetSize) {
    * @returns {string}
    */
   const toString = (key, prev, updated) => {
-    if (prev[key] === 'auto' || prev[key] === 'unset' || updated[key] === undefined) {
+    if (
+      prev[key] === 'auto' ||
+      prev[key] === 'unset' ||
+      updated[key] === undefined
+    ) {
       return prev[key];
     } else if (updated[key] !== 'auto' && updated[key] !== 'unset') {
       const numeric = posToNumber(updated[key], key, targetSize);
@@ -224,7 +256,6 @@ export function updateWindowPosition(previous, update, targetSize) {
   return updatedPosition;
 }
 
-
 /**
  * Move window position in x and y.
  * Rightward and downward movements are positive.
@@ -251,7 +282,11 @@ export function moveWindow(id, translation, windowManager, targetSize) {
   if (windowPositionOptions.right !== undefined) {
     windowPositionOptions.right -= translation.dx;
   }
-  const updatedPosition = updateWindowPosition(position, windowPositionOptions, targetSize);
+  const updatedPosition = updateWindowPosition(
+    position,
+    windowPositionOptions,
+    targetSize,
+  );
   windowManager.setWindowPositionOptions(id, updatedPosition);
 }
 
@@ -274,15 +309,18 @@ export function clipToTargetSize(windowPositionOptions, targetSize) {
     );
   }
   if (windowPositionOptions.bottom !== undefined) {
-    const height = windowPositionOptions.height ||
-      targetHeight - windowPositionOptions.bottom - windowPositionOptions.top || windowMoveMargin.bottom;
+    const height =
+      windowPositionOptions.height ||
+      targetHeight - windowPositionOptions.bottom - windowPositionOptions.top ||
+      windowMoveMargin.bottom;
     clippedPosition.bottom = Math.min(
       Math.max(windowPositionOptions.bottom, -height + windowMoveMargin.bottom),
       targetHeight - height,
     );
   }
   if (windowPositionOptions.left !== undefined) {
-    const width = windowPositionOptions.width ||
+    const width =
+      windowPositionOptions.width ||
       targetWidth - windowPositionOptions.right - windowPositionOptions.left;
     clippedPosition.left = Math.min(
       Math.max(windowPositionOptions.left, -width + windowMoveMargin.left),
@@ -290,7 +328,8 @@ export function clipToTargetSize(windowPositionOptions, targetSize) {
     );
   }
   if (windowPositionOptions.right !== undefined) {
-    const width = windowPositionOptions.width ||
+    const width =
+      windowPositionOptions.width ||
       targetWidth - windowPositionOptions.right - windowPositionOptions.left;
     clippedPosition.right = Math.min(
       Math.max(windowPositionOptions.right, -width + windowMoveMargin.right),
@@ -304,17 +343,30 @@ export function clipToTargetSize(windowPositionOptions, targetSize) {
     clippedPosition.height = windowPositionOptions.height;
   }
   clippedPosition.maxWidth = targetWidth;
-  clippedPosition.maxHeight = targetHeight;
+  clippedPosition.maxHeight = targetHeight - 4; // 2px space plus 2px due to margin bottom
   if (windowPositionOptions.maxWidth !== undefined) {
-    clippedPosition.maxWidth = Math.min(windowPositionOptions.maxWidth, targetWidth);
+    clippedPosition.maxWidth = Math.min(
+      windowPositionOptions.maxWidth,
+      targetWidth,
+    );
   }
   if (windowPositionOptions.maxHeight !== undefined) {
-    clippedPosition.maxHeight = Math.min(windowPositionOptions.maxHeight, targetHeight);
+    clippedPosition.maxHeight = Math.min(
+      windowPositionOptions.maxHeight,
+      targetHeight,
+    );
   }
   // max width of a top left 2 window (active static window)
-  const topLeft2 = posToNumber(WindowPositions.TOP_LEFT2.left, 'left', targetSize);
+  const topLeft2 = posToNumber(
+    WindowPositions.TOP_LEFT2.left,
+    'left',
+    targetSize,
+  );
   if (clippedPosition.left === topLeft2) {
-    clippedPosition.maxWidth = Math.min(clippedPosition.maxWidth - topLeft2, targetWidth);
+    clippedPosition.maxWidth = Math.min(
+      clippedPosition.maxWidth - topLeft2,
+      targetWidth,
+    );
   }
 
   return clippedPosition;
@@ -332,6 +384,10 @@ export function applyPositionOnTarget(position, targetSize) {
   }
   const windowPositionOptions = optionsFromWindowPosition(position, targetSize);
   const clippedPosition = clipToTargetSize(windowPositionOptions, targetSize);
-  const updatedPosition = updateWindowPosition(position, clippedPosition, targetSize);
+  const updatedPosition = updateWindowPosition(
+    position,
+    clippedPosition,
+    targetSize,
+  );
   return windowPositionFromOptions(updatedPosition);
 }

package/src/manager/window/windowManager.js

@@ -1,4 +1,4 @@
-import { reactive, ref } from 'vue';
+import { computed, reactive, ref } from 'vue';
 import { VcsEvent } from '@vcmap/core';
 import { v4 as uuidv4 } from 'uuid';
 import { parseEnumValue } from '@vcsuite/parsers';
@@ -20,7 +20,6 @@ export const WindowSlot = {
   DETACHED: 'detached',
 };
 
-
 /**
  * @typedef {Object} WindowPositionOptions
  * @property {string|number|undefined} left Can be a css position string (e.g. '320px' or '50%') number values are treated as `px` values
@@ -84,7 +83,7 @@ export const WindowPositions = {
  * @returns {boolean}
  */
 export function compareWindowPositions(pos1, pos2) {
-  return !(Object.keys(pos1).some(key => pos1[key] !== pos2[key]));
+  return !Object.keys(pos1).some((key) => pos1[key] !== pos2[key]);
 }
 
 /**
@@ -93,8 +92,11 @@ export function compareWindowPositions(pos1, pos2) {
  * @returns {boolean}
  */
 export function isSlotPosition(windowPosition) {
-  return [WindowPositions.TOP_LEFT, WindowPositions.TOP_LEFT2, WindowPositions.TOP_RIGHT]
-    .some(s => compareWindowPositions(s, windowPosition));
+  return [
+    WindowPositions.TOP_LEFT,
+    WindowPositions.TOP_LEFT2,
+    WindowPositions.TOP_RIGHT,
+  ].some((s) => compareWindowPositions(s, windowPosition));
 }
 
 /**
@@ -137,6 +139,7 @@ export function isSlotPosition(windowPosition) {
  * @property {WindowSlot} initialSlot
  * @property {Object} props
  * @property {Object} provides
+ * @property {import("vue").ComputedGetter<number>} zIndex
  */
 
 /**
@@ -156,7 +159,10 @@ export function posToPixel(pos) {
  * @param {WindowPosition=} windowPosition
  * @returns {WindowPosition}
  */
-export function windowPositionFromOptions(windowPositionOptions, windowPosition = {}) {
+export function windowPositionFromOptions(
+  windowPositionOptions,
+  windowPosition = {},
+) {
   let left = posToPixel(windowPositionOptions.left) || 'unset';
   const right = posToPixel(windowPositionOptions.right) || 'unset';
   let top = posToPixel(windowPositionOptions.top) || 'unset';
@@ -207,14 +213,20 @@ export function windowPositionFromOptions(windowPositionOptions, windowPosition
  * @param {WindowPositionOptions} windowPositionOptions
  */
 function setWindowPosition(windowComponent, windowPositionOptions) {
-  const windowPosition = windowPositionFromOptions(windowPositionOptions, windowComponent.position);
+  const windowPosition = windowPositionFromOptions(
+    windowPositionOptions,
+    windowComponent.position,
+  );
   // not one of the default Positions, so we also have to DETACH the windowState.
   if (!isSlotPosition(windowPosition)) {
     windowComponent.slot.value = WindowSlot.DETACHED;
   }
   // check dockable state
-  const initialWindowPosition = windowPositionFromOptions(windowComponent.initialPositionOptions);
-  windowComponent.state.dockable = windowComponent.slot.value === WindowSlot.DETACHED &&
+  const initialWindowPosition = windowPositionFromOptions(
+    windowComponent.initialPositionOptions,
+  );
+  windowComponent.state.dockable =
+    windowComponent.slot.value === WindowSlot.DETACHED &&
     !compareWindowPositions(windowPosition, initialWindowPosition);
 }
 
@@ -238,6 +250,11 @@ class WindowManager {
      * @type {Array<string>}
      */
     this.componentIds = [];
+    /**
+     * reactive ordered array of ids, defining the zIndex of a component
+     * @type {import("vue").Ref<Array<string>>}
+     */
+    this._zIndices = ref([]);
 
     /**
      * @type {Map<string, WindowComponent>}
@@ -277,8 +294,8 @@ class WindowManager {
     const windowComponent = this._windowComponents.get(id);
     if (windowComponent) {
       this._cachePosition(windowComponent);
-      const index = this.componentIds.indexOf(id);
-      this.componentIds.splice(index, 1);
+      this.componentIds.splice(this.componentIds.indexOf(id), 1);
+      this._zIndices.value.splice(this._zIndices.value.indexOf(id), 1);
       this._windowComponents.delete(id);
       this._handleSlotsChanged(windowComponent.slot.value);
       this.removed.raiseEvent(windowComponent);
@@ -307,15 +324,15 @@ class WindowManager {
       const staticWindow = this._findWindowBySlot(WindowSlot.STATIC);
       const dynamicWindowLeft = this._findWindowBySlot(WindowSlot.DYNAMIC_LEFT);
       if (staticWindow && dynamicWindowLeft) {
-        this.setWindowPositionOptions(
-          dynamicWindowLeft.id,
-          { ...dynamicWindowLeft.position, ...WindowPositions.TOP_LEFT2 },
-        );
+        this.setWindowPositionOptions(dynamicWindowLeft.id, {
+          ...dynamicWindowLeft.position,
+          ...WindowPositions.TOP_LEFT2,
+        });
       } else if (!staticWindow && dynamicWindowLeft) {
-        this.setWindowPositionOptions(
-          dynamicWindowLeft.id,
-          { ...dynamicWindowLeft.position, ...WindowPositions.TOP_LEFT },
-        );
+        this.setWindowPositionOptions(dynamicWindowLeft.id, {
+          ...dynamicWindowLeft.position,
+          ...WindowPositions.TOP_LEFT,
+        });
       }
     }
   }
@@ -326,7 +343,9 @@ class WindowManager {
    * @private
    */
   _findWindowBySlot(slot) {
-    return Array.from(this._windowComponents.values()).find(item => item.slot.value === slot);
+    return Array.from(this._windowComponents.values()).find(
+      (item) => item.slot.value === slot,
+    );
   }
 
   /**
@@ -381,9 +400,15 @@ class WindowManager {
    * @private
    */
   _cachePosition(windowComponent) {
-    const initialWindowPosition = windowPositionFromOptions(windowComponent.initialPositionOptions);
-    if (!compareWindowPositions(initialWindowPosition, windowComponent.position)) {
-      this._windowPositionsCache.set(windowComponent.id, { ...windowComponent.position });
+    const initialWindowPosition = windowPositionFromOptions(
+      windowComponent.initialPositionOptions,
+    );
+    if (
+      !compareWindowPositions(initialWindowPosition, windowComponent.position)
+    ) {
+      this._windowPositionsCache.set(windowComponent.id, {
+        ...windowComponent.position,
+      });
     }
   }
 
@@ -416,22 +441,26 @@ class WindowManager {
     check(owner, [String, vcsAppSymbol]);
 
     if (windowComponentOptions.id && this.has(windowComponentOptions.id)) {
-      throw new Error(`A window with id ${windowComponentOptions.id} has already been registered.`);
+      throw new Error(
+        `A window with id ${windowComponentOptions.id} has already been registered.`,
+      );
     }
     const id = windowComponentOptions.id || uuidv4();
-    const slotOption = windowComponentOptions.slot?.value || windowComponentOptions.slot;
+    const slotOption =
+      windowComponentOptions.slot?.value || windowComponentOptions.slot;
     const slot = parseEnumValue(slotOption, WindowSlot, WindowSlot.DETACHED);
-    const windowPositionOptions = this._getPositionOptionsForSlot(slot, windowComponentOptions.position);
+    const windowPositionOptions = this._getPositionOptionsForSlot(
+      slot,
+      windowComponentOptions.position,
+    );
     const windowPosition = windowPositionFromOptions(windowPositionOptions);
 
     const slotRef = ref(slot);
-    const {
-      component, headerComponent,
-    } = windowComponentOptions;
+    const { component, headerComponent } = windowComponentOptions;
     const styles = { ...windowComponentOptions?.state?.styles };
-    const classes = Array.isArray(windowComponentOptions?.state?.classes) ?
-      [...(windowComponentOptions?.state?.classes ?? [])] :
-      { ...windowComponentOptions?.state?.classes };
+    const classes = Array.isArray(windowComponentOptions?.state?.classes)
+      ? [...(windowComponentOptions?.state?.classes ?? [])]
+      : { ...windowComponentOptions?.state?.classes };
 
     const state = reactive({
       id,
@@ -441,7 +470,8 @@ class WindowManager {
       headerTitle: windowComponentOptions?.state?.headerTitle,
       headerIcon: windowComponentOptions?.state?.headerIcon,
       headerActions: windowComponentOptions?.state?.headerActions,
-      headerActionsOverflow: windowComponentOptions?.state?.headerActionsOverflow,
+      headerActionsOverflow:
+        windowComponentOptions?.state?.headerActionsOverflow,
       dockable: false,
       infoUrl: windowComponentOptions?.state?.infoUrl,
       classes,
@@ -453,6 +483,7 @@ class WindowManager {
 
     const position = reactive(windowPosition);
     const initialPosition = { ...windowPositionOptions };
+    const zIndex = computed(() => this._zIndices.value.indexOf(id));
     /**
      * @type {WindowComponent}
      */
@@ -487,6 +518,9 @@ class WindowManager {
       get provides() {
         return provides;
       },
+      get zIndex() {
+        return zIndex;
+      },
     };
     const cached = this._assignCachedPosition(windowComponent);
     if (!cached) {
@@ -494,6 +528,7 @@ class WindowManager {
     }
     this._windowComponents.set(id, windowComponent);
     this.componentIds.push(id);
+    this._zIndices.value.push(id);
     this._handleSlotsChanged(slot);
     this.added.raiseEvent(windowComponent);
     return windowComponent;
@@ -505,10 +540,10 @@ class WindowManager {
    */
   bringWindowToTop(id) {
     if (this.has(id)) {
-      const index = this.componentIds.indexOf(id);
-      if (index >= 0 && index !== this.componentIds.length - 1) {
-        this.componentIds.push(id);
-        this.componentIds.splice(index, 1);
+      const index = this._zIndices.value.indexOf(id);
+      if (index >= 0 && index !== this._zIndices.value.length - 1) {
+        this._zIndices.value.push(id);
+        this._zIndices.value.splice(index, 1);
       }
     }
   }
@@ -526,7 +561,10 @@ class WindowManager {
     }
     this._removeWindowAtSlot(component.initialSlot);
     component.slot.value = component.initialSlot;
-    const dockedPosition = this._getPositionOptionsForSlot(component.initialSlot, component.initialPositionOptions);
+    const dockedPosition = this._getPositionOptionsForSlot(
+      component.initialSlot,
+      component.initialPositionOptions,
+    );
     this.setWindowPositionOptions(id, dockedPosition);
     this._windowPositionsCache.delete(id);
   }
@@ -550,7 +588,9 @@ class WindowManager {
    */
   clear() {
     const componentIds = [...this.componentIds];
-    componentIds.forEach((id) => { this.remove(id); });
+    componentIds.forEach((id) => {
+      this.remove(id);
+    });
   }
 
   /**

package/src/navigation/mapNavCompass.vue

@@ -1,5 +1,10 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="58" height="58" viewBox="0 0 58 58">
+  <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' : ''"
@@ -20,7 +25,11 @@
         @click="emit($event, 180)"
       />
     </g>
-    <g id="Group_1653" data-name="Group 1653" transform="translate(0 33) rotate(-90)">
+    <g
+      id="Group_1653"
+      data-name="Group 1653"
+      transform="translate(0 33) rotate(-90)"
+    >
       <path
         :class="canEmit ? 'cursor-pointer' : ''"
         id="west_arrow"
@@ -39,7 +48,12 @@
         @click="emit($event, 90)"
       />
     </g>
-    <g id="Group_1672" data-name="Group 1672" transform="translate(1)" v-if="!hideTicks">
+    <g
+      id="Group_1672"
+      data-name="Group 1672"
+      transform="translate(1)"
+      v-if="!hideTicks"
+    >
       <line
         id="Line_289-2"
         data-name="Line 289"
@@ -162,6 +176,6 @@
   }
 
   svg path:hover {
-    fill: var(--v-base-lighten5) !important;
+    fill: var(--v-primary-lighten1) !important;
   }
 </style>