dockview-core 1.9.2 → 1.10.1

package/dist/cjs/dockview/dockviewComponent.js

@@ -70,7 +70,6 @@ var dockviewPanel_1 = require("./dockviewPanel");
 var lifecycle_1 = require("../lifecycle");
 var events_1 = require("../events");
 var watermark_1 = require("./components/watermark/watermark");
-var types_1 = require("./types");
 var math_1 = require("../math");
 var deserializer_1 = require("./deserializer");
 var componentFactory_1 = require("../panel/componentFactory");
@@ -78,20 +77,35 @@ var options_1 = require("./options");
 var baseComponentGridview_1 = require("../gridview/baseComponentGridview");
 var component_api_1 = require("../api/component.api");
 var splitview_1 = require("../splitview/splitview");
+var dockviewGroupPanelModel_1 = require("./dockviewGroupPanelModel");
 var dockviewGroupPanel_1 = require("./dockviewGroupPanel");
 var dockviewPanelModel_1 = require("./dockviewPanelModel");
 var dataTransfer_1 = require("../dnd/dataTransfer");
 var overlay_1 = require("../dnd/overlay");
 var dom_1 = require("../dom");
 var dockviewFloatingGroupPanel_1 = require("./dockviewFloatingGroupPanel");
-var dockviewPopoutGroupPanel_1 = require("./dockviewPopoutGroupPanel");
 var constants_1 = require("../constants");
 var overlayRenderContainer_1 = require("../overlayRenderContainer");
+var popoutWindow_1 = require("../popoutWindow");
 var DEFAULT_ROOT_OVERLAY_MODEL = {
     activationSize: { type: 'pixels', value: 10 },
     size: { type: 'pixels', value: 20 },
 };
