diff --git a/src/AccessibilityManager.ts b/src/AccessibilityManager.ts index aabb5b6f..bc1dcdd0 100644 --- a/src/AccessibilityManager.ts +++ b/src/AccessibilityManager.ts @@ -9,6 +9,7 @@ import { isMac } from './common/Platform'; import { RenderDebouncer } from './ui/RenderDebouncer'; import { addDisposableDomListener } from './ui/Lifecycle'; import { Disposable } from './common/Lifecycle'; +import { ScreenDprMonitor } from './ui/ScreenDprMonitor'; const MAX_ROWS_TO_READ = 20; @@ -25,6 +26,7 @@ export class AccessibilityManager extends Disposable { private _liveRegionLineCount: number = 0; private _renderRowsDebouncer: RenderDebouncer; + private _screenDprMonitor: ScreenDprMonitor; private _topBoundaryFocusListener: (e: FocusEvent) => void; private _bottomBoundaryFocusListener: (e: FocusEvent) => void; @@ -81,12 +83,12 @@ export class AccessibilityManager extends Disposable { this.register(this._terminal.addDisposableListener('a11y.tab', spaceCount => this._onTab(spaceCount))); this.register(this._terminal.onKey(e => this._onKey(e.key))); this.register(this._terminal.addDisposableListener('blur', () => this._clearLiveRegion())); - // TODO: Maybe renderer should fire an event on terminal when the characters change and that - // should be listened to instead? That would mean that the order of events are always - // guarenteed - this.register(this._terminal.addDisposableListener('dprchange', () => this.refreshRowsDimensions())); + + this._screenDprMonitor = new ScreenDprMonitor(); + this.register(this._screenDprMonitor); + this._screenDprMonitor.setListener(() => this.refreshRowsDimensions()); // This shouldn't be needed on modern browsers but is present in case the - // media query that drives the dprchange event isn't supported + // media query that drives the ScreenDprMonitor isn't supported this.register(addDisposableDomListener(window, 'resize', () => this.refreshRowsDimensions())); } diff --git a/src/Terminal.ts b/src/Terminal.ts index 4f91d27e..d82b5bf3 100644 --- a/src/Terminal.ts +++ b/src/Terminal.ts @@ -42,7 +42,6 @@ import { MouseHelper } from './MouseHelper'; import { DEFAULT_BELL_SOUND, SoundManager } from './SoundManager'; import { MouseZoneManager } from './MouseZoneManager'; import { AccessibilityManager } from './AccessibilityManager'; -import { ScreenDprMonitor } from './ui/ScreenDprMonitor'; import { ITheme, IMarker, IDisposable, ISelectionPosition } from 'xterm'; import { removeTerminalFromCache } from './renderer/atlas/CharAtlasCache'; import { DomRenderer } from './renderer/dom/DomRenderer'; @@ -216,7 +215,6 @@ export class Terminal extends EventEmitter implements ITerminal, IDisposable, II public mouseHelper: MouseHelper; private _accessibilityManager: AccessibilityManager; private _colorManager: ColorManager; - private _screenDprMonitor: ScreenDprMonitor; private _theme: ITheme; private _windowsMode: IDisposable | undefined; @@ -707,10 +705,6 @@ export class Terminal extends EventEmitter implements ITerminal, IDisposable, II this._context = this._parent.ownerDocument.defaultView; this._document = this._parent.ownerDocument; - this._screenDprMonitor = new ScreenDprMonitor(); - this._screenDprMonitor.setListener(() => this.emit('dprchange', window.devicePixelRatio)); - this.register(this._screenDprMonitor); - // Create main element container this.element = this._document.createElement('div'); this.element.dir = 'ltr'; // xterm.css assumes LTR @@ -784,7 +778,6 @@ export class Terminal extends EventEmitter implements ITerminal, IDisposable, II this.register(this.onResize(() => this.renderer.onResize(this.cols, this.rows))); this.register(this.addDisposableListener('blur', () => this.renderer.onBlur())); this.register(this.addDisposableListener('focus', () => this.renderer.onFocus())); - this.register(this.addDisposableListener('dprchange', () => this.renderer.onWindowResize(window.devicePixelRatio))); // dprchange should handle this case, we need this as well for browsers that don't support the // matchMedia query. this.register(addDisposableDomListener(window, 'resize', () => this.renderer.onWindowResize(window.devicePixelRatio))); diff --git a/src/renderer/RenderCoordinator.ts b/src/renderer/RenderCoordinator.ts index 8ee3fb69..3b9eed2d 100644 --- a/src/renderer/RenderCoordinator.ts +++ b/src/renderer/RenderCoordinator.ts @@ -6,9 +6,12 @@ import { IRenderer } from './Types'; import { RenderDebouncer } from '../ui/RenderDebouncer'; import { EventEmitter2, IEvent } from '../common/EventEmitter2'; +import { Disposable } from '../common/Lifecycle'; +import { ScreenDprMonitor } from '../../lib/ui/ScreenDprMonitor'; -export class RenderCoordinator { +export class RenderCoordinator extends Disposable { private _renderDebouncer: RenderDebouncer; + private _screenDprMonitor: ScreenDprMonitor; private _onCanvasResize = new EventEmitter2<{ width: number, height: number }>(); public get onCanvasResize(): IEvent<{ width: number, height: number }> { return this._onCanvasResize.event; } @@ -22,7 +25,13 @@ export class RenderCoordinator { private _renderer: IRenderer, private _rowCount: number ) { + super(); this._renderDebouncer = new RenderDebouncer((start, end) => this._renderRows(start, end)); + this.register(this._renderDebouncer); + + this._screenDprMonitor = new ScreenDprMonitor(); + this._screenDprMonitor.setListener(() => this._renderer.onWindowResize(window.devicePixelRatio)); + this.register(this._screenDprMonitor); } public refreshRows(start: number, end: number): void { diff --git a/src/renderer/Renderer.ts b/src/renderer/Renderer.ts index 240e04ec..754020fd 100644 --- a/src/renderer/Renderer.ts +++ b/src/renderer/Renderer.ts @@ -9,7 +9,6 @@ import { CursorRenderLayer } from './CursorRenderLayer'; import { IRenderLayer, IRenderer, IRenderDimensions, ICharacterJoinerRegistry } from './Types'; import { ITerminal, CharacterJoinerHandler } from '../Types'; import { LinkRenderLayer } from './LinkRenderLayer'; -import { ScreenDprMonitor } from '../ui/ScreenDprMonitor'; import { CharacterJoinerRegistry } from '../renderer/CharacterJoinerRegistry'; import { Disposable } from '../common/Lifecycle'; import { IColorSet } from '../ui/Types'; @@ -17,7 +16,6 @@ import { IColorSet } from '../ui/Types'; export class Renderer extends Disposable implements IRenderer { private _renderLayers: IRenderLayer[]; private _devicePixelRatio: number; - private _screenDprMonitor: ScreenDprMonitor; private _isPaused: boolean = false; private _needsFullRefresh: boolean = false; private _characterJoinerRegistry: ICharacterJoinerRegistry; @@ -56,11 +54,6 @@ export class Renderer extends Disposable implements IRenderer { this._updateDimensions(); this.onOptionsChanged(); - // TODO: Move dpr monitor to RenderCoordinator - this._screenDprMonitor = new ScreenDprMonitor(); - this._screenDprMonitor.setListener(() => this.onWindowResize(window.devicePixelRatio)); - this.register(this._screenDprMonitor); - // Detect whether IntersectionObserver is detected and enable renderer pause // and resume based on terminal visibility if so if ('IntersectionObserver' in window) {