* Lots of minor code cleanup

* WIP work on HorizontalMenuView
* Initial art for HorizontalMenuView demo
This commit is contained in:
Bryan Ashby 2015-06-30 22:45:27 -06:00
parent c87c0d69b7
commit d346fe72ee
11 changed files with 114 additions and 66 deletions

View File

@ -5,24 +5,91 @@ var MenuView = require('./menu_view.js').MenuView;
var ansi = require('./ansi_term.js'); var ansi = require('./ansi_term.js');
var strUtil = require('./string_util.js'); var strUtil = require('./string_util.js');
function HorizontalMenuView = function(options) { var assert = require('assert');
exports.HorizontalMenuView = HorizontalMenuView;
function HorizontalMenuView(options) {
options.cursor = options.cursor || 'hide'; options.cursor = options.cursor || 'hide';
MenuView.call(this, options); MenuView.call(this, options);
this.dimens.height = 1; // always the case
var self = this; var self = this;
this.getSpacer = function() {
return new Array(self.itemSpacing).join(' ');
}
this.performAutoScale = function() {
if(self.autoScale.width) {
var spacer = self.getSpacer();
var width = self.items.join(spacer).length + (spacer.length * 2);
assert(width <= self.client.term.termWidth - self.position.col);
self.dimens.width = width;
}
};
this.performAutoScale();
this.cachePositions = function() {
if(this.positionCacheExpired) {
var col = self.position.col;
var spacer = self.getSpacer();
self.itemColumns = [];
for(var i = 0; i < self.items.length; ++i) {
self.itemColumns[i] = col;
col += spacer.length + self.items[i].length + spacer.length;
}
}
this.positionCacheExpired = false;
};
this.drawItem = function(index) {
assert(self.itemColumns.length === self.items.length);
var item = self.items[index];
if(!item) {
return;
}
self.client.term.write(ansi.goto(item.row, self.itemColumns[index]));
self.client.term.write(index === self.focusedItemIndex ? self.getFocusSGR() : self.getSGR());
var text = strUtil.stylizeString(item.text, item.focused ? self.focusTextStyle : self.textStyle);
var extraPad = self.getSpacer().length * 2;
self.client.term.write(
strUtil.pad(text, text.length + extraPad, this.fillChar, 'center'));
};
} }
require('util').inherits(HorizontalMenuView, MenuView); require('util').inherits(HorizontalMenuView, MenuView);
HorizontalMenuView.prototype.setHeight = function(height) {
height = parseInt(height, 10);
assert(1 === height); // nothing else allowed here
HorizontalMenuView.super_.prototype.setHeight(this, height);
};
HorizontalMenuView.prototype.redraw = function() { HorizontalMenuView.prototype.redraw = function() {
HorizontalMenuView.super_.prototype.redraw.call(this); HorizontalMenuView.super_.prototype.redraw.call(this);
this.cachePositions();
for(var i = 0; i < this.items.length; ++i) {
this.items[i].focused = this.focusedItemIndex === i;
this.drawItem(i);
}
}; };
HorizontalMenuView.prototype.setPosition = function(pos) { HorizontalMenuView.prototype.setPosition = function(pos) {
HorizontalMenuView.super_.prototype.setPosition.call(this, pos); HorizontalMenuView.super_.prototype.setPosition.call(this, pos);
this.positionCacheExpired = true;
}; };
HorizontalMenuView.prototype.setFocus = function(focused) { HorizontalMenuView.prototype.setFocus = function(focused) {
@ -34,17 +101,5 @@ HorizontalMenuView.prototype.setFocus = function(focused) {
HorizontalMenuView.prototype.setItems = function(items) { HorizontalMenuView.prototype.setItems = function(items) {
HorizontalMenuView.super_.prototype.setItems.call(this, items); HorizontalMenuView.super_.prototype.setItems.call(this, items);
// this.positionCacheExpired = true;
// Styles:
// * itemPadding: n
// *
//
//
// item1 item2 itemThree itemfour!!!!!
// ^^^^^^^^^
//
// item1 item2 itemThree item!!!!!
// ^^^^^^^
}; };

View File

@ -5,6 +5,7 @@ var TextView = require('./text_view.js').TextView;
var EditTextView = require('./edit_text_view.js').EditTextView; var EditTextView = require('./edit_text_view.js').EditTextView;
var ButtonView = require('./button_view.js').ButtonView; var ButtonView = require('./button_view.js').ButtonView;
var VerticalMenuView = require('./vertical_menu_view.js').VerticalMenuView; var VerticalMenuView = require('./vertical_menu_view.js').VerticalMenuView;
var HorizontalMenuView = require('./horizontal_menu_view.js').HorizontalMenuView;
var SpinnerMenuView = require('./spinner_menu_view.js').SpinnerMenuView; var SpinnerMenuView = require('./spinner_menu_view.js').SpinnerMenuView;
var ToggleMenuView = require('./toggle_menu_view.js').ToggleMenuView; var ToggleMenuView = require('./toggle_menu_view.js').ToggleMenuView;
var MaskEditTextView = require('./mask_edit_text_view.js').MaskEditTextView; var MaskEditTextView = require('./mask_edit_text_view.js').MaskEditTextView;
@ -174,6 +175,16 @@ MCIViewFactory.prototype.createFromMCI = function(mci) {
view = new VerticalMenuView(options); view = new VerticalMenuView(options);
break; break;
// Horizontal Menu
case 'HM' :
setOption(0, 'itemSpacing');
setOption(1, 'textStyle');
setFocusOption(0, 'focusTextStyle');
view = new HorizontalMenuView(options);
break;
case 'SM' : case 'SM' :
setOption(0, 'textStyle'); setOption(0, 'textStyle');
setOption(1, 'justify'); setOption(1, 'justify');

View File

@ -40,58 +40,10 @@ function MenuView(options) {
this.fillChar = miscUtil.valueWithDefault(options.fillChar, ' ').substr(0, 1); this.fillChar = miscUtil.valueWithDefault(options.fillChar, ' ').substr(0, 1);
this.justify = options.justify || 'none'; this.justify = options.justify || 'none';
/*
this.moveSelection = function(fromIndex, toIndex) {
assert(!self.positionCacheExpired);
assert(fromIndex >= 0 && fromIndex <= self.items.length);
assert(toIndex >= 0 && toIndex <= self.items.length);
self.items[fromIndex].focused = false;
self.drawItem(fromIndex);
self.items[toIndex].focused = true;
self.focusedItemIndex = toIndex;
self.drawItem(toIndex);
};
*/
/*
this.cachePositions = function() {
// :TODO: implement me!
};
this.drawItem = function(index) {
// :TODO: implement me!
};*/
} }
util.inherits(MenuView, View); util.inherits(MenuView, View);
MenuView.prototype.redrawAllItems = function() {
MenuView.super_.prototype.redraw.call(this);
this.cachePositions();
var count = this.items.length;
for(var i = 0; i < count; ++i) {
this.items[i].focused = this.focusedItemIndex === i;
this.drawItem(i);
}
};
/*
MenuView.prototype.redraw = function() {
MenuView.super_.prototype.redraw.call(this);
this.cachePositions();
var count = this.items.length;
for(var i = 0; i < count; ++i) {
this.items[i].focused = this.focusedItemIndex === i;
this.drawItem(i);
}
};*/
MenuView.prototype.setItems = function(items) { MenuView.prototype.setItems = function(items) {
var self = this; var self = this;
if(items) { if(items) {

View File

@ -989,6 +989,7 @@ MultiLineEditTextView2.prototype.redraw = function() {
MultiLineEditTextView2.prototype.setFocus = function(focused) { MultiLineEditTextView2.prototype.setFocus = function(focused) {
this.client.term.write(this.getSGRFor('text')); this.client.term.write(this.getSGRFor('text'));
this.moveClientCusorToCursorPos();
MultiLineEditTextView2.super_.prototype.setFocus.call(this, focused); MultiLineEditTextView2.super_.prototype.setFocus.call(this, focused);
}; };

View File

@ -19,9 +19,11 @@ function SpinnerMenuView(options) {
var self = this; var self = this;
/*
this.cachePositions = function() { this.cachePositions = function() {
self.positionCacheExpired = false; self.positionCacheExpired = false;
}; };
*/
this.updateSelection = function() { this.updateSelection = function() {
assert(!self.positionCacheExpired); assert(!self.positionCacheExpired);
@ -52,7 +54,7 @@ util.inherits(SpinnerMenuView, MenuView);
SpinnerMenuView.prototype.redraw = function() { SpinnerMenuView.prototype.redraw = function() {
SpinnerMenuView.super_.prototype.redraw.call(this); SpinnerMenuView.super_.prototype.redraw.call(this);
this.cachePositions(); //this.cachePositions();
this.drawItem(this.focusedItemIndex); this.drawItem(this.focusedItemIndex);
}; };

View File

@ -18,9 +18,11 @@ function ToggleMenuView (options) {
var self = this; var self = this;
/*
this.cachePositions = function() { this.cachePositions = function() {
self.positionCacheExpired = false; self.positionCacheExpired = false;
}; };
*/
this.updateSelection = function() { this.updateSelection = function() {
assert(!self.positionCacheExpired); assert(!self.positionCacheExpired);
@ -35,7 +37,7 @@ util.inherits(ToggleMenuView, MenuView);
ToggleMenuView.prototype.redraw = function() { ToggleMenuView.prototype.redraw = function() {
ToggleMenuView.super_.prototype.redraw.call(this); ToggleMenuView.super_.prototype.redraw.call(this);
this.cachePositions(); //this.cachePositions();
this.client.term.write(this.hasFocus ? this.getFocusSGR() : this.getSGR()); this.client.term.write(this.hasFocus ? this.getFocusSGR() : this.getSGR());

View File

@ -69,6 +69,7 @@ util.inherits(VerticalMenuView, MenuView);
VerticalMenuView.prototype.redraw = function() { VerticalMenuView.prototype.redraw = function() {
VerticalMenuView.super_.prototype.redraw.call(this); VerticalMenuView.super_.prototype.redraw.call(this);
// :TODO: rename positionCacheExpired to something that makese sense; combine methods for such
if(this.positionCacheExpired) { if(this.positionCacheExpired) {
this.performAutoScale(); this.performAutoScale();
this.updateViewVisibleItems(); this.updateViewVisibleItems();

View File

@ -5,6 +5,7 @@ var events = require('events');
var util = require('util'); var util = require('util');
var assert = require('assert'); var assert = require('assert');
var ansi = require('./ansi_term.js'); var ansi = require('./ansi_term.js');
var colorCodes = require('./color_codes.js');
var _ = require('lodash'); var _ = require('lodash');
@ -217,7 +218,7 @@ View.prototype.setPropertyValue = function(propName, value) {
if(_.isObject(value)) { if(_.isObject(value)) {
this[propName] = ansi.getSGRFromGraphicRendition(value, true); this[propName] = ansi.getSGRFromGraphicRendition(value, true);
} else if(_.isString(value)) { } else if(_.isString(value)) {
this[propName] = ansi.fromPipeCode(value); this[propName] = colorCodes.pipeToAnsi(value);
} }
} }
}; };

Binary file not shown.

Binary file not shown.

View File

@ -243,6 +243,10 @@
"value" : { "1" : 3 }, "value" : { "1" : 3 },
"action" : "@menu:demoMultiLineEditTextView" "action" : "@menu:demoMultiLineEditTextView"
}, },
{
"value" : { "1" : 5 },
"action" : "@menu:demoHorizontalMenuView"
},
{ {
"value" : { "1" : 6 }, "value" : { "1" : 6 },
"action" : "@menu:demoArtDisplay" "action" : "@menu:demoArtDisplay"
@ -397,6 +401,25 @@
} }
} }
}, },
"demoHorizontalMenuView" : {
"art" : "demo_horizontal_menu_view1.ans",
"options" : { "cls" : true },
"form" : {
"0" : {
"BT5HM1" : {
"mci" : {
"HM1" : {
"items" : [ "A Clockwork Orange", "Pulp Fiction", "Goonies" ]
},
"BT5" : {
"text" : "< Back",
"submit" : [ "escape" ]
}
}
}
}
}
},
"demoArtDisplay" : { "demoArtDisplay" : {
"art" : "demo_selection_vm.ans", "art" : "demo_selection_vm.ans",
"options" : { "cls" : true }, "options" : { "cls" : true },