Started to work on Document class and implemented dumb doc rendering.

Author: Dmitriy Kubyshkin

demo/index.html

@@ -9,8 +9,10 @@
   <script type="text/javascript" src="http://localhost:4000/lib.js"></script>
   <script type="text/javascript" charset="utf-8">
     document.addEventListener('DOMContentLoaded', function(){
-      var CanvasTextEditor = require('CanvasTextEditor');
-      var editor = new CanvasTextEditor;
+      var CanvasTextEditor = require('CanvasTextEditor'),
+          Document = require('Document'),
+          doc = new Document('Line1\nLine that is little bit longer\nLine4'),
+          editor = new CanvasTextEditor(doc);
       document.body.appendChild(editor.getEl());
     }, false);
   </script>

lib/CanvasTextEditor.js

@@ -1,12 +1,14 @@
 "use strict";
 
-var FontMetrics = require('FontMetrics');
+var FontMetrics = require('FontMetrics'),
+    Document = require('Document');
 
 /**
  * Simple plain-text text editor using html5 canvas.
  * @constructor
  */
-var CanvasTextEditor = function() {
+var CanvasTextEditor = function(doc) {
+  this._document = doc || (new Document);
   this._metrics = new FontMetrics('"Courier New", Courier, monospace', 14);
   this._createWrapper();
   this._createCanvas();
@@ -45,9 +47,20 @@ CanvasTextEditor.prototype._createCanvas = function() {
   this.context = this.canvas.getContext('2d');
   this.resize(640, 480);
 
-  // Placeholder function just to see that it's working
-  this.context.font = this._metrics.getSize() + 'px ' + this._metrics.getFamily()
-  this.context.fillText('Test', 0, this._metrics.getBaseline());
+  // For now just very dumb implementation of rendering
+  var baselineOffset = this._metrics.getBaseline(),
+      lineHeight = this._metrics.getHeight(),
+      characterWidth = this._metrics.getWidth(),
+      maxHeight = Math.ceil(640 / lineHeight),
+      lineCount = this._document.getLineCount();
+
+  if (lineCount < maxHeight) maxHeight = lineCount;
+
+  for(var i = 0; i < maxHeight; ++i) {
+    this.context.fillText(
+      this._document.getLine(i), 2, lineHeight * i + baselineOffset
+    );
+  }
 
   this.wrapper.appendChild(this.canvas);
 };
@@ -92,6 +105,8 @@ CanvasTextEditor.prototype.getEl = function() {
 CanvasTextEditor.prototype.resize = function(width, height) {
   this.canvas.width = width;
   this.canvas.height = height;
+  // We need to update context settings every time we resize
+  this.context.font = this._metrics.getSize() + 'px ' + this._metrics.getFamily();
 };
 
 /**

lib/Document.js

@@ -0,0 +1,72 @@
+
+/**
+ * Creates new document from provided text.
+ * @param {string} text Full document text.
+ * @constructor
+ */
+Document = function(text) {
+  text || (text = '');
+  this.storage = Document.prepareText(text);
+};
+
+module.exports = Document;
+
+/**
+ * Splits text into array of lines. Can't use .split('\n') because
+ * we want to keep trailing \n at the ends of lines.
+ * @param  {string} text
+ * @return {Array.{string}}
+ */
+Document.prepareText = function(text) {
+  var lines = [],
+      index = 0,
+      newIndex;
+  do {
+    newIndex = text.indexOf('\n', index);
+    // Adding from previous index to new one or to the end of the string
+    lines.push(text.substr(index,  newIndex !== -1 ? newIndex - index + 1 : void 0));
+    // next search will be after found newline
+    index = newIndex + 1; 
+  } while (newIndex !== -1);
+
+  return lines;
+};
+
+/**
+ * Returns line count for the document
+ * @return {number}
+ */
+Document.prototype.getLineCount = function() {
+  return this.storage.length;
+};
+
+/**
+ * Returns line on the corresponding index.
+ * @param  {number} 0-based index of the line
+ * @return {string}
+ */
+Document.prototype.getLine = function(index) {
+  return this.storage[index];
+};
+
+/**
+ * Returns linear length of the document.
+ * @return {number}
+ */
+Document.prototype.getLength = function() {
+  var sum = 0;
+  for (var i = this.storage.length - 1; i >= 0; --i) {
+    sum += this.storage[i].length
+  };
+  return sum;
+};
+
+/**
+ * Returns char at specified offset.
+ * @param  {number} offset
+ * @return {string|undefined}
+ */
+Document.prototype.charAt = function(column, row) {
+  var row = this.storage[row];
+  if (row) return row.charAt(column);
+};

test/runner.html

@@ -16,6 +16,7 @@
   <!-- include spec files here... -->
   <script type="text/javascript" src="spec/EditorSpec.js"></script>
   <script type="text/javascript" src="spec/FontMetricsSpec.js"></script>
+  <script type="text/javascript" src="spec/DocumentSpec.js"></script>
 
   <script type="text/javascript">
     (function() {

test/spec/DocumentSpec.js

@@ -0,0 +1,26 @@
+describe("CanvasTextEditor", function() {
+  var Document = require('Document');
+  var testText = 'Line1\n\nLine3\nLine4'
+
+  it("should have static method for parsing text into array of lines", function() {
+    var lines = Document.prepareText(testText);
+    expect(lines.length).toEqual(4);
+    expect(lines[0]).toEqual('Line1\n');
+    expect(lines[1]).toEqual('\n');
+    expect(lines[2]).toEqual('Line3\n');
+    expect(lines[3]).toEqual('Line4');
+  });
+
+  it("should support getting lines and characters at positions", function(){
+    var doc = new Document(testText);
+
+    expect(doc.getLineCount()).toEqual(4);
+    expect(doc.charAt(0,2)).toEqual('L');
+    expect(doc.charAt(4,2)).toEqual('3');
+    expect(doc.charAt(100,2)).toBeFalsy();
+
+    expect(doc.getLine(3)).toEqual('Line4');
+    expect(doc.getLine(4)).toBeFalsy();
+  });
+
+});