Added insertion and removal of the text.

Author: Dmitriy Kubyshkin

lib/CanvasTextEditor.js

@@ -50,23 +50,33 @@ CanvasTextEditor.prototype._createCanvas = function() {
   this.canvas.style.display = 'block';
   this.context = this.canvas.getContext('2d');
   this.resize(640, 480);
+  this.render();
+  this.wrapper.appendChild(this.canvas);
+};
 
-  // For now just very dumb implementation of rendering
+/**
+ * Renders document onto the canvas
+ * @return {[type]} [description]
+ */
+CanvasTextEditor.prototype.render = function() {
   var baselineOffset = this._metrics.getBaseline(),
       lineHeight = this._metrics.getHeight(),
       characterWidth = this._metrics.getWidth(),
       maxHeight = Math.ceil(640 / lineHeight),
       lineCount = this._document.getLineCount();
 
+  // Making sure we don't render somethign that we won't see
   if (lineCount < maxHeight) maxHeight = lineCount;
 
+  // Clearing previous iteration
+  this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
+
+  // Looping over document lines
   for(var i = 0; i < maxHeight; ++i) {
     this.context.fillText(
       this._document.getLine(i), 0, lineHeight * i + baselineOffset
     );
   }
-
-  this.wrapper.appendChild(this.canvas);
 };
 
 /**
@@ -76,16 +86,54 @@ CanvasTextEditor.prototype._createCanvas = function() {
 CanvasTextEditor.prototype._createInput = function() {
   this.inputEl = document.createElement('textarea');
   this.inputEl.style.position = 'absolute';
-  this.inputEl.style.top = '-100px';
+  this.inputEl.style.top = '-10px';
   this.inputEl.style.height = 0;
   this.inputEl.style.width = 0;
+  this.inputEl.addEventListener('input', this.handleInput.bind(this), false);
   this.inputEl.addEventListener('blur', this.blur.bind(this), false);
   this.inputEl.addEventListener('focus', this._inputFocus.bind(this), false);
   this.inputEl.addEventListener('keydown', this.keydown.bind(this), false);
   this.inputEl.tabIndex = -1; // we don't want input to get focus by tabbing
   this.wrapper.appendChild(this.inputEl);
 };
 
+/**
+ * Handles regular text input into our proxy field
+ * @param  {Event} e
+ */
+CanvasTextEditor.prototype.handleInput = function(e) {
+  this.insertTextAtCurrentPosition(e.target.value);
+  e.target.value = '';
+};
+
+/**
+ * Inserts text at the current cursor position
+ * @param  {string} text
+ */
+CanvasTextEditor.prototype.insertTextAtCurrentPosition = function(text) {
+  var pos = this._selection.getPosition();
+  // Inserting new text and changing position of cursor to a new one
+  this._selection.setPosition.apply(
+    this._selection,
+    this._document.insertText(text, pos[0], pos[1])
+  );
+  this.render();
+};
+
+/**
+ * Deletes text at the current cursor position
+ * @param  {string} text
+ */
+CanvasTextEditor.prototype.deleteCharAtCurrentPosition = function(forward) {
+  var pos = this._selection.getPosition();
+  // Deleting text and changing position of cursor to a new one
+  this._selection.setPosition.apply(
+    this._selection,
+    this._document.deleteChar(forward, pos[0], pos[1])
+  );
+  this.render();
+};
+
 /**
  * Real handler code for editor gaining focus.
  * @private
@@ -137,6 +185,15 @@ CanvasTextEditor.prototype.resize = function(width, height) {
 CanvasTextEditor.prototype.keydown = function(e) {
   var handled = true;
   switch(e.keyCode) {
+    case 8: // backspace
+      this.deleteCharAtCurrentPosition(false);
+      break;
+    case 46: // delete
+      this.deleteCharAtCurrentPosition(true);
+      break;
+    case 13: // Enter
+      this.insertTextAtCurrentPosition('\n');
+      break;
     case 37: // Left arrow
       this._selection.moveLeft();
       break;
@@ -152,7 +209,9 @@ CanvasTextEditor.prototype.keydown = function(e) {
     default:
       handled = false;
   }
-  return !handled;
+  if(handled) {
+    e.preventDefault();
+  }
 };
 
 /**

lib/Document.js

@@ -69,4 +69,107 @@ Document.prototype.getLength = function() {
 Document.prototype.charAt = function(column, row) {
   var row = this.storage[row];
   if (row) return row.charAt(column);
+};
+
+/**
+ * Inserts text into arbitrary position in the document
+ * @param  {string} text
+ * @param  {number} column
+ * @param  {number} row
+ * @return {Array} new position in the document
+ */
+Document.prototype.insertText = function(text, column, row) {
+  // First we need to split inserting text into array lines
+  text = Document.prepareText(text);
+
+  // First we calculate new column position because
+  // text array will be changed in the process
+  var newColumn = text[text.length - 1].length;
+  if (text.length === 1) newColumn += column;
+
+  // append remainder of the current line to last line in new text
+  text[text.length - 1] += this.storage[row].substr(column);
+
+  // append first line of the new text to current line up to "column" position
+  this.storage[row] = this.storage[row].substr(0, column) + text[0];
+
+  // now we are ready to splice other new lines
+  // (not first and not last) into our storage
+  var args = [row + 1, 0].concat(text.slice(1));
+  this.storage.splice.apply(this.storage, args);
+
+  // Finally we calculate new position
+  column = newColumn;
+  row += text.length - 1;
+
+  return [column, row];
+};
+
+/**
+ * Deletes text with specified range from the document.
+ * @param  {number} startColumn
+ * @param  {number} startRow
+ * @param  {number} endColumn
+ * @param  {number} endRow
+ */
+Document.prototype.deleteRange = function(startColumn, startRow, endColumn, endRow) {
+
+  // Check bounds
+  startRow >= 0 || (startRow = 0);
+  startColumn >= 0 || (startColumn = 0);
+  endRow < this.storage.length || (endRow = this.storage.length - 1);
+  endColumn <= this.storage[endRow].length || (endColumn = this.storage[endRow].length);
+
+  // Little optimization that does nothing if there's nothing to delete
+  if(startColumn === endColumn && startRow === endRow) {
+    return [startColumn, startRow];
+  }
+
+  // Now we append start of start row to the remainder of endRow
+  this.storage[startRow] = this.storage[startRow].substr(0, startColumn) + 
+                           this.storage[endRow].substr(endColumn);
+
+  // And remove everything inbetween
+  this.storage.splice(startRow + 1, endRow - startRow);
+
+  // Return new position
+  return [startColumn, startRow];
+};
+
+/**
+ * Deletes one char forward or backward
+ * @param  {boolean} forward
+ * @param  {number}  column
+ * @param  {number}  row
+ * @return {Array}   new position
+ */
+Document.prototype.deleteChar = function(forward, startColumn, startRow) {
+  var endRow = startRow,
+      endColumn = startColumn;
+
+  if (forward) {
+    // If there are characters after cursor on this line we simple remove one
+    if (startColumn < this.storage[startRow].trim('\n').length) {
+      ++endColumn;
+    }
+    // if there are rows after this one we append it
+    else if (startRow < this.storage.length - 1) {
+      ++endRow;
+      endColumn = 0;
+    }
+  }
+  // Deleting backwards
+  else {
+    // If there are characters before the cursor on this line we simple remove one
+    if (startColumn > 0) {
+      --startColumn;
+    }
+    // if there are rwos before we append current to previous one
+    else if (startRow > 0) {
+      --startRow;
+      startColumn = this.storage[startRow].length - 1;
+    }
+  }
+
+  return this.deleteRange(startColumn, startRow, endColumn, endRow);
 };

