Add code cell (#2909)

* initial work for addig code and code cell type

* add cell model and create editor for each cell

* formatting

* fix resizing issue

* small changes

* address comment

src/sql/parts/notebook/cellViews/code.component.html

@@ -0,0 +1,13 @@
+<!--
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+-->
+<div style="overflow: hidden; width: 100%; height: 100%; display: flex; flex-flow: row">
+	<div #toolbar class="toolbar" style="flex: 0 0 auto;">
+		Toolbar
+	</div>
+	<div #editor class="editor" style="flex: 1 1 auto; overflow: hidden;">
+	</div>
+</div>

src/sql/parts/notebook/cellViews/code.component.ts

@@ -0,0 +1,130 @@
+/*---------------------------------------------------------------------------------------------
+*  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!./code';
+
+import { OnInit, Component, Input, Inject, forwardRef, ElementRef, ChangeDetectorRef, OnDestroy, ViewChild } from '@angular/core';
+
+import { CommonServiceInterface } from 'sql/services/common/commonServiceInterface.service';
+import { AngularDisposable } from 'sql/base/common/lifecycle';
+import { ComponentBase } from 'sql/parts/modelComponents/componentBase';
+import { IComponent, IComponentDescriptor, IModelStore, ComponentEventType } from 'sql/parts/modelComponents/interfaces';
+import { QueryTextEditor } from 'sql/parts/modelComponents/queryTextEditor';
+
+import { IColorTheme, IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService';
+import * as themeColors from 'vs/workbench/common/theme';
+import { ServiceCollection } from 'vs/platform/instantiation/common/serviceCollection';
+import { SimpleProgressService } from 'vs/editor/standalone/browser/simpleServices';
+import { IProgressService } from 'vs/platform/progress/common/progress';
+import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
+import { ITextModel } from 'vs/editor/common/model';
+import { UntitledEditorInput } from 'vs/workbench/common/editor/untitledEditorInput';
+import URI from 'vs/base/common/uri';
+import { Schemas } from 'vs/base/common/network';
+import * as DOM from 'vs/base/browser/dom';
+import { IModeService } from 'vs/editor/common/services/modeService';
+import { IModelService } from 'vs/editor/common/services/modelService';
+
+
+export const CODE_SELECTOR: string = 'code-component';
+
+@Component({
+	selector: CODE_SELECTOR,
+	templateUrl: decodeURI(require.toUrl('./code.component.html'))
+})
+export class CodeComponent extends AngularDisposable implements OnInit {
+	@ViewChild('toolbar', { read: ElementRef }) private toolbarElement: ElementRef;
+	@ViewChild('editor', { read: ElementRef }) private codeElement: ElementRef;
+	@Input() id: string;
+	@Input() content: string;
+	@Input() language: string;
+
+	private _editor: QueryTextEditor;
+	private _editorInput: UntitledEditorInput;
+	private _editorModel: ITextModel;
+	private _uri: string;
+
+	constructor(
+		@Inject(forwardRef(() => CommonServiceInterface)) private _bootstrapService: CommonServiceInterface,
+		@Inject(forwardRef(() => ChangeDetectorRef)) private _changeRef: ChangeDetectorRef,
+		@Inject(IWorkbenchThemeService) private themeService: IWorkbenchThemeService,
+		@Inject(IInstantiationService) private _instantiationService: IInstantiationService,
+		@Inject(IModelService) private _modelService: IModelService,
+		@Inject(IModeService) private _modeService: IModeService
+	) {
+		super();
+	}
+
+	ngOnInit() {
+		this._register(this.themeService.onDidColorThemeChange(this.updateTheme, this));
+		this.updateTheme(this.themeService.getColorTheme());
+	}
+
+	ngOnChanges() {
+		this.updateLanguageMode();
+		this.updateModel();
+	}
+
+	ngAfterContentInit(): void {
+		this.createEditor();
+		this._register(DOM.addDisposableListener(window, DOM.EventType.RESIZE, e => {
+			this.layout();
+		}));
+	}
+
+	private createEditor(): void {
+		let instantiationService = this._instantiationService.createChild(new ServiceCollection([IProgressService, new SimpleProgressService()]));
+		this._editor = instantiationService.createInstance(QueryTextEditor);
+		this._editor.create(this.codeElement.nativeElement);
+		this._editor.setVisible(true);
+		let uri = this.createUri();
+		this._editorInput = instantiationService.createInstance(UntitledEditorInput, uri, false, this.language, '', '');
+		this._editor.setInput(this._editorInput, undefined);
+		this._editorInput.resolve().then(model => {
+			this._editorModel = model.textEditorModel;
+			this._modelService.updateModel(this._editorModel, this.content);
+		});
+
+		this._register(this._editor);
+		this._register(this._editorInput);
+		this._register(this._editorModel.onDidChangeContent(e => {
+			this.content = this._editorModel.getValue();
+			this._editor.setHeightToScrollHeight();
+		}));
+		this.layout();
+	}
+
+	public layout(): void {
+		this._editor.layout(new DOM.Dimension(
+			DOM.getContentWidth(this.codeElement.nativeElement),
+			DOM.getContentHeight(this.codeElement.nativeElement)));
+	}
+
+	private createUri(): URI {
+		let uri = URI.from({ scheme: Schemas.untitled, path: `notebook-editor-${this.id}` });
+		// Use this to set the internal (immutable) and public (shared with extension) uri properties
+		this._uri = uri.toString();
+		return uri;
+	}
+
+	/// Editor Functions
+	private updateModel() {
+		if (this._editorModel) {
+			this._modelService.updateModel(this._editorModel, this.content);
+		}
+	}
+
+	private updateLanguageMode() {
+		if (this._editorModel && this._editor) {
+			this._modeService.getOrCreateMode(this.language).then((modeValue) => {
+				this._modelService.setMode(this._editorModel, modeValue);
+			});
+		}
+	}
+
+	private updateTheme(theme: IColorTheme): void {
+		let toolbarEl = <HTMLElement>this.toolbarElement.nativeElement;
+		toolbarEl.style.borderRightColor = theme.getColor(themeColors.SIDE_BAR_BACKGROUND, true).toString();
+	}
+}

src/sql/parts/notebook/cellViews/code.css

@@ -0,0 +1,15 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+code-component {
+	height: 100%;
+	width: 100%;
+	display: block;
+}
+
+code-component .toolbar {
+	border-right-width: 1px;
+	border-right-style: solid;
+}

src/sql/parts/notebook/cellViews/codeCell.component.html

@@ -0,0 +1,14 @@
+<!--
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+-->
+<div style="overflow: hidden; width: 100%; height: 100%; display: flex; flex-flow: column">
+	<div class="notebook-code" style="flex: 0 0 auto;">
+		<code-component [id]="cellModel.id" [content]="cellModel.source" [language]="cellModel.language"></code-component>
+	</div>
+	<div class="notebook-output" style="flex: 0 0 auto;">
+		Place Holder for output area
+	</div>
+</div>

src/sql/parts/notebook/cellViews/codeCell.component.ts

@@ -0,0 +1,40 @@
+/*---------------------------------------------------------------------------------------------
+*  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!./codeCell';
+
+import { OnInit, Component, Input, Inject, forwardRef, ElementRef, ChangeDetectorRef, OnDestroy, ViewChild } from '@angular/core';
+
+import { CommonServiceInterface } from 'sql/services/common/commonServiceInterface.service';
+import { CellView, ICellModel } from 'sql/parts/notebook/cellViews/interfaces';
+
+import { IColorTheme, IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService';
+import * as themeColors from 'vs/workbench/common/theme';
+
+
+export const CODE_SELECTOR: string = 'code-cell-component';
+
+@Component({
+	selector: CODE_SELECTOR,
+	templateUrl: decodeURI(require.toUrl('./codeCell.component.html'))
+})
+export class CodeCellComponent extends CellView implements OnInit {
+	@Input() cellModel: ICellModel;
+	constructor(
+		@Inject(forwardRef(() => CommonServiceInterface)) private _bootstrapService: CommonServiceInterface,
+		@Inject(forwardRef(() => ChangeDetectorRef)) private _changeRef: ChangeDetectorRef,
+		@Inject(IWorkbenchThemeService) private themeService: IWorkbenchThemeService
+	) {
+		super();
+	}
+
+	ngOnInit() {
+
+	}
+
+	// Todo: implement layout
+	public layout() {
+
+	}
+}

src/sql/parts/notebook/cellViews/codeCell.css

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

src/sql/parts/notebook/cellViews/interfaces.ts

@@ -0,0 +1,31 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import { OnDestroy } from '@angular/core';
+import { AngularDisposable } from 'sql/base/common/lifecycle';
+
+
+export abstract class CellView extends AngularDisposable implements OnDestroy {
+	constructor() {
+		super();
+	}
+
+	public abstract layout(): void;
+}
+
+export interface ICellModel {
+	id: string;
+	language: string;
+	source: string;
+	cellType: CellType;
+}
+
+export type CellType = 'code' | 'markdown' | 'raw';
+
+export class CellTypes {
+	public static readonly Code = 'code';
+	public static readonly Markdown = 'markdown';
+	public static readonly Raw = 'raw';
+}