Skip to content

Commit

Permalink
set xterm-color for cursor element
Browse files Browse the repository at this point in the history 
Prevent focus from getting lost when in vt mouse mode

fix: cursor style not applied on init, set a class for block cursor

Make all cursors work under all conditions (focused, unfocused, blink)

Unify cursor rendering with normal rendering code

Make sure underline AND blink can be used in co-existence

Always show outlined block cursor in unfocused state
  • Loading branch information
@mofux
mofux committed Aug 2, 2017
1 parent bcff69b commit 469d167
Show file tree
Hide file tree
Showing 3 changed files with 84 additions and 87 deletions.
122 changes: 62 additions & 60 deletions src/Renderer.ts
View file
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
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
6 changes: 5 additions & 1 deletion src/xterm.js
View file
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 @@ -1025,6 +1026,9 @@ Terminal.prototype.bindMouse = function() {
}

on(el, 'mousedown', function(ev) {
// prevent the focus on the textarea from getting lost
ev.preventDefault();

if (!self.mouseEvents) return;

// send the button
Expand Down

0 comments on commit 469d167

Please sign in to comment.