Added simple font metrics class.

Author: Dmitriy Kubyshkin

demo/index.html

@@ -9,7 +9,7 @@
   <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('editor');
+      var CanvasTextEditor = require('CanvasTextEditor');
       var editor = new CanvasTextEditor;
       document.body.appendChild(editor.getEl());
     }, false);

lib/editor.js renamed to lib/CanvasTextEditor.js

@@ -1,8 +1,13 @@
+"use strict";
+
+var FontMetrics = require('FontMetrics');
+
 /**
  * Simple plain-text text editor using html5 canvas.
  * @constructor
  */
 var CanvasTextEditor = function() {
+  this._metrics = new FontMetrics('"Courier New", Courier, monospace', 14);
   this._createWrapper();
   this._createCanvas();
   this._createInput();
@@ -36,13 +41,15 @@ CanvasTextEditor.prototype._createWrapper = function() {
  */
 CanvasTextEditor.prototype._createCanvas = function() {
   this.canvas = document.createElement('canvas');
-  this.wrapper.appendChild(this.canvas);
   this.canvas.style.display = 'block';
   this.context = this.canvas.getContext('2d');
   this.resize(640, 480);
 
   // Placeholder function just to see that it's working
-  this.context.fillText('Test', 0, 10);
+  this.context.font = this._metrics.getSize() + 'px ' + this._metrics.getFamily()
+  this.context.fillText('Test', 0, this._metrics.getBaseline());
+
+  this.wrapper.appendChild(this.canvas);
 };
 
 /**

lib/FontMetrics.js

@@ -0,0 +1,81 @@
+"use strict";
+
+/**
+ * A simple wrapper for system fonts to provide
+ * @param {String} family Font Family (same as in CSS)
+ * @param {Number} size Size in px
+ * @constructor
+ */
+var FontMetrics = function(family, size) {
+  this._family = family || (family = "Monaco, 'Courier New', Courier, monospace");
+  this._size = parseInt(size) || (size = 12);
+
+  // Preparing container
+  var line = document.createElement('div'),
+      body = document.body;
+  line.style.position = 'absolute';
+  line.style.whiteSpace = 'nowrap';
+  line.style.font = size + 'px ' + family;
+  body.appendChild(line);
+
+  // Now we can measure width and height of the letter
+  line.innerHTML = 'm'; // It doesn't matter what text goes here
+  this._width = line.offsetHeight;
+  this._height = line.offsetHeight;
+
+  // Now creating 1px sized item that will be aligned to baseline
+  // to calculate baseline shift
+  var span = document.createElement('span');
+  span.style.display = 'inline-block';
+  span.style.overflow = 'hidden';
+  span.style.width = '1px';
+  span.style.height = '1px';
+  line.appendChild(span);
+
+  // Baseline is important for positioning text on canvas
+  this._baseline = span.offsetTop + span.offsetHeight;
+
+  document.body.removeChild(line);
+};
+
+module.exports = FontMetrics;
+
+/**
+ * Returns font family
+ * @return {String}
+ */
+FontMetrics.prototype.getFamily = function() {
+  return this._family;
+};
+
+/**
+ * Returns font family
+ * @return {Number}
+ */
+FontMetrics.prototype.getSize = function() {
+  return this._size;
+};
+
+/**
+ * Returns line height in px
+ * @return {Number}
+ */
+FontMetrics.prototype.getHeight = function() {
+  return this._height;
+};
+
+/**
+ * Returns line height in px
+ * @return {Number}
+ */
+FontMetrics.prototype.getWidth = function() {
+  return this._width;
+};
+
+/**
+ * Returns line height in px
+ * @return {Number}
+ */
+FontMetrics.prototype.getBaseline = function() {
+  return this._baseline;
+};

test/runner.html

@@ -15,6 +15,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">
     (function() {

test/spec/EditorSpec.js

@@ -1,5 +1,5 @@
 describe("CanvasTextEditor", function() {
-  var CanvasTextEditor = require('editor');
+  var CanvasTextEditor = require('CanvasTextEditor');
 
   it("should be possible to instatiate", function() {
     var editor = new CanvasTextEditor;

test/spec/FontMetricsSpec.js

@@ -0,0 +1,27 @@
+describe("CanvasTextEditor", function() {
+  var FontMetrics = require('FontMetrics');
+
+  it("should support getters for family and size", function() {
+    var family = 'Arial, sans-serif',
+        size = 18,
+        metrics = new FontMetrics(family, size);
+
+    expect(metrics.getFamily()).toEqual(family);
+    expect(metrics.getSize()).toEqual(size);
+
+    metrics = new FontMetrics;
+
+    expect(metrics.getFamily()).toBeTruthy();
+    expect(metrics.getSize()).toBeTruthy();
+  });
+
+  it("should calculate font metrics", function(){
+
+    var metrics = new FontMetrics;
+
+    expect(metrics.getHeight()).toBeTruthy();
+    expect(metrics.getWidth()).toBeTruthy();
+    expect(metrics.getBaseline()).toBeTruthy();
+    
+  });
+});