Layout dimension left/right after renderer dims change

src/browser/TestUtils.test.ts

@@ -396,9 +396,6 @@ export class MockRenderService implements IRenderService {
  public resize(cols: number, rows: number): void {
  throw new Error('Method not implemented.');
  }
- public changeOptions(): void {
- throw new Error('Method not implemented.');
- }
  public setRenderer(renderer: IRenderer): void {
  throw new Error('Method not implemented.');
  }

src/browser/decorations/BufferDecorationRenderer.ts

@@ -14,6 +14,7 @@ export class BufferDecorationRenderer extends Disposable {
 
  private _animationFrame: number | undefined;
  private _altBufferIsActive: boolean = false;
+ private _dimensionsChanged: boolean = false;
 
  constructor(
  private readonly _screenElement: HTMLElement,
@@ -28,7 +29,10 @@ export class BufferDecorationRenderer extends Disposable {
  this._screenElement.appendChild(this._container);
 
  this.register(this._renderService.onRenderedBufferChange(() => this._queueRefresh()));
- this.register(this._renderService.onDimensionsChange(() => this._queueRefresh()));
+ this.register(this._renderService.onDimensionsChange(() => {
+ this._dimensionsChanged = true;
+ this._queueRefresh();
+ }));
  this.register(addDisposableDomListener(window, 'resize', () => this._queueRefresh()));
  this.register(this._bufferService.buffers.onBufferActivate(() => {
  this._altBufferIsActive = this._bufferService.buffer === this._bufferService.buffers.alt;
@@ -57,10 +61,14 @@ export class BufferDecorationRenderer extends Disposable {
  for (const decoration of this._decorationService.decorations) {
  this._renderDecoration(decoration);
  }
+ this._dimensionsChanged = false;
  }
 
  private _renderDecoration(decoration: IInternalDecoration): void {
  this._refreshStyle(decoration);
+ if (this._dimensionsChanged) {
+ this._refreshXPosition(decoration);
+ }
  }
 
  private _createElement(decoration: IInternalDecoration): HTMLElement {
@@ -76,11 +84,7 @@ export class BufferDecorationRenderer extends Disposable {
  // exceeded the container width, so hide
  element.style.display = 'none';
  }
- if ((decoration.options.anchor || 'left') === 'right') {
- element.style.right = x ? `${x * this._renderService.dimensions.actualCellWidth}px` : '';
- } else {
- element.style.left = x ? `${x * this._renderService.dimensions.actualCellWidth}px` : '';
- }
+ this._refreshXPosition(decoration);
 
  return element;
  }
@@ -108,6 +112,18 @@ export class BufferDecorationRenderer extends Disposable {
  }
  }
 
+ private _refreshXPosition(decoration: IInternalDecoration): void {
+ if (!decoration.element) {
+ return;
+ }
+ const x = decoration.options.x ?? 0;
+ if ((decoration.options.anchor || 'left') === 'right') {
+ decoration.element.style.right = x ? `${x * this._renderService.dimensions.actualCellWidth}px` : '';
+ } else {
+ decoration.element.style.left = x ? `${x * this._renderService.dimensions.actualCellWidth}px` : '';
+ }
+ }
+
  private _removeDecoration(decoration: IInternalDecoration): void {
  this._decorationElements.get(decoration)?.remove();
  this._decorationElements.delete(decoration);

src/browser/services/RenderService.ts

@@ -70,7 +70,7 @@ export class RenderService extends Disposable implements IRenderService {
 
  this.register(bufferService.onResize(() => this._fullRefresh()));
  this.register(bufferService.buffers.onBufferActivate(() => this._renderer?.clear()));
- this.register(optionsService.onOptionChange(() => this._renderer.onOptionsChanged()));
+ this.register(optionsService.onOptionChange(() => this._handleOptionsChanged()));
  this.register(this._charSizeService.onCharSizeChange(() => this.onCharSizeChanged()));
 
  // Do a full refresh whenever any decoration is added or removed. This may not actually result
@@ -142,7 +142,7 @@ export class RenderService extends Disposable implements IRenderService {
  this._fireOnCanvasResize();
  }
 
- public changeOptions(): void {
+ private _handleOptionsChanged(): void {
  this._renderer.onOptionsChanged();
  this.refreshRows(0, this._rowCount - 1);
  this._fireOnCanvasResize();

src/browser/services/Services.ts

@@ -61,7 +61,6 @@ export interface IRenderService extends IDisposable {
  refreshRows(start: number, end: number): void;
  clearTextureAtlas(): void;
  resize(cols: number, rows: number): void;
- changeOptions(): void;
  setRenderer(renderer: IRenderer): void;
  setColors(colors: IColorSet): void;
  onDevicePixelRatioChange(): void;