dockview 1.0.3 → 1.3.0

package/dist/esm/dockview/dockviewComponent.js

@@ -1,24 +1,14 @@
-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';
 import { DockviewGroupPanel } from './dockviewGroupPanel';
 import { CompositeDisposable } from '../lifecycle';
-import { Emitter } from '../events';
+import { Event, 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';
-import { BaseGrid, GroupChangeKind, toTarget, } from '../gridview/baseComponentGridview';
+import { BaseGrid, toTarget, } from '../gridview/baseComponentGridview';
 import { DockviewApi } from '../api/component.api';
 import { MouseEventKind } from '../groupview/tab';
 import { Orientation } from '../splitview/core/splitview';
@@ -34,15 +24,24 @@ 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, Event.any(this.onDidAddPanel, this.onDidRemovePanel, this.onDidActivePanelChange)(() => {
+            this._bufferOnDidLayoutChange.fire();
+        }));
         this._options = options;
         if (!this.options.components) {
             this.options.components = {};
@@ -63,10 +62,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 +95,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 +106,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 +155,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 +162,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 {
@@ -202,13 +175,12 @@ export class DockviewComponent extends BaseGrid {
         };
     }
     fromJSON(data) {
+        const groups = Array.from(this._groups.values()).map((_) => _.value);
+        for (const group of groups) {
+            // remove the group will automatically remove the panels
+            this.removeGroup(group, true);
+        }
         this.gridview.clear();
-        this._panels.forEach((panel) => {
-            panel.disposable.dispose();
-            panel.value.dispose();
-        });
-        this._panels.clear();
-        this._groups.clear();
         if (!this.deserializer) {
             throw new Error('invalid deserializer');
         }
@@ -222,9 +194,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') {
@@ -234,36 +204,31 @@ 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) {
         var _a, _b;
-        const panel = this._addPanel(options);
+        if (this.panels.find((_) => _.id === options.id)) {
+            throw new Error(`panel with id ${options.id} already exists`);
+        }
+        const panel = this.createPanel(options);
         let referenceGroup;
         if ((_a = options.position) === null || _a === void 0 ? void 0 : _a.referencePanel) {
             const referencePanel = this.getGroupPanel(options.position.referencePanel);
@@ -291,14 +256,20 @@ export class DockviewComponent extends BaseGrid {
         }
         return panel;
     }
-    removePanel(panel) {
-        this.unregisterPanel(panel);
+    removePanel(panel, options = {
+        removeEmptyGroup: true,
+        skipDispose: false,
+    }) {
         const 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) {
+        panel.dispose();
+        const retainGroupForWatermark = this.size === 1;
+        if (!retainGroupForWatermark &&
+            group.model.size === 0 &&
+            options.removeEmptyGroup) {
             this.removeGroup(group);
         }
     }
@@ -311,10 +282,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`);
             }
@@ -331,25 +301,24 @@ export class DockviewComponent extends BaseGrid {
             this.doAddGroup(group);
         }
     }
-    removeGroup(group) {
+    removeGroup(group, skipActive = false) {
         const panels = [...group.model.panels]; // reassign since group panels will mutate
-        panels.forEach((panel) => {
-            this.removePanel(panel);
-        });
-        if (this._groups.size === 1) {
-            this._activeGroup = group;
-            return;
+        for (const panel of panels) {
+            this.removePanel(panel, {
+                removeEmptyGroup: false,
+                skipDispose: false,
+            });
         }
-        super.removeGroup(group);
+        super.doRemoveGroup(group, { skipActive });
     }
     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 +354,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}`);
                 }
@@ -399,10 +368,7 @@ export class DockviewComponent extends BaseGrid {
         const isGroupAlreadyFocused = this._activeGroup === group;
         super.doSetGroupActive(group, skipFocus);
         if (!isGroupAlreadyFocused && ((_a = this._activeGroup) === null || _a === void 0 ? void 0 : _a.model.activePanel)) {
-            this._onGridEvent.fire({
-                kind: 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);
         }
     }
     createGroup(options) {
@@ -424,35 +390,27 @@ export class DockviewComponent extends BaseGrid {
             }
         }
         const view = new GroupviewPanel(this, id, options);
+        view.init({ params: {}, containerApi: null }); // required to initialized .part and allow for correct disposal of group
         if (!this._groups.has(view.id)) {
             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:
-                        this._onGridEvent.fire({
-                            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 +424,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) {
+    createPanel(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 +455,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,19 +12,17 @@ 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;
+    get params(): any;
     get title(): string;
     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,14 +9,17 @@ 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 } });
         }));
     }
+    get params() {
+        var _a;
+        return (_a = this._params) === null || _a === void 0 ? void 0 : _a.params;
+    }
     get title() {
         return this._title;
     }
@@ -36,32 +38,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 +94,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.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 = [];

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

@@ -1,29 +1,14 @@
-import { Emitter, Event } from '../events';
+import { Event, TickDelayedEvent } from '../events';
 import { Gridview, IGridView } from './gridview';
 import { Position } from '../dnd/droptarget';
 import { CompositeDisposable, IValueDisposable } from '../lifecycle';
 import { ISplitviewStyles, Orientation } from '../splitview/core/splitview';
 import { IPanel } from '../panel/types';
 import { MovementOptions2 } from '../dockview/options';
-import { IGroupPanel } from '../groupview/groupPanel';
-export declare enum GroupChangeKind {
-    ADD_PANEL = "ADD_PANEL",
-    REMOVE_PANEL = "REMOVE_PANEL",
-    PANEL_ACTIVE = "PANEL_ACTIVE",
-    GROUP_ACTIVE = "GROUP_ACTIVE",
-    ADD_GROUP = "ADD_GROUP",
-    REMOVE_GROUP = "REMOVE_GROUP",
-    LAYOUT_FROM_JSON = "LAYOUT_FROM_JSON",
-    LAYOUT = "LAYOUT"
-}
-export interface GroupChangeEvent {
-    readonly kind: GroupChangeKind;
-    readonly panel?: IGroupPanel;
-}
 export declare type Direction = 'left' | 'right' | 'above' | 'below' | 'within';
 export declare function toTarget(direction: Direction): Position;
 export interface BaseGridOptions {
-    readonly proportionalLayout?: boolean;
+    readonly proportionalLayout: boolean;
     readonly orientation: Orientation;
     readonly styles?: ISplitviewStyles;
 }
@@ -43,8 +28,10 @@ export interface IBaseGrid<T extends IGridPanelView> {
     readonly activeGroup: T | undefined;
     readonly size: number;
     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;
@@ -59,10 +46,15 @@ export declare abstract class BaseGrid<T extends IGridPanelView> extends Composi
     protected readonly _groups: Map<string, IValueDisposable<T>>;
     protected readonly gridview: Gridview;
     protected _activeGroup: T | undefined;
-    protected readonly _onGridEvent: Emitter<GroupChangeEvent>;
-    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>;
+    protected readonly _bufferOnDidLayoutChange: TickDelayedEvent;
     get id(): string;
     get element(): HTMLElement;
     get size(): number;