dockview-core 1.14.1 → 1.15.0

package/dist/cjs/dockview/dockviewComponent.js

@@ -138,6 +138,7 @@ var DockviewComponent = /** @class */ (function (_super) {
             parentElement: options.parentElement,
             disableAutoResizing: options.disableAutoResizing,
             locked: options.locked,
+            margin: options.gap,
         }) || this;
         _this.nextGroupId = (0, math_1.sequentialNumberGenerator)();
         _this._deserializer = new deserializer_1.DefaultDockviewDeserialzier(_this);
@@ -163,9 +164,9 @@ var DockviewComponent = /** @class */ (function (_super) {
         _this._onDidActivePanelChange = new events_1.Emitter();
         _this.onDidActivePanelChange = _this._onDidActivePanelChange.event;
         _this._onDidMovePanel = new events_1.Emitter();
+        _this.onDidMovePanel = _this._onDidMovePanel.event;
         _this._floatingGroups = [];
         _this._popoutGroups = [];
-        _this._ignoreEvents = 0;
         _this._onDidRemoveGroup = new events_1.Emitter();
         _this.onDidRemoveGroup = _this._onDidRemoveGroup.event;
         _this._onDidAddGroup = new events_1.Emitter();
@@ -179,7 +180,9 @@ var DockviewComponent = /** @class */ (function (_super) {
         _this.overlayRenderContainer = new overlayRenderContainer_1.OverlayRenderContainer(gready);
         (0, dom_1.toggleClass)(_this.gridview.element, 'dv-dockview', true);
         (0, dom_1.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(function (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(function () {
+            _this.updateWatermark();
+        }), _this.onDidAdd(function (event) {
             if (!_this._moving) {
                 _this._onDidAddGroup.fire(event);
             }
@@ -193,7 +196,7 @@ var DockviewComponent = /** @class */ (function (_super) {
             }
         }), events_1.Event.any(_this.onDidAdd, _this.onDidRemove)(function () {
             _this.updateWatermark();
-        }), events_1.Event.any(_this.onDidAddPanel, _this.onDidRemovePanel, _this.onDidActivePanelChange)(function () {
+        }), events_1.Event.any(_this.onDidAddPanel, _this.onDidRemovePanel, _this.onDidAddGroup, _this.onDidRemove, _this.onDidMovePanel, _this.onDidActivePanelChange)(function () {
             _this._bufferOnDidLayoutChange.fire();
         }), lifecycle_1.Disposable.from(function () {
             var e_1, _a, e_2, _b;
@@ -525,9 +528,9 @@ var DockviewComponent = /** @class */ (function (_super) {
             console.error('dockview: failed to create popout window', err);
         });
     };
-    DockviewComponent.prototype.addFloatingGroup = function (item, coord, options) {
+    DockviewComponent.prototype.addFloatingGroup = function (item, options) {
         var _this = this;
-        var _a, _b, _c, _d, _e, _f, _g;
+        var _a, _b, _c, _d, _e;
         var group;
         if (item instanceof dockviewPanel_1.DockviewPanel) {
             group = this.createGroup();
@@ -578,26 +581,62 @@ var DockviewComponent = /** @class */ (function (_super) {
             }
         }
         group.model.location = { type: 'floating' };
-        var overlayLeft = typeof (coord === null || coord === void 0 ? void 0 : coord.x) === 'number'
-            ? Math.max(coord.x, 0)
-            : constants_1.DEFAULT_FLOATING_GROUP_POSITION.left;
-        var overlayTop = typeof (coord === null || coord === void 0 ? void 0 : coord.y) === 'number'
-            ? Math.max(coord.y, 0)
-            : constants_1.DEFAULT_FLOATING_GROUP_POSITION.top;
-        var overlay = new overlay_1.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) {
+                var 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 = constants_1.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 = constants_1.DEFAULT_FLOATING_GROUP_POSITION.top;
+                }
+                if ('width' in options.position) {
+                    result.width = Math.max(options.position.width, 0);
+                }
+                else {
+                    result.width = constants_1.DEFAULT_FLOATING_GROUP_POSITION.width;
+                }
+                if ('height' in options.position) {
+                    result.height = Math.max(options.position.height, 0);
+                }
+                else {
+                    result.height = constants_1.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)
+                    : constants_1.DEFAULT_FLOATING_GROUP_POSITION.left,
+                top: typeof (options === null || options === void 0 ? void 0 : options.y) === 'number'
+                    ? Math.max(options.y, 0)
+                    : constants_1.DEFAULT_FLOATING_GROUP_POSITION.top,
+                width: typeof (options === null || options === void 0 ? void 0 : options.width) === 'number'
+                    ? Math.max(options.width, 0)
+                    : constants_1.DEFAULT_FLOATING_GROUP_POSITION.width,
+                height: typeof (options === null || options === void 0 ? void 0 : options.height) === 'number'
+                    ? Math.max(options.height, 0)
+                    : constants_1.DEFAULT_FLOATING_GROUP_POSITION.height,
+            };
+        }
+        var anchoredBox = getAnchoredBox();
+        var overlay = new overlay_1.Overlay(__assign(__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 : constants_1.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 : constants_1.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 : constants_1.DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE,
-        });
+                : (_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');
         if (!el) {
             throw new Error('failed to find drag handle');
@@ -700,7 +739,7 @@ var DockviewComponent = /** @class */ (function (_super) {
                             group.overlay.minimumInViewportWidth =
                                 (_c = this.options.floatingGroupBounds) === null || _c === void 0 ? void 0 : _c.minimumWidthWithinViewport;
                     }
-                    group.overlay.setBounds({});
+                    group.overlay.setBounds();
                 }
             }
             catch (e_3_1) { e_3 = { error: e_3_1 }; }
@@ -714,6 +753,12 @@ var DockviewComponent = /** @class */ (function (_super) {
         if (changed_rootOverlayOptions) {
             this._rootDropTarget.setOverlayModel(options.rootOverlayModel);
         }
+        if (this.gridview.margin !== 0 && 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);
     };
     DockviewComponent.prototype.layout = function (width, height, forceResize) {
@@ -903,11 +948,10 @@ var DockviewComponent = /** @class */ (function (_super) {
                     var data_1 = serializedFloatingGroup.data, position = serializedFloatingGroup.position;
                     var group = createGroupFromSerializedState_1(data_1);
                     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,
+                    });
                 }
             }
             catch (e_5_1) { e_5 = { error: e_5_1 }; }
@@ -1132,11 +1176,7 @@ var DockviewComponent = /** @class */ (function (_super) {
                     options.floating !== null
                     ? options.floating
                     : {};
-                this.addFloatingGroup(group, o, {
-                    inDragMode: false,
-                    skipRemoveGroup: true,
-                    skipActiveGroup: true,
-                });
+                this.addFloatingGroup(group, __assign(__assign({}, o), { inDragMode: false, skipRemoveGroup: true, skipActiveGroup: true }));
                 panel = this.createPanel(options, group);
                 group.model.openPanel(panel, {
                     skipSetActive: options.inactive,
@@ -1175,11 +1215,7 @@ var DockviewComponent = /** @class */ (function (_super) {
                 options.floating !== null
                 ? options.floating
                 : {};
-            this.addFloatingGroup(group, coordinates, {
-                inDragMode: false,
-                skipRemoveGroup: true,
-                skipActiveGroup: true,
-            });
+            this.addFloatingGroup(group, __assign(__assign({}, coordinates), { inDragMode: false, skipRemoveGroup: true, skipActiveGroup: true }));
             panel = this.createPanel(options, group);
             group.model.openPanel(panel, {
                 skipSetActive: options.inactive,
@@ -1235,6 +1271,7 @@ var DockviewComponent = /** @class */ (function (_super) {
                 });
                 var watermarkContainer = document.createElement('div');
                 watermarkContainer.className = 'dv-watermark-container';
+                (0, dom_1.addTestId)(watermarkContainer, 'watermark-component');
                 watermarkContainer.appendChild(this.watermark.element);
                 this.gridview.element.appendChild(watermarkContainer);
             }
@@ -1439,6 +1476,7 @@ var DockviewComponent = /** @class */ (function (_super) {
             this.doSetGroupAndPanelActive(destinationGroup);
             this._onDidMovePanel.fire({
                 panel: removedPanel_1,
+                from: sourceGroup,
             });
         }
         else {
@@ -1462,6 +1500,10 @@ var DockviewComponent = /** @class */ (function (_super) {
                         // 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;
                     }
                 }
@@ -1477,6 +1519,10 @@ var DockviewComponent = /** @class */ (function (_super) {
                 var location_3 = (0, gridview_1.getRelativeLocation)(this.gridview.orientation, updatedReferenceLocation, destinationTarget);
                 this.movingLock(function () { return _this.doAddGroup(targetGroup_1, location_3); });
                 this.doSetGroupAndPanelActive(targetGroup_1);
+                this._onDidMovePanel.fire({
+                    panel: this.getGroupPanel(sourceItemId),
+                    from: sourceGroup,
+                });
             }
             else {
                 /**
@@ -1500,6 +1546,10 @@ var DockviewComponent = /** @class */ (function (_super) {
                     });
                 });
                 this.doSetGroupAndPanelActive(group_2);
+                this._onDidMovePanel.fire({
+                    panel: removedPanel_2,
+                    from: sourceGroup,
+                });
             }
         }
     };
@@ -1540,9 +1590,6 @@ var DockviewComponent = /** @class */ (function (_super) {
                 }
             });
             this.doSetGroupAndPanelActive(to);
-            panels_2.forEach(function (panel) {
-                _this._onDidMovePanel.fire({ panel: panel });
-            });
         }
         else {
             switch (from.api.location.type) {
@@ -1568,10 +1615,10 @@ var DockviewComponent = /** @class */ (function (_super) {
             var referenceLocation = (0, gridview_1.getGridLocation)(to.element);
             var dropLocation = (0, gridview_1.getRelativeLocation)(this.gridview.orientation, referenceLocation, target);
             this.gridview.addView(from, splitview_1.Sizing.Distribute, dropLocation);
-            from.panels.forEach(function (panel) {
-                _this._onDidMovePanel.fire({ panel: panel });
-            });
         }
+        from.panels.forEach(function (panel) {
+            _this._onDidMovePanel.fire({ panel: panel, from: from });
+        });
     };
     DockviewComponent.prototype.doSetGroupActive = function (group) {
         _super.prototype.doSetGroupActive.call(this, group);

package/dist/cjs/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/cjs/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 { AnchoredBox } from '../types';
 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<AnchoredBox> | true;
     position: never;
 };
 type AddPanelPositionUnion = {

package/dist/cjs/dockview/options.js

@@ -40,6 +40,7 @@ exports.PROPERTY_KEYS = (function () {
         rootOverlayModel: undefined,
         locked: undefined,
         disableDnd: undefined,
+        gap: undefined,
     };
     return Object.keys(properties);
 })();

package/dist/cjs/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/cjs/dom.js

@@ -26,7 +26,7 @@ var __values = (this && this.__values) || function(o) {
     throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-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.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;
 var events_1 = require("./events");
 var lifecycle_1 = require("./lifecycle");
 function watchElementResize(element, cb) {
@@ -274,3 +274,7 @@ function isInDocument(element) {
     return false;
 }
 exports.isInDocument = isInDocument;
+function addTestId(element, id) {
+    element.setAttribute('data-testid', id);
+}
+exports.addTestId = addTestId;

package/dist/cjs/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/cjs/gridview/baseComponentGridview.js

@@ -64,14 +64,20 @@ var BaseGrid = /** @class */ (function (_super) {
         _this.onDidActiveChange = _this._onDidActiveChange.event;
         _this._bufferOnDidLayoutChange = new events_1.AsapEvent();
         _this.onDidLayoutChange = _this._bufferOnDidLayoutChange.onEvent;
+        _this._onDidViewVisibilityChangeMicroTaskQueue = new events_1.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_1.Gridview(!!options.proportionalLayout, options.styles, options.orientation);
+        _this.gridview = new gridview_1.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(lifecycle_1.Disposable.from(function () {
+        _this.addDisposables(_this.gridview.onDidViewVisibilityChange(function () {
+            return _this._onDidViewVisibilityChangeMicroTaskQueue.fire();
+        }), _this.onDidViewVisibilityChangeMicroTaskQueue(function () {
+            _this.layout(_this.width, _this.height, true);
+        }), lifecycle_1.Disposable.from(function () {
             var _a;
             (_a = _this.element.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(_this.element);
         }), _this.gridview.onDidChange(function () {

package/dist/cjs/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/cjs/gridview/branchNode.js

@@ -43,17 +43,6 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-var __values = (this && this.__values) || function(o) {
-    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
-    if (m) return m.call(o);
-    if (o && typeof o.length === "number") return {
-        next: function () {
-            if (o && i >= o.length) o = void 0;
-            return { value: o && o[i++], done: !o };
-        }
-    };
-    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BranchNode = void 0;
 var splitview_1 = require("../splitview/splitview");
@@ -62,7 +51,7 @@ var leafNode_1 = require("./leafNode");
 var lifecycle_1 = require("../lifecycle");
 var BranchNode = /** @class */ (function (_super) {
     __extends(BranchNode, _super);
-    function BranchNode(orientation, proportionalLayout, styles, size, orthogonalSize, disabled, childDescriptors) {
+    function BranchNode(orientation, proportionalLayout, styles, size, orthogonalSize, disabled, margin, childDescriptors) {
         var _this = _super.call(this) || this;
         _this.orientation = orientation;
         _this.proportionalLayout = proportionalLayout;
@@ -82,6 +71,7 @@ var BranchNode = /** @class */ (function (_super) {
                 orientation: _this.orientation,
                 proportionalLayout: proportionalLayout,
                 styles: styles,
+                margin: margin,
             });
             _this.splitview.layout(_this.size, _this.orthogonalSize);
         }
@@ -105,6 +95,7 @@ var BranchNode = /** @class */ (function (_super) {
                 descriptor: descriptor,
                 proportionalLayout: proportionalLayout,
                 styles: styles,
+                margin: margin,
             });
         }
         _this.disabled = disabled;
@@ -253,21 +244,23 @@ var BranchNode = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    BranchNode.prototype.setVisible = function (visible) {
-        var e_1, _a;
-        try {
-            for (var _b = __values(this.children), _c = _b.next(); !_c.done; _c = _b.next()) {
-                var child = _c.value;
-                child.setVisible(visible);
-            }
-        }
-        catch (e_1_1) { e_1 = { error: e_1_1 }; }
-        finally {
-            try {
-                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
-            }
-            finally { if (e_1) throw e_1.error; }
-        }
+    Object.defineProperty(BranchNode.prototype, "margin", {
+        get: function () {
+            return this.splitview.margin;
+        },
+        set: function (value) {
+            this.splitview.margin = value;
+            this.children.forEach(function (child) {
+                if (child instanceof BranchNode) {
+                    child.margin = value;
+                }
+            });
+        },
+        enumerable: false,
+        configurable: true
+    });
+    BranchNode.prototype.setVisible = function (_visible) {
+        // noop
     };
     BranchNode.prototype.isChildVisible = function (index) {
         if (index < 0 || index >= this.children.length) {
@@ -284,12 +277,13 @@ var BranchNode = /** @class */ (function (_super) {
         }
         var wereAllChildrenHidden = this.splitview.contentSize === 0;
         this.splitview.setViewVisible(index, visible);
+        // }
         var 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: visible });
         }
     };
     BranchNode.prototype.moveChild = function (from, to) {
@@ -363,7 +357,8 @@ var BranchNode = /** @class */ (function (_super) {
                 _this._onDidChange.fire({ size: e.orthogonalSize });
             })], __read(this.children.map(function (c, i) {
             if (c instanceof BranchNode) {
-                return c.onDidVisibilityChange(function (visible) {
+                return c.onDidVisibilityChange(function (_a) {
+                    var visible = _a.visible;
                     _this.setChildVisible(i, visible);
                 });
             }

package/dist/cjs/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;