dockview-core 1.17.2 → 2.1.0

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);
@@ -381,12 +408,9 @@ var DockviewComponent = /** @class */ (function (_super) {
         }
         var box = getBox();
         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();
-        if (itemToPopout.api.location.type === 'grid') {
-            itemToPopout.api.setVisible(false);
-        }
         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,
@@ -400,13 +424,12 @@ var DockviewComponent = /** @class */ (function (_super) {
         return _window
             .open()
             .then(function (popoutContainer) {
-            var _a;
             if (_window.isDisposed) {
-                return;
+                return false;
             }
             if (popoutContainer === null) {
                 popoutWindowDisposable.dispose();
-                return;
+                return false;
             }
             var gready = document.createElement('div');
             gready.className = 'dv-overlay-render-container';
@@ -415,32 +438,47 @@ var DockviewComponent = /** @class */ (function (_super) {
                 ? itemToPopout.group
                 : itemToPopout;
             var referenceLocation = itemToPopout.api.location.type;
-            var group = (_a = options === null || options === void 0 ? void 0 : options.overridePopoutGroup) !== null && _a !== void 0 ? _a : _this.createGroup({ id: groupId });
-            group.model.renderContainer = overlayRenderContainer;
-            if (!(options === null || options === void 0 ? void 0 : options.overridePopoutGroup)) {
-                _this._onDidAddGroup.fire(group);
+            /**
+             * The group that is being added doesn't already exist within the DOM, the most likely occurance
+             * of this case is when being called from the `fromJSON(...)` method
+             */
+            var isGroupAddedToDom = referenceGroup.element.parentElement !== null;
+            var group;
+            if (!isGroupAddedToDom) {
+                group = referenceGroup;
             }
-            if (itemToPopout instanceof dockviewPanel_1.DockviewPanel) {
-                _this.movingLock(function () {
-                    var panel = referenceGroup.model.removePanel(itemToPopout);
-                    group.model.openPanel(panel);
-                });
+            else if (options === null || options === void 0 ? void 0 : options.overridePopoutGroup) {
+                group = options.overridePopoutGroup;
             }
             else {
-                _this.movingLock(function () {
-                    return moveGroupWithoutDestroying({
-                        from: referenceGroup,
-                        to: group,
+                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 () {
+                        var panel = referenceGroup.model.removePanel(itemToPopout);
+                        group.model.openPanel(panel);
                     });
-                });
-                switch (referenceLocation) {
-                    case 'grid':
-                        referenceGroup.api.setVisible(false);
-                        break;
-                    case 'floating':
-                    case 'popout':
-                        _this.removeGroup(referenceGroup);
-                        break;
+                }
+                else {
+                    _this.movingLock(function () {
+                        return moveGroupWithoutDestroying({
+                            from: referenceGroup,
+                            to: group,
+                        });
+                    });
+                    switch (referenceLocation) {
+                        case 'grid':
+                            referenceGroup.api.setVisible(false);
+                            break;
+                        case 'floating':
+                        case 'popout':
+                            _this.removeGroup(referenceGroup);
+                            break;
+                    }
                 }
             }
             popoutContainer.classList.add('dv-dockview');
@@ -450,7 +488,12 @@ 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') {
+                itemToPopout.api.setVisible(false);
+            }
             _this.doSetGroupAndPanelActive(group);
             popoutWindowDisposable.addDisposables(group.api.onDidActiveChange(function (event) {
                 var _a;
@@ -462,10 +505,13 @@ 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: _this.getPanel(referenceGroup.id)
+                referenceGroup: isValidReferenceGroup
                     ? referenceGroup.id
                     : undefined,
                 disposable: {
@@ -482,9 +528,10 @@ var DockviewComponent = /** @class */ (function (_super) {
              * window dimensions
              */
             (0, events_1.addDisposableWindowListener)(_window.window, 'resize', function () {
-                group.layout(window.innerWidth, window.innerHeight);
+                group.layout(_window.window.innerWidth, _window.window.innerHeight);
             }), overlayRenderContainer, lifecycle_1.Disposable.from(function () {
-                if (_this.getPanel(referenceGroup.id)) {
+                if (isGroupAddedToDom &&
+                    _this.getPanel(referenceGroup.id)) {
                     _this.movingLock(function () {
                         return moveGroupWithoutDestroying({
                             from: group,
@@ -501,21 +548,27 @@ var DockviewComponent = /** @class */ (function (_super) {
                     }
                 }
                 else if (_this.getPanel(group.id)) {
-                    var removedGroup = _this.doRemoveGroup(group, {
+                    _this.doRemoveGroup(group, {
                         skipDispose: true,
                         skipActive: true,
+                        skipPopoutReturn: true,
                     });
+                    var removedGroup = group;
                     removedGroup.model.renderContainer =
                         _this.overlayRenderContainer;
                     removedGroup.model.location = { type: 'grid' };
                     returnedGroup = removedGroup;
+                    _this.doAddGroup(removedGroup, [0]);
+                    _this.doSetGroupAndPanelActive(removedGroup);
                 }
             }));
             _this._popoutGroups.push(value);
             _this.updateWatermark();
+            return true;
         })
             .catch(function (err) {
             console.error('dockview: failed to create popout window', err);
+            return false;
         });
     };
     DockviewComponent.prototype.addFloatingGroup = function (item, options) {
@@ -626,7 +679,7 @@ var DockviewComponent = /** @class */ (function (_super) {
                 : (_c = (_b = this.options.floatingGroupBounds) === null || _b === void 0 ? void 0 : _b.minimumWidthWithinViewport) !== null && _c !== void 0 ? _c : constants_1.DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE, minimumInViewportHeight: this.options.floatingGroupBounds === 'boundedWithinViewport'
                 ? undefined
                 : (_e = (_d = this.options.floatingGroupBounds) === null || _d === void 0 ? void 0 : _d.minimumHeightWithinViewport) !== null && _e !== void 0 ? _e : constants_1.DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE }));
-        var el = group.element.querySelector('.void-container');
+        var el = group.element.querySelector('.dv-void-container');
         if (!el) {
             throw new Error('failed to find drag handle');
         }
@@ -844,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 = {
@@ -955,16 +1011,16 @@ 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)
                         : undefined)) !== null && _k !== void 0 ? _k : group, {
-                        skipRemoveGroup: true,
                         position: position !== null && position !== void 0 ? position : undefined,
                         overridePopoutGroup: gridReferenceGroup
                             ? group
                             : undefined,
+                        popoutUrl: url,
                     });
                 }
             }
@@ -996,6 +1052,7 @@ var DockviewComponent = /** @class */ (function (_super) {
             }
         }
         catch (err) {
+            console.error('dockview: failed to deserialize layout. Reverting changes', err);
             try {
                 /**
                  * Takes all the successfully created groups and remove all of their panels.
@@ -1125,11 +1182,13 @@ var DockviewComponent = /** @class */ (function (_super) {
             width: options.initialWidth,
             height: options.initialHeight,
         };
+        var index;
         if (options.position) {
             if ((0, options_1.isPanelOptionsWithPanel)(options.position)) {
                 var referencePanel = typeof options.position.referencePanel === 'string'
                     ? this.getGroupPanel(options.position.referencePanel)
                     : options.position.referencePanel;
+                index = options.position.index;
                 if (!referencePanel) {
                     throw new Error("referencePanel '".concat(options.position.referencePanel, "' does not exist"));
                 }
@@ -1140,6 +1199,7 @@ var DockviewComponent = /** @class */ (function (_super) {
                     typeof options.position.referenceGroup === 'string'
                         ? (_a = this._groups.get(options.position.referenceGroup)) === null || _a === void 0 ? void 0 : _a.value
                         : options.position.referenceGroup;
+                index = options.position.index;
                 if (!referenceGroup) {
                     throw new Error("referenceGroup '".concat(options.position.referenceGroup, "' does not exist"));
                 }
@@ -1150,6 +1210,7 @@ var DockviewComponent = /** @class */ (function (_super) {
                 group.model.openPanel(panel_1, {
                     skipSetActive: options.inactive,
                     skipSetGroupActive: options.inactive,
+                    index: index,
                 });
                 if (!options.inactive) {
                     this.doSetGroupAndPanelActive(group);
@@ -1179,6 +1240,7 @@ var DockviewComponent = /** @class */ (function (_super) {
                 group.model.openPanel(panel, {
                     skipSetActive: options.inactive,
                     skipSetGroupActive: options.inactive,
+                    index: index,
                 });
             }
             else if (referenceGroup.api.location.type === 'floating' ||
@@ -1187,6 +1249,7 @@ var DockviewComponent = /** @class */ (function (_super) {
                 referenceGroup.model.openPanel(panel, {
                     skipSetActive: options.inactive,
                     skipSetGroupActive: options.inactive,
+                    index: index,
                 });
                 referenceGroup.api.setSize({
                     width: initial === null || initial === void 0 ? void 0 : initial.width,
@@ -1207,6 +1270,7 @@ var DockviewComponent = /** @class */ (function (_super) {
                 group.model.openPanel(panel, {
                     skipSetActive: options.inactive,
                     skipSetGroupActive: options.inactive,
+                    index: index,
                 });
                 if (!options.inactive) {
                     this.doSetGroupAndPanelActive(group);
@@ -1225,6 +1289,7 @@ var DockviewComponent = /** @class */ (function (_super) {
             group.model.openPanel(panel, {
                 skipSetActive: options.inactive,
                 skipSetGroupActive: options.inactive,
+                index: index,
             });
         }
         else {
@@ -1235,6 +1300,7 @@ var DockviewComponent = /** @class */ (function (_super) {
             group.model.openPanel(panel, {
                 skipSetActive: options.inactive,
                 skipSetGroupActive: options.inactive,
+                index: index,
             });
             if (!options.inactive) {
                 this.doSetGroupAndPanelActive(group);
@@ -1245,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) {

package/dist/cjs/dockview/dockviewGroupPanel.js

@@ -39,9 +39,10 @@ var DockviewGroupPanel = /** @class */ (function (_super) {
         get: function () {
             var _a;
             var activePanelMinimumWidth = (_a = this.activePanel) === null || _a === void 0 ? void 0 : _a.minimumWidth;
-            return typeof activePanelMinimumWidth === 'number'
-                ? activePanelMinimumWidth
-                : MINIMUM_DOCKVIEW_GROUP_PANEL_WIDTH;
+            if (typeof activePanelMinimumWidth === 'number') {
+                return activePanelMinimumWidth;
+            }
+            return _super.prototype.__minimumWidth.call(this);
         },
         enumerable: false,
         configurable: true
@@ -50,9 +51,10 @@ var DockviewGroupPanel = /** @class */ (function (_super) {
         get: function () {
             var _a;
             var activePanelMinimumHeight = (_a = this.activePanel) === null || _a === void 0 ? void 0 : _a.minimumHeight;
-            return typeof activePanelMinimumHeight === 'number'
-                ? activePanelMinimumHeight
-                : MINIMUM_DOCKVIEW_GROUP_PANEL_HEIGHT;
+            if (typeof activePanelMinimumHeight === 'number') {
+                return activePanelMinimumHeight;
+            }
+            return _super.prototype.__minimumHeight.call(this);
         },
         enumerable: false,
         configurable: true
@@ -61,9 +63,10 @@ var DockviewGroupPanel = /** @class */ (function (_super) {
         get: function () {
             var _a;
             var activePanelMaximumWidth = (_a = this.activePanel) === null || _a === void 0 ? void 0 : _a.maximumWidth;
-            return typeof activePanelMaximumWidth === 'number'
-                ? activePanelMaximumWidth
-                : Number.MAX_SAFE_INTEGER;
+            if (typeof activePanelMaximumWidth === 'number') {
+                return activePanelMaximumWidth;
+            }
+            return _super.prototype.__maximumWidth.call(this);
         },
         enumerable: false,
         configurable: true
@@ -72,9 +75,10 @@ var DockviewGroupPanel = /** @class */ (function (_super) {
         get: function () {
             var _a;
             var activePanelMaximumHeight = (_a = this.activePanel) === null || _a === void 0 ? void 0 : _a.maximumHeight;
-            return typeof activePanelMaximumHeight === 'number'
-                ? activePanelMaximumHeight
-                : Number.MAX_SAFE_INTEGER;
+            if (typeof activePanelMaximumHeight === 'number') {
+                return activePanelMaximumHeight;
+            }
+            return _super.prototype.__maximumHeight.call(this);
         },
         enumerable: false,
         configurable: true

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

package/dist/cjs/dockview/dockviewGroupPanelModel.js

@@ -202,6 +202,7 @@ var DockviewGroupPanelModel = /** @class */ (function (_super) {
         _this._locked = false;
         _this._location = { type: 'grid' };
         _this.mostRecentlyUsed = [];
+        _this._overwriteRenderContainer = null;
         _this._onDidChange = new events_1.Emitter();
         _this.onDidChange = _this._onDidChange.event;
         _this._width = 0;
@@ -232,8 +233,7 @@ var DockviewGroupPanelModel = /** @class */ (function (_super) {
         _this.onDidActivePanelChange = _this._onDidActivePanelChange.event;
         _this._onUnhandledDragOverEvent = new events_1.Emitter();
         _this.onUnhandledDragOverEvent = _this._onUnhandledDragOverEvent.event;
-        _this._overwriteRenderContainer = null;
-        (0, dom_1.toggleClass)(_this.container, 'groupview', true);
+        (0, dom_1.toggleClass)(_this.container, 'dv-groupview', true);
         _this._api = new component_api_1.DockviewApi(_this.accessor);
         _this.tabsContainer = new tabsContainer_1.TabsContainer(_this.accessor, _this.groupPanel);
         _this.contentContainer = new content_1.ContentContainer(_this.accessor, _this);
@@ -267,7 +267,7 @@ var DockviewGroupPanelModel = /** @class */ (function (_super) {
     }
     Object.defineProperty(DockviewGroupPanelModel.prototype, "element", {
         get: function () {
-            throw new Error('not supported');
+            throw new Error('dockview: not supported');
         },
         enumerable: false,
         configurable: true
@@ -285,7 +285,7 @@ var DockviewGroupPanelModel = /** @class */ (function (_super) {
         },
         set: function (value) {
             this._locked = value;
-            (0, dom_1.toggleClass)(this.container, 'locked-groupview', value === 'no-drop-target' || value);
+            (0, dom_1.toggleClass)(this.container, 'dv-locked-groupview', value === 'no-drop-target' || value);
         },
         enumerable: false,
         configurable: true
@@ -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;
@@ -613,8 +616,8 @@ var DockviewGroupPanelModel = /** @class */ (function (_super) {
             return;
         }
         this._isGroupActive = isGroupActive;
-        (0, dom_1.toggleClass)(this.container, 'active-group', isGroupActive);
-        (0, dom_1.toggleClass)(this.container, 'inactive-group', !isGroupActive);
+        (0, dom_1.toggleClass)(this.container, 'dv-active-group', isGroupActive);
+        (0, dom_1.toggleClass)(this.container, 'dv-inactive-group', !isGroupActive);
         this.tabsContainer.setActive(this.isActive);
         if (!this._activePanel && this.panels.length > 0) {
             this.doSetActivePanel(this.panels[0]);
@@ -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, '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/dockviewPanel.d.ts

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

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

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

package/dist/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;
@@ -102,10 +106,18 @@ export interface PanelOptions<P extends object = Parameters> {
 type RelativePanel = {
     direction?: Direction;
     referencePanel: string | IDockviewPanel;
+    /**
+     * The index to place the panel within a group, only applicable if the placement is within an existing group
+     */
+    index?: number;
 };
 type RelativeGroup = {
     direction?: Direction;
     referenceGroup: string | DockviewGroupPanel;
+    /**
+     * The index to place the panel within a group, only applicable if the placement is within an existing group
+     */
+    index?: number;
 };
 type AbsolutePosition = {
     direction: Omit<Direction, 'within'>;

package/dist/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/dom.d.ts

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

package/dist/cjs/dom.js

@@ -51,9 +51,27 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Classnames = exports.getDockviewTheme = exports.disableIframePointEvents = exports.addTestId = exports.isInDocument = exports.getDomNodePagePosition = exports.addStyles = exports.quasiDefaultPrevented = exports.quasiPreventDefault = exports.trackFocus = exports.getElementsByTagName = exports.isAncestor = exports.toggleClass = exports.addClasses = exports.removeClasses = exports.watchElementResize = void 0;
+exports.Classnames = exports.getDockviewTheme = exports.disableIframePointEvents = exports.addTestId = exports.isInDocument = exports.getDomNodePagePosition = exports.addStyles = exports.quasiDefaultPrevented = exports.quasiPreventDefault = exports.trackFocus = exports.getElementsByTagName = exports.isAncestor = exports.toggleClass = exports.addClasses = exports.removeClasses = exports.watchElementResize = exports.OverflowObserver = void 0;
 var events_1 = require("./events");
 var lifecycle_1 = require("./lifecycle");
+var OverflowObserver = /** @class */ (function (_super) {
+    __extends(OverflowObserver, _super);
+    function OverflowObserver(el) {
+        var _this = _super.call(this) || this;
+        _this._onDidChange = new events_1.Emitter();
+        _this.onDidChange = _this._onDidChange.event;
+        _this._value = null;
+        _this.addDisposables(_this._onDidChange, watchElementResize(el, function (entry) {
+            var hasScrollX = entry.target.scrollWidth > entry.target.clientWidth;
+            var hasScrollY = entry.target.scrollHeight > entry.target.clientHeight;
+            _this._value = { hasScrollX: hasScrollX, hasScrollY: hasScrollY };
+            _this._onDidChange.fire(_this._value);
+        }));
+        return _this;
+    }
+    return OverflowObserver;
+}(lifecycle_1.CompositeDisposable));
+exports.OverflowObserver = OverflowObserver;
 function watchElementResize(element, cb) {
     var observer = new ResizeObserver(function (entires) {
         /**