dockview-core 1.14.2 → 1.15.0

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';
@@ -96,6 +96,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 +122,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 +138,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 +154,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
@@ -402,8 +405,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 +451,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 ('width' in options.position) {
+                    result.width = Math.max(options.position.width, 0);
+                }
+                else {
+                    result.width = DEFAULT_FLOATING_GROUP_POSITION.width;
+                }
+                if ('height' in options.position) {
+                    result.height = Math.max(options.position.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 +606,18 @@ 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 (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);
     }
     layout(width, height, forceResize) {
@@ -734,11 +779,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) {
@@ -873,11 +917,7 @@ export class DockviewComponent extends BaseGrid {
                     options.floating !== null
                     ? options.floating
                     : {};
-                this.addFloatingGroup(group, o, {
-                    inDragMode: false,
-                    skipRemoveGroup: true,
-                    skipActiveGroup: true,
-                });
+                this.addFloatingGroup(group, Object.assign(Object.assign({}, o), { inDragMode: false, skipRemoveGroup: true, skipActiveGroup: true }));
                 panel = this.createPanel(options, group);
                 group.model.openPanel(panel, {
                     skipSetActive: options.inactive,
@@ -916,11 +956,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 +1011,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 +1200,7 @@ export class DockviewComponent extends BaseGrid {
             this.doSetGroupAndPanelActive(destinationGroup);
             this._onDidMovePanel.fire({
                 panel: removedPanel,
+                from: sourceGroup,
             });
         }
         else {
@@ -1186,6 +1224,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 +1241,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 +1264,10 @@ export class DockviewComponent extends BaseGrid {
                     skipSetGroupActive: true,
                 }));
                 this.doSetGroupAndPanelActive(group);
+                this._onDidMovePanel.fire({
+                    panel: removedPanel,
+                    from: sourceGroup,
+                });
             }
         }
     }
@@ -1242,9 +1292,6 @@ export class DockviewComponent extends BaseGrid {
                 }
             });
             this.doSetGroupAndPanelActive(to);
