dockview-core - npm Package Compare versions

Comparing version 2.0.0 to 2.1.0

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

@@ -1,2 +0,2 @@
-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';
@@ -500,3 +500,3 @@ import { Parameters } from '../panel/types';
     exitMaximizedGroup(): void;
-    get onDidMaximizedGroupChange(): Event<void>;
+    get onDidMaximizedGroupChange(): Event<DockviewMaximizedGroupChanged>;
     /**
@@ -503,0 +503,0 @@ * Add a popout group in a new Window

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

@@ -37,3 +37,2 @@ "use strict";
         _this._element.className = 'dv-void-container';
-        _this._element.tabIndex = 0;
         _this._element.draggable = true;
@@ -40,0 +39,0 @@ _this.addDisposables(_this._onDrop, _this._onDragStart, (0, events_1.addDisposableListener)(_this._element, 'pointerdown', function () {

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

@@ -5,8 +5,5 @@ import { IWatermarkRenderer, WatermarkRendererInitParameters } from '../../types';
     private readonly _element;
-    private _group;
-    private _api;
     get element(): HTMLElement;
     constructor();
     init(_params: WatermarkRendererInitParameters): void;
-    private render;
 }

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

@@ -19,6 +19,3 @@ "use strict";
 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) {
@@ -30,25 +27,2 @@ __extends(Watermark, _super);
         _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;
@@ -64,12 +38,6 @@ }
     Watermark.prototype.init = function (_params) {
-        this._api = _params.containerApi;
-        this._group = _params.group;
-        this.render();
+        // noop
     };
-    Watermark.prototype.render = function () {
-        var isOneGroup = !!(this._api && this._api.size <= 1);
-        (0, dom_1.toggleClass)(this.element, 'dv-has-actions', isOneGroup);
-    };
     return Watermark;
 }(lifecycle_1.CompositeDisposable));
 exports.Watermark = Watermark;

dist/cjs/dockview/dockviewComponent.d.ts

@@ -17,2 +17,23 @@ import { SerializedGridObject } from '../gridview/gridview';
 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 {
@@ -32,2 +53,3 @@ update: (event: {
     data: GroupPanelViewState;
+    url?: string;
     gridReferenceGroup?: string;
@@ -84,2 +106,6 @@ position: Box | null;
 }
+export interface DockviewMaximizedGroupChanged {
+    group: DockviewGroupPanel;
+    isMaximized: boolean;
+}
 export interface IDockviewComponent extends IBaseGrid<DockviewGroupPanel> {
@@ -105,2 +131,3 @@ readonly activePanel: IDockviewPanel | undefined;
     readonly onDidMovePanel: Event<MovePanelEvent>;
+    readonly onDidMaximizedGroupChange: Event<DockviewMaximizedGroupChanged>;
     readonly options: DockviewComponentOptions;
@@ -167,2 +194,4 @@ updateOptions(options: DockviewOptions): void;
     readonly onDidMovePanel: Event<MovePanelEvent>;
+    private readonly _onDidMaximizedGroupChange;
+    readonly onDidMaximizedGroupChange: Event<DockviewMaximizedGroupChanged>;
     private readonly _floatingGroups;
@@ -187,15 +216,4 @@ private readonly _popoutGroups;
     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;
@@ -222,3 +240,3 @@ private orthogonalize;
         removeEmptyGroup: boolean;
-        skipDispose: boolean;
+        skipDispose?: boolean;
         skipSetActiveGroup?: boolean;
@@ -225,0 +243,0 @@ }): void;

dist/cjs/dockview/dockviewGroupPanelModel.d.ts

@@ -123,2 +123,3 @@ import { DockviewApi } from '../api/component.api';
     getWindow: () => Window;
+    popoutUrl?: string;
 };
@@ -125,0 +126,0 @@ export declare class WillShowOverlayLocationEvent implements IDockviewEvent {

dist/cjs/dockview/dockviewGroupPanelModel.js

@@ -602,3 +602,6 @@ "use strict";
     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);
     };
@@ -718,3 +721,2 @@ DockviewGroupPanelModel.prototype.isPanelActive = function (panel) {
         var _a, _b;
-        (0, dom_1.toggleClass)(this.container, 'dv-empty', this.isEmpty);
         this.panels.forEach(function (panel) { return panel.runEvents(); });
@@ -733,3 +735,2 @@ if (this.isEmpty && !this.watermark) {
             });
-            this.tabsContainer.hide();
             this.contentContainer.element.appendChild(this.watermark.element);
@@ -741,3 +742,2 @@ }
             this.watermark = undefined;
-            this.tabsContainer.show();
         }
@@ -744,0 +744,0 @@ };

dist/cjs/dockview/options.d.ts

@@ -53,2 +53,6 @@ import { DockviewApi } from '../api/component.api';
     gap?: number;
+    /**
+     * Define the behaviour of the dock when there are no panels to display. Defaults to `watermark`.
+     */
+    noPanelsOverlay?: 'emptyGroup' | 'watermark';
 }
