@vcmap/ui 5.0.2 → 5.1.0-rc.2

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

@@ -0,0 +1,422 @@
+/**
+ * Return true, if all values of pos1 match with the corresponding values of pos2
+ * @param {WindowPosition} pos1
+ * @param {WindowPosition} pos2
+ * @returns {boolean}
+ */
+export function compareWindowPositions(pos1: WindowPosition, pos2: WindowPosition): boolean;
+/**
+ * Returns true, if the provided position is a slot position
+ * @param {WindowPosition} windowPosition
+ * @returns {boolean}
+ */
+export function isSlotPosition(windowPosition: WindowPosition): boolean;
+/**
+ * @typedef {Object} WindowComponentOptions
+ * @property {string} [id] Optional ID, If not provided an uuid will be generated.
+ * @property {string} [parentId] An optional ID of a parent window for 'dynamicChild' slot. Parent windows with slot dynamicRight are not supported.
+ * @property {import("vue").Component} component Main Component which is shown below the header.
+ * @property {import("vue").Component} [headerComponent] Replaces the Header Component.
+ * @property {Partial<WindowState>} [state]
+ * @property {Partial<WindowPositionOptions>} [position] Will be merged with default position for slot
+ * @property {WindowSlot} [slot]
+ * @property {Object} [props]
+ * @property {Object} [provides]
+ */
+/**
+ * @typedef {Object} WindowState
+ * @property {string} id
+ * @property {string|vcsAppSymbol} owner Owner of the window, set by windowManager on add
+ * @property {boolean} [hideHeader] be used to not show the header.
+ * @property {boolean} [hidePin] be used to not show the pin button.
+ * @property {string|string[]} [headerTitle] An optional translatable header. If an array is provided all elements are translated and joined afterward.
+ * @property {string} [headerIcon]
+ * @property {Array<import("../../actions/actionHelper.js").VcsAction>} [headerActions]
+ * @property {number} [headerActionsOverflow]
+ * @property {string} [infoUrl] An optional url referencing help or further information on the window's content.
+ * @property {function():string} [infoUrlCallback] An optional function returning an url referencing help or further information. Can be used for urls depending on the app's locale, e.g. app.getHelpUrl()
+ * @property {boolean} [dockable] Auto derived from hidePin, current slot, current position and initial position.
+ * @property {Object<string, string>} [styles] Can be used to add additional styles to the root WindowComponent. Use Vue Style Bindings Object Syntax https://vuejs.org/v2/guide/class-and-style.html
+ * @property {Array<string>|Object<string,string>} [classes] Can be used to add additional classes to the root WindowComponent. Use Vue Class Bindings Syntax https://vuejs.org/v2/guide/class-and-style.html
+ */
+/**
+ * @typedef {Object} WindowComponent
+ * @property {string} id
+ * @property {string} [parentId]
+ * @property {import("vue").Component} component
+ * @property {import("vue").Component} [headerComponent]
+ * @property {WindowState} state
+ * @property {WindowPosition} [position]
+ * @property {WindowPositionOptions} initialPositionOptions
+ * @property {import("vue").Ref<WindowSlot>} slot
+ * @property {WindowSlot} initialSlot
+ * @property {Object} props
+ * @property {Object} provides
+ * @property {import("vue").ComputedGetter<number>} zIndex
+ */
+/**
+ * @param {string|number|undefined} pos
+ * @returns {string|undefined}
+ */
+export function posToPixel(pos: string | number | undefined): string | undefined;
+/**
+ * Returns CSS position string properties
+ * @param {WindowPositionOptions} windowPositionOptions
+ * @param {WindowPosition=} windowPosition
+ * @returns {WindowPosition}
+ */
+export function windowPositionFromOptions(windowPositionOptions: WindowPositionOptions, windowPosition?: WindowPosition | undefined): WindowPosition;
+/**
+ * *
+ */
+export type WindowSlot = string;
+export namespace WindowSlot {
+    let STATIC: string;
+    let DYNAMIC_LEFT: string;
+    let DYNAMIC_RIGHT: string;
+    let DYNAMIC_CHILD: string;
+    let DETACHED: string;
+}
+/**
+ * *
+ */
+export type WindowPositions = WindowPosition;
+export namespace WindowPositions {
+    export namespace TOP_LEFT {
+        let left: string;
+        let top: string;
+    }
+    export namespace TOP_LEFT2 {
+        let left_1: string;
+        export { left_1 as left };
+        let top_1: string;
+        export { top_1 as top };
+    }
+    export namespace TOP_RIGHT {
+        export let right: string;
+        let top_2: string;
+        export { top_2 as top };
+    }
+    export namespace DETACHED_1 {
+        let left_2: string;
+        export { left_2 as left };
+        let top_3: string;
+        export { top_3 as top };
+    }
+    export { DETACHED_1 as DETACHED };
+}
+export default WindowManager;
+export type WindowComponentOptions = {
+    /**
+     * Optional ID, If not provided an uuid will be generated.
+     */
+    id?: string | undefined;
+    /**
+     * An optional ID of a parent window for 'dynamicChild' slot. Parent windows with slot dynamicRight are not supported.
+     */
+    parentId?: string | undefined;
+    /**
+     * Main Component which is shown below the header.
+     */
+    component: import("vue").Component;
+    /**
+     * Replaces the Header Component.
+     */
+    headerComponent?: import("vue").Component<import("vue/types/options.js").DefaultData<never>, import("vue/types/options.js").DefaultMethods<never>, import("vue/types/options.js").DefaultComputed, import("vue/types/options.js").DefaultProps, {}> | undefined;
+    state?: Partial<WindowState> | undefined;
+    /**
+     * Will be merged with default position for slot
+     */
+    position?: Partial<WindowPositionOptions> | undefined;
+    slot?: string | undefined;
+    props?: Object | undefined;
+    provides?: Object | undefined;
+};
+export type WindowState = {
+    id: string;
+    /**
+     * Owner of the window, set by windowManager on add
+     */
+    owner: string | symbol;
+    /**
+     * be used to not show the header.
+     */
+    hideHeader?: boolean | undefined;
+    /**
+     * be used to not show the pin button.
+     */
+    hidePin?: boolean | undefined;
+    /**
+     * An optional translatable header. If an array is provided all elements are translated and joined afterward.
+     */
+    headerTitle?: string | string[] | undefined;
+    headerIcon?: string | undefined;
+    headerActions?: import("../../actions/actionHelper.js").VcsAction[] | undefined;
+    headerActionsOverflow?: number | undefined;
+    /**
+     * An optional url referencing help or further information on the window's content.
+     */
+    infoUrl?: string | undefined;
+    /**
+     * An optional function returning an url referencing help or further information. Can be used for urls depending on the app's locale, e.g. app.getHelpUrl()
+     */
+    infoUrlCallback?: (() => string) | undefined;
+    /**
+     * Auto derived from hidePin, current slot, current position and initial position.
+     */
+    dockable?: boolean | undefined;
+    /**
+     * Can be used to add additional styles to the root WindowComponent. Use Vue Style Bindings Object Syntax https://vuejs.org/v2/guide/class-and-style.html
+     */
+    styles?: {
+        [x: string]: string;
+    } | undefined;
+    /**
+     * Can be used to add additional classes to the root WindowComponent. Use Vue Class Bindings Syntax https://vuejs.org/v2/guide/class-and-style.html
+     */
+    classes?: string[] | {
+        [x: string]: string;
+    } | undefined;
+};
+export type WindowComponent = {
+    id: string;
+    parentId?: string | undefined;
+    component: import("vue").Component;
+    headerComponent?: import("vue").Component<import("vue/types/options.js").DefaultData<never>, import("vue/types/options.js").DefaultMethods<never>, import("vue/types/options.js").DefaultComputed, import("vue/types/options.js").DefaultProps, {}> | undefined;
+    state: WindowState;
+    position?: WindowPosition | undefined;
+    initialPositionOptions: WindowPositionOptions;
+    slot: import("vue").Ref<WindowSlot>;
+    initialSlot: WindowSlot;
+    props: Object;
+    provides: Object;
+    zIndex: import("vue").ComputedGetter<number>;
+};
+export type WindowPositionOptions = {
+    /**
+     * Can be a css position string (e.g. '320px' or '50%') number values are treated as `px` values
+     */
+    left?: string | number | undefined;
+    /**
+     * Can be a css position string (e.g. '320px' or '50%') number values are treated as `px` values
+     */
+    top?: string | number | undefined;
+    /**
+     * Can be a css position string (e.g. '320px' or '50%') number values are treated as `px` values
+     */
+    right?: string | number | undefined;
+    /**
+     * Can be a css position string (e.g. '320px' or '50%') number values are treated as `px` values
+     */
+    bottom?: string | number | undefined;
+    /**
+     * Can be a css position string (e.g. '320px' or '50%') number values are treated as `px` values
+     */
+    width?: string | number | undefined;
+    /**
+     * Can be a css position string (e.g. '320px' or '50%') number values are treated as `px` values
+     */
+    height?: string | number | undefined;
+    /**
+     * Can be a css position string (e.g. '320px' or '50%') number values are treated as `px` values
+     */
+    maxHeight?: string | number | undefined;
+    /**
+     * Can be a css position string (e.g. '320px' or '50%') number values are treated as `px` values
+     */
+    maxWidth?: string | number | undefined;
+    /**
+     * Can be a css position string (e.g. '320px' or '50%') number values are treated as `px` values
+     */
+    minHeight?: string | number | undefined;
+    /**
+     * Can be a css position string (e.g. '320px' or '50%') number values are treated as `px` values
+     */
+    minWidth?: string | number | undefined;
+};
+export type WindowPosition = {
+    /**
+     * - The left CSS property participates in specifying the horizontal position of a window.
+     */
+    left: string;
+    /**
+     * - The top CSS property participates in specifying the vertical position of a window.
+     */
+    top: string;
+    /**
+     * - The right CSS property participates in specifying the horizontal position of a window.
+     */
+    right: string;
+    /**
+     * - The bottom CSS property participates in specifying the vertical position of a window.
+     */
+    bottom: string;
+    /**
+     * - The width CSS property sets an element's width.
+     */
+    width: string;
+    /**
+     * - The height CSS property sets an element's height.
+     */
+    height: string;
+    /**
+     * -  It prevents the used value of the height property from becoming larger than the value specified for max-height. (max is target height, will be automatically updated)
+     */
+    maxHeight?: string | undefined;
+    /**
+     * - It prevents the used value of the width property from becoming larger than the value specified by max-width. (max is target width, will be automatically updated)
+     */
+    maxWidth?: string | undefined;
+    /**
+     * - It prevents the used value of the height property from becoming smaller than the value specified for min-height.
+     */
+    minHeight?: string | undefined;
+    /**
+     * - It prevents the used value of the width property from becoming smaller than the value specified for min-width.
+     */
+    minWidth?: string | undefined;
+};
+export type IWindowManager = import("../../vcsUiApp.js").VcsComponentManager<WindowComponent, WindowComponentOptions>;
+/**
+ * @typedef {import("../../vcsUiApp.js").VcsComponentManager<WindowComponent,WindowComponentOptions>} IWindowManager
+ */
+/**
+ * @class WindowManager
+ * @description Manages a set of Draggable Windows
+ * @implements {IWindowManager}
+ */
+declare class WindowManager implements IWindowManager {
+    /**
+     * @type {import("@vcmap/core").VcsEvent<WindowComponent>}
+     */
+    added: import("@vcmap/core").VcsEvent<WindowComponent>;
+    /**
+     * @type {import("@vcmap/core").VcsEvent<WindowComponent>}
+     */
+    removed: import("@vcmap/core").VcsEvent<WindowComponent>;
+    /**
+     * reactive ordered array of ids,
+     * @type {Array<string>}
+     */
+    componentIds: Array<string>;
+    /**
+     * reactive ordered array of ids, defining the zIndex of a component
+     * @type {import("vue").Ref<Array<string>>}
+     */
+    _zIndices: import("vue").Ref<Array<string>>;
+    /**
+     * @type {Map<string, WindowComponent>}
+     * @private
+     */
+    private _windowComponents;
+    /**
+     * @type {Map<string, WindowPosition>}
+     * @private
+     */
+    private _windowPositionsCache;
+    /**
+     * @param {string} id
+     * @returns {WindowComponent}
+     */
+    get(id: string): WindowComponent;
+    /**
+     * @param {string} id
+     * @returns {boolean}
+     */
+    has(id: string): boolean;
+    /**
+     * removes a window, Component will not be rendered anymore and will be destroyed. Add WindowComponent again
+     * to show the component again
+     * @param {string} id
+     */
+    remove(id: string): void;
+    /**
+     * @param {string} id
+     * @param {WindowPositionOptions} windowPositionOptions
+     */
+    setWindowPositionOptions(id: string, windowPositionOptions: WindowPositionOptions): void;
+    /**
+     * handles changes in the Slots. Makes sure that a STATIC Window is positioned on the right to the DYNAMIC_LEFT Slot.
+     * If a STATIC Window is removed again, the DYNAMIC_LEFT will be moved back.
+     * @param {WindowSlot} changedSlot
+     * @private
+     */
+    private _handleSlotsChanged;
+    /**
+     * @param {WindowSlot} slot
+     * @param {string=} parentId
+     * @param {string=} id
+     * @returns {WindowComponent}
+     * @private
+     */
+    private _findWindowBySlot;
+    /**
+     * @param {WindowSlot} slot
+     * @param {WindowPositionOptions=} position
+     * @param {string=} parentId
+     * @returns {WindowPositionOptions}
+     * @private
+     */
+    private _getPositionOptionsForSlot;
+    /**
+     * removes the window at the given slot if it exists (not for DETACHED)
+     * @param {WindowSlot} slot
+     * @param {string} parentId
+     * @param {string} id
+     * @private
+     */
+    private _removeWindowAtSlot;
+    /**
+     * @param {string} id
+     * @returns {WindowPosition|undefined}
+     */
+    getCachedPosition(id: string): WindowPosition | undefined;
+    /**
+     * Caches the position, if it differs from the initial position
+     * @param {WindowComponent} windowComponent
+     * @private
+     */
+    private _cachePosition;
+    /**
+     * Returns true, if cached position was assigned.
+     * @param {WindowComponent} windowComponent
+     * @returns {boolean}
+     * @private
+     */
+    private _assignCachedPosition;
+    /**
+     * adds a windowComponent to the WindowManager and renders the Window at the provided position/slot.
+     * The reactive WindowState Object can be used to watch Changes on position/WindowSlot.
+     * The WindowState Object can also be used to change hideHeader, headerTitle, headerIcon, headerActions, styles and classes
+     * @param {WindowComponentOptions|WindowComponent} windowComponentOptions
+     * @param {string|symbol} owner pluginName or vcsAppSymbol
+     * @throws {Error} if a windowComponent with the same ID has already been added
+     * @returns {WindowComponent}
+     */
+    add(windowComponentOptions: WindowComponentOptions | WindowComponent, owner: string | symbol): WindowComponent;
+    /**
+     * reorders the order of all windows to bring the given ID on top
+     * @param {string} id
+     */
+    bringWindowToTop(id: string): void;
+    /**
+     * Docks a window by resetting detached to its initial slot.
+     * Updates position according to its initial slot or initial position.
+     * Clears any cached position for this window.
+     * @param {string} id
+     */
+    pinWindow(id: string): void;
+    /**
+     * removes all windowComponents of a specific owner (plugin) and fires removed Events
+     * @param {string|vcsAppSymbol} owner
+     */
+    removeOwner(owner: string | symbol): void;
+    /**
+     * removes all windowComponents and fires removed Events
+     */
+    clear(): void;
+    /**
+     * destroys the windowManager;
+     */
+    destroy(): void;
+}

