Centered editor layout

src/vs/base/browser/ui/centered/centeredViewLayout.ts

@@ -3,60 +3,93 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-import { SplitView, Sizing, IView, Orientation, ISplitViewStyles } from 'vs/base/browser/ui/splitview/splitview';
+import { SplitView, Sizing, Orientation, ISplitViewStyles, IView as ISplitViewView } from 'vs/base/browser/ui/splitview/splitview';
 import { $ } from 'vs/base/browser/dom';
 import { Event } from 'vs/base/common/event';
+import { IView } from 'vs/base/browser/ui/grid/gridview';
 
 export class CenteredViewLayout {
 
 	private splitView: SplitView;
-	readonly element: HTMLElement;
-	private active: boolean;
+	private element: HTMLElement;
+	private height: number;
+	private style: ISplitViewStyles;
 
-	constructor(container: HTMLElement, view: IView) {
-		this.element = $('.centered-view-layout');
-		container.appendChild(this.element);
-
-		this.splitView = new SplitView(this.element, {
-			inverseAltBehavior: true,
-			orientation: Orientation.HORIZONTAL
-		});
-
-		this.splitView.addView(view, Sizing.Distribute);
+	constructor(private container: HTMLElement, private view: IView) {
+		this.container.appendChild(this.view.element);
 	}
 
-	layout(size: number): void {
-		this.splitView.layout(size);
+	layout(width: number, height: number): void {
+		this.height = height;
+		if (this.splitView) {
+			this.splitView.layout(width);
+		} else {
+			this.view.layout(width, height);
+		}
 	}
 
 	isActive(): boolean {
-		return this.active;
+		return !!this.splitView;
 	}
 
 	styles(style: ISplitViewStyles): void {
-		this.splitView.style(style);
+		this.style = style;
+		if (this.splitView) {
+			this.splitView.style(this.style);
+		}
+	}
+
+	resetView(view: IView): void {
+		this.view = view;
+		if (this.splitView) {
+			this.splitView.removeView(1);
+			this.splitView.addView(this.getView(), Sizing.Distribute, 1);
+		}
+	}
+
+	private getView(): ISplitViewView {
+		return {
+			element: this.view.element,
+			maximumSize: this.view.maximumWidth,
+			minimumSize: this.view.minimumWidth,
+			onDidChange: Event.None,
+			layout: size => this.view.layout(size, this.height)
+		};
 	}
 
 	activate(active: boolean): void {
-		this.active = active;
-		if (this.active) {
-			const emptyView = {
-				element: $('.'),
+		if (active) {
+			this.element = $('.centered-view-layout');
+			this.container.removeChild(this.view.element);
+			this.container.appendChild(this.element);
+			this.splitView = new SplitView(this.element, {
+				inverseAltBehavior: true,
+				orientation: Orientation.HORIZONTAL,
+				styles: this.style
+			});
+
+			const getEmptyView = () => ({
+				element: $('.centered-layout-margin'),
 				layout: () => undefined,
 				minimumSize: 20,
 				maximumSize: Number.POSITIVE_INFINITY,
 				onDidChange: Event.None
-			};
+			});
 
-			this.splitView.addView(emptyView, Sizing.Distribute, 0);
-			this.splitView.addView(emptyView, Sizing.Distribute);
+			this.splitView.addView(getEmptyView(), Sizing.Distribute);
+			this.splitView.addView(this.getView(), Sizing.Distribute);
+			this.splitView.addView(getEmptyView(), Sizing.Distribute);
 		} else {
-			this.splitView.removeView(0);
-			this.splitView.removeView(1);
+			this.splitView.dispose();
+			this.splitView = undefined;
+			this.container.removeChild(this.element);
+			this.container.appendChild(this.view.element);
 		}
 	}
 
 	dispose(): void {
-		this.splitView.dispose();
+		if (this.splitView) {
+			this.splitView.dispose();
+		}
 	}
 }

src/vs/workbench/browser/parts/editor/editorPart.ts

@@ -35,6 +35,7 @@ import { EditorDropTarget } from 'vs/workbench/browser/parts/editor/editorDropTa
 import { localize } from 'vs/nls';
 import { Color } from 'vs/base/common/color';
 import { CenteredViewLayout } from 'vs/base/browser/ui/centered/centeredViewLayout';
+import { IView } from 'vs/base/browser/ui/grid/gridview';
 
 interface IEditorPartUIState {
 	serializedGrid: ISerializedGrid;
@@ -715,21 +716,26 @@ export class EditorPart extends Part implements EditorGroupsServiceImpl, IEditor
 
 		// Grid control with center layout
 		this.doCreateGridControl();
-		this.centeredViewLayout = new CenteredViewLayout(this.container, {
-			element: this.gridWidget.element,
-			layout: size => this.gridWidget.layout(size, this.dimension ? this.dimension.height : this.gridWidget.maximumHeight),
-			minimumSize: this.gridWidget.minimumWidth,
-			maximumSize: this.gridWidget.maximumWidth,
-			onDidChange: Event.None
-		});
-		addClass(this.centeredViewLayout.element, 'content');
+		this.centeredViewLayout = new CenteredViewLayout(this.container, this.getGridAsView());
 
 		// Drop support
 		this._register(this.instantiationService.createInstance(EditorDropTarget, this, this.container));
 
 		return this.container;
 	}
 
+	private getGridAsView(): IView {
+		return {
+			element: this.gridWidget.element,
+			layout: (width, height) => this.gridWidget.layout(width, height),
+			minimumWidth: this.gridWidget.minimumWidth,
+			maximumWidth: this.gridWidget.maximumWidth,
+			minimumHeight: this.gridWidget.minimumHeight,
+			maximumHeight: this.gridWidget.minimumHeight,
+			onDidChange: Event.None
+		};
+	}
+
 	centerLayout(active: boolean): void {
 		this.centeredViewLayout.activate(active);
 	}
@@ -829,7 +835,9 @@ export class EditorPart extends Part implements EditorGroupsServiceImpl, IEditor
 		this.gridWidget = gridWidget;
 
 		if (gridWidget) {
-			this.container.appendChild(gridWidget.element);
+			if (this.centeredViewLayout) {
+				this.centeredViewLayout.resetView(this.getGridAsView());
+			}
 			this._onDidSizeConstraintsChange.input = gridWidget.onDidChange;
 		}
 
@@ -987,11 +995,7 @@ export class EditorPart extends Part implements EditorGroupsServiceImpl, IEditor
 
 		// Layout Grid
 		try {
-			if (this.centeredViewLayout) {
-				this.centeredViewLayout.layout(this.dimension.width);
-			} else {
-				this.gridWidget.layout(this.dimension.width, this.dimension.height);
-			}
+			this.centeredViewLayout.layout(this.dimension.width, this.dimension.height);
 		} catch (error) {
 			this.gridError(error);
 		}
@@ -1033,9 +1037,7 @@ export class EditorPart extends Part implements EditorGroupsServiceImpl, IEditor
 		if (this.gridWidget) {
 			this.gridWidget.dispose();
 		}
-		if (this.centeredViewLayout) {
-			this.centeredViewLayout = dispose(this.centeredViewLayout);
-		}
+		this.centeredViewLayout.dispose();
 
 		super.dispose();
 	}