dockview 0.0.28 → 1.0.0

package/dist/cjs/dockview/dockviewComponent.js

@@ -1,693 +1,693 @@
-"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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
-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 dockviewGroupPanel_1 = require("./dockviewGroupPanel");
-var lifecycle_1 = require("../lifecycle");
-var events_1 = require("../events");
-var watermark_1 = require("./components/watermark/watermark");
-var functions_1 = require("../functions");
-var math_1 = require("../math");
-var deserializer_1 = require("./deserializer");
-var componentFactory_1 = require("../panel/componentFactory");
-var baseComponentGridview_1 = require("../gridview/baseComponentGridview");
-var component_api_1 = require("../api/component.api");
-var tab_1 = require("../groupview/tab");
-var splitview_1 = require("../splitview/core/splitview");
-var defaultTab_1 = require("./components/tab/defaultTab");
-var groupview_1 = require("../groupview/groupview");
-var groupviewPanel_1 = require("../groupview/groupviewPanel");
-var defaultGroupPanelView_1 = require("./defaultGroupPanelView");
-var nextGroupId = (0, math_1.sequentialNumberGenerator)();
-var DockviewComponent = /** @class */ (function (_super) {
-    __extends(DockviewComponent, _super);
-    function DockviewComponent(element, options) {
-        var _this = _super.call(this, element, {
-            proportionalLayout: true,
-            orientation: options.orientation || splitview_1.Orientation.HORIZONTAL,
-            styles: options.styles,
-        }) || this;
-        _this._panels = new Map();
-        _this.dirtyPanels = new Set();
-        _this.debouncedDeque = (0, functions_1.debounce)(_this.syncConfigs.bind(_this), 5000);
-        // events
-        _this._onTabInteractionEvent = new events_1.Emitter();
-        _this.onTabInteractionEvent = _this._onTabInteractionEvent.event;
-        _this._onTabContextMenu = new events_1.Emitter();
-        _this.onTabContextMenu = _this._onTabContextMenu.event;
-        _this.panelState = {};
-        _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;
-        }
-        _this._api = new component_api_1.DockviewApi(_this);
-        return _this;
-    }
-    Object.defineProperty(DockviewComponent.prototype, "totalPanels", {
-        get: function () {
-            return this._panels.size;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(DockviewComponent.prototype, "panels", {
-        get: function () {
-            return Array.from(this._panels.values()).map(function (_) { return _.value; });
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(DockviewComponent.prototype, "deserializer", {
-        get: function () {
-            return this._deserializer;
-        },
-        set: function (value) {
-            this._deserializer = value;
-        },
-        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.model.activePanel;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(DockviewComponent.prototype, "tabHeight", {
-        get: function () {
-            return this.options.tabHeight;
-        },
-        set: function (height) {
-            this.options.tabHeight = height;
-            this._groups.forEach(function (value) {
-                value.value.model.tabHeight = height;
-            });
-        },
-        enumerable: false,
-        configurable: true
-    });
-    DockviewComponent.prototype.updateOptions = function (options) {
-        var hasOrientationChanged = typeof options.orientation === 'string' &&
-            this.options.orientation !== options.orientation;
-        // TODO support style update
-        // const hasStylesChanged =
-        //     typeof options.styles === 'object' &&
-        //     this.options.styles !== options.styles;
-        this._options = __assign(__assign({}, this.options), options);
-        if (hasOrientationChanged) {
-            this.gridview.orientation = options.orientation;
-        }
-        this.layout(this.gridview.width, this.gridview.height, true);
-    };
-    DockviewComponent.prototype.focus = function () {
-        var _a;
-        (_a = this.activeGroup) === null || _a === void 0 ? void 0 : _a.focus();
-    };
-    DockviewComponent.prototype.getGroupPanel = function (id) {
-        var _a;
-        return (_a = this._panels.get(id)) === null || _a === void 0 ? void 0 : _a.value;
-    };
-    DockviewComponent.prototype.setActivePanel = function (panel) {
-        if (!panel.group) {
-            throw new Error("Panel " + panel.id + " has no associated group");
-        }
-        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.model.activePanel !==
-                options.group.model.panels[options.group.model.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.model.activePanel !==
-                options.group.model.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);
-        }
-    };
-    DockviewComponent.prototype.registerPanel = function (panel) {
-        var _this = this;
-        if (this._panels.has(panel.id)) {
-            throw new Error("panel " + panel.id + " already exists");
-        }
-        var disposable = new lifecycle_1.CompositeDisposable(panel.onDidStateChange(function () { return _this.addDirtyPanel(panel); }));
-        this._panels.set(panel.id, { value: panel, disposable: disposable });
-    };
-    DockviewComponent.prototype.unregisterPanel = function (panel) {
-        if (!this._panels.has(panel.id)) {
-            throw new Error("panel " + panel.id + " doesn't exist");
-        }
-        var item = this._panels.get(panel.id);
-        if (item) {
-            item.disposable.dispose();
-            item.value.dispose();
-        }
-        this._panels.delete(panel.id);
-    };
-    /**
-     * Serialize the current state of the layout
-     *
-     * @returns A JSON respresentation of the layout
-     */
-    DockviewComponent.prototype.toJSON = function () {
-        var _this = this;
-        var _a;
-        this.syncConfigs();
-        var data = this.gridview.serialize();
-        var panels = Array.from(this._panels.values()).reduce(function (collection, panel) {
-            if (!_this.panelState[panel.value.id]) {
-                collection[panel.value.id] = panel.value.toJSON();
-            }
-            return collection;
-        }, {});
-        return {
-            grid: data,
-            panels: panels,
-            activeGroup: (_a = this.activeGroup) === null || _a === void 0 ? void 0 : _a.id,
-            options: { tabHeight: this.tabHeight },
-        };
-    };
-    DockviewComponent.prototype.fromJSON = function (data) {
-        var _this = this;
-        this.gridview.clear();
-        this._panels.forEach(function (panel) {
-            panel.disposable.dispose();
-            panel.value.dispose();
-        });
-        this._panels.clear();
-        this._groups.clear();
-        if (!this.deserializer) {
-            throw new Error('invalid deserializer');
-        }
-        var grid = data.grid, panels = data.panels, options = data.options, activeGroup = data.activeGroup;
-        if (typeof (options === null || options === void 0 ? void 0 : options.tabHeight) === 'number') {
-            this.tabHeight = options.tabHeight;
-        }
-        if (!this.deserializer) {
-            throw new Error('no deserializer provided');
-        }
-        this.gridview.deserialize(grid, new deserializer_1.DefaultDeserializer(this, {
-            createPanel: function (id) {
-                var panelData = panels[id];
-                var panel = _this.deserializer.fromJSON(panelData);
-                _this.registerPanel(panel);
-                return panel;
-            },
-        }));
-        if (typeof activeGroup === 'string') {
-            var panel = this.getPanel(activeGroup);
-            if (panel) {
-                this.doSetGroupActive(panel);
-            }
-        }
-        this.gridview.layout(this.width, this.height);
-        this._onGridEvent.fire({ kind: baseComponentGridview_1.GroupChangeKind.LAYOUT_FROM_JSON });
-    };
-    DockviewComponent.prototype.closeAllGroups = function () {
-        return __awaiter(this, void 0, void 0, function () {
-            var _a, _b, entry, _c, _, group, didCloseAll, e_1_1;
-            var e_1, _d;
-            return __generator(this, function (_e) {
-                switch (_e.label) {
-                    case 0:
-                        _e.trys.push([0, 5, 6, 7]);
-                        _a = __values(this._groups.entries()), _b = _a.next();
-                        _e.label = 1;
-                    case 1:
-                        if (!!_b.done) return [3 /*break*/, 4];
-                        entry = _b.value;
-                        _c = __read(entry, 2), _ = _c[0], group = _c[1];
-                        return [4 /*yield*/, group.value.model.closeAllPanels()];
-                    case 2:
-                        didCloseAll = _e.sent();
-                        if (!didCloseAll) {
-                            return [2 /*return*/, false];
-                        }
-                        _e.label = 3;
-                    case 3:
-                        _b = _a.next();
-                        return [3 /*break*/, 1];
-                    case 4: return [3 /*break*/, 7];
-                    case 5:
-                        e_1_1 = _e.sent();
-                        e_1 = { error: e_1_1 };
-                        return [3 /*break*/, 7];
-                    case 6:
-                        try {
-                            if (_b && !_b.done && (_d = _a.return)) _d.call(_a);
-                        }
-                        finally { if (e_1) throw e_1.error; }
-                        return [7 /*endfinally*/];
-                    case 7: return [2 /*return*/, true];
-                }
-            });
-        });
-    };
-    DockviewComponent.prototype.fireMouseEvent = function (event) {
-        switch (event.kind) {
-            case tab_1.MouseEventKind.CONTEXT_MENU:
-                if (event.tab && event.panel) {
-                    this._onTabContextMenu.fire({
-                        event: event.event,
-                        api: this._api,
-                        panel: event.panel,
-                    });
-                }
-                break;
-        }
-    };
-    DockviewComponent.prototype.addPanel = function (options) {
-        var _a, _b;
-        var panel = this._addPanel(options);
-        var referenceGroup;
-        if ((_a = options.position) === null || _a === void 0 ? void 0 : _a.referencePanel) {
-            var referencePanel = this.getGroupPanel(options.position.referencePanel);
-            if (!referencePanel) {
-                throw new Error("referencePanel " + options.position.referencePanel + " does not exist");
-            }
-            referenceGroup = this.findGroup(referencePanel);
-        }
-        else {
-            referenceGroup = this.activeGroup;
-        }
-        if (referenceGroup) {
-            var target = (0, baseComponentGridview_1.toTarget)(((_b = options.position) === null || _b === void 0 ? void 0 : _b.direction) || 'within');
-            if (target === droptarget_1.Position.Center) {
-                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);
-                this.addPanelToNewGroup(panel, relativeLocation);
-            }
-        }
-        else {
-            this.addPanelToNewGroup(panel);
-        }
-        return panel;
-    };
-    DockviewComponent.prototype.removePanel = function (panel) {
-        this.unregisterPanel(panel);
-        var group = panel.group;
-        if (!group) {
-            throw new Error("cannot remove panel " + panel.id + ". it's missing a group.");
-        }
-        group.model.removePanel(panel);
-        if (group.model.size === 0) {
-            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.addEmptyGroup = function (options) {
-        var _a;
-        var group = this.createGroup();
-        if (options) {
-            var referencePanel = (_a = this._panels.get(options.referencePanel)) === null || _a === void 0 ? void 0 : _a.value;
-            if (!referencePanel) {
-                throw new Error("reference panel " + options.referencePanel + " does not exist");
-            }
-            var referenceGroup = this.findGroup(referencePanel);
-            if (!referenceGroup) {
-                throw new Error("reference group for reference panel " + options.referencePanel + " does not exist");
-            }
-            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);
-        }
-        else {
-            this.doAddGroup(group);
-        }
-    };
-    DockviewComponent.prototype.removeGroup = function (group) {
-        var _this = this;
-        var panels = __spreadArray([], __read(group.model.panels), false); // reassign since group panels will mutate
-        panels.forEach(function (panel) {
-            _this.removePanel(panel);
-        });
-        if (this._groups.size === 1) {
-            this._activeGroup = group;
-            return;
-        }
-        _super.prototype.removeGroup.call(this, group);
-    };
-    DockviewComponent.prototype.moveGroupOrPanel = function (referenceGroup, groupId, itemId, target, index) {
-        var _a, _b, _c;
-        var sourceGroup = groupId
-            ? (_a = this._groups.get(groupId)) === null || _a === void 0 ? void 0 : _a.value
-            : undefined;
-        if (!target || target === droptarget_1.Position.Center) {
-            var groupItem = (sourceGroup === null || sourceGroup === void 0 ? void 0 : sourceGroup.model.removePanel(itemId)) ||
-                ((_b = this._panels.get(itemId)) === null || _b === void 0 ? void 0 : _b.value);
-            if (!groupItem) {
-                throw new Error("No panel with id " + itemId);
-            }
-            if ((sourceGroup === null || sourceGroup === void 0 ? void 0 : sourceGroup.model.size) === 0) {
-                this.doRemoveGroup(sourceGroup);
-            }
-            referenceGroup.model.openPanel(groupItem, { index: index });
-        }
-        else {
-            var referenceLocation = (0, gridview_1.getGridLocation)(referenceGroup.element);
-            var targetLocation = (0, gridview_1.getRelativeLocation)(this.gridview.orientation, referenceLocation, target);
-            if (sourceGroup && sourceGroup.model.size < 2) {
-                var _d = __read((0, array_1.tail)(targetLocation), 2), targetParentLocation = _d[0], to = _d[1];
-                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);
-                }
-                else {
-                    // 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)(referenceGroup.element);
-                    var location_3 = (0, gridview_1.getRelativeLocation)(this.gridview.orientation, updatedReferenceLocation, target);
-                    this.doAddGroup(targetGroup, location_3);
-                }
-            }
-            else {
-                var groupItem = (sourceGroup === null || sourceGroup === void 0 ? void 0 : sourceGroup.model.removePanel(itemId)) ||
-                    ((_c = this._panels.get(itemId)) === null || _c === void 0 ? void 0 : _c.value);
-                if (!groupItem) {
-                    throw new Error("No panel with id " + itemId);
-                }
-                var dropLocation = (0, gridview_1.getRelativeLocation)(this.gridview.orientation, referenceLocation, target);
-                this.addPanelToNewGroup(groupItem, 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.model.activePanel)) {
-            this._onGridEvent.fire({
-                kind: baseComponentGridview_1.GroupChangeKind.PANEL_ACTIVE,
-                panel: (_b = this._activeGroup) === null || _b === void 0 ? void 0 : _b.model.activePanel,
-            });
-        }
-    };
-    DockviewComponent.prototype.createGroup = function (options) {
-        var _this = this;
-        if (!options) {
-            options = { tabHeight: this.tabHeight };
-        }
-        if (typeof options.tabHeight !== 'number') {
-            options.tabHeight = this.tabHeight;
-        }
-        var id = options === null || options === void 0 ? void 0 : options.id;
-        if (id && this._groups.has(options.id)) {
-            console.warn("Duplicate group id " + (options === null || options === void 0 ? void 0 : options.id) + ". reassigning group id to avoid errors");
-            id = undefined;
-        }
-        if (!id) {
-            id = nextGroupId.next();
-            while (this._groups.has(id)) {
-                id = nextGroupId.next();
-            }
-        }
-        var view = new groupviewPanel_1.GroupviewPanel(this, id, options);
-        if (!this._groups.has(view.id)) {
-            var disposable = new lifecycle_1.CompositeDisposable(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.onDidGroupChange(function (event) {
-                switch (event.kind) {
-                    case groupview_1.GroupChangeKind2.ADD_PANEL:
-                        _this._onGridEvent.fire({
-                            kind: baseComponentGridview_1.GroupChangeKind.ADD_PANEL,
-                            panel: event.panel,
-                        });
-                        break;
-                    case groupview_1.GroupChangeKind2.GROUP_ACTIVE:
-                        _this._onGridEvent.fire({
-                            kind: baseComponentGridview_1.GroupChangeKind.GROUP_ACTIVE,
-                            panel: event.panel,
-                        });
-                        break;
-                    case groupview_1.GroupChangeKind2.REMOVE_PANEL:
-                        _this._onGridEvent.fire({
-                            kind: baseComponentGridview_1.GroupChangeKind.REMOVE_PANEL,
-                            panel: event.panel,
-                        });
-                        break;
-                    case groupview_1.GroupChangeKind2.PANEL_ACTIVE:
-                        _this._onGridEvent.fire({
-                            kind: baseComponentGridview_1.GroupChangeKind.PANEL_ACTIVE,
-                            panel: event.panel,
-                        });
-                        break;
-                }
-            }));
-            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();
-        if (typeof this.options.tabHeight === 'number') {
-            view.model.tabHeight = this.options.tabHeight;
-        }
-        return view;
-    };
-    DockviewComponent.prototype.dispose = function () {
-        _super.prototype.dispose.call(this);
-        this._onGridEvent.dispose();
-    };
-    /**
-     * Ensure the local copy of the layout state is up-to-date
-     */
-    DockviewComponent.prototype.syncConfigs = function () {
-        var _this = this;
-        var dirtyPanels = Array.from(this.dirtyPanels);
-        if (dirtyPanels.length === 0) {
-            //
-        }
-        this.dirtyPanels.clear();
-        var partialPanelState = dirtyPanels
-            .map(function (panel) { return _this._panels.get(panel.id); })
-            .filter(function (_) { return !!_; })
-            .reduce(function (collection, panel) {
-            collection[panel.value.id] = panel.value.toJSON();
-            return collection;
-        }, {});
-        this.panelState = __assign(__assign({}, this.panelState), partialPanelState);
-        dirtyPanels
-            .filter(function (p) { return _this._panels.has(p.id); })
-            .forEach(function (panel) {
-            panel.setDirty(false);
-        });
-    };
-    DockviewComponent.prototype._addPanel = function (options) {
-        var view = new defaultGroupPanelView_1.DefaultGroupPanelView({
-            content: this.createContentComponent(options.id, options.component),
-            tab: this.createTabComponent(options.id, options.tabComponent),
-        });
-        var panel = new dockviewGroupPanel_1.DockviewGroupPanel(options.id, this._api);
-        panel.init({
-            view: view,
-            title: options.title || options.id,
-            suppressClosable: options === null || options === void 0 ? void 0 : options.suppressClosable,
-            params: (options === null || options === void 0 ? void 0 : options.params) || {},
-        });
-        this.registerPanel(panel);
-        return panel;
-    };
-    DockviewComponent.prototype.createContentComponent = function (id, componentName) {
-        var _a;
-        return (0, componentFactory_1.createComponent)(id, componentName, this.options.components || {}, this.options.frameworkComponents, (_a = this.options.frameworkComponentFactory) === null || _a === void 0 ? void 0 : _a.content);
-    };
-    DockviewComponent.prototype.createTabComponent = function (id, componentName) {
-        var _a;
-        return (0, componentFactory_1.createComponent)(id, componentName, this.options.tabComponents || {}, this.options.frameworkTabComponents, (_a = this.options.frameworkComponentFactory) === null || _a === void 0 ? void 0 : _a.tab, function () { return new defaultTab_1.DefaultTab(); });
-    };
-    DockviewComponent.prototype.addPanelToNewGroup = function (panel, location) {
-        if (location === void 0) { location = [0]; }
-        var group = this.createGroup();
-        this.doAddGroup(group, location);
-        group.model.openPanel(panel);
-    };
-    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;
-    };
-    DockviewComponent.prototype.addDirtyPanel = function (panel) {
-        this.dirtyPanels.add(panel);
-        panel.setDirty(true);
-        this.debouncedDeque();
-    };
-    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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+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 dockviewGroupPanel_1 = require("./dockviewGroupPanel");
+var lifecycle_1 = require("../lifecycle");
+var events_1 = require("../events");
+var watermark_1 = require("./components/watermark/watermark");
+var functions_1 = require("../functions");
+var math_1 = require("../math");
+var deserializer_1 = require("./deserializer");
+var componentFactory_1 = require("../panel/componentFactory");
+var baseComponentGridview_1 = require("../gridview/baseComponentGridview");
+var component_api_1 = require("../api/component.api");
+var tab_1 = require("../groupview/tab");
+var splitview_1 = require("../splitview/core/splitview");
+var defaultTab_1 = require("./components/tab/defaultTab");
+var groupview_1 = require("../groupview/groupview");
+var groupviewPanel_1 = require("../groupview/groupviewPanel");
+var defaultGroupPanelView_1 = require("./defaultGroupPanelView");
+var nextGroupId = (0, math_1.sequentialNumberGenerator)();
+var DockviewComponent = /** @class */ (function (_super) {
+    __extends(DockviewComponent, _super);
+    function DockviewComponent(element, options) {
+        var _this = _super.call(this, element, {
+            proportionalLayout: true,
+            orientation: options.orientation || splitview_1.Orientation.HORIZONTAL,
+            styles: options.styles,
+        }) || this;
+        _this._panels = new Map();
+        _this.dirtyPanels = new Set();
+        _this.debouncedDeque = (0, functions_1.debounce)(_this.syncConfigs.bind(_this), 5000);
+        // events
+        _this._onTabInteractionEvent = new events_1.Emitter();
+        _this.onTabInteractionEvent = _this._onTabInteractionEvent.event;
+        _this._onTabContextMenu = new events_1.Emitter();
+        _this.onTabContextMenu = _this._onTabContextMenu.event;
+        _this.panelState = {};
+        _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;
+        }
+        _this._api = new component_api_1.DockviewApi(_this);
+        return _this;
+    }
+    Object.defineProperty(DockviewComponent.prototype, "totalPanels", {
+        get: function () {
+            return this._panels.size;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DockviewComponent.prototype, "panels", {
+        get: function () {
+            return Array.from(this._panels.values()).map(function (_) { return _.value; });
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DockviewComponent.prototype, "deserializer", {
+        get: function () {
+            return this._deserializer;
+        },
+        set: function (value) {
+            this._deserializer = value;
+        },
+        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.model.activePanel;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DockviewComponent.prototype, "tabHeight", {
+        get: function () {
+            return this.options.tabHeight;
+        },
+        set: function (height) {
+            this.options.tabHeight = height;
+            this._groups.forEach(function (value) {
+                value.value.model.tabHeight = height;
+            });
+        },
+        enumerable: false,
+        configurable: true
+    });
+    DockviewComponent.prototype.updateOptions = function (options) {
+        var hasOrientationChanged = typeof options.orientation === 'string' &&
+            this.options.orientation !== options.orientation;
+        // TODO support style update
+        // const hasStylesChanged =
+        //     typeof options.styles === 'object' &&
+        //     this.options.styles !== options.styles;
+        this._options = __assign(__assign({}, this.options), options);
+        if (hasOrientationChanged) {
+            this.gridview.orientation = options.orientation;
+        }
+        this.layout(this.gridview.width, this.gridview.height, true);
+    };
+    DockviewComponent.prototype.focus = function () {
+        var _a;
+        (_a = this.activeGroup) === null || _a === void 0 ? void 0 : _a.focus();
+    };
+    DockviewComponent.prototype.getGroupPanel = function (id) {
+        var _a;
+        return (_a = this._panels.get(id)) === null || _a === void 0 ? void 0 : _a.value;
+    };
+    DockviewComponent.prototype.setActivePanel = function (panel) {
+        if (!panel.group) {
+            throw new Error("Panel ".concat(panel.id, " has no associated group"));
+        }
+        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.model.activePanel !==
+                options.group.model.panels[options.group.model.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.model.activePanel !==
+                options.group.model.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);
+        }
+    };
+    DockviewComponent.prototype.registerPanel = function (panel) {
+        var _this = this;
+        if (this._panels.has(panel.id)) {
+            throw new Error("panel ".concat(panel.id, " already exists"));
+        }
+        var disposable = new lifecycle_1.CompositeDisposable(panel.onDidStateChange(function () { return _this.addDirtyPanel(panel); }));
+        this._panels.set(panel.id, { value: panel, disposable: disposable });
+    };
+    DockviewComponent.prototype.unregisterPanel = function (panel) {
+        if (!this._panels.has(panel.id)) {
+            throw new Error("panel ".concat(panel.id, " doesn't exist"));
+        }
+        var item = this._panels.get(panel.id);
+        if (item) {
+            item.disposable.dispose();
+            item.value.dispose();
+        }
+        this._panels.delete(panel.id);
+    };
+    /**
+     * Serialize the current state of the layout
+     *
+     * @returns A JSON respresentation of the layout
+     */
+    DockviewComponent.prototype.toJSON = function () {
+        var _this = this;
+        var _a;
+        this.syncConfigs();
+        var data = this.gridview.serialize();
+        var panels = Array.from(this._panels.values()).reduce(function (collection, panel) {
+            if (!_this.panelState[panel.value.id]) {
+                collection[panel.value.id] = panel.value.toJSON();
+            }
+            return collection;
+        }, {});
+        return {
+            grid: data,
+            panels: panels,
+            activeGroup: (_a = this.activeGroup) === null || _a === void 0 ? void 0 : _a.id,
+            options: { tabHeight: this.tabHeight },
+        };
+    };
+    DockviewComponent.prototype.fromJSON = function (data) {
+        var _this = this;
+        this.gridview.clear();
+        this._panels.forEach(function (panel) {
+            panel.disposable.dispose();
+            panel.value.dispose();
+        });
+        this._panels.clear();
+        this._groups.clear();
+        if (!this.deserializer) {
+            throw new Error('invalid deserializer');
+        }
+        var grid = data.grid, panels = data.panels, options = data.options, activeGroup = data.activeGroup;
+        if (typeof (options === null || options === void 0 ? void 0 : options.tabHeight) === 'number') {
+            this.tabHeight = options.tabHeight;
+        }
+        if (!this.deserializer) {
+            throw new Error('no deserializer provided');
+        }
+        this.gridview.deserialize(grid, new deserializer_1.DefaultDeserializer(this, {
+            createPanel: function (id) {
+                var panelData = panels[id];
+                var panel = _this.deserializer.fromJSON(panelData);
+                _this.registerPanel(panel);
+                return panel;
+            },
+        }));
+        if (typeof activeGroup === 'string') {
+            var panel = this.getPanel(activeGroup);
+            if (panel) {
+                this.doSetGroupActive(panel);
+            }
+        }
+        this.gridview.layout(this.width, this.height);
+        this._onGridEvent.fire({ kind: baseComponentGridview_1.GroupChangeKind.LAYOUT_FROM_JSON });
+    };
+    DockviewComponent.prototype.closeAllGroups = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var _a, _b, entry, _c, _, group, didCloseAll, e_1_1;
+            var e_1, _d;
+            return __generator(this, function (_e) {
+                switch (_e.label) {
+                    case 0:
+                        _e.trys.push([0, 5, 6, 7]);
+                        _a = __values(this._groups.entries()), _b = _a.next();
+                        _e.label = 1;
+                    case 1:
+                        if (!!_b.done) return [3 /*break*/, 4];
+                        entry = _b.value;
+                        _c = __read(entry, 2), _ = _c[0], group = _c[1];
+                        return [4 /*yield*/, group.value.model.closeAllPanels()];
+                    case 2:
+                        didCloseAll = _e.sent();
+                        if (!didCloseAll) {
+                            return [2 /*return*/, false];
+                        }
+                        _e.label = 3;
+                    case 3:
+                        _b = _a.next();
+                        return [3 /*break*/, 1];
+                    case 4: return [3 /*break*/, 7];
+                    case 5:
+                        e_1_1 = _e.sent();
+                        e_1 = { error: e_1_1 };
+                        return [3 /*break*/, 7];
+                    case 6:
+                        try {
+                            if (_b && !_b.done && (_d = _a.return)) _d.call(_a);
+                        }
+                        finally { if (e_1) throw e_1.error; }
+                        return [7 /*endfinally*/];
+                    case 7: return [2 /*return*/, true];
+                }
+            });
+        });
+    };
+    DockviewComponent.prototype.fireMouseEvent = function (event) {
+        switch (event.kind) {
+            case tab_1.MouseEventKind.CONTEXT_MENU:
+                if (event.tab && event.panel) {
+                    this._onTabContextMenu.fire({
+                        event: event.event,
+                        api: this._api,
+                        panel: event.panel,
+                    });
+                }
+                break;
+        }
+    };
+    DockviewComponent.prototype.addPanel = function (options) {
+        var _a, _b;
+        var panel = this._addPanel(options);
+        var referenceGroup;
+        if ((_a = options.position) === null || _a === void 0 ? void 0 : _a.referencePanel) {
+            var referencePanel = this.getGroupPanel(options.position.referencePanel);
+            if (!referencePanel) {
+                throw new Error("referencePanel ".concat(options.position.referencePanel, " does not exist"));
+            }
+            referenceGroup = this.findGroup(referencePanel);
+        }
+        else {
+            referenceGroup = this.activeGroup;
+        }
+        if (referenceGroup) {
+            var target = (0, baseComponentGridview_1.toTarget)(((_b = options.position) === null || _b === void 0 ? void 0 : _b.direction) || 'within');
+            if (target === droptarget_1.Position.Center) {
+                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);
+                this.addPanelToNewGroup(panel, relativeLocation);
+            }
+        }
+        else {
+            this.addPanelToNewGroup(panel);
+        }
+        return panel;
+    };
+    DockviewComponent.prototype.removePanel = function (panel) {
+        this.unregisterPanel(panel);
+        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 (group.model.size === 0) {
+            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.addEmptyGroup = function (options) {
+        var _a;
+        var group = this.createGroup();
+        if (options) {
+            var referencePanel = (_a = this._panels.get(options.referencePanel)) === null || _a === void 0 ? void 0 : _a.value;
+            if (!referencePanel) {
+                throw new Error("reference panel ".concat(options.referencePanel, " does not exist"));
+            }
+            var referenceGroup = this.findGroup(referencePanel);
+            if (!referenceGroup) {
+                throw new Error("reference group for reference panel ".concat(options.referencePanel, " does not exist"));
+            }
+            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);
+        }
+        else {
+            this.doAddGroup(group);
+        }
+    };
+    DockviewComponent.prototype.removeGroup = function (group) {
+        var _this = this;
+        var panels = __spreadArray([], __read(group.model.panels), false); // reassign since group panels will mutate
+        panels.forEach(function (panel) {
+            _this.removePanel(panel);
+        });
+        if (this._groups.size === 1) {
+            this._activeGroup = group;
+            return;
+        }
+        _super.prototype.removeGroup.call(this, group);
+    };
+    DockviewComponent.prototype.moveGroupOrPanel = function (referenceGroup, groupId, itemId, target, index) {
+        var _a, _b, _c;
+        var sourceGroup = groupId
+            ? (_a = this._groups.get(groupId)) === null || _a === void 0 ? void 0 : _a.value
+            : undefined;
+        if (!target || target === droptarget_1.Position.Center) {
+            var groupItem = (sourceGroup === null || sourceGroup === void 0 ? void 0 : sourceGroup.model.removePanel(itemId)) ||
+                ((_b = this._panels.get(itemId)) === null || _b === void 0 ? void 0 : _b.value);
+            if (!groupItem) {
+                throw new Error("No panel with id ".concat(itemId));
+            }
+            if ((sourceGroup === null || sourceGroup === void 0 ? void 0 : sourceGroup.model.size) === 0) {
+                this.doRemoveGroup(sourceGroup);
+            }
+            referenceGroup.model.openPanel(groupItem, { index: index });
+        }
+        else {
+            var referenceLocation = (0, gridview_1.getGridLocation)(referenceGroup.element);
+            var targetLocation = (0, gridview_1.getRelativeLocation)(this.gridview.orientation, referenceLocation, target);
+            if (sourceGroup && sourceGroup.model.size < 2) {
+                var _d = __read((0, array_1.tail)(targetLocation), 2), targetParentLocation = _d[0], to = _d[1];
+                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);
+                }
+                else {
+                    // 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)(referenceGroup.element);
+                    var location_3 = (0, gridview_1.getRelativeLocation)(this.gridview.orientation, updatedReferenceLocation, target);
+                    this.doAddGroup(targetGroup, location_3);
+                }
+            }
+            else {
+                var groupItem = (sourceGroup === null || sourceGroup === void 0 ? void 0 : sourceGroup.model.removePanel(itemId)) ||
+                    ((_c = this._panels.get(itemId)) === null || _c === void 0 ? void 0 : _c.value);
+                if (!groupItem) {
+                    throw new Error("No panel with id ".concat(itemId));
+                }
+                var dropLocation = (0, gridview_1.getRelativeLocation)(this.gridview.orientation, referenceLocation, target);
+                this.addPanelToNewGroup(groupItem, 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.model.activePanel)) {
+            this._onGridEvent.fire({
+                kind: baseComponentGridview_1.GroupChangeKind.PANEL_ACTIVE,
+                panel: (_b = this._activeGroup) === null || _b === void 0 ? void 0 : _b.model.activePanel,
+            });
+        }
+    };
+    DockviewComponent.prototype.createGroup = function (options) {
+        var _this = this;
+        if (!options) {
+            options = { tabHeight: this.tabHeight };
+        }
+        if (typeof options.tabHeight !== 'number') {
+            options.tabHeight = this.tabHeight;
+        }
+        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 = nextGroupId.next();
+            while (this._groups.has(id)) {
+                id = nextGroupId.next();
+            }
+        }
+        var view = new groupviewPanel_1.GroupviewPanel(this, id, options);
+        if (!this._groups.has(view.id)) {
+            var disposable = new lifecycle_1.CompositeDisposable(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.onDidGroupChange(function (event) {
+                switch (event.kind) {
+                    case groupview_1.GroupChangeKind2.ADD_PANEL:
+                        _this._onGridEvent.fire({
+                            kind: baseComponentGridview_1.GroupChangeKind.ADD_PANEL,
+                            panel: event.panel,
+                        });
+                        break;
+                    case groupview_1.GroupChangeKind2.GROUP_ACTIVE:
+                        _this._onGridEvent.fire({
+                            kind: baseComponentGridview_1.GroupChangeKind.GROUP_ACTIVE,
+                            panel: event.panel,
+                        });
+                        break;
+                    case groupview_1.GroupChangeKind2.REMOVE_PANEL:
+                        _this._onGridEvent.fire({
+                            kind: baseComponentGridview_1.GroupChangeKind.REMOVE_PANEL,
+                            panel: event.panel,
+                        });
+                        break;
+                    case groupview_1.GroupChangeKind2.PANEL_ACTIVE:
+                        _this._onGridEvent.fire({
+                            kind: baseComponentGridview_1.GroupChangeKind.PANEL_ACTIVE,
+                            panel: event.panel,
+                        });
+                        break;
+                }
+            }));
+            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();
+        if (typeof this.options.tabHeight === 'number') {
+            view.model.tabHeight = this.options.tabHeight;
+        }
+        return view;
+    };
+    DockviewComponent.prototype.dispose = function () {
+        _super.prototype.dispose.call(this);
+        this._onGridEvent.dispose();
+    };
+    /**
+     * Ensure the local copy of the layout state is up-to-date
+     */
+    DockviewComponent.prototype.syncConfigs = function () {
+        var _this = this;
+        var dirtyPanels = Array.from(this.dirtyPanels);
+        if (dirtyPanels.length === 0) {
+            //
+        }
+        this.dirtyPanels.clear();
+        var partialPanelState = dirtyPanels
+            .map(function (panel) { return _this._panels.get(panel.id); })
+            .filter(function (_) { return !!_; })
+            .reduce(function (collection, panel) {
+            collection[panel.value.id] = panel.value.toJSON();
+            return collection;
+        }, {});
+        this.panelState = __assign(__assign({}, this.panelState), partialPanelState);
+        dirtyPanels
+            .filter(function (p) { return _this._panels.has(p.id); })
+            .forEach(function (panel) {
+            panel.setDirty(false);
+        });
+    };
+    DockviewComponent.prototype._addPanel = function (options) {
+        var view = new defaultGroupPanelView_1.DefaultGroupPanelView({
+            content: this.createContentComponent(options.id, options.component),
+            tab: this.createTabComponent(options.id, options.tabComponent),
+        });
+        var panel = new dockviewGroupPanel_1.DockviewGroupPanel(options.id, this._api);
+        panel.init({
+            view: view,
+            title: options.title || options.id,
+            suppressClosable: options === null || options === void 0 ? void 0 : options.suppressClosable,
+            params: (options === null || options === void 0 ? void 0 : options.params) || {},
+        });
+        this.registerPanel(panel);
+        return panel;
+    };
+    DockviewComponent.prototype.createContentComponent = function (id, componentName) {
+        var _a;
+        return (0, componentFactory_1.createComponent)(id, componentName, this.options.components || {}, this.options.frameworkComponents, (_a = this.options.frameworkComponentFactory) === null || _a === void 0 ? void 0 : _a.content);
+    };
+    DockviewComponent.prototype.createTabComponent = function (id, componentName) {
+        var _a;
+        return (0, componentFactory_1.createComponent)(id, componentName, this.options.tabComponents || {}, this.options.frameworkTabComponents, (_a = this.options.frameworkComponentFactory) === null || _a === void 0 ? void 0 : _a.tab, function () { return new defaultTab_1.DefaultTab(); });
+    };
+    DockviewComponent.prototype.addPanelToNewGroup = function (panel, location) {
+        if (location === void 0) { location = [0]; }
+        var group = this.createGroup();
+        this.doAddGroup(group, location);
+        group.model.openPanel(panel);
+    };
+    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;
+    };
+    DockviewComponent.prototype.addDirtyPanel = function (panel) {
+        this.dirtyPanels.add(panel);
+        panel.setDirty(true);
+        this.debouncedDeque();
+    };
+    return DockviewComponent;
+}(baseComponentGridview_1.BaseGrid));
+exports.DockviewComponent = DockviewComponent;
 //# sourceMappingURL=dockviewComponent.js.map