Root folders drag and drop (microsoft#204153)

Author: benibenj

src/vs/workbench/contrib/files/browser/views/explorerViewer.ts

@@ -1103,7 +1103,7 @@ export class FileDragAndDrop implements ITreeDragAndDrop<ExplorerItem> {
 				const iconLabelName = getIconLabelNameFromHTMLElement(originalEvent.target);
 
 				if (iconLabelName && iconLabelName.index < iconLabelName.count - 1) {
-					const result = this.handleDragOver(data, compressedTarget, targetIndex, originalEvent);
+					const result = this.handleDragOver(data, compressedTarget, targetIndex, targetSector, originalEvent);
 
 					if (result) {
 						if (iconLabelName.element !== this.compressedDragOverElement) {
@@ -1127,10 +1127,10 @@ export class FileDragAndDrop implements ITreeDragAndDrop<ExplorerItem> {
 		}
 
 		this.compressedDropTargetDisposable.dispose();
-		return this.handleDragOver(data, target, targetIndex, originalEvent);
+		return this.handleDragOver(data, target, targetIndex, targetSector, originalEvent);
 	}
 
-	private handleDragOver(data: IDragAndDropData, target: ExplorerItem | undefined, targetIndex: number | undefined, originalEvent: DragEvent): boolean | ITreeDragOverReaction {
+	private handleDragOver(data: IDragAndDropData, target: ExplorerItem | undefined, targetIndex: number | undefined, targetSector: ListViewTargetSector | undefined, originalEvent: DragEvent): boolean | ITreeDragOverReaction {
 		const isCopy = originalEvent && ((originalEvent.ctrlKey && !isMacintosh) || (originalEvent.altKey && isMacintosh));
 		const isNative = data instanceof NativeDragAndDropData;
 		const effectType = (isNative || isCopy) ? ListDragOverEffectType.Copy : ListDragOverEffectType.Move;
@@ -1151,6 +1151,7 @@ export class FileDragAndDrop implements ITreeDragAndDrop<ExplorerItem> {
 		// In-Explorer DND
 		else {
 			const items = FileDragAndDrop.getStatsFromDragAndDropData(data as ElementsDragAndDropData<ExplorerItem, ExplorerItem[]>);
+			const isRootsReorder = items.every(item => item.isRoot);
 
 			if (!target) {
 				// Dropping onto the empty area. Do not accept if items dragged are already
@@ -1159,6 +1160,11 @@ export class FileDragAndDrop implements ITreeDragAndDrop<ExplorerItem> {
 					return false;
 				}
 
+				// root is added after last root folder when hovering on empty background
+				if (isRootsReorder) {
+					return { accept: true, effect: { type: ListDragOverEffectType.Move, position: ListDragOverEffectPosition.After } };
+				}
+
 				return { accept: true, bubble: TreeDragOverBubble.Down, effect, autoExpand: false };
 			}
 
@@ -1171,17 +1177,12 @@ export class FileDragAndDrop implements ITreeDragAndDrop<ExplorerItem> {
 			}
 
 			if (items.some((source) => {
-				if (source.isRoot && target instanceof ExplorerItem && !target.isRoot) {
-					return true; // Root folder can not be moved to a non root file stat.
+				if (source.isRoot) {
+					return false; // Root folders are handled seperately
 				}
 
 				if (this.uriIdentityService.extUri.isEqual(source.resource, target.resource)) {
-					return true; // Can not move anything onto itself
-				}
-
-				if (source.isRoot && target instanceof ExplorerItem && target.isRoot) {
-					// Disable moving workspace roots in one another
-					return false;
+					return true; // Can not move anything onto itself excpet for root folders
 				}
 
 				if (!isCopy && this.uriIdentityService.extUri.isEqual(dirname(source.resource), target.resource)) {
@@ -1196,6 +1197,24 @@ export class FileDragAndDrop implements ITreeDragAndDrop<ExplorerItem> {
 			})) {
 				return false;
 			}
+
+			// reordering roots
+			if (isRootsReorder) {
+				if (!target.isRoot) {
+					return false;
+				}
+
+				let dropEffectPosition: ListDragOverEffectPosition | undefined = undefined;
+				switch (targetSector) {
+					case ListViewTargetSector.TOP:
+					case ListViewTargetSector.CENTER_TOP:
+						dropEffectPosition = ListDragOverEffectPosition.Before; break;
+					case ListViewTargetSector.CENTER_BOTTOM:
+					case ListViewTargetSector.BOTTOM:
+						dropEffectPosition = ListDragOverEffectPosition.After; break;
+				}
+				return { accept: true, effect: { type: ListDragOverEffectType.Move, position: dropEffectPosition } };
+			}
 		}
 
 		// All (target = model)
@@ -1268,6 +1287,7 @@ export class FileDragAndDrop implements ITreeDragAndDrop<ExplorerItem> {
 		// Find parent to add to
 		if (!target) {
 			target = this.explorerService.roots[this.explorerService.roots.length - 1];
+			targetSector = ListViewTargetSector.BOTTOM;
 		}
 		if (!target.isDirectory && target.parent) {
 			target = target.parent;
@@ -1298,14 +1318,14 @@ export class FileDragAndDrop implements ITreeDragAndDrop<ExplorerItem> {
 
 			// In-Explorer DND (Move/Copy file)
 			else {
-				await this.handleExplorerDrop(data as ElementsDragAndDropData<ExplorerItem, ExplorerItem[]>, resolvedTarget, originalEvent);
+				await this.handleExplorerDrop(data as ElementsDragAndDropData<ExplorerItem, ExplorerItem[]>, resolvedTarget, targetIndex, targetSector, originalEvent);
 			}
 		} catch (error) {
 			this.dialogService.error(toErrorMessage(error));
 		}
 	}
 
-	private async handleExplorerDrop(data: ElementsDragAndDropData<ExplorerItem, ExplorerItem[]>, target: ExplorerItem, originalEvent: DragEvent): Promise<void> {
+	private async handleExplorerDrop(data: ElementsDragAndDropData<ExplorerItem, ExplorerItem[]>, target: ExplorerItem, targetIndex: number | undefined, targetSector: ListViewTargetSector | undefined, originalEvent: DragEvent): Promise<void> {
 		const elementsData = FileDragAndDrop.getStatsFromDragAndDropData(data);
 		const distinctItems = new Map(elementsData.map(element => [element, this.isCollapsed(element)]));
 
@@ -1353,7 +1373,7 @@ export class FileDragAndDrop implements ITreeDragAndDrop<ExplorerItem> {
 			}
 		}
 
-		await this.doHandleRootDrop(items.filter(s => s.isRoot), target);
+		await this.doHandleRootDrop(items.filter(s => s.isRoot), target, targetSector);
 
 		const sources = items.filter(s => !s.isRoot);
 		if (isCopy) {
@@ -1363,13 +1383,14 @@ export class FileDragAndDrop implements ITreeDragAndDrop<ExplorerItem> {
 		return this.doHandleExplorerDropOnMove(sources, target);
 	}
 
-	private async doHandleRootDrop(roots: ExplorerItem[], target: ExplorerItem): Promise<void> {
+	private async doHandleRootDrop(roots: ExplorerItem[], target: ExplorerItem, targetSector: ListViewTargetSector | undefined): Promise<void> {
 		if (roots.length === 0) {
 			return;
 		}
 
 		const folders = this.contextService.getWorkspace().folders;
 		let targetIndex: number | undefined;
+		const sourceIndices: number[] = [];
 		const workspaceCreationData: IWorkspaceFolderCreationData[] = [];
 		const rootsToMove: IWorkspaceFolderCreationData[] = [];
 
@@ -1378,10 +1399,20 @@ export class FileDragAndDrop implements ITreeDragAndDrop<ExplorerItem> {
 				uri: folders[index].uri,
 				name: folders[index].name
 			};
+
+			// Is current target
 			if (target instanceof ExplorerItem && this.uriIdentityService.extUri.isEqual(folders[index].uri, target.resource)) {
 				targetIndex = index;
 			}
 
+			// Is current source
+			for (const root of roots) {
+				if (this.uriIdentityService.extUri.isEqual(folders[index].uri, root.resource)) {
+					sourceIndices.push(index);
+					break;
+				}
+			}
+
 			if (roots.every(r => r.resource.toString() !== folders[index].uri.toString())) {
 				workspaceCreationData.push(data);
 			} else {
@@ -1390,6 +1421,20 @@ export class FileDragAndDrop implements ITreeDragAndDrop<ExplorerItem> {
 		}
 		if (targetIndex === undefined) {
 			targetIndex = workspaceCreationData.length;
+		} else {
+			switch (targetSector) {
+				case ListViewTargetSector.BOTTOM:
+				case ListViewTargetSector.CENTER_BOTTOM:
+					targetIndex++;
+					break;
+			}
+			// Adjust target index if source was located before target.
+			// The move will cause the index to change
+			for (const sourceIndex of sourceIndices) {
+				if (sourceIndex < targetIndex) {
+					targetIndex--;
+				}
+			}
 		}
 
 		workspaceCreationData.splice(targetIndex, 0, ...rootsToMove);