Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Polish rendering of overview ruler decorations #3697

Merged
merged 6 commits into from
Mar 20, 2022
Merged

Polish rendering of overview ruler decorations #3697

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
f43afde
Respect device pixel ratio in overview ruler
Tyriar Mar 18, 2022
4a661da
Use object properties for fast access to precalculated draw args
Tyriar Mar 18, 2022
816220e
Round dpr for more crisp decorations
Tyriar Mar 18, 2022
77622f8
Align full with other decorations
Tyriar Mar 18, 2022
b5f2082
Clean up
Tyriar Mar 18, 2022
39d1546
Draw full decorations on top
Tyriar Mar 18, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions demo/client.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -559,5 +559,7 @@ function addOverviewRuler() {
term.registerDecoration({marker: term.addMarker(7), overviewRulerOptions: { color: '#ef2929', position: 'left' }});
term.registerDecoration({marker: term.addMarker(7), overviewRulerOptions: { color: '#8ae234', position: 'center' }});
term.registerDecoration({marker: term.addMarker(7), overviewRulerOptions: { color: '#729fcf', position: 'right' }});
term.registerDecoration({marker: term.addMarker(10), overviewRulerOptions: { color: '#8ae234', position: 'center' }});
term.registerDecoration({marker: term.addMarker(10), overviewRulerOptions: { color: '#ffffff80', position: 'full' }});
}

89 changes: 67 additions & 22 deletions src/browser/Decorations/OverviewRulerRenderer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,15 +8,26 @@ import { IRenderService } from 'browser/services/Services';
import { Disposable } from 'common/Lifecycle';
import { IBufferService, IDecorationService, IInternalDecoration, IOptionsService } from 'common/services/Services';

// This is used to reduce memory usage
// when refreshStyle is called
// by storing and updating
// the sizes of the decorations to be drawn
const renderSizes = new Uint16Array(3);
const enum SizeIndex {
OUTER_SIZE = 0,
INNER_SIZE = 1
}
// Helper objects to avoid excessive calculation and garbage collection during rendering. These are
// static values for each render and can be accessed using the decoration position as the key.
const drawHeight = {
full: 0,
left: 0,
center: 0,
right: 0
};
const drawWidth = {
full: 0,
left: 0,
center: 0,
right: 0
};
const drawX = {
full: 0,
left: 0,
center: 0,
right: 0
};

