Finalize tree drag and drop API

Fixes #32592
This commit is contained in:
Alex Ross 2022-03-02 15:34:55 +01:00
parent 38c2e5860d
commit c468903ff7
No known key found for this signature in database
GPG key ID: 89DDDBA66CBA7840
7 changed files with 108 additions and 135 deletions

View file

@ -46,7 +46,6 @@
"textSearchProvider", "textSearchProvider",
"timeline", "timeline",
"tokenInformation", "tokenInformation",
"treeViewDragAndDrop",
"treeViewReveal", "treeViewReveal",
"workspaceTrust", "workspaceTrust",
"telemetry" "telemetry"

View file

@ -1303,8 +1303,8 @@ export function createApiFactoryAndRegisterActors(accessor: ServicesAccessor): I
TestTag: extHostTypes.TestTag, TestTag: extHostTypes.TestTag,
TestRunProfileKind: extHostTypes.TestRunProfileKind, TestRunProfileKind: extHostTypes.TestRunProfileKind,
TextSearchCompleteMessageType: TextSearchCompleteMessageType, TextSearchCompleteMessageType: TextSearchCompleteMessageType,
TreeDataTransfer: extHostTypes.TreeDataTransfer, DataTransfer: extHostTypes.DataTransfer,
TreeDataTransferItem: extHostTypes.TreeDataTransferItem, DataTransferItem: extHostTypes.DataTransferItem,
CoveredCount: extHostTypes.CoveredCount, CoveredCount: extHostTypes.CoveredCount,
FileCoverage: extHostTypes.FileCoverage, FileCoverage: extHostTypes.FileCoverage,
StatementCoverage: extHostTypes.StatementCoverage, StatementCoverage: extHostTypes.StatementCoverage,

View file

