dockview-core 1.7.5 → 1.8.0

package/dist/esm/dockview/dockviewComponent.d.ts

@@ -1,6 +1,6 @@
 import { SerializedGridObject } from '../gridview/gridview';
 import { Position } from '../dnd/droptarget';
-import { IDockviewPanel } from './dockviewPanel';
+import { DockviewPanel, IDockviewPanel } from './dockviewPanel';
 import { Event } from '../events';
 import { IWatermarkRenderer, GroupviewPanelState } from './types';
 import { AddGroupOptions, AddPanelOptions, DockviewComponentOptions, MovementOptions } from './options';
@@ -8,7 +8,8 @@ import { BaseGrid, IBaseGrid } from '../gridview/baseComponentGridview';
 import { DockviewApi } from '../api/component.api';
 import { Orientation } from '../splitview/splitview';
 import { GroupOptions, GroupPanelViewState, GroupviewDropEvent } from './dockviewGroupPanelModel';
-import { DockviewGroupPanel, IDockviewGroupPanel } from './dockviewGroupPanel';
+import { DockviewGroupPanel } from './dockviewGroupPanel';
+import { DockviewFloatingGroupPanel, IDockviewFloatingGroupPanel } from './dockviewFloatingGroupPanel';
 export interface PanelReference {
     update: (event: {
         params: {
@@ -17,6 +18,15 @@ export interface PanelReference {
     }) => void;
     remove: () => void;
 }
+export interface SerializedFloatingGroup {
+    data: GroupPanelViewState;
+    position: {
+        height: number;
+        width: number;
+        left: number;
+        top: number;
+    };
+}
 export interface SerializedDockview {
     grid: {
         root: SerializedGridObject<GroupPanelViewState>;
@@ -24,12 +34,11 @@ export interface SerializedDockview {
         width: number;
         orientation: Orientation;
     };
-    panels: {
-        [key: string]: GroupviewPanelState;
-    };
+    panels: Record<string, GroupviewPanelState>;
     activeGroup?: string;
+    floatingGroups?: SerializedFloatingGroup[];
 }
-export type DockviewComponentUpdateOptions = Pick<DockviewComponentOptions, 'orientation' | 'components' | 'frameworkComponents' | 'tabComponents' | 'frameworkTabComponents' | 'showDndOverlay' | 'watermarkFrameworkComponent' | 'defaultTabComponent' | 'createGroupControlElement'>;
+export type DockviewComponentUpdateOptions = Pick<DockviewComponentOptions, 'orientation' | 'components' | 'frameworkComponents' | 'tabComponents' | 'frameworkTabComponents' | 'showDndOverlay' | 'watermarkFrameworkComponent' | 'defaultTabComponent' | 'createLeftHeaderActionsElement' | 'createRightHeaderActionsElement' | 'disableFloatingGroups'>;
 export interface DockviewDropEvent extends GroupviewDropEvent {
     api: DockviewApi;
     group: DockviewGroupPanel | null;
@@ -38,6 +47,7 @@ export interface IDockviewComponent extends IBaseGrid<DockviewGroupPanel> {
     readonly activePanel: IDockviewPanel | undefined;
     readonly totalPanels: number;
     readonly panels: IDockviewPanel[];
+    readonly floatingGroups: IDockviewFloatingGroupPanel[];
     readonly onDidDrop: Event<DockviewDropEvent>;
     readonly orientation: Orientation;
     updateOptions(options: DockviewComponentUpdateOptions): void;
@@ -49,7 +59,7 @@ export interface IDockviewComponent extends IBaseGrid<DockviewGroupPanel> {
     removePanel(panel: IDockviewPanel): void;
     getGroupPanel: (id: string) => IDockviewPanel | undefined;
     createWatermarkComponent(): IWatermarkRenderer;
-    addGroup(options?: AddGroupOptions): IDockviewGroupPanel;
+    addGroup(options?: AddGroupOptions): DockviewGroupPanel;
     closeAllGroups(): void;
     moveToNext(options?: MovementOptions): void;
     moveToPrevious(options?: MovementOptions): void;
@@ -61,6 +71,10 @@ export interface IDockviewComponent extends IBaseGrid<DockviewGroupPanel> {
     readonly onDidAddPanel: Event<IDockviewPanel>;
     readonly onDidLayoutFromJSON: Event<void>;
     readonly onDidActivePanelChange: Event<IDockviewPanel | undefined>;
+    addFloatingGroup(item: IDockviewPanel | DockviewGroupPanel, coord?: {
+        x: number;
+        y: number;
+    }): void;
 }
 export declare class DockviewComponent extends BaseGrid<DockviewGroupPanel> implements IDockviewComponent {
     private readonly nextGroupId;
@@ -78,14 +92,25 @@ export declare class DockviewComponent extends BaseGrid<DockviewGroupPanel> impl
     readonly onDidLayoutFromJSON: Event<void>;
     private readonly _onDidActivePanelChange;
     readonly onDidActivePanelChange: Event<IDockviewPanel | undefined>;
+    readonly floatingGroups: DockviewFloatingGroupPanel[];
     get orientation(): Orientation;
     get totalPanels(): number;
     get panels(): IDockviewPanel[];
     get options(): DockviewComponentOptions;
     get activePanel(): IDockviewPanel | undefined;
     constructor(options: DockviewComponentOptions);
+    addFloatingGroup(item: DockviewPanel | DockviewGroupPanel, coord?: {
+        x?: number;
+        y?: number;
+        height?: number;
+        width?: number;
+    }, options?: {
+        skipRemoveGroup?: boolean;
+        inDragMode: boolean;
+    }): void;
     private orthogonalize;
     updateOptions(options: DockviewComponentUpdateOptions): void;
+    layout(width: number, height: number, forceResize?: boolean | undefined): void;
     focus(): void;
     getGroupPanel(id: string): IDockviewPanel | undefined;
     setActivePanel(panel: IDockviewPanel): void;
@@ -100,7 +125,7 @@ export declare class DockviewComponent extends BaseGrid<DockviewGroupPanel> impl
     fromJSON(data: SerializedDockview): void;
     clear(): void;
     closeAllGroups(): void;
-    addPanel(options: AddPanelOptions): IDockviewPanel;
+    addPanel(options: AddPanelOptions): DockviewPanel;
     removePanel(panel: IDockviewPanel, options?: {
         removeEmptyGroup: boolean;
         skipDispose: boolean;
@@ -108,7 +133,14 @@ export declare class DockviewComponent extends BaseGrid<DockviewGroupPanel> impl
     createWatermarkComponent(): IWatermarkRenderer;
     private updateWatermark;
     addGroup(options?: AddGroupOptions): DockviewGroupPanel;
-    removeGroup(group: DockviewGroupPanel, skipActive?: boolean): void;
+    removeGroup(group: DockviewGroupPanel, options?: {
+        skipActive?: boolean;
+        skipDispose?: boolean;
+    } | undefined): void;
+    protected doRemoveGroup(group: DockviewGroupPanel, options?: {
+        skipActive?: boolean;
+        skipDispose?: boolean;
+    } | undefined): DockviewGroupPanel;
     moveGroupOrPanel(destinationGroup: DockviewGroupPanel, sourceGroupId: string, sourceItemId: string | undefined, destinationTarget: Position, destinationIndex?: number): void;
     private moveGroup;
     doSetGroupActive(group: DockviewGroupPanel | undefined, skipFocus?: boolean): void;

package/dist/esm/dockview/dockviewComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dockviewComponent.d.ts","sourceRoot":"","sources":["../../../src/dockview/dockviewComponent.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"dockviewComponent.d.ts","sourceRoot":"","sources":["../../../src/dockview/dockviewComponent.ts"],"names":[],"mappings":"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"}

package/dist/esm/dockview/dockviewComponent.js

@@ -1,6 +1,6 @@
 import { getRelativeLocation, getGridLocation, } from '../gridview/gridview';
 import { directionToPosition, Droptarget } from '../dnd/droptarget';
-import { tail, sequenceEquals } from '../array';
+import { tail, sequenceEquals, remove } from '../array';
 import { DockviewPanel } from './dockviewPanel';
 import { CompositeDisposable } from '../lifecycle';
 import { Event, Emitter } from '../events';
@@ -16,6 +16,9 @@ import { Orientation, Sizing } from '../splitview/splitview';
 import { DockviewGroupPanel } from './dockviewGroupPanel';
 import { DockviewPanelModel } from './dockviewPanelModel';
 import { getPanelData } from '../dnd/dataTransfer';
+import { Overlay } from '../dnd/overlay';
+import { toggleClass, watchElementResize } from '../dom';
+import { DockviewFloatingGroupPanel, } from './dockviewFloatingGroupPanel';
 export class DockviewComponent extends BaseGrid {
     get orientation() {
         return this.gridview.orientation;
@@ -56,7 +59,8 @@ export class DockviewComponent extends BaseGrid {
         this.onDidLayoutFromJSON = this._onDidLayoutFromJSON.event;
         this._onDidActivePanelChange = new Emitter();
         this.onDidActivePanelChange = this._onDidActivePanelChange.event;
-        this.element.classList.add('dv-dockview');
+        this.floatingGroups = [];
+        toggleClass(this.gridview.element, 'dv-dockview', true);
         this.addDisposables(this._onDidDrop, Event.any(this.onDidAddGroup, this.onDidRemoveGroup)(() => {
             this.updateWatermark();
         }), Event.any(this.onDidAddPanel, this.onDidRemovePanel, this.onDidActivePanelChange)(() => {
@@ -86,6 +90,11 @@ export class DockviewComponent extends BaseGrid {
                     if (data.viewId !== this.id) {
                         return false;
                     }
+                    if (position === 'center') {
+                        // center drop target is only allowed if there are no panels in the grid
+                        // floating panels are allowed
+                        return this.gridview.length === 0;
+                    }
                     return true;
                 }
                 if (this.options.showDndOverlay) {
@@ -98,7 +107,7 @@ export class DockviewComponent extends BaseGrid {
                 }
                 return false;
             },
-            acceptedTargetZones: ['top', 'bottom', 'left', 'right'],
+            acceptedTargetZones: ['top', 'bottom', 'left', 'right', 'center'],
             overlayModel: {
                 activationSize: { type: 'pixels', value: 10 },
                 size: { type: 'pixels', value: 20 },
@@ -116,6 +125,75 @@ export class DockviewComponent extends BaseGrid {
         this._api = new DockviewApi(this);
         this.updateWatermark();
     }
+    addFloatingGroup(item, coord, options) {
+        var _a, _b;
+        let group;
+        if (item instanceof DockviewPanel) {
+            group = this.createGroup();
+            this.removePanel(item, {
+                removeEmptyGroup: true,
+                skipDispose: true,
+            });
+            group.model.openPanel(item);
+        }
+        else {
+            group = item;
+            const skip = typeof (options === null || options === void 0 ? void 0 : options.skipRemoveGroup) === 'boolean' &&
+                options.skipRemoveGroup;
+            if (!skip) {
+                this.doRemoveGroup(item, { skipDispose: true });
+            }
+        }
+        group.model.isFloating = true;
+        const overlayLeft = typeof (coord === null || coord === void 0 ? void 0 : coord.x) === 'number' ? Math.max(coord.x, 0) : 100;
+        const overlayTop = typeof (coord === null || coord === void 0 ? void 0 : coord.y) === 'number' ? Math.max(coord.y, 0) : 100;
+        const overlay = new Overlay({
+            container: this.gridview.element,
+            content: group.element,
+            height: (_a = coord === null || coord === void 0 ? void 0 : coord.height) !== null && _a !== void 0 ? _a : 300,
+            width: (_b = coord === null || coord === void 0 ? void 0 : coord.width) !== null && _b !== void 0 ? _b : 300,
+            left: overlayLeft,
+            top: overlayTop,
+            minimumInViewportWidth: 100,
+            minimumInViewportHeight: 100,
+        });
+        const el = group.element.querySelector('.void-container');
+        if (!el) {
+            throw new Error('failed to find drag handle');
+        }
+        overlay.setupDrag(el, {
+            inDragMode: typeof (options === null || options === void 0 ? void 0 : options.inDragMode) === 'boolean'
+                ? options.inDragMode
+                : false,
+        });
+        const floatingGroupPanel = new DockviewFloatingGroupPanel(group, overlay);
+        const disposable = watchElementResize(group.element, (entry) => {
+            const { width, height } = entry.contentRect;
+            group.layout(width, height); // let the group know it's size is changing so it can fire events to the panel
+        });
+        floatingGroupPanel.addDisposables(overlay.onDidChange(() => {
+            // this is either a resize or a move
+            // to inform the panels .layout(...) the group with it's current size
+            // don't care about resize since the above watcher handles that
+            group.layout(group.height, group.width);
+        }), overlay.onDidChangeEnd(() => {
+            this._bufferOnDidLayoutChange.fire();
+        }), group.onDidChange((event) => {
+            overlay.setBounds({
+                height: event === null || event === void 0 ? void 0 : event.height,
+                width: event === null || event === void 0 ? void 0 : event.width,
+            });
+        }), {
+            dispose: () => {
+                disposable.dispose();
+                group.model.isFloating = false;
+                remove(this.floatingGroups, floatingGroupPanel);
+                this.updateWatermark();
+            },
+        });
+        this.floatingGroups.push(floatingGroupPanel);
+        this.updateWatermark();
+    }
     orthogonalize(position) {
         switch (position) {
             case 'top':
@@ -140,6 +218,7 @@ export class DockviewComponent extends BaseGrid {
         switch (position) {
             case 'top':
             case 'left':
+            case 'center':
                 return this.createGroupAtLocation([0]); // insert into first position
             case 'bottom':
             case 'right':
@@ -157,6 +236,15 @@ export class DockviewComponent extends BaseGrid {
         }
         this.layout(this.gridview.width, this.gridview.height, true);
     }
+    layout(width, height, forceResize) {
+        super.layout(width, height, forceResize);
+        if (this.floatingGroups) {
+            for (const floating of this.floatingGroups) {
+                // ensure floting groups stay within visible boundaries
+                floating.overlay.setBounds();
+            }
+        }
+    }
     focus() {
         var _a;
         (_a = this.activeGroup) === null || _a === void 0 ? void 0 : _a.focus();
@@ -219,51 +307,81 @@ export class DockviewComponent extends BaseGrid {
             collection[panel.id] = panel.toJSON();
             return collection;
         }, {});
-        return {
+        const floats = this.floatingGroups.map((floatingGroup) => {
+            return {
+                data: floatingGroup.group.toJSON(),
+                position: floatingGroup.overlay.toJSON(),
+            };
+        });
+        const result = {
             grid: data,
             panels,
             activeGroup: (_a = this.activeGroup) === null || _a === void 0 ? void 0 : _a.id,
         };
+        if (floats.length > 0) {
+            result.floatingGroups = floats;
+        }
+        return result;
     }
     fromJSON(data) {
+        var _a;
         this.clear();
         const { grid, panels, activeGroup } = data;
         if (grid.root.type !== 'branch' || !Array.isArray(grid.root.data)) {
             throw new Error('root must be of type branch');
         }
+        // take note of the existing dimensions
+        const width = this.width;
+        const height = this.height;
+        const createGroupFromSerializedState = (data) => {
+            const { id, locked, hideHeader, views, activeView } = data;
+            const group = this.createGroup({
+                id,
+                locked: !!locked,
+                hideHeader: !!hideHeader,
+            });
+            this._onDidAddGroup.fire(group);
+            for (const child of views) {
+                const panel = this._deserializer.fromJSON(panels[child], group);
+                const isActive = typeof activeView === 'string' && activeView === panel.id;
+                group.model.openPanel(panel, {
+                    skipSetPanelActive: !isActive,
+                    skipSetGroupActive: true,
+                });
+            }
+            if (!group.activePanel && group.panels.length > 0) {
+                group.model.openPanel(group.panels[group.panels.length - 1], {
+                    skipSetGroupActive: true,
+                });
+            }
+            return group;
+        };
         this.gridview.deserialize(grid, {
             fromJSON: (node) => {
-                const { id, locked, hideHeader, views, activeView } = node.data;
-                const group = this.createGroup({
-                    id,
-                    locked: !!locked,
-                    hideHeader: !!hideHeader,
-                });
-                this._onDidAddGroup.fire(group);
-                for (const child of views) {
-                    const panel = this._deserializer.fromJSON(panels[child], group);
-                    const isActive = typeof activeView === 'string' &&
-                        activeView === panel.id;
-                    group.model.openPanel(panel, {
-                        skipSetPanelActive: !isActive,
-                        skipSetGroupActive: true,
-                    });
-                }
-                if (!group.activePanel && group.panels.length > 0) {
-                    group.model.openPanel(group.panels[group.panels.length - 1], {
-                        skipSetGroupActive: true,
-                    });
-                }
-                return group;
+                return createGroupFromSerializedState(node.data);
             },
         });
+        this.layout(width, height, true);
+        const serializedFloatingGroups = (_a = data.floatingGroups) !== null && _a !== void 0 ? _a : [];
+        for (const serializedFloatingGroup of serializedFloatingGroups) {
+            const { data, position } = serializedFloatingGroup;
+            const group = createGroupFromSerializedState(data);
+            this.addFloatingGroup(group, {
+                x: position.left,
+                y: position.top,
+                height: position.height,
+                width: position.width,
+            }, { skipRemoveGroup: true, inDragMode: false });
+        }
+        for (const floatingGroup of this.floatingGroups) {
+            floatingGroup.overlay.setBounds();
+        }
         if (typeof activeGroup === 'string') {
             const panel = this.getPanel(activeGroup);
             if (panel) {
                 this.doSetGroupActive(panel);
             }
         }
-        this.gridview.layout(this.width, this.height);
         this._onDidLayoutFromJSON.fire();
     }
     clear() {
@@ -272,7 +390,7 @@ export class DockviewComponent extends BaseGrid {
         const hasActivePanel = !!this.activePanel;
         for (const group of groups) {
             // remove the group will automatically remove the panels
-            this.removeGroup(group, true);
+            this.removeGroup(group, { skipActive: true });
         }
         if (hasActiveGroup) {
             this.doSetGroupActive(undefined);
@@ -294,6 +412,9 @@ export class DockviewComponent extends BaseGrid {
             throw new Error(`panel with id ${options.id} already exists`);
         }
         let referenceGroup;
+        if (options.position && options.floating) {
+            throw new Error('you can only provide one of: position, floating as arguments to .addPanel(...)');
+        }
         if (options.position) {
             if (isPanelOptionsWithPanel(options.position)) {
                 const referencePanel = typeof options.position.referencePanel === 'string'
@@ -326,7 +447,20 @@ export class DockviewComponent extends BaseGrid {
         let panel;
         if (referenceGroup) {
             const target = toTarget(((_b = options.position) === null || _b === void 0 ? void 0 : _b.direction) || 'within');
-            if (target === 'center') {
+            if (options.floating) {
+                const group = this.createGroup();
+                panel = this.createPanel(options, group);
+                group.model.openPanel(panel);
+                const o = typeof options.floating === 'object' &&
+                    options.floating !== null
+                    ? options.floating
+                    : {};
+                this.addFloatingGroup(group, o, {
+                    inDragMode: false,
+                    skipRemoveGroup: true,
+                });
+            }
+            else if (referenceGroup.api.isFloating || target === 'center') {
                 panel = this.createPanel(options, referenceGroup);
                 referenceGroup.model.openPanel(panel);
             }
@@ -338,6 +472,19 @@ export class DockviewComponent extends BaseGrid {
                 group.model.openPanel(panel);
             }
         }
+        else if (options.floating) {
+            const group = this.createGroup();
+            panel = this.createPanel(options, group);
+            group.model.openPanel(panel);
+            const o = typeof options.floating === 'object' &&
+                options.floating !== null
+                ? options.floating
+                : {};
+            this.addFloatingGroup(group, o, {
+                inDragMode: false,
+                skipRemoveGroup: true,
+            });
+        }
         else {
             const group = this.createGroupAtLocation();
             panel = this.createPanel(options, group);
@@ -354,7 +501,9 @@ export class DockviewComponent extends BaseGrid {
             throw new Error(`cannot remove panel ${panel.id}. it's missing a group.`);
         }
         group.model.removePanel(panel);
-        panel.dispose();
+        if (!options.skipDispose) {
+            panel.dispose();
+        }
         if (group.size === 0 && options.removeEmptyGroup) {
             this.removeGroup(group);
         }
@@ -369,7 +518,7 @@ export class DockviewComponent extends BaseGrid {
     }
     updateWatermark() {
         var _a, _b;
-        if (this.groups.length === 0) {
+        if (this.groups.filter((x) => !x.api.isFloating).length === 0) {
             if (!this.watermark) {
                 this.watermark = this.createWatermarkComponent();
                 this.watermark.init({
@@ -378,7 +527,7 @@ export class DockviewComponent extends BaseGrid {
                 const watermarkContainer = document.createElement('div');
                 watermarkContainer.className = 'dv-watermark-container';
                 watermarkContainer.appendChild(this.watermark.element);
-                this.element.appendChild(watermarkContainer);
+                this.gridview.element.appendChild(watermarkContainer);
             }
         }
         else if (this.watermark) {
@@ -428,15 +577,28 @@ export class DockviewComponent extends BaseGrid {
             return group;
         }
     }
-    removeGroup(group, skipActive = false) {
+    removeGroup(group, options) {
+        var _a;
         const panels = [...group.panels]; // reassign since group panels will mutate
         for (const panel of panels) {
             this.removePanel(panel, {
                 removeEmptyGroup: false,
-                skipDispose: false,
+                skipDispose: (_a = options === null || options === void 0 ? void 0 : options.skipDispose) !== null && _a !== void 0 ? _a : false,
             });
         }
-        super.doRemoveGroup(group, { skipActive });
+        this.doRemoveGroup(group, options);
+    }
+    doRemoveGroup(group, options) {
+        const floatingGroup = this.floatingGroups.find((_) => _.group === group);
+        if (floatingGroup) {
+            if (!(options === null || options === void 0 ? void 0 : options.skipDispose)) {
+                floatingGroup.group.dispose();
+                this._groups.delete(group.id);
+            }
+            floatingGroup.dispose();
+            return floatingGroup.group;
+        }
+        return super.doRemoveGroup(group, options);
     }
     moveGroupOrPanel(destinationGroup, sourceGroupId, sourceItemId, destinationTarget, destinationIndex) {
         var _a;
@@ -467,25 +629,26 @@ export class DockviewComponent extends BaseGrid {
             const targetLocation = getRelativeLocation(this.gridview.orientation, referenceLocation, destinationTarget);
             if (sourceGroup && sourceGroup.size < 2) {
                 const [targetParentLocation, to] = tail(targetLocation);
-                const sourceLocation = getGridLocation(sourceGroup.element);
-                const [sourceParentLocation, from] = tail(sourceLocation);
-                if (sequenceEquals(sourceParentLocation, targetParentLocation)) {
-                    // special case when 'swapping' two views within same grid location
-                    // if a group has one tab - we are essentially moving the 'group'
-                    // which is equivalent to swapping two views in this case
-                    this.gridview.moveView(sourceParentLocation, from, to);
-                }
-                else {
-                    // source group will become empty so delete the group
-                    const targetGroup = this.doRemoveGroup(sourceGroup, {
-                        skipActive: true,
-                        skipDispose: true,
-                    });
-                    // after deleting the group we need to re-evaulate the ref location
-                    const updatedReferenceLocation = getGridLocation(destinationGroup.element);
-                    const location = getRelativeLocation(this.gridview.orientation, updatedReferenceLocation, destinationTarget);
-                    this.doAddGroup(targetGroup, location);
+                const isFloating = this.floatingGroups.find((x) => x.group === sourceGroup);
+                if (!isFloating) {
+                    const sourceLocation = getGridLocation(sourceGroup.element);
+                    const [sourceParentLocation, from] = tail(sourceLocation);
+                    if (sequenceEquals(sourceParentLocation, targetParentLocation)) {
+                        // special case when 'swapping' two views within same grid location
+                        // if a group has one tab - we are essentially moving the 'group'
+                        // which is equivalent to swapping two views in this case
+                        this.gridview.moveView(sourceParentLocation, from, to);
+                    }
                 }
+                // source group will become empty so delete the group
+                const targetGroup = this.doRemoveGroup(sourceGroup, {
+                    skipActive: true,
+                    skipDispose: true,
+                });
+                // after deleting the group we need to re-evaulate the ref location
+                const updatedReferenceLocation = getGridLocation(destinationGroup.element);
+                const location = getRelativeLocation(this.gridview.orientation, updatedReferenceLocation, destinationTarget);
+                this.doAddGroup(targetGroup, location);
             }
             else {
                 const groupItem = (sourceGroup === null || sourceGroup === void 0 ? void 0 : sourceGroup.model.removePanel(sourceItemId)) ||
@@ -514,7 +677,13 @@ export class DockviewComponent extends BaseGrid {
                 }
             }
             else {
-                this.gridview.removeView(getGridLocation(sourceGroup.element));
+                const floatingGroup = this.floatingGroups.find((x) => x.group === sourceGroup);
+                if (floatingGroup) {
+                    floatingGroup.dispose();
+                }
+                else {
+                    this.gridview.removeView(getGridLocation(sourceGroup.element));
+                }
                 const referenceLocation = getGridLocation(referenceGroup.element);
                 const dropLocation = getRelativeLocation(this.gridview.orientation, referenceLocation, target);
                 this.gridview.addView(sourceGroup, Sizing.Distribute, dropLocation);