export class OverviewRulerRenderer extends Disposable {
private readonly _canvas: HTMLCanvasElement;
Expand All @@ -38,6 +49,7 @@ export class OverviewRulerRenderer extends Disposable {
super();
this._canvas = document.createElement('canvas');
this._canvas.classList.add('xterm-decoration-overview-ruler');
this._refreshCanvasDimensions();
this._viewportElement.parentElement?.insertBefore(this._canvas, this._viewportElement);
const ctx = this._canvas.getContext('2d');
if (!ctx) {
Expand All @@ -56,13 +68,11 @@ export class OverviewRulerRenderer extends Disposable {
this.register(this._decorationService.onDecorationRemoved(decoration => this._removeDecoration(decoration)));
this.register(this._optionsService.onOptionChange(o => {
if (o === 'overviewRulerWidth') {
renderSizes[SizeIndex.OUTER_SIZE] = Math.floor(this._width / 3);
renderSizes[SizeIndex.INNER_SIZE] = Math.ceil(this._width / 3);
this._refreshDrawConstants();
this._queueRefresh();
}
}));
renderSizes[SizeIndex.OUTER_SIZE] = Math.floor(this._width / 3);
renderSizes[SizeIndex.INNER_SIZE] = Math.ceil(this._width / 3);
this._refreshDrawConstants();
}

public override dispose(): void {
Expand All @@ -74,6 +84,26 @@ export class OverviewRulerRenderer extends Disposable {
super.dispose();
}

private _refreshDrawConstants(): void {
// width
const outerWidth = Math.floor(this._canvas.width / 3);
const innerWidth = Math.ceil(this._canvas.width / 3);
drawWidth.full = this._canvas.width;
drawWidth.left = outerWidth;
drawWidth.center = innerWidth;
drawWidth.right = outerWidth;
// height
drawHeight.full = Math.round(2 * window.devicePixelRatio);
drawHeight.left = Math.round(6 * window.devicePixelRatio);
drawHeight.center = Math.round(6 * window.devicePixelRatio);
drawHeight.right = Math.round(6 * window.devicePixelRatio);
// x
drawX.full = 0;
drawX.left = 0;
drawX.center = drawWidth.left;
drawX.right = drawWidth.left + drawWidth.center;
}

private _refreshStyle(decoration: IInternalDecoration, updateAnchor?: boolean): void {
if (updateAnchor) {
if (decoration.options.anchor === 'right') {
Expand All @@ -89,23 +119,38 @@ export class OverviewRulerRenderer extends Disposable {
this._ctx.lineWidth = 1;
this._ctx.fillStyle = decoration.options.overviewRulerOptions.color;
this._ctx.fillRect(
decoration.options.overviewRulerOptions.position === 'full' || decoration.options.overviewRulerOptions.position === 'left' ? 0 : decoration.options.overviewRulerOptions.position === 'right' ? renderSizes[SizeIndex.OUTER_SIZE] + renderSizes[SizeIndex.INNER_SIZE]: renderSizes[SizeIndex.OUTER_SIZE],
Math.round(this._canvas.height * (decoration.options.marker.line / this._bufferService.buffers.active.lines.length)),
decoration.options.overviewRulerOptions.position === 'full' ? this._width : decoration.options.overviewRulerOptions.position === 'center' ? renderSizes[SizeIndex.INNER_SIZE] : renderSizes[SizeIndex.OUTER_SIZE],
window.devicePixelRatio * (decoration.options.overviewRulerOptions.position === 'full' ? 2 : 6)
/* x */ drawX[decoration.options.overviewRulerOptions.position!],
/* y */ Math.round(
(this._canvas.height - 1) * // -1 to ensure at least 2px are allowed for decoration on last line
(decoration.options.marker.line / this._bufferService.buffers.active.lines.length) - drawHeight[decoration.options.overviewRulerOptions.position!] / 2
),
/* w */ drawWidth[decoration.options.overviewRulerOptions.position!],
/* h */ drawHeight[decoration.options.overviewRulerOptions.position!]
);
}

private _refreshCanvasDimensions(): void {
this._canvas.style.width = `${this._width}px`;
this._canvas.style.height = `${this._screenElement.clientHeight}px`;
this._canvas.width = Math.round(this._width * window.devicePixelRatio);
this._canvas.height = Math.round(this._screenElement.clientHeight * window.devicePixelRatio);
this._refreshDrawConstants();
}

private _refreshDecorations(updateCanvasDimensions?: boolean, updateAnchor?: boolean): void {
if (updateCanvasDimensions) {
this._canvas.style.width = `${this._width}px`;
this._canvas.style.height = `${this._screenElement.clientHeight}px`;
this._canvas.width = Math.floor((this._width)* window.devicePixelRatio);
this._canvas.height = Math.floor(this._screenElement.clientHeight * window.devicePixelRatio);
this._refreshCanvasDimensions();
}
this._ctx.clearRect(0, 0, this._canvas.width, this._canvas.height);
for (const decoration of this._decorationService.decorations) {
this._renderDecoration(decoration, updateAnchor);
if (decoration.options.overviewRulerOptions!.position !== 'full') {
this._renderDecoration(decoration, updateAnchor);
}
}
for (const decoration of this._decorationService.decorations) {
if (decoration.options.overviewRulerOptions!.position === 'full') {
this._renderDecoration(decoration, updateAnchor);
}
}
}

Expand Down