Added node selectdEvent (#2153)

* Added model view tree node selectedEvent

samples/sqlservices/package.json

@@ -100,7 +100,7 @@
         "sqlops": "github:anthonydresser/sqlops-extension-sqlops",
         "tslint": "^3.14.0",
         "typescript": "^2.6.1",
-        "vscode": "^1.1.14",
+        "vscode": "^1.1.18",
         "@types/handlebars": "^4.0.11",
         "vsce": "1.36.2"
     },

samples/sqlservices/src/controllers/mainController.ts

@@ -114,7 +114,17 @@ export default class MainController implements vscode.Disposable {
 		let tree: sqlops.TreeComponent<TreeNode> = view.modelBuilder.tree<TreeNode>().withProperties({
 			'withCheckbox': true
 		}).component();
-		tree.registerDataProvider(treeDataProvider);
+		let treeView = tree.registerDataProvider(treeDataProvider);
+		treeView.onNodeCheckedChanged(item => {
+			if (item && item.element) {
+				item.element.changeNodeCheckedState(item.checked);
+			}
+		});
+		treeView.onDidChangeSelection(selectedNodes => {
+			selectedNodes.forEach(node => {
+				console.info('tree node selected: ' + node.label);
+			});
+		});
 		let formModel = view.modelBuilder.formContainer()
 			.withFormItems([{
 				component: tree,
@@ -150,7 +160,7 @@ export default class MainController implements vscode.Disposable {
 			})
 			.component();
 		checkbox.onChanged(e => {
-			console.info("inputBox.enabled " + inputBox.enabled);
+			console.info('inputBox.enabled ' + inputBox.enabled);
 			inputBox.enabled = !inputBox.enabled;
 		});
 		let button = view.modelBuilder.button()

samples/sqlservices/src/controllers/treeDataProvider.ts

@@ -291,9 +291,4 @@ export class TreeDataProvider implements sqlops.TreeComponentDataProvider<TreeNo
 			}
 		}
 
-		onNodeCheckedChanged(element: TreeNode, checked: boolean): void {
-			if (element) {
-				element.changeNodeCheckedState(checked);
-			}
-		}
 }

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

