readonly start?: Sash;

readonly end?: Sash;

readonly orthogonalStart?: Sash;

readonly orthogonalEnd?: Sash;

readonly top?: Sash;

readonly right?: Sash;

readonly bottom?: Sash;

readonly left?: Sash;

readonly element: HTMLElement;

readonly minimumWidth: number;

readonly maximumWidth: number;

readonly minimumHeight: number;

readonly maximumHeight: number;

readonly onDidChange: Event<IViewSize | undefined>;

readonly priority?: LayoutPriority;

readonly snap?: boolean;

layout(width: number, height: number, top: number, left: number): void;

setVisible?(visible: boolean): void;

setBoundarySashes?(sashes: IBoundarySashes): void;

type: 'leaf';

data: any;

size: number;

visible?: boolean;

type: 'branch';

data: ISerializedNode[];

size: number;

root: ISerializedNode;

orientation: Orientation;

width: number;

height: number;

readonly top: number;

readonly left: number;

readonly width: number;

readonly height: number;

readonly view: IView;

readonly box: Box;

readonly cachedVisibleSize: number | undefined;

readonly styles?: IGridViewStyles;

readonly proportionalLayout?: boolean; // default true

readonly layoutController?: ILayoutController;

readonly orthogonalSize: number;

readonly absoluteOffset: number;

readonly absoluteOrthogonalOffset: number;

readonly absoluteSize: number;

readonly absoluteOrthogonalSize: number;

if (orientation === Orientation.HORIZONTAL) {

return { left: sashes.start, right: sashes.end, top: sashes.orthogonalStart, bottom: sashes.orthogonalEnd };

} else {

return { top: sashes.start, bottom: sashes.end, left: sashes.orthogonalStart, right: sashes.orthogonalEnd };

}

if (orientation === Orientation.HORIZONTAL) {

return { start: sashes.left, end: sashes.right, orthogonalStart: sashes.top, orthogonalEnd: sashes.bottom };

} else {

return { start: sashes.top, end: sashes.bottom, orthogonalStart: sashes.left, orthogonalEnd: sashes.right };

}

readonly element: HTMLElement;

readonly children: Node[] = [];

private splitview: SplitView<ILayoutContext>;

private _size: number;

get size(): number { return this._size; }

private _orthogonalSize: number;

get orthogonalSize(): number { return this._orthogonalSize; }

private absoluteOffset: number = 0;

private absoluteOrthogonalOffset: number = 0;

private _styles: IGridViewStyles;

get styles(): IGridViewStyles { return this._styles; }

get width(): number {

return this.orientation === Orientation.HORIZONTAL ? this.size : this.orthogonalSize;

}

get height(): number {

return this.orientation === Orientation.HORIZONTAL ? this.orthogonalSize : this.size;

}

get top(): number {

return this.orientation === Orientation.HORIZONTAL ? this.absoluteOffset : this.absoluteOrthogonalOffset;

}

get left(): number {

return this.orientation === Orientation.HORIZONTAL ? this.absoluteOrthogonalOffset : this.absoluteOffset;

}

get minimumSize(): number {

return this.children.length === 0 ? 0 : Math.max(...this.children.map(c => c.minimumOrthogonalSize));

}

get maximumSize(): number {

return Math.min(...this.children.map(c => c.maximumOrthogonalSize));

}

get priority(): LayoutPriority {

if (this.children.length === 0) {

return LayoutPriority.Normal;

}

const priorities = this.children.map(c => typeof c.priority === 'undefined' ? LayoutPriority.Normal : c.priority);

if (priorities.some(p => p === LayoutPriority.High)) {

return LayoutPriority.High;

} else if (priorities.some(p => p === LayoutPriority.Low)) {

return LayoutPriority.Low;

}

return LayoutPriority.Normal;

}

get minimumOrthogonalSize(): number {

return this.splitview.minimumSize;

}

get maximumOrthogonalSize(): number {

return this.splitview.maximumSize;

}

get minimumWidth(): number {

return this.orientation === Orientation.HORIZONTAL ? this.minimumOrthogonalSize : this.minimumSize;

}

get minimumHeight(): number {

return this.orientation === Orientation.HORIZONTAL ? this.minimumSize : this.minimumOrthogonalSize;

}

get maximumWidth(): number {

return this.orientation === Orientation.HORIZONTAL ? this.maximumOrthogonalSize : this.maximumSize;

}

