diff --git a/css/editor.css b/css/editor.css
index 5000cb73..32cd9d98 100644
--- a/css/editor.css
+++ b/css/editor.css
@@ -53,12 +53,14 @@
}
.text-layer {
+ z-index: 2;
font-family: Monaco, "Courier New", monospace;
font-size: 12px;
cursor: text;
}
.cursor {
+ z-index: 3;
position: absolute;
width: 2px;
background: black;
@@ -89,13 +91,25 @@
color: rgb(104, 104, 91);
}
+.marker-layer {
+ z-index: 1;
+}
+
.marker-layer .selection {
position: absolute;
- background: rgba(77, 151, 255, 0.33);
+ z-index: 2;
+ background: rgb(181, 213, 255);
}
.marker-layer .bracket {
position: absolute;
+ z-index: 3;
margin: -1px 0 0 -1px;
border: 1px solid rgb(192, 192, 192);
+}
+
+.marker-layer .active_line {
+ position: absolute;
+ z-index: 1;
+ background: rgb(232, 242, 254);
}
\ No newline at end of file
diff --git a/demo/editor.html b/demo/editor.html
index 56629d02..79248fff 100644
--- a/demo/editor.html
+++ b/demo/editor.html
@@ -68,6 +68,10 @@
+
+
+
+ |
@@ -100,6 +104,10 @@ selectEl.onchange = function() {
}
};
+var selectEl = document.getElementById("highlight_active");
+selectEl.onchange = function() {
+ editor.setHighlightActiveLine(!!selectEl.checked);
+};
var container = document.getElementById("container");
var editor = new ace.Editor(
diff --git a/src/Editor.js b/src/Editor.js
index 55ca87de..216f4a43 100644
--- a/src/Editor.js
+++ b/src/Editor.js
@@ -15,7 +15,8 @@ ace.Editor = function(renderer, doc, mode) {
ace.addTripleClickListener(container, ace.bind(this.onMouseTripleClick, this));
ace.addMouseWheelListener(container, ace.bind(this.onMouseWheel, this));
- this.selectionMarker = null;
+ this._selectionMarker = null;
+ this._highlightLineMarker = null;
this._blockScrolling = false;
this.renderer.draw();
@@ -141,18 +142,41 @@ ace.Editor.prototype.onCursorChange = function() {
if (!this._blockScrolling) {
this.renderer.scrollCursorIntoView();
}
+ this._updateHighlightActiveLine();
+};
+
+ace.Editor.prototype._updateHighlightActiveLine = function() {
+ if (this._highlightLineMarker) {
+ this.renderer.removeMarker(this._highlightLineMarker);
+ }
+ this._highlightLineMarker = null;
+
+ if (this.getHighlightActiveLine() && !this.selection.isMultiLine()) {
+ var cursor = this.getCursorPosition();
+ var range = {
+ start: {
+ row: cursor.row,
+ column: 0
+ },
+ end: {
+ row: cursor.row+1,
+ column: 0
+ }
+ };
+ this._highlightLineMarker = this.renderer.addMarker(range, "active_line", "line");
+ }
};
ace.Editor.prototype.onSelectionChange = function() {
- if (this.selectionMarker) {
- this.renderer.removeMarker(this.selectionMarker);
+ if (this._selectionMarker) {
+ this.renderer.removeMarker(this._selectionMarker);
}
- this.selectionMarker = null;
+ this._selectionMarker = null;
if (!this.selection.isEmpty()) {
var range = this.selection.getRange();
var style = this.getSelectionStyle();
- this.selectionMarker = this.renderer.addMarker(range, "selection", style);
+ this._selectionMarker = this.renderer.addMarker(range, "selection", style);
}
this.onCursorChange();
@@ -274,6 +298,18 @@ ace.Editor.prototype.getSelectionStyle = function() {
return this._selectionStyle;
};
+ace.Editor.prototype._highlightActiveLine = true;
+ace.Editor.prototype.setHighlightActiveLine = function(shouldHighlight) {
+ if (this._highlightActiveLine == shouldHighlight) return;
+
+ this._highlightActiveLine = shouldHighlight;
+ this._updateHighlightActiveLine();
+};
+
+ace.Editor.prototype.getHighlightActiveLine = function() {
+ return this._highlightActiveLine;
+};
+
ace.Editor.prototype.removeRight = function() {
if (this.selection.isEmpty()) {
this.selection.selectRight();
diff --git a/src/MarkerLayer.js b/src/MarkerLayer.js
index 90d28b65..9e2ed0dc 100644
--- a/src/MarkerLayer.js
+++ b/src/MarkerLayer.js
@@ -54,8 +54,8 @@ ace.MarkerLayer.prototype.update = function(config) {
if (range.end.row > config.lastRow) {
range.end = {
- row: config.lastRow,
- column: this.doc.getLine(config.lastRow).length
+ row: config.lastRow+1,
+ column: 0
};
}