dockview 1.0.1 → 1.1.0

package/dist/esm/dockview/dockviewComponent.js

@@ -1,12 +1,3 @@
-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());
-    });
-};
 import { getRelativeLocation, getGridLocation, } from '../gridview/gridview';
 import { Position } from '../dnd/droptarget';
 import { tail, sequenceEquals } from '../array';
@@ -14,7 +5,6 @@ import { DockviewGroupPanel } from './dockviewGroupPanel';
 import { CompositeDisposable } from '../lifecycle';
 import { Emitter } from '../events';
 import { Watermark } from './components/watermark/watermark';
-import { debounce } from '../functions';
 import { sequentialNumberGenerator } from '../math';
 import { DefaultDeserializer } from './deserializer';
 import { createComponent } from '../panel/componentFactory';
@@ -34,15 +24,22 @@ export class DockviewComponent extends BaseGrid {
             orientation: options.orientation || Orientation.HORIZONTAL,
             styles: options.styles,
         });
-        this._panels = new Map();
-        this.dirtyPanels = new Set();
-        this.debouncedDeque = debounce(this.syncConfigs.bind(this), 5000);
         // events
         this._onTabInteractionEvent = new Emitter();
         this.onTabInteractionEvent = this._onTabInteractionEvent.event;
         this._onTabContextMenu = new Emitter();
         this.onTabContextMenu = this._onTabContextMenu.event;
