Microsoft/vscode
1
0
Fork 0
mirror of https://github.com/microsoft/vscode.git synced 2026-09-27 19:08:21 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix cell output height messed up after editing gh cell

Browse Source
This commit is contained in:
Rob Lourens
2020-08-21 10:43:29 -07:00
parent 3cc3de4d68
commit 6d4ecda76c
1 changed files with 35 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/vs/workbench/contrib/notebook/browser/view/renderers/codeCell.ts
+35 -32
View File
@@ -324,7 +324,8 @@ export class CodeCell extends Disposable {
if (renderedOutput) {
if (renderedOutput.renderResult.type !== RenderOutputType.None) {
// Show inset in webview, or render output that isn't rendered
this.renderOutput(currOutput, index, undefined);
// TODO@roblou skipHeightInit flag is a hack - the webview only sends the real height once. Don't wipe it out here.
this.renderOutput(currOutput, index, undefined, true);
} else {
// Anything else, just update the height
this.viewCell.updateOutputHeight(index, renderedOutput.element.clientHeight);
@@ -429,7 +430,7 @@ export class CodeCell extends Disposable {
);
}
private renderOutput(currOutput: IProcessedOutput, index: number, beforeElement?: HTMLElement) {
private renderOutput(currOutput: IProcessedOutput, index: number, beforeElement?: HTMLElement, skipHeightInit = false) {
if (!this.outputResizeListeners.has(currOutput)) {
this.outputResizeListeners.set(currOutput, new DisposableStore());
}
@@ -509,40 +510,42 @@ export class CodeCell extends Disposable {
outputItemDiv.style.position = 'absolute';
}
if (outputHasDynamicHeight(result)) {
this.viewCell.selfSizeMonitoring = true;
if (!skipHeightInit) {
if (outputHasDynamicHeight(result)) {
this.viewCell.selfSizeMonitoring = true;
const clientHeight = outputItemDiv.clientHeight;
const dimension = {
width: this.viewCell.layoutInfo.editorWidth,
height: clientHeight
};
const elementSizeObserver = getResizesObserver(outputItemDiv, dimension, () => {
if (this.templateData.outputContainer && document.body.contains(this.templateData.outputContainer!)) {
const height = Math.ceil(elementSizeObserver.getHeight());
const clientHeight = outputItemDiv.clientHeight;
const dimension = {
width: this.viewCell.layoutInfo.editorWidth,
height: clientHeight
};
const elementSizeObserver = getResizesObserver(outputItemDiv, dimension, () => {
if (this.templateData.outputContainer && document.body.contains(this.templateData.outputContainer!)) {
const height = Math.ceil(elementSizeObserver.getHeight());
if (clientHeight === height) {
return;
if (clientHeight === height) {
return;
}
const currIndex = this.viewCell.outputs.indexOf(currOutput);
if (currIndex < 0) {
return;
}
this.viewCell.updateOutputHeight(currIndex, height);
this.relayoutCell();
}
});
elementSizeObserver.startObserving();
this.outputResizeListeners.get(currOutput)!.add(elementSizeObserver);
this.viewCell.updateOutputHeight(index, clientHeight);
} else if (result.type !== RenderOutputType.None) { // no-op if it's a webview
const clientHeight = Math.ceil(outputItemDiv.clientHeight);
this.viewCell.updateOutputHeight(index, clientHeight);
const currIndex = this.viewCell.outputs.indexOf(currOutput);
if (currIndex < 0) {
return;
}
this.viewCell.updateOutputHeight(currIndex, height);
this.relayoutCell();
}
});
elementSizeObserver.startObserving();
this.outputResizeListeners.get(currOutput)!.add(elementSizeObserver);
this.viewCell.updateOutputHeight(index, clientHeight);
} else if (result.type !== RenderOutputType.None) { // no-op if it's a webview
const clientHeight = Math.ceil(outputItemDiv.clientHeight);
this.viewCell.updateOutputHeight(index, clientHeight);
const top = this.viewCell.getOutputOffsetInContainer(index);
outputItemDiv.style.top = `${top}px`;
const top = this.viewCell.getOutputOffsetInContainer(index);
outputItemDiv.style.top = `${top}px`;
}
}
}