dockview-core 1.14.2 → 1.15.1

package/dist/esm/dockview/dockviewComponent.js

@@ -16,7 +16,7 @@ import { DockviewGroupPanel } from './dockviewGroupPanel';
 import { DockviewPanelModel } from './dockviewPanelModel';
 import { getPanelData } from '../dnd/dataTransfer';
 import { Overlay } from '../dnd/overlay';
-import { toggleClass, watchElementResize } from '../dom';
+import { addTestId, toggleClass, watchElementResize } from '../dom';
 import { DockviewFloatingGroupPanel } from './dockviewFloatingGroupPanel';
 import { DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE, DEFAULT_FLOATING_GROUP_POSITION, } from '../constants';
 import { OverlayRenderContainer, } from '../overlayRenderContainer';
@@ -85,6 +85,9 @@ export class DockviewComponent extends BaseGrid {
     get api() {
         return this._api;
     }
+    get gap() {
+        return this.gridview.margin;
+    }
     constructor(options) {
         var _a;
         super({
@@ -96,6 +99,7 @@ export class DockviewComponent extends BaseGrid {
             parentElement: options.parentElement,
             disableAutoResizing: options.disableAutoResizing,
             locked: options.locked,
+            margin: options.gap,
         });
         this.nextGroupId = sequentialNumberGenerator();
         this._deserializer = new DefaultDockviewDeserialzier(this);
@@ -121,9 +125,9 @@ export class DockviewComponent extends BaseGrid {
         this._onDidActivePanelChange = new Emitter();
         this.onDidActivePanelChange = this._onDidActivePanelChange.event;
         this._onDidMovePanel = new Emitter();
+        this.onDidMovePanel = this._onDidMovePanel.event;
         this._floatingGroups = [];
         this._popoutGroups = [];
-        this._ignoreEvents = 0;
         this._onDidRemoveGroup = new Emitter();
         this.onDidRemoveGroup = this._onDidRemoveGroup.event;
         this._onDidAddGroup = new Emitter();
@@ -137,7 +141,9 @@ export class DockviewComponent extends BaseGrid {
         this.overlayRenderContainer = new OverlayRenderContainer(gready);
         toggleClass(this.gridview.element, 'dv-dockview', true);
         toggleClass(this.element, 'dv-debug', !!options.debug);
-        this.addDisposables(this.overlayRenderContainer, this._onWillDragPanel, this._onWillDragGroup, this._onWillShowOverlay, this._onDidActivePanelChange, this._onDidAddPanel, this._onDidRemovePanel, this._onDidLayoutFromJSON, this._onDidDrop, this._onWillDrop, this._onDidMovePanel, this._onDidAddGroup, this._onDidRemoveGroup, this._onDidActiveGroupChange, this._onUnhandledDragOverEvent, this.onDidAdd((event) => {
+        this.addDisposables(this.overlayRenderContainer, this._onWillDragPanel, this._onWillDragGroup, this._onWillShowOverlay, this._onDidActivePanelChange, this._onDidAddPanel, this._onDidRemovePanel, this._onDidLayoutFromJSON, this._onDidDrop, this._onWillDrop, this._onDidMovePanel, this._onDidAddGroup, this._onDidRemoveGroup, this._onDidActiveGroupChange, this._onUnhandledDragOverEvent, this.onDidViewVisibilityChangeMicroTaskQueue(() => {
+            this.updateWatermark();
+        }), this.onDidAdd((event) => {
             if (!this._moving) {
                 this._onDidAddGroup.fire(event);
             }
@@ -151,7 +157,7 @@ export class DockviewComponent extends BaseGrid {
             }
         }), Event.any(this.onDidAdd, this.onDidRemove)(() => {
             this.updateWatermark();
-        }), Event.any(this.onDidAddPanel, this.onDidRemovePanel, this.onDidActivePanelChange)(() => {
+        }), Event.any(this.onDidAddPanel, this.onDidRemovePanel, this.onDidAddGroup, this.onDidRemove, this.onDidMovePanel, this.onDidActivePanelChange)(() => {
             this._bufferOnDidLayoutChange.fire();
         }), Disposable.from(() => {
             // iterate over a copy of the array since .dispose() mutates the original array
@@ -251,7 +257,7 @@ export class DockviewComponent extends BaseGrid {
         var _a, _b, _c;
         if (itemToPopout instanceof DockviewPanel &&
             itemToPopout.group.size === 1) {
-            return this.addPopoutGroup(itemToPopout.group);
+            return this.addPopoutGroup(itemToPopout.group, options);
         }
         const theme = getDockviewTheme(this.gridview.element);
         const element = this.element;
@@ -402,8 +408,8 @@ export class DockviewComponent extends BaseGrid {
             console.error('dockview: failed to create popout window', err);
         });
     }
-    addFloatingGroup(item, coord, options) {
-        var _a, _b, _c, _d, _e, _f, _g;
+    addFloatingGroup(item, options) {
+        var _a, _b, _c, _d, _e;
         let group;
         if (item instanceof DockviewPanel) {
             group = this.createGroup();
@@ -448,26 +454,62 @@ export class DockviewComponent extends BaseGrid {
             }
         }
         group.model.location = { type: 'floating' };
-        const overlayLeft = typeof (coord === null || coord === void 0 ? void 0 : coord.x) === 'number'
-            ? Math.max(coord.x, 0)
-            : DEFAULT_FLOATING_GROUP_POSITION.left;
-        const overlayTop = typeof (coord === null || coord === void 0 ? void 0 : coord.y) === 'number'
-            ? Math.max(coord.y, 0)
-            : DEFAULT_FLOATING_GROUP_POSITION.top;
-        const overlay = new Overlay({
-            container: this.gridview.element,
-            content: group.element,
-            height: (_b = coord === null || coord === void 0 ? void 0 : coord.height) !== null && _b !== void 0 ? _b : 300,
-            width: (_c = coord === null || coord === void 0 ? void 0 : coord.width) !== null && _c !== void 0 ? _c : 300,
-            left: overlayLeft,
-            top: overlayTop,
-            minimumInViewportWidth: this.options.floatingGroupBounds === 'boundedWithinViewport'
+        function getAnchoredBox() {
+            if (options === null || options === void 0 ? void 0 : options.position) {
+                const result = {};
+                if ('left' in options.position) {
+                    result.left = Math.max(options.position.left, 0);
+                }
+                else if ('right' in options.position) {
+                    result.right = Math.max(options.position.right, 0);
+                }
+                else {
+                    result.left = DEFAULT_FLOATING_GROUP_POSITION.left;
+                }
+                if ('top' in options.position) {
+                    result.top = Math.max(options.position.top, 0);
+                }
+                else if ('bottom' in options.position) {
+                    result.bottom = Math.max(options.position.bottom, 0);
+                }
+                else {
+                    result.top = DEFAULT_FLOATING_GROUP_POSITION.top;
+                }
+                if (typeof options.width === 'number') {
+                    result.width = Math.max(options.width, 0);
+                }
+                else {
+                    result.width = DEFAULT_FLOATING_GROUP_POSITION.width;
+                }
+                if (typeof options.height === 'number') {
+                    result.height = Math.max(options.height, 0);
+                }
+                else {
+                    result.height = DEFAULT_FLOATING_GROUP_POSITION.height;
+                }
+                return result;
+            }
+            return {
+                left: typeof (options === null || options === void 0 ? void 0 : options.x) === 'number'
+                    ? Math.max(options.x, 0)
+                    : DEFAULT_FLOATING_GROUP_POSITION.left,
+                top: typeof (options === null || options === void 0 ? void 0 : options.y) === 'number'
+                    ? Math.max(options.y, 0)
+                    : DEFAULT_FLOATING_GROUP_POSITION.top,
+                width: typeof (options === null || options === void 0 ? void 0 : options.width) === 'number'
+                    ? Math.max(options.width, 0)
+                    : DEFAULT_FLOATING_GROUP_POSITION.width,
+                height: typeof (options === null || options === void 0 ? void 0 : options.height) === 'number'
+                    ? Math.max(options.height, 0)
+                    : DEFAULT_FLOATING_GROUP_POSITION.height,
+            };
+        }
+        const anchoredBox = getAnchoredBox();
+        const overlay = new Overlay(Object.assign(Object.assign({ container: this.gridview.element, content: group.element }, anchoredBox), { minimumInViewportWidth: this.options.floatingGroupBounds === 'boundedWithinViewport'
                 ? undefined
-                : (_e = (_d = this.options.floatingGroupBounds) === null || _d === void 0 ? void 0 : _d.minimumWidthWithinViewport) !== null && _e !== void 0 ? _e : DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE,
-            minimumInViewportHeight: this.options.floatingGroupBounds === 'boundedWithinViewport'
+                : (_c = (_b = this.options.floatingGroupBounds) === null || _b === void 0 ? void 0 : _b.minimumWidthWithinViewport) !== null && _c !== void 0 ? _c : DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE, minimumInViewportHeight: this.options.floatingGroupBounds === 'boundedWithinViewport'
                 ? undefined
-                : (_g = (_f = this.options.floatingGroupBounds) === null || _f === void 0 ? void 0 : _f.minimumHeightWithinViewport) !== null && _g !== void 0 ? _g : DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE,
-        });
+                : (_e = (_d = this.options.floatingGroupBounds) === null || _d === void 0 ? void 0 : _d.minimumHeightWithinViewport) !== null && _e !== void 0 ? _e : DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE }));
         const el = group.element.querySelector('.void-container');
         if (!el) {
             throw new Error('failed to find drag handle');
@@ -567,12 +609,21 @@ export class DockviewComponent extends BaseGrid {
                         group.overlay.minimumInViewportWidth =
                             (_b = this.options.floatingGroupBounds) === null || _b === void 0 ? void 0 : _b.minimumWidthWithinViewport;
                 }
-                group.overlay.setBounds({});
+                group.overlay.setBounds();
             }
         }
         if (changed_rootOverlayOptions) {
             this._rootDropTarget.setOverlayModel(options.rootOverlayModel);
         }
+        if (
+        //  if explicitly set as `undefined`
+        'gap' in options &&
+            options.gap === undefined) {
+            this.gridview.margin = 0;
+        }
+        if (typeof options.gap === 'number') {
+            this.gridview.margin = options.gap;
+        }
         this.layout(this.gridview.width, this.gridview.height, true);
     }
     layout(width, height, forceResize) {
@@ -734,11 +785,10 @@ export class DockviewComponent extends BaseGrid {
                 const { data, position } = serializedFloatingGroup;
                 const group = createGroupFromSerializedState(data);
                 this.addFloatingGroup(group, {
-                    x: position.left,
-                    y: position.top,
-                    height: position.height,
-                    width: position.width,
-                }, { skipRemoveGroup: true, inDragMode: false });
+                    position: position,
+                    skipRemoveGroup: true,
+                    inDragMode: false,
+                });
             }
             const serializedPopoutGroups = (_b = data.popoutGroups) !== null && _b !== void 0 ? _b : [];
             for (const serializedPopoutGroup of serializedPopoutGroups) {
@@ -869,15 +919,11 @@ export class DockviewComponent extends BaseGrid {
             if (options.floating) {
                 const group = this.createGroup();
                 this._onDidAddGroup.fire(group);
-                const o = typeof options.floating === 'object' &&
+                const floatingGroupOptions = typeof options.floating === 'object' &&
                     options.floating !== null
                     ? options.floating
                     : {};
-                this.addFloatingGroup(group, o, {
-                    inDragMode: false,
-                    skipRemoveGroup: true,
-                    skipActiveGroup: true,
-                });
+                this.addFloatingGroup(group, Object.assign(Object.assign({}, floatingGroupOptions), { inDragMode: false, skipRemoveGroup: true, skipActiveGroup: true }));
                 panel = this.createPanel(options, group);
                 group.model.openPanel(panel, {
                     skipSetActive: options.inactive,
@@ -916,11 +962,7 @@ export class DockviewComponent extends BaseGrid {
                 options.floating !== null
                 ? options.floating
                 : {};
-            this.addFloatingGroup(group, coordinates, {
-                inDragMode: false,
-                skipRemoveGroup: true,
-                skipActiveGroup: true,
-            });
+            this.addFloatingGroup(group, Object.assign(Object.assign({}, coordinates), { inDragMode: false, skipRemoveGroup: true, skipActiveGroup: true }));
             panel = this.createPanel(options, group);
             group.model.openPanel(panel, {
                 skipSetActive: options.inactive,
@@ -975,6 +1017,7 @@ export class DockviewComponent extends BaseGrid {
                 });
                 const watermarkContainer = document.createElement('div');
                 watermarkContainer.className = 'dv-watermark-container';
+                addTestId(watermarkContainer, 'watermark-component');
                 watermarkContainer.appendChild(this.watermark.element);
                 this.gridview.element.appendChild(watermarkContainer);
             }
@@ -1163,6 +1206,7 @@ export class DockviewComponent extends BaseGrid {
             this.doSetGroupAndPanelActive(destinationGroup);
             this._onDidMovePanel.fire({
                 panel: removedPanel,
+                from: sourceGroup,
             });
         }
         else {
@@ -1186,6 +1230,10 @@ export class DockviewComponent extends BaseGrid {
                         // if a group has one tab - we are essentially moving the 'group'
                         // which is equivalent to swapping two views in this case
                         this.gridview.moveView(sourceParentLocation, from, to);
+                        this._onDidMovePanel.fire({
+                            panel: this.getGroupPanel(sourceItemId),
+                            from: sourceGroup,
+                        });
                         return;
                     }
                 }
@@ -1199,6 +1247,10 @@ export class DockviewComponent extends BaseGrid {
                 const location = getRelativeLocation(this.gridview.orientation, updatedReferenceLocation, destinationTarget);
                 this.movingLock(() => this.doAddGroup(targetGroup, location));
                 this.doSetGroupAndPanelActive(targetGroup);
+                this._onDidMovePanel.fire({
+                    panel: this.getGroupPanel(sourceItemId),
+                    from: sourceGroup,
+                });
             }
             else {
                 /**
@@ -1218,6 +1270,10 @@ export class DockviewComponent extends BaseGrid {
                     skipSetGroupActive: true,
                 }));
                 this.doSetGroupAndPanelActive(group);
+                this._onDidMovePanel.fire({
+                    panel: removedPanel,
+                    from: sourceGroup,
+                });
             }
         }
     }
@@ -1242,9 +1298,6 @@ export class DockviewComponent extends BaseGrid {
                 }
             });
             this.doSetGroupAndPanelActive(to);
-            panels.forEach((panel) => {
-                this._onDidMovePanel.fire({ panel });
-            });
         }
         else {
             switch (from.api.location.type) {
@@ -1270,10 +1323,10 @@ export class DockviewComponent extends BaseGrid {
             const referenceLocation = getGridLocation(to.element);
             const dropLocation = getRelativeLocation(this.gridview.orientation, referenceLocation, target);
             this.gridview.addView(from, Sizing.Distribute, dropLocation);
-            from.panels.forEach((panel) => {
-                this._onDidMovePanel.fire({ panel });
-            });
         }
+        from.panels.forEach((panel) => {
+            this._onDidMovePanel.fire({ panel, from });
+        });
     }
     doSetGroupActive(group) {
         super.doSetGroupActive(group);

package/dist/esm/dockview/dockviewFloatingGroupPanel.d.ts

@@ -1,23 +1,14 @@
 import { Overlay } from '../dnd/overlay';
 import { CompositeDisposable } from '../lifecycle';
+import { AnchoredBox } from '../types';
 import { DockviewGroupPanel, IDockviewGroupPanel } from './dockviewGroupPanel';
 export interface IDockviewFloatingGroupPanel {
     readonly group: IDockviewGroupPanel;
-    position(bounds: Partial<{
-        top: number;
-        left: number;
-        height: number;
-        width: number;
-    }>): void;
+    position(bounds: Partial<AnchoredBox>): void;
 }
 export declare class DockviewFloatingGroupPanel extends CompositeDisposable implements IDockviewFloatingGroupPanel {
     readonly group: DockviewGroupPanel;
     readonly overlay: Overlay;
     constructor(group: DockviewGroupPanel, overlay: Overlay);
-    position(bounds: Partial<{
-        top: number;
-        left: number;
-        height: number;
-        width: number;
-    }>): void;
+    position(bounds: Partial<AnchoredBox>): void;
 }

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

@@ -11,6 +11,7 @@ import { DockviewGroupDropLocation, GroupOptions } from './dockviewGroupPanelMod
 import { IDockviewPanel } from './dockviewPanel';
 import { DockviewPanelRenderer } from '../overlayRenderContainer';
 import { IGroupHeaderProps } from './framework';
+import { FloatingGroupOptions } from './dockviewComponent';
 export interface IHeaderActionsRenderer extends IDisposable {
     readonly element: HTMLElement;
     init(params: IGroupHeaderProps): void;
@@ -25,6 +26,10 @@ export interface ViewFactoryData {
     tab?: string;
 }
 export interface DockviewOptions {
+    /**
+     * Disable the auto-resizing which is controlled through a `ResizeObserver`.
+     * Call `.layout(width, height)` to manually resize the container.
+     */
     disableAutoResizing?: boolean;
     hideBorders?: boolean;
     singleTabMode?: 'fullwidth' | 'default';
@@ -39,6 +44,10 @@ export interface DockviewOptions {
     rootOverlayModel?: DroptargetOverlayModel;
     locked?: boolean;
     disableDnd?: boolean;
+    /**
+     * Pixel gap between groups
+     */
+    gap?: number;
 }
 export interface DockviewDndOverlayEvent {
     nativeEvent: DragEvent;
@@ -100,12 +109,7 @@ export type AddPanelPositionOptions = RelativePanel | RelativeGroup | AbsolutePo
 export declare function isPanelOptionsWithPanel(data: AddPanelPositionOptions): data is RelativePanel;
 export declare function isPanelOptionsWithGroup(data: AddPanelPositionOptions): data is RelativeGroup;
 type AddPanelFloatingGroupUnion = {
-    floating: {
-        height?: number;
-        width?: number;
-        x?: number;
-        y?: number;
-    } | true;
+    floating: Partial<FloatingGroupOptions> | true;
     position: never;
 };
 type AddPanelPositionUnion = {

package/dist/esm/dockview/options.js

@@ -31,6 +31,7 @@ export const PROPERTY_KEYS = (() => {
         rootOverlayModel: undefined,
         locked: undefined,
         disableDnd: undefined,
+        gap: undefined,
     };
     return Object.keys(properties);
 })();

package/dist/esm/dom.d.ts

@@ -26,3 +26,4 @@ export declare function getDomNodePagePosition(domNode: Element): {
  * @see https://terodox.tech/how-to-tell-if-an-element-is-in-the-dom-including-the-shadow-dom/
  */
 export declare function isInDocument(element: Element): boolean;
+export declare function addTestId(element: HTMLElement, id: string): void;

package/dist/esm/dom.js

@@ -179,3 +179,6 @@ export function isInDocument(element) {
     }
     return false;
 }
+export function addTestId(element, id) {
+    element.setAttribute('data-testid', id);
+}

package/dist/esm/gridview/baseComponentGridview.d.ts

@@ -15,6 +15,7 @@ export interface BaseGridOptions {
     readonly parentElement: HTMLElement;
     readonly disableAutoResizing?: boolean;
     readonly locked?: boolean;
+    readonly margin?: number;
 }
 export interface IGridPanelView extends IGridView, IPanel {
     setActive(isActive: boolean): void;
@@ -59,6 +60,8 @@ export declare abstract class BaseGrid<T extends IGridPanelView> extends Resizab
     readonly onDidActiveChange: Event<T | undefined>;
     protected readonly _bufferOnDidLayoutChange: AsapEvent;
     readonly onDidLayoutChange: Event<void>;
+    private readonly _onDidViewVisibilityChangeMicroTaskQueue;
+    readonly onDidViewVisibilityChangeMicroTaskQueue: Event<void>;
     get id(): string;
     get size(): number;
     get groups(): T[];

package/dist/esm/gridview/baseComponentGridview.js

@@ -69,14 +69,18 @@ export class BaseGrid extends Resizable {
         this.onDidActiveChange = this._onDidActiveChange.event;
         this._bufferOnDidLayoutChange = new AsapEvent();
         this.onDidLayoutChange = this._bufferOnDidLayoutChange.onEvent;
+        this._onDidViewVisibilityChangeMicroTaskQueue = new AsapEvent();
+        this.onDidViewVisibilityChangeMicroTaskQueue = this._onDidViewVisibilityChangeMicroTaskQueue.onEvent;
         this.element.style.height = '100%';
         this.element.style.width = '100%';
         options.parentElement.appendChild(this.element);
-        this.gridview = new Gridview(!!options.proportionalLayout, options.styles, options.orientation);
+        this.gridview = new Gridview(!!options.proportionalLayout, options.styles, options.orientation, options.locked, options.margin);
         this.gridview.locked = !!options.locked;
         this.element.appendChild(this.gridview.element);
         this.layout(0, 0, true); // set some elements height/widths
-        this.addDisposables(Disposable.from(() => {
+        this.addDisposables(this.gridview.onDidViewVisibilityChange(() => this._onDidViewVisibilityChangeMicroTaskQueue.fire()), this.onDidViewVisibilityChangeMicroTaskQueue(() => {
+            this.layout(this.width, this.height, true);
+        }), Disposable.from(() => {
             var _a;
             (_a = this.element.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(this.element);
         }), this.gridview.onDidChange(() => {

package/dist/esm/gridview/branchNode.d.ts

@@ -19,7 +19,9 @@ export declare class BranchNode extends CompositeDisposable implements IView {
         orthogonalSize?: number;
     }>;
     private readonly _onDidVisibilityChange;
-    readonly onDidVisibilityChange: Event<boolean>;
+    readonly onDidVisibilityChange: Event<{
+        visible: boolean;
+    }>;
     get width(): number;
     get height(): number;
     get minimumSize(): number;
@@ -35,8 +37,10 @@ export declare class BranchNode extends CompositeDisposable implements IView {
     get priority(): LayoutPriority;
     get disabled(): boolean;
     set disabled(value: boolean);
-    constructor(orientation: Orientation, proportionalLayout: boolean, styles: ISplitviewStyles | undefined, size: number, orthogonalSize: number, disabled: boolean, childDescriptors?: INodeDescriptor[]);
-    setVisible(visible: boolean): void;
+    get margin(): number;
+    set margin(value: number);
+    constructor(orientation: Orientation, proportionalLayout: boolean, styles: ISplitviewStyles | undefined, size: number, orthogonalSize: number, disabled: boolean, margin: number | undefined, childDescriptors?: INodeDescriptor[]);
+    setVisible(_visible: boolean): void;
     isChildVisible(index: number): boolean;
     setChildVisible(index: number, visible: boolean): void;
     moveChild(from: number, to: number): void;

package/dist/esm/gridview/branchNode.js

@@ -82,7 +82,18 @@ export class BranchNode extends CompositeDisposable {
     set disabled(value) {
         this.splitview.disabled = value;
     }
-    constructor(orientation, proportionalLayout, styles, size, orthogonalSize, disabled, childDescriptors) {
+    get margin() {
+        return this.splitview.margin;
+    }
+    set margin(value) {
+        this.splitview.margin = value;
+        this.children.forEach((child) => {
+            if (child instanceof BranchNode) {
+                child.margin = value;
+            }
+        });
+    }
+    constructor(orientation, proportionalLayout, styles, size, orthogonalSize, disabled, margin, childDescriptors) {
         super();
         this.orientation = orientation;
         this.proportionalLayout = proportionalLayout;
@@ -102,6 +113,7 @@ export class BranchNode extends CompositeDisposable {
                 orientation: this.orientation,
                 proportionalLayout,
                 styles,
+                margin,
             });
             this.splitview.layout(this.size, this.orthogonalSize);
         }
@@ -125,6 +137,7 @@ export class BranchNode extends CompositeDisposable {
                 descriptor,
                 proportionalLayout,
                 styles,
+                margin,
             });
         }
         this.disabled = disabled;
@@ -133,10 +146,8 @@ export class BranchNode extends CompositeDisposable {
         }));
         this.setupChildrenEvents();
     }
-    setVisible(visible) {
-        for (const child of this.children) {
-            child.setVisible(visible);
-        }
+    setVisible(_visible) {
+        // noop
     }
     isChildVisible(index) {
         if (index < 0 || index >= this.children.length) {
@@ -153,12 +164,13 @@ export class BranchNode extends CompositeDisposable {
         }
         const wereAllChildrenHidden = this.splitview.contentSize === 0;
         this.splitview.setViewVisible(index, visible);
+        // }
         const areAllChildrenHidden = this.splitview.contentSize === 0;
         // If all children are hidden then the parent should hide the entire splitview
         // If the entire splitview is hidden then the parent should show the splitview when a child is shown
         if ((visible && wereAllChildrenHidden) ||
             (!visible && areAllChildrenHidden)) {
-            this._onDidVisibilityChange.fire(visible);
+            this._onDidVisibilityChange.fire({ visible });
         }
     }
     moveChild(from, to) {
@@ -231,7 +243,7 @@ export class BranchNode extends CompositeDisposable {
             this._onDidChange.fire({ size: e.orthogonalSize });
         }), ...this.children.map((c, i) => {
             if (c instanceof BranchNode) {
-                return c.onDidVisibilityChange((visible) => {
+                return c.onDidVisibilityChange(({ visible }) => {
                     this.setChildVisible(i, visible);
                 });
             }

package/dist/esm/gridview/gridview.d.ts

@@ -26,6 +26,7 @@ export interface IGridView {
     readonly maximumWidth: number;
     readonly minimumHeight: number;
     readonly maximumHeight: number;
+    readonly isVisible: boolean;
     priority?: LayoutPriority;
     layout(width: number, height: number): void;
     toJSON(): object;
@@ -88,6 +89,7 @@ export declare class Gridview implements IDisposable {
     readonly element: HTMLElement;
     private _root;
     private _locked;
+    private _margin;
     private _maximizedNode;
     private readonly disposable;
     private readonly _onDidChange;
@@ -95,6 +97,8 @@ export declare class Gridview implements IDisposable {
         size?: number;
         orthogonalSize?: number;
     }>;
+    private readonly _onDidViewVisibilityChange;
+    readonly onDidViewVisibilityChange: Event<void>;
     private readonly _onDidMaximizedNodeChange;
     readonly onDidMaximizedNodeChange: Event<void>;
     get length(): number;
@@ -108,6 +112,8 @@ export declare class Gridview implements IDisposable {
     get maximumHeight(): number;
     get locked(): boolean;
     set locked(value: boolean);
+    get margin(): number;
+    set margin(value: number);
     maximizedView(): IGridView | undefined;
     hasMaximizedView(): boolean;
     maximizeView(view: IGridView): void;
@@ -131,7 +137,7 @@ export declare class Gridview implements IDisposable {
     getView(location?: number[]): GridNode<IGridView>;
     private _getViews;
     private progmaticSelect;
-    constructor(proportionalLayout: boolean, styles: ISplitviewStyles | undefined, orientation: Orientation);
+    constructor(proportionalLayout: boolean, styles: ISplitviewStyles | undefined, orientation: Orientation, locked?: boolean, margin?: number);
     isViewVisible(location: number[]): boolean;
     setViewVisible(location: number[], visible: boolean): void;
     moveView(parentLocation: number[], from: number, to: number): void;