From 742d2543b88ad4cbb2fc9a859f093a57f32c1967 Mon Sep 17 00:00:00 2001 From: Florrie Date: Thu, 17 Oct 2019 12:57:24 -0300 Subject: Make ScrollBar an independent and published class It's no longer strictly connected to a ListScrollForm, and is published, so it's much easier to use as an element from the tui-lib API in any project now. --- ui/form/ListScrollForm.js | 115 +++---------------------------------------- ui/form/ScrollBar.js | 121 ++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 128 insertions(+), 108 deletions(-) create mode 100644 ui/form/ScrollBar.js (limited to 'ui') diff --git a/ui/form/ListScrollForm.js b/ui/form/ListScrollForm.js index 78c376f..72e79df 100644 --- a/ui/form/ListScrollForm.js +++ b/ui/form/ListScrollForm.js @@ -1,9 +1,8 @@ const ansi = require('../../util/ansi') const telc = require('../../util/telchars') -const unic = require('../../util/unichars') -const DisplayElement = require('../DisplayElement') const Form = require('./Form') +const ScrollBar = require('./ScrollBar') module.exports = class ListScrollForm extends Form { // A form that lets the user scroll through a list of items. It @@ -21,7 +20,12 @@ module.exports = class ListScrollForm extends Form { this.scrollBarEnabled = enableScrollBar - this.scrollBar = new ScrollBar(this) + this.scrollBar = new ScrollBar({ + getLayoutType: () => this.layoutType, + getCurrentScroll: () => this.scrollItems, + getMaximumScroll: () => this.getScrollItemsLength(), + getTotalItems: () => this.inputs.length + }) this.scrollBarShown = false } @@ -297,108 +301,3 @@ module.exports = class ListScrollForm extends Form { } } } - -class ScrollBar extends DisplayElement { - constructor(listScrollForm) { - super() - - this.listScrollForm = listScrollForm - } - - fixLayout() { - // Normally we'd subtract one from contentW/contentH when setting the x/y - // position, but the scrollbar is actually displayed OUTSIDE of (adjacent - // to) the parent's content area. - if (this.listScrollForm.layoutType === 'vertical') { - this.h = this.listScrollForm.contentH - this.w = 1 - this.x = this.listScrollForm.contentW - this.y = 0 - } else { - this.h = 1 - this.w = this.listScrollForm.contentW - this.x = 0 - this.y = this.listScrollForm.contentH - } - } - - drawTo(writable) { - // Uuuurgh - this.fixLayout() - - // TODO: Horizontal layout! Not functionally a lot different, but I'm too - // lazy to write a test UI for it right now. - - const { - backwards: canScrollBackwards, - forwards: canScrollForwards - } = this.getScrollableDirections() - - // - 2 for extra UI elements (arrows) - const totalLength = this.h - 2 - - // ..[-----].. - // ^start| - // ^end - // - // Start and end should correspond to how much of the scroll area - // is currently visible. So, if you can see 60% of the full scroll length - // at a time, and you are scrolled 10% down, the start position of the - // handle should be 10% down, and it should extend 60% of the scrollbar - // length, to the 70% mark. - - const currentScroll = this.listScrollForm.scrollItems - const edgeLength = this.listScrollForm.contentH - const totalItems = this.listScrollForm.inputs.length - const itemsVisibleAtOnce = Math.min(totalItems, edgeLength) - const handleLength = itemsVisibleAtOnce / totalItems * totalLength - let handlePosition = Math.floor(totalLength / totalItems * currentScroll) - - // Silly peeve of mine: The handle should only be visibly touching the top - // or bottom of the scrollbar area if you're actually scrolled all the way - // to the start or end. Otherwise, it shouldn't be touching! There should - // visible space indicating that you can scroll in that direction - // (in addition to the arrows we show at the ends). - - if (canScrollBackwards && handlePosition === 0) { - handlePosition = 1 - } - - if (canScrollForwards && (handlePosition + handleLength) === edgeLength) { - handlePosition-- - } - - if (this.listScrollForm.layoutType === 'vertical') { - const start = this.absTop + handlePosition + 1 - for (let i = 0; i < handleLength; i++) { - writable.write(ansi.moveCursor(start + i, this.absLeft)) - writable.write(unic.BOX_V_DOUBLE) - } - - if (canScrollBackwards) { - writable.write(ansi.moveCursor(this.absTop, this.absLeft)) - writable.write(unic.ARROW_UP_DOUBLE) - } - - if (canScrollForwards) { - writable.write(ansi.moveCursor(this.absBottom, this.absLeft)) - writable.write(unic.ARROW_DOWN_DOUBLE) - } - } - } - - getScrollableDirections() { - const currentScroll = this.listScrollForm.scrollItems - const totalScroll = this.listScrollForm.getScrollItemsLength() - - return { - backwards: (currentScroll > 0), - forwards: (currentScroll < totalScroll) - } - } - - canScrollAtAll() { - const {backwards, forwards} = this.getScrollableDirections() - return backwards || forwards - } -} diff --git a/ui/form/ScrollBar.js b/ui/form/ScrollBar.js new file mode 100644 index 0000000..13ba7fe --- /dev/null +++ b/ui/form/ScrollBar.js @@ -0,0 +1,121 @@ +const DisplayElement = require('../DisplayElement') + +const ansi = require('../../util/ansi') +const unic = require('../../util/unichars') + +module.exports = class ScrollBar extends DisplayElement { + constructor({ + getLayoutType, + getCurrentScroll, + getMaximumScroll, + getTotalItems + }) { + super() + + this.getLayoutType = getLayoutType + this.getCurrentScroll = getCurrentScroll + this.getMaximumScroll = getMaximumScroll + this.getTotalItems = getTotalItems + } + + fixLayout() { + // Normally we'd subtract one from contentW/contentH when setting the x/y + // position, but the scroll-bar is actually displayed OUTSIDE of (adjacent + // to) the parent's content area. + if (this.getLayoutType() === 'vertical') { + this.h = this.parent.contentH + this.w = 1 + this.x = this.parent.contentW + this.y = 0 + } else { + this.h = 1 + this.w = this.parent.contentW + this.x = 0 + this.y = this.parent.contentH + } + } + + drawTo(writable) { + // Uuuurgh + this.fixLayout() + + // TODO: Horizontal layout! Not functionally a lot different, but I'm too + // lazy to write a test UI for it right now. + + const { + backwards: canScrollBackwards, + forwards: canScrollForwards + } = this.getScrollableDirections() + + // - 2 for extra UI elements (arrows) + const totalLength = this.h - 2 + + // ..[-----].. + // ^start| + // ^end + // + // Start and end should correspond to how much of the scroll area + // is currently visible. So, if you can see 60% of the full scroll length + // at a time, and you are scrolled 10% down, the start position of the + // handle should be 10% down, and it should extend 60% of the scrollbar + // length, to the 70% mark. + + // NB: I think this math mixes the units for "items" and "lines". + // edgeLength is measured in lines, while totalItems is a number of items. + // This isn't a problem when the length of an item is equal to one line, + // but it's still worth investigating at some point. + const currentScroll = this.getCurrentScroll() + const totalItems = this.getTotalItems() + const edgeLength = this.parent.contentH + const visibleAtOnce = Math.min(totalItems, edgeLength) + const handleLength = visibleAtOnce / totalItems * totalLength + let handlePosition = Math.floor(totalLength / totalItems * currentScroll) + + // Silly peeve of mine: The handle should only be visibly touching the top + // or bottom of the scrollbar area if you're actually scrolled all the way + // to the start or end. Otherwise, it shouldn't be touching! There should + // visible space indicating that you can scroll in that direction + // (in addition to the arrows we show at the ends). + + if (canScrollBackwards && handlePosition === 0) { + handlePosition = 1 + } + + if (canScrollForwards && (handlePosition + handleLength) === edgeLength) { + handlePosition-- + } + + if (this.getLayoutType() === 'vertical') { + const start = this.absTop + handlePosition + 1 + for (let i = 0; i < handleLength; i++) { + writable.write(ansi.moveCursor(start + i, this.absLeft)) + writable.write(unic.BOX_V_DOUBLE) + } + + if (canScrollBackwards) { + writable.write(ansi.moveCursor(this.absTop, this.absLeft)) + writable.write(unic.ARROW_UP_DOUBLE) + } + + if (canScrollForwards) { + writable.write(ansi.moveCursor(this.absBottom, this.absLeft)) + writable.write(unic.ARROW_DOWN_DOUBLE) + } + } + } + + getScrollableDirections() { + const currentScroll = this.getCurrentScroll() + const maximumScroll = this.getMaximumScroll() + + return { + backwards: (currentScroll > 0), + forwards: (currentScroll < maximumScroll) + } + } + + canScrollAtAll() { + const {backwards, forwards} = this.getScrollableDirections() + return backwards || forwards + } +} -- cgit 1.3.0-6-gf8a5 From 04a9e6f780bb05d855507d9092170d873e18e229 Mon Sep 17 00:00:00 2001 From: Florrie Date: Thu, 23 Apr 2020 16:17:58 -0300 Subject: add ListScrollForm.wheelMode --- ui/form/ListScrollForm.js | 38 +++++++++++++++++++------------------- 1 file changed, 19 insertions(+), 19 deletions(-) (limited to 'ui') diff --git a/ui/form/ListScrollForm.js b/ui/form/ListScrollForm.js index 72e79df..e4f4249 100644 --- a/ui/form/ListScrollForm.js +++ b/ui/form/ListScrollForm.js @@ -15,6 +15,7 @@ module.exports = class ListScrollForm extends Form { super() this.layoutType = layoutType + this.wheelMode = 'scroll' // scroll, selection this.scrollItems = 0 @@ -122,27 +123,26 @@ module.exports = class ListScrollForm extends Form { } clicked(button) { - // Old code for changing the actual selected item...maybe an interesting - // functionality to explore later? - /* - if (button === 'scroll-up') { - this.previousInput() - this.scrollSelectedElementIntoView() - } else if (button === 'scroll-down') { - this.nextInput() - this.scrollSelectedElementIntoView() - } - */ - - // Scrolling is typically pretty slow with a mouse wheel when it's by - // a single line, so scroll at 3x that speed. - for (let i = 0; i < 3; i++) { + if (this.wheelMode === 'selection') { + // Change the actual selected item. if (button === 'scroll-up') { - this.scrollItems-- + this.previousInput() + this.scrollSelectedElementIntoView() } else if (button === 'scroll-down') { - this.scrollItems++ - } else { - return + this.nextInput() + this.scrollSelectedElementIntoView() + } + } else if (this.wheelMode === 'scroll') { + // Scrolling is typically pretty slow with a mouse wheel when it's by + // a single line, so scroll at 3x that speed. + for (let i = 0; i < 3; i++) { + if (button === 'scroll-up') { + this.scrollItems-- + } else if (button === 'scroll-down') { + this.scrollItems++ + } else { + return + } } } -- cgit 1.3.0-6-gf8a5 From be0919ac31b1048248941ed0c290c03824732297 Mon Sep 17 00:00:00 2001 From: Florrie Date: Sun, 3 May 2020 14:57:01 -0300 Subject: fix long-ignored crash interacting with empty form --- ui/form/Form.js | 21 ++++++++++++++++----- 1 file changed, 16 insertions(+), 5 deletions(-) (limited to 'ui') diff --git a/ui/form/Form.js b/ui/form/Form.js index 451baa4..f61c7b6 100644 --- a/ui/form/Form.js +++ b/ui/form/Form.js @@ -81,8 +81,10 @@ module.exports = class Form extends FocusElement { } previousInput() { - // TODO: Forms currently assume there is at least one selectable input, - // but this isn't necessarily always the case. + if (this.inputs.length === 0) { + return + } + do { this.curIndex = (this.curIndex - 1) if (this.curIndex < 0) { @@ -94,7 +96,10 @@ module.exports = class Form extends FocusElement { } nextInput() { - // TODO: See previousInput + if (this.inputs.length === 0) { + return + } + do { this.curIndex = (this.curIndex + 1) % this.inputs.length } while (!this.inputs[this.curIndex].selectable) @@ -103,9 +108,12 @@ module.exports = class Form extends FocusElement { } firstInput(selectForm = true) { + if (this.inputs.length === 0) { + return + } + this.curIndex = 0 - // TODO: See previousInput if (!this.inputs[this.curIndex].selectable) { this.nextInput() } @@ -118,9 +126,12 @@ module.exports = class Form extends FocusElement { } lastInput(selectForm = true) { + if (this.inputs.length === 0) { + return + } + this.curIndex = this.inputs.length - 1 - // TODO: See previousInput if (!this.inputs[this.curIndex].selectable) { this.previousInput() } -- cgit 1.3.0-6-gf8a5 From 7f0579fc6e5771bbcad36591ab54119c4fe66dbd Mon Sep 17 00:00:00 2001 From: Florrie Date: Thu, 16 Jul 2020 14:04:25 -0300 Subject: improve & use our own word wrapping code --- ui/WrapLabel.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) (limited to 'ui') diff --git a/ui/WrapLabel.js b/ui/WrapLabel.js index babf462..7036908 100644 --- a/ui/WrapLabel.js +++ b/ui/WrapLabel.js @@ -1,5 +1,5 @@ const ansi = require('../util/ansi') -const wrap = require('word-wrap') +const wrap = require('../util/wrap') const Label = require('./Label') @@ -29,9 +29,7 @@ module.exports = class WrapLabel extends Label { return [] } - const options = {width: this.w, indent: ''} - return wrap(this.text, options).split('\n') - .map(l => l.trim()) + return wrap(this.text, this.w).map(l => l.trim()) } get h() { -- cgit 1.3.0-6-gf8a5 From 154dd2f631edc9f46ff73e80b54d48f0ccdf049a Mon Sep 17 00:00:00 2001 From: Florrie Date: Thu, 16 Jul 2020 14:05:54 -0300 Subject: support mixed textAttributes & ANSI format labels --- ui/Label.js | 17 ++++++++++++++++- ui/WrapLabel.js | 2 +- 2 files changed, 17 insertions(+), 2 deletions(-) (limited to 'ui') diff --git a/ui/Label.js b/ui/Label.js index f2cd405..b5828cb 100644 --- a/ui/Label.js +++ b/ui/Label.js @@ -4,6 +4,16 @@ const DisplayElement = require('./DisplayElement') module.exports = class Label extends DisplayElement { // A simple text display. Automatically adjusts size to fit text. + // + // Supports formatted text in two ways: + // 1) Modify the textAttributes to be an array containing the ANSI numerical + // codes for any wanted attributes, and/or + // 2) Supply full ANSI escape codes within the text itself. (The reset + // attributes code, ESC[0m, will be processed to reset to the provided + // values in textAttributes. + // + // Subclasses overriding the writeTextTo function should be sure to call + // processFormatting before actually writing text. constructor(text = '') { super() @@ -32,7 +42,12 @@ module.exports = class Label extends DisplayElement { writeTextTo(writable) { writable.write(ansi.moveCursor(this.absTop, this.absLeft)) - writable.write(this.text) + writable.write(this.processFormatting(this.text)) + } + + processFormatting(text) { + return text.replace(new RegExp(ansi.ESC + '\\[0m', 'g'), + ansi.setAttributes([ansi.A_RESET, ...this.textAttributes])) } set text(newText) { diff --git a/ui/WrapLabel.js b/ui/WrapLabel.js index 7036908..d40b29d 100644 --- a/ui/WrapLabel.js +++ b/ui/WrapLabel.js @@ -20,7 +20,7 @@ module.exports = class WrapLabel extends Label { 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]) + writable.write(this.processFormatting(lines[i])) } } -- cgit 1.3.0-6-gf8a5 From ef66a02f238bedccdefd2a5e60ee29c1325c51aa Mon Sep 17 00:00:00 2001 From: Florrie Date: Thu, 16 Jul 2020 14:14:21 -0300 Subject: don't let WrapLabel text extend one letter too far I Am Very Good At Managing Npm Repositories --- ui/WrapLabel.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui') diff --git a/ui/WrapLabel.js b/ui/WrapLabel.js index d40b29d..d621a49 100644 --- a/ui/WrapLabel.js +++ b/ui/WrapLabel.js @@ -29,7 +29,7 @@ module.exports = class WrapLabel extends Label { return [] } - return wrap(this.text, this.w).map(l => l.trim()) + return wrap(this.text, this.w - 1).map(l => l.trim()) } get h() { -- cgit 1.3.0-6-gf8a5 From 085bab481b1ee8470f04cb6541ee01981e19f2c6 Mon Sep 17 00:00:00 2001 From: "(quasar) nebula" Date: Mon, 14 Sep 2020 17:10:35 -0300 Subject: fix exception function not being imported properly --- ui/DisplayElement.js | 1 - ui/Element.js | 1 + 2 files changed, 1 insertion(+), 1 deletion(-) (limited to 'ui') diff --git a/ui/DisplayElement.js b/ui/DisplayElement.js index 8720142..a7a371a 100644 --- a/ui/DisplayElement.js +++ b/ui/DisplayElement.js @@ -1,5 +1,4 @@ const Element = require('./Element') -const exception = require('../util/exception') module.exports = class DisplayElement extends Element { // A general class that handles dealing with screen coordinates, the tree diff --git a/ui/Element.js b/ui/Element.js index c5beb59..b9b8c61 100644 --- a/ui/Element.js +++ b/ui/Element.js @@ -1,4 +1,5 @@ const EventEmitter = require('events') +const exception = require('../util/exception') module.exports = class Element extends EventEmitter { // The basic class containing methods for working with an element hierarchy. -- cgit 1.3.0-6-gf8a5 From 691dee525adec2bbdb0bb247b6561bc2b5b23bf2 Mon Sep 17 00:00:00 2001 From: "(quasar) nebula" Date: Tue, 14 Dec 2021 08:24:30 -0400 Subject: allow matching children of clickThrough: false els This caused clicks not to match the context menu in mtui, where the container layer (a full-screen element) is marked clickThrough: false (but the menu and its elements are not). Basically this meant clicking menus has been broken for however long this code has been here. --- ui/DisplayElement.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) (limited to 'ui') diff --git a/ui/DisplayElement.js b/ui/DisplayElement.js index a7a371a..32a62b8 100644 --- a/ui/DisplayElement.js +++ b/ui/DisplayElement.js @@ -233,7 +233,7 @@ module.exports = class DisplayElement extends Element { children.reverse() for (const el of children) { - if (!el.visible || el.clickThrough) { + if (!el.visible) { continue } @@ -242,6 +242,10 @@ module.exports = class DisplayElement extends Element { return el2 } + if (el.clickThrough) { + continue + } + const { absX, absY, w, h } = el if (absX <= x && absX + w > x) { if (absY <= y && absY + h > y) { -- cgit 1.3.0-6-gf8a5