enigma-bbs/core/full_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.FullMenuView = FullMenuView;

function FullMenuView(options) {
  options.cursor = options.cursor || 'hide';
  options.justify = options.justify || 'left';


  MenuView.call(this, options);


  // Initialize paging
  this.pages = [];
  this.currentPage = 0;

  this.initDefaultWidth();

  //  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 = () => {
    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.positionCacheExpired = true;
  };

  this.autoAdjustHeightIfEnabled();

  this.clearPage = () => {
    let width = this.dimens.width;
    if (this.oldDimens) {
      if (this.oldDimens.width > width) {
        width = this.oldDimens.width;
      }
      delete this.oldDimens;
    }

    for (let i = 0; i < this.dimens.height; i++) {
      const text = `${strUtil.pad(this.fillChar, width, this.fillChar, 'left')}`;
      this.client.term.write(`${ansi.goto(this.position.row + i, this.position.col)}${this.getSGR()}${text}`);
    }
  }

  this.cachePositions = () => {
    if (this.positionCacheExpired) {
      // first, clear the page
      this.clearPage();


      this.autoAdjustHeightIfEnabled();

      this.pages = []; // reset

      // Calculate number of items visible per column
      this.itemsPerRow = Math.floor(this.dimens.height / (this.itemSpacing + 1));
      // handle case where one can fit at the end
      if (this.dimens.height > (this.itemsPerRow * (this.itemSpacing + 1))) {
        this.itemsPerRow++;
      }

      // Final check to make sure we don't try to display more than we have
      if (this.itemsPerRow > this.items.length) {
        this.itemsPerRow = this.items.length;
      }

      let col = this.position.col;
      let row = this.position.row;
      const spacer = new Array(this.itemHorizSpacing + 1).join(this.fillChar);

      let itemInRow = 0;
      let itemInCol = 0;

      let pageStart = 0;

      for (let i = 0; i < this.items.length; ++i) {
        itemInRow++;
        this.items[i].row = row;
        this.items[i].col = col;
        this.items[i].itemInRow = itemInRow;

        row += this.itemSpacing + 1;

        // have to calculate the max length on the last entry
        if (i == this.items.length - 1) {
          let maxLength = 0;
          for (let j = 0; j < this.itemsPerRow; j++) {
            if (this.items[i - j].col != this.items[i].col) {
              break;
            }
            const itemLength = this.items[i - j].text.length;
            if (itemLength > maxLength) {
              maxLength = itemLength;
            }
          }

          // set length on each item in the column
          for (let j = 0; j < this.itemsPerRow; j++) {
            if (this.items[i - j].col != this.items[i].col) {
              break;
            }
            this.items[i - j].fixedLength = maxLength;
          }


          // Check if we have room for this column
          // skip for column 0, we need at least one
          if (itemInCol != 0 && (col + maxLength > this.dimens.width)) {
            // save previous page
            this.pages.push({ start: pageStart, end: i - itemInRow });

            // fix the last column processed
            for (let j = 0; j < this.itemsPerRow; j++) {
              if (this.items[i - j].col != col) {
                break;
              }
              this.items[i - j].col = this.position.col;
              pageStart = i - j;
            }

          }

          // Since this is the last page, save the current page as well
          this.pages.push({ start: pageStart, end: i });

        }
        // also handle going to next column
        else if (itemInRow == this.itemsPerRow) {
          itemInRow = 0;

          // restart row for next column
          row = this.position.row;
          let maxLength = 0;
          for (let j = 0; j < this.itemsPerRow; j++) {
            // TODO: handle complex items
            let itemLength = this.items[i - j].text.length;
            if (itemLength > maxLength) {
              maxLength = itemLength;
            }
          }

          // set length on each item in the column
          for (let j = 0; j < this.itemsPerRow; j++) {
            this.items[i - j].fixedLength = maxLength;
          }

          // Check if we have room for this column in the current page
          // skip for first column, we need at least one
          if (itemInCol != 0 && (col + maxLength > this.dimens.width)) {
            // save previous page
            this.pages.push({ start: pageStart, end: i - this.itemsPerRow });

            // restart page start for next page
            pageStart = i - this.itemsPerRow + 1;

            // reset
            col = this.position.col;
            itemInRow = 0;

            // fix the last column processed
            for (let j = 0; j < this.itemsPerRow; j++) {
              this.items[i - j].col = col;
            }

          }

          // increment the column
          col += maxLength + spacer.length;
          itemInCol++;
        }


        // Set the current page if the current item is focused.
        if (this.focusedItemIndex === i) {
          this.currentPage = this.pages.length;
        }
      }
    }

    this.positionCacheExpired = false;
  };

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

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

    let text;
    let sgr;
    if (item.focused && this.hasFocusItems()) {
      const focusItem = this.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 === this.focusedItemIndex ? this.getFocusSGR() : this.getSGR());
    } else {
      text = strUtil.stylizeString(item.text, item.focused ? this.focusTextStyle : this.textStyle);
      sgr = (index === this.focusedItemIndex ? this.getFocusSGR() : this.getSGR());
    }

    let renderLength = strUtil.renderStringLength(text);
    if (this.hasTextOverflow() && (item.col + renderLength) > this.dimens.width) {
      text = strUtil.renderSubstr(text, 0, this.dimens.width - (item.col + this.textOverflow.length)) + this.textOverflow;
    }

    let padLength = Math.min(item.fixedLength + 1, this.dimens.width);

    text = `${sgr}${strUtil.pad(text, padLength, this.fillChar, this.justify)}${this.getSGR()}`;
    this.client.term.write(`${ansi.goto(item.row, item.col)}${text}`);
    this.setRenderCacheItem(index, text, item.focused);
  };
}

