fix padding implementation. tests.

lib/widget.js

@@ -1253,7 +1253,7 @@ Element.prototype.setContent = function(content, noClear) {
 Element.prototype.parseContent = function() {
   if (this.detached) return false;
 
-  var width = this.width - (this.border ? 2 : 0);
+  var width = this.width - (this.border ? 2 : 0) - this.padding * 2;
   if (this._clines == null
       || this._clines.width !== width
       || this._clines.content !== this.content) {
@@ -1700,9 +1700,9 @@ Box.prototype.render = function(stop) {
         && (this.options.left == null
         || this.options.right == null)) {
       if (this.options.left == null && this.options.right != null) {
-        xi_ = xl - w - (this.border ? 2 : 0) - this.padding;
+        xi_ = xl - w - (this.border ? 2 : 0) - this.padding * 2;
       } else {
-        xl = xi_ + w + (this.border ? 2 : 0) + this.padding;
+        xl = xi_ + w + (this.border ? 2 : 0) + this.padding * 2;
       }
     }
 
@@ -1711,9 +1711,9 @@ Box.prototype.render = function(stop) {
         || this.options.bottom == null)
         && this.childBase == null) {
       if (this.options.top == null && this.options.bottom != null) {
-        yi_ = yl - h - (this.border ? 2 : 0) - this.padding;
+        yi_ = yl - h - (this.border ? 2 : 0) - this.padding * 2;
       } else {
-        yl = yi_ + h + (this.border ? 2 : 0) + this.padding;
+        yl = yi_ + h + (this.border ? 2 : 0) + this.padding * 2;
       }
     }
 
@@ -1765,7 +1765,6 @@ Box.prototype.render = function(stop) {
 
   if (this.border) yi_++, yl--, xi_++, xl--;
 
-  // TODO: Fix padding.
   if (this.padding) {
     yi_ += this.padding, yl -= this.padding;
     xi_ += this.padding, xl -= this.padding;
@@ -1832,7 +1831,7 @@ outer:
     if (this.scrollbar.ignoreBorder && this.border) xi++;
     if (this.selected == null) {
       // TODO: Fix this - doesn't work with lists (and possibly scrollabletext).
-      yi = h - (yl - yi_) - (this.border ? 2 : 0);
+      yi = h - (yl - yi_) - (this.border ? 2 : 0) - this.padding * 2;
       yi = yi_ + (((yl - yi_) * (this.childBase / yi)) | 0);
     } else {
       yi = this.selected / h;
@@ -1947,17 +1946,17 @@ Box.prototype.insertLine = function(i, line) {
   //if (typeof line === 'string') line = [line];
   if (this._lastPos && this._lastPos.xi === 0 && this._lastPos.xl === this.screen.width) {
     i = Math.max(i, 0);
-    i = Math.min(i, this._lastPos.yl - this._lastPos.yi - (this.border ? 2 : 0));
+    i = Math.min(i, this._lastPos.yl - this._lastPos.yi - (this.border ? 2 : 0) - this.padding * 2);
     //this.screen.insertLine(line.length
     this.screen.insertLine(1,
-      this._lastPos.yi + (this.border ? 1 : 0) + i,
+      this._lastPos.yi + (this.border ? 1 : 0) + this.padding + i,
       this._lastPos.yi,
       this._lastPos.yl - 1);
   }
-  this._clines.splice((this.childBase || 0) + (this.border ? 1 : 0) + i, 0, line);
+  this._clines.splice((this.childBase || 0) + (this.border ? 1 : 0) + this.padding + i, 0, line);
   // OR:
   //line.forEach(function(line, j) {
-  //  this._clines.splice((this.childBase || 0) + (this.border ? 1 : 0) + i + j, 0, line);
+  //  this._clines.splice((this.childBase || 0) + (this.border ? 1 : 0) + this.padding + i + j, 0, line);
   //}, this);
   this.setContent(this._clines.join('\n'), true);
 };
@@ -1967,18 +1966,18 @@ Box.prototype.deleteLine = function(i) {
   var reset = true;
   if (this._lastPos && this._lastPos.xi === 0 && this._lastPos.xl === this.screen.width) {
     i = Math.max(i, 0);
-    i = Math.min(i, this._lastPos.yl - this._lastPos.yi - (this.border ? 2 : 0));
+    i = Math.min(i, this._lastPos.yl - this._lastPos.yi - (this.border ? 2 : 0) - this.padding * 2);
     //this.screen.deleteLine(line.length,
     this.screen.deleteLine(1,
-      this._lastPos.yi + (this.border ? 1 : 0) + i,
+      this._lastPos.yi + (this.border ? 1 : 0) + this.padding + i,
       this._lastPos.yi,
       this._lastPos.yl - 1);
     reset = false;
   }
-  this._clines.splice((this.childBase || 0) + (this.border ? 1 : 0) + i, 1);
+  this._clines.splice((this.childBase || 0) + (this.border ? 1 : 0) + this.padding + i, 1);
   // OR:
   //line.forEach(function(line, j) {
-  //  this._clines.splice((this.childBase || 0) + (this.border ? 1 : 0) + i, 1);
+  //  this._clines.splice((this.childBase || 0) + (this.border ? 1 : 0) + this.padding + i, 1);
   //}, this);
   this.setContent(this._clines.join('\n'), reset);
 };
@@ -1988,7 +1987,7 @@ Box.prototype.insertTop = function(line) {
 };
 
 Box.prototype.insertBottom = function(line) {
-  return this.insertLine(this.height - (this.border ? 2 : 0), line);
+  return this.insertLine(this.height - (this.border ? 2 : 0) - this.padding * 2, line);
 };
 
 Box.prototype.deleteTop = function() {
@@ -1996,20 +1995,20 @@ Box.prototype.deleteTop = function() {
 };
 
 Box.prototype.deleteBottom = function() {
-  return this.deleteLine(this.height - (this.border ? 2 : 0));
+  return this.deleteLine(this.height - (this.border ? 2 : 0) - this.padding * 2);
 };
 
 Box.prototype.setLine = function(i, line) {
   i = Math.max(i, 0);
-  i = Math.min(i, this._lastPos.yl - this._lastPos.yi - (this.border ? 2 : 0));
+  i = Math.min(i, this._lastPos.yl - this._lastPos.yi - (this.border ? 2 : 0) - this.padding * 2);
-  this._clines[(this.childBase || 0) + (this.border ? 1 : 0) + i] = line;
+  this._clines[(this.childBase || 0) + (this.border ? 1 : 0) + this.padding + i] = line;
   return this.setContent(this._clines.join('\n'), true);
 };
 
 Box.prototype.getLine = function(i) {
   i = Math.max(i, 0);
-  i = Math.min(i, this._lastPos.yl - this._lastPos.yi - (this.border ? 2 : 0));
+  i = Math.min(i, this._lastPos.yl - this._lastPos.yi - (this.border ? 2 : 0) - this.padding * 2);
-  return this._clines[(this.childBase || 0) + (this.border ? 1 : 0) + i];
+  return this._clines[(this.childBase || 0) + (this.border ? 1 : 0) + this.padding + i];
 };
 
 Box.prototype.clearLine = function(i) {
@@ -2105,7 +2104,7 @@ ScrollableBox.prototype.__proto__ = Box.prototype;
 ScrollableBox.prototype.type = 'scrollable-box';
 
 ScrollableBox.prototype.scroll = function(offset) {
-  var visible = this.height - (this.border ? 2 : 0);
+  var visible = this.height - (this.border ? 2 : 0) - this.padding * 2;
 
   // Maybe do for lists:
   // if (this.items) visible = Math.min(this.items.length, visible);
@@ -2295,9 +2294,9 @@ List.prototype.add = function(item) {
     bg: this.bg,
     content: item,
     align: this.align || 'left',
-    top: this.items.length + (this.border ? 1 : 0),
+    top: this.items.length + (this.border ? 1 : 0) + this.padding,
-    left: (this.border ? 1 : 0) + 1,
+    left: (this.border ? 1 : 0) + this.padding + 1,
-    right: (this.border ? 1 : 0) + 1,
+    right: (this.border ? 1 : 0) + this.padding + 1,
     tags: this.parseTags,
     height: 1,
     hoverBg: this.mouse ? this.options.itemHoverBg : null
@@ -2498,7 +2497,7 @@ ScrollableText.prototype.scroll = function(offset) {
   if (this.content != null) {
     this.parseContent();
 
-    max = this._clines.length - 1 - (this.height - (this.border ? 2 : 0));
+    max = this._clines.length - 1 - (this.height - (this.border ? 2 : 0) - this.padding * 2);
     if (max < 0) max = 0;
 
     if (cb > max) {
@@ -2519,7 +2518,7 @@ ScrollableText.prototype.scroll = function(offset) {
 ScrollableText.prototype._recalculateIndex = function() {
   if (this.detached) return;
 
-  var max = this._clines.length - 1 - (this.height - (this.border ? 2 : 0));
+  var max = this._clines.length - 1 - (this.height - (this.border ? 2 : 0) - this.padding * 2);
   if (max < 0) max = 0;
 
   if (this.childBase > max) {
@@ -2599,8 +2598,8 @@ Textbox.prototype.setInput = function(callback) {
   // Could possibly save and restore cursor.
 
   this.screen.program.cup(
-    this.top + (this.border ? 1 : 0),
+    this.top + (this.border ? 1 : 0) + this.padding,
-    this.left + (this.border ? 1 : 0)
+    this.left + (this.border ? 1 : 0) + this.padding
     + this.value.length);
   this.screen.program.showCursor();
   this.screen.program.sgr('normal');
@@ -2636,7 +2635,7 @@ Textbox.prototype._listener = function(ch, key) {
     if (this.value.length) {
       this.value = this.value.slice(0, -1);
       if (this.secret) return;
-      if (this.value.length < this.width - (this.border ? 2 : 0) - 1) {
+      if (this.value.length < this.width - (this.border ? 2 : 0) - this.padding * 2 - 1) {
         this.screen.program.cub();
       }
     }
@@ -2646,7 +2645,7 @@ Textbox.prototype._listener = function(ch, key) {
       if (ch === '\t') ch = ' ';
       this.value += ch;
       if (this.secret) return;
-      if (this.value.length < this.width - (this.border ? 2 : 0)) {
+      if (this.value.length < this.width - (this.border ? 2 : 0) - this.padding * 2) {
         this.screen.program.cuf();
       }
     }
@@ -2655,7 +2654,7 @@ Textbox.prototype._listener = function(ch, key) {
   // Maybe just use this instead of render hook:
   // Problem - user can't set .value willy nilly.
   // if (this.value !== value) {
-  //   this.setContent(this.value.slice(-(this.width - (this.border ? 2 : 0) - 1)));
+  //   this.setContent(this.value.slice(-(this.width - (this.border ? 2 : 0) - this.padding * 2 - 1)));
   // }
 
   this.screen.render();
@@ -2687,7 +2686,7 @@ Textbox.prototype.render = function(stop) {
     this.setContent(Array(this.value.length + 1).join('*'));
     return this._render(stop);
   }
-  this.setContent(this.value.slice(-(this.width - (this.border ? 2 : 0) - 1)));
+  this.setContent(this.value.slice(-(this.width - (this.border ? 2 : 0) - this.padding * 2 - 1)));
   return this._render(stop);
 };
 
@@ -2747,10 +2746,10 @@ Textarea.prototype.updateCursor = function() {
 
   line = Math.min(
     this._clines.length - 1 - this.childBase,
-    this.height - (this.border ? 2 : 0) - 1);
+    this.height - (this.border ? 2 : 0) - this.padding * 2 - 1);
 
-  cy = this.top + (this.border ? 1 : 0) + line;
+  cy = this.top + (this.border ? 1 : 0) + this.padding + line;
-  cx = this.left + (this.border ? 1 : 0) + last.length;
+  cx = this.left + (this.border ? 1 : 0) + this.padding + last.length;
 
   if (cy === program.y && cx === program.x) {
     return;
@@ -2846,7 +2845,7 @@ Textarea.prototype._listener = function(ch, key) {
 
 Textarea.prototype._typeScroll = function() {
   // XXX Workaround
-  if (this._clines.length - this.childBase > this.height - (this.border ? 2 : 0)) {
+  if (this._clines.length - this.childBase > this.height - (this.border ? 2 : 0) - this.padding * 2) {
     this.setContent(this.value + '\n');
     this.scroll(this._clines.length);
   }

test/widget-padding.js

@@ -0,0 +1,23 @@
+var blessed = require('../')
+  , screen = blessed.screen();
+
+blessed.box({
+  parent: screen,
+  border: {
+    type: 'ascii',
+  },
+  bg: 'red',
+  content: 'hello world\nhi',
+  align: 'center',
+  left: 'center',
+  top: 'center',
+  width: 20,
+  height: 8,
+  padding: 1
+});
+
+screen.key('q', function() {
+  return process.exit(0);
+});
+
+screen.render();