Move cursor render layer to browser

addons/xterm-addon-webgl/src/renderLayer/CursorRenderLayer.ts

@@ -95,9 +95,8 @@ export class CursorRenderLayer extends BaseRenderLayer {
         });
       }
     } else {
-      if (this._cursorBlinkStateManager) {
-        this._cursorBlinkStateManager.dispose();
-      }
+      this._cursorBlinkStateManager?.dispose();
+      this._cursorBlinkStateManager = undefined;
     }
     // Request a refresh from the terminal as management of rendering is being
     // moved back to the terminal

src/Terminal.ts

@@ -48,7 +48,7 @@ import { ColorManager } from 'browser/ColorManager';
 import { RenderService } from 'browser/services/RenderService';
 import { IOptionsService, IBufferService, ICoreMouseService, ICoreService, ILogService, IDirtyRowService, IInstantiationService } from 'common/services/Services';
 import { OptionsService } from 'common/services/OptionsService';
-import { ICharSizeService, IRenderService, IMouseService, ISelectionService, ISoundService } from 'browser/services/Services';
+import { ICharSizeService, IRenderService, IMouseService, ISelectionService, ISoundService, ICoreBrowserService } from 'browser/services/Services';
 import { CharSizeService } from 'browser/services/CharSizeService';
 import { BufferService, MINIMUM_COLS, MINIMUM_ROWS } from 'common/services/BufferService';
 import { Disposable } from 'common/Lifecycle';
@@ -63,6 +63,7 @@ import { DirtyRowService } from 'common/services/DirtyRowService';
 import { InstantiationService } from 'common/services/InstantiationService';
 import { CoreMouseService } from 'common/services/CoreMouseService';
 import { WriteBuffer } from 'common/input/WriteBuffer';
+import { CoreBrowserService } from 'browser/services/CoreBrowserService';
 
 // Let it work inside Node.js for automated testing purposes.
 const document = (typeof window !== 'undefined') ? window.document : null;
@@ -313,10 +314,6 @@ export class Terminal extends Disposable implements ITerminal, IDisposable, IInp
     }
   }
 
