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

package/src/manager/window/WindowComponentHeader.vue

@@ -1,20 +1,23 @@
 <template>
-  <span class="d-flex justify-space-between align-center window-component-header">
-    <span>
+  <div
+    class="d-flex justify-space-between align-center window-component-header"
+  >
+    <h3 class="d-flex align-center">
       <v-icon
         v-if="windowState.headerIcon"
-        class="mr-2"
+        class="mr-1"
         :class="{ 'primary--text': isOnTop }"
-        v-text="windowState.headerIcon"
         size="16"
-      />
-      <h3
+      >
+        {{ windowState.headerIcon }}
+      </v-icon>
+      <span
         class="d-inline-block user-select-none font-weight-bold"
         :class="{ 'text--primary': isOnTop }"
       >
         {{ $t(windowState.headerTitle) }}
-      </h3>
-    </span>
+      </span>
+    </h3>
     <div class="d-flex justify-space-between align-center">
       <template v-if="windowState.headerActions?.length > 0">
         <VcsActionButtonList
@@ -22,11 +25,7 @@
           :overflow-count="windowState.headerActionsOverflow ?? 3"
           small
         />
-        <v-divider
-          vertical
-          inset
-          class="mx-1"
-        />
+        <v-divider vertical inset class="mx-1" />
       </template>
       <VcsButton
         v-if="windowState.infoUrl"
@@ -52,17 +51,20 @@
         class="d-flex"
       />
     </div>
-  </span>
+  </div>
 </template>
 
 <style lang="scss" scoped>
-.window-component-header{
-  max-height: 16px;
+  .window-component-header {
+    max-height: 16px;
 
-  .v-divider--vertical.v-divider--inset {
-    margin-top: 2px;
+    h3 {
+      line-height: 16px;
+    }
+    .v-divider--vertical.v-divider--inset {
+      margin-top: 2px;
+    }
   }
-}
 </style>
 
 <script>
@@ -108,13 +110,20 @@
       const close = () => {
         emit('close');
       };
-      const isDockable = computed(() => !props.windowState.hidePin && props.windowState.dockable);
+      const isDockable = computed(
+        () => !props.windowState.hidePin && props.windowState.dockable,
+      );
 
-      const infoAction = props.windowState.infoUrl ? createLinkAction({
-        name: 'info',
-        title: 'content.infoAction.title',
-        icon: '$vcsInfo',
-      }, props.windowState.infoUrl) : {};
+      const infoAction = props.windowState.infoUrl
+        ? createLinkAction(
+            {
+              name: 'info',
+              title: 'content.infoAction.title',
+              icon: '$vcsInfo',
+            },
+            props.windowState.infoUrl,
+          )
+        : {};
 
       return {
         pin,
@@ -125,4 +134,3 @@
     },
   };
 </script>
-

package/src/manager/window/WindowManager.vue

@@ -1,7 +1,5 @@
 <template>
-  <div
-    :class="{ 'win-container-mobile' : $vuetify.breakpoint.xs }"
-  >
+  <div :class="{ 'win-container-mobile': $vuetify.breakpoint.xs }">
     <WindowComponent
       v-for="id in componentIds"
       :key="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
@@ -94,16 +95,20 @@
        * @param {string} id
        * @returns {import("vue").ComputedRef<Object>}
        */
-      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 || {}),
-        };
-      });
+      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
        */
@@ -124,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);
@@ -133,15 +139,20 @@
 
       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); },
+        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),
@@ -306,15 +345,28 @@ export function clipToTargetSize(windowPositionOptions, targetSize) {
   clippedPosition.maxWidth = targetWidth;
   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

@@ -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));
 }
 
 /**
@@ -157,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';
@@ -208,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);
 }
 
@@ -313,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,
+        });
       }
     }
   }
@@ -332,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,
+    );
   }
 
   /**
@@ -387,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,
+      });
     }
   }
 
@@ -422,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,
@@ -447,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,
@@ -537,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);
   }
@@ -561,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"