dockview-core 2.0.0 → 2.1.1

package/dist/cjs/api/component.api.d.ts

@@ -1,4 +1,4 @@
-import { FloatingGroupOptions, IDockviewComponent, MovePanelEvent, SerializedDockview } from '../dockview/dockviewComponent';
+import { DockviewMaximizedGroupChanged, FloatingGroupOptions, IDockviewComponent, MovePanelEvent, SerializedDockview } from '../dockview/dockviewComponent';
 import { AddGroupOptions, AddPanelOptions, DockviewComponentOptions, DockviewDndOverlayEvent, MovementOptions } from '../dockview/options';
 import { Parameters } from '../panel/types';
 import { Direction } from '../gridview/baseComponentGridview';
@@ -497,7 +497,7 @@ export declare class DockviewApi implements CommonApi<SerializedDockview> {
     maximizeGroup(panel: IDockviewPanel): void;
     hasMaximizedGroup(): boolean;
     exitMaximizedGroup(): void;
-    get onDidMaximizedGroupChange(): Event<void>;
+    get onDidMaximizedGroupChange(): Event<DockviewMaximizedGroupChanged>;
     /**
      * Add a popout group in a new Window
      */

package/dist/cjs/dockview/components/titlebar/voidContainer.js

@@ -34,7 +34,6 @@ var VoidContainer = /** @class */ (function (_super) {
         _this.onDragStart = _this._onDragStart.event;
         _this._element = document.createElement('div');
         _this._element.className = 'dv-void-container';
-        _this._element.tabIndex = 0;
         _this._element.draggable = true;
         _this.addDisposables(_this._onDrop, _this._onDragStart, (0, events_1.addDisposableListener)(_this._element, 'pointerdown', function () {
             _this.accessor.doSetGroupActive(_this.group);

package/dist/cjs/dockview/components/watermark/watermark.d.ts

@@ -2,10 +2,7 @@ import { IWatermarkRenderer, WatermarkRendererInitParameters } from '../../types
 import { CompositeDisposable } from '../../../lifecycle';
 export declare class Watermark extends CompositeDisposable implements IWatermarkRenderer {
     private readonly _element;
-    private _group;
-    private _api;
     get element(): HTMLElement;
     constructor();
     init(_params: WatermarkRendererInitParameters): void;
-    private render;
 }

package/dist/cjs/dockview/components/watermark/watermark.js

@@ -16,39 +16,13 @@ var __extends = (this && this.__extends) || (function () {
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Watermark = void 0;
-var events_1 = require("../../../events");
-var dom_1 = require("../../../dom");
 var lifecycle_1 = require("../../../lifecycle");
-var svg_1 = require("../../../svg");
 var Watermark = /** @class */ (function (_super) {
     __extends(Watermark, _super);
     function Watermark() {
         var _this = _super.call(this) || this;
         _this._element = document.createElement('div');
         _this._element.className = 'dv-watermark';
-        var title = document.createElement('div');
-        title.className = 'dv-watermark-title';
-        var emptySpace = document.createElement('span');
-        emptySpace.style.flexGrow = '1';
-        var content = document.createElement('div');
-        content.className = 'dv-watermark-content';
-        _this._element.appendChild(title);
-        _this._element.appendChild(content);
-        var actionsContainer = document.createElement('div');
-        actionsContainer.className = 'dv-actions-container';
-        var closeAnchor = document.createElement('div');
-        closeAnchor.className = 'dv-close-action';
-        closeAnchor.appendChild((0, svg_1.createCloseButton)());
-        actionsContainer.appendChild(closeAnchor);
-        title.appendChild(emptySpace);
-        title.appendChild(actionsContainer);
-        _this.addDisposables((0, events_1.addDisposableListener)(closeAnchor, 'click', function (event) {
-            var _a;
-            event.preventDefault();
-            if (_this._group) {
-                (_a = _this._api) === null || _a === void 0 ? void 0 : _a.removeGroup(_this._group);
-            }
-        }));
         return _this;
     }
     Object.defineProperty(Watermark.prototype, "element", {
@@ -59,13 +33,7 @@ var Watermark = /** @class */ (function (_super) {
         configurable: true
     });
     Watermark.prototype.init = function (_params) {
-        this._api = _params.containerApi;
-        this._group = _params.group;
-        this.render();
-    };
-    Watermark.prototype.render = function () {
-        var isOneGroup = !!(this._api && this._api.size <= 1);
-        (0, dom_1.toggleClass)(this.element, 'dv-has-actions', isOneGroup);
+        // noop
     };
     return Watermark;
 }(lifecycle_1.CompositeDisposable));

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

@@ -14,6 +14,27 @@ import { DockviewFloatingGroupPanel } from './dockviewFloatingGroupPanel';
 import { GroupDragEvent, TabDragEvent } from './components/titlebar/tabsContainer';
 import { AnchoredBox, AnchorPosition, Box } from '../types';
 import { DockviewPanelRenderer, OverlayRenderContainer } from '../overlay/overlayRenderContainer';
+export interface DockviewPopoutGroupOptions {
+    /**
+     * The position of the popout group
+     */
+    position?: Box;
+    /**
+     * The same-origin path at which the popout window will be created
+     *
+     * Defaults to `/popout.html` if not provided
+     */
+    popoutUrl?: string;
+    onDidOpen?: (event: {
+        id: string;
+        window: Window;
+    }) => void;
+    onWillClose?: (event: {
+        id: string;
+        window: Window;
+    }) => void;
+    overridePopoutGroup?: DockviewGroupPanel;
+}
 export interface PanelReference {
     update: (event: {
         params: {
@@ -28,6 +49,7 @@ export interface SerializedFloatingGroup {
 }
 export interface SerializedPopoutGroup {
     data: GroupPanelViewState;
+    url?: string;
     gridReferenceGroup?: string;
     position: Box | null;
 }
@@ -79,6 +101,10 @@ export interface FloatingGroupOptionsInternal extends FloatingGroupOptions {
     inDragMode?: boolean;
     skipActiveGroup?: boolean;
 }
+export interface DockviewMaximizedGroupChanged {
+    group: DockviewGroupPanel;
+    isMaximized: boolean;
+}
 export interface IDockviewComponent extends IBaseGrid<DockviewGroupPanel> {
     readonly activePanel: IDockviewPanel | undefined;
     readonly totalPanels: number;
@@ -99,6 +125,7 @@ export interface IDockviewComponent extends IBaseGrid<DockviewGroupPanel> {
     readonly onDidActiveGroupChange: Event<DockviewGroupPanel | undefined>;
     readonly onUnhandledDragOverEvent: Event<DockviewDndOverlayEvent>;
     readonly onDidMovePanel: Event<MovePanelEvent>;
+    readonly onDidMaximizedGroupChange: Event<DockviewMaximizedGroupChanged>;
     readonly options: DockviewComponentOptions;
     updateOptions(options: DockviewOptions): void;
     moveGroupOrPanel(options: MoveGroupOrPanelOptions): void;
@@ -160,6 +187,8 @@ export declare class DockviewComponent extends BaseGrid<DockviewGroupPanel> impl
     readonly onDidActivePanelChange: Event<IDockviewPanel | undefined>;
     private readonly _onDidMovePanel;
     readonly onDidMovePanel: Event<MovePanelEvent>;
+    private readonly _onDidMaximizedGroupChange;
+    readonly onDidMaximizedGroupChange: Event<DockviewMaximizedGroupChanged>;
     private readonly _floatingGroups;
     private readonly _popoutGroups;
     private readonly _rootDropTarget;
@@ -179,19 +208,8 @@ export declare class DockviewComponent extends BaseGrid<DockviewGroupPanel> impl
     get gap(): number;
     get floatingGroups(): DockviewFloatingGroupPanel[];
     constructor(parentElement: HTMLElement, options: DockviewComponentOptions);
-    addPopoutGroup(itemToPopout: DockviewPanel | DockviewGroupPanel, options?: {
-        position?: Box;
-        popoutUrl?: string;
-        onDidOpen?: (event: {
-            id: string;
-            window: Window;
-        }) => void;
-        onWillClose?: (event: {
-            id: string;
-            window: Window;
-        }) => void;
-        overridePopoutGroup?: DockviewGroupPanel;
-    }): Promise<boolean>;
+    setVisible(panel: DockviewGroupPanel, visible: boolean): void;
+    addPopoutGroup(itemToPopout: DockviewPanel | DockviewGroupPanel, options?: DockviewPopoutGroupOptions): Promise<boolean>;
     addFloatingGroup(item: DockviewPanel | DockviewGroupPanel, options?: FloatingGroupOptionsInternal): void;
     private orthogonalize;
     updateOptions(options: Partial<DockviewComponentOptions>): void;
@@ -213,7 +231,7 @@ export declare class DockviewComponent extends BaseGrid<DockviewGroupPanel> impl
     addPanel<T extends object = Parameters>(options: AddPanelOptions<T>): DockviewPanel;
     removePanel(panel: IDockviewPanel, options?: {
         removeEmptyGroup: boolean;
-        skipDispose: boolean;
+        skipDispose?: boolean;
         skipSetActiveGroup?: boolean;
     }): void;
     createWatermarkComponent(): IWatermarkRenderer;

package/dist/cjs/dockview/dockviewComponent.js

@@ -144,6 +144,8 @@ var DockviewComponent = /** @class */ (function (_super) {
         _this.onDidActivePanelChange = _this._onDidActivePanelChange.event;
         _this._onDidMovePanel = new events_1.Emitter();
         _this.onDidMovePanel = _this._onDidMovePanel.event;
+        _this._onDidMaximizedGroupChange = new events_1.Emitter();
+        _this.onDidMaximizedGroupChange = _this._onDidMaximizedGroupChange.event;
         _this._floatingGroups = [];
         _this._popoutGroups = [];
         _this._onDidRemoveGroup = new events_1.Emitter();
@@ -170,6 +172,11 @@ var DockviewComponent = /** @class */ (function (_super) {
             if (!_this._moving) {
                 _this._onDidActiveGroupChange.fire(event);
             }
+        }), _this.onDidMaximizedChange(function (event) {
+            _this._onDidMaximizedGroupChange.fire({
+                group: event.panel,
+                isMaximized: event.isMaximized,
+            });
         }), events_1.Event.any(_this.onDidAdd, _this.onDidRemove)(function () {
             _this.updateWatermark();
         }), events_1.Event.any(_this.onDidAddPanel, _this.onDidRemovePanel, _this.onDidAddGroup, _this.onDidRemove, _this.onDidMovePanel, _this.onDidActivePanelChange)(function () {
@@ -358,9 +365,29 @@ var DockviewComponent = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    DockviewComponent.prototype.setVisible = function (panel, visible) {
+        switch (panel.api.location.type) {
+            case 'grid':
+                _super.prototype.setVisible.call(this, panel, visible);
+                break;
+            case 'floating': {
+                var item = this.floatingGroups.find(function (floatingGroup) { return 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;
+        }
+    };
     DockviewComponent.prototype.addPopoutGroup = function (itemToPopout, options) {
         var _this = this;
-        var _a, _b, _c;
+        var _a, _b, _c, _d, _e;
         if (itemToPopout instanceof dockviewPanel_1.DockviewPanel &&
             itemToPopout.group.size === 1) {
             return this.addPopoutGroup(itemToPopout.group, options);
@@ -383,7 +410,7 @@ var DockviewComponent = /** @class */ (function (_super) {
         var 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();
         var _window = new popoutWindow_1.PopoutWindow("".concat(this.id, "-").concat(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,
@@ -397,7 +424,6 @@ var DockviewComponent = /** @class */ (function (_super) {
         return _window
             .open()
             .then(function (popoutContainer) {
-            var _a;
             if (_window.isDisposed) {
                 return false;
             }
@@ -417,14 +443,19 @@ var DockviewComponent = /** @class */ (function (_super) {
              * of this case is when being called from the `fromJSON(...)` method
              */
             var isGroupAddedToDom = referenceGroup.element.parentElement !== null;
-            var group = !isGroupAddedToDom
-                ? referenceGroup
-                : (_a = options === null || options === void 0 ? void 0 : options.overridePopoutGroup) !== null && _a !== void 0 ? _a : _this.createGroup({ id: groupId });
-            group.model.renderContainer = overlayRenderContainer;
-            group.layout(_window.window.innerWidth, _window.window.innerHeight);
-            if (!_this._groups.has(group.api.id)) {
+            var group;
+            if (!isGroupAddedToDom) {
+                group = referenceGroup;
+            }
+            else if (options === null || options === void 0 ? void 0 : options.overridePopoutGroup) {
+                group = options.overridePopoutGroup;
+            }
+            else {
+                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_1.DockviewPanel) {
                     _this.movingLock(function () {
@@ -457,6 +488,7 @@ var DockviewComponent = /** @class */ (function (_super) {
             group.model.location = {
                 type: 'popout',
                 getWindow: function () { return _window.window; },
+                popoutUrl: options === null || options === void 0 ? void 0 : options.popoutUrl,
             };
             if (isGroupAddedToDom &&
                 itemToPopout.api.location.type === 'grid') {
@@ -473,16 +505,15 @@ var DockviewComponent = /** @class */ (function (_super) {
                 (_a = _window.window) === null || _a === void 0 ? void 0 : _a.focus();
             }));
             var returnedGroup;
+            var isValidReferenceGroup = isGroupAddedToDom &&
+                referenceGroup &&
+                _this.getPanel(referenceGroup.id);
             var value = {
                 window: _window,
                 popoutGroup: group,
-                referenceGroup: !isGroupAddedToDom
-                    ? undefined
-                    : referenceGroup
-                        ? _this.getPanel(referenceGroup.id)
-                            ? referenceGroup.id
-                            : undefined
-                        : undefined,
+                referenceGroup: isValidReferenceGroup
+                    ? referenceGroup.id
+                    : undefined,
                 disposable: {
                     dispose: function () {
                         popoutWindowDisposable.dispose();
@@ -866,6 +897,9 @@ var DockviewComponent = /** @class */ (function (_super) {
                 data: group.popoutGroup.toJSON(),
                 gridReferenceGroup: group.referenceGroup,
                 position: group.window.dimensions(),
+                url: group.popoutGroup.api.location.type === 'popout'
+                    ? group.popoutGroup.api.location.popoutUrl
+                    : undefined,
             };
         });
         var result = {
@@ -977,7 +1011,7 @@ var DockviewComponent = /** @class */ (function (_super) {
             try {
                 for (var serializedPopoutGroups_1 = __values(serializedPopoutGroups), serializedPopoutGroups_1_1 = serializedPopoutGroups_1.next(); !serializedPopoutGroups_1_1.done; serializedPopoutGroups_1_1 = serializedPopoutGroups_1.next()) {
                     var serializedPopoutGroup = serializedPopoutGroups_1_1.value;
-                    var data_2 = serializedPopoutGroup.data, position = serializedPopoutGroup.position, gridReferenceGroup = serializedPopoutGroup.gridReferenceGroup;
+                    var data_2 = serializedPopoutGroup.data, position = serializedPopoutGroup.position, gridReferenceGroup = serializedPopoutGroup.gridReferenceGroup, url = serializedPopoutGroup.url;
                     var group = createGroupFromSerializedState_1(data_2);
                     this.addPopoutGroup((_k = (gridReferenceGroup
                         ? this.getPanel(gridReferenceGroup)
@@ -986,6 +1020,7 @@ var DockviewComponent = /** @class */ (function (_super) {
                         overridePopoutGroup: gridReferenceGroup
                             ? group
                             : undefined,
+                        popoutUrl: url,
                     });
                 }
             }
@@ -1276,7 +1311,6 @@ var DockviewComponent = /** @class */ (function (_super) {
     DockviewComponent.prototype.removePanel = function (panel, options) {
         if (options === void 0) { options = {
             removeEmptyGroup: true,
-            skipDispose: false,
         }; }
         var group = panel.group;
         if (!group) {
@@ -1431,7 +1465,7 @@ var DockviewComponent = /** @class */ (function (_super) {
                         var refGroup = selectedGroup.referenceGroup
                             ? this.getPanel(selectedGroup.referenceGroup)
                             : undefined;
-                        if (refGroup) {
+                        if (refGroup && refGroup.panels.length === 0) {
                             this.removeGroup(refGroup);
                         }
                     }

package/dist/cjs/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;

package/dist/cjs/dockview/dockviewGroupPanelModel.js

@@ -599,7 +599,10 @@ var DockviewGroupPanelModel = /** @class */ (function (_super) {
         this.doClose(panel);
     };
     DockviewGroupPanelModel.prototype.doClose = function (panel) {
-        this.accessor.removePanel(panel);
+        var isLast = this.panels.length === 1 && this.accessor.groups.length === 1;
+        this.accessor.removePanel(panel, isLast && this.accessor.options.noPanelsOverlay === 'emptyGroup'
+            ? { removeEmptyGroup: false }
+            : undefined);
     };
     DockviewGroupPanelModel.prototype.isPanelActive = function (panel) {
         return this._activePanel === panel;
@@ -714,7 +717,6 @@ var DockviewGroupPanelModel = /** @class */ (function (_super) {
     DockviewGroupPanelModel.prototype.updateContainer = function () {
         var _this = this;
         var _a, _b;
-        (0, dom_1.toggleClass)(this.container, 'dv-empty', this.isEmpty);
         this.panels.forEach(function (panel) { return panel.runEvents(); });
         if (this.isEmpty && !this.watermark) {
             var watermark = this.accessor.createWatermarkComponent();
@@ -728,14 +730,12 @@ var DockviewGroupPanelModel = /** @class */ (function (_super) {
                     _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();
         }
     };
     DockviewGroupPanelModel.prototype.canDisplayOverlay = function (event, position, target) {

package/dist/cjs/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;

package/dist/cjs/dockview/options.js

@@ -42,6 +42,7 @@ exports.PROPERTY_KEYS = (function () {
         disableDnd: undefined,
         gap: undefined,
         className: undefined,
+        noPanelsOverlay: undefined,
     };
     return Object.keys(properties);
 })();

package/dist/cjs/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;

package/dist/cjs/gridview/baseComponentGridview.js

@@ -62,6 +62,8 @@ var BaseGrid = /** @class */ (function (_super) {
         _this.onDidRemove = _this._onDidRemove.event;
         _this._onDidAdd = new events_1.Emitter();
         _this.onDidAdd = _this._onDidAdd.event;
+        _this._onDidMaximizedChange = new events_1.Emitter();
+        _this.onDidMaximizedChange = _this._onDidMaximizedChange.event;
         _this._onDidActiveChange = new events_1.Emitter();
         _this.onDidActiveChange = _this._onDidActiveChange.event;
         _this._bufferOnDidLayoutChange = new events_1.AsapEvent();
@@ -77,7 +79,12 @@ var BaseGrid = /** @class */ (function (_super) {
         _this.gridview.locked = !!options.locked;
         _this.element.appendChild(_this.gridview.element);
         _this.layout(0, 0, true); // set some elements height/widths
-        _this.addDisposables(_this.gridview.onDidViewVisibilityChange(function () {
+        _this.addDisposables(_this.gridview.onDidMaximizedNodeChange(function (event) {
+            _this._onDidMaximizedChange.fire({
+                panel: event.view,
+                isMaximized: event.isMaximized,
+            });
+        }), _this.gridview.onDidViewVisibilityChange(function () {
             return _this._onDidViewVisibilityChangeMicroTaskQueue.fire();
         }), _this.onDidViewVisibilityChangeMicroTaskQueue(function () {
             _this.layout(_this.width, _this.height, true);
@@ -215,13 +222,6 @@ var BaseGrid = /** @class */ (function (_super) {
     BaseGrid.prototype.hasMaximizedGroup = function () {
         return this.gridview.hasMaximizedView();
     };
-    Object.defineProperty(BaseGrid.prototype, "onDidMaximizedGroupChange", {
-        get: function () {
-            return this.gridview.onDidMaximizedNodeChange;
-        },
-        enumerable: false,
-        configurable: true
-    });
     BaseGrid.prototype.doAddGroup = function (group, location, size) {
         if (location === void 0) { location = [0]; }
         this.gridview.addView(group, size !== null && size !== void 0 ? size : splitview_1.Sizing.Distribute, location);

package/dist/cjs/gridview/gridview.d.ts

@@ -77,11 +77,19 @@ export interface INodeDescriptor {
 export interface IViewDeserializer {
     fromJSON: (data: ISerializedLeafNode) => IGridView;
 }
+export interface SerializedNodeDescriptor {
+    location: number[];
+}
 export interface SerializedGridview<T> {
     root: SerializedGridObject<T>;
     width: number;
     height: number;
     orientation: Orientation;
+    maximizedNode?: SerializedNodeDescriptor;
+}
+export interface MaximizedViewChanged {
+    view: IGridView;
+    isMaximized: boolean;
 }
 export declare class Gridview implements IDisposable {
     readonly proportionalLayout: boolean;
@@ -100,7 +108,7 @@ export declare class Gridview implements IDisposable {
     private readonly _onDidViewVisibilityChange;
     readonly onDidViewVisibilityChange: Event<void>;
     private readonly _onDidMaximizedNodeChange;
-    readonly onDidMaximizedNodeChange: Event<void>;
+    readonly onDidMaximizedNodeChange: Event<MaximizedViewChanged>;
     get length(): number;
     get orientation(): Orientation;
     set orientation(orientation: Orientation);

package/dist/cjs/gridview/gridview.js

@@ -299,6 +299,7 @@ var Gridview = /** @class */ (function () {
         if (this.hasMaximizedView()) {
             this.exitMaximizedView();
         }
+        serializeBranchNode(this.getView(), this.orientation);
         var hiddenOnMaximize = [];
         function hideAllViewsBut(parent, exclude) {
             for (var i = 0; i < parent.children.length; i++) {
@@ -320,7 +321,10 @@ var Gridview = /** @class */ (function () {
         }
         hideAllViewsBut(this.root, node);
         this._maximizedNode = { leaf: node, hiddenOnMaximize: hiddenOnMaximize };
-        this._onDidMaximizedNodeChange.fire();
+        this._onDidMaximizedNodeChange.fire({
+            view: node.view,
+            isMaximized: true,
+        });
     };
     Gridview.prototype.exitMaximizedView = function () {
         if (!this._maximizedNode) {
@@ -341,24 +345,51 @@ var Gridview = /** @class */ (function () {
             }
         }
         showViewsInReverseOrder(this.root);
+        var tmp = this._maximizedNode.leaf;
         this._maximizedNode = undefined;
-        this._onDidMaximizedNodeChange.fire();
+        this._onDidMaximizedNodeChange.fire({
+            view: tmp.view,
+            isMaximized: false,
+        });
     };
     Gridview.prototype.serialize = function () {
+        var maximizedView = this.maximizedView();
+        var maxmizedViewLocation;
+        if (maximizedView) {
+            /**
+             * The minimum information we can get away with in order to serialize a maxmized view is it's location within the grid
+             * which is represented as a branch of indices
+             */
+            maxmizedViewLocation = getGridLocation(maximizedView.element);
+        }
         if (this.hasMaximizedView()) {
             /**
-             * do not persist maximized view state
-             * firstly exit any maximized views to ensure the correct dimensions are persisted
+             * the saved layout cannot be in its maxmized state otherwise all of the underlying
+             * view dimensions will be wrong
+             *
+             * To counteract this we temporaily remove the maximized view to compute the serialized output
+             * of the grid before adding back the maxmized view as to not alter the layout from the users
+             * perspective when `.toJSON()` is called
              */
             this.exitMaximizedView();
         }
         var root = serializeBranchNode(this.getView(), this.orientation);
-        return {
+        var resullt = {
             root: root,
             width: this.width,
             height: this.height,
             orientation: this.orientation,
         };
+        if (maxmizedViewLocation) {
+            resullt.maximizedNode = {
+                location: maxmizedViewLocation,
+            };
+        }
+        if (maximizedView) {
+            // replace any maximzied view that was removed for serialization purposes
+            this.maximizeView(maximizedView);
+        }
+        return resullt;
     };
     Gridview.prototype.dispose = function () {
         this.disposable.dispose();
@@ -377,6 +408,19 @@ var Gridview = /** @class */ (function () {
         var orientation = json.orientation;
         var height = orientation === splitview_1.Orientation.VERTICAL ? json.height : json.width;
         this._deserialize(json.root, orientation, deserializer, height);
+        /**
+         * The deserialied layout must be positioned through this.layout(...)
+         * before any maximizedNode can be positioned
+         */
+        this.layout(json.width, json.height);
+        if (json.maximizedNode) {
+            var location_1 = json.maximizedNode.location;
+            var _a = __read(this.getNode(location_1), 2), _ = _a[0], node = _a[1];
+            if (!(node instanceof leafNode_1.LeafNode)) {
+                return;
+            }
+            this.maximizeView(node.view);
+        }
     };
     Gridview.prototype._deserialize = function (root, orientation, deserializer, orthogonalSize) {
         this.root = this._deserializeNode(root, orientation, deserializer, orthogonalSize);

package/dist/cjs/overlay/overlay.d.ts

@@ -12,15 +12,18 @@ export declare class Overlay extends CompositeDisposable {
     private static readonly MINIMUM_WIDTH;
     private verticalAlignment;
     private horiziontalAlignment;
+    private _isVisible;
     set minimumInViewportWidth(value: number | undefined);
     set minimumInViewportHeight(value: number | undefined);
     get element(): HTMLElement;
+    get isVisible(): boolean;
     constructor(options: AnchoredBox & {
         container: HTMLElement;
         content: HTMLElement;
         minimumInViewportWidth?: number;
         minimumInViewportHeight?: number;
     });
+    setVisible(isVisible: boolean): void;
     bringToFront(): void;
     setBounds(bounds?: Partial<AnchoredBox>): void;
     toJSON(): AnchoredBox;