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

highlight full gutter line for wrapped lines too

Browse source
This commit is contained in:
nightwing 2012-05-13 15:08:48 +04:00
commit acc3faf42c
2 changed files with 34 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -27,12 +27,6 @@
z-index: 4;
}
.ace_gutter_active_line {
position: absolute;
left: 0;
right: 0;
}
.ace_scroller.horscroll {
box-shadow: 17px 0 16px -16px rgba(0, 0, 0, 0.4) inset;
}

58
lib/ace/virtual_renderer.js
View file

@ -67,7 +67,7 @@ dom.importCssString(editorCss, "ace_editor");
/**
* new VirtualRenderer(container, theme)
* - container (DOMElement): The root element of the editor
* - container (DOMElement): The root element of the editor
* - theme (String): The starting theme
*
* Constructs a new `VirtualRenderer` within the `container` specified, applying the given `theme`.
@ -82,7 +82,7 @@ var VirtualRenderer = function(container, theme) {
// TODO: this breaks rendering in Cloud9 with multiple ace instances
// // Imports CSS once per DOM document ('ace_editor' serves as an identifier).
// dom.importCssString(editorCss, "ace_editor", container.ownerDocument);
// in IE <= 9 the native cursor always shines through
this.$keepTextAreaAtCursor = !useragent.isIE;
@ -102,7 +102,6 @@ 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);
@ -449,31 +448,38 @@ var VirtualRenderer = function(container, theme) {
dom.removeCssClass(this.$gutter, "ace_fade-fold-widgets");
};
this.$highlightGutterLine = false;
this.$highlightGutterLine = true;
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.$loop.schedule(this.CHANGE_GUTTER);
};
this.getHighlightGutterLine = function() {
return this.$highlightGutterLine;
};
this.$updateGutterLineHighlight = function() {
this.$gutterLineHighlight.style.top = this.$cursorLayer.$pixelPos.top - this.layerConfig.offset + "px";
this.$gutterLineHighlight.style.height = this.layerConfig.lineHeight + "px";
this.$updateGutterLineHighlight = function(gutterReady) {
var i = this.session.selection.lead.row;
if (i == this.$gutterLineHighlight)
return;
if (!gutterReady) {
var ch = this.$gutterLayer.element.children
var oldEl = ch[this.$gutterLineHighlight - this.layerConfig.firstRow];
if (oldEl)
dom.removeCssClass(oldEl, "ace_gutter_active_line");
var newEl = ch[i - this.layerConfig.firstRow];
if (newEl)
dom.addCssClass(newEl, "ace_gutter_active_line");
}
this.$gutterLayer.removeGutterDecoration(this.$gutterLineHighlight, "ace_gutter_active_line");
this.$gutterLayer.addGutterDecoration(i, "ace_gutter_active_line");
this.$gutterLineHighlight = i;
};
this.$updatePrintMargin = function() {
@ -667,13 +673,15 @@ var VirtualRenderer = function(container, theme) {
// update scrollbar first to not lose scroll position when gutter calls resize
this.$updateScrollBar();
this.$textLayer.update(this.layerConfig);
if (this.showGutter)
if (this.showGutter) {
if (this.$highlightGutterLine)
this.$updateGutterLineHighlight(true);
this.$gutterLayer.update(this.layerConfig);
}
this.$markerBack.update(this.layerConfig);
this.$markerFront.update(this.layerConfig);
this.$cursorLayer.update(this.layerConfig);
this.$moveTextAreaToCursor();
this.$highlightGutterLine && this.$updateGutterLineHighlight();
return;
}
@ -685,13 +693,15 @@ var VirtualRenderer = function(container, theme) {
else
this.$textLayer.scrollLines(this.layerConfig);
if (this.showGutter)
if (this.showGutter) {
if (this.$highlightGutterLine)
this.$updateGutterLineHighlight(true);
this.$gutterLayer.update(this.layerConfig);
}
this.$markerBack.update(this.layerConfig);
this.$markerFront.update(this.layerConfig);
this.$cursorLayer.update(this.layerConfig);
this.$moveTextAreaToCursor();
this.$highlightGutterLine && this.$updateGutterLineHighlight();
return;
}
@ -714,7 +724,7 @@ var VirtualRenderer = function(container, theme) {
if (changes & this.CHANGE_CURSOR) {
this.$cursorLayer.update(this.layerConfig);
this.$moveTextAreaToCursor();
this.$highlightGutterLine && this.$updateGutterLineHighlight();
this.$highlightGutterLine && this.$updateGutterLineHighlight(false);
}
if (changes & (this.CHANGE_MARKER | this.CHANGE_MARKER_FRONT)) {
@ -1041,13 +1051,13 @@ var VirtualRenderer = function(container, theme) {
return steps;
};
/**
/**
* VirtualRenderer.scrollToLine(line, center, animate, callback) -> Void
* - line (Number): A line number
* - center (Boolean): If `true`, centers the editor the to indicated line
* - animate (Boolean): If `true` animates scrolling
* - callback (Function): Function to be called after the animation has finished
*
*
* Gracefully scrolls the editor to the row indicated.
**/
this.scrollToLine = function(line, center, animate, callback) {