readme. move Box methods onto Element. add clearBaseLine and getContent.
This commit is contained in:
parent
31030113cf
commit
2f7967031e
48
README.md
48
README.md
|
@ -277,7 +277,7 @@ The base element.
|
||||||
- **bold, underline** - border attributes.
|
- **bold, underline** - border attributes.
|
||||||
- **style** - contains attributes (e.g. `fg/bg/underline`). see above.
|
- **style** - contains attributes (e.g. `fg/bg/underline`). see above.
|
||||||
- **position** - raw width, height, and offsets.
|
- **position** - raw width, height, and offsets.
|
||||||
- **content** - text content.
|
- **content** - raw text content.
|
||||||
- **hidden** - whether the element is hidden or not.
|
- **hidden** - whether the element is hidden or not.
|
||||||
- **visible** - whether the element is visible or not.
|
- **visible** - whether the element is visible or not.
|
||||||
- **detached** - whether the element is attached to a screen in its ancestry
|
- **detached** - whether the element is attached to a screen in its ancestry
|
||||||
|
@ -313,7 +313,6 @@ The base element.
|
||||||
|
|
||||||
- inherits all from Node.
|
- inherits all from Node.
|
||||||
- **render()** - write content and children to the screen buffer.
|
- **render()** - write content and children to the screen buffer.
|
||||||
- **setContent(text)** - set the content.
|
|
||||||
- **hide()** - hide element.
|
- **hide()** - hide element.
|
||||||
- **show()** - show element.
|
- **show()** - show element.
|
||||||
- **toggle()** - toggle hidden/shown.
|
- **toggle()** - toggle hidden/shown.
|
||||||
|
@ -325,6 +324,42 @@ The base element.
|
||||||
- **onScreenEvent(type, listener)** - same as`el.on('screen', ...)` except this
|
- **onScreenEvent(type, listener)** - same as`el.on('screen', ...)` except this
|
||||||
will automatically cleanup listeners after the element is detached.
|
will automatically cleanup listeners after the element is detached.
|
||||||
|
|
||||||
|
###### Content Methods
|
||||||
|
|
||||||
|
Methods for dealing with text content, line by line. Useful for writing a
|
||||||
|
text editor, irc client, etc.
|
||||||
|
|
||||||
|
Note: all of these methods deal with pre-aligned, pre-wrapped text. If you use
|
||||||
|
deleteTop() on a box with a wrapped line at the top, it may remove 3-4 "real"
|
||||||
|
lines (rows) depending on how long the original line was.
|
||||||
|
|
||||||
|
The `lines` parameter can be a string or an array of strings. The `line`
|
||||||
|
parameter must be a string.
|
||||||
|
|
||||||
|
- **setContent(text)** - set the content. note: when text is input, it will be
|
||||||
|
stripped of all non-SGR escape codes, tabs will be replaced with 8 spaces,
|
||||||
|
and tags will be replaced with SGR codes (if enabled).
|
||||||
|
- **getContent(text)** - return content, slightly different from `el.content`.
|
||||||
|
assume the above formatting.
|
||||||
|
- **insertLine(i, lines)** - insert a line into the box's content.
|
||||||
|
- **deleteLine(i)** - delete a line from the box's content.
|
||||||
|
- **getLine(i)** - get a line from the box's content.
|
||||||
|
- **getBaseLine(i)** - get a line from the box's content from the visible top.
|
||||||
|
- **setLine(i, line)** - set a line in the box's content.
|
||||||
|
- **setBaseLine(i, line)** - set a line in the box's content from the visible
|
||||||
|
top.
|
||||||
|
- **clearLine(i)** - clear a line from the box's content.
|
||||||
|
- **clearBaseLine(i)** - clear a line from the box's content from the visible
|
||||||
|
top.
|
||||||
|
- **insertTop(lines)** - insert a line at the top of the box.
|
||||||
|
- **insertBottom(lines)** - insert a line at the bottom of the box.
|
||||||
|
- **deleteTop()** - delete a line at the top of the box.
|
||||||
|
- **deleteBottom()** - delete a line at the bottom of the box.
|
||||||
|
- **unshiftLine(lines)** - unshift a line onto the top of the content.
|
||||||
|
- **shiftLine(i)** - shift a line off the top of the content.
|
||||||
|
- **pushLine(lines)** - push a line onto the bottom of the content.
|
||||||
|
- **popLine(i)** - pop a line off the top of the content.
|
||||||
|
|
||||||
|
|
||||||
#### Box (from Element)
|
#### Box (from Element)
|
||||||
|
|
||||||
|
@ -345,15 +380,6 @@ A box element which draws a simple box containing `content` or other elements.
|
||||||
##### Methods:
|
##### Methods:
|
||||||
|
|
||||||
- inherits all from Element.
|
- inherits all from Element.
|
||||||
- **insertLine(i, line)** - insert a line into the box's content.
|
|
||||||
- **deleteLine(i)** - delete a line from the box's content.
|
|
||||||
- **getLine(i)** - get a line from the box's content.
|
|
||||||
- **setLine(i, line)** - set a line in the box's content.
|
|
||||||
- **clearLine(i)** - clear a line from the box's content.
|
|
||||||
- **insertTop(line)** - insert a line at the top of the box.
|
|
||||||
- **insertBottom(line)** - insert a line at the bottom of the box.
|
|
||||||
- **deleteTop()** - delete a line at the top of the box.
|
|
||||||
- **deleteBottom()** - delete a line at the bottom of the box.
|
|
||||||
|
|
||||||
|
|
||||||
#### Text (from Element)
|
#### Text (from Element)
|
||||||
|
|
|
@ -1836,6 +1836,10 @@ Element.prototype.setContent = function(content, noClear) {
|
||||||
this.parseContent();
|
this.parseContent();
|
||||||
};
|
};
|
||||||
|
|
||||||
|
Element.prototype.getContent = function() {
|
||||||
|
return this._clines.fake.join('\n');
|
||||||
|
};
|
||||||
|
|
||||||
Element.prototype.parseContent = function() {
|
Element.prototype.parseContent = function() {
|
||||||
if (this.detached) return false;
|
if (this.detached) return false;
|
||||||
|
|
||||||
|
@ -2472,22 +2476,10 @@ Element.prototype.__defineGetter__('tpadding', function() {
|
||||||
});
|
});
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Box
|
* Rendering
|
||||||
*/
|
*/
|
||||||
|
|
||||||
function Box(options) {
|
Element.prototype._getShrinkSize = function() {
|
||||||
if (!(this instanceof Box)) {
|
|
||||||
return new Box(options);
|
|
||||||
}
|
|
||||||
options = options || {};
|
|
||||||
Element.call(this, options);
|
|
||||||
}
|
|
||||||
|
|
||||||
Box.prototype.__proto__ = Element.prototype;
|
|
||||||
|
|
||||||
Box.prototype.type = 'box';
|
|
||||||
|
|
||||||
Box.prototype._getShrinkSize = function() {
|
|
||||||
// TODO: Possibly move this to parseContent.
|
// TODO: Possibly move this to parseContent.
|
||||||
return {
|
return {
|
||||||
height: this._clines.length,
|
height: this._clines.length,
|
||||||
|
@ -2500,7 +2492,7 @@ Box.prototype._getShrinkSize = function() {
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
Box.prototype._getShrinkBox = function(xi, xl, yi, yl) {
|
Element.prototype._getShrinkBox = function(xi, xl, yi, yl) {
|
||||||
if (!this.children.length) {
|
if (!this.children.length) {
|
||||||
return { xi: xi, xl: xi, yi: yi, yl: yi };
|
return { xi: xi, xl: xi, yi: yi, yl: yi };
|
||||||
}
|
}
|
||||||
|
@ -2547,7 +2539,7 @@ Box.prototype._getShrinkBox = function(xi, xl, yi, yl) {
|
||||||
return { xi: xi, xl: xl, yi: yi, yl: yl };
|
return { xi: xi, xl: xl, yi: yi, yl: yl };
|
||||||
};
|
};
|
||||||
|
|
||||||
Box.prototype._getShrinkContent = function(xi, xl, yi, yl) {
|
Element.prototype._getShrinkContent = function(xi, xl, yi, yl) {
|
||||||
var hw = this._getShrinkSize()
|
var hw = this._getShrinkSize()
|
||||||
, h = hw.height
|
, h = hw.height
|
||||||
, w = hw.width;
|
, w = hw.width;
|
||||||
|
@ -2576,7 +2568,7 @@ Box.prototype._getShrinkContent = function(xi, xl, yi, yl) {
|
||||||
return { xi: xi, xl: xl, yi: yi, yl: yl };
|
return { xi: xi, xl: xl, yi: yi, yl: yl };
|
||||||
};
|
};
|
||||||
|
|
||||||
Box.prototype._getShrink = function(xi, xl, yi, yl) {
|
Element.prototype._getShrink = function(xi, xl, yi, yl) {
|
||||||
var shrinkBox = this._getShrinkBox(xi, xl, yi, yl)
|
var shrinkBox = this._getShrinkBox(xi, xl, yi, yl)
|
||||||
, shrinkContent = this._getShrinkContent(xi, xl, yi, yl)
|
, shrinkContent = this._getShrinkContent(xi, xl, yi, yl)
|
||||||
, xll = xl
|
, xll = xl
|
||||||
|
@ -2615,7 +2607,7 @@ Box.prototype._getShrink = function(xi, xl, yi, yl) {
|
||||||
return { xi: xi, xl: xl, yi: yi, yl: yl };
|
return { xi: xi, xl: xl, yi: yi, yl: yl };
|
||||||
};
|
};
|
||||||
|
|
||||||
Box.prototype._getCoords = function(get) {
|
Element.prototype._getCoords = function(get) {
|
||||||
if (this.hidden) return;
|
if (this.hidden) return;
|
||||||
|
|
||||||
var xi = this._getLeft(get)
|
var xi = this._getLeft(get)
|
||||||
|
@ -2697,7 +2689,7 @@ Box.prototype._getCoords = function(get) {
|
||||||
};
|
};
|
||||||
|
|
||||||
// Here be dragons.
|
// Here be dragons.
|
||||||
Box.prototype.render = function() {
|
Element.prototype.render = function() {
|
||||||
this.parseContent();
|
this.parseContent();
|
||||||
|
|
||||||
var coords = this._getCoords(true);
|
var coords = this._getCoords(true);
|
||||||
|
@ -2924,8 +2916,8 @@ Box.prototype.render = function() {
|
||||||
return coords;
|
return coords;
|
||||||
};
|
};
|
||||||
|
|
||||||
Box.prototype.insertLine = function(i, line) {
|
Element.prototype.insertLine = function(i, line) {
|
||||||
if (typeof line === 'string') line = [line];
|
if (typeof line === 'string') line = line.split('\n');
|
||||||
|
|
||||||
if (i !== i || i == null) {
|
if (i !== i || i == null) {
|
||||||
i = this._clines.ftor.length;
|
i = this._clines.ftor.length;
|
||||||
|
@ -2977,7 +2969,7 @@ Box.prototype.insertLine = function(i, line) {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
Box.prototype.deleteLine = function(i, n) {
|
Element.prototype.deleteLine = function(i, n) {
|
||||||
n = n || 1;
|
n = n || 1;
|
||||||
|
|
||||||
if (i !== i || i == null) {
|
if (i !== i || i == null) {
|
||||||
|
@ -3022,12 +3014,12 @@ Box.prototype.deleteLine = function(i, n) {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
Box.prototype.insertTop = function(line) {
|
Element.prototype.insertTop = function(line) {
|
||||||
var fake = this._clines.rtof[this.childBase || 0];
|
var fake = this._clines.rtof[this.childBase || 0];
|
||||||
return this.insertLine(fake, line);
|
return this.insertLine(fake, line);
|
||||||
};
|
};
|
||||||
|
|
||||||
Box.prototype.insertBottom = function(line) {
|
Element.prototype.insertBottom = function(line) {
|
||||||
var h = (this.childBase || 0) + this.height - this.iheight
|
var h = (this.childBase || 0) + this.height - this.iheight
|
||||||
, i = Math.min(h, this._clines.length)
|
, i = Math.min(h, this._clines.length)
|
||||||
, fake = this._clines.rtof[i - 1] + 1;
|
, fake = this._clines.rtof[i - 1] + 1;
|
||||||
|
@ -3035,12 +3027,12 @@ Box.prototype.insertBottom = function(line) {
|
||||||
return this.insertLine(fake, line);
|
return this.insertLine(fake, line);
|
||||||
};
|
};
|
||||||
|
|
||||||
Box.prototype.deleteTop = function(n) {
|
Element.prototype.deleteTop = function(n) {
|
||||||
var fake = this._clines.rtof[this.childBase || 0];
|
var fake = this._clines.rtof[this.childBase || 0];
|
||||||
return this.deleteLine(fake, n);
|
return this.deleteLine(fake, n);
|
||||||
};
|
};
|
||||||
|
|
||||||
Box.prototype.deleteBottom = function(n) {
|
Element.prototype.deleteBottom = function(n) {
|
||||||
var h = (this.childBase || 0) + this.height - 1 - this.iheight
|
var h = (this.childBase || 0) + this.height - 1 - this.iheight
|
||||||
, i = Math.min(h, this._clines.length - 1)
|
, i = Math.min(h, this._clines.length - 1)
|
||||||
, n = n || 1
|
, n = n || 1
|
||||||
|
@ -3049,7 +3041,7 @@ Box.prototype.deleteBottom = function(n) {
|
||||||
return this.deleteLine(fake - (n - 1), n);
|
return this.deleteLine(fake - (n - 1), n);
|
||||||
};
|
};
|
||||||
|
|
||||||
Box.prototype.setLine = function(i, line) {
|
Element.prototype.setLine = function(i, line) {
|
||||||
i = Math.max(i, 0);
|
i = Math.max(i, 0);
|
||||||
while (this._clines.fake.length < i) {
|
while (this._clines.fake.length < i) {
|
||||||
this._clines.fake.push('');
|
this._clines.fake.push('');
|
||||||
|
@ -3058,43 +3050,64 @@ Box.prototype.setLine = function(i, line) {
|
||||||
return this.setContent(this._clines.fake.join('\n'), true);
|
return this.setContent(this._clines.fake.join('\n'), true);
|
||||||
};
|
};
|
||||||
|
|
||||||
Box.prototype.setBaseLine = function(i, line) {
|
Element.prototype.setBaseLine = function(i, line) {
|
||||||
var fake = this._clines.rtof[this.childBase || 0];
|
var fake = this._clines.rtof[this.childBase || 0];
|
||||||
return this.setLine(fake + i, line);
|
return this.setLine(fake + i, line);
|
||||||
};
|
};
|
||||||
|
|
||||||
Box.prototype.getLine = function(i) {
|
Element.prototype.getLine = function(i) {
|
||||||
i = Math.max(i, 0);
|
i = Math.max(i, 0);
|
||||||
i = Math.min(i, this._clines.fake.length - 1);
|
i = Math.min(i, this._clines.fake.length - 1);
|
||||||
return this._clines.fake[i];
|
return this._clines.fake[i];
|
||||||
};
|
};
|
||||||
|
|
||||||
Box.prototype.getBaseLine = function(i) {
|
Element.prototype.getBaseLine = function(i) {
|
||||||
var fake = this._clines.rtof[this.childBase || 0];
|
var fake = this._clines.rtof[this.childBase || 0];
|
||||||
return this.getLine(fake + i);
|
return this.getLine(fake + i);
|
||||||
};
|
};
|
||||||
|
|
||||||
Box.prototype.clearLine = function(i) {
|
Element.prototype.clearLine = function(i) {
|
||||||
i = Math.min(i, this._clines.fake.length - 1);
|
i = Math.min(i, this._clines.fake.length - 1);
|
||||||
return this.setLine(i, '');
|
return this.setLine(i, '');
|
||||||
};
|
};
|
||||||
|
|
||||||
Box.prototype.unshiftLine = function(line) {
|
Element.prototype.clearBaseLine = function(i) {
|
||||||
|
var fake = this._clines.rtof[this.childBase || 0];
|
||||||
|
return this.clearLine(fake + i);
|
||||||
|
};
|
||||||
|
|
||||||
|
Element.prototype.unshiftLine = function(line) {
|
||||||
return this.insertLine(0, line);
|
return this.insertLine(0, line);
|
||||||
};
|
};
|
||||||
|
|
||||||
Box.prototype.shiftLine = function(n) {
|
Element.prototype.shiftLine = function(n) {
|
||||||
return this.deleteLine(0, n);
|
return this.deleteLine(0, n);
|
||||||
};
|
};
|
||||||
|
|
||||||
Box.prototype.pushLine = function(line) {
|
Element.prototype.pushLine = function(line) {
|
||||||
return this.insertLine(this._clines.fake.length, line);
|
return this.insertLine(this._clines.fake.length, line);
|
||||||
};
|
};
|
||||||
|
|
||||||
Box.prototype.popLine = function(n) {
|
Element.prototype.popLine = function(n) {
|
||||||
return this.deleteLine(this._clines.fake.length - 1, n);
|
return this.deleteLine(this._clines.fake.length - 1, n);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Box
|
||||||
|
*/
|
||||||
|
|
||||||
|
function Box(options) {
|
||||||
|
if (!(this instanceof Box)) {
|
||||||
|
return new Box(options);
|
||||||
|
}
|
||||||
|
options = options || {};
|
||||||
|
Element.call(this, options);
|
||||||
|
}
|
||||||
|
|
||||||
|
Box.prototype.__proto__ = Element.prototype;
|
||||||
|
|
||||||
|
Box.prototype.type = 'box';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Text
|
* Text
|
||||||
*/
|
*/
|
||||||
|
@ -3105,10 +3118,12 @@ function Text(options) {
|
||||||
}
|
}
|
||||||
options = options || {};
|
options = options || {};
|
||||||
options.shrink = true;
|
options.shrink = true;
|
||||||
Box.call(this, options);
|
Element.call(this, options);
|
||||||
}
|
}
|
||||||
|
|
||||||
Text.prototype.__proto__ = Box.prototype;
|
Text.prototype.__proto__ = Element.prototype;
|
||||||
|
|
||||||
|
Text.prototype.type = 'text';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Line
|
* Line
|
||||||
|
|
Loading…
Reference in New Issue