dockview-core 2.0.0 → 2.1.1

package/dist/esm/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/esm/dockview/components/titlebar/voidContainer.js

@@ -18,7 +18,6 @@ export class VoidContainer extends CompositeDisposable {
         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, addDisposableListener(this._element, 'pointerdown', () => {
             this.accessor.doSetGroupActive(this.group);

package/dist/esm/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/esm/dockview/components/watermark/watermark.js

@@ -1,7 +1,4 @@
-import { addDisposableListener } from '../../../events';
-import { toggleClass } from '../../../dom';
 import { CompositeDisposable } from '../../../lifecycle';
-import { createCloseButton } from '../../../svg';
 export class Watermark extends CompositeDisposable {
     get element() {
         return this._element;
@@ -10,37 +7,8 @@ export class Watermark extends CompositeDisposable {
         super();
         this._element = document.createElement('div');
         this._element.className = 'dv-watermark';
-        const title = document.createElement('div');
-        title.className = 'dv-watermark-title';
-        const emptySpace = document.createElement('span');
-        emptySpace.style.flexGrow = '1';
-        const content = document.createElement('div');
-        content.className = 'dv-watermark-content';
-        this._element.appendChild(title);
-        this._element.appendChild(content);
-        const actionsContainer = document.createElement('div');
-        actionsContainer.className = 'dv-actions-container';
-        const closeAnchor = document.createElement('div');
-        closeAnchor.className = 'dv-close-action';
-        closeAnchor.appendChild(createCloseButton());
-        actionsContainer.appendChild(closeAnchor);
-        title.appendChild(emptySpace);
-        title.appendChild(actionsContainer);
-        this.addDisposables(addDisposableListener(closeAnchor, 'click', (event) => {
-            var _a;
-            event.preventDefault();
-            if (this._group) {
-                (_a = this._api) === null || _a === void 0 ? void 0 : _a.removeGroup(this._group);
-            }
-        }));
     }
     init(_params) {
-        this._api = _params.containerApi;
-        this._group = _params.group;
-        this.render();
-    }
-    render() {
-        const isOneGroup = !!(this._api && this._api.size <= 1);
-        toggleClass(this.element, 'dv-has-actions', isOneGroup);
+        // noop
     }
 }

package/dist/esm/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/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);
@@ -258,7 +285,7 @@ export class DockviewComponent extends BaseGrid {
         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();
         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,
@@ -272,7 +299,6 @@ export class DockviewComponent extends BaseGrid {
         return _window
             .open()
             .then((popoutContainer) => {
-            var _a;
             if (_window.isDisposed) {
                 return false;
             }
@@ -292,14 +318,19 @@ export class DockviewComponent extends BaseGrid {
              * of this case is when being called from the `fromJSON(...)` method
              */
             const isGroupAddedToDom = referenceGroup.element.parentElement !== null;
-            const 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)) {
+            let 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) {
                     this.movingLock(() => {
@@ -330,6 +361,7 @@ 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') {
@@ -346,16 +378,15 @@ 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: !isGroupAddedToDom
-                    ? undefined
-                    : referenceGroup
-                        ? this.getPanel(referenceGroup.id)
-                            ? referenceGroup.id
-                            : undefined
-                        : undefined,
+                referenceGroup: isValidReferenceGroup
+                    ? referenceGroup.id
+                    : undefined,
                 disposable: {
                     dispose: () => {
                         popoutWindowDisposable.dispose();
@@ -706,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 = {
@@ -792,7 +826,7 @@ 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)
@@ -801,6 +835,7 @@ export class DockviewComponent extends BaseGrid {
                     overridePopoutGroup: gridReferenceGroup
                         ? group
                         : undefined,
+                    popoutUrl: url,
                 });
             }
             for (const floatingGroup of this._floatingGroups) {
@@ -1010,7 +1045,6 @@ export class DockviewComponent extends BaseGrid {
     }
     removePanel(panel, options = {
         removeEmptyGroup: true,
-        skipDispose: false,
     }) {
         const group = panel.group;
         if (!group) {
@@ -1154,7 +1188,7 @@ export class DockviewComponent extends BaseGrid {
                         const refGroup = selectedGroup.referenceGroup
                             ? this.getPanel(selectedGroup.referenceGroup)
                             : undefined;
-                        if (refGroup) {
+                        if (refGroup && refGroup.panels.length === 0) {
                             this.removeGroup(refGroup);
                         }
                     }

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;

package/dist/esm/dockview/dockviewGroupPanelModel.js

@@ -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;
@@ -524,7 +527,6 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
     }
     updateContainer() {
         var _a, _b;
-        toggleClass(this.container, 'dv-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/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/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/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/esm/gridview/baseComponentGridview.js

@@ -67,6 +67,8 @@ export class BaseGrid extends Resizable {
         this.onDidRemove = this._onDidRemove.event;
         this._onDidAdd = new Emitter();
         this.onDidAdd = this._onDidAdd.event;
+        this._onDidMaximizedChange = new Emitter();
+        this.onDidMaximizedChange = this._onDidMaximizedChange.event;
         this._onDidActiveChange = new Emitter();
         this.onDidActiveChange = this._onDidActiveChange.event;
         this._bufferOnDidLayoutChange = new AsapEvent();
@@ -82,7 +84,12 @@ export class BaseGrid extends Resizable {
         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(() => this._onDidViewVisibilityChangeMicroTaskQueue.fire()), this.onDidViewVisibilityChangeMicroTaskQueue(() => {
+        this.addDisposables(this.gridview.onDidMaximizedNodeChange((event) => {
+            this._onDidMaximizedChange.fire({
+                panel: event.view,
+                isMaximized: event.isMaximized,
+            });
+        }), this.gridview.onDidViewVisibilityChange(() => this._onDidViewVisibilityChangeMicroTaskQueue.fire()), this.onDidViewVisibilityChangeMicroTaskQueue(() => {
             this.layout(this.width, this.height, true);
         }), Disposable.from(() => {
             var _a;
@@ -137,9 +144,6 @@ export class BaseGrid extends Resizable {
     hasMaximizedGroup() {
         return this.gridview.hasMaximizedView();
     }
-    get onDidMaximizedGroupChange() {
-        return this.gridview.onDidMaximizedNodeChange;
-    }
     doAddGroup(group, location = [0], size) {
         this.gridview.addView(group, size !== null && size !== void 0 ? size : Sizing.Distribute, location);
         this._onDidAdd.fire(group);

package/dist/esm/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/esm/gridview/gridview.js

@@ -201,6 +201,7 @@ export class Gridview {
         if (this.hasMaximizedView()) {
             this.exitMaximizedView();
         }
+        serializeBranchNode(this.getView(), this.orientation);
         const hiddenOnMaximize = [];
         function hideAllViewsBut(parent, exclude) {
             for (let i = 0; i < parent.children.length; i++) {
@@ -222,7 +223,10 @@ export class Gridview {
         }
         hideAllViewsBut(this.root, node);
         this._maximizedNode = { leaf: node, hiddenOnMaximize };
-        this._onDidMaximizedNodeChange.fire();
+        this._onDidMaximizedNodeChange.fire({
+            view: node.view,
+            isMaximized: true,
+        });
     }
     exitMaximizedView() {
         if (!this._maximizedNode) {
@@ -243,24 +247,51 @@ export class Gridview {
             }
         }
         showViewsInReverseOrder(this.root);
+        const tmp = this._maximizedNode.leaf;
         this._maximizedNode = undefined;
-        this._onDidMaximizedNodeChange.fire();
+        this._onDidMaximizedNodeChange.fire({
+            view: tmp.view,
+            isMaximized: false,
+        });
     }
     serialize() {
+        const maximizedView = this.maximizedView();
+        let 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();
         }
         const root = serializeBranchNode(this.getView(), this.orientation);
-        return {
+        const resullt = {
             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;
     }
     dispose() {
         this.disposable.dispose();
@@ -279,6 +310,19 @@ export class Gridview {
         const orientation = json.orientation;
         const height = orientation === 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) {
+            const location = json.maximizedNode.location;
+            const [_, node] = this.getNode(location);
+            if (!(node instanceof LeafNode)) {
+                return;
+            }
+            this.maximizeView(node.view);
+        }
     }
     _deserialize(root, orientation, deserializer, orthogonalSize) {
         this.root = this._deserializeNode(root, orientation, deserializer, orthogonalSize);

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

package/dist/esm/overlay/overlay.js

@@ -35,6 +35,9 @@ export class Overlay extends CompositeDisposable {
     get element() {
         return this._element;
     }
+    get isVisible() {
+        return this._isVisible;
+    }
     constructor(options) {
         super();
         this.options = options;
@@ -45,6 +48,7 @@ export class Overlay extends CompositeDisposable {
         this.onDidChangeEnd = this._onDidChangeEnd.event;
         this.addDisposables(this._onDidChange, this._onDidChangeEnd);
         this._element.className = 'dv-resize-container';
+        this._isVisible = true;
         this.setupResize('top');
         this.setupResize('bottom');
         this.setupResize('left');
@@ -59,6 +63,13 @@ export class Overlay extends CompositeDisposable {
         this.setBounds(Object.assign(Object.assign(Object.assign(Object.assign({ height: this.options.height, width: this.options.width }, ('top' in this.options && { top: this.options.top })), ('bottom' in this.options && { bottom: this.options.bottom })), ('left' in this.options && { left: this.options.left })), ('right' in this.options && { right: this.options.right })));
         arialLevelTracker.push(this._element);
     }
+    setVisible(isVisible) {
+        if (isVisible === this.isVisible) {
+            return;
+        }
+        this._isVisible = isVisible;
+        toggleClass(this.element, 'dv-hidden', !this.isVisible);
+    }
     bringToFront() {
         arialLevelTracker.push(this._element);
     }