dockview 1.0.2 → 1.2.0

package/dist/cjs/dockview/dockviewComponent.d.ts

@@ -6,9 +6,10 @@ import { IWatermarkRenderer } from '../groupview/types';
 import { IPanelDeserializer } from './deserializer';
 import { AddGroupOptions, AddPanelOptions, DockviewOptions as DockviewComponentOptions, MovementOptions, TabContextMenuEvent } from './options';
 import { BaseGrid, IBaseGrid } from '../gridview/baseComponentGridview';
+import { DockviewApi } from '../api/component.api';
 import { LayoutMouseEvent } from '../groupview/tab';
 import { Orientation } from '../splitview/core/splitview';
-import { GroupOptions, GroupPanelViewState } from '../groupview/groupview';
+import { GroupOptions, GroupPanelViewState, GroupviewDropEvent } from '../groupview/groupview';
 import { GroupviewPanel } from '../groupview/groupviewPanel';
 export interface PanelReference {
     update: (event: {
@@ -33,11 +34,15 @@ export interface SerializedDockview {
         tabHeight?: number;
     };
 }
-export declare type DockviewComponentUpdateOptions = Pick<DockviewComponentOptions, 'orientation' | 'components' | 'frameworkComponents' | 'tabComponents' | 'frameworkTabComponents'>;
+export declare type DockviewComponentUpdateOptions = Pick<DockviewComponentOptions, 'orientation' | 'components' | 'frameworkComponents' | 'tabComponents' | 'frameworkTabComponents' | 'showDndOverlay' | 'watermarkFrameworkComponent'>;
+export interface DockviewDropEvent extends GroupviewDropEvent {
+    api: DockviewApi;
+}
 export interface IDockviewComponent extends IBaseGrid<GroupviewPanel> {
     readonly activePanel: IGroupPanel | undefined;
     readonly totalPanels: number;
     readonly panels: IGroupPanel[];
+    readonly onDidDrop: Event<DockviewDropEvent>;
     tabHeight: number | undefined;
     deserializer: IPanelDeserializer | undefined;
     updateOptions(options: DockviewComponentUpdateOptions): void;
@@ -51,7 +56,7 @@ export interface IDockviewComponent extends IBaseGrid<GroupviewPanel> {
     fireMouseEvent(event: LayoutMouseEvent): void;
     createWatermarkComponent(): IWatermarkRenderer;
     addEmptyGroup(options?: AddGroupOptions): void;
-    closeAllGroups: () => Promise<boolean>;
+    closeAllGroups(): void;
     onTabInteractionEvent: Event<LayoutMouseEvent>;
     onTabContextMenu: Event<TabContextMenuEvent>;
     moveToNext(options?: MovementOptions): void;
@@ -60,19 +65,29 @@ export interface IDockviewComponent extends IBaseGrid<GroupviewPanel> {
     focus(): void;
     toJSON(): SerializedDockview;
     fromJSON(data: SerializedDockview): void;
+    readonly onDidRemovePanel: Event<IGroupPanel>;
+    readonly onDidAddPanel: Event<IGroupPanel>;
+    readonly onDidLayoutfromJSON: Event<void>;
+    readonly onDidActivePanelChange: Event<IGroupPanel | undefined>;
 }
 export declare class DockviewComponent extends BaseGrid<GroupviewPanel> implements IDockviewComponent {
-    private readonly _panels;
-    private readonly dirtyPanels;
-    private readonly debouncedDeque;
+    private _deserializer;
+    private _api;
+    private _options;
     private readonly _onTabInteractionEvent;
     readonly onTabInteractionEvent: Event<LayoutMouseEvent>;
     private readonly _onTabContextMenu;
     readonly onTabContextMenu: Event<TabContextMenuEvent>;
-    private _deserializer;
-    private panelState;
-    private _api;
-    private _options;
+    private readonly _onDidDrop;
+    readonly onDidDrop: Event<DockviewDropEvent>;
+    private readonly _onDidRemovePanel;
+    readonly onDidRemovePanel: Event<IGroupPanel>;
+    private readonly _onDidAddPanel;
+    readonly onDidAddPanel: Event<IGroupPanel>;
+    private readonly _onDidLayoutfromJSON;
+    readonly onDidLayoutfromJSON: Event<void>;
+    private readonly _onDidActivePanelChange;
+    readonly onDidActivePanelChange: Event<IGroupPanel | undefined>;
     get totalPanels(): number;
     get panels(): IGroupPanel[];
     get deserializer(): IPanelDeserializer | undefined;
@@ -88,8 +103,6 @@ export declare class DockviewComponent extends BaseGrid<GroupviewPanel> implemen
     setActivePanel(panel: IGroupPanel): void;
     moveToNext(options?: MovementOptions): void;
     moveToPrevious(options?: MovementOptions): void;
-    private registerPanel;
-    private unregisterPanel;
     /**
      * Serialize the current state of the layout
      *
@@ -97,25 +110,22 @@ export declare class DockviewComponent extends BaseGrid<GroupviewPanel> implemen
      */
     toJSON(): SerializedDockview;
     fromJSON(data: SerializedDockview): void;
-    closeAllGroups(): Promise<boolean>;
+    closeAllGroups(): void;
     fireMouseEvent(event: LayoutMouseEvent): void;
     addPanel(options: AddPanelOptions): IGroupPanel;
-    removePanel(panel: IGroupPanel): void;
+    removePanel(panel: IGroupPanel, options?: {
+        removeEmptyGroup: boolean;
+    }): void;
     createWatermarkComponent(): IWatermarkRenderer;
     addEmptyGroup(options: AddGroupOptions): void;
-    removeGroup(group: GroupviewPanel): void;
+    removeGroup(group: GroupviewPanel, skipActive?: boolean): void;
     moveGroupOrPanel(referenceGroup: GroupviewPanel, groupId: string, itemId: string, target: Position, index?: number): void;
     doSetGroupActive(group: GroupviewPanel | undefined, skipFocus?: boolean): void;
     createGroup(options?: GroupOptions): GroupviewPanel;
-    dispose(): void;
-    /**
-     * Ensure the local copy of the layout state is up-to-date
-     */
-    private syncConfigs;
     private _addPanel;
     private createContentComponent;
     private createTabComponent;
     private addPanelToNewGroup;
     private findGroup;
-    private addDirtyPanel;
+    dispose(): void;
 }

package/dist/cjs/dockview/dockviewComponent.js

@@ -25,42 +25,6 @@ var __assign = (this && this.__assign) || function () {
     };
     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);
@@ -106,7 +70,6 @@ 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");
@@ -127,15 +90,24 @@ var DockviewComponent = /** @class */ (function (_super) {
             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._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.addDisposables(_this._onTabInteractionEvent, _this._onTabContextMenu, _this._onDidDrop, events_1.Event.any(_this.onDidAddPanel, _this.onDidRemovePanel, _this.onDidActivePanelChange)(function () {
+            _this._bufferOnDidLayoutChange.fire();
+        }));
         _this._options = options;
         if (!_this.options.components) {
             _this.options.components = {};
@@ -158,14 +130,14 @@ var DockviewComponent = /** @class */ (function (_super) {
     }
     Object.defineProperty(DockviewComponent.prototype, "totalPanels", {
         get: function () {
-            return this._panels.size;
+            return this.panels.length;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(DockviewComponent.prototype, "panels", {
         get: function () {
-            return Array.from(this._panels.values()).map(function (_) { return _.value; });
+            return this.groups.flatMap(function (group) { return group.model.panels; });
         },
         enumerable: false,
         configurable: true
@@ -214,10 +186,6 @@ var DockviewComponent = /** @class */ (function (_super) {
     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;
@@ -229,8 +197,7 @@ var DockviewComponent = /** @class */ (function (_super) {
         (_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;
+        return this.panels.find(function (panel) { return panel.id === id; });
     };
     DockviewComponent.prototype.setActivePanel = function (panel) {
         if (!panel.group) {
@@ -281,39 +248,16 @@ var DockviewComponent = /** @class */ (function (_super) {
             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();
-            }
+        var panels = this.panels.reduce(function (collection, panel) {
+            collection[panel.id] = panel.toJSON();
             return collection;
         }, {});
         return {
@@ -324,14 +268,24 @@ var DockviewComponent = /** @class */ (function (_super) {
         };
     };
     DockviewComponent.prototype.fromJSON = function (data) {
+        var e_1, _a;
         var _this = this;
+        var groups = Array.from(this._groups.values()).map(function (_) { return _.value; });
+        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, true);
+            }
+        }
+        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        finally {
+            try {
+                if (groups_1_1 && !groups_1_1.done && (_a = groups_1.return)) _a.call(groups_1);
+            }
+            finally { if (e_1) throw e_1.error; }
+        }
         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');
         }
@@ -345,9 +299,7 @@ var DockviewComponent = /** @class */ (function (_super) {
         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;
+                return _this.deserializer.fromJSON(panelData);
             },
         }));
         if (typeof activeGroup === 'string') {
@@ -357,59 +309,34 @@ var DockviewComponent = /** @class */ (function (_super) {
             }
         }
         this.gridview.layout(this.width, this.height);
-        this._onGridEvent.fire({ kind: baseComponentGridview_1.GroupChangeKind.LAYOUT_FROM_JSON });
+        this._onDidLayoutfromJSON.fire();
     };
     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];
-                }
-            });
-        });
+        var e_2, _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_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.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;
+        if (event.kind === tab_1.MouseEventKind.CONTEXT_MENU) {
+            if (event.tab && event.panel) {
+                this._onTabContextMenu.fire({
+                    event: event.event,
+                    api: this._api,
+                    panel: event.panel,
+                });
+            }
         }
     };
     DockviewComponent.prototype.addPanel = function (options) {
@@ -442,14 +369,14 @@ var DockviewComponent = /** @class */ (function (_super) {
         }
         return panel;
     };
-    DockviewComponent.prototype.removePanel = function (panel) {
-        this.unregisterPanel(panel);
+    DockviewComponent.prototype.removePanel = function (panel, options) {
+        if (options === void 0) { options = { removeEmptyGroup: true }; }
         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) {
+        if (group.model.size === 0 && options.removeEmptyGroup) {
             this.removeGroup(group);
         }
     };
@@ -462,10 +389,9 @@ var DockviewComponent = /** @class */ (function (_super) {
             : {}, (_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;
+            var referencePanel = this.panels.find(function (panel) { return panel.id === options.referencePanel; });
             if (!referencePanel) {
                 throw new Error("reference panel ".concat(options.referencePanel, " does not exist"));
             }
@@ -482,26 +408,35 @@ var DockviewComponent = /** @class */ (function (_super) {
             this.doAddGroup(group);
         }
     };
-    DockviewComponent.prototype.removeGroup = function (group) {
-        var _this = this;
+    DockviewComponent.prototype.removeGroup = function (group, skipActive) {
+        var e_3, _a;
+        if (skipActive === void 0) { skipActive = false; }
         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;
+        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,
+                });
+            }
+        }
+        catch (e_3_1) { e_3 = { error: e_3_1 }; }
+        finally {
+            try {
+                if (panels_1_1 && !panels_1_1.done && (_a = panels_1.return)) _a.call(panels_1);
+            }
+            finally { if (e_3) throw e_3.error; }
         }
-        _super.prototype.removeGroup.call(this, group);
+        _super.prototype.doRemoveGroup.call(this, group, { skipActive: skipActive });
     };
     DockviewComponent.prototype.moveGroupOrPanel = function (referenceGroup, groupId, itemId, target, index) {
-        var _a, _b, _c;
+        var _a;
         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);
+                this.panels.find(function (panel) { return panel.id === itemId; });
             if (!groupItem) {
                 throw new Error("No panel with id ".concat(itemId));
             }
@@ -514,9 +449,9 @@ var DockviewComponent = /** @class */ (function (_super) {
             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 _b = __read((0, array_1.tail)(targetLocation), 2), targetParentLocation = _b[0], to = _b[1];
                 var sourceLocation = (0, gridview_1.getGridLocation)(sourceGroup.element);
-                var _e = __read((0, array_1.tail)(sourceLocation), 2), sourceParentLocation = _e[0], from = _e[1];
+                var _c = __read((0, array_1.tail)(sourceLocation), 2), sourceParentLocation = _c[0], from = _c[1];
                 if ((0, array_1.sequenceEquals)(sourceParentLocation, targetParentLocation)) {
                     // special case when 'swapping' two views within same grid location
                     // if a group has one tab - we are essentially moving the 'group'
@@ -537,7 +472,7 @@ var DockviewComponent = /** @class */ (function (_super) {
             }
             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);
+                    this.panels.find(function (panel) { return panel.id === itemId; });
                 if (!groupItem) {
                     throw new Error("No panel with id ".concat(itemId));
                 }
@@ -551,10 +486,7 @@ var DockviewComponent = /** @class */ (function (_super) {
         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,
-            });
+            this._onDidActivePanelChange.fire((_b = this._activeGroup) === null || _b === void 0 ? void 0 : _b.model.activePanel);
         }
     };
     DockviewComponent.prototype.createGroup = function (options) {
@@ -581,31 +513,22 @@ var DockviewComponent = /** @class */ (function (_super) {
             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.onDidDrop(function (event) {
+                _this._onDidDrop.fire(__assign(__assign({}, event), { api: _this._api }));
             }), 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,
-                        });
+                        if (event.panel) {
+                            _this._onDidAddPanel.fire(event.panel);
+                        }
                         break;
                     case groupview_1.GroupChangeKind2.REMOVE_PANEL:
-                        _this._onGridEvent.fire({
-                            kind: baseComponentGridview_1.GroupChangeKind.REMOVE_PANEL,
-                            panel: event.panel,
-                        });
+                        if (event.panel) {
+                            _this._onDidRemovePanel.fire(event.panel);
+                        }
                         break;
                     case groupview_1.GroupChangeKind2.PANEL_ACTIVE:
-                        _this._onGridEvent.fire({
-                            kind: baseComponentGridview_1.GroupChangeKind.PANEL_ACTIVE,
-                            panel: event.panel,
-                        });
+                        _this._onDidActivePanelChange.fire(event.panel);
                         break;
                 }
             }));
@@ -619,47 +542,18 @@ var DockviewComponent = /** @class */ (function (_super) {
         }
         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);
+        var panel = new dockviewGroupPanel_1.DockviewGroupPanel(options.id, this, 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) {
@@ -682,10 +576,12 @@ var DockviewComponent = /** @class */ (function (_super) {
             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();
+    DockviewComponent.prototype.dispose = function () {
+        _super.prototype.dispose.call(this);
+        this._onDidActivePanelChange.dispose();
+        this._onDidAddPanel.dispose();
+        this._onDidRemovePanel.dispose();
+        this._onDidLayoutfromJSON.dispose();
     };
     return DockviewComponent;
 }(baseComponentGridview_1.BaseGrid));