Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Retain the color of a character for underline and bar cursor styles #781

Merged
merged 2 commits into from
Aug 3, 2017
Merged

Retain the color of a character for underline and bar cursor styles #781

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5bc0ad8
Set xterm-color for cursor element
mofux Jul 11, 2017
106eda7
Merge changes from #828
mofux Aug 2, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
122 changes: 62 additions & 60 deletions src/Renderer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -170,24 +170,21 @@ export class Renderer {
let data: any = line[i][0];
const ch = line[i][1];
const ch_width: any = line[i][2];
const isCursor: boolean = i === x;
if (!ch_width) {
continue;
}

if (i === x) {
data = -1;
}

if (data !== attr) {
if (attr !== this._terminal.defAttr) {
if (data !== attr || isCursor) {
if (attr !== this._terminal.defAttr && !isCursor) {
if (innerHTML) {
currentElement.innerHTML = innerHTML;
innerHTML = '';
}
documentFragment.appendChild(currentElement);
currentElement = null;
}
if (data !== this._terminal.defAttr) {
if (data !== this._terminal.defAttr || isCursor) {
if (innerHTML && !currentElement) {
currentElement = this._spanElementObjectPool.acquire();
}
Expand All @@ -199,71 +196,73 @@ export class Renderer {
documentFragment.appendChild(currentElement);
}
currentElement = this._spanElementObjectPool.acquire();
if (data === -1) {

let bg = data & 0x1ff;
let fg = (data >> 9) & 0x1ff;
let flags = data >> 18;

if (isCursor) {
currentElement.classList.add('reverse-video');
currentElement.classList.add('terminal-cursor');
} else {
let bg = data & 0x1ff;
let fg = (data >> 9) & 0x1ff;
let flags = data >> 18;

if (flags & FLAGS.BOLD) {
if (!brokenBold) {
currentElement.classList.add('xterm-bold');
}
// See: XTerm*boldColors
if (fg < 8) {
fg += 8;
}
}
}

if (flags & FLAGS.UNDERLINE) {
currentElement.classList.add('xterm-underline');
if (flags & FLAGS.BOLD) {
if (!brokenBold) {
currentElement.classList.add('xterm-bold');
}

if (flags & FLAGS.BLINK) {
currentElement.classList.add('xterm-blink');
// See: XTerm*boldColors
if (fg < 8) {
fg += 8;
}
}

// If inverse flag is on, then swap the foreground and background variables.
if (flags & FLAGS.INVERSE) {
let temp = bg;
bg = fg;
fg = temp;
// Should inverse just be before the above boldColors effect instead?
if ((flags & 1) && fg < 8) {
fg += 8;
}
}
if (flags & FLAGS.UNDERLINE) {
currentElement.classList.add('xterm-underline');
}

if (flags & FLAGS.INVISIBLE) {
currentElement.classList.add('xterm-hidden');
}
if (flags & FLAGS.BLINK) {
currentElement.classList.add('xterm-blink');
}

/**
* 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 inverse flag is on, then swap the foreground and background variables.
if (flags & FLAGS.INVERSE) {
let temp = bg;
bg = fg;
fg = temp;
// Should inverse just be before the above boldColors effect instead?
if ((flags & 1) && fg < 8) {
fg += 8;
}
}

if (bg < 256) {
currentElement.classList.add(`xterm-bg-color-${bg}`);
}
if (flags & FLAGS.INVISIBLE && !isCursor) {
currentElement.classList.add('xterm-hidden');
}

if (fg < 256) {
currentElement.classList.add(`xterm-color-${fg}`);
/**
* 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}`);
}

if (fg < 256) {
currentElement.classList.add(`xterm-color-${fg}`);
}

}
}

Expand Down Expand Up @@ -295,7 +294,10 @@ export class Renderer {
}
}

attr = data;
// The cursor needs its own element, therefore we set attr to -1
// which will cause the next character to be rendered in a new element
attr = isCursor ? -1 : data;

}

if (innerHTML && !currentElement) {
Expand Down
43 changes: 17 additions & 26 deletions src/xterm.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,53 +89,40 @@
text-decoration: none;
}

.terminal.focus:not(.xterm-cursor-style-underline):not(.xterm-cursor-style-bar) .terminal-cursor {
background-color: #fff;
color: #000;
.terminal .terminal-cursor {
position: relative;
}

.terminal:not(.focus) .terminal-cursor {
outline: 1px solid #fff;
outline-offset: -1px;
background-color: transparent;
}

.terminal:not(.xterm-cursor-style-underline):not(.xterm-cursor-style-bar).focus.xterm-cursor-blink-on .terminal-cursor {
background-color: transparent;
color: inherit;
.terminal.xterm-cursor-style-block.focus:not(.xterm-cursor-blink-on) .terminal-cursor {
background-color: #fff;
color: #000;
}

.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;
.terminal.focus.xterm-cursor-style-bar:not(.xterm-cursor-blink-on) .terminal-cursor::before,
.terminal.focus.xterm-cursor-style-underline:not(.xterm-cursor-blink-on) .terminal-cursor::before {
content: '';
position: absolute;
background-color: #fff;
}
.terminal.xterm-cursor-style-bar .terminal-cursor::before {

.terminal.focus.xterm-cursor-style-bar:not(.xterm-cursor-blink-on) .terminal-cursor::before {
top: 0;
bottom: 0;
left: 0;
bottom: 0;
width: 1px;
}
.terminal.xterm-cursor-style-underline .terminal-cursor::before {

.terminal.focus.xterm-cursor-style-underline:not(.xterm-cursor-blink-on) .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 {
background: #000;
Expand Down Expand Up @@ -217,6 +204,10 @@
text-decoration: blink;
}

.terminal .xterm-blink.xterm-underline {
text-decoration: blink underline;
}

.terminal .xterm-hidden {
visibility: hidden;
}
Expand Down
8 changes: 6 additions & 2 deletions src/xterm.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -429,7 +429,7 @@ Terminal.prototype.setOption = function(key, value) {
switch (key) {
case 'cursorBlink': this.setCursorBlinking(value); break;
case 'cursorStyle':
// Style 'block' applies with no class
this.element.classList.toggle(`xterm-cursor-style-block`, value === 'block');
this.element.classList.toggle(`xterm-cursor-style-underline`, value === 'underline');
this.element.classList.toggle(`xterm-cursor-style-bar`, value === 'bar');
break;
Expand Down Expand Up @@ -639,6 +639,7 @@ Terminal.prototype.open = function(parent, focus) {
this.element.classList.add('terminal');
this.element.classList.add('xterm');
this.element.classList.add('xterm-theme-' + this.theme);
this.element.classList.add(`xterm-cursor-style-${this.options.cursorStyle}`);
this.setCursorBlinking(this.options.cursorBlink);

this.element.setAttribute('tabindex', 0);
Expand Down Expand Up @@ -1016,7 +1017,10 @@ Terminal.prototype.bindMouse = function() {
}

on(el, 'mousedown', function(ev) {
// ensure focus

// Prevent the focus on the textarea from getting lost
// and make sure we get focused on mousedown
ev.preventDefault();
self.focus();

if (!self.mouseEvents) return;
Expand Down