dockview-core 1.9.2 → 1.10.1

package/dist/esm/dockview/dockviewComponent.js

@@ -3,9 +3,8 @@ import { directionToPosition, Droptarget, } from '../dnd/droptarget';
 import { tail, sequenceEquals, remove } from '../array';
 import { DockviewPanel } from './dockviewPanel';
 import { CompositeDisposable, Disposable } from '../lifecycle';
-import { Event, Emitter } from '../events';
+import { Event, Emitter, addDisposableWindowListener } from '../events';
 import { Watermark } from './components/watermark/watermark';
-import { DockviewDropTargets, } from './types';
 import { sequentialNumberGenerator } from '../math';
 import { DefaultDockviewDeserialzier } from './deserializer';
 import { createComponent } from '../panel/componentFactory';
@@ -13,20 +12,35 @@ import { isGroupOptionsWithGroup, isGroupOptionsWithPanel, isPanelOptionsWithGro
 import { BaseGrid, toTarget, } from '../gridview/baseComponentGridview';
 import { DockviewApi } from '../api/component.api';
 import { Orientation, Sizing } from '../splitview/splitview';
+import { DockviewDidDropEvent, DockviewWillDropEvent, WillShowOverlayLocationEvent, } from './dockviewGroupPanelModel';
 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';
-import { DockviewPopoutGroupPanel } from './dockviewPopoutGroupPanel';
 import { DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE, DEFAULT_FLOATING_GROUP_POSITION, } from '../constants';
 import { OverlayRenderContainer, } from '../overlayRenderContainer';
+import { PopoutWindow } from '../popoutWindow';
 const DEFAULT_ROOT_OVERLAY_MODEL = {
     activationSize: { type: 'pixels', value: 10 },
     size: { type: 'pixels', value: 20 },
 };
-function getTheme(element) {
+function moveGroupWithoutDestroying(options) {
+    const activePanel = options.from.activePanel;
+    const panels = [...options.from.panels].map((panel) => {
+        const removedPanel = options.from.model.removePanel(panel);
+        options.from.model.renderContainer.detatch(panel);
+        return removedPanel;
+    });
+    panels.forEach((panel) => {
+        options.to.model.openPanel(panel, {
+            skipSetActive: activePanel !== panel,
+            skipSetGroupActive: true,
+        });
+    });
+}
+function getDockviewTheme(element) {
     function toClassList(element) {
         const list = [];
         for (let i = 0; i < element.classList.length; i++) {
@@ -137,6 +151,7 @@ export class DockviewComponent extends BaseGrid {
             styles: options.styles,
             parentElement: options.parentElement,
             disableAutoResizing: options.disableAutoResizing,
+            locked: options.locked,
         });
         this.nextGroupId = sequentialNumberGenerator();
         this._deserializer = new DefaultDockviewDeserialzier(this);
@@ -147,6 +162,10 @@ export class DockviewComponent extends BaseGrid {
         this.onWillDragGroup = this._onWillDragGroup.event;
         this._onDidDrop = new Emitter();
         this.onDidDrop = this._onDidDrop.event;
+        this._onWillDrop = new Emitter();
+        this.onWillDrop = this._onWillDrop.event;
+        this._onWillShowOverlay = new Emitter();
+        this.onWillShowOverlay = this._onWillShowOverlay.event;
         this._onDidRemovePanel = new Emitter();
         this.onDidRemovePanel = this._onDidRemovePanel.event;
         this._onDidAddPanel = new Emitter();
@@ -155,15 +174,36 @@ export class DockviewComponent extends BaseGrid {
         this.onDidLayoutFromJSON = this._onDidLayoutFromJSON.event;
         this._onDidActivePanelChange = new Emitter();
         this.onDidActivePanelChange = this._onDidActivePanelChange.event;
+        this._onDidMovePanel = new Emitter();
         this._floatingGroups = [];
         this._popoutGroups = [];
+        this._ignoreEvents = 0;
+        this._onDidRemoveGroup = new Emitter();
+        this.onDidRemoveGroup = this._onDidRemoveGroup.event;
+        this._onDidAddGroup = new Emitter();
+        this.onDidAddGroup = this._onDidAddGroup.event;
+        this._onDidActiveGroupChange = new Emitter();
+        this.onDidActiveGroupChange = this._onDidActiveGroupChange.event;
+        this._moving = false;
         const gready = document.createElement('div');
         gready.className = 'dv-overlay-render-container';
         this.gridview.element.appendChild(gready);
         this.overlayRenderContainer = new OverlayRenderContainer(gready);
         toggleClass(this.gridview.element, 'dv-dockview', true);
         toggleClass(this.element, 'dv-debug', !!options.debug);
-        this.addDisposables(this.overlayRenderContainer, this._onWillDragPanel, this._onWillDragGroup, this._onDidActivePanelChange, this._onDidAddPanel, this._onDidRemovePanel, this._onDidLayoutFromJSON, this._onDidDrop, Event.any(this.onDidAddGroup, this.onDidRemoveGroup)(() => {
+        this.addDisposables(this.overlayRenderContainer, this._onWillDragPanel, this._onWillDragGroup, this._onWillShowOverlay, this._onDidActivePanelChange, this._onDidAddPanel, this._onDidRemovePanel, this._onDidLayoutFromJSON, this._onDidDrop, this._onWillDrop, this._onDidMovePanel, this._onDidAddGroup, this._onDidRemoveGroup, this._onDidActiveGroupChange, this.onDidAdd((event) => {
+            if (!this._moving) {
+                this._onDidAddGroup.fire(event);
+            }
+        }), this.onDidRemove((event) => {
+            if (!this._moving) {
+                this._onDidRemoveGroup.fire(event);
+            }
+        }), this.onDidActiveChange((event) => {
+            if (!this._moving) {
+                this._onDidActiveGroupChange.fire(event);
+            }
+        }), Event.any(this.onDidAdd, this.onDidRemove)(() => {
             this.updateWatermark();
         }), Event.any(this.onDidAddPanel, this.onDidRemovePanel, this.onDidActivePanelChange)(() => {
             this._bufferOnDidLayoutChange.fire();
@@ -174,7 +214,7 @@ export class DockviewComponent extends BaseGrid {
             }
             // iterate over a copy of the array since .dispose() mutates the original array
             for (const group of [...this._popoutGroups]) {
-                group.dispose();
+                group.disposable.dispose();
             }
         }));
         this._options = options;
@@ -220,7 +260,7 @@ export class DockviewComponent extends BaseGrid {
                     return this.options.showDndOverlay({
                         nativeEvent: event,
                         position: position,
-                        target: DockviewDropTargets.Edge,
+                        target: 'edge',
                         getData: getPanelData,
                     });
                 }
@@ -229,88 +269,259 @@ export class DockviewComponent extends BaseGrid {
             acceptedTargetZones: ['top', 'bottom', 'left', 'right', 'center'],
             overlayModel: (_b = this.options.rootOverlayModel) !== null && _b !== void 0 ? _b : DEFAULT_ROOT_OVERLAY_MODEL,
         });
-        this.addDisposables(this._rootDropTarget.onDrop((event) => {
+        this.addDisposables(this._rootDropTarget, this._rootDropTarget.onWillShowOverlay((event) => {
+            if (this.gridview.length > 0 && event.position === 'center') {
+                // option only available when no panels in primary grid
+                return;
+            }
+            this._onWillShowOverlay.fire(new WillShowOverlayLocationEvent(event, {
+                kind: 'edge',
+            }));
+        }), this._rootDropTarget.onDrop((event) => {
             var _a;
+            const willDropEvent = new DockviewWillDropEvent({
+                nativeEvent: event.nativeEvent,
+                position: event.position,
+                panel: undefined,
+                api: this._api,
+                group: undefined,
+                getData: getPanelData,
+                kind: 'edge',
+            });
+            this._onWillDrop.fire(willDropEvent);
+            if (willDropEvent.defaultPrevented) {
+                return;
+            }
             const data = getPanelData();
             if (data) {
-                this.moveGroupOrPanel(this.orthogonalize(event.position), data.groupId, (_a = data.panelId) !== null && _a !== void 0 ? _a : undefined, 'center');
+                this.moveGroupOrPanel({
+                    from: {
+                        groupId: data.groupId,
+                        panelId: (_a = data.panelId) !== null && _a !== void 0 ? _a : undefined,
+                    },
+                    to: {
+                        group: this.orthogonalize(event.position),
+                        position: 'center',
+                    },
+                });
             }
             else {
-                this._onDidDrop.fire(Object.assign(Object.assign({}, event), { api: this._api, group: null, getData: getPanelData }));
+                this._onDidDrop.fire(new DockviewDidDropEvent({
+                    nativeEvent: event.nativeEvent,
+                    position: event.position,
+                    panel: undefined,
+                    api: this._api,
+                    group: undefined,
+                    getData: getPanelData,
+                }));
             }
         }), this._rootDropTarget);
         this._api = new DockviewApi(this);
         this.updateWatermark();
     }
-    addPopoutGroup(item, options) {
-        var _a;
-        let group;
-        let box = options === null || options === void 0 ? void 0 : options.position;
-        if (item instanceof DockviewPanel) {
-            group = this.createGroup();
-            this.removePanel(item, {
-                removeEmptyGroup: true,
-                skipDispose: true,
-            });
-            group.model.openPanel(item);
-            if (!box) {
-                box = this.element.getBoundingClientRect();
-            }
+    addPopoutGroup(itemToPopout, options) {
+        var _a, _b, _c;
+        if (itemToPopout instanceof DockviewPanel &&
+            itemToPopout.group.size === 1) {
+            return this.addPopoutGroup(itemToPopout.group);
         }
-        else {
-            group = item;
-            if (!box) {
-                box = group.element.getBoundingClientRect();
+        const theme = getDockviewTheme(this.gridview.element);
+        const element = this.element;
+        function getBox() {
+            if (options === null || options === void 0 ? void 0 : options.position) {
+                return options.position;
             }
-            const skip = typeof (options === null || options === void 0 ? void 0 : options.skipRemoveGroup) === 'boolean' &&
-                options.skipRemoveGroup;
-            if (!skip) {
-                this.doRemoveGroup(item, { skipDispose: true });
+            if (itemToPopout instanceof DockviewGroupPanel) {
+                return itemToPopout.element.getBoundingClientRect();
+            }
+            if (itemToPopout.group) {
+                return itemToPopout.group.element.getBoundingClientRect();
             }
+            return element.getBoundingClientRect();
         }
-        const theme = getTheme(this.gridview.element);
-        const popoutWindow = new DockviewPopoutGroupPanel(`${this.id}-${group.id}`, // globally unique within dockview
-        group, {
-            className: theme !== null && theme !== void 0 ? theme : '',
-            popoutUrl: (_a = options === null || options === void 0 ? void 0 : options.popoutUrl) !== null && _a !== void 0 ? _a : '/popout.html',
-            box: {
-                left: window.screenX + box.left,
-                top: window.screenY + box.top,
-                width: box.width,
-                height: box.height,
-            },
+        const box = getBox();
+        const groupId = (_b = (_a = options === null || options === void 0 ? void 0 : options.overridePopoutGroup) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : this.getNextGroupId(); //item.id;
+        if (itemToPopout.api.location.type === 'grid') {
+            itemToPopout.api.setVisible(false);
+        }
+        const _window = new PopoutWindow(`${this.id}-${groupId}`, // unique id
+        theme !== null && theme !== void 0 ? theme : '', {
+            url: (_c = options === null || options === void 0 ? void 0 : options.popoutUrl) !== null && _c !== void 0 ? _c : '/popout.html',
+            left: window.screenX + box.left,
+            top: window.screenY + box.top,
+            width: box.width,
+            height: box.height,
+            onDidOpen: options === null || options === void 0 ? void 0 : options.onDidOpen,
+            onWillClose: options === null || options === void 0 ? void 0 : options.onWillClose,
         });
-        popoutWindow.addDisposables({
-            dispose: () => {
-                remove(this._popoutGroups, popoutWindow);
-                this.updateWatermark();
-            },
-        }, popoutWindow.window.onDidClose(() => {
-            this.doAddGroup(group, [0]);
+        const popoutWindowDisposable = new CompositeDisposable(_window, _window.onDidClose(() => {
+            popoutWindowDisposable.dispose();
         }));
-        this._popoutGroups.push(popoutWindow);
-        this.updateWatermark();
+        return _window
+            .open()
+            .then((popoutContainer) => {
+            var _a;
+            if (_window.isDisposed) {
+                return;
+            }
+            if (popoutContainer === null) {
+                popoutWindowDisposable.dispose();
+                return;
+            }
+            const gready = document.createElement('div');
+            gready.className = 'dv-overlay-render-container';
+            const overlayRenderContainer = new OverlayRenderContainer(gready);
+            const referenceGroup = itemToPopout instanceof DockviewPanel
+                ? itemToPopout.group
+                : itemToPopout;
+            const referenceLocation = itemToPopout.api.location.type;
+            const group = (_a = options === null || options === void 0 ? void 0 : options.overridePopoutGroup) !== null && _a !== void 0 ? _a : this.createGroup({ id: groupId });
+            group.model.renderContainer = overlayRenderContainer;
+            if (!(options === null || options === void 0 ? void 0 : options.overridePopoutGroup)) {
+                this._onDidAddGroup.fire(group);
+            }
+            if (itemToPopout instanceof DockviewPanel) {
+                this.movingLock(() => {
+                    const panel = referenceGroup.model.removePanel(itemToPopout);
+                    group.model.openPanel(panel);
+                });
+            }
+            else {
+                this.movingLock(() => moveGroupWithoutDestroying({
+                    from: referenceGroup,
+                    to: group,
+                }));
+                switch (referenceLocation) {
+                    case 'grid':
+                        referenceGroup.api.setVisible(false);
+                        break;
+                    case 'floating':
+                    case 'popout':
+                        this.removeGroup(referenceGroup);
+                        break;
+                }
+            }
+            popoutContainer.classList.add('dv-dockview');
+            popoutContainer.style.overflow = 'hidden';
+            popoutContainer.appendChild(gready);
+            popoutContainer.appendChild(group.element);
+            group.model.location = {
+                type: 'popout',
+                getWindow: () => _window.window,
+            };
+            this.doSetGroupAndPanelActive(group);
+            popoutWindowDisposable.addDisposables(group.api.onDidActiveChange((event) => {
+                var _a;
+                if (event.isActive) {
+                    (_a = _window.window) === null || _a === void 0 ? void 0 : _a.focus();
+                }
+            }), group.api.onWillFocus(() => {
+                var _a;
+                (_a = _window.window) === null || _a === void 0 ? void 0 : _a.focus();
+            }));
+            let returnedGroup;
+            const value = {
+                window: _window,
+                popoutGroup: group,
+                referenceGroup: this.getPanel(referenceGroup.id)
+                    ? referenceGroup.id
+                    : undefined,
+                disposable: {
+                    dispose: () => {
+                        popoutWindowDisposable.dispose();
+                        return returnedGroup;
+                    },
+                },
+            };
+            popoutWindowDisposable.addDisposables(
+            /**
+             * ResizeObserver seems slow here, I do not know why but we don't need it
+             * since we can reply on the window resize event as we will occupy the full
+             * window dimensions
+             */
+            addDisposableWindowListener(_window.window, 'resize', () => {
+                group.layout(window.innerWidth, window.innerHeight);
+            }), overlayRenderContainer, Disposable.from(() => {
+                if (this.getPanel(referenceGroup.id)) {
+                    this.movingLock(() => moveGroupWithoutDestroying({
+                        from: group,
+                        to: referenceGroup,
+                    }));
+                    if (!referenceGroup.api.isVisible) {
+                        referenceGroup.api.setVisible(true);
+                    }
+                    if (this.getPanel(group.id)) {
+                        this.doRemoveGroup(group, {
+                            skipPopoutAssociated: true,
+                        });
+                    }
+                }
+                else {
+                    if (this.getPanel(group.id)) {
+                        const removedGroup = this.doRemoveGroup(group, {
+                            skipDispose: true,
+                            skipActive: true,
+                        });
+                        removedGroup.model.renderContainer =
+                            this.overlayRenderContainer;
+                        removedGroup.model.location = { type: 'grid' };
+                        returnedGroup = removedGroup;
+                    }
+                }
+            }));
+            this._popoutGroups.push(value);
+            this.updateWatermark();
+        })
+            .catch((err) => {
+            console.error(err);
+        });
     }
     addFloatingGroup(item, coord, options) {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e, _f, _g;
         let group;
         if (item instanceof DockviewPanel) {
             group = this.createGroup();
-            this.removePanel(item, {
+            this._onDidAddGroup.fire(group);
+            this.movingLock(() => this.removePanel(item, {
                 removeEmptyGroup: true,
                 skipDispose: true,
-            });
-            group.model.openPanel(item);
+                skipSetActiveGroup: true,
+            }));
+            group.model.openPanel(item, { skipSetGroupActive: true });
         }
         else {
             group = item;
+            const popoutReferenceGroupId = (_a = this._popoutGroups.find((_) => _.popoutGroup === group)) === null || _a === void 0 ? void 0 : _a.referenceGroup;
+            const popoutReferenceGroup = popoutReferenceGroupId
+                ? this.getPanel(popoutReferenceGroupId)
+                : undefined;
             const skip = typeof (options === null || options === void 0 ? void 0 : options.skipRemoveGroup) === 'boolean' &&
                 options.skipRemoveGroup;
             if (!skip) {
-                this.doRemoveGroup(item, { skipDispose: true });
+                if (popoutReferenceGroup) {
+                    this.movingLock(() => moveGroupWithoutDestroying({
+                        from: item,
+                        to: popoutReferenceGroup,
+                    }));
+                    this.doRemoveGroup(item, {
+                        skipPopoutReturn: true,
+                        skipPopoutAssociated: true,
+                    });
+                    this.doRemoveGroup(popoutReferenceGroup, {
+                        skipDispose: true,
+                    });
+                    group = popoutReferenceGroup;
+                }
+                else {
+                    this.doRemoveGroup(item, {
+                        skipDispose: true,
+                        skipPopoutReturn: true,
+                        skipPopoutAssociated: !!popoutReferenceGroup,
+                    });
+                }
             }
         }
-        group.model.location = 'floating';
+        group.model.location = { type: 'floating' };
         const overlayLeft = typeof (coord === null || coord === void 0 ? void 0 : coord.x) === 'number'
             ? Math.max(coord.x, 0)
             : DEFAULT_FLOATING_GROUP_POSITION.left;
@@ -320,16 +531,16 @@ export class DockviewComponent extends BaseGrid {
         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,
+            height: (_b = coord === null || coord === void 0 ? void 0 : coord.height) !== null && _b !== void 0 ? _b : 300,
+            width: (_c = coord === null || coord === void 0 ? void 0 : coord.width) !== null && _c !== void 0 ? _c : 300,
             left: overlayLeft,
             top: overlayTop,
             minimumInViewportWidth: this.options.floatingGroupBounds === 'boundedWithinViewport'
                 ? undefined
-                : (_d = (_c = this.options.floatingGroupBounds) === null || _c === void 0 ? void 0 : _c.minimumWidthWithinViewport) !== null && _d !== void 0 ? _d : DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE,
+                : (_e = (_d = this.options.floatingGroupBounds) === null || _d === void 0 ? void 0 : _d.minimumWidthWithinViewport) !== null && _e !== void 0 ? _e : DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE,
             minimumInViewportHeight: this.options.floatingGroupBounds === 'boundedWithinViewport'
                 ? undefined
-                : (_f = (_e = this.options.floatingGroupBounds) === null || _e === void 0 ? void 0 : _e.minimumHeightWithinViewport) !== null && _f !== void 0 ? _f : DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE,
+                : (_g = (_f = this.options.floatingGroupBounds) === null || _f === void 0 ? void 0 : _f.minimumHeightWithinViewport) !== null && _g !== void 0 ? _g : DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE,
         });
         const el = group.element.querySelector('.void-container');
         if (!el) {
@@ -360,12 +571,15 @@ export class DockviewComponent extends BaseGrid {
         }), {
             dispose: () => {
                 disposable.dispose();
-                group.model.location = 'grid';
+                group.model.location = { type: 'grid' };
                 remove(this._floatingGroups, floatingGroupPanel);
                 this.updateWatermark();
             },
         });
         this._floatingGroups.push(floatingGroupPanel);
+        if (!(options === null || options === void 0 ? void 0 : options.skipActiveGroup)) {
+            this.doSetGroupAndPanelActive(group);
+        }
         this.updateWatermark();
     }
     orthogonalize(position) {
@@ -457,8 +671,8 @@ export class DockviewComponent extends BaseGrid {
         return this.panels.find((panel) => panel.id === id);
     }
     setActivePanel(panel) {
-        this.doSetGroupActive(panel.group);
         panel.group.model.openPanel(panel);
+        this.doSetGroupAndPanelActive(panel.group);
     }
     moveToNext(options = {}) {
         var _a;
@@ -519,7 +733,8 @@ export class DockviewComponent extends BaseGrid {
         });
         const popoutGroups = this._popoutGroups.map((group) => {
             return {
-                data: group.group.toJSON(),
+                data: group.popoutGroup.toJSON(),
+                gridReferenceGroup: group.referenceGroup,
                 position: group.window.dimensions(),
             };
         });
@@ -537,7 +752,7 @@ export class DockviewComponent extends BaseGrid {
         return result;
     }
     fromJSON(data) {
-        var _a, _b;
+        var _a, _b, _c;
         this.clear();
         if (typeof data !== 'object' || data === null) {
             throw new Error('serialized layout must be a non-null object');
@@ -576,7 +791,7 @@ export class DockviewComponent extends BaseGrid {
                     const isActive = typeof activeView === 'string' &&
                         activeView === panel.id;
                     group.model.openPanel(panel, {
-                        skipSetPanelActive: !isActive,
+                        skipSetActive: !isActive,
                         skipSetGroupActive: true,
                     });
                 }
@@ -606,11 +821,16 @@ export class DockviewComponent extends BaseGrid {
             }
             const serializedPopoutGroups = (_b = data.popoutGroups) !== null && _b !== void 0 ? _b : [];
             for (const serializedPopoutGroup of serializedPopoutGroups) {
-                const { data, position } = serializedPopoutGroup;
+                const { data, position, gridReferenceGroup } = serializedPopoutGroup;
                 const group = createGroupFromSerializedState(data);
-                this.addPopoutGroup(group, {
+                this.addPopoutGroup((_c = (gridReferenceGroup
+                    ? this.getPanel(gridReferenceGroup)
+                    : undefined)) !== null && _c !== void 0 ? _c : group, {
                     skipRemoveGroup: true,
                     position: position !== null && position !== void 0 ? position : undefined,
+                    overridePopoutGroup: gridReferenceGroup
+                        ? group
+                        : undefined,
                 });
             }
             for (const floatingGroup of this._floatingGroups) {
@@ -657,6 +877,7 @@ export class DockviewComponent extends BaseGrid {
              */
             throw err;
         }
+        this.updateWatermark();
         this._onDidLayoutFromJSON.fire();
     }
     clear() {
@@ -670,9 +891,6 @@ export class DockviewComponent extends BaseGrid {
         if (hasActiveGroup) {
             this.doSetGroupAndPanelActive(undefined);
         }
-        if (hasActivePanel) {
-            this._onDidActivePanelChange.fire(undefined);
-        }
         this.gridview.clear();
     }
     closeAllGroups() {
@@ -713,6 +931,7 @@ export class DockviewComponent extends BaseGrid {
                 const group = this.orthogonalize(directionToPosition(options.position.direction));
                 const panel = this.createPanel(options, group);
                 group.model.openPanel(panel);
+                this.doSetGroupAndPanelActive(group);
                 return panel;
             }
         }
@@ -724,6 +943,7 @@ export class DockviewComponent extends BaseGrid {
             const target = toTarget(((_b = options.position) === null || _b === void 0 ? void 0 : _b.direction) || 'within');
             if (options.floating) {
                 const group = this.createGroup();
+                this._onDidAddGroup.fire(group);
                 const o = typeof options.floating === 'object' &&
                     options.floating !== null
                     ? options.floating
@@ -731,16 +951,16 @@ export class DockviewComponent extends BaseGrid {
                 this.addFloatingGroup(group, o, {
                     inDragMode: false,
                     skipRemoveGroup: true,
+                    skipActiveGroup: true,
                 });
-                this._onDidAddGroup.fire(group);
                 panel = this.createPanel(options, group);
                 group.model.openPanel(panel);
-                this.doSetGroupAndPanelActive(group);
             }
-            else if (referenceGroup.api.location === 'floating' ||
+            else if (referenceGroup.api.location.type === 'floating' ||
                 target === 'center') {
                 panel = this.createPanel(options, referenceGroup);
                 referenceGroup.model.openPanel(panel);
+                this.doSetGroupAndPanelActive(referenceGroup);
             }
             else {
                 const location = getGridLocation(referenceGroup.element);
@@ -748,10 +968,12 @@ export class DockviewComponent extends BaseGrid {
                 const group = this.createGroupAtLocation(relativeLocation);
                 panel = this.createPanel(options, group);
                 group.model.openPanel(panel);
+                this.doSetGroupAndPanelActive(group);
             }
         }
         else if (options.floating) {
             const group = this.createGroup();
+            this._onDidAddGroup.fire(group);
             const o = typeof options.floating === 'object' &&
                 options.floating !== null
                 ? options.floating
@@ -759,16 +981,16 @@ export class DockviewComponent extends BaseGrid {
             this.addFloatingGroup(group, o, {
                 inDragMode: false,
                 skipRemoveGroup: true,
+                skipActiveGroup: true,
             });
-            this._onDidAddGroup.fire(group);
             panel = this.createPanel(options, group);
             group.model.openPanel(panel);
-            this.doSetGroupAndPanelActive(group);
         }
         else {
             const group = this.createGroupAtLocation();
             panel = this.createPanel(options, group);
             group.model.openPanel(panel);
+            this.doSetGroupAndPanelActive(group);
         }
         return panel;
     }
@@ -780,13 +1002,15 @@ export class DockviewComponent extends BaseGrid {
         if (!group) {
             throw new Error(`cannot remove panel ${panel.id}. it's missing a group.`);
         }
-        group.model.removePanel(panel);
+        group.model.removePanel(panel, {
+            skipSetActiveGroup: options.skipSetActiveGroup,
+        });
         if (!options.skipDispose) {
-            this.overlayRenderContainer.detatch(panel);
+            panel.group.model.renderContainer.detatch(panel);
             panel.dispose();
         }
         if (group.size === 0 && options.removeEmptyGroup) {
-            this.removeGroup(group);
+            this.removeGroup(group, { skipActive: options.skipSetActiveGroup });
         }
     }
     createWatermarkComponent() {
@@ -799,7 +1023,7 @@ export class DockviewComponent extends BaseGrid {
     }
     updateWatermark() {
         var _a, _b;
-        if (this.groups.filter((x) => x.api.location === 'grid').length === 0) {
+        if (this.groups.filter((x) => x.api.location.type === 'grid' && x.api.isVisible).length === 0) {
             if (!this.watermark) {
                 this.watermark = this.createWatermarkComponent();
                 this.watermark.init({
@@ -845,36 +1069,42 @@ export class DockviewComponent extends BaseGrid {
             }
             else {
                 const group = this.orthogonalize(directionToPosition(options.direction));
+                if (!options.skipSetActive) {
+                    this.doSetGroupAndPanelActive(group);
+                }
                 return group;
             }
             const target = toTarget(options.direction || 'within');
             const location = getGridLocation(referenceGroup.element);
             const relativeLocation = getRelativeLocation(this.gridview.orientation, location, target);
             this.doAddGroup(group, relativeLocation);
+            if (!options.skipSetActive) {
+                this.doSetGroupAndPanelActive(group);
+            }
             return group;
         }
         else {
             this.doAddGroup(group);
+            this.doSetGroupAndPanelActive(group);
             return group;
         }
     }
     removeGroup(group, options) {
+        this.doRemoveGroup(group, options);
+    }
+    doRemoveGroup(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: (_a = options === null || options === void 0 ? void 0 : options.skipDispose) !== null && _a !== void 0 ? _a : false,
-            });
+        if (!(options === null || options === void 0 ? void 0 : options.skipDispose)) {
+            for (const panel of panels) {
+                this.removePanel(panel, {
+                    removeEmptyGroup: false,
+                    skipDispose: (_a = options === null || options === void 0 ? void 0 : options.skipDispose) !== null && _a !== void 0 ? _a : false,
+                });
+            }
         }
         const activePanel = this.activePanel;
-        this.doRemoveGroup(group, options);
-        if (this.activePanel !== activePanel) {
-            this._onDidActivePanelChange.fire(this.activePanel);
-        }
-    }
-    doRemoveGroup(group, options) {
-        if (group.api.location === 'floating') {
+        if (group.api.location.type === 'floating') {
             const floatingGroup = this._floatingGroups.find((_) => _.group === group);
             if (floatingGroup) {
                 if (!(options === null || options === void 0 ? void 0 : options.skipDispose)) {
@@ -886,60 +1116,124 @@ export class DockviewComponent extends BaseGrid {
                 floatingGroup.dispose();
                 if (!(options === null || options === void 0 ? void 0 : options.skipActive) && this._activeGroup === group) {
                     const groups = Array.from(this._groups.values());
-                    this.doSetGroupActive(groups.length > 0 ? groups[0].value : undefined);
+                    this.doSetGroupAndPanelActive(groups.length > 0 ? groups[0].value : undefined);
                 }
                 return floatingGroup.group;
             }
             throw new Error('failed to find floating group');
         }
-        if (group.api.location === 'popout') {
-            const selectedGroup = this._popoutGroups.find((_) => _.group === group);
+        if (group.api.location.type === 'popout') {
+            const selectedGroup = this._popoutGroups.find((_) => _.popoutGroup === group);
             if (selectedGroup) {
                 if (!(options === null || options === void 0 ? void 0 : options.skipDispose)) {
-                    selectedGroup.group.dispose();
+                    if (!(options === null || options === void 0 ? void 0 : options.skipPopoutAssociated)) {
+                        const refGroup = selectedGroup.referenceGroup
+                            ? this.getPanel(selectedGroup.referenceGroup)
+                            : undefined;
+                        if (refGroup) {
+                            this.removeGroup(refGroup);
+                        }
+                    }
+                    selectedGroup.popoutGroup.dispose();
                     this._groups.delete(group.id);
                     this._onDidRemoveGroup.fire(group);
                 }
-                selectedGroup.dispose();
+                const removedGroup = selectedGroup.disposable.dispose();
+                if (!(options === null || options === void 0 ? void 0 : options.skipPopoutReturn) && removedGroup) {
+                    this.doAddGroup(removedGroup, [0]);
+                    this.doSetGroupAndPanelActive(removedGroup);
+                }
                 if (!(options === null || options === void 0 ? void 0 : options.skipActive) && this._activeGroup === group) {
                     const groups = Array.from(this._groups.values());
-                    this.doSetGroupActive(groups.length > 0 ? groups[0].value : undefined);
+                    this.doSetGroupAndPanelActive(groups.length > 0 ? groups[0].value : undefined);
                 }
-                return selectedGroup.group;
+                this.updateWatermark();
+                return selectedGroup.popoutGroup;
             }
             throw new Error('failed to find popout group');
         }
-        return super.doRemoveGroup(group, options);
+        const re = super.doRemoveGroup(group, options);
+        if (!(options === null || options === void 0 ? void 0 : options.skipActive)) {
+            if (this.activePanel !== activePanel) {
+                this._onDidActivePanelChange.fire(this.activePanel);
+            }
+        }
+        return re;
     }
-    moveGroupOrPanel(destinationGroup, sourceGroupId, sourceItemId, destinationTarget, destinationIndex) {
-        var _a, _b, _c;
+    movingLock(func) {
+        const isMoving = this._moving;
+        try {
+            this._moving = true;
+            return func();
+        }
+        finally {
+            this._moving = isMoving;
+        }
+    }
+    moveGroupOrPanel(options) {
+        var _a;
+        const destinationGroup = options.to.group;
+        const sourceGroupId = options.from.groupId;
+        const sourceItemId = options.from.panelId;
+        const destinationTarget = options.to.position;
+        const destinationIndex = options.to.index;
         const sourceGroup = sourceGroupId
             ? (_a = this._groups.get(sourceGroupId)) === null || _a === void 0 ? void 0 : _a.value
             : undefined;
+        if (!sourceGroup) {
+            throw new Error(`Failed to find group id ${sourceGroupId}`);
+        }
         if (sourceItemId === undefined) {
-            if (sourceGroup) {
-                this.moveGroup(sourceGroup, destinationGroup, destinationTarget);
-            }
+            /**
+             * Moving an entire group into another group
+             */
+            this.moveGroup({
+                from: { group: sourceGroup },
+                to: {
+                    group: destinationGroup,
+                    position: destinationTarget,
+                },
+            });
             return;
         }
         if (!destinationTarget || destinationTarget === 'center') {
-            const groupItem = (_b = sourceGroup === null || sourceGroup === void 0 ? void 0 : sourceGroup.model.removePanel(sourceItemId)) !== null && _b !== void 0 ? _b : this.panels.find((panel) => panel.id === sourceItemId);
-            if (!groupItem) {
+            /**
+             * Dropping a panel within another group
+             */
+            const removedPanel = this.movingLock(() => sourceGroup.model.removePanel(sourceItemId, {
+                skipSetActive: false,
+                skipSetActiveGroup: true,
+            }));
+            if (!removedPanel) {
                 throw new Error(`No panel with id ${sourceItemId}`);
             }
-            if ((sourceGroup === null || sourceGroup === void 0 ? void 0 : sourceGroup.model.size) === 0) {
-                this.doRemoveGroup(sourceGroup);
+            if (sourceGroup.model.size === 0) {
+                // remove the group and do not set a new group as active
+                this.doRemoveGroup(sourceGroup, { skipActive: true });
             }
-            destinationGroup.model.openPanel(groupItem, {
+            this.movingLock(() => destinationGroup.model.openPanel(removedPanel, {
                 index: destinationIndex,
+                skipSetGroupActive: true,
+            }));
+            this.doSetGroupAndPanelActive(destinationGroup);
+            this._onDidMovePanel.fire({
+                panel: removedPanel,
             });
         }
         else {
+            /**
+             * Dropping a panel to the extremities of a group which will place that panel
+             * into an adjacent group
+             */
             const referenceLocation = getGridLocation(destinationGroup.element);
             const targetLocation = getRelativeLocation(this.gridview.orientation, referenceLocation, destinationTarget);
-            if (sourceGroup && sourceGroup.size < 2) {
+            if (sourceGroup.size < 2) {
+                /**
+                 * If we are moving from a group which only has one panel left we will consider
+                 * moving the group itself rather than moving the panel into a newly created group
+                 */
                 const [targetParentLocation, to] = tail(targetLocation);
-                if (sourceGroup.api.location === 'grid') {
+                if (sourceGroup.api.location.type === 'grid') {
                     const sourceLocation = getGridLocation(sourceGroup.element);
                     const [sourceParentLocation, from] = tail(sourceLocation);
                     if (sequenceEquals(sourceParentLocation, targetParentLocation)) {
@@ -947,78 +1241,123 @@ export class DockviewComponent extends BaseGrid {
                         // 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);
+                        return;
                     }
                 }
                 // source group will become empty so delete the group
-                const targetGroup = this.doRemoveGroup(sourceGroup, {
+                const targetGroup = this.movingLock(() => 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);
+                this.movingLock(() => this.doAddGroup(targetGroup, location));
+                this.doSetGroupAndPanelActive(targetGroup);
             }
             else {
-                const groupItem = (_c = sourceGroup === null || sourceGroup === void 0 ? void 0 : sourceGroup.model.removePanel(sourceItemId)) !== null && _c !== void 0 ? _c : this.panels.find((panel) => panel.id === sourceItemId);
-                if (!groupItem) {
+                /**
+                 * The group we are removing from has many panels, we need to remove the panels we are moving,
+                 * create a new group, add the panels to that new group and add the new group in an appropiate position
+                 */
+                const removedPanel = this.movingLock(() => sourceGroup.model.removePanel(sourceItemId, {
+                    skipSetActive: false,
+                    skipSetActiveGroup: true,
+                }));
+                if (!removedPanel) {
                     throw new Error(`No panel with id ${sourceItemId}`);
                 }
                 const dropLocation = getRelativeLocation(this.gridview.orientation, referenceLocation, destinationTarget);
                 const group = this.createGroupAtLocation(dropLocation);
-                group.model.openPanel(groupItem);
+                this.movingLock(() => group.model.openPanel(removedPanel, {
+                    skipSetGroupActive: true,
+                }));
+                this.doSetGroupAndPanelActive(group);
             }
         }
     }
-    moveGroup(sourceGroup, referenceGroup, target) {
-        if (sourceGroup) {
-            if (!target || target === 'center') {
-                const activePanel = sourceGroup.activePanel;
-                const panels = [...sourceGroup.panels].map((p) => sourceGroup.model.removePanel(p.id));
-                if ((sourceGroup === null || sourceGroup === void 0 ? void 0 : sourceGroup.model.size) === 0) {
-                    this.doRemoveGroup(sourceGroup);
-                }
+    moveGroup(options) {
+        const from = options.from.group;
+        const to = options.to.group;
+        const target = options.to.position;
+        if (target === 'center') {
+            const activePanel = from.activePanel;
+            const panels = this.movingLock(() => [...from.panels].map((p) => from.model.removePanel(p.id, {
+                skipSetActive: true,
+            })));
+            if ((from === null || from === void 0 ? void 0 : from.model.size) === 0) {
+                this.doRemoveGroup(from, { skipActive: true });
+            }
+            this.movingLock(() => {
                 for (const panel of panels) {
-                    referenceGroup.model.openPanel(panel, {
-                        skipSetPanelActive: panel !== activePanel,
+                    to.model.openPanel(panel, {
+                        skipSetActive: panel !== activePanel,
+                        skipSetGroupActive: true,
                     });
                 }
-            }
-            else {
-                switch (sourceGroup.api.location) {
-                    case 'grid':
-                        this.gridview.removeView(getGridLocation(sourceGroup.element));
-                        break;
-                    case 'floating': {
-                        const selectedFloatingGroup = this._floatingGroups.find((x) => x.group === sourceGroup);
-                        if (!selectedFloatingGroup) {
-                            throw new Error('failed to find floating group');
-                        }
-                        selectedFloatingGroup.dispose();
-                        break;
+            });
+            this.doSetGroupAndPanelActive(to);
+            panels.forEach((panel) => {
+                this._onDidMovePanel.fire({ panel });
+            });
+        }
+        else {
+            switch (from.api.location.type) {
+                case 'grid':
+                    this.gridview.removeView(getGridLocation(from.element));
+                    break;
+                case 'floating': {
+                    const selectedFloatingGroup = this._floatingGroups.find((x) => x.group === from);
+                    if (!selectedFloatingGroup) {
+                        throw new Error('failed to find floating group');
                     }
-                    case 'popout': {
-                        const selectedPopoutGroup = this._popoutGroups.find((x) => x.group === sourceGroup);
-                        if (!selectedPopoutGroup) {
-                            throw new Error('failed to find popout group');
-                        }
-                        selectedPopoutGroup.dispose();
+                    selectedFloatingGroup.dispose();
+                    break;
+                }
+                case 'popout': {
+                    const selectedPopoutGroup = this._popoutGroups.find((x) => x.popoutGroup === from);
+                    if (!selectedPopoutGroup) {
+                        throw new Error('failed to find popout group');
                     }
+                    selectedPopoutGroup.disposable.dispose();
                 }
-                const referenceLocation = getGridLocation(referenceGroup.element);
-                const dropLocation = getRelativeLocation(this.gridview.orientation, referenceLocation, target);
-                this.gridview.addView(sourceGroup, Sizing.Distribute, dropLocation);
             }
+            const referenceLocation = getGridLocation(to.element);
+            const dropLocation = getRelativeLocation(this.gridview.orientation, referenceLocation, target);
+            this.gridview.addView(from, Sizing.Distribute, dropLocation);
+            from.panels.forEach((panel) => {
+                this._onDidMovePanel.fire({ panel });
+            });
         }
     }
-    doSetGroupAndPanelActive(group, skipFocus) {
-        var _a, _b;
+    doSetGroupActive(group) {
+        super.doSetGroupActive(group);
         const activePanel = this.activePanel;
-        super.doSetGroupActive(group, skipFocus);
-        if (((_a = this._activeGroup) === null || _a === void 0 ? void 0 : _a.activePanel) !== activePanel) {
-            this._onDidActivePanelChange.fire((_b = this._activeGroup) === null || _b === void 0 ? void 0 : _b.activePanel);
+        if (!this._moving &&
+            activePanel !== this._onDidActivePanelChange.value) {
+            this._onDidActivePanelChange.fire(activePanel);
+        }
+    }
+    doSetGroupAndPanelActive(group) {
+        super.doSetGroupActive(group);
+        const activePanel = this.activePanel;
+        if (group &&
+            this.hasMaximizedGroup() &&
+            !this.isMaximizedGroup(group)) {
+            this.exitMaximizedGroup();
+        }
+        if (!this._moving &&
+            activePanel !== this._onDidActivePanelChange.value) {
+            this._onDidActivePanelChange.fire(activePanel);
         }
     }
+    getNextGroupId() {
+        let id = this.nextGroupId.next();
+        while (this._groups.has(id)) {
+            id = this.nextGroupId.next();
+        }
+        return id;
+    }
     createGroup(options) {
         if (!options) {
             options = {};
@@ -1035,7 +1374,7 @@ export class DockviewComponent extends BaseGrid {
             }
         }
         const view = new DockviewGroupPanel(this, id, options);
-        view.init({ params: {}, accessor: null }); // required to initialized .part and allow for correct disposal of group
+        view.init({ params: {}, accessor: this });
         if (!this._groups.has(view.id)) {
             const disposable = new CompositeDisposable(view.model.onTabDragStart((event) => {
                 this._onWillDragPanel.fire(event);
@@ -1043,20 +1382,48 @@ export class DockviewComponent extends BaseGrid {
                 this._onWillDragGroup.fire(event);
             }), view.model.onMove((event) => {
                 const { groupId, itemId, target, index } = event;
-                this.moveGroupOrPanel(view, groupId, itemId, target, index);
+                this.moveGroupOrPanel({
+                    from: { groupId: groupId, panelId: itemId },
+                    to: {
+                        group: view,
+                        position: target,
+                        index,
+                    },
+                });
             }), view.model.onDidDrop((event) => {
-                this._onDidDrop.fire(Object.assign(Object.assign({}, event), { api: this._api, group: view }));
+                this._onDidDrop.fire(event);
+            }), view.model.onWillDrop((event) => {
+                this._onWillDrop.fire(event);
+            }), view.model.onWillShowOverlay((event) => {
+                if (this.options.disableDnd) {
+                    event.preventDefault();
+                    return;
+                }
+                this._onWillShowOverlay.fire(event);
             }), view.model.onDidAddPanel((event) => {
+                if (this._moving) {
+                    return;
+                }
                 this._onDidAddPanel.fire(event.panel);
             }), view.model.onDidRemovePanel((event) => {
+                if (this._moving) {
+                    return;
+                }
                 this._onDidRemovePanel.fire(event.panel);
             }), view.model.onDidActivePanelChange((event) => {
-                this._onDidActivePanelChange.fire(event.panel);
+                if (this._moving) {
+                    return;
+                }
+                if (event.panel !== this.activePanel) {
+                    return;
+                }
+                if (this._onDidActivePanelChange.value !== event.panel) {
+                    this._onDidActivePanelChange.fire(event.panel);
+                }
             }));
             this._groups.set(view.id, { value: view, disposable });
         }
-        // TODO: must be called after the above listeners have been setup,
-        // not an ideal pattern
+        // TODO: must be called after the above listeners have been setup, not an ideal pattern
         view.initialize();
         return view;
     }
@@ -1082,4 +1449,3 @@ export class DockviewComponent extends BaseGrid {
         return (_a = Array.from(this._groups.values()).find((group) => group.value.model.containsPanel(panel))) === null || _a === void 0 ? void 0 : _a.value;
     }
 }
-//# sourceMappingURL=dockviewComponent.js.map