Merge pull request #2011 from xtermjs/Tyriar-patch-1

v3.12.1

CONTRIBUTING.md

@@ -33,21 +33,21 @@ opening an issue, read these pointers.
 You can find issues to work on by looking at the [help wanted](https://github.com/xtermjs/xterm.js/issues?q=is%3Aissue+is%3Aopen+label%3A%22help+wanted%22) or [good first issue](https://github.com/xtermjs/xterm.js/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22) issues. It's a good idea to comment on the issue saying that you're taking it, just in case someone else comes along and you duplicate work. Once you have your issue, here are the steps to contribute:
 
 - Fork [xterm.js](https://github.com/sourcelair/xterm.js/)
-  ([how to fork a repo](https://help.github.com/articles/fork-a-repo))
-- Get the [xterm.js demo](https://github.com/xtermjs/xterm.js/wiki/Contributing#running-the-demo) running
-- Make your changes
+  ([how to fork a repo](https://help.github.com/articles/fork-a-repo)).
+- Get the [xterm.js demo](https://github.com/xtermjs/xterm.js/wiki/Contributing#running-the-demo) running.
+- Make your changes.
 - If your changes are easy to test or likely to regress, add tests. Tests go into `test`, directory.
 - Follow the general code style of the rest of the project (see below).
 - Submit a pull request
 ([how to create a pull request](https://help.github.com/articles/fork-a-repo)).
   Don't put more than one feature/fix in a single pull request.
 
-By contributing code to xterm.js you
+By contributing code to xterm.js you:
 
- - agree to license the contributed code under xterm.js' [MIT
+ - Agree to license the contributed code under xterm.js' [MIT
    license](LICENSE).
 
- - confirm that you have the right to contribute and license the code
+ - Confirm that you have the right to contribute and license the code
    in question. (Either you hold all rights on the code, or the rights
    holder has explicitly granted the right to use it like this,
    through a compatible open source license or through a direct

LICENSE

@@ -1,4 +1,4 @@
-Copyright (c) 2017-2018, The xterm.js authors (https://github.com/xtermjs/xterm.js)
+Copyright (c) 2017-2019, The xterm.js authors (https://github.com/xtermjs/xterm.js)
 Copyright (c) 2014-2016, SourceLair Private Company (https://www.sourcelair.com)
 Copyright (c) 2012-2013, Christopher Jeffrey (https://github.com/chjj/)
 

README.md

@@ -7,17 +7,17 @@ Xterm.js is a front-end component written in TypeScript that lets applications b
 
 ## Features
 
-- **Terminal apps just work**: Xterm.js works with most terminal apps such as `bash`, `vim` and `tmux`, this includes support for curses-based apps and mouse event support
-- **Perfomant**: Xterm.js is *really* fast, it even includes a GPU-accelerated renderer
-- **Rich unicode support**: Supports CJK, emojis and IMEs
-- **Self-contained**: Requires zero dependencies to work
-- **Accessible**: Screen reader support can be turned on using the `screenReaderMode` option
+- **Terminal apps just work**: Xterm.js works with most terminal apps such as `bash`, `vim` and `tmux`, this includes support for curses-based apps and mouse event support.
+- **Perfomant**: Xterm.js is *really* fast, it even includes a GPU-accelerated renderer.
+- **Rich unicode support**: Supports CJK, emojis and IMEs.
+- **Self-contained**: Requires zero dependencies to work.
+- **Accessible**: Screen reader support can be turned on using the `screenReaderMode` option.
 - **And much more**: Links, theming, addons, well documented API, etc.
 
 ## What xterm.js is not
 
-- Xterm.js is not a terminal application that you can download and use on your computer
-- Xterm.js is not `bash`. Xterm.js can be connected to processes like `bash` and let you interact with them (provide input, receive output)
+- Xterm.js is not a terminal application that you can download and use on your computer.
+- Xterm.js is not `bash`. Xterm.js can be connected to processes like `bash` and let you interact with them (provide input, receive output).
 
 ## Getting Started
 
@@ -41,7 +41,7 @@ To start using xterm.js on your browser, add the `xterm.js` and `xterm.css` to t
       <script>
         var term = new Terminal();
         term.open(document.getElementById('terminal'));
-        term.write('Hello from \x1B[1;3;31mxterm.js\x1B[0m $ ')
+        term.write('Hello from \x1B[1;3;31mxterm.js\x1B[0m $ ')
       </script>
     </body>
   </html>
@@ -106,17 +106,17 @@ Note that some APIs are marked *experimental*, these are added to enable experim
 ## Real-world uses
 Xterm.js is used in several world-class applications to provide great terminal experiences.
 
-- [**SourceLair**](https://www.sourcelair.com/): In-browser IDE that provides its users with fully-featured Linux terminals based on xterm.js
-- [**Microsoft Visual Studio Code**](http://code.visualstudio.com/): Modern, versatile and powerful open source code editor that provides an integrated terminal based on xterm.js
-- [**ttyd**](https://github.com/tsl0922/ttyd): A command-line tool for sharing terminal over the web, with fully-featured terminal emulation based on xterm.js
+- [**SourceLair**](https://www.sourcelair.com/): In-browser IDE that provides its users with fully-featured Linux terminals based on xterm.js.
+- [**Microsoft Visual Studio Code**](http://code.visualstudio.com/): Modern, versatile and powerful open source code editor that provides an integrated terminal based on xterm.js.
+- [**ttyd**](https://github.com/tsl0922/ttyd): A command-line tool for sharing terminal over the web, with fully-featured terminal emulation based on xterm.js.
 - [**Katacoda**](https://www.katacoda.com/): Katacoda is an Interactive Learning Platform for software developers, covering the latest Cloud Native technologies.
 - [**Eclipse Che**](http://www.eclipse.org/che): Developer workspace server, cloud IDE, and Eclipse next-generation IDE.
 - [**Codenvy**](http://www.codenvy.com): Cloud workspaces for development teams.
-- [**CoderPad**](https://coderpad.io): Online interviewing platform for programmers. Run code in many programming languages, with results displayed by `xterm.js`.
-- [**WebSSH2**](https://github.com/billchurch/WebSSH2): A web based SSH2 client using `xterm.js`, socket.io, and ssh2.
+- [**CoderPad**](https://coderpad.io): Online interviewing platform for programmers. Run code in many programming languages, with results displayed by xterm.js.
+- [**WebSSH2**](https://github.com/billchurch/WebSSH2): A web based SSH2 client using xterm.js, socket.io, and ssh2.
 - [**Spyder Terminal**](https://github.com/spyder-ide/spyder-terminal): A full fledged system terminal embedded on Spyder IDE.
 - [**Cloud Commander**](https://cloudcmd.io "Cloud Commander"): Orthodox web file manager with console and editor.
-- [**Codevolve**](https://www.codevolve.com "Codevolve"): Online platform for interactive coding and web development courses. Live container-backed terminal uses `xterm.js`.
+- [**Codevolve**](https://www.codevolve.com "Codevolve"): Online platform for interactive coding and web development courses. Live container-backed terminal uses xterm.js.
 - [**RStudio**](https://www.rstudio.com/products/RStudio "RStudio"): RStudio is an integrated development environment (IDE) for R.
 - [**Terminal for Atom**](https://github.com/jsmecham/atom-terminal-tab): A simple terminal for the Atom text editor.
 - [**Eclipse Orion**](https://orionhub.org): A modern, open source software development environment that runs in the cloud. Code, deploy and run in the cloud.
@@ -124,9 +124,8 @@ Xterm.js is used in several world-class applications to provide great terminal e
 - [**Hexlet**](https://en.hexlet.io): Practical programming courses (JavaScript, PHP, Unix, databases, functional programming). A steady path from the first line of code to the first job.
 - [**Selenoid UI**](https://github.com/aerokube/selenoid-ui): Simple UI for the scallable golang implementation of Selenium Hub named Selenoid. We use XTerm for streaming logs over websockets from docker containers.
 - [**Portainer**](https://portainer.io): Simple management UI for Docker.
-- [**SSHy**](https://github.com/stuicey/SSHy): HTML5 Based SSHv2 Web Client with E2E encryption utilising `xterm.js`, SJCL & websockets.
-- [**JupyterLab**](https://github.com/jupyterlab/jupyterlab): An extensible
-computational environment for Jupyter, supporting interactive data science and scientific computing across all programming languages.
+- [**SSHy**](https://github.com/stuicey/SSHy): HTML5 Based SSHv2 Web Client with E2E encryption utilising xterm.js, SJCL & websockets.
+- [**JupyterLab**](https://github.com/jupyterlab/jupyterlab): An extensible computational environment for Jupyter, supporting interactive data science and scientific computing across all programming languages.
 - [**Theia**](https://github.com/theia-ide/theia): Theia is a cloud & desktop IDE framework implemented in TypeScript.
 - [**Opshell**](https://github.com/ricktbaker/opshell) Ops Helper tool to make life easier working with AWS instances across multiple organizations.
 - [**Proxmox VE**](https://www.proxmox.com/en/proxmox-ve): Proxmox VE is a complete open-source platform for enterprise virtualization. It uses xterm.js for container terminals and the host shell.
@@ -138,22 +137,23 @@ computational environment for Jupyter, supporting interactive data science and s
 - [**Azure Cloud Shell**](https://shell.azure.com): Azure Cloud Shell is a Microsoft-managed admin machine built on Azure, for Azure.
 - [**atom-xterm**](https://atom.io/packages/atom-xterm): Atom plugin for providing terminals inside your Atom workspace.
 - [**rtty**](https://github.com/zhaojh329/rtty): A reverse proxy WebTTY. It is composed of the client and the server.
-- [**Pisth**](https://github.com/ColdGrub1384/Pisth): An SFTP and SSH client for iOS
+- [**Pisth**](https://github.com/ColdGrub1384/Pisth): An SFTP and SSH client for iOS.
 - [**abstruse**](https://github.com/bleenco/abstruse): Abstruse CI is a continuous integration platform based on Node.JS and Docker.
 - [**Azure Data Studio**](https://github.com/Microsoft/azuredatastudio): A data management tool that enables working with SQL Server, Azure SQL DB and SQL DW from Windows, macOS and Linux.
-- [**FreeMAN**](https://github.com/matthew-matvei/freeman): A free, cross-platform file manager for power users
+- [**FreeMAN**](https://github.com/matthew-matvei/freeman): A free, cross-platform file manager for power users.
 - [**Fluent Terminal**](https://github.com/felixse/FluentTerminal): A terminal emulator based on UWP and web technologies.
-- [**Hyper**](https://hyper.is): A terminal built on web technologies
+- [**Hyper**](https://hyper.is): A terminal built on web technologies.
 - [**Diag**](https://diag.ai): A better way to troubleshoot problems faster. Capture, share and reapply troubleshooting knowledge so you can focus on solving problems that matter.
 - [**GoTTY**](https://github.com/yudai/gotty): A simple command line tool that shares your terminal as a web application based on xterm.js.
 - [**genact**](https://github.com/svenstaro/genact): A nonsense activity generator.
 - [**cPanel & WHM**](https://cpanel.com): The hosting platform of choice.
-- [**Nutanix**](https://github.com/nutanix): Nutanix Enterprise Cloud uses xterm in the webssh functionality within Nutanix Calm, and is also looking to move our old noserial (termjs) functionality to xterm.js
+- [**Nutanix**](https://github.com/nutanix): Nutanix Enterprise Cloud uses xterm in the webssh functionality within Nutanix Calm, and is also looking to move our old noserial (termjs) functionality to xterm.js.
 - [**SSH Web Client**](https://github.com/roke22/PHP-SSH2-Web-Client): SSH Web Client with PHP.
 - [**Shellvault**](https://www.shellvault.io): The cloud-based SSH terminal you can access from anywhere.
 - [**Juno**](http://junolab.org/): A flexible Julia IDE, based on Atom.
 - [**webssh**](https://github.com/huashengdun/webssh): Web based ssh client.
-- [**info-beamer hosted**](https://info-beamer.com): Uses Xterm.js to manage digital signage devices from the web dashboard.
+- [**info-beamer hosted**](https://info-beamer.com): Uses xterm.js to manage digital signage devices from the web dashboard.
+- [**Jumpserver**](https://github.com/jumpserver/luna): Jumpserver Luna project, Jumpserver is a bastion server project, Luna use xterm.js for web terminal emulation.
 
 [And much more...](https://github.com/xtermjs/xterm.js/network/dependents)
 
@@ -163,7 +163,7 @@ Do you use xterm.js in your application as well? Please [open a Pull Request](ht
 
 Xterm.js follows a monthly release cycle roughly.
 
-All current and past releases are available on this repo's [Releases page](https://github.com/sourcelair/xterm.js/releases), while a rough roadmap is available by looking through [Milestones](https://github.com/sourcelair/xterm.js/milestones).
+All current and past releases are available on this repo's [Releases page](https://github.com/sourcelair/xterm.js/releases), you can view the [high-level roadmap on the wiki](https://github.com/xtermjs/xterm.js/wiki/Roadmap) and see what we're working on now by looking through [Milestones](https://github.com/sourcelair/xterm.js/milestones).
 
 ## Contributing
 

docker-compose.yml

@@ -7,7 +7,7 @@ services:
     volumes:
       - ./:/usr/src/app
     ports:
-      - ${XTERMJS_PORT:3000}:3000
+      - ${XTERMJS_PORT:-3000}:3000
     command: ["npm", "start"]
 
   watch:

package.json

@@ -1,7 +1,7 @@
 {
   "name": "xterm",
   "description": "Full xterm terminal, in your browser",
-  "version": "3.11.0",
+  "version": "3.12.1",
   "main": "lib/public/Terminal.js",
   "types": "typings/xterm.d.ts",
   "repository": "https://github.com/xtermjs/xterm.js",

src/Buffer.test.ts

@@ -518,6 +518,29 @@ describe('Buffer', () => {
         assert.equal(secondMarker.line, 1, 'second marker should be restored');
         assert.equal(thirdMarker.line, 2, 'third marker should be restored');
       });
+      it('should correctly reflow wrapped lines that end in null space (via tab char)', () => {
+        buffer.fillViewportRows();
+        buffer.resize(4, 10);
+        buffer.y = 2;
+        buffer.lines.get(0).set(0, [null, 'a', 1, 'a'.charCodeAt(0)]);
+        buffer.lines.get(0).set(1, [null, 'b', 1, 'b'.charCodeAt(0)]);
+        buffer.lines.get(1).set(0, [null, 'c', 1, 'c'.charCodeAt(0)]);
+        buffer.lines.get(1).set(1, [null, 'd', 1, 'd'.charCodeAt(0)]);
+        buffer.lines.get(1).isWrapped = true;
+        // Buffer:
+        // "ab  " (wrapped)
+        // "cd"
+        buffer.resize(5, 10);
+        assert.equal(buffer.ybase, 0);
+        assert.equal(buffer.lines.length, 10);
+        assert.equal(buffer.lines.get(0).translateToString(true), 'ab  c');
+        assert.equal(buffer.lines.get(1).translateToString(false), 'd    ');
+        buffer.resize(6, 10);
+        assert.equal(buffer.ybase, 0);
+        assert.equal(buffer.lines.length, 10);
+        assert.equal(buffer.lines.get(0).translateToString(true), 'ab  cd');
+        assert.equal(buffer.lines.get(1).translateToString(false), '      ');
+      });
       it('should wrap wide characters correctly when reflowing larger', () => {
         buffer.fillViewportRows();
         buffer.resize(12, 10);
@@ -553,6 +576,32 @@ describe('Buffer', () => {
         assert.equal(buffer.lines.get(1).translateToString(true), '语汉语汉语');
         assert.equal(buffer.lines.get(1).translateToString(false), '语汉语汉语    ');
       });
+      it('should correctly reflow wrapped lines that end in null space (via tab char)', () => {
+        buffer.fillViewportRows();
+        buffer.resize(4, 10);
+        buffer.y = 2;
+        buffer.lines.get(0).set(0, [null, 'a', 1, 'a'.charCodeAt(0)]);
+        buffer.lines.get(0).set(1, [null, 'b', 1, 'b'.charCodeAt(0)]);
+        buffer.lines.get(1).set(0, [null, 'c', 1, 'c'.charCodeAt(0)]);
+        buffer.lines.get(1).set(1, [null, 'd', 1, 'd'.charCodeAt(0)]);
+        buffer.lines.get(1).isWrapped = true;
+        // Buffer:
+        // "ab  " (wrapped)
+        // "cd"
+        buffer.resize(3, 10);
+        assert.equal(buffer.y, 2);
+        assert.equal(buffer.ybase, 0);
+        assert.equal(buffer.lines.length, 10);
+        assert.equal(buffer.lines.get(0).translateToString(false), 'ab ');
+        assert.equal(buffer.lines.get(1).translateToString(false), ' cd');
+        buffer.resize(2, 10);
+        assert.equal(buffer.y, 3);
+        assert.equal(buffer.ybase, 0);
+        assert.equal(buffer.lines.length, 10);
+        assert.equal(buffer.lines.get(0).translateToString(false), 'ab');
+        assert.equal(buffer.lines.get(1).translateToString(false), '  ');
+        assert.equal(buffer.lines.get(2).translateToString(false), 'cd');
+      });
       it('should wrap wide characters correctly when reflowing smaller', () => {
         buffer.fillViewportRows();
         buffer.resize(12, 10);

src/Buffer.ts

@@ -5,7 +5,7 @@
 
 import { IMarker } from 'xterm';
 import { BufferLine } from './BufferLine';
-import { reflowLargerApplyNewLayout, reflowLargerCreateNewLayout, reflowLargerGetLinesToRemove, reflowSmallerGetNewLineLengths } from './BufferReflow';
+import { reflowLargerApplyNewLayout, reflowLargerCreateNewLayout, reflowLargerGetLinesToRemove, reflowSmallerGetNewLineLengths, getWrappedLineTrimmedLength } from './BufferReflow';
 import { CircularList, IDeleteEvent, IInsertEvent } from './common/CircularList';
 import { EventEmitter } from './common/EventEmitter';
 import { DEFAULT_COLOR } from './renderer/atlas/Types';
@@ -211,7 +211,7 @@ export class Buffer implements IBuffer {
 
     this.scrollBottom = newRows - 1;
 
-    if (this._hasScrollback) {
+    if (this._isReflowEnabled) {
       this._reflow(newCols, newRows);
 
       // Trim the end of the line off if cols shrunk
@@ -226,6 +226,10 @@ export class Buffer implements IBuffer {
     this._rows = newRows;
   }
 
+  private get _isReflowEnabled(): boolean {
+    return this._hasScrollback && !(this._terminal as any).isWinptyCompatEnabled;
+  }
+
   private _reflow(newCols: number, newRows: number): void {
     if (this._cols === newCols) {
       return;
@@ -233,22 +237,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 {
-    const toRemove: number[] = reflowLargerGetLinesToRemove(this.lines, newCols, this.ybase + this.y);
+  private _reflowLarger(newCols: number, newRows: number): void {
+    const toRemove: number[] = reflowLargerGetLinesToRemove(this.lines, this._cols, 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 +260,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));
         }
@@ -344,8 +348,8 @@ export class Buffer implements IBuffer {
         srcCol -= cellsToCopy;
         if (srcCol === 0) {
           srcLineIndex--;
-          // TODO: srcCol shoudl take trimmed length into account
-          srcCol = wrappedLines[Math.max(srcLineIndex, 0)].getTrimmedLength(); // this._cols;
+          const wrappedLinesIndex = Math.max(srcLineIndex, 0);
+          srcCol = getWrappedLineTrimmedLength(wrappedLines, wrappedLinesIndex, this._cols);
         }
       }
 
@@ -360,7 +364,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/BufferReflow.ts

@@ -3,7 +3,7 @@
  * @license MIT
  */
 
-import { FILL_CHAR_DATA } from './Buffer';
+import { FILL_CHAR_DATA, CHAR_DATA_CHAR_INDEX, CHAR_DATA_WIDTH_INDEX } from './Buffer';
 import { BufferLine } from './BufferLine';
 import { CircularList, IDeleteEvent } from './common/CircularList';
 import { IBufferLine } from './Types';
@@ -19,7 +19,7 @@ export interface INewLayoutResult {
  * @param lines The buffer lines.
  * @param newCols The columns after resize.
  */
-export function reflowLargerGetLinesToRemove(lines: CircularList<IBufferLine>, newCols: number, bufferAbsoluteY: number): number[] {
+export function reflowLargerGetLinesToRemove(lines: CircularList<IBufferLine>, oldCols: number, newCols: number, bufferAbsoluteY: number): number[] {
   // Gather all BufferLines that need to be removed from the Buffer here so that they can be
   // batched up and only committed once
   const toRemove: number[] = [];
@@ -48,11 +48,11 @@ export function reflowLargerGetLinesToRemove(lines: CircularList<IBufferLine>, n
 
     // Copy buffer data to new locations
     let destLineIndex = 0;
-    let destCol = wrappedLines[destLineIndex].getTrimmedLength();
+    let destCol = getWrappedLineTrimmedLength(wrappedLines, destLineIndex, oldCols);
     let srcLineIndex = 1;
     let srcCol = 0;
     while (srcLineIndex < wrappedLines.length) {
-      const srcTrimmedTineLength = wrappedLines[srcLineIndex].getTrimmedLength();
+      const srcTrimmedTineLength = getWrappedLineTrimmedLength(wrappedLines, srcLineIndex, oldCols);
       const srcRemainingCells = srcTrimmedTineLength - srcCol;
       const destRemainingCells = newCols - destCol;
       const cellsToCopy = Math.min(srcRemainingCells, destRemainingCells);
@@ -173,7 +173,7 @@ export function reflowLargerApplyNewLayout(lines: CircularList<IBufferLine>, new
  */
 export function reflowSmallerGetNewLineLengths(wrappedLines: BufferLine[], oldCols: number, newCols: number): number[] {
   const newLineLengths: number[] = [];
-  const cellsNeeded = wrappedLines.map(l => l.getTrimmedLength()).reduce((p, c) => p + c);
+  const cellsNeeded = wrappedLines.map((l, i) => getWrappedLineTrimmedLength(wrappedLines, i, oldCols)).reduce((p, c) => p + c);
 
   // Use srcCol and srcLine to find the new wrapping point, use that to get the cellsAvailable and
   // linesNeeded
@@ -187,7 +187,7 @@ export function reflowSmallerGetNewLineLengths(wrappedLines: BufferLine[], oldCo
       break;
     }
     srcCol += newCols;
-    const oldTrimmedLength = wrappedLines[srcLine].getTrimmedLength();
+    const oldTrimmedLength = getWrappedLineTrimmedLength(wrappedLines, srcLine, oldCols);
     if (srcCol > oldTrimmedLength) {
       srcCol -= oldTrimmedLength;
       srcLine++;
@@ -203,3 +203,20 @@ export function reflowSmallerGetNewLineLengths(wrappedLines: BufferLine[], oldCo
 
   return newLineLengths;
 }
+
+export function getWrappedLineTrimmedLength(lines: BufferLine[], i: number, cols: number): number {
+  // If this is the last row in the wrapped line, get the actual trimmed length
+  if (i === lines.length - 1) {
+    return lines[i].getTrimmedLength();
+  }
+  // Detect whether the following line starts with a wide character and the end of the current line
+  // is null, if so then we can be pretty sure the null character should be excluded from the line
+  // length]
+  const cell = lines[i].get(cols - 1);
+  const endsInNull = cell[CHAR_DATA_CHAR_INDEX] === '' && cell[CHAR_DATA_WIDTH_INDEX] === 1;
+  const followingLineStartsWithWide = lines[i + 1].getWidth(0) === 2;
+  if (endsInNull && followingLineStartsWithWide) {
+    return cols - 1;
+  }
+  return cols;
+}

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

@@ -64,10 +64,12 @@ const document = (typeof window !== 'undefined') ? window.document : null;
 const WRITE_BUFFER_PAUSE_THRESHOLD = 5;
 
 /**
- * The number of writes to perform in a single batch before allowing the
- * renderer to catch up with a 0ms setTimeout.
+ * The max number of ms to spend on writes before allowing the renderer to
+ * catch up with a 0ms setTimeout. A value of < 33 to keep us close to
+ * 30fps, and a value of < 16 to try to run at 60fps. Of course, the real FPS
+ * depends on the time it takes for the renderer to draw the frame.
  */
-const WRITE_BATCH_SIZE = 300;
+const WRITE_TIMEOUT_MS = 12;
 
 const MINIMUM_COLS = 2; // Less than 2 can mess with wide chars
 const MINIMUM_ROWS = 1;
@@ -738,6 +740,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
@@ -1343,19 +1350,20 @@ export class Terminal extends EventEmitter implements ITerminal, IDisposable, II
     }
   }
 
-  protected _innerWrite(): void {
+  protected _innerWrite(bufferOffset: number = 0): void {
     // Ensure the terminal isn't disposed
     if (this._isDisposed) {
       this.writeBuffer = [];
     }
 
-    const writeBatch = this.writeBuffer.splice(0, WRITE_BATCH_SIZE);
-    while (writeBatch.length > 0) {
-      const data = writeBatch.shift();
+    const startTime = Date.now();
+    while (this.writeBuffer.length > bufferOffset) {
+      const data = this.writeBuffer[bufferOffset];
+      bufferOffset++;
 
       // If XOFF was sent in order to catch up with the pty process, resume it if
-      // the writeBuffer is empty to allow more data to come in.
-      if (this._xoffSentToCatchUp && writeBatch.length === 0 && this.writeBuffer.length === 0) {
+      // we reached the end of the writeBuffer to allow more data to come in.
+      if (this._xoffSentToCatchUp && this.writeBuffer.length === bufferOffset) {
         this.handler(C0.DC1);
         this._xoffSentToCatchUp = false;
       }
@@ -1373,12 +1381,17 @@ export class Terminal extends EventEmitter implements ITerminal, IDisposable, II
 
       this.updateRange(this.buffer.y);
       this.refresh(this._refreshStart, this._refreshEnd);
+
+      if (Date.now() - startTime >= WRITE_TIMEOUT_MS) {
+        break;
+      }
     }
-    if (this.writeBuffer.length > 0) {
+    if (this.writeBuffer.length > bufferOffset) {
       // Allow renderer to catch up before processing the next batch
-      setTimeout(() => this._innerWrite(), 0);
+      setTimeout(() => this._innerWrite(bufferOffset), 0);
     } else {
       this._writeInProgress = false;
+      this.writeBuffer = [];
     }
   }
 

src/addons/winptyCompat/winptyCompat.ts

@@ -19,6 +19,8 @@ export function winptyCompatInit(terminal: Terminal): void {
     return;
   }
 
+  (addonTerminal._core as any).isWinptyCompatEnabled = true;
+
   // Winpty does not support wraparound mode which means that lines will never
   // be marked as wrapped. This causes issues for things like copying a line
   // retaining the wrapped new line characters or if consumers are listening

src/renderer/BaseRenderLayer.ts

@@ -241,7 +241,7 @@ export abstract class BaseRenderLayer implements IRenderLayer {
     this._ctx.fillText(
         charData[CHAR_DATA_CHAR_INDEX],
         x * this._scaledCellWidth + this._scaledCharLeft,
-        (y + 0.5) * this._scaledCellHeight + this._scaledCharTop);
+        y * this._scaledCellHeight + this._scaledCharTop + this._scaledCharHeight / 2);
   }
 
   /**
@@ -316,7 +316,7 @@ export abstract class BaseRenderLayer implements IRenderLayer {
     this._ctx.fillText(
         chars,
         x * this._scaledCellWidth + this._scaledCharLeft,
-        (y + 0.5) * this._scaledCellHeight + this._scaledCharTop);
+        y * this._scaledCellHeight + this._scaledCharTop + this._scaledCharHeight / 2);
     this._ctx.restore();
   }
 

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/MouseZoneManager.ts

@@ -23,6 +23,7 @@ export class MouseZoneManager extends Disposable implements IMouseZoneManager {
 
   private _areZonesActive: boolean = false;
   private _mouseMoveListener: (e: MouseEvent) => any;
+  private _mouseLeaveListener: (e: MouseEvent) => any;
   private _clickListener: (e: MouseEvent) => any;
 
   private _tooltipTimeout: number = null;
@@ -38,6 +39,7 @@ export class MouseZoneManager extends Disposable implements IMouseZoneManager {
 
     // These events are expensive, only listen to it when mouse zones are active
     this._mouseMoveListener = e => this._onMouseMove(e);
+    this._mouseLeaveListener = e => this._onMouseLeave(e);
     this._clickListener = e => this._onClick(e);
   }
 
@@ -89,6 +91,7 @@ export class MouseZoneManager extends Disposable implements IMouseZoneManager {
     if (!this._areZonesActive) {
       this._areZonesActive = true;
       this._terminal.element.addEventListener('mousemove', this._mouseMoveListener);
+      this._terminal.element.addEventListener('mouseleave', this._mouseLeaveListener);
       this._terminal.element.addEventListener('click', this._clickListener);
     }
   }
@@ -97,6 +100,7 @@ export class MouseZoneManager extends Disposable implements IMouseZoneManager {
     if (this._areZonesActive) {
       this._areZonesActive = false;
       this._terminal.element.removeEventListener('mousemove', this._mouseMoveListener);
+      this._terminal.element.removeEventListener('mouseleave', this._mouseLeaveListener);
       this._terminal.element.removeEventListener('click', this._clickListener);
     }
   }
@@ -169,6 +173,18 @@ export class MouseZoneManager extends Disposable implements IMouseZoneManager {
     }
   }
 
+  private _onMouseLeave(e: MouseEvent): void {
+    // Fire the hover end callback and cancel any existing timer if the mouse
+    // leaves the terminal element
+    if (this._currentZone) {
+      this._currentZone.leaveCallback();
+      this._currentZone = null;
+      if (this._tooltipTimeout) {
+        clearTimeout(this._tooltipTimeout);
+      }
+    }
+  }
+
   private _onClick(e: MouseEvent): void {
     // Find the active zone and click it if found
     const zone = this._findZoneEventAt(e);

src/xterm.css

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