*/
import { ITerminal } from './Interfaces';
+import { CharMeasure } from './utils/CharMeasure';
/**
* Represents the viewport of a terminal, the visible area within the larger buffer of output.
private currentRowHeight: number;
private lastRecordedBufferLength: number;
private lastRecordedViewportHeight: number;
- private isRefreshQueued: boolean;
/**
* Creates a new Viewport.
private terminal: ITerminal,
private viewportElement: HTMLElement,
private scrollArea: HTMLElement,
- private charMeasureElement: HTMLElement
+ private charMeasure: CharMeasure
) {
this.currentRowHeight = 0;
this.lastRecordedBufferLength = 0;
this.lastRecordedViewportHeight = 0;
- this.isRefreshQueued = false;
this.terminal.on('scroll', this.syncScrollArea.bind(this));
this.terminal.on('resize', this.syncScrollArea.bind(this));
this.viewportElement.addEventListener('scroll', this.onScroll.bind(this));
- this.syncScrollArea();
- this.refreshLoop();
- }
-
- /**
- * Queues a refresh to be done on next animation frame.
- */
- private refreshLoop(): void {
- if (this.isRefreshQueued) {
- this.refresh();
- this.isRefreshQueued = false;
- }
- window.requestAnimationFrame(this.refreshLoop.bind(this));
+ // Perform this async to ensure the CharMeasure is ready.
+ setTimeout(() => this.syncScrollArea(), 0);
}
/**
* @param charSize A character size measurement bounding rect object, if it doesn't exist it will
* be created.
*/
- private refresh(charSize?: ClientRect): void {
- var size = charSize || this.charMeasureElement.getBoundingClientRect();
- if (size.height > 0) {
- var rowHeightChanged = size.height !== this.currentRowHeight;
+ private refresh(): void {
+ if (this.charMeasure.height > 0) {
+ const rowHeightChanged = this.charMeasure.height !== this.currentRowHeight;
if (rowHeightChanged) {
- this.currentRowHeight = size.height;
- this.viewportElement.style.lineHeight = size.height + 'px';
- this.terminal.rowContainer.style.lineHeight = size.height + 'px';
+ this.currentRowHeight = this.charMeasure.height;
+ this.viewportElement.style.lineHeight = this.charMeasure.height + 'px';
+ this.terminal.rowContainer.style.lineHeight = this.charMeasure.height + 'px';
}
- var viewportHeightChanged = this.lastRecordedViewportHeight !== this.terminal.rows;
+ const viewportHeightChanged = this.lastRecordedViewportHeight !== this.terminal.rows;
if (rowHeightChanged || viewportHeightChanged) {
this.lastRecordedViewportHeight = this.terminal.rows;
- this.viewportElement.style.height = size.height * this.terminal.rows + 'px';
+ this.viewportElement.style.height = this.charMeasure.height * this.terminal.rows + 'px';
+ this.terminal.selectionContainer.style.height = this.viewportElement.style.height;
}
- this.scrollArea.style.height = (size.height * this.lastRecordedBufferLength) + 'px';
+ this.scrollArea.style.height = (this.charMeasure.height * this.lastRecordedBufferLength) + 'px';
}
}
if (this.lastRecordedBufferLength !== this.terminal.lines.length) {
// If buffer height changed
this.lastRecordedBufferLength = this.terminal.lines.length;
- this.isRefreshQueued = true;
+ this.refresh();
} else if (this.lastRecordedViewportHeight !== this.terminal.rows) {
// If viewport height changed
- this.isRefreshQueued = true;
+ this.refresh();
} else {
// If size has changed, refresh viewport
- var size = this.charMeasureElement.getBoundingClientRect();
- if (size.height !== this.currentRowHeight) {
- this.isRefreshQueued = true;
+ if (this.charMeasure.height !== this.currentRowHeight) {
+ this.refresh();
}
}
// Sync scrollTop
- var scrollTop = this.terminal.ydisp * this.currentRowHeight;
+ const scrollTop = this.terminal.ydisp * this.currentRowHeight;
if (this.viewportElement.scrollTop !== scrollTop) {
this.viewportElement.scrollTop = scrollTop;
}
* @param ev The scroll event.
*/
private onScroll(ev: Event) {
- var newRow = Math.round(this.viewportElement.scrollTop / this.currentRowHeight);
- var diff = newRow - this.terminal.ydisp;
+ const newRow = Math.round(this.viewportElement.scrollTop / this.currentRowHeight);
+ const diff = newRow - this.terminal.ydisp;
this.terminal.scrollDisp(diff, true);
}
return;
}
// Fallback to WheelEvent.DOM_DELTA_PIXEL
- var multiplier = 1;
+ let multiplier = 1;
if (ev.deltaMode === WheelEvent.DOM_DELTA_LINE) {
multiplier = this.currentRowHeight;
} else if (ev.deltaMode === WheelEvent.DOM_DELTA_PAGE) {