dockview-core 1.10.0 → 1.10.1

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/dockviewPanelApi.d.ts

@@ -78,4 +78,5 @@ export declare class DockviewPanelApiImpl extends GridviewPanelApiImpl implement
     maximize(): void;
     isMaximized(): boolean;
     exitMaximized(): void;
+    private setupGroupEventListeners;
 }

package/dist/cjs/api/dockviewPanelApi.js

@@ -38,6 +38,7 @@ var DockviewPanelApiImpl = /** @class */ (function (_super) {
         _this.groupEventsDisposable = new lifecycle_1.MutableDisposable();
         _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 +75,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,
                 });
@@ -141,6 +120,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/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,8 @@ export interface PanelApi {
     readonly onDidFocusChange: Event<FocusEvent>;
     readonly onDidVisibilityChange: Event<VisibilityEvent>;
     readonly onDidActiveChange: Event<ActiveEvent>;
-    readonly onDidHiddenChange: Event<HiddenEvent>;
     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 +38,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
      */
@@ -66,7 +59,6 @@ export declare class PanelApiImpl extends CompositeDisposable implements PanelAp
     private _isFocused;
     private _isActive;
     private _isVisible;
-    private _isHidden;
     private _width;
     private _height;
     private readonly panelUpdatesDisposable;
@@ -78,8 +70,8 @@ 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>;
@@ -89,12 +81,11 @@ export declare class PanelApiImpl extends CompositeDisposable implements PanelAp
     get isFocused(): boolean;
     get isActive(): boolean;
     get isVisible(): boolean;
-    get isHidden(): boolean;
     get width(): number;
     get height(): number;
     constructor(id: string);
     initialize(panel: IPanel): void;
-    setHidden(isHidden: boolean): void;
+    setVisible(isVisible: boolean): void;
     setActive(): void;
     updateParameters(parameters: Parameters): void;
 }

package/dist/cjs/api/panelApi.js

