Merge pull request #926 from ficristo/search-fix

[mirror_xterm.js.git] / src / Viewport.ts

diff --git a/src/Viewport.ts b/src/Viewport.ts
index 013ae65a1830b3c85e83a5bf12e6a3ffe74dc214..fe276935bb7b507f67f115598c038e53c12b398a 100644 (file)
--- a/src/Viewport.ts
+++ b/src/Viewport.ts
@@ -13,13 +13,14 @@ export class Viewport {
   private currentRowHeight: number;
   private lastRecordedBufferLength: number;
   private lastRecordedViewportHeight: number;
+  private lastTouchY: number;
 
   /**
    * 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 charMeasureElement A DOM element used to measure the character size of. the terminal.
+   * @param charMeasure A DOM element used to measure the character size of. the terminal.
    */
   constructor(
     private terminal: ITerminal,
@@ -35,27 +36,27 @@ export class Viewport {
     this.terminal.on('resize', this.syncScrollArea.bind(this));
     this.viewportElement.addEventListener('scroll', this.onScroll.bind(this));
 
-    this.syncScrollArea();
+    // 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.
-   * @param charSize A character size measurement bounding rect object, if it doesn't exist it will
-   *   be created.
    */
   private refresh(): void {
     if (this.charMeasure.height > 0) {
-      var rowHeightChanged = this.charMeasure.height !== this.currentRowHeight;
+      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';
       }
-      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 = 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';
     }
@@ -65,9 +66,9 @@ export class Viewport {
    * Updates dimensions and synchronizes the scroll area if necessary.
    */
   public syncScrollArea(): void {
-    if (this.lastRecordedBufferLength !== this.terminal.lines.length) {
+    if (this.lastRecordedBufferLength !== this.terminal.buffer.lines.length) {
       // If buffer height changed
-      this.lastRecordedBufferLength = this.terminal.lines.length;
+      this.lastRecordedBufferLength = this.terminal.buffer.lines.length;
       this.refresh();
     } else if (this.lastRecordedViewportHeight !== this.terminal.rows) {
       // If viewport height changed
@@ -80,7 +81,7 @@ export class Viewport {
     }
 
     // Sync scrollTop
-    var scrollTop = this.terminal.ydisp * this.currentRowHeight;
+    const scrollTop = this.terminal.buffer.ydisp * this.currentRowHeight;
     if (this.viewportElement.scrollTop !== scrollTop) {
       this.viewportElement.scrollTop = scrollTop;
     }
@@ -92,8 +93,8 @@ export class Viewport {
    * @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.buffer.ydisp;
     this.terminal.scrollDisp(diff, true);
   }
 
@@ -109,7 +110,7 @@ export class Viewport {
       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) {
@@ -119,4 +120,26 @@ export class Viewport {
     // 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;
+  };
+
+  /**
+   * 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();
+  };
 }