util.inherits(FullMenuView, MenuView);

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

  this.cachePositions();

  if (this.items.length) {
    for (let i = this.pages[this.currentPage].start; i <= this.pages[this.currentPage].end; ++i) {
      this.items[i].focused = this.focusedItemIndex === i;
      this.drawItem(i);
    }
  }
};

FullMenuView.prototype.setHeight = function(height) {
  this.oldDimens = Object.assign({}, this.dimens);

  FullMenuView.super_.prototype.setHeight.call(this, height);

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

FullMenuView.prototype.setWidth = function(width) {
  this.oldDimens = Object.assign({}, this.dimens);

  FullMenuView.super_.prototype.setWidth.call(this, width);

  this.positionCacheExpired = true;
};

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

  this.positionCacheExpired = true;

}

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

  this.positionCacheExpired = true;
};

FullMenuView.prototype.setFocus = function(focused) {
  FullMenuView.super_.prototype.setFocus.call(this, focused);
  this.positionCacheExpired = true;
  this.autoAdjustHeight = false;

  this.redraw();
};

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

FullMenuView.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('left', key.name)) {
      this.focusPreviousColumn();
    } else if (this.isKeyMapped('right', key.name)) {
      this.focusNextColumn();
    } 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();
    }
  }

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

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

FullMenuView.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);
  }

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

  this.positionCacheExpired = true;
};

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

  FullMenuView.super_.prototype.removeItem.call(this, index);
  this.positionCacheExpired = true;
};

FullMenuView.prototype.focusNext = function() {
  if (this.items.length - 1 === this.focusedItemIndex) {
    this.clearPage();
    this.focusedItemIndex = 0;
    this.currentPage = 0;
  }
  else {
    this.focusedItemIndex++;
    if (this.focusedItemIndex > this.pages[this.currentPage].end) {
      this.clearPage();
      this.currentPage++;
    }
  }

  this.redraw();

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

FullMenuView.prototype.focusPrevious = function() {
  if (0 === this.focusedItemIndex) {
    this.clearPage();
    this.focusedItemIndex = this.items.length - 1;
    this.currentPage = this.pages.length - 1;
  }
  else {
    this.focusedItemIndex--;
    if (this.focusedItemIndex < this.pages[this.currentPage].start) {
      this.clearPage();
      this.currentPage--;
    }
  }

  this.redraw();

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

FullMenuView.prototype.focusPreviousColumn = function() {

  const currentRow = this.items[this.focusedItemIndex].itemInRow;
  this.focusedItemIndex = this.focusedItemIndex - this.itemsPerRow;
  if (this.focusedItemIndex < 0) {
    this.clearPage();
    const lastItemRow = this.items[this.items.length - 1].itemInRow;
    if (lastItemRow > currentRow) {
      this.focusedItemIndex = this.items.length - (lastItemRow - currentRow) - 1;
    }
    else {
      // can't go to same column, so go to last item
      this.focusedItemIndex = this.items.length - 1;
    }
    // set to last page
    this.currentPage = this.pages.length - 1;
  }
  else {
    if (this.focusedItemIndex < this.pages[this.currentPage].start) {
      this.clearPage();
      this.currentPage--;
    }
  }

  this.redraw();

  // TODO: This isn't specific to Previous, may want to replace in the future
  FullMenuView.super_.prototype.focusPrevious.call(this);
};

FullMenuView.prototype.focusNextColumn = function() {

  const currentRow = this.items[this.focusedItemIndex].itemInRow;
  this.focusedItemIndex = this.focusedItemIndex + this.itemsPerRow;
  if (this.focusedItemIndex > this.items.length - 1) {
    this.focusedItemIndex = currentRow - 1;
    this.currentPage = 0;
    this.clearPage();
  }
  else if (this.focusedItemIndex > this.pages[this.currentPage].end) {
    this.clearPage();
    this.currentPage++;
  }

  this.redraw();

  // TODO: This isn't specific to Next, may want to replace in the future
  FullMenuView.super_.prototype.focusNext.call(this);
};

FullMenuView.prototype.focusPreviousPageItem = function() {

  // handle first page
  if (this.currentPage == 0) {
    // Do nothing, page up shouldn't go down on last page
    return;
  }

  this.currentPage--;
  this.focusedItemIndex = this.pages[this.currentPage].start;
  this.clearPage();

  this.redraw();

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

FullMenuView.prototype.focusNextPageItem = function() {

  // handle last page
  if (this.currentPage == this.pages.length - 1) {
    // Do nothing, page up shouldn't go down on last page
    return;
  }

  this.currentPage++;
  this.focusedItemIndex = this.pages[this.currentPage].start;
  this.clearPage();

  this.redraw();

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

FullMenuView.prototype.focusFirst = function() {

  this.currentPage = 0;
  this.focusedItemIndex = 0;
  this.clearPage();

  this.redraw();
  return FullMenuView.super_.prototype.focusFirst.call(this);
};

FullMenuView.prototype.focusLast = function() {

  this.currentPage = this.pages.length - 1;
  this.focusedItemIndex = this.pages[this.currentPage].end;
  this.clearPage();

  this.redraw();
  return FullMenuView.super_.prototype.focusLast.call(this);
};

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

  this.positionCacheExpired = true;
};

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

  this.positionCacheExpired = true;
};

FullMenuView.prototype.setJustify = function(justify) {
  FullMenuView.super_.prototype.setJustify.call(this, justify);
  this.positionCacheExpired = true;
};


FullMenuView.prototype.setItemHorizSpacing = function(itemHorizSpacing) {
  FullMenuView.super_.prototype.setItemHorizSpacing.call(this, itemHorizSpacing);

  this.positionCacheExpired = true;
};