support dynamic change of selection style

This commit is contained in:
Fabian Jakobs 2010-04-15 17:09:11 +02:00
commit e37af546d5
4 changed files with 47 additions and 15 deletions

View file

@ -55,16 +55,20 @@
<body> <body>
<table id="controls"> <table id="controls">
<tr> <tr>
<td> <td>
<label for="mode">Mode:</label> <label for="mode">Mode:</label>
<select id="mode" size="1"> <select id="mode" size="1">
<option value="text">Plain Text</option> <option value="text">Plain Text</option>
<option value="javascript">JavaScript</option> <option value="javascript">JavaScript</option>
<option value="xml">XML</option> <option value="xml">XML</option>
</select> </select>
</td> </td>
</tr> <td>
<label for="select_style">Full line selections</label>
<input type="checkbox" name="select_style" id="select_style" checked>
</td>
</tr>
</table> </table>
<div id="container"> <div id="container">
@ -87,6 +91,16 @@ function getMode() {
return modes[modeEl.value]; return modes[modeEl.value];
} }
var selectEl = document.getElementById("select_style");
selectEl.onchange = function() {
if (selectEl.checked) {
editor.setSelectionStyle("line");
} else {
editor.setSelectionStyle("text");
}
};
var container = document.getElementById("container"); var container = document.getElementById("container");
var editor = new ace.Editor( var editor = new ace.Editor(
new ace.VirtualRenderer(container), new ace.VirtualRenderer(container),

View file

@ -21,6 +21,8 @@ ace.Editor = function(renderer, doc, mode) {
this.renderer.draw(); this.renderer.draw();
this.onCursorChange(); this.onCursorChange();
this.onSelectionChange(); this.onSelectionChange();
this._initialized = true;
}; };
ace.Editor.prototype.setDocument = function(doc) { ace.Editor.prototype.setDocument = function(doc) {
@ -69,6 +71,10 @@ ace.Editor.prototype.setMode = function(mode) {
} }
this.renderer.setTokenizer(this.bgTokenizer); this.renderer.setTokenizer(this.bgTokenizer);
if (this._initialized) {
this.renderer.draw();
}
}; };
@ -79,7 +85,6 @@ ace.Editor.prototype.resize = function()
}; };
ace.Editor.prototype._highlightBrackets = function() { ace.Editor.prototype._highlightBrackets = function() {
if (this._bracketHighlight) { if (this._bracketHighlight) {
this.renderer.removeMarker(this._bracketHighlight); this.renderer.removeMarker(this._bracketHighlight);
this._bracketHighlight = null; this._bracketHighlight = null;
@ -146,7 +151,8 @@ ace.Editor.prototype.onSelectionChange = function() {
if (!this.selection.isEmpty()) { if (!this.selection.isEmpty()) {
var range = this.selection.getRange(); var range = this.selection.getRange();
this.selectionMarker = this.renderer.addMarker(range, "selection", "text"); var style = this.getSelectionStyle();
this.selectionMarker = this.renderer.addMarker(range, "selection", style);
} }
this.onCursorChange(); this.onCursorChange();
@ -256,6 +262,18 @@ ace.Editor.prototype.onTextInput = function(text) {
this.renderer.scrollCursorIntoView(); this.renderer.scrollCursorIntoView();
}; };
ace.Editor.prototype._selectionStyle = "line";
ace.Editor.prototype.setSelectionStyle = function(style) {
if (this._selectionStyle == style) return;
this._selectionStyle = style;
this.onSelectionChange();
};
ace.Editor.prototype.getSelectionStyle = function() {
return this._selectionStyle;
};
ace.Editor.prototype.removeRight = function() { ace.Editor.prototype.removeRight = function() {
if (this.selection.isEmpty()) { if (this.selection.isEmpty()) {
this.selection.selectRight(); this.selection.selectRight();

View file

@ -67,7 +67,7 @@ ace.MarkerLayer.prototype.update = function(config) {
} }
if (range.start.row !== range.end.row) { if (range.start.row !== range.end.row) {
if (marker.type == "line") { if (marker.type == "text") {
this.drawTextMarker(html, range, marker.clazz, config); this.drawTextMarker(html, range, marker.clazz, config);
} else { } else {
this.drawMultiLineMarker(html, range, marker.clazz, config); this.drawMultiLineMarker(html, range, marker.clazz, config);

View file

@ -111,8 +111,8 @@ ace.VirtualRenderer.prototype.draw = function() {
this.gutterLayer.update(layerConfig); this.gutterLayer.update(layerConfig);
}; };
ace.VirtualRenderer.prototype.addMarker = function(range, clazz) { ace.VirtualRenderer.prototype.addMarker = function(range, clazz, type) {
return this.markerLayer.addMarker(range, clazz); return this.markerLayer.addMarker(range, clazz, type);
}; };
ace.VirtualRenderer.prototype.removeMarker = function(markerId) { ace.VirtualRenderer.prototype.removeMarker = function(markerId) {