implement gutter markers

codemirror · Feb 5, 2011 · d9aac3c · d9aac3c
1 parent a2366bc
commit d9aac3c
Showing 1 changed file with 25 additions and 9 deletions.
diff --git a/lib/codemirror.js b/lib/codemirror.js
@@ -146,7 +146,7 @@ var CodeMirror = (function() {
     this.styles = styles || [text, null];
     this.stateAfter = null;
     this.text = text;
-    this.marked = null;
+    this.marked = null; this.gutterMarker = null;
   }
   Line.prototype = {
     replace: function(from, to, text) {
@@ -801,15 +801,16 @@ var CodeMirror = (function() {
       if (!options.gutter) return;
       gutter.style.height = Math.max(lineDiv.offsetHeight, code.clientHeight - 2 * space.offsetTop) + "px";
       var html = [];
-      if (options.lineNumbers) {
-        var first = String(showingFrom + 1), last = String(lines.length);
-        while (first.length < last.length) first = "\u00a0" + first;
-        html.push("<div>" + first + "</div>");
-        for (var i = showingFrom + 1; i < showingTo; ++i)
-          html.push("<div>" + (i + 1) + "</div>");
+      for (var i = showingFrom; i < showingTo; ++i) {
+        var marker = lines[i].gutterMarker;
+        if (marker) html.push('<div class="' + marker.style + '">' + htmlEscape(marker.text) + '</div>');
+        else html.push("<div>" + (options.lineNumbers ? i + 1 : "\u00a0") + "</div>");
       }
       gutter.style.display = "none"; // TODO test whether this actually helps
       gutter.innerHTML = html.join("");
+      var minwidth = String(lines.length).length, firstNode = gutter.firstChild.firstChild, val = firstNode.nodeValue;
+      while (val.length < minwidth) val = "\u00a0" + val;
+      firstNode.nodeValue = val;
       gutter.style.display = "";
       lineDiv.parentNode.style.marginLeft = gutter.offsetWidth + "px";
     }
@@ -865,6 +866,7 @@ var CodeMirror = (function() {
       }
       else cursor.style.display = "none";
     }
+    function clipLine(n) {return Math.max(0, Math.min(n, lines.length-1));}
     function clipPos(pos) {
       if (pos.line < 0) return {line: 0, ch: 0};
       if (pos.line >= lines.length) return {line: lines.length-1, ch: lines[lines.length-1].text.length};
@@ -988,6 +990,18 @@ var CodeMirror = (function() {
       else lineDiv.parentNode.style.marginLeft = 0;
     }
 
+    function addGutterMarker(line, text, className) {
+      if (typeof line == "number") line = lines[clipLine(line)];
+      line.gutterMarker = {text: text, style: className};
+      updateGutter();
+      return line;
+    }
+    function removeGutterMarker(line) {
+      if (typeof line == "number") line = lines[clipLine(line)];
+      line.gutterMarker = null;
+      updateGutter();
+    }
+
     function charX(line, pos) {
       var text = lines[line].text;
       if (text.lastIndexOf("\t", pos) == -1) return pos * charWidth();
@@ -1033,8 +1047,8 @@ var CodeMirror = (function() {
           x = e.pageX() - off.left,
           y = e.pageY() - off.top;
       if (e.target() == code && y < (lines.length * lineHeight())) return null;
-      var line = showingFrom + Math.floor(y / lineHeight()), clipLine = Math.min(Math.max(0, line), lines.length-1);
-      return clipPos({line: line, ch: charFromX(clipLine, x)});
+      var line = showingFrom + Math.floor(y / lineHeight());
+      return clipPos({line: line, ch: charFromX(clipLine(line), x)});
     }
 
     function restartBlink() {
@@ -1333,6 +1347,8 @@ var CodeMirror = (function() {
       redo: operation(redo),
       getSearchCursor: function(query, pos, caseFold) {return new SearchCursor(query, pos, caseFold);},
       markText: operation(function(a, b, c){return operation(markText(a, b, c));}),
+      setMarker: addGutterMarker,
+      clearMarker: removeGutterMarker,
       matchBrackets: operation(matchBrackets),
 
       lineCount: function() {return lines.length;},