Merge branch 'master' into webgl

src/browser/Terminal.ts

@@ -39,7 +39,7 @@ import { MouseZoneManager } from 'browser/MouseZoneManager';
 import { AccessibilityManager } from './AccessibilityManager';
 import { ITheme, IMarker, IDisposable, ISelectionPosition, ILinkProvider } from 'xterm';
 import { DomRenderer } from 'browser/renderer/dom/DomRenderer';
-import { IKeyboardEvent, KeyboardResultType, CoreMouseEventType, CoreMouseButton, CoreMouseAction, ITerminalOptions, IAnsiColorChangeEvent } from 'common/Types';
+import { IKeyboardEvent, KeyboardResultType, CoreMouseEventType, CoreMouseButton, CoreMouseAction, ITerminalOptions, ScrollSource, IAnsiColorChangeEvent } from 'common/Types';
 import { evaluateKeyboardEvent } from 'common/input/Keyboard';
 import { EventEmitter, IEvent, forwardEvent } from 'common/EventEmitter';
 import { DEFAULT_ATTR_DATA } from 'common/buffer/BufferLine';
@@ -297,19 +297,26 @@ export class Terminal extends CoreTerminal implements ITerminal {
   }
 
   private _syncTextArea(): void {
-    if (!this.textarea || !this.buffer.isCursorInViewport || this._compositionHelper!.isComposing) {
+    if (!this.textarea || !this.buffer.isCursorInViewport || this._compositionHelper!.isComposing || !this._renderService) {
       return;
     }
-
-    const cellHeight = Math.ceil(this._charSizeService!.height * this.optionsService.options.lineHeight);
-    const cursorTop = this._bufferService.buffer.y * cellHeight;
-    const cursorLeft = this._bufferService.buffer.x * this._charSizeService!.width;
+    const cursorY = this.buffer.ybase + this.buffer.y;
+    const bufferLine = this.buffer.lines.get(cursorY);
+    if (!bufferLine) {
+      return;
+    }
+    const cursorX = Math.min(this.buffer.x, this.cols - 1);
+    const cellHeight = this._renderService.dimensions.actualCellHeight;
+    const width = bufferLine.getWidth(cursorX);
+    const cellWidth = this._renderService.dimensions.actualCellWidth * width;
+    const cursorTop = this.buffer.y * this._renderService.dimensions.actualCellHeight;
+    const cursorLeft = cursorX * this._renderService.dimensions.actualCellWidth;
 
     // Sync the textarea to the exact position of the composition view so the IME knows where the
     // text is.
     this.textarea.style.left = cursorLeft + 'px';
     this.textarea.style.top = cursorTop + 'px';
-    this.textarea.style.width = this._charSizeService!.width + 'px';
+    this.textarea.style.width = cellWidth + 'px';
     this.textarea.style.height = cellHeight + 'px';
     this.textarea.style.lineHeight = cellHeight + 'px';
     this.textarea.style.zIndex = '-5';
@@ -438,14 +445,6 @@ export class Terminal extends CoreTerminal implements ITerminal {
     this._charSizeService = this._instantiationService.createInstance(CharSizeService, this._document, this._helperContainer);
     this._instantiationService.setService(ICharSizeService, this._charSizeService);
 
-    this._compositionView = document.createElement('div');
-    this._compositionView.classList.add('composition-view');
-    this._compositionHelper = this._instantiationService.createInstance(CompositionHelper, this.textarea, this._compositionView);
-    this._helperContainer.appendChild(this._compositionView);
-
-    // Performance: Add viewport and helper elements from the fragment
-    this.element.appendChild(fragment);
-
     this._theme = this.options.theme || this._theme;
     this._colorManager = new ColorManager(document, this.options.allowTransparency);
     this.register(this.optionsService.onOptionChange(e => this._colorManager!.onOptionsChange(e)));
@@ -457,13 +456,21 @@ export class Terminal extends CoreTerminal implements ITerminal {
     this.register(this._renderService.onRenderedBufferChange(e => this._onRender.fire(e)));
     this.onResize(e => this._renderService!.resize(e.cols, e.rows));
 
+    this._compositionView = document.createElement('div');
+    this._compositionView.classList.add('composition-view');
+    this._compositionHelper = this._instantiationService.createInstance(CompositionHelper, this.textarea, this._compositionView);
+    this._helperContainer.appendChild(this._compositionView);
+
+    // Performance: Add viewport and helper elements from the fragment
+    this.element.appendChild(fragment);
+
     this._soundService = this._instantiationService.createInstance(SoundService);
     this._instantiationService.setService(ISoundService, this._soundService);
     this._mouseService = this._instantiationService.createInstance(MouseService);
     this._instantiationService.setService(IMouseService, this._mouseService);
 
     this.viewport = this._instantiationService.createInstance(Viewport,
-      (amount: number, suppressEvent: boolean) => this.scrollLines(amount, suppressEvent),
+      (amount: number) => this.scrollLines(amount, false, ScrollSource.VIEWPORT),
       this._viewportElement,
       this._viewportScrollArea
     );
@@ -497,8 +504,10 @@ export class Terminal extends CoreTerminal implements ITerminal {
       this.textarea!.focus();
       this.textarea!.select();
     }));
-    this.register(this.onScroll(() => {
-      this.viewport!.syncScrollArea();
+    this.register(this._onScroll.event(ev => {
+      if (ev.source !== ScrollSource.VIEWPORT) {
+        this.viewport!.syncScrollArea();
+      }
       this._selectionService!.refresh();
     }));
     this.register(addDisposableDomListener(this._viewportElement, 'scroll', () => this._selectionService!.refresh()));
@@ -853,8 +862,8 @@ export class Terminal extends CoreTerminal implements ITerminal {
     }
   }
 
-  public scrollLines(disp: number, suppressScrollEvent?: boolean): void {
-    super.scrollLines(disp, suppressScrollEvent);
+  public scrollLines(disp: number, suppressScrollEvent?: boolean, source = ScrollSource.TERMINAL): void {
+    super.scrollLines(disp, suppressScrollEvent, source);
     this.refresh(0, this.rows - 1);
   }
 
@@ -1185,7 +1194,7 @@ export class Terminal extends CoreTerminal implements ITerminal {
       this.buffer.lines.push(this.buffer.getBlankLine(DEFAULT_ATTR_DATA));
     }
     this.refresh(0, this.rows - 1);
-    this._onScroll.fire(this.buffer.ydisp);
+    this._onScroll.fire({ position: this.buffer.ydisp, source: ScrollSource.TERMINAL });
   }
 
   /**

src/browser/Viewport.ts

@@ -33,7 +33,7 @@ export class Viewport extends Disposable implements IViewport {
   private _ignoreNextScrollEvent: boolean = false;
 
   constructor(
-    private readonly _scrollLines: (amount: number, suppressEvent: boolean) => void,
+    private readonly _scrollLines: (amount: number) => void,
     private readonly _viewportElement: HTMLElement,
     private readonly _scrollArea: HTMLElement,
     @IBufferService private readonly _bufferService: IBufferService,
@@ -156,7 +156,7 @@ export class Viewport extends Disposable implements IViewport {
 
     const newRow = Math.round(this._lastScrollTop / this._currentRowHeight);
     const diff = newRow - this._bufferService.buffer.ydisp;
-    this._scrollLines(diff, true);
+    this._scrollLines(diff);
   }
 
   /**

src/browser/input/CompositionHelper.test.ts

@@ -5,7 +5,7 @@
 
 import { assert } from 'chai';
 import { CompositionHelper } from 'browser/input/CompositionHelper';
-import { MockCharSizeService } from 'browser/TestUtils.test';
+import { MockRenderService } from 'browser/TestUtils.test';
 import { MockCoreService, MockBufferService, MockOptionsService } from 'common/TestUtils.test';
 
 describe('CompositionHelper', () => {
@@ -42,7 +42,7 @@ describe('CompositionHelper', () => {
     };
     handledText = '';
     const bufferService = new MockBufferService(10, 5);
-    compositionHelper = new CompositionHelper(textarea, compositionView, bufferService, new MockOptionsService(), new MockCharSizeService(10, 10), coreService);
+    compositionHelper = new CompositionHelper(textarea, compositionView, bufferService, new MockOptionsService(), coreService, new MockRenderService());
   });
 
   describe('Input', () => {

src/browser/input/CompositionHelper.ts

@@ -3,7 +3,7 @@
  * @license MIT
  */
 
-import { ICharSizeService } from 'browser/services/Services';
+import { IRenderService } from 'browser/services/Services';
 import { IBufferService, ICoreService, IOptionsService } from 'common/services/Services';
 
 interface IPosition {
@@ -45,8 +45,8 @@ export class CompositionHelper {
     private readonly _compositionView: HTMLElement,
     @IBufferService private readonly _bufferService: IBufferService,
     @IOptionsService private readonly _optionsService: IOptionsService,
-    @ICharSizeService private readonly _charSizeService: ICharSizeService,
-    @ICoreService private readonly _coreService: ICoreService
+    @ICoreService private readonly _coreService: ICoreService,
+    @IRenderService private readonly _renderService: IRenderService
   ) {
     this._isComposing = false;
     this._isSendingComposition = false;
@@ -207,9 +207,11 @@ export class CompositionHelper {
     }
 
     if (this._bufferService.buffer.isCursorInViewport) {
-      const cellHeight = Math.ceil(this._charSizeService.height * this._optionsService.options.lineHeight);
-      const cursorTop = this._bufferService.buffer.y * cellHeight;
-      const cursorLeft = this._bufferService.buffer.x * this._charSizeService.width;
+      const cursorX = Math.min(this._bufferService.buffer.x, this._bufferService.cols - 1);
+
+      const cellHeight = this._renderService.dimensions.actualCellHeight;
+      const cursorTop = this._bufferService.buffer.y * this._renderService.dimensions.actualCellHeight;
+      const cursorLeft = cursorX * this._renderService.dimensions.actualCellWidth;
 
       this._compositionView.style.left = cursorLeft + 'px';
       this._compositionView.style.top = cursorTop + 'px';

src/common/CoreTerminal.ts

@@ -27,7 +27,7 @@ import { InstantiationService } from 'common/services/InstantiationService';
 import { LogService } from 'common/services/LogService';
 import { BufferService, MINIMUM_COLS, MINIMUM_ROWS } from 'common/services/BufferService';
 import { OptionsService } from 'common/services/OptionsService';
-import { ITerminalOptions, IDisposable, IBufferLine, IAttributeData, ICoreTerminal } from 'common/Types';
+import { ITerminalOptions, IDisposable, IBufferLine, IAttributeData, ICoreTerminal, IKeyboardEvent, IScrollEvent, ScrollSource } from 'common/Types';
 import { CoreService } from 'common/services/CoreService';
 import { EventEmitter, IEvent, forwardEvent } from 'common/EventEmitter';
 import { CoreMouseService } from 'common/services/CoreMouseService';
@@ -69,8 +69,21 @@ export abstract class CoreTerminal extends Disposable implements ICoreTerminal {
   public get onLineFeed(): IEvent<void> { return this._onLineFeed.event; }
   private _onResize = new EventEmitter<{ cols: number, rows: number }>();
   public get onResize(): IEvent<{ cols: number, rows: number }> { return this._onResize.event; }
-  protected _onScroll = new EventEmitter<number>();
-  public get onScroll(): IEvent<number> { return this._onScroll.event; }
+  protected _onScroll = new EventEmitter<IScrollEvent, void>();
+  /**
+   * Internally we track the source of the scroll but this is meaningless outside the library so
+   * it's filtered out.
+   */
+  protected _onScrollApi?: EventEmitter<number, void>;
+  public get onScroll(): IEvent<number, void> {
+    if (!this._onScrollApi) {
+      this._onScrollApi = new EventEmitter<number, void>();
+      this.register(this._onScroll.event(ev => {
+        this._onScrollApi?.fire(ev.position);
+      }));
+    }
+    return this._onScrollApi.event;
+  }
 
   public get cols(): number { return this._bufferService.cols; }
   public get rows(): number { return this._bufferService.rows; }
@@ -220,17 +233,17 @@ export abstract class CoreTerminal extends Disposable implements ICoreTerminal {
     // Flag rows that need updating
     this._dirtyRowService.markRangeDirty(buffer.scrollTop, buffer.scrollBottom);
 
-    this._onScroll.fire(buffer.ydisp);
+    this._onScroll.fire({ position: buffer.ydisp, source: ScrollSource.TERMINAL });
   }
 
   /**
    * Scroll the display of the terminal
    * @param disp The number of lines to scroll down (negative scroll up).
-   * @param suppressScrollEvent Don't emit the scroll event as scrollLines. This is used
-   * to avoid unwanted events being handled by the viewport when the event was triggered from the
-   * viewport originally.
+   * @param suppressScrollEvent Don't emit an onScroll event.
+   * @param source The source of the scroll action. Emitted as part of the onScroll event
+   * to avoid cyclic invocations if the event originated from the Viewport.
    */
-  public scrollLines(disp: number, suppressScrollEvent?: boolean): void {
+  public scrollLines(disp: number, suppressScrollEvent = false, source = ScrollSource.TERMINAL): void {
     const buffer = this._bufferService.buffer;
     if (disp < 0) {
       if (buffer.ydisp === 0) {
@@ -250,7 +263,7 @@ export abstract class CoreTerminal extends Disposable implements ICoreTerminal {
     }
 
     if (!suppressScrollEvent) {
-      this._onScroll.fire(buffer.ydisp);
+      this._onScroll.fire({ position: buffer.ydisp, source });
     }
   }
 

src/common/Types.d.ts

@@ -42,6 +42,16 @@ export interface IKeyboardEvent {
   type: string;
 }
 
+export interface IScrollEvent {
+  position: number;
+  source: ScrollSource;
+}
+
+export const enum ScrollSource {
+  TERMINAL,
+  VIEWPORT,
+}
+
 export interface ICircularList<T> {
   length: number;
   maxLength: number;