diff --git a/Editor.js b/Editor.js index e57bea45..5c1be564 100644 --- a/Editor.js +++ b/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(); }, diff --git a/TextDocument.js b/TextDocument.js index ff869a5a..46164f1e 100644 --- a/TextDocument.js +++ b/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); }; diff --git a/TextLayer.js b/TextLayer.js index cc67b914..918b20cd 100644 --- a/TextLayer.js +++ b/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 = []; diff --git a/VirtualRenderer.js b/VirtualRenderer.js index dab66ed7..594f7d5e 100644 --- a/VirtualRenderer.js +++ b/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;