get maximumHeight(): number {

return this.orientation === Orientation.HORIZONTAL ? this.maximumSize : this.maximumOrthogonalSize;

}

private readonly _onDidChange = new Emitter<number | undefined>();

readonly onDidChange: Event<number | undefined> = this._onDidChange.event;

private childrenChangeDisposable: IDisposable = Disposable.None;

private readonly _onDidSashReset = new Emitter<number[]>();

readonly onDidSashReset: Event<number[]> = this._onDidSashReset.event;

private splitviewSashResetDisposable: IDisposable = Disposable.None;

private childrenSashResetDisposable: IDisposable = Disposable.None;

private _boundarySashes: IRelativeBoundarySashes = {};

get boundarySashes(): IRelativeBoundarySashes { return this._boundarySashes; }

set boundarySashes(boundarySashes: IRelativeBoundarySashes) {

this._boundarySashes = boundarySashes;

this.splitview.orthogonalStartSash = boundarySashes.orthogonalStart;

this.splitview.orthogonalEndSash = boundarySashes.orthogonalEnd;

for (let index = 0; index < this.children.length; index++) {

const child = this.children[index];

const first = index === 0;

const last = index === this.children.length - 1;

child.boundarySashes = {

start: boundarySashes.orthogonalStart,

end: boundarySashes.orthogonalEnd,

orthogonalStart: first ? boundarySashes.start : child.boundarySashes.orthogonalStart,

orthogonalEnd: last ? boundarySashes.end : child.boundarySashes.orthogonalEnd,

};

}

}

constructor(

readonly orientation: Orientation,

readonly layoutController: ILayoutController,

styles: IGridViewStyles,

readonly proportionalLayout: boolean,

size: number = 0,

orthogonalSize: number = 0,

childDescriptors?: INodeDescriptor[]

) {

this._styles = styles;

this._size = size;

this._orthogonalSize = orthogonalSize;

this.element = $('.monaco-grid-branch-node');

if (!childDescriptors) {

// Normal behavior, we have no children yet, just set up the splitview

this.splitview = new SplitView(this.element, { orientation, styles, proportionalLayout });

this.splitview.layout(size, { orthogonalSize, absoluteOffset: 0, absoluteOrthogonalOffset: 0, absoluteSize: size, absoluteOrthogonalSize: orthogonalSize });

} else {

// Reconstruction behavior, we want to reconstruct a splitview

const descriptor = {

views: childDescriptors.map(childDescriptor => {

return {

view: childDescriptor.node,

size: childDescriptor.node.size,

visible: childDescriptor.node instanceof LeafNode && childDescriptor.visible !== undefined ? childDescriptor.visible : true

};

}),

size: this.orthogonalSize

};

const options = { proportionalLayout, orientation, styles };

this.children = childDescriptors.map(c => c.node);

this.splitview = new SplitView(this.element, { ...options, descriptor });

this.children.forEach((node, index) => {

const first = index === 0;

const last = index === this.children.length;

node.boundarySashes = {

start: this.boundarySashes.orthogonalStart,

end: this.boundarySashes.orthogonalEnd,

orthogonalStart: first ? this.boundarySashes.start : this.splitview.sashes[index - 1],

orthogonalEnd: last ? this.boundarySashes.end : this.splitview.sashes[index],

};

});

}

const onDidSashReset = Event.map(this.splitview.onDidSashReset, i => [i]);

this.splitviewSashResetDisposable = onDidSashReset(this._onDidSashReset.fire, this._onDidSashReset);

const onDidChildrenChange = Event.map(Event.any(...this.children.map(c => c.onDidChange)), () => undefined);

this.childrenChangeDisposable = onDidChildrenChange(this._onDidChange.fire, this._onDidChange);

const onDidChildrenSashReset = Event.any(...this.children.map((c, i) => Event.map(c.onDidSashReset, location => [i, ...location])));

this.childrenSashResetDisposable = onDidChildrenSashReset(this._onDidSashReset.fire, this._onDidSashReset);

}

style(styles: IGridViewStyles): void {

this._styles = styles;

this.splitview.style(styles);

for (const child of this.children) {

if (child instanceof BranchNode) {

child.style(styles);

}

}

}