package/src/manager/window/windowManager.js

@@ -24,16 +24,16 @@ export const WindowSlot = {
 
 /**
  * @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
- * @property {string|number|undefined} top Can be a css position string (e.g. '320px' or '50%') number values are treated as `px` values
- * @property {string|number|undefined} right Can be a css position string (e.g. '320px' or '50%') number values are treated as `px` values
- * @property {string|number|undefined} bottom Can be a css position string (e.g. '320px' or '50%') number values are treated as `px` values
- * @property {string|number|undefined} width Can be a css position string (e.g. '320px' or '50%') number values are treated as `px` values
- * @property {string|number|undefined} height Can be a css position string (e.g. '320px' or '50%') number values are treated as `px` values
- * @property {string|number|undefined} maxHeight Can be a css position string (e.g. '320px' or '50%') number values are treated as `px` values
- * @property {string|number|undefined} maxWidth Can be a css position string (e.g. '320px' or '50%') number values are treated as `px` values
- * @property {string|number|undefined} minHeight Can be a css position string (e.g. '320px' or '50%') number values are treated as `px` values
- * @property {string|number|undefined} minWidth Can be a css position string (e.g. '320px' or '50%') number values are treated as `px` values
+ * @property {string|number|undefined} [left] Can be a css position string (e.g. '320px' or '50%') number values are treated as `px` values
+ * @property {string|number|undefined} [top] Can be a css position string (e.g. '320px' or '50%') number values are treated as `px` values
+ * @property {string|number|undefined} [right] Can be a css position string (e.g. '320px' or '50%') number values are treated as `px` values
+ * @property {string|number|undefined} [bottom] Can be a css position string (e.g. '320px' or '50%') number values are treated as `px` values
+ * @property {string|number|undefined} [width] Can be a css position string (e.g. '320px' or '50%') number values are treated as `px` values
+ * @property {string|number|undefined} [height] Can be a css position string (e.g. '320px' or '50%') number values are treated as `px` values
+ * @property {string|number|undefined} [maxHeight] Can be a css position string (e.g. '320px' or '50%') number values are treated as `px` values
+ * @property {string|number|undefined} [maxWidth] Can be a css position string (e.g. '320px' or '50%') number values are treated as `px` values
+ * @property {string|number|undefined} [minHeight] Can be a css position string (e.g. '320px' or '50%') number values are treated as `px` values
+ * @property {string|number|undefined} [minWidth] Can be a css position string (e.g. '320px' or '50%') number values are treated as `px` values
  */
 
 /**
@@ -102,27 +102,27 @@ export function isSlotPosition(windowPosition) {
 }
 
 /**
- * @typedef WindowComponentOptions
+ * @typedef {Object} WindowComponentOptions
  * @property {string} [id] Optional ID, If not provided an uuid will be generated.
  * @property {string} [parentId] An optional ID of a parent window for 'dynamicChild' slot. Parent windows with slot dynamicRight are not supported.
  * @property {import("vue").Component} component Main Component which is shown below the header.
  * @property {import("vue").Component} [headerComponent] Replaces the Header Component.
- * @property {WindowState} [state]
- * @property {WindowPositionOptions} [position] Will be merged with default position for slot
+ * @property {Partial<WindowState>} [state]
+ * @property {Partial<WindowPositionOptions>} [position] Will be merged with default position for slot
  * @property {WindowSlot} [slot]
  * @property {Object} [props]
  * @property {Object} [provides]
  */
 
 /**
- * @typedef WindowState
+ * @typedef {Object} WindowState
  * @property {string} id
  * @property {string|vcsAppSymbol} owner Owner of the window, set by windowManager on add
  * @property {boolean} [hideHeader] be used to not show the header.
  * @property {boolean} [hidePin] be used to not show the pin button.
  * @property {string|string[]} [headerTitle] An optional translatable header. If an array is provided all elements are translated and joined afterward.
  * @property {string} [headerIcon]
- * @property {Array<VcsAction>} [headerActions]
+ * @property {Array<import("../../actions/actionHelper.js").VcsAction>} [headerActions]
  * @property {number} [headerActionsOverflow]
  * @property {string} [infoUrl] An optional url referencing help or further information on the window's content.
  * @property {function():string} [infoUrlCallback] An optional function returning an url referencing help or further information. Can be used for urls depending on the app's locale, e.g. app.getHelpUrl()
@@ -132,7 +132,7 @@ export function isSlotPosition(windowPosition) {
  */
 
 /**
- * @typedef WindowComponent
+ * @typedef {Object} WindowComponent
  * @property {string} id
  * @property {string} [parentId]
  * @property {import("vue").Component} component
@@ -242,10 +242,14 @@ function setWindowPosition(windowComponent, windowPositionOptions) {
   }
 }
 
+/**
+ * @typedef {import("../../vcsUiApp.js").VcsComponentManager<WindowComponent,WindowComponentOptions>} IWindowManager
+ */
+
 /**
  * @class WindowManager
  * @description Manages a set of Draggable Windows
- * @implements VcsComponentManager<WindowComponent,WindowComponentOptions>
+ * @implements {IWindowManager}
  */
 class WindowManager {
   constructor() {
@@ -311,11 +315,13 @@ class WindowManager {
       this._windowComponents.delete(id);
       this._handleSlotsChanged(windowComponent.slot.value);
       this.removed.raiseEvent(windowComponent);
-      const child = Array.from(this._windowComponents.values()).find(
+      const childs = Array.from(this._windowComponents.values()).filter(
         ({ parentId }) => id === parentId,
       );
-      if (child) {
-        this.remove(child.id);
+      if (childs.length) {
+        childs.forEach((child) => {
+          this.remove(child.id);
+        });
       }
     }
   }
@@ -337,13 +343,21 @@ class WindowManager {
    * @param {WindowSlot} changedSlot
    * @private
    */
-  _handleSlotsChanged(changedSlot) {
+  _handleSlotsChanged(changedSlot, parentId) {
     if (
       changedSlot === WindowSlot.STATIC ||
-      changedSlot === WindowSlot.DYNAMIC_LEFT
+      changedSlot === WindowSlot.DYNAMIC_LEFT ||
+      (parentId != null &&
+        changedSlot === WindowSlot.DETACHED &&
+        !this.has(parentId))
     ) {
       const staticWindow = this._findWindowBySlot(WindowSlot.STATIC);
-      const dynamicWindowLeft = this._findWindowBySlot(WindowSlot.DYNAMIC_LEFT);
+      const dynamicWindowLeft =
+        this._findWindowBySlot(WindowSlot.DYNAMIC_LEFT) ??
+        [...this._windowComponents.values()].find(
+          (c) => parentId != null && c.parentId === parentId,
+        );
+
       if (staticWindow && dynamicWindowLeft) {
         this.setWindowPositionOptions(dynamicWindowLeft.id, {
           ...dynamicWindowLeft.position,
@@ -360,26 +374,61 @@ class WindowManager {
 
   /**
    * @param {WindowSlot} slot
+   * @param {string=} parentId
+   * @param {string=} id
    * @returns {WindowComponent}
    * @private
    */
-  _findWindowBySlot(slot) {
-    return Array.from(this._windowComponents.values()).find(
-      (item) => item.slot.value === slot,
+  _findWindowBySlot(slot, parentId, id) {
+    const components = /** @type {WindowComponent[]} */ (
+      Array.from(this._windowComponents.values())
     );
+    let parent;
+    let usedSlot = slot;
+    if (parentId) {
+      parent = components.find((i) => i.id === parentId);
+      usedSlot = parent ? slot : WindowSlot.DYNAMIC_LEFT;
+    }
+
+    return components.find((item) => {
+      if (item.id === id) {
+        return false;
+      }
+      if (parent) {
+        return item.parentId === parentId && item.slot.value === usedSlot;
+      } else if (
+        item.slot.value === WindowSlot.DYNAMIC_CHILD &&
+        !this.has(item.parentId) &&
+        item.parentId !== id &&
+        usedSlot === WindowSlot.DYNAMIC_LEFT
+      ) {
+        return true;
+      }
+
+      if (id != null) {
+        return item.slot.value === usedSlot && item.parentId !== id;
+      }
+      return item.slot.value === usedSlot;
+    });
   }
 
   /**
    * @param {WindowSlot} slot
    * @param {WindowPositionOptions=} position
+   * @param {string=} parentId
    * @returns {WindowPositionOptions}
    * @private
    */
-  _getPositionOptionsForSlot(slot, position) {
+  _getPositionOptionsForSlot(slot, position, parentId) {
     if (slot === WindowSlot.STATIC) {
       return { ...WindowPositions.TOP_LEFT, maxWidth: '320px' };
     }
-    if (slot === WindowSlot.DYNAMIC_LEFT) {
+    if (
+      slot === WindowSlot.DYNAMIC_LEFT ||
+      (parentId != null &&
+        slot === WindowSlot.DYNAMIC_CHILD &&
+        !this.has(parentId))
+    ) {
       const windowAtStatic = this._findWindowBySlot(WindowSlot.STATIC);
       if (windowAtStatic) {
         return { ...position, ...WindowPositions.TOP_LEFT2 };
@@ -399,11 +448,13 @@ class WindowManager {
   /**
    * removes the window at the given slot if it exists (not for DETACHED)
    * @param {WindowSlot} slot
+   * @param {string} parentId
+   * @param {string} id
    * @private
    */
-  _removeWindowAtSlot(slot) {
+  _removeWindowAtSlot(slot, parentId, id) {
     if (slot !== WindowSlot.DETACHED) {
-      const toRemove = this._findWindowBySlot(slot);
+      const toRemove = this._findWindowBySlot(slot, parentId, id);
       if (toRemove) {
         this.remove(toRemove.id);
       }
@@ -469,22 +520,21 @@ class WindowManager {
         `A window with id ${windowComponentOptions.id} has already been registered.`,
       );
     }
+    if (
+      windowComponentOptions.slot === WindowSlot.DYNAMIC_CHILD &&
+      !windowComponentOptions.parentId
+    ) {
+      throw new Error('A child window must have a parent id');
+    }
     const id = windowComponentOptions.id || uuidv4();
     const parentId = windowComponentOptions?.parentId;
     const slotOption =
       windowComponentOptions.slot?.value || windowComponentOptions.slot;
     const slot = parseEnumValue(slotOption, WindowSlot, WindowSlot.DETACHED);
-    if (
-      slot === WindowSlot.DYNAMIC_CHILD &&
-      !this.has(windowComponentOptions.parentId)
-    ) {
-      throw new Error(
-        `The mandatory parent window with id ${windowComponentOptions.parentId} is not registered. Add the parent window or choose another slot than dynamicChild.`,
-      );
-    }
     const windowPositionOptions = this._getPositionOptionsForSlot(
       slot,
       windowComponentOptions.position,
+      parentId,
     );
     const windowPosition = windowPositionFromOptions(windowPositionOptions);
 
@@ -562,7 +612,7 @@ class WindowManager {
     };
     const cached = this._assignCachedPosition(windowComponent);
     if (!cached) {
-      this._removeWindowAtSlot(slot);
+      this._removeWindowAtSlot(slot, state.parentId, state.id);
     }
     this._windowComponents.set(id, windowComponent);
     this.componentIds.push(id);
@@ -597,12 +647,17 @@ class WindowManager {
     if (!component?.state?.dockable) {
       return;
     }
-    this._removeWindowAtSlot(component.initialSlot);
+    this._removeWindowAtSlot(
+      component.initialSlot,
+      component.parentId,
+      component.id,
+    );
     component.slot.value = component.initialSlot;
     component.state.dockable = false;
     const dockedPosition = this._getPositionOptionsForSlot(
       component.initialSlot,
       component.initialPositionOptions,
+      component.parentId,
     );
     windowPositionFromOptions(dockedPosition, component.position);
     this._windowPositionsCache.delete(id);