Fix check for presence of files in DnD. Fixes eclipse-theia#12404 (ec…

…lipse-theia#12409) Also clears "local transfers" when drag ends, preventing the items from a previous D&D operation to spill over to the next one. Contributed on behalf of STMicroelectronics Signed-off-by: Thomas Mäder <t.s.maeder@gmail.com> Co-authored-by: Tobias Ortmayr <tortmayr@eclipsesource.com>
jonah-iden · May 2, 2023 · 1dabb6f · 1dabb6f
1 parent ece1f44
commit 1dabb6f
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 1 deletion.
diff --git a/packages/plugin-ext/src/common/plugin-api-rpc.ts b/packages/plugin-ext/src/common/plugin-api-rpc.ts
@@ -761,6 +761,7 @@ export class DataTransferFileDTO {
 
 export interface TreeViewsExt {
     $dragStarted(treeViewId: string, treeItemIds: string[], token: CancellationToken): Promise<UriComponents[] | undefined>;
+    $dragEnd(treeViewId: string): Promise<void>;
     $drop(treeViewId: string, treeItemId: string | undefined, dataTransferItems: [string, string | DataTransferFileDTO][], token: CancellationToken): Promise<void>;
     $getChildren(treeViewId: string, treeItemId: string | undefined): Promise<TreeViewItem[] | undefined>;
     $hasResolveTreeItem(treeViewId: string): Promise<boolean>;

diff --git a/packages/plugin-ext/src/main/browser/view/tree-view-widget.tsx b/packages/plugin-ext/src/main/browser/view/tree-view-widget.tsx
@@ -632,13 +632,23 @@ export class TreeViewWidget extends TreeViewWelcomeWidget {
 
     handleDragEnd(node: TreeViewNode, event: React.DragEvent<HTMLElement>): void {
         this.applicationShell.clearAdditionalDraggedEditorUris();
+        this.model.proxy!.$dragEnd(this.id);
     }
 
     handleDragOver(event: React.DragEvent<HTMLElement>): void {
+        const hasFiles = (items: DataTransferItemList) => {
+            for (let i = 0; i < items.length; i++) {
+                if (items[i].kind === 'file') {
+                    return true;
+                }
+            }
+            return false;
+        };
+
         if (event.dataTransfer) {
             const canDrop = event.dataTransfer.types.some(type => this.options.dropMimeTypes!.includes(type)) ||
                 event.dataTransfer.types.includes(this.treeDragType) ||
-                this.options.dropMimeTypes!.includes('files') && event.dataTransfer.files.length > 0;
+                this.options.dropMimeTypes!.includes('files') && hasFiles(event.dataTransfer.items);
             if (canDrop) {
                 event.preventDefault();
                 event.dataTransfer.dropEffect = 'move';

diff --git a/packages/plugin-ext/src/plugin/tree/tree-views.ts b/packages/plugin-ext/src/plugin/tree/tree-views.ts
@@ -58,6 +58,10 @@ export class TreeViewsExtImpl implements TreeViewsExt {
         return this.getTreeView(treeViewId).onDragStarted(treeItemIds, token);
     }
 
+    $dragEnd(treeViewId: string): Promise<void> {
+        return this.getTreeView(treeViewId).dragEnd();
+    }
+
     $drop(treeViewId: string, treeItemId: string | undefined, dataTransferItems: [string, string | DataTransferFileDTO][], token: CancellationToken): Promise<void> {
         return this.getTreeView(treeViewId).handleDrop!(treeItemId, dataTransferItems, token);
     }
@@ -606,6 +610,10 @@ class TreeViewExtImpl<T> implements Disposable {
         return undefined;
     }
 
+    async dragEnd(): Promise<void> {
+        this.localDataTransfer.clear();
+    }
+
     async handleDrop(treeItemId: string | undefined, dataTransferItems: [string, string | DataTransferFileDTO][], token: CancellationToken): Promise<void> {
         const treeItem = treeItemId ? this.getElement(treeItemId) : undefined;
         const dropTransfer = new DataTransfer();