Render the background in a :before if selection is active

xtermjs · Jul 11, 2017 · f298b8f · f298b8f
1 parent d6bd943
commit f298b8f
Show file tree

Hide file tree

Showing 3 changed files with 530 additions and 260 deletions.
diff --git a/src/Renderer.ts b/src/Renderer.ts
@@ -257,7 +257,8 @@ export class Renderer {
               }
 
               if (bg < 256) {
-                innerHTML += `<span class="xterm-bg xterm-bg-color-${bg}"></span>`;
+                currentElement.classList.add('xterm-bg');
+                currentElement.classList.add(`xterm-bg-color-${bg}`);
               }
 
               if (fg < 256) {

diff --git a/src/SelectionManager.ts b/src/SelectionManager.ts
@@ -325,6 +325,14 @@ export class SelectionManager extends EventEmitter {
   private _refresh(): void {
     this._refreshAnimationFrame = null;
     this.emit('refresh', { start: this._model.finalSelectionStart, end: this._model.finalSelectionEnd });
+
+    // Set / unset the 'selection-active' class on the terminal.
+    // If the class exists, the background will be rendered inside a :before
+    // element, which allows us to draw the selection between the foreground
+    // and the background
+    this.hasSelection ? 
+      this._terminal.element.classList.add('selection-active') : 
+      this._terminal.element.classList.remove('selection-active');
   }
 
   /**