dockview-core 1.8.4 → 1.9.0

package/dist/cjs/dockview/dockviewComponent.js

@@ -1,1157 +1,1355 @@
-"use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    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;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DockviewComponent = void 0;
-var gridview_1 = require("../gridview/gridview");
-var droptarget_1 = require("../dnd/droptarget");
-var array_1 = require("../array");
-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");
-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 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 DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE = 100;
-function typeValidate3(data, path) {
-    if (typeof data.id !== 'string') {
-        throw new Error("".concat(path, ".id must be a string"));
-    }
-    if (typeof data.activeView !== 'string' ||
-        typeof data.activeView !== 'undefined') {
-        throw new Error("".concat(path, ".activeView must be a string of undefined"));
-    }
-}
-function typeValidate2(data, path) {
-    if (typeof data.size !== 'number' && typeof data.size !== 'undefined') {
-        throw new Error("".concat(path, ".size must be a number or undefined"));
-    }
-    if (typeof data.visible !== 'boolean' &&
-        typeof data.visible !== 'undefined') {
-        throw new Error("".concat(path, ".visible must be a boolean or undefined"));
-    }
-    if (data.type === 'leaf') {
-        if (typeof data.data !== 'object' ||
-            data.data === null ||
-            Array.isArray(data.data)) {
-            throw new Error('object must be a non-null object');
-        }
-        typeValidate3(data.data, "".concat(path, ".data"));
-    }
-    else if (data.type === 'branch') {
-        if (!Array.isArray(data.data)) {
-            throw new Error("".concat(path, ".data must be an array"));
-        }
-    }
-    else {
-        throw new Error("".concat(path, ".type must be onew of {'branch', 'leaf'}"));
-    }
-}
-function typeValidate(data) {
-    if (typeof data !== 'object' || data === null) {
-        throw new Error('object must be a non-null object');
-    }
-    var grid = data.grid, panels = data.panels, activeGroup = data.activeGroup, floatingGroups = data.floatingGroups;
-    if (typeof grid !== 'object' || grid === null) {
-        throw new Error("'.grid' must be a non-null object");
-    }
-    if (typeof grid.height !== 'number') {
-        throw new Error("'.grid.height' must be a number");
-    }
-    if (typeof grid.width !== 'number') {
-        throw new Error("'.grid.width' must be a number");
-    }
-    if (typeof grid.root !== 'object' || grid.root === null) {
-        throw new Error("'.grid.root' must be a non-null object");
-    }
-    if (grid.root.type !== 'branch') {
-        throw new Error(".grid.root.type must be of type 'branch'");
-    }
-    if (grid.orientation !== splitview_1.Orientation.HORIZONTAL &&
-        grid.orientation !== splitview_1.Orientation.VERTICAL) {
-        throw new Error("'.grid.width' must be one of {".concat(splitview_1.Orientation.HORIZONTAL, ", ").concat(splitview_1.Orientation.VERTICAL, "}"));
-    }
-    typeValidate2(grid.root, '.grid.root');
-}
-var DockviewComponent = /** @class */ (function (_super) {
-    __extends(DockviewComponent, _super);
-    function DockviewComponent(options) {
-        var _this = _super.call(this, {
-            proportionalLayout: true,
-            orientation: options.orientation || splitview_1.Orientation.HORIZONTAL,
-            styles: options.styles,
-            parentElement: options.parentElement,
-        }) || this;
-        _this.nextGroupId = (0, math_1.sequentialNumberGenerator)();
-        _this._deserializer = new deserializer_1.DefaultDockviewDeserialzier(_this);
-        _this.watermark = null;
-        _this._onWillDragPanel = new events_1.Emitter();
-        _this.onWillDragPanel = _this._onWillDragPanel.event;
-        _this._onWillDragGroup = new events_1.Emitter();
-        _this.onWillDragGroup = _this._onWillDragGroup.event;
-        _this._onDidDrop = new events_1.Emitter();
-        _this.onDidDrop = _this._onDidDrop.event;
-        _this._onDidRemovePanel = new events_1.Emitter();
-        _this.onDidRemovePanel = _this._onDidRemovePanel.event;
-        _this._onDidAddPanel = new events_1.Emitter();
-        _this.onDidAddPanel = _this._onDidAddPanel.event;
-        _this._onDidLayoutFromJSON = new events_1.Emitter();
-        _this.onDidLayoutFromJSON = _this._onDidLayoutFromJSON.event;
-        _this._onDidActivePanelChange = new events_1.Emitter();
-        _this.onDidActivePanelChange = _this._onDidActivePanelChange.event;
-        _this.floatingGroups = [];
-        (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 () {
-            _this.updateWatermark();
-        }), events_1.Event.any(_this.onDidAddPanel, _this.onDidRemovePanel, _this.onDidActivePanelChange)(function () {
-            _this._bufferOnDidLayoutChange.fire();
-        }));
-        _this._options = options;
-        if (!_this.options.components) {
-            _this.options.components = {};
-        }
-        if (!_this.options.frameworkComponents) {
-            _this.options.frameworkComponents = {};
-        }
-        if (!_this.options.frameworkTabComponents) {
-            _this.options.frameworkTabComponents = {};
-        }
-        if (!_this.options.tabComponents) {
-            _this.options.tabComponents = {};
-        }
-        if (!_this.options.watermarkComponent &&
-            !_this.options.watermarkFrameworkComponent) {
-            _this.options.watermarkComponent = watermark_1.Watermark;
-        }
-        var dropTarget = new droptarget_1.Droptarget(_this.element, {
-            canDisplayOverlay: function (event, position) {
-                var data = (0, dataTransfer_1.getPanelData)();
-                if (data) {
-                    if (data.viewId !== _this.id) {
-                        return false;
-                    }
-                    if (position === 'center') {
-                        // center drop target is only allowed if there are no panels in the grid
-                        // floating panels are allowed
-                        return _this.gridview.length === 0;
-                    }
-                    return true;
-                }
-                if (_this.options.showDndOverlay) {
-                    if (position === 'center' && _this.gridview.length !== 0) {
-                        /**
-                         * for external events only show the four-corner drag overlays, disable
-                         * the center position so that external drag events can fall through to the group
-                         * and panel drop target handlers
-                         */
-                        return false;
-                    }
-                    return _this.options.showDndOverlay({
-                        nativeEvent: event,
-                        position: position,
-                        target: types_1.DockviewDropTargets.Edge,
-                        getData: dataTransfer_1.getPanelData,
-                    });
-                }
-                return false;
-            },
-            acceptedTargetZones: ['top', 'bottom', 'left', 'right', 'center'],
-            overlayModel: {
-                activationSize: { type: 'pixels', value: 10 },
-                size: { type: 'pixels', value: 20 },
-            },
-        });
-        _this.addDisposables(dropTarget.onDrop(function (event) {
-            var data = (0, dataTransfer_1.getPanelData)();
-            if (data) {
-                _this.moveGroupOrPanel(_this.orthogonalize(event.position), data.groupId, data.panelId || undefined, 'center');
-            }
-            else {
-                _this._onDidDrop.fire(__assign(__assign({}, event), { api: _this._api, group: null, getData: dataTransfer_1.getPanelData }));
-            }
-        }), dropTarget);
-        _this._api = new component_api_1.DockviewApi(_this);
-        _this.updateWatermark();
-        return _this;
-    }
-    Object.defineProperty(DockviewComponent.prototype, "orientation", {
-        get: function () {
-            return this.gridview.orientation;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(DockviewComponent.prototype, "totalPanels", {
-        get: function () {
-            return this.panels.length;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(DockviewComponent.prototype, "panels", {
-        get: function () {
-            return this.groups.flatMap(function (group) { return group.panels; });
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(DockviewComponent.prototype, "options", {
-        get: function () {
-            return this._options;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(DockviewComponent.prototype, "activePanel", {
-        get: function () {
-            var activeGroup = this.activeGroup;
-            if (!activeGroup) {
-                return undefined;
-            }
-            return activeGroup.activePanel;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    DockviewComponent.prototype.addFloatingGroup = function (item, coord, options) {
-        var _this = this;
-        var _a, _b, _c, _d, _e, _f;
-        var group;
-        if (item instanceof dockviewPanel_1.DockviewPanel) {
-            group = this.createGroup();
-            this.removePanel(item, {
-                removeEmptyGroup: true,
-                skipDispose: true,
-            });
-            group.model.openPanel(item);
-        }
-        else {
-            group = item;
-            var skip = typeof (options === null || options === void 0 ? void 0 : options.skipRemoveGroup) === 'boolean' &&
-                options.skipRemoveGroup;
-            if (!skip) {
-                this.doRemoveGroup(item, { skipDispose: true });
-            }
-        }
-        group.model.isFloating = true;
-        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;
-        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,
-            left: overlayLeft,
-            top: overlayTop,
-            minimumInViewportWidth: this.options.floatingGroupBounds === 'boundedWithinViewport'
-                ? undefined
-                : (_d = (_c = this.options.floatingGroupBounds) === null || _c === void 0 ? void 0 : _c.minimumWidthWithinViewport) !== null && _d !== void 0 ? _d : DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE,
-            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,
-        });
-        var el = group.element.querySelector('.void-container');
-        if (!el) {
-            throw new Error('failed to find drag handle');
-        }
-        overlay.setupDrag(el, {
-            inDragMode: typeof (options === null || options === void 0 ? void 0 : options.inDragMode) === 'boolean'
-                ? options.inDragMode
-                : false,
-        });
-        var floatingGroupPanel = new dockviewFloatingGroupPanel_1.DockviewFloatingGroupPanel(group, overlay);
-        var disposable = (0, dom_1.watchElementResize)(group.element, function (entry) {
-            var _a = entry.contentRect, width = _a.width, height = _a.height;
-            group.layout(width, height); // let the group know it's size is changing so it can fire events to the panel
-        });
-        floatingGroupPanel.addDisposables(overlay.onDidChange(function () {
-            // this is either a resize or a move
-            // to inform the panels .layout(...) the group with it's current size
-            // don't care about resize since the above watcher handles that
-            group.layout(group.height, group.width);
-        }), overlay.onDidChangeEnd(function () {
-            _this._bufferOnDidLayoutChange.fire();
-        }), group.onDidChange(function (event) {
-            overlay.setBounds({
-                height: event === null || event === void 0 ? void 0 : event.height,
-                width: event === null || event === void 0 ? void 0 : event.width,
-            });
-        }), {
-            dispose: function () {
-                disposable.dispose();
-                group.model.isFloating = false;
-                (0, array_1.remove)(_this.floatingGroups, floatingGroupPanel);
-                _this.updateWatermark();
-            },
-        });
-        this.floatingGroups.push(floatingGroupPanel);
-        this.updateWatermark();
-    };
-    DockviewComponent.prototype.orthogonalize = function (position) {
-        switch (position) {
-            case 'top':
-            case 'bottom':
-                if (this.gridview.orientation === splitview_1.Orientation.HORIZONTAL) {
-                    // we need to add to a vertical splitview but the current root is a horizontal splitview.
-                    // insert a vertical splitview at the root level and add the existing view as a child
-                    this.gridview.insertOrthogonalSplitviewAtRoot();
-                }
-                break;
-            case 'left':
-            case 'right':
-                if (this.gridview.orientation === splitview_1.Orientation.VERTICAL) {
-                    // we need to add to a horizontal splitview but the current root is a vertical splitview.
-                    // insert a horiziontal splitview at the root level and add the existing view as a child
-                    this.gridview.insertOrthogonalSplitviewAtRoot();
-                }
-                break;
-            default:
-                break;
-        }
-        switch (position) {
-            case 'top':
-            case 'left':
-            case 'center':
-                return this.createGroupAtLocation([0]); // insert into first position
-            case 'bottom':
-            case 'right':
-                return this.createGroupAtLocation([this.gridview.length]); // insert into last position
-            default:
-                throw new Error("unsupported position ".concat(position));
-        }
-    };
-    DockviewComponent.prototype.updateOptions = function (options) {
-        var e_1, _a;
-        var _b, _c;
-        var hasOrientationChanged = typeof options.orientation === 'string' &&
-            this.gridview.orientation !== options.orientation;
-        var hasFloatingGroupOptionsChanged = options.floatingGroupBounds !== undefined &&
-            options.floatingGroupBounds !== this.options.floatingGroupBounds;
-        this._options = __assign(__assign({}, this.options), options);
-        if (hasOrientationChanged) {
-            this.gridview.orientation = options.orientation;
-        }
-        if (hasFloatingGroupOptionsChanged) {
-            try {
-                for (var _d = __values(this.floatingGroups), _e = _d.next(); !_e.done; _e = _d.next()) {
-                    var group = _e.value;
-                    switch (this.options.floatingGroupBounds) {
-                        case 'boundedWithinViewport':
-                            group.overlay.minimumInViewportHeight = undefined;
-                            group.overlay.minimumInViewportWidth = undefined;
-                            break;
-                        case undefined:
-                            group.overlay.minimumInViewportHeight =
-                                DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE;
-                            group.overlay.minimumInViewportWidth =
-                                DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE;
-                            break;
-                        default:
-                            group.overlay.minimumInViewportHeight =
-                                (_b = this.options.floatingGroupBounds) === null || _b === void 0 ? void 0 : _b.minimumHeightWithinViewport;
-                            group.overlay.minimumInViewportWidth =
-                                (_c = this.options.floatingGroupBounds) === null || _c === void 0 ? void 0 : _c.minimumWidthWithinViewport;
-                    }
-                    group.overlay.setBounds({});
-                }
-            }
-            catch (e_1_1) { e_1 = { error: e_1_1 }; }
-            finally {
-                try {
-                    if (_e && !_e.done && (_a = _d.return)) _a.call(_d);
-                }
-                finally { if (e_1) throw e_1.error; }
-            }
-        }
-        this.layout(this.gridview.width, this.gridview.height, true);
-    };
-    DockviewComponent.prototype.layout = function (width, height, forceResize) {
-        var e_2, _a;
-        _super.prototype.layout.call(this, width, height, forceResize);
-        if (this.floatingGroups) {
-            try {
-                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 }; }
-            finally {
-                try {
-                    if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
-                }
-                finally { if (e_2) throw e_2.error; }
-            }
-        }
-    };
-    DockviewComponent.prototype.focus = function () {
-        var _a;
-        (_a = this.activeGroup) === null || _a === void 0 ? void 0 : _a.focus();
-    };
-    DockviewComponent.prototype.getGroupPanel = function (id) {
-        return this.panels.find(function (panel) { return panel.id === id; });
-    };
-    DockviewComponent.prototype.setActivePanel = function (panel) {
-        this.doSetGroupActive(panel.group);
-        panel.group.model.openPanel(panel);
-    };
-    DockviewComponent.prototype.moveToNext = function (options) {
-        var _a;
-        if (options === void 0) { options = {}; }
-        if (!options.group) {
-            if (!this.activeGroup) {
-                return;
-            }
-            options.group = this.activeGroup;
-        }
-        if (options.includePanel && options.group) {
-            if (options.group.activePanel !==
-                options.group.panels[options.group.panels.length - 1]) {
-                options.group.model.moveToNext({ suppressRoll: true });
-                return;
-            }
-        }
-        var location = (0, gridview_1.getGridLocation)(options.group.element);
-        var next = (_a = this.gridview.next(location)) === null || _a === void 0 ? void 0 : _a.view;
-        this.doSetGroupActive(next);
-    };
-    DockviewComponent.prototype.moveToPrevious = function (options) {
-        var _a;
-        if (options === void 0) { options = {}; }
-        if (!options.group) {
-            if (!this.activeGroup) {
-                return;
-            }
-            options.group = this.activeGroup;
-        }
-        if (options.includePanel && options.group) {
-            if (options.group.activePanel !== options.group.panels[0]) {
-                options.group.model.moveToPrevious({ suppressRoll: true });
-                return;
-            }
-        }
-        var location = (0, gridview_1.getGridLocation)(options.group.element);
-        var next = (_a = this.gridview.previous(location)) === null || _a === void 0 ? void 0 : _a.view;
-        if (next) {
-            this.doSetGroupActive(next);
-        }
-    };
-    /**
-     * Serialize the current state of the layout
-     *
-     * @returns A JSON respresentation of the layout
-     */
-    DockviewComponent.prototype.toJSON = function () {
-        var _a;
-        var data = this.gridview.serialize();
-        var panels = this.panels.reduce(function (collection, panel) {
-            collection[panel.id] = panel.toJSON();
-            return collection;
-        }, {});
-        var floats = this.floatingGroups.map(function (floatingGroup) {
-            return {
-                data: floatingGroup.group.toJSON(),
-                position: floatingGroup.overlay.toJSON(),
-            };
-        });
-        var result = {
-            grid: data,
-            panels: panels,
-            activeGroup: (_a = this.activeGroup) === null || _a === void 0 ? void 0 : _a.id,
-        };
-        if (floats.length > 0) {
-            result.floatingGroups = floats;
-        }
-        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 _this = this;
-        var _g;
-        this.clear();
-        if (typeof data !== 'object' || data === null) {
-            throw new Error('serialized layout must be a non-null object');
-        }
-        var grid = data.grid, panels = data.panels, activeGroup = data.activeGroup;
-        if (grid.root.type !== 'branch' || !Array.isArray(grid.root.data)) {
-            throw new Error('root must be of type branch');
-        }
-        try {
-            // take note of the existing dimensions
-            var width = this.width;
-            var height = this.height;
-            var createGroupFromSerializedState_1 = function (data) {
-                var e_9, _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');
-                }
-                var group = _this.createGroup({
-                    id: id,
-                    locked: !!locked,
-                    hideHeader: !!hideHeader,
-                });
-                var createdPanels = [];
-                try {
-                    for (var views_1 = __values(views), views_1_1 = views_1.next(); !views_1_1.done; views_1_1 = views_1.next()) {
-                        var child = views_1_1.value;
-                        /**
-                         * Run the deserializer step seperately since this may fail to due corrupted external state.
-                         * In running this section first we avoid firing lots of 'add' events in the event of a failure
-                         * due to a corruption of input data.
-                         */
-                        var panel = _this._deserializer.fromJSON(panels[child], group);
-                        createdPanels.push(panel);
-                    }
-                }
-                catch (e_9_1) { e_9 = { error: e_9_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; }
-                }
-                _this._onDidAddGroup.fire(group);
-                for (var i = 0; i < views.length; i++) {
-                    var panel = createdPanels[i];
-                    var isActive = typeof activeView === 'string' &&
-                        activeView === panel.id;
-                    group.model.openPanel(panel, {
-                        skipSetPanelActive: !isActive,
-                        skipSetGroupActive: true,
-                    });
-                }
-                if (!group.activePanel && group.panels.length > 0) {
-                    group.model.openPanel(group.panels[group.panels.length - 1], {
-                        skipSetGroupActive: true,
-                    });
-                }
-                return group;
-            };
-            this.gridview.deserialize(grid, {
-                fromJSON: function (node) {
-                    return createGroupFromSerializedState_1(node.data);
-                },
-            });
-            this.layout(width, height, true);
-            var serializedFloatingGroups = (_g = data.floatingGroups) !== null && _g !== void 0 ? _g : [];
-            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;
-                    var data_1 = serializedFloatingGroup.data, position = serializedFloatingGroup.position;
-                    var group = createGroupFromSerializedState_1(data_1);
-                    this.addFloatingGroup(group, {
-                        x: position.left,
-                        y: position.top,
-                        height: position.height,
-                        width: position.width,
-                    }, { skipRemoveGroup: true, inDragMode: false });
-                }
-            }
-            catch (e_3_1) { e_3 = { error: e_3_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; }
-            }
-            try {
-                for (var _h = __values(this.floatingGroups), _j = _h.next(); !_j.done; _j = _h.next()) {
-                    var floatingGroup = _j.value;
-                    floatingGroup.overlay.setBounds();
-                }
-            }
-            catch (e_4_1) { e_4 = { error: e_4_1 }; }
-            finally {
-                try {
-                    if (_j && !_j.done && (_b = _h.return)) _b.call(_h);
-                }
-                finally { if (e_4) throw e_4.error; }
-            }
-            if (typeof activeGroup === 'string') {
-                var panel = this.getPanel(activeGroup);
-                if (panel) {
-                    this.doSetGroupActive(panel);
-                }
-            }
-        }
-        catch (err) {
-            try {
-                /**
-                 * 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;
-                    try {
-                        for (var _m = (e_6 = void 0, __values(group.panels)), _o = _m.next(); !_o.done; _o = _m.next()) {
-                            var panel = _o.value;
-                            this.removePanel(panel, {
-                                removeEmptyGroup: false,
-                                skipDispose: false,
-                            });
-                        }
-                    }
-                    catch (e_6_1) { e_6 = { error: e_6_1 }; }
-                    finally {
-                        try {
-                            if (_o && !_o.done && (_d = _m.return)) _d.call(_m);
-                        }
-                        finally { if (e_6) throw e_6.error; }
-                    }
-                }
-            }
-            catch (e_5_1) { e_5 = { error: e_5_1 }; }
-            finally {
-                try {
-                    if (_l && !_l.done && (_c = _k.return)) _c.call(_k);
-                }
-                finally { if (e_5) throw e_5.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;
-                    group.dispose();
-                    this._groups.delete(group.id);
-                    this._onDidRemoveGroup.fire(group);
-                }
-            }
-            catch (e_7_1) { e_7 = { error: e_7_1 }; }
-            finally {
-                try {
-                    if (_q && !_q.done && (_e = _p.return)) _e.call(_p);
-                }
-                finally { if (e_7) throw e_7.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;
-                    floatingGroup.dispose();
-                }
-            }
-            catch (e_8_1) { e_8 = { error: e_8_1 }; }
-            finally {
-                try {
-                    if (_s && !_s.done && (_f = _r.return)) _f.call(_r);
-                }
-                finally { if (e_8) throw e_8.error; }
-            }
-            // fires clean-up events and clears the underlying HTML gridview.
-            this.clear();
-            /**
-             * even though we have cleaned-up we still want to inform the caller of their error
-             * and we'll do this through re-throwing the original error since afterall you would
-             * expect trying to load a corrupted layout to result in an error and not silently fail...
-             */
-            throw err;
-        }
-        this._onDidLayoutFromJSON.fire();
-    };
-    DockviewComponent.prototype.clear = function () {
-        var e_10, _a;
-        var groups = Array.from(this._groups.values()).map(function (_) { return _.value; });
-        var hasActiveGroup = !!this.activeGroup;
-        var hasActivePanel = !!this.activePanel;
-        try {
-            for (var groups_1 = __values(groups), groups_1_1 = groups_1.next(); !groups_1_1.done; groups_1_1 = groups_1.next()) {
-                var group = groups_1_1.value;
-                // remove the group will automatically remove the panels
-                this.removeGroup(group, { skipActive: true });
-            }
-        }
-        catch (e_10_1) { e_10 = { error: e_10_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; }
-        }
-        if (hasActiveGroup) {
-            this.doSetGroupActive(undefined);
-        }
-        if (hasActivePanel) {
-            this._onDidActivePanelChange.fire(undefined);
-        }
-        this.gridview.clear();
-    };
-    DockviewComponent.prototype.closeAllGroups = function () {
-        var e_11, _a;
-        try {
-            for (var _b = __values(this._groups.entries()), _c = _b.next(); !_c.done; _c = _b.next()) {
-                var entry = _c.value;
-                var _d = __read(entry, 2), _ = _d[0], group = _d[1];
-                group.value.model.closeAllPanels();
-            }
-        }
-        catch (e_11_1) { e_11 = { error: e_11_1 }; }
-        finally {
-            try {
-                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
-            }
-            finally { if (e_11) throw e_11.error; }
-        }
-    };
-    DockviewComponent.prototype.addPanel = function (options) {
-        var _a, _b;
-        if (this.panels.find(function (_) { return _.id === options.id; })) {
-            throw new Error("panel with id ".concat(options.id, " already exists"));
-        }
-        var referenceGroup;
-        if (options.position && options.floating) {
-            throw new Error('you can only provide one of: position, floating as arguments to .addPanel(...)');
-        }
-        if (options.position) {
-            if ((0, options_1.isPanelOptionsWithPanel)(options.position)) {
-                var referencePanel = typeof options.position.referencePanel === 'string'
-                    ? this.getGroupPanel(options.position.referencePanel)
-                    : options.position.referencePanel;
-                if (!referencePanel) {
-                    throw new Error("referencePanel ".concat(options.position.referencePanel, " does not exist"));
-                }
-                referenceGroup = this.findGroup(referencePanel);
-            }
-            else if ((0, options_1.isPanelOptionsWithGroup)(options.position)) {
-                referenceGroup =
-                    typeof options.position.referenceGroup === 'string'
-                        ? (_a = this._groups.get(options.position.referenceGroup)) === null || _a === void 0 ? void 0 : _a.value
-                        : options.position.referenceGroup;
-                if (!referenceGroup) {
-                    throw new Error("referencePanel ".concat(options.position.referenceGroup, " does not exist"));
-                }
-            }
-            else {
-                var group = this.orthogonalize((0, droptarget_1.directionToPosition)(options.position.direction));
-                var panel_1 = this.createPanel(options, group);
-                group.model.openPanel(panel_1);
-                return panel_1;
-            }
-        }
-        else {
-            referenceGroup = this.activeGroup;
-        }
-        var panel;
-        if (referenceGroup) {
-            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();
-                panel = this.createPanel(options, group);
-                group.model.openPanel(panel);
-                var o = typeof options.floating === 'object' &&
-                    options.floating !== null
-                    ? options.floating
-                    : {};
-                this.addFloatingGroup(group, o, {
-                    inDragMode: false,
-                    skipRemoveGroup: true,
-                });
-            }
-            else if (referenceGroup.api.isFloating || target === 'center') {
-                panel = this.createPanel(options, referenceGroup);
-                referenceGroup.model.openPanel(panel);
-            }
-            else {
-                var location_1 = (0, gridview_1.getGridLocation)(referenceGroup.element);
-                var relativeLocation = (0, gridview_1.getRelativeLocation)(this.gridview.orientation, location_1, target);
-                var group = this.createGroupAtLocation(relativeLocation);
-                panel = this.createPanel(options, group);
-                group.model.openPanel(panel);
-            }
-        }
-        else if (options.floating) {
-            var group = this.createGroup();
-            panel = this.createPanel(options, group);
-            group.model.openPanel(panel);
-            var o = typeof options.floating === 'object' &&
-                options.floating !== null
-                ? options.floating
-                : {};
-            this.addFloatingGroup(group, o, {
-                inDragMode: false,
-                skipRemoveGroup: true,
-            });
-        }
-        else {
-            var group = this.createGroupAtLocation();
-            panel = this.createPanel(options, group);
-            group.model.openPanel(panel);
-        }
-        return panel;
-    };
-    DockviewComponent.prototype.removePanel = function (panel, options) {
-        if (options === void 0) { options = {
-            removeEmptyGroup: true,
-            skipDispose: false,
-        }; }
-        var group = panel.group;
-        if (!group) {
-            throw new Error("cannot remove panel ".concat(panel.id, ". it's missing a group."));
-        }
-        group.model.removePanel(panel);
-        if (!options.skipDispose) {
-            panel.dispose();
-        }
-        if (group.size === 0 && options.removeEmptyGroup) {
-            this.removeGroup(group);
-        }
-    };
-    DockviewComponent.prototype.createWatermarkComponent = function () {
-        var _a;
-        return (0, componentFactory_1.createComponent)('watermark-id', 'watermark-name', this.options.watermarkComponent
-            ? { 'watermark-name': this.options.watermarkComponent }
-            : {}, this.options.watermarkFrameworkComponent
-            ? { 'watermark-name': this.options.watermarkFrameworkComponent }
-            : {}, (_a = this.options.frameworkComponentFactory) === null || _a === void 0 ? void 0 : _a.watermark);
-    };
-    DockviewComponent.prototype.updateWatermark = function () {
-        var _a, _b;
-        if (this.groups.filter(function (x) { return !x.api.isFloating; }).length === 0) {
-            if (!this.watermark) {
-                this.watermark = this.createWatermarkComponent();
-                this.watermark.init({
-                    containerApi: new component_api_1.DockviewApi(this),
-                });
-                var watermarkContainer = document.createElement('div');
-                watermarkContainer.className = 'dv-watermark-container';
-                watermarkContainer.appendChild(this.watermark.element);
-                this.gridview.element.appendChild(watermarkContainer);
-            }
-        }
-        else if (this.watermark) {
-            this.watermark.element.parentElement.remove();
-            (_b = (_a = this.watermark).dispose) === null || _b === void 0 ? void 0 : _b.call(_a);
-            this.watermark = null;
-        }
-    };
-    DockviewComponent.prototype.addGroup = function (options) {
-        var _a;
-        var group = this.createGroup();
-        if (options) {
-            var referenceGroup = void 0;
-            if ((0, options_1.isGroupOptionsWithPanel)(options)) {
-                var referencePanel = typeof options.referencePanel === 'string'
-                    ? this.panels.find(function (panel) { return panel.id === options.referencePanel; })
-                    : options.referencePanel;
-                if (!referencePanel) {
-                    throw new Error("reference panel ".concat(options.referencePanel, " does not exist"));
-                }
-                referenceGroup = this.findGroup(referencePanel);
-                if (!referenceGroup) {
-                    throw new Error("reference group for reference panel ".concat(options.referencePanel, " does not exist"));
-                }
-            }
-            else if ((0, options_1.isGroupOptionsWithGroup)(options)) {
-                referenceGroup =
-                    typeof options.referenceGroup === 'string'
-                        ? (_a = this._groups.get(options.referenceGroup)) === null || _a === void 0 ? void 0 : _a.value
-                        : options.referenceGroup;
-                if (!referenceGroup) {
-                    throw new Error("reference group ".concat(options.referenceGroup, " does not exist"));
-                }
-            }
-            else {
-                var group_1 = this.orthogonalize((0, droptarget_1.directionToPosition)(options.direction));
-                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);
-            return group;
-        }
-        else {
-            this.doAddGroup(group);
-            return group;
-        }
-    };
-    DockviewComponent.prototype.removeGroup = function (group, options) {
-        var e_12, _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_12_1) { e_12 = { error: e_12_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; }
-        }
-        this.doRemoveGroup(group, options);
-    };
-    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);
-                // TODO: fire group removed event?
-            }
-            floatingGroup.dispose();
-            return floatingGroup.group;
-        }
-        return _super.prototype.doRemoveGroup.call(this, group, options);
-    };
-    DockviewComponent.prototype.moveGroupOrPanel = function (destinationGroup, sourceGroupId, sourceItemId, destinationTarget, destinationIndex) {
-        var _a;
-        var sourceGroup = sourceGroupId
-            ? (_a = this._groups.get(sourceGroupId)) === null || _a === void 0 ? void 0 : _a.value
-            : undefined;
-        if (sourceItemId === undefined) {
-            if (sourceGroup) {
-                this.moveGroup(sourceGroup, destinationGroup, destinationTarget);
-            }
-            return;
-        }
-        if (!destinationTarget || destinationTarget === 'center') {
-            var groupItem = (sourceGroup === null || sourceGroup === void 0 ? void 0 : sourceGroup.model.removePanel(sourceItemId)) ||
-                this.panels.find(function (panel) { return panel.id === sourceItemId; });
-            if (!groupItem) {
-                throw new Error("No panel with id ".concat(sourceItemId));
-            }
-            if ((sourceGroup === null || sourceGroup === void 0 ? void 0 : sourceGroup.model.size) === 0) {
-                this.doRemoveGroup(sourceGroup);
-            }
-            destinationGroup.model.openPanel(groupItem, {
-                index: destinationIndex,
-            });
-        }
-        else {
-            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 _b = __read((0, array_1.tail)(targetLocation), 2), targetParentLocation = _b[0], to = _b[1];
-                var isFloating = this.floatingGroups.find(function (x) { return x.group === sourceGroup; });
-                if (!isFloating) {
-                    var sourceLocation = (0, gridview_1.getGridLocation)(sourceGroup.element);
-                    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);
-                    }
-                }
-                // source group will become empty so delete the group
-                var targetGroup = 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);
-            }
-            else {
-                var groupItem = (sourceGroup === null || sourceGroup === void 0 ? void 0 : sourceGroup.model.removePanel(sourceItemId)) ||
-                    this.panels.find(function (panel) { return panel.id === sourceItemId; });
-                if (!groupItem) {
-                    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);
-            }
-        }
-    };
-    DockviewComponent.prototype.moveGroup = function (sourceGroup, referenceGroup, target) {
-        var e_13, _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);
-                });
-                if ((sourceGroup === null || sourceGroup === void 0 ? void 0 : sourceGroup.model.size) === 0) {
-                    this.doRemoveGroup(sourceGroup);
-                }
-                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,
-                        });
-                    }
-                }
-                catch (e_13_1) { e_13 = { error: e_13_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; }
-                }
-            }
-            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));
-                }
-                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);
-            }
-        }
-    };
-    DockviewComponent.prototype.doSetGroupActive = function (group, skipFocus) {
-        var _a, _b;
-        var isGroupAlreadyFocused = this._activeGroup === group;
-        _super.prototype.doSetGroupActive.call(this, group, skipFocus);
-        if (!isGroupAlreadyFocused && ((_a = this._activeGroup) === null || _a === void 0 ? void 0 : _a.activePanel)) {
-            this._onDidActivePanelChange.fire((_b = this._activeGroup) === null || _b === void 0 ? void 0 : _b.activePanel);
-        }
-    };
-    DockviewComponent.prototype.createGroup = function (options) {
-        var _this = this;
-        if (!options) {
-            options = {};
-        }
-        var id = options === null || options === void 0 ? void 0 : options.id;
-        if (id && this._groups.has(options.id)) {
-            console.warn("Duplicate group id ".concat(options === null || options === void 0 ? void 0 : options.id, ". reassigning group id to avoid errors"));
-            id = undefined;
-        }
-        if (!id) {
-            id = this.nextGroupId.next();
-            while (this._groups.has(id)) {
-                id = this.nextGroupId.next();
-            }
-        }
-        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
-        if (!this._groups.has(view.id)) {
-            var disposable = new lifecycle_1.CompositeDisposable(view.model.onTabDragStart(function (event) {
-                _this._onWillDragPanel.fire(event);
-            }), view.model.onGroupDragStart(function (event) {
-                _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);
-            }), view.model.onDidDrop(function (event) {
-                _this._onDidDrop.fire(__assign(__assign({}, event), { api: _this._api, group: view }));
-            }), view.model.onDidAddPanel(function (event) {
-                _this._onDidAddPanel.fire(event.panel);
-            }), view.model.onDidRemovePanel(function (event) {
-                _this._onDidRemovePanel.fire(event.panel);
-            }), view.model.onDidActivePanelChange(function (event) {
-                _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
-        view.initialize();
-        return view;
-    };
-    DockviewComponent.prototype.createPanel = function (options, group) {
-        var contentComponent = options.component;
-        var tabComponent = options.tabComponent || 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);
-        panel.init({
-            title: options.title || options.id,
-            params: (options === null || options === void 0 ? void 0 : options.params) || {},
-        });
-        return panel;
-    };
-    DockviewComponent.prototype.createGroupAtLocation = function (location) {
-        if (location === void 0) { location = [0]; }
-        var group = this.createGroup();
-        this.doAddGroup(group, location);
-        return group;
-    };
-    DockviewComponent.prototype.findGroup = function (panel) {
-        var _a;
-        return (_a = Array.from(this._groups.values()).find(function (group) {
-            return group.value.model.containsPanel(panel);
-        })) === null || _a === void 0 ? void 0 : _a.value;
-    };
-    return DockviewComponent;
-}(baseComponentGridview_1.BaseGrid));
-exports.DockviewComponent = DockviewComponent;
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    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");
+var droptarget_1 = require("../dnd/droptarget");
+var array_1 = require("../array");
+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");
+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 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");
+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"));
+    }
+    if (typeof data.activeView !== 'string' ||
+        typeof data.activeView !== 'undefined') {
+        throw new Error("".concat(path, ".activeView must be a string of undefined"));
+    }
+}
+function typeValidate2(data, path) {
+    if (typeof data.size !== 'number' && typeof data.size !== 'undefined') {
+        throw new Error("".concat(path, ".size must be a number or undefined"));
+    }
+    if (typeof data.visible !== 'boolean' &&
+        typeof data.visible !== 'undefined') {
+        throw new Error("".concat(path, ".visible must be a boolean or undefined"));
+    }
+    if (data.type === 'leaf') {
+        if (typeof data.data !== 'object' ||
+            data.data === null ||
+            Array.isArray(data.data)) {
+            throw new Error('object must be a non-null object');
+        }
+        typeValidate3(data.data, "".concat(path, ".data"));
+    }
+    else if (data.type === 'branch') {
+        if (!Array.isArray(data.data)) {
+            throw new Error("".concat(path, ".data must be an array"));
+        }
+    }
+    else {
+        throw new Error("".concat(path, ".type must be onew of {'branch', 'leaf'}"));
+    }
+}
+function typeValidate(data) {
+    if (typeof data !== 'object' || data === null) {
+        throw new Error('object must be a non-null object');
+    }
+    var grid = data.grid, panels = data.panels, activeGroup = data.activeGroup, floatingGroups = data.floatingGroups;
+    if (typeof grid !== 'object' || grid === null) {
+        throw new Error("'.grid' must be a non-null object");
+    }
+    if (typeof grid.height !== 'number') {
+        throw new Error("'.grid.height' must be a number");
+    }
+    if (typeof grid.width !== 'number') {
+        throw new Error("'.grid.width' must be a number");
+    }
+    if (typeof grid.root !== 'object' || grid.root === null) {
+        throw new Error("'.grid.root' must be a non-null object");
+    }
+    if (grid.root.type !== 'branch') {
+        throw new Error(".grid.root.type must be of type 'branch'");
+    }
+    if (grid.orientation !== splitview_1.Orientation.HORIZONTAL &&
+        grid.orientation !== splitview_1.Orientation.VERTICAL) {
+        throw new Error("'.grid.width' must be one of {".concat(splitview_1.Orientation.HORIZONTAL, ", ").concat(splitview_1.Orientation.VERTICAL, "}"));
+    }
+    typeValidate2(grid.root, '.grid.root');
+}
+var DockviewComponent = /** @class */ (function (_super) {
+    __extends(DockviewComponent, _super);
+    function DockviewComponent(options) {
+        var _a;
+        var _this = _super.call(this, {
+            proportionalLayout: true,
+            orientation: (_a = options.orientation) !== null && _a !== void 0 ? _a : splitview_1.Orientation.HORIZONTAL,
+            styles: options.styles,
+            parentElement: options.parentElement,
+            disableAutoResizing: options.disableAutoResizing,
+        }) || this;
+        _this.nextGroupId = (0, math_1.sequentialNumberGenerator)();
+        _this._deserializer = new deserializer_1.DefaultDockviewDeserialzier(_this);
+        _this.watermark = null;
+        _this._onWillDragPanel = new events_1.Emitter();
+        _this.onWillDragPanel = _this._onWillDragPanel.event;
+        _this._onWillDragGroup = new events_1.Emitter();
+        _this.onWillDragGroup = _this._onWillDragGroup.event;
+        _this._onDidDrop = new events_1.Emitter();
+        _this.onDidDrop = _this._onDidDrop.event;
+        _this._onDidRemovePanel = new events_1.Emitter();
+        _this.onDidRemovePanel = _this._onDidRemovePanel.event;
+        _this._onDidAddPanel = new events_1.Emitter();
+        _this.onDidAddPanel = _this._onDidAddPanel.event;
+        _this._onDidLayoutFromJSON = new events_1.Emitter();
+        _this.onDidLayoutFromJSON = _this._onDidLayoutFromJSON.event;
+        _this._onDidActivePanelChange = new events_1.Emitter();
+        _this.onDidActivePanelChange = _this._onDidActivePanelChange.event;
+        _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);
+        (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) {
+            _this.options.components = {};
+        }
+        if (!_this.options.frameworkComponents) {
+            _this.options.frameworkComponents = {};
+        }
+        if (!_this.options.frameworkTabComponents) {
+            _this.options.frameworkTabComponents = {};
+        }
+        if (!_this.options.tabComponents) {
+            _this.options.tabComponents = {};
+        }
+        if (!_this.options.watermarkComponent &&
+            !_this.options.watermarkFrameworkComponent) {
+            _this.options.watermarkComponent = watermark_1.Watermark;
+        }
+        var dropTarget = new droptarget_1.Droptarget(_this.element, {
+            canDisplayOverlay: function (event, position) {
+                var data = (0, dataTransfer_1.getPanelData)();
+                if (data) {
+                    if (data.viewId !== _this.id) {
+                        return false;
+                    }
+                    if (position === 'center') {
+                        // center drop target is only allowed if there are no panels in the grid
+                        // floating panels are allowed
+                        return _this.gridview.length === 0;
+                    }
+                    return true;
+                }
+                if (_this.options.showDndOverlay) {
+                    if (position === 'center' && _this.gridview.length !== 0) {
+                        /**
+                         * for external events only show the four-corner drag overlays, disable
+                         * the center position so that external drag events can fall through to the group
+                         * and panel drop target handlers
+                         */
+                        return false;
+                    }
+                    return _this.options.showDndOverlay({
+                        nativeEvent: event,
+                        position: position,
+                        target: types_1.DockviewDropTargets.Edge,
+                        getData: dataTransfer_1.getPanelData,
+                    });
+                }
+                return false;
+            },
+            acceptedTargetZones: ['top', 'bottom', 'left', 'right', 'center'],
+            overlayModel: {
+                activationSize: { type: 'pixels', value: 10 },
+                size: { type: 'pixels', value: 20 },
+            },
+        });
+        _this.addDisposables(dropTarget.onDrop(function (event) {
+            var _a;
+            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');
+            }
+            else {
+                _this._onDidDrop.fire(__assign(__assign({}, event), { api: _this._api, group: null, getData: dataTransfer_1.getPanelData }));
+            }
+        }), dropTarget);
+        _this._api = new component_api_1.DockviewApi(_this);
+        _this.updateWatermark();
+        return _this;
+    }
+    Object.defineProperty(DockviewComponent.prototype, "orientation", {
+        get: function () {
+            return this.gridview.orientation;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DockviewComponent.prototype, "totalPanels", {
+        get: function () {
+            return this.panels.length;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DockviewComponent.prototype, "panels", {
+        get: function () {
+            return this.groups.flatMap(function (group) { return group.panels; });
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DockviewComponent.prototype, "options", {
+        get: function () {
+            return this._options;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DockviewComponent.prototype, "activePanel", {
+        get: function () {
+            var activeGroup = this.activeGroup;
+            if (!activeGroup) {
+                return undefined;
+            }
+            return activeGroup.activePanel;
+        },
+        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;
+        var group;
+        if (item instanceof dockviewPanel_1.DockviewPanel) {
+            group = this.createGroup();
+            this.removePanel(item, {
+                removeEmptyGroup: true,
+                skipDispose: true,
+            });
+            group.model.openPanel(item);
+        }
+        else {
+            group = item;
+            var skip = typeof (options === null || options === void 0 ? void 0 : options.skipRemoveGroup) === 'boolean' &&
+                options.skipRemoveGroup;
+            if (!skip) {
+                this.doRemoveGroup(item, { skipDispose: true });
+            }
+        }
+        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,
+            height: (_a = coord === null || coord === void 0 ? void 0 : coord.height) !== null && _a !== void 0 ? _a : 300,
+            width: (_b = coord === null || coord === void 0 ? void 0 : coord.width) !== null && _b !== void 0 ? _b : 300,
+            left: overlayLeft,
+            top: overlayTop,
+            minimumInViewportWidth: 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,
+            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,
+        });
+        var el = group.element.querySelector('.void-container');
+        if (!el) {
+            throw new Error('failed to find drag handle');
+        }
+        overlay.setupDrag(el, {
+            inDragMode: typeof (options === null || options === void 0 ? void 0 : options.inDragMode) === 'boolean'
+                ? options.inDragMode
+                : false,
+        });
+        var floatingGroupPanel = new dockviewFloatingGroupPanel_1.DockviewFloatingGroupPanel(group, overlay);
+        var disposable = (0, dom_1.watchElementResize)(group.element, function (entry) {
+            var _a = entry.contentRect, width = _a.width, height = _a.height;
+            group.layout(width, height); // let the group know it's size is changing so it can fire events to the panel
+        });
+        floatingGroupPanel.addDisposables(overlay.onDidChange(function () {
+            // this is either a resize or a move
+            // to inform the panels .layout(...) the group with it's current size
+            // don't care about resize since the above watcher handles that
+            group.layout(group.height, group.width);
+        }), overlay.onDidChangeEnd(function () {
+            _this._bufferOnDidLayoutChange.fire();
+        }), group.onDidChange(function (event) {
+            overlay.setBounds({
+                height: event === null || event === void 0 ? void 0 : event.height,
+                width: event === null || event === void 0 ? void 0 : event.width,
+            });
+        }), {
+            dispose: function () {
+                disposable.dispose();
+                group.model.location = 'grid';
+                (0, array_1.remove)(_this._floatingGroups, floatingGroupPanel);
+                _this.updateWatermark();
+            },
+        });
+        this._floatingGroups.push(floatingGroupPanel);
+        this.updateWatermark();
+    };
+    DockviewComponent.prototype.orthogonalize = function (position) {
+        switch (position) {
+            case 'top':
+            case 'bottom':
+                if (this.gridview.orientation === splitview_1.Orientation.HORIZONTAL) {
+                    // we need to add to a vertical splitview but the current root is a horizontal splitview.
+                    // insert a vertical splitview at the root level and add the existing view as a child
+                    this.gridview.insertOrthogonalSplitviewAtRoot();
+                }
+                break;
+            case 'left':
+            case 'right':
+                if (this.gridview.orientation === splitview_1.Orientation.VERTICAL) {
+                    // we need to add to a horizontal splitview but the current root is a vertical splitview.
+                    // insert a horiziontal splitview at the root level and add the existing view as a child
+                    this.gridview.insertOrthogonalSplitviewAtRoot();
+                }
+                break;
+            default:
+                break;
+        }
+        switch (position) {
+            case 'top':
+            case 'left':
+            case 'center':
+                return this.createGroupAtLocation([0]); // insert into first position
+            case 'bottom':
+            case 'right':
+                return this.createGroupAtLocation([this.gridview.length]); // insert into last position
+            default:
+                throw new Error("unsupported position ".concat(position));
+        }
+    };
+    DockviewComponent.prototype.updateOptions = function (options) {
+        var e_3, _a;
+        var _b, _c;
+        var hasOrientationChanged = typeof options.orientation === 'string' &&
+            this.gridview.orientation !== options.orientation;
+        var hasFloatingGroupOptionsChanged = options.floatingGroupBounds !== undefined &&
+            options.floatingGroupBounds !== this.options.floatingGroupBounds;
+        this._options = __assign(__assign({}, this.options), options);
+        if (hasOrientationChanged) {
+            this.gridview.orientation = options.orientation;
+        }
+        if (hasFloatingGroupOptionsChanged) {
+            try {
+                for (var _d = __values(this._floatingGroups), _e = _d.next(); !_e.done; _e = _d.next()) {
+                    var group = _e.value;
+                    switch (this.options.floatingGroupBounds) {
+                        case 'boundedWithinViewport':
+                            group.overlay.minimumInViewportHeight = undefined;
+                            group.overlay.minimumInViewportWidth = undefined;
+                            break;
+                        case undefined:
+                            group.overlay.minimumInViewportHeight =
+                                constants_1.DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE;
+                            group.overlay.minimumInViewportWidth =
+                                constants_1.DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE;
+                            break;
+                        default:
+                            group.overlay.minimumInViewportHeight =
+                                (_b = this.options.floatingGroupBounds) === null || _b === void 0 ? void 0 : _b.minimumHeightWithinViewport;
+                            group.overlay.minimumInViewportWidth =
+                                (_c = this.options.floatingGroupBounds) === null || _c === void 0 ? void 0 : _c.minimumWidthWithinViewport;
+                    }
+                    group.overlay.setBounds({});
+                }
+            }
+            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_3) throw e_3.error; }
+            }
+        }
+        this.layout(this.gridview.width, this.gridview.height, true);
+    };
+    DockviewComponent.prototype.layout = function (width, height, forceResize) {
+        var e_4, _a;
+        _super.prototype.layout.call(this, width, height, forceResize);
+        if (this._floatingGroups) {
+            try {
+                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_4_1) { e_4 = { error: e_4_1 }; }
+            finally {
+                try {
+                    if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                }
+                finally { if (e_4) throw e_4.error; }
+            }
+        }
+    };
+    DockviewComponent.prototype.focus = function () {
+        var _a;
+        (_a = this.activeGroup) === null || _a === void 0 ? void 0 : _a.focus();
+    };
+    DockviewComponent.prototype.getGroupPanel = function (id) {
+        return this.panels.find(function (panel) { return panel.id === id; });
+    };
+    DockviewComponent.prototype.setActivePanel = function (panel) {
+        this.doSetGroupActive(panel.group);
+        panel.group.model.openPanel(panel);
+    };
+    DockviewComponent.prototype.moveToNext = function (options) {
+        var _a;
+        if (options === void 0) { options = {}; }
+        if (!options.group) {
+            if (!this.activeGroup) {
+                return;
+            }
+            options.group = this.activeGroup;
+        }
+        if (options.includePanel && options.group) {
+            if (options.group.activePanel !==
+                options.group.panels[options.group.panels.length - 1]) {
+                options.group.model.moveToNext({ suppressRoll: true });
+                return;
+            }
+        }
+        var location = (0, gridview_1.getGridLocation)(options.group.element);
+        var next = (_a = this.gridview.next(location)) === null || _a === void 0 ? void 0 : _a.view;
+        this.doSetGroupAndPanelActive(next);
+    };
+    DockviewComponent.prototype.moveToPrevious = function (options) {
+        var _a;
+        if (options === void 0) { options = {}; }
+        if (!options.group) {
+            if (!this.activeGroup) {
+                return;
+            }
+            options.group = this.activeGroup;
+        }
+        if (options.includePanel && options.group) {
+            if (options.group.activePanel !== options.group.panels[0]) {
+                options.group.model.moveToPrevious({ suppressRoll: true });
+                return;
+            }
+        }
+        var location = (0, gridview_1.getGridLocation)(options.group.element);
+        var next = (_a = this.gridview.previous(location)) === null || _a === void 0 ? void 0 : _a.view;
+        if (next) {
+            this.doSetGroupAndPanelActive(next);
+        }
+    };
+    /**
+     * Serialize the current state of the layout
+     *
+     * @returns A JSON respresentation of the layout
+     */
+    DockviewComponent.prototype.toJSON = function () {
+        var _a;
+        var data = this.gridview.serialize();
+        var panels = this.panels.reduce(function (collection, panel) {
+            collection[panel.id] = panel.toJSON();
+            return collection;
+        }, {});
+        var floats = this._floatingGroups.map(function (group) {
+            return {
+                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 = {
+            grid: data,
+            panels: panels,
+            activeGroup: (_a = this.activeGroup) === null || _a === void 0 ? void 0 : _a.id,
+        };
+        if (floats.length > 0) {
+            result.floatingGroups = floats;
+        }
+        if (popoutGroups.length > 0) {
+            result.popoutGroups = popoutGroups;
+        }
+        return result;
+    };
+    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;
+        this.clear();
+        if (typeof data !== 'object' || data === null) {
+            throw new Error('serialized layout must be a non-null object');
+        }
+        var grid = data.grid, panels = data.panels, activeGroup = data.activeGroup;
+        if (grid.root.type !== 'branch' || !Array.isArray(grid.root.data)) {
+            throw new Error('root must be of type branch');
+        }
+        try {
+            // take note of the existing dimensions
+            var width = this.width;
+            var height = this.height;
+            var createGroupFromSerializedState_1 = function (data) {
+                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');
+                }
+                var group = _this.createGroup({
+                    id: id,
+                    locked: !!locked,
+                    hideHeader: !!hideHeader,
+                });
+                var createdPanels = [];
+                try {
+                    for (var views_1 = __values(views), views_1_1 = views_1.next(); !views_1_1.done; views_1_1 = views_1.next()) {
+                        var child = views_1_1.value;
+                        /**
+                         * Run the deserializer step seperately since this may fail to due corrupted external state.
+                         * In running this section first we avoid firing lots of 'add' events in the event of a failure
+                         * due to a corruption of input data.
+                         */
+                        var panel = _this._deserializer.fromJSON(panels[child], group);
+                        createdPanels.push(panel);
+                    }
+                }
+                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_12) throw e_12.error; }
+                }
+                _this._onDidAddGroup.fire(group);
+                for (var i = 0; i < views.length; i++) {
+                    var panel = createdPanels[i];
+                    var isActive = typeof activeView === 'string' &&
+                        activeView === panel.id;
+                    group.model.openPanel(panel, {
+                        skipSetPanelActive: !isActive,
+                        skipSetGroupActive: true,
+                    });
+                }
+                if (!group.activePanel && group.panels.length > 0) {
+                    group.model.openPanel(group.panels[group.panels.length - 1], {
+                        skipSetGroupActive: true,
+                    });
+                }
+                return group;
+            };
+            this.gridview.deserialize(grid, {
+                fromJSON: function (node) {
+                    return createGroupFromSerializedState_1(node.data);
+                },
+            });
+            this.layout(width, height, true);
+            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;
+                    var data_1 = serializedFloatingGroup.data, position = serializedFloatingGroup.position;
+                    var group = createGroupFromSerializedState_1(data_1);
+                    this.addFloatingGroup(group, {
+                        x: position.left,
+                        y: position.top,
+                        height: position.height,
+                        width: position.width,
+                    }, { skipRemoveGroup: true, inDragMode: false });
+                }
+            }
+            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_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 _k = __values(this._floatingGroups), _l = _k.next(); !_l.done; _l = _k.next()) {
+                    var floatingGroup = _l.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);
+                }
+                finally { if (e_7) throw e_7.error; }
+            }
+            if (typeof activeGroup === 'string') {
+                var panel = this.getPanel(activeGroup);
+                if (panel) {
+                    this.doSetGroupAndPanelActive(panel);
+                }
+            }
+        }
+        catch (err) {
+            try {
+                /**
+                 * 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;
+                    try {
+                        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_9_1) { e_9 = { error: e_9_1 }; }
+                    finally {
+                        try {
+                            if (_q && !_q.done && (_e = _p.return)) _e.call(_p);
+                        }
+                        finally { if (e_9) throw e_9.error; }
+                    }
+                }
+            }
+            catch (e_8_1) { e_8 = { error: e_8_1 }; }
+            finally {
+                try {
+                    if (_o && !_o.done && (_d = _m.return)) _d.call(_m);
+                }
+                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 _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_10_1) { e_10 = { error: e_10_1 }; }
+            finally {
+                try {
+                    if (_s && !_s.done && (_f = _r.return)) _f.call(_r);
+                }
+                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;
+                    floatingGroup.dispose();
+                }
+            }
+            catch (e_11_1) { e_11 = { error: e_11_1 }; }
+            finally {
+                try {
+                    if (_u && !_u.done && (_g = _t.return)) _g.call(_t);
+                }
+                finally { if (e_11) throw e_11.error; }
+            }
+            // fires clean-up events and clears the underlying HTML gridview.
+            this.clear();
+            /**
+             * even though we have cleaned-up we still want to inform the caller of their error
+             * and we'll do this through re-throwing the original error since afterall you would
+             * expect trying to load a corrupted layout to result in an error and not silently fail...
+             */
+            throw err;
+        }
+        this._onDidLayoutFromJSON.fire();
+    };
+    DockviewComponent.prototype.clear = function () {
+        var e_13, _a;
+        var groups = Array.from(this._groups.values()).map(function (_) { return _.value; });
+        var hasActiveGroup = !!this.activeGroup;
+        var hasActivePanel = !!this.activePanel;
+        try {
+            for (var groups_1 = __values(groups), groups_1_1 = groups_1.next(); !groups_1_1.done; groups_1_1 = groups_1.next()) {
+                var group = groups_1_1.value;
+                // remove the group will automatically remove the panels
+                this.removeGroup(group, { skipActive: true });
+            }
+        }
+        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_13) throw e_13.error; }
+        }
+        if (hasActiveGroup) {
+            this.doSetGroupAndPanelActive(undefined);
+        }
+        if (hasActivePanel) {
+            this._onDidActivePanelChange.fire(undefined);
+        }
+        this.gridview.clear();
+    };
+    DockviewComponent.prototype.closeAllGroups = function () {
+        var e_14, _a;
+        try {
+            for (var _b = __values(this._groups.entries()), _c = _b.next(); !_c.done; _c = _b.next()) {
+                var entry = _c.value;
+                var _d = __read(entry, 2), _ = _d[0], group = _d[1];
+                group.value.model.closeAllPanels();
+            }
+        }
+        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_14) throw e_14.error; }
+        }
+    };
+    DockviewComponent.prototype.addPanel = function (options) {
+        var _a, _b;
+        if (this.panels.find(function (_) { return _.id === options.id; })) {
+            throw new Error("panel with id ".concat(options.id, " already exists"));
+        }
+        var referenceGroup;
+        if (options.position && options.floating) {
+            throw new Error('you can only provide one of: position, floating as arguments to .addPanel(...)');
+        }
+        if (options.position) {
+            if ((0, options_1.isPanelOptionsWithPanel)(options.position)) {
+                var referencePanel = typeof options.position.referencePanel === 'string'
+                    ? this.getGroupPanel(options.position.referencePanel)
+                    : options.position.referencePanel;
+                if (!referencePanel) {
+                    throw new Error("referencePanel ".concat(options.position.referencePanel, " does not exist"));
+                }
+                referenceGroup = this.findGroup(referencePanel);
+            }
+            else if ((0, options_1.isPanelOptionsWithGroup)(options.position)) {
+                referenceGroup =
+                    typeof options.position.referenceGroup === 'string'
+                        ? (_a = this._groups.get(options.position.referenceGroup)) === null || _a === void 0 ? void 0 : _a.value
+                        : options.position.referenceGroup;
+                if (!referenceGroup) {
+                    throw new Error("referencePanel ".concat(options.position.referenceGroup, " does not exist"));
+                }
+            }
+            else {
+                var group = this.orthogonalize((0, droptarget_1.directionToPosition)(options.position.direction));
+                var panel_1 = this.createPanel(options, group);
+                group.model.openPanel(panel_1);
+                return panel_1;
+            }
+        }
+        else {
+            referenceGroup = this.activeGroup;
+        }
+        var panel;
+        if (referenceGroup) {
+            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();
+                var o = typeof options.floating === 'object' &&
+                    options.floating !== null
+                    ? options.floating
+                    : {};
+                this.addFloatingGroup(group, o, {
+                    inDragMode: false,
+                    skipRemoveGroup: true,
+                });
+                this._onDidAddGroup.fire(group);
+                panel = this.createPanel(options, group);
+                group.model.openPanel(panel);
+                this.doSetGroupAndPanelActive(group);
+            }
+            else if (referenceGroup.api.location === 'floating' ||
+                target === 'center') {
+                panel = this.createPanel(options, referenceGroup);
+                referenceGroup.model.openPanel(panel);
+            }
+            else {
+                var location_1 = (0, gridview_1.getGridLocation)(referenceGroup.element);
+                var relativeLocation = (0, gridview_1.getRelativeLocation)(this.gridview.orientation, location_1, target);
+                var group = this.createGroupAtLocation(relativeLocation);
+                panel = this.createPanel(options, group);
+                group.model.openPanel(panel);
+            }
+        }
+        else if (options.floating) {
+            var group = this.createGroup();
+            var o = typeof options.floating === 'object' &&
+                options.floating !== null
+                ? options.floating
+                : {};
+            this.addFloatingGroup(group, o, {
+                inDragMode: false,
+                skipRemoveGroup: 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);
+        }
+        return panel;
+    };
+    DockviewComponent.prototype.removePanel = function (panel, options) {
+        if (options === void 0) { options = {
+            removeEmptyGroup: true,
+            skipDispose: false,
+        }; }
+        var group = panel.group;
+        if (!group) {
+            throw new Error("cannot remove panel ".concat(panel.id, ". it's missing a group."));
+        }
+        group.model.removePanel(panel);
+        if (!options.skipDispose) {
+            this.overlayRenderContainer.detatch(panel);
+            panel.dispose();
+        }
+        if (group.size === 0 && options.removeEmptyGroup) {
+            this.removeGroup(group);
+        }
+    };
+    DockviewComponent.prototype.createWatermarkComponent = function () {
+        var _a;
+        return (0, componentFactory_1.createComponent)('watermark-id', 'watermark-name', this.options.watermarkComponent
+            ? { 'watermark-name': this.options.watermarkComponent }
+            : {}, this.options.watermarkFrameworkComponent
+            ? { 'watermark-name': this.options.watermarkFrameworkComponent }
+            : {}, (_a = this.options.frameworkComponentFactory) === null || _a === void 0 ? void 0 : _a.watermark);
+    };
+    DockviewComponent.prototype.updateWatermark = function () {
+        var _a, _b;
+        if (this.groups.filter(function (x) { return x.api.location === 'grid'; }).length === 0) {
+            if (!this.watermark) {
+                this.watermark = this.createWatermarkComponent();
+                this.watermark.init({
+                    containerApi: new component_api_1.DockviewApi(this),
+                });
+                var watermarkContainer = document.createElement('div');
+                watermarkContainer.className = 'dv-watermark-container';
+                watermarkContainer.appendChild(this.watermark.element);
+                this.gridview.element.appendChild(watermarkContainer);
+            }
+        }
+        else if (this.watermark) {
+            this.watermark.element.parentElement.remove();
+            (_b = (_a = this.watermark).dispose) === null || _b === void 0 ? void 0 : _b.call(_a);
+            this.watermark = null;
+        }
+    };
+    DockviewComponent.prototype.addGroup = function (options) {
+        var _a;
+        var group = this.createGroup();
+        if (options) {
+            var referenceGroup = void 0;
+            if ((0, options_1.isGroupOptionsWithPanel)(options)) {
+                var referencePanel = typeof options.referencePanel === 'string'
+                    ? this.panels.find(function (panel) { return panel.id === options.referencePanel; })
+                    : options.referencePanel;
+                if (!referencePanel) {
+                    throw new Error("reference panel ".concat(options.referencePanel, " does not exist"));
+                }
+                referenceGroup = this.findGroup(referencePanel);
+                if (!referenceGroup) {
+                    throw new Error("reference group for reference panel ".concat(options.referencePanel, " does not exist"));
+                }
+            }
+            else if ((0, options_1.isGroupOptionsWithGroup)(options)) {
+                referenceGroup =
+                    typeof options.referenceGroup === 'string'
+                        ? (_a = this._groups.get(options.referenceGroup)) === null || _a === void 0 ? void 0 : _a.value
+                        : options.referenceGroup;
+                if (!referenceGroup) {
+                    throw new Error("reference group ".concat(options.referenceGroup, " does not exist"));
+                }
+            }
+            else {
+                var group_1 = this.orthogonalize((0, droptarget_1.directionToPosition)(options.direction));
+                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);
+            return group;
+        }
+        else {
+            this.doAddGroup(group);
+            return group;
+        }
+    };
+    DockviewComponent.prototype.removeGroup = 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 {
+            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; }
+        }
+        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') {
+            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;
+            }
+            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;
+            }
+            throw new Error('failed to find popout group');
+        }
+        return _super.prototype.doRemoveGroup.call(this, group, options);
+    };
+    DockviewComponent.prototype.moveGroupOrPanel = function (destinationGroup, sourceGroupId, sourceItemId, destinationTarget, destinationIndex) {
+        var _a, _b, _c;
+        var sourceGroup = sourceGroupId
+            ? (_a = this._groups.get(sourceGroupId)) === null || _a === void 0 ? void 0 : _a.value
+            : undefined;
+        if (sourceItemId === undefined) {
+            if (sourceGroup) {
+                this.moveGroup(sourceGroup, destinationGroup, 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) {
+                throw new Error("No panel with id ".concat(sourceItemId));
+            }
+            if ((sourceGroup === null || sourceGroup === void 0 ? void 0 : sourceGroup.model.size) === 0) {
+                this.doRemoveGroup(sourceGroup);
+            }
+            destinationGroup.model.openPanel(groupItem, {
+                index: destinationIndex,
+            });
+        }
+        else {
+            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') {
+                    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)) {
+                        // special case when 'swapping' two views within same grid location
+                        // if a group has one tab - we are essentially moving the 'group'
+                        // which is equivalent to swapping two views in this case
+                        this.gridview.moveView(sourceParentLocation, from, to);
+                    }
+                }
+                // source group will become empty so delete the group
+                var targetGroup = 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);
+            }
+            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) {
+                    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);
+            }
+        }
+    };
+    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);
+                });
+                if ((sourceGroup === null || sourceGroup === void 0 ? void 0 : sourceGroup.model.size) === 0) {
+                    this.doRemoveGroup(sourceGroup);
+                }
+                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,
+                        });
+                    }
+                }
+                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_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;
+                    }
+                    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);
+                this.gridview.addView(sourceGroup, splitview_1.Sizing.Distribute, dropLocation);
+            }
+        }
+    };
+    DockviewComponent.prototype.doSetGroupAndPanelActive = function (group, skipFocus) {
+        var _a, _b;
+        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);
+        }
+    };
+    DockviewComponent.prototype.createGroup = function (options) {
+        var _this = this;
+        if (!options) {
+            options = {};
+        }
+        var id = options === null || options === void 0 ? void 0 : options.id;
+        if (id && this._groups.has(options.id)) {
+            console.warn("Duplicate group id ".concat(options === null || options === void 0 ? void 0 : options.id, ". reassigning group id to avoid errors"));
+            id = undefined;
+        }
+        if (!id) {
+            id = this.nextGroupId.next();
+            while (this._groups.has(id)) {
+                id = this.nextGroupId.next();
+            }
+        }
+        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
+        if (!this._groups.has(view.id)) {
+            var disposable = new lifecycle_1.CompositeDisposable(view.model.onTabDragStart(function (event) {
+                _this._onWillDragPanel.fire(event);
+            }), view.model.onGroupDragStart(function (event) {
+                _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);
+            }), view.model.onDidDrop(function (event) {
+                _this._onDidDrop.fire(__assign(__assign({}, event), { api: _this._api, group: view }));
+            }), view.model.onDidAddPanel(function (event) {
+                _this._onDidAddPanel.fire(event.panel);
+            }), view.model.onDidRemovePanel(function (event) {
+                _this._onDidRemovePanel.fire(event.panel);
+            }), view.model.onDidActivePanelChange(function (event) {
+                _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
+        view.initialize();
+        return view;
+    };
+    DockviewComponent.prototype.createPanel = function (options, group) {
+        var _a, _b, _c;
+        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, { 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 : {},
+        });
+        return panel;
+    };
+    DockviewComponent.prototype.createGroupAtLocation = function (location) {
+        if (location === void 0) { location = [0]; }
+        var group = this.createGroup();
+        this.doAddGroup(group, location);
+        return group;
+    };
+    DockviewComponent.prototype.findGroup = function (panel) {
+        var _a;
+        return (_a = Array.from(this._groups.values()).find(function (group) {
+            return group.value.model.containsPanel(panel);
+        })) === null || _a === void 0 ? void 0 : _a.value;
+    };
+    return DockviewComponent;
+}(baseComponentGridview_1.BaseGrid));
+exports.DockviewComponent = DockviewComponent;
 //# sourceMappingURL=dockviewComponent.js.map