add support for "gutter mouse events"

src/ace/Editor.js

@@ -35,6 +35,32 @@ ace.Editor = function(renderer, doc) {
 
 (function(){
 
+    ace.implement(this, ace.MEventEmitter);
+
+    this.$forwardEvents = {
+        gutterclick: 1,
+        gutterdblclick: 1
+    };
+
+    this.$originalAddEventListener = this.addEventListener;
+    this.$originalRemoveEventListener = this.removeEventListener;
+
+    this.addEventListener = function(eventName, callback) {
+        if (this.$forwardEvents[eventName]) {
+            return this.renderer.addEventListener(eventName, callback);
+        } else {
+            return this.$originalAddEventListener(eventName, callback);
+        }
+    };
+
+    this.removeEventListener = function(eventName, callback) {
+        if (this.$forwardEvents[eventName]) {
+            return this.renderer.removeEventListener(eventName, callback);
+        } else {
+            return this.$originalRemoveEventListener(eventName, callback);
+        }
+    };
+
     this.setDocument = function(doc) {
         if (this.doc == doc) return;
 
@@ -227,8 +253,7 @@ ace.Editor = function(renderer, doc) {
             if (mousePageX === undefined || mousePageY === undefined)
                 return;
 
-            selectionLead = _self.renderer.screenToTextCoordinates(mousePageX,
-                                                                   mousePageY);
+            selectionLead = _self.renderer.screenToTextCoordinates(mousePageX, mousePageY);
 
             _self.selection.selectToPosition(selectionLead);
             _self.renderer.scrollCursorIntoView();

src/ace/VirtualRenderer.js

@@ -8,15 +8,15 @@ ace.VirtualRenderer = function(container) {
     this.scroller.className = "scroller";
     this.container.appendChild(this.scroller);
 
-    this.gutter = document.createElement("div");
-    this.gutter.className = "gutter";
-    this.container.appendChild(this.gutter);
+    this.$gutter = document.createElement("div");
+    this.$gutter.className = "gutter";
+    this.container.appendChild(this.$gutter);
 
     this.content = document.createElement("div");
     this.scroller.appendChild(this.content);
 
-    this.gutterLayer = new ace.layer.Gutter(this.gutter);
-    this.markerLayer = new ace.layer.Marker(this.content);
+    this.$gutterLayer = new ace.layer.Gutter(this.$gutter);
+    this.$markerLayer = new ace.layer.Marker(this.content);
 
     var textLayer = this.textLayer = new ace.layer.Text(this.content);
     this.canvas = textLayer.element;
@@ -26,7 +26,7 @@ ace.VirtualRenderer = function(container) {
 
     this.cursorLayer = new ace.layer.Cursor(this.content);
 
-    this.layers = [ this.markerLayer, textLayer, this.cursorLayer ];
+    this.layers = [ this.$markerLayer, textLayer, this.cursorLayer ];
 
     this.scrollBar = new ace.ScrollBar(container);
     this.scrollBar.addEventListener("scroll", ace.bind(this.onScroll, this));
@@ -40,14 +40,19 @@ ace.VirtualRenderer = function(container) {
 
     this.$updatePrintMargin();
     this.onResize();
+
+    ace.addListener(this.$gutter, "click", ace.bind(this.$onGutterClick, this));
+    ace.addListener(this.$gutter, "dblclick", ace.bind(this.$onGutterClick, this));
 };
 
 (function() {
 
+    ace.implement(this, ace.MEventEmitter);
+
     this.setDocument = function(doc) {
         this.lines = doc.lines;
         this.doc = doc;
-        this.markerLayer.setDocument(doc);
+        this.$markerLayer.setDocument(doc);
         this.textLayer.setDocument(doc);
     };
 
@@ -55,6 +60,19 @@ ace.VirtualRenderer = function(container) {
         this.textLayer.setTokenizer(tokenizer);
     };
 
+    this.$onGutterClick = function(e) {
+        var pageX = ace.getDocumentX(e);
+        var pageY = ace.getDocumentY(e);
+
+        var event = {
+            row: this.screenToTextCoordinates(pageX, pageY).row,
+            htmlEvent: e
+        };
+
+        var type = "gutter" + e.type;
+        this.$dispatchEvent(type, event);
+    };
+
     this.$showInvisibles = true;
     this.setShowInvisibles = function(showInvisibles) {
         this.$showInvisibles = showInvisibles;
@@ -92,7 +110,7 @@ ace.VirtualRenderer = function(container) {
         if (!this.$printMarginEl) {
             this.$printMarginEl = document.createElement("div");
             this.$printMarginEl.className = "printMargin";
-            this.content.insertBefore(this.$printMarginEl, this.gutter.element);
+            this.content.insertBefore(this.$printMarginEl, this.$gutter.element);
         }
 
         var style = this.$printMarginEl.style;
@@ -123,7 +141,7 @@ ace.VirtualRenderer = function(container) {
         this.scrollBar.setHeight(height);
 
         var width = ace.getInnerWidth(this.container);
-        var gutterWidth = this.gutter.offsetWidth;
+        var gutterWidth = this.$gutter.offsetWidth;
         this.scroller.style.left = gutterWidth + "px";
         this.scroller.style.width = Math.max(0, width - gutterWidth - this.scrollBar.getWidth()) + "px";
 
@@ -194,8 +212,8 @@ ace.VirtualRenderer = function(container) {
             layer.update(layerConfig);
         };
 
-        this.gutterLayer.element.style.marginTop = (-offset) + "px";
-        this.gutterLayer.update(layerConfig);
+        this.$gutterLayer.element.style.marginTop = (-offset) + "px";
+        this.$gutterLayer.update(layerConfig);
 
         this.$updateScrollBar();
     };
@@ -203,11 +221,11 @@ ace.VirtualRenderer = function(container) {
     this.addMarker = function(range, clazz, type) {
         range.start = this.$documentToScreenPosition(range.start);
         range.end = this.$documentToScreenPosition(range.end);
-        return this.markerLayer.addMarker(range, clazz, type);
+        return this.$markerLayer.addMarker(range, clazz, type);
     };
 
     this.removeMarker = function(markerId) {
-        this.markerLayer.removeMarker(markerId);
+        this.$markerLayer.removeMarker(markerId);
     };
 
     this.updateCursor = function(position, overwrite) {