Fix dragging views across notebook

roblourens · roblourens · commit 25d0cdcb4249 · 2020-05-04T18:27:28.000-05:00
Fix microsoft#96678
diff --git a/src/vs/workbench/contrib/notebook/browser/media/notebook.css b/src/vs/workbench/contrib/notebook/browser/media/notebook.css
@@ -35,6 +35,10 @@
 	position: relative;
 }
 
+.monaco-workbench .part.editor > .content .notebook-editor.global-drag-active .webview {
+	pointer-events: none;
+}
+
 .monaco-workbench .part.editor > .content .notebook-editor .cell-list-container .webview-cover {
 	position: absolute;
 	top: 0;
@@ -459,13 +463,6 @@
 	color: inherit;
 }
 
-.notebook-webview {
-	position: absolute;
-	z-index: 1000000;
-	left: 373px;
-	top: 0px;
-}
-
 /* markdown */
 
 
diff --git a/src/vs/workbench/contrib/notebook/browser/notebookEditor.ts b/src/vs/workbench/contrib/notebook/browser/notebookEditor.ts
@@ -254,7 +254,7 @@ export class NotebookEditor extends BaseEditor implements INotebookEditor {
 	private createCellList(): void {
 		DOM.addClass(this.body, 'cell-list-container');
 
-		const dndController = new CellDragAndDropController(this);
+		const dndController = this._register(new CellDragAndDropController(this));
 		const renders = [
 			this.instantiationService.createInstance(CodeCellRenderer, this, this.renderedEditors, dndController),
 			this.instantiationService.createInstance(MarkdownCellRenderer, this.contextKeyService, this, dndController, this.renderedEditors),
diff --git a/src/vs/workbench/contrib/notebook/browser/view/renderers/cellRenderer.ts b/src/vs/workbench/contrib/notebook/browser/view/renderers/cellRenderer.ts
@@ -488,16 +488,31 @@ const DRAGGING_CLASS = 'cell-dragging';
 const DRAGOVER_TOP_CLASS = 'cell-dragover-top';
 const DRAGOVER_BOTTOM_CLASS = 'cell-dragover-bottom';
 
+const GLOBAL_DRAG_CLASS = 'global-drag-active';
+
 type DragImageProvider = () => HTMLElement;
 
-export class CellDragAndDropController {
+export class CellDragAndDropController extends Disposable {
 	// TODO@roblourens - should probably use dataTransfer here, but any dataTransfer set makes the editor think I am dropping a file, need
 	// to figure out how to prevent that
 	private currentDraggedCell: ICellViewModel | undefined;
 
 	constructor(
 		private readonly notebookEditor: INotebookEditor
-	) { }
+	) {
+		super();
+
+		this._register(domEvent(document.body, DOM.EventType.DRAG_START, true)(this.onGlobalDragStart.bind(this)));
+		this._register(domEvent(document.body, DOM.EventType.DRAG_END, true)(this.onGlobalDragEnd.bind(this)));
+	}
+
+	private onGlobalDragStart() {
+		this.notebookEditor.getDomNode().classList.add(GLOBAL_DRAG_CLASS);
+	}
+
+	private onGlobalDragEnd() {
+		this.notebookEditor.getDomNode().classList.remove(GLOBAL_DRAG_CLASS);
+	}
 
 	addListeners(templateData: BaseCellRenderTemplate, dragImageProvider: DragImageProvider): void {
 		const container = templateData.container;
@@ -511,17 +526,12 @@ export class CellDragAndDropController {
 		};
 
 		templateData.disposables.add(domEvent(dragHandle, DOM.EventType.DRAG_END)(() => {
-			// TODO@roblourens
-			(this.notebookEditor.getInnerWebview() as any)!.element.style['pointer-events'] = '';
-
 			// Note, templateData may have a different element rendered into it by now
 			container.classList.remove(DRAGGING_CLASS);
 			dragCleanup();
 		}));
 
 		templateData.disposables.add(domEvent(dragHandle, DOM.EventType.DRAG_START)(event => {
-			(this.notebookEditor.getInnerWebview() as any)!.element.style['pointer-events'] = 'none';
-
 			if (!event.dataTransfer) {
 				return;
 			}
