Support grid descriptors

src/vs/base/browser/ui/grid/grid.ts

@@ -362,12 +362,20 @@ interface InitialLayoutContext<T extends ISerializableView> {
 	root: GridBranchNode<T>;
 }
 
-export interface ISerializedNode {
-	type: 'branch' | 'leaf';
-	data: ISerializedNode[] | object;
+export interface ISerializedLeafNode {
+	type: 'leaf';
+	data: object;
 	size: number;
 }
 
+export interface ISerializedBranchNode {
+	type: 'branch';
+	data: ISerializedNode[];
+	size: number;
+}
+
+export type ISerializedNode = ISerializedLeafNode | ISerializedBranchNode;
+
 export interface ISerializedGrid {
 	root: ISerializedNode;
 	orientation: Orientation;
@@ -535,4 +543,81 @@ export class SerializableGrid<T extends ISerializableView> extends Grid<T> {
 			this.restoreViewsSize(childLocation, child, orthogonal(orientation), widthScale, heightScale);
 		}
 	}
+}
+
+export type GridNodeDescriptor = { size?: number, groups?: GridNodeDescriptor[] };
+export type GridDescriptor = { orientation: Orientation, groups?: GridNodeDescriptor[] };
+
+export function sanitizeGridNodeDescriptor(nodeDescriptor: GridNodeDescriptor): void {
+	if (nodeDescriptor.groups && nodeDescriptor.groups.length === 0) {
+		nodeDescriptor.groups = undefined;
+	}
+
+	if (!nodeDescriptor.groups) {
+		return;
+	}
+
+	let totalDefinedSize = 0;
+	let totalDefinedSizeCount = 0;
+
+	for (const child of nodeDescriptor.groups) {
+		sanitizeGridNodeDescriptor(child);
+
+		if (child.size) {
+			totalDefinedSize += child.size;
+			totalDefinedSizeCount++;
+		}
+	}
+
+	const totalUndefinedSize = totalDefinedSizeCount > 0 ? totalDefinedSize : 1;
+	const totalUndefinedSizeCount = nodeDescriptor.groups.length - totalDefinedSizeCount;
+	const eachUndefinedSize = totalUndefinedSize / totalUndefinedSizeCount;
+
+	for (const child of nodeDescriptor.groups) {
+		if (!child.size) {
+			child.size = eachUndefinedSize;
+		}
+	}
+}
+
+function createSerializedNode(nodeDescriptor: GridNodeDescriptor): ISerializedNode {
+	if (nodeDescriptor.groups) {
+		return { type: 'branch', data: nodeDescriptor.groups.map(c => createSerializedNode(c)), size: nodeDescriptor.size! };
+	} else {
+		return { type: 'leaf', data: null, size: nodeDescriptor.size! };
+	}
+}
+
+function getDimensions(node: ISerializedNode, orientation: Orientation): { width?: number, height?: number } {
+	if (node.type === 'branch') {
+		const childrenDimensions = node.data.map(c => getDimensions(c, orthogonal(orientation)));
+
+		if (orientation === Orientation.VERTICAL) {
+			const width = node.size || (childrenDimensions.length === 0 ? undefined : Math.max(...childrenDimensions.map(d => d.width || 0)));
+			const height = childrenDimensions.length === 0 ? undefined : childrenDimensions.reduce((r, d) => r + d.height, 0);
+			return { width, height };
+		} else {
+			const width = childrenDimensions.length === 0 ? undefined : childrenDimensions.reduce((r, d) => r + d.width, 0);
+			const height = node.size || (childrenDimensions.length === 0 ? undefined : Math.max(...childrenDimensions.map(d => d.height || 0)));
+			return { width, height };
+		}
+	} else {
+		const width = orientation === Orientation.VERTICAL ? node.size : undefined;
+		const height = orientation === Orientation.VERTICAL ? undefined : node.size;
+		return { width, height };
+	}
+}
+
+export function createSerializedGrid(gridDescriptor: GridDescriptor): ISerializedGrid {
+	sanitizeGridNodeDescriptor(gridDescriptor);
+
+	const root = createSerializedNode(gridDescriptor);
+	const { width, height } = getDimensions(root, gridDescriptor.orientation);
+
+	return {
+		root,
+		orientation: gridDescriptor.orientation,
+		width: width || 1,
+		height: height || 1
+	};
 }

