Add logic for reflowing lines

src/InputHandler.ts

@@ -53,6 +53,8 @@ export class InputHandler implements IInputHandler {
  if (this._terminal.x + ch_width - 1 >= this._terminal.cols) {
  // autowrap - DECAWM
  if (this._terminal.wraparoundMode) {
+ // Mark this row as being wrapped.
+ this._terminal.lines.addWrappedLine(row);
  this._terminal.x = 0;
  this._terminal.y++;
  if (this._terminal.y > this._terminal.scrollBottom) {
@@ -79,7 +81,7 @@ export class InputHandler implements IInputHandler {
  this._terminal.lines.get(row)[this._terminal.cols - 2] = [this._terminal.curAttr, ' ', 1];
 
  // insert empty cell at cursor
- this._terminal.lines.get(row).splice(this._terminal.x, 0, [this._terminal.curAttr, ' ', 1]);
+ this._terminal.lines.get(row).splice(this._terminal.x, 0, [this._terminal.curAttr, null, 1]);
  }
  }
 
@@ -152,7 +154,12 @@ export class InputHandler implements IInputHandler {
  * Horizontal Tab (HT) (Ctrl-I).
  */
  public tab(): void {
- this._terminal.x = this._terminal.nextStop();
+ const stop = this._terminal.nextStop();
+ let row = this._terminal.lines.get(this._terminal.y + this._terminal.ybase);
+ while (this._terminal.x <= stop) {
+ row[this._terminal.x] = [this._terminal.defAttr, ' ', 1];
+ this._terminal.x++;
+ }
  }
 
  /**
@@ -504,7 +511,7 @@ export class InputHandler implements IInputHandler {
  }
 
  row = this._terminal.y + this._terminal.ybase;
- ch = [this._terminal.eraseAttr(), ' ', 1]; // xterm
+ ch = [this._terminal.eraseAttr(), null, 1]; // xterm
 
  while (param--) {
  this._terminal.lines.get(row).splice(this._terminal.x, 1);
@@ -554,7 +561,7 @@ export class InputHandler implements IInputHandler {
 
  row = this._terminal.y + this._terminal.ybase;
  j = this._terminal.x;
- ch = [this._terminal.eraseAttr(), ' ', 1]; // xterm
+ ch = [this._terminal.eraseAttr(), null, 1]; // xterm
 
  while (param-- && j < this._terminal.cols) {
  this._terminal.lines.get(row)[j++] = ch;
@@ -608,7 +615,7 @@ export class InputHandler implements IInputHandler {
  public repeatPrecedingCharacter(params: number[]): void {
  let param = params[0] || 1
  , line = this._terminal.lines.get(this._terminal.ybase + this._terminal.y)
- , ch = line[this._terminal.x - 1] || [this._terminal.defAttr, ' ', 1];
+ , ch = line[this._terminal.x - 1] || [this._terminal.defAttr, null, 1];
 
  while (param--) {
  line[this._terminal.x++] = ch;
@@ -1131,6 +1138,10 @@ export class InputHandler implements IInputHandler {
  // this.x = this.savedX;
  // this.y = this.savedY;
  // }
+
+ // Run the resize handler in case the viewport has been resized since we switched buffers
+ this._terminal.resize(this._terminal.cols, this._terminal.rows, true);
+
  this._terminal.refresh(0, this._terminal.rows - 1);
  this._terminal.viewport.syncScrollArea();
  this._terminal.showCursor();

src/Interfaces.ts

@@ -23,7 +23,7 @@ export interface ITerminal {
  textarea: HTMLTextAreaElement;
  ybase: number;
  ydisp: number;
- lines: ICircularList<string>;
+ lines: IWrappableList;
  rows: number;
  cols: number;
  browser: IBrowser;
@@ -74,6 +74,14 @@ interface ICircularList<T> {
  shiftElements(start: number, count: number, offset: number): void;
 }
 
+export interface IWrappableList extends ICircularList<any[]> {
+ /**
+ * Reflows lines in this list to a new maxwidth.
+ */
+ wrappedLines: number[];
+ reflow(width: number, oldWidth: number): IWrappableList;
+}
+
 export interface LinkMatcherOptions {
  /**
  * The index of the link from the regex.match(text) call. This defaults to 0

src/Renderer.ts

@@ -278,6 +278,12 @@ export class Renderer {
  }
 
  this._terminal.children[y].innerHTML = out;
+
+ if (this._terminal.lines.wrappedLines.indexOf(row) > -1) {
+ this._terminal.children[y].style.background = 'red';
+ } else {
+ this._terminal.children[y].style.background = 'black';
+ }
  }
 
  if (parent) {

src/Types.ts

@@ -12,3 +12,7 @@ export type LinkMatcher = {
 };
 export type LinkMatcherHandler = (event: MouseEvent, uri: string) => boolean | void;
 export type LinkMatcherValidationCallback = (uri: string, element: HTMLElement, callback: (isValid: boolean) => void) => void;
+
+export type CharData = [number, string | null, number];
+
+export type RowData = CharData[];

src/test/escape-sequences-test.js

@@ -62,10 +62,12 @@ function formatError(in_, out_, expected) {
 function terminalToString(term) {
  var result = '';
  var line_s = '';
+ var ch;
  for (var line = term.ybase; line < term.ybase + term.rows; line++) {
  line_s = '';
  for (var cell=0; cell<term.cols; ++cell) {
- line_s += term.lines.get(line)[cell][1];
+ ch = term.lines.get(line)[cell][1];
+ line_s += (ch === null ? ' ' : ch);
  }
  // rtrim empty cells as xterm does
  line_s = line_s.replace(/\s+$/, '');

src/utils/CircularList.ts

@@ -5,9 +5,9 @@
  * @license MIT
  */
 export class CircularList<T> {
- private _array: T[];
- private _startIndex: number;
- private _length: number;
+ protected _array: T[];
+ protected _startIndex: number;
+ protected _length: number;
 
  constructor(maxLength: number) {
  this._array = new Array<T>(maxLength);
@@ -43,8 +43,12 @@ export class CircularList<T> {
  this._length = newLength;
  }
 
- public get forEach(): (callbackfn: (value: T, index: number, array: T[]) => void) => void {
- return this._array.forEach;
+ public forEach(callbackfn: (value: T, index?: number, array?: T[]) => void): void {
+ let i = 0;
+ let len = this.length;
+ for (i; i < len; i++) {
+ callbackfn(this.get(i), i);
+ }
  }
 
  /**
@@ -177,7 +181,7 @@ export class CircularList<T> {
  * @param index The regular index.
  * @returns The cyclic index.
  */
- private _getCyclicIndex(index: number): number {
+ protected _getCyclicIndex(index: number): number {
  return (this._startIndex + index) % this.maxLength;
  }
 }

src/utils/WrappableList.ts

@@ -0,0 +1,150 @@
+import { CircularList } from './CircularList';
+import { RowData } from '../Types';
+
+import { IWrappableList } from '../Interfaces';
+
+function fastForeach(array, fn) {
+ let i = 0;
+ let len = array.length;
+ for (i; i < len; i++) {
+ fn(array[i], i, array);
+ }
+}
+
+function trimmedLength(line) {
+ let i = 0;
+ let len = line.length;
+ for (i; i < len; i++) {
+ if (!line[i] || (line[i] && line[i][1] === null)) {
+ break;
+ }
+ }
+
+ return i;
+}
+
+export class WrappableList extends CircularList<RowData> {
+ private _wrappedLineIncrement: number[] = [];
+ private _blankline: RowData;
+ public wrappedLines: number[] = [];
+
+ constructor(maxLength: number, private _terminal) {
+ super(maxLength);
+
+ this._blankline = this._terminal.blankLine();
+ }
+
+ public push(value: RowData): void {
+ // Need to make sure wrappedlines move when CircularList wraps around, but without increasing
+ // the time complexity of `push`. We push the number of `wrappedLines` that should be
+ // incremented so that it can be calculated later.
+ if (this._length + 1 === this.maxLength) {
+ this._wrappedLineIncrement.push(this.wrappedLines.length);
+ }
+ super.push(value);
+ }
+
+ public addWrappedLine(row: number): void {
+ this.wrappedLines.push(row);
+ }
+
+ // Adjusts `wrappedLines` using `_wrappedLineIncrement`
+ private _adjustWrappedLines(): void {
+ fastForeach(this._wrappedLineIncrement, (end) => {
+ let i = 0;
+ for (i; i < end; i++) {
+ this.wrappedLines[i] -= 1;
+ }
+ });
+ this._wrappedLineIncrement = [];
+ }
+
+ private _numArrayToObject(array: number[]) {
+ let i = 0;
+ let len = array.length;
+ let returnObject = {};
+ for (i; i < len; i++) {
+ returnObject[array[i]] = null;
+ }
+ return returnObject;
+ }
+
+ /**
+ * Reflow lines to a new max width.
+ * A record of which lines are wrapped is stored in `wrappedLines` and is used to join and split
+ * lines correctly.
+ */
+ public reflow(width: number, oldWidth: number) {
+ const temp = [];
+ const tempWrapped = [];
+ const wrappedLines = this.wrappedLines;
+ let masterIndex = 0;
+ let len = this.length;
+ let line;
+ let trim;
+ let isWidthDecreasing = width < oldWidth;
+ let i = 0;
+ let xj;
+
+ this._adjustWrappedLines();
+ // Using in index accessor is much quicker when we need to calculate previouslyWrapped many times
+ const wrappedLinesObject = this._numArrayToObject(this.wrappedLines);
+
+ const concatWrapped = (data, index) => {
+ let next = index;
+ while (wrappedLinesObject[next] !== undefined) {
+ next++;
+ masterIndex++;
+ Array.prototype.push.apply(data, this.get(next));
+ }
+ return data;
+ };
+
+ // A for loop is used here so that masterIndex can be advanced when concatting lines in
+ // the 'concatWrapped' method
+ for (masterIndex; masterIndex < len; masterIndex++) {
+ line = concatWrapped(this.get(masterIndex), masterIndex);
+ trim = trimmedLength(line);
+
+ if (trim > width) {
+ line.length = trim;
+ xj = fastCeil(trim / width) - 1;
+ for (i = 0; i < trim; i += width) {
+ if (width > line.length) {
+ temp.push(line);
+ } else {
+ temp.push(line.splice(0, width));
+ }
+
+ if (xj-- > 0) {
+ tempWrapped.push(temp.length - 1);
+ }
+ }
+ } else {
+ if (isWidthDecreasing) {
+ line.length = width;
+ }
+ temp.push(line);
+ }
+ }
+
+ // Chop the reflow list to length and push it into a new CircularList, also compensate wrapped
+ // lines for new start point of list
+ const scrollback = this.maxLength;
+ let pushStart = temp.length > scrollback ?
+ temp.length - scrollback :
+ 0;
+ if (pushStart > 0) {
+ for (i = 0; i < tempWrapped.length; i++) {
+ tempWrapped[i] -= pushStart;
+ }
+ }
+ let newList = new WrappableList(scrollback, this._terminal);
+ for (i = pushStart; i < temp.length; i++) {
+ newList.push(temp[i]);
+ }
+ newList.wrappedLines = tempWrapped;
+
+ return newList;
+ }
+}