mirror of
https://github.com/Microsoft/vscode
synced 2024-08-28 13:29:44 +00:00
Make cell collapse button draggable
This commit is contained in:
parent
b71eeb22b6
commit
acac3c214b
|
@ -309,11 +309,13 @@ export class CellDragAndDropController extends Disposable {
|
|||
this.setInsertIndicatorVisibility(false);
|
||||
}
|
||||
|
||||
registerDragHandle(templateData: BaseCellRenderTemplate, cellRoot: HTMLElement, dragHandle: HTMLElement, dragImageProvider: DragImageProvider): void {
|
||||
registerDragHandle(templateData: BaseCellRenderTemplate, cellRoot: HTMLElement, dragHandles: HTMLElement[], dragImageProvider: DragImageProvider): void {
|
||||
const container = templateData.container;
|
||||
dragHandle.setAttribute('draggable', 'true');
|
||||
for (const dragHandle of dragHandles) {
|
||||
dragHandle.setAttribute('draggable', 'true');
|
||||
}
|
||||
|
||||
templateData.templateDisposables.add(DOM.addDisposableListener(dragHandle, DOM.EventType.DRAG_END, () => {
|
||||
const onDragEnd = () => {
|
||||
if (!this.notebookEditor.notebookOptions.getLayoutConfiguration().dragAndDropEnabled || !!this.notebookEditor.isReadOnly) {
|
||||
return;
|
||||
}
|
||||
|
@ -321,9 +323,12 @@ export class CellDragAndDropController extends Disposable {
|
|||
// Note, templateData may have a different element rendered into it by now
|
||||
container.classList.remove(DRAGGING_CLASS);
|
||||
this.dragCleanup();
|
||||
}));
|
||||
};
|
||||
for (const dragHandle of dragHandles) {
|
||||
templateData.templateDisposables.add(DOM.addDisposableListener(dragHandle, DOM.EventType.DRAG_END, onDragEnd));
|
||||
}
|
||||
|
||||
templateData.templateDisposables.add(DOM.addDisposableListener(dragHandle, DOM.EventType.DRAG_START, event => {
|
||||
const onDragStart = (event: DragEvent) => {
|
||||
if (!event.dataTransfer) {
|
||||
return;
|
||||
}
|
||||
|
@ -341,7 +346,10 @@ export class CellDragAndDropController extends Disposable {
|
|||
setTimeout(() => cellRoot.parentElement!.removeChild(dragImage!), 0); // Comment this out to debug drag image layout
|
||||
|
||||
container.classList.add(DRAGGING_CLASS);
|
||||
}));
|
||||
};
|
||||
for (const dragHandle of dragHandles) {
|
||||
templateData.templateDisposables.add(DOM.addDisposableListener(dragHandle, DOM.EventType.DRAG_START, onDragStart));
|
||||
}
|
||||
}
|
||||
|
||||
public startExplicitDrag(cell: ICellViewModel, _dragOffsetY: number) {
|
||||
|
|
|
@ -13,8 +13,8 @@ import { MarkupCellViewModel } from 'vs/workbench/contrib/notebook/browser/viewM
|
|||
import { CellKind } from 'vs/workbench/contrib/notebook/common/notebookCommon';
|
||||
|
||||
export class CellFocusIndicator extends CellPart {
|
||||
private codeFocusIndicator: FastDomNode<HTMLElement>;
|
||||
private outputFocusIndicator: FastDomNode<HTMLElement>;
|
||||
public codeFocusIndicator: FastDomNode<HTMLElement>;
|
||||
public outputFocusIndicator: FastDomNode<HTMLElement>;
|
||||
|
||||
private currentElement: ICellViewModel | undefined;
|
||||
|
||||
|
|
|
@ -439,6 +439,7 @@ export class CodeCellRenderer extends AbstractCellRenderer implements IListRende
|
|||
this.notebookEditor));
|
||||
const betweenCellToolbar = templateDisposables.add(scopedInstaService.createInstance(BetweenCellToolbar, this.notebookEditor, titleToolbarContainer, bottomCellToolbarContainer));
|
||||
|
||||
const focusIndicatorPart = new CellFocusIndicator(this.notebookEditor, focusIndicatorTop, focusIndicatorLeft, focusIndicatorRight, focusIndicatorBottom);
|
||||
const templateData: CodeCellRenderTemplate = {
|
||||
rootContainer,
|
||||
editorPart,
|
||||
|
@ -450,7 +451,7 @@ export class CodeCellRenderer extends AbstractCellRenderer implements IListRende
|
|||
cellContainer,
|
||||
progressBar,
|
||||
statusBar,
|
||||
focusIndicator: new CellFocusIndicator(this.notebookEditor, focusIndicatorTop, focusIndicatorLeft, focusIndicatorRight, focusIndicatorBottom),
|
||||
focusIndicator: focusIndicatorPart,
|
||||
cellExecution: new CellExecutionPart(this.notebookEditor, executionOrderLabel),
|
||||
titleToolbar,
|
||||
betweenCellToolbar,
|
||||
|
@ -466,7 +467,10 @@ export class CodeCellRenderer extends AbstractCellRenderer implements IListRende
|
|||
|
||||
this.setupOutputCollapsedPart(templateData);
|
||||
|
||||
this.dndController?.registerDragHandle(templateData, rootContainer, focusIndicatorLeft.domNode, () => new CodeCellDragImageRenderer().getDragImage(templateData, templateData.editor, 'code'));
|
||||
// focusIndicatorLeft covers the left margin area
|
||||
// code/outputFocusIndicator need to be registered as drag handlers so their click handlers don't take over
|
||||
const dragHandles = [focusIndicatorLeft.domNode, focusIndicatorPart.codeFocusIndicator.domNode, focusIndicatorPart.outputFocusIndicator.domNode];
|
||||
this.dndController?.registerDragHandle(templateData, rootContainer, dragHandles, () => new CodeCellDragImageRenderer().getDragImage(templateData, templateData.editor, 'code'));
|
||||
|
||||
templateDisposables.add(this.addCollapseClickCollapseHandler(templateData));
|
||||
templateDisposables.add(DOM.addDisposableListener(focusSinkElement, DOM.EventType.FOCUS, () => {
|
||||
|
|
Loading…
Reference in a new issue