editorPart: plugin centeredViewLayout

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

@@ -34,6 +34,7 @@ import { ILifecycleService, LifecyclePhase } from 'vs/platform/lifecycle/common/
 import { EditorDropTarget } from 'vs/workbench/browser/parts/editor/editorDropTarget';
 import { localize } from 'vs/nls';
 import { Color } from 'vs/base/common/color';
+import { CenteredViewLayout } from 'vs/base/browser/ui/centered/centeredViewLayout';
 
 interface IEditorPartUIState {
 	serializedGrid: ISerializedGrid;
@@ -85,6 +86,8 @@ export class EditorPart extends Part implements EditorGroupsServiceImpl, IEditor
 	private whenRestoredComplete: TValueCallback<void>;
 
 	private previousUIState: IEditorPartUIState;
+	private parentElement: HTMLElement;
+	private centeredViewLayout: CenteredViewLayout;
 
 	constructor(
 		id: string,
@@ -695,11 +698,12 @@ export class EditorPart extends Part implements EditorGroupsServiceImpl, IEditor
 	createContentArea(parent: HTMLElement): HTMLElement {
 
 		// Grid control
+		this.parentElement = parent;
 		this.doCreateGridControl();
 
 		// Container
 		addClass(this.gridWidget.element, 'content');
-		parent.appendChild(this.gridWidget.element);
+		this.parentElement.appendChild(this.gridWidget.element);
 
 
 		// Drop support
@@ -708,6 +712,29 @@ export class EditorPart extends Part implements EditorGroupsServiceImpl, IEditor
 		return this.gridWidget.element;
 	}
 
+	centerLayout(active: boolean): void {
+		if (!active && this.centeredViewLayout) {
+			this.parentElement.removeChild(this.centeredViewLayout.element);
+			this.parentElement.appendChild(this.gridWidget.element);
+			this.centeredViewLayout.dispose();
+			this.centeredViewLayout = undefined;
+		}
+
+		if (active) {
+			this.centeredViewLayout = new CenteredViewLayout(this.parentElement, {
+				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
+			});
+		}
+	}
+
+	isLayoutCentered(): boolean {
+		return !!this.centeredViewLayout;
+	}
+
 	private doCreateGridControl(): void {
 
 		// Grid Widget (with previous UI state)
@@ -947,7 +974,11 @@ export class EditorPart extends Part implements EditorGroupsServiceImpl, IEditor
 
 		// Layout Grid
 		try {
-			this.gridWidget.layout(this.dimension.width, this.dimension.height);
+			if (this.centeredViewLayout) {
+				this.centeredViewLayout.layout(this.dimension.width);
+			} else {
+				this.gridWidget.layout(this.dimension.width, this.dimension.height);
+			}
 		} catch (error) {
 			this.gridError(error);
 		}
@@ -989,6 +1020,9 @@ export class EditorPart extends Part implements EditorGroupsServiceImpl, IEditor
 		if (this.gridWidget) {
 			this.gridWidget = dispose(this.gridWidget);
 		}
+		if (this.centeredViewLayout) {
+			this.centeredViewLayout = dispose(this.centeredViewLayout);
+		}
 
 		super.dispose();
 	}

src/vs/workbench/electron-browser/workbench.ts

@@ -108,7 +108,7 @@ import { registerWindowDriver } from 'vs/platform/driver/electron-browser/driver
 import { IPreferencesService } from 'vs/workbench/services/preferences/common/preferences';
 import { PreferencesService } from 'vs/workbench/services/preferences/browser/preferencesService';
 import { IEditorService, IResourceEditor } from 'vs/workbench/services/editor/common/editorService';
-import { IEditorGroupsService, GroupDirection, preferredSideBySideGroupDirection, GroupOrientation } from 'vs/workbench/services/group/common/editorGroupsService';
+import { IEditorGroupsService, GroupDirection, preferredSideBySideGroupDirection } from 'vs/workbench/services/group/common/editorGroupsService';
 import { EditorService } from 'vs/workbench/services/editor/browser/editorService';
 import { IExtensionUrlHandler, ExtensionUrlHandler } from 'vs/platform/url/electron-browser/inactiveExtensionUrlHandler';
 import { WorkbenchThemeService } from 'vs/workbench/services/themes/electron-browser/workbenchThemeService';
@@ -218,7 +218,6 @@ export class Workbench extends Disposable implements IPartService {
 	private panelPosition: Position;
 	private panelHidden: boolean;
 	private zenMode: IZenMode;
-	private centeredEditorLayoutActive: boolean;
 	private fontAliasing: FontAliasingOption;
 	private hasInitialFilesToOpen: boolean;
 
@@ -692,7 +691,7 @@ export class Workbench extends Disposable implements IPartService {
 
 		// Restore Forced Editor Center Mode
 		if (this.storageService.getBoolean(Workbench.centeredEditorLayoutActiveStorageKey, StorageScope.WORKSPACE, false)) {
-			this.centeredEditorLayoutActive = true;
+			this.centerEditorLayout(true);
 		}
 
 		const onRestored = (error?: Error): IWorkbenchStartedInfo => {
@@ -846,9 +845,6 @@ export class Workbench extends Disposable implements IPartService {
 			wasPanelVisible: false,
 			transitionDisposeables: []
 		};
-
-		// Centered Editor Layout
-		this.centeredEditorLayoutActive = false;
 	}
 
 	private setPanelPositionFromStorageOrConfig() {
@@ -1247,39 +1243,14 @@ export class Workbench extends Disposable implements IPartService {
 	}
 
 	isEditorLayoutCentered(): boolean {
-		return this.centeredEditorLayoutActive;
+		return this.editorPart.isLayoutCentered();
 	}
 
-	// TODO@ben support centered editor layout using empty groups or not? functionality missing:
-	// - resize sashes left and right in sync
-	// - IEditorInput.supportsCenteredEditorLayout() no longer supported
-	// - should we just allow to enter layout even if groups > 1? what does it then mean to be
-	//   actively in centered editor layout though?
 	centerEditorLayout(active: boolean, skipLayout?: boolean): void {
-		this.centeredEditorLayoutActive = active;
-		this.storageService.store(Workbench.centeredEditorLayoutActiveStorageKey, this.centeredEditorLayoutActive, StorageScope.WORKSPACE);
+		this.storageService.store(Workbench.centeredEditorLayoutActiveStorageKey, active, StorageScope.WORKSPACE);
 
 		// Enter Centered Editor Layout
-		if (active) {
-			if (this.editorGroupService.count === 1) {
-				const activeGroup = this.editorGroupService.activeGroup;
-				this.editorGroupService.addGroup(activeGroup, GroupDirection.LEFT);
-				this.editorGroupService.addGroup(activeGroup, GroupDirection.RIGHT);
-
-				this.editorGroupService.applyLayout({ groups: [{ size: 0.2 }, { size: 0.6 }, { size: 0.2 }], orientation: GroupOrientation.HORIZONTAL });
-			}
-		}
-
-		// Leave Centered Editor Layout
-		else {
-			if (this.editorGroupService.count === 3) {
-				this.editorGroupService.groups.forEach(group => {
-					if (group.count === 0) {
-						this.editorGroupService.removeGroup(group);
-					}
-				});
-			}
-		}
+		this.editorPart.centerLayout(active);
 
 		if (!skipLayout) {
 			this.layout();
@@ -1460,4 +1431,4 @@ export class Workbench extends Disposable implements IPartService {
 	}
 
 	//#endregion
-}
\ No newline at end of file
+}