Skip to content

Commit 86aef2f

Browse files
hedietremcohaszing
hediet
and
remcohaszing
committed
Refactors: Reduces assumptions about line height.
This contains the parts of #194609 that we can already merge. While it does not implement dynamic line heights, it is a first step in that direction. Co-authored-by: Remco Haszing <[email protected]>
1 parent 308c48e commit 86aef2f

File tree

17 files changed

+75
-82
lines changed

17 files changed

+75
-82
lines changed

‎src/vs/editor/browser/view/viewLayer.ts

+5-5
Original file line numberDiff line numberDiff line change
@@ -22,12 +22,12 @@ export interface IVisibleLine extends ILine {
2222
* Return null if the HTML should not be touched.
2323
* Return the new HTML otherwise.
2424
*/
25-
renderLine(lineNumber: number, deltaTop: number, viewportData: ViewportData, sb: StringBuilder): boolean;
25+
renderLine(lineNumber: number, deltaTop: number, lineHeight: number, viewportData: ViewportData, sb: StringBuilder): boolean;
2626

2727
/**
2828
* Layout the line.
2929
*/
30-
layoutLine(lineNumber: number, deltaTop: number): void;
30+
layoutLine(lineNumber: number, deltaTop: number, lineHeight: number): void;
3131
}
3232

