Merge branch 'master' into webgl2

src/Buffer.ts

@@ -233,22 +233,22 @@ export class Buffer implements IBuffer {
 
     // Iterate through rows, ignore the last one as it cannot be wrapped
     if (newCols > this._cols) {
-      this._reflowLarger(newCols);
+      this._reflowLarger(newCols, newRows);
     } else {
       this._reflowSmaller(newCols, newRows);
     }
   }
 
-  private _reflowLarger(newCols: number): void {
+  private _reflowLarger(newCols: number, newRows: number): void {
     const toRemove: number[] = reflowLargerGetLinesToRemove(this.lines, newCols, this.ybase + this.y);
     if (toRemove.length > 0) {
       const newLayoutResult = reflowLargerCreateNewLayout(this.lines, toRemove);
       reflowLargerApplyNewLayout(this.lines, newLayoutResult.layout);
-      this._reflowLargerAdjustViewport(newCols, newLayoutResult.countRemoved);
+      this._reflowLargerAdjustViewport(newCols, newRows, newLayoutResult.countRemoved);
     }
   }
 
-  private _reflowLargerAdjustViewport(newCols: number, countRemoved: number): void {
+  private _reflowLargerAdjustViewport(newCols: number, newRows: number, countRemoved: number): void {
     // Adjust viewport based on number of items removed
     let viewportAdjustments = countRemoved;
     while (viewportAdjustments-- > 0) {
@@ -256,7 +256,7 @@ export class Buffer implements IBuffer {
         if (this.y > 0) {
           this.y--;
         }
-        if (this.lines.length < this._rows) {
+        if (this.lines.length < newRows) {
           // Add an extra row at the bottom of the viewport
           this.lines.push(new BufferLine(newCols, FILL_CHAR_DATA));
         }
@@ -360,7 +360,7 @@ export class Buffer implements IBuffer {
       let viewportAdjustments = linesToAdd - trimmedLines;
       while (viewportAdjustments-- > 0) {
         if (this.ybase === 0) {
-          if (this.y < this._rows - 1) {
+          if (this.y < newRows - 1) {
             this.y++;
             this.lines.pop();
           } else {

src/CompositionHelper.ts

@@ -203,6 +203,8 @@ export class CompositionHelper {
       this._compositionView.style.top = cursorTop + 'px';
       this._compositionView.style.height = cellHeight + 'px';
       this._compositionView.style.lineHeight = cellHeight + 'px';
+      this._compositionView.style.fontFamily = this._terminal.options.fontFamily;
+      this._compositionView.style.fontSize = this._terminal.options.fontSize + 'px';
       // Sync the textarea to the exact position of the composition view so the IME knows where the
       // text is.
       const compositionViewBounds = this._compositionView.getBoundingClientRect();

src/InputHandler.ts

@@ -1284,7 +1284,9 @@ export class InputHandler extends Disposable implements IInputHandler {
           if (this._terminal.element) {
             this._terminal.element.classList.add('enable-mouse-events');
           }
-          this._terminal.selectionManager.disable();
+          if (this._terminal.selectionManager) {
+            this._terminal.selectionManager.disable();
+          }
           this._terminal.log('Binding to mouse events.');
           break;
         case 1004: // send focusin/focusout events
@@ -1474,7 +1476,9 @@ export class InputHandler extends Disposable implements IInputHandler {
           if (this._terminal.element) {
             this._terminal.element.classList.remove('enable-mouse-events');
           }
-          this._terminal.selectionManager.enable();
+          if (this._terminal.selectionManager) {
+            this._terminal.selectionManager.enable();
+          }
           break;
         case 1004: // send focusin/focusout events
           this._terminal.sendFocus = false;

src/Terminal.ts

@@ -567,12 +567,12 @@ export class Terminal extends EventEmitter implements ITerminal, IDisposable, II
       // Firefox doesn't appear to fire the contextmenu event on right click
       this.register(addDisposableDomListener(this.element, 'mousedown', (event: MouseEvent) => {
         if (event.button === 2) {
-          rightClickHandler(event, this.textarea, this.selectionManager, this.options.rightClickSelectsWord);
+          rightClickHandler(event, this, this.selectionManager, this.options.rightClickSelectsWord);
         }
       }));
     } else {
       this.register(addDisposableDomListener(this.element, 'contextmenu', (event: MouseEvent) => {
-        rightClickHandler(event, this.textarea, this.selectionManager, this.options.rightClickSelectsWord);
+        rightClickHandler(event, this, this.selectionManager, this.options.rightClickSelectsWord);
       }));
     }
 
@@ -584,7 +584,7 @@ export class Terminal extends EventEmitter implements ITerminal, IDisposable, II
       // that the regular click event doesn't fire for the middle mouse button.
       this.register(addDisposableDomListener(this.element, 'auxclick', (event: MouseEvent) => {
         if (event.button === 1) {
-          moveTextAreaUnderMouseCursor(event, this.textarea);
+          moveTextAreaUnderMouseCursor(event, this);
         }
       }));
     }
@@ -739,6 +739,11 @@ export class Terminal extends EventEmitter implements ITerminal, IDisposable, II
     this.mouseHelper = new MouseHelper(this.renderer);
     // apply mouse event classes set by escape codes before terminal was attached
     this.element.classList.toggle('enable-mouse-events', this.mouseEvents);
+    if (this.mouseEvents) {
+      this.selectionManager.disable();
+    } else {
+      this.selectionManager.enable();
+    }
 
     if (this.options.screenReaderMode) {
       // Note that this must be done *after* the renderer is created in order to

src/renderer/Renderer.ts

@@ -70,7 +70,7 @@ export class Renderer extends EventEmitter implements IRenderer {
     // Detect whether IntersectionObserver is detected and enable renderer pause
     // and resume based on terminal visibility if so
     if ('IntersectionObserver' in window) {
-      const observer = new IntersectionObserver(e => this.onIntersectionChange(e[0]), { threshold: 0 });
+      const observer = new IntersectionObserver(e => this.onIntersectionChange(e[e.length - 1]), { threshold: 0 });
       observer.observe(this._terminal.element);
       this.register({ dispose: () => observer.disconnect() });
     }

src/renderer/SelectionRenderLayer.ts

@@ -55,6 +55,7 @@ export class SelectionRenderLayer extends BaseRenderLayer {
 
     // Selection does not exist
     if (!start || !end) {
+      this._clearState();
       return;
     }
 

src/ui/Clipboard.ts

@@ -85,26 +85,32 @@ export function pasteHandler(ev: ClipboardEvent, term: ITerminal): void {
  * @param ev The original right click event to be handled.
  * @param textarea The terminal's textarea.
  */
-export function moveTextAreaUnderMouseCursor(ev: MouseEvent, textarea: HTMLTextAreaElement): void {
-  // Bring textarea at the cursor position
-  textarea.style.position = 'fixed';
-  textarea.style.width = '20px';
-  textarea.style.height = '20px';
-  textarea.style.left = (ev.clientX - 10) + 'px';
-  textarea.style.top = (ev.clientY - 10) + 'px';
-  textarea.style.zIndex = '1000';
+export function moveTextAreaUnderMouseCursor(ev: MouseEvent, term: ITerminal): void {
 
-  textarea.focus();
+  // Calculate textarea position relative to the screen element
+  const pos = term.screenElement.getBoundingClientRect();
+  const left = ev.clientX - pos.left - 10;
+  const top = ev.clientY - pos.top - 10;
+
+  // Bring textarea at the cursor position
+  term.textarea.style.position = 'absolute';
+  term.textarea.style.width = '20px';
+  term.textarea.style.height = '20px';
+  term.textarea.style.left = `${left}px`;
+  term.textarea.style.top = `${top}px`;
+  term.textarea.style.zIndex = '1000';
+
+  term.textarea.focus();
 
   // Reset the terminal textarea's styling
   // Timeout needs to be long enough for click event to be handled.
   setTimeout(() => {
-    textarea.style.position = null;
-    textarea.style.width = null;
-    textarea.style.height = null;
-    textarea.style.left = null;
-    textarea.style.top = null;
-    textarea.style.zIndex = null;
+    term.textarea.style.position = null;
+    term.textarea.style.width = null;
+    term.textarea.style.height = null;
+    term.textarea.style.left = null;
+    term.textarea.style.top = null;
+    term.textarea.style.zIndex = null;
   }, 200);
 }
 
@@ -115,14 +121,14 @@ export function moveTextAreaUnderMouseCursor(ev: MouseEvent, textarea: HTMLTextA
  * @param selectionManager The terminal's selection manager.
  * @param shouldSelectWord If true and there is no selection the current word will be selected
  */
-export function rightClickHandler(ev: MouseEvent, textarea: HTMLTextAreaElement, selectionManager: ISelectionManager, shouldSelectWord: boolean): void {
-  moveTextAreaUnderMouseCursor(ev, textarea);
+export function rightClickHandler(ev: MouseEvent, term: ITerminal, selectionManager: ISelectionManager, shouldSelectWord: boolean): void {
+  moveTextAreaUnderMouseCursor(ev, term);
 
   if (shouldSelectWord && !selectionManager.isClickInSelection(ev)) {
     selectionManager.selectWordAtCursor(ev);
   }
 
   // Get textarea ready to copy from the context menu
-  textarea.value = selectionManager.selectionText;
-  textarea.select();
+  term.textarea.value = selectionManager.selectionText;
+  term.textarea.select();
 }

src/xterm.css

@@ -36,7 +36,6 @@
  */
 
 .xterm {
-    font-family: courier-new, courier, monospace;
     font-feature-settings: "liga" 0;
     position: relative;
     user-select: none;