-        this.panelState = {};
+        this._onDidDrop = new Emitter();
+        this.onDidDrop = this._onDidDrop.event;
+        this._onDidRemovePanel = new Emitter();
+        this.onDidRemovePanel = this._onDidRemovePanel.event;
+        this._onDidAddPanel = new Emitter();
+        this.onDidAddPanel = this._onDidAddPanel.event;
+        this._onDidLayoutfromJSON = new Emitter();
+        this.onDidLayoutfromJSON = this._onDidLayoutfromJSON.event;
+        this._onDidActivePanelChange = new Emitter();
+        this.onDidActivePanelChange = this._onDidActivePanelChange.event;
+        this.addDisposables(this._onTabInteractionEvent, this._onTabContextMenu, this._onDidDrop);
         this._options = options;
         if (!this.options.components) {
             this.options.components = {};
@@ -63,10 +60,10 @@ export class DockviewComponent extends BaseGrid {
         this._api = new DockviewApi(this);
     }
     get totalPanels() {
-        return this._panels.size;
+        return this.panels.length;
     }
     get panels() {
-        return Array.from(this._panels.values()).map((_) => _.value);
+        return this.groups.flatMap((group) => group.model.panels);
     }
     get deserializer() {
         return this._deserializer;
@@ -96,10 +93,6 @@ export class DockviewComponent extends BaseGrid {
     updateOptions(options) {
         const 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 = Object.assign(Object.assign({}, this.options), options);
         if (hasOrientationChanged) {
             this.gridview.orientation = options.orientation;
@@ -111,8 +104,7 @@ export class DockviewComponent extends BaseGrid {
         (_a = this.activeGroup) === null || _a === void 0 ? void 0 : _a.focus();
     }
     getGroupPanel(id) {
-        var _a;
-        return (_a = this._panels.get(id)) === null || _a === void 0 ? void 0 : _a.value;
+        return this.panels.find((panel) => panel.id === id);
     }
     setActivePanel(panel) {
         if (!panel.group) {
@@ -161,24 +153,6 @@ export class DockviewComponent extends BaseGrid {
             this.doSetGroupActive(next);
         }
     }
-    registerPanel(panel) {
-        if (this._panels.has(panel.id)) {
-            throw new Error(`panel ${panel.id} already exists`);
-        }
-        const disposable = new CompositeDisposable(panel.onDidStateChange(() => this.addDirtyPanel(panel)));
-        this._panels.set(panel.id, { value: panel, disposable });
-    }
-    unregisterPanel(panel) {
-        if (!this._panels.has(panel.id)) {
-            throw new Error(`panel ${panel.id} doesn't exist`);
-        }
-        const 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
      *
@@ -186,12 +160,9 @@ export class DockviewComponent extends BaseGrid {
      */
     toJSON() {
         var _a;
-        this.syncConfigs();
         const data = this.gridview.serialize();
-        const panels = Array.from(this._panels.values()).reduce((collection, panel) => {
-            if (!this.panelState[panel.value.id]) {
-                collection[panel.value.id] = panel.value.toJSON();
-            }
+        const panels = this.panels.reduce((collection, panel) => {
+            collection[panel.id] = panel.toJSON();
             return collection;
         }, {});
         return {
@@ -203,11 +174,9 @@ export class DockviewComponent extends BaseGrid {
     }
     fromJSON(data) {
         this.gridview.clear();
-        this._panels.forEach((panel) => {
-            panel.disposable.dispose();
-            panel.value.dispose();
+        this.panels.forEach((panel) => {
+            panel.dispose();
         });
-        this._panels.clear();
         this._groups.clear();
         if (!this.deserializer) {
             throw new Error('invalid deserializer');
@@ -222,9 +191,7 @@ export class DockviewComponent extends BaseGrid {
         this.gridview.deserialize(grid, new DefaultDeserializer(this, {
             createPanel: (id) => {
                 const panelData = panels[id];
-                const panel = this.deserializer.fromJSON(panelData);
-                this.registerPanel(panel);
-                return panel;
+                return this.deserializer.fromJSON(panelData);
             },
         }));
         if (typeof activeGroup === 'string') {
@@ -235,30 +202,23 @@ export class DockviewComponent extends BaseGrid {
         }
         this.gridview.layout(this.width, this.height);
         this._onGridEvent.fire({ kind: GroupChangeKind.LAYOUT_FROM_JSON });
+        this._onDidLayoutfromJSON.fire();
     }
     closeAllGroups() {
-        return __awaiter(this, void 0, void 0, function* () {
-            for (const entry of this._groups.entries()) {
-                const [_, group] = entry;
-                const didCloseAll = yield group.value.model.closeAllPanels();
-                if (!didCloseAll) {
-                    return false;
-                }
-            }
-            return true;
-        });
+        for (const entry of this._groups.entries()) {
+            const [_, group] = entry;
+            group.value.model.closeAllPanels();
+        }
     }
     fireMouseEvent(event) {
-        switch (event.kind) {
-            case MouseEventKind.CONTEXT_MENU:
-                if (event.tab && event.panel) {
-                    this._onTabContextMenu.fire({
-                        event: event.event,
-                        api: this._api,
-                        panel: event.panel,
-                    });
-                }
-                break;
+        if (event.kind === MouseEventKind.CONTEXT_MENU) {
+            if (event.tab && event.panel) {
+                this._onTabContextMenu.fire({
+                    event: event.event,
+                    api: this._api,
+                    panel: event.panel,
+                });
+            }
         }
     }
     addPanel(options) {
@@ -292,7 +252,6 @@ export class DockviewComponent extends BaseGrid {
         return panel;
     }
     removePanel(panel) {
-        this.unregisterPanel(panel);
         const group = panel.group;
         if (!group) {
             throw new Error(`cannot remove panel ${panel.id}. it's missing a group.`);
@@ -311,10 +270,9 @@ export class DockviewComponent extends BaseGrid {
             : {}, (_a = this.options.frameworkComponentFactory) === null || _a === void 0 ? void 0 : _a.watermark);
     }
     addEmptyGroup(options) {
-        var _a;
         const group = this.createGroup();
         if (options) {
-            const referencePanel = (_a = this._panels.get(options.referencePanel)) === null || _a === void 0 ? void 0 : _a.value;
+            const referencePanel = this.panels.find((panel) => panel.id === options.referencePanel);
             if (!referencePanel) {
                 throw new Error(`reference panel ${options.referencePanel} does not exist`);
             }
@@ -343,13 +301,13 @@ export class DockviewComponent extends BaseGrid {
         super.removeGroup(group);
     }
     moveGroupOrPanel(referenceGroup, groupId, itemId, target, index) {
-        var _a, _b, _c;
+        var _a;
         const sourceGroup = groupId
             ? (_a = this._groups.get(groupId)) === null || _a === void 0 ? void 0 : _a.value
             : undefined;
         if (!target || target === Position.Center) {
             const 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((panel) => panel.id === itemId);
             if (!groupItem) {
                 throw new Error(`No panel with id ${itemId}`);
             }
@@ -385,7 +343,7 @@ export class DockviewComponent extends BaseGrid {
             }
             else {
                 const 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((panel) => panel.id === itemId);
                 if (!groupItem) {
                     throw new Error(`No panel with id ${itemId}`);
                 }
@@ -395,7 +353,7 @@ export class DockviewComponent extends BaseGrid {
         }
     }
     doSetGroupActive(group, skipFocus) {
-        var _a, _b;
+        var _a, _b, _c;
         const isGroupAlreadyFocused = this._activeGroup === group;
         super.doSetGroupActive(group, skipFocus);
         if (!isGroupAlreadyFocused && ((_a = this._activeGroup) === null || _a === void 0 ? void 0 : _a.model.activePanel)) {
@@ -403,6 +361,7 @@ export class DockviewComponent extends BaseGrid {
                 kind: GroupChangeKind.PANEL_ACTIVE,
                 panel: (_b = this._activeGroup) === null || _b === void 0 ? void 0 : _b.model.activePanel,
             });
+            this._onDidActivePanelChange.fire((_c = this._activeGroup) === null || _c === void 0 ? void 0 : _c.model.activePanel);
         }
     }
     createGroup(options) {
@@ -428,6 +387,8 @@ export class DockviewComponent extends BaseGrid {
             const disposable = new CompositeDisposable(view.model.onMove((event) => {
                 const { groupId, itemId, target, index } = event;
                 this.moveGroupOrPanel(view, groupId, itemId, target, index);
+            }), view.model.onDidDrop((event) => {
+                this._onDidDrop.fire(Object.assign(Object.assign({}, event), { api: this._api }));
             }), view.model.onDidGroupChange((event) => {
                 switch (event.kind) {
                     case GroupChangeKind2.ADD_PANEL:
@@ -435,24 +396,25 @@ export class DockviewComponent extends BaseGrid {
                             kind: GroupChangeKind.ADD_PANEL,
                             panel: event.panel,
                         });
-                        break;
-                    case GroupChangeKind2.GROUP_ACTIVE:
-                        this._onGridEvent.fire({
-                            kind: GroupChangeKind.GROUP_ACTIVE,
-                            panel: event.panel,
-                        });
+                        if (event.panel) {
+                            this._onDidAddPanel.fire(event.panel);
+                        }
                         break;
                     case GroupChangeKind2.REMOVE_PANEL:
                         this._onGridEvent.fire({
                             kind: GroupChangeKind.REMOVE_PANEL,
                             panel: event.panel,
                         });
+                        if (event.panel) {
+                            this._onDidRemovePanel.fire(event.panel);
+                        }
                         break;
                     case GroupChangeKind2.PANEL_ACTIVE:
                         this._onGridEvent.fire({
                             kind: GroupChangeKind.PANEL_ACTIVE,
                             panel: event.panel,
                         });
+                        this._onDidActivePanelChange.fire(event.panel);
                         break;
                 }
             }));
@@ -466,46 +428,18 @@ export class DockviewComponent extends BaseGrid {
         }
         return view;
     }
-    dispose() {
-        super.dispose();
-        this._onGridEvent.dispose();
-    }
-    /**
-     * Ensure the local copy of the layout state is up-to-date
-     */
-    syncConfigs() {
-        const dirtyPanels = Array.from(this.dirtyPanels);
-        if (dirtyPanels.length === 0) {
-            //
-        }
-        this.dirtyPanels.clear();
-        const partialPanelState = dirtyPanels
-            .map((panel) => this._panels.get(panel.id))
-            .filter((_) => !!_)
-            .reduce((collection, panel) => {
-            collection[panel.value.id] = panel.value.toJSON();
-            return collection;
-        }, {});
-        this.panelState = Object.assign(Object.assign({}, this.panelState), partialPanelState);
-        dirtyPanels
-            .filter((p) => this._panels.has(p.id))
-            .forEach((panel) => {
-            panel.setDirty(false);
-        });
-    }
     _addPanel(options) {
         const view = new DefaultGroupPanelView({
             content: this.createContentComponent(options.id, options.component),
             tab: this.createTabComponent(options.id, options.tabComponent),
         });
-        const panel = new DockviewGroupPanel(options.id, this._api);
+        const panel = new DockviewGroupPanel(options.id, this, this._api);
         panel.init({
             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;
     }
     createContentComponent(id, componentName) {
@@ -525,9 +459,11 @@ export class DockviewComponent extends BaseGrid {
         var _a;
         return (_a = Array.from(this._groups.values()).find((group) => group.value.model.containsPanel(panel))) === null || _a === void 0 ? void 0 : _a.value;
     }
-    addDirtyPanel(panel) {
-        this.dirtyPanels.add(panel);
-        panel.setDirty(true);
-        this.debouncedDeque();
+    dispose() {
+        super.dispose();
+        this._onDidActivePanelChange.dispose();
+        this._onDidAddPanel.dispose();
+        this._onDidRemovePanel.dispose();
+        this._onDidLayoutfromJSON.dispose();
     }
 }

package/dist/esm/dockview/dockviewGroupPanel.d.ts

@@ -1,10 +1,10 @@
 import { DockviewApi } from '../api/component.api';
 import { DockviewPanelApiImpl } from '../api/groupPanelApi';
-import { Event } from '../events';
 import { GroupPanelUpdateEvent, GroupviewPanelState, IGroupPanel, IGroupPanelInitParameters } from '../groupview/groupPanel';
 import { GroupviewPanel } from '../groupview/groupviewPanel';
 import { CompositeDisposable } from '../lifecycle';
 import { IGroupPanelView } from './defaultGroupPanelView';
+import { DockviewComponent } from './dockviewComponent';
 export declare class DockviewGroupPanel extends CompositeDisposable implements IGroupPanel {
     readonly id: string;
     private readonly containerApi;
@@ -12,7 +12,6 @@ export declare class DockviewGroupPanel extends CompositeDisposable implements I
     readonly api: DockviewPanelApiImpl;
     private _group;
     private _params?;
-    readonly onDidStateChange: Event<void>;
     private _view?;
     private _title;
     private _suppressClosable;
@@ -20,11 +19,9 @@ export declare class DockviewGroupPanel extends CompositeDisposable implements I
     get suppressClosable(): boolean;
     get group(): GroupviewPanel | undefined;
     get view(): IGroupPanelView | undefined;
-    constructor(id: string, containerApi: DockviewApi);
+    constructor(id: string, accessor: DockviewComponent, containerApi: DockviewApi);
     init(params: IGroupPanelInitParameters): void;
     focus(): void;
-    setDirty(isDirty: boolean): void;
-    close(): Promise<boolean>;
     toJSON(): GroupviewPanelState;
     setTitle(title: string): void;
     setSuppressClosable(suppressClosable: boolean): void;

package/dist/esm/dockview/dockviewGroupPanel.js

@@ -1,8 +1,7 @@
-import { GroupChangeKind2 } from '../groupview/groupview';
 import { DockviewPanelApiImpl } from '../api/groupPanelApi';
 import { CompositeDisposable, MutableDisposable } from '../lifecycle';
 export class DockviewGroupPanel extends CompositeDisposable {
-    constructor(id, containerApi) {
+    constructor(id, accessor, containerApi) {
         super();
         this.id = id;
         this.containerApi = containerApi;
@@ -10,9 +9,8 @@ export class DockviewGroupPanel extends CompositeDisposable {
         this._suppressClosable = false;
         this._title = '';
         this.api = new DockviewPanelApiImpl(this, this._group);
-        this.onDidStateChange = this.api.onDidStateChange;
         this.addDisposables(this.api.onActiveChange(() => {
-            this.containerApi.setActivePanel(this);
+            accessor.setActivePanel(this);
         }), this.api.onDidTitleChange((event) => {
             const title = event.title;
             this.update({ params: { title } });
@@ -36,32 +34,18 @@ export class DockviewGroupPanel extends CompositeDisposable {
         this._view = params.view;
         this.setTitle(params.title);
         this.setSuppressClosable(params.suppressClosable || false);
-        if (params.state) {
-            this.api.setState(params.state);
-        }
         (_a = this.view) === null || _a === void 0 ? void 0 : _a.init(Object.assign(Object.assign({}, params), { api: this.api, containerApi: this.containerApi }));
     }
     focus() {
         this.api._onFocusEvent.fire();
     }
-    setDirty(isDirty) {
-        this.api._onDidDirtyChange.fire(isDirty);
-    }
-    close() {
-        if (this.api.tryClose) {
-            return this.api.tryClose();
-        }
-        return Promise.resolve(true);
-    }
     toJSON() {
-        const state = this.api.getState();
         return {
             id: this.id,
             view: this.view.toJSON(),
             params: Object.keys(this._params || {}).length > 0
                 ? this._params
                 : undefined,
-            state: state && Object.keys(state).length > 0 ? state : undefined,
             suppressClosable: this.suppressClosable || undefined,
             title: this.title,
         };
@@ -106,18 +90,6 @@ export class DockviewGroupPanel extends CompositeDisposable {
         var _a;
         this._group = group;
         this.api.group = group;
-        this.mutableDisposable.value = this._group.model.onDidGroupChange((ev) => {
-            var _a;
-            if (ev.kind === GroupChangeKind2.GROUP_ACTIVE) {
-                const isVisible = !!((_a = this._group) === null || _a === void 0 ? void 0 : _a.model.isPanelActive(this));
-                this.api._onDidActiveChange.fire({
-                    isActive: isGroupActive && isVisible,
-                });
-                this.api._onDidVisibilityChange.fire({
-                    isVisible,
-                });
-            }
-        });
         const isPanelVisible = this._group.model.isPanelActive(this);
         this.api._onDidActiveChange.fire({
             isActive: isGroupActive && isPanelVisible,

package/dist/esm/dockview/options.d.ts

@@ -6,6 +6,7 @@ import { IContentRenderer, ITabRenderer, WatermarkConstructor, IWatermarkRendere
 import { GroupviewPanel } from '../groupview/groupviewPanel';
 import { ISplitviewStyles, Orientation } from '../splitview/core/splitview';
 import { FrameworkFactory } from '../types';
+import { DockviewDropTargets } from '../groupview/dnd';
 export interface GroupPanelFrameworkComponentFactory {
     content: FrameworkFactory<IContentRenderer>;
     tab: FrameworkFactory<ITabRenderer>;
@@ -44,9 +45,9 @@ export interface DockviewOptions extends DockviewRenderFunctions {
     frameworkComponentFactory?: GroupPanelFrameworkComponentFactory;
     tabHeight?: number;
     debug?: boolean;
-    enableExternalDragEvents?: boolean;
     orientation?: Orientation;
     styles?: ISplitviewStyles;
+    showDndOverlay?: (event: DragEvent, target: DockviewDropTargets) => boolean;
 }
 export interface PanelOptions {
     component: string;

package/dist/esm/events.d.ts

@@ -21,3 +21,10 @@ export declare class Emitter<T> implements IDisposable {
 }
 export declare function addDisposableWindowListener<K extends keyof WindowEventMap>(element: Window, type: K, listener: (this: Window, ev: WindowEventMap[K]) => any, options?: boolean | AddEventListenerOptions): IDisposable;
 export declare function addDisposableListener<K extends keyof HTMLElementEventMap>(element: HTMLElement, type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): IDisposable;
+export declare class TickDelayedEvent implements IDisposable {
+    private timer;
+    private readonly _onFired;
+    readonly onEvent: Event<void>;
+    fire(): void;
+    dispose(): void;
+}

package/dist/esm/events.js

@@ -28,7 +28,6 @@ export class Emitter {
                 if (((_a = this.options) === null || _a === void 0 ? void 0 : _a.replay) && this._last !== undefined) {
                     listener(this._last);
                 }
-                const firstListener = this._listeners.length === 0;
                 this._listeners.push(listener);
                 return {
                     dispose: () => {
@@ -44,9 +43,9 @@ export class Emitter {
     }
     fire(e) {
         this._last = e;
-        this._listeners.forEach((listener) => {
+        for (const listener of this._listeners) {
             listener(e);
-        });
+        }
     }
     dispose() {
         this._listeners = [];
@@ -69,3 +68,21 @@ export function addDisposableListener(element, type, listener, options) {
         },
     };
 }
+export class TickDelayedEvent {
+    constructor() {
+        this._onFired = new Emitter();
+        this.onEvent = this._onFired.event;
+    }
+    fire() {
+        if (this.timer) {
+            clearTimeout(this.timer);
+        }
+        this.timer = setTimeout(() => {
+            this._onFired.fire();
+            clearTimeout(this.timer);
+        });
+    }
+    dispose() {
+        this._onFired.dispose();
+    }
+}

package/dist/esm/gridview/baseComponentGridview.d.ts

@@ -45,6 +45,9 @@ export interface IBaseGrid<T extends IGridPanelView> {
     readonly groups: T[];
     readonly onGridEvent: Event<GroupChangeEvent>;
     readonly onDidLayoutChange: Event<void>;
+    readonly onDidRemoveGroup: Event<T>;
+    readonly onDidAddGroup: Event<T>;
+    readonly onDidActiveGroupChange: Event<T | undefined>;
     getPanel(id: string): T | undefined;
     toJSON(): object;
     fromJSON(data: any): void;
@@ -63,6 +66,12 @@ export declare abstract class BaseGrid<T extends IGridPanelView> extends Composi
     readonly onGridEvent: Event<GroupChangeEvent>;
     private _onDidLayoutChange;
     readonly onDidLayoutChange: Event<void>;
+    private readonly _onDidRemoveGroup;
+    readonly onDidRemoveGroup: Event<T>;
+    private readonly _onDidAddGroup;
+    readonly onDidAddGroup: Event<T>;
+    private readonly _onDidActiveGroupChange;
+    readonly onDidActiveGroupChange: Event<T | undefined>;
     get id(): string;
     get element(): HTMLElement;
     get size(): number;

package/dist/esm/gridview/baseComponentGridview.js

@@ -1,4 +1,4 @@
-import { Emitter } from '../events';
+import { Emitter, TickDelayedEvent } from '../events';
 import { getGridLocation, Gridview } from './gridview';
 import { Position } from '../dnd/droptarget';
 import { CompositeDisposable } from '../lifecycle';
@@ -44,19 +44,21 @@ export class BaseGrid extends CompositeDisposable {
         this.onGridEvent = this._onGridEvent.event;
         this._onDidLayoutChange = new Emitter();
         this.onDidLayoutChange = this._onDidLayoutChange.event;
+        this._onDidRemoveGroup = new Emitter();
+        this.onDidRemoveGroup = this._onDidRemoveGroup.event;
+        this._onDidAddGroup = new Emitter();
+        this.onDidAddGroup = this._onDidAddGroup.event;
+        this._onDidActiveGroupChange = new Emitter();
+        this.onDidActiveGroupChange = this._onDidActiveGroupChange.event;
         this.gridview = new Gridview(!!options.proportionalLayout, options.styles, options.orientation);
         this.element.appendChild(this.gridview.element);
-        // TODO for some reason this is required before anything will layout correctly
-        this.layout(0, 0, true);
+        this.layout(0, 0, true); // set some elements height/widths
         this.addDisposables(this.gridview.onDidChange(() => {
             this._onGridEvent.fire({ kind: GroupChangeKind.LAYOUT });
         }));
         this.addDisposables((() => {
-            /**
-             * TODO Fix this relatively ugly 'merge and delay'
-             */
-            let timer;
-            return this.onGridEvent((event) => {
+            const tickDelayedEvent = new TickDelayedEvent();
+            return new CompositeDisposable(this.onGridEvent((event) => {
                 if ([
                     GroupChangeKind.ADD_GROUP,
                     GroupChangeKind.REMOVE_GROUP,
@@ -66,15 +68,11 @@ export class BaseGrid extends CompositeDisposable {
                     GroupChangeKind.PANEL_ACTIVE,
                     GroupChangeKind.LAYOUT,
                 ].includes(event.kind)) {
-                    if (timer) {
-                        clearTimeout(timer);
-                    }
-                    timer = setTimeout(() => {
-                        this._onDidLayoutChange.fire();
-                        clearTimeout(timer);
-                    });
+                    tickDelayedEvent.fire();
                 }
-            });
+            }), tickDelayedEvent.onEvent(() => {
+                this._onDidLayoutChange.fire();
+            }), tickDelayedEvent);
         })());
     }
     get id() {
@@ -120,6 +118,7 @@ export class BaseGrid extends CompositeDisposable {
     doAddGroup(group, location = [0], size) {
         this.gridview.addView(group, size !== null && size !== void 0 ? size : Sizing.Distribute, location);
         this._onGridEvent.fire({ kind: GroupChangeKind.ADD_GROUP });
+        this._onDidAddGroup.fire(group);
         this.doSetGroupActive(group);
     }
     doRemoveGroup(group, options) {
@@ -133,6 +132,7 @@ export class BaseGrid extends CompositeDisposable {
             this._groups.delete(group.id);
         }
         this._onGridEvent.fire({ kind: GroupChangeKind.REMOVE_GROUP });
+        this._onDidRemoveGroup.fire(group);
         if (!(options === null || options === void 0 ? void 0 : options.skipActive) && this._activeGroup === group) {
             const groups = Array.from(this._groups.values());
             this.doSetGroupActive(groups.length > 0 ? groups[0].value : undefined);
@@ -163,6 +163,7 @@ export class BaseGrid extends CompositeDisposable {
         this._onGridEvent.fire({
             kind: GroupChangeKind.GROUP_ACTIVE,
         });
+        this._onDidActiveGroupChange.fire(group);
     }
     removeGroup(group) {
         this.doRemoveGroup(group);
@@ -219,6 +220,10 @@ export class BaseGrid extends CompositeDisposable {
     dispose() {
         super.dispose();
         this._onGridEvent.dispose();
+        this._onDidActiveGroupChange.dispose();
+        this._onDidAddGroup.dispose();
+        this._onDidRemoveGroup.dispose();
+        this._onDidLayoutChange.dispose();
         this.gridview.dispose();
     }
 }