-  public get isFocused(): boolean {
-    return document.activeElement === this.textarea && document.hasFocus();
-  }
-
   private _setupOptionsListeners(): void {
     // TODO: These listeners should be owned by individual components
     this.optionsService.onOptionChange(key => {
@@ -531,6 +528,9 @@ export class Terminal extends Disposable implements ITerminal, IDisposable, IInp
     this.register(addDisposableDomListener(this.textarea, 'blur', () => this._onTextAreaBlur()));
     this._helperContainer.appendChild(this.textarea);
 
+    const coreBrowserService = this._instantiationService.createInstance(CoreBrowserService, this.textarea);
+    this._instantiationService.setService(ICoreBrowserService, coreBrowserService);
+
     this._charSizeService = this._instantiationService.createInstance(CharSizeService, this._document, this._helperContainer);
     this._instantiationService.setService(ICharSizeService, this._charSizeService);
 
@@ -631,7 +631,7 @@ export class Terminal extends Disposable implements ITerminal, IDisposable, IInp
 
   private _createRenderer(): IRenderer {
     switch (this.options.rendererType) {
-      case 'canvas': return new Renderer(this._colorManager.colors, this, this._bufferService, this._charSizeService, this.optionsService, this._coreService);
+      case 'canvas': return new Renderer(this._colorManager.colors, this.screenElement, this.linkifier, this._bufferService, this._charSizeService, this.optionsService, this._coreService, this._coreBrowserService);
       case 'dom': return this._instantiationService.createInstance(DomRenderer, this._colorManager.colors, this.element, this.screenElement, this._viewportElement, this.linkifier);
       default: throw new Error(`Unrecognized rendererType "${this.options.rendererType}"`);
     }

src/Types.d.ts

@@ -155,7 +155,6 @@ export interface ITerminal extends IPublicTerminal, IElementAccessor, IBufferAcc
   browser: IBrowser;
   buffer: IBuffer;
   buffers: IBufferSet;
-  isFocused: boolean;
   viewport: IViewport;
   bracketedPasteMode: boolean;
   optionsService: IOptionsService;

src/browser/renderer/CursorRenderLayer.ts

@@ -4,13 +4,13 @@
  */
 
 import { IRenderDimensions, IRequestRefreshRowsEvent } from 'browser/renderer/Types';
-import { BaseRenderLayer } from '../browser/renderer/BaseRenderLayer';
-import { ITerminal } from '../Types';
+import { BaseRenderLayer } from 'browser/renderer/BaseRenderLayer';
 import { ICellData } from 'common/Types';
 import { CellData } from 'common/buffer/CellData';
 import { IColorSet } from 'browser/Types';
 import { IBufferService, IOptionsService, ICoreService } from 'common/services/Services';
 import { IEventEmitter } from 'common/EventEmitter';
+import { ICoreBrowserService } from 'browser/services/Services';
 
 interface ICursorState {
   x: number;
@@ -28,27 +28,27 @@ const BLINK_INTERVAL = 600;
 export class CursorRenderLayer extends BaseRenderLayer {
   private _state: ICursorState;
   private _cursorRenderers: {[key: string]: (x: number, y: number, cell: ICellData) => void};
-  private _cursorBlinkStateManager: CursorBlinkStateManager;
+  private _cursorBlinkStateManager: CursorBlinkStateManager | undefined;
   private _cell: ICellData = new CellData();
 
   constructor(
     container: HTMLElement,
     zIndex: number,
     colors: IColorSet,
-    private _terminal: ITerminal,
     rendererId: number,
     private _onRequestRefreshRowsEvent: IEventEmitter<IRequestRefreshRowsEvent>,
     readonly bufferService: IBufferService,
     readonly optionsService: IOptionsService,
-    private readonly _coreService: ICoreService
+    private readonly _coreService: ICoreService,
+    private readonly _coreBrowserService: ICoreBrowserService
   ) {
     super(container, 'cursor', zIndex, true, colors, rendererId, bufferService, optionsService);
     this._state = {
-      x: null,
-      y: null,
-      isFocused: null,
-      style: null,
-      width: null
+      x: 0,
+      y: 0,
+      isFocused: false,
+      style: '',
+      width: 0
     };
     this._cursorRenderers = {
       'bar': this._renderBarCursor.bind(this),
@@ -62,11 +62,11 @@ export class CursorRenderLayer extends BaseRenderLayer {
     super.resize(dim);
     // Resizing the canvas discards the contents of the canvas so clear state
     this._state = {
-      x: null,
-      y: null,
-      isFocused: null,
-      style: null,
-      width: null
+      x: 0,
+      y: 0,
+      isFocused: false,
+      style: '',
+      width: 0
     };
   }
 
@@ -74,7 +74,7 @@ export class CursorRenderLayer extends BaseRenderLayer {
     this._clearCursor();
     if (this._cursorBlinkStateManager) {
       this._cursorBlinkStateManager.dispose();
-      this._cursorBlinkStateManager = null;
+      this._cursorBlinkStateManager = undefined;
       this.onOptionsChanged();
     }
   }
@@ -97,15 +97,13 @@ export class CursorRenderLayer extends BaseRenderLayer {
   public onOptionsChanged(): void {
     if (this._optionsService.options.cursorBlink) {
       if (!this._cursorBlinkStateManager) {
-        this._cursorBlinkStateManager = new CursorBlinkStateManager(this._terminal.isFocused, () => {
+        this._cursorBlinkStateManager = new CursorBlinkStateManager(this._coreBrowserService.isFocused, () => {
           this._render(true);
         });
       }
     } else {
-      if (this._cursorBlinkStateManager) {
-        this._cursorBlinkStateManager.dispose();
-        this._cursorBlinkStateManager = null;
-      }
+      this._cursorBlinkStateManager?.dispose();
+      this._cursorBlinkStateManager = undefined;
     }
     // Request a refresh from the terminal as management of rendering is being
     // moved back to the terminal
@@ -142,12 +140,12 @@ export class CursorRenderLayer extends BaseRenderLayer {
       return;
     }
 
-    this._bufferService.buffer.lines.get(cursorY).loadCell(this._bufferService.buffer.x, this._cell);
+    this._bufferService.buffer.lines.get(cursorY)!.loadCell(this._bufferService.buffer.x, this._cell);
     if (this._cell.content === undefined) {
       return;
     }
 
-    if (!this._terminal.isFocused) {
+    if (!this._coreBrowserService.isFocused) {
       this._clearCursor();
       this._ctx.save();
       this._ctx.fillStyle = this._colors.cursor.css;
@@ -176,7 +174,7 @@ export class CursorRenderLayer extends BaseRenderLayer {
       // The cursor is already in the correct spot, don't redraw
       if (this._state.x === this._bufferService.buffer.x &&
           this._state.y === viewportRelativeCursorY &&
-          this._state.isFocused === this._terminal.isFocused &&
+          this._state.isFocused === this._coreBrowserService.isFocused &&
           this._state.style === this._optionsService.options.cursorStyle &&
           this._state.width === this._cell.getWidth()) {
         return;
@@ -199,11 +197,11 @@ export class CursorRenderLayer extends BaseRenderLayer {
     if (this._state) {
       this._clearCells(this._state.x, this._state.y, this._state.width, 1);
       this._state = {
-        x: null,
-        y: null,
-        isFocused: null,
-        style: null,
-        width: null
+        x: 0,
+        y: 0,
+        isFocused: false,
+        style: '',
+        width: 0
       };
     }
   }
@@ -242,16 +240,16 @@ export class CursorRenderLayer extends BaseRenderLayer {
 class CursorBlinkStateManager {
   public isCursorVisible: boolean;
 
-  private _animationFrame: number;
-  private _blinkStartTimeout: number;
-  private _blinkInterval: number;
+  private _animationFrame: number | undefined;
+  private _blinkStartTimeout: number | undefined;
+  private _blinkInterval: number | undefined;
 
   /**
    * The time at which the animation frame was restarted, this is used on the
    * next render to restart the timers so they don't need to restart the timers
    * multiple times over a short period.
    */
-  private _animationTimeRestarted: number;
+  private _animationTimeRestarted: number | undefined;
 
   constructor(
     isFocused: boolean,
@@ -268,15 +266,15 @@ class CursorBlinkStateManager {
   public dispose(): void {
     if (this._blinkInterval) {
       window.clearInterval(this._blinkInterval);
-      this._blinkInterval = null;
+      this._blinkInterval = undefined;
     }
     if (this._blinkStartTimeout) {
       window.clearTimeout(this._blinkStartTimeout);
-      this._blinkStartTimeout = null;
+      this._blinkStartTimeout = undefined;
     }
     if (this._animationFrame) {
       window.cancelAnimationFrame(this._animationFrame);
-      this._animationFrame = null;
+      this._animationFrame = undefined;
     }
   }
 
@@ -291,7 +289,7 @@ class CursorBlinkStateManager {
     if (!this._animationFrame) {
       this._animationFrame = window.requestAnimationFrame(() => {
         this._renderCallback();
-        this._animationFrame = null;
+        this._animationFrame = undefined;
       });
     }
   }
@@ -311,7 +309,7 @@ class CursorBlinkStateManager {
       // started
       if (this._animationTimeRestarted) {
         const time = BLINK_INTERVAL - (Date.now() - this._animationTimeRestarted);
-        this._animationTimeRestarted = null;
+        this._animationTimeRestarted = undefined;
         if (time > 0) {
           this._restartInterval(time);
           return;
@@ -322,7 +320,7 @@ class CursorBlinkStateManager {
       this.isCursorVisible = false;
       this._animationFrame = window.requestAnimationFrame(() => {
         this._renderCallback();
-        this._animationFrame = null;
+        this._animationFrame = undefined;
       });
 
       // Setup the blink interval
@@ -332,7 +330,7 @@ class CursorBlinkStateManager {
           // calc time diff
           // Make restart interval do a setTimeout initially?
           const time = BLINK_INTERVAL - (Date.now() - this._animationTimeRestarted);
-          this._animationTimeRestarted = null;
+          this._animationTimeRestarted = undefined;
           this._restartInterval(time);
           return;
         }
@@ -341,7 +339,7 @@ class CursorBlinkStateManager {
         this.isCursorVisible = !this.isCursorVisible;
         this._animationFrame = window.requestAnimationFrame(() => {
           this._renderCallback();
-          this._animationFrame = null;
+          this._animationFrame = undefined;
         });
       }, BLINK_INTERVAL);
     }, timeToStart);
@@ -351,20 +349,20 @@ class CursorBlinkStateManager {
     this.isCursorVisible = true;
     if (this._blinkInterval) {
       window.clearInterval(this._blinkInterval);
-      this._blinkInterval = null;
+      this._blinkInterval = undefined;
     }
     if (this._blinkStartTimeout) {
       window.clearTimeout(this._blinkStartTimeout);
-      this._blinkStartTimeout = null;
+      this._blinkStartTimeout = undefined;
     }
     if (this._animationFrame) {
       window.cancelAnimationFrame(this._animationFrame);
-      this._animationFrame = null;
+      this._animationFrame = undefined;
     }
   }
 
   public resume(): void {
-    this._animationTimeRestarted = null;
+    this._animationTimeRestarted = undefined;
     this._restartInterval();
     this.restartBlinkAnimation();
   }

src/browser/services/CoreBrowserService.ts

@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) 2019 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { ICoreBrowserService } from './Services';
+
+export class CoreBrowserService implements ICoreBrowserService {
+  serviceBrand: any;
+
+  constructor(
+    private _textarea: HTMLTextAreaElement
+  ) {
+  }
+
+  public get isFocused(): boolean {
+    return document.activeElement === this._textarea && document.hasFocus();
+  }
+}

src/browser/services/Services.ts

@@ -23,6 +23,13 @@ export interface ICharSizeService {
   measure(): void;
 }
 
+export const ICoreBrowserService = createDecorator<ICoreBrowserService>('CoreBrowserService');
+export interface ICoreBrowserService {
+  serviceBrand: any;
+
+  readonly isFocused: boolean;
+}
+
 export const IMouseService = createDecorator<IMouseService>('MouseService');
 export interface IMouseService {
   serviceBrand: any;

src/common/services/CoreService.ts

@@ -17,7 +17,6 @@ export class CoreService implements ICoreService {
 
   public isCursorInitialized: boolean = false;
   public isCursorHidden: boolean = false;
-  public isFocused: boolean = false;
   public decPrivateModes: IDecPrivateModes;
 
   private _onData = new EventEmitter<string>();

src/common/services/Services.ts

@@ -64,7 +64,6 @@ export interface ICoreService {
    */
   isCursorInitialized: boolean;
   isCursorHidden: boolean;
-  isFocused: boolean;
   readonly decPrivateModes: IDecPrivateModes;
 
   readonly onData: IEvent<string>;

src/renderer/Renderer.ts

@@ -3,16 +3,15 @@
  * @license MIT
  */
 
-import { TextRenderLayer } from '../browser/renderer/TextRenderLayer';
-import { SelectionRenderLayer } from '../browser/renderer/SelectionRenderLayer';
-import { CursorRenderLayer } from './CursorRenderLayer';
+import { TextRenderLayer } from 'browser/renderer/TextRenderLayer';
+import { SelectionRenderLayer } from 'browser/renderer/SelectionRenderLayer';
+import { CursorRenderLayer } from 'browser/renderer/CursorRenderLayer';
 import { IRenderLayer, IRenderer, IRenderDimensions, CharacterJoinerHandler, ICharacterJoinerRegistry, IRequestRefreshRowsEvent } from 'browser/renderer/Types';
-import { ITerminal } from '../Types';
-import { LinkRenderLayer } from '../browser/renderer/LinkRenderLayer';
+import { LinkRenderLayer } from 'browser/renderer/LinkRenderLayer';
 import { CharacterJoinerRegistry } from 'browser/renderer/CharacterJoinerRegistry';
 import { Disposable } from 'common/Lifecycle';
-import { IColorSet } from 'browser/Types';
-import { ICharSizeService } from 'browser/services/Services';
+import { IColorSet, ILinkifier } from 'browser/Types';
+import { ICharSizeService, ICoreBrowserService } from 'browser/services/Services';
 import { IBufferService, IOptionsService, ICoreService } from 'common/services/Services';
 import { removeTerminalFromCache } from 'browser/renderer/atlas/CharAtlasCache';
 import { EventEmitter, IEvent } from 'common/EventEmitter';
@@ -33,21 +32,23 @@ export class Renderer extends Disposable implements IRenderer {
 
   constructor(
     private _colors: IColorSet,
-    private readonly _terminal: ITerminal,
+    private readonly _screenElement: HTMLElement,
+    private readonly _linkifier: ILinkifier,
     private readonly _bufferService: IBufferService,
     private readonly _charSizeService: ICharSizeService,
     private readonly _optionsService: IOptionsService,
-    readonly coreService: ICoreService
+    readonly coreService: ICoreService,
+    readonly coreBrowserService: ICoreBrowserService
   ) {
     super();
     const allowTransparency = this._optionsService.options.allowTransparency;
     this._characterJoinerRegistry = new CharacterJoinerRegistry(this._bufferService);
 
     this._renderLayers = [
-      new TextRenderLayer(this._terminal.screenElement, 0, this._colors, this._characterJoinerRegistry, allowTransparency, this._id, this._bufferService, _optionsService),
-      new SelectionRenderLayer(this._terminal.screenElement, 1, this._colors, this._id, this._bufferService, _optionsService),
-      new LinkRenderLayer(this._terminal.screenElement, 2, this._colors, this._id, this._terminal.linkifier, this._bufferService, _optionsService),
-      new CursorRenderLayer(this._terminal.screenElement, 3, this._colors, this._terminal, this._id, this._onRequestRefreshRows, this._bufferService, _optionsService, coreService)
+      new TextRenderLayer(this._screenElement, 0, this._colors, this._characterJoinerRegistry, allowTransparency, this._id, this._bufferService, _optionsService),
+      new SelectionRenderLayer(this._screenElement, 1, this._colors, this._id, this._bufferService, _optionsService),
+      new LinkRenderLayer(this._screenElement, 2, this._colors, this._id, this._linkifier, this._bufferService, _optionsService),
+      new CursorRenderLayer(this._screenElement, 3, this._colors, this._id, this._onRequestRefreshRows, this._bufferService, _optionsService, coreService, coreBrowserService)
     ];
     this.dimensions = {
       scaledCharWidth: null,
@@ -101,8 +102,8 @@ export class Renderer extends Disposable implements IRenderer {
     this._renderLayers.forEach(l => l.resize(this.dimensions));
 
     // Resize the screen
-    this._terminal.screenElement.style.width = `${this.dimensions.canvasWidth}px`;
-    this._terminal.screenElement.style.height = `${this.dimensions.canvasHeight}px`;
+    this._screenElement.style.width = `${this.dimensions.canvasWidth}px`;
+    this._screenElement.style.height = `${this.dimensions.canvasHeight}px`;
   }
 
   public onCharSizeChanged(): void {