@ -50,7 +50,7 @@ function toTreeItemLabel(label: any, extension: IExtensionDescription): ITreeIte
export class ExtHostTreeViews implements ExtHostTreeViewsShape { export class ExtHostTreeViews implements ExtHostTreeViewsShape {
private treeViews: Map<string, ExtHostTreeView<any>> = new Map<string, ExtHostTreeView<any>>(); private treeViews: Map<string, ExtHostTreeView<any>> = new Map<string, ExtHostTreeView<any>>();
private treeDragAndDropService: ITreeViewsService<vscode.TreeDataTransfer, any, any> = new TreeviewsService<vscode.TreeDataTransfer, any, any>(); private treeDragAndDropService: ITreeViewsService<vscode.DataTransfer, any, any> = new TreeviewsService<vscode.DataTransfer, any, any>();
constructor( constructor(
private _proxy: MainThreadTreeViewsShape, private _proxy: MainThreadTreeViewsShape,
@ -296,10 +296,8 @@ class ExtHostTreeView<T> extends Disposable {
} }
this.dataProvider = options.treeDataProvider; this.dataProvider = options.treeDataProvider;
this.dndController = options.dragAndDropController; this.dndController = options.dragAndDropController;
if (this.dataProvider.onDidChangeTreeData2) { if (this.dataProvider.onDidChangeTreeData) {
this._register(this.dataProvider.onDidChangeTreeData2(elementOrElements => this._onDidChangeData.fire({ message: false, element: elementOrElements }))); this._register(this.dataProvider.onDidChangeTreeData(elementOrElements => this._onDidChangeData.fire({ message: false, element: elementOrElements })));
} else if (this.dataProvider.onDidChangeTreeData) {
this._register(this.dataProvider.onDidChangeTreeData(element => this._onDidChangeData.fire({ message: false, element })));
} }
let refreshingPromise: Promise<void> | null; let refreshingPromise: Promise<void> | null;
@ -433,7 +431,7 @@ class ExtHostTreeView<T> extends Disposable {
} }
} }
async handleDrag(sourceTreeItemHandles: TreeItemHandle[], treeDataTransfer: ITreeDataTransfer, token: CancellationToken): Promise<vscode.TreeDataTransfer | undefined> { async handleDrag(sourceTreeItemHandles: TreeItemHandle[], treeDataTransfer: ITreeDataTransfer, token: CancellationToken): Promise<vscode.DataTransfer | undefined> {
const extensionTreeItems: T[] = []; const extensionTreeItems: T[] = [];
for (const sourceHandle of sourceTreeItemHandles) { for (const sourceHandle of sourceTreeItemHandles) {
const extensionItem = this.getExtensionElement(sourceHandle); const extensionItem = this.getExtensionElement(sourceHandle);
@ -453,7 +451,7 @@ class ExtHostTreeView<T> extends Disposable {
return !!this.dndController?.handleDrag; return !!this.dndController?.handleDrag;
} }
async onDrop(treeDataTransfer: vscode.TreeDataTransfer, targetHandleOrNode: TreeItemHandle, token: CancellationToken): Promise<void> { async onDrop(treeDataTransfer: vscode.DataTransfer, targetHandleOrNode: TreeItemHandle, token: CancellationToken): Promise<void> {
const target = this.getExtensionElement(targetHandleOrNode); const target = this.getExtensionElement(targetHandleOrNode);
if (!target || !this.dndController?.handleDrop) { if (!target || !this.dndController?.handleDrop) {
return; return;

View file

@ -2349,7 +2349,7 @@ export enum TreeItemCollapsibleState {
} }
@es5ClassCompat @es5ClassCompat
export class TreeDataTransferItem { export class DataTransferItem {
async asString(): Promise<string> { async asString(): Promise<string> {
return typeof this.value === 'string' ? this.value : JSON.stringify(this.value); return typeof this.value === 'string' ? this.value : JSON.stringify(this.value);
} }
@ -2358,7 +2358,7 @@ export class TreeDataTransferItem {
} }
@es5ClassCompat @es5ClassCompat
export class TreeDataTransfer<T extends TreeDataTransferItem = TreeDataTransferItem> { export class DataTransfer<T extends DataTransferItem = DataTransferItem> {
private readonly _items: Map<string, T> = new Map(); private readonly _items: Map<string, T> = new Map();
get(mimeType: string): T | undefined { get(mimeType: string): T | undefined {
return this._items.get(mimeType); return this._items.get(mimeType);

View file

@ -57,7 +57,6 @@ export const allApiProposals = Object.freeze({
textSearchProvider: 'https://raw.githubusercontent.com/microsoft/vscode/main/src/vscode-dts/vscode.proposed.textSearchProvider.d.ts', textSearchProvider: 'https://raw.githubusercontent.com/microsoft/vscode/main/src/vscode-dts/vscode.proposed.textSearchProvider.d.ts',
timeline: 'https://raw.githubusercontent.com/microsoft/vscode/main/src/vscode-dts/vscode.proposed.timeline.d.ts', timeline: 'https://raw.githubusercontent.com/microsoft/vscode/main/src/vscode-dts/vscode.proposed.timeline.d.ts',
tokenInformation: 'https://raw.githubusercontent.com/microsoft/vscode/main/src/vscode-dts/vscode.proposed.tokenInformation.d.ts', tokenInformation: 'https://raw.githubusercontent.com/microsoft/vscode/main/src/vscode-dts/vscode.proposed.tokenInformation.d.ts',
treeViewDragAndDrop: 'https://raw.githubusercontent.com/microsoft/vscode/main/src/vscode-dts/vscode.proposed.treeViewDragAndDrop.d.ts',
treeViewReveal: 'https://raw.githubusercontent.com/microsoft/vscode/main/src/vscode-dts/vscode.proposed.treeViewReveal.d.ts', treeViewReveal: 'https://raw.githubusercontent.com/microsoft/vscode/main/src/vscode-dts/vscode.proposed.treeViewReveal.d.ts',
workspaceTrust: 'https://raw.githubusercontent.com/microsoft/vscode/main/src/vscode-dts/vscode.proposed.workspaceTrust.d.ts' workspaceTrust: 'https://raw.githubusercontent.com/microsoft/vscode/main/src/vscode-dts/vscode.proposed.workspaceTrust.d.ts'
}); });

View file

@ -9699,6 +9699,11 @@ declare module 'vscode' {
* array containing all selected tree items. * array containing all selected tree items.
*/ */
canSelectMany?: boolean; canSelectMany?: boolean;
/**
* An optional interface to implement drag and drop in the tree view.
*/
dragAndDropController?: TreeDragAndDropController<T>;
} }
/** /**
@ -9737,6 +9742,99 @@ declare module 'vscode' {
} }
/**
* A class for encapsulating data transferred during a drag and drop event.
*
* You can use the `value` of the `DataTransferItem` to get back the object you put into it
* so long as the extension that created the `DataTransferItem` runs in the same extension host.
*/
export class DataTransferItem {
asString(): Thenable<string>;
readonly value: any;
constructor(value: any);
}
/**
* A map containing a mapping of the mime type of the corresponding transferred data.
* Drag and drop controllers that implement `handleDrag` can additional mime types to the data transfer
* These additional mime types will only be included in the `handleDrop` when the the drag was initiated from
* an element in the same drag and drop controller.
*/
export class DataTransfer<T extends DataTransferItem = DataTransferItem> {
/**
* Retrieves the data transfer item for a given mime type.
* @param mimeType The mime type to get the data transfer item for.
*/
get(mimeType: string): T | undefined;
/**
* Sets a mime type to data transfer item mapping.
* @param mimeType The mime type to set the data for.
* @param value The data transfer item for the given mime type.
*/
set(mimeType: string, value: T): void;
/**
* Allows iteration through the data transfer items.
* @param callbackfn Callback for iteration through the data transfer items.
*/
forEach(callbackfn: (value: T, key: string) => void): void;
}
/**
* Provides support for drag and drop in `TreeView`.
*/
export interface TreeDragAndDropController<T> {
/**
* The mime types that the `handleDrop` method of this `DragAndDropController` supports.
* This could be well-defined, existing, mime types, and also mime types defined by the extension.
*
* Each tree will automatically support drops from it's own `DragAndDropController`. To support drops from other trees,
* you will need to add the mime type of that tree. The mime type of a tree is of the format `application/vnd.code.tree.treeidlowercase`.
*
* To learn the mime type of a dragged item:
* 1. Set up your `DragAndDropController`
* 2. Use the Developer: Set Log Level... command to set the level to "Debug"
* 3. Open the developer tools and drag the item with unknown mime type over your tree. The mime types will be logged to the developer console
*/
readonly dropMimeTypes: string[];
/**
* The mime types that the `handleDrag` method of this `TreeDragAndDropController` may add to the tree data transfer.
* This could be well-defined, existing, mime types, and also mime types defined by the extension.
*/
readonly dragMimeTypes: string[];
/**
* When the user starts dragging items from this `DragAndDropController`, `handleDrag` will be called.
* Extensions can use `handleDrag` to add their `DataTransferItem`s to the drag and drop.
*
* When the items are dropped on **another tree item** in **the same tree**, your `DataTransferItem` objects
* will be preserved. See the documentation for `DataTransferItem` for how best to take advantage of this.
*
* To add a data transfer item that can be dragged into the editor, use the application specific mime type "text/uri-list".
* The data for "text/uri-list" should be a string with `toString()`ed Uris separated by newlines. To specify a cursor position in the file,
* set the Uri's fragment to `L3,5`, where 3 is the line number and 5 is the column number.
*
* @param source The source items for the drag and drop operation.
* @param treeDataTransfer The data transfer associated with this drag.
* @param token A cancellation token indicating that drag has been cancelled.
*/
handleDrag?(source: T[], treeDataTransfer: DataTransfer, token: CancellationToken): Thenable<void> | void;
/**
* Called when a drag and drop action results in a drop on the tree that this `DragAndDropController` belongs too.
*
* Extensions should fire `TreeDataProvider.onDidChangeTreeData` for any elements that need to be refreshed.
*
* @param source The data transfer items of the source of the drag.
* @param target The target tree element that the drop is occurring on.
* @param token A cancellation token indicating that the drop has been cancelled.
*/
handleDrop?(target: T, source: DataTransfer, token: CancellationToken): Thenable<void> | void;
}
/** /**
* Represents a Tree view * Represents a Tree view
*/ */
@ -9814,7 +9912,7 @@ declare module 'vscode' {
* This will trigger the view to update the changed element/root and its children recursively (if shown). * This will trigger the view to update the changed element/root and its children recursively (if shown).
* To signal that root has changed, do not pass any argument or pass `undefined` or `null`. * To signal that root has changed, do not pass any argument or pass `undefined` or `null`.
*/ */
onDidChangeTreeData?: Event<T | undefined | null | void>; onDidChangeTreeData?: Event<T | T[] | undefined | null | void>;
/** /**
* Get {@link TreeItem} representation of the `element` * Get {@link TreeItem} representation of the `element`

View file

@ -1,121 +0,0 @@
/*---------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
declare module 'vscode' {
// https://github.com/microsoft/vscode/issues/32592
/**
* A data provider that provides tree data
*/
export interface TreeDataProvider<T> {
/**
* An optional event to signal that an element or root has changed.
* This will trigger the view to update the changed element/root and its children recursively (if shown).
* To signal that root has changed, do not pass any argument or pass `undefined` or `null`.
*/
onDidChangeTreeData2?: Event<T | T[] | undefined | null | void>;
}
export interface TreeViewOptions<T> {
/**
* An optional interface to implement drag and drop in the tree view.
*/
dragAndDropController?: TreeDragAndDropController<T>;
}
/**
* A class for encapsulating data transferred during a tree drag and drop event.
*
* If your `DragAndDropController` implements `handleDrag`, you can use the `value` of the `TreeDataTransferItem`
* to get back the object you put into it so long as the extension that created the `TreeDataTransferItem` runs in the same
* extension host.
*/
export class TreeDataTransferItem {
asString(): Thenable<string>;
readonly value: any;
constructor(value: any);
}
/**
* A map containing a mapping of the mime type of the corresponding transferred data.
* Trees that support drag and drop can implement `DragAndDropController.handleDrag` to add additional mime types
* when the drop occurs on an item in the same tree.
*/
export class TreeDataTransfer<T extends TreeDataTransferItem = TreeDataTransferItem> {
/**
* Retrieves the data transfer item for a given mime type.
* @param mimeType The mime type to get the data transfer item for.
*/
get(mimeType: string): T | undefined;
/**
* Sets a mime type to data transfer item mapping.
* @param mimeType The mime type to set the data for.
* @param value The data transfer item for the given mime type.
*/
set(mimeType: string, value: T): void;
/**
* Allows iteration through the data transfer items.
* @param callbackfn Callback for iteration through the data transfer items.
*/
forEach(callbackfn: (value: T, key: string) => void): void;
}
/**
* Provides support for drag and drop in `TreeView`.
*/
export interface TreeDragAndDropController<T> {
/**
* The mime types that the `handleDrop` method of this `DragAndDropController` supports.
* This could be well-defined, existing, mime types, and also mime types defined by the extension.
*
* Each tree will automatically support drops from it's own `DragAndDropController`. To support drops from other trees,
* you will need to add the mime type of that tree. The mime type of a tree is of the format `application/vnd.code.tree.treeidlowercase`.
*
* To learn the mime type of a dragged item:
* 1. Set up your `DragAndDropController`
* 2. Use the Developer: Set Log Level... command to set the level to "Debug"
* 3. Open the developer tools and drag the item with unknown mime type over your tree. The mime types will be logged to the developer console
*/
readonly dropMimeTypes: string[];
/**
* The mime types that the `handleDrag` method of this `TreeDragAndDropController` may add to the tree data transfer.
* This could be well-defined, existing, mime types, and also mime types defined by the extension.
*/
readonly dragMimeTypes: string[];
/**
* When the user starts dragging items from this `DragAndDropController`, `handleDrag` will be called.
* Extensions can use `handleDrag` to add their `TreeDataTransferItem`s to the drag and drop.
*
* When the items are dropped on **another tree item** in **the same tree**, your `TreeDataTransferItem` objects
* will be preserved. See the documentation for `TreeDataTransferItem` for how best to take advantage of this.
*
* To add a data transfer item that can be dragged into the editor, use the application specific mime type "text/uri-list".
* The data for "text/uri-list" should be a string with `toString()`ed Uris separated by newlines. To specify a cursor position in the file,
* set the Uri's fragment to `L3,5`, where 3 is the line number and 5 is the column number.
*
* @param source The source items for the drag and drop operation.
* @param treeDataTransfer The data transfer associated with this drag.
* @param token A cancellation token indicating that drag has been cancelled.
*/
handleDrag?(source: T[], treeDataTransfer: TreeDataTransfer, token: CancellationToken): Thenable<void> | void;
/**
* Called when a drag and drop action results in a drop on the tree that this `DragAndDropController` belongs too.
*
* Extensions should fire `TreeDataProvider.onDidChangeTreeData` for any elements that need to be refreshed.
*
* @param source The data transfer items of the source of the drag.
* @param target The target tree element that the drop is occurring on.
* @param token A cancellation token indicating that the drop has been cancelled.
*/
handleDrop?(target: T, source: TreeDataTransfer, token: CancellationToken): Thenable<void> | void;
}
}