Skip to content

Commit b663632

Browse files
benibenjbenibenj
authored
Adopt variable line height for NES (microsoft#251121)
adopt variable lineheight for NES
1 parent 73a5bfb commit b663632

File tree

8 files changed

+69
-14
lines changed

8 files changed

+69
-14
lines changed

‎src/vs/editor/browser/observableCodeEditor.ts‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -148,6 +148,7 @@ export class ObservableCodeEditor extends Disposable {
148148
this.layoutInfoVerticalScrollbarWidth = this.layoutInfo.map(l => l.verticalScrollbarWidth);
149149
this.contentWidth = observableFromEvent(this.editor.onDidContentSizeChange, () => this.editor.getContentWidth());
150150
this.contentHeight = observableFromEvent(this.editor.onDidContentSizeChange, () => this.editor.getContentHeight());
151+
151152
this._widgetCounter = 0;
152153
this.openedPeekWidgets = observableValue(this, 0);
153154

@@ -403,6 +404,51 @@ export class ObservableCodeEditor extends Disposable {
403404
}));
404405
return isHovered;
405406
}
407+
408+
observeLineHeightForPosition(position: IObservable<Position> | Position): IObservable<number>;
409+
observeLineHeightForPosition(position: IObservable<null>): IObservable<null>;
410+
observeLineHeightForPosition(position: IObservable<Position | null> | Position): IObservable<number | null> {
411+
return derived(reader => {
412+
const pos = position instanceof Position ? position : position.read(reader);
413+
if (pos === null) {
414+
return null;
415+
}
416+
417+
this.getOption(EditorOption.lineHeight).read(reader);
418+
419+
return this.editor.getLineHeightForPosition(pos);
420+
});
421+
}
422+
423+
observeLineHeightForLine(lineNumber: IObservable<number> | number): IObservable<number>;
424+
observeLineHeightForLine(lineNumber: IObservable<null>): IObservable<null>;
425+
observeLineHeightForLine(lineNumber: IObservable<number | null> | number): IObservable<number | null> {
426+
if (typeof lineNumber === 'number') {
427+
return this.observeLineHeightForPosition(new Position(lineNumber, 1));
428+
}
429+
430+
return derived(reader => {
431+
const line = lineNumber.read(reader);
432+
if (line === null) {
433+
return null;
434+
}
435+
436+
return this.observeLineHeightForPosition(new Position(line, 1)).read(reader);
437+
});
438+
}
439+
440+
observeLineHeightsForLineRange(lineNumber: IObservable<LineRange> | LineRange): IObservable<number[]> {
441+
return derived(reader => {
442+
const range = lineNumber instanceof LineRange ? lineNumber : lineNumber.read(reader);
443+
444+
const heights: number[] = [];
445+
for (let i = range.startLineNumber; i < range.endLineNumberExclusive; i++) {
446+
heights.push(this.observeLineHeightForLine(i).read(reader));
447+
}
448+
return heights;
449+
});
450+
}
451+
406452
}
407453

