example, fix scrollable, cleanup, percentage positions.

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) {
+  if (!this.position.right) {
-    this.width = options.width;
+    this.position.width = options.width;
   }
 
-  if (!this.bottom) {
+  if (!this.position.bottom) {
-    this.height = options.height;
+    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) {
+  if (this.position.width) {
-    xl = this.width;
+    xl = this.position.width;
   }
 
-  if (this.height) {
+  if (this.position.height) {
-    yl = this.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) {
+  if (this.position.width) {
-    xl = this.width;
+    xl = this.position.width;
   }
 
-  if (this.height) {
+  if (this.position.height) {
-    yl = this.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) {
+  if (options.children) {
-    options.items.forEach(this.add.bind(this));
+    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.children[this.selected].bg = this.bg;
-    this.items[index].bg = this.selectedBg;
+    this.children[index].bg = this.selectedBg;
   }
   if (this.selectedFg) {
-    this.items[this.selected].fg = this.fg;
+    this.children[this.selected].fg = this.fg;
-    this.items[index].fg = this.selectedFg;
+    this.children[index].fg = this.selectedFg;
   }
   if (this.selectedBold != null) {
-    this.items[this.selected].bold = this.bold;
+    this.children[this.selected].bold = this.bold;
-    this.items[index].bold = this.selectedBold;
+    this.children[index].bold = this.selectedBold;
   }
   if (this.selectedUnderline != null) {
-    this.items[this.selected].underline = this.underline;
+    this.children[this.selected].underline = this.underline;
-    this.items[index].underline = this.selectedUnderline;
+    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);
 };
 
 /**