@vcmap/ui 5.0.2 → 5.1.0-rc.2

package/src/manager/toolbox/toolboxManager.js

@@ -1,7 +1,7 @@
 import { VcsEvent } from '@vcmap/core';
 import { check, checkMaybe } from '@vcsuite/check';
 import { v4 as uuidv4 } from 'uuid';
-import { reactive } from 'vue';
+import { reactive, shallowReactive } from 'vue';
 import { vcsAppSymbol } from '../../pluginHelper.js';
 import ButtonManager from '../buttonManager.js';
 import { ActionPattern } from '../../components/lists/VcsActionList.vue';
@@ -24,20 +24,25 @@ export const ToolboxType = {
  * @typedef {Object} ToolboxComponentOptions
  * @property {string} [id] - Optional ID, If not provided an uuid will be generated.
  * @property {ToolboxType} type - Group type, defining the behaviour of the group
+ * @property {(string|symbol)[]} [toolboxNames] - optional specific toolboxes to render this component in.
  */
 
 /**
- * @typedef {ToolboxComponentOptions} SingleToolboxComponentOptions
+ * @typedef {ToolboxComponentOptions & { action: import("../../actions/actionHelper.js").VcsAction }} SingleToolboxComponentOptions
  * @property {VcsAction} action - An action of a single tool
  */
 
 /**
- * @typedef {ToolboxComponentOptions} SelectToolboxComponentOptions
+ * @typedef {ToolboxComponentOptions & { action: ToolboxSelectAction }} SelectToolboxComponentOptions
  * @property {ToolboxSelectAction} action - An action determining the behaviour of the select group
  */
 
 /**
- * @typedef {ToolboxComponentOptions} GroupToolboxComponentOptions
+ * @typedef {ToolboxComponentOptions & {
+ *   icon: string,
+ *   title?: string,
+ *   disabled?: boolean,
+ *  }} GroupToolboxComponentOptions
  * @property {string} icon - Group icon
  * @property {string} [title] - Optional group title, for dropdown
  * @property {boolean} [disabled=false]
@@ -48,28 +53,33 @@ export const ToolboxType = {
  * @property {string} id
  * @property {ToolboxType} type - Group type, defining the behaviour of the group
  * @property {string|vcsAppSymbol} owner
+ * @property {(string|symbol)[]} toolboxNames
  */
 
 /**
- * @typedef {ToolboxComponent} SingleToolboxComponent
- * @property {VcsAction} action
+ * @typedef {ToolboxComponent & { action: import("vue").UnwrapRef<import("../../actions/actionHelper.js").VcsAction> }} SingleToolboxComponent
  */
 
 /**
- * @typedef {ToolboxComponent} GroupToolboxComponent
- * @property {string|undefined} icon
- * @property {string|undefined} title
- * @property {ButtonManager} buttonManager
- * @property {boolean} [disabled=false]
+ * @typedef {ToolboxComponent & {
+ *   icon: string,
+ *   title?: string,
+ *   buttonManager: ButtonManager,
+ *   disabled?: boolean
+ * }} GroupToolboxComponent
  */
 
 /**
- * @typedef {ToolboxComponent} SelectToolboxComponent
+ * @typedef {ToolboxComponent & { action: import("vue").UnwrapRef<ToolboxSelectAction> }} SelectToolboxComponent
  * @property {ToolboxSelectAction} action
  */
 
 /**
- * @typedef {VcsAction} ToolboxSelectAction
+ * @typedef {import("../../actions/actionHelper.js").VcsAction & {
+ *   selected: function(number):void,
+ *   tools: ToolboxSelectItem[],
+ *   currentIndex: number
+ * }} ToolboxSelectAction
  * @property {function(index:number):void} selected - A callback determining the select behavior of the group. Should set the currentIndex.
  * @property {Array<ToolboxSelectItem>} tools - A list of exclusive tools belonging to the group
  * @property {number} currentIndex - Index of the current item
@@ -108,15 +118,21 @@ const defaultGroups = [
  */
 const defaultOrder = ['featureInfo', 'flight'];
 
+/**
+ * The default toolbox name
+ * @type {symbol}
+ */
+export const defaultToolboxName = Symbol('defaultToolboxName');
+
 /**
  * sorts by owner and optionally plugin order
  * If both components are owned by vcsApp, defaultOrder is used to compare
- * @param {ToolboxComponent|ButtonComponent} compA
- * @param {ToolboxComponent|ButtonComponent} compB
+ * @param {ToolboxComponent|import("../buttonManager.js").ButtonComponent} compA
+ * @param {ToolboxComponent|import("../buttonManager.js").ButtonComponent} compB
  * @param {string[]} [order] order of owners to sort by
  * @returns {number}
  */
-export function sortByOwner(compA, compB, order = []) {
+function sortByOwner(compA, compB, order = []) {
   const sorted = [vcsAppSymbol, ...order];
   let indexA = sorted.indexOf(compA.owner);
   let indexB = sorted.indexOf(compB.owner);
@@ -142,10 +158,10 @@ export function sortByOwner(compA, compB, order = []) {
 
 /**
  * returns ToolboxComponents sorted by owner (or other sort function)
- * @param {Array<ToolboxComponent|ButtonComponent>} components
+ * @param {Array<ToolboxComponent|import("../buttonManager.js").ButtonComponent>} components
  * @param {string[]} [order] optional order to sort by (plugin names)
  * @param {function(ownerA:string, ownerB:string, order: string[]):number} [compareFn=sortByOwner] Per default components are sorted by owner: app first, then plugins
- * @returns {Array<ToolboxComponent|ButtonComponent>}
+ * @returns {Array<ToolboxComponent|import("../buttonManager.js").ButtonComponent>}
  */
 export function getComponentsByOrder(
   components,
@@ -167,10 +183,14 @@ export function setupDefaultGroups(toolboxManager, groups = defaultGroups) {
   );
 }
 
+/**
+ * @typedef {import("../../vcsUiApp.js").VcsComponentManager<ToolboxComponent,ToolboxComponentOptions>} IToolboxManager
+ */
+
 /**
  * @class ToolboxManager
  * @description Manages a set of Toolbox Components
- * @implements VcsComponentManager<ToolboxComponent,ToolboxComponentOptions>
+ * @implements {IToolboxManager}
  */
 class ToolboxManager {
   constructor() {
@@ -193,6 +213,34 @@ class ToolboxManager {
      * @private
      */
     this._toolboxGroups = new Map();
+
+    /**
+     * @type {symbol|string}
+     * @private
+     */
+    this._toolboxName = defaultToolboxName;
+
+    /**
+     * @type {VcsEvent<string>}
+     */
+    this.toolboxNameChanged = new VcsEvent();
+  }
+
+  get toolboxName() {
+    return this._toolboxName;
+  }
+
+  set toolboxName(name) {
+    check(name, [String, defaultToolboxName]);
+
+    if (this._toolboxName !== name) {
+      this._toolboxName = name;
+      this.toolboxNameChanged.raiseEvent(name);
+    }
+  }
+
+  setDefaultToolboxName() {
+    this.toolboxName = defaultToolboxName;
   }
 
   /**
@@ -235,7 +283,7 @@ class ToolboxManager {
    * @param {SingleToolboxComponentOptions|SelectToolboxComponentOptions|GroupToolboxComponentOptions} toolboxComponentOptions
    * @param {string|symbol} owner pluginName or vcsAppSymbol
    * @throws {Error} if a toolboxComponent with the same ID has already been added
-   * @returns {SingleToolboxComponent|SelectToolboxComponent|GroupToolboxComponent}
+   * @returns {SingleToolboxComponent|SelectToolboxComponent|import("vue").ShallowReactive<GroupToolboxComponent>}
    */
   add(toolboxComponentOptions, owner) {
     checkMaybe(toolboxComponentOptions.id, String);
@@ -248,8 +296,11 @@ class ToolboxManager {
       );
     }
     const id = toolboxComponentOptions.id || uuidv4();
-    const { type } = toolboxComponentOptions;
+    const { type, toolboxNames: toolboxNamesOptions } = toolboxComponentOptions;
 
+    const toolboxNames = toolboxNamesOptions
+      ? [...toolboxNamesOptions]
+      : [defaultToolboxName];
     /**
      * @type {ToolboxComponent}
      */
@@ -263,6 +314,9 @@ class ToolboxManager {
       get owner() {
         return owner;
       },
+      get toolboxNames() {
+        return toolboxNames;
+      },
     };
 
     if (type === ToolboxType.SINGLE) {
@@ -306,24 +360,24 @@ class ToolboxManager {
       check(toolboxComponentOptions.icon, String);
       checkMaybe(toolboxComponentOptions.title, String);
       checkMaybe(toolboxComponentOptions.disabled, Boolean);
-      const { icon, title = undefined, disabled } = toolboxComponentOptions;
+      const {
+        icon,
+        title = undefined,
+        disabled = false,
+      } = toolboxComponentOptions;
       const buttonManager = new ButtonManager();
       /**
-       * @type {GroupToolboxComponent}
+       * @type {import("vue").ShallowReactive<GroupToolboxComponent>}
        */
-      toolboxComponent = {
+      toolboxComponent = shallowReactive({
         ...toolboxComponent,
         disabled,
-        get icon() {
-          return icon;
-        },
-        get title() {
-          return title;
-        },
+        icon,
+        title,
         get buttonManager() {
           return buttonManager;
         },
-      };
+      });
     }
 
     this._toolboxGroups.set(toolboxComponent.id, toolboxComponent);
@@ -365,6 +419,7 @@ class ToolboxManager {
   destroy() {
     this.added.destroy();
     this.removed.destroy();
+    this.toolboxNameChanged.destroy();
     this.clear();
     this.componentIds.splice(0);
     this._toolboxGroups.clear();

package/src/manager/window/WindowComponent.vue.d.ts

@@ -0,0 +1,40 @@
+declare const _default: import("vue").DefineComponent<{
+    windowState: {
+        type: ObjectConstructor;
+        required: true;
+    };
+    isOnTop: {
+        type: BooleanConstructor;
+        required: true;
+        default: boolean;
+    };
+    slotWindow: {
+        type: ObjectConstructor;
+        required: true;
+    };
+}, {
+    isDynamic: import("vue").ComputedRef<boolean>;
+    isChild: import("vue").ComputedRef<boolean>;
+    isDocked: import("vue").ComputedRef<boolean>;
+    isDynamicLeft: import("vue").ComputedRef<boolean>;
+    isDynamicRight: import("vue").ComputedRef<boolean>;
+    isDraggable: import("vue").Ref<boolean>;
+    dragStart: (e: DragEvent) => void;
+    dragEnd: (endEvent: DragEvent) => void;
+    mousedown: (e: MouseEvent) => void;
+}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    windowState: {
+        type: ObjectConstructor;
+        required: true;
+    };
+    isOnTop: {
+        type: BooleanConstructor;
+        required: true;
+        default: boolean;
+    };
+    slotWindow: {
+        type: ObjectConstructor;
+        required: true;
+    };
+}>>, {}>;
+export default _default;

package/src/manager/window/WindowComponentHeader.vue

@@ -13,7 +13,7 @@
       </v-icon>
       <span
         class="d-inline-block user-select-none font-weight-bold"
-        :class="{ 'text--primary': isOnTop }"
+        :class="{ 'primary--text': isOnTop }"
       >
         {{ translatedHeaderTitle }}
       </span>

package/src/manager/window/WindowComponentHeader.vue.d.ts

@@ -0,0 +1,36 @@
+declare const _default: import("vue").DefineComponent<{
+    windowState: {
+        type: ObjectConstructor;
+        required: true;
+    };
+    isOnTop: {
+        type: BooleanConstructor;
+        required: true;
+        default: boolean;
+    };
+    slotWindow: {
+        type: ObjectConstructor;
+        required: true;
+    };
+}, {
+    pin: () => void;
+    close: () => void;
+    isDockable: import("vue").ComputedRef<any>;
+    translatedHeaderTitle: import("vue").ComputedRef<any>;
+    infoAction: import("../../actions/actionHelper.js").VcsAction | undefined;
+}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    windowState: {
+        type: ObjectConstructor;
+        required: true;
+    };
+    isOnTop: {
+        type: BooleanConstructor;
+        required: true;
+        default: boolean;
+    };
+    slotWindow: {
+        type: ObjectConstructor;
+        required: true;
+    };
+}>>, {}>;
+export default _default;

package/src/manager/window/WindowManager.vue

@@ -16,6 +16,7 @@
         :is="getComponent(id)"
         :window-state="getState(id)"
         v-bind="getProps(id)"
+        @close="close(id)"
       />
       <template v-if="!getState(id).hideHeader" #headerComponent>
         <component

package/src/manager/window/WindowManager.vue.d.ts

@@ -0,0 +1,19 @@
+declare const _default: import("vue").DefineComponent<{}, {
+    componentIds: WindowManager;
+    getComponent: (id: any) => any;
+    getHeaderComponent: (id: any) => any;
+    getStyles: (id: string) => import("vue").ComputedRef<Object>;
+    getState: (id: string) => WindowState;
+    getProps: (id: string) => Object;
+    isOnTop: (id: string) => boolean;
+    getSlot: (id: any) => any;
+    close: (id: any) => void;
+    pin: (id: any) => void;
+    bringWindowToTop: (id: string) => void;
+    move: (id: string, translation: {
+        dx: number;
+        dy: number;
+    }) => void;
+    addMobileClass: import("vue").ComputedRef<any>;
+}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+export default _default;

package/src/manager/window/windowHelper.d.ts

@@ -0,0 +1,134 @@
+/**
+ *
+ * @param {HTMLElement} target
+ * @returns {DOMRect|null}
+ */
+export function getTargetSize(target: HTMLElement): DOMRect | null;
+/**
+ * WindowPositionOptions from client position relative to a HTMLElement
+ * @param {number} x - client pixel position
+ * @param {number} y - client pixel position
+ * @param {HTMLElement} target - the map's target { @link @import("@vcmap/core").MapCollection }
+ * @param {WindowAlignment} [alignment=WindowAlignment.TOP_LEFT]
+ * @returns {import("./windowManager.js").WindowPositionOptions}
+ */
+export function getWindowPositionOptions(x: number, y: number, target: HTMLElement, alignment?: number | undefined): import("./windowManager.js").WindowPositionOptions;
+/**
+ * Get window position options based on a pixel in the map
+ * @param {import("@vcmap-cesium/engine").Cartesian2} windowPosition - the window position, as retrieved from an InteractionEvent
+ * @param {HTMLElement} target - the map's target { @link @import("@vcmap/core").MapCollection }
+ * @param {WindowAlignment} [alignment]
+ * @returns {import("./windowManager.js").WindowPositionOptions}
+ */
+export function getWindowPositionOptionsFromMapEvent(windowPosition: import("@vcmap-cesium/engine").Cartesian2, target: HTMLElement, alignment?: number | undefined): import("./windowManager.js").WindowPositionOptions;
+/**
+ * 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.
+ * @param {number} x - client pixel position
+ * @param {number} y - client pixel position
+ * @param {number} width - window width to fit
+ * @param {number} height - window height to fit
+ *  @param {HTMLElement} target - the map's target { @link @import("@vcmap/core").MapCollection }
+ * @returns {import("./windowManager.js").WindowPositionOptions}
+ */
+export function getFittedWindowPositionOptions(x: number, y: number, width: number, height: number, target: HTMLElement): import("./windowManager.js").WindowPositionOptions;
+/**
+ * Fits a window aligned top left, so it fits into currently active map. This will change the alignment to be bottom or right depending
+ * on if the window would not fit into active map element.
+ * @param {import("@vcmap-cesium/engine").Cartesian2} windowPosition - the window position, as retrieved from an InteractionEvent
+ * @param {number} width
+ * @param {number} height
+ * @param {HTMLElement} target - the map's target { @link @import("@vcmap/core").MapCollection }
+ * @returns {import("./windowManager.js").WindowPositionOptions}
+ */
+export function getFittedWindowPositionOptionsFromMapEvent(windowPosition: import("@vcmap-cesium/engine").Cartesian2, width: number, height: number, target: HTMLElement): import("./windowManager.js").WindowPositionOptions;
+/**
+ * Parses a position to numeric value. Non-numeric values return undefined.
+ * @param {string|number|undefined} pos
+ * @param {string} key - one of WindowPosition keys
+ * @param {DOMRect} targetSize - size of the current target
+ * @returns {number|undefined}
+ */
+export function posToNumber(pos: string | number | undefined, key: string, targetSize: DOMRect): number | undefined;
+/**
+ * @param {number} pos
+ * @param {string} key - one of WindowPosition keys
+ * @param {DOMRect} targetSize - size of the current target
+ * @returns {string}
+ */
+export function posToPercent(pos: number, key: string, targetSize: DOMRect): string;
+/**
+ * Parses CSS position string properties to absolute numeric position properties
+ * @param {import("./windowManager.js").WindowPosition} windowPosition
+ * @param {DOMRect} targetSize - the map's target size
+ * @returns {import("./windowManager.js").WindowPositionOptions|null}
+ */
+export function optionsFromWindowPosition(windowPosition: import("./windowManager.js").WindowPosition, targetSize: DOMRect): import("./windowManager.js").WindowPositionOptions | null;
+/**
+ * Returns an updated WindowPosition by applying new options keeping the original object unchanged.
+ * Ensures units are maintained.
+ * Previous values 'auto' and 'unset' will not be touched.
+ * @param {import("./windowManager.js").WindowPosition} previous
+ * @param {import("./windowManager.js").WindowPositionOptions} update
+ * @param {DOMRect} targetSize - the map's target size
+ * @returns {import("./windowManager.js").WindowPosition}
+ */
+export function updateWindowPosition(previous: import("./windowManager.js").WindowPosition, update: import("./windowManager.js").WindowPositionOptions, targetSize: DOMRect): import("./windowManager.js").WindowPosition;
+/**
+ * Move window position in x and y.
+ * Rightward and downward movements are positive.
+ * @param {string} id - the window id
+ * @param {{dx: number, dy: number}} translation - translation in px
+ * @param {import("./windowManager.js").default} windowManager
+ * @param {DOMRect} targetSize - the map's target size
+ * @param {import("./windowManager.js").WindowPosition|null} windowPosition - Optional position to be preferred over windowComponent's position as start.
+ */
+export function moveWindow(id: string, translation: {
+    dx: number;
+    dy: number;
+}, windowManager: import("./windowManager.js").default, targetSize: DOMRect, windowPosition?: import("./windowManager.js").WindowPosition | null): void;
+/**
+ * Clips a provided WindowPosition corresponding to the size of its target
+ * @param {import("./windowManager.js").WindowPositionOptions} windowPositionOptions - numerical WindowPositionOptions
+ * @param {DOMRect} targetSize - the map's target size
+ * @returns {import("./windowManager.js").WindowPositionOptions}
+ */
+export function clipToTargetSize(windowPositionOptions: import("./windowManager.js").WindowPositionOptions, targetSize: DOMRect): import("./windowManager.js").WindowPositionOptions;
+/**
+ * Derives a child window position from a parent window, placing the child top-right of the parent.
+ * @param {import("./windowManager.js").WindowPositionOptions} windowPositionOptions - numerical WindowPositionOptions
+ * @param {DOMRect} targetSize - the map's target size
+ * @param {import("./windowManager.js").WindowPositionOptions} parentPosition - numerical WindowPositionOptions
+ */
+export function applyParentPosition(windowPositionOptions: import("./windowManager.js").WindowPositionOptions, targetSize: DOMRect, parentPosition: import("./windowManager.js").WindowPositionOptions): void;
+/**
+ * Returns the position applied on the target by clipping the position to the target's size.
+ * Maintains units of the input position.
+ * If parent position is provided, returned position is placed top-right of its parent
+ * @param {import("./windowManager.js").WindowPosition} position
+ * @param {DOMRect} targetSize
+ * @param {import("./windowManager.js").WindowPosition|null} parentPosition
+ * @returns {import("./windowManager.js").WindowPosition}
+ */
+export function getPositionAppliedOnTarget(position: import("./windowManager.js").WindowPosition, targetSize: DOMRect, parentPosition: import("./windowManager.js").WindowPosition | null): import("./windowManager.js").WindowPosition;
+/**
+ * margin in px at the border of the map target
+ * limiting windows to be moved out of screen
+ * @type {{top: number, left: number, bottom: number, right: number}}
+ */
+export const windowMoveMargin: {
+    top: number;
+    left: number;
+    bottom: number;
+    right: number;
+};
+/**
+ * *
+ */
+export type WindowAlignment = number;
+export namespace WindowAlignment {
+    let TOP_LEFT: number;
+    let TOP_RIGHT: number;
+    let BOTTOM_LEFT: number;
+    let BOTTOM_RIGHT: number;
+}

package/src/manager/window/windowHelper.js

@@ -49,7 +49,7 @@ export function getTargetSize(target) {
  * @param {number} y - client pixel position
  * @param {HTMLElement} target - the map's target { @link @import("@vcmap/core").MapCollection }
  * @param {WindowAlignment} [alignment=WindowAlignment.TOP_LEFT]
- * @returns {WindowPositionOptions}
+ * @returns {import("./windowManager.js").WindowPositionOptions}
  */
 export function getWindowPositionOptions(
   x,
@@ -78,7 +78,7 @@ export function getWindowPositionOptions(
  * @param {import("@vcmap-cesium/engine").Cartesian2} windowPosition - the window position, as retrieved from an InteractionEvent
  * @param {HTMLElement} target - the map's target { @link @import("@vcmap/core").MapCollection }
  * @param {WindowAlignment} [alignment]
- * @returns {WindowPositionOptions}
+ * @returns {import("./windowManager.js").WindowPositionOptions}
  */
 export function getWindowPositionOptionsFromMapEvent(
   windowPosition,
@@ -107,7 +107,7 @@ export function getWindowPositionOptionsFromMapEvent(
  * @param {number} width - window width to fit
  * @param {number} height - window height to fit
  *  @param {HTMLElement} target - the map's target { @link @import("@vcmap/core").MapCollection }
- * @returns {WindowPositionOptions}
+ * @returns {import("./windowManager.js").WindowPositionOptions}
  */
 export function getFittedWindowPositionOptions(x, y, width, height, target) {
   const targetSize = getTargetSize(target);
@@ -138,7 +138,7 @@ export function getFittedWindowPositionOptions(x, y, width, height, target) {
  * @param {number} width
  * @param {number} height
  * @param {HTMLElement} target - the map's target { @link @import("@vcmap/core").MapCollection }
- * @returns {WindowPositionOptions}
+ * @returns {import("./windowManager.js").WindowPositionOptions}
  */
 export function getFittedWindowPositionOptionsFromMapEvent(
   windowPosition,
@@ -200,9 +200,9 @@ export function posToPercent(pos, key, targetSize) {
 
 /**
  * Parses CSS position string properties to absolute numeric position properties
- * @param {WindowPosition} windowPosition
+ * @param {import("./windowManager.js").WindowPosition} windowPosition
  * @param {DOMRect} targetSize - the map's target size
- * @returns {WindowPositionOptions|null}
+ * @returns {import("./windowManager.js").WindowPositionOptions|null}
  */
 export function optionsFromWindowPosition(windowPosition, targetSize) {
   const options = {};
@@ -218,17 +218,17 @@ export function optionsFromWindowPosition(windowPosition, targetSize) {
  * Returns an updated WindowPosition by applying new options keeping the original object unchanged.
  * Ensures units are maintained.
  * Previous values 'auto' and 'unset' will not be touched.
- * @param {WindowPosition} previous
- * @param {WindowPositionOptions} update
+ * @param {import("./windowManager.js").WindowPosition} previous
+ * @param {import("./windowManager.js").WindowPositionOptions} update
  * @param {DOMRect} targetSize - the map's target size
- * @returns {WindowPosition}
+ * @returns {import("./windowManager.js").WindowPosition}
  */
 export function updateWindowPosition(previous, update, targetSize) {
   /**
    * returns the position of a key in the same unit 'px' or '%' as previously
    * @param {string} key
-   * @param {WindowPosition} prev
-   * @param {WindowPositionOptions} updated
+   * @param {import("./windowManager.js").WindowPosition} prev
+   * @param {import("./windowManager.js").WindowPositionOptions} updated
    * @returns {string}
    */
   const toString = (key, prev, updated) => {
@@ -261,9 +261,9 @@ export function updateWindowPosition(previous, update, targetSize) {
  * Rightward and downward movements are positive.
  * @param {string} id - the window id
  * @param {{dx: number, dy: number}} translation - translation in px
- * @param {WindowManager} windowManager
+ * @param {import("./windowManager.js").default} windowManager
  * @param {DOMRect} targetSize - the map's target size
- * @param {WindowPosition|null} windowPosition - Optional position to be preferred over windowComponent's position as start.
+ * @param {import("./windowManager.js").WindowPosition|null} windowPosition - Optional position to be preferred over windowComponent's position as start.
  */
 export function moveWindow(
   id,
@@ -302,9 +302,9 @@ export function moveWindow(
 
 /**
  * Clips a provided WindowPosition corresponding to the size of its target
- * @param {WindowPositionOptions} windowPositionOptions - numerical WindowPositionOptions
+ * @param {import("./windowManager.js").WindowPositionOptions} windowPositionOptions - numerical WindowPositionOptions
  * @param {DOMRect} targetSize - the map's target size
- * @returns {WindowPositionOptions}
+ * @returns {import("./windowManager.js").WindowPositionOptions}
  */
 export function clipToTargetSize(windowPositionOptions, targetSize) {
   const { width: targetWidth, height: targetHeight } = targetSize;
@@ -384,9 +384,9 @@ export function clipToTargetSize(windowPositionOptions, targetSize) {
 
 /**
  * Derives a child window position from a parent window, placing the child top-right of the parent.
- * @param {WindowPositionOptions} windowPositionOptions - numerical WindowPositionOptions
+ * @param {import("./windowManager.js").WindowPositionOptions} windowPositionOptions - numerical WindowPositionOptions
  * @param {DOMRect} targetSize - the map's target size
- * @param {WindowPositionOptions} parentPosition - numerical WindowPositionOptions
+ * @param {import("./windowManager.js").WindowPositionOptions} parentPosition - numerical WindowPositionOptions
  */
 export function applyParentPosition(
   windowPositionOptions,
@@ -438,10 +438,10 @@ export function applyParentPosition(
  * Returns the position applied on the target by clipping the position to the target's size.
  * Maintains units of the input position.
  * If parent position is provided, returned position is placed top-right of its parent
- * @param {WindowPosition} position
+ * @param {import("./windowManager.js").WindowPosition} position
  * @param {DOMRect} targetSize
- * @param {WindowPosition|null} parentPosition
- * @returns {WindowPosition}
+ * @param {import("./windowManager.js").WindowPosition|null} parentPosition
+ * @returns {import("./windowManager.js").WindowPosition}
  */
 export function getPositionAppliedOnTarget(
   position,