@@ -55,0 +59,0 @@ export interface DockviewDndOverlayEvent {

dist/cjs/dockview/options.js

@@ -45,2 +45,3 @@ "use strict";
         className: undefined,
+        noPanelsOverlay: undefined,
     };
@@ -47,0 +48,0 @@ return Object.keys(properties);

dist/cjs/gridview/baseComponentGridview.d.ts

@@ -11,2 +11,6 @@ import { Event, AsapEvent } from '../events';
 export declare function toTarget(direction: Direction): Position;
+export interface MaximizedChanged<T extends IGridPanelView> {
+    panel: T;
+    isMaximized: boolean;
+}
 export interface BaseGridOptions {
@@ -37,2 +41,4 @@ readonly proportionalLayout: boolean;
     readonly groups: T[];
+    readonly onDidMaximizedChange: Event<MaximizedChanged<T>>;
+    readonly onDidLayoutChange: Event<void>;
     getPanel(id: string): T | undefined;
@@ -49,4 +55,2 @@ toJSON(): object;
     hasMaximizedGroup(): boolean;
-    readonly onDidMaximizedGroupChange: Event<void>;
-    readonly onDidLayoutChange: Event<void>;
 }
@@ -62,2 +66,4 @@ export declare abstract class BaseGrid<T extends IGridPanelView> extends Resizable implements IBaseGrid<T> {
     readonly onDidAdd: Event<T>;
+    private readonly _onDidMaximizedChange;
+    readonly onDidMaximizedChange: Event<MaximizedChanged<T>>;
     private readonly _onDidActiveChange;
@@ -93,3 +99,2 @@ readonly onDidActiveChange: Event<T | undefined>;
     hasMaximizedGroup(): boolean;
-    get onDidMaximizedGroupChange(): Event<void>;
     protected doAddGroup(group: T, location?: number[], size?: number): void;
@@ -96,0 +101,0 @@ protected doRemoveGroup(group: T, options?: {

dist/cjs/gridview/baseComponentGridview.js

@@ -65,2 +65,4 @@ "use strict";
         _this.onDidAdd = _this._onDidAdd.event;
+        _this._onDidMaximizedChange = new events_1.Emitter();
+        _this.onDidMaximizedChange = _this._onDidMaximizedChange.event;
         _this._onDidActiveChange = new events_1.Emitter();
@@ -81,3 +83,8 @@ _this.onDidActiveChange = _this._onDidActiveChange.event;
         _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();
@@ -220,9 +227,2 @@ }), _this.onDidViewVisibilityChangeMicroTaskQueue(function () {
     };
-    Object.defineProperty(BaseGrid.prototype, "onDidMaximizedGroupChange", {
-        get: function () {
-            return this.gridview.onDidMaximizedNodeChange;
-        },
-        enumerable: false,
-        configurable: true
-    });
     BaseGrid.prototype.doAddGroup = function (group, location, size) {
@@ -229,0 +229,0 @@ if (location === void 0) { location = [0]; }

dist/cjs/gridview/gridview.d.ts

@@ -80,2 +80,5 @@ import { ISplitviewStyles, LayoutPriority, Orientation, Sizing } from '../splitview/splitview';
 }
+export interface SerializedNodeDescriptor {
+    location: number[];
+}
 export interface SerializedGridview<T> {
@@ -86,3 +89,8 @@ root: SerializedGridObject<T>;
     orientation: Orientation;
+    maximizedNode?: SerializedNodeDescriptor;
 }
+export interface MaximizedViewChanged {
+    view: IGridView;
+    isMaximized: boolean;
+}
 export declare class Gridview implements IDisposable {
@@ -105,3 +113,3 @@ readonly proportionalLayout: boolean;
     private readonly _onDidMaximizedNodeChange;
-    readonly onDidMaximizedNodeChange: Event<void>;
+    readonly onDidMaximizedNodeChange: Event<MaximizedViewChanged>;
     get length(): number;
@@ -108,0 +116,0 @@ get orientation(): Orientation;

dist/cjs/gridview/gridview.js

@@ -302,2 +302,3 @@ "use strict";
         }
+        serializeBranchNode(this.getView(), this.orientation);
         var hiddenOnMaximize = [];
@@ -324,3 +325,6 @@ function hideAllViewsBut(parent, exclude) {
         this._maximizedNode = { leaf: node, hiddenOnMaximize: hiddenOnMaximize };
-        this._onDidMaximizedNodeChange.fire();
+        this._onDidMaximizedNodeChange.fire({
+            view: node.view,
+            isMaximized: true,
+        });
     };
@@ -346,10 +350,27 @@ Gridview.prototype.exitMaximizedView = 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
              */
@@ -359,3 +380,3 @@ this.exitMaximizedView();
         var root = serializeBranchNode(this.getView(), this.orientation);
-        return {
+        var resullt = {
             root: root,
@@ -366,2 +387,12 @@ width: this.width,
         };
+        if (maxmizedViewLocation) {
+            resullt.maximizedNode = {
+                location: maxmizedViewLocation,
+            };
+        }
+        if (maximizedView) {
+            // replace any maximzied view that was removed for serialization purposes
+            this.maximizeView(maximizedView);
+        }
+        return resullt;
     };
@@ -385,2 +416,15 @@ Gridview.prototype.dispose = function () {
         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);
+        }
     };