layout(size: number, offset: number, ctx: ILayoutContext | undefined): void {

if (!this.layoutController.isLayoutEnabled) {

return;

}

if (typeof ctx === 'undefined') {

throw new Error('Invalid state');

}

// branch nodes should flip the normal/orthogonal directions

this._size = ctx.orthogonalSize;

this._orthogonalSize = size;

this.absoluteOffset = ctx.absoluteOffset + offset;

this.absoluteOrthogonalOffset = ctx.absoluteOrthogonalOffset;

this.splitview.layout(ctx.orthogonalSize, {

orthogonalSize: size,

absoluteOffset: this.absoluteOrthogonalOffset,

absoluteOrthogonalOffset: this.absoluteOffset,

absoluteSize: ctx.absoluteOrthogonalSize,

absoluteOrthogonalSize: ctx.absoluteSize

});

// Disable snapping on views which sit on the edges of the grid

this.splitview.startSnappingEnabled = this.absoluteOrthogonalOffset > 0;

this.splitview.endSnappingEnabled = this.absoluteOrthogonalOffset + ctx.orthogonalSize < ctx.absoluteOrthogonalSize;

}

setVisible(visible: boolean): void {

for (const child of this.children) {

child.setVisible(visible);

}

}

addChild(node: Node, size: number | Sizing, index: number, skipLayout?: boolean): void {

if (index < 0 || index > this.children.length) {

throw new Error('Invalid index');

}

this.splitview.addView(node, size, index, skipLayout);

this._addChild(node, index);

this.onDidChildrenChange();

}

private _addChild(node: Node, index: number): void {

const first = index === 0;

const last = index === this.children.length;

this.children.splice(index, 0, node);

node.boundarySashes = {

start: this.boundarySashes.orthogonalStart,

end: this.boundarySashes.orthogonalEnd,

orthogonalStart: first ? this.boundarySashes.start : this.splitview.sashes[index - 1],

orthogonalEnd: last ? this.boundarySashes.end : this.splitview.sashes[index],

};

if (!first) {

this.children[index - 1].boundarySashes = {

...this.children[index - 1].boundarySashes,

orthogonalEnd: this.splitview.sashes[index - 1]

};

}

if (!last) {

this.children[index + 1].boundarySashes = {

...this.children[index + 1].boundarySashes,

orthogonalStart: this.splitview.sashes[index]

};

}

}

removeChild(index: number, sizing?: Sizing): void {

if (index < 0 || index >= this.children.length) {

throw new Error('Invalid index');

}

this.splitview.removeView(index, sizing);

this._removeChild(index);

this.onDidChildrenChange();

}

private _removeChild(index: number): Node {

const first = index === 0;

const last = index === this.children.length - 1;

const [child] = this.children.splice(index, 1);

if (!first) {

this.children[index - 1].boundarySashes = {

...this.children[index - 1].boundarySashes,

orthogonalEnd: this.splitview.sashes[index - 1]

};

}

if (!last) { // [0,1,2,3] (2) => [0,1,3]

this.children[index].boundarySashes = {

...this.children[index].boundarySashes,

orthogonalStart: this.splitview.sashes[Math.max(index - 1, 0)]

};

}

return child;

}

moveChild(from: number, to: number): void {

if (from === to) {

return;

}

if (from < 0 || from >= this.children.length) {

throw new Error('Invalid from index');

}

to = clamp(to, 0, this.children.length);

if (from < to) {

to--;

}

this.splitview.moveView(from, to);

const child = this._removeChild(from);

this._addChild(child, to);

this.onDidChildrenChange();

}

swapChildren(from: number, to: number): void {

if (from === to) {

return;

}

if (from < 0 || from >= this.children.length) {

throw new Error('Invalid from index');

}

to = clamp(to, 0, this.children.length);

this.splitview.swapViews(from, to);

// swap boundary sashes

[this.children[from].boundarySashes, this.children[to].boundarySashes]

= [this.children[from].boundarySashes, this.children[to].boundarySashes];

// swap children

[this.children[from], this.children[to]] = [this.children[to], this.children[from]];

this.onDidChildrenChange();

}

resizeChild(index: number, size: number): void {

if (index < 0 || index >= this.children.length) {

throw new Error('Invalid index');

}

this.splitview.resizeView(index, size);

}

