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

6
lib/ace/css/editor.css
View file

@ -36,6 +36,12 @@
z-index: 1000;
}
.ace_gutter_active_line {
position: absolute;
right: 0;
width: 100%;
}
.ace_gutter.horscroll {
box-shadow: 0px 0px 20px rgba(0,0,0,0.4);
}

25
lib/ace/editor.js
View file

@ -455,7 +455,6 @@ var Editor = function(renderer, session) {
this.$highlightBrackets();
this.$updateHighlightActiveLine();
this.$updateHighlightGutterLine();
};
/** internal, hide
@ -487,21 +486,6 @@ var Editor = function(renderer, session) {
}
};
/** internal, hide
* Editor.$updateHighlightGutterLine()
*
*
**/
this.$updateHighlightGutterLine = function(){
if (typeof this.$lastrow == "number")
this.renderer.removeGutterDecoration(this.$lastrow, "ace_gutter_active_line");
this.$lastrow = null;
if (this.$highlightGutterLine)
this.renderer.addGutterDecoration(
this.$lastrow = this.getCursorPosition().row, "ace_gutter_active_line");
}
/**
* Editor@onSelectionChange(e)
@ -523,7 +507,6 @@ var Editor = function(renderer, session) {
session.$selectionMarker = session.addMarker(range, "ace_selection", style);
} else {
this.$updateHighlightActiveLine();
this.$updateHighlightGutterLine();
}
if (this.$highlightSelectedWord)
@ -602,7 +585,6 @@ var Editor = function(renderer, session) {
// Update the active line marker as due to folding changes the current
// line range on the screen might have changed.
this.$updateHighlightActiveLine();
this.$updateHighlightGutterLine();
// TODO: This might be too much updating. Okay for now.
this.renderer.updateFull();
};
@ -888,12 +870,11 @@ var Editor = function(renderer, session) {
};
this.$highlightGutterLine = true;
this.setHighlightGutterLine = function(shouldHighlightGutterLine) {
if (this.$highlightGutterLine == shouldHighlightGutterLine)
this.setHighlightGutterLine = function(shouldHighlight) {
if (this.$highlightGutterLine == shouldHighlight)
return;
this.$highlightGutterLine = shouldHighlightGutterLine;
this.$updateHighlightGutterLine();
this.renderer.setHighlightGutterLine(shouldHighlight);
};
this.getHighlightGutterLine = function() {

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";