enigma-bbs/core/vertical_menu_view.js

/* jslint node: true */
'use strict';

//  ENiGMA½
const MenuView = require('./menu_view.js').MenuView;
const ansi = require('./ansi_term.js');
const strUtil = require('./string_util.js');
const formatString = require('./string_format');
const pipeToAnsi = require('./color_codes.js').pipeToAnsi;

//  deps
const util = require('util');
const _ = require('lodash');

exports.VerticalMenuView = VerticalMenuView;

function VerticalMenuView(options) {
    options.cursor = options.cursor || 'hide';
    options.justify = options.justify || 'left';
    this.focusItemAtTop = true;

    MenuView.call(this, options);

    this.initDefaultWidth();

    const self = this;

    //  we want page up/page down by default
    if (!_.isObject(options.specialKeyMap)) {
        Object.assign(this.specialKeyMap, {
            'page up': ['page up'],
            'page down': ['page down'],
        });
    }

    this.autoAdjustHeightIfEnabled = function () {
        if (this.autoAdjustHeight) {
            this.dimens.height =
                this.items.length * (this.itemSpacing + 1) - this.itemSpacing;
            this.dimens.height = Math.min(
                this.dimens.height,
                this.client.term.termHeight - this.position.row
            );
        }
    };

    this.autoAdjustHeightIfEnabled();

    this.updateViewVisibleItems = function () {
        self.maxVisibleItems = Math.ceil(self.dimens.height / (self.itemSpacing + 1));

        const topIndex = (this.focusItemAtTop ? this.focusedItemIndex : 0) || 0;

        self.viewWindow = {
            top: topIndex,
            bottom: Math.min(topIndex + self.maxVisibleItems, self.items.length) - 1,
        };
    };

    this.drawItem = function (index) {
        const item = self.items[index];
        if (!item) {
            return;
        }

        const cached = this.getRenderCacheItem(index, item.focused);
        if (cached) {
            return self.client.term.write(
                `${ansi.goto(item.row, self.position.col)}${cached}`
            );
        }

        let text;
        let sgr;
        if (item.focused && self.hasFocusItems()) {
            const focusItem = self.focusItems[index];
            text = focusItem ? focusItem.text : item.text;
            sgr = '';
        } else if (this.complexItems) {
            text = pipeToAnsi(
                formatString(
                    item.focused && this.focusItemFormat
                        ? this.focusItemFormat
                        : this.itemFormat,
                    item
                )
            );
            sgr = this.focusItemFormat
                ? ''
                : index === self.focusedItemIndex
                ? self.getFocusSGR()
                : self.getSGR();
        } else {
            text = strUtil.stylizeString(
                item.text,
                item.focused ? self.focusTextStyle : self.textStyle
            );
            sgr = index === self.focusedItemIndex ? self.getFocusSGR() : self.getSGR();
        }

        if (this.hasTextOverflow()) {
            text = strUtil.renderTruncate(text, {
                length: this.dimens.width,
                omission: this.textOverflow,
            });
        }

        text = `${sgr}${strUtil.pad(
            `${text}${this.styleSGR1}`,
            this.dimens.width,
            this.fillChar,
            this.justify
        )}`;

        self.client.term.write(`${ansi.goto(item.row, self.position.col)}${text}`);
        this.setRenderCacheItem(index, text, item.focused);
    };

    this.drawRemovedItem = function (index) {
        if (index <= this.items.length - 1) {
            return;
        }
        const row = this.position.row + index;
        this.client.term.rawWrite(
            `${ansi.goto(row, this.position.col)}${ansi.normal()}${this.fillChar.repeat(
                this.dimens.width
            )}`
        );
    };
}

util.inherits(VerticalMenuView, MenuView);