distributeViewSizes(recursive = false): void {

this.splitview.distributeViewSizes();

if (recursive) {

for (const child of this.children) {

if (child instanceof BranchNode) {

child.distributeViewSizes(true);

}

}

}

}

getChildSize(index: number): number {

if (index < 0 || index >= this.children.length) {

throw new Error('Invalid index');

}

return this.splitview.getViewSize(index);

}

isChildVisible(index: number): boolean {

if (index < 0 || index >= this.children.length) {

throw new Error('Invalid index');

}

return this.splitview.isViewVisible(index);

}

setChildVisible(index: number, visible: boolean): void {

if (index < 0 || index >= this.children.length) {

throw new Error('Invalid index');

}

if (this.splitview.isViewVisible(index) === visible) {

return;

}

this.splitview.setViewVisible(index, visible);

}

getChildCachedVisibleSize(index: number): number | undefined {

if (index < 0 || index >= this.children.length) {

throw new Error('Invalid index');

}

return this.splitview.getViewCachedVisibleSize(index);

}

private onDidChildrenChange(): void {

const onDidChildrenChange = Event.map(Event.any(...this.children.map(c => c.onDidChange)), () => undefined);

this.childrenChangeDisposable.dispose();

this.childrenChangeDisposable = onDidChildrenChange(this._onDidChange.fire, this._onDidChange);

const onDidChildrenSashReset = Event.any(...this.children.map((c, i) => Event.map(c.onDidSashReset, location => [i, ...location])));

this.childrenSashResetDisposable.dispose();

this.childrenSashResetDisposable = onDidChildrenSashReset(this._onDidSashReset.fire, this._onDidSashReset);

this._onDidChange.fire(undefined);

}

trySet2x2(other: BranchNode): IDisposable {

if (this.children.length !== 2 || other.children.length !== 2) {

return Disposable.None;

}

if (this.getChildSize(0) !== other.getChildSize(0)) {

return Disposable.None;

}

const [firstChild, secondChild] = this.children;

const [otherFirstChild, otherSecondChild] = other.children;

if (!(firstChild instanceof LeafNode) || !(secondChild instanceof LeafNode)) {

return Disposable.None;

}

if (!(otherFirstChild instanceof LeafNode) || !(otherSecondChild instanceof LeafNode)) {

return Disposable.None;

}

if (this.orientation === Orientation.VERTICAL) {

secondChild.linkedWidthNode = otherFirstChild.linkedHeightNode = firstChild;

firstChild.linkedWidthNode = otherSecondChild.linkedHeightNode = secondChild;

otherSecondChild.linkedWidthNode = firstChild.linkedHeightNode = otherFirstChild;

otherFirstChild.linkedWidthNode = secondChild.linkedHeightNode = otherSecondChild;

} else {

otherFirstChild.linkedWidthNode = secondChild.linkedHeightNode = firstChild;

otherSecondChild.linkedWidthNode = firstChild.linkedHeightNode = secondChild;

firstChild.linkedWidthNode = otherSecondChild.linkedHeightNode = otherFirstChild;

secondChild.linkedWidthNode = otherFirstChild.linkedHeightNode = otherSecondChild;

}

const mySash = this.splitview.sashes[0];

const otherSash = other.splitview.sashes[0];

mySash.linkedSash = otherSash;

otherSash.linkedSash = mySash;

this._onDidChange.fire(undefined);

other._onDidChange.fire(undefined);

return toDisposable(() => {

mySash.linkedSash = otherSash.linkedSash = undefined;

firstChild.linkedHeightNode = firstChild.linkedWidthNode = undefined;

secondChild.linkedHeightNode = secondChild.linkedWidthNode = undefined;

otherFirstChild.linkedHeightNode = otherFirstChild.linkedWidthNode = undefined;

otherSecondChild.linkedHeightNode = otherSecondChild.linkedWidthNode = undefined;

});

}

dispose(): void {

for (const child of this.children) {

child.dispose();

}

this._onDidChange.dispose();

this._onDidSashReset.dispose();

this.splitviewSashResetDisposable.dispose();

this.childrenSashResetDisposable.dispose();

this.childrenChangeDisposable.dispose();

this.splitview.dispose();

}

private _size: number = 0;

get size(): number { return this._size; }

private _orthogonalSize: number;

get orthogonalSize(): number { return this._orthogonalSize; }

private absoluteOffset: number = 0;