@@ -92,7 +92,7 @@ export default class TreeComponent extends ComponentBase implements IComponent,
 	private createTreeControl(): void {
 		if (!this._tree && this._dataProvider) {
 			const dataSource = this._instantiationService.createInstance(TreeComponentDataSource, this._dataProvider);
-			const renderer = this._instantiationService.createInstance(TreeComponentRenderer, this.themeService, { withCheckbox: this.withCheckbox });
+			const renderer = this._instantiationService.createInstance(TreeComponentRenderer, this._dataProvider, this.themeService, { withCheckbox: this.withCheckbox });
 			this._treeRenderer = renderer;
 			const controller = new DefaultController();
 			const filter = new DefaultFilter();
@@ -111,6 +111,9 @@ export default class TreeComponent extends ComponentBase implements IComponent,
 			this._tree.domFocus();
 			this._register(this._tree);
 			this._register(attachListStyler(this._tree, this.themeService));
+			this._register(this._tree.onDidChangeSelection( e => {
+				this._dataProvider.onNodeSelected(e.selection);
+			}));
 			this._tree.refresh();
 			this.layout();
 		}

src/sql/parts/modelComponents/tree/treeComponentRenderer.ts

@@ -15,6 +15,7 @@ import { Disposable } from 'vs/base/common/lifecycle';
 import { Event, Emitter } from 'vs/base/common/event';
 import { ITreeComponentItem } from 'sql/workbench/common/views';
 import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService';
+import { TreeViewDataProvider } from './treeViewDataProvider';
 
 export enum TreeCheckboxState {
 	Intermediate = 0,
@@ -90,6 +91,7 @@ export class TreeComponentRenderer extends Disposable implements IRenderer {
 
 
 	constructor(
+		private _dataProvider: TreeViewDataProvider,
 		private themeService: IWorkbenchThemeService,
 		public options?: { withCheckbox: boolean }
 	) {
@@ -137,7 +139,10 @@ export class TreeComponentRenderer extends Disposable implements IRenderer {
 		const icon = this.themeService.getTheme().type === LIGHT ? element.icon : element.iconDark;
 		templateData.icon.style.backgroundImage = icon ? `url('${icon}')` : '';
 		dom.toggleClass(templateData.icon, 'model-view-tree-node-item-icon', !!icon);
-		if (element && !templateData.model) {
+		if (element) {
+			element.onCheckedChanged = (checked: boolean) => {
+				this._dataProvider.onNodeCheckedChanged(element.handle, checked);
+			}
 			templateData.model = element;
 		}
 		if (templateId === TreeComponentRenderer.DEFAULT_TEMPLATE) {

src/sql/parts/modelComponents/tree/treeViewDataProvider.ts

@@ -19,21 +19,13 @@ export class TreeViewDataProvider extends vsTreeView.TreeViewDataProvider implem
 		super(`${handle}-${treeViewId}`, context.getProxy(SqlExtHostContext.ExtHostModelViewTreeViews), notificationService);
 	}
 
-	onNodeCheckedChanged(treeViewId: string, treeItemHandle?: string, checked?: boolean) {
+	onNodeCheckedChanged(treeItemHandle?: string, checked?: boolean) {
-		(<ExtHostModelViewTreeViewsShape>this._proxy).$onNodeCheckedChanged(treeViewId, treeItemHandle, checked);
+		(<ExtHostModelViewTreeViewsShape>this._proxy).$onNodeCheckedChanged(this.treeViewId, treeItemHandle, checked);
 	}
 
-	protected postGetChildren(elements: ITreeComponentItem[]): ITreeComponentItem[] {
+	onNodeSelected(items: ITreeComponentItem[]) {
-		const result = [];
+		if (items) {
-		if (elements) {
+			(<ExtHostModelViewTreeViewsShape>this._proxy).$onNodeSelected(this.treeViewId, items.map(i => i.handle));
-			for (const element of elements) {
-				element.onCheckedChanged = (checked: boolean) => {
-					this.onNodeCheckedChanged(this.treeViewId, element.handle, checked);
-				};
-				this.itemsMap.set(element.handle, element);
-				result.push(element);
 		}
 	}
-		return result;
-	}
 }

src/sql/sqlops.proposed.d.ts

@@ -42,10 +42,17 @@ declare module 'sqlops' {
 
 	export interface TreeComponentDataProvider<T> extends vscode.TreeDataProvider<T> {
 		getTreeItem(element: T): TreeComponentItem | Thenable<TreeComponentItem>;
-
-		onNodeCheckedChanged?(element: T, checked: boolean): void;
 	}
 
+	export interface NodeCheckedEventParameters<T> {
+		element: T,
+		checked: boolean
+	}
+
+	export interface TreeComponentView<T> extends vscode.Disposable {
+		onNodeCheckedChanged:  vscode.Event<NodeCheckedEventParameters<T>>;
+		onDidChangeSelection:  vscode.Event<T[]>;
+	}
 
 	export class TreeComponentItem extends vscode.TreeItem {
 		checked?: boolean;
@@ -531,7 +538,7 @@ declare module 'sqlops' {
 	}
 
 	export interface TreeComponent<T> extends Component, TreeProperties {
-		registerDataProvider<T>(dataProvider: TreeComponentDataProvider<T>): any;
+		registerDataProvider<T>(dataProvider: TreeComponentDataProvider<T>): TreeComponentView<T>;
 	}
 
 	export interface WebViewComponent extends Component {

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

@@ -1063,7 +1063,7 @@ class TreeComponentWrapper<T> extends ComponentWrapper implements sqlops.TreeCom
 		this.properties = {};
 	}
 
-	public registerDataProvider<T>(dataProvider: sqlops.TreeComponentDataProvider<T>): vscode.TreeView<T> {
+	public registerDataProvider<T>(dataProvider: sqlops.TreeComponentDataProvider<T>): sqlops.TreeComponentView<T> {
 		this.setDataProvider();
 		return this._extHostModelViewTree.$createTreeView(this._handle, this.id, { treeDataProvider: dataProvider });
 	}

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

@@ -14,33 +14,32 @@ import { asWinJsPromise } from 'vs/base/common/async';
 import { IMainContext } from 'vs/workbench/api/node/extHost.protocol';
 import * as sqlops from 'sqlops';
 import * as  vsTreeExt from 'vs/workbench/api/node/extHostTreeViews';
+import { Emitter } from 'vs/base/common/event';
 
 export class ExtHostModelViewTreeViews implements ExtHostModelViewTreeViewsShape {
 	private _proxy: MainThreadModelViewShape;
 
 	private treeViews: Map<string, ExtHostTreeView<any>> = new Map<string, ExtHostTreeView<any>>();
 
-
 	constructor(
 		private _mainContext: IMainContext
 	) {
 		this._proxy = this._mainContext.getProxy(SqlMainContext.MainThreadModelView);
 	}
 
-	$createTreeView<T>(handle: number, componentId: string, options: { treeDataProvider: sqlops.TreeComponentDataProvider<T> }): vscode.TreeView<T> {
+	$createTreeView<T>(handle: number, componentId: string, options: { treeDataProvider: sqlops.TreeComponentDataProvider<T> }): sqlops.TreeComponentView<T> {
 		if (!options || !options.treeDataProvider) {
 			throw new Error('Options with treeDataProvider is mandatory');
 		}
 
 		const treeView = this.createExtHostTreeViewer(handle, componentId, options.treeDataProvider);
 		return {
-			reveal: (element: T, options?: { select?: boolean }): Thenable<void> => {
-				return treeView.reveal(element, options);
-			},
 			dispose: () => {
 				this.treeViews.delete(componentId);
 				treeView.dispose();
-			}
+			},
+			onNodeCheckedChanged: treeView.NodeCheckedChanged,
+			onDidChangeSelection: treeView.ChangeSelection
 		};
 	}
 
@@ -60,6 +59,13 @@ export class ExtHostModelViewTreeViews implements ExtHostModelViewTreeViewsShape
 		}
 	}
 
+	$onNodeSelected(treeViewId: string, handles: string[]): void {
+		const treeView = this.treeViews.get(treeViewId);
+		if (treeView) {
+			treeView.onNodeSelectedChanged(handles);
+		}
+	}
+
 	private createExtHostTreeViewer<T>(handle: number, id: string, dataProvider: sqlops.TreeComponentDataProvider<T>): ExtHostTreeView<T> {
 		const treeView = new ExtHostTreeView<T>(handle, id, dataProvider, this._proxy, undefined);
 		this.treeViews.set(`${handle}-${id}`, treeView);
@@ -69,6 +75,10 @@ export class ExtHostModelViewTreeViews implements ExtHostModelViewTreeViewsShape
 
 export class ExtHostTreeView<T> extends vsTreeExt.ExtHostTreeView<T> {
 
+	private _onNodeCheckedChanged = new Emitter<sqlops.NodeCheckedEventParameters<T>>();
+	private _onDidChangeSelection = new Emitter<T[]>();
+	public readonly NodeCheckedChanged: vscode.Event<sqlops.NodeCheckedEventParameters<T>> = this._onNodeCheckedChanged.event;
+	public readonly ChangeSelection: vscode.Event<T[]> = this._onDidChangeSelection.event;
 	constructor(private handle: number, private componentId: string, private componentDataProvider: sqlops.TreeComponentDataProvider<T>, private modelViewProxy: MainThreadModelViewShape, commands: CommandsConverter) {
 		super(componentId, componentDataProvider, undefined, commands);
 	}
@@ -79,7 +89,16 @@ export class ExtHostTreeView<T> extends vsTreeExt.ExtHostTreeView<T> {
 			console.error(`No tree item with id \'${parentHandle}\' found.`);
 		}
 
-		this.componentDataProvider.onNodeCheckedChanged(parentElement, checked);
+		this._onNodeCheckedChanged.fire({element: parentElement, checked: checked});
+	}
+
+	onNodeSelectedChanged(parentHandles?: vsTreeExt.TreeItemHandle[]): void {
+		if (parentHandles) {
+			let nodes = parentHandles.map(parentHandle => {
+				return  parentHandle ? this.getExtensionElement(parentHandle) : void 0;
+			});
+			this._onDidChangeSelection.fire(nodes);
+		}
 	}
 
 	reveal(element: T, options?: { select?: boolean }): TPromise<void> {

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

@@ -604,8 +604,9 @@ export interface ExtHostModelViewShape {
 
 export interface ExtHostModelViewTreeViewsShape {
 	$getChildren(treeViewId: string, treeItemHandle?: string): TPromise<ITreeComponentItem[]>;
-	$createTreeView(handle: number, componentId: string, options: { treeDataProvider: vscode.TreeDataProvider<any> }): vscode.TreeView<any>;
+	$createTreeView(handle: number, componentId: string, options: { treeDataProvider: vscode.TreeDataProvider<any> }): sqlops.TreeComponentView<any>;
 	$onNodeCheckedChanged(treeViewId: string, treeItemHandle?: string, checked?: boolean): void;
+	$onNodeSelected(treeViewId: string, nodes:  string[]): void;
 }
 
 export interface ExtHostBackgroundTaskManagementShape {

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

@@ -125,8 +125,7 @@ export class TreeViewDataProvider implements ITreeViewDataProvider {
 		}
 	}
 
-	// {{SQL CARBON EDIT}}
+	private postGetChildren(elements: ITreeItem[]): ITreeItem[] {
-	protected postGetChildren(elements: ITreeItem[]): ITreeItem[] {
 		const result = [];
 		if (elements) {
 			for (const element of elements) {