terminal much better

src/js/views/commandViews.js

@@ -37,7 +37,7 @@ var CommandPromptView = Backbone.View.extend({
     });
 
     this.index = -1;
-    this.commandSpan = this.$('#prompt span.command')[0];
+    this.commandParagraph = this.$('#prompt p.command')[0];
     this.commandCursor = this.$('#prompt span.cursor')[0];
     this.focus();
 
@@ -74,16 +74,11 @@ var CommandPromptView = Backbone.View.extend({
   },
 
   onKeyDown: function(e) {
-    console.log('on keydown');
-    console.log(e);
-
     var el = e.srcElement;
     this.updatePrompt(el);
   },
 
   onKeyUp: function(e) {
-    console.log('on key up');
-    console.log(e);
     this.onKeyDown(e);
 
     // we need to capture some of these events.
@@ -126,7 +121,7 @@ var CommandPromptView = Backbone.View.extend({
     // well...
     var text = $('#commandTextField').val();
     var val = this.badHtmlEncode(text);
-    this.commandSpan.innerHTML = val;
+    this.commandParagraph.innerHTML = val;
 
     // now mutate the cursor...
     this.cursorUpdate(text.length, el.selectionStart, el.selectionEnd);
@@ -136,24 +131,31 @@ var CommandPromptView = Backbone.View.extend({
 
   cursorUpdate: function(commandLength, selectionStart, selectionEnd) {
     if (selectionStart === undefined || selectionEnd === undefined) {
-      selectionStart = 0;
-      selectionEnd = 1;
+      selectionStart = commandLength - 1;
+      selectionEnd = commandLength;
     }
 
     // 10px for monospaced font at "1" zoom
     var zoom = require('../util/zoomLevel').detectZoom();
     var widthPerChar = 10 * zoom;
+    var heightPerRow = 22 * zoom;
 
-    var numCharsSelected = Math.max(1, selectionEnd - selectionStart);
-    var width = String(numCharsSelected * widthPerChar) + 'px';
+    var widthOfParagraph = $(this.commandParagraph).width();
+    var numCharsPerLine = widthOfParagraph / widthPerChar;
+
+    var numCharsSelected = Math.min(Math.max(1, selectionEnd - selectionStart), numCharsPerLine);
+    var widthOfSelection = String(numCharsSelected * widthPerChar) + 'px';
 
     // now for positioning
-    var numLeft = (selectionStart !== undefined) ? Math.max(commandLength - selectionStart, 0) : 0;
-    var left = String(-numLeft * widthPerChar) + 'px';
+    var leftOffset = String(widthPerChar * (selectionStart % numCharsPerLine)) + 'px';
+    var topOffset = String(Math.floor(selectionStart / numCharsPerLine) * heightPerRow) + 'px';
+    console.log('height per row', heightPerRow, 'selection start', selectionStart, 'num chars perline', numCharsPerLine);
+
     // one reflow? :D
     $(this.commandCursor).css({
-      width: width,
-      left: left
+      width: widthOfSelection,
+      left: leftOffset,
+      top: topOffset
     });
   },
 

src/js/views/multiView.js

@@ -52,13 +52,15 @@ var MultiView = Backbone.View.extend({
     this.navEvents = _.clone(Backbone.Events);
     this.navEvents.on('negative', this.getNegFunc(), this);
     this.navEvents.on('positive', this.getPosFunc(), this);
+    this.navEvents.on('quit', this.finish, this);
 
     this.keyboardListener = new KeyboardListener({
       events: this.navEvents,
       aliasMap: {
         left: 'negative',
         right: 'positive',
-        enter: 'positive'
+        enter: 'positive',
+        esc: 'quit'
       }
     });
 

src/js/visuals/visBranch.js

@@ -225,7 +225,6 @@ var VisBranch = VisBase.extend({
         branch.obj.get('visBranch')
       ));
     });
-    console.log('getting text size', textNode, 'width', textNode.clientWidth);
 
     return firefoxFix({
       w: maxWidth,

src/style/main.css

@@ -6,6 +6,7 @@ body {
   margin: 0px;
   border: 0px;
   padding: 0px;
+  overflow: hidden;
 }
 
 html, body {
@@ -27,9 +28,9 @@ p {
 html,
 body,
 .box {
-  display: -webkit-box;
-  display: -moz-box;
   display: box;
+  display: -moz-box;
+  display: -webkit-box;
 }
 
 body,
@@ -425,6 +426,11 @@ p.commandLine span.prompt {
   font-weight: bold;
 }
 
+#commandLineBar p.command {
+  margin: 0;
+  margin-left: 12px;
+}
+
 #commandLineBar #commandTextField {
   position: absolute;
   top: -1000px;
@@ -443,18 +449,21 @@ p.commandLine span.prompt {
 
 #prompt {
   text-align: left;
+  position: relative;
+  min-height: 22px;
 }
 
 #prompt span {
   padding: 0px;
   margin: 0px;
   border: 0px;
+  position: absolute;
 }
 
 #prompt span.cursor {
   background: #DDD;
-  position: relative;
   opacity: 0;
+  margin-left: 12px;
 }
 
 #prompt span.cursor.shown {