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
  16   /**
  17    * Creates a new Viewport.
  18    * @param terminal The terminal this viewport belongs to.
  19    * @param viewportElement The DOM element acting as the viewport.
  20    * @param scrollArea The DOM element acting as the scroll area.
  21    * @param charMeasureElement A DOM element used to measure the character size of. the terminal.
  22    */
  23   constructor(
  24     private terminal: ITerminal,
  25     private viewportElement: HTMLElement,
  26     private scrollArea: HTMLElement,
  27     private charMeasureElement: HTMLElement
  28   ) {
  29     this.currentRowHeight = 0;
  30     this.lastRecordedBufferLength = 0;
  31     this.lastRecordedViewportHeight = 0;
  32
  33     this.terminal.on('scroll', this.syncScrollArea.bind(this));
  34     this.terminal.on('resize', this.syncScrollArea.bind(this));
  35     this.viewportElement.addEventListener('scroll', this.onScroll.bind(this));
  36
  37     this.syncScrollArea();
  38   }
  39
  40   /**
  41    * Refreshes row height, setting line-height, viewport height and scroll area height if
  42    * necessary.
  43    * @param charSize A character size measurement bounding rect object, if it doesn't exist it will
  44    *   be created.
  45    */
  46   private refresh(charSize?: ClientRect): void {
  47     var size = charSize || this.charMeasureElement.getBoundingClientRect();
  48     if (size.height > 0) {
  49       var rowHeightChanged = size.height !== this.currentRowHeight;
  50       if (rowHeightChanged) {
  51         this.currentRowHeight = size.height;
  52         this.viewportElement.style.lineHeight = size.height + 'px';
  53         this.terminal.rowContainer.style.lineHeight = size.height + 'px';
  54       }
  55       var viewportHeightChanged = this.lastRecordedViewportHeight !== this.terminal.rows;
  56       if (rowHeightChanged || viewportHeightChanged) {
  57         this.lastRecordedViewportHeight = this.terminal.rows;
  58         this.viewportElement.style.height = size.height * this.terminal.rows + 'px';
  59       }
  60       this.scrollArea.style.height = (size.height * this.lastRecordedBufferLength) + 'px';
  61     }
  62   }
  63
  64   /**
  65    * Updates dimensions and synchronizes the scroll area if necessary.
  66    */
  67   public syncScrollArea(): void {
  68     if (this.lastRecordedBufferLength !== this.terminal.lines.length) {
  69       // If buffer height changed
  70       this.lastRecordedBufferLength = this.terminal.lines.length;
  71       this.refresh();
  72     } else if (this.lastRecordedViewportHeight !== this.terminal.rows) {
  73       // If viewport height changed
  74       this.refresh();
  75     } else {
  76       // If size has changed, refresh viewport
  77       var size = this.charMeasureElement.getBoundingClientRect();
  78       if (size.height !== this.currentRowHeight) {
  79         this.refresh(size);
  80       }
  81     }
  82
  83     // Sync scrollTop
  84     var scrollTop = this.terminal.ydisp * this.currentRowHeight;
  85     if (this.viewportElement.scrollTop !== scrollTop) {
  86       this.viewportElement.scrollTop = scrollTop;
  87     }
  88   }
  89
  90   /**
  91    * Handles scroll events on the viewport, calculating the new viewport and requesting the
  92    * terminal to scroll to it.
  93    * @param ev The scroll event.
  94    */
  95   private onScroll(ev: Event) {
  96     var newRow = Math.round(this.viewportElement.scrollTop / this.currentRowHeight);
  97     var diff = newRow - this.terminal.ydisp;
  98     this.terminal.scrollDisp(diff, true);
  99   }
 100
 101   /**
 102    * Handles mouse wheel events by adjusting the viewport's scrollTop and delegating the actual
 103    * scrolling to `onScroll`, this event needs to be attached manually by the consumer of
 104    * `Viewport`.
 105    * @param ev The mouse wheel event.
 106    */
 107   public onWheel(ev: WheelEvent) {
 108     if (ev.deltaY === 0) {
 109       // Do nothing if it's not a vertical scroll event
 110       return;
 111     }
 112     // Fallback to WheelEvent.DOM_DELTA_PIXEL
 113     var multiplier = 1;
 114     if (ev.deltaMode === WheelEvent.DOM_DELTA_LINE) {
 115       multiplier = this.currentRowHeight;
 116     } else if (ev.deltaMode === WheelEvent.DOM_DELTA_PAGE) {
 117       multiplier = this.currentRowHeight * this.terminal.rows;
 118     }
 119     this.viewportElement.scrollTop += ev.deltaY * multiplier;
 120     // Prevent the page from scrolling when the terminal scrolls
 121     ev.preventDefault();
 122   };
 123 }