src/vs/base/browser/ui/grid/gridview.ts

@@ -459,8 +459,8 @@ export class GridView implements IDisposable {
 
 	constructor(container: HTMLElement, options: IGridViewOptions = {}) {
 		this.element = append(container, $('.monaco-grid-view'));
-		this.root = new BranchNode(Orientation.VERTICAL, this.styles);
 		this.styles = options.styles || defaultStyles;
+		this.root = new BranchNode(Orientation.VERTICAL, this.styles);
 	}
 
 	style(styles: IGridViewStyles): void {
@@ -687,5 +687,11 @@ export class GridView implements IDisposable {
 	dispose(): void {
 		this.onDidSashResetRelay.dispose();
 		this.root.dispose();
+
+		if (this.element && this.element.parentElement) {
+			this.element.parentElement.removeChild(this.element);
+		}
+
+		this.element = null;
 	}
 }

src/vs/base/test/browser/ui/grid/grid.test.ts

@@ -4,8 +4,9 @@
  *--------------------------------------------------------------------------------------------*/
 
 import * as assert from 'assert';
-import { Direction, Grid, getRelativeLocation, Orientation, SerializableGrid, ISerializableView, IViewDeserializer, GridNode, Sizing, isGridBranchNode } from 'vs/base/browser/ui/grid/grid';
+import { Direction, Grid, getRelativeLocation, Orientation, SerializableGrid, ISerializableView, IViewDeserializer, GridNode, Sizing, isGridBranchNode, sanitizeGridNodeDescriptor, GridNodeDescriptor, createSerializedGrid } from 'vs/base/browser/ui/grid/grid';
 import { TestView, nodesToArrays } from './util';
+import { deepClone } from 'vs/base/common/objects';
 
 suite('Grid', function () {
 	let container: HTMLElement;
@@ -737,4 +738,35 @@ suite('SerializableGrid', function () {
 		assert.deepEqual(view2Copy.size, [800, 300]);
 		assert.deepEqual(view3Copy.size, [800, 300]);
 	});
+
+	test('sanitizeGridNodeDescriptor', function () {
+		const nodeDescriptor = { groups: [{ size: 0.2 }, { size: 0.2 }, { size: 0.6, groups: [{}, {}] }] };
+		const nodeDescriptorCopy = deepClone<GridNodeDescriptor>(nodeDescriptor);
+		sanitizeGridNodeDescriptor(nodeDescriptorCopy);
+		assert.deepEqual(nodeDescriptorCopy, { groups: [{ size: 0.2 }, { size: 0.2 }, { size: 0.6, groups: [{ size: 0.5 }, { size: 0.5 }] }] });
+	});
+
+	test('createSerializedGrid', function () {
+		const gridDescriptor = { orientation: Orientation.VERTICAL, groups: [{ size: 0.2 }, { size: 0.2 }, { size: 0.6, groups: [{}, {}] }] };
+		const serializedGrid = createSerializedGrid(gridDescriptor);
+		assert.deepEqual(serializedGrid, {
+			root: {
+				type: 'branch',
+				size: undefined,
+				data: [
+					{ type: 'leaf', size: 0.2, data: null },
+					{ type: 'leaf', size: 0.2, data: null },
+					{
+						type: 'branch', size: 0.6, data: [
+							{ type: 'leaf', size: 0.5, data: null },
+							{ type: 'leaf', size: 0.5, data: null }
+						]
+					}
+				]
+			},
+			orientation: Orientation.VERTICAL,
+			width: 1,
+			height: 1
+		});
+	});
 });