408454
interface IObservableOverlayWidget {

‎src/vs/editor/contrib/inlineCompletions/browser/view/inlineEdits/components/gutterIndicatorView.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -197,7 +197,7 @@ export class InlineEditsGutterIndicator extends Disposable {
197197

198198
const layout = this._editorObs.layoutInfo.read(reader);
199199

200-
const lineHeight = this._editorObs.getOption(EditorOption.lineHeight).read(reader);
200+
const lineHeight = this._editorObs.observeLineHeightForLine(s.range.map(r => r.startLineNumber)).read(reader);
201201
const gutterViewPortPadding = 1;
202202

203203
// Entire gutter view from top left to bottom right

‎src/vs/editor/contrib/inlineCompletions/browser/view/inlineEdits/inlineEditsViews/inlineEditsCustomView.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -136,7 +136,7 @@ export class InlineEditsCustomView extends Disposable implements IInlineEditsVie
136136
const { lineWidth, lineWidthBelow, lineWidthAbove, startContentLeftOffset, endContentLeftOffset } = contentState.read(reader);
137137

138138
const contentLeft = this._editorObs.layoutInfoContentLeft.read(reader);
139-
const lineHeight = this._editorObs.getOption(EditorOption.lineHeight).read(reader);
139+
const lineHeight = this._editorObs.observeLineHeightForLine(startLineNumber).read(reader);
140140
const scrollTop = this._editorObs.scrollTop.read(reader);
141141
const scrollLeft = this._editorObs.scrollLeft.read(reader);
142142

‎src/vs/editor/contrib/inlineCompletions/browser/view/inlineEdits/inlineEditsViews/inlineEditsInsertionView.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ import { asCssVariable } from '../../../../../../../platform/theme/common/colorU
1313
import { ICodeEditor } from '../../../../../../browser/editorBrowser.js';
1414
import { ObservableCodeEditor, observableCodeEditor } from '../../../../../../browser/observableCodeEditor.js';
1515
import { LineSource, renderLines, RenderOptions } from '../../../../../../browser/widget/diffEditor/components/diffEditorViewZones/renderLines.js';
16-
import { EditorOption } from '../../../../../../common/config/editorOptions.js';
1716
import { Rect } from '../../../../../../common/core/2d/rect.js';
1817
import { Position } from '../../../../../../common/core/position.js';
1918
import { Range } from '../../../../../../common/core/range.js';
@@ -54,13 +53,14 @@ export class InlineEditsInsertionView extends Disposable implements IInlineEdits
5453
});
5554

5655
private readonly _trimVertically = derived(this, reader => {
57-
const text = this._state.read(reader)?.text;
56+
const state = this._state.read(reader);
57+
const text = state?.text;
5858
if (!text || text.trim() === '') {
5959
return { topOffset: 0, bottomOffset: 0, linesTop: 0, linesBottom: 0 };
6060
}
6161

6262
// Adjust for leading/trailing newlines
63-
const lineHeight = this._editor.getOption(EditorOption.lineHeight);
63+
const lineHeight = this._editor.getLineHeightForPosition(new Position(state.lineNumber, 1));
6464
const eol = this._editor.getModel()!.getEOL();
6565
let linesTop = 0;
6666
let linesBottom = 0;

‎src/vs/editor/contrib/inlineCompletions/browser/view/inlineEdits/inlineEditsViews/inlineEditsLineReplacementView.ts‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -131,7 +131,15 @@ export class InlineEditsLineReplacementView extends Disposable implements IInlin
131131
const { prefixLeftOffset } = maxPrefixTrim;
132132
const { requiredWidth } = modifiedLines;
133133

134-
const lineHeight = this._editor.getOption(EditorOption.lineHeight).read(reader);
134+
const originalLineHeights = this._editor.observeLineHeightsForLineRange(edit.originalRange).read(reader);
135+
const modifiedLineHeights = (() => {
136+
const lineHeights = originalLineHeights.slice(0, edit.modifiedRange.length);
137+
while (lineHeights.length < edit.modifiedRange.length) {
138+
lineHeights.push(originalLineHeights[originalLineHeights.length - 1]);
139+
}
140+
return lineHeights;
141+
})();
142+
135143
const contentLeft = this._editor.layoutInfoContentLeft.read(reader);
136144
const verticalScrollbarWidth = this._editor.layoutInfoVerticalScrollbarWidth.read(reader);
137145
const scrollLeft = this._editor.scrollLeft.read(reader);
@@ -159,7 +167,7 @@ export class InlineEditsLineReplacementView extends Disposable implements IInlin
159167
originalLinesOverlay.left,
160168
originalLinesOverlay.bottom,
161169
originalLinesOverlay.width,
162-
edit.modifiedRange.length * lineHeight
170+
modifiedLineHeights.reduce((sum, h) => sum + h, 0)
163171
);
164172
const background = Rect.hull([originalLinesOverlay, modifiedLinesOverlay]);
165173

@@ -172,6 +180,7 @@ export class InlineEditsLineReplacementView extends Disposable implements IInlin
172180
background,
173181
lowerBackground,
174182
lowerText,
183+
modifiedLineHeights,
175184
minContentWidthRequired: prefixLeftOffset + maxLineWidth + verticalScrollbarWidth,
176185
};
177186
});
@@ -204,10 +213,9 @@ export class InlineEditsLineReplacementView extends Disposable implements IInlin
204213
const layoutProps = layout.read(reader);
205214
const contentLeft = this._editor.layoutInfoContentLeft.read(reader);
206215

