Added node selectdEvent (#2153)

* Added model view tree node selectedEvent
This commit is contained in:
Leila Lali
2018-08-06 13:19:37 -07:00
committed by GitHub
parent 8a01553c49
commit 9bf4a4b18c
11 changed files with 68 additions and 37 deletions

View File

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

View File

@@ -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) {

View File

@@ -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) {
(<ExtHostModelViewTreeViewsShape>this._proxy).$onNodeCheckedChanged(treeViewId, treeItemHandle, checked);
onNodeCheckedChanged(treeItemHandle?: string, checked?: boolean) {
(<ExtHostModelViewTreeViewsShape>this._proxy).$onNodeCheckedChanged(this.treeViewId, treeItemHandle, checked);
}
protected postGetChildren(elements: ITreeComponentItem[]): ITreeComponentItem[] {
const result = [];
if (elements) {
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);
}
onNodeSelected(items: ITreeComponentItem[]) {
if (items) {
(<ExtHostModelViewTreeViewsShape>this._proxy).$onNodeSelected(this.treeViewId, items.map(i => i.handle));
}
return result;
}
}

View File

@@ -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 {

View File

@@ -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 });
}

View File

@@ -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> {

View File

@@ -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 {