diff --git a/src/vs/workbench/contrib/notebook/browser/media/notebook.css b/src/vs/workbench/contrib/notebook/browser/media/notebook.css index 7c2b8a9f405d8b570f94510a4ca3a47bc52d7e70..1a7895cefd86f8ec321dab5da72f38f1e2e31f44 100644 --- 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 index b0fb50cb39b917de4967fa0aca7cc8e49b159fb1..0810a25f9f2dd0d5c155c0fb23e79332d43d98b3 100644 --- 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 index 07330558136a8a670311274790cbb488e218e987..935914cb8867a6cd61338cb2bdf64936183c10bd 100644 --- 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; }