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

Merge branch 'master' of github.com:ajaxorg/ace into ui/optimize-experimental

Browse source
This commit is contained in:
Ruben Daniels 2012-06-13 22:54:39 -07:00
commit 575cec571e
591 changed files with 72910 additions and 314039 deletions
Download patch file Download diff file Expand all files Collapse all files

142
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);
@ -469,35 +468,38 @@ var VirtualRenderer = function(container, theme) {
dom.removeCssClass(this.$gutter, "ace_fade-fold-widgets");
};
this.$highlightGutterLine = false;
this.$highlightGutterLine = true;
this.setHighlightGutterLine = function(shouldHighlight) {
// adding this element to gutter causes strange behavior on ie
if (useragent.isIE)
return;
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 lineEl, ch = this.$gutterLayer.element.children;
var index = this.$gutterLineHighlight - this.layerConfig.firstRow;
if (index >= 0 && (lineEl = ch[index]))
dom.removeCssClass(lineEl, "ace_gutter_active_line");
index = i - this.layerConfig.firstRow;
if (index >= 0 && (lineEl = ch[index]))
dom.addCssClass(lineEl, "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() {
@ -557,13 +559,23 @@ var VirtualRenderer = function(container, theme) {
var posLeft = this.$cursorLayer.$pixelPos.left;
posTop -= this.layerConfig.offset;
if (posTop < 0 || posTop > this.layerConfig.height)
if (posTop < 0 || posTop > this.layerConfig.height - this.lineHeight)
return;
posLeft += (this.showGutter ? this.$gutterLayer.gutterWidth : 0) - this.scrollLeft;
var bounds = this.container.getBoundingClientRect();
this.textarea.style.left = (bounds.left + posLeft) + "px";
this.textarea.style.top = (bounds.top + posTop) + "px";
var w = this.characterWidth;
if (this.$composition)
w += this.textarea.scrollWidth;
posLeft -= this.scrollLeft;
if (posLeft > this.$size.scrollerWidth - w)
posLeft = this.$size.scrollerWidth - w;
if (this.showGutter)
posLeft += this.$gutterLayer.gutterWidth;
this.textarea.style.height = this.lineHeight + "px";
this.textarea.style.width = w + "px";
this.textarea.style.left = posLeft + "px";
this.textarea.style.top = posTop - 1 + "px";
};
/**
@ -681,13 +693,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;
}
@ -699,13 +713,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;
}
@ -728,7 +744,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)) {
@ -824,10 +840,6 @@ var VirtualRenderer = function(container, theme) {
var layerConfig = this.layerConfig;
// if the update changes the width of the document do a full redraw
if (layerConfig.width != this.$getLongestLine())
return this.$textLayer.update(layerConfig);
if (firstRow > layerConfig.lastRow + 1) { return; }
if (lastRow < layerConfig.firstRow) { return; }
@ -897,13 +909,11 @@ var VirtualRenderer = function(container, theme) {
};
/**
* VirtualRenderer.setBreakpoints(rows) -> Void
* - rows (Array): An array containg row numbers
* VirtualRenderer.updateBreakpoints() -> Void
*
* Sets a breakpoint for every row number indicated on `rows`.
* Redraw breakpoints.
**/
this.setBreakpoints = function(rows) {
this.$gutterLayer.setBreakpoints(rows);
this.updateBreakpoints = function(rows) {
this.$loop.schedule(this.CHANGE_GUTTER);
};
@ -1059,13 +1069,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) {
@ -1086,7 +1096,7 @@ var VirtualRenderer = function(container, theme) {
var _self = this;
var steps = _self.$calcSteps(fromValue, toValue);
this.$inScrollAnimation = true;
clearInterval(this.$timer);
_self.session.setScrollTop(steps.shift());
@ -1095,18 +1105,20 @@ var VirtualRenderer = function(container, theme) {
_self.session.setScrollTop(steps.shift());
// trick session to think it's already scrolled to not loose toValue
_self.session.$scrollTop = toValue;
} else {
_self.$inScrollAnimation = false;
clearInterval(_self.$timer);
} else if (toValue != null) {
_self.session.$scrollTop = -1;
_self.session.setScrollTop(toValue);
toValue = null;
} else {
// do this on separate step to not get spurious scroll event from scrollbar
_self.$timer = clearInterval(_self.$timer);
_self.$inScrollAnimation = false;
callback && callback();
}
}, 10);
}
};
/**
* VirtualRenderer.scrollToY(scrollTop) -> Number
* - scrollTop (Number): The position to scroll to
@ -1235,21 +1247,16 @@ var VirtualRenderer = function(container, theme) {
*
**/
this.showComposition = function(position) {
if (!this.$composition) {
this.$composition = dom.createElement("div");
this.$composition.className = "ace_composition";
this.content.appendChild(this.$composition);
}
if (!this.$composition)
this.$composition = {
keepTextAreaAtCursor: this.$keepTextAreaAtCursor,
cssText: this.textarea.style.cssText
};
this.$composition.innerHTML = "&#160;";
var pos = this.$cursorLayer.getPixelPosition();
var style = this.$composition.style;
style.top = pos.top + "px";
style.left = (pos.left + this.$padding) + "px";
style.height = this.lineHeight + "px";
this.hideCursor();
this.$keepTextAreaAtCursor = true;
dom.addCssClass(this.textarea, "ace_composition");
this.textarea.style.cssText = "";
this.$moveTextAreaToCursor();
};
/**
@ -1259,7 +1266,7 @@ var VirtualRenderer = function(container, theme) {
* Sets the inner text of the current composition to `text`.
**/
this.setCompositionText = function(text) {
dom.setInnerText(this.$composition, text);
this.$moveTextAreaToCursor();
};
/**
@ -1268,14 +1275,13 @@ var VirtualRenderer = function(container, theme) {
* Hides the current composition.
**/
this.hideComposition = function() {
this.showCursor();
if (!this.$composition)
return;
var style = this.$composition.style;
style.top = "-10000px";
style.left = "-10000px";
dom.removeCssClass(this.textarea, "ace_composition");
this.$keepTextAreaAtCursor = this.$composition.keepTextAreaAtCursor;
this.textarea.style.cssText = this.$composition.cssText;
this.$composition = null;
};
this._loadTheme = function(name, callback) {