-function getTheme(element) {
+function moveGroupWithoutDestroying(options) {
+    var activePanel = options.from.activePanel;
+    var panels = __spreadArray([], __read(options.from.panels), false).map(function (panel) {
+        var removedPanel = options.from.model.removePanel(panel);
+        options.from.model.renderContainer.detatch(panel);
+        return removedPanel;
+    });
+    panels.forEach(function (panel) {
+        options.to.model.openPanel(panel, {
+            skipSetActive: activePanel !== panel,
+            skipSetGroupActive: true,
+        });
+    });
+}
+function getDockviewTheme(element) {
     function toClassList(element) {
         var list = [];
         for (var i = 0; i < element.classList.length; i++) {
@@ -182,6 +196,7 @@ var DockviewComponent = /** @class */ (function (_super) {
             styles: options.styles,
             parentElement: options.parentElement,
             disableAutoResizing: options.disableAutoResizing,
+            locked: options.locked,
         }) || this;
         _this.nextGroupId = (0, math_1.sequentialNumberGenerator)();
         _this._deserializer = new deserializer_1.DefaultDockviewDeserialzier(_this);
@@ -192,6 +207,10 @@ var DockviewComponent = /** @class */ (function (_super) {
         _this.onWillDragGroup = _this._onWillDragGroup.event;
         _this._onDidDrop = new events_1.Emitter();
         _this.onDidDrop = _this._onDidDrop.event;
+        _this._onWillDrop = new events_1.Emitter();
+        _this.onWillDrop = _this._onWillDrop.event;
+        _this._onWillShowOverlay = new events_1.Emitter();
+        _this.onWillShowOverlay = _this._onWillShowOverlay.event;
         _this._onDidRemovePanel = new events_1.Emitter();
         _this.onDidRemovePanel = _this._onDidRemovePanel.event;
         _this._onDidAddPanel = new events_1.Emitter();
@@ -200,15 +219,36 @@ var DockviewComponent = /** @class */ (function (_super) {
         _this.onDidLayoutFromJSON = _this._onDidLayoutFromJSON.event;
         _this._onDidActivePanelChange = new events_1.Emitter();
         _this.onDidActivePanelChange = _this._onDidActivePanelChange.event;
+        _this._onDidMovePanel = new events_1.Emitter();
         _this._floatingGroups = [];
         _this._popoutGroups = [];
+        _this._ignoreEvents = 0;
+        _this._onDidRemoveGroup = new events_1.Emitter();
+        _this.onDidRemoveGroup = _this._onDidRemoveGroup.event;
+        _this._onDidAddGroup = new events_1.Emitter();
+        _this.onDidAddGroup = _this._onDidAddGroup.event;
+        _this._onDidActiveGroupChange = new events_1.Emitter();
+        _this.onDidActiveGroupChange = _this._onDidActiveGroupChange.event;
+        _this._moving = false;
         var gready = document.createElement('div');
         gready.className = 'dv-overlay-render-container';
         _this.gridview.element.appendChild(gready);
         _this.overlayRenderContainer = new overlayRenderContainer_1.OverlayRenderContainer(gready);
         (0, dom_1.toggleClass)(_this.gridview.element, 'dv-dockview', true);
         (0, dom_1.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, events_1.Event.any(_this.onDidAddGroup, _this.onDidRemoveGroup)(function () {
+        _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(function (event) {
+            if (!_this._moving) {
+                _this._onDidAddGroup.fire(event);
+            }
+        }), _this.onDidRemove(function (event) {
+            if (!_this._moving) {
+                _this._onDidRemoveGroup.fire(event);
+            }
+        }), _this.onDidActiveChange(function (event) {
+            if (!_this._moving) {
+                _this._onDidActiveGroupChange.fire(event);
+            }
+        }), events_1.Event.any(_this.onDidAdd, _this.onDidRemove)(function () {
             _this.updateWatermark();
         }), events_1.Event.any(_this.onDidAddPanel, _this.onDidRemovePanel, _this.onDidActivePanelChange)(function () {
             _this._bufferOnDidLayoutChange.fire();
@@ -232,7 +272,7 @@ var DockviewComponent = /** @class */ (function (_super) {
                 // iterate over a copy of the array since .dispose() mutates the original array
                 for (var _e = __values(__spreadArray([], __read(_this._popoutGroups), false)), _f = _e.next(); !_f.done; _f = _e.next()) {
                     var group = _f.value;
-                    group.dispose();
+                    group.disposable.dispose();
                 }
             }
             catch (e_2_1) { e_2 = { error: e_2_1 }; }
@@ -286,7 +326,7 @@ var DockviewComponent = /** @class */ (function (_super) {
                     return _this.options.showDndOverlay({
                         nativeEvent: event,
                         position: position,
-                        target: types_1.DockviewDropTargets.Edge,
+                        target: 'edge',
                         getData: dataTransfer_1.getPanelData,
                     });
                 }
@@ -295,14 +335,51 @@ var DockviewComponent = /** @class */ (function (_super) {
             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(function (event) {
+        _this.addDisposables(_this._rootDropTarget, _this._rootDropTarget.onWillShowOverlay(function (event) {
+            if (_this.gridview.length > 0 && event.position === 'center') {
+                // option only available when no panels in primary grid
+                return;
+            }
+            _this._onWillShowOverlay.fire(new dockviewGroupPanelModel_1.WillShowOverlayLocationEvent(event, {
+                kind: 'edge',
+            }));
+        }), _this._rootDropTarget.onDrop(function (event) {
             var _a;
+            var willDropEvent = new dockviewGroupPanelModel_1.DockviewWillDropEvent({
+                nativeEvent: event.nativeEvent,
+                position: event.position,
+                panel: undefined,
+                api: _this._api,
+                group: undefined,
+                getData: dataTransfer_1.getPanelData,
+                kind: 'edge',
+            });
+            _this._onWillDrop.fire(willDropEvent);
+            if (willDropEvent.defaultPrevented) {
+                return;
+            }
             var data = (0, dataTransfer_1.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(__assign(__assign({}, event), { api: _this._api, group: null, getData: dataTransfer_1.getPanelData }));
+                _this._onDidDrop.fire(new dockviewGroupPanelModel_1.DockviewDidDropEvent({
+                    nativeEvent: event.nativeEvent,
+                    position: event.position,
+                    panel: undefined,
+                    api: _this._api,
+                    group: undefined,
+                    getData: dataTransfer_1.getPanelData,
+                }));
             }
         }), _this._rootDropTarget);
         _this._api = new component_api_1.DockviewApi(_this);
@@ -356,77 +433,219 @@ var DockviewComponent = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    DockviewComponent.prototype.addPopoutGroup = function (item, options) {
+    DockviewComponent.prototype.addPopoutGroup = function (itemToPopout, options) {
         var _this = this;
-        var _a;
-        var group;
-        var box = options === null || options === void 0 ? void 0 : options.position;
-        if (item instanceof dockviewPanel_1.DockviewPanel) {
-            group = this.createGroup();
-            this.removePanel(item, {
-                removeEmptyGroup: true,
-                skipDispose: true,
-            });
-            group.model.openPanel(item);
-            if (!box) {
-                box = this.element.getBoundingClientRect();
+        var _a, _b, _c;
+        if (itemToPopout instanceof dockviewPanel_1.DockviewPanel &&
+            itemToPopout.group.size === 1) {
+            return this.addPopoutGroup(itemToPopout.group);
+        }
+        var theme = getDockviewTheme(this.gridview.element);
+        var element = this.element;
+        function getBox() {
+            if (options === null || options === void 0 ? void 0 : options.position) {
+                return options.position;
             }
-        }
-        else {
-            group = item;
-            if (!box) {
-                box = group.element.getBoundingClientRect();
+            if (itemToPopout instanceof dockviewGroupPanel_1.DockviewGroupPanel) {
+                return itemToPopout.element.getBoundingClientRect();
             }
-            var skip = typeof (options === null || options === void 0 ? void 0 : options.skipRemoveGroup) === 'boolean' &&
-                options.skipRemoveGroup;
-            if (!skip) {
-                this.doRemoveGroup(item, { skipDispose: true });
-            }
-        }
-        var theme = getTheme(this.gridview.element);
-        var popoutWindow = new dockviewPopoutGroupPanel_1.DockviewPopoutGroupPanel("".concat(this.id, "-").concat(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,
-            },
+            if (itemToPopout.group) {
+                return itemToPopout.group.element.getBoundingClientRect();
+            }
+            return element.getBoundingClientRect();
+        }
+        var box = getBox();
+        var 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);
+        }
+        var _window = new popoutWindow_1.PopoutWindow("".concat(this.id, "-").concat(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: function () {
-                (0, array_1.remove)(_this._popoutGroups, popoutWindow);
-                _this.updateWatermark();
-            },
-        }, popoutWindow.window.onDidClose(function () {
-            _this.doAddGroup(group, [0]);
+        var popoutWindowDisposable = new lifecycle_1.CompositeDisposable(_window, _window.onDidClose(function () {
+            popoutWindowDisposable.dispose();
         }));
-        this._popoutGroups.push(popoutWindow);
-        this.updateWatermark();
+        return _window
+            .open()
+            .then(function (popoutContainer) {
+            var _a;
+            if (_window.isDisposed) {
+                return;
+            }
+            if (popoutContainer === null) {
+                popoutWindowDisposable.dispose();
+                return;
+            }
+            var gready = document.createElement('div');
+            gready.className = 'dv-overlay-render-container';
+            var overlayRenderContainer = new overlayRenderContainer_1.OverlayRenderContainer(gready);
+            var referenceGroup = itemToPopout instanceof dockviewPanel_1.DockviewPanel
+                ? itemToPopout.group
+                : itemToPopout;
+            var referenceLocation = itemToPopout.api.location.type;
+            var 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_1.DockviewPanel) {
+                _this.movingLock(function () {
+                    var panel = referenceGroup.model.removePanel(itemToPopout);
+                    group.model.openPanel(panel);
+                });
+            }
+            else {
+                _this.movingLock(function () {
+                    return 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: function () { return _window.window; },
+            };
+            _this.doSetGroupAndPanelActive(group);
+            popoutWindowDisposable.addDisposables(group.api.onDidActiveChange(function (event) {
+                var _a;
+                if (event.isActive) {
+                    (_a = _window.window) === null || _a === void 0 ? void 0 : _a.focus();
+                }
+            }), group.api.onWillFocus(function () {
+                var _a;
+                (_a = _window.window) === null || _a === void 0 ? void 0 : _a.focus();
+            }));
+            var returnedGroup;
+            var value = {
+                window: _window,
+                popoutGroup: group,
+                referenceGroup: _this.getPanel(referenceGroup.id)
+                    ? referenceGroup.id
+                    : undefined,
+                disposable: {
+                    dispose: function () {
+                        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
+             */
+            (0, events_1.addDisposableWindowListener)(_window.window, 'resize', function () {
+                group.layout(window.innerWidth, window.innerHeight);
+            }), overlayRenderContainer, lifecycle_1.Disposable.from(function () {
+                if (_this.getPanel(referenceGroup.id)) {
+                    _this.movingLock(function () {
+                        return 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)) {
+                        var 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(function (err) {
+            console.error(err);
+        });
     };
     DockviewComponent.prototype.addFloatingGroup = function (item, coord, options) {
         var _this = this;
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e, _f, _g;
         var group;
         if (item instanceof dockviewPanel_1.DockviewPanel) {
             group = this.createGroup();
-            this.removePanel(item, {
-                removeEmptyGroup: true,
-                skipDispose: true,
+            this._onDidAddGroup.fire(group);
+            this.movingLock(function () {
+                return _this.removePanel(item, {
+                    removeEmptyGroup: true,
+                    skipDispose: true,
+                    skipSetActiveGroup: true,
+                });
             });
-            group.model.openPanel(item);
+            group.model.openPanel(item, { skipSetGroupActive: true });
         }
         else {
             group = item;
+            var popoutReferenceGroupId = (_a = this._popoutGroups.find(function (_) { return _.popoutGroup === group; })) === null || _a === void 0 ? void 0 : _a.referenceGroup;
+            var popoutReferenceGroup_1 = popoutReferenceGroupId
+                ? this.getPanel(popoutReferenceGroupId)
+                : undefined;
             var skip = typeof (options === null || options === void 0 ? void 0 : options.skipRemoveGroup) === 'boolean' &&
                 options.skipRemoveGroup;
             if (!skip) {
-                this.doRemoveGroup(item, { skipDispose: true });
+                if (popoutReferenceGroup_1) {
+                    this.movingLock(function () {
+                        return moveGroupWithoutDestroying({
+                            from: item,
+                            to: popoutReferenceGroup_1,
+                        });
+                    });
+                    this.doRemoveGroup(item, {
+                        skipPopoutReturn: true,
+                        skipPopoutAssociated: true,
+                    });
+                    this.doRemoveGroup(popoutReferenceGroup_1, {
+                        skipDispose: true,
+                    });
+                    group = popoutReferenceGroup_1;
+                }
+                else {
+                    this.doRemoveGroup(item, {
+                        skipDispose: true,
+                        skipPopoutReturn: true,
+                        skipPopoutAssociated: !!popoutReferenceGroup_1,
+                    });
+                }
             }
         }
-        group.model.location = 'floating';
+        group.model.location = { type: 'floating' };
         var overlayLeft = typeof (coord === null || coord === void 0 ? void 0 : coord.x) === 'number'
             ? Math.max(coord.x, 0)
             : constants_1.DEFAULT_FLOATING_GROUP_POSITION.left;
@@ -436,16 +655,16 @@ var DockviewComponent = /** @class */ (function (_super) {
         var overlay = new overlay_1.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 : constants_1.DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE,
+                : (_e = (_d = this.options.floatingGroupBounds) === null || _d === void 0 ? void 0 : _d.minimumWidthWithinViewport) !== null && _e !== void 0 ? _e : constants_1.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 : constants_1.DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE,
+                : (_g = (_f = this.options.floatingGroupBounds) === null || _f === void 0 ? void 0 : _f.minimumHeightWithinViewport) !== null && _g !== void 0 ? _g : constants_1.DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE,
         });
         var el = group.element.querySelector('.void-container');
         if (!el) {
@@ -476,12 +695,15 @@ var DockviewComponent = /** @class */ (function (_super) {
         }), {
             dispose: function () {
                 disposable.dispose();
-                group.model.location = 'grid';
+                group.model.location = { type: 'grid' };
                 (0, array_1.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();
     };
     DockviewComponent.prototype.orthogonalize = function (position) {
@@ -595,8 +817,8 @@ var DockviewComponent = /** @class */ (function (_super) {
         return this.panels.find(function (panel) { return panel.id === id; });
     };
     DockviewComponent.prototype.setActivePanel = function (panel) {
-        this.doSetGroupActive(panel.group);
         panel.group.model.openPanel(panel);
+        this.doSetGroupAndPanelActive(panel.group);
     };
     DockviewComponent.prototype.moveToNext = function (options) {
         var _a;
@@ -659,7 +881,8 @@ var DockviewComponent = /** @class */ (function (_super) {
         });
         var popoutGroups = this._popoutGroups.map(function (group) {
             return {
-                data: group.group.toJSON(),
+                data: group.popoutGroup.toJSON(),
+                gridReferenceGroup: group.referenceGroup,
                 position: group.window.dimensions(),
             };
         });
@@ -679,7 +902,7 @@ var DockviewComponent = /** @class */ (function (_super) {
     DockviewComponent.prototype.fromJSON = function (data) {
         var e_5, _a, e_6, _b, e_7, _c, e_8, _d, e_9, _e, e_10, _f, e_11, _g;
         var _this = this;
-        var _h, _j;
+        var _h, _j, _k;
         this.clear();
         if (typeof data !== 'object' || data === null) {
             throw new Error('serialized layout must be a non-null object');
@@ -729,7 +952,7 @@ var DockviewComponent = /** @class */ (function (_super) {
                     var isActive = typeof activeView === 'string' &&
                         activeView === panel.id;
                     group.model.openPanel(panel, {
-                        skipSetPanelActive: !isActive,
+                        skipSetActive: !isActive,
                         skipSetGroupActive: true,
                     });
                 }
@@ -771,11 +994,16 @@ var DockviewComponent = /** @class */ (function (_super) {
             try {
                 for (var serializedPopoutGroups_1 = __values(serializedPopoutGroups), serializedPopoutGroups_1_1 = serializedPopoutGroups_1.next(); !serializedPopoutGroups_1_1.done; serializedPopoutGroups_1_1 = serializedPopoutGroups_1.next()) {
                     var serializedPopoutGroup = serializedPopoutGroups_1_1.value;
-                    var data_2 = serializedPopoutGroup.data, position = serializedPopoutGroup.position;
+                    var data_2 = serializedPopoutGroup.data, position = serializedPopoutGroup.position, gridReferenceGroup = serializedPopoutGroup.gridReferenceGroup;
                     var group = createGroupFromSerializedState_1(data_2);
-                    this.addPopoutGroup(group, {
+                    this.addPopoutGroup((_k = (gridReferenceGroup
+                        ? this.getPanel(gridReferenceGroup)
+                        : undefined)) !== null && _k !== void 0 ? _k : group, {
                         skipRemoveGroup: true,
                         position: position !== null && position !== void 0 ? position : undefined,
+                        overridePopoutGroup: gridReferenceGroup
+                            ? group
+                            : undefined,
                     });
                 }
             }
@@ -787,15 +1015,15 @@ var DockviewComponent = /** @class */ (function (_super) {
                 finally { if (e_6) throw e_6.error; }
             }
             try {
-                for (var _k = __values(this._floatingGroups), _l = _k.next(); !_l.done; _l = _k.next()) {
-                    var floatingGroup = _l.value;
+                for (var _l = __values(this._floatingGroups), _m = _l.next(); !_m.done; _m = _l.next()) {
+                    var floatingGroup = _m.value;
                     floatingGroup.overlay.setBounds();
                 }
             }
             catch (e_7_1) { e_7 = { error: e_7_1 }; }
             finally {
                 try {
-                    if (_l && !_l.done && (_c = _k.return)) _c.call(_k);
+                    if (_m && !_m.done && (_c = _l.return)) _c.call(_l);
                 }
                 finally { if (e_7) throw e_7.error; }
             }
@@ -811,11 +1039,11 @@ var DockviewComponent = /** @class */ (function (_super) {
                 /**
                  * Takes all the successfully created groups and remove all of their panels.
                  */
-                for (var _m = __values(this.groups), _o = _m.next(); !_o.done; _o = _m.next()) {
-                    var group = _o.value;
+                for (var _o = __values(this.groups), _p = _o.next(); !_p.done; _p = _o.next()) {
+                    var group = _p.value;
                     try {
-                        for (var _p = (e_9 = void 0, __values(group.panels)), _q = _p.next(); !_q.done; _q = _p.next()) {
-                            var panel = _q.value;
+                        for (var _q = (e_9 = void 0, __values(group.panels)), _r = _q.next(); !_r.done; _r = _q.next()) {
+                            var panel = _r.value;
                             this.removePanel(panel, {
                                 removeEmptyGroup: false,
                                 skipDispose: false,
@@ -825,7 +1053,7 @@ var DockviewComponent = /** @class */ (function (_super) {
                     catch (e_9_1) { e_9 = { error: e_9_1 }; }
                     finally {
                         try {
-                            if (_q && !_q.done && (_e = _p.return)) _e.call(_p);
+                            if (_r && !_r.done && (_e = _q.return)) _e.call(_q);
                         }
                         finally { if (e_9) throw e_9.error; }
                     }
@@ -834,7 +1062,7 @@ var DockviewComponent = /** @class */ (function (_super) {
             catch (e_8_1) { e_8 = { error: e_8_1 }; }
             finally {
                 try {
-                    if (_o && !_o.done && (_d = _m.return)) _d.call(_m);
+                    if (_p && !_p.done && (_d = _o.return)) _d.call(_o);
                 }
                 finally { if (e_8) throw e_8.error; }
             }
@@ -843,8 +1071,8 @@ var DockviewComponent = /** @class */ (function (_super) {
                  * To remove a group we cannot call this.removeGroup(...) since this makes assumptions about
                  * the underlying HTMLElement existing in the Gridview.
                  */
-                for (var _r = __values(this.groups), _s = _r.next(); !_s.done; _s = _r.next()) {
-                    var group = _s.value;
+                for (var _s = __values(this.groups), _t = _s.next(); !_t.done; _t = _s.next()) {
+                    var group = _t.value;
                     group.dispose();
                     this._groups.delete(group.id);
                     this._onDidRemoveGroup.fire(group);
@@ -853,21 +1081,21 @@ var DockviewComponent = /** @class */ (function (_super) {
             catch (e_10_1) { e_10 = { error: e_10_1 }; }
             finally {
                 try {
-                    if (_s && !_s.done && (_f = _r.return)) _f.call(_r);
+                    if (_t && !_t.done && (_f = _s.return)) _f.call(_s);
                 }
                 finally { if (e_10) throw e_10.error; }
             }
             try {
                 // iterate over a reassigned array since original array will be modified
-                for (var _t = __values(__spreadArray([], __read(this._floatingGroups), false)), _u = _t.next(); !_u.done; _u = _t.next()) {
-                    var floatingGroup = _u.value;
+                for (var _u = __values(__spreadArray([], __read(this._floatingGroups), false)), _v = _u.next(); !_v.done; _v = _u.next()) {
+                    var floatingGroup = _v.value;
                     floatingGroup.dispose();
                 }
             }
             catch (e_11_1) { e_11 = { error: e_11_1 }; }
             finally {
                 try {
-                    if (_u && !_u.done && (_g = _t.return)) _g.call(_t);
+                    if (_v && !_v.done && (_g = _u.return)) _g.call(_u);
                 }
                 finally { if (e_11) throw e_11.error; }
             }
@@ -880,6 +1108,7 @@ var DockviewComponent = /** @class */ (function (_super) {
              */
             throw err;
         }
+        this.updateWatermark();
         this._onDidLayoutFromJSON.fire();
     };
     DockviewComponent.prototype.clear = function () {
@@ -904,9 +1133,6 @@ var DockviewComponent = /** @class */ (function (_super) {
         if (hasActiveGroup) {
             this.doSetGroupAndPanelActive(undefined);
         }
-        if (hasActivePanel) {
-            this._onDidActivePanelChange.fire(undefined);
-        }
         this.gridview.clear();
     };
     DockviewComponent.prototype.closeAllGroups = function () {
@@ -958,6 +1184,7 @@ var DockviewComponent = /** @class */ (function (_super) {
                 var group = this.orthogonalize((0, droptarget_1.directionToPosition)(options.position.direction));
                 var panel_1 = this.createPanel(options, group);
                 group.model.openPanel(panel_1);
+                this.doSetGroupAndPanelActive(group);
                 return panel_1;
             }
         }
@@ -969,6 +1196,7 @@ var DockviewComponent = /** @class */ (function (_super) {
             var target = (0, baseComponentGridview_1.toTarget)(((_b = options.position) === null || _b === void 0 ? void 0 : _b.direction) || 'within');
             if (options.floating) {
                 var group = this.createGroup();
+                this._onDidAddGroup.fire(group);
                 var o = typeof options.floating === 'object' &&
                     options.floating !== null
                     ? options.floating
@@ -976,16 +1204,16 @@ var DockviewComponent = /** @class */ (function (_super) {
                 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 {
                 var location_1 = (0, gridview_1.getGridLocation)(referenceGroup.element);
@@ -993,10 +1221,12 @@ var DockviewComponent = /** @class */ (function (_super) {
                 var group = this.createGroupAtLocation(relativeLocation);
                 panel = this.createPanel(options, group);
                 group.model.openPanel(panel);
+                this.doSetGroupAndPanelActive(group);
             }
         }
         else if (options.floating) {
             var group = this.createGroup();
+            this._onDidAddGroup.fire(group);
             var o = typeof options.floating === 'object' &&
                 options.floating !== null
                 ? options.floating
@@ -1004,16 +1234,16 @@ var DockviewComponent = /** @class */ (function (_super) {
             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 {
             var group = this.createGroupAtLocation();
             panel = this.createPanel(options, group);
             group.model.openPanel(panel);
+            this.doSetGroupAndPanelActive(group);
         }
         return panel;
     };
@@ -1026,13 +1256,15 @@ var DockviewComponent = /** @class */ (function (_super) {
         if (!group) {
             throw new Error("cannot remove panel ".concat(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 });
         }
     };
     DockviewComponent.prototype.createWatermarkComponent = function () {
@@ -1045,7 +1277,7 @@ var DockviewComponent = /** @class */ (function (_super) {
     };
     DockviewComponent.prototype.updateWatermark = function () {
         var _a, _b;
-        if (this.groups.filter(function (x) { return x.api.location === 'grid'; }).length === 0) {
+        if (this.groups.filter(function (x) { return x.api.location.type === 'grid' && x.api.isVisible; }).length === 0) {
             if (!this.watermark) {
                 this.watermark = this.createWatermarkComponent();
                 this.watermark.init({
@@ -1091,47 +1323,53 @@ var DockviewComponent = /** @class */ (function (_super) {
             }
             else {
                 var group_1 = this.orthogonalize((0, droptarget_1.directionToPosition)(options.direction));
+                if (!options.skipSetActive) {
+                    this.doSetGroupAndPanelActive(group_1);
+                }
                 return group_1;
             }
             var target = (0, baseComponentGridview_1.toTarget)(options.direction || 'within');
             var location_2 = (0, gridview_1.getGridLocation)(referenceGroup.element);
             var relativeLocation = (0, gridview_1.getRelativeLocation)(this.gridview.orientation, location_2, target);
             this.doAddGroup(group, relativeLocation);
+            if (!options.skipSetActive) {
+                this.doSetGroupAndPanelActive(group);
+            }
             return group;
         }
         else {
             this.doAddGroup(group);
+            this.doSetGroupAndPanelActive(group);
             return group;
         }
     };
     DockviewComponent.prototype.removeGroup = function (group, options) {
+        this.doRemoveGroup(group, options);
+    };
+    DockviewComponent.prototype.doRemoveGroup = function (group, options) {
         var e_15, _a;
         var _b;
         var panels = __spreadArray([], __read(group.panels), false); // reassign since group panels will mutate
-        try {
-            for (var panels_1 = __values(panels), panels_1_1 = panels_1.next(); !panels_1_1.done; panels_1_1 = panels_1.next()) {
-                var panel = panels_1_1.value;
-                this.removePanel(panel, {
-                    removeEmptyGroup: false,
-                    skipDispose: (_b = options === null || options === void 0 ? void 0 : options.skipDispose) !== null && _b !== void 0 ? _b : false,
-                });
-            }
-        }
-        catch (e_15_1) { e_15 = { error: e_15_1 }; }
-        finally {
+        if (!(options === null || options === void 0 ? void 0 : options.skipDispose)) {
             try {
-                if (panels_1_1 && !panels_1_1.done && (_a = panels_1.return)) _a.call(panels_1);
+                for (var panels_1 = __values(panels), panels_1_1 = panels_1.next(); !panels_1_1.done; panels_1_1 = panels_1.next()) {
+                    var panel = panels_1_1.value;
+                    this.removePanel(panel, {
+                        removeEmptyGroup: false,
+                        skipDispose: (_b = options === null || options === void 0 ? void 0 : options.skipDispose) !== null && _b !== void 0 ? _b : false,
+                    });
+                }
+            }
+            catch (e_15_1) { e_15 = { error: e_15_1 }; }
+            finally {
+                try {
+                    if (panels_1_1 && !panels_1_1.done && (_a = panels_1.return)) _a.call(panels_1);
+                }
+                finally { if (e_15) throw e_15.error; }
             }
-            finally { if (e_15) throw e_15.error; }
         }
         var activePanel = this.activePanel;
-        this.doRemoveGroup(group, options);
-        if (this.activePanel !== activePanel) {
-            this._onDidActivePanelChange.fire(this.activePanel);
-        }
-    };
-    DockviewComponent.prototype.doRemoveGroup = function (group, options) {
-        if (group.api.location === 'floating') {
+        if (group.api.location.type === 'floating') {
             var floatingGroup = this._floatingGroups.find(function (_) { return _.group === group; });
             if (floatingGroup) {
                 if (!(options === null || options === void 0 ? void 0 : options.skipDispose)) {
@@ -1143,152 +1381,275 @@ var DockviewComponent = /** @class */ (function (_super) {
                 floatingGroup.dispose();
                 if (!(options === null || options === void 0 ? void 0 : options.skipActive) && this._activeGroup === group) {
                     var 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') {
-            var selectedGroup = this._popoutGroups.find(function (_) { return _.group === group; });
+        if (group.api.location.type === 'popout') {
+            var selectedGroup = this._popoutGroups.find(function (_) { return _.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)) {
+                        var 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();
+                var 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) {
                     var 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.prototype.doRemoveGroup.call(this, group, options);
+        var re = _super.prototype.doRemoveGroup.call(this, group, options);
+        if (!(options === null || options === void 0 ? void 0 : options.skipActive)) {
+            if (this.activePanel !== activePanel) {
+                this._onDidActivePanelChange.fire(this.activePanel);
+            }
+        }
+        return re;
     };
-    DockviewComponent.prototype.moveGroupOrPanel = function (destinationGroup, sourceGroupId, sourceItemId, destinationTarget, destinationIndex) {
-        var _a, _b, _c;
+    DockviewComponent.prototype.movingLock = function (func) {
+        var isMoving = this._moving;
+        try {
+            this._moving = true;
+            return func();
+        }
+        finally {
+            this._moving = isMoving;
+        }
+    };
+    DockviewComponent.prototype.moveGroupOrPanel = function (options) {
+        var _this = this;
+        var _a;
+        var destinationGroup = options.to.group;
+        var sourceGroupId = options.from.groupId;
+        var sourceItemId = options.from.panelId;
+        var destinationTarget = options.to.position;
+        var destinationIndex = options.to.index;
         var 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 ".concat(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') {
-            var groupItem = (_b = sourceGroup === null || sourceGroup === void 0 ? void 0 : sourceGroup.model.removePanel(sourceItemId)) !== null && _b !== void 0 ? _b : this.panels.find(function (panel) { return panel.id === sourceItemId; });
-            if (!groupItem) {
+            /**
+             * Dropping a panel within another group
+             */
+            var removedPanel_1 = this.movingLock(function () {
+                return sourceGroup.model.removePanel(sourceItemId, {
+                    skipSetActive: false,
+                    skipSetActiveGroup: true,
+                });
+            });
+            if (!removedPanel_1) {
                 throw new Error("No panel with id ".concat(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, {
-                index: destinationIndex,
+            this.movingLock(function () {
+                return destinationGroup.model.openPanel(removedPanel_1, {
+                    index: destinationIndex,
+                    skipSetGroupActive: true,
+                });
+            });
+            this.doSetGroupAndPanelActive(destinationGroup);
+            this._onDidMovePanel.fire({
+                panel: removedPanel_1,
             });
         }
         else {
+            /**
+             * Dropping a panel to the extremities of a group which will place that panel
+             * into an adjacent group
+             */
             var referenceLocation = (0, gridview_1.getGridLocation)(destinationGroup.element);
             var targetLocation = (0, gridview_1.getRelativeLocation)(this.gridview.orientation, referenceLocation, destinationTarget);
-            if (sourceGroup && sourceGroup.size < 2) {
-                var _d = __read((0, array_1.tail)(targetLocation), 2), targetParentLocation = _d[0], to = _d[1];
-                if (sourceGroup.api.location === 'grid') {
+            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
+                 */
+                var _b = __read((0, array_1.tail)(targetLocation), 2), targetParentLocation = _b[0], to = _b[1];
+                if (sourceGroup.api.location.type === 'grid') {
                     var sourceLocation = (0, gridview_1.getGridLocation)(sourceGroup.element);
-                    var _e = __read((0, array_1.tail)(sourceLocation), 2), sourceParentLocation = _e[0], from = _e[1];
+                    var _c = __read((0, array_1.tail)(sourceLocation), 2), sourceParentLocation = _c[0], from = _c[1];
                     if ((0, array_1.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);
+                        return;
                     }
                 }
                 // source group will become empty so delete the group
-                var targetGroup = this.doRemoveGroup(sourceGroup, {
-                    skipActive: true,
-                    skipDispose: true,
+                var targetGroup_1 = this.movingLock(function () {
+                    return _this.doRemoveGroup(sourceGroup, {
+                        skipActive: true,
+                        skipDispose: true,
+                    });
                 });
                 // after deleting the group we need to re-evaulate the ref location
                 var updatedReferenceLocation = (0, gridview_1.getGridLocation)(destinationGroup.element);
                 var location_3 = (0, gridview_1.getRelativeLocation)(this.gridview.orientation, updatedReferenceLocation, destinationTarget);
-                this.doAddGroup(targetGroup, location_3);
+                this.movingLock(function () { return _this.doAddGroup(targetGroup_1, location_3); });
+                this.doSetGroupAndPanelActive(targetGroup_1);
             }
             else {
-                var groupItem = (_c = sourceGroup === null || sourceGroup === void 0 ? void 0 : sourceGroup.model.removePanel(sourceItemId)) !== null && _c !== void 0 ? _c : this.panels.find(function (panel) { return 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
+                 */
+                var removedPanel_2 = this.movingLock(function () {
+                    return sourceGroup.model.removePanel(sourceItemId, {
+                        skipSetActive: false,
+                        skipSetActiveGroup: true,
+                    });
+                });
+                if (!removedPanel_2) {
                     throw new Error("No panel with id ".concat(sourceItemId));
                 }
                 var dropLocation = (0, gridview_1.getRelativeLocation)(this.gridview.orientation, referenceLocation, destinationTarget);
-                var group = this.createGroupAtLocation(dropLocation);
-                group.model.openPanel(groupItem);
+                var group_2 = this.createGroupAtLocation(dropLocation);
+                this.movingLock(function () {
+                    return group_2.model.openPanel(removedPanel_2, {
+                        skipSetGroupActive: true,
+                    });
+                });
+                this.doSetGroupAndPanelActive(group_2);
             }
         }
     };
-    DockviewComponent.prototype.moveGroup = function (sourceGroup, referenceGroup, target) {
-        var e_16, _a;
-        if (sourceGroup) {
-            if (!target || target === 'center') {
-                var activePanel = sourceGroup.activePanel;
-                var panels = __spreadArray([], __read(sourceGroup.panels), false).map(function (p) {
-                    return sourceGroup.model.removePanel(p.id);
+    DockviewComponent.prototype.moveGroup = function (options) {
+        var _this = this;
+        var from = options.from.group;
+        var to = options.to.group;
+        var target = options.to.position;
+        if (target === 'center') {
+            var activePanel_1 = from.activePanel;
+            var panels_2 = this.movingLock(function () {
+                return __spreadArray([], __read(from.panels), false).map(function (p) {
+                    return from.model.removePanel(p.id, {
+                        skipSetActive: true,
+                    });
                 });
-                if ((sourceGroup === null || sourceGroup === void 0 ? void 0 : sourceGroup.model.size) === 0) {
-                    this.doRemoveGroup(sourceGroup);
-                }
+            });
+            if ((from === null || from === void 0 ? void 0 : from.model.size) === 0) {
+                this.doRemoveGroup(from, { skipActive: true });
+            }
+            this.movingLock(function () {
+                var e_16, _a;
                 try {
-                    for (var panels_2 = __values(panels), panels_2_1 = panels_2.next(); !panels_2_1.done; panels_2_1 = panels_2.next()) {
-                        var panel = panels_2_1.value;
-                        referenceGroup.model.openPanel(panel, {
-                            skipSetPanelActive: panel !== activePanel,
+                    for (var panels_3 = __values(panels_2), panels_3_1 = panels_3.next(); !panels_3_1.done; panels_3_1 = panels_3.next()) {
+                        var panel = panels_3_1.value;
+                        to.model.openPanel(panel, {
+                            skipSetActive: panel !== activePanel_1,
+                            skipSetGroupActive: true,
                         });
                     }
                 }
                 catch (e_16_1) { e_16 = { error: e_16_1 }; }
                 finally {
                     try {
-                        if (panels_2_1 && !panels_2_1.done && (_a = panels_2.return)) _a.call(panels_2);
+                        if (panels_3_1 && !panels_3_1.done && (_a = panels_3.return)) _a.call(panels_3);
                     }
                     finally { if (e_16) throw e_16.error; }
                 }
-            }
-            else {
-                switch (sourceGroup.api.location) {
-                    case 'grid':
-                        this.gridview.removeView((0, gridview_1.getGridLocation)(sourceGroup.element));
-                        break;
-                    case 'floating': {
-                        var selectedFloatingGroup = this._floatingGroups.find(function (x) { return x.group === sourceGroup; });
-                        if (!selectedFloatingGroup) {
-                            throw new Error('failed to find floating group');
-                        }
-                        selectedFloatingGroup.dispose();
-                        break;
+            });
+            this.doSetGroupAndPanelActive(to);
+            panels_2.forEach(function (panel) {
+                _this._onDidMovePanel.fire({ panel: panel });
+            });
+        }
+        else {
+            switch (from.api.location.type) {
+                case 'grid':
+                    this.gridview.removeView((0, gridview_1.getGridLocation)(from.element));
+                    break;
+                case 'floating': {
+                    var selectedFloatingGroup = this._floatingGroups.find(function (x) { return x.group === from; });
+                    if (!selectedFloatingGroup) {
+                        throw new Error('failed to find floating group');
                     }
-                    case 'popout': {
-                        var selectedPopoutGroup = this._popoutGroups.find(function (x) { return x.group === sourceGroup; });
-                        if (!selectedPopoutGroup) {
-                            throw new Error('failed to find popout group');
-                        }
-                        selectedPopoutGroup.dispose();
+                    selectedFloatingGroup.dispose();
+                    break;
+                }
+                case 'popout': {
+                    var selectedPopoutGroup = this._popoutGroups.find(function (x) { return x.popoutGroup === from; });
+                    if (!selectedPopoutGroup) {
+                        throw new Error('failed to find popout group');
                     }
+                    selectedPopoutGroup.disposable.dispose();
                 }
-                var referenceLocation = (0, gridview_1.getGridLocation)(referenceGroup.element);
-                var dropLocation = (0, gridview_1.getRelativeLocation)(this.gridview.orientation, referenceLocation, target);
-                this.gridview.addView(sourceGroup, splitview_1.Sizing.Distribute, dropLocation);
             }
+            var referenceLocation = (0, gridview_1.getGridLocation)(to.element);
+            var dropLocation = (0, gridview_1.getRelativeLocation)(this.gridview.orientation, referenceLocation, target);
+            this.gridview.addView(from, splitview_1.Sizing.Distribute, dropLocation);
+            from.panels.forEach(function (panel) {
+                _this._onDidMovePanel.fire({ panel: panel });
+            });
         }
     };
-    DockviewComponent.prototype.doSetGroupAndPanelActive = function (group, skipFocus) {
-        var _a, _b;
+    DockviewComponent.prototype.doSetGroupActive = function (group) {
+        _super.prototype.doSetGroupActive.call(this, group);
         var activePanel = this.activePanel;
-        _super.prototype.doSetGroupActive.call(this, 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);
         }
     };
+    DockviewComponent.prototype.doSetGroupAndPanelActive = function (group) {
+        _super.prototype.doSetGroupActive.call(this, group);
+        var activePanel = this.activePanel;
+        if (group &&
+            this.hasMaximizedGroup() &&
+            !this.isMaximizedGroup(group)) {
+            this.exitMaximizedGroup();
+        }
+        if (!this._moving &&
+            activePanel !== this._onDidActivePanelChange.value) {
+            this._onDidActivePanelChange.fire(activePanel);
+        }
+    };
+    DockviewComponent.prototype.getNextGroupId = function () {
+        var id = this.nextGroupId.next();
+        while (this._groups.has(id)) {
+            id = this.nextGroupId.next();
+        }
+        return id;
+    };
     DockviewComponent.prototype.createGroup = function (options) {
         var _this = this;
         if (!options) {
@@ -1306,7 +1667,7 @@ var DockviewComponent = /** @class */ (function (_super) {
             }
         }
         var view = new dockviewGroupPanel_1.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)) {
             var disposable = new lifecycle_1.CompositeDisposable(view.model.onTabDragStart(function (event) {
                 _this._onWillDragPanel.fire(event);
@@ -1314,20 +1675,48 @@ var DockviewComponent = /** @class */ (function (_super) {
                 _this._onWillDragGroup.fire(event);
             }), view.model.onMove(function (event) {
                 var groupId = event.groupId, itemId = event.itemId, target = event.target, index = event.index;
-                _this.moveGroupOrPanel(view, groupId, itemId, target, index);
+                _this.moveGroupOrPanel({
+                    from: { groupId: groupId, panelId: itemId },
+                    to: {
+                        group: view,
+                        position: target,
+                        index: index,
+                    },
+                });
             }), view.model.onDidDrop(function (event) {
-                _this._onDidDrop.fire(__assign(__assign({}, event), { api: _this._api, group: view }));
+                _this._onDidDrop.fire(event);
+            }), view.model.onWillDrop(function (event) {
+                _this._onWillDrop.fire(event);
+            }), view.model.onWillShowOverlay(function (event) {
+                if (_this.options.disableDnd) {
+                    event.preventDefault();
+                    return;
+                }
+                _this._onWillShowOverlay.fire(event);
             }), view.model.onDidAddPanel(function (event) {
+                if (_this._moving) {
+                    return;
+                }
                 _this._onDidAddPanel.fire(event.panel);
             }), view.model.onDidRemovePanel(function (event) {
+                if (_this._moving) {
+                    return;
+                }
                 _this._onDidRemovePanel.fire(event.panel);
             }), view.model.onDidActivePanelChange(function (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: 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;
     };
@@ -1358,4 +1747,3 @@ var DockviewComponent = /** @class */ (function (_super) {
     return DockviewComponent;
 }(baseComponentGridview_1.BaseGrid));
 exports.DockviewComponent = DockviewComponent;
-//# sourceMappingURL=dockviewComponent.js.map