5 import { ITerminal } from './Interfaces';
6 import { CharMeasure } from './utils/CharMeasure';
9 * Represents the viewport of a terminal, the visible area within the larger buffer of output.
10 * Logic for the virtual scroll bar is included in this object.
12 export class Viewport {
13 private currentRowHeight: number;
14 private lastRecordedBufferLength: number;
15 private lastRecordedViewportHeight: number;
16 private lastTouchY: number;
19 * Creates a new Viewport.
20 * @param terminal The terminal this viewport belongs to.
21 * @param viewportElement The DOM element acting as the viewport.
22 * @param scrollArea The DOM element acting as the scroll area.
23 * @param charMeasureElement A DOM element used to measure the character size of. the terminal.
26 private terminal: ITerminal,
27 private viewportElement: HTMLElement,
28 private scrollArea: HTMLElement,
29 private charMeasure: CharMeasure
31 this.currentRowHeight = 0;
32 this.lastRecordedBufferLength = 0;
33 this.lastRecordedViewportHeight = 0;
35 this.terminal.on('scroll', this.syncScrollArea.bind(this));
36 this.terminal.on('resize', this.syncScrollArea.bind(this));
37 this.viewportElement.addEventListener('scroll', this.onScroll.bind(this));
39 // Perform this async to ensure the CharMeasure is ready.
40 setTimeout(() => this.syncScrollArea(), 0);
44 * Refreshes row height, setting line-height, viewport height and scroll area height if
46 * @param charSize A character size measurement bounding rect object, if it doesn't exist it will
49 private refresh(): void {
50 if (this.charMeasure.height > 0) {
51 const rowHeightChanged = this.charMeasure.height !== this.currentRowHeight;
52 if (rowHeightChanged) {
53 this.currentRowHeight = this.charMeasure.height;
54 this.viewportElement.style.lineHeight = this.charMeasure.height + 'px';
55 this.terminal.rowContainer.style.lineHeight = this.charMeasure.height + 'px';
57 const viewportHeightChanged = this.lastRecordedViewportHeight !== this.terminal.rows;
58 if (rowHeightChanged || viewportHeightChanged) {
59 this.lastRecordedViewportHeight = this.terminal.rows;
60 this.viewportElement.style.height = this.charMeasure.height * this.terminal.rows + 'px';
61 this.terminal.selectionContainer.style.height = this.viewportElement.style.height;
63 this.scrollArea.style.height = (this.charMeasure.height * this.lastRecordedBufferLength) + 'px';
68 * Updates dimensions and synchronizes the scroll area if necessary.
70 public syncScrollArea(): void {
71 if (this.lastRecordedBufferLength !== this.terminal.lines.length) {
72 // If buffer height changed
73 this.lastRecordedBufferLength = this.terminal.lines.length;
75 } else if (this.lastRecordedViewportHeight !== this.terminal.rows) {
76 // If viewport height changed
79 // If size has changed, refresh viewport
80 if (this.charMeasure.height !== this.currentRowHeight) {
86 const scrollTop = this.terminal.ydisp * this.currentRowHeight;
87 if (this.viewportElement.scrollTop !== scrollTop) {
88 this.viewportElement.scrollTop = scrollTop;
93 * Handles scroll events on the viewport, calculating the new viewport and requesting the
94 * terminal to scroll to it.
95 * @param ev The scroll event.
97 private onScroll(ev: Event) {
98 const newRow = Math.round(this.viewportElement.scrollTop / this.currentRowHeight);
99 const diff = newRow - this.terminal.ydisp;
100 this.terminal.scrollDisp(diff, true);
104 * Handles mouse wheel events by adjusting the viewport's scrollTop and delegating the actual
105 * scrolling to `onScroll`, this event needs to be attached manually by the consumer of
107 * @param ev The mouse wheel event.
109 public onWheel(ev: WheelEvent) {
110 if (ev.deltaY === 0) {
111 // Do nothing if it's not a vertical scroll event
114 // Fallback to WheelEvent.DOM_DELTA_PIXEL
116 if (ev.deltaMode === WheelEvent.DOM_DELTA_LINE) {
117 multiplier = this.currentRowHeight;
118 } else if (ev.deltaMode === WheelEvent.DOM_DELTA_PAGE) {
119 multiplier = this.currentRowHeight * this.terminal.rows;
121 this.viewportElement.scrollTop += ev.deltaY * multiplier;
122 // Prevent the page from scrolling when the terminal scrolls
127 * Handles the touchstart event, recording the touch occurred.
128 * @param ev The touch event.
130 public onTouchStart(ev: TouchEvent) {
131 this.lastTouchY = ev.touches[0].pageY;
135 * Handles the touchmove event, scrolling the viewport if the position shifted.
136 * @param ev The touch event.
138 public onTouchMove(ev: TouchEvent) {
139 let deltaY = this.lastTouchY - ev.touches[0].pageY;
140 this.lastTouchY = ev.touches[0].pageY;
144 this.viewportElement.scrollTop += deltaY;