dockview-core 1.10.0 → 1.10.2

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

@@ -374,15 +374,23 @@ export declare class DockviewApi implements CommonApi<SerializedDockview> {
      */
     get onWillDrop(): Event<DockviewWillDropEvent>;
     /**
+     * Invoked before an overlay is shown indicating a drop target.
      *
+     * Calling `event.preventDefault()` will prevent the overlay being shown and prevent
+     * the any subsequent drop event.
      */
     get onWillShowOverlay(): Event<WillShowOverlayLocationEvent>;
     /**
-     * Invoked before a group is dragged. Exposed for custom Drag'n'Drop functionality.
+     * Invoked before a group is dragged.
+     *
+     * Calling `event.nativeEvent.preventDefault()` will prevent the group drag starting.
+     *
      */
     get onWillDragGroup(): Event<GroupDragEvent>;
     /**
-     * Invoked before a panel is dragged. Exposed for custom Drag'n'Drop functionality.
+     * Invoked before a panel is dragged.
+     *
+     * Calling `event.nativeEvent.preventDefault()` will prevent the panel drag starting.
      */
     get onWillDragPanel(): Event<TabDragEvent>;
     /**

package/dist/cjs/api/component.api.js

@@ -754,7 +754,10 @@ var DockviewApi = /** @class */ (function () {
     });
     Object.defineProperty(DockviewApi.prototype, "onWillShowOverlay", {
         /**
+         * Invoked before an overlay is shown indicating a drop target.
          *
+         * Calling `event.preventDefault()` will prevent the overlay being shown and prevent
+         * the any subsequent drop event.
          */
         get: function () {
             return this.component.onWillShowOverlay;
@@ -764,7 +767,10 @@ var DockviewApi = /** @class */ (function () {
     });
     Object.defineProperty(DockviewApi.prototype, "onWillDragGroup", {
         /**
-         * Invoked before a group is dragged. Exposed for custom Drag'n'Drop functionality.
+         * Invoked before a group is dragged.
+         *
+         * Calling `event.nativeEvent.preventDefault()` will prevent the group drag starting.
+         *
          */
         get: function () {
             return this.component.onWillDragGroup;
@@ -774,7 +780,9 @@ var DockviewApi = /** @class */ (function () {
     });
     Object.defineProperty(DockviewApi.prototype, "onWillDragPanel", {
         /**
-         * Invoked before a panel is dragged. Exposed for custom Drag'n'Drop functionality.
+         * Invoked before a panel is dragged.
+         *
+         * Calling `event.nativeEvent.preventDefault()` will prevent the panel drag starting.
          */
         get: function () {
             return this.component.onWillDragPanel;

package/dist/cjs/api/dockviewGroupPanelApi.js

@@ -24,7 +24,7 @@ var NOT_INITIALIZED_MESSAGE = 'DockviewGroupPanelApiImpl not initialized';
 var DockviewGroupPanelApiImpl = /** @class */ (function (_super) {
     __extends(DockviewGroupPanelApiImpl, _super);
     function DockviewGroupPanelApiImpl(id, accessor) {
-        var _this = _super.call(this, id) || this;
+        var _this = _super.call(this, id, '__dockviewgroup__') || this;
         _this.accessor = accessor;
         _this._onDidLocationChange = new events_1.Emitter();
         _this.onDidLocationChange = _this._onDidLocationChange.event;

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

@@ -25,6 +25,7 @@ export interface DockviewPanelApi extends Omit<GridviewPanelApi, 'setVisible' |
     readonly title: string | undefined;
     readonly onDidActiveGroupChange: Event<ActiveGroupEvent>;
     readonly onDidGroupChange: Event<GroupChangedEvent>;
+    readonly onDidTitleChange: Event<TitleEvent>;
     readonly onDidRendererChange: Event<RendererChangedEvent>;
     readonly location: DockviewGroupLocation;
     readonly onDidLocationChange: Event<DockviewGroupPanelFloatingChangeEvent>;
@@ -48,6 +49,7 @@ export declare class DockviewPanelApiImpl extends GridviewPanelApiImpl implement
     private panel;
     private readonly accessor;
     private _group;
+    private _tabComponent;
     readonly _onDidTitleChange: Emitter<TitleEvent>;
     readonly onDidTitleChange: Event<TitleEvent>;
     private readonly _onDidActiveGroupChange;
@@ -65,7 +67,8 @@ export declare class DockviewPanelApiImpl extends GridviewPanelApiImpl implement
     get renderer(): DockviewPanelRenderer;
     set group(value: DockviewGroupPanel);
     get group(): DockviewGroupPanel;
-    constructor(panel: DockviewPanel, group: DockviewGroupPanel, accessor: DockviewComponent);
+    get tabComponent(): string | undefined;
+    constructor(panel: DockviewPanel, group: DockviewGroupPanel, accessor: DockviewComponent, component: string, tabComponent?: string);
     getWindow(): Window;
     moveTo(options: {
         group: DockviewGroupPanel;
@@ -78,4 +81,5 @@ export declare class DockviewPanelApiImpl extends GridviewPanelApiImpl implement
     maximize(): void;
     isMaximized(): boolean;
     exitMaximized(): void;
+    private setupGroupEventListeners;
 }

package/dist/cjs/api/dockviewPanelApi.js

@@ -21,8 +21,8 @@ var gridviewPanelApi_1 = require("./gridviewPanelApi");
 var lifecycle_1 = require("../lifecycle");
 var DockviewPanelApiImpl = /** @class */ (function (_super) {
     __extends(DockviewPanelApiImpl, _super);
-    function DockviewPanelApiImpl(panel, group, accessor) {
-        var _this = _super.call(this, panel.id) || this;
+    function DockviewPanelApiImpl(panel, group, accessor, component, tabComponent) {
+        var _this = _super.call(this, panel.id, component) || this;
         _this.panel = panel;
         _this.accessor = accessor;
         _this._onDidTitleChange = new events_1.Emitter();
@@ -36,8 +36,10 @@ var DockviewPanelApiImpl = /** @class */ (function (_super) {
         _this._onDidLocationChange = new events_1.Emitter();
         _this.onDidLocationChange = _this._onDidLocationChange.event;
         _this.groupEventsDisposable = new lifecycle_1.MutableDisposable();
+        _this._tabComponent = tabComponent;
         _this.initialize(panel);
         _this._group = group;
+        _this.setupGroupEventListeners();
         _this.addDisposables(_this.groupEventsDisposable, _this._onDidRendererChange, _this._onDidTitleChange, _this._onDidGroupChange, _this._onDidActiveGroupChange, _this._onDidLocationChange);
         return _this;
     }
@@ -74,33 +76,11 @@ var DockviewPanelApiImpl = /** @class */ (function (_super) {
             return this._group;
         },
         set: function (value) {
-            var _this = this;
-            var isOldGroupActive = this.isGroupActive;
+            var oldGroup = this._group;
             if (this._group !== value) {
                 this._group = value;
                 this._onDidGroupChange.fire({});
-                var _trackGroupActive_1 = isOldGroupActive; // prevent duplicate events with same state
-                this.groupEventsDisposable.value = new lifecycle_1.CompositeDisposable(this.group.api.onDidLocationChange(function (event) {
-                    if (_this.group !== _this.panel.group) {
-                        return;
-                    }
-                    _this._onDidLocationChange.fire(event);
-                }), this.group.api.onDidActiveChange(function () {
-                    if (_this.group !== _this.panel.group) {
-                        return;
-                    }
-                    if (_trackGroupActive_1 !== _this.isGroupActive) {
-                        _trackGroupActive_1 = _this.isGroupActive;
-                        _this._onDidActiveGroupChange.fire({
-                            isActive: _this.isGroupActive,
-                        });
-                    }
-                }));
-                // if (this.isGroupActive !== isOldGroupActive) {
-                //     this._onDidActiveGroupChange.fire({
-                //         isActive: this.isGroupActive,
-                //     });
-                // }
+                this.setupGroupEventListeners(oldGroup);
                 this._onDidLocationChange.fire({
                     location: this.group.api.location,
                 });
@@ -109,6 +89,13 @@ var DockviewPanelApiImpl = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(DockviewPanelApiImpl.prototype, "tabComponent", {
+        get: function () {
+            return this._tabComponent;
+        },
+        enumerable: false,
+        configurable: true
+    });
     DockviewPanelApiImpl.prototype.getWindow = function () {
         return this.group.api.getWindow();
     };
@@ -141,6 +128,36 @@ var DockviewPanelApiImpl = /** @class */ (function (_super) {
     DockviewPanelApiImpl.prototype.exitMaximized = function () {
         this.group.api.exitMaximized();
     };
+    DockviewPanelApiImpl.prototype.setupGroupEventListeners = function (previousGroup) {
+        var _this = this;
+        var _a;
+        var _trackGroupActive = (_a = previousGroup === null || previousGroup === void 0 ? void 0 : previousGroup.isActive) !== null && _a !== void 0 ? _a : false; // prevent duplicate events with same state
+        this.groupEventsDisposable.value = new lifecycle_1.CompositeDisposable(this.group.api.onDidVisibilityChange(function (event) {
+            if (!event.isVisible && _this.isVisible) {
+                _this._onDidVisibilityChange.fire(event);
+            }
+            else if (event.isVisible &&
+                !_this.isVisible &&
+                _this.group.model.isPanelActive(_this.panel)) {
+                _this._onDidVisibilityChange.fire(event);
+            }
+        }), this.group.api.onDidLocationChange(function (event) {
+            if (_this.group !== _this.panel.group) {
+                return;
+            }
+            _this._onDidLocationChange.fire(event);
+        }), this.group.api.onDidActiveChange(function () {
+            if (_this.group !== _this.panel.group) {
+                return;
+            }
+            if (_trackGroupActive !== _this.isGroupActive) {
+                _trackGroupActive = _this.isGroupActive;
+                _this._onDidActiveGroupChange.fire({
+                    isActive: _this.isGroupActive,
+                });
+            }
+        }));
+    };
     return DockviewPanelApiImpl;
 }(gridviewPanelApi_1.GridviewPanelApiImpl));
 exports.DockviewPanelApiImpl = DockviewPanelApiImpl;

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

@@ -30,7 +30,7 @@ export declare class GridviewPanelApiImpl extends PanelApiImpl implements Gridvi
     readonly onDidConstraintsChange: Event<GridConstraintChangeEvent>;
     private readonly _onDidSizeChange;
     readonly onDidSizeChange: Event<SizeEvent>;
-    constructor(id: string, panel?: IPanel);
+    constructor(id: string, component: string, panel?: IPanel);
     setConstraints(value: GridConstraintChangeEvent): void;
     setSize(event: SizeEvent): void;
 }

package/dist/cjs/api/gridviewPanelApi.js

@@ -20,8 +20,8 @@ var events_1 = require("../events");
 var panelApi_1 = require("./panelApi");
 var GridviewPanelApiImpl = /** @class */ (function (_super) {
     __extends(GridviewPanelApiImpl, _super);
-    function GridviewPanelApiImpl(id, panel) {
-        var _this = _super.call(this, id) || this;
+    function GridviewPanelApiImpl(id, component, panel) {
+        var _this = _super.call(this, id, component) || this;
         _this._onDidConstraintsChangeInternal = new events_1.Emitter();
         _this.onDidConstraintsChangeInternal = _this._onDidConstraintsChangeInternal.event;
         _this._onDidConstraintsChange = new events_1.Emitter();

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

@@ -11,9 +11,6 @@ export interface PanelDimensionChangeEvent {
 export interface VisibilityEvent {
     readonly isVisible: boolean;
 }
-export interface HiddenEvent {
-    readonly isHidden: boolean;
-}
 export interface ActiveEvent {
     readonly isActive: boolean;
 }
@@ -22,8 +19,9 @@ export interface PanelApi {
     readonly onDidFocusChange: Event<FocusEvent>;
     readonly onDidVisibilityChange: Event<VisibilityEvent>;
     readonly onDidActiveChange: Event<ActiveEvent>;
-    readonly onDidHiddenChange: Event<HiddenEvent>;
+    readonly onDidParametersChange: Event<Parameters>;
     setActive(): void;
+    setVisible(isVisible: boolean): void;
     updateParameters(parameters: Parameters): void;
     /**
      * The id of the panel that would have been assigned when the panel was created
@@ -41,10 +39,6 @@ export interface PanelApi {
      * Whether the panel is visible
      */
     readonly isVisible: boolean;
-    /**
-     * Whether the panel is hidden
-     */
-    readonly isHidden: boolean;
     /**
      * The panel width in pixels
      */
@@ -54,6 +48,7 @@ export interface PanelApi {
      */
     readonly height: number;
     readonly onWillFocus: Event<WillFocusEvent>;
+    getParameters<T extends Parameters = Parameters>(): T;
 }
 export declare class WillFocusEvent extends DockviewEvent {
     constructor();
@@ -63,12 +58,13 @@ export declare class WillFocusEvent extends DockviewEvent {
  */
 export declare class PanelApiImpl extends CompositeDisposable implements PanelApi {
     readonly id: string;
+    readonly component: string;
     private _isFocused;
     private _isActive;
     private _isVisible;
-    private _isHidden;
     private _width;
     private _height;
+    private _parameters;
     private readonly panelUpdatesDisposable;
     readonly _onDidDimensionChange: Emitter<PanelDimensionChangeEvent>;
     readonly onDidDimensionsChange: Event<PanelDimensionChangeEvent>;
@@ -78,23 +74,23 @@ export declare class PanelApiImpl extends CompositeDisposable implements PanelAp
     readonly onWillFocus: Event<WillFocusEvent>;
     readonly _onDidVisibilityChange: Emitter<VisibilityEvent>;
     readonly onDidVisibilityChange: Event<VisibilityEvent>;
-    readonly _onDidHiddenChange: Emitter<HiddenEvent>;
-    readonly onDidHiddenChange: Event<HiddenEvent>;
+    readonly _onWillVisibilityChange: Emitter<VisibilityEvent>;
+    readonly onWillVisibilityChange: Event<VisibilityEvent>;
     readonly _onDidActiveChange: Emitter<ActiveEvent>;
     readonly onDidActiveChange: Event<ActiveEvent>;
     readonly _onActiveChange: Emitter<void>;
     readonly onActiveChange: Event<void>;
-    readonly _onUpdateParameters: Emitter<Parameters>;
-    readonly onUpdateParameters: Event<Parameters>;
+    readonly _onDidParametersChange: Emitter<Parameters>;
+    readonly onDidParametersChange: Event<Parameters>;
     get isFocused(): boolean;
     get isActive(): boolean;
     get isVisible(): boolean;
-    get isHidden(): boolean;
     get width(): number;
     get height(): number;
-    constructor(id: string);
+    constructor(id: string, component: string);
+    getParameters<T extends Parameters = Parameters>(): T;
     initialize(panel: IPanel): void;
-    setHidden(isHidden: boolean): void;
+    setVisible(isVisible: boolean): void;
     setActive(): void;
     updateParameters(parameters: Parameters): void;
 }

package/dist/cjs/api/panelApi.js

@@ -31,15 +31,16 @@ exports.WillFocusEvent = WillFocusEvent;
  */
 var PanelApiImpl = /** @class */ (function (_super) {
     __extends(PanelApiImpl, _super);
-    function PanelApiImpl(id) {
+    function PanelApiImpl(id, component) {
         var _this = _super.call(this) || this;
         _this.id = id;
+        _this.component = component;
         _this._isFocused = false;
         _this._isActive = false;
         _this._isVisible = true;
-        _this._isHidden = false;
         _this._width = 0;
         _this._height = 0;
+        _this._parameters = {};
         _this.panelUpdatesDisposable = new lifecycle_1.MutableDisposable();
         _this._onDidDimensionChange = new events_1.Emitter();
         _this.onDidDimensionsChange = _this._onDidDimensionChange.event;
@@ -51,26 +52,24 @@ var PanelApiImpl = /** @class */ (function (_super) {
         //
         _this._onDidVisibilityChange = new events_1.Emitter();
         _this.onDidVisibilityChange = _this._onDidVisibilityChange.event;
-        _this._onDidHiddenChange = new events_1.Emitter();
-        _this.onDidHiddenChange = _this._onDidHiddenChange.event;
+        _this._onWillVisibilityChange = new events_1.Emitter();
+        _this.onWillVisibilityChange = _this._onWillVisibilityChange.event;
         _this._onDidActiveChange = new events_1.Emitter();
         _this.onDidActiveChange = _this._onDidActiveChange.event;
         _this._onActiveChange = new events_1.Emitter();
         _this.onActiveChange = _this._onActiveChange.event;
-        _this._onUpdateParameters = new events_1.Emitter();
-        _this.onUpdateParameters = _this._onUpdateParameters.event;
+        _this._onDidParametersChange = new events_1.Emitter();
+        _this.onDidParametersChange = _this._onDidParametersChange.event;
         _this.addDisposables(_this.onDidFocusChange(function (event) {
             _this._isFocused = event.isFocused;
         }), _this.onDidActiveChange(function (event) {
             _this._isActive = event.isActive;
         }), _this.onDidVisibilityChange(function (event) {
             _this._isVisible = event.isVisible;
-        }), _this.onDidHiddenChange(function (event) {
-            _this._isHidden = event.isHidden;
         }), _this.onDidDimensionsChange(function (event) {
             _this._width = event.width;
             _this._height = event.height;
-        }), _this.panelUpdatesDisposable, _this._onDidDimensionChange, _this._onDidChangeFocus, _this._onDidVisibilityChange, _this._onDidActiveChange, _this._onWillFocus, _this._onActiveChange, _this._onUpdateParameters, _this._onWillFocus, _this._onDidHiddenChange, _this._onUpdateParameters);
+        }), _this.panelUpdatesDisposable, _this._onDidDimensionChange, _this._onDidChangeFocus, _this._onDidVisibilityChange, _this._onDidActiveChange, _this._onWillFocus, _this._onActiveChange, _this._onWillFocus, _this._onWillVisibilityChange, _this._onDidParametersChange);
         return _this;
     }
     Object.defineProperty(PanelApiImpl.prototype, "isFocused", {
@@ -94,13 +93,6 @@ var PanelApiImpl = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(PanelApiImpl.prototype, "isHidden", {
-        get: function () {
-            return this._isHidden;
-        },
-        enumerable: false,
-        configurable: true
-    });
     Object.defineProperty(PanelApiImpl.prototype, "width", {
         get: function () {
             return this._width;
@@ -115,21 +107,26 @@ var PanelApiImpl = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    PanelApiImpl.prototype.getParameters = function () {
+        return this._parameters;
+    };
     PanelApiImpl.prototype.initialize = function (panel) {
-        this.panelUpdatesDisposable.value = this._onUpdateParameters.event(function (parameters) {
+        var _this = this;
+        this.panelUpdatesDisposable.value = this._onDidParametersChange.event(function (parameters) {
+            _this._parameters = parameters;
             panel.update({
                 params: parameters,
             });
         });
     };
-    PanelApiImpl.prototype.setHidden = function (isHidden) {
-        this._onDidHiddenChange.fire({ isHidden: isHidden });
+    PanelApiImpl.prototype.setVisible = function (isVisible) {
+        this._onWillVisibilityChange.fire({ isVisible: isVisible });
     };
     PanelApiImpl.prototype.setActive = function () {
         this._onActiveChange.fire();
     };
     PanelApiImpl.prototype.updateParameters = function (parameters) {
-        this._onUpdateParameters.fire(parameters);
+        this._onDidParametersChange.fire(parameters);
     };
     return PanelApiImpl;
 }(lifecycle_1.CompositeDisposable));

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

@@ -20,7 +20,7 @@ export declare class PaneviewPanelApiImpl extends SplitviewPanelApiImpl implemen
     readonly onMouseLeave: Event<MouseEvent>;
     private _pane;
     set pane(pane: PaneviewPanel);
-    constructor(id: string);
+    constructor(id: string, component: string);
     setExpanded(isExpanded: boolean): void;
     get isExpanded(): boolean;
 }

package/dist/cjs/api/paneviewPanelApi.js

@@ -20,8 +20,8 @@ var events_1 = require("../events");
 var splitviewPanelApi_1 = require("./splitviewPanelApi");
 var PaneviewPanelApiImpl = /** @class */ (function (_super) {
     __extends(PaneviewPanelApiImpl, _super);
-    function PaneviewPanelApiImpl(id) {
-        var _this = _super.call(this, id) || this;
+    function PaneviewPanelApiImpl(id, component) {
+        var _this = _super.call(this, id, component) || this;
         _this._onDidExpansionChange = new events_1.Emitter({
             replay: true,
         });

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

@@ -25,7 +25,7 @@ export declare class SplitviewPanelApiImpl extends PanelApiImpl implements Split
     readonly onDidConstraintsChange: Event<PanelConstraintChangeEvent>;
     readonly _onDidSizeChange: Emitter<PanelSizeEvent>;
     readonly onDidSizeChange: Event<PanelSizeEvent>;
-    constructor(id: string);
+    constructor(id: string, component: string);
     setConstraints(value: PanelConstraintChangeEvent2): void;
     setSize(event: PanelSizeEvent): void;
 }

package/dist/cjs/api/splitviewPanelApi.js

@@ -21,8 +21,8 @@ var panelApi_1 = require("./panelApi");
 var SplitviewPanelApiImpl = /** @class */ (function (_super) {
     __extends(SplitviewPanelApiImpl, _super);
     //
-    function SplitviewPanelApiImpl(id) {
-        var _this = _super.call(this, id) || this;
+    function SplitviewPanelApiImpl(id, component) {
+        var _this = _super.call(this, id, component) || this;
         _this._onDidConstraintsChangeInternal = new events_1.Emitter();
         _this.onDidConstraintsChangeInternal = _this._onDidConstraintsChangeInternal.event;
         //

package/dist/cjs/dockview/components/panel/content.js

@@ -64,7 +64,7 @@ var ContentContainer = /** @class */ (function (_super) {
                         data.groupId === _this.group.id;
                     return !groupHasOnePanelAndIsActiveDragElement;
                 }
-                return _this.group.canDisplayOverlay(event, position, 'panel');
+                return _this.group.canDisplayOverlay(event, position, 'content');
             },
         });
         _this.addDisposables(_this.dropTarget);

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

@@ -54,7 +54,7 @@ var VoidContainer = /** @class */ (function (_super) {
                     // don't show the overlay if the tab being dragged is the last panel of this group
                     return ((_a = (0, array_1.last)(_this.group.panels)) === null || _a === void 0 ? void 0 : _a.id) !== data.panelId;
                 }
-                return group.model.canDisplayOverlay(event, position, 'panel');
+                return group.model.canDisplayOverlay(event, position, 'header_space');
             },
         });
         _this.onWillShowOverlay = _this.dropTraget.onWillShowOverlay;

package/dist/cjs/dockview/deserializer.js

@@ -21,7 +21,7 @@ var DefaultDockviewDeserialzier = /** @class */ (function () {
             ? (_b = viewData.tab) === null || _b === void 0 ? void 0 : _b.id
             : panelData.tabComponent;
         var view = new dockviewPanelModel_1.DockviewPanelModel(this.accessor, panelId, contentComponent, tabComponent);
-        var panel = new dockviewPanel_1.DockviewPanel(panelId, this.accessor, new component_api_1.DockviewApi(this.accessor), group, view, {
+        var panel = new dockviewPanel_1.DockviewPanel(panelId, contentComponent, tabComponent, this.accessor, new component_api_1.DockviewApi(this.accessor), group, view, {
             renderer: panelData.renderer,
         });
         panel.init({

package/dist/cjs/dockview/dockviewComponent.js

@@ -335,7 +335,15 @@ var DockviewComponent = /** @class */ (function (_super) {
             acceptedTargetZones: ['top', 'bottom', 'left', 'right', 'center'],
             overlayModel: (_b = _this.options.rootOverlayModel) !== null && _b !== void 0 ? _b : DEFAULT_ROOT_OVERLAY_MODEL,
         });
-        _this.addDisposables(_this._rootDropTarget.onDrop(function (event) {
+        _this.addDisposables(_this._rootDropTarget, _this._rootDropTarget.onWillShowOverlay(function (event) {
+            if (_this.gridview.length > 0 && event.position === 'center') {
+                // option only available when no panels in primary grid
+                return;
+            }
+            _this._onWillShowOverlay.fire(new dockviewGroupPanelModel_1.WillShowOverlayLocationEvent(event, {
+                kind: 'edge',
+            }));
+        }), _this._rootDropTarget.onDrop(function (event) {
             var _a;
             var willDropEvent = new dockviewGroupPanelModel_1.DockviewWillDropEvent({
                 nativeEvent: event.nativeEvent,
@@ -344,7 +352,7 @@ var DockviewComponent = /** @class */ (function (_super) {
                 api: _this._api,
                 group: undefined,
                 getData: dataTransfer_1.getPanelData,
-                kind: 'content',
+                kind: 'edge',
             });
             _this._onWillDrop.fire(willDropEvent);
             if (willDropEvent.defaultPrevented) {
@@ -449,7 +457,7 @@ 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(); //item.id;
         if (itemToPopout.api.location.type === 'grid') {
-            itemToPopout.api.setHidden(true);
+            itemToPopout.api.setVisible(false);
         }
         var _window = new popoutWindow_1.PopoutWindow("".concat(this.id, "-").concat(groupId), // unique id
         theme !== null && theme !== void 0 ? theme : '', {
@@ -502,7 +510,7 @@ var DockviewComponent = /** @class */ (function (_super) {
                 });
                 switch (referenceLocation) {
                     case 'grid':
-                        referenceGroup.api.setHidden(true);
+                        referenceGroup.api.setVisible(false);
                         break;
                     case 'floating':
                     case 'popout':
@@ -558,8 +566,8 @@ var DockviewComponent = /** @class */ (function (_super) {
                             to: referenceGroup,
                         });
                     });
-                    if (referenceGroup.api.isHidden) {
-                        referenceGroup.api.setHidden(false);
+                    if (!referenceGroup.api.isVisible) {
+                        referenceGroup.api.setVisible(true);
                     }
                     if (_this.getPanel(group.id)) {
                         _this.doRemoveGroup(group, {
@@ -1269,7 +1277,7 @@ var DockviewComponent = /** @class */ (function (_super) {
     };
     DockviewComponent.prototype.updateWatermark = function () {
         var _a, _b;
-        if (this.groups.filter(function (x) { return x.api.location.type === 'grid' && !x.api.isHidden; }).length === 0) {
+        if (this.groups.filter(function (x) { return x.api.location.type === 'grid' && x.api.isVisible; }).length === 0) {
             if (!this.watermark) {
                 this.watermark = this.createWatermarkComponent();
                 this.watermark.init({
@@ -1705,6 +1713,8 @@ var DockviewComponent = /** @class */ (function (_super) {
                 if (_this._onDidActivePanelChange.value !== event.panel) {
                     _this._onDidActivePanelChange.fire(event.panel);
                 }
+            }), events_1.Event.any(view.model.onDidPanelTitleChange, view.model.onDidPanelParametersChange)(function () {
+                _this._bufferOnDidLayoutChange.fire();
             }));
             this._groups.set(view.id, { value: view, disposable: disposable });
         }
@@ -1717,7 +1727,7 @@ var DockviewComponent = /** @class */ (function (_super) {
         var contentComponent = options.component;
         var tabComponent = (_a = options.tabComponent) !== null && _a !== void 0 ? _a : this.options.defaultTabComponent;
         var view = new dockviewPanelModel_1.DockviewPanelModel(this, options.id, contentComponent, tabComponent);
-        var panel = new dockviewPanel_1.DockviewPanel(options.id, this, this._api, group, view, { renderer: options.renderer });
+        var panel = new dockviewPanel_1.DockviewPanel(options.id, contentComponent, tabComponent, this, this._api, group, view, { renderer: options.renderer });
         panel.init({
             title: (_b = options.title) !== null && _b !== void 0 ? _b : options.id,
             params: (_c = options === null || options === void 0 ? void 0 : options.params) !== null && _c !== void 0 ? _c : {},

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

@@ -5,12 +5,12 @@ import { DockviewComponent } from './dockviewComponent';
 import { DockviewEvent, Event, IDockviewEvent } from '../events';
 import { IViewSize } from '../gridview/gridview';
 import { CompositeDisposable } from '../lifecycle';
-import { IPanel, PanelInitParameters, PanelUpdateEvent } from '../panel/types';
+import { IPanel, PanelInitParameters, PanelUpdateEvent, Parameters } from '../panel/types';
 import { GroupDragEvent, TabDragEvent } from './components/titlebar/tabsContainer';
-import { DockviewDropTargets } from './types';
 import { DockviewGroupPanel } from './dockviewGroupPanel';
 import { IDockviewPanel } from './dockviewPanel';
 import { OverlayRenderContainer } from '../overlayRenderContainer';
+import { TitleEvent } from '../api/dockviewPanelApi';
 interface GroupMoveEvent {
     groupId: string;
     itemId?: string;
@@ -69,7 +69,7 @@ export interface IHeader {
     hidden: boolean;
 }
 export type DockviewGroupPanelLocked = boolean | 'no-drop-target';
-export type DockviewGroupDropLocation = 'tab' | 'header_space' | 'content';
+export type DockviewGroupDropLocation = 'tab' | 'header_space' | 'content' | 'edge';
 export interface IDockviewGroupPanelModel extends IPanel {
     readonly isActive: boolean;
     readonly size: number;
@@ -106,7 +106,7 @@ export interface IDockviewGroupPanelModel extends IPanel {
         panel?: IDockviewPanel;
         suppressRoll?: boolean;
     }): void;
-    canDisplayOverlay(event: DragEvent, position: Position, target: DockviewDropTargets): boolean;
+    canDisplayOverlay(event: DragEvent, position: Position, target: DockviewGroupDropLocation): boolean;
 }
 export type DockviewGroupLocation = {
     type: 'grid';
@@ -150,6 +150,7 @@ export declare class DockviewGroupPanelModel extends CompositeDisposable impleme
     private _width;
     private _height;
     private _panels;
+    private readonly _panelDisposables;
     private readonly _onMove;
     readonly onMove: Event<GroupMoveEvent>;
     private readonly _onDidDrop;
@@ -164,6 +165,10 @@ export declare class DockviewGroupPanelModel extends CompositeDisposable impleme
     readonly onGroupDragStart: Event<GroupDragEvent>;
     private readonly _onDidAddPanel;
     readonly onDidAddPanel: Event<DockviewGroupChangeEvent>;
+    private readonly _onDidPanelTitleChange;
+    readonly onDidPanelTitleChange: Event<TitleEvent>;
+    private readonly _onDidPanelParametersChange;
+    readonly onDidPanelParametersChange: Event<Parameters>;
     private readonly _onDidRemovePanel;
     readonly onDidRemovePanel: Event<DockviewGroupChangeEvent>;
     private readonly _onDidActivePanelChange;
@@ -225,7 +230,7 @@ export declare class DockviewGroupPanelModel extends CompositeDisposable impleme
     private doSetActivePanel;
     private updateMru;
     private updateContainer;
-    canDisplayOverlay(event: DragEvent, position: Position, target: DockviewDropTargets): boolean;
+    canDisplayOverlay(event: DragEvent, position: Position, target: DockviewGroupDropLocation): boolean;
     private handleDropEvent;
     dispose(): void;
 }