only update text layer if the document changes

Editor.js

@@ -122,41 +122,33 @@ function Editor(doc, renderer)
   addTripleClickListener(container, bind(this.selectCurrentLine, this));
   
   this.doc = doc;
-  doc.addChangeListener(function(startRow, endRow) {
-    console.log(startRow, endRow);
-  });
+  doc.addChangeListener(bind(this.onDocumentChange, this));
   renderer.setDocument(doc);
   
   this.cursor = {
     row: 0,
     column: 0
-  };
-  
-  this.selectionAnchor = null;  
-  this.selectionLead = null;
-  this.selection = null;
-    
-  this.draw();
-}
+    };
+
+    this.selectionAnchor = null;  
+    this.selectionLead = null;
+    this.selection = null;
 
-Editor.prototype = 
-{
-  draw : function()
-  {
     this.renderer.draw();
-    this.renderer.updateCursor(this.cursor);
-  },
-  
-  resize : function() {
-    this.renderer.draw();
-  },
-  
-  updateCursor : function() {
-    this.renderer.updateCursor(this.cursor);
-  },
-  
-  onFocus : function() {
-    this.renderer.showCursor();
+  }
+
+  Editor.prototype = 
+  {  
+    resize : function() {
+      this.renderer.draw();
+    },
+
+    updateCursor : function() {
+      this.renderer.updateCursor(this.cursor);
+    },
+
+    onFocus : function() {
+      this.renderer.showCursor();
     this.renderer.visualizeFocus();
   },
   
@@ -165,6 +157,10 @@ Editor.prototype =
     this.renderer.visualizeBlur();
   },
   
+  onDocumentChange : function(startRow, endRow) {
+    this.renderer.updateLines(startRow, endRow);
+  },  
+  
   onMouseDown : function(e) 
   {
     this.textInput.focus();
@@ -265,7 +261,7 @@ Editor.prototype =
     {
       this.cursor = this.doc.remove(this.getSelectionRange());
       this.clearSelection();
-      this.draw();
+      this.renderer.updateCursor(this.cursor);
     }
   },
   
@@ -278,7 +274,7 @@ Editor.prototype =
     } else {
       this.cursor = this.doc.insert(this.cursor, text);
     }
-    this.draw();
+    this.renderer.updateCursor(this.cursor);
     this.renderer.scrollCursorIntoView();
   },
   
@@ -287,6 +283,7 @@ Editor.prototype =
     if (this.hasSelection()) 
     {
       this.cursor = this.doc.remove(this.getSelectionRange());
+      this.renderer.updateCursor(this.cursor);
     }
     else
     {
@@ -301,7 +298,6 @@ Editor.prototype =
       this.doc.remove({start: this.cursor, end: renageEnd});      
     }
     
-    this.draw();
     this.renderer.scrollCursorIntoView();
   },
   
@@ -329,7 +325,7 @@ Editor.prototype =
       this.cursor = this.doc.remove({start: rangeStart, end: this.cursor});
     }
     
-    this.draw();
+    this.renderer.updateCursor(this.cursor);
     this.renderer.scrollCursorIntoView();
   },  
   

TextDocument.js

@@ -18,10 +18,6 @@ TextDocument.prototype =
   
   fireChangeEvent : function(firstRow, lastRow) 
   {
-    if (lastRow === undefined) {
-      lastRow = this.lines.length-1;
-    }
-    
     for (var i=0; i < this.listeners.length; i++) {
       this.listeners[i](firstRow, lastRow);
     };

TextLayer.js

@@ -42,6 +42,23 @@ TextLayer.prototype._measureSizes = function()
   this.element.removeChild(measureNode);
 };
 
+TextLayer.prototype.updateLines = function(layerConfig, firstRow, lastRow)
+{
+  var first = Math.max(firstRow, layerConfig.firstRow);
+  var last = Math.min(lastRow, layerConfig.lastRow);
+  
+  var lineElements = this.element.childNodes;
+  
+  for (var i=first; i <= last; i++)
+  {    
+    var html = [];
+    this.renderLine(html, i);
+    
+    var lineElement = lineElements[i-layerConfig.firstRow];
+    lineElement.innerHTML = html.join("");
+  };
+};
+
 TextLayer.prototype.update = function(config)
 {
   var html = [];

VirtualRenderer.js

@@ -43,6 +43,26 @@ VirtualRenderer.prototype.getContainerElement = function() {
   return this.container;
 };
 
+VirtualRenderer.prototype.updateLines = function(firstRow, lastRow)
+{
+  var layerConfig = this.layerConfig;
+  
+  // if the first row is below the viewport -> ignore it
+  if (firstRow > layerConfig.lastRow+1) {
+    return;
+  }
+  
+  // if the last row is unknow -> redraw everything
+  if (lastRow === undefined) 
+  {
+    this.draw()
+    return;
+  }
+  
+  // else update only the changed rows
+  this.textLayer.updateLines(layerConfig, firstRow, lastRow);
+};
+
 VirtualRenderer.prototype.draw = function() 
 {    
   var lines = this.lines;