diff --git a/addons/addon-canvas/src/CanvasRenderer.ts b/addons/addon-canvas/src/CanvasRenderer.ts index 40b89546..148ae736 100644 --- a/addons/addon-canvas/src/CanvasRenderer.ts +++ b/addons/addon-canvas/src/CanvasRenderer.ts @@ -10,7 +10,7 @@ import { createRenderDimensions } from 'browser/renderer/shared/RendererUtils'; import { IRenderDimensions, IRenderer, IRequestRedrawEvent } from 'browser/renderer/shared/Types'; import { ICharSizeService, ICharacterJoinerService, ICoreBrowserService, IThemeService } from 'browser/services/Services'; import { EventEmitter, forwardEvent } from 'common/EventEmitter'; -import { Disposable, toDisposable } from 'common/Lifecycle'; +import { Disposable, MutableDisposable, toDisposable } from 'common/Lifecycle'; import { IBufferService, ICoreService, IDecorationService, IOptionsService } from 'common/services/Services'; import { Terminal } from '@xterm/xterm'; import { CursorRenderLayer } from './CursorRenderLayer'; @@ -22,6 +22,7 @@ import { IRenderLayer } from './Types'; export class CanvasRenderer extends Disposable implements IRenderer { private _renderLayers: IRenderLayer[]; private _devicePixelRatio: number; + private _observerDisposable = this.register(new MutableDisposable()); public dimensions: IRenderDimensions; @@ -60,7 +61,11 @@ export class CanvasRenderer extends Disposable implements IRenderer { this._devicePixelRatio = this._coreBrowserService.dpr; this._updateDimensions(); - this.register(observeDevicePixelDimensions(this._renderLayers[0].canvas, this._coreBrowserService.window, (w, h) => this._setCanvasDevicePixelDimensions(w, h))); + this._observerDisposable.value = observeDevicePixelDimensions(this._renderLayers[0].canvas, this._coreBrowserService.window, (w, h) => this._setCanvasDevicePixelDimensions(w, h)); + this.register(this._coreBrowserService.onWindowChange(w => { + this._observerDisposable.value = observeDevicePixelDimensions(this._renderLayers[0].canvas, w, (w, h) => this._setCanvasDevicePixelDimensions(w, h)); + })); + this.register(toDisposable(() => { for (const l of this._renderLayers) { l.dispose(); diff --git a/addons/addon-webgl/src/WebglRenderer.ts b/addons/addon-webgl/src/WebglRenderer.ts index 2bccc9b7..f2f2c83e 100644 --- a/addons/addon-webgl/src/WebglRenderer.ts +++ b/addons/addon-webgl/src/WebglRenderer.ts @@ -33,6 +33,7 @@ export class WebglRenderer extends Disposable implements IRenderer { private _charAtlasDisposable = this.register(new MutableDisposable()); private _charAtlas: ITextureAtlas | undefined; private _devicePixelRatio: number; + private _observerDisposable = this.register(new MutableDisposable()); private _model: RenderModel = new RenderModel(); private _workCell: CellData = new CellData(); @@ -123,7 +124,10 @@ export class WebglRenderer extends Disposable implements IRenderer { this._requestRedrawViewport(); })); - this.register(observeDevicePixelDimensions(this._canvas, this._coreBrowserService.window, (w, h) => this._setCanvasDevicePixelDimensions(w, h))); + this._observerDisposable.value = observeDevicePixelDimensions(this._canvas, this._coreBrowserService.window, (w, h) => this._setCanvasDevicePixelDimensions(w, h)); + this.register(this._coreBrowserService.onWindowChange(w => { + this._observerDisposable.value = observeDevicePixelDimensions(this._canvas, w, (w, h) => this._setCanvasDevicePixelDimensions(w, h)); + })); this._core.screenElement!.appendChild(this._canvas); diff --git a/src/browser/RenderDebouncer.ts b/src/browser/RenderDebouncer.ts index b3118d5f..dd3b97a6 100644 --- a/src/browser/RenderDebouncer.ts +++ b/src/browser/RenderDebouncer.ts @@ -4,6 +4,7 @@ */ import { IRenderDebouncerWithCallback } from 'browser/Types'; +import { ICoreBrowserService } from 'browser/services/Services'; /** * Debounces calls to render terminal rows using animation frames. @@ -16,14 +17,14 @@ export class RenderDebouncer implements IRenderDebouncerWithCallback { private _refreshCallbacks: FrameRequestCallback[] = []; constructor( - private _parentWindow: Window, - private _renderCallback: (start: number, end: number) => void + private _renderCallback: (start: number, end: number) => void, + private readonly _coreBrowserService: ICoreBrowserService ) { } public dispose(): void { if (this._animationFrame) { - this._parentWindow.cancelAnimationFrame(this._animationFrame); + this._coreBrowserService.window.cancelAnimationFrame(this._animationFrame); this._animationFrame = undefined; } } @@ -31,7 +32,7 @@ export class RenderDebouncer implements IRenderDebouncerWithCallback { public addRefreshCallback(callback: FrameRequestCallback): number { this._refreshCallbacks.push(callback); if (!this._animationFrame) { - this._animationFrame = this._parentWindow.requestAnimationFrame(() => this._innerRefresh()); + this._animationFrame = this._coreBrowserService.window.requestAnimationFrame(() => this._innerRefresh()); } return this._animationFrame; } @@ -49,7 +50,7 @@ export class RenderDebouncer implements IRenderDebouncerWithCallback { return; } - this._animationFrame = this._parentWindow.requestAnimationFrame(() => this._innerRefresh()); + this._animationFrame = this._coreBrowserService.window.requestAnimationFrame(() => this._innerRefresh()); } private _innerRefresh(): void { diff --git a/src/browser/services/RenderService.ts b/src/browser/services/RenderService.ts index 9fa8d234..c2cb9a05 100644 --- a/src/browser/services/RenderService.ts +++ b/src/browser/services/RenderService.ts @@ -8,9 +8,9 @@ import { IRenderDebouncerWithCallback } from 'browser/Types'; import { IRenderDimensions, IRenderer } from 'browser/renderer/shared/Types'; import { ICharSizeService, ICoreBrowserService, IRenderService, IThemeService } from 'browser/services/Services'; import { EventEmitter } from 'common/EventEmitter'; -import { Disposable, MutableDisposable } from 'common/Lifecycle'; +import { Disposable, MutableDisposable, toDisposable } from 'common/Lifecycle'; import { DebouncedIdleTask } from 'common/TaskQueue'; -import { IBufferService, IDecorationService, IInstantiationService, IOptionsService } from 'common/services/Services'; +import { IBufferService, IDecorationService, IOptionsService } from 'common/services/Services'; interface ISelectionState { start: [number, number] | undefined; @@ -24,6 +24,7 @@ export class RenderService extends Disposable implements IRenderService { private _renderer: MutableDisposable = this.register(new MutableDisposable()); private _renderDebouncer: IRenderDebouncerWithCallback; private _pausedResizeTask = new DebouncedIdleTask(); + private _observerDisposable = this.register(new MutableDisposable()); private _isPaused: boolean = false; private _needsFullRefresh: boolean = false; @@ -38,7 +39,7 @@ export class RenderService extends Disposable implements IRenderService { }; private readonly _onDimensionsChange = this.register(new EventEmitter()); - public readonly onDimensionsChange = this._onDimensionsChange.event; + public readonly onDimensionsChange = this._onDimensionsChange.event; private readonly _onRenderedViewportChange = this.register(new EventEmitter<{ start: number, end: number }>()); public readonly onRenderedViewportChange = this._onRenderedViewportChange.event; private readonly _onRender = this.register(new EventEmitter<{ start: number, end: number }>()); @@ -56,12 +57,11 @@ export class RenderService extends Disposable implements IRenderService { @IDecorationService decorationService: IDecorationService, @IBufferService bufferService: IBufferService, @ICoreBrowserService coreBrowserService: ICoreBrowserService, - @IInstantiationService instantiationService: IInstantiationService, @IThemeService themeService: IThemeService ) { super(); - this._renderDebouncer = new RenderDebouncer(coreBrowserService.window, (start, end) => this._renderRows(start, end)); + this._renderDebouncer = new RenderDebouncer((start, end) => this._renderRows(start, end), coreBrowserService); this.register(this._renderDebouncer); this.register(coreBrowserService.onDprChange(() => this.handleDevicePixelRatioChange())); @@ -102,12 +102,17 @@ export class RenderService extends Disposable implements IRenderService { this.register(themeService.onChangeColors(() => this._fullRefresh())); + this._registerIntersectionObserver(coreBrowserService.window, screenElement); + this.register(coreBrowserService.onWindowChange((w) => this._registerIntersectionObserver(w, screenElement))); + } + + private _registerIntersectionObserver(w: Window & typeof globalThis, screenElement: HTMLElement): void { // Detect whether IntersectionObserver is detected and enable renderer pause // and resume based on terminal visibility if so - if ('IntersectionObserver' in coreBrowserService.window) { - const observer = new coreBrowserService.window.IntersectionObserver(e => this._handleIntersectionChange(e[e.length - 1]), { threshold: 0 }); + if ('IntersectionObserver' in w) { + const observer = new w.IntersectionObserver(e => this._handleIntersectionChange(e[e.length - 1]), { threshold: 0 }); observer.observe(screenElement); - this.register({ dispose: () => observer.disconnect() }); + this._observerDisposable.value = toDisposable(() => observer.disconnect()); } }