src/Viewport.ts

   1 /**
   2  * @license MIT
   3  */
   4
   5 import { ITerminal } from './Interfaces';
   6
   7 /**
   8  * Represents the viewport of a terminal, the visible area within the larger buffer of output.
   9  * Logic for the virtual scroll bar is included in this object.
  10  */
  11 export class Viewport {
  12   private currentRowHeight: number;
  13   private lastRecordedBufferLength: number;
  14   private lastRecordedViewportHeight: number;
  15   private isRefreshQueued: boolean;
  16
  17   /**
  18    * Creates a new Viewport.
  19    * @param terminal The terminal this viewport belongs to.
  20    * @param viewportElement The DOM element acting as the viewport.
  21    * @param scrollArea The DOM element acting as the scroll area.
  22    * @param charMeasureElement A DOM element used to measure the character size of. the terminal.
  23    */
  24   constructor(
  25     private terminal: ITerminal,
  26     private viewportElement: HTMLElement,
  27     private scrollArea: HTMLElement,
  28     private charMeasureElement: HTMLElement
  29   ) {
  30     this.currentRowHeight = 0;
  31     this.lastRecordedBufferLength = 0;
  32     this.lastRecordedViewportHeight = 0;
  33     this.isRefreshQueued = false;
  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     this.syncScrollArea();
  40     this.refreshLoop();
  41   }
  42
  43   /**
  44    * Queues a refresh to be done on next animation frame.
  45    */
  46   private refreshLoop(): void {
  47     if (this.isRefreshQueued) {
  48       this.refresh();
  49       this.isRefreshQueued = false;
  50     }
  51     window.requestAnimationFrame(this.refreshLoop.bind(this));
  52   }
  53
  54   /**
  55    * Refreshes row height, setting line-height, viewport height and scroll area height if
  56    * necessary.
  57    * @param charSize A character size measurement bounding rect object, if it doesn't exist it will
  58    *   be created.
  59    */
  60   private refresh(charSize?: ClientRect): void {
  61     var size = charSize || this.charMeasureElement.getBoundingClientRect();
  62     if (size.height > 0) {
  63       var rowHeightChanged = size.height !== this.currentRowHeight;
  64       if (rowHeightChanged) {
  65         this.currentRowHeight = size.height;
  66         this.viewportElement.style.lineHeight = size.height + 'px';
  67         this.terminal.rowContainer.style.lineHeight = size.height + 'px';
  68       }
  69       var viewportHeightChanged = this.lastRecordedViewportHeight !== this.terminal.rows;
  70       if (rowHeightChanged || viewportHeightChanged) {
  71         this.lastRecordedViewportHeight = this.terminal.rows;
  72         this.viewportElement.style.height = size.height * this.terminal.rows + 'px';
  73       }
  74       this.scrollArea.style.height = (size.height * this.lastRecordedBufferLength) + 'px';
  75     }
  76   }
  77
  78   /**
  79    * Updates dimensions and synchronizes the scroll area if necessary.
  80    */
  81   public syncScrollArea(): void {
  82     if (this.lastRecordedBufferLength !== this.terminal.lines.length) {
  83       // If buffer height changed
  84       this.lastRecordedBufferLength = this.terminal.lines.length;
  85       this.isRefreshQueued = true;
  86     } else if (this.lastRecordedViewportHeight !== this.terminal.rows) {
  87       // If viewport height changed
  88       this.isRefreshQueued = true;
  89     } else {
  90       // If size has changed, refresh viewport
  91       var size = this.charMeasureElement.getBoundingClientRect();
  92       if (size.height !== this.currentRowHeight) {
  93         this.isRefreshQueued = true;
  94       }
  95     }
  96
  97     // Sync scrollTop
  98     var scrollTop = this.terminal.ydisp * this.currentRowHeight;
  99     if (this.viewportElement.scrollTop !== scrollTop) {
 100       this.viewportElement.scrollTop = scrollTop;
 101     }
 102   }
 103
 104   /**
 105    * Handles scroll events on the viewport, calculating the new viewport and requesting the
 106    * terminal to scroll to it.
 107    * @param ev The scroll event.
 108    */
 109   private onScroll(ev: Event) {
 110     var newRow = Math.round(this.viewportElement.scrollTop / this.currentRowHeight);
 111     var diff = newRow - this.terminal.ydisp;
 112     this.terminal.scrollDisp(diff, true);
 113   }
 114
 115   /**
 116    * Handles mouse wheel events by adjusting the viewport's scrollTop and delegating the actual
 117    * scrolling to `onScroll`, this event needs to be attached manually by the consumer of
 118    * `Viewport`.
 119    * @param ev The mouse wheel event.
 120    */
 121   public onWheel(ev: WheelEvent) {
 122     if (ev.deltaY === 0) {
 123       // Do nothing if it's not a vertical scroll event
 124       return;
 125     }
 126     // Fallback to WheelEvent.DOM_DELTA_PIXEL
 127     var multiplier = 1;
 128     if (ev.deltaMode === WheelEvent.DOM_DELTA_LINE) {
 129       multiplier = this.currentRowHeight;
 130     } else if (ev.deltaMode === WheelEvent.DOM_DELTA_PAGE) {
 131       multiplier = this.currentRowHeight * this.terminal.rows;
 132     }
 133     this.viewportElement.scrollTop += ev.deltaY * multiplier;
 134     // Prevent the page from scrolling when the terminal scrolls
 135     ev.preventDefault();
 136   };
 137 }