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

Merge pull request #1575 from danyaPostfactum/domgutter

Browse source 
Use DOM methods to update gutter
This commit is contained in:
Harutyun Amirjanyan 2013-08-30 03:12:36 -07:00
commit 3deefcb2c7
1 changed files with 72 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

103
lib/ace/layer/gutter.js
View file

@ -46,6 +46,8 @@ var Gutter = function(parentEl) {
this.$annotations = [];
this.$updateAnnotations = this.$updateAnnotations.bind(this);
this.$cells = [];
};
(function() {
@ -117,11 +119,9 @@ var Gutter = function(parentEl) {
};
this.update = function(config) {
var emptyAnno = {className: ""};
var html = [];
var i = config.firstRow;
var firstRow = config.firstRow;
var lastRow = config.lastRow;
var fold = this.session.getNextFoldLine(i);
var fold = this.session.getNextFoldLine(firstRow);
var foldStart = fold ? fold.start.row : Infinity;
var foldWidgets = this.$showFoldWidgets && this.session.foldWidgets;
var breakpoints = this.session.$breakpoints;
@ -129,49 +129,90 @@ var Gutter = function(parentEl) {
var firstLineNumber = this.session.$firstLineNumber;
var lastLineNumber = 0;
var cell = null;
var index = -1;
var row = firstRow;
while (true) {
if(i > foldStart) {
i = fold.end.row + 1;
fold = this.session.getNextFoldLine(i, fold);
foldStart = fold ?fold.start.row :Infinity;
if (row > foldStart) {
row = fold.end.row + 1;
fold = this.session.getNextFoldLine(row, fold);
foldStart = fold ? fold.start.row : Infinity;
}
if(i > lastRow)
if (row > lastRow) {
while (this.$cells.length > index + 1) {
cell = this.$cells.pop();
this.element.removeChild(cell.element);
}
break;
}
var annotation = this.$annotations[i] || emptyAnno;
html.push(
"<div class='ace_gutter-cell ",
breakpoints[i] || "", decorations[i] || "", annotation.className,
"' style='height:", this.session.getRowLength(i) * config.lineHeight, "px;'>",
lastLineNumber = i + firstLineNumber
);
cell = this.$cells[++index];
if (!cell) {
cell = {element: null, textNode: null, foldWidget: null};
cell.element = dom.createElement("div");
cell.textNode = document.createTextNode('');
cell.element.appendChild(cell.textNode);
this.element.appendChild(cell.element);
this.$cells[index] = cell;
}
var className = "ace_gutter-cell";
if (breakpoints[row])
className += breakpoints[row];
if (decorations[row])
className += decorations[row];
if (this.$annotations[row])
className += this.$annotations[row].className;
if (cell.element.className != className)
cell.element.className = className;
var height = this.session.getRowLength(row) * config.lineHeight + "px";
if (height != cell.element.style.height)
cell.element.style.height = height;
var text = lastLineNumber = row + firstLineNumber;
if (text != cell.textNode.data)
cell.textNode.data = text;
if (foldWidgets) {
var c = foldWidgets[i];
var c = foldWidgets[row];
// check if cached value is invalidated and we need to recompute
if (c == null)
c = foldWidgets[i] = this.session.getFoldWidget(i);
if (c)
html.push(
"<span class='ace_fold-widget ace_", c,
c == "start" && i == foldStart && i < fold.end.row ? " ace_closed" : " ace_open",
"' style='height:", config.lineHeight, "px",
"'></span>"
);
c = foldWidgets[row] = this.session.getFoldWidget(row);
}
html.push("</div>");
if (c) {
if (!cell.foldWidget) {
cell.foldWidget = dom.createElement("span");
cell.element.appendChild(cell.foldWidget);
}
var className = "ace_fold-widget ace_" + c;
if (c == "start" && row == foldStart && row < fold.end.row)
className += " ace_closed";
else
className += " ace_open";
if (cell.foldWidget.className != className)
cell.foldWidget.className = className;
i++;
var height = config.lineHeight + "px";
if (cell.foldWidget.style.height != height)
cell.foldWidget.style.height = height;
} else {
if (cell.foldWidget != null) {
cell.element.removeChild(cell.foldWidget);
cell.foldWidget = null;
}
}
row++;
}
this.element = dom.setInnerHtml(this.element, html.join(""));
this.element.style.height = config.minHeight + "px";
if (this.$fixedWidth || this.session.$useWrapMode)
lastLineNumber = this.session.getLength();
var gutterWidth = ("" + lastLineNumber).length * config.characterWidth;
var gutterWidth = lastLineNumber.toString().length * config.characterWidth;
var padding = this.$padding || this.$computePadding();
gutterWidth += padding.left + padding.right;
if (gutterWidth !== this.gutterWidth && !isNaN(gutterWidth)) {