example, fix scrollable, cleanup, percentage positions.
This commit is contained in:
Christopher Jeffrey
parent
342f56a822
commit
4c52543f98
293
lib/high.js
293
lib/high.js
|
|
@ -3,11 +3,59 @@
|
|||
* Still in development
|
||||
*/
|
||||
|
||||
/*
|
||||
API Example:
|
||||
This will render a box with ascii borders containing the
|
||||
text 'Hello world!', centered horizontally and vertically.
|
||||
var blessed = require('blessed')
|
||||
, program = blessed()
|
||||
, screen;
|
||||
|
||||
screen = new blessed.Screen({
|
||||
program: program
|
||||
});
|
||||
|
||||
screen.append(new blessed.Text({
|
||||
screen: screen,
|
||||
parent: screen,
|
||||
fg: 3,
|
||||
bg: 5,
|
||||
border: {
|
||||
type: 'ascii',
|
||||
fg: 1
|
||||
},
|
||||
content: 'Hello world!',
|
||||
top: 'center',
|
||||
left: 'center'
|
||||
}));
|
||||
|
||||
screen.render();
|
||||
*/
|
||||
|
||||
/**
|
||||
* Node
|
||||
*/
|
||||
|
||||
function Node(options) {}
|
||||
function Node(options) {
|
||||
this.children = options.children || [];
|
||||
}
|
||||
|
||||
Node.prototype.prepend = function(element) {
|
||||
this.children.unshift(element);
|
||||
};
|
||||
|
||||
Node.prototype.append = function(element) {
|
||||
this.children.push(element);
|
||||
};
|
||||
|
||||
Node.prototype.remove = function(element) {
|
||||
var i = this.children.indexOf(element);
|
||||
if (~i) this.children.splice(i, 1);
|
||||
};
|
||||
|
||||
Node.prototype.detach = function(element) {
|
||||
this.parent.remove(element);
|
||||
};
|
||||
|
||||
/**
|
||||
* Screen
|
||||
|
|
@ -15,6 +63,7 @@ function Node(options) {}
|
|||
|
||||
function Screen(options) {
|
||||
Node.call(this, options);
|
||||
|
||||
this.cols = options.cols;
|
||||
this.rows = options.rows;
|
||||
this.children = options.children || [];
|
||||
|
|
@ -22,7 +71,8 @@ function Screen(options) {
|
|||
this.tput = this.program.tput;
|
||||
this.lines = [];
|
||||
this.dattr = ((0 << 18) | (0x1ff << 9)) | 0x1ff;
|
||||
this.offset = {};
|
||||
this.position = {};
|
||||
|
||||
var x, y;
|
||||
for (y = 0; y < this.rows; y++) {
|
||||
this.lines[y] = [];
|
||||
|
|
@ -173,24 +223,24 @@ function Element(options) {
|
|||
Node.call(this, options);
|
||||
this.screen = options.screen;
|
||||
this.parent = options.parent || (function(){throw Error('No parent.')})();
|
||||
this.offset = {
|
||||
this.position = {
|
||||
left: options.left || 0,
|
||||
right: options.right || 0,
|
||||
top: options.top || 0,
|
||||
bottom: options.bottom || 0
|
||||
bottom: options.bottom || 0,
|
||||
width: options.width || null,
|
||||
height: options.height || null
|
||||
};
|
||||
this.width = options.width || null;
|
||||
this.height = options.height || null;
|
||||
|
||||
/*
|
||||
if (!this.right) {
|
||||
this.width = options.width;
|
||||
/*
|
||||
if (!this.position.right) {
|
||||
this.position.width = options.width;
|
||||
}
|
||||
|
||||
if (!this.bottom) {
|
||||
this.height = options.height;
|
||||
if (!this.position.bottom) {
|
||||
this.position.height = options.height;
|
||||
}
|
||||
*/
|
||||
*/
|
||||
|
||||
this.fg = options.fg || 0x1ff;
|
||||
this.bg = options.bg || 0x1ff;
|
||||
|
|
@ -210,37 +260,48 @@ function Element(options) {
|
|||
|
||||
Element.prototype.__proto__ = Node.prototype;
|
||||
|
||||
Element.prototype.prepend = function(element) {
|
||||
this.children.unshift(element);
|
||||
};
|
||||
|
||||
Element.prototype.append = function(element) {
|
||||
this.children.push(element);
|
||||
};
|
||||
|
||||
Element.prototype.remove = function(element) {
|
||||
var i = this.children.indexOf(element);
|
||||
if (~i) this.children.splice(i, 1);
|
||||
};
|
||||
|
||||
Element.prototype.detach = function(element) {
|
||||
this.parent.remove(element);
|
||||
};
|
||||
|
||||
Element.prototype.__defineGetter__('left', function() {
|
||||
return (this.parent.left || 0) + this.offset.left;
|
||||
var left = this.position.left;
|
||||
if (typeof left === 'string') {
|
||||
if (left === 'center') left = '50%';
|
||||
left = +left.slice(0, -1) / 100;
|
||||
var len = Math.min(this.content.length, this.screen.cols);
|
||||
left = (this.screen.cols - len) * left | 0;
|
||||
}
|
||||
return (this.parent.left || 0) + left;
|
||||
});
|
||||
|
||||
Element.prototype.__defineGetter__('right', function() {
|
||||
return (this.parent.right || 0) + this.offset.right;
|
||||
return (this.parent.right || 0) + this.position.right;
|
||||
});
|
||||
|
||||
Element.prototype.__defineGetter__('top', function() {
|
||||
return (this.parent.top || 0) + this.offset.top;
|
||||
var top = this.position.top;
|
||||
if (typeof top === 'string') {
|
||||
if (top === 'center') top = '50%';
|
||||
top = +top.slice(0, -1) / 100;
|
||||
var len = Math.min(this.content.length, this.screen.cols);
|
||||
top = (this.screen.cols - len) * top | 0;
|
||||
}
|
||||
return (this.parent.top || 0) + top;
|
||||
});
|
||||
|
||||
Element.prototype.__defineGetter__('bottom', function() {
|
||||
return (this.parent.bottom || 0) + this.offset.bottom;
|
||||
return (this.parent.bottom || 0) + this.position.bottom;
|
||||
});
|
||||
|
||||
Element.prototype.__defineGetter__('width', function() {
|
||||
var width = this.position.width;
|
||||
if (!width) width = this.screen.cols - this.right;
|
||||
width -= this.left;
|
||||
return width;
|
||||
});
|
||||
|
||||
Element.prototype.__defineGetter__('height', function() {
|
||||
var height = this.position.height;
|
||||
if (!height) height = this.screen.rows - this.bottom;
|
||||
height -= this.top;
|
||||
return height;
|
||||
});
|
||||
|
||||
/**
|
||||
|
|
@ -265,127 +326,14 @@ Box.prototype.render = function() {
|
|||
, ci = 0
|
||||
, cl = this.content.length;
|
||||
|
||||
if (this.width) {
|
||||
xl = this.width;
|
||||
if (this.position.width) {
|
||||
xl = this.position.width;
|
||||
}
|
||||
|
||||
if (this.height) {
|
||||
yl = this.height;
|
||||
if (this.position.height) {
|
||||
yl = this.position.height;
|
||||
}
|
||||
|
||||
/*
|
||||
if (this.border) {
|
||||
attr = ((this.border.bold << 18) + (this.border.underline << 18)) | (this.border.fg << 9) | this.border.bg;
|
||||
if (this.border.type === 'ascii') {
|
||||
var i = xi, l = xl - 1;
|
||||
for (; i < xl; i++) {
|
||||
cell = lines[yi][i];
|
||||
ch = '─';
|
||||
if (attr !== cell[0] || ch !== cell[1]) {
|
||||
cell[0] = attr;
|
||||
cell[1] = ch;
|
||||
lines[yi].dirty = true;
|
||||
}
|
||||
|
||||
cell = lines[yl - 1][i];
|
||||
ch = '─';
|
||||
if (attr !== cell[0] || ch !== cell[1]) {
|
||||
cell[0] = attr;
|
||||
cell[1] = ch;
|
||||
lines[yl - 1].dirty = true;
|
||||
}
|
||||
}
|
||||
|
||||
var i = yi, l = yl - 1;
|
||||
for (; i < yl; i++) {
|
||||
cell = lines[i][xi];
|
||||
ch = '─';
|
||||
if (attr !== cell[0] || ch !== cell[1]) {
|
||||
cell[0] = attr;
|
||||
cell[1] = ch;
|
||||
lines[i].dirty = true;
|
||||
}
|
||||
|
||||
cell = lines[i][xl - 1];
|
||||
ch = '─';
|
||||
}
|
||||
|
||||
cell = lines[yi][xi];
|
||||
ch = '┌';
|
||||
if (attr !== cell[0] || ch !== cell[1]) {
|
||||
cell[0] = attr;
|
||||
cell[1] = ch;
|
||||
lines[yi].dirty = true;
|
||||
}
|
||||
|
||||
cell = lines[yi][xl - 1];
|
||||
ch = '┐';
|
||||
if (attr !== cell[0] || ch !== cell[1]) {
|
||||
cell[0] = attr;
|
||||
cell[1] = ch;
|
||||
lines[yi].dirty = true;
|
||||
}
|
||||
|
||||
cell = lines[yl - 1][xi];
|
||||
ch = '└';
|
||||
if (attr !== cell[0] || ch !== cell[1]) {
|
||||
cell[0] = attr;
|
||||
cell[1] = ch;
|
||||
lines[yl - 1].dirty = true;
|
||||
}
|
||||
|
||||
cell = lines[yl - 1][xl - 1];
|
||||
ch = '┘';
|
||||
if (attr !== cell[0] || ch !== cell[1]) {
|
||||
cell[0] = attr;
|
||||
cell[1] = ch;
|
||||
lines[yl - 1].dirty = true;
|
||||
}
|
||||
} else if (this.border.type === 'bg') {
|
||||
var i = xi, l = xl - 1;
|
||||
for (; i < xl; i++) {
|
||||
cell = lines[yi][i];
|
||||
ch = ' ';
|
||||
if (attr !== cell[0] || ch !== cell[1]) {
|
||||
cell[0] = attr;
|
||||
cell[1] = ch;
|
||||
lines[yi].dirty = true;
|
||||
}
|
||||
|
||||
cell = lines[yl - 1][i];
|
||||
ch = ' ';
|
||||
if (attr !== cell[0] || ch !== cell[1]) {
|
||||
cell[0] = attr;
|
||||
cell[1] = ch;
|
||||
lines[yl - 1].dirty = true;
|
||||
}
|
||||
}
|
||||
var i = yi, l = yl - 1;
|
||||
for (; i < yl; i++) {
|
||||
cell = lines[i][xi];
|
||||
ch = ' ';
|
||||
if (attr !== cell[0] || ch !== cell[1]) {
|
||||
cell[0] = attr;
|
||||
cell[1] = ch;
|
||||
lines[i].dirty = true;
|
||||
}
|
||||
|
||||
cell = lines[i][xl - 1];
|
||||
ch = ' ';
|
||||
if (attr !== cell[0] || ch !== cell[1]) {
|
||||
cell[0] = attr;
|
||||
cell[1] = ch;
|
||||
lines[i].dirty = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
xi++;
|
||||
yi++;
|
||||
xl--;
|
||||
yl--;
|
||||
}
|
||||
*/
|
||||
|
||||
for (yi = this.top; yi < yl; yi++) {
|
||||
for (xi = this.left; xi < xl; xi++) {
|
||||
if (this.border && (yi === this.top || xi === this.left || yi === yl - 1 || xi === xl - 1)) {
|
||||
|
|
@ -445,12 +393,12 @@ Text.prototype.render = function() {
|
|||
, ci = 0
|
||||
, cl = this.content.length;
|
||||
|
||||
if (this.width) {
|
||||
xl = this.width;
|
||||
if (this.position.width) {
|
||||
xl = this.position.width;
|
||||
}
|
||||
|
||||
if (this.height) {
|
||||
yl = this.height;
|
||||
if (this.position.height) {
|
||||
yl = this.position.height;
|
||||
}
|
||||
|
||||
for (yi = this.top; yi < yl; yi++) {
|
||||
|
|
@ -506,7 +454,7 @@ ScrollableBox.prototype.render = function() {
|
|||
|
||||
function List(options) {
|
||||
ScrollableBox.call(this, options);
|
||||
this.items = [];
|
||||
this.children = [];
|
||||
this.selected = 0;
|
||||
|
||||
this.selectedBg = options.selectedBg;
|
||||
|
|
@ -514,18 +462,18 @@ function List(options) {
|
|||
this.selectedBold = options.selectedBold;
|
||||
this.selectedUnderline = options.selectedUnderline;
|
||||
|
||||
if (options.items) {
|
||||
options.items.forEach(this.add.bind(this));
|
||||
if (options.children) {
|
||||
options.children.forEach(this.add.bind(this));
|
||||
}
|
||||
}
|
||||
|
||||
List.prototype.__proto__ = ScrollableBox.prototype;
|
||||
|
||||
List.prototype.add = function(item) {
|
||||
this.items.push(new Text({
|
||||
this.append(new Text({
|
||||
screen: this.screen,
|
||||
parent: this,
|
||||
top: this.items.length,
|
||||
top: this.children.length,
|
||||
content: item.content,
|
||||
height: 1
|
||||
}));
|
||||
|
|
@ -533,32 +481,37 @@ List.prototype.add = function(item) {
|
|||
|
||||
List.prototype.select = function(index) {
|
||||
if (typeof index === 'object') {
|
||||
index = this.items.indexOf(index);
|
||||
index = this.children.indexOf(index);
|
||||
}
|
||||
if (this.selectedBg) {
|
||||
this.items[this.selected].bg = this.bg;
|
||||
this.items[index].bg = this.selectedBg;
|
||||
this.children[this.selected].bg = this.bg;
|
||||
this.children[index].bg = this.selectedBg;
|
||||
}
|
||||
if (this.selectedFg) {
|
||||
this.items[this.selected].fg = this.fg;
|
||||
this.items[index].fg = this.selectedFg;
|
||||
this.children[this.selected].fg = this.fg;
|
||||
this.children[index].fg = this.selectedFg;
|
||||
}
|
||||
if (this.selectedBold != null) {
|
||||
this.items[this.selected].bold = this.bold;
|
||||
this.items[index].bold = this.selectedBold;
|
||||
this.children[this.selected].bold = this.bold;
|
||||
this.children[index].bold = this.selectedBold;
|
||||
}
|
||||
if (this.selectedUnderline != null) {
|
||||
this.items[this.selected].underline = this.underline;
|
||||
this.items[index].underline = this.selectedUnderline;
|
||||
this.children[this.selected].underline = this.underline;
|
||||
this.children[index].underline = this.selectedUnderline;
|
||||
}
|
||||
this.selected = index;
|
||||
|
||||
var height = this.height;
|
||||
if (this.selected >= height) {
|
||||
this.scroll(this.selected - height);
|
||||
}
|
||||
};
|
||||
|
||||
List.prototype.remove = function(index) {
|
||||
if (typeof index === 'object') {
|
||||
index = this.items.indexOf(index);
|
||||
index = this.children.indexOf(index);
|
||||
}
|
||||
this.items.splice(index, 1);
|
||||
this.children.splice(index, 1);
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
|
|||
Loading…
Reference in New Issue