avoid flickering with unitialized cell height.

This commit is contained in:
rebornix 2021-08-11 21:14:53 -07:00
parent 8aa1e9f940
commit c64c9374ed
3 changed files with 29 additions and 22 deletions

View file

@ -220,7 +220,7 @@ export interface NotebookLayoutChangeEvent {
fontInfo?: boolean;
}
export enum CodeCellLayoutState {
export enum CellLayoutState {
Uninitialized,
Estimated,
FromCache,
@ -238,7 +238,7 @@ export interface CodeCellLayoutInfo {
readonly outputShowMoreContainerOffset: number;
readonly indicatorHeight: number;
readonly bottomToolbarOffset: number;
readonly layoutState: CodeCellLayoutState;
readonly layoutState: CellLayoutState;
}
export interface CodeCellLayoutChangeEvent {
@ -258,6 +258,7 @@ export interface MarkdownCellLayoutInfo {
readonly previewHeight: number;
readonly bottomToolbarOffset: number;
readonly totalHeight: number;
readonly layoutState: CellLayoutState;
}
export interface MarkdownCellLayoutChangeEvent {

View file

@ -10,7 +10,7 @@ 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 { IUndoRedoService } from 'vs/platform/undoRedo/common/undoRedo';
import { CellEditState, CellFindMatch, CodeCellLayoutChangeEvent, CodeCellLayoutInfo, CodeCellLayoutState, ICellOutputViewModel, ICellViewModel, NotebookLayoutInfo } from 'vs/workbench/contrib/notebook/browser/notebookBrowser';
import { CellEditState, CellFindMatch, CodeCellLayoutChangeEvent, CodeCellLayoutInfo, CellLayoutState, ICellOutputViewModel, ICellViewModel, NotebookLayoutInfo } from 'vs/workbench/contrib/notebook/browser/notebookBrowser';
import { CellOutputViewModel } from 'vs/workbench/contrib/notebook/browser/viewModel/cellOutputViewModel';
import { ViewContext } from 'vs/workbench/contrib/notebook/browser/viewModel/viewContext';
import { NotebookCellTextModel } from 'vs/workbench/contrib/notebook/common/model/notebookCellTextModel';
@ -148,10 +148,10 @@ export class CodeCellViewModel extends BaseCellViewModel implements ICellViewMod
outputTotalHeight: 0,
outputShowMoreContainerHeight: 0,
outputShowMoreContainerOffset: 0,
totalHeight: 0,
totalHeight: this.computeTotalHeight(17, 0, 0),
indicatorHeight: 0,
bottomToolbarOffset: 0,
layoutState: CodeCellLayoutState.Uninitialized
layoutState: CellLayoutState.Uninitialized
};
}
@ -165,23 +165,23 @@ export class CodeCellViewModel extends BaseCellViewModel implements ICellViewMod
const originalLayout = this.layoutInfo;
if (!this.metadata.inputCollapsed) {
let newState: CodeCellLayoutState;
let newState: CellLayoutState;
let editorHeight: number;
let totalHeight: number;
if (!state.editorHeight && this._layoutInfo.layoutState === CodeCellLayoutState.FromCache && !state.outputHeight) {
if (!state.editorHeight && this._layoutInfo.layoutState === CellLayoutState.FromCache && !state.outputHeight) {
// No new editorHeight info - keep cached totalHeight and estimate editorHeight
editorHeight = this.estimateEditorHeight(state.font?.lineHeight ?? this._layoutInfo.fontInfo?.lineHeight);
totalHeight = this._layoutInfo.totalHeight;
newState = CodeCellLayoutState.FromCache;
} else if (state.editorHeight || this._layoutInfo.layoutState === CodeCellLayoutState.Measured) {
newState = CellLayoutState.FromCache;
} else if (state.editorHeight || this._layoutInfo.layoutState === CellLayoutState.Measured) {
// Editor has been measured
editorHeight = this._editorHeight;
totalHeight = this.computeTotalHeight(this._editorHeight, outputTotalHeight, outputShowMoreContainerHeight);
newState = CodeCellLayoutState.Measured;
newState = CellLayoutState.Measured;
} else {
editorHeight = this.estimateEditorHeight(state.font?.lineHeight ?? this._layoutInfo.fontInfo?.lineHeight);
totalHeight = this.computeTotalHeight(editorHeight, outputTotalHeight, outputShowMoreContainerHeight);
newState = CodeCellLayoutState.Estimated;
newState = CellLayoutState.Estimated;
}
const statusbarHeight = this.viewContext.notebookOptions.computeEditorStatusbarHeight(this.internalMetadata);
@ -258,7 +258,7 @@ export class CodeCellViewModel extends BaseCellViewModel implements ICellViewMod
override restoreEditorViewState(editorViewStates: editorCommon.ICodeEditorViewState | null, totalHeight?: number) {
super.restoreEditorViewState(editorViewStates);
if (totalHeight !== undefined && this._layoutInfo.layoutState !== CodeCellLayoutState.Measured) {
if (totalHeight !== undefined && this._layoutInfo.layoutState !== CellLayoutState.Measured) {
this._layoutInfo = {
fontInfo: this._layoutInfo.fontInfo,
editorHeight: this._layoutInfo.editorHeight,
@ -270,7 +270,7 @@ export class CodeCellViewModel extends BaseCellViewModel implements ICellViewMod
totalHeight: totalHeight,
indicatorHeight: this._layoutInfo.indicatorHeight,
bottomToolbarOffset: this._layoutInfo.bottomToolbarOffset,
layoutState: CodeCellLayoutState.FromCache
layoutState: CellLayoutState.FromCache
};
}
}
@ -285,7 +285,7 @@ export class CodeCellViewModel extends BaseCellViewModel implements ICellViewMod
}
getHeight(lineHeight: number) {
if (this._layoutInfo.layoutState === CodeCellLayoutState.Uninitialized) {
if (this._layoutInfo.layoutState === CellLayoutState.Uninitialized) {
const editorHeight = this.estimateEditorHeight(lineHeight);
return this.computeTotalHeight(editorHeight, 0, 0);
} else {

View file

@ -8,7 +8,7 @@ import * as UUID from 'vs/base/common/uuid';
import * as editorCommon from 'vs/editor/common/editorCommon';
import { IConfigurationService } from 'vs/platform/configuration/common/configuration';
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 { CellEditState, CellFindMatch, CellLayoutState, ICellOutputViewModel, ICellViewModel, MarkdownCellLayoutChangeEvent, MarkdownCellLayoutInfo, NotebookLayoutInfo } from 'vs/workbench/contrib/notebook/browser/notebookBrowser';
import { BaseCellViewModel } from 'vs/workbench/contrib/notebook/browser/viewModel/baseCellViewModel';
import { NotebookCellStateChangedEvent } from 'vs/workbench/contrib/notebook/browser/viewModel/eventDispatcher';
import { NotebookCellTextModel } from 'vs/workbench/contrib/notebook/common/model/notebookCellTextModel';
@ -129,7 +129,8 @@ export class MarkupCellViewModel extends BaseCellViewModel implements ICellViewM
? this.viewContext.notebookOptions.computeMarkdownCellEditorWidth(initialNotebookLayoutInfo.width)
: 0,
bottomToolbarOffset: bottomToolbarGap,
totalHeight: 0
totalHeight: 100,
layoutState: CellLayoutState.Uninitialized
};
this._register(this.onDidChangeState(e => {
@ -192,7 +193,9 @@ export class MarkupCellViewModel extends BaseCellViewModel implements ICellViewM
const editorWidth = state.outerWidth !== undefined
? this.viewContext.notebookOptions.computeMarkdownCellEditorWidth(state.outerWidth)
: this._layoutInfo.editorWidth;
const totalHeight = state.totalHeight === undefined ? this._layoutInfo.totalHeight : state.totalHeight;
const totalHeight = state.totalHeight === undefined
? (this._layoutInfo.layoutState === CellLayoutState.Uninitialized ? 100 : this._layoutInfo.totalHeight)
: state.totalHeight;
const previewHeight = this._previewHeight;
this._layoutInfo = {
@ -201,7 +204,8 @@ export class MarkupCellViewModel extends BaseCellViewModel implements ICellViewM
previewHeight,
editorHeight: this._editorHeight,
bottomToolbarOffset: this.viewContext.notebookOptions.computeBottomToolbarOffset(totalHeight, this.viewType),
totalHeight
totalHeight,
layoutState: CellLayoutState.Measured
};
} else {
const editorWidth = state.outerWidth !== undefined
@ -217,7 +221,8 @@ export class MarkupCellViewModel extends BaseCellViewModel implements ICellViewM
editorHeight: this._editorHeight,
previewHeight: this._previewHeight,
bottomToolbarOffset: this.viewContext.notebookOptions.computeBottomToolbarOffset(totalHeight, this.viewType),
totalHeight
totalHeight,
layoutState: CellLayoutState.Measured
};
}
@ -227,14 +232,15 @@ export class MarkupCellViewModel extends BaseCellViewModel implements ICellViewM
override restoreEditorViewState(editorViewStates: editorCommon.ICodeEditorViewState | null, totalHeight?: number) {
super.restoreEditorViewState(editorViewStates);
// we might already warmup the viewport so the cell has a total height computed
if (totalHeight !== undefined && this._layoutInfo.totalHeight === 0) {
if (totalHeight !== undefined && this.layoutInfo.layoutState === CellLayoutState.Uninitialized) {
this._layoutInfo = {
fontInfo: this._layoutInfo.fontInfo,
editorWidth: this._layoutInfo.editorWidth,
previewHeight: this._layoutInfo.previewHeight,
bottomToolbarOffset: this._layoutInfo.bottomToolbarOffset,
totalHeight: totalHeight,
editorHeight: this._editorHeight
editorHeight: this._editorHeight,
layoutState: CellLayoutState.FromCache
};
this.layoutChange({});
}
@ -245,7 +251,7 @@ export class MarkupCellViewModel extends BaseCellViewModel implements ICellViewM
}
getHeight(lineHeight: number) {
if (this._layoutInfo.totalHeight === 0) {
if (this._layoutInfo.layoutState === CellLayoutState.Uninitialized) {
return 100;
} else {
return this._layoutInfo.totalHeight;