node_modules/xterm/src/browser/services/RenderService.ts

   1 /**
   2  * Copyright (c) 2019 The xterm.js authors. All rights reserved.
   3  * @license MIT
   4  */
   5
   6 import { IRenderer, IRenderDimensions, CharacterJoinerHandler } from 'browser/renderer/Types';
   7 import { RenderDebouncer } from 'browser/RenderDebouncer';
   8 import { EventEmitter, IEvent } from 'common/EventEmitter';
   9 import { Disposable } from 'common/Lifecycle';
  10 import { ScreenDprMonitor } from 'browser/ScreenDprMonitor';
  11 import { addDisposableDomListener } from 'browser/Lifecycle';
  12 import { IColorSet } from 'browser/Types';
  13 import { IOptionsService } from 'common/services/Services';
  14 import { ICharSizeService, IRenderService } from 'browser/services/Services';
  15
  16 export class RenderService extends Disposable implements IRenderService {
  17   serviceBrand: any;
  18
  19   private _renderDebouncer: RenderDebouncer;
  20   private _screenDprMonitor: ScreenDprMonitor;
  21
  22   private _isPaused: boolean = false;
  23   private _needsFullRefresh: boolean = false;
  24   private _canvasWidth: number = 0;
  25   private _canvasHeight: number = 0;
  26
  27   private _onDimensionsChange = new EventEmitter<IRenderDimensions>();
  28   public get onDimensionsChange(): IEvent<IRenderDimensions> { return this._onDimensionsChange.event; }
  29   private _onRender = new EventEmitter<{ start: number, end: number }>();
  30   public get onRender(): IEvent<{ start: number, end: number }> { return this._onRender.event; }
  31   private _onRefreshRequest = new EventEmitter<{ start: number, end: number }>();
  32   public get onRefreshRequest(): IEvent<{ start: number, end: number }> { return this._onRefreshRequest.event; }
  33
  34   public get dimensions(): IRenderDimensions { return this._renderer.dimensions; }
  35
  36   constructor(
  37     private _renderer: IRenderer,
  38     private _rowCount: number,
  39     readonly screenElement: HTMLElement,
  40     @IOptionsService readonly optionsService: IOptionsService,
  41     @ICharSizeService readonly charSizeService: ICharSizeService
  42   ) {
  43     super();
  44     this._renderDebouncer = new RenderDebouncer((start, end) => this._renderRows(start, end));
  45     this.register(this._renderDebouncer);
  46
  47     this._screenDprMonitor = new ScreenDprMonitor();
  48     this._screenDprMonitor.setListener(() => this.onDevicePixelRatioChange());
  49     this.register(this._screenDprMonitor);
  50
  51     this.register(optionsService.onOptionChange(() => this._renderer.onOptionsChanged()));
  52     this.register(charSizeService.onCharSizeChange(() => this.onCharSizeChanged()));
  53
  54     // dprchange should handle this case, we need this as well for browsers that don't support the
  55     // matchMedia query.
  56     this.register(addDisposableDomListener(window, 'resize', () => this.onDevicePixelRatioChange()));
  57
  58     // Detect whether IntersectionObserver is detected and enable renderer pause
  59     // and resume based on terminal visibility if so
  60     if ('IntersectionObserver' in window) {
  61       const observer = new IntersectionObserver(e => this._onIntersectionChange(e[e.length - 1]), { threshold: 0 });
  62       observer.observe(screenElement);
  63       this.register({ dispose: () => observer.disconnect() });
  64     }
  65   }
  66
  67   private _onIntersectionChange(entry: IntersectionObserverEntry): void {
  68     this._isPaused = entry.intersectionRatio === 0;
  69     if (!this._isPaused && this._needsFullRefresh) {
  70       this.refreshRows(0, this._rowCount - 1);
  71       this._needsFullRefresh = false;
  72     }
  73   }
  74
  75   public refreshRows(start: number, end: number): void {
  76     if (this._isPaused) {
  77       this._needsFullRefresh = true;
  78       return;
  79     }
  80     this._renderDebouncer.refresh(start, end, this._rowCount);
  81   }
  82
  83   private _renderRows(start: number, end: number): void {
  84     this._renderer.renderRows(start, end);
  85     this._onRender.fire({ start, end });
  86   }
  87
  88   public resize(cols: number, rows: number): void {
  89     this._rowCount = rows;
  90     this._fireOnCanvasResize();
  91   }
  92
  93   public changeOptions(): void {
  94     this._renderer.onOptionsChanged();
  95     this._fireOnCanvasResize();
  96   }
  97
  98   private _fireOnCanvasResize(): void {
  99     // Don't fire the event if the dimensions haven't changed
 100     if (this._renderer.dimensions.canvasWidth === this._canvasWidth && this._renderer.dimensions.canvasHeight === this._canvasHeight) {
 101       return;
 102     }
 103     this._onDimensionsChange.fire(this._renderer.dimensions);
 104   }
 105
 106   public dispose(): void {
 107     this._renderer.dispose();
 108   }
 109
 110   public setRenderer(renderer: IRenderer): void {
 111     // TODO: RenderService should be the only one to dispose the renderer
 112     this._renderer.dispose();
 113     this._renderer = renderer;
 114     this.refreshRows(0, this._rowCount - 1);
 115   }
 116
 117   private _fullRefresh(): void {
 118     if (this._isPaused) {
 119       this._needsFullRefresh = true;
 120     } else {
 121       this.refreshRows(0, this._rowCount - 1);
 122     }
 123   }
 124
 125   public setColors(colors: IColorSet): void {
 126     this._renderer.setColors(colors);
 127     this._fullRefresh();
 128   }
 129
 130   public onDevicePixelRatioChange(): void {
 131     this._renderer.onDevicePixelRatioChange();
 132     this.refreshRows(0, this._rowCount - 1);
 133   }
 134
 135   public onResize(cols: number, rows: number): void {
 136     this._renderer.onResize(cols, rows);
 137     this._fullRefresh();
 138   }
 139
 140   // TODO: Is this useful when we have onResize?
 141   public onCharSizeChanged(): void {
 142     this._renderer.onCharSizeChanged();
 143   }
 144
 145   public onBlur(): void {
 146     this._renderer.onBlur();
 147   }
 148
 149   public onFocus(): void {
 150     this._renderer.onFocus();
 151   }
 152
 153   public onSelectionChanged(start: [number, number], end: [number, number], columnSelectMode: boolean): void {
 154     this._renderer.onSelectionChanged(start, end, columnSelectMode);
 155   }
 156
 157   public onCursorMove(): void {
 158     this._renderer.onCursorMove();
 159   }
 160
 161   public clear(): void {
 162     this._renderer.clear();
 163   }
 164
 165   public registerCharacterJoiner(handler: CharacterJoinerHandler): number {
 166     return this._renderer.registerCharacterJoiner(handler);
 167   }
 168
 169   public deregisterCharacterJoiner(joinerId: number): boolean {
 170     return this._renderer.deregisterCharacterJoiner(joinerId);
 171   }
 172 }