move layout constants to notebook options.
This commit is contained in:
rebornix
parent
05d4a5c56d
commit
d4e6b16a63
2
.vscode/notebooks/endgame.github-issues
vendored
2
.vscode/notebooks/endgame.github-issues
vendored
|
|
@ -7,7 +7,7 @@
|
|||
{
|
||||
"kind": 2,
|
||||
"language": "github-issues",
|
||||
"value": "$REPOS=repo:microsoft/vscode repo:microsoft/vscode-internalbacklog repo:microsoft/vscode-js-debug repo:microsoft/vscode-remote-release repo:microsoft/vscode-pull-request-github repo:microsoft/vscode-settings-sync-server repo:microsoft/vscode-emmet-helper repo:microsoft/vscode-remotehub\n\n$MILESTONE=milestone:\"April 2021\""
|
||||
"value": "$REPOS=repo:microsoft/vscode repo:microsoft/vscode-internalbacklog repo:microsoft/vscode-js-debug repo:microsoft/vscode-remote-release repo:microsoft/vscode-pull-request-github repo:microsoft/vscode-settings-sync-server repo:microsoft/vscode-emmet-helper repo:microsoft/vscode-remotehub\n\n$MILESTONE=milestone:\"May 2021\""
|
||||
},
|
||||
{
|
||||
"kind": 1,
|
||||
|
|
|
|||
|
|
@ -6,41 +6,3 @@
|
|||
// Scrollable Element
|
||||
|
||||
export const SCROLLABLE_ELEMENT_PADDING_TOP = 20;
|
||||
// export const SCROLLABLE_ELEMENT_PADDING_TOP_WITH_TOOLBAR = 8;
|
||||
|
||||
// Code cell layout:
|
||||
// [CODE_CELL_LEFT_MARGIN][CELL_RUN_GUTTER][editorWidth][CELL_RIGHT_MARGIN]
|
||||
|
||||
// Markdown cell layout:
|
||||
// [CELL_MARGIN][content][CELL_RIGHT_MARGIN]
|
||||
|
||||
// Markdown editor cell layout:
|
||||
// [CODE_CELL_LEFT_MARGIN][content][CELL_RIGHT_MARGIN]
|
||||
|
||||
// Cell sizing related
|
||||
export const CELL_RIGHT_MARGIN = 16;
|
||||
export const CELL_RUN_GUTTER = 28;
|
||||
export const CODE_CELL_LEFT_MARGIN = 32;
|
||||
|
||||
export const EDITOR_TOOLBAR_HEIGHT = 0;
|
||||
export const BOTTOM_CELL_TOOLBAR_GAP = 18;
|
||||
export const BOTTOM_CELL_TOOLBAR_HEIGHT = 22;
|
||||
export const CELL_STATUSBAR_HEIGHT = 22;
|
||||
|
||||
// Margin above editor
|
||||
export const CELL_TOP_MARGIN = 6;
|
||||
export const CELL_BOTTOM_MARGIN = 6;
|
||||
|
||||
export const MARKDOWN_CELL_TOP_MARGIN = 8;
|
||||
export const MARKDOWN_CELL_BOTTOM_MARGIN = 8;
|
||||
|
||||
// Top and bottom padding inside the monaco editor in a cell, which are included in `cell.editorHeight`
|
||||
// export const EDITOR_TOP_PADDING = 12;
|
||||
export const EDITOR_BOTTOM_PADDING = 4;
|
||||
export const EDITOR_BOTTOM_PADDING_WITHOUT_STATUSBAR = 12;
|
||||
|
||||
export const CELL_OUTPUT_PADDING = 14;
|
||||
|
||||
export const COLLAPSED_INDICATOR_HEIGHT = 24;
|
||||
|
||||
export const MARKDOWN_PREVIEW_PADDING = 8;
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@ import { IDiffEditorOptions, IEditorOptions } from 'vs/editor/common/config/edit
|
|||
import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
|
||||
import { DiffElementViewModelBase, getFormatedMetadataJSON, OUTPUT_EDITOR_HEIGHT_MAGIC, PropertyFoldingState, SideBySideDiffElementViewModel, SingleSideDiffElementViewModel } from 'vs/workbench/contrib/notebook/browser/diff/diffElementViewModel';
|
||||
import { CellDiffSideBySideRenderTemplate, CellDiffSingleSideRenderTemplate, DiffSide, DIFF_CELL_MARGIN, INotebookTextDiffEditor, NOTEBOOK_DIFF_CELL_PROPERTY, NOTEBOOK_DIFF_CELL_PROPERTY_EXPANDED } from 'vs/workbench/contrib/notebook/browser/diff/notebookDiffEditorBrowser';
|
||||
import { EDITOR_BOTTOM_PADDING } from 'vs/workbench/contrib/notebook/browser/constants';
|
||||
import { CodeEditorWidget, ICodeEditorWidgetOptions } from 'vs/editor/browser/widget/codeEditorWidget';
|
||||
import { DiffEditorWidget } from 'vs/editor/browser/widget/diffEditorWidget';
|
||||
import { IModelService } from 'vs/editor/common/services/modelService';
|
||||
|
|
@ -980,7 +979,7 @@ export class DeletedElement extends SingleSideDiffElement {
|
|||
const originalCell = this.cell.original!;
|
||||
const lineCount = originalCell.textModel.textBuffer.getLineCount();
|
||||
const lineHeight = this.notebookEditor.getLayoutInfo().fontInfo.lineHeight || 17;
|
||||
const editorHeight = lineCount * lineHeight + getEditorTopPadding() + EDITOR_BOTTOM_PADDING;
|
||||
const editorHeight = lineCount * lineHeight + getEditorTopPadding() + this.notebookEditor.notebookOptions.getLayoutConfiguration().editorBottomPadding;
|
||||
|
||||
this._editor = this.templateData.sourceEditor;
|
||||
this._editor.layout({
|
||||
|
|
@ -1131,7 +1130,7 @@ export class InsertElement extends SingleSideDiffElement {
|
|||
const modifiedCell = this.cell.modified!;
|
||||
const lineCount = modifiedCell.textModel.textBuffer.getLineCount();
|
||||
const lineHeight = this.notebookEditor.getLayoutInfo().fontInfo.lineHeight || 17;
|
||||
const editorHeight = lineCount * lineHeight + getEditorTopPadding() + EDITOR_BOTTOM_PADDING;
|
||||
const editorHeight = lineCount * lineHeight + getEditorTopPadding() + this.notebookEditor.notebookOptions.getLayoutConfiguration().editorBottomPadding;
|
||||
|
||||
this._editor = this.templateData.sourceEditor;
|
||||
this._editor.layout(
|
||||
|
|
@ -1469,7 +1468,7 @@ export class ModifiedElement extends AbstractElementRenderer {
|
|||
const modifiedCell = this.cell.modified!;
|
||||
const lineCount = modifiedCell.textModel.textBuffer.getLineCount();
|
||||
const lineHeight = this.notebookEditor.getLayoutInfo().fontInfo.lineHeight || 17;
|
||||
const editorHeight = this.cell.layoutInfo.editorHeight !== 0 ? this.cell.layoutInfo.editorHeight : lineCount * lineHeight + getEditorTopPadding() + EDITOR_BOTTOM_PADDING;
|
||||
const editorHeight = this.cell.layoutInfo.editorHeight !== 0 ? this.cell.layoutInfo.editorHeight : lineCount * lineHeight + getEditorTopPadding() + this.notebookEditor.notebookOptions.getLayoutConfiguration().editorBottomPadding;
|
||||
this._editorContainer = this.templateData.editorContainer;
|
||||
this._editor = this.templateData.sourceEditor;
|
||||
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@ import { ToolBar } from 'vs/base/browser/ui/toolbar/toolbar';
|
|||
import { OutputRenderer } from 'vs/workbench/contrib/notebook/browser/view/output/outputRenderer';
|
||||
import { IMouseWheelEvent } from 'vs/base/browser/mouseEvent';
|
||||
import { RawContextKey } from 'vs/platform/contextkey/common/contextkey';
|
||||
import { NotebookOptions } from 'vs/workbench/contrib/notebook/common/notebookOptions';
|
||||
|
||||
export enum DiffSide {
|
||||
Original = 0,
|
||||
|
|
@ -26,6 +27,7 @@ export interface IDiffCellInfo extends ICommonCellInfo {
|
|||
}
|
||||
|
||||
export interface INotebookTextDiffEditor extends ICommonNotebookEditor {
|
||||
notebookOptions: NotebookOptions;
|
||||
readonly textModel?: NotebookTextModel;
|
||||
onMouseUp: Event<{ readonly event: MouseEvent; readonly target: DiffElementViewModelBase; }>;
|
||||
onDidDynamicOutputRendered: Event<{ cell: IGenericCellViewModel, output: ICellOutputViewModel }>;
|
||||
|
|
|
|||
|
|
@ -38,9 +38,9 @@ import { generateUuid } from 'vs/base/common/uuid';
|
|||
import { IMouseWheelEvent, StandardMouseEvent } from 'vs/base/browser/mouseEvent';
|
||||
import { DiffNestedCellViewModel } from 'vs/workbench/contrib/notebook/browser/diff/diffNestedCellViewModel';
|
||||
import { BackLayerWebView } from 'vs/workbench/contrib/notebook/browser/view/renderers/backLayerWebView';
|
||||
import { CELL_OUTPUT_PADDING, MARKDOWN_PREVIEW_PADDING } from 'vs/workbench/contrib/notebook/browser/constants';
|
||||
import { NotebookDiffEditorEventDispatcher, NotebookDiffLayoutChangedEvent } from 'vs/workbench/contrib/notebook/browser/diff/eventDispatcher';
|
||||
import { readFontInfo } from 'vs/editor/browser/config/configuration';
|
||||
import { NotebookOptions } from 'vs/workbench/contrib/notebook/common/notebookOptions';
|
||||
|
||||
const $ = DOM.$;
|
||||
|
||||
|
|
@ -75,6 +75,12 @@ export class NotebookTextDiffEditor extends EditorPane implements INotebookTextD
|
|||
protected _onDidDynamicOutputRendered = new Emitter<{ cell: IGenericCellViewModel, output: ICellOutputViewModel }>();
|
||||
onDidDynamicOutputRendered = this._onDidDynamicOutputRendered.event;
|
||||
|
||||
private _notebookOptions = new NotebookOptions();
|
||||
|
||||
get notebookOptions() {
|
||||
return this._notebookOptions;
|
||||
}
|
||||
|
||||
private readonly _localStore = this._register(new DisposableStore());
|
||||
|
||||
private _isDisposed: boolean = false;
|
||||
|
|
@ -96,7 +102,6 @@ export class NotebookTextDiffEditor extends EditorPane implements INotebookTextD
|
|||
const editorOptions = this.configurationService.getValue<IEditorOptions>('editor');
|
||||
this._fontInfo = readFontInfo(BareFontInfo.createFromRawSettings(editorOptions, getZoomLevel(), getPixelRatio()));
|
||||
this._revealFirst = true;
|
||||
|
||||
this._outputRenderer = new OutputRenderer(this, this.instantiationService);
|
||||
}
|
||||
|
||||
|
|
@ -366,21 +371,19 @@ export class NotebookTextDiffEditor extends EditorPane implements INotebookTextD
|
|||
}));
|
||||
}
|
||||
|
||||
private readonly webviewOptions = {
|
||||
outputNodePadding: CELL_OUTPUT_PADDING,
|
||||
outputNodeLeftPadding: 32,
|
||||
previewNodePadding: MARKDOWN_PREVIEW_PADDING,
|
||||
leftMargin: 0,
|
||||
rightMargin: 0,
|
||||
runGutter: 0
|
||||
};
|
||||
|
||||
private async _createModifiedWebview(id: string, resource: URI): Promise<void> {
|
||||
if (this._modifiedWebview) {
|
||||
this._modifiedWebview.dispose();
|
||||
}
|
||||
|
||||
this._modifiedWebview = this.instantiationService.createInstance(BackLayerWebView, this, id, resource, this.webviewOptions) as BackLayerWebView<IDiffCellInfo>;
|
||||
this._modifiedWebview = this.instantiationService.createInstance(BackLayerWebView, this, id, resource, {
|
||||
outputNodePadding: this._notebookOptions.getLayoutConfiguration().cellOutputPadding, // CELL_OUTPUT_PADDING,
|
||||
outputNodeLeftPadding: 32,
|
||||
previewNodePadding: this._notebookOptions.getLayoutConfiguration().markdownPreviewPadding, // MARKDOWN_PREVIEW_PADDING,
|
||||
leftMargin: 0,
|
||||
rightMargin: 0,
|
||||
runGutter: 0
|
||||
}) as BackLayerWebView<IDiffCellInfo>;
|
||||
// attach the webview container to the DOM tree first
|
||||
this._list.rowsContainer.insertAdjacentElement('afterbegin', this._modifiedWebview.element);
|
||||
await this._modifiedWebview.createWebview();
|
||||
|
|
@ -393,7 +396,14 @@ export class NotebookTextDiffEditor extends EditorPane implements INotebookTextD
|
|||
this._originalWebview.dispose();
|
||||
}
|
||||
|
||||
this._originalWebview = this.instantiationService.createInstance(BackLayerWebView, this, id, resource, this.webviewOptions) as BackLayerWebView<IDiffCellInfo>;
|
||||
this._originalWebview = this.instantiationService.createInstance(BackLayerWebView, this, id, resource, {
|
||||
outputNodePadding: this._notebookOptions.getLayoutConfiguration().cellOutputPadding, // CELL_OUTPUT_PADDING,
|
||||
outputNodeLeftPadding: 32,
|
||||
previewNodePadding: this._notebookOptions.getLayoutConfiguration().markdownPreviewPadding, // MARKDOWN_PREVIEW_PADDING,
|
||||
leftMargin: 0,
|
||||
rightMargin: 0,
|
||||
runGutter: 0
|
||||
}) as BackLayerWebView<IDiffCellInfo>;
|
||||
// attach the webview container to the DOM tree first
|
||||
this._list.rowsContainer.insertAdjacentElement('afterbegin', this._originalWebview.element);
|
||||
await this._originalWebview.createWebview();
|
||||
|
|
|
|||
|
|
@ -31,6 +31,7 @@ import { IResourceEditorInput } from 'vs/platform/editor/common/editor';
|
|||
import { IConstructorSignature1 } from 'vs/platform/instantiation/common/instantiation';
|
||||
import { CellEditorStatusBar } from 'vs/workbench/contrib/notebook/browser/view/renderers/cellWidgets';
|
||||
import { INotebookWebviewMessage } from 'vs/workbench/contrib/notebook/browser/view/renderers/backLayerWebView';
|
||||
import { NotebookOptions } from 'vs/workbench/contrib/notebook/common/notebookOptions';
|
||||
|
||||
export const NOTEBOOK_EDITOR_ID = 'workbench.editor.notebook';
|
||||
export const NOTEBOOK_DIFF_EDITOR_ID = 'workbench.editor.notebookTextDiffEditor';
|
||||
|
|
@ -382,6 +383,7 @@ export interface INotebookEditor extends ICommonNotebookEditor {
|
|||
readonly onDidScroll: Event<void>;
|
||||
|
||||
readonly onDidChangeActiveCell: Event<void>;
|
||||
readonly notebookOptions: NotebookOptions;
|
||||
isDisposed: boolean;
|
||||
dispose(): void;
|
||||
|
||||
|
|
|
|||
|
|
@ -42,7 +42,6 @@ import { IEditorMemento } from 'vs/workbench/common/editor';
|
|||
import { Memento, MementoObject } from 'vs/workbench/common/memento';
|
||||
import { PANEL_BORDER } from 'vs/workbench/common/theme';
|
||||
import { debugIconStartForeground } from 'vs/workbench/contrib/debug/browser/debugColors';
|
||||
import { BOTTOM_CELL_TOOLBAR_GAP, BOTTOM_CELL_TOOLBAR_HEIGHT, CELL_BOTTOM_MARGIN, CELL_OUTPUT_PADDING, CELL_RIGHT_MARGIN, CELL_RUN_GUTTER, CELL_TOP_MARGIN, CODE_CELL_LEFT_MARGIN, COLLAPSED_INDICATOR_HEIGHT, MARKDOWN_CELL_BOTTOM_MARGIN, MARKDOWN_CELL_TOP_MARGIN, MARKDOWN_PREVIEW_PADDING, SCROLLABLE_ELEMENT_PADDING_TOP } from 'vs/workbench/contrib/notebook/browser/constants';
|
||||
import { CellEditState, CellFocusMode, IActiveNotebookEditor, ICellOutputViewModel, ICellViewModel, ICommonCellInfo, IDisplayOutputLayoutUpdateRequest, IFocusNotebookCellOptions, IGenericCellViewModel, IInsetRenderOutput, INotebookCellList, INotebookCellOutputLayoutInfo, INotebookDeltaDecoration, INotebookEditor, INotebookEditorContribution, INotebookEditorContributionDescription, INotebookEditorCreationOptions, INotebookEditorMouseEvent, NotebookEditorOptions, NotebookLayoutInfo, NOTEBOOK_EDITOR_EDITABLE, NOTEBOOK_EDITOR_FOCUSED, NOTEBOOK_EDITOR_ID, NOTEBOOK_OUTPUT_FOCUSED } from 'vs/workbench/contrib/notebook/browser/notebookBrowser';
|
||||
import { NotebookDecorationCSSRules, NotebookRefCountedStyleSheet } from 'vs/workbench/contrib/notebook/browser/notebookEditorDecorations';
|
||||
import { NotebookEditorExtensionsRegistry } from 'vs/workbench/contrib/notebook/browser/notebookEditorExtensions';
|
||||
|
|
@ -75,6 +74,8 @@ import { mark } from 'vs/workbench/contrib/notebook/common/notebookPerformance';
|
|||
import { readFontInfo } from 'vs/editor/browser/config/configuration';
|
||||
import { INotebookKernelService } from 'vs/workbench/contrib/notebook/common/notebookKernelService';
|
||||
import { NotebookEditorContextKeys } from 'vs/workbench/contrib/notebook/browser/notebookEditorWidgetContextKeys';
|
||||
import { NotebookOptions } from 'vs/workbench/contrib/notebook/common/notebookOptions';
|
||||
import { SCROLLABLE_ELEMENT_PADDING_TOP } from 'vs/workbench/contrib/notebook/browser/constants';
|
||||
|
||||
const $ = DOM.$;
|
||||
|
||||
|
|
@ -306,6 +307,11 @@ export class NotebookEditorWidget extends Disposable implements INotebookEditor
|
|||
|
||||
public readonly scopedContextKeyService: IContextKeyService;
|
||||
private readonly instantiationService: IInstantiationService;
|
||||
private readonly _notebookOptions: NotebookOptions;
|
||||
|
||||
get notebookOptions() {
|
||||
return this._notebookOptions;
|
||||
}
|
||||
|
||||
constructor(
|
||||
readonly creationOptions: INotebookEditorCreationOptions,
|
||||
|
|
@ -330,6 +336,7 @@ export class NotebookEditorWidget extends Disposable implements INotebookEditor
|
|||
this.isEmbedded = creationOptions.isEmbedded || false;
|
||||
|
||||
this.useRenderer = !isWeb && !!this.configurationService.getValue<boolean>(ExperimentalUseMarkdownRenderer) && !accessibilityService.isScreenReaderOptimized();
|
||||
this._notebookOptions = new NotebookOptions();
|
||||
|
||||
this._overlayContainer = document.createElement('div');
|
||||
this.scopedContextKeyService = contextKeyService.createScoped(this._overlayContainer);
|
||||
|
|
@ -547,15 +554,81 @@ export class NotebookEditorWidget extends Disposable implements INotebookEditor
|
|||
this._notebookTopToolbarContainer.style.display = 'none';
|
||||
DOM.append(parent, this._notebookTopToolbarContainer);
|
||||
this._body = document.createElement('div');
|
||||
this._body.classList.add('cell-list-container');
|
||||
this._createCellList();
|
||||
DOM.append(parent, this._body);
|
||||
this._body.classList.add('cell-list-container');
|
||||
this._createLayoutStyles();
|
||||
this._createCellList();
|
||||
|
||||
this._overflowContainer = document.createElement('div');
|
||||
this._overflowContainer.classList.add('notebook-overflow-widget-container', 'monaco-editor');
|
||||
DOM.append(parent, this._overflowContainer);
|
||||
}
|
||||
|
||||
private _createLayoutStyles(): void {
|
||||
const styleElement = DOM.createStyleSheet(this._body);
|
||||
const styleSheet = new NotebookRefCountedStyleSheet({
|
||||
removeEditorStyleSheets: (key) => {
|
||||
// this._editorStyleSheets.delete(key);
|
||||
if (key === 'notebook-layout-styles') {
|
||||
if (styleElement && styleElement.parentElement) {
|
||||
styleElement.parentElement.removeChild(styleElement);
|
||||
}
|
||||
}
|
||||
}
|
||||
}, 'notebook-layout-style', styleElement);
|
||||
styleSheet.ref();
|
||||
// Cell Margin
|
||||
|
||||
const cellRightMargin = this._notebookOptions.getLayoutConfiguration().cellRightMargin;
|
||||
const cellTopMargin = this._notebookOptions.getLayoutConfiguration().cellTopMargin;
|
||||
const cellRunGutter = this._notebookOptions.getLayoutConfiguration().cellRunGutter;
|
||||
const cellBottomMargin = this._notebookOptions.getLayoutConfiguration().cellBottomMargin;
|
||||
const codeCellLeftMargin = this._notebookOptions.getLayoutConfiguration().codeCellLeftMargin;
|
||||
const markdownCellBottomMargin = this._notebookOptions.getLayoutConfiguration().markdownCellBottomMargin;
|
||||
const markdownCellTopMargin = this._notebookOptions.getLayoutConfiguration().markdownCellTopMargin;
|
||||
const bottomCellToolbarGap = this._notebookOptions.getLayoutConfiguration().bottomCellToolbarGap;
|
||||
const bottomCellToolbarHeight = this._notebookOptions.getLayoutConfiguration().bottomCellToolbarHeight;
|
||||
const collapsedIndicatorHeight = this._notebookOptions.getLayoutConfiguration().collapsedIndicatorHeight;
|
||||
styleSheet.insertRule(`.notebookOverlay .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .markdown-cell-row div.cell.code { margin-left: ${codeCellLeftMargin}px; }`);
|
||||
styleSheet.insertRule(`.notebookOverlay .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .code-cell-row div.cell.code { margin-left: ${codeCellLeftMargin + cellRunGutter}px; }`);
|
||||
styleSheet.insertRule(`.notebookOverlay .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row div.cell { margin-right: ${cellRightMargin}px; }`);
|
||||
styleSheet.insertRule(`.notebookOverlay .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row > .cell-inner-container { padding-top: ${cellTopMargin}px; }`);
|
||||
styleSheet.insertRule(`.notebookOverlay .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .markdown-cell-row > .cell-inner-container { padding-bottom: ${markdownCellBottomMargin}px; padding-top: ${markdownCellTopMargin}px; }`);
|
||||
styleSheet.insertRule(`.notebookOverlay .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .markdown-cell-row > .cell-inner-container.webview-backed-markdown-cell { padding: 0; }`);
|
||||
styleSheet.insertRule(`.notebookOverlay .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .markdown-cell-row > .webview-backed-markdown-cell.markdown-cell-edit-mode .cell.code { padding-bottom: ${markdownCellBottomMargin}px; padding-top: ${markdownCellTopMargin}px; }`);
|
||||
styleSheet.insertRule(`.notebookOverlay .output { margin: 0px ${cellRightMargin}px 0px ${codeCellLeftMargin + cellRunGutter}px; }`);
|
||||
styleSheet.insertRule(`.notebookOverlay .output { width: calc(100% - ${codeCellLeftMargin + cellRunGutter + cellRightMargin}px); }`);
|
||||
|
||||
styleSheet.insertRule(`.notebookOverlay .output-show-more-container { margin: 0px ${cellRightMargin}px 0px ${codeCellLeftMargin + cellRunGutter}px; }`);
|
||||
styleSheet.insertRule(`.notebookOverlay .output-show-more-container { width: calc(100% - ${codeCellLeftMargin + cellRunGutter + cellRightMargin}px); }`);
|
||||
|
||||
styleSheet.insertRule(`.notebookOverlay .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row div.cell.markdown { padding-left: ${cellRunGutter}px; }`);
|
||||
styleSheet.insertRule(`.notebookOverlay .cell .run-button-container { width: 20px; left: ${codeCellLeftMargin + Math.floor(cellRunGutter - 20) / 2}px }`);
|
||||
styleSheet.insertRule(`.notebookOverlay .monaco-list .monaco-list-row :not(.webview-backed-markdown-cell) .cell-focus-indicator-top { height: ${cellTopMargin}px; }`);
|
||||
styleSheet.insertRule(`.notebookOverlay .monaco-list .monaco-list-row .cell-focus-indicator-side { bottom: ${bottomCellToolbarGap}px; }`);
|
||||
styleSheet.insertRule(`.notebookOverlay .monaco-list .monaco-list-row.code-cell-row .cell-focus-indicator-left,
|
||||
.notebookOverlay .monaco-list .monaco-list-row.code-cell-row .cell-drag-handle { width: ${codeCellLeftMargin + cellRunGutter}px; }`);
|
||||
styleSheet.insertRule(`.notebookOverlay .monaco-list .monaco-list-row.markdown-cell-row .cell-focus-indicator-left { width: ${codeCellLeftMargin}px; }`);
|
||||
styleSheet.insertRule(`.notebookOverlay .monaco-list .monaco-list-row .cell-focus-indicator.cell-focus-indicator-right { width: ${cellRightMargin}px; }`);
|
||||
styleSheet.insertRule(`.notebookOverlay .monaco-list .monaco-list-row .cell-focus-indicator-bottom { height: ${cellBottomMargin}px; }`);
|
||||
styleSheet.insertRule(`.notebookOverlay .monaco-list .monaco-list-row .cell-shadow-container-bottom { top: ${cellBottomMargin}px; }`);
|
||||
|
||||
styleSheet.insertRule(`.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .cell-collapsed-part { margin-left: ${codeCellLeftMargin + cellRunGutter}px; height: ${collapsedIndicatorHeight}px; }`);
|
||||
styleSheet.insertRule(`.notebookOverlay .cell-list-top-cell-toolbar-container { top: -${SCROLLABLE_ELEMENT_PADDING_TOP}px }`);
|
||||
|
||||
styleSheet.insertRule(`.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .cell-bottom-toolbar-container { height: ${bottomCellToolbarHeight}px }`);
|
||||
styleSheet.insertRule(`.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .cell-list-top-cell-toolbar-container { height: ${bottomCellToolbarHeight}px }`);
|
||||
|
||||
// left and right border margins
|
||||
styleSheet.insertRule(`
|
||||
.monaco-workbench .notebookOverlay .monaco-list .monaco-list-row.code-cell-row.focused .cell-focus-indicator-left:before,
|
||||
.monaco-workbench .notebookOverlay .monaco-list .monaco-list-row.code-cell-row.focused .cell-focus-indicator-right:before,
|
||||
.monaco-workbench .notebookOverlay .monaco-list.selection-multiple .monaco-list-row.code-cell-row.selected .cell-focus-indicator-left:before,
|
||||
.monaco-workbench .notebookOverlay .monaco-list.selection-multiple .monaco-list-row.code-cell-row.selected .cell-focus-indicator-right:before {
|
||||
top: -${cellTopMargin}px; height: calc(100% + ${cellTopMargin + cellBottomMargin}px)
|
||||
}`);
|
||||
}
|
||||
|
||||
private _createCellList(): void {
|
||||
this._body.classList.add('cell-list-container');
|
||||
|
||||
|
|
@ -1076,13 +1149,14 @@ export class NotebookEditorWidget extends Disposable implements INotebookEditor
|
|||
}
|
||||
|
||||
private async _createWebview(id: string, resource: URI): Promise<void> {
|
||||
const layoutConfiguration = this._notebookOptions.getLayoutConfiguration();
|
||||
this._webview = this.instantiationService.createInstance(BackLayerWebView, this, id, resource, {
|
||||
outputNodePadding: CELL_OUTPUT_PADDING,
|
||||
outputNodeLeftPadding: CELL_OUTPUT_PADDING,
|
||||
previewNodePadding: MARKDOWN_PREVIEW_PADDING,
|
||||
leftMargin: CODE_CELL_LEFT_MARGIN,
|
||||
rightMargin: CELL_RIGHT_MARGIN,
|
||||
runGutter: CELL_RUN_GUTTER,
|
||||
outputNodePadding: layoutConfiguration.cellOutputPadding, // CELL_OUTPUT_PADDING,
|
||||
outputNodeLeftPadding: layoutConfiguration.cellOutputPadding, // CELL_OUTPUT_PADDING,
|
||||
previewNodePadding: layoutConfiguration.markdownPreviewPadding, // MARKDOWN_PREVIEW_PADDING,
|
||||
leftMargin: layoutConfiguration.codeCellLeftMargin, // CODE_CELL_LEFT_MARGIN,
|
||||
rightMargin: layoutConfiguration.cellRightMargin, // CELL_RIGHT_MARGIN,
|
||||
runGutter: layoutConfiguration.cellRunGutter, // CELL_RUN_GUTTER,
|
||||
});
|
||||
this._webview.element.style.width = '100%';
|
||||
|
||||
|
|
@ -1093,7 +1167,7 @@ export class NotebookEditorWidget extends Disposable implements INotebookEditor
|
|||
private async _attachModel(textModel: NotebookTextModel, viewState: INotebookEditorViewState | undefined) {
|
||||
await this._createWebview(this.getId(), textModel.uri);
|
||||
|
||||
this._eventDispatcher = new NotebookEventDispatcher();
|
||||
this._eventDispatcher = new NotebookEventDispatcher(this._notebookOptions);
|
||||
this.viewModel = this.instantiationService.createInstance(NotebookViewModel, textModel.viewType, textModel, this._eventDispatcher, this.getLayoutInfo());
|
||||
this._eventDispatcher.emit([new NotebookLayoutChangedEvent({ width: true, fontInfo: true }, this.getLayoutInfo())]);
|
||||
|
||||
|
|
@ -2385,9 +2459,10 @@ export class NotebookEditorWidget extends Disposable implements INotebookEditor
|
|||
|
||||
updateMarkdownCellHeight(cellId: string, height: number, isInit: boolean) {
|
||||
const cell = this.getCellById(cellId);
|
||||
const layoutConfiguration = this._notebookOptions.getLayoutConfiguration();
|
||||
if (cell && cell instanceof MarkdownCellViewModel) {
|
||||
if (height + BOTTOM_CELL_TOOLBAR_GAP !== cell.layoutInfo.totalHeight) {
|
||||
this._debug('updateMarkdownCellHeight', cell.handle, height + BOTTOM_CELL_TOOLBAR_GAP, isInit);
|
||||
if (height + layoutConfiguration.bottomCellToolbarGap !== cell.layoutInfo.totalHeight) {
|
||||
this._debug('updateMarkdownCellHeight', cell.handle, height + layoutConfiguration.bottomCellToolbarGap, isInit);
|
||||
cell.renderedMarkdownHeight = height;
|
||||
}
|
||||
}
|
||||
|
|
@ -2822,43 +2897,5 @@ registerThemingParticipant((theme, collector) => {
|
|||
}`);
|
||||
}
|
||||
|
||||
// Cell Margin
|
||||
collector.addRule(`.notebookOverlay .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .markdown-cell-row div.cell.code { margin-left: ${CODE_CELL_LEFT_MARGIN}px; }`);
|
||||
collector.addRule(`.notebookOverlay .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .code-cell-row div.cell.code { margin-left: ${CODE_CELL_LEFT_MARGIN + CELL_RUN_GUTTER}px; }`);
|
||||
collector.addRule(`.notebookOverlay .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row div.cell { margin-right: ${CELL_RIGHT_MARGIN}px; }`);
|
||||
collector.addRule(`.notebookOverlay .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row > .cell-inner-container { padding-top: ${CELL_TOP_MARGIN}px; }`);
|
||||
collector.addRule(`.notebookOverlay .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .markdown-cell-row > .cell-inner-container { padding-bottom: ${MARKDOWN_CELL_BOTTOM_MARGIN}px; padding-top: ${MARKDOWN_CELL_TOP_MARGIN}px; }`);
|
||||
collector.addRule(`.notebookOverlay .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .markdown-cell-row > .cell-inner-container.webview-backed-markdown-cell { padding: 0; }`);
|
||||
collector.addRule(`.notebookOverlay .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .markdown-cell-row > .webview-backed-markdown-cell.markdown-cell-edit-mode .cell.code { padding-bottom: ${MARKDOWN_CELL_BOTTOM_MARGIN}px; padding-top: ${MARKDOWN_CELL_TOP_MARGIN}px; }`);
|
||||
collector.addRule(`.notebookOverlay .output { margin: 0px ${CELL_RIGHT_MARGIN}px 0px ${CODE_CELL_LEFT_MARGIN + CELL_RUN_GUTTER}px; }`);
|
||||
collector.addRule(`.notebookOverlay .output { width: calc(100% - ${CODE_CELL_LEFT_MARGIN + CELL_RUN_GUTTER + CELL_RIGHT_MARGIN}px); }`);
|
||||
|
||||
collector.addRule(`.notebookOverlay .output-show-more-container { margin: 0px ${CELL_RIGHT_MARGIN}px 0px ${CODE_CELL_LEFT_MARGIN + CELL_RUN_GUTTER}px; }`);
|
||||
collector.addRule(`.notebookOverlay .output-show-more-container { width: calc(100% - ${CODE_CELL_LEFT_MARGIN + CELL_RUN_GUTTER + CELL_RIGHT_MARGIN}px); }`);
|
||||
|
||||
collector.addRule(`.notebookOverlay .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row div.cell.markdown { padding-left: ${CELL_RUN_GUTTER}px; }`);
|
||||
collector.addRule(`.notebookOverlay .cell .run-button-container { width: 20px; left: ${CODE_CELL_LEFT_MARGIN + Math.floor(CELL_RUN_GUTTER - 20) / 2}px }`);
|
||||
collector.addRule(`.notebookOverlay .monaco-list .monaco-list-row :not(.webview-backed-markdown-cell) .cell-focus-indicator-top { height: ${CELL_TOP_MARGIN}px; }`);
|
||||
collector.addRule(`.notebookOverlay .monaco-list .monaco-list-row .cell-focus-indicator-side { bottom: ${BOTTOM_CELL_TOOLBAR_GAP}px; }`);
|
||||
collector.addRule(`.notebookOverlay .monaco-list .monaco-list-row.code-cell-row .cell-focus-indicator-left,
|
||||
.notebookOverlay .monaco-list .monaco-list-row.code-cell-row .cell-drag-handle { width: ${CODE_CELL_LEFT_MARGIN + CELL_RUN_GUTTER}px; }`);
|
||||
collector.addRule(`.notebookOverlay .monaco-list .monaco-list-row.markdown-cell-row .cell-focus-indicator-left { width: ${CODE_CELL_LEFT_MARGIN}px; }`);
|
||||
collector.addRule(`.notebookOverlay .monaco-list .monaco-list-row .cell-focus-indicator.cell-focus-indicator-right { width: ${CELL_RIGHT_MARGIN}px; }`);
|
||||
collector.addRule(`.notebookOverlay .monaco-list .monaco-list-row .cell-focus-indicator-bottom { height: ${CELL_BOTTOM_MARGIN}px; }`);
|
||||
collector.addRule(`.notebookOverlay .monaco-list .monaco-list-row .cell-shadow-container-bottom { top: ${CELL_BOTTOM_MARGIN}px; }`);
|
||||
|
||||
collector.addRule(`.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .cell-collapsed-part { margin-left: ${CODE_CELL_LEFT_MARGIN + CELL_RUN_GUTTER}px; height: ${COLLAPSED_INDICATOR_HEIGHT}px; }`);
|
||||
collector.addRule(`.notebookOverlay .cell-list-top-cell-toolbar-container { top: -${SCROLLABLE_ELEMENT_PADDING_TOP}px }`);
|
||||
|
||||
collector.addRule(`.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .cell-bottom-toolbar-container { height: ${BOTTOM_CELL_TOOLBAR_HEIGHT}px }`);
|
||||
collector.addRule(`.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .cell-list-top-cell-toolbar-container { height: ${BOTTOM_CELL_TOOLBAR_HEIGHT}px }`);
|
||||
|
||||
// left and right border margins
|
||||
collector.addRule(`
|
||||
.monaco-workbench .notebookOverlay .monaco-list .monaco-list-row.code-cell-row.focused .cell-focus-indicator-left:before,
|
||||
.monaco-workbench .notebookOverlay .monaco-list .monaco-list-row.code-cell-row.focused .cell-focus-indicator-right:before,
|
||||
.monaco-workbench .notebookOverlay .monaco-list.selection-multiple .monaco-list-row.code-cell-row.selected .cell-focus-indicator-left:before,
|
||||
.monaco-workbench .notebookOverlay .monaco-list.selection-multiple .monaco-list-row.code-cell-row.selected .cell-focus-indicator-right:before {
|
||||
top: -${CELL_TOP_MARGIN}px; height: calc(100% + ${CELL_TOP_MARGIN + CELL_BOTTOM_MARGIN}px)
|
||||
}`);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -9,7 +9,6 @@ import { domEvent } from 'vs/base/browser/event';
|
|||
import { Delayer } from 'vs/base/common/async';
|
||||
import { Disposable } from 'vs/base/common/lifecycle';
|
||||
import * as platform from 'vs/base/common/platform';
|
||||
import { BOTTOM_CELL_TOOLBAR_GAP } from 'vs/workbench/contrib/notebook/browser/constants';
|
||||
import { BaseCellRenderTemplate, expandCellRangesWithHiddenCells, ICellViewModel, INotebookCellList, INotebookEditor } from 'vs/workbench/contrib/notebook/browser/notebookBrowser';
|
||||
import { cloneNotebookCellTextModel } from 'vs/workbench/contrib/notebook/common/model/notebookCellTextModel';
|
||||
import { CellEditType, SelectionStateType } from 'vs/workbench/contrib/notebook/common/notebookCommon';
|
||||
|
|
@ -157,7 +156,8 @@ export class CellDragAndDropController extends Disposable {
|
|||
}
|
||||
|
||||
private updateInsertIndicator(dropDirection: string, insertionIndicatorAbsolutePos: number) {
|
||||
const insertionIndicatorTop = insertionIndicatorAbsolutePos - this.list.scrollTop + BOTTOM_CELL_TOOLBAR_GAP / 2;
|
||||
const layoutInfo = this.notebookEditor.notebookOptions.getLayoutConfiguration();
|
||||
const insertionIndicatorTop = insertionIndicatorAbsolutePos - this.list.scrollTop + layoutInfo.bottomCellToolbarGap / 2;
|
||||
if (insertionIndicatorTop >= 0) {
|
||||
this.listInsertionIndicator.style.top = `${insertionIndicatorTop}px`;
|
||||
this.setInsertIndicatorVisibility(true);
|
||||
|
|
@ -199,7 +199,8 @@ export class CellDragAndDropController extends Disposable {
|
|||
const cellTop = this.list.getAbsoluteTopOfElement(draggedOverCell);
|
||||
const cellHeight = this.list.elementHeight(draggedOverCell);
|
||||
const insertionIndicatorAbsolutePos = dropDirection === 'above' ? cellTop : cellTop + cellHeight;
|
||||
const insertionIndicatorTop = insertionIndicatorAbsolutePos - this.list.scrollTop + BOTTOM_CELL_TOOLBAR_GAP / 2;
|
||||
const layoutInfo = this.notebookEditor.notebookOptions.getLayoutConfiguration();
|
||||
const insertionIndicatorTop = insertionIndicatorAbsolutePos - this.list.scrollTop + layoutInfo.bottomCellToolbarGap / 2;
|
||||
const editorHeight = this.notebookEditor.getDomNode().getBoundingClientRect().height;
|
||||
if (insertionIndicatorTop < 0 || insertionIndicatorTop > editorHeight) {
|
||||
// Ignore drop, insertion point is off-screen
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@ import { Registry } from 'vs/platform/registry/common/platform';
|
|||
import { IConfigurationRegistry, Extensions as ConfigurationExtensions } from 'vs/platform/configuration/common/configurationRegistry';
|
||||
import { IEditorOptions, LineNumbersType } from 'vs/editor/common/config/editorOptions';
|
||||
import { IConfigurationService } from 'vs/platform/configuration/common/configuration';
|
||||
import { EDITOR_BOTTOM_PADDING, EDITOR_BOTTOM_PADDING_WITHOUT_STATUSBAR } from 'vs/workbench/contrib/notebook/browser/constants';
|
||||
import { EditorTopPaddingChangeEvent, getEditorTopPadding, getNotebookEditorFromEditorPane, ICellViewModel, NOTEBOOK_CELL_LINE_NUMBERS, NOTEBOOK_EDITOR_FOCUSED, NOTEBOOK_IS_ACTIVE_EDITOR } from 'vs/workbench/contrib/notebook/browser/notebookBrowser';
|
||||
import { ShowCellStatusBarKey } from 'vs/workbench/contrib/notebook/common/notebookCommon';
|
||||
import { localize } from 'vs/nls';
|
||||
|
|
@ -19,6 +18,7 @@ import { ServicesAccessor } from 'vs/platform/instantiation/common/instantiation
|
|||
import { IEditorService } from 'vs/workbench/services/editor/common/editorService';
|
||||
import { ContextKeyExpr } from 'vs/platform/contextkey/common/contextkey';
|
||||
import { NOTEBOOK_ACTIONS_CATEGORY } from 'vs/workbench/contrib/notebook/browser/contrib/coreActions';
|
||||
import { NotebookOptions } from 'vs/workbench/contrib/notebook/common/notebookOptions';
|
||||
|
||||
export class CellEditorOptions extends Disposable {
|
||||
|
||||
|
|
@ -48,7 +48,7 @@ export class CellEditorOptions extends Disposable {
|
|||
private readonly _onDidChange = new Emitter<IEditorOptions>();
|
||||
readonly onDidChange: Event<IEditorOptions> = this._onDidChange.event;
|
||||
|
||||
constructor(readonly configurationService: IConfigurationService, language: string) {
|
||||
constructor(readonly notebookOptions: NotebookOptions, readonly configurationService: IConfigurationService, language: string) {
|
||||
super();
|
||||
this._register(configurationService.onDidChangeConfiguration(e => {
|
||||
if (e.affectsConfiguration('editor') || e.affectsConfiguration('notebook') || e.affectsConfiguration(ShowCellStatusBarKey)) {
|
||||
|
|
@ -66,7 +66,9 @@ export class CellEditorOptions extends Disposable {
|
|||
const showCellStatusBar = configurationService.getValue<boolean>(ShowCellStatusBarKey);
|
||||
const editorPadding = {
|
||||
top: getEditorTopPadding(),
|
||||
bottom: showCellStatusBar ? EDITOR_BOTTOM_PADDING : EDITOR_BOTTOM_PADDING_WITHOUT_STATUSBAR
|
||||
bottom: showCellStatusBar
|
||||
? this.notebookOptions.getLayoutConfiguration().editorBottomPadding// EDITOR_BOTTOM_PADDING
|
||||
: this.notebookOptions.getLayoutConfiguration().editorBottomPaddingWithoutStatusBar // EDITOR_BOTTOM_PADDING_WITHOUT_STATUSBAR
|
||||
};
|
||||
|
||||
const renderLiNumbers = configurationService.getValue<'on' | 'off'>('notebook.lineNumbers') === 'on';
|
||||
|
|
|
|||
|
|
@ -35,7 +35,6 @@ import { IInstantiationService } from 'vs/platform/instantiation/common/instanti
|
|||
import { ServiceCollection } from 'vs/platform/instantiation/common/serviceCollection';
|
||||
import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
|
||||
import { INotificationService } from 'vs/platform/notification/common/notification';
|
||||
import { BOTTOM_CELL_TOOLBAR_GAP, CELL_BOTTOM_MARGIN, CELL_TOP_MARGIN, EDITOR_TOOLBAR_HEIGHT } from 'vs/workbench/contrib/notebook/browser/constants';
|
||||
import { DeleteCellAction, INotebookActionContext, INotebookCellActionContext } from 'vs/workbench/contrib/notebook/browser/contrib/coreActions';
|
||||
import { BaseCellRenderTemplate, CellEditState, CodeCellLayoutInfo, CodeCellRenderTemplate, EXPAND_CELL_INPUT_COMMAND_ID, ICellViewModel, INotebookEditor, isCodeCellRenderTemplate, MarkdownCellRenderTemplate } from 'vs/workbench/contrib/notebook/browser/notebookBrowser';
|
||||
import { CellContextKeyManager } from 'vs/workbench/contrib/notebook/browser/view/renderers/cellContextKeys';
|
||||
|
|
@ -100,7 +99,7 @@ abstract class AbstractCellRenderer {
|
|||
language: string,
|
||||
protected dndController: CellDragAndDropController | undefined,
|
||||
) {
|
||||
this.editorOptions = new CellEditorOptions(configurationService, language);
|
||||
this.editorOptions = new CellEditorOptions(notebookEditor.notebookOptions, configurationService, language);
|
||||
this.cellMenus = this.instantiationService.createInstance(CellMenus);
|
||||
}
|
||||
|
||||
|
|
@ -184,17 +183,18 @@ abstract class AbstractCellRenderer {
|
|||
this.notebookEditor.focus();
|
||||
}
|
||||
|
||||
const layoutInfo = this.notebookEditor.notebookOptions.getLayoutConfiguration();
|
||||
if (actions.primary.length || actions.secondary.length) {
|
||||
templateData.container.classList.add('cell-has-toolbar-actions');
|
||||
if (isCodeCellRenderTemplate(templateData)) {
|
||||
templateData.focusIndicatorLeft.style.top = `${EDITOR_TOOLBAR_HEIGHT + CELL_TOP_MARGIN}px`;
|
||||
templateData.focusIndicatorRight.style.top = `${EDITOR_TOOLBAR_HEIGHT + CELL_TOP_MARGIN}px`;
|
||||
templateData.focusIndicatorLeft.style.top = `${layoutInfo.editorToolbarHeight + layoutInfo.cellTopMargin}px`;
|
||||
templateData.focusIndicatorRight.style.top = `${layoutInfo.editorToolbarHeight + layoutInfo.cellTopMargin}px`;
|
||||
}
|
||||
} else {
|
||||
templateData.container.classList.remove('cell-has-toolbar-actions');
|
||||
if (isCodeCellRenderTemplate(templateData)) {
|
||||
templateData.focusIndicatorLeft.style.top = `${CELL_TOP_MARGIN}px`;
|
||||
templateData.focusIndicatorRight.style.top = `${CELL_TOP_MARGIN}px`;
|
||||
templateData.focusIndicatorLeft.style.top = `${layoutInfo.cellTopMargin}px`;
|
||||
templateData.focusIndicatorRight.style.top = `${layoutInfo.cellTopMargin}px`;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -467,7 +467,7 @@ export class MarkdownCellRenderer extends AbstractCellRenderer implements IListR
|
|||
}));
|
||||
|
||||
this.updateForHover(element, templateData);
|
||||
const cellEditorOptions = new CellEditorOptions(this.configurationService, 'markdown');
|
||||
const cellEditorOptions = new CellEditorOptions(this.notebookEditor.notebookOptions, this.configurationService, 'markdown');
|
||||
cellEditorOptions.setLineNumbers(element.lineNumbers);
|
||||
elementDisposables.add(cellEditorOptions);
|
||||
|
||||
|
|
@ -508,9 +508,9 @@ export class MarkdownCellRenderer extends AbstractCellRenderer implements IListR
|
|||
}
|
||||
|
||||
private updateForLayout(element: MarkdownCellViewModel, templateData: MarkdownCellRenderTemplate): void {
|
||||
templateData.focusIndicatorBottom.style.top = `${element.layoutInfo.totalHeight - BOTTOM_CELL_TOOLBAR_GAP - CELL_BOTTOM_MARGIN}px`;
|
||||
|
||||
const focusSideHeight = element.layoutInfo.totalHeight - BOTTOM_CELL_TOOLBAR_GAP;
|
||||
const layoutInfo = this.notebookEditor.notebookOptions.getLayoutConfiguration();
|
||||
templateData.focusIndicatorBottom.style.top = `${element.layoutInfo.totalHeight - layoutInfo.bottomCellToolbarGap - layoutInfo.cellBottomMargin}px`;
|
||||
const focusSideHeight = element.layoutInfo.totalHeight - layoutInfo.bottomCellToolbarGap;
|
||||
templateData.focusIndicatorLeft.style.height = `${focusSideHeight}px`;
|
||||
templateData.focusIndicatorRight.style.height = `${focusSideHeight}px`;
|
||||
}
|
||||
|
|
@ -879,12 +879,13 @@ export class CodeCellRenderer extends AbstractCellRenderer implements IListRende
|
|||
}
|
||||
|
||||
private updateForLayout(element: CodeCellViewModel, templateData: CodeCellRenderTemplate): void {
|
||||
const layoutInfo = this.notebookEditor.notebookOptions.getLayoutConfiguration();
|
||||
templateData.focusIndicatorLeft.style.height = `${element.layoutInfo.indicatorHeight}px`;
|
||||
templateData.focusIndicatorRight.style.height = `${element.layoutInfo.indicatorHeight}px`;
|
||||
templateData.focusIndicatorBottom.style.top = `${element.layoutInfo.totalHeight - BOTTOM_CELL_TOOLBAR_GAP - CELL_BOTTOM_MARGIN}px`;
|
||||
templateData.focusIndicatorBottom.style.top = `${element.layoutInfo.totalHeight - layoutInfo.bottomCellToolbarGap - layoutInfo.cellBottomMargin}px`;
|
||||
templateData.outputContainer.style.top = `${element.layoutInfo.outputContainerOffset}px`;
|
||||
templateData.outputShowMoreContainer.style.top = `${element.layoutInfo.outputShowMoreContainerOffset}px`;
|
||||
templateData.dragHandle.style.height = `${element.layoutInfo.totalHeight - BOTTOM_CELL_TOOLBAR_GAP}px`;
|
||||
templateData.dragHandle.style.height = `${element.layoutInfo.totalHeight - layoutInfo.bottomCellToolbarGap}px`;
|
||||
}
|
||||
|
||||
renderElement(element: CodeCellViewModel, index: number, templateData: CodeCellRenderTemplate, height: number | undefined): void {
|
||||
|
|
@ -938,7 +939,7 @@ export class CodeCellRenderer extends AbstractCellRenderer implements IListRende
|
|||
elementDisposables.add(this.instantiationService.createInstance(CodeCell, this.notebookEditor, element, templateData));
|
||||
this.renderedEditors.set(element, templateData.editor);
|
||||
|
||||
const cellEditorOptions = new CellEditorOptions(this.configurationService, element.language);
|
||||
const cellEditorOptions = new CellEditorOptions(this.notebookEditor.notebookOptions, this.configurationService, element.language);
|
||||
elementDisposables.add(cellEditorOptions);
|
||||
elementDisposables.add(cellEditorOptions.onDidChange(newValue => templateData.editor.updateOptions(newValue)));
|
||||
templateData.editor.updateOptions(cellEditorOptions.value);
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@ import { Disposable, IDisposable } from 'vs/base/common/lifecycle';
|
|||
import { IDimension } from 'vs/editor/common/editorCommon';
|
||||
import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
|
||||
import { IOpenerService } from 'vs/platform/opener/common/opener';
|
||||
import { EDITOR_BOTTOM_PADDING } from 'vs/workbench/contrib/notebook/browser/constants';
|
||||
import { CellFocusMode, CodeCellRenderTemplate, getEditorTopPadding, IActiveNotebookEditor } from 'vs/workbench/contrib/notebook/browser/notebookBrowser';
|
||||
import { CellOutputContainer } from 'vs/workbench/contrib/notebook/browser/view/renderers/cellOutput';
|
||||
import { ClickTargetType } from 'vs/workbench/contrib/notebook/browser/view/renderers/cellWidgets';
|
||||
|
|
@ -41,7 +40,7 @@ export class CodeCell extends Disposable {
|
|||
const lineNum = this.viewCell.lineCount;
|
||||
const lineHeight = this.viewCell.layoutInfo.fontInfo?.lineHeight || 17;
|
||||
const editorHeight = this.viewCell.layoutInfo.editorHeight === 0
|
||||
? lineNum * lineHeight + getEditorTopPadding() + EDITOR_BOTTOM_PADDING
|
||||
? lineNum * lineHeight + getEditorTopPadding() + this.notebookEditor.notebookOptions.getLayoutConfiguration().editorBottomPadding // EDITOR_BOTTOM_PADDING
|
||||
: this.viewCell.layoutInfo.editorHeight;
|
||||
|
||||
this.layoutEditor(
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@ import { Disposable, DisposableStore, IDisposable, MutableDisposable, toDisposab
|
|||
import { CodeEditorWidget } from 'vs/editor/browser/widget/codeEditorWidget';
|
||||
import { IEditorOptions } from 'vs/editor/common/config/editorOptions';
|
||||
import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
|
||||
import { EDITOR_BOTTOM_PADDING } from 'vs/workbench/contrib/notebook/browser/constants';
|
||||
import { CellEditState, CellFocusMode, MarkdownCellRenderTemplate, ICellViewModel, getEditorTopPadding, IActiveNotebookEditor } from 'vs/workbench/contrib/notebook/browser/notebookBrowser';
|
||||
import { CellFoldingState } from 'vs/workbench/contrib/notebook/browser/contrib/fold/foldingModel';
|
||||
import { MarkdownCellViewModel } from 'vs/workbench/contrib/notebook/browser/viewModel/markdownCellViewModel';
|
||||
|
|
@ -295,7 +294,7 @@ export class StatefulMarkdownCell extends Disposable {
|
|||
const width = this.viewCell.layoutInfo.editorWidth;
|
||||
const lineNum = this.viewCell.lineCount;
|
||||
const lineHeight = this.viewCell.layoutInfo.fontInfo?.lineHeight || 17;
|
||||
editorHeight = Math.max(lineNum, 1) * lineHeight + getEditorTopPadding() + EDITOR_BOTTOM_PADDING;
|
||||
editorHeight = Math.max(lineNum, 1) * lineHeight + getEditorTopPadding() + this.notebookEditor.notebookOptions.getLayoutConfiguration().editorBottomPadding;
|
||||
|
||||
this.templateData.editorContainer.innerText = '';
|
||||
|
||||
|
|
|
|||
|
|
@ -12,12 +12,12 @@ import { IPosition } from 'vs/editor/common/core/position';
|
|||
import * as editorCommon from 'vs/editor/common/editorCommon';
|
||||
import * as model from 'vs/editor/common/model';
|
||||
import { SearchParams } from 'vs/editor/common/model/textModelSearch';
|
||||
import { CELL_STATUSBAR_HEIGHT } from 'vs/workbench/contrib/notebook/browser/constants';
|
||||
import { CellEditState, CellFocusMode, CursorAtBoundary, CellViewModelStateChangeEvent, IEditableCellViewModel, INotebookCellDecorationOptions, getEditorTopPadding } from 'vs/workbench/contrib/notebook/browser/notebookBrowser';
|
||||
import { CellKind, INotebookSearchOptions, ShowCellStatusBarKey, INotebookCellStatusBarItem } from 'vs/workbench/contrib/notebook/common/notebookCommon';
|
||||
import { NotebookCellTextModel } from 'vs/workbench/contrib/notebook/common/model/notebookCellTextModel';
|
||||
import { IConfigurationService } from 'vs/platform/configuration/common/configuration';
|
||||
import { IResolvedTextEditorModel, ITextModelService } from 'vs/editor/common/services/resolverService';
|
||||
import { NotebookEventDispatcher } from 'vs/workbench/contrib/notebook/browser/viewModel/eventDispatcher';
|
||||
|
||||
export abstract class BaseCellViewModel extends Disposable {
|
||||
|
||||
|
|
@ -129,6 +129,7 @@ export abstract class BaseCellViewModel extends Disposable {
|
|||
readonly viewType: string,
|
||||
readonly model: NotebookCellTextModel,
|
||||
public id: string,
|
||||
private readonly _eventDispatcher: NotebookEventDispatcher,
|
||||
private readonly _configurationService: IConfigurationService,
|
||||
private readonly _modelService: ITextModelService,
|
||||
) {
|
||||
|
|
@ -151,7 +152,7 @@ export abstract class BaseCellViewModel extends Disposable {
|
|||
|
||||
getEditorStatusbarHeight() {
|
||||
const showCellStatusBar = this._configurationService.getValue<boolean>(ShowCellStatusBarKey);
|
||||
return showCellStatusBar ? CELL_STATUSBAR_HEIGHT : 0;
|
||||
return showCellStatusBar ? this._eventDispatcher.notebookOptions.getLayoutConfiguration().cellStatusBarHeight : 0;
|
||||
}
|
||||
|
||||
abstract hasDynamicHeight(): boolean;
|
||||
|
|
|
|||
|
|
@ -9,7 +9,6 @@ import * as editorCommon from 'vs/editor/common/editorCommon';
|
|||
import { ITextModelService } from 'vs/editor/common/services/resolverService';
|
||||
import { PrefixSumComputer } from 'vs/editor/common/viewModel/prefixSumComputer';
|
||||
import { IConfigurationService } from 'vs/platform/configuration/common/configuration';
|
||||
import { BOTTOM_CELL_TOOLBAR_GAP, BOTTOM_CELL_TOOLBAR_HEIGHT, CELL_BOTTOM_MARGIN, CELL_RIGHT_MARGIN, CELL_RUN_GUTTER, CELL_TOP_MARGIN, CODE_CELL_LEFT_MARGIN, COLLAPSED_INDICATOR_HEIGHT, EDITOR_BOTTOM_PADDING, EDITOR_TOOLBAR_HEIGHT } from 'vs/workbench/contrib/notebook/browser/constants';
|
||||
import { CellEditState, CellFindMatch, CodeCellLayoutChangeEvent, CodeCellLayoutInfo, CodeCellLayoutState, getEditorTopPadding, ICellOutputViewModel, ICellViewModel, NotebookLayoutInfo } from 'vs/workbench/contrib/notebook/browser/notebookBrowser';
|
||||
import { CellOutputViewModel } from 'vs/workbench/contrib/notebook/browser/viewModel/cellOutputViewModel';
|
||||
import { NotebookEventDispatcher } from 'vs/workbench/contrib/notebook/browser/viewModel/eventDispatcher';
|
||||
|
|
@ -101,7 +100,7 @@ export class CodeCellViewModel extends BaseCellViewModel implements ICellViewMod
|
|||
@INotebookService private readonly _notebookService: INotebookService,
|
||||
@ITextModelService modelService: ITextModelService,
|
||||
) {
|
||||
super(viewType, model, UUID.generateUuid(), configurationService, modelService);
|
||||
super(viewType, model, UUID.generateUuid(), eventDispatcher, configurationService, modelService);
|
||||
this._outputViewModels = this.model.outputs.map(output => new CellOutputViewModel(this, output, this._notebookService));
|
||||
|
||||
this._register(this.model.onDidChangeOutputs((splices) => {
|
||||
|
|
@ -145,14 +144,18 @@ export class CodeCellViewModel extends BaseCellViewModel implements ICellViewMod
|
|||
}
|
||||
|
||||
private computeEditorWidth(outerWidth: number): number {
|
||||
return outerWidth - (CODE_CELL_LEFT_MARGIN + CELL_RUN_GUTTER + CELL_RIGHT_MARGIN);
|
||||
return outerWidth - (
|
||||
this.eventDispatcher.notebookOptions.getLayoutConfiguration().codeCellLeftMargin // CODE_CELL_LEFT_MARGIN
|
||||
+ this.eventDispatcher.notebookOptions.getLayoutConfiguration().cellRunGutter // CELL_RUN_GUTTER
|
||||
+ this.eventDispatcher.notebookOptions.getLayoutConfiguration().cellRightMargin // CELL_RIGHT_MARGIN
|
||||
);
|
||||
}
|
||||
|
||||
layoutChange(state: CodeCellLayoutChangeEvent, source?: string) {
|
||||
// recompute
|
||||
this._ensureOutputsTop();
|
||||
const outputShowMoreContainerHeight = state.outputShowMoreContainerHeight ? state.outputShowMoreContainerHeight : this._layoutInfo.outputShowMoreContainerHeight;
|
||||
let outputTotalHeight = Math.max(this._outputMinHeight, this.metadata?.outputCollapsed ? COLLAPSED_INDICATOR_HEIGHT : this._outputsTop!.getTotalValue());
|
||||
let outputTotalHeight = Math.max(this._outputMinHeight, this.metadata?.outputCollapsed ? this.eventDispatcher.notebookOptions.getLayoutConfiguration().collapsedIndicatorHeight : this._outputsTop!.getTotalValue());
|
||||
|
||||
if (!this.metadata?.inputCollapsed) {
|
||||
let newState: CodeCellLayoutState;
|
||||
|
|
@ -176,9 +179,17 @@ export class CodeCellViewModel extends BaseCellViewModel implements ICellViewMod
|
|||
|
||||
const statusbarHeight = this.getEditorStatusbarHeight();
|
||||
const indicatorHeight = editorHeight + statusbarHeight + outputTotalHeight + outputShowMoreContainerHeight;
|
||||
const outputContainerOffset = EDITOR_TOOLBAR_HEIGHT + CELL_TOP_MARGIN + editorHeight + statusbarHeight;
|
||||
const outputShowMoreContainerOffset = totalHeight - BOTTOM_CELL_TOOLBAR_GAP - BOTTOM_CELL_TOOLBAR_HEIGHT / 2 - outputShowMoreContainerHeight;
|
||||
const bottomToolbarOffset = totalHeight - BOTTOM_CELL_TOOLBAR_GAP - BOTTOM_CELL_TOOLBAR_HEIGHT / 2;
|
||||
const outputContainerOffset = this.eventDispatcher.notebookOptions.getLayoutConfiguration().editorToolbarHeight
|
||||
+ this.eventDispatcher.notebookOptions.getLayoutConfiguration().cellTopMargin // CELL_TOP_MARGIN
|
||||
+ editorHeight
|
||||
+ statusbarHeight;
|
||||
const outputShowMoreContainerOffset = totalHeight
|
||||
- this.eventDispatcher.notebookOptions.getLayoutConfiguration().bottomCellToolbarGap
|
||||
- this.eventDispatcher.notebookOptions.getLayoutConfiguration().bottomCellToolbarHeight / 2
|
||||
- outputShowMoreContainerHeight;
|
||||
const bottomToolbarOffset = totalHeight
|
||||
- this.eventDispatcher.notebookOptions.getLayoutConfiguration().bottomCellToolbarGap
|
||||
- this.eventDispatcher.notebookOptions.getLayoutConfiguration().bottomCellToolbarHeight / 2;
|
||||
const editorWidth = state.outerWidth !== undefined ? this.computeEditorWidth(state.outerWidth) : this._layoutInfo?.editorWidth;
|
||||
|
||||
this._layoutInfo = {
|
||||
|
|
@ -196,11 +207,22 @@ export class CodeCellViewModel extends BaseCellViewModel implements ICellViewMod
|
|||
};
|
||||
} else {
|
||||
outputTotalHeight = Math.max(this._outputMinHeight, this.metadata?.inputCollapsed && this.metadata.outputCollapsed ? 0 : outputTotalHeight);
|
||||
const indicatorHeight = COLLAPSED_INDICATOR_HEIGHT + outputTotalHeight + outputShowMoreContainerHeight;
|
||||
const outputContainerOffset = CELL_TOP_MARGIN + COLLAPSED_INDICATOR_HEIGHT;
|
||||
const totalHeight = CELL_TOP_MARGIN + COLLAPSED_INDICATOR_HEIGHT + CELL_BOTTOM_MARGIN + BOTTOM_CELL_TOOLBAR_GAP + outputTotalHeight + outputShowMoreContainerHeight;
|
||||
const outputShowMoreContainerOffset = totalHeight - BOTTOM_CELL_TOOLBAR_GAP - BOTTOM_CELL_TOOLBAR_HEIGHT / 2 - outputShowMoreContainerHeight;
|
||||
const bottomToolbarOffset = totalHeight - BOTTOM_CELL_TOOLBAR_GAP - BOTTOM_CELL_TOOLBAR_HEIGHT / 2;
|
||||
const indicatorHeight = this.eventDispatcher.notebookOptions.getLayoutConfiguration().collapsedIndicatorHeight + outputTotalHeight + outputShowMoreContainerHeight;
|
||||
|
||||
const outputContainerOffset = this.eventDispatcher.notebookOptions.getLayoutConfiguration().cellTopMargin + this.eventDispatcher.notebookOptions.getLayoutConfiguration().collapsedIndicatorHeight;
|
||||
const totalHeight =
|
||||
this.eventDispatcher.notebookOptions.getLayoutConfiguration().cellTopMargin
|
||||
+ this.eventDispatcher.notebookOptions.getLayoutConfiguration().collapsedIndicatorHeight
|
||||
+ this.eventDispatcher.notebookOptions.getLayoutConfiguration().cellBottomMargin //CELL_BOTTOM_MARGIN
|
||||
+ this.eventDispatcher.notebookOptions.getLayoutConfiguration().bottomCellToolbarGap //BOTTOM_CELL_TOOLBAR_GAP
|
||||
+ outputTotalHeight + outputShowMoreContainerHeight;
|
||||
const outputShowMoreContainerOffset = totalHeight
|
||||
- this.eventDispatcher.notebookOptions.getLayoutConfiguration().bottomCellToolbarGap
|
||||
- this.eventDispatcher.notebookOptions.getLayoutConfiguration().bottomCellToolbarHeight / 2
|
||||
- outputShowMoreContainerHeight;
|
||||
const bottomToolbarOffset = totalHeight
|
||||
- this.eventDispatcher.notebookOptions.getLayoutConfiguration().bottomCellToolbarGap
|
||||
- this.eventDispatcher.notebookOptions.getLayoutConfiguration().bottomCellToolbarHeight / 2;
|
||||
const editorWidth = state.outerWidth !== undefined ? this.computeEditorWidth(state.outerWidth) : this._layoutInfo?.editorWidth;
|
||||
|
||||
this._layoutInfo = {
|
||||
|
|
@ -282,11 +304,21 @@ export class CodeCellViewModel extends BaseCellViewModel implements ICellViewMod
|
|||
}
|
||||
|
||||
const verticalScrollbarHeight = hasScrolling ? 12 : 0; // take zoom level into account
|
||||
return this.lineCount * lineHeight + getEditorTopPadding() + EDITOR_BOTTOM_PADDING + verticalScrollbarHeight;
|
||||
return this.lineCount * lineHeight
|
||||
+ getEditorTopPadding()
|
||||
+ this.eventDispatcher.notebookOptions.getLayoutConfiguration().editorBottomPadding // EDITOR_BOTTOM_PADDING
|
||||
+ verticalScrollbarHeight;
|
||||
}
|
||||
|
||||
private computeTotalHeight(editorHeight: number, outputsTotalHeight: number, outputShowMoreContainerHeight: number): number {
|
||||
return EDITOR_TOOLBAR_HEIGHT + CELL_TOP_MARGIN + editorHeight + this.getEditorStatusbarHeight() + outputsTotalHeight + outputShowMoreContainerHeight + BOTTOM_CELL_TOOLBAR_GAP + CELL_BOTTOM_MARGIN;
|
||||
return this.eventDispatcher.notebookOptions.getLayoutConfiguration().editorToolbarHeight //EDITOR_TOOLBAR_HEIGHT
|
||||
+ this.eventDispatcher.notebookOptions.getLayoutConfiguration().cellTopMargin // CELL_TOP_MARGIN
|
||||
+ editorHeight
|
||||
+ this.getEditorStatusbarHeight()
|
||||
+ outputsTotalHeight
|
||||
+ outputShowMoreContainerHeight
|
||||
+ this.eventDispatcher.notebookOptions.getLayoutConfiguration().bottomCellToolbarGap //BOTTOM_CELL_TOOLBAR_GAP
|
||||
+ this.eventDispatcher.notebookOptions.getLayoutConfiguration().cellBottomMargin; // CELL_BOTTOM_MARGIN;
|
||||
}
|
||||
|
||||
protected onDidChangeTextModelContent(): void {
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
import { Emitter } from 'vs/base/common/event';
|
||||
import { NotebookDocumentMetadata } from 'vs/workbench/contrib/notebook/common/notebookCommon';
|
||||
import { NotebookLayoutChangeEvent, NotebookLayoutInfo, CellViewModelStateChangeEvent, ICellViewModel } from 'vs/workbench/contrib/notebook/browser/notebookBrowser';
|
||||
import { NotebookOptions } from 'vs/workbench/contrib/notebook/common/notebookOptions';
|
||||
|
||||
export enum NotebookViewEventType {
|
||||
LayoutChanged = 1,
|
||||
|
|
@ -49,7 +50,7 @@ export class NotebookEventDispatcher {
|
|||
protected readonly _onDidChangeCellState = new Emitter<NotebookCellStateChangedEvent>();
|
||||
readonly onDidChangeCellState = this._onDidChangeCellState.event;
|
||||
|
||||
constructor() {
|
||||
constructor(readonly notebookOptions: NotebookOptions) {
|
||||
}
|
||||
|
||||
emit(events: NotebookViewEvent[]) {
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@ import * as UUID from 'vs/base/common/uuid';
|
|||
import * as editorCommon from 'vs/editor/common/editorCommon';
|
||||
import * as nls from 'vs/nls';
|
||||
import { IConfigurationService } from 'vs/platform/configuration/common/configuration';
|
||||
import { BOTTOM_CELL_TOOLBAR_GAP, BOTTOM_CELL_TOOLBAR_HEIGHT, CODE_CELL_LEFT_MARGIN, COLLAPSED_INDICATOR_HEIGHT, MARKDOWN_CELL_BOTTOM_MARGIN, MARKDOWN_CELL_TOP_MARGIN, CELL_RIGHT_MARGIN } from 'vs/workbench/contrib/notebook/browser/constants';
|
||||
import { EditorFoldingStateDelegate } from 'vs/workbench/contrib/notebook/browser/contrib/fold/foldingModel';
|
||||
import { CellEditState, CellFindMatch, ICellOutputViewModel, ICellViewModel, MarkdownCellLayoutChangeEvent, MarkdownCellLayoutInfo, NotebookLayoutInfo } from 'vs/workbench/contrib/notebook/browser/notebookBrowser';
|
||||
import { MarkdownRenderer } from 'vs/editor/browser/core/markdownRenderer';
|
||||
|
|
@ -29,7 +28,7 @@ export class MarkdownCellViewModel extends BaseCellViewModel implements ICellVie
|
|||
|
||||
set renderedMarkdownHeight(newHeight: number) {
|
||||
if (this.getEditState() === CellEditState.Preview) {
|
||||
const newTotalHeight = newHeight + BOTTOM_CELL_TOOLBAR_GAP;
|
||||
const newTotalHeight = newHeight + this.eventDispatcher.notebookOptions.getLayoutConfiguration().bottomCellToolbarGap; // BOTTOM_CELL_TOOLBAR_GAP;
|
||||
this.totalHeight = newTotalHeight;
|
||||
}
|
||||
}
|
||||
|
|
@ -48,7 +47,11 @@ export class MarkdownCellViewModel extends BaseCellViewModel implements ICellVie
|
|||
set editorHeight(newHeight: number) {
|
||||
this._editorHeight = newHeight;
|
||||
|
||||
this.totalHeight = this._editorHeight + MARKDOWN_CELL_TOP_MARGIN + MARKDOWN_CELL_BOTTOM_MARGIN + BOTTOM_CELL_TOOLBAR_GAP + this.getEditorStatusbarHeight();
|
||||
this.totalHeight = this._editorHeight
|
||||
+ this.eventDispatcher.notebookOptions.getLayoutConfiguration().markdownCellTopMargin // MARKDOWN_CELL_TOP_MARGIN
|
||||
+ this.eventDispatcher.notebookOptions.getLayoutConfiguration().markdownCellBottomMargin // MARKDOWN_CELL_BOTTOM_MARGIN
|
||||
+ this.eventDispatcher.notebookOptions.getLayoutConfiguration().bottomCellToolbarGap // BOTTOM_CELL_TOOLBAR_GAP
|
||||
+ this.getEditorStatusbarHeight();
|
||||
}
|
||||
|
||||
get editorHeight() {
|
||||
|
|
@ -107,13 +110,13 @@ export class MarkdownCellViewModel extends BaseCellViewModel implements ICellVie
|
|||
@IConfigurationService configurationService: IConfigurationService,
|
||||
@ITextModelService textModelService: ITextModelService,
|
||||
) {
|
||||
super(viewType, model, UUID.generateUuid(), configurationService, textModelService);
|
||||
super(viewType, model, UUID.generateUuid(), eventDispatcher, configurationService, textModelService);
|
||||
|
||||
this._layoutInfo = {
|
||||
editorHeight: 0,
|
||||
fontInfo: initialNotebookLayoutInfo?.fontInfo || null,
|
||||
editorWidth: initialNotebookLayoutInfo?.width ? this.computeEditorWidth(initialNotebookLayoutInfo.width) : 0,
|
||||
bottomToolbarOffset: BOTTOM_CELL_TOOLBAR_GAP,
|
||||
bottomToolbarOffset: this.eventDispatcher.notebookOptions.getLayoutConfiguration().bottomCellToolbarGap, // BOTTOM_CELL_TOOLBAR_GAP,
|
||||
totalHeight: 0
|
||||
};
|
||||
|
||||
|
|
@ -145,7 +148,9 @@ export class MarkdownCellViewModel extends BaseCellViewModel implements ICellVie
|
|||
}
|
||||
|
||||
private computeEditorWidth(outerWidth: number) {
|
||||
return outerWidth - CODE_CELL_LEFT_MARGIN - CELL_RIGHT_MARGIN;
|
||||
return outerWidth
|
||||
- this.eventDispatcher.notebookOptions.getLayoutConfiguration().codeCellLeftMargin // CODE_CELL_LEFT_MARGIN
|
||||
- this.eventDispatcher.notebookOptions.getLayoutConfiguration().cellRightMargin; // CELL_RIGHT_MARGIN;
|
||||
}
|
||||
|
||||
layoutChange(state: MarkdownCellLayoutChangeEvent) {
|
||||
|
|
@ -159,19 +164,28 @@ export class MarkdownCellViewModel extends BaseCellViewModel implements ICellVie
|
|||
fontInfo: state.font || this._layoutInfo.fontInfo,
|
||||
editorWidth,
|
||||
editorHeight: this._editorHeight,
|
||||
bottomToolbarOffset: totalHeight - BOTTOM_CELL_TOOLBAR_GAP - BOTTOM_CELL_TOOLBAR_HEIGHT / 2,
|
||||
bottomToolbarOffset: totalHeight
|
||||
- this.eventDispatcher.notebookOptions.getLayoutConfiguration().bottomCellToolbarGap /* BOTTOM_CELL_TOOLBAR_GAP */
|
||||
- this.eventDispatcher.notebookOptions.getLayoutConfiguration().bottomCellToolbarHeight /* BOTTOM_CELL_TOOLBAR_HEIGHT */ / 2,
|
||||
totalHeight
|
||||
};
|
||||
} else {
|
||||
const editorWidth = state.outerWidth !== undefined ? this.computeEditorWidth(state.outerWidth) : this._layoutInfo.editorWidth;
|
||||
const totalHeight = MARKDOWN_CELL_TOP_MARGIN + COLLAPSED_INDICATOR_HEIGHT + BOTTOM_CELL_TOOLBAR_GAP + MARKDOWN_CELL_BOTTOM_MARGIN;
|
||||
const totalHeight =
|
||||
this.eventDispatcher.notebookOptions.getLayoutConfiguration().markdownCellTopMargin // MARKDOWN_CELL_TOP_MARGIN
|
||||
+ this.eventDispatcher.notebookOptions.getLayoutConfiguration().collapsedIndicatorHeight // COLLAPSED_INDICATOR_HEIGHT
|
||||
+ this.eventDispatcher.notebookOptions.getLayoutConfiguration().bottomCellToolbarGap // BOTTOM_CELL_TOOLBAR_GAP
|
||||
+ this.eventDispatcher.notebookOptions.getLayoutConfiguration().markdownCellBottomMargin; // MARKDOWN_CELL_BOTTOM_MARGIN;
|
||||
|
||||
state.totalHeight = totalHeight;
|
||||
|
||||
this._layoutInfo = {
|
||||
fontInfo: state.font || this._layoutInfo.fontInfo,
|
||||
editorWidth,
|
||||
editorHeight: this._editorHeight,
|
||||
bottomToolbarOffset: totalHeight - BOTTOM_CELL_TOOLBAR_GAP - BOTTOM_CELL_TOOLBAR_HEIGHT / 2,
|
||||
bottomToolbarOffset: totalHeight
|
||||
- this.eventDispatcher.notebookOptions.getLayoutConfiguration().bottomCellToolbarGap // BOTTOM_CELL_TOOLBAR_GAP
|
||||
- this.eventDispatcher.notebookOptions.getLayoutConfiguration().bottomCellToolbarHeight / 2,
|
||||
totalHeight
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -888,3 +888,22 @@ export class NotebookWorkingCopyTypeIdentifier {
|
|||
return undefined;
|
||||
}
|
||||
}
|
||||
|
||||
export interface NotebookLayoutConfiguration {
|
||||
cellRightMargin: number,
|
||||
cellRunGutter: number,
|
||||
cellStatusBarHeight: number,
|
||||
cellTopMargin: number,
|
||||
cellBottomMargin: number,
|
||||
cellOutputPadding: number,
|
||||
codeCellLeftMargin: number,
|
||||
markdownCellTopMargin: number,
|
||||
markdownCellBottomMargin: number,
|
||||
markdownPreviewPadding: number,
|
||||
bottomCellToolbarGap: number,
|
||||
bottomCellToolbarHeight: number,
|
||||
editorToolbarHeight: number,
|
||||
editorBottomPadding: number,
|
||||
editorBottomPaddingWithoutStatusBar: number,
|
||||
collapsedIndicatorHeight: number,
|
||||
}
|
||||
|
|
|
|||
56
src/vs/workbench/contrib/notebook/common/notebookOptions.ts
Normal file
56
src/vs/workbench/contrib/notebook/common/notebookOptions.ts
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
|
||||
import { NotebookLayoutConfiguration } from 'vs/workbench/contrib/notebook/common/notebookCommon';
|
||||
|
||||
const CELL_STATUSBAR_HEIGHT = 22;
|
||||
const EDITOR_TOOLBAR_HEIGHT = 0;
|
||||
const CELL_OUTPUT_PADDING = 14;
|
||||
const MARKDOWN_PREVIEW_PADDING = 8;
|
||||
const CELL_RIGHT_MARGIN = 16;
|
||||
const CELL_RUN_GUTTER = 28;
|
||||
const CODE_CELL_LEFT_MARGIN = 32;
|
||||
const BOTTOM_CELL_TOOLBAR_GAP = 18;
|
||||
const BOTTOM_CELL_TOOLBAR_HEIGHT = 22;
|
||||
|
||||
// Margin above editor
|
||||
const CELL_TOP_MARGIN = 6;
|
||||
const CELL_BOTTOM_MARGIN = 6;
|
||||
|
||||
const MARKDOWN_CELL_TOP_MARGIN = 8;
|
||||
const MARKDOWN_CELL_BOTTOM_MARGIN = 8;
|
||||
|
||||
const COLLAPSED_INDICATOR_HEIGHT = 24;
|
||||
const EDITOR_BOTTOM_PADDING_WITHOUT_STATUSBAR = 12;
|
||||
const EDITOR_BOTTOM_PADDING = 4;
|
||||
|
||||
export class NotebookOptions {
|
||||
private _layoutConfiguration: NotebookLayoutConfiguration;
|
||||
|
||||
constructor() {
|
||||
this._layoutConfiguration = {
|
||||
cellRightMargin: CELL_RIGHT_MARGIN,
|
||||
cellRunGutter: CELL_RUN_GUTTER,
|
||||
cellStatusBarHeight: CELL_STATUSBAR_HEIGHT,
|
||||
cellTopMargin: CELL_TOP_MARGIN,
|
||||
cellBottomMargin: CELL_BOTTOM_MARGIN,
|
||||
codeCellLeftMargin: CODE_CELL_LEFT_MARGIN,
|
||||
markdownCellTopMargin: MARKDOWN_CELL_TOP_MARGIN,
|
||||
markdownCellBottomMargin: MARKDOWN_CELL_BOTTOM_MARGIN,
|
||||
bottomCellToolbarGap: BOTTOM_CELL_TOOLBAR_GAP,
|
||||
bottomCellToolbarHeight: BOTTOM_CELL_TOOLBAR_HEIGHT,
|
||||
editorBottomPadding: EDITOR_BOTTOM_PADDING,
|
||||
editorBottomPaddingWithoutStatusBar: EDITOR_BOTTOM_PADDING_WITHOUT_STATUSBAR,
|
||||
editorToolbarHeight: EDITOR_TOOLBAR_HEIGHT,
|
||||
cellOutputPadding: CELL_OUTPUT_PADDING,
|
||||
collapsedIndicatorHeight: COLLAPSED_INDICATOR_HEIGHT,
|
||||
markdownPreviewPadding: MARKDOWN_PREVIEW_PADDING
|
||||
};
|
||||
}
|
||||
|
||||
getLayoutConfiguration(): NotebookLayoutConfiguration {
|
||||
return this._layoutConfiguration;
|
||||
}
|
||||
}
|
||||
|
|
@ -20,6 +20,7 @@ import { NotebookEventDispatcher } from 'vs/workbench/contrib/notebook/browser/v
|
|||
import { NotebookViewModel } from 'vs/workbench/contrib/notebook/browser/viewModel/notebookViewModel';
|
||||
import { NotebookTextModel } from 'vs/workbench/contrib/notebook/common/model/notebookTextModel';
|
||||
import { CellKind, diff, notebookDocumentMetadataDefaults } from 'vs/workbench/contrib/notebook/common/notebookCommon';
|
||||
import { NotebookOptions } from 'vs/workbench/contrib/notebook/common/notebookOptions';
|
||||
import { ICellRange } from 'vs/workbench/contrib/notebook/common/notebookRange';
|
||||
import { NotebookEditorTestModel, setupInstantiationService, withTestNotebook } from 'vs/workbench/contrib/notebook/test/testNotebookEditor';
|
||||
|
||||
|
|
@ -37,7 +38,7 @@ suite('NotebookViewModel', () => {
|
|||
test('ctor', function () {
|
||||
const notebook = new NotebookTextModel('notebook', URI.parse('test'), [], notebookDocumentMetadataDefaults, { transientCellMetadata: {}, transientDocumentMetadata: {}, transientOutputs: false }, undoRedoService, modelService, modeService);
|
||||
const model = new NotebookEditorTestModel(notebook);
|
||||
const eventDispatcher = new NotebookEventDispatcher();
|
||||
const eventDispatcher = new NotebookEventDispatcher(new NotebookOptions());
|
||||
const viewModel = new NotebookViewModel('notebook', model.notebook, eventDispatcher, null, instantiationService, bulkEditService, undoRedoService, textModelService);
|
||||
assert.strictEqual(viewModel.viewType, 'notebook');
|
||||
});
|
||||
|
|
|
|||
|
|
@ -42,6 +42,7 @@ import { IStorageService } from 'vs/platform/storage/common/storage';
|
|||
import { TestStorageService } from 'vs/workbench/test/common/workbenchTestServices';
|
||||
import { IWorkspaceTrustRequestService } from 'vs/platform/workspace/common/workspaceTrust';
|
||||
import { TestWorkspaceTrustRequestService } from 'vs/workbench/services/workspaces/test/common/testWorkspaceTrustService';
|
||||
import { NotebookOptions } from 'vs/workbench/contrib/notebook/common/notebookOptions';
|
||||
|
||||
export class TestCell extends NotebookCellTextModel {
|
||||
constructor(
|
||||
|
|
@ -171,7 +172,7 @@ function _createTestNotebookEditor(instantiationService: TestInstantiationServic
|
|||
}), notebookDocumentMetadataDefaults, { transientCellMetadata: {}, transientDocumentMetadata: {}, transientOutputs: false });
|
||||
|
||||
const model = new NotebookEditorTestModel(notebook);
|
||||
const eventDispatcher = new NotebookEventDispatcher();
|
||||
const eventDispatcher = new NotebookEventDispatcher(new NotebookOptions());
|
||||
const viewModel: NotebookViewModel = instantiationService.createInstance(NotebookViewModel, viewType, model.notebook, eventDispatcher, null);
|
||||
|
||||
const cellList = createNotebookCellList(instantiationService);
|
||||
|
|
|
|||
Loading…
Reference in a new issue