private absoluteOrthogonalOffset: number = 0;

readonly onDidSashReset: Event<number[]> = Event.None;

private _onDidLinkedWidthNodeChange = new Relay<number | undefined>();

private _linkedWidthNode: LeafNode | undefined = undefined;

get linkedWidthNode(): LeafNode | undefined { return this._linkedWidthNode; }

set linkedWidthNode(node: LeafNode | undefined) {

this._onDidLinkedWidthNodeChange.input = node ? node._onDidViewChange : Event.None;

this._linkedWidthNode = node;

this._onDidSetLinkedNode.fire(undefined);

}

private _onDidLinkedHeightNodeChange = new Relay<number | undefined>();

private _linkedHeightNode: LeafNode | undefined = undefined;

get linkedHeightNode(): LeafNode | undefined { return this._linkedHeightNode; }

set linkedHeightNode(node: LeafNode | undefined) {

this._onDidLinkedHeightNodeChange.input = node ? node._onDidViewChange : Event.None;

this._linkedHeightNode = node;

this._onDidSetLinkedNode.fire(undefined);

}

private readonly _onDidSetLinkedNode = new Emitter<number | undefined>();

private _onDidViewChange: Event<number | undefined>;

readonly onDidChange: Event<number | undefined>;

constructor(

readonly view: IView,

readonly orientation: Orientation,

readonly layoutController: ILayoutController,

orthogonalSize: number,

size: number = 0

) {

this._orthogonalSize = orthogonalSize;

this._size = size;

this._onDidViewChange = Event.map(this.view.onDidChange, e => e && (this.orientation === Orientation.VERTICAL ? e.width : e.height));

this.onDidChange = Event.any(this._onDidViewChange, this._onDidSetLinkedNode.event, this._onDidLinkedWidthNodeChange.event, this._onDidLinkedHeightNodeChange.event);

}

get width(): number {

return this.orientation === Orientation.HORIZONTAL ? this.orthogonalSize : this.size;

}

get height(): number {

return this.orientation === Orientation.HORIZONTAL ? this.size : this.orthogonalSize;

}

get top(): number {

return this.orientation === Orientation.HORIZONTAL ? this.absoluteOffset : this.absoluteOrthogonalOffset;

}

get left(): number {

return this.orientation === Orientation.HORIZONTAL ? this.absoluteOrthogonalOffset : this.absoluteOffset;

}

get element(): HTMLElement {

return this.view.element;

}

private get minimumWidth(): number {

return this.linkedWidthNode ? Math.max(this.linkedWidthNode.view.minimumWidth, this.view.minimumWidth) : this.view.minimumWidth;

}

private get maximumWidth(): number {

return this.linkedWidthNode ? Math.min(this.linkedWidthNode.view.maximumWidth, this.view.maximumWidth) : this.view.maximumWidth;

}

private get minimumHeight(): number {

return this.linkedHeightNode ? Math.max(this.linkedHeightNode.view.minimumHeight, this.view.minimumHeight) : this.view.minimumHeight;

}

private get maximumHeight(): number {

return this.linkedHeightNode ? Math.min(this.linkedHeightNode.view.maximumHeight, this.view.maximumHeight) : this.view.maximumHeight;

}

get minimumSize(): number {

return this.orientation === Orientation.HORIZONTAL ? this.minimumHeight : this.minimumWidth;

}

get maximumSize(): number {

return this.orientation === Orientation.HORIZONTAL ? this.maximumHeight : this.maximumWidth;

}

get priority(): LayoutPriority | undefined {

return this.view.priority;

}

get snap(): boolean | undefined {

return this.view.snap;

}

get minimumOrthogonalSize(): number {

return this.orientation === Orientation.HORIZONTAL ? this.minimumWidth : this.minimumHeight;

}

get maximumOrthogonalSize(): number {

return this.orientation === Orientation.HORIZONTAL ? this.maximumWidth : this.maximumHeight;

}

private _boundarySashes: IRelativeBoundarySashes = {};

get boundarySashes(): IRelativeBoundarySashes { return this._boundarySashes; }

set boundarySashes(boundarySashes: IRelativeBoundarySashes) {

this._boundarySashes = boundarySashes;

if (this.view.setBoundarySashes) {

this.view.setBoundarySashes(toAbsoluteBoundarySashes(boundarySashes, this.orientation));