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();
+	}
 }