Fix view model editor and webview component (#1483)

* destroy viewmodel when editor is closed and add example

* support retainContextWhenHidden option for webview component

* fix breaking change from master

* dispose html element during dispose

* add more comments

src/sql/parts/modelComponents/modelEditor/modelViewEditor.css

@@ -1,9 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- *  Copyright (c) Microsoft Corporation. All rights reserved.
- *  Licensed under the Source EULA. See License.txt in the project root for license information.
- *--------------------------------------------------------------------------------------------*/
-
-.model-view-container {
-	height: 100%;
-	width : 100%;
-}

src/sql/parts/modelComponents/modelEditor/modelViewEditor.ts

@@ -2,8 +2,6 @@
  *  Copyright (c) Microsoft Corporation. All rights reserved.
  *  Licensed under the Source EULA. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
-import 'vs/css!./modelViewEditor';
-
 import { Builder, $ } from 'vs/base/browser/builder';
 import { TPromise } from 'vs/base/common/winjs.base';
 import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
@@ -15,19 +13,16 @@ import * as DOM from 'vs/base/browser/dom';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
 
 import { ModelViewInput } from 'sql/parts/modelComponents/modelEditor/modelViewInput';
-import { bootstrapAngular } from 'sql/services/bootstrap/bootstrapService';
-import { Dialog } from 'sql/platform/dialog/dialogTypes';
-import { DialogPane } from 'sql/platform/dialog/dialogPane';
 
 export class ModelViewEditor extends BaseEditor {
 
 	public static ID: string = 'workbench.editor.modelViewEditor';
-	private _modelViewMap = new Map<string, HTMLElement>();
+
+	private _editorFrame: HTMLElement;
 
 	constructor(
 		@ITelemetryService telemetryService: ITelemetryService,
-		@IThemeService themeService: IThemeService,
-		@IInstantiationService private _instantiationService: IInstantiationService
+		@IThemeService themeService: IThemeService
 	) {
 		super(ModelViewEditor.ID, telemetryService, themeService);
 	}
@@ -36,6 +31,7 @@ export class ModelViewEditor extends BaseEditor {
 	 * Called to create the editor in the parent builder.
 	 */
 	public createEditor(parent: Builder): void {
+		this._editorFrame = parent.getHTMLElement();
 	}
 
 	/**
@@ -44,23 +40,43 @@ export class ModelViewEditor extends BaseEditor {
 	public focus(): void {
 	}
 
-	public setInput(input: ModelViewInput, options?: EditorOptions): TPromise<void, any> {
+	async setInput(input: ModelViewInput, options?: EditorOptions): TPromise<void, any> {
 		if (this.input && this.input.matches(input)) {
 			return TPromise.as(undefined);
 		}
+
 		const parentElement = this.getContainer().getHTMLElement();
-		$(parentElement).clearChildren();
-
-		if (!this._modelViewMap.get(input.modelViewId)) {
-			let modelViewContainer = DOM.$('div.model-view-container');
-			let dialogPane = new DialogPane(input.title, input.modelViewId, () => undefined, this._instantiationService);
-			dialogPane.createBody(modelViewContainer);
-			this._modelViewMap.set(input.modelViewId, modelViewContainer);
+		if (this.input instanceof ModelViewInput) {
+			if (this.input.container) {
+				if (this.input.options && this.input.options.retainContextWhenHidden) {
+					this.input.container.style.visibility = 'hidden';
+				} else {
+					parentElement.removeChild(this.input.container);
+				}
+			}
 		}
-		let element = this._modelViewMap.get(input.modelViewId);
-		DOM.append(parentElement, element);
 
-		return super.setInput(input, options);
+		if (!parentElement.contains(input.container)) {
+			parentElement.appendChild(input.container);
+		}
+		input.container.style.visibility = 'visible';
+
+		await super.setInput(input, options);
+		this.doUpdateContainer();
+	}
+
+	private doUpdateContainer() {
+		const modelViewContainer = this.input && (this.input as ModelViewInput).container;
+		if (modelViewContainer) {
+			const frameRect = this._editorFrame.getBoundingClientRect();
+			const containerRect = modelViewContainer.parentElement.getBoundingClientRect();
+
+			modelViewContainer.style.position = 'absolute';
+			modelViewContainer.style.top = `${frameRect.top}px`;
+			modelViewContainer.style.left = `${frameRect.left - containerRect.left}px`;
+			modelViewContainer.style.width = `${frameRect.width}px`;
+			modelViewContainer.style.height = `${frameRect.height}px`;
+		}
 	}
 
 	/**
@@ -68,7 +84,12 @@ export class ModelViewEditor extends BaseEditor {
 	 * To be called when the container of this editor changes size.
 	 */
 	public layout(dimension: Dimension): void {
-
+		if (this.input instanceof ModelViewInput) {
+			if (this.input.container && this.input.dialogPane) {
+				this.doUpdateContainer();
+				// todo: layout this.input.dialogPane (Github issue: #1484)
+			}
+		}
 	}
 
 }

src/sql/parts/modelComponents/modelEditor/modelViewInput.ts

@@ -6,12 +6,22 @@
 import { TPromise } from 'vs/base/common/winjs.base';
 import { IEditorModel } from 'vs/platform/editor/common/editor';
 import { EditorInput } from 'vs/workbench/common/editor';
+import * as DOM from 'vs/base/browser/dom';
+import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
 
+import { DialogPane } from 'sql/platform/dialog/dialogPane';
+
+import * as sqlops from 'sqlops';
 export class ModelViewInput extends EditorInput {
 
 	public static ID: string = 'workbench.editorinputs.ModelViewEditorInput';
+	private _container: HTMLElement;
+	private _dialogPane: DialogPane;
 
-	constructor(private _title: string, private _modelViewId: string) {
+	constructor(private _title: string, private _modelViewId: string,
+		private _options: sqlops.ModelViewEditorOptions,
+		@IInstantiationService private _instantiationService: IInstantiationService,
+	) {
 		super();
 	}
 
@@ -34,4 +44,32 @@ export class ModelViewInput extends EditorInput {
 	public getName(): string {
 		return this._title;
 	}
+
+	public get container(): HTMLElement {
+		if (!this._container && !this._dialogPane) {
+			this._container = DOM.$('div.model-view-container');
+			this._dialogPane = new DialogPane(this.title, this.modelViewId, () => undefined, this._instantiationService);
+			this._dialogPane.createBody(this._container);
+		}
+		return this._container;
+	}
+
+	public get dialogPane(): DialogPane {
+		return this._dialogPane;
+	}
+
+	public get options(): sqlops.ModelViewEditorOptions {
+		return this._options;
+	}
+
+	public dispose(): void {
+		if (this._dialogPane) {
+			this._dialogPane.dispose();
+		}
+		if (this._container) {
+			this._container.remove();
+			this._container = undefined;
+		}
+		super.dispose();
+	}
 }

src/sql/sqlops.proposed.d.ts

@@ -666,7 +666,7 @@ declare module 'sqlops' {
 		/**
 		 * Create a new model view editor
 		 */
-		export function createModelViewEditor(title: string): ModelViewEditor;
+		export function createModelViewEditor(title: string, options?: ModelViewEditorOptions): ModelViewEditor;
 
 		export interface ModelViewEditor extends window.modelviewdialog.ModelViewPanel {
 
@@ -676,4 +676,11 @@ declare module 'sqlops' {
 			openEditor(position?: vscode.ViewColumn): Thenable<void>;
 		}
 	}
+
+	export interface ModelViewEditorOptions {
+		/**
+		 * Should the model view editor's context be kept around even when the editor is no longer visible? It is false by default
+		 */
+		readonly retainContextWhenHidden?: boolean;
+	}
 }

src/sql/workbench/api/node/extHostModelViewDialog.ts

@@ -76,13 +76,14 @@ class ModelViewEditorImpl extends ModelViewPanelImpl implements sqlops.workspace
 		extHostModelViewDialog: ExtHostModelViewDialog,
 		extHostModelView: ExtHostModelViewShape,
 		private _proxy: MainThreadModelViewDialogShape,
-		private _title: string
+		private _title: string,
+		private _options: sqlops.ModelViewEditorOptions
 	) {
 		super('modelViewEditor', extHostModelViewDialog, extHostModelView);
 	}
 
 	public openEditor(position?: vscode.ViewColumn): Thenable<void> {
-		return this._proxy.$openEditor(this._modelViewId, this._title, position);
+		return this._proxy.$openEditor(this._modelViewId, this._title, this._options, position);
 	}
 }
 
@@ -345,8 +346,8 @@ export class ExtHostModelViewDialog implements ExtHostModelViewDialogShape {
 		this._proxy.$closeDialog(handle);
 	}
 
-	public createModelViewEditor(title: string): sqlops.workspace.ModelViewEditor {
-		let editor = new ModelViewEditorImpl(this, this._extHostModelView, this._proxy, title);
+	public createModelViewEditor(title: string, options?: sqlops.ModelViewEditorOptions): sqlops.workspace.ModelViewEditor {
+		let editor = new ModelViewEditorImpl(this, this._extHostModelView, this._proxy, title, options);
 		editor.handle = this.getHandle(editor);
 		return editor;
 	}

src/sql/workbench/api/node/mainThreadModelViewDialog.ts

@@ -17,6 +17,7 @@ import { IModelViewDialogDetails, IModelViewTabDetails, IModelViewButtonDetails,
 import { ModelViewInput } from 'sql/parts/modelComponents/modelEditor/modelViewInput';
 
 import * as vscode from 'vscode';
+import * as sqlops from 'sqlops';
 
 @extHostNamedCustomer(SqlMainContext.MainThreadModelViewDialog)
 export class MainThreadModelViewDialog implements MainThreadModelViewDialogShape {
@@ -31,20 +32,20 @@ export class MainThreadModelViewDialog implements MainThreadModelViewDialogShape
 
 	constructor(
 		context: IExtHostContext,
-		@IInstantiationService instatiationService: IInstantiationService,
+		@IInstantiationService private _instatiationService: IInstantiationService,
 		@IWorkbenchEditorService private _editorService: IWorkbenchEditorService
 	) {
 		this._proxy = context.getProxy(SqlExtHostContext.ExtHostModelViewDialog);
-		this._dialogService = new CustomDialogService(instatiationService);
+		this._dialogService = new CustomDialogService(_instatiationService);
 	}
 
 	public dispose(): void {
 		throw new Error('Method not implemented.');
 	}
 
-	public $openEditor(modelViewId: string, title: string, position?: vscode.ViewColumn): Thenable<void> {
+	public $openEditor(modelViewId: string, title: string, options?: sqlops.ModelViewEditorOptions, position?: vscode.ViewColumn): Thenable<void> {
 		return new Promise<void>((resolve, reject) => {
-			let input = new ModelViewInput(title, modelViewId);
+			let input = this._instatiationService.createInstance(ModelViewInput, title, modelViewId, options);
 			let editorOptions = {
 				preserveFocus: true,
 				pinned: true

src/sql/workbench/api/node/sqlExtHost.api.impl.ts

@@ -325,8 +325,8 @@ export function createApiFactory(
 			const workspace: typeof sqlops.workspace = {
 				onDidOpenDashboard: extHostDashboard.onDidOpenDashboard,
 				onDidChangeToDashboard: extHostDashboard.onDidChangeToDashboard,
-				createModelViewEditor(title: string): sqlops.workspace.ModelViewEditor {
-					return extHostModelViewDialog.createModelViewEditor(title);
+				createModelViewEditor(title: string, options?: sqlops.ModelViewEditorOptions): sqlops.workspace.ModelViewEditor {
+					return extHostModelViewDialog.createModelViewEditor(title, options);
 				}
 			};
 

src/sql/workbench/api/node/sqlExtHost.protocol.ts

@@ -559,7 +559,7 @@ export interface ExtHostModelViewDialogShape {
 }
 
 export interface MainThreadModelViewDialogShape extends IDisposable {
-	$openEditor(modelViewId: string, title: string, position?: vscode.ViewColumn): Thenable<void>;
+	$openEditor(modelViewId: string, title: string, options?: sqlops.ModelViewEditorOptions, position?: vscode.ViewColumn): Thenable<void>;
 	$openDialog(handle: number): Thenable<void>;
 	$closeDialog(handle: number): Thenable<void>;
 	$setDialogDetails(handle: number, details: IModelViewDialogDetails): Thenable<void>;