split layers into separate files

TextLayer.js

@@ -0,0 +1,78 @@
+function TextLayer(parentEl)
+{
+  this.element = document.createElement("div");
+  this.element.className = "canvas";
+  parentEl.appendChild(this.element);
+  
+  this._measureSizes();
+}
+
+TextLayer.prototype.setDocument = function(doc) {
+  this.lines = doc.lines;
+  this.doc = doc;
+};
+
+TextLayer.prototype.getLineHeight = function() {
+  return this.lineHeight;
+};
+
+TextLayer.prototype.getCharacterWidth = function() {
+  return this.characterWidth;
+};
+
+TextLayer.prototype._measureSizes = function()
+{
+  var measureNode = document.createElement("div");
+  var style = measureNode.style;
+  style.width = style.height = "auto";
+  style.left = style.top = "-1000px";
+  style.visibility = "hidden";
+  style.position = "absolute";
+  style.overflow = "visible";
+    
+  measureNode.innerHTML = "X<br>X";
+  this.element.appendChild(measureNode);
+  
+  this.lineHeight = Math.round(measureNode.offsetHeight / 2);
+  this.characterWidth = measureNode.offsetWidth;
+    
+  this.element.removeChild(measureNode);
+};
+
+TextLayer.prototype.update = function(config)
+{
+  var html = [];
+  for (var i=config.firstRow; i<config.lastRow; i++)
+  {
+    html.push(
+      "<div class='line ",
+      i % 2 == 0 ? "even" : "odd",
+      "' style='height:" + this.lineHeight + "px;",
+      "width:", config.width, "px'>"
+    );
+    this.renderLine(html, i),
+    html.push("</div>");
+  }
+  
+  this.element.innerHTML = html.join("");  
+};
+
+TextLayer.prototype.renderLine = function(stringBuilder, row)
+{
+  var tokens = this.doc.getLineTokens(row);
+  for (var i=0; i < tokens.length; i++)
+  {
+    var token = tokens[i];
+
+    var output = token.value.
+      replace(/&/g, "&amp;").
+      replace(/</g, "&lt;").
+      replace(/\s/g, "&nbsp;");
+    
+    if (token.type !== "text") {
+      stringBuilder.push("<span class='", token.type, "'>", output, "</span>");
+    } else {
+      stringBuilder.push(output);
+    }
+  };
+};