lib/Selection.js

@@ -44,7 +44,7 @@ Selection.prototype.blink = function() {
  * @param {number?} line
  * @param {number?} character
  */
-Selection.prototype.setPosition = function(line, character) {
+Selection.prototype.setPosition = function(character, line) {
   // Providing defaults for both line and character parts of position
   if (typeof line === 'undefined') line = this.end.line
   if (typeof character === 'undefined') character = this.end.character
@@ -80,13 +80,21 @@ Selection.prototype.setPosition = function(line, character) {
   }
 };
 
+/**
+ * Returns current position of the end of the selection
+ * @return {Array}
+ */
+Selection.prototype.getPosition = function() {
+  return [this.end.character, this.end.line];
+}
+
 /**
  * Moves up specified amount of lines.
  * @param  {number} length
  */
 Selection.prototype.moveUp = function(length) {
   arguments.length || (length = 1);
-  this.setPosition(this.end.line - length);
+  this.setPosition(this.end.character, this.end.line - length);
 };
 
 /**
@@ -95,7 +103,7 @@ Selection.prototype.moveUp = function(length) {
  */
 Selection.prototype.moveDown = function(length) {
   arguments.length || (length = 1);
-  this.setPosition(this.end.line + length);
+  this.setPosition(this.end.character, this.end.line + length);
 };
 
 /**
@@ -104,7 +112,7 @@ Selection.prototype.moveDown = function(length) {
  */
 Selection.prototype.moveLeft = function(length) {
   arguments.length || (length = 1);
-  this.setPosition(undefined, this.end.character - length);
+  this.setPosition(this.end.character - length, this.end.line);
 };
 
 /**
@@ -113,7 +121,7 @@ Selection.prototype.moveLeft = function(length) {
  */
 Selection.prototype.moveRight = function(length) {
   arguments.length || (length = 1);
-  this.setPosition(undefined, this.end.character + length);
+  this.setPosition(this.end.character + length, this.end.line);
 };
 
 /**

scripts/common.js

@@ -6,7 +6,7 @@ var project = JSON.parse(fs.readFileSync(__dirname + '/../package.json'));
 
 // Stitch everything together
 var package = stitch.createPackage({
-  paths: [__dirname + '/../lib', __dirname + '/../vendor']
+  paths: [__dirname + '/../lib']
 });
 
 module.exports = {