]> git.proxmox.com Git - mirror_xterm.js.git/blobdiff - src/Renderer.ts
Merge pull request #926 from ficristo/search-fix
[mirror_xterm.js.git] / src / Renderer.ts
index f0f50f61fb8d32afd6ac893db3204336c9e42e78..165594fd25f6d165c116d89e209f0f529db98362 100644 (file)
@@ -139,15 +139,15 @@ export class Renderer {
     }
 
     for (; y <= end; y++) {
-      let row = y + this._terminal.ydisp;
+      let row = y + this._terminal.buffer.ydisp;
 
-      let line = this._terminal.lines.get(row);
+      let line = this._terminal.buffer.lines.get(row);
 
       let x;
-      if (this._terminal.y === y - (this._terminal.ybase - this._terminal.ydisp) &&
+      if (this._terminal.buffer.y === y - (this._terminal.buffer.ybase - this._terminal.buffer.ydisp) &&
           this._terminal.cursorState &&
           !this._terminal.cursorHidden) {
-        x = this._terminal.x;
+        x = this._terminal.buffer.x;
       } else {
         x = -1;
       }
@@ -170,16 +170,13 @@ 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 = '';
@@ -187,7 +184,7 @@ export class Renderer {
             documentFragment.appendChild(currentElement);
             currentElement = null;
           }
-          if (data !== this._terminal.defAttr) {
+          if (data !== this._terminal.defAttr || isCursor) {
             if (innerHTML && !currentElement) {
               currentElement = this._spanElementObjectPool.acquire();
             }
@@ -199,70 +196,73 @@ export class Renderer {
               documentFragment.appendChild(currentElement);
             }
             currentElement = this._spanElementObjectPool.acquire();
-            if (data === -1) {
-              currentElement.classList.add('reverse-video', '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');
-              }
+            let bg = data & 0x1ff;
+            let fg = (data >> 9) & 0x1ff;
+            let flags = data >> 18;
 
-              if (flags & FLAGS.BLINK) {
-                currentElement.classList.add('xterm-blink');
-              }
+            if (isCursor) {
+              currentElement.classList.add('reverse-video');
+              currentElement.classList.add('terminal-cursor');
+            }
 
-              // 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.BOLD) {
+              if (!brokenBold) {
+                currentElement.classList.add('xterm-bold');
               }
-
-              if (flags & FLAGS.INVISIBLE) {
-                currentElement.classList.add('xterm-hidden');
+              // See: XTerm*boldColors
+              if (fg < 8) {
+                fg += 8;
               }
+            }
 
-              /**
-               * 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 (flags & FLAGS.UNDERLINE) {
+              currentElement.classList.add('xterm-underline');
+            }
+
+            if (flags & FLAGS.BLINK) {
+              currentElement.classList.add('xterm-blink');
+            }
 
-              if (bg < 256) {
-                currentElement.classList.add(`xterm-bg-color-${bg}`);
+            // 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.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}`);
+            }
+
           }
         }
 
@@ -294,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) {
@@ -336,8 +339,8 @@ export class Renderer {
     }
 
     // Translate from buffer position to viewport position
-    const viewportStartRow = start[1] - this._terminal.ydisp;
-    const viewportEndRow = end[1] - this._terminal.ydisp;
+    const viewportStartRow = start[1] - this._terminal.buffer.ydisp;
+    const viewportEndRow = end[1] - this._terminal.buffer.ydisp;
     const viewportCappedStartRow = Math.max(viewportStartRow, 0);
     const viewportCappedEndRow = Math.min(viewportEndRow, this._terminal.rows - 1);
 
@@ -353,9 +356,8 @@ export class Renderer {
     const endCol = viewportCappedStartRow === viewportCappedEndRow ? end[0] : this._terminal.cols;
     documentFragment.appendChild(this._createSelectionElement(viewportCappedStartRow, startCol, endCol));
     // Draw middle rows
-    for (let i = viewportCappedStartRow + 1; i < viewportCappedEndRow; i++) {
-      documentFragment.appendChild(this._createSelectionElement(i, 0, this._terminal.cols));
-    }
+    const middleRowsCount = viewportCappedEndRow - viewportCappedStartRow - 1;
+    documentFragment.appendChild(this._createSelectionElement(viewportCappedStartRow + 1, 0, this._terminal.cols, middleRowsCount));
     // Draw final row
     if (viewportCappedStartRow !== viewportCappedEndRow) {
       // Only draw viewportEndRow if it's not the same as viewporttartRow
@@ -371,9 +373,9 @@ export class Renderer {
    * @param colStart The start column.
    * @param colEnd The end columns.
    */
-  private _createSelectionElement(row: number, colStart: number, colEnd: number): HTMLElement {
+  private _createSelectionElement(row: number, colStart: number, colEnd: number, rowCount: number = 1): HTMLElement {
     const element = document.createElement('div');
-    element.style.height = `${this._terminal.charMeasure.height}px`;
+    element.style.height = `${rowCount * this._terminal.charMeasure.height}px`;
     element.style.top = `${row * this._terminal.charMeasure.height}px`;
     element.style.left = `${colStart * this._terminal.charMeasure.width}px`;
     element.style.width = `${this._terminal.charMeasure.width * (colEnd - colStart)}px`;