@@ -37,7 +37,6 @@ var PanelApiImpl = /** @class */ (function (_super) {
         _this._isFocused = false;
         _this._isActive = false;
         _this._isVisible = true;
-        _this._isHidden = false;
         _this._width = 0;
         _this._height = 0;
         _this.panelUpdatesDisposable = new lifecycle_1.MutableDisposable();
@@ -51,8 +50,8 @@ 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();
@@ -65,12 +64,10 @@ var PanelApiImpl = /** @class */ (function (_super) {
             _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._onUpdateParameters, _this._onWillFocus, _this._onWillVisibilityChange, _this._onUpdateParameters);
         return _this;
     }
     Object.defineProperty(PanelApiImpl.prototype, "isFocused", {
@@ -94,13 +91,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;
@@ -122,8 +112,8 @@ var PanelApiImpl = /** @class */ (function (_super) {
             });
         });
     };
-    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();

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/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({

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

@@ -7,7 +7,6 @@ import { IViewSize } from '../gridview/gridview';
 import { CompositeDisposable } from '../lifecycle';
 import { IPanel, PanelInitParameters, PanelUpdateEvent } 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';
@@ -69,7 +68,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 +105,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';
@@ -225,7 +224,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;
 }

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

@@ -1,14 +1,14 @@
 import { DockviewApi } from '../api/component.api';
 import { Direction } from '../gridview/baseComponentGridview';
 import { IGridView } from '../gridview/gridview';
-import { IContentRenderer, ITabRenderer, WatermarkConstructor, IWatermarkRenderer, DockviewDropTargets } from './types';
+import { IContentRenderer, ITabRenderer, WatermarkConstructor, IWatermarkRenderer } from './types';
 import { Parameters } from '../panel/types';
 import { DockviewGroupPanel } from './dockviewGroupPanel';
 import { ISplitviewStyles, Orientation } from '../splitview/splitview';
 import { PanelTransfer } from '../dnd/dataTransfer';
 import { IDisposable } from '../lifecycle';
 import { DroptargetOverlayModel, Position } from '../dnd/droptarget';
-import { GroupOptions } from './dockviewGroupPanelModel';
+import { DockviewGroupDropLocation, GroupOptions } from './dockviewGroupPanelModel';
 import { IDockviewPanel } from './dockviewPanel';
 import { ComponentConstructor, FrameworkFactory } from '../panel/componentFactory';
 import { DockviewGroupPanelApi } from '../api/dockviewGroupPanelApi';
@@ -50,7 +50,7 @@ export interface ViewFactoryData {
 }
 export interface DockviewDndOverlayEvent {
     nativeEvent: DragEvent;
-    target: DockviewDropTargets;
+    target: DockviewGroupDropLocation;
     position: Position;
     group?: DockviewGroupPanel;
     getData: () => PanelTransfer | undefined;

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

@@ -6,7 +6,6 @@ import { Event } from '../events';
 import { Optional } from '../types';
 import { DockviewGroupPanel, IDockviewGroupPanel } from './dockviewGroupPanel';
 import { DockviewPanelRenderer } from '../overlayRenderContainer';
-export type DockviewDropTargets = 'tab' | 'panel' | 'tabContainer' | 'edge';
 export interface HeaderPartInitParameters {
     title: string;
 }

package/dist/cjs/gridview/gridviewPanel.js

@@ -58,10 +58,10 @@ var GridviewPanel = /** @class */ (function (_super) {
             _this._maximumHeight = options.maximumHeight;
         }
         _this.api.initialize(_this); // TODO: required to by-pass 'super before this' requirement
-        _this.addDisposables(_this.api.onDidHiddenChange(function (event) {
-            var isHidden = event.isHidden;
+        _this.addDisposables(_this.api.onWillVisibilityChange(function (event) {
+            var isVisible = event.isVisible;
             var accessor = _this._params.accessor;
-            accessor.setVisible(_this, !isHidden);
+            accessor.setVisible(_this, isVisible);
         }), _this.api.onActiveChange(function () {
             var accessor = _this._params.accessor;
             accessor.doSetGroupActive(_this);

package/dist/cjs/lifecycle.d.ts

@@ -1,5 +1,5 @@
 export interface IDisposable {
-    dispose: () => void;
+    dispose(): void;
 }
 export interface IValueDisposable<T> {
     readonly value: T;

package/dist/cjs/paneview/paneview.d.ts

@@ -26,6 +26,7 @@ export declare class Paneview extends CompositeDisposable implements IDisposable
         orientation: Orientation;
         descriptor?: ISplitViewDescriptor;
     });
+    setViewVisible(index: number, visible: boolean): void;
     addPane(pane: PaneviewPanel, size?: number | Sizing, index?: number, skipLayout?: boolean): void;
     getViewSize(index: number): number;
     getPanes(): PaneviewPanel[];

package/dist/cjs/paneview/paneview.js

@@ -114,6 +114,9 @@ var Paneview = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Paneview.prototype.setViewVisible = function (index, visible) {
+        this.splitview.setViewVisible(index, visible);
+    };
     Paneview.prototype.addPane = function (pane, size, index, skipLayout) {
         var _this = this;
         if (index === void 0) { index = this.splitview.length; }

package/dist/cjs/paneview/paneviewComponent.d.ts

@@ -84,6 +84,7 @@ export interface IPaneviewComponent extends IDisposable {
     getPanel(id: string): IPaneviewPanel | undefined;
     movePanel(from: number, to: number): void;
     updateOptions(options: Partial<PaneviewComponentOptions>): void;
+    setVisible(panel: IPaneviewPanel, visible: boolean): void;
     clear(): void;
 }
 export declare class PaneviewComponent extends Resizable implements IPaneviewComponent {
@@ -112,6 +113,7 @@ export declare class PaneviewComponent extends Resizable implements IPaneviewCom
     get width(): number;
     get options(): PaneviewComponentOptions;
     constructor(options: PaneviewComponentOptions);
+    setVisible(panel: PaneviewPanel, visible: boolean): void;
     focus(): void;
     updateOptions(options: Partial<PaneviewComponentOptions>): void;
     addPanel<T extends object = Parameters>(options: AddPaneviewComponentOptions<T>): IPaneviewPanel;

package/dist/cjs/paneview/paneviewComponent.js

@@ -180,6 +180,10 @@ var PaneviewComponent = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    PaneviewComponent.prototype.setVisible = function (panel, visible) {
+        var index = this.panels.indexOf(panel);
+        this.paneview.setViewVisible(index, visible);
+    };
     PaneviewComponent.prototype.focus = function () {
         //noop
     };
@@ -226,6 +230,7 @@ var PaneviewComponent = /** @class */ (function (_super) {
             isExpanded: options.isExpanded,
             title: options.title,
             containerApi: new component_api_1.PaneviewApi(this),
+            accessor: this,
         });
         this.paneview.addPane(view, size, index);
         view.orientation = this.paneview.orientation;
@@ -329,6 +334,7 @@ var PaneviewComponent = /** @class */ (function (_super) {
                             title: data.title,
                             isExpanded: !!view.expanded,
                             containerApi: new component_api_1.PaneviewApi(_this),
+                            accessor: _this,
                         });
                         panel.orientation = _this.paneview.orientation;
                     });

package/dist/cjs/paneview/paneviewPanel.d.ts

@@ -5,6 +5,7 @@ import { BasePanelView, BasePanelViewExported, BasePanelViewState } from '../gri
 import { IDisposable } from '../lifecycle';
 import { IFrameworkPart, PanelInitParameters, PanelUpdateEvent } from '../panel/types';
 import { IView, Orientation } from '../splitview/splitview';
+import { PaneviewComponent } from './paneviewComponent';
 export interface PanePanelViewState extends BasePanelViewState {
     headerComponent?: string;
     title: string;
@@ -15,6 +16,7 @@ export interface PanePanelInitParameter extends PanelInitParameters {
     isExpanded?: boolean;
     title: string;
     containerApi: PaneviewApi;
+    accessor: PaneviewComponent;
 }
 export interface PanePanelComponentInitParameter extends PanePanelInitParameter {
     api: PaneviewPanelApiImpl;

package/dist/cjs/paneview/paneviewPanel.js

@@ -71,7 +71,11 @@ var PaneviewPanel = /** @class */ (function (_super) {
         _this._onDidChangeExpansionState.fire(_this.isExpanded()); // initialize value
         _this._orientation = orientation;
         _this.element.classList.add('pane');
-        _this.addDisposables(_this.api.onDidSizeChange(function (event) {
+        _this.addDisposables(_this.api.onWillVisibilityChange(function (event) {
+            var isVisible = event.isVisible;
+            var accessor = _this._params.accessor;
+            accessor.setVisible(_this, isVisible);
+        }), _this.api.onDidSizeChange(function (event) {
             _this._onDidChange.fire({ size: event.size });
         }), (0, events_1.addDisposableListener)(_this.element, 'mouseenter', function (ev) {
             _this.api._onMouseEnter.fire(ev);

package/dist/cjs/splitview/splitviewComponent.d.ts

@@ -88,7 +88,7 @@ export declare class SplitviewComponent extends Resizable implements ISplitviewC
     focus(): void;
     movePanel(from: number, to: number): void;
     setVisible(panel: SplitviewPanel, visible: boolean): void;
-    setActive(view: SplitviewPanel, skipFocus?: boolean): void;
+    setActive(panel: SplitviewPanel, skipFocus?: boolean): void;
     removePanel(panel: SplitviewPanel, sizing?: Sizing): void;
     getPanel(id: string): SplitviewPanel | undefined;
     addPanel<T extends object = Parameters>(options: AddSplitviewComponentOptions<T>): SplitviewPanel;

package/dist/cjs/splitview/splitviewComponent.js

@@ -183,19 +183,19 @@ var SplitviewComponent = /** @class */ (function (_super) {
         var index = this.panels.indexOf(panel);
         this.splitview.setViewVisible(index, visible);
     };
-    SplitviewComponent.prototype.setActive = function (view, skipFocus) {
-        this._activePanel = view;
+    SplitviewComponent.prototype.setActive = function (panel, skipFocus) {
+        this._activePanel = panel;
         this.panels
-            .filter(function (v) { return v !== view; })
+            .filter(function (v) { return v !== panel; })
             .forEach(function (v) {
             v.api._onDidActiveChange.fire({ isActive: false });
             if (!skipFocus) {
                 v.focus();
             }
         });
-        view.api._onDidActiveChange.fire({ isActive: true });
+        panel.api._onDidActiveChange.fire({ isActive: true });
         if (!skipFocus) {
-            view.focus();
+            panel.focus();
         }
     };
     SplitviewComponent.prototype.removePanel = function (panel, sizing) {

package/dist/cjs/splitview/splitviewPanel.js

@@ -59,10 +59,10 @@ var SplitviewPanel = /** @class */ (function (_super) {
         _this._onDidChange = new events_1.Emitter();
         _this.onDidChange = _this._onDidChange.event;
         _this.api.initialize(_this);
-        _this.addDisposables(_this._onDidChange, _this.api.onDidHiddenChange(function (event) {
-            var isHidden = event.isHidden;
+        _this.addDisposables(_this._onDidChange, _this.api.onWillVisibilityChange(function (event) {
+            var isVisible = event.isVisible;
             var accessor = _this._params.accessor;
-            accessor.setVisible(_this, !isHidden);
+            accessor.setVisible(_this, isVisible);
         }), _this.api.onActiveChange(function () {
             var accessor = _this._params.accessor;
             accessor.setActive(_this);