Finished text tool and added in better keyboard input control

js-lib/common.js

@@ -16,6 +16,16 @@ goog.provide('ascii');
 /** @const */ var CHARACTER_PIXELS = 15;
 /** @const */ var RENDER_PADDING = 70;
 
+/** @const */ var KEY_RETURN = '<enter>';
+/** @const */ var KEY_BACKSPACE = '<backspace>';
+/** @const */ var KEY_COPY = '<copy>';
+/** @const */ var KEY_PASTE = '<paste>';
+/** @const */ var KEY_CUT = '<cut>';
+/** @const */ var KEY_UP = '<up>';
+/** @const */ var KEY_DOWN = '<down>';
+/** @const */ var KEY_LEFT = '<left>';
+/** @const */ var KEY_RIGHT = '<right>';
+
 /**
  * Stores a 2D vector.
  *

js-lib/controller.js

@@ -155,7 +155,11 @@ ascii.Controller.prototype.installBindings = function() {
   }.bind(this));
 
   $(window).keypress(function(e) {
-    this.handleKeyPress(e.keyCode);
+    this.handleKeyPress(e);
+  }.bind(this));
+
+  $(window).keydown(function(e) {
+    this.handleKeyDown(e);
   }.bind(this));
 };
 
@@ -193,15 +197,43 @@ ascii.Controller.prototype.updateButtons = function(id) {
 
 /**
  * Handles key presses.
- * @param {number} keyCode
+ * @param {Object} event
  */
-ascii.Controller.prototype.handleKeyPress = function(keyCode) {
+ascii.Controller.prototype.handleKeyPress = function(event) {
-  // TODO: Handle undo, redo, and ctrl+c and ctrl+v.
+  if (!event.ctrlKey && !event.metaKey) {
-  var stringValue = String.fromCharCode(keyCode);
+    this.drawFunction.handleKey(String.fromCharCode(event.keyCode));
-  // Override some special characters so that can be handled in one place.
+    this.view.dirty = true;
-  if (keyCode == 13) {
-    stringValue = '\n';
   }
-  this.drawFunction.handleKey(stringValue);
-  this.view.dirty = true;
 };
+
+/**
+ * Handles key down events.
+ * @param {Object} event
+ */
+ascii.Controller.prototype.handleKeyDown = function(event) {
+  // Override some special characters so that they can be handled in one place.
+  var specialKeyCode = null;
+
+  if (event.ctrlKey || event.metaKey) {
+    if (event.keyCode == 67) { specialKeyCode = KEY_COPY; }
+    if (event.keyCode == 86) { specialKeyCode = KEY_PASTE; }
+    // if (event.keyCode == 90) { this.state.undo()  }
+    // if (event.keyCode == 89) { this.state.redo(); }
+    if (event.keyCode == 88) { specialKeyCode = KEY_CUT; }
+  }
+
+  if (event.keyCode == 8) { specialKeyCode = KEY_BACKSPACE; }
+  if (event.keyCode == 13) { specialKeyCode = KEY_RETURN; }
+  if (event.keyCode == 38) { specialKeyCode = KEY_UP; }
+  if (event.keyCode == 40) { specialKeyCode = KEY_DOWN; }
+  if (event.keyCode == 37) { specialKeyCode = KEY_LEFT; }
+  if (event.keyCode == 39) { specialKeyCode = KEY_RIGHT; }
+
+  if (specialKeyCode != null) {
+    event.preventDefault();
+    event.stopPropagation();
+    this.drawFunction.handleKey(specialKeyCode);
+    this.view.dirty = true;
+  }
+};
+

js-lib/draw.js

@@ -166,22 +166,44 @@ ascii.DrawText.prototype.handleKey = function(value) {
   if (this.currentPosition == null) {
     return;
   }
-
+  var nextPosition = this.currentPosition.add(new ascii.Vector(1, 0));
-  if (value == '\n') {
+  
-    // Pressed return key, so clear this cell.
+  if (value == KEY_RETURN || this.state.getCell(nextPosition).isSpecial()) {
+    // Pressed return key or hit box, so clear this cell and new line.
     this.state.clearDraw();
-  } else {
+    nextPosition = this.startPosition.add(new ascii.Vector(0, 1));
-    // Draw the value and commit it.
+    this.startPosition = nextPosition;
+  } 
+  if (value == KEY_BACKSPACE && this.startPosition.x <= nextPosition.x) {
+    // Pressed backspace key, so clear this cell and go back.
+    this.state.clearDraw();
+    nextPosition = this.currentPosition.add(new ascii.Vector(-1, 0));
+    this.state.drawValue(nextPosition, ' ');
+    this.state.commitDraw();
+  }
+  if (value == KEY_UP) { 
+    this.state.clearDraw();
+    this.startPosition = nextPosition = this.currentPosition.add(new ascii.Vector(0, -1))
+  }
+  if (value == KEY_LEFT) {
+    this.state.clearDraw();
+    this.startPosition = nextPosition = this.currentPosition.add(new ascii.Vector(-1, 0))
+  }
+  if (value == KEY_RIGHT) {
+    this.state.clearDraw();
+    this.startPosition = nextPosition = this.currentPosition.add(new ascii.Vector(1, 0))
+  }
+  if (value == KEY_DOWN) {
+    this.state.clearDraw();
+    this.startPosition = nextPosition = this.currentPosition.add(new ascii.Vector(0, 1))
+  }
+
+  if (value.length == 1) {
+    // The value is not a special character, so draw the value and commit it.
     this.state.drawValue(this.currentPosition, value);
     this.state.commitDraw();
   }
 
-  var nextPosition = this.currentPosition.add(new ascii.Vector(1, 0));
-  // Check for hitting edge of box or return character, then line wrap.
-  if (value == '\n' || this.state.getCell(nextPosition).isSpecial()) {
-    nextPosition = this.startPosition.add(new ascii.Vector(0, 1));
-    this.startPosition = nextPosition;
-  }
   // Highlight the next cell.
   this.currentPosition = nextPosition;
   var nextValue = this.state.getCell(nextPosition).getRawValue();