dockview-core 1.17.2 → 2.1.0

package/dist/esm/dockview/dockviewComponent.js

@@ -110,6 +110,8 @@ export class DockviewComponent extends BaseGrid {
         this.onDidActivePanelChange = this._onDidActivePanelChange.event;
         this._onDidMovePanel = new Emitter();
         this.onDidMovePanel = this._onDidMovePanel.event;
+        this._onDidMaximizedGroupChange = new Emitter();
+        this.onDidMaximizedGroupChange = this._onDidMaximizedGroupChange.event;
         this._floatingGroups = [];
         this._popoutGroups = [];
         this._onDidRemoveGroup = new Emitter();
@@ -136,6 +138,11 @@ export class DockviewComponent extends BaseGrid {
             if (!this._moving) {
                 this._onDidActiveGroupChange.fire(event);
             }
+        }), this.onDidMaximizedChange((event) => {
+            this._onDidMaximizedGroupChange.fire({
+                group: event.panel,
+                isMaximized: event.isMaximized,
+            });
         }), Event.any(this.onDidAdd, this.onDidRemove)(() => {
             this.updateWatermark();
         }), Event.any(this.onDidAddPanel, this.onDidRemovePanel, this.onDidAddGroup, this.onDidRemove, this.onDidMovePanel, this.onDidActivePanelChange)(() => {
@@ -234,8 +241,28 @@ export class DockviewComponent extends BaseGrid {
         this._api = new DockviewApi(this);
         this.updateWatermark();
     }
+    setVisible(panel, visible) {
+        switch (panel.api.location.type) {
+            case 'grid':
+                super.setVisible(panel, visible);
+                break;
+            case 'floating': {
+                const item = this.floatingGroups.find((floatingGroup) => floatingGroup.group === panel);
+                if (item) {
+                    item.overlay.setVisible(visible);
+                    panel.api._onDidVisibilityChange.fire({
+                        isVisible: visible,
+                    });
+                }
+                break;
+            }
+            case 'popout':
+                console.warn('dockview: You cannot hide a group that is in a popout window');
+                break;
+        }
+    }
     addPopoutGroup(itemToPopout, options) {
-        var _a, _b, _c;
+        var _a, _b, _c, _d, _e;
         if (itemToPopout instanceof DockviewPanel &&
             itemToPopout.group.size === 1) {
             return this.addPopoutGroup(itemToPopout.group, options);
@@ -256,12 +283,9 @@ export class DockviewComponent extends BaseGrid {
         }
         const box = getBox();
         const groupId = (_b = (_a = options === null || options === void 0 ? void 0 : options.overridePopoutGroup) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : this.getNextGroupId();
-        if (itemToPopout.api.location.type === 'grid') {
-            itemToPopout.api.setVisible(false);
-        }
         const _window = new PopoutWindow(`${this.id}-${groupId}`, // unique id
         theme !== null && theme !== void 0 ? theme : '', {
-            url: (_c = options === null || options === void 0 ? void 0 : options.popoutUrl) !== null && _c !== void 0 ? _c : '/popout.html',
+            url: (_e = (_c = options === null || options === void 0 ? void 0 : options.popoutUrl) !== null && _c !== void 0 ? _c : (_d = this.options) === null || _d === void 0 ? void 0 : _d.popoutUrl) !== null && _e !== void 0 ? _e : '/popout.html',
             left: window.screenX + box.left,
             top: window.screenY + box.top,
             width: box.width,
@@ -275,13 +299,12 @@ export class DockviewComponent extends BaseGrid {
         return _window
             .open()
             .then((popoutContainer) => {
-            var _a;
             if (_window.isDisposed) {
-                return;
+                return false;
             }
             if (popoutContainer === null) {
                 popoutWindowDisposable.dispose();
-                return;
+                return false;
             }
             const gready = document.createElement('div');
             gready.className = 'dv-overlay-render-container';
@@ -290,30 +313,45 @@ export class DockviewComponent extends BaseGrid {
                 ? itemToPopout.group
                 : itemToPopout;
             const referenceLocation = itemToPopout.api.location.type;
-            const group = (_a = options === null || options === void 0 ? void 0 : options.overridePopoutGroup) !== null && _a !== void 0 ? _a : this.createGroup({ id: groupId });
-            group.model.renderContainer = overlayRenderContainer;
-            if (!(options === null || options === void 0 ? void 0 : options.overridePopoutGroup)) {
-                this._onDidAddGroup.fire(group);
+            /**
+             * The group that is being added doesn't already exist within the DOM, the most likely occurance
+             * of this case is when being called from the `fromJSON(...)` method
+             */
+            const isGroupAddedToDom = referenceGroup.element.parentElement !== null;
+            let group;
+            if (!isGroupAddedToDom) {
+                group = referenceGroup;
             }
-            if (itemToPopout instanceof DockviewPanel) {
-                this.movingLock(() => {
-                    const panel = referenceGroup.model.removePanel(itemToPopout);
-                    group.model.openPanel(panel);
-                });
+            else if (options === null || options === void 0 ? void 0 : options.overridePopoutGroup) {
+                group = options.overridePopoutGroup;
             }
             else {
-                this.movingLock(() => moveGroupWithoutDestroying({
-                    from: referenceGroup,
-                    to: group,
-                }));
-                switch (referenceLocation) {
-                    case 'grid':
-                        referenceGroup.api.setVisible(false);
-                        break;
-                    case 'floating':
-                    case 'popout':
-                        this.removeGroup(referenceGroup);
-                        break;
+                group = this.createGroup({ id: groupId });
+                this._onDidAddGroup.fire(group);
+            }
+            group.model.renderContainer = overlayRenderContainer;
+            group.layout(_window.window.innerWidth, _window.window.innerHeight);
+            if (!(options === null || options === void 0 ? void 0 : options.overridePopoutGroup) && isGroupAddedToDom) {
+                if (itemToPopout instanceof DockviewPanel) {
+                    this.movingLock(() => {
+                        const panel = referenceGroup.model.removePanel(itemToPopout);
+                        group.model.openPanel(panel);
+                    });
+                }
+                else {
+                    this.movingLock(() => moveGroupWithoutDestroying({
+                        from: referenceGroup,
+                        to: group,
+                    }));
+                    switch (referenceLocation) {
+                        case 'grid':
+                            referenceGroup.api.setVisible(false);
+                            break;
+                        case 'floating':
+                        case 'popout':
+                            this.removeGroup(referenceGroup);
+                            break;
+                    }
                 }
             }
             popoutContainer.classList.add('dv-dockview');
@@ -323,7 +361,12 @@ export class DockviewComponent extends BaseGrid {
             group.model.location = {
                 type: 'popout',
                 getWindow: () => _window.window,
+                popoutUrl: options === null || options === void 0 ? void 0 : options.popoutUrl,
             };
+            if (isGroupAddedToDom &&
+                itemToPopout.api.location.type === 'grid') {
+                itemToPopout.api.setVisible(false);
+            }
             this.doSetGroupAndPanelActive(group);
             popoutWindowDisposable.addDisposables(group.api.onDidActiveChange((event) => {
                 var _a;
@@ -335,10 +378,13 @@ export class DockviewComponent extends BaseGrid {
                 (_a = _window.window) === null || _a === void 0 ? void 0 : _a.focus();
             }));
             let returnedGroup;
+            const isValidReferenceGroup = isGroupAddedToDom &&
+                referenceGroup &&
+                this.getPanel(referenceGroup.id);
             const value = {
                 window: _window,
                 popoutGroup: group,
-                referenceGroup: this.getPanel(referenceGroup.id)
+                referenceGroup: isValidReferenceGroup
                     ? referenceGroup.id
                     : undefined,
                 disposable: {
@@ -355,9 +401,10 @@ export class DockviewComponent extends BaseGrid {
              * window dimensions
              */
             addDisposableWindowListener(_window.window, 'resize', () => {
-                group.layout(window.innerWidth, window.innerHeight);
+                group.layout(_window.window.innerWidth, _window.window.innerHeight);
             }), overlayRenderContainer, Disposable.from(() => {
-                if (this.getPanel(referenceGroup.id)) {
+                if (isGroupAddedToDom &&
+                    this.getPanel(referenceGroup.id)) {
                     this.movingLock(() => moveGroupWithoutDestroying({
                         from: group,
                         to: referenceGroup,
@@ -372,21 +419,27 @@ export class DockviewComponent extends BaseGrid {
                     }
                 }
                 else if (this.getPanel(group.id)) {
-                    const removedGroup = this.doRemoveGroup(group, {
+                    this.doRemoveGroup(group, {
                         skipDispose: true,
                         skipActive: true,
+                        skipPopoutReturn: true,
                     });
+                    const removedGroup = group;
                     removedGroup.model.renderContainer =
                         this.overlayRenderContainer;
                     removedGroup.model.location = { type: 'grid' };
                     returnedGroup = removedGroup;
+                    this.doAddGroup(removedGroup, [0]);
+                    this.doSetGroupAndPanelActive(removedGroup);
                 }
             }));
             this._popoutGroups.push(value);
             this.updateWatermark();
+            return true;
         })
             .catch((err) => {
             console.error('dockview: failed to create popout window', err);
+            return false;
         });
     }
     addFloatingGroup(item, options) {
@@ -490,7 +543,7 @@ export class DockviewComponent extends BaseGrid {
                 : (_c = (_b = this.options.floatingGroupBounds) === null || _b === void 0 ? void 0 : _b.minimumWidthWithinViewport) !== null && _c !== void 0 ? _c : DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE, minimumInViewportHeight: this.options.floatingGroupBounds === 'boundedWithinViewport'
                 ? undefined
                 : (_e = (_d = this.options.floatingGroupBounds) === null || _d === void 0 ? void 0 : _d.minimumHeightWithinViewport) !== null && _e !== void 0 ? _e : DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE }));
-        const el = group.element.querySelector('.void-container');
+        const el = group.element.querySelector('.dv-void-container');
         if (!el) {
             throw new Error('failed to find drag handle');
         }
@@ -684,6 +737,9 @@ export class DockviewComponent extends BaseGrid {
                 data: group.popoutGroup.toJSON(),
                 gridReferenceGroup: group.referenceGroup,
                 position: group.window.dimensions(),
+                url: group.popoutGroup.api.location.type === 'popout'
+                    ? group.popoutGroup.api.location.popoutUrl
+                    : undefined,
             };
         });
         const result = {
@@ -770,16 +826,16 @@ export class DockviewComponent extends BaseGrid {
             }
             const serializedPopoutGroups = (_b = data.popoutGroups) !== null && _b !== void 0 ? _b : [];
             for (const serializedPopoutGroup of serializedPopoutGroups) {
-                const { data, position, gridReferenceGroup } = serializedPopoutGroup;
+                const { data, position, gridReferenceGroup, url } = serializedPopoutGroup;
                 const group = createGroupFromSerializedState(data);
                 this.addPopoutGroup((_c = (gridReferenceGroup
                     ? this.getPanel(gridReferenceGroup)
                     : undefined)) !== null && _c !== void 0 ? _c : group, {
-                    skipRemoveGroup: true,
                     position: position !== null && position !== void 0 ? position : undefined,
                     overridePopoutGroup: gridReferenceGroup
                         ? group
                         : undefined,
+                    popoutUrl: url,
                 });
             }
             for (const floatingGroup of this._floatingGroups) {
@@ -793,6 +849,7 @@ export class DockviewComponent extends BaseGrid {
             }
         }
         catch (err) {
+            console.error('dockview: failed to deserialize layout. Reverting changes', err);
             /**
              * Takes all the successfully created groups and remove all of their panels.
              */
@@ -860,11 +917,13 @@ export class DockviewComponent extends BaseGrid {
             width: options.initialWidth,
             height: options.initialHeight,
         };
+        let index;
         if (options.position) {
             if (isPanelOptionsWithPanel(options.position)) {
                 const referencePanel = typeof options.position.referencePanel === 'string'
                     ? this.getGroupPanel(options.position.referencePanel)
                     : options.position.referencePanel;
+                index = options.position.index;
                 if (!referencePanel) {
                     throw new Error(`referencePanel '${options.position.referencePanel}' does not exist`);
                 }
@@ -875,6 +934,7 @@ export class DockviewComponent extends BaseGrid {
                     typeof options.position.referenceGroup === 'string'
                         ? (_a = this._groups.get(options.position.referenceGroup)) === null || _a === void 0 ? void 0 : _a.value
                         : options.position.referenceGroup;
+                index = options.position.index;
                 if (!referenceGroup) {
                     throw new Error(`referenceGroup '${options.position.referenceGroup}' does not exist`);
                 }
@@ -885,6 +945,7 @@ export class DockviewComponent extends BaseGrid {
                 group.model.openPanel(panel, {
                     skipSetActive: options.inactive,
                     skipSetGroupActive: options.inactive,
+                    index,
                 });
                 if (!options.inactive) {
                     this.doSetGroupAndPanelActive(group);
@@ -914,6 +975,7 @@ export class DockviewComponent extends BaseGrid {
                 group.model.openPanel(panel, {
                     skipSetActive: options.inactive,
                     skipSetGroupActive: options.inactive,
+                    index,
                 });
             }
             else if (referenceGroup.api.location.type === 'floating' ||
@@ -922,6 +984,7 @@ export class DockviewComponent extends BaseGrid {
                 referenceGroup.model.openPanel(panel, {
                     skipSetActive: options.inactive,
                     skipSetGroupActive: options.inactive,
+                    index,
                 });
                 referenceGroup.api.setSize({
                     width: initial === null || initial === void 0 ? void 0 : initial.width,
@@ -942,6 +1005,7 @@ export class DockviewComponent extends BaseGrid {
                 group.model.openPanel(panel, {
                     skipSetActive: options.inactive,
                     skipSetGroupActive: options.inactive,
+                    index,
                 });
                 if (!options.inactive) {
                     this.doSetGroupAndPanelActive(group);
@@ -960,6 +1024,7 @@ export class DockviewComponent extends BaseGrid {
             group.model.openPanel(panel, {
                 skipSetActive: options.inactive,
                 skipSetGroupActive: options.inactive,
+                index,
             });
         }
         else {
@@ -970,6 +1035,7 @@ export class DockviewComponent extends BaseGrid {
             group.model.openPanel(panel, {
                 skipSetActive: options.inactive,
                 skipSetGroupActive: options.inactive,
+                index,
             });
             if (!options.inactive) {
                 this.doSetGroupAndPanelActive(group);
@@ -979,7 +1045,6 @@ export class DockviewComponent extends BaseGrid {
     }
     removePanel(panel, options = {
         removeEmptyGroup: true,
-        skipDispose: false,
     }) {
         const group = panel.group;
         if (!group) {

package/dist/esm/dockview/dockviewGroupPanel.js

@@ -7,30 +7,34 @@ export class DockviewGroupPanel extends GridviewPanel {
     get minimumWidth() {
         var _a;
         const activePanelMinimumWidth = (_a = this.activePanel) === null || _a === void 0 ? void 0 : _a.minimumWidth;
-        return typeof activePanelMinimumWidth === 'number'
-            ? activePanelMinimumWidth
-            : MINIMUM_DOCKVIEW_GROUP_PANEL_WIDTH;
+        if (typeof activePanelMinimumWidth === 'number') {
+            return activePanelMinimumWidth;
+        }
+        return super.__minimumWidth();
     }
     get minimumHeight() {
         var _a;
         const activePanelMinimumHeight = (_a = this.activePanel) === null || _a === void 0 ? void 0 : _a.minimumHeight;
-        return typeof activePanelMinimumHeight === 'number'
-            ? activePanelMinimumHeight
-            : MINIMUM_DOCKVIEW_GROUP_PANEL_HEIGHT;
+        if (typeof activePanelMinimumHeight === 'number') {
+            return activePanelMinimumHeight;
+        }
+        return super.__minimumHeight();
     }
     get maximumWidth() {
         var _a;
         const activePanelMaximumWidth = (_a = this.activePanel) === null || _a === void 0 ? void 0 : _a.maximumWidth;
-        return typeof activePanelMaximumWidth === 'number'
-            ? activePanelMaximumWidth
-            : Number.MAX_SAFE_INTEGER;
+        if (typeof activePanelMaximumWidth === 'number') {
+            return activePanelMaximumWidth;
+        }
+        return super.__maximumWidth();
     }
     get maximumHeight() {
         var _a;
         const activePanelMaximumHeight = (_a = this.activePanel) === null || _a === void 0 ? void 0 : _a.maximumHeight;
-        return typeof activePanelMaximumHeight === 'number'
-            ? activePanelMaximumHeight
-            : Number.MAX_SAFE_INTEGER;
+        if (typeof activePanelMaximumHeight === 'number') {
+            return activePanelMaximumHeight;
+        }
+        return super.__maximumHeight();
     }
     get panels() {
         return this._model.panels;

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

@@ -120,6 +120,7 @@ export type DockviewGroupLocation = {
 } | {
     type: 'popout';
     getWindow: () => Window;
+    popoutUrl?: string;
 };
 export declare class WillShowOverlayLocationEvent implements IDockviewEvent {
     private readonly event;
@@ -143,7 +144,7 @@ export declare class WillShowOverlayLocationEvent implements IDockviewEvent {
 }
 export declare class DockviewGroupPanelModel extends CompositeDisposable implements IDockviewGroupPanelModel {
     private readonly container;
-    private accessor;
+    private readonly accessor;
     id: string;
     private readonly options;
     private readonly groupPanel;
@@ -158,11 +159,12 @@ export declare class DockviewGroupPanelModel extends CompositeDisposable impleme
     private _prefixHeaderActions;
     private _location;
     private mostRecentlyUsed;
+    private _overwriteRenderContainer;
     private readonly _onDidChange;
     readonly onDidChange: Event<IViewSize | undefined>;
     private _width;
     private _height;
-    private _panels;
+    private readonly _panels;
     private readonly _panelDisposables;
     private readonly _onMove;
     readonly onMove: Event<GroupMoveEvent>;
@@ -204,7 +206,6 @@ export declare class DockviewGroupPanelModel extends CompositeDisposable impleme
     set location(value: DockviewGroupLocation);
     constructor(container: HTMLElement, accessor: DockviewComponent, id: string, options: GroupOptions, groupPanel: DockviewGroupPanel);
     focusContent(): void;
-    private _overwriteRenderContainer;
     set renderContainer(value: OverlayRenderContainer | null);
     get renderContainer(): OverlayRenderContainer;
     initialize(): void;

package/dist/esm/dockview/dockviewGroupPanelModel.js

@@ -74,7 +74,7 @@ export class WillShowOverlayLocationEvent {
 }
 export class DockviewGroupPanelModel extends CompositeDisposable {
     get element() {
-        throw new Error('not supported');
+        throw new Error('dockview: not supported');
     }
     get activePanel() {
         return this._activePanel;
@@ -84,7 +84,7 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
     }
     set locked(value) {
         this._locked = value;
-        toggleClass(this.container, 'locked-groupview', value === 'no-drop-target' || value);
+        toggleClass(this.container, 'dv-locked-groupview', value === 'no-drop-target' || value);
     }
     get isActive() {
         return this._isGroupActive;
@@ -155,6 +155,7 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
         this._locked = false;
         this._location = { type: 'grid' };
         this.mostRecentlyUsed = [];
+        this._overwriteRenderContainer = null;
         this._onDidChange = new Emitter();
         this.onDidChange = this._onDidChange.event;
         this._width = 0;
@@ -185,8 +186,7 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
         this.onDidActivePanelChange = this._onDidActivePanelChange.event;
         this._onUnhandledDragOverEvent = new Emitter();
         this.onUnhandledDragOverEvent = this._onUnhandledDragOverEvent.event;
-        this._overwriteRenderContainer = null;
-        toggleClass(this.container, 'groupview', true);
+        toggleClass(this.container, 'dv-groupview', true);
         this._api = new DockviewApi(this.accessor);
         this.tabsContainer = new TabsContainer(this.accessor, this.groupPanel);
         this.contentContainer = new ContentContainer(this.accessor, this);
@@ -418,7 +418,10 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
         this.doClose(panel);
     }
     doClose(panel) {
-        this.accessor.removePanel(panel);
+        const isLast = this.panels.length === 1 && this.accessor.groups.length === 1;
+        this.accessor.removePanel(panel, isLast && this.accessor.options.noPanelsOverlay === 'emptyGroup'
+            ? { removeEmptyGroup: false }
+            : undefined);
     }
     isPanelActive(panel) {
         return this._activePanel === panel;
@@ -431,8 +434,8 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
             return;
         }
         this._isGroupActive = isGroupActive;
-        toggleClass(this.container, 'active-group', isGroupActive);
-        toggleClass(this.container, 'inactive-group', !isGroupActive);
+        toggleClass(this.container, 'dv-active-group', isGroupActive);
+        toggleClass(this.container, 'dv-inactive-group', !isGroupActive);
         this.tabsContainer.setActive(this.isActive);
         if (!this._activePanel && this.panels.length > 0) {
             this.doSetActivePanel(this.panels[0]);
@@ -524,7 +527,6 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
     }
     updateContainer() {
         var _a, _b;
-        toggleClass(this.container, 'empty', this.isEmpty);
         this.panels.forEach((panel) => panel.runEvents());
         if (this.isEmpty && !this.watermark) {
             const watermark = this.accessor.createWatermarkComponent();
@@ -538,14 +540,12 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
                     this.accessor.doSetGroupActive(this.groupPanel);
                 }
             });
-            this.tabsContainer.hide();
             this.contentContainer.element.appendChild(this.watermark.element);
         }
         if (!this.isEmpty && this.watermark) {
             this.watermark.element.remove();
             (_b = (_a = this.watermark).dispose) === null || _b === void 0 ? void 0 : _b.call(_a);
             this.watermark = undefined;
-            this.tabsContainer.show();
         }
     }
     canDisplayOverlay(event, position, target) {

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

@@ -37,10 +37,10 @@ export declare class DockviewPanel extends CompositeDisposable implements IDockv
     private _params?;
     private _title;
     private _renderer;
-    private _minimumWidth;
-    private _minimumHeight;
-    private _maximumWidth;
-    private _maximumHeight;
+    private readonly _minimumWidth;
+    private readonly _minimumHeight;
+    private readonly _maximumWidth;
+    private readonly _maximumHeight;
     get params(): Parameters | undefined;
     get title(): string | undefined;
     get group(): DockviewGroupPanel;

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

@@ -7,7 +7,7 @@ export interface IDockviewPanelModel extends IDisposable {
     readonly contentComponent: string;
     readonly tabComponent?: string;
     readonly content: IContentRenderer;
-    readonly tab?: ITabRenderer;
+    readonly tab: ITabRenderer;
     update(event: PanelUpdateEvent): void;
     layout(width: number, height: number): void;
     init(params: GroupPanelPartInitParameters): void;

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

@@ -50,6 +50,10 @@ export interface DockviewOptions {
      * Pixel gap between groups
      */
     gap?: number;
+    /**
+     * Define the behaviour of the dock when there are no panels to display. Defaults to `watermark`.
+     */
+    noPanelsOverlay?: 'emptyGroup' | 'watermark';
 }
 export interface DockviewDndOverlayEvent {
     nativeEvent: DragEvent;
@@ -102,10 +106,18 @@ export interface PanelOptions<P extends object = Parameters> {
 type RelativePanel = {
     direction?: Direction;
     referencePanel: string | IDockviewPanel;
+    /**
+     * The index to place the panel within a group, only applicable if the placement is within an existing group
+     */
+    index?: number;
 };
 type RelativeGroup = {
     direction?: Direction;
     referenceGroup: string | DockviewGroupPanel;
+    /**
+     * The index to place the panel within a group, only applicable if the placement is within an existing group
+     */
+    index?: number;
 };
 type AbsolutePosition = {
     direction: Omit<Direction, 'within'>;

package/dist/esm/dockview/options.js

@@ -33,6 +33,7 @@ export const PROPERTY_KEYS = (() => {
         disableDnd: undefined,
         gap: undefined,
         className: undefined,
+        noPanelsOverlay: undefined,
     };
     return Object.keys(properties);
 })();

package/dist/esm/dom.d.ts

@@ -1,5 +1,15 @@
 import { Event as DockviewEvent } from './events';
-import { IDisposable } from './lifecycle';
+import { IDisposable, CompositeDisposable } from './lifecycle';
+export interface OverflowEvent {
+    hasScrollX: boolean;
+    hasScrollY: boolean;
+}
+export declare class OverflowObserver extends CompositeDisposable {
+    private readonly _onDidChange;
+    readonly onDidChange: DockviewEvent<OverflowEvent>;
+    private _value;
+    constructor(el: HTMLElement);
+}
 export declare function watchElementResize(element: HTMLElement, cb: (entry: ResizeObserverEntry) => void): IDisposable;
 export declare const removeClasses: (element: HTMLElement, ...classes: string[]) => void;
 export declare const addClasses: (element: HTMLElement, ...classes: string[]) => void;

package/dist/esm/dom.js

@@ -1,5 +1,19 @@
 import { Emitter, addDisposableListener, addDisposableWindowListener, } from './events';
 import { CompositeDisposable } from './lifecycle';
+export class OverflowObserver extends CompositeDisposable {
+    constructor(el) {
+        super();
+        this._onDidChange = new Emitter();
+        this.onDidChange = this._onDidChange.event;
+        this._value = null;
+        this.addDisposables(this._onDidChange, watchElementResize(el, (entry) => {
+            const hasScrollX = entry.target.scrollWidth > entry.target.clientWidth;
+            const hasScrollY = entry.target.scrollHeight > entry.target.clientHeight;
+            this._value = { hasScrollX, hasScrollY };
+            this._onDidChange.fire(this._value);
+        }));
+    }
+}
 export function watchElementResize(element, cb) {
     const observer = new ResizeObserver((entires) => {
         /**

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

@@ -8,6 +8,10 @@ import { MovementOptions2 } from '../dockview/options';
 import { Resizable } from '../resizable';
 export type Direction = 'left' | 'right' | 'above' | 'below' | 'within';
 export declare function toTarget(direction: Direction): Position;
+export interface MaximizedChanged<T extends IGridPanelView> {
+    panel: T;
+    isMaximized: boolean;
+}
 export interface BaseGridOptions {
     readonly proportionalLayout: boolean;
     readonly orientation: Orientation;
@@ -33,6 +37,8 @@ export interface IBaseGrid<T extends IGridPanelView> extends IDisposable {
     readonly activeGroup: T | undefined;
     readonly size: number;
     readonly groups: T[];
+    readonly onDidMaximizedChange: Event<MaximizedChanged<T>>;
+    readonly onDidLayoutChange: Event<void>;
     getPanel(id: string): T | undefined;
     toJSON(): object;
     fromJSON(data: any): void;
@@ -44,8 +50,6 @@ export interface IBaseGrid<T extends IGridPanelView> extends IDisposable {
     isMaximizedGroup(panel: T): boolean;
     exitMaximizedGroup(): void;
     hasMaximizedGroup(): boolean;
-    readonly onDidMaximizedGroupChange: Event<void>;
-    readonly onDidLayoutChange: Event<void>;
 }
 export declare abstract class BaseGrid<T extends IGridPanelView> extends Resizable implements IBaseGrid<T> {
     private readonly _id;
@@ -56,6 +60,8 @@ export declare abstract class BaseGrid<T extends IGridPanelView> extends Resizab
     readonly onDidRemove: Event<T>;
     private readonly _onDidAdd;
     readonly onDidAdd: Event<T>;
+    private readonly _onDidMaximizedChange;
+    readonly onDidMaximizedChange: Event<MaximizedChanged<T>>;
     private readonly _onDidActiveChange;
     readonly onDidActiveChange: Event<T | undefined>;
     protected readonly _bufferOnDidLayoutChange: AsapEvent;
@@ -86,7 +92,6 @@ export declare abstract class BaseGrid<T extends IGridPanelView> extends Resizab
     isMaximizedGroup(panel: T): boolean;
     exitMaximizedGroup(): void;
     hasMaximizedGroup(): boolean;
-    get onDidMaximizedGroupChange(): Event<void>;
     protected doAddGroup(group: T, location?: number[], size?: number): void;
     protected doRemoveGroup(group: T, options?: {
         skipActive?: boolean;