fixes. scrollble work.

lib/high-test.js

@@ -68,11 +68,33 @@ screen.append(new blessed.List({
     { content: 'one' },
     { content: 'two' },
     { content: 'three' },
-    { content: 'four' }
+    { content: 'four' },
+    { content: 'five' },
+    { content: 'six' },
+    { content: 'seven' },
+    { content: 'eight' },
+    { content: 'nine' },
+    { content: 'ten' }
   ]
 }));
 
+screen.children[0].prepend(new blessed.Text({
+  screen: screen,
+  parent: screen.children[0],
+  left: 2,
+  content: ' My list '
+}));
+
 program.on('keypress', function(ch, key) {
+  if (key.name === 'up') {
+    screen.children[0].up();
+    screen.render();
+    return;
+  } else if (key.name === 'down') {
+    screen.children[0].down();
+    screen.render();
+    return;
+  }
   if (key.name === 'escape' || key.name === 'q') {
     program.disableMouse();
     program.clear();

lib/high.js

@@ -291,21 +291,10 @@ Element.prototype.__proto__ = Node.prototype;
 Element.prototype.__defineGetter__('left', function() {
   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);
+    var len = Math.min(this.width, this.parent.width);
-    //left = (this.screen.cols - len) * left | 0;
-    left = (this.parent.width - len) * left | 0;
-  }
-*/
-
-  if (typeof left === 'string') {
-    if (left === 'center') left = '50%';
-    left = +left.slice(0, -1) / 100;
-    var len = Math.min(this.width, this.screen.cols);
-    //left = (this.screen.cols - len) * left | 0;
     left = (this.parent.width - len) * left | 0;
   }
 
@@ -318,23 +307,11 @@ Element.prototype.__defineGetter__('right', function() {
 
 Element.prototype.__defineGetter__('top', function() {
   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;
-    var len = (this.content.length - this.left) / this.screen.cols;
-    //top = (this.screen.rows - len) * top | 0;
-    top = (this.parent.height - len) * top | 0;
-  }
-*/
 
   if (typeof top === 'string') {
     if (top === 'center') top = '50%';
     top = +top.slice(0, -1) / 100;
-    var len = Math.min(this.height, this.screen.rows);
+    var len = Math.min(this.height, this.parent.height);
-    //top = (this.screen.rows - len) * top | 0;
     top = (this.parent.height - len) * top | 0;
   }
 
@@ -350,13 +327,17 @@ Element.prototype.__defineGetter__('width', function() {
   if (typeof width === 'string') {
     if (width === 'half') width = '50%';
     width = +width.slice(0, -1) / 100;
-    //return this.screen.cols * width | 0;
     return this.parent.width * width | 0;
   }
   if (!width) {
-    //width = this.screen.cols - this.position.right - this.position.left;
+    // Problem if .left is 'center', we can't calculate the width
-    width = this.parent.width - this.position.right - this.position.left;
+    var left = this.position.left;
-    width = width || 0;
+    if (typeof left === 'string') {
+      if (left === 'center') left = '50%';
+      left = +left.slice(0, -1) / 100;
+      left = this.parent.width * left | 0;
+    }
+    width = this.parent.width - this.position.right - left;
   }
   return width;
 });
@@ -366,17 +347,55 @@ Element.prototype.__defineGetter__('height', function() {
   if (typeof height === 'string') {
     if (height === 'half') height = '50%';
     height = +height.slice(0, -1) / 100;
-    //return this.screen.rows * height | 0;
     return this.parent.height * height | 0;
   }
   if (!height) {
-    //height = this.screen.rows - this.position.bottom - this.position.top;
+    // Problem if .top is 'center', we can't calculate the height
-    height = this.parent.height - this.position.bottom - this.position.top;
+    var top = this.position.top;
-    height = height || 0;
+    if (typeof top === 'string') {
+      if (top === 'center') top = '50%';
+      top = +top.slice(0, -1) / 100;
+      top = this.parent.height * top | 0;
+    }
+    height = this.parent.height - this.position.bottom - top;
   }
   return height;
 });
 
+Element.prototype.__defineGetter__('rleft', function() {
+  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.width, this.parent.width);
+    left = len * left | 0;
+  }
+
+  return left;
+});
+
+Element.prototype.__defineGetter__('rright', function() {
+  return this.position.right;
+});
+
+Element.prototype.__defineGetter__('rtop', function() {
+  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.height, this.parent.height);
+    top = len * top | 0;
+  }
+
+  return top;
+});
+
+Element.prototype.__defineGetter__('rbottom', function() {
+  return this.position.bottom;
+});
+
 /**
  * Box
  */
@@ -476,11 +495,6 @@ Text.prototype.render = function() {
     , ci = 0
     , cl = this.content.length;
 
-  if (this.full) {
-    this.position.width = '100%';
-    this.position.width = this.width - 4; // TODO: FIX
-  }
-
   if (this.position.width) {
     xl = xi + this.width;
   }
@@ -489,6 +503,14 @@ Text.prototype.render = function() {
     yl = yi + this.height;
   }
 
+  if (this.full) {
+    xl = xi + this.parent.width - (this.parent.border ? 2 : 0) - this.rleft;
+  }
+
+  //if (this.parent.childOffset) {
+  //  yi -= this.parent.childOffset;
+  //}
+
   var ended = -1;
 
   for (yi = this.top; yi < yl; yi++) {
@@ -536,7 +558,7 @@ ScrollableBox.prototype.scroll = function(offset) {
   this.childOffset += offset;
   if (this.childOffset < 0) {
     this.childOffset = 0;
-  } else if (this.childOffset >= this.children.length) {
+  } else if (this.childOffset > this.children.length - 1) {
     this.childOffset = this.children.length - 1;
   }
 };
@@ -544,7 +566,8 @@ ScrollableBox.prototype.scroll = function(offset) {
 ScrollableBox.prototype._render = ScrollableBox.prototype.render;
 ScrollableBox.prototype.render = function() {
   var children = this.children;
-  this.children = this.children.slice(this.childOffset);
+  this.children = this.children.slice(this.childOffset,
+    this.childOffset + this.height - (this.border ? 1 : 0));
   this._render();
   this.children = children;
 };
@@ -555,7 +578,8 @@ ScrollableBox.prototype.render = function() {
 
 function List(options) {
   ScrollableBox.call(this, options);
-  this.children = options.children || [];
+
+  this.items = [];
   this.selected = 0;
 
   this.selectedBg = options.selectedBg || -1;
@@ -568,59 +592,121 @@ function List(options) {
 
   if (options.items) {
     options.items.forEach(this.add.bind(this));
-    this.select(this.selected);
+  }
+
+  if (this.children.length) {
+    this.select(0);
   }
 }
 
 List.prototype.__proto__ = ScrollableBox.prototype;
 
 List.prototype.add = function(item) {
-  this.append(new Text({
+  var item = new Text({
     screen: this.screen,
     parent: this,
+    fg: this.fg,
+    bg: this.bg,
     content: item.content,
     top: this.children.length + 1,
-    left: 2,
+    left: (this.border ? 1 : 0) + 1,
-    full: true
+    full: true,
-    //height: 1 // TODO: FIX
+    height: 1
-  }));
+  });
+  this.append(item);
+  this.items.push(item);
+};
+
+List.prototype._remove = List.prototype.remove;
+List.prototype.remove = function(child) {
+  if (typeof child === 'number') {
+    child = this.children[child];
+  }
+  var i = this.items.indexOf(child);
+  if (~i) this.items.splice(i, 1);
+  this._remove(child);
 };
 
 List.prototype.select = function(index) {
+  if (!this.items.length) return;
+
   if (typeof index === 'object') {
-    index = this.children.indexOf(index);
+    index = this.items.indexOf(index);
   }
+
+  if (index < 0) index = 0;
+  else if (index >= this.items.length) index = this.items.length - 1;
+
+  if (this.selected === index && this._listInitialized) return;
+  this._listInitialized = true;
+
   if (this.selectedBg) {
-    this.children[this.selected].bg = this.bg;
+    this.items[this.selected].bg = this.bg;
-    this.children[index].bg = this.selectedBg;
+    this.items[index].bg = this.selectedBg;
   }
+
   if (this.selectedFg) {
-    this.children[this.selected].fg = this.fg;
+    this.items[this.selected].fg = this.fg;
-    this.children[index].fg = this.selectedFg;
+    this.items[index].fg = this.selectedFg;
   }
+
   if (this.selectedBold != null) {
-    this.children[this.selected].bold = this.bold;
+    this.items[this.selected].bold = this.bold;
-    this.children[index].bold = this.selectedBold;
+    this.items[index].bold = this.selectedBold;
   }
+
   if (this.selectedUnderline != null) {
-    this.children[this.selected].underline = this.underline;
+    this.items[this.selected].underline = this.underline;
-    this.children[index].underline = this.selectedUnderline;
+    this.items[index].underline = this.selectedUnderline;
   }
+
   this.selected = index;
 
-  var height = this.height;
+  // Find the number of non-item children preceding the items.
+  var self = this;
+  var sawNon = false;
+  var children = this.children.filter(function(c, i) {
+    if (sawNon) return;
+    if (~self.items.indexOf(c)) {
+      sawNon = true;
+      return;
+    }
+    return !self.border || c.position.top > 0;
+  }).length;
+
+  //var height = this.height - (this.children.length - this.items.length);
+  var height = this.height - children;
   if (this.selected >= height) {
     this.scroll(this.selected - height);
   }
 };
 
-List.prototype.remove = function(index) {
+List.prototype.move = function(offset) {
-  if (typeof index === 'object') {
+  this.select(this.selected + offset);
-    index = this.children.indexOf(index);
-  }
-  this.children.splice(index, 1);
 };
 
+List.prototype.up = function(offset) {
+  this.move(-(offset || 1));
+};
+
+List.prototype.down = function(offset) {
+  this.move(offset || 1);
+};
+
+//List.prototype.remove = function(index) {
+//  if (typeof index === 'object') {
+//    index = this.children.indexOf(index);
+//  }
+//  this.children.splice(index, 1);
+//};
+
+/*
+List.prototype._render = List.prototype.render;
+List.prototype.render = function() {
+  this._render();
+};
+*/
+
 /**
  * Input
  */