dockview-core 1.8.5 → 1.9.1

package/dist/cjs/dockview/dockviewComponent.js

@@ -25,17 +25,6 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __values = (this && this.__values) || function(o) {
-    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
-    if (m) return m.call(o);
-    if (o && typeof o.length === "number") return {
-        next: function () {
-            if (o && i >= o.length) o = void 0;
-            return { value: o && o[i++], done: !o };
-        }
-    };
-    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
-};
 var __read = (this && this.__read) || function (o, n) {
     var m = typeof Symbol === "function" && o[Symbol.iterator];
     if (!m) return o;
@@ -61,6 +50,17 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
+var __values = (this && this.__values) || function(o) {
+    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+    if (m) return m.call(o);
+    if (o && typeof o.length === "number") return {
+        next: function () {
+            if (o && i >= o.length) o = void 0;
+            return { value: o && o[i++], done: !o };
+        }
+    };
+    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DockviewComponent = void 0;
 var gridview_1 = require("../gridview/gridview");
@@ -84,7 +84,34 @@ var dataTransfer_1 = require("../dnd/dataTransfer");
 var overlay_1 = require("../dnd/overlay");
 var dom_1 = require("../dom");
 var dockviewFloatingGroupPanel_1 = require("./dockviewFloatingGroupPanel");
-var DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE = 100;
+var dockviewPopoutGroupPanel_1 = require("./dockviewPopoutGroupPanel");
+var constants_1 = require("../constants");
+var overlayRenderContainer_1 = require("../overlayRenderContainer");
+var DEFAULT_ROOT_OVERLAY_MODEL = {
+    activationSize: { type: 'pixels', value: 10 },
+    size: { type: 'pixels', value: 20 },
+};
+function getTheme(element) {
+    function toClassList(element) {
+        var list = [];
+        for (var i = 0; i < element.classList.length; i++) {
+            list.push(element.classList.item(i));
+        }
+        return list;
+    }
+    var theme = undefined;
+    var parent = element;
+    while (parent !== null) {
+        theme = toClassList(parent).find(function (cls) {
+            return cls.startsWith('dockview-theme-');
+        });
+        if (typeof theme === 'string') {
+            break;
+        }
+        parent = parent.parentElement;
+    }
+    return theme;
+}
 function typeValidate3(data, path) {
     if (typeof data.id !== 'string') {
         throw new Error("".concat(path, ".id must be a string"));
@@ -148,7 +175,7 @@ function typeValidate(data) {
 var DockviewComponent = /** @class */ (function (_super) {
     __extends(DockviewComponent, _super);
     function DockviewComponent(options) {
-        var _a;
+        var _a, _b;
         var _this = _super.call(this, {
             proportionalLayout: true,
             orientation: (_a = options.orientation) !== null && _a !== void 0 ? _a : splitview_1.Orientation.HORIZONTAL,
@@ -173,12 +200,48 @@ var DockviewComponent = /** @class */ (function (_super) {
         _this.onDidLayoutFromJSON = _this._onDidLayoutFromJSON.event;
         _this._onDidActivePanelChange = new events_1.Emitter();
         _this.onDidActivePanelChange = _this._onDidActivePanelChange.event;
-        _this.floatingGroups = [];
+        _this._floatingGroups = [];
+        _this._popoutGroups = [];
+        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);
-        _this.addDisposables(_this._onWillDragPanel, _this._onWillDragGroup, _this._onDidActivePanelChange, _this._onDidAddPanel, _this._onDidRemovePanel, _this._onDidLayoutFromJSON, _this._onDidDrop, events_1.Event.any(_this.onDidAddGroup, _this.onDidRemoveGroup)(function () {
+        (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.updateWatermark();
         }), events_1.Event.any(_this.onDidAddPanel, _this.onDidRemovePanel, _this.onDidActivePanelChange)(function () {
             _this._bufferOnDidLayoutChange.fire();
+        }), lifecycle_1.Disposable.from(function () {
+            var e_1, _a, e_2, _b;
+            try {
+                // iterate over a copy of the array since .dispose() mutates the original array
+                for (var _c = __values(__spreadArray([], __read(_this._floatingGroups), false)), _d = _c.next(); !_d.done; _d = _c.next()) {
+                    var group = _d.value;
+                    group.dispose();
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (_d && !_d.done && (_a = _c.return)) _a.call(_c);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+            try {
+                // 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();
+                }
+            }
+            catch (e_2_1) { e_2 = { error: e_2_1 }; }
+            finally {
+                try {
+                    if (_f && !_f.done && (_b = _e.return)) _b.call(_e);
+                }
+                finally { if (e_2) throw e_2.error; }
+            }
         }));
         _this._options = options;
         if (!_this.options.components) {
@@ -197,7 +260,7 @@ var DockviewComponent = /** @class */ (function (_super) {
             !_this.options.watermarkFrameworkComponent) {
             _this.options.watermarkComponent = watermark_1.Watermark;
         }
-        var dropTarget = new droptarget_1.Droptarget(_this.element, {
+        _this._rootDropTarget = new droptarget_1.Droptarget(_this.element, {
             canDisplayOverlay: function (event, position) {
                 var data = (0, dataTransfer_1.getPanelData)();
                 if (data) {
@@ -230,12 +293,9 @@ var DockviewComponent = /** @class */ (function (_super) {
                 return false;
             },
             acceptedTargetZones: ['top', 'bottom', 'left', 'right', 'center'],
-            overlayModel: {
-                activationSize: { type: 'pixels', value: 10 },
-                size: { type: 'pixels', value: 20 },
-            },
+            overlayModel: (_b = _this.options.rootOverlayModel) !== null && _b !== void 0 ? _b : DEFAULT_ROOT_OVERLAY_MODEL,
         });
-        _this.addDisposables(dropTarget.onDrop(function (event) {
+        _this.addDisposables(_this._rootDropTarget.onDrop(function (event) {
             var _a;
             var data = (0, dataTransfer_1.getPanelData)();
             if (data) {
@@ -244,7 +304,7 @@ var DockviewComponent = /** @class */ (function (_super) {
             else {
                 _this._onDidDrop.fire(__assign(__assign({}, event), { api: _this._api, group: null, getData: dataTransfer_1.getPanelData }));
             }
-        }), dropTarget);
+        }), _this._rootDropTarget);
         _this._api = new component_api_1.DockviewApi(_this);
         _this.updateWatermark();
         return _this;
@@ -288,6 +348,64 @@ var DockviewComponent = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(DockviewComponent.prototype, "renderer", {
+        get: function () {
+            var _a;
+            return (_a = this.options.defaultRenderer) !== null && _a !== void 0 ? _a : 'onlyWhenVisibile';
+        },
+        enumerable: false,
+        configurable: true
+    });
+    DockviewComponent.prototype.addPopoutGroup = function (item, 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();
+            }
+        }
+        else {
+            group = item;
+            if (!box) {
+                box = group.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,
+            },
+        });
+        popoutWindow.addDisposables({
+            dispose: function () {
+                (0, array_1.remove)(_this._popoutGroups, popoutWindow);
+                _this.updateWatermark();
+            },
+        }, popoutWindow.window.onDidClose(function () {
+            _this.doAddGroup(group, [0]);
+        }));
+        this._popoutGroups.push(popoutWindow);
+        this.updateWatermark();
+    };
     DockviewComponent.prototype.addFloatingGroup = function (item, coord, options) {
         var _this = this;
         var _a, _b, _c, _d, _e, _f;
@@ -308,9 +426,13 @@ var DockviewComponent = /** @class */ (function (_super) {
                 this.doRemoveGroup(item, { skipDispose: true });
             }
         }
-        group.model.isFloating = true;
-        var overlayLeft = typeof (coord === null || coord === void 0 ? void 0 : coord.x) === 'number' ? Math.max(coord.x, 0) : 100;
-        var overlayTop = typeof (coord === null || coord === void 0 ? void 0 : coord.y) === 'number' ? Math.max(coord.y, 0) : 100;
+        group.model.location = '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;
+        var overlayTop = typeof (coord === null || coord === void 0 ? void 0 : coord.y) === 'number'
+            ? Math.max(coord.y, 0)
+            : constants_1.DEFAULT_FLOATING_GROUP_POSITION.top;
         var overlay = new overlay_1.Overlay({
             container: this.gridview.element,
             content: group.element,
@@ -320,10 +442,10 @@ var DockviewComponent = /** @class */ (function (_super) {
             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,
+                : (_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,
             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,
+                : (_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,
         });
         var el = group.element.querySelector('.void-container');
         if (!el) {
@@ -354,12 +476,12 @@ var DockviewComponent = /** @class */ (function (_super) {
         }), {
             dispose: function () {
                 disposable.dispose();
-                group.model.isFloating = false;
-                (0, array_1.remove)(_this.floatingGroups, floatingGroupPanel);
+                group.model.location = 'grid';
+                (0, array_1.remove)(_this._floatingGroups, floatingGroupPanel);
                 _this.updateWatermark();
             },
         });
-        this.floatingGroups.push(floatingGroupPanel);
+        this._floatingGroups.push(floatingGroupPanel);
         this.updateWatermark();
     };
     DockviewComponent.prototype.orthogonalize = function (position) {
@@ -396,19 +518,21 @@ var DockviewComponent = /** @class */ (function (_super) {
         }
     };
     DockviewComponent.prototype.updateOptions = function (options) {
-        var e_1, _a;
+        var e_3, _a;
         var _b, _c;
-        var hasOrientationChanged = typeof options.orientation === 'string' &&
+        var changed_orientation = typeof options.orientation === 'string' &&
             this.gridview.orientation !== options.orientation;
-        var hasFloatingGroupOptionsChanged = options.floatingGroupBounds !== undefined &&
+        var changed_floatingGroupBounds = options.floatingGroupBounds !== undefined &&
             options.floatingGroupBounds !== this.options.floatingGroupBounds;
+        var changed_rootOverlayOptions = options.rootOverlayModel !== undefined &&
+            options.rootOverlayModel !== this.options.rootOverlayModel;
         this._options = __assign(__assign({}, this.options), options);
-        if (hasOrientationChanged) {
+        if (changed_orientation) {
             this.gridview.orientation = options.orientation;
         }
-        if (hasFloatingGroupOptionsChanged) {
+        if (changed_floatingGroupBounds) {
             try {
-                for (var _d = __values(this.floatingGroups), _e = _d.next(); !_e.done; _e = _d.next()) {
+                for (var _d = __values(this._floatingGroups), _e = _d.next(); !_e.done; _e = _d.next()) {
                     var group = _e.value;
                     switch (this.options.floatingGroupBounds) {
                         case 'boundedWithinViewport':
@@ -417,9 +541,9 @@ var DockviewComponent = /** @class */ (function (_super) {
                             break;
                         case undefined:
                             group.overlay.minimumInViewportHeight =
-                                DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE;
+                                constants_1.DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE;
                             group.overlay.minimumInViewportWidth =
-                                DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE;
+                                constants_1.DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE;
                             break;
                         default:
                             group.overlay.minimumInViewportHeight =
@@ -430,33 +554,36 @@ var DockviewComponent = /** @class */ (function (_super) {
                     group.overlay.setBounds({});
                 }
             }
-            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            catch (e_3_1) { e_3 = { error: e_3_1 }; }
             finally {
                 try {
                     if (_e && !_e.done && (_a = _d.return)) _a.call(_d);
                 }
-                finally { if (e_1) throw e_1.error; }
+                finally { if (e_3) throw e_3.error; }
             }
         }
+        if (changed_rootOverlayOptions) {
+            this._rootDropTarget.setOverlayModel(options.rootOverlayModel);
+        }
         this.layout(this.gridview.width, this.gridview.height, true);
     };
     DockviewComponent.prototype.layout = function (width, height, forceResize) {
-        var e_2, _a;
+        var e_4, _a;
         _super.prototype.layout.call(this, width, height, forceResize);
-        if (this.floatingGroups) {
+        if (this._floatingGroups) {
             try {
-                for (var _b = __values(this.floatingGroups), _c = _b.next(); !_c.done; _c = _b.next()) {
+                for (var _b = __values(this._floatingGroups), _c = _b.next(); !_c.done; _c = _b.next()) {
                     var floating = _c.value;
                     // ensure floting groups stay within visible boundaries
                     floating.overlay.setBounds();
                 }
             }
-            catch (e_2_1) { e_2 = { error: e_2_1 }; }
+            catch (e_4_1) { e_4 = { error: e_4_1 }; }
             finally {
                 try {
                     if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
                 }
-                finally { if (e_2) throw e_2.error; }
+                finally { if (e_4) throw e_4.error; }
             }
         }
     };
@@ -524,10 +651,16 @@ var DockviewComponent = /** @class */ (function (_super) {
             collection[panel.id] = panel.toJSON();
             return collection;
         }, {});
-        var floats = this.floatingGroups.map(function (floatingGroup) {
+        var floats = this._floatingGroups.map(function (group) {
             return {
-                data: floatingGroup.group.toJSON(),
-                position: floatingGroup.overlay.toJSON(),
+                data: group.group.toJSON(),
+                position: group.overlay.toJSON(),
+            };
+        });
+        var popoutGroups = this._popoutGroups.map(function (group) {
+            return {
+                data: group.group.toJSON(),
+                position: group.window.dimensions(),
             };
         });
         var result = {
@@ -538,12 +671,15 @@ var DockviewComponent = /** @class */ (function (_super) {
         if (floats.length > 0) {
             result.floatingGroups = floats;
         }
+        if (popoutGroups.length > 0) {
+            result.popoutGroups = popoutGroups;
+        }
         return result;
     };
     DockviewComponent.prototype.fromJSON = function (data) {
-        var e_3, _a, e_4, _b, e_5, _c, e_6, _d, e_7, _e, e_8, _f;
+        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 _g;
+        var _h, _j;
         this.clear();
         if (typeof data !== 'object' || data === null) {
             throw new Error('serialized layout must be a non-null object');
@@ -557,7 +693,7 @@ var DockviewComponent = /** @class */ (function (_super) {
             var width = this.width;
             var height = this.height;
             var createGroupFromSerializedState_1 = function (data) {
-                var e_9, _a;
+                var e_12, _a;
                 var id = data.id, locked = data.locked, hideHeader = data.hideHeader, views = data.views, activeView = data.activeView;
                 if (typeof id !== 'string') {
                     throw new Error('group id must be of type string');
@@ -580,12 +716,12 @@ var DockviewComponent = /** @class */ (function (_super) {
                         createdPanels.push(panel);
                     }
                 }
-                catch (e_9_1) { e_9 = { error: e_9_1 }; }
+                catch (e_12_1) { e_12 = { error: e_12_1 }; }
                 finally {
                     try {
                         if (views_1_1 && !views_1_1.done && (_a = views_1.return)) _a.call(views_1);
                     }
-                    finally { if (e_9) throw e_9.error; }
+                    finally { if (e_12) throw e_12.error; }
                 }
                 _this._onDidAddGroup.fire(group);
                 for (var i = 0; i < views.length; i++) {
@@ -610,7 +746,7 @@ var DockviewComponent = /** @class */ (function (_super) {
                 },
             });
             this.layout(width, height, true);
-            var serializedFloatingGroups = (_g = data.floatingGroups) !== null && _g !== void 0 ? _g : [];
+            var serializedFloatingGroups = (_h = data.floatingGroups) !== null && _h !== void 0 ? _h : [];
             try {
                 for (var serializedFloatingGroups_1 = __values(serializedFloatingGroups), serializedFloatingGroups_1_1 = serializedFloatingGroups_1.next(); !serializedFloatingGroups_1_1.done; serializedFloatingGroups_1_1 = serializedFloatingGroups_1.next()) {
                     var serializedFloatingGroup = serializedFloatingGroups_1_1.value;
@@ -624,25 +760,44 @@ var DockviewComponent = /** @class */ (function (_super) {
                     }, { skipRemoveGroup: true, inDragMode: false });
                 }
             }
-            catch (e_3_1) { e_3 = { error: e_3_1 }; }
+            catch (e_5_1) { e_5 = { error: e_5_1 }; }
             finally {
                 try {
                     if (serializedFloatingGroups_1_1 && !serializedFloatingGroups_1_1.done && (_a = serializedFloatingGroups_1.return)) _a.call(serializedFloatingGroups_1);
                 }
-                finally { if (e_3) throw e_3.error; }
+                finally { if (e_5) throw e_5.error; }
+            }
+            var serializedPopoutGroups = (_j = data.popoutGroups) !== null && _j !== void 0 ? _j : [];
+            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 group = createGroupFromSerializedState_1(data_2);
+                    this.addPopoutGroup(group, {
+                        skipRemoveGroup: true,
+                        position: position !== null && position !== void 0 ? position : undefined,
+                    });
+                }
+            }
+            catch (e_6_1) { e_6 = { error: e_6_1 }; }
+            finally {
+                try {
+                    if (serializedPopoutGroups_1_1 && !serializedPopoutGroups_1_1.done && (_b = serializedPopoutGroups_1.return)) _b.call(serializedPopoutGroups_1);
+                }
+                finally { if (e_6) throw e_6.error; }
             }
             try {
-                for (var _h = __values(this.floatingGroups), _j = _h.next(); !_j.done; _j = _h.next()) {
-                    var floatingGroup = _j.value;
+                for (var _k = __values(this._floatingGroups), _l = _k.next(); !_l.done; _l = _k.next()) {
+                    var floatingGroup = _l.value;
                     floatingGroup.overlay.setBounds();
                 }
             }
-            catch (e_4_1) { e_4 = { error: e_4_1 }; }
+            catch (e_7_1) { e_7 = { error: e_7_1 }; }
             finally {
                 try {
-                    if (_j && !_j.done && (_b = _h.return)) _b.call(_h);
+                    if (_l && !_l.done && (_c = _k.return)) _c.call(_k);
                 }
-                finally { if (e_4) throw e_4.error; }
+                finally { if (e_7) throw e_7.error; }
             }
             if (typeof activeGroup === 'string') {
                 var panel = this.getPanel(activeGroup);
@@ -656,65 +811,65 @@ var DockviewComponent = /** @class */ (function (_super) {
                 /**
                  * Takes all the successfully created groups and remove all of their panels.
                  */
-                for (var _k = __values(this.groups), _l = _k.next(); !_l.done; _l = _k.next()) {
-                    var group = _l.value;
+                for (var _m = __values(this.groups), _o = _m.next(); !_o.done; _o = _m.next()) {
+                    var group = _o.value;
                     try {
-                        for (var _m = (e_6 = void 0, __values(group.panels)), _o = _m.next(); !_o.done; _o = _m.next()) {
-                            var panel = _o.value;
+                        for (var _p = (e_9 = void 0, __values(group.panels)), _q = _p.next(); !_q.done; _q = _p.next()) {
+                            var panel = _q.value;
                             this.removePanel(panel, {
                                 removeEmptyGroup: false,
                                 skipDispose: false,
                             });
                         }
                     }
-                    catch (e_6_1) { e_6 = { error: e_6_1 }; }
+                    catch (e_9_1) { e_9 = { error: e_9_1 }; }
                     finally {
                         try {
-                            if (_o && !_o.done && (_d = _m.return)) _d.call(_m);
+                            if (_q && !_q.done && (_e = _p.return)) _e.call(_p);
                         }
-                        finally { if (e_6) throw e_6.error; }
+                        finally { if (e_9) throw e_9.error; }
                     }
                 }
             }
-            catch (e_5_1) { e_5 = { error: e_5_1 }; }
+            catch (e_8_1) { e_8 = { error: e_8_1 }; }
             finally {
                 try {
-                    if (_l && !_l.done && (_c = _k.return)) _c.call(_k);
+                    if (_o && !_o.done && (_d = _m.return)) _d.call(_m);
                 }
-                finally { if (e_5) throw e_5.error; }
+                finally { if (e_8) throw e_8.error; }
             }
             try {
                 /**
                  * To remove a group we cannot call this.removeGroup(...) since this makes assumptions about
                  * the underlying HTMLElement existing in the Gridview.
                  */
-                for (var _p = __values(this.groups), _q = _p.next(); !_q.done; _q = _p.next()) {
-                    var group = _q.value;
+                for (var _r = __values(this.groups), _s = _r.next(); !_s.done; _s = _r.next()) {
+                    var group = _s.value;
                     group.dispose();
                     this._groups.delete(group.id);
                     this._onDidRemoveGroup.fire(group);
                 }
             }
-            catch (e_7_1) { e_7 = { error: e_7_1 }; }
+            catch (e_10_1) { e_10 = { error: e_10_1 }; }
             finally {
                 try {
-                    if (_q && !_q.done && (_e = _p.return)) _e.call(_p);
+                    if (_s && !_s.done && (_f = _r.return)) _f.call(_r);
                 }
-                finally { if (e_7) throw e_7.error; }
+                finally { if (e_10) throw e_10.error; }
             }
             try {
                 // iterate over a reassigned array since original array will be modified
-                for (var _r = __values(__spreadArray([], __read(this.floatingGroups), false)), _s = _r.next(); !_s.done; _s = _r.next()) {
-                    var floatingGroup = _s.value;
+                for (var _t = __values(__spreadArray([], __read(this._floatingGroups), false)), _u = _t.next(); !_u.done; _u = _t.next()) {
+                    var floatingGroup = _u.value;
                     floatingGroup.dispose();
                 }
             }
-            catch (e_8_1) { e_8 = { error: e_8_1 }; }
+            catch (e_11_1) { e_11 = { error: e_11_1 }; }
             finally {
                 try {
-                    if (_s && !_s.done && (_f = _r.return)) _f.call(_r);
+                    if (_u && !_u.done && (_g = _t.return)) _g.call(_t);
                 }
-                finally { if (e_8) throw e_8.error; }
+                finally { if (e_11) throw e_11.error; }
             }
             // fires clean-up events and clears the underlying HTML gridview.
             this.clear();
@@ -728,7 +883,7 @@ var DockviewComponent = /** @class */ (function (_super) {
         this._onDidLayoutFromJSON.fire();
     };
     DockviewComponent.prototype.clear = function () {
-        var e_10, _a;
+        var e_13, _a;
         var groups = Array.from(this._groups.values()).map(function (_) { return _.value; });
         var hasActiveGroup = !!this.activeGroup;
         var hasActivePanel = !!this.activePanel;
@@ -739,12 +894,12 @@ var DockviewComponent = /** @class */ (function (_super) {
                 this.removeGroup(group, { skipActive: true });
             }
         }
-        catch (e_10_1) { e_10 = { error: e_10_1 }; }
+        catch (e_13_1) { e_13 = { error: e_13_1 }; }
         finally {
             try {
                 if (groups_1_1 && !groups_1_1.done && (_a = groups_1.return)) _a.call(groups_1);
             }
-            finally { if (e_10) throw e_10.error; }
+            finally { if (e_13) throw e_13.error; }
         }
         if (hasActiveGroup) {
             this.doSetGroupAndPanelActive(undefined);
@@ -755,7 +910,7 @@ var DockviewComponent = /** @class */ (function (_super) {
         this.gridview.clear();
     };
     DockviewComponent.prototype.closeAllGroups = function () {
-        var e_11, _a;
+        var e_14, _a;
         try {
             for (var _b = __values(this._groups.entries()), _c = _b.next(); !_c.done; _c = _b.next()) {
                 var entry = _c.value;
@@ -763,12 +918,12 @@ var DockviewComponent = /** @class */ (function (_super) {
                 group.value.model.closeAllPanels();
             }
         }
-        catch (e_11_1) { e_11 = { error: e_11_1 }; }
+        catch (e_14_1) { e_14 = { error: e_14_1 }; }
         finally {
             try {
                 if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
             }
-            finally { if (e_11) throw e_11.error; }
+            finally { if (e_14) throw e_14.error; }
         }
     };
     DockviewComponent.prototype.addPanel = function (options) {
@@ -827,7 +982,8 @@ var DockviewComponent = /** @class */ (function (_super) {
                 group.model.openPanel(panel);
                 this.doSetGroupAndPanelActive(group);
             }
-            else if (referenceGroup.api.isFloating || target === 'center') {
+            else if (referenceGroup.api.location === 'floating' ||
+                target === 'center') {
                 panel = this.createPanel(options, referenceGroup);
                 referenceGroup.model.openPanel(panel);
             }
@@ -872,6 +1028,7 @@ var DockviewComponent = /** @class */ (function (_super) {
         }
         group.model.removePanel(panel);
         if (!options.skipDispose) {
+            this.overlayRenderContainer.detatch(panel);
             panel.dispose();
         }
         if (group.size === 0 && options.removeEmptyGroup) {
@@ -888,7 +1045,7 @@ var DockviewComponent = /** @class */ (function (_super) {
     };
     DockviewComponent.prototype.updateWatermark = function () {
         var _a, _b;
-        if (this.groups.filter(function (x) { return !x.api.isFloating; }).length === 0) {
+        if (this.groups.filter(function (x) { return x.api.location === 'grid'; }).length === 0) {
             if (!this.watermark) {
                 this.watermark = this.createWatermarkComponent();
                 this.watermark.init({
@@ -948,7 +1105,7 @@ var DockviewComponent = /** @class */ (function (_super) {
         }
     };
     DockviewComponent.prototype.removeGroup = function (group, options) {
-        var e_12, _a;
+        var e_15, _a;
         var _b;
         var panels = __spreadArray([], __read(group.panels), false); // reassign since group panels will mutate
         try {
@@ -960,12 +1117,12 @@ var DockviewComponent = /** @class */ (function (_super) {
                 });
             }
         }
-        catch (e_12_1) { e_12 = { error: e_12_1 }; }
+        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_12) throw e_12.error; }
+            finally { if (e_15) throw e_15.error; }
         }
         var activePanel = this.activePanel;
         this.doRemoveGroup(group, options);
@@ -974,19 +1131,40 @@ var DockviewComponent = /** @class */ (function (_super) {
         }
     };
     DockviewComponent.prototype.doRemoveGroup = function (group, options) {
-        var floatingGroup = this.floatingGroups.find(function (_) { return _.group === group; });
-        if (floatingGroup) {
-            if (!(options === null || options === void 0 ? void 0 : options.skipDispose)) {
-                floatingGroup.group.dispose();
-                this._groups.delete(group.id);
-                this._onDidRemoveGroup.fire(group);
+        if (group.api.location === 'floating') {
+            var floatingGroup = this._floatingGroups.find(function (_) { return _.group === group; });
+            if (floatingGroup) {
+                if (!(options === null || options === void 0 ? void 0 : options.skipDispose)) {
+                    floatingGroup.group.dispose();
+                    this._groups.delete(group.id);
+                    this._onDidRemoveGroup.fire(group);
+                }
+                (0, array_1.remove)(this._floatingGroups, floatingGroup);
+                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);
+                }
+                return floatingGroup.group;
             }
-            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);
+            throw new Error('failed to find floating group');
+        }
+        if (group.api.location === 'popout') {
+            var selectedGroup = this._popoutGroups.find(function (_) { return _.group === group; });
+            if (selectedGroup) {
+                if (!(options === null || options === void 0 ? void 0 : options.skipDispose)) {
+                    selectedGroup.group.dispose();
+                    this._groups.delete(group.id);
+                    this._onDidRemoveGroup.fire(group);
+                }
+                selectedGroup.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);
+                }
+                return selectedGroup.group;
             }
-            return floatingGroup.group;
+            throw new Error('failed to find popout group');
         }
         return _super.prototype.doRemoveGroup.call(this, group, options);
     };
@@ -1018,8 +1196,7 @@ var DockviewComponent = /** @class */ (function (_super) {
             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];
-                var isFloating = this.floatingGroups.find(function (x) { return x.group === sourceGroup; });
-                if (!isFloating) {
+                if (sourceGroup.api.location === 'grid') {
                     var sourceLocation = (0, gridview_1.getGridLocation)(sourceGroup.element);
                     var _e = __read((0, array_1.tail)(sourceLocation), 2), sourceParentLocation = _e[0], from = _e[1];
                     if ((0, array_1.sequenceEquals)(sourceParentLocation, targetParentLocation)) {
@@ -1051,7 +1228,7 @@ var DockviewComponent = /** @class */ (function (_super) {
         }
     };
     DockviewComponent.prototype.moveGroup = function (sourceGroup, referenceGroup, target) {
-        var e_13, _a;
+        var e_16, _a;
         if (sourceGroup) {
             if (!target || target === 'center') {
                 var activePanel = sourceGroup.activePanel;
@@ -1069,21 +1246,34 @@ var DockviewComponent = /** @class */ (function (_super) {
                         });
                     }
                 }
-                catch (e_13_1) { e_13 = { error: e_13_1 }; }
+                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);
                     }
-                    finally { if (e_13) throw e_13.error; }
+                    finally { if (e_16) throw e_16.error; }
                 }
             }
             else {
-                var floatingGroup = this.floatingGroups.find(function (x) { return x.group === sourceGroup; });
-                if (floatingGroup) {
-                    floatingGroup.dispose();
-                }
-                else {
-                    this.gridview.removeView((0, gridview_1.getGridLocation)(sourceGroup.element));
+                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;
+                    }
+                    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();
+                    }
                 }
                 var referenceLocation = (0, gridview_1.getGridLocation)(referenceGroup.element);
                 var dropLocation = (0, gridview_1.getRelativeLocation)(this.gridview.orientation, referenceLocation, target);
@@ -1146,7 +1336,7 @@ var DockviewComponent = /** @class */ (function (_super) {
         var contentComponent = options.component;
         var tabComponent = (_a = options.tabComponent) !== null && _a !== void 0 ? _a : this.options.defaultTabComponent;
         var view = new dockviewPanelModel_1.DockviewPanelModel(this, options.id, contentComponent, tabComponent);
-        var panel = new dockviewPanel_1.DockviewPanel(options.id, this, this._api, group, view);
+        var panel = new dockviewPanel_1.DockviewPanel(options.id, this, this._api, group, view, { renderer: options.renderer });
         panel.init({
             title: (_b = options.title) !== null && _b !== void 0 ? _b : options.id,
             params: (_c = options === null || options === void 0 ? void 0 : options.params) !== null && _c !== void 0 ? _c : {},