drag and drop visual feedback

src/vs/base/parts/composite/browser/compositeDnd.ts

@@ -20,4 +20,5 @@ export class CompositeDragAndDropData implements IDragAndDropData {
 
 export interface ICompositeDragAndDrop {
 	drop(data: IDragAndDropData, target: string | undefined, originalEvent: DragEvent): void;
+	onDragOver(data: IDragAndDropData, target: string | undefined, originalEvent: DragEvent): boolean;
 }

src/vs/workbench/browser/parts/compositeBar.ts

@@ -37,7 +37,7 @@ export class CompositeDragAndDrop implements ICompositeDragAndDrop {
 
 	constructor(
 		private viewDescriptorService: IViewDescriptorService,
-		private viewContainerLocation: ViewContainerLocation,
+		private targetContainerLocation: ViewContainerLocation,
 		private openComposite: (id: string, focus?: boolean) => void,
 		private moveComposite: (from: string, to: string) => void,
 		private getVisibleCompositeIds: () => string[]
@@ -50,7 +50,7 @@ export class CompositeDragAndDrop implements ICompositeDragAndDrop {
 			const currentContainer = viewContainerRegistry.get(dragData.id)!;
 			const currentLocation = viewContainerRegistry.getViewContainerLocation(currentContainer);
 			if (targetCompositeId) {
-				if (currentLocation !== this.viewContainerLocation && this.viewContainerLocation !== ViewContainerLocation.Panel) {
+				if (currentLocation !== this.targetContainerLocation && this.targetContainerLocation !== ViewContainerLocation.Panel) {
 					const destinationContainer = viewContainerRegistry.get(targetCompositeId);
 					if (destinationContainer) {
 						this.viewDescriptorService.moveViewsToContainer(this.viewDescriptorService.getViewDescriptors(currentContainer)!.allViewDescriptors.filter(vd => vd.canMoveView), destinationContainer);
@@ -66,16 +66,16 @@ export class CompositeDragAndDrop implements ICompositeDragAndDrop {
 				if (targetCompositeId) {
 					const destinationContainer = viewContainerRegistry.get(targetCompositeId);
 					if (destinationContainer) {
-						if (this.viewContainerLocation === ViewContainerLocation.Sidebar) {
+						if (this.targetContainerLocation === ViewContainerLocation.Sidebar) {
 							this.viewDescriptorService.moveViewsToContainer([viewDescriptor], destinationContainer);
 							this.openComposite(targetCompositeId, true);
 						} else {
-							this.viewDescriptorService.moveViewToLocation(viewDescriptor, this.viewContainerLocation);
+							this.viewDescriptorService.moveViewToLocation(viewDescriptor, this.targetContainerLocation);
 							this.moveComposite(this.viewDescriptorService.getViewContainer(viewDescriptor.id)!.id, targetCompositeId);
 						}
 					}
 				} else {
-					this.viewDescriptorService.moveViewToLocation(viewDescriptor, this.viewContainerLocation);
+					this.viewDescriptorService.moveViewToLocation(viewDescriptor, this.targetContainerLocation);
 					const newCompositeId = this.viewDescriptorService.getViewContainer(dragData.id)!.id;
 					const visibleItems = this.getVisibleCompositeIds();
 					const targetId = visibleItems.length ? visibleItems[visibleItems.length - 1] : undefined;
@@ -89,6 +89,55 @@ export class CompositeDragAndDrop implements ICompositeDragAndDrop {
 		}
 	}
 
+	onDragOver(data: CompositeDragAndDropData, targetCompositeId: string | undefined, originalEvent: DragEvent): boolean {
+		const dragData = data.getData();
+		const viewContainerRegistry = Registry.as<IViewContainersRegistry>(ViewContainerExtensions.ViewContainersRegistry);
+
+		if (dragData.type === 'composite') {
+			// Dragging a composite
+			const currentContainer = viewContainerRegistry.get(dragData.id)!;
+			const currentLocation = viewContainerRegistry.getViewContainerLocation(currentContainer);
+
+			// ... to the same location
+			if (currentLocation === this.targetContainerLocation) {
+				return true;
+			}
+
+			// ... across view containers but without a destination composite
+			if (!targetCompositeId) {
+				return false;
+			}
+
+			// ... from panel to the sidebar
+			if (this.targetContainerLocation === ViewContainerLocation.Sidebar) {
+				const destinationContainer = viewContainerRegistry.get(targetCompositeId);
+				return !!destinationContainer &&
+					this.viewDescriptorService.getViewDescriptors(currentContainer)!.allViewDescriptors.some(vd => vd.canMoveView);
+			}
+			// ... from sidebar to the panel
+			else {
+				return false;
+			}
+		} else {
+			// Dragging an individual view
+			const viewDescriptor = this.viewDescriptorService.getViewDescriptor(dragData.id);
+
+			// ... that cannot move
+			if (!viewDescriptor || !viewDescriptor.canMoveView) {
+				return false;
+			}
+
+			// ... to create a view container
+			if (!targetCompositeId) {
+				return this.targetContainerLocation === ViewContainerLocation.Panel;
+			}
+
+			// ... into a destination
+			return true;
+		}
+
+		return false;
+	}
 }
 
 export interface ICompositeBarOptions {
@@ -210,6 +259,36 @@ export class CompositeBar extends Widget implements ICompositeBar {
 			}
 		}));
 
+		this._register(addDisposableListener(parent, EventType.DRAG_OVER, (e: DragEvent) => {
+			if (this.compositeTransfer.hasData(DraggedCompositeIdentifier.prototype)) {
+				EventHelper.stop(e, true);
+
+				const data = this.compositeTransfer.getData(DraggedCompositeIdentifier.prototype);
+				if (Array.isArray(data)) {
+					const draggedCompositeId = data[0].id;
+
+					// Check if drop is allowed
+					if (e.dataTransfer && !this.options.dndHandler.onDragOver(new CompositeDragAndDropData('composite', draggedCompositeId), undefined, e)) {
+						e.dataTransfer.dropEffect = 'none';
+					}
+				}
+			}
+
+			if (this.compositeTransfer.hasData(DraggedViewIdentifier.prototype)) {
+				EventHelper.stop(e, true);
+
+				const data = this.compositeTransfer.getData(DraggedViewIdentifier.prototype);
+				if (Array.isArray(data)) {
+					const draggedViewId = data[0].id;
+
+					// Check if drop is allowed
+					if (e.dataTransfer && !this.options.dndHandler.onDragOver(new CompositeDragAndDropData('view', draggedViewId), undefined, e)) {
+						e.dataTransfer.dropEffect = 'none';
+					}
+				}
+			}
+		}));
+
 		return actionBarDiv;
 	}
 

src/vs/workbench/browser/parts/compositeBarActions.ts

@@ -549,6 +549,31 @@ export class CompositeActionViewItem extends ActivityActionViewItem {
 				}
 			},
 
+			onDragOver: e => {
+				dom.EventHelper.stop(e, true);
+				if (this.compositeTransfer.hasData(DraggedCompositeIdentifier.prototype)) {
+					const data = this.compositeTransfer.getData(DraggedCompositeIdentifier.prototype);
+					if (Array.isArray(data)) {
+						const draggedCompositeId = data[0].id;
+						if (draggedCompositeId !== this.activity.id) {
+							if (e.dataTransfer && !this.dndHandler.onDragOver(new CompositeDragAndDropData('composite', draggedCompositeId), this.activity.id, e)) {
+								e.dataTransfer.dropEffect = 'none';
+							}
+						}
+					}
+				}
+
+				if (this.compositeTransfer.hasData(DraggedViewIdentifier.prototype)) {
+					const data = this.compositeTransfer.getData(DraggedViewIdentifier.prototype);
+					if (Array.isArray(data)) {
+						const draggedViewId = data[0].id;
+						if (e.dataTransfer && !this.dndHandler.onDragOver(new CompositeDragAndDropData('view', draggedViewId), this.activity.id, e)) {
+							e.dataTransfer.dropEffect = 'none';
+						}
+					}
+				}
+			},
+
 			onDragLeave: e => {
 				if (this.compositeTransfer.hasData(DraggedCompositeIdentifier.prototype)) {
 					this.updateFromDragging(container, false);