Merge remote-tracking branch 'origin/master' into 449_keep_span_pool
This commit is contained in:
Daniel Imms
+252
@@ -0,0 +1,252 @@
|
||||
/**
|
||||
* @license MIT
|
||||
*/
|
||||
|
||||
/**
|
||||
* The character sets supported by the terminal. These enable several languages
|
||||
* to be represented within the terminal with only 8-bit encoding. See ISO 2022
|
||||
* for a discussion on character sets. Only VT100 character sets are supported.
|
||||
*/
|
||||
export const CHARSETS: {[key: string]: {[key: string]: string}} = {};
|
||||
|
||||
/**
|
||||
* The default character set, US.
|
||||
*/
|
||||
export const DEFAULT_CHARSET = CHARSETS['B'];
|
||||
|
||||
/**
|
||||
* DEC Special Character and Line Drawing Set.
|
||||
* Reference: http://vt100.net/docs/vt102-ug/table5-13.html
|
||||
* A lot of curses apps use this if they see TERM=xterm.
|
||||
* testing: echo -e '\e(0a\e(B'
|
||||
* The xterm output sometimes seems to conflict with the
|
||||
* reference above. xterm seems in line with the reference
|
||||
* when running vttest however.
|
||||
* The table below now uses xterm's output from vttest.
|
||||
*/
|
||||
CHARSETS['0'] = {
|
||||
'`': '\u25c6', // '◆'
|
||||
'a': '\u2592', // '▒'
|
||||
'b': '\u0009', // '\t'
|
||||
'c': '\u000c', // '\f'
|
||||
'd': '\u000d', // '\r'
|
||||
'e': '\u000a', // '\n'
|
||||
'f': '\u00b0', // '°'
|
||||
'g': '\u00b1', // '±'
|
||||
'h': '\u2424', // '\u2424' (NL)
|
||||
'i': '\u000b', // '\v'
|
||||
'j': '\u2518', // '┘'
|
||||
'k': '\u2510', // '┐'
|
||||
'l': '\u250c', // '┌'
|
||||
'm': '\u2514', // '└'
|
||||
'n': '\u253c', // '┼'
|
||||
'o': '\u23ba', // '⎺'
|
||||
'p': '\u23bb', // '⎻'
|
||||
'q': '\u2500', // '─'
|
||||
'r': '\u23bc', // '⎼'
|
||||
's': '\u23bd', // '⎽'
|
||||
't': '\u251c', // '├'
|
||||
'u': '\u2524', // '┤'
|
||||
'v': '\u2534', // '┴'
|
||||
'w': '\u252c', // '┬'
|
||||
'x': '\u2502', // '│'
|
||||
'y': '\u2264', // '≤'
|
||||
'z': '\u2265', // '≥'
|
||||
'{': '\u03c0', // 'π'
|
||||
'|': '\u2260', // '≠'
|
||||
'}': '\u00a3', // '£'
|
||||
'~': '\u00b7' // '·'
|
||||
};
|
||||
|
||||
/**
|
||||
* British character set
|
||||
* ESC (A
|
||||
* Reference: http://vt100.net/docs/vt220-rm/table2-5.html
|
||||
*/
|
||||
CHARSETS['A'] = {
|
||||
'#': '£'
|
||||
};
|
||||
|
||||
/**
|
||||
* United States character set
|
||||
* ESC (B
|
||||
*/
|
||||
CHARSETS['B'] = null;
|
||||
|
||||
/**
|
||||
* Dutch character set
|
||||
* ESC (4
|
||||
* Reference: http://vt100.net/docs/vt220-rm/table2-6.html
|
||||
*/
|
||||
CHARSETS['4'] = {
|
||||
'#': '£',
|
||||
'@': '¾',
|
||||
'[': 'ij',
|
||||
'\\': '½',
|
||||
']': '|',
|
||||
'{': '¨',
|
||||
'|': 'f',
|
||||
'}': '¼',
|
||||
'~': '´'
|
||||
};
|
||||
|
||||
/**
|
||||
* Finnish character set
|
||||
* ESC (C or ESC (5
|
||||
* Reference: http://vt100.net/docs/vt220-rm/table2-7.html
|
||||
*/
|
||||
CHARSETS['C'] =
|
||||
CHARSETS['5'] = {
|
||||
'[': 'Ä',
|
||||
'\\': 'Ö',
|
||||
']': 'Å',
|
||||
'^': 'Ü',
|
||||
'`': 'é',
|
||||
'{': 'ä',
|
||||
'|': 'ö',
|
||||
'}': 'å',
|
||||
'~': 'ü'
|
||||
};
|
||||
|
||||
/**
|
||||
* French character set
|
||||
* ESC (R
|
||||
* Reference: http://vt100.net/docs/vt220-rm/table2-8.html
|
||||
*/
|
||||
CHARSETS['R'] = {
|
||||
'#': '£',
|
||||
'@': 'à',
|
||||
'[': '°',
|
||||
'\\': 'ç',
|
||||
']': '§',
|
||||
'{': 'é',
|
||||
'|': 'ù',
|
||||
'}': 'è',
|
||||
'~': '¨'
|
||||
};
|
||||
|
||||
/**
|
||||
* French Canadian character set
|
||||
* ESC (Q
|
||||
* Reference: http://vt100.net/docs/vt220-rm/table2-9.html
|
||||
*/
|
||||
CHARSETS['Q'] = {
|
||||
'@': 'à',
|
||||
'[': 'â',
|
||||
'\\': 'ç',
|
||||
']': 'ê',
|
||||
'^': 'î',
|
||||
'`': 'ô',
|
||||
'{': 'é',
|
||||
'|': 'ù',
|
||||
'}': 'è',
|
||||
'~': 'û'
|
||||
};
|
||||
|
||||
/**
|
||||
* German character set
|
||||
* ESC (K
|
||||
* Reference: http://vt100.net/docs/vt220-rm/table2-10.html
|
||||
*/
|
||||
CHARSETS['K'] = {
|
||||
'@': '§',
|
||||
'[': 'Ä',
|
||||
'\\': 'Ö',
|
||||
']': 'Ü',
|
||||
'{': 'ä',
|
||||
'|': 'ö',
|
||||
'}': 'ü',
|
||||
'~': 'ß'
|
||||
};
|
||||
|
||||
/**
|
||||
* Italian character set
|
||||
* ESC (Y
|
||||
* Reference: http://vt100.net/docs/vt220-rm/table2-11.html
|
||||
*/
|
||||
CHARSETS['Y'] = {
|
||||
'#': '£',
|
||||
'@': '§',
|
||||
'[': '°',
|
||||
'\\': 'ç',
|
||||
']': 'é',
|
||||
'`': 'ù',
|
||||
'{': 'à',
|
||||
'|': 'ò',
|
||||
'}': 'è',
|
||||
'~': 'ì'
|
||||
};
|
||||
|
||||
/**
|
||||
* Norwegian/Danish character set
|
||||
* ESC (E or ESC (6
|
||||
* Reference: http://vt100.net/docs/vt220-rm/table2-12.html
|
||||
*/
|
||||
CHARSETS['E'] =
|
||||
CHARSETS['6'] = {
|
||||
'@': 'Ä',
|
||||
'[': 'Æ',
|
||||
'\\': 'Ø',
|
||||
']': 'Å',
|
||||
'^': 'Ü',
|
||||
'`': 'ä',
|
||||
'{': 'æ',
|
||||
'|': 'ø',
|
||||
'}': 'å',
|
||||
'~': 'ü'
|
||||
};
|
||||
|
||||
/**
|
||||
* Spanish character set
|
||||
* ESC (Z
|
||||
* Reference: http://vt100.net/docs/vt220-rm/table2-13.html
|
||||
*/
|
||||
CHARSETS['Z'] = {
|
||||
'#': '£',
|
||||
'@': '§',
|
||||
'[': '¡',
|
||||
'\\': 'Ñ',
|
||||
']': '¿',
|
||||
'{': '°',
|
||||
'|': 'ñ',
|
||||
'}': 'ç'
|
||||
};
|
||||
|
||||
/**
|
||||
* Swedish character set
|
||||
* ESC (H or ESC (7
|
||||
* Reference: http://vt100.net/docs/vt220-rm/table2-14.html
|
||||
*/
|
||||
CHARSETS['H'] =
|
||||
CHARSETS['7'] = {
|
||||
'@': 'É',
|
||||
'[': 'Ä',
|
||||
'\\': 'Ö',
|
||||
']': 'Å',
|
||||
'^': 'Ü',
|
||||
'`': 'é',
|
||||
'{': 'ä',
|
||||
'|': 'ö',
|
||||
'}': 'å',
|
||||
'~': 'ü'
|
||||
};
|
||||
|
||||
/**
|
||||
* Swiss character set
|
||||
* ESC (=
|
||||
* Reference: http://vt100.net/docs/vt220-rm/table2-15.html
|
||||
*/
|
||||
CHARSETS['='] = {
|
||||
'#': 'ù',
|
||||
'@': 'à',
|
||||
'[': 'é',
|
||||
'\\': 'ç',
|
||||
']': 'ê',
|
||||
'^': 'î',
|
||||
'_': 'è',
|
||||
'`': 'ô',
|
||||
'{': 'ä',
|
||||
'|': 'ö',
|
||||
'}': 'ü',
|
||||
'~': 'û'
|
||||
};
|
||||
@@ -2,11 +2,11 @@ import { assert } from 'chai';
|
||||
import { CompositionHelper } from './CompositionHelper';
|
||||
|
||||
describe('CompositionHelper', () => {
|
||||
var terminal;
|
||||
var compositionHelper;
|
||||
var compositionView;
|
||||
var textarea;
|
||||
var handledText;
|
||||
let terminal;
|
||||
let compositionHelper;
|
||||
let compositionView;
|
||||
let textarea;
|
||||
let handledText;
|
||||
|
||||
beforeEach(() => {
|
||||
compositionView = {
|
||||
@@ -125,7 +125,7 @@ describe('CompositionHelper', () => {
|
||||
compositionHelper.compositionend();
|
||||
compositionHelper.compositionstart();
|
||||
compositionHelper.compositionupdate({ data: '아' });
|
||||
textarea.value = '아아'
|
||||
textarea.value = '아아';
|
||||
setTimeout(() => { // wait for any textarea updates
|
||||
compositionHelper.compositionend();
|
||||
setTimeout(() => { // wait for any textarea updates
|
||||
@@ -187,7 +187,7 @@ describe('CompositionHelper', () => {
|
||||
}, 0);
|
||||
}, 0);
|
||||
}, 0);
|
||||
})
|
||||
});
|
||||
|
||||
it('Should insert multi-character compositions that are converted to other characters with different lengths', function (done) {
|
||||
// First character 'い'
|
||||
|
||||
+25
-28
@@ -24,7 +24,7 @@ export class CompositionHelper {
|
||||
/**
|
||||
* The position within the input textarea's value of the current composition.
|
||||
*/
|
||||
private compositionPosition: IPosition;;
|
||||
private compositionPosition: IPosition;
|
||||
|
||||
/**
|
||||
* Whether a composition is in the process of being sent, setting this to false will cancel any
|
||||
@@ -65,9 +65,8 @@ export class CompositionHelper {
|
||||
public compositionupdate(ev: CompositionEvent) {
|
||||
this.compositionView.textContent = ev.data;
|
||||
this.updateCompositionElements();
|
||||
var self = this;
|
||||
setTimeout(function() {
|
||||
self.compositionPosition.end = self.textarea.value.length;
|
||||
setTimeout(() => {
|
||||
this.compositionPosition.end = this.textarea.value.length;
|
||||
}, 0);
|
||||
}
|
||||
|
||||
@@ -125,15 +124,15 @@ export class CompositionHelper {
|
||||
if (!waitForPropogation) {
|
||||
// Cancel any delayed composition send requests and send the input immediately.
|
||||
this.isSendingComposition = false;
|
||||
var input = this.textarea.value.substring(this.compositionPosition.start, this.compositionPosition.end);
|
||||
const input = this.textarea.value.substring(this.compositionPosition.start, this.compositionPosition.end);
|
||||
this.terminal.handler(input);
|
||||
} else {
|
||||
// Make a deep copy of the composition position here as a new compositionstart event may
|
||||
// fire before the setTimeout executes.
|
||||
var currentCompositionPosition = {
|
||||
const currentCompositionPosition = {
|
||||
start: this.compositionPosition.start,
|
||||
end: this.compositionPosition.end,
|
||||
}
|
||||
};
|
||||
|
||||
// Since composition* events happen before the changes take place in the textarea on most
|
||||
// browsers, use a setTimeout with 0ms time to allow the native compositionend event to
|
||||
@@ -143,23 +142,22 @@ export class CompositionHelper {
|
||||
// - The last compositionupdate event's data property does not always accurately describe
|
||||
// the character, a counter example being Korean where an ending consonsant can move to
|
||||
// the following character if the following input is a vowel.
|
||||
var self = this;
|
||||
this.isSendingComposition = true;
|
||||
setTimeout(function () {
|
||||
setTimeout(() => {
|
||||
// Ensure that the input has not already been sent
|
||||
if (self.isSendingComposition) {
|
||||
self.isSendingComposition = false;
|
||||
var input;
|
||||
if (self.isComposing) {
|
||||
if (this.isSendingComposition) {
|
||||
this.isSendingComposition = false;
|
||||
let input;
|
||||
if (this.isComposing) {
|
||||
// Use the end position to get the string if a new composition has started.
|
||||
input = self.textarea.value.substring(currentCompositionPosition.start, currentCompositionPosition.end);
|
||||
input = this.textarea.value.substring(currentCompositionPosition.start, currentCompositionPosition.end);
|
||||
} else {
|
||||
// Don't use the end position here in order to pick up any characters after the
|
||||
// composition has finished, for example when typing a non-composition character
|
||||
// (eg. 2) after a composition character.
|
||||
input = self.textarea.value.substring(currentCompositionPosition.start);
|
||||
input = this.textarea.value.substring(currentCompositionPosition.start);
|
||||
}
|
||||
self.terminal.handler(input);
|
||||
this.terminal.handler(input);
|
||||
}
|
||||
}, 0);
|
||||
}
|
||||
@@ -172,15 +170,14 @@ export class CompositionHelper {
|
||||
* IME is active.
|
||||
*/
|
||||
private handleAnyTextareaChanges() {
|
||||
var oldValue = this.textarea.value;
|
||||
var self = this;
|
||||
setTimeout(function() {
|
||||
const oldValue = this.textarea.value;
|
||||
setTimeout(() => {
|
||||
// Ignore if a composition has started since the timeout
|
||||
if (!self.isComposing) {
|
||||
var newValue = self.textarea.value;
|
||||
var diff = newValue.replace(oldValue, '');
|
||||
if (!this.isComposing) {
|
||||
const newValue = this.textarea.value;
|
||||
const diff = newValue.replace(oldValue, '');
|
||||
if (diff.length > 0) {
|
||||
self.terminal.handler(diff);
|
||||
this.terminal.handler(diff);
|
||||
}
|
||||
}
|
||||
}, 0);
|
||||
@@ -196,12 +193,12 @@ export class CompositionHelper {
|
||||
if (!this.isComposing) {
|
||||
return;
|
||||
}
|
||||
var cursor = <HTMLElement>this.terminal.element.querySelector('.terminal-cursor');
|
||||
const cursor = <HTMLElement>this.terminal.element.querySelector('.terminal-cursor');
|
||||
if (cursor) {
|
||||
// Take .xterm-rows offsetTop into account as well in case it's positioned absolutely within
|
||||
// the .xterm element.
|
||||
var xtermRows = <HTMLElement>this.terminal.element.querySelector('.xterm-rows');
|
||||
var cursorTop = xtermRows.offsetTop + cursor.offsetTop;
|
||||
const xtermRows = <HTMLElement>this.terminal.element.querySelector('.xterm-rows');
|
||||
const cursorTop = xtermRows.offsetTop + cursor.offsetTop;
|
||||
|
||||
this.compositionView.style.left = cursor.offsetLeft + 'px';
|
||||
this.compositionView.style.top = cursorTop + 'px';
|
||||
@@ -209,7 +206,7 @@ export class CompositionHelper {
|
||||
this.compositionView.style.lineHeight = cursor.offsetHeight + 'px';
|
||||
// Sync the textarea to the exact position of the composition view so the IME knows where the
|
||||
// text is.
|
||||
var compositionViewBounds = this.compositionView.getBoundingClientRect();
|
||||
const compositionViewBounds = this.compositionView.getBoundingClientRect();
|
||||
this.textarea.style.left = cursor.offsetLeft + 'px';
|
||||
this.textarea.style.top = cursorTop + 'px';
|
||||
this.textarea.style.width = compositionViewBounds.width + 'px';
|
||||
@@ -217,7 +214,7 @@ export class CompositionHelper {
|
||||
this.textarea.style.lineHeight = compositionViewBounds.height + 'px';
|
||||
}
|
||||
if (!dontRecurse) {
|
||||
setTimeout(this.updateCompositionElements.bind(this, true), 0);
|
||||
setTimeout(() => this.updateCompositionElements(true), 0);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@@ -0,0 +1,78 @@
|
||||
/**
|
||||
* @license MIT
|
||||
*/
|
||||
|
||||
/**
|
||||
* C0 control codes
|
||||
* See = https://en.wikipedia.org/wiki/C0_and_C1_control_codes
|
||||
*/
|
||||
export namespace C0 {
|
||||
/** Null (Caret = ^@, C = \0) */
|
||||
export const NUL = '\x00';
|
||||
/** Start of Heading (Caret = ^A) */
|
||||
export const SOH = '\x01';
|
||||
/** Start of Text (Caret = ^B) */
|
||||
export const STX = '\x02';
|
||||
/** End of Text (Caret = ^C) */
|
||||
export const ETX = '\x03';
|
||||
/** End of Transmission (Caret = ^D) */
|
||||
export const EOT = '\x04';
|
||||
/** Enquiry (Caret = ^E) */
|
||||
export const ENQ = '\x05';
|
||||
/** Acknowledge (Caret = ^F) */
|
||||
export const ACK = '\x06';
|
||||
/** Bell (Caret = ^G, C = \a) */
|
||||
export const BEL = '\x07';
|
||||
/** Backspace (Caret = ^H, C = \b) */
|
||||
export const BS = '\x08';
|
||||
/** Character Tabulation, Horizontal Tabulation (Caret = ^I, C = \t) */
|
||||
export const HT = '\x09';
|
||||
/** Line Feed (Caret = ^J, C = \n) */
|
||||
export const LF = '\x0a';
|
||||
/** Line Tabulation, Vertical Tabulation (Caret = ^K, C = \v) */
|
||||
export const VT = '\x0b';
|
||||
/** Form Feed (Caret = ^L, C = \f) */
|
||||
export const FF = '\x0c';
|
||||
/** Carriage Return (Caret = ^M, C = \r) */
|
||||
export const CR = '\x0d';
|
||||
/** Shift Out (Caret = ^N) */
|
||||
export const SO = '\x0e';
|
||||
/** Shift In (Caret = ^O) */
|
||||
export const SI = '\x0f';
|
||||
/** Data Link Escape (Caret = ^P) */
|
||||
export const DLE = '\x10';
|
||||
/** Device Control One (XON) (Caret = ^Q) */
|
||||
export const DC1 = '\x11';
|
||||
/** Device Control Two (Caret = ^R) */
|
||||
export const DC2 = '\x12';
|
||||
/** Device Control Three (XOFF) (Caret = ^S) */
|
||||
export const DC3 = '\x13';
|
||||
/** Device Control Four (Caret = ^T) */
|
||||
export const DC4 = '\x14';
|
||||
/** Negative Acknowledge (Caret = ^U) */
|
||||
export const NAK = '\x15';
|
||||
/** Synchronous Idle (Caret = ^V) */
|
||||
export const SYN = '\x16';
|
||||
/** End of Transmission Block (Caret = ^W) */
|
||||
export const ETB = '\x17';
|
||||
/** Cancel (Caret = ^X) */
|
||||
export const CAN = '\x18';
|
||||
/** End of Medium (Caret = ^Y) */
|
||||
export const EM = '\x19';
|
||||
/** Substitute (Caret = ^Z) */
|
||||
export const SUB = '\x1a';
|
||||
/** Escape (Caret = ^[, C = \e) */
|
||||
export const ESC = '\x1b';
|
||||
/** File Separator (Caret = ^\) */
|
||||
export const FS = '\x1c';
|
||||
/** Group Separator (Caret = ^]) */
|
||||
export const GS = '\x1d';
|
||||
/** Record Separator (Caret = ^^) */
|
||||
export const RS = '\x1e';
|
||||
/** Unit Separator (Caret = ^_) */
|
||||
export const US = '\x1f';
|
||||
/** Space */
|
||||
export const SP = '\x20';
|
||||
/** Delete (Caret = ^?) */
|
||||
export const DEL = '\x7f';
|
||||
};
|
||||
@@ -0,0 +1,49 @@
|
||||
import { assert } from 'chai';
|
||||
import { InputHandler } from './InputHandler';
|
||||
|
||||
describe('InputHandler', () => {
|
||||
describe('setCursorStyle', () => {
|
||||
it('should call Terminal.setOption with correct params', () => {
|
||||
let options = {};
|
||||
let terminal = {
|
||||
setOption: (option, value) => options[option] = value
|
||||
};
|
||||
let inputHandler = new InputHandler(terminal);
|
||||
|
||||
inputHandler.setCursorStyle([0]);
|
||||
assert.equal(options['cursorStyle'], 'block');
|
||||
assert.equal(options['cursorBlink'], true);
|
||||
|
||||
options = {};
|
||||
inputHandler.setCursorStyle([1]);
|
||||
assert.equal(options['cursorStyle'], 'block');
|
||||
assert.equal(options['cursorBlink'], true);
|
||||
|
||||
options = {};
|
||||
inputHandler.setCursorStyle([2]);
|
||||
assert.equal(options['cursorStyle'], 'block');
|
||||
assert.equal(options['cursorBlink'], false);
|
||||
|
||||
options = {};
|
||||
inputHandler.setCursorStyle([3]);
|
||||
assert.equal(options['cursorStyle'], 'underline');
|
||||
assert.equal(options['cursorBlink'], true);
|
||||
|
||||
options = {};
|
||||
inputHandler.setCursorStyle([4]);
|
||||
assert.equal(options['cursorStyle'], 'underline');
|
||||
assert.equal(options['cursorBlink'], false);
|
||||
|
||||
options = {};
|
||||
inputHandler.setCursorStyle([5]);
|
||||
assert.equal(options['cursorStyle'], 'bar');
|
||||
assert.equal(options['cursorBlink'], true);
|
||||
|
||||
options = {};
|
||||
inputHandler.setCursorStyle([6]);
|
||||
assert.equal(options['cursorStyle'], 'bar');
|
||||
assert.equal(options['cursorBlink'], false);
|
||||
|
||||
});
|
||||
});
|
||||
});
|
||||
+1584
File diff suppressed because it is too large
Load Diff
+113
-1
@@ -2,6 +2,9 @@
|
||||
* @license MIT
|
||||
*/
|
||||
|
||||
import { LinkMatcherOptions } from './Interfaces';
|
||||
import { LinkMatcherHandler, LinkMatcherValidationCallback } from './Types';
|
||||
|
||||
export interface IBrowser {
|
||||
isNode: boolean;
|
||||
userAgent: string;
|
||||
@@ -18,10 +21,19 @@ export interface ITerminal {
|
||||
element: HTMLElement;
|
||||
rowContainer: HTMLElement;
|
||||
textarea: HTMLTextAreaElement;
|
||||
ybase: number;
|
||||
ydisp: number;
|
||||
lines: string[];
|
||||
lines: ICircularList<string>;
|
||||
rows: number;
|
||||
cols: number;
|
||||
browser: IBrowser;
|
||||
writeBuffer: string[];
|
||||
children: HTMLElement[];
|
||||
cursorHidden: boolean;
|
||||
cursorState: number;
|
||||
x: number;
|
||||
y: number;
|
||||
defAttr: number;
|
||||
|
||||
/**
|
||||
* Emit the 'data' event and populate the given data.
|
||||
@@ -31,4 +43,104 @@ export interface ITerminal {
|
||||
on(event: string, callback: () => void);
|
||||
scrollDisp(disp: number, suppressScrollEvent: boolean);
|
||||
cancel(ev: Event, force?: boolean);
|
||||
log(text: string): void;
|
||||
emit(event: string, data: any);
|
||||
}
|
||||
|
||||
export interface ICharMeasure {
|
||||
width: number;
|
||||
height: number;
|
||||
measure(): void;
|
||||
}
|
||||
|
||||
export interface ILinkifier {
|
||||
linkifyRow(rowIndex: number): void;
|
||||
attachHypertextLinkHandler(handler: LinkMatcherHandler): void;
|
||||
registerLinkMatcher(regex: RegExp, handler: LinkMatcherHandler, options?: LinkMatcherOptions): number;
|
||||
deregisterLinkMatcher(matcherId: number): boolean;
|
||||
}
|
||||
|
||||
interface ICircularList<T> {
|
||||
length: number;
|
||||
maxLength: number;
|
||||
|
||||
forEach(callbackfn: (value: T, index: number, array: T[]) => void): void;
|
||||
get(index: number): T;
|
||||
set(index: number, value: T): void;
|
||||
push(value: T): void;
|
||||
pop(): T;
|
||||
splice(start: number, deleteCount: number, ...items: T[]): void;
|
||||
trimStart(count: number): void;
|
||||
shiftElements(start: number, count: number, offset: number): void;
|
||||
}
|
||||
|
||||
export interface LinkMatcherOptions {
|
||||
/**
|
||||
* The index of the link from the regex.match(text) call. This defaults to 0
|
||||
* (for regular expressions without capture groups).
|
||||
*/
|
||||
matchIndex?: number;
|
||||
/**
|
||||
* A callback that validates an individual link, returning true if valid and
|
||||
* false if invalid.
|
||||
*/
|
||||
validationCallback?: LinkMatcherValidationCallback;
|
||||
/**
|
||||
* The priority of the link matcher, this defines the order in which the link
|
||||
* matcher is evaluated relative to others, from highest to lowest. The
|
||||
* default value is 0.
|
||||
*/
|
||||
priority?: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* Handles actions generated by the parser.
|
||||
*/
|
||||
export interface IInputHandler {
|
||||
addChar(char: string, code: number): void;
|
||||
|
||||
/** C0 BEL */ bell(): void;
|
||||
/** C0 LF */ lineFeed(): void;
|
||||
/** C0 CR */ carriageReturn(): void;
|
||||
/** C0 BS */ backspace(): void;
|
||||
/** C0 HT */ tab(): void;
|
||||
/** C0 SO */ shiftOut(): void;
|
||||
/** C0 SI */ shiftIn(): void;
|
||||
|
||||
/** CSI @ */ insertChars(params?: number[]): void;
|
||||
/** CSI A */ cursorUp(params?: number[]): void;
|
||||
/** CSI B */ cursorDown(params?: number[]): void;
|
||||
/** CSI C */ cursorForward(params?: number[]): void;
|
||||
/** CSI D */ cursorBackward(params?: number[]): void;
|
||||
/** CSI E */ cursorNextLine(params?: number[]): void;
|
||||
/** CSI F */ cursorPrecedingLine(params?: number[]): void;
|
||||
/** CSI G */ cursorCharAbsolute(params?: number[]): void;
|
||||
/** CSI H */ cursorPosition(params?: number[]): void;
|
||||
/** CSI I */ cursorForwardTab(params?: number[]): void;
|
||||
/** CSI J */ eraseInDisplay(params?: number[]): void;
|
||||
/** CSI K */ eraseInLine(params?: number[]): void;
|
||||
/** CSI L */ insertLines(params?: number[]): void;
|
||||
/** CSI M */ deleteLines(params?: number[]): void;
|
||||
/** CSI P */ deleteChars(params?: number[]): void;
|
||||
/** CSI S */ scrollUp(params?: number[]): void;
|
||||
/** CSI T */ scrollDown(params?: number[]): void;
|
||||
/** CSI X */ eraseChars(params?: number[]): void;
|
||||
/** CSI Z */ cursorBackwardTab(params?: number[]): void;
|
||||
/** CSI ` */ charPosAbsolute(params?: number[]): void;
|
||||
/** CSI a */ HPositionRelative(params?: number[]): void;
|
||||
/** CSI b */ repeatPrecedingCharacter(params?: number[]): void;
|
||||
/** CSI c */ sendDeviceAttributes(params?: number[]): void;
|
||||
/** CSI d */ linePosAbsolute(params?: number[]): void;
|
||||
/** CSI e */ VPositionRelative(params?: number[]): void;
|
||||
/** CSI f */ HVPosition(params?: number[]): void;
|
||||
/** CSI g */ tabClear(params?: number[]): void;
|
||||
/** CSI h */ setMode(params?: number[]): void;
|
||||
/** CSI l */ resetMode(params?: number[]): void;
|
||||
/** CSI m */ charAttributes(params?: number[]): void;
|
||||
/** CSI n */ deviceStatus(params?: number[]): void;
|
||||
/** CSI p */ softReset(params?: number[]): void;
|
||||
/** CSI q */ setCursorStyle(params?: number[]): void;
|
||||
/** CSI r */ setScrollRegion(params?: number[]): void;
|
||||
/** CSI s */ saveCursor(params?: number[]): void;
|
||||
/** CSI u */ restoreCursor(params?: number[]): void;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,187 @@
|
||||
/**
|
||||
* @license MIT
|
||||
*/
|
||||
import jsdom = require('jsdom');
|
||||
import { assert } from 'chai';
|
||||
import { ITerminal, ILinkifier } from './Interfaces';
|
||||
import { Linkifier } from './Linkifier';
|
||||
import { LinkMatcher } from './Types';
|
||||
|
||||
class TestLinkifier extends Linkifier {
|
||||
constructor() {
|
||||
Linkifier.TIME_BEFORE_LINKIFY = 0;
|
||||
super();
|
||||
}
|
||||
|
||||
public get linkMatchers(): LinkMatcher[] { return this._linkMatchers; }
|
||||
}
|
||||
|
||||
describe('Linkifier', () => {
|
||||
let window: Window;
|
||||
let document: Document;
|
||||
|
||||
let container: HTMLElement;
|
||||
let rows: HTMLElement[];
|
||||
let linkifier: TestLinkifier;
|
||||
|
||||
beforeEach(done => {
|
||||
jsdom.env('', (err, w) => {
|
||||
window = w;
|
||||
document = window.document;
|
||||
linkifier = new TestLinkifier();
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
function addRow(html: string) {
|
||||
const element = document.createElement('div');
|
||||
element.innerHTML = html;
|
||||
container.appendChild(element);
|
||||
rows.push(element);
|
||||
}
|
||||
|
||||
describe('before attachToDom', () => {
|
||||
it('should allow link matcher registration', done => {
|
||||
assert.doesNotThrow(() => {
|
||||
const linkMatcherId = linkifier.registerLinkMatcher(/foo/, () => {});
|
||||
assert.isTrue(linkifier.deregisterLinkMatcher(linkMatcherId));
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('after attachToDom', () => {
|
||||
beforeEach(() => {
|
||||
rows = [];
|
||||
linkifier.attachToDom(document, rows);
|
||||
container = document.createElement('div');
|
||||
document.body.appendChild(container);
|
||||
});
|
||||
|
||||
function clickElement(element: Node) {
|
||||
const event = document.createEvent('MouseEvent');
|
||||
event.initMouseEvent('click', true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
|
||||
element.dispatchEvent(event);
|
||||
}
|
||||
|
||||
function assertLinkifiesEntireRow(uri: string, done: MochaDone) {
|
||||
addRow(uri);
|
||||
linkifier.linkifyRow(0);
|
||||
setTimeout(() => {
|
||||
assert.equal((<HTMLElement>rows[0].firstChild).tagName, 'A');
|
||||
assert.equal((<HTMLElement>rows[0].firstChild).textContent, uri);
|
||||
done();
|
||||
}, 0);
|
||||
}
|
||||
|
||||
describe('http links', () => {
|
||||
function assertLinkifiesEntireRow(uri: string, done: MochaDone) {
|
||||
addRow(uri);
|
||||
linkifier.linkifyRow(0);
|
||||
setTimeout(() => {
|
||||
assert.equal((<HTMLElement>rows[0].firstChild).tagName, 'A');
|
||||
assert.equal((<HTMLElement>rows[0].firstChild).textContent, uri);
|
||||
done();
|
||||
}, 0);
|
||||
}
|
||||
it('should allow ~ character in URI path', done => assertLinkifiesEntireRow('http://foo.com/a~b#c~d?e~f', done));
|
||||
});
|
||||
|
||||
describe('link matcher', () => {
|
||||
function assertLinkifiesRow(rowText: string, linkMatcherRegex: RegExp, expectedHtml: string, done: MochaDone) {
|
||||
addRow(rowText);
|
||||
linkifier.registerLinkMatcher(linkMatcherRegex, () => {});
|
||||
linkifier.linkifyRow(0);
|
||||
// Allow linkify to happen
|
||||
setTimeout(() => {
|
||||
assert.equal(rows[0].innerHTML, expectedHtml);
|
||||
done();
|
||||
}, 0);
|
||||
}
|
||||
it('should match a single link', done => {
|
||||
assertLinkifiesRow('foo', /foo/, '<a>foo</a>', done);
|
||||
});
|
||||
it('should match a single link at the start of a text node', done => {
|
||||
assertLinkifiesRow('foo bar', /foo/, '<a>foo</a> bar', done);
|
||||
});
|
||||
it('should match a single link in the middle of a text node', done => {
|
||||
assertLinkifiesRow('foo bar baz', /bar/, 'foo <a>bar</a> baz', done);
|
||||
});
|
||||
it('should match a single link at the end of a text node', done => {
|
||||
assertLinkifiesRow('foo bar', /bar/, 'foo <a>bar</a>', done);
|
||||
});
|
||||
it('should match a link after a link at the start of a text node', done => {
|
||||
assertLinkifiesRow('foo bar', /foo|bar/, '<a>foo</a> <a>bar</a>', done);
|
||||
});
|
||||
it('should match a link after a link in the middle of a text node', done => {
|
||||
assertLinkifiesRow('foo bar baz', /bar|baz/, 'foo <a>bar</a> <a>baz</a>', done);
|
||||
});
|
||||
it('should match a link immediately after a link at the end of a text node', done => {
|
||||
assertLinkifiesRow('<span>foo bar</span>baz', /bar|baz/, '<span>foo <a>bar</a></span><a>baz</a>', done);
|
||||
});
|
||||
});
|
||||
|
||||
describe('validationCallback', () => {
|
||||
it('should enable link if true', done => {
|
||||
addRow('test');
|
||||
linkifier.registerLinkMatcher(/test/, () => done(), {
|
||||
validationCallback: (url, element, cb) => {
|
||||
cb(true);
|
||||
assert.equal((<HTMLElement>rows[0].firstChild).tagName, 'A');
|
||||
setTimeout(() => clickElement(rows[0].firstChild), 0);
|
||||
}
|
||||
});
|
||||
linkifier.linkifyRow(0);
|
||||
});
|
||||
|
||||
it('should disable link if false', done => {
|
||||
addRow('test');
|
||||
linkifier.registerLinkMatcher(/test/, () => assert.fail(), {
|
||||
validationCallback: (url, element, cb) => {
|
||||
cb(false);
|
||||
assert.equal((<HTMLElement>rows[0].firstChild).tagName, 'A');
|
||||
setTimeout(() => clickElement(rows[0].firstChild), 0);
|
||||
}
|
||||
});
|
||||
linkifier.linkifyRow(0);
|
||||
// Allow time for the click to be performed
|
||||
setTimeout(() => done(), 10);
|
||||
});
|
||||
|
||||
it('should trigger for multiple link matches on one row', done => {
|
||||
addRow('test test');
|
||||
let count = 0;
|
||||
linkifier.registerLinkMatcher(/test/, () => assert.fail(), {
|
||||
validationCallback: (url, element, cb) => {
|
||||
count += 1;
|
||||
if (count === 2) {
|
||||
done();
|
||||
}
|
||||
cb(false);
|
||||
}
|
||||
});
|
||||
linkifier.linkifyRow(0);
|
||||
});
|
||||
});
|
||||
|
||||
describe('priority', () => {
|
||||
it('should order the list from highest priority to lowest #1', () => {
|
||||
const aId = linkifier.registerLinkMatcher(/a/, () => {}, { priority: 1 });
|
||||
const bId = linkifier.registerLinkMatcher(/b/, () => {}, { priority: -1 });
|
||||
assert.deepEqual(linkifier.linkMatchers.map(lm => lm.id), [aId, 0, bId]);
|
||||
});
|
||||
|
||||
it('should order the list from highest priority to lowest #2', () => {
|
||||
const aId = linkifier.registerLinkMatcher(/a/, () => {}, { priority: -1 });
|
||||
const bId = linkifier.registerLinkMatcher(/b/, () => {}, { priority: 1 });
|
||||
assert.deepEqual(linkifier.linkMatchers.map(lm => lm.id), [bId, 0, aId]);
|
||||
});
|
||||
|
||||
it('should order items of equal priority in the order they are added', () => {
|
||||
const aId = linkifier.registerLinkMatcher(/a/, () => {}, { priority: 0 });
|
||||
const bId = linkifier.registerLinkMatcher(/b/, () => {}, { priority: 0 });
|
||||
assert.deepEqual(linkifier.linkMatchers.map(lm => lm.id), [0, aId, bId]);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,349 @@
|
||||
/**
|
||||
* @license MIT
|
||||
*/
|
||||
|
||||
import { LinkMatcherOptions } from './Interfaces';
|
||||
import { LinkMatcher, LinkMatcherHandler, LinkMatcherValidationCallback } from './Types';
|
||||
|
||||
const INVALID_LINK_CLASS = 'xterm-invalid-link';
|
||||
|
||||
const protocolClause = '(https?:\\/\\/)';
|
||||
const domainCharacterSet = '[\\da-z\\.-]+';
|
||||
const negatedDomainCharacterSet = '[^\\da-z\\.-]+';
|
||||
const domainBodyClause = '(' + domainCharacterSet + ')';
|
||||
const tldClause = '([a-z\\.]{2,6})';
|
||||
const ipClause = '((\\d{1,3}\\.){3}\\d{1,3})';
|
||||
const localHostClause = '(localhost)';
|
||||
const portClause = '(:\\d{1,5})';
|
||||
const hostClause = '((' + domainBodyClause + '\\.' + tldClause + ')|' + ipClause + '|' + localHostClause + ')' + portClause + '?';
|
||||
const pathClause = '(\\/[\\/\\w\\.\\-%~]*)*';
|
||||
const queryStringHashFragmentCharacterSet = '[0-9\\w\\[\\]\\(\\)\\/\\?\\!#@$%&\'*+,:;~\\=\\.\\-]*';
|
||||
const queryStringClause = '(\\?' + queryStringHashFragmentCharacterSet + ')?';
|
||||
const hashFragmentClause = '(#' + queryStringHashFragmentCharacterSet + ')?';
|
||||
const negatedPathCharacterSet = '[^\\/\\w\\.\\-%]+';
|
||||
const bodyClause = hostClause + pathClause + queryStringClause + hashFragmentClause;
|
||||
const start = '(?:^|' + negatedDomainCharacterSet + ')(';
|
||||
const end = ')($|' + negatedPathCharacterSet + ')';
|
||||
const strictUrlRegex = new RegExp(start + protocolClause + bodyClause + end);
|
||||
|
||||
/**
|
||||
* The ID of the built in http(s) link matcher.
|
||||
*/
|
||||
const HYPERTEXT_LINK_MATCHER_ID = 0;
|
||||
|
||||
/**
|
||||
* The Linkifier applies links to rows shortly after they have been refreshed.
|
||||
*/
|
||||
export class Linkifier {
|
||||
/**
|
||||
* The time to wait after a row is changed before it is linkified. This prevents
|
||||
* the costly operation of searching every row multiple times, potentially a
|
||||
* huge amount of times.
|
||||
*/
|
||||
protected static TIME_BEFORE_LINKIFY = 200;
|
||||
|
||||
protected _linkMatchers: LinkMatcher[];
|
||||
|
||||
private _document: Document;
|
||||
private _rows: HTMLElement[];
|
||||
private _rowTimeoutIds: number[];
|
||||
private _nextLinkMatcherId = HYPERTEXT_LINK_MATCHER_ID;
|
||||
|
||||
constructor() {
|
||||
this._rowTimeoutIds = [];
|
||||
this._linkMatchers = [];
|
||||
this.registerLinkMatcher(strictUrlRegex, null, { matchIndex: 1 });
|
||||
}
|
||||
|
||||
/**
|
||||
* Attaches the linkifier to the DOM, enabling linkification.
|
||||
* @param document The document object.
|
||||
* @param rows The array of rows to apply links to.
|
||||
*/
|
||||
public attachToDom(document: Document, rows: HTMLElement[]) {
|
||||
this._document = document;
|
||||
this._rows = rows;
|
||||
}
|
||||
|
||||
/**
|
||||
* Queues a row for linkification.
|
||||
* @param {number} rowIndex The index of the row to linkify.
|
||||
*/
|
||||
public linkifyRow(rowIndex: number): void {
|
||||
// Don't attempt linkify if not yet attached to DOM
|
||||
if (!this._document) {
|
||||
return;
|
||||
}
|
||||
|
||||
const timeoutId = this._rowTimeoutIds[rowIndex];
|
||||
if (timeoutId) {
|
||||
clearTimeout(timeoutId);
|
||||
}
|
||||
this._rowTimeoutIds[rowIndex] = setTimeout(this._linkifyRow.bind(this, rowIndex), Linkifier.TIME_BEFORE_LINKIFY);
|
||||
}
|
||||
|
||||
/**
|
||||
* Attaches a handler for hypertext links, overriding default <a> behavior
|
||||
* for standard http(s) links.
|
||||
* @param {LinkHandler} handler The handler to use, this can be cleared with
|
||||
* null.
|
||||
*/
|
||||
public setHypertextLinkHandler(handler: LinkMatcherHandler): void {
|
||||
this._linkMatchers[HYPERTEXT_LINK_MATCHER_ID].handler = handler;
|
||||
}
|
||||
|
||||
/**
|
||||
* Attaches a validation callback for hypertext links.
|
||||
* @param {LinkMatcherValidationCallback} callback The callback to use, this
|
||||
* can be cleared with null.
|
||||
*/
|
||||
public setHypertextValidationCallback(callback: LinkMatcherValidationCallback): void {
|
||||
this._linkMatchers[HYPERTEXT_LINK_MATCHER_ID].validationCallback = callback;
|
||||
}
|
||||
|
||||
/**
|
||||
* Registers a link matcher, allowing custom link patterns to be matched and
|
||||
* handled.
|
||||
* @param {RegExp} regex The regular expression to search for, specifically
|
||||
* this searches the textContent of the rows. You will want to use \s to match
|
||||
* a space ' ' character for example.
|
||||
* @param {LinkHandler} handler The callback when the link is called.
|
||||
* @param {LinkMatcherOptions} [options] Options for the link matcher.
|
||||
* @return {number} The ID of the new matcher, this can be used to deregister.
|
||||
*/
|
||||
public registerLinkMatcher(regex: RegExp, handler: LinkMatcherHandler, options: LinkMatcherOptions = {}): number {
|
||||
if (this._nextLinkMatcherId !== HYPERTEXT_LINK_MATCHER_ID && !handler) {
|
||||
throw new Error('handler must be defined');
|
||||
}
|
||||
const matcher: LinkMatcher = {
|
||||
id: this._nextLinkMatcherId++,
|
||||
regex,
|
||||
handler,
|
||||
matchIndex: options.matchIndex,
|
||||
validationCallback: options.validationCallback,
|
||||
priority: options.priority || 0
|
||||
};
|
||||
this._addLinkMatcherToList(matcher);
|
||||
return matcher.id;
|
||||
}
|
||||
|
||||
/**
|
||||
* Inserts a link matcher to the list in the correct position based on the
|
||||
* priority of each link matcher. New link matchers of equal priority are
|
||||
* considered after older link matchers.
|
||||
* @param matcher The link matcher to be added.
|
||||
*/
|
||||
private _addLinkMatcherToList(matcher: LinkMatcher): void {
|
||||
if (this._linkMatchers.length === 0) {
|
||||
this._linkMatchers.push(matcher);
|
||||
return;
|
||||
}
|
||||
|
||||
for (let i = this._linkMatchers.length - 1; i >= 0; i--) {
|
||||
if (matcher.priority <= this._linkMatchers[i].priority) {
|
||||
this._linkMatchers.splice(i + 1, 0, matcher);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
this._linkMatchers.splice(0, 0, matcher);
|
||||
}
|
||||
|
||||
/**
|
||||
* Deregisters a link matcher if it has been registered.
|
||||
* @param {number} matcherId The link matcher's ID (returned after register)
|
||||
* @return {boolean} Whether a link matcher was found and deregistered.
|
||||
*/
|
||||
public deregisterLinkMatcher(matcherId: number): boolean {
|
||||
// ID 0 is the hypertext link matcher which cannot be deregistered
|
||||
for (let i = 1; i < this._linkMatchers.length; i++) {
|
||||
if (this._linkMatchers[i].id === matcherId) {
|
||||
this._linkMatchers.splice(i, 1);
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Linkifies a row.
|
||||
* @param {number} rowIndex The index of the row to linkify.
|
||||
*/
|
||||
private _linkifyRow(rowIndex: number): void {
|
||||
const row = this._rows[rowIndex];
|
||||
if (!row) {
|
||||
return;
|
||||
}
|
||||
const text = row.textContent;
|
||||
for (let i = 0; i < this._linkMatchers.length; i++) {
|
||||
const matcher = this._linkMatchers[i];
|
||||
const linkElements = this._doLinkifyRow(row, matcher);
|
||||
if (linkElements.length > 0) {
|
||||
// Fire validation callback
|
||||
if (matcher.validationCallback) {
|
||||
for (let j = 0; j < linkElements.length; j++) {
|
||||
const element = linkElements[j];
|
||||
matcher.validationCallback(element.textContent, element, isValid => {
|
||||
if (!isValid) {
|
||||
element.classList.add(INVALID_LINK_CLASS);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
// Only allow a single LinkMatcher to trigger on any given row.
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Linkifies a row given a specific handler.
|
||||
* @param {HTMLElement} row The row to linkify.
|
||||
* @param {LinkMatcher} matcher The link matcher for this line.
|
||||
* @return The link element if it was added, otherwise undefined.
|
||||
*/
|
||||
private _doLinkifyRow(row: HTMLElement, matcher: LinkMatcher): HTMLElement[] {
|
||||
// Iterate over nodes as we want to consider text nodes
|
||||
let result = [];
|
||||
const isHttpLinkMatcher = matcher.id === HYPERTEXT_LINK_MATCHER_ID;
|
||||
const nodes = row.childNodes;
|
||||
|
||||
// Find the first match
|
||||
let match = row.textContent.match(matcher.regex);
|
||||
if (!match || match.length === 0) {
|
||||
return result;
|
||||
}
|
||||
let uri = match[typeof matcher.matchIndex !== 'number' ? 0 : matcher.matchIndex];
|
||||
// Set the next searches start index
|
||||
let rowStartIndex = match.index + uri.length;
|
||||
|
||||
for (let i = 0; i < nodes.length; i++) {
|
||||
const node = nodes[i];
|
||||
const searchIndex = node.textContent.indexOf(uri);
|
||||
if (searchIndex >= 0) {
|
||||
const linkElement = this._createAnchorElement(uri, matcher.handler, isHttpLinkMatcher);
|
||||
if (node.textContent.length === uri.length) {
|
||||
// Matches entire string
|
||||
if (node.nodeType === 3 /*Node.TEXT_NODE*/) {
|
||||
this._replaceNode(node, linkElement);
|
||||
} else {
|
||||
const element = (<HTMLElement>node);
|
||||
if (element.nodeName === 'A') {
|
||||
// This row has already been linkified
|
||||
return result;
|
||||
}
|
||||
element.innerHTML = '';
|
||||
element.appendChild(linkElement);
|
||||
}
|
||||
} else {
|
||||
// Matches part of string
|
||||
const nodesAdded = this._replaceNodeSubstringWithNode(node, linkElement, uri, searchIndex);
|
||||
// No need to consider the new nodes
|
||||
i += nodesAdded;
|
||||
}
|
||||
result.push(linkElement);
|
||||
|
||||
// Find the next match
|
||||
match = row.textContent.substring(rowStartIndex).match(matcher.regex);
|
||||
if (!match || match.length === 0) {
|
||||
return result;
|
||||
}
|
||||
uri = match[typeof matcher.matchIndex !== 'number' ? 0 : matcher.matchIndex];
|
||||
rowStartIndex += match.index + uri.length;
|
||||
}
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates a link anchor element.
|
||||
* @param {string} uri The uri of the link.
|
||||
* @return {HTMLAnchorElement} The link.
|
||||
*/
|
||||
private _createAnchorElement(uri: string, handler: LinkMatcherHandler, isHypertextLinkHandler: boolean): HTMLAnchorElement {
|
||||
const element = this._document.createElement('a');
|
||||
element.textContent = uri;
|
||||
element.draggable = false;
|
||||
if (isHypertextLinkHandler) {
|
||||
element.href = uri;
|
||||
// Force link on another tab so work is not lost
|
||||
element.target = '_blank';
|
||||
element.addEventListener('click', (event: MouseEvent) => {
|
||||
if (handler) {
|
||||
return handler(event, uri);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
element.addEventListener('click', (event: MouseEvent) => {
|
||||
// Don't execute the handler if the link is flagged as invalid
|
||||
if (element.classList.contains(INVALID_LINK_CLASS)) {
|
||||
return;
|
||||
}
|
||||
return handler(event, uri);
|
||||
});
|
||||
}
|
||||
return element;
|
||||
}
|
||||
|
||||
/**
|
||||
* Replace a node with 1 or more other nodes.
|
||||
* @param {Node} oldNode The node to replace.
|
||||
* @param {Node[]} newNodes The new nodes to insert in order.
|
||||
*/
|
||||
private _replaceNode(oldNode: Node, ...newNodes: Node[]): void {
|
||||
const parent = oldNode.parentNode;
|
||||
for (let i = 0; i < newNodes.length; i++) {
|
||||
parent.insertBefore(newNodes[i], oldNode);
|
||||
}
|
||||
parent.removeChild(oldNode);
|
||||
}
|
||||
|
||||
/**
|
||||
* Replace a substring within a node with a new node.
|
||||
* @param {Node} targetNode The target node; either a text node or a <span>
|
||||
* containing a single text node.
|
||||
* @param {Node} newNode The new node to insert.
|
||||
* @param {string} substring The substring to replace.
|
||||
* @param {number} substringIndex The index of the substring within the string.
|
||||
* @return The number of nodes to skip when searching for the next uri.
|
||||
*/
|
||||
private _replaceNodeSubstringWithNode(targetNode: Node, newNode: Node, substring: string, substringIndex: number): number {
|
||||
let node = targetNode;
|
||||
if (node.nodeType !== 3/*Node.TEXT_NODE*/) {
|
||||
node = node.childNodes[0];
|
||||
}
|
||||
|
||||
// The targetNode will be either a text node or a <span>. The text node
|
||||
// (targetNode or its only-child) needs to be replaced with newNode plus new
|
||||
// text nodes potentially on either side.
|
||||
if (node.childNodes.length === 0 && node.nodeType !== 3/*Node.TEXT_NODE*/) {
|
||||
throw new Error('targetNode must be a text node or only contain a single text node');
|
||||
}
|
||||
|
||||
const fullText = node.textContent;
|
||||
|
||||
if (substringIndex === 0) {
|
||||
// Replace with <newNode><textnode>
|
||||
const rightText = fullText.substring(substring.length);
|
||||
const rightTextNode = this._document.createTextNode(rightText);
|
||||
this._replaceNode(node, newNode, rightTextNode);
|
||||
return 0;
|
||||
}
|
||||
|
||||
if (substringIndex === targetNode.textContent.length - substring.length) {
|
||||
// Replace with <textnode><newNode>
|
||||
const leftText = fullText.substring(0, substringIndex);
|
||||
const leftTextNode = this._document.createTextNode(leftText);
|
||||
this._replaceNode(node, leftTextNode, newNode);
|
||||
return 0;
|
||||
}
|
||||
|
||||
// Replace with <textnode><newNode><textnode>
|
||||
const leftText = fullText.substring(0, substringIndex);
|
||||
const leftTextNode = this._document.createTextNode(leftText);
|
||||
const rightText = fullText.substring(substringIndex + substring.length);
|
||||
const rightTextNode = this._document.createTextNode(rightText);
|
||||
this._replaceNode(node, leftTextNode, newNode, rightTextNode);
|
||||
return 1;
|
||||
}
|
||||
}
|
||||
+636
@@ -0,0 +1,636 @@
|
||||
/**
|
||||
* @license MIT
|
||||
*/
|
||||
|
||||
import { C0 } from './EscapeSequences';
|
||||
import { IInputHandler } from './Interfaces';
|
||||
import { CHARSETS, DEFAULT_CHARSET } from './Charsets';
|
||||
|
||||
const normalStateHandler: {[key: string]: (parser: Parser, handler: IInputHandler) => void} = {};
|
||||
normalStateHandler[C0.BEL] = (parser, handler) => handler.bell();
|
||||
normalStateHandler[C0.LF] = (parser, handler) => handler.lineFeed();
|
||||
normalStateHandler[C0.VT] = normalStateHandler[C0.LF];
|
||||
normalStateHandler[C0.FF] = normalStateHandler[C0.LF];
|
||||
normalStateHandler[C0.CR] = (parser, handler) => handler.carriageReturn();
|
||||
normalStateHandler[C0.BS] = (parser, handler) => handler.backspace();
|
||||
normalStateHandler[C0.HT] = (parser, handler) => handler.tab();
|
||||
normalStateHandler[C0.SO] = (parser, handler) => handler.shiftOut();
|
||||
normalStateHandler[C0.SI] = (parser, handler) => handler.shiftIn();
|
||||
normalStateHandler[C0.ESC] = (parser, handler) => parser.setState(ParserState.ESCAPED);
|
||||
|
||||
// TODO: Remove terminal when parser owns params and currentParam
|
||||
const escapedStateHandler: {[key: string]: (parser: Parser, terminal: any) => void} = {};
|
||||
escapedStateHandler['['] = (parser, terminal) => {
|
||||
// ESC [ Control Sequence Introducer (CSI is 0x9b)
|
||||
terminal.params = [];
|
||||
terminal.currentParam = 0;
|
||||
parser.setState(ParserState.CSI_PARAM);
|
||||
};
|
||||
escapedStateHandler[']'] = (parser, terminal) => {
|
||||
// ESC ] Operating System Command (OSC is 0x9d)
|
||||
terminal.params = [];
|
||||
terminal.currentParam = 0;
|
||||
parser.setState(ParserState.OSC);
|
||||
};
|
||||
escapedStateHandler['P'] = (parser, terminal) => {
|
||||
// ESC P Device Control String (DCS is 0x90)
|
||||
terminal.params = [];
|
||||
terminal.currentParam = 0;
|
||||
parser.setState(ParserState.DCS);
|
||||
};
|
||||
escapedStateHandler['_'] = (parser, terminal) => {
|
||||
// ESC _ Application Program Command ( APC is 0x9f).
|
||||
parser.setState(ParserState.IGNORE);
|
||||
};
|
||||
escapedStateHandler['^'] = (parser, terminal) => {
|
||||
// ESC ^ Privacy Message ( PM is 0x9e).
|
||||
parser.setState(ParserState.IGNORE);
|
||||
};
|
||||
escapedStateHandler['c'] = (parser, terminal) => {
|
||||
// ESC c Full Reset (RIS).
|
||||
terminal.reset();
|
||||
};
|
||||
escapedStateHandler['E'] = (parser, terminal) => {
|
||||
// ESC E Next Line ( NEL is 0x85).
|
||||
terminal.x = 0;
|
||||
terminal.index();
|
||||
parser.setState(ParserState.NORMAL);
|
||||
};
|
||||
escapedStateHandler['D'] = (parser, terminal) => {
|
||||
// ESC D Index ( IND is 0x84).
|
||||
terminal.index();
|
||||
parser.setState(ParserState.NORMAL);
|
||||
};
|
||||
escapedStateHandler['M'] = (parser, terminal) => {
|
||||
// ESC M Reverse Index ( RI is 0x8d).
|
||||
terminal.reverseIndex();
|
||||
parser.setState(ParserState.NORMAL);
|
||||
};
|
||||
escapedStateHandler['%'] = (parser, terminal) => {
|
||||
// ESC % Select default/utf-8 character set.
|
||||
// @ = default, G = utf-8
|
||||
terminal.setgLevel(0);
|
||||
terminal.setgCharset(0, DEFAULT_CHARSET); // US (default)
|
||||
parser.setState(ParserState.NORMAL);
|
||||
parser.skipNextChar();
|
||||
};
|
||||
escapedStateHandler[C0.CAN] = (parser) => parser.setState(ParserState.NORMAL);
|
||||
|
||||
const csiParamStateHandler: {[key: string]: (parser: Parser) => void} = {};
|
||||
csiParamStateHandler['?'] = (parser) => parser.setPrefix('?');
|
||||
csiParamStateHandler['>'] = (parser) => parser.setPrefix('>');
|
||||
csiParamStateHandler['!'] = (parser) => parser.setPrefix('!');
|
||||
csiParamStateHandler['0'] = (parser) => parser.setParam(parser.getParam() * 10);
|
||||
csiParamStateHandler['1'] = (parser) => parser.setParam(parser.getParam() * 10 + 1);
|
||||
csiParamStateHandler['2'] = (parser) => parser.setParam(parser.getParam() * 10 + 2);
|
||||
csiParamStateHandler['3'] = (parser) => parser.setParam(parser.getParam() * 10 + 3);
|
||||
csiParamStateHandler['4'] = (parser) => parser.setParam(parser.getParam() * 10 + 4);
|
||||
csiParamStateHandler['5'] = (parser) => parser.setParam(parser.getParam() * 10 + 5);
|
||||
csiParamStateHandler['6'] = (parser) => parser.setParam(parser.getParam() * 10 + 6);
|
||||
csiParamStateHandler['7'] = (parser) => parser.setParam(parser.getParam() * 10 + 7);
|
||||
csiParamStateHandler['8'] = (parser) => parser.setParam(parser.getParam() * 10 + 8);
|
||||
csiParamStateHandler['9'] = (parser) => parser.setParam(parser.getParam() * 10 + 9);
|
||||
csiParamStateHandler['$'] = (parser) => parser.setPostfix('$');
|
||||
csiParamStateHandler['"'] = (parser) => parser.setPostfix('"');
|
||||
csiParamStateHandler[' '] = (parser) => parser.setPostfix(' ');
|
||||
csiParamStateHandler['\''] = (parser) => parser.setPostfix('\'');
|
||||
csiParamStateHandler[';'] = (parser) => parser.finalizeParam();
|
||||
csiParamStateHandler[C0.CAN] = (parser) => parser.setState(ParserState.NORMAL);
|
||||
|
||||
const csiStateHandler: {[key: string]: (handler: IInputHandler, params: number[], prefix: string, postfix: string, parser: Parser) => void} = {};
|
||||
csiStateHandler['@'] = (handler, params, prefix) => handler.insertChars(params);
|
||||
csiStateHandler['A'] = (handler, params, prefix) => handler.cursorUp(params);
|
||||
csiStateHandler['B'] = (handler, params, prefix) => handler.cursorDown(params);
|
||||
csiStateHandler['C'] = (handler, params, prefix) => handler.cursorForward(params);
|
||||
csiStateHandler['D'] = (handler, params, prefix) => handler.cursorBackward(params);
|
||||
csiStateHandler['E'] = (handler, params, prefix) => handler.cursorNextLine(params);
|
||||
csiStateHandler['F'] = (handler, params, prefix) => handler.cursorPrecedingLine(params);
|
||||
csiStateHandler['G'] = (handler, params, prefix) => handler.cursorCharAbsolute(params);
|
||||
csiStateHandler['H'] = (handler, params, prefix) => handler.cursorPosition(params);
|
||||
csiStateHandler['I'] = (handler, params, prefix) => handler.cursorForwardTab(params);
|
||||
csiStateHandler['J'] = (handler, params, prefix) => handler.eraseInDisplay(params);
|
||||
csiStateHandler['K'] = (handler, params, prefix) => handler.eraseInLine(params);
|
||||
csiStateHandler['L'] = (handler, params, prefix) => handler.insertLines(params);
|
||||
csiStateHandler['M'] = (handler, params, prefix) => handler.deleteLines(params);
|
||||
csiStateHandler['P'] = (handler, params, prefix) => handler.deleteChars(params);
|
||||
csiStateHandler['S'] = (handler, params, prefix) => handler.scrollUp(params);
|
||||
csiStateHandler['T'] = (handler, params, prefix) => {
|
||||
if (params.length < 2 && !prefix) {
|
||||
handler.scrollDown(params);
|
||||
}
|
||||
};
|
||||
csiStateHandler['X'] = (handler, params, prefix) => handler.eraseChars(params);
|
||||
csiStateHandler['Z'] = (handler, params, prefix) => handler.cursorBackwardTab(params);
|
||||
csiStateHandler['`'] = (handler, params, prefix) => handler.charPosAbsolute(params);
|
||||
csiStateHandler['a'] = (handler, params, prefix) => handler.HPositionRelative(params);
|
||||
csiStateHandler['b'] = (handler, params, prefix) => handler.repeatPrecedingCharacter(params);
|
||||
csiStateHandler['c'] = (handler, params, prefix) => handler.sendDeviceAttributes(params);
|
||||
csiStateHandler['d'] = (handler, params, prefix) => handler.linePosAbsolute(params);
|
||||
csiStateHandler['e'] = (handler, params, prefix) => handler.VPositionRelative(params);
|
||||
csiStateHandler['f'] = (handler, params, prefix) => handler.HVPosition(params);
|
||||
csiStateHandler['g'] = (handler, params, prefix) => handler.tabClear(params);
|
||||
csiStateHandler['h'] = (handler, params, prefix) => handler.setMode(params);
|
||||
csiStateHandler['l'] = (handler, params, prefix) => handler.resetMode(params);
|
||||
csiStateHandler['m'] = (handler, params, prefix) => handler.charAttributes(params);
|
||||
csiStateHandler['n'] = (handler, params, prefix) => handler.deviceStatus(params);
|
||||
csiStateHandler['p'] = (handler, params, prefix) => {
|
||||
switch (prefix) {
|
||||
case '!': handler.softReset(params); break;
|
||||
}
|
||||
};
|
||||
csiStateHandler['q'] = (handler, params, prefix, postfix) => {
|
||||
if (postfix === ' ') {
|
||||
handler.setCursorStyle(params);
|
||||
}
|
||||
};
|
||||
csiStateHandler['r'] = (handler, params) => handler.setScrollRegion(params);
|
||||
csiStateHandler['s'] = (handler, params) => handler.saveCursor(params);
|
||||
csiStateHandler['u'] = (handler, params) => handler.restoreCursor(params);
|
||||
csiStateHandler[C0.CAN] = (handler, params, prefix, postfix, parser) => parser.setState(ParserState.NORMAL);
|
||||
|
||||
enum ParserState {
|
||||
NORMAL = 0,
|
||||
ESCAPED = 1,
|
||||
CSI_PARAM = 2,
|
||||
CSI = 3,
|
||||
OSC = 4,
|
||||
CHARSET = 5,
|
||||
DCS = 6,
|
||||
IGNORE = 7
|
||||
}
|
||||
|
||||
/**
|
||||
* The terminal's parser, all input into the terminal goes through the parser
|
||||
* which parses and defers the actual input handling the the IInputHandler
|
||||
* specified in the constructor.
|
||||
*/
|
||||
export class Parser {
|
||||
private _state: ParserState;
|
||||
private _position: number;
|
||||
|
||||
// TODO: Remove terminal when handler can do everything
|
||||
constructor(
|
||||
private _inputHandler: IInputHandler,
|
||||
private _terminal: any
|
||||
) {
|
||||
this._state = ParserState.NORMAL;
|
||||
}
|
||||
|
||||
/**
|
||||
* Parse and handle data.
|
||||
*
|
||||
* @param data The data to parse.
|
||||
*/
|
||||
public parse(data: string) {
|
||||
let l = data.length, j, cs, ch, code, low;
|
||||
|
||||
this._position = 0;
|
||||
// apply leftover surrogate high from last write
|
||||
if (this._terminal.surrogate_high) {
|
||||
data = this._terminal.surrogate_high + data;
|
||||
this._terminal.surrogate_high = '';
|
||||
}
|
||||
|
||||
for (; this._position < l; this._position++) {
|
||||
ch = data[this._position];
|
||||
|
||||
// FIXME: higher chars than 0xa0 are not allowed in escape sequences
|
||||
// --> maybe move to default
|
||||
code = data.charCodeAt(this._position);
|
||||
if (0xD800 <= code && code <= 0xDBFF) {
|
||||
// we got a surrogate high
|
||||
// get surrogate low (next 2 bytes)
|
||||
low = data.charCodeAt(this._position + 1);
|
||||
if (isNaN(low)) {
|
||||
// end of data stream, save surrogate high
|
||||
this._terminal.surrogate_high = ch;
|
||||
continue;
|
||||
}
|
||||
code = ((code - 0xD800) * 0x400) + (low - 0xDC00) + 0x10000;
|
||||
ch += data.charAt(this._position + 1);
|
||||
}
|
||||
// surrogate low - already handled above
|
||||
if (0xDC00 <= code && code <= 0xDFFF)
|
||||
continue;
|
||||
|
||||
switch (this._state) {
|
||||
case ParserState.NORMAL:
|
||||
if (ch in normalStateHandler) {
|
||||
normalStateHandler[ch](this, this._inputHandler);
|
||||
} else {
|
||||
this._inputHandler.addChar(ch, code);
|
||||
}
|
||||
break;
|
||||
case ParserState.ESCAPED:
|
||||
if (ch in escapedStateHandler) {
|
||||
escapedStateHandler[ch](this, this._terminal);
|
||||
// Skip switch as it was just handled
|
||||
break;
|
||||
}
|
||||
switch (ch) {
|
||||
|
||||
// ESC (,),*,+,-,. Designate G0-G2 Character Set.
|
||||
case '(': // <-- this seems to get all the attention
|
||||
case ')':
|
||||
case '*':
|
||||
case '+':
|
||||
case '-':
|
||||
case '.':
|
||||
switch (ch) {
|
||||
case '(':
|
||||
this._terminal.gcharset = 0;
|
||||
break;
|
||||
case ')':
|
||||
this._terminal.gcharset = 1;
|
||||
break;
|
||||
case '*':
|
||||
this._terminal.gcharset = 2;
|
||||
break;
|
||||
case '+':
|
||||
this._terminal.gcharset = 3;
|
||||
break;
|
||||
case '-':
|
||||
this._terminal.gcharset = 1;
|
||||
break;
|
||||
case '.':
|
||||
this._terminal.gcharset = 2;
|
||||
break;
|
||||
}
|
||||
this._state = ParserState.CHARSET;
|
||||
break;
|
||||
|
||||
// Designate G3 Character Set (VT300).
|
||||
// A = ISO Latin-1 Supplemental.
|
||||
// Not implemented.
|
||||
case '/':
|
||||
this._terminal.gcharset = 3;
|
||||
this._state = ParserState.CHARSET;
|
||||
this._position--;
|
||||
break;
|
||||
|
||||
// ESC N
|
||||
// Single Shift Select of G2 Character Set
|
||||
// ( SS2 is 0x8e). This affects next character only.
|
||||
case 'N':
|
||||
break;
|
||||
// ESC O
|
||||
// Single Shift Select of G3 Character Set
|
||||
// ( SS3 is 0x8f). This affects next character only.
|
||||
case 'O':
|
||||
break;
|
||||
// ESC n
|
||||
// Invoke the G2 Character Set as GL (LS2).
|
||||
case 'n':
|
||||
this._terminal.setgLevel(2);
|
||||
break;
|
||||
// ESC o
|
||||
// Invoke the G3 Character Set as GL (LS3).
|
||||
case 'o':
|
||||
this._terminal.setgLevel(3);
|
||||
break;
|
||||
// ESC |
|
||||
// Invoke the G3 Character Set as GR (LS3R).
|
||||
case '|':
|
||||
this._terminal.setgLevel(3);
|
||||
break;
|
||||
// ESC }
|
||||
// Invoke the G2 Character Set as GR (LS2R).
|
||||
case '}':
|
||||
this._terminal.setgLevel(2);
|
||||
break;
|
||||
// ESC ~
|
||||
// Invoke the G1 Character Set as GR (LS1R).
|
||||
case '~':
|
||||
this._terminal.setgLevel(1);
|
||||
break;
|
||||
|
||||
// ESC 7 Save Cursor (DECSC).
|
||||
case '7':
|
||||
this._inputHandler.saveCursor();
|
||||
this._state = ParserState.NORMAL;
|
||||
break;
|
||||
|
||||
// ESC 8 Restore Cursor (DECRC).
|
||||
case '8':
|
||||
this._inputHandler.restoreCursor();
|
||||
this._state = ParserState.NORMAL;
|
||||
break;
|
||||
|
||||
// ESC # 3 DEC line height/width
|
||||
case '#':
|
||||
this._state = ParserState.NORMAL;
|
||||
this._position++;
|
||||
break;
|
||||
|
||||
// ESC H Tab Set (HTS is 0x88).
|
||||
case 'H':
|
||||
this._terminal.tabSet();
|
||||
this._state = ParserState.NORMAL;
|
||||
break;
|
||||
|
||||
// ESC = Application Keypad (DECKPAM).
|
||||
case '=':
|
||||
this._terminal.log('Serial port requested application keypad.');
|
||||
this._terminal.applicationKeypad = true;
|
||||
this._terminal.viewport.syncScrollArea();
|
||||
this._state = ParserState.NORMAL;
|
||||
break;
|
||||
|
||||
// ESC > Normal Keypad (DECKPNM).
|
||||
case '>':
|
||||
this._terminal.log('Switching back to normal keypad.');
|
||||
this._terminal.applicationKeypad = false;
|
||||
this._terminal.viewport.syncScrollArea();
|
||||
this._state = ParserState.NORMAL;
|
||||
break;
|
||||
|
||||
default:
|
||||
this._state = ParserState.NORMAL;
|
||||
this._terminal.error('Unknown ESC control: %s.', ch);
|
||||
break;
|
||||
}
|
||||
break;
|
||||
|
||||
case ParserState.CHARSET:
|
||||
if (ch in CHARSETS) {
|
||||
cs = CHARSETS[ch];
|
||||
if (ch === '/') { // ISOLatin is actually /A
|
||||
this.skipNextChar();
|
||||
}
|
||||
} else {
|
||||
cs = DEFAULT_CHARSET;
|
||||
}
|
||||
this._terminal.setgCharset(this._terminal.gcharset, cs);
|
||||
this._terminal.gcharset = null;
|
||||
this._state = ParserState.NORMAL;
|
||||
break;
|
||||
|
||||
case ParserState.OSC:
|
||||
// OSC Ps ; Pt ST
|
||||
// OSC Ps ; Pt BEL
|
||||
// Set Text Parameters.
|
||||
if (ch === C0.ESC || ch === C0.BEL) {
|
||||
if (ch === C0.ESC) this._position++;
|
||||
|
||||
this._terminal.params.push(this._terminal.currentParam);
|
||||
|
||||
switch (this._terminal.params[0]) {
|
||||
case 0:
|
||||
case 1:
|
||||
case 2:
|
||||
if (this._terminal.params[1]) {
|
||||
this._terminal.title = this._terminal.params[1];
|
||||
this._terminal.handleTitle(this._terminal.title);
|
||||
}
|
||||
break;
|
||||
case 3:
|
||||
// set X property
|
||||
break;
|
||||
case 4:
|
||||
case 5:
|
||||
// change dynamic colors
|
||||
break;
|
||||
case 10:
|
||||
case 11:
|
||||
case 12:
|
||||
case 13:
|
||||
case 14:
|
||||
case 15:
|
||||
case 16:
|
||||
case 17:
|
||||
case 18:
|
||||
case 19:
|
||||
// change dynamic ui colors
|
||||
break;
|
||||
case 46:
|
||||
// change log file
|
||||
break;
|
||||
case 50:
|
||||
// dynamic font
|
||||
break;
|
||||
case 51:
|
||||
// emacs shell
|
||||
break;
|
||||
case 52:
|
||||
// manipulate selection data
|
||||
break;
|
||||
case 104:
|
||||
case 105:
|
||||
case 110:
|
||||
case 111:
|
||||
case 112:
|
||||
case 113:
|
||||
case 114:
|
||||
case 115:
|
||||
case 116:
|
||||
case 117:
|
||||
case 118:
|
||||
// reset colors
|
||||
break;
|
||||
}
|
||||
|
||||
this._terminal.params = [];
|
||||
this._terminal.currentParam = 0;
|
||||
this._state = ParserState.NORMAL;
|
||||
} else {
|
||||
if (!this._terminal.params.length) {
|
||||
if (ch >= '0' && ch <= '9') {
|
||||
this._terminal.currentParam =
|
||||
this._terminal.currentParam * 10 + ch.charCodeAt(0) - 48;
|
||||
} else if (ch === ';') {
|
||||
this._terminal.params.push(this._terminal.currentParam);
|
||||
this._terminal.currentParam = '';
|
||||
}
|
||||
} else {
|
||||
this._terminal.currentParam += ch;
|
||||
}
|
||||
}
|
||||
break;
|
||||
|
||||
case ParserState.CSI_PARAM:
|
||||
if (ch in csiParamStateHandler) {
|
||||
csiParamStateHandler[ch](this);
|
||||
break;
|
||||
}
|
||||
this.finalizeParam();
|
||||
// Fall through the CSI as this character should be the CSI code.
|
||||
this._state = ParserState.CSI;
|
||||
|
||||
case ParserState.CSI:
|
||||
if (ch in csiStateHandler) {
|
||||
csiStateHandler[ch](this._inputHandler, this._terminal.params, this._terminal.prefix, this._terminal.postfix, this);
|
||||
} else {
|
||||
this._terminal.error('Unknown CSI code: %s.', ch);
|
||||
}
|
||||
|
||||
this._state = ParserState.NORMAL;
|
||||
this._terminal.prefix = '';
|
||||
this._terminal.postfix = '';
|
||||
break;
|
||||
|
||||
case ParserState.DCS:
|
||||
if (ch === C0.ESC || ch === C0.BEL) {
|
||||
if (ch === C0.ESC) this._position++;
|
||||
|
||||
switch (this._terminal.prefix) {
|
||||
// User-Defined Keys (DECUDK).
|
||||
case '':
|
||||
break;
|
||||
|
||||
// Request Status String (DECRQSS).
|
||||
// test: echo -e '\eP$q"p\e\\'
|
||||
case '$q':
|
||||
let pt = this._terminal.currentParam
|
||||
, valid = false;
|
||||
|
||||
switch (pt) {
|
||||
// DECSCA
|
||||
case '"q':
|
||||
pt = '0"q';
|
||||
break;
|
||||
|
||||
// DECSCL
|
||||
case '"p':
|
||||
pt = '61"p';
|
||||
break;
|
||||
|
||||
// DECSTBM
|
||||
case 'r':
|
||||
pt = ''
|
||||
+ (this._terminal.scrollTop + 1)
|
||||
+ ';'
|
||||
+ (this._terminal.scrollBottom + 1)
|
||||
+ 'r';
|
||||
break;
|
||||
|
||||
// SGR
|
||||
case 'm':
|
||||
pt = '0m';
|
||||
break;
|
||||
|
||||
default:
|
||||
this._terminal.error('Unknown DCS Pt: %s.', pt);
|
||||
pt = '';
|
||||
break;
|
||||
}
|
||||
|
||||
this._terminal.send(C0.ESC + 'P' + +valid + '$r' + pt + C0.ESC + '\\');
|
||||
break;
|
||||
|
||||
// Set Termcap/Terminfo Data (xterm, experimental).
|
||||
case '+p':
|
||||
break;
|
||||
|
||||
// Request Termcap/Terminfo String (xterm, experimental)
|
||||
// Regular xterm does not even respond to this sequence.
|
||||
// This can cause a small glitch in vim.
|
||||
// test: echo -ne '\eP+q6b64\e\\'
|
||||
case '+q':
|
||||
// TODO: Don't declare pt twice
|
||||
/*let*/ pt = this._terminal.currentParam
|
||||
, valid = false;
|
||||
|
||||
this._terminal.send(C0.ESC + 'P' + +valid + '+r' + pt + C0.ESC + '\\');
|
||||
break;
|
||||
|
||||
default:
|
||||
this._terminal.error('Unknown DCS prefix: %s.', this._terminal.prefix);
|
||||
break;
|
||||
}
|
||||
|
||||
this._terminal.currentParam = 0;
|
||||
this._terminal.prefix = '';
|
||||
this._state = ParserState.NORMAL;
|
||||
} else if (!this._terminal.currentParam) {
|
||||
if (!this._terminal.prefix && ch !== '$' && ch !== '+') {
|
||||
this._terminal.currentParam = ch;
|
||||
} else if (this._terminal.prefix.length === 2) {
|
||||
this._terminal.currentParam = ch;
|
||||
} else {
|
||||
this._terminal.prefix += ch;
|
||||
}
|
||||
} else {
|
||||
this._terminal.currentParam += ch;
|
||||
}
|
||||
break;
|
||||
|
||||
case ParserState.IGNORE:
|
||||
// For PM and APC.
|
||||
if (ch === C0.ESC || ch === C0.BEL) {
|
||||
if (ch === C0.ESC) this._position++;
|
||||
this._state = ParserState.NORMAL;
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the parser's current parsing state.
|
||||
*
|
||||
* @param state The new state.
|
||||
*/
|
||||
public setState(state: ParserState): void {
|
||||
this._state = state;
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets the parsier's current prefix. CSI codes can have prefixes of '?', '>'
|
||||
* or '!'.
|
||||
*
|
||||
* @param prefix The prefix.
|
||||
*/
|
||||
public setPrefix(prefix: string): void {
|
||||
this._terminal.prefix = prefix;
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets the parsier's current prefix. CSI codes can have postfixes of '$',
|
||||
* '"', ' ', '\''.
|
||||
*
|
||||
* @param postfix The postfix.
|
||||
*/
|
||||
public setPostfix(postfix: string): void {
|
||||
this._terminal.postfix = postfix;
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets the parser's current parameter.
|
||||
*
|
||||
* @param param the parameter.
|
||||
*/
|
||||
public setParam(param: number) {
|
||||
this._terminal.currentParam = param;
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets the parser's current parameter.
|
||||
*/
|
||||
public getParam(): number {
|
||||
return this._terminal.currentParam;
|
||||
}
|
||||
|
||||
/**
|
||||
* Finalizes the parser's current parameter, adding it to the list of
|
||||
* parameters and setting the new current parameter to 0.
|
||||
*/
|
||||
public finalizeParam(): void {
|
||||
this._terminal.params.push(this._terminal.currentParam);
|
||||
this._terminal.currentParam = 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Tell the parser to skip the next character.
|
||||
*/
|
||||
public skipNextChar(): void {
|
||||
this._position++;
|
||||
}
|
||||
|
||||
/**
|
||||
* Tell the parser to repeat parsing the current character (for example if it
|
||||
* needs parsing using a different state.
|
||||
*/
|
||||
// public repeatChar(): void {
|
||||
// this._position--;
|
||||
// }
|
||||
}
|
||||
+365
@@ -0,0 +1,365 @@
|
||||
/**
|
||||
* @license MIT
|
||||
*/
|
||||
|
||||
import { ITerminal } from './Interfaces';
|
||||
import { DomElementObjectPool } from './utils/DomElementObjectPool';
|
||||
|
||||
/**
|
||||
* The maximum number of refresh frames to skip when the write buffer is non-
|
||||
* empty. Note that these frames may be intermingled with frames that are
|
||||
* skipped via requestAnimationFrame's mechanism.
|
||||
*/
|
||||
const MAX_REFRESH_FRAME_SKIP = 5;
|
||||
|
||||
/**
|
||||
* Flags used to render terminal text properly.
|
||||
*/
|
||||
enum FLAGS {
|
||||
BOLD = 1,
|
||||
UNDERLINE = 2,
|
||||
BLINK = 4,
|
||||
INVERSE = 8,
|
||||
INVISIBLE = 16
|
||||
};
|
||||
|
||||
let brokenBold: boolean = null;
|
||||
|
||||
export class Renderer {
|
||||
/** A queue of the rows to be refreshed */
|
||||
private _refreshRowsQueue: {start: number, end: number}[] = [];
|
||||
private _refreshFramesSkipped = 0;
|
||||
private _refreshAnimationFrame = null;
|
||||
|
||||
private _spanElementObjectPool = new DomElementObjectPool('span');
|
||||
|
||||
constructor(private _terminal: ITerminal) {
|
||||
// Figure out whether boldness affects
|
||||
// the character width of monospace fonts.
|
||||
if (brokenBold === null) {
|
||||
brokenBold = checkBoldBroken((<any>this._terminal).element);
|
||||
}
|
||||
this._spanElementObjectPool = new DomElementObjectPool('span');
|
||||
|
||||
// TODO: Pull more DOM interactions into Renderer.constructor, element for
|
||||
// example should be owned by Renderer (and also exposed by Terminal due to
|
||||
// to established public API).
|
||||
}
|
||||
|
||||
/**
|
||||
* Queues a refresh between two rows (inclusive), to be done on next animation
|
||||
* frame.
|
||||
* @param {number} start The start row.
|
||||
* @param {number} end The end row.
|
||||
*/
|
||||
public queueRefresh(start: number, end: number): void {
|
||||
this._refreshRowsQueue.push({ start: start, end: end });
|
||||
if (!this._refreshAnimationFrame) {
|
||||
this._refreshAnimationFrame = window.requestAnimationFrame(this._refreshLoop.bind(this));
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Performs the refresh loop callback, calling refresh only if a refresh is
|
||||
* necessary before queueing up the next one.
|
||||
*/
|
||||
private _refreshLoop(): void {
|
||||
// Skip MAX_REFRESH_FRAME_SKIP frames if the writeBuffer is non-empty as it
|
||||
// will need to be immediately refreshed anyway. This saves a lot of
|
||||
// rendering time as the viewport DOM does not need to be refreshed, no
|
||||
// scroll events, no layouts, etc.
|
||||
const skipFrame = this._terminal.writeBuffer.length > 0 && this._refreshFramesSkipped++ <= MAX_REFRESH_FRAME_SKIP;
|
||||
if (skipFrame) {
|
||||
this._refreshAnimationFrame = window.requestAnimationFrame(this._refreshLoop.bind(this));
|
||||
return;
|
||||
}
|
||||
|
||||
this._refreshFramesSkipped = 0;
|
||||
let start;
|
||||
let end;
|
||||
if (this._refreshRowsQueue.length > 4) {
|
||||
// Just do a full refresh when 5+ refreshes are queued
|
||||
start = 0;
|
||||
end = this._terminal.rows - 1;
|
||||
} else {
|
||||
// Get start and end rows that need refreshing
|
||||
start = this._refreshRowsQueue[0].start;
|
||||
end = this._refreshRowsQueue[0].end;
|
||||
for (let i = 1; i < this._refreshRowsQueue.length; i++) {
|
||||
if (this._refreshRowsQueue[i].start < start) {
|
||||
start = this._refreshRowsQueue[i].start;
|
||||
}
|
||||
if (this._refreshRowsQueue[i].end > end) {
|
||||
end = this._refreshRowsQueue[i].end;
|
||||
}
|
||||
}
|
||||
}
|
||||
this._refreshRowsQueue = [];
|
||||
this._refreshAnimationFrame = null;
|
||||
this._refresh(start, end);
|
||||
}
|
||||
|
||||
/**
|
||||
* Refreshes (re-renders) terminal content within two rows (inclusive)
|
||||
*
|
||||
* Rendering Engine:
|
||||
*
|
||||
* In the screen buffer, each character is stored as a an array with a character
|
||||
* and a 32-bit integer:
|
||||
* - First value: a utf-16 character.
|
||||
* - Second value:
|
||||
* - Next 9 bits: background color (0-511).
|
||||
* - Next 9 bits: foreground color (0-511).
|
||||
* - Next 14 bits: a mask for misc. flags:
|
||||
* - 1=bold
|
||||
* - 2=underline
|
||||
* - 4=blink
|
||||
* - 8=inverse
|
||||
* - 16=invisible
|
||||
*
|
||||
* @param {number} start The row to start from (between 0 and terminal's height terminal - 1)
|
||||
* @param {number} end The row to end at (between fromRow and terminal's height terminal - 1)
|
||||
*/
|
||||
private _refresh(start: number, end: number): void {
|
||||
let x, y, i, line, out, ch, ch_width, width, data, attr, bg, fg, flags, row, parent, focused = document.activeElement;
|
||||
|
||||
// If this is a big refresh, remove the terminal rows from the DOM for faster calculations
|
||||
if (end - start >= this._terminal.rows / 2) {
|
||||
parent = this._terminal.element.parentNode;
|
||||
if (parent) {
|
||||
this._terminal.element.removeChild(this._terminal.rowContainer);
|
||||
}
|
||||
}
|
||||
|
||||
width = this._terminal.cols;
|
||||
y = start;
|
||||
|
||||
if (end >= this._terminal.rows) {
|
||||
this._terminal.log('`end` is too large. Most likely a bad CSR.');
|
||||
end = this._terminal.rows - 1;
|
||||
}
|
||||
|
||||
for (; y <= end; y++) {
|
||||
row = y + this._terminal.ydisp;
|
||||
|
||||
line = this._terminal.lines.get(row);
|
||||
out = '';
|
||||
|
||||
if (this._terminal.y === y - (this._terminal.ybase - this._terminal.ydisp)
|
||||
&& this._terminal.cursorState
|
||||
&& !this._terminal.cursorHidden) {
|
||||
x = this._terminal.x;
|
||||
} else {
|
||||
x = -1;
|
||||
}
|
||||
|
||||
attr = this._terminal.defAttr;
|
||||
i = 0;
|
||||
|
||||
var documentFragment = document.createDocumentFragment();
|
||||
var innerHTML = '';
|
||||
var currentElement;
|
||||
|
||||
// Return the row's spans to the pool
|
||||
while (this._terminal.children[y].children.length) {
|
||||
var child = this._terminal.children[y].children[0];
|
||||
this._terminal.children[y].removeChild(child);
|
||||
this._spanElementObjectPool.release(<HTMLElement>child);
|
||||
}
|
||||
|
||||
for (; i < width; i++) {
|
||||
data = line[i][0];
|
||||
ch = line[i][1];
|
||||
ch_width = line[i][2];
|
||||
if (!ch_width)
|
||||
continue;
|
||||
|
||||
if (i === x) data = -1;
|
||||
|
||||
if (data !== attr) {
|
||||
if (attr !== this._terminal.defAttr) {
|
||||
if (innerHTML) {
|
||||
currentElement.innerHTML = innerHTML;
|
||||
innerHTML = '';
|
||||
}
|
||||
documentFragment.appendChild(currentElement);
|
||||
currentElement = null;
|
||||
//out += '</span>';
|
||||
}
|
||||
if (data !== this._terminal.defAttr) {
|
||||
if (innerHTML && !currentElement) {
|
||||
currentElement = this._spanElementObjectPool.acquire();
|
||||
// For some reason the text nodes only containing don't get added to the DOM
|
||||
//currentElement = document.createTextNode('');
|
||||
}
|
||||
if (currentElement) {
|
||||
if (innerHTML) {
|
||||
currentElement.innerHTML = innerHTML;
|
||||
innerHTML = '';
|
||||
}
|
||||
documentFragment.appendChild(currentElement);
|
||||
}
|
||||
currentElement = this._spanElementObjectPool.acquire();
|
||||
if (data === -1) {
|
||||
currentElement.classList.add('reverse-video', 'terminal-cursor');
|
||||
//out += '<span class="reverse-video terminal-cursor';
|
||||
// if (this._terminal.getOption('cursorBlink')) {
|
||||
// currentElement.classList.add('blinking');
|
||||
// //out += ' blinking';
|
||||
// }
|
||||
//out += '">';
|
||||
} else {
|
||||
//var classNames = [];
|
||||
|
||||
bg = data & 0x1ff;
|
||||
fg = (data >> 9) & 0x1ff;
|
||||
flags = data >> 18;
|
||||
|
||||
if (flags & FLAGS.BOLD) {
|
||||
if (!brokenBold) {
|
||||
currentElement.classList.add('xterm-bold');
|
||||
//classNames.push('xterm-bold');
|
||||
}
|
||||
// See: XTerm*boldColors
|
||||
if (fg < 8) fg += 8;
|
||||
}
|
||||
|
||||
if (flags & FLAGS.UNDERLINE) {
|
||||
currentElement.classList.add('xterm-underline');
|
||||
//classNames.push('xterm-underline');
|
||||
}
|
||||
|
||||
if (flags & FLAGS.BLINK) {
|
||||
currentElement.classList.add('xterm-blink');
|
||||
//classNames.push('xterm-blink');
|
||||
}
|
||||
|
||||
// If inverse flag is on, then swap the foreground and background variables.
|
||||
if (flags & FLAGS.INVERSE) {
|
||||
/* One-line variable swap in JavaScript: http://stackoverflow.com/a/16201730 */
|
||||
bg = [fg, fg = bg][0];
|
||||
// Should inverse just be before the
|
||||
// above boldColors effect instead?
|
||||
if ((flags & 1) && fg < 8) fg += 8;
|
||||
}
|
||||
|
||||
if (flags & FLAGS.INVISIBLE) {
|
||||
currentElement.classList.add('xterm-hidden');
|
||||
//classNames.push('xterm-hidden');
|
||||
}
|
||||
|
||||
/**
|
||||
* Weird situation: Invert flag used black foreground and white background results
|
||||
* in invalid background color, positioned at the 256 index of the 256 terminal
|
||||
* color map. Pin the colors manually in such a case.
|
||||
*
|
||||
* Source: https://github.com/sourcelair/xterm.js/issues/57
|
||||
*/
|
||||
if (flags & FLAGS.INVERSE) {
|
||||
if (bg == 257) {
|
||||
bg = 15;
|
||||
}
|
||||
if (fg == 256) {
|
||||
fg = 0;
|
||||
}
|
||||
}
|
||||
|
||||
if (bg < 256) {
|
||||
currentElement.classList.add('xterm-bg-color-' + bg);
|
||||
//classNames.push('xterm-bg-color-' + bg);
|
||||
}
|
||||
|
||||
if (fg < 256) {
|
||||
currentElement.classList.add('xterm-color-' + fg);
|
||||
//classNames.push('xterm-color-' + fg);
|
||||
}
|
||||
|
||||
// out += '<span';
|
||||
// if (classNames.length) {
|
||||
// out += ' class="' + classNames.join(' ') + '"';
|
||||
// }
|
||||
// out += '>';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (ch_width === 2) {
|
||||
out += '<span class="xterm-wide-char">';
|
||||
}
|
||||
switch (ch) {
|
||||
case '&':
|
||||
innerHTML += '&';
|
||||
//out += '&';
|
||||
break;
|
||||
case '<':
|
||||
innerHTML += '<';
|
||||
//out += '<';
|
||||
break;
|
||||
case '>':
|
||||
innerHTML += '>';
|
||||
//out += '>';
|
||||
break;
|
||||
default:
|
||||
if (ch <= ' ') {
|
||||
innerHTML += ' ';
|
||||
//out += ' ';
|
||||
} else {
|
||||
innerHTML += ch;
|
||||
// out += ch;
|
||||
}
|
||||
break;
|
||||
}
|
||||
if (ch_width === 2) {
|
||||
out += '</span>';
|
||||
}
|
||||
|
||||
attr = data;
|
||||
}
|
||||
|
||||
if (innerHTML && !currentElement) {
|
||||
currentElement = this._spanElementObjectPool.acquire();
|
||||
// For some reason the text nodes only containing don't get added to the DOM
|
||||
//currentElement = document.createTextNode('');
|
||||
}
|
||||
if (currentElement) {
|
||||
if (innerHTML) {
|
||||
currentElement.innerHTML = innerHTML;
|
||||
innerHTML = '';
|
||||
}
|
||||
documentFragment.appendChild(currentElement);
|
||||
currentElement = null;
|
||||
}
|
||||
// if (attr !== this.defAttr) {
|
||||
// out += '</span>';
|
||||
// }
|
||||
|
||||
//this.children[y].innerHTML = out;
|
||||
//this.children[y].innerHTML = '';
|
||||
|
||||
this._terminal.children[y].appendChild(documentFragment)
|
||||
}
|
||||
|
||||
if (parent) {
|
||||
this._terminal.element.appendChild(this._terminal.rowContainer);
|
||||
}
|
||||
|
||||
this._terminal.emit('refresh', {element: this._terminal.element, start: start, end: end});
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
// if bold is broken, we can't
|
||||
// use it in the terminal.
|
||||
function checkBoldBroken(terminal) {
|
||||
const document = terminal.ownerDocument;
|
||||
const el = document.createElement('span');
|
||||
el.innerHTML = 'hello world';
|
||||
terminal.appendChild(el);
|
||||
const w1 = el.offsetWidth;
|
||||
const h1 = el.offsetHeight;
|
||||
el.style.fontWeight = 'bold';
|
||||
const w2 = el.offsetWidth;
|
||||
const h2 = el.offsetHeight;
|
||||
terminal.removeChild(el);
|
||||
return w1 !== w2 || h1 !== h2;
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
/**
|
||||
* @license MIT
|
||||
*/
|
||||
|
||||
export type LinkMatcher = {
|
||||
id: number,
|
||||
regex: RegExp,
|
||||
handler: LinkMatcherHandler,
|
||||
matchIndex?: number,
|
||||
validationCallback?: LinkMatcherValidationCallback,
|
||||
priority?: number
|
||||
};
|
||||
export type LinkMatcherHandler = (event: MouseEvent, uri: string) => boolean | void;
|
||||
export type LinkMatcherValidationCallback = (uri: string, element: HTMLElement, callback: (isValid: boolean) => void) => void;
|
||||
+26
-18
@@ -41,13 +41,17 @@ describe('Viewport', () => {
|
||||
});
|
||||
|
||||
describe('refresh', () => {
|
||||
it('should set the line-height of the terminal', () => {
|
||||
assert.equal(viewportElement.style.lineHeight, CHARACTER_HEIGHT + 'px');
|
||||
assert.equal(terminal.rowContainer.style.lineHeight, CHARACTER_HEIGHT + 'px');
|
||||
charMeasure.height = 1;
|
||||
viewport.refresh();
|
||||
assert.equal(viewportElement.style.lineHeight, '1px');
|
||||
assert.equal(terminal.rowContainer.style.lineHeight, '1px');
|
||||
it('should set the line-height of the terminal', done => {
|
||||
// Allow CharMeasure to be initialized
|
||||
setTimeout(() => {
|
||||
assert.equal(viewportElement.style.lineHeight, CHARACTER_HEIGHT + 'px');
|
||||
assert.equal(terminal.rowContainer.style.lineHeight, CHARACTER_HEIGHT + 'px');
|
||||
charMeasure.height = 1;
|
||||
viewport.refresh();
|
||||
assert.equal(viewportElement.style.lineHeight, '1px');
|
||||
assert.equal(terminal.rowContainer.style.lineHeight, '1px');
|
||||
done();
|
||||
}, 0);
|
||||
});
|
||||
it('should set the height of the viewport when the line-height changed', () => {
|
||||
terminal.lines.push('');
|
||||
@@ -62,17 +66,21 @@ describe('Viewport', () => {
|
||||
});
|
||||
|
||||
describe('syncScrollArea', () => {
|
||||
it('should sync the scroll area', () => {
|
||||
terminal.lines.push('');
|
||||
terminal.rows = 1;
|
||||
assert.equal(scrollAreaElement.style.height, 0 * CHARACTER_HEIGHT + 'px');
|
||||
viewport.syncScrollArea();
|
||||
assert.equal(viewportElement.style.height, 1 * CHARACTER_HEIGHT + 'px');
|
||||
assert.equal(scrollAreaElement.style.height, 1 * CHARACTER_HEIGHT + 'px');
|
||||
terminal.lines.push('');
|
||||
viewport.syncScrollArea();
|
||||
assert.equal(viewportElement.style.height, 1 * CHARACTER_HEIGHT + 'px');
|
||||
assert.equal(scrollAreaElement.style.height, 2 * CHARACTER_HEIGHT + 'px');
|
||||
it('should sync the scroll area', done => {
|
||||
// Allow CharMeasure to be initialized
|
||||
setTimeout(() => {
|
||||
terminal.lines.push('');
|
||||
terminal.rows = 1;
|
||||
assert.equal(scrollAreaElement.style.height, 0 * CHARACTER_HEIGHT + 'px');
|
||||
viewport.syncScrollArea();
|
||||
assert.equal(viewportElement.style.height, 1 * CHARACTER_HEIGHT + 'px');
|
||||
assert.equal(scrollAreaElement.style.height, 1 * CHARACTER_HEIGHT + 'px');
|
||||
terminal.lines.push('');
|
||||
viewport.syncScrollArea();
|
||||
assert.equal(viewportElement.style.height, 1 * CHARACTER_HEIGHT + 'px');
|
||||
assert.equal(scrollAreaElement.style.height, 2 * CHARACTER_HEIGHT + 'px');
|
||||
done();
|
||||
}, 0);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
+8
-7
@@ -35,7 +35,8 @@ export class Viewport {
|
||||
this.terminal.on('resize', this.syncScrollArea.bind(this));
|
||||
this.viewportElement.addEventListener('scroll', this.onScroll.bind(this));
|
||||
|
||||
this.syncScrollArea();
|
||||
// Perform this async to ensure the CharMeasure is ready.
|
||||
setTimeout(() => this.syncScrollArea(), 0);
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -46,13 +47,13 @@ export class Viewport {
|
||||
*/
|
||||
private refresh(): void {
|
||||
if (this.charMeasure.height > 0) {
|
||||
var rowHeightChanged = this.charMeasure.height !== this.currentRowHeight;
|
||||
const rowHeightChanged = this.charMeasure.height !== this.currentRowHeight;
|
||||
if (rowHeightChanged) {
|
||||
this.currentRowHeight = this.charMeasure.height;
|
||||
this.viewportElement.style.lineHeight = this.charMeasure.height + 'px';
|
||||
this.terminal.rowContainer.style.lineHeight = this.charMeasure.height + 'px';
|
||||
}
|
||||
var viewportHeightChanged = this.lastRecordedViewportHeight !== this.terminal.rows;
|
||||
const viewportHeightChanged = this.lastRecordedViewportHeight !== this.terminal.rows;
|
||||
if (rowHeightChanged || viewportHeightChanged) {
|
||||
this.lastRecordedViewportHeight = this.terminal.rows;
|
||||
this.viewportElement.style.height = this.charMeasure.height * this.terminal.rows + 'px';
|
||||
@@ -80,7 +81,7 @@ export class Viewport {
|
||||
}
|
||||
|
||||
// Sync scrollTop
|
||||
var scrollTop = this.terminal.ydisp * this.currentRowHeight;
|
||||
const scrollTop = this.terminal.ydisp * this.currentRowHeight;
|
||||
if (this.viewportElement.scrollTop !== scrollTop) {
|
||||
this.viewportElement.scrollTop = scrollTop;
|
||||
}
|
||||
@@ -92,8 +93,8 @@ export class Viewport {
|
||||
* @param ev The scroll event.
|
||||
*/
|
||||
private onScroll(ev: Event) {
|
||||
var newRow = Math.round(this.viewportElement.scrollTop / this.currentRowHeight);
|
||||
var diff = newRow - this.terminal.ydisp;
|
||||
const newRow = Math.round(this.viewportElement.scrollTop / this.currentRowHeight);
|
||||
const diff = newRow - this.terminal.ydisp;
|
||||
this.terminal.scrollDisp(diff, true);
|
||||
}
|
||||
|
||||
@@ -109,7 +110,7 @@ export class Viewport {
|
||||
return;
|
||||
}
|
||||
// Fallback to WheelEvent.DOM_DELTA_PIXEL
|
||||
var multiplier = 1;
|
||||
let multiplier = 1;
|
||||
if (ev.deltaMode === WheelEvent.DOM_DELTA_LINE) {
|
||||
multiplier = this.currentRowHeight;
|
||||
} else if (ev.deltaMode === WheelEvent.DOM_DELTA_PAGE) {
|
||||
|
||||
@@ -32,6 +32,9 @@
|
||||
var exports = {};
|
||||
|
||||
exports.proposeGeometry = function (term) {
|
||||
if (!term.element.parentElement) {
|
||||
return null;
|
||||
}
|
||||
var parentElementStyle = window.getComputedStyle(term.element.parentElement),
|
||||
parentElementHeight = parseInt(parentElementStyle.getPropertyValue('height')),
|
||||
parentElementWidth = Math.max(0, parseInt(parentElementStyle.getPropertyValue('width')) - 17),
|
||||
@@ -53,7 +56,7 @@
|
||||
subjectRow.innerHTML = 'W'; // Common character for measuring width, although on monospace
|
||||
characterWidth = subjectRow.getBoundingClientRect().width;
|
||||
subjectRow.style.display = ''; // Revert style before calculating height, since they differ.
|
||||
characterHeight = parseInt(subjectRow.offsetHeight);
|
||||
characterHeight = subjectRow.getBoundingClientRect().height;
|
||||
subjectRow.innerHTML = contentBuffer;
|
||||
|
||||
rows = parseInt(availableHeight / characterHeight);
|
||||
@@ -66,7 +69,9 @@
|
||||
exports.fit = function (term) {
|
||||
var geometry = exports.proposeGeometry(term);
|
||||
|
||||
term.resize(geometry.cols, geometry.rows);
|
||||
if (geometry) {
|
||||
term.resize(geometry.cols, geometry.rows);
|
||||
}
|
||||
};
|
||||
|
||||
Xterm.prototype.proposeGeometry = function () {
|
||||
|
||||
@@ -1,36 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="../../src/xterm.css" />
|
||||
<link rel="stylesheet" href="../../demo/style.css" />
|
||||
<script src="../../src/xterm.js"></script>
|
||||
<script src="linkify.js"></script>
|
||||
<style>
|
||||
body {
|
||||
color: #111;
|
||||
}
|
||||
|
||||
#terminal-container {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#terminal-container a {
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="terminal-container"></div>
|
||||
<script>
|
||||
var term = new Terminal(),
|
||||
container = document.getElementById('terminal-container');
|
||||
|
||||
term.open(container);
|
||||
term.writeln('Hello, welcome to xterm.js');
|
||||
term.writeln('');
|
||||
term.writeln('Check it out at github.com/sourcelair/xterm.js');
|
||||
term.linkify();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,207 +0,0 @@
|
||||
/**
|
||||
* Methods for turning URL subscrings in the terminal's content into links (`a` DOM elements).
|
||||
* @module xterm/addons/linkify/linkify
|
||||
* @license MIT
|
||||
*/
|
||||
|
||||
(function (linkify) {
|
||||
if (typeof exports === 'object' && typeof module === 'object') {
|
||||
/*
|
||||
* CommonJS environment
|
||||
*/
|
||||
module.exports = linkify(require('../../xterm'));
|
||||
} else if (typeof define == 'function') {
|
||||
/*
|
||||
* Require.js is available
|
||||
*/
|
||||
define(['../../xterm'], linkify);
|
||||
} else {
|
||||
/*
|
||||
* Plain browser environment
|
||||
*/
|
||||
linkify(window.Terminal);
|
||||
}
|
||||
})(function (Xterm) {
|
||||
'use strict';
|
||||
|
||||
var exports = {},
|
||||
protocolClause = '(https?:\\/\\/)',
|
||||
domainCharacterSet = '[\\da-z\\.-]+',
|
||||
negatedDomainCharacterSet = '[^\\da-z\\.-]+',
|
||||
domainBodyClause = '(' + domainCharacterSet + ')',
|
||||
tldClause = '([a-z\\.]{2,6})',
|
||||
ipClause = '((\\d{1,3}\\.){3}\\d{1,3})',
|
||||
portClause = '(:\\d{1,5})',
|
||||
hostClause = '((' + domainBodyClause + '\\.' + tldClause + ')|' + ipClause + ')' + portClause + '?',
|
||||
pathClause = '(\\/[\\/\\w\\.-]*)*',
|
||||
negatedPathCharacterSet = '[^\\/\\w\\.-]+',
|
||||
bodyClause = hostClause + pathClause,
|
||||
start = '(?:^|' + negatedDomainCharacterSet + ')(',
|
||||
end = ')($|' + negatedPathCharacterSet + ')',
|
||||
lenientUrlClause = start + protocolClause + '?' + bodyClause + end,
|
||||
strictUrlClause = start + protocolClause + bodyClause + end,
|
||||
lenientUrlRegex = new RegExp(lenientUrlClause),
|
||||
strictUrlRegex = new RegExp(strictUrlClause);
|
||||
|
||||
/**
|
||||
* Converts all valid URLs found in the given terminal line into
|
||||
* hyperlinks. The terminal line can be either the HTML element itself
|
||||
* or the index of the termina line in the children of the terminal
|
||||
* rows container.
|
||||
*
|
||||
* @param {Xterm} terminal - The terminal that owns the given line.
|
||||
* @param {number|HTMLDivElement} line - The terminal line that should get
|
||||
* "linkified".
|
||||
* @param {boolean} lenient - The regex type that will be used to identify links. If lenient is
|
||||
* false, the regex requires a protocol clause. Defaults to true.
|
||||
* @param {string} target - Sets target="" attribute with value provided to links.
|
||||
* Default doesn't set target attribute
|
||||
* @emits linkify
|
||||
* @emits linkify:line
|
||||
*/
|
||||
exports.linkifyTerminalLine = function (terminal, line, lenient, target) {
|
||||
if (typeof line == 'number') {
|
||||
line = terminal.rowContainer.children[line];
|
||||
} else if (! (line instanceof HTMLDivElement)) {
|
||||
var message = 'The "line" argument should be either a number';
|
||||
message += ' or an HTMLDivElement';
|
||||
|
||||
throw new TypeError(message);
|
||||
}
|
||||
|
||||
if (typeof target === 'undefined') {
|
||||
target = '';
|
||||
} else {
|
||||
target = 'target="' + target + '"';
|
||||
}
|
||||
|
||||
var buffer = document.createElement('span'),
|
||||
nodes = line.childNodes;
|
||||
|
||||
for (var j=0; j<nodes.length; j++) {
|
||||
var node = nodes[j],
|
||||
match;
|
||||
|
||||
/**
|
||||
* Since we cannot access the TextNode's HTML representation
|
||||
* from the instance itself, we assign its data as textContent
|
||||
* to a dummy buffer span, in order to retrieve the TextNode's
|
||||
* HTML representation from the buffer's innerHTML.
|
||||
*/
|
||||
buffer.textContent = node.data;
|
||||
|
||||
var nodeHTML = buffer.innerHTML;
|
||||
|
||||
/**
|
||||
* Apply function only on TextNodes
|
||||
*/
|
||||
if (node.nodeType != node.TEXT_NODE) {
|
||||
continue;
|
||||
}
|
||||
|
||||
var url = exports.findLinkMatch(node.data, lenient);
|
||||
|
||||
if (!url) {
|
||||
continue;
|
||||
}
|
||||
|
||||
var startsWithProtocol = new RegExp('^' + protocolClause),
|
||||
urlHasProtocol = url.match(startsWithProtocol),
|
||||
href = (urlHasProtocol) ? url : 'http://' + url,
|
||||
link = '<a href="' + href + '" ' + target + '>' + url + '</a>',
|
||||
newHTML = nodeHTML.replace(url, link);
|
||||
|
||||
line.innerHTML = line.innerHTML.replace(nodeHTML, newHTML);
|
||||
}
|
||||
|
||||
/**
|
||||
* This event gets emitted when conversion of all URL susbtrings
|
||||
* to HTML anchor elements (links) has finished, for a specific
|
||||
* line of the current Xterm instance.
|
||||
*
|
||||
* @event linkify:line
|
||||
*/
|
||||
terminal.emit('linkify:line', line);
|
||||
};
|
||||
|
||||
/**
|
||||
* Finds a link within a block of text.
|
||||
*
|
||||
* @param {string} text - The text to search .
|
||||
* @param {boolean} lenient - Whether to use the lenient search.
|
||||
* @return {string} A URL.
|
||||
*/
|
||||
exports.findLinkMatch = function (text, lenient) {
|
||||
var match = text.match(lenient ? lenientUrlRegex : strictUrlRegex);
|
||||
if (!match || match.length === 0) {
|
||||
return null;
|
||||
}
|
||||
return match[1];
|
||||
}
|
||||
|
||||
/**
|
||||
* Converts all valid URLs found in the terminal view into hyperlinks.
|
||||
*
|
||||
* @param {Xterm} terminal - The terminal that should get "linkified".
|
||||
* @param {boolean} lenient - The regex type that will be used to identify links. If lenient is
|
||||
* false, the regex requires a protocol clause. Defaults to true.
|
||||
* @param {string} target - Sets target="" attribute with value provided to links.
|
||||
* Default doesn't set target attribute
|
||||
* @emits linkify
|
||||
* @emits linkify:line
|
||||
*/
|
||||
exports.linkify = function (terminal, lenient, target) {
|
||||
var rows = terminal.rowContainer.children;
|
||||
|
||||
lenient = (typeof lenient == "boolean") ? lenient : true;
|
||||
for (var i=0; i<rows.length; i++) {
|
||||
var line = rows[i];
|
||||
|
||||
exports.linkifyTerminalLine(terminal, line, lenient, target);
|
||||
}
|
||||
|
||||
/**
|
||||
* This event gets emitted when conversion of all URL substrings to
|
||||
* HTML anchor elements (links) has finished for the current Xterm
|
||||
* instance's view.
|
||||
*
|
||||
* @event linkify
|
||||
*/
|
||||
terminal.emit('linkify');
|
||||
};
|
||||
|
||||
/**
|
||||
* Extend Xterm prototype.
|
||||
*/
|
||||
|
||||
/**
|
||||
* Converts all valid URLs found in the current terminal linte into
|
||||
* hyperlinks.
|
||||
*
|
||||
* @memberof Xterm
|
||||
* @param {number|HTMLDivElement} line - The terminal line that should get
|
||||
* "linkified".
|
||||
* @param {boolean} lenient - The regex type that will be used to identify links. If lenient is
|
||||
* false, the regex requires a protocol clause. Defaults to true.
|
||||
* @param {string} target - Sets target="" attribute with value provided to links.
|
||||
* Default doesn't set target attribute
|
||||
*/
|
||||
Xterm.prototype.linkifyTerminalLine = function (line, lenient, target) {
|
||||
return exports.linkifyTerminalLine(this, line, lenient, target);
|
||||
};
|
||||
|
||||
/**
|
||||
* Converts all valid URLs found in the current terminal into hyperlinks.
|
||||
*
|
||||
* @memberof Xterm
|
||||
* @param {boolean} lenient - The regex type that will be used to identify links. If lenient is
|
||||
* false, the regex requires a protocol clause. Defaults to true.
|
||||
* @param {string} target - Sets target="" attribute with value provided to links.
|
||||
* Default doesn't set target attribute
|
||||
*/
|
||||
Xterm.prototype.linkify = function (lenient, target) {
|
||||
return exports.linkify(this, lenient, target);
|
||||
};
|
||||
|
||||
return exports;
|
||||
});
|
||||
@@ -1,5 +0,0 @@
|
||||
{
|
||||
"name": "xterm.linkify",
|
||||
"main": "linkify.js",
|
||||
"private": true
|
||||
}
|
||||
@@ -1,48 +0,0 @@
|
||||
var assert = require('chai').assert;
|
||||
var Terminal = require('../../xterm');
|
||||
var linkify = require('../../addons/linkify/linkify');
|
||||
|
||||
describe('linkify addon', function () {
|
||||
var xterm;
|
||||
|
||||
describe('API', function () {
|
||||
it('should define Terminal.prototype.linkify', function () {
|
||||
assert.isDefined(Terminal.prototype.linkify);
|
||||
});
|
||||
it('should define Terminal.prototype.linkifyTerminalLine', function () {
|
||||
assert.isDefined(Terminal.prototype.linkifyTerminalLine);
|
||||
});
|
||||
});
|
||||
|
||||
describe('findUrlMatchOnLine', function () {
|
||||
describe('strict regex', function () {
|
||||
it('should match when the entire text is a match', function () {
|
||||
assert.equal(linkify.findLinkMatch('http://github.com', false), 'http://github.com');
|
||||
assert.equal(linkify.findLinkMatch('http://127.0.0.1', false), 'http://127.0.0.1');
|
||||
});
|
||||
it('should match simple domains', function () {
|
||||
assert.equal(linkify.findLinkMatch('foo http://github.com bar', false), 'http://github.com');
|
||||
assert.equal(linkify.findLinkMatch('foo http://www.github.com bar', false), 'http://www.github.com');
|
||||
assert.equal(linkify.findLinkMatch('foo https://github.com bar', false), 'https://github.com');
|
||||
assert.equal(linkify.findLinkMatch('foo https://www.github.com bar', false), 'https://www.github.com');
|
||||
});
|
||||
it('should match web addresses with alpha paths', function () {
|
||||
assert.equal(linkify.findLinkMatch('foo http://github.com/a/b/c bar', false), 'http://github.com/a/b/c');
|
||||
assert.equal(linkify.findLinkMatch('foo http://www.github.com/a/b/c bar', false), 'http://www.github.com/a/b/c');
|
||||
});
|
||||
it('should not include whitespace surrounding a match', function () {
|
||||
assert.equal(linkify.findLinkMatch(' http://github.com', false), 'http://github.com');
|
||||
assert.equal(linkify.findLinkMatch('http://github.com ', false), 'http://github.com');
|
||||
assert.equal(linkify.findLinkMatch(' http://github.com ', false), 'http://github.com');
|
||||
});
|
||||
it('should match IP addresses', function () {
|
||||
assert.equal(linkify.findLinkMatch('foo http://127.0.0.1 bar', false), 'http://127.0.0.1');
|
||||
assert.equal(linkify.findLinkMatch('foo https://127.0.0.1 bar', false), 'https://127.0.0.1');
|
||||
});
|
||||
it('should match ports on both domains and IP addresses', function () {
|
||||
assert.equal(linkify.findLinkMatch('foo http://127.0.0.1:8080 bar', false), 'http://127.0.0.1:8080');
|
||||
assert.equal(linkify.findLinkMatch('foo http://www.github.com:8080 bar', false), 'http://www.github.com:8080');
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -1,9 +1,15 @@
|
||||
var glob = require('glob');
|
||||
var fs = require('fs');
|
||||
var pty = require('pty.js');
|
||||
var os = require('os');
|
||||
var pty = require('node-pty');
|
||||
var sleep = require('sleep');
|
||||
var Terminal = require('../xterm');
|
||||
|
||||
if (os.platform() === 'win32') {
|
||||
// Skip tests on Windows since pty.open isn't supported
|
||||
return;
|
||||
}
|
||||
|
||||
var CONSOLE_LOG = console.log;
|
||||
|
||||
// expect files need terminal at 80x25!
|
||||
@@ -56,7 +62,7 @@ function formatError(in_, out_, expected) {
|
||||
function terminalToString(term) {
|
||||
var result = '';
|
||||
var line_s = '';
|
||||
for (var line=0; line<term.rows; ++line) {
|
||||
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];
|
||||
@@ -76,30 +82,49 @@ describe('xterm output comparison', function() {
|
||||
beforeEach(function () {
|
||||
xterm = new Terminal(COLS, ROWS);
|
||||
xterm.refresh = function() {};
|
||||
xterm.viewport = {
|
||||
syncScrollArea: function() {}
|
||||
};
|
||||
});
|
||||
|
||||
// omit stack trace for escape sequence files
|
||||
Error.stackTraceLimit = 0;
|
||||
var files = glob.sync('**/escape_sequence_files/*.in');
|
||||
// only successful tests for now
|
||||
var successful = [0, 2, 6, 12, 13, 18, 20, 22, 27, 28];
|
||||
for (var a in successful) {
|
||||
var i = successful[a];
|
||||
(function(filename){
|
||||
var skip = [
|
||||
10, 16, 17, 19, 32, 33, 34, 35, 36, 39,
|
||||
40, 42, 43, 44, 45, 46, 47, 48, 49, 50,
|
||||
51, 52, 54, 55, 56, 57, 58, 59, 60, 61,
|
||||
63, 68
|
||||
];
|
||||
for (var i = 0; i < files.length; i++) {
|
||||
if (skip.indexOf(i) >= 0) {
|
||||
continue;
|
||||
}
|
||||
(function(filename) {
|
||||
it(filename.split('/').slice(-1)[0], function () {
|
||||
pty_reset();
|
||||
var in_file = fs.readFileSync(filename, 'utf8');
|
||||
var from_pty = pty_write_read(in_file);
|
||||
// uncomment this to get log from terminal
|
||||
//console.log = function(){};
|
||||
xterm.write(from_pty);
|
||||
|
||||
// Perform a synchronous .write(data)
|
||||
xterm.writeBuffer.push(from_pty);
|
||||
xterm.innerWrite();
|
||||
|
||||
var from_emulator = terminalToString(xterm);
|
||||
console.log = CONSOLE_LOG;
|
||||
var expected = fs.readFileSync(filename.split('.')[0] + '.text', 'utf8');
|
||||
if (from_emulator != expected) {
|
||||
// Some of the tests have whitespace on the right of lines, we trim all the linex
|
||||
// from xterm.js so ignore this for now at least.
|
||||
var expectedRightTrimmed = expected.split('\n').map(function (l) {
|
||||
return l.replace(/\s+$/, '');
|
||||
}).join('\n');
|
||||
if (from_emulator != expectedRightTrimmed) {
|
||||
// uncomment to get noisy output
|
||||
//throw new Error(formatError(in_file, from_emulator, expected));
|
||||
throw new Error('mismatch');
|
||||
throw new Error(formatError(in_file, from_emulator, expected));
|
||||
// throw new Error('mismatch');
|
||||
}
|
||||
});
|
||||
})(files[i]);
|
||||
|
||||
+15
-2
@@ -14,6 +14,17 @@ describe('xterm.js', function() {
|
||||
xterm.compositionHelper = {
|
||||
keydown: function(){ return true; }
|
||||
};
|
||||
// Force synchronous writes
|
||||
xterm.write = function(data) {
|
||||
xterm.writeBuffer.push(data);
|
||||
xterm.innerWrite();
|
||||
};
|
||||
xterm.element = {
|
||||
classList: {
|
||||
toggle: function(){},
|
||||
remove: function(){}
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
describe('getOption', function() {
|
||||
@@ -540,6 +551,7 @@ describe('xterm.js', function() {
|
||||
|
||||
describe('unicode - surrogates', function() {
|
||||
it('2 characters per cell', function () {
|
||||
this.timeout(10000); // This is needed because istanbul patches code and slows it down
|
||||
var high = String.fromCharCode(0xD800);
|
||||
for (var i=0xDC00; i<=0xDCFF; ++i) {
|
||||
xterm.write(high + String.fromCharCode(i));
|
||||
@@ -581,8 +593,9 @@ describe('xterm.js', function() {
|
||||
xterm.x = xterm.cols - 1;
|
||||
xterm.wraparoundMode = false;
|
||||
xterm.write('a' + high + String.fromCharCode(i));
|
||||
expect(xterm.lines.get(0)[xterm.cols-1][1]).eql(high + String.fromCharCode(i));
|
||||
expect(xterm.lines.get(0)[xterm.cols-1][1].length).eql(2);
|
||||
// auto wraparound mode should cut off the rest of the line
|
||||
expect(xterm.lines.get(0)[xterm.cols-1][1]).eql('a');
|
||||
expect(xterm.lines.get(0)[xterm.cols-1][1].length).eql(1);
|
||||
expect(xterm.lines.get(1)[1][1]).eql(' ');
|
||||
xterm.reset();
|
||||
}
|
||||
|
||||
@@ -0,0 +1,77 @@
|
||||
/**
|
||||
* @license MIT
|
||||
*/
|
||||
import jsdom = require('jsdom');
|
||||
import { assert } from 'chai';
|
||||
import { ICharMeasure, ITerminal } from '../Interfaces';
|
||||
import { CharMeasure } from './CharMeasure';
|
||||
|
||||
describe('CharMeasure', () => {
|
||||
let window: Window;
|
||||
let document: Document;
|
||||
|
||||
let container: HTMLElement;
|
||||
let charMeasure: ICharMeasure;
|
||||
|
||||
beforeEach(done => {
|
||||
jsdom.env('', (err, w) => {
|
||||
window = w;
|
||||
document = window.document;
|
||||
container = document.createElement('div');
|
||||
document.body.appendChild(container);
|
||||
charMeasure = new CharMeasure(document, container);
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
describe('measure', () => {
|
||||
it('should set _measureElement on first call', () => {
|
||||
charMeasure.measure();
|
||||
assert.isDefined((<any>charMeasure)._measureElement, 'CharMeasure.measure should have created _measureElement');
|
||||
});
|
||||
|
||||
it('should be performed async on first call', done => {
|
||||
assert.equal(charMeasure.width, null);
|
||||
charMeasure.measure();
|
||||
// Mock getBoundingClientRect since jsdom doesn't have a layout engine
|
||||
(<any>charMeasure)._measureElement.getBoundingClientRect = () => {
|
||||
return { width: 1, height: 1 };
|
||||
};
|
||||
assert.equal(charMeasure.width, null);
|
||||
setTimeout(() => {
|
||||
assert.equal(charMeasure.width, 1);
|
||||
done();
|
||||
}, 0);
|
||||
});
|
||||
|
||||
it('should be performed sync on successive calls', done => {
|
||||
charMeasure.measure();
|
||||
// Mock getBoundingClientRect since jsdom doesn't have a layout engine
|
||||
(<any>charMeasure)._measureElement.getBoundingClientRect = () => {
|
||||
return { width: 1, height: 1 };
|
||||
};
|
||||
setTimeout(() => {
|
||||
const firstWidth = charMeasure.width;
|
||||
// Mock getBoundingClientRect since jsdom doesn't have a layout engine
|
||||
(<any>charMeasure)._measureElement.getBoundingClientRect = () => {
|
||||
return { width: 2, height: 2 };
|
||||
};
|
||||
charMeasure.measure();
|
||||
assert.equal(charMeasure.width, firstWidth * 2);
|
||||
done();
|
||||
}, 0);
|
||||
});
|
||||
|
||||
it('should NOT do a measure when the parent is hidden', done => {
|
||||
charMeasure.measure();
|
||||
setTimeout(() => {
|
||||
const firstWidth = charMeasure.width;
|
||||
container.style.display = 'none';
|
||||
container.style.fontSize = '2em';
|
||||
charMeasure.measure();
|
||||
assert.equal(charMeasure.width, firstWidth);
|
||||
done();
|
||||
}, 0);
|
||||
});
|
||||
});
|
||||
});
|
||||
+21
-11
@@ -9,13 +9,15 @@ import { EventEmitter } from '../EventEmitter.js';
|
||||
* Utility class that measures the size of a character.
|
||||
*/
|
||||
export class CharMeasure extends EventEmitter {
|
||||
private _document: Document;
|
||||
private _parentElement: HTMLElement;
|
||||
private _measureElement: HTMLElement;
|
||||
private _width: number;
|
||||
private _height: number;
|
||||
|
||||
constructor(parentElement: HTMLElement) {
|
||||
constructor(document: Document, parentElement: HTMLElement) {
|
||||
super();
|
||||
this._document = document;
|
||||
this._parentElement = parentElement;
|
||||
}
|
||||
|
||||
@@ -28,24 +30,32 @@ export class CharMeasure extends EventEmitter {
|
||||
}
|
||||
|
||||
public measure(): void {
|
||||
const oldWidth = this._width;
|
||||
const oldHeight = this._height;
|
||||
|
||||
if (!this._measureElement) {
|
||||
this._measureElement = document.createElement('span');
|
||||
this._measureElement = this._document.createElement('span');
|
||||
this._measureElement.style.position = 'absolute';
|
||||
this._measureElement.style.top = '0';
|
||||
this._measureElement.style.left = '-9999em';
|
||||
this._measureElement.textContent = 'W';
|
||||
this._measureElement.setAttribute('aria-hidden', 'true');
|
||||
this._parentElement.appendChild(this._measureElement);
|
||||
// Perform _doMeasure async if the element was just attached as sometimes
|
||||
// getBoundingClientRect does not return accurate values without this.
|
||||
setTimeout(() => this._doMeasure(), 0);
|
||||
} else {
|
||||
this._doMeasure();
|
||||
}
|
||||
}
|
||||
|
||||
this._parentElement.appendChild(this._measureElement);
|
||||
private _doMeasure(): void {
|
||||
const geometry = this._measureElement.getBoundingClientRect();
|
||||
this._width = geometry.width;
|
||||
this._height = geometry.height;
|
||||
this._parentElement.removeChild(this._measureElement);
|
||||
|
||||
if (this._width !== oldWidth || this._height !== oldHeight) {
|
||||
// The element is likely currently display:none, we should retain the
|
||||
// previous value.
|
||||
if (geometry.width === 0 || geometry.height === 0) {
|
||||
return;
|
||||
}
|
||||
if (this._width !== geometry.width || this._height !== geometry.height) {
|
||||
this._width = geometry.width;
|
||||
this._height = geometry.height;
|
||||
this.emit('charsizechanged');
|
||||
}
|
||||
}
|
||||
|
||||
+49
-12
@@ -71,7 +71,22 @@
|
||||
resize: none;
|
||||
}
|
||||
|
||||
.terminal .terminal-cursor {
|
||||
.terminal a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.terminal a:hover {
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.terminal a.xterm-invalid-link:hover {
|
||||
cursor: text;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.terminal.focus:not(.xterm-cursor-style-underline):not(.xterm-cursor-style-bar) .terminal-cursor {
|
||||
background-color: #fff;
|
||||
color: #000;
|
||||
}
|
||||
@@ -82,19 +97,41 @@
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.terminal.focus .terminal-cursor.blinking {
|
||||
animation: blink-cursor 1.2s infinite step-end;
|
||||
.terminal:not(.xterm-cursor-style-underline):not(.xterm-cursor-style-bar).focus.xterm-cursor-blink-on .terminal-cursor {
|
||||
background-color: transparent;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
@keyframes blink-cursor {
|
||||
0% {
|
||||
background-color: #fff;
|
||||
color: #000;
|
||||
}
|
||||
50% {
|
||||
background-color: transparent;
|
||||
color: #FFF;
|
||||
}
|
||||
.terminal.xterm-cursor-style-bar .terminal-cursor,
|
||||
.terminal.xterm-cursor-style-underline .terminal-cursor {
|
||||
position: relative;
|
||||
}
|
||||
.terminal.xterm-cursor-style-bar .terminal-cursor::before,
|
||||
.terminal.xterm-cursor-style-underline .terminal-cursor::before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
background-color: #fff;
|
||||
}
|
||||
.terminal.xterm-cursor-style-bar .terminal-cursor::before {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 1px;
|
||||
}
|
||||
.terminal.xterm-cursor-style-underline .terminal-cursor::before {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 1px;
|
||||
}
|
||||
.terminal.xterm-cursor-style-bar.focus.xterm-cursor-blink.xterm-cursor-blink-on .terminal-cursor::before,
|
||||
.terminal.xterm-cursor-style-underline.focus.xterm-cursor-blink.xterm-cursor-blink-on .terminal-cursor::before {
|
||||
background-color: transparent;
|
||||
}
|
||||
.terminal.xterm-cursor-style-bar.focus.xterm-cursor-blink .terminal-cursor::before,
|
||||
.terminal.xterm-cursor-style-underline.focus.xterm-cursor-blink .terminal-cursor::before {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.terminal .composition-view {
|
||||
|
||||
+392
-3257
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user