-            panels.forEach((panel) => {
-                this._onDidMovePanel.fire({ panel });
-            });
         }
         else {
             switch (from.api.location.type) {
@@ -1270,10 +1317,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 { 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/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;

package/dist/esm/gridview/gridview.js

@@ -19,7 +19,7 @@ function findLeaf(candiateNode, last) {
 }
 function flipNode(node, size, orthogonalSize) {
     if (node instanceof BranchNode) {
-        const result = new BranchNode(orthogonal(node.orientation), node.proportionalLayout, node.styles, size, orthogonalSize, node.disabled);
+        const result = new BranchNode(orthogonal(node.orientation), node.proportionalLayout, node.styles, size, orthogonalSize, node.disabled, node.margin);
         let totalSize = 0;
         for (let i = node.children.length - 1; i >= 0; i--) {
             const child = node.children[i];
@@ -174,6 +174,13 @@ export class Gridview {
             }
         }
     }
+    get margin() {
+        return this._margin;
+    }
+    set margin(value) {
+        this._margin = value;
+        this.root.margin = value;
+    }
     maximizedView() {
         var _a;
         return (_a = this._maximizedNode) === null || _a === void 0 ? void 0 : _a.leaf.view;
@@ -259,13 +266,14 @@ export class Gridview {
         this.disposable.dispose();
         this._onDidChange.dispose();
         this._onDidMaximizedNodeChange.dispose();
+        this._onDidViewVisibilityChange.dispose();
         this.root.dispose();
         this._maximizedNode = undefined;
         this.element.remove();
     }
     clear() {
         const orientation = this.root.orientation;
-        this.root = new BranchNode(orientation, this.proportionalLayout, this.styles, this.root.size, this.root.orthogonalSize, this._locked);
+        this.root = new BranchNode(orientation, this.proportionalLayout, this.styles, this.root.size, this.root.orthogonalSize, this.locked, this.margin);
     }
     deserialize(json, deserializer) {
         const orientation = json.orientation;
@@ -276,6 +284,7 @@ export class Gridview {
         this.root = this._deserializeNode(root, orientation, deserializer, orthogonalSize);
     }
     _deserializeNode(node, orientation, deserializer, orthogonalSize) {
+        var _a;
         let result;
         if (node.type === 'branch') {
             const serializedChildren = node.data;
@@ -287,10 +296,14 @@ export class Gridview {
             });
             result = new BranchNode(orientation, this.proportionalLayout, this.styles, node.size, // <- orthogonal size - flips at each depth
             orthogonalSize, // <- size - flips at each depth,
-            this._locked, children);
+            this.locked, this.margin, children);
         }
         else {
-            result = new LeafNode(deserializer.fromJSON(node), orientation, orthogonalSize, node.size);
+            const view = deserializer.fromJSON(node);
+            if (typeof node.visible === 'boolean') {
+                (_a = view.setVisible) === null || _a === void 0 ? void 0 : _a.call(view, node.visible);
+            }
+            result = new LeafNode(view, orientation, orthogonalSize, node.size);
         }
         return result;
     }
@@ -320,7 +333,7 @@ export class Gridview {
         }
         const oldRoot = this.root;
         oldRoot.element.remove();
-        this._root = new BranchNode(orthogonal(oldRoot.orientation), this.proportionalLayout, this.styles, this.root.orthogonalSize, this.root.size, this._locked);
+        this._root = new BranchNode(orthogonal(oldRoot.orientation), this.proportionalLayout, this.styles, this.root.orthogonalSize, this.root.size, this.locked, this.margin);
         if (oldRoot.children.length === 0) {
             // no data so no need to add anything back in
         }
@@ -387,19 +400,24 @@ export class Gridview {
         }
         return findLeaf(this.root, reverse);
     }
-    constructor(proportionalLayout, styles, orientation) {
+    constructor(proportionalLayout, styles, orientation, locked, margin) {
         this.proportionalLayout = proportionalLayout;
         this.styles = styles;
         this._locked = false;
+        this._margin = 0;
         this._maximizedNode = undefined;
         this.disposable = new MutableDisposable();
         this._onDidChange = new Emitter();
         this.onDidChange = this._onDidChange.event;
+        this._onDidViewVisibilityChange = new Emitter();
+        this.onDidViewVisibilityChange = this._onDidViewVisibilityChange.event;
         this._onDidMaximizedNodeChange = new Emitter();
         this.onDidMaximizedNodeChange = this._onDidMaximizedNodeChange.event;
         this.element = document.createElement('div');
         this.element.className = 'grid-view';
-        this.root = new BranchNode(orientation, proportionalLayout, styles, 0, 0, this._locked);
+        this._locked = locked !== null && locked !== void 0 ? locked : false;
+        this._margin = margin !== null && margin !== void 0 ? margin : 0;
+        this.root = new BranchNode(orientation, proportionalLayout, styles, 0, 0, this.locked, this.margin);
     }
     isViewVisible(location) {
         const [rest, index] = tail(location);
@@ -418,6 +436,7 @@ export class Gridview {
         if (!(parent instanceof BranchNode)) {
             throw new Error('Invalid from location');
         }
+        this._onDidViewVisibilityChange.fire();
         parent.setChildVisible(index, visible);
     }
     moveView(parentLocation, from, to) {
@@ -450,7 +469,7 @@ export class Gridview {
             }
             const child = grandParent.removeChild(parentIndex);
             child.dispose();
-            const newParent = new BranchNode(parent.orientation, this.proportionalLayout, this.styles, parent.size, parent.orthogonalSize, this._locked);
+            const newParent = new BranchNode(parent.orientation, this.proportionalLayout, this.styles, parent.size, parent.orthogonalSize, this.locked, this.margin);
             grandParent.addChild(newParent, parent.size, parentIndex);
             const newSibling = new LeafNode(parent.view, grandParent.orientation, parent.size);
             newParent.addChild(newSibling, newSiblingSize, 0);