fix scrolling obfuscation for elements with borders.

README.md

@@ -146,6 +146,7 @@ The screen on which every other node renders.
   cost of overhead within node.
 - **resizeTimeout** - amount of time (in ms) to redraw the screen after the
   terminal is resized (default: 300).
+- **tabSize** - the width of tabs within an element's content.
 
 ##### Properties:
 
@@ -264,6 +265,7 @@ The base element.
   parent**. can be a number, percentage (`0-100%`), or keyword (`center`).
   `right` and `bottom` do not accept keywords.
 - **position** - can contain the above options.
+- **scrollable** - whether the element is scrollable or not.
 
 ##### Properties:
 
@@ -308,6 +310,8 @@ The base element.
 - **move** - received when the element is moved.
 - **resize** - received when the element is resized.
 - **key [name]** - received on key event for [name].
+- **prerender** - received before a call to render.
+- **render** - received after a call to render.
 
 ##### Methods:
 
@@ -412,6 +416,8 @@ Inherits all options, properties, events, and methods from Box.
 
 #### ScrollableBox (from Box)
 
+**DEPRECATED** - Use box with the `scrollable` option instead.
+
 A box with scrollable content.
 
 ##### Options:
@@ -486,6 +492,8 @@ A scrollable list which can display selectable items.
 
 #### ScrollableText (from ScrollableBox)
 
+**DEPRECATED** - Use box with the `scrollable` option instead.
+
 A scrollable text box which can display and scroll text, as well as handle
 pre-existing newlines and escape codes.
 

lib/widget.js

@@ -2705,7 +2705,9 @@ Element.prototype._getCoords = function(get) {
     yi: yi,
     yl: yl,
     _cb: _cb || 0,
-    base: base || this.childBase || 0
+    base: base || this.childBase || 0,
+    notop: ryi != null && ryi < el.childBase,
+    nobot: ryl != null && ryl > el.childBase + visible
   };
 };
 
@@ -2752,6 +2754,10 @@ Element.prototype.render = function() {
   }
 
   if (this.border) xi++, xl--, yi++, yl--;
+  if (this.border) {
+    if (coords.notop) yi--;
+    if (coords.nobot) yl++;
+  }
 
   // If we have padding/valign, that means the
   // content-drawing loop will skip a few cells/lines.
@@ -2839,6 +2845,7 @@ Element.prototype.render = function() {
     i = Math.max(this._clines.length + 1,
       this._scrollBottom() + (yl - yi) + 1);
   }
+  if (coords.notop || coords.nobot) i = -Infinity;
   if (this.scrollbar && (yl - yi) < i) {
     i -= yl - yi;
     x = xl - 1;
@@ -2861,6 +2868,10 @@ Element.prototype.render = function() {
   }
 
   if (this.border) xi--, xl++, yi--, yl++;
+  if (this.border) {
+    //if (coords.notop) yi++;
+    if (coords.nobot) yl--;
+  }
 
   if (this.tpadding) {
     xi -= this.padding.left, xl += this.padding.right;
@@ -2872,6 +2883,7 @@ Element.prototype.render = function() {
     battr = this.sattr(this.style.border,
       this.style.border.fg, this.style.border.bg);
     y = yi;
+    if (coords.notop) y = -1;
     for (x = xi; x < xl; x++) {
       if (!lines[y]) break;
       if (this.border.type === 'line') {
@@ -2913,6 +2925,7 @@ Element.prototype.render = function() {
       }
     }
     y = yl - 1;
+    if (coords.nobot) y = -1;
     for (x = xi; x < xl; x++) {
       if (!lines[y]) break;
       if (this.border.type === 'line') {
@@ -3471,7 +3484,8 @@ function List(options) {
 
   options.ignoreKeys = true;
   // Possibly put this here: this.items = [];
-  ScrollableBox.call(this, options);
+  options.scrollable = true;
+  Box.call(this, options);
 
   this.value = '';
   this.items = [];
@@ -3638,7 +3652,7 @@ function List(options) {
   });
 }
 
-List.prototype.__proto__ = ScrollableBox.prototype;
+List.prototype.__proto__ = Box.prototype;
 
 List.prototype.type = 'list';
 
@@ -3768,11 +3782,12 @@ function ScrollableText(options) {
     return new ScrollableText(options);
   }
   options = options || {};
+  options.scrollable = true;
   options.alwaysScroll = true;
-  ScrollableBox.call(this, options);
+  Box.call(this, options);
 }
 
-ScrollableText.prototype.__proto__ = ScrollableBox.prototype;
+ScrollableText.prototype.__proto__ = Box.prototype;
 
 ScrollableText.prototype.type = 'scrollable-text';
 
@@ -3839,7 +3854,7 @@ function Form(options) {
   }
 }
 
-Form.prototype.__proto__ = ScrollableBox.prototype;
+Form.prototype.__proto__ = Box.prototype;
 
 Form.prototype.type = 'form';
 
@@ -4226,7 +4241,7 @@ Textarea.prototype.cancel = function() {
   return this._listener('\x1b', { name: 'escape' });
 };
 
-Textarea.prototype._render = ScrollableBox.prototype.render;
+Textarea.prototype._render = Box.prototype.render;
 Textarea.prototype.render = function() {
   this.setValue();
   return this._render();

test/widget-scrollable-boxes.js

@@ -1,9 +1,14 @@
 var blessed = require('../')
-  , screen = blessed.screen();
+  , screen;
 
-var box = blessed.scrollablebox({
-//var box = blessed.scrollabletext({
+screen = blessed.screen({
+  dump: __dirname + '/scrollable-boxes.log',
+  smartCSR: true
+});
+
+var box = blessed.box({
   parent: screen,
+  scrollable: true,
   left: 'center',
   top: 'center',
   width: '80%',
@@ -16,7 +21,7 @@ var box = blessed.scrollablebox({
   keys: true,
   vi: true,
   alwaysScroll: true,
-  scrollbar: {
+  scrollbar_: {
     ch: ' ',
     inverse: true
   }
@@ -46,6 +51,35 @@ var text2 = blessed.box({
   height: 3
 });
 
+var box2 = blessed.box({
+  parent: box,
+  scrollable: true,
+  content: 'foo1\nfoo2\nfoo3\nfoo4\nfoo5\nfoo6\nfoo7\nf008',
+  left: 'center',
+  top: 20,
+  width: '80%',
+  height: 5,
+  border: {
+    type: 'ascii'
+  },
+  style: {
+    bg: 'yellow',
+    focus: {
+      bg: 'blue'
+    },
+    hover: {
+      bg: 'red'
+    }
+  },
+  keys: true,
+  vi: true,
+  alwaysScroll: true,
+  scrollbar_: {
+    ch: ' ',
+    inverse: true
+  }
+});
+
 screen.key('q', function() {
   return process.exit(0);
 });