From 19dd8a47d0d0d448aa2e0a5a95c8fe60263fb1cf Mon Sep 17 00:00:00 2001 From: Christopher Jeffrey Date: Thu, 25 Jul 2013 01:20:47 -0500 Subject: [PATCH] fix scrolling obfuscation for elements with borders. --- README.md | 8 +++++++ lib/widget.js | 29 +++++++++++++++++------ test/widget-scrollable-boxes.js | 42 +++++++++++++++++++++++++++++---- 3 files changed, 68 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index 494d7af..ee76c0c 100644 --- a/README.md +++ b/README.md @@ -146,6 +146,7 @@ The screen on which every other node renders. cost of overhead within node. - **resizeTimeout** - amount of time (in ms) to redraw the screen after the terminal is resized (default: 300). +- **tabSize** - the width of tabs within an element's content. ##### Properties: @@ -264,6 +265,7 @@ The base element. parent**. can be a number, percentage (`0-100%`), or keyword (`center`). `right` and `bottom` do not accept keywords. - **position** - can contain the above options. +- **scrollable** - whether the element is scrollable or not. ##### Properties: @@ -308,6 +310,8 @@ The base element. - **move** - received when the element is moved. - **resize** - received when the element is resized. - **key [name]** - received on key event for [name]. +- **prerender** - received before a call to render. +- **render** - received after a call to render. ##### Methods: @@ -412,6 +416,8 @@ Inherits all options, properties, events, and methods from Box. #### ScrollableBox (from Box) +**DEPRECATED** - Use box with the `scrollable` option instead. + A box with scrollable content. ##### Options: @@ -486,6 +492,8 @@ A scrollable list which can display selectable items. #### ScrollableText (from ScrollableBox) +**DEPRECATED** - Use box with the `scrollable` option instead. + A scrollable text box which can display and scroll text, as well as handle pre-existing newlines and escape codes. diff --git a/lib/widget.js b/lib/widget.js index 48e0d29..323c0e2 100644 --- a/lib/widget.js +++ b/lib/widget.js @@ -2705,7 +2705,9 @@ Element.prototype._getCoords = function(get) { yi: yi, yl: yl, _cb: _cb || 0, - base: base || this.childBase || 0 + base: base || this.childBase || 0, + notop: ryi != null && ryi < el.childBase, + nobot: ryl != null && ryl > el.childBase + visible }; }; @@ -2752,6 +2754,10 @@ Element.prototype.render = function() { } if (this.border) xi++, xl--, yi++, yl--; + if (this.border) { + if (coords.notop) yi--; + if (coords.nobot) yl++; + } // If we have padding/valign, that means the // content-drawing loop will skip a few cells/lines. @@ -2839,6 +2845,7 @@ Element.prototype.render = function() { i = Math.max(this._clines.length + 1, this._scrollBottom() + (yl - yi) + 1); } + if (coords.notop || coords.nobot) i = -Infinity; if (this.scrollbar && (yl - yi) < i) { i -= yl - yi; x = xl - 1; @@ -2861,6 +2868,10 @@ Element.prototype.render = function() { } if (this.border) xi--, xl++, yi--, yl++; + if (this.border) { + //if (coords.notop) yi++; + if (coords.nobot) yl--; + } if (this.tpadding) { xi -= this.padding.left, xl += this.padding.right; @@ -2872,6 +2883,7 @@ Element.prototype.render = function() { battr = this.sattr(this.style.border, this.style.border.fg, this.style.border.bg); y = yi; + if (coords.notop) y = -1; for (x = xi; x < xl; x++) { if (!lines[y]) break; if (this.border.type === 'line') { @@ -2913,6 +2925,7 @@ Element.prototype.render = function() { } } y = yl - 1; + if (coords.nobot) y = -1; for (x = xi; x < xl; x++) { if (!lines[y]) break; if (this.border.type === 'line') { @@ -3471,7 +3484,8 @@ function List(options) { options.ignoreKeys = true; // Possibly put this here: this.items = []; - ScrollableBox.call(this, options); + options.scrollable = true; + Box.call(this, options); this.value = ''; this.items = []; @@ -3638,7 +3652,7 @@ function List(options) { }); } -List.prototype.__proto__ = ScrollableBox.prototype; +List.prototype.__proto__ = Box.prototype; List.prototype.type = 'list'; @@ -3768,11 +3782,12 @@ function ScrollableText(options) { return new ScrollableText(options); } options = options || {}; + options.scrollable = true; options.alwaysScroll = true; - ScrollableBox.call(this, options); + Box.call(this, options); } -ScrollableText.prototype.__proto__ = ScrollableBox.prototype; +ScrollableText.prototype.__proto__ = Box.prototype; ScrollableText.prototype.type = 'scrollable-text'; @@ -3839,7 +3854,7 @@ function Form(options) { } } -Form.prototype.__proto__ = ScrollableBox.prototype; +Form.prototype.__proto__ = Box.prototype; Form.prototype.type = 'form'; @@ -4226,7 +4241,7 @@ Textarea.prototype.cancel = function() { return this._listener('\x1b', { name: 'escape' }); }; -Textarea.prototype._render = ScrollableBox.prototype.render; +Textarea.prototype._render = Box.prototype.render; Textarea.prototype.render = function() { this.setValue(); return this._render(); diff --git a/test/widget-scrollable-boxes.js b/test/widget-scrollable-boxes.js index 24bf5da..a14fa4c 100644 --- a/test/widget-scrollable-boxes.js +++ b/test/widget-scrollable-boxes.js @@ -1,9 +1,14 @@ var blessed = require('../') - , screen = blessed.screen(); + , screen; -var box = blessed.scrollablebox({ -//var box = blessed.scrollabletext({ +screen = blessed.screen({ + dump: __dirname + '/scrollable-boxes.log', + smartCSR: true +}); + +var box = blessed.box({ parent: screen, + scrollable: true, left: 'center', top: 'center', width: '80%', @@ -16,7 +21,7 @@ var box = blessed.scrollablebox({ keys: true, vi: true, alwaysScroll: true, - scrollbar: { + scrollbar_: { ch: ' ', inverse: true } @@ -46,6 +51,35 @@ var text2 = blessed.box({ height: 3 }); +var box2 = blessed.box({ + parent: box, + scrollable: true, + content: 'foo1\nfoo2\nfoo3\nfoo4\nfoo5\nfoo6\nfoo7\nf008', + left: 'center', + top: 20, + width: '80%', + height: 5, + border: { + type: 'ascii' + }, + style: { + bg: 'yellow', + focus: { + bg: 'blue' + }, + hover: { + bg: 'red' + } + }, + keys: true, + vi: true, + alwaysScroll: true, + scrollbar_: { + ch: ' ', + inverse: true + } +}); + screen.key('q', function() { return process.exit(0); });