development/vscode
development/vscode
1
0
Fork 0
mirror of https://github.com/Microsoft/vscode synced 2024-08-28 13:29:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

Make cell collapse button draggable

Browse source
This commit is contained in:
Rob Lourens 2022-02-10 10:08:03 -08:00
parent b71eeb22b6
commit acac3c214b
3 changed files with 22 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
src/vs/workbench/contrib/notebook/browser/view/cellParts/cellDnd.ts
View file

@ -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) {

4
src/vs/workbench/contrib/notebook/browser/view/cellParts/cellFocusIndicator.ts
View file

@ -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;

8
src/vs/workbench/contrib/notebook/browser/view/renderers/cellRenderer.ts
View file

@ -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, () => {