@@ -387,0 +431,0 @@ Gridview.prototype._deserialize = function (root, orientation, deserializer, orthogonalSize) {

dist/cjs/overlay/overlay.d.ts

@@ -15,5 +15,7 @@ import { Event } from '../events';
     private horiziontalAlignment;
+    private _isVisible;
     set minimumInViewportWidth(value: number | undefined);
     set minimumInViewportHeight(value: number | undefined);
     get element(): HTMLElement;
+    get isVisible(): boolean;
     constructor(options: AnchoredBox & {
@@ -25,2 +27,3 @@ container: HTMLElement;
     });
+    setVisible(isVisible: boolean): void;
     bringToFront(): void;
@@ -27,0 +30,0 @@ setBounds(bounds?: Partial<AnchoredBox>): void;

dist/cjs/overlay/overlay.js

@@ -94,2 +94,3 @@ "use strict";
         _this._element.className = 'dv-resize-container';
+        _this._isVisible = true;
         _this.setupResize('top');
@@ -131,2 +132,16 @@ _this.setupResize('bottom');
     });
+    Object.defineProperty(Overlay.prototype, "isVisible", {
+        get: function () {
+            return this._isVisible;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Overlay.prototype.setVisible = function (isVisible) {
+        if (isVisible === this.isVisible) {
+            return;
+        }
+        this._isVisible = isVisible;
+        (0, dom_1.toggleClass)(this.element, 'dv-hidden', !this.isVisible);
+    };
     Overlay.prototype.bringToFront = function () {
@@ -133,0 +148,0 @@ arialLevelTracker.push(this._element);

dist/esm/api/component.api.d.ts

@@ -1,2 +0,2 @@
-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';
@@ -500,3 +500,3 @@ import { Parameters } from '../panel/types';
     exitMaximizedGroup(): void;
-    get onDidMaximizedGroupChange(): Event<void>;
+    get onDidMaximizedGroupChange(): Event<DockviewMaximizedGroupChanged>;
     /**
@@ -503,0 +503,0 @@ * Add a popout group in a new Window

dist/esm/dockview/components/titlebar/voidContainer.js

@@ -21,3 +21,2 @@ import { last } from '../../../array';
         this._element.className = 'dv-void-container';
-        this._element.tabIndex = 0;
         this._element.draggable = true;
@@ -24,0 +23,0 @@ this.addDisposables(this._onDrop, this._onDragStart, addDisposableListener(this._element, 'pointerdown', () => {

dist/esm/dockview/components/watermark/watermark.d.ts

@@ -5,8 +5,5 @@ import { IWatermarkRenderer, WatermarkRendererInitParameters } from '../../types';
     private readonly _element;
-    private _group;
-    private _api;
     get element(): HTMLElement;
     constructor();
     init(_params: WatermarkRendererInitParameters): void;
-    private render;
 }

dist/esm/dockview/components/watermark/watermark.js

@@ -1,5 +0,2 @@
-import { addDisposableListener } from '../../../events';
-import { toggleClass } from '../../../dom';
 import { CompositeDisposable } from '../../../lifecycle';
-import { createCloseButton } from '../../../svg';
 export class Watermark extends CompositeDisposable {
@@ -13,35 +10,6 @@ get element() {
         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();
+        // noop
     }
-    render() {
-        const isOneGroup = !!(this._api && this._api.size <= 1);
-        toggleClass(this.element, 'dv-has-actions', isOneGroup);
-    }
 }

dist/esm/dockview/dockviewComponent.d.ts

@@ -17,2 +17,23 @@ import { SerializedGridObject } from '../gridview/gridview';
 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 {
@@ -32,2 +53,3 @@ update: (event: {
     data: GroupPanelViewState;
+    url?: string;
     gridReferenceGroup?: string;
@@ -84,2 +106,6 @@ position: Box | null;
 }
+export interface DockviewMaximizedGroupChanged {
+    group: DockviewGroupPanel;
+    isMaximized: boolean;
+}
 export interface IDockviewComponent extends IBaseGrid<DockviewGroupPanel> {
@@ -105,2 +131,3 @@ readonly activePanel: IDockviewPanel | undefined;
     readonly onDidMovePanel: Event<MovePanelEvent>;
+    readonly onDidMaximizedGroupChange: Event<DockviewMaximizedGroupChanged>;
     readonly options: DockviewComponentOptions;
@@ -167,2 +194,4 @@ updateOptions(options: DockviewOptions): void;
     readonly onDidMovePanel: Event<MovePanelEvent>;
+    private readonly _onDidMaximizedGroupChange;
+    readonly onDidMaximizedGroupChange: Event<DockviewMaximizedGroupChanged>;
     private readonly _floatingGroups;
@@ -187,15 +216,4 @@ private readonly _popoutGroups;
     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;
@@ -222,3 +240,3 @@ private orthogonalize;
         removeEmptyGroup: boolean;
-        skipDispose: boolean;
+        skipDispose?: boolean;
         skipSetActiveGroup?: boolean;
@@ -225,0 +243,0 @@ }): void;

dist/esm/dockview/dockviewGroupPanelModel.d.ts

@@ -123,2 +123,3 @@ import { DockviewApi } from '../api/component.api';
     getWindow: () => Window;
+    popoutUrl?: string;
 };
@@ -125,0 +126,0 @@ export declare class WillShowOverlayLocationEvent implements IDockviewEvent {

dist/esm/dockview/dockviewGroupPanelModel.js

@@ -421,3 +421,6 @@ import { DockviewApi } from '../api/component.api';
     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);
     }
@@ -528,3 +531,2 @@ isPanelActive(panel) {
         var _a, _b;
-        toggleClass(this.container, 'dv-empty', this.isEmpty);
         this.panels.forEach((panel) => panel.runEvents());
@@ -543,3 +545,2 @@ if (this.isEmpty && !this.watermark) {
             });
-            this.tabsContainer.hide();
             this.contentContainer.element.appendChild(this.watermark.element);
@@ -551,3 +552,2 @@ }
             this.watermark = undefined;
-            this.tabsContainer.show();
         }
@@ -554,0 +554,0 @@ }

dist/esm/dockview/options.d.ts

@@ -53,2 +53,6 @@ import { DockviewApi } from '../api/component.api';
     gap?: number;
+    /**
+     * Define the behaviour of the dock when there are no panels to display. Defaults to `watermark`.
+     */
+    noPanelsOverlay?: 'emptyGroup' | 'watermark';
 }
@@ -55,0 +59,0 @@ export interface DockviewDndOverlayEvent {

dist/esm/dockview/options.js

@@ -36,2 +36,3 @@ export class DockviewUnhandledDragOverEvent {
         className: undefined,
+        noPanelsOverlay: undefined,
     };
@@ -38,0 +39,0 @@ return Object.keys(properties);

dist/esm/gridview/baseComponentGridview.d.ts

@@ -11,2 +11,6 @@ import { Event, AsapEvent } from '../events';
 export declare function toTarget(direction: Direction): Position;
+export interface MaximizedChanged<T extends IGridPanelView> {
+    panel: T;
+    isMaximized: boolean;
+}
 export interface BaseGridOptions {
@@ -37,2 +41,4 @@ readonly proportionalLayout: boolean;
     readonly groups: T[];
+    readonly onDidMaximizedChange: Event<MaximizedChanged<T>>;
+    readonly onDidLayoutChange: Event<void>;
     getPanel(id: string): T | undefined;
@@ -49,4 +55,2 @@ toJSON(): object;
     hasMaximizedGroup(): boolean;
-    readonly onDidMaximizedGroupChange: Event<void>;
-    readonly onDidLayoutChange: Event<void>;
 }
@@ -62,2 +66,4 @@ export declare abstract class BaseGrid<T extends IGridPanelView> extends Resizable implements IBaseGrid<T> {
     readonly onDidAdd: Event<T>;
+    private readonly _onDidMaximizedChange;
+    readonly onDidMaximizedChange: Event<MaximizedChanged<T>>;
     private readonly _onDidActiveChange;
@@ -93,3 +99,2 @@ readonly onDidActiveChange: Event<T | undefined>;
     hasMaximizedGroup(): boolean;
-    get onDidMaximizedGroupChange(): Event<void>;
     protected doAddGroup(group: T, location?: number[], size?: number): void;
@@ -96,0 +101,0 @@ protected doRemoveGroup(group: T, options?: {

dist/esm/gridview/baseComponentGridview.js

@@ -70,2 +70,4 @@ import { Emitter, Event, AsapEvent } from '../events';
         this.onDidAdd = this._onDidAdd.event;
+        this._onDidMaximizedChange = new Emitter();
+        this.onDidMaximizedChange = this._onDidMaximizedChange.event;
         this._onDidActiveChange = new Emitter();
@@ -86,3 +88,8 @@ this.onDidActiveChange = this._onDidActiveChange.event;
         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);
@@ -142,5 +149,2 @@ }), Disposable.from(() => {
     }
-    get onDidMaximizedGroupChange() {
-        return this.gridview.onDidMaximizedNodeChange;
-    }
     doAddGroup(group, location = [0], size) {
@@ -147,0 +151,0 @@ this.gridview.addView(group, size !== null && size !== void 0 ? size : Sizing.Distribute, location);

dist/esm/gridview/gridview.d.ts

@@ -80,2 +80,5 @@ import { ISplitviewStyles, LayoutPriority, Orientation, Sizing } from '../splitview/splitview';
 }
+export interface SerializedNodeDescriptor {
+    location: number[];
+}
 export interface SerializedGridview<T> {
@@ -86,3 +89,8 @@ root: SerializedGridObject<T>;
     orientation: Orientation;
+    maximizedNode?: SerializedNodeDescriptor;
 }
+export interface MaximizedViewChanged {
+    view: IGridView;
+    isMaximized: boolean;
+}
 export declare class Gridview implements IDisposable {
@@ -105,3 +113,3 @@ readonly proportionalLayout: boolean;
     private readonly _onDidMaximizedNodeChange;
-    readonly onDidMaximizedNodeChange: Event<void>;
+    readonly onDidMaximizedNodeChange: Event<MaximizedViewChanged>;
     get length(): number;
@@ -108,0 +116,0 @@ get orientation(): Orientation;

dist/esm/gridview/gridview.js

@@ -204,2 +204,3 @@ /*---------------------------------------------------------------------------------------------
         }
+        serializeBranchNode(this.getView(), this.orientation);
         const hiddenOnMaximize = [];
@@ -226,3 +227,6 @@ function hideAllViewsBut(parent, exclude) {
         this._maximizedNode = { leaf: node, hiddenOnMaximize };
-        this._onDidMaximizedNodeChange.fire();
+        this._onDidMaximizedNodeChange.fire({
+            view: node.view,
+            isMaximized: true,
+        });
     }
@@ -248,10 +252,27 @@ exitMaximizedView() {
         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
              */
@@ -261,3 +282,3 @@ this.exitMaximizedView();
         const root = serializeBranchNode(this.getView(), this.orientation);
-        return {
+        const resullt = {
             root,
@@ -268,2 +289,12 @@ width: this.width,
         };
+        if (maxmizedViewLocation) {
+            resullt.maximizedNode = {
+                location: maxmizedViewLocation,
+            };
+        }
+        if (maximizedView) {
+            // replace any maximzied view that was removed for serialization purposes
+            this.maximizeView(maximizedView);
+        }
+        return resullt;
     }
@@ -287,2 +318,15 @@ dispose() {
         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);
+        }
     }
@@ -289,0 +333,0 @@ _deserialize(root, orientation, deserializer, orthogonalSize) {

dist/esm/overlay/overlay.d.ts

@@ -15,5 +15,7 @@ import { Event } from '../events';
     private horiziontalAlignment;
+    private _isVisible;
     set minimumInViewportWidth(value: number | undefined);
     set minimumInViewportHeight(value: number | undefined);
     get element(): HTMLElement;
+    get isVisible(): boolean;
     constructor(options: AnchoredBox & {
@@ -25,2 +27,3 @@ container: HTMLElement;
     });
+    setVisible(isVisible: boolean): void;
     bringToFront(): void;
@@ -27,0 +30,0 @@ setBounds(bounds?: Partial<AnchoredBox>): void;

dist/esm/overlay/overlay.js

@@ -38,2 +38,5 @@ import { disableIframePointEvents, quasiDefaultPrevented, toggleClass, } from '../dom';
     }
+    get isVisible() {
+        return this._isVisible;
+    }
     constructor(options) {
@@ -49,2 +52,3 @@ super();
         this._element.className = 'dv-resize-container';
+        this._isVisible = true;
         this.setupResize('top');
@@ -64,2 +68,9 @@ this.setupResize('bottom');
     }
+    setVisible(isVisible) {
+        if (isVisible === this.isVisible) {
+            return;
+        }
+        this._isVisible = isVisible;
+        toggleClass(this.element, 'dv-hidden', !this.isVisible);
+    }
     bringToFront() {
@@ -66,0 +77,0 @@ arialLevelTracker.push(this._element);

package.json

 {
   "name": "dockview-core",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "Zero dependency layout manager supporting tabs, grids and splitviews",
@@ -5,0 +5,0 @@ "keywords": [

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

12763961

increased by0.49%

Lines of code

96240

increased by0.57%

No dependency changes