Support position property in editor component (#2314)

* Support position property in editor component
- This needs to be set directly on the editor component so cannot just use CSSStyles feature
- Given its importance to this scenario, it also warrants a dedicated property.

* Fix window resize when action bar clicked

* Renamed per Abbie's suggestion

* Changed name to clarify the comments

src/sql/parts/modelComponents/editor.component.ts

@@ -33,7 +33,7 @@ export default class EditorComponent extends ComponentBase implements IComponent
 	private _editorInput: UntitledEditorInput;
 	private _editorModel: ITextModel;
 	private _renderedContent: string;
-	private _langaugeMode: string;
+	private _languageMode: string;
 
 	constructor(
 		@Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef,
@@ -76,10 +76,13 @@ export default class EditorComponent extends ComponentBase implements IComponent
 
 	public layout(): void {
 		let width: number = this.convertSizeToNumber(this.width);
+
 		let height: number = this.convertSizeToNumber(this.height);
 		this._editor.layout(new DOM.Dimension(
 			width && width > 0 ? width : DOM.getContentWidth(this._el.nativeElement),
 			height && height > 0 ? height : DOM.getContentHeight(this._el.nativeElement)));
+		let element = <HTMLElement> this._el.nativeElement;
+		element.style.position = this.position;
 	}
 
 	/// Editor Functions
@@ -92,8 +95,8 @@ export default class EditorComponent extends ComponentBase implements IComponent
 
 	private updateLanguageMode() {
 		if (this._editorModel && this._editor) {
-			this._langaugeMode = this.languageMode;
-			this._modeService.getOrCreateMode(this._langaugeMode).then((modeValue) => {
+			this._languageMode = this.languageMode;
+			this._modeService.getOrCreateMode(this._languageMode).then((modeValue) => {
 				this._modelService.setMode(this._editorModel, modeValue);
 			});
 		}
@@ -111,7 +114,7 @@ export default class EditorComponent extends ComponentBase implements IComponent
 		if (this.content !== this._renderedContent) {
 			this.updateModel();
 		}
-		if (this.languageMode !== this._langaugeMode) {
+		if (this.languageMode !== this._languageMode) {
 			this.updateLanguageMode();
 		}
 	}
@@ -132,4 +135,12 @@ export default class EditorComponent extends ComponentBase implements IComponent
 	public set languageMode(newValue: string) {
 		this.setPropertyFromUI<sqlops.EditorProperties, string>((properties, languageMode) => { properties.languageMode = languageMode; }, newValue);
 	}
+
+	public get position(): string {
+		return this.getPropertyOrDefault<sqlops.EditorProperties, string>((props) => props.position, '');
+	}
+
+	public set position(newValue: string) {
+		this.setPropertyFromUI<sqlops.EditorProperties, string>((properties, position) => { properties.languoffsetMarginageMode = position; }, newValue);
+	}
 }

src/sql/parts/modelComponents/modelComponentWrapper.component.ts

@@ -28,12 +28,13 @@ import { generateUuid } from 'vs/base/common/uuid';
 import { IBootstrapParams } from 'sql/services/bootstrap/bootstrapService';
 import { Event, Emitter } from 'vs/base/common/event';
 import * as nls from 'vs/nls';
+import { LayoutRequestParams } from 'sql/platform/dialog/dialogContainer.component';
 
 const componentRegistry = <IComponentRegistry>Registry.as(Extensions.ComponentContribution);
 
 export interface ModelComponentParams extends IBootstrapParams {
 
-	onLayoutRequested: Event<string>;
+	onLayoutRequested: Event<LayoutRequestParams>;
 	modelViewId: string;
 }
 
@@ -69,8 +70,8 @@ export class ModelComponentWrapper extends AngularDisposable implements OnInit {
 		super();
 		if (_params && _params.onLayoutRequested) {
 			this._modelViewId = _params.modelViewId;
-			_params.onLayoutRequested(modelViewId => {
-				if (modelViewId === this._modelViewId) {
+			_params.onLayoutRequested(layoutParams => {
+				if (layoutParams && (layoutParams.alwaysRefresh || layoutParams.modelViewId === this._modelViewId)) {
 					this.layout();
 				}
 			});

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

@@ -79,7 +79,8 @@ export class ModelViewEditor extends BaseEditor {
 	}
 
 	private doUpdateContainer() {
-		const modelViewContainer = this.input && (this.input as ModelViewInput).container;
+		let modelViewInput = this.input as ModelViewInput;
+		const modelViewContainer = modelViewInput && modelViewInput.container;
 		if (modelViewContainer) {
 			const frameRect = this._editorFrame.getBoundingClientRect();
 			const containerRect = modelViewContainer.parentElement.getBoundingClientRect();
@@ -89,6 +90,9 @@ export class ModelViewEditor extends BaseEditor {
 			modelViewContainer.style.left = `${frameRect.left - containerRect.left}px`;
 			modelViewContainer.style.width = `${frameRect.width}px`;
 			modelViewContainer.style.height = `${frameRect.height}px`;
+			if (modelViewInput.dialogPane) {
+				modelViewInput.dialogPane.layout(true);
+			}
 		}
 	}