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

Merge pull request #846 from ajaxorg/indent_guides

Browse source 
Indent guides
This commit is contained in:
Lennart Kats 2012-08-10 00:52:20 -07:00
commit d21f41dfed
34 changed files with 345 additions and 113 deletions
Download patch file Download diff file Expand all files Collapse all files

8
demo/kitchen-sink/demo.js
View file

@ -286,7 +286,7 @@ env.editor.commands.addCommands([{
name: "gotoline",
bindKey: {win: "Ctrl-L", mac: "Command-L"},
exec: function(editor, line) {
if (typeof needle == "object") {
if (typeof line == "object") {
var arg = this.name + " " + editor.getCursorPosition().row;
editor.cmdLine.setValue(arg, 1)
editor.cmdLine.focus()
@ -328,7 +328,7 @@ cmdLine.commands.bindKeys({
},
})
cmdLine.commands.removeCommands(["find", "goToLine", "findAll", "replace", "replaceAll"])
cmdLine.commands.removeCommands(["find", "gotoline", "findall", "replace", "replaceall"])
/**
* This demonstrates how you can define commands and bind shortcuts to them.
@ -557,6 +557,10 @@ bindCheckbox("show_hidden", function(checked) {
env.editor.setShowInvisibles(checked);
});
bindCheckbox("display_indent_guides", function(checked) {
env.editor.setDisplayIndentGuides(checked);
});
bindCheckbox("show_gutter", function(checked) {
env.editor.renderer.setShowGutter(checked);
});

69
kitchen-sink.html
View file

@ -59,32 +59,36 @@
<label for="theme">Theme</label>
</td><td>
<select id="theme" size="1">
<option value="ace/theme/chrome">Chrome</option>
<option value="ace/theme/clouds">Clouds</option>
<option value="ace/theme/clouds_midnight">Clouds Midnight</option>
<option value="ace/theme/cobalt">Cobalt</option>
<option value="ace/theme/crimson_editor">Crimson Editor</option>
<option value="ace/theme/dawn">Dawn</option>
<option value="ace/theme/dreamweaver">Dreamweaver</option>
<option value="ace/theme/eclipse">Eclipse</option>
<option value="ace/theme/github">GitHub</option>
<option value="ace/theme/idle_fingers">idleFingers</option>
<option value="ace/theme/kr_theme">krTheme</option>
<option value="ace/theme/merbivore">Merbivore</option>
<option value="ace/theme/merbivore_soft">Merbivore Soft</option>
<option value="ace/theme/mono_industrial">Mono Industrial</option>
<option value="ace/theme/monokai">Monokai</option>
<option value="ace/theme/pastel_on_dark">Pastel on dark</option>
<option value="ace/theme/solarized_dark">Solarized Dark</option>
<option value="ace/theme/solarized_light">Solarized Light</option>
<option value="ace/theme/textmate" selected="selected">TextMate</option>
<option value="ace/theme/twilight">Twilight</option>
<option value="ace/theme/tomorrow">Tomorrow</option>
<option value="ace/theme/tomorrow_night">Tomorrow Night</option>
<option value="ace/theme/tomorrow_night_blue">Tomorrow Night Blue</option>
<option value="ace/theme/tomorrow_night_bright">Tomorrow Night Bright</option>
<option value="ace/theme/tomorrow_night_eighties">Tomorrow Night 80s</option>
<option value="ace/theme/vibrant_ink">Vibrant Ink</option>
<optgroup label="Bright">
<option value="ace/theme/chrome">Chrome</option>
<option value="ace/theme/clouds">Clouds</option>
<option value="ace/theme/crimson_editor">Crimson Editor</option>
<option value="ace/theme/dawn">Dawn</option>
<option value="ace/theme/dreamweaver">Dreamweaver</option>
<option value="ace/theme/eclipse">Eclipse</option>
<option value="ace/theme/github">GitHub</option>
<option value="ace/theme/solarized_light">Solarized Light</option>
<option value="ace/theme/textmate" selected="selected">TextMate</option>
<option value="ace/theme/tomorrow">Tomorrow</option>
</optgroup>
<optgroup label="Dark">
<option value="ace/theme/clouds_midnight">Clouds Midnight</option>
<option value="ace/theme/cobalt">Cobalt</option>
<option value="ace/theme/idle_fingers">idleFingers</option>
<option value="ace/theme/kr_theme">krTheme</option>
<option value="ace/theme/merbivore">Merbivore</option>
<option value="ace/theme/merbivore_soft">Merbivore Soft</option>
<option value="ace/theme/mono_industrial">Mono Industrial</option>
<option value="ace/theme/monokai">Monokai</option>
<option value="ace/theme/pastel_on_dark">Pastel on dark</option>
<option value="ace/theme/solarized_dark">Solarized Dark</option>
<option value="ace/theme/twilight">Twilight</option>
<option value="ace/theme/tomorrow_night">Tomorrow Night</option>
<option value="ace/theme/tomorrow_night_blue">Tomorrow Night Blue</option>
<option value="ace/theme/tomorrow_night_bright">Tomorrow Night Bright</option>
<option value="ace/theme/tomorrow_night_eighties">Tomorrow Night 80s</option>
<option value="ace/theme/vibrant_ink">Vibrant Ink</option>
</optgroup>
</select>
</td>
</tr>
@ -139,8 +143,8 @@
</td>
</tr>
<tr><td colspan="2">
<table id="more-controls">
<tr><td colspan="2">
<table id="more-controls">
<tr>
<td>
<label for="select_style">Full Line Selection</label>
@ -162,6 +166,13 @@
<input type="checkbox" name="show_hidden" id="show_hidden" checked>
</td>
</tr>
<tr>
<td >
<label for="display_indent_guides">Show Indent Guides</label>
</td><td>
<input type="checkbox" name="display_indent_guides" id="display_indent_guides" checked>
</td>
</tr>
<tr>
<td >
<label for="show_hscroll">Persistent HScroll</label>
@ -218,7 +229,7 @@
<label for="fade_fold_widgets">Fade Fold Widgets</label>
</td>
<td>
<input type="checkbox" id="fade_fold_widgets" checked>
<input type="checkbox" id="fade_fold_widgets">
</td>
</tr>
</table>

13
lib/ace/editor.js
View file

@ -165,7 +165,7 @@ var Editor = function(renderer, session) {
this.$onTokenizerUpdate = this.onTokenizerUpdate.bind(this);
session.addEventListener("tokenizerUpdate", this.$onTokenizerUpdate);
this.$onChangeTabSize = this.renderer.updateText.bind(this.renderer);
this.$onChangeTabSize = this.renderer.onChangeTabSize.bind(this.renderer);
session.addEventListener("changeTabSize", this.$onChangeTabSize);
this.$onChangeWrapLimit = this.onChangeWrapLimit.bind(this);
@ -991,9 +991,6 @@ var Editor = function(renderer, session) {
* If `showInvisibiles` is set to `true`, invisible characters&mdash;like spaces or new lines&mdash;are show in the editor.
**/
this.setShowInvisibles = function(showInvisibles) {
if (this.getShowInvisibles() == showInvisibles)
return;
this.renderer.setShowInvisibles(showInvisibles);
};
@ -1006,6 +1003,14 @@ var Editor = function(renderer, session) {
return this.renderer.getShowInvisibles();
};
this.setDisplayIndentGuides = function(display) {
this.renderer.setDisplayIndentGuides(display);
};
this.getDisplayIndentGuides = function() {
return this.renderer.getDisplayIndentGuides();
};
/**
* Editor.setShowPrintMargin(showPrintMargin)
* - showPrintMargin (Boolean): Specifies whether or not to show the print margin

3
lib/ace/ext/static_highlight.js
View file

@ -72,11 +72,10 @@ exports.render = function(input, mode, theme, lineStart, disableGutter) {
var length = session.getLength();
for(var ix = 0; ix < length; ix++) {
var lineTokens = session.getTokens(ix);
stringBuilder.push("<div class='ace_line'>");
if (!disableGutter)
stringBuilder.push("<span class='ace_gutter ace_gutter-cell' unselectable='on'>" + (ix + lineStart) + "</span>");
textLayer.$renderLine(stringBuilder, 0, lineTokens, true);
textLayer.$renderLine(stringBuilder, 0, true, false);
stringBuilder.push("</div>");
}

195
lib/ace/layer/text.js
View file

@ -196,6 +196,7 @@ var Text = function(parentEl) {
this.setSession = function(session) {
this.session = session;
this.$computeTabString();
};
this.showInvisibles = false;
@ -204,28 +205,52 @@ var Text = function(parentEl) {
return false;
this.showInvisibles = showInvisibles;
this.$computeTabString();
return true;
};
this.displayIndentGuides = true;
this.setDisplayIndentGuides = function(display) {
if (this.displayIndentGuides == display)
return false;
this.displayIndentGuides = display;
this.$computeTabString();
return true;
};
this.$tabStrings = [];
this.onChangeTabSize =
this.$computeTabString = function() {
var tabSize = this.session.getTabSize();
this.tabSize = tabSize;
var tabStr = this.$tabStrings = [0];
for (var i = 1; i < tabSize + 1; i++) {
if (this.showInvisibles) {
tabStr.push("<span class='ace_invisible'>"
+ this.TAB_CHAR
+ new Array(i).join("&#160;")
+ Array(i).join("&#160;")
+ "</span>");
} else {
tabStr.push(new Array(i+1).join("&#160;"));
}
}
if (this.displayIndentGuides) {
this.$indentGuideRe = /\s\S| \t|\t |\s$/;
var className = "ace_indent-guide";
var content = Array(this.tabSize + 1).join("&#160;");
var tabContent = content;
if (this.showInvisibles) {
className += " ace_invisible";
tabContent = this.TAB_CHAR + content.substr(6);
}
this.$tabStrings[" "] = "<span class='" + className + "'>" + content + "</span>";
this.$tabStrings["\t"] = "<span class='" + className + "'>" + tabContent + "</span>";
}
};
this.updateLines = function(config, firstRow, lastRow) {
this.$computeTabString();
// Due to wrap line changes there can be new lines if e.g.
// the line to updated wrapped in the meantime.
if (this.config.lastRow != config.lastRow ||
@ -253,22 +278,32 @@ var Text = function(parentEl) {
lineElementsIdx ++;
}
for (var i=first; i<=last; i++) {
var row = first;
var foldLine = this.session.getNextFoldLine(row);
var foldStart = foldLine ? foldLine.start.row : Infinity;
while (true) {
if (row > foldStart) {
row = foldLine.end.row+1;
foldLine = this.session.getNextFoldLine(row, foldLine);
foldStart = foldLine ? foldLine.start.row :Infinity;
}
if (row > last)
break;
var lineElement = lineElements[lineElementsIdx++];
if (!lineElement)
continue;
var html = [];
var tokens = this.session.getTokens(i);
this.$renderLine(html, i, tokens, !this.$useLineGroups());
lineElement = dom.setInnerHtml(lineElement, html.join(""));
i = this.session.getRowFoldEnd(i);
if (lineElement) {
var html = [];
this.$renderLine(
html, row, !this.$useLineGroups(), row == foldStart ? foldLine : false
);
dom.setInnerHtml(lineElement, html.join(""));
}
row++;
}
};
this.scrollLines = function(config) {
this.$computeTabString();
var oldConfig = this.config;
this.config = config;
@ -321,8 +356,7 @@ var Text = function(parentEl) {
var html = [];
// Get the tokens per line as there might be some lines in between
// beeing folded.
var tokens = this.session.getTokens(row);
this.$renderLine(html, row, tokens, false);
this.$renderLine(html, row, false, row == foldStart ? foldLine : false);
// don't use setInnerHtml since we are working with an empty DIV
container.innerHTML = html.join("");
@ -341,7 +375,6 @@ var Text = function(parentEl) {
};
this.update = function(config) {
this.$computeTabString();
this.config = config;
var html = [];
@ -363,10 +396,7 @@ var Text = function(parentEl) {
if (this.$useLineGroups())
html.push("<div class='ace_line_group'>")
// Get the tokens per line as there might be some lines in between
// beeing folded.
var tokens = this.session.getTokens(row);
this.$renderLine(html, row, tokens, false);
this.$renderLine(html, row, false, row == foldStart ? foldLine : false);
if (this.$useLineGroups())
html.push("</div>"); // end the line group
@ -429,38 +459,44 @@ var Text = function(parentEl) {
return screenColumn + value.length;
};
this.$renderLineCore = function(stringBuilder, lastRow, tokens, splits, onlyContents) {
this.renderIndentGuide = function(stringBuilder, value) {
var cols = value.search(this.$indentGuideRe);
if (cols <= 0)
return value;
if (value[0] == " ") {
cols -= cols % this.tabSize;
stringBuilder.push(Array(cols/this.tabSize + 1).join(this.$tabStrings[" "]));
return value.substr(cols);
} else if (value[0] == "\t") {
stringBuilder.push(Array(cols + 1).join(this.$tabStrings["\t"]));
return value.substr(cols);
}
return value;
};
this.$renderWrappedLine = function(stringBuilder, tokens, splits, onlyContents) {
var chars = 0;
var split = 0;
var splitChars;
var splitChars = splits[0];
var screenColumn = 0;
var self = this;
if (!splits || splits.length == 0)
splitChars = Number.MAX_VALUE;
else
splitChars = splits[0];
if (!onlyContents) {
stringBuilder.push("<div class='ace_line' style='height:",
this.config.lineHeight, "px",
"'>"
);
}
for (var i = 0; i < tokens.length; i++) {
var token = tokens[i];
var value = token.value;
if (i == 0 && this.displayIndentGuides) {
chars = value.length;
value = this.renderIndentGuide(stringBuilder, value);
if (!value)
continue;
chars -= value.length;
}
if (chars + value.length < splitChars) {
screenColumn = self.$renderToken(
stringBuilder, screenColumn, token, value
);
screenColumn = this.$renderToken(stringBuilder, screenColumn, token, value);
chars += value.length;
}
else {
} else {
while (chars + value.length >= splitChars) {
screenColumn = self.$renderToken(
screenColumn = this.$renderToken(
stringBuilder, screenColumn,
token, value.substring(0, splitChars - chars)
);
@ -470,8 +506,7 @@ var Text = function(parentEl) {
if (!onlyContents) {
stringBuilder.push("</div>",
"<div class='ace_line' style='height:",
this.config.lineHeight, "px",
"'>"
this.config.lineHeight, "px'>"
);
}
@ -481,37 +516,70 @@ var Text = function(parentEl) {
}
if (value.length != 0) {
chars += value.length;
screenColumn = self.$renderToken(
screenColumn = this.$renderToken(
stringBuilder, screenColumn, token, value
);
}
}
}
};
this.$renderSimpleLine = function(stringBuilder, tokens) {
var screenColumn = 0;
var token = tokens[0];
var value = token.value;
if (this.displayIndentGuides)
value = this.renderIndentGuide(stringBuilder, value);
if (value)
screenColumn = this.$renderToken(stringBuilder, screenColumn, token, value);
for (var i = 1; i < tokens.length; i++) {
token = tokens[i];
value = token.value;
screenColumn = this.$renderToken(stringBuilder, screenColumn, token, value);
}
};
// row is either first row of foldline or not in fold
this.$renderLine = function(stringBuilder, row, onlyContents, foldLine) {
if (!foldLine && foldLine != false)
foldLine = this.session.getFoldLine(row);
if (foldLine)
var tokens = this.$getFoldLineTokens(row, foldLine);
else
var tokens = this.session.getTokens(row);
if (!onlyContents) {
stringBuilder.push(
"<div class='ace_line' style='height:", this.config.lineHeight, "px'>"
);
}
if (tokens.length) {
var splits = this.session.getRowSplitData(row);
if (splits && splits.length)
this.$renderWrappedLine(stringBuilder, tokens, splits, onlyContents);
else
this.$renderSimpleLine(stringBuilder, tokens);
}
if (this.showInvisibles) {
if (lastRow !== this.session.getLength() - 1)
stringBuilder.push("<span class='ace_invisible'>" + this.EOL_CHAR + "</span>");
else
stringBuilder.push("<span class='ace_invisible'>" + this.EOF_CHAR + "</span>");
if (foldLine)
row = foldLine.end.row
stringBuilder.push(
"<span class='ace_invisible'>",
row == this.session.getLength() - 1 ? this.EOF_CHAR : this.EOL_CHAR,
"</span>"
);
}
if (!onlyContents)
stringBuilder.push("</div>");
};
this.$renderLine = function(stringBuilder, row, tokens, onlyContents) {
// Check if the line to render is folded or not. If not, things are
// simple, otherwise, we need to fake some things...
if (!this.session.isRowFolded(row)) {
var splits = this.session.getRowSplitData(row);
this.$renderLineCore(stringBuilder, row, tokens, splits, onlyContents);
} else {
this.$renderFoldLine(stringBuilder, row, tokens, onlyContents);
}
};
this.$renderFoldLine = function(stringBuilder, row, tokens, onlyContents) {
this.$getFoldLineTokens = function(row, foldLine) {
var session = this.session;
var foldLine = session.getFoldLine(row);
var renderTokens = [];
function addTokens(tokens, from, to) {
@ -552,6 +620,7 @@ var Text = function(parentEl) {
}
}
var tokens = session.getTokens(row);
foldLine.walk(function(placeholder, row, column, lastColumn, isNewRow) {
if (placeholder) {
renderTokens.push({
@ -567,9 +636,7 @@ var Text = function(parentEl) {
}
}, foldLine.end.row, this.session.getLine(foldLine.end.row).length);
// splits for foldline are stored at its' first row
var splits = this.session.$useWrapMode ? this.session.$wrapData[row] : null;
this.$renderLineCore(stringBuilder, row, renderTokens, splits, onlyContents);
return renderTokens;
};
this.$useLineGroups = function() {

44
lib/ace/layer/text_test.js
View file

@ -67,35 +67,61 @@ module.exports = {
this.textLayer.$computeTabString();
// row with hard tabs
var row = 0;
var tokens = this.session.getTokens(row);
var stringBuilder = [];
this.textLayer.$renderLine(stringBuilder, row, tokens);
this.textLayer.$renderLine(stringBuilder, 0);
// row with soft tabs
row = 1;
tokens = this.session.getTokens(row);
var stringBuilder2 = [];
this.textLayer.$renderLine(stringBuilder2, row, tokens);
this.textLayer.$renderLine(stringBuilder2, 1);
assert.equal(stringBuilder.join(""), stringBuilder2.join(""));
},
"test rendering width of ideographic space (U+3000)" : function() {
this.session.setValue("\u3000");
var tokens = this.session.getTokens(0);
var stringBuilder = [];
this.textLayer.$renderLine(stringBuilder, 0, tokens, true);
this.textLayer.$renderLine(stringBuilder, 0, true);
assert.equal(stringBuilder.join(""), "<span class='ace_cjk' style='width:20px'></span>");
this.textLayer.setShowInvisibles(true);
var stringBuilder = [];
this.textLayer.$renderLine(stringBuilder, 0, tokens, true);
this.textLayer.$renderLine(stringBuilder, 0, true);
assert.equal(
stringBuilder.join(""),
"<span class='ace_cjk ace_invisible' style='width:20px'>" + this.textLayer.SPACE_CHAR + "</span>"
+ "<span class='ace_invisible'>\xB6</span>"
);
},
"test rendering of indent guides" : function() {
var textLayer = this.textLayer
var EOL = "<span class='ace_invisible'>" + textLayer.EOL_CHAR + "</span>";
var SPACE = function(i) {return Array(i+1).join("&#160;")}
var TAB = function(i) {return textLayer.TAB_CHAR + SPACE(i-1)}
function testRender(results) {
for (var i = results.length; i--; ) {
var stringBuilder = [];
textLayer.$renderLine(stringBuilder, i, true);
assert.equal(stringBuilder.join(""), results[i]);
}
}
this.session.setValue(" \n\t\tf\n ");
testRender([
"<span class='ace_indent-guide'>" + SPACE(4) + "</span>" + SPACE(2),
"<span class='ace_indent-guide'>" + SPACE(4) + "</span>" + SPACE(4) + "<span class='ace_identifier'>f</span>",
SPACE(3)
]);
this.textLayer.setShowInvisibles(true);
testRender([
"<span class='ace_indent-guide ace_invisible'>" + SPACE(4) + "</span>" + SPACE(2) + EOL,
"<span class='ace_indent-guide ace_invisible'>" + TAB(4) + "</span><span class='ace_invisible'>" + TAB(4) + "</span><span class='ace_identifier'>f</span>" + EOL,
]);
this.textLayer.setDisplayIndentGuides(false);
testRender([
SPACE(6) + EOL,
"<span class='ace_invisible'>" + TAB(4) + "</span><span class='ace_invisible'>" + TAB(4) + "</span><span class='ace_identifier'>f</span>" + EOL
]);
}
};

3
lib/ace/test/mockrenderer.js
View file

@ -154,6 +154,9 @@ MockRenderer.prototype.getScrollTopRow = function() {
MockRenderer.prototype.draw = function() {
};
MockRenderer.prototype.onChangeTabSize = function(startRow, endRow) {
};
MockRenderer.prototype.updateLines = function(startRow, endRow) {
};

6
lib/ace/theme/chrome.css
View file

@ -156,4 +156,8 @@ color:#FD971F;
.ace-chrome .ace_entity.ace_other.ace_attribute-name{
color: #994409;
}
}
.ace-chrome .ace_indent-guide {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAE0lEQVQImWP4////f4bLly//BwAmVgd1/w11/gAAAABJRU5ErkJggg==") right repeat-y;
}

4
lib/ace/theme/clouds.css
View file

@ -115,4 +115,8 @@
.ace-clouds .ace_markup.ace_underline {
text-decoration:underline;
}
.ace-clouds .ace_indent-guide {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAE0lEQVQImWP4////f4bLly//BwAmVgd1/w11/gAAAABJRU5ErkJggg==") right repeat-y;
}

4
lib/ace/theme/clouds_midnight.css
View file

@ -116,4 +116,8 @@ background-color:#E92E2E;
.ace-clouds-midnight .ace_markup.ace_underline {
text-decoration:underline;
}
.ace-clouds-midnight .ace_indent-guide {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAEklEQVQImWOQlJT8z1BeXv4fAA2KA6+h9Z+2AAAAAElFTkSuQmCC) right repeat-y;
}

4
lib/ace/theme/cobalt.css
View file

@ -142,4 +142,8 @@ background-color:#001221;
.ace-cobalt .ace_markup.ace_list {
background-color:#130D26;
}
.ace-cobalt .ace_indent-guide {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAEklEQVQImWNgUHL4zzBz5sz/AA80BCzv+WXhAAAAAElFTkSuQmCC) right repeat-y;
}

4
lib/ace/theme/crimson_editor.css
View file

@ -148,4 +148,8 @@
.ace-crimson-editor .ace_string.ace_regex {
color: rgb(192, 0, 192);
}
.ace-crimson-editor .ace_indent-guide {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAE0lEQVQImWP4////f4bLly//BwAmVgd1/w11/gAAAABJRU5ErkJggg==") right repeat-y;
}

4
lib/ace/theme/dawn.css
View file

@ -146,4 +146,8 @@ color:#5A525F;
.ace-dawn .ace_markup.ace_list {
color:#693A17;
}
.ace-dawn .ace_indent-guide {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAE0lEQVQImWP4+fPnf4ZVq1b9BwAkVQboFQv98gAAAABJRU5ErkJggg==) right repeat-y;
}

4
lib/ace/theme/dreamweaver.css
View file

@ -179,4 +179,8 @@
.ace-dreamweaver .ace_string.ace_regex {
color: rgb(255, 0, 0)
}
.ace-dreamweaver .ace_indent-guide {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAE0lEQVQImWP4////f4bLly//BwAmVgd1/w11/gAAAABJRU5ErkJggg==") right repeat-y;
}

4
lib/ace/theme/eclipse.css
View file

@ -99,4 +99,8 @@
.ace-eclipse .ace_marker-layer .ace_active_line {
background: rgb(232, 242, 254);
}
.ace-eclipse .ace_indent-guide {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAE0lEQVQImWP4////f4bLly//BwAmVgd1/w11/gAAAABJRU5ErkJggg==") right repeat-y;
}

4
lib/ace/theme/github.css
View file

@ -130,4 +130,8 @@
.ace-github .ace_print_margin {
width: 1px;
background: #e8e8e8;
}
.ace-github .ace_indent-guide {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAE0lEQVQImWP4////f4bLly//BwAmVgd1/w11/gAAAABJRU5ErkJggg==") right repeat-y;
}

6
lib/ace/theme/idle_fingers.css
View file

@ -133,5 +133,9 @@ color:#BC9458;
.ace-idle-fingers .ace_collab.ace_user1 {
color:#323232;
background-color:#FFF980;
background-color:#FFF980;
}
.ace-idle-fingers .ace_indent-guide {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAEklEQVQImWMwMjL6zzBz5sz/ABEUBGCqhK6UAAAAAElFTkSuQmCC) right repeat-y;
}

4
lib/ace/theme/kr_theme.css
View file

@ -137,4 +137,8 @@ color:#706D5B;
.ace-kr-theme .ace_markup.ace_list {
background-color:#0F0040;
}
.ace-kr-theme .ace_indent-guide {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAEklEQVQImWPg5uL8zzBz5sz/AA1WA+hUYIqjAAAAAElFTkSuQmCC) right repeat-y;
}

4
lib/ace/theme/merbivore.css
View file

@ -137,4 +137,8 @@ color:#AD2EA4;
.ace-merbivore .ace_markup.ace_underline {
text-decoration:underline;
}
.ace-merbivore .ace_indent-guide {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAEklEQVQImWMQExP7zzBz5sz/AA50BAyDznYhAAAAAElFTkSuQmCC) right repeat-y;
}

4
lib/ace/theme/merbivore_soft.css
View file

@ -143,4 +143,8 @@ color:#AC4BB8;
.ace-merbivore-soft .ace_markup.ace_underline {
text-decoration:underline;
}
.ace-merbivore-soft .ace_indent-guide {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAEklEQVQImWOQkZH5zzBz5sz/AA8EBB6crd1rAAAAAElFTkSuQmCC) right repeat-y;
}

4
lib/ace/theme/mono_industrial.css
View file

@ -145,4 +145,8 @@ background-color:#151C19;
.ace-mono-industrial .ace_markup.ace_underline {
text-decoration:underline;
}
.ace-mono-industrial .ace_indent-guide {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAEklEQVQImWNQ0tH4zzBz5sz/ABAOBECKH+evAAAAAElFTkSuQmCC) right repeat-y;
}

4
lib/ace/theme/monokai.css
View file

@ -142,4 +142,8 @@ color:#FD971F;
.ace-monokai .ace_markup.ace_underline {
text-decoration:underline;
}
.ace-monokai .ace_indent-guide {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAEklEQVQImWNQ11D6z7Bq1ar/ABCKBG6g04U2AAAAAElFTkSuQmCC) right repeat-y;
}

4
lib/ace/theme/pastel_on_dark.css
View file

@ -147,4 +147,8 @@ color:#D2A8A1;
.ace-pastel-on-dark .ace_markup.ace_underline {
text-decoration:underline;
}
.ace-pastel-on-dark .ace_indent-guide {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAEklEQVQImWPQ0dD4z9DR0fEfAA+vBBPqhbn1AAAAAElFTkSuQmCC) right repeat-y;
}

4
lib/ace/theme/solarized_dark.css
View file

@ -128,4 +128,8 @@ color:#657B83;
.ace-solarized-dark .ace_markup.ace_underline {
text-decoration:underline;
}
.ace-solarized-dark .ace_indent-guide {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAEklEQVQImWNg0Db7zzBz5sz/AA82BCv7wOIDAAAAAElFTkSuQmCC) right repeat-y;
}

4
lib/ace/theme/solarized_light.css
View file

@ -127,4 +127,8 @@
.ace-solarized-light .ace_markup.ace_underline {
text-decoration:underline;
}
.ace-solarized-light .ace_indent-guide {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAE0lEQVQImWP4++3xf4ZVq1b9BwAjxwbT1g3hiwAAAABJRU5ErkJggg==) right repeat-y;
}

4
lib/ace/theme/textmate.css
View file

@ -163,3 +163,7 @@
.ace-tm .ace_string.ace_regex {
color: rgb(255, 0, 0)
}
.ace-tm .ace_indent-guide {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAE0lEQVQImWP4////f4bLly//BwAmVgd1/w11/gAAAABJRU5ErkJggg==") right repeat-y;
}

4
lib/ace/theme/tomorrow.css
View file

@ -161,4 +161,8 @@ background-color:#8959A8;
.ace-tomorrow .ace_markup.ace_heading {
color:#718C00;
}
.ace-tomorrow .ace_indent-guide {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAE0lEQVQImWP4////f4bdu3f/BwAlfgctduB85QAAAABJRU5ErkJggg==) right repeat-y;
}

4
lib/ace/theme/tomorrow_night.css
View file

@ -161,4 +161,8 @@ background-color:#B798BF;
.ace-tomorrow-night .ace_markup.ace_heading {
color:#B5BD68;
}
.ace-tomorrow-night .ace_indent-guide {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAEklEQVQImWOQlVf8z7Bq1ar/AA/hBFp7egmpAAAAAElFTkSuQmCC) right repeat-y;
}

4
lib/ace/theme/tomorrow_night_blue.css
View file

@ -161,4 +161,8 @@ background-color:#EBBBFF;
.ace-tomorrow-night-blue .ace_markup.ace_heading {
color:#D1F1A9;
}
.ace-tomorrow-night-blue .ace_indent-guide {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAEklEQVQImWNgUAn8z7Bq1ar/ABBUBHJ4/r3JAAAAAElFTkSuQmCC) right repeat-y;
}

4
lib/ace/theme/tomorrow_night_bright.css
View file

@ -161,4 +161,8 @@ background-color:#B798BF;
.ace-tomorrow-night-bright .ace_markup.ace_heading {
color:#B9CA4A;
}
.ace-tomorrow-night-bright .ace_indent-guide {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAEklEQVQImWNgYGD4z7Bq1ar/AAz9A/2naJQKAAAAAElFTkSuQmCC) right repeat-y;
}

4
lib/ace/theme/tomorrow_night_eighties.css
View file

@ -157,4 +157,8 @@ background-color:#CC99CC;
.ace-tomorrow-night-eighties .ace_markup.ace_heading {
color:#99CC99;
}
.ace-tomorrow-night-eighties .ace_indent-guide {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAEklEQVQImWPQ1dX9z7Bq1ar/ABE1BITwhhuFAAAAAElFTkSuQmCC) right repeat-y;
}

4
lib/ace/theme/twilight.css
View file

@ -159,4 +159,8 @@ color:#5F5A60;
.ace-twilight .ace_markup.ace_list {
color:#F9EE98;
}
.ace-twilight .ace_indent-guide {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAEklEQVQImWMQERH5zzBz5sz/AA5EBAYqeZXWAAAAAElFTkSuQmCC) right repeat-y;
}

4
lib/ace/theme/vibrant_ink.css
View file

@ -138,4 +138,8 @@ color:#99CC99;
.ace-vibrant-ink .ace_markup.ace_underline {
text-decoration:underline;
}
.ace-vibrant-ink .ace_indent-guide {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAEklEQVQImWPg5+f/z7Bq1ar/AA5lBCqoLxsgAAAAAElFTkSuQmCC) right repeat-y;
}

15
lib/ace/virtual_renderer.js
View file

@ -105,7 +105,6 @@ var VirtualRenderer = function(container, theme) {
this.setHighlightGutterLine(true);
this.$gutterLayer = new GutterLayer(this.$gutter);
this.$gutterLayer.on("changeGutterWidth", this.onResize.bind(this, true));
this.setFadeFoldWidgets(true);
this.$markerBack = new MarkerLayer(this.content);
@ -250,6 +249,11 @@ var VirtualRenderer = function(container, theme) {
this.$loop.schedule(this.CHANGE_LINES);
};
this.onChangeTabSize = function() {
this.$loop.schedule(this.CHANGE_TEXT | this.CHANGE_MARKER);
this.$textLayer.onChangeTabSize();
};
/**
* VirtualRenderer.updateText() -> Void
*
@ -389,6 +393,15 @@ var VirtualRenderer = function(container, theme) {
return this.$textLayer.showInvisibles;
};
this.getDisplayIndentGuides = function() {
return this.$textLayer.displayIndentGuides;
};
this.setDisplayIndentGuides = function(display) {
if (this.$textLayer.setDisplayIndentGuides(display))
this.$loop.schedule(this.CHANGE_TEXT);
};
this.$showPrintMargin = true;
/**