embarklabs/neo-blessed
2
0
Fork 0
mirror of https://github.com/embarklabs/neo-blessed.git synced 2025-01-11 03:25:45 +00:00
Code Issues Projects Releases Wiki Activity

rename coord props for consistency. see #113.

Browse Source
This commit is contained in:
Christopher Jeffrey 2015-03-29 04:17:59 -07:00
parent bed28181f3
commit 5e466c139e
4 changed files with 118 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
README.md
View File

@ -231,10 +231,14 @@ The screen on which every other node renders.
- **height** - height of the screen (same as `program.rows`). - **height** - height of the screen (same as `program.rows`).
- **cols** - same as `screen.width`. - **cols** - same as `screen.width`.
- **rows** - same as `screen.height`. - **rows** - same as `screen.height`.
- **left**, **rleft** - left offset, always zero. - **left** - relative left offset, always zero.
- **right**, **rright** - right offset, always zero. - **right** - relative right offset, always zero.
- **top**, **rtop** - top offset, always zero. - **top** - relative top offset, always zero.
- **bottom**, **rbottom** - bottom offset, always zero. - **bottom** - relative bottom offset, always zero.
- **aleft** - absolute left offset, always zero.
- **aright** - absolute right offset, always zero.
- **atop** - absolute top offset, always zero.
- **abottom** - absolute bottom offset, always zero.
- **grabKeys** - whether the focused element grabs all keypresses. - **grabKeys** - whether the focused element grabs all keypresses.
- **lockKeys** - prevent keypresses from being received by any element. - **lockKeys** - prevent keypresses from being received by any element.
- **hover** - the currently hovered element. only set if mouse events are bound. - **hover** - the currently hovered element. only set if mouse events are bound.
@ -380,14 +384,14 @@ The base element.
- **bold, underline** - attributes. - **bold, underline** - attributes.
- **width** - calculated width. - **width** - calculated width.
- **height** - calculated height. - **height** - calculated height.
- **left** - calculated absolute left offset. - **left** - calculated relative left offset.
- **right** - calculated absolute right offset. - **right** - calculated relative right offset.
- **top** - calculated absolute top offset. - **top** - calculated relative top offset.
- **bottom** - calculated absolute bottom offset. - **bottom** - calculated relative bottom offset.
- **rleft** - calculated relative left offset. - **aleft** - calculated absolute left offset.
- **rright** - calculated relative right offset. - **aright** - calculated absolute right offset.
- **rtop** - calculated relative top offset. - **atop** - calculated absolute top offset.
- **rbottom** - calculated relative bottom offset. - **abottom** - calculated absolute bottom offset.
##### Events: ##### Events:

141
lib/widget.js
View File

