/**
- * xterm.js: xterm, in the browser
- * Copyright (c) 2014-2016, SourceLair Private Company (www.sourcelair.com (MIT License)
+ * @license MIT
*/
+import { ITerminal } from './Interfaces';
+import { CharMeasure } from './utils/CharMeasure';
+
/**
* Represents the viewport of a terminal, the visible area within the larger buffer of output.
* Logic for the virtual scroll bar is included in this object.
- * @param {Terminal} terminal The Terminal object.
- * @param {HTMLElement} viewportElement The DOM element acting as the viewport
- * @param {HTMLElement} charMeasureElement A DOM element used to measure the character size of
- * the terminal.
*/
-function Viewport(terminal, viewportElement, scrollArea, charMeasureElement) {
- this.terminal = terminal;
- this.viewportElement = viewportElement;
- this.scrollArea = scrollArea;
- this.charMeasureElement = charMeasureElement;
- this.currentRowHeight = 0;
- this.lastRecordedBufferLength = 0;
- this.lastRecordedViewportHeight = 0;
+export class Viewport {
+ private currentRowHeight: number;
+ private lastRecordedBufferLength: number;
+ private lastRecordedViewportHeight: number;
+ private lastTouchY: number;
- this.terminal.on('scroll', this.syncScrollArea.bind(this));
- this.terminal.on('resize', this.syncScrollArea.bind(this));
- this.viewportElement.addEventListener('scroll', this.onScroll.bind(this));
+ /**
+ * Creates a new Viewport.
+ * @param terminal The terminal this viewport belongs to.
+ * @param viewportElement The DOM element acting as the viewport.
+ * @param scrollArea The DOM element acting as the scroll area.
+ * @param charMeasure A DOM element used to measure the character size of. the terminal.
+ */
+ constructor(
+ private terminal: ITerminal,
+ private viewportElement: HTMLElement,
+ private scrollArea: HTMLElement,
+ private charMeasure: CharMeasure
+ ) {
+ this.currentRowHeight = 0;
+ this.lastRecordedBufferLength = 0;
+ this.lastRecordedViewportHeight = 0;
- this.syncScrollArea();
-}
+ this.terminal.on('scroll', this.syncScrollArea.bind(this));
+ this.terminal.on('resize', this.syncScrollArea.bind(this));
+ this.viewportElement.addEventListener('scroll', this.onScroll.bind(this));
-/**
- * Refreshes row height, setting line-height, viewport height and scroll area height if
- * necessary.
- * @param {number|undefined} charSize A character size measurement bounding rect object, if it
- * doesn't exist it will be created.
- */
-Viewport.prototype.refresh = function(charSize) {
- var size = charSize || this.charMeasureElement.getBoundingClientRect();
- if (size.height > 0) {
- var rowHeightChanged = size.height !== this.currentRowHeight;
- if (rowHeightChanged) {
- this.currentRowHeight = size.height;
- this.viewportElement.style.lineHeight = size.height + 'px';
- this.terminal.rowContainer.style.lineHeight = size.height + 'px';
- }
- var viewportHeightChanged = this.lastRecordedViewportHeight !== this.terminal.rows;
- if (rowHeightChanged || viewportHeightChanged) {
- this.lastRecordedViewportHeight = this.terminal.rows;
- this.viewportElement.style.height = size.height * this.terminal.rows + 'px';
+ // Perform this async to ensure the CharMeasure is ready.
+ setTimeout(() => this.syncScrollArea(), 0);
+ }
+
+ /**
+ * Refreshes row height, setting line-height, viewport height and scroll area height if
+ * necessary.
+ */
+ private refresh(): void {
+ if (this.charMeasure.height > 0) {
+ const rowHeightChanged = this.charMeasure.height !== this.currentRowHeight;
+ if (rowHeightChanged) {
+ this.currentRowHeight = this.charMeasure.height;
+ this.viewportElement.style.lineHeight = this.charMeasure.height + 'px';
+ this.terminal.rowContainer.style.lineHeight = this.charMeasure.height + 'px';
+ }
+ const viewportHeightChanged = this.lastRecordedViewportHeight !== this.terminal.rows;
+ if (rowHeightChanged || viewportHeightChanged) {
+ this.lastRecordedViewportHeight = this.terminal.rows;
+ this.viewportElement.style.height = this.charMeasure.height * this.terminal.rows + 'px';
+ this.terminal.selectionContainer.style.height = this.viewportElement.style.height;
+ }
+ this.scrollArea.style.height = (this.charMeasure.height * this.lastRecordedBufferLength) + 'px';
}
- this.scrollArea.style.height = (size.height * this.lastRecordedBufferLength) + 'px';
}
-};
-/**
- * Updates dimensions and synchronizes the scroll area if necessary.
- */
-Viewport.prototype.syncScrollArea = function() {
- if (this.lastRecordedBufferLength !== this.terminal.lines.length) {
- // If buffer height changed
- this.lastRecordedBufferLength = this.terminal.lines.length;
- this.refresh();
- } else if (this.lastRecordedViewportHeight !== this.terminal.rows) {
- // If viewport height changed
- this.refresh();
- } else {
- // If size has changed, refresh viewport
- var size = this.charMeasureElement.getBoundingClientRect();
- if (size.height !== this.currentRowHeight) {
- this.refresh(size);
+ /**
+ * Updates dimensions and synchronizes the scroll area if necessary.
+ */
+ public syncScrollArea(): void {
+ if (this.lastRecordedBufferLength !== this.terminal.buffer.lines.length) {
+ // If buffer height changed
+ this.lastRecordedBufferLength = this.terminal.buffer.lines.length;
+ this.refresh();
+ } else if (this.lastRecordedViewportHeight !== this.terminal.rows) {
+ // If viewport height changed
+ this.refresh();
+ } else {
+ // If size has changed, refresh viewport
+ if (this.charMeasure.height !== this.currentRowHeight) {
+ this.refresh();
+ }
+ }
+
+ // Sync scrollTop
+ const scrollTop = this.terminal.buffer.ydisp * this.currentRowHeight;
+ if (this.viewportElement.scrollTop !== scrollTop) {
+ this.viewportElement.scrollTop = scrollTop;
}
}
- // Sync scrollTop
- var scrollTop = this.terminal.ydisp * this.currentRowHeight;
- if (this.viewportElement.scrollTop !== scrollTop) {
- this.viewportElement.scrollTop = scrollTop;
+ /**
+ * Handles scroll events on the viewport, calculating the new viewport and requesting the
+ * terminal to scroll to it.
+ * @param ev The scroll event.
+ */
+ private onScroll(ev: Event) {
+ const newRow = Math.round(this.viewportElement.scrollTop / this.currentRowHeight);
+ const diff = newRow - this.terminal.buffer.ydisp;
+ this.terminal.scrollDisp(diff, true);
}
-};
-/**
- * Handles scroll events on the viewport, calculating the new viewport and requesting the
- * terminal to scroll to it.
- * @param {Event} ev The scroll event.
- */
-Viewport.prototype.onScroll = function(ev) {
- var newRow = Math.round(this.viewportElement.scrollTop / this.currentRowHeight);
- var diff = newRow - this.terminal.ydisp;
- this.terminal.scrollDisp(diff, true);
-};
+ /**
+ * Handles mouse wheel events by adjusting the viewport's scrollTop and delegating the actual
+ * scrolling to `onScroll`, this event needs to be attached manually by the consumer of
+ * `Viewport`.
+ * @param ev The mouse wheel event.
+ */
+ public onWheel(ev: WheelEvent) {
+ if (ev.deltaY === 0) {
+ // Do nothing if it's not a vertical scroll event
+ return;
+ }
+ // Fallback to WheelEvent.DOM_DELTA_PIXEL
+ let multiplier = 1;
+ if (ev.deltaMode === WheelEvent.DOM_DELTA_LINE) {
+ multiplier = this.currentRowHeight;
+ } else if (ev.deltaMode === WheelEvent.DOM_DELTA_PAGE) {
+ multiplier = this.currentRowHeight * this.terminal.rows;
+ }
+ this.viewportElement.scrollTop += ev.deltaY * multiplier;
+ // Prevent the page from scrolling when the terminal scrolls
+ ev.preventDefault();
+ };
-/**
- * Handles mouse wheel events by adjusting the viewport's scrollTop and delegating the actual
- * scrolling to `onScroll`, this event needs to be attached manually by the consumer of
- * `Viewport`.
- * @param {WheelEvent} ev The mouse wheel event.
- */
-Viewport.prototype.onWheel = function(ev) {
- if (ev.deltaY === 0) {
- // Do nothing if it's not a vertical scroll event
- return;
- }
- // Fallback to WheelEvent.DOM_DELTA_PIXEL
- var multiplier = 1;
- if (ev.deltaMode === WheelEvent.DOM_DELTA_LINE) {
- multiplier = this.currentRowHeight;
- } else if (ev.deltaMode === WheelEvent.DOM_DELTA_PAGE) {
- multiplier = this.currentRowHeight * this.terminal.rows;
- }
- this.viewportElement.scrollTop += ev.deltaY * multiplier;
- // Prevent the page from scrolling when the terminal scrolls
- ev.preventDefault();
-};
+ /**
+ * Handles the touchstart event, recording the touch occurred.
+ * @param ev The touch event.
+ */
+ public onTouchStart(ev: TouchEvent) {
+ this.lastTouchY = ev.touches[0].pageY;
+ };
-export { Viewport };
+ /**
+ * Handles the touchmove event, scrolling the viewport if the position shifted.
+ * @param ev The touch event.
+ */
+ public onTouchMove(ev: TouchEvent) {
+ let deltaY = this.lastTouchY - ev.touches[0].pageY;
+ this.lastTouchY = ev.touches[0].pageY;
+ if (deltaY === 0) {
+ return;
+ }
+ this.viewportElement.scrollTop += deltaY;
+ ev.preventDefault();
+ };
+}
projects / mirror_xterm.js.git / blobdiff