/* 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(); 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.positionCacheExpired = true; }; this.autoAdjustHeightIfEnabled(); this.getSpacer = function() { return new Array(self.itemHorizSpacing + 1).join(this.fillChar); } this.clearPage = function() { console.log("Clear page called with f: ~%s~, h: %d, w: %d, r: %d, c: %d", this.fillChar, this.dimens.height, this.dimens.width, this.position.row, this.position.col); for (var i = 0; i < this.dimens.height; i++) { let text = `${strUtil.pad(this.fillChar, this.dimens.width, this.fillChar, 'left')}`; self.client.term.write(`${ansi.goto(this.position.row + i, this.position.col)}${text}`); } } this.cachePositions = function() { if (this.positionCacheExpired) { 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; } var col = this.position.col; var row = this.position.row; var spacer = this.getSpacer(); var itemInRow = 0; var itemInCol = 0; var pageStart = 0; for (var 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) { var maxLength = 0; for (var j = 0; j < this.itemsPerRow; j++) { if (this.items[i - j].col != this.items[i].col) { break; } var itemLength = this.items[i - j].text.length; if (itemLength > maxLength) { maxLength = itemLength; } } // set length on each item in the column for (var 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 (var 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; var maxLength = 0; for (var j = 0; j < this.itemsPerRow; j++) { // TODO: handle complex items var itemLength = this.items[i - j].text.length; if (itemLength > maxLength) { maxLength = itemLength; } } // set length on each item in the column for (var 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 (var 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 = function(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.client.term.write(`${ansi.goto(item.row, item.col)}${text}${this.getSpacer()}`); this.setRenderCacheItem(index, text, item.focused); }; } util.inherits(FullMenuView, MenuView); FullMenuView.prototype.redraw = function() { FullMenuView.super_.prototype.redraw.call(this); this.cachePositions(); // erase old items // :TODO: optimize this: only needed if a item is removed or new max width < old. if (this.oldDimens) { const blank = new Array(Math.max(this.oldDimens.width, this.dimens.width)).join(' '); let seq = ansi.goto(this.position.row, this.position.col) + this.getSGR() + blank; let row = this.position.row + 1; const endRow = (row + this.oldDimens.height) - 2; while (row <= endRow) { seq += ansi.goto(row, this.position.col) + blank; row += 1; } this.client.term.write(seq); delete this.oldDimens; } 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) { FullMenuView.super_.prototype.setHeight.call(this, height); this.positionCacheExpired = true; this.autoAdjustHeight = false; this.clearPage(); }; FullMenuView.prototype.setWidth = function(width) { 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.setFillChar = function(fillChar) { FullMenuView.super_.prototype.setFillChar.call(this, fillChar); this.clearPage(); this.redraw(); }; FullMenuView.prototype.setFocus = function(focused) { FullMenuView.super_.prototype.setFocus.call(this, focused); this.redraw(); }; FullMenuView.prototype.setFocusItemIndex = function(index) { FullMenuView.super_.prototype.setFocusItemIndex.call(this, index); // sets this.focusedItemIndex this.redraw(); }; 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; }; // :TODO: Apply draw optimizaitons when only two items need drawn vs entire view! 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() { var currentRow = this.items[this.focusedItemIndex].itemInRow; this.focusedItemIndex = this.focusedItemIndex - this.itemsPerRow; if (this.focusedItemIndex < 0) { this.clearPage(); var 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; } // add the negative index to the end of the list // this.focusedItemIndex = this.items.length + this.focusedItemIndex; // 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() { var 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() { // // 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); this.setFocusItemIndex(index); return FullMenuView.super_.prototype.focusPreviousPageItem.call(this); }; FullMenuView.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); this.setFocusItemIndex(index); return FullMenuView.super_.prototype.focusNextPageItem.call(this); }; FullMenuView.prototype.focusFirst = function() { this.setFocusItemIndex(0); return FullMenuView.super_.prototype.focusFirst.call(this); }; FullMenuView.prototype.focusLast = function() { const index = this.items.length - 1; this.setFocusItemIndex(index); 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; };