207-
const lineHeight = this._editor.getOption(EditorOption.lineHeight).read(reader);
208-
modifiedLineElements.lines.forEach(l => {
216+
modifiedLineElements.lines.forEach((l, i) => {
209217
l.style.width = `${layoutProps.lowerText.width}px`;
210-
l.style.height = `${lineHeight}px`;
218+
l.style.height = `${layoutProps.modifiedLineHeights[i]}px`;
211219
l.style.position = 'relative';
212220
});
213221

‎src/vs/editor/contrib/inlineCompletions/browser/view/inlineEdits/inlineEditsViews/inlineEditsSideBySideView.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@ import { ICodeEditor } from '../../../../../../browser/editorBrowser.js';
1616
import { observableCodeEditor } from '../../../../../../browser/observableCodeEditor.js';
1717
import { Rect } from '../../../../../../common/core/2d/rect.js';
1818
import { EmbeddedCodeEditorWidget } from '../../../../../../browser/widget/codeEditor/embeddedCodeEditorWidget.js';
19-
import { EditorOption } from '../../../../../../common/config/editorOptions.js';
2019
import { OffsetRange } from '../../../../../../common/core/ranges/offsetRange.js';
2120
import { Position } from '../../../../../../common/core/position.js';
2221
import { Range } from '../../../../../../common/core/range.js';
@@ -289,7 +288,8 @@ export class InlineEditsSideBySideView extends Disposable implements IInlineEdit
289288
codeRect = codeRect.withMargin(VERTICAL_PADDING, HORIZONTAL_PADDING);
290289
}
291290

292-
const editHeight = this._editor.getOption(EditorOption.lineHeight) * inlineEdit.modifiedLineRange.length;
291+
const previewLineHeights = this._previewEditorObs.observeLineHeightsForLineRange(inlineEdit.modifiedLineRange).read(reader);
292+
const editHeight = previewLineHeights.reduce((acc, h) => acc + h, 0);
293293
const codeHeight = selectionBottom - selectionTop;
294294
const previewEditorHeight = Math.max(codeHeight, editHeight);
295295

‎src/vs/editor/contrib/inlineCompletions/browser/view/inlineEdits/inlineEditsViews/inlineEditsWordInsertView.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ export class InlineEditsWordInsertView extends Disposable implements IInlineEdit
4848
return undefined;
4949
}
5050
const contentLeft = this._editor.layoutInfoContentLeft.read(reader);
51-
const lineHeight = this._editor.getOption(EditorOption.lineHeight).read(reader);
51+
const lineHeight = this._editor.observeLineHeightForPosition(this._edit.range.getStartPosition()).read(reader);
5252

5353
const w = this._editor.getOption(EditorOption.fontInfo).read(reader).typicalHalfwidthCharacterWidth;
5454
const width = this._edit.text.length * w + 5;

‎src/vs/editor/contrib/inlineCompletions/browser/view/inlineEdits/inlineEditsViews/inlineEditsWordReplacementView.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,7 @@ export class InlineEditsWordReplacementView extends Disposable implements IInlin
7171
const res = renderLines(new LineSource([tokens]), RenderOptions.fromEditor(this._editor.editor).withSetWidth(false).withScrollBeyondLastColumn(0), [], this._line, true);
7272
this._line.style.width = `${res.minWidthInPx}px`;
7373
});
74+
const modifiedLineHeight = this._editor.observeLineHeightForPosition(this._edit.range.getStartPosition());
7475
this._layout = derived(this, reader => {
7576
this._renderTextEffect.read(reader);
7677
const widgetStart = this._start.read(reader);
@@ -81,7 +82,7 @@ export class InlineEditsWordReplacementView extends Disposable implements IInlin
8182
return undefined;
8283
}
8384

84-
const lineHeight = this._editor.getOption(EditorOption.lineHeight).read(reader);
85+
const lineHeight = modifiedLineHeight.read(reader);
8586
const scrollLeft = this._editor.scrollLeft.read(reader);
8687
const w = this._editor.getOption(EditorOption.fontInfo).read(reader).typicalHalfwidthCharacterWidth;
8788

0 commit comments

Comments
 (0)