src/Viewport.ts

   1 /**
   2  * @license MIT
   3  */
   4
   5 import { ITerminal } from './Interfaces';
   6 import { CharMeasure } from './utils/CharMeasure';
   7
   8 /**
   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.
  11  */
  12 export class Viewport {
  13   private currentRowHeight: number;
  14   private lastRecordedBufferLength: number;
  15   private lastRecordedViewportHeight: number;
  16   private lastTouchY: number;
  17
  18   /**
  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.
  24    */
  25   constructor(
  26     private terminal: ITerminal,
  27     private viewportElement: HTMLElement,
  28     private scrollArea: HTMLElement,
  29     private charMeasure: CharMeasure
  30   ) {
  31     this.currentRowHeight = 0;
  32     this.lastRecordedBufferLength = 0;
  33     this.lastRecordedViewportHeight = 0;
  34
  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));
  38
  39     // Perform this async to ensure the CharMeasure is ready.
  40     setTimeout(() => this.syncScrollArea(), 0);
  41   }
  42
  43   /**
  44    * Refreshes row height, setting line-height, viewport height and scroll area height if
  45    * necessary.
  46    * @param charSize A character size measurement bounding rect object, if it doesn't exist it will
  47    *   be created.
  48    */
  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';
  56       }
  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;
  62       }
  63       this.scrollArea.style.height = (this.charMeasure.height * this.lastRecordedBufferLength) + 'px';
  64     }
  65   }
  66
  67   /**
  68    * Updates dimensions and synchronizes the scroll area if necessary.
  69    */
  70   public syncScrollArea(): void {
  71     if (this.lastRecordedBufferLength !== this.terminal.buffer.lines.length) {
  72       // If buffer height changed
  73       this.lastRecordedBufferLength = this.terminal.buffer.lines.length;
  74       this.refresh();
  75     } else if (this.lastRecordedViewportHeight !== this.terminal.rows) {
  76       // If viewport height changed
  77       this.refresh();
  78     } else {
  79       // If size has changed, refresh viewport
  80       if (this.charMeasure.height !== this.currentRowHeight) {
  81         this.refresh();
  82       }
  83     }
  84
  85     // Sync scrollTop
  86     const scrollTop = this.terminal.buffer.ydisp * this.currentRowHeight;
  87     if (this.viewportElement.scrollTop !== scrollTop) {
  88       this.viewportElement.scrollTop = scrollTop;
  89     }
  90   }
  91
  92   /**
  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.
  96    */
  97   private onScroll(ev: Event) {
  98     const newRow = Math.round(this.viewportElement.scrollTop / this.currentRowHeight);
  99     const diff = newRow - this.terminal.buffer.ydisp;
 100     this.terminal.scrollDisp(diff, true);
 101   }
 102
 103   /**
 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
 106    * `Viewport`.
 107    * @param ev The mouse wheel event.
 108    */
 109   public onWheel(ev: WheelEvent) {
 110     if (ev.deltaY === 0) {
 111       // Do nothing if it's not a vertical scroll event
 112       return;
 113     }
 114     // Fallback to WheelEvent.DOM_DELTA_PIXEL
 115     let multiplier = 1;
 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;
 120     }
 121     this.viewportElement.scrollTop += ev.deltaY * multiplier;
 122     // Prevent the page from scrolling when the terminal scrolls
 123     ev.preventDefault();
 124   };
 125
 126   /**
 127    * Handles the touchstart event, recording the touch occurred.
 128    * @param ev The touch event.
 129    */
 130   public onTouchStart(ev: TouchEvent) {
 131     this.lastTouchY = ev.touches[0].pageY;
 132   };
 133
 134   /**
 135    * Handles the touchmove event, scrolling the viewport if the position shifted.
 136    * @param ev The touch event.
 137    */
 138   public onTouchMove(ev: TouchEvent) {
 139     let deltaY = this.lastTouchY - ev.touches[0].pageY;
 140     this.lastTouchY = ev.touches[0].pageY;
 141     if (deltaY === 0) {
 142       return;
 143     }
 144     this.viewportElement.scrollTop += deltaY;
 145     ev.preventDefault();
 146   };
 147 }