fix padding implementation. tests.
This commit is contained in:
parent
9db97cd61c
commit
04b0adac56
|
@ -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));
|
||||
this._clines[(this.childBase || 0) + (this.border ? 1 : 0) + i] = line;
|
||||
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) + 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));
|
||||
return this._clines[(this.childBase || 0) + (this.border ? 1 : 0) + i];
|
||||
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) + 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),
|
||||
left: (this.border ? 1 : 0) + 1,
|
||||
right: (this.border ? 1 : 0) + 1,
|
||||
top: this.items.length + (this.border ? 1 : 0) + this.padding,
|
||||
left: (this.border ? 1 : 0) + this.padding + 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.left + (this.border ? 1 : 0)
|
||||
this.top + (this.border ? 1 : 0) + this.padding,
|
||||
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;
|
||||
cx = this.left + (this.border ? 1 : 0) + last.length;
|
||||
cy = this.top + (this.border ? 1 : 0) + this.padding + line;
|
||||
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);
|
||||
}
|
||||
|
|
|
@ -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();
|
Loading…
Reference in New Issue