Update tree view sample with dnd proposal

This commit is contained in:
Alex Ross
2022-01-14 12:27:57 +01:00
parent e02887bb31
commit 1c7938db65
2 changed files with 24 additions and 14 deletions

View File

@ -20,7 +20,7 @@ class TestViewObjectTransferItem extends TestTreeDataTransferItem {
}
}
export class TestViewDragAndDrop implements vscode.TreeDataProvider<Node>, vscode.DragAndDropController<Node> {
export class TestViewDragAndDrop implements vscode.TreeDataProvider<Node>, vscode.TreeDragAndDropController<Node> {
supportedMimeTypes = ['text/treeitems'];
private _onDidChangeTreeData: vscode.EventEmitter<Node[] | undefined> = new vscode.EventEmitter<Node[] | undefined>();
// We want to use an array as the event type, so we use the proposed onDidChangeTreeData2.
@ -74,7 +74,7 @@ export class TestViewDragAndDrop implements vscode.TreeDataProvider<Node>, vscod
// Drag and drop controller
public async onDrop(sources: vscode.TreeDataTransfer, target: Node): Promise<void> {
public async handleDrop(sources: vscode.TreeDataTransfer, target: Node): Promise<void> {
const transferItem = sources.get('text/treeitems');
if (!transferItem || !(transferItem instanceof TestViewObjectTransferItem)) {
return;
@ -91,7 +91,7 @@ export class TestViewDragAndDrop implements vscode.TreeDataProvider<Node>, vscod
}
}
public async onWillDrop(source: Node[]): Promise<vscode.TreeDataTransfer> {
public async handleDrag(source: Node[]): Promise<vscode.TreeDataTransfer> {
const dataTransfer = new vscode.TreeDataTransfer<TestViewObjectTransferItem>();
dataTransfer.set('text/treeitems', new TestViewObjectTransferItem(source));
return dataTransfer;

View File

@ -23,13 +23,13 @@ declare module 'vscode' {
/**
* An optional interface to implement drag and drop in the tree view.
*/
dragAndDropController?: DragAndDropController<T>;
dragAndDropController?: TreeDragAndDropController<T>;
}
/**
* A class for encapsulating data transferred during a tree drag and drop event.
*
* If your `DragAndDropController` implements `onWillDrop`, you can extend `TreeDataTransferItem` and return
* If your `DragAndDropController` implements `handleDrag`, you can extend `TreeDataTransferItem` and return
* an instance of your new class for easy access to the source tree items.
*
* ```ts
@ -52,7 +52,7 @@ declare module 'vscode' {
/**
* A map containing a mapping of the mime type of the corresponding transferred data.
* Trees that support drag and drop can implement `DragAndDropController.onWillDrop` to add additional mime types
* 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> {
@ -79,24 +79,34 @@ declare module 'vscode' {
/**
* Provides support for drag and drop in `TreeView`.
*/
export interface DragAndDropController<T> extends Disposable {
export interface TreeDragAndDropController<T> {
/**
* The mime types that this `DragAndDropController` supports. This could be well-defined, existing, mime types,
* and also mime types defined by the extension that are returned in the `TreeDataTransfer` from `onWillDrop`.
* The mime types that the `drop` method of this `DragAndDropController` supports. This could be well-defined, existing, mime types,
* and also mime types defined by the extension that are returned in the `TreeDataTransfer` from `handleDrag`.
*
* 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 `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 supportedMimeTypes: string[];
/**
* When the user drops an item from this DragAndDropController on **another tree item** in **the same tree**,
* `onWillDrop` will be called with the dropped tree items. This is the DragAndDropController's opportunity to
* package the data from the dropped tree item into whatever format they want the target tree item to receive.
* 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.
*
* The returned `TreeDataTransfer` will be merged with the original`TreeDataTransfer` for the operation.
*
* @param source The source items for the drag and drop operation.
*/
onWillDrop(source: T[]): Thenable<TreeDataTransfer>;
handleDrag?(source: T[]): Thenable<TreeDataTransfer>;
/**
* Called when a drag and drop action results in a drop on the tree that this `DragAndDropController` belongs too.
@ -106,6 +116,6 @@ declare module 'vscode' {
* @param source The data transfer items of the source of the drag.
* @param target The target tree element that the drop is occuring on.
*/
onDrop(source: TreeDataTransfer, target: T): Thenable<void>;
handleDrop(source: TreeDataTransfer, target: T): Thenable<void> | void;
}
}