diff --git a/lib/ace/css/editor.css b/lib/ace/css/editor.css index aad4d2bf..f8dd6bf4 100644 --- a/lib/ace/css/editor.css +++ b/lib/ace/css/editor.css @@ -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; } diff --git a/lib/ace/virtual_renderer.js b/lib/ace/virtual_renderer.js index d264c7cf..e80ca2c6 100644 --- a/lib/ace/virtual_renderer.js +++ b/lib/ace/virtual_renderer.js @@ -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) {