@ -290,10 +290,10 @@ function Screen(options) {
this.renders = 0; this.renders = 0;
this.position = { this.position = {
left: this.left = this.rleft = 0, left: this.left = this.aleft = this.rleft = 0,
right: this.right = this.rright = 0, right: this.right = this.aright = this.rright = 0,
top: this.top = this.rtop = 0, top: this.top = this.atop = this.rtop = 0,
bottom: this.bottom = this.rbottom = 0 bottom: this.bottom = this.abottom = this.rbottom = 0
//get height() { return self.height; }, //get height() { return self.height; },
//get width() { return self.width; } //get width() { return self.width; }
}; };
@ -1488,7 +1488,7 @@ Screen.prototype._focus = function(self, old) {
// NOTE: This is different from the other "visible" values - it needs the // NOTE: This is different from the other "visible" values - it needs the
// visible height of the scrolling element itself, not the element within // visible height of the scrolling element itself, not the element within
// it. // it.
var visible = self.screen.height - el.top - el.itop - el.bottom - el.ibottom; var visible = self.screen.height - el.atop - el.itop - el.abottom - el.ibottom;
if (self.rtop < el.childBase) { if (self.rtop < el.childBase) {
el.scrollTo(self.rtop); el.scrollTo(self.rtop);
self.screen.render(); self.screen.render();
@ -2780,12 +2780,12 @@ Element.prototype._getPos = function() {
assert.ok(pos); assert.ok(pos);
if (pos.left != null) return pos; if (pos.aleft != null) return pos;
pos.left = pos.xi; pos.aleft = pos.xi;
pos.top = pos.yi; pos.atop = pos.yi;
pos.right = this.screen.cols - pos.xl; pos.aright = this.screen.cols - pos.xl;
pos.bottom = this.screen.rows - pos.yl; pos.abottom = this.screen.rows - pos.yl;
pos.width = pos.xl - pos.xi; pos.width = pos.xl - pos.xi;
pos.height = pos.yl - pos.yi; pos.height = pos.yl - pos.yi;
@ -2908,10 +2908,10 @@ Element.prototype._getLeft = function(get) {
} }
} }
return (parent.left || 0) + left; return (parent.aleft || 0) + left;
}; };
Element.prototype.__defineGetter__('left', function() { Element.prototype.__defineGetter__('aleft', function() {
return this._getLeft(false); return this._getLeft(false);
}); });
@ -2929,7 +2929,7 @@ Element.prototype._getRight = function(get) {
return right; return right;
} }
right = (parent.right || 0) + (this.position.right || 0); right = (parent.aright || 0) + (this.position.right || 0);
if (this.screen.autoPadding) { if (this.screen.autoPadding) {
// if (this.position.right != null) { // if (this.position.right != null) {
@ -2940,7 +2940,7 @@ Element.prototype._getRight = function(get) {
return right; return right;
}; };
Element.prototype.__defineGetter__('right', function() { Element.prototype.__defineGetter__('aright', function() {
return this._getRight(false); return this._getRight(false);
}); });
@ -2969,10 +2969,10 @@ Element.prototype._getTop = function(get) {
} }
} }
return (parent.top || 0) + top; return (parent.atop || 0) + top;
}; };
Element.prototype.__defineGetter__('top', function() { Element.prototype.__defineGetter__('atop', function() {
return this._getTop(false); return this._getTop(false);
}); });
@ -2990,7 +2990,7 @@ Element.prototype._getBottom = function(get) {
return bottom; return bottom;
} }
bottom = (parent.bottom || 0) + (this.position.bottom || 0); bottom = (parent.abottom || 0) + (this.position.bottom || 0);
if (this.screen.autoPadding) { if (this.screen.autoPadding) {
// if (this.position.bottom != null) { // if (this.position.bottom != null) {
@ -3001,24 +3001,24 @@ Element.prototype._getBottom = function(get) {
return bottom; return bottom;
}; };
Element.prototype.__defineGetter__('bottom', function() { Element.prototype.__defineGetter__('abottom', function() {
return this._getBottom(false); return this._getBottom(false);
}); });
Element.prototype.__defineGetter__('rleft', function() { Element.prototype.__defineGetter__('rleft', function() {
return this.left - this.parent.left; return this.aleft - this.parent.aleft;
}); });
Element.prototype.__defineGetter__('rright', function() { Element.prototype.__defineGetter__('rright', function() {
return this.right - this.parent.right; return this.aright - this.parent.aright;
}); });
Element.prototype.__defineGetter__('rtop', function() { Element.prototype.__defineGetter__('rtop', function() {
return this.top - this.parent.top; return this.atop - this.parent.atop;
}); });
Element.prototype.__defineGetter__('rbottom', function() { Element.prototype.__defineGetter__('rbottom', function() {
return this.bottom - this.parent.bottom; return this.abottom - this.parent.abottom;
}); });
/** /**
@ -3026,7 +3026,7 @@ Element.prototype.__defineGetter__('rbottom', function() {
*/ */
// NOTE: // NOTE:
// For right, bottom, rright, and rbottom: // For aright, abottom, right, and bottom:
// If position.bottom is null, we could simply set top instead. // If position.bottom is null, we could simply set top instead.
// But it wouldn't replicate bottom behavior appropriately if // But it wouldn't replicate bottom behavior appropriately if
// the parent was resized, etc. // the parent was resized, etc.
@ -3044,7 +3044,7 @@ Element.prototype.__defineSetter__('height', function(val) {
return this.position.height = val; return this.position.height = val;
}); });
Element.prototype.__defineSetter__('left', function(val) { Element.prototype.__defineSetter__('aleft', function(val) {
if (typeof val === 'string') { if (typeof val === 'string') {
if (val === 'center') { if (val === 'center') {
val = this.screen.width / 2 | 0; val = this.screen.width / 2 | 0;
@ -3054,22 +3054,22 @@ Element.prototype.__defineSetter__('left', function(val) {
val = this.screen.width * val | 0; val = this.screen.width * val | 0;
} }
} }
val -= this.parent.left; val -= this.parent.aleft;
if (this.position.left === val) return; if (this.position.left === val) return;
this.emit('move'); this.emit('move');
this.clearPos(); this.clearPos();
return this.position.left = val; return this.position.left = val;
}); });
Element.prototype.__defineSetter__('right', function(val) { Element.prototype.__defineSetter__('aright', function(val) {
val -= this.parent.right; val -= this.parent.aright;
if (this.position.right === val) return; if (this.position.right === val) return;
this.emit('move'); this.emit('move');
this.clearPos(); this.clearPos();
return this.position.right = val; return this.position.right = val;
}); });
Element.prototype.__defineSetter__('top', function(val) { Element.prototype.__defineSetter__('atop', function(val) {
if (typeof val === 'string') { if (typeof val === 'string') {
if (val === 'center') { if (val === 'center') {
val = this.screen.height / 2 | 0; val = this.screen.height / 2 | 0;
@ -3079,15 +3079,15 @@ Element.prototype.__defineSetter__('top', function(val) {
val = this.screen.height * val | 0; val = this.screen.height * val | 0;
} }
} }
val -= this.parent.top; val -= this.parent.atop;
if (this.position.top === val) return; if (this.position.top === val) return;
this.emit('move'); this.emit('move');
this.clearPos(); this.clearPos();
return this.position.top = val; return this.position.top = val;
}); });
Element.prototype.__defineSetter__('bottom', function(val) { Element.prototype.__defineSetter__('abottom', function(val) {
val -= this.parent.bottom; val -= this.parent.abottom;
if (this.position.bottom === val) return; if (this.position.bottom === val) return;
this.emit('move'); this.emit('move');
this.clearPos(); this.clearPos();
@ -3151,6 +3151,42 @@ Element.prototype.__defineGetter__('tpadding', function() {
+ this.padding.right + this.padding.bottom; + this.padding.right + this.padding.bottom;
}); });
/**
* Relative coordinates as default properties
*/
Element.prototype.__defineGetter__('left', function() {
return this.rleft;
});
Element.prototype.__defineGetter__('right', function() {
return this.rright;
});
Element.prototype.__defineGetter__('top', function() {
return this.rtop;
});
Element.prototype.__defineGetter__('bottom', function() {
return this.rbottom;
});
Element.prototype.__defineSetter__('left', function(val) {
return this.rleft = val;
});
Element.prototype.__defineSetter__('right', function(val) {
return this.rright = val;
});
Element.prototype.__defineSetter__('top', function(val) {
return this.rtop = val;
});
Element.prototype.__defineSetter__('bottom', function(val) {
return this.rbottom = val;
});
/** /**
* Rendering - here be dragons * Rendering - here be dragons
*/ */
@ -3534,7 +3570,6 @@ Element.prototype.render = function() {
, battr , battr
, dattr , dattr
, c , c
, rtop
, visible , visible
, i , i
, bch = this.ch; , bch = this.ch;
@ -6484,7 +6519,7 @@ Listbar.prototype.addItem =
Listbar.prototype.appendItem = function(item, callback) { Listbar.prototype.appendItem = function(item, callback) {
var self = this var self = this
, prev = this.items[this.items.length - 1] , prev = this.items[this.items.length - 1]
, drawn = prev ? prev.left + prev.width : 0 , drawn = prev ? prev.aleft + prev.width : 0
, cmd , cmd
, title , title
, len; , len;
@ -6823,10 +6858,10 @@ Terminal.prototype.bootstrap = function() {
this.screen.on('mouse', function(data) { this.screen.on('mouse', function(data) {
if (self.screen.focused !== self) return; if (self.screen.focused !== self) return;
if (data.x < self.left + self.ileft) return; if (data.x < self.aleft + self.ileft) return;
if (data.y < self.top + self.itop) return; if (data.y < self.atop + self.itop) return;
if (data.x > self.left - self.ileft + self.width) return; if (data.x > self.aleft - self.ileft + self.width) return;
if (data.y > self.top - self.itop + self.height) return; if (data.y > self.atop - self.itop + self.height) return;
if (self.term.x10Mouse if (self.term.x10Mouse
|| self.term.vt200Mouse || self.term.vt200Mouse
@ -6841,8 +6876,8 @@ Terminal.prototype.bootstrap = function() {
} }
var b = data.raw[0] var b = data.raw[0]
, x = data.x - self.left , x = data.x - self.aleft
, y = data.y - self.top , y = data.y - self.atop
, s; , s;
if (self.term.urxvtMouse) { if (self.term.urxvtMouse) {
@ -7184,20 +7219,20 @@ Image.prototype.setImage = function(img, callback) {
var width = self.width * ratio.tw | 0 var width = self.width * ratio.tw | 0
, height = self.height * ratio.th | 0 , height = self.height * ratio.th | 0
, left = self.left * ratio.tw | 0 , aleft = self.aleft * ratio.tw | 0
, top = self.top * ratio.th | 0; , atop = self.atop * ratio.th | 0;
var input = '0;1;' var input = '0;1;'
+ left + ';' + aleft + ';'
+ top + ';' + atop + ';'
+ width + ';' + width + ';'
+ height + ';;;;;' + height + ';;;;;'
+ img + img
+ '\n4;\n3;\n'; + '\n4;\n3;\n';
self._props = { self._props = {
left: left, aleft: aleft,
top: top, atop: atop,
width: width, width: width,
height: height height: height
}; };
@ -7234,8 +7269,8 @@ Image.prototype.setImage = function(img, callback) {
&& ratio.th === self._lastSize.th && ratio.th === self._lastSize.th
&& size.width === self._lastSize.width && size.width === self._lastSize.width
&& size.height === self._lastSize.height && size.height === self._lastSize.height
&& self.left === self._lastSize.left && self.aleft === self._lastSize.aleft
&& self.top === self._lastSize.top) { && self.atop === self._lastSize.atop) {
if (!callback) return; if (!callback) return;
return callback(null, success); return callback(null, success);
} }
@ -7245,8 +7280,8 @@ Image.prototype.setImage = function(img, callback) {
th: ratio.th, th: ratio.th,
width: size.width, width: size.width,
height: size.height, height: size.height,
left: self.left, aleft: self.aleft,
top: self.top atop: self.atop
}; };
self.position.width = size.width / ratio.tw | 0; self.position.width = size.width / ratio.tw | 0;
@ -7295,12 +7330,12 @@ Image.prototype.clearImage = function(callback) {
var width = this._props.width + 2 var width = this._props.width + 2
, height = this._props.height + 2 , height = this._props.height + 2
, left = this._props.left , aleft = this._props.aleft
, top = this._props.top; , atop = this._props.atop;
var input = '6;' var input = '6;'
+ left + ';' + aleft + ';'
+ top + ';' + atop + ';'
+ width + ';' + width + ';'
+ height + height
+ '\n4;\n3;\n'; + '\n4;\n3;\n';

26
test/widget-pos.js
View File

@ -38,10 +38,10 @@ var inner = blessed.box({
main.append(inner); main.append(inner);
inner.setContent(inner.content + '\n' + JSON.stringify({ inner.setContent(inner.content + '\n' + JSON.stringify({
left: inner.left, aleft: inner.aleft,
right: inner.right, aright: inner.aright,
top: inner.top, atop: inner.atop,
bottom: inner.bottom, abottom: inner.abottom,
width: inner.width, width: inner.width,
height: inner.height, height: inner.height,
rleft: inner.rleft, rleft: inner.rleft,
@ -53,10 +53,10 @@ inner.setContent(inner.content + '\n' + JSON.stringify({
assert.equal(inner.width, 57); assert.equal(inner.width, 57);
assert.equal(inner.height, 7); assert.equal(inner.height, 7);
assert.equal(inner.left, 4); assert.equal(inner.aleft, 4);
assert.equal(inner.right, 93); assert.equal(inner.aright, 93);
assert.equal(inner.top, 4); assert.equal(inner.atop, 4);
assert.equal(inner.bottom, 8); assert.equal(inner.abottom, 8);
assert.equal(inner.rleft, 2); assert.equal(inner.rleft, 2);
assert.equal(inner.rright, 56); assert.equal(inner.rright, 56);
@ -65,11 +65,11 @@ assert.equal(inner.rbottom, 5);
// Change left to half of the parent width. // Change left to half of the parent width.
inner.rleft = '50%'; inner.rleft = '50%';
assert.equal(inner.left, 59); assert.equal(inner.aleft, 59);
// Change left to half of the screen width. // Change left to half of the screen width.
inner.left = '50%'; inner.aleft = '50%';
assert.equal(inner.left, screen.width / 2 | 0); assert.equal(inner.aleft, screen.width / 2 | 0);
// Test implied height/width. // Test implied height/width.
reset(inner, { reset(inner, {
@ -82,8 +82,8 @@ reset(inner, {
assert.equal(inner.width, 105); assert.equal(inner.width, 105);
assert.equal(inner.height, 4); assert.equal(inner.height, 4);
// Demonstrate the difference between `left: 5`, and `.left = 5` (relative vs. absolute): // Demonstrate the difference between `left: 5`, and `.aleft = 5` (relative vs. absolute):
inner.top = inner.bottom = inner.left = inner.right = 5; inner.atop = inner.abottom = inner.aleft = inner.aright = 5;
assert.equal(inner.width, 144); assert.equal(inner.width, 144);
assert.equal(inner.height, 9); assert.equal(inner.height, 9);

2
test/widget.js
View File

@ -249,5 +249,5 @@ setInterval(function() {
progress.progress(2); progress.progress(2);
screen.render(); screen.render();
setTimeout(fill, 300); setTimeout(fill, 300);
progress.top -= 2; progress.atop -= 2;
})(); })();