jyapayne/ace
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Highlight Gutter Line without redrawing whole gutter

Browse source
This commit is contained in:
nightwing 2012-05-01 19:12:57 +04:00
commit 0217dd2940
3 changed files with 48 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

46
lib/ace/virtual_renderer.js
View file

@ -102,6 +102,7 @@ var VirtualRenderer = function(container, theme) {
this.content.className = "ace_content";
this.scroller.appendChild(this.content);
this.setHighlightGutterLine(true);
this.$gutterLayer = new GutterLayer(this.$gutter);
this.$gutterLayer.on("changeGutterWidth", this.onResize.bind(this, true));
this.setFadeFoldWidgets(true);
@ -452,6 +453,33 @@ var VirtualRenderer = function(container, theme) {
dom.removeCssClass(this.$gutter, "ace_fade-fold-widgets");
};
this.$highlightGutterLine = false;
this.setHighlightGutterLine = function(shouldHighlight) {
if (this.$highlightGutterLine == shouldHighlight)
return;
this.$highlightGutterLine = shouldHighlight;
if (!this.$gutterLineHighlight) {
this.$gutterLineHighlight = dom.createElement("div");
this.$gutterLineHighlight.className = "ace_gutter_active_line";
this.$gutter.appendChild(this.$gutterLineHighlight);
return;
}
this.$gutterLineHighlight.style.display = shouldHighlight ? "" : "none";
this.$updateGutterLineHighlight();
};
this.getHighlightGutterLine = function() {
return this.$highlightGutterLine;
};
this.$updateGutterLineHighlight = function() {
this.$gutterLineHighlight.style.top = this.$cursorLayer.$pixelPos.top + "px";
this.$gutterLineHighlight.style.height = this.layerConfig.lineHeight + "px";
};
this.$updatePrintMargin = function() {
var containerEl;
@ -505,16 +533,17 @@ var VirtualRenderer = function(container, theme) {
if (!this.$keepTextAreaAtCursor)
return;
var pos = this.$cursorLayer.$pixelPos;
pos.top -= this.layerConfig.offset;
var posTop = this.$cursorLayer.$pixelPos.top;
var posLeft = this.$cursorLayer.$pixelPos.left;
posTop -= this.layerConfig.offset;
if (pos.top < 0 || pos.top > this.layerConfig.height)
if (posTop < 0 || posTop > this.layerConfig.height)
return;
pos.left += (this.showGutter ? this.$gutterLayer.gutterWidth : 0) - this.scrollLeft;
posLeft += (this.showGutter ? this.$gutterLayer.gutterWidth : 0) - this.scrollLeft;
var bounds = this.container.getBoundingClientRect();
this.textarea.style.left = (bounds.left + pos.left) + "px";
this.textarea.style.top = (bounds.top + pos.top) + "px";
this.textarea.style.left = (bounds.left + posLeft) + "px";
this.textarea.style.top = (bounds.top + posTop) + "px";
};
/**
@ -636,6 +665,7 @@ var VirtualRenderer = function(container, theme) {
this.$markerFront.update(this.layerConfig);
this.$cursorLayer.update(this.layerConfig);
this.$moveTextAreaToCursor();
this.$highlightGutterLine && this.$updateGutterLineHighlight();
return;
}
@ -653,6 +683,7 @@ var VirtualRenderer = function(container, theme) {
this.$markerFront.update(this.layerConfig);
this.$cursorLayer.update(this.layerConfig);
this.$moveTextAreaToCursor();
this.$highlightGutterLine && this.$updateGutterLineHighlight();
return;
}
@ -675,6 +706,7 @@ var VirtualRenderer = function(container, theme) {
if (changes & this.CHANGE_CURSOR) {
this.$cursorLayer.update(this.layerConfig);
this.$moveTextAreaToCursor();
this.$highlightGutterLine && this.$updateGutterLineHighlight();
}
if (changes & (this.CHANGE_MARKER | this.CHANGE_MARKER_FRONT)) {
@ -752,7 +784,7 @@ var VirtualRenderer = function(container, theme) {
// For debugging.
// console.log(JSON.stringify(this.layerConfig));
this.$gutterLayer.element.style.marginTop = (-offset) + "px";
this.$gutter.style.marginTop = (-offset) + "px";
this.content.style.marginTop = (-offset) + "px";
this.content.style.width = longestLine + 2 * this.$padding + "px";
this.content.style.height = minHeight + "px";