Add WrapLabel UI element

2 files changed, 56 insertions, 5 deletions

diff --git a/ui/Label.js b/ui/Label.js
index 850edc0..faeee98 100644
--- a/ui/Label.js
+++ b/ui/Label.js
@@ -5,20 +5,23 @@ const DisplayElement = require('./DisplayElement')
 module.exports = class Label extends DisplayElement {
   // A simple text display. Automatically adjusts size to fit text.
 
-  constructor(text='') {
+  constructor(text = '') {
     super()
 
     this.text = text
     this.textAttributes = []
   }
 
+  fixLayout() {
+    this.w = this.text.length
+  }
+
   drawTo(writable) {
     if (this.textAttributes.length) {
       writable.write(ansi.setAttributes(this.textAttributes))
     }
 
-    writable.write(ansi.moveCursor(this.absTop, this.absLeft))
-    writable.write(this.text)
+    this.writeTextTo(writable)
 
     if (this.textAttributes.length) {
       writable.write(ansi.resetAttributes())
@@ -27,10 +30,14 @@ module.exports = class Label extends DisplayElement {
     super.drawTo(writable)
   }
 
+  writeTextTo(writable) {
+    writable.write(ansi.moveCursor(this.absTop, this.absLeft))
+    writable.write(this.text)
+  }
+
   set text(newText) {
     this._text = newText
-
-    this.w = newText.length
+    this.fixLayout()
   }
 
   get text() {
diff --git a/ui/WrapLabel.js b/ui/WrapLabel.js
new file mode 100644
index 0000000..babf462
--- /dev/null
+++ b/ui/WrapLabel.js
@@ -0,0 +1,44 @@
+const ansi = require('../util/ansi')
+const wrap = require('word-wrap')
+
+const Label = require('./Label')
+
+module.exports = class WrapLabel extends Label {
+  // A word-wrapping text display. Given a width, wraps text to fit.
+
+  constructor(...args) {
+    super(...args)
+  }
+
+  fixLayout() {
+    // Override Label.fixLayout to do nothing. We don't want to make the
+    // width of this label be set to the content of the text! (That would
+    // defeat the entire point of word wrapping.)
+  }
+
+  writeTextTo(writable) {
+    const lines = this.getWrappedLines()
+    for (let i = 0; i < lines.length; i++) {
+      writable.write(ansi.moveCursor(this.absTop + i, this.absLeft))
+      writable.write(lines[i])
+    }
+  }
+
+  getWrappedLines() {
+    if (this.text.trim().length === 0) {
+      return []
+    }
+
+    const options = {width: this.w, indent: ''}
+    return wrap(this.text, options).split('\n')
+      .map(l => l.trim())
+  }
+
+  get h() {
+    return this.getWrappedLines().length
+  }
+
+  set h(newHeight) {
+    // Do nothing. Height is computed on the fly.
+  }
+}