3333
export interface ILine {
@@ -465,7 +465,7 @@ class ViewLayerRenderer<T extends IVisibleLine> {
465465

466466
for (let i = startIndex; i <= endIndex; i++) {
467467
const lineNumber = rendLineNumberStart + i;
468-
lines[i].layoutLine(lineNumber, deltaTop[lineNumber - deltaLN]);
468+
lines[i].layoutLine(lineNumber, deltaTop[lineNumber - deltaLN], this.viewportData.lineHeight);
469469
}
470470
}
471471

@@ -573,7 +573,7 @@ class ViewLayerRenderer<T extends IVisibleLine> {
573573
continue;
574574
}
575575

576-
const renderResult = line.renderLine(i + rendLineNumberStart, deltaTop[i], this.viewportData, sb);
576+
const renderResult = line.renderLine(i + rendLineNumberStart, deltaTop[i], this.viewportData.lineHeight, this.viewportData, sb);
577577
if (!renderResult) {
578578
// line does not need rendering
579579
continue;
@@ -603,7 +603,7 @@ class ViewLayerRenderer<T extends IVisibleLine> {
603603
continue;
604604
}
605605

606-
const renderResult = line.renderLine(i + rendLineNumberStart, deltaTop[i], this.viewportData, sb);
606+
const renderResult = line.renderLine(i + rendLineNumberStart, deltaTop[i], this.viewportData.lineHeight, this.viewportData, sb);
607607
if (!renderResult) {
608608
// line does not need rendering
609609
continue;

‎src/vs/editor/browser/view/viewOverlays.ts

+8-22
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ import { DynamicViewOverlay } from 'vs/editor/browser/view/dynamicViewOverlay';
99
import { IVisibleLine, IVisibleLinesHost, VisibleLinesCollection } from 'vs/editor/browser/view/viewLayer';
1010
import { ViewPart } from 'vs/editor/browser/view/viewPart';
1111
import { StringBuilder } from 'vs/editor/common/core/stringBuilder';
12-
import { IEditorConfiguration } from 'vs/editor/common/config/editorConfiguration';
1312
import { RenderingContext, RestrictedRenderingContext } from 'vs/editor/browser/view/renderingContext';
1413
import { ViewContext } from 'vs/editor/common/viewModel/viewContext';
1514
import * as viewEvents from 'vs/editor/common/viewEvents';
@@ -71,7 +70,7 @@ export class ViewOverlays extends ViewPart implements IVisibleLinesHost<ViewOver
7170
// ---- begin IVisibleLinesHost
7271

7372
public createVisibleLine(): ViewOverlayLine {
74-
return new ViewOverlayLine(this._context.configuration, this._dynamicOverlays);
73+
return new ViewOverlayLine(this._dynamicOverlays);
7574
}
7675

7776
// ---- end IVisibleLinesHost
@@ -84,12 +83,6 @@ export class ViewOverlays extends ViewPart implements IVisibleLinesHost<ViewOver
8483

8584
public override onConfigurationChanged(e: viewEvents.ViewConfigurationChangedEvent): boolean {
8685
this._visibleLines.onConfigurationChanged(e);
87-
const startLineNumber = this._visibleLines.getStartLineNumber();
88-
const endLineNumber = this._visibleLines.getEndLineNumber();
89-
for (let lineNumber = startLineNumber; lineNumber <= endLineNumber; lineNumber++) {
90-
const line = this._visibleLines.getVisibleLine(lineNumber);
91-
line.onConfigurationChanged(e);
92-
}
9386

9487
const options = this._context.configuration.options;
9588
const fontInfo = options.get(EditorOption.fontInfo);
@@ -149,15 +142,11 @@ export class ViewOverlays extends ViewPart implements IVisibleLinesHost<ViewOver
149142

150143
export class ViewOverlayLine implements IVisibleLine {
151144

152-
private readonly _configuration: IEditorConfiguration;
153145
private readonly _dynamicOverlays: DynamicViewOverlay[];
154146
private _domNode: FastDomNode<HTMLElement> | null;
155147
private _renderedContent: string | null;
156-
private _lineHeight: number;
157148

158-
constructor(configuration: IEditorConfiguration, dynamicOverlays: DynamicViewOverlay[]) {
159-
this._configuration = configuration;
160-
this._lineHeight = this._configuration.options.get(EditorOption.lineHeight);
149+
constructor(dynamicOverlays: DynamicViewOverlay[]) {
161150
this._dynamicOverlays = dynamicOverlays;
162151

163152
this._domNode = null;
@@ -180,11 +169,8 @@ export class ViewOverlayLine implements IVisibleLine {
180169
public onTokensChanged(): void {
181170
// Nothing
182171
}
183-
public onConfigurationChanged(e: viewEvents.ViewConfigurationChangedEvent): void {
184-
this._lineHeight = this._configuration.options.get(EditorOption.lineHeight);
185-
}
186172

187-
public renderLine(lineNumber: number, deltaTop: number, viewportData: ViewportData, sb: StringBuilder): boolean {
173+
public renderLine(lineNumber: number, deltaTop: number, lineHeight: number, viewportData: ViewportData, sb: StringBuilder): boolean {
188174
let result = '';
189175
for (let i = 0, len = this._dynamicOverlays.length; i < len; i++) {
190176
const dynamicOverlay = this._dynamicOverlays[i];
@@ -198,21 +184,21 @@ export class ViewOverlayLine implements IVisibleLine {
198184

199185
this._renderedContent = result;
200186

201-
sb.appendString('<div style="position:absolute;top:');
187+
sb.appendString('<div style="top:');
202188
sb.appendString(String(deltaTop));
203-
sb.appendString('px;width:100%;height:');
204-
sb.appendString(String(this._lineHeight));
189+
sb.appendString('px;height:');
190+
sb.appendString(String(lineHeight));
205191
sb.appendString('px;">');
206192
sb.appendString(result);
207193
sb.appendString('</div>');
208194

209195
return true;
210196
}
211197

212-
public layoutLine(lineNumber: number, deltaTop: number): void {
198+
public layoutLine(lineNumber: number, deltaTop: number, lineHeight: number): void {
213199
if (this._domNode) {
214200
this._domNode.setTop(deltaTop);
215-
this._domNode.setHeight(this._lineHeight);
201+
this._domNode.setHeight(lineHeight);
216202
}
217203
}
218204
}

‎src/vs/editor/browser/viewParts/currentLineHighlight/currentLineHighlight.css

+5-1
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
left: 0;
1010
top: 0;
1111
box-sizing: border-box;
12+
height: 100%;
1213
}
1314

1415
.monaco-editor .margin-view-overlays .current-line {
@@ -17,8 +18,11 @@
1718
left: 0;
1819
top: 0;
1920
box-sizing: border-box;
21+
height: 100%;
2022
}
2123

22-
.monaco-editor .margin-view-overlays .current-line.current-line-margin.current-line-margin-both {
24+
.monaco-editor
25+
.margin-view-overlays
26+
.current-line.current-line-margin.current-line-margin-both {
2327
border-right: 0;
2428
}

‎src/vs/editor/browser/viewParts/currentLineHighlight/currentLineHighlight.ts

+2-5
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,6 @@ import { Position } from 'vs/editor/common/core/position';
1818

1919
export abstract class AbstractLineHighlightOverlay extends DynamicViewOverlay {
2020
private readonly _context: ViewContext;
21-
protected _lineHeight: number;
2221
protected _renderLineHighlight: 'none' | 'gutter' | 'line' | 'all';
2322
protected _wordWrap: boolean;
2423
protected _contentLeft: number;
@@ -39,7 +38,6 @@ export abstract class AbstractLineHighlightOverlay extends DynamicViewOverlay {
3938

4039
const options = this._context.configuration.options;
4140
const layoutInfo = options.get(EditorOption.layoutInfo);
42-
this._lineHeight = options.get(EditorOption.lineHeight);
4341
this._renderLineHighlight = options.get(EditorOption.renderLineHighlight);
4442
this._renderLineHighlightOnlyWhenFocus = options.get(EditorOption.renderLineHighlightOnlyWhenFocus);
4543
this._wordWrap = layoutInfo.isViewportWrapping;
@@ -89,7 +87,6 @@ export abstract class AbstractLineHighlightOverlay extends DynamicViewOverlay {
8987
public override onConfigurationChanged(e: viewEvents.ViewConfigurationChangedEvent): boolean {
9088
const options = this._context.configuration.options;
9189
const layoutInfo = options.get(EditorOption.layoutInfo);
92-
this._lineHeight = options.get(EditorOption.lineHeight);
9390
this._renderLineHighlight = options.get(EditorOption.renderLineHighlight);
9491
this._renderLineHighlightOnlyWhenFocus = options.get(EditorOption.renderLineHighlightOnlyWhenFocus);
9592
this._wordWrap = layoutInfo.isViewportWrapping;
@@ -208,7 +205,7 @@ export class CurrentLineHighlightOverlay extends AbstractLineHighlightOverlay {
208205

209206
protected _renderOne(ctx: RenderingContext, exact: boolean): string {
210207
const className = 'current-line' + (this._shouldRenderInMargin() ? ' current-line-both' : '') + (exact ? ' current-line-exact' : '');
211-
return `<div class="${className}" style="width:${Math.max(ctx.scrollWidth, this._contentWidth)}px; height:${this._lineHeight}px;"></div>`;
208+
return `<div class="${className}" style="width:${Math.max(ctx.scrollWidth, this._contentWidth)}px;"></div>`;
212209
}
213210
protected _shouldRenderThis(): boolean {
214211
return this._shouldRenderInContent();
@@ -221,7 +218,7 @@ export class CurrentLineHighlightOverlay extends AbstractLineHighlightOverlay {
221218
export class CurrentLineMarginHighlightOverlay extends AbstractLineHighlightOverlay {
222219
protected _renderOne(ctx: RenderingContext, exact: boolean): string {
223220
const className = 'current-line' + (this._shouldRenderInMargin() ? ' current-line-margin' : '') + (this._shouldRenderOther() ? ' current-line-margin-both' : '') + (this._shouldRenderInMargin() && exact ? ' current-line-exact-margin' : '');
224-
return `<div class="${className}" style="width:${this._contentLeft}px; height:${this._lineHeight}px;"></div>`;
221+
return `<div class="${className}" style="width:${this._contentLeft}px"></div>`;
225222
}
226223
protected _shouldRenderThis(): boolean {
227224
return true;

‎src/vs/editor/browser/viewParts/decorations/decorations.css

+2-1
Original file line numberDiff line numberDiff line change
@@ -9,4 +9,5 @@
99
*/
1010
.monaco-editor .lines-content .cdr {
1111
position: absolute;
12-
}
12+
height: 100%;
13+
}

‎src/vs/editor/browser/viewParts/decorations/decorations.ts

+8-15
Original file line numberDiff line numberDiff line change
@@ -15,15 +15,13 @@ import { ViewContext } from 'vs/editor/common/viewModel/viewContext';
1515
export class DecorationsOverlay extends DynamicViewOverlay {
1616

1717
private readonly _context: ViewContext;
18-
private _lineHeight: number;
1918
private _typicalHalfwidthCharacterWidth: number;
2019
private _renderResult: string[] | null;
2120

2221
constructor(context: ViewContext) {
2322
super();
2423
this._context = context;
2524
const options = this._context.configuration.options;
26-
this._lineHeight = options.get(EditorOption.lineHeight);
2725
this._typicalHalfwidthCharacterWidth = options.get(EditorOption.fontInfo).typicalHalfwidthCharacterWidth;
2826
this._renderResult = null;
2927

@@ -40,7 +38,6 @@ export class DecorationsOverlay extends DynamicViewOverlay {
4038

4139
public override onConfigurationChanged(e: viewEvents.ViewConfigurationChangedEvent): boolean {
4240
const options = this._context.configuration.options;
43-
this._lineHeight = options.get(EditorOption.lineHeight);
4441
this._typicalHalfwidthCharacterWidth = options.get(EditorOption.fontInfo).typicalHalfwidthCharacterWidth;
4542
return true;
4643
}
@@ -116,7 +113,6 @@ export class DecorationsOverlay extends DynamicViewOverlay {
116113
}
117114

118115
private _renderWholeLineDecorations(ctx: RenderingContext, decorations: ViewModelDecoration[], output: string[]): void {
119-
const lineHeight = String(this._lineHeight);
120116
const visibleStartLineNumber = ctx.visibleRange.startLineNumber;
121117
const visibleEndLineNumber = ctx.visibleRange.endLineNumber;
122118

@@ -130,9 +126,7 @@ export class DecorationsOverlay extends DynamicViewOverlay {
130126
const decorationOutput = (
131127
'<div class="cdr '
132128
+ d.options.className
133-
+ '" style="left:0;width:100%;height:'
134-
+ lineHeight
135-
+ 'px;"></div>'
129+
+ '" style="left:0;width:100%;"></div>'
136130
);
137131

138132
const startLineNumber = Math.max(d.range.startLineNumber, visibleStartLineNumber);
@@ -145,7 +139,6 @@ export class DecorationsOverlay extends DynamicViewOverlay {
145139
}
146140

147141
private _renderNormalDecorations(ctx: RenderingContext, decorations: ViewModelDecoration[], output: string[]): void {
148-
const lineHeight = String(this._lineHeight);
149142
const visibleStartLineNumber = ctx.visibleRange.startLineNumber;
150143

151144
let prevClassName: string | null = null;
@@ -176,7 +169,7 @@ export class DecorationsOverlay extends DynamicViewOverlay {
176169

177170
// flush previous decoration
178171
if (prevClassName !== null) {
179-
this._renderNormalDecoration(ctx, prevRange!, prevClassName, prevShouldFillLineOnLineBreak, prevShowIfCollapsed, lineHeight, visibleStartLineNumber, output);
172+
this._renderNormalDecoration(ctx, prevRange!, prevClassName, prevShouldFillLineOnLineBreak, prevShowIfCollapsed, visibleStartLineNumber, output);
180173
}
181174

182175
prevClassName = className;
@@ -186,11 +179,11 @@ export class DecorationsOverlay extends DynamicViewOverlay {
186179
}
187180

188181
if (prevClassName !== null) {
189-
this._renderNormalDecoration(ctx, prevRange!, prevClassName, prevShouldFillLineOnLineBreak, prevShowIfCollapsed, lineHeight, visibleStartLineNumber, output);
182+
this._renderNormalDecoration(ctx, prevRange!, prevClassName, prevShouldFillLineOnLineBreak, prevShowIfCollapsed, visibleStartLineNumber, output);
190183
}
191184
}
192185

193-
private _renderNormalDecoration(ctx: RenderingContext, range: Range, className: string, shouldFillLineOnLineBreak: boolean, showIfCollapsed: boolean, lineHeight: string, visibleStartLineNumber: number, output: string[]): void {
186+
private _renderNormalDecoration(ctx: RenderingContext, range: Range, className: string, shouldFillLineOnLineBreak: boolean, showIfCollapsed: boolean, visibleStartLineNumber: number, output: string[]): void {
194187
const linesVisibleRanges = ctx.linesVisibleRangesForRange(range, /*TODO@Alex*/className === 'findMatch');
195188
if (!linesVisibleRanges) {
196189
return;
@@ -222,12 +215,12 @@ export class DecorationsOverlay extends DynamicViewOverlay {
222215
+ className
223216
+ '" style="left:'
224217
+ String(visibleRange.left)
218+
+ 'px;width:'
225219
+ (expandToLeft ?
226-
'px;width:100%;height:' :
227-
('px;width:' + String(visibleRange.width) + 'px;height:')
220+
'100%;' :
221+
(String(visibleRange.width) + 'px;')
228222
)
229-
+ lineHeight
230-
+ 'px;"></div>'
223+
+ '"></div>'
231224
);
232225
output[lineIndex] += decorationOutput;
233226
}

‎src/vs/editor/browser/viewParts/indentGuides/indentGuides.css

+1
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,5 @@
66
.monaco-editor .lines-content .core-guide {
77
position: absolute;
88
box-sizing: border-box;
9+
height: 100%;
910
}

‎src/vs/editor/browser/viewParts/indentGuides/indentGuides.ts

+1-5
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,6 @@ export class IndentGuidesOverlay extends DynamicViewOverlay {
2222

2323
private readonly _context: ViewContext;
2424
private _primaryPosition: Position | null;
25-
private _lineHeight: number;
2625
private _spaceWidth: number;
2726
private _renderResult: string[] | null;
2827
private _maxIndentLeft: number;
@@ -37,7 +36,6 @@ export class IndentGuidesOverlay extends DynamicViewOverlay {
3736
const wrappingInfo = options.get(EditorOption.wrappingInfo);
3837
const fontInfo = options.get(EditorOption.fontInfo);
3938

40-
this._lineHeight = options.get(EditorOption.lineHeight);
4139
this._spaceWidth = fontInfo.spaceWidth;
4240
this._maxIndentLeft = wrappingInfo.wrappingColumn === -1 ? -1 : (wrappingInfo.wrappingColumn * fontInfo.typicalHalfwidthCharacterWidth);
4341
this._bracketPairGuideOptions = options.get(EditorOption.guides);
@@ -60,7 +58,6 @@ export class IndentGuidesOverlay extends DynamicViewOverlay {
6058
const wrappingInfo = options.get(EditorOption.wrappingInfo);
6159
const fontInfo = options.get(EditorOption.fontInfo);
6260

63-
this._lineHeight = options.get(EditorOption.lineHeight);
6461
this._spaceWidth = fontInfo.spaceWidth;
6562
this._maxIndentLeft = wrappingInfo.wrappingColumn === -1 ? -1 : (wrappingInfo.wrappingColumn * fontInfo.typicalHalfwidthCharacterWidth);
6663
this._bracketPairGuideOptions = options.get(EditorOption.guides);
@@ -114,7 +111,6 @@ export class IndentGuidesOverlay extends DynamicViewOverlay {
114111
const visibleStartLineNumber = ctx.visibleRange.startLineNumber;
115112
const visibleEndLineNumber = ctx.visibleRange.endLineNumber;
116113
const scrollWidth = ctx.scrollWidth;
117-
const lineHeight = this._lineHeight;
118114

119115
const activeCursorPosition = this._primaryPosition;
120116

@@ -150,7 +146,7 @@ export class IndentGuidesOverlay extends DynamicViewOverlay {
150146
)?.left ?? (left + this._spaceWidth)) - left
151147
: this._spaceWidth;
152148

153-
result += `<div class="core-guide ${guide.className} ${className}" style="left:${left}px;height:${lineHeight}px;width:${width}px"></div>`;
149+
result += `<div class="core-guide ${guide.className} ${className}" style="left:${left}px;width:${width}px"></div>`;
154150
}
155151
output[lineIndex] = result;
156152
}

‎src/vs/editor/browser/viewParts/lineNumbers/lineNumbers.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,14 @@
44
*--------------------------------------------------------------------------------------------*/
55

66
.monaco-editor .margin-view-overlays .line-numbers {
7+
bottom: 0;
78
font-variant-numeric: tabular-nums;
89
position: absolute;
910
text-align: right;
1011
display: inline-block;
1112
vertical-align: middle;
1213
box-sizing: border-box;
1314
cursor: default;
14-
height: 100%;
1515
}
1616

1717
.monaco-editor .relative-current-line-number {

‎src/vs/editor/browser/viewParts/lines/viewLine.ts

+4-4
Original file line numberDiff line numberDiff line change
@@ -151,7 +151,7 @@ export class ViewLine implements IVisibleLine {
151151
return false;
152152
}
153153

154-
public renderLine(lineNumber: number, deltaTop: number, viewportData: ViewportData, sb: StringBuilder): boolean {
154+
public renderLine(lineNumber: number, deltaTop: number, lineHeight: number, viewportData: ViewportData, sb: StringBuilder): boolean {
155155
if (this._isMaybeInvalid === false) {
156156
// it appears that nothing relevant has changed
157157
return false;
@@ -222,7 +222,7 @@ export class ViewLine implements IVisibleLine {
222222
sb.appendString('<div style="top:');
223223
sb.appendString(String(deltaTop));
224224
sb.appendString('px;height:');
225-
sb.appendString(String(this._options.lineHeight));
225+
sb.appendString(String(lineHeight));
226226
sb.appendString('px;" class="');
227227
sb.appendString(ViewLine.CLASS_NAME);
228228
sb.appendString('">');
@@ -255,10 +255,10 @@ export class ViewLine implements IVisibleLine {
255255
return true;
256256
}
257257

258-
public layoutLine(lineNumber: number, deltaTop: number): void {
258+
public layoutLine(lineNumber: number, deltaTop: number, lineHeight: number): void {
259259
if (this._renderedViewLine && this._renderedViewLine.domNode) {
260260
this._renderedViewLine.domNode.setTop(deltaTop);
261-
this._renderedViewLine.domNode.setHeight(this._options.lineHeight);
261+
this._renderedViewLine.domNode.setHeight(lineHeight);
262262
}
263263
}
264264

‎src/vs/editor/browser/viewParts/lines/viewLines.css

+5
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,11 @@
6363
width: 100%;
6464
}
6565

66+
.monaco-editor .view-line > span {
67+
bottom: 0;
68+
position: absolute;
69+
}
70+
6671
.monaco-editor .mtkw {
6772
color: var(--vscode-editorWhitespace-foreground) !important;
6873
}

0 commit comments

Comments
 (0)