VerticalMenuView.prototype.redraw = function () {
    VerticalMenuView.super_.prototype.redraw.call(this);

    //  :TODO: rename positionCacheExpired to something that makese sense; combine methods for such
    if (this.positionCacheExpired) {
        this.autoAdjustHeightIfEnabled();
        this.updateViewVisibleItems();

        this.positionCacheExpired = false;
    }

    //  erase old items
    //  :TODO: optimize this: only needed if a item is removed or new max width < old.
    if (this.oldDimens) {
        const blank = ' '.repeat(Math.max(this.oldDimens.width, this.dimens.width));
        let row = this.position.row;
        const endRow = row + this.oldDimens.height - 2;

        while (row <= endRow) {
            this.client.term.write(
                ansi.goto(row, this.position.col) + this.getSGR() + blank
            );
            row += 1;
        }
        delete this.oldDimens;
    }

    if (this.items.length) {
        let row = this.position.row;
        for (let i = this.viewWindow.top; i <= this.viewWindow.bottom; ++i) {
            this.items[i].row = row;
            row += this.itemSpacing + 1;
            this.items[i].focused = this.focusedItemIndex === i;
            this.drawItem(i);
        }
    }

    const remain = Math.max(0, this.dimens.height - this.items.length);
    for (let i = this.items.length; i < remain; ++i) {
        this.drawRemovedItem(i);
    }
};

VerticalMenuView.prototype.setHeight = function (height) {
    VerticalMenuView.super_.prototype.setHeight.call(this, height);

    this.positionCacheExpired = true;
    this.autoAdjustHeight = false;
};

VerticalMenuView.prototype.setPosition = function (pos) {
    VerticalMenuView.super_.prototype.setPosition.call(this, pos);

    this.positionCacheExpired = true;
};

VerticalMenuView.prototype.setFocus = function (focused) {
    VerticalMenuView.super_.prototype.setFocus.call(this, focused);

    this.redraw();
};

VerticalMenuView.prototype.setFocusItemIndex = function (index) {
    VerticalMenuView.super_.prototype.setFocusItemIndex.call(this, index); //  sets this.focusedItemIndex

    const remainAfterFocus = this.focusItemAtTop
        ? this.items.length - index
        : this.items.length;
    if (remainAfterFocus >= this.maxVisibleItems) {
        const topIndex = (this.focusItemAtTop ? this.focusedItemIndex : 0) || 0;

        this.viewWindow = {
            top: topIndex,
            bottom: Math.min(topIndex + this.maxVisibleItems, this.items.length) - 1,
        };

        this.positionCacheExpired = false; //  skip standard behavior
        this.autoAdjustHeightIfEnabled();
    }

    this.redraw();
};

VerticalMenuView.prototype.onKeyPress = function (ch, key) {
    if (key) {
        if (this.isKeyMapped('up', key.name)) {
            this.focusPrevious();
        } else if (this.isKeyMapped('down', key.name)) {
            this.focusNext();
        } else if (this.isKeyMapped('page up', key.name)) {
            this.focusPreviousPageItem();
        } else if (this.isKeyMapped('page down', key.name)) {
            this.focusNextPageItem();
        } else if (this.isKeyMapped('home', key.name)) {
            this.focusFirst();
        } else if (this.isKeyMapped('end', key.name)) {
            this.focusLast();
        }
    }

    VerticalMenuView.super_.prototype.onKeyPress.call(this, ch, key);
};

VerticalMenuView.prototype.getData = function () {
    const item = this.getItem(this.focusedItemIndex);
    if (!item) {
        return this.focusedItemIndex;
    }
    return _.isString(item.data) ? item.data : this.focusedItemIndex;
};

VerticalMenuView.prototype.setItems = function (items) {
    //  if we have items already, save off their drawing area so we don't leave fragments at redraw
    if (this.items && this.items.length) {
        this.oldDimens = Object.assign({}, this.dimens);
    }
    this.focusedItemIndex = 0;

    VerticalMenuView.super_.prototype.setItems.call(this, items);

    this.positionCacheExpired = true;
};

VerticalMenuView.prototype.removeItem = function (index) {
    if (this.items && this.items.length) {
        this.oldDimens = Object.assign({}, this.dimens);
    }

    VerticalMenuView.super_.prototype.removeItem.call(this, index);
};

//  :TODO: Apply draw optimizaitons when only two items need drawn vs entire view!

VerticalMenuView.prototype.focusNext = function () {
    if (this.items.length - 1 === this.focusedItemIndex) {
        this.focusedItemIndex = 0;

        this.viewWindow = {
            top: 0,
            bottom: Math.min(this.maxVisibleItems, this.items.length) - 1,
        };
    } else {
        this.focusedItemIndex++;

        if (this.focusedItemIndex > this.viewWindow.bottom) {
            this.viewWindow.top++;
            this.viewWindow.bottom++;
        }
    }

    this.redraw();

    VerticalMenuView.super_.prototype.focusNext.call(this);
};

VerticalMenuView.prototype.focusPrevious = function () {
    if (0 === this.focusedItemIndex) {
        this.focusedItemIndex = this.items.length - 1;

        this.viewWindow = {
            //top       : this.items.length - this.maxVisibleItems,
            top: Math.max(this.items.length - this.maxVisibleItems, 0),
            bottom: this.items.length - 1,
        };
    } else {
        this.focusedItemIndex--;

        if (this.focusedItemIndex < this.viewWindow.top) {
            this.viewWindow.top--;
            this.viewWindow.bottom--;

            //  adjust for focus index being set & window needing expansion as we scroll up
            const rem = this.viewWindow.bottom - this.viewWindow.top + 1;
            if (
                rem < this.maxVisibleItems &&
                this.items.length - 1 > this.focusedItemIndex
            ) {
                this.viewWindow.bottom = this.items.length - 1;
            }
        }
    }

    this.redraw();

    VerticalMenuView.super_.prototype.focusPrevious.call(this);
};

VerticalMenuView.prototype.focusPreviousPageItem = function () {
    //
    //  Jump to current - up to page size or top
    //  If already at the top, jump to bottom
    //
    if (0 === this.focusedItemIndex) {
        return this.focusPrevious(); //  will jump to bottom
    }

    const index = Math.max(this.focusedItemIndex - this.dimens.height, 0);

    if (index < this.viewWindow.top) {
        this.oldDimens = Object.assign({}, this.dimens);
    }

    this.setFocusItemIndex(index);

    return VerticalMenuView.super_.prototype.focusPreviousPageItem.call(this);
};

VerticalMenuView.prototype.focusNextPageItem = function () {
    //
    //  Jump to current + up to page size or bottom
    //  If already at the bottom, jump to top
    //
    if (this.items.length - 1 === this.focusedItemIndex) {
        return this.focusNext(); //  will jump to top
    }

    const index = Math.min(
        this.focusedItemIndex + this.maxVisibleItems,
        this.items.length - 1
    );

    if (index > this.viewWindow.bottom) {
        this.oldDimens = Object.assign({}, this.dimens);

        this.focusedItemIndex = index;

        this.viewWindow = {
            top: this.focusedItemIndex,
            bottom:
                Math.min(
                    this.focusedItemIndex + this.maxVisibleItems,
                    this.items.length
                ) - 1,
        };

        this.redraw();
    } else {
        this.setFocusItemIndex(index);
    }

    return VerticalMenuView.super_.prototype.focusNextPageItem.call(this);
};

VerticalMenuView.prototype.focusFirst = function () {
    if (0 < this.viewWindow.top) {
        this.oldDimens = Object.assign({}, this.dimens);
    }
    this.setFocusItemIndex(0);
    return VerticalMenuView.super_.prototype.focusFirst.call(this);
};

VerticalMenuView.prototype.focusLast = function () {
    const index = this.items.length - 1;

    if (index > this.viewWindow.bottom) {
        this.oldDimens = Object.assign({}, this.dimens);

        this.focusedItemIndex = index;

        this.viewWindow = {
            top: this.focusedItemIndex,
            bottom:
                Math.min(
                    this.focusedItemIndex + this.maxVisibleItems,
                    this.items.length
                ) - 1,
        };

        this.redraw();
    } else {
        this.setFocusItemIndex(index);
    }

    return VerticalMenuView.super_.prototype.focusLast.call(this);
};

VerticalMenuView.prototype.setTextOverflow = function (overflow) {
    VerticalMenuView.super_.prototype.setTextOverflow.call(this, overflow);

    this.positionCacheExpired = true;
};

VerticalMenuView.prototype.setFocusItems = function (items) {
    VerticalMenuView.super_.prototype.setFocusItems.call(this, items);

    this.positionCacheExpired = true;
};

VerticalMenuView.prototype.setItemSpacing = function (itemSpacing) {
    VerticalMenuView.super_.prototype.setItemSpacing.call(this, itemSpacing);

    this.positionCacheExpired = true;
};

VerticalMenuView.prototype.setPropertyValue = function (propName, value) {
    if (propName === 'focusItemAtTop' && _.isBoolean(value)) {
        this.focusItemAtTop = value;
    }

    VerticalMenuView.super_.prototype.